/* ============================================================================
   8bit.center — 공개 사이트 v3
   ----------------------------------------------------------------------------
   v1(site.css)과 **완전히 독립**된 스타일시트다. 같은 페이지에 함께 로드되지 않으므로
   클래스 이름 충돌을 걱정하지 않고 이름을 짧게 쓴다.

   v1에서 무엇을 바꿨나(= 완성도가 갈리는 지점):
   1) 지면에서 블루를 걷어냈다. v1은 흰색·옅은 블루·딥블루가 번갈아 나와 페이지 전체가
      푸르스름하게 흐려졌다. 여기서는 지면을 흰색/무채 오프화이트/근사흑 3단으로 두고
      블루는 데이터·강조에만 쓴다. 색이 적을수록 브랜드색이 세진다.
   2) 타입 낙차를 벌렸다. 디스플레이 76px ↔ 본문 17px. v1은 54/17이라 위계가 눌려 있었다.
   3) 섹션마다 형(型)을 다르게 줬다. 카드 3열 반복 대신 콘솔·챕터·스테퍼·밴드가 번갈아 온다.
   4) 픽셀 폰트는 유지하되 용도를 좁혔다 — eyebrow·계측 라벨·챕터 키에만. 브랜드는 남고 소음은 준다.
   ============================================================================ */

/* ── 토큰 ─────────────────────────────────────────────────────────────── */
:root {
  /* 브랜드 블루 — v1과 같은 단일 색상환(ABKit --accent #0d99ff 파생). 임의 색값 금지. */
  --blue-50:  #f2f9ff;
  --blue-100: #e0f0ff;
  --blue-200: #bfe1ff;
  --blue-300: #8ecbff;
  --blue-400: #47b1ff;
  --blue-500: #0d99ff;   /* 브랜드 메인 */
  --blue-600: #0a7bd4;
  --blue-700: #0a6bbd;   /* 흰 지면 위 링크 최소 대비선 */
  --blue-800: #08508e;
  --blue-900: #0b3660;

  /* 무채 지면 — 마케팅 페이지의 바닥은 색이 없어야 한다. */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f5f7f9;
  --n-100: #edf0f4;
  --n-200: #e1e6ec;
  --n-300: #cfd6df;

  --ink:   #0b0f16;      /* 본문·제목 — v1(#101828)보다 한 단 깊게 */
  --ink-2: #4a5566;
  --ink-3: #6f7a8a;

  --deep:    #070a10;    /* 딥 챕터·푸터 지면 */
  --deep-2:  #0d1219;
  --deep-ln: rgba(255, 255, 255, .10);
  --on-deep:    #ffffff;
  --deep-ink-2: #c6cedb;  /* --deep 위 본문급 */
  --deep-ink-3: #8b97a7;  /* --deep 위 보조 */

  /* 타입 — 라틴은 자체 호스팅 Inter로 **고정**, 한글은 OS 기본 고딕에 맡긴다.
     v1은 스택 맨 앞이 Pretendard였는데 어디에서도 로드하지 않아, 그 폰트가 깔린 소수에게만
     의도한 화면이 나가고 나머지는 OS마다 다른 얼굴이 됐다. 마케팅 표면에서 본문 서체가
     방문자마다 다른 것은 완성도 이전에 통제 실패다. 한글까지 웹폰트로 잡으면 수백 KB라
     라틴만 싣고(48KB) 한글은 OS 기본을 쓴다 — 픽셀 폰트에서 쓰던 것과 같은 분업이다. */
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", monospace;
  --pixel: "Silkscreen", "GalmuriKR", var(--mono);

  --fs-display: clamp(40px, 5.4vw, 76px);
  --fs-h1:      clamp(33px, 4.0vw, 54px);
  --fs-h2:      clamp(27px, 3.0vw, 42px);
  --fs-h3:      20px;
  --fs-lead:    clamp(17px, 1.2vw, 20px);
  --fs-body:    17px;
  --fs-sm:      15px;
  --fs-xs:      13px;

  /* 레이아웃 — 8px 그리드 */
  --wrap:      1200px;
  --wrap-wide: 1320px;
  --wrap-read: 720px;
  --pad-x:     24px;
  --sec:       clamp(80px, 8.5vw, 136px);

  --r:     14px;
  --r-lg:  20px;
  --r-sm:  9px;
  --r-pill: 999px;

  /* 입체 — 2단만. 카드는 거의 평평하게 두고 제품 패널만 띄운다. */
  --sh-1: 0 1px 2px rgba(11, 15, 22, .05);
  --sh-2: 0 1px 3px rgba(11, 15, 22, .06), 0 20px 44px -14px rgba(11, 15, 22, .20);

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

/* ── 본문 서체 ────────────────────────────────────────────────────────────
   Inter (SIL OFL 1.1, 라이선스 전문 v3/fonts/Inter-OFL.txt) 라틴 서브셋 가변 폰트, 48KB.
   **자체 호스팅**한다 — Google Fonts CDN을 쓰면 방문자 IP가 Google로 나가
   "이 사이트에는 광고·추적 쿠키가 없다"는 개인정보처리방침과 어긋난다(픽셀 폰트와 같은 이유). */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 픽셀 폰트 ────────────────────────────────────────────────────────────
   v1과 같은 자체 호스팅 파일을 공유한다(경로가 /assets/site/fonts/ 로 고정이라 중복 다운로드 없음).
   Google Fonts CDN을 쓰지 않는 이유: 방문자 IP가 Google로 나가 "추적 없음" 고지와 어긋난다. */
@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026;
}
/* 한글 픽셀은 **v3 전용 서브셋**을 쓴다. v3는 v1에 없던 라벨(챕터 키·콘솔 탭·게이트)이 많아
   v1 서브셋(30자)으로는 새 글자만 조용히 산세리프로 떨어진다. 목록은 손으로 열거하지 않고
   tools/pixel-font-chars.php v3 가 문구 파일에서 뽑는다 — 문구를 바꾸면 다시 빌드할 것. */
