/* plinth — 도록의 색인 면. 값은 전부 tokens.css 의 변수. 모서리 0 · 그림자 0 · 면은 1px 잉크 선으로만 나눈다 */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-kerning: normal;
}

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

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

.skip {
  position: absolute;
  left: var(--spacing-4);
  top: -100px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-decoration: none;
}
.skip:focus { top: var(--spacing-2); }

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

/* 모노 = 라벨·데이터·버튼. 대문자 + 자간, 고정 크기 */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono-s);
  line-height: var(--leading-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* 글자 링크 — Cormorant 이탤릭 + 1px 밑줄 */
.textlink {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .textlink:hover { text-decoration-thickness: 2px; }
}

/* 사진 칸 — 비율은 칸이 잡고, 사진은 main.js 가 필요할 때 붙인다(노트: 화면 가까이 올 때 · 색인: 줄을 펼칠 때 · 미리보기: 처음 뜰 때).
 * 첫 화면 전송량에 실리지 않게 — loading="lazy" 는 Chrome 기준 거리(1250px+)가 넓어 첫 화면에 같이 실렸다 */
.fig__frame,
.lot__frame,
.peek__frame {
  position: relative;
  width: 100%;
  background: var(--color-sunk);
}
.fig__frame { aspect-ratio: 1; }
.lot__frame,
.peek__frame { aspect-ratio: 4 / 5; }
.fig__frame img,
.lot__frame img,
.peek__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── 머리 ① 제호 ── */
.masthead { border-bottom: 1px solid var(--color-line); }
.masthead__in {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--spacing-masthead);
}
.masthead__mark {
  flex: 1;
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1.25em;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-masthead);
  line-height: 1;
  text-decoration: none;
  /* 대문자 Cormorant 은 제호 6자만 — DESIGN 금지 목록의 유일한 예외 */
}
.masthead__reg {
  position: absolute;
  right: var(--spacing-gutter);
  top: 22%;
  font-family: var(--font-mono);
  font-size: var(--text-mono-s);
  line-height: 1;
}

.sentinel { height: 1px; margin-top: -1px; }

