/* keyform — 화면 규칙. 색·서체·간격은 tokens.css 의 변수만 쓴다.
 * 두 겹이다. 기본 = 정지 카탈로그(reduced-motion · WebGL 없음 · 스크립트 막힘 · #mode=still 이 모두 이 배치를 본다).
 * html.motion = 3D 무대(sticky — 왼쪽 캔버스 칸 + 오른쪽 단색 패널) + 장면 트랙 + 줄 마스크 스크럽. 마스크 전 상태는 html.motion 아래에만. */

/* ── 리셋 (:where — 특정도 0) ─────────────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body, h1, h2, h3, p, dl, dd, figure, blockquote, ul, fieldset) { margin: 0; }
:where(ul) { padding: 0; list-style: none; }
:where(fieldset) { border: 0; padding: 0; min-width: 0; }
:where(legend) { padding: 0; }
:where(img, svg, canvas, picture) { display: block; max-width: 100%; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; }
:where(table) { border-collapse: collapse; }

html {
  --dock-h: calc(var(--spacing-dock-m) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  color: var(--color-ink);
}
@media (min-width: 1024px) {
  html { --dock-h: var(--spacing-dock); }
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: var(--dock-h);
}
::selection { background: var(--color-ink); color: var(--color-surface); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  left: var(--spacing-4);
  top: var(--spacing-4);
  z-index: 40;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }
.fine-only { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fine-only { display: inline; }
}
.m-only { display: none; }
@media (max-width: 1023px) {
  .d-only { display: none; }
  .m-only { display: inline; }
}

/* ── 글자 부품 ───────────────────────────────────────────────────── */
.head,
.code,
.g-k,
.d-k,
.o-s,
.spec,
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
}
.head { font-size: var(--text-meta); line-height: 1.4; color: var(--color-mute); }
.model {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-model-m);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: var(--spacing-3);
}
.title {
  font-weight: 700;
  font-size: var(--text-scene-m);
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin-top: var(--spacing-3);
}
.lead { font-size: var(--text-lead); line-height: 1.55; margin-top: var(--spacing-3); }
.s-build .lead { font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 1024px) {
  .model { font-size: var(--text-model); margin-top: var(--spacing-4); }
  .title { font-size: var(--text-scene); margin-top: var(--spacing-4); }
  .lead { margin-top: var(--spacing-4); }
}
.morph { display: inline-block; white-space: pre; font-variant-numeric: tabular-nums; }
.morph .ch { display: inline-block; }
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  min-height: var(--spacing-target);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: 600;
}
.link.sm { min-height: var(--spacing-target); font-size: var(--text-small); font-weight: 500; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  min-height: var(--spacing-12);
  padding: 0 var(--spacing-8);
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 120ms var(--ease-out-quad);
}
.btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.btn:active { transform: scale(0.97); }

/* ── 패널 (장면 글자) ─────────────────────────────────────────────── */
.panel { padding: var(--spacing-8) var(--spacing-gutter) var(--spacing-10); background: var(--color-surface); }
@media (min-width: 1024px) {
  .panel { padding: var(--spacing-panel-pad); }
}

