/* breezeone — 스타일. 색·글자·간격은 tokens.css 변수만 쓴다.
 * 두 척도 (wireframe §0):
 *   폰 (< 600px)   — 고유 척도(px). 패널 높이 auto, 한 열로 다시 배치한다.
 *   캔버스 (≥ 600) — .sheet(container) 안의 모든 크기 = calc(N * var(--cu)). 패널 높이는 토큰(--spacing-p00…p19) 그대로 = 절단 계획.
 *                    px 고정값은 캔버스 밖(책상의 재단 표시)과 hair 선의 1px 하한뿐.
 * 모션 0 — transition·animation 을 두지 않는다. 상태(#color= · #spec · #faq-n)는 :target 으로 즉시 바뀐다.
 * Anybody(display)는 .d 한 곳에서만 붙인다 — font-stretch 가 빠지면 폭 표(wireframe §9)가 깨진다. */

/* ── 리셋 (:where — 명시도 0, #49) ───────────────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, figure, blockquote, ol, ul, table, caption) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(table) { border-collapse: collapse; border-spacing: 0; }
:where(th) { text-align: left; font-weight: inherit; }
:where(td, th) { padding: 0; }
:where(img, svg) { display: block; }
:where(a) { color: inherit; }
:where(mark) { background: none; color: inherit; }

:root { --ring: 3px; }

html {
  color-scheme: light;
  background: var(--color-ground-desk);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  color: var(--color-ink);
  background: var(--color-ground-desk);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* display 서체 — 이 클래스만 Anybody 를 준다(너비 축 62.5% 와 한 쌍) */
.d { font-family: var(--font-display); font-stretch: var(--font-display-stretch); }

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

:focus-visible { outline: var(--ring) solid var(--color-ink); outline-offset: var(--ring); }

/* ── 열과 패널 ─────────────────────────────────────────────────────────── */
.desk { position: relative; }
.sheet {
  width: min(100%, var(--spacing-sheet));
  margin-inline: auto;
  container-type: inline-size;
  background: var(--color-bg);
}
.panel {
  position: relative;
  height: var(--h, auto);
  padding: var(--spacing-panel) var(--spacing-side);
  background: var(--color-bg);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.p00 { --h: var(--spacing-p00); } .p01 { --h: var(--spacing-p01); } .p02 { --h: var(--spacing-p02); }
.p03 { --h: var(--spacing-p03); } .p04 { --h: var(--spacing-p04); } .p05 { --h: var(--spacing-p05); }
.p06 { --h: var(--spacing-p06); } .p07 { --h: var(--spacing-p07); } .p08 { --h: var(--spacing-p08); }
.p09 { --h: var(--spacing-p09); } .p10 { --h: var(--spacing-p10); } .p11 { --h: var(--spacing-p11); }
.p12 { --h: var(--spacing-p12); } .p13 { --h: var(--spacing-p13); } .p14 { --h: var(--spacing-p14); }
.p15 { --h: var(--spacing-p15); } .p16 { --h: var(--spacing-p16); } .p17 { --h: var(--spacing-p17); }
.p18 { --h: var(--spacing-p18); } .p19 { --h: var(--spacing-p19); }

/* ── 글자 부품 ─────────────────────────────────────────────────────────── */
.kicker {
  border-top: var(--spacing-rule) solid currentColor;
  padding-top: var(--spacing-12);
  margin-bottom: var(--spacing-16);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  font-weight: var(--font-weight-label);
}
.kicker .d { font-weight: var(--font-weight-strong); letter-spacing: var(--tracking-label); }
.kicker--plain { border-top: 0; padding-top: 0; }
.kicker__note { color: var(--color-ink-2); }

.hook {
  font-size: var(--text-hook);
  line-height: var(--text-hook--line-height);
  letter-spacing: var(--tracking-hook);
  font-weight: var(--font-weight-head);
}
.head {
  font-size: var(--text-head);
  line-height: var(--text-head--line-height);
  letter-spacing: var(--tracking-head);
  font-weight: var(--font-weight-head);
}
.lead { font-size: var(--text-lead); line-height: var(--text-lead--line-height); font-weight: 500; }
.fine { font-size: var(--text-fine); line-height: var(--text-fine--line-height); color: var(--color-ink-2); }
.cond { color: var(--color-ink-2); font-weight: var(--font-weight-body); }
.num { font-weight: var(--font-weight-num); }
.unit { font-weight: var(--font-weight-strong); }

/* 강조 띠 — 글줄 높이 그대로(원칙 2 "글줄 높이 이하"), 좌우로 8 넘친다. 띠 위 글자는 늘 잉크(12.77:1). 한 줄 안에서만 쓴다.
   면을 가상 요소가 아니라 요소 자신의 배경색으로 칠한다 — 대비 검사기(impeccable)가 가상 요소 배경을 못 봐 잉크 위 잉크로 읽었다 */
.band {
  display: inline-block;
  padding-inline: var(--spacing-8);
  margin-inline: calc(-1 * var(--spacing-8));
  background-color: var(--color-band);
  color: var(--color-ink);
  white-space: nowrap;
}
/* 문장 가운데 띠 — 넘치는 만큼 자리를 비워 이웃 글자를 덮지 않는다 */
.band--mid { margin-inline: 0; }

/* 번호 원 — 글리프가 아니라 원 + 숫자 */
.dot {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--spacing-dot);
  height: var(--spacing-dot);
  border-radius: var(--radius-dot);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: calc(var(--spacing-dot) * 0.6);
  line-height: 1;
  font-weight: var(--font-weight-num);
}

