/* ==========================================================================
   싸인딜(SignDeal) — 마케팅 사이트 A 스타일시트
   design-system.md v1.1 토큰 그대로 구현. 하드코딩 색·px 최소화(토큰 참조).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰 (Design Tokens) — §11.1
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("/assets/pretendard-variable-subset.woff2") format("woff2-variations");
}

:root {
  /* primitives — Trust Blue */
  --sd-blue-50:#EDF3FF; --sd-blue-100:#DCE8FF; --sd-blue-300:#86A9F3;
  --sd-blue-500:#3569D9; --sd-blue-600:#2456C8; --sd-blue-700:#193F98; --sd-blue-900:#102A67;
  /* primitives — Friendly Coral */
  --sd-coral-100:#FFF0E7; --sd-coral-400:#F78B50; --sd-coral-500:#F36B21; --sd-coral-600:#D95412;
  /* primitives — Neutral Gray */
  --sd-gray-0:#FAF9F6; --sd-gray-50:#F0EEE9; --sd-gray-100:#E8E5DF; --sd-gray-200:#D8D5CF;
  --sd-gray-300:#C6C2BB; --sd-gray-400:#9298A2; --sd-gray-600:#5E6672; --sd-gray-800:#283241; --sd-gray-900:#172033;
  /* primitives — Status */
  --sd-green-500:#1FA971; --sd-green-50:#E6F7EF; --sd-green-700:#137A50;
  --sd-amber-500:#E5A100; --sd-amber-50:#FDF4DC; --sd-amber-700:#765200;
  --sd-red-500:#E03B3B; --sd-red-50:#FCE9E9;

  /* semantic (light) */
  --sd-bg:#F0EEE9; --sd-bg-subtle:#E9E7E2;
  --sd-surface:#FAF9F6; --sd-surface-raised:#FFFFFF;
  --sd-border:#D8D5CF; --sd-border-subtle:rgba(23,32,51,.09);
  --sd-text:var(--sd-gray-800); --sd-text-strong:var(--sd-gray-900); --sd-text-muted:var(--sd-gray-600);
  --sd-color-brand:var(--sd-blue-600); --sd-color-action:var(--sd-blue-600);
  --sd-color-action-hover:var(--sd-blue-700);
  --sd-color-accent:var(--sd-coral-500); --sd-color-accent-text:var(--sd-coral-600);
  --sd-color-trust:var(--sd-blue-900);
  --sd-color-success:var(--sd-green-700); --sd-color-success-text:var(--sd-green-700);
  --sd-color-warning:var(--sd-amber-500); --sd-color-warning-text:var(--sd-amber-700);
  --sd-color-danger:var(--sd-red-500);
  --sd-text-on-action:#FFFFFF;

  /* code block (다크 패널 — 라이트/다크 양립용 토큰. 항상 어두운 배경) */
  --sd-code-bg:#0A1A40; --sd-code-border:#21366B; --sd-code-text:#C8D6F5;
  --sd-code-tok-key:#8FB4FF; --sd-code-tok-str:#7BD8A8; --sd-code-tok-com:#7E93C0;

  /* signer roles (면/칩) */
  --sd-signer-1:#2456C8; --sd-signer-1-text:#2456C8;
  --sd-signer-2:#7A3FF2; --sd-signer-2-text:#6A2EE0;
  --sd-signer-3:#1FA971; --sd-signer-3-text:#137A50;
  --sd-signer-4:#E5A100; --sd-signer-4-text:#9A6E00;

  /* spacing */
  --sd-space-1:4px; --sd-space-2:8px; --sd-space-3:12px; --sd-space-4:16px;
  --sd-space-5:20px; --sd-space-6:24px; --sd-space-8:32px; --sd-space-12:48px;
  --sd-space-16:64px; --sd-space-24:96px;

  /* radius */
  --sd-radius-sm:12px; --sd-radius-md:18px; --sd-radius-lg:28px; --sd-radius-xl:40px; --sd-radius-full:9999px;

  /* shadow (블루-틴트, 절제) */
  --sd-shadow-sm:0 2px 8px rgba(25,63,152,.07);
  --sd-shadow-md:0 12px 32px rgba(25,63,152,.10);
  --sd-shadow-lg:0 28px 72px rgba(25,63,152,.14);
  --sd-shadow-focus:0 0 0 4px rgba(36,86,200,.24);

  /* type */
  --sd-font-sans:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --sd-font-mono:"JetBrains Mono","D2Coding",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* type scale (data-driven via classes below) */
  --sd-text-display:48px; --sd-text-h1:34px; --sd-text-h2:27px; --sd-text-h3:21px;
  --sd-text-body-lg:18px; --sd-text-body:16px; --sd-text-sm:14px;
  --sd-text-caption:13px; --sd-text-legal:13px;

  /* motion */
  --sd-motion-fast:180ms; --sd-motion-base:360ms; --sd-motion-slow:680ms;
  --sd-ease:cubic-bezier(.22,1,.36,1);

  /* layout */
  --sd-container-max:1180px; --sd-container-reading:720px;
}

[data-theme="dark"] {
  --sd-bg:#11151D; --sd-bg-subtle:#181E28;
  --sd-surface:#1C2330; --sd-surface-raised:#242D3B;
  --sd-border:#353E4C; --sd-border-subtle:rgba(255,255,255,.09);
  --sd-text:#E5E8ED; --sd-text-strong:#FAF9F6; --sd-text-muted:#A8B0BC;
  --sd-color-action:#5B8DEF; --sd-color-action-hover:#7AA5F5;
  --sd-color-accent:#FF8866; --sd-color-accent-text:#FF8866; --sd-color-trust:#A9C2FF;
  --sd-color-success:#3FCB92; --sd-color-success-text:#3FCB92;
  --sd-color-warning:#F0C03A; --sd-color-warning-text:#F0C03A;
  --sd-color-danger:#FF6B6B;
  --sd-text-on-action:#0E1320;
  --sd-green-50:#13251D; --sd-amber-50:#2A2410; --sd-red-50:#2A1515; --sd-blue-50:#16213E;
  --sd-coral-100:#2E1D17;
  /* 코드 패널: 다크에서 살짝 더 밝게(대비 AA 확보) */
  --sd-code-bg:#0B1326; --sd-code-border:#2A3A63; --sd-code-text:#D7E2F8;
  --sd-code-tok-key:#A6C4FF; --sd-code-tok-str:#9EE6C0; --sd-code-tok-com:#93A4C8;
  --sd-shadow-md:0 4px 12px rgba(0,0,0,.35);
  --sd-shadow-lg:0 8px 28px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   2. Reset & 베이스
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; -webkit-text-size-adjust: 100%; }
html { overflow-x: hidden; }

:where(main section[id], main [id]) { scroll-margin-top: 112px; }

body {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-text-body);
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--sd-text);
  background: var(--sd-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  /* keep-all: 한글 고아 음절('요.' 단독 줄)·단어 중간 분절 방지 — 긴 토큰(URL 등)은 .mono/code 에서 anywhere 로 개별 처리 */
  word-break: keep-all;
  /* max-width:100vw + overflow-x:hidden 이 body 를 스크롤 컨테이너로 만들어 position:sticky 헤더를
     전역에서 무력화하던 버그(P1) — 가로 오버플로 방지는 html 레벨 hidden(위)이 담당. */
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--sd-color-action); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }
:where(h1,h2,h3,h4) { color: var(--sd-text-strong); line-height: 1.3; letter-spacing: 0; }
:where(h1,h2,h3,h4,.lede,.btn,.price-line__main,.value__text strong,.section__head p) {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.mono, .code-inline, code, pre { word-break: normal; overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }

/* 키보드 포커스 링 — 모든 인터랙티브 요소(§5.9) */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--sd-shadow-focus);
}

/* 스킵 링크(접근성) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--sd-color-action); color: var(--sd-text-on-action);
  padding: var(--sd-space-3) var(--sd-space-5); border-radius: var(--sd-radius-md);
}
.skip-link:focus { left: var(--sd-space-4); top: var(--sd-space-4); }

/* --------------------------------------------------------------------------
   3. 레이아웃 유틸
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--sd-container-max); min-width: 0; margin-inline: auto; padding-inline: var(--sd-space-5); }
.section { padding-block: var(--sd-space-16); }
.section--subtle { background: var(--sd-bg-subtle); }
.section__head { max-width: var(--sd-container-reading); min-width: 0; margin-bottom: var(--sd-space-8); }
.section__head--center { margin-inline: auto; text-align: center; }
.site-beta-notice {
  border-block: 1px solid rgba(229,161,0,.26);
  background: var(--sd-amber-50);
  color: var(--sd-amber-700);
}
.site-beta-notice__inner {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-3);
  padding-block: var(--sd-space-2);
  text-align: center;
  font-size: var(--sd-text-sm);
}
.site-beta-notice__inner strong { flex: none; }
html[data-audience="business"] .site-beta-notice {
  border-color: rgba(255,150,92,.24);
  background: rgba(243,107,33,.10);
  color: #FFB083;
}
.eyebrow {
  display: inline-block; font-size: var(--sd-text-sm); font-weight: 700;
  color: var(--sd-color-action); margin-bottom: var(--sd-space-3); letter-spacing: 0;
}
.lede { font-size: var(--sd-text-body-lg); color: var(--sd-text-muted); margin-top: var(--sd-space-3); }
/* (2026-07 삭제) .section__head .lede 의 word-break:normal 해제 규칙 — body keep-all 을 리드에서마저
   무력화해 고아 음절을 만들던 원인. 긴 토큰이 필요한 리드는 개별 .break-url 로 처리. */

h2.h2 { font-size: var(--sd-text-h2); font-weight: 700; }
h3.h3 { font-size: var(--sd-text-h3); font-weight: 600; }
@media (max-width: 767px) {
  h2.h2 { font-size: 22px; }
  h3.h3 { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   4. 버튼 (§5.1)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sd-space-2);
  min-height: 44px; padding: 0 var(--sd-space-5); border: 1px solid transparent;
  border-radius: var(--sd-radius-md); font-size: 15px; font-weight: 600;
  transition: background var(--sd-motion-fast) var(--sd-ease), transform var(--sd-motion-fast) var(--sd-ease);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.99); }
.btn--lg { min-height: 52px; padding: 0 var(--sd-space-6); font-size: 16px; font-weight: 700; }
.btn--sm { min-height: 44px; padding: 0 var(--sd-space-4); font-size: 14px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--sd-color-action); color: var(--sd-text-on-action); }
.btn--primary:hover { background: var(--sd-color-action-hover); }

.btn--accent { background: var(--sd-coral-100); color: var(--sd-color-accent-text); border-color: var(--sd-coral-500); }
.btn--accent:hover { background: var(--sd-coral-400); color: #fff; }

.btn--secondary { background: transparent; color: var(--sd-blue-600); border-color: var(--sd-blue-300); }
.btn--secondary:hover { background: var(--sd-blue-50); }

.btn--ghost { background: transparent; color: var(--sd-text); border: 1px solid var(--sd-border); }
.btn--ghost:hover { background: var(--sd-bg-subtle); }

/* 헤더 로그인 버튼 — 오버레이(다크 히어로)와 솔리드(내부 페이지) 양쪽에서 또렷하게 보이도록. */
.nav__login { background: transparent; color: var(--sd-text); border: 1px solid var(--sd-border); font-weight: 700; }
.nav__login:hover { background: var(--sd-bg-subtle); }
.site-header--overlay .nav__login { color: #fff; border-color: rgba(255,255,255,.55); }
.site-header--overlay .nav__login:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* --------------------------------------------------------------------------
   5. 배지 / 칩 (§5.7)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sd-space-1);
  font-size: var(--sd-text-caption); font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: var(--sd-radius-full);
}
.badge--mcp {
  background: var(--sd-blue-900); color: #fff; font-family: var(--sd-font-mono);
  letter-spacing: 0; border-radius: var(--sd-radius-sm); padding: 4px 8px; font-weight: 700;
}
.badge--free { background: var(--sd-coral-100); color: var(--sd-color-accent-text); }
.badge--legal { background: var(--sd-blue-50); color: var(--sd-blue-700); }
.badge--pending { background: var(--sd-gray-100); color: var(--sd-gray-600); }
.badge--soon { background: var(--sd-gray-100); color: var(--sd-gray-600); }
.badge--success { background: var(--sd-green-50); color: var(--sd-green-700); }
.badge--warning { background: var(--sd-amber-50); color: var(--sd-amber-700); }

/* 서명자 역할 칩 — 색 + 번호 + 라벨 3중(색맹 안전 §2.4) */
.signer-chip {
  display: inline-flex; align-items: center; gap: var(--sd-space-1);
  font-size: var(--sd-text-caption); font-weight: 600;
  padding: 4px 10px; border-radius: var(--sd-radius-full);
}
.signer-chip__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--sd-radius-full);
  color: #fff; font-size: 11px; font-weight: 700;
}
.signer-chip--1 { background: var(--sd-blue-50); color: var(--sd-signer-1-text); }
.signer-chip--1 .signer-chip__no { background: var(--sd-signer-1); }
.signer-chip--2 { background: #F0EAFE; color: var(--sd-signer-2-text); }
.signer-chip--2 .signer-chip__no { background: var(--sd-signer-2); }

/* --------------------------------------------------------------------------
   6. 카드 (§5.3)
   -------------------------------------------------------------------------- */
.card {
  background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg); padding: var(--sd-space-6);
}
.card--info { background: var(--sd-blue-50); border: none; border-left: 4px solid var(--sd-blue-500); }
.card--trust { background: var(--sd-bg-subtle); border: 1px solid var(--sd-border); }

/* --------------------------------------------------------------------------
   7. 헤더 / 내비게이션 (§0.1)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--sd-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--sd-border-subtle);
}
.nav { display: flex; align-items: center; gap: var(--sd-space-5); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--sd-space-2); font-weight: 800; }
.brand__word { font-size: 20px; color: var(--sd-color-brand); letter-spacing: 0; }
.brand:hover { text-decoration: none; }
.nav__menu { display: none; align-items: center; gap: var(--sd-space-5); margin-left: var(--sd-space-4); }
.nav__menu a { color: var(--sd-text); font-size: var(--sd-text-sm); font-weight: 600; }
.nav__menu a:hover { color: var(--sd-color-action); text-decoration: none; }
.nav__actions { display: none; align-items: center; gap: var(--sd-space-2); margin-left: auto; }
.nav__toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md);
  background: var(--sd-surface); color: var(--sd-text);
}
.theme-toggle {
  width: 44px; height: 44px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md);
  background: var(--sd-surface); color: var(--sd-text); display: inline-flex;
  align-items: center; justify-content: center;
}
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* 전역 신뢰 띠 (§0.2) */
.trust-strip {
  background: var(--sd-bg-subtle); border-bottom: 1px solid var(--sd-border-subtle);
  font-size: var(--sd-text-caption); color: var(--sd-text-muted); text-align: center;
  padding: var(--sd-space-2) var(--sd-space-4);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 100vw;
  overflow: hidden;
}

/* 모바일 메뉴 패널 */
.mobile-menu {
  display: none; flex-direction: column; gap: var(--sd-space-1);
  /* ★P0 수정★ 백드롭(z-index:119, positioned)이 static 메뉴 위에 페인트되어 실제 터치가
     전부 백드롭에 먹히던 버그(링크 탭 불가 — JS click 은 히트테스트를 안 거쳐 재현 안 됨). */
  position: relative; z-index: 120;
  padding: var(--sd-space-4) var(--sd-space-5) var(--sd-space-6);
  border-bottom: 1px solid var(--sd-border-subtle); background: var(--sd-surface);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { padding: var(--sd-space-3); color: var(--sd-text); font-weight: 600; border-radius: var(--sd-radius-md); }
.mobile-menu a:hover { background: var(--sd-bg-subtle); text-decoration: none; }
.mobile-menu .btn { margin-top: var(--sd-space-3); }

@media (min-width: 1024px) {
  .nav__menu { display: flex; }
  .nav__actions { display: flex; }
  .nav__toggle { display: none; }
}

/* 모바일 헤더 재배치(2026-07): [☰][로고] ---- [테마][로그인]
   - 햄버거를 로고 왼쪽(왼손 엄지 존)으로, 로그인 CTA 를 우측 상단에 상시 노출(flex order — 마크업 무수정)
   - 헤더의 개인/기업 스위처는 모바일에선 숨김(드로어 상단 스위처로 일원화 — 과밀 해소) */
@media (max-width: 1023.98px) {
  /* 모바일 헤더: [☰ 왼쪽 끝] ── [싸인딜 정중앙] ── [로그인 오른쪽 끝] */
  .site-header .container { padding-inline: var(--sd-space-3); }
  .nav { gap: var(--sd-space-3); position: relative; }
  .nav__toggle { order: -2; flex-shrink: 0; margin-left: 0; }
  .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; margin: 0; }
  .nav__actions { display: flex; margin-left: auto; flex-shrink: 0; }
  .nav__actions .nav__login { white-space: nowrap; }
  /* .audience-switch{display:inline-flex}(베이스)와 같은 요소·동률 특정성이라 셀렉터를 올려 확실히 숨김 */
  .nav .nav__audience.audience-switch { display: none; }
}

