/* mallang — 스타일. 색·글자·간격은 tokens.css 의 변수만 쓴다.
   두 겹이다: 기본(정지 컷 — reduced-motion·스크립트 차단에서 내용이 다 보인다) / html.motion(장면 고정·물리 세계).
   렌즈 minimalist-ui: 젤리만 시끄럽다. 글자·선·단추는 평평하고(그림자 0) 먹·크림 두 색으로 조용하다. */

/* ---------- 리셋 ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where([hidden]) { display: none !important; }

html {
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  --dock-h: var(--spacing-dock);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--spacing-s); top: var(--spacing-s); z-index: 20;
  padding: var(--spacing-xs) var(--spacing-s); background: var(--color-ink); color: var(--color-cream);
  border-radius: var(--radius-ui); text-decoration: none; transform: translateY(-200%);
}
.skip:focus-visible { transform: none; box-shadow: var(--shadow-focus-on-ink); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- 단추 셋 — 강조(면) · 테두리 · 글자 ---------- */
.accent-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  min-height: var(--spacing-target); padding: 0 1.125rem;
  background: var(--color-accent); color: var(--color-on-accent);
  border-radius: var(--radius-ui); font-weight: 600; font-size: var(--text-small); line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.accent-btn:hover { background: color-mix(in oklab, var(--color-accent), var(--color-ink) 20%); }
.accent-btn:active { transform: scale(0.97); }
.line-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: var(--spacing-target); padding: 0 var(--spacing-s);
  border: 1px solid var(--color-ink); border-radius: var(--radius-ui);
  font-weight: 600; font-size: var(--text-small);
  transition: background-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.line-btn:hover { background: color-mix(in oklab, var(--color-ink) 6%, transparent); }
.line-btn:active { transform: scale(0.97); }
.text-btn {
  display: inline-flex; align-items: center; min-height: var(--spacing-target); padding: 0 0.25rem;
  font-size: var(--text-small); font-weight: 600; color: var(--color-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em;
}
.text-btn:hover { text-decoration-thickness: 2px; }

/* ---------- 젤리 — 한 요소 + 몸(::before) + 광택(::after). 몸만 회전하고 광택은 늘 왼쪽 위 ---------- */
.j {
  --jelly: var(--color-jelly-soda);
  --deep: var(--color-jelly-soda-deep);
  --d: var(--spacing-jelly-m);
  position: absolute; left: 0; top: 0; display: block;
  width: var(--d); height: var(--d);
  isolation: isolate;
  transform-origin: 50% 50%;
}
.j[data-f="grape"] { --jelly: var(--color-jelly-grape); --deep: var(--color-jelly-grape-deep); }
.j[data-f="peach"] { --jelly: var(--color-jelly-peach); --deep: var(--color-jelly-peach-deep); }
.j[data-f="plum"] { --jelly: var(--color-jelly-plum); --deep: var(--color-jelly-plum-deep); }
.j[data-f="lemon"] { --jelly: var(--color-jelly-lemon); --deep: var(--color-jelly-lemon-deep); }
.j[data-z="s"] { --d: var(--spacing-jelly-s); }
.j[data-z="l"] { --d: var(--spacing-jelly-l); }
.j[data-z="xl"] { --d: calc(var(--spacing-jelly-l) * 1.5); }
.j::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 2px solid var(--deep); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--jelly), var(--color-jelly-gloss) 35%), var(--jelly) 64%);
  transform: rotate(var(--a, 0deg));
}
.j::after {
  content: ""; position: absolute; left: 20%; top: 15%; width: 30%; height: 17%;
  border-radius: 50%; background: var(--color-jelly-gloss); opacity: 0.7;
  transform: rotate(-28deg);
}
.j[data-s="cube"]::before { border-radius: var(--radius-cube); }
.j[data-s="cube"]::after { left: 16%; top: 13%; width: 28%; height: 14%; }
/* 링 — 가운데 구멍은 마스크, 구멍 안쪽 테두리는 몸 그라데이션의 deep 띠 */
.j[data-s="ring"]::before {
  background: radial-gradient(circle closest-side, transparent 0 33%, var(--deep) 33% 39%, color-mix(in oklab, var(--jelly), var(--color-jelly-gloss) 30%) 39%, var(--jelly) 80%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 33%, var(--color-ink) 34%);
  mask: radial-gradient(circle closest-side, transparent 0 33%, var(--color-ink) 34%);
}
.j[data-s="ring"]::after { left: 15%; top: 13%; width: 24%; height: 13%; }
/* 글자 블록 "말"·"랑" — 크림 둥근 사각 + 먹 테두리 + Dongle */
.j.blk {
  --d: var(--spacing-tile);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: calc(var(--d) * 0.96); line-height: 1;
  color: var(--color-ink);
  padding-bottom: 0.2em; /* Dongle 한글은 글자 몸 아래쪽에 앉는다 — 잉크를 블록 가운데로 */
}
.j.blk::before { background: var(--color-cream); border-color: var(--color-ink); border-radius: var(--radius-tile); transform: none; }
.j.blk::after { content: none; }

