/* Form & Rest — "Four Walls" (4단계 구현)
 * 값은 tokens.css 의 var() 만 쓴다. 색을 섞을 때도 color-mix(var(), transparent) — raw 색 0 (G2 ⑨).
 * 벽(.wall-*)이 --wall · --niche 두 변수를 내려 주고, 벽 위의 모든 것은 그 둘만 읽는다.
 * 브레이크: < 48rem 한 줄 · 48–64rem 태블릿 · ≥ 64rem 데스크톱(가로 트랙 고정은 JS 가 html.is-pinned 로 켠다).
 */

/* ── 0. 바탕 ─────────────────────────────────────────────────────────────── */

:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
:where(ol, ul)[role="list"], :where(.list-reset) { list-style: none; padding: 0; }
:where(img, svg) { display: block; max-width: 100%; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a, button, summary) { touch-action: manipulation; }
:where(button, .btn, .chip, .hdr) { -webkit-user-select: none; user-select: none; }
:where(a) { color: inherit; }
:where(table) { border-collapse: collapse; }

html {
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: var(--spacing-nav);
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-feature-settings: "ss01" 0;
  font-variant-numeric: tabular-nums;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 석회칠 결 — 고정 가상 요소, 스크롤 컨테이너에 붙이지 않는다(렌즈 성능 규칙) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background: url(/form-rest/assets/limewash.svg?v=a4b12be9) 0 0 / 30rem 30rem;
  opacity: 0.09;
  mix-blend-mode: multiply;
}

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

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-swatch);
}
.night :focus-visible,
.sheet :focus-visible,
.btn--primary:focus-visible,
.btn--ink:focus-visible { outline-color: var(--color-focus-inverse); }

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

.skip {
  position: fixed;
  left: var(--spacing-gutter);
  top: calc(var(--spacing) * 3);
  z-index: var(--z-toast);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  translate: 0 -200%;
}
.skip:focus-visible { translate: 0 0; }

/* ── 1. 벽 — 방마다 석회칠 벽이 페이지 바탕이다 ───────────────────────────── */

.wall-clay  { --wall: var(--color-bg);       --niche: var(--color-surface-clay); }
.wall-olive { --wall: var(--color-bg-olive); --niche: var(--color-surface-olive); }
.wall-ochre { --wall: var(--color-bg-ochre); --niche: var(--color-surface-ochre); }
.wall-fig   { --wall: var(--color-bg-fig);   --niche: var(--color-surface-fig); }
:where(.wall-clay, .wall-olive, .wall-ochre, .wall-fig) { background-color: var(--wall); color: var(--color-ink); }

.night {
  --wall: var(--color-bg-night);
  background-color: var(--color-bg-night);
  color: var(--color-ink-inverse);
}

.wrap {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* ── 2. 글자 ─────────────────────────────────────────────────────────────── */

.display, .h1, .h2, .h3, .room-name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.display { font-size: var(--text-display); line-height: var(--text-display--line-height); letter-spacing: var(--text-display--letter-spacing); }
.h1 { font-size: var(--text-h1); line-height: var(--text-h1--line-height); }
.h2 { font-size: var(--text-h2); line-height: var(--text-h2--line-height); }
.h3 { font-size: var(--text-h3); line-height: var(--text-h3--line-height); }
.room-name { font-size: var(--text-room); line-height: var(--text-room--line-height); }
:where(.display, .h1, .h2, .h3, .room-name) em { font-style: italic; }

.eyebrow {
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}
.lead { font-size: var(--text-lead); line-height: var(--text-lead--line-height); max-width: 34ch; text-wrap: pretty; }
.small { font-size: var(--text-small); line-height: var(--text-small--line-height); }
.caption { font-size: var(--text-caption); line-height: var(--text-caption--line-height); }
.num { font-variant-numeric: tabular-nums; }

.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-tap);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-underline-offset var(--dur-ui) var(--ease-out-soft);
}
@media (hover: hover) {
  .link:hover { text-underline-offset: 0.45em; }
}

/* ── 3. 알약 버튼 · 칩 · 둥근 버튼 ────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-height: calc(var(--spacing-tap) + var(--spacing) * 2);
  padding: 0 calc(var(--spacing) * 5);
  border-radius: var(--radius-control);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: scale var(--dur-press) var(--ease-press), background-color var(--dur-ui) var(--ease-out-soft);
}
.btn:active { scale: 0.98; }
.btn__arrow { display: inline-block; font-size: 1rem; line-height: 1; transition: translate var(--dur-ui) var(--ease-out-soft); }
@media (hover: hover) {
  .btn:hover .btn__arrow { translate: 2px -1px; }
}
.btn--primary { background: var(--color-accent); color: var(--color-ink-inverse); }
.btn--ink { background: var(--color-ink); color: var(--color-ink-inverse); }
.btn--plaster { background: var(--color-plate); color: var(--color-ink); }
.btn--wide { width: 100%; justify-content: space-between; }

.chips { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 4);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 1px var(--color-rule);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-out-soft), color var(--dur-ui) var(--ease-out-soft), scale var(--dur-press) var(--ease-press);
}
.chip:active { scale: 0.98; }
.chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-ink-inverse); box-shadow: none; }
.chip .dot { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 45%, transparent); }
.chip[aria-pressed="true"] .dot { box-shadow: inset 0 0 0 1px var(--color-ink-inverse); }
.chip small { font-size: var(--text-caption); font-weight: var(--font-weight-body); }
@media (hover: hover) {
  .chip:not([aria-pressed="true"]):hover { background: color-mix(in oklab, var(--color-ink) 7%, transparent); }
}

.dot {
  display: inline-block;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--dot, var(--wall));
}

.step-btn {
  display: grid;
  place-items: center;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  transition: scale var(--dur-press) var(--ease-press), opacity var(--dur-ui) var(--ease-out-soft);
  font-size: 1.125rem;
  line-height: 1;
}
.step-btn:active { scale: 0.96; }
.step-btn:disabled { opacity: 0.35; cursor: default; }
.step-btn:focus-visible { outline-color: var(--color-focus); }

/* 가는 선 아이콘 — 1.25px, 끝 둥글게 */
.ico { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ── 4. 머리 — 방 눈금 자(ruler). 평면도 치수선처럼: 석고 도면 띠 · 1px 페트롤 치수선 · 양 끝·경계 세로 틱 ·
   방 이름은 걷는 길이에 비례한 칸 위에 · 지금 위치는 채운 사각 하나가 선을 따라 간다. 둥글림 0 (헤더 재설계 2026-10-09) */

.hdr {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding: env(safe-area-inset-top) calc(var(--spacing-gutter) + env(safe-area-inset-right)) 0 calc(var(--spacing-gutter) + env(safe-area-inset-left));
  background: var(--color-plate);
  color: var(--color-ink);
  box-shadow: inset 0 -1px 0 var(--color-rule);
}
.hdr__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--spacing) * 4);
  min-height: var(--spacing-hdr);
}
.hdr__mark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
  white-space: nowrap;
  padding-block: calc(var(--spacing) * 3);
}
.hdr__mark em { font-style: italic; }
.hdr__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-tap);
  padding: 0 calc(var(--spacing) * 2);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.hdr__link[aria-current="page"] { text-decoration-line: underline; }
