/* clayday — 작업대 콜라주. 색·서체·간격·그림자·이징은 tokens.css 의 var() 만 쓴다.
 * 개별 변형 속성(rotate · scale · translate)과 transform 을 갈라 쓴다 — 기울기(rotate)·내려놓기(scale)·누름(transform)이 서로 덮지 않게.
 */

:root {
  /* 가위 자국 · 톱니 · 찢은 가장자리 — 모양 값이라 색 토큰이 아니다 */
  --clip-tape: polygon(0 0, 100% 0, calc(100% - 4px) 50%, 100% 100%, 0 100%, 4px 50%);
  --clip-zig-bottom: polygon(0 0, 100% 0, 100.00% calc(100% - 9px), 97.92% 100%, 95.83% calc(100% - 9px), 93.75% 100%, 91.67% calc(100% - 9px), 89.58% 100%, 87.50% calc(100% - 9px), 85.42% 100%, 83.33% calc(100% - 9px), 81.25% 100%, 79.17% calc(100% - 9px), 77.08% 100%, 75.00% calc(100% - 9px), 72.92% 100%, 70.83% calc(100% - 9px), 68.75% 100%, 66.67% calc(100% - 9px), 64.58% 100%, 62.50% calc(100% - 9px), 60.42% 100%, 58.33% calc(100% - 9px), 56.25% 100%, 54.17% calc(100% - 9px), 52.08% 100%, 50.00% calc(100% - 9px), 47.92% 100%, 45.83% calc(100% - 9px), 43.75% 100%, 41.67% calc(100% - 9px), 39.58% 100%, 37.50% calc(100% - 9px), 35.42% 100%, 33.33% calc(100% - 9px), 31.25% 100%, 29.17% calc(100% - 9px), 27.08% 100%, 25.00% calc(100% - 9px), 22.92% 100%, 20.83% calc(100% - 9px), 18.75% 100%, 16.67% calc(100% - 9px), 14.58% 100%, 12.50% calc(100% - 9px), 10.42% 100%, 8.33% calc(100% - 9px), 6.25% 100%, 4.17% calc(100% - 9px), 2.08% 100%, 0.00% calc(100% - 9px));
  --clip-zig-top: polygon(0.00% 9px, 2.08% 0, 4.17% 9px, 6.25% 0, 8.33% 9px, 10.42% 0, 12.50% 9px, 14.58% 0, 16.67% 9px, 18.75% 0, 20.83% 9px, 22.92% 0, 25.00% 9px, 27.08% 0, 29.17% 9px, 31.25% 0, 33.33% 9px, 35.42% 0, 37.50% 9px, 39.58% 0, 41.67% 9px, 43.75% 0, 45.83% 9px, 47.92% 0, 50.00% 9px, 52.08% 0, 54.17% 9px, 56.25% 0, 58.33% 9px, 60.42% 0, 62.50% 9px, 64.58% 0, 66.67% 9px, 68.75% 0, 70.83% 9px, 72.92% 0, 75.00% 9px, 77.08% 0, 79.17% 9px, 81.25% 0, 83.33% 9px, 85.42% 0, 87.50% 9px, 89.58% 0, 91.67% 9px, 93.75% 0, 95.83% 9px, 97.92% 0, 100.00% 9px, 100% 100%, 0 100%);
  --clip-torn-top: polygon(0.0% 3px, 2.9% 6px, 5.9% 5px, 8.8% 7px, 11.8% 3px, 14.7% 2px, 17.6% 8px, 20.6% 5px, 23.5% 2px, 26.5% 4px, 29.4% 4px, 32.4% 9px, 35.3% 3px, 38.2% 6px, 41.2% 5px, 44.1% 7px, 47.1% 3px, 50.0% 2px, 52.9% 8px, 55.9% 5px, 58.8% 2px, 61.8% 4px, 64.7% 4px, 67.6% 9px, 70.6% 3px, 73.5% 6px, 76.5% 5px, 79.4% 7px, 82.4% 3px, 85.3% 2px, 88.2% 8px, 91.2% 5px, 94.1% 2px, 97.1% 4px, 100.0% 4px, 100% 100%, 0 100%);
  --lump-size: 2.75rem;
  --dent-size: 3.5rem;
  --print-size: 3.25rem;
}

@media (min-width: 1024px) {
  :root {
    --lump-size: 4rem;
    --dent-size: 4.75rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--spacing-4);
}

body {
  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);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

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

.skip {
  position: absolute;
  left: var(--spacing-4);
  top: calc(-1 * var(--spacing-9));
  z-index: 60;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-ink);
  color: var(--color-on-ink);
  text-decoration: none;
}
.skip:focus-visible { top: var(--spacing-4); }

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

/* ── 글자 ─────────────────────────────────────────────────────────── */
.display,
.h2,
.h3,
.mark,
.price {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-variation-settings: var(--font-heading-variation);
  font-variant-numeric: lining-nums;
}

.display {
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  font-variation-settings: var(--font-display-variation);
}

.h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  font-variation-settings: var(--font-display-variation);
}

.h2 { text-wrap: balance; }
@media (max-width: 719px) {
  .h2 br { display: none; }
  .final__photo { display: none; }
}

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

.field {
  font-family: var(--font-body);
  font-size: var(--text-field);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--text-field--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-field);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  max-width: 32em;
}
.lead em {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--font-heading-variation);
}

