/* arc-card — 스타일 (4단계). 값은 tokens.css 의 var() 만 쓴다.
 *
 * 층 셋: 슬레이트(책상) · 시트(서류) · 카드(물체). 카드는 슬레이트 위에만 놓는다.
 * 그라데이션·그림자는 카드 재질(.mat-*, .face)에만 — UI 면에는 0 (DESIGN.md 금지 절).
 *
 * 홈 무대는 두 가지로 읽힌다.
 *  - 무대 모드: ≥1024 · 동작 줄이기 아님 · main.js 가 .story 에 data-chapter 를 건 뒤. 무대가 붙고 장이 넘어간다.
 *  - 흐름 모드: 그 밖 전부(모바일 · 동작 줄이기 · 스크립트 없음). 무대는 첫 화면 한 장이고, 장마다 자기 카드가 인라인.
 */

/* ── 바탕 ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-bg);
  color: var(--color-ink);
  scrollbar-color: var(--color-line-faint) var(--color-bg-deep);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss06" 0;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

b,
strong {
  font-weight: 700;
}

svg {
  display: block;
}

::selection {
  background: var(--color-ink);
  color: var(--color-ink-sheet);
}

.sheet ::selection {
  background: var(--color-ink-sheet);
  color: var(--color-surface);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-ui);
}

.sheet :focus-visible {
  outline-color: var(--color-focus-sheet);
}

.num {
  font-variant-numeric: tabular-nums;
}

.wrap {
  width: min(calc(100% - 2 * var(--spacing-gutter)), 75rem);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -999px;
  top: calc(var(--spacing) * 3);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 0;
  padding-right: 1rem;
  padding-bottom: 0;
  padding-left: 1rem;
  background: var(--color-ink);
  color: var(--color-ink-sheet);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-ui);
  text-decoration: none;
}

.skip:focus {
  left: var(--spacing-gutter);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 글자 ──────────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

h2 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}

h3 {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  letter-spacing: -0.02em;
}

.eyebrow,
.ch-no {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-muted);
}

.ch-no b,
.eyebrow b {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  margin-right: calc(var(--spacing) * 2);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  color: var(--color-ink-muted);
}

.muted {
  color: var(--color-ink-muted);
}

/* 꼬리표 — "가상 카드" · "가상" · "예시" */
.tag {
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-right: 0.625rem;
  padding-bottom: 0;
  padding-left: 0.625rem;
  min-height: 1.625rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.sheet .tag {
  border-color: var(--color-ink-sheet-muted);
  color: var(--color-ink-sheet-muted);
}

/* ── 버튼 · 글 링크 ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  min-height: 48px;
  padding-top: 0;
  padding-right: 1.25rem;
  padding-bottom: 0;
  padding-left: 1.25rem;
  border-radius: var(--radius-ui);
  background: var(--color-ink);
  color: var(--color-ink-sheet);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color 160ms var(--ease-out),
    scale 120ms var(--ease-press);
}

.btn:active {
  scale: 0.98;
}

.sheet .btn {
  background: var(--color-ink-sheet);
  color: var(--color-surface);
}

.sheet .btn--ghost,
.btn--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
}

/* 호버는 진짜 포인터에서만 — 터치 기기에서 탭 뒤에 색이 남지 않게 */
@media (hover: hover) {
  .btn:hover {
    background: var(--color-surface);
  }

  .sheet .btn:hover {
    background: var(--color-ink-sheet-muted);
  }

  .sheet .btn--ghost:hover,
  .btn--ghost:hover {
    background: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
  }

  .link:hover {
    text-decoration-thickness: 2px;
  }

  .nav a:not(.btn):hover {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 0.35em;
  }

  .switch a:hover {
    color: var(--color-ink);
    border-color: var(--color-line);
  }

  .picks a:hover {
    border-color: var(--color-ink-sheet-muted);
  }

  .foot__links a:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
}

/* ── 머리 ──────────────────────────────────────────────────────────── */

.head {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  height: var(--spacing-header);
  padding-left: max(var(--spacing-gutter), env(safe-area-inset-left));
  padding-right: max(var(--spacing-gutter), env(safe-area-inset-right));
}

.head--over {
  position: absolute;
  inset: 0 0 auto;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.mark svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: calc(var(--spacing) * 7);
}

.nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.menu {
  margin-left: auto;
  position: relative;
}

.menu summary {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: 44px;
  padding-top: 0;
  padding-right: 0.75rem;
  padding-bottom: 0;
  padding-left: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.menu summary::-webkit-details-marker {
  display: none;
}

.menu summary::after {
  content: "";
  width: 10px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  transition: rotate 200ms var(--ease-out);
}

.menu[open] summary::after {
  rotate: 45deg;
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--spacing) * 2);
  width: min(17.5rem, calc(100vw - 2 * var(--spacing-gutter)));
  display: grid;
  gap: calc(var(--spacing) * 1);
  padding-top: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-line-faint);
  border-radius: var(--radius-ui);
}

.menu__panel a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-line-faint);
}

.menu__panel .btn {
  margin-top: calc(var(--spacing) * 2);
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }

  .menu {
    display: none;
  }
}

@media (max-width: 767px) {
  .head {
    height: 3.5rem;
  }

  .mark {
    font-size: var(--text-base);
  }
}

/* ── 카드 (물체) ──────────────────────────────────────────────────── */
/* .cw(래퍼, 컨테이너) > .card(이름대로 도는 판) > .face(앞·뒤). 안쪽 치수는 전부 cqw — 크기가 바뀌어도 한 물체. */

.cw {
  container-type: inline-size;
  width: var(--spacing-card-hero);
  perspective: 1400px;
}

.card {
  position: relative;
  aspect-ratio: 85.6 / 53.98;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--edge), var(--shadow-card);
  transition: box-shadow 160ms var(--ease-out);
}

.face--back {
  transform: rotateY(180deg);
}

/* 재질 — 판 색 · 잉크 · 가장자리. 견본(.sw)도 같은 재질을 입는다 */
.mat-chalk {
  --edge: inset 0 0 0 1px color-mix(in srgb, var(--color-ink-chalk) 8%, transparent);
  background: var(--color-plate-chalk);
  color: var(--color-ink-chalk);
}

.mat-satin {
  --edge: inset 0 0 0 1px var(--color-plate-satin-lo);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-plate-satin-hi) 28%, transparent) 0 1px, transparent 1px 3px),
    linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--color-plate-satin-hi) 55%, transparent) 50%, transparent 62%) 70% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, var(--color-plate-satin), color-mix(in oklab, var(--color-plate-satin-lo) 25%, var(--color-plate-satin)));
  color: var(--color-ink-satin);
}

.mat-onyx {
  --edge: inset 0 1px 0 0 var(--color-edge-light);
  background:
    repeating-radial-gradient(circle at 0% 100%, transparent 0 6cqw, var(--color-plate-onyx-line) 6cqw calc(6cqw + 1px)),
    var(--color-plate-onyx);
  color: var(--color-ink-onyx);
}

/* 앞면 — 번호·이름·유효기간·국제 브랜드 없음 */
.c-mark,
.c-nfc,
.c-chip,
.c-angle,
.c-credit,
.c-stripe,
.c-sign,
.c-rates,
.c-note {
  position: absolute;
}

.c-mark {
  left: 7cqw;
  top: 6.5cqw;
  font-family: var(--font-display);
  font-size: 6.5cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
}

.c-nfc {
  right: 7cqw;
  top: 6cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  opacity: 0.72;
  background: repeating-radial-gradient(circle at 0 100%, transparent 0 0.9cqw, currentColor 0.9cqw 1.35cqw, transparent 1.35cqw 1.75cqw);
  -webkit-mask: radial-gradient(circle at 0 100%, var(--color-ink-sheet) 4.6cqw, transparent 4.6cqw);
  mask: radial-gradient(circle at 0 100%, var(--color-ink-sheet) 4.6cqw, transparent 4.6cqw);
}