/* ── 머리 ② 목차 줄 (sticky) ── */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}
.bar__in {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  height: var(--spacing-bar);
}
.bar__meta {
  display: grid;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.bar__meta-a,
.bar__meta-b {
  grid-area: 1 / 1;
  transition: opacity var(--duration-swap) var(--ease-out);
}
.bar__meta-b { opacity: 0; }
.bar.is-stuck .bar__meta-a { opacity: 0; }
.bar.is-stuck .bar__meta-b { opacity: 1; }
.bar__mid,
.bar__short { display: none; }

.bar__toc {
  display: flex;
  gap: var(--spacing-6);
  margin-left: auto;
}
.bar__toc a {
  display: inline-flex;
  align-items: center;
  height: var(--spacing-bar);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duration-swap) var(--ease-out);
}
.bar__toc a[aria-current="true"] { text-decoration-color: currentColor; }
@media (hover: hover) {
  .bar__toc a:hover { text-decoration-color: currentColor; }
}
.bar__notify { white-space: nowrap; }
.bar__index {
  display: none;
  margin-left: auto;
  height: 44px;
  margin-block: -2px;
  padding-inline: var(--spacing-2);
  margin-right: calc(var(--spacing-2) * -1);
  font-size: var(--text-mono-s);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@media (max-width: 1199px) {
  .bar__long { display: none; }
  .bar__mid { display: inline; }
  .bar__toc { gap: var(--spacing-4); }
}
@media (max-width: 1023px) {
  .bar__mid { display: none; }
  .bar__short { display: inline; }
  .bar__toc,
  .bar__notify { display: none; }
  .bar__index { display: inline-flex; align-items: center; }
  .bar__no { display: none; }
}

/* ── 전체 화면 목차 ── */
.contents {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0 var(--spacing-gutter) var(--spacing-8);
  border: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.contents::backdrop { background: transparent; }
.contents[open] { animation: contents-in 200ms var(--ease-out) both; }
.contents.is-closing { animation: contents-out 120ms var(--ease-out) both; }
@keyframes contents-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes contents-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.contents__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--spacing-bar);
  border-bottom: 1px solid var(--color-line);
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
}
.contents__close {
  height: 44px;
  padding-inline: var(--spacing-2);
  margin-right: calc(var(--spacing-2) * -1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.contents__list li { border-bottom: 1px solid var(--color-line); }
.contents__list a {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
  padding-block: var(--spacing-3);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
}
.contents__list .mono { flex: 0 0 auto; width: 3em; letter-spacing: var(--tracking-mono); }
.contents__notify { display: inline-block; margin-top: var(--spacing-6); padding-block: var(--spacing-2); }

/* ── 섹션 공통 ── 위 1px 선 + 좌우 끝 교차 표식 + 왼 3칸 레일 */
.sec-anchor { scroll-margin-top: var(--spacing-bar); }
.sec { padding-bottom: var(--spacing-section); }
.sec__in {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
}
.sec__in::before,
.next .wrap::before {
  content: "";
  position: absolute;
  inset: 0 var(--spacing-gutter) auto;
  border-top: 1px solid var(--color-line);
}
.sec__in::after,
.next .wrap::after {
  content: "+          +" / "";
  position: absolute;
  inset: -0.7em calc(var(--spacing-gutter) - 0.32em) auto;
  font-family: var(--font-mono);
  font-size: var(--text-mono-l);
  line-height: 1.4;
  white-space: pre;
  text-align: justify;
  text-align-last: justify;
}
.rail {
  grid-column: 1 / span 3;
  align-self: start;
  position: sticky;
  top: calc(var(--spacing-bar) + var(--spacing-6));
  padding-top: var(--spacing-4);
}
.rail__head {
  display: grid;
  gap: var(--spacing-1);
}
.rail__head span:first-child { font-size: var(--text-mono-l); }
.rail__notes {
  display: grid;
  gap: var(--spacing-3);
  margin-top: var(--spacing-8);
  max-width: 30ch;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-muted);
}
.rail__notes span { color: var(--color-ink); }
.sec__body {
  grid-column: 4 / span 9;
  min-width: 0;
  padding-top: var(--spacing-4);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h2);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--spacing-12);
}
.h2 em { display: block; font-style: italic; }

/* ── 데이터 줄 (dl) ── */
.data { border-top: 1px solid var(--color-line-faint); }
.data > div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--spacing-3);
  padding-block: var(--spacing-2);
  border-bottom: 1px solid var(--color-line-faint);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--leading-mono);
}
.data dt {
  color: var(--color-muted);
  font-size: var(--text-mono-s);
  letter-spacing: var(--tracking-mono);
  padding-top: 1px;
}

/* ── 버튼 ── 잉크 면, 모서리 0, hover = 반전 */
.btn {
  display: inline-grid;
  align-items: center;
  min-height: 48px;
  padding: var(--spacing-2) var(--spacing-6);
  background: var(--color-ink);
  color: var(--color-paper);
  border: 1px solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-mono);
  text-transform: uppercase;
  text-align: center;
  transition: transform var(--duration-press) var(--ease-out), background-color var(--duration-swap) var(--ease-out),
    color var(--duration-swap) var(--ease-out);
}
.btn__a,
.btn__b {
  grid-area: 1 / 1;
  transition: opacity var(--duration-swap) var(--ease-out);
}
.btn__b { opacity: 0; }
.btn.is-held .btn__a { opacity: 0; }
.btn.is-held .btn__b { opacity: 1; }
.btn:active { transform: scale(0.98); }
@media (hover: hover) {
  .btn:hover { background: var(--color-paper); color: var(--color-ink); }
}

