/* ============================================================
   HWA MOK MOK — stylesheet
   Palette: warm bone ground, near-black ink, sage accent
   (sage pulled from the lacquered drawers of Series 01)
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-400.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two Text";
  src: url("fonts/stix-400-normal.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two Text";
  src: url("fonts/stix-400-italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #232220;
  --muted: #777166;
  --line: rgba(35, 34, 32, 0.28);
  --mint: #4f8a71;
  --col: 34rem;
  --serif: "STIX Two Text", "Times Ten", "Times New Roman", Times, Baskerville, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --paper: #f4f1ea;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.45;
  min-height: 100dvh;
}

/* faint grain so the dark ground doesn't read flat */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 1.35rem;
}

/* ---------------- header ---------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--col);
  padding: 0 1.35rem;
  background: var(--bg);
  z-index: 50;
}

.site-header .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.8rem 0 0.6rem;
  transition: opacity 0.2s ease;
}

.site-header .brand img {
  height: 24px;
  width: auto;
}

.site-header .brand span {
  font-size: 9.5px;
  letter-spacing: 0.28em;
  padding-left: 0.28em; /* optical centering against tracking */
}

.site-header .brand .brand-sub {
  font-size: 8px;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-top: -0.3rem; /* flex gap 상쇄 — 워드마크 바로 아래 밀착 */
}

.site-header .brand:hover span { color: var(--mint); }

.site-header hr {
  border: 0;
  border-top: 1px solid var(--line);
}

/* ---------------- overview : index layout ----------------
   full-width index in three quiet columns (year / title / material),
   photos landing on the right — after williamdenis.be
------------------------------------------------------------- */

:root { --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* 홈 헤더: 로고는 리스트 왼쪽선에, 이름은 재료 열에 맞춘다
   (리스트 그리드: 연도 11.5rem | 제목 16.5rem | 재료, 간격 2rem) */
.index-header {
  max-width: none;
  left: 0;
  transform: none;
  padding: 0 1.7rem;
  background: var(--bg);
}

.index-header .brand img { margin-left: -0.9rem; }   /* 왼쪽으로 조금 더 */

.index-header .brand {
  display: grid;
  grid-template-columns: 11.5rem 16.5rem max-content;
  gap: 0 2rem;
  align-items: end;             /* 로고 아랫선에 이름을 맞춘다 */
  justify-content: start;
  padding: 1.4rem 0 0.6rem;
}

.index-header .brand img {
  height: 52px;
  width: auto;
  grid-column: 1;
  justify-self: start;
}

.index-header .brand .brand-name > span,
.index-header .brand .brand-name {
  grid-column: 3;               /* 재료 열 */
  display: flex;
  flex-direction: column;
  gap: 0;                       /* 두 줄을 바짝 붙인다 */
  font-family: var(--sans);     /* 본문(리스트)과 같은 폰트 */
  letter-spacing: 0.0423em;
  font-size: 11px;
  line-height: 1.15;
  color: rgba(0, 0, 0, 0.78);
  padding-bottom: 0.1rem;
}

.index-header .brand .brand-name > span:first-child { text-transform: uppercase; }

.index-header .brand .brand-sub {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.0423em;
  text-transform: none;         /* Kim Ji Woong — 대소문자 섞어서 */
  color: var(--muted);
  margin-top: 0;
}

.index-header .brand:hover .brand-name { color: var(--mint); }

/* 두 줄 모두 리스트 본문과 동일한 자간으로 (공통 헤더 규칙 무력화) */
.index-header .brand .brand-name span,
.index-header .brand .brand-name .brand-sub {
  letter-spacing: 0.0423em;
  padding-left: 0;
  font-size: 11px;              /* 아래 리스트 본문과 동일 */
}


.top-title {
  position: fixed;
  top: 5.2rem;
  right: 1.7rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.78);
  z-index: 55;
  min-height: 1.3em;
}

