/* Lowtarn (slug: hollowmere) — 스타일. 값은 tokens.css 의 var() 만 쓴다(raw 색 0).
 * 원형: sidebar-fixed — 왼쪽 280px 수심계 레일 + 오른쪽 본문. 렌즈: industrial-brutalist-ui(1px 칸 · 모서리 0 · 그림자 0).
 * 움직임: 전환 시간 0(계기판은 미끄러지지 않는다). 부드러운 곡선은 초록 점이 내려앉는 한 번뿐.
 */

/* ── 바탕 ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--color-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: var(--spacing-cell);
}
body {
  margin: 0;
  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);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
:where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(h1, h2, h3, p, dl, dd, figure, blockquote) {
  margin: 0;
}
:where(h1, h2, h3) {
  font-weight: 400;
}
a {
  color: inherit;
  text-decoration: none;
}
:where(a, button, summary) {
  touch-action: manipulation;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  border-radius: var(--radius-none);
  -webkit-user-select: none;
  user-select: none;
}
svg {
  display: block;
}
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}
::selection {
  background: var(--color-ink);
  color: var(--color-surface);
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: -100vw;
  top: var(--spacing-cell);
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: var(--spacing-tap);
  padding-inline: var(--spacing-cell);
  background: var(--color-ink);
  color: var(--color-surface);
  font: 600 var(--text-small) / 1 var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip:focus {
  left: var(--spacing-cell);
}

/* ── 글자 부품 ─────────────────────────────────────────────────────────── */
.label,
.br,
.sh__t {
  font-family: var(--font-data);
  font-feature-settings: var(--font-data--font-feature-settings);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--text-micro--letter-spacing);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink-dim);
}
.br {
  display: inline-block;
  justify-self: start;
  background: var(--color-surface);
  padding: var(--spacing) calc(var(--spacing) * 2);
}
.dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-inline-end: 0.6em;
  border-radius: var(--radius-dot);
  background: var(--color-accent);
  vertical-align: 0.08em;
}
.ico {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: miter;
  stroke-linecap: square;
}
.plat {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
}

/* ── 뼈대 — 레일 + 본문 ────────────────────────────────────────────────── */
.shell {
  min-height: 100svh;
}
.main {
  container-type: inline-size;
  min-width: 0;
}
.wrap {
  padding-inline: max(var(--spacing-gutter), env(safe-area-inset-right));
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  row-gap: var(--spacing-block);
}
.sec {
  margin-top: var(--spacing-section);
}
.sec--first {
  margin-top: var(--spacing-block);
}
@media (min-width: 1024px) {
  .shell {
    display: grid;
    grid-template-columns: var(--spacing-rail) minmax(0, 1fr);
  }
  .shell .bar,
  .shell .sum {
    display: none;
  }
}
@media (max-width: 1023.98px) {
  .rail,
  .sec--descend {
    display: none;
  }
}

/* 블록 머리 — 1px 괘선 + 괄호 번호 */
.sh {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing) var(--spacing-cell);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--spacing-cell);
  margin-bottom: var(--spacing-block);
}
.sh__t {
  color: var(--color-ink);
}
.sh__n {
  color: var(--color-ink-dim);
  margin-inline-end: 0.4em;
}

/* ── 레일(≥1024) — 수심계 ─────────────────────────────────────────────── */
.rail {
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-rule);
}
.rail__in {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rail__in > :not(.btn) {
  flex: none;
  padding-inline: calc(var(--spacing) * 5);
}
.rail__head {
  padding-block: calc(var(--spacing) * 5) var(--spacing-cell);
  border-bottom: 1px solid var(--color-rule);
}
.rail__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.86;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}
.rail__sub {
  margin-top: calc(var(--spacing) * 1.5);
}