/* 도장 — 예시·가상 표기. 90°, 기울이지 않는다 */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: var(--spacing-8) var(--spacing-12);
  border: var(--spacing-rule) solid var(--color-ink);
  font-size: var(--text-label);
  line-height: 1;
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}
.stamp .d { letter-spacing: var(--tracking-label); }

/* ── FIG 판 — 흰 판 + hair 잉크 테두리 + 아래 띠(FIG. nn · 설명). 사진 위 글자 없음 ─────────────── */
.fig {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: var(--spacing-hair) solid var(--color-ink);
  color: var(--color-ink);
}
.fig__frame { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--color-paper); }
.fig__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fig__cap {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  border-top: var(--spacing-hair) solid var(--color-ink);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  font-weight: var(--font-weight-label);
  color: var(--color-ink-2);
}
.fig__no { flex: none; font-weight: var(--font-weight-strong); letter-spacing: var(--tracking-label); color: var(--color-ink); }
.fig__txt { min-width: 0; }

/* ── P00 머리 띠 ───────────────────────────────────────────────────────── */
.p00 { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-24); padding-block: 0; }
.p00::after {
  content: "";
  position: absolute;
  left: var(--spacing-side);
  right: var(--spacing-side);
  bottom: 0;
  height: var(--spacing-rule);
  background: var(--color-ink);
}
.wordmark { font-size: var(--text-wordmark); line-height: 1; font-weight: var(--font-weight-num); letter-spacing: var(--tracking-wordmark); }
.p00__what { font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-label); color: var(--color-ink-2); }
.tag {
  padding: var(--spacing-8) var(--spacing-12);
  border: var(--spacing-rule) solid var(--color-ink);
  font-size: var(--text-label);
  line-height: 1;
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

/* ── P01 후킹 ─────────────────────────────────────────────────────────── */
.hero { position: relative; }
.stage, .fig__frame > .stage-img { position: absolute; inset: auto; object-fit: fill; }
.stage { pointer-events: none; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leaders path { fill: none; stroke: var(--color-ink); stroke-width: 1.5; }
.leaders circle { fill: var(--color-ink); stroke: var(--color-paper); stroke-width: 2; }
.callout { display: grid; }
.callout .dot { grid-area: dot; }
.callout__v { grid-area: v; font-size: var(--text-num-xl); line-height: var(--text-num-xl--line-height); white-space: nowrap; }
.callout__k { grid-area: k; font-weight: var(--font-weight-label); }
.pin {
  position: absolute;
  left: var(--px);
  top: var(--py);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: var(--radius-dot);
  background: var(--color-ink);
  color: var(--color-paper);
  outline: 2px solid var(--color-paper);
  font-weight: var(--font-weight-num);
  line-height: 1;
}

/* ── P02 문제 제기 — 어두운 면 1곳 ──────────────────────────────────────── */
.p02 { background: var(--color-ground-ink); color: var(--color-paper); }
.p02 .kicker { color: var(--color-bg); }
.pair { display: grid; }

/* ── P03 제품 소개 · 색 ─────────────────────────────────────────────────── */
.p03, .p04 { background: var(--color-paper); }
.colorway { position: relative; }
.anchor { position: absolute; top: 0; left: 0; scroll-margin-top: var(--spacing-24); }
.cw--graphite { display: none; }
:root:has(#color\=graphite:target) .cw--graphite { display: revert; }
:root:has(#color\=graphite:target) .cw--fog { display: none; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chip {
  position: relative;
  display: flex;
  align-items: center;
  border: var(--spacing-rule) solid var(--color-ink);
  background: var(--color-paper);
  text-decoration: none;
}
.chip__sw { flex: none; border: var(--spacing-hair) solid var(--color-ink); background: var(--color-swatch-fog); }
.chip--graphite .chip__sw { background: var(--color-swatch-graphite); }
.chip__name { display: flex; flex-direction: column; font-weight: var(--font-weight-strong); }
.chip__en { font-size: var(--text-label); line-height: var(--text-label--line-height); letter-spacing: var(--tracking-label); color: var(--color-ink-2); }
.chip:hover .chip__name { text-decoration: underline; text-decoration-thickness: var(--spacing-rule); text-underline-offset: 0.15em; }
/* 선택 — 테두리 3 + 칩 밑 노랑 6 (표지). 기본은 포그 */
:root:not(:has(#color\=graphite:target)) .chip--fog,
:root:has(#color\=graphite:target) .chip--graphite { border-width: calc(var(--spacing-rule) * 1.5); }
:root:not(:has(#color\=graphite:target)) .chip--fog::after,
:root:has(#color\=graphite:target) .chip--graphite::after {
  content: "";
  position: absolute;
  left: calc(var(--spacing-rule) * -1.5);
  right: calc(var(--spacing-rule) * -1.5);
  top: calc(100% + var(--spacing-rule) * 1.5);
  height: calc(var(--spacing-rule) * 3);
  background: var(--color-band);
}

/* ── P04 구성품 — 표(부품도 칸) ─────────────────────────────────────────── */
.sub { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-strong); }
.sub__en { font-size: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-2); }
.box { width: 100%; }
.box tbody { display: grid; }
.box tr {
  display: grid;
  grid-template-columns: var(--spacing-dot) minmax(0, 1fr) auto;
  grid-template-areas: "no . qty" "fig fig fig" "name name name";
  border: var(--spacing-hair) solid var(--color-ink);
  background: var(--color-paper);
}
.box__no { grid-area: no; }
.box__qty { grid-area: qty; font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-strong); color: var(--color-ink-2); }
.box__fig { grid-area: fig; display: grid; place-items: center; min-height: 0; }
.box__art { fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.box__name { grid-area: name; font-size: var(--text-table); line-height: var(--text-table--line-height); font-weight: var(--font-weight-label); }

/* ── P05 특징 머리 ─────────────────────────────────────────────────────── */
.toc { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--text-table); line-height: var(--text-table--line-height); font-weight: var(--font-weight-label); }
.toc li { display: flex; align-items: center; }

/* ── P06–P10 특징 ─────────────────────────────────────────────────────── */
.v { display: grid; }
.chart { display: flex; flex-direction: column; min-width: 0; }
.chart__k { font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-label); }
.big { font-size: var(--text-num-l); line-height: var(--text-num-l--line-height); white-space: nowrap; }
.bars { display: grid; margin-top: auto; }
.bars__head { display: flex; justify-content: space-between; font-size: var(--text-table); line-height: var(--text-table--line-height); font-weight: var(--font-weight-label); }
.bars__v { font-weight: var(--font-weight-strong); white-space: nowrap; }
.bars__track { position: relative; display: block; border-bottom: var(--spacing-hair) solid var(--color-ink); }
.bars__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--color-ink); }
.bars__fill--hatch {
  background: repeating-linear-gradient(135deg, var(--color-ink-2) 0 var(--hatch), transparent 0 calc(var(--hatch) * 4));
  border: var(--spacing-hair) solid var(--color-ink-2);
}
.bars__axis { position: relative; font-size: var(--text-fine); line-height: var(--text-fine--line-height); color: var(--color-ink-2); }
.bars__axis span { position: absolute; left: var(--x); translate: -50% 0; white-space: nowrap; }
.bars__axis .a0 { translate: 0 0; }
.bars__axis .a1 { translate: -100% 0; }

.ruler { position: relative; height: 100%; }
.ruler__mk { position: absolute; left: var(--x); top: 0; translate: -50% 0; font-size: var(--text-table); line-height: var(--text-table--line-height); font-weight: var(--font-weight-label); white-space: nowrap; }
.ruler__mk b { font-weight: var(--font-weight-num); }
.ruler__mk::before, .ruler__mk::after { content: ""; position: absolute; left: 50%; translate: -50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ruler__mk::before { background: var(--color-ink); }
.ruler__mk:not(.ruler__mk--on)::after { background: var(--color-bg); }
.ruler__line { position: absolute; left: 0; right: 0; background: var(--color-ink); }
.ruler__line i { position: absolute; left: var(--x); top: 0; translate: -50% 0; width: var(--spacing-hair); background: var(--color-ink); }
.ruler__line i:first-child { translate: 0 0; }
.ruler__line i:last-child { translate: -100% 0; }
.ruler__nums, .ruler__ref { position: absolute; left: 0; right: 0; }
.ruler__nums span, .ruler__ref span { position: absolute; left: var(--x); translate: -50% 0; white-space: nowrap; }
.ruler__nums span:first-child, .ruler__ref span:first-child { translate: 0 0; }
.ruler__nums span:last-child, .ruler__ref .ruler__unit { translate: -100% 0; }
.ruler__nums { font-size: var(--text-table); line-height: 1; font-weight: var(--font-weight-strong); }
.ruler__ref { font-size: var(--text-fine); line-height: var(--text-fine--line-height); color: var(--color-ink-2); }

.steps { display: grid; }
.steps li { display: grid; grid-template-columns: var(--spacing-dot) minmax(0, 1fr); grid-template-areas: "dot t" "dot d"; align-content: center; }
.steps .dot { grid-area: dot; align-self: center; }
.steps__t { grid-area: t; font-size: var(--text-lead); line-height: 1.2; font-weight: var(--font-weight-strong); }
.steps__d { grid-area: d; font-size: var(--text-table); line-height: var(--text-table--line-height); color: var(--color-ink-2); }

/* ── P11 사용 장면 ─────────────────────────────────────────────────────── */
.grid4 { display: grid; }

/* ── P12 도면 ──────────────────────────────────────────────────────────── */
.dwg { position: absolute; inset: 0; }
.dwg__img { position: absolute; left: 0.35%; top: 27.83%; width: 86.94%; height: auto; aspect-ratio: 3; object-fit: cover; }
.dwg__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-ink); stroke-width: 1; }
.dwg__lines .ext { stroke: var(--color-ink-2); }
.dwg__lines .arw { fill: var(--color-ink); stroke: none; }
.dwg__len, .dwg__dia { position: absolute; font-size: var(--text-label); line-height: 1; font-weight: var(--font-weight-strong); white-space: nowrap; }
.dwg__len { left: 43.97%; top: 36.67%; translate: -50% -100%; display: flex; align-items: baseline; gap: 0.3em; padding-bottom: var(--spacing-8); }
.dwg__dia { left: 87.94%; top: 61.8%; translate: 0 -50%; display: flex; flex-direction: column; gap: var(--spacing-8); }
.dwg__len b, .dwg__dia b { font-size: var(--text-num-m); line-height: var(--text-num-m--line-height); font-weight: var(--font-weight-num); }
.dwg__len .cond { margin-left: 0.3em; font-weight: var(--font-weight-label); }

/* ── 표 공통 (규격 · 비교 · 배송 · 보증서) ───────────────────────────────── */
.spec, .cmp, .info {
  width: 100%;
  border: var(--spacing-rule) solid var(--color-ink);
  background: var(--color-paper);
  font-size: var(--text-table);
  line-height: var(--text-table--line-height);
  font-variant-numeric: tabular-nums;
}
.spec thead th { background: var(--color-ink); color: var(--color-paper); font-weight: var(--font-weight-strong); }
.spec tbody th, .spec tbody td { border-top: var(--spacing-hair) solid var(--color-line); vertical-align: middle; }
.spec tbody tr:first-child th, .spec tbody tr:first-child td { border-top: 0; }
.spec tbody th { font-weight: var(--font-weight-label); }
:root:has(#spec:target) .spec thead th { border-bottom: calc(var(--spacing-rule) * 3) solid var(--color-band); }

.compare__head { position: relative; }
.cmp { table-layout: fixed; }
.cmp thead th, .cmp__corner { font-weight: var(--font-weight-strong); vertical-align: middle; border-bottom: var(--spacing-rule) solid var(--color-ink); }
.cmp__ex { display: block; font-weight: var(--font-weight-body); color: var(--color-ink-2); }
.cmp tbody th { font-weight: var(--font-weight-label); }
.cmp tbody th, .cmp tbody td { border-top: var(--spacing-hair) solid var(--color-line); vertical-align: middle; }
.cmp tbody tr:first-child th, .cmp tbody tr:first-child td { border-top: 0; }
.cmp td, .cmp thead th { border-left: var(--spacing-hair) solid var(--color-line); }

.info th { font-weight: var(--font-weight-strong); vertical-align: middle; }
.info th, .info td { border-top: var(--spacing-hair) solid var(--color-line); }
.info tr:first-child th, .info tr:first-child td { border-top: 0; }

/* ── P15 후기 (가상) ───────────────────────────────────────────────────── */
.reviews { display: grid; }
.review { display: flex; flex-direction: column; border: var(--spacing-rule) solid var(--color-ink); background: var(--color-paper); }
.review__top { display: flex; align-items: center; justify-content: space-between; }
.stars { display: flex; }
.stars path { fill: var(--color-ink); }
.stars .stars__off { fill: none; stroke: var(--color-ink); stroke-width: 1.2; }
.review__q { font-size: var(--text-lead); line-height: var(--text-lead--line-height); font-weight: var(--font-weight-label); }
.review__who { margin-top: auto; font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-label); }

/* ── P16 FAQ ─────────────────────────────────────────────────────────── */
.qa { position: relative; border-top: var(--spacing-hair) solid var(--color-ink); scroll-margin-top: var(--spacing-24); }
.qa__q { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-strong); }
.qa__q a { display: grid; grid-template-columns: var(--spacing-dot) minmax(0, 1fr); align-items: center; text-decoration: none; }
.qa__q a:hover span { text-decoration: underline; text-decoration-thickness: var(--spacing-rule); text-underline-offset: 0.15em; }
.qa__a { padding-left: calc(var(--spacing-dot) + var(--spacing-16)); }
.qa:target .dot { background: var(--color-band); color: var(--color-ink); }
.qa:target::before { content: ""; position: absolute; top: 0; bottom: 0; background: var(--color-ink); }

