/* ============================================================
   Oversapiens — 사이트 공통 스타일 한 벌
   구조 문법은 aside.com 저장본에서 실측해 옮겼다:
   1536 컨테이너 · 좌우 레일 · 섹션 바닥 가로줄 · 56px 스티키 헤더.
   색·서체는 앱 정본(InsTheme.swift)의 페리윙클.
   ⚠️ 페이지별로 이 파일을 복사하지 마라. 링크해서 쓴다.
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
:root{
  --bg:#FFFFFF;
  --bg-2:#FFFFFF;          /* 흰색 — 예전엔 크림이었다. 구역은 가로줄·레일로 가른다 */
  --bg-3:#F4F4F6;          /* 중립 회색 — 베이지 아님 */
  --ink-0:#16121F;
  --ink-1:#3A3548;
  --ink-2:#6C6878;
  --ink-3:#9B97A7;

  --pw:#647AD8;            /* 페리윙클 — 유일 강조색 */
  --pw-lt:#93A2EE;
  --pw-deep:#5468C4;
  --pw-band:#E0E4F7;
  --pw-wash:#F0F2FC;

  --hairline:rgba(20,16,30,.06);
  --rule:rgba(20,16,30,.10);
  --rail:rgba(20,16,30,.07);

  --font-display:"Inter Tight","Inter",-apple-system,system-ui,sans-serif;
  --font-body:"Inter",-apple-system,system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* 컨테이너 — aside 실측: max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-12 xl:px-24 */
  --maxw:1536px;
  --gutter:16px;

  /* 섹션 안쪽 — aside 실측: px-6 py-12 sm:px-8 sm:py-16 md:px-14 md:py-24 xl:px-36 */
  --pad-x:24px;
  --pad-y:48px;

  --header-h:64px;        /* 22 + 20 + 22 — 정본 여백 */
  --radius:10px;
}
@media (min-width:640px){ :root{ --gutter:24px; --pad-x:32px; --pad-y:64px } }
@media (min-width:768px){ :root{ --pad-x:56px; --pad-y:96px } }
@media (min-width:1024px){ :root{ --gutter:48px } }
@media (min-width:1280px){ :root{ --gutter:96px; --pad-x:144px } }

/* ---------- 2. 리셋 ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px) }
body{
  margin:0; padding-top:var(--header-h); background:var(--bg); color:var(--ink-0);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--pw); outline-offset:3px; border-radius:3px }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important }
}

/* ---------- 3. 활자 ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; letter-spacing:-.022em; margin:0; color:var(--ink-0);
  word-break:keep-all; }  /* 한국어: 단어 안에서 끊지 않는다 */
h1{ font-size:clamp(34px,5.2vw,52px); line-height:1.08; letter-spacing:-.03em }
h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.14; letter-spacing:-.026em }
h3{ font-size:clamp(19px,1.9vw,23px); line-height:1.28 }
h4{ font-size:17px; line-height:1.35 }
p{ margin:0 }

.eyebrow{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; color:var(--pw);
}
.lede{ font-size:clamp(17px,1.6vw,19px); line-height:1.55; color:var(--ink-2); word-break:keep-all }
.muted{ color:var(--ink-2) }
.dim{ color:var(--ink-3) }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.center{ text-align:center }

/* ---------- 4. 레이아웃 뼈대 (aside 문법) ---------- */

/* 전폭 띠 — 바닥에 가로줄 하나 */
.band{ width:100%; border-bottom:1px solid var(--hairline) }
.band--cream{ background:var(--bg-2) }
.band--flush{ border-bottom:0 }

/* 1536 컨테이너 */
.wrap{ margin-inline:auto; width:100%; max-width:var(--maxw); padding-inline:var(--gutter) }

/* 좌우 레일 + 세로 여백 — 섹션 본체 */
.rails{
  border-inline:1px solid var(--rail);
  padding:var(--pad-y) var(--pad-x);
}
.rails--tight{ padding-block:calc(var(--pad-y) * .58) }
.rails--flat{ padding-inline:0; border-inline:0 }

/* 읽기 폭 — 페이지마다 다른 max-width를 쓰지 말고 이 셋만 쓴다 */
.measure{ max-width:720px }
.measure-wide{ max-width:900px }
.measure-prose{ max-width:680px }
.center .measure,.center .measure-wide,.center .measure-prose{ margin-inline:auto }

/* 스택 — 세로 간격 */
.stack>*+*{ margin-top:16px }
.stack-sm>*+*{ margin-top:8px }
.stack-lg>*+*{ margin-top:28px }
.stack-xl>*+*{ margin-top:48px }

/* 격자 */
.grid{ display:grid; gap:1px; background:var(--hairline) }
.grid>*{ background:var(--bg) }
.band--cream .grid>*{ background:var(--bg-2) }
.cols-2{ grid-template-columns:1fr }
.cols-3{ grid-template-columns:1fr }
.cols-4{ grid-template-columns:1fr }
@media (min-width:768px){
  .cols-2{ grid-template-columns:repeat(2,1fr) }
  .cols-3{ grid-template-columns:repeat(3,1fr) }
  .cols-4{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:1024px){ .cols-4{ grid-template-columns:repeat(4,1fr) } }

/* 테두리 없는 격자 (여백으로만 가름 — 「흰 박스 0」 하드룰) */
.plain{ display:grid; gap:40px 48px; background:none }
.plain>*{ background:none }

/* 좌우 분할 */
.split{ display:grid; gap:40px; align-items:center }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:64px }
  .split--rev>*:first-child{ order:2 }
}