/* 웨이포인트 — 수심 · 이름 한 줄 48px */
.way {
  border-bottom: 1px solid var(--color-rule);
  padding-block: calc(var(--spacing) * 2);
}
.way > ol > li + li,
.bar .way > li + li {
  border-top: 1px solid var(--color-rule);
}
.way a {
  position: relative;
  display: grid;
  grid-template-columns: 1rem 3.25rem minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  color: var(--color-ink-dim);
  font-family: var(--font-data);
  font-feature-settings: var(--font-data--font-feature-settings);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* 현재 표시는 점이 아니라 2px 선 — 레일의 점은 수심계 하나뿐이다(한 화면 최대 2: 레일 1 + 본문 1) */
.way a::before {
  content: "";
  align-self: stretch;
  width: 2px;
  background: var(--color-accent);
  visibility: hidden;
}
.way a[aria-current="page"] {
  color: var(--color-ink);
}
.way a[aria-current="page"]::before {
  visibility: visible;
}
.way__sub {
  padding-block: 0 calc(var(--spacing) * 2);
}
.way__sub a {
  min-height: 30px;
  padding-inline-start: 1rem;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  font-size: var(--text-micro);
  letter-spacing: var(--text-micro--letter-spacing);
}
.way__sub a::before {
  display: none;
}

/* 수심계 — 세로 눈금 · 초록 점 · 읽기 */
.rail__in > .gauge {
  flex: 1 1 auto;
}
.gauge {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-block: var(--spacing-cell);
  border-bottom: 1px solid var(--color-rule);
}
.gauge__cap {
  display: flex;
  justify-content: space-between;
}
.gauge__scale {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: calc(var(--spacing-cell) * 1.25) 0 calc(var(--spacing-cell) * 1.25) 2.25rem;
  border-inline-start: 1px solid var(--color-rule);
}
.gauge__ticks {
  /* 2 M 마다 짧은 눈금 — 코드 SVG. 맨 아래(48)는 긴 눈금이 맡는다 */
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--color-fog-dot);
  stroke-width: 1;
}
.gauge__ticks path {
  vector-effect: non-scaling-stroke;
}
.gauge__mark {
  position: absolute;
  left: -2.25rem;
  top: calc(var(--d) / 48 * 100%);
  translate: 0 -50%;
  display: grid;
  grid-template-columns: 1.75rem 16px;
  column-gap: 0.5rem;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-fog-dot);
}
.gauge__mark b {
  font-weight: 400;
  text-align: right;
}
.gauge__mark::after {
  content: "";
  height: 1px;
  background: var(--color-ink-dim);
}
.gauge__mark.is-here {
  color: var(--color-ink);
}
.gauge__dot {
  position: absolute;
  left: 0;
  top: calc(var(--d0) / 48 * 100%);
  translate: -6px -50%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  pointer-events: none;
  will-change: transform;
}
.gauge__dot i {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-dot);
  background: var(--color-accent);
}
.gauge__read {
  font-family: var(--font-display);
  font-size: var(--text-depth);
  line-height: var(--text-depth--line-height);
  font-feature-settings: "tnum" 1;
  color: var(--color-accent);
  white-space: nowrap;
}
.gauge__dot.is-settling {
  transition: transform 400ms var(--ease-settle);
}

.count {
  padding-block: var(--spacing-cell);
}
.count__v {
  margin-block: calc(var(--spacing) * 1.5);
  font-family: var(--font-display);
  font-size: var(--text-depth);
  line-height: var(--text-depth--line-height);
  color: var(--color-ink);
}
.rail .btn {
  flex: none;
  width: auto;
  margin-inline: calc(var(--spacing) * 5);
}
.rail__fine {
  padding-block: var(--spacing-cell) calc(var(--spacing) * 5);
}
@media (max-height: 760px) {
  .rail__sub,
  .count__date {
    display: none;
  }
}
@media (max-height: 720px) {
  .gauge__ticks {
    display: none;
  }
  .gauge__cap {
    display: none;
  }
}

/* ── 머리줄(<1024) — 고정하지 않는다 ─────────────────────────────────── */
.bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-rule);
  padding-top: env(safe-area-inset-top);
}
.bar__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-cell);
  min-height: var(--spacing-bar);
  padding-inline: var(--spacing-gutter);
}
.bar__mark {
  display: flex;
  align-items: center;
  min-height: var(--spacing-tap);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-ink);
}
.bar__depth {
  margin-inline-start: auto;
}
.bar__menu {
  min-width: var(--spacing-tap);
  min-height: var(--spacing-tap);
  padding-inline: var(--spacing-cell);
  box-shadow: inset 0 0 0 1px var(--color-ink-dim);
  font-family: var(--font-data);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--text-micro--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink);
}
.bar__menu[aria-expanded="true"] {
  background: var(--color-ink);
  color: var(--color-surface);
}
.bar__nav {
  border-top: 1px solid var(--color-rule);
  padding-inline: var(--spacing-gutter);
}
.js .bar__nav:not(.is-open) {
  display: none;
}
.bar .way {
  border-bottom: 0;
  padding-block: calc(var(--spacing) * 1);
}
/* 가로 수심계 — 이 페이지 위치만(스크롤 추적 없음) */
.hg {
  position: relative;
  height: 30px;
  margin-inline: var(--spacing-gutter);
}
.hg__line {
  position: absolute;
  inset: 8px 0 auto;
  height: 7px;
  border-top: 1px solid var(--color-rule);
  background: linear-gradient(to right, var(--color-fog-dot) 0 1px, transparent 1px) 0 0 / calc((100% - 1px) / 4) 100% repeat-x;
}
.hg__m {
  position: absolute;
  top: 16px;
  left: calc(var(--d) / 48 * 100%);
  translate: calc(var(--d) / 48 * -100%) 0;
  font-family: var(--font-data);
  font-feature-settings: var(--font-data--font-feature-settings);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--color-fog-dot);
}
.hg__dot {
  position: absolute;
  top: 4px;
  left: calc(var(--d) / 48 * 100%);
  translate: calc(var(--d) / 48 * -100%) 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-dot);
  background: var(--color-accent);
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: stretch;
  min-height: 48px;
  font-family: var(--font-data);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: start;
}
.btn__t {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  padding-inline: 1rem;
}
.btn__arr {
  display: flex;
  align-items: center;
  padding-inline-end: 1rem;
  font-family: var(--font-body);
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn--pri {
  background: var(--color-ink);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}
.btn__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}
/* 칸은 버튼의 형태로 남기고 초록 점은 뺀다 — 점은 '지금 여기' 만 가리킨다. 칸 안은 측심줄 같은 짧은 세로 획 */
.btn__dot::before {
  content: "";
  width: 2px;
  height: 12px;
  background: var(--color-ink-dim);
}
.btn--out {
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink-dim);
}
.btn--pri:active {
  background: var(--color-surface);
  color: var(--color-ink);
}
.btn--out:active {
  background: var(--color-ink);
  color: var(--color-surface);
}
@media (hover: hover) {
  .btn--pri:hover {
    background: var(--color-surface);
    color: var(--color-ink);
  }
  .btn--out:hover {
    box-shadow: inset 0 0 0 1px var(--color-ink);
  }
  .way a:hover {
    color: var(--color-ink);
    box-shadow: inset 0 1px 0 var(--color-ink);
  }
}