/* 칩 — 거르기·각도 링크 */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--spacing-3);
  border: 1px solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-s);
  letter-spacing: var(--tracking-mono);
  text-decoration: none;
  transition: background-color var(--duration-swap) var(--ease-out), color var(--duration-swap) var(--ease-out);
}
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
@media (hover: hover) {
  .chip:hover { background: var(--color-sunk); }
  .chip[aria-pressed="true"]:hover { background: var(--color-ink); }
}

/* 딱지 — 페이지에 하나 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: var(--spacing-2);
  background: var(--color-accent-ink);
  color: var(--color-sheet);
  font-weight: 700;
}

/* ── §01 히어로 ── */
.hero { padding-block: var(--spacing-4) var(--spacing-section); }
.hero__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: var(--spacing-gutter);
}
/* 프레임이 곧 무대 — 무대 칸을 4:5 프레임 크기로 꽉 채우고 종이와는 1px 잉크 선으로 나눈다(바탕색 이음매 0).
 * 무대 높이 = 100svh − 제호 − 목차 줄 − 눈금 띠 − 각도 버튼 줄 − 위아래 여백 → 4:5 로 폭이 정해진다 */
.turn {
  --stage-h: calc(100svh - var(--spacing-masthead) - var(--spacing-bar) - var(--spacing-ruler) - 45px - var(--spacing-6) - 2px);
  grid-column: 1 / span 6;
  grid-row: 1 / -1;
  justify-self: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  width: min(100%, calc(var(--stage-h) * 0.8));
  min-width: 0;
  margin-bottom: 45px;
}
.turn__cell {
  background: var(--color-stage);
  border: 1px solid var(--color-line);
  border-bottom: 0;
}
.turn__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.turn__stage.is-grabbing { cursor: grabbing; }
.turn__stage:focus-visible { outline-offset: -4px; }
.turn__img,
.turn__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.turn__canvas { opacity: 0; }
.turn.is-empty .turn__img,
.turn.is-empty .turn__canvas { display: none; }
.turn.is-live .turn__canvas { opacity: 1; }

/* 각도 눈금 띠 */
.ruler {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  height: var(--spacing-ruler);
  padding-inline: var(--spacing-4) 0;
  background: var(--color-sunk);
  border: 1px solid var(--color-line);
}
.ruler__read {
  display: grid;
  flex: 0 0 auto;
  min-width: 6.5rem;
}
.ruler__deg {
  font-size: var(--text-mono-l);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ruler__hint { color: var(--color-ink); }
.ruler__frames { color: var(--color-muted); }
.ruler__frames:not(:empty)::before { content: " · "; }
.ruler__tape {
  position: relative;
  flex: 1;
  align-self: stretch;
  overflow: hidden;
  border-left: 1px solid var(--color-line);
}
.ruler__strip {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  will-change: transform;
}
.ruler__strip svg { display: block; height: 100%; }
.ruler__strip line { stroke: var(--color-ink); stroke-width: 1; }
.ruler__strip .stop { fill: var(--color-ink); }
/* 무대가 좁으면(393×660 의 269px) 안내를 DRAG 한 낱말로, 버튼 자간을 줄인다 */
.turn { container-type: inline-size; }
@container (max-width: 320px) {
  .ruler__more { display: none; }
  .ruler__btn { letter-spacing: 0.02em; }
}
.ruler__strip text {
  fill: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.ruler__needle {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 48%;
  width: 2px;
  margin-left: -1px;
  background: var(--color-accent);
}
/* 각도 버튼 줄 — 눈금 띠 밖, 아래 별도 줄(3등분) */
.ruler__btns {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--color-line);
  border-top: 0;
}
.ruler__btns[hidden] { display: none; }
.ruler__btn {
  height: 44px;
  white-space: nowrap;
  transition: background-color var(--duration-swap) var(--ease-out), color var(--duration-swap) var(--ease-out),
    transform var(--duration-press) var(--ease-out);
}
.ruler__btn + .ruler__btn { border-left: 1px solid var(--color-line); }
.ruler__btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.ruler__btn:active { transform: scale(0.98); }
@media (hover: hover) {
  .ruler__btn:hover { background: var(--color-paper); }
  .ruler__btn[aria-pressed="true"]:hover { background: var(--color-ink); }
}

/* 오른 5칸 — 줄 순서는 데스크톱 기준(모바일은 DOM 순서) */
.hero__lot,
.hero__title,
.hero__intro,
.hero__data,
.hero__buy {
  grid-column: 7 / span 6;
  min-width: 0;
  margin-left: var(--spacing-6);
}
.hero__lot { grid-row: 1; display: flex; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-1); }
.hero__title { grid-row: 2; }
.hero__intro { grid-row: 3; }
.hero__data { grid-row: 4; }
.hero__buy { grid-row: 5; }

