/* driftlands — 노을 하늘 트레일러 전면 + 귀퉁이 계기판 머리. 색·크기·이징은 전부 tokens.css 의 var(). */

/* ---------- 리셋 (:where — 특이도 0) ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
:where(ol, ul) { list-style: none; padding: 0; }
:where(img, video, svg) { display: block; max-width: 100%; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(table) { border-collapse: collapse; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --focus: var(--color-focus-light);
}
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: break-word;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* 땅거미·사진 위는 호박 고리(5.83:1), 하늘 위는 잉크 고리(5.38:1) */
.hud, .hero, .band-plate, .landing, .menu, .theater, .sheet, .roster, .isle-panel,
.cargo[data-open], .cargo-row--dusk, .cmp thead, .platforms { --focus: var(--color-focus-dark); }

.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: fixed; left: var(--spacing-corner); top: var(--spacing-corner); z-index: 90;
  padding: var(--spacing-3) var(--spacing-4); background: var(--color-cream); color: var(--color-hull);
  border-radius: var(--radius-plate); transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- 글자 단계 ---------- */
.kicker, .label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.overline { font-size: var(--text-small); font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; }
.section-lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-soft); max-width: 40rem; }

/* ---------- 단추 · 링크 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-3);
  min-height: 52px; padding: 0 var(--spacing-6);
  border-radius: var(--radius-plate);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  transition: transform var(--duration-press) var(--ease-out-quart), background-color var(--duration-swap) var(--ease-out-quart);
  -webkit-user-select: none; user-select: none; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--amber { background: var(--color-amber); color: var(--color-hull); }
.btn--line { box-shadow: inset 0 0 0 1.5px var(--color-cream); color: var(--color-cream); }
.btn--dusk { background: var(--color-dusk); color: var(--color-cream); }
.btn--cream { background: var(--color-cream); color: var(--color-hull); }
@media (hover: hover) {
  .btn--amber:hover { background: color-mix(in oklab, var(--color-amber), var(--color-cream) 22%); }
  .btn--line:hover { background: var(--color-plate); }
  .btn--dusk:hover { background: var(--color-hull); }
  .btn--cream:hover { background: var(--color-surface-high); }
}
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--spacing-3);
  min-height: 44px;
  font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em;
}
.i-arrow { flex: none; transition: transform var(--duration-swap) var(--ease-sail); }
@media (hover: hover) { a:hover > .i-arrow, a:hover .i-arrow { transform: translateX(4px); } }

/* ---------- 머리 — corner-split 계기판 판 ---------- */
.plate {
  background: var(--color-plate);
  color: var(--color-cream);
  border-radius: var(--radius-plate);
  box-shadow: var(--shadow-plate);
}
/* 이중 테두리 — 판 안쪽 3px 에 크림 머리카락선 */
.plate::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid var(--color-plate-rim); border-radius: 1px;
}
.loop-btn, .menu-close, .theater-btn, .sheet-close { position: relative; }
.corner {
  position: fixed; z-index: 40;
  display: flex; align-items: center; gap: var(--spacing-2);
  min-height: 52px; padding: var(--spacing-1) var(--spacing-2);
}
.corner--tl { top: calc(var(--spacing-corner) + env(safe-area-inset-top)); left: calc(var(--spacing-corner) + env(safe-area-inset-left)); }
.corner--tr { top: calc(var(--spacing-corner) + env(safe-area-inset-top)); right: calc(var(--spacing-corner) + env(safe-area-inset-right)); }
.corner--bl { bottom: var(--spacing-corner); left: calc(var(--spacing-corner) + env(safe-area-inset-left)); padding-inline: var(--spacing-4); }
.corner--br { bottom: var(--spacing-corner); right: calc(var(--spacing-corner) + env(safe-area-inset-right)); padding-inline: var(--spacing-4); gap: var(--spacing-4); }
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--spacing-2);
  font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: 0.06em; line-height: 1;
}
.menu-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--spacing-3);
  font-size: var(--text-small); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.tab-amber {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--spacing-4);
  background: var(--color-amber); color: var(--color-hull); border-radius: var(--radius-plate);
  font-size: var(--text-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform var(--duration-press) var(--ease-out-quart);
}
.tab-amber:active { transform: scale(0.97); }
@media (hover: hover) {
  .menu-btn:hover, .wordmark:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
  .tab-amber:hover { background: color-mix(in oklab, var(--color-amber), var(--color-cream) 22%); }
}
.log { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); line-height: 44px; white-space: nowrap; }
.gauge {
  display: flex; align-items: baseline; gap: 0.35em; white-space: nowrap;
  font-size: var(--text-gauge); font-variant-numeric: tabular-nums; line-height: 44px;
}
.gauge-k { font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); color: var(--color-cream-soft); }
.gauge-v { font-weight: 600; min-width: 2.6em; text-align: right; }
.gauge-v[data-hdg] { min-width: 2.2em; }
.gauge-sep { color: var(--color-cream-soft); }
.ruler {
  position: relative; width: 64px; height: 14px; flex: none;
}
.ruler-ticks { width: 64px; height: 14px; fill: none; stroke: var(--color-cream-soft); stroke-width: 1; }
.needle {
  position: absolute; left: 0; bottom: 0; width: 2px; height: 14px; margin-left: -1px;
  background: var(--color-amber); border-radius: 1px;
  transform: translateX(0);
}
.dock { display: none; }
.sep { margin-inline: 0.2em; }

