/* ORIN — 화면 규칙. 값은 전부 tokens.css 의 var() — 여기서 새 색·새 크기를 만들지 않는다.
 * 뼈대 세 겹: 쟁반 껍질(.tray) › 받침(.tray__core) › 우물(.well). 우물은 컨테이너라서
 * 눈금자 간격(1 mm = 100cqw / --fov)이 사진 배율을 따라간다 — 화면 폭이 달라도 눈금과 사진이 같이 줄어든다. */

/* ── 바탕 ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
  scrollbar-color: var(--color-line-strong) var(--color-bg);
  color-scheme: light;
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

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

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

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sprite symbol * {
  vector-effect: non-scaling-stroke;
}

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

.skip {
  position: absolute;
  left: var(--spacing-gutter);
  top: calc(var(--spacing) * 2);
  z-index: 50;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

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

/* ── 격자 ─────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--spacing-grid);
}

@media (min-width: 40rem) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.section {
  margin-block-start: var(--spacing-section);
}

/* ── 글자 ─────────────────────────────────────────────────────────────── */
.eyebrow,
.label {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.display,
.h1,
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  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-3xl);
  line-height: var(--text-3xl--line-height);
  letter-spacing: var(--text-3xl--letter-spacing);
}

.h2 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  letter-spacing: var(--text-2xl--letter-spacing);
}

.eyebrow--long {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--text-sm);
}

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

.prose {
  max-width: var(--container-prose);
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

.prose p + p {
  margin-top: calc(var(--spacing) * 4);
}

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

/* Gloock 의 곱셈표는 머리카락 획이라 작은 크기에서 사라진다 — 획만 살짝 두껍게 */
.times {
  -webkit-text-stroke: 0.03em currentColor;
  paint-order: stroke fill;
}

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-line-strong);
  transition: color var(--duration-swap) var(--ease-lens), text-decoration-color var(--duration-swap) var(--ease-lens);
}

@media (hover: hover) {
  .link:hover {
    color: var(--color-accent);
    text-decoration-color: currentColor;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  min-height: 52px;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--duration-press) var(--ease-lens);
}

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

/* 원형 화살표 대신 글자 화살표 — 버튼 안 버튼을 걷었다(헤더 재설계) */
.btn__arrow {
  font-size: var(--text-base);
  line-height: 1;
  transition: transform var(--duration-swap) var(--ease-lens);
}

@media (hover: hover) {
  .btn:hover .btn__arrow {
    transform: translateX(3px);
  }
}

.btn--block {
  width: 100%;
  justify-content: space-between;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  padding-inline: calc(var(--spacing) * 5);
  min-height: 44px;
  font-size: var(--text-sm);
}

/* ── 알약 칩 (필터·사이즈·견본·정렬) ─────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: 44px;
  padding-inline: calc(var(--spacing) * 4);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  transition: transform var(--duration-press) var(--ease-lens), background-color var(--duration-swap) var(--ease-lens),
    box-shadow var(--duration-swap) var(--ease-lens);
}

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

.chip[aria-pressed="true"],
.chip[aria-checked="true"],
.chip[aria-current="true"] {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.chip__n {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.chip__tick {
  width: 12px;
  height: 12px;
  display: none;
  color: var(--color-accent);
}

.chip[aria-pressed="true"] .chip__tick,
.chip[aria-checked="true"] .chip__tick {
  display: block;
}

.swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  flex: none;
}

.swatch--hammered {
  background: var(--color-surface);
}

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

.swatch--oxidised {
  background: var(--color-ink-muted);
}

/* ── 헤더 — 가운데 워드마크 간판(center-wordmark) ─────────────────────
   보석 상점 간판처럼 ORIN 을 가운데 크게. 좌우 칸 폭이 같아야 대칭이 산다(1fr auto 1fr).
   높이는 흐름에서 바뀌지 않는다 — sticky 의 음수 top 으로 위 여백만 화면 밖에 걷고,
   워드마크 축소·줄 이동은 transform 만(DESIGN 모션 규칙: transform·opacity 만). */
.head {
  --head-h: 64px;
  --head-fold: 12px;
  --mark-fold: 0.78;
  position: sticky;
  top: calc(-1 * var(--head-fold));
  z-index: 10;
  height: calc(var(--head-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

.head__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 100%;
  padding-inline: max(var(--spacing-gutter), env(safe-area-inset-left)) max(var(--spacing-gutter), env(safe-area-inset-right));
  transition: transform var(--duration-swap) var(--ease-lens);
}

.head[data-folded] .head__bar {
  transform: translateY(calc(var(--head-fold) / 2));
}

.head__mark {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.14em;
  /* 자간이 오른쪽 끝에도 붙어 시각 중심이 왼쪽으로 쏠린다 — 같은 만큼 왼쪽을 채운다 */
  padding-left: 0.14em;
  text-decoration: none;
  transition: transform var(--duration-swap) var(--ease-lens);
}

.head[data-folded] .head__mark {
  transform: scale(var(--mark-fold));
}

.head__side {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 5);
}

.head__side--end {
  justify-content: flex-end;
}

.head__nav {
  display: none;
}

.head__link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-swap) var(--ease-lens);
}