.hero__title {
  margin-top: var(--spacing-6);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-h1);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.hero__title em { display: block; font-style: italic; }
.hero__intro {
  margin-top: var(--spacing-6);
  max-width: 24em;
  text-wrap: pretty;
  font-style: italic;
}
.hero__data { margin-top: var(--spacing-6); }
.hero__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3) var(--spacing-6);
  margin-top: var(--spacing-6);
}
.hero__price {
  display: grid;
  flex: 0 0 100%;
}
.hero__amount { font-size: var(--text-mono-l); font-weight: 500; letter-spacing: 0.02em; }
.hero__avail { color: var(--color-muted); }
.hero__record { padding-block: var(--spacing-2); }

/* ── §02 노트 ── */
.prose {
  max-width: 34em;
  text-wrap: pretty;
  display: grid;
  gap: 1em;
  hyphens: auto;
}
.fn {
  font-family: var(--font-mono);
  font-size: var(--text-mono-s);
  vertical-align: 0.4em;
  /* 터치 타깃 44px — 인라인 padding 은 줄 높이를 바꾸지 않고, 좌우 음수 여백으로 글자 사이는 그대로 */
  padding: 14px 12px;
  margin-inline: -9px -12px;
  text-decoration: none;
}
.figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-12);
  border: 1px solid var(--color-line);
}
.fig { padding: var(--spacing-3); }
.fig + .fig { border-left: 1px solid var(--color-line); }
.fig figcaption { margin-top: var(--spacing-3); }

/* ── §03 기록 ── 1px 격자 = gap 1px + 잉크 부모 */
.record { border: 1px solid var(--color-line); }
.record > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.record > div + div { border-top: 1px solid var(--color-line); }
.record > div > * { padding: var(--spacing-3) var(--spacing-4); }
.record > div > :first-child { border-right: 1px solid var(--color-line); }
.record dt {
  font-family: var(--font-mono);
  font-size: var(--text-mono-s);
  letter-spacing: var(--tracking-mono);
  color: var(--color-muted);
  padding-top: calc(var(--spacing-3) + 4px);
}
.record dd { font-size: var(--text-body); line-height: 1.35; }
.record__head > span {
  background: var(--color-sunk);
  padding: var(--spacing-2) var(--spacing-4);
}
.record__lines { display: grid; gap: var(--spacing-1); }
.prov { border-collapse: collapse; width: 100%; }
.prov th,
.prov td {
  text-align: left;
  vertical-align: baseline;
  padding-block: var(--spacing-1);
  border-bottom: 1px solid var(--color-line-faint);
}
.prov tr:last-child th,
.prov tr:last-child td { border-bottom: 0; }
.prov th {
  width: 5em;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
}
.record__angles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}
.record__angles .chip { min-width: 56px; }
.record__hint { color: var(--color-muted); margin-left: var(--spacing-2); }

