/* 신현경 · 속삭이는 이미지 — 디자인 v3 (docs/design-plan-v3.md)
   "조각을 이어 하나의 원으로": 81조각 모자이크 원, 세로쓰기 화제, 붉은 낙관.
   대담함은 첫 화면 한 곳에만. 나머지는 먹과 한지처럼 조용히. */
:root {
  --paper: #ebeae4;      /* 여신영성의 회백(#d1d4d6) + 한지 — 먹물 번진 종이의 차가운 회백 */
  --paper-2: #e0dfd7;    /* 작품 받침 */
  --paper-3: #f4f3ee;    /* 슬라이드를 다시 그린 판 */
  --ink: #1e1d1a;        /* 먹 */
  --ink-soft: #5d5c55;   /* 시시시의 회색 쪽 — 바탕 대비 5.4:1 */
  --celadon: #2a5b50;    /* 여신영성의 청록 — 링크·선택 */
  --seal: #b23a2a;       /* 붉은 낙관·원그림의 붉은 원 — 낙관과 연도에만 */
  --rule: #cfcdc4;
  --title-font: "Title Serif", "Gowun Batang", "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --body-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 34em;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* 글자 크기: 13 · 15 · 17 · 22 · 30 · 44 · 64 · 96 */
  --t-xs: 13px; --t-s: 15px; --t-m: 17px; --t-l: 22px; --t-xl: 30px; --t-2xl: clamp(32px, 4.2vw, 44px); --t-3xl: clamp(40px, 6vw, 64px); --t-4xl: clamp(48px, 8vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--t-m)/1.8 var(--body-font); word-break: keep-all; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .22em; text-decoration-thickness: 1px; cursor: pointer; }
a:hover { color: var(--celadon); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--celadon); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--paper); padding: 8px 12px; z-index: 50; }
[hidden] { display: none !important; }

