/* ==========================================================================
   심은성 포트폴리오 — style.css (Round 3)
   언어: 흰 바탕 · 먹선 1.5px 라인아트 · 라임 1색은 '활성 상태'에만 · 모노 라벨 · 터미널 은유
   토큰은 :root 에만. 컴포넌트는 단일 클래스 셀렉터 위주. (docs/design.md)
   ========================================================================== */

:root {
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #474747;
  --ink-3: #767676;
  --rule: #e3e3e3;
  --grid: #efefef;
  --shade: #f0f0ee;
  --lime: #d4f53c;
  --lime-soft: #eefbb4;

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Pretendard Variable", monospace;

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.625rem;    /* 26 */
  --fs-2xl: 2.25rem;    /* 36 */
  --fs-3xl: 3.25rem;    /* 52 */
  --fs-4xl: 4.5rem;     /* 72 */
  --lh-body: 1.75;
  --lh-tight: 1.25;

  --line: 1.5px;
  --gutter: 24px;
  --wrap: 1180px;
  --measure: 40em;
  --bar-h: 60px;
  --section-gap: 120px;
  --r-card: 12px;
  --r-box: 8px;
}
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --fs-4xl: 3rem;
    --fs-3xl: 2.25rem;
    --fs-2xl: 1.75rem;
    --fs-xl: 1.375rem;
    --bar-h: 56px;
    --section-gap: 80px;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 12px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-md); line-height: var(--lh-body);
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--lime); border-radius: 2px; }
button { font: inherit; color: inherit; }
svg text { font-family: var(--sans); }
.mono { font-family: var(--mono); font-feature-settings: "zero" 0; letter-spacing: 0; }
/* 모노 맥락의 한글: JetBrains Mono에는 한글이 없고 공백이 0.6em으로 넓어 자간이 벌어져 보임 → 한글이 든 라벨은 Pretendard(고정폭 숫자)로 (main.js tagMonoKr) */
.mono-kr, svg text.mono-kr { font-family: var(--sans) !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.noscript { padding: 24px; text-align: center; }

/* ---------- shared atoms ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 500; line-height: 1; letter-spacing: 0.02em;
  padding: 7px 12px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
}
.badge--lime { background: var(--lime); }
.badge--sm { padding: 4px 9px; font-size: 10px; }
.badge-dot { font-size: 9px; margin-right: 2px; }
.eyebrow { font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.06em; color: var(--ink-3); }
.eyebrow span { color: var(--ink-3); }
.sec-title { font-size: var(--fs-3xl); line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px;
  border: var(--line) solid var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--lime); color: var(--ink); }
.btn--line { background: var(--paper); color: var(--ink); }
.btn--line:hover { background: var(--lime); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; padding: 3px 9px; border: 1px solid var(--ink); border-radius: 4px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink); background: var(--paper); }
.tag--added { border-style: dashed; }
.term-dots { display: inline-flex; gap: 5px; }
.term-dots i { width: 9px; height: 9px; border: var(--line) solid var(--ink); border-radius: 50%; }

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar-h); background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.topbar.is-scrolled { border-bottom-color: var(--ink); }
.topbar-inner { height: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; }
.logo { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; line-height: 1; }
.logo-dot { color: var(--ink); }
.topnav { display: flex; gap: 22px; margin-left: auto; font-size: var(--fs-sm); }
.topnav a { text-decoration: none; color: var(--ink-2); }
.topnav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 960px) { .topnav { display: none; } .topbar-inner .badge { margin-left: auto; } }
@media (max-width: 480px) { .badge-at { display: none; } }

/* ---------- (1) hero ---------- */
.hero { padding-top: calc(var(--bar-h) + 40px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: start; }
.hero-left { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.term { position: relative; z-index: 2; border: var(--line) solid var(--ink); border-radius: var(--r-card); background: var(--paper); overflow: hidden; max-width: 520px; }
.term-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-bottom: var(--line) solid var(--ink); }
.term-file { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-right: auto; }
.term-body { padding: 16px 18px 18px; font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.7; min-height: 92px; }
.term-line { white-space: pre-wrap; word-break: break-all; }
.term-line--out { color: var(--ink-2); font-size: var(--fs-xs); margin-top: 4px; }
.caret { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.18em; margin-left: 2px; background: var(--ink); animation: blink 1s steps(1) infinite; }
.caret[hidden] { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.hero-name { font-size: var(--fs-4xl); line-height: 1; font-weight: 800; letter-spacing: -0.05em; }
.hero-name::after { content: "."; }
.hero-headline { margin-top: -14px; font-size: var(--fs-lg); line-height: 1.45; font-weight: 500; max-width: 24em; }
.limecard { position: relative; z-index: 2; background: var(--lime); border: var(--line) solid var(--ink); border-radius: var(--r-card); padding: 20px 22px 18px; max-width: 520px; }
.limecard-top { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.06em; }
.limecard-title { margin-top: 10px; font-size: var(--fs-2xl); line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; }
.limecard-sub { margin-top: 4px; font-size: var(--fs-sm); font-weight: 400; }
.limecard-rows { margin-top: 16px; padding-top: 14px; border-top: var(--line) solid var(--ink); display: grid; gap: 10px; }
.lc-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 6.5em; align-items: center; gap: 12px; }
.lc-label { font-size: 11px; }
.lc-val { font-size: 11px; text-align: right; font-weight: 700; }
.lc-bar { height: 10px; border-radius: 99px; background: rgba(17, 17, 17, 0.12); overflow: hidden; }
.lc-fill { display: block; height: 100%; border-radius: 99px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--r)); }
.limecard-note { margin-top: 12px; font-size: 10px; color: rgba(17, 17, 17, 0.7); }
.hero-iso { position: relative; min-width: 0; }
.iso-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-iso .iso-svg { max-height: calc(100svh - var(--bar-h) - 90px); }
.iso-cap { margin-top: 8px; font-size: 11px; color: var(--ink-3); text-align: right; }