/* ---------- 5. 헤더 — app/globals.css §9 정본을 그대로 옮김 ----------
   처음엔 투명하게 떠 있다가 스크롤하면 유리가 낀다. 내비는 모노 대문자.
   딱 하나 정본과 다른 것: 폭을 .wrap(1536 컨테이너)에 맞춘다.
   정본은 padding:22px 32px 로 전폭이었는데, 그러면 로고가 본문 좌우 레일과
   어긋난다(레일은 컨테이너 거터에 선다). 정렬을 살리려고 컨테이너를 쓴다. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; border-bottom:1px solid transparent;
  pointer-events:none;
  transition:background 240ms var(--ease), backdrop-filter 240ms var(--ease), border-color 240ms var(--ease);
}
.site-header>*{ pointer-events:auto }
/* 헤더는 스크롤해도 **완전 투명**이다(창업자 지시).
   정본(globals.css §9)은 스크롤 시 유리를 씌웠지만, 두상이 헤더 뒤로
   지나가는 지금 구성에서는 유리가 그 결을 가린다. */
.site-header.scrolled{
  background:transparent;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  border-bottom-color:transparent;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:22px; gap:16px; position:relative;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; z-index:2 }
.brand svg{ width:20px; height:20px; color:var(--ink-0) }
.brand b{ font-family:var(--font-display); font-size:15px; font-weight:500; letter-spacing:-.01em }

/* 가운데 정렬 내비 — 글자는 정본대로 모노 대문자 */
.site-nav{
  position:absolute; left:50%; transform:translateX(-50%);
  display:none; align-items:center; gap:22px; margin:0; padding:0;
}
@media (min-width:900px){ .site-nav{ display:inline-flex } }
.site-nav>li{ list-style:none; position:relative }
.site-nav a,.site-nav button{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-1);
  transition:color 180ms var(--ease); white-space:nowrap;
}
.site-nav a:hover,.site-nav button:hover{ color:var(--ink-0) }
.site-nav [aria-current="page"]{ color:var(--ink-0) }
.site-nav ul{ margin:0; padding:0 }

/* 드롭다운 */
.menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-4px);
  min-width:230px; padding:8px; margin:0;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--hairline); border-radius:12px;
  box-shadow:0 12px 34px -10px rgba(20,16,30,.14), 0 2px 6px rgba(20,16,30,.05);
  opacity:0; visibility:hidden; transition:.16s var(--ease);
}
.site-nav li:hover>.menu,.site-nav li:focus-within>.menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.menu li{ list-style:none }
.menu a{
  display:block; padding:8px 10px; border-radius:7px;
  font-family:var(--font-body); font-size:14px; letter-spacing:0;
  text-transform:none; color:var(--ink-1);
}
.menu a:hover{ background:var(--pw-wash); color:var(--pw-deep) }
.menu a small{ display:block; font-size:12px; color:var(--ink-3); font-weight:400; margin-top:1px }

.header-right{ display:flex; align-items:center; gap:14px; z-index:2 }

/* 언어 토글 — 정본대로 모노 .18em */
.locale{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; color:var(--ink-2);
}
.locale button{ padding:4px; color:var(--ink-2); transition:color .15s }
.locale button[aria-pressed="true"]{ color:var(--ink-0); font-weight:600 }
.locale .sep{ color:var(--ink-3) }

.burger{ display:flex; width:36px; height:36px; align-items:center; justify-content:center; color:var(--ink-0) }
@media (min-width:900px){ .burger{ display:none } }

/* 모바일 서랍 */
.drawer{
  position:fixed; inset:var(--header-h) 0 0; z-index:99;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  padding:24px var(--gutter) 48px; overflow-y:auto;
  display:none;
}
.drawer[data-open="true"]{ display:block }
@media (min-width:900px){ .drawer{ display:none!important } }
.drawer h5{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-3); margin:26px 0 10px }
.drawer h5:first-child{ margin-top:0 }
.drawer a{ display:block; padding:9px 0; font-size:16px; color:var(--ink-1); border-bottom:1px solid var(--hairline) }

/* ---------- 6. 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 15px; border-radius:9px;
  font-size:14px; font-weight:500; white-space:nowrap;
  transition:.16s var(--ease); border:1px solid transparent;
}
.btn:active{ transform:scale(.97) }
.btn-primary{ background:var(--ink-0); color:#fff }
.btn-primary:hover{ background:var(--pw-deep) }
.btn-pw{ background:var(--pw); color:#fff }
.btn-pw:hover{ background:var(--pw-deep) }
.btn-ghost{ color:var(--ink-1); border-color:var(--rule) }
.btn-ghost:hover{ border-color:var(--ink-3); color:var(--ink-0) }
.btn-plain{ color:var(--ink-1); padding:0 4px }
.btn-plain:hover{ color:var(--pw-deep) }
.btn-lg{ height:46px; padding:0 22px; font-size:15px; border-radius:10px }
.btn-sm{ height:32px; padding:0 11px; font-size:13px; border-radius:8px }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.center .btn-row{ justify-content:center }

/* ---------- 7. 페이지 히어로 ---------- */
.page-hero{ padding:72px 0 40px; text-align:center }
@media (min-width:768px){ .page-hero{ padding:104px 0 56px } }
.page-hero .eyebrow{ margin-bottom:16px }
.page-hero h1{ max-width:19ch; margin-inline:auto }
.page-hero .lede{ max-width:600px; margin:20px auto 0 }
.page-hero .btn-row{ margin-top:30px }

/* ---------- 8. 그림 자리 ---------- */
.figure{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(160deg,var(--pw-wash),#FAFAFB);
  border:1px solid var(--hairline);
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
}
.figure--tall{ aspect-ratio:9/16; max-width:280px }
.figure--wide{ aspect-ratio:21/9 }
.figure figcaption{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); text-align:center;
  padding:20px; max-width:80%;
}
.figure img{ width:100%; height:100%; object-fit:cover }

