/* 1234asdf 공식 사이트 디자인 토큰 — ADR 0086. 색·글꼴·글자 크기·사이트 폭·여백·모서리의 단일 기준이다.
   모든 공개 쪽이 fonts/pretendard/pretendard.css(글꼴) → 이 파일 → site/base.css → site/site.css → site/shell.css → 쪽 종류별
   컴포넌트 CSS 순서로 읽는다. 강조색 파랑(#0647ed)·바탕·글자색·보조색은 앱 토큰(packages/ui-tokens/src/mobile.ts)과 같은 값이라
   앱과 사이트의 인상이 같다. 밝은 모드 하나이고 다크 팔레트는 없다. 다른 CSS는 색·글꼴·크기 숫자를 적지 않고 이 변수를 쓴다. */

:root {
  color-scheme: light;

  /* 바탕과 면 */
  --canvas: #ffffff;
  --surface: #f5f6f9;
  --surface-2: #eceef3;

  /* 글자 */
  --text: #171b24;
  --text-2: #3f4756;
  --muted: #5b6473;

  /* 선 */
  --stroke: #e7edf5;
  --stroke-strong: #c9d2e0;

  /* 강조색 하나 — 파랑 */
  --accent: #0647ed;
  --accent-hover: #0437b8;
  --accent-ink: #ffffff;
  --accent-soft: #f0f4ff;
  --accent-line: #b9c8f5;

  /* 어두운 띠(내려받기 구획·강조 타일) */
  --ink: #171b24;
  --ink-hover: #000000;
  --on-ink: #ffffff;
  --on-ink-muted: #c9d2e0;
  --on-ink-stroke: #3f4756;

  /* 상태 */
  --warning: #862b00;
  --warning-soft: #fff2ec;
  --danger: #921708;
  --danger-soft: #fdf0f0;
  --success: #075445;
  --success-soft: #edfaf6;

  --focus: #0647ed;

  /* 글꼴 — Pretendard(자체 호스팅, OFL). 없으면 기기의 한글 글꼴. */
  --font:
    "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --text-size: 16px;
  --leading: 1.7;
  --small-size: 14px;
  --small-leading: 1.55;
  --tiny-size: 12px;

  /* 제목 — display는 루트 랜딩 첫 화면만 쓴다. */
  --display-size: 56px;
  --display-leading: 1.15;
  --display-tracking: -0.03em;
  --h1-size: 32px;
  --h2-size: 24px;
  --h3-size: 20px;
  --heading-leading: 1.3;
  --heading-tracking: -0.02em;

  /* 모서리 — 조절 요소 12px, 타일·상자 20px, 알약 999px 하나의 체계. */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* 폭과 여백 — 머리글·랜딩 구획·바닥글의 안쪽 줄(frame), 글 틀의 읽기폭(measure) */
  --frame: 1160px;
  --gutter: 32px;
  --measure: 640px;
  --wide-measure: 800px;
  --section-y: 80px;
  --main-top: 48px;
  --main-bottom: 72px;

  /* 손가락 크기 */
  --touch: 44px;
  --control: 48px;

  --shadow-phone: 0 24px 60px rgba(23, 27, 36, 0.1);
  --shadow-card: 0 12px 32px rgba(23, 27, 36, 0.08);
  --shadow-bar: 0 -8px 24px rgba(23, 27, 36, 0.08);

  /* 움직임 곡선 — 등장은 강한 감속(ease-out), 큰 덩어리는 강조 감속(ADR 0135). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-emph: cubic-bezier(0.05, 0.7, 0.1, 1);
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --display-size: 36px;
    --h1-size: 28px;
    --h2-size: 22px;
    --h3-size: 18px;
    --section-y: 56px;
    --main-top: 32px;
    --main-bottom: 56px;
  }
}

@media (max-width: 350px) {
  :root {
    --gutter: 16px;
    --display-size: 32px;
  }
}