/* halide — 흰 벽 갤러리. tokens.css 의 변수만 쓴다.
   걸기 규칙: 한 벽의 사진은 가운데가 한 선(중심선)에, 라벨은 한 줄(라벨 선)에 — 벽 격자의 행 둘(사진·라벨)을 subgrid 로 나눠 쓴다. */

/* ── 리셋 (: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(img, svg) { display: block; max-width: 100%; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; text-decoration: none; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--spacing-5);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-control); }
main:focus { outline: none; }
.ic { flex: none; }

.skip {
  position: absolute; left: var(--spacing-4); top: -60px; z-index: 30;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--spacing-2) var(--spacing-4); background: var(--color-wall); color: var(--color-ink);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-control);
}
.skip:focus { top: var(--spacing-3); }

/* ── 쪽 틀: 좌우 여백 + 최대 폭 */
.hd-in, main > *, .ft-grid, .ft-base {
  width: min(100% - 2 * var(--spacing-page), var(--spacing-content-max));
  margin-inline: auto;
}

/* ── 머리 center-wordmark (sticky 아님) */
.hd { border-bottom: 1px solid var(--color-line); }
.hd-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--spacing-header-sm);
}
.hd-l, .hd-r { display: none; gap: var(--spacing-6); }
.hd-r { justify-content: end; }
.wordmark {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-wordmark-sm);
  letter-spacing: var(--tracking-wordmark);
  margin-right: calc(-1 * var(--tracking-wordmark)); /* 자간 꼬리를 빼서 잉크 기준 정중앙 */
  line-height: 1;
  display: inline-flex; align-items: center; min-height: 44px;
}
.wordmark--sm { font-size: var(--text-wordmark-sm); margin-right: 0; margin-block: -14px; }
.hd-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-control);
  color: var(--color-ink);
  -webkit-user-select: none; user-select: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hd-btn:active { background: var(--color-bg-deep); }
.hd-menu { grid-column: 1; justify-self: start; margin-left: -10px; }
.hd-saved { grid-column: 3; justify-self: end; margin-right: -10px; }
.hd-saved-in { display: inline-flex; align-items: center; gap: var(--spacing-1); font-size: var(--text-sm); font-weight: 500; }
.ic-menu path { transition: transform var(--duration-slow) var(--ease-out); transform-origin: 11px 11px; }
.hd-menu[aria-expanded="true"] .l1 { transform: translateY(3px) rotate(45deg); }
.hd-menu[aria-expanded="true"] .l2 { transform: translateY(-3px) rotate(-45deg); }

.nav {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--spacing-1);
  min-height: 44px;
  font-size: var(--text-base);
  color: var(--color-ink-2);
  transition: color var(--duration-fast) var(--ease-out);
}
.nav:hover { color: var(--color-ink); }
.nav[aria-current="page"] { color: var(--color-ink); }
.nav[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--color-accent);
}

@media (min-width: 720px) {
  .hd-in { height: var(--spacing-header); }
  .hd-l, .hd-r { display: flex; }
  .hd-btn { display: none; }
  .hd-l { grid-column: 1; }
  .hd-r { grid-column: 3; }
  .wordmark { font-size: var(--text-wordmark); }
}

/* ── 전시 머리 줄 (홈) */
.ex {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
  margin-top: var(--spacing-2);
}
.ex-meta { font-size: var(--text-sm); color: var(--color-ink-2); line-height: var(--leading-label); }
.ex-dates { display: none; }
.rooms { display: flex; flex: none; }
.room {
  position: relative;
  display: inline-grid; place-items: center;
  min-width: 44px; height: 44px;
  font-size: var(--text-sm); color: var(--color-ink-2);
  transition: color var(--duration-fast) var(--ease-out);
}
.room:hover { color: var(--color-ink); }
.room[aria-current="true"] { color: var(--color-ink); }
.room[aria-current="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 1.4em; height: 2px; translate: -50% 0; background: var(--color-accent);
}
.room-name { display: none; }
@media (min-width: 720px) {
  .ex { margin-top: var(--spacing-5); }
  .ex-dates { display: inline; }
}
@media (min-width: 1024px) {
  .rooms { gap: var(--spacing-5); }
  .room { display: inline-flex; gap: var(--spacing-2); min-width: 0; }
  .room-name { display: inline; }
  .room[aria-current="true"]::after { left: 0; right: 0; width: auto; translate: none; }
}

