/*
 * White Tide — style.css
 * 값은 tokens.css 의 var() 만 쓴다. 여기서 만드는 변수는 토큰을 조합한 배치값뿐이다(색 없음).
 * 축은 세로 열이 아니라 조수선(tide) 한 줄 — 벽 제목의 기준선 · 작품의 세로 가운데 · 캡션 카드의 윗변이 그 선에 붙는다.
 */

/* ── 배치값 ─────────────────────────────────────────────────────────────── */

:root {
  --gut-l: max(var(--spacing-gutter), env(safe-area-inset-left));
  --gut-r: max(var(--spacing-gutter), env(safe-area-inset-right));
  --head-h: calc(var(--spacing) * 24); /* 390: 두 줄 — 52 + 44 */
  --tide-w: 1px;
  /* 첫 화면 조수선 높이 — 쪽 내용이 아니라 토큰으로만 정한다. 그래야 세 쪽에서 같은 높이다.
   * wall-need = 벽 제목 두 줄(윗줄 행 높이 + 아랫줄 대문자 높이 ≈ 0.86 + 0.70) + 눈썹·위 여백 */
  --wall-need: calc(var(--text-wall) * 1.56 + var(--spacing) * 26);
  --tide-y: calc(var(--head-h) + var(--wall-need));
}

@media (min-width: 48rem) {
  :root {
    --head-h: calc(var(--spacing) * 18); /* 한 줄 72px */
  }
}

@media (min-width: 64rem) {
  :root {
    --tide-w: 2px;
    --wall-need: calc(var(--text-wall) * 1.56 + var(--spacing) * 16);
    /* 데스크톱은 눈높이 비유(58svh). 제목이 그보다 크면 모든 쪽이 같이 내려간다 */
    --tide-y: max(var(--spacing-tide), calc(var(--head-h) + var(--wall-need)));
  }
}

/* ── 바탕 ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(h1, h2, h3, p, figure, blockquote, dl, dd, table) {
  margin: 0;
}

:where(ul, ol)[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

body {
  margin: 0;
  min-block-size: 100svh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

i,
em {
  font-style: italic;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

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

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

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

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

.nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-inline-start: var(--gut-l);
  inset-block-start: calc(var(--spacing) * 2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 4);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-label);
  transform: translateY(-200%);
}

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

/* 녹청 점 — 이 템플릿에서 둥근 것은 이것 하나. 한 화면에 한 점 */
.dot {
  display: inline-block;
  inline-size: calc(var(--spacing) * 2);
  block-size: calc(var(--spacing) * 2);
  margin-inline-end: calc(var(--spacing) * 2);
  border-radius: var(--radius-dot);
  background: var(--color-accent);
  vertical-align: 0.05em;
}

/* 글자 링크 — 밑줄이 1px → 2px 로 굵어지고 먹 → 녹청 */
.link {
  display: inline-block;
  padding-block: calc((var(--spacing-target) - 1lh) / 2); /* 터치 44px — 밑줄이 화살표까지 끊기지 않게 inline-block */
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition:
    color 200ms var(--ease-out),
    text-decoration-thickness 200ms var(--ease-out);
}

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

/* ── 글자 부품 ──────────────────────────────────────────────────────────── */

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
  font-weight: 500;
  color: var(--color-ink);
}

.eyebrow .dot {
  align-self: center;
}

.eyebrow .link {
  padding-block: 0;
  margin-inline-start: 0.3em;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  text-wrap: balance;
}

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

.prose {
  display: grid;
  gap: calc(var(--spacing) * 5);
  max-inline-size: var(--spacing-measure);
}

.prose p {
  text-wrap: pretty;
}

/* ── 머리 — sticky 아님 ─────────────────────────────────────────────────── */

.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "mark status"
    "nav nav";
  align-items: center;
  block-size: var(--head-h);
  padding-inline: var(--gut-l) var(--gut-r);
}

.wordmark {
  grid-area: mark;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-block-size: calc(var(--spacing) * 13);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lead);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-ink);
}

.nav {
  grid-area: nav;
  align-self: stretch;
}

.nav ul {
  display: flex;
  gap: calc(var(--spacing) * 6);
  block-size: 100%;
}