/* ── 에셋 — 망점 안개 띠 · 청록 3값 · 초록 불빛 하나로 생성한 그래픽 ──────────
 * 자리표시자 6층(망점·실루엣·괄호 라벨)을 대신한다. 비율은 data-ratio 가 정하고 그림은 cover 로 채운다.
 * 안개 흐름(I4)은 그림이 대신하므로 없다 — 도는 것 0. */
.pic {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--color-bg);
  box-shadow: var(--shadow-hair);
}
.pic[data-ratio="21:9"] {
  aspect-ratio: 21 / 9;
}
.pic[data-ratio="16:9"] {
  aspect-ratio: 16 / 9;
}
.pic[data-ratio="4:3"] {
  aspect-ratio: 4 / 3;
}
.pic[data-ratio="2:3"] {
  aspect-ratio: 2 / 3;
}

/* ── 홈 H0 — 히어로 ───────────────────────────────────────────────────── */
.hero__art {
  position: relative;
  display: block;
  width: 100%;
  height: min(100cqi * 9 / 21, 58svh);
  background: var(--color-bg);
}
.hero__img {
  position: absolute;
  inset: 0;
  height: 100%;
  box-shadow: none;
}
/* 아래 30% 띠 덧판 — 워드마크가 걸치는 띠(DESIGN 대비 절). 그림의 물줄기 빛(원본 최저 1.7:1)을 ink 대비 4.5:1 이상으로 누른다.
 * 55% 는 자리표시자 망점 마스크의 가운데 단(--m2)과 같은 값 — 새 불투명도를 만들지 않았다. 그라데이션이 아니라 한 단 */
.hero__art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  pointer-events: none;
}
.hero__mark {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--text-h1) * -0.5);
  padding-inline: var(--spacing-gutter);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: 0.005em;
  color: var(--color-ink);
}
.hero__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "log log"
    "ma mb"
    "cta cta";
  row-gap: calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 3);
  padding-inline: var(--spacing-gutter);
}
.hero__log {
  grid-area: log;
  max-width: 62rem;
  font-size: var(--text-lede);
  line-height: var(--text-lede--line-height);
  font-weight: 300;
}
.meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--color-rule);
}
.meta--a {
  grid-area: ma;
}
.meta--b {
  grid-area: mb;
}
.meta__c {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  padding: var(--spacing-cell);
  border-inline-start: 1px solid var(--color-rule);
}
.meta--a .meta__c:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}
.meta dd {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.meta__plat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing) calc(var(--spacing) * 4);
}
.hero__cta {
  grid-area: cta;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-cell);
}

