/* overprint — 벽에 붙은 종이, 종이 위에서만 겹치는 두 판.
 * 색은 tokens.css 의 변수만 쓴다. 판 B 는 전부 같은 식으로 --misreg 를 읽는다(어긋남 한 값). */

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

html {
  /* 기본 쌍 — 분홍(판 A) · 청(판 B). 부품이 style 로 덮는다 */
  --pa: var(--color-print-pink);
  --pb: var(--color-drum-blue);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100svh;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
/* 브라우저 표면도 견본첩의 색으로 — 선택은 분홍 판, 스크롤 막대는 먹과 벽 */
html { scrollbar-color: var(--color-ink) var(--color-bg); accent-color: var(--color-ink); }
::selection { background: var(--color-print-pink); color: var(--color-ink); }
.num { font-variant-numeric: tabular-nums; }
.h1, .h2, .h3, .poster__h, .notice__h { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
b { font-weight: 700; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--spacing-3); top: -80px; z-index: 30;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-paper); color: var(--color-ink); font-weight: 600;
  box-shadow: var(--shadow-lift);
}
.skip:focus { top: var(--spacing-3); }

/* ── 벽과 종이 ─────────────────────────────── */
.wall {
  max-width: 1680px;
  margin-inline: auto;
  padding: var(--spacing-wall);
  padding-bottom: calc(var(--spacing-wall) + env(safe-area-inset-bottom));
}
.paper {
  position: relative;
  isolation: isolate;
  background: var(--color-paper);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
}
.sec { margin-top: var(--spacing-section); }

/* 기울기 — ≥768 에서만. <768 은 작은 종이만 ±1.5° 안 */
.strip, .sticker, .slip, .price-slip { rotate: clamp(-1.5deg, var(--tilt, 0deg), 1.5deg); }
@media (min-width: 768px) {
  .poster, .strip, .sticker, .pin, .system__paper, .step-s, .price-slip, .notice,
  .pagehead__paper, .var, .type, .apply__item, .quote__pin, .step { rotate: var(--tilt, 0deg); }
  .slip { rotate: -0.6deg; }
}

/* 테이프·재단 표식 */
.tape {
  position: absolute; z-index: 3;
  width: 76px; height: 22px;
  background: var(--color-tape); opacity: 0.78;
  rotate: var(--r, 0deg);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-ink) 10%, transparent);
}
.crop {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--color-ink); opacity: 0.5; pointer-events: none;
}
.crop--tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.crop--tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.crop--bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; }
.crop--br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

/* ── 두 판 ─────────────────────────────── */
.ov { position: relative; display: inline-block; }
.ov__a { display: block; color: var(--pa); }
.ov__b {
  position: absolute; inset: 0; display: block;
  color: var(--pb);
  mix-blend-mode: multiply;
  pointer-events: none;
  translate: calc(var(--misreg) * var(--misreg-unit)) calc(var(--misreg) * var(--misreg-unit) * -0.5);
}
.ov svg { fill: currentColor; }
.ov--box { display: block; width: 100%; }
.ov--box > .ov__a { position: absolute; inset: 0; }
.ghost { color: transparent; }
[data-t]::before { content: attr(data-t); }
.art__fill { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 판 맞춤 — 홈 첫 로드 한 번(Orchestration). 조작하면 main.js 가 reg-done 으로 끝낸다 */
@keyframes register {
  from { translate: calc(6 * var(--misreg-unit)) calc(-3 * var(--misreg-unit)); }
}
@media (prefers-reduced-motion: no-preference) {
  .is-home .mast .ov__b { animation: register var(--duration-register) var(--ease-register) both; }
  .is-home .poster .ov__b { animation: register var(--duration-register) var(--ease-register) 60ms both; }
  .reg-done .mast .ov__b, .reg-done .poster .ov__b { animation: none; }
}

.mark {
  display: block; width: max-content;
  font-family: var(--font-mark); font-weight: 900; font-stretch: 125%;
  line-height: var(--leading-display); white-space: nowrap;
}

/* 핀 맞춤 표식 ⊕ */
.reg-wrap { display: inline-block; width: 20px; height: 20px; flex: none; }
.reg { display: block; width: 100%; height: 100%; }
.reg svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* 도장 "겹" — 판 B 하나. 돌리는 것은 판 안쪽이라 multiply 가 종이·글자와 섞인다 */
.stamp { display: block; width: 1em; height: 1em; font-size: 84px; }
.stamp .ov__b { rotate: -12deg; }
.stamp__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none !important; stroke: currentColor; stroke-width: 4; }
.stamp__ch {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.5em; line-height: 1;
}

/* ── 단추 ─────────────────────────────── */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--spacing-6);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1;
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-sheet);
  cursor: pointer;
  transition: transform var(--duration-press) var(--ease-press), border-color var(--duration-press) var(--ease-press);
}
/* 강조 — 해바라기 면 + 먹 2px 테두리 + 뒤에 어긋나 깔린 청 판(단단한 오프셋 그림자 = 판 사본) */
.btn--key {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 2px solid var(--color-ink);
  box-shadow: 2px 2px 0 0 var(--color-drum-blue);
  transition: transform var(--duration-press) var(--ease-press), box-shadow 120ms var(--ease-out), border-color var(--duration-press) var(--ease-press);
}
.btn--key:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--color-drum-blue); transition-duration: var(--duration-press); }
.btn--s { min-height: 40px; padding: 0 var(--spacing-4); font-size: var(--text-small); }