.index-main {
  padding: 7.4rem 1.7rem 7rem;
  position: relative;
  z-index: 10;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.index-main .section-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.78);
  margin-bottom: 1.5rem;
}

.index-list {
  list-style: none;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.78);
}

/* each block sizes to its content: the rule has a default length,
   stretches with longer titles/materials, but never reaches the photos */
.index-list li {
  width: fit-content;
  min-width: 48vw;
  max-width: 53.5vw;
}

.index-row {
  display: grid;
  grid-template-columns: 11.5rem 16.5rem minmax(4rem, max-content);
  gap: 0 2rem;
  align-items: baseline;
  padding: 0.1rem 0 0;
  color: rgba(0, 0, 0, 0.78);
}

.index-row:hover,
.index-row:hover .iyear,
.index-row:hover .imat { color: var(--mint); }

/* the rule, exactly like the reference: dark and tight */
.index-list hr {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.75);
  margin: 0.06rem 0 0.2rem;
}

.index-list .process-link2 {
  display: block;
  font-size: 9px;
  color: rgba(0, 0, 0, 0.55);
  padding: 0.12rem 0 0;
  margin-left: 1rem;
}

.index-list .process-link2::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.55em;
  margin-right: 0.12em;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.12em);
}

.index-list .process-link2:hover { color: var(--mint); }

.index-list .process-link2 + hr {
  margin-top: 0;
  margin-left: 1rem;
}

/* entrance, gated by the intro */
.index-list li {
  opacity: 0;
  transform: translateY(8px);
}

body.revealed .index-list li { animation: rise 0.55s ease forwards; }
.index-list li:nth-child(1) { animation-delay: 0.08s; }
.index-list li:nth-child(2) { animation-delay: 0.18s; }
.index-list li:nth-child(3) { animation-delay: 0.28s; }
.index-list li:nth-child(4) { animation-delay: 0.38s; }
.index-list li:nth-child(5) { animation-delay: 0.48s; }
.index-list li:nth-child(6) { animation-delay: 0.58s; }
.index-list li:nth-child(7) { animation-delay: 0.68s; }
.index-list li:nth-child(8) { animation-delay: 0.78s; }