/* 물리 세계 — 화면 고정 층. 젤리만 손을 받는다 */
.world { display: none; }
html.motion .world {
  display: block; position: fixed; inset: 0; z-index: 3;
  pointer-events: none; overflow: hidden; contain: strict;
}
.world.is-off { visibility: hidden; }
.world .j, .drawer .j {
  pointer-events: auto; cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.world .j.is-grab, .drawer .j.is-grab { cursor: grabbing; will-change: transform; z-index: 2; }

/* ---------- 진열대 (헤더 bottom-dock) — 윗변이 물리 바닥 ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  height: calc(var(--spacing-dock) + env(safe-area-inset-bottom));
  padding: 0 var(--spacing-gutter) env(safe-area-inset-bottom);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-s);
  background: var(--color-cream);
}
.dock-edge { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; display: flex; pointer-events: none; }
.edge-l { flex: 0 0 60%; background: var(--color-ink); transform-origin: 0 50%; }
.edge-r { flex: 1 1 auto; background: var(--color-ink); transform-origin: 100% 50%; }
.dock-mark {
  font-family: var(--font-num); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; min-height: var(--spacing-target); text-decoration: none;
}
.chips { display: flex; justify-content: center; gap: var(--spacing-xs); }
.chip {
  display: inline-flex; align-items: center; gap: var(--spacing-xs);
  min-height: var(--spacing-target); min-width: var(--spacing-target); padding: 0 var(--spacing-xs);
  border-radius: var(--radius-ui); text-decoration: none;
  font-size: var(--text-small); color: var(--color-mute);
}
.chip:hover { color: var(--color-ink); }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--dot-deep); background: transparent; }
.chip[data-chip="grape"] { --dot: var(--color-jelly-grape); --dot-deep: var(--color-jelly-grape-deep); }
.chip[data-chip="peach"] { --dot: var(--color-jelly-peach); --dot-deep: var(--color-jelly-peach-deep); }
.chip[data-chip="plum"] { --dot: var(--color-jelly-plum); --dot-deep: var(--color-jelly-plum-deep); }
.chip[data-chip="lemon"] { --dot: var(--color-jelly-lemon); --dot-deep: var(--color-jelly-lemon-deep); }
.chip[data-chip="soda"] { --dot: var(--color-jelly-soda); --dot-deep: var(--color-jelly-soda-deep); }
.chip[aria-current] { color: var(--color-ink); font-weight: 600; }
.chip[aria-current] .dot { background: var(--dot); }
.dock-end { display: flex; align-items: center; gap: var(--spacing-s); }
.cart { font-size: var(--text-small); color: var(--color-mute); white-space: nowrap; }
.cart-n { display: inline-block; min-width: 1.5em; color: var(--color-ink); font-weight: 700; font-size: 0.875rem; }
.buy-n { display: none; }
.pause-m { display: none; }

@media (min-width: 720px) and (max-width: 1023px) {
  .chip-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chip { justify-content: center; padding: 0; }
  .chips { gap: 0; }
}
@media (max-width: 719px) {
  body { --dock-h: calc(var(--spacing-dock-m) + env(safe-area-inset-bottom)); }
  .dock {
    height: calc(var(--spacing-dock-m) + env(safe-area-inset-bottom));
    padding-inline: 0.75rem; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem;
  }
  .dock-mark, .pause-d, .cart { display: none; }
  .chips { justify-content: flex-start; gap: 0; }
  .chip { justify-content: center; padding: 0; }
  .chip-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .buy { padding: 0 0.75rem; }
  .buy-n {
    display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.25rem;
    border-radius: var(--radius-ui); background: var(--color-cream); color: var(--color-ink);
    font-size: var(--text-micro); font-weight: 700;
  }
  html.motion .pause-m {
    display: inline-grid; place-items: center; position: fixed; z-index: 11;
    top: calc(env(safe-area-inset-top) + 0.75rem); right: 0.75rem;
    min-width: var(--spacing-target); height: var(--spacing-target); padding: 0 0.5rem;
    background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-ui);
    font-size: var(--text-small); font-weight: 600;
    transition: opacity 200ms var(--ease-out), visibility 200ms;
  }
  html.motion .pause-m.is-off { opacity: 0; visibility: hidden; }
}

/* ---------- 장면 공통 — 기본은 흐름(정지 컷), html.motion 이면 sticky 무대 ---------- */
.scene { position: relative; }
.stage { position: relative; min-height: 100svh; overflow: hidden; background: var(--color-bg); }
.pile { position: absolute; left: 0; right: 0; bottom: var(--dock-h); height: 46%; pointer-events: none; }

/* ---------- 장면 1 — 쏟아짐 ---------- */
.mark-m { display: none; }
.hero { position: relative; z-index: 1; padding: var(--spacing-2xl) var(--spacing-gutter) 0; }
.hero > * { max-width: 55%; }
.hl {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-hero); line-height: var(--text-hero--line-height); letter-spacing: -0.01em;
}
.lede { margin-top: var(--spacing-m); font-size: var(--text-lede); line-height: var(--text-lede--line-height); font-weight: 500; color: var(--color-mute); }
.hint { margin-top: var(--spacing-l); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--spacing-s); font-size: var(--text-small); color: var(--color-mute); }
.hint:not(:has(:not([hidden]))) { display: none; }
.hint-m { display: none; }