.about { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px 64px; padding-top: 80px; padding-bottom: var(--section-gap); }
.about-text p { font-size: var(--fs-lg); line-height: 1.7; max-width: 36em; }
.about-facts { border-top: var(--line) solid var(--ink); align-self: start; }
.about-facts div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); line-height: 1.6; }
.about-facts dt { font-size: 11px; color: var(--ink-3); padding-top: 3px; }
.highlights { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.highlight { border: var(--line) solid var(--ink); border-radius: var(--r-box); padding: 20px 22px 22px; }
.highlight-label { font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-tight); margin-bottom: 10px; }
.highlight p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; }
.highlight p + p { margin-top: 8px; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-left { display: contents; }
  .term { order: 1; max-width: none; }
  .hero-iso { order: 2; }
  .hero-name { order: 3; }
  .hero-headline { order: 4; margin-top: -20px; }
  .limecard { order: 5; max-width: none; }
  .hero-iso .iso-svg { max-height: 56svh; }
  .about { grid-template-columns: 1fr; padding-top: 56px; }
  .highlights { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--bar-h) + 16px); }
  .term-body { font-size: 13px; padding: 12px 14px 14px; min-height: 80px; }
  .lc-row { grid-template-columns: 7.5em minmax(0, 1fr) 5.6em; gap: 8px; }
  .about-text p { font-size: var(--fs-md); }
  .iso-cap { text-align: left; }
}

/* ---------- section scaffold ---------- */
.section { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px 48px; padding-top: 64px; padding-bottom: var(--section-gap); border-top: var(--line) solid var(--ink); }
.section-head .sec-title { font-size: var(--fs-2xl); margin-top: 8px; }
.section-content { max-width: 820px; min-width: 0; }
.sub-title { font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: 700; margin: 56px 0 18px; }
.sub-title:first-child { margin-top: 0; }
@media (max-width: 860px) { .section { grid-template-columns: 1fr; padding-top: 44px; } }

.competencies { border-top: var(--line) solid var(--ink); }
.competencies li { padding: 14px 0 14px 28px; font-weight: 500; line-height: 1.6; border-bottom: 1px solid var(--rule); position: relative; }
.competencies li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 12px; height: 12px; border: var(--line) solid var(--ink); border-radius: 2px; background: var(--lime); }

.stat-measure { font-size: 11px; color: var(--ink-3); margin-bottom: 16px; line-height: 1.6; }
.stat-list { border-top: var(--line) solid var(--ink); }
.stat-row { display: grid; grid-template-columns: 11em minmax(0, 1fr) 9.5em 5.5em; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.stat-name { font-weight: 600; font-size: var(--fs-sm); }
.stat-bar { height: 12px; border: var(--line) solid var(--ink); border-radius: 99px; overflow: hidden; }
.stat-fill { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--r)); }
.is-motion .stat-fill { transform: scaleX(0); }
.stat-row.is-max .stat-fill { background: var(--lime); box-shadow: inset -1.5px 0 0 var(--ink); }
.stat-val { font-size: 11.5px; text-align: right; color: var(--ink-2); }
.stat-val b { color: var(--ink); font-size: 13px; }
.stat-span { font-size: 11px; color: var(--ink-3); text-align: right; }
.stats-rest { margin-top: 20px; }
.stats-rest-label { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 8px; }
@media (max-width: 640px) {
  .stat-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .stat-bar { grid-column: 1 / -1; grid-row: 2; }
  .stat-span { display: none; }
}

