:root{
  --bg:#f7f3ec; --card:#fffdf9; --ink:#241f1a; --ink2:#6b6157;
  --line:#e6ddd0; --accent:#2f6b4f; --accent-soft:#e6f0e9;
  --warm:#b4552d; --ok:#2f6b4f; --warn:#b4552d; --chip:#efe8dc; --shadow:0 1px 2px rgba(60,45,25,.06),0 8px 24px rgba(60,45,25,.06);
  --r:14px;
}
:root[data-theme="dark"]{
  --bg:#17150f; --card:#221f18; --ink:#f0ebe2; --ink2:#a79d90;
  --line:#332e25; --accent:#7fc0a0; --accent-soft:#22332a;
  --warm:#e5946e; --ok:#7fc0a0; --warn:#e5946e; --chip:#2b2720; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#17150f; --card:#221f18; --ink:#f0ebe2; --ink2:#a79d90;
    --line:#332e25; --accent:#7fc0a0; --accent-soft:#22332a;
    --warm:#e5946e; --ok:#7fc0a0; --warn:#e5946e; --chip:#2b2720; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  line-height:1.6; -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; line-height:1.3; letter-spacing:-.02em}
button{font:inherit; color:inherit; cursor:pointer}

/* 상단 */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 92%,transparent);
     backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:10px 16px 0;
     padding-top:max(10px,env(safe-area-inset-top))}
.top-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.top h1{font-size:20px; font-weight:800}
.top h1::before{content:"🥬 "}
.top-btns{display:flex; gap:6px}
.icon-btn{position:relative; background:var(--chip); border:1px solid var(--line); border-radius:11px;
          width:38px; height:38px; font-size:17px; display:grid; place-items:center}
.badge{position:absolute; top:-5px; right:-5px; background:var(--warm); color:#fff; font-size:11px;
       font-weight:700; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 4px}
.search-row{margin:10px 0 8px}
#q{width:100%; padding:11px 14px; border-radius:11px; border:1px solid var(--line);
   background:var(--card); color:var(--ink); font-size:15px}
#q:focus{outline:2px solid var(--accent); outline-offset:1px}
.chips{display:flex; gap:6px; overflow-x:auto; padding:0 0 10px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; padding:7px 13px; border-radius:999px; border:1px solid var(--line);
      background:var(--chip); font-size:13.5px; white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}

main{max-width:720px; margin:0 auto; padding:14px 16px calc(64px + env(safe-area-inset-bottom))}

/* 오늘 한 상 */
.today{background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--r);
       padding:12px 14px 14px; margin-bottom:18px}
.today-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.today h2{font-size:15px; font-weight:800}
.text-btn{background:none; border:none; color:var(--accent); font-size:13px; font-weight:700; padding:2px 0}
.today-list{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.today-item{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:10px 8px;
            text-align:center; font-size:13.5px; font-weight:700; border-width:1px}
.today-item small{display:block; font-weight:500; color:var(--ink2); font-size:11.5px; margin-top:2px}

.list-head{display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px;
           font-size:13px; color:var(--ink2)}
.fav-only{display:flex; align-items:center; gap:6px}
.fav-only input{width:16px; height:16px; accent-color:var(--accent)}

.grid{display:grid; gap:10px}
@media(min-width:540px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px;
      box-shadow:var(--shadow); text-align:left; width:100%; display:block}
.card-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.card h3{font-size:16.5px; font-weight:750}
.star{font-size:15px; line-height:1}
.card-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.tag{font-size:11.5px; color:var(--ink2); background:var(--chip); border-radius:6px; padding:3px 7px}
.tag.cat{color:var(--accent); background:var(--accent-soft); font-weight:700}
.card-ing{margin-top:8px; font-size:12.5px; color:var(--ink2); overflow:hidden;
          display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical}
.empty{text-align:center; color:var(--ink2); padding:30px 0; font-size:14px}
.foot{text-align:center; color:var(--ink2); font-size:12px; padding:0 16px 30px}

/* 시트 */
.sheet{position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center}
.sheet-bg{position:absolute; inset:0; background:rgba(20,14,6,.45)}
.sheet-body{position:relative; background:var(--bg); width:100%; max-width:720px;
            max-height:92vh; overflow-y:auto; border-radius:18px 18px 0 0;
            padding:0 16px calc(28px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch;
            animation:up .22s ease}
@keyframes up{from{transform:translateY(14px); opacity:.6}to{transform:none; opacity:1}}
.sheet-bar{position:sticky; top:0; background:var(--bg); padding:10px 0 6px; display:flex; justify-content:flex-end; z-index:2}
.close-btn{background:var(--chip); border:1px solid var(--line); border-radius:10px; width:34px; height:34px; font-size:14px}

.d-title{font-size:23px; font-weight:800; margin-bottom:6px}
.d-meta{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
.d-actions{display:flex; gap:8px; margin-bottom:18px}
.btn{flex:1; padding:11px; border-radius:11px; border:1px solid var(--line); background:var(--card); font-weight:700; font-size:14px}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

.serv{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px}
.serv-btns{display:flex; gap:4px; margin-left:auto}
.serv-btns button{border:1px solid var(--line); background:var(--card); border-radius:9px; padding:5px 10px; font-size:13px}
.serv-btns button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700}

.d-sec{margin:0 0 20px}
.d-sec h3{font-size:14px; font-weight:800; color:var(--accent); margin-bottom:8px;
          padding-bottom:6px; border-bottom:1px solid var(--line)}
.ing-list{list-style:none; margin:0; padding:0}
.ing-list li{display:flex; justify-content:space-between; gap:12px; padding:6px 2px; font-size:14.5px;
             border-bottom:1px dashed var(--line)}
.ing-list li span:last-child{color:var(--ink2); white-space:nowrap}
.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{counter-increment:s; display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line);
          font-size:15px; align-items:flex-start; cursor:pointer}
.steps li::before{content:counter(s); flex:0 0 24px; height:24px; border-radius:50%;
          background:var(--chip); color:var(--ink2); font-size:12.5px; font-weight:800;
          display:grid; place-items:center; margin-top:2px}
.steps li.done{color:var(--ink2); text-decoration:line-through; text-decoration-color:var(--line)}
.steps li.done::before{content:"✓"; background:var(--accent); color:#fff}
.tips{margin:0; padding:0; list-style:none}
.tips li{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--warm);
         border-radius:9px; padding:9px 11px; font-size:13.8px; margin-bottom:7px; color:var(--ink2)}

/* 장보기 */
.cart-title{font-size:21px; font-weight:800; margin-bottom:4px}
.cart-sub{color:var(--ink2); font-size:13px; margin:0 0 16px}
.cart-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px}
.cart-tag{display:flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent);
          border:1px solid var(--line); border-radius:999px; padding:5px 8px 5px 11px; font-size:13px; font-weight:700}