/* ---------- 장면 2 — 쏠림 ---------- */
.tilt-line {
  position: relative; z-index: 1; padding: var(--spacing-2xl) var(--spacing-gutter) 0; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-hero); line-height: var(--text-hero--line-height);
}
.tw { display: inline-block; white-space: nowrap; }
.syl { display: inline-block; transform-origin: 50% 80%; }
/* 계기는 문장 바로 아래 — wireframe 은 왼쪽 아래였지만 그 자리는 더미가 덮는다(글자 겹침 금지 원칙, NOTES) */
.gauge {
  position: relative; z-index: 1; margin-top: var(--spacing-m); padding: 0 var(--spacing-gutter);
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}
.gauge-name { font-size: var(--text-micro); line-height: var(--text-micro--line-height); letter-spacing: 0.04em; color: var(--color-mute); }
.gauge-val { font-family: var(--font-num); font-weight: 700; font-size: var(--text-price); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- 장면 3 — 맛 고르기 ---------- */
.fl {
  position: relative; min-height: 70svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: var(--spacing-2xl) var(--spacing-gutter) var(--spacing-xl);
  background: var(--surface);
}
.fl[data-flavor="grape"] { --surface: var(--color-surface-grape); }
.fl[data-flavor="peach"] { --surface: var(--color-surface-peach); }
.fl[data-flavor="plum"] { --surface: var(--color-surface-plum); }
.fl[data-flavor="lemon"] { --surface: var(--color-surface-lemon); }
.fl[data-flavor="soda"] { --surface: var(--color-surface-soda); }
.fl .pile { left: 50%; bottom: 0; height: 70%; }
.fl-text { position: relative; z-index: 1; }
.fl-num { font-family: var(--font-num); font-weight: 500; font-size: var(--text-small); color: var(--color-mute); }
.fl-name {
  margin-top: var(--spacing-s);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-flavor); line-height: var(--text-flavor--line-height); letter-spacing: -0.01em;
}
.fl-name span { display: inline-block; }
.fl-line { margin-top: var(--spacing-s); max-width: 26em; font-size: var(--text-body); line-height: var(--text-body--line-height); }
.facts { margin-top: var(--spacing-l); display: flex; }
.facts > div { display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 0 var(--spacing-m); border-left: 1px solid var(--color-line); }
.facts > div:first-child { padding-left: 0; border-left: 0; }
.facts dt { font-size: var(--text-micro); line-height: var(--text-micro--line-height); letter-spacing: 0.04em; color: var(--color-mute); }
.facts dd { font-size: var(--text-small); color: var(--color-mute); white-space: nowrap; }
.facts dd .num { font-weight: 600; font-size: var(--text-price); line-height: var(--text-price--line-height); color: var(--color-ink); margin-right: 0.125rem; }