.record-list { border-top: var(--line) solid var(--ink); }
.record { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.record-date { color: var(--ink-3); font-size: 12px; padding-top: 4px; }
.record-title { font-weight: 600; line-height: 1.5; }
.record-meta { color: var(--ink-2); font-size: var(--fs-sm); }
.record-desc { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-sm); max-width: var(--measure); }
.record-desc li { position: relative; padding-left: 16px; }
.record-desc li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 6px; height: 6px; border: 1px solid var(--ink); }
.record-desc li + li { margin-top: 4px; }
@media (max-width: 640px) { .record { grid-template-columns: 1fr; } .record-date { padding-top: 0; } }

.letter-headline { font-size: var(--fs-xl); line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 28px; max-width: var(--measure); }
.letter p { max-width: var(--measure); }
.letter p + p { margin-top: 1.4em; }

.site-footer { background: var(--ink); color: #d9d9d9; padding: 56px 0 64px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; align-items: baseline; }
.footer-name { color: #fff; font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.04em; }
.site-footer .logo-dot { color: var(--lime); }
.footer-contact { font-size: var(--fs-sm); }
.site-footer a { color: #fff; margin-left: 6px; }
.site-footer a:focus-visible { outline-color: var(--lime); box-shadow: none; }

/* ==========================================================================
   ISO line art (hero, career, layers)
   ========================================================================== */
.iso-grid { fill: none; stroke: var(--grid); stroke-width: 1; }
.iso-wire { fill: none; stroke: #a9a9a9; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linejoin: round; }
.iso-face { stroke: var(--ink); stroke-width: var(--line); stroke-linejoin: round; fill: var(--paper); }
.iso-right { fill: var(--shade); }
.iso-slab .iso-wire { display: none; }
.iso-slab .iso-top { fill: var(--paper); }
.iso-slab .iso-left, .iso-slab .iso-right { fill: var(--shade); }
.iso-box.is-hl .iso-face, .iso-floor.is-hl .iso-face { fill: var(--lime); }
.iso-box.is-hl .iso-right, .iso-floor.is-hl .iso-right { fill: #bfdf2a; }
.iso-floor.is-hover .iso-face { fill: var(--lime); }
.iso-plane { fill: var(--lime); fill-opacity: 0.5; stroke: var(--ink); stroke-width: 1; }
.iso-leader { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.iso-dot { fill: var(--ink); }
.iso-call { font-family: var(--sans); font-size: 11px; font-weight: 500; font-feature-settings: "tnum" 1; fill: var(--ink); }
.iso-year { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.iso-callout.is-hover .iso-call { font-weight: 700; }
.iso-call--name { font-size: 12px; font-weight: 800; }
.iso-pillar[role="button"] { cursor: pointer; outline: none; transition: transform 0.25s ease; }
.iso-pillar[role="button"]:hover, .iso-pillar[role="button"]:focus-visible { transform: translateY(-4px); }
.iso-pillar[role="button"]:hover .iso-face { stroke-width: 2.2px; }
.iso-pillar[role="button"]:focus-visible .iso-face { stroke-width: 2.6px; }
.iso-pillar[role="button"]:focus-visible .iso-top { fill: var(--lime-soft); }
.iso-pillar.is-hl[role="button"]:focus-visible .iso-top { fill: var(--lime); }
.hero-iso .iso-calls { cursor: pointer; }
.hero-iso .iso-calls:hover .iso-call--name { text-decoration: underline; text-underline-offset: 2px; }
.iso-callout.is-hover .iso-leader { stroke-width: 2; }

/* ==========================================================================
   (2) CAREER FILM
   ========================================================================== */
.career { border-top: var(--line) solid var(--ink); }
.film { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 72px minmax(0, 1fr) auto; padding-top: var(--bar-h); overflow: hidden; background: var(--paper); }
.film[hidden] { display: none; }
.film-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; padding-top: 20px; padding-bottom: 8px; }
.film-head .eyebrow { width: 100%; }
.film-head .sec-title { font-size: var(--fs-2xl); }
.film-hint { font-size: var(--fs-xs); color: var(--ink-3); }
.film-rail { position: relative; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rail-track { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.rail-tick { position: absolute; bottom: 0; width: 1px; height: 8px; background: #c8c8c8; }
.rail-tick.is-major { height: 14px; background: var(--ink-3); }
.rail-year { position: absolute; bottom: 3px; left: 4px; white-space: nowrap; font-size: 10px; color: var(--ink-3); }
.rail-seg { position: absolute; top: 28px; height: 12px; border: var(--line) solid var(--ink); border-radius: 3px; background: var(--paper); overflow: visible; }
.rail-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; }
.rail-seg.is-cur .rail-fill { background: var(--lime); }
.rail-seg-name { position: absolute; left: 0; top: -20px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink-2); }
.rail-seg.is-cur .rail-seg-name { color: var(--ink); font-weight: 800; }
.rail-dot { position: absolute; top: 28px; width: 12px; height: 12px; margin-left: -6px; margin-top: 0; border-radius: 50%; background: var(--ink); }
.rail-now { position: absolute; top: 0; bottom: 0; left: 30%; width: var(--line); background: var(--ink); }
.rail-reel { position: absolute; bottom: 5px; left: 8px; z-index: 1; padding: 2px 8px; font-size: 14px; font-weight: 700; line-height: 1.2; background: var(--lime); border: var(--line) solid var(--ink); border-radius: 4px; display: inline-flex; }
.reel-cell { display: inline-block; height: 1.2em; overflow: hidden; }
.reel-col { display: block; }
.reel-col span { display: block; height: 1.2em; line-height: 1.2em; text-align: center; }
.film-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; min-height: 0; padding-top: 12px; padding-bottom: 8px; }
.film-info { position: relative; min-height: 0; display: grid; align-items: center; }
.scene { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.scene-cap { font-size: 12px; color: var(--ink-2); }
.scene-cap-text { display: inline-block; white-space: nowrap; }
.scene-meta { font-size: 11px; color: var(--ink-3); }
.scene-name { overflow: hidden; font-size: var(--fs-3xl); line-height: 1.12; font-weight: 800; letter-spacing: -0.04em; padding-bottom: 2px; }
.scene-name-in { display: block; }
.scene-title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; margin-top: -4px; }
.scene-stats { font-size: 12px; color: var(--ink-2); }
.scene-count { font-size: 13px; color: var(--ink); }
.scene-summary { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; max-width: 34em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.scene-projects { border-top: 1px solid var(--ink); max-width: 34em; }
.scene-projects li { border-bottom: 1px solid var(--rule); }
.scene-projects a { display: block; padding: 5px 0; font-size: var(--fs-xs); line-height: 1.45; text-decoration: none; }
.scene-projects a:hover, .scene-projects a:focus-visible { background: var(--lime); }
.scene-projects .mono { font-size: 11px; color: var(--ink-3); margin-right: 4px; }
.scene-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.film-iso { position: static; min-height: 0; display: flex; align-items: center; justify-content: center; }
.film-iso .iso-svg { width: 100%; height: 100%; max-height: 100%; }
.film-sweep { position: absolute; top: var(--bar-h); bottom: 0; left: 0; width: 4px; background: var(--lime); box-shadow: 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink); pointer-events: none; opacity: 0; z-index: 3; }
.film-chapters { position: relative; padding-top: 6px; padding-bottom: 16px; }
.film-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.film-nav { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 18px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease; }
.film-nav--next { background: var(--ink); color: #fff; }
.film-nav:hover { transform: translateY(-1px); }
.film-nav--next:hover { background: var(--lime); color: var(--ink); }
.film-nav--prev:hover { background: var(--lime); }
.film-nav[aria-disabled="true"] { opacity: 0.32; cursor: default; transform: none; background: var(--paper); }
.film-nav-arrow { font-size: 10px; line-height: 1; }
.film-nav-count { font-size: 11px; font-weight: 500; opacity: 0.75; margin-left: 2px; }
.film-nav-count[hidden] { display: none; }
.film-body[data-film-stage] { cursor: pointer; }
.film-body[data-film-stage]:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--lime); border-radius: 0; }
.film.is-moving .film-sweep { will-change: transform; }
.chap-list { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chap-list::-webkit-scrollbar { display: none; }
.chap-btn { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: var(--fs-xs); white-space: nowrap; }
.chap-btn:hover { border-color: var(--ink); }
.chap-btn[aria-current="step"] { background: var(--lime); border: var(--line) solid var(--ink); font-weight: 700; }
.chap-year { font-size: 11px; color: var(--ink-3); }
.chap-btn[aria-current="step"] .chap-year { color: var(--ink); }
.chap-track { display: block; height: 2px; margin-top: 10px; background: var(--rule); overflow: hidden; }
.chap-fill { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.is-motion .career-list { display: none; }

@media (max-width: 960px) {
  .film-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0; }
  .film-info { align-items: start; }
  .scene { justify-content: flex-start; gap: 7px; padding-top: 4px; }
  .scene-summary { -webkit-line-clamp: 2; }
}
@media (max-width: 640px) {
  .film { grid-template-rows: auto 60px minmax(0, 1fr) auto; }
  .film-head { padding-top: 12px; padding-bottom: 4px; }
  .film-head .eyebrow { display: none; }
  .film-head .sec-title { font-size: var(--fs-xl); }
  .film-hint { display: none; }
  .rail-now { left: 18%; }
  .rail-seg, .rail-dot { top: 22px; height: 10px; }
  .rail-dot { width: 10px; margin-left: -5px; }
  .rail-seg-name { top: -18px; font-size: 10.5px; }
  .rail-year { bottom: 2px; }
  .rail-reel { font-size: 12px; bottom: 3px; }
  .scene-name { font-size: 2rem; }
  .scene-title { font-size: var(--fs-md); }
  .scene-summary { display: none; }
  .scene-projects a { padding: 3px 0; font-size: 12.5px; }
  .btn { min-height: 38px; padding: 0 14px; font-size: var(--fs-xs); }
  .chap-btn { padding: 5px 10px; }
  .chap-name { display: none; }
  .film-ctrl { grid-template-columns: 1fr 1fr; gap: 8px; }
  .film-ctrl .chap-list { grid-column: 1 / -1; grid-row: 2; }
  .film-nav { min-height: 40px; padding: 0 14px; }
  .film-nav--prev { justify-self: start; }
  .film-nav--next { justify-self: end; }
  .film-chapters { padding-bottom: 12px; }
  .chap-track { margin-top: 8px; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .scene-projects { display: none; }
  .scene-name { font-size: 1.75rem; }
}
@media (max-height: 760px) and (min-width: 961px) {
  .scene-summary { -webkit-line-clamp: 2; }
  .scene-name { font-size: var(--fs-2xl); }
  .film-head { padding-top: 10px; }
}

/* career list (reduced motion / print) */
.career-list { padding-top: 24px; padding-bottom: 40px; }
.cl-item { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px 48px; padding: 36px 0; border-top: 1px solid var(--rule); }
.cl-item:first-child { border-top: 0; }
.cl-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cl-meta { font-size: 11px; color: var(--ink-3); }
.cl-company { font-size: var(--fs-2xl); line-height: 1.15; font-weight: 800; letter-spacing: -0.035em; }
.cl-title { font-size: var(--fs-lg); font-weight: 600; }
.cl-months { font-size: 12px; color: var(--ink-2); }
.cl-summary { color: var(--ink-2); font-size: var(--fs-sm); max-width: 36em; }
.cl-head .scene-projects { width: 100%; }
.cl-figure .iso-svg { max-width: 420px; margin-left: auto; }
.cl-detail { grid-column: 1 / -1; border: var(--line) solid var(--ink); border-radius: var(--r-box); padding: 8px 32px 32px; }
@media (max-width: 760px) { .cl-item { grid-template-columns: 1fr; } .cl-figure .iso-svg { max-width: 320px; margin: 0; } .cl-detail { padding: 4px 18px 24px; } }

/* ==========================================================================
   (3) PORTFOLIO
   ========================================================================== */
.portfolio { border-top: var(--line) solid var(--ink); padding-top: 72px; padding-bottom: 40px; }
.pf-head { max-width: 760px; }
.pf-head .sec-title { margin-top: 8px; }
.pf-intro { margin-top: 16px; font-size: var(--fs-lg); line-height: 1.6; }
.pf-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 48px; margin-top: 56px; }
.pf-rail { position: sticky; top: calc(var(--bar-h) + 24px); align-self: start; }
.pf-rail ol { border-left: 1px solid var(--rule); }
.pf-rail-link { display: grid; grid-template-columns: 38px 1fr auto; gap: 6px; align-items: baseline; padding: 7px 0 7px 12px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; font-size: var(--fs-xs); color: var(--ink-2); }
.pf-rail-link:hover { color: var(--ink); }
.pf-rail-link.is-cur { border-left-color: var(--ink); color: var(--ink); font-weight: 700; }
.pf-rail-link.is-cur .pf-rail-n { background: var(--lime); border-color: var(--ink); }
.pf-rail-year { font-size: 10.5px; color: var(--ink-3); }
.pf-rail-n { font-size: 10px; min-width: 20px; text-align: center; border: 1px solid var(--rule); border-radius: 99px; padding: 0 4px; }
.pf-cases { min-width: 0; }
.pf-group + .pf-group { margin-top: 72px; }
.pf-group-head { padding-bottom: 20px; }
.pf-group-meta { font-size: 11px; color: var(--ink-3); }
.pf-group-name { margin-top: 4px; font-size: var(--fs-2xl); line-height: 1.15; font-weight: 800; letter-spacing: -0.035em; }
.pf-group-title { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-sm); }

.case { border-top: var(--line) solid var(--ink); padding: 32px 0 48px; }
.case-head { display: grid; gap: 8px; max-width: 820px; }
.case-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-3); }
.case-title { font-size: var(--fs-xl); line-height: 1.3; font-weight: 800; letter-spacing: -0.025em; }
.case-role { font-size: var(--fs-sm); color: var(--ink-2); }
.case-role .mono { font-size: 11px; color: var(--ink-3); margin-right: 2px; }
.case-line { margin-top: 8px; padding: 14px 18px 16px; border: var(--line) solid var(--ink); border-left-width: 6px; border-radius: 4px var(--r-box) var(--r-box) 4px; }
.case-line-label { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.case-line-text { margin-top: 4px; font-size: var(--fs-md); font-weight: 600; line-height: 1.6; }
.case-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 40px; margin-top: 28px; align-items: start; }
.case-blocks { display: grid; gap: 24px; min-width: 0; }
.blk-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.blk-no { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 4px; border: var(--line) solid var(--ink); border-radius: 4px; font-size: 10.5px; }
.blk--result .blk-no { background: var(--lime); }
.blk-items { margin-top: 10px; display: grid; gap: 8px; }
.blk-items li { position: relative; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.7; }
.blk-items li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 7px; background: var(--ink); }
.blk--problem .blk-items li::before { background: none; border: 1.5px solid var(--ink); }
.case-viz { min-width: 0; border: var(--line) solid var(--ink); border-radius: var(--r-card); padding: 14px 14px 12px;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; }
.vz-cap { margin-top: 10px; font-size: 10.5px; color: var(--ink-3); line-height: 1.6; background: var(--paper); }
.vz-steps { display: flex; gap: 6px; margin-bottom: 10px; }
.vz-steps li { padding: 3px 10px; border: 1px dashed #b5b5b5; border-radius: 99px; font-size: 10.5px; color: var(--ink-3); background: var(--paper); transition: background 0.3s, color 0.3s; }
.vz-steps li.on { border: 1px solid var(--ink); color: var(--ink); }
.vz-steps li.cur { background: var(--lime); border: var(--line) solid var(--ink); font-weight: 700; }
.case-metrics { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.metric { border: var(--line) solid var(--ink); border-radius: var(--r-box); padding: 16px 22px 14px; background: var(--lime); min-width: 240px; }
.metric-num { font-size: var(--fs-3xl); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.metric-pre { font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; margin-right: 4px; }
.metric-unit { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; margin-left: 4px; }
.metric-label { margin-top: 6px; font-size: 11px; }
.case-tech { display: flex; gap: 12px; align-items: baseline; margin-top: 24px; }
.case-tech-label { font-size: 11px; color: var(--ink-3); flex: none; }

/* featured: sticky diagram + scroll steps (desktop only, set by JS) */
.case--featured .case-title { font-size: var(--fs-2xl); }
.is-stepmode .case-body { align-items: stretch; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.is-stepmode .case-viz { position: sticky; top: calc(var(--bar-h) + 24px); align-self: start; }
.is-stepmode .case-blocks { gap: 0; }
.is-stepmode .blk { min-height: 0; padding: 22px 0 30px; border-top: 1px solid var(--rule); opacity: 0.4; transition: opacity 0.35s; }
.is-stepmode .blk:first-child { border-top: 0; }
.is-stepmode .blk.is-cur { opacity: 1; }
.is-stepmode .blk.is-cur .blk-no { background: var(--lime); }
.is-stepmode .blk:last-child { min-height: 0; }

@media (max-width: 960px) {
  .pf-layout { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .pf-rail { display: none; }
  .case-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .portfolio { padding-top: 48px; }
  .pf-intro { font-size: var(--fs-md); }
  .case { padding: 24px 0 36px; }
  .case-viz { padding: 10px 8px; border-radius: var(--r-box); }
  .metric { min-width: 0; width: 100%; }
  .case-tech { flex-direction: column; gap: 6px; }
}

/* ---------- viz (SVG) ---------- */
.vz-canvas { min-width: 0; }
.vz-svg { display: block; width: 100%; height: auto; overflow: visible; }
.vz-ghost { fill: none; stroke: #c4c4c4; stroke-width: 1; stroke-dasharray: 3 3; }
.vz-ink { fill: none; stroke: var(--ink); stroke-width: var(--line); stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s cubic-bezier(.3,.1,.2,1) var(--d, 0s); }
.on > .vz-ink, .on > .iso-box > .vz-ink { stroke-dashoffset: 0; }
.vz-ink--group { stroke-width: 1; }
.vz-fill { fill: var(--paper); stroke: none; transition: fill 0.4s 0.2s; }
.vz-shadow { fill: var(--paper); stroke: #c4c4c4; stroke-width: 1; transition: stroke 0.4s; }
.on > .vz-shadow { stroke: var(--ink); }
.vz-label { font-size: 13px; font-weight: 600; fill: #a8a8a8; transition: fill 0.3s calc(var(--d, 0s) + 0.25s); }
.vz-sub { font-family: var(--mono); font-size: 10.5px; fill: #bcbcbc; transition: fill 0.3s 0.3s; }
.on > .vz-label { fill: var(--ink); }
.on > .vz-sub { fill: var(--ink-2); }
.vz-arrow { fill: var(--ink); opacity: 0; transition: opacity 0.2s 0.55s; }
.on > .vz-arrow { opacity: 1; }
.vz-elabel { font-family: var(--mono); font-size: 10.5px; fill: #b0b0b0; transition: fill 0.3s 0.4s; }
.on > .vz-elabel { fill: var(--ink); }
.vz-tagbg { fill: var(--paper); }
.vz-tag { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.on > .vz-tag { fill: var(--ink); }
.vz-node--box .vz-ink, .vz-node--double .vz-ink { stroke-width: var(--line); }
.vz-node--new .vz-ink { stroke-width: 2.6px; }
.cur > .vz-fill { fill: #f7fde0; }
.is-hl .is-hlnode > .vz-fill { fill: var(--lime); }
.is-hl .is-hlnode .iso-face { fill: var(--lime); }
.vz-strike { fill: none; stroke: var(--ink); stroke-width: var(--line); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s 0.2s; }
.is-past0 .vz-node--old .vz-strike { stroke-dashoffset: 0; }
.is-past0 .vz-node--old .vz-label { fill: var(--ink-3); }
.vz-edge--dash .vz-ink, .vz-edge--old .vz-ink { stroke-dasharray: 4 3; stroke-dashoffset: 0; opacity: 0; transition: opacity 0.4s var(--d, 0s); }
.vz-edge--dash.on .vz-ink, .vz-edge--old.on .vz-ink { opacity: 1; }
.is-past0 .vz-edge--old.on .vz-ink { opacity: 0.25; }
.is-past0 .vz-edge--old .vz-elabel { fill: var(--ink-3); }
.vz-edge--replace .vz-elabel { font-weight: 700; }
.vz-canvas.no-anim *, .vz-canvas.no-anim *::before { transition: none !important; }
/* layers */
.vz-layer .iso-solid { opacity: 0; transition: opacity 0.4s calc(var(--d, 0s) + 0.3s); }
.vz-layer.on .iso-solid { opacity: 1; }
.vz-layer .iso-wire { stroke: var(--ink); stroke-width: 1; }
.vz-leader { stroke-width: 1.2px; }
.vz-dot { fill: var(--ink); }
.vz-layerlabel .vz-label { font-size: 13px; }
.vz-side { margin-top: 12px; border: var(--line) solid var(--ink); border-radius: var(--r-box); padding: 10px 14px 12px; background: var(--paper); font-size: var(--fs-xs); opacity: 0.3; transition: opacity 0.4s 0.5s; }
.vz-side.on { opacity: 1; }
.vz-side-title { font-size: 10.5px; color: var(--ink-3); margin-bottom: 4px; }
.vz-side li + li { margin-top: 2px; }
.vz-side li::before { content: "› "; font-family: var(--mono); }
/* compare */
.vz-compare { display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; }
.vz-compare.is-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; }
.vz-compare.is-row::after { content: "→"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 18px; }
.vz-part-label { font-size: 10.5px; color: var(--ink-3); margin-bottom: 6px; background: var(--paper); display: inline-block; padding: 0 4px; }
.vz-part--after .vz-part-label { background: var(--lime); color: var(--ink); border: 1px solid var(--ink); border-radius: 3px; }

/* ==========================================================================
   detail panel
   ========================================================================== */
.detail-layer { position: fixed; inset: 0; z-index: 60; }
.detail-layer[hidden] { display: none; }
.detail-backdrop { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.82); }
.detail-panel { position: absolute; top: 24px; bottom: 24px; left: 50%; width: min(880px, calc(100% - 48px)); transform: translateX(-50%); background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.detail-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: var(--line) solid var(--ink); flex: none; }
.detail-file { font-size: 11px; color: var(--ink-3); margin-right: auto; }
.detail-close { padding: 6px 14px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: var(--fs-xs); font-weight: 600; }
.detail-close:hover { background: var(--lime); }
.detail-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.detail-content { padding: 40px 56px 64px; }
@media (max-width: 640px) { .detail-panel { top: 0; bottom: 0; width: 100%; border-radius: 0; border-width: 0; } .detail-content { padding: 20px 18px 48px; } }

.d-period { font-size: 12px; color: var(--ink-3); }
.d-company { margin-top: 6px; font-size: var(--fs-2xl); line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; }
.d-legal { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-3); }
.d-facts { margin-top: 24px; border-top: var(--line) solid var(--ink); }
.d-facts div { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.d-facts dt { color: var(--ink-3); }
.d-summary { margin-top: 24px; max-width: var(--measure); }
.d-h { display: flex; align-items: center; gap: 8px; margin: 40px 0 14px; font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: 700; }
.d-bullets li { position: relative; padding-left: 18px; max-width: var(--measure); }
.d-bullets li + li { margin-top: 6px; }
.d-bullets li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; background: var(--ink); }
.d-added { margin-top: 32px; padding: 20px 24px; border: var(--line) dashed var(--ink); border-radius: var(--r-box); }
.d-added .d-h { margin-top: 0; }
.d-added .tags { margin-top: 14px; }
.d-project { padding: 22px 0; border-top: 1px solid var(--rule); }
.d-project:last-child { border-bottom: 1px solid var(--rule); }
.d-project-name { font-size: var(--fs-md); font-weight: 700; line-height: 1.5; }
.d-project-no { font-size: 11px; margin-right: 8px; padding: 1px 5px; border: 1px solid var(--ink); border-radius: 3px; vertical-align: 2px; }
.d-role { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-2); }
.d-project .d-bullets { margin-top: 12px; }
.d-sub { display: grid; grid-template-columns: 96px 1fr; gap: 16px; margin-top: 12px; font-size: var(--fs-sm); align-items: start; }
.d-sub-label { color: var(--ink-3); line-height: 1.9; }
.d-stages { display: flex; flex-wrap: wrap; gap: 6px 16px; counter-reset: stage; }
.d-stages li { counter-increment: stage; }
.d-stages li::before { content: counter(stage) ". "; font-family: var(--mono); }
.d-case-link { display: inline-block; margin-top: 14px; font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 640px) { .d-sub, .d-facts div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0s !important; }
  .caret { animation: none; }
}
.is-static .caret { animation: none; }

/* ---------- print ---------- */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  :root { --section-gap: 24px; --fs-4xl: 2.5rem; --fs-3xl: 1.75rem; --fs-2xl: 1.375rem; --fs-xl: 1.125rem; --fs-lg: 1rem; --fs-md: 0.9375rem; --fs-sm: 0.8125rem; }
  html, body { background: #fff; }
  body { font-size: 10pt; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip-link, .topbar, .film, .detail-layer, .pf-rail, .btn, .term, .caret, .vz-steps, noscript, .noscript { display: none !important; }
  .hero { padding-top: 0; }
  .wrap { max-width: none; padding: 0; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-iso .iso-svg { max-height: 220px; }
  .limecard { break-inside: avoid; }
  .about { padding-top: 20px; }
  .is-motion .career-list, .career-list { display: block !important; padding: 0; }
  .cl-item { break-inside: avoid-page; padding: 16px 0; }
  .cl-detail, .cl-detail[hidden] { display: block !important; border: 0; padding: 0; }
  .cl-detail .d-period, .cl-detail .d-company, .cl-detail .d-legal, .cl-detail .d-summary, .d-case-link { display: none; }
  .cl-figure .iso-svg { max-width: 200px; }
  .pf-layout { display: block; margin-top: 16px; }
  .case { break-inside: auto; padding: 16px 0; }
  .case-body { grid-template-columns: 1fr 1fr; }
  .case-viz { break-inside: avoid; position: static !important; }
  .is-stepmode .blk { min-height: 0; opacity: 1; padding: 8px 0; }
  .vz-ink, .vz-strike, .iso-wire, .iso-leader { stroke-dashoffset: 0 !important; transition: none !important; }
  .vz-layer .iso-solid, .vz-side, .vz-arrow { opacity: 1 !important; }
  .vz-label { fill: var(--ink) !important; }
  .stat-fill, .is-motion .stat-fill { transform: scaleX(var(--r)) !important; }
  .section { grid-template-columns: 1fr; padding-top: 16px; }
  .site-footer { background: #fff; color: var(--ink); padding: 16px 0 0; border-top: var(--line) solid var(--ink); }
  .footer-name, .site-footer a { color: var(--ink); }
  a { text-decoration: none; }
}