/* ── 낙관 ─────────────────────────────── */
.seal { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--seal); color: #fbf5ef; font: 400 11px/1.05 var(--title-font); text-align: center; border-radius: 3px; letter-spacing: 0; box-shadow: inset 0 0 0 1.5px #fbf5ef, inset 0 0 0 2.5px var(--seal); }
.seal-lg { width: 52px; height: 52px; font-size: 19px; border-radius: 4px; box-shadow: inset 0 0 0 2px #fbf5ef, inset 0 0 0 3.5px var(--seal); }

/* ── 머리 ─────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; padding: 10px var(--gutter); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-name { text-decoration: none; display: flex; align-items: center; gap: 12px; min-height: 44px; }
.site-name .ko { font-family: var(--title-font); font-size: 21px; letter-spacing: .04em; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 26px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--t-s); color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 8px; }

main { padding: 0 var(--gutter) clamp(64px, 8vw, 104px); max-width: 1400px; margin: 0 auto; }

/* ── 첫 화면: 81조각 원 + 세로쓰기 화제 ─── */
.home-hero { display: grid; grid-template-columns: minmax(0, 7fr) auto minmax(0, 4fr); grid-template-areas: "art ins text"; gap: clamp(20px, 3.5vw, 56px); align-items: end; padding: clamp(24px, 4vw, 56px) 0 clamp(72px, 9vw, 128px); }
.home-hero-art { grid-area: art; }
.mosaic { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; aspect-ratio: 1; max-height: 82vh; max-width: 82vh; }
.tile { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
/* 원: 작품 "원 이야기"처럼 둥근 원이 조각들을 가로지른다. 원 밖은 한지에 스며든 듯 아주 옅게 */
.mosaic { position: relative; }
.mosaic { -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0 94.6%, rgba(0,0,0,.08) 95.2%); mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0 94.6%, rgba(0,0,0,.08) 95.2%); }
.mosaic-wrap { position: relative; }
/* 원의 테두리: 붓으로 한 번 그은 듯한 가는 선 */
.mosaic-wrap::after { content: ""; position: absolute; inset: 2.5%; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--seal) 55%, transparent); pointer-events: none; }
/* 단 하나의 움직임: 처음 열 때 원의 중심에서 바깥으로 조각이 드러난다 */
@media (prefers-reduced-motion: no-preference) {
  .tile { animation: tile-in .9s var(--ease) both; animation-delay: var(--d); }
  @keyframes tile-in { from { opacity: 0; transform: scale(.94); } }
}
.inscription { grid-area: ins; margin: 0; writing-mode: vertical-rl; display: flex; align-items: flex-start; gap: 18px; font-family: var(--title-font); font-weight: 400; align-self: start; padding-top: 6px; }
.ins-title { font-size: clamp(34px, 4.6vw, 60px); letter-spacing: .14em; line-height: 1; }
.ins-name { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .3em; color: var(--ink-soft); line-height: 1; }
.inscription .seal { writing-mode: horizontal-tb; margin-top: 4px; }
.home-hero-text { grid-area: text; max-width: 22rem; }
.home-en { font-family: var(--title-font); font-size: var(--t-m); letter-spacing: 0; color: var(--ink-soft); margin: 0 0 14px; }
.prose-home { margin: 0 0 22px; font-size: var(--t-s); line-height: 1.85; }
.prose-home p { margin: 0 0 .7em; }
.prose-home .t-h { font-size: var(--t-m); margin: 0 0 .5em; padding: 0; border: 0; }
.home-recent { margin: 0; font-size: var(--t-s); color: var(--ink-soft); }
.home-recent a { margin-left: 8px; font-family: var(--title-font); font-size: var(--t-l); color: var(--ink); }
/* 원래 홈의 작품 한 점: 그림(넓게) + 오른쪽 아래 캡션 — 연도·제목·그 해의 전시로 가는 길 */
.home-feature { margin: 0 0 clamp(80px, 10vw, 140px); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 56px; align-items: end; }
.home-feature-img { display: block; }
.home-feature-img img { width: 100%; height: auto; transition: opacity .4s var(--ease); }
.home-feature-img:hover img { opacity: .92; }
.home-feature-cap { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.hf-label { font-size: var(--t-xs); color: var(--ink-soft); letter-spacing: .04em; }
.hf-year { font-family: var(--title-font); font-size: var(--t-2xl); color: var(--seal); line-height: 1; }
.hf-title { font-family: var(--title-font); font-size: var(--t-l); line-height: 1.45; word-break: keep-all; text-wrap: balance; }
.hf-link { margin-top: 14px; font-size: var(--t-s); color: var(--celadon); min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
@media (max-width: 860px) {
  .home-feature { grid-template-columns: 1fr; gap: 18px; }
}
.sec-title { font-family: var(--title-font); font-weight: 400; font-size: var(--t-3xl); letter-spacing: -.02em; margin: 0 0 clamp(24px, 3vw, 40px); }
.home-index { margin-bottom: clamp(96px, 12vw, 160px); }
.home-sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.home-section { text-decoration: none; display: flex; flex-direction: column; }
.home-section-img { aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; }
.home-section-img picture, .home-section-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.home-section:hover img { transform: scale(1.03); }
.home-section-title { font-family: var(--title-font); font-size: var(--t-xl); margin: 14px 0 2px; }
.home-section-sub { font-size: var(--t-xs); color: var(--ink-soft); }
.home-section:hover .home-section-title { color: var(--celadon); }

/* ── 쪽 머리 ──────────────────────────── */
.page-head { padding: clamp(40px, 7vw, 104px) 0 0; margin-bottom: clamp(48px, 6vw, 88px); max-width: 64rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: 14px; }
.crumbs a { text-decoration: none; }
.crumbs span { opacity: .5; }
.page-title, h1 { font-family: var(--title-font); font-weight: 400; margin: 0; letter-spacing: -.02em; }
.page-title { font-size: var(--t-4xl); line-height: 1.12; }
.page-meta { margin: 20px 0 0; display: flex; gap: 20px; align-items: baseline; font-size: var(--t-s); color: var(--ink-soft); }
.page-meta .yr { font-family: var(--title-font); font-size: var(--t-xl); color: var(--seal); }

/* ── 작업 목록: 작은 작품 사진이 먼저 서는 줄 ── */
.ix { list-style: none; padding: 0; margin: 0; }
.ix li + li { border-top: 1px solid var(--rule); }
.ix-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; gap: 0 20px; align-items: center; min-height: 64px; padding: 10px 0; text-decoration: none; }
.ix-thumb { width: 76px; height: 57px; overflow: hidden; background: var(--paper-2); display: block; }
.ix-thumb picture, .ix-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ix-thumb-blank { background: var(--paper-2); }
.ix-title { font-family: var(--title-font); font-size: clamp(19px, 2vw, 26px); line-height: 1.35; }
.ix-year { font-family: var(--title-font); font-size: var(--t-m); color: var(--seal); }
.ix-count { font-size: var(--t-xs); color: var(--ink-soft); min-width: 5.5em; text-align: right; }
.ix-row:hover .ix-title { color: var(--celadon); }
.ix-row:hover .ix-thumb img { transform: scale(1.08); }
.ix-group + .ix-group { margin-top: clamp(40px, 5vw, 72px); }
.ix-group-title { font-family: var(--title-font); font-weight: 400; font-size: var(--t-l); margin: 0 0 10px; color: var(--ink-soft); }
.ix-group-title a { text-decoration: none; }
.index-nav { margin: 0 0 clamp(64px, 8vw, 112px); max-width: 64rem; }
/* 마우스를 올리면 작품이 커서 옆에 크게 (손으로 하는 동작에 답하는 움직임) */
.ix-preview { position: fixed; z-index: 30; left: 0; top: 0; width: min(340px, 28vw); pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: opacity .2s var(--ease); background: var(--paper-2); padding: 10px; }
.ix-preview.on { opacity: 1; }
.ix-preview img { width: 100%; height: auto; }

/* ── 본문 글 ──────────────────────────── */
.prose { max-width: var(--measure); margin: 0 0 clamp(48px, 6vw, 80px); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--celadon); }
.prose .t-lead { font-family: var(--title-font); font-size: clamp(20px, 2vw, 25px); line-height: 1.7; margin-bottom: 1.2em; }
.prose .t-sub { font-family: var(--title-font); font-size: var(--t-m); letter-spacing: 0; color: var(--ink-soft); margin-bottom: 1.2em; }
.prose .t-h { font-family: var(--title-font); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; margin: 2.2em 0 .7em; }
.prose > .t-h:first-child { margin-top: 0; }
.prose .t-h a { color: var(--ink); text-decoration-color: var(--rule); }
.prose .t-h a:hover { color: var(--celadon); text-decoration-color: currentColor; }
.prose .t-verse { margin: 1.4em 0 1.8em; font-family: var(--title-font); font-size: 19px; line-height: 1.85; }
.prose .t-verse p { margin: 0 0 .25em; }
.prose .t-note { font-size: var(--t-xs); color: var(--ink-soft); margin-top: -.4em; }
.prose .t-quote { margin: 1.8em 0; padding-left: 1em; border-left: 2px solid var(--seal); font-family: var(--title-font); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.55; }
.prose .t-quote p { margin: 0; }
.prose .t-link { display: flex; flex-direction: column; margin-bottom: 1.2em; }
.prose .t-link a { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; color: var(--celadon); }
.prose .t-url { font-size: var(--t-xs); color: var(--ink-soft); word-break: break-all; margin-top: -8px; }
.t-rows { list-style: none; padding: 0; margin: 0 0 1.8em; }
.t-rows li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 2px 20px; padding: 10px 0; border-top: 1px solid var(--rule); line-height: 1.7; }
.t-rows .t-yr { font-family: var(--title-font); color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 목록 하나의 모양: 연도는 언제나 왼쪽 열 (끝에 붙은 "/2025"도 화면에서는 왼쪽으로), 작품 사진은 오른쪽 끝 */
.t-rows-end li { grid-template-columns: 7rem minmax(0, 1fr); }
.t-rows-end .t-yr { order: -1; }
.t-sl { display: none; }
.t-rows li.t-linked { display: block; padding: 0; border-top: 1px solid var(--rule); }
.t-rows .t-work { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 60px; gap: 2px 20px; align-items: center; padding: 8px 0; text-decoration: none; min-height: 64px; }
.t-rows .t-work .t-thumb { order: 3; }
.t-rows .t-work .t-yr { order: 0; }
.t-rows .t-work .t-tx { order: 1; }
.t-rows-end .t-work .t-yr { order: 0; }
.t-thumb { width: 60px; height: 60px; background: var(--paper-2); overflow: hidden; display: block; }
.t-thumb picture, .t-thumb img { width: 100%; height: 100%; object-fit: cover; }
.t-work .t-tx { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .22em; }
.t-work:hover .t-tx { color: var(--celadon); text-decoration-color: currentColor; }
.t-num { list-style: none; padding: 0; margin: 0 0 1.4em; }
.t-num li { padding: 8px 0; border-top: 1px solid var(--rule); }
.prose .t-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 24px 36px; margin: 1em 0 2em; }
.prose .t-label { font-family: var(--title-font); font-weight: 400; font-size: var(--t-l); margin: 0 0 10px; }
.prose .t-col p { margin: 0 0 .5em; }
.prose .t-bullets { list-style: none; padding: 0; margin: 0 0 1em; }
.prose .t-bullets li { padding: 3px 0 3px 16px; position: relative; }
/* 책 목차: 짧은 줄 여러 개를 넓은 화면에서 두 단으로 — 긴 세로 줄을 피한다 */
.prose .t-toc { list-style: none; padding: 0; margin: 0 0 1em; columns: 2 15em; column-gap: 2.5em; font-size: var(--t-s); }
.prose .t-toc li { padding: 4px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.prose .t-toc .t-toc-part { border-bottom: 0; padding-top: 18px; font-size: var(--t-xs); letter-spacing: .04em; color: var(--celadon); }
.prose .t-toc .t-toc-part:first-child { padding-top: 0; }
.prose .t-bullets li::before { content: ""; position: absolute; left: 0; top: .85em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--seal); }
.prose-wide { max-width: 64rem; }
.text-only .prose { max-width: 50rem; }
.page-links { list-style: none; padding: 0; margin: 0 0 56px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-links { gap: 4px 28px; }
.page-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-s); color: var(--celadon); }

