/* ============================================================
   NutriLive — 식탁 위의 매거진
   아이보리 지면 · 먹색 잉크 · 주홍 낙관 하나
   괘선 그리드 / 차림표 점선 리더 / 세로쓰기 / 판권면
   ============================================================ */
:root {
  --paper: #f6f1e7;
  --ink: #1b201c;
  --ink-70: rgba(27, 32, 28, .82);
  --ink-50: rgba(27, 32, 28, .66);
  --ink-35: rgba(27, 32, 28, .55);
  --rule: rgba(27, 32, 28, .8);
  --rule-mid: rgba(27, 32, 28, .25);
  --rule-soft: rgba(27, 32, 28, .12);
  --accent: #c8502e;
  --spruce: #31513f;
  --serif: 'Gowun Batang', serif;
  --sans: 'Noto Sans KR', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --mx: clamp(1.2rem, 4vw, 3.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
em { font-style: normal; }
::selection { background: var(--accent); color: var(--paper); }

/* 작은 라벨 공통 */
.label {
  font-size: .82rem; font-weight: 700; letter-spacing: .18em;
  color: var(--ink-50);
}
.label--accent { color: var(--spruce); }

/* ---------- 제자(題字) · 상단 ---------- */
.mast {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: baseline; gap: 2rem;
  padding: 1rem var(--mx) .9rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.mast::before {
  content: ''; position: absolute; top: 4px; left: var(--mx); right: var(--mx);
  border-top: 1px solid var(--rule-mid);
}
.mast__logo {
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem; letter-spacing: .01em;
  color: var(--ink);
}
.mast__logo em { color: var(--accent); }
.colophon__seal { width: 46px; height: 46px; display: block; margin-top: .7rem; }
.mast__issue {
  font-family: var(--mono); font-size: .8rem; color: var(--ink-50); letter-spacing: .08em;
}
.mast__links {
  margin-left: auto; display: flex; align-items: baseline; gap: 1.6rem;
  font-size: .92rem; font-weight: 500;
}
.mast__links a { position: relative; padding-bottom: 2px; }
.mast__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 1px solid var(--ink); transition: right .25s ease;
}
.mast__links a:hover::after { right: 0; }
.mast__links a.now { border-bottom: 1px solid var(--spruce); }
.mast__toggle { display: none; background: none; border: none; font-size: 1.3rem; color: var(--ink); cursor: pointer; margin-left: auto; }

/* ---------- 표지 (히어로) ---------- */
.hero {
  display: grid; grid-template-columns: 1fr auto;
  gap: 3rem; align-items: stretch;
  padding: 4.5rem var(--mx) 3.5rem;
}
.hero__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  line-height: 1.18; letter-spacing: -.015em;
  margin: 1.6rem 0 1.8rem;
}
.hero__title em { color: var(--accent); }
.hero__lede {
  max-width: 34em; font-size: 1.04rem; font-weight: 400; color: var(--ink-70);
  margin-bottom: 2.6rem;
}
.hero__vert {
  writing-mode: vertical-rl;
  font-family: var(--serif); font-size: 1rem; letter-spacing: .55em;
  color: var(--ink-50);
  border-left: 1px solid var(--rule-mid);
  padding-left: 1.4rem;
  display: flex; align-items: flex-start;
}

/* 목차 — 차림표식 점선 리더 */
.toc { list-style: none; max-width: 560px; border-top: 1px solid var(--rule); }
.toc li { border-bottom: 1px solid var(--rule-soft); }
.toc a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem .2rem; transition: padding-left .25s ease;
}
.toc a:hover { padding-left: .9rem; }
.toc a:hover .toc__t { color: var(--spruce); }
.toc__no { font-family: var(--mono); font-size: .82rem; color: var(--accent); }
.toc__t { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; }
.toc__dots { flex: 1; border-bottom: 1px dotted var(--rule-mid); transform: translateY(-4px); }
.toc__pg { font-size: .86rem; color: var(--ink-50); }