/* 보조 — 종이 면 + 먹 2px 테두리, hover 에 두 판 밑줄 */
.btn--sub { background: var(--color-paper); border: 2px solid var(--color-ink); }
.btn--sub::before, .btn--sub::after {
  content: ""; position: absolute; left: var(--spacing-4); right: var(--spacing-4); bottom: 9px; height: 2px;
  opacity: 0; transition: opacity 120ms var(--ease-out);
}
.btn--sub::before { background: var(--color-print-pink); }
.btn--sub::after {
  background: var(--color-drum-blue); mix-blend-mode: multiply;
  translate: calc(var(--misreg) * var(--misreg-unit)) calc(var(--misreg) * var(--misreg-unit) * -0.5);
}
.btn--sub:active { transform: translate(1px, 1px); }

/* 글자 링크 — 밑줄 두 판 */
.nl {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--spacing-1);
  color: var(--color-ink); font-weight: 500; text-decoration: none;
}
.nl::before, .nl::after {
  content: ""; position: absolute; left: var(--spacing-1); right: var(--spacing-1); bottom: 9px; height: 2px;
  opacity: 0;
}
.nl::before { background: var(--color-print-pink); }
.nl::after {
  background: var(--color-drum-blue); mix-blend-mode: multiply;
  translate: calc(var(--misreg) * var(--misreg-unit)) calc(var(--misreg) * var(--misreg-unit) * -0.5);
}
.nl[aria-current]::before, .nl[aria-current]::after { opacity: 1; }
.nl:active::after { translate: 0 0; }
.nl:focus-visible { outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .btn--key:hover { box-shadow: 4px 3px 0 0 var(--color-drum-blue); }
  .btn--key:active { box-shadow: 0 0 0 0 var(--color-drum-blue); }
  .btn--sub:hover::before, .btn--sub:hover::after { opacity: 1; }
  .nl:hover::before, .nl:hover::after { opacity: 1; }
}

/* ── 머리 ─────────────────────────────── */
.mast__paper { container-type: inline-size; padding: var(--spacing-sheet-head); }
.mast__mark { display: flex; align-items: center; width: max-content; max-width: 100%; min-height: 44px; color: inherit; text-decoration: none; }
.mast--full .mast__mark { font-size: var(--text-mark); }
.mast--sub .mast__mark { font-size: var(--text-mark-sub); }
.mast__row {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin-top: var(--spacing-4);
  border-top: 2px solid var(--color-ink);
}
.mast__cell {
  display: flex; align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border-right: 1px solid var(--color-ink);
  font-size: var(--text-small); font-weight: 500; white-space: nowrap;
}
.mast__cell:first-child { padding-left: 0; }
.mast__nav { flex: 1 1 auto; }
.mast__nav ul { display: flex; height: 100%; }
.mast__nav li { flex: 1 1 0; display: flex; justify-content: center; }
.mast__nav li + li { border-left: 1px solid var(--color-ink); }
.mast__cta { align-self: center; margin-left: var(--spacing-4); }
@media (max-width: 767px) {
  .mast__cell, .mast__cta { display: none; }
  .mast__row { margin-top: var(--spacing-3); }
}
@media (min-width: 768px) {
  .mast__row { padding-top: var(--spacing-2); }
  .mast__nav { padding-inline: var(--spacing-3); }
  .mast__nav ul { justify-content: flex-end; gap: var(--spacing-4); }
  .mast__nav li { flex: none; }
  .mast__nav li + li { border-left: 0; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .mast__cell--meta { display: none; }
  .mast__cell--val { padding-left: 0; }
}

/* 접힌 머리 띠 — ≥768 만, 머리 종이가 화면 밖일 때 */
.bar { display: none; }
@media (min-width: 768px) {
  html { scroll-padding-top: 80px; }
  .bar {
    display: block; position: fixed; inset: 0 0 auto; z-index: 20;
    padding-inline: var(--spacing-wall);
    translate: 0 -100%; opacity: 0; pointer-events: none;
    transition: translate 180ms var(--ease-out), opacity 180ms var(--ease-out);
  }
  .bar.is-on {
    translate: 0 0; opacity: 1; pointer-events: auto;
    transition-duration: var(--duration-fold);
  }
  .bar__in {
    display: flex; align-items: center; gap: var(--spacing-6);
    max-width: calc(1680px - 2 * var(--spacing-wall));
    height: 56px; margin-inline: auto; padding-inline: var(--spacing-6);
    border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
    box-shadow: var(--shadow-bar);
  }
  .bar__mark { font-size: var(--text-mark-bar); color: inherit; text-decoration: none; }
  .bar__nav { margin-left: auto; }
  .bar__nav ul { display: flex; gap: var(--spacing-4); }
  .bar__val { font-size: var(--text-small); font-weight: 500; white-space: nowrap; }
}

/* ── 홈 H1 표지 ─────────────────────────────── */
.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-6) var(--spacing-3);
  margin-top: var(--spacing-4);
}
.cover__pin { display: contents; }
.poster { grid-column: 1 / -1; }
.cover > .strip { grid-column: 1; grid-row: 2; align-self: start; }
.sticker { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; }
.cover__zine { grid-column: 1 / -1; width: min(100%, 440px); }

.poster {
  container: poster / inline-size;
  padding: var(--spacing-sheet-poster);
  display: grid; gap: var(--spacing-5); align-content: start;
}
.spec-line { font-size: var(--text-small); font-weight: 500; color: var(--color-ink-muted); }
.poster__fig { padding-bottom: 0.4em; font-size: var(--text-poster-stack); line-height: var(--leading-display); }
.poster__num {
  display: block;
  font-family: var(--font-display); font-size: inherit;
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  width: max-content;
}
.pl { display: block; }
.eq { position: relative; display: inline-block; }
.half { position: absolute; left: 0.05em; top: 0.62em; width: 1.1em; fill: var(--pb); overflow: visible; }
@container poster (min-width: 560px) {
  .poster__fig { font-size: var(--text-poster); }
  .pl { display: inline; }
  .half { left: -0.5em; width: 1.2em; top: 0.64em; }
}
.poster__h {
  font-size: var(--text-poster-line); font-weight: 800;
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
}
.poster__h span { display: block; }
.poster__acts { display: flex; flex-wrap: wrap; gap: var(--spacing-3); padding-top: var(--spacing-1); }