.head__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* 짧은 글자 "Menu" 도 엄지 칸 44px 를 채운다 — 데스크톱 링크 간격은 건드리지 않게 여기만 */
.head__menu {
  min-width: 44px;
}

.head__search {
  display: none;
}

.head__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform: scale(0);
  transition: transform var(--duration-swap) var(--ease-lens);
}

.head__bag[data-count]:not([data-count="0"]) .head__dot {
  transform: scale(1);
}

@media (min-width: 45rem) {
  .head {
    --head-h: 104px;
    --head-fold: 40px;
    --mark-fold: 0.6;
  }

  .head__mark {
    font-size: clamp(2.5rem, 1.6rem + 1.6vw, 3.25rem);
  }

  .head__nav {
    display: flex;
    gap: calc(var(--spacing) * 6);
  }

  .head__menu {
    display: none;
  }

  .head__search {
    display: inline-flex;
  }

  .head__side--end {
    gap: calc(var(--spacing) * 6);
  }
}

@media (hover: hover) {
  .head__link:hover {
    color: var(--color-accent);
  }
}

/* 앵커가 붙은 머리 아래로 숨지 않게 — 접힌 머리 높이만큼 */
html {
  scroll-padding-top: 72px;
}

/* 가방 — 네이티브 popover, 가짜 결제 흐름 없이 숫자와 고지만 */
.bagpop {
  inset: auto;
  top: 72px;
  right: var(--spacing-gutter);
  width: min(20rem, calc(100vw - 2rem));
  margin: 0;
  padding: calc(var(--spacing) * 5);
  border: 0;
  border-radius: var(--radius-core);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-ring), var(--shadow-core);
}

.bagpop p + p {
  margin-top: calc(var(--spacing) * 2);
}

.bagpop__count {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

:root:has(.head[data-folded]) .bagpop {
  top: 72px;
}

.bagpop__note {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

@media (min-width: 64rem) {
  .bagpop {
    top: 112px;
  }
}

/* 모바일 메뉴 — 전체 화면 목록 */
.menu {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top) var(--spacing-gutter) max(var(--spacing-gutter), env(safe-area-inset-bottom));
  border: 0;
  background: var(--color-bg);
  color: var(--color-ink);
}

.menu::backdrop {
  background: var(--color-scrim);
}

/* 메뉴 판의 머리는 헤더와 같은 격자 — Close 가 Menu 자리에, ORIN 이 가운데 */
.menu__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--color-line);
}

.menu__top .head__mark {
  grid-column: 2;
}

.menu__top .head__link {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.menu__list {
  margin-top: calc(var(--spacing) * 10);
  display: grid;
  gap: calc(var(--spacing) * 2);
}

.menu__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1.1;
  text-decoration: none;
}

.menu__list a span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  color: var(--color-ink-muted);
}

.menu__foot {
  margin-top: calc(var(--spacing) * 10);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__list li {
    animation: stagger-in var(--duration-reveal) var(--ease-out-quint) both;
    animation-delay: calc(var(--i, 0) * 50ms);
  }
}

@keyframes stagger-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ── 쟁반 ─────────────────────────────────────────────────────────────── */
.tray {
  position: relative;
  container: tray / inline-size;
  padding: var(--spacing-bezel);
  border-radius: var(--radius-tray);
  box-shadow: var(--shadow-ring);
  transition: box-shadow var(--duration-swap) var(--ease-lens);
}

.tray__core {
  display: block;
  position: relative;
  padding: 0 var(--spacing-bezel) var(--spacing-bezel);
  border-radius: var(--radius-core);
  background: var(--color-surface);
  box-shadow: var(--shadow-core);
  color: inherit;
  text-decoration: none;
}

a.tray__core:focus-visible {
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-core);
}

.tray__head {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  height: var(--spacing-tray-head);
  padding-inline: calc(var(--spacing) * 2);
}

.tray__no {
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-ink-muted);
  flex: none;
}

.tray__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tray__price {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  flex: none;
}

/* 좁은 쟁반(모바일 2열) — 이름을 윗줄 전폭에, 번호·가격을 아랫줄에 */
@container tray (max-width: 250px) {
  .tray__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    row-gap: 2px;
    column-gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .tray__name {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
    line-height: 1.25;
  }

  .tray__no,
  .tray__price {
    grid-row: 2;
    font-size: var(--text-xs);
  }

  .tray__price {
    margin-left: 0;
  }
}

@media (hover: hover) {
  .tray:has(a.tray__core:hover) {
    box-shadow: 0 0 0 1px var(--color-line-strong);
  }

  .tray:has(a.tray__core:hover) .photo__img {
    transform: scale(1.03);
  }
}

/* 우물 — 사진이 놓일 자리. 컨테이너라서 cqw 가 우물 폭이다 */
.well {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-well);
  background: var(--color-plate);
  container-type: inline-size;
  --fov: 17.6;
  --mm: 9;
}

.well--45 {
  aspect-ratio: 4 / 5;
}

/* 사진 — 우물을 채운다. 판 색은 이미지가 오기 전의 바탕으로 남는다 */
.photo {
  position: absolute;
  inset: 0;
  background: var(--color-plate);
}

.photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform var(--duration-loupe) var(--ease-in-out-soft);
}