/* ── 벽 (W1~W5). 모바일: 1열(쌍만 2열) · 720: 6열 · 1024: 12열 */
.walls { margin-top: var(--spacing-5); }
.wall {
  --hang: var(--spacing-hang-max);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-gutter-pair);
  row-gap: var(--spacing-3);
  align-items: start;
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-line);
}
.wall + .wall { margin-top: var(--spacing-wall); }
.walls > .wall:first-child { border-top: 0; padding-top: 0; }
.wall-text { display: contents; }
.wt-head { grid-column: 1 / -1; order: -1; }
.wt-body { grid-column: 1 / -1; order: 10; }
.work { grid-column: 1 / -1; grid-row: span 2; display: grid; grid-template-rows: subgrid; margin-bottom: var(--spacing-5); }
.work.pair { grid-column: span 1; }
.tick { display: none; }

.wt-no { font-size: var(--text-sm); color: var(--color-ink-2); }
.wt-title { font-size: var(--text-md); font-weight: 600; line-height: var(--leading-label); }
.wt-en { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em; }
.wt-by { font-size: var(--text-sm); color: var(--color-ink-2); line-height: var(--leading-label); }
.wt-head .wt-no { display: inline; }
.wt-head .wt-no + .wt-title { display: inline; margin-left: var(--spacing-2); }
.wt-intro { font-size: var(--text-base); color: var(--color-ink-2); max-width: 34em; }
.wt-more {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  min-height: 44px; margin-top: var(--spacing-1);
  font-size: var(--text-base); color: var(--color-ink);
  text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 4px;
}
.wt-more:hover { text-decoration-color: var(--color-ink); }
.wt-list { font-size: var(--text-sm); }
.wt-list a {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: var(--spacing-2);
  align-items: baseline; padding-block: 5px; color: var(--color-ink-2);
}
.wt-list .num { font-size: var(--text-xs); }
.wt-list .on a { color: var(--color-ink); }
.wt-list a:hover .li-t { text-decoration: underline; text-underline-offset: 3px; }
.wall-text--list .wt-head, .wall-text--list .wt-body { display: none; } /* 모바일: 출품 목록은 반복하지 않는다 — 바로 아래 라벨이 같은 정보 */

/* 작품: 사진 행(중심선) + 라벨 행(라벨 선) */
.work-a { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; justify-items: start; }
.photo {
  display: block;
  align-self: center;
  width: min(100%, calc(var(--hang) * var(--r)));
  height: auto;
  aspect-ratio: var(--r);
  background: var(--ph);
  border-radius: var(--radius-photo);
  outline: 1px solid transparent;
  outline-offset: var(--spacing-hover-offset);
  transition: outline-color var(--duration-fast) var(--ease-out);
}
.work-a:hover .photo { outline-color: var(--color-line-strong); }
.work-a:focus-visible { outline: none; }
.work-a:focus-visible .photo { outline: 2px solid var(--color-accent); outline-offset: var(--spacing-focus-offset); }
.js img.photo { opacity: 0; transition: opacity var(--duration-image) var(--ease-out); }
.js img.photo.is-in { opacity: 1; }

.label {
  display: flex; flex-direction: column;
  max-width: min(100%, var(--spacing-label-max));
  font-size: var(--text-sm);
  line-height: var(--leading-label);
  align-self: start;
}
.l-artist { font-weight: 600; }
.l-en { font-weight: 400; color: var(--color-ink-2); }
.l-title { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--duration-fast) var(--ease-out); }
.work-a:hover .l-title { text-decoration-color: var(--color-ink); }
.l-medium { font-size: var(--text-xs); color: var(--color-ink-2); }
.l-no { display: flex; align-items: center; gap: var(--spacing-3); margin-top: 2px; font-size: var(--text-2xs); color: var(--color-ink-3); }
.l-no > .num { font-weight: 500; letter-spacing: var(--tracking-caps); }
.l-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--color-ink-2); }
.l-saved::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-dot); background: var(--color-accent);
  animation: dot-in var(--duration-fast) var(--ease-out);
}
.l-saved[hidden] { display: none; }
@keyframes dot-in { from { transform: scale(0); } to { transform: scale(1); } }