/* --------------------------------------------------------------------------
   7.5 개인/기업 대상(audience) 스위처 (세그먼트 컨트롤 — .plan-toggle 톤 재사용)
   - 헤더에 항상 노출(모바일 포함), 모바일 메뉴 최상단에도 동일 컨트롤.
   - 표시/숨김 규칙은 data-audience 와 data-aud 의 조합으로 처리(아래).
   -------------------------------------------------------------------------- */
.audience-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--sd-bg-subtle); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-full);
}
.audience-switch__btn {
  min-height: 44px; padding: 0 var(--sd-space-4); border: 0; border-radius: var(--sd-radius-full);
  background: transparent; color: var(--sd-text-muted);
  font-weight: 700; font-size: var(--sd-text-caption); line-height: 1; cursor: pointer;
  white-space: nowrap;
}
.audience-switch__btn:hover { color: var(--sd-color-action); }
.audience-switch__btn.is-active,
.audience-switch__btn[aria-pressed="true"] {
  background: var(--sd-color-action); color: #fff;
  box-shadow: var(--sd-shadow-sm);
}
.audience-switch__btn.is-active:hover,
.audience-switch__btn[aria-pressed="true"]:hover { color: #fff; }
/* 탭 즉시 피드백 — 모바일에서 '안 눌린다'는 오해 방지 */
.audience-switch__btn:active { transform: scale(0.96); transition: transform 0.06s; }
/* 헤더용: 브랜드 다음, 메뉴 앞에 배치 — 모바일에서도 항상 노출 */
.nav__audience { margin-left: var(--sd-space-3); }
/* 모바일 메뉴 최상단 스위처 */
.mobile-menu__audience {
  display: flex; justify-content: center;
  padding-bottom: var(--sd-space-3); margin-bottom: var(--sd-space-2);
  border-bottom: 1px solid var(--sd-border-subtle);
}
.mobile-menu__audience .audience-switch { width: 100%; }
.mobile-menu__audience .audience-switch__btn { flex: 1 1 0; min-height: 44px; }

/* ── 대상별 표시/숨김 (data-aud 없는 요소는 공통: 항상 노출) ── */
[data-audience="personal"] [data-aud="business"] { display: none !important; }
[data-audience="business"] [data-aud="personal"] { display: none !important; }

/* 데스크톱에서 헤더 스위처는 항상 flex(모바일 메뉴 내 것과 구분) */
@media (min-width: 1024px) {
  .nav__audience { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   8. 히어로 (§1)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--sd-blue-50) 0%, var(--sd-bg) 60%);
  padding-block: var(--sd-space-16);
}
.hero__grid { display: grid; gap: var(--sd-space-12); align-items: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--sd-space-2); flex-wrap: wrap; margin-bottom: var(--sd-space-5); }
.hero__eyebrow-text { font-size: var(--sd-text-sm); font-weight: 700; color: var(--sd-color-trust); }
.hero h1 {
  font-size: var(--sd-text-display); font-weight: 800; line-height: 1.2;
  letter-spacing: 0; color: var(--sd-text-strong);
}
.hero__sub { font-size: var(--sd-text-body-lg); color: var(--sd-text-muted); margin-top: var(--sd-space-5); max-width: 36ch; }
.hero__sub strong { color: var(--sd-text-strong); }

.hero__values { display: grid; gap: var(--sd-space-4); margin-top: var(--sd-space-8); }
.value { display: flex; gap: var(--sd-space-3); align-items: flex-start; }
.value__icon { flex: none; width: 36px; height: 36px; border-radius: var(--sd-radius-md);
  display: grid; place-items: center; background: var(--sd-blue-50); color: var(--sd-color-action); }
.value__text strong { display: block; color: var(--sd-text-strong); font-weight: 700; }
.value__text span { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }

.price-line {
  margin-top: var(--sd-space-8); padding: var(--sd-space-5);
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
}
.price-line__main { font-size: var(--sd-text-body-lg); font-weight: 700; color: var(--sd-text-strong); }
.price-line__main .accent { color: var(--sd-color-accent-text); }
.price-line__sub { font-size: var(--sd-text-sm); color: var(--sd-text-muted); margin-top: var(--sd-space-2); }
.price-amount { font-weight: 800; }
.price-amount .won { font-weight: 600; font-size: 0.7em; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sd-space-3); margin-top: var(--sd-space-8); }
.hero__cta-note { font-size: var(--sd-text-sm); color: var(--sd-text-muted); margin-top: var(--sd-space-3); }
.hero__speed { margin-top: var(--sd-space-5); font-size: var(--sd-text-sm); color: var(--sd-text-muted); display: inline-flex; align-items: center; gap: var(--sd-space-2); }
.hero__minibadges { margin-top: var(--sd-space-6); font-size: var(--sd-text-caption); color: var(--sd-text-muted); }

.home-nav-grid {
  display: grid;
  gap: var(--sd-space-4);
}
.home-link-card {
  display: grid;
  gap: var(--sd-space-2);
  min-height: 100%;
  padding: var(--sd-space-5);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
}
.home-link-card:hover {
  text-decoration: none;
  border-color: var(--sd-blue-300);
  box-shadow: var(--sd-shadow-md);
}
.home-link-card strong {
  color: var(--sd-text-strong);
  font-size: var(--sd-text-h3);
  line-height: 1.3;
  word-break: keep-all;
}
.home-link-card span {
  color: var(--sd-text-muted);
  font-size: var(--sd-text-sm);
}
.mini-proof-grid {
  display: grid;
  gap: var(--sd-space-4);
}
.mini-proof {
  padding: var(--sd-space-5);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
}
.mini-proof strong {
  display: block;
  color: var(--sd-text-strong);
  margin-bottom: var(--sd-space-1);
}
.mini-proof span {
  color: var(--sd-text-muted);
  font-size: var(--sd-text-sm);
}
@media (min-width: 700px) {
  .home-nav-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-proof-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .home-nav-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 히어로 제품 비주얼 */
.hero-visual {
  margin: 0;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  overflow: hidden;
  background: var(--sd-surface);
  box-shadow: var(--sd-shadow-lg);
}
.hero-visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.hero-visual figcaption {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sd-space-2);
  padding: var(--sd-space-3) var(--sd-space-4);
  border-top: 1px solid var(--sd-border-subtle);
  background: var(--sd-surface);
}
.hero-visual figcaption span {
  min-width: 0;
  font-size: var(--sd-text-caption);
  font-weight: 700;
  color: var(--sd-text-muted);
  text-align: center;
}

/* 히어로 제품 목업 */
.mockup { display: grid; gap: var(--sd-space-4); }
.mockup__chat {
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-4); box-shadow: var(--sd-shadow-md);
}
.mockup__chat-label { font-size: var(--sd-text-caption); color: var(--sd-text-muted); margin-bottom: var(--sd-space-2); }
.mockup__chat-input {
  display: flex; align-items: center; gap: var(--sd-space-3);
  border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); padding: var(--sd-space-3) var(--sd-space-4);
}
.mockup__chat-input span { color: var(--sd-text); font-size: var(--sd-text-sm); }
.mockup__chat-send {
  flex: none; width: 32px; height: 32px; border-radius: var(--sd-radius-md);
  background: var(--sd-color-action); color: #fff; display: grid; place-items: center; margin-left: auto;
}

/* 미리보기 카드(시그니처 §5.4) */
.preview-card {
  background: var(--sd-surface-raised); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg); box-shadow: var(--sd-shadow-lg); overflow: hidden;
}
.preview-card__strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sd-space-3) var(--sd-space-5); background: var(--sd-blue-50);
  font-size: var(--sd-text-caption); color: var(--sd-blue-700); font-weight: 600;
}
.preview-card__body { padding: var(--sd-space-5); display: grid; gap: var(--sd-space-3); }
.preview-card__doc { font-weight: 700; color: var(--sd-text-strong); display: flex; align-items: center; gap: var(--sd-space-2); }
.preview-card__row { font-size: var(--sd-text-sm); color: var(--sd-text); display: flex; gap: var(--sd-space-2); }
.preview-card__row dt { color: var(--sd-text-muted); flex: none; min-width: 84px; }
.preview-card__row--label { margin: 0; color: var(--sd-text-muted); }
.preview-card__divider { height: 1px; background: var(--sd-border-subtle); }
.preview-card__fields { display: grid; gap: var(--sd-space-2); }
.preview-card__field { display: flex; align-items: center; justify-content: space-between; gap: var(--sd-space-2); font-size: var(--sd-text-sm); }
.preview-card__actions { display: flex; gap: var(--sd-space-2); padding: var(--sd-space-4) var(--sd-space-5); border-top: 1px solid var(--sd-border-subtle); }
.preview-card__actions .btn { flex: 1; }

/* 카톡 말풍선 목업 */
.kakao-bubble {
  background: #FEE500; color: #3C1E1E; border-radius: var(--sd-radius-md);
  padding: var(--sd-space-3) var(--sd-space-4); font-size: var(--sd-text-sm); max-width: 280px;
  box-shadow: var(--sd-shadow-sm); position: relative;
}
.kakao-bubble strong { display: block; }
.kakao-bubble__sender { font-size: var(--sd-text-caption); color: var(--sd-text-muted); margin-bottom: 4px; padding-left: var(--sd-space-2); }

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* --------------------------------------------------------------------------
   9. 작동 방식 — 스텝 (§2)
   -------------------------------------------------------------------------- */
.flow-visual {
  margin: 0 0 var(--sd-space-8);
  overflow: hidden;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  background: var(--sd-surface);
  box-shadow: var(--sd-shadow-md);
}
.flow-visual img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.flow-visual--guide {
  max-width: var(--sd-container-max);
  margin-inline: auto;
}
.steps { display: grid; gap: var(--sd-space-5); list-style: none; padding: 0; } /* ol 네이티브 번호 이중표기 방지(guide) */
.step { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); padding: var(--sd-space-6); }
.step__no {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--sd-radius-full); background: var(--sd-blue-600); color: #fff;
  font-weight: 800; margin-bottom: var(--sd-space-4); font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: var(--sd-space-2); }
.step p { color: var(--sd-text); font-size: var(--sd-text-sm); }
.step .diff-note { display: inline-block; margin-top: var(--sd-space-3); font-size: var(--sd-text-caption); color: var(--sd-color-action); font-weight: 600; }
.step .quote { color: var(--sd-text-strong); font-style: normal; background: var(--sd-bg-subtle); padding: 2px 6px; border-radius: var(--sd-radius-sm); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   10. 기능 (§3)
   -------------------------------------------------------------------------- */
.diff-cards { display: grid; gap: var(--sd-space-5); margin-bottom: var(--sd-space-12); }
.diff-card { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); padding: var(--sd-space-6); }
.diff-card__no { font-size: var(--sd-text-h3); font-weight: 800; color: var(--sd-color-action); font-variant-numeric: tabular-nums; }
.diff-card h3 { margin: var(--sd-space-2) 0; }
.diff-card p { font-size: var(--sd-text-sm); color: var(--sd-text); }
.diff-card .vs { display: block; margin-top: var(--sd-space-3); font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
@media (min-width: 768px) { .diff-cards { grid-template-columns: repeat(3, 1fr); } }

.feature-groups { display: grid; gap: var(--sd-space-8); }
.feature-group h3 { margin-bottom: var(--sd-space-4); }
.feature-list { display: grid; gap: var(--sd-space-3); }
.feature-list li { display: flex; gap: var(--sd-space-3); align-items: flex-start; font-size: var(--sd-text-sm); color: var(--sd-text); }
.feature-list .check { flex: none; width: 20px; height: 20px; color: var(--sd-color-action); margin-top: 2px; }
.feature-list strong { color: var(--sd-text-strong); }
.feature-group--roadmap { background: var(--sd-bg-subtle); border-radius: var(--sd-radius-lg); padding: var(--sd-space-6); }
.feature-group--roadmap .feature-list .check { color: var(--sd-gray-400); }
.feature-group__note { font-size: var(--sd-text-sm); color: var(--sd-text-muted); margin-bottom: var(--sd-space-4); }
/* 체크 목록(차용증 심화 등) — feature-list 톤 재사용, 마커·행잉 인덴트 */
.check-list { list-style: none; padding: 0; display: grid; gap: var(--sd-space-3); }
.check-list li { position: relative; padding-left: 1.4em; font-size: var(--sd-text-sm); color: var(--sd-text); }
.check-list li strong { color: var(--sd-text-strong); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--sd-blue-500); font-weight: 700; }
@media (min-width: 768px) { .feature-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sd-space-8); } }

/* --------------------------------------------------------------------------
   11. 안전·법적효력 — 신뢰 모드(코랄 0) (§4)
   -------------------------------------------------------------------------- */
.trust-mode { /* 신뢰 모드: 코랄 토큰을 블루/뉴트럴로 오버라이드 (§7.3) */
  --sd-color-accent: var(--sd-blue-600);
  --sd-color-accent-text: var(--sd-blue-700);
}
.trust-block { display: grid; gap: var(--sd-space-6); }
.trust-sub { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); padding: var(--sd-space-6); }
.trust-sub > h3 { display: flex; align-items: center; gap: var(--sd-space-2); margin-bottom: var(--sd-space-4); }
.trust-sub .ico { color: var(--sd-color-trust); }
.legal-list { display: grid; gap: var(--sd-space-3); }
.legal-list li { font-size: var(--sd-text-sm); padding-left: var(--sd-space-5); position: relative; }
.legal-list li::before { content: "§"; position: absolute; left: 0; color: var(--sd-blue-500); font-weight: 700; }
.legal-list strong { color: var(--sd-text-strong); }
.legal-list .cite { color: var(--sd-text-muted); font-size: var(--sd-text-caption); }
.honest-note { font-size: var(--sd-text-caption); color: var(--sd-text-muted); margin-top: var(--sd-space-4); padding-top: var(--sd-space-3); border-top: 1px dashed var(--sd-border); }

/* 감사추적 5요소 표 */
.audit-table { width: 100%; border-collapse: collapse; margin-block: var(--sd-space-4); font-size: var(--sd-text-sm); }
.audit-table th, .audit-table td { text-align: left; padding: var(--sd-space-3) var(--sd-space-4); border-bottom: 1px solid var(--sd-border-subtle); }
.audit-table th { color: var(--sd-text-strong); font-weight: 700; white-space: nowrap; width: 38%; vertical-align: top; }
.audit-table td { color: var(--sd-text); }
.mono { font-family: var(--sd-font-mono); font-size: var(--sd-text-caption); font-variant-numeric: tabular-nums; }
.cert-list { display: flex; flex-wrap: wrap; gap: var(--sd-space-2); margin-top: var(--sd-space-3); }

