/* ── system.css ── */
/* ═══════════════════════════════════════════════════════════════
   AXSynapse 대문 — 설계 체계
   모든 요소는 장식보다 구조를, 밝기보다 대비를, 친근함보다 신뢰의 무게를 우선한다.

   값의 출처: 서버 PC 코덱스에 art-direction 비평을 요청해 받은 토큰
   (2026-08-31). 내가 혼자 고른 값이 아니라 바깥 의견을 받아 정한 값이다.

   바탕이 차가운 그래파이트인 이유: 따뜻한 검정 + 금색은 시계 · 위스키 ·
   프라이빗 뱅킹의 문법이라, 노동 · 법률 플랫폼에서는 「권력자용 서비스」로
   읽힐 위험이 있다. 강철 · 문서 · 산업 설비 · 관제 화면 쪽이 우리 자리다.
   따뜻함은 강조색과 일부 광원에만 산화철색으로 넣는다.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── 색 ── 본문 대비 12:1 이상, 보조문 7:1 이상 */
  --ground:#0C0E10;
  --surface:#151719;
  --hairline:#242628;
  --ink:#E8E5DE;
  --dim:#A7A39B;
  /* 3.87 이었다 — 보조 정보가 읽기 기준(4.5) 아래였다. 재서 올렸다(2026-09-01).
     코덱스: 「보조 정보도 투명도를 낮추지 말고 별도의 실색을 쓰라」 */
  --faint:#8E949A;          /* 6.31 */
  --accent:#D87646;         /* 산화철. 4.35 → 6.08. 11px 라벨에 쓰여 올려야 했다 */
  --accent-hot:#E36B36;
  --ok:#5F9E7A; --warn:#C9A03A; --bad:#D47660;   /* 4.48 이었다 — 「불가」 항목이 기준(4.5) 바로 아래였다 */

  /* ── 표면 ── 카드에 그림자를 쓰지 않는다. 떠 있는 것에만 허용된다 */
  --border:1px solid rgba(255,255,255,.10);
  --radius:2px;
  --radius-ctl:4px;
  --panel:rgba(255,255,255,.035);

  /* ── 리듬 ── 기본 8px */
  --u:8px;
  --maxw:1280px;
  --textw:720px;

  /* ── 글꼴 ── */
  --sans:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;
  --display:"IBM Plex Sans Condensed","IBM Plex Sans KR",sans-serif;
  --mono:"IBM Plex Mono",monospace;

  /* ── 움직임 ── 광원 방향은 페이지 전체에서 하나다 */
  --t-hover:220ms;
  --t-enter:820ms;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;
  line-height:1.7;letter-spacing:-.01em;
  /* 한글은 낱말 가운데서 끊지 않는다. 양끝정렬도 하지 않는다 */
  word-break:keep-all;overflow-wrap:break-word;text-align:left;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:1px solid var(--accent-hot);outline-offset:3px;}

/* ── 글자 ── */
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.25;letter-spacing:-.02em;}
p{margin:0;max-width:62ch;}
.small{font-size:14px;line-height:1.65;letter-spacing:0;}
/* 영문 스몰캡 레이블 — 한글에는 절대 쓰지 않는다 */
.label{
  font-family:var(--mono);font-size:11px;font-weight:600;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.label--accent{color:var(--accent-hot);}
/* 라틴 디스플레이 — 좁고 크고 자간을 죈다 */
.display{
  font-family:var(--display);font-weight:500;
  line-height:1.0;letter-spacing:-.03em;
}

/* ── 레이아웃 ── */
.wrap{width:min(100%,var(--maxw));margin:0 auto;padding-inline:clamp(20px,4vw,40px);}
.col{max-width:var(--textw);}
.section{padding-block:clamp(56px,9vw,140px);}
/* 구분선은 정보 계층이나 상태가 실제로 바뀔 때만. 여백으로 되면 여백으로 한다 */
.section--ruled{border-top:var(--border);}

/* ── 표면 ── */
.panel{background:var(--panel);border:var(--border);border-radius:var(--radius);}
.ctl{
  display:inline-flex;align-items:center;gap:calc(var(--u)*1);
  border:var(--border);border-radius:var(--radius-ctl);
  padding:calc(var(--u)*1.25) calc(var(--u)*2);
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  transition:border-color var(--t-hover),color var(--t-hover),background var(--t-hover);
}
.ctl:hover,.ctl:focus-visible{
  border-color:rgba(227,107,54,.55);color:var(--accent-hot);background:rgba(191,90,50,.07);
}

/* ── 빛 ── 넓은 광원 0.05~0.12, 가르는 빛 1~3px · 0.10~0.20.
   광원이 글자보다 먼저 보이면 실패다. */
.lightfield{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(190,214,228,.10) 0%, rgba(150,178,196,.04) 18%,
                    rgba(12,14,16,0) 46%),
    radial-gradient(68% 46% at 50% 92%, rgba(191,90,50,.11) 0%, rgba(12,14,16,0) 76%);}
.lightfield::after{content:"";position:absolute;left:-8%;top:34%;width:116%;height:2px;
  transform:rotate(-3deg);
  background:linear-gradient(90deg, rgba(214,232,242,0) 0%, rgba(214,232,242,.16) 42%,
             rgba(214,232,242,.06) 68%, rgba(214,232,242,0) 100%);
  filter:blur(.6px);}
/* 미세 입자 — 넓은 검정 면의 밴딩을 줄인다. 무늬로 보이면 실패다 */
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.022;
  background-image:
    repeating-linear-gradient(0deg,  #fff 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;}

/* ── 히어로 공통 ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5;}
.hero__veil{position:absolute;inset:0;z-index:2;}
.hero__inner{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;}

/* ── 머리줄 ── */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*2);
  padding:calc(var(--u)*3) 0;}
.brand{display:flex;align-items:center;gap:calc(var(--u)*1.5);}
.brand__glyph{width:34px;height:34px;border:var(--border);border-radius:var(--radius);
  display:grid;place-items:center;flex-shrink:0;}
.brand__glyph svg{width:15px;height:15px;stroke:var(--accent-hot);fill:none;stroke-width:1.2;}
.brand__name{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.28em;color:var(--ink);}
.brand__sub{display:block;font-size:11px;letter-spacing:0;color:var(--faint);margin-top:2px;}
.nav{display:none;gap:calc(var(--u)*4);}
@media(min-width:64rem){.nav{display:flex;}}
.nav a{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);transition:color var(--t-hover);}
.nav a:hover{color:var(--ink);}

/* ── 본문 절 ── */
.rows{display:grid;gap:calc(var(--u)*5);}
@media(min-width:52rem){.rows{grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*4);}}
.row h3{font-size:18px;margin-bottom:calc(var(--u)*1.5);padding-top:calc(var(--u)*2);
  border-top:var(--border);}
.row p{color:var(--dim);font-size:14px;line-height:1.65;}
.row .label{display:block;margin-bottom:calc(var(--u)*1);}

.sechead{display:flex;align-items:baseline;gap:calc(var(--u)*2);flex-wrap:wrap;
  margin-bottom:calc(var(--u)*5);}
.sechead h2{font-size:clamp(22px,3vw,28px);}

footer{border-top:var(--border);padding-block:calc(var(--u)*4);}
footer .wrap{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1) calc(var(--u)*4);
  justify-content:space-between;}

/* ── 문서 식별 줄 ──
   코덱스가 짚은 것: 이 서비스의 중후함은 금속 질감이 아니라
   「이 문장이 언제, 어떤 법적 근거로 성립하는가」를 보이는 데서 완성된다. */
.cite{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:calc(var(--u)*.5) calc(var(--u)*1.5);align-items:center;}
.cite b{color:var(--dim);font-weight:400;}
.cite .st{border:1px solid rgba(95,158,122,.4);color:var(--ok);
  padding:1px 6px;border-radius:var(--radius);font-size:10px;letter-spacing:.1em;}
.cite .st--check{border-color:rgba(201,160,58,.4);color:var(--warn);}

/* ── 등장 ── 650~1000ms · 줄 시차 80~140ms · 이동 8~20px */
.enter > *{opacity:0;transform:translateY(14px);
  animation:enter var(--t-enter) cubic-bezier(.16,.8,.24,1) forwards;}
.enter > *:nth-child(2){animation-delay:110ms;}
.enter > *:nth-child(3){animation-delay:220ms;}
.enter > *:nth-child(4){animation-delay:330ms;}
.enter > *:nth-child(5){animation-delay:440ms;}
@keyframes enter{to{opacity:1;transform:none;}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .enter > *{animation:none;opacity:1;transform:none;}
  .lightfield::after{display:none;}
}

/* ── 시안 전환 막대 — 시제품에만 있다 ── */
.switcher{position:fixed;right:12px;bottom:12px;z-index:90;display:flex;gap:2px;
  background:rgba(12,14,16,.94);border:var(--border);border-radius:var(--radius);padding:3px;}