/* ---------- 9. 콘솔 — 「모델을 들여다보는 창」 · 페이지당 하나 ---------- */
.console{
  position:relative; border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg,#151221,#1E1A2E 55%,#171426);
  color:#EDEBF4; padding:36px var(--pad-x); min-height:340px;
  display:flex; flex-direction:column; justify-content:center;
}
.console h2,.console h3{ color:#fff }
.console .muted{ color:rgba(237,235,244,.6) }
.console .eyebrow{ color:var(--pw-lt) }
.console::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 78% 12%,rgba(100,122,216,.28),transparent 62%);
}
.console>*{ position:relative; z-index:1 }

/* ---------- 10. 자잘한 부품 ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:999px; background:var(--pw-wash); color:var(--pw-deep);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
.pill--quiet{ background:var(--bg-3); color:var(--ink-2) }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14px }
.kv dt{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-top:3px }
.kv dd{ margin:0; color:var(--ink-1) }

.tick{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--ink-1) }
.tick::before{
  content:""; flex:0 0 auto; width:15px; height:15px; margin-top:3px; border-radius:50%;
  background:var(--pw-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%235468C4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.tick--off::before{ background:var(--bg-3); background-image:none }
.tick--off{ color:var(--ink-3) }

hr.rule{ border:0; border-top:1px solid var(--hairline); margin:0 }

table.tbl{ width:100%; border-collapse:collapse; font-size:14px }
table.tbl th,table.tbl td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--hairline); vertical-align:top }
table.tbl th{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); font-weight:500 }
table.tbl td{ color:var(--ink-1) }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* 열고 닫는 행 (FAQ) */
details.row{ border-bottom:1px solid var(--hairline) }
details.row summary{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:500; color:var(--ink-0) }
details.row summary::-webkit-details-marker{ display:none }
details.row summary::after{ content:"+"; font-family:var(--font-mono); font-size:19px; color:var(--ink-3); flex:0 0 auto; transition:transform .18s var(--ease) }
details.row[open] summary::after{ transform:rotate(45deg) }
details.row .body{ padding:0 0 22px; max-width:660px; color:var(--ink-2); font-size:15px; line-height:1.65 }

/* ---------- 11. 마무리 CTA ---------- */
.cta-band{ padding:88px 0 96px; text-align:center }
.cta-band h2{ max-width:16ch; margin-inline:auto }
.cta-band .lede{ max-width:520px; margin:16px auto 0 }
.cta-band .btn-row{ margin-top:28px }

/* ---------- 12. 푸터 ---------- */
.site-footer{ padding:56px 0 0; border-top:1px solid var(--hairline); background:var(--bg-2) }
@media (min-width:1280px){ .site-footer{ padding-top:88px } }
.footer-cols{
  display:grid; grid-template-columns:repeat(2,1fr); gap:32px 16px;
  padding-bottom:44px; margin:0; list-style:none;
}
@media (min-width:640px){ .footer-cols{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1280px){ .footer-cols{ display:flex; flex-wrap:wrap; gap:24px } }
.footer-cols>li{ min-width:0 }
@media (min-width:1280px){ .footer-cols>li{ flex:1 1 0; min-width:150px; max-width:240px } }
.footer-cols>li>p{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--ink-3); margin-bottom:13px;
}
.footer-cols ul{ margin:0; padding:0; list-style:none }
.footer-cols ul li+li{ margin-top:9px }
.footer-cols ul a{
  font-size:14px; color:var(--ink-1);
  text-decoration-line:underline; text-decoration-style:dotted;
  text-decoration-color:transparent; text-underline-offset:3px; transition:.15s;
}
.footer-cols ul a:hover{ color:var(--ink-0); text-decoration-color:var(--ink-3) }
.footer-bottom{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:22px 0 30px; border-top:1px solid var(--hairline);
}
@media (min-width:640px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center } }
.footer-bottom p{ font-size:13px; color:var(--ink-3) }
.social{ display:inline-flex; gap:14px; margin:0; padding:0; list-style:none; color:var(--ink-3) }
.social a{ display:block; transition:color .15s }
.social a:hover{ color:var(--pw-deep) }
.social svg{ width:17px; height:17px }

/* ---------- 13. 긴 글 (법적 고지·도움말) ---------- */
.prose{ max-width:680px; font-size:15.5px; line-height:1.72; color:var(--ink-1) }
.prose h2{ font-size:23px; margin:44px 0 12px; letter-spacing:-.02em }
.prose h3{ font-size:17px; margin:30px 0 8px }
.prose h2:first-child,.prose h3:first-child{ margin-top:0 }
.prose p+p{ margin-top:14px }
.prose ul,.prose ol{ margin:12px 0; padding-left:20px }
.prose li+li{ margin-top:7px }
.prose strong{ font-weight:600; color:var(--ink-0) }
.prose code{ font-family:var(--font-mono); font-size:.88em; background:var(--bg-3); padding:1px 5px; border-radius:4px }
.prose a{ color:var(--pw-deep); text-decoration:underline; text-underline-offset:2px }
.prose blockquote{ margin:18px 0; padding-left:18px; border-left:2px solid var(--pw-band); color:var(--ink-2) }

/* 목차 */
.toc{ position:sticky; top:calc(var(--header-h) + 28px); font-size:13.5px }
.toc p{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3); margin-bottom:12px }
.toc ul{ margin:0; padding:0; list-style:none }
.toc li+li{ margin-top:8px }
.toc a{ color:var(--ink-2); transition:color .15s }
.toc a:hover{ color:var(--pw-deep) }
.with-toc{ display:grid; gap:48px }
@media (min-width:1024px){ .with-toc{ grid-template-columns:200px minmax(0,1fr); gap:64px } }

