/* 템플릿 9 — 포스터.
 *
 * 사진을 초점 밖으로 밀어 화면을 채운다. 얼굴은 형체만 남고, 그 위에 아주 작은
 * 글자 몇 줄이 조용히 놓인다 — 잡지 표지의 인상.
 *
 * 덮개는 어둡게가 아니라 '뿌옇게' 다. 어둡게 덮으면 사진 위에 글자를 얹은
 * 화면이 되고, 뿌옇게 날리면 인쇄된 지면이 된다. 그 차이가 이 템플릿의 전부다.
 *
 * 글자는 크게 외치지 않는다. 흐린 지면 위에서는 작은 글자가 더 잘 들린다.
 */

.t9 {
  --paper: #efedea;
  --ink: #1b1b1b;
  --t9-gray: .12;
  --plate-tint: 230, 227, 222;
  --plate: .62;
  --ink-60: rgba(27, 27, 27, .72);
  --accent: var(--cv-accent, #1b1b1b);

  position: fixed; inset: 0; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.t9[data-tone="cool"] { --paper: #eceef0; --plate-tint: 226, 230, 233; }
/* 무채는 '고를 수 있는' 것으로 둔다. 기본으로 색을 뺏으면 사람 얼굴이
   가장 먼저 사라진다 — 살색이 남아 있어야 얼굴로 읽힌다. */
.t9[data-tone="mono"] { --paper: #eeeeee; --t9-gray: 1; --plate-tint: 229, 229, 229; }

/* 사진 — 초점 밖으로. 가장자리가 비지 않게 넉넉히 키워 둔다. */
.t9-bg {
  position: absolute; inset: -8%;
  background-size: cover; background-position: center 30%;
  transform: scale(1.06);
}
.t9-bg-empty { background: radial-gradient(circle at 50% 38%, #cfcdc8, var(--paper) 68%); }
/* 흐림은 '형체가 남을 만큼' 이다. 더 밀면 사진이 아니라 회색 얼룩이 된다.
   화면 폭을 따라간다 — 폰에서 20px 은 얼굴 하나를 통째로 지운다. */
.t9[data-blur="strong"] .t9-bg { filter: blur(clamp(9px, 1.35vw, 22px)) grayscale(var(--t9-gray)) contrast(1.02); }
.t9[data-blur="soft"]   .t9-bg { filter: blur(clamp(5px, .7vw, 11px)) grayscale(var(--t9-gray)) contrast(1.01); }
.t9[data-blur="none"]   .t9-bg { filter: grayscale(var(--t9-gray)); }

/* 안개 — 종이색을 덮어 사진을 지면 쪽으로 끌어온다. */
.t9-fog { position: absolute; inset: 0; pointer-events: none;
          background: var(--paper); opacity: var(--fog, .42); }
.t9[data-fog="soft"]   { --fog: .16; }
.t9[data-fog="strong"] { --fog: .34; }
.t9[data-fog="none"]   { --fog: 0; }

/* 인쇄된 결 — 파일로 두지 않는다. 화면 크기가 바뀔 때마다 늘어난 티가 난다. */
.t9-grain {
  position: absolute; inset: -50%; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='240' height='240' filter='url(%23n)' opacity='.5'/></svg>");
  background-size: 240px 240px; mix-blend-mode: multiply;
}
.t9[data-grain="strong"] .t9-grain { opacity: .34; }
.t9[data-grain="soft"]   .t9-grain { opacity: .18; }
.t9[data-grain="none"]   .t9-grain { display: none; }

/* ── 지면 위의 글자 ────────────────────────────────────────────────── */
/* 바닥의 크레딧 자리만 옅게 편다. 가운데까지 덮으면 사진이 사라진다 —
   덮어서 글자를 살리는 게 아니라, 글자에 종이색 훈(halo)을 둘러 살린다. */
.t9-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--paper) 0%, transparent 17%);
  opacity: .55;
}
.t9-plate, .t9-menu { position: relative; }

/* 활자 뒤에 숨 한 겹. 흰색이 아니라 밝은 회색이다 — 흰색을 깔면 지면 위에
   종이 조각을 오려 붙인 것처럼 도드라진다.
   가장자리는 그라디언트로 흩는다. backdrop-filter 로 유리를 만들면 안 된다:
   크롬은 흐린 배경을 요소의 사각형으로 잘라내고 마스크를 무시해서, 글자 뒤에
   네모난 판이 그대로 보인다. 어차피 배경 사진이 이미 흐리므로 더 흐리게 할
   것도 없다 — 필요한 건 옅은 회색 숨결뿐이다. */
.t9-plate::before {
  content: ""; position: absolute; z-index: -1;
  inset: clamp(-9rem, -14vh, -5rem) clamp(-12rem, -17vw, -6rem);
  /* 낙차를 길게 끈다. 짧게 끊으면 타원 테두리가 눈에 보여 얼룩처럼 읽힌다. */
  background: radial-gradient(closest-side at 50% 50%,
              rgba(var(--plate-tint), var(--plate)) 0%,
              rgba(var(--plate-tint), calc(var(--plate) * .92)) 24%,
              rgba(var(--plate-tint), calc(var(--plate) * .5)) 55%,
              rgba(var(--plate-tint), calc(var(--plate) * .16)) 78%,
              rgba(var(--plate-tint), 0) 100%);
}
.t9[data-plate="strong"] { --plate: .82; }
.t9[data-plate="none"] .t9-plate::before { display: none; }

/* 바닥 글자는 유리 대신 아주 옅은 훈으로 띄운다. 두껍게 두르면 글자마다
   네모난 얼룩이 생겨 사진 위 스티커처럼 보인다. */
.t9-menu { text-shadow: 0 0 .55em rgba(255, 255, 255, .5); }
.t9-face {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.4rem, 5vh, 3rem) clamp(1.4rem, 6vw, 5rem);
}

/* 표제 덩어리 — 지면 한가운데보다 살짝 위. 두 칸으로 나눠 앉힌다. */
.t9-plate {
  display: grid; gap: .3rem clamp(1.2rem, 5vw, 3.4rem);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  max-width: 34rem; margin: 0 auto;
  font-size: clamp(.6rem, 1.05vw, .68rem);
  line-height: 1.75; letter-spacing: .1em; text-transform: uppercase;
}
.t9-plate-l { color: var(--ink-60); }
.t9-plate-l p, .t9-plate-r p { margin: 0; }
.t9-who { font-weight: 700; letter-spacing: .12em; }
.t9-line1 { color: var(--ink-60); text-transform: none; letter-spacing: .02em;
            margin-top: .3rem; max-width: 22rem; line-height: 1.6; }

/* 아래 가장자리의 한 줄 — 표지 하단의 크레딧처럼. */
/* 좌우로 벌린다. 왼쪽 아래에는 'Powered by INVITE' 배지가 붙어 있어서
   여기에 글자를 몰아 두면 반드시 겹친다 — 첫 항목만 왼쪽에 남기고 나머지는
   오른쪽 끝으로 민다. 표지 하단의 크레딧이 원래 그렇게 앉는다. */
.t9-menu {
  position: absolute; left: clamp(1.4rem, 6vw, 5rem); right: clamp(1.4rem, 6vw, 5rem);
  bottom: clamp(3.2rem, 4.5vh, 4.2rem);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: clamp(.9rem, 3vw, 2.6rem);
}
.t9-menu button {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--ink); font-family: var(--font-body); font-weight: 700;
  font-size: clamp(.58rem, 1vw, .66rem); letter-spacing: .16em;
  text-transform: uppercase;
  display: inline-flex; align-items: baseline; gap: .35rem;
  border-bottom: 1px solid transparent; transition: border-color .15s ease;
}
.t9-menu button i { font-style: normal; font-size: .85em; opacity: .5; letter-spacing: .06em; }
.t9-menu button:hover { border-bottom-color: var(--ink); }

/* ── 창 — 표지와 같은 지면. 흐린 사진 대신 종이만 남는다 ── */
.t9-sheet {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: var(--paper); color: var(--ink);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s ease, visibility 0s linear .26s;
}
.t9-sheet.open { opacity: 1; visibility: visible; pointer-events: auto;
                 transition: opacity .26s ease; }
.t9-sheet-in {
  width: min(62rem, 86vw); margin: 0 auto;
  padding: clamp(3.5rem, 12vh, 7rem) 0 clamp(3rem, 10vh, 6rem);
}
.t9-sheet-title {
  font-size: clamp(.62rem, 1.1vw, .72rem); letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: clamp(1.6rem, 5vh, 3rem);
}
.t9-sheet::after {
  content: "닫기"; position: fixed; right: clamp(1rem, 4vw, 2.5rem);
  top: clamp(1rem, 4vh, 2rem); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-60); pointer-events: none;
}