@media (hover: hover) {
  .hdr__link:hover { text-decoration-line: underline; }
}
.hdr__link--collection, .hdr__bag { display: none; }
.hdr__menu { justify-self: end; margin-right: calc(var(--spacing) * -2); }
.hdr__gap { display: block; }

/* 모바일 — 지금 방 이름 위, 라벨 없는 축약 자 아래(가운데 칸). 방 이동은 Menu 판에서 */
.hdr__here {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  margin-top: calc(var(--spacing) * 2.5);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1;
}
.ruler {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 44rem;
  justify-self: center;
}
/* 치수선 — 화살촉 없는 1px 선, 끝과 방 경계에 짧은 세로 틱 */
.ruler::before, .ruler::after, .ruler__rooms li::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--color-accent);
}
.ruler::before { left: 0; right: 0; bottom: calc(var(--spacing) * 3.5); height: 1px; }
.ruler::after, .ruler__rooms li::before { bottom: calc(var(--spacing) * 3.5 - 0.25rem); width: 1px; height: calc(0.5rem + 1px); }
.ruler::after { right: 0; }
.ruler__rooms li::before { left: 0; }
.ruler__rooms { position: absolute; inset: 0; display: flex; }
.ruler__rooms li { position: relative; flex: var(--w, 1) 1 0; min-width: 0; }
.ruler__room {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding: 0 calc(var(--spacing) * 1) calc(var(--spacing) * 5.5);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  visibility: hidden;
  transition: color var(--dur-ui) var(--ease-out-soft);
}
.ruler__room[aria-current] { color: var(--color-ink); }
.ruler__marker {
  position: absolute;
  left: 0;
  bottom: calc(var(--spacing) * 3.5 - 0.1875rem);
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: -0.21875rem;
  background: var(--color-accent);
  pointer-events: none;
  will-change: transform;
}

@media (min-width: 45rem) {
  .hdr { position: fixed; }
  .hdr__bar { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: calc(var(--spacing) * 3); }
  .hdr__here, .hdr__menu { display: none; }
  .hdr__link--collection, .hdr__bag { display: inline-flex; }
  .hdr__bag { margin-right: calc(var(--spacing) * -2); }
  .ruler { width: min(44rem, 100% - var(--spacing) * 12); }
  .ruler__room { visibility: visible; }
  @media (hover: hover) {
    .ruler__room:hover { color: var(--color-ink); }
  }
}

/* 모바일 Rooms 시트 — 아래에서, 먹 */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet[hidden] { display: none; }
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--color-ink) 45%, transparent);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out-soft);
}
.sheet__panel {
  position: absolute;
  inset: auto calc(var(--spacing) * 3) calc(var(--spacing) * 3 + env(safe-area-inset-bottom));
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 5) calc(var(--spacing) * 4);
  border-radius: var(--radius-plate);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  translate: 0 110%;
  transition: translate 500ms var(--ease-room);
  overscroll-behavior: contain;
}
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { translate: 0 0; }
.sheet__eyebrow { color: var(--color-ink-inverse-soft); }
.sheet__list { margin-top: calc(var(--spacing) * 3); }
.sheet__list li {
  border-top: 1px solid var(--color-rule-inverse);
  opacity: 0;
  translate: 0 0.75rem;
  transition: opacity var(--dur-ui) var(--ease-out-soft), translate 500ms var(--ease-room);
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}
.sheet.is-open .sheet__list li { opacity: 1; translate: 0 0; }
.sheet__link {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-height: calc(var(--spacing) * 14);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.1;
  text-decoration: none;
}
.sheet__link .dot { width: 0.75rem; height: 0.75rem; }
.sheet__link small {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-ink-inverse-soft);
}
.sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--spacing-tap) + var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 3);
  border-radius: var(--radius-control);
  background: color-mix(in oklab, var(--color-ink-inverse) 12%, transparent);
  font-weight: var(--font-weight-medium);
}

/* ── 5. 벽감 — 그림이 걸리는 자리 ───────────────────────────────────────────── */

/* 비율은 상자가 잡는다 — 사진이 늦게 와도 자리가 흔들리지 않고, 오기 전에는 벽감 판(그 방의 벽보다 한 톤 깊은 색)이 보인다 */
.niche {
  --ar: var(--aspect-room);
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--ar);
  width: 100%;
  overflow: hidden;
  isolation: isolate; /* 안쪽 z-index(괘선·캡션)가 벽감 밖 방 이름 위로 새지 않게 */
  border-radius: var(--radius-niche);
  background-color: var(--niche);
  transition: background-color var(--dur-ui) var(--ease-out-soft);
}
.niche[data-ratio="4:3"] { --ar: var(--aspect-piece); }
.niche[data-ratio="1:1"] { --ar: var(--aspect-square); }
.niche__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--dur-hover) var(--ease-out-soft), opacity var(--dur-ui) var(--ease-out-soft);
}
/* 괘선·오목 그림자 — inset 그림자는 자식(사진) 아래에 칠해지니 가상 요소로 사진 위에 올린다 */
.niche::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--color-plate) 20%, transparent),
    inset 0 1.75rem 2.5rem -1.75rem color-mix(in oklab, var(--color-ink) 28%, transparent);
  transition: box-shadow var(--dur-ui) var(--ease-out-soft);
}
/* 주 벽감 — 사진이 한 테(--spacing-bezel) 안쪽에 걸린다. 천 견본은 사진 속 천을 못 바꾸니 이 테(벽감 판)의 색만 바뀐다 */
.niche--stage .niche__img {
  inset: var(--spacing-bezel);
  width: calc(100% - var(--spacing-bezel) * 2);
  height: calc(100% - var(--spacing-bezel) * 2);
  border-radius: calc(var(--radius-niche) - var(--spacing-bezel));
}
.niche__cap {
  position: absolute;
  z-index: 3;
  left: calc(var(--spacing) * 3);
  bottom: calc(var(--spacing) * 3);
  max-width: min(26rem, calc(100% - var(--spacing) * 6));
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  border-radius: var(--radius-swatch);
  background: var(--color-plate);
  color: var(--color-ink);
  font-size: var(--text-caption);
  line-height: 1.35;
  transition: opacity var(--dur-ui) var(--ease-out-soft);
}
.niche__cap b { display: block; font-weight: var(--font-weight-strong); }
.niche__cap span { color: var(--color-ink-soft); }
.niche.is-swapping .niche__img, .niche.is-swapping .niche__cap { opacity: 0; }
@container (max-width: 22rem) {
  .niche__cap span { display: none; }
}
@container (max-width: 9rem) {
  .niche__cap { display: none; }
}