.mark {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.ico {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* 글자 링크 — 코발트 글자 + 손으로 그은 밑줄 */
.link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
  text-decoration-skip-ink: auto;
}
.link:hover { text-decoration-thickness: 2.5px; }
.link--btn { font-size: var(--text-body); }

/* ── 라벨 테이프 ──────────────────────────────────────────────────── */
.tape {
  --tilt: 0deg;
  --tape-bg: var(--color-ink);
  --tape-fg: var(--color-on-ink);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: 1.875rem;
  padding: var(--spacing-1) var(--spacing-3);
  font-family: var(--font-tape);
  font-size: var(--text-tape);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--text-tape--letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--tape-fg);
  text-shadow: var(--shadow-tape-emboss);
  rotate: var(--tilt);
}
.tape::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tape-bg);
  border-radius: var(--radius-tape);
  clip-path: var(--clip-tape);
  transition: box-shadow var(--duration-release) var(--ease-settle);
}
.tape--cobalt { --tape-bg: var(--color-accent); --tape-fg: var(--color-on-accent); }
.tape--paper { --tape-bg: var(--color-surface); --tape-fg: var(--color-ink); text-shadow: none; }
.tape--paper::before { box-shadow: inset 0 0 0 1px var(--color-line-faint); }
.tape--current { --tape-bg: var(--color-surface); --tape-fg: var(--color-ink); text-shadow: none; }
.tape--current::before { box-shadow: inset 0 0 0 1.5px var(--color-ink); }

.tape--lg {
  min-height: 3.25rem;
  padding-inline: var(--spacing-5);
  gap: var(--spacing-3);
  box-shadow: var(--shadow-rest);
}

/* T1 — 누르면 눌려 들어간다: 납작해지고 그림자가 안으로. 튐 0 */
.tape--lg,
.piece,
.slab-btn,
.rocker__opt,
.plan-tab {
  transition:
    transform var(--duration-release) var(--ease-settle),
    box-shadow var(--duration-release) var(--ease-settle);
}
.tape--lg:hover { box-shadow: var(--shadow-lift); }
.tape--lg:active,
.tape--lg.is-pressed {
  transform: translateY(2px) scale(1.03, 0.94);
  box-shadow: none;
  transition-duration: var(--duration-press);
  transition-timing-function: var(--ease-press);
}
.tape--lg:active::before,
.tape--lg.is-pressed::before { box-shadow: var(--shadow-press); }
.tape--cobalt.tape--lg:active { --tape-bg: var(--color-accent-press); }

/* T2 — 지문 자국: 단추당 하나, 뗀 자리에 남는다 */
[data-print] { position: relative; }
.print {
  position: absolute;
  z-index: 2;
  width: var(--print-size);
  aspect-ratio: 100 / 120;
  translate: -50% -50%;
  rotate: var(--print-rot, -12deg);
  background: url("/clayday/assets/thumbprint.svg?v=49c3e40d") center / contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
  animation: print-in 160ms var(--ease-settle) both;
}
@keyframes print-in { from { opacity: 0; } }

/* ── 머리 — label-strip (고정하지 않는다) ──────────────────────────── */
.strip {
  position: relative;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line-faint);
}
.strip__row {
  display: flex;
  align-items: stretch;
  min-height: var(--spacing-header-sm);
  padding-inline: var(--spacing-gutter);
  max-width: 100rem;
  margin-inline: auto;
}
.cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-1);
  min-height: 2.75rem;
  padding: var(--spacing-2) var(--spacing-4);
  border-inline-end: 1px solid var(--color-line-faint);
  color: inherit;
  text-decoration: none;
  text-align: start;
}
.cell .tape { transition: box-shadow var(--duration-release) var(--ease-settle); }
.cell:hover .tape { box-shadow: var(--shadow-rest); }
.cell:active .tape { transform: translateY(1px) scale(1.02, 0.95); }
.cell--mark { padding-inline-start: 0; flex: 1 1 auto; }
.cell--mark .cell__field { display: none; }
.cell--day { display: flex; }
.cell--menu { border-inline-end: 0; padding-inline-end: 0; }
.strip__nav { display: none; }

.menu {
  display: grid;
  justify-items: start;
  gap: var(--spacing-4);
  padding: var(--spacing-5) var(--spacing-gutter) var(--spacing-6);
  border-top: 1px dashed var(--color-line-faint);
}
.menu[hidden] { display: none; }
.menu .tape { padding-inline: var(--spacing-4); }
.menu__field { color: var(--color-on-ink); opacity: 0.8; text-shadow: none; margin-inline-end: var(--spacing-2); }

@media (min-width: 1024px) {
  .strip__row { min-height: var(--spacing-header); }
  .cell--mark { flex: 0 0 11.25rem; }
  .cell--mark .cell__field { display: block; }
  .cell--day,
  .cell--menu,
  .menu { display: none; }
  .menu:not([hidden]) { display: none; }
  .strip__nav { display: flex; flex: 1 1 auto; }
  .strip__nav .cell { flex: 1 1 7.5rem; }
  .strip__nav .cell--begin { flex: 0 0 auto; border-inline-end: 0; padding-inline-end: 0; align-items: flex-end; }
}

/* ── 구간 공통 ────────────────────────────────────────────────────── */
.band {
  position: relative;
  padding-block: var(--spacing-section);
}
.band__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--spacing-7);
  max-width: 100rem;
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}
.sec-head { display: grid; gap: var(--spacing-4); }

.band--paper {
  background: var(--color-surface);
  clip-path: var(--clip-torn-top);
}
.band--deep { background: var(--color-surface-deep); }
.band--deep .field { color: var(--color-ink); }

@media (min-width: 720px) {
  .band__in { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--spacing-gap); }
  .band__in > * { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .band__in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sec-head { grid-column: 1 / 9; }
}