/* 자리표시자 — 주된 색 면 + 흰 판 라벨 */
.ph { position: relative; }
.ph-tag {
  position: absolute; left: var(--spacing-2); top: var(--spacing-2);
  max-width: calc(100% - 2 * var(--spacing-2));
  padding: 2px var(--spacing-2);
  background: var(--color-wall); color: var(--color-ink-2);
  font-size: var(--text-xs); line-height: var(--leading-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 720–1023: 6열 — 글 칸은 위 줄 전폭, 사진은 그 아래 */
@media (min-width: 720px) {
  .walls { margin-top: var(--spacing-6); }
  .wall {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--spacing-gutter-md);
    row-gap: var(--spacing-label);
    grid-template-rows: auto auto 1fr;
    padding-top: var(--spacing-6);
  }
  .wall--bare { grid-template-rows: auto 1fr; }
  .wall-text { display: block; grid-column: 1 / -1; grid-row: 1; max-width: 40em; }
  .wall-text--list .wt-head, .wall-text--list .wt-body { display: block; }
  .wt-head .wt-no, .wt-head .wt-no + .wt-title { display: block; margin-left: 0; }
  .wt-title { margin-top: var(--spacing-1); font-size: var(--text-lg); line-height: 1.25; }
  .wt-ko, .wt-en { display: block; }
  .wt-en { letter-spacing: -0.015em; }
  .wt-by { margin-top: var(--spacing-2); }
  .wt-intro { margin-top: var(--spacing-3); }
  .wt-list { margin-top: var(--spacing-2); columns: 2; column-gap: var(--spacing-gutter-md); }
  .wt-list li { break-inside: avoid; }
  .work { grid-row: 2 / span 2; margin-bottom: 0; }
  .wall--bare .work { grid-row: 1 / span 2; }
  .wall--W1 .w-a { grid-column: 1 / 5; }
  .wall--W1 .w-b { grid-column: 5 / 7; }
  .wall--W2 .w-a, .wall--W5 .w-a { grid-column: 1 / 4; }
  .wall--W2 .w-b, .wall--W5 .w-b { grid-column: 4 / 7; }
  .wall--W3 .w-a { grid-column: 1 / -1; }
  .wall--W4 .w-a { grid-column: 1 / 3; }
  .wall--W4 .w-b { grid-column: 3 / 5; }
  .wall--W4 .w-c { grid-column: 5 / 7; }
}

/* ≥1024: 12열 — 글 칸이 사진과 같은 행(위 끝 정렬), 중심선 눈금이 왼쪽 여백에 */
@media (min-width: 1024px) {
  .wall {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
    grid-template-rows: auto 1fr;
  }
  .wall-text { grid-row: 1 / span 2; grid-column: 1 / 4; max-width: none; padding-right: var(--spacing-3); }
  .wt-list { columns: auto; }
  .work, .wall--bare .work { grid-row: 1 / span 2; }
  .wall--W1 .w-a { grid-column: 4 / 10; }
  .wall--W1 .w-b { grid-column: 10 / 13; }
  .wall--W2 .w-a { grid-column: 4 / 8; }
  .wall--W2 .w-b { grid-column: 9 / 13; }
  .wall--W3 .w-a { grid-column: 1 / 9; }
  .wall--W3 .wall-text { grid-column: 10 / 13; }
  .wall--W4 .w-a { grid-column: 4 / 7; }
  .wall--W4 .w-b { grid-column: 7 / 10; }
  .wall--W4 .w-c { grid-column: 10 / 13; }
  .wall--W5 .w-a { grid-column: 1 / 7; }
  .wall--W5 .w-b { grid-column: 7 / 13; }
  /* 중심선 눈금: 선은 격자 왼쪽 끝에서 6px 떨어진 곳에서 끝나고, "145" 는 선 끝에 오른쪽 맞춤 — 여백 바깥 가장자리에서 멀리.
     여백이 모자라는 1024–1359 는 선만(qa-1 P2-1) */
  .tick {
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);
    grid-row: 1; grid-column: 1; align-self: center; justify-self: start;
    translate: calc(-100% - 6px) 0;
    pointer-events: none;
  }
  .tick-line { width: var(--spacing-tick); height: 1px; background: var(--color-ink-3); }
  .tick-n { display: none; font-size: var(--text-xs); font-weight: 500; line-height: 1; color: var(--color-ink-3); }
}
@media (min-width: 1360px) {
  .tick { translate: calc(-100% - 6px) var(--spacing-2); } /* 숫자 줄 높이의 절반만큼 내려 선을 중심선에 */
  .tick-n { display: block; }
}

