/* ════════════════════════════════════════════════════════════
   공개 마케팅 페이지(정적 HTML) 디자인 토큰 — 2026-10-12
   랜딩(hero_section.html)·기능 페이지(features/*.html)·가격·FAQ 가 <link rel="stylesheet" href="/site-tokens.css"> 로 읽는다.
   값은 제품(src/index.css :root)과 같은 한 벌이다. 정적 페이지는 앱 CSS 를 못 읽어 사본을 둔다.

   🔧 둥글기는 아래 RADIUS:BASE 한 줄이 정한다. 바꿀 땐 손으로 고치지 말고 `npm run radius -- <px>`
      (제품 index.css·위젯 widget.js·이 파일을 같이 고친다. radius:check 가 셋이 같은지 build 전에 확인한다).
      컴포넌트 CSS 에 숫자 radius 금지 — var(--radius-xs|sm|md|lg) 만. 원형(아바타·점·토글)만 50%.
   ════════════════════════════════════════════════════════════ */
:root {
  /* 둥글기 — xs 진행바·인라인 코드 / sm 버튼·입력·칩·메뉴 항목 / md 카드·패널·드롭다운 / lg 큰 미디어·스크린샷 틀·모달 */
  --radius-base: 4px; /* RADIUS:BASE */
  --radius-xs: calc(var(--radius-base) * 0.5);
  --radius-sm: var(--radius-base);
  --radius-md: calc(var(--radius-base) * 1.5);
  --radius-lg: calc(var(--radius-base) * 2);
  --radius-full: 9999px;

  /* 색 — 무채색 한 벌 + 남색 브랜드(주 CTA·링크·활성 표시에만, 넓은 면적 금지) */
  --brand: #16265C;
  --brand-hover: #101C46;
  --brand-light: #EEF2FA;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-secondary: #F5F5F5; /* 보조 버튼·칩·검색창 면 */
  --surface-hover: #F9F9F9;
  --border: #EBEBEB;            /* 카드 헤어라인 */
  --border-subtle: #F0F0F0;     /* 구분선 */
  --border-medium: #E0E0E0;     /* 입력 테두리 */
  --text: #14161A;
  --text-secondary: #6C6F74;
  --text-tertiary: #8C8F94;     /* 플레이스홀더·비활성 전용 */
  --heading: #0A0A0A;           /* 큰 제목 — 랜딩 히어로 h1 실측값(2026-09-27 사용자 지정) */

  /* 글꼴 — 본문·UI 는 Pretendard 한 벌. 큰 제목만 히어로 규칙(Inter + Pretendard, 400, -1px) */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Inter', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* 떠 있는 층(드롭다운·팝오버·토스트·모달)에만 쓰는 그림자 — 첫 겹이 1px 헤어라인 역할(border 대신), 페이지 안 카드는 헤어라인 하나 */
  --shadow-float: 0 0 0 1px rgba(17, 17, 26, 0.06), 0 4px 16px rgba(17, 17, 26, 0.10);

  /* 연한 톤 패널 — 기능 페이지 카드 이미지 매트. 채도 낮은 세 가지를 번갈아 쓴다(예전 그라데이션의 가운데 색, 단색) */
  --tone-lav: #F0EFF7;
  --tone-mist: #ECEFF5;
  --tone-sand: #F1EEE8;

  /* 푸터(어두운 띠, 모든 마케팅 페이지 공통) */
  --footer-bg: #0A0A0E;
  --footer-line: #2A2A33;
  --footer-text: #A3A3AF;
  --footer-strong: #ECECF1;

  /* 모션 — 150~200ms ease-out, 오버슈트·무한 반복 없음 */
  --ease: cubic-bezier(0.2, 0, 0, 1);
}