/* H1 전제 */
.premise__text {
  grid-column: 1 / span 7;
}
.premise__line {
  font-size: calc(var(--text-lede) * 1.6);
  line-height: 1.34;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.premise__body {
  max-width: var(--spacing-measure);
  margin-top: calc(var(--spacing-cell) * 2);
}
.facts {
  grid-column: 9 / span 4;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-hair);
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.facts__c {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: var(--spacing-cell);
  background: var(--color-bg);
}
.facts dd {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}

/* H2 트레일러 */
.trailer__screen {
  grid-column: 1 / span 8;
  position: relative;
}
.trailer__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
}
.trailer__play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--color-ink);
  color: var(--color-surface);
}
.trailer__play::before {
  content: "";
  width: 18px;
  height: 20px;
  margin-inline-start: 4px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.trailer__play[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}
.trailer__play[aria-pressed="true"]::before {
  width: 16px;
  height: 16px;
  margin: 0;
  clip-path: none;
}
.trailer__run {
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-cell);
  background: var(--color-surface);
}
.trailer__sig {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: max-content;
  max-width: calc(100% - var(--spacing-cell) * 4);
  padding: var(--spacing-cell) calc(var(--spacing-cell) * 1.5);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink-dim);
  font-family: var(--font-data);
  font-size: var(--text-micro);
  font-weight: 600;
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--text-micro--letter-spacing);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink);
}
.trailer__sig:empty {
  display: none;
}
.trailer__list {
  grid-column: 9 / span 4;
  align-self: start;
  border-top: 1px solid var(--color-rule);
}
.trailer__list button {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  min-height: 60px;
  padding-inline: var(--spacing-cell);
  border-bottom: 1px solid var(--color-rule);
}
.trailer__nm {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.trailer__list [aria-pressed="true"] {
  background: var(--color-surface-raise);
  box-shadow: inset 0 2px 0 var(--color-accent);
}
.trailer__list [aria-pressed="true"] .trailer__no {
  color: var(--color-ink);
}

/* H3 색인 줄 — 카드 아님 */
.idx {
  border-top: 1px solid var(--color-rule);
}
.idx__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  align-items: center;
  padding-block: var(--spacing-cell);
  border-bottom: 1px solid var(--color-rule);
}
.idx__d {
  grid-column: 1 / span 2;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}
.idx__main {
  grid-column: 3 / span 5;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}
.idx__n {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.idx__t {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-dim);
}
.idx__r {
  grid-column: 8 / span 1;
}
.idx__th {
  grid-column: 9 / span 3;
}
.idx__go,
.rows__go {
  justify-self: end;
  font-size: 1.25rem;
  line-height: 1;
}
.idx__go {
  grid-column: 12;
}
.idx__row::before,
.rows__r::before,
.price__c::before,
.descend::before {
  /* hover·포커스 표식 — 점이 아니라 2px 세로 획. 본문 점(선택 인물·펼친 일지 등)과 한 화면에 겹치지 않게 */
  content: "";
  position: absolute;
  left: calc(var(--spacing-cell) * -1.25);
  top: 50%;
  width: 2px;
  height: 12px;
  translate: 0 -50%;
  background: var(--color-accent);
  visibility: hidden;
}
@media (hover: hover) {
  .idx__row:hover,
  .rows__r:hover,
  .price__c:hover,
  .descend:hover {
    box-shadow: inset 0 1px 0 var(--color-ink);
  }
  .idx__row:hover::before,
  .rows__r:hover::before,
  .descend:hover::before {
    visibility: visible;
  }
}
.idx__row:focus-visible::before,
.rows__r:focus-visible::before,
.descend:focus-visible::before {
  visibility: visible;
}

/* H4 가격 띠 */
.price {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--spacing-hair);
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.price__c {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  padding: var(--spacing-cell) var(--spacing-cell) calc(var(--spacing-cell) * 1.5);
  background: var(--color-bg);
}
.price__c.is-rec {
  background: var(--color-surface-raise);
}
.price__c .label {
  display: flex;
  align-items: center;
}
.price__c.is-rec .label {
  color: var(--color-ink);
}
.price__v {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
}
.price__l {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-dim);
}
.price__c::before {
  display: none;
}
.price__go {
  background: var(--color-bg);
  box-shadow: none;
  align-items: center;
  min-width: 15rem;
}

/* H5 · N2 목록 줄 */
.rows {
  border-top: 1px solid var(--color-rule);
}
.rows__r {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  align-items: baseline;
  min-height: 56px;
  padding-block: calc(var(--spacing-cell) * 1.25);
  border-bottom: 1px solid var(--color-rule);
  cursor: pointer;
}
.rows__date {
  grid-column: 1 / span 2;
}
.rows__k {
  grid-column: 3 / span 2;
  color: var(--color-ink);
}
.rows__t {
  grid-column: 5 / 11;
  font-weight: 600;
}
.rows__m {
  grid-column: 11 / 12;
}
.rows__go {
  grid-column: 12 / 13;
}
summary.rows__r {
  list-style: none;
}
summary.rows__r::-webkit-details-marker {
  display: none;
}
.rows__d summary .rows__go::before {
  content: "+";
}
.rows__d[open] summary .rows__go::before {
  content: "−";
}
.rows__d[open] summary {
  border-bottom-color: transparent;
}
.rows__more {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  padding-bottom: calc(var(--spacing-cell) * 1.5);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.rows__more > * {
  grid-column: 5 / 11;
}
.chg li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--spacing-cell);
  padding-block: calc(var(--spacing) * 1.5);
  border-top: 1px solid var(--color-rule);
}
.chg li:first-child {
  border-top: 0;
}
.chg__k {
  color: var(--color-ink);
}