/* ── 섹션 머리 · 쪽 머리 */
.sec-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-4); }
.sec-t { font-size: var(--text-sm); font-weight: 600; }
.sec-t .num { font-weight: 500; color: var(--color-ink-3); margin-left: var(--spacing-1); }
.sec-more {
  display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 44px;
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.sec-more:hover { color: var(--color-ink); }
.phd { padding-top: var(--spacing-7); padding-bottom: var(--spacing-6); }
.phd-t { font-size: var(--text-page); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.phd-s { margin-top: var(--spacing-2); font-size: var(--text-md); color: var(--color-ink-2); }
.phd-s--lg { font-size: var(--text-md); max-width: 34em; line-height: var(--leading-body); }
@media (min-width: 720px) { .phd { padding-top: var(--spacing-8); padding-bottom: var(--spacing-7); } }

/* ── 홈 컬렉션 띠 — 작은 걸기 */
.cstrip { margin-top: var(--spacing-wall); padding-top: var(--spacing-5); border-top: 1px solid var(--color-line); }
.cstrip-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: var(--spacing-gutter-pair);
  margin-top: var(--spacing-3);
  margin-inline: calc(-1 * var(--spacing-page));
  padding-inline: var(--spacing-page);
  scroll-padding-inline: var(--spacing-page);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.cstrip-row::-webkit-scrollbar { display: none; }
.ctile { position: relative; display: grid; grid-template-rows: 160px auto; row-gap: var(--spacing-4); align-items: center; scroll-snap-align: start; padding-block: var(--spacing-3); }
.ctile-n { align-self: start; }
.ctile + .ctile::before { content: ""; position: absolute; left: calc(var(--spacing-gutter-pair) / -2); top: 0; bottom: 0; width: 1px; background: var(--color-line); }
.mini {
  display: flex; align-items: center; gap: var(--gap);
  width: min(100%, var(--mw));
}
.mini-p { flex: var(--r) 1 0; min-width: 0; }
.mini .photo { width: 100%; outline-offset: 4px; }
.mini .ph-t2 { display: none; }
.ctile:hover .photo, .btile:hover .photo, .atile:hover .photo { outline-color: var(--color-line-strong); }
.ctile:focus-visible, .btile:focus-visible, .atile:focus-visible { outline-offset: var(--spacing-focus-offset); }
.ctile-n, .btile-n { display: flex; flex-direction: column; }
.ctile-en { font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.01em; }
.ctile-ko { font-size: var(--text-sm); color: var(--color-ink-2); }
.ctile:hover .ctile-en, .btile:hover .btile-en, .atile:hover .al-en { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (min-width: 720px) {
  .cstrip-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-gutter-md); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .ctile + .ctile::before { left: calc(var(--spacing-gutter-md) / -2); }
}
@media (min-width: 1024px) {
  .cstrip-row { gap: var(--spacing-gutter); }
  .ctile + .ctile::before { left: calc(var(--spacing-gutter) / -2); }
}

/* ── 작가 목록 벤토 2×2 — 칸은 벽 구획, 사진은 구획 가운데에 걸고 라벨은 사진 왼쪽 끝에 */
.abento-row {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--spacing-gutter);
  border-top: 1px solid var(--color-line);
}
.atile {
  --hang: 360px;
  position: relative;
  display: grid; justify-items: center;
  padding-block: var(--spacing-5) var(--spacing-6);
}
.atile-in { display: inline-grid; grid-template-rows: var(--row-h, auto) auto; row-gap: var(--spacing-label); justify-items: start; max-width: 100%; }
.atile .photo { align-self: center; width: calc(var(--hang) * var(--r)); max-width: 100%; }
.atile-in > .alabel { max-width: 100%; }
.abento-row .atile + .atile { border-top: 1px solid var(--color-line); }
.alabel { display: flex; flex-direction: column; line-height: var(--leading-label); }
.al-no { font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-caps); color: var(--color-ink-3); }
.al-ko { margin-top: var(--spacing-1); font-size: var(--text-md); font-weight: 600; }
.al-en { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl); line-height: 1.1; letter-spacing: var(--tracking-display); }
.al-meta { margin-top: var(--spacing-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.atile:hover .photo { outline-color: var(--color-line-strong); }
@media (min-width: 720px) {
  /* 한 행의 두 사진이 같은 중심선: 행 높이 = 걸기 높이로 고정 */
  .abento-row { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--spacing-gutter-md); }
  .atile { --hang: 300px; --row-h: var(--hang); grid-column: span 3; }
  .abento-row .atile + .atile { border-top: 0; }
  .abento-row .atile + .atile::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--spacing-gutter-md) / -2); width: 1px; background: var(--color-line); }
}
@media (min-width: 1024px) {
  .abento-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .abento-row .atile + .atile::before { left: calc(var(--spacing-gutter) / -2); }
  .atile { --hang: min(460px, 52svh); grid-column: span var(--span); }
  /* 두 행의 사진 바깥 선을 격자 끝에 붙인다 — 왼쪽 칸은 왼쪽 끝, 오른쪽 칸은 오른쪽 끝(qa-1 P3-1) */
  .atile.t-a { justify-items: start; }
  .atile.t-b { justify-items: end; }
  .al-en { font-size: var(--text-2xl); }
}