@media (min-width: 768px) { .trust-block { grid-template-columns: repeat(2, 1fr); } .trust-block .trust-sub--wide { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   12. 가격 (§5) — 신뢰 모드(코랄은 무료/990 강조 1곳만)
   -------------------------------------------------------------------------- */
.pricing-cards { display: grid; gap: var(--sd-space-5); margin-bottom: var(--sd-space-8); }
.price-card { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); padding: var(--sd-space-6); display: flex; flex-direction: column; }
.price-card--featured { border: 2px solid var(--sd-color-action); }
.price-card__name { font-weight: 700; color: var(--sd-text-strong); font-size: var(--sd-text-h3); }
.price-card__tag { font-size: var(--sd-text-sm); color: var(--sd-text-muted); margin-top: var(--sd-space-1); }
.price-card__hero { margin: var(--sd-space-5) 0; }
.price-card__hero .big { font-size: 32px; font-weight: 800; color: var(--sd-color-accent-text); }
.price-card__hero .big .won { font-size: 0.6em; font-weight: 600; }
.price-card__hero .vat { font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
.price-card__features { display: grid; gap: var(--sd-space-2); margin-bottom: var(--sd-space-6); }
.price-card__features li { font-size: var(--sd-text-sm); display: flex; gap: var(--sd-space-2); align-items: flex-start; }
.price-card__features .check { flex: none; color: var(--sd-color-action); width: 18px; height: 18px; margin-top: 3px; }
.price-card__features strong { color: var(--sd-text-strong); }
.price-card .btn { margin-top: auto; }
@media (min-width: 768px) { .pricing-cards { grid-template-columns: repeat(3, 1fr); } }

/* 비교표(담백) */
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--sd-text-sm); margin-top: var(--sd-space-5); }
.compare-table caption { text-align: left; color: var(--sd-text-muted); font-size: var(--sd-text-sm); margin-bottom: var(--sd-space-3); }
.compare-table th, .compare-table td { padding: var(--sd-space-3) var(--sd-space-4); border-bottom: 1px solid var(--sd-border-subtle); text-align: left; }
.compare-table thead th { color: var(--sd-text-strong); font-weight: 700; }
.compare-table .col-us { background: var(--sd-blue-50); }
.compare-table td.col-us, .compare-table th.col-us { color: var(--sd-blue-700); font-weight: 700; }
.compare-table .strike { text-decoration: line-through; color: var(--sd-text-muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.high-id-note { margin-top: var(--sd-space-5); font-size: var(--sd-text-sm); color: var(--sd-text-muted); background: var(--sd-bg-subtle); padding: var(--sd-space-4); border-radius: var(--sd-radius-md); }

/* --------------------------------------------------------------------------
   13. 경쟁사 대비 (§6)
   -------------------------------------------------------------------------- */
.why-conclusion {
  margin-top: var(--sd-space-8); text-align: center; font-size: var(--sd-text-body-lg);
  font-weight: 700; color: var(--sd-text-strong);
}
.why-conclusion .accent { color: var(--sd-color-accent-text); }
.why-pricenote { margin-top: var(--sd-space-5); font-size: var(--sd-text-sm); color: var(--sd-text-muted); }

/* --------------------------------------------------------------------------
   14. 계약 종류 (§7)
   -------------------------------------------------------------------------- */
.types-grid { display: grid; gap: var(--sd-space-4); }
.type-card { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); padding: var(--sd-space-5); display: flex; flex-direction: column; gap: var(--sd-space-2); }
.type-card--featured { border: 2px solid var(--sd-color-action); }
.type-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--sd-radius-full);
  background: var(--sd-blue-50); color: var(--sd-blue-700);
  font-size: 17px; font-weight: 800; line-height: 1;
  flex: 0 0 auto;
}
.type-card h3 { font-size: var(--sd-text-h3); }
.type-card p { font-size: var(--sd-text-sm); color: var(--sd-text-muted); flex: 1; }
.type-card a.type-link { font-size: var(--sd-text-sm); font-weight: 700; color: var(--sd-color-action); margin-top: var(--sd-space-2); }
.type-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sd-space-2); }
.exclusion-note { margin-top: var(--sd-space-8); }
@media (min-width: 600px) { .types-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .types-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   15. MCP 연결 가이드 (§8) — 다크 블루 패널
   -------------------------------------------------------------------------- */
.mcp-panel {
  background: var(--sd-blue-900); color: #E4E8F0; border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-12) var(--sd-space-8);
}
.mcp-panel h2 { color: #fff; }
.mcp-panel .lede { color: #B8C6E8; }
.mcp-steps { display: grid; gap: var(--sd-space-6); margin-top: var(--sd-space-8); }
.mcp-step h3 { color: #fff; display: flex; align-items: center; gap: var(--sd-space-2); margin-bottom: var(--sd-space-3); }
.mcp-step .mcp-step__no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--sd-radius-full); background: var(--sd-blue-500); color: #fff; font-weight: 700; font-size: 14px; }
.mcp-step p { color: #B8C6E8; font-size: var(--sd-text-sm); }
.code-block {
  background: var(--sd-code-bg); border: 1px solid var(--sd-code-border); border-radius: var(--sd-radius-md);
  padding: var(--sd-space-4); margin-top: var(--sd-space-3); overflow-x: auto;
}
.code-block pre { margin: 0; font-family: var(--sd-font-mono); font-size: var(--sd-text-caption); color: var(--sd-code-text); line-height: 1.6; }
.code-block .tok-key { color: var(--sd-code-tok-key); }
.code-block .tok-str { color: var(--sd-code-tok-str); }
.code-block .tok-com { color: var(--sd-code-tok-com); }
.mcp-info { margin-top: var(--sd-space-8); padding: var(--sd-space-5); background: rgba(255,255,255,.05); border: 1px solid #21366B; border-radius: var(--sd-radius-md); }
.mcp-info ul { display: grid; gap: var(--sd-space-2); }
.mcp-info li { font-size: var(--sd-text-sm); color: #C8D6F5; display: block; position: relative; padding-left: var(--sd-space-4); }
.mcp-info li::before { content: "›"; position: absolute; left: 0; color: var(--sd-blue-300); font-weight: 700; }
.mcp-cta { display: flex; flex-wrap: wrap; gap: var(--sd-space-3); margin-top: var(--sd-space-8); }
.mcp-cta .btn--secondary { color: #fff; border-color: var(--sd-blue-300); }
.mcp-cta .btn--secondary:hover { background: rgba(255,255,255,.08); }
@media (min-width: 768px) { .mcp-steps { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   16. FAQ (§9) — 아코디언
   -------------------------------------------------------------------------- */
.faq-groups { display: grid; gap: var(--sd-space-8); max-width: var(--sd-container-reading); margin-inline: auto; }
.faq-group h3 { margin-bottom: var(--sd-space-4); color: var(--sd-text-muted); font-size: var(--sd-text-sm); text-transform: none; letter-spacing: 0; font-weight: 700; }
.faq-item { border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); margin-bottom: var(--sd-space-3); background: var(--sd-surface); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: var(--sd-space-4) var(--sd-space-5);
  font-weight: 600; color: var(--sd-text-strong); display: flex; align-items: center;
  justify-content: space-between; gap: var(--sd-space-3); min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; color: var(--sd-text-muted); flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item__answer { padding: 0 var(--sd-space-5) var(--sd-space-5); color: var(--sd-text); font-size: var(--sd-text-sm); }

/* --------------------------------------------------------------------------
   16-B. 문서 진위 검증 센터 (B13) — 신뢰 모드
   -------------------------------------------------------------------------- */
.verify-grid { display: grid; gap: var(--sd-space-6); align-items: start; }
.verify-panel { display: grid; gap: var(--sd-space-3); }
.verify-panel__hint { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.verify-form { display: grid; gap: var(--sd-space-3); margin-top: var(--sd-space-2); }
.verify-form__label, .start-form__label {
  font-size: var(--sd-text-sm); font-weight: 600; color: var(--sd-text-strong);
}
.verify-form__row { display: flex; flex-wrap: wrap; gap: var(--sd-space-3); }
.verify-form__input {
  flex: 1 1 220px; min-height: 44px; padding: 0 var(--sd-space-4);
  border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md);
  background: var(--sd-surface); color: var(--sd-text); font-size: var(--sd-text-sm);
}
.verify-form__input::placeholder { color: var(--sd-gray-400); }
.verify-form__input:focus-visible { outline: none; box-shadow: var(--sd-shadow-focus); border-color: var(--sd-color-action); }
.verify-form__row .btn { flex: none; }
.verify-form__help, .start-form__help { font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
.verify-side { display: grid; gap: var(--sd-space-5); }
.verify-side img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-md);
}
.verify-points { display: grid; gap: var(--sd-space-3); align-content: start; }
.verify-points li { display: flex; gap: var(--sd-space-3); align-items: flex-start; font-size: var(--sd-text-sm); color: var(--sd-text); }
.verify-points .check { flex: none; width: 20px; height: 20px; color: var(--sd-color-action); margin-top: 2px; }
.verify-points strong { color: var(--sd-text-strong); }
@media (min-width: 768px) { .verify-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sd-space-8); } }

/* --------------------------------------------------------------------------
   16-C. 시작하기 섹션 (start.html) — CTA 목적지
   -------------------------------------------------------------------------- */
.start-grid { display: grid; gap: var(--sd-space-5); max-width: 840px; min-width: 0; margin-inline: auto; }
.start-card { display: grid; gap: var(--sd-space-3); align-content: start; min-width: 0; }
.start-card .badge { justify-self: start; }
.start-card > p { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.start-form { display: grid; gap: var(--sd-space-3); margin-top: var(--sd-space-2); }
.start-form__input {
  min-height: 48px; padding: 0 var(--sd-space-4);
  border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md);
  background: var(--sd-surface); color: var(--sd-text); font-size: var(--sd-text-body);
}
.start-form__input::placeholder { color: var(--sd-gray-400); }
.start-form__input:focus-visible { outline: none; box-shadow: var(--sd-shadow-focus); border-color: var(--sd-color-action); }
.start-card__actions { display: grid; gap: var(--sd-space-2); margin-top: var(--sd-space-2); }
.start-card__actions .btn { min-width: 0; white-space: normal; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 768px) { .start-grid { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   17. CTA 공통 / 섹션 푸터 CTA
   -------------------------------------------------------------------------- */
.section-cta { display: flex; flex-wrap: wrap; gap: var(--sd-space-3); margin-top: var(--sd-space-8); }
.section-cta--center { justify-content: center; }

.final-cta { background: var(--sd-blue-50); }
.final-cta .container { text-align: center; }
.final-cta h2 { font-size: var(--sd-text-h2); }
.final-cta p { color: var(--sd-text-muted); margin-top: var(--sd-space-3); font-size: var(--sd-text-body-lg); }

/* --------------------------------------------------------------------------
   18. 푸터 (§10)
   -------------------------------------------------------------------------- */
.site-footer { background: var(--sd-bg-subtle); border-top: 1px solid var(--sd-border); padding-block: var(--sd-space-12) var(--sd-space-8); margin-top: var(--sd-space-16); }
.footer-cols { display: grid; gap: var(--sd-space-8); }
.footer-col h3 { font-size: var(--sd-text-sm); color: var(--sd-text-strong); margin-bottom: var(--sd-space-4); }
.footer-col ul { display: grid; gap: var(--sd-space-2); }
.footer-col a { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.footer-col a:hover { color: var(--sd-color-action); }
.footer-legal { margin-top: var(--sd-space-12); padding-top: var(--sd-space-8); border-top: 1px solid var(--sd-border); display: grid; gap: var(--sd-space-4); }
.footer-legal p { font-size: var(--sd-text-legal); line-height: 1.65; color: var(--sd-text); }
.footer-legal strong { color: var(--sd-text-strong); }
.footer-meta { margin-top: var(--sd-space-8); display: flex; flex-wrap: wrap; gap: var(--sd-space-4); align-items: flex-start; justify-content: space-between; }
.footer-meta__biz { flex: 1 1 640px; display: grid; gap: 4px; font-size: var(--sd-text-caption); line-height: 1.7; color: var(--sd-text-muted); }
.footer-meta__biz-status {
  width: fit-content;
  font-size: var(--sd-text-caption); font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: var(--sd-radius-full);
  background: var(--sd-blue-50); color: var(--sd-blue-700);
}
.footer-meta__biz-line { display: block; max-width: 92ch; overflow-wrap: anywhere; word-break: keep-all; }
.footer-meta__tbd { color: var(--sd-text-muted); opacity: .8; }
.footer-meta__certs { display: flex; flex-wrap: wrap; gap: var(--sd-space-2); align-items: center; }
@media (min-width: 600px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   19. 모바일 sticky CTA (§0.1) — safe-area
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: var(--sd-space-3) var(--sd-space-4);
  padding-bottom: calc(var(--sd-space-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--sd-bg) 94%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--sd-border);
}
@media (min-width: 1024px) { .sticky-cta { display: none; } }
/* 하단 패딩은 실제 .sticky-cta가 있을 때만 — 없으면 푸터 아래 84px 빈 띠가 생김 */
@media (max-width: 1023px) { body:has(.sticky-cta) { padding-bottom: 84px; } }

/* --------------------------------------------------------------------------
   20. 접근성 — reduced motion (§9.3) + 보조
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* 데스크탑 타이포 미세 조정(모바일 우선 → 확대) */
@media (max-width: 767px) {
  .hero h1 { font-size: 32px; }
  .section__head h1.h2 { font-size: 28px !important; line-height: 1.28; }
  .section__head .lede { font-size: 16px; }
  .hero__content { text-align: center; }
  .hero__eyebrow { justify-content: center; }
  .hero__values { text-align: left; }
  .hero__cta { justify-content: center; }
  .hero__cta .btn,
  .section-cta .btn,
  .mcp-cta .btn {
    width: 100%;
  }
  .section { padding-block: var(--sd-space-12); }
  .mcp-panel { padding: var(--sd-space-8) var(--sd-space-5); }
}

@media (max-width: 420px) {
  .container { padding-inline: var(--sd-space-4); }
  .hero h1 { font-size: 30px; }
  .section__head h1.h2 { font-size: 26px !important; }
  .h2 { font-size: 22px; }
  .trust-strip { display: none; }
  .price-card__hero .big { font-size: 28px; }
  .hero-visual figcaption { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   21. 서브페이지 공통 (정책·소개·가이드·지원·개발자) — 신규 페이지에서 재사용
   -------------------------------------------------------------------------- */
/* 읽기 폭 제한 컨테이너 */
.container--reading { max-width: var(--sd-container-reading); }

/* 빵부스러기(breadcrumb) */
.breadcrumb { font-size: var(--sd-text-sm); color: var(--sd-text-muted); margin-bottom: var(--sd-space-5); }
.breadcrumb a { color: var(--sd-text-muted); }
.breadcrumb a:hover { color: var(--sd-color-action); }
.breadcrumb span[aria-hidden] { margin-inline: var(--sd-space-1); color: var(--sd-gray-400); }

/* 법적 문서 상단 고지 배너(초안 — 법무 검토 전) */
.legal-banner {
  margin-top: var(--sd-space-4); padding: var(--sd-space-3) var(--sd-space-5);
  background: var(--sd-amber-50); color: var(--sd-amber-700);
  border: 1px solid var(--sd-amber-500); border-left-width: 4px;
  border-radius: var(--sd-radius-md); font-size: var(--sd-text-sm);
}
.legal-banner strong { color: var(--sd-amber-700); }

/* 문서 본문(약관·정책·소개) */
.doc > h2 { margin-top: var(--sd-space-8); margin-bottom: var(--sd-space-3); }
.doc > h2:first-child { margin-top: 0; }
.doc > p { margin-bottom: var(--sd-space-4); color: var(--sd-text); }
.doc__meta { font-size: var(--sd-text-caption); color: var(--sd-text-muted); margin-bottom: var(--sd-space-6); }
.doc .mission-statement {
  padding: var(--sd-space-5); background: var(--sd-blue-50);
  border-left: 4px solid var(--sd-blue-500); border-radius: var(--sd-radius-md);
  color: var(--sd-text);
}
.doc-list { display: grid; gap: var(--sd-space-3); margin: var(--sd-space-3) 0 var(--sd-space-5); list-style: none; padding-left: 0; }
.doc-list li { font-size: var(--sd-text-sm); color: var(--sd-text); padding-left: var(--sd-space-5); position: relative; }
.doc-list li::before { content: "·"; position: absolute; left: var(--sd-space-2); color: var(--sd-blue-500); font-weight: 700; }
.doc-list strong { color: var(--sd-text-strong); }
.doc-list--num { counter-reset: doc-step; }
.doc-list--num li::before { content: counter(doc-step); counter-increment: doc-step; left: 0;
  font-size: var(--sd-text-caption); font-weight: 700; color: var(--sd-blue-600); }

/* 가이드용 스텝(5단계 — 세로 흐름) */
.steps--guide { grid-template-columns: 1fr; }
@media (min-width: 768px) { .steps--guide { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .steps--guide { grid-template-columns: 1fr; max-width: var(--sd-container-reading); } }

/* 공지 목록 */
.notice-list { display: grid; gap: var(--sd-space-3); }
.notice-item {
  display: flex; gap: var(--sd-space-4); align-items: flex-start;
  background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-md); padding: var(--sd-space-4) var(--sd-space-5);
}
.notice-item__badge { flex: none; padding-top: 2px; }
.notice-item__title { font-weight: 700; color: var(--sd-text-strong); }
.notice-item__desc { font-size: var(--sd-text-sm); color: var(--sd-text-muted); margin-top: var(--sd-space-1); }

/* 인라인 코드(라이트 배경) — mcp-panel 안에서는 어두운 토큰을 별도 지정 */
.code-inline {
  font-family: var(--sd-font-mono); font-size: 0.88em;
  background: var(--sd-bg-subtle); color: var(--sd-blue-700);
  padding: 2px 6px; border-radius: var(--sd-radius-sm);
  border: 1px solid var(--sd-border-subtle);
}
.mcp-panel .code-inline {
  background: rgba(255,255,255,.08); color: #C8D6F5; border-color: #21366B;
}

/* tool 레퍼런스 표 — 좌측 tool 컬럼 강조 */
.tool-table th[scope="row"] { white-space: nowrap; vertical-align: top; }
.tool-table th[scope="row"] .code-inline { font-weight: 600; }
.tool-table td .mono { color: var(--sd-text-muted); font-size: var(--sd-text-caption); }

/* 개발 모드 UX 프리뷰 */
.dev-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-space-2);
  margin-top: var(--sd-space-6);
}
.dev-tabs .btn { flex: 1 1 180px; }
.dev-tablist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sd-space-2);
  margin-top: var(--sd-space-6);
}
.dev-tab {
  min-height: 44px;
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-md);
  background: var(--sd-surface);
  color: var(--sd-text);
  font-weight: 700;
}
.dev-tab.is-active,
.dev-tab[aria-selected="true"] {
  background: var(--sd-blue-900);
  border-color: var(--sd-blue-900);
  color: #fff;
}
.dev-panel {
  margin-top: var(--sd-space-8);
  scroll-margin-top: 96px;
}
.dev-panel[hidden] { display: none; }
.dev-grid { display: grid; gap: var(--sd-space-5); }
.dev-grid--equal { align-items: stretch; }
.dev-rail { display: grid; gap: var(--sd-space-3); }
.dev-route {
  display: flex;
  justify-content: space-between;
  gap: var(--sd-space-3);
  align-items: center;
  padding: var(--sd-space-4);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-md);
  background: var(--sd-surface);
}
.dev-route strong { color: var(--sd-text-strong); }
.dev-route code { white-space: nowrap; }
.dev-screen {
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
  overflow: hidden;
  box-shadow: var(--sd-shadow-md);
}
.dev-screen__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-3);
  padding: var(--sd-space-3) var(--sd-space-4);
  border-bottom: 1px solid var(--sd-border-subtle);
  background: var(--sd-bg-subtle);
}
.dev-screen__body {
  padding: var(--sd-space-5);
  display: grid;
  gap: var(--sd-space-4);
}
.dev-app-layout { display: grid; gap: var(--sd-space-4); }
.dev-sidebar {
  display: grid;
  gap: var(--sd-space-2);
  align-content: start;
  padding: var(--sd-space-3);
  border: 1px solid var(--sd-border-subtle);
  border-radius: var(--sd-radius-md);
  background: var(--sd-bg-subtle);
}
.dev-sidebar span { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.dev-main-stack { display: grid; gap: var(--sd-space-3); }
.dev-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sd-space-3); }
.dev-kpi {
  padding: var(--sd-space-4);
  border: 1px solid var(--sd-border-subtle);
  border-radius: var(--sd-radius-md);
  background: var(--sd-bg-subtle);
}
.dev-kpi strong {
  display: block;
  color: var(--sd-text-strong);
  font-size: var(--sd-text-h3);
  line-height: 1.2;
}
.dev-kpi span { font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
.dev-contract-row {
  display: grid;
  gap: var(--sd-space-2);
  padding: var(--sd-space-4);
  border: 1px solid var(--sd-border-subtle);
  border-radius: var(--sd-radius-md);
}
.dev-phone {
  max-width: 360px;
  margin-inline: auto;
  border: 10px solid var(--sd-gray-900);
  border-radius: 28px;
  background: var(--sd-surface);
  overflow: hidden;
  box-shadow: var(--sd-shadow-lg);
}
.dev-phone__body {
  padding: var(--sd-space-5);
  display: grid;
  gap: var(--sd-space-4);
}
.dev-phone__doc {
  padding: var(--sd-space-4);
  border: 1px solid var(--sd-border-subtle);
  border-radius: var(--sd-radius-md);
  background: var(--sd-bg-subtle);
}
.dev-sign-box {
  min-height: 76px;
  border: 2px dashed var(--sd-blue-300);
  border-radius: var(--sd-radius-md);
  display: grid;
  place-items: center;
  color: var(--sd-blue-700);
  font-weight: 700;
}
.dev-timeline {
  display: grid;
  gap: var(--sd-space-3);
}
.dev-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sd-space-3);
  align-items: start;
}
.dev-step__no {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sd-radius-full);
  background: var(--sd-blue-50);
  color: var(--sd-blue-700);
  font-weight: 800;
}
.dev-step strong { color: var(--sd-text-strong); }
.dev-step p { color: var(--sd-text-muted); font-size: var(--sd-text-sm); }
.dev-persona-grid {
  display: grid;
  gap: var(--sd-space-4);
}
.dev-persona {
  padding: var(--sd-space-5);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface);
}
.dev-persona h3 { margin-top: var(--sd-space-2); }
.dev-persona p { margin-top: var(--sd-space-2); color: var(--sd-text-muted); font-size: var(--sd-text-sm); }
.auth-stack {
  display: grid;
  gap: var(--sd-space-2);
}
.auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--sd-space-4);
  border-radius: var(--sd-radius-md);
  border: 1px solid var(--sd-border);
  font-weight: 800;
  text-decoration: none;
}
.auth-button:hover { text-decoration: none; }
.auth-button--kakao { background: #FEE500; color: #171A21; border-color: #F0D600; }
.auth-button--naver { background: #03C75A; color: #fff; border-color: #03B351; }
.auth-button--email { background: var(--sd-surface); color: var(--sd-text-strong); }
.status-board {
  display: grid;
  gap: var(--sd-space-3);
}
.status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sd-space-3);
  align-items: center;
  padding: var(--sd-space-4);
  border: 1px solid var(--sd-border-subtle);
  border-radius: var(--sd-radius-md);
  background: var(--sd-bg-subtle);
}
.status-row strong { color: var(--sd-text-strong); }
.status-row span:not(.badge) { color: var(--sd-text-muted); font-size: var(--sd-text-sm); }
.schema-flow {
  display: grid;
  gap: var(--sd-space-3);
}
.schema-node {
  padding: var(--sd-space-4);
  border: 1px solid var(--sd-border);
  border-left: 4px solid var(--sd-blue-500);
  border-radius: var(--sd-radius-md);
  background: var(--sd-surface);
}
.schema-node strong { display: block; color: var(--sd-text-strong); }
.schema-node span { display: block; margin-top: var(--sd-space-1); color: var(--sd-text-muted); font-size: var(--sd-text-sm); }
@media (min-width: 760px) {
  .dev-tablist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dev-app-layout { grid-template-columns: 180px 1fr; }
  .dev-kpis { grid-template-columns: repeat(4, 1fr); }
  .dev-contract-row { grid-template-columns: 1fr auto; align-items: center; }
  .dev-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .dev-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   22. 다크 모드 컴포넌트 대비 보정 (WCAG AA) — light 프리미티브 토큰이
       다크에서 재정의되지 않아 저대비가 되는 컴포넌트만 개별 보정한다.
   -------------------------------------------------------------------------- */
[data-theme="dark"] { --sd-shadow-focus: 0 0 0 3px rgba(127,168,245,.5); }
[data-theme="dark"] .btn--secondary { color: var(--sd-blue-300); border-color: var(--sd-blue-500); }
[data-theme="dark"] .btn--secondary:hover { background: rgba(127,168,245,.12); }
[data-theme="dark"] .badge--legal { color: #A9C2FF; }
[data-theme="dark"] .badge--pending,
[data-theme="dark"] .badge--soon { background: var(--sd-bg-subtle); color: var(--sd-text-muted); }
[data-theme="dark"] .badge--success { color: var(--sd-color-success); }
[data-theme="dark"] .badge--warning { color: var(--sd-color-warning); }
[data-theme="dark"] .footer-meta__biz-status { background: var(--sd-bg-subtle); color: var(--sd-text); }
/* 인라인 코드: 라이트 토큰(blue-700)이 다크에서 저대비 → 밝은 블루로 보정(AA) */
[data-theme="dark"] .code-inline { background: var(--sd-surface-raised); color: var(--sd-blue-300); border-color: var(--sd-border); }
/* light 프리미티브(blue-50/green-50 배경 + *-700 글자) 조합이 다크에서 저대비가 되는 목업/스텝 컴포넌트 일괄 보정 */
[data-theme="dark"] .mk-cert__head,
[data-theme="dark"] .preview-card__strip,
[data-theme="dark"] .mk-doc__head,
[data-theme="dark"] .type-card__icon,
[data-theme="dark"] .flow-strip__no,
[data-theme="dark"] .dev-step__no,
[data-theme="dark"] .dev-sign-box,
[data-theme="dark"] .evidence-step__dot,
[data-theme="dark"] .mk-vs__cell--yes { background: var(--sd-bg-subtle); color: var(--sd-text-strong); }

/* ==========================================================================
   23. 홈 오버홀 정본 컴포넌트 (IA §1-2/§1-3/§1-4)
   - GNB 드롭다운 · 모바일 드로어 · KV 5슬라이더 · CSS/SVG 목업 · 흐름띠
   - 기능/혜택 카드 · 신뢰 3축 · 가격 비교 미니차트 · 증거 타임라인 · 이원 CTA
   정직성: 미취득 인증 '추진 중'만, AI '법률자문 아님', 블록체인 카피 없음.
   ========================================================================== */

/* --- 23.1 GNB 드롭다운 (8항목 + 서브메뉴) --- */
.site-header--overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background var(--sd-motion-base) var(--sd-ease),
              border-color var(--sd-motion-base) var(--sd-ease),
              box-shadow var(--sd-motion-base) var(--sd-ease);
}
/* KV 위에서는 어두운 그라데이션 배경이므로 헤더 글자를 밝게 */
.site-header--overlay .brand__word { color: #fff; }
.site-header--overlay .nav__menu > li > a,
.site-header--overlay .nav__menu > li > button { color: rgba(255,255,255,.92); }
.site-header--overlay .nav__menu > li > a:hover,
.site-header--overlay .nav__menu > li > button:hover { color: #fff; }
.site-header--overlay .theme-toggle,
.site-header--overlay .nav__toggle {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff;
}
.site-header--overlay .btn--ghost { color: rgba(255,255,255,.92); }
.site-header--overlay .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* 스크롤 시 / 비-KV 페이지: 불투명 표면으로 전환 */
.site-header--overlay.is-scrolled,
.site-header--solid {
  position: sticky; background: color-mix(in srgb, var(--sd-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--sd-border-subtle);
}
.site-header--overlay.is-scrolled .brand__word,
.site-header--solid .brand__word { color: var(--sd-color-brand); }
.site-header--overlay.is-scrolled .nav__menu > li > a,
.site-header--overlay.is-scrolled .nav__menu > li > button,
.site-header--solid .nav__menu > li > a,
.site-header--solid .nav__menu > li > button { color: var(--sd-text); }
.site-header--overlay.is-scrolled .nav__menu > li > a:hover,
.site-header--overlay.is-scrolled .nav__menu > li > button:hover,
.site-header--solid .nav__menu > li > a:hover,
.site-header--solid .nav__menu > li > button:hover { color: var(--sd-color-action); }
/* sticky 복원(body overflow-x 제거)으로 표면화되는 흰 배경 위 흰 로그인 버튼 복원(G1-③) */
.site-header--overlay.is-scrolled .nav__login {
  color: var(--sd-text); border-color: var(--sd-border);
}
.site-header--overlay.is-scrolled .nav__login:hover { background: var(--sd-bg-subtle); }
.site-header--overlay.is-scrolled .theme-toggle,
.site-header--overlay.is-scrolled .nav__toggle,
.site-header--solid .theme-toggle,
.site-header--solid .nav__toggle {
  background: var(--sd-surface); border-color: var(--sd-border); color: var(--sd-text);
}
.site-header--overlay.is-scrolled .btn--ghost,
.site-header--solid .btn--ghost { color: var(--sd-text); }

.nav__menu > li { position: relative; }
.nav__item-btn {
  display: inline-flex; align-items: center; gap: var(--sd-space-1);
  background: transparent; border: 0; padding: var(--sd-space-2) 0;
  font-family: inherit; font-size: var(--sd-text-sm); font-weight: 600;
  color: var(--sd-text); cursor: pointer; min-height: 44px;
}
.nav__item-btn .nav__caret { transition: transform var(--sd-motion-fast) var(--sd-ease); }
.nav__item-btn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  margin-top: var(--sd-space-2); padding: var(--sd-space-2);
  background: var(--sd-surface-raised); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg); box-shadow: var(--sd-shadow-lg);
  display: none; z-index: 110;
}
/* 트리거 ↔ 패널 사이 투명 호버 브리지: 마우스가 시각적 갭을 건너가도
   포인터가 li 하위에 머물러 메뉴가 닫히지 않게 함(데드 갭 제거) */
.nav__dropdown::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(-1 * var(--sd-space-2)); height: var(--sd-space-2);
}
.nav__item--open .nav__dropdown { display: grid; gap: 2px; }
/* CSS 폴백: JS가 없거나 mouseleave가 일찍 닫아도 호버/포커스로 유지(데스크톱) */
@media (hover: hover) and (min-width: 1024px) {
  .nav__item--has-dropdown:hover > .nav__dropdown { display: grid; gap: 2px; }
}
@media (min-width: 1024px) {
  .nav__item--has-dropdown:focus-within > .nav__dropdown { display: grid; gap: 2px; }
}
.nav__dropdown a {
  display: block; padding: var(--sd-space-3) var(--sd-space-4);
  border-radius: var(--sd-radius-md); color: var(--sd-text);
  font-size: var(--sd-text-sm); font-weight: 600; min-height: 44px;
  display: flex; align-items: center;
}
.nav__dropdown a:hover { background: var(--sd-bg-subtle); color: var(--sd-color-action); text-decoration: none; }
.nav__cta { margin-left: var(--sd-space-2); }

/* --- 23.2 모바일 드로어 (오버레이 + 포커스 트랩 지원) --- */
.mobile-menu__backdrop {
  position: fixed; inset: 0; z-index: 119; background: rgba(16,38,96,.45);
  opacity: 0; visibility: hidden; transition: opacity var(--sd-motion-base) var(--sd-ease);
}
.mobile-menu__backdrop.is-open { opacity: 1; visibility: visible; }
.mobile-menu__group { display: grid; gap: 2px; }
.mobile-menu__group + .mobile-menu__group { margin-top: var(--sd-space-2); padding-top: var(--sd-space-2); border-top: 1px solid var(--sd-border-subtle); }
.mobile-menu__group > a:first-child { font-weight: 700; color: var(--sd-text-strong); }
.mobile-menu__sub {
  display: block; padding: var(--sd-space-2) var(--sd-space-3) var(--sd-space-2) var(--sd-space-6);
  color: var(--sd-text-muted); font-size: var(--sd-text-sm); font-weight: 500; border-radius: var(--sd-radius-md);
}
.mobile-menu__sub:hover { background: var(--sd-bg-subtle); color: var(--sd-color-action); text-decoration: none; }
@media (min-width: 1024px) { .mobile-menu__backdrop { display: none; } }

/* --- 23.3 KV 풀스크린 5슬라이더 (§1-3) --- */
.kv {
  position: relative; height: 100dvh; min-height: 560px;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(36,86,200,.45) 0%, transparent 55%),
    linear-gradient(160deg, var(--sd-blue-700) 0%, var(--sd-blue-900) 70%, #0B1A45 100%);
  overflow: hidden; color: #fff;
  --kv-pad-top: 80px;
}
[data-theme="dark"] .kv {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(36,86,200,.4) 0%, transparent 55%),
    linear-gradient(160deg, #18306B 0%, var(--sd-blue-900) 70%, #070F2A 100%);
}
.kv__track { position: relative; height: 100%; }
.kv__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity var(--sd-motion-slow) var(--sd-ease);
  display: flex; align-items: center;
}
.kv__slide.is-active { opacity: 1; visibility: visible; }
.kv__inner {
  width: 100%; max-width: var(--sd-container-max); margin-inline: auto;
  padding: var(--kv-pad-top) var(--sd-space-5) var(--sd-space-16);
  display: grid; gap: var(--sd-space-8); align-items: center;
}
.kv__copy { min-width: 0; }
.kv__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sd-space-2);
  font-size: var(--sd-text-sm); font-weight: 700; color: #BBD0FF; margin-bottom: var(--sd-space-4);
}
.kv__headline {
  font-size: clamp(30px, 6vw, 52px); font-weight: 800; line-height: 1.18;
  letter-spacing: -0.02em; color: #fff; margin-bottom: var(--sd-space-5);
  word-break: keep-all;
}
.kv__lead { font-size: var(--sd-text-body-lg); line-height: 1.7; color: rgba(255,255,255,.88); max-width: 42ch; }
.kv__cta { display: flex; flex-wrap: wrap; gap: var(--sd-space-3); margin-top: var(--sd-space-8); }
.kv__cta .btn--primary { background: #fff; color: var(--sd-blue-700); }
.kv__cta .btn--primary:hover { background: #EAF1FF; }
.kv__cta .btn--accent { background: var(--sd-coral-500); color: #fff; border-color: var(--sd-coral-500); }
.kv__cta .btn--accent:hover { background: var(--sd-coral-600); color: #fff; }
.kv__cta .btn--ghost { color: #fff; border: 1px solid rgba(255,255,255,.4); }
.kv__cta .btn--ghost:hover { background: rgba(255,255,255,.12); }
.kv__fineprint { margin-top: var(--sd-space-5); font-size: var(--sd-text-caption); color: rgba(255,255,255,.74); }
.kv__visual { min-width: 0; display: flex; justify-content: center; }

/* KV 컨트롤(점·화살표) */
.kv__dots {
  position: absolute; left: 0; right: 0; bottom: calc(var(--sd-space-8) + env(safe-area-inset-bottom));
  display: flex; justify-content: center; gap: var(--sd-space-3); z-index: 6;
}
.kv__dot {
  width: 10px; height: 10px; border-radius: var(--sd-radius-full);
  background: rgba(255,255,255,.4); border: 0; padding: 0; cursor: pointer;
  transition: background var(--sd-motion-fast) var(--sd-ease), width var(--sd-motion-fast) var(--sd-ease);
}
.kv__dot::before { content: ""; position: absolute; inset: -12px; } /* 44px 히트영역 */

/* 모바일 히어로(P1, 2026-07): 100dvh 고정 + absolute 슬라이드 조합이 콘텐츠를 위아래로 잘라내던
   문제(토글-폰목업 겹침, fineprint 절단). 모바일에선 활성 슬라이드가 컨테이너 높이를 결정하도록
   display 토글 방식으로 전환(크로스페이드 대신 즉시 전환 — 잘림 0 보장). */
@media (max-width: 1023.98px) {
  .kv { height: auto; min-height: 100dvh; }
  .kv__track { height: auto; }
  .kv__slide { position: relative; inset: auto; display: none; align-items: flex-start; }
  .kv__slide.is-active { display: flex; }
  .kv__dots { position: static; margin: calc(var(--sd-space-4) * -1) auto var(--sd-space-6); }
}
.kv__dot { position: relative; }
.kv__dot.is-active { background: #fff; width: 28px; }
.kv__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 44px; height: 44px; border-radius: var(--sd-radius-full);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.kv__arrow:hover { background: rgba(255,255,255,.26); }
.kv__arrow--prev { left: var(--sd-space-5); }
.kv__arrow--next { right: var(--sd-space-5); }
@media (min-width: 1024px) {
  .kv__inner { grid-template-columns: 1fr 1fr; gap: var(--sd-space-16); }
  .kv__arrow { display: inline-flex; }
}
/* 모바일: 비주얼 상단 · 카피 하단 스택 */
@media (max-width: 1023px) {
  .kv__inner { grid-template-rows: auto auto; }
  .kv__visual { order: 1; transform: scale(.82); transform-origin: top center; margin-bottom: calc(var(--sd-space-8) * -1); }
  .kv__copy { order: 2; text-align: center; }
  .kv__eyebrow, .kv__cta { justify-content: center; }
  .kv__lead { margin-inline: auto; }
  .kv__cta .btn { width: 100%; }
}
@media (max-width: 1023px) { body.has-kv { padding-bottom: 0; } }

/* --- 23.4 KV 우측 CSS/SVG 목업 (외부 이미지 의존 0) --- */
.mk { width: 100%; max-width: 420px; display: grid; gap: var(--sd-space-4); }
/* 스마트폰 프레임 */
.mk-phone {
  width: 248px; margin-inline: auto; padding: 10px; border-radius: 34px;
  background: #0C1530; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.mk-phone__screen {
  background: var(--sd-gray-0); border-radius: 26px; overflow: hidden; color: var(--sd-text);
  display: grid;
}
.mk-phone__notch { height: 22px; background: #0C1530; border-radius: 0 0 14px 14px; width: 90px; margin: 0 auto; }
.mk-phone__body { padding: var(--sd-space-4); display: grid; gap: var(--sd-space-3); }
/* 카톡 말풍선(노란) */
.mk-kakao {
  align-self: start; background: #FEE500; color: #3C1E1E;
  border-radius: 4px 14px 14px 14px; padding: var(--sd-space-3) var(--sd-space-4);
  font-size: var(--sd-text-sm); max-width: 90%; box-shadow: var(--sd-shadow-sm);
}
.mk-kakao--me { justify-self: end; align-self: end; background: var(--sd-blue-600); color: #fff; border-radius: 14px 4px 14px 14px; }
.mk-kakao strong { display: block; font-weight: 700; margin-bottom: 2px; }
/* 차용증 카드 */
.mk-doc {
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-md); overflow: hidden; color: var(--sd-text); width: 100%;
}
.mk-doc__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sd-space-3) var(--sd-space-4); background: var(--sd-blue-50);
  color: var(--sd-blue-700); font-size: var(--sd-text-caption); font-weight: 700;
}
.mk-doc__body { padding: var(--sd-space-4); display: grid; gap: var(--sd-space-2); }
.mk-doc__title { font-weight: 700; color: var(--sd-text-strong); display: flex; gap: var(--sd-space-2); align-items: center; }
.mk-doc__line { height: 8px; border-radius: var(--sd-radius-full); background: var(--sd-gray-100); }
.mk-doc__line--short { width: 58%; }
.mk-doc__line--mid { width: 78%; }
.mk-row { display: flex; justify-content: space-between; font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
.mk-row strong { color: var(--sd-text-strong); font-weight: 700; }
/* 앵커 하이라이트 + 필드 스냅 */
.mk-anchor {
  position: relative; padding: var(--sd-space-2) var(--sd-space-3);
  border-radius: var(--sd-radius-sm); font-size: var(--sd-text-caption);
  background: color-mix(in srgb, var(--sd-blue-500) 16%, transparent);
  border: 1px dashed var(--sd-blue-500); color: var(--sd-blue-700);
}
.mk-anchor + .mk-anchor { margin-top: var(--sd-space-2); }
.mk-anchor__chip {
  display: inline-flex; align-items: center; gap: 4px; float: right;
  font-weight: 700; color: var(--sd-signer-2-text);
}
.mk-anchor--1 { border-color: var(--sd-signer-1); color: var(--sd-signer-1-text);
  background: color-mix(in srgb, var(--sd-signer-1) 14%, transparent); }
.mk-anchor--2 { border-color: var(--sd-signer-2); color: var(--sd-signer-2-text);
  background: color-mix(in srgb, var(--sd-signer-2) 14%, transparent); }
/* 비교 컷: X(좌표 드래그) vs O(자동) */
.mk-vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sd-space-2); }
.mk-vs__cell { padding: var(--sd-space-3); border-radius: var(--sd-radius-md); font-size: var(--sd-text-caption); }
.mk-vs__cell--no { background: var(--sd-red-50); color: var(--sd-red-500); border: 1px solid var(--sd-red-500); }
.mk-vs__cell--yes { background: var(--sd-green-50); color: var(--sd-green-700); border: 1px solid var(--sd-green-500); }
.mk-vs__mark { font-weight: 800; font-size: 16px; }
/* 4컷 알림톡 타임라인(수신자 경험) */
.mk-steps { display: grid; gap: var(--sd-space-2); }
.mk-step {
  display: flex; align-items: center; gap: var(--sd-space-3);
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md);
  padding: var(--sd-space-2) var(--sd-space-3); color: var(--sd-text); font-size: var(--sd-text-caption);
}
.mk-step__no {
  flex: none; width: 22px; height: 22px; border-radius: var(--sd-radius-full);
  background: var(--sd-blue-600); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px;
}
.mk-step--done { border-color: var(--sd-green-500); }
.mk-step--done .mk-step__no { background: var(--sd-green-500); }
/* 3단 타임라인(대화→필드→발송) */
.mk-pipe { display: grid; gap: var(--sd-space-2); }
.mk-pipe__item {
  display: flex; align-items: center; gap: var(--sd-space-3);
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md);
  padding: var(--sd-space-3); color: var(--sd-text); font-size: var(--sd-text-caption);
}
.mk-pipe__dot { flex: none; width: 10px; height: 10px; border-radius: var(--sd-radius-full); background: var(--sd-blue-500); }
.mk-gate {
  margin-top: var(--sd-space-2); font-size: 11px; color: var(--sd-text-muted);
  display: inline-flex; gap: 6px; align-items: center;
}
.mk-gate .mono { color: var(--sd-color-action); }
/* 감사추적 인증서 카드(5요소) */
.mk-cert {
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-md); overflow: hidden; color: var(--sd-text);
}
.mk-cert__head { padding: var(--sd-space-3) var(--sd-space-4); background: var(--sd-bg-subtle); color: var(--sd-text-strong); font-weight: 700; font-size: var(--sd-text-caption); display: flex; gap: var(--sd-space-2); align-items: center; }
.mk-cert__body { padding: var(--sd-space-4); display: grid; gap: 6px; }
.mk-cert__row { display: flex; justify-content: space-between; font-size: 11px; color: var(--sd-text-muted); }
.mk-cert__row strong { color: var(--sd-text-strong); font-weight: 600; }
.mk-cert__hash { font-family: var(--sd-font-mono); font-size: 10px; color: var(--sd-color-action); }
/* 가격 미니차트(990 vs 1,900) */
.mk-chart { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); padding: var(--sd-space-4); color: var(--sd-text); box-shadow: var(--sd-shadow-md); }
.mk-chart__title { font-size: var(--sd-text-caption); color: var(--sd-text-muted); margin-bottom: var(--sd-space-3); }
.mk-bar { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--sd-space-2); align-items: center; font-size: var(--sd-text-caption); margin-bottom: var(--sd-space-2); }
.mk-bar__track { height: 16px; border-radius: var(--sd-radius-full); background: var(--sd-gray-100); overflow: hidden; }
.mk-bar__fill { height: 100%; border-radius: var(--sd-radius-full); }
.mk-bar__fill--us { background: var(--sd-color-accent); width: 52%; }
.mk-bar__fill--them { background: var(--sd-gray-400); width: 100%; }
.mk-bar__val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sd-text-strong); }

