/* ==========================================================
   core/tokens.css — 디자인 토큰
   색 · 반경 · 그림자 · 폰트 · 헤더 높이. 값은 여기서만 정의한다.
   다른 파일에서는 #색상값을 직접 쓰지 말고 var(--토큰)을 쓴다.

   로또해봄·오늘해봄·급식몇등·물가몇등과 같은 ink/line/surface 스케일, 반경,
   그림자, 글꼴, 레이아웃 폭을 공유하고 책몇등 전용 색만 추가했다.

   색의 역할 (섞어 쓰지 않는다)
     · 브랜드    잉크 인디고 — 로고 · 주 버튼 · 선택된 메뉴. 데이터 의미 없음
     · 종이      따뜻한 미색 — 히어로·표지 주변 배경. 책 느낌만 담당
     · 순위 비교 더 인기 ▲ 빨강 / 덜 인기 ▼ 파랑 / 같음 회색
                 (국내 순위 표기 관례. 항상 기호·숫자와 같이 쓴다)
     · 메달      1~3위 순위 숫자 전용 금·은·동
   ========================================================== */

:root {
  /* ---- 브랜드 ---- */
  --brand: #5048E5;
  --brand-2: #6C66F0;
  --brand-deep: #3A32C4;
  --brand-soft: #EEEDFD;
  --brand-line: #D5D3FB;
  --brand-tint: #F6F5FF;

  /* ---- 종이 ---- */
  --paper: #FBF8F2;
  --paper-2: #F5EFE3;
  --paper-line: #EADFCB;

  /* ---- 숫자 · 순위 ---- */
  --navy: #16213E;
  --navy-2: #2B3A63;
  --navy-soft: #EEF1F8;

  /* ---- 순위 비교 ---- */
  --up: #E5484D;   --up-deep: #C22F35;   --up-soft: #FFF0F0;
  --down: #2F6BEA; --down-deep: #1F54C7; --down-soft: #EEF3FF;
  --same: #8A93A6; --same-soft: #F1F3F7;

  /* ---- 메달 ---- */
  --gold: #E9A100;   --gold-soft: #FFF6DC;
  --silver: #8E9AB0; --silver-soft: #F1F4F9;
  --bronze: #CD7240; --bronze-soft: #FDF0E7;

  /* ---- 상태 ---- */
  --ok: #16A36D;   --ok-deep: #0B7A50;   --ok-soft: #E7F7F0;   --ok-line: #BEEBD8;
  --warn: #F08C00; --warn-deep: #A85A04; --warn-soft: #FFF3DF; --warn-line: #FBDCA8;
  --info: #2F7BFF; --info-deep: #1B5FD6; --info-soft: #EDF4FF; --info-line: #CFE0FF;

  /* ---- 텍스트 · 표면 (다크모드 없음: 항상 밝게) ---- */
  --ink: #1D2433;
  --ink-2: #4A5366;
  --ink-3: #667085;
  --ink-4: #98A0B0;
  --line: #E8EBF1;
  --line-2: #F1F3F7;
  --surface: #FFFFFF;
  --surface-2: #F6F8FB;

  /* ---- 반경 · 그림자 ---- */
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(29, 36, 51, .05), 0 2px 8px rgba(29, 36, 51, .05);
  --shadow-2: 0 1px 2px rgba(29, 36, 51, .04), 0 14px 36px -12px rgba(29, 36, 51, .14);
  --shadow-pop: 0 24px 50px -18px rgba(29, 36, 51, .32);
  --shadow-brand: 0 12px 24px -10px rgba(58, 50, 196, .55);
  --shadow-book: 0 1px 1px rgba(29, 36, 51, .08), 0 6px 14px -6px rgba(29, 36, 51, .35);
  --focus-ring: 0 0 0 4px rgba(80, 72, 229, .16);

  /* ---- 글꼴 · 치수 ---- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --hdr-h: 60px;
  --nav-h: 48px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* 모바일은 서브내비 없이 햄버거 메뉴를 쓴다 (components/header.css) */
@media (max-width: 767px) {
  :root { --nav-h: 0px; }
}