/* photos on the right: the picture, and its whole set right beneath it */
.side-viewer {
  position: fixed;
  top: 7.4rem;
  right: 1.7rem;
  bottom: 3.6rem;
  width: calc(46vw - 3.4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  z-index: 20;
}

.side-viewer.show { opacity: 1; }
.side-viewer.pinned { pointer-events: auto; }

/* vertical carousel: the previous and next photos peek above and below,
   scaling in and out as you scroll */
.side-imgzone {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sv {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(calc(var(--sc, 1) * var(--ck, 1))) rotate(var(--rot, 0deg));
  max-width: var(--base, 100%);
  max-height: var(--base, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition:
    top 0.55s cubic-bezier(0.3, 0.7, 0.2, 1),
    transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1),
    opacity 0.55s ease,
    max-width 0.55s ease,
    max-height 0.55s ease;
}

.sv.prev { top: 10%; --sc: 0.7; opacity: 0; z-index: 1; }
.sv.cur  { top: 50%; --sc: 1;   opacity: 1; z-index: 2; }
.sv.next { top: 90%; --sc: 0.7; opacity: 0; z-index: 1; }

.sv.cur {
  max-width: var(--base, 100%);
  max-height: calc(var(--base, 100%) * 0.9);
}
.sv.prev, .sv.next {
  max-width: calc(var(--base, 100%) * 0.5);
  max-height: calc(var(--base, 100%) * 0.4);
}

/* where we are in the set: hairline ticks along the right edge */
.side-ticks {
  position: absolute;
  right: -1.15rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-end;
}

.side-ticks span {
  display: block;
  width: 11px;
  height: 1px;
  background: rgba(0, 0, 0, 0.38);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}

.side-ticks span.on {
  width: 19px;
  height: 2px;
  background: #4b9fc6;
}
.sv.snap { transition: none !important; }

/* 사진 아래 조용한 장수 표시 — 여러 장이 있다는 신호 */
.side-count {
  position: absolute;
  right: 0;
  bottom: 0.6rem;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

/* the sketch + note, bottom-left under the list */
.sketch-zone {
  /* 리스트와 같은 격자를 써서 재료 열에 정확히 맞춘다
     (연도 11.5rem | 제목 16.5rem | 재료), 간격 2rem */
  margin-top: 12.6rem;          /* 마지막 밑줄과의 간격 (기존 8.4rem에서 1.5배) */
  width: 48vw;                  /* 밑줄과 같은 폭 — 오른쪽으로 넘치지 않게 */
  display: grid;
  grid-template-columns: 11.5rem 16.5rem 1fr;
  gap: 0 2rem;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  z-index: 15;
}

.sketch-zone.show { opacity: 1; pointer-events: auto; }

.sketch-float {
  position: fixed;
  width: 26vw;
  height: 24vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 12;
}

.sketch-float.show { opacity: 1; }

.sketch-float img {
  position: absolute;
  max-width: var(--base, 100%);
  max-height: var(--base, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
}

.desc-box {
  grid-column: 3;               /* 재료 열 */
  max-width: 100%;
}

/* 설명 바로 아래 줄에 놓이는, 리스트와 같은 결의 작은 버튼 */
.desc-translate {
  display: block;
  margin-top: 0.5rem;
  margin-left: auto;            /* 오른쪽 끝(밑줄 끝)에 맞춘다 */
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.0423em;
  color: var(--muted);
  cursor: pointer;
  pointer-events: auto;         /* 부모(sketch-zone)가 입력을 막고 있어도 눌리게 */
}

.desc-translate:hover { color: var(--mint); }

.work-desc {
  max-width: 100%;              /* 밑줄 오른쪽 끝을 넘지 않는다 */
  font-family: var(--sans);     /* 리스트와 완전히 동일 */
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;            /* 여러 줄이라 줄간만 조금 넉넉히 */
  letter-spacing: inherit;      /* 리스트와 같은 값을 그대로 물려받는다 */
  text-transform: none;
  color: rgba(0, 0, 0, 0.78);   /* 리스트 본문과 같은 색 */
  white-space: pre-line;        /* 높이는 JS가 두 언어 중 긴 쪽에 맞춰 고정한다 */
}


/* bottom-left corner */
.corner-links {
  position: fixed;
  left: 1.7rem;
  bottom: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 10.5px;
  z-index: 30;
}

.corner-links a:hover { color: var(--mint); }
.corner-links .copy { color: var(--muted); }

/* JS가 만드는 모바일 목록용 sketch는 데스크톱에서는 항상 숨긴다. */
.m-list-sketch { display: none; }

/* ── 모바일: 데스크톱의 문법(리스트 → 사진 → 설명)을 세로로 접는다 ── */
@media (max-width: 999px) {
  .index-header { padding: 0 1.2rem; }
  .index-header .brand {
    grid-template-columns: auto 1fr;   /* 로고 | 이름 */
    align-items: end;
    gap: 0 1rem;
    padding: 1.1rem 0 0.7rem;
  }
  .index-header .brand img { height: 40px; margin-left: -0.5rem; }
  .index-header .brand .brand-name { grid-column: 2; justify-self: end; }

  .top-title { display: none; }
  .index-main { padding: 5.6rem 1.2rem 3rem; }

  .index-list li { width: 100%; min-width: 0; max-width: none; }
  /* 폰트를 줄여 날짜·제목·재료가 한 줄 안에 들어오게 */
  .index-list { font-size: 9.5px; }
  .index-main .section-title { font-size: 9.5px; }
  .index-row {
    display: grid;
    grid-template-columns: 4rem 1fr;   /* 날짜 | 제목/재료 */
    grid-template-rows: auto auto auto; /* 1:제목  2:밑줄  3:재료 */
    gap: 0 0.7rem;
    padding: 0.25rem 0 0.05rem;
    line-height: 1.2;
  }
  .index-row .iyear { grid-column: 1; grid-row: 1; white-space: nowrap; }
  .index-row .ititle { grid-column: 2; grid-row: 1; }
  /* 제목과 재료 사이 밑줄 — 날짜 칸부터 오른쪽 끝까지 (재료 밑 밑줄과 동일 길이) */
  .index-row::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    height: 1px;
    background: rgba(0, 0, 0, 0.75);
    margin: 0.1rem 0;
  }
  .index-row .imat { grid-column: 2; grid-row: 3; }

  /* PROCESS는 날짜와 같은 왼쪽선에, 날짜보다 한두 칸 뒤로 */
  .index-list .process-link2 {
    margin-left: 0.8rem;         /* 날짜 뒤 한두 칸 */
    padding-top: 0.05rem;
    font-size: 8px;
  }
  .index-list .process-link2 + hr { margin-left: 0.8rem; margin-top: 0.1rem; }
  .index-list hr { margin: 0.04rem 0 0.15rem; }

  /* 데스크톱의 오른쪽 사진 자리를 '항목 바로 아래'로 접는다 */
  .side-viewer, .sketch-float { display: none !important; }

  .m-panel {
    position: relative;
    display: none;
    isolation: isolate;
  }
  .index-list li.open .m-panel { display: block; padding: 0.9rem 0 1.6rem; }


  /* 좌우로 밀어 넘기는 사진 — 한 장씩 딱 맞게 멈춘다 */
  .m-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-track::-webkit-scrollbar { display: none; }

  .m-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .m-slide img {
    width: 100%;
    height: auto;
    display: block;
  }

  .m-count {
    margin-top: 0.45rem;
    text-align: right;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.42);
  }

  /* 설명·번역 버튼도 그 자리에서 (데스크톱과 같은 서체) */
  .m-descwrap {
    position: relative;
    margin-top: 1.1rem;
    z-index: 3;
  }
  /* 투명 PNG sketch를 선택한 작품 행 바로 위쪽의 목록 위에 뜨운다. */
  .m-list-sketch {
    position: absolute;
    z-index: 110;
    display: block;
    visibility: hidden;
    margin: 0;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
  }
  .m-list-sketch.show { visibility: visible; }
  .m-list-sketch img {
    position: absolute;
    display: block;
    max-width: none;
    background: transparent;
    pointer-events: none;
  }
  .m-descwrap .m-desc,
  .m-descwrap .m-translate { position: relative; z-index: 1; }

  .m-desc {
    text-transform: none;        /* 리스트의 대문자 규칙에서 벗어난다 */
    margin-top: 0;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: inherit;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.78);
    white-space: pre-line;
  }
  .m-translate {
    display: block;
    text-transform: none;
    margin: 0.5rem 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: 0.0423em;
    color: var(--muted);
  }

  .sketch-zone { display: none !important; }
  .corner-links { position: static; padding: 2.4rem 1.2rem 2rem; }

}

/* ---------------- overview : works list ---------------- */

main.overview {
  padding-top: 6.4rem;
  padding-bottom: 4rem;
  position: relative;
  z-index: 10;
}

.section-title {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.section-gap { margin-top: 2.8rem; }

.works-list { list-style: none; }

.works-list a {
  display: flex;
  align-items: baseline;
  padding: 0.34rem 0;
}

.works-list .num {
  flex: 0 0 2rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.works-list .work-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.works-list .year { color: var(--muted); }

.works-list a:hover,
.works-list a:hover .num,
.works-list a:hover .year { color: var(--mint); }

/* small gray process sub-row tucked under each work */

.works-list .process-sub-link {
  display: inline-block;
  font-size: 12.5px;
  color: var(--muted);
  padding: 0 0 0.5rem 2rem;
  line-height: 1.2;
}

.works-list .process-sub-link::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.6em;
  margin-right: 0.45em;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em);
}

.works-list .process-sub-link:hover { color: var(--mint); }

/* staggered entrance — plays once the intro releases the page */
.works-list li {
  opacity: 0;
  transform: translateY(8px);
}

body.revealed .works-list li {
  animation: rise 0.55s ease forwards;
}
.works-list li:nth-child(1) { animation-delay: 0.08s; }
.works-list li:nth-child(2) { animation-delay: 0.16s; }
.works-list li:nth-child(3) { animation-delay: 0.24s; }
.works-list li:nth-child(4) { animation-delay: 0.32s; }
.works-list li:nth-child(5) { animation-delay: 0.40s; }
.works-list li:nth-child(6) { animation-delay: 0.48s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------------- intro ---------------- */

#intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: radial-gradient(120% 95% at 50% 42%, #191714 0%, #131110 55%, #0c0b0a 100%);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.8s ease;
}

#intro.hide {
  opacity: 0;
  pointer-events: none;
}