/* ── 6. 상품 태그 · 카드 ───────────────────────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6); }
.tag {
  display: grid;
  grid-template-columns: 6rem auto;
  grid-template-rows: auto auto auto;
  column-gap: calc(var(--spacing) * 3);
  align-content: center;
  align-items: baseline;
  min-height: var(--spacing-tap);
  text-decoration: none;
}
.tag .niche { grid-row: 1 / 4; align-self: center; border-radius: var(--radius-swatch); }
.tag__name { font-weight: var(--font-weight-medium); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-ui) var(--ease-out-soft); }
.tag__price, .tag__dims { font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-variant-numeric: tabular-nums; }
.tag__price { font-weight: var(--font-weight-medium); }
@media (hover: hover) {
  .tag:hover .tag__name { text-decoration-color: currentColor; }
}

.card { position: relative; display: grid; gap: calc(var(--spacing) * 3); text-decoration: none; align-content: start; }
.card__body { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--spacing) * 0.5) calc(var(--spacing) * 4); align-items: baseline; }
.card__name { position: relative; font-weight: var(--font-weight-medium); justify-self: start; }
.card__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--dur-hover) var(--ease-out-soft);
}
.card__price { font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.card__dims { grid-column: 1 / -1; font-size: var(--text-caption); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2); }
.card__mats { display: inline-flex; gap: calc(var(--spacing) * 1); margin-left: auto; }
.mat-dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 30%, transparent);
}
.mat-dot--oak { background: var(--color-material-oak); }
.mat-dot--walnut { background: var(--color-material-walnut); }
.mat-dot--boucle { background: var(--color-material-boucle-loop); }
.mat-dot--travertine { background: var(--color-material-travertine); }
@media (hover: hover) {
  .card:hover .niche__img { scale: 1.03; }
  .card:hover .card__name::after { scale: 1 1; }
}

/* ── 7. 홈 — 가로 트랙(벽을 옆으로 걸어 지나간다) ──────────────────────────── */

.walk { position: relative; }
.walk__stage { position: relative; }
.walk__track {
  position: relative;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.walk__track::-webkit-scrollbar { display: none; }
.walk__track:focus-visible { outline-offset: -4px; border-radius: 0; }

.panel {
  position: relative;
  flex: 0 0 calc(100% - var(--spacing-peek));
  scroll-snap-align: start;
  background-color: var(--wall);
  box-shadow: var(--shadow-corner);
  display: flex;
}
.panel--hero { box-shadow: none; }
.panel__spine {
  flex: 0 0 var(--spacing-peek);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: calc(var(--spacing-nav) + var(--spacing) * 6);
}
.panel__spine span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: var(--text-micro);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.panel__spine b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; }
.panel__inner {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 5);
  padding: calc(var(--spacing-nav) + var(--spacing) * 2) var(--spacing-gutter) calc(var(--spacing) * 10) var(--spacing-gutter);
}
.panel__spine + .panel__inner { padding-left: 0; }

.room-label { font-size: var(--text-small); line-height: var(--leading-snug); font-weight: var(--font-weight-medium); }
.room-label__no { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-right: calc(var(--spacing) * 1.5); vertical-align: -0.1em; }
.room-label__sub { font-weight: var(--font-weight-body); }
.room-sub { font-family: var(--font-display); font-style: italic; font-size: var(--text-h3); line-height: 1.1; }

/* 판 ① 히어로 — 1열(모바일)은 DOM 순서, 데스크톱은 두 기둥 */
.hero { display: flex; flex-direction: column; gap: calc(var(--spacing) * 5); }
.hero__copy, .hero__media { display: contents; }
.hero__eyebrow { order: 1; }
.hero__title { order: 2; font-size: clamp(3.5rem, 18.5vw, 6rem); line-height: 0.9; }
.hero__title em { display: block; }
.hero__media .niche { order: 3; }
.hero .room-label { order: 4; }
.hero__lead { order: 5; }
.hero__media .tags { order: 6; }
.hero__actions { order: 7; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5); }
.hero .tags li + li { display: none; }

/* 판 ②③④ 공통(모바일) — DOM 순서 = 방 이름 → 벽감 → 태그 */
.room { display: flex; flex-direction: column; gap: calc(var(--spacing) * 5); }
.room__head { display: grid; gap: calc(var(--spacing) * 2); container-type: inline-size; }
.room .tags { flex-direction: column; }
.room .room-name { font-size: min(var(--text-room), 26cqi); }

.room-list { width: 100%; font-size: var(--text-small); }
.room-list tr { border-top: 1px solid var(--color-rule); }
.room-list tr:last-child { border-bottom: 1px solid var(--color-rule); }
.room-list th, .room-list td { padding: calc(var(--spacing) * 2.5) 0; text-align: left; font-weight: var(--font-weight-body); vertical-align: baseline; }
.room-list th { font-weight: var(--font-weight-medium); }
.room-list th a { text-decoration: none; display: inline-flex; min-height: var(--spacing-tap); align-items: center; }
.room-list th small { display: block; font-size: var(--text-caption); font-weight: var(--font-weight-body); }
.room-list .room-list__dims { display: none; }
.room-list td:last-child { text-align: right; font-weight: var(--font-weight-medium); }

/* 판 ⑤ 끝판 */
.panel--end .panel__inner { justify-content: center; gap: calc(var(--spacing) * 6); }
.end__title { font-size: var(--text-h1); line-height: var(--text-h1--line-height); max-width: 9ch; }
.end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5); }

/* 줄자 레일 — 석고 줄자 + 먹 눈금 + 페트롤 표지 */
.rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "read btns";
  align-items: center;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 5) var(--spacing-gutter) calc(var(--spacing) * 6);
  background: var(--color-bg);
}
.rail__read { grid-area: read; font-size: var(--text-small); line-height: 1.2; white-space: nowrap; }
.rail__num { font-family: var(--font-display); font-size: 1.75rem; font-variant-numeric: tabular-nums; margin-right: calc(var(--spacing) * 1); display: inline-block; min-width: 3.25ch; text-align: right; }
.rail__btns { grid-area: btns; display: flex; gap: calc(var(--spacing) * 2); }

/* 태블릿·데스크톱 공통 판 구성 */
@media (min-width: 48rem) {
  .hero__title { font-size: clamp(4.5rem, 12vw, 7rem); }
  .hero .tags li + li { display: grid; }
  .room-list .room-list__dims { display: table-cell; font-size: var(--text-caption); }
  .room-list th small { display: none; }
  .room .tags { flex-direction: row; }
}