/* ── P18 품질보증서 ────────────────────────────────────────────────────── */
.warranty { position: relative; border: var(--spacing-rule) solid var(--color-ink); background: var(--color-paper); }
.warranty::before { content: ""; position: absolute; border: var(--spacing-hair) solid var(--color-ink); pointer-events: none; }
.warranty__head { display: flex; align-items: baseline; justify-content: space-between; }
.warranty__t { font-size: var(--text-head); line-height: var(--text-head--line-height); letter-spacing: var(--tracking-head); font-weight: var(--font-weight-head); }
.warranty__en { font-size: var(--text-label); font-weight: var(--font-weight-strong); letter-spacing: var(--tracking-label); color: var(--color-ink-2); }
.wt { width: 100%; font-size: var(--text-table); line-height: var(--text-table--line-height); border-top: var(--spacing-rule) solid var(--color-ink); border-bottom: var(--spacing-rule) solid var(--color-ink); }
.wt th { font-size: var(--text-fine); font-weight: var(--font-weight-label); color: var(--color-ink-2); vertical-align: middle; }
.wt td { font-weight: var(--font-weight-label); vertical-align: middle; }
.wt tr + tr th, .wt tr + tr td { border-top: var(--spacing-hair) solid var(--color-line); }
.date { white-space: nowrap; }
.blank { display: inline-block; width: 1.6em; height: 1em; vertical-align: -0.15em; border-bottom: var(--spacing-hair) dashed var(--color-ink); }
.blank--y { width: 2.4em; }
.blank--wide { width: 7em; }
.warranty__note { font-size: var(--text-fine); line-height: var(--text-fine--line-height); }
.seal {
  position: absolute;
  display: grid;
  place-items: center;
  border: var(--spacing-rule) dashed var(--color-ink-2);
  border-radius: var(--radius-dot);
  color: var(--color-ink-2);
  font-size: var(--text-label);
  font-weight: var(--font-weight-label);
}