html.motion .corner { animation: plate-in 300ms var(--ease-out-quart) 120ms backwards; }
@keyframes plate-in { from { opacity: 0; } }

@media (max-width: 719.98px) {
  .corner--bl, .corner--br, .tab-amber { display: none; }
  /* 위 두 판 사이 틈으로 본문이 스치지 않게 — 위 띠 전체에 얇은 땅거미 번짐(아래 띠와 같은 색) */
  .hud::before {
    content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 39; pointer-events: none;
    height: calc(env(safe-area-inset-top) + var(--spacing-corner) + 64px);
    background: linear-gradient(to bottom, color-mix(in oklab, var(--color-dusk) 92%, transparent) 0%, color-mix(in oklab, var(--color-dusk) 70%, transparent) 55%, transparent);
  }
  .kicker-studio { display: none; }
}
/* 낮은 세로 화면(≤700)은 소개 줄을 접는다 — 비행선 선체 높이와 겹친다(qa-1 P2-1). 첫 화면 정의 밖 요소다 */
@media (max-width: 719.98px) and (max-height: 700px) {
  .hero-copy .overline { display: none; }
  .corner { min-height: 48px; }
  .wordmark { font-size: 1.125rem; }
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4);
    height: calc(var(--spacing-dock) + env(safe-area-inset-bottom));
    padding: var(--spacing-2) var(--spacing-gutter) calc(var(--spacing-2) + env(safe-area-inset-bottom));
    background: var(--color-dusk); color: var(--color-cream);
    box-shadow: inset 0 1px 0 var(--color-rule-dark);
  }
  .dock-pre {
    display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--spacing-6);
    background: var(--color-amber); color: var(--color-hull); border-radius: var(--radius-plate);
    font-size: var(--text-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .dock-pre:active { transform: scale(0.97); }
  .dock-gauge { display: flex; align-items: baseline; gap: 0.35em; font-variant-numeric: tabular-nums; font-size: var(--text-gauge); }
}

/* ---------- 히어로 — horizon ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100svh; min-height: 560px;
  background: var(--color-dusk); color: var(--color-cream);
}
.hero-media { position: absolute; inset: 0; z-index: -2; transform-origin: 62% 45%; }
.hero-poster, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.hero-video { opacity: 0; transition: opacity 700ms var(--ease-sail); }
.hero-video.is-playing { opacity: 1; }
.hero-scrim { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.hero-scrim--top { top: 0; height: 200px; background: linear-gradient(to bottom, var(--color-scrim), transparent); }
.hero-scrim--bottom { bottom: 0; height: 52%; background: linear-gradient(to top, var(--color-scrim-low) 0%, var(--color-scrim-low) 22%, transparent); }
.hero-copy {
  position: absolute; left: var(--spacing-gutter); right: var(--spacing-gutter);
  bottom: calc(var(--spacing-corner) + 84px);
  display: grid; justify-items: start; gap: var(--spacing-4);
  text-shadow: var(--shadow-text-on-photo);
}
.hero-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--text-hero); line-height: var(--text-hero--line-height);
  letter-spacing: var(--tracking-display);
  margin-block: var(--spacing-1) var(--spacing-1);
}
.hero-lead { font-size: var(--text-lead); font-weight: 500; line-height: 1.35; }
.hero-date {
  font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: 0.05em;
  text-transform: uppercase; line-height: 1.2;
  display: flex; flex-wrap: wrap; column-gap: 0.5em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); margin-top: var(--spacing-2); text-shadow: none; }
.loop-btn {
  position: absolute; right: calc(var(--spacing-corner) + env(safe-area-inset-right)); bottom: calc(var(--spacing-corner) + 72px);
  min-height: 44px; padding-inline: var(--spacing-4);
  font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* 등장 — 줄마다 아래→위 Reveal, 한 번. fill 은 backwards 라 끝나면 clip-path 가 남지 않는다(긴 글리프가 잘리지 않게) */
html.motion .hero-line { animation: line-reveal var(--duration-enter) var(--ease-sail) backwards; animation-delay: calc(60ms + var(--i) * var(--stagger)); }
@keyframes line-reveal {
  from { clip-path: inset(0 0 100% 0); transform: translateY(0.4em); }
  to { clip-path: inset(0 0 -20% 0); transform: none; }
}