@media (min-width: 64rem) {
  .walk__stage { height: 100svh; min-height: 37.5rem; }
  .walk__track { height: 100%; }
  .panel__inner { padding-bottom: calc(var(--spacing-rail) + var(--spacing) * 12); justify-content: center; }
  .rail {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "read . btns";
    gap: calc(var(--spacing) * 6);
    padding: 0 var(--spacing-gutter) calc(var(--spacing) * 5);
    background: none;
    pointer-events: none;
  }
  .rail > * { pointer-events: auto; }
  .rail__read { min-width: 15rem; }

  /* 판 ① — 왼쪽 34% 글 · 오른쪽 58% 벽감 */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 58fr);
    column-gap: 8%;
    align-items: center;
  }
  .hero__copy, .hero__media { display: flex; flex-direction: column; }
  .hero__copy { gap: calc(var(--spacing) * 6); align-items: flex-start; }
  .hero__media { gap: calc(var(--spacing) * 5); }
  .hero__title { font-size: min(var(--text-display), 10.25vw); }
  .hero__media .niche { width: min(100%, calc((100svh - 22rem) * 16 / 9)); }

  /* 판 ② — 벽감 왼쪽 크게 + 좁은 칼럼(방 이름·태그 세로) */
  .room { display: grid; column-gap: 6%; }
  .room--b { grid-template-columns: minmax(0, 60fr) minmax(0, 34fr); grid-template-areas: "media head" "media tags"; align-content: center; row-gap: calc(var(--spacing) * 10); }
  .room--b .room__media { grid-area: media; align-self: center; }
  .room--b .room__head { grid-area: head; align-self: end; gap: calc(var(--spacing) * 3); }
  .room--b .tags { grid-area: tags; align-self: start; flex-direction: column; }
  .room--b .room-name { font-size: min(var(--text-room), 23cqi); }
  .room--b .room__media .niche { width: min(100%, calc((100svh - 18rem) * 16 / 9)); }

  /* 판 ③ — 벽감 위 가운데, 방 이름이 벽감 아래 가장자리에 걸친다(−0.5em) */
  .room--c { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .room--c .room__head { display: contents; }
  .room--c .room__eyebrow { order: -2; margin-bottom: calc(var(--spacing) * 5); }
  .room--c .room__media { order: -1; width: min(72%, calc((100svh - 24rem) * 16 / 9)); }
  .room--c .room-name { position: relative; z-index: 1; margin-top: -0.5em; text-align: center; font-size: var(--text-room); }
  .room--c .room-sub { margin-top: calc(var(--spacing) * 2); }
  .room--c .niche__cap { top: calc(var(--spacing) * 3); bottom: auto; }
  /* 방 이름이 벽감 아래 가장자리에 걸친다 — 사진 바닥(먹 대비 2.2)이 아니라 벽감 판(4.22) 위에 걸치게, 아래 끝을 판 색으로 되돌린다 */
  .room--c .room__media .niche::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 24%;
    background: linear-gradient(to top, var(--niche) 0%, var(--niche) 40%, transparent 100%);
    pointer-events: none;
  }
  .room--c .tags { justify-content: center; margin-top: calc(var(--spacing) * 7); flex-direction: row; }

  /* 판 ④ — 방 이름 왼쪽 위 · 벽감 오른쪽 · 아래 목록표 */
  .room--d { grid-template-columns: minmax(0, 36fr) minmax(0, 58fr); grid-template-areas: "head media" "list list"; row-gap: calc(var(--spacing) * 8); align-content: center; }
  .room--d .room__head { grid-area: head; align-self: start; gap: calc(var(--spacing) * 3); }
  .room--d .room__media { grid-area: media; }
  .room--d .room-name { font-size: min(var(--text-room), 32cqi); }
  .room--d .room__media .niche { width: min(100%, calc((100svh - 27rem) * 16 / 9)); margin-left: auto; }
  .room--d .room-list { grid-area: list; }

  .panel--end { flex-basis: 60%; }
}

/* 고정 트랙 — JS 가 animation-timeline 지원 + 64rem 이상 + 동작 줄이기 아님 일 때만 html.is-pinned 를 켠다 */
.is-pinned .walk { height: calc(var(--panels) * var(--track-panel-length) * 1svh); }
.is-pinned .walk__stage { position: sticky; top: 0; overflow: clip; }
.is-pinned .walk__track {
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}
.is-pinned { overscroll-behavior-x: none; }

/* 트랙 판 등장 — 막은 화면에 들어오는 순간에만(lessons #26). 애니메이션 키프레임에만 가림이 있다 */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal].is-in {
    animation: reveal-up calc(var(--dur-reveal) * 2 / 3) var(--ease-room) backwards;
    animation-delay: calc(var(--i, 0) * var(--stagger));
  }
  .js [data-reveal="fade"].is-in { animation-name: fade-up; }
}
@keyframes reveal-up {
  from { clip-path: inset(-0.2em -0.2em 100% -0.2em); translate: 0 0.3em; }
  to { clip-path: inset(-0.2em -0.2em -0.2em -0.2em); translate: 0 0; }
}
@keyframes fade-up {
  from { opacity: 0; translate: 0 0.75rem; }
  to { opacity: 1; translate: 0 0; }
}

/* ── 8. 홈 — 소재 넷 ─────────────────────────────────────────────────────── */

.section { padding-block: var(--spacing-section); }
.block-head { display: grid; gap: calc(var(--spacing) * 4); max-width: var(--container-read); }
.block-head p:not(.eyebrow) { max-width: 44ch; text-wrap: pretty; }