.hero__foot { margin-top: 2.4rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.hero__note { font-size: .88rem; color: var(--ink-50); }
.hero__note a { border-bottom: 1px solid var(--spruce); color: var(--spruce); }

/* 데이터 괘선 행 */
.dataline {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 0 var(--mx);
}
.dataline > div {
  flex: 1 1 180px; padding: 1.3rem 1.5rem;
  border-right: 1px solid var(--rule-soft);
}
.dataline > div:last-child { border-right: none; }
.dataline strong {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: 1.7rem; letter-spacing: -.02em;
}
.dataline strong sup { font-size: .6em; color: var(--accent); }
.dataline span { font-size: .86rem; color: var(--ink-50); }
.footref {
  margin: .8rem var(--mx) 0; font-size: .82rem; color: var(--ink-35); max-width: 720px;
}

/* ---------- 본문 섹션 셸 ---------- */
.sec { border-top: 1px solid var(--rule); margin-top: 4.5rem; padding: 0 var(--mx); }
.sec__grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 3rem;
  padding: 2.8rem 0 4rem;
}
.sec__side { position: sticky; top: 5.2rem; align-self: start; }
.sec__no {
  font-family: var(--mono); font-size: .88rem; color: var(--accent);
  display: block; margin-bottom: .6rem;
}
.sec__side h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.35;
}
.sec__side p { margin-top: 1rem; font-size: .92rem; font-weight: 400; color: var(--ink-70); }
.sec__note { margin-top: 2rem; font-size: .84rem; color: var(--ink-35); }