/* H6 · 고지 */
.notice {
  display: grid;
  gap: var(--spacing-cell);
  max-width: 36rem;
  padding-block: var(--spacing-cell) calc(var(--spacing-cell) * 1.5);
  border-block: 1px solid var(--color-rule);
}

/* ── 다른 페이지 머리 ─────────────────────────────────────────────────── */
.phead {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  row-gap: var(--spacing-cell);
  padding-top: var(--spacing-block);
}
.phead__side {
  grid-column: 8 / span 5;
  align-self: end;
  display: grid;
  gap: var(--spacing-cell);
}
.phead__t {
  grid-column: 1 / span 7;
  align-self: end;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
}
.phead__lede {
  font-size: var(--text-lede);
  line-height: var(--text-lede--line-height);
  font-weight: 300;
}
.phead__plat {
  display: inline-flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
}
.phead__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  padding-top: var(--spacing-cell);
  border-top: 1px solid var(--color-rule);
}

/* ── 세계 — 지역 ───────────────────────────────────────────────────── */
.regions {
  display: grid;
  gap: var(--spacing-block);
}
.region {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  row-gap: var(--spacing-cell);
  scroll-margin-top: var(--spacing-cell);
}
.region__art {
  grid-column: 1 / span 8;
  grid-row: 1;
}
.region__text {
  grid-column: 9 / span 4;
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-cell);
}
.region--flip .region__art {
  grid-column: 5 / span 8;
}
.region--flip .region__text {
  grid-column: 1 / span 4;
}
.region__t {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}
.region__fl {
  margin-top: var(--spacing);
}
.region__found {
  border-bottom: 1px solid var(--color-rule);
}
.region__found li {
  padding-block: calc(var(--spacing) * 1.5);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* 수심 지도 — 코드 SVG */
.bathy__plot {
  position: relative;
  height: 320px;
  margin: var(--spacing-cell) 0 0 5.5rem;
  box-shadow: var(--shadow-hair);
}
.bathy__svg {
  width: 100%;
  height: 100%;
}
.bathy__svg path {
  vector-effect: non-scaling-stroke;
}
.bathy__lvl {
  fill: none;
  stroke: var(--color-fog-dot);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.bathy__bed {
  fill: var(--color-surface);
  stroke: var(--color-ink-dim);
  stroke-width: 1.5;
}
.bathy__str {
  fill: none;
  stroke: var(--color-rule);
  stroke-width: 1;
}
.bathy__ax {
  position: absolute;
  left: -5.5rem;
  top: calc(var(--d) / 48 * 100%);
  width: 4.75rem;
  translate: 0 -50%;
  text-align: right;
  font-family: var(--font-data);
  font-feature-settings: var(--font-data--font-feature-settings);
  font-size: var(--text-micro);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--text-micro--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-dim);
}
.bathy__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -22px -50%;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-tap);
}
.bathy__pin b {
  display: grid;
  place-items: center;
  min-width: var(--spacing-tap);
  min-height: 28px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink-dim);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}
.bathy__pin span {
  padding: 2px var(--spacing);
  background: var(--color-surface);
  font-family: var(--font-data);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--text-micro--letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}
/* 종 틀 위치는 점 대신 바닥으로 내린 2px 측심줄 — 모바일에서 아래 인물 선택의 점과 한 화면에 겹친다 */
.bathy__pin--bell b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 6px);
  width: 2px;
  height: 18px;
  translate: -50% 0;
  background: var(--color-accent);
}
@media (hover: hover) {
  .bathy__pin:hover b {
    box-shadow: inset 0 0 0 1px var(--color-ink);
  }
}
.bathy__cap {
  max-width: calc(var(--spacing-measure) * 0.9);
  margin: calc(var(--spacing-cell) * 1.5) 0 0 5.5rem;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-dim);
}

/* 인물 선택 */
.cast__tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--spacing-hair);
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.cast__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  padding-bottom: var(--spacing-cell);
  background: var(--color-bg);
  text-align: start;
}
.cast__tab .pic {
  width: 100%;
  box-shadow: none;
  margin-bottom: calc(var(--spacing) * 2);
}
.cast__nm,
.cast__rl {
  padding-inline: var(--spacing-cell);
}
.cast__nm {
  display: flex;
  align-items: center;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cast__tab[aria-selected="true"] {
  background: var(--color-surface-raise);
  box-shadow: inset 0 2px 0 var(--color-ink);
}
.cast__tab[aria-selected="true"] .cast__nm::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-inline-end: 0.5em;
  border-radius: var(--radius-dot);
  background: var(--color-accent);
}
@media (hover: hover) {
  .cast__tab:hover {
    box-shadow: inset 0 2px 0 var(--color-ink-dim);
  }
  .cast__tab[aria-selected="true"]:hover {
    box-shadow: inset 0 2px 0 var(--color-ink);
  }
}
.cast__panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  row-gap: var(--spacing-block);
  margin-top: var(--spacing-block);
}
.cast__panel[hidden] {
  display: none;
}
.cast__head {
  grid-column: 1 / span 5;
  display: grid;
  gap: var(--spacing-cell);
}
.cast__name {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
}
.cast__q {
  grid-column: 6 / span 7;
  align-self: end;
  font-size: var(--text-lede);
  line-height: var(--text-lede--line-height);
  font-weight: 300;
  font-style: italic;
}
.cast__bio {
  grid-column: 1 / span 5;
  max-width: var(--spacing-measure);
}
.cast__panel .facts {
  grid-column: 6 / span 7;
}
.facts--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.facts--4 dd {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 600;
  text-transform: none;
}