.materials .block-head { margin-bottom: var(--spacing-block); }
.hangers { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 3); align-items: start; }
.hanger {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--h) * 0.72);
  border-radius: var(--radius-swatch) var(--radius-swatch) var(--radius-niche) var(--radius-niche);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 18%, transparent);
}
.hanger__grain { flex: 1; min-height: 7.5rem; }
.hanger__label {
  display: grid;
  gap: calc(var(--spacing) * 1.5);
  margin: var(--spacing-bezel);
  padding: calc(var(--spacing) * 4);
  border-radius: calc(var(--radius-niche) - var(--spacing-bezel));
  background: var(--color-plate);
  box-shadow: var(--shadow-plate-inset);
  color: var(--color-ink);
}
.hanger__label h3 { font-size: 1.5rem; line-height: 1.1; }
.hanger__label p { font-size: var(--text-caption); line-height: var(--text-caption--line-height); color: var(--color-ink-soft); }
.hanger__label .hanger__from { color: var(--color-ink); font-weight: var(--font-weight-medium); }
.hanger__no { font-size: var(--text-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

/* 결 — 그림 전용 색(--color-material-*) */
.grain-oak {
  background-color: var(--color-material-oak);
  background-image:
    repeating-linear-gradient(91deg, transparent 0 0.55rem, color-mix(in oklab, var(--color-material-oak-grain) 70%, transparent) 0.55rem 0.62rem, transparent 0.62rem 1.3rem, color-mix(in oklab, var(--color-material-oak-grain) 45%, transparent) 1.3rem 1.34rem),
    repeating-linear-gradient(88.5deg, transparent 0 1.9rem, color-mix(in oklab, var(--color-material-oak-grain) 55%, transparent) 1.9rem 2rem, transparent 2rem 3.1rem),
    radial-gradient(ellipse 1.1rem 3.2rem at 62% 38%, color-mix(in oklab, var(--color-material-oak-grain) 80%, transparent) 0 30%, transparent 70%);
}
.grain-walnut {
  background-color: var(--color-material-walnut);
  background-image:
    repeating-linear-gradient(93deg, transparent 0 0.8rem, color-mix(in oklab, var(--color-material-walnut-grain) 85%, transparent) 0.8rem 0.95rem, transparent 0.95rem 1.7rem),
    repeating-linear-gradient(86deg, transparent 0 2.4rem, color-mix(in oklab, var(--color-material-oak) 16%, transparent) 2.4rem 2.5rem, transparent 2.5rem 4.2rem),
    radial-gradient(ellipse 60% 18% at 30% 70%, color-mix(in oklab, var(--color-material-walnut-grain) 60%, transparent), transparent 70%);
}
.grain-boucle {
  background-color: var(--color-material-boucle);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 0.14rem, var(--color-material-boucle-loop) 0.16rem 0.26rem, transparent 0.28rem),
    radial-gradient(circle at 50% 50%, transparent 0 0.12rem, color-mix(in oklab, var(--color-material-boucle-loop) 70%, transparent) 0.14rem 0.24rem, transparent 0.26rem);
  background-size: 0.7rem 0.7rem, 0.7rem 0.7rem;
  background-position: 0 0, 0.35rem 0.38rem;
}
.grain-travertine {
  background-color: var(--color-material-travertine);
  background-image:
    radial-gradient(ellipse 0.7rem 0.14rem at 23% 31%, color-mix(in oklab, var(--color-material-travertine-pore) 90%, transparent) 30%, transparent 75%),
    radial-gradient(ellipse 1.3rem 0.2rem at 61% 67%, color-mix(in oklab, var(--color-material-travertine-pore) 75%, transparent) 30%, transparent 75%),
    radial-gradient(ellipse 0.4rem 0.1rem at 82% 18%, var(--color-material-travertine-pore) 35%, transparent 75%),
    radial-gradient(ellipse 2.2rem 0.3rem at 40% 52%, color-mix(in oklab, var(--color-material-travertine-pore) 45%, transparent) 25%, transparent 75%),
    linear-gradient(178deg, transparent 0 18%, color-mix(in oklab, var(--color-material-travertine-pore) 18%, transparent) 18% 21%, transparent 21% 47%, color-mix(in oklab, var(--color-material-travertine-pore) 26%, transparent) 47% 48.5%, transparent 48.5% 71%, color-mix(in oklab, var(--color-material-travertine-pore) 14%, transparent) 71% 76%, transparent 76%);
  background-size: 3.1rem 2.3rem, 5.3rem 3.7rem, 2.9rem 4.1rem, 9.7rem 6.1rem, 100% 100%;
}

/* ── 9. 신뢰 띠 ─────────────────────────────────────────────────────────── */

.trust { display: grid; border-block: 1px solid var(--color-rule); }
.trust li { padding: calc(var(--spacing) * 5) 0; font-size: var(--text-small); }
.trust li + li { border-top: 1px solid var(--color-rule); }
.trust strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; display: block; margin-bottom: calc(var(--spacing) * 1); }
.trust-wrap { padding-bottom: var(--spacing-section); }

/* ── 10. 쇼룸 — 밤 ───────────────────────────────────────────────────────── */

.showroom { padding-block: var(--spacing-section) var(--spacing-block); }
.showroom__grid { display: grid; gap: var(--spacing-block); }
.showroom__copy { display: grid; gap: calc(var(--spacing) * 6); align-content: start; }
.showroom .eyebrow, .showroom__addr small { color: var(--color-ink-inverse-soft); }
.showroom__addr { font-size: var(--text-lead); line-height: var(--text-lead--line-height); }
.showroom__media { --niche: var(--color-surface-clay); order: -1; }
.hours { width: 100%; max-width: 26rem; font-size: var(--text-small); }
.hours tr { border-top: 1px solid var(--color-rule-inverse); }
.hours tr:last-child { border-bottom: 1px solid var(--color-rule-inverse); }
.hours th, .hours td { padding: calc(var(--spacing) * 2.5) 0; text-align: left; font-weight: var(--font-weight-body); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours th { color: var(--color-ink-inverse-soft); }

.plan { display: grid; gap: calc(var(--spacing) * 3); max-width: 30rem; }
.plan svg { width: 100%; height: auto; overflow: visible; }
.plan__room { stroke: var(--color-ink); stroke-width: 3; transition: filter var(--dur-ui) var(--ease-out-soft); }
.plan__room--living { fill: var(--color-bg); }
.plan__room--sleeping { fill: var(--color-bg-olive); }
.plan__room--study { fill: var(--color-bg-ochre); }
.plan__room--dining { fill: var(--color-bg-fig); }
.plan__shell { fill: none; stroke: var(--color-ink-inverse-soft); stroke-width: 1.25; }
.plan__door { fill: none; stroke: var(--color-ink); stroke-width: 1; stroke-dasharray: 2 2; }
.plan__route { fill: none; stroke: var(--color-accent-inverse); stroke-width: 1.5; stroke-dasharray: 5 5; stroke-linecap: round; }
.plan__route-end { fill: var(--color-accent-inverse); }
.plan__label { fill: var(--color-ink); font-family: var(--font-display); font-size: 17px; }
.plan__no { fill: var(--color-ink); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; font-weight: 600; }
.plan__io { fill: var(--color-ink-inverse); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; font-weight: 600; }
.plan figcaption { font-size: var(--text-caption); color: var(--color-ink-inverse-soft); }
@media (hover: hover) {
  .plan g:hover .plan__room { filter: brightness(1.08); }
}

/* 이중 테 판 — 바깥 껍데기 + 석고 핵(동심 모서리) */
.plate {
  padding: var(--spacing-bezel);
  border-radius: var(--radius-plate);
  background: color-mix(in oklab, var(--color-ink) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 10%, transparent);
}
.night .plate {
  background: color-mix(in oklab, var(--color-ink-inverse) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink-inverse) 12%, transparent);
}
.plate__core {
  border-radius: var(--radius-plate-inner);
  background: var(--color-plate);
  box-shadow: var(--shadow-plate-inset);
  color: var(--color-ink);
}