@font-face {
  font-family: "GalmuriKR";
  src: url("fonts/galmuri-v3.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 118%;
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3;
}

/* ── 기본 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--n-0);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.16; letter-spacing: -.026em; }

/* ── 한국어 조판 ────────────────────────────────────────────────────────
   1) `word-break: keep-all` — 한국어는 어절 단위로 끊어야 한다. 기본값이면 "근거 위에서."가
      "위에 / 서."로 잘려 제목이 무너진다(v1에도 있던 문제다).
   2) 디스플레이 크기를 한 단 내린다 — 같은 px에서 한글은 라틴보다 시각적으로 크다.
      영문 76px에 맞춘 크기를 그대로 쓰면 한국어 히어로만 과하게 커진다.
   3) 자간을 덜 조인다 — 라틴용 -.04em은 한글에서 획이 서로 붙어 보인다. */
:lang(ko) { word-break: keep-all; }
html[lang="ko"] {
  --fs-display: clamp(32px, 4.3vw, 58px);
  --fs-h1:      clamp(27px, 3.3vw, 42px);
  --fs-h2:      clamp(24px, 2.6vw, 35px);
}
html[lang="ko"] .hero h1 { letter-spacing: -.022em; line-height: 1.16; }
html[lang="ko"] .sh-h, html[lang="ko"] .ch-h, html[lang="ko"] .cta h2 { letter-spacing: -.016em; }
html[lang="ko"] .ch-h { max-width: 22ch; }
p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { color: var(--blue-800); }
:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 3px; border-radius: 4px; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 60;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
}
.skip:focus { left: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap.wide { max-width: var(--wrap-wide); }
.wrap.read > * { max-width: var(--wrap-read); }

/* 계측 라벨 — 픽셀 폰트가 걸리는 **유일한** 자리다.
   비트맵이라 12px 미만에서 획이 뭉치므로 크기를 내리지 않는다. */
.eyebrow, .ch-k, .gate-n, .con-tab, .con-meta, .sig-k, .ft-col h2, .num-k, .step-n {
  font-family: var(--pixel);
  font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.eyebrow { color: var(--blue-700); }

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.006em;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { background: #1b2230; border-color: #1b2230; color: #fff; transform: translateY(-1px); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(0); }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: var(--fs-xs); }
.btn.lg { min-height: 56px; padding: 0 32px; font-size: 16px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--n-300); }
.btn.ghost:hover { background: var(--n-50); border-color: var(--ink-3); color: var(--ink); }
.btn.on-deep { background: #fff; color: var(--ink); border-color: #fff; }
.btn.on-deep:hover { background: var(--blue-100); border-color: var(--blue-100); color: var(--ink); }
.btn.ghost.on-deep { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn.ghost.on-deep:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); color: #fff; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* 픽셀 화살표 — 링크 hover에서 살짝 밀린다 */
.arw { display: inline-block; vertical-align: baseline; margin-left: 7px; transition: transform .16s var(--ease); }
a:hover .arw { transform: translateX(3px); }

/* ── 헤더 ─────────────────────────────────────────────────────────────── */
.hd {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
/* 배경·블러는 반드시 의사요소가 진다. `.hd` 자신에 backdrop-filter를 걸면
   **그 요소가 position:fixed 자손의 컨테이닝 블록이 되어** 모바일 시트(.sheet-body)의
   top/bottom이 뷰포트가 아니라 68px짜리 헤더 박스 기준으로 잡힌다 → 높이 0 → 메뉴가 통째로 사라진다.
   (z-index 문제가 아니라서 값을 아무리 올려도 안 보인다. 2026-08-12 QA에서 실측 확인)
   filter·transform·perspective·will-change도 같은 함정이니 헤더에 직접 걸지 말 것. */
.hd::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: background .2s var(--ease);
}
/* 스크롤이 시작돼야 경계선이 생긴다 — 최상단에서는 헤더가 히어로와 한 판으로 이어진다. */
.hd.is-stuck { border-bottom-color: var(--n-200); }
.hd.is-stuck::before { background: rgba(255, 255, 255, .86); }
.hd-in { display: flex; align-items: center; gap: 20px; height: 68px; }

.hd-logo { display: inline-flex; align-items: center; }
.hd-logo:hover { opacity: .7; }
.hd-logo img { display: block; height: 17px; width: auto; }

.hd-nav { display: flex; gap: 2px; margin-left: 12px; }
.hd-nav a {
  font-family: var(--pixel); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); padding: 9px 12px; border-radius: var(--r-sm);
  transition: color .14s var(--ease), background .14s var(--ease);
}
.hd-nav a:hover { color: var(--ink); background: var(--n-50); }
.hd-nav a[aria-current="page"] { color: var(--ink); }

.hd-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang { display: flex; align-items: center; gap: 2px; }
.lang a {
  font-family: var(--pixel); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-3); padding: 6px 8px; border-radius: var(--r-sm);
}
.lang a:hover { color: var(--ink); background: var(--n-50); }
.lang a.on { color: var(--ink); background: var(--n-100); }

/* 모바일 시트 — <details>라 JS 없이 동작한다 */
.sheet { display: none; margin-left: auto; }
.sheet > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); }
.sheet > summary::-webkit-details-marker { display: none; }
.sheet > summary:hover { background: var(--n-50); }
.sheet-bars { display: grid; gap: 4px; width: 18px; }
.sheet-bars i { display: block; height: 2px; background: var(--ink); border-radius: 1px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.sheet[open] .sheet-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sheet[open] .sheet-bars i:nth-child(2) { opacity: 0; }
.sheet[open] .sheet-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sheet-body {
  position: fixed; left: 0; right: 0; top: 68px; bottom: 0; z-index: 49;
  background: var(--n-0); padding: 16px var(--pad-x) 32px;
  display: flex; flex-direction: column; overflow-y: auto;
}
.sheet-body nav { display: grid; }
.sheet-body nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 2px; font-size: 22px; font-weight: 600; letter-spacing: -.022em;
  color: var(--ink); border-bottom: 1px solid var(--n-100);
}
.sheet-body nav a[aria-current="page"] { color: var(--blue-700); }
.sheet-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-foot .lang a { font-size: 12px; padding: 8px 10px; border: 1px solid var(--n-200); border-radius: var(--r-pill); }
.sheet-foot .lang { gap: 6px; }

/* ── 섹션 골격 ────────────────────────────────────────────────────────── */
.sec { padding: var(--sec) 0; }
/* 앵커 이동 시 스티키 헤더에 제목이 가리지 않게 */
[id] { scroll-margin-top: 88px; }
.sec.tint { background: var(--n-25); border-top: 1px solid var(--n-100); border-bottom: 1px solid var(--n-100); }
.sec.tight { padding-top: calc(var(--sec) * .62); }