/* ---------- 14. 언어 전환 ----------
   !important 인 이유: 이 껍데기 span 은 어느 구역 안에도 들어간다.
   `.stations span{display:block}` 같은 규칙이 (클래스+요소라) 속성 선택자보다
   세서, 감춰야 할 쪽을 도로 보이게 만든 적이 있다 — 영어 화면에 한글이 같이 떴다.
   언어 전환은 어떤 구역 규칙보다도 우선해야 한다. */
[data-en],[data-ko]{ display:none !important }
html:not([lang="ko"]) [data-en]{ display:revert !important }
html[lang="ko"] [data-ko]{ display:revert !important }

/* ============================================================
   15. 페이지별 부품 — 전부 위의 토큰·컨테이너 위에서 논다
   ============================================================ */

/* ---------- 요금표 ---------- */
.pricing input[name="cycle"]{ position:absolute; opacity:0; pointer-events:none }
.cycle-tabs{
  display:inline-flex; padding:3px; border-radius:11px; background:var(--bg-3); gap:2px;
}
.cycle-tabs label{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; min-width:112px; padding:0 14px; border-radius:8px;
  font-size:13.5px; font-weight:500; color:var(--ink-2); cursor:pointer;
  transition:.16s var(--ease);
}
#cy-monthly:checked ~ .cycle .cycle-tabs label[for="cy-monthly"],
#cy-yearly:checked  ~ .cycle .cycle-tabs label[for="cy-yearly"]{
  background:var(--bg); color:var(--ink-0); box-shadow:0 1px 3px rgba(20,16,30,.08);
}
.cy-y{ display:none }
#cy-yearly:checked ~ .plans .cy-m{ display:none }
#cy-yearly:checked ~ .plans .cy-y{ display:inline }

.plans{
  display:grid; gap:1px; background:var(--hairline);
  margin-top:52px; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
@media (min-width:900px){ .plans{ grid-template-columns:repeat(3,1fr) } }
.plan{ background:var(--bg); padding:34px 30px 38px; display:flex; flex-direction:column }
.plan--featured{ background:var(--pw-wash) }
.plan h3{ font-size:20px; letter-spacing:-.02em }
.plan-tag{ font-size:14px; margin-top:6px; min-height:42px }
.plan-price{
  font-family:var(--font-display); font-size:40px; font-weight:500; letter-spacing:-.035em;
  margin-top:14px; display:flex; align-items:baseline; gap:7px; color:var(--ink-0);
}
.plan-price .per{ font-family:var(--font-body); font-size:14px; font-weight:400; color:var(--ink-3); letter-spacing:0 }
.plan-note{ font-size:13px; margin:6px 0 22px }
.plan .btn{ width:100%; height:42px }
.plan-feats{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:11px }
.plan-feats .tick{ font-size:14px }

table.cmp td:first-child{ color:var(--ink-1) }
table.cmp .ck{ color:var(--pw-deep); font-weight:600 }
table.cmp th.center,table.cmp td.center{ text-align:center }

/* ---------- 채용 · 글 목록 ---------- */
.roles,.posts{ border-top:1px solid var(--hairline) }
.role,.post{
  display:flex; gap:24px; align-items:center; justify-content:space-between;
  padding:22px 0; border-bottom:1px solid var(--hairline); transition:.15s var(--ease);
}
.role:hover,.post:hover{ padding-left:8px }
.role h3,.post h3{ font-size:19px }
.role-sub,.post-sub{ font-size:14.5px; margin-top:5px; max-width:60ch }
.role-meta{ display:flex; align-items:center; gap:14px; flex-shrink:0; font-size:13px }
.post{ align-items:flex-start; flex-direction:column; gap:10px }
@media (min-width:768px){ .post{ flex-direction:row; align-items:center; gap:32px } }
.post-meta{ display:flex; align-items:center; gap:12px; flex-shrink:0; width:190px; font-size:13px }

/* ---------- 쓰임새: 하루 ---------- */
.daylist{ border-top:1px solid var(--hairline) }
.dayrow{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px;
  padding:20px 0; border-bottom:1px solid var(--hairline);
}
@media (min-width:768px){ .dayrow{ grid-template-columns:92px minmax(0,1fr); gap:32px } }
.dayhour{ font-size:13px; color:var(--pw-deep); padding-top:2px }
.dayrow h4{ font-size:16.5px }

/* ---------- 신고 카드 ---------- */
.report-card{
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:30px; background:var(--bg);
}

/* ---------- 문서 껍데기 (문서 · 변경 기록) ---------- */
.docs-head{ padding:64px 0 34px; border-bottom:1px solid var(--hairline) }
@media (min-width:768px){ .docs-head{ padding:88px 0 42px } }
.docs-head h1{ font-size:clamp(30px,4vw,42px); margin-top:14px }
.docs-head .lede{ margin-top:14px; max-width:600px }

.docs-layout{ display:grid; gap:0 }
@media (min-width:1024px){ .docs-layout{ grid-template-columns:248px minmax(0,1fr) } }

.docs-nav{
  padding:28px 0 32px; border-bottom:1px solid var(--hairline);
}
@media (min-width:1024px){
  .docs-nav{
    padding:40px 28px 80px 0; border-bottom:0; border-right:1px solid var(--hairline);
    position:sticky; top:var(--header-h); align-self:start;
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
}
.dnav-group+.dnav-group{ margin-top:26px }
.dnav-group>p{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--ink-3); margin-bottom:11px;
}
.dnav-group ul{ list-style:none; margin:0; padding:0 }
.dnav-group li+li{ margin-top:3px }
.dnav-group a{
  display:block; padding:6px 10px; margin-left:-10px; border-radius:7px;
  font-size:14px; color:var(--ink-2); transition:.15s var(--ease);
}
.dnav-group a:hover{ background:var(--pw-wash); color:var(--pw-deep) }

.docs-main{ padding:40px 0 96px; min-width:0 }
@media (min-width:1024px){ .docs-main{ padding:40px 0 128px 56px } }
.doc-sec{ scroll-margin-top:calc(var(--header-h) + 24px) }
.doc-sec+.doc-sec{ margin-top:52px; padding-top:52px; border-top:1px solid var(--hairline) }
.doc-sec h2{ font-size:25px; margin-bottom:16px }
.doc-sec p{ max-width:680px; font-size:15.5px; line-height:1.72; color:var(--ink-1) }
.doc-sec p+p{ margin-top:14px }
.doc-sec ul{ max-width:680px; margin:14px 0; padding-left:20px; font-size:15.5px; line-height:1.7; color:var(--ink-1) }
.doc-sec li+li{ margin-top:7px }
.doc-sec strong{ font-weight:600; color:var(--ink-0) }
.doc-sec table.tbl{ margin-top:18px }
.doc-note{
  margin-top:18px; padding:15px 18px; border-radius:var(--radius);
  background:var(--pw-wash); border-left:2px solid var(--pw);
  font-size:14.5px; line-height:1.62; color:var(--ink-1); max-width:680px;
}

/* 변경 기록 */
.rel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap }
.rel-head h2{ display:flex; align-items:baseline; gap:12px; font-variant-numeric:tabular-nums }
.rel-name{ font-size:17px; font-weight:400; color:var(--ink-2); letter-spacing:-.01em }
.rel-date{ font-size:12.5px; letter-spacing:.08em }
.rel-group{ margin-top:22px }
.rel-kind{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--pw-deep); margin-bottom:6px;
}
.rel-group ul{ margin-top:4px }

