/* oatnine — 뒷면이 앞면 (4단계 구현, 2026-09-26)
   tokens.css 의 변수만 쓴다. 모션 0 · 전환 0 · 그림자 0 · 다크 없음.
   폭 셋: < 720 폰(여백 20) · 720–779 작은 태블릿(여백 40, 폰 배치) · ≥ 780 = 내보내기 780·860 과 같은 그림(가운데 열 ≤ 860, 판 4,000px).
   판(plate)은 ≥780 에서 min-height 4,000 — 내용이 3,760 을 넘으면 뒤 판이 전부 밀려 긴 이미지 절단이 틀어진다(NOTES 실측표). */

/* ── 리셋 ─────────────────────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(table) { border-collapse: collapse; border-spacing: 0; }
:where(b, strong) { font-weight: var(--font-weight-strong); }

html {
  background: var(--color-kraft);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-cacao);
  background: var(--color-kraft);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
:focus-visible { outline: var(--spacing-rule-mid) solid var(--color-berry); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--spacing-3); top: var(--spacing-3); z-index: 2;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-cream); border: var(--spacing-rule-mid) solid var(--color-cacao);
  font-weight: var(--font-weight-strong);
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* ── 골격 ─────────────────────────────────────────────── */
.column { max-width: var(--spacing-column); margin-inline: auto; }
.wrap { padding-inline: var(--spacing-gutter); }
.gap { margin-top: var(--spacing-6); }

/* 상단 띠 — 워드마크 · 이름 · "가상 브랜드" 딱지 */
.topbar {
  display: flex; align-items: center; gap: var(--spacing-3);
  height: var(--spacing-topbar-sm);
  padding-inline: var(--spacing-gutter);
  border-bottom: var(--spacing-rule-heavy) solid var(--color-cacao);
}
.topbar__mark {
  font-family: var(--font-display); font-weight: var(--font-weight-display);
  font-size: var(--text-word); line-height: 1; letter-spacing: var(--tracking-label);
}
.topbar__name { font-size: var(--text-small); font-weight: var(--font-weight-strong); white-space: nowrap; }
.topbar__tag { margin-left: auto; }
.tag {
  display: inline-flex; align-items: center; flex: none;
  padding: 1px var(--spacing-2);
  border: var(--spacing-rule-hair) solid var(--color-cacao); border-radius: var(--radius-chip);
  font-size: var(--text-micro); font-weight: var(--font-weight-strong); line-height: 1.5;
  white-space: nowrap;
}

/* 절취선 — 판 끝 여유대 한가운데. 여유대에는 이것 말고 아무것도 없다 */
.tear { display: flex; align-items: center; height: var(--spacing-9); }
.tear__line { flex: 1; border-top: var(--spacing-rule-mid) dashed var(--color-cacao); }
.tear__notch {
  flex: none; width: 6px; height: 12px;
  background: var(--color-cacao); border-radius: 0 6px 6px 0;
}
.tear__notch--r { border-radius: 6px 0 0 6px; }