.sh { max-width: 780px; }
.sh .eyebrow { margin-bottom: 18px; }
.sh-h { font-size: var(--fs-h2); letter-spacing: -.03em; }
.sh-p { margin-top: 16px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; }
.sh.center { max-width: 720px; margin: 0 auto; text-align: center; }
.sh.center .sh-p { margin-left: auto; margin-right: auto; }

/* ── 히어로 ───────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; padding: clamp(56px, 6vw, 92px) 0 clamp(64px, 7vw, 108px); overflow: hidden; }
/* 32px 계측 격자 — v1(64px)보다 촘촘하게 두고 훨씬 옅게 깐다. 눈에 띄면 배경이 아니라 무늬가 된다. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 15, 22, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 15, 22, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 76%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 76%);
}
/* 콘솔 뒤 블루 블룸 — 패널을 지면에서 띄우는 유일한 색 장치 */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -10%; top: -20%; width: 76%; height: 120%;
  background: radial-gradient(46% 46% at 60% 46%, rgba(13, 153, 255, .16) 0%, rgba(13, 153, 255, 0) 72%);
}
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(40px, 5vw, 76px); align-items: center; }
.hero-copy { max-width: 560px; }
.hero .eyebrow { display: inline-block; margin-bottom: 22px; padding: 6px 12px; border: 1px solid var(--blue-200); border-radius: var(--r-pill); background: var(--blue-50); }
.hero h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.04em; }
.hero .lead { margin-top: 24px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 50ch; }
.hero .btns { margin-top: 34px; }
.hero-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 28px; font-size: var(--fs-xs); color: var(--ink-3);
}
.hero-note::before { content: ""; width: 20px; height: 1px; background: var(--n-300); flex: none; }

/* ── 히어로 콘솔 ──────────────────────────────────────────────────────────
   v1의 장식 패널을 **조작 가능한 표면**으로 바꾼 것. 탭 3개가 자동 순환하고
   클릭·키보드로 잡을 수 있다(hover/focus 시 순환 정지). 실데이터가 아니라는 표기는
   패널 안에 상시 노출한다 — 정직성이 이 회사의 판매 논리라 UI에서도 지킨다. */
.con {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.con-tabs { display: flex; gap: 2px; padding: 10px 10px 0; background: var(--n-25); border-bottom: 1px solid var(--n-200); }
.con-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); padding: 10px 14px 12px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  position: relative; font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  transition: color .14s var(--ease), background .14s var(--ease);
}
.con-tab:hover { color: var(--ink-2); background: var(--n-50); }
.con-tab[aria-selected="true"] { color: var(--ink); background: var(--n-0); }
.con-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue-500);
}
/* 자동 순환 진행 막대 — "지금 보고 있는 탭이 언제 넘어가는가"를 보여준다 */
.con-tab .tick { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; background: var(--n-200); border-radius: 1px; overflow: hidden; opacity: 0; }
.con-tab[aria-selected="true"] .tick { opacity: 1; }
.con-tab .tick i { display: block; height: 100%; width: 100%; background: var(--blue-300); transform-origin: left; transform: scaleX(0); }
.con.is-cycling .con-tab[aria-selected="true"] .tick i { animation: conTick 6s linear forwards; }
@keyframes conTick { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 세 탭의 높이가 다르면 넘길 때마다 페이지가 튄다 — 가장 큰 패널에 맞춰 바닥을 고정한다. */
.con-body { position: relative; padding: 20px 22px 18px; min-height: 356px; }
.con-panel[hidden] { display: none; }
.con-panel { animation: conIn .32s var(--ease); }
@keyframes conIn { from { opacity: 0; transform: translateY(6px); } }

.con-hd { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--n-100); margin-bottom: 16px; }
.con-h { font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.01em; }
.con-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500); flex: none; animation: conPulse 2.4s ease-in-out infinite; }
@keyframes conPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.78); } }
.con-meta { margin-left: auto; color: var(--ink-3); font-size: 10px; }
.con-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--n-100); font-size: var(--fs-xs); color: var(--ink-3); }
.con-note {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 22px; background: var(--n-25); border-top: 1px solid var(--n-100);
  font-family: var(--pixel); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.con-note::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--n-300); flex: none; }

/* SCAN — 스토어 스캔 히트맵 */
.sig-grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.sig-cell { aspect-ratio: 1; border-radius: 2px; background: var(--n-100); animation: sigScan 3.6s ease-in-out infinite; animation-delay: var(--d); }
.sig-cell.l0 { background: var(--n-100); }
.sig-cell.l1 { background: var(--blue-100); }
.sig-cell.l2 { background: var(--blue-200); }
.sig-cell.l3 { background: var(--blue-300); }
.sig-cell.l4 { background: var(--blue-400); }
.sig-cell.l5 { background: var(--blue-500); }
@keyframes sigScan {
  0%, 100% { opacity: .4; transform: scale(.84); }
  14%      { opacity: 1;  transform: scale(1); }
  44%      { opacity: .7; transform: scale(.94); }
}

/* SCORE — 후보 점수 테이블 */
.sig-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.sig-tbl th {
  font-family: var(--pixel); font-size: 10px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); text-align: left; padding: 0 0 9px; border-bottom: 1px solid var(--n-100);
}
.sig-tbl th:last-child, .sig-tbl td:last-child { text-align: right; }
.sig-tbl td { padding: 11px 0; border-bottom: 1px solid var(--n-50); color: var(--ink-2); }
.sig-tbl tr:last-child td { border-bottom: 0; }
.sig-tbl .c-name { color: var(--ink); font-weight: 600; }
.sig-bar { display: block; height: 6px; background: var(--n-100); border-radius: 3px; overflow: hidden; min-width: 54px; }
.sig-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--blue-400), var(--blue-500)); transform-origin: left; animation: sigGrow 1.1s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes sigGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sig-score { font-family: var(--pixel); font-size: 12px; color: var(--blue-700); }