.strip {
  display: grid; gap: var(--spacing-1); align-content: start;
  padding: var(--spacing-5) var(--spacing-3) var(--spacing-4);
  font-size: var(--text-small); font-weight: 500; line-height: 1.5;
}
.strip__regs { display: flex; justify-content: space-between; margin-bottom: var(--spacing-2); }
.strip__k { font-weight: 700; }
.strip__rule { width: 100%; height: 0; margin: var(--spacing-2) 0; border: 0; border-top: 1px dashed var(--color-ink); }
.strip__total { font-family: var(--font-display); font-size: var(--text-numeral-s); line-height: 1.1; }

.sticker {
  width: 150px; aspect-ratio: 1; padding: 14px;
  background: var(--color-paper); border-radius: var(--radius-dot);
  box-shadow: var(--shadow-sheet); isolation: isolate;
}
.sticker__ov { height: 100%; }

@media (min-width: 768px) {
  .cover { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-6) var(--spacing-gutter); }
  .cover__pin { display: block; position: relative; grid-column: 1 / -1; }
  .sticker { position: absolute; right: -16px; bottom: -56px; width: 160px; z-index: 2; }
  .cover > .strip { grid-column: 1 / 4; justify-self: start; width: min(100%, 260px); margin-top: var(--spacing-8); padding-inline: var(--spacing-4); }
  .cover__zine { grid-column: 4 / 7; width: auto; margin-top: var(--spacing-12); }
}
@media (min-width: 1024px) {
  .cover { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--spacing-6); }
  .cover__pin { grid-column: 1 / 9; grid-row: 1 / 3; align-self: start; }
  .sticker { right: -64px; bottom: -48px; }
  .cover > .strip { grid-column: 9 / 13; grid-row: 1; width: min(100%, 260px); margin: var(--spacing-4) 0 0 var(--spacing-10); }
  .cover__zine { grid-column: 10 / 13; grid-row: 2 / 4; margin-top: 0; }
}

/* ── 사진 자리표시자 ─────────────────────────────── */
.ph {
  position: relative; isolation: isolate;
  display: grid; align-content: start; gap: var(--spacing-1);
  padding: var(--spacing-6);
  background: var(--color-paper-ph); color: var(--color-ink);
  border-radius: var(--radius-sheet);
}
.ph::before {
  content: ""; position: absolute; inset: 10px; z-index: -1;
  border: 1px dashed var(--color-ink-muted);
}
.ph__id { font-size: var(--text-small); font-weight: 700; }
.ph__use { max-width: 30ch; font-size: var(--text-small); line-height: 1.45; color: var(--color-ink-muted); }

/* 사진 — 종이처럼 그림자를 지고 벽에 붙는다 */
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius-sheet); }
.step__dg .photo { width: 100%; }

/* ── 꽂힌 종이(링크) ─────────────────────────────── */
.pin { position: relative; display: block; color: inherit; text-decoration: none; }
.pin .paper, .pin .ph, .pin .photo { transition: box-shadow var(--duration-lift) var(--ease-out); }
a.pin:focus-visible { outline-offset: 6px; }
.slip {
  display: inline-block; margin-top: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-paper); border-radius: var(--radius-sheet); box-shadow: var(--shadow-sheet);
  font-size: var(--text-small); font-weight: 500; line-height: 1.4;
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  a.pin { transition: rotate var(--duration-lift) var(--ease-out), translate var(--duration-lift) var(--ease-out); }
  a.pin:hover { rotate: calc(var(--tilt, 0deg) / 2); translate: 0 -3px; }
  a.pin:hover .paper, a.pin:hover .ph, a.pin:hover .photo { box-shadow: var(--shadow-lift); }
  a.pin:active { rotate: var(--tilt, 0deg); translate: 0 0; }
}

/* ── 제목·문단 ─────────────────────────────── */
.h1 span { display: inline-block; }
.h1 {
  font-size: var(--text-h1); font-weight: 800;
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
}
.h2 {
  font-size: var(--text-h2); font-weight: 800;
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
}
.h3 { font-size: var(--text-h3); font-weight: 800; line-height: var(--leading-heading); letter-spacing: -0.02em; }
.lede { max-width: 46ch; margin-top: var(--spacing-3); }
.wall-h { max-width: 20ch; }
.wall-p { max-width: 44ch; margin-top: var(--spacing-2); font-weight: 500; }

/* ── 홈 H2 잉크 견본 ─────────────────────────────── */
.inks__paper {
  display: grid; gap: var(--spacing-6);
  padding: var(--spacing-5) var(--spacing-3);
}
.inks__head { order: 0; }
.inks__trial { order: 1; display: grid; gap: var(--spacing-4); align-content: start; }
.inks__drums { order: 2; }
.inks__grid { order: 3; }
@media (min-width: 768px) {
  .inks__paper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--spacing-8) var(--spacing-gutter);
    padding: var(--spacing-10);
  }
  .inks__head { grid-column: 1 / -1; }
  .inks__drums { grid-column: 1 / 5; grid-row: 2; order: 0; }
  .inks__trial { grid-column: 5 / 13; grid-row: 2; order: 0; }
  .inks__grid { grid-column: 1 / -1; order: 0; }
}
@media (min-width: 1200px) {
  .inks__paper { padding: var(--spacing-12); }
  .inks__drums { grid-column: 1 / 4; }
  .inks__trial { grid-column: 4 / 9; }
  .inks__grid { grid-column: 9 / 13; grid-row: 2; }
}