.c-chip {
  left: 7cqw;
  top: 21cqw;
  width: 11cqw;
  height: 8.5cqw;
  border-radius: 1.4cqw;
  --chip: color-mix(in oklab, currentColor 14%, transparent);
  --chip-line: color-mix(in oklab, currentColor 30%, transparent);
  background:
    linear-gradient(var(--chip-line), var(--chip-line)) 0 33% / 100% 0.35cqw no-repeat,
    linear-gradient(var(--chip-line), var(--chip-line)) 0 67% / 100% 0.35cqw no-repeat,
    linear-gradient(var(--chip-line), var(--chip-line)) 50% 0 / 0.35cqw 100% no-repeat,
    linear-gradient(var(--chip-line), var(--chip-line)) 50% 50% / 4cqw 0.35cqw no-repeat,
    var(--chip);
}

.c-angle {
  left: 6.5cqw;
  bottom: 5.5cqw;
  font-family: var(--font-display);
  font-size: 16cqw;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.c-credit {
  right: 7cqw;
  bottom: 7cqw;
  font-family: var(--font-display);
  font-size: 3cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
}

/* 뒷면 — ARC 180 만 보인다 */
.c-stripe {
  left: 0;
  right: 0;
  top: 6cqw;
  height: 11cqw;
  background: color-mix(in srgb, var(--color-ink-satin) 88%, transparent);
}

.c-sign {
  left: 7cqw;
  top: 21.5cqw;
  width: 46cqw;
  height: 7cqw;
  background: var(--color-rule-sheet);
}

.c-rates {
  left: 7cqw;
  right: 7cqw;
  top: 33cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4cqw 6cqw;
  font-family: var(--font-sans);
  font-size: 3.6cqw;
  line-height: 1.2;
  font-weight: 500;
}

.c-rates span {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-bottom: 0.8cqw;
}

.c-rates b {
  font-family: var(--font-display);
  font-weight: 600;
}

.c-note {
  left: 7cqw;
  bottom: 5cqw;
  font-size: 2.8cqw;
  line-height: 1;
  opacity: 0.8;
}

/* 판만 — 작은 견본(글자 없이 재질만) */
.sw {
  display: inline-block;
  flex: none;
  aspect-ratio: 85.6 / 53.98;
  width: 2.75rem;
  border-radius: 3px;
  box-shadow: var(--edge);
  container-type: inline-size;
}

.sw--v {
  aspect-ratio: 53.98 / 85.6;
}

@media (hover: hover) and (pointer: fine) {
  .cw {
    transition: translate 160ms var(--ease-out);
  }

  .cw:hover {
    translate: 0 -2px;
  }

  .cw:hover .face {
    box-shadow: var(--edge), var(--shadow-card-lift);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .cw:hover {
    translate: none;
  }
}

/* 반광 판의 광택 띠 — 스크롤에 묶인다(지원할 때만, 동작 줄이기면 고정) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .face.mat-satin {
      animation: gloss linear both;
      animation-timeline: view();
    }
  }
}

@keyframes gloss {
  from {
    background-position: 0 0, 100% 0, 0 0;
  }
  to {
    background-position: 0 0, 0% 0, 0 0;
  }
}

/* ── 홈 — 이야기(히어로 + 장 1–4) ───────────────────────────────────── */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.story > * {
  grid-column: 1;
}

.hero {
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding-top: calc(3.5rem + var(--spacing) * 6);
  padding-right: var(--spacing-gutter);
  padding-bottom: var(--spacing-block);
  padding-left: var(--spacing-gutter);
}

.hero__copy {
  display: grid;
  gap: calc(var(--spacing) * 4);
}

.hero h1 {
  margin-top: calc(var(--spacing) * 2);
}

.hero .lead {
  font-size: var(--text-base);
}

/* 부채꼴 덱 (<1024) — 세 장이 작은 호를 따라 겹친다. 뒤 장의 왼쪽(워드마크·각도)이 드러난다 */
.fan {
  position: relative;
  width: 100%;
  max-width: 35rem;
  aspect-ratio: 350 / 158;
  margin-top: calc(var(--spacing) * 7);
}

.fan .cw {
  position: absolute;
  width: 52%;
}

.fan .cw:nth-child(1) {
  left: 0;
  top: 17%;
  rotate: -8deg;
}

.fan .cw:nth-child(2) {
  left: 24%;
  top: 4%;
}

.fan .cw:nth-child(3) {
  left: 48%;
  top: 17%;
  rotate: 8deg;
}

/* 이름표 목록 (<1024) */
.names {
  margin-top: calc(var(--spacing) * 5);
  border-top: 1px solid var(--color-line);
  max-width: 35rem;
}

.names li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-line-faint);
}

.names .sw {
  grid-row: span 2;
  width: 2.5rem;
}

.names__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.3;
}

.names__fee {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.names__benefit {
  grid-column: 2 / 4;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink-muted);
}

.names__row--180 .names__name {
  color: var(--color-accent);
}

.hero .actions--m {
  margin-top: calc(var(--spacing) * 4);
}

.hero .actions--m .btn {
  flex: 1 1 auto;
  max-width: 20rem;
}

.hero__lead-r .actions {
  display: none;
}

/* 무대 — ≥1024 첫 화면(흐름 모드) · 붙는 무대(무대 모드) */
.stage {
  display: none;
}

.plate {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 160svh);
  aspect-ratio: 16 / 10;
  translate: -50% 0;
  container-type: size;
}

.arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1;
}

.arc * {
  vector-effect: non-scaling-stroke;
}

.arc .t-minor {
  stroke: var(--color-line-faint);
}

.arc .t-major {
  stroke-width: 1.5;
}

.deg,
.tl {
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * 1cqw);
  translate: -50% -50%;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.slot {
  position: absolute;
  left: 0;
  top: 0;
  --s: 1;
  transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) translate(-50%, -50%) rotate(var(--r)) scale(var(--s));
}

.slot .cw {
  width: 23.61cqw;
}

.slot--90 {
  --x: 20.43;
  --y: 40.01;
  --r: -28deg;
}

.slot--180 {
  --x: 50;
  --y: 32.64;
  --r: 0deg;
  z-index: 1;
}

.slot--360 {
  --x: 79.57;
  --y: 40.01;
  --r: 28deg;
}

/* 치수선 이름표 — 호에 닿은 점에서 내려오는 가는 선 → 이름 · 한 줄 혜택 · 연회비 */
.nts {
  position: absolute;
  inset: 0;
}

.nt {
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * 1cqw);
  padding-top: calc(var(--len) * 1cqw + var(--spacing) * 2.5);
  white-space: nowrap;
}

.nt::before,
.nt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}

.nt::before {
  width: 1px;
  height: calc(var(--len) * 1cqw);
  background: var(--color-line);
}

.nt::after {
  width: 5px;
  height: 5px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--color-ink);
}

.nt--90 {
  --x: 23.92;
  --y: 46.57;
  --len: 2.2;
  padding-left: 0.75rem;
}

.nt--180 {
  --x: 50;
  --y: 40.07;
  --len: 1.9;
  translate: -50% 0;
  text-align: center;
}

.nt--180::before,
.nt--180::after {
  left: 50%;
}

.nt--180::after {
  background: var(--color-accent);
}

.nt--360 {
  --x: 76.08;
  --y: 46.57;
  --len: 2.2;
  translate: -100% 0;
  padding-right: 0.75rem;
  text-align: right;
}

.nt--360::before,
.nt--360::after {
  left: auto;
  right: 0;
}

.nt--360::after {
  margin: -2px -2px 0 0;
}

.nt__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.nt--180 .nt__name {
  color: var(--color-accent);
}