/* ---------- 01 영양소 대장(臺帳) ---------- */
.ledger { border-top: 1px solid var(--rule); }
.ledger__row {
  display: grid; grid-template-columns: 3.6rem 7.5rem 1fr; gap: 1.6rem;
  align-items: baseline; padding: 1.5rem .2rem;
  border-bottom: 1px solid var(--rule-soft);
  transition: background .25s;
}
.ledger__row:hover { background: rgba(27,32,28,.03); }
.ledger__sym {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--spruce);
}
.ledger__sym i { font-style: normal; font-family: var(--mono); font-size: .6rem; display: block; color: var(--ink-35); }
.ledger__name { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.ledger__body p { font-size: .96rem; font-weight: 400; color: var(--ink-70); }
.ledger__meta { font-family: var(--mono); font-size: .8rem; color: var(--ink-50); margin-top: .5rem; letter-spacing: .02em; }

/* ---------- 02 차림표 (레시피) ---------- */
.menu { border-top: 1px solid var(--rule); }
.menu__item { border-bottom: 1px solid var(--rule-soft); padding: 1.3rem .2rem; }
.menu__line { display: flex; align-items: baseline; gap: .9rem; }
.menu__name { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.menu__dots { flex: 1; border-bottom: 1px dotted var(--rule-mid); transform: translateY(-5px); }
.menu__val { font-family: var(--mono); font-size: .88rem; color: var(--accent); white-space: nowrap; }
.menu__desc { font-size: .94rem; font-weight: 400; color: var(--ink-70); margin-top: .45rem; max-width: 46em; }
.menu__meta { font-family: var(--mono); font-size: .8rem; color: var(--ink-35); margin-top: .4rem; }
.menu__tip {
  margin-top: .7rem; padding-left: 1rem; border-left: 2px solid var(--spruce);
  font-size: .9rem; color: var(--ink-70); max-width: 44em;
}

/* ---------- 03 각주식 큐레이션 ---------- */
.notes { counter-reset: fn; border-top: 1px solid var(--rule); }
.note {
  counter-increment: fn;
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem;
  padding: 1.5rem .2rem; border-bottom: 1px solid var(--rule-soft);
}
.note::before {
  content: counter(fn, decimal-leading-zero);
  font-family: var(--mono); font-size: .84rem; color: var(--accent); padding-top: .35em;
}
.note h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; }
.note h3 span { font-family: var(--mono); font-size: .8rem; font-weight: 400; color: var(--ink-50); margin-right: .6rem; }
.note p { font-size: .94rem; font-weight: 400; color: var(--ink-70); margin-top: .35rem; max-width: 46em; }
.note cite { font-family: var(--mono); font-style: normal; font-size: .8rem; color: var(--ink-35); display: block; margin-top: .5rem; }

/* ---------- 04/05 먹색 지면 (마켓) ---------- */
.sec--ink { background: var(--ink); color: var(--paper); border-top: none; margin-top: 4.5rem; }
.sec--ink .sec__side h2 { color: var(--paper); }
.sec--ink .sec__side p { color: rgba(246,241,231,.65); }
.sec--ink .sec__note { color: rgba(246,241,231,.35); }
.speclist { border-top: 1px solid rgba(246,241,231,.7); }
.speclist__row {
  display: grid; grid-template-columns: 3rem 11rem 1fr; gap: 1.4rem; align-items: baseline;
  padding: 1.3rem .2rem; border-bottom: 1px solid rgba(246,241,231,.15);
}
.speclist__no { font-family: var(--mono); font-size: .82rem; color: var(--accent); }
.speclist__name { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; }
.speclist__row p { font-size: .92rem; font-weight: 400; color: rgba(246,241,231,.65); }

/* ---------- 단추 ---------- */
.btn {
  display: inline-block; padding: .8rem 1.7rem;
  font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: .06em;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: background .22s, color .22s, border-color .22s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--main { background: var(--ink); color: var(--paper); }
.btn--main:hover { background: var(--spruce); border-color: var(--spruce); }
.sec--ink .btn { border-color: var(--paper); color: var(--paper); }
.sec--ink .btn:hover, .sec--ink .btn--main { background: var(--paper); color: var(--ink); }
.sec--ink .btn--main:hover { background: var(--spruce); border-color: var(--spruce); color: var(--paper); }
.arrow::after { content: ' →'; }

/* ---------- 구독 (지로용지 풍) ---------- */
.news { padding: 4.5rem var(--mx); }
.news__inner {
  max-width: 620px; margin: 0 auto; text-align: center;
  border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px;
  padding: 3rem 2.4rem;
}
.news__inner h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; margin: .7rem 0 .6rem; }
.news__inner > p { font-size: .96rem; font-weight: 400; color: var(--ink-70); margin-bottom: 1.8rem; }
.news__form { display: flex; gap: 0; max-width: 420px; margin: 0 auto; }
.news__form input {
  flex: 1; padding: .8rem 1rem;
  border: 1px solid var(--ink); border-right: none; background: transparent;
  font-family: var(--sans); font-size: .96rem; color: var(--ink); outline: none;
}
.news__form input::placeholder { color: var(--ink-35); }
.news__form input:focus { border-color: var(--spruce); outline: none; }
.news__done { display: none; color: var(--spruce); font-weight: 700; margin-top: 1.2rem; font-size: .96rem; }
.news__done.show { display: block; }

/* ---------- 판권면 (footer) ---------- */
.colophon {
  border-top: 3px double var(--ink);
  margin: 0 var(--mx); padding: 2.4rem 0 2.8rem;
}
.colophon__grid { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
.colophon__id .mast__logo { font-size: 1.1rem; }
.colophon__id p { font-family: var(--mono); font-size: .8rem; color: var(--ink-35); margin-top: .4rem; }
.colophon__links { display: flex; gap: 1.8rem; font-size: .9rem; align-items: baseline; }
.colophon__links a { border-bottom: 1px solid transparent; }
.colophon__links a:hover { border-bottom-color: var(--ink); }
.colophon__disclaim {
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule-soft);
  font-size: .82rem; font-weight: 400; color: var(--ink-50); max-width: 720px; line-height: 1.9;
}

/* ---------- 하위 페이지 표지 ---------- */
.cover { padding: 4rem var(--mx) 3rem; }
.cover h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.22; margin: 1.4rem 0 1.4rem;
}
.cover h1 em { color: var(--accent); }
.cover__lede { max-width: 36em; font-size: 1rem; font-weight: 400; color: var(--ink-70); }
.cover__notice {
  max-width: 620px; margin-top: 2rem; padding: 1rem 1.3rem;
  border-left: 2px solid var(--accent);
  font-size: .9rem; color: var(--ink-70); background: rgba(200,80,46,.05);
}
.cover__notice strong { color: var(--accent); }