.switcher a{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--faint);padding:6px 11px;border-radius:1px;transition:var(--t-hover);}
.switcher a.on{background:var(--accent);color:#0C0E10;}
.switcher a:not(.on):hover{color:var(--ink);}
.switcher .idx{border-left:1px solid rgba(255,255,255,.12);margin-left:2px;
  padding-left:11px;font-size:10px;letter-spacing:.06em;}

/* ── landing.css ── */
/* ═══════════════════════════════════════════════════════════════
   대문 본문 — 여섯 채가 공유하는 층.
   척추는 「연결」이다. 02절(어떻게 연결되는가)이 이 대문의 중심이고,
   법령·판례는 그 판단을 뒷받침하는 근거로만 등장한다.
   토큰은 system.css — 서버 PC 코덱스 비평에서 받은 값.
   ═══════════════════════════════════════════════════════════════ */

/* ── 번호 붙은 내비 (시계·자동차 가족) ── */
.nav--num a{display:flex;align-items:baseline;gap:6px;}
.nav--num i{font-style:normal;color:var(--faint);font-size:10px;}

/* ── 히어로 아래 띠 ── 세 축을 한 줄에 세운다 */
.strip{border-top:var(--border);border-bottom:var(--border);background:rgba(255,255,255,.015);}
.strip__in{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*2) calc(var(--u)*4);
  padding-block:calc(var(--u)*2.5);}
.strip__mark{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.26em;}
.strip__ax{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--dim);}
.strip__ax i{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--accent-hot);letter-spacing:.1em;}

/* ── 신조 한 줄 ── */
.creed{padding-block:clamp(40px,7vw,80px);}
.creed__ko{font-weight:300;font-size:clamp(17px,2.4vw,22px);line-height:1.6;
  letter-spacing:-.018em;max-width:52ch;}
.creed__en{margin-top:calc(var(--u)*1.5);font-size:13px;line-height:1.6;
  color:var(--faint);max-width:62ch;letter-spacing:0;}

/* ── 절 머리 ── */
.sechead{display:flex;align-items:baseline;gap:calc(var(--u)*2);flex-wrap:wrap;
  margin-bottom:calc(var(--u)*4);}
.secnum{font-family:var(--mono);font-weight:600;font-size:12px;
  line-height:1;letter-spacing:.14em;color:var(--accent);}
.sechead h2{font-size:clamp(20px,2.8vw,26px);}
.lede{color:var(--dim);max-width:56ch;margin-bottom:calc(var(--u)*4);}

/* ── 세 칸 ── */
.rows{display:grid;gap:calc(var(--u)*4);}
@media(min-width:52rem){.rows{grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*4);}}
.row h3{font-size:17px;margin-bottom:calc(var(--u)*1.5);padding-top:calc(var(--u)*2);
  border-top:var(--border);}
.row .label{display:block;margin-bottom:calc(var(--u)*.75);}
.row p{color:var(--dim);font-size:14px;line-height:1.7;}
.row p b{color:var(--ink);font-weight:500;}

/* ── 회로 ── 이 대문의 중심.
   코덱스 지적(2026-08-31): 마지막 칸만 강조하면 「연결」이 아니라 「제도에 도착한다」로 읽힌다.
   다섯 칸을 같은 위계로 낮추고, 관통하는 선 하나가 스크롤에 따라 이어지게 한다.
   「다시 현장으로」는 문장이 아니라 제도에서 현장으로 돌아가는 실제 귀환선이다. */
.circuit{position:relative;padding-bottom:calc(var(--u)*6);}
.circuit__line{position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--hairline);z-index:1;}
.circuit__line i{display:block;height:100%;width:0;background:var(--accent);
  box-shadow:0 0 10px rgba(191,90,50,.5);transition:width 500ms cubic-bezier(.3,.8,.3,1);}
.chain{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative;z-index:2;}
@media(min-width:60rem){.chain{grid-template-columns:repeat(5,1fr);}}
.chain__n{position:relative;padding:calc(var(--u)*3) calc(var(--u)*2.5);}
.chain__n .label{display:block;margin-bottom:calc(var(--u)*1);}
.chain__n b{display:block;font-weight:500;font-size:15px;letter-spacing:-.015em;}
.chain__n small{display:block;margin-top:calc(var(--u)*1);font-size:12.5px;
  line-height:1.6;color:var(--faint);letter-spacing:0;}
/* 회로 위의 마디 — 다섯이 같은 크기다 */
.chain__n::before{content:"";position:absolute;left:calc(var(--u)*2.5);top:-4px;
  width:7px;height:7px;border-radius:999px;background:var(--ground);
  border:1px solid var(--hairline);z-index:3;transition:border-color 500ms,background 500ms;}
.circuit.lit .chain__n::before{border-color:var(--accent);background:var(--accent);}
/* 귀환선 — 제도에서 현장으로 돌아간다. 회로가 닫히는 자리 */
.circuit__back{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*5);
  border-left:1px solid var(--hairline);border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);border-radius:0 0 var(--radius) var(--radius);
  display:flex;align-items:flex-end;justify-content:center;
  transition:border-color 600ms;}
.circuit.lit .circuit__back{border-color:rgba(191,90,50,.55);}
.circuit__back .label{transform:translateY(50%);background:var(--ground);
  padding:0 calc(var(--u)*1.5);transition:color 600ms;}
.circuit.lit .circuit__back .label{color:var(--accent-hot);}
.circuit__back .label::before{content:"↩ ";}

/* ── ② 가족 차이는 여기 한 곳에만 준다 ──
   A·B·C 는 번호 붙은 독립 패널 — 「다섯 장을 읽는 집」
   D·E·F 는 경계를 없앤 하나의 무대 — 「하나의 관계를 통과하는 집」 */
[data-family="watch"] .chain{border:var(--border);border-radius:var(--radius);
  background:var(--panel);}
[data-family="watch"] .chain__n{border-bottom:var(--border);}
[data-family="watch"] .chain__n:last-child{border-bottom:none;}
@media(min-width:60rem){
  [data-family="watch"] .chain__n{border-bottom:none;border-right:var(--border);}
  [data-family="watch"] .chain__n:last-child{border-right:none;}
}
[data-family="watch"] .chain__n .label::before{
  content:attr(data-n);font-family:var(--mono);color:var(--faint);margin-right:6px;}
[data-family="nate"] .chain{background:none;border:none;}
[data-family="nate"] .chain__n{padding-left:0;padding-right:calc(var(--u)*3);}
[data-family="nate"] .chain__n::before{left:0;}

/* ── 사례 ── 「연결된 뒤 무엇이 달라지는가」의 증거 */
.case{list-style:none;margin:0 0 calc(var(--u)*5);padding:0;display:grid;gap:0;
  border-top:var(--border);}
.case li{display:grid;gap:calc(var(--u)*.75);padding:calc(var(--u)*2.5) 0;
  border-bottom:var(--border);}
@media(min-width:52rem){
  .case li{grid-template-columns:11rem 1fr;gap:calc(var(--u)*4);align-items:baseline;}
  .case li b,.case li small{grid-column:2;}
}
.case b{font-weight:500;font-size:15.5px;letter-spacing:-.015em;}
.case small{font-size:13px;line-height:1.65;color:var(--faint);letter-spacing:0;}
.case__who{display:grid;gap:calc(var(--u)*3);}
@media(min-width:44rem){.case__who{grid-template-columns:repeat(3,1fr);}}
.case__who div{padding-top:calc(var(--u)*2);border-top:1px solid rgba(191,90,50,.35);}
.case__who .label{display:block;color:var(--accent-hot);margin-bottom:calc(var(--u)*1);}
.case__who p{font-size:14px;color:var(--dim);}

/* ── 데이터 신뢰 정보 ── 법은 주인공이 아니다. 뒷받침하는 층으로 내려놓는다 */
.trust{border-top:var(--border);background:rgba(255,255,255,.012);
  padding-block:clamp(40px,6vw,72px);}
.trust__rows{display:grid;gap:calc(var(--u)*2.5);margin-top:calc(var(--u)*2);}
@media(min-width:52rem){.trust__rows{grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*4);}}
.trust__rows b{display:block;font-weight:500;font-size:14px;margin-bottom:4px;}
.trust__rows span{font-size:12.5px;line-height:1.65;color:var(--faint);letter-spacing:0;}

/* ── 누구를 위한 것인가 ── */
.row--who h3{font-weight:400;}
.row--who .label{color:var(--accent-hot);}

/* ── 선언 ── */
.credo{padding-block:clamp(56px,10vw,120px);
  border-top:var(--border);background:rgba(255,255,255,.012);}
.credo__t{font-weight:400;font-size:clamp(22px,3.6vw,34px);line-height:1.35;
  letter-spacing:-.025em;margin:calc(var(--u)*2) 0 calc(var(--u)*2);max-width:22ch;}
.credo__b{color:var(--dim);max-width:56ch;font-size:15px;}

/* ── 영상 ── */
.films{display:grid;gap:calc(var(--u)*2);}
@media(min-width:44rem){.films{grid-template-columns:repeat(3,1fr);}}
.film{margin:0;}
.film--wide{grid-column:1/-1;}
.film img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border:var(--border);border-radius:var(--radius);filter:saturate(.82) brightness(.86);
  transition:filter var(--t-hover);}
.film:hover img{filter:saturate(1) brightness(1);}
.film figcaption{margin-top:calc(var(--u)*1.25);display:flex;flex-direction:column;gap:3px;}
.film figcaption b{font-weight:500;font-size:14px;}

