/* aerlume — 화면 규칙. 색·크기·간격은 tokens.css 의 변수만 쓴다.
 * 원칙: 하늘은 프레임에만 · 잉크 블루는 글자·1px 선·점에만 · 스스로 움직이는 것 0 */

/* ── 리셋 ─────────────────────────────────────────── */
:where(*, *::before, *::after) {
  box-sizing: border-box;
}
:where(body, h1, h2, h3, p, ol, ul, dl, dd, figure) {
  margin: 0;
}
:where(ol, ul) {
  padding: 0;
  list-style: none;
}
:where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:where(a) {
  color: inherit;
}
:where(img, canvas, svg) {
  display: block;
}

html {
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--spacing-header) + var(--spacing-6));
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  top: var(--spacing-2);
  left: var(--spacing-2);
  z-index: 60;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-ink);
  color: var(--color-on-ink);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}
.skip:focus-visible {
  transform: none;
}

.wrap {
  margin-inline: max(var(--spacing-gutter), calc((100% - 82rem) / 2));
}

/* ── 버튼·링크 ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--spacing-6);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 160ms var(--ease-out),
    transform 120ms var(--ease-out);
}
.btn:active {
  transform: scale(0.98);
}
.btn-lg {
  min-height: 3rem;
  font-size: var(--text-base);
}
.btn-ink {
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.btn-line {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-line);
}
@media (hover: hover) {
  .btn-ink:hover {
    background: var(--color-ink-2);
  }
  .btn-line:hover {
    box-shadow: inset 0 0 0 1px var(--color-accent);
  }
  .link:hover {
    text-decoration-thickness: 2px;
  }
}
.link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* ── 머리 — 탑승권 절취선 ───────────────────────────
 * 맨 위에 붙은 전폭 종이 띠(뜨지 않는다·둥글림 0). 몸통 | 점선 절취선 | 그루터기.
 * 띠는 늘 불투명 surface — 아래 프레임이 무엇이든 글자 대비가 띠 위에서 정해진다.
 * 강조색은 현재 필드의 값 글자와 그 위 1px 선, 선 화살표에만. */