/* --- 23.5 3단계 흐름띠 (§1-4) --- */
.flow-strip { display: grid; gap: var(--sd-space-4); align-items: stretch; }
.flow-strip__step {
  position: relative; background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg); padding: var(--sd-space-6); display: grid; gap: var(--sd-space-2);
}
.flow-strip__no {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--sd-radius-full); background: var(--sd-blue-50); color: var(--sd-blue-700);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.flow-strip__step h3 { font-size: var(--sd-text-h3); }
.flow-strip__step p { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.flow-strip__step .quote { color: var(--sd-text-strong); background: var(--sd-bg-subtle); padding: 2px 6px; border-radius: var(--sd-radius-sm); }
.flow-strip__arrow { display: none; }
@media (min-width: 860px) {
  .flow-strip { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- 23.6 기능/혜택 카드 그리드 (재사용) --- */
.benefit-grid { display: grid; gap: var(--sd-space-5); }
.benefit-card {
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-6); display: grid; gap: var(--sd-space-3); align-content: start;
}
.benefit-card__icon {
  width: 44px; height: 44px; border-radius: var(--sd-radius-md); display: grid; place-items: center;
  background: var(--sd-blue-50); color: var(--sd-color-action);
}
.benefit-card h3 { font-size: var(--sd-text-h3); }
.benefit-card p { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.benefit-card__meta { font-size: var(--sd-text-caption); color: var(--sd-text-muted); display: inline-flex; gap: var(--sd-space-2); align-items: center; flex-wrap: wrap; }
@media (min-width: 768px) { .benefit-grid--3 { grid-template-columns: repeat(3, 1fr); } .benefit-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* --- 23.7 제품 데모 밴드 (좌 카피 / 우 목업) --- */
.demo-band { display: grid; gap: var(--sd-space-8); align-items: center; }
.demo-band__visual { min-width: 0; display: flex; justify-content: center; }
.demo-band__visual .mk { max-width: 360px; }
@media (min-width: 900px) { .demo-band { grid-template-columns: 1fr 1fr; } .demo-band--reverse .demo-band__visual { order: -1; } }

/* --- 23.8 신뢰 3축 --- */
.trust-axes { display: grid; gap: var(--sd-space-5); }
.trust-axis {
  background: var(--sd-bg-subtle); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-6); display: grid; gap: var(--sd-space-2);
}
.trust-axis__ico { color: var(--sd-color-trust); }
.trust-axis h3 { font-size: var(--sd-text-h3); }
.trust-axis p { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.trust-axis .cite { font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
@media (min-width: 768px) { .trust-axes { grid-template-columns: repeat(3, 1fr); } }

/* --- 23.9 가격 비교 한 컷(총지불액 미니차트) --- */
.price-compare { display: grid; gap: var(--sd-space-6); align-items: center; }
.price-compare__chart {
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-6); box-shadow: var(--sd-shadow-md);
}
.pc-bar { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sd-space-3); align-items: center; margin-bottom: var(--sd-space-4); }
.pc-bar__label { font-size: var(--sd-text-sm); font-weight: 600; color: var(--sd-text); }
.pc-bar__track { height: 22px; border-radius: var(--sd-radius-full); background: var(--sd-gray-100); overflow: hidden; }
.pc-bar__fill { display: block; height: 100%; min-width: 4px; border-radius: var(--sd-radius-full); transition: width var(--sd-motion-slow) var(--sd-ease); }
/* 모바일: 3열 그리드가 트랙 폭을 좁혀 1:10 가격차가 1:2로 보이던 왜곡 — 세로 스택으로 트랙 풀폭 확보 */
@media (max-width: 600px) {
  .pc-bar { grid-template-columns: 1fr auto; }
  .pc-bar__label { grid-column: 1 / -1; }
}
/* 표 caption 이 모바일 카드화에서 절반 폭 세로 기둥으로 붕괴 — 스크린리더 전용으로 강등(내용은 lede 와 중복) */
.dev-kv-table caption, .tool-table caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pc-bar__fill--us { background: var(--sd-color-accent); }
.pc-bar__fill--them { background: var(--sd-gray-400); }
.pc-bar__val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sd-text-strong); font-size: var(--sd-text-sm); white-space: nowrap; }
.price-compare__note { font-size: var(--sd-text-caption); color: var(--sd-text-muted); margin-top: var(--sd-space-3); }
@media (min-width: 900px) { .price-compare { grid-template-columns: 0.9fr 1.1fr; } }

/* --- 23.10 가격 플랜표(요금 토글) --- */
.plan-toggle { display: inline-flex; gap: 2px; padding: 4px; background: var(--sd-bg-subtle); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-full); margin-bottom: var(--sd-space-6); }
.plan-toggle__btn {
  min-height: 44px; padding: 0 var(--sd-space-5); border: 0; border-radius: var(--sd-radius-full);
  background: transparent; color: var(--sd-text-muted); font-weight: 700; font-size: var(--sd-text-sm); cursor: pointer;
}
.plan-toggle__btn[aria-selected="true"] { background: var(--sd-surface); color: var(--sd-color-action); box-shadow: var(--sd-shadow-sm), inset 0 0 0 1px var(--sd-color-action); }
.plan-panel[hidden] { display: none; }