/* 히어로 버튼은 가운데로 — .page-hero는 text-align만 걸려 있어서
   flex인 .btn-row에는 안 먹는다 */
.page-hero .btn-row{ justify-content:center }

/* 격자 칸은 기본이 min-width:auto 라서 안쪽 표만큼 벌어진다.
   그러면 .scroll-x 가 있어도 페이지가 가로로 넘친다. 칸을 줄어들게 한다. */
.with-toc>*{ min-width:0 }
.scroll-x{ min-width:0; max-width:100% }
.split>*{ min-width:0 }
.docs-main,.docs-layout>*{ min-width:0 }

/* 글 목록: .role 과 규칙을 공유하다 보니 space-between 이 걸려서
   내용 덩어리가 오른쪽으로 밀리고, 글마다 제목 왼쪽 끝이 어긋났다.
   (.role 은 오른쪽에 메타를 붙이는 게 맞아서 그대로 둔다) */
.post-meta{ flex:0 0 auto }
@media (min-width:768px){
  .post-meta{ flex:0 0 190px }
  .post>:last-child{ flex:1 1 auto; min-width:0 }
}

/* ============================================================
   16. 홈 — 로더 + 전면 히어로 (globals.css §11 · 앞 시안 구조)
   두상이 화면을 채우고 문구가 왼쪽 아래에 얹힌다.
   ============================================================ */