/* 옵션 묶음 */
.group { margin-top: var(--spacing-6); }
.opts-a .group:first-child { margin-top: var(--spacing-8); }
.g-head {
  float: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  font-size: var(--text-small);
  line-height: 1.4;
}
.g-head + * { clear: both; }
.g-k { font-size: var(--text-meta); color: var(--color-mute); min-width: 4.5em; }
.g-v { font-weight: 600; }
.g-d {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-2); }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: calc(var(--spacing-12) + var(--spacing-2));
  padding: 0 var(--spacing-3);
  border: 1px solid var(--color-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 120ms var(--ease-out-quad);
}
.opt:active { transform: scale(0.97); }
.opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opt:has(input:checked) { border: 2px solid var(--color-ink); padding: 0 calc(var(--spacing-3) - 1px); }
.opt:has(input:checked)::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
}
.opt:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.o-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.o-n { font-size: var(--text-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-s { font-size: var(--text-meta); color: var(--color-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sw {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-swatch);
  border: 1px solid var(--color-control);
}
@media (min-width: 1200px) {
  .sw { width: var(--spacing-8); height: var(--spacing-8); }
}
/* 1024–1199 — 패널 글자 칸 300px 에 칩 셋: 안쪽 여백·견본을 줄여 이름이 잘리지 않게 */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* 1024–1199 — 패널 글자 칸 300~352px 에 칩 셋(칸당 ≈ 96px). 견본을 이름 앞 작은 점으로, 보조 줄은 칸 전폭 아래 줄(필요하면 줄바꿈) */
  .opt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    column-gap: 6px;
    row-gap: 2px;
    padding: var(--spacing-2) 10px;
  }
  .opt:has(input:checked) { padding: calc(var(--spacing-2) - 1px) 9px; }
  .o-t { display: contents; }
  .sw { grid-row: 1; align-self: center; width: 0.875rem; height: 0.875rem; }
  .o-n { grid-column: 2; }
  .opt:not(:has(.sw)) .o-n { grid-column: 1 / -1; }
  .o-s { grid-column: 1 / -1; white-space: normal; line-height: 1.25; }
}
/* 견본 — 금속은 위·아래 두 톤(반원 둘), 키캡은 알파·모디 반반. 그라데이션이 아니라 반 나눔이다 */
.sw-silver { background: linear-gradient(var(--color-alu-silver) 50%, color-mix(in oklab, var(--color-alu-silver), var(--color-ink) 16%) 50%); }
.sw-graphite { background: linear-gradient(color-mix(in oklab, var(--color-alu-graphite), var(--color-surface) 14%) 50%, var(--color-alu-graphite) 50%); }
.sw-frost { background: linear-gradient(var(--color-pc-frost) 50%, color-mix(in oklab, var(--color-pc-frost), var(--color-plate) 30%) 50%); }
.sw-sand { background: linear-gradient(90deg, var(--color-cap-sand-alpha) 50%, var(--color-cap-sand-mod) 50%); }
.sw-cgraphite { background: linear-gradient(90deg, var(--color-cap-graphite-alpha) 50%, var(--color-cap-graphite-mod) 50%); }
.sw-fog { background: linear-gradient(90deg, var(--color-cap-fog-alpha) 50%, var(--color-cap-fog-mod) 50%); }

/* 모바일 탭 */
.tabs { display: none; }
@media (max-width: 1023px) {
  .tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--spacing-3);
    border-bottom: 1px solid var(--color-line);
  }
  .tabs button {
    min-height: var(--spacing-target);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-mute);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    user-select: none;
    -webkit-user-select: none;
  }
  .tabs [aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-ink); }
  .s-build .group { display: none; margin-top: var(--spacing-2); }
  .s-build .group.on { display: block; }
  .opts-a .group:first-child { margin-top: var(--spacing-2); }
  .s-build .g-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .s-build .cue { display: none; }
}
.cue { margin-top: var(--spacing-6); font-size: var(--text-small); color: var(--color-mute); }
.promise { display: none; }
@media (min-width: 1024px) {
  .promise {
    display: block;
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-line);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--color-mute);
    line-height: 1.6;
  }
  .promise + .cue { margin-top: var(--spacing-2); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .promise { display: none; }
  .motion .s-build .panel { display: flex; flex-direction: column; }
  .motion .s-build .bottom { margin-top: auto; }
}

/* 장면 2 — 재질 줄 */
.mats { margin-top: var(--spacing-6); border-top: 1px solid var(--color-line); }
.mat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--spacing-4);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-line);
}
.mat dt { font-weight: 600; }
.mat .fig {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-figure);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mat .spec { grid-column: 1 / -1; margin-top: var(--spacing-1); font-size: var(--text-meta); color: var(--color-mute); }
.group.mini { margin-top: var(--spacing-6); }
@media (max-width: 1023px) {
  .mats { margin-top: var(--spacing-3); }
  .mat { padding: var(--spacing-2) 0; }
  .mat dt { font-size: var(--text-small); }
  .mat .fig { font-size: var(--text-price); }
  .mat .spec { display: none; }
  .group.mini { margin-top: var(--spacing-3); }
}