/* ── §04 색인 ── */
.index__sum { color: var(--color-muted); margin-top: calc(var(--spacing-8) * -1); }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-block: var(--spacing-6) var(--spacing-8);
}
.lots-head,
.lot__btn {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 4.75rem 10rem 4.25rem 5.5rem 6.25rem;
  column-gap: var(--spacing-3);
  align-items: baseline;
}
.lots-head {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-sunk);
  border-block: 1px solid var(--color-line);
}
/* 값 열은 오른쪽 정렬, 상태 열 앞에 여백 — YEAR·PRICE 가 붙어 읽혔다(qa-1 P3-1) */
.lots-head .c-pr,
.lot__btn .c-pr { text-align: right; }
.lots-head .c-st,
.lot__btn .c-st { padding-left: var(--spacing-3); }
.lot {
  border-bottom: 1px solid var(--color-line-faint);
  scroll-margin-top: calc(var(--spacing-bar) + var(--spacing-12));
}
.lot.is-now .lot__panel { transition: none; }
.lot[hidden] { display: none; }
.lot__h { font: inherit; }
.lot__btn {
  width: 100%;
  min-height: 56px;
  padding: var(--spacing-3);
  text-align: left;
  transition: background-color var(--duration-swap) var(--ease-out);
}
.lot__no { position: relative; padding-left: var(--spacing-3); }
.lot__no::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -3px;
  background: var(--color-accent);
  opacity: 0;
}
.lot__name {
  font-family: var(--font-serif);
  font-size: var(--text-index);
  line-height: 1.15;
}
.lot__meta { display: none; }
.is-sold .lot__name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-ink);
}
.is-sold .c-pr,
.is-sold .c-st,
.is-sold .lot__meta { color: var(--color-muted); }

.lot__btn[aria-expanded="true"],
.lot__btn:focus-visible { background: var(--color-sunk); }
.lot__btn[aria-expanded="true"] .lot__no::before,
.lot__btn:focus-visible .lot__no::before { opacity: 1; }
.lot__btn:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .lot__btn:hover { background: var(--color-sunk); }
  .lot__btn:hover .lot__no::before { opacity: 1; }
  /* 주홍 사각은 한 번에 한 줄 — 다른 줄에 커서가 있으면 펼친 줄의 사각을 끈다 */
  .lots:has(.lot__btn:hover) .lot__btn[aria-expanded="true"]:not(:hover) .lot__no::before { opacity: 0; }
}

.lot__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-open) var(--ease-out), visibility 0s linear var(--duration-open);
}
.lot.is-open .lot__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--duration-open) var(--ease-out), visibility 0s;
}
.lot__inner {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--spacing-6);
  min-height: 0;
  overflow: hidden;
  padding-inline: var(--spacing-3);
  background: var(--color-sunk);
}
.lot.is-open .lot__inner { padding-block: var(--spacing-3) var(--spacing-6); }
.lot__detail { align-self: start; max-width: 36rem; }
.lot__line { margin-top: var(--spacing-4); font-style: italic; }

/* 떠다니는 미리보기 */
.peek {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  width: 240px;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}
.peek__in {
  background: var(--color-sheet);
  box-shadow: var(--shadow-ring);
  padding: var(--spacing-2);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.peek.is-on { visibility: visible; }
.peek.is-on .peek__in {
  opacity: 1;
  transform: none;
  transition-duration: var(--duration-swap);
}
.peek.is-left .peek__in { transform-origin: right center; }
.peek:not(.is-left) .peek__in { transform-origin: left center; }
.peek__cap { margin-top: var(--spacing-2); }

/* ── §05 배려 ── */
.care {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--color-line);
}
.care li + li { border-left: 1px solid var(--color-line); }
.care li {
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-8);
}
.care h3 { font-weight: 500; margin-bottom: var(--spacing-6); }
.care p { max-width: 20em; }