/* FORECAST — P10~P90 밴드 + 중앙선 */
.sig-chart svg { display: block; width: 100%; height: 120px; }
.sig-band { fill: rgba(13, 153, 255, .13); }
.sig-line { fill: none; stroke: var(--blue-500); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 460; animation: sigDraw 2.4s var(--ease) both; }
.sig-dash { fill: none; stroke: var(--blue-300); stroke-width: 1.5; stroke-dasharray: 3 4; }
@keyframes sigDraw { from { stroke-dashoffset: 460; } to { stroke-dashoffset: 0; } }
.sig-rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.sig-rows li { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sig-k { font-size: 10px; color: var(--ink-3); }
.sig-v { font-family: var(--pixel); font-size: 12px; color: var(--ink); }
.sig-rows li.dim .sig-v { color: var(--ink-3); }
.sig-rows li.hit .sig-v { color: var(--blue-700); }

@media (prefers-reduced-motion: reduce) {
  .con-dot, .sig-cell, .con-panel { animation: none; }
  .sig-line { animation: none; stroke-dashoffset: 0; }
  .sig-bar i { animation: none; }
  .con.is-cycling .con-tab[aria-selected="true"] .tick i { animation: none; transform: scaleX(1); }
}

/* ── 시그널 밴드 ──────────────────────────────────────────────────────────
   로고월이 설 자리다. 고객사 로고를 지어낼 수는 없으므로 **실제로 재고 있는 양**과
   읽고 있는 신호 종류를 놓는다. 숫자는 리서치 테이블의 실제 행 수다(§v3_pipeline_counts). */
.band { padding: 44px 0; border-top: 1px solid var(--n-100); border-bottom: 1px solid var(--n-100); background: var(--n-25); }
.band-h { font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.band-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 56px; margin-top: 22px; }
.num { text-align: center; }
.num-v { display: block; font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.num-k { display: block; margin-top: 9px; color: var(--ink-3); font-size: 11px; }

/* 신호 종류 마키 — 정지해 있으면 목록이고, 흐르면 "계속 들어오는 것"으로 읽힌다 */
.band-flow { margin-top: 26px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.band-track { display: flex; width: max-content; animation: flow 42s linear infinite; }
.band-set { display: flex; gap: 10px; padding-right: 10px; }
.band-flow:hover .band-track { animation-play-state: paused; }
@keyframes flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 15px; border: 1px solid var(--n-200); border-radius: var(--r-pill);
  background: var(--n-0); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--blue-400); flex: none; }
.band-note { margin: 24px auto 0; max-width: 64ch; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .band-track { animation: none; width: auto; justify-content: center; }
  .band-set { flex-wrap: wrap; justify-content: center; row-gap: 10px; padding-right: 0; }
  .band-set.dup { display: none; }        /* 흐르지 않으면 사본은 같은 칩의 중복일 뿐이다 */
  .band-flow { -webkit-mask-image: none; mask-image: none; }
}

/* ── 플랫폼 챕터 ──────────────────────────────────────────────────────────
   페이지의 본체. 카드 격자 반복 대신 "제목 + 피처 레일 + 제품 표면"이라는 한 형(型)을
   세 번 반복하되 좌우를 뒤집고 지면을 바꾼다 — 같은 리듬, 다른 표정. */
.ch { padding: var(--sec) 0; }
.ch.tint { background: var(--n-25); border-top: 1px solid var(--n-100); border-bottom: 1px solid var(--n-100); }
.ch-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.ch.flip .ch-copy { order: 2; }
.ch-k { display: flex; align-items: center; gap: 10px; color: var(--blue-700); margin-bottom: 18px; }
.ch-k .n { color: var(--n-300); }
.ch.deep .ch-k .n { color: rgba(255, 255, 255, .3); }
.ch-h { font-size: var(--fs-h2); letter-spacing: -.03em; max-width: 18ch; }
.ch-p { margin-top: 18px; color: var(--ink-2); font-size: var(--fs-sm); max-width: 54ch; }

.ch-feats { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.ch-feats li { padding: 18px 20px 18px 0; border-top: 1px solid var(--n-200); }
.ch-feats h3 { font-size: var(--fs-sm); letter-spacing: -.012em; }
.ch-feats p { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.55; }

/* 딥 챕터 */
.ch.deep { position: relative; isolation: isolate; overflow: hidden; background: var(--deep); color: var(--deep-ink-2); }
.ch.deep::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(120, 180, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 180, 255, .07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(70% 80% at 84% 6%, #000 0%, transparent 72%);
          mask-image: radial-gradient(70% 80% at 84% 6%, #000 0%, transparent 72%);
}
.ch.deep::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 56% at 82% 8%, rgba(13, 153, 255, .22) 0%, rgba(13, 153, 255, 0) 70%);
}
.ch.deep .ch-k { color: var(--blue-300); }
.ch.deep .ch-h { color: var(--on-deep); }
.ch.deep .ch-p { color: var(--deep-ink-2); }
.ch.deep .ch-feats li { border-top-color: var(--deep-ln); }
.ch.deep .ch-feats h3 { color: var(--on-deep); }
.ch.deep .ch-feats p { color: var(--deep-ink-3); }

/* ── 제품 표면(챕터 우측 패널) ───────────────────────────────────────────── */
.surf {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.ch.deep .surf { background: var(--deep-2); border-color: var(--deep-ln); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); }
.surf-hd {
  display: flex; align-items: center; gap: 9px; padding: 13px 18px;
  border-bottom: 1px solid var(--n-100); background: var(--n-25);
  font-family: var(--pixel); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.ch.deep .surf-hd { background: rgba(255, 255, 255, .03); border-bottom-color: var(--deep-ln); color: var(--deep-ink-3); }
.surf-hd .con-meta { font-size: 10px; }
.surf-b { padding: 18px; }

/* 수집 로그 행 (챕터 01) */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: var(--fs-xs); }
.log li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--n-50); }
.log li:last-child { border-bottom: 0; }
.log .t { font-family: var(--pixel); font-size: 10px; color: var(--ink-3); }
.log .s { color: var(--ink-2); }
.log .g { font-family: var(--pixel); font-size: 10px; padding: 3px 7px; border-radius: 4px; background: var(--blue-50); color: var(--blue-700); }
.log .g.b { background: var(--n-100); color: var(--ink-3); }

/* 출시 체크리스트 (챕터 03) */
.chk { list-style: none; margin: 0; padding: 0; }
.chk li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--n-50); font-size: var(--fs-xs); color: var(--ink-2); }
.chk li:last-child { border-bottom: 0; }
.chk .ico { flex: none; margin-top: 3px; color: var(--blue-500); }