/* 장면 3 — 힘 곡선 · 수치 */
.curve { margin-top: var(--spacing-6); }
.curve svg { width: 100%; height: 10rem; overflow: visible; }
.curve .axis path { fill: none; stroke: var(--color-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curve .axis text { font-family: var(--font-mono); font-size: 12px; fill: var(--color-mute); }
.curve .act { fill: none; stroke: var(--color-mute); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.curve .line { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-4); margin-top: var(--spacing-6); }
.figs dt { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-mute); }
.figs dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-price);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
@media (max-width: 1023px) {
  .curve { margin-top: var(--spacing-3); }
  .curve svg { height: 7.5rem; }
  .figs { margin-top: var(--spacing-3); }
  .figs dd { font-size: var(--text-lead); }
}

/* 장면 4 — 구성 요약 · 합계 */
.sum { margin-top: var(--spacing-6); border-top: 1px solid var(--color-line); }
.sum > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-small);
}
.sum dt { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-mute); }
.sum .s-v { font-weight: 600; }
.sum .s-p { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sum-m { display: none; }
.total {
  margin-top: var(--spacing-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-model-m);
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
  .total { font-size: var(--text-model); }
}
.code { margin-top: var(--spacing-2); font-size: var(--text-meta); color: var(--color-mute); }
.acts { display: flex; align-items: center; gap: var(--spacing-6); margin-top: var(--spacing-6); }
.note { margin-top: var(--spacing-4); font-size: var(--text-small); color: var(--color-mute); }
@media (max-width: 1023px) {
  .s-desk .sum { display: none; }
  .sum-m { display: block; margin-top: var(--spacing-3); font-size: var(--text-small); font-weight: 600; max-width: 22em; }
  .total { margin-top: var(--spacing-3); }
  .acts { margin-top: var(--spacing-4); }
  .s-desk .note { display: none; }
}

/* ── 무대 — 기본(카탈로그)에서는 없다 ────────────────────────────── */
.stage { display: none; }

/* ── 정지 카탈로그 (기본 배치) ───────────────────────────────────── */
.scene { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--color-line); }
.still { background: var(--color-bg); }
.still img { width: 100%; height: auto; }
.still figcaption {
  padding: var(--spacing-3) var(--spacing-gutter);
  font-size: var(--text-small);
  color: var(--color-mute);
}
@media (min-width: 1024px) {
  .scene { grid-template-columns: minmax(0, 1fr) var(--spacing-panel); }
  .still { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--color-line); }
  .scene .panel { align-self: center; }
}

/* ── 정적 블록 (장면 5 — Info) ───────────────────────────────────── */
.static { position: relative; z-index: 2; background: var(--color-surface); border-top: 1px solid var(--color-line); }
.wrap { max-width: var(--spacing-content); margin: 0 auto; padding: var(--spacing-16) var(--spacing-gutter) var(--spacing-12); }
@media (min-width: 1024px) {
  .wrap { padding-top: var(--spacing-24); }
}
.blk + .blk { margin-top: var(--spacing-24); }
.blk h2 { font-weight: 700; font-size: var(--text-scene-m); line-height: 1.3; letter-spacing: -0.025em; }
@media (min-width: 1024px) {
  .blk h2 { font-size: var(--text-scene); }
}
.rv { display: block; }
.rvi { display: inline-block; }
.sub { margin-top: var(--spacing-2); color: var(--color-mute); font-size: var(--text-small); }

