/* 템플릿 7 — 미니멀.
 *
 * 종이 한 장을 펼친 화면. 이름이 크게 앉고, 그 아래로 가느다란 선과 넓은
 * 여백이 이어진다. 색은 템플릿이 정한다(종이색과 잉크색) — 여기서 색을
 * 고르게 하면 이 화면이 지키려는 조용함이 무너진다. 작가가 고른 색은
 * --accent 로 링크에만 들어간다.
 *
 * 격자: 12칸. 왼쪽 세 칸은 늘 이름표(About·Works·Archive), 나머지가 내용이다.
 * 읽는 사람의 눈이 늘 같은 자리에서 시작하게 하는 것이 이 템플릿의 전부다.
 */

.t7 {
  --paper: #efeeea;
  --ink: #131313;
  --ink-60: rgba(19, 19, 19, .6);
  --line: rgba(19, 19, 19, .22);
  --accent: var(--cv-accent, #131313);
  --pad: clamp(1.25rem, 3.4vw, 3.25rem);

  position: fixed; inset: 0; overflow-y: auto;
  background: #d9d8d4;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.t7[data-paper="white"] { --paper: #fbfbfa; background: #e4e4e2; }
.t7[data-paper="ink"] {
  --paper: #101010; --ink: #f2f1ee; --ink-60: rgba(242, 241, 238, .6);
  --line: rgba(242, 241, 238, .24); background: #050505;
}

/* 종이 — 화면 가장자리에 여백을 남겨 '놓여 있는' 것으로 보이게 한다. */
.t7-sheet {
  min-height: 100%;
  margin: clamp(0px, 1.6vh, 22px) clamp(0px, 1.4vw, 26px);
  padding: var(--pad) var(--pad) calc(var(--pad) * 2);
  background: var(--paper);
  border-radius: clamp(0px, 1.4vw, 22px);
}

/* ── 머리 ──────────────────────────────────────────────────────────── */
.t7-top {
  display: grid; gap: 1.2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .t7-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.t7-name {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 7.2vw, 5.6rem);
  line-height: .92; letter-spacing: -.045em; font-weight: 500;
  word-break: keep-all;
}
.t7[data-scale="huge"] .t7-name { font-size: clamp(2.8rem, 10vw, 8rem); }

.t7-nav {
  display: flex; flex-wrap: wrap; gap: 1rem 2.6rem;
  justify-content: flex-start; padding-top: .5rem;
}
@media (min-width: 900px) { .t7-nav { justify-content: space-between; } }
.t7-nav a {
  font-size: .82rem; color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.t7-nav a:hover { border-bottom-color: var(--accent); }

/* ── 사진 ──────────────────────────────────────────────────────────── */
.t7-portrait {
  display: grid; gap: .6rem;
  grid-template-columns: minmax(0, 1fr);
  margin: clamp(3rem, 16vh, 11rem) 0 0;
}
@media (min-width: 900px) {
  /* 가운데 칸 하나에만 놓는다 — 크게 쓰지 않는 것이 이 화면의 태도다. */
  .t7-portrait { grid-template-columns: 5fr 3fr 4fr; }
  .t7-portrait img { grid-column: 2; }
  .t7-portrait .t7-role { grid-column: 2; }
}
.t7-portrait img {
  display: block; width: 100%; max-width: 15rem; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover; cursor: zoom-in;
}
.t7-role { font-size: .78rem; color: var(--ink-60); }
.t7-role-alone { margin-top: clamp(3rem, 14vh, 9rem); }

/* ── 줄(구역) ──────────────────────────────────────────────────────── */
.t7-row {
  display: grid; gap: .9rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.2rem, 6vh, 4.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .t7-row { grid-template-columns: 5fr 7fr; }
}
.t7-label { font-size: .78rem; color: var(--ink); }
.t7-cols { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) { .t7-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t7-body {
  font-size: .82rem; line-height: 1.55; white-space: pre-line; word-break: keep-all;
  max-width: 34rem;
}
.t7-body a { color: var(--accent); text-underline-offset: .18em; }

/* ── 작품 ──────────────────────────────────────────────────────────── */
.t7-count {
  font-family: var(--font-head); font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: -.03em; line-height: 1;
}
.t7-heading {
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.06;
  letter-spacing: -.03em; margin-top: .4rem; word-break: keep-all;
}
.t7-grid {
  margin-top: 1.6rem; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.t7-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; cursor: zoom-in;
}
.t7-shot figcaption { margin-top: .45rem; font-size: .72rem; color: var(--ink-60); }
.t7-shot figcaption span { color: var(--ink-60); }

/* ── 이력 ──────────────────────────────────────────────────────────── */
.t7-hist h3 { font-size: .82rem; margin-bottom: .5rem; }
.t7-line { display: flex; gap: .9rem; padding: .28rem 0; font-size: .8rem; line-height: 1.5; }
.t7-line .y { flex: 0 0 3rem; color: var(--ink-60); }

/* ── 작품 크게 보기 — 창틀 없이 사진만 ─────────────────────────────── */
.t7-light {
  position: fixed; inset: 0; z-index: 60; display: flex; cursor: zoom-out;
  align-items: center; justify-content: center; padding: 6vh 6vw;
  background: rgba(8, 8, 8, .94);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.t7-light.open { opacity: 1; visibility: visible; pointer-events: auto;
                 transition: opacity .2s ease; }
.t7-light img { max-width: 100%; max-height: 80vh; object-fit: contain;
                transform: scale(.98); transition: transform .26s cubic-bezier(.2,.7,.3,1); }
.t7-light.open img { transform: none; }
.t7-light figcaption {
  position: absolute; left: 6vw; right: 6vw; bottom: 3.5vh; color: #fff;
  font-size: .76rem; display: flex; flex-direction: column; gap: .2rem;
}
.t7-light figcaption .yr:empty, .t7-light figcaption .desc:empty { display: none; }
.t7-light figcaption .yr, .t7-light figcaption .desc { opacity: .7; }
.t7-light figcaption .desc { max-width: 44rem; line-height: 1.6; white-space: pre-line; }

/* 폰 — 종이의 여백은 화면 폭의 몫이다. 좁은 화면에서 사방 여백을 그대로 두면
   글이 들어갈 자리가 남지 않는다. 가장자리를 붙이고 안쪽만 남긴다. */
@media (max-width: 640px) {
  .t7-sheet { margin: 0; border-radius: 0; min-height: 100dvh; }
  .t7-nav { gap: .6rem 1.4rem; padding-top: .2rem; }
  .t7-nav a { font-size: .76rem; }
  .t7-portrait { margin-top: clamp(2rem, 9vh, 5rem); }
  .t7-portrait img { max-width: 11rem; }
  .t7-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .7rem; }
  .t7-line .y { flex: 0 0 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .t7-light, .t7-light img { transition: none; }
}