/* the piece as a true cutout: it emerges from the dark as a veil lifts.
   Perception notes (see 연구 메모):
   - sRGB is gamma-encoded, so a linear opacity ramp does NOT read as a linear
     rise in light; and perceived lightness ≈ luminance^(1/3) (CIELAB L*,
     Munsell V ≈ 2.468·∛Y − 1.636). We therefore drive brightness/opacity with
     an eased curve computed in JS rather than a plain linear fade.
   - The reveal sweeps bottom→top like a veil being drawn off, with a soft
     gradient edge (no hard line), and decelerates as it finishes. */
.intro-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(40.6vw, 595px);   /* 기존(58vw/850px)에서 30% 축소 */
  aspect-ratio: 2400 / 1744;   /* 이미지가 늦게 와도 중앙 위치를 미리 고정 */
  animation: stage-in 1.6s cubic-bezier(0.25, 0.6, 0.25, 1) both;
}

@keyframes stage-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.012); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.intro-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* 평상시엔 실루엣(윤곽선)만 — 내부는 보이지 않는다 */
.intro-photo.veiled { opacity: 0; }

/* 얼룩이 번지듯 여러 곳에서 밝아진다.
   여러 개의 radial-gradient를 겹친 마스크를 쓰고, 각 얼룩의 반경을 키운다.
   (경계는 항상 넓은 그라데이션 → 딱딱한 원이 보이지 않음) */