/* ── 사진 — 열 전폭, 비율 클래스가 높이를 정한다(판 4,000 계획이 이 값에 묶여 있다) ── */
.photo {
  display: block; width: 100%; height: auto;
  object-fit: cover;
  background-color: var(--color-ph); /* 늦게 받는 동안의 자리 색 */
}
.r-16x9 { aspect-ratio: 16 / 9; }
.r-5x3 { aspect-ratio: 5 / 3; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-5x4 { aspect-ratio: 5 / 4; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-2x1 { aspect-ratio: 2 / 1; }
.r-3x4 { aspect-ratio: 3 / 4; }
.photo--hero { aspect-ratio: 10 / 9; }

/* 맛 칩 — 12px 정사각, 1px 카카오 테두리(꿀 칩 대비 2.67 을 테두리로 넘긴다) */
.chip {
  display: inline-block; flex: none; width: 12px; height: 12px;
  border: var(--spacing-rule-hair) solid var(--color-cacao); border-radius: var(--radius-chip);
}
.chip--honey { background: var(--color-honey); }
.chip--cocoa { background: var(--color-cocoa); }
.chip--berry { background: var(--color-berry); }

/* ── B1 후킹 헤드 ─────────────────────────────────────── */
.hero { margin-bottom: var(--spacing-8); }
.hero-card {
  position: relative;
  margin: calc(-1 * var(--spacing-hero-overlap-sm)) var(--spacing-3) 0;
  padding: var(--spacing-4);
  background: var(--color-cream);
  border: var(--spacing-rule-mid) solid var(--color-cacao);
}
.hero-card h1 {
  font-size: var(--text-h1); font-weight: var(--font-weight-head);
  line-height: var(--leading-head); letter-spacing: var(--tracking-head);
}
.hero-card__sub { margin-top: var(--spacing-2); font-size: var(--text-meta); font-weight: var(--font-weight-strong); line-height: 1.4; }
.marks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-4);
  border-top: var(--spacing-rule-mid) solid var(--color-cacao);
}
.mark { padding: var(--spacing-3) 0 0 var(--spacing-3); border-left: var(--spacing-rule-hair) solid var(--color-cacao); }
.mark:first-child { padding-left: 0; border-left: 0; }
.mark__num {
  display: block;
  font-family: var(--font-display); font-weight: var(--font-weight-display);
  font-size: var(--text-mark); line-height: 0.9; letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.mark__unit { font-family: var(--font-sans); font-weight: var(--font-weight-head); font-size: 0.4em; letter-spacing: 0; margin-left: 2px; }
.mark__label { display: block; margin-top: var(--spacing-2); font-size: var(--text-small); font-weight: var(--font-weight-strong); line-height: var(--leading-table); }
.hero-more { margin: var(--spacing-2) var(--spacing-3) 0; }
.more {
  display: inline-flex; align-items: center; min-height: var(--spacing-tap);
  font-weight: var(--font-weight-strong);
  text-decoration: underline var(--spacing-rule-hair); text-underline-offset: 4px;
}

/* ── 블록 공통 — 라벨 머리 띠 · 제목 ─────────────────── */
.block { margin-bottom: var(--spacing-8); }
.plate__in > .block:last-child { margin-bottom: 0; }
.bar {
  position: relative;
  display: flex; align-items: center; gap: var(--spacing-4);
  height: var(--spacing-label-bar-sm);
  padding-inline: var(--spacing-gutter);
  background: var(--color-cacao); color: var(--color-cream);
}
.bar__no {
  font-family: var(--font-display); font-weight: var(--font-weight-display);
  font-size: var(--text-lead); line-height: 1; letter-spacing: var(--tracking-label);
}
.bar__name { font-size: var(--text-meta); font-weight: var(--font-weight-strong); line-height: 1.2; }
.title {
  padding-block: var(--spacing-7) var(--spacing-6);
  font-size: var(--text-h2); font-weight: var(--font-weight-head);
  line-height: var(--leading-title); letter-spacing: var(--tracking-head);
}
.subtitle { margin-top: var(--spacing-6); margin-bottom: var(--spacing-3); font-size: var(--text-lead); font-weight: var(--font-weight-head); line-height: var(--leading-title); }
.title-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--spacing-3) var(--spacing-5);
  padding-block: var(--spacing-7) var(--spacing-6);
}
.title-row .title { padding-block: 0; }
.stamp {
  display: inline-flex; align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  border: var(--spacing-rule-mid) solid var(--color-berry); border-radius: var(--radius-chip);
  color: var(--color-berry);
  font-size: var(--text-small); font-weight: var(--font-weight-strong); line-height: 1.35;
}
.note, .basis { margin-top: var(--spacing-3); font-size: var(--text-micro); line-height: 1.5; color: var(--color-cacao-soft); }
.basis { font-size: var(--text-small); }

/* ── B2 확인 줄 ───────────────────────────────────────── */
.checks { margin-top: var(--spacing-6); }
.check {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no memo" "text text";
  gap: var(--spacing-2) var(--spacing-4); align-items: baseline;
  padding-block: var(--spacing-4);
  border-top: var(--spacing-rule-hair) solid var(--color-cacao);
}
.check:first-child { border-top-width: var(--spacing-rule-mid); }
.check:last-child { border-bottom: var(--spacing-rule-mid) solid var(--color-cacao); }
.check__no {
  grid-area: no;
  font-family: var(--font-display); font-weight: var(--font-weight-display);
  font-size: var(--text-mark); line-height: 0.9; letter-spacing: var(--tracking-display);
}
.check__text { grid-area: text; font-size: var(--text-body); font-weight: var(--font-weight-strong); line-height: 1.5; }
.check__memo { grid-area: memo; font-size: var(--text-small); color: var(--color-cacao-soft); font-weight: var(--font-weight-strong); }