/* ── P19 가상 고지 ─────────────────────────────────────────────────────── */
.stripes {
  display: block;
  background: repeating-linear-gradient(-45deg, var(--color-band) 0 var(--stripe), var(--color-ink) 0 calc(var(--stripe) * 2));
}
.notice__t { font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-strong); }
.notice__t .d { letter-spacing: var(--tracking-label); }
.notice__b { font-size: var(--text-table); line-height: var(--text-table--line-height); color: var(--color-ink-2); }

/* 재단 표시 — 책상 위(캔버스 밖). ≥ 1100 에서만(열 860 = 1:1 이라 px 가 곧 긴 이미지 y) */
.marks { display: none; }

/* ═══ 폰 (< 600) — 다시 배치 ═══════════════════════════════════════════ */
@media (max-width: 599.98px) {
  .fig__cap { padding: 8px 12px; }
  .fig__frame { flex: none; aspect-ratio: var(--ar, 4 / 3); }

  .p00 { min-height: 48px; }
  .p00__what { display: none; }
  .tag { padding: 5px 8px; }

  .p01 { padding-top: 16px; padding-bottom: 32px; }
  .hook { margin-top: 0; }
  .hero { margin-top: 16px; }
  .fig--hero { height: var(--spacing-plate-hook); }
  .fig--hero .fig__frame { flex: 1 1 auto; aspect-ratio: auto; }
  .fig--hero .stage, .fig--hero .stage-img { left: 5%; top: 50%; width: 90%; height: auto; aspect-ratio: 1; translate: 0 -50%; }
  .leaders { display: none; }
  .pin { width: 22px; height: 22px; font-size: 13px; }
  .callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; border-top: 2px solid var(--color-ink); }
  .callout {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-areas: "v v" "dot k";
    column-gap: 5px;
    row-gap: 4px;
    align-content: start;
    padding: 9px 5px 9px 8px;
    border-left: 1px solid var(--color-ink);
  }
  .callout:first-child { border-left: 0; padding-left: 0; }
  .callout .dot { width: 20px; height: 20px; font-size: 12px; margin-top: 1px; }
  .callout__v .unit { font-size: 14px; margin-left: 2px; }
  .callout__k { font-size: var(--text-fine); line-height: var(--text-fine--line-height); }
  .p01 .fine { margin-top: 10px; }

  .fig--wide { margin-top: 20px; --ar: 16 / 10; }
  .pair { gap: 16px; margin-top: 16px; }
  .fig--half { --ar: 16 / 10; }

  .p03 .lead { margin-top: 10px; }
  .colorway { margin-top: 20px; }
  .fig--color .fig__frame { --ar: 16 / 9; }
  .chips { gap: 10px; margin-top: 12px; }
  .chip { gap: 10px; min-height: 56px; padding: 6px 8px; }
  .chip__sw { width: 36px; height: 36px; }
  .chip__name { font-size: 15px; line-height: 1.3; }
  .chip__en { font-size: 11px; }

  .box { margin-top: 14px; }
  .box tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .box tr { grid-template-rows: 24px 72px auto; padding: 10px; }
  .box__art { width: 128px; height: 64px; }
  .p04 .fine { margin-top: 12px; }

  .toc { gap: 8px 14px; margin-top: 10px; }
  .toc li { gap: 5px; }
  .dot--s { width: 20px; height: 20px; font-size: 12px; }

  .point .body { margin-top: 10px; }
  .v { grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin-top: 20px; }
  .v .fig__frame { --ar: 4 / 3; }
  .v--steps .fig__frame { --ar: 16 / 10; }
  .chart__k { margin-bottom: 4px; }
  .big .unit { font-size: 18px; margin-left: 3px; }
  .bars { row-gap: 14px; margin-top: 16px; }
  .bars__head { gap: 8px; }
  .bars__track { height: 16px; margin-top: 4px; }
  .bars--tall .bars__track { height: 22px; }
  .bars__fill--hatch { --hatch: 2px; }
  .bars__axis { height: 20px; margin-top: 6px; }
  .ruler { height: 150px; }
  .ruler__mk::before, .ruler__mk::after { top: calc(100% + 2px); width: 12px; height: 9px; }
  .ruler__mk:not(.ruler__mk--on)::after { top: calc(100% + 3.5px); width: 7px; height: 5px; }
  .ruler__line { top: 44px; height: 2px; }
  .ruler__line i { height: 8px; }
  .ruler__line i.maj { height: 16px; }
  .ruler__nums { top: 68px; font-size: 13px; }
  .ruler__ref { top: 90px; }
  .ruler__ref span:nth-child(2) { top: 18px; }
  .steps { row-gap: 14px; }
  .steps li { column-gap: 10px; }
  .steps__t { font-size: 17px; }

  .grid4 { gap: 16px; margin-top: 20px; }

  .fig--dwg { margin-top: 16px; }
  .fig--dwg .fig__frame { --ar: 746 / 300; }
  .dwg__len b, .dwg__dia b { font-size: var(--text-num-m); }
  .dwg__len { font-size: 12px; }
  .dwg__dia { font-size: 12px; gap: 2px; }
  .dwg__len .cond { display: none; }

  .spec thead th { height: 40px; padding: 0 10px; }
  .spec tbody th, .spec tbody td { padding: 8px 10px; }
  .spec tbody th { width: 104px; font-size: 13px; }
  .p13 .fine { margin-top: 10px; }

  .stamp--l { position: absolute; right: 0; bottom: 4px; font-size: var(--text-label); }
  .p14 .lead { margin-top: 10px; }
  .cmp { margin-top: 16px; }
  .cmp thead tr, .cmp tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp__corner { display: none; }
  .cmp thead th { padding: 8px; font-size: 13px; line-height: 1.35; }
  .cmp thead th:first-of-type { border-left: 0; }
  .cmp tbody th { grid-column: 1 / -1; padding: 8px 10px 2px; background: var(--color-bg); }
  .cmp tbody td { padding: 6px 8px 10px; border-top: 0; }
  .cmp tbody td:nth-of-type(1) { border-left: 0; }
  .cmp tbody tr + tr th { border-top: var(--spacing-hair) solid var(--color-line); }
  .p14 .fine { margin-top: 10px; }

  .fine--mark { margin-top: 10px; }
  .reviews { row-gap: 12px; margin-top: 16px; }
  .review { padding: 16px; }
  .stars { gap: 2px; }
  .stars svg { width: 18px; height: 18px; }
  .review__q { margin-top: 10px; }
  .review__who { margin-top: 10px; }

  .faq { margin-top: 16px; }
  .qa { padding: 12px 0 16px; }
  .qa__q a { column-gap: 10px; padding-block: 10px; margin-block: -10px; }
  .qa__a { margin-top: 6px; padding-left: 34px; }
  .qa:target::before { left: -12px; width: 4px; }

  .info { margin-top: 16px; }
  .info tr { display: grid; }
  .info th { padding: 10px 12px 0; }
  .info td { padding: 4px 12px 12px; border-top: 0; }
  .info tr + tr th { border-top: var(--spacing-hair) solid var(--color-line); }

  .warranty { padding: 22px 18px; }
  .warranty::before { inset: 5px; }
  .warranty__head { flex-wrap: wrap; gap: 4px 12px; }
  .wt { margin-top: 14px; }
  .wt tr { display: grid; grid-template-columns: 76px minmax(0, 1fr); }
  .wt th, .wt td { padding: 9px 0; }
  .wt tr + tr th, .wt tr + tr td { border-top: 0; }
  .wt th:nth-of-type(2), .wt td:nth-of-type(2) { border-top: var(--spacing-hair) solid var(--color-line); }
  .wt tr + tr th:first-of-type, .wt tr + tr td:first-of-type { border-top: var(--spacing-hair) solid var(--color-line); }
  .warranty__note { margin-top: 14px; padding-right: 100px; }
  .seal { right: 18px; bottom: 18px; width: 88px; height: 88px; }

  .p19 { padding-top: 40px; padding-bottom: 40px; }
  .stripes { height: 10px; --stripe: 8px; }
  .notice__t { margin-top: 14px; }
  .notice__b { margin-top: 6px; }
}