.nt__benefit,
.nt__fee {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.nt__benefit {
  margin-top: calc(var(--spacing) * 1);
  color: var(--color-ink-muted);
}

.nt__fee {
  font-variant-numeric: tabular-nums;
}

/* 장 표시(도는 방향 치수) · 연회비 눈금자 — 무대 모드에서만 보인다 */
.turns {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1;
}

.turns * {
  vector-effect: non-scaling-stroke;
}

.turns g,
.tl,
.stage .ruler {
  opacity: 0;
}

.turns .turn--2 {
  stroke: var(--color-accent);
}

.turns .turn--3 circle {
  stroke-dasharray: 4 5;
}

.tl {
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.tl--1 {
  --x: 80;
  --y: 12.2;
}

.tl--2 {
  --x: 38;
  --y: 11.4;
  color: var(--color-accent);
}

.tl--3 {
  --x: 62;
  --y: 9.6;
}

/* 눈금자 — 로그 눈금 ₩10,000–₩300,000 */
/* 눈금자 선은 의사 요소 — 눈금이 선에 붙는 것이 맞다 */
.ruler {
  position: relative;
  height: 1px;
}

.ruler::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--color-line);
}

.stage .ruler {
  position: absolute;
  left: 12cqw;
  width: 76cqw;
  top: 50cqw;
}

.ruler__tick {
  position: absolute;
  top: 0;
  left: calc(var(--p) * 100%);
  width: 1px;
  height: calc(var(--spacing) * 2);
}

.ruler__tick::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-line-faint);
}

.ruler__tick.is-major {
  height: calc(var(--spacing) * 3.5);
}

.ruler__tick.is-major::before {
  background: var(--color-line);
}

.ruler__tick b {
  position: absolute;
  top: calc(100% + var(--spacing) * 1.5);
  left: 0;
  translate: -50% 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.ruler__card {
  position: absolute;
  top: calc(var(--spacing) * 10);
  left: calc(var(--p) * 100%);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: calc(var(--spacing) * 0.5);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
}

.ruler__card i {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.ruler__card--180 {
  color: var(--color-accent);
}

.ruler__card::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-bottom: calc(var(--spacing) * 1.5);
  border-radius: 50%;
  background: currentColor;
}

/* 눈금자 — 흐름 모드(인라인): 견본이 눈금 위에 선다 */
.ruler--inline {
  margin: calc(var(--spacing) * 28) 0 calc(var(--spacing) * 26);
}

.ruler--inline .sw {
  position: absolute;
  bottom: calc(100% + 1px);
  left: calc(var(--p) * 100%);
  translate: -50% 0;
  width: 2.75rem;
  box-shadow: var(--edge), var(--shadow-card);
}

.ruler--inline .ruler__card {
  top: calc(var(--spacing) * 9);
  font-size: var(--text-sm);
}

.ruler--inline .ruler__card i {
  font-size: var(--text-xs);
}

@media (max-width: 767px) {
  .ruler--inline {
    width: calc(100% - 3.5rem);
    margin-inline: 1.75rem;
  }

  .ruler--inline .ruler__tick b {
    display: none;
  }

  .ruler--inline .ruler__tick.is-major b {
    display: block;
  }

  .ruler--inline .ruler__card {
    top: calc(var(--spacing) * 8);
  }
}

/* 장 — 흐름 모드(기본). 카드가 위, 글이 아래(모바일) · 좌우 번갈아(≥768) */
.chapter {
  position: relative;
  z-index: 1;
  padding-top: var(--spacing-section);
  padding-right: var(--spacing-gutter);
  padding-bottom: 0;
  padding-left: var(--spacing-gutter);
}

.chapter__visual {
  display: grid;
  place-items: center;
  min-height: calc(min(18.75rem, 76vw) * 0.8);
  margin-bottom: var(--spacing-block);
  overflow: clip;
  overflow-clip-margin: 4rem;
}

.chapter__visual .cw {
  width: min(18.75rem, 76vw);
}

.chapter--90 .chapter__visual {
  min-height: calc(min(18.75rem, 76vw) + var(--spacing) * 6);
}

.chapter--360 .chapter__visual {
  min-height: calc(min(18.75rem, 76vw) * 0.95);
}

.chapter__text {
  max-width: 26rem;
}

.chapter__text h2 {
  margin-top: calc(var(--spacing) * 3);
}

.big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  color: var(--color-ink-muted);
}

.big b {
  font-family: var(--font-display);
  font-size: calc(var(--text-num) * 0.72);
  line-height: var(--text-num--line-height);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin-right: calc(var(--spacing) * 1.5);
}

.big--180 b {
  color: var(--color-accent);
}

.ch-where {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-base);
}

.spec {
  margin: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-line);
}

.spec div {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-line-faint);
  font-size: var(--text-sm);
}

.spec dt {
  color: var(--color-ink-muted);
}