.nav a {
  display: inline-flex;
  align-items: center;
  block-size: 100%;
  min-block-size: var(--spacing-target);
  min-inline-size: var(--spacing-target);
  font-size: var(--text-label);
  text-decoration: none;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  transition: color 200ms var(--ease-out);
}

.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  .nav a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }
}

.status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* 머리의 상태 점은 먹 — 녹청 한 점은 쪽의 "지금" 표식이 가진다 */
.status__dot {
  inline-size: calc(var(--spacing) * 2);
  block-size: calc(var(--spacing) * 2);
  border-radius: var(--radius-dot);
  background: var(--color-ink);
}

@media (min-width: 48rem) {
  .head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "mark nav status";
    column-gap: calc(var(--spacing) * 12);
  }

  .nav ul {
    gap: calc(var(--spacing) * 8);
  }
}

/* ── 조수선 ─────────────────────────────────────────────────────────────── */

.tide {
  block-size: var(--tide-w);
  margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r));
  background: var(--color-tide);
  transform-origin: left center;
}

/* ── 벽 제목(첫 화면) ───────────────────────────────────────────────────── */

.wall,
.artist {
  padding-inline: var(--gut-l) var(--gut-r);
}

.wall__above {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 눈썹은 머리 바로 아래 같은 자리, 큰 것은 선 위 */
  gap: calc(var(--spacing) * 4);
  min-block-size: calc(var(--tide-y) - var(--head-h));
  padding-block-start: calc(var(--spacing) * 6);
}

/* 비닐 커팅 활자 — 대문자 윗선부터 마지막 줄 기준선까지만 상자로 잡아, 상자 바닥이 곧 조수선이 되게 한다 */
.wall-title {
  font-family: var(--font-display);
  font-weight: var(--text-wall--font-weight);
  font-size: var(--text-wall);
  line-height: var(--text-wall--line-height);
  letter-spacing: var(--text-wall--letter-spacing);
  color: var(--color-ink);
  text-box: trim-both cap alphabetic;
}

.wall-title > span {
  display: block;
}

.wall__stack {
  display: grid;
  gap: calc(var(--spacing) * 4);
}

.wall-kicker {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
}

.wall__below,
.artist__below {
  display: grid;
  gap: calc(var(--spacing) * 6);
}

.wall__meta {
  display: grid;
  gap: calc(var(--spacing) * 2);
  padding-block-start: calc(var(--spacing) * 5);
}

.wall__artist {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
}

.wall__dates,
.wall__sub {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  text-wrap: balance;
}

/* 390 — 나눔점이 줄 머리에 오지 않게 두 줄로 */
@media (max-width: 47.99rem) {
  .wall__sub > span:not(.sep) {
    display: block;
  }

  .wall__sub > .sep {
    display: none;
  }
}

.wall__meta .muted {
  font-size: var(--text-label);
}

@media (min-width: 64rem) {
  .wall__below,
  .artist__below {
    grid-template-columns: minmax(0, 1fr) var(--spacing-label-w);
    column-gap: var(--spacing-block);
    align-items: start;
  }

  .wall__meta {
    padding-block-start: calc(var(--spacing) * 6);
  }
}

/* 벽 캡션 카드 — 백묵 · 직각 · 그림자 없음. 데스크톱에서 윗변이 조수선에 매달린다 */
.wall-label {
  display: grid;
  align-content: start;
  gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 6);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}

.wall-label__title {
  font-size: var(--text-lead);
  line-height: var(--text-title--line-height);
}

.wall-label__artist {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-label);
}

.wall-label__facts {
  display: grid;
  gap: calc(var(--spacing) * 2);
  margin-block-start: calc(var(--spacing) * 3);
  padding-block-start: calc(var(--spacing) * 3);
  border-block-start: 1px solid var(--color-rule);
}

.wall-label__facts dt {
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
  color: var(--color-ink-muted);
}

.wall-label .link,
.wall-label .button {
  justify-self: start;
  margin-block-start: calc(var(--spacing) * 2);
}

/* ── 구획 ───────────────────────────────────────────────────────────────── */

.section {
  margin-block-start: var(--spacing-section);
  padding-inline: var(--gut-l) var(--gut-r);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3) var(--spacing-block);
  margin-block-end: var(--spacing-block);
}

.section__head--sub {
  margin-block-start: calc(var(--spacing-block) * 2);
}

