/* 라온인더스트리 디자인 토큰 — 색·글꼴·치수의 단일 출처.
 * 페이지·구성요소 CSS는 이 변수만 쓰고 색상 코드를 직접 적지 않는다(SIY-57 "코드 재활용" 지시).
 * 출처: SIY-57 본문(색상 코드), 로고 패키지 README(로고 사용 원칙),
 *       web/docs/ux.md 5·7절(대비 하한), web/docs/ui.md(이 파일의 표와 근거). */
:root {
  /* 색 — SIY-57 본문 지시값 */
  --raon-ink: #0B1A2E;    /* 배경 · 명판 · 본문 제목 */
  --raon-cobalt: #2563C9; /* 링크 · 버튼 · 구분선 */
  --raon-steel: #9FB2CB;  /* 보조 텍스트 · 괘선. 로고 패키지 README의 #7A8AA0이 아니라 본문 지시값으로 확정(SIY-57 결정 4 A안, 2026-09-07 12:05 AM [KST]) */

  /* 색 — 위 셋에서 파생. 새 색을 들여오지 않는다(SIY-59 3단계) */
  --raon-white: #FFFFFF;
  --raon-muted: #55667C;       /* Ink 50% + Steel 50%. 흰 배경 보조 텍스트 5.87:1, 옅은 면 위 5.41:1 (ux.md 7절이 요구한 대안) */
  --raon-surface: var(--raon-white);
  --raon-surface-alt: #F3F6F9; /* 흰색 + Steel 12%. 섹션 교차용 옅은 면 */
  --raon-tint-cobalt: #EEF3FB; /* 흰색 + Cobalt 8%. 절 배지 바탕 */

  /* 색 — 채널값. 반투명 파생(그림자·괘선·띄운 면)에만 쓴다 */
  --raon-ink-rgb: 11 26 46;
  --raon-white-rgb: 255 255 255;

  /* 면과 선 */
  --raon-surface-on-ink: rgb(var(--raon-white-rgb) / .07); /* 진한 면 위에 띄운 면 */
  --raon-surface-sunken: rgb(var(--raon-ink-rgb) / .06);   /* 밝은 면 위 눌린 면(가리킴 상태) */
  --raon-line: var(--raon-steel);                          /* 뜻 없는 괘선·칸 구분선 전용(ux.md 5절) */
  --raon-line-soft: rgb(var(--raon-ink-rgb) / .12);
  --raon-line-on-ink: rgb(var(--raon-white-rgb) / .18);

  /* 글꼴 — 웹폰트를 링크하지 않는다. 한글은 글리프 단위 대체로 아래 스택에서 찾는다 */
  --raon-font-sans: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", "Nanum Gothic", Roboto, sans-serif;

  /* 글자 크기 — 24px(--raon-text-xl)부터 큰 글자, 20px(--raon-text-lg)는 700일 때만 큰 글자 */
  --raon-text-xs: 0.75rem;   /* 12 */
  --raon-text-sm: 0.875rem;  /* 14 */
  --raon-text-base: 1rem;    /* 16 */
  --raon-text-lg: 1.25rem;   /* 20 */
  --raon-text-xl: 1.5rem;    /* 24 */
  --raon-text-2xl: 2rem;     /* 32 */
  --raon-text-3xl: clamp(2.25rem, 5vw, 3.25rem); /* 36~52 히어로 표어 */

  /* 줄 높이 · 굵기 · 자간 */
  --raon-leading-tight: 1.15;
  --raon-leading-snug: 1.4;
  --raon-leading-body: 1.7;
  --raon-weight-regular: 400;
  --raon-weight-medium: 500;
  --raon-weight-bold: 700;
  --raon-tracking-eyebrow: 0.08em;
  --raon-tracking-tight: -0.02em;

  /* 간격 — 4px 배수 */
  --raon-space-1: 0.25rem;
  --raon-space-2: 0.5rem;
  --raon-space-3: 0.75rem;
  --raon-space-4: 1rem;
  --raon-space-5: 1.5rem;
  --raon-space-6: 2rem;
  --raon-space-7: 3rem;
  --raon-space-8: 4rem;
  --raon-space-9: 6rem;

  /* 모서리 — 알약(타원)도 네 모서리가 고르게 둥근 네모도 쓰지 않는다(시윤님 지시, SIY-59 답글 2026-09-07 12:51 PM·01:25 PM [KST]).
     띠·메뉴·버튼·배지·칩·로고 판·카드·약도는 로고 명판처럼 왼쪽 위·오른쪽 아래를 모따기하고 나머지 두 모서리만 둥글린다.
     모따기 변 길이(cut)와 반경(radius)을 border-radius 넉 값(왼쪽 위·오른쪽 위·오른쪽 아래·왼쪽 아래)으로 묶어 둔다 */
  --raon-radius-sm: 8px;
  --raon-radius-md: 14px;
  --raon-cut-sm: 10px;  /* 작은 요소(높이 36~44): 메뉴 항목 · 버튼 · 절 배지 · 칩 · 건너뛰기 링크 */
  --raon-cut-lg: 18px;  /* 큰 요소(높이 86 이상): 헤더 띠 · 푸터 로고 판 · 카드 · 약도 */
  --raon-corner-sm: var(--raon-cut-sm) var(--raon-radius-sm) var(--raon-cut-sm) var(--raon-radius-sm);
  --raon-corner-lg: var(--raon-cut-lg) var(--raon-radius-md) var(--raon-cut-lg) var(--raon-radius-md);
  --raon-corner-shape: bevel round bevel round; /* corner-shape 값. 미지원 브라우저는 네 모서리가 모두 둥글게 남는다 */

  /* 그림자 */
  --raon-shadow-sm: 0 1px 2px rgb(var(--raon-ink-rgb) / .06), 0 2px 6px rgb(var(--raon-ink-rgb) / .06);
  --raon-shadow-md: 0 8px 24px rgb(var(--raon-ink-rgb) / .10);
  --raon-shadow-lg: 0 18px 48px rgb(var(--raon-ink-rgb) / .18);

  /* 판 */
  --raon-container: 1160px;
  --raon-gutter: clamp(0.5rem, 2.5vw, 2rem);
  --raon-section-py: clamp(3rem, 7vw, 6rem);
  --raon-measure: 62ch;

  /* 접근성 하한 — ux.md 4·6·7절 */
  --raon-tap-min: 44px;        /* 터치 대상 최소 변 */
  --raon-focus-width: 2px;
  --raon-focus-offset: 2px;

  /* 로고 — 로고 패키지 README 사용 원칙 */
  --raon-logo-min-width: 120px;   /* 웹 헤더 로고 최소 너비 */
  --raon-logo-guard-ratio: 0.4;   /* 보호 여백 = 로고 높이 × 이 값 */
  --raon-logo-aspect: 356 / 208;  /* raon-logo.svg viewBox 비율 */
  --raon-logo-width: var(--raon-logo-min-width);
  --raon-logo-height: calc(var(--raon-logo-width) * 208 / 356);
  --raon-logo-guard: calc(var(--raon-logo-height) * var(--raon-logo-guard-ratio));
  /* 보호 여백은 로고를 단독으로 놓는 자리(OG 이미지·인쇄물·큰 배치)의 규칙이고 헤더 띠 안에는 적용하지 않는다.
     띠 안에서는 로고 최소 너비 120px만 지키고 상하 여백은 --raon-header-pad-y로 둔다(최상위 판정 2026-09-07). */

  /* 헤더 띠 — 높이는 로고 높이와 띠 여백에서 계산한다. 좁은 폭은 메뉴 줄이 하나 더 붙는다(ux.md 6절 ③) */
  --raon-header-top: var(--raon-space-3);
  --raon-header-pad-y: var(--raon-space-2);
  --raon-header-pad-x: var(--raon-space-5);
  --raon-header-row-gap: var(--raon-space-2);
  --raon-header-h-single: calc(var(--raon-logo-height) + 2 * var(--raon-header-pad-y));
  --raon-header-h-stacked: calc(var(--raon-header-h-single) + var(--raon-header-row-gap) + var(--raon-tap-min));
  --raon-header-h-stacked-2: calc(var(--raon-header-h-stacked) + var(--raon-space-2) + var(--raon-tap-min));
  --raon-header-h: var(--raon-header-h-single);
  --raon-scroll-offset: calc(var(--raon-header-top) + var(--raon-header-h) + var(--raon-space-4));

  /* 움직임 — 시윤님 지시(SIY-59 답글 2026-09-07 01:48 PM [KST])로 현재 항목 칸의 이동과 스크롤 드러나기를 더했다(web/docs/motion.md).
     움직임 줄이기(prefers-reduced-motion: reduce)에서는 넷 모두 쓰이지 않고 즉시 제자리에 보인다 */
  --raon-duration: 200ms;                     /* 가리킴·초점처럼 짧은 상태 변화 */
  --raon-duration-move: 320ms;                /* 헤더의 현재 항목 칸이 항목 사이를 옮겨 가는 시간 */
  --raon-duration-reveal: 560ms;              /* 스크롤로 드러나는 블록이 제자리에 오는 시간 */
  --raon-reveal-shift: var(--raon-space-5);   /* 드러나기 전 아래로 밀려 있는 거리(24) */
  --raon-reveal-stagger: 70ms;                /* 형제 블록 사이의 시차. 여섯째부터는 더 늘지 않는다 */
  --raon-duration-wheel: 160ms;               /* 휠 관성의 시간 상수. 남은 거리가 이 시간마다 63%씩 줄어든다 */
  --raon-ease: cubic-bezier(.2, .6, .2, 1);

  /* 전체 화면 방식 — 한 화면에 섹션 하나(시윤님 결정, SIY-59 답글 2026-09-07 09:49 PM [KST] 결정 1 A안). motion.md 8절 */
  --raon-duration-word: 640ms;      /* 제목 낱말이 번지며 나타나는 시간 */
  --raon-word-stagger: 60ms;        /* 낱말 사이의 시차 */
  --raon-duration-grow: 900ms;      /* 카드가 가는 띠에서 위아래로 펼쳐지는 시간 */
  --raon-duration-screen: 900ms;    /* 휠 한 칸으로 화면 하나를 넘기는 동안 다음 휠을 받지 않는 시간 */
  --raon-duration-brand: 1100ms;    /* 마지막 화면의 큰 상호가 아래에서 솟는 시간 */
  --raon-duration-count: 1200ms;    /* 숫자가 0에서 값까지 세어 올라가는 시간 */
}