/* 템플릿 8 — 증명사진.
 *
 * 검정 위에 미색 종이가 한 장 놓이고, 그 한가운데 증명사진이 붙는다.
 * 표지에서 보여주는 것은 얼굴 하나와 짧은 한 문단뿐이다 — 나머지는 스크롤로
 * 한 장씩 넘겨 본다. 적게 보여주는 것이 이 템플릿의 내용이다.
 *
 * 창(모달)을 띄우지 않는다. 같은 판형의 종이가 이어지는 편이 인쇄물답고,
 * 무엇보다 '뒤에 더 있다' 는 것이 스크롤 한 번으로 스스로 드러난다.
 */

.t8 {
  --paper: #f4f1ea;
  --ink: #111;
  --ink-60: rgba(17, 17, 17, .58);
  --accent: var(--cv-accent, #111);

  position: fixed; inset: 0; overflow-y: scroll;
  background: #000;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  /* 한 장씩 걸린다. 스크롤이 종이 사이 어중간한 데서 멈추면 판형이 무너진다. */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.t8[data-paper="white"] { --paper: #fcfcfa; }

/* 한 장의 자리 — 위아래로 검정이 남아야 '놓여 있는 종이' 로 읽힌다. */
.t8-page {
  height: 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
}

/* 종이 — 검은 여백이 액자가 된다.
   높이가 먼저고 폭은 비례(4:5)에서 나온다. 화면 높이를 꽉 채우면 '판' 이
   되어버린다. 여백은 vh 로 잡는다: %(퍼센트)는 종이가 아니라 그 바깥(화면
   폭)을 기준으로 잡혀 네 배로 부푼다 — 그때 사진까지 눌려 작아졌다. */
.t8-paper {
  position: relative;
  height: min(86vh, 52rem);
  aspect-ratio: 4 / 5;
  width: auto; max-width: 88vw;
  padding: 4.6vh 5.2vh 2.2vh;
  background: var(--paper);
  display: flex; flex-direction: column;
}

/* 넘어오는 동작 — 종이가 아래에서 한 장 올라와 얹힌다. JS 가 붙었을 때만
   숨긴다(data-anim). 스크립트가 없으면 그냥 다 보이는 인쇄물로 남는다. */
.t8[data-anim] .t8-paper {
  opacity: 0; transform: translateY(2.6vh) scale(.988);
  transition: opacity .5s ease, transform .72s cubic-bezier(.2, .8, .25, 1);
}
.t8[data-anim] .t8-paper.on { opacity: 1; transform: none; }

/* 종이의 결 — 스톡 사진을 링크로 걸면 남의 서버가 우리 화면을 정한다(사라지거나
   워터마크가 붙거나 핫링크가 막힌다). 같은 결을 여기서 만든다: 가는 섬유질
   노이즈를 아주 옅게 겹치는 것으로 충분하다. */
.t8[data-texture="paper"] .t8-paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'>\
<filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='5' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='300' height='300' filter='url(%23p)' opacity='.42'/></svg>");
  background-size: 300px 300px;
  mix-blend-mode: multiply; opacity: .46;
}
/* 결 위에 아주 옅은 얼룩을 한 겹 더 — 완전히 고른 노이즈는 종이가 아니라 모래다. */
.t8[data-texture="paper"] .t8-paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(0,0,0,.035), transparent 60%),
    radial-gradient(120% 80% at 85% 95%, rgba(0,0,0,.03), transparent 55%);
}
.t8-paper > * { position: relative; z-index: 1; }

/* 쪽 번호 — 인쇄물의 폴리오. 오른쪽 아래 구석에 아주 작게. */
.t8-paper > .t8-folio {
  position: absolute; right: 5.2vh; bottom: 2.2vh;
  font-size: .54rem; letter-spacing: .2em; color: var(--ink-60);
}

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

/* 머리의 표식 — 그냥 글자로 두면 '제목' 으로 읽힌다. 가는 선의 타원 안에
   넣어 찍힌 마크로 만든다(레터헤드의 로고 자리다). */