.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: var(--spacing-header) auto;
  --notch: 7px;
}
/* 바탕은 칸마다 — 띠 전체에 깔면 홈 자리에 바탕이 비쳐 홈이 사라진다 */
.tk-body,
.tk-stub {
  background: var(--color-surface);
  display: flex;
  align-items: stretch;
  min-width: 0;
  box-shadow: inset 0 -1px 0 var(--color-line);
}
.tk-body {
  gap: var(--spacing-8);
  padding-left: var(--spacing-gutter);
  /* 절취선 위아래 반원 홈 — 몸통 오른쪽 두 귀퉁이와 그루터기 왼쪽 두 귀퉁이를 깎는다 */
  mask:
    radial-gradient(circle var(--notch) at 100% 0, transparent 98%, var(--color-ink) 100%),
    radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, var(--color-ink) 100%);
  mask-composite: intersect;
}
.tk-stub {
  mask:
    radial-gradient(circle var(--notch) at 0 0, transparent 98%, var(--color-ink) 100%),
    radial-gradient(circle var(--notch) at 0 100%, transparent 98%, var(--color-ink) 100%);
  mask-composite: intersect;
}
.tk-perf {
  width: 0;
  margin-block: calc(var(--notch) + 2px);
  border-left: 1px dashed var(--color-mute);
  background: var(--color-surface); /* 점 사이 틈 — border 아래까지 깔린다 */
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
/* 몸통·그루터기의 mask 가 바깥 포커스 링을 자르므로 안쪽으로 */
.top :focus-visible {
  outline-offset: -3px;
}
.tk-k {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-mute);
}
.tk-v {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}
.tk-fields {
  display: flex;
  min-width: 0;
}
.tk-fields a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 2.75rem;
  padding-inline: var(--spacing-4);
  box-shadow: inset 1px 0 0 var(--color-line);
  text-decoration: none;
  transition: box-shadow 160ms var(--ease-out);
}
.tk-fields a[aria-current="true"] {
  box-shadow:
    inset 1px 0 0 var(--color-line),
    inset 0 1px 0 var(--color-accent);
}
.tk-fields a[aria-current="true"] .tk-v,
.tk-panel a[aria-current="true"] .tk-v {
  color: var(--color-accent);
}
.tk-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 13rem;
  padding-inline: var(--spacing-6) var(--spacing-gutter);
  text-decoration: none;
  transition: background-color 160ms var(--ease-out);
}
.tk-cta .tk-v {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--text-base);
}
.tk-arr {
  margin-left: auto;
  color: var(--color-accent);
  transition: transform 160ms var(--ease-out);
}
.tk-short,
.tk-menu {
  display: none;
}
.tk-menu {
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--spacing-4);
  box-shadow: inset 1px 0 0 var(--color-line);
  font-size: var(--text-sm);
  font-weight: 600;
}
.tk-menu[aria-expanded="true"] {
  color: var(--color-accent);
}
@media (hover: hover) {
  .tk-cta:hover,
  .tk-menu:hover,
  .tk-fields a:hover {
    background: var(--color-bg);
  }
  .tk-cta:hover .tk-arr {
    transform: translateX(3px);
  }
}
.tk-cta:active,
.tk-menu:active {
  background: var(--color-sky);
}
/* 메뉴 판 — 탑승권 뒷면: 줄마다 필드 이름 | 값, 점선으로 나눈다 */
.tk-panel {
  grid-column: 1 / -1;
  display: grid;
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-4);
  background: var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--color-line);
}
.tk-panel[hidden] {
  display: none;
}
.tk-panel a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-height: 3.25rem;
  padding-block: var(--spacing-3);
  border-bottom: 1px dashed var(--color-line);
  text-decoration: none;
}
.tk-panel a:last-child {
  border-bottom: 0;
}
.tk-panel .tk-v {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

/* ── 상승 시퀀스 ──────────────────────────────────── */
.ascent {
  position: relative;
  height: 420svh;
}
.stage-wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: var(--spacing-header) var(--spacing-gutter) var(--spacing-6);
}
.stage {
  --out: 0;
  --p: 0;
  --plate: 0;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-sky);
}
/* 판이 다 덮이면 모서리를 편다 — 둥근 모서리의 반투명 테두리로 아래 하늘이 비치지 않게 */
.stage[data-sealed] {
  border-radius: 0;
  background: var(--color-bg);
}
.stage-media {
  position: absolute;
  inset: 0;
}
.stage-img,
.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage-img {
  object-fit: cover;
  object-position: 50% 50%;
}
.stage-canvas {
  opacity: 0;
}
.stage-canvas[data-ready] {
  opacity: 1;
}

.stage-text {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(44% + var(--spacing-12));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-12) 0 var(--spacing-12) var(--spacing-12);
  opacity: calc(1 - var(--out));
  transform: translateY(calc(var(--out) * -16px));
  will-change: opacity, transform;
}
.stage-text[data-gone] {
  visibility: hidden;
}
/* 프레임 글자 구역이 4.5:1 에 못 미칠 때만 HTML 에 data-scrim 을 둔다 — 글자 뒤 바탕 판(실측은 NOTES) */
.stage[data-scrim] .stage-copy,
.stage[data-scrim] .stage-cta {
  background: var(--color-scrim);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  margin: calc(var(--spacing-4) * -1);
}
.stage-copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.eyebrow {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.hero-sub {
  max-width: 36rem;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}
.stage-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3) var(--spacing-6);
}
/* 실측(NOTES): 프레임 위 강조색 글자는 3.4~4.4:1 — 링크 뒤에만 바탕 판을 깐다. 잉크 글자는 9:1 이상이라 판 없음 */
.stage-cta .link {
  padding-inline: var(--spacing-3);
  border-radius: var(--radius-sm);
  background: var(--color-scrim);
}

.plate {
  position: absolute;
  inset: 0;
  opacity: var(--plate);
  pointer-events: none;
}
/* 판을 무대보다 조금 크게 — 둥근 모서리·소수점 폭에서 캔버스가 비치지 않게 */
.plate-svg {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.plate-fill {
  fill: var(--color-bg);
}
.mask-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-mask);
}
.plate-tag {
  position: absolute;
  inset: auto 0 18%;
  text-align: center;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

.stage-hint {
  position: absolute;
  right: var(--spacing-6);
  bottom: var(--spacing-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: calc(1 - var(--out));
}
.prog {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  opacity: calc(1 - var(--plate));
}
.prog-start,
.prog-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--color-accent);
}
.prog-start {
  width: var(--spacing-2);
}
.prog-bar {
  width: 100%;
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}