.tbl { margin-top: var(--spacing-8); }
.cmp { width: 100%; table-layout: fixed; font-size: var(--text-small); }
.cmp th,
.cmp td { padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) 0; text-align: left; vertical-align: top; }
.cmp thead th { vertical-align: bottom; border-bottom: 1px solid var(--color-ink); font-weight: 400; }
.cmp thead th:first-child { width: 22%; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-mute); }
.cmp tbody tr { border-bottom: 1px solid var(--color-line); }
.cmp tbody th { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500; color: var(--color-mute); }
.cmp td.n { font-variant-numeric: tabular-nums; }
.c-n { display: block; font-weight: 700; font-size: var(--text-body); }
.cur {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-ink);
  visibility: hidden;
}
.cur::before { content: ""; width: 8px; height: 8px; background: var(--color-ink); } /* 먹 — 주황은 3D Esc 와 고른 칸 사각에만(원칙 3) */
.is-cur .cur { visibility: visible; }
.is-cur [data-pick] { visibility: hidden; }
@media (min-width: 1024px) {
  .cmp { font-size: var(--text-body); }
  .cmp thead th:first-child { width: 28%; }
}

.ship {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--spacing-8);
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}
.ship > div { padding: var(--spacing-4); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ship dt { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-mute); }
.ship dd { margin-top: var(--spacing-2); font-weight: 600; line-height: 1.5; }
@media (min-width: 1024px) {
  .ship { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ship > div { padding: var(--spacing-6); }
}

.rev-head { display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--spacing-2);
  border: 1px solid var(--color-control);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-mute);
}
.revs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-8); margin-top: var(--spacing-8); }
@media (min-width: 720px) {
  .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-12); row-gap: var(--spacing-10); }
}
.rev { padding-top: var(--spacing-4); border-top: 1px solid var(--color-line); }
.rev blockquote p { font-size: 1.0625rem; line-height: 1.65; max-width: 32em; }
.who { display: flex; flex-wrap: wrap; gap: var(--spacing-1) var(--spacing-3); margin-top: var(--spacing-4); font-size: var(--text-small); font-weight: 600; }
.who .mono { font-size: var(--text-meta); font-weight: 500; color: var(--color-mute); align-self: center; }

.foot { margin-top: var(--spacing-24); padding-top: var(--spacing-8); border-top: 1px solid var(--color-line); display: grid; gap: var(--spacing-3); }
.f-mark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-price); letter-spacing: -0.03em; }
.f-note { font-size: var(--text-small); color: var(--color-mute); max-width: 40em; }
.f-nav { display: flex; flex-wrap: wrap; gap: var(--spacing-6); }

/* ── 머리 bottom-dock ─────────────────────────────────────────────── */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  height: var(--dock-h);
  padding: 0 var(--spacing-gutter) env(safe-area-inset-bottom);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.d-mark {
  display: none;
  align-items: center;
  min-height: var(--spacing-target);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.d-fields { display: none; }
.d-sum { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; line-height: 1.25; }
.d-line {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-total {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-price-m);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .d-mark { display: inline-flex; }
  .d-sum { flex-direction: row; align-items: center; gap: var(--spacing-6); }
  .d-line { font-size: var(--text-meta); flex: 1; }
}
@media (min-width: 1024px) {
  .dock { gap: var(--spacing-6); }
  .d-fields { display: flex; align-self: stretch; align-items: center; }
  .d-fields a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--spacing-target);
    padding: 0 var(--spacing-4);
    border-left: 1px solid var(--color-line);
    text-decoration: none;
    line-height: 1.3;
  }
  .d-fields li:last-child a { border-right: 1px solid var(--color-line); }
  .d-fields a:hover .d-v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .d-k { font-size: var(--text-meta); color: var(--color-mute); }
  .d-v { font-size: var(--text-small); font-weight: 600; white-space: nowrap; }
  .d-line { display: none; }
  .d-sum { flex: 1; justify-content: flex-end; }
  .d-total { font-size: var(--text-price); }
}
@media (min-width: 1200px) {
  .d-fields a { padding: 0 var(--spacing-6); }
}