/* 사진 — 무지 바탕이 흙 바탕으로 번져 이어진다(가장자리만 투명하게) */
.photo { width: 100%; height: auto; }
.photo--melt {
  --melt-x: 14%;
  --melt-y: 14%;
  mask-image:
    linear-gradient(to right, transparent, var(--color-ink) var(--melt-x), var(--color-ink) calc(100% - var(--melt-x)), transparent),
    linear-gradient(to bottom, transparent, var(--color-ink) var(--melt-y), var(--color-ink) calc(100% - var(--melt-y)), transparent);
  mask-composite: intersect;
}

/* 사진 바탕(촬영 종이)을 흙 바탕 #e3d2c2 에 맞춘다 — 사진마다 바탕 중앙값을 재서 고른 값(NOTES) */
.photo--melt, .photo--oval,
.photo--round { filter: saturate(0.72) brightness(1.045); }
[data-use$="lump"] { filter: saturate(0.6) brightness(1.08); }
[data-use="hero-scraps"] { filter: saturate(0.7) brightness(1.05); }
[data-use="feature-pieces"] { filter: saturate(0.65) brightness(1.04); }
[data-use="cta-slab"] { filter: saturate(0.65) brightness(1.07); }
[data-use="feature-tape"] { filter: saturate(0.64) brightness(1.06); }
[data-use="feature-week"] { filter: saturate(0.64) brightness(1.06); }
.photo--oval { mask-image: radial-gradient(ellipse closest-side, var(--color-ink) 74%, transparent); }
.photo--round { mask-image: radial-gradient(closest-side, var(--color-ink) 62%, transparent); mask-composite: add; }

/* 종이 쪽지 — 찢은 위 가장자리. 그림자는 바깥 drop-shadow(잘린 모양을 따라간다) */
.note {
  position: relative;
  padding: var(--spacing-6) var(--spacing-5) var(--spacing-5);
  background: var(--color-surface);
  display: grid;
  align-content: start;
  gap: var(--spacing-2);
}
.note--torn { clip-path: var(--clip-torn-top); }
.note .h3 { margin-block-end: var(--spacing-1); }
.lifted { filter: drop-shadow(0 12px 14px var(--color-line-faint)); }

/* T6 — 내려놓기: 살짝 큰 채로 있다가 제자리에 앉는다. 한 번만 */
[data-place] {
  transition: scale var(--duration-place) var(--ease-settle);
  transition-delay: calc(var(--i, 0) * var(--stagger-place));
}
[data-place].is-waiting { scale: 1.03; }

/* ── 1 히어로 ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--spacing-6);
  max-width: 100rem;
  margin-inline: auto;
  padding: var(--spacing-5) var(--spacing-gutter) var(--spacing-8);
}
.hero__copy { display: grid; justify-items: start; gap: var(--spacing-4); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3) var(--spacing-6); width: 100%; }
.hero__cta .tape--lg { flex: 1 1 100%; justify-content: center; }
.fieldline { margin-block-start: calc(-1 * var(--spacing-2)); }

.bench { position: relative; }
.bench__scraps { display: none; }
.bench__lump {
  position: absolute;
  z-index: 2;
  width: 4.5rem;
  right: calc(-1 * var(--spacing-2));
  bottom: calc(-1 * var(--spacing-6));
}
.bench__stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-4);
  transform: perspective(56rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 120ms var(--ease-settle);
}

/* 오늘 판 */
.board {
  position: relative;
  padding: var(--spacing-7) var(--spacing-3) var(--spacing-3);
  background: var(--color-surface);
  border-radius: var(--radius-slab);
  box-shadow: var(--shadow-lift);
}
.board__date {
  position: absolute;
  top: calc(-1 * var(--spacing-3));
  left: var(--spacing-5);
}
.wells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-2);
}
.well {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: calc(var(--dent-size) + var(--spacing-5));
}
.well::before {
  content: "";
  grid-area: 1 / 1;
  width: var(--dent-size);
  aspect-ratio: 1;
  border-radius: var(--radius-lump-2);
  background: var(--color-bg);
  box-shadow: var(--shadow-dent);
}
.well.is-target::before { box-shadow: var(--shadow-dent), 0 0 0 2px var(--color-line); }
.well > .piece { grid-area: 1 / 1; padding-top: calc((var(--dent-size) - var(--lump-size)) / 2); }
.board__count {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-5);
  text-align: end;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-variation-settings: var(--font-heading-variation);
}
.board__count .num { font-weight: 600; }

/* 트레이 — 바깥 판 + 동심 안쪽 판 */
.tray {
  padding: var(--spacing-1);
  background: var(--color-surface-deep);
  border-radius: var(--radius-slab);
}
.tray__in {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-1) var(--spacing-2);
  background: var(--color-bg);
  border-radius: var(--radius-slab-inner);
}
.slot {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: calc(var(--lump-size) + var(--spacing-5));
}
.slot:empty::before {
  content: "";
  width: var(--lump-size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed var(--color-line-faint);
}

/* 점토 조각 — 덩이 + 이름 한 몸 */
.piece {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--spacing-1);
  min-width: var(--spacing-touch);
  min-height: var(--spacing-touch);
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.piece__lump {
  width: var(--lump-size);
  aspect-ratio: 1;
  border-radius: var(--lump, var(--radius-lump));
  background: var(--clay);
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--duration-release) var(--ease-settle);
}
.piece__name {
  font-size: var(--text-field);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: var(--color-ink);
}
.piece:hover .piece__lump { box-shadow: var(--shadow-lift); }
.piece:active,
.piece.is-pressed {
  transform: translateY(2px) scale(1.03, 0.94);
  transition-duration: var(--duration-press);
  transition-timing-function: var(--ease-press);
}
.piece:active .piece__lump,
.piece.is-pressed .piece__lump { box-shadow: var(--shadow-press); }
.piece.is-dragging {
  position: relative;
  z-index: 20;
  cursor: grabbing;
  rotate: 3deg;
  transition: none;
  will-change: translate;
}
.piece.is-dragging .piece__lump { box-shadow: var(--shadow-lift); }
.piece.is-placed { cursor: pointer; }
.piece.is-placed .piece__lump { box-shadow: var(--shadow-press); }
.piece .print { --print-size: 2rem; }