.intro-photo.lit {
  position: absolute;
  inset: 0;
  filter: brightness(var(--lit-b, 1));
  /* 페이드 없이 즉시 — 딸깍 */
  transition: none;
}

/* 커서를 올릴 수 있도록 스테이지가 입력을 받는다 */
.intro-stage { pointer-events: auto; }

/* hairline contour, like a drawing in the dark */
.intro-photo.line {
  position: absolute;
  inset: 0;
  opacity: var(--line-o, 0.55);
}

.intro-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  z-index: 5;
  pointer-events: none;
}

.intro-mark img {
  height: 42px;
  width: auto;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.55));
}

.intro-mark span {
  font-size: 10.5px;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: #e8e3d9;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* hover previews, fixed to the side gutters */

.preview {
  position: fixed;
  top: 0;
  width: min(24vw, 360px);
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition: opacity 0.3s ease;
  will-change: transform;
}

.preview.left  { left: 3vw; }
.preview.right { right: 3vw; }

.preview img {
  width: 100%;
  height: auto;
}

.preview.left img  { transform: rotate(-1.2deg); }
.preview.right img { transform: rotate(1.2deg); }

.preview.show { opacity: 1; }

@media (max-width: 900px), (pointer: coarse) {
  .preview { display: none; }
}

/* ---------------- footer ---------------- */

.site-footer {
  padding-top: 2.6rem;
}

.site-footer hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-bottom: 2.2rem;
}