.note { padding-block: var(--spacing-block) var(--spacing-section); }
.note .plate { max-width: var(--container-read); margin-inline: auto; }
.note .plate__core { display: grid; gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 7) calc(var(--spacing) * 8); }
.note h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.note p { font-size: var(--text-small); line-height: var(--leading-body); color: var(--color-ink-soft); text-wrap: pretty; }
.note p strong { color: var(--color-ink); font-weight: var(--font-weight-medium); }

/* ── 11. 꼬리 ────────────────────────────────────────────────────────────── */

.foot { padding-block: var(--spacing-block) calc(var(--spacing) * 10 + env(safe-area-inset-bottom)); }
.foot__mark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 16.4vw, 15rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 10);
  border-bottom: 1px solid var(--color-rule-inverse);
}
.foot__mark em { font-style: italic; }
.foot__cols { display: grid; gap: calc(var(--spacing) * 8); padding-block: calc(var(--spacing) * 10); }
.foot__cols h2 { font-size: var(--text-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--color-ink-inverse-soft); margin-bottom: calc(var(--spacing) * 2); }
.foot__cols a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); min-width: var(--spacing-tap); text-decoration: none; gap: calc(var(--spacing) * 2); }
.foot__cols address { font-style: normal; line-height: var(--leading-body); }
@media (hover: hover) {
  .foot__cols a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
}
.foot__fine p { max-width: 60ch; }
.foot__fine { display: grid; gap: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 6); border-top: 1px solid var(--color-rule-inverse); font-size: var(--text-caption); color: var(--color-ink-inverse-soft); }

/* ── 12. 알림 ────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--spacing) * 6 + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  width: max-content;
  max-width: calc(100% - var(--spacing) * 8);
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 6);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  font-size: var(--text-small);
  text-align: center;
  translate: -50% 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-out-soft), translate var(--dur-ui) var(--ease-out-soft), visibility 0s linear var(--dur-ui);
}
.toast.is-on { opacity: 1; translate: -50% 0; visibility: visible; transition-delay: 0s; }

/* ── 13. 컬렉션 ──────────────────────────────────────────────────────────── */

.page-head { padding-top: calc(var(--spacing-nav) + var(--spacing) * 10); padding-bottom: var(--spacing-block); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(var(--spacing) * 2); font-size: var(--text-small); margin-bottom: calc(var(--spacing) * 4); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.crumbs li + li::before { content: "/"; margin-right: calc(var(--spacing) * 2); }
.page-head__grid { display: grid; gap: calc(var(--spacing) * 5); align-items: end; }
.page-head__meta { font-size: var(--text-small); font-weight: var(--font-weight-medium); margin-top: calc(var(--spacing) * 3); }

.filters { display: grid; gap: calc(var(--spacing) * 4); padding-bottom: var(--spacing-block); }
.filters__group { display: grid; gap: calc(var(--spacing) * 2); min-width: 0; }
.filters__label { font-size: var(--text-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--font-weight-medium); }
.filters__row { display: flex; gap: calc(var(--spacing) * 2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--spacing-gutter) * -1); padding-inline: var(--spacing-gutter); padding-block: 2px; scroll-padding-inline: var(--spacing-gutter); }
.filters__row::-webkit-scrollbar { display: none; }
.filters__row .chip { flex: none; }
.filters__status { display: flex; align-items: center; gap: calc(var(--spacing) * 4); font-size: var(--text-small); }
.filters__count { font-family: var(--font-display); font-size: 1.5rem; }
.filters__clear { min-height: var(--spacing-tap); text-decoration: underline; text-underline-offset: 0.25em; font-weight: var(--font-weight-medium); }
.filters__clear[hidden] { display: none; }

.band { padding-block: var(--spacing-block) var(--spacing-section); }
.band[hidden] { display: none; }
.band__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 8); padding-bottom: calc(var(--spacing) * 5); border-bottom: 1px solid var(--color-rule); }
.band__title em { font-style: italic; }
.band__count { font-size: var(--text-small); font-weight: var(--font-weight-medium); }
.band__empty { font-size: var(--text-lead); margin-bottom: calc(var(--spacing) * 8); }
.band__empty[hidden] { display: none; }
.band__empty button { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; min-height: var(--spacing-tap); font-weight: var(--font-weight-medium); }
.band__grid { display: grid; gap: calc(var(--spacing) * 8); }
.band__rest {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: calc(var(--spacing) * 4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(var(--spacing-gutter) * -1);
  padding-inline: var(--spacing-gutter);
  scroll-padding-inline: var(--spacing-gutter);
}
.band__rest::-webkit-scrollbar { display: none; }
.band__rest > * { scroll-snap-align: start; }
.card[hidden] { display: none; }
.memo { display: grid; gap: calc(var(--spacing) * 3); align-content: end; padding-top: calc(var(--spacing) * 5); border-top: 1px solid var(--color-ink); }
.memo h3 { font-size: var(--text-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--font-weight-medium); }
.memo p { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.34; text-wrap: pretty; }
.memo small { display: flex; align-items: center; gap: calc(var(--spacing) * 2); font-size: var(--text-caption); font-weight: var(--font-weight-medium); }
.memo .dot { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 40%, transparent); }

.invite { padding-block: calc(var(--spacing) * 12); }
.invite .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 4) calc(var(--spacing) * 8); }
.invite p { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.3; max-width: 30ch; }

@media (min-width: 48rem) {
  .band__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--spacing) * 6); row-gap: calc(var(--spacing) * 12); align-items: end; }
  .band__grid > .card--anchor { grid-column: span 7; }
  .band__rest { display: contents; }
  .band__rest > :nth-child(1) { grid-column: span 5; }
  .band__rest > :nth-child(2) { grid-column: span 4; }
  .band__rest > :nth-child(3) { grid-column: span 5; }
  .band__grid > .memo { grid-column: span 3; }
  .band__grid { grid-auto-flow: dense; }
  /* 2행: 메모 3 · 카드 4 · 카드 5 — 순서를 CSS 로 */
  .band__rest > :nth-child(2) { order: 3; }
  .band__rest > :nth-child(3) { order: 4; }
  .band__grid > .memo { order: 2; }
  .band--flip .band__grid > .card--anchor { order: 2; }
  .band--flip .band__rest > :nth-child(1) { order: 1; }
  .band--flip .band__grid > .memo { order: 5; }
  .page-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page-head__grid > p { justify-self: end; max-width: 30ch; text-align: right; }
  .filters { grid-template-columns: auto auto 1fr; align-items: end; column-gap: calc(var(--spacing) * 10); }
  .filters__row { margin-inline: 0; padding-inline: 2px; flex-wrap: wrap; overflow: visible; }
  .filters__status { justify-self: end; }
}

/* ── 14. 상품 ────────────────────────────────────────────────────────────── */