.section__note {
  max-inline-size: 26rem;
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

/* 전시 글 — 사실 목록 4 / 글 8 */
.about {
  display: grid;
  gap: var(--spacing-block);
}

.facts {
  display: grid;
  align-content: start;
  order: 2;
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}

.facts > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  border-block-end: 1px solid var(--color-rule);
}

.facts > div:first-child {
  border-block-start: 1px solid var(--color-rule);
}

.facts dt {
  color: var(--color-ink-muted);
}

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

  .facts {
    order: 0;
    grid-column: 1 / span 4;
  }

  .about .prose {
    grid-column: 6 / span 7;
  }
}

/* ── 작품 액자 ──────────────────────────────────────────────────────────── */

.section--hang {
  padding-inline: 0;
  overflow-x: clip;
}

.section--hang > .section__head {
  padding-inline: var(--gut-l) var(--gut-r);
}

.hang {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 14);
  padding-inline: var(--gut-l) var(--gut-r);
}

.hang + .hang {
  margin-block-start: calc(var(--spacing) * 14);
}

.work {
  position: relative;
  inline-size: 100%;
}

.mat {
  position: relative;
  padding: var(--spacing-mat);
  background: var(--color-mat);
  box-shadow: var(--shadow-hang);
}

/* 작품 — 평면 복제 사진이 매트 창을 꽉 채운다. 창의 비율은 설계의 data-ratio 가 정한다
   (생성 이미지의 픽셀 비율이 1% 안팎 다르다 — 그 차이로 액자 가운데가 조수선에서 벗어나지 않게).
   지연 로드 동안에는 자리표시자와 같은 젖은 석고가 보인다 */
.work__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  background: var(--color-band);
}