.cart-tag button{background:none; border:none; color:var(--accent); font-size:14px; padding:0 2px; opacity:.7}
.shop{list-style:none; margin:0 0 18px; padding:0}
.shop li{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); font-size:15px}
.shop input{width:19px; height:19px; accent-color:var(--accent); flex:0 0 auto}
.shop li.got{color:var(--ink2); text-decoration:line-through}
.shop .amt{margin-left:auto; color:var(--ink2); font-size:14px; white-space:nowrap}

/* [hidden] 이 display 선언에 밀리지 않도록 */
.sheet[hidden], .badge[hidden]{display:none !important}

/* ── 영양 타일 ── */
.today h2 .sub{font-size:12px; font-weight:500; color:var(--ink2); letter-spacing:0}
.nut-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px}
.nut-tile{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:8px 8px 9px}
.nut-tile .lab{font-size:11px; color:var(--ink2); letter-spacing:-.01em}
.nut-tile .val{font-size:15px; font-weight:800; letter-spacing:-.02em; margin:1px 0 5px}
.nut-tile .val i{font-style:normal; font-size:10.5px; font-weight:600; color:var(--ink2); margin-left:1px}
.meter{height:4px; border-radius:2px; background:var(--chip); overflow:hidden}
.meter i{display:block; height:100%; border-radius:2px; background:var(--ok)}
.meter.warn i{background:var(--warn)}
.nut-tile .st{font-size:10.5px; margin-top:4px; color:var(--ink2)}
.nut-tile .st.warn{color:var(--warn); font-weight:700}
.nut-tile .st.ok{color:var(--ok); font-weight:700}
.nut-note{font-size:12.5px; color:var(--ink2); margin:10px 2px 0; line-height:1.5}
.today-item .kcal{display:block; font-weight:600; font-size:11px; color:var(--ink2); margin-top:1px}

/* 상세 영양 */
.nut-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.nut-row{display:flex; align-items:baseline; justify-content:space-between; gap:6px;
         background:var(--card); border:1px solid var(--line); border-radius:9px; padding:8px 10px}
.nut-row span:first-child{font-size:13px; color:var(--ink2)}
.nut-row b{font-size:14.5px; font-weight:750}
.nut-hero{grid-column:1/-1; display:flex; align-items:center; gap:10px;
          background:var(--accent-soft); border:1px solid var(--line); border-radius:11px; padding:10px 12px}
.nut-hero b{font-size:24px; font-weight:800; letter-spacing:-.03em}
.nut-hero span{font-size:12.5px; color:var(--ink2)}
.nut-src{font-size:11.5px; color:var(--ink2); margin:9px 2px 0; line-height:1.5}

/* 광고 */
body.has-banner main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.adfree-btn{margin:4px auto 0; display:block; background:var(--card); border:1px solid var(--line);
            border-radius:11px; padding:10px 16px; font-size:13.5px; font-weight:700; color:var(--accent)}
.adfree-note{color:var(--accent); font-weight:700; font-size:12px; margin-top:6px}