.product { padding-top: calc(var(--spacing-nav) + var(--spacing) * 8); }
.product .crumbs { margin-bottom: calc(var(--spacing) * 6); }
.pdp { display: grid; gap: var(--spacing-block); align-items: start; }
.gallery { display: grid; gap: calc(var(--spacing) * 3); min-width: 0; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--spacing) * 2); }
.thumb {
  display: grid;
  gap: calc(var(--spacing) * 1.5);
  justify-items: start;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-swatch);
}
.thumb .niche { border-radius: var(--radius-swatch); }
.thumb .niche::after { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-plate) 20%, transparent); }
.thumb[aria-pressed="true"] .niche::after { box-shadow: inset 0 0 0 2px var(--color-accent), inset 0 0 0 4px var(--color-plate); }
.thumb__label { padding-bottom: calc(var(--spacing) * 1); }

.buy { display: grid; gap: calc(var(--spacing) * 6); }
.buy__title { font-size: var(--text-h1); line-height: var(--text-h1--line-height); }
.buy__lede { font-size: var(--text-lead); line-height: var(--text-lead--line-height); margin-top: calc(var(--spacing) * -3); }
.buy__room { display: flex; align-items: center; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 3); font-size: var(--text-small); font-weight: var(--font-weight-medium); }
.buy__room .dot { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 40%, transparent); }
.measured__note { font-size: var(--text-small); }
.buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4); }
.buy__amount { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.buy__note { font-size: var(--text-caption); }
.opt { display: grid; gap: calc(var(--spacing) * 3); border-top: 1px solid var(--color-rule); padding-top: calc(var(--spacing) * 5); }
.opt__label { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 3); align-items: baseline; font-size: var(--text-small); }
.opt__label b { font-size: var(--text-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--font-weight-medium); }
.fabrics { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 3); }
.fabric {
  width: calc(var(--spacing) * 14);
  height: calc(var(--spacing) * 14);
  border-radius: var(--radius-swatch);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 20%, transparent);
  transition: box-shadow var(--dur-ui) var(--ease-out-soft), scale var(--dur-press) var(--ease-press);
}
.fabric:active { scale: 0.96; }
.fabric[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wall), 0 0 0 4px var(--color-accent); }
.fabric--clay { background-color: var(--color-surface-clay); }
.fabric--moss { background-color: var(--color-material-boucle); background-image: radial-gradient(circle at 50% 50%, transparent 0 0.12rem, var(--color-material-boucle-loop) 0.14rem 0.22rem, transparent 0.24rem); background-size: 0.55rem 0.55rem; }
.fabric--fig { background-color: var(--color-surface-fig); }
.fabric--bone { background-color: var(--color-surface-bone); }
.buy__trust { display: grid; gap: calc(var(--spacing) * 1.5); font-size: var(--text-small); padding-top: calc(var(--spacing) * 5); border-top: 1px solid var(--color-rule); }
.buy__trust li { display: flex; gap: calc(var(--spacing) * 3); align-items: baseline; }
.buy__trust li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-accent); translate: 0 -0.1em; }

/* 치수 도면 — 벽 위 제목 + 석고 판 둘(면적 20% 이하) */
.measured { padding-block: var(--spacing-section) var(--spacing-block); }
.measured__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 8); }
.measured__head .block-head { gap: calc(var(--spacing) * 2); }
.unit { display: inline-flex; padding: calc(var(--spacing) * 1); border-radius: var(--radius-control); box-shadow: inset 0 0 0 1px var(--color-rule); }
.unit .chip { box-shadow: none; min-width: calc(var(--spacing) * 14); justify-content: center; }
.drawings { display: grid; gap: calc(var(--spacing) * 4); }
.drawing { margin: 0; }
.drawing .plate__core { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5) calc(var(--spacing) * 3); display: grid; gap: calc(var(--spacing) * 2); }
.drawing svg { width: 100%; height: auto; margin-inline: auto; overflow: visible; }
.drawing figcaption { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 3); font-size: var(--text-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--color-ink-soft); }
.drawing--side svg { max-width: 17rem; }
/* 1열(64rem 미만) + JS: 판 하나를 넘겨 본다 — 둘을 쌓으면 390×844 에서 석고 34%, 393×660 에서 44%.
   두 도면이 같은 칸에 겹쳐 판 크기가 바뀌지 않는다(넘겨도 아래가 뛰지 않는다). 캡션은 눌린 칩이 대신한다.
   도면 높이 상한 19.5svh − 판 안 위아래 여백: 393×660 에서 판 하나가 바깥 테까지 ≤ 20%(390×844 는 상한에 안 닿아 측면 숫자 그대로).
   캡션이 빠진 만큼 위아래 여백을 줄여 도면을 덜 줄인다. 하한 6rem 은 가로 폰에서 숫자를 지킨다. */