/* ── 맺음 ── */
.cta{border-top:var(--border);padding-block:clamp(56px,10vw,120px);}
.cta__in{display:flex;flex-wrap:wrap;gap:calc(var(--u)*4);
  align-items:flex-end;justify-content:space-between;}
.cta__t{font-weight:300;font-size:clamp(22px,3.6vw,32px);line-height:1.35;
  letter-spacing:-.025em;}
.cta__act{display:flex;flex-direction:column;gap:calc(var(--u)*1.5);align-items:flex-start;}
.ctl--lg{padding:calc(var(--u)*1.75) calc(var(--u)*3);}

footer{border-top:var(--border);padding-block:calc(var(--u)*4);}
footer .wrap{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1) calc(var(--u)*4);
  justify-content:space-between;}

/* ── 히어로 공통 ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55;}
.hero__veil{position:absolute;inset:0;z-index:2;}
.hero__inner{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;}
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:calc(var(--u)*3);padding-block:calc(var(--u)*6);}
.lead{font-weight:300;font-size:clamp(24px,4.4vw,40px);line-height:1.26;
  letter-spacing:-.024em;max-width:19ch;}
.lead b{font-weight:500;}
.sub{color:var(--dim);max-width:46ch;}
.sub em{display:block;font-style:normal;color:var(--faint);font-size:13px;
  margin-top:6px;letter-spacing:0;}
.footline{padding-bottom:calc(var(--u)*3);}

/* ── 문서 식별 줄 ── 화면 맨 아래에 조용히 둔다. 주인공이 아니다 */
.cite{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;}
.cite b{color:var(--dim);font-weight:400;}
.cite .st{border:1px solid rgba(95,158,122,.38);color:var(--ok);
  padding:1px 6px;border-radius:var(--radius);font-size:9.5px;letter-spacing:.1em;}

/* ── 전후 구조 ── 코덱스 1순위 장치. 여섯 채 전부 히어로 바로 아래에 둔다.
   성과를 주장하지 않고 상태의 차이만 보인다. */
.ba{border-top:var(--border);background:rgba(255,255,255,.014);
  padding-block:clamp(40px,6vw,72px);}
.ba__grid{display:grid;gap:calc(var(--u)*2);margin-top:calc(var(--u)*2);}
@media(min-width:52rem){.ba__grid{grid-template-columns:1fr auto 1fr;align-items:center;
  gap:calc(var(--u)*4);}}
.ba__col{padding-top:calc(var(--u)*2);border-top:var(--border);}
.ba__col .label{display:block;margin-bottom:calc(var(--u)*1);}
.ba__col p{font-size:14.5px;color:var(--dim);}
.ba__col--after{border-top-color:rgba(191,90,50,.5);}
.ba__col--after .label{color:var(--accent-hot);}
.ba__col--after p b{color:var(--ink);font-weight:500;}
.ba__arrow{display:none;}
@media(min-width:52rem){
  .ba__arrow{display:block;width:34px;height:1px;background:var(--hairline);position:relative;}
  .ba__arrow::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
    transform:translateY(-50%) rotate(45deg);
    border-top:1px solid var(--accent);border-right:1px solid var(--accent);}
}
.ba__note{margin-top:calc(var(--u)*3);font-size:13px;color:var(--faint);max-width:62ch;}
.ba__note b{color:var(--dim);font-weight:400;}

/* ── 판단 경로 ── 각 단계에서 무엇이 더해지는지 한 문장씩 */
.path{list-style:none;margin:calc(var(--u)*2) 0 calc(var(--u)*6);padding:0;
  display:grid;gap:0;border-top:var(--border);}
@media(min-width:60rem){.path{grid-template-columns:repeat(4,1fr);border-top:none;}}
.path li{padding:calc(var(--u)*2.5) 0;border-bottom:var(--border);position:relative;}
@media(min-width:60rem){
  .path li{padding:calc(var(--u)*3) calc(var(--u)*2.5) calc(var(--u)*3) 0;
    border-bottom:none;border-top:var(--border);}
  .path li::after{content:"";position:absolute;right:calc(var(--u)*1.2);top:calc(var(--u)*3.4);
    width:6px;height:6px;transform:rotate(45deg);
    border-top:1px solid rgba(191,90,50,.6);border-right:1px solid rgba(191,90,50,.6);}
  .path li:last-child::after{display:none;}
}
.path .label{display:block;margin-bottom:calc(var(--u)*1);}
.path b{display:block;font-weight:500;font-size:15px;letter-spacing:-.015em;}
.path small{display:block;margin-top:calc(var(--u)*1);font-size:12.5px;line-height:1.65;
  color:var(--faint);letter-spacing:0;}
.path small b{display:inline;color:var(--dim);font-size:inherit;}

/* ── 물음의 변화 ── */
.qshift{border:var(--border);border-radius:var(--radius);background:var(--panel);
  padding:calc(var(--u)*3);margin-bottom:calc(var(--u)*6);}
.qshift .label{display:block;margin-bottom:calc(var(--u)*2);}
.qshift__a{font-size:clamp(16px,2.2vw,20px);color:var(--faint);
  text-decoration:line-through;text-decoration-color:rgba(107,112,117,.5);}
.qshift__b{font-size:clamp(17px,2.6vw,24px);font-weight:400;letter-spacing:-.02em;
  margin-top:calc(var(--u)*1.5);position:relative;padding-left:calc(var(--u)*3);}
.qshift__b::before{content:"→";position:absolute;left:0;color:var(--accent-hot);}
.qshift__n{margin-top:calc(var(--u)*2.5);font-size:13px;color:var(--faint);}
.qshift__n b{color:var(--dim);font-weight:400;}

/* ── type3d.css ── */
/* ═══════════════════════════════════════════════════════════
   글자의 입체감 (위원장 지시 2026-08-31 — 「조금 더 입체감 있게, 중후하게」).
   코덱스 경고를 지킨다: 모든 요소를 입체로 만들면 스큐어모피즘이 된다.
   계층상 가장 중요한 것에만 쓴다 — 표제 · 절 번호 · 큰 선언문.
   빛은 위에서 온다. 그래서 솟은 것은 윗면이 밝고, 새긴 것은 윗면이 어둡다.
   ═══════════════════════════════════════════════════════════ */

/* 새김(음각) — 표면을 파낸 것. 무겁고 가공된 느낌 */
.t-carve{
  color:rgba(232,229,222,.085);
  text-shadow:
    0 -1px 1px rgba(0,0,0,.92),
    0  1px 0   rgba(232,229,222,.22),
    0  2px 1px rgba(0,0,0,.55),
    0  6px 14px rgba(0,0,0,.4);
}
/* 솟음(양각) — 표면 위로 올라온 것. 표제 덩어리에만 */
.t-raise{
  color:rgba(232,229,222,.14);
  text-shadow:
    0 -1px 0 rgba(232,229,222,.20),
    0  1px 1px rgba(0,0,0,.85),
    0  2px 0 rgba(0,0,0,.55),
    0  8px 18px rgba(0,0,0,.45);
}
/* 한국어 선언문 — 의미상 주인공이라 가장 선명해야 한다.
   입체는 얕게, 대비는 높게. */
.t-lead{
  color:var(--ink);
  text-shadow:0 1px 2px rgba(0,0,0,.75), 0 6px 22px rgba(0,0,0,.5);
}
/* 절 번호는 더 이상 배경 장식이 아니다 — 작고 또렷한 표식으로 바뀌었다(2026-09-01).
   코덱스: 「탐색을 돕지 않는 거대한 흐린 번호는 관습적 장식일 뿐이다」
   입체 효과를 여기 걸지 않는다. landing.css 의 규칙이 그대로 살아야 한다. */

/* ── motion.css ── */
/* ═══════════════════════════════════════════════════════════
   히어로가 10~20초 동안 스스로 움직인다 (위원장 지시 2026-08-31).
   Seedance 없이 CSS 만으로 한다. 한 바퀴가 끝나면 멈춘 듯 잦아든다 —
   배경이 계속 움직이면 글자를 이기기 때문이다.
   코덱스 규칙을 지킨다: 광원 방향은 하나, 회전·부유·과한 패럴랙스 없음.
   ═══════════════════════════════════════════════════════════ */

/* ① 아주 느린 밀어 넣기 — 18초에 걸쳐 1.07 → 1.00 */
.hero__img{animation:pushin 18s cubic-bezier(.22,.62,.28,1) forwards;
  transform-origin:58% 52%;}
@keyframes pushin{from{transform:scale(1.07);}to{transform:scale(1.0);}}

/* ② 빛이 화면을 한 번 건넌다 — 14초. 한 번만 지나가고 끝난다 */
.hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,
    rgba(214,232,242,0) 38%, rgba(214,232,242,.055) 48%,
    rgba(232,200,160,.045) 53%, rgba(214,232,242,0) 62%);
  transform:translateX(-120%);
  animation:sweep 14s cubic-bezier(.4,0,.2,1) 1.6s forwards;}
@keyframes sweep{to{transform:translateX(120%);}}

/* ③ 글자가 차례로 자리를 잡는다 — 총 약 3초, 그 뒤 배경만 계속 움직인다 */
.stage.enter > *{opacity:0;transform:translateY(16px);
  animation:enter 900ms cubic-bezier(.16,.8,.24,1) forwards;}