.surf .con-foot { margin-top: 14px; }
.ch.deep .surf .con-foot { border-top-color: var(--deep-ln); color: var(--deep-ink-3); }

/* 예측 패널 (챕터 02, 딥) */
.fc-band { fill: rgba(13, 153, 255, .16); }
.fc-line { fill: none; stroke: var(--blue-400); stroke-width: 2.5; stroke-linecap: round; }
.fc-grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.fc-dots circle { fill: var(--blue-300); opacity: .5; }
.fc-legend { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--deep-ln); display: grid; gap: 10px; }
.fc-legend li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--deep-ink-3); }
.fc-legend .sw { width: 14px; height: 3px; border-radius: 2px; background: var(--blue-400); flex: none; }
.fc-legend .sw.rng { height: 10px; background: rgba(13, 153, 255, .3); border-radius: 3px; }
.fc-legend b { margin-left: auto; font-family: var(--pixel); font-size: 12px; font-weight: 400; color: var(--on-deep); }
.fc-legend li.pass b { color: var(--blue-300); }

/* 잔존 대조 (챕터 03) */
.rt { display: grid; gap: 14px; }
.rt-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 52px; gap: 12px; align-items: center; font-size: var(--fs-xs); }
.rt-k { font-family: var(--pixel); font-size: 10px; color: var(--ink-3); }
.rt-track { position: relative; height: 22px; background: var(--n-50); border-radius: 5px; overflow: hidden; }
.rt-track i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--blue-200), var(--blue-400)); border-radius: 5px; }
.rt-track u { position: absolute; top: 0; bottom: 0; left: var(--m); width: 2px; background: var(--ink); text-decoration: none; }
.rt-v { text-align: right; font-family: var(--pixel); font-size: 11px; color: var(--ink); }
.rt-legend { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--n-100); display: flex; gap: 18px; font-size: 11px; color: var(--ink-3); }
.rt-legend span { display: flex; align-items: center; gap: 7px; }
.rt-legend i { width: 12px; height: 8px; border-radius: 2px; background: var(--blue-300); }
.rt-legend i.m { width: 2px; height: 12px; border-radius: 0; background: var(--ink); }

/* ── 게이트 ──────────────────────────────────────────────────────────────
   일레븐랩스의 연구 타임라인이 놓인 자리. 우리에게 그만한 연혁은 없지만
   "무엇이 프로젝트를 죽이는가"는 있다 — 그쪽이 훨씬 우리다운 신뢰 장치다. */
.gate { margin-top: 56px; display: grid; gap: 0; counter-reset: g; }
.gate-item {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(0, 300px);
  gap: 32px; padding: 30px 0; border-top: 1px solid var(--n-200);
  transition: background .2s var(--ease);
}
.gate-item:last-child { border-bottom: 1px solid var(--n-200); }
.gate-n { display: flex; align-items: baseline; gap: 10px; color: var(--blue-700); padding-top: 3px; }
.gate-n .n { color: var(--n-300); }
.gate-h { font-size: var(--fs-h3); letter-spacing: -.022em; }
.gate-p { margin-top: 9px; font-size: var(--fs-sm); color: var(--ink-2); max-width: 46ch; }
.gate-kill {
  align-self: start; padding: 14px 16px; border-radius: var(--r);
  background: var(--n-25); border: 1px solid var(--n-200); font-size: var(--fs-xs); color: var(--ink-2);
}
.gate-kill b {
  display: block; margin-bottom: 6px;
  font-family: var(--pixel); font-size: 10px; font-weight: 400; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ── 원칙 ─────────────────────────────────────────────────────────────── */
.prin { margin-top: 52px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--n-200); border: 1px solid var(--n-200); border-radius: var(--r-lg); overflow: hidden; }
.prin-item { background: var(--n-0); padding: 32px; }
.prin-item .ico { color: var(--blue-500); }
.prin-item h3 { margin-top: 18px; font-size: var(--fs-h3); letter-spacing: -.02em; }
.prin-item p { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }

/* ── 카드 ─────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r); padding: 28px;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--n-300); transform: translateY(-2px); box-shadow: var(--sh-1); }
.card h3 { font-size: var(--fs-h3); }
.card p { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.card.app { display: flex; flex-direction: column; }
.app-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 18px 0 0; font-size: var(--fs-xs); }
.app-meta dt { color: var(--ink-3); }
.app-meta dd { margin: 0; color: var(--ink-2); }
.app-link { margin-top: auto; padding-top: 22px; font-size: var(--fs-sm); font-weight: 600; }

/* 앱 빈 상태 — 예약된 슬롯 */
.empty { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: 44px; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  aspect-ratio: 1; border-radius: var(--r); background: var(--n-0);
  border: 1px dashed var(--n-300); color: var(--n-300);
  animation: slotIdle 4.2s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes slotIdle { 0%, 100% { color: var(--n-300); } 50% { color: var(--blue-300); } }
@media (prefers-reduced-motion: reduce) { .slot { animation: none; } }
.slot-k { font-family: var(--pixel); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.empty-copy h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.026em; }
.empty-copy p { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-sm); max-width: 54ch; }
.empty-copy .lnk { display: inline-block; margin-top: 20px; font-weight: 600; font-size: var(--fs-sm); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { margin-top: 40px; border-top: 1px solid var(--n-200); }
.faq details { border-bottom: 1px solid var(--n-200); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 24px 44px 24px 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.018em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 60px 26px 0; color: var(--ink-2); font-size: var(--fs-sm); max-width: 76ch; }

/* ── CTA + 푸터 ────────────────────────────────────────────────────────
   둘 다 같은 딥 지면이라 한 덩어리로 읽힌다. 경계는 헤어라인 하나뿐(.ft border-top). */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(72px, 8vw, 120px) 0; text-align: center;
  background: var(--deep); color: var(--deep-ink-2);
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(120, 180, 255, .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 180, 255, .08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(60% 90% at 50% 100%, #000 0%, transparent 74%);
          mask-image: radial-gradient(60% 90% at 50% 100%, #000 0%, transparent 74%);
}
.cta .eyebrow { color: var(--blue-300); }
.cta h2 { margin-top: 18px; font-size: var(--fs-h1); letter-spacing: -.034em; color: var(--on-deep); max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta p { margin: 18px auto 0; max-width: 52ch; color: var(--deep-ink-3); font-size: var(--fs-sm); }
.cta .btns { justify-content: center; margin-top: 34px; }

.ft { background: var(--deep); color: var(--deep-ink-2); padding: 0 0 40px; border-top: 1px solid var(--deep-ln); font-size: var(--fs-sm); }
.ft-top { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.3fr; gap: 40px; padding: 64px 0 56px; }
.ft .hd-logo img { height: 19px; }
.ft-brand p { margin-top: 18px; max-width: 42ch; color: var(--deep-ink-3); font-size: var(--fs-xs); line-height: 1.7; }
.ft-cta { display: inline-flex; align-items: center; margin-top: 20px; color: var(--on-deep); font-weight: 600; font-size: var(--fs-sm); }
.ft-cta:hover { color: var(--blue-300); }
.ft-col h2 { color: var(--deep-ink-3); margin-bottom: 18px; font-size: 11px; }
.ft-col a { display: block; padding: 6px 0; color: var(--deep-ink-2); font-size: var(--fs-xs); }
.ft-col a:hover { color: var(--on-deep); }
.ft-addr { margin: 0 0 14px; color: var(--deep-ink-3); font-size: var(--fs-xs); line-height: 1.7; }
.ft-btm {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--deep-ln); color: var(--deep-ink-3); font-size: var(--fs-xs);
}
.ft-btm p { margin: 0; }

/* ── 하위 페이지 머리 ─────────────────────────────────────────────────── */
.ph { position: relative; isolation: isolate; overflow: hidden; padding: clamp(52px, 6vw, 88px) 0 clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--n-100); }
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 15, 22, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 15, 22, .04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(90% 120% at 12% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(90% 120% at 12% 0%, #000 0%, transparent 70%);
}
.ph .eyebrow { margin-bottom: 18px; }
.ph h1 { font-size: var(--fs-h1); letter-spacing: -.034em; max-width: 20ch; }
.ph .lead { margin-top: 20px; font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; }
.ph .updated { margin-top: 22px; font-size: var(--fs-xs); color: var(--ink-3); }

/* ── 브랜드 플레이트 (소개 페이지, 플랫폼 섹션 앞) ───────────────────────
   Play 커버를 지면으로 깐 딥 밴드. 페이지 중간에서 배색을 한 번 끊는 역할도 한다
   (홈의 라이트 → 딥 → 틴트 리듬과 같은 박자).

   --plate-ground 는 **원본의 지면색 그대로**다(#0a2038, 실측 균일). 이 하나 때문에
   밴드와 이미지의 경계가 사라진다 — 그래서 이미지에 검은 막을 덮어 흐릴 필요가 없고,
   아트는 원본 밝기 100%로 남는다. v3의 --deep(#070a10)과 다른 값을 쓰는 유일한 자리이며,
   **브랜드 지면이 아니라 자산에 묶인 색**이다(커버를 다시 만들면 이 값도 같이 바뀐다).

   대비 실측(#0a2038 기준): 흰색 16.5:1 · --deep-ink-2 10.2:1 · --blue-300 9.4:1 — 전부 통과. */
.plate {
  --plate-ground: #0a2038;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--plate-ground); color: var(--deep-ink-2);
  padding: clamp(76px, 8vw, 120px) 0;
}
.plate .eyebrow { color: var(--blue-300); }
.plate .sh-h { color: var(--on-deep); max-width: 20ch; }
.plate-p { margin-top: 18px; font-size: var(--fs-lead); color: var(--deep-ink-2); }
/* 명제표 — 작품 설명 + 서명. 본문과는 룰 하나로 확실히 끊는다(설명문이 아니라 작품에 붙는 판이다).
   설명은 한 단 낮춰 조용히, 이름은 지면에서 가장 밝게 둔다 — 사람 이름이 크레딧의 주어다. */
.plate-cred {
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  max-width: 48ch;
}
.plate-cap { font-size: var(--fs-sm); line-height: 1.62; color: var(--deep-ink-3); }
.plate-sig { margin-top: 16px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plate-sig b { font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: var(--on-deep); }
.plate-sig span { display: flex; align-items: center; gap: 12px; font-size: var(--fs-xs); color: var(--deep-ink-3); }
.plate-sig span::before { content: ""; width: 1px; height: 12px; background: rgba(255, 255, 255, .22); }

/* 글자 열은 아트가 시작되는 지점 앞에서 끝난다 — 겹침을 그라데이션으로 "가리는" 대신
   레이아웃에서 **일어날 수 없게** 만든다. 아트가 우측 46vw를 쓰므로 48vw로 자른다. */
.plate-copy { max-width: min(600px, 48vw); }

/* 아트는 **폭 기준**으로 키우고 위아래를 잘라낸다. 높이 기준으로 맞추면 밴드 높이에 눌려
   패널이 손톱만큼 작아진다. 원본도 패널이 프레임 밖으로 흘러 나가는 구도라, 더 잘려도
   같은 어법으로 읽힌다. 우측 정렬 + overflow:hidden 으로 화면 밖으로 흘린다.

   왼쪽 가장자리는 **마스크로 지운다**. 위에 반투명 막을 덮는 방식은 두 가지가 틀렸다:
   ① 그라데이션 좌표가 밴드 폭 기준이라 좁아지면 글자가 막 바깥으로 나가 카드 위에 올라탄다
   ② 막을 덮는 만큼 아트가 탁해진다.
   마스크는 아트에 붙으므로 밴드 폭과 무관하게 항상 아트의 32% 지점에서 녹고, 남은 부분은
   원본 밝기 100%로 남는다. 지면색이 원본과 같아 녹는 지점이 눈에 보이지 않는다. */
.plate-art {
  position: absolute; z-index: -1; pointer-events: none;
  right: 0; top: 50%; transform: translateY(-50%);
  width: clamp(460px, 46vw, 780px); height: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
}

/* 좁은 폭에서는 나란히 두는 구성이 성립하지 않는다 — 글자 열을 48vw로 자르면 읽을 수 없다.
   아트를 글자 **아래**로 내리고, 섹션 아래 여백으로 아트가 들어갈 자리를 먼저 비워 둔다.
   이 여백 덕분에 글자와 아트가 겹칠 수 있는 경우가 아예 없다 — 마스크는 이음매만 녹인다. */
@media (max-width: 860px) {
  .plate { padding-bottom: clamp(184px, 40vw, 280px); }
  .plate-copy { max-width: none; }
  .plate-art {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    /* 폭 기준으로 두면 아트 높이가 섹션 높이와 비슷해져 마스크로도 글자 영역을 침범한다.
       그래서 **높이를 못 박고 object-fit으로 잘라** 넓고 낮은 띠로 만든다.
       object-position 78%는 원본에서 볼 게 가장 많은 우측 카드 중심이다. */
    width: 100%; height: clamp(150px, 34vw, 230px);
    object-fit: cover; object-position: 78% 45%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 58%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 58%);
  }
}

/* ── 본문 요소 (하위 페이지) ──────────────────────────────────────────── */
.prose { color: var(--ink-2); }
.prose + .prose { margin-top: 20px; }
.pull {
  margin: 44px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--blue-500);
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.36; letter-spacing: -.024em;
  font-weight: 600; color: var(--ink);
}
.checks { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--n-200); }
.checks li { position: relative; padding: 16px 0 16px 32px; border-bottom: 1px solid var(--n-200); color: var(--ink-2); font-size: var(--fs-sm); }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: 23px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--blue-500); border-bottom: 2.5px solid var(--blue-500); transform: rotate(-45deg);
}
.links { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--n-200); }
.links li { border-bottom: 1px solid var(--n-200); }
.links a { display: flex; align-items: center; justify-content: space-between; padding: 20px 2px; font-size: var(--fs-h3); font-weight: 600; color: var(--ink); letter-spacing: -.018em; }
.links a:hover { color: var(--blue-700); }
.facts { display: grid; grid-template-columns: 240px 1fr; margin: 24px 0 0; border-top: 1px solid var(--n-200); }
.facts dt { padding: 18px 0; border-bottom: 1px solid var(--n-200); color: var(--ink-3); font-size: var(--fs-xs); }
.facts dd { padding: 18px 0; margin: 0; border-bottom: 1px solid var(--n-200); font-size: var(--fs-sm); }
.note { border: 1px solid var(--n-200); border-left: 3px solid var(--blue-500); border-radius: var(--r); padding: 28px 32px; background: var(--n-25); }
.note h2 { font-size: 22px; }
.note p { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-sm); }
.mailbox { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 32px; border: 1px solid var(--n-200); border-radius: var(--r-lg); background: var(--n-25); }
.mailbox div { flex: 1 1 320px; }
.mailbox h2 { font-size: 22px; letter-spacing: -.022em; }
.mailbox p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-sm); }
.steps-num { margin: 24px 0 0; padding-left: 1.4em; color: var(--ink-2); font-size: var(--fs-sm); }
.steps-num li { margin-bottom: 12px; }
.steps-num li::marker { color: var(--blue-700); font-weight: 700; }
.plain { margin: 14px 0 0; padding-left: 1.2em; color: var(--ink-2); font-size: var(--fs-sm); }
.plain li { margin-bottom: 8px; }
.sec-more { margin-top: 28px; font-size: var(--fs-sm); font-weight: 600; }