/* ── 작가 쪽 */
.prof { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); padding-top: var(--spacing-7); padding-bottom: var(--spacing-6); }
.prof-no { font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-caps); color: var(--color-ink-3); }
.prof-ko { margin-top: var(--spacing-2); font-size: var(--text-md); font-weight: 500; color: var(--color-ink-2); }
.prof-en { font-family: var(--font-display); font-weight: 300; font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); margin-top: var(--spacing-1); }
.prof-bio { font-size: var(--text-md); color: var(--color-ink-2); max-width: 32em; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.stats > div { display: flex; flex-direction: column; gap: 2px; padding-top: var(--spacing-3); }
.stats dt { font-size: var(--text-xs); color: var(--color-ink-3); }
.stats dd { font-size: var(--text-md); font-weight: 500; }
.roomline {
  padding-block: var(--spacing-4); border-top: 1px solid var(--color-line);
  font-size: var(--text-sm); color: var(--color-ink-2); line-height: var(--leading-label);
}
.roomline [lang="en"] { font-family: var(--font-display); }
.roomline + .walls { margin-top: var(--spacing-2); }
.roomline + .walls > .wall:first-child { padding-top: var(--spacing-5); }
@media (min-width: 720px) {
  .prof { padding-top: var(--spacing-8); }
  .stats { max-width: 30em; }
}
@media (min-width: 1024px) {
  .prof { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); row-gap: var(--spacing-5); }
  .prof-name { grid-column: 1 / 9; }
  .prof-bio { grid-column: 1 / 9; grid-row: 2; }
  /* 통계: 격자 오른쪽 끝(10–12열)에 오른쪽 맞춤, 아래 끝 = 라틴 이름 아래 (pellicle P3-2) */
  .stats { grid-column: 10 / 13; grid-row: 1; align-self: end; display: block; max-width: none; border-top: 0; margin-bottom: 0.18em; }
  .stats > div { flex-direction: row; justify-content: space-between; align-items: baseline; padding-block: var(--spacing-2); border-top: 1px solid var(--color-line); }
}

/* 작가·컬렉션 아래: 텍스트 목록 */
.after { margin-top: var(--spacing-wall); padding-top: var(--spacing-5); border-top: 1px solid var(--color-line); }
.clist, .olist { margin-top: var(--spacing-3); }
.clist a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-4);
  align-items: baseline; padding-block: var(--spacing-3); min-height: 44px;
  border-bottom: 1px solid var(--color-line);
}
.clist li:first-child a { border-top: 1px solid var(--color-line); }
.cl-ko { font-weight: 600; }
.cl-en { grid-column: 1; font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg); line-height: 1.2; }
.cl-n { grid-column: 2; grid-row: 1; font-size: var(--text-sm); color: var(--color-ink-2); }
.cl-mine { grid-column: 2; grid-row: 2; font-size: var(--text-sm); color: var(--color-ink-2); text-align: right; }
.clist a:hover .cl-en, .olist a:hover .oa-en { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.olist { display: grid; grid-template-columns: minmax(0, 1fr); }
.olist a { display: flex; align-items: baseline; gap: var(--spacing-3); padding-block: var(--spacing-3); min-height: 44px; border-bottom: 1px solid var(--color-line); }
.oa-no { font-size: var(--text-2xs); font-weight: 500; color: var(--color-ink-3); letter-spacing: var(--tracking-caps); }
.oa-ko { font-weight: 600; }
.oa-en { font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg); line-height: 1.2; }
@media (min-width: 1024px) {
  .clist a { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .cl-ko { grid-column: 1 / 4; }
  .cl-en { grid-column: 4 / 9; grid-row: 1; }
  .cl-n { grid-column: 9 / 11; }
  .cl-mine { grid-column: 11 / 13; grid-row: 1; }
  .olist { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .olist a { border-top: 1px solid var(--color-line); }
}

/* ── 컬렉션 벤토 (목록) */
.bbento { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--color-line); }
.btile { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-5); padding-block: var(--spacing-5) var(--spacing-6); }
.btile + .btile { border-top: 1px solid var(--color-line); }
.btile-en { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.01em; }
.btile-ko { margin-top: 2px; font-weight: 600; }
.btile-meta { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 720px) {
  .bbento { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--spacing-gutter-md); }
  .t-a.btile { grid-column: 1 / -1; }
  .t-b.btile { grid-column: 1 / 4; }
  .t-c.btile { grid-column: 4 / 7; border-top: 1px solid var(--color-line); }
  .t-c.btile::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--spacing-gutter-md) / -2); width: 1px; background: var(--color-line); }
}
@media (min-width: 1024px) {
  .bbento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--spacing-gutter); }
  .t-a.btile { grid-column: 1 / 8; grid-row: 1 / 3; }
  .t-b.btile { grid-column: 8 / 13; grid-row: 1; border-top: 0; }
  .t-c.btile { grid-column: 8 / 13; grid-row: 2; }
  .t-b.btile::before, .t-c.btile::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--spacing-gutter) / -2); width: 1px; background: var(--color-line); }
}