.stage.enter > *:nth-child(1){animation-delay:250ms;}
.stage.enter > *:nth-child(2){animation-delay:420ms;}
.stage.enter > *:nth-child(3){animation-delay:590ms;}
.stage.enter > *:nth-child(4){animation-delay:760ms;}
.stage.enter > *:nth-child(5){animation-delay:930ms;}
.stage.enter > *:nth-child(6){animation-delay:1100ms;}

/* ④ 히어로 아래쪽에 아주 느린 숨 — 20초 주기. 화면이 죽어 보이지 않게만 */
.lightfield{animation:breathe 20s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.86;}50%{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .hero__img,.hero::after,.lightfield{animation:none;}
  .hero__img{transform:none;}
  .hero::after{display:none;}
  .stage.enter > *{animation:none;opacity:1;transform:none;}
}

/* ── sections.css ── */
/* ═══════════════════════════════════════════════════════════════
   본문 절 그림 — 02 · 03 · 04 · 05
   코덱스 규격(2026-08-31): 본문 이미지는 장식이 아니라 「설명을 대신하는 증거」다.
   절제된 다이어그램 · 데이터 구조 · 인터페이스 조각 · 편집형 그래픽이 맞고,
   스톡 인물 사진 · 의미 없는 추상 3D · 네온 입자 · 가짜 대시보드 ·
   절마다 다른 스타일은 페이지를 싸게 만든다.
   그래서 사진을 쓰지 않고 코드로 그린다 — 스타일이 절대 흔들리지 않고,
   AI 이미지의 깨진 글자(레퍼런스에서 실제로 발생)가 생길 수 없다.

   폰과 PC 를 따로 둔다(위원장 지시):
     PC — 그림이 제 크기로 자기 몫을 한다
     폰 — 자리가 없다. 얇은 띠로 줄이고, 04 는 아예 감춘다
   ═══════════════════════════════════════════════════════════════ */
.figure{margin:0 0 calc(var(--u)*4);border:var(--border);border-radius:var(--radius);
  background:var(--panel);overflow:hidden;}
.figure svg{display:block;width:100%;height:auto;}
.figure figcaption{padding:calc(var(--u)*1.5) calc(var(--u)*2);border-top:var(--border);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);}
.figure figcaption b{color:var(--dim);font-weight:400;}

/* 폰 — 자리를 아끼려 높이를 줄인다 */
@media(max-width:52rem){
  .figure svg{height:120px;object-fit:cover;}
  .figure--wide svg{height:96px;}
  .figure--hide-sm{display:none;}         /* 04 는 폰에서 감춘다 */
}
@media(min-width:52rem){
  .figure{margin-bottom:calc(var(--u)*5);}
}

/* ── 형성 애니메이션 캔버스 ── 히어로 위에 얹는다.
   사진이 있으면 그 위를 지나가고, C 처럼 사진이 없으면 이것이 주인공이 된다. */
.netform{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;opacity:.9;}
/* 사진이 없는 C 에서는 이것이 주인공이다.
   다만 글자 위에 겹치면 안 된다 — 오른쪽 빈 자리에 놓는다.
   코덱스가 말한 「의도적 여백」이 바로 이 자리이고, 여기가 형성망의 무대다. */
.hero--type .netform{opacity:1;left:auto;right:0;width:50%;top:14%;height:70%;}
@media(max-width:64rem){
  .hero--type .netform{width:100%;left:0;right:auto;top:auto;bottom:0;height:34%;opacity:.6;}
}
@media(max-width:52rem){.netform{opacity:.65;}}

/* ── 폰에서 본문을 키운다 (2026-09-01) ──────────────────────
   코덱스: 모바일 본문 최소 16px, 한국어는 17~18px 권장.
   14.5px 로는 「확실히 잘 보인다」가 안 된다. 행간도 함께 넉넉히. */
@media (max-width:46rem){
  /* 더 좁은 규칙(.ba__col p 등)이 이겨서 14.5px 이 남아 있었다 — 이름을 다 적는다 */
  section p, .row p, .lede, .ba__col p, .case__who p, .credo__b,
  .seam__concl, .fig figcaption{font-size:16.5px;line-height:1.72;}
  .fact span, .axis .t small, .step .t small, .thread .what{font-size:14px;}
  .chain__n b, .path b{font-size:16px;}
}

/* ── warm.css ── */
/* ═══════════════════════════════════════════════════════════════
   시계 · 자동차 가족의 색 (A · B · C)
   위원장 결정 2026-08-31: 「되돌려 — 원래 그 느낌으로」.

   코덱스는 따뜻한 검정+금색이 시계·위스키·프라이빗 뱅킹으로 읽힐 위험을
   경고했다. 그 경고는 유효하나, 여섯을 놓고 고르는 자리이므로
   실물을 보고 판단하시는 것이 맞다. D·E·F 는 흑연으로 남아 대조군이 된다.
   ═══════════════════════════════════════════════════════════════ */
[data-family="watch"]{
  --ground:#0B0806;          /* 따뜻한 검정 */
  --surface:#17110C;
  --hairline:#2E241A;
  --ink:#F2ECE1;
  --dim:#A79C8B;
  --faint:#A09482;           /* 3.85 → 6.71 (2026-09-01) */
  --accent:#C9954E;          /* 구릿빛 금 */
  --accent-hot:#E6C288;
  --border:1px solid rgba(242,236,225,.11);
  --panel:rgba(242,236,225,.035);
}
/* 빛도 따뜻하게 — 위에서 오는 결은 같되 색만 바꾼다 */
[data-family="watch"] .lightfield{
  background:
    radial-gradient(78% 60% at 56% 44%, rgba(196,124,54,.30) 0%, rgba(150,92,40,.14) 38%,
                    rgba(11,8,6,0) 76%),
    radial-gradient(46% 30% at 24% 84%, rgba(214,148,72,.12) 0%, rgba(11,8,6,0) 72%);}
[data-family="watch"] .lightfield::after{
  background:linear-gradient(90deg, rgba(255,214,150,0) 0%, rgba(255,206,140,.20) 30%,
             rgba(255,220,165,.26) 48%, rgba(255,200,132,.08) 70%, rgba(255,200,132,0) 100%);
  height:3px;filter:blur(2px);}

/* 시계·자동차의 배치 장치 — 금박 표제 · 스펙 패널 · MANIFESTO */
[data-family="watch"] .mass{color:transparent;
  background:linear-gradient(178deg,#E9C68C 0%,#C9954E 32%,#B58445 60%,#8A5F30 100%);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 .010em 0 #8E6A31, 0 .020em 0 #7D5C2B, 0 .034em 0 #6B4E25,
              0 .055em .08em rgba(0,0,0,.55);
  opacity:.95;}
/* 절 번호는 이제 작고 또렷한 표식이다 — 흐리게 덮던 .22 를 걷는다(2026-09-01) */
[data-family="watch"] .secnum{color:var(--accent);}
[data-family="watch"] .row h3,[data-family="watch"] .chain__n b{letter-spacing:-.01em;}
[data-family="watch"] .strip{background:rgba(242,236,225,.02);}
[data-family="watch"] .ba__col--after{border-top-color:rgba(201,149,78,.55);}
[data-family="watch"] .film img{filter:saturate(.9) brightness(.9) sepia(.06);}

/* ── light1.css ── */
/* ═══════════════════════════════════════════════════════════
   밝은 판 **첫 번째** — 크림빛 + 황동 + 음각 (2026-08-31)

   위원장이 「촌스럽다」고 물린 판이다. 그런데 **견줄 수 있게 남겨 두라**는
   지시가 있어(2026-09-01) 지우지 않고 `light1` 이라는 이름으로 따로 세웠다.
   두 번째 판은 `light.css` 에 있다 — 차가운 흰색 · 회색 알루미늄 · 평평한 활자.
   H · J · K 가 이 판을 쓰고, L · M · N 이 두 번째 판을 쓴다.

   ── 아래는 원문 그대로 ──
   흰 바탕 — 이상현 차장 의견(2026-08-31): 「흰 배경은 어떠세요…」

   색 체계 전체가 어두운 쪽으로 짜여 있어, 토큰을 뒤집는 것만으로는
   덜 뒤집힌 자리가 남는다. 그래서 토큰 + 어둠을 전제한 규칙 몇 개를 함께 고친다.
   대비 기준은 그대로다 — 본문 12:1 이상, 보조문 7:1 이상을 밝은 쪽에서도 맞춘다.
   ═══════════════════════════════════════════════════════════ */
body[data-theme="light1"]{
  --ground:#F2EFE8;          /* 따뜻한 종이빛. 순백은 눈이 시리다 */
  --surface:#FFFFFF;
  --hairline:#DED8CC;
  /* 값은 눈대중이 아니라 재서 정했다(2026-08-31). 처음 값은 어두운 바탕용이 그대로
     넘어와, 보조문 영문 병기 3.38 · 라벨 4.2 로 위원장이 「흐리다」고 지적했다.
     밝은 바탕에서는 같은 회색이 훨씬 흐려 보인다 — 종이 위에서 다시 잡았다. */
  --ink:#141719;
  --dim:#3D4349;             /* 본문·보조문. 14~16px 에 쓰이므로 넉넉히 */
  --faint:#484E54;           /* 메타데이터. 그래도 읽혀야 한다 */
  --accent:#8F3A16;          /* 산화철 — 밝은 바탕에서는 더 내려야 한다 */
  --accent-hot:#8A3410;
  --ok:#2F6B4A; --warn:#8A6A12; --bad:#9B3A28;
  --border:1px solid rgba(0,0,0,.14);
  --panel:rgba(0,0,0,.028);
  background:var(--ground);color:var(--ink);
}

/* 어둠을 전제한 것들 — 밝은 바탕에서는 반대로 깔아야 한다 */
body[data-theme="light1"] .lightfield{
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.015) 20%, rgba(0,0,0,0) 48%),
    radial-gradient(68% 46% at 50% 94%, rgba(166,70,30,.07) 0%, rgba(0,0,0,0) 76%);}