/* ── B3 세 가지 맛 — 라벨 판 안의 표 ────────────────── */
.packs {
  background: var(--color-cream);
  border: var(--spacing-rule-mid) solid var(--color-cacao);
}
.pack {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--spacing-4);
  align-items: center;
  padding: var(--spacing-4);
  outline: var(--spacing-rule-mid) solid transparent; outline-offset: calc(-1 * var(--spacing-rule-mid));
}
.pack + .pack { border-top: var(--spacing-rule-hair) solid var(--color-cacao); }
/* 봉지 사진은 누끼가 아니라 연한 크림 단색 바탕(#f8f3e9 안팎) — darken(채널별 최솟값)이면 바탕이 판의 크림과
   정확히 같아지고 더 어두운 봉지는 그대로 남는다. multiply 는 바탕을 #f1e4ca 로 눌러 네모가 보인다 */
.photo--pack { mix-blend-mode: darken; background-color: transparent; }
.pack__name {
  display: flex; align-items: center; gap: var(--spacing-2);
  font-size: var(--text-h3); font-weight: var(--font-weight-head); line-height: var(--leading-title);
}
.pack__line { margin-top: var(--spacing-2); font-size: var(--text-meta); line-height: 1.55; }
.pack__spec { margin-top: var(--spacing-2); font-size: var(--text-small); font-weight: var(--font-weight-strong); color: var(--color-cacao-soft); font-variant-numeric: tabular-nums; }

/* ── 특징 포스터 — 거대 숫자 하나 ─────────────────── */
.poster { display: grid; gap: var(--spacing-5); padding-top: var(--spacing-7); }
.poster__num {
  font-family: var(--font-display); font-weight: var(--font-weight-display);
  font-size: var(--text-giant); line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  white-space: nowrap;
}
.poster__unit {
  display: block; margin-top: var(--spacing-3);
  font-family: var(--font-sans); font-size: var(--text-meta); font-weight: var(--font-weight-strong);
  line-height: 1.4; letter-spacing: 0; white-space: normal;
}
.poster__title { font-size: var(--text-h3); font-weight: var(--font-weight-head); line-height: var(--leading-title); letter-spacing: var(--tracking-head); }
.poster__desc { margin-top: var(--spacing-3); font-size: var(--text-body); }
.poster__basis {
  margin-top: var(--spacing-4); padding-top: var(--spacing-3);
  border-top: var(--spacing-rule-hair) solid var(--color-cacao);
  font-size: var(--text-small); line-height: 1.5; color: var(--color-cacao-soft);
}

/* 표 — 라벨 판 문법: 3px 테두리 · 반전 머리 · 1px 줄 · 숫자 오른쪽 */
.tbl {
  width: 100%;
  background: var(--color-cream);
  border: var(--spacing-rule-mid) solid var(--color-cacao);
  font-size: var(--text-meta); line-height: var(--leading-table);
  font-variant-numeric: tabular-nums;
}
.tbl th, .tbl td { padding: var(--spacing-3); text-align: left; vertical-align: top; }
.tbl thead th { background: var(--color-cacao); color: var(--color-cream); font-weight: var(--font-weight-strong); padding-block: var(--spacing-2); }
.tbl tbody tr + tr > * { border-top: var(--spacing-rule-hair) solid var(--color-cacao); }
.tbl tbody th { font-weight: var(--font-weight-strong); }
.tbl--kv tbody th { width: 34%; }
.tbl--num td, .tbl--num thead th:last-child { text-align: right; }
.tbl--ingr tbody th { width: 30%; white-space: nowrap; }
.tbl--ingr tbody th .chip { margin-right: var(--spacing-2); vertical-align: -1px; }
.tbl--cmp th, .tbl--cmp td { width: 33.33%; }
.tbl--ship tbody th { width: 30%; }