.t9-body { font-size: .88rem; line-height: 1.85; white-space: pre-line;
           word-break: keep-all; max-width: 40rem; }
.t9-body + .t9-body { margin-top: 1.2rem; }

.t9-grid { display: grid; gap: clamp(.8rem, 2vw, 1.3rem);
           grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.t9-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
               cursor: zoom-in; }
.t9-grid figcaption { margin-top: .4rem; font-size: .68rem; color: var(--ink-60); }

.t9-hist + .t9-hist { margin-top: 2.2rem; }
.t9-hist h3 { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
              color: var(--ink-60); margin-bottom: .7rem; }
.t9-line { display: flex; gap: 1.1rem; padding: .42rem 0; font-size: .82rem;
           line-height: 1.55; border-top: 1px solid rgba(27, 27, 27, .14); }
.t9-line .y { flex: 0 0 3.4rem; color: var(--ink-60); }
.t9-line a { color: inherit; }

.t9-links { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.t9-links a {
  font-size: clamp(.66rem, 1.2vw, .78rem); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(27, 27, 27, .3);
}
.t9-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

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

@media (max-width: 640px) {
  /* 흐림은 clamp 가 화면 폭을 따라 이미 줄인다 — 여기서 또 손대지 않는다. */
  /* 결도 한 단계 옅게. 고밀도 화면에서 240px 짜리 결은 뭉개져 얼룩처럼 보인다. */
  .t9[data-grain="strong"] .t9-grain { opacity: .22; }
  .t9[data-grain="soft"] .t9-grain { opacity: .12; }
  .t9-plate { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .t9-plate-l { display: flex; gap: .9rem; }
  .t9-menu { gap: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .t9-sheet, .t9-light { transition: none; } }