@media (max-width: 719.98px) {
  .hero { min-height: 600px; }
  .hero-poster, .hero-video { object-position: 86% 50%; }
  .hero-scrim--bottom { height: 78%; background: linear-gradient(to top, var(--color-scrim-deep) 0%, var(--color-scrim-deep) 42%, transparent); }
  .hero-copy { bottom: calc(var(--spacing-dock) + env(safe-area-inset-bottom) + var(--spacing-4)); gap: var(--spacing-3); }
  .hero-date { font-size: 1.125rem; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .loop-btn { bottom: auto; top: calc(var(--spacing-corner) + env(safe-area-inset-top) + 60px); }
}

/* ---------- 섹션 머리 ---------- */
.section-head {
  display: grid; gap: var(--spacing-6);
  padding: var(--spacing-section) var(--spacing-gutter) var(--spacing-16);
}
.section-head--row { padding-bottom: var(--spacing-8); }
@media (min-width: 1024px) {
  .section-head--row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
  .section-head--row .section-lead { justify-self: end; text-align: right; }
}

/* ---------- 세계 4띠 — drift (mask-reveal) ---------- */
.bands { display: grid; gap: var(--spacing-3); }
.band {
  position: relative; isolation: isolate; overflow: hidden;
  height: 78svh; min-height: 520px;
  display: grid; align-items: end; justify-items: start;
  padding: var(--spacing-gutter);
}
.band--right { justify-items: end; }
/* 띠 판을 아래 귀퉁이 판 높이만큼 띄운다 — 띠 아래 끝이 화면 아래에 올 때 LOG·고도계 판과 스치지 않게 */
@media (min-width: 720px) { .band { padding-bottom: calc(var(--spacing-corner) + 80px); } }
.band-media { position: absolute; inset: 0; z-index: -1; background: var(--color-dusk); }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-plate {
  position: relative;
  width: min(100%, 44rem);
  display: grid; justify-items: start; gap: var(--spacing-3);
  padding: var(--spacing-8);
  background: var(--color-plate); color: var(--color-cream);
  border-radius: var(--radius-plate); box-shadow: var(--shadow-plate);
  transition: opacity var(--duration-swap) var(--ease-out-quart), transform var(--duration-reveal) var(--ease-sail);
}
.band-plate::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid var(--color-plate-rim); border-radius: 1px;
}
.band-num, .band-alt { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--color-cream-soft); font-variant-numeric: tabular-nums; }
.band-name {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-display);
  line-height: var(--text-display--line-height); letter-spacing: var(--tracking-display);
}
.band-line { font-size: var(--text-lead); line-height: 1.45; max-width: 34rem; }
.band .link-arrow { margin-top: var(--spacing-1); }
@media (min-width: 1024px) {
  .band-plate { width: calc((100% + var(--spacing-gutter)) * 7 / 12 - var(--spacing-gutter)); max-width: none; }
}
/* JS 가 장면을 켠 뒤에만 글자 판을 숨긴다 — 스크립트가 막혀도 내용은 보인다 */
.drift.is-live .band:not(.is-in) .band-plate { opacity: 0; transform: translateY(10px); }

@media (max-width: 719.98px) {
  .band { height: auto; min-height: 0; padding: 0; display: block; }
  .band-media { position: relative; inset: auto; height: 56svh; min-height: 300px; z-index: auto; }
  .band-plate { width: 100%; border-radius: 0; padding: var(--spacing-6) var(--spacing-gutter) var(--spacing-8); background: var(--color-dusk); box-shadow: none; }
  .band-plate::after { display: none; }
}

/* ---------- 승무원 가로 명단 — crew (horizontal-gallery) ---------- */
.crew-scene { padding-block: var(--spacing-section) var(--spacing-12); }
.crew-stage { position: relative; }
/* 기본(1열·움직임 줄임·고정 전) — 소개 판이 위, 카드 줄만 가로로 민다 */
.crew-track { display: grid; gap: var(--spacing-8); }
.crew-intro {
  display: grid; justify-items: start; gap: var(--spacing-6);
  padding-inline: var(--spacing-gutter); max-width: 44rem;
}
.crew-intro p:not(.kicker) { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-soft); }
.crew-cards {
  display: flex; gap: var(--spacing-6);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: var(--spacing-2) var(--spacing-gutter) var(--spacing-4);
  scroll-padding-inline: var(--spacing-gutter);
  scrollbar-width: thin;
}
.crew-card { flex: 0 0 clamp(260px, 26vw, 380px); scroll-snap-align: start; }
.crew-card a { display: grid; gap: var(--spacing-4); }
.crew-photo {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--radius-frame); box-shadow: var(--shadow-frame);
  background: var(--color-surface-high);
}
.crew-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-sail); }
.crew-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-4); align-items: end; }
.crew-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.875rem; line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.crew-role { grid-column: 1; font-size: var(--text-small); color: var(--color-ink-soft); }
.crew-meta .i-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (hover: hover) { .crew-card a:hover .crew-photo img { transform: scale(1.03); } }
.crew-next {
  display: none;
  width: max-content; margin: var(--spacing-4) var(--spacing-gutter) 0 auto;
  align-items: center; gap: var(--spacing-3); min-height: 44px; padding-inline: var(--spacing-4);
  font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1.5px var(--color-ink); border-radius: var(--radius-plate);
}
.crew-next:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 719.98px) {
  .crew-card { flex-basis: 76vw; }
}
.crew-scene:not(.is-pinned) .crew-next { display: flex; }
/* 고정 무대(≥720, 움직임 허용) — pin 대신 CSS sticky(#123), 트랙은 진행률로만 민다 */
.crew-scene.is-pinned { padding: 0; height: var(--crew-h, 300svh); }
.crew-scene.is-pinned .crew-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.crew-scene.is-pinned .crew-track { display: flex; align-items: center; gap: var(--spacing-6); padding-inline: var(--spacing-gutter); will-change: transform; }
.crew-scene.is-pinned .crew-intro { flex: 0 0 min(520px, 40vw); padding: 0 var(--spacing-8) 0 0; }
.crew-scene.is-pinned .crew-cards { overflow: visible; scroll-snap-type: none; padding: 0; }