.work__img[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.work__img[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.work__img[data-ratio="1:1"] { aspect-ratio: 1 / 1; }
.work__img[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
.work__img[data-ratio="21:9"] { aspect-ratio: 21 / 9; }
.work__img[data-ratio="2:3"] { aspect-ratio: 2 / 3; }
.work__img[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
.work__img[data-ratio="5:4"] { aspect-ratio: 5 / 4; }
.work__img[data-ratio="9:16"] { aspect-ratio: 9 / 16; }

.work__label {
  display: grid;
  margin-block-start: var(--spacing-label);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}

.work__no {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

/* 1열 — 작품마다 제 선이 뒤로 지나간다. 크기를 다르게 두어 "걸린" 느낌 */
@media (max-width: 63.99rem) {
  .mat::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: calc(50% - var(--tide-w) / 2);
    inset-inline: -100vw;
    block-size: var(--tide-w);
    background: var(--color-tide);
  }

  .work--h3,
  .work--a2,
  .work--a6 {
    inline-size: 72%;
    align-self: flex-end;
  }

  .work--h3 {
    inline-size: 60%;
  }

  .work--a3 {
    inline-size: 86%;
  }

  .work--a5 {
    inline-size: 72%;
  }

  .work--a6 {
    inline-size: 60%;
  }
}

/* 데스크톱 — 한 줄의 조수선 위에 비율이 다른 액자들. 선이 액자 뒤로 지나가고, 액자의 가운데가 선이다 */
@media (min-width: 64rem) {
  .hang {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-block-end: calc(var(--spacing) * 30);
  }

  .hang + .hang {
    margin-block-start: calc(var(--spacing) * 24);
  }

  .hang::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - var(--tide-w) / 2);
    block-size: var(--tide-w);
    background: var(--color-tide);
  }

  .work {
    inline-size: var(--w);
    flex: 0 0 auto;
  }

  /* 캡션은 액자 오른쪽 아래 — 흐름에서 빼야 액자의 가운데가 선에 남는다 */
  .work__label {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    inline-size: min(15rem, 100%);
  }

  .work--h1 { --w: 31%; }
  .work--h2 { --w: 39%; }
  .work--h3 { --w: 18%; }
  .work--a1 { --w: 26%; }
  .work--a2 { --w: 44%; }
  .work--a3 { --w: 18%; }
  .work--a4 { --w: 29%; }
  .work--a5 { --w: 25%; }
  .work--a6 { --w: 16%; }

  .hang--artist-b {
    justify-content: space-around;
  }
}

/* ── 표 ─────────────────────────────────────────────────────────────────── */

.checklist,
.cv,
.admission {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}

.checklist thead th,
.cv thead th {
  padding-block: calc(var(--spacing) * 3);
  padding-inline-end: calc(var(--spacing) * 6);
  border-block-end: 1px solid var(--color-ink-muted);
  font-size: var(--text-caption);
  letter-spacing: var(--text-caption--letter-spacing);
  font-weight: 500;
  text-align: start;
  color: var(--color-ink-muted);
}

.checklist td,
.cv td,
.admission th,
.admission td {
  padding-block: calc(var(--spacing) * 4);
  padding-inline-end: calc(var(--spacing) * 6);
  border-block-end: 1px solid var(--color-rule);
  vertical-align: baseline;
  text-align: start;
}

.checklist .r,
.admission .r {
  text-align: end;
}

.checklist td:last-child,
.checklist th:last-child,
.cv td:last-child,
.cv th:last-child,
.admission td:last-child {
  padding-inline-end: 0;
}

.admission {
  max-inline-size: 48rem;
}

.admission th {
  font-weight: 400;
}

.admission tr:first-child th,
.admission tr:first-child td {
  border-block-start: 1px solid var(--color-ink-muted);
}

/* 390 — 표를 행마다 두 줄 블록으로. 가로 스크롤 없음 */
@media (max-width: 47.99rem) {
  .checklist thead,
  .cv thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .checklist,
  .checklist tbody,
  .cv,
  .cv tbody {
    display: block;
  }

  .checklist tr,
  .cv tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding-block: calc(var(--spacing) * 4);
    border-block-end: 1px solid var(--color-rule);
  }

  .checklist tbody tr:first-child,
  .cv tbody tr:first-child {
    border-block-start: 1px solid var(--color-ink-muted);
  }

  .checklist td,
  .cv td {
    padding: 0;
    border: 0;
  }

  .checklist td:nth-child(1),
  .cv td:nth-child(1) {
    flex: 0 0 3rem;
    color: var(--color-ink-muted);
  }

  .checklist td:nth-child(2),
  .cv td:nth-child(2) {
    flex: 1 1 calc(100% - 3rem);
  }

  .checklist td:nth-child(n + 3),
  .cv td:nth-child(n + 3) {
    color: var(--color-ink-muted);
    text-align: start;
  }

  .checklist td:nth-child(3),
  .cv td:nth-child(3) {
    margin-inline-start: 3rem;
  }

  .checklist td:nth-child(3) {
    flex-basis: calc(100% - 3rem);
  }

  .checklist td:nth-child(4) {
    margin-inline-start: 3rem;
  }

  .checklist td:nth-child(5)::before,
  .cv td:nth-child(4)::before {
    content: "·";
    margin-inline: 0.45em;
  }
}

/* ── 목록 행(카드 아님) ─────────────────────────────────────────────────── */

.events,
.programme {
  border-block-start: 1px solid var(--color-ink-muted);
}

.event,
.programme-row {
  display: grid;
  gap: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 5);
  border-block-end: 1px solid var(--color-rule);
}

.event__when,
.programme-row__when {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  color: var(--color-ink-muted);
}

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

.event__price,
.programme-row__who,
.programme-row__state {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}

.programme-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: -0.01em;
}

.programme-row__state {
  color: var(--color-ink-muted);
}

@media (min-width: 48rem) {
  .event {
    grid-template-columns: 12rem minmax(0, 1fr) 14rem;
    align-items: baseline;
    column-gap: calc(var(--spacing) * 6);
  }

  .event__price {
    text-align: end;
  }

  .programme-row {
    grid-template-columns: 12rem minmax(0, 1fr) 16rem 10rem;
    align-items: baseline;
    column-gap: calc(var(--spacing) * 6);
  }

  .programme-row__state {
    text-align: end;
  }
}

/* ── 방문 띠 — 젖은 석고. 위 글자는 먹·재만 ────────────────────────────── */

.band {
  margin-block-start: var(--spacing-section);
  padding: var(--spacing-block) var(--gut-r) var(--spacing-block) var(--gut-l);
  background: var(--color-band);
}

.band__cols {
  display: grid;
  gap: calc(var(--spacing) * 8);
}