.spec dd {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.spec--180 dd.is-accent {
  color: var(--color-accent);
}

/* 장 4 — 연회비 */
.chapter--lineup .chapter__text {
  max-width: 34rem;
}

.chapter--lineup p:not(.ch-no) {
  margin-top: calc(var(--spacing) * 3);
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .chapter:not(.chapter--lineup) {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: var(--spacing-block);
  }

  .chapter--180 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .chapter--180 .chapter__visual {
    order: 2;
  }

  .chapter__visual {
    margin-bottom: 0;
  }

  .chapter__visual .cw {
    width: min(var(--spacing-card-stage), 100%);
  }

  .chapter--90 .chapter__visual {
    min-height: min(var(--spacing-card-stage), 38vw);
  }

  .ruler--inline {
    max-width: 60rem;
  }
}

/* ≥1024 — 무대가 첫 화면이 된다(흐름 모드에서도). 부채꼴·이름표 목록 대신 호 위 세 장 + 치수선 이름표 */
@media (min-width: 1024px) {
  .hero {
    min-height: 100svh;
    padding-top: calc(var(--spacing-header) + var(--spacing) * 10);
    pointer-events: none;
  }

  .hero__copy {
    pointer-events: auto;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    column-gap: var(--spacing-block);
    max-width: 75rem;
  }

  .hero .lead {
    font-size: var(--text-lg);
  }

  .hero__lead-r .actions {
    display: flex;
    margin-top: calc(var(--spacing) * 5);
  }

  .fan,
  .names,
  .hero .actions--m {
    display: none;
  }

  .stage {
    display: block;
    grid-row: 1;
    position: relative;
    height: 100svh;
    overflow: clip;
  }
}

/* 무대 모드 — 무대가 붙고, 장이 그 위로 지나가며 data-chapter 를 바꾼다 */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .story[data-chapter] .stage {
    grid-row: 1 / 6;
    position: sticky;
    top: 0;
    align-self: start;
  }

  .story[data-chapter] .chapter {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: var(--spacing-header);
    padding-right: var(--spacing-gutter);
    padding-bottom: var(--spacing-header);
    padding-left: var(--spacing-gutter);
    pointer-events: none;
  }

  .story[data-chapter] .chapter--90 {
    grid-row: 2;
  }

  .story[data-chapter] .chapter--180 {
    grid-row: 3;
    justify-content: flex-end;
  }

  .story[data-chapter] .chapter--360 {
    grid-row: 4;
  }

  .story[data-chapter] .chapter--lineup {
    grid-row: 5;
    align-items: flex-start;
    padding-top: calc(var(--spacing-header) + var(--spacing) * 12);
  }

  .story[data-chapter] .chapter__visual,
  .story[data-chapter] .ruler--inline {
    display: none;
  }

  .story[data-chapter] .chapter__text {
    pointer-events: auto;
    width: min(24rem, 30vw);
  }

  .story[data-chapter] .chapter--lineup .chapter__text {
    width: min(30rem, 36vw);
  }

  /* 움직임 — 자리 옮기기는 600ms ease-out(먼저 비켜 선다: 장 글 칸 밑을 오래 지나가지 않게),
     이름대로 돌리기는 900ms ease-turn(360 은 1100ms), 물러나는 장은 120ms 뒤 흐려진다 */
  .story[data-chapter] .slot {
    will-change: transform;
    transition:
      transform 600ms var(--ease-out),
      opacity 280ms var(--ease-out) 120ms;
  }

  /* 장 4 — 눈금 위 착지는 80ms 계단 */
  .story[data-chapter="4"] .slot--180 {
    transition-delay: 80ms, 120ms;
  }

  .story[data-chapter="4"] .slot--360 {
    transition-delay: 160ms, 120ms;
  }

  .story[data-chapter] .slot .card {
    transition: transform 900ms var(--ease-turn);
  }

  .story[data-chapter] .slot--360 .card {
    transition-duration: 1100ms;
  }

  .story[data-chapter] .arc,
  .story[data-chapter] .deg,
  .story[data-chapter] .nts,
  .story[data-chapter] .turns g,
  .story[data-chapter] .tl,
  .story[data-chapter] .stage .ruler {
    transition: opacity 280ms var(--ease-out);
  }

  /* 장 1 — ARC 90 이 가운데로 와 90° 선다 */
  .story[data-chapter="1"] .slot--90 {
    --x: 62;
    --y: 32;
    --r: 0deg;
    --s: 1.235;
    z-index: 2;
  }

  .story[data-chapter="1"] .slot--90 .card {
    transform: rotate(90deg);
  }

  .story[data-chapter="1"] .slot--180 {
    --x: 95;
    --y: 19;
    --r: -6deg;
    --s: 0.8;
  }

  .story[data-chapter="1"] .slot--360 {
    --x: 95;
    --y: 45;
    --r: 8deg;
    --s: 0.8;
  }

  /* 장 2 — ARC 180 이 뒤집혀 뒷면(적립표) */
  .story[data-chapter="2"] .slot--180 {
    --x: 38;
    --y: 32;
    --r: 0deg;
    --s: 1.235;
    z-index: 2;
  }

  .story[data-chapter="2"] .slot--180 .card {
    transform: rotateY(180deg);
  }

  .story[data-chapter="2"] .slot--90 {
    --x: 5;
    --y: 19;
    --r: 6deg;
    --s: 0.8;
  }

  .story[data-chapter="2"] .slot--360 {
    --x: 5;
    --y: 45;
    --r: -8deg;
    --s: 0.8;
  }

  /* 장 3 — ARC 360 이 한 바퀴 돌아 앞면 */
  .story[data-chapter="3"] .slot--360 {
    --x: 62;
    --y: 32;
    --r: 0deg;
    --s: 1.235;
    z-index: 2;
  }

  .story[data-chapter="3"] .slot--360 .card {
    transform: rotate(360deg);
  }

  .story[data-chapter="3"] .slot--90 {
    --x: 95;
    --y: 19;
    --r: -6deg;
    --s: 0.8;
  }

  .story[data-chapter="3"] .slot--180 {
    --x: 95;
    --y: 45;
    --r: 8deg;
    --s: 0.8;
  }

  :is(.story[data-chapter="1"] :is(.slot--180, .slot--360), .story[data-chapter="2"] :is(.slot--90, .slot--360), .story[data-chapter="3"] :is(.slot--90, .slot--180)) {
    opacity: 0.28;
  }

  /* 장 4 — 세 장이 연회비 눈금 위에 세로로 선다 (눈금자 12–88cqw, 로그) */
  .story[data-chapter="4"] .slot--90 {
    --x: 21.06;
    --y: 38.19;
    --r: 0deg;
  }

  .story[data-chapter="4"] .slot--90 .card {
    transform: rotate(90deg);
  }

  .story[data-chapter="4"] .slot--180 {
    --x: 45.61;
    --y: 38.19;
    --r: 90deg;
  }

  .story[data-chapter="4"] .slot--360 {
    --x: 88;
    --y: 38.19;
    --r: 90deg;
  }

  .story[data-chapter="4"] .slot--360 .card {
    transform: rotate(360deg);
  }

  /* 도면 요소 — 장마다 보이는 것 */
  .story[data-chapter]:not([data-chapter="0"]) .nts,
  .story[data-chapter]:not([data-chapter="0"]) .deg {
    opacity: 0;
  }

  .story[data-chapter]:is([data-chapter="1"], [data-chapter="2"], [data-chapter="3"]) .arc {
    opacity: 0.3;
  }

  .story[data-chapter="4"] .arc {
    opacity: 0;
  }

  /* 도는 방향 치수는 카드가 비켜 선 뒤(300ms) 나타나고, 눈금자는 카드가 내려앉기 전에 먼저 깔린다 */
  .story[data-chapter="1"] .turn--1,
  .story[data-chapter="1"] .tl--1,
  .story[data-chapter="2"] .turn--2,
  .story[data-chapter="2"] .tl--2,
  .story[data-chapter="3"] .turn--3,
  .story[data-chapter="3"] .tl--3 {
    opacity: 1;
    transition-delay: 300ms;
  }

  .story[data-chapter="4"] .stage .ruler {
    opacity: 1;
  }
}

/* 흐름 모드의 인라인 카드 — 반쯤 보이면 한 번 이름대로(main.js 가 .is-turned) */
@media (prefers-reduced-motion: no-preference) {
  .chapter__visual .card {
    transition: transform 900ms var(--ease-turn);
  }

  .chapter--360 .chapter__visual .card {
    transition-duration: 1100ms;
  }

  .chapter--90 .chapter__visual.is-turned .card {
    transform: rotate(90deg);
  }

  .chapter--180 .chapter__visual.is-turned .card {
    transform: rotateY(180deg);
  }

  .chapter--360 .chapter__visual.is-turned .card {
    transform: rotate(360deg);
  }
}

/* 동작 줄이기 — 끝 상태로 정지. 180 은 뒤집는 대신 뒷면을 앞면 옆에 */
@media (prefers-reduced-motion: reduce) {
  .chapter--90 .chapter__visual .card {
    transform: rotate(90deg);
  }

  .chapter--180 .chapter__visual .cw,
  .flip .cw {
    width: min(46%, 17.5rem);
    margin-right: calc(min(46%, 17.5rem) + var(--spacing) * 3);
  }

  .chapter--180 .chapter__visual .card,
  .flip .card {
    transform-style: flat;
  }

  .chapter--180 .chapter__visual .face--back,
  .flip .face--back {
    transform: none;
    left: calc(100% + var(--spacing) * 3);
    right: calc(-100% - var(--spacing) * 3);
  }
}

/* 스크롤 드러내기 — 장 글 칸 · 시트 머리만 */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition:
      opacity 600ms var(--ease-out),
      translate 600ms var(--ease-out);
  }

  .js [data-reveal]:not(.is-in) {
    opacity: 0;
    translate: 0 12px;
  }
}

/* ── 시트 (서류) ────────────────────────────────────────────────────── */

/* 여백은 --spacing-sheet 의 clamp 곡선을 중단점 단계로 옮긴 값이다 — impeccable detect 가 calc()/clamp() 여백을 0 으로 읽는다 */
.sheet {
  background: var(--color-surface);
  color: var(--color-ink-sheet);
  border-radius: var(--radius-sheet);
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .sheet {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .sheet {
    padding: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .sheet {
    padding: 3rem;
  }
}

.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  border-top: 3px double var(--color-ink-sheet);
}

.sheet__head h2,
.sheet__head h3 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

.sheet__head p,
.sheet .small {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-sheet-muted);
}

.sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.sheet th,
.sheet td {
  padding-top: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0;
  border-bottom: 1px solid var(--color-rule-sheet);
  text-align: left;
  vertical-align: top;
}

.sheet thead :is(th, td) {
  border-bottom: 1px solid var(--color-ink-sheet);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-ink-sheet-muted);
}

.sheet .r {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sheet .a-ink {
  color: var(--color-accent-ink);
}

/* ── 홈 — 비교 ─────────────────────────────────────────────────────── */

.compare {
  position: relative;
  z-index: 1;
  padding-top: var(--spacing-block);
}

.cmp th[scope="col"] {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink-sheet);
  letter-spacing: 0.01em;
  width: 26%;
}

.cmp th[scope="col"].a-ink {
  color: var(--color-accent-ink);
}

.cmp th[scope="row"] {
  font-weight: 500;
  color: var(--color-ink-sheet-muted);
  width: 22%;
}

.cmp td {
  font-variant-numeric: tabular-nums;
}