@container (max-width: 220px) {
  .ruler {
    left: 10px;
    top: 10px;
    bottom: 10px;
  }

  .pill {
    height: 22px;
    padding-inline: calc(var(--spacing) * 1.75);
    letter-spacing: 0.04em;
  }

  .pill--mm {
    top: 8px;
    left: 26px;
  }

  .pill--mag {
    top: 8px;
    right: 8px;
  }
}

/* 눈금자 — 1 mm 짧게, 5 mm 길게. 실제 크기 구간만 자수정 막대 */
.ruler {
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 10px;
  --mmpx: calc(100cqw / var(--fov));
  border-left: 1px solid var(--color-ink-muted);
  background:
    repeating-linear-gradient(to bottom, var(--color-ink-muted) 0 1px, transparent 1px calc(var(--mmpx) * 5)) left top / 9px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--color-ink-muted) 0 1px, transparent 1px var(--mmpx)) left top / 5px 100% no-repeat;
  pointer-events: none;
}

.ruler__bar {
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 2px;
  height: min(100%, calc(var(--mmpx) * var(--mm)));
  background: var(--color-accent);
  transform-origin: top;
  transition: transform 600ms var(--ease-out-quint);
}

.ruler__bar::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 9px;
  height: 2px;
  background: var(--color-accent);
}

/* 우물 위 알약 — 사진 위에 글자를 직접 쓰지 않는다 */
.pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  height: 24px;
  padding-inline: calc(var(--spacing) * 2.5);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

.pill--mag {
  top: 12px;
  right: 12px;
}

.pill--mm {
  top: 12px;
  left: 30px;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.pill__acc {
  color: var(--color-accent);
}

/* 넓은 쟁반 — 우물 + 스펙 */
.tray--wide .tray__body {
  display: grid;
  gap: var(--spacing-grid);
}

.spec {
  display: grid;
  align-content: space-between;
  gap: calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2) calc(var(--spacing) * 1);
}

.spec__lead {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.3;
  text-wrap: balance;
  max-width: 22ch;
}

.spec dl {
  display: grid;
  border-top: 1px solid var(--color-line);
}

.spec dl div {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
}

.spec dt {
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding-top: 2px;
}

.spec dd {
  text-align: right;
}

@media (min-width: 40rem) {
  .tray--wide .tray__body {
    grid-template-columns: calc((100% - var(--spacing-grid)) / 2 - var(--spacing-bezel) * 2) minmax(0, 1fr);
  }
}

/* 넓은 쟁반 hover — 매크로 → 착용 Crossfade (정보가 아니라 분위기라 터치에서는 없다) */
.well__alt {
  opacity: 0;
  transition: opacity var(--duration-crossfade) var(--ease-out-quint);
}

@media (hover: hover) {
  .tray--wide:has(a.tray__core:hover) .well__alt,
  .tray--wide:has(a.tray__core:focus-visible) .well__alt {
    opacity: 1;
  }
}

/* ── 스크롤 등장 — 첫 화면 밖만, 한 번만 (main.js 가 .is-pending 을 단다) ── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition: opacity calc(var(--duration-reveal) / 2) var(--ease-out-quint), transform var(--duration-reveal) var(--ease-out-quint);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }

  .js [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(24px);
  }

  .js [data-reveal].is-pending .ruler__bar {
    transform: scaleY(0);
  }
}

/* ── 홈 — 히어로 ──────────────────────────────────────────────────────── */
.hero {
  padding-top: calc(var(--spacing) * 5);
}

.hero__grid {
  display: grid;
  gap: calc(var(--spacing) * 3);
}

.hero__title .eyebrow {
  margin-bottom: calc(var(--spacing) * 3);
}

.hero__lead .more {
  display: none;
}

.hero__trays {
  display: flex;
  gap: var(--spacing-grid);
  margin-top: calc(var(--spacing) * 3);
  margin-inline: calc(var(--spacing-gutter) * -1);
  padding-inline: var(--spacing-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spacing-gutter);
  scrollbar-width: none;
}

.hero__trays::-webkit-scrollbar {
  display: none;
}

.hero__trays > .tray {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

.hero__cta {
  margin-top: calc(var(--spacing) * 6);
}

.dots {
  display: flex;
  justify-content: center;
  gap: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 3);
}

.dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-ink-muted);
  transition: background-color var(--duration-swap) var(--ease-lens), box-shadow var(--duration-swap) var(--ease-lens);
}

.dots span[aria-current="true"] {
  background: var(--color-accent);
  box-shadow: none;
}

@media (min-width: 40rem) {
  .hero__lead .more {
    display: inline;
  }

  .hero__trays > .tray {
    flex-basis: 46%;
  }
}

@media (min-width: 64rem) {
  .hero {
    padding-top: calc(var(--spacing) * 6);
  }

  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
    row-gap: 0;
    align-items: end;
  }

  .hero__title {
    grid-column: 1 / 9;
    grid-row: 1 / 3;
  }

  .hero__lead {
    grid-column: 9 / 13;
    grid-row: 1;
    padding-bottom: calc(var(--spacing) * 5);
  }

  .hero__cta {
    grid-column: 9 / 13;
    grid-row: 2;
    margin-top: 0;
    padding-bottom: calc(var(--spacing) * 2);
  }

  .hero__trays {
    grid-column: 1 / 13;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: calc(var(--spacing) * 10) 0 0;
    padding: 0;
    overflow: visible;
  }

  .hero .dots {
    display: none;
  }
}