.band__h {
  margin-block-end: calc(var(--spacing) * 2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
}

.band p {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}

.band__muted {
  color: var(--color-ink); /* band 위 재(ink-muted)는 4.55:1 로 경계선 — 띠에서는 먹만 쓴다 */
}

@media (hover: hover) {
  .band .link:hover {
    color: var(--color-ink); /* band 위 녹청 글자 4.02:1 — 굵기만 바꾼다 */
  }
}

@media (min-width: 48rem) {
  .band__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 6);
  }
}

/* ── 작가 — 이름 벽 ─────────────────────────────────────────────────────── */

.wall--names .wall__above {
  gap: 0;
}

.wall--names .eyebrow {
  margin-block-end: calc(var(--spacing) * 2);
}

.name-row {
  display: grid;
  grid-template-areas:
    "meta"
    "name";
  gap: calc(var(--spacing) * 2);
  padding-block-start: calc(var(--spacing) * 5);
  border-block-end: 1px solid var(--color-rule);
}

.wall__above .name-row:last-child {
  border-block-end: 0;
}

.name {
  grid-area: name;
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-poster);
  line-height: var(--text-poster--line-height);
  letter-spacing: var(--text-poster--letter-spacing);
  text-decoration: none;
  text-box: trim-both cap alphabetic;
  text-wrap: balance;
}

/* 링크인 이름은 하나(지금 전시 중인 작가). 밑줄 대신 화살표 — 행의 괘선과 겹쳐 두 줄이 되지 않게 */
a.name {
  transition: color 200ms var(--ease-out);
}

/* 화살표는 이름의 대문자 윗선에 붙는 작은 표식 — 인라인이라야 이름 상자의 기준선 자르기가 산다 */
.name__go {
  display: inline-block;
  margin-inline-start: 0.4em;
  font-family: var(--font-body);
  font-size: 0.32em;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: top;
  position: relative;
  inset-block-start: 0.55em; /* 대문자 윗선 높이로 */
  color: var(--color-ink-muted);
  transition: transform 200ms var(--ease-out), color 200ms var(--ease-out);
}

.name-row__meta {
  grid-area: meta;
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
  color: var(--color-ink-muted);
  transition: color 200ms var(--ease-out);
}

.name-row__meta strong {
  font-weight: 600;
  color: var(--color-ink);
}

.name-row--now .dot {
  vertical-align: 0.02em;
}

@media (hover: hover) {
  .name-row--now:hover .name-row__meta {
    color: var(--color-ink);
  }

  .name-row--now:hover a.name {
    color: var(--color-accent);
  }

  .name-row--now:hover .name__go {
    color: var(--color-accent);
    transform: translateY(0.12em);
  }
}

@media (min-width: 48rem) {
  .name-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name meta";
    align-items: last baseline;
    column-gap: calc(var(--spacing) * 8);
    padding-block-start: calc(var(--spacing) * 10);
  }

  .name-row__meta {
    max-inline-size: 30rem;
    text-align: end;
    text-box: trim-end cap alphabetic;
  }
}

/* ── 작가 1 ─────────────────────────────────────────────────────────────── */

.artist {
  scroll-margin-block-start: calc(var(--spacing) * 6);
}

.artist__above {
  display: grid;
  gap: calc(var(--spacing) * 4);
}

.poster {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-poster);
  line-height: var(--text-poster--line-height);
  letter-spacing: var(--text-poster--letter-spacing);
  text-box: trim-both cap alphabetic;
  text-wrap: balance;
}

.artist__below .prose {
  padding-block-start: calc(var(--spacing) * 6);
}

@media (max-width: 63.99rem) {
  .artist__below .wall-label {
    order: -1;
    margin-block-start: calc(var(--spacing) * 6);
  }
}

/* text-box 를 모르는 브라우저(Firefox) — Chromium 에서 잰 자르기 양(em)을 여백으로 되돌린다.
 * 벽 제목 lh 0.86: 위 0.072 · 아래 0.138 / 포스터·이름 lh 0.9: 아래 0.25 / 이름 행 캡션: 아래 0.322 */