/* 다음 수심 */
.descend {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding-block: var(--spacing-cell) calc(var(--spacing-cell) * 1.5);
  border-block: 1px solid var(--color-rule);
}
.descend__t {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}

/* ── 에디션 ──────────────────────────────────────────────────────────── */
.ed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.ed-table th,
.ed-table td {
  padding: var(--spacing-cell);
  border: 1px solid var(--color-rule);
  text-align: start;
  vertical-align: middle;
}
.ed-table thead th,
.ed-corner {
  background: var(--color-surface-raise);
  vertical-align: bottom;
}
.ed-table .ed-corner {
  text-align: start;
}
.ed-table thead th {
  padding: 0;
  width: 20%;
}
.ed-table thead button {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  min-height: var(--spacing-tap);
  padding: var(--spacing-cell);
}
.ed-h__n {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.4em;
}
.ed-h__n .dot {
  margin-inline-end: 0.2em;
}
.ed-h__p {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}
.ed-table thead .dot {
  display: none;
}
.ed-table thead [aria-pressed="true"] {
  box-shadow: inset 0 2px 0 var(--color-accent);
}
.ed-table thead [aria-pressed="true"] .ed-h__n {
  color: var(--color-ink);
}
.ed-table thead [aria-pressed="true"] .dot {
  display: inline-block;
}
@media (hover: hover) {
  .ed-table thead button:hover {
    box-shadow: inset 0 2px 0 var(--color-ink-dim);
  }
  .ed-table thead [aria-pressed="true"]:hover {
    box-shadow: inset 0 2px 0 var(--color-accent);
  }
}
.ed-table tbody th {
  font-weight: 400;
}
.ed-table td {
  text-align: center;
}
.has {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-ink);
}
.no {
  display: inline-block;
  width: 12px;
  height: 1px;
  vertical-align: middle;
  background: var(--color-ink-dim);
}
.ed-plat {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* E2 사전 예약(표현) */
.po__pick {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--spacing-cell);
  align-content: start;
}
.po__q {
  color: var(--color-ink);
}
.po__q + .choice {
  margin-bottom: var(--spacing-cell);
}
.choice {
  display: grid;
  gap: var(--spacing-hair);
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.choice--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.choice--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.choice__b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing);
  min-height: 64px;
  padding: var(--spacing-cell);
  background: var(--color-bg);
}
.choice__b--plat {
  flex-direction: row;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  min-height: 56px;
}
.choice__n {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.choice__p {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}
.choice__b[aria-pressed="true"] {
  background: var(--color-surface-raise);
  box-shadow: inset 0 2px 0 var(--color-accent);
}
@media (hover: hover) {
  .choice__b:hover {
    box-shadow: inset 0 2px 0 var(--color-ink-dim);
  }
  .choice__b[aria-pressed="true"]:hover {
    box-shadow: inset 0 2px 0 var(--color-accent);
  }
}
.po__note {
  max-width: var(--spacing-measure);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-dim);
}
.po__sum {
  grid-column: 9 / span 4;
  align-self: start;
  display: grid;
  gap: var(--spacing-cell);
  padding: calc(var(--spacing-cell) * 1.5);
  background: var(--color-surface);
  box-shadow: var(--shadow-hair);
}
.po__what {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.po__total {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  font-feature-settings: "tnum" 1;
}
.po__status {
  padding-top: var(--spacing-cell);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.po__status:empty {
  display: none;
}

/* E3 수집가판 */
.box__art {
  grid-column: 1 / span 6;
}
.box__list {
  grid-column: 7 / span 6;
  align-self: center;
  border-top: 1px solid var(--color-rule);
}
.box__list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: calc(var(--spacing) * 2);
  padding-block: var(--spacing-cell);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.box__list b {
  display: block;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* E4 사양 */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.spec th,
.spec td {
  padding: var(--spacing-cell) var(--spacing-cell) var(--spacing-cell) 0;
  border-bottom: 1px solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}
.spec thead th {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--text-micro--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-dim);
}
.spec tbody th {
  width: 20%;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--text-micro--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-dim);
}

/* E5 FAQ */
.faq {
  max-width: 48rem;
  border-top: 1px solid var(--color-rule);
}
.faq details {
  border-bottom: 1px solid var(--color-rule);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-cell);
  min-height: 56px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  width: 1.25rem;
  text-align: center;
  font-size: 1.25rem;
}
.faq details[open] summary::after {
  content: "−";
}
.faq details p {
  max-width: var(--spacing-measure);
  padding-bottom: calc(var(--spacing-cell) * 1.5);
}