/* ── 공통 구간 ───────────────────────────────────── */
.promise,
.legs,
.fleet,
.steps,
.cabin,
.safety,
.desk {
  margin-top: var(--spacing-section);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: -0.02em;
}
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--spacing-4) var(--spacing-12);
  margin-bottom: var(--spacing-12);
}
.sec-note {
  max-width: 38ch;
  color: var(--color-mute);
}
.photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-sky);
  object-fit: cover;
}
.jet-photo,
.cabin-b {
  aspect-ratio: 3 / 2;
}
.cabin-a {
  aspect-ratio: 4 / 5;
}

/* 등장 — main.js 가 html.js 를 붙일 때만 숨긴다(스크립트 없이도 다 보인다) */
.js .rv {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .rv.is-in {
  opacity: 1;
  transform: none;
}

/* ── 약속 ─────────────────────────────────────────── */
.promise-tag {
  display: none;
  margin-bottom: var(--spacing-12);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.promise-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-8);
}
.numeral {
  font-variant-numeric: lining-nums;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-numeral);
  line-height: var(--text-numeral--line-height);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.promise-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: 40rem;
}
.lead {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: 500;
}
.list-title {
  margin-top: var(--spacing-8);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fit-list {
  border-top: 1px solid var(--color-line);
}
.fit-list li {
  display: flex;
  gap: var(--spacing-6);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-line);
}
.fit-t {
  min-width: 3rem;
  color: var(--color-mute);
  font-feature-settings: "tnum" 1;
}

/* ── 빈 귀환편 ───────────────────────────────────── */
.legs {
  --leg-cols: 7rem 11rem minmax(0, 1fr) 4rem 8rem 7.5rem;
  --leg-hold: 8rem;
  --leg-gap: var(--spacing-4);
}
.leg-cols {
  display: grid;
  grid-template-columns: var(--leg-cols) var(--leg-hold);
  column-gap: var(--leg-gap);
  padding: 0 var(--spacing-4) var(--spacing-3);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-mute);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.leg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--leg-hold);
  column-gap: var(--leg-gap);
  align-items: center;
  padding-inline: var(--spacing-4);
  border-bottom: 1px solid var(--color-line);
  transition: background-color 240ms var(--ease-out);
}
.leg[data-open] {
  background: var(--color-surface);
}
.leg-row {
  display: grid;
  grid-template-columns: var(--leg-cols);
  column-gap: var(--leg-gap);
  align-items: center;
  min-height: 4.5rem;
  text-align: left;
  font-feature-settings: "tnum" 1;
}
.leg-row > span {
  position: relative;
}
.c-route {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.arrow {
  width: 1.5rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.c-type {
  white-space: nowrap;
}
.c-time {
  color: var(--color-accent);
  font-weight: 600;
}
.c-price {
  font-weight: 600;
}
.leg-hold {
  justify-self: end;
}
.leg-more {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 240ms var(--ease-out),
    visibility 0s linear 240ms;
}
.leg[data-open] .leg-more {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 240ms var(--ease-out),
    visibility 0s;
}
.leg-detail {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: var(--spacing-6) var(--spacing-16);
  padding-left: calc(7rem + var(--leg-gap));
  min-height: 0;
  overflow: hidden;
}
.leg[data-open] .leg-detail {
  padding-bottom: var(--spacing-6);
}
.leg-detail dt,
.jet-spec dt,
.chip-label {
  color: var(--color-mute);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── 기단 — 사양 자 ──────────────────────────────── */
.fleet-list {
  border-top: 1px solid var(--color-line);
}
.jet {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--spacing-12);
  align-items: center;
  padding-block: var(--spacing-12);
  border-bottom: 1px solid var(--color-line);
}
.jet-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}
.jet-name {
  font-variant-numeric: lining-nums;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  letter-spacing: -0.01em;
}
.jet-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--spacing-4) var(--spacing-6);
  font-feature-settings: "tnum" 1;
}
.jet-spec dd {
  font-weight: 600;
  white-space: nowrap;
}
.range {
  --drawn: 0;
  position: relative;
  height: var(--spacing-2);
}
.range-line {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--range) * 100%);
  height: 1px;
  background: var(--color-ink);
  transform: scaleX(var(--drawn));
  transform-origin: 0 50%;
  transition: transform 600ms var(--ease-out);
}
.range::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--range) * 100%);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: var(--drawn);
  transition: opacity 160ms var(--ease-out) 520ms;
}
.range[data-drawn],
html:not(.js) .range {
  --drawn: 1;
}