/* 로더 — 홈에서만. Ø가 그려지고 걷힌다 */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.loader.gone{ opacity:0; pointer-events:none; transition:opacity 320ms var(--ease) }
.loader svg{ width:96px; height:96px; color:var(--ink-0); overflow:visible }
.loader .ring,.loader .slash{ opacity:0 }
.loader.run .ring{
  animation:ringIn .52s cubic-bezier(.16,1,.3,1) .10s both;
  transform-box:fill-box; transform-origin:center;
}
.loader.run .slash{ animation:wipe .52s cubic-bezier(.16,1,.3,1) .40s both }
@keyframes ringIn{ from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes wipe{
  from{opacity:0;clip-path:polygon(115% -25%,175% -25%,175% 15%,115% 15%)}
  35%{opacity:1}
  to{opacity:1;clip-path:polygon(-40% -25%,175% -25%,175% 175%,-40% 175%)}
}
@media (prefers-reduced-motion:reduce){
  .loader{ display:none }
  .hero{ opacity:1!important }
}

/* 전면 히어로 — 고정 헤더 뒤까지 올라간다.
   두상은 히어로 높이를 **꽉 채우고**(height:100%), 크기는 히어로 높이로 정한다.
   전에는 히어로를 100svh 로 고정해 두고 그 안을 두상으로 채우려 해서,
   키우면 좌우가 잘리고 줄이면 위가 비는 상태를 오갔다.
   모바일은 아래에서 히어로 자체를 낮춘다. */
.hero{
  /* 섹션은 길고(스크롤 여유), 실제로 보이는 것은 화면에 «붙어 있는» 무대다.
     전에는 히어로가 스크롤로 올라가 사라지고 그 아래에서 스크롤 장면이
     올라와서 두 화면으로 갈렸다(창업자 지적). 한 무대에 올리면 두상이
     제자리에서 프레임으로 넘어간다. 하단 네 칸도 무대에 있으니 계속 남는다. */
  position:relative; height:107.5svh;
  margin-top:calc(var(--header-h) * -1);
  opacity:0; transition:opacity .9s var(--ease);
  border-bottom:1px solid var(--hairline);
}
.hero-stage{
  position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden;
}
.hero.in{ opacity:1 }

/* 두상 — webp는 알파 마스크라 색을 통과시킨다 */
.hero-figure{
  /* 목이 히어로 바닥에 딱 붙는다. 프레임 안에서 목이 이미 맨 아래까지
     닿아 있어서(실측 여백 0), 정사각형을 아래에 붙이면 그대로 맞는다. */
  position:absolute; left:50%; top:auto; bottom:0;
  transform-origin:bottom center;
  transform:translateX(-50%)
            translate3d(var(--mx,0px), var(--my,0px), 0)
            rotate(var(--rot,0deg));
  /* 모바일도 **높이 기준**으로 잡는다. 가로 기준(118%)이면 세로로 긴 폰에서
     아래쪽만 채우고 위가 텅 빈다. 대신 좌우가 조금 잘린다(귀 끝). */
  height:96%; width:auto; aspect-ratio:1/1; background-color:var(--pw); pointer-events:none;
  -webkit-mask:url("/images/hero-mesh-head-mask-1400.webp") center/contain no-repeat;
          mask:url("/images/hero-mesh-head-mask-1400.webp") center/contain no-repeat;
}
@media (min-width:900px){ .hero-figure{ width:auto; height:94% } }

.hero-copy{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:122px; z-index:5;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
@media (min-width:900px){
  .hero-copy{ max-width:46%; bottom:132px }
  /* PC 히어로는 두상만 남긴다(창업자 지시). 모바일은 문구를 유지한다. */
  .hero-copy{ display:none }
}
.hero h1{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px,5.4vw,54px); line-height:1.05; letter-spacing:-.035em;
  margin:0; max-width:16ch; text-wrap:balance; word-break:keep-all;
}
.hero h1 em{ font-style:normal; color:var(--pw) }
.hero .sub{ font-family:var(--font-mono); font-size:12px; color:var(--ink-2); margin:0 }
.hero .btn-row{ margin-top:8px }

/* ── 거대 워드마크 ────────────────────────────────────────────
   PC 히어로는 두상만 가운데 있고 좌우가 700px 씩 비어 있었다.
   그 자리를 브랜드 이름 한 줄로 채운다 — 두상 «뒤»에 아주 옅게.

   글자는 두상 «위»에 얹고 글자 자신에게 multiply 를 건다. 옅은 페리윙클은
   흰 곳에선 그대로 보이고 격자 선 위에선 선이 이기므로, 눈에는 글자가
   두상 «뒤»에 있는 것으로 보인다.

   ⚠️ 진짜로 뒤에 두면 안 보인다. 두상 캔버스의 multiply 혼합은 자기가 속한
   층 안에서만 일어나는데, 두상을 감싼 .hero-veil 이 등장 애니메이션의
   filter 때문에 독립된 층이 된다. 그 안에서 캔버스의 흰 정사각형은 불투명한
   흰 판으로 합쳐지고, 그 판이 글자를 덮는다(실측: 폭 930px 가 통째로 사라졌다).
   모바일은 문구(.hero-copy)가 이미 있어 넣지 않는다. */
.hero-word,.hero-line{ display:none }
@media (min-width:900px){
  .hero-word{
    display:block; position:absolute; left:0; right:0; top:36%; z-index:4;
    mix-blend-mode:multiply;
    transform:translateY(-50%);
    font-family:var(--font-display); font-weight:500;
    /* 11글자 × 자폭 0.68em ≈ 7.5em — 12.6vw 면 화면 폭에 꽉 찬다 */
    font-size:12.6vw; line-height:1; letter-spacing:-.01em;
    text-align:center; white-space:nowrap; color:rgba(100,122,216,.14);
    user-select:none; pointer-events:none;
  }
  /* 태그라인 + 「무슨 AI인지」 두 줄. 버튼도 기기 목록도 없다. */
  .hero-line{
    display:block; position:absolute; left:var(--gutter); right:var(--gutter);
    bottom:112px; z-index:5; margin:0; text-align:center;
  }
  .hero-tag{
    margin:0; font-family:var(--font-display); font-weight:400;
    font-size:clamp(22px,2.05vw,32px); line-height:1.2; letter-spacing:-.03em;
    color:var(--ink-0);
  }
  .hero-tag em{ font-style:normal; color:var(--pw) }
  /* 이름과 태그라인만으로는 제품이 뭔지 안 보인다(창업자 지적).
     활자를 확 낮춰 태그라인을 이기지 않게 하되, 반드시 읽히게 둔다. */
  .hero-what{
    margin:10px auto 0;
    /* 측정 폭(measure) 제한을 두지 않는다. 그건 여러 줄 문단이 너무 길어지는 걸
       막는 장치인데, 이 줄은 한 문장이라 제한이 «줄바꿈만» 만든다.
       가로 폭은 히어로의 좌우 여백(--gutter)이 이미 잡고 있다. */
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(13.5px,1.05vw,16px); line-height:1.5; letter-spacing:-.01em;
    /* 격자 위에 얹히므로 ink-2 로는 흐리다 — 한 단계 진하게 */
    color:var(--ink-1);
  }
  .hero-what em{ font-style:normal; color:var(--pw) }
}

/* 하단 네 칸 */
/* 배경도 테두리도 없다 — 글자만 얹힌다 */
.stations{
  position:absolute; left:0; right:0; bottom:0; z-index:5; isolation:isolate;
  display:grid; grid-template-columns:repeat(2,1fr);
  padding-inline:var(--gutter); pointer-events:none;
}
@media (min-width:768px){ .stations{ grid-template-columns:repeat(4,1fr) } }
.stations .st{ padding:14px 0 18px; min-width:0 }
@media (min-width:768px){ .stations .st+.st{ padding-left:24px } }
.stations b{
  display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pw);
}
.stations span{ display:block; margin-top:5px; font-size:13.5px; color:var(--ink-1) }