.cmp tr.is-fee td {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cmp tr.is-fee td small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
}

.cmp tfoot td {
  border-bottom: 0;
  padding-top: 1.25rem;
}

.cmp-list {
  display: none;
}

@media (max-width: 767px) {
  .cmp {
    display: none;
  }

  .cmp-list {
    display: grid;
    gap: calc(var(--spacing) * 8);
  }

  .cmp-list h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    letter-spacing: 0.01em;
  }

  .cmp-list dl {
    margin-top: calc(var(--spacing) * 2);
    border-top: 1px solid var(--color-ink-sheet);
  }

  .cmp-list dl div {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--color-rule-sheet);
    font-size: var(--text-sm);
  }

  .cmp-list dt {
    color: var(--color-ink-sheet-muted);
    flex: none;
  }

  .cmp-list dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .cmp-list .link {
    margin-top: calc(var(--spacing) * 2);
  }
}

/* ── 구간 머리 (슬레이트 위) ─────────────────────────────────────── */

.sec {
  padding-top: var(--spacing-section);
}

.sec__head {
  display: grid;
  gap: calc(var(--spacing) * 3);
  max-width: 40rem;
  margin-bottom: var(--spacing-block);
}

.sec__head p:not(.ch-no) {
  color: var(--color-ink-muted);
}

/* ── 홈 — 공통 기능 (목록형, 칸 격자 아님) ─────────────────────────── */

.feats {
  border-top: 1px solid var(--color-line);
}

.feat {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line-faint);
}

.feat h3 {
  align-self: center;
}

.feat p {
  grid-column: 2;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
}

@media (min-width: 768px) {
  .feat {
    grid-template-columns: 3rem minmax(10rem, 16rem) minmax(0, 1fr);
    align-items: center;
  }

  .feat p {
    grid-column: 3;
  }
}

/* 선 도식 — 48px, 선 2~3개 */
.dg {
  position: relative;
  width: 3rem;
  height: 3rem;
  grid-row: span 2;
}

.dg::before,
.dg::after {
  content: "";
  position: absolute;
  border: 1px solid var(--color-line);
}

@media (min-width: 768px) {
  .dg {
    grid-row: auto;
  }
}

/* 잠금: 고리 + 몸통 */
.dg--lock::before {
  left: 15px;
  top: 6px;
  width: 18px;
  height: 16px;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

.dg--lock::after {
  left: 9px;
  top: 21px;
  width: 30px;
  height: 21px;
  border-radius: 2px;
  background: linear-gradient(var(--color-ink), var(--color-ink)) center / 1px 8px no-repeat;
}

/* 해외: 원 + 자오선 + 적도 */
.dg--globe::before {
  inset: 6px;
  border-radius: 50%;
  background: linear-gradient(var(--color-line), var(--color-line)) center / 100% 1px no-repeat;
}

.dg--globe::after {
  left: 17px;
  right: 17px;
  top: 6px;
  bottom: 6px;
  border-radius: 50%;
}

/* 가상 번호: 겹친 판 두 장 */
.dg--twin::before {
  left: 4px;
  top: 8px;
  width: 30px;
  height: 19px;
  border-radius: 3px;
}

.dg--twin::after {
  left: 14px;
  top: 20px;
  width: 30px;
  height: 19px;
  border-radius: 3px;
  border-style: dashed;
  border-color: var(--color-ink);
}

/* 결제일: 눈금 6 + 점 하나 */
.dg--days::before {
  left: 4px;
  right: 4px;
  top: 26px;
  height: 0;
  border-width: 1px 0 0;
}

.dg--days::after {
  left: 4px;
  width: 40px;
  top: 20px;
  height: 6px;
  border: 0;
  background:
    radial-gradient(circle, var(--color-ink) 3px, transparent 3.5px) 26.5px 50% / 8px 8px no-repeat,
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px) 0 0 / 7.8px 100% repeat-x;
}

/* ── 홈 — 이번 달 명세 ─────────────────────────────────────────────── */

.switch {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 2);
}

.switch a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: 44px;
  padding-top: 0;
  padding-right: 0.875rem;
  padding-bottom: 0;
  padding-left: 0.875rem;
  border: 1px solid var(--color-line-faint);
  border-radius: var(--radius-ui);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink-muted);
}

.switch a .sw {
  width: 1.5rem;
}

.switch a[aria-current="true"] {
  border-color: var(--color-ink);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.stmt [data-v] {
  display: none;
}

.stmt[data-card="90"] [data-v="90"],
.stmt[data-card="180"] [data-v="180"],
.stmt[data-card="360"] [data-v="360"] {
  display: inline;
}

.stmt__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-ink-sheet);
  margin-top: -1px;
}

.stmt__total b {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stmt__total .a-ink b,
.stmt__total b.a-ink {
  color: var(--color-accent-ink);
}

@media (max-width: 767px) {
  .stmt table,
  .stmt tbody,
  .stmt tr,
  .stmt td {
    display: block;
  }

  .stmt thead {
    display: none;
  }

  .stmt tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: calc(var(--spacing) * 4);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-rule-sheet);
  }

  .stmt td {
    padding: 0;
    border: 0;
  }

  .stmt td:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--text-xs);
    color: var(--color-ink-sheet-muted);
  }

  .stmt td:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    font-weight: 600;
  }

  .stmt td:nth-child(3) {
    display: none;
  }

  .stmt td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
  }

  .stmt td:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--text-xs);
  }
}

/* ── 홈 — 발급 3단계 ───────────────────────────────────────────────── */

.steps3 {
  display: grid;
  gap: calc(var(--spacing) * 8);
  border-top: 1px solid var(--color-line);
  padding-top: 2rem;
}

.steps3 li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: calc(var(--spacing) * 4);
  align-items: start;
}

.steps3 .ring {
  width: 3.5rem;
  height: 3.5rem;
  grid-row: span 3;
}

.steps3 b {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-muted);
}

.steps3 p {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.steps3 + p {
  margin-top: calc(var(--spacing) * 8);
}

.steps3 .time {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .steps3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-block);
  }
}

/* 진행 호 — 원 3등분(120°씩). pathLength=3 이라 한 조각 = 1 */
.ring {
  rotate: -90deg;
  fill: none;
  stroke-width: 2.5;
}

.ring circle {
  stroke-dashoffset: -0.035;
}

.ring__track {
  stroke: var(--color-line-faint);
  stroke-dasharray: 0.93 0.07;
}

.ring__past {
  stroke: var(--color-line);
  stroke-dasharray: 0 3;
}

.ring__cur {
  stroke: var(--color-ink);
  stroke-width: 3.5;
  stroke-dasharray: 0.93 2.07;
}

.ring--2 .ring__past {
  stroke-dasharray: 0.93 2.07;
}

.ring--3 .ring__past {
  stroke-dasharray: 0.93 0.07 0.93 1.07;
}

.ring--2 .ring__cur {
  stroke-dashoffset: -1.035;
}

.ring--3 .ring__cur {
  stroke-dashoffset: -2.035;
}

/* ── 홈 — 숫자로 본 ARC ───────────────────────────────────────────── */

.stats {
  display: grid;
  border-top: 1px solid var(--color-line);
}

.stat {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line-faint);
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: calc(var(--text-num) * 0.6);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat b small {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: calc(var(--spacing) * 1);
}

.stat p {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 3);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat {
    padding-right: 1.5rem;
    border-bottom: 0;
  }

  .stat + .stat {
    padding-left: 1.5rem;
    border-left: 1px solid var(--color-line-faint);
  }
}

.quotes {
  display: grid;
  gap: var(--spacing-block);
  margin-top: var(--spacing-block);
}

.quote p {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.quote footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote:nth-child(2) {
    margin-top: calc(var(--spacing) * 16);
  }
}

/* ── 홈 — 자주 묻는 질문 ───────────────────────────────────────────── */

.faq {
  max-width: 50rem;
}

.faq details {
  border-top: 1px solid var(--color-line-faint);
}