.hint { font-size: var(--text-small); color: var(--color-ink-field); }

@media (min-width: 720px) {
  .hero__cta .tape--lg { flex: 0 0 auto; }
  .bench__lump { width: 6rem; right: 0; }
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gap);
    align-items: start;
    padding-block: var(--spacing-7) var(--spacing-8);
  }
  .hero { min-height: min(calc(100svh - var(--spacing-header) - var(--spacing-7)), 48.75rem); }
  .hero__copy { grid-column: 1 / 8; grid-row: 1; padding-block-start: var(--spacing-8); gap: var(--spacing-5); }
  .hero__copy .lead { max-width: min(32em, calc((100% + var(--spacing-gap)) * 6 / 7 - var(--spacing-gap))); }
  .bench { grid-column: 7 / 13; grid-row: 1; padding-block-start: 11rem; }
  .bench__scraps {
    display: block;
    position: absolute;
    z-index: 0;
    width: 70%;
    left: 0;
    top: 0;
    rotate: -3deg;
  }
  .bench__lump {
    width: 46%;
    right: -22%;
    top: -2.5rem;
    bottom: auto;
    z-index: 0;
  }
  .bench__stack { margin-inline-start: 12%; gap: var(--spacing-5); }
  .board { rotate: 1.5deg; padding: var(--spacing-7) var(--spacing-5) var(--spacing-4); }
  .board__count { position: static; margin-block-start: var(--spacing-2); }
  .well, .slot { min-height: calc(var(--dent-size) + var(--spacing-6)); }
  .wells { gap: var(--spacing-3); }
  .tray { margin-inline: var(--spacing-5) 6%; rotate: -0.8deg; }
  .tray__in { padding: var(--spacing-4) var(--spacing-3) var(--spacing-3); }
  .hint { padding-inline-start: var(--spacing-5); }
}

/* ── 2 제품 ───────────────────────────────────────────────────────── */
.band--paper { margin-block-start: calc(-1 * var(--spacing-3)); }
.product__copy { display: grid; gap: var(--spacing-6); max-width: 34rem; }
.fields { display: grid; gap: var(--spacing-4); border-top: 1px solid var(--color-line-faint); padding-top: var(--spacing-5); }
.fields div { display: grid; gap: var(--spacing-1); }
.fields dd { margin: 0; color: var(--color-ink); }

.app { position: relative; display: grid; gap: var(--spacing-3); }
.app__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: var(--spacing-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-1) var(--spacing-6);
  scrollbar-width: none;
}
.app__track::-webkit-scrollbar { display: none; }
.app__pager { justify-self: center; }

.screen {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: var(--spacing-3);
  padding: var(--spacing-5) var(--spacing-4);
  background: var(--color-clay-cream);
  border-radius: var(--radius-slab);
  box-shadow: 0 0 0 var(--spacing-2) var(--color-surface-deep), var(--shadow-lift);
  margin: var(--spacing-2);
  min-height: 30rem;
}
.screen__top { display: flex; justify-content: space-between; gap: var(--spacing-3); white-space: nowrap; }
.screen__title { font-family: var(--font-display); font-size: var(--text-h3); font-variation-settings: var(--font-heading-variation); font-weight: 500; }
.screen__count { font-weight: 600; }
.screen__foot { margin-block-start: auto; padding-top: var(--spacing-3); border-top: 1px dashed var(--color-line-faint); }
.screen__note { color: var(--color-ink-soft); font-size: var(--text-small); }
.mini-wells { display: flex; gap: var(--spacing-2); }
.mini {
  width: 2.25rem;
  aspect-ratio: 1;
  border-radius: var(--radius-lump-2);
  background: var(--color-bg);
  box-shadow: var(--shadow-dent);
}
.mini.is-filled { background: var(--clay); box-shadow: var(--shadow-press); }
.screen__mood { display: flex; align-items: center; gap: var(--spacing-3); min-height: 4rem; }
.app-sticker {
  display: grid;
  place-items: center;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-clay-sage);
  color: var(--color-ink);
  font-size: var(--text-field);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-rest);
  rotate: -6deg;
}
.app-sticker.is-peeled {
  background: transparent;
  color: var(--color-ink-soft);
  box-shadow: none;
  border: 1.5px dashed var(--color-line);
}
.screen__notes { display: grid; gap: var(--spacing-2); font-size: var(--text-small); }
.screen__notes li { padding-inline-start: var(--spacing-3); border-inline-start: 2px solid var(--color-line-faint); }
.mini-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-1); }
.mini-week li { display: grid; justify-items: center; gap: var(--spacing-1); }
.mini-week li::before {
  content: "";
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-paper);
  background: var(--color-bg);
  box-shadow: var(--shadow-dent);
}
.mini-week li.is-pressed::before { background: var(--color-clay-terracotta); box-shadow: var(--shadow-press); }
.mini-week .field { font-size: var(--text-field); letter-spacing: 0.04em; }

@media (min-width: 720px) {
  .app__track { grid-auto-columns: 22rem; }
}