/* ── 담기 판 ─────────────────────────────────────────────────────── */
.cart {
  position: fixed;
  right: 0;
  bottom: var(--dock-h);
  left: 0;
  z-index: 30;
  padding: var(--spacing-6) var(--spacing-gutter) var(--spacing-6);
  background: var(--color-surface);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-sheet);
}
.cart { display: none; }
.cart.open,
html:not(.js) .cart:target { display: block; }
@media (min-width: 720px) {
  .cart { left: auto; right: var(--spacing-gutter); width: min(28rem, calc(100% - 2 * var(--spacing-gutter))); padding-inline: var(--spacing-6); }
}
/* 1024+ — 오른쪽 패널 칸 전체를 덮는다(옵션 줄 중간을 가로지르지 않게). 내용은 dock 쪽(아래)에 붙는다 */
@media (min-width: 1024px) {
  .cart {
    top: 0;
    right: 0;
    width: var(--spacing-panel);
    padding: var(--spacing-panel-pad);
    border-radius: 0;
    border-left: 1px solid var(--color-line);
    flex-direction: column;
    justify-content: flex-end;
  }
  .cart.open,
  html:not(.js) .cart:target { display: flex; }
}
.c-head { display: flex; align-items: center; justify-content: space-between; }
.c-head h2 { font-size: var(--text-lead); font-weight: 700; }
.cart .sum { margin-top: var(--spacing-3); }
.c-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--spacing-4); }
.c-k { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-mute); }
.c-v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-price); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cart .note { margin-top: var(--spacing-3); }

/* ── 캔버스 칸 위 칩 — 자기 바탕을 든다(렌더 색과 무관하게 대비 고정) ── */
.chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-8);
  padding: 0 var(--spacing-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-ink);
  white-space: nowrap;
  transition: opacity 240ms var(--ease-out-quad), visibility 0s linear 240ms;
}
.read { left: var(--spacing-gutter); top: var(--spacing-4); }
.hint { left: var(--spacing-gutter); bottom: var(--spacing-4); color: var(--color-mute); }
.front { right: var(--spacing-gutter); bottom: calc(var(--spacing-4) - 6px); min-height: var(--spacing-target); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 1024px) {
  .chip { font-size: var(--text-meta); }
  .read { top: var(--spacing-6); }
  .hint { bottom: var(--spacing-6); }
  .front { bottom: calc(var(--spacing-6) - 6px); }
}
.stage[data-chips="off"] .chip,
.hint.used { opacity: 0; visibility: hidden; }

/* ══ html.motion — 3D 무대 + 장면 트랙 ════════════════════════════ */
.motion .stage {
  display: block;
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  background: var(--color-surface);
}
.motion .cell {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--spacing-stage-m);
  overflow: hidden;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 1024px) {
  .motion .cell { width: calc(100% - var(--spacing-panel)); height: calc(100svh - var(--dock-h)); border-bottom: 0; border-right: 1px solid var(--color-line); }
}
.motion .poster,
.motion .poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .poster img { object-fit: cover; }
.motion .cell canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  touch-action: pan-y;
  cursor: grab;
  transition: opacity 400ms var(--ease-out-expo);
}
.motion .stage.dragging canvas { cursor: grabbing; }
.motion .stage.hovering canvas { cursor: pointer; }
.motion .stage.live canvas { opacity: 1; }
.motion .stage.settled .poster { visibility: hidden; }

.motion .track { position: relative; z-index: 1; margin-top: -100svh; pointer-events: none; }
.motion .scene { display: block; border: 0; height: calc((var(--len) + 100) * 1svh); }
.motion .scene + .scene { margin-top: -100svh; }
.motion .s-build { --len: 160; }
.motion .s-material { --len: 160; }
.motion .s-inside { --len: 180; }
.motion .s-desk { --len: 140; height: calc((var(--len) + 200) * 1svh); }
@media (max-width: 1023px) {
  .motion .s-build { --len: 120; }
  .motion .s-material { --len: 120; }
  .motion .s-inside { --len: 140; }
  .motion .s-desk { --len: 110; }
}
.motion .scene .still { display: none; }
.motion .copy { position: sticky; top: 0; height: 100svh; }
.motion .panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--spacing-stage-m) + 1px);
  bottom: var(--dock-h);
  padding: var(--spacing-4) var(--spacing-gutter);
  background: none;
  overflow: hidden;
  pointer-events: none;
  align-self: stretch; /* 카탈로그의 align-self: center 가 절대 위치 상자도 가운데로 옮긴다 */
}
.motion .scene.on .panel { pointer-events: auto; }
@media (min-width: 1024px) {
  .motion .panel { left: auto; top: 0; width: var(--spacing-panel); padding: var(--spacing-panel-pad); }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .motion .s-build .group { margin-top: var(--spacing-4); }
  .motion .s-build .opts-a .group:first-child { margin-top: var(--spacing-6); }
  .motion .s-build .cue { margin-top: var(--spacing-4); }
  .motion .panel { padding-top: var(--spacing-8); }
}
.motion .static { margin-top: -100svh; will-change: transform; }