/* 드럼 토글 */
.inks__drums { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-2); align-content: start; }
@media (min-width: 768px) { .inks__drums { grid-template-columns: minmax(0, 1fr); } }
.drum {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--spacing-3);
  min-height: 56px; padding: var(--spacing-2) var(--spacing-3) 14px;
  background: var(--color-paper); color: var(--color-ink);
  border: 1px solid var(--color-ink); border-radius: var(--radius-sheet);
  text-align: left; cursor: pointer;
  transition: transform var(--duration-press) var(--ease-press);
}
.drum__n { font-family: var(--font-display); font-size: 28px; line-height: 1; }
.drum__t { display: grid; line-height: 1.25; }
.drum__name { font-weight: 600; }
.drum__hex { font-size: var(--text-small); color: var(--color-ink-muted); }
.drum__tag {
  position: absolute; top: 6px; right: 6px;
  padding: 1px var(--spacing-1);
  border: 1px solid var(--color-ink); border-radius: var(--radius-sheet);
  font-size: var(--text-micro); font-weight: 700; line-height: 1.4;
}
.drum__tag:empty { display: none; }
.drum__band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--ink); transform-origin: left center; scale: 0.34 1;
  transition: scale var(--duration-lift) var(--ease-out);
}
.drum[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-ink); }
.drum[aria-pressed="true"] .drum__band { scale: 1 1; }
.drum:active { transform: translate(1px, 1px); }
@media (hover: hover) and (pointer: fine) { .drum:hover .drum__band { scale: 1 1; } }

/* 시험 판 */
.trial {
  position: relative; isolation: isolate;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-ink);
}
@media (min-width: 768px) { .trial { aspect-ratio: 1; } }
.trial__layer {
  position: absolute; inset: 7%;
  display: grid; justify-items: center;
  opacity: 0; transition: opacity var(--duration-swap) var(--ease-out);
}
.trial__layer.is-on { opacity: 1; }
.trial__ov { container-type: inline-size; width: auto; height: 100%; aspect-ratio: 1; }
.trial__glyph {
  position: absolute; left: 36%; top: 6%;
  font-family: var(--font-display); font-size: 58cqi; line-height: 1;
}
.readout {
  display: flex; align-items: center; gap: var(--spacing-3);
  min-height: 44px;
  font-size: var(--text-small); font-weight: 500;
}
.readout__sw { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sheet); }

/* 어긋남 슬라이더 — 진짜 range 는 투명하게 위에, 보이는 ⊕ 은 --misreg 를 읽어 선다 */
.misreg { display: grid; gap: var(--spacing-1); }
.misreg__top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-small); font-weight: 600; }
.misreg__track { position: relative; height: 44px; }
.misreg__rule { position: absolute; left: 14px; right: 14px; top: 50%; height: 1px; background: var(--color-ink); }
.misreg__thumb {
  position: absolute; top: 50%;
  left: calc(14px + (100% - 28px) * var(--misreg) / 3);
  width: 28px; height: 28px; translate: -50% -50%;
  background: var(--color-paper); border-radius: var(--radius-dot);
  pointer-events: none;
}
.misreg__thumb .ov { width: 100%; height: 100%; }
.misreg__thumb .ov__b { translate: 0 0; }
.misreg__input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.misreg__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 44px; }
.misreg__input::-moz-range-thumb { width: 28px; height: 44px; border: 0; }
.misreg__track:has(.misreg__input:focus-visible) .misreg__thumb { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.misreg__track:has(.misreg__input:active) .misreg__thumb .ov__b { translate: 3px -2px; }
@media (hover: hover) and (pointer: fine) { .misreg__track:hover .reg svg { stroke-width: 2.4; } }
.misreg__ticks { position: relative; height: 18px; font-size: var(--text-micro); color: var(--color-ink-muted); }
.misreg__ticks span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.misreg__ticks span:nth-child(1) { left: 14px; }
.misreg__ticks span:nth-child(2) { left: calc(14px + (100% - 28px) / 3); }
.misreg__ticks span:nth-child(3) { left: calc(14px + (100% - 28px) * 2 / 3); }
.misreg__ticks span:nth-child(4) { left: calc(100% - 14px); }

/* 겹침 격자 — 칸에 글자 없음 */
.inks__gh { margin-bottom: var(--spacing-3); font-size: var(--text-small); font-weight: 600; }
.grid7 {
  display: grid; grid-template-columns: 18px repeat(7, minmax(0, 1fr)); gap: 2px;
  max-width: calc(18px + 7 * 64px + 14px);
}
.gh { align-self: center; justify-self: center; font-family: var(--font-display); font-size: var(--text-micro); line-height: 1; }
.gh--col { align-self: start; padding-top: var(--spacing-1); }
.cell {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 0;
  background: var(--c); cursor: pointer;
  transition: scale var(--duration-press) var(--ease-press);
}
.cell__mk { display: none; width: 46%; aspect-ratio: 1; }
.cell__mk .reg-wrap { width: 100%; height: 100%; }
.cell__mk .ov__a { color: var(--color-paper); }
.cell__mk .ov__b { display: none; }
.cell[aria-pressed="true"] .cell__mk { display: block; }
.cell:focus-visible { outline: 0; z-index: 1; box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 5px var(--color-ink); }
.cell:active { scale: 0.94; }
@media (hover: hover) and (pointer: fine) { .cell:hover { box-shadow: inset 0 0 0 2px var(--color-paper); } }

/* ── 홈 H3 적용 사례 벽 ─────────────────────────────── */
.wallc__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-8) var(--spacing-3);
  margin-top: var(--spacing-8);
}
.wallc__poster { grid-column: 1 / -1; }
.wallc__rcpt { grid-column: 1 / -1; justify-self: center; width: min(100%, 320px); }
.art-paper { display: block; padding: var(--spacing-3); }
.art { container-type: inline-size; }
.art--a { aspect-ratio: 100 / 141; }
.art--sq { aspect-ratio: 1; }
.art__glyph {
  position: absolute; left: 30%; top: 38%;
  font-family: var(--font-display); font-size: 54cqi; line-height: 1;
}
.art__num {
  position: absolute; left: 8%; top: 5%;
  font-family: var(--font-display); font-size: 44cqi; line-height: 1;
}
.art-sheet { position: relative; display: block; }
.art-sheet__cut {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  fill: none; stroke: var(--color-ink-muted); stroke-width: 0.5; stroke-dasharray: 1.6 1.4;
}
@media (min-width: 768px) {
  .wallc__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-10) var(--spacing-gutter); }
  .wallc__zine { grid-column: 1 / 4; }
  .wallc__stk { grid-column: 4 / 7; }
  .wallc__rcpt { grid-column: 2 / 6; }
}
@media (min-width: 1200px) {
  /* 왼 기둥 포스터 벽 사진 + 스티커 시트, 오른 기둥 진 + 영수증 — 행 높이가 서로 묶이지 않게 걸쳐 둔다 */
  .wallc__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "pst pst pst pst pst pst pst . zin zin zin zin"
      "pst pst pst pst pst pst pst . rcp rcp rcp rcp"
      ". . stk stk stk stk stk . rcp rcp rcp rcp";
    row-gap: var(--spacing-8);
  }
  .wallc__poster { grid-area: pst; }
  .wallc__zine { grid-area: zin; width: min(100%, 300px); }
  .wallc__stk { grid-area: stk; justify-self: end; width: min(100%, 360px); }
  .wallc__rcpt { grid-area: rcp; justify-self: end; margin-right: var(--spacing-8); }
}