.t8-mark {
  flex: none; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 3.1rem; height: 3.9rem;
  border: 1px solid var(--ink); border-radius: 50%;
  font-family: var(--font-head); font-size: 1.32rem; line-height: 1;
  letter-spacing: .02em; color: var(--ink);
}
.t8-mark-img {
  flex: none; align-self: center; display: block;
  width: auto; height: clamp(2rem, 5.2vh, 3.4rem);
  max-width: 42%; object-fit: contain;
}
/* 표식을 두지 않을 때도 그 자리는 남긴다 — 사진이 위로 올라오면 종이가 답답해진다. */
.t8-mark-gap { flex: none; height: clamp(2rem, 5.2vh, 3.4rem); }

.t8-mark[data-plain] {
  width: auto; height: auto; border: 0; border-radius: 0;
  font-size: clamp(.92rem, 1.9vw, 1.15rem); letter-spacing: .22em;
  text-transform: uppercase;
}

/* 증명사진 — 여권 사진만 하게, 종이 한가운데. 위아래 어느 쪽으로도 치우치지
   않아야 '붙여 놓은 한 장' 으로 보인다. */
.t8-photo { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.t8-photo-in { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.t8-photo img,
.t8-photo-empty {
  width: clamp(3.4rem, 9.5vh, 6rem); aspect-ratio: 3 / 4;
  object-fit: cover; display: block; cursor: zoom-in;
  filter: grayscale(1) contrast(1.05);
}
.t8-photo-empty {
  display: flex; align-items: center; justify-content: center;
  background: #ddd9d0; color: var(--ink-60); cursor: default;
  font-family: var(--font-head); font-size: 2rem;
}

/* 콜로폰은 종이 맨 아래에 붙는다 — 인쇄물의 판권처럼. 위쪽 빈 공간과 맞닿아야
   대비가 산다. 굵게 눌러 쓴 한 덩어리로 둔다. */
.t8-foot { flex: none; margin-top: auto; }
.t8-bio {
  text-align: center; font-size: .68rem; line-height: 1.42; font-weight: 800;
  letter-spacing: -.012em; word-break: keep-all; margin: 0;
}
.t8-bio b { font-weight: 800; }
.t8-filler { font-weight: 800; }

.t8-open {
  display: flex; justify-content: center;
  gap: clamp(.9rem, 2.6vw, 1.8rem); flex-wrap: wrap;
}
.t8-open button {
  background: none; border: 0; cursor: pointer; padding: .2rem 0;
  font-family: var(--font-head); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid rgba(17, 17, 17, .35);
  display: inline-flex; align-items: baseline; gap: .35rem;
}
.t8-open button span { font-size: .62rem; color: var(--ink-60); letter-spacing: .04em; }
.t8-open button:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 속장 ─────────────────────────────────────────────────────────
   표지와 같은 판형. 제목은 작게 한 줄, 내용은 그 아래 한 덩어리. */
.t8-title {
  flex: none; margin: 0 0 clamp(1rem, 2.8vh, 1.9rem);
  font-family: var(--font-head); font-size: .58rem; letter-spacing: .24em;
  text-transform: uppercase; text-align: center; color: var(--ink-60);
}
.t8-title i { font-style: normal; letter-spacing: .12em; opacity: .7; }

/* 넘치는 경우의 안전판. 평소에는 여기서 스크롤이 생기지 않는다 — 생기면
   그건 한 장에 너무 많이 넣었다는 뜻이다(사진첩은 그래서 여섯 컷씩 끊는다). */
.t8-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* 가운데로 모을 때는 justify-content 가 아니라 auto 마진을 쓴다. 스크롤이
   생기는 상자를 justify-content:center 로 맞추면 넘친 쪽이 잘려 손이 닿지
   않는다 — 피드 모달에서 사진 윗부분이 잘렸던 것과 같은 함정이다. */
.t8-album, .t8-links { margin: auto 0; }
.t8-prose { margin: auto; }

/* 사진첩 — 한 장에 여섯 컷, 세 칸씩 두 줄. */
.t8-album {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.6vh, 1.2rem) clamp(.5rem, 1.4vh, 1rem);
}
.t8-album img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  cursor: zoom-in; filter: grayscale(1) contrast(1.04);
  transition: filter .3s ease;
}
.t8-album figure:hover img { filter: grayscale(0) contrast(1); }
.t8-album figcaption {
  margin-top: .34rem; font-size: .54rem; letter-spacing: .05em; font-weight: 400;
  text-transform: uppercase; color: var(--ink-60);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 스테이트먼트 — 읽으라고 놓은 글이다. 폭을 좁혀 한 호흡에 담기게 한다. */
.t8-prose { max-width: 26rem; }
.t8-prose p {
  margin: 0; font-size: .78rem; line-height: 1.95; white-space: pre-line;
  word-break: keep-all; font-weight: 400;
}
.t8-prose p + p { margin-top: 1.05rem; }
.t8-prose h3 {
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-60); margin: 1.6rem 0 .6rem;
}
.t8-prose > :first-child { margin-top: 0; }