/* ── 원래 화면 구성대로 ───────────────── */
.composed { margin-bottom: clamp(56px, 7vw, 96px); }
.composed > * + * { margin-top: clamp(48px, 6vw, 96px); }
.composed > .prose { margin-bottom: 0; }
.composed > .prose + .prose { margin-top: 1em; }
.fig { margin: 0; }
.fig > a { display: block; cursor: zoom-in; overflow: hidden; }
.fig img { width: 100%; transition: transform 1.2s var(--ease); }
.fig > a:hover img { transform: scale(1.015); }
.fig figcaption { margin-top: 10px; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-soft); }
.fig figcaption p { margin: 0; }
.fig figcaption .t-lead { font: inherit; }
.fig figcaption .t-h { font-family: var(--title-font); font-size: var(--t-l); margin: 0 0 4px; color: var(--ink); }
.figs { display: grid; gap: clamp(14px, 2vw, 28px); align-items: start; }
.figs-1 { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.figs-1 img { max-height: 80vh; width: auto; max-width: 100%; }
.figs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figs-wide { max-width: none; background: var(--paper-2); padding: clamp(20px, 5vw, 72px); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.figs-wide img { max-height: 84vh; width: auto; margin: 0 auto; }
.figs-wide .fig figcaption { max-width: 820px; margin-left: auto; margin-right: auto; }
.figs-extra { padding-top: 24px; border-top: 1px solid var(--rule); }
/* 작품 카드: 받침 위에 작품 전체 (자르지 않음). 목록 카드(다른 페이지로 가는 카드)만 틀에 맞춰 자른다 */
.figs-cards { max-width: 1120px; gap: 48px clamp(16px, 3vw, 40px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figs-cards .fig > a { aspect-ratio: 4 / 3; background: var(--paper-2); display: flex; align-items: center; justify-content: center; }
.figs-cards .fig picture { width: 100%; height: 100%; }
.figs-cards .fig img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.figs-linkcards .fig img { object-fit: cover; padding: 0; }
.figs-linkcards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
.figs-cards .fig figcaption { font-size: var(--t-s); }
.fig figcaption .t-h, .fig figcaption .t-h a, .fig figcaption strong { font: 400 var(--t-l)/1.4 var(--title-font); text-decoration: none; color: var(--ink); }
.fig figcaption .t-h a:hover { color: var(--celadon); }
/* 404 */
.notfound { padding: clamp(48px, 9vw, 120px) 0; max-width: 40rem; }
.nf-circle { display: block; width: 120px; height: 120px; margin-bottom: 24px; }
.nf-circle .blank-circle { width: 100%; }
.nf-text { color: var(--ink-soft); margin: 20px 0 28px; }
.nf-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 28px; }
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--title-font); font-size: var(--t-l); }
/* 이메일 주소는 줄바꿈으로 쪼개지 않는다 */
a[href^="mailto:"] { overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
/* 끝에 붙은 "/2004 외": 연도는 왼쪽 열, "외"는 본문 바로 뒤 (원래 글 순서는 그대로) */
.t-rows-end li:has(.t-tx-tail) { display: flex; flex-wrap: wrap; gap: 2px 0; }
.t-rows-end li:has(.t-tx-tail) .t-yr { flex: 0 0 calc(7rem + 20px); }
.t-rows-end li:has(.t-tx-tail) .t-tx { flex: 0 1 auto; }
.t-tx-tail { margin-left: .35em; }
/* 줄 전체의 캡션 */
.row-cap { font-size: var(--t-s); color: var(--ink-soft); margin-top: 12px !important; }
.row-cap .t-h { font: 400 var(--t-l)/1.4 var(--title-font); color: var(--ink); margin: 0 0 4px; }
.row-cap .t-h a { text-decoration: none; color: var(--ink); }
.row-cap .t-sec { display: block; }
.row-cap p { margin: 0; }
/* 받침 띠 안: 캡션을 그림 폭에 붙인다 */
.figs-wide .fig { display: table; margin: 0 auto; }
.figs-wide .fig figcaption { display: table-caption; caption-side: bottom; }
/* 홈 첫 화면 글은 15px, 줄 간격 1.6 */
.prose-home, .prose-home * { font-size: var(--t-s); line-height: 1.6; }
.prose-home .t-h, .prose-home .t-h a { font-size: var(--t-m); }
.ix-thumb-blank, .t-thumb:empty { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.blank-circle { width: 60%; height: auto; }
/* 혼자 있는 작품: 받침 띠 안 가운데, 원래 크기보다 키우지 않고 최대 화면 높이 80% */
.figs-wide .fig { max-width: none; }
.figs-wide.figs-1 { max-width: none; }
.figs-wide .fig > a { display: flex; justify-content: center; }
.figs-wide .fig img { width: auto; max-width: 100%; max-height: 80vh; }
/* 나란한 그림: 높이를 맞춘 한 줄 (비율대로 폭을 나눠 자르지 않는다) */
.figs-row { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 28px); max-width: none; }
.figs-row > .fig { flex: var(--r, 1) 1 0; min-width: 0; }
/* 받침 띠가 연달아 오면 하나로 잇는다 */
.composed > .figs-wide + .figs-wide { margin-top: 0; padding-top: 0; }
.pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 88px); align-items: start; }
.pair-media-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pair-media-right .pair-media { order: 2; }
.pair-media { position: sticky; top: 96px; }
.pair-media.figs-3, .pair-media.figs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pair-text { margin: 0; max-width: 32rem; align-self: center; }
.hero { position: relative; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.hero-img .fig img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.hero-text { position: relative; max-width: 32rem; margin: -120px 0 0 var(--gutter); padding: clamp(24px, 3vw, 44px); background: var(--paper); }
.hero-text > :last-child { margin-bottom: 0; }
.card-blank { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink-soft); }
.card-blank svg { width: 46%; height: auto; }
.card-blank svg path { stroke-width: 1.5; }
.ix-count { font-variant-numeric: tabular-nums; }