/* ── 법적 문서 ────────────────────────────────────────────────────────── */
.legal-in { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 96px; }
.toc h2 { font-family: var(--pixel); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: block; padding: 6px 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }
.toc a::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--n-300); font-family: var(--pixel); font-size: 10px; }
.toc a:hover { color: var(--blue-700); }
.legal h2 { font-size: 24px; letter-spacing: -.024em; margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--n-200); scroll-margin-top: 96px; }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { margin-top: 18px; color: var(--ink-2); font-size: var(--fs-sm); }
.legal ul { margin: 18px 0 0; padding-left: 1.2em; color: var(--ink-2); font-size: var(--fs-sm); }
.legal li { margin-bottom: 12px; }
.legal-contact { margin-top: 56px; padding: 28px 32px; background: var(--n-25); border: 1px solid var(--n-200); border-radius: var(--r); font-size: var(--fs-sm); }
.legal-contact p { margin: 0; color: var(--ink-2); }
.legal-contact p + p { margin-top: 12px; }
.legal-contact-alt { font-size: var(--fs-xs); color: var(--ink-3); }

/* ── 스크롤 등장 ──────────────────────────────────────────────────────────
   기본은 "보이는 상태"다. v3.js가 실제로 실행됐을 때만 <html>에 .has-reveal이 붙어
   비로소 감춘다 — JS가 죽어도 콘텐츠가 사라지지 않는다(v1의 규칙을 그대로 계승). */