/* F02 원재료 3×3 — 많이 든 순서 */
.ingr {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--color-cream);
  border: var(--spacing-rule-mid) solid var(--color-cacao);
}
.ingr__cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--spacing-3);
  border-left: var(--spacing-rule-hair) solid var(--color-cacao);
  border-top: var(--spacing-rule-hair) solid var(--color-cacao);
}
.ingr__cell:nth-child(3n + 1) { border-left: 0; }
.ingr__cell:nth-child(-n + 3) { border-top: 0; }
.ingr__no { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-lead); line-height: 1; letter-spacing: var(--tracking-label); }
.ingr__name { font-size: var(--text-meta); font-weight: var(--font-weight-strong); line-height: 1.35; }
.ingr__memo { font-size: var(--text-micro); color: var(--color-cacao-soft); font-weight: var(--font-weight-strong); }
.ingr__list { display: flex; flex-direction: column; margin-top: var(--spacing-1); font-size: var(--text-micro); line-height: 1.45; }
.ingr__list b { display: inline-block; min-width: 4em; }

/* ── B5 먹는 장면 ─────────────────────────────────────── */
.scenes { display: grid; gap: var(--spacing-5); }
.scene__cap {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--spacing-1) var(--spacing-3);
  align-items: baseline;
  margin-inline: var(--spacing-gutter);
  padding-block: var(--spacing-3);
  border-bottom: var(--spacing-rule-hair) solid var(--color-cacao);
}
.scene__name { font-size: var(--text-body); font-weight: var(--font-weight-head); }
.scene__line { font-size: var(--text-meta); }
.scene__g { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-lead); line-height: 1; letter-spacing: var(--tracking-display); }

/* ── B6 영양정보 판 (서식 도안 흉내 — 어느 줄도 강조하지 않는다) ── */
.flavor-tabs { display: none; }
.nf-row { display: grid; gap: var(--spacing-6); }
.nf__name { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-2); font-size: var(--text-meta); font-weight: var(--font-weight-strong); line-height: 1.3; }
.nf__box {
  padding: 0 var(--spacing-4) var(--spacing-4);
  background: var(--color-cream);
  border: var(--spacing-rule-mid) solid var(--color-cacao);
}
.nf__head {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--spacing-2);
  margin-inline: calc(-1 * var(--spacing-4));
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-2);
  background: var(--color-cacao); color: var(--color-cream);
}
.nf__head > .chip { position: absolute; top: var(--spacing-2); right: var(--spacing-2); border-color: var(--color-cream); }
.nf__title { font-size: var(--text-h3); font-weight: var(--font-weight-head); line-height: 1; }
.nf__total { display: flex; flex-direction: column; align-items: flex-end; padding-top: var(--spacing-3); font-size: var(--text-small); font-weight: var(--font-weight-strong); line-height: 1.3; font-variant-numeric: tabular-nums; text-align: right; }
.nf__table {
  width: 100%; margin-top: var(--spacing-1);
  border-top: var(--spacing-rule-heavy) solid var(--color-cacao);
  border-bottom: var(--spacing-rule-mid) solid var(--color-cacao);
  font-size: var(--text-meta); line-height: var(--leading-table);
  font-variant-numeric: tabular-nums;
}
.nf__table th, .nf__table td { padding: var(--spacing-2) 0; text-align: left; vertical-align: baseline; min-height: 36px; }
.nf__table thead th {
  font-size: var(--text-micro); font-weight: var(--font-weight-body); color: var(--color-cacao-soft);
  border-bottom: var(--spacing-rule-mid) solid var(--color-cacao);
}
.nf__table thead th:last-child, .nf__table td { text-align: right; padding-left: var(--spacing-2); }
.nf__table tbody tr + tr > * { border-top: var(--spacing-rule-hair) solid var(--color-cacao); }
.nf__table tbody th { font-weight: var(--font-weight-strong); white-space: nowrap; }
.nf__table td { font-weight: var(--font-weight-strong); }
.nf__amt { font-weight: var(--font-weight-body); margin-left: var(--spacing-1); }
.nf__sub th { padding-left: var(--spacing-3); }
.nf__note { margin-top: var(--spacing-3); font-size: var(--text-micro); line-height: 1.5; color: var(--color-cacao-soft); }

/* B6b 알레르기 판 */
.allergy {
  margin-top: var(--spacing-5);
  padding: var(--spacing-4);
  background: var(--color-cream);
  border: var(--spacing-rule-mid) solid var(--color-cacao);
  font-size: var(--text-meta); line-height: 1.55;
}
.allergy__head { margin-bottom: var(--spacing-1); font-size: var(--text-body); font-weight: var(--font-weight-head); }
.allergy__fac { margin-top: var(--spacing-2); padding-top: var(--spacing-2); border-top: var(--spacing-rule-hair) solid var(--color-cacao); font-size: var(--text-small); }