@media (min-width: 1024px) {
  .product .sec-head { grid-column: 1 / 7; grid-row: 1; }
  .product__copy { grid-column: 1 / 6; grid-row: 2; }
  .app { grid-column: 7 / 13; grid-row: 1 / 3; }
  .app__track {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    padding: 0;
  }
  .screen { grid-area: 1 / 1; width: 52%; min-height: 28rem; }
  /* 뒷장은 Today 에 가리는 왼쪽 띠만큼 안여백을 둔다 — 낱말이 중간에서 잘리지 않게(qa-1 P2-2) */
  .screen--week { padding-inline-start: calc(var(--spacing-4) + var(--spacing-8)); }
  .screen--today { z-index: 1; rotate: 1deg; }
  .screen--week { justify-self: end; margin-block-start: var(--spacing-8); rotate: -4deg; }
  .app__pager { display: none; }
}

/* ── 3 기능 ───────────────────────────────────────────────────────── */
.feat { position: relative; display: grid; align-self: start; align-content: start; }
.feat__cap { max-width: 26rem; filter: drop-shadow(0 10px 12px var(--color-line-faint)); }
.feat__cap > :last-child { margin-block-start: var(--spacing-2); }
.feat__cap .note,
.feat .note { filter: none; }

.feat--2 { width: 88%; justify-self: end; }
.feat--3 { width: 88%; }

.sheet { position: relative; rotate: 2deg; }
.sheet__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-lift);
}
.sheet__slot {
  position: absolute;
  right: 8%;
  bottom: -2.5rem;
  width: 7.5rem;
  aspect-ratio: 1;
}
.sticker,
.sticker-ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.sticker-ghost { border: 1.5px dashed var(--color-line); background: var(--color-bg); }
.sticker {
  --corner: 0deg;
  background: var(--color-clay-sage);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-variation-settings: var(--font-heading-variation);
  box-shadow: var(--shadow-rest);
  rotate: -8deg;
  cursor: pointer;
  transition:
    translate var(--duration-peel) var(--ease-peel),
    rotate var(--duration-peel) var(--ease-peel),
    opacity var(--duration-peel) var(--ease-peel);
}
/* T4 — 올리면 모서리가 들린다(접힌 삼각형) */
.sticker::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 8%;
  width: 1.75rem;
  aspect-ratio: 1;
  background: var(--color-clay-cream);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  scale: 0;
  transform-origin: 100% 0;
  rotate: 12deg;
  transition: scale var(--duration-release) var(--ease-settle);
}
.sheet:hover .sticker::after,
.sheet.is-peek .sticker::after { scale: 1; }
.sticker.is-peeled {
  translate: -35% -110%;
  rotate: -24deg;
  opacity: 0;
  pointer-events: none;
}

.tapes { display: flex; flex-wrap: wrap; gap: var(--spacing-3); padding-block: var(--spacing-2); }

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--spacing-1);
  margin-block-start: var(--spacing-2);
}
.week li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--radius-paper);
  background: var(--color-bg);
  box-shadow: var(--shadow-dent);
  font-size: var(--text-field);
  font-weight: 700;
  color: var(--color-ink-soft);
}
.week li.is-pressed { background: var(--color-clay-cream); box-shadow: var(--shadow-press); color: var(--color-ink); }

.features .feat__cap { margin-block-start: calc(-1 * var(--spacing-6)); margin-inline: var(--spacing-5) 0; }
.feat--2 .feat__cap { margin-block-start: var(--spacing-8); }

@media (min-width: 1024px) {
  .features .band__in { row-gap: var(--spacing-8); }
  .feat--1 { grid-column: 1 / 8; grid-row: 2; }
  .feat--2 { grid-column: 8 / 13; grid-row: 2; width: auto; margin-block-start: var(--spacing-9); }
  .feat--3 { grid-column: 2 / 10; grid-row: 3; width: auto; }
  .feat--4 { grid-column: 4 / 13; grid-row: 4; }
  .features .feat__cap { position: relative; z-index: 1; }
  .feat--1 .feat__cap { justify-self: end; margin-block-start: -13rem; margin-inline-end: 2%; rotate: 0.6deg; }
  .feat--2 .feat__cap { margin-inline: var(--spacing-4) 0; rotate: -1deg; }
  .feat--3 .feat__cap { justify-self: end; margin-block-start: -6rem; margin-inline-end: -12%; rotate: 0.8deg; }
  .feat--4 .feat__cap { justify-self: start; margin-block-start: -7rem; margin-inline-start: -16%; rotate: -0.6deg; }
}

/* ── 4 작동 방식 ──────────────────────────────────────────────────── */
.how__body { display: grid; gap: var(--spacing-7); }
.receipt {
  display: grid;
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-7);
  background: var(--color-surface);
  clip-path: var(--clip-zig-bottom);
  counter-reset: none;
}
.receipt li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--spacing-5);
  row-gap: var(--spacing-1);
  padding-block: var(--spacing-5);
  border-bottom: 1px dashed var(--color-line-faint);
}
.receipt li:last-child { border-bottom: 0; }
.receipt__n {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 0.9;
  font-weight: 600;
  font-variation-settings: var(--font-display-variation);
  font-variant-numeric: lining-nums tabular-nums;
}
.receipt__v {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-variation-settings: var(--font-heading-variation);
}
.receipt__t { color: var(--color-ink-soft); max-width: 30em; }

.print-photo {
  position: relative;
  width: 72%;
  justify-self: end;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-7);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
  rotate: 2deg;
}
.print-photo img { width: 100%; height: auto; }
.pin {
  position: absolute;
  top: calc(-1 * var(--spacing-2));
  left: 50%;
  width: var(--spacing-5);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: var(--radius-lump);
  background: var(--color-clay-fired);
  box-shadow: var(--shadow-rest);
}

