/* Cairn One (pebble-one) — style.css (4단계, frontend-dev)
 * 값은 tokens.css 의 var() 만 쓴다 — raw 색 0.
 * 격자 한 칸 = --mod-w × --mod-h (= 기기 폭 × 기기 높이의 절반).
 *   < 768px   2열, 화면 폭에 맞춰 축소 ("Not to scale")
 *   768–1199  5열, 화면 폭에 맞춰 축소 (배지가 실제 %를 말한다)
 *   ≥ 1200px  5열, 62 mm × --cal = 96 ppi 기준 실측 1:1. 창이 좁으면 min() 이 맞춰 줄이고 배지가 %로 바꿔 말한다.
 * 모든 도면·기기 크기는 --mod-w 에서 비례로 나온다 — 그래서 1:1 일 때 전부 함께 실측이 된다.
 * 비율 상수: 67.15/62 = 1.0830645(칸 높이) · 134.3/62(기기 높이) · 85.6/62 = 1.380645(ID-1 카드) · 8.2/62 · 10.2/62. */

:root {
  --cal: 1; /* 화면 보정 배율 — main.js 가 #cal= · 보정기로 바꾼다 */
  --cols: 2;
  --gut: max(var(--spacing-page-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  /* cqi 는 쓰는 자리에서 .page(컨테이너) 폭으로 풀린다 — 100vw 와 달리 스크롤바를 빼고 잰다 */
  --fit: calc((100cqi - 2 * var(--gut) - (var(--cols) + 1) * var(--spacing-hair)) / var(--cols));
  --mod-w: var(--fit);
  --mod-h: calc(var(--mod-w) * 1.0830645);
  --pad: var(--spacing-tile-pad-sm);
  --head-h: 3.25rem;
}

@media (min-width: 768px) {
  :root {
    --cols: 5;
    --pad: 1rem;
    --head-h: var(--spacing-header);
  }
}

@media (min-width: 1200px) {
  :root {
    --mod-w: min(calc(var(--spacing-module-w) * var(--cal)), var(--fit));
    --pad: var(--spacing-tile-pad);
  }

  .t.t--beside {
    padding-left: var(--pad);
  }
}

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

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

[hidden] {
  display: none !important;
}

html {
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: calc(var(--spacing-header) + 1.5rem);
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--font-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  container-type: inline-size;
  min-height: 100svh;
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

a,
button,
[role="slider"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

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

html {
  scrollbar-color: var(--color-ink-muted) var(--color-bg);
  caret-color: var(--color-accent);
}

sub {
  font-size: 0.72em;
  line-height: 0;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 0.5rem;
  left: var(--gut);
  z-index: 20;
  padding: 0.75rem 1rem;
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: var(--font-weight-medium);
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

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

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  font-weight: var(--font-weight-light);
  text-wrap: balance;
}

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

.say {
  font-size: var(--text-title);
  line-height: 1.3; /* --text-title 의 1.2 는 한 줄 제목용 — 이 글은 3~4줄이라 한 단계 연다 */
  letter-spacing: var(--text-title--letter-spacing);
  font-weight: var(--font-weight-light);
  text-wrap: pretty;
}

.cap {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

/* 숫자 — 한 칸에 사실 하나 */
.fig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.25em;
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--text-figure--line-height);
  letter-spacing: var(--text-figure--letter-spacing);
  font-weight: var(--font-weight-light);
  font-variant-numeric: tabular-nums;
}

.fig__n {
  white-space: nowrap;
}

.fig__u {
  font-size: var(--text-small);
  letter-spacing: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .fig {
    font-size: var(--text-figure);
    font-weight: var(--font-weight-extralight);
  }
}

.arr {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-state) var(--ease-out);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--spacing-target);
  padding-inline: 1.25rem;
  border: var(--spacing-hair) solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform var(--duration-press) var(--ease-out),
    background-color var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn--line {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--sq {
  width: var(--spacing-target);
  padding: 0;
  font-size: var(--text-title);
  font-weight: var(--font-weight-light);
}

@media (hover: hover) {
  .btn--primary:hover {
    background: var(--color-ink);
  }

  .btn--line:hover {
    background: var(--color-surface);
  }
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--spacing-target);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  white-space: nowrap;
}

@media (hover: hover) {
  .more:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }

  .more:hover .arr {
    transform: translateX(2px);
  }
}

/* ── 헤더 ─────────────────────────────────────────────────────────────── */

.head {
  background: var(--color-bg);
  border-bottom: var(--spacing-hair) solid var(--color-rule);
}

/* 고정은 옆 칸이 있는 폭에서만 — 1열에서는 내용을 덮는다 */
@media (min-width: 768px) {
  .head {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

.head__in {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(var(--cols) * var(--mod-w) + (var(--cols) + 1) * var(--spacing-hair));
  height: var(--head-h);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--spacing-target);
  color: var(--color-ink);
}

.brand__mark {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.brand__word {
  font-size: var(--text-title);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-medium);
}

.nav {
  display: flex;
  gap: 0.25rem;
  margin-inline: auto 0;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-target);
  padding-inline: 0.625rem;
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-medium);
}

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

.nav .nav__wide,
.head__price {
  display: none;
}

@media (hover: hover) {
  .nav a:hover {
    color: var(--color-ink);
  }
}