/* ---------- 에디션(홈) — 화물 목록 3줄 ---------- */
.cargo-rows { margin-inline: var(--spacing-gutter); border-top: 1px solid var(--color-rule); }
.cargo-row {
  display: grid; gap: var(--spacing-4) var(--spacing-8); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--spacing-8) var(--spacing-6);
  border-bottom: 1px solid var(--color-rule);
}
.cargo-row-name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-title); line-height: var(--text-title--line-height); }
.cargo-row-items { display: grid; gap: var(--spacing-1); font-size: var(--text-small); }
.cargo-row-price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.cargo-row--dusk { background: var(--color-dusk); color: var(--color-cream); border-radius: var(--radius-plate); border-bottom-color: transparent; }
.cargo-row--dusk .cargo-row-price { color: var(--color-amber); }
@media (min-width: 1024px) { .cargo-row { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2fr) auto; } }
/* COLLECTOR’S EDITION 은 1024~1199 칸에서만 두 줄(wireframe 폭 표 — 1024 여유 3px) */
.cargo-row-name br, .cargo-name br { display: none; }
@media (min-width: 1024px) and (max-width: 1199.98px) { .cargo-row-name br, .cargo-name br { display: inline; } }

/* ---------- 개발 일지 ---------- */
.log-rows { margin-inline: var(--spacing-gutter); border-top: 1px solid var(--color-rule); }
.log-row {
  display: grid; align-items: baseline; gap: var(--spacing-2) var(--spacing-6);
  grid-template-columns: auto minmax(0, 1fr);
  padding-block: var(--spacing-6);
  border-bottom: 1px solid var(--color-rule);
}
.log-date { font-variant-numeric: tabular-nums; font-size: var(--text-small); font-weight: 600; color: var(--color-ink-soft); }
.log-tag { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); }
.log-title {
  grid-column: 1 / -1;
  font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em;
}
.log-read { grid-column: 1 / -1; font-size: var(--text-small); color: var(--color-ink-soft); }
.log-pic { grid-column: 1 / -1; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-frame); margin-bottom: var(--spacing-3); }
.log-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 40%; }
@media (min-width: 720px) {
  .log-row { grid-template-columns: 7rem 8.5rem minmax(0, 1fr) 6rem; }
  .log-title { grid-column: 3; }
  .log-read { grid-column: 4; text-align: right; }
  .log-row--lead .log-pic { grid-column: 3; grid-row: 1; width: min(100%, 26rem); }
  .log-row--lead > :not(.log-pic) { grid-row: 2; }
}

/* ---------- 플랫폼 띠 ---------- */
.platforms {
  margin-top: var(--spacing-section);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--spacing-3) var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-gutter);
  background: var(--color-hull); color: var(--color-cream);
}
.platforms-line { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; }
.platforms-line strong { font-weight: 800; }
.platforms-rating { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-cream-soft); }

/* ---------- 꼬리 — 착륙 ---------- */
.landing { background: var(--color-dusk); color: var(--color-cream); }
.landing-inner {
  display: grid; gap: var(--spacing-8); justify-items: start;
  padding: var(--spacing-24) var(--spacing-gutter) calc(var(--spacing-24) + 56px);
}
.landed { font-family: var(--font-display); font-weight: 800; font-size: var(--text-title); line-height: 1; letter-spacing: 0.02em; }
.landed span { color: var(--color-amber); }
.landing-nav ul { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-6); }
.landing-nav a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.landing-note { max-width: 40rem; font-size: var(--text-small); color: var(--color-cream-soft); }
.climb { display: inline-flex; min-height: 44px; align-items: center; font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.35em; }
@media (max-width: 719.98px) {
  .landing-inner { padding-bottom: calc(var(--spacing-16) + var(--spacing-dock) + env(safe-area-inset-bottom)); }
}