@media (min-width: 1024px) {
  .how__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gap); }
  .receipt { grid-column: 3 / 10; grid-row: 1; padding: var(--spacing-6) var(--spacing-7) var(--spacing-8); }
  .how__photo { grid-column: 9 / 13; grid-row: 1; width: auto; align-self: start; margin-block-start: var(--spacing-8); z-index: 1; }
}

/* ── 5 후기(가상) — 줄에 매단 꼬리표 ──────────────────────────────── */
.line-of-tags {
  position: relative;
  display: grid;
  gap: var(--spacing-5);
  padding-inline-start: var(--spacing-5);
}
.string {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: var(--color-line);
}
.tag {
  position: relative;
  display: grid;
  gap: var(--spacing-4);
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-5) var(--spacing-7);
  background: var(--color-surface);
  border-radius: var(--radius-tag);
  box-shadow: var(--shadow-rest);
}
.tag::before {
  content: "";
  position: absolute;
  left: var(--spacing-4);
  top: var(--spacing-5);
  width: var(--spacing-3);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: var(--shadow-dent);
}
.tag::after {
  content: "";
  position: absolute;
  top: calc(var(--spacing-5) + var(--spacing-2) - 0.5px);
  right: 100%;
  width: calc(var(--spacing-5) - var(--spacing-1));
  height: 1px;
  background: var(--color-line);
}
.tag blockquote p { font-family: var(--font-display); font-size: var(--text-lead); line-height: 1.35; font-variation-settings: var(--font-heading-variation); }
.tag figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-2) var(--spacing-3); }
.tag__who { font-weight: 600; }
.tag--b { rotate: 1deg; }
.tag--c { rotate: -0.6deg; }
.stat { display: grid; gap: var(--spacing-1); justify-items: start; padding-top: var(--spacing-3); }
.stat__n { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1; font-weight: 600; font-variation-settings: var(--font-display-variation); }

@media (min-width: 1024px) {
  .line-of-tags {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-6);
    padding: var(--spacing-3) 0 0;
  }
  .string { inset-block: auto; top: 0; inset-inline: 0; width: auto; height: 1px; rotate: -0.4deg; }
  .tag { --drop: 3rem; margin-block-start: var(--drop); padding: var(--spacing-7) var(--spacing-5) var(--spacing-5); }
  .tag::before { left: 50%; top: var(--spacing-4); translate: -50% 0; }
  .tag::after { top: calc(-1 * var(--drop)); right: auto; left: 50%; width: 1px; height: calc(var(--drop) + var(--spacing-4)); }
  .tag--a { flex: 0 1 30%; --drop: 2.5rem; rotate: -2deg; }
  .tag--b { flex: 0 1 24%; --drop: 6rem; rotate: 1.5deg; }
  .tag--c { flex: 0 1 28%; --drop: 1.5rem; rotate: -1deg; }
  .stat { flex: 1 0 8rem; margin-block-start: var(--spacing-8); justify-items: end; text-align: end; }
}

/* ── 6 요금 맛보기 · 가격표 ─────────────────────────────────────────── */
.teaser__copy { display: grid; justify-items: start; gap: var(--spacing-4); }
.teaser__copy > p:not(.field) { max-width: 30em; }
.teaser__tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3); align-items: start; }

.price-tag {
  --tilt: 0deg;
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--spacing-2);
  padding: var(--spacing-7) var(--spacing-5) var(--spacing-5);
  background: var(--color-surface);
  border-radius: var(--radius-tag);
  box-shadow: var(--shadow-rest);
  rotate: var(--tilt);
}
.price-tag__hole {
  position: absolute;
  top: var(--spacing-4);
  left: var(--spacing-5);
  width: var(--spacing-3);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface-deep);
  box-shadow: var(--shadow-dent);
}
.price {
  font-size: var(--text-price);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variation-settings: var(--font-display-variation);
  font-variant-numeric: lining-nums tabular-nums;
}
.price__cur { font-size: 0.45em; vertical-align: 0.9em; margin-inline-end: 0.04em; }
.price-tag--sm .price { font-size: var(--text-h2); }
.teaser__tags .price-tag--kiln { margin-block-start: var(--spacing-5); }

@media (min-width: 1024px) {
  .teaser .band__in { align-items: center; }
  .teaser__copy { grid-column: 1 / 8; }
  .teaser__tags { grid-column: 8 / 13; gap: 0; }
  .teaser__tags .price-tag--kiln { margin-block-start: var(--spacing-8); margin-inline-start: -12%; }
  .price-tag--sm .price { font-size: var(--text-price); }
}

/* ── 7 FAQ — 접힌 쪽지 ────────────────────────────────────────────── */
.folds { display: grid; gap: var(--spacing-3); }
.fold {
  padding: var(--spacing-1) var(--spacing-5);
  background: var(--color-surface);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-rest);
}
.fold:nth-child(even) { rotate: 0.4deg; }
.fold:nth-child(3n) { rotate: -0.5deg; }
.fold__q button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  width: 100%;
  min-height: var(--spacing-touch);
  padding-block: var(--spacing-4);
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: 500;
  font-variation-settings: var(--font-heading-variation);
}
/* 접힘 선 — 닫혀 있을 때만 */
.fold__q button::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-line-faint);
  transition: opacity var(--duration-unfold) var(--ease-unfold);
}
.fold__q button[aria-expanded="true"]::after { opacity: 0; }
.fold__q .ico { transition: rotate var(--duration-unfold) var(--ease-unfold); }
.fold__q button[aria-expanded="true"] .ico { rotate: 90deg; }
.fold__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-unfold) var(--ease-unfold);
}
.fold__a > div { overflow: hidden; }
.fold__a p { padding: 0 0 var(--spacing-4); max-width: 38em; color: var(--color-ink); }
.fold.is-open .fold__a { grid-template-rows: 1fr; }
.fold__a[hidden] { display: grid; }