/* 영수증 — 톱니 가장자리(clip-path 는 생성기가 style 로 넣는다) */
.receipt-wrap {
  display: grid; max-width: 320px;
  filter: drop-shadow(0 14px 12px color-mix(in srgb, var(--color-ink) 36%, transparent));
}
.receipt {
  position: relative; isolation: isolate;
  padding: var(--spacing-6) var(--spacing-5) 104px;
  background: var(--color-paper); color: var(--color-ink);
  font-size: var(--text-small); line-height: 1.5;
}
.receipt__edge { display: block; width: 100%; height: 8px; fill: var(--color-paper); }
.receipt__edge--t { margin-bottom: -1px; }
.receipt__edge--b { margin-top: -1px; rotate: 180deg; }
.receipt__mark {
  text-align: center;
  font-family: var(--font-mark); font-weight: 900; font-stretch: 125%; font-size: 22px; line-height: 1.2;
}
.receipt__sub { padding-bottom: var(--spacing-3); text-align: center; color: var(--color-ink-muted); border-bottom: 1px dashed var(--color-ink); }
.receipt__rows { padding-top: var(--spacing-2); }
.receipt__rows div { display: flex; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-1) 0; }
.receipt__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--spacing-2); padding-top: var(--spacing-3);
  border-top: 2px solid var(--color-ink); font-weight: 700;
}
.receipt__sum { font-family: var(--font-display); font-size: var(--text-numeral-s); font-weight: 400; line-height: 1.1; }
.receipt__foot { margin-top: var(--spacing-3); color: var(--color-ink-muted); }
.receipt__stamp { position: absolute; right: 28px; bottom: 20px; font-size: 78px; }

/* ── 홈 H4 아이덴티티 한 장 ─────────────────────────────── */
.system__paper { display: grid; gap: var(--spacing-8); padding: var(--spacing-8) var(--spacing-4); }
.system__parts, .decomp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-3); }
.part { container-type: inline-size; padding: var(--spacing-3); border: 1px solid var(--color-ink); border-radius: var(--radius-sheet); }
.part__mk { font-size: 11.6cqi; margin-block: var(--spacing-2); }
.part figcaption { margin-top: var(--spacing-2); font-size: var(--text-small); font-weight: 500; line-height: 1.4; }
.system__rules { display: grid; gap: var(--spacing-5); justify-items: start; }
.rules { display: grid; gap: var(--spacing-3); counter-reset: r; }
.rules li { position: relative; padding-left: 2.25em; counter-increment: r; }
.rules li::before {
  content: counter(r); position: absolute; left: 0; top: -0.1em;
  font-family: var(--font-display); font-size: 1.4em; line-height: 1;
}
@media (min-width: 1024px) {
  .system__paper { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--spacing-12); padding: var(--spacing-12); }
}

/* ── 홈 H5 주문 순서 ─────────────────────────────── */
.order__grid { display: grid; gap: var(--spacing-8); margin-top: var(--spacing-8); }
.steps-s { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-3); }
.step-s { display: grid; gap: var(--spacing-2); align-content: start; padding: var(--spacing-5); }
.step__n { font-family: var(--font-display); font-size: var(--text-numeral); line-height: 1; width: max-content; }
.step-s p { font-size: var(--text-small); line-height: 1.55; }
.price-slip { display: grid; gap: var(--spacing-3); justify-items: start; align-content: start; padding: var(--spacing-6) var(--spacing-5); }
.price-slip__k { font-weight: 600; }
.price-slip__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-2); }
.price-slip__num { font-family: var(--font-display); font-size: var(--text-numeral); line-height: 1; }
.price-slip__from { font-size: var(--text-h3); font-weight: 800; }
@media (min-width: 768px) {
  .order__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-gutter); }
  .steps-s { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-gutter); }
  .price-slip { grid-column: 7 / 13; }
}
@media (min-width: 1200px) {
  .steps-s { grid-column: 1 / 9; }
  .price-slip { grid-column: 9 / 13; margin-top: var(--spacing-10); }
}