/* ── §06 다음 ── */
.next { padding-bottom: var(--spacing-section); }
.next .wrap { position: relative; }
.next__band {
  display: flex;
  gap: var(--spacing-6);
  padding-top: var(--spacing-4);
}
.next__band span:first-child { font-size: var(--text-mono-l); }
.next__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  align-items: end;
  margin-top: var(--spacing-8);
}
.next__num {
  grid-column: 1 / span 7;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-numeral);
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
}
.next__body { grid-column: 8 / span 5; min-width: 0; padding-bottom: var(--spacing-4); }
.next__body .h2 { margin-bottom: var(--spacing-6); }
.next__lede { font-style: italic; }
.notify { display: grid; margin-top: var(--spacing-8); }
.notify__ask,
.notify__done {
  grid-area: 1 / 1;
  transition: opacity var(--duration-swap) var(--ease-out), visibility 0s;
}
.notify__done {
  align-self: center;
  opacity: 0;
  visibility: hidden;
  border-block: 1px solid var(--color-line);
  padding-block: var(--spacing-4);
}
/* 확인 상태는 입력 묶음 자리를 접고 그 자리에 선다 — 겹쳐 두면 입력 묶음 높이만큼 비었다(qa-1 P3-2) */
.notify.is-done .notify__ask { display: none; }
.notify.is-done .notify__done {
  opacity: 1;
  visibility: visible;
  align-self: start;
  animation: notify-in var(--duration-swap) var(--ease-out) both;
}
@keyframes notify-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.notify__label { display: block; color: var(--color-muted); margin-bottom: var(--spacing-2); }
.notify__row { display: flex; }
.notify__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding-inline: var(--spacing-3);
  background: var(--color-paper);
  border: 1px solid var(--color-ink);
  border-right: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono-l);
  -webkit-appearance: none;
  appearance: none;
}
.notify__input::placeholder { color: var(--color-muted); }
.notify__input:focus-visible { outline-offset: -2px; }
.notify.is-error .notify__input { border-color: var(--color-accent); border-right: 1px solid var(--color-accent); }
.notify__btn { flex: 0 0 auto; }
.notify__err { min-height: 1.6em; margin-top: var(--spacing-2); color: var(--color-ink); text-transform: none; letter-spacing: 0; }

/* ── 꼬리 ── */
.foot { border-top: 1px solid var(--color-line); padding-block: var(--spacing-12) var(--spacing-16); }
.foot__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spacing-gutter);
  row-gap: var(--spacing-6);
  align-items: start;
}
.foot__mark {
  grid-column: 1 / span 3;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.3em;
}
.foot__mark .mono { letter-spacing: 0; vertical-align: 1em; }
.foot__links { grid-column: 4 / span 3; grid-row: 1 / span 2; display: grid; }
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: none;
}
@media (hover: hover) {
  .foot__links a:hover { text-decoration: underline; }
}
.foot__note { grid-column: 7 / span 6; grid-row: 1; max-width: 32em; color: var(--color-muted); font-size: 1.125rem; }
.foot__copy { grid-column: 7 / span 6; grid-row: 2; color: var(--color-muted); }

/* ═══ 1024–1199 ═══ 색인 5열 */
@media (max-width: 1199px) {
  .lots-head,
  .lot__btn { grid-template-columns: 3rem minmax(0, 1fr) 4.75rem 5.5rem 6.25rem; }
  .c-org,
  .c-yr { display: none; }
}

/* ═══ 720–1023 ═══ 무대 위·항목 아래, 레일은 섹션 위 한 줄 띠 */
@media (max-width: 1023px) {
  .hero__in {
    display: flex;
    flex-direction: column;
  }
  .turn { order: 1; }
  .hero__lot { order: 0; margin-top: 0; margin-bottom: var(--spacing-2); }
  .hero__title { order: 2; }
  .hero__buy { order: 3; }
  .hero__intro { order: 4; }
  .hero__data { order: 5; }
  .turn { width: min(100%, calc(70svh * 0.8)); align-self: center; }
  .hero__lot,
  .hero__title,
  .hero__intro,
  .hero__data,
  .hero__buy { margin-left: 0; }
  .hero__price { flex: 0 0 auto; }

  .sec__in { display: flex; flex-direction: column; }
  .rail { position: static; padding-top: var(--spacing-3); display: contents; }
  .rail__head {
    order: 0;
    display: flex;
    gap: var(--spacing-6);
    padding-top: var(--spacing-3);
    margin-bottom: var(--spacing-8);
  }
  .rail__notes { order: 2; margin-top: var(--spacing-8); max-width: 40em; }
  .sec__body { order: 1; padding-top: 0; }
  .index__sum { margin-top: calc(var(--spacing-6) * -1); }

  .lots-head,
  .lot__btn { grid-template-columns: 3rem minmax(0, 1fr) 5.5rem 6.25rem; }
  .c-mat { display: none; }

  .next__num { grid-column: 1 / -1; }
  .next__body { grid-column: 1 / -1; margin-top: var(--spacing-8); }
  .next__in { align-items: start; }

  .foot__mark { grid-column: 1 / span 6; }
  .foot__links { grid-column: 7 / span 6; grid-row: 1; }
  .foot__note,
  .foot__copy { grid-column: 1 / -1; grid-row: auto; }
}