/* 모바일 순서: 제목 → 리드 → 쟁반 → 점 → CTA */
@media (max-width: 63.99rem) {
  .hero__grid {
    display: flex;
    flex-direction: column;
  }

  .hero__title {
    order: 1;
  }

  .hero__lead {
    order: 2;
  }

  .hero__trays {
    order: 3;
  }

  .hero .dots {
    order: 4;
  }

  .hero__cta {
    order: 5;
    margin-top: calc(var(--spacing) * 2);
  }
}

/* ── 구간 머리 ────────────────────────────────────────────────────────── */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 10);
}

@media (min-width: 64rem) {
  .sec-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--spacing-grid);
    margin-bottom: calc(var(--spacing) * 12);
  }

  .sec-head .eyebrow {
    grid-column: 1 / -1;
  }
}

/* ── 컬렉션 색인 줄 ───────────────────────────────────────────────────── */
.index {
  border-top: 1px solid var(--color-line);
}

.index__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  grid-template-areas:
    "no thumb"
    "name thumb"
    "desc thumb"
    "meta thumb";
  column-gap: calc(var(--spacing) * 4);
  align-items: center;
  padding-block: calc(var(--spacing) * 5);
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  border-radius: 0;
}

.index__no {
  grid-area: no;
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.index__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: var(--text-index);
  line-height: var(--text-index--line-height);
  letter-spacing: var(--text-index--letter-spacing);
  padding-block: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  transition: color var(--duration-swap) var(--ease-lens);
}

.index__desc {
  grid-area: desc;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.index__meta {
  grid-area: meta;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.index__arrow {
  display: none;
  width: 28px;
  height: 28px;
  transition: transform var(--duration-swap) var(--ease-lens), color var(--duration-swap) var(--ease-lens);
}

.index__thumb {
  grid-area: thumb;
  width: 88px;
  border-radius: calc(var(--radius-well) - 4px);
}

@media (min-width: 64rem) {
  .index__link {
    grid-template-columns: 4rem minmax(0, 1fr) 17rem 28px;
    grid-template-areas: "no name desc arrow" "no name meta arrow";
    row-gap: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 6);
  }

  .index__no {
    align-self: start;
    padding-top: calc(var(--spacing) * 3);
  }

  .index__name {
    padding: 0;
  }

  .index__desc {
    align-self: end;
  }

  .index__meta {
    align-self: start;
  }

  .index__arrow {
    display: block;
    grid-area: arrow;
  }

  .index__thumb {
    display: none;
  }
}

@media (hover: hover) {
  .index__link:hover .index__name {
    color: var(--color-accent);
  }

  .index__link:hover .index__arrow {
    transform: translateX(4px);
    color: var(--color-accent);
  }
}

.index__link:focus-visible {
  border-radius: var(--radius-core);
}

.collections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 8);
}

.collections__preview {
  display: none;
}

.budget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 6);
}

.budget .label {
  margin-right: calc(var(--spacing) * 2);
}

@media (min-width: 64rem) {
  .collections {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
  }

  .collections__list {
    grid-column: 1 / 9;
  }

  .collections__preview {
    display: block;
    grid-column: 9 / 13;
    align-self: start;
  }

  .collections__preview .well {
    display: grid;
  }

  .collections__preview .photo {
    opacity: 0;
    transition: opacity 280ms var(--ease-out-quint);
  }

  .collections__preview .photo.is-active {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collections__preview .photo {
    transition: none;
  }
}

/* ── 베스트 6 — 사선 리듬 격자 ────────────────────────────────────────── */
.best {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-grid);
  align-items: start;
}

.best > .tray--wide {
  grid-column: span 2;
}

@media (min-width: 64rem) {
  .best {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── 소재 이야기 ──────────────────────────────────────────────────────── */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 10);
}

.story__text {
  display: grid;
  align-content: start;
  gap: calc(var(--spacing) * 6);
}

.figs {
  display: grid;
  border-top: 1px solid var(--color-line);
}

.figs div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 4);
  border-bottom: 1px solid var(--color-line);
}

@media (min-width: 40rem) {
  .figs div {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }
}

.figs dt {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.figs dd {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.figs dd b {
  color: var(--color-ink);
  font-weight: 500;
}

@media (min-width: 64rem) {
  .story {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
    align-items: center;
  }

  .story__media {
    grid-column: 1 / 6;
  }

  .story__text {
    grid-column: 7 / 13;
  }

  .story--flip .story__media {
    grid-column: 1 / 7;
  }

  .story--flip .story__text {
    grid-column: 8 / 13;
  }
}

/* ── 신뢰 — 머리카락 선으로 나눈 4칸 ─────────────────────────────────── */
.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.trust li {
  display: grid;
  align-content: start;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4) calc(var(--spacing) * 6) 0;
}

.trust li:nth-child(2n) {
  padding-left: calc(var(--spacing) * 4);
  border-left: 1px solid var(--color-line);
}

.trust li:nth-child(-n + 2) {
  border-bottom: 1px solid var(--color-line);
}

.trust svg {
  width: 24px;
  height: 24px;
  color: var(--color-ink-muted);
}

.trust__t {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--text-sm--line-height);
}

.trust p {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-muted);
}

