:root{
  --ground:#FBFAF7; --surface:#FFFFFF; --surface-2:#F4F0E9;
  --ink:#1B2331; --body:#3A3B3E; --muted:#6C6255;
  --line:#E2DCD2; --line-strong:#CFC6B8;
  --accent:#C25E27; --accent-ink:#8E441B; --accent-wash:#F6E9DE;
  --navy:#1B2331; --navy-ink:#EFEAE1;
  --maxw:820px;
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:76px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#12161D; --surface:#1A2029; --surface-2:#222A35;
    --ink:#EDE9E2; --body:#C9C4BB; --muted:#948C7F;
    --line:#2C3542; --line-strong:#3D4857;
    --accent:#E08A4C; --accent-ink:#F0B384; --accent-wash:#2A2119;
    --navy:#0D1116; --navy-ink:#EFEAE1;
  }
}
:root[data-theme="dark"]{
  --ground:#12161D; --surface:#1A2029; --surface-2:#222A35;
  --ink:#EDE9E2; --body:#C9C4BB; --muted:#948C7F;
  --line:#2C3542; --line-strong:#3D4857;
  --accent:#E08A4C; --accent-ink:#F0B384; --accent-wash:#2A2119;
  --navy:#0D1116; --navy-ink:#EFEAE1;
}
*{box-sizing:border-box}
body{background:var(--ground); color:var(--body);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px; line-height:1.75; letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:"Gowun Batang","Apple SD Gothic Neo",serif; color:var(--ink); text-wrap:balance; margin:0; font-weight:700; letter-spacing:-.02em; word-break:keep-all}
h1{font-size:clamp(28px,4.6vw,42px); line-height:1.3}
h2{font-size:clamp(21px,2.8vw,26px); line-height:1.4}
h3{font-size:17px; line-height:1.5}
p{margin:0}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.notice{background:var(--accent-wash); border-bottom:1px solid var(--line-strong)}
.notice .wrap{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; padding-top:10px; padding-bottom:10px}
.notice b{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--accent-ink);
  border:1px solid var(--accent); padding:2px 7px; font-weight:500}
.notice span{font-size:13px; color:var(--muted); line-height:1.6}

.mast{border-bottom:1px solid var(--line); background:var(--surface)}
.mast .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:20px; padding-bottom:20px; flex-wrap:wrap}
.mast img{height:26px; width:auto; display:block}
.mast .svc{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase}
.brandline{display:flex; align-items:center; gap:14px}
.brandline .sep{width:1px; height:22px; background:var(--line-strong)}
.brandline .kr{font-family:"Gowun Batang",serif; font-size:15px; color:var(--ink); text-decoration:none}

.days{border-bottom:1px solid var(--line); background:var(--surface)}
.days .wrap{display:flex; gap:6px; overflow-x:auto; padding-top:12px; padding-bottom:12px; scrollbar-width:thin}
.day{flex:0 0 auto; font-size:13px; padding:5px 12px; border:1px solid var(--line-strong); color:var(--muted); background:transparent; white-space:nowrap; text-decoration:none}
a.day:hover{color:var(--ink); border-color:var(--ink)}
.day[aria-current="page"]{background:var(--ink); color:var(--ground); border-color:var(--ink); font-weight:500}
.day.todo{border-style:dashed; opacity:.62}

.hero{padding:var(--s6) 0 var(--s5)}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.18em; color:var(--accent-ink); margin-bottom:var(--s2)}
.hero h1{margin-bottom:var(--s3)}
.lede{font-size:17px; line-height:1.9; color:var(--body); max-width:62ch}
.summary{margin-top:var(--s4); border-left:3px solid var(--accent); padding:2px 0 2px 20px}
.summary .tag{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--muted); display:block; margin-bottom:6px}
.summary p{font-size:15.5px; line-height:1.85; max-width:62ch}

section{padding:var(--s5) 0; border-top:1px solid var(--line)}
.sechead{display:flex; align-items:baseline; gap:14px; margin-bottom:var(--s4); flex-wrap:wrap}
.sechead .num{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; color:var(--ground); background:var(--ink); padding:3px 7px}
.sechead .note{font-size:13px; color:var(--muted); margin-left:auto}