/* ── B8 후기(예시) ────────────────────────────────────── */
.reviews { display: grid; gap: var(--spacing-4); }
.review {
  padding: var(--spacing-5);
  background: var(--color-cream);
  border: var(--spacing-rule-mid) solid var(--color-cacao);
}
.review__stars { font-size: var(--text-lead); line-height: 1; letter-spacing: 2px; }
.review__text { margin-top: var(--spacing-3); font-size: var(--text-body); line-height: 1.6; }
.review__who {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2);
  margin-top: var(--spacing-3); padding-top: var(--spacing-3);
  border-top: var(--spacing-rule-hair) solid var(--color-cacao);
  font-size: var(--text-small); font-weight: var(--font-weight-strong); color: var(--color-cacao-soft);
}
.review__who .tag { color: var(--color-cacao); }

/* ── B9 FAQ — 전부 펼친 채 ───────────────────────────── */
.faq {
  border-top: var(--spacing-rule-mid) solid var(--color-cacao);
  border-bottom: var(--spacing-rule-mid) solid var(--color-cacao);
}
.qa { position: relative; padding: var(--spacing-4) var(--spacing-3) var(--spacing-4) var(--spacing-5); }
.qa + .qa { border-top: var(--spacing-rule-hair) solid var(--color-cacao); }
.qa dt { font-size: var(--text-body); font-weight: var(--font-weight-head); line-height: 1.45; }
.qa__no {
  margin-right: var(--spacing-2);
  font-family: var(--font-display); font-weight: var(--font-weight-display);
  font-size: var(--text-lead); letter-spacing: var(--tracking-label);
}
.qa dd { margin-top: var(--spacing-2); font-size: var(--text-meta); line-height: 1.65; }

/* ── B11 가상 고지 ────────────────────────────────────── */
.notice { padding-top: var(--spacing-2); border-top: var(--spacing-rule-heavy) solid var(--color-cacao); margin-top: var(--spacing-8); }
.notice__in {
  padding: var(--spacing-7) var(--spacing-gutter) var(--spacing-8);
  background: var(--color-cacao); color: var(--color-cream);
}
.notice__head { font-size: var(--text-body); font-weight: var(--font-weight-head); }
.notice__text { margin-top: var(--spacing-2); font-size: var(--text-meta); line-height: 1.7; }
.notice__src { margin-top: var(--spacing-5); font-size: var(--text-small); font-weight: var(--font-weight-strong); }
.notice__mark { margin-right: var(--spacing-2); font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: var(--text-body); letter-spacing: var(--tracking-label); }
.notice :focus-visible { outline-color: var(--color-cream); }

/* ── 상태 — 해시 하나씩(#flavor= · :target). 전환 없음, 즉시 교체 ── */
.page[data-flavor="original"] .pack[data-f="original"],
.page[data-flavor="cacao"] .pack[data-f="cacao"],
.page[data-flavor="berry"] .pack[data-f="berry"] { outline-color: var(--color-berry); }

/* :target 은 옆 막대(side-tab — impeccable 경고) 대신 B3 선택과 같은 3px 베리 틀 · B6 제목 밑줄로 (NOTES) */
#nutrition:target .title {
  text-decoration: underline var(--spacing-rule-mid) var(--color-berry);
  text-underline-offset: 10px;
}
.qa:target {
  background: var(--color-cream);
  outline: var(--spacing-rule-mid) solid var(--color-berry); outline-offset: calc(-1 * var(--spacing-rule-mid));
}

/* ── 폰 (< 780) — 맛 전환 3칸, 영양정보 판 하나 ──────── */
@media (max-width: 779.98px) {
  .js .flavor-tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--spacing-5);
    border: var(--spacing-rule-mid) solid var(--color-cacao);
    background: var(--color-cream);
  }
  .flavor-tabs li + li { border-left: var(--spacing-rule-hair) solid var(--color-cacao); }
  .flavor-tabs a {
    display: flex; align-items: center; justify-content: center; gap: var(--spacing-2);
    min-height: var(--spacing-7);
    font-size: var(--text-meta); font-weight: var(--font-weight-strong); text-decoration: none;
  }
  .flavor-tabs a[aria-current] { background: var(--color-cacao); color: var(--color-cream); }
  .flavor-tabs a[aria-current] .chip { border-color: var(--color-cream); }
  .flavor-tabs a[aria-current]:focus-visible { outline-color: var(--color-berry); }
  .js .nf { display: none; }
  .js .page:not([data-flavor]) .nf[data-f="original"],
  .js .page[data-flavor="original"] .nf[data-f="original"],
  .js .page[data-flavor="cacao"] .nf[data-f="cacao"],
  .js .page[data-flavor="berry"] .nf[data-f="berry"] { display: block; }
  .js .nf__name { display: none; }
  .nf__table th, .nf__table td { padding-block: var(--spacing-2); height: 36px; }
}