.has-reveal [data-reveal] > * { opacity: 0; transform: translateY(16px); }
.has-reveal [data-reveal].is-in > * {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: var(--rd, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-reveal] > * { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   문의 폼 + 챗봇 (마크업은 v1과 공유 — 스타일만 v3 토큰으로 다시 잡는다)
   ══════════════════════════════════════════════════════════════════════ */
.cf { display: grid; gap: 22px; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-err { border: 1px solid var(--blue-200); border-left: 3px solid var(--blue-500); background: var(--blue-50); border-radius: var(--r-sm); padding: 14px 18px; font-size: var(--fs-sm); }
.cf-err ul { margin: 8px 0 0; padding-left: 1.2em; color: var(--ink-2); }
.cf-kinds { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.cf-kinds legend { font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0; margin-bottom: 10px; }
.cf-kind { display: block; cursor: pointer; }
.cf-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-kind-b { display: block; padding: 13px 16px; border: 1px solid var(--n-200); border-radius: var(--r-sm); background: var(--n-0); transition: border-color .15s, background .15s, box-shadow .15s; }
.cf-kind-t { display: block; font-size: var(--fs-sm); font-weight: 600; }
.cf-kind-h { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); }
.cf-kind:hover .cf-kind-b { border-color: var(--blue-200); background: var(--blue-50); }
.cf-kind input:checked + .cf-kind-b { border-color: var(--blue-500); background: var(--blue-50); box-shadow: 0 0 0 1px var(--blue-500) inset; }
.cf-kind input:focus-visible + .cf-kind-b { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cf-f { display: block; }
.cf-l { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.cf-h { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.cf input[type="text"], .cf input[type="email"], .cf textarea {
  display: block; width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--n-300); border-radius: var(--r-sm);
  background: var(--n-0); transition: border-color .15s, box-shadow .15s;
}
.cf textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
.cf ::placeholder { color: var(--ink-3); opacity: 1; }
.cf-consent { background: var(--n-25); border: 1px solid var(--n-200); border-radius: var(--r-sm); padding: 18px 20px; font-size: 14px; color: var(--ink-2); line-height: 1.62; }
.cf-consent-h { font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.cf-consent p + p { margin-top: 8px; }
.cf-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; color: var(--ink); }
.cf-check input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--blue-600); }
.cf-submit { justify-self: start; }
.cf-ok h2 { font-size: 24px; }

/* ── 언어 전환 제안 카드 ───────────────────────────────────────────────
   챗봇 런처가 우하단을 이미 쓰므로 좌하단에 둔다. 좁은 폭에서는 좌우를 채우고
   런처 **위로** 올린다(옆에 나란히 두면 카드가 290px로 눌려 문장이 세 줄로 깨진다). */
.langbar-host { position: fixed; left: 24px; bottom: 24px; z-index: 44; }
.langbar {
  position: relative; width: 372px; max-width: calc(100vw - 48px);
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); padding: 20px 22px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.langbar[hidden] { display: none; }
.langbar.is-in { opacity: 1; transform: none; }
.langbar-t { font-size: var(--fs-sm); font-weight: 600; padding-right: 28px; }
.langbar-p { margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55; }
.langbar-end { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.langbar-sw {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; color: var(--ink-3);
}
.langbar-sw b { font-weight: 400; }
.langbar-sw b.on { color: var(--blue-700); }
.langbar-sw .arw { margin-left: 0; }          /* 칩 사이 간격은 gap이 담당한다 */
.langbar .btn { margin-left: auto; }
.langbar-x {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
  display: grid; place-items: center; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.langbar-x:hover { background: var(--n-100); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .langbar { transition: none; }
}

.chat { position: fixed; right: 24px; bottom: 24px; z-index: 45; }
.chat-launch {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  box-shadow: var(--sh-2); transition: transform .18s var(--ease), background .18s var(--ease);
}
.chat-launch:hover { background: #1b2230; color: #fff; transform: translateY(-2px); }
.pxb { display: block; }
.pxb-d { fill: var(--ink); }
.chat-launch:hover .pxb-d { fill: #1b2230; }
.chat.is-open .chat-launch { opacity: 0; pointer-events: none; }
.chat-panel {
  position: absolute; right: 0; bottom: 0; width: 384px; max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 48px)); display: flex; flex-direction: column;
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.has-reveal .chat-panel { animation: chatIn .22s var(--ease); }
@keyframes chatIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.chat-hd { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--n-100); background: var(--n-25); }
.chat-t { font-family: var(--pixel); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.chat-s { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.chat-x { margin-left: auto; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; }
.chat-x:hover { background: var(--n-100); color: var(--ink); }
.chat-body { padding: 18px; overflow-y: auto; }
.chat-greet { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 16px; }
.chat-kinds { display: grid; gap: 8px; }
.chat-kind { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; padding: 13px 16px; border: 1px solid var(--n-200); border-radius: var(--r-sm); background: var(--n-0); transition: border-color .15s, background .15s, transform .15s; }
.chat-kind:hover { border-color: var(--blue-500); background: var(--blue-50); transform: translateX(2px); }
.chat-kind-t { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.chat-kind-h { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); }
.chat-back { border: 0; background: transparent; color: var(--blue-700); font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 0 0 12px; cursor: pointer; }
.chat-back:hover { text-decoration: underline; }
.chat-form .cf { gap: 16px; }
.chat-form .cf-kinds { display: none; }
.chat-form .cf-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.chat-form .cf-consent { font-size: var(--fs-xs); padding: 14px 16px; }
.chat-form textarea { min-height: 96px; }
.chat-form .cf-submit { justify-self: stretch; }
.chat-done { text-align: center; padding: 12px 0 8px; color: var(--blue-500); }
.chat-done h3 { margin-top: 14px; font-size: 19px; color: var(--ink); }
.chat-done p { margin-top: 10px; font-size: 14px; color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════
   반응형
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-copy { max-width: 640px; }
  .con { max-width: 620px; }
  .ch-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ch.flip .ch-copy { order: 0; }
  .gate-item { grid-template-columns: 120px minmax(0, 1fr); }
  .gate-kill { grid-column: 2; margin-top: 4px; }
  .legal-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .toc { position: static; }
  .toc ol { columns: 2; column-gap: 32px; }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .ft-brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .hd-nav, .hd-end { display: none; }
  .sheet { display: block; }
  .empty { grid-template-columns: minmax(0, 1fr); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
}

@media (max-width: 640px) {
  :root { --pad-x: 20px; --fs-body: 16px; }
  .hd-in { height: 60px; }
  .sheet-body { top: 60px; }
  .hero { padding-top: 40px; }
  .hero .btns .btn { flex: 1 1 100%; }
  /* 좁은 폭에서는 패널 내용이 통째로 작아지므로 바닥도 같이 내린다 — 안 내리면 죽은 여백이 남는다. */
  .con-body { padding: 16px 14px 14px; min-height: 296px; }
  .con-note { padding-left: 14px; padding-right: 14px; }
  /* 히트맵은 16열을 유지한다 — 열 수를 줄이면 128칸이 나뉘어 떨어지지 않아 마지막 줄이 이가 빠진다.
     칸이 작아질 뿐 형태는 그대로다. */
  .sig-grid { gap: 2px; }
  .sig-tbl .c-bar { display: none; }
  .band-nums { gap: 24px 36px; }
  .num-v { font-size: 30px; }
  .ch-feats { grid-template-columns: minmax(0, 1fr); }
  .gate-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 0; }
  .gate-kill { grid-column: 1; }
  .prin { grid-template-columns: minmax(0, 1fr); }
  .prin-item { padding: 26px; }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .card, .note, .mailbox, .legal-contact { padding: 24px; }
  .toc ol { columns: 1; }
  .faq summary { font-size: 17px; padding-right: 36px; }
  .faq details p { padding-right: 24px; }
  .links a { font-size: 17px; }
  .cf-row { grid-template-columns: minmax(0, 1fr); }
  .chat { right: 16px; bottom: 16px; }
  .chat-panel { width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
  .langbar-host { left: 16px; right: 16px; bottom: 84px; }   /* 런처(우하단 54px) 위로 */
  .langbar { width: 100%; max-width: none; }
  .rt-row { grid-template-columns: 56px minmax(0, 1fr) 44px; }
}