/* 컬렉션 하나 (#c=) */
.cview[hidden], .clist-view[hidden] { display: none; }
.back {
  display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 44px; margin-top: var(--spacing-5);
  font-size: var(--text-base); color: var(--color-ink-2);
}
.back:hover { color: var(--color-ink); }
.chd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); padding-top: var(--spacing-4); padding-bottom: var(--spacing-6); }
.chd-en { font-family: var(--font-display); font-weight: 300; font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.chd-ko { margin-top: var(--spacing-2); font-size: var(--text-md); font-weight: 600; }
.chd-desc { font-size: var(--text-base); color: var(--color-ink-2); max-width: 30em; }
.chd-n { margin-top: var(--spacing-2); font-size: var(--text-sm); color: var(--color-ink-3); }
.cview .walls > .wall:first-child { border-top: 1px solid var(--color-line); padding-top: var(--spacing-5); }
@media (min-width: 1024px) {
  .chd { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); align-items: end; }
  .chd-name { grid-column: 1 / 9; }
  .chd-meta { grid-column: 10 / 13; text-align: right; }
  .chd-desc { margin-left: auto; }
}

/* ── 소개 */
.hang { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); padding-top: var(--spacing-5); border-top: 1px solid var(--color-line); }
.hang-fig { background: var(--color-wall); }
.hang-svg { width: 100%; height: auto; }
.hs-center { stroke: var(--color-ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.hs-base { stroke: var(--color-line); stroke-width: 1; }
.hs-tick { stroke: var(--color-ink-3); stroke-width: 1; }
.hs-n, .hs-cap { fill: var(--color-ink-3); font-family: var(--font-num); font-size: 13px; font-weight: 500; }
.hs-cap { font-family: var(--font-sans); font-size: 13px; }
.hs-lab { fill: var(--color-ink-3); }
.hs-lab2 { fill: var(--color-line-strong); }
.hang-ol { display: flex; flex-direction: column; gap: var(--spacing-4); font-size: var(--text-base); color: var(--color-ink-2); }
.hang-ol li { display: grid; grid-template-columns: 2em minmax(0, 1fr); column-gap: var(--spacing-2); }
.hang-ol .num { grid-row: span 2; font-size: var(--text-2xs); font-weight: 500; color: var(--color-ink-3); padding-top: 4px; }
.hang-ol b { display: block; color: var(--color-ink); font-weight: 600; }
.anat, .info { margin-top: var(--spacing-wall); padding-top: var(--spacing-5); border-top: 1px solid var(--color-line); }
.anat-dl { margin-top: var(--spacing-5); display: flex; flex-direction: column; gap: var(--spacing-3); }
.anat-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.anat-l { font-size: 19.5px; line-height: var(--leading-label); }
.anat-l.l-medium { font-size: 18px; }
.anat-l.l-no { font-size: 16.5px; }
.anat-ex { font-size: var(--text-sm); color: var(--color-ink-2); }
.info-dl { margin-top: var(--spacing-3); display: grid; grid-template-columns: minmax(0, 1fr); }
.info-dl > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--spacing-4); padding-block: var(--spacing-3); border-bottom: 1px solid var(--color-line); }
.info-dl dt { font-size: var(--text-sm); color: var(--color-ink-3); padding-top: 1px; }
.info-dl dd { font-size: var(--text-base); }
@media (min-width: 720px) {
  .anat-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--spacing-5); }
  .anat-ex { position: relative; padding-left: calc(var(--spacing-8) + var(--spacing-3)); }
  .anat-ex::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--spacing-8); height: 1px; background: var(--color-line-strong); }
  .info-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-gutter-md); }
}
@media (min-width: 1024px) {
  .hang { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); row-gap: var(--spacing-5); }
  .hang-t { grid-column: 1 / -1; }
  .hang-fig { grid-column: 1 / 9; }
  .hang-ol { grid-column: 10 / 13; align-self: center; }
  .anat-dl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .anat-row { grid-column: 1 / 10; grid-template-columns: subgrid; }
  .anat-l { grid-column: 1 / 5; }
  .anat-ex { grid-column: 5 / 10; }
  .info-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
}