/* ---------- 메뉴 판 #menu ---------- */
.menu { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--color-dusk); color: var(--color-cream); }
.menu-inner {
  min-height: 100%;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--spacing-8);
  padding: calc(var(--spacing-corner) + env(safe-area-inset-top)) var(--spacing-gutter) calc(var(--spacing-8) + env(safe-area-inset-bottom));
}
.menu-close, .sheet-close {
  justify-self: end; display: inline-flex; align-items: center; gap: var(--spacing-3);
  min-height: 52px; padding-inline: var(--spacing-4);
  font-size: var(--text-small); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.menu-list { align-self: center; display: grid; }
.menu-list a {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-2) var(--spacing-6);
  padding-block: var(--spacing-4);
  border-bottom: 1px solid var(--color-rule-dark);
}
.menu-name {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-display);
  line-height: var(--text-display--line-height); letter-spacing: var(--tracking-display);
}
.menu-alt { font-variant-numeric: tabular-nums; font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; color: var(--color-cream-soft); }
.menu-list a[aria-current] .menu-alt { color: var(--color-amber); }
@media (hover: hover) { .menu-list a:hover .menu-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; } }
.menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spacing-4) var(--spacing-8); }
.menu-note { max-width: 32rem; text-align: right; font-size: var(--text-small); color: var(--color-cream-soft); }
html.motion .menu:not([hidden]) .menu-list li { animation: menu-in 360ms var(--ease-sail) backwards; animation-delay: calc(80ms + var(--i) * var(--stagger)); }
@keyframes menu-in { from { opacity: 0; transform: translateY(12px); } }
html.motion .menu:not([hidden]) { animation: plate-in 200ms var(--ease-out-quart); }

/* ---------- 극장 보기 #trailer ---------- */
.theater { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--color-hull); color: var(--color-cream); }
.theater-video { width: 100%; height: 100%; object-fit: contain; min-height: 0; background: var(--color-hull); }
.theater-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3) var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-gutter) calc(var(--spacing-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-rule-dark);
}
.theater-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; }
.theater-note { margin-right: auto; font-size: var(--text-small); color: var(--color-cream-soft); }
.theater-btn {
  display: inline-flex; align-items: center; gap: var(--spacing-3); min-height: 48px; padding-inline: var(--spacing-4);
  font-size: var(--text-small); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
@media (max-width: 719.98px) {
  .theater { grid-template-rows: auto auto; align-content: center; }
  .theater-video { height: auto; aspect-ratio: 16 / 9; }
  .theater-bar { border-top: 0; }
}
html.motion .theater:not([hidden]) { animation: plate-in 240ms var(--ease-out-quart); }

/* ---------- 하위 쪽 공통 ---------- */
.page-head {
  display: grid; gap: var(--spacing-4); justify-items: start;
  padding: calc(var(--spacing-corner) + 96px) var(--spacing-gutter) var(--spacing-12);
}
.page-title {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-display);
  line-height: var(--text-display--line-height); letter-spacing: var(--tracking-display);
}
.next-page { margin-top: var(--spacing-section); }
.next-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--spacing-3) var(--spacing-6);
  padding: var(--spacing-12) var(--spacing-gutter);
  border-top: 1px solid var(--color-rule);
}
.next-link .kicker { grid-column: 1 / -1; color: var(--color-ink-soft); }
.next-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-title); line-height: var(--text-title--line-height); letter-spacing: var(--tracking-display); }
.next-link .i-arrow { width: 44px; height: 24px; margin-bottom: 0.4em; }
@media (hover: hover) { .next-link:hover .next-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; } }
.ledger { display: grid; border-top: 1px solid var(--color-rule-dark); }
.ledger > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--spacing-4); padding-block: var(--spacing-3); border-bottom: 1px solid var(--color-rule-dark); }
.ledger dt { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-cream-soft); padding-top: 0.2em; }
.ledger dd { font-variant-numeric: tabular-nums; }
.finds { display: grid; gap: var(--spacing-1); }
.finds li { display: flex; gap: var(--spacing-3); }
.finds li::before { content: ""; flex: none; width: 10px; height: 1.5px; margin-top: 0.8em; background: currentColor; opacity: 0.6; }