@media (max-width: 399.98px) {
  .topbar__more { display: none; }
}

/* ── 작은 태블릿 (≥ 720) — 여백 40, 글자 한 단계 ─────── */
@media (min-width: 720px) {
  .wrap, .topbar, .bar { padding-inline: var(--spacing-gutter-lg); }
  .scene__cap { margin-inline: var(--spacing-gutter-lg); }
  .notice__in { padding-inline: var(--spacing-gutter-lg); }
  .photo--hero { aspect-ratio: 5 / 3; }
  .hero-card {
    margin: calc(-1 * var(--spacing-hero-overlap)) var(--spacing-gutter-lg) 0;
    padding: var(--spacing-6);
  }
  .hero-card h1 { font-size: var(--text-h1-md); }
  .hero-card__sub { margin-top: var(--spacing-4); font-size: var(--text-lead); line-height: 1.2; }
  .marks { margin-top: var(--spacing-5); }
  .mark { padding: var(--spacing-4) 0 0 var(--spacing-4); }
  .mark:first-child { padding-left: 0; }
  .mark__num { font-size: var(--text-mark-lg); }
  .mark__label { font-size: var(--text-meta); }
  .hero-more { margin-inline: var(--spacing-gutter-lg); }
  .title, .title-row { padding-block: var(--spacing-7) var(--spacing-6); }
  .title { font-size: var(--text-h2-lg); }
  .poster__num { font-size: var(--text-giant-lg); }
  .poster__title { font-size: var(--text-h3-lg); }
  .poster__desc { font-size: var(--text-body-lg); }
  .check { grid-template-columns: var(--spacing-8) minmax(0, 1fr) auto; grid-template-areas: "no text memo"; padding-block: var(--spacing-4); }
  .check__text { font-size: var(--text-body-lg); }
  .stamp { font-size: var(--text-meta); }
  .bar { height: var(--spacing-label-bar); }
}

/* ── 데스크톱 = 내보내기 780·860 (≥ 780) — 판 4,000px ── */
@media (min-width: 780px) {
  body { font-size: var(--text-body-lg); }
  .topbar { height: var(--spacing-topbar); }
  .hero { margin-bottom: var(--spacing-section); }
  .block { margin-bottom: var(--spacing-section); }
  .plate__in > .block:last-child { margin-bottom: 0; }

  .plate { display: flex; flex-direction: column; min-height: var(--spacing-plate); }
  .plate--1 { min-height: calc(var(--spacing-plate) - var(--spacing-topbar)); }
  .plate--last { min-height: 0; }
  .tear { flex: 1 0 var(--spacing-plate-safe); height: auto; }

  .packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pack { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
  .pack + .pack { border-top: 0; border-left: var(--spacing-rule-hair) solid var(--color-cacao); }

  .poster { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--spacing-5); align-items: end; }

  .nf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-4); }
  .nf__box { padding: 0 var(--spacing-3) var(--spacing-3); }
  .nf__head { margin-inline: calc(-1 * var(--spacing-3)); padding-inline: var(--spacing-3); }
  .nf__title { font-size: var(--text-lead); }
  .nf__table { font-size: var(--text-small); }
  .nf__table th, .nf__table td { padding-block: 6px; }
  .page[data-flavor="original"] .nf[data-f="original"] .nf__box,
  .page[data-flavor="cacao"] .nf[data-f="cacao"] .nf__box,
  .page[data-flavor="berry"] .nf[data-f="berry"] .nf__box { border-color: var(--color-berry); }

  .scene__line { font-size: var(--text-body); }
  .review { padding: var(--spacing-6); }
  .qa dt { font-size: var(--text-lead); }
  .qa dd { font-size: var(--text-body); }
}