@media (min-width: 64rem) {
  .trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .trust li,
  .trust li:nth-child(2n) {
    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6);
    border-left: 1px solid var(--color-line);
  }

  .trust li:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .trust li:nth-child(-n + 2) {
    border-bottom: 0;
  }
}

/* ── 고지 ─────────────────────────────────────────────────────────────── */
.notice .tray__core {
  background: var(--color-plate);
  box-shadow: none;
  padding: calc(var(--spacing) * 10) calc(var(--spacing) * 6);
  display: grid;
  gap: calc(var(--spacing) * 4);
}

.notice p:last-child {
  max-width: var(--container-prose);
  color: var(--color-ink);
  text-wrap: pretty;
}

@media (min-width: 64rem) {
  .notice-wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
  }

  .notice {
    grid-column: 3 / 11;
  }

  .notice .tray__core {
    padding: calc(var(--spacing) * 14) calc(var(--spacing) * 14);
  }
}

/* ── 꼬리 — 흑연 띠 ───────────────────────────────────────────────────── */
.foot {
  margin-top: var(--spacing-section);
  background: var(--color-band-night);
  color: var(--color-on-night);
  overflow: hidden;
  padding-top: calc(var(--spacing) * 16);
}

.foot :focus-visible {
  box-shadow: 0 0 0 2px var(--color-band-night), 0 0 0 4px var(--color-accent-on-night);
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 10) var(--spacing-grid);
}

.foot__intro {
  grid-column: 1 / -1;
  max-width: 22rem;
  color: var(--color-on-night-muted);
  font-size: var(--text-sm);
}

.foot__intro strong {
  display: block;
  margin-bottom: calc(var(--spacing) * 2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  color: var(--color-on-night);
}

.foot__col h2 {
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-on-night-muted);
  margin-bottom: calc(var(--spacing) * 3);
}

.foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

@media (hover: hover) {
  .foot__col a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.foot__legal {
  display: grid;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 14);
  padding-top: calc(var(--spacing) * 6);
  border-top: 1px solid color-mix(in oklch, var(--color-on-night) 16%, var(--color-band-night));
  font-size: var(--text-sm);
}

.foot__legal p {
  max-width: var(--container-prose);
}

.foot__legal p:last-child {
  color: var(--color-on-night-muted);
}

.foot__mark {
  font-family: var(--font-display);
  font-size: calc(var(--text-display) * 2.6);
  line-height: 0.8;
  letter-spacing: var(--text-display--letter-spacing);
  margin-top: calc(var(--spacing) * 10);
  margin-bottom: -0.12em;
  padding-inline: var(--spacing-gutter);
  max-width: var(--container-page);
  margin-inline: auto;
  color: var(--color-on-night);
  user-select: none;
}

@media (min-width: 64rem) {
  .foot__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .foot__intro {
    grid-column: 1 / 6;
  }

  .foot__col:nth-of-type(1) {
    grid-column: 7 / 9;
  }

  .foot__col:nth-of-type(2) {
    grid-column: 9 / 11;
  }

  .foot__col:nth-of-type(3) {
    grid-column: 11 / 13;
  }

  .foot__legal {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ── 빵부스러기 · 탭 ──────────────────────────────────────────────────── */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

.crumbs li + li::before {
  content: "/";
  color: var(--color-line-strong);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.crumbs [aria-current] {
  color: var(--color-ink);
}

@media (hover: hover) {
  .crumbs a:hover {
    color: var(--color-accent);
  }
}

.tabs {
  display: flex;
  gap: calc(var(--spacing) * 6);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-line);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: 48px;
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink-muted);
  box-shadow: inset 0 -2px 0 transparent;
  border-radius: 0;
  white-space: nowrap;
}

.tabs a span {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
}

.tabs a[aria-current="page"] {
  color: var(--color-ink);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

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

/* ── 컬렉션 머리 ──────────────────────────────────────────────────────── */
.page-top {
  padding-top: calc(var(--spacing) * 3);
}

.coll-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 4);
  margin-top: calc(var(--spacing) * 2);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-ink);
}

.meta li + li::before {
  content: "·";
  margin-right: calc(var(--spacing) * 3);
  color: var(--color-ink-muted);
}

.coll-head .tabs {
  margin-top: calc(var(--spacing) * 2);
}

@media (min-width: 64rem) {
  .coll-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
    row-gap: calc(var(--spacing) * 8);
    align-items: end;
    margin-top: calc(var(--spacing) * 4);
  }

  .coll-head h1 {
    grid-column: 1 / 8;
  }

  .coll-head__about {
    grid-column: 8 / 13;
    display: grid;
    gap: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .coll-head .tabs {
    grid-column: 1 / 13;
    margin-top: 0;
  }
}

.coll-head__about {
  display: grid;
  gap: calc(var(--spacing) * 3);
}

.coll-head__about p {
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

.coll-head__about .more {
  display: none;
}

@media (min-width: 40rem) {
  .coll-head__about .more {
    display: inline;
  }
}

/* ── 필터 + 격자 ──────────────────────────────────────────────────────── */
.shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 6);
}

.rail {
  display: none;
}

.filters {
  display: grid;
  gap: calc(var(--spacing) * 7);
}

.fgroup {
  display: grid;
  gap: calc(var(--spacing) * 3);
}