/* ═══ 캔버스 (≥ 600) — 860 기준 cu. 패널 높이 = 토큰 = 절단 계획 ═══════════════════ */
@media (min-width: 600px) {
  :root { --ring: calc(3 * var(--cu)); }

  .fig__cap { height: calc(44 * var(--cu)); padding: 0 var(--spacing-16); white-space: nowrap; overflow: hidden; }

  .p00 { padding-block: 0; }

  /* P01 — 위 40 · 키커 32 · 16 · h1 188 · 28 · 제품 구역 460 · 12 · 주석 29 (첫 화면 1440×900 = P00+P01) */
  .p01 { padding-top: calc(40 * var(--cu)); padding-bottom: 0; }
  .hero {
    display: grid;
    grid-template-columns: calc(368 * var(--cu)) minmax(0, 1fr);
    column-gap: var(--spacing-32);
    height: calc(460 * var(--cu));
    margin-top: var(--spacing-28);
  }
  .fig--hero { height: 100%; }
  /* 사진 상자 414² 를 틀(366×414) 왼쪽 −24 · 위 0 에 — build.mjs 의 인출선 환산과 같은 값 */
  .fig--hero .stage, .fig--hero .stage-img { left: calc(-24 * var(--cu)); top: 0; width: calc(414 * var(--cu)); height: calc(414 * var(--cu)); }
  .pin { display: none; }
  .callouts { display: grid; grid-template-rows: repeat(3, calc(140 * var(--cu))); row-gap: var(--spacing-20); }
  .callout {
    grid-template-columns: var(--spacing-dot) minmax(0, 1fr);
    grid-template-rows: calc(88 * var(--cu)) auto;
    grid-template-areas: "dot v" ". k";
    column-gap: var(--spacing-16);
    row-gap: var(--spacing-8);
    align-content: start;
  }
  .callout .dot { align-self: center; }
  .callout__v { align-self: center; }
  .callout__v .unit { font-size: calc(36 * var(--cu)); margin-left: calc(6 * var(--cu)); }
  .callout__k { font-size: var(--text-label); line-height: var(--text-label--line-height); }
  .p01 .fine { margin-top: var(--spacing-12); }

  /* P02 — 키커 · h2 · 48 · FIG.02 396 · 24 · FIG.03·04 344 */
  .fig--wide { height: calc(396 * var(--cu)); margin-top: var(--spacing-48); }
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-24); margin-top: var(--spacing-24); }
  .fig--half { height: calc(344 * var(--cu)); }

  /* P03 — 키커 · h2 · 16 · 리드 · 32 · FIG.05 444 · 20 · 칩 88 */
  .p03 .lead { margin-top: var(--spacing-16); }
  .colorway { margin-top: var(--spacing-32); }
  .fig--color { height: calc(444 * var(--cu)); }
  .chips { column-gap: var(--spacing-24); margin-top: var(--spacing-20); }
  .chip { height: calc(88 * var(--cu)); gap: var(--spacing-16); padding: 0 var(--spacing-12); }
  .chip__sw { width: calc(64 * var(--cu)); height: calc(64 * var(--cu)); }
  .chip__name { font-size: var(--text-title); line-height: 1.15; }

  /* P04 — 소제목 · 24 · 구성품 3×2 (234×194) · 24 · 주석 */
  .box { margin-top: var(--spacing-24); }
  .box tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-16) calc(23 * var(--cu)); }
  .box tr { height: calc(194 * var(--cu)); grid-template-rows: var(--spacing-dot) minmax(0, 1fr) auto; padding: var(--spacing-16); }
  .box__art { width: calc(176 * var(--cu)); height: calc(88 * var(--cu)); }
  .p04 .fine { margin-top: var(--spacing-24); }

  /* P05 — 위아래 74 */
  .p05 { padding-block: var(--spacing-panel-tight); }
  .toc { gap: var(--spacing-24); margin-top: var(--spacing-16); }
  .toc li { gap: var(--spacing-8); }
  .dot--s { width: calc(32 * var(--cu)); height: calc(32 * var(--cu)); font-size: calc(19 * var(--cu)); }

  /* P06–P10 — 키커 · h3 · 20 · 본문 2줄 · 32 · V */
  .point .body { margin-top: var(--spacing-20); }
  .v { margin-top: var(--spacing-32); }
  .v .fig { height: 100%; }
  .v--weight { grid-template-columns: calc(440 * var(--cu)) minmax(0, 1fr); column-gap: var(--spacing-32); height: calc(378 * var(--cu)); }
  .v--half { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-24); height: calc(378 * var(--cu)); }
  .v--ruler { height: calc(168 * var(--cu)); }
  .v--steps { grid-template-columns: calc(300 * var(--cu)) minmax(0, 1fr); column-gap: var(--spacing-32); height: calc(248 * var(--cu)); }
  .big { margin-top: var(--spacing-8); }
  .big .unit { font-size: calc(40 * var(--cu)); margin-left: calc(6 * var(--cu)); }
  .bars { row-gap: var(--spacing-20); }
  .bars--tall { row-gap: var(--spacing-40); }
  .bars__head { gap: var(--spacing-12); }
  .bars__track { height: var(--spacing-24); margin-top: var(--spacing-8); }
  .bars--tall .bars__track { height: var(--spacing-40); }
  .bars__fill--hatch { --hatch: calc(2 * var(--cu)); }
  .bars__axis { height: var(--spacing-32); margin-top: var(--spacing-8); }
  .bars__axis span { padding-top: var(--spacing-8); }
  .bars__axis span::before { content: ""; position: absolute; top: 0; left: 50%; width: var(--spacing-hair); height: calc(6 * var(--cu)); background: var(--color-ink-2); }
  .bars__axis .a0::before { left: 0; }
  .bars__axis .a1::before { left: auto; right: 0; }

  /* 눈금자 168: 표지 0–34 · 삼각 16 · 선 56 · 눈금 24 · 숫자 88 · 참고 126 */
  .ruler__mk::before, .ruler__mk::after { top: calc(100% + 2 * var(--cu)); width: calc(18 * var(--cu)); height: calc(14 * var(--cu)); }
  .ruler__mk:not(.ruler__mk--on)::after { top: calc(100% + 4.4 * var(--cu)); width: calc(10.6 * var(--cu)); height: calc(8.2 * var(--cu)); }
  .ruler__line { top: calc(56 * var(--cu)); height: var(--spacing-rule); }
  .ruler__line i { height: calc(12 * var(--cu)); }
  .ruler__line i.maj { height: var(--spacing-24); }
  .ruler__nums { top: calc(90 * var(--cu)); }
  .ruler__ref { top: calc(126 * var(--cu)); }

  .steps { grid-template-rows: repeat(3, calc(72 * var(--cu))); row-gap: var(--spacing-16); }
  .steps li { column-gap: var(--spacing-16); }

  /* P11 — 2×2 판 406 */
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); margin-top: var(--spacing-40); }
  .fig--scene { height: calc(406 * var(--cu)); }

  /* P12 — "제품 규격" 1줄 · 32 · 도면 판 346 */
  .fig--dwg { height: calc(346 * var(--cu)); margin-top: var(--spacing-32); }

  /* P13 — 위아래 96 · 머리 56 + 16행 × 44 */
  .p13 { padding-block: var(--spacing-panel-table); }
  .spec thead th { height: calc(56 * var(--cu)); padding: 0 var(--spacing-16); }
  .spec tbody th, .spec tbody td { height: calc(44 * var(--cu)); padding: 0 var(--spacing-16); }
  .spec tbody th { width: calc(220 * var(--cu)); }
  .p13 .fine { margin-top: var(--spacing-16); }

  /* P14 — 키커 · h2(+도장) · 16 · 리드 · 40 · 비교표 96 + 6 × 80 */
  .stamp--l { position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: var(--text-lead); padding: var(--spacing-12) var(--spacing-16); }
  .p14 .lead { margin-top: var(--spacing-16); }
  .cmp { margin-top: var(--spacing-40); }
  .cmp__corner { width: calc(180 * var(--cu)); }
  .cmp thead th, .cmp__corner { height: calc(96 * var(--cu)); padding: 0 var(--spacing-12); }
  .cmp tbody th { height: calc(80 * var(--cu)); padding: 0 var(--spacing-16); }
  .cmp tbody td { height: calc(80 * var(--cu)); padding: 0 var(--spacing-12); }
  .p14 .fine { margin-top: var(--spacing-20); }

  /* P15 — 키커 · h2 · 16 · 가상 표기 줄 · 32 · 카드 3 × 285 */
  .fine--mark { margin-top: var(--spacing-16); }
  .reviews { row-gap: var(--spacing-20); margin-top: var(--spacing-32); }
  .review { height: calc(285 * var(--cu)); padding: var(--spacing-32); }
  .review__top { height: var(--spacing-40); }
  .stars { gap: calc(4 * var(--cu)); }
  .stars svg { width: calc(32 * var(--cu)); height: calc(32 * var(--cu)); }
  .review__q { margin-top: var(--spacing-16); }

  /* P16 — 키커 · h2 · 32 · 문답 5 × 169 */
  .faq { margin-top: var(--spacing-32); }
  .qa { height: calc(169 * var(--cu)); padding-top: var(--spacing-20); }
  .qa__q a { column-gap: var(--spacing-16); }
  .qa__a { margin-top: var(--spacing-12); }
  .qa:target::before { left: calc(-20 * var(--cu)); width: calc(4 * var(--cu)); }

  /* P17 — 키커 · h2 · 32 · 안내표 3 × 110 */
  .info { margin-top: var(--spacing-32); }
  .info th { width: calc(180 * var(--cu)); height: calc(110 * var(--cu)); padding: 0 var(--spacing-24); }
  .info td { padding: 0 var(--spacing-24); border-left: var(--spacing-hair) solid var(--color-line); vertical-align: middle; }

  /* P18 — 위아래 120 · 보증서 748×560 (이중 테두리 2 + 6 + 1) */
  .p18 { padding-block: var(--spacing-panel-card); }
  .warranty { height: 100%; padding: var(--spacing-40) calc(48 * var(--cu)); }
  .warranty::before { inset: calc(6 * var(--cu)); }
  .wt { margin-top: var(--spacing-24); }
  .wt th { width: calc(110 * var(--cu)); height: calc(80 * var(--cu)); padding: 0 var(--spacing-12) 0 0; }
  .wt td { padding: 0 var(--spacing-16) 0 0; }
  .warranty__note { margin-top: var(--spacing-24); max-width: calc(470 * var(--cu)); }
  .seal { right: calc(48 * var(--cu)); bottom: var(--spacing-40); width: calc(120 * var(--cu)); height: calc(120 * var(--cu)); }

  /* P19 — 위 92 · 줄무늬 12 · 24 · 라벨 · 12 · 고지 */
  .p19 { padding-top: calc(92 * var(--cu)); padding-bottom: 0; }
  .stripes { height: calc(12 * var(--cu)); --stripe: calc(10 * var(--cu)); }
  .notice__t { margin-top: var(--spacing-24); }
  .notice__b { margin-top: var(--spacing-12); }
}

/* 책상 위 재단 표시 (캔버스 밖 — px) */
@media (min-width: 1100px) {
  .marks {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--spacing-sheet);
    translate: -50% 0;
    pointer-events: none;
  }
  .mark { position: absolute; width: 40px; height: 1px; }
  .mark::before { content: ""; position: absolute; inset: 0; background: var(--color-ink); }
  .mark--l { right: calc(100% + 12px); }
  .mark--r { left: calc(100% + 12px); }
  .mark b { position: absolute; bottom: 5px; font-size: var(--text-mark); line-height: 1; font-weight: var(--font-weight-label); letter-spacing: var(--tracking-label); white-space: nowrap; }
  .mark--l b { right: 0; }
  .mark--r b { left: 0; }
  .cross { position: absolute; width: 16px; height: 16px; }
  .cross::before, .cross::after { content: ""; position: absolute; background: var(--color-ink); }
  .cross::before { left: 0; right: 0; top: 50%; height: 1px; }
  .cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }
  .cross--tl, .cross--bl { right: calc(100% + 12px); }
  .cross--tr, .cross--br { left: calc(100% + 12px); }
  .cross--tl, .cross--tr { top: 12px; }
  .cross--bl, .cross--br { bottom: 12px; }
}