/* 모바일 히어로 손질
   ① 하단 네 칸이 2×2로 두 줄이 되면서 CTA 버튼을 덮었다 → 여백을 띄운다
   ② 헤더에 로케일+내려받기+햄버거가 다 들어가 햄버거가 화면 밖으로 밀렸다.
      내려받기는 서랍 안에도 있고 히어로에도 큰 버튼이 있으니 좁은 화면에선 감춘다
      (정본 헤더에도 CTA 버튼은 없었다) */
@media (max-width:899px){
  .header-right>.btn{ display:none }
  .hero-copy{ bottom:152px }
}
@media (max-width:767px){
  /* 네 칸을 **한 줄**로. 2x2 로 두면 첫 화면에 두 칸만 보인다(창업자 지적). */
  .stations{ grid-template-columns:repeat(4,1fr); gap:0 6px }
  .stations .st{ padding:8px 0 10px }
  .stations b{ font-size:8.5px; letter-spacing:.07em }
  .stations span{ font-size:10.5px; margin-top:2px; line-height:1.28 }
  /* 버튼도 한 줄로 — 세로로 쌓이면 네 칸을 밀어낸다 */
  .page-hero .btn-row,.hero .btn-row{ flex-wrap:nowrap; gap:8px }
  .hero .btn{ height:40px; padding:0 14px; font-size:13.5px }
}

/* ── 스크롤 시네마틱 ──────────────────────────────────────────
   와이어프레임 두상이 스크롤을 따라 «사람»이 된다. 영상 재생이 아니라
   스크럽이다 — 스크롤 위치가 곧 프레임 번호다.

   ⚠️ 속도를 정하는 것은 .hero 의 height 하나다.
   무대가 100svh 로 붙어 있으므로 실제 스크롤 거리 = height - 100svh.
   높이 = 100svh(무대) + 7.5svh(변신).

   ■ 6svh 를 «어떻게» 쓰나 — 꼬리가 남지 않게
   고개를 돌린 채 스크롤을 시작하면 고개가 정면으로 «돌아오는 동안»에도
   스크롤은 계속 먹힌다. 그래서 정면이 됐을 땐 이미 한참 내려가 있고,
   변신이 그 지점부터 시작하면 뒷장면으로 튄다(창업자 지적).
   변신은 «정면이 된 지점»부터, «남은 스크롤 전부»를 쓴다.
   고정 거리로 두면 남는 만큼이 꼬리가 되어 스크롤해도 아무것도 안 움직인다
   (20svh 를 비워 뒀다가 창업자가 «버벅임·멈춤»으로 잡아냈다).
   이렇게 두면 변신이 끝나는 순간이 곧 무대가 떨어지는 순간이다 — 꼬리 0.

   ■ 속도
   무대가 100svh 로 붙어 있고 변신은 7.5svh 를 굴리는 동안 90장이 지나간다.
   원본 3초짜리가 약 0.075초 — 40배속.
   눈금(변신 구간): 200svh=3배 · 60svh=5배 · 30svh=10배
                  · 10svh=30배 · 7.5svh=40배 · 6svh=50배.
   ⚠️ 이 값에서는 «전환»이 아니라 «교체»다. 42px 인데 휠 한 칸이 100px 이라
   한 칸에 처음부터 끝까지 지나간다. 창업자 지시값.
   프레임을 버려서 빠르게 만들지 말 것 — 속도는 그대로고 부드러움만 잃는다.

   켜는 시점: 스크롤을 시작하고 «고개가 가운데로 돌아온 뒤». 페이드가 아니라
   즉시 켠다 — 선 그림 둘을 겹치면 두상이 두 개로 보인다(히어로에서 겪었다). */
.story-frame{
  position:absolute; inset:0; width:100%; height:100%; z-index:3;
  background:var(--bg); visibility:hidden;
}
.hero[data-story="on"] .story-frame{ visibility:visible }
/* 움직임 줄이기 설정: 스크럽을 하지 않는다. 히어로 한 화면으로 끝낸다. */
@media (prefers-reduced-motion:reduce){ .hero{ height:100svh } }
/* 사진이 깔리면 워드마크(multiply)·슬로건·모바일 문구는 읽히지도, 어울리지도 않는다.
   하단 네 칸만 남긴다(창업자 지시). */
.hero-word,.hero-line,.hero-copy{ transition:opacity .25s var(--ease) }
.hero[data-story="on"] .hero-word,
.hero[data-story="on"] .hero-line,
.hero[data-story="on"] .hero-copy{ opacity:0; pointer-events:none }
/* 하단 네 칸은 남긴다(창업자 지시). 사진 위에서 읽히도록 옅게 깔아 준다. */
.hero[data-story="on"] .stations::before{
  content:""; position:absolute; inset:auto 0 0; height:190px; z-index:-1;
  background:linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,0));
}

/* 두상이 블러에서 걷히며 나타난다.
   blur 를 .hero-figure 에 직접 걸면 안 된다 — 그리기 순서가
   「단색을 흐리게 → 마스크로 자르기」라서 테두리가 그대로 선명하다(변화 없음).
   마스크된 결과를 통째로 흐리려면 한 겹 위(veil)에 걸어야 한다. */
.hero-veil{ position:absolute; inset:0; will-change:filter,opacity,transform }
.hero.in .hero-veil{ animation:figureReveal 1.25s cubic-bezier(.16,1,.3,1) both }
@keyframes figureReveal{
  0%  { filter:blur(30px); opacity:0;  transform:scale(1.06) }
  45% { opacity:1 }
  100%{ filter:blur(0);    opacity:1;  transform:scale(1) }
}
@media (prefers-reduced-motion:reduce){
  .hero.in .hero-veil{ animation:none }
}