body[data-theme="light1"] .lightfield::after{
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.07) 42%,
             rgba(0,0,0,.03) 68%, rgba(0,0,0,0) 100%);}
/* 미세 입자는 흰 바탕에서 지저분해 보인다 */
body[data-theme="light1"] .grain{display:none;}

/* 아래 전환 막대 — 어두운 판이 흰 바탕에서 튄다 */
body[data-theme="light1"] .switcher{background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.14);box-shadow:0 2px 10px rgba(0,0,0,.10);}
body[data-theme="light1"] .switcher a{color:var(--dim);}
body[data-theme="light1"] .switcher a.on{background:var(--accent);color:#FFF;}
body[data-theme="light1"] .switcher a:not(.on):hover{color:var(--ink);}

/* 카드·표면 — 흰 바탕에서는 「띄우는」 대신 「선으로 가른다」 */
body[data-theme="light1"] .card,
body[data-theme="light1"] .fig,
body[data-theme="light1"] .row{background:var(--surface);}

/* 큰 절 번호 — 어두운 바탕에서 흐릿하게 두던 값이라 종이 위에서는 안 보인다.
   44px 이라도 대비 3.0 은 넘어야 한다(실측 2.32 였다) */
/* ── 입체 활자 — 빛이 위에서 오는 것은 같되, 밝은 면과 그늘이 뒤바뀐다 ──
   어두운 판에서는 밝은 글자를 어둡게 파냈다. 종이 위에서는 반대다 —
   어두운 글자를 파내고, 아래쪽에 흰 반사를 둔다.
   안 뒤집으면 C · G 의 큰 활자가 흰 바탕에서 통째로 사라진다. */
/* 새김은 원래 「표면에 파낸 자국」이라 흐린 것이 맞다(어두운 판의 C·G 도 1.2 다).
   다만 흰 바탕에서는 이것이 회사 이름이라 「안 보인다」는 말을 듣는다.
   큰 글씨 기준 3.0 을 넘기는 최소값으로 올린다 — 재서 .55 다. 새김의 결은 그대로 둔다. */
body[data-theme="light1"] .t-carve{
  color:rgba(20,23,25,.55);
  text-shadow:
    0 -1px 1px rgba(255,255,255,.95),
    0  1px 0   rgba(20,23,25,.30),
    0  2px 1px rgba(255,255,255,.7),
    0  6px 14px rgba(20,23,25,.14);
}
body[data-theme="light1"] .t-raise{
  color:rgba(20,23,25,.34);
  text-shadow:
    0 -1px 0 rgba(20,23,25,.26),
    0  1px 1px rgba(255,255,255,.95),
    0  2px 0 rgba(255,255,255,.7),
    0  8px 18px rgba(20,23,25,.16);
}
body[data-theme="light1"] .t-lead{
  color:var(--ink);
  text-shadow:0 1px 2px rgba(255,255,255,.85), 0 6px 22px rgba(255,255,255,.6);
}
/* #9AA0A6 은 2.3 이었다 — 눈대중으로 고르면 이렇게 된다. 계산해서 #7E848A(3.3) 로 */
/* 절 번호가 44px 흐린 숫자에서 12px 또렷한 표식으로 바뀌었다(2026-09-01).
   #7E848A 는 큰 글씨 기준(3.0)에 맞춘 값이라 작은 글씨에서는 3.29 로 모자란다. */
body[data-theme="light1"] .secnum{color:var(--accent);text-shadow:none;}

/* 아주 옅은 구획 바탕 — 흰 바탕에서는 흰색을 얹어야 안 보인다. 반대로 깐다 */
body[data-theme="light1"] .strip,
body[data-theme="light1"] .trust,
body[data-theme="light1"] .ba{background:rgba(20,23,25,.022);}

/* 히어로 위 큰 배경 워드마크 */
body[data-theme="light1"] .mass{color:rgba(0,0,0,.045);}

/* 성장기 라벨 — 밝은 바탕에서는 흰 글씨가 사라진다 */
body[data-theme="light1"] .hg__tag{color:rgba(21,24,27,.68);}
body[data-theme="light1"] .hg__tag--nexus{color:rgba(15,17,20,.96);}
body[data-theme="light1"] .hg__tag--nexus small{color:rgba(21,24,27,.62);}
body[data-theme="light1"] .hg__ring{border-color:rgba(0,0,0,.20);}
body[data-theme="light1"] .hg__bornmark{color:rgba(15,17,20,.94);}
body[data-theme="light1"] .hg__bornmark small{color:rgba(21,24,27,.6);}
body[data-theme="light1"] .hg__bornline{
  background:linear-gradient(270deg,rgba(21,24,27,.6),rgba(21,24,27,0));}

/* ── 미는 칸막이(K = F 의 흰바탕판) ──────────────────────────
   F 의 상자는 「어두운 히어로 위에 떠 있는 옅은 받침 + 밝은 글자」로 맞춰져 있다.
   흰 히어로 위에서는 그대로 두면 검은 딱지에 흰 글씨가 된다.
   같은 원리를 뒤집는다 — 옅은 흰 받침에 어두운 글자.
   (2026-09-01, audit_colors.py 가 build.py 711~796 줄에서 잡아냈다) */
body[data-theme="light1"] .seam{border-color:rgba(20,23,25,.18);}
body[data-theme="light1"] .seam__persp{color:var(--accent-hot);
  background:rgba(255,255,255,.62);border-bottom-color:rgba(20,23,25,.16);}
body[data-theme="light1"] .side.l{background:linear-gradient(120deg,rgba(30,60,86,.10),rgba(255,255,255,.04));}
body[data-theme="light1"] .side.r{background:linear-gradient(120deg,rgba(120,58,26,.10),rgba(255,255,255,.04));}
body[data-theme="light1"] .side h4{background:rgba(255,255,255,.72);
  text-shadow:0 1px 2px rgba(255,255,255,.9);}
body[data-theme="light1"] .side.l h4{color:#1B4E6B;}
body[data-theme="light1"] .side.r h4{color:#8A3410;}
body[data-theme="light1"] .fields span{color:rgba(24,27,30,.86);
  background:rgba(255,255,255,.66);
  text-shadow:0 0 3px rgba(255,255,255,.95),0 1px 2px rgba(255,255,255,.9);}
body[data-theme="light1"] .fields span.hi{color:#101315;background:rgba(255,255,255,.86);}
body[data-theme="light1"] .grip{background:rgba(20,23,25,.12);}
body[data-theme="light1"] .grip::before{background:rgba(20,23,25,.34);}
body[data-theme="light1"] .grip::after{background:rgba(250,248,244,.94);color:var(--ink);
  border-color:rgba(20,23,25,.22);}
body[data-theme="light1"] .seam__join{background:rgba(255,255,255,.62);
  border-top-color:rgba(20,23,25,.16);}
body[data-theme="light1"] .seam__join li{color:#3D4349;text-shadow:0 1px 2px rgba(255,255,255,.9);}
body[data-theme="light1"] .seam__join li.no{color:#9B3A28;}
body[data-theme="light1"] .seam__concl{color:#3D4349;background:rgba(255,255,255,.62);
  border-top-color:rgba(20,23,25,.16);}
body[data-theme="light1"] .states{background:rgba(255,255,255,.62);
  border-top-color:rgba(20,23,25,.16);}
body[data-theme="light1"] .opt{color:var(--dim);}
body[data-theme="light1"] .opt[aria-pressed="true"]{color:var(--accent-hot);
  border-color:rgba(138,52,16,.5);background:rgba(138,52,16,.08);}
body[data-theme="light1"] .states button{color:var(--dim);}
body[data-theme="light1"] .states button[aria-pressed="true"]{color:var(--accent-hot);
  border-color:rgba(138,52,16,.5);background:rgba(138,52,16,.08);}

/* ── 박스를 쓰지 않는다 (위원장 지시 2026-09-01) ──────────────
   「흰색 바탕에 글자에 박스를 만들어서 넣었잖아. 그거는 촌스러워서 하지 마라.
    흰색 바탕에 그냥 박스 없이 글자가 잘 보이도록 만들어 줘」

   그래서 밝은 판에서는 **글자 뒤에 아무것도 깔지 않는다.**
   카드 바탕 · 구획 띠 · 글자 받침을 전부 없앤다.
   나누는 일은 가는 선과 여백이 한다. 읽히는 일은 대비가 한다. */
body[data-theme="light1"]{--panel:transparent;}
body[data-theme="light1"] .card,
body[data-theme="light1"] .fig,
body[data-theme="light1"] .row,
body[data-theme="light1"] .strip,
body[data-theme="light1"] .trust,
body[data-theme="light1"] .ba,
body[data-theme="light1"] .chain,
body[data-theme="light1"] .cycle,
body[data-theme="light1"] .seam,
body[data-theme="light1"] .seam__persp,
body[data-theme="light1"] .seam__join,
body[data-theme="light1"] .seam__concl,
body[data-theme="light1"] .states,
body[data-theme="light1"] .side,
body[data-theme="light1"] .side.l,
body[data-theme="light1"] .side.r,
body[data-theme="light1"] .side h4,
body[data-theme="light1"] .fields span,
body[data-theme="light1"] .fields span.hi{
  background:transparent;
  padding-left:0;padding-right:0;
  text-shadow:none;
}
/* 글자 받침을 없앤 만큼 대비로 세운다 */
body[data-theme="light1"] .fields span{color:var(--dim);}
body[data-theme="light1"] .fields span.hi{color:var(--ink);font-weight:500;}
body[data-theme="light1"] .side h4{color:var(--faint);}
body[data-theme="light1"] .side.l h4{color:#1B4A66;}
body[data-theme="light1"] .side.r h4{color:var(--accent-hot);}
/* 구획은 선으로만 가른다 */
body[data-theme="light1"] .seam{border:1px solid var(--hairline);}
body[data-theme="light1"] .seam__persp{border-bottom:1px solid var(--hairline);}
body[data-theme="light1"] .seam__join,
body[data-theme="light1"] .seam__concl,
body[data-theme="light1"] .states{border-top:1px solid var(--hairline);}

/* ── 히어로는 원본 그대로 둔다 (위원장 지시 2026-09-01) ──────
   「G를 흰 바탕으로」는 **G의 히어로는 그대로 두고 바탕만 흰색**이라는 뜻이었다.
   내가 히어로 그림까지 갈아 끼운 것이 잘못이었다.
   그래서 히어로 안에서만 어두운 색을 되살린다 — 토큰은 상속되므로
   이 한 덩이로 히어로 속 모든 글자가 원래 색으로 돌아간다. */
body[data-theme="light1"] .hero[data-keep="dark"]{
  --ground:#0C0E10; --surface:#151719; --hairline:#242628;
  --ink:#E8E5DE; --dim:#A7A39B; --faint:#8E949A;
  --accent:#D87646; --accent-hot:#E36B36;
  --ok:#5F9E7A; --warn:#C9A03A; --bad:#D47660;
  --border:1px solid rgba(255,255,255,.10);
  --panel:rgba(255,255,255,.035);
  color:var(--ink);
}
body[data-theme="light1"][data-family="watch"] .hero[data-keep="dark"]{
  --ground:#0B0806; --surface:#17110C; --hairline:#2E241A;
  --ink:#F2ECE1; --dim:#A79C8B; --faint:#A09482;
  --accent:#C9954E; --accent-hot:#E6C288;
  --border:1px solid rgba(242,236,225,.11);
  --panel:rgba(242,236,225,.035);
}
/* 히어로 안에서는 박스 제거·평면화 규칙을 되돌린다.
   `revert` 는 앞선 저자 규칙으로 돌아가지 않는다 — 값을 그대로 다시 적는다.
   그러지 않으면 F 의 미는 칸막이에서 받침이 사라져 글자가 그림에 묻힌다(실측). */
body[data-theme="light1"] .hero[data-keep="dark"] .seam{
  background:transparent;border:1px solid rgba(255,255,255,.16);}
body[data-theme="light1"] .hero[data-keep="dark"] .seam__persp{
  color:#FF8A50;background:rgba(8,10,12,.34);border-bottom:1px solid rgba(255,255,255,.14);}
body[data-theme="light1"] .hero[data-keep="dark"] .side.l{
  background:linear-gradient(120deg,rgba(40,64,82,.16),rgba(14,17,20,.06));}
body[data-theme="light1"] .hero[data-keep="dark"] .side.r{
  background:linear-gradient(120deg,rgba(86,46,24,.16),rgba(21,14,10,.06));}
body[data-theme="light1"] .hero[data-keep="dark"] .side h4{
  background:rgba(8,10,12,.48);padding:4px 9px;border-radius:3px;
  text-shadow:0 0 3px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.95);}
body[data-theme="light1"] .hero[data-keep="dark"] .side.l h4{color:rgba(168,196,214,.92);}
body[data-theme="light1"] .hero[data-keep="dark"] .side.r h4{color:rgba(255,138,80,.92);}
body[data-theme="light1"] .hero[data-keep="dark"] .fields span{
  color:rgba(232,236,240,.88);background:rgba(8,10,12,.44);padding:3px 8px;border-radius:3px;
  text-shadow:0 0 3px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.95);}
body[data-theme="light1"] .hero[data-keep="dark"] .fields span.hi{
  color:rgba(255,253,248,1);background:rgba(8,10,12,.46);}
body[data-theme="light1"] .hero[data-keep="dark"] .seam__join,
body[data-theme="light1"] .hero[data-keep="dark"] .seam__concl,
body[data-theme="light1"] .hero[data-keep="dark"] .states{
  background:rgba(8,10,12,.34);border-top:1px solid rgba(255,255,255,.14);}
body[data-theme="light1"] .hero[data-keep="dark"] .seam__join li{
  color:#B4BAC0;text-shadow:0 1px 3px rgba(0,0,0,.55);}
body[data-theme="light1"] .hero[data-keep="dark"] .seam__concl{color:#C6CBD0;}
body[data-theme="light1"] .hero[data-keep="dark"] .grip{background:rgba(255,255,255,.10);}
body[data-theme="light1"] .hero[data-keep="dark"] .grip::before{background:rgba(232,229,222,.28);}
body[data-theme="light1"] .hero[data-keep="dark"] .grip::after{
  background:rgba(12,14,16,.92);color:var(--ink);border:var(--border);}
body[data-theme="light1"] .hero[data-keep="dark"] .t-carve{
  color:rgba(232,229,222,.085);
  text-shadow:0 -1px 1px rgba(0,0,0,.92),0 1px 0 rgba(232,229,222,.22),
    0 2px 1px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.4);}
body[data-theme="light1"] .hero[data-keep="dark"] .t-lead{
  color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.75),0 6px 22px rgba(0,0,0,.5);}
body[data-theme="light1"] .hero[data-keep="dark"] .lightfield{
  background:linear-gradient(180deg, rgba(190,214,228,.10) 0%, rgba(150,178,196,.04) 18%,
    rgba(12,14,16,0) 46%),
    radial-gradient(68% 46% at 50% 92%, rgba(191,90,50,.11) 0%, rgba(12,14,16,0) 76%);}
body[data-theme="light1"] .hero[data-keep="dark"] .grain{display:block;}

/* ── light.css ── */
/* ═══════════════════════════════════════════════════════════
   밝은 판 — 두 번째 판 (2026-09-01)

   첫 판은 위원장이 물렸다: **「너무 촌스럽다. 흰 바탕형도 음각형도 하지 마라.」**
   원인은 「흰색」이 아니라 셋의 결합이었다고 본다 —
     ① 크림·베이지 바탕(#F2EFE8)  → 공예·수제 브랜드, 더 나쁘면 90년대
     ② 황동·청동 재질            → 크림과 만나면 스팀펑크 카탈로그
     ③ 음각·양각 활자            → 스큐어모피즘. 지금 웹에서 가장 낡아 보이는 신호

   그래서 이 판은 셋을 다 버린다.
     · 바탕은 **차가운 중성 흰색**. 노랗지도 따뜻하지도 않다
     · 재질은 **아노다이즈 회색 알루미늄과 스테인리스**. 황동은 한 점도 없다
     · 활자는 **완전히 평평하다.** 파거나 솟게 하지 않는다. 대비로만 세운다

   읽힘과 세련됨이 부딪친다고들 하지만, 부딪치는 것은 「대비」가 아니라 「장식」이다.
   대비는 올리고 장식을 빼면 둘 다 얻는다. 그래서 본문 대비를 어두운 판보다
   **높게** 잡고 효과는 전부 뺐다.
   ═══════════════════════════════════════════════════════════ */
body[data-theme="light"]{
  --ground:#F8F9FA;          /* 차가운 중성. 크림빛(#F2EFE8)을 버렸다 */
  --surface:#FFFFFF;
  --hairline:#E2E5E8;
  --ink:#0F1216;             /* 종이 위 17:1 — 어두운 판보다 높다 */
  --dim:#454C52;             /* 본문 */
  /* 메타데이터. 히어로 그림 위에 바로 놓이는 작은 라벨이라 이만큼은 진해야 한다 —
     #656C73 은 창이 낮을 때 4.30/4.5 로 모자랐다(실측 2026-09-02). */
  --faint:#565C63;
  --accent:#A03A10;          /* 산화철을 밝은 바탕용으로. 채도를 낮춰 절제한다 */
  --accent-hot:#8F3410;
  --ok:#256B47; --warn:#7A5D0E; --bad:#93362A;
  --border:1px solid rgba(15,18,22,.12);
  --panel:rgba(15,18,22,.026);
  background:var(--ground);color:var(--ink);
}

/* ── 효과를 전부 뺀다 ────────────────────────────────────────
   빛으로 파고 솟게 하던 것들. 밝은 판에서는 그것이 낡음의 신호다.
   글자는 평평하게 두고 대비로만 세운다. */
body[data-theme="light"] .t-carve,
body[data-theme="light"] .t-raise,
body[data-theme="light"] .t-lead{
  color:var(--ink);
  text-shadow:none;
}
body[data-theme="light"] .mass{color:rgba(15,18,22,.035);}

/* 큰 절 번호 — 흐린 유령 숫자가 아니라 작고 또렷한 표식으로 바꾼다.
   44px 짜리 흐린 숫자는 밝은 판에서 특히 낡아 보인다. */
body[data-theme="light"] .secnum{
  color:var(--accent);
  font-size:13px;
  letter-spacing:.14em;
  text-shadow:none;
}

/* ── 어둠을 전제한 것들 ────────────────────────────────────── */
body[data-theme="light"] .lightfield{
  background:linear-gradient(180deg, rgba(15,18,22,.035) 0%, rgba(15,18,22,.010) 22%,
             rgba(15,18,22,0) 50%);}
body[data-theme="light"] .lightfield::after{display:none;}
body[data-theme="light"] .grain{display:none;}

body[data-theme="light"] .strip,
body[data-theme="light"] .trust,
body[data-theme="light"] .ba{background:rgba(15,18,22,.022);}

body[data-theme="light"] .switcher{background:rgba(255,255,255,.94);
  border:1px solid rgba(15,18,22,.12);box-shadow:0 1px 3px rgba(15,18,22,.08);}
body[data-theme="light"] .switcher a{color:var(--dim);}
body[data-theme="light"] .switcher a.on{background:var(--ink);color:#FFF;}
body[data-theme="light"] .switcher a:not(.on):hover{color:var(--ink);}

body[data-theme="light"] .card,
body[data-theme="light"] .fig,
body[data-theme="light"] .row{background:var(--surface);}

/* ── 성장기의 라벨 ─────────────────────────────────────────── */
body[data-theme="light"] .hg__tag{color:rgba(15,18,22,.72);}
body[data-theme="light"] .hg__tag--nexus{color:var(--ink);}
body[data-theme="light"] .hg__tag--nexus small{color:rgba(15,18,22,.60);}
body[data-theme="light"] .hg__ring{border-color:rgba(15,18,22,.18);}
body[data-theme="light"] .hg__bornmark{color:var(--ink);}
body[data-theme="light"] .hg__bornmark small{color:rgba(15,18,22,.58);}
body[data-theme="light"] .hg__bornline{
  background:linear-gradient(270deg,rgba(15,18,22,.55),rgba(15,18,22,0));}

/* ── 미는 칸막이 (N = F 의 밝은 판) ─────────────────────────
   F 의 상자는 「어두운 히어로 위에 옅은 받침 + 밝은 글자」로 맞춰져 있다.
   밝은 히어로 위에서는 검은 딱지에 흰 글씨가 된다. 같은 원리를 뒤집는다.
   음영·그림자는 쓰지 않는다 — 이 판은 평평함이 원칙이다. */
body[data-theme="light"] .seam{border-color:rgba(15,18,22,.14);}
body[data-theme="light"] .seam__persp{color:var(--accent);
  background:rgba(255,255,255,.72);border-bottom-color:rgba(15,18,22,.12);}
body[data-theme="light"] .side.l{background:linear-gradient(120deg,rgba(38,66,90,.07),rgba(255,255,255,.02));}
body[data-theme="light"] .side.r{background:linear-gradient(120deg,rgba(120,58,26,.07),rgba(255,255,255,.02));}
body[data-theme="light"] .side h4{background:rgba(255,255,255,.80);text-shadow:none;}
body[data-theme="light"] .side.l h4{color:#1B4A66;}
body[data-theme="light"] .side.r h4{color:var(--accent-hot);}
body[data-theme="light"] .fields span{color:var(--dim);
  background:rgba(255,255,255,.76);text-shadow:none;}
body[data-theme="light"] .fields span.hi{color:var(--ink);background:rgba(255,255,255,.92);}
body[data-theme="light"] .grip{background:rgba(15,18,22,.10);}
body[data-theme="light"] .grip::before{background:rgba(15,18,22,.30);}
body[data-theme="light"] .grip::after{background:#FFFFFF;color:var(--ink);
  border-color:rgba(15,18,22,.20);}
body[data-theme="light"] .seam__join,
body[data-theme="light"] .seam__concl,
body[data-theme="light"] .states{background:rgba(255,255,255,.72);
  border-top-color:rgba(15,18,22,.12);}
body[data-theme="light"] .seam__join li{color:var(--dim);text-shadow:none;}
body[data-theme="light"] .seam__join li.no{color:var(--bad);}
body[data-theme="light"] .seam__concl{color:var(--dim);}
body[data-theme="light"] .opt,
body[data-theme="light"] .states button{color:var(--dim);}
body[data-theme="light"] .opt[aria-pressed="true"],
body[data-theme="light"] .states button[aria-pressed="true"]{color:var(--accent-hot);
  border-color:rgba(143,52,16,.45);background:rgba(143,52,16,.07);}

/* ── 박스를 쓰지 않는다 (위원장 지시 2026-09-01) ──────────────
   「흰색 바탕에 글자에 박스를 만들어서 넣었잖아. 그거는 촌스러워서 하지 마라.
    흰색 바탕에 그냥 박스 없이 글자가 잘 보이도록 만들어 줘」

   그래서 밝은 판에서는 **글자 뒤에 아무것도 깔지 않는다.**
   카드 바탕 · 구획 띠 · 글자 받침을 전부 없앤다.
   나누는 일은 가는 선과 여백이 한다. 읽히는 일은 대비가 한다. */
body[data-theme="light"]{--panel:transparent;}
body[data-theme="light"] .card,
body[data-theme="light"] .fig,
body[data-theme="light"] .row,
body[data-theme="light"] .strip,
body[data-theme="light"] .trust,
body[data-theme="light"] .ba,
body[data-theme="light"] .chain,
body[data-theme="light"] .cycle,
body[data-theme="light"] .seam,
body[data-theme="light"] .seam__persp,
body[data-theme="light"] .seam__join,
body[data-theme="light"] .seam__concl,
body[data-theme="light"] .states,
body[data-theme="light"] .side,
body[data-theme="light"] .side.l,
body[data-theme="light"] .side.r,
body[data-theme="light"] .side h4,
body[data-theme="light"] .fields span,
body[data-theme="light"] .fields span.hi{
  background:transparent;
  padding-left:0;padding-right:0;
  text-shadow:none;
}
/* 글자 받침을 없앤 만큼 대비로 세운다 */
body[data-theme="light"] .fields span{color:var(--dim);}
body[data-theme="light"] .fields span.hi{color:var(--ink);font-weight:500;}
body[data-theme="light"] .side h4{color:var(--faint);}
body[data-theme="light"] .side.l h4{color:#1B4A66;}
body[data-theme="light"] .side.r h4{color:var(--accent-hot);}
/* 구획은 선으로만 가른다 */
body[data-theme="light"] .seam{border:1px solid var(--hairline);}
body[data-theme="light"] .seam__persp{border-bottom:1px solid var(--hairline);}
body[data-theme="light"] .seam__join,
body[data-theme="light"] .seam__concl,
body[data-theme="light"] .states{border-top:1px solid var(--hairline);}

/* ── 히어로는 원본 그대로 둔다 (위원장 지시 2026-09-01) ──────
   「G를 흰 바탕으로」는 **G의 히어로는 그대로 두고 바탕만 흰색**이라는 뜻이었다.
   내가 히어로 그림까지 갈아 끼운 것이 잘못이었다.
   그래서 히어로 안에서만 어두운 색을 되살린다 — 토큰은 상속되므로
   이 한 덩이로 히어로 속 모든 글자가 원래 색으로 돌아간다. */
body[data-theme="light"] .hero[data-keep="dark"]{
  --ground:#0C0E10; --surface:#151719; --hairline:#242628;
  --ink:#E8E5DE; --dim:#A7A39B; --faint:#8E949A;
  --accent:#D87646; --accent-hot:#E36B36;
  --ok:#5F9E7A; --warn:#C9A03A; --bad:#D47660;
  --border:1px solid rgba(255,255,255,.10);
  --panel:rgba(255,255,255,.035);
  color:var(--ink);
}
body[data-theme="light"][data-family="watch"] .hero[data-keep="dark"]{
  --ground:#0B0806; --surface:#17110C; --hairline:#2E241A;
  --ink:#F2ECE1; --dim:#A79C8B; --faint:#A09482;
  --accent:#C9954E; --accent-hot:#E6C288;
  --border:1px solid rgba(242,236,225,.11);
  --panel:rgba(242,236,225,.035);
}
/* 히어로 안에서는 박스 제거·평면화 규칙을 되돌린다.
   `revert` 는 앞선 저자 규칙으로 돌아가지 않는다 — 값을 그대로 다시 적는다.
   그러지 않으면 F 의 미는 칸막이에서 받침이 사라져 글자가 그림에 묻힌다(실측). */
body[data-theme="light"] .hero[data-keep="dark"] .seam{
  background:transparent;border:1px solid rgba(255,255,255,.16);}
body[data-theme="light"] .hero[data-keep="dark"] .seam__persp{
  color:#FF8A50;background:rgba(8,10,12,.34);border-bottom:1px solid rgba(255,255,255,.14);}
body[data-theme="light"] .hero[data-keep="dark"] .side.l{
  background:linear-gradient(120deg,rgba(40,64,82,.16),rgba(14,17,20,.06));}
body[data-theme="light"] .hero[data-keep="dark"] .side.r{
  background:linear-gradient(120deg,rgba(86,46,24,.16),rgba(21,14,10,.06));}
body[data-theme="light"] .hero[data-keep="dark"] .side h4{
  background:rgba(8,10,12,.48);padding:4px 9px;border-radius:3px;
  text-shadow:0 0 3px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.95);}
body[data-theme="light"] .hero[data-keep="dark"] .side.l h4{color:rgba(168,196,214,.92);}
body[data-theme="light"] .hero[data-keep="dark"] .side.r h4{color:rgba(255,138,80,.92);}
body[data-theme="light"] .hero[data-keep="dark"] .fields span{
  color:rgba(232,236,240,.88);background:rgba(8,10,12,.44);padding:3px 8px;border-radius:3px;
  text-shadow:0 0 3px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.95);}
body[data-theme="light"] .hero[data-keep="dark"] .fields span.hi{
  color:rgba(255,253,248,1);background:rgba(8,10,12,.46);}
body[data-theme="light"] .hero[data-keep="dark"] .seam__join,
body[data-theme="light"] .hero[data-keep="dark"] .seam__concl,
body[data-theme="light"] .hero[data-keep="dark"] .states{
  background:rgba(8,10,12,.34);border-top:1px solid rgba(255,255,255,.14);}
body[data-theme="light"] .hero[data-keep="dark"] .seam__join li{
  color:#B4BAC0;text-shadow:0 1px 3px rgba(0,0,0,.55);}
body[data-theme="light"] .hero[data-keep="dark"] .seam__concl{color:#C6CBD0;}
body[data-theme="light"] .hero[data-keep="dark"] .grip{background:rgba(255,255,255,.10);}
body[data-theme="light"] .hero[data-keep="dark"] .grip::before{background:rgba(232,229,222,.28);}
body[data-theme="light"] .hero[data-keep="dark"] .grip::after{
  background:rgba(12,14,16,.92);color:var(--ink);border:var(--border);}
body[data-theme="light"] .hero[data-keep="dark"] .t-carve{
  color:rgba(232,229,222,.085);
  text-shadow:0 -1px 1px rgba(0,0,0,.92),0 1px 0 rgba(232,229,222,.22),
    0 2px 1px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.4);}
body[data-theme="light"] .hero[data-keep="dark"] .t-lead{
  color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.75),0 6px 22px rgba(0,0,0,.5);}
body[data-theme="light"] .hero[data-keep="dark"] .lightfield{
  background:linear-gradient(180deg, rgba(190,214,228,.10) 0%, rgba(150,178,196,.04) 18%,
    rgba(12,14,16,0) 46%),
    radial-gradient(68% 46% at 50% 92%, rgba(191,90,50,.11) 0%, rgba(12,14,16,0) 76%);}
body[data-theme="light"] .hero[data-keep="dark"] .grain{display:block;}

/* ── herogrow.css ── */
/* ═══════════════════════════════════════════════════════════
   히어로 성장기 — 사진 한 장 위에 캔버스가 얹힌다.
   사진은 처음부터 완성 상태이고, 캔버스가 그 위를 덮었다 **한 번만** 걷어낸다.

   식별 층(라벨 · 워드마크)도 한 번 떠오르고 머문다. 깜빡이면 광고가 된다.
   뜨는 시점은 `herogrow.js` 가 `--hg-reveal` 로 넘겨 준다 — 어둠이 다 걷힐 때다.
   ═══════════════════════════════════════════════════════════ */
.hg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hg__cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}

/* ── 변주 ① — 웹 층에서 글자를 얹는다 (A · D) ──────────────────
   그림을 다시 뽑지 않고도 「가운데 저것이 우리다」를 확실히 읽히게 한다.
   코덱스 판정: 셋 중 이것이 가장 정직하다. */
.hg__tags{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  animation:hgIn var(--hg-reveal,8200ms) ease-out 1 forwards;}
.hg__tag{position:absolute;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(233,236,239,.60);white-space:nowrap;}
.hg__tag::before{content:"";position:absolute;top:50%;
  width:34px;height:1px;background:currentColor;opacity:.40;}
.hg__tag--l::before{right:calc(100% + 8px);}   /* 지시선이 왼쪽 대상을 가리킨다 */
.hg__tag--r::before{left:calc(100% + 8px);}    /* 지시선이 오른쪽 대상을 가리킨다 */
.hg__tag--c::before{display:none;}             /* 넥서스 라벨은 지시선 없이 바로 아래 */
/* 기울어진 지시선 — 흰 히어로에서는 라벨을 그림 밖 빈 자리로 밀어야 해서,
   가로 지시선만으로는 대상을 못 가리킨다. 각도와 길이는 build.py 가 계산해 넣는다. */
/* 각도와 길이는 herogrow.js 가 화면 좌표로 계산해 넣는다(사진이 잘려 들어오므로).
   46px 만큼 띄워 시작해야 선이 라벨 글자를 가로지르지 않는다. */
.hg__tag--a::before{left:50%;top:50%;
  width:max(0px, calc(var(--hg-len,60px) - 46px));
  transform:rotate(var(--hg-ang,0deg)) translateX(46px);transform-origin:0 50%;}
/* 넥서스 라벨 — 셋과 다르게 밝고 굵다. 「이것이 주인공」 */
.hg__tag--nexus{font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.10em;text-transform:none;color:rgba(246,242,236,.94);text-align:center;}
.hg__tag--nexus small{display:block;font-family:var(--mono);font-size:9px;
  font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,236,239,.52);margin-top:4px;}

/* 결절을 감싸는 아주 얇은 고리 — 시선을 가운데에 묶는다 */
.hg__ring{position:absolute;z-index:2;pointer-events:none;
  width:92px;height:92px;border:1px solid rgba(233,236,239,.18);border-radius:50%;
  opacity:0;transform:translate(-50%,-50%) scale(.7);
  animation:hgRing var(--hg-reveal,8200ms) cubic-bezier(.2,.7,.3,1) 1 forwards;}

@keyframes hgIn{0%,52%{opacity:0}100%{opacity:1}}
@keyframes hgRing{
  0%,40%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* ── 변주 ② — 워드마크가 결절에서 태어난다 (B · E) ────────────────
   실 한 가닥이 넥서스에서 왼쪽으로 달려 나가고, 그 끝에서 이름이 켜진다.
   코덱스 경고: 확대하며 튀어나오면 「로고 리빌 광고」가 된다.
   그래서 크기는 처음부터 제자리이고, **대비만** 올라온다. */
.hg__born{position:absolute;z-index:2;pointer-events:none;
  display:flex;flex-direction:row-reverse;align-items:center;gap:10px;}
.hg__bornline{display:block;height:1px;width:0;
  background:linear-gradient(270deg,rgba(233,236,239,.70),rgba(233,236,239,0));
  animation:hgBornLine var(--hg-reveal,8200ms) ease-out 1 forwards;}
.hg__bornmark{font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.16em;color:rgba(246,242,236,.92);white-space:nowrap;opacity:0;
  animation:hgIn var(--hg-reveal,8200ms) ease-out 1 forwards;}
.hg__bornmark small{display:block;font-family:var(--mono);font-weight:400;font-size:9px;
  letter-spacing:.18em;color:rgba(233,236,239,.5);margin-top:3px;text-transform:uppercase;}
@keyframes hgBornLine{0%,34%{width:0}100%{width:var(--hg-len,96px)}}

@media (max-width:860px){
  .hg__tag{font-size:9px;letter-spacing:.08em;}
  .hg__tag::before{width:20px;}
  .hg__tag--nexus{font-size:11px;}
  .hg__tag--nexus small,.hg__bornmark small{display:none;}
  .hg__bornmark{font-size:11px;letter-spacing:.10em;}
  .hg__ring{width:58px;height:58px;}
}

/* 움직임을 줄여 달라고 한 사람에게는 처음부터 완성 상태를 보인다 */
@media (prefers-reduced-motion: reduce){
  .hg__tags,.hg__bornmark{animation:none;opacity:1;}
  .hg__ring{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1);}
  .hg__bornline{animation:none;width:var(--hg-len,96px);}
}

/* 대문에만 있는 것 — 시안에는 포스터 그림뿐이라 영상 규칙이 없다 */
.film video{display:block;width:100%;height:auto;background:#000;border-radius:var(--radius);}
.film figcaption{margin-top:calc(var(--u)*1);}