@media (min-width: 1024px) {
  .faq .sec-head { grid-column: 3 / 11; }
  .folds { grid-column: 3 / 11; }
}

/* ── 8 끝 CTA ─────────────────────────────────────────────────────── */
.final { overflow-x: clip; }
.final__photo {
  position: absolute;
  z-index: 0;
  right: -10%;
  top: 50%;
  width: min(60rem, 90%);
  translate: 0 -50%;
  mask-image: radial-gradient(circle at 73% 50%, var(--color-ink) 22%, transparent 34%);
}
.final__in { position: relative; z-index: 1; justify-items: start; row-gap: var(--spacing-5); }
.final__lead { font-size: var(--text-lead); max-width: 26em; }
.slab-btn {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--spacing-2);
  width: 100%;
  min-height: 7.5rem;
  padding: var(--spacing-5) var(--spacing-6);
  overflow: hidden;
  background: var(--color-clay-fired);
  color: var(--color-on-ink);
  border-radius: var(--radius-slab);
  box-shadow: var(--shadow-lift);
  text-align: start;
}
.slab-btn__t { font-family: var(--font-display); font-size: var(--text-h3); font-variation-settings: var(--font-heading-variation); }
.slab-btn__f { color: var(--color-on-ink); }
.slab-btn:hover { box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--color-clay-terracotta); }
.slab-btn:active,
.slab-btn.is-pressed {
  transform: translateY(3px) scale(1.03, 0.94);
  box-shadow: var(--shadow-press);
  transition-duration: var(--duration-press);
  transition-timing-function: var(--ease-press);
}
.slab-btn .print { --print-size: 4.5rem; opacity: 0.32; }
.slab-btn:focus-visible { box-shadow: var(--shadow-focus), var(--shadow-lift); border-radius: var(--radius-slab); }

@media (min-width: 1024px) {
  .final__in > * { grid-column: 1 / 8; }
  .final__in .slab-btn { grid-column: 1 / 6; min-height: 10rem; }
  .final__photo { right: -4%; width: 58%; }
}

/* ── 꼬리 — 영수증 ─────────────────────────────────────────────────── */
.foot {
  background: var(--color-surface);
  clip-path: var(--clip-zig-top);
  padding: var(--spacing-8) 0 var(--spacing-7);
}
.foot__in {
  display: grid;
  gap: var(--spacing-5);
  max-width: 100rem;
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}
.foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-5); }
.foot__links a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.foot__note { max-width: 40em; font-size: var(--text-small); color: var(--color-ink-soft); }
.foot__c { border-top: 1px dashed var(--color-line-faint); padding-top: var(--spacing-4); }

@media (min-width: 1024px) {
  .foot__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gap); align-items: start; }
  .foot__mark { grid-column: 1 / 4; }
  .foot__links { grid-column: 4 / 8; }
  .foot__note { grid-column: 8 / 13; }
  .foot__c { grid-column: 1 / -1; }
}

/* 잡음 겹 — 한 장, 화면에 붙어 있다 */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: url("/clayday/assets/grain.svg?v=67942512");
}

/* ══ 요금 쪽 ═══════════════════════════════════════════════════════ */
.p-hero {
  max-width: 100rem;
  margin-inline: auto;
  padding: var(--spacing-7) var(--spacing-gutter) var(--spacing-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-5);
  overflow-x: clip;
}
.p-hero__copy { display: grid; gap: var(--spacing-4); justify-items: start; }
.p-hero__side { position: relative; display: grid; gap: var(--spacing-3); }
.p-hero__lump { display: none; }

/* 흔들 스위치 — 점토판 하나에 두 칸, 눌린 쪽이 들어간다 */
.rocker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-1);
  padding: var(--spacing-1);
  background: var(--color-surface-deep);
  border-radius: var(--radius-slab);
  box-shadow: var(--shadow-rest);
}
.rocker__opt {
  display: grid;
  justify-items: center;
  gap: 0;
  min-height: var(--spacing-touch);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-slab-inner);
  background: var(--color-surface);
  box-shadow: var(--shadow-rest);
  font-weight: 600;
  line-height: 1.2;
}
.rocker__opt .field { letter-spacing: 0.08em; }
.rocker__opt[aria-checked="true"] {
  background: var(--color-bg);
  box-shadow: var(--shadow-press);
  transform: translateY(1px);
}
.rocker__opt[aria-checked="true"] > :first-child::before { content: none; }
.rocker__opt[aria-checked="true"]::before {
  content: "";
  justify-self: center;
  width: var(--spacing-2);
  aspect-ratio: 1;
  border-radius: var(--radius-lump);
  background: var(--color-ink);
  margin-block-end: var(--spacing-1);
}
.rocker__opt:active { transform: translateY(2px) scale(1.02, 0.95); transition-duration: var(--duration-press); }
.rocker__note { font-size: var(--text-small); color: var(--color-ink-soft); }