/* 숨쉬듯 아주 느리게 — 가만히 있어도 살아 있게.
   ⚠️ 위아래로 **옮기면 안 된다.** 전에 translate3d(0,-9px,0) 으로 들어 올렸더니
      숨쉴 때마다 목이 바닥에서 떨어져 밑에 여백이 생겼다.
      transform-origin 을 바닥에 두고 **크기만** 아주 살짝 바꾼다 —
      그러면 목은 바닥에 붙은 채로 가슴만 부푸는 것처럼 보인다. */
.hero-float{
  position:absolute; inset:0;
  transform-origin:bottom center;
  animation:heroBreathe 5s ease-in-out infinite;
}
@keyframes heroBreathe{
  0%   { transform:scale(1) }
  42%  { transform:scale(1.01) }    /* 들이쉼 — 천천히 부푼다 */
  78%  { transform:scale(.997) }    /* 내쉼 — 조금 더 오래 */
  100% { transform:scale(1) }
}
/* 마우스를 따라 아주 조금. JS가 --mx/--my/--rot 를 채운다 */
.hero-figure{ transition:transform .12s linear }
@media (prefers-reduced-motion:reduce){
  .hero-float{ animation:none }
  .hero-figure{ transition:none }
}

/* 마우스로 고개를 돌리는 프레임 시퀀스.
   프레임은 「페리윙클 선 + 순백 배경」의 손실 압축 webp 다(알파 없음 — 알파를
   쓰면 WebP가 무손실로 저장해서 7MB가 됐다). 흰 배경은 multiply 혼합이 지운다:
   흰색(255)을 곱하면 아래가 그대로 남고, 선만 남는다. */
.hero-turn{
  /* 아래 붙임 기준. 영상 프레임의 두상이 정지 원본보다 4.3% 좁아서
     그만큼만 키운다(경계 실측). 바닥을 기준으로 키우므로 목은 안 움직인다. */
  position:absolute; left:50%; top:auto; bottom:0;
  transform-origin:bottom center;
  transform:translateX(-50%) translate(0.24%,0) scale(1.043);
  height:96%; width:auto; aspect-ratio:1/1; pointer-events:none;
  mix-blend-mode:multiply; opacity:0;
}
@media (min-width:900px){ .hero-turn{ width:auto; height:94% } }
/* 인트로(고개 들기)는 **영상**이다. 되감을 필요가 없으니 그냥 재생하면 되고,
   그래야 60fps 로 매끈하다. 낱장 10장(초당 8장)일 때는 뚝뚝 끊겼다. */
.hero-intro{
  /* ⚠️ max-width 를 풀어야 한다. 전역 리셋의 video{max-width:100%} 가
     모바일에서 영상을 화면 폭으로 눌러 캔버스(670)보다 좁아졌다(409). */
  max-width:none;
  /* 회전 프레임과 **같은 배율**을 건다. 비교 기준은 영상의 첫 프레임이 아니라
     **마지막 프레임**이다 — 거기서 회전으로 넘어가기 때문이다.
     영상 마지막 0.7246 · 회전 t00 0.7241 로 둘이 같으므로 보정도 같아야 한다.
     (첫 프레임 0.7554 를 기준으로 삼아 보정을 뺐다가 영상만 작아졌다) */
  position:absolute; left:50%; top:auto; bottom:0;
  transform-origin:bottom center;
  transform:translateX(-50%) translate(0.24%,0) scale(1.043);
  height:96%; width:auto; aspect-ratio:1/1; pointer-events:none;
  mix-blend-mode:multiply; opacity:0;
}
@media (min-width:900px){ .hero-intro{ width:auto; height:94% } }
.hero[data-intro="play"] .hero-intro{ opacity:1 }
.hero[data-intro="play"] .hero-figure{ display:none }

/* 정지 이미지 ↔ 캔버스는 **즉시** 바꾼다.
   페이드로 바꾸면 그 사이 두상이 두 개 겹쳐 보인다.
   교체 시점은 블러가 가장 짙을 때(1250ms)라 딱 잘라도 눈에 안 띈다. */
.hero[data-turn="on"] .hero-turn{ opacity:1 }
.hero[data-turn="on"] .hero-figure{ display:none }


/* 모바일 — 히어로를 낮춰 두상 크기를 정한다(두상은 늘 히어로를 꽉 채운다).
   그래서 위 빈 공간이 원리적으로 생길 수 없다. */
@media (max-width:899px){
  /* 두상 크기는 히어로 높이가 정한다(두상은 늘 히어로를 꽉 채운다).
     96% 인 것은 배율 1.043 을 감안한 값 — 96 × 1.043 = 100.1% 로 딱 맞는다.
     100% 로 두면 정수리가 4.3% 만큼 잘린다. */
  /* 보이는 화면 높이 그대로. 숫자를 찍으면 그 폰에만 맞는다 —
     svh 는 주소창·툴바가 다 나온 «가장 작은» 화면이라, 첫 화면에
     다음 섹션이 한 줄도 안 올라온다. min-height 는 두지 않는다
     (작은 폰에서 그 값이 화면보다 커지면 다시 삐져나온다). */
  .hero{ height:200svh }
  .hero-stage{ height:100svh; min-height:0 }
  /* 두상만 살짝 줄인다(96 → 90%). 히어로 높이는 화면 그대로 두므로
     줄어든 만큼은 «위쪽»에 흰 여백으로 남는데, 배율 1.043 을 곱하면
     실제 여백은 히어로의 6.1% — 780px 화면에서 47px 로, 투명 헤더
     (64px) 안에 들어가 눈에 띄지 않는다. 목은 바닥 기준이라 안 뜬다.
     셋을 같은 값으로 두어야 인트로 영상 → 회전 캔버스 전환에서 안 튄다. */
  .hero-figure,.hero-intro,.hero-turn{ height:90% }
  .hero-copy{ bottom:112px }
  .stations .st{ padding:9px 0 10px }
}