/* ── 꼬리 — 4열 × 4줄 이하 (pellicle P3-3: 열 균형 · 한 화면 이하) */
.ft { margin-top: var(--spacing-wall); border-top: 1px solid var(--color-line); padding-block: var(--spacing-7) var(--spacing-5); }
.ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-gutter-pair); row-gap: var(--spacing-6); }
.ft-brand, .ft-col:last-child { grid-column: 1 / -1; }
.ft-h { font-family: var(--font-num); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-caps); color: var(--color-ink-3); }
.ft-line, .ft-note { margin-top: var(--spacing-2); font-size: var(--text-sm); color: var(--color-ink-2); line-height: var(--leading-label); }
.ft-note { max-width: 34em; }
.ft-links { margin-top: var(--spacing-1); }
.ft-links a { display: flex; align-items: center; min-height: 44px; font-size: var(--text-base); }
.ft-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2) var(--spacing-4);
  margin-top: var(--spacing-6); padding-top: var(--spacing-3); border-top: 1px solid var(--color-line);
}
.ft-count { font-size: var(--text-sm); color: var(--color-ink-2); }
.ft-top { display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 44px; font-size: var(--text-sm); color: var(--color-ink-2); }
.ft-top:hover { color: var(--color-ink); }
@media (min-width: 720px) {
  .ft { padding-block: var(--spacing-8) var(--spacing-7); }
  .ft-grid { column-gap: var(--spacing-gutter-md); }
  .ft-brand, .ft-col:last-child { grid-column: auto; }
  .ft-links a { min-height: 28px; font-size: var(--text-sm); }
}
@media (min-width: 1024px) {
  .ft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
}

/* ── 덮개 공용 */
.veil {
  position: fixed; inset: 0; z-index: 20; background: var(--color-veil);
  animation: fade-in var(--duration-slow) var(--ease-out);
}
.veil[hidden], .lb[hidden], .drawer[hidden], .menu[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  height: 40px; padding-inline: var(--spacing-4);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-control);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-ink);
  -webkit-user-select: none; user-select: none;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn:hover { border-color: var(--color-ink); }
.btn:active { transform: scale(0.98); }
.btn-dot { display: none; width: 8px; height: 8px; border-radius: var(--radius-dot); background: var(--color-accent); }
.btn-save[aria-pressed="true"] .btn-dot { display: block; animation: dot-in var(--duration-fast) var(--ease-out); }

.lb-close {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  height: 44px; padding-inline: var(--spacing-3);
  font-size: var(--text-sm); color: var(--color-ink);
  border-radius: var(--radius-control);
}
.lb-close:hover { background: var(--color-bg); }
.lb-close:focus-visible { outline-offset: -2px; } /* 테를 단추 안쪽에 — 화면 가장자리에 닿지 않게(pellicle P3-5) */