@supports not (text-box: trim-both cap alphabetic) {
  .wall-title {
    margin-block: -0.072em -0.138em;
  }

  .poster,
  .name {
    margin-block-end: -0.25em;
  }

  @media (min-width: 48rem) {
    /* 기준선 정렬은 음수 여백을 무시한다 — 여백 상자 바닥(=기준선)끼리 맞춘다 */
    .name-row {
      align-items: end;
    }

    .name-row__meta {
      margin-block-end: -0.322em;
    }
  }
}

/* ── 작가의 말 ──────────────────────────────────────────────────────────── */

.quote {
  display: grid;
  gap: calc(var(--spacing) * 5);
}

.quote blockquote {
  margin: 0;
}

.quote blockquote p {
  max-inline-size: 22ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display);
  line-height: 1.12;
  letter-spacing: var(--text-display--letter-spacing);
  text-wrap: balance;
}

.quote__who {
  font-size: var(--text-caption);
  letter-spacing: var(--text-caption--letter-spacing);
  color: var(--color-ink-muted);
}

@media (min-width: 64rem) {
  .quote-section {
    padding-inline-start: calc(var(--gut-l) + 8.333%);
  }
}

/* ── 방문 ───────────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-block-size: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 5);
  border: 1px solid var(--color-ink-muted);
  border-radius: var(--radius-none);
  background: transparent;
  font-size: var(--text-label);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 100ms var(--ease-press);
}

.button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button--quiet[aria-disabled="true"] {
  border-color: var(--color-rule);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

.button:active:not([aria-disabled="true"]) {
  transform: scale(0.98);
}

/* 예약 — 표현 */
.book {
  scroll-margin-block-start: calc(var(--spacing) * 6);
}

.book__grid {
  display: grid;
  gap: var(--spacing-block);
}

.book__steps {
  display: grid;
  gap: calc(var(--spacing) * 10);
}

.book__h {
  margin-block-end: calc(var(--spacing) * 4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
}

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

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: calc(var(--spacing) * 2);
}

.chip,
.slot,
.stepper__btn {
  border: 1px solid var(--color-ink-muted);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition:
    background-color 150ms var(--ease-in-out),
    color 150ms var(--ease-in-out),
    transform 100ms var(--ease-press);
}

.chip {
  display: grid;
  justify-items: start;
  min-inline-size: 5.25rem;
  min-block-size: calc(var(--spacing) * 14);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  text-align: start;
}

.chip > span:first-child {
  font-size: var(--text-caption);
  letter-spacing: var(--text-caption--letter-spacing);
}

.slot {
  min-block-size: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 2);
  font-size: var(--text-label);
}

.chip[aria-pressed="true"],
.slot[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-surface);
  border-color: var(--color-ink);
}

.chip[aria-disabled="true"],
.slot[aria-disabled="true"] {
  border-color: var(--color-rule);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

.chip:active:not([aria-disabled="true"]),
.slot:active:not([aria-disabled="true"]),
.stepper__btn:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .chip:hover:not([aria-disabled="true"], [aria-pressed="true"]),
  .slot:hover:not([aria-disabled="true"], [aria-pressed="true"]),
  .stepper__btn:hover {
    border-color: var(--color-ink);
  }
}

.party {
  border-block-start: 1px solid var(--color-ink-muted);
}

.party__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  border-block-end: 1px solid var(--color-rule);
}

.party__name {
  font-size: var(--text-label);
}

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

.stepper__btn {
  display: grid;
  place-items: center;
  inline-size: var(--spacing-target);
  block-size: var(--spacing-target);
  font-size: var(--text-title);
  line-height: 1;
}

.stepper__n {
  min-inline-size: 2ch;
  font-size: var(--text-title);
  text-align: center;
}

.book__summary {
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 8);
}

.book__summary .book__h {
  margin-block-end: 0;
}

.book__line {
  display: grid;
  font-size: var(--text-lead);
  line-height: var(--text-title--line-height);
}

.book__summary .button {
  justify-self: stretch;
  margin-block-start: calc(var(--spacing) * 2);
}

.book__note {
  font-size: var(--text-caption);
  letter-spacing: var(--text-caption--letter-spacing);
  color: var(--color-ink-muted);
}

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

  .book__steps {
    grid-column: 1 / span 7;
  }

  /* 옆 칸이 있을 때만 붙는다 — 1열에서는 흐른다 */
  .book__summary {
    grid-column: 9 / span 4;
    position: sticky;
    inset-block-start: calc(var(--spacing) * 6);
  }
}