.faq details:first-child {
  border-top-color: var(--color-line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--color-line-faint);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 6);
  min-height: 64px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: rotate 200ms var(--ease-out);
}

.faq details[open] summary::after {
  rotate: 45deg;
}

.faq details p {
  padding-bottom: 1.5rem;
  max-width: 42rem;
  color: var(--color-ink-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content {
    transition:
      height 200ms var(--ease-out),
      content-visibility 200ms allow-discrete;
    height: 0;
    overflow: clip;
  }

  .faq details[open]::details-content {
    height: auto;
  }
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

/* ── 홈 — 마지막 CTA ───────────────────────────────────────────────── */

.cta {
  margin-top: var(--spacing-section);
  border-block: 1px solid var(--color-line);
  padding-top: var(--spacing-block);
  padding-bottom: var(--spacing-block);
}

.cta__in {
  display: grid;
  gap: var(--spacing-block);
  align-items: center;
}

.cta h2 {
  margin-top: 0;
}

.cta p:not(.ch-no) {
  margin: calc(var(--spacing) * 3) 0 calc(var(--spacing) * 6);
  color: var(--color-ink-muted);
}

.mini-arc {
  position: relative;
  aspect-ratio: 560 / 250;
  width: 100%;
  max-width: 35rem;
  justify-self: end;
}

.mini-arc svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1;
  overflow: visible;
}

.mini-arc svg * {
  vector-effect: non-scaling-stroke;
}

.mini-arc .cw {
  position: absolute;
  width: 30%;
  translate: -50% -50%;
}

.mini-arc .cw:nth-of-type(1) {
  rotate: -16deg;
}

.mini-arc .cw:nth-of-type(3) {
  rotate: 16deg;
}

@media (min-width: 900px) {
  .cta__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

/* ── 꼬리 ──────────────────────────────────────────────────────────── */

.foot {
  margin-top: var(--spacing-block);
  background: var(--color-bg-deep);
  padding-top: var(--spacing-block);
  padding-right: 0;
  padding-bottom: calc(var(--spacing-block) + env(safe-area-inset-bottom));
  padding-left: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.foot__in {
  display: grid;
  gap: calc(var(--spacing) * 8);
}

.foot .mark {
  color: var(--color-ink);
  font-size: var(--text-base);
}

.notice {
  border-top: 1px solid var(--color-line);
  padding-top: 1rem;
  max-width: 44rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.notice b {
  display: block;
  color: var(--color-ink);
  margin-bottom: calc(var(--spacing) * 1);
}

.sheet .notice {
  border-top-color: var(--color-ink-sheet);
  color: var(--color-ink-sheet-muted);
}

.sheet .notice b {
  color: var(--color-ink-sheet);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--spacing) * 6);
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink);
  text-decoration: none;
}

.foot__legal {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.foot__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink);
  text-underline-offset: 0.3em;
}

@media (min-width: 900px) {
  .foot__in {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .foot__links {
    justify-content: flex-end;
  }

  .foot__legal {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
    border-top: 1px solid var(--color-line-faint);
    padding-top: 1.25rem;
  }
}

/* ── 혜택 상세 — ARC 180 ────────────────────────────────────────── */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink);
  text-underline-offset: 0.3em;
}

.d-hero {
  display: grid;
  gap: var(--spacing-block);
  padding-top: 0.5rem;
}

.d-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-num);
  line-height: var(--text-num--line-height);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: calc(var(--spacing) * 4);
}

.d-hero .lead {
  margin-top: calc(var(--spacing) * 4);
  color: var(--color-ink);
}

.keys {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin-top: calc(var(--spacing) * 8);
  border-top: 1px solid var(--color-line);
}

.keys div {
  padding-top: 1rem;
  padding-right: 1.25rem;
  padding-bottom: 0;
}

.keys div + div {
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-line-faint);
}

.keys dt {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-ink-muted);
}

.keys dd {
  margin-top: calc(var(--spacing) * 1.5);
  font-family: var(--font-display);
  font-size: calc(var(--text-num) * 0.46);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.keys dd.is-accent {
  color: var(--color-accent);
}

.keys dd small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
}

.d-hero .actions {
  margin-top: calc(var(--spacing) * 8);
}

.d-hero__cond {
  margin-top: calc(var(--spacing) * 5);
}

/* 치수선이 붙은 큰 카드 */
.spec-card {
  position: relative;
  justify-self: center;
  width: min(100%, var(--spacing-card-lg));
  padding: 2.75rem 3.25rem 3.25rem 0;
  rotate: -6deg;
}

.spec-card .cw {
  width: 100%;
}

.dim {
  position: absolute;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink-muted);
}

.dim--w {
  left: 0;
  right: 3.25rem;
  top: 1rem;
  height: 9px;
  border-inline: 1px solid var(--color-line);
  background: linear-gradient(var(--color-line), var(--color-line)) 0 50% / 100% 1px no-repeat;
  display: grid;
  place-items: center;
}

.dim--h {
  right: 1rem;
  top: 2.75rem;
  bottom: 3.25rem;
  width: 9px;
  border-block: 1px solid var(--color-line);
  background: linear-gradient(var(--color-line), var(--color-line)) 50% 0 / 1px 100% no-repeat;
  display: grid;
  place-items: center;
}

.dim span {
  background: var(--color-bg);
  padding: 2px 8px;
  white-space: nowrap;
}

.dim--h span {
  writing-mode: vertical-rl;
  padding: 8px 2px;
}

.spec-card__note {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

@media (min-width: 1024px) {
  .d-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 0;
    min-height: calc(100svh - var(--spacing-header) - var(--spacing) * 8);
    padding-bottom: 3rem;
  }

  .d-hero__intro {
    grid-column: 1;
    grid-row: 1;
  }

  .d-hero__facts {
    grid-column: 1;
    grid-row: 2;
  }

  .spec-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }
}

@media (max-width: 1023px) {
  .d-hero {
    gap: calc(var(--spacing) * 6);
  }

  .d-hero .keys {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .keys div {
    padding-right: 0.875rem;
  }

  .keys div + div {
    padding-left: 0.875rem;
  }

  .spec-card {
    rotate: -3deg;
    padding: 2.25rem 2.25rem 2.5rem 0;
  }

  .dim--w {
    right: 2.25rem;
    top: 0.75rem;
  }

  .dim--h {
    right: 0.5rem;
    top: 2.25rem;
    bottom: 2.5rem;
  }

  .d-hero .actions .btn {
    flex: 1 1 auto;
  }
}

/* 적립 구조 */
.rates-head {
  display: grid;
  gap: var(--spacing-block);
  align-items: end;
  margin-bottom: var(--spacing-block);
}

.flip {
  justify-self: start;
}

.flip .cw {
  width: min(var(--spacing-card-hero), 82vw);
}

@media (min-width: 900px) {
  .rates-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .flip .card {
    transition: transform 800ms var(--ease-turn);
  }

  .flip.is-in .card {
    transform: rotateY(180deg);
  }
}

.rates td:first-child {
  font-weight: 600;
  width: 28%;
}

.bar {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-width: 11rem;
}

.bar__track {
  flex: 1;
  height: 6px;
  background: var(--color-rule-sheet);
}

.bar__fill {
  display: block;
  height: 100%;
  width: calc(var(--v) * 100%);
  background: var(--color-accent-ink);
  transform-origin: left center;
}

.bar b {
  flex: none;
  width: 3.25rem;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-accent-ink);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .bar__fill {
    transition: transform 600ms var(--ease-out);
    transition-delay: calc(var(--i) * 50ms);
  }

  .js .rates:not(.is-in) .bar__fill {
    transform: scaleX(0);
  }
}

.rates__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  padding-top: 1.25rem;
  font-size: var(--text-sm);
}

.rates__foot b {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .rates table,
  .rates tbody,
  .rates tr,
  .rates td {
    display: block;
  }

  .rates thead {
    display: none;
  }

  .rates tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 4);
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-rule-sheet);
  }

  .rates td {
    padding: 0;
    border: 0;
    width: auto !important;
  }

  .rates td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .rates td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .rates td:nth-child(4) {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-ink-sheet-muted);
  }

  .bar {
    min-width: 0;
  }
}