/* ── 공지·위치 ─────────────────────────────── */
.visit__grid { display: grid; gap: var(--spacing-10); margin-top: var(--spacing-8); }
.notice { display: grid; gap: var(--spacing-4); padding: var(--spacing-8) var(--spacing-5) var(--spacing-6); }
.notice__h { font-size: var(--text-h3); font-weight: 800; line-height: var(--leading-heading); }
.notice__dl div {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--spacing-3);
  padding: var(--spacing-2) 0; border-top: 1px solid var(--color-ink);
}
.notice__dl dt { font-weight: 600; }
.notice__p { max-width: 36ch; padding-right: 92px; font-size: var(--text-small); color: var(--color-ink-muted); }
.notice__stamp { position: absolute; right: 22px; bottom: 18px; font-size: 88px; }
@media (min-width: 1024px) {
  .visit__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-gutter); align-items: start; }
  .notice { grid-column: 1 / 6; padding: var(--spacing-10) var(--spacing-8) var(--spacing-8); }
  .visit__photo { grid-column: 6 / 13; margin-top: var(--spacing-12); }
}

/* ── 쪽 표지(아이덴티티·주문) ─────────────────────────────── */
.mast + main > .pagehead, .bar + main > .pagehead { margin-top: var(--spacing-6); }
.pagehead__paper { padding: var(--spacing-10) var(--spacing-5) var(--spacing-8); }
.decomp { margin-top: var(--spacing-8); }
@media (max-width: 767px) { .decomp { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) { .pagehead__paper { padding: var(--spacing-12) var(--spacing-10) var(--spacing-10); } }
@media (min-width: 1200px) { .pagehead__paper { padding: var(--spacing-16) var(--spacing-12) var(--spacing-12); } }

/* ── 아이덴티티 I2 변형 ─────────────────────────────── */
.variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4) var(--spacing-3); margin-top: var(--spacing-8); }
.var { display: grid; gap: var(--spacing-1); align-content: start; padding: var(--spacing-4); }
.var__fig {
  container-type: inline-size; display: grid; place-items: center;
  min-height: 112px; margin-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-ink);
}
.var__mk { font-size: 11.4cqi; }
.var__mk--one { color: inherit; }
.var__t { font-weight: 700; }
.var__s { font-size: var(--text-small); color: var(--color-ink-muted); line-height: 1.45; }
.var__stamp .stamp { font-size: 92px; }
.favs { display: flex; align-items: end; gap: var(--spacing-4); }
.fav {
  display: grid; place-items: center; overflow: hidden;
  background: var(--color-paper); border: 1px solid var(--color-ink);
  font-family: var(--font-mark); font-weight: 900; font-stretch: 125%; line-height: 1;
}
.fav--32 { width: 32px; height: 32px; font-size: 26px; --misreg-unit: 0.6px; }
.fav--16 { width: 16px; height: 16px; font-size: 13px; --misreg-unit: 0.3px; }
@media (min-width: 1024px) {
  .variants { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-gutter); }
  .var { padding: var(--spacing-6); }
  .var__fig { min-height: 176px; }
}

/* ── 아이덴티티 I3 색 규칙 ─────────────────────────────── */
.colors { display: grid; gap: var(--spacing-8); padding: var(--spacing-8) var(--spacing-4); }
.bands { display: grid; }
.band {
  display: grid; align-items: center; gap: var(--spacing-1) var(--spacing-3);
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  grid-template-areas: "n ink ink" "n name hex" "n name hex2";
  padding: var(--spacing-3) 0; border-top: 1px solid var(--color-ink);
}
.band__n { grid-area: n; align-self: start; font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.1; }
.band__ink { grid-area: ink; width: 100%; max-width: 160px; height: 28px; background: var(--ink); } /* 원칙 3 — 견본 띠도 한 덩이 160px 이하 */
.band__name { grid-area: name; font-weight: 600; }
.band__hex { grid-area: hex; font-size: var(--text-small); color: var(--color-ink-muted); text-align: right; }
.band__hex + .band__hex { grid-area: hex2; }
.colors__rules li { max-width: 40ch; }
.colors__link { justify-self: start; }
@media (min-width: 768px) {
  .band {
    grid-template-columns: 2.5rem 160px minmax(5.5rem, 1fr) 7.5rem 8.5rem;
    grid-template-areas: "n ink name hex hex2";
    min-height: 56px; padding: var(--spacing-2) 0;
  }
  .band__n { align-self: center; }
  .band__hex { text-align: left; }
}
@media (min-width: 1024px) {
  .colors { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-10) var(--spacing-gutter); padding: var(--spacing-12); }
  .colors__head { grid-column: 1 / -1; }
  .bands { grid-column: 1 / 8; grid-row: 2 / 4; }
  .colors__rules { grid-column: 8 / 13; grid-row: 2; }
  .colors__link { grid-column: 8 / 13; grid-row: 3; align-self: start; }
}