/* ── 넓은 화면: 왼쪽 레일 (소제목) + 본문 — 이력·전시·논문 같은 긴 목록과 긴 글 ── */
@media (min-width: 1100px) {
  .prose:has(> .t-sec) { max-width: 76rem; }
  .t-sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .t-sec + .t-sec { margin-top: clamp(40px, 4vw, 64px); }
  .t-sec > .t-h { position: sticky; top: 96px; margin: 0; }
  .t-sec-body > :first-child { margin-top: 0; }
  .t-sec-body { max-width: 46rem; }
  /* 캡션·카드·슬라이드 안에서는 레일을 쓰지 않는다 */
  .fig .t-sec, .ti .t-sec, .pair-text .t-sec, .hero-text .t-sec, .prose-home .t-sec { display: block; }
  .fig .t-sec > .t-h, .pair-text .t-sec > .t-h, .hero-text .t-sec > .t-h { position: static; margin: 0 0 6px; }
  /* 규칙 하나: 소제목이 있으면 레일, 없으면 같은 본문 선(3/11)에 34em 폭으로. 전체 폭 글은 없다 */
  .composed > .prose:not(:has(> .t-sec)), .text-only .prose:not(:has(> .t-sec)) { margin-left: calc(3 / 11 * (100% - 56px) + 56px); max-width: 34em; }
  .prose:has(> .t-sec) > :not(.t-sec) { margin-left: calc(3 / 11 * (100% - 56px) + 56px); max-width: 34em; }
  .composed > .ti-wrap, .ti-wrap { margin-left: calc(3 / 11 * (100% - 56px) + 56px); }
}