/* 오시는 길 — CSS 지도 */
.getting__grid {
  display: grid;
  gap: var(--spacing-block);
}

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-band);
  box-shadow: inset 0 0 0 1px var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
  color: var(--color-ink);
}

.map__water {
  position: absolute;
  inset: 64% 0 0;
  background: var(--color-surface);
  border-block-start: 1px solid var(--color-ink);
}

.map__pier {
  position: absolute;
  inset-inline-start: 84%;
  inset-block-start: 64%;
  inline-size: 5%;
  block-size: 24%;
  background: var(--color-band);
  border: 1px solid var(--color-ink);
  border-block-start: 0;
}

.map__label {
  position: absolute;
  white-space: nowrap;
}

.map__label--pier {
  inset-block-start: calc(100% + var(--spacing) * 1);
  inset-inline-end: 0;
}

.map__road {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 24%;
  border-block-start: 2px dotted var(--color-ink);
}

.map__label--road {
  inset-block-start: calc(var(--spacing) * 1);
  inset-inline-end: calc(var(--spacing) * 3);
}

.map__stop {
  position: absolute;
  inset-block-start: calc(24% - var(--spacing) * 2 + 1px);
  inset-inline-start: calc(30% - var(--spacing) * 2);
  inline-size: calc(var(--spacing) * 4);
  block-size: calc(var(--spacing) * 4);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-dot);
  background: var(--color-surface);
}

.map__label--stop {
  inset-block-end: calc(100% + var(--spacing) * 2);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-weight: 600;
}

.map__sheds {
  position: absolute;
  inset-inline: 6% 18%;
  inset-block: 36% 38%;
  display: flex;
  gap: 2.5%;
}

.map__sheds li {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-ink);
  background: var(--color-band);
}

.map__sheds .is-here {
  background: var(--color-ink);
  color: var(--color-surface);
}

.map__here {
  position: absolute;
  inset-block-start: calc(100% + var(--spacing) * 5);
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--color-ink);
  font-weight: 600;
}

.map__north {
  position: absolute;
  inset-block-start: calc(var(--spacing) * 3);
  inset-inline-end: calc(var(--spacing) * 3);
  display: grid;
  justify-items: center;
  font-weight: 600;
}

.map__scale {
  position: absolute;
  inset-block-end: calc(var(--spacing) * 3);
  inset-inline-start: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

.map__bar {
  inline-size: 16%;
  min-inline-size: calc(var(--spacing) * 12);
  block-size: calc(var(--spacing) * 1.5);
  border: 1px solid var(--color-ink);
  border-block-start: 0;
}

.map__gate {
  position: absolute;
  inset-block-start: calc(var(--spacing) * 3);
  inset-inline-start: calc(var(--spacing) * 3);
}

/* 390 — 지도가 작아 라벨이 겹친다. 하차 지점은 옆 목록(Car)에도 있다 */
@media (max-width: 47.99rem) {
  .map__gate {
    display: none;
  }
}

.ways,
.access {
  display: grid;
  border-block-start: 1px solid var(--color-ink-muted);
}

.ways li,
.access li {
  display: grid;
  gap: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 4);
  border-block-end: 1px solid var(--color-rule);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}

.ways__h,
.access__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lead);
  line-height: var(--text-title--line-height);
}

.ways p,
.access p {
  color: var(--color-ink-muted);
}

@media (min-width: 48rem) {
  .access {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 10);
  }
}

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

  .map {
    grid-column: 1 / span 7;
  }

  .ways {
    grid-column: 9 / span 4;
  }
}

/* 건물 이야기 + 벽 단면도 */
.story {
  display: grid;
  gap: var(--spacing-block);
}

.story .h2 {
  margin-block-end: calc(var(--spacing) * 2);
}

.section-cut {
  display: grid;
  gap: calc(var(--spacing) * 4);
}

.section-cut__wall {
  position: relative;
  block-size: clamp(20rem, 16rem + 12vw, 28rem);
  margin-inline-start: calc(var(--spacing) * 4);
  border-inline-start: 1px solid var(--color-ink-muted);
  border-block-end: 1px solid var(--color-ink);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
}

/* 물이 찼던 높이(148/300)까지 젖은 석고 */
.section-cut__wall::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  block-size: 49.33%;
  background: var(--color-band);
}