/* ═══ <720 ═══ */
@media (max-width: 719px) {
  .masthead__mark { margin-right: 1em; }
  .masthead__reg { top: 18%; }
  .bar__in { gap: var(--spacing-4); }

  .hero { padding-block: var(--spacing-2) var(--spacing-12); }
  .hero__lot { margin-bottom: var(--spacing-2); }
  /* 393×660: 무대 높이 = min(폭×1.25, 100svh − 324px) */
  .turn { width: min(100%, calc((100svh - 324px) * 0.8)); }
  .ruler {
    height: 40px;
    padding-inline: var(--spacing-3) 0;
    gap: var(--spacing-3);
  }
  .ruler__read { width: auto; display: flex; align-items: baseline; gap: var(--spacing-2); }
  .ruler__hint { color: var(--color-muted); }
  .ruler__frames:not(:empty)::before { content: none; }
  .ruler__hint:has(.ruler__frames:not(:empty)) .ruler__drag { display: none; }

  .hero__title { margin-top: var(--spacing-4); }
  .hero__buy {
    flex-wrap: nowrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
  }
  .hero__buy .btn { flex: 1; padding-inline: var(--spacing-3); }
  .hero__record { display: none; }
  .hero__intro { margin-top: var(--spacing-6); }
  .hero__data > div { grid-template-columns: 6rem minmax(0, 1fr); }

  .figs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-x: contain;
  }
  .fig { scroll-snap-align: start; position: relative; }

  .record > div { grid-template-columns: minmax(0, 1fr); }
  .record > div > :first-child { border-right: 0; padding-bottom: 0; }
  .record dt { padding-bottom: 0; }
  .record__head { display: none !important; }
  .record__hint { flex-basis: 100%; margin-left: 0; }

  .filters .chip { padding-inline: var(--spacing-2); }
  .filters { gap: var(--spacing-1); }
  .lots-head { display: none; }
  .lot__btn {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    row-gap: var(--spacing-1);
    padding-inline: var(--spacing-2);
  }
  .c-mat,
  .c-pr,
  .c-st { display: none; }
  .lot__meta { display: block; grid-column: 2; }
  .lot__no { padding-left: var(--spacing-3); }
  .lot__inner { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--spacing-4); padding-inline: var(--spacing-2); }
  .lot__inner .data > div { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .care { grid-template-columns: minmax(0, 1fr); }
  .care li + li { border-left: 0; border-top: 1px solid var(--color-line); }
  .care h3 { margin-bottom: var(--spacing-3); }

  .notify__row { flex-wrap: wrap; }
  .notify__input { flex-basis: 100%; border-right: 1px solid var(--color-ink); }
  .notify__btn { flex: 1; margin-top: -1px; }

  .foot__mark,
  .foot__links { grid-column: 1 / -1; }
  .foot__links { grid-row: auto; grid-template-columns: repeat(4, auto); justify-content: start; gap: var(--spacing-4); }
  .foot__links a { min-height: 44px; min-width: 44px; }
}

/* ── 동작 줄이기 · #still ── 전환·등장 0 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}
.is-still *,
.is-still *::before,
.is-still *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}