/* ── 슬라이드·도표를 웹 글로 다시 그린 것 ── */
.ti { max-width: 64rem; padding: clamp(24px, 4vw, 48px); background: var(--paper-3); }
.ti-title { font-family: var(--title-font); font-weight: 400; font-size: var(--t-xl); margin: 0 0 clamp(20px, 3vw, 32px); }
.ti h4 { font-family: var(--title-font); font-weight: 400; font-size: 19px; margin: 0 0 6px; }
.ti h4::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--seal); transform: rotate(45deg) translateY(-3px); margin-right: 10px; }
.ti ul { list-style: none; padding: 0; margin: 0; }
.ti li { line-height: 1.75; }
.ti li.ti-dash { position: relative; padding-left: 18px; }
.ti li.ti-dash::before { content: ""; position: absolute; left: 0; top: .85em; width: 9px; height: 1px; background: var(--seal); }
.ti li.ti-sub { padding-left: 18px; font-size: var(--t-s); color: var(--ink-soft); }
.ti-block + .ti-block { margin-top: 22px; }
.ti-flow-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 40px); }
.ti-srcs { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ti-src { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 14px; }
.ti-box { display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; background: var(--paper); min-height: 96px; }
.ti-box strong { font-family: var(--title-font); font-weight: 400; font-size: 26px; color: var(--celadon); }
.ti-box span { font-size: var(--t-xs); color: var(--ink-soft); }
/* 화살표는 글자 대신 선과 삼각형으로 */
.ti-arrow { position: relative; font-size: 14px; line-height: 1.5; padding-right: 28px; }
.ti-arrow::after { content: ""; position: absolute; right: 2px; top: 50%; width: 16px; height: 1px; background: var(--seal); }
.ti-arrow::before { content: ""; position: absolute; right: 0; top: calc(50% - 4px); border: 4px solid transparent; border-left: 6px solid var(--seal); border-right: 0; }
.ti-target { padding: clamp(18px, 2.4vw, 28px); background: var(--paper); border-left: 2px solid var(--celadon); }
.ti-table-wrap { overflow-x: auto; }
.ti-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ti-table th, .ti-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--rule); }
.ti-table thead th { font-weight: 400; color: var(--ink-soft); border-top: 0; }
.ti-table tbody th { font-weight: 400; color: var(--seal); white-space: nowrap; }
.ti-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px 32px; }
.ti-blocks .ti-block + .ti-block { margin-top: 0; }
.ti-orig { margin: 24px 0 0; }
.ti-orig-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-xs); color: var(--ink-soft); }
.ti-cap { margin-top: 10px; font-size: var(--t-xs); color: var(--ink-soft); }