.section-cut__line {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(49.33% - 1px);
  block-size: 2px;
  background: var(--color-tide);
}

.section-cut__tick {
  position: absolute;
  inset-inline-start: calc(var(--spacing) * -4);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-inline-start: calc(var(--spacing) * 6);
  color: var(--color-ink);
  white-space: nowrap;
}

.section-cut__tick::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: calc(var(--spacing) * 4);
  block-size: 1px;
  background: var(--color-ink-muted);
}

.section-cut__tick--top {
  inset-block-start: 0;
  transform: translateY(-50%);
}

.section-cut__tick--tide {
  inset-block-end: 49.33%;
  align-items: flex-end;
  padding-block-end: calc(var(--spacing) * 2);
}

.section-cut__tick--tide::before {
  inset-block-end: 0;
}

.section-cut__tick--floor {
  inset-block-end: calc(var(--spacing) * 3);
}

.section-cut__tick--floor::before {
  display: none;
}

/* 작품 하나 — 가운데가 선에 */
.section-cut__frame {
  position: absolute;
  inset-inline-start: 58%;
  inset-block-end: 49.33%;
  inline-size: 22%;
  aspect-ratio: 4 / 5;
  padding: calc(var(--spacing) * 2);
  background: var(--color-mat);
  box-shadow: var(--shadow-hang);
  transform: translateY(50%);
}

.section-cut__frame::after {
  content: "";
  display: block;
  block-size: 100%;
  background: var(--color-band);
}

.section-cut__cap {
  max-inline-size: 30rem;
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
  color: var(--color-ink-muted);
}

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

  .story .prose {
    grid-column: 1 / span 6;
  }

  .section-cut {
    grid-column: 8 / span 5;
  }
}

.notice {
  display: grid;
  gap: calc(var(--spacing) * 2);
  max-inline-size: calc(var(--spacing-measure) + var(--gut-l) + var(--gut-r));
}

.notice__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
}

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

/* ── 꼬리 ───────────────────────────────────────────────────────────────── */

.foot {
  margin-block-start: var(--spacing-section);
  padding: var(--spacing-block) var(--gut-r) max(var(--spacing-block), env(safe-area-inset-bottom)) var(--gut-l);
  border-block-start: 1px solid var(--color-ink-muted);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}

main:has(> .band:last-child) + .foot {
  margin-block-start: 0;
  border-block-start: 0;
}

.foot__cols {
  display: grid;
  gap: calc(var(--spacing) * 6);
}

.foot__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lead);
}

.foot__links {
  display: grid;
  justify-items: start;
}

.foot__links .link {
  min-inline-size: var(--spacing-target);
}

.foot__links .link[aria-current="page"] {
  text-decoration-thickness: 2px;
}

.foot__base {
  display: grid;
  gap: calc(var(--spacing) * 3);
  margin-block-start: var(--spacing-block);
  padding-block-start: calc(var(--spacing) * 5);
  border-block-start: 1px solid var(--color-rule);
}

.foot__notice {
  max-inline-size: var(--spacing-measure);
  color: var(--color-ink-muted);
}

.foot__gallery {
  justify-self: start;
}

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

  .foot__base {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .foot__gallery {
    justify-self: end;
  }
}

/* ── 움직임 ─────────────────────────────────────────────────────────────── */

/* 첫 칠 전에 머리 스크립트가 html.wt-intro 를 단다(동작 줄이기·해시·이 템플릿 안에서 온 경우엔 달지 않는다).
 * 스크립트가 없으면 이 규칙들은 켜지지 않는다 — 선과 제목은 처음부터 있다 */
.wt-intro .wall > .tide {
  transform: scaleX(0);
}

.wt-intro .wall-title {
  clip-path: inset(-0.2em 100% -0.3em -0.1em);
}

.wt-play .wall > .tide {
  transform: scaleX(1);
  transition: transform 900ms var(--ease-out);
}

.wt-play .wall-title {
  clip-path: inset(-0.2em -0.1em -0.3em -0.1em);
  transition: clip-path 700ms var(--ease-out) 150ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .wt-intro .wall > .tide {
    transform: none;
  }

  .wt-intro .wall-title {
    clip-path: none;
  }
}