/* ---------- 세계 — 항로도 + 섬 판 ---------- */
.chart-page { padding-top: calc(var(--spacing-corner) + 96px); }
.page-head--inline { order: -2; padding: 0 0 var(--spacing-6); }
.chart-grid-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-8); padding-inline: var(--spacing-gutter); }
.chart-col { display: flex; flex-direction: column; }
.chart {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--color-surface-high); border-radius: var(--radius-frame); box-shadow: var(--shadow-frame);
}
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-contours path, .chart-gyre path { fill: none; stroke: var(--color-rule); stroke-width: 1.5; }
.chart-grid path { fill: none; stroke: var(--color-rule); stroke-width: 0.75; stroke-dasharray: 1 5; }
.chart-winds path { fill: none; stroke: var(--color-ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-route { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.chart-label { font: 600 12px var(--font-body); letter-spacing: 0.04em; fill: var(--color-ink); }
.isle-mark {
  position: absolute; width: 48px; height: 48px; translate: -50% -50%;
  display: grid; place-items: center; border-radius: var(--radius-ring);
}
.isle-mark .dot {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-ring);
  background: var(--color-dusk); color: var(--color-cream);
  font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-surface-high), 0 0 0 3px var(--color-ink);
  transform: scale(0.8);
  transition: transform var(--duration-swap) var(--ease-sail);
}
.isle-mark-name {
  position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink); pointer-events: none;
  padding: 1px 4px; border-radius: var(--radius-plate); background: var(--color-surface-high);
}
.isle-mark[aria-current] .isle-mark-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
@media (max-width: 719.98px) { .isle-mark-name, .chart-label { display: none; } }
@media (min-width: 1024px) {
  .chart-col { position: sticky; top: calc(var(--spacing-corner) + 72px); }
  /* 데스크톱은 탭을 지도 위로 — 지도 아래 끝은 아래 귀퉁이 판 자리라 장식만 둔다 */
  .isle-tabs { order: -1; margin: 0 0 var(--spacing-4); }
}
/* 고른 섬 — 호박 고리는 땅거미 위에만(원칙 3·대비표): 땅거미 원판 안쪽 고리 + 바깥 땅거미 테 */
.isle-mark[aria-current] .dot { transform: none; box-shadow: inset 0 0 0 2.5px var(--color-amber), 0 0 0 4px var(--color-dusk); }
.isle-tabs { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-4); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--spacing-1); }
.isle-tab {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--spacing-4);
  border-radius: var(--radius-plate); box-shadow: inset 0 0 0 1px var(--color-rule);
  font-size: var(--text-small); font-weight: 600; white-space: nowrap; scroll-snap-align: start;
  transition: background-color var(--duration-swap) var(--ease-out-quart);
}
.isle-tab[aria-selected="true"] { background: var(--color-dusk); color: var(--color-cream); box-shadow: none; --focus: var(--color-focus-dark); }
@media (min-width: 1024px) and (max-width: 1199.98px) { .isle-tab { padding-inline: var(--spacing-3); } }
@media (hover: hover) { .isle-tab[aria-selected="false"]:hover { background: var(--color-surface-high); } }
.isle-panel { background: var(--color-dusk); color: var(--color-cream); border-radius: var(--radius-plate); padding: var(--spacing-6); }
.isle-card { display: grid; gap: var(--spacing-4); justify-items: stretch; }
.isle-pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-frame); }
/* ≥1024 는 16:10 — 1440×900 첫 화면에 장부 줄(Danger·Ports)이 고도계 판 위에서 끝나게 */
@media (min-width: 1024px) { .isle-pic { aspect-ratio: 2 / 1; } .isle-card { gap: var(--spacing-3); } .chart-page { padding-top: calc(var(--spacing-corner) + 80px); } }
.isle-pic img { width: 100%; height: 100%; object-fit: cover; }
.isle-card .kicker { color: var(--color-cream-soft); margin-top: var(--spacing-2); }
.isle-line { font-size: var(--text-lead); line-height: 1.45; }
.isle-card .label { color: var(--color-cream-soft); margin-top: var(--spacing-2); }
.danger { display: inline-flex; gap: 4px; vertical-align: middle; }
.danger i { width: 18px; height: 10px; border-radius: 1px; box-shadow: inset 0 0 0 1px var(--color-rule-dark); }
.danger i.on { background: var(--color-cream); box-shadow: none; }
html.motion .isle-card.is-swap { animation: crossfade var(--duration-swap) var(--ease-out-quart); }
html.motion .isle-card.is-swap .isle-pic img, html.motion .crew-detail.is-swap .crew-portrait img { animation: gap-open var(--duration-reveal) var(--ease-sail) backwards; }
@keyframes crossfade { from { opacity: 0; } }
@keyframes gap-open { from { clip-path: inset(48% 0 48% 0); } to { clip-path: inset(0); } }
@media (min-width: 1024px) {
  .chart-grid-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .isle-panel { padding: var(--spacing-8); }
}
.wind { padding: var(--spacing-section) var(--spacing-gutter) 0; display: grid; gap: var(--spacing-8); }
.wind-rows { display: grid; gap: var(--spacing-8); border-top: 1px solid var(--color-rule); padding-top: var(--spacing-8); }
.wind-rows li { display: grid; gap: var(--spacing-3); align-content: start; }
.wind-n { font-variant-numeric: tabular-nums; font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--color-ink-soft); }
.wind-rows h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.wind-rows p { color: var(--color-ink-soft); max-width: 34rem; }
@media (min-width: 1024px) { .wind-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-12); } }