.fgroup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}

.filters__clear {
  justify-self: start;
  min-height: 44px;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-line-strong);
}

.filters__clear[disabled] {
  color: var(--color-ink-muted);
  text-decoration: none;
  cursor: default;
}

.shop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 4);
  border-bottom: 1px solid var(--color-line);
}

.shop__count {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.shop__sort {
  display: none;
  gap: calc(var(--spacing) * 1.5);
}

.shop__filterbtn .ico,
.shop__sortcycle .ico {
  width: 16px;
  height: 16px;
}

.pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--spacing-grid);
  align-items: start;
  margin-top: calc(var(--spacing) * 6);
}

.pieces [hidden] {
  display: none;
}

.pieces .tray.is-leaving {
  opacity: 0;
  transition: opacity 160ms var(--ease-out-quint);
}

.insert {
  grid-column: span 2;
}

.insert .tray__core {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: calc(var(--spacing) * 4);
  padding: var(--spacing-bezel);
  align-items: end;
}

.insert__quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.3;
  padding: 0 calc(var(--spacing) * 2) calc(var(--spacing) * 3) 0;
  text-wrap: balance;
}

.insert__quote span {
  display: block;
  margin-top: calc(var(--spacing) * 3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-muted);
}

.empty {
  margin-top: calc(var(--spacing) * 6);
}

.empty .tray__core {
  display: grid;
  gap: calc(var(--spacing) * 6);
  padding: var(--spacing-bezel);
}

.empty__well {
  aspect-ratio: 5 / 2;
  border-radius: var(--radius-well);
  background: var(--color-plate);
}

.empty__text {
  display: grid;
  justify-items: start;
  gap: calc(var(--spacing) * 3);
  padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 4);
}

.empty__text p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

@media (max-width: 63.99rem) {
  .shop__sort {
    display: none;
  }
}

@media (min-width: 64rem) {
  .shop {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
    margin-top: calc(var(--spacing) * 10);
  }

  .rail {
    display: block;
    grid-column: 1 / 4;
    align-self: start;
    position: sticky;
    top: calc(64px + var(--spacing) * 6); /* 접힌 머리 64px 아래 */
    padding-right: calc(var(--spacing) * 4);
  }

  .shop__main {
    grid-column: 4 / 13;
  }

  .shop__filterbtn,
  .shop__sortcycle {
    display: none;
  }

  .shop__sort {
    display: flex;
  }

  .shop__count {
    margin-left: 0;
    margin-right: auto;
    font-size: var(--text-base);
    color: var(--color-ink);
  }

  .pieces {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 모바일 필터 시트 — dialog + showModal, 아래에서 올라온다 */
.sheet {
  width: 100%;
  max-width: none;
  max-height: 88dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-tray) var(--radius-tray) 0 0;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-core);
  overscroll-behavior: contain;
}

.sheet::backdrop {
  background: var(--color-scrim);
}

.sheet__top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--spacing) * 3) var(--spacing-gutter);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.sheet__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

.sheet__slot {
  padding: calc(var(--spacing) * 6) var(--spacing-gutter);
}

.sheet__foot {
  position: sticky;
  bottom: 0;
  padding: calc(var(--spacing) * 3) var(--spacing-gutter) max(calc(var(--spacing) * 3), env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}

@media (prefers-reduced-motion: no-preference) {
  .sheet[open] {
    animation: sheet-in var(--duration-sheet) var(--ease-out-quint);
  }

  .sheet[open]::backdrop {
    animation: fade-in var(--duration-sheet) var(--ease-out-quint);
  }

  .sheet.is-closing {
    animation: fade-out 200ms var(--ease-out-quint) forwards;
  }
}

@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
}

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

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* ── 상품 — 갤러리 + 구매 상자 ────────────────────────────────────────── */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 1);
}

.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 3);
  min-width: 0;
}

.thumbs {
  display: none;
}

.stage .tray__core {
  padding: var(--spacing-bezel);
}

.slides {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.slides::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.slide .photo__img {
  transform: scale(var(--true-scale, 1));
}

.loupe {
  position: absolute;
  left: 30px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: 44px;
  padding: 0 calc(var(--spacing) * 4) 0 calc(var(--spacing) * 1.5);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  font-weight: 600;
  z-index: 2;
}

.loupe__track {
  position: relative;
  width: 32px;
  height: 20px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  flex: none;
}

.loupe__track::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-ink-muted);
  transition: transform var(--duration-swap) var(--ease-lens), background-color var(--duration-swap) var(--ease-lens);
}

.loupe[aria-pressed="true"] .loupe__track {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.loupe[aria-pressed="true"] .loupe__track::after {
  transform: translateX(12px);
  background: var(--color-accent);
}

.stage .pill--mag,
.stage .pill--mm,
.stage .ruler {
  z-index: 2;
}

.pill__swap > span + span {
  display: none;
}

.is-true .pill__swap > span:first-child {
  display: none;
}

.is-true .pill__swap > span + span {
  display: inline;
  animation: fade-in 160ms var(--ease-out-quint);
}

.pill--true {
  left: 50%;
  top: calc(50% + 8cqw);
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: opacity var(--duration-crossfade) var(--ease-out-quint), transform var(--duration-crossfade) var(--ease-out-quint);
  font-weight: 500;
  color: var(--color-ink-muted);
  z-index: 2;
}

.is-true .pill--true {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: calc(var(--duration-loupe) * 0.6);
}

.gallery__note {
  max-width: var(--container-prose);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  min-height: 1.5em;
}

.gallery .dots {
  margin-top: 0;
  padding-block: calc(var(--spacing) * 1);
}

/* 구매 상자 */
.buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: calc(var(--spacing) * 5);
}