/* ---------- 장면 4 — 눌러 보기 ---------- */
.s-squish .stage {
  background: var(--color-cream);
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-areas: "head fig" "meter fig" "facts fig";
  grid-template-rows: auto auto 1fr; column-gap: var(--spacing-l);
  padding: var(--spacing-2xl) var(--spacing-gutter) calc(var(--dock-h) + var(--spacing-l));
}
.sq-head { grid-area: head; }
.sq-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-hero); line-height: var(--text-hero--line-height); white-space: nowrap; }
.sq-br { display: inline; }
.sq-fig {
  grid-area: fig; position: relative; align-self: center;
  display: grid; justify-items: center; align-content: end;
  min-height: calc(var(--spacing-jelly-hero) * 1.5);
}
.big {
  position: relative; display: block;
  width: var(--spacing-jelly-hero); height: var(--spacing-jelly-hero);
  border-radius: var(--radius-cube); touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.big .j { --d: 100%; width: 100%; height: 100%; transform-origin: 50% 100%; }
.big .j::before { border-width: 3px; }
.sq-floor { display: block; width: calc(var(--spacing-jelly-hero) * 1.5); height: 1px; background: var(--color-ink); }
.plate {
  display: none; position: absolute; left: 50%; top: 0; z-index: 1;
  width: calc(var(--spacing-jelly-hero) * 1.2); height: 14px; margin-left: calc(var(--spacing-jelly-hero) * -0.6);
  background: var(--color-ink); border-radius: var(--radius-ui);
}
.meter { grid-area: meter; margin-top: var(--spacing-l); }
.meter-name { font-size: var(--text-micro); letter-spacing: 0.04em; color: var(--color-mute); }
.meter-row { display: flex; align-items: baseline; gap: var(--spacing-xs); }
.meter-val { font-family: var(--font-num); font-weight: 800; font-size: var(--text-meter); line-height: var(--text-meter--line-height); font-variant-numeric: tabular-nums; }
.meter-max { font-family: var(--font-num); font-size: var(--text-small); color: var(--color-mute); }
.badge {
  align-self: center; display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.625rem;
  border: 1px solid var(--color-ink); border-radius: var(--radius-ui); font-size: var(--text-small); font-weight: 600;
}
.sq-facts { grid-area: facts; margin-top: var(--spacing-l); max-width: 24rem; }
.sq-facts li { padding: 0.625rem 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-body); }
.sq-facts .num { font-weight: 600; font-size: 0.9375rem; }

/* ---------- 장면 5 — 진열 ---------- */
.s-shop { padding: var(--spacing-section) var(--spacing-gutter); background: var(--color-bg); }
.shop-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: var(--text-title--line-height); }
.shop-sub {
  margin-top: var(--spacing-xl); padding-top: var(--spacing-s); border-top: 1px solid var(--color-line);
  font-size: var(--text-small); font-weight: 600; color: var(--color-mute);
}
.items { margin-top: var(--spacing-m); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--spacing-m); }
.item, .gift { border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.item { padding: var(--spacing-s); display: flex; flex-direction: column; gap: 0.25rem; }
/* 칸은 등장 전에 scale 0.97 이다 — 그때도 44px 를 넘게 2px 여유 */
.item .line-btn, .gift .line-btn, .gift .accent-btn { margin-top: auto; min-height: calc(var(--spacing-target) + 0.125rem); }
.item .price { margin: 0.25rem 0 var(--spacing-s); }
.pouch {
  position: relative; aspect-ratio: 4 / 5; margin-bottom: var(--spacing-s);
  background: var(--surface); border: 1.5px solid var(--color-ink); border-radius: var(--radius-pouch);
}
.item[data-flavor="grape"] { --surface: var(--color-surface-grape); }
.item[data-flavor="peach"] { --surface: var(--color-surface-peach); }
.item[data-flavor="plum"] { --surface: var(--color-surface-plum); }
.item[data-flavor="lemon"] { --surface: var(--color-surface-lemon); }
.item[data-flavor="soda"] { --surface: var(--color-surface-soda); }
.crimp { position: absolute; left: 10%; right: 10%; top: 9%; height: 1.5px; background: var(--color-ink); }
.pouch .j { --d: 42%; width: 42%; height: auto; aspect-ratio: 1; left: 29%; top: 30%; }
.pouch-mark {
  position: absolute; left: 0; right: 0; bottom: 9%; text-align: center;
  font-family: var(--font-num); font-weight: 700; font-size: 0.75rem; letter-spacing: -0.01em;
}
.item-name, .gift-name { font-size: var(--text-body); font-weight: 600; line-height: 1.4; }
.item-meta { font-size: var(--text-small); color: var(--color-mute); }
.price { font-size: var(--text-small); font-weight: 600; }
.price .num { font-weight: 700; font-size: var(--text-price); line-height: var(--text-price--line-height); margin-right: 0.125rem; }
.gifts { margin-top: var(--spacing-m); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-m); }
.gift { padding: var(--spacing-l); display: flex; flex-direction: column; gap: 0.25rem; }
.gift .price { margin: var(--spacing-xs) 0 var(--spacing-m); }
.gift-fig { position: relative; display: flex; gap: 0.375rem; margin-bottom: var(--spacing-m); }
.gift-fig .j { position: relative; --d: 2.25rem; }
.gift-tag { font-size: var(--text-micro); letter-spacing: 0.04em; color: var(--color-mute); }
.gift-main { border-color: var(--color-ink); }
.fic { margin-top: var(--spacing-xl); font-size: var(--text-micro); line-height: var(--text-micro--line-height); letter-spacing: 0.04em; color: var(--color-mute); }

