/* ==========================================================
   EIZIN SUZUKI WORKS
   색상, 글꼴, 여백을 바꾸려면 아래 :root 값만 수정하세요.
   ========================================================== */
:root {
  --background: #ffffff;
  --foreground: #171717;
  --muted: #737373;
  --intro-background: #fafafa;
  --search-background: #111111;
  --line: #d4d4d4;

  --font-main: "DM Mono", "IBM Plex Sans KR", "Noto Sans JP", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: 1rem;
  --grid-item-size: 7.875rem;
  --caption-h: 19px;

  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-magic: cubic-bezier(.33, 0, 0, 1);
  --ease-curtain: cubic-bezier(.8, 0, 0, 1);
  --ease-soft: cubic-bezier(.23, 1, .32, 1);
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(.968848rem + .104058vw); -webkit-text-size-adjust: 100%; }
@media (max-width: 479px) { html { font-size: 15px; } :root { --grid-item-size: 5.4375rem; } }
@media (min-width: 480px) and (max-width: 767px) { :root { --grid-item-size: 5.4375rem; } }
@media (min-width: 1536px) { :root { --gutter: 1.5rem; } }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-main);
  font-size: .875rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; border-radius: 0; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
p, h1, h2, dl, dd { margin: 0; }
h1, h2 { font-size: inherit; font-weight: 400; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* 페이지 전환 */
.site-frame { position: fixed; inset: 0; z-index: 20000; width: 100%; height: 100%; border: 0; background: #fff; }
.page-fade { position: fixed; inset: 0; z-index: 10000; background: var(--background); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.page-fade.is-on { opacity: 1; pointer-events: auto; }

/* ---------- 머리글 ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  padding: 1rem var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font-size: .875rem; text-transform: uppercase;
  color: #fff; mix-blend-mode: difference;
  transition: opacity 1s ease;
}
.site-header.is-hidden { opacity: 0; pointer-events: none; }
.site-title { position: relative; justify-self: start; }
/* 머리글 높이가 변하지 않도록 제목 아래에 띄워 둡니다. */
.site-title__credit {
  position: absolute; top: 100%; left: 0; margin-top: .125rem;
  font-size: 10px; line-height: 1; letter-spacing: .02em; text-transform: none; white-space: nowrap;
  opacity: .55;
}
.site-nav { display: flex; align-items: center; gap: 1rem; }
.menu-button { display: none; justify-self: end; text-transform: uppercase; }

/* 대괄호 + 밑줄 + 채움 호버 링크 */
.label-row { display: inline-flex; align-items: center; gap: .375rem; text-transform: uppercase; }
.label-fill {
  position: relative; display: inline-flex; align-items: center; overflow: hidden;
  padding: .25rem; line-height: 1;
  transition: color .15s;
}
.label-fill > span { position: relative; z-index: 1; }
.label-fill::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out-expo);
}
.is-current .label-fill > span { text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) {
  a:hover > .label-fill::after, a:hover .label-fill::after, button:hover .label-fill::after { transform: scaleX(1); }
  a:hover > .label-fill, a:hover .label-fill, button:hover .label-fill { color: #000; }
  a.is-current:hover .label-fill::after { transform: scaleX(0); }
  a.is-current:hover .label-fill { color: inherit; }
}
/* 혼합 모드 밖(흰 바탕)에서 쓰는 검정 채움 */
.label-fill--dark::after { background: var(--foreground); }
@media (hover: hover) {
  a:hover .label-fill--dark, button:hover .label-fill--dark { color: #fff; }
}

/* 음악 켜기/끄기 */
.sound-toggle {
  position: fixed; top: .35rem; right: calc(var(--gutter) - 12px); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: #fff; mix-blend-mode: difference;
  transition: opacity .2s;
}
@media (hover: hover) { .sound-toggle:hover { opacity: .6; } }
/* 오른쪽 위의 Close, 메뉴 버튼과 겹치지 않게 옆으로 비킵니다. */
body:has(.detail-header) .sound-toggle { right: 6.5rem; }
@media (max-width: 900px) { body:not(:has(.detail-header)) .sound-toggle { right: 3.5rem; } }
/* 입장 화면과 인트로에는 메뉴가 없으므로 오른쪽 끝에 둡니다. */
body:has(.site-header.is-hidden) .sound-toggle { right: calc(var(--gutter) - 12px) !important; }

/* 모바일 메뉴 */
.mobile-menu {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--foreground); color: var(--background);
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  padding: var(--gutter); font-size: 1.25rem; text-transform: uppercase;
  visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .menu-button { display: block; }
  /* 작은 휴대폰에서도 제목이 헤드폰 아이콘과 겹치지 않게 줄입니다. */
  .site-title { font-size: min(.875rem, 3.3vw); }
}

/* ---------- 텍스트/이미지 등장 ---------- */
.js .reveal-block { visibility: hidden; }
.reveal-block { --reveal-delay: 0ms; position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.reveal-block::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: currentColor; transform: translateX(-101%);
}
.reveal-block.is-inview { visibility: visible; }
.reveal-block.is-inview::before { animation: block-wipe 1.1s var(--ease-magic) var(--reveal-delay) both; }
.reveal-block > .reveal-text { display: inline-block; }
.reveal-block.is-inview > .reveal-text { animation: block-text 1.1s linear var(--reveal-delay) both; }
@keyframes block-wipe { 0% { transform: translateX(-101%); } 50% { transform: translateX(0); } 100% { transform: translateX(105%); opacity: 0; } }
@keyframes block-text { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

.js .reveal-image { visibility: hidden; }
.reveal-image { overflow: hidden; contain: paint; }
.reveal-image.is-inview { visibility: visible; }
.reveal-image img, .reveal-image canvas {
  clip-path: inset(100% 0 0);
  transform: scale(1.15);
  transition: clip-path 1s var(--ease-magic), transform 1.4s var(--ease-magic);
}
.reveal-image.is-inview img, .reveal-image.is-inview canvas { clip-path: inset(0); transform: none; }

/* ---------- 인트로 ---------- */
.intro { position: fixed; inset: 0; z-index: 8500; background: var(--intro-background); }
.intro__layer {
  position: absolute; inset: 0; padding: var(--gutter);
  display: flex; align-items: center; justify-content: center; text-align: center;
  visibility: hidden;
}
.intro__layer p { position: relative; max-width: 54ch; }
.intro__date {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: .5rem;
  font-size: .75rem; white-space: nowrap;
  visibility: hidden;
}
.intro__gate {
  position: absolute; inset: 0; padding: var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}

/* 입장 화면의 CD: 케이스는 고정, 디스크만 회전합니다. */
.cd {
  --cd-height: min(32.2vh, 43.4vw, 18.2rem);
  position: relative; flex-shrink: 0;
  width: calc(var(--cd-height) * 1.15); height: var(--cd-height);
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #f3f4f5 0%, #e3e5e7 55%, #eceef0 100%);
  border: 1px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(23 23 23 / .08), 0 24px 48px -20px rgb(23 23 23 / .35);
  cursor: pointer;
}
.cd__spine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 8%;
  background: linear-gradient(90deg, #e9ebed, #f6f7f8 45%, #d9dcdf 85%, #eceef0);
  border-right: 1px solid rgb(23 23 23 / .1);
}
.cd__notch { position: absolute; left: 54%; width: 9%; height: 2.4%; background: #d3d6d9; border-radius: 2px; transform: translateX(-50%); }
.cd__notch--top { top: 1.4%; }
.cd__notch--bottom { bottom: 1.4%; }
.cd__disc {
  position: absolute; top: 5%; left: 54%;
  width: calc(var(--cd-height) * .9); height: calc(var(--cd-height) * .9);
  margin-left: calc(var(--cd-height) * -.45);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(23 23 23 / .55), 0 2px 8px rgb(23 23 23 / .2);
}
.cd__label {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  animation: cd-spin 15s linear infinite;
  -webkit-user-drag: none;
}
.cd__hub {
  position: absolute; top: 50%; left: 50%;
  width: 32%; height: 32%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #f4f5f6 0 28%, #c9ccd0 29% 30%, #eceef0 31% 58%, #dfe1e4 59% 62%, #f7f8f9 63% 100%);
  box-shadow: 0 0 0 1px rgb(23 23 23 / .25), inset 0 1px 3px rgb(23 23 23 / .2);
}
@keyframes cd-spin { to { transform: rotate(360deg); } }
@media (hover: hover) { .cd:hover .cd__label { animation-duration: 9s; } }
.intro__skip { position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%); }

/* ---------- 그리드 (첫 화면) ---------- */
.grid-stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; visibility: hidden; cursor: grab; }
.grid-stage.is-ready { visibility: visible; }
.grid-stage.is-locked { pointer-events: none; }
.grid-content { position: relative; width: 100%; height: 100%; will-change: transform; }
.grid-item { position: absolute; top: 0; left: 0; display: block; width: var(--grid-item-size); will-change: transform; transform: translate3d(-200vw, -200vh, 0); -webkit-user-drag: none; }
.grid-card {
  /* 작품 비율 그대로 보이도록 정사각 칸 안에 맞추고 아래쪽으로 정렬합니다. */
  display: flex; flex-direction: column; justify-content: flex-end;
  width: calc(var(--grid-item-size) * var(--fit-w, 1));
  height: calc(var(--grid-item-size) + var(--caption-h));
  margin-inline: auto;
  transition: transform .5s ease-out;
}
@media (hover: hover) and (min-width: 768px) { .grid-item:hover .grid-card { transform: scale(1.08); } }
.grid-caption {
  display: flex; align-items: center; gap: .5rem;
  overflow: hidden; margin-bottom: .5rem;
  flex-shrink: 0;
  font-size: 11px; line-height: 1; white-space: nowrap;
  opacity: 0; visibility: hidden;
}
.grid-stage.captions-on .grid-caption { opacity: 1; visibility: visible; }
.grid-caption__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.grid-media { position: relative; flex-shrink: 0; width: 100%; height: calc(var(--grid-item-size) * var(--fit-h, 1)); overflow: hidden; background: #f4f4f4; }
.grid-media img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* 휴대폰은 칸이 좁아 작품 번호만 보여줍니다. */
@media (max-width: 767px) {
  .grid-caption { margin-bottom: .25rem; font-size: 10px; }
  .grid-caption__title { display: none; }
  .grid-card { --caption-h: 14px; }
}

/* 그리드 위 검색/필터 */
.grid-tools {
  position: fixed; top: 5rem; left: 0; right: 0; z-index: 9997;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column; gap: 1.25rem;
  text-transform: uppercase;
  color: #fff; mix-blend-mode: difference;
  opacity: 0; pointer-events: none; transition: opacity 1s ease;
}
.grid-tools.is-on { opacity: 1; pointer-events: auto; }
/* 검색 화면에서는 위쪽 조작부를 고정해 스크롤하는 작품과 겹치지 않게 합니다. */
.grid-tools.is-open { mix-blend-mode: normal; top: 0; padding-top: 5rem; padding-bottom: 1rem; background: var(--search-background); }
.tools-row { display: flex; align-items: center; gap: 1.25rem; }
.tools-search { margin-left: auto; display: flex; align-items: center; gap: .75rem; min-width: 0; border-bottom: 1px solid transparent; }
.tools-search.is-open { border-bottom-color: currentColor; }
.tools-search__box { width: 0; opacity: 0; overflow: hidden; transition: width .3s ease, opacity .3s ease; }
.tools-search.is-open .tools-search__box { width: 14rem; opacity: 1; }
@media (min-width: 768px) { .tools-search.is-open .tools-search__box { width: 18rem; } }
.tools-search input { width: 100%; height: 1.5rem; outline: 0; appearance: none; -webkit-appearance: none; }
.tools-search input::-webkit-search-cancel-button { display: none; }
.tools-filters { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height .3s ease-out, opacity .3s ease-out; text-transform: none; }
.tools-filters.is-open { max-height: 10rem; opacity: 1; pointer-events: auto; }

.check-button { display: inline-flex; align-items: center; gap: .375rem; text-align: left; white-space: nowrap; line-height: 1; }
.check-mark { display: inline-flex; align-items: center; }
.check-mark i { display: inline-block; width: .25em; height: .25em; margin: 0 .125rem; background: currentColor; transform: scale(0); transition: transform .2s; }
[aria-pressed="true"] .check-mark i { transform: scale(1); }

.search-layer {
  position: fixed; inset: 0; z-index: 9996;
  background: var(--search-background); color: #fff;
  padding: 11rem var(--gutter) 2.5rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.search-layer.is-open { opacity: 1; visibility: visible; }
.search-layer.has-filters { padding-top: 14rem; }
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 2rem 1.5rem; }
.search-result { display: block; transition: transform .3s; }
.search-result:hover { transform: scale(.98); }
.search-result img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.search-result__meta { display: flex; gap: .5rem; margin-bottom: .5rem; font-size: 11px; line-height: 1; white-space: nowrap; color: #acacac; }
.search-result__meta span:last-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.search-empty { min-height: 50dvh; display: flex; align-items: center; justify-content: center; text-align: center; color: #acacac; }
@media (max-width: 767px) { .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 리스트 ---------- */
.list-page { padding-top: 5.5rem; padding-bottom: 5rem; min-height: 100dvh; }
.list-tools { position: relative; z-index: 3; padding: 0 var(--gutter); display: flex; align-items: center; gap: 1.25rem; text-transform: uppercase; }
.list-tools > .tools-search input { height: 1.5rem; }
.list-body { position: relative; margin-top: .75rem; }
.list-filters {
  position: absolute; left: var(--gutter); top: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(2, auto); gap: .75rem 1.5rem; justify-content: start;
}
.list-filters .check-button { overflow: hidden; }
.list-filters .check-inner { display: inline-flex; align-items: center; gap: .375rem; transform: translateY(110%); transition: transform .5s ease-in-out; pointer-events: none; }
.list-filters.is-open .check-inner { transform: none; pointer-events: auto; }
.list-filters:not(.is-open) { pointer-events: none; }
.work-rows { width: 100%; transition: width 1s ease-in-out; margin-left: auto; }
.work-rows.is-narrow { width: 63%; }
.work-row {
  position: relative; display: block; height: 1.5rem;
  padding: 0 var(--gutter);
  letter-spacing: -.03em;
}
.work-row__bar { position: absolute; inset: 0; background: var(--foreground); opacity: 0; pointer-events: none; }
.work-row__name {
  position: absolute; top: 50%; left: 50vw; z-index: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  transition: left 1s ease-in-out, transform 1s ease-in-out;
}
.work-rows.is-narrow .work-row__name { left: 0; padding-left: .5rem; transform: translate(0, -50%); }
.work-row__thumb {
  position: absolute; right: 5rem; bottom: -50%; z-index: 2;
  width: 6rem; height: auto; max-height: 6rem; object-fit: contain;
  opacity: 0; transform: scale(.9); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.work-row:hover .work-row__bar, .work-row:focus-visible .work-row__bar { opacity: 1; }
.work-row:hover .work-row__name, .work-row:focus-visible .work-row__name { color: var(--background); }
.work-row:hover .work-row__thumb, .work-row:focus-visible .work-row__thumb { opacity: 1; transform: none; }
.list-empty { padding: 1.25rem var(--gutter); color: var(--muted); font-size: 1rem; transition: transform .6s ease-in-out; }
.list-empty.is-shifted { transform: translateY(7rem); }
.list-empty button { display: block; margin-top: .75rem; text-transform: uppercase; color: var(--foreground); }
@media (max-width: 767px) {
  /* 존을 한 줄에 2개씩 놓습니다. */
  .list-filters { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .5rem; font-size: min(.6875rem, 2.6vw); padding: 0; margin: 0 var(--gutter); max-height: 0; overflow: hidden; transition: max-height .3s ease-in; }
  .list-filters.is-open { max-height: 9rem; margin-bottom: .75rem; }
  .list-filters .check-button { min-height: 2rem; }
  .work-rows.is-narrow { width: 100%; }
  .work-row { height: auto; padding: .875rem var(--gutter); }
  .work-row::after { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgb(23 23 23 / .1); }
  .work-row__name, .work-rows.is-narrow .work-row__name { position: static; transform: none; padding: 0; white-space: normal; }
  .work-row__bar, .work-row__thumb { display: none; }
  .work-row:hover .work-row__name { color: inherit; }
}

/* ---------- 갤러리 ---------- */
.gallery-stage { position: relative; height: 100dvh; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.gallery-stage[data-dragging="true"] { cursor: grabbing; }
.gallery-stage:focus { outline: 0; }
.proposal-page { background: #000; }
.gallery-stage canvas { display: block; width: 100%; height: 100%; }
.gallery-cursor {
  position: fixed; top: 0; left: 0; z-index: 50;
  color: #fff; mix-blend-mode: difference;
  font-size: .75rem; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; visibility: hidden; opacity: 0;
}
.gallery-caption { display: none; }
@media (pointer: coarse) {
  .gallery-caption { display: block; position: absolute; left: var(--gutter); bottom: 1.25rem; z-index: 3; color: #fff; mix-blend-mode: difference; font-size: .75rem; text-transform: uppercase; pointer-events: none; }
}
.gallery-dom { position: absolute; inset: 0; }
.gallery-dom img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; will-change: transform; -webkit-user-drag: none; }

/* ---------- 작품 상세 ---------- */
.detail-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  padding: 1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; mix-blend-mode: difference; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.detail-main {
  padding: 8rem var(--gutter) 2rem;
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr; gap: 4rem;
}
.detail-left { order: 3; display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; padding-bottom: 2rem; }
.detail-center { order: 1; min-width: 0; }
.detail-right { order: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 2rem; }
.accordion__head { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: .5rem; text-align: left; text-transform: uppercase; }
.accordion__sign { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.accordion__sign b { font-weight: 400; display: inline-flex; width: 1rem; justify-content: center; }
.accordion__sign span { display: inline-block; transition: transform .3s; }
@media (hover: hover) {
  .accordion__head:hover .accordion__sign span:first-child { transform: translateX(.375rem); }
  .accordion__head:hover .accordion__sign span:last-child { transform: translateX(-.375rem); }
}
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease-soft); }
.accordion.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__inner { min-height: 0; overflow: hidden; }
.accordion__text { padding-top: 1rem; color: var(--muted); line-height: 1.625; opacity: 0; transition: opacity .8s var(--ease-soft); }
.accordion.is-open .accordion__text { opacity: 1; }
.accordion__text p + p { margin-top: 1rem; }

.audio { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.audio__time { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.audio__track { position: relative; flex: 1; padding: 1rem 0; cursor: pointer; touch-action: none; }
.audio__line { position: relative; height: 1px; background: rgb(23 23 23 / .2); }
.audio__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--foreground); }
.audio__knob { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; background: var(--foreground); transform: translate(-50%, -50%); }

.detail-images { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 2.5rem; }
.detail-figure { position: relative; flex-shrink: 0; width: calc((100vw - 3rem) / 1.2); scroll-snap-align: center; overflow: hidden; background: #fafafa; }
.detail-figure img { width: 100%; height: auto; transform: translateX(-20%) scale(1.2); transition: transform 1.2s var(--ease-out-expo) .2s; }
.detail-figure__curtain { position: absolute; inset: 0; background: var(--foreground); transform-origin: right; transition: transform 1s var(--ease-curtain) .1s; }
.detail-figure.is-inview img { transform: none; }
.detail-figure.is-inview .detail-figure__curtain { transform: scaleX(0); }

.detail-meta { display: flex; flex-direction: column; gap: 1.25rem; }
.detail-meta__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.detail-meta dt { color: var(--muted); }
.detail-credit .muted { display: block; }

.detail-strip { padding: 2.5rem var(--gutter); margin-bottom: 2.5rem; }
.detail-strip__rule { border-top: 1px solid var(--line); padding-top: 4rem; }
.detail-strip__scroller { display: flex; gap: 1.5rem; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 1.5rem; }
.strip-item { display: block; flex-shrink: 0; width: 12rem; transition: transform .3s; }
.strip-item:hover { transform: scale(.98); }
.strip-item__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; font-size: .75rem; color: var(--muted); }
.strip-item__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.strip-item__image { aspect-ratio: 1; overflow: hidden; background: rgb(23 23 23 / .05); }
.strip-item__image img { width: 100%; height: 100%; object-fit: contain; }
.strip-item[aria-current="page"] .check-mark { opacity: .5; margin-left: .5rem; }
.strip-item .check-mark { display: none; }
.strip-item[aria-current="page"] .check-mark { display: inline-flex; }
.strip-item[aria-current="page"] .check-mark i { transform: scale(1); }

@media (min-width: 1024px) {
  .detail-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-left { order: 1; position: sticky; top: 8rem; height: calc(100dvh - 8rem); align-self: start; padding-bottom: 0; }
  .detail-center { order: 2; }
  .detail-right { order: 3; position: sticky; top: 8rem; height: calc(100dvh - 8rem); align-self: start; padding-bottom: 5rem; }
  .detail-images { flex-direction: column; align-items: center; gap: 7.5rem; margin: 0; padding: 0; overflow: visible; }
  .detail-figure { width: 100%; }
}

/* ---------- 휴대폰 ---------- */
@media (max-width: 767px) {
  /* iOS는 16px보다 작은 입력창을 누르면 화면을 확대합니다. */
  input { font-size: 16px; }
  /* 작품 431점을 각각 레이어로 만들면 메모리가 부족해집니다. */
  .grid-content, .grid-item { will-change: auto; }
  .grid-tools { top: 4.25rem; }
  .grid-tools.is-open { padding-top: 4.25rem; }
  .search-layer { padding-top: 7.5rem; }
  .search-layer.has-filters { padding-top: 16.5rem; }
  /* 존을 한 줄에 2개씩 놓아 작품이 더 많이 보이게 합니다. */
  .tools-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .5rem; font-size: min(.6875rem, 2.6vw); }
  .tools-filters.is-open { max-height: 9rem; }
  .tools-filters .check-button { min-height: 2rem; }
  .tools-search.is-open .tools-search__box { width: 11rem; }
}
@media (max-width: 1023px) {
  .detail-main { padding-top: 4.5rem; gap: 2rem; min-height: 0; }
  .detail-left { gap: 2rem; padding-bottom: 0; }
  .detail-images { padding-bottom: 0; }
  .detail-figure:only-child { width: 100%; }
  .detail-strip { padding-top: 1rem; margin-bottom: 1rem; }
  .detail-strip__rule { padding-top: 2rem; }
  .strip-item { width: 9rem; }
}

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}