.plans {
  max-width: 100rem;
  margin-inline: auto;
  padding: var(--spacing-6) var(--spacing-gutter) var(--spacing-section);
  position: relative;
}
.plans__string { display: none; }
.plans__list { display: grid; gap: var(--spacing-6); }
.plan { padding-block-end: var(--spacing-6); }
.plan .h3 { font-size: var(--text-h3); }
.plan__for { color: var(--color-ink-soft); }
.plan__price { display: flex; align-items: baseline; gap: var(--spacing-2); }
.plan__per { font-weight: 600; color: var(--color-ink-soft); }
.plan__price .price { transition: opacity 160ms var(--ease-settle); }
.plan__price.is-swapping .price { opacity: 0; }
.plan__list { display: grid; gap: var(--spacing-2); padding-block: var(--spacing-3); border-top: 1px dashed var(--color-line-faint); }
.plan__list li { display: flex; gap: var(--spacing-2); align-items: flex-start; }
.plan__list .ico { margin-block-start: 0.2em; color: var(--color-ink-soft); }
.plan .tape--lg { justify-content: center; }
.plan__flag { position: absolute; top: calc(-1 * var(--spacing-3)); right: var(--spacing-5); }
.plan--kiln { order: -1; }

@media (min-width: 1024px) {
  .p-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gap);
    align-items: end;
    padding-block: var(--spacing-7) var(--spacing-5);
  }
  .p-hero__copy { grid-column: 1 / 8; }
  .p-hero__side { grid-column: 8 / 13; padding-block-start: var(--spacing-9); }
  .p-hero__lump {
    display: block;
    position: absolute;
    width: 11rem;
    right: -1.5rem;
    top: -4.5rem;
    --melt-x: 14%;
    --melt-y: 14%;
  }
  .rocker { position: relative; z-index: 1; }
  .plans { padding-block-start: var(--spacing-6); }
  .plans__string {
    display: block;
    position: absolute;
    top: var(--spacing-6);
    inset-inline: var(--spacing-gutter);
    height: 1px;
    background: var(--color-line);
    rotate: 0.3deg;
  }
  .plans__list {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gap);
    align-items: start;
    padding-block-start: var(--spacing-6);
  }
  .plan { grid-column: span 4; }
  .plan--kiln { order: 0; margin-block-start: var(--spacing-5); }
  .plan--lump { rotate: -1deg; }
  .plan--studio { rotate: 1.2deg; }
  .plan::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: calc(var(--spacing-5) + var(--spacing-3) / 2);
    width: 1px;
    height: var(--spacing-7);
    background: var(--color-line);
  }
  .plan--kiln::after { height: calc(var(--spacing-7) + var(--spacing-5)); }
}

/* 비교 장부 */
.ledger-wrap { display: grid; gap: var(--spacing-4); }
.plan-tabs { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
.plan-tab { min-height: 2.75rem; }
.plan-tab[aria-pressed="true"] { --tape-bg: var(--color-surface); --tape-fg: var(--color-ink); text-shadow: none; }
.plan-tab[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.ledger {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  box-shadow: var(--shadow-rest);
  font-size: var(--text-small);
}
.ledger th,
.ledger td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: start;
  border-bottom: 1px solid var(--color-line-faint);
  vertical-align: top;
}
.ledger thead th {
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  font-variation-settings: var(--font-heading-variation);
}
.ledger tbody th { font-weight: 600; width: 38%; }
.ledger .ico { display: inline-block; vertical-align: -0.2em; }
.ledger__cap { caption-side: bottom; text-align: start; padding-top: var(--spacing-3); font-size: var(--text-small); color: var(--color-ink-soft); }
.ledger .no { color: var(--color-ink-soft); }
.ledger[data-plan="lump"] [data-col]:not([data-col="lump"]),
.ledger[data-plan="kiln"] [data-col]:not([data-col="kiln"]),
.ledger[data-plan="studio"] [data-col]:not([data-col="studio"]) { display: none; }

@media (min-width: 1024px) {
  .plan-tabs { display: none; }
  .ledger-wrap { grid-column: 1 / -1; }
  .ledger { font-size: var(--text-body); }
  .ledger [data-col] { display: table-cell !important; }
  .ledger th,
  .ledger td { padding: var(--spacing-4) var(--spacing-5); }
}

/* 무엇에 돈을 내나 — 쪽지 셋 */
.why { display: grid; gap: var(--spacing-5); }
.why .note { filter: none; }
.why__note { filter: drop-shadow(0 10px 12px var(--color-line-faint)); }
.why__note .h3 { font-size: var(--text-h2); line-height: 1; }

@media (min-width: 1024px) {
  .why { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gap); align-items: start; }
  .why__note { grid-row: 1; }
  .why__note:nth-child(1) { grid-column: 1 / 5; rotate: -1deg; }
  .why__note:nth-child(2) { grid-column: 5 / 9; margin-block-start: var(--spacing-9); rotate: 1.2deg; }
  .why__note:nth-child(3) { grid-column: 9 / 13; margin-block-start: var(--spacing-6); rotate: -0.4deg; }
  .why__note .h3 { font-size: var(--text-h3); }
  .faq .small-cta { grid-column: 3 / 11; }
}

.small-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4) var(--spacing-6); }

@media (min-width: 1280px) {
  .why__note .h3 { font-size: var(--text-h2); }
}

/* 포커스 링이 부품의 그림자 규칙에 덮이지 않게 — 맨 뒤, 더 구체적으로 */
:is(.tape--lg, .rocker__opt, .plan-tab, .piece, .cell, .link):focus-visible,
.rocker__opt[aria-checked]:focus-visible,
.fold__q button:focus-visible {
  box-shadow: var(--shadow-focus);
}
.rocker__opt[aria-checked="true"]:focus-visible { box-shadow: var(--shadow-focus), var(--shadow-press); }

/* ── 움직임을 줄이면 — 크기 변형·이동 0, 상태만 ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
  .tape--lg:active,
  .tape--lg.is-pressed,
  .piece:active,
  .piece.is-pressed,
  .slab-btn:active,
  .slab-btn.is-pressed,
  .rocker__opt:active,
  .cell:active .tape { transform: none; }
  [data-place].is-waiting { scale: none; }
  .bench__stack { transform: none; }
}