@media (min-width: 720px) and (max-width: 1023px) {
  .items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .item { grid-column: span 2; }
  .item:nth-child(4), .item:nth-child(5) { grid-column: span 3; }
  .item:nth-child(4) .pouch, .item:nth-child(5) .pouch { aspect-ratio: 16 / 11; }
  .item:nth-child(4) .pouch .j, .item:nth-child(5) .pouch .j { width: 28%; left: 36%; top: 26%; }
}

/* ---------- 장면 6 — 착지 (FAQ · 꼬리) ---------- */
.s-land { background: var(--color-bg); }
.faq { padding: 0 var(--spacing-gutter) var(--spacing-section); }
.faq-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: var(--text-title--line-height); }
.faq-list { margin-top: var(--spacing-l); max-width: 52rem; border-top: 1px solid var(--color-line); }
.faq-list details { border-bottom: 1px solid var(--color-line); }
.faq-list summary {
  position: relative; list-style: none; cursor: pointer;
  display: flex; align-items: center; min-height: var(--spacing-target); padding: 1.125rem 3rem 1.125rem 0;
  font-weight: 600;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%; width: 1rem; height: 2px; margin-top: -1px;
  background: var(--color-ink); transition: transform 200ms var(--ease-out);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-a p { padding: 0 3rem var(--spacing-m) 0; max-width: 40em; color: var(--color-mute); }

.tail {
  background: var(--color-ink); color: var(--color-cream);
  padding: var(--spacing-section) var(--spacing-gutter) calc(var(--dock-h) + var(--spacing-l));
}
.tail :focus-visible { box-shadow: var(--shadow-focus-on-ink); }
.tail-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: var(--text-title--line-height); }
.tail-sub { margin-top: var(--spacing-xs); font-size: var(--text-small); color: var(--color-mute-on-ink); }
.drawer {
  position: relative; height: 44svh; margin-top: var(--spacing-m);
  border-bottom: 1.5px solid var(--color-cream); overflow: clip;
}
.tail-foot { margin-top: var(--spacing-l); display: grid; gap: var(--spacing-xs); }
.tail-mark { font-family: var(--font-num); font-weight: 700; font-size: calc(var(--text-title) * 0.6); line-height: 1; letter-spacing: -0.02em; }
.tail-note { font-size: var(--text-small); color: var(--color-mute-on-ink); }
.tail-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-m); font-size: var(--text-micro); color: var(--color-mute-on-ink); }
.tail-links a {
  display: inline-flex; align-items: center; min-height: var(--spacing-target); min-width: var(--spacing-target); padding: 0 0.25rem;
  color: var(--color-cream); font-size: var(--text-small);
  text-decoration: underline; text-decoration-color: var(--color-accent-soft); text-underline-offset: 0.3em;
}