/* ── 아이덴티티 I4 서체 ─────────────────────────────── */
.types { display: grid; gap: var(--spacing-6); margin-top: var(--spacing-8); }
.type { container-type: inline-size; display: grid; gap: var(--spacing-4); align-content: start; padding: var(--spacing-6) var(--spacing-5); }
.type__name { padding-bottom: var(--spacing-2); border-bottom: 1px solid var(--color-ink); font-size: var(--text-small); font-weight: 700; }
.type__gasoek { display: grid; gap: var(--spacing-3); }
.type__big { font-family: var(--font-display); font-size: 120px; line-height: 1; }
.type__row { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-6); font-family: var(--font-display); font-size: 36px; line-height: 1.1; }
.type__any { font-family: var(--font-mark); font-weight: 900; font-stretch: 125%; font-size: 11.6cqi; line-height: 1; padding-block: var(--spacing-6); }
.type__pt { font-size: var(--text-h3); font-weight: 800; letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.type__body { font-size: 1rem; }
.type__rule { padding-top: var(--spacing-3); border-top: 1px dashed var(--color-ink); font-size: var(--text-small); color: var(--color-ink-muted); }
@media (min-width: 1024px) { .types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-gutter); } }

/* ── 아이덴티티 I5 판형 ─────────────────────────────── */
.fmts { display: grid; gap: var(--spacing-8); padding: var(--spacing-8) var(--spacing-4); }
.fmts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-4); align-items: end; }
.fmt { display: grid; gap: var(--spacing-1); }
.fmt__box { position: relative; width: 100%; margin-bottom: var(--spacing-3); border: 1px solid var(--color-ink); isolation: isolate; }
.fmt--a { aspect-ratio: 1 / 1.414; }
.fmt--sq { aspect-ratio: 1; }
.fmt__trim { position: absolute; inset: 9%; border: 1px dashed var(--color-ink-muted); }
.fmt__reg { position: absolute; width: 14px; height: 14px; translate: -50% -50%; }
.fmt__reg--t { left: 50%; top: 4.5%; }
.fmt__reg--b { left: 50%; top: 95.5%; }
.fmt__reg--l { left: 4.5%; top: 50%; }
.fmt__reg--r { left: 95.5%; top: 50%; }
.fmt__t { font-weight: 700; }
.fmt__s { font-size: var(--text-small); color: var(--color-ink-muted); }
@media (min-width: 768px) {
  .fmts { padding: var(--spacing-10); }
  .fmts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-gutter); }
}
@media (min-width: 1200px) { .fmts { padding: var(--spacing-12); } }

/* ── 아이덴티티 I6 적용 사례 ─────────────────────────────── */
.apply { display: grid; gap: var(--spacing-16); margin-top: var(--spacing-8); }
.apply__item { display: grid; gap: var(--spacing-4); align-items: start; }
.apply__art { display: grid; justify-items: start; }
.art-paper--l { width: min(100%, 300px); }
.art-paper--m { width: 150px; }
.apply__stk { position: relative; display: block; width: min(100%, 320px); padding-bottom: 72px; }
.apply__stk .art-paper--m { position: absolute; right: -8px; bottom: 0; rotate: 4deg; }
.apply__spec { padding: var(--spacing-5); }
.spec { width: 100%; margin-top: var(--spacing-3); border-collapse: collapse; font-size: var(--text-small); }
.spec th, .spec td { padding: var(--spacing-2) 0; border-top: 1px solid var(--color-ink); text-align: left; vertical-align: top; }
.spec th { width: 4rem; padding-right: var(--spacing-3); font-weight: 600; }
@media (min-width: 768px) {
  .apply__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-gutter); }
}
@media (min-width: 1024px) {
  .apply { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16) var(--spacing-gutter); }
}

/* ── 주문 O2 단계 ─────────────────────────────── */
.steps { display: grid; gap: var(--spacing-6); }
.step { display: grid; gap: var(--spacing-3); align-content: start; padding: var(--spacing-6) var(--spacing-5); }
.step .step__n { font-size: var(--text-step); }
.step__s { font-size: 1rem; }
.step__dg { margin-top: var(--spacing-2); }
.step__dg .ph { width: 100%; }
.dg { display: flex; align-items: center; gap: var(--spacing-3); min-height: 120px; }
.dg__sheet {
  display: block; width: 64px; aspect-ratio: 3 / 4; padding: 6px;
  background: var(--color-paper); border: 1px solid var(--color-ink);
}
.dg__sheet svg { width: 100%; height: 100%; fill: var(--color-ink-muted); }
.dg__sheet--a svg { fill: var(--color-print-pink); }
.dg__sheet--b svg { fill: var(--color-print-blue); }
.dg__sum { position: relative; display: block; width: 84px; aspect-ratio: 3 / 4; padding: 6px; border: 2px solid var(--color-ink); margin-left: var(--spacing-3); }
.dg__ov { height: 100%; }
.more {
  position: relative; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  min-height: 44px; padding: 0 var(--spacing-1);
  background: none; border: 0; font-weight: 600; cursor: pointer;
  transition: transform var(--duration-press) var(--ease-press);
}
.more__t { position: relative; }
.more__t::before, .more__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; opacity: 0; }
.more__t::before { background: var(--color-print-pink); }
.more__t::after {
  background: var(--color-drum-blue); mix-blend-mode: multiply;
  translate: calc(var(--misreg) * var(--misreg-unit)) calc(var(--misreg) * var(--misreg-unit) * -0.5);
}
.more__i { position: relative; width: 14px; height: 14px; }
.more__i::before, .more__i::after { content: ""; position: absolute; background: var(--color-ink); }
.more__i::before { left: 0; right: 0; top: 6px; height: 2px; }
.more__i::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.more[aria-expanded="true"] .more__i::after { display: none; }
.more:active { transform: translate(1px, 1px); }
@media (hover: hover) and (pointer: fine) { .more:hover .more__t::before, .more:hover .more__t::after { opacity: 1; } }
.step__more { display: grid; gap: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px dashed var(--color-ink); font-size: var(--text-small); }
.step__more[hidden] { display: none; }
@keyframes open-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: no-preference) {
  .step__more:not([hidden]) { animation: open-in var(--duration-open) var(--ease-out); }
}
.strip--mini { --tilt: 1deg; width: min(100%, 240px); margin-top: var(--spacing-2); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-gutter); align-items: start; } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step:nth-child(2) { margin-top: var(--spacing-8); }
  .step:nth-child(3) { margin-top: var(--spacing-16); }
  .step:nth-child(4) { margin-top: var(--spacing-24); }
}