/* ── 라이트박스 — 조명 받은 흰 벽 */
.lb {
  position: fixed; inset: 0; z-index: 25;
  display: grid; grid-template-rows: 52px minmax(0, 1fr) auto;
  background: var(--color-wall);
  overscroll-behavior: contain;
  animation: lb-in var(--duration-slow) var(--ease-out);
}
.lb.is-closing { animation: fade-out var(--duration-fast) var(--ease-out) forwards; }
@keyframes lb-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade-out { to { opacity: 0; } }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--spacing-3); }
.lb-count { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.lb-count .lb-room { font-family: var(--font-sans); font-weight: 400; }
.lb-stage {
  --lb-w: calc(100vw - 2 * var(--spacing-page));
  --lb-h: 58svh;
  position: relative; overflow-y: auto; overscroll-behavior: contain;
  display: grid; justify-items: center; align-content: safe center;
  padding: var(--spacing-2) var(--spacing-page) var(--spacing-5);
}
.lb-fig { display: grid; justify-items: start; gap: var(--spacing-5); width: max-content; max-width: 100%; }
.lb-photo { display: grid; }
.lb-photo .photo, .lb-photo img {
  width: min(var(--lb-w), calc(var(--lb-h) * var(--r)));
  height: auto; aspect-ratio: var(--r); background: var(--ph);
  transition: opacity var(--duration-base) var(--ease-out);
}
.lb-photo.is-swapping .photo { opacity: 0; }
.lb-info { display: grid; gap: var(--spacing-4); width: 100%; }
.lb-label { font-size: var(--text-sm); line-height: var(--leading-label); display: flex; flex-direction: column; }
.lb-label .l-extra { font-size: var(--text-xs); color: var(--color-ink-2); }
.lb-label .l-home { margin-top: var(--spacing-2); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-line-strong); display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 44px; width: max-content; }
.lb-label .l-home:hover { color: var(--color-ink); }
.lb-act { display: none; }
.lb-nav {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  color: var(--color-ink-2); border-radius: var(--radius-control);
  transition: color var(--duration-fast) var(--ease-out);
}
.lb-nav:hover { color: var(--color-ink); }
.lb-nav--side, .lb-row { display: none; }
.lb-thumb {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3) calc(var(--spacing-2) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
}
.btn-thumb { height: 48px; padding-inline: var(--spacing-2); }
@media (min-width: 720px) {
  .lb { grid-template-rows: 64px minmax(0, 1fr); }
  .lb-top { align-items: start; padding: var(--spacing-4) var(--spacing-4) 0; }
  .lb-count { line-height: 44px; padding-left: var(--spacing-2); }
  .lb-thumb { display: none; }
  .lb-stage { --lb-h: calc(100svh - 64px - 200px); padding-top: 0; }
  .lb-info { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .lb-act { display: flex; align-items: center; gap: var(--spacing-4); }
  .lb-row { display: inline-flex; gap: var(--spacing-1); }
}
@media (min-width: 1024px) {
  .lb-stage { --lb-w: calc(100vw - 240px); --lb-h: calc(100svh - 64px - 232px); padding-inline: 120px; }
  .lb-row { display: none; }
  .lb-nav--side { display: inline-grid; position: fixed; top: calc(64px + (100svh - 64px - 232px) / 2); translate: 0 -50%; }
  .lb-nav--side.lb-prev { left: var(--spacing-6); }
  .lb-nav--side.lb-next { right: var(--spacing-6); }
}

/* ── 저장 서랍 */
.drawer {
  position: fixed; z-index: 22; left: 0; right: 0; bottom: 0; height: 72svh;
  display: flex; flex-direction: column;
  background: var(--color-wall); border-top: 1px solid var(--color-line);
  animation: sheet-up var(--duration-slow) var(--ease-out);
  overscroll-behavior: contain;
}
.drawer.is-closing, .menu.is-closing { animation: fade-out var(--duration-fast) var(--ease-out) forwards; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-left { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-down { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-5); border-bottom: 1px solid var(--color-line); }
.drawer-t { font-size: var(--text-base); font-weight: 600; }
.drawer-t .num { font-weight: 500; color: var(--color-ink-3); margin-left: var(--spacing-1); }
.drawer-list { flex: 1; overflow-y: auto; padding: var(--spacing-3) var(--spacing-5) calc(var(--spacing-5) + env(safe-area-inset-bottom)); }
.drawer-list li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--spacing-4); align-items: center; padding-block: var(--spacing-4); border-bottom: 1px solid var(--color-line); }
.dr-photo { display: grid; place-items: center; width: 88px; height: 88px; }
.dr-photo .photo { width: min(88px, calc(88px * var(--r))); max-height: 88px; }
.dr-photo:focus-visible { outline: none; }
.dr-photo:focus-visible .photo { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.dr-info { display: flex; flex-direction: column; font-size: var(--text-sm); line-height: var(--leading-label); }
.dr-info .l-title { text-decoration: none; }
.dr-un { align-self: start; min-height: 36px; margin-top: var(--spacing-1); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.dr-un:hover { color: var(--color-ink); }
.drawer-empty { padding: var(--spacing-6) var(--spacing-5); font-size: var(--text-base); color: var(--color-ink-2); }
@media (min-width: 720px) {
  .drawer { left: auto; top: 0; height: auto; width: min(100vw, var(--spacing-drawer)); border-top: 0; border-left: 1px solid var(--color-line); animation-name: sheet-left; }
  .drawer-hd { min-height: 72px; }
}

/* ── 메뉴 시트 (<720) */
.menu {
  position: fixed; z-index: 22; left: 0; right: 0; top: var(--spacing-header-sm);
  background: var(--color-wall); border-bottom: 1px solid var(--color-line);
  padding: var(--spacing-2) var(--spacing-page) var(--spacing-5);
  animation: sheet-down var(--duration-slow) var(--ease-out);
}
.menu-nav { display: flex; flex-direction: column; }
.menu-a { display: flex; align-items: center; min-height: 56px; font-size: var(--text-lg); font-weight: 500; color: var(--color-ink-2); border-bottom: 1px solid var(--color-line); }
.menu-a[aria-current="page"] { color: var(--color-ink); font-weight: 600; }
.menu-ex { margin-top: var(--spacing-4); font-size: var(--text-sm); color: var(--color-ink-2); }
body.menu-open .hd { position: relative; z-index: 23; background: var(--color-bg); }