/* ── 예약 흐름 ───────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-12);
}
.step-list {
  border-left: 1px solid var(--color-line);
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: 0 0 var(--spacing-16) var(--spacing-8);
}
.step:last-child {
  min-height: 0;
  padding-bottom: 0;
}
.step-t {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}
.step-name {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 700;
}
.step p:last-child {
  max-width: 34rem;
  color: var(--color-mute);
}

/* ── 객실 ─────────────────────────────────────────── */
.cabin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-12);
}
.cabin-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.cabin-list {
  border-top: 1px solid var(--color-line);
}
.cabin-list > div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--spacing-4);
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-line);
}
.cabin-list dt {
  font-weight: 700;
}
.cabin-list dd {
  color: var(--color-mute);
}

/* ── 안전 ─────────────────────────────────────────── */
.safety-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--spacing-12);
  border-top: 1px solid var(--color-line);
}
.safety-grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-8) 0;
  border-bottom: 1px solid var(--color-line);
}
.safety-grid dt {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 700;
}
.safety-grid dd {
  max-width: 30rem;
  color: var(--color-mute);
}
.fine {
  max-width: 60ch;
  margin-top: var(--spacing-6);
  color: var(--color-mute);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* ── 문의 ─────────────────────────────────────────── */
.desk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  text-align: center;
}
.desk-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: -0.03em;
}
.desk-sub {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.desk-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-4);
}

/* ── 꼬리 ─────────────────────────────────────────── */
.foot {
  margin-top: var(--spacing-section);
  padding-block: var(--spacing-12) var(--spacing-16);
  border-top: 1px solid var(--color-line);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-6);
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-6);
}
.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.foot-note {
  max-width: 60ch;
  color: var(--color-mute);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.foot-back {
  justify-self: start;
  font-size: var(--text-sm);
}

/* ── 요청 시트 ───────────────────────────────────── */
.sheet[hidden],
.sheet-back[hidden] {
  display: none;
}
.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--color-scrim);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.sheet {
  position: fixed;
  inset: var(--spacing-3) var(--spacing-3) var(--spacing-3) auto;
  z-index: 50;
  width: min(26.25rem, calc(100% - var(--spacing-6)));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet), var(--shadow-hairline);
  transform: translateX(calc(100% + var(--spacing-6)));
  transition: transform 200ms var(--ease-out);
}
.sheet-back[data-open] {
  opacity: 1;
  transition-duration: 280ms;
}
.sheet[data-open] {
  transform: none;
  transition-duration: 280ms;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}
.sheet-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}
.sheet-close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: calc(var(--spacing-3) * -1);
  border-radius: var(--radius-sm);
}
.sheet-close svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.sheet-note {
  color: var(--color-mute);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.chip-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}
.chip {
  min-height: 2.75rem;
  padding: 0 var(--spacing-4);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-size: var(--text-sm);
  font-weight: 600;
  transition:
    background-color 160ms var(--ease-out),
    transform 120ms var(--ease-out);
}
.chip:active {
  transform: scale(0.98);
}
.chip[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.sheet-sum {
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-line);
  font-weight: 600;
}
.sheet-go {
  margin-top: auto;
}

/* ── 넓은 화면 ───────────────────────────────────── */
@media (min-width: 768px) {
  .jet {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .cabin {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .cabin-a {
    grid-column: 1 / span 6;
  }
  .cabin-side {
    grid-column: 8 / span 5;
    padding-top: var(--spacing-16);
  }
  .safety-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .safety-grid > div:nth-child(even) {
    padding-left: var(--spacing-8);
    border-left: 1px solid var(--color-line);
  }
  .safety-grid > div:nth-child(odd) {
    padding-right: var(--spacing-8);
  }
  .foot-grid {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--spacing-12);
  }
  .foot-nav,
  .foot-back {
    justify-self: end;
  }
}

@media (min-width: 1024px) {
  .promise-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .numeral {
    grid-column: 1 / span 5;
  }
  .promise-body {
    grid-column: 7 / span 6;
  }
  .steps {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .steps-head {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--spacing-header) + var(--spacing-12));
  }
  .step-list {
    grid-column: 6 / span 7;
  }
  .step {
    min-height: 45svh;
  }
}

