/* 바깥에서 받아오는 글꼴은 index.html 의 <link> 로 옮겼다(2026-08-13).
   @import 는 이 파일을 다 읽은 뒤에야 요청을 시작해서 첫 화면이 그만큼 늦어진다.
   <link> 는 나란히 받는다. 글꼴이 안 오면 시스템 글꼴로 떨어질 뿐이라
   Open Props(vendor/)처럼 우리 파일로 가져오지는 않았다. */
:root {
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --score-font: var(--font);
  --score-font-weight: 700;
  --score-letter-spacing: -0.035em;
  --dashboard-score-actual-font: "Bebas Neue", sans-serif;
  --dashboard-score-reference-font: "Outfit", sans-serif;

  /* Site-wide typography roles */
  --type-page-title-size: 22px;
  --type-page-title-line: 1.25;
  --type-page-title-weight: 700;
  --type-section-title-size: 19px;
  --type-section-title-line: 1.3;
  --type-section-title-weight: 700;
  --type-component-title-size: 16px;
  --type-component-title-line: 1.35;
  --type-component-title-weight: 650;
  --type-body-size: 14px;
  --type-body-line: 1.55;
  --type-body-weight: 400;
  --type-label-size: 14px;
  --type-label-line: 1.35;
  --type-label-weight: 600;
  --type-supporting-size: 12px;
  --type-supporting-line: 1.45;
  --type-supporting-weight: 400;
  --type-caption-size: 11px;
  --type-caption-line: 1.35;
  --type-caption-weight: 500;

  /* Detail modal layout roles backed by Open Props sizes. */
  --layout-detail-score-min: var(--size-12, 10rem);
  --layout-detail-score-ratio: 1fr;
  --layout-detail-content-ratio: 3fr;
  --layout-detail-gap: var(--size-5, 1.5rem);

  /* HaruLab semantic roles backed by Open Props */
  --color-brand: var(--green-7, #37b24d);
  --color-brand-hover: var(--green-8, #2f9e44);
  --color-brand-strong: var(--green-9, #2b8a3e);
  --color-brand-soft: var(--green-1, #d3f9d8);
  --color-on-brand: var(--gray-0, #f8f9fa);
  --color-on-brand-soft: #123d20;

  --color-accent: var(--green-8, #2f9e44);
  --color-accent-soft: var(--green-1, #d3f9d8);
  --color-on-accent: var(--gray-0, #f8f9fa);
  --color-on-accent-soft: var(--green-9, #2b8a3e);

  --color-warm: var(--orange-7, #f76707);
  --color-warm-soft: var(--orange-1, #ffe8cc);
  --color-on-warm: var(--gray-0, #f8f9fa);
  --color-on-warm-soft: var(--orange-9, #d9480f);

  --color-danger: var(--red-8, #e03131);
  --color-danger-soft: var(--red-1, #ffe3e3);
  --color-on-danger: #ffffff;
  --color-on-danger-soft: var(--red-9, #c92a2a);

  --color-page: var(--gray-0, #f8f9fa);
  --color-surface: #ffffff;
  --color-surface-subtle: var(--gray-1, #f1f3f5);
  --color-surface-muted: var(--gray-2, #e9ecef);
  --color-surface-strong: var(--gray-3, #dee2e6);
  --color-text: #3f4348;
  --color-text-muted: var(--gray-7, #495057);
  --color-border: var(--gray-5, #adb5bd);
  --color-border-subtle: var(--gray-3, #dee2e6);
  --color-inverse: var(--gray-9, #212529);
  --color-on-inverse: var(--gray-0, #f8f9fa);

  /* 모양·그림자·전환 — Open Props 위의 역할 이름.
     괄호 안 대체값은 Open Props가 못 실려왔을 때만 쓰인다. 실제 값과 같게 맞춰둔다. */
  --radius-xs: var(--radius-1, 2px);
  --radius-sm: var(--radius-2, 5px);
  --radius-lg: var(--radius-3, 1rem);
  --radius-full: var(--radius-round, 1e5px);
  --elevation-1: var(--shadow-1, 0 1px 3px rgba(0, 0, 0, 0.08));
  --elevation-2: var(--shadow-2, 0 4px 10px rgba(0, 0, 0, 0.1));
  --elevation-3: var(--shadow-3, 0 10px 24px rgba(0, 0, 0, 0.12));
  --motion-standard: 180ms var(--ease-3, cubic-bezier(0.25, 0, 0.3, 1));

  /* Shared overlay order: field < tooltip < modal < modal tooltip */
  --layer-field: 1;
  --layer-tooltip: 1000;
  --layer-modal: 2000;
  --layer-modal-tooltip: 3000;

  /* Existing aliases mapped to HaruLab semantic roles */
  --bg: var(--color-page);
  --surface: var(--color-surface);
  --app-chrome: var(--color-surface-subtle);
  --line: var(--color-border-subtle);
  --line-strong: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --faint: var(--color-border);
  --active: var(--color-on-brand-soft);
  --active-bg: var(--color-brand-soft);
  --green: var(--color-brand);
  --benchmark-own: var(--green);
  --benchmark-target: var(--color-warm);
  --control-height: var(--size-8, 48px);
  --control-inner-height: calc(var(--size-8, 48px) - 2px);
  --control-action-size: var(--size-8, 48px);
  --control-border: 1px solid var(--line-strong);
  --icon-size: 18px;
  --icon-size-large: 24px;
  /* 설명(i) 아이콘 전용 크기(2026-08-02). 아이콘 폰트가 width/height: 1em이라 부모 글자
     크기를 따라가는데, 라벨 크기가 화면마다 12~19px로 달라 아이콘도 16~18px로 갈렸다.
     전 페이지에서 한 크기로 고정하려고 별도 토큰으로 뗀다. */
  --icon-size-info: 14px;
  /* 설명 아이콘의 호버·클릭 영역. 아이콘보다 크게 둬서 조준하지 않아도 툴팁이 뜨게 한다. */
  --control-tap-size: 24px;
  --red: var(--color-danger);
  /* 점수 단계 색은 Open Props 팔레트만 쓴다. 주황은 orange-7, 노랑은 주황과 명확히
     구분되도록 기존 yellow-8보다 밝고 노란 yellow-6을 사용한다. */
  --orange: var(--color-warm);
  --yellow: var(--yellow-6, #fab005);
  /* 점수 색을 20점 단위 5단계로 나누면서 추가(2026-08-05, 사용자 결정: 80점 이상은 전부 녹색).
     0~19점은 빨강보다 더 짙게 — 20~39점(빨강)과 한눈에 갈려야 한다. */
  --crimson: var(--red-9, #c92a2a);
  --sidebar: 260px;
  --topbar: 80px;
  --space-1: var(--size-1, 4px);
  --space-2: var(--size-2, 8px);
  --space-3: calc(var(--size-2, 8px) + var(--size-1, 4px));
  --space-4: var(--size-3, 16px);
  --space-5: var(--size-4, 20px);
  --space-6: var(--size-5, 24px);
  --space-8: calc(var(--size-6, 28px) + var(--size-1, 4px));
}