.mat{background:var(--surface-2); border:1px solid var(--line-strong); padding:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.dish{background:var(--surface); border:1px solid var(--line-strong); border-radius:3px; padding:14px 10px; text-align:center}
.dish .n{font-family:"Gowun Batang",serif; font-size:15px; color:var(--ink); display:block}
.dish .s{font-size:11.5px; color:var(--muted); display:block; margin-top:2px}
.dish.main{grid-column:1/-1; background:var(--accent-wash); border-color:var(--accent)}
.dish.main .n{color:var(--accent-ink); font-size:17px}
.dish.blank{background:transparent; border-style:dashed; color:var(--muted); font-size:11.5px; display:flex; align-items:center; justify-content:center}
.matcap{font-size:12.5px; color:var(--muted); margin-top:10px}

.tl{display:grid; gap:0}
.tlrow{display:grid; grid-template-columns:96px 1fr; gap:20px; padding:var(--s3) 0; border-bottom:1px solid var(--line)}
.tlrow:first-child{border-top:1px solid var(--line-strong)}
.tlrow:last-child{border-bottom:1px solid var(--line-strong)}
.tlrow .t{font-family:"IBM Plex Mono",monospace; font-size:15px; color:var(--accent-ink); font-weight:500; padding-top:2px}
.tlrow .t small{display:block; font-size:11px; color:var(--muted); letter-spacing:.04em; font-weight:400; margin-top:2px}
.tlrow h3{margin-bottom:5px}
.tlrow p{font-size:14.5px; line-height:1.8}
.tlrow.now{background:var(--accent-wash); margin:0 -16px; padding-left:16px; padding-right:16px}

.recipes{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.rc{background:var(--surface); padding:var(--s3)}
.rc header{display:flex; gap:14px; align-items:flex-start; margin-bottom:var(--s2)}
.rc .thumb{flex:0 0 64px; width:64px; height:64px; border:1px solid var(--line-strong); background:#fff; overflow:hidden}
.rc .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.rc h3{margin-bottom:2px}
.rc .prod{font-size:12px; color:var(--accent-ink); font-weight:500}
.rc dl{margin:0; font-size:14px; line-height:1.8}
.rc dt{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; color:var(--muted); margin-top:12px}
.rc dd{margin:2px 0 0}
.rc .step{counter-reset:s; margin:0; padding:0; list-style:none}
.rc .step li{position:relative; padding-left:22px; margin-top:5px}
.rc .step li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:4px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; line-height:14px; width:14px; height:14px; text-align:center;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line-strong)}
.amt{background:var(--accent-wash); color:var(--accent-ink); padding:1px 5px; font-weight:500; white-space:nowrap}

.fail{border:1px solid var(--line-strong); border-left:3px solid var(--ink); padding:var(--s3); background:var(--surface)}
.fail h3{margin-bottom:6px}
.fail p{font-size:14.5px; line-height:1.85}

.gift{background:var(--navy); color:var(--navy-ink); padding:var(--s6) 0}
.gift h2,.gift h3{color:var(--navy-ink)}
.gift .inner{display:grid; grid-template-columns:200px 1fr; gap:var(--s4); align-items:start}
.gift .shot{border:1px solid rgba(255,255,255,.18); background:#fff}
.gift .shot img{width:100%; display:block}
.gift .eyebrow{color:#E3A472}
.gift p{color:#CFC9BE; font-size:15px; line-height:1.85}
.gift .why{margin-top:var(--s3); display:grid; gap:9px}
.gift .why div{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; font-size:14px}
.gift .why b{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; color:#0D1116; background:#E3A472; padding:2px 6px; font-weight:500; white-space:nowrap}
.gift .cta{display:inline-block; margin-top:var(--s3); border:1px solid #E3A472; color:#E3A472; padding:9px 18px; font-size:14px; text-decoration:none}
.gift .cta:hover{background:#E3A472; color:#0D1116}

.story{background:var(--surface-2); border:1px solid var(--line); padding:var(--s4)}
.story blockquote{margin:0; font-family:"Gowun Batang",serif; font-size:19px; line-height:1.85; color:var(--ink)}
.story cite{display:block; margin-top:var(--s2); font-style:normal; font-size:13px; color:var(--muted)}
.story .after{margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line-strong); font-size:14.5px; line-height:1.85}

.faq{display:grid; gap:0; border-top:1px solid var(--line-strong)}
.faq div{padding:var(--s3) 0; border-bottom:1px solid var(--line)}
.faq h3{margin-bottom:6px}
.faq h3::before{content:"Q. "; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent-ink); letter-spacing:.06em}
.faq p{font-size:14.5px; line-height:1.85; max-width:64ch}

/* home */
.hgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.hcard{background:var(--surface); padding:var(--s3); display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit}
a.hcard:hover{background:var(--surface-2)}
.hcard .top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.hcard .nm{font-family:"Gowun Batang",serif; font-size:18px; color:var(--ink)}
.hcard .st{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.12em; padding:2px 6px; border:1px solid var(--line-strong); color:var(--muted); white-space:nowrap}
.hcard.ready .st{background:var(--accent); border-color:var(--accent); color:#fff}
.hcard .ss{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); letter-spacing:.02em}
.hcard .cl{font-size:13.5px; line-height:1.7; color:var(--body); margin-top:2px}
.hcard.todo{opacity:.66}
.diffs{display:grid; gap:0; border-top:1px solid var(--line-strong)}
.diffs div{display:grid; grid-template-columns:110px 1fr; gap:20px; padding:var(--s3) 0; border-bottom:1px solid var(--line); align-items:baseline}
.diffs b{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--accent-ink); font-weight:500}
.diffs p{font-size:14.5px; line-height:1.8}

footer{border-top:1px solid var(--line-strong); padding:var(--s5) 0 var(--s6); margin-top:var(--s5)}
footer .grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
footer h3{font-size:13px; font-family:"IBM Plex Mono",monospace; letter-spacing:.14em; color:var(--muted); font-weight:400; margin-bottom:10px}
footer ul{margin:0; padding:0; list-style:none; font-size:14px; line-height:1.95; color:var(--muted)}
footer li::before{content:"— "; color:var(--line-strong)}
footer .fine{margin-top:var(--s4); font-size:12.5px; color:var(--muted); line-height:1.8}
.backlink{display:inline-block; margin-top:var(--s3); font-size:13.5px; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.backlink:hover{color:var(--ink)}

@media (max-width:640px){
  .gift .inner{grid-template-columns:1fr}
  .gift .shot{max-width:190px}
  .tlrow{grid-template-columns:74px 1fr; gap:14px}
  footer .grid{grid-template-columns:1fr}
  .mat{grid-template-columns:repeat(2,1fr)}
  .diffs div{grid-template-columns:1fr; gap:4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* --- 브랜드 이야기 / 오늘의 요리 --- */
.day.alt{border-style:solid; border-color:var(--accent); color:var(--accent-ink)}
.day.alt[aria-current="page"]{background:var(--accent); border-color:var(--accent); color:#fff}
.prose{max-width:64ch}
.prose .para{font-size:15.5px; line-height:1.95; margin-bottom:var(--s3)}
.prose .para:last-child{margin-bottom:0}
.prose .disclaim{margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.75; color:var(--muted)}
.evts{margin:0; padding:0; list-style:none; font-size:14.5px; line-height:1.85}
.evts li{position:relative; padding-left:14px}
.evts li::before{content:""; position:absolute; left:0; top:11px; width:5px; height:5px; background:var(--line-strong)}
.awards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0 var(--s4);
  border-top:1px solid var(--line-strong)}
.awards div{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.awards b{font-size:12px; color:var(--accent-ink); font-weight:500}
.mgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.mgroup{background:var(--surface); padding:var(--s3)}
.mgroup b{display:block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  color:var(--accent-ink); margin-bottom:9px; font-weight:500}
.mgroup ul{margin:0; padding:0; list-style:none; font-size:14px; line-height:1.8; color:var(--body)}
.mgroup li{position:relative; padding-left:13px}
.mgroup li::before{content:""; position:absolute; left:0; top:11px; width:5px; height:5px; background:var(--line-strong)}
.storylink{display:inline-block; margin-top:var(--s3); font-size:13.5px; color:var(--accent-ink);
  text-decoration:none; border-bottom:1px solid var(--accent)}
.ctabox{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  background:var(--navy); color:var(--navy-ink); padding:var(--s4); margin-top:var(--s5)}
.ctabox h3{color:var(--navy-ink); margin-bottom:4px}
.ctabox p{color:#CFC9BE; font-size:14px}
.cta-dark{border:1px solid #E3A472; color:#E3A472; padding:9px 18px; font-size:14px; text-decoration:none; white-space:nowrap}
.cta-dark:hover{background:#E3A472; color:#0D1116}
.lead-note{font-size:14.5px; line-height:1.8; color:var(--muted); margin-bottom:var(--s3); max-width:62ch}
.dishlist{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.dishrow{display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center;
  background:var(--surface); padding:13px var(--s3); text-decoration:none; color:inherit}
.dishrow:hover{background:var(--surface-2)}
.dishrow .thumb{width:52px; height:52px; border:1px solid var(--line-strong); background:#fff; overflow:hidden}
.dishrow .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.dishrow .txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.dishrow .nm{font-family:"Gowun Batang",serif; font-size:16px; color:var(--ink)}
.dishrow .mt{font-size:12.5px; color:var(--muted)}
.dishrow .dt{font-size:12px; color:var(--muted)}
.dishgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.dishcard{display:grid; grid-template-columns:72px 1fr; gap:16px; background:var(--surface);
  padding:var(--s3); text-decoration:none; color:inherit}
.dishcard:hover{background:var(--surface-2)}
.dishcard .thumb{width:72px; height:72px; border:1px solid var(--line-strong); background:#fff; overflow:hidden}
.dishcard .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.dishcard .txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.dishcard .dt{font-size:11px; color:var(--muted); letter-spacing:.04em}
.dishcard .nm{font-family:"Gowun Batang",serif; font-size:17px; color:var(--ink)}
.dishcard .mt{font-size:13px; color:var(--accent-ink)}
.dishcard .ser{font-size:12.5px; color:var(--muted); margin-top:3px}
.rc.solo{border:1px solid var(--line); max-width:560px}
.dishimg{margin:0 0 var(--s2); max-width:560px; border:1px solid var(--line)}
.dishimg img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.dishimg figcaption{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em; color:var(--muted); padding:6px 10px; border-top:1px solid var(--line)}
.others{margin:0; padding:0; list-style:none; font-size:14.5px; line-height:1.9; border-top:1px solid var(--line-strong)}
.others li{padding:11px 0; border-bottom:1px solid var(--line); color:var(--muted)}
.others a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.others a:hover{border-color:var(--accent)}
@media (max-width:640px){
  .awards div{grid-template-columns:86px 1fr; gap:10px}
  .ctabox{flex-direction:column; align-items:flex-start}
}

.amtnote{margin-top:var(--s3); padding:14px 16px; background:var(--surface-2);
  border-left:3px solid var(--accent); font-size:13.5px; line-height:1.8; color:var(--body); max-width:70ch}

/* 챌린지 — 해본 요리 체크. 동그란 요소는 쓰지 않는다 */
.chk{display:inline-flex; align-items:center; gap:10px; margin:var(--s2) 0 0;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--body);
  padding:8px 14px; font:inherit; font-size:14px; line-height:1; cursor:pointer}
.chk:hover{border-color:var(--accent)}
.chk .box{width:15px; height:15px; flex:none; border:1px solid var(--line-strong); background:var(--ground); position:relative}
.chk[aria-pressed="true"]{border-color:var(--accent); color:var(--accent-ink)}
.chk[aria-pressed="true"] .box{background:var(--accent); border-color:var(--accent)}
.chk[aria-pressed="true"] .box::after{content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid var(--ground); border-width:0 2px 2px 0; transform:rotate(45deg)}
.chk .cnt{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--muted)}
.chprog{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em;
  color:var(--muted); margin-top:var(--s2)}