/* ── 오래된… 연작: 연도가 크게 서는 연대기 ── */
.tl { list-style: none; padding: 0; margin: 0 0 clamp(64px, 8vw, 112px); }
.tl-item + .tl-item { border-top: 1px solid var(--rule); }
.tl-row { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 5fr) auto minmax(120px, 2fr); gap: clamp(16px, 3vw, 40px); align-items: center; padding: clamp(16px, 2.2vw, 26px) 0; text-decoration: none; }
.tl-year { white-space: nowrap; font-family: var(--title-font); font-size: clamp(30px, 6vw, 84px); line-height: 1; letter-spacing: -.03em; color: var(--seal); }
.tl-title { font-family: var(--title-font); font-size: clamp(18px, 1.8vw, 24px); }
.tl-count { font-size: var(--t-xs); color: var(--ink-soft); text-align: right; }
.tl-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.tl-img picture { width: 100%; height: 100%; }
.tl-img img { object-fit: cover; width: 100%; height: 100%; transition: transform 1s var(--ease); }
.tl-row:hover .tl-img img { transform: scale(1.04); }
.tl-row:hover .tl-title { color: var(--celadon); }
.series-sub, .card-sub { display: block; font-size: var(--t-xs); color: var(--ink-soft); margin-top: 4px; }