@media (min-width: 768px) {
  .head__in {
    gap: 1.25rem;
  }

  .nav {
    margin-inline: auto;
  }

  .nav .nav__wide {
    display: inline-flex;
  }

  .head__price {
    display: block;
    font-size: var(--text-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-muted);
  }

  .head__price .tnum {
    color: var(--color-ink);
  }
}

/* ── 구간 · 격자 · 칸 ─────────────────────────────────────────────────── */

main {
  padding-bottom: 1rem;
}

.band {
  margin-top: 3rem;
}

.band--hero,
.band--spec-top {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .band {
    margin-top: var(--spacing-band-gap);
  }

  .band--hero,
  .band--spec-top {
    margin-top: 2.5rem;
  }
}

/* 칸 사이 1px = 격자 바탕(--color-rule)이 비치는 틈. 칸은 항상 격자를 꽉 채운다 */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--mod-w));
  gap: var(--spacing-hair);
  width: max-content;
  margin-inline: auto;
  background: var(--color-rule);
  border: var(--spacing-hair) solid var(--color-rule);
}

.t {
  position: relative;
  min-width: 0;
  padding: var(--pad);
  background: var(--color-bg);
}

/* 구간 라벨 줄 — 번호·이름은 c1, 문장은 c2 칸의 글자 줄에 맞춘다 */
.lab {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--spacing-band-label);
}

.lab__h {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  font: inherit;
}

.lab__k {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.lab__k .tnum {
  margin-right: 0.5em;
  color: var(--color-ink);
}

.lab__line {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing);
  font-weight: var(--font-weight-light);
  color: var(--color-ink);
  text-wrap: balance;
}

.lab__size {
  display: none;
}

@media (min-width: 768px) {
  .lab {
    padding-block: 0.5rem;
  }

  .lab__h {
    display: grid;
    grid-template-columns: calc(var(--mod-w) + var(--spacing-hair) - var(--pad)) 1fr;
    align-items: baseline;
  }

  .lab__line {
    padding-left: var(--pad);
  }

  .lab__size {
    display: block;
    flex: none;
    font-size: var(--text-label);
    line-height: var(--text-label--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }
}

/* 칸 종류 */
.t--fact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: calc(var(--mod-h) * 0.66); /* 2열 축소 화면 — 실측이 아니니 빈 높이를 줄인다 */
}

@media (min-width: 768px) {
  .t--fact {
    min-height: var(--mod-h);
  }
}

.t--fact .cap {
  max-width: 24ch;
}

.t--fact-wide .cap {
  max-width: 36ch;
}

.t--text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.t--strip {
  justify-content: center;
}

.t--notice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-surface);
}

.notice__t {
  max-width: 62ch;
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  text-wrap: pretty;
}

.t--notice .cap {
  max-width: 62ch;
}

.t--notice .more {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* ── 자리표시자 (기기 · 매크로) ─────────────────────────────────────────── */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink-muted);
}

/* 기기 — 9:19.5, 칸 폭을 꽉 채운다. 모서리는 --radius-device(8.5 mm)를 기기 크기에 비례시킨 값: 8.5/62 · 8.5/134.3 */
.ph--device {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 13.71% / 6.33%;
}

/* 화면 윤곽 57.5 × 124.5 mm (가장자리 2.25 · 4.9 mm) + 펀치 홀 — 빈 상자가 아니라 "기기 자리" 로 읽힌다 */
.ph__screen {
  position: absolute;
  inset: 3.65% 3.63%;
  border: var(--spacing-hair) solid var(--color-rule);
  border-radius: 10.8% / 4.98%;
}

.ph__punch {
  position: absolute;
  top: 1.6%;
  left: 50%;
  width: 7%;
  aspect-ratio: 1;
  border: var(--spacing-hair) solid var(--color-ink-muted);
  border-radius: var(--radius-finish);
  transform: translateX(-50%);
}

.ph__label {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding-inline: 0.75rem;
  text-align: center;
}

.ph__ratio {
  font-size: var(--text-title);
  line-height: 1;
  font-weight: var(--font-weight-extralight);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.ph__use {
  font-size: var(--text-label);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-medium);
}

/* 매크로 1:1 — 사진이지 기기가 아니라 각졌다. 초점 괄호 두 개 */
.ph--macro {
  width: 100%;
  aspect-ratio: 1;
}

.ph__crop {
  position: absolute;
  inset: 7%;
}

.ph__crop::before,
.ph__crop::after {
  content: "";
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  border: 0 solid var(--color-ink-muted);
}

.ph__crop::before {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}

.ph__crop::after {
  right: 0;
  bottom: 0;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

/* ── 에셋 (2026-09-25) — 자리표시자 규칙(.ph*)은 에셋을 되돌릴 때를 위해 남겨 둔다 ───────────── */

/* 기기 사진 — 파일을 몸체 가장자리에 맞춰 자르고 62 : 134.3(= 9 : 19.5)으로 맞췄다. 모서리는 사진 안에 있다
   (모서리 밖은 투명) — 판 바탕·반경이 없어야 --radius-device 보다 둥근 사진 모서리에 바탕이 비치지 않는다 */
.dev__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19.5;
}

/* 사양 앞면 캡션 — 꺼진 화면(검은 유리) 위. 칸 = 기기라 칸 밖에 캡션 자리가 없다(NOTES #15 — 전에는 자리표시자 라벨 안) */
.dev__note {
  position: absolute;
  inset-inline: 12%;
  bottom: 8%;
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-bg);
  text-align: center;
  text-wrap: balance;
}