/* 이력 — 연도와 내용, 가는 선 한 줄. */
.t8-hist + .t8-hist { margin-top: 1.7rem; }
.t8-hist h3 { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
              color: var(--ink-60); margin-bottom: .5rem; }
/* 본문 무게는 여기서 못 박는다. 콜로폰만 굵고(800) 나머지는 보통이어야
   위계가 선다 — 다 굵으면 아무것도 강조되지 않는다. */
.t8-line { display: flex; gap: 1rem; padding: .38rem 0; font-size: .74rem;
           line-height: 1.5; font-weight: 400;
           border-top: 1px solid rgba(17, 17, 17, .13); }
.t8-line .y { flex: 0 0 3rem; color: var(--ink-60); }
.t8-line a { color: inherit; }

/* 연락처 — 마지막 장이라 크게 남긴다. */
.t8-links { display: flex; flex-direction: column; gap: .1rem; align-items: center; }
.t8-links a {
  font-family: var(--font-head); font-size: clamp(1.3rem, 3.4vh, 2.1rem);
  letter-spacing: -.03em; color: var(--ink); text-decoration: none; line-height: 1.3;
}
.t8-links a:hover { color: var(--accent); }

/* 넘길 수 있다는 표시. 한 번 넘기면 사라진다. */
.t8-hint {
  position: fixed; left: 0; right: 0; bottom: 2.2vh; margin: 0; z-index: 5;
  text-align: center; font-size: .54rem; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42);
  pointer-events: none; transition: opacity .4s ease;
}
.t8-hint[hidden] { display: block; opacity: 0; }

/* 작품 크게 보기 */
.t8-light {
  position: fixed; inset: 0; z-index: 70; display: flex; cursor: zoom-out;
  align-items: center; justify-content: center; padding: 6vh 6vw;
  background: rgba(0, 0, 0, .96);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.t8-light.open { opacity: 1; visibility: visible; pointer-events: auto;
                 transition: opacity .2s ease; }
.t8-light img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.t8-light figcaption { position: absolute; left: 6vw; right: 6vw; bottom: 3.5vh;
                       color: #fff; font-size: .74rem; display: flex;
                       flex-direction: column; gap: .2rem; }
.t8-light figcaption .yr:empty, .t8-light figcaption .desc:empty { display: none; }
.t8-light figcaption .yr, .t8-light figcaption .desc { opacity: .65; }

@media (max-width: 640px) {
  /* 폰에서는 세로가 길어 4:5 를 지키면 종이가 손톱만 해진다. 폭을 먼저 잡는다.
     종이가 화면보다 길어질 수 있으므로 장의 높이도 풀어 준다 — 안 그러면
     아랫부분이 잘린 채 다음 장으로 걸린다. */
  .t8-page { height: auto; min-height: 100%; padding: 5vh 0;
             scroll-snap-align: start; }
  .t8-paper { height: auto; aspect-ratio: auto; width: 88vw; max-width: none;
              min-height: 80vh; padding: 3.4rem 1.8rem 2.4rem; }
  .t8-paper > .t8-folio { right: 1.8rem; bottom: 1.2rem; }
  .t8-open { gap: 1.1rem; }
  .t8-album { grid-template-columns: repeat(2, 1fr); }
  .t8-body { overflow-y: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .t8 { scroll-behavior: auto; }
  .t8[data-anim] .t8-paper { opacity: 1; transform: none; transition: none; }
  .t8-light { transition: none; }
}