.site-footer .mark {
  height: 56px;
  width: auto;
  margin: 0 auto 1.4rem;
  opacity: 0.92;
}

.site-footer .about {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  max-width: 24rem;
  margin: 0 auto 1.6rem;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.4rem;
}

.footer-links a { color: var(--ink); }
.footer-links a:hover { color: var(--mint); }
.footer-links svg { display: block; }

.colophon {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-bottom: 2.2rem;
}

.colophon a:hover { color: var(--mint); }

/* ---------------- work page : viewer ---------------- */

main.work {
  padding-top: 6.2rem;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}

.work-heading {
  text-align: center;
  padding: 0.4rem 1rem 1rem;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.work-heading .work-name { color: var(--ink); }
.work-heading .work-year { color: var(--muted); }

.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.35rem 0;
  min-height: 0;
}

.stage img {
  max-width: min(92vw, 1040px);
  max-height: calc(100dvh - 17.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(35, 28, 15, 0.25);
  opacity: 1;
  transition: opacity 0.18s ease;
}

.stage img.fading { opacity: 0; }

.viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 1.1rem 0 0.2rem;
}

.viewer-controls button {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.2rem 1.1rem 0.45rem;
}

.viewer-controls button:hover { color: var(--mint); }

.viewer-controls .counter {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 4.6rem;
  text-align: center;
}

.work-caption {
  text-align: center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
  padding: 0.5rem 1.35rem 2rem;
}

/* all photos of the work, gathered at a glance */

.thumb-rail .grid {
  display: grid;
  gap: 10px;
}

.thumb-rail button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.thumb-rail button img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.thumb-rail button:hover { opacity: 0.85; }

.thumb-rail button.active {
  opacity: 1;
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

@media (min-width: 1000px) {
  .thumb-rail {
    position: fixed;
    top: 5.2rem;
    right: 0;
    bottom: 0;
    width: 236px;
    overflow-y: auto;
    padding: 1.1rem 1.3rem 1.4rem 1.1rem;
    border-left: 1px solid var(--line);
    z-index: 45;
  }
  .thumb-rail .grid { grid-template-columns: 1fr 1fr; }
  /* keep the main image clear of the rail */
  .stage img { max-width: min(calc(100vw - 560px), 1040px); }
}

@media (max-width: 999px) {
  .thumb-rail { padding: 0.4rem 1.35rem 2.4rem; }
  .thumb-rail .grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  .stage img { max-height: calc(100dvh - 17rem); }
  .viewer-controls { gap: 0.8rem; }
  .viewer-controls button { padding: 0.2rem 1.6rem 0.45rem; }
}

/* link from the finished work to its process page */

.to-process {
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
  padding-bottom: 2.2rem;
  margin-top: -1rem;
}

.to-process:hover { color: var(--mint); }

/* ---------------- process page ----------------
   same quiet register as the works pages;
   its only signature is the sideways riffle
------------------------------------------------- */

.proc-tag {
  color: var(--muted);
  font-style: italic;
}

body[data-page="process"] .stage img {
  max-width: min(80vw, 700px);
  max-height: calc(100dvh - 18.5rem);
  box-shadow: 0 18px 50px rgba(35, 28, 15, 0.22);
}

@media (min-width: 1000px) {
  body[data-page="process"] .stage img {
    max-width: min(calc(100vw - 640px), 700px);
  }
}

/* ── 모바일 첫 화면: 사진을 크게, 로고는 그 안에 쏙 (기본 규칙보다 뒤에 둬야 적용됨) ── */
@media (max-width: 999px) {
  .intro-stage { width: 88vw; }
  .intro-mark { gap: 0.5rem; }
  .intro-mark img { height: 26px; }
  .intro-mark span { font-size: 8px; letter-spacing: 0.24em; padding-left: 0.24em; }
}