.media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-surface);
}

.t--media {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.media__cap {
  padding: 0.625rem var(--pad) var(--pad);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .media__cap {
    padding-bottom: 0;
  }
}

/* ── 히어로 ───────────────────────────────────────────────────────────── */

.band--hero .grid {
  grid-template-areas:
    "dev intro"
    "dev intro"
    "cta cta"
    "f1 f2"
    "f3 f4";
}

@media (min-width: 768px) {
  .band--hero .grid {
    grid-template-areas:
      "intro intro dev f1 f2"
      "intro intro dev f3 f4";
    grid-template-rows: repeat(2, minmax(var(--mod-h), auto));
  }
}

.t--intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.intro__low {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

.price__from {
  white-space: nowrap;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.price__fig {
  font-size: var(--text-title);
  line-height: 1;
  letter-spacing: var(--text-figure--letter-spacing);
  font-weight: var(--font-weight-light);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.actions {
  display: none;
}

.scale {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.scale a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.scale--dev {
  display: none;
}

.t--dev {
  padding: 0;
}

.dev {
  position: relative;
}

.dim {
  display: none;
}

.t--cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.btn--wide {
  flex: 1;
}

@media (min-width: 768px) {
  .intro__low {
    gap: 1rem;
  }

  .price__fig {
    font-size: var(--text-figure);
    font-weight: var(--font-weight-extralight);
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
  }

  .scale--intro,
  .t--cta {
    display: none;
  }

  /* 배지 — 기기 칸 아래, 격자 밖 */
  .scale--dev {
    display: block;
    position: absolute;
    top: calc(100% + var(--spacing-hair) + 0.625rem);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* 치수선 — 칸 경계선 위에 올라탄다. 끝 눈금 두 개 + 라벨 */
  .dim {
    display: block;
    position: absolute;
    z-index: 2;
    color: var(--color-ink-muted);
  }

  .dim__line {
    position: absolute;
    inset: 0;
    background: currentColor;
  }

  .dim::before,
  .dim::after {
    content: "";
    position: absolute;
    background: currentColor;
  }

  .dim__label {
    position: absolute;
    font-size: var(--text-label);
    line-height: 1;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .dim--h {
    top: calc(-1 * var(--spacing-hair));
    left: 0;
    right: 0;
    height: var(--spacing-hair);
  }

  .dim--h::before,
  .dim--h::after {
    bottom: 0;
    width: var(--spacing-hair);
    height: 0.625rem;
  }

  .dim--h::before {
    left: 0;
  }

  .dim--h::after {
    right: 0;
  }

  .dim--h .dim__label {
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .dim--v {
    top: 0;
    bottom: 0;
    left: 100%;
    width: var(--spacing-hair);
  }

  .dim--v::before,
  .dim--v::after {
    left: 0;
    width: 0.625rem;
    height: var(--spacing-hair);
  }

  .dim--v::before {
    top: 0;
  }

  .dim--v::after {
    bottom: 0;
  }

  .t--beside {
    padding-left: 1.75rem;
  }

  .dim--v .dim__label {
    top: 50%;
    left: 0.5rem;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
  }
}

/* 치수선 Line drawing — 로드 1회, 가운데서 양끝으로. 동작 줄이기면 처음부터 그려져 있다 */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .dim__line {
    animation: dim-draw-x var(--duration-draw) var(--ease-draw) 200ms both;
  }

  .dim--v .dim__line {
    animation-name: dim-draw-y;
  }

  .dim::before,
  .dim::after,
  .dim__label {
    animation: dim-fade var(--duration-reveal) var(--ease-out) 560ms both;
  }
}

@keyframes dim-draw-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes dim-draw-y {
  from {
    transform: scaleY(0);
  }
}

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

/* ── 01 카메라 ────────────────────────────────────────────────────────── */

.band--camera .grid {
  grid-template-areas:
    "lab lab"
    "mac mac"
    "tx tx"
    "f1 f2"
    "f3 f4";
}

@media (min-width: 768px) {
  .band--camera .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "mac mac f1 tx tx"
      "mac mac f2 f3 f4";
    grid-template-rows: minmax(var(--spacing-band-label), auto) repeat(2, minmax(var(--mod-h), auto));
  }
}

/* ── 02 디스플레이 — 도면(c1 실측) + 글(c2–3) ──────────────────────────── */

.band--display .grid {
  grid-template-areas:
    "lab lab"
    "dia dia"
    "f1 f2"
    "cal cal";
}

@media (min-width: 768px) {
  .band--display .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "dia dia dia f1 f2"
      "dia dia dia cal cal";
    grid-template-rows: minmax(var(--spacing-band-label), auto) repeat(2, minmax(var(--mod-h), auto));
  }
}

.t--draw {
  padding: 0;
}

.band--display .t--draw {
  display: grid;
  grid-template-columns: var(--mod-w) 1fr;
}

.sheet {
  position: relative;
  width: var(--mod-w);
  aspect-ratio: 62 / 134.3;
}

.sheet__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sheet__svg * {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sheet__svg .ln {
  stroke: var(--color-ink);
}

.sheet__svg .ln-soft {
  stroke: var(--color-ink-muted);
}

.sheet__svg .ln-dash {
  stroke: var(--color-ink-muted);
  stroke-dasharray: 3 3;
}

.sheet__svg .ln-accent {
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.sheet__svg .dot-ink {
  fill: var(--color-ink);
  stroke: none;
}

/* 라벨은 HTML — 도면이 줄어도 글자는 12px 로 남는다. 바탕색 판이 선을 끊는다 */
.sheet__lb {
  position: absolute;
  padding: 0.125rem 0.25rem;
  background: var(--color-bg);
  font-size: var(--text-label);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* 대각선 위 30 % 지점(19.5, 42.25 mm) · 기울기 atan(124.5/57.5) */
.sheet__lb--diag {
  top: 31.46%;
  left: 31.45%;
  transform: translate(-50%, -50%) rotate(65.2deg);
}

/* 반경 선의 가운데(33.2, 102.9 mm) */
.sheet__lb--reach {
  top: 76.6%;
  left: 53.5%;
  text-align: center;
  color: var(--color-ink);
}

.sheet__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: var(--pad);
}

.sheet__fig {
  display: grid;
  gap: 0.75rem;
}

/* 화면 보정기 — ID-1 카드 85.60 × 53.98 mm. 카드 = --mod-w × 1.380645 이라 1:1 일 때 실측 */
.t--cal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card {
  position: relative;
  width: min(100%, calc(var(--mod-w) * 1.380645));
  aspect-ratio: 85.6 / 53.98;
  padding: 0.75rem;
  border: var(--spacing-hair) solid var(--color-ink-muted);
  border-radius: 3.715% / 5.89%; /* 3.18 mm 모서리 */
}

.card__t {
  display: none;
  max-width: 24ch;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.card__dim {
  position: absolute;
  left: 0.75rem;
  bottom: 0.625rem;
  font-size: var(--text-label);
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.card__grip,
.cal {
  display: none;
}

.cal__note {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-muted);
  max-width: 44ch;
}

@media (min-width: 1200px) {
  .t--cal {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 0 0 calc(var(--mod-w) * 0.0968); /* 6 mm */
  }

  .card__t {
    display: block;
  }

  /* 손잡이 — 카드 오른쪽 아래 모서리. 끌면 --cal 이 바뀌고 격자 전체가 함께 커진다 */
  .card__grip {
    display: block;
    position: absolute;
    right: calc(-1 * var(--spacing-hair));
    bottom: calc(-1 * var(--spacing-hair));
    width: var(--spacing-target);
    height: var(--spacing-target);
    border-radius: var(--radius-control);
    cursor: nwse-resize;
    touch-action: none;
  }

  .card__grip::before {
    content: "";
    position: absolute;
    right: 0.4375rem;
    bottom: 0.4375rem;
    width: 0.875rem;
    height: 0.875rem;
    border-right: 2px solid var(--color-ink);
    border-bottom: 2px solid var(--color-ink);
  }

  .cal {
    display: grid;
    grid-template-columns: repeat(2, var(--spacing-target));
    gap: 0.375rem;
    margin-inline: auto;
  }

  .cal__read {
    grid-column: 1 / -1;
    font-size: var(--text-title);
    line-height: 1.2;
    font-weight: var(--font-weight-light);
    text-align: center;
  }

  .cal [data-cal-reset] {
    grid-column: 1 / -1;
    width: auto;
    font-size: var(--text-small);
    font-weight: var(--font-weight-medium);
  }

  .cal__note {
    display: none;
  }
}

/* ── 03 배터리 — 옆면 실측 + 사용 시간 ─────────────────────────────────── */

.band--battery .grid {
  grid-template-areas:
    "lab lab"
    "side bars"
    "f1 f2"
    "sw sw";
}

@media (min-width: 768px) {
  .band--battery .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "side bars bars f1 f2"
      "side bars bars sw sw";
    grid-template-rows: minmax(var(--spacing-band-label), auto) repeat(2, minmax(var(--mod-h), auto));
  }
}

/* 옆면 — 기기 높이 134.3 mm 를 칸 두 줄이 그대로 받는다. 두께 8.2 / 10.2 mm, 모서리 3 mm */
.side {
  display: flex;
  justify-content: center;
  gap: calc(var(--mod-w) * 0.2258); /* 14 mm */
  width: var(--mod-w);
  aspect-ratio: 62 / 134.3;
}

.side__bar {
  position: relative;
  height: 100%;
  border: var(--spacing-hair) solid var(--color-ink);
  transition: opacity var(--duration-state) var(--ease-in-out);
}

.side__bar--one {
  width: calc(var(--mod-w) * 0.13226);
  border-radius: 36.6% / 2.23%;
}

.side__bar--long {
  width: calc(var(--mod-w) * 0.16452);
  border-radius: 29.4% / 2.23%;
}

.side__lb {
  position: absolute;
  top: 50%;
  left: 50%;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%) rotate(180deg);
  font-size: var(--text-label);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* 사용 시간 — 막대 2개, 눈금 12 h 마다 머리카락 선 */
.t--chart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chart__t {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.chart {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 15rem;
}

.chart__plot {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: space-around;
  margin: 1.75rem 0 0 2.25rem;
}

.chart__tick {
  position: absolute;
  left: -2.25rem;
  right: 0;
  bottom: calc(var(--y) / 48 * 100%);
  display: grid;
  grid-template-columns: 1.875rem 1fr;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-label);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
  text-align: right;
  transform: translateY(50%);
}

.chart__tick::after {
  content: "";
  border-top: var(--spacing-hair) solid var(--color-rule);
}

.chart__col {
  position: relative;
  z-index: 1;
  width: clamp(1.75rem, 24%, 4rem);
  height: calc(var(--v) / 48 * 100%);
  border: var(--spacing-hair) solid var(--color-ink);
  border-bottom: 0;
  background: var(--color-surface);
}

.chart__v {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  font-size: var(--text-small);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transform: translateX(-50%);
}

.chart__keys {
  display: flex;
  justify-content: space-around;
  margin-left: 2.25rem;
  padding-top: 0.5rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

/* ── 04 소재 ──────────────────────────────────────────────────────────── */

.band--material .grid {
  grid-template-areas:
    "lab lab"
    "f1 f2"
    "f3 f4"
    "f5 f5"
    "tx tx";
}

@media (min-width: 768px) {
  .band--material .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "f1 f2 f3 f4 f5"
      "tx tx tx tx tx";
    grid-template-rows: minmax(var(--spacing-band-label), auto) minmax(var(--mod-h), auto) minmax(calc(var(--mod-h) / 2), auto);
  }
}

/* ── 05 색상 ──────────────────────────────────────────────────────────── */

.band--colour .grid {
  grid-template-areas:
    "lab lab"
    "back nm"
    "ls ls";
}

@media (min-width: 768px) {
  .band--colour .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "nm nm back ls ls"
      "nm nm back ls ls";
    grid-template-rows: minmax(var(--spacing-band-label), auto) repeat(2, minmax(var(--mod-h), auto));
  }
}

.t--name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.name__n {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: 1;
  letter-spacing: var(--text-figure--letter-spacing);
  font-weight: var(--font-weight-light);
}

.name__code {
  margin-top: 0.5rem;
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.name__say {
  margin-top: 1rem;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .name__n {
    font-size: var(--text-figure);
    font-weight: var(--font-weight-extralight);
  }

  .name__say {
    max-width: 22ch;
    font-size: var(--text-title);
    line-height: var(--text-title--line-height);
    letter-spacing: var(--text-title--letter-spacing);
    font-weight: var(--font-weight-light);
  }
}

/* 뒷면 — 마감 색 판 4장을 겹쳐 두고 opacity 로 Crossfade */
.ph--back {
  color: var(--color-ink);
}

.plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-finish) var(--ease-in-out);
}

.plate--chalk {
  background: var(--color-plate-chalk);
}

.plate--basalt {
  background: var(--color-plate-basalt);
}

.plate--lichen {
  background: var(--color-plate-lichen);
}

.plate--clay {
  background: var(--color-plate-clay);
}

.ph--back[data-plate="chalk"] .plate--chalk,
.ph--back[data-plate="basalt"] .plate--basalt,
.ph--back[data-plate="lichen"] .plate--lichen,
.ph--back[data-plate="clay"] .plate--clay {
  opacity: 1;
}

.ph--back[data-plate="basalt"] {
  color: var(--color-bg);
}

.ph--back .ph__ratio,
.ph--back .ph__use {
  color: inherit;
}

/* 뒷면 사진 4장 — 겹쳐 두고 선택된 한 장만 보인다. 나머지는 visibility 로 숨긴다(opacity 0 이면 읽기 도구가 네 장을 다 읽는다) */
.backs {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
}

.backs .dev__img {
  position: absolute;
  inset: 0;
  height: 100%;
  visibility: hidden;
}

.backs[data-plate="chalk"] [data-back="chalk"],
.backs[data-plate="basalt"] [data-back="basalt"],
.backs[data-plate="lichen"] [data-back="lichen"],
.backs[data-plate="clay"] [data-back="clay"] {
  z-index: 1;
  visibility: visible;
}

/* Crossfade — 새 장이 위에서 swap(opacity 0→1)으로 들어오고, 옛 장은 그동안 아래에 남았다가 숨는다.
   둘을 같이 반투명으로 돌리면 가운데서 흰 바탕이 비친다 */
@media (prefers-reduced-motion: no-preference) {
  .backs .dev__img {
    transition: visibility 0s linear var(--duration-finish);
  }

  /* 숨는 쪽만 늦춘다 — 들어오는 쪽은 바로 visible 이어야 swap 이 보인다 */
  .backs[data-plate="chalk"] [data-back="chalk"],
  .backs[data-plate="basalt"] [data-back="basalt"],
  .backs[data-plate="lichen"] [data-back="lichen"],
  .backs[data-plate="clay"] [data-back="clay"] {
    transition-delay: 0s;
  }

  .backs .dev__img.is-swap {
    animation-duration: var(--duration-finish);
  }
}

/* 카메라 섬 — 1.1 mm, 거의 평평. 선만 */
.ph__island {
  position: absolute;
  top: 3.5%;
  left: 8%;
  width: 38%;
  aspect-ratio: 1;
  border: var(--spacing-hair) solid currentColor;
  border-radius: 24%;
  opacity: 0.55;
}

.ph__island span {
  position: absolute;
  aspect-ratio: 1;
  border: var(--spacing-hair) solid currentColor;
  border-radius: var(--radius-finish);
}

.ph__island span:first-child {
  top: 12%;
  left: 12%;
  width: 50%;
}

.ph__island span:last-child {
  right: 14%;
  bottom: 14%;
  width: 22%;
}

/* 마감 목록 — 4줄 버튼 */
.t--list {
  padding: 0;
}

.fins {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fins li {
  display: flex;
  flex: 1;
}

.fins li + li {
  border-top: var(--spacing-hair) solid var(--color-rule);
}

.fin {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.5rem var(--pad);
  text-align: left;
  transition: background-color var(--duration-state) var(--ease-out);
}

.fin[aria-pressed="true"] {
  background: var(--color-surface-accent);
}

/* 선택 표시는 칩 둘레의 강조 고리 — 예약 칩과 같은 말투. 옆 줄무늬(side-tab)는 쓰지 않는다 */
.fin .chip {
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color var(--duration-state) var(--ease-out);
}

.fin[aria-pressed="true"] .chip {
  outline-color: var(--color-accent);
}

.fin[aria-pressed="true"] .fin__c {
  color: var(--color-ink);
}

.fin__n {
  font-size: var(--text-title);
  line-height: 1.1;
  font-weight: var(--font-weight-light);
}

.fin__c {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

@media (hover: hover) {
  .fin:hover {
    background: var(--color-surface);
  }

  .fin[aria-pressed="true"]:hover {
    background: var(--color-surface-accent);
  }
}

.chip {
  display: block;
  width: 1.75rem;
  aspect-ratio: 1;
  border-radius: var(--radius-finish);
}

.chip--chalk {
  background: var(--color-plate-chalk);
  border: var(--spacing-hair) solid var(--color-ink-muted); /* 흰 바탕과 1.27:1 — 테두리로 선다 */
}

.chip--basalt {
  background: var(--color-plate-basalt);
}

.chip--lichen {
  background: var(--color-plate-lichen);
}

.chip--clay {
  background: var(--color-plate-clay);
}

/* ── 06 가격 ──────────────────────────────────────────────────────────── */

.band--price .grid {
  grid-template-areas:
    "lab lab"
    "one one"
    "long long"
    "cmp cmp";
}

@media (min-width: 768px) {
  .band--price .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "one one long long cmp";
    grid-template-rows: minmax(var(--spacing-band-label), auto) minmax(var(--mod-h), auto);
  }
}

.t--model {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.model__n {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing);
  font-weight: var(--font-weight-light);
}

.model__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.model__rows dt {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.model__rows dd {
  margin-top: 0.5rem;
  font-size: var(--text-title);
  line-height: 1;
  letter-spacing: var(--text-figure--letter-spacing);
  font-weight: var(--font-weight-light);
  color: var(--color-accent);
}

@media (min-width: 768px) {
  /* 두 값을 격자 열에 맞춘다 — 둘째 값은 c2(c4) 칸의 글자 줄에서 시작 */
  .model__rows {
    grid-template-columns: calc(var(--mod-w) + var(--spacing-hair) - var(--pad)) 1fr;
  }

  .model__rows > div + div {
    padding-left: var(--pad);
  }

  .model__rows dd {
    font-size: var(--text-figure);
    font-weight: var(--font-weight-extralight);
  }
}

.t--link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 7rem;
  color: var(--color-ink);
  transition: background-color var(--duration-state) var(--ease-out);
}

.t--link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.link__t {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing);
  font-weight: var(--font-weight-light);
}

.arr--big {
  align-self: flex-end;
  width: 2rem;
  height: 2rem;
  stroke-width: 1.25;
}

@media (hover: hover) {
  .t--link:hover {
    background: var(--color-surface);
  }

  .t--link:hover .arr--big {
    transform: translateX(2px);
  }
}

/* ── 07 예약 ──────────────────────────────────────────────────────────── */

.band--reserve .grid {
  grid-template-areas:
    "lab lab"
    "m m"
    "f f"
    "s s"
    "sum sum";
}

@media (min-width: 768px) {
  .band--reserve .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "m f s sum sum";
    grid-template-rows: minmax(var(--spacing-band-label), auto) minmax(var(--mod-h), auto);
  }
}

.t--step,
.t--show {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.step__k {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.step__k .tnum {
  margin-right: 0.5em;
  color: var(--color-ink);
}

.seg {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 0.5rem;
}

.seg__b {
  min-height: var(--spacing-target);
  padding: 0.5rem 0.875rem;
  border: var(--spacing-hair) solid var(--color-ink-muted);
  border-radius: var(--radius-control);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform var(--duration-press) var(--ease-out),
    background-color var(--duration-state) var(--ease-in-out),
    color var(--duration-state) var(--ease-in-out),
    border-color var(--duration-state) var(--ease-in-out);
}

.seg__b:active {
  transform: scale(0.98);
}

.seg__b[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-bg);
}

@media (hover: hover) {
  .seg__b:hover {
    border-color: var(--color-ink);
  }
}

@media (min-width: 768px) {
  .t--step .seg {
    grid-auto-flow: row;
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
}

.chipbtn {
  display: grid;
  place-items: center;
  width: var(--spacing-target);
  height: var(--spacing-target);
  border: 2px solid transparent;
  border-radius: var(--radius-finish);
  transition:
    transform var(--duration-press) var(--ease-out),
    border-color var(--duration-state) var(--ease-out);
}

.chipbtn:active {
  transform: scale(0.96);
}

.chipbtn[aria-pressed="true"] {
  border-color: var(--color-accent);
}

.step__v {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

.t--sum {
  display: grid;
}

.sum {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  grid-area: 1 / 1;
}

.sum__line,
.sum__done {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing);
  font-weight: var(--font-weight-light);
}

.sum__say {
  max-width: 34ch;
  color: var(--color-ink-muted);
}

.sum__price {
  font-size: var(--text-figure);
  line-height: 1;
  letter-spacing: var(--text-figure--letter-spacing);
  font-weight: var(--font-weight-extralight);
  color: var(--color-accent);
}

.sum__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* 가격·보기 전환 Crossfade — main.js 가 바뀐 자리에 .is-swap 을 붙인다 */
@media (prefers-reduced-motion: no-preference) {
  .is-swap {
    animation: swap var(--duration-state) var(--ease-in-out);
  }

  .name.is-swap {
    animation-duration: var(--duration-finish);
  }
}

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

/* ── 고지 ─────────────────────────────────────────────────────────────── */

.band--notice .grid,
.band--about .grid {
  grid-template-areas: "no no";
}

.band--about .grid {
  grid-template-areas:
    "lab lab"
    "no no";
}

@media (min-width: 768px) {
  .band--notice .grid {
    grid-template-areas: "no no no no no";
    grid-template-rows: minmax(calc(var(--mod-h) / 2), auto);
  }

  .band--about .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "no no no no no";
    grid-template-rows: minmax(var(--spacing-band-label), auto) minmax(calc(var(--mod-h) / 2), auto);
  }
}

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

.foot {
  margin-top: 3rem;
  border-top: var(--spacing-hair) solid var(--color-rule);
}

.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  width: calc(var(--cols) * var(--mod-w) + (var(--cols) + 1) * var(--spacing-hair));
  margin-inline: auto;
  padding-block: 1rem calc(1.5rem + env(safe-area-inset-bottom));
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-muted);
}

.foot__in .brand__word {
  font-size: var(--text-lead);
}

.foot__nav {
  display: flex;
  gap: 0.25rem;
  margin-right: auto;
}

.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-target);
  padding-inline: 0.5rem;
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

.foot__c a {
  padding: 0.875rem 0.125rem; /* 글 줄 안의 링크 — 줄 높이는 그대로, 누르는 면만 44px 로 */
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

@media (min-width: 768px) {
  .foot {
    margin-top: var(--spacing-band-gap);
  }
}

/* ══ 사양 페이지 ═══════════════════════════════════════════════════════ */

.band--spec-top .grid {
  grid-template-areas:
    "ti ti"
    "sh sh"
    "lab lab"
    "fr sd"
    "tb tb";
}

@media (min-width: 768px) {
  .band--spec-top .grid {
    grid-template-areas:
      "ti ti ti sh sh"
      "lab lab lab lab lab"
      "fr sd tb tb tb"
      "fr sd tb tb tb";
    grid-template-rows:
      minmax(calc(var(--mod-h) / 2), auto) minmax(var(--spacing-band-label), auto)
      repeat(2, minmax(var(--mod-h), auto));
  }
}

.t--title {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
}

.title__say {
  max-width: 40ch;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

.t--show {
  justify-content: flex-end;
}

.seg--row .seg__b {
  text-align: center;
}

@media (min-width: 768px) {
  .t--title {
    flex-direction: row;
    align-items: flex-end;
    gap: 2rem;
  }

  .t--title .display {
    flex: none;
  }

  .title__say {
    padding-bottom: 0.375rem;
  }
}

.dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: var(--radius-finish);
  background: var(--color-accent);
  vertical-align: 0.1em;
}

.title__say .dot {
  margin: 0 0 0 0.25em;
}

/* 두 모델 옆면 — 한 모델만 보면 다른 쪽은 흐려진다 */
.page--specs[data-show="one"] [data-model-col="long"],
.page--specs[data-show="long"] [data-model-col="one"] {
  opacity: 0.2;
}

/* 차이 표 6줄 — 열 경계가 격자 선과 겹친다 */
/* 표 칸이 여백을 갖는다 — 칸 틀은 여백 0 · 바탕 투명, 흰 바탕은 표가 진다(열 경계를 격자 선에 맞춘다) */
.t--diff,
.t--table {
  padding: 0;
  background: transparent;
}

.diff,
.spec {
  background: var(--color-bg);
}

.diff {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.diff th,
.diff td {
  padding: 0.5rem var(--pad);
  border-top: var(--spacing-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: middle;
  font-weight: inherit;
}

.diff th + th,
.diff th + td,
.diff td + td {
  border-left: var(--spacing-hair) solid var(--color-rule);
}

.diff thead th {
  border-top: 0;
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.diff tbody th {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: var(--font-weight-medium);
}

.diff td {
  font-size: var(--text-lead);
  line-height: 1.2;
  font-weight: var(--font-weight-light);
}

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

@media (min-width: 768px) {
  .diff td {
    font-size: var(--text-title);
  }
}

/* 전체 사양 표 */
.band--spec .grid {
  grid-template-areas:
    "lab lab"
    "tbl tbl";
}

@media (min-width: 768px) {
  .band--spec .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "tbl tbl tbl tbl tbl";
    grid-template-rows: minmax(var(--spacing-band-label), auto) auto;
  }
}

.spec {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.spec th,
.spec td {
  padding: 0.75rem var(--pad);
  border-top: var(--spacing-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
  font-weight: inherit;
}

.spec thead th {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.spec tbody th[scope="row"] {
  font-weight: var(--font-weight-medium);
}

.g__n {
  display: block;
  font-size: var(--text-label);
  line-height: 1.4;
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}

.same {
  margin-right: 0.75rem;
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.page--specs[data-show="one"] .same,
.page--specs[data-show="long"] .same {
  display: none;
}

.spec td.n {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-muted);
}

@media (min-width: 768px) {
  .spec col.col-g,
  .spec col.col-i,
  .spec col.col-v {
    width: calc(var(--mod-w) + var(--spacing-hair));
  }

  .spec thead th {
    position: sticky;
    top: var(--spacing-header);
    z-index: 2;
    border-top: 0;
    background: var(--color-bg);
    box-shadow: inset 0 -1px 0 var(--color-ink-muted); /* 표 머리 아래 선 — 고정돼도 따라온다 */
  }

  /* separate 모델 — 칸마다 위·왼쪽 선만. 그룹 칸(rowspan)만 왼쪽 선이 없다 */
  .spec th:not(.g, .h-g),
  .spec td {
    border-left: var(--spacing-hair) solid var(--color-rule);
  }

  /* 그룹 이름은 그 그룹 안에서만 고정 — 칸(th) 이 끝나면 같이 올라간다 */
  .g__n {
    position: sticky;
    top: calc(var(--spacing-header) + 3rem);
  }

  .spec tbody tr:first-child > * {
    border-top-color: var(--color-ink-muted);
  }
}

/* 사양 표 — 모바일은 줄마다 항목 이름(전폭) 아래 값 1칸(같음) 또는 2칸(다름) */
@media (max-width: 767.98px) {
  .spec,
  .spec tbody {
    display: block;
  }

  .spec thead,
  .spec colgroup {
    display: none;
  }

  .spec tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .spec th,
  .spec td {
    grid-column: 1 / -1;
    border-top: 0;
  }

  .spec th.g {
    padding-block: 0.75rem;
    border-top: var(--spacing-hair) solid var(--color-ink-muted);
    background: var(--color-surface);
  }

  .spec th[scope="row"] {
    padding-bottom: 0.25rem;
    border-top: var(--spacing-hair) solid var(--color-rule);
  }

  .spec th.g + th[scope="row"] {
    border-top: 0;
  }

  .spec td {
    padding-top: 0;
  }

  .spec td.v-one,
  .spec td.v-long {
    grid-column: auto;
  }

  .spec td.v-one::before,
  .spec td.v-long::before {
    display: block;
    margin-bottom: 0.125rem;
    font-size: var(--text-label);
    line-height: 1.4;
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-muted);
  }

  .spec td.v-one::before {
    content: "One";
  }

  .spec td.v-long::before {
    content: "One Long";
  }

  .page--specs[data-show="one"] .spec td.v-one,
  .page--specs[data-show="long"] .spec td.v-long {
    grid-column: 1 / -1;
  }

  .spec td.n:empty {
    display: none;
  }
}

/* 박스 · 접근성 · 환경 · 이 페이지 */
.band--box .grid {
  grid-template-areas:
    "lab lab"
    "b1 b2"
    "b3 b4"
    "b5 b5";
}

.band--access .grid {
  grid-template-areas:
    "lab lab"
    "ls ls"
    "f1 f2";
}

.band--env .grid {
  grid-template-areas:
    "lab lab"
    "e1 e2"
    "e3 e4"
    "e5 e5"
    "tx tx";
}

@media (min-width: 768px) {
  .band--box .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "b1 b2 b3 b4 b5";
    grid-template-rows: minmax(var(--spacing-band-label), auto) minmax(var(--mod-h), auto);
  }

  .band--access .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "ls ls ls f1 f2";
    grid-template-rows: minmax(var(--spacing-band-label), auto) minmax(var(--mod-h), auto);
  }

  .band--env .grid {
    grid-template-areas:
      "lab lab lab lab lab"
      "e1 e2 e3 e4 e5"
      "tx tx tx tx tx";
    grid-template-rows: minmax(var(--spacing-band-label), auto) minmax(var(--mod-h), auto) minmax(calc(var(--mod-h) / 2), auto);
  }
}

.ticks {
  display: grid;
  gap: 0.5rem;
}

.ticks li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
}

.ticks li::before {
  content: "";
  width: 0.75rem;
  border-top: var(--spacing-hair) solid var(--color-ink-muted);
  transform: translateY(-0.3em);
}

.ticks strong {
  font-weight: var(--font-weight-medium);
}

@media (min-width: 1200px) {
  .ticks {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    align-content: start;
  }
}

/* ── Scroll reveal + Stagger — 칸 자체가 아니라 칸 안의 것이 나타난다
 *    (칸이 투명해지면 격자 바탕의 회색이 비친다). 1회 · 최대 4칸 지연 · 동작 줄이기면 없음 */
@media (prefers-reduced-motion: no-preference) {
  .t.is-pending > * {
    opacity: 0;
    transform: translateY(8px);
  }

  .t.is-in > * {
    transition:
      opacity var(--duration-reveal) var(--ease-out) calc(var(--i, 0) * var(--duration-stagger)),
      transform var(--duration-reveal) var(--ease-out) calc(var(--i, 0) * var(--duration-stagger));
  }
}