/* 계산 예 — 수식 한 줄 */
.calc {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 5) calc(var(--spacing) * 6);
  border-block: 1px solid var(--color-line);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.calc__term {
  display: grid;
  gap: calc(var(--spacing) * 2);
}

.calc__term small {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.calc__term b {
  font-family: var(--font-display);
  font-size: calc(var(--text-num) * 0.5);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.calc__term--sum b {
  color: var(--color-accent);
}

.calc__op {
  width: 1.5rem;
  height: calc(var(--text-num) * 0.5);
  display: grid;
  place-items: center;
  position: relative;
}

.calc__op::before,
.calc__op::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 1px;
  background: var(--color-line);
}

.calc__op--plus::after {
  rotate: 90deg;
}

.calc__op--eq::before {
  translate: 0 -4px;
}

.calc__op--eq::after {
  translate: 0 4px;
}

.calc-note {
  margin-top: calc(var(--spacing) * 5);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-width: 44rem;
}

@media (max-width: 767px) {
  .calc {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: calc(var(--spacing) * 4);
  }

  .calc__term:first-child {
    grid-column: 2;
  }

  .calc__op {
    height: 2rem;
  }
}

/* 제휴 8 — 목록 2열 × 4행 (로고 칸 없음) */
.partners {
  display: grid;
  border-top: 1px solid var(--color-line);
}

.partner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-line-faint);
}

.partner small {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.partner b {
  font-weight: 600;
}

.partner span {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.partner em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacing-block);
  }
}

/* 한도·유의사항 — 좁은 칼럼, 작은 글씨도 14px · 1.7 · 6.48:1 */
.terms ol {
  counter-reset: clause;
}

/* 조항 번호는 오른쪽 여백에 — 본문 칼럼은 68자 */
.terms li {
  counter-increment: clause;
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(3.25rem, 1fr);
  column-gap: calc(var(--spacing) * 6);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-rule-sheet);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-sheet-muted);
}

.terms li::before {
  content: "제" counter(clause) "조";
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink-sheet);
}

@media (max-width: 767px) {
  .terms li {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: calc(var(--spacing) * 4);
  }
}

.terms li b {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-sheet);
}

.terms .notice {
  margin-top: calc(var(--spacing) * 8);
  max-width: 68ch;
}

/* 다른 카드 — 위아래 줄 */
.others {
  border-top: 1px solid var(--color-line);
}

.other {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  align-items: center;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-line-faint);
}

.other .cw {
  width: min(var(--spacing-card-sm), 34vw);
  grid-row: span 2;
}

.other:nth-child(1) .cw {
  rotate: -4deg;
}

.other:nth-child(2) .cw {
  rotate: 5deg;
}

.other h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.other p {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.other .link {
  min-height: 44px;
}

@media (min-width: 768px) {
  .other {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: calc(var(--spacing) * 8);
  }

  .other .cw {
    grid-row: auto;
  }

  .other__fee {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

.d-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 6);
  margin-top: var(--spacing-section);
  padding-top: var(--spacing-block);
  padding-bottom: var(--spacing-block);
  border-block: 1px solid var(--color-line);
}

.d-cta h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

/* ── 발급 신청 ─────────────────────────────────────────────────────── */

.head--band {
  background: var(--color-bg-deep);
}

.head--band .head__what {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.head--band .link {
  margin-left: auto;
}

.apply {
  display: grid;
  gap: calc(var(--spacing) * 5);
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.prog {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}

.prog .ring {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.prog__now {
  font-size: var(--text-sm);
  font-weight: 600;
}

.prog__now b {
  font-family: var(--font-display);
  font-weight: 600;
  margin-right: calc(var(--spacing) * 2);
}

.prog__list {
  display: none;
}

/* 고른 카드 요약 — data-card 로 하나만 보인다 */
.sum [data-card],
.pick-text [data-card] {
  display: none;
}

.apply[data-card="90"] .sum [data-card="90"],
.apply[data-card="180"] .sum [data-card="180"],
.apply[data-card="360"] .sum [data-card="360"] {
  display: grid;
}

.apply[data-card="90"] .pick-text [data-card="90"],
.apply[data-card="180"] .pick-text [data-card="180"],
.apply[data-card="360"] .pick-text [data-card="360"] {
  display: inline;
}

.sum__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
}

.sum__card .cw {
  width: 4rem;
  grid-row: span 2;
}

.sum__card .cw .c-nfc,
.sum__card .cw .c-chip,
.sum__card .cw .c-credit,
.sum__card .cw .c-mark {
  display: none;
}

.sum__name {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.3;
}

.sum__benefit {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.sum__fee {
  grid-column: 2;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.sum .link {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  min-height: 44px;
}

.apply[data-card="180"] .sum__name {
  color: var(--color-accent);
}

/* 단계 본문 — 시트 */
.step {
  display: none;
}

.apply[data-step="1"] .step[data-step="1"],
.apply[data-step="2"] .step[data-step="2"],
.apply[data-step="3"] .step[data-step="3"] {
  display: block;
}

.apply__sheet {
  margin-inline: calc(var(--spacing-gutter) * -1 + var(--spacing) * 3);
}

.apply__note {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-sheet-muted);
  padding-bottom: 1rem;
}

.step h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  padding-top: 1rem;
  border-top: 3px double var(--color-ink-sheet);
}

.step h2:focus {
  outline: none;
}

.step h2:focus-visible {
  outline: 2px solid var(--color-focus-sheet);
}

.step__lead {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  color: var(--color-ink-sheet-muted);
}

.group {
  margin-top: calc(var(--spacing) * 8);
}

.group__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: calc(var(--spacing) * 3);
}

/* 카드 고르기 — 링크 3 */
.picks {
  display: grid;
  gap: calc(var(--spacing) * 2);
}

.picks a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
  min-height: 64px;
  padding-top: 0.75rem;
  padding-right: 1rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  border: 1px solid var(--color-rule-sheet);
  border-radius: var(--radius-ui);
  text-decoration: none;
}

.picks a[aria-current="true"] {
  border-color: var(--color-ink-sheet);
  box-shadow: inset 0 0 0 1px var(--color-ink-sheet);
}

.picks .sw {
  grid-row: span 2;
  width: 2.75rem;
}

.picks b {
  font-family: var(--font-display);
  font-weight: 600;
}

.picks .pk-ben {
  font-size: var(--text-xs);
  color: var(--color-ink-sheet-muted);
  grid-column: 2;
}

.picks .pk-fee-s {
  display: none;
}

.picks i {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-style: normal;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.picks a[aria-current="true"] i::before {
  content: "선택됨 · ";
  font-size: var(--text-xs);
  color: var(--color-ink-sheet-muted);
}

/* 1열(<640) — 세 줄 목록이 288px 를 먹어 첫 화면에서 입력 칸이 밀려났다(qa-1 P1-5).
   재질 견본 · 이름 · 연회비(짧은 표기)만 남긴 가로 세 칸으로 접는다. 혜택 문구는 읽기 도구에만 남는다 */
@media (max-width: 639px) {
  .picks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .picks a {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    gap: 0;
    min-height: 0;
    padding-top: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.75rem;
  }

  .picks .sw {
    grid-row: auto;
    width: 2.25rem;
    margin-bottom: calc(var(--spacing) * 2);
  }

  .picks b {
    font-size: var(--text-sm);
    line-height: 1.3;
  }

  .picks .pk-ben,
  .picks .pk-fee {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    grid-column: auto;
  }

  .picks i {
    grid-row: auto;
    grid-column: auto;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-ink-sheet-muted);
  }

  .picks .pk-fee-s {
    display: inline;
  }

  .picks a[aria-current="true"] i {
    color: var(--color-ink-sheet);
  }

  .picks a[aria-current="true"] i::before {
    content: none;
  }

  /* 고른 칸 — 테두리 두께에 더해 약관 동의와 같은 체크 선 */
  .picks a[aria-current="true"]::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    right: 0.875rem;
    width: 6px;
    height: 11px;
    border: solid var(--color-ink-sheet);
    border-width: 0 2px 2px 0;
    rotate: 45deg;
  }

  .apply {
    gap: calc(var(--spacing) * 4);
    padding-top: 1rem;
  }

  .apply .group {
    margin-top: calc(var(--spacing) * 6);
  }

  .apply__note {
    padding-bottom: 0.75rem;
  }
}