/* ── 이전 / 다음 ─────────────────────── */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; padding-top: 24px; border-top: 1px solid var(--rule); }
.pager a { text-decoration: none; min-height: 44px; }
.pager-prev, .pager-next { display: flex; flex-direction: column; gap: 2px; }
.pager-next { text-align: right; }
.pager-dir { font-size: var(--t-xs); color: var(--ink-soft); }
.pager-title { font-family: var(--title-font); font-size: clamp(18px, 2vw, 24px); }
.pager a:hover .pager-title { color: var(--celadon); }
.pager-up { display: inline-flex; align-items: center; font-size: var(--t-m); text-decoration: underline !important; text-decoration-color: var(--rule) !important; text-underline-offset: .22em; }
.pager-up:hover { color: var(--celadon); }

/* ── 예전 갤러리 (배치 정보가 없을 때) ── */
.gallery { list-style: none; padding: 0; margin: 0 0 clamp(56px, 7vw, 96px); columns: 3 280px; column-gap: clamp(16px, 2.4vw, 32px); }
.gallery li { break-inside: avoid; margin: 0 0 clamp(16px, 2.4vw, 32px); }
.gallery figure { margin: 0; }
.gallery a { display: block; cursor: zoom-in; }
.lead { margin: 0 0 clamp(40px, 6vw, 80px); background: var(--paper-2); padding: clamp(16px, 4vw, 56px); }
.lead a { display: block; cursor: zoom-in; }
.lead picture, .lead img { margin: 0 auto; max-height: 78vh; width: auto; }
.cards { list-style: none; padding: 0; margin: 0 0 clamp(56px, 7vw, 96px); display: grid; gap: 48px 24px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.card a { text-decoration: none; display: block; }
.card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; }
.card-img picture { width: 100%; height: 100%; }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.card-n { display: block; margin-top: 12px; font-size: var(--t-xs); color: var(--ink-soft); }
.card-title { display: block; font-family: var(--title-font); font-size: 19px; line-height: 1.45; margin-top: 4px; }
.block-label { font-size: var(--t-s); color: var(--ink-soft); margin: 0 0 20px; font-weight: 400; }