/* ── 주문 O3 가격표 ─────────────────────────────── */
.prices { display: grid; gap: var(--spacing-8); padding: var(--spacing-8) var(--spacing-4); }
.prices__from { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-1) var(--spacing-3); margin-top: var(--spacing-4); }
.prices__num { font-family: var(--font-display); font-size: var(--text-numeral); line-height: 1; }
.prices__fromt { font-size: var(--text-h3); font-weight: 800; }
.prices__k { flex-basis: 100%; font-size: var(--text-small); font-weight: 500; color: var(--color-ink-muted); }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { padding: var(--spacing-4) var(--spacing-3); border-bottom: 1px solid var(--color-ink); text-align: right; }
.ptable thead th { padding-block: var(--spacing-3); border-bottom-width: 2px; font-size: var(--text-small); font-weight: 600; }
.ptable th:first-child { padding-left: 0; text-align: left; }
.ptable tbody th { font-size: var(--text-h3); font-weight: 800; }
.ptable .is-ex { background: var(--color-paper-ph); font-weight: 800; }
.extras { display: grid; gap: var(--spacing-2); }
.extras li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-1) var(--spacing-4); padding-top: var(--spacing-2); border-top: 1px dashed var(--color-ink); font-size: var(--text-small); }
.extras li span:first-child { font-weight: 600; }
@media (max-width: 767px) {
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ptable tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-1) var(--spacing-2); padding: var(--spacing-4) 0; border-bottom: 1px solid var(--color-ink); }
  .ptable tbody th { grid-column: 1 / -1; padding: 0 0 var(--spacing-1); border: 0; }
  .ptable td { display: block; padding: var(--spacing-1) 0; border: 0; text-align: left; }
  .ptable td::before { content: attr(data-l); display: block; font-size: var(--text-micro); font-weight: 600; color: var(--color-ink-muted); }
  .ptable td:first-of-type { grid-column: 1 / -1; grid-row: 3; }
  .ptable .is-ex { padding-inline: var(--spacing-1); }
}
@media (min-width: 768px) {
  .prices { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-gutter); padding: var(--spacing-10); }
  .prices__head { grid-column: 1 / -1; }
  .ptable { grid-column: 1 / -1; }
  .extras { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3) var(--spacing-gutter); }
}
@media (min-width: 1200px) {
  .prices { padding: var(--spacing-12); }
  .prices__head { grid-column: 1 / 5; }
  .ptable { grid-column: 5 / 13; }
  .extras { grid-column: 5 / 13; }
}

/* ── 주문 O4 견적 예시 ─────────────────────────────── */
.quote__text { display: grid; gap: var(--spacing-3); justify-items: start; }
.quote__text .btn { margin-top: var(--spacing-3); }
.quote__pin { width: min(100%, 320px); margin-top: var(--spacing-8); }
@media (min-width: 768px) {
  .quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); align-items: start; }
  .quote .wall-h { grid-column: 1 / -1; }
  .quote__text { grid-column: 1 / 7; margin-top: var(--spacing-6); }
  .quote__pin { grid-column: 8 / 12; margin-top: var(--spacing-6); }
}

/* ── 꼬리 ─────────────────────────────── */
.foot { margin-top: var(--spacing-section); }
.foot__paper { display: grid; gap: var(--spacing-4); padding: var(--spacing-10) var(--spacing-6); }
.foot__reg { position: absolute; width: 16px; height: 16px; }
.foot__reg--tl { top: 10px; left: 10px; }
.foot__reg--tr { top: 10px; right: 10px; }
.foot__reg--bl { bottom: 10px; left: 10px; }
.foot__reg--br { bottom: 10px; right: 10px; }
.foot__mark { display: flex; align-items: center; width: max-content; min-height: 44px; font-size: 34px; color: inherit; text-decoration: none; }
.foot__note { font-size: var(--text-small); }
.foot__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-4); }
.foot__back { font-size: var(--text-small); }
@media (min-width: 1024px) {
  .foot__paper { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-4) var(--spacing-10); padding: var(--spacing-10) var(--spacing-12); }
  .foot__back { grid-column: 1 / -1; }
}

/* ── 움직임 줄이기 — 위치는 그대로, 움직임만 0 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn--sub::before, .btn--sub::after, .drum, .drum__band, .cell,
  .bar, .bar.is-on, .trial__layer, a.pin, .pin .paper, .pin .ph, .pin .photo, .more { transition: none; }
  .btn--key:active, .btn--sub:active, .drum:active, .more:active { transform: none; }
  .btn--key:active, .btn--key:hover:active { box-shadow: 2px 2px 0 0 var(--color-drum-blue); border-color: var(--color-drum-blue); }
  .btn--sub:active, .drum:active { border-color: var(--color-drum-blue); }
  .cell:active { scale: none; box-shadow: inset 0 0 0 3px var(--color-paper); }
  a.pin:hover, a.pin:active { rotate: var(--tilt, 0deg); translate: none; }
}