/* ── 필드 로그 ──────────────────────────────────────────────────────── */
.tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-cell);
  margin-top: var(--spacing-cell);
  padding-top: var(--spacing-cell);
  border-top: 1px solid var(--color-rule);
}
.tabs [role="tab"] {
  min-height: var(--spacing-tap);
  padding-inline: calc(var(--spacing) * 4);
  box-shadow: inset 0 0 0 1px var(--color-rule);
  font-family: var(--font-data);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--text-micro--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-dim);
}
.tabs [aria-selected="true"] {
  background: var(--color-surface-raise);
  color: var(--color-ink);
  box-shadow: inset 0 2px 0 var(--color-accent), inset 0 0 0 1px var(--color-rule);
}
@media (hover: hover) {
  .tabs [role="tab"]:hover {
    color: var(--color-ink);
  }
}
.tabs__n {
  margin-inline-start: auto;
}
.art__main {
  grid-column: 1 / span 8;
}
.art__meta {
  grid-column: 10 / span 3;
  align-self: start;
}
.art__kicker {
  display: flex;
  align-items: center;
  color: var(--color-ink);
}
.art__t {
  max-width: 24ch;
  text-wrap: balance;
  margin-block: var(--spacing-cell) var(--spacing-block);
  font-family: var(--font-display);
  font-size: calc(var(--text-h3) * 1.3);
  line-height: 0.95;
}
.art__art {
  margin-bottom: var(--spacing-block);
}
.art__body {
  display: grid;
  gap: 1.1em;
  max-width: var(--spacing-measure);
}
.art__q {
  position: relative;
  text-wrap: balance;
  margin-block: var(--spacing-cell);
  padding-inline-start: 1.75rem;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
}
/* 인용 표식은 대문자 높이만큼의 2px 선 — 390×844 에서 위 '최신' 점과 한 화면에 겹친다 */
.art__q::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  width: 2px;
  height: 0.7em;
  background: var(--color-accent);
}
.art__sig {
  max-width: var(--spacing-measure);
  margin-top: var(--spacing-block);
  padding-top: var(--spacing-cell);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
  color: var(--color-ink-dim);
}
.art__sig b {
  color: var(--color-ink);
  font-weight: 600;
}
.kv div {
  display: grid;
  gap: var(--spacing);
  padding-block: var(--spacing-cell);
  border-top: 1px solid var(--color-rule);
}
.kv dd {
  font-size: var(--text-small);
  font-weight: 600;
}
.subs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-cell);
  padding-block: var(--spacing-cell);
  border-block: 1px solid var(--color-rule);
}
.subs__t {
  font-size: var(--text-lede);
  line-height: var(--text-lede--line-height);
  font-weight: 300;
}