/* ---------- 1열(모바일) 다시 배치 ---------- */
@media (max-width: 719px) {
  .mark-m {
    display: block; position: relative; z-index: 1; padding: 1.25rem var(--spacing-gutter) 0;
    font-family: var(--font-num); font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.02em;
  }
  .hero { padding-top: var(--spacing-s); }
  .hero > * { max-width: none; }
  .hl, .tilt-line, .sq-title { font-size: var(--text-hero-m); line-height: var(--text-hero-m--line-height); }
  .lede { margin-top: var(--spacing-s); font-size: var(--text-body); }
  .hint { margin-top: var(--spacing-s); }
  .pile { height: 40%; }

  .hint-d { display: none; }
  .hint-m { display: inline; }
  /* 두 줄 문장 — Dongle 은 몸이 낮아 0.86 이면 "울" 받침이 아랫줄 "와" 에 닿는다(qa-1 P2-1) */
  .tilt-line { text-align: left; padding-top: 4.5rem; line-height: 1.1; }
  .gauge { align-items: flex-start; }
  .tw { display: block; }

  .fl { grid-template-columns: minmax(0, 1fr); padding-top: 4.5rem; }
  .fl .pile { left: 0; height: 45%; }
  .fl-name { font-size: var(--text-flavor-m); line-height: var(--text-flavor-m--line-height); }
  .facts { margin-top: var(--spacing-m); }
  .facts > div { flex: 1 1 0; padding: 0 var(--spacing-s); }

  .s-squish .stage {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "meter" "facts";
    grid-template-rows: auto auto auto 1fr;
    padding-top: 4.5rem;
  }
  .sq-br { display: block; height: 0; }
  .sq-title { white-space: normal; }
  .sq-fig { min-height: calc(var(--spacing-jelly-hero) + 2.5rem); margin-top: var(--spacing-s); }
  .meter { margin-top: var(--spacing-s); }
  .sq-facts { margin-top: var(--spacing-s); }
  .sq-facts li { padding: 0.375rem 0; font-size: var(--text-small); }

  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-s); }
  .item-wide { grid-column: span 2; flex-direction: row; gap: var(--spacing-s); }
  .item-wide .pouch { flex: 0 0 calc(50% - var(--spacing-s) / 2); margin-bottom: 0; }
  .item-wide .item-body { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.25rem; }
  .gifts { grid-template-columns: minmax(0, 1fr); }
  .gift { padding: var(--spacing-m); }
  .drawer { height: 38svh; }
}
@media (max-width: 399px) {
  .price .num { font-size: var(--text-price-s); }
}

/* ======================================================================
   html.motion — 장면 고정(CSS sticky, ScrollTrigger pin 없음) · 물리 세계
   ====================================================================== */
html.motion .s-pour { --range: 60svh; }
html.motion .s-tilt { --range: 160svh; }
html.motion .s-flavor { --range: 350svh; }
html.motion .s-squish { --range: 140svh; }
@media (max-width: 719px) {
  html.motion .s-pour { --range: 50svh; }
  html.motion .s-tilt { --range: 130svh; }
  html.motion .s-flavor { --range: 300svh; }
  html.motion .s-squish { --range: 120svh; }
}
html.motion .scene { height: calc(100svh + var(--range)); }
/* 이음매 0 — 다음 장면 무대가 앞 장면의 100% 와 같은 위치에서 붙는다 */
html.motion .scene + .scene { margin-top: -100svh; }
html.motion .stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
/* 다음 무대는 붙는 순간에만 보인다(main.js 가 is-live) — visibility 가 아니라 opacity: 접근성 트리에 남긴다 */
html.motion .scene + .scene > .stage { opacity: 0; }
html.motion .scene + .scene > .stage.is-live { opacity: 1; }
html.motion .pile { display: none; }
html.motion .dock { animation: mallang-dock-in 320ms var(--ease-out) both; }
@keyframes mallang-dock-in { from { transform: translateY(100%); } }

/* 장면 3 — 다섯 칸이 한 무대에 겹치고 지금 칸만 보인다(바탕은 main.js 가 무대에 칠한다) */
html.motion .fl-list { position: absolute; inset: 0; }
html.motion .fl { position: absolute; inset: 0; min-height: 0; background: none; opacity: 0; pointer-events: none; }
html.motion .fl.is-on { opacity: 1; pointer-events: auto; }

/* 장면 4 — 누름판 · 기록 딱지 · 사실 줄은 스크롤이 연다 */
html.motion .plate { display: block; }
html.motion .badge { opacity: 0; }
html.motion .big .j { will-change: transform; }

/* FAQ 펼침 — 한 번, 200ms */
html.motion .faq-list details[open] .faq-a { animation: mallang-faq 200ms var(--ease-out); }
@keyframes mallang-faq { from { opacity: 0; transform: translateY(-0.375rem); } }

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) { transition: none !important; animation: none !important; }
}