.buy__title {
  display: grid;
  gap: calc(var(--spacing) * 2);
}

.buy__price {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-variant-numeric: tabular-nums lining-nums;
}

.buy__line {
  color: var(--color-ink-muted);
  max-width: 30rem;
  text-wrap: pretty;
}

.opt {
  display: grid;
  gap: calc(var(--spacing) * 2.5);
}

.opt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
}

.opt__value {
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.opt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}

.opt__chips .chip--size {
  min-width: 52px;
  justify-content: center;
  padding-inline: calc(var(--spacing) * 3);
}

.opt__guide {
  font-size: var(--text-sm);
}

.engrave {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.engrave__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 0;
}

.engrave__toggle .ico {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-accordion) var(--ease-out-quint);
}

.engrave__toggle[aria-expanded="true"] .ico {
  transform: rotate(45deg);
}

.engrave__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-accordion) var(--ease-out-quint), visibility var(--duration-accordion);
  visibility: hidden;
}

.engrave__panel > div {
  overflow: hidden;
  min-height: 0;
}

.engrave__toggle[aria-expanded="true"] + .engrave__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.engrave__inner {
  display: grid;
  gap: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 5);
}

.band {
  width: 100%;
  height: auto;
  border-radius: var(--radius-well);
  background: var(--color-plate);
}

.band text {
  font-family: var(--font-display);
  font-size: 13px;
  fill: var(--color-ink);
  letter-spacing: 0.12em;
}

.band.is-sans text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.band .band__outer {
  fill: var(--color-surface);
  stroke: var(--color-ink-muted);
  stroke-width: 1;
}

.band .band__hole {
  fill: var(--color-plate);
  stroke: var(--color-ink-muted);
  stroke-width: 1;
}

.band .band__wall {
  fill: var(--color-bg);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.engrave__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

.engrave__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.buy__small {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.toast {
  min-height: 1.5em;
  font-size: var(--text-sm);
  color: var(--color-ink);
  opacity: 0;
  transition: opacity 200ms var(--ease-out-quint);
}

.toast.is-on {
  opacity: 1;
}

@media (min-width: 64rem) {
  .pdp {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
    align-items: start;
    margin-top: 0;
  }

  .gallery {
    grid-column: 1 / 8;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: calc(var(--spacing) * 4);
    row-gap: calc(var(--spacing) * 3);
  }

  .thumbs {
    display: grid;
    align-content: start;
    gap: calc(var(--spacing) * 3);
    grid-row: 1 / 3;
  }

  .thumbs button {
    display: block;
    padding: 4px;
    border-radius: calc(var(--radius-well) + 2px);
    box-shadow: 0 0 0 1px var(--color-line);
    transition: box-shadow var(--duration-swap) var(--ease-lens);
  }

  .thumbs button[aria-current="true"] {
    box-shadow: 0 0 0 1px var(--color-accent);
  }

  .thumbs .well {
    display: block;
    border-radius: calc(var(--radius-well) - 2px);
  }

  .slides {
    display: grid;
    overflow: hidden;
  }

  .slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-swap) var(--ease-out-quint), visibility var(--duration-swap);
  }

  .slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  .gallery .dots {
    display: none;
  }

  .buy {
    grid-column: 8 / 13;
    padding-left: calc(var(--spacing) * 6);
    gap: calc(var(--spacing) * 4.5);
  }

  .buy .h1 {
    font-size: min(var(--text-3xl), 5.25rem);
  }
}

@media (min-width: 64rem) and (min-height: 51.25rem) {
  .buy {
    position: sticky;
    top: calc(64px + var(--spacing) * 6); /* 접힌 머리 64px 아래 */
  }
}

/* ── 스펙 판 ──────────────────────────────────────────────────────────── */
.plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 10);
}

.plate__draw {
  padding: calc(var(--spacing) * 3);
  border-radius: var(--radius-core);
  background: var(--color-surface);
  box-shadow: var(--shadow-ring), var(--shadow-core);
}

.plate__draw svg {
  width: 100%;
  height: auto;
  color: var(--color-ink-muted);
}

.plate__draw .dim {
  stroke: var(--color-accent);
}

.plate__draw text {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--color-ink-muted);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 39.99rem) {
  .plate__draw text {
    font-size: 17px;
  }
}

@media (min-width: 40rem) {
  .plate__draw {
    padding: calc(var(--spacing) * 6);
  }
}

.plate__draw .dimtext {
  fill: var(--color-accent);
  font-weight: 600;
}

.deflist {
  display: grid;
  border-top: 1px solid var(--color-line);
}

.deflist div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 4);
  border-bottom: 1px solid var(--color-line);
}

.deflist dt {
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding-top: 3px;
}

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

@media (min-width: 64rem) {
  .plate {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
    align-items: start;
  }

  .plate__draw {
    grid-column: 1 / 7;
  }

  .plate__text {
    grid-column: 8 / 13;
  }
}