/* ---------- 승무원 쪽 ---------- */
.crew-page { padding: calc(var(--spacing-corner) + 96px) var(--spacing-gutter) var(--spacing-12); }
.crew-detail { display: grid; gap: var(--spacing-8); grid-template-columns: minmax(0, 1fr); }
.crew-portrait { width: min(100%, 26rem); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-frame); box-shadow: var(--shadow-frame); background: var(--color-surface-high); }
.crew-portrait img { width: 100%; height: 100%; object-fit: cover; }
.crew-copy { display: grid; gap: var(--spacing-6); align-content: start; justify-items: start; }
.crew-copy .kicker { color: var(--color-ink-soft); }
.crew-quote { font-size: var(--text-lead); line-height: 1.45; font-style: italic; max-width: 34rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-block: 1px solid var(--color-rule); }
.stats > div { padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0; display: grid; gap: var(--spacing-1); }
.stats > div + div { padding-left: var(--spacing-4); border-left: 1px solid var(--color-rule); }
.stats dt { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); }
.stats dd { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.crew-copy .label { color: var(--color-ink-soft); }
.voice { font-size: var(--text-small); color: var(--color-ink-soft); }
@media (max-width: 719.98px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats > div, .stats > div + div { grid-template-columns: 8rem minmax(0, 1fr); align-items: baseline; padding: var(--spacing-3) 0; border-left: 0; }
  .stats > div + div { border-top: 1px solid var(--color-rule); }
  .stats dd { font-size: 1.125rem; }
}
html.motion .crew-detail.is-swap .crew-copy { animation: crossfade var(--duration-swap) var(--ease-out-quart); }
@media (min-width: 1024px) {
  .crew-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-12); align-items: start; }
  /* 첫 화면에서 초상 아래 끝이 왼쪽 아래 LOG 판 위에서 끝나게(머리 96 + 판 자리 ≈124) */
  .crew-portrait { width: min(100%, calc((100svh - 260px) * 3 / 4)); }
  /* 명단 띠는 접힘 아래에서 시작 — 첫 화면에서 LOG 판이 첫 승무원을 덮지 않게 */
  .crew-page { min-height: 100svh; }
  .crew-copy { padding-top: var(--spacing-8); }
}
.roster { background: var(--color-dusk); color: var(--color-cream); }
.roster-list { display: flex; gap: var(--spacing-4); overflow-x: auto; padding: var(--spacing-6) var(--spacing-gutter); scroll-padding-inline: var(--spacing-gutter); scroll-snap-type: x proximity; }
.roster-list li { flex: 1 0 auto; scroll-snap-align: start; }
.roster-name, .roster-role { white-space: nowrap; }
.roster-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--spacing-3); align-items: center;
  padding: var(--spacing-2); border-radius: var(--radius-plate);
  transition: background-color var(--duration-swap) var(--ease-out-quart);
}
.roster-pic { grid-row: 1 / span 2; width: 56px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-plate); }
.roster-pic img { width: 100%; height: 100%; object-fit: cover; }
.roster-name { font-weight: 600; line-height: 1.2; align-self: end; }
.roster-role { font-size: var(--text-label); color: var(--color-cream-soft); align-self: start; }
.roster-item[aria-current] .roster-pic { box-shadow: 0 0 0 2px var(--color-dusk), 0 0 0 4px var(--color-amber); }
.roster-item[aria-current] .roster-name { text-decoration: underline; text-decoration-color: var(--color-amber); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
@media (hover: hover) { .roster-item:hover { background: var(--color-plate-rim); } }
.ship { display: grid; gap: var(--spacing-8); padding: var(--spacing-section) var(--spacing-gutter) 0; }
.ship-copy { display: grid; gap: var(--spacing-6); justify-items: start; }
.ship-copy p:not(.kicker) { color: var(--color-ink-soft); max-width: 34rem; }
.spec { width: 100%; border-top: 1px solid var(--color-rule); }
.spec th, .spec td { padding-block: var(--spacing-4); border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; }
.spec th { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); width: 40%; }
.spec td { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .ship { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-12); align-items: start; } }