/* ---------- 필터 태그 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.chip {
  padding: .35rem .95rem;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .04em;
  border: 1px solid var(--rule-mid); background: transparent; color: var(--ink-70);
  cursor: pointer; transition: all .2s;
}
.chip:hover { border-color: var(--spruce); color: var(--spruce); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- 성분 판별기 (검색 → 비교표 → 하단 계산대) ---------- */
body.has-deck { padding-bottom: 96px; } /* 하단 고정 계산대 자리 확보 */
.cover--tool { padding-bottom: 1.6rem; }
.scanner { padding: 0 var(--mx) 4rem; max-width: 1080px; }

.scanner__searchbox input[type="search"] {
  width: 100%; padding: .95rem 1.2rem;
  border: 2px solid var(--ink); background: rgba(255,255,255,.55);
  font-family: var(--sans); font-size: 1.08rem; color: var(--ink); outline: none;
  transition: border-color .2s, background .2s;
}
.scanner__searchbox input[type="search"]:focus { border-color: var(--spruce); background: #fff; }
.scanner__searchbox input::placeholder { color: var(--ink-35); }

/* 비교 테이블 */
.ftable__wrap { overflow-x: auto; margin-top: .4rem; }
.ftable { width: 100%; border-collapse: collapse; min-width: 560px; }
.ftable th {
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em;
  color: var(--ink-50); text-align: right; padding: .7rem .6rem;
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.ftable th i { font-style: normal; font-size: .66rem; color: var(--ink-35); margin-left: .25em; }
.ftable th.ftable__name { text-align: left; padding-left: .2rem; }
.ftable__sort { cursor: pointer; user-select: none; }
.ftable__sort:hover { color: var(--spruce); }
.ftable__sort::after { content: '↕'; opacity: .35; margin-left: .35em; }
.ftable__sort.asc::after { content: '↑'; opacity: 1; color: var(--spruce); }
.ftable__sort.desc::after { content: '↓'; opacity: 1; color: var(--accent); }
.ftable td {
  padding: .72rem .6rem; border-bottom: 1px solid var(--rule-soft);
  text-align: right; font-family: var(--mono); font-size: .92rem; white-space: nowrap;
}
.ftable td.ftable__food {
  text-align: left; font-family: var(--sans); font-weight: 500; font-size: .95rem;
  padding-left: .2rem; white-space: normal;
}
.ftable__cat { font-family: var(--mono); font-size: .72rem; color: var(--ink-35); margin-left: .5em; }
.ftable__warn { font-size: .74rem; color: var(--accent); white-space: nowrap; }
.ftable tr:hover td { background: rgba(27,32,28,.03); }
.ftable__none td { text-align: center; color: var(--ink-35); font-family: var(--sans); padding: 2.2rem 0; }
.ftable__miss { color: var(--ink-35); }
.sums__note { font-size: .78rem; color: var(--ink-35); line-height: 1.7; }
.ftable__more { font-family: var(--mono); font-size: .8rem; color: var(--ink-35); padding: .8rem .2rem; }
.lv-low { color: #5c7028; } .lv-mid { color: #a06a10; } .lv-high { color: var(--accent); font-weight: 700; }

.ftable__add {
  padding: .3rem .9rem; font-family: var(--mono); font-size: .8rem;
  border: 1px solid var(--rule-mid); background: transparent; color: var(--ink-70);
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.ftable__add:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.ftable__add.added { background: var(--spruce); border-color: var(--spruce); color: var(--paper); }

/* 계산대 — 하단 고정 바 */
.deck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; }
.deck__bar {
  display: flex; align-items: center; gap: 1.6rem;
  padding: .8rem var(--mx);
  background: var(--ink); color: var(--paper);
  border-top: 3px double var(--paper);
}
.deck__toggle {
  background: none; border: none; color: var(--paper); cursor: pointer;
  font-family: var(--sans); font-size: .9rem; font-weight: 500; white-space: nowrap;
  padding: 0;
}
.deck__toggle b { font-family: var(--mono); font-weight: 500; color: #9fc48a; }
.deck__sums { display: flex; gap: 1.8rem; flex: 1; min-width: 0; }
.dsum { min-width: 0; }
.dsum small {
  display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  color: rgba(246,241,231,.55);
}
.dsum b { font-family: var(--mono); font-weight: 500; font-size: .92rem; white-space: nowrap; }
.dsum b i { font-style: normal; color: rgba(246,241,231,.5); font-size: .8em; }
.dsum b.over { color: #ff9d7a; }
.dsum__bar { display: block; width: 110px; max-width: 100%; height: 4px; background: rgba(246,241,231,.18); margin-top: .3rem; overflow: hidden; }
.dsum__bar i { display: block; height: 100%; background: #9fc48a; transition: width .3s; }
.dsum__bar i.near { background: #e0a94f; }
.dsum__bar i.over { background: var(--accent); }
.dsum__bar.mute i { background: rgba(246,241,231,.35); }
.deck__gear {
  background: none; border: 1px solid rgba(246,241,231,.5); color: var(--paper);
  font-family: var(--sans); font-size: .82rem; padding: .45rem 1rem; cursor: pointer;
  white-space: nowrap; transition: all .2s;
}
.deck__gear:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.deck__open {
  background: var(--paper); border: 1px solid var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: .82rem; font-weight: 700; padding: .45rem 1rem;
  cursor: pointer; white-space: nowrap; transition: all .2s;
}
.deck__open:hover { background: var(--spruce); border-color: var(--spruce); color: var(--paper); }

/* 계산대 — 펼침 패널 (영수증) */
.deck__panel {
  background: var(--paper); border-top: 1px solid var(--ink);
  box-shadow: 0 -8px 30px rgba(27,32,28,.18);
  max-height: min(60vh, 480px); overflow-y: auto;
}
.deck__panelgrid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem;
  padding: 1.6rem var(--mx) 1.8rem; max-width: 1080px;
}
.deck__panel h3 {
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .18em;
  color: var(--ink-35); border-bottom: 1px dashed var(--rule-mid);
  padding-bottom: .7rem; margin-bottom: .9rem;
}
.tray { list-style: none; margin-bottom: 1rem; }
.tray__item {
  display: flex; align-items: baseline; gap: .7rem; justify-content: space-between;
  padding: .5rem 0; border-bottom: 1px dotted var(--rule-soft); font-size: .92rem;
}
.tray__item strong { font-weight: 500; font-family: var(--sans); }
.tray__grams { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.tray__grams button {
  width: 22px; height: 22px; border: 1px solid var(--rule-mid); background: transparent;
  cursor: pointer; font-family: var(--mono); color: var(--ink); line-height: 1;
}
.tray__grams button:hover { border-color: var(--ink); }
.tray__grams b { min-width: 46px; text-align: center; font-family: var(--mono); font-size: .84rem; font-weight: 400; }
.tray__rm { background: none; border: none; color: var(--ink-35); cursor: pointer; font-size: .9rem; }
.tray__rm:hover { color: var(--accent); }
.tray__empty { font-size: .88rem; color: var(--ink-35); margin-bottom: 1rem; }
.sums { display: grid; gap: .9rem; border-top: 1px dashed var(--rule-mid); padding-top: 1rem; margin-bottom: 1.3rem; }
.sum span { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; color: var(--ink-50); }
.sum b { display: block; font-family: var(--mono); font-weight: 500; font-size: .98rem; margin: .1rem 0 .3rem; }
.sum small { font-family: var(--mono); font-size: .74rem; color: var(--ink-35); }
.sum__bar { height: 4px; background: var(--rule-soft); overflow: hidden; }
.sum__bar i { display: block; height: 100%; background: var(--spruce); transition: width .3s; }
.sum__bar i.near { background: #a06a10; }
.sum__bar i.over { background: var(--accent); }
.overtxt { color: var(--accent) !important; font-weight: 700; }
.deck__clear {
  padding: .5rem 1.2rem; font-family: var(--sans); font-size: .84rem; font-weight: 500;
  border: 1px solid var(--rule-mid); background: transparent; color: var(--ink-70); cursor: pointer;
  transition: all .2s;
}
.deck__clear:hover { border-color: var(--accent); color: var(--accent); }
.targets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.targets__grid label {
  font-family: var(--mono); font-size: .76rem; color: var(--ink-50);
  display: flex; flex-direction: column; gap: .3rem;
}
.targets__grid input {
  padding: .5rem .2rem; border: none; border-bottom: 1px solid var(--rule-mid);
  background: transparent; font-family: var(--mono); font-size: 1.05rem; color: var(--ink); outline: none;
}
.targets__grid input:focus { border-bottom-color: var(--spruce); }
.deck__hint { font-size: .82rem; color: var(--ink-50); margin-top: 1rem; line-height: 1.7; }
.deck__hint strong { color: var(--spruce); }

/* ---------- 차림표 (미슐랭 카르트) ---------- */
.cover--center { text-align: center; }
.cover--center .cover__lede { margin: 0 auto; }
.rbook { padding: 0 var(--mx) 5rem; }
.rbook--carte { padding-top: .5rem; }
.rbook__none { color: var(--ink-35); text-align: center; padding: 3rem 0; }
.chips--center { justify-content: center; margin-bottom: 1.8rem; }

.carte {
  max-width: 640px; margin: 0 auto; text-align: center;
  border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px;
  padding: 3.4rem clamp(1.4rem, 5vw, 3.6rem) 2.8rem;
  background: var(--paper);
}
.carte__head { margin-bottom: 2.6rem; }
.carte__title { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: .06em; }
.carte__title em { color: var(--accent); }
.carte__sub {
  font-size: .82rem; font-weight: 700; letter-spacing: .18em;
  color: var(--ink-50); margin-top: .5rem;
}
.carte__date { font-family: var(--mono); font-size: .74rem; color: var(--ink-35); margin-top: .4rem; letter-spacing: .18em; }
.carte__head::after {
  content: ''; display: block; width: 52px; margin: 1.6rem auto 0;
  border-bottom: 1px solid var(--ink);
}

.course { margin-bottom: 2.8rem; }
.course:last-child { margin-bottom: 0; }
.course__head { margin-bottom: 1.6rem; }
.course__orn { display: block; font-size: .5rem; color: var(--spruce); margin-bottom: .7rem; }
.course__orn--illust { width: 46px; margin: 0 auto .6rem; color: var(--spruce); }
.course__orn--illust svg { width: 100%; height: auto; display: block; }
.carte__emblem { width: 96px; margin: 1.5rem auto 0; color: var(--ink-70); }
.carte__emblem svg { width: 100%; height: auto; display: block; }
.course__head h2 {
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem; letter-spacing: .18em;
  text-indent: .3em; /* letter-spacing 시각 보정 */
}
.course__head p {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; color: var(--ink-35); margin-top: .3rem;
}

.dish { margin: 0 auto 1.9rem; max-width: 30em; }
.dish:last-child { margin-bottom: 0; }
.dish h3 { font-family: var(--serif); font-weight: 700; font-size: 1.18rem; line-height: 1.4; }
.dish__na {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .18em;
  color: var(--accent); margin: .35rem 0 .55rem;
}
.dish__desc { font-size: .92rem; font-weight: 400; color: var(--ink-70); line-height: 1.75; }
.dish__tip {
  font-family: var(--serif); font-size: .86rem; color: var(--ink-50);
  margin-top: .55rem; line-height: 1.7;
}
.dish__tip::before, .dish__tip::after { content: ' · '; color: var(--ink-35); }

.carte__foot {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule-soft);
  font-size: .8rem; color: var(--ink-35); line-height: 1.9;
}

/* ---------- 마켓 페이지 ---------- */
.criteria { padding: 0 var(--mx) 3rem; }
.waitform { padding: 1rem var(--mx) 4rem; }
.waitform__inner {
  max-width: 560px; margin: 0 auto; text-align: center;
  border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px;
  padding: 2.8rem 2.2rem;
}
.waitform__inner h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; margin-bottom: .6rem; }
.waitform__inner p { font-size: .94rem; font-weight: 400; color: var(--ink-70); margin-bottom: 1.6rem; }
.faq { padding: 0 var(--mx) 5rem; max-width: 780px; }
.faq h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; margin-bottom: 1.2rem; }
.faq details { border-bottom: 1px solid var(--rule-soft); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: .97rem; list-style: none; }
.faq summary::before { content: '問 '; font-family: var(--serif); color: var(--spruce); }
.faq details p { margin-top: .7rem; font-size: .92rem; font-weight: 400; color: var(--ink-70); padding-left: 1.4rem; }

/* ---------- 아티클 (해외 큐레이션 본문) ---------- */
.cover--article { padding-bottom: 2rem; }
.cover--article h1 { max-width: 15em; }
.article__meta { font-family: var(--mono); font-size: .8rem; color: var(--ink-35); margin-top: 1.4rem; letter-spacing: .04em; }
.article { padding: 0 var(--mx) 4.5rem; max-width: 820px; }
.article h2 {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  margin: 2.8rem 0 .9rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
}
.article h2:first-child { margin-top: 0; }
.article h2 span { font-family: var(--mono); font-size: .82rem; font-weight: 400; color: var(--accent); margin-right: .6rem; }
.article p { font-size: .97rem; font-weight: 400; color: var(--ink-70); margin-bottom: 1rem; max-width: 46em; }
.article ul { margin: 0 0 1.1rem 1.3rem; font-size: .95rem; color: var(--ink-70); }
.article li { margin-bottom: .5rem; }
.article li::marker { color: var(--spruce); }
.article strong { color: var(--ink); }
.article__callout {
  border-left: 2px solid var(--spruce); background: rgba(49,81,63,.06);
  padding: 1rem 1.3rem; margin: 1.5rem 0; font-size: .93rem; color: var(--ink-70); max-width: 44em;
}
.article__callout strong { color: var(--spruce); }
.article__callout--warn { border-left-color: var(--accent); background: rgba(200,80,46,.05); }
.article__callout--warn strong { color: var(--accent); }
.article__src {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-35); line-height: 1.9;
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px dashed var(--rule-mid);
}
.article__nav {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-size: .9rem; font-weight: 500;
}
.article__nav a { color: var(--spruce); border-bottom: 1px solid var(--spruce); padding-bottom: 1px; }
.article__nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.note h3 a { transition: color .2s; }
.note h3 a:hover { color: var(--spruce); }
.note cite a { color: var(--spruce); border-bottom: 1px solid var(--spruce); }

/* ---------- 리빌 ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.on { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; } .d5 { transition-delay: .4s; }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero__vert { display: none; }
  .sec__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .sec__side { position: static; }
  .deck__panelgrid { grid-template-columns: 1fr; gap: 1.8rem; }
  .deck__bar { gap: 1rem; }
  .dsum--k, .dsum--p { display: none; } /* 모바일 바에는 나트륨만 — 나머지는 패널에서 */
  .deck__gear { display: none; }        /* 목표 설정은 패널 안에서 */
  .ledger__row { grid-template-columns: 3rem 1fr; }
  .ledger__row .ledger__body { grid-column: 1 / -1; }
  .speclist__row { grid-template-columns: 2.4rem 1fr; }
  .speclist__row p { grid-column: 2; }
}
@media (max-width: 640px) {
  /* 비교표를 한 화면 폭에 맞춤 — 가로 스크롤 없이 */
  .ftable { min-width: 0; }
  .ftable th { font-size: .64rem; padding: .55rem .3rem; letter-spacing: .04em; }
  .ftable th i { display: none; }
  .ftable td { font-size: .8rem; padding: .6rem .3rem; }
  .ftable td.ftable__food { font-size: .84rem; }
  .ftable__cat { display: block; margin-left: 0; }
  .ftable__add { padding: .25rem .55rem; font-size: .72rem; }
  .scanner__searchbox input[type="search"] { font-size: 1rem; padding: .8rem .9rem; }
}
@media (max-width: 720px) {
  .mast__issue { display: none; }
  .mast__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; padding: 1.3rem var(--mx); gap: 1rem;
    background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .mast__links.open { display: flex; }
  .mast__toggle { display: block; }
  .news__form { flex-direction: column; gap: .6rem; }
  .news__form input { border-right: 1px solid var(--ink); }
}