/* ── 사이즈 가이드 + 1:1 사이저 ───────────────────────────────────────── */
.sizing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 10);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
}

.table caption {
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding-bottom: calc(var(--spacing) * 3);
}

.table th,
.table td {
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 2);
  text-align: right;
  border-bottom: 1px solid var(--color-line);
}

.table th:first-child,
.table td:first-child {
  text-align: left;
  padding-left: 0;
}

.table th:last-child,
.table td:last-child {
  padding-right: 0;
}

.table thead th {
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink-muted);
  border-bottom-color: var(--color-line-strong);
}

.table tbody th {
  font-weight: 600;
}

.table tr.is-picked th,
.table tr.is-picked td {
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.table tr.is-picked th {
  color: var(--color-accent);
}

.sizer {
  display: grid;
  gap: calc(var(--spacing) * 6);
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4);
  border-radius: var(--radius-core);
  background: var(--color-surface);
  box-shadow: var(--shadow-ring), var(--shadow-core);
  --cal: 1;
}

.sizer__head {
  display: grid;
  gap: calc(var(--spacing) * 1);
}

.sizer__hint {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.sizer__rings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 1);
}

.sizer__rings button {
  display: grid;
  justify-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: 44px;
  padding: calc(var(--spacing) * 1) 0;
  border-radius: var(--radius-core);
}

/* 모바일 — 사이저를 화면 끝까지 펴서 원 다섯 개가 100% 에서 한 줄에 들어오게 */
@media (max-width: 39.99rem) {
  .sizer {
    margin-inline: calc(var(--spacing-gutter) * -1);
    padding-inline: var(--spacing-gutter);
    border-radius: 0;
    box-shadow: 0 1px 0 var(--color-line), 0 -1px 0 var(--color-line);
  }
}

.sizer__circle {
  width: calc(var(--d) * 1mm * var(--cal));
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  transition: box-shadow var(--duration-swap) var(--ease-lens);
}

.sizer__rings button[aria-checked="true"] .sizer__circle {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.sizer__rings .label {
  color: var(--color-ink);
}

.sizer__rings button[aria-checked="true"] .label {
  color: var(--color-accent);
}

.card {
  display: grid;
  gap: calc(var(--spacing) * 3);
}

.card__line {
  position: relative;
  width: calc(85.6mm * var(--cal));
  max-width: 100%;
  height: 20px;
  border-inline: 1px solid var(--color-ink);
}

.card__line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-ink);
}

.card__line span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-inline: calc(var(--spacing) * 2);
  background: var(--color-surface);
  font-size: var(--text-xs);
  letter-spacing: var(--text-xs--letter-spacing);
  font-variant-numeric: tabular-nums lining-nums;
}

.card p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

.cal {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

.cal__step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  flex: none;
}

.cal__step .ico {
  width: 14px;
  height: 14px;
}

.cal__slider {
  position: relative;
  flex: 1;
  height: 44px;
  cursor: pointer;
  touch-action: none;
  border-radius: var(--radius-pill);
}

.cal__slider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-line-strong);
}

.cal__thumb {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.cal__val {
  min-width: 3.5rem;
  text-align: right;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
}

@media (min-width: 64rem) {
  .sizing {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
    align-items: start;
  }

  .sizing__table {
    grid-column: 1 / 8;
  }

  .sizer {
    grid-column: 8 / 13;
  }
}

/* ── 아코디언 ─────────────────────────────────────────────────────────── */
.accordion {
  border-top: 1px solid var(--color-line);
}

.accordion details {
  border-bottom: 1px solid var(--color-line);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  cursor: pointer;
  list-style: none;
  border-radius: 0;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary .ico {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-accordion) var(--ease-out-quint);
}

.accordion details[open] summary .ico {
  transform: rotate(45deg);
}

.accordion details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--duration-accordion) var(--ease-out-quint), content-visibility var(--duration-accordion) allow-discrete;
}

.accordion details[open]::details-content {
  block-size: auto;
}

.accordion .prose {
  padding-bottom: calc(var(--spacing) * 6);
}

@media (min-width: 64rem) {
  .accordion-wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-grid);
  }

  .accordion-wrap > * {
    grid-column: 3 / 11;
  }
}

/* ── 인용 한 줄 ───────────────────────────────────────────────────────── */
.quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: var(--text-2xl--letter-spacing);
  text-wrap: balance;
}

.quote-by {
  margin-top: calc(var(--spacing) * 6);
  max-width: 32rem;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ── 짝 상품 — 모바일은 가로 스냅 ─────────────────────────────────────── */
.pairs {
  display: flex;
  gap: var(--spacing-grid);
  margin-inline: calc(var(--spacing-gutter) * -1);
  padding-inline: var(--spacing-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spacing-gutter);
  scrollbar-width: none;
}

.pairs::-webkit-scrollbar {
  display: none;
}

.pairs > .tray {
  flex: 0 0 70%;
  scroll-snap-align: start;
}

@media (min-width: 40rem) {
  .pairs > .tray {
    flex-basis: 42%;
  }
}

@media (min-width: 64rem) {
  .pairs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* ── reduced-motion — 전부 즉시 ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

.plate__face {
  fill: var(--color-surface);
}