/*
  Blanket v4 디자인 토큰 (base → semantic). 화면 CSS는 semantic 토큰만 쓴다.

  무드 판정: 첫 화면 주인공은 '큰 3D 아이폰 속 진짜 통화'(캐릭터 실사 사진 + 자막)다. 사진은 폰 안에만 있고 페이지는 글이 많아 Light.
  방향: v2의 담백한 회사 소개 틀(당근·Zulip·GOV.UK 원리) 위에, 제품이 하는 일을 폰 안에서 보여 준다(research/3d-directions-1006 A+C).
  움직이는 그림(첫 화면 통화, 정보 그림 6개)은 HyperFrames 컴포지션이다. 원본은 hf/, 사이트용은 v4/hf/(qa/v4-hf-build.mjs).
  글꼴 두 목소리: 회사가 말할 때는 IBM Plex Sans KR, AI 캐릭터가 말할 때는 Gowun Dodum. 둘 다 SIL OFL, 우리 서버에서 준다.
  액센트는 형광펜 노랑 하나. '기억'을 표시할 때만 쓴다.
*/
:root {
  color-scheme: light;

  /* base: 색 */
  --paper-0: #FFFFFF;
  --paper-50: #F4F6F8;
  --paper-100: #EAEEF2;
  --line-200: #DCE1E7;
  --ink-900: #1A2029;
  --ink-700: #3A4350;
  --ink-500: #5D6774;
  --marker-300: #FFE15A;

  /* semantic: 면 */
  --bg-page: var(--paper-0);
  --bg-sheet: var(--paper-50);
  --bg-sunken: var(--paper-100);
  --line: var(--line-200);
  --line-strong: var(--ink-900);

  /* semantic: 글 */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-meta: var(--ink-500);
  --text-on-ink: var(--paper-0);

  /* semantic: 강조 */
  --memory-mark: var(--marker-300);
  --focus-ring: var(--ink-900);

  /* semantic: 버튼(무채색 캡슐) */
  --cta-bg: var(--ink-900);
  --cta-bg-hover: var(--ink-700);
  --cta-text: var(--paper-0);

  /* 글꼴 */
  --font-company: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-voice: "Gowun Dodum", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* 타이포 스케일: 크기와 행간은 짝으로만 쓴다 */
  --t-meta-size: 0.8125rem;   --t-meta-lh: 1.55;
  --t-small-size: 0.9375rem;  --t-small-lh: 1.6;
  --t-body-size: 1.0625rem;   --t-body-lh: 1.75;
  --t-lead-size: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);  --t-lead-lh: 1.65;
  --t-h3-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);     --t-h3-lh: 1.4;
  --t-h2-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);         --t-h2-lh: 1.22;
  --t-brand-size: clamp(4rem, 2.4rem + 7vw, 8.5rem);            --t-brand-lh: 0.92;
  --t-tagline-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);     --t-tagline-lh: 1.25;
  --t-name-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);       --t-name-lh: 1.1;
  --t-step-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);            --t-step-lh: 1;
  --track-brand: -0.045em;
  --track-display: -0.025em;
  --track-heading: -0.015em;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 간격 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* 레이아웃 */
  --page-max: 75rem;
  --measure: 36rem;
  --gutter: clamp(1rem, -0.2rem + 4vw, 2.5rem);
  --section-gap: clamp(4.5rem, 2.5rem + 7vw, 9rem);

  /* 모서리: 캡슐 / 액션 / 카드 / 시트 */
  --r-pill: 999px;
  --r-action: 18px;
  --r-card: 20px;
  --r-sheet: 28px;

  /* 터치 */
  --touch-min: 44px;
  --cta-height: 54px;

  /* 모션: 짧은 전환만(긴 움직임은 HyperFrames 컴포지션이 맡는다) */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
}