/* --- 23.11 증거 타임라인 카드(감사추적 5요소) --- */
.evidence-card {
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-6); box-shadow: var(--sd-shadow-md);
}
.evidence-card__head { display: flex; align-items: center; gap: var(--sd-space-2); margin-bottom: var(--sd-space-4); color: var(--sd-text-strong); font-weight: 700; }
.evidence-timeline { display: grid; gap: 0; }
.evidence-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--sd-space-3); position: relative; padding-bottom: var(--sd-space-4); }
.evidence-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--sd-border); }
.evidence-step__dot { width: 28px; height: 28px; border-radius: var(--sd-radius-full); background: var(--sd-green-50); color: var(--sd-green-700); display: grid; place-items: center; z-index: 1; }
.evidence-step__body strong { display: block; color: var(--sd-text-strong); font-size: var(--sd-text-sm); }
.evidence-step__body span { font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
.evidence-step__body .mono { font-size: 11px; color: var(--sd-color-action); }

/* --- 23.12 이원 CTA 밴드(개인/기업) --- */
.cta-band {
  background: linear-gradient(160deg, var(--sd-blue-700) 0%, var(--sd-blue-900) 100%);
  border-radius: var(--sd-radius-xl); padding: var(--sd-space-12) var(--sd-space-8); color: #fff;
}
[data-theme="dark"] .cta-band { background: linear-gradient(160deg, #18306B 0%, var(--sd-blue-900) 100%); border: 1px solid var(--sd-border); }
.cta-band__head { text-align: center; margin-bottom: var(--sd-space-8); }
.cta-band__head h2 { color: #fff; }
.cta-band__head p { color: rgba(255,255,255,.82); margin-top: var(--sd-space-3); font-size: var(--sd-text-body-lg); }
.cta-band__split { display: grid; gap: var(--sd-space-5); }
.cta-band__card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--sd-radius-lg); padding: var(--sd-space-6); display: grid; gap: var(--sd-space-3); align-content: start;
}
.cta-band__card h3 { color: #fff; font-size: var(--sd-text-h3); }
.cta-band__card p { color: rgba(255,255,255,.82); font-size: var(--sd-text-sm); }
.cta-band__card p a { color: #fff; text-decoration: underline; }
.cta-band__card p a:hover { color: var(--sd-blue-100); }
.cta-band__card .btn { margin-top: var(--sd-space-2); }
.cta-band__card .btn--primary { background: #fff; color: var(--sd-blue-700); }
.cta-band__card .btn--primary:hover { background: #EAF1FF; }
/* 카드 한정 해제(2026-07): 밴드 직속 보조 버튼도 남색 배경 위 흰색이어야 함(index 최종 밴드 비가시 P1) */
.cta-band .btn--secondary { color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn--secondary:hover { background: rgba(255,255,255,.12); color: #fff; }
.cta-band__fineprint { text-align: center; margin-top: var(--sd-space-6); font-size: var(--sd-text-caption); color: rgba(255,255,255,.6); }
@media (min-width: 768px) { .cta-band__split { grid-template-columns: 1fr 1fr; } }

/* --- 23.13 FAQ 미리보기(아코디언 재사용, .faq-item) --- */
.faq-preview { max-width: var(--sd-container-reading); margin-inline: auto; }
.faq-preview .faq-item { margin-bottom: var(--sd-space-3); }

/* --- 23.14 고객 증거(초기 익명 지표) --- */
.proof-metrics { display: grid; gap: var(--sd-space-4); }
.proof-metric {
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-6); text-align: center;
}
.proof-metric strong { display: block; font-size: 28px; font-weight: 800; color: var(--sd-color-action); font-variant-numeric: tabular-nums; }
.proof-metric span { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.proof-note { text-align: center; margin-top: var(--sd-space-5); font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
@media (min-width: 600px) { .proof-metrics { grid-template-columns: repeat(3, 1fr); } }

/* --- 23.15 reduced-motion: KV 자동재생 표시 정지 --- */
@media (prefers-reduced-motion: reduce) {
  .kv__slide { transition: none; }
  .pc-bar__fill { transition: none; }
}

/* ── 이메일 가입폼 보존 클래스(레거시 디자인에서 이식, start.html 전용) ── */
.start-auth-block { display: grid; gap: var(--sd-space-2); margin-top: var(--sd-space-2); }
.start-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sd-space-3);
  color: var(--sd-text-muted);
  font-size: var(--sd-text-caption);
  font-weight: 700;
}
.start-divider::before,
.start-divider::after {
  content: "";
  height: 1px;
  background: var(--sd-border-subtle);
}
.start-form__title {
  font-size: var(--sd-text-sm);
  font-weight: 800;
  color: var(--sd-text-strong);
}
.start-form__hint {
  color: var(--sd-text-muted);
  font-weight: 500;
}
.auth-stack--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 좁은 폰에서는 소셜 로그인 버튼을 세로로 — 풀폭 48px 탭 타깃 확보 */
@media (max-width: 520px) { .auth-stack--split { grid-template-columns: 1fr; } }
.start-form__label {
  font-size: var(--sd-text-sm); font-weight: 600; color: var(--sd-text-strong);
}
.start-form__help { font-size: var(--sd-text-caption); color: var(--sd-text-muted); }
.start-form { display: grid; gap: var(--sd-space-3); margin-top: var(--sd-space-2); }
.start-form__input {
  min-height: 48px; padding: 0 var(--sd-space-4);
  border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md);
  background: var(--sd-surface); color: var(--sd-text); font-size: var(--sd-text-body);
}
.start-form__input::placeholder { color: var(--sd-gray-400); }
.start-form__input:focus-visible { outline: none; box-shadow: var(--sd-shadow-focus); border-color: var(--sd-color-action); }
.start-card { display: grid; gap: var(--sd-space-3); align-content: start; min-width: 0; }
.start-card .badge { justify-self: start; }
.start-card > p { font-size: var(--sd-text-sm); color: var(--sd-text-muted); }
.start-card__actions { display: grid; gap: var(--sd-space-2); margin-top: var(--sd-space-2); }
.start-card__actions .btn { min-width: 0; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.start-grid { display: grid; gap: var(--sd-space-5); max-width: 840px; min-width: 0; margin-inline: auto; }
/* 2열은 태블릿 이상에서만 — 모바일은 1열 스택(자르기 방지, §16-C line 765와 일치) */
@media (min-width: 768px) { .start-grid { grid-template-columns: repeat(2, 1fr); } }
.auth-stack {
  display: grid;
  gap: var(--sd-space-2);
}
.auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 0;
  padding-inline: var(--sd-space-3);
  border-radius: var(--sd-radius-md);
  border: 1px solid var(--sd-border);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
.auth-button:hover { text-decoration: none; }
.auth-button--kakao { background: #FEE500; color: #171A21; border-color: #F0D600; }
.auth-button--naver { background: #03C75A; color: #fff; border-color: #03B351; }
.auth-button--email { background: var(--sd-surface); color: var(--sd-text-strong); }

/* ==========================================================================
   24. 모바일 디자인 점검 보정 (iPhone 390px)
   - 강제 2열로 잘리던 카드(start/support/company)는 §16-C에서 해결
   - 여기서는 표 붕괴·코드 잘림·코드토큰 분해·고스트 버튼 톤 보정
   ========================================================================== */

/* (헤더) 투명 오버레이 상태에서는 고스트 버튼 테두리 제거 — KV 위 깔끔하게 */
.site-header--overlay:not(.is-scrolled) .btn--ghost { border-color: transparent; }

/* (표) 한글이 음절 단위로 쪼개지지 않도록 어절(공백) 단위 줄바꿈, 긴 토큰만 강제 분리. */
.compare-table th, .compare-table td,
.audit-table th, .audit-table td,
.opt-table th, .opt-table td,
.privacy-table th, .privacy-table td,
.iv-amount-table th, .iv-amount-table td,
.auto-table th, .auto-table td,
.legal-table th, .legal-table td {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* (코드블록) 모바일에서는 긴 curl/JSON 줄을 숨기지 말고 줄바꿈 — '잘려서 깨진 것처럼' 보이는 문제 해소 */
@media (max-width: 600px) {
  .code-block { padding: var(--sd-space-3); }
  /* pre-wrap 은 JSON 토큰·경로를 중간 분절('발급받\n은')시켰음 — 코드 원형 유지 + 내부 가로 스크롤 */
  .code-block pre { white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* (MCP 8툴 레퍼런스 표) 3열이 화면을 넘어 우측이 잘리던 문제 → 모바일에서 카드형으로 스택 */
@media (max-width: 600px) {
  .tool-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tool-table, .tool-table tbody, .tool-table tr, .tool-table th, .tool-table td { display: block; width: auto; }
  .tool-table tr {
    border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md);
    padding: var(--sd-space-3) var(--sd-space-4); margin-bottom: var(--sd-space-3);
  }
  .tool-table th[scope="row"] { white-space: normal; border: 0; padding: 0 0 var(--sd-space-2); }
  .tool-table td { border: 0; padding: var(--sd-space-1) 0; }
  .tool-table td .mono { overflow-wrap: anywhere; word-break: break-word; }
}

/* (코드 토큰) dry_run·confirmation_token 식별자가 한 글자씩 세로로 쪼개지지 않게 보호. */
.mk-gate { flex-wrap: wrap; }
.mk-gate .mono,
.mcp-info .code-inline,
.hitl-gate .mono,
.mk-pipe .mono { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }

/* 신뢰 4카드(감사추적인증서·휴대폰 본인확인·접근권한·SSL) — 반응형 그리드 */
.trust-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sd-space-4, 16px); margin-top: var(--sd-space-6, 24px); }
.trust-cards .benefit-card__title { margin: 8px 0 4px; }
@media (max-width: 900px) { .trust-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   25. 2026 Apple-style visual refresh
   Cloud Dancer + SignDeal blue/orange + selective Liquid Glass.
   ========================================================================== */
body {
  background: var(--sd-bg);
}

.container {
  max-width: var(--sd-container-max);
  padding-inline: 24px;
}

.section {
  position: relative;
  padding-block: 112px;
}

.section--subtle {
  background: color-mix(in srgb, var(--sd-surface) 68%, transparent);
  border-block: 1px solid var(--sd-border-subtle);
}

.section__head {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: 44px;
  text-align: center;
}

.section__head:not(.section__head--center) {
  text-align: center;
}

h2.h2 {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}

h3.h3 {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--sd-blue-600);
}

.lede {
  max-width: 62ch;
  margin: 16px auto 0;
  line-height: 1.75;
}

.section-cta,
.section-cta--center {
  justify-content: center;
  text-align: center;
}

.pricing-toolbar {
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
}

.price-strip {
  justify-content: center;
}

/* Buttons feel physical, but stay quiet until interaction. */
.btn {
  border-radius: var(--sd-radius-full);
  transition:
    transform var(--sd-motion-fast) var(--sd-ease),
    box-shadow var(--sd-motion-fast) var(--sd-ease),
    background-color var(--sd-motion-fast) var(--sd-ease),
    border-color var(--sd-motion-fast) var(--sd-ease),
    color var(--sd-motion-fast) var(--sd-ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(.98);
}

.btn--primary {
  background: var(--sd-blue-600);
  color: #fff;
  box-shadow: 0 10px 24px rgba(36,86,200,.22);
}

.btn--primary:hover {
  background: var(--sd-blue-700);
  box-shadow: 0 14px 30px rgba(36,86,200,.28);
}

.btn--ghost,
.btn--secondary {
  background: rgba(250,249,246,.58);
  border-color: rgba(23,32,51,.12);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

/* Floating Liquid Glass navigation bezel. */
.site-header,
.site-header--solid,
.site-header--overlay,
.site-header--overlay.is-scrolled {
  padding-block: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header--overlay,
.site-header--overlay.is-scrolled {
  position: fixed;
}

.site-header .container {
  max-width: 1212px;
  padding-inline: 16px;
}

.site-header .nav {
  min-height: 66px;
  padding: 8px 10px 8px 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: var(--sd-radius-full);
  background: rgba(250,249,246,.70);
  box-shadow:
    0 18px 45px rgba(25,63,152,.10),
    inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  transition:
    min-height var(--sd-motion-base) var(--sd-ease),
    background-color var(--sd-motion-base) var(--sd-ease),
    box-shadow var(--sd-motion-base) var(--sd-ease),
    transform var(--sd-motion-base) var(--sd-ease);
}

.site-header--overlay.is-scrolled .nav,
.site-header--solid.is-scrolled .nav {
  min-height: 58px;
  background: rgba(250,249,246,.84);
  box-shadow:
    0 12px 34px rgba(25,63,152,.13),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.brand {
  position: relative;
  z-index: 3;
  gap: 9px;
  color: var(--sd-text-strong);
  min-height: 44px;
  pointer-events: auto;
}

.brand__mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 5px 14px rgba(25,63,152,.18);
}

.brand__word,
.site-header--overlay .brand__word,
.site-header--overlay.is-scrolled .brand__word,
.site-header--solid .brand__word {
  color: var(--sd-text-strong);
  font-size: 19px;
  font-weight: 800;
}

.nav__menu {
  gap: 18px;
  margin-left: auto;
}

/* 개인·기업 모두 동일한 5개 열을 사용한다. 문구 길이가 달라도 모드 전환 시
   메뉴의 시작점·중심선·로그인 버튼 위치가 움직이지 않게 한다. */
@media (min-width: 1161px) {
  .nav__menu {
    display: grid;
    grid-template-columns: 104px 116px 136px 56px 108px;
    column-gap: 8px;
    align-items: center;
  }

  .nav__menu > li {
    min-width: 0;
    justify-self: stretch;
  }

  .nav__menu > li[data-nav-slot="1"] { grid-column: 1; }
  .nav__menu > li[data-nav-slot="2"] { grid-column: 2; }
  .nav__menu > li[data-nav-slot="3"] { grid-column: 3; }
  .nav__menu > li[data-nav-slot="4"] { grid-column: 4; }
  .nav__menu > li[data-nav-slot="5"] { grid-column: 5; }

  .nav__menu > li > a,
  .nav__menu > li > .nav__item-btn {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    white-space: nowrap;
  }

  .nav__menu > li[data-nav-slot="5"] .nav__dropdown {
    right: 0;
    left: auto;
  }
}

.nav__menu > li > a,
.nav__menu > li > button,
.site-header--overlay .nav__menu > li > a,
.site-header--overlay .nav__menu > li > button,
.site-header--overlay.is-scrolled .nav__menu > li > a,
.site-header--overlay.is-scrolled .nav__menu > li > button {
  color: var(--sd-text);
  font-weight: 650;
}

.nav__menu > li > a:hover,
.nav__menu > li > button:hover,
.site-header--overlay .nav__menu > li > a:hover,
.site-header--overlay .nav__menu > li > button:hover {
  color: var(--sd-blue-600);
}

.nav__actions {
  margin-left: 4px;
}

.nav__login,
.site-header--overlay .nav__login,
.site-header--overlay.is-scrolled .nav__login {
  min-height: 48px;
  padding-inline: 20px;
  border: 1px solid var(--sd-blue-600);
  background: var(--sd-blue-600);
  color: #fff;
  box-shadow: 0 8px 20px rgba(36,86,200,.20);
}

.nav__login:hover,
.site-header--overlay .nav__login:hover,
.site-header--overlay.is-scrolled .nav__login:hover {
  border-color: var(--sd-blue-700);
  background: var(--sd-blue-700);
  color: #fff;
}

.audience-switch {
  border-color: rgba(23,32,51,.09);
  background: rgba(255,255,255,.50);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.nav__dropdown {
  padding: 10px;
  border-color: rgba(255,255,255,.72);
  border-radius: 24px;
  background: rgba(250,249,246,.86);
  box-shadow: var(--sd-shadow-lg);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

.nav__dropdown a {
  border-radius: 14px;
}

.nav__toggle,
.site-header--overlay .nav__toggle,
.site-header--overlay.is-scrolled .nav__toggle,
.site-header--solid .nav__toggle {
  border-color: rgba(23,32,51,.10);
  border-radius: var(--sd-radius-full);
  background: rgba(255,255,255,.58);
  color: var(--sd-text-strong);
}

.mobile-menu {
  position: fixed;
  top: 88px;
  right: 12px;
  left: 12px;
  z-index: 120;
  max-height: calc(100dvh - 104px);
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 30px;
  background: rgba(250,249,246,.90);
  box-shadow: var(--sd-shadow-lg);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

.mobile-menu__backdrop {
  background: rgba(23,32,51,.24);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Selected homepage direction: immersive product theater. */
.launch-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 100px 0 16px;
  background: var(--sd-bg);
}

.launch-hero__inner {
  display: grid;
  justify-items: center;
}

.launch-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
  animation: sd-hero-copy-in 900ms var(--sd-ease) both;
}

.launch-hero__app-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 8px;
  border-radius: 19px;
  object-fit: cover;
  box-shadow: 0 14px 30px rgba(36,86,200,.16);
}

.launch-hero__eyebrow {
  margin-bottom: 12px;
  color: var(--sd-blue-600);
  font-size: 15px;
  font-weight: 750;
}

.launch-hero__headline {
  color: var(--sd-text-strong);
  font-size: 60px;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
}

.launch-hero__mobile-break {
  display: none;
}

.launch-hero__lead {
  margin-top: 20px;
  color: var(--sd-text-muted);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.65;
}

.launch-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

.launch-hero__actions .btn {
  min-width: 210px;
}

.launch-hero__watch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  color: var(--sd-text-strong);
  font-weight: 700;
}

.launch-hero__watch:hover {
  color: var(--sd-blue-600);
  text-decoration: none;
}

.launch-hero__play {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(36,86,200,.34);
  border-radius: var(--sd-radius-full);
  background: rgba(250,249,246,.58);
  color: var(--sd-blue-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: transform var(--sd-motion-fast) var(--sd-ease), background-color var(--sd-motion-fast) var(--sd-ease);
}

.launch-hero__watch:hover .launch-hero__play {
  transform: scale(1.06);
  background: #fff;
}

.launch-hero__proof {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 22px;
  color: var(--sd-text-muted);
  font-size: 13px;
  font-weight: 650;
}

.launch-hero__proof span {
  padding-inline: 14px;
}

.launch-hero__proof span + span {
  border-left: 1px solid rgba(23,32,51,.16);
}

.launch-stage {
  --sd-stage-x:0deg;
  --sd-stage-y:0deg;
  --sd-stage-lift:0px;
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  margin: 12px auto 0;
  transform: perspective(1600px) rotateX(var(--sd-stage-y)) rotateY(var(--sd-stage-x)) translateY(var(--sd-stage-lift));
  transform-style: preserve-3d;
  filter: drop-shadow(0 24px 36px rgba(25,63,152,.10));
  animation: sd-stage-in 1100ms 160ms var(--sd-ease) both;
  transition: transform 240ms var(--sd-ease), filter 240ms var(--sd-ease);
}

.launch-stage__label {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  padding: 7px 12px;
  border: 1px solid rgba(36,86,200,.16);
  border-radius: var(--sd-radius-full);
  background: rgba(250,249,246,.78);
  color: var(--sd-blue-700);
  font-size: 12px;
  font-weight: 700;
  transform: translateX(-50%);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.launch-stage picture,
.launch-stage img {
  display: block;
  width: 100%;
  height: auto;
}

.launch-stage:hover {
  filter: drop-shadow(0 32px 44px rgba(25,63,152,.15));
}

/* Homepage contract-type cards. */
.life-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.life-card {
  display: grid;
  align-content: start;
  gap: var(--sd-space-2);
  padding: var(--sd-space-4);
  border: 1px solid var(--sd-border);
  color: inherit;
  text-decoration: none;
}
.life-card:hover { text-decoration: none; }
.life-card:focus-visible { outline: 2px solid var(--sd-color-action); outline-offset: 2px; }
.life-card__title { color: var(--sd-text-strong); font-size: var(--sd-text-h3); font-weight: 700; }
.life-card__desc { color: var(--sd-text-muted); font-size: var(--sd-text-caption); line-height: 1.55; }
.audience-jump { color: var(--sd-color-action); font-weight: 700; text-decoration: underline; }

@media (min-width: 640px) {
  .life-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Enterprise API preview. */
.biz-code {
  overflow-x: auto;
  padding: var(--sd-space-5);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-blue-900);
  color: #E6EDFB;
  font-family: var(--sd-font-mono);
  font-size: var(--sd-text-caption);
  line-height: 1.7;
  -webkit-overflow-scrolling: touch;
}
.biz-code .tok { color: #8FB4FF; }
.biz-code .com { color: #7E93C0; }

@keyframes sd-hero-copy-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sd-stage-in {
  from { opacity: 0; transform: perspective(1600px) translateY(44px) scale(.97); }
  to { opacity: 1; transform: perspective(1600px) translateY(0) scale(1); }
}

/* Site-wide surface language. */
.card,
.step,
.diff-card,
.trust-sub,
.price-card,
.type-card,
.life-card,
.benefit-card,
.proof-metric,
.home-link-card,
.mini-proof,
.flow-strip__step,
.faq-item,
.notice-item,
.scenario-card,
.preview-card,
.flow-visual,
.hero-visual {
  border-color: rgba(23,32,51,.10);
  border-radius: var(--sd-radius-lg);
  background: color-mix(in srgb, var(--sd-surface) 86%, transparent);
  box-shadow: 0 10px 30px rgba(25,63,152,.06);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  transition:
    transform var(--sd-motion-base) var(--sd-ease),
    box-shadow var(--sd-motion-base) var(--sd-ease),
    border-color var(--sd-motion-base) var(--sd-ease);
}

@media (hover: hover) {
  .card:hover,
  .step:hover,
  .diff-card:hover,
  .trust-sub:hover,
  .price-card:hover,
  .type-card:hover,
  .life-card:hover,
  .benefit-card:hover,
  .proof-metric:hover,
  .home-link-card:hover,
  .mini-proof:hover,
  .flow-strip__step:hover,
  .scenario-card:hover {
    transform: translateY(-6px);
    border-color: rgba(36,86,200,.24);
    box-shadow: 0 22px 48px rgba(25,63,152,.12);
  }
}

.hero,
.lp-hero,
.iou-hero,
.how-hero,
.cust-hero,
.dev-hero {
  background: transparent;
}

.lp-hero,
.cust-hero {
  text-align: center;
}

.cta-band,
[aria-label="가격·API 핵심"] {
  background: var(--sd-blue-600) !important;
}

.cta-band .btn--secondary {
  border-color: rgba(255,255,255,.7);
  background: rgba(16,42,103,.34);
  color: #fff;
}

.cta-band .btn--secondary:hover {
  background: rgba(16,42,103,.5);
  color: #fff;
}

.cta-band__fineprint {
  color: rgba(255,255,255,.84);
}

.card--info a,
.proof-note a,
.check-list a,
.footer-legal a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-footer {
  margin-top: 0;
  border-top-color: rgba(23,32,51,.09);
  background: color-mix(in srgb, var(--sd-surface) 64%, transparent);
}

.launch-proof-band {
  padding-block: 54px 68px;
  border: 0;
  background: var(--sd-blue-600);
  color: #fff;
}

.launch-proof-band__head {
  margin-bottom: 34px;
  text-align: center;
}

.launch-proof-band__head h2 {
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
}

.launch-proof-band__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.launch-proof-band__item {
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  transition: transform var(--sd-motion-base) var(--sd-ease), background-color var(--sd-motion-base) var(--sd-ease);
}

.launch-proof-band__item strong {
  color: #fff !important;
}

.launch-proof-band__item span {
  color: rgba(255,255,255,.82) !important;
}

.launch-proof-band__item:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.18) !important;
  text-decoration: none;
}

/* Enterprise home: a distinct, high-density operations product language. */
html[data-audience="business"] {
  color-scheme: dark;
  --sd-bg:#090D13;
  --sd-bg-subtle:#101722;
  --sd-surface:#141C28;
  --sd-surface-raised:#1A2432;
  --sd-border:#2A3545;
  --sd-border-subtle:rgba(255,255,255,.08);
  --sd-text:#CFD6E2;
  --sd-text-strong:#F7F9FC;
  --sd-text-muted:#98A5B7;
  --sd-color-action:#6F98FF;
  --sd-color-action-hover:#8EAEFF;
  --sd-color-accent:#FF7A2F;
  --sd-color-accent-text:#FF965C;
  --sd-color-trust:#AFC5FF;
  --sd-blue-50:#172641;
  --sd-blue-100:#20345A;
  --sd-blue-300:#7A9DEB;
  --sd-blue-500:#4E7CE3;
  --sd-blue-600:#3569D9;
  --sd-blue-700:#2453B8;
  --sd-blue-900:#102653;
  --sd-gray-100:#222C39;
  --sd-gray-300:#465365;
  --sd-shadow-sm:0 4px 14px rgba(0,0,0,.24);
  --sd-shadow-md:0 18px 44px rgba(0,0,0,.28);
  --sd-shadow-lg:0 32px 90px rgba(0,0,0,.42);
}

html[data-audience="business"] body {
  background: var(--sd-bg);
  color: var(--sd-text);
  transition: background-color var(--sd-motion-base) var(--sd-ease), color var(--sd-motion-base) var(--sd-ease);
}

html[data-audience="business"] .site-header .nav,
html[data-audience="business"] .site-header--overlay.is-scrolled .nav,
html[data-audience="business"] .site-header--solid.is-scrolled .nav {
  border-color: rgba(255,255,255,.13);
  background: rgba(11,17,26,.76);
  box-shadow: 0 20px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10);
}

html[data-audience="business"] .brand__word,
html[data-audience="business"] .site-header--overlay .brand__word,
html[data-audience="business"] .site-header--overlay.is-scrolled .brand__word,
html[data-audience="business"] .site-header--solid .brand__word,
html[data-audience="business"] .nav__menu > li > a,
html[data-audience="business"] .nav__menu > li > button,
html[data-audience="business"] .site-header--overlay .nav__menu > li > a,
html[data-audience="business"] .site-header--overlay .nav__menu > li > button,
html[data-audience="business"] .site-header--overlay.is-scrolled .nav__menu > li > a,
html[data-audience="business"] .site-header--overlay.is-scrolled .nav__menu > li > button {
  color: #EEF2F8;
}

html[data-audience="business"] .nav__menu > li > a:hover,
html[data-audience="business"] .nav__menu > li > button:hover {
  color: #8FAEFF;
}

html[data-audience="business"] .audience-switch {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

html[data-audience="business"] .audience-switch__btn {
  color: #AEB8C8;
}

html[data-audience="business"] .audience-switch__btn[data-audience="business"].is-active,
html[data-audience="business"] .audience-switch__btn[data-audience="business"][aria-pressed="true"] {
  background: var(--sd-coral-500);
  color: #fff;
  box-shadow: 0 7px 18px rgba(243,107,33,.28);
}

html[data-audience="business"] .nav__dropdown,
html[data-audience="business"] .mobile-menu {
  border-color: rgba(255,255,255,.13);
  background: rgba(15,22,33,.94);
  box-shadow: var(--sd-shadow-lg);
}

html[data-audience="business"] .nav__dropdown a:hover,
html[data-audience="business"] .mobile-menu__sub:hover {
  background: rgba(111,152,255,.12);
}

html[data-audience="business"] .nav__toggle,
html[data-audience="business"] .site-header--overlay .nav__toggle,
html[data-audience="business"] .site-header--overlay.is-scrolled .nav__toggle,
html[data-audience="business"] .site-header--solid .nav__toggle {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #F7F9FC;
}

/* 기업 하위 페이지에서도 밝은 Liquid Glass 버튼이 튀지 않도록 공용 제어면을
   다크 유리 표면으로 통일한다. 상태 비교 셀은 의미색만 남긴다. */
html[data-audience="business"] .btn--secondary,
html[data-audience="business"] .btn--ghost {
  border-color: rgba(143,174,255,.26);
  background: rgba(255,255,255,.055);
  color: #DDE6F5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-audience="business"] .btn--secondary:hover,
html[data-audience="business"] .btn--ghost:hover {
  border-color: rgba(143,174,255,.44);
  background: rgba(111,152,255,.13);
  color: #FFFFFF;
}

html[data-audience="business"] .btn--accent {
  border-color: rgba(255,122,47,.42);
  background: rgba(255,122,47,.13);
  color: #FFAA79;
}

html[data-audience="business"] .btn--accent:hover {
  border-color: rgba(255,150,92,.62);
  background: rgba(255,122,47,.22);
  color: #FFFFFF;
}

html[data-audience="business"] .mk-vs__cell--no {
  background: rgba(224,59,59,.12);
  color: #FF8A8A;
}

html[data-audience="business"] .mk-vs__cell--yes {
  background: rgba(31,169,113,.13);
  color: #67D0A5;
}

html[data-audience="business"] .how-step__decide {
  border-color: rgba(240,192,58,.24);
  background: rgba(240,192,58,.11);
  color: #F1CA5C;
}

.business-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 104px 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #090D13;
  color: #CFD6E2;
}

.business-hero__inner {
  display: grid;
  justify-items: center;
}

.business-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 850px;
  text-align: center;
  animation: sd-business-copy-in 900ms var(--sd-ease) both;
}

.business-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.business-hero__eyebrow {
  color: #8FAEFF;
  font-size: 13px;
  font-weight: 780;
}

.business-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #DCE4EF;
  font-family: var(--sd-font-mono);
  font-size: 11px;
  font-weight: 700;
}

.business-hero__status > span {
  width: 7px;
  height: 7px;
  border-radius: var(--sd-radius-full);
  background: var(--sd-green-500);
  box-shadow: 0 0 0 5px rgba(31,169,113,.12);
}

.business-hero__headline {
  color: #F7F9FC;
  font-size: 56px;
  font-weight: 850;
  line-height: 1.07;
  letter-spacing: 0;
}

.business-hero__lead {
  max-width: 820px;
  margin: 16px auto 0;
  color: #AAB5C5;
  font-size: 18px;
  line-height: 1.65;
}

.business-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.business-hero__actions .btn {
  min-width: 176px;
}

.business-hero__primary,
.business-price-strip__primary {
  border: 1px solid var(--sd-coral-500);
  background: var(--sd-coral-500);
  color: #fff;
  box-shadow: 0 12px 28px rgba(243,107,33,.24);
}

.business-hero__primary:hover,
.business-price-strip__primary:hover {
  border-color: #FF8747;
  background: #FF8747;
  color: #fff;
  text-decoration: none;
}

.business-hero__secondary,
.business-price-strip__secondary {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  color: #F4F7FB;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.business-hero__secondary:hover,
.business-price-strip__secondary:hover {
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
}

.business-hero__proof {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  color: #8E9AAB;
  font-size: 13px;
  font-weight: 650;
}

.business-hero__proof span {
  padding-inline: 14px;
}

.business-hero__proof span + span {
  border-left: 1px solid rgba(255,255,255,.14);
}

.business-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  height: 424px;
  margin: 28px auto 0;
  filter: drop-shadow(0 34px 70px rgba(0,0,0,.38));
  animation: sd-business-stage-in 1100ms 140ms var(--sd-ease) both;
  transition: transform 260ms var(--sd-ease), filter 260ms var(--sd-ease);
}

.business-stage:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 42px 86px rgba(0,0,0,.48));
}

.business-console {
  position: absolute;
  top: 0;
  left: 50%;
  width: 121.952%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 32px;
  background: #111925;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateX(-50%) scale(.82);
  transform-origin: top center;
}

.business-console__topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #151E2B;
  color: #9FAABB;
  font-size: 11px;
  font-weight: 700;
}

.business-console__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #F7F9FC;
  font-size: 13px;
}

.business-console__brand img {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.business-console__environment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sd-font-mono);
}

.business-console__environment > span {
  width: 7px;
  height: 7px;
  border-radius: var(--sd-radius-full);
  background: var(--sd-green-500);
}

.business-console__preview {
  justify-self: end;
}

.business-console__body {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  min-height: 430px;
}

.business-console__rail {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 24px 16px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: #0D141E;
  color: #7E8999;
  font-size: 12px;
}

.business-console__rail strong {
  margin: 0 10px 13px;
  color: #CED6E2;
  font-family: var(--sd-font-mono);
  font-size: 10px;
}

.business-console__rail span {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 11px;
}

.business-console__rail .is-active {
  background: rgba(78,124,227,.16);
  color: #9AB5F5;
  font-weight: 700;
}

.business-console__main {
  min-width: 0;
  padding: 24px;
}

.business-console__heading,
.business-console__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.business-console__heading > div > span {
  color: #6F98FF;
  font-family: var(--sd-font-mono);
  font-size: 10px;
  font-weight: 700;
}

.business-console__heading h3 {
  margin-top: 3px;
  color: #F7F9FC;
  font-size: 22px;
  font-weight: 750;
}

.business-console__secure {
  color: #5CCB9B;
  font-family: var(--sd-font-mono);
  font-size: 10px;
  font-weight: 700;
}

.business-console__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
  border-block: 1px solid rgba(255,255,255,.08);
}

.business-console__metrics > div {
  display: grid;
  min-width: 0;
  padding: 18px 20px;
}

.business-console__metrics > div + div {
  border-left: 1px solid rgba(255,255,255,.08);
}

.business-console__metrics span,
.business-console__metrics small {
  color: #8692A3;
  font-size: 10px;
}

.business-console__metrics strong {
  margin: 3px 0;
  color: #F7F9FC;
  font-size: 30px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.business-console__workflow {
  padding: 18px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.business-console__panel-head strong {
  color: #E8EDF5;
  font-size: 12px;
}

.business-console__panel-head > span {
  color: #788596;
  font-family: var(--sd-font-mono);
  font-size: 9px;
}

.business-console__workflow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.business-console__workflow li {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  min-width: 0;
}

.business-console__workflow li > span {
  grid-row: 1 / 3;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #394557;
  border-radius: var(--sd-radius-full);
  color: #8490A0;
  font-size: 10px;
  font-weight: 700;
}

.business-console__workflow li strong {
  overflow: hidden;
  color: #BAC3D0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-console__workflow li small {
  color: #667384;
  font-size: 9px;
}

.business-console__workflow li.is-complete > span {
  border-color: rgba(31,169,113,.45);
  background: rgba(31,169,113,.12);
  color: #67D0A5;
}

.business-console__workflow li.is-current > span {
  border-color: rgba(243,107,33,.56);
  background: rgba(243,107,33,.15);
  color: #FF965C;
  box-shadow: 0 0 0 5px rgba(243,107,33,.06);
}

.business-console__workflow li.is-current strong {
  color: #F5F7FA;
}

.business-console__lower {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  padding-top: 18px;
}

.business-console__activity p {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-top: 10px;
}

.business-console__activity p > span {
  width: 7px;
  height: 7px;
  border-radius: var(--sd-radius-full);
}

.business-console__activity .is-blue { background: #6F98FF; }
.business-console__activity .is-orange { background: #FF7A2F; }

.business-console__activity p strong {
  color: #DCE3ED;
  font-size: 10px;
}

.business-console__activity p small {
  color: #727F90;
  font-size: 9px;
}

.business-console__connections > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.business-console__connections > div:last-child span {
  padding: 5px 8px;
  border: 1px solid rgba(111,152,255,.20);
  border-radius: 9px;
  background: rgba(111,152,255,.07);
  color: #9CB6F5;
  font-family: var(--sd-font-mono);
  font-size: 9px;
}

.business-price-strip {
  padding: 76px 0;
  border-block: 1px solid rgba(255,255,255,.10);
  background: #19469F !important;
  color: #fff;
  text-align: center;
}

.business-price-strip__inner {
  max-width: 960px;
}

.business-price-strip__eyebrow {
  margin-bottom: 14px;
  color: #FFBC94;
  font-family: var(--sd-font-mono);
  font-size: 13px;
  font-weight: 750;
}

.business-price-strip h2 {
  color: #fff;
  font-size: 42px;
  font-weight: 820;
  line-height: 1.22;
}

.business-price-strip__lead {
  margin-top: 16px;
  color: rgba(255,255,255,.90);
  font-size: 19px;
  font-weight: 620;
}

.business-price-strip__fineprint {
  max-width: 820px;
  margin: 10px auto 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

.business-price-strip__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

html[data-audience="business"] .launch-proof-band {
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #0E151F;
}

html[data-audience="business"] .launch-proof-band__item {
  border-color: rgba(255,255,255,.10) !important;
  background: #141D29 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-audience="business"] .launch-proof-band__item:hover {
  border-color: rgba(111,152,255,.32) !important;
  background: #182334 !important;
}

html[data-audience="business"] section.section[data-aud="business"] {
  border-top: 1px solid rgba(255,255,255,.06);
  background: #090D13;
}

html[data-audience="business"] section.section--subtle[data-aud="business"] {
  background: #101722;
}

html[data-audience="business"] .benefit-card,
html[data-audience="business"] .biz-role,
html[data-audience="business"] .biz-scenario,
html[data-audience="business"] .flow-strip__step,
html[data-audience="business"] .faq-item,
html[data-audience="business"] .trust-axis,
html[data-audience="business"] .card {
  border-color: rgba(255,255,255,.10);
  background: #141C28;
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}

html[data-audience="business"] .benefit-card__icon,
html[data-audience="business"] .flow-strip__no {
  background: rgba(78,124,227,.15);
  color: #8FAEFF;
}

html[data-audience="business"] .benefit-card:nth-child(3n + 2) .benefit-card__icon {
  background: rgba(243,107,33,.13);
  color: #FF965C;
}

html[data-audience="business"] .benefit-card:nth-child(3n) .benefit-card__icon {
  background: rgba(31,169,113,.13);
  color: #67D0A5;
}

html[data-audience="business"] .biz-role__tag {
  border-color: rgba(111,152,255,.18);
  background: rgba(111,152,255,.09);
  color: #9DB6F1;
}

html[data-audience="business"] .biz-dash {
  border-color: rgba(255,255,255,.10);
  background: #121A26;
  box-shadow: 0 28px 70px rgba(0,0,0,.30);
}

html[data-audience="business"] .biz-dash__bar {
  border-bottom-color: rgba(255,255,255,.08);
  background: #18222F;
}

html[data-audience="business"] .biz-kpi,
html[data-audience="business"] .trust-axis {
  border-color: rgba(255,255,255,.08);
  background: #111925;
}

html[data-audience="business"] .biz-code {
  border: 1px solid rgba(111,152,255,.18);
  background: #070B11;
  box-shadow: 0 22px 54px rgba(0,0,0,.30);
}

html[data-audience="business"] .cta-band {
  border: 1px solid rgba(255,255,255,.11);
  background: #121B28 !important;
  box-shadow: 0 26px 64px rgba(0,0,0,.24);
}

html[data-audience="business"] .cta-band__card {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

html[data-audience="business"] .cta-band__card .btn--primary {
  background: var(--sd-coral-500);
  color: #fff;
}

html[data-audience="business"] .site-footer {
  border-top-color: rgba(255,255,255,.08);
  background: #080C12;
}

@keyframes sd-business-copy-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sd-business-stage-in {
  from { opacity: 0; transform: translateY(38px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* IntersectionObserver adds these classes after content is ready. */
.motion-enabled .sd-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--sd-motion-slow) var(--sd-ease),
    transform var(--sd-motion-slow) var(--sd-ease);
  transition-delay: calc(var(--sd-motion-order, 0) * 70ms);
}

.motion-enabled .sd-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1160px) {
  .nav__menu,
  .nav .nav__audience.audience-switch {
    display: none !important;
  }

  .site-header .nav {
    position: relative;
    gap: 12px;
  }

  .nav__toggle {
    display: inline-flex !important;
    order: -2;
    flex-shrink: 0;
    margin-left: 0;
  }

  .nav__actions {
    display: flex !important;
    margin-left: auto;
  }

  .brand {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 88px; }

  :where(main section[id], main [id]) { scroll-margin-top: 88px; }

  .site-beta-notice__inner { align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; text-align: left; }

  .container {
    padding-inline: 18px;
  }

  .section {
    padding-block: 76px;
  }

  .section__head {
    margin-bottom: 32px;
  }

  h2.h2 {
    font-size: 30px;
  }

  h3.h3 {
    font-size: 20px;
  }

  .lede {
    font-size: 16px;
  }

  .site-header,
  .site-header--solid,
  .site-header--overlay,
  .site-header--overlay.is-scrolled {
    padding-block: 9px;
  }

  .site-header .container {
    padding-inline: 10px;
  }

  .site-header .nav {
    min-height: 60px;
    padding: 7px 8px;
  }

  .brand__mark {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 10px;
  }

  .brand__word,
  .site-header--overlay .brand__word,
  .site-header--overlay.is-scrolled .brand__word,
  .site-header--solid .brand__word {
    font-size: 17px;
  }

  .nav__login,
  .site-header--overlay .nav__login,
  .site-header--overlay.is-scrolled .nav__login {
    min-height: 44px;
    padding-inline: 14px;
  }

  .mobile-menu {
    top: 78px;
    max-height: calc(100dvh - 92px);
  }

  .launch-hero {
    min-height: 0;
    padding: 104px 0 16px;
  }

  .launch-hero__copy {
    max-width: 390px;
  }

  .launch-hero__app-icon {
    display: none;
  }

  .launch-hero__eyebrow {
    margin-bottom: 8px;
    font-size: 13px;
  }

  .launch-hero__headline {
    font-size: 38px;
    line-height: 1.1;
  }

  .launch-hero__mobile-break {
    display: initial;
  }

  .launch-hero__lead {
    max-width: 340px;
    margin: 14px auto 0;
    font-size: 16px;
    line-height: 1.55;
  }

  .launch-hero__actions {
    gap: 14px;
    margin-top: 20px;
  }

  .launch-hero__actions .btn {
    min-width: 174px;
    min-height: 48px;
    padding-inline: 18px;
    font-size: 15px;
  }

  .launch-hero__watch {
    min-height: 48px;
    font-size: 14px;
  }

  .launch-hero__play {
    width: 44px;
    height: 44px;
  }

  .launch-hero__proof {
    display: none;
  }

  .launch-stage {
    width: min(76vw, 280px);
    margin-top: 14px;
    filter: drop-shadow(0 18px 28px rgba(25,63,152,.10));
  }

  .launch-proof-band {
    padding-block: 44px 56px;
  }

  .launch-proof-band__head {
    margin-bottom: 26px;
  }

  .launch-proof-band__head h2 {
    font-size: 28px;
  }

  .launch-proof-band__grid {
    grid-template-columns: 1fr;
  }

  .card,
  .step,
  .diff-card,
  .trust-sub,
  .price-card,
  .type-card,
  .life-card,
  .benefit-card,
  .proof-metric,
  .home-link-card,
  .mini-proof,
  .flow-strip__step,
  .faq-item,
  .notice-item,
  .scenario-card,
  .preview-card,
  .flow-visual,
  .hero-visual {
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .launch-hero__headline {
    font-size: 36px;
  }

  .launch-hero__actions {
    gap: 10px;
  }

  .launch-hero__actions .btn {
    min-width: 164px;
    padding-inline: 14px;
  }

  .launch-hero__watch {
    gap: 7px;
  }

  .launch-stage {
    width: min(76vw, 280px);
  }
}

@media (max-width: 340px) {
  .launch-hero { padding: 86px 0 12px; }
  .launch-hero__headline { font-size: 32px; }
  .launch-hero__lead { margin-top: 10px; font-size: 14px; }
  .launch-hero__actions { flex-wrap: nowrap; gap: 8px; margin-top: 14px; }
  .launch-hero__actions .btn { min-width: 138px; min-height: 44px; padding-inline: 12px; font-size: 14px; }
  .launch-hero__watch { gap: 6px; min-height: 44px; font-size: 13px; }
  .launch-hero__play { width: 40px; height: 40px; }
  .launch-stage { width: min(69vw, 220px); margin-top: 8px; }
}

@media (max-width: 900px) {
  .business-console__body {
    grid-template-columns: 138px minmax(0, 1fr);
  }

  .business-console__rail {
    padding-inline: 12px;
  }

  .business-console__main {
    padding: 20px;
  }

  .business-console__lower {
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .business-hero {
    min-height: 0;
    padding: 94px 0 14px;
  }

  .business-hero__copy {
    max-width: 390px;
  }

  .business-hero__kicker {
    margin-bottom: 12px;
  }

  .business-hero__headline {
    font-size: 42px;
    line-height: 1.08;
  }

  .business-hero__lead {
    max-width: 350px;
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.58;
  }

  .business-hero__actions {
    gap: 9px;
    margin-top: 20px;
  }

  .business-hero__actions .btn {
    min-width: 158px;
    min-height: 48px;
    padding-inline: 16px;
    font-size: 14px;
  }

  .business-hero__proof {
    margin-top: 17px;
    font-size: 11px;
  }

  .business-hero__proof span {
    padding-inline: 8px;
  }

  .business-stage {
    width: 100%;
    height: auto;
    margin-top: 30px;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.36));
  }

  .business-console {
    position: relative;
    left: auto;
    width: 100%;
    border-radius: 24px;
    transform: none;
  }

  .business-console__topbar {
    grid-template-columns: 1fr auto;
    min-height: 44px;
    padding-inline: 14px;
  }

  .business-console__brand {
    font-size: 11px;
  }

  .business-console__brand img {
    width: 25px;
    height: 25px;
    border-radius: 8px;
  }

  .business-console__environment {
    font-size: 9px;
  }

  .business-console__preview,
  .business-console__rail {
    display: none;
  }

  .business-console__body {
    display: block;
    min-height: 0;
  }

  .business-console__main {
    padding: 15px;
  }

  .business-console__heading h3 {
    font-size: 17px;
  }

  .business-console__secure {
    font-size: 8px;
  }

  .business-console__metrics {
    margin-top: 12px;
  }

  .business-console__metrics > div {
    padding: 11px 9px;
  }

  .business-console__metrics strong {
    font-size: 23px;
  }

  .business-console__metrics small {
    display: none;
  }

  .business-console__workflow {
    padding: 13px 0 14px;
  }

  .business-console__workflow ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    margin-top: 12px;
  }

  .business-console__lower {
    display: block;
    padding-top: 10px;
  }

  .business-console__activity {
    display: none;
  }

  .business-console__connections .business-console__panel-head {
    display: none;
  }

  .business-console__connections > div:last-child {
    margin-top: 0;
  }

  .business-price-strip {
    padding: 58px 0;
  }

  .business-price-strip h2 {
    font-size: 30px;
  }

  .business-price-strip__lead {
    font-size: 16px;
  }

  .business-price-strip__actions .btn {
    flex: 1 1 150px;
  }

  html[data-audience="business"] section.section[data-aud="business"] {
    padding-block: 78px;
  }
}

@media (max-width: 420px) {
  .business-hero__headline {
    font-size: 39px;
  }

  .business-hero__actions .btn {
    min-width: 148px;
    padding-inline: 13px;
  }

  .business-hero__proof {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .business-console__secure {
    max-width: 90px;
    text-align: right;
  }
}

@media (max-width: 340px) {
  .business-hero { padding: 84px 0 12px; }
  .business-hero__eyebrow { display: none; }
  .business-hero__kicker { margin-bottom: 10px; }
  .business-hero__headline { font-size: 34px; }
  .business-hero__lead { margin-top: 12px; font-size: 14px; line-height: 1.5; }
  .business-hero__actions { flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
  .business-hero__actions .btn { min-width: 135px; min-height: 44px; padding-inline: 12px; font-size: 13px; }
  .business-stage { margin-top: 18px; }
  .business-console__topbar { min-height: 40px; padding-inline: 12px; }
  .business-console__brand img { width: 22px; height: 22px; }
  .business-console__brand,
  .business-console__environment { font-size: 8px; }
  .business-console__main { padding: 12px; }
  .business-console__heading h3 { font-size: 15px; }
  .business-console__metrics { margin-top: 8px; }
  .business-console__metrics > div { padding: 8px 6px; }
  .business-console__metrics strong { font-size: 20px; }
  .business-console__workflow { padding: 10px 0 8px; border-bottom: 0; }
  .business-console__workflow ol { gap: 8px; margin-top: 8px; }
  .business-console__workflow li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 6px; }
  .business-console__workflow li > span { width: 22px; height: 22px; }
  .business-console__lower { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .launch-hero__copy,
  .launch-stage,
  .business-hero__copy,
  .business-stage,
  .motion-enabled .sd-reveal {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .btn,
  .card,
  .step,
  .diff-card,
  .trust-sub,
  .price-card,
  .type-card,
  .life-card,
  .benefit-card,
  .proof-metric,
  .home-link-card,
  .mini-proof,
  .flow-strip__step,
  .scenario-card,
  .business-stage {
    transition: none;
  }
}