/* 입력 칸 모양 — 입력은 없다 */
.fields {
  display: grid;
  gap: calc(var(--spacing) * 4);
}

.field {
  display: grid;
  gap: calc(var(--spacing) * 2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  min-height: 52px;
  padding-top: 0;
  padding-right: 1rem;
  padding-bottom: 0;
  padding-left: 1rem;
  border: 1px solid var(--color-ink-sheet-muted);
  border-radius: var(--radius-ui);
  font-size: var(--text-base);
  color: var(--color-ink-sheet-muted);
  font-variant-numeric: tabular-nums;
}

.field__box .tag {
  flex: none;
}

@media (min-width: 640px) {
  .fields--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.row-btn {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  align-items: end;
}

.row-btn .field {
  flex: 1 1 14rem;
}

.fake-btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding-top: 0;
  padding-right: 1rem;
  padding-bottom: 0;
  padding-left: 1rem;
  border: 1px dashed var(--color-ink-sheet-muted);
  border-radius: var(--radius-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-sheet-muted);
}

/* 약관 동의 — 체크 모양 */
.agrees {
  border-top: 1px solid var(--color-rule-sheet);
}

.agrees li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-height: 48px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-rule-sheet);
  font-size: var(--text-sm);
}

.agrees li:first-child {
  font-weight: 600;
}

.check {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-ink-sheet);
  border-radius: 3px;
}

.check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--color-ink-sheet);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

.agrees small {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-ink-sheet-muted);
}

/* 분절 · 칩 (표시만) */
.seg,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}

.seg span,
.chips span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-top: 0;
  padding-right: 1rem;
  padding-bottom: 0;
  padding-left: 1rem;
  border: 1px solid var(--color-rule-sheet);
  border-radius: var(--radius-ui);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.seg .is-on,
.chips .is-on {
  border-color: var(--color-ink-sheet);
  background: var(--color-ink-sheet);
  color: var(--color-surface);
  font-weight: 600;
}

.step__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 10);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule-sheet);
}

.step__nav .btn {
  min-width: 8rem;
}

/* 완료 */
.receipt {
  display: grid;
  gap: calc(var(--spacing) * 1);
  margin-top: calc(var(--spacing) * 6);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-block: 1px solid var(--color-rule-sheet);
}

.receipt small {
  font-size: var(--text-xs);
  color: var(--color-ink-sheet-muted);
}

.receipt b {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.step .notice {
  margin-top: calc(var(--spacing) * 5);
}

.sched {
  display: grid;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 3);
  counter-reset: sched;
}

.sched li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  font-size: var(--text-sm);
}

.sched li b {
  font-variant-numeric: tabular-nums;
}

/* 단계 전환 — 앞으로는 왼쪽으로, 뒤로는 오른쪽으로 16px + 페이드 */
@media (prefers-reduced-motion: no-preference) {
  .apply[data-dir="fwd"] .step {
    animation: step-fwd 280ms var(--ease-out);
  }

  .apply[data-dir="back"] .step {
    animation: step-back 280ms var(--ease-out);
  }

  .ring__cur {
    transition: stroke-dashoffset 600ms var(--ease-turn);
  }

  .apply[data-dir] .sum [data-card] {
    animation: fade 200ms var(--ease-out);
  }

  .apply[data-step="3"] .sum .card {
    animation: spin 1100ms var(--ease-turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .apply[data-dir] .step {
    animation: fade 200ms linear;
  }
}

@keyframes step-fwd {
  from {
    opacity: 0;
    translate: 16px 0;
  }
}

@keyframes step-back {
  from {
    opacity: 0;
    translate: -16px 0;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 진행 호 — 단계 */
.apply[data-step="2"] .ring__past {
  stroke-dasharray: 0.93 2.07;
}

.apply[data-step="3"] .ring__past {
  stroke-dasharray: 0.93 0.07 0.93 1.07;
}

.apply[data-step="2"] .ring__cur {
  stroke-dashoffset: -1.035;
}

.apply[data-step="3"] .ring__cur {
  stroke-dashoffset: -2.035;
}

.apply[data-card="90"] .ring__cur {
  stroke: var(--color-plate-chalk);
}

.apply[data-card="180"] .ring__cur {
  stroke: var(--color-plate-satin);
}

.apply[data-card="360"] .ring__cur {
  stroke: var(--color-plate-onyx);
}

/* 완료 단계(모바일) — 고른 카드를 크게 */
@media (max-width: 767px) {
  .apply[data-step="3"] .sum__card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .apply[data-step="3"] .sum__name {
    grid-column: 1;
    grid-row: 2;
  }

  .apply[data-step="3"] .sum__fee {
    grid-column: 2;
    grid-row: 2;
  }

  .apply[data-step="3"] .sum__card .cw {
    width: min(15rem, 62vw);
    grid-row: auto;
    grid-column: 1 / -1;
    margin-block: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  }

  .apply[data-step="3"] .sum__card .cw .c-nfc,
  .apply[data-step="3"] .sum__card .cw .c-chip,
  .apply[data-step="3"] .sum__card .cw .c-credit,
  .apply[data-step="3"] .sum__card .cw .c-mark {
    display: block;
  }

  .apply[data-step="3"] .sum .link {
    display: none;
  }
}

@media (min-width: 768px) {
  .apply {
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: calc(var(--spacing) * 10);
    align-items: start;
  }

  .prog {
    grid-column: 1 / -1;
  }

  .apply__sheet {
    margin-inline: 0;
    grid-column: 1;
    grid-row: 2;
  }

  .sum {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: calc(var(--spacing) * 6);
  }

  .sum__card {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--spacing) * 2);
  }

  .sum__card .cw {
    width: 100%;
    grid-row: auto;
    margin-bottom: calc(var(--spacing) * 3);
  }

  .sum__card .cw .c-nfc,
  .sum__card .cw .c-chip,
  .sum__card .cw .c-credit,
  .sum__card .cw .c-mark {
    display: block;
  }

  .sum__benefit {
    display: block;
  }

  .sum__name,
  .sum__fee,
  .sum__benefit {
    grid-column: 1;
  }

  .sum .link {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

@media (min-width: 1200px) {
  .apply {
    grid-template-columns: 13rem minmax(0, 40rem) var(--spacing-card-sm);
    justify-content: space-between;
    column-gap: calc(var(--spacing) * 12);
  }

  .prog {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--spacing) * 6);
    display: grid;
    justify-items: start;
    gap: calc(var(--spacing) * 6);
  }

  .prog .ring {
    width: 8rem;
    height: 8rem;
  }

  .prog .ring circle {
    stroke-width: 1;
  }

  .prog .ring .ring__cur {
    stroke-width: 3.5;
  }

  .prog__now {
    display: none;
  }

  .prog__list {
    display: grid;
    border-top: 1px solid var(--color-line);
    width: 100%;
  }

  .prog__list li {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-height: 48px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-line-faint);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .prog__list li b {
    font-family: var(--font-display);
    font-weight: 600;
    width: 1.25rem;
  }

  .prog__list li[aria-current="step"] {
    color: var(--color-ink);
    font-weight: 700;
  }

  .prog__list li.is-done::after {
    content: "";
    margin-left: auto;
    width: 5px;
    height: 10px;
    border: solid var(--color-line);
    border-width: 0 1.5px 1.5px 0;
    rotate: 45deg;
    translate: -4px -2px;
  }

  .apply__sheet {
    grid-column: 2;
    grid-row: 1;
  }

  .sum {
    grid-column: 3;
    grid-row: 1;
  }
}