/* ---------- 에디션 쪽 ---------- */
.cargo-list { margin-inline: var(--spacing-gutter); border-top: 1px solid var(--color-rule); }
.cargo { border-bottom: 1px solid var(--color-rule); transition: background-color var(--duration-swap) var(--ease-out-quart); }
.cargo[data-open] { background: var(--color-dusk); color: var(--color-cream); border-radius: var(--radius-plate); border-bottom-color: transparent; }
.cargo-head {
  display: grid; gap: var(--spacing-4) var(--spacing-8); grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: var(--spacing-8) var(--spacing-6);
}
.cargo-items { display: grid; gap: var(--spacing-1); font-size: var(--text-small); }
.cargo-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3) var(--spacing-6); }
.cargo-price { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1; }
.cargo[data-open] .cargo-price { color: var(--color-amber); }
.cargo-choose { box-shadow: inset 0 0 0 1.5px var(--color-ink); color: var(--color-ink); }
@media (hover: hover) { .cargo-choose:hover { background: var(--color-surface-high); } }
.cargo-pre, .cargo[data-open] .cargo-choose { display: none; }
.cargo[data-open] .cargo-pre { display: inline-flex; }
.cargo-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-out-quart); }
.cargo[data-open] .cargo-more { grid-template-rows: 1fr; }
.cargo-more-inner { min-height: 0; overflow: hidden; }
.cargo:not([data-open]) .cargo-more-inner { visibility: hidden; transition: visibility 0s 260ms; }
.cargo-more-inner > * { margin-inline: var(--spacing-6); }
.cargo-pic { aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius-frame); }
.cargo-pic img { width: 100%; height: 100%; object-fit: cover; }
.cargo-more-inner p { padding-block: var(--spacing-4) var(--spacing-8); max-width: 44rem; font-size: var(--text-lead); line-height: 1.45; }
@media (min-width: 1024px) {
  .cargo-head { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
  .cargo-buy { justify-content: flex-end; }
}
.compare { padding: var(--spacing-section) 0 0; display: grid; gap: var(--spacing-8); }
.compare > .title { padding-inline: var(--spacing-gutter); }
.table-wrap { overflow-x: auto; margin-inline: var(--spacing-gutter); border-radius: var(--radius-plate); }
.cmp { width: 100%; min-width: 40rem; }
.cmp th, .cmp td { padding: var(--spacing-3) var(--spacing-4); text-align: left; }
.cmp thead th { background: var(--color-dusk); color: var(--color-cream); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.cmp thead th.is-sel { box-shadow: inset 0 -3px 0 var(--color-amber); }
.cmp tbody tr { border-bottom: 1px solid var(--color-rule); }
.cmp tbody th { font-weight: 600; position: sticky; left: 0; background: var(--color-bg); }
.cmp tbody tr:nth-child(even), .cmp tbody tr:nth-child(even) th { background: var(--color-surface-high); }
.cmp td { font-variant-numeric: tabular-nums; }
.cmp .no { color: var(--color-ink-soft); }
.cmp tbody tr:last-child td { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
.cmp-cta { padding-inline: var(--spacing-gutter); }
.faq { padding: var(--spacing-section) var(--spacing-gutter) 0; display: grid; gap: var(--spacing-8); }
.faq-list { border-top: 1px solid var(--color-rule); }
.faq-item { border-bottom: 1px solid var(--color-rule); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-6);
  min-height: 64px; padding-block: var(--spacing-4);
  font-size: var(--text-lead); font-weight: 600; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat;
  transition: transform var(--duration-swap) var(--ease-sail);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: var(--spacing-6); max-width: 44rem; color: var(--color-ink-soft); }
@media (min-width: 1024px) { .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* ---------- 예약 판 #preorder ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; background: var(--color-veil); }
.sheet-panel {
  position: relative; width: min(100%, 36rem);
  display: grid; gap: var(--spacing-4); justify-items: start;
  padding: var(--spacing-6) var(--spacing-gutter) calc(var(--spacing-8) + env(safe-area-inset-bottom));
  background: var(--color-dusk); color: var(--color-cream);
  border-radius: var(--radius-plate) var(--radius-plate) 0 0; box-shadow: var(--shadow-frame);
}
.sheet-close { position: absolute; top: var(--spacing-4); right: var(--spacing-4); }
.sheet-panel .kicker, .sheet-panel .label { color: var(--color-cream-soft); }
.sheet-price { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--color-amber); }
.plats { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.plat {
  min-height: 48px; padding-inline: var(--spacing-6); border-radius: var(--radius-plate);
  box-shadow: inset 0 0 0 1px var(--color-cream); font-weight: 600;
  transition: background-color var(--duration-swap) var(--ease-out-quart), transform var(--duration-press) var(--ease-out-quart);
}
.plat:active { transform: scale(0.97); }
.plat[aria-pressed="true"] { background: var(--color-cream); color: var(--color-hull); }
.sheet-go { margin-top: var(--spacing-2); width: 100%; }
.sheet-note { font-size: var(--text-small); color: var(--color-cream-soft); }
html.motion .sheet:not([hidden]) { animation: plate-in 200ms var(--ease-out-quart); }
html.motion .sheet:not([hidden]) .sheet-panel { animation: slide-up 240ms var(--ease-sail); }
@keyframes slide-up { from { transform: translateY(100%); } }

/* 메뉴·극장·예약 판이 열리면 뒤를 멈춘다 */
html.is-locked, html.is-locked body { overflow: hidden; }