/* 표가 막 붙는 폭(1024~1199) — 고정 칸을 줄여 기종 칸이 접히지 않게 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .legs {
    --leg-cols: 6.5rem 9rem minmax(0, 1fr) 4rem 7rem 7rem;
    --leg-hold: 7rem;
    --leg-gap: var(--spacing-3);
  }
  .leg-detail {
    padding-left: calc(6.5rem + var(--leg-gap));
  }
}

/* 링크 5 가 가운데 들어가지 않는 폭 — 링크는 꼬리로 */
@media (max-width: 1023px) {
  .tk-fields {
    display: none;
  }
  .tk-menu {
    display: flex;
  }
}

/* 빈 귀환편 표가 7칸을 못 담는 폭 — 줄마다 두 줄 블록 */
@media (max-width: 1023px) {
  .leg-cols {
    display: none;
  }
  .leg {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
  }
  .leg-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1) var(--spacing-3);
    padding-top: var(--spacing-4);
    min-height: 0;
    font-size: var(--text-sm);
  }
  .c-route {
    order: -1;
    flex-basis: 100%;
    font-size: var(--text-xl);
  }
  .c-seats {
    display: none;
  }
  .leg-hold {
    justify-self: start;
  }
  .leg-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-3);
    padding-left: 0;
  }
}

/* ── 모바일 ───────────────────────────────────────── */
@media (max-width: 767px) {
  .top {
    grid-template-rows: calc(var(--spacing-header-m) + env(safe-area-inset-top)) auto;
    --notch: 6px;
  }
  .tk-body,
  .tk-stub {
    padding-top: env(safe-area-inset-top);
  }
  .tk-body {
    padding-left: var(--spacing-4);
  }
  .tk-perf {
    margin-top: calc(env(safe-area-inset-top) + var(--notch) + 2px);
  }
  .tk-cta {
    min-width: 0;
    padding-inline: var(--spacing-4);
  }
  .tk-cta .tk-k {
    display: none;
  }
  .tk-cta .tk-v {
    font-size: var(--text-sm);
    gap: var(--spacing-2);
  }
  .tk-long {
    display: none;
  }
  .tk-short {
    display: inline;
  }
  html {
    scroll-padding-top: calc(var(--spacing-header-m) + var(--spacing-4));
  }

  .ascent {
    height: 320svh;
  }
  .stage-wrap {
    padding: calc(var(--spacing-header-m) + env(safe-area-inset-top) + var(--spacing-2)) var(--spacing-2) var(--spacing-2);
  }
  .stage {
    border-radius: var(--radius-md);
  }
  .stage-img {
    object-position: 55% 50%;
  }
  .stage-text {
    inset: 0;
    width: auto;
    justify-content: space-between;
    padding: var(--spacing-6) var(--spacing-4) calc(env(safe-area-inset-bottom) + var(--spacing-6));
  }
  .hero-sub {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }
  .stage-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2);
    text-align: center;
  }
  .stage-cta .btn {
    min-height: 3.25rem;
  }
  .stage-cta .link {
    align-self: center;
  }
  .stage-hint {
    display: none;
  }

  .jet {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-6);
    padding-block: var(--spacing-8);
  }
  .jet-photo {
    order: -1;
  }
  .desk-cta {
    flex-direction: column;
    align-self: stretch;
  }
  .desk-cta .btn {
    min-height: 3.25rem;
  }

  .sheet {
    inset: auto 0 0;
    width: auto;
    max-height: 85svh;
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--spacing-6));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
}

/* ── 움직임 줄이기: 정지 한 장 · 구간 한 화면 · 마스크·진행선 없음 ── */
@media (prefers-reduced-motion: reduce) {
  .ascent {
    height: auto;
  }
  .stage-wrap {
    position: relative;
  }
  .stage-canvas,
  .plate,
  .prog,
  .stage-hint {
    display: none;
  }
  .promise-tag {
    display: block;
  }
  .js .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .range-line,
  .range::after,
  .leg-more,
  .sheet,
  .sheet-back,
  .btn,
  .chip,
  .tk-fields a,
  .tk-cta,
  .tk-arr {
    transition: none;
  }
  .range {
    --drawn: 1;
  }
}