/* ── 모바일 요약(M9) · 꼬리 ──────────────────────────────────────────── */
.sum {
  display: grid;
  gap: var(--spacing-cell);
  margin: var(--spacing-section) var(--spacing-gutter) 0;
  padding-top: var(--spacing-cell);
  border-top: 1px solid var(--color-rule);
}
.sum__v {
  margin-block: calc(var(--spacing) * 1.5);
  font-family: var(--font-display);
  font-size: var(--text-depth);
  line-height: var(--text-depth--line-height);
}
.sum__next {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  min-height: 48px;
  padding-block: var(--spacing-cell);
  border-block: 1px solid var(--color-rule);
}
.sum__nx {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}
.foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  row-gap: var(--spacing-block);
  margin: var(--spacing-section) var(--spacing-gutter) 0;
  padding-block: var(--spacing-block) calc(var(--spacing-block) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-rule);
}
.foot__a {
  grid-column: 1 / span 3;
}
.foot__b {
  grid-column: 4 / span 4;
}
.foot__n {
  grid-column: 8 / span 5;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-dim);
}
.foot__mark {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}
.foot__c {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-small);
  color: var(--color-ink-dim);
}
.foot__b a {
  display: flex;
  align-items: center;
  gap: 0.75em;
  min-height: var(--spacing-tap);
  font-family: var(--font-data);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.foot__d {
  font-feature-settings: var(--font-data--font-feature-settings);
  color: var(--color-ink-dim);
}
@media (hover: hover) {
  .foot__b a:hover,
  .sum__next:hover {
    box-shadow: inset 0 1px 0 var(--color-ink);
  }
}

/* ── 1023 이하 — 다시 배치 ───────────────────────────────────────────── */
@media (max-width: 1023.98px) {
  .premise__text,
  .trailer__screen,
  .trailer__list,
  .po__pick,
  .po__sum,
  .art__main,
  .art__meta,
  .cast__head,
  .cast__q,
  .cast__bio,
  .cast__panel .facts {
    grid-column: 1 / -1;
  }
  .facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cast__q {
    align-self: start;
  }
  .price {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .price__go {
    grid-column: 1 / -1;
    min-height: 56px;
  }
  .faq {
    max-width: none;
  }
  .art__meta .kv {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
  }
}

@media (max-width: 767.98px) {
  .grid {
    row-gap: var(--spacing-block);
  }
  /* 히어로 — 키 아트 1:1 가운데 크롭, 워드마크가 그림 아래 띠 안에 얹힌다 */
  .hero__art {
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .hero__mark {
    margin-top: calc(var(--text-h1) * -0.93);
  }
  .hero__info {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "ma"
      "log"
      "mb"
      "cta";
    row-gap: var(--spacing-cell);
    margin-top: var(--spacing);
  }
  .meta--b .meta__c:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  .hero__cta {
    flex-direction: column;
    margin-top: calc(var(--spacing) * 1);
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .idx__row {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: start;
  }
  .idx__d {
    grid-column: 1;
  }
  .idx__main {
    grid-column: 2;
  }
  .idx__go {
    grid-column: 3;
  }
  .idx__r,
  .idx__th {
    display: none;
  }
  .price {
    grid-template-columns: minmax(0, 1fr);
  }
  .price__c {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "n v"
      "l v";
    align-items: center;
    column-gap: var(--spacing-cell);
  }
  .price__c .label {
    grid-area: n;
  }
  .price__v {
    grid-area: v;
  }
  .price__l {
    grid-area: l;
  }
  .rows__r {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--spacing-cell);
    row-gap: calc(var(--spacing) * 1.5);
  }
  .rows__date {
    grid-column: 1;
    grid-row: 1;
  }
  .rows__k {
    grid-column: 2;
    grid-row: 1;
  }
  .rows__go {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .rows__t {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .rows__m {
    display: none;
  }
  .rows__more {
    display: block;
  }
  .notice {
    max-width: none;
  }
  .phead__t,
  .phead__side {
    grid-column: 1 / -1;
  }
  .region__art,
  .region__text,
  .region--flip .region__art,
  .region--flip .region__text {
    grid-column: 1 / -1;
  }
  .region__text {
    grid-row: 2;
  }
  .bathy__plot {
    height: 220px;
    margin-left: 2.5rem;
  }
  .bathy__ax {
    left: -2.5rem;
    width: 2rem;
  }
  .bathy__ax span,
  .bathy__pin span {
    display: none;
  }
  .bathy__cap {
    margin-left: 0;
  }
  /* 초상 줄 — 가로 스냅, 3.3개 보여 끝이 잘려 스크롤을 알린다 */
  .cast__tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cast__tab {
    flex: 0 0 30%;
    scroll-snap-align: start;
  }
  .choice--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .choice--3 .choice__b {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 56px;
  }
  .choice--3 .choice__p {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
  .box__art,
  .box__list {
    grid-column: 1 / -1;
  }
  .art__meta .kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tabs__n {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
  .foot__a,
  .foot__b,
  .foot__n {
    grid-column: 1 / -1;
  }
  /* 비교표 — 열을 뒤집지 않고 에디션별 묶음(권장 먼저) */
  .ed-table {
    display: flex;
    flex-direction: column;
  }
  .ed-table thead,
  .ed-table tbody,
  .ed-table tr {
    display: contents;
  }

  .ed-table [data-col="deluxe"] {
    order: 1;
  }
  .ed-table [data-col="standard"] {
    order: 2;
  }
  .ed-table [data-col="collector"] {
    order: 3;
  }
  .ed-table thead th {
    display: block;
    width: auto;
    margin-top: var(--spacing-cell);
    border: 1px solid var(--color-rule);
  }
  .ed-table thead th[data-col="deluxe"] {
    margin-top: 0;
  }
  .ed-table thead button {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .ed-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-cell);
    min-height: 44px;
    padding-block: calc(var(--spacing) * 2);
    border-width: 0 1px 1px;
    text-align: start;
  }
  .ed-table td::before {
    content: attr(data-label);
  }
  .ed-table td .ed-plat {
    text-align: end;
  }
  .ed-table .ed-corner,
  .ed-table tbody th {
    display: none;
  }
}

/* ── 동작 줄이기 — 도는 것 0 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gauge__dot.is-settling {
    transition: none;
  }
}