/* 줄 마스크 — 감싸개는 자르고, 안쪽이 오르내린다(스크롤 진행률이 정한다, main.js) */
.motion .track .m { overflow: clip; overflow-clip-margin: 6px; }
.motion .track .scene:not(.s-build) .mi { transform: translateY(130%); }
.motion .track .mi { display: block; }

/* 등장(≤600ms 한 번) — 첫 화면 패널 Stagger Fade in · dock Fade in */
@keyframes kf-fade { from { opacity: 0; } }
.motion .s-build .mi { animation: kf-fade 320ms var(--ease-out-expo) both; }
.motion .s-build .model .mi { animation-delay: 50ms; }
.motion .s-build .lead .mi { animation-delay: 100ms; }
.motion .s-build .tabs-m .mi { animation-delay: 150ms; }
.motion .s-build .opts-a .mi { animation-delay: 150ms; }
.motion .s-build .opts-b .mi { animation-delay: 200ms; }
.motion .s-build .bottom .mi { animation-delay: 250ms; }
.motion .dock { animation: kf-fade 240ms var(--ease-out-quad) both; }

/* 정적 블록 등장 — 제목 Reveal · 표 행 Stagger · 후기 Fade in */
.motion .static .rv { overflow: clip; }
.motion .static .rvi { transform: translateY(110%); transition: transform 400ms var(--ease-out-expo); }
.motion .static .in .rvi { transform: none; }
.motion .static .cmp tbody tr { opacity: 0; transition: opacity 240ms var(--ease-out-quad); }
.motion .static .in .cmp tbody tr { opacity: 1; }
.motion .static .in .cmp tbody tr:nth-child(2) { transition-delay: 40ms; }
.motion .static .in .cmp tbody tr:nth-child(3) { transition-delay: 80ms; }
.motion .static .in .cmp tbody tr:nth-child(4) { transition-delay: 120ms; }
.motion .static .in .cmp tbody tr:nth-child(5) { transition-delay: 160ms; }
.motion .static .in .cmp tbody tr:nth-child(6) { transition-delay: 200ms; }
.motion .static .in .cmp tbody tr:nth-child(7) { transition-delay: 240ms; }
.motion .static .in .cmp tbody tr:nth-child(8) { transition-delay: 280ms; }
.motion .static .rev { opacity: 0; transition: opacity 320ms var(--ease-out-quad); }
.motion .static .in .rev { opacity: 1; }
.motion .static .in .rev:nth-child(2) { transition-delay: 60ms; }
.motion .static .in .rev:nth-child(3) { transition-delay: 120ms; }
.motion .static .in .rev:nth-child(4) { transition-delay: 180ms; }

/* 담기 판 Slide in · 힘 곡선 Line drawing — 움직임 경로에서만 */
@keyframes kf-sheet { from { transform: translateY(16px); opacity: 0; } }
.motion .cart.open { animation: kf-sheet 240ms var(--ease-out-expo) both; }
.motion .curve .line.draw { animation: kf-draw 320ms var(--ease-out-expo) both; }
@keyframes kf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.curve .line { stroke-dasharray: 1 0; }
.motion .curve .line.draw { stroke-dasharray: 1 1; }

/* 굽기(#bake=) — 정지 컷을 만들 때 캔버스 칸만 전면으로, 글자·머리·칩은 숨긴다 */
.bake .cell { width: 100%; height: 100svh; border: 0; }
.bake .dock,
.bake .copy,
.bake .chip,
.bake .poster,
.bake .skip,
.bake .static { visibility: hidden; }
.bake .cell canvas { transition: none; }