/* ── 바닥 ─────────────────────────────── */
.site-footer { padding: clamp(56px, 7vw, 96px) var(--gutter) 28px; max-width: 1400px; margin: 0 auto; }
.foot-label { font-size: var(--t-s); color: var(--ink-soft); margin: 0 0 10px; }
.foot-mail { display: inline-block; font-family: var(--title-font); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.01em; text-decoration: none; word-break: break-all; }
.foot-mail:hover { color: var(--celadon); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(40px, 6vw, 72px); padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--t-xs); color: var(--ink-soft); }
.foot-row nav { display: flex; gap: 20px; }
.foot-row a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* ── 작품 크게 보기 ───────────────────── */
.lb { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 98%, transparent); display: none; align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb img { max-width: calc(100vw - 2 * var(--gutter) - 96px); max-height: calc(100vh - 120px); width: auto; height: auto; }
.lb button { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.lb button svg { width: 24px; height: 24px; }
.lb .lb-close { top: 12px; right: 12px; }
.lb .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb .lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: var(--t-xs); color: var(--ink-soft); }

/* ── 좁은 화면 ────────────────────────── */
@media (max-width: 1000px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "art ins" "text text"; }
  .home-hero-text { max-width: 34rem; }
}
@media (max-width: 900px) {
  .home-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair, .pair-media-right { grid-template-columns: 1fr; }
  .pair-media-right .pair-media { order: 0; }
  .pair-media { position: static; }
  .figs-3, .figs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-row { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "year img" "title img"; gap: 6px 16px; }
  .tl-year { grid-area: year; font-size: 40px; }
  .tl-title { grid-area: title; }
  .tl-img { grid-area: img; width: 112px; }
  .tl-count { display: none; }
  .hero-text { margin: -48px 12px 0; }
}
@media (max-width: 600px) {
  .site-nav ul { gap: 0 16px; }
  .site-name .ko { font-size: 18px; }
  .home-hero { gap: 14px; }
  .mosaic { gap: 2px; }
  .ins-title { font-size: 26px; }
  .ins-name { font-size: 17px; }
  .seal-lg { width: 40px; height: 40px; font-size: 15px; }
  .ix-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 0 12px; }
  .ix-thumb { width: 60px; height: 45px; }
  .ix-count { display: none; }
  .t-rows li, .t-rows-end li { grid-template-columns: 1fr; gap: 0; }
  .t-rows .t-work, .t-rows-end .t-work { grid-template-columns: 48px minmax(0, 1fr); }
  .t-rows .t-work .t-yr { grid-column: 2; }
  .t-thumb { width: 48px; height: 48px; grid-row: span 2; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-up { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .lb img { max-width: calc(100vw - 24px); }
  .ti-flow-grid, .ti-src { grid-template-columns: 1fr; }
  /* 휴대폰: 작품은 한 줄에 한 점, 크게 */
  .figs-2, .figs-3, .figs-4, .pair-media.figs-3, .pair-media.figs-4, .figs-cards, .figs-linkcards { grid-template-columns: 1fr; }
  .figs-row { flex-direction: column; }
  .figs-row > .fig { flex: none; width: 100%; }
  .t-rows .t-work { grid-template-columns: minmax(0, 1fr) 48px; }
  .t-rows .t-work .t-yr { grid-column: 1; }
  .t-rows-end li { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 1023px) {
  .figs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }