/* 디자인 토큰 — 대비는 개선안 §6-3에서 실측 (모두 4.5:1 이상) */
:root {
  --bg-dark: #111214;
  --bg-light: #F4F2ED;
  --text-on-dark: #EDEBE6;
  --text-on-light: #1B1B1D;
  --muted-on-dark: #9A9AA0;
  --muted-on-light: #6B6B70;
  --accent-on-dark: #C9B27C;
  --accent-on-light: #7A6328;
  --pad: 20px;
  --gap: 24px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
@media (min-width: 768px) { :root { --pad: 40px; } }
@media (min-width: 1200px) { :root { --pad: 80px; } }

/* 라이트가 기본, .dark 안에서는 같은 이름의 변수가 다크용 값으로 바뀝니다 */
body {
  --bg: var(--bg-light);
  --text: var(--text-on-light);
  --muted: var(--muted-on-light);
  --accent: var(--accent-on-light);
  --line: rgba(27, 27, 29, .12);
}
.dark {
  --bg: var(--bg-dark);
  --text: var(--text-on-dark);
  --muted: var(--muted-on-dark);
  --accent: var(--accent-on-dark);
  --line: rgba(237, 235, 230, .14);
  background: var(--bg);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--font);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* AVIF용 래퍼일 뿐, 배치는 img가 그대로 맡습니다 */
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 한글 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남지 않게 */
h1, h2, h3, .toc .t, .cards .t { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent-on-dark);
  color: var(--bg-dark);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* 타입 스케일: Display 56 · H1 36 · Body 17 · Caption 13 */
.label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.display { font-size: clamp(34px, 5vw, 56px); line-height: 1.16; font-weight: 700; letter-spacing: -.025em; }
.h1 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.28; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: var(--muted); max-width: 42em; }
.en { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46em; }
.en b { font-weight: 600; color: var(--text); }

mark.todo {
  color: inherit;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px dashed var(--accent);
  border-radius: 4px;
  padding: 0 .25em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 헤더: 어디서나 연락처로 가는 Contact 버튼 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  color: var(--text-on-dark);
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(237, 235, 230, .08);
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { font-weight: 700; text-decoration: none; }
.site-header nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.site-header nav a { font-size: 14px; text-decoration: none; color: var(--muted-on-dark); transition: color .2s, background-color .2s; }
.site-header nav a:hover { color: var(--text-on-dark); }
.site-header nav a.pill { padding: 6px 14px; border-radius: 999px; background: var(--text-on-dark); color: var(--bg-dark); font-weight: 600; }
.site-header nav a.pill:hover { background: #fff; color: var(--bg-dark); }

/* 첫 화면: 누구인가 → 핵심 숫자 → 한눈에 보기 (30초 스캔) */
/* 위아래 간격은 노트북 실제 화면(1366×657 등)에서도 숫자까지 보이도록 촘촘하게 */
.hero { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 8vw, 104px); }
.name { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.name span { font-weight: 500; color: var(--muted); margin-left: 8px; }
.hero .display { margin-bottom: 18px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: 22px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.link { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px var(--gap);
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.hero .en { margin-top: 32px; }
.key { position: relative; display: block; margin-top: 40px; overflow: hidden; background: #000; color: #fff; text-decoration: none; }
.key img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 47% 50%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.key:hover img { transform: scale(1.02); }
.glance { margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); }
.summary { display: grid; gap: 20px var(--gap); margin-top: 16px; }
.summary dt { font-size: 13px; color: var(--muted); }
.summary dd { margin-top: 4px; font-size: 15px; line-height: 1.7; }
.summary a { text-decoration-color: var(--accent); text-underline-offset: 4px; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 14px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 13px/1 var(--font);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.summary .copy-btn { height: 28px; margin-left: 6px; padding-inline: 12px; vertical-align: 1px; }

/* 영상: 썸네일 버튼 → 클릭 시 같은 자리의 iframe으로 교체 */
.video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  cursor: pointer;
}
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.video:hover img { transform: scale(1.02); }
.play, .key .cap {
  position: absolute;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(17, 18, 20, .74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 600 14px/1 var(--font);
  letter-spacing: .02em;
}

/* 대표작 목차 */
.index { padding-block: clamp(64px, 9vw, 120px); }
.toc { margin-top: 40px; border-top: 1px solid var(--line); }
.toc a {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 6px 24px;
  align-items: baseline;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.toc .num, .toc .y { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.toc .y { grid-column: 3; grid-row: 1; color: var(--muted); font-weight: 500; }
.toc .t { font-size: clamp(19px, 2.2vw, 26px); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.toc .k { grid-column: 2; font-size: 15px; color: var(--muted); }
.toc a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* 케이스: 다크 = 감상, 라이트 = 설명 */
.case-head { padding-block: clamp(72px, 10vw, 128px) clamp(40px, 6vw, 72px); }
.case-head .top { display: grid; gap: 32px var(--gap); margin-bottom: clamp(32px, 4vw, 48px); }
.case-head .lead { margin-top: 16px; }
.meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px var(--gap);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.meta .wide { grid-column: 1 / -1; }
.meta dt { font-size: 13px; color: var(--muted); }
.meta dd { font-size: 15px; line-height: 1.55; }
.case-body { padding-block: clamp(56px, 8vw, 96px); }
.story, .duo { display: grid; gap: 32px var(--gap); }
.cell h3, .callout h3 { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.cell p { font-size: 16px; line-height: 1.75; }
.case-body .pipeline { margin-block: clamp(48px, 6vw, 72px); }
.how { display: grid; gap: 40px var(--gap); margin-block: clamp(48px, 6vw, 72px); }
.how .pipeline { grid-template-columns: 1fr; margin: 0; }
.scene img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.scene figcaption, .versions figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.case-body > .wrap > .scene { max-width: 720px; margin-top: clamp(40px, 5vw, 56px); }
.versions { display: grid; gap: var(--gap); }
.duo { padding-top: 32px; border-top: 1px solid var(--line); }
.note { margin-top: 32px; font-size: 13px; color: var(--muted); }
.shot img { width: 100%; background: #000; }
.shot figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 52em; }

/* Case 04: 업무 흐름 · 규제 대응 · 성과 */
.flow { display: grid; gap: 32px var(--gap); }
.flow > li { padding-top: 16px; border-top: 2px solid var(--text); }
.flow h3 { font-size: 20px; font-weight: 700; margin-block: 6px 12px; }
.flow ul li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.9; }
.flow ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.callout { margin-block: clamp(40px, 5vw, 56px); padding: 20px 24px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.callout p { font-size: 16px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: clamp(40px, 5vw, 56px); }
.metrics b { display: block; font-size: clamp(22px, 3vw, 34px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.metrics span { font-size: 14px; color: var(--muted); }

/* 제작 방식 · 그 밖의 작업 · 소개 */
.process, .more, .about { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.pipeline { display: grid; gap: 32px var(--gap); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 40px; }
.pipeline li { padding-top: 16px; border-top: 2px solid var(--text); }
.pipeline b { display: block; font-size: 20px; font-weight: 700; }
.pipeline .tool { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--accent); }
.pipeline p { margin-top: 10px; font-size: 15px; color: var(--muted); }
.group { margin-top: 48px; font-size: 15px; font-weight: 700; color: var(--muted); }
.cards { display: grid; gap: 32px var(--gap); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 40px; }
.group + .cards { margin-top: 20px; }
.cards a { display: block; text-decoration: none; }
.cards img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.cards .t { display: block; margin-top: 14px; font-weight: 600; }
.cards .k { display: block; font-size: 14px; color: var(--muted); }
.cards a:hover .t { text-decoration: underline; text-underline-offset: 5px; }
.about-grid { display: grid; gap: 48px var(--gap); }
.about .lead { margin-top: 20px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 40px; }
.stats b, .facts b { display: block; font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--accent); white-space: nowrap; }
.stats small, .facts small { font-size: .5em; font-weight: 600; }
.stats span, .facts span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.timeline { border-top: 1px solid var(--line); align-self: start; }
.timeline li { display: grid; grid-template-columns: 136px 1fr; gap: 4px var(--gap); padding-block: 20px; border-bottom: 1px solid var(--line); }
.timeline .when { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline b { font-size: 18px; font-weight: 600; }
.timeline p { grid-column: 2; font-size: 15px; color: var(--muted); }
.timeline .sub { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--accent); color: var(--text); }

/* 연락처 */
.contact { padding-block: clamp(80px, 12vw, 160px) 40px; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block: 20px 48px; }
.mail {
  display: inline-block;
  font-size: clamp(26px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.links { display: grid; grid-template-columns: max-content 1fr; gap: 12px 32px; }
.links dt { color: var(--muted); }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.copy { margin-top: clamp(64px, 9vw, 120px); padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

@media (min-width: 768px) {
  .story { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .versions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .case-head .top { grid-template-columns: 7fr 5fr; align-items: end; }
  .about-grid { grid-template-columns: 5fr 7fr; }
  .how { grid-template-columns: 5fr 7fr; align-items: start; }
  /* 첫 화면 2단: 왼쪽 글, 오른쪽 키비주얼(글 높이에 맞춰 세로로 잘라 채움) */
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "name key" "title key" "lead key" "cta key" "stats stats" "en en" "glance glance";
    align-content: start;
    column-gap: clamp(40px, 5vw, 72px);
  }
  .hero .display { grid-area: title; font-size: clamp(40px, 3.6vw, 48px); }
  .name { grid-area: name; }
  .hero .lead { grid-area: lead; }
  .hero .en { grid-area: en; margin-top: 20px; } /* 숫자 줄 아래: 노트북 첫 화면(1366×657)에 숫자가 들도록 왼쪽 글 블록을 줄임 */
  .cta { grid-area: cta; align-self: start; }
  .key { grid-area: key; margin: 0; }
  .key img { height: 100%; aspect-ratio: auto; }
  .stats { grid-area: stats; }
  .glance { grid-area: glance; }
}
@media (min-width: 1200px) {
  .summary { grid-template-columns: 1fr 1.3fr 1.6fr 1.3fr; }
}
@media (max-width: 359px) {
  .site-header nav { gap: 10px; }
}
@media (max-width: 599px) {
  .toc a { grid-template-columns: 36px 1fr; }
  .toc .y { grid-column: 2; grid-row: auto; }
  .timeline li { grid-template-columns: 1fr; }
  .timeline p { grid-column: 1; }
  .metrics { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .video img, .key img { transition: none; }
}

/* 스크롤 연동 효과 — 지원 브라우저 · 화면 · '동작 줄이기' 꺼짐일 때만. 미지원이면 정지 화면 그대로 */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* 헤더 아래 읽기 진행 막대 */
    .site-header::after {
      content: "";
      position: absolute;
      inset: auto 0 -1px;
      height: 2px;
      background: var(--accent-on-dark);
      transform-origin: 0 50%;
      animation: grow linear both;
      animation-timeline: scroll(root);
    }
    /* 설명 블록은 화면에 들어오며 살짝 떠오름 */
    :is(.toc li, .cell, .pipeline li, .flow > li, .callout, .metrics li, .cards li, .timeline li) {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    /* 케이스 키비주얼은 레터박스가 열리듯 펼쳐짐. 클릭 뒤 생기는 iframe.video는 제외(플레이어가 잘리지 않게) */
    :is(.case-head button.video, .scene img, .shot img) {
      animation: unveil linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}
@keyframes grow { from { transform: scaleX(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes unveil { from { clip-path: inset(14% 0); } to { clip-path: inset(0); } } /* 끝값이 none이면 보간되지 않아 한 번에 바뀜 */

/* 인쇄(PDF) — A4 가로 13쪽. 쪽 구성은 개선안 §5-2, 그리드·타입은 §6.
   표지 → 소개+제작 방식 → 목차 → 케이스 4개(다크 키비주얼 + 라이트 설명) → 그 밖의 작업+경력 → 연락처
   웹과 순서가 다른 소개·경력은 main을 그리드로 바꾸고 order로 옮깁니다.
   여백 위아래 40pt · 좌우 51pt, 12컬럼 · 거터 16pt / Display 40 · H1 26 · H2 17 · 본문 10.5 · 캡션 8pt */
.print-only { display: none; }

@page { size: A4 landscape; margin: 0; }

@media print {
  :root { --gap: 16pt; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 10.5pt; line-height: 1.6; }
  .site-header, .skip, .btn, .hero .lead, .stats, .glance, .copy-btn, mark.todo, .note:has(> mark.todo), .screen-only { display: none; }
  .wrap { max-width: none; margin: 0; padding: 0; }

  /* 쪽 순서와 나누기 */
  main { display: grid; grid-template-columns: 484pt minmax(0, 1fr); }
  main > *, .about-grid > * { grid-column: 1 / -1; }
  #about, .about-grid { display: contents; }
  .about-grid > div { order: 1; }
  .process { order: 2; }
  .index { order: 3; }
  .case { order: 4; }
  .more, .timeline { order: 5; }
  .hero, .about-grid > div, .index, .case-head, .case-body, .more, .timeline, .contact { padding: 40pt 51pt; }
  .about-grid > div, .index, .case-head, .case-body, .more, .timeline, .contact { break-before: page; }
  .process, .more, .timeline { border-top: 0; }
  /* 한 덩어리로 된 쪽은 쪽 높이로 고정: 다크 배경이 쪽을 채우고, 넘치면 쪽 수가 늘어 바로 드러남 */
  .hero, .index, .case-head, .case-body, .contact { display: flex; flex-direction: column; min-height: 210mm; }
  .hero > .wrap, .index > .wrap, .case-head > .wrap, .case-body > .wrap, .contact > .wrap { flex: 1; }

  /* 12컬럼 그리드. 인쇄에서는 웹의 min-width 미디어 쿼리가 @page가 아닌 기본 용지 폭으로 판정되므로 열을 직접 지정 */
  .hero .wrap, .case-head .wrap, .about-grid > div, .case-body .wrap:has(> .scene) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16pt;
  }
  .story, .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duo, .versions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { grid-template-columns: 5fr 7fr; align-items: start; }

  /* 타입 */
  .label, .case-body::before, .timeline::before { font-size: 8pt; line-height: 1.5; }
  .display { font-size: 40pt; }
  .h1 { font-size: 26pt; margin-top: 4pt; }
  .lead { font-size: 10.5pt; line-height: 1.6; }
  .en { font-size: 9pt; line-height: 1.5; margin-top: 8pt; }

  /* 영상: 썸네일과 같은 칸에 유튜브 링크를 겹쳐 PDF에서 썸네일 전체를 누를 수 있게 */
  .video, .video + .print-only { grid-area: v; align-self: end; }
  .video + .print-only {
    position: relative; /* 버튼(position: relative)보다 위에 그려지도록 */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    aspect-ratio: 16 / 9;
    padding: 10pt;
    text-decoration: none;
  }
  .play, .video + .print-only span, .key .cap {
    padding: 5pt 9pt;
    border-radius: 999px;
    background: rgba(17, 18, 20, .74);
    color: #fff;
    font: 600 8pt/1 var(--font);
  }
  .play, .key .cap { left: 10pt; bottom: 10pt; gap: 5pt; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* 01 표지: 키비주얼 9컬럼(누르면 Case 01 쪽으로) + 소개 3컬럼 */
  .hero .wrap {
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "n n n n n n n n n n n n"
      "d d d d d d d d d d d d"
      "v v v v v v v v v . . ."
      "v v v v v v v v v e e e"
      "v v v v v v v v v c c c";
  }
  .name { grid-area: n; font-size: 14pt; margin-bottom: 14pt; }
  .hero .display { grid-area: d; margin: 0; }
  .hero .en { grid-area: e; margin: 0; }
  .cta { grid-area: c; margin: 12pt 0 0; font-size: 11pt; }
  .link { text-underline-offset: 4pt; }
  .key { grid-area: v; align-self: end; margin: 0; }

  /* 02 소개 + 제작 방식: 위쪽 띠에 소개, 아래쪽 띠에 제작 방식 */
  .about-grid > div {
    min-height: 385pt; /* 제작 방식 띠가 아래쪽 여백선에 닿도록 */
    grid-template-areas: "l l l l l l l . f f f f" "h h h h h h h . f f f f" "p p p p p p p . f f f f";
    align-content: start;
  }
  .about .label { grid-area: l; }
  .about .h1 { grid-area: h; }
  .about .lead { grid-area: p; margin-top: 16pt; font-size: 12pt; }
  .facts { display: grid; grid-area: f; grid-template-columns: 1fr; gap: 16pt; margin: 0; padding-left: 16pt; border-left: 1px solid var(--line); }
  .facts b { font-size: 32pt; }
  .facts span { font-size: 9pt; margin: 0; }
  .process { padding: 0 51pt; }
  .process .wrap { padding-top: 20pt; border-top: 1px solid var(--line); }
  .process .h1 { font-size: 17pt; }
  .pipeline { gap: 16pt; margin-top: 18pt; }
  .pipeline li { padding-top: 10pt; }
  .pipeline b { font-size: 12pt; }
  .pipeline .tool { font-size: 8.5pt; }
  .pipeline p { margin-top: 6pt; font-size: 9.5pt; line-height: 1.55; }

  /* 03 목차: 케이스마다 2쪽, Case 01은 4쪽에서 시작 */
  .toc { margin-top: 32pt; counter-reset: pg 2; }
  .toc li { counter-increment: pg 2; }
  .toc a { grid-template-columns: 36pt 1fr auto 44pt; gap: 6pt 16pt; padding-block: 30pt; }
  .toc a::after { content: "p." counter(pg, decimal-leading-zero); grid-column: 4; grid-row: 1; justify-self: end; color: var(--muted); }
  .toc .num, .toc .y, .toc a::after { font-size: 10pt; }
  .toc .t { font-size: 17pt; }
  .toc .k { font-size: 9pt; }

  /* 케이스 첫 쪽(다크): 위에 글 + 메타, 아래쪽 여백선에 키비주얼 */
  .case-head .wrap {
    grid-template-rows: auto 1fr;
    grid-template-areas: "t t t t t t t t . . . ." "v v v v v v v v m m m m";
    row-gap: 24pt;
    align-items: end;
  }
  .case-head:has(.versions) .wrap { grid-template-areas: "t t t t t t t t m m m m" "v v v v v v v v v v v v"; }
  .case-head:has(.shot) .wrap { grid-template-areas: "t t t t t t t t m m m m" "v v v v v v c c c c c c"; }
  .case-head .top, .shot { display: contents; }
  .case-head .top > div { grid-area: t; }
  .case-head .lead { margin-top: 8pt; }
  .meta { grid-area: m; gap: 10pt 16pt; padding-top: 12pt; }
  .meta dt { font-size: 8pt; }
  .meta dd { font-size: 9pt; line-height: 1.45; }
  .versions { grid-area: v; }
  .versions figure { display: grid; grid-template-areas: "v" "c"; }
  .versions figcaption { grid-area: c; }
  .shot img { grid-area: v; }
  .shot figcaption { grid-area: c; }
  .scene figcaption, .versions figcaption, .shot figcaption { margin-top: 6pt; font-size: 8pt; line-height: 1.5; }

  /* 케이스 둘째 쪽(라이트): 블록을 위·아래 여백선 사이에 고르게 배치 */
  .case { counter-increment: case; }
  .case-body::before, .timeline::before { display: block; margin-bottom: 14pt; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
  .case-body::before { content: "Case " counter(case, decimal-leading-zero); }
  .case-body .wrap { display: flex; flex-direction: column; justify-content: space-between; }
  .story, .duo { gap: 16pt; }
  .cell h3, .callout h3 { font-size: 9pt; margin-bottom: 4pt; }
  .cell p, .callout p { font-size: 10.5pt; line-height: 1.6; }
  .case-body .pipeline, .how { margin-block: 28pt; }
  .duo { padding-top: 16pt; }
  .note { margin-top: 14pt; font-size: 8pt; }
  /* 설명 5컬럼 + 장면 7컬럼(§6-5 T3) */
  .case-body .wrap:has(> .scene) .story { grid-column: 1 / 6; grid-template-columns: 1fr; align-self: start; }
  .case-body .wrap > .scene { grid-column: 6 / -1; align-self: end; max-width: none; margin: 0; }
  .flow { gap: 16pt; }
  .flow > li { padding-top: 10pt; }
  .flow h3 { font-size: 13pt; margin-block: 2pt 6pt; }
  .flow ul li { font-size: 10pt; line-height: 1.75; }
  .callout { margin-block: 24pt; padding: 12pt 16pt; }
  .metrics { gap: 16pt; margin-bottom: 24pt; }
  .metrics b { font-size: 24pt; }
  .metrics span { font-size: 9pt; }

  /* 그 밖의 작업 7컬럼(카드 4열) + 경력 5컬럼 */
  .more { grid-column: 1; padding-right: 8pt; }
  .timeline { grid-column: 2; padding-left: 8pt; }
  .timeline::before { content: "Experience"; }
  .timeline li:first-child { border-top: 1px solid var(--line); }
  .timeline li { grid-template-columns: 64pt 1fr; gap: 2pt 12pt; padding-block: 8pt; }
  .timeline .when { grid-row: span 2; font-size: 8pt; }
  .timeline b { font-size: 10.5pt; }
  .timeline p { font-size: 8.5pt; line-height: 1.5; }
  .timeline .sub { margin-top: 3pt; padding-left: 8pt; }
  .group { margin-top: 16pt; font-size: 9pt; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10pt 12pt; }
  .group + .cards { margin-top: 8pt; }
  .cards .t { margin-top: 5pt; font-size: 8.5pt; line-height: 1.4; }
  .cards .k { font-size: 8pt; line-height: 1.45; }

  /* 연락처 */
  .contact .wrap { display: flex; flex-direction: column; }
  .mail-row { margin-block: 28pt 32pt; }
  .mail { font-size: 34pt; }
  .links { gap: 8pt 24pt; font-size: 10.5pt; }
  .copy { margin-top: auto; padding-top: 12pt; font-size: 8pt; }
}