.measured__ctl { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 3); }
[data-views][hidden] { display: none; }
.drawings.is-one { grid-template-areas: "one"; }
.drawings.is-one > .drawing { grid-area: one; display: grid; }
.drawings.is-one > .drawing[hidden] { visibility: hidden; }
.drawings.is-one .plate__core { position: relative; align-content: center; padding-block: calc(var(--spacing) * 2); }
.drawings.is-one svg { max-height: clamp(6rem, calc(19.5svh - calc(var(--spacing) * 4)), 9.5rem); }
.drawings.is-one figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dw-body { fill: none; stroke: var(--color-ink); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.dw-soft { fill: none; stroke: var(--color-ink-soft); stroke-width: 0.9; stroke-dasharray: 3 3; }
.dw-floor { stroke: var(--color-ink); stroke-width: 1; }
.dw-ext { stroke: var(--color-accent); stroke-width: 0.75; opacity: 0.7; }
.dw-line { fill: none; stroke: var(--color-accent); stroke-width: 1.1; }
.dw-tick { stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; }
.dw-num { fill: var(--color-accent); font-family: var(--font-body); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-num--sm { font-size: 13px; font-weight: 500; }
.dw-key { fill: var(--color-ink-soft); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.12em; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .js .drawing.is-drawing .dw-line,
  .js .drawing.is-drawing .dw-ext { animation: draw var(--dur-draw) var(--ease-draw) backwards; stroke-dasharray: 1; }
  .js .drawing.is-drawing .dw-tick,
  .js .drawing.is-drawing .dw-num { animation: fade-in var(--dur-ui) var(--ease-out-soft) backwards; animation-delay: calc(var(--dur-draw) + var(--i, 0) * var(--stagger)); }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.u-swap, .dw-num { transition: opacity 200ms var(--ease-out-soft); }
.is-unit-swap .u-swap, .is-unit-swap .dw-num { opacity: 0; }

.fit { display: grid; gap: calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 8); }
.fit div { display: grid; gap: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 4); border-top: 1px solid var(--color-ink); }
.fit dt { font-size: var(--text-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--font-weight-medium); }
.fit dd { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.1; }
.fit dd small { display: block; font-family: var(--font-body); font-size: var(--text-small); line-height: var(--leading-body); margin-top: calc(var(--spacing) * 1.5); }

.made { padding-block: var(--spacing-block) var(--spacing-section); }
.made .block-head { margin-bottom: var(--spacing-block); }
.made__grid { display: grid; gap: calc(var(--spacing) * 6); }
.made__item { display: grid; gap: calc(var(--spacing) * 3); align-content: start; }
.made__sample { height: 13rem; border-radius: var(--radius-niche); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 16%, transparent); }
.made__sample--fabric { transition: background-color var(--dur-ui) var(--ease-out-soft); }
/* 천 — 그림 전용(글자 바탕 아님) */
.cloth-linen {
  background-color: var(--color-surface-clay);
  background-image:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--color-plate) 14%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--color-ink) 12%, transparent) 0 1px, transparent 1px 4px);
}
.cloth-wool {
  background-color: var(--color-surface-fig);
  background-image:
    repeating-linear-gradient(45deg, color-mix(in oklab, var(--color-plate) 12%, transparent) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, color-mix(in oklab, var(--color-ink) 10%, transparent) 0 2px, transparent 2px 6px);
}
.cloth-canvas {
  background-color: var(--color-surface-bone);
  background-image:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--color-ink) 7%, transparent) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--color-ink) 9%, transparent) 0 2px, transparent 2px 5px);
}
.made__item h3 { font-size: 1.625rem; line-height: 1.1; }
.made__item p { font-size: var(--text-small); max-width: 38ch; }
.layers { display: grid; gap: 0.3125rem; align-content: end; padding: calc(var(--spacing) * 5); background: var(--niche); }
.layer {
  display: flex;
  align-items: center;
  padding-inline: calc(var(--spacing) * 3);
  border-radius: calc(var(--spacing) * 3);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  background: var(--color-plate);
  color: var(--color-ink);
}
.layer--feather { height: 2.25rem; border-radius: 1.125rem 1.125rem calc(var(--spacing) * 2) calc(var(--spacing) * 2); background: var(--color-plate); }
.layer--foam { height: 3.75rem; background: color-mix(in oklab, var(--color-material-travertine) 70%, var(--color-plate)); }
.layer--springs {
  height: 3.25rem;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 0.45rem, color-mix(in oklab, var(--color-ink) 55%, transparent) 0.5rem 0.58rem, transparent 0.62rem) 0 50% / 1.35rem 100% repeat-x,
    var(--color-plate);
}
.layer--springs span { background: var(--color-plate); padding: 0 calc(var(--spacing) * 1.5); border-radius: var(--radius-pill); }

.care { padding-block: 0 var(--spacing-section); }
.care__list { max-width: var(--container-read); margin-inline: auto; border-top: 1px solid var(--color-rule); }
.care__list details { border-bottom: 1px solid var(--color-rule); scroll-margin-top: calc(var(--spacing-nav) + var(--spacing) * 4); }
.care__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  min-height: calc(var(--spacing) * 16);
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1.15;
  cursor: pointer;
  list-style: none;
}
.care__list summary::-webkit-details-marker { display: none; }
.care__list summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-rule);
  font-family: var(--font-body);
  font-size: 1.25rem;
  transition: rotate var(--dur-ui) var(--ease-out-soft);
}
.care__list details[open] summary::after { content: "−"; }
.care__list .care__body { padding-bottom: calc(var(--spacing) * 6); display: grid; gap: calc(var(--spacing) * 3); max-width: 60ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .care__list details.is-toggled[open] .care__body { animation: fade-up var(--dur-ui) var(--ease-out-soft) backwards; }
}

.rest { padding-block: var(--spacing-block) var(--spacing-section); }
.rest__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 8); }
.rest__grid {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: calc(var(--spacing) * 4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(var(--spacing-gutter) * -1);
  padding-inline: var(--spacing-gutter);
  scroll-padding-inline: var(--spacing-gutter);
}
.rest__grid::-webkit-scrollbar { display: none; }
.rest__grid > * { scroll-snap-align: start; }
.next-room { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 3); min-height: var(--spacing-tap); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 5) calc(var(--spacing) * 2) calc(var(--spacing) * 2); border-radius: var(--radius-control); background: var(--color-bg-olive); font-weight: var(--font-weight-medium); text-decoration: none; }
.next-room .dot { width: 1.75rem; height: 1.75rem; background: var(--color-surface-olive); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 25%, transparent); }
@media (hover: hover) {
  .next-room:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}

@media (min-width: 48rem) {
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--color-rule); }
  .trust li { padding: calc(var(--spacing) * 6) calc(var(--spacing) * 8); }
  .trust li:first-child { padding-left: 0; }
  .trust li + li { border-top: 0; border-left: 1px solid var(--color-rule); }
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--spacing) * 8); }
  .made__grid { grid-template-columns: 5fr 4fr 3fr; align-items: end; }
  .made__item:nth-child(1) .made__sample { height: 20rem; }
  .made__item:nth-child(2) .made__sample { height: 16rem; }
  .rest__grid { display: grid; grid-auto-flow: row; grid-template-columns: 5fr 4fr 3fr; align-items: end; overflow: visible; margin-inline: 0; padding-inline: 0; gap: calc(var(--spacing) * 6); }
}

@media (min-width: 64rem) {
  .hangers { grid-template-columns: 1.15fr 0.9fr 1fr 0.95fr; gap: calc(var(--spacing) * 5); padding-top: calc(var(--spacing) * 6); }
  .hangers::before { content: ""; position: absolute; left: calc(var(--spacing) * -4); right: calc(var(--spacing) * -4); top: 0; height: 2px; border-radius: 1px; background: var(--color-ink); }
  .hanger { height: var(--h); min-height: 0; overflow: visible; }
  .hanger::before { content: ""; position: absolute; left: 50%; top: calc(var(--spacing) * -6); width: 1px; height: calc(var(--spacing) * 6); background: var(--color-ink); }
  .hanger__grain { border-radius: var(--radius-swatch) var(--radius-swatch) 0 0; }
  .hanger__label { margin-top: 0; }
  .hanger { background: var(--wall); }
  .hanger__grain { border-bottom-left-radius: 0; }

  .showroom__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--spacing) * 16); align-items: start; }
  .showroom__media { order: 0; position: sticky; top: calc(var(--spacing-nav) + var(--spacing) * 4); }

  .pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--spacing) * 14); }
  .buy { position: sticky; top: calc(var(--spacing-nav) + var(--spacing) * 2); }
  .drawings { grid-template-columns: auto auto; justify-content: start; align-items: stretch; }
  .drawing svg { height: clamp(9.5rem, 19svh, 11.5rem); width: auto; max-width: none; }
  .drawing--side svg { max-width: none; }
}

/* 페이지 사이 — 벽색이 이어진다(지원 브라우저만) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ── 15. 동작 줄이기 — 도는 것 0 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}