/* =========================================================
   Metropy 디자인 토큰 (2026-10-29 P1, P5 에서 variables.css 를 합쳤다)
   색 hex 는 이 파일에만 둔다. 다른 CSS 는 var() 로만 색을 쓴다.

   세 층으로 나눈다.
   1. 원시값: 테마와 상관없는 팔레트·타입·간격·반지름·그림자·모션·z-index.
   2. 의미값: 화면이 실제로 쓰는 이름. 라이트가 기본(:root), 다크는 [data-theme="dark"].
   3. 옛 이름 별칭(--bg, --accent 등): 맨 아래. 의미값을 가리키기만 한다. 새 코드는 2 를 쓴다.

   색 방침(사용자 결정 D1, 2026-10-29)
   - 브랜드 파랑은 지금 값 그대로. 라이트 강조 2457d6, 채움 버튼 1b45ad.
   - 포인트는 로고 AA 의 주황. 1순위 칸·핵심 강조에만 쓰고 글자색으로는 안 쓴다.
   - 제목용 진한 남색은 로고 워드마크 색.
   - 노선색은 배지·칩 같은 정체성 요소에만. --c-line1~9 는 공식 노선색(기록용).
   - 화면에 칠하는 --line5·6·9 는 선명한 값(--c-lineN-vivid)이다(2026-10-31, 아래 주석).
   ========================================================= */

/* ───── 1. 원시값 ───── */
:root {
  /* 기본색 */
  --c-white: #ffffff;
  --c-black: #000000;

  /* 브랜드 파랑 */
  --c-blue-50: #eef2ff;     /* 로고 아이콘 배경 */
  --c-blue-300: #5b87f5;    /* 다크 배경에서 읽히는 강조 */
  --c-blue-500: #2457d6;    /* 라이트 강조. 흰 바탕 6.4:1 */
  --c-blue-600: #1b45ad;    /* 라이트 채움 버튼. 흰 글자 7.4:1 */
  --c-blue-650: #1a42a6;    /* 라이트 채움 hover */
  --c-blue-550: #2253cc;    /* 다크 채움(2457d6) hover */
  --c-navy-900: #0b1a44;    /* 로고 워드마크·제목 */

  /* 포인트 주황(로고 AA) */
  --c-orange-500: #ff6a00;
  --c-orange-600: #e05d00;
  --c-orange-rgb: 255,106,0;

  /* 라이트 중립. 바탕은 토스·곧 내려요처럼 회백(2026-10-30 ui_subway_spec D1) */
  --c-gray-l-bg: #f2f4f6;
  --c-gray-l-field: #f4f6f8;      /* 역 박스·근거 줄·도식 바탕 */
  --c-gray-l-hairline: #e5e8eb;   /* 칩 테두리·카드 안 구분선 */
  --c-gray-l-link: #6b7684;       /* "원리가 뭐예요?" 흰·회백 바탕 4.6:1 */
  --c-gray-l-off: #eceef1;        /* 준비 중 노선 원 바탕 */
  --c-gray-l-off-ink: #b0b8c1;    /* 준비 중 노선 숫자(장식, aria-label 이 이름을 맡는다) */
  --c-gray-l-bg2: #eef1f6;
  --c-gray-l-surface2: #f0f2f5;
  --c-gray-l-surface3: #e8eaef;
  --c-gray-l-border: #d1d5dc;
  --c-gray-l-text: #1a1d26;
  --c-gray-l-dim: #5a6070;
  --c-gray-l-muted: #6b7280;

  /* 다크 중립 */
  --c-gray-d-bg: #0a0c14;
  --c-gray-d-bg2: #0f1220;
  --c-gray-d-surface: #151929;
  --c-gray-d-surface2: #1c2137;
  --c-gray-d-surface3: #232845;
  --c-gray-d-border: #2a3050;
  --c-gray-d-text: #e8eaf0;
  --c-gray-d-dim: #8f95b0;     /* surface2 위 5.3:1 */
  --c-gray-d-muted: #8288a4;   /* surface 4.99:1, surface2 4.54:1 */

  /* 상태색 */
  --c-green-300: #34d399;
  --c-green-500: #22c088;
  --c-green-800: #0f6b4a;
  --c-red-300: #f87171;
  --c-red-500: #e55555;
  --c-red-700: #c62828;     /* 흰 바탕 글자 5.6:1. 일요일 칩 글자 */
  --c-yellow-300: #fbbf24;
  --c-yellow-500: #e5a500;

  /* 인쇄용 회색 */
  --c-print-border: #cccccc;
  --c-print-muted: #666666;

  /* 서울 지하철 공식 노선색 */
  --c-line1: #0052a4;
  --c-line2: #00a84d;
  --c-line3: #ef7c1c;
  --c-line4: #00a5de;
  --c-line5: #996cac;
  --c-line6: #cd7c2f;
  --c-line7: #747f00;
  --c-line8: #e6186c;
  --c-line9: #bdb092;
  /* 화면용 선명한 값(2026-10-31 사용자 "5호선 6호선 색이 물빠진 느낌").
     공식 5·6·9호선 색은 채도가 낮아 원·배지에서 회색기가 돈다. 네이버 지도 지하철 노선도
     (map.naver.com/p/subway, 2026-10-31 화면 픽셀 측정)의 노선 원 색을 쓴다.
     1~4·7·8호선은 공식색과 네이버 값의 채도 차이가 작아 공식색 그대로 둔다.
     흰 숫자 대비: 5호선 5.7:1, 6호선 5.1:1(공식 4.1, 3.2). 9호선은 진한 글자 5.5:1. */
  --c-line5-vivid: #8936e0;
  --c-line6-vivid: #b5500b;
  --c-line9-vivid: #d1a62c;
  /* 흰 바탕 위 글자·테두리용으로 어둡힌 값. 2호선 5.8:1, 4호선 5.6:1 */
  --c-line2-ink-light: #00753a;
  --c-line4-ink-light: #036f9a;
  /* 1·3·5~8호선 칩 글자. 12% 노선색 바탕 위 5:1 이상(2026-10-30 계산). 1호선은 원색이 이미 6.3:1 */
  --c-line1-ink-light: #0052a4;
  --c-line3-ink-light: #a04f0b;
  --c-line5-ink-light: #842ddf;   /* 선명한 5호선 기준. 12% 바탕 5.1:1 */
  --c-line6-ink-light: #a2480a;   /* 선명한 6호선 기준. 12% 바탕 5.1:1 */
  --c-line7-ink-light: #616b00;
  --c-line8-ink-light: #bd1459;
  /* 다크 바탕 칩 글자. 원색이 5:1 에 못 미치는 노선만 밝혔다(3호선은 원색 그대로) */
  --c-line1-ink-dark: #2290ff;
  --c-line5-ink-dark: #b37deb;    /* surface 5.9:1 */
  --c-line6-ink-dark: #d97b3f;    /* surface 5.7:1 */
  --c-line7-ink-dark: #909e00;
  --c-line8-ink-dark: #ee5d98;
  /* 9호선 원 안 숫자. 흰 글자는 2.3:1 이라 진한 갈색(선명한 #d1a62c 위 5.5:1) */
  --c-line9-ink-on: #3a3320;
  --c-line9-ink-light: #6b6243;   /* 흰 바탕 6.1:1. '준비 중' 배지 글자·섹션 머리 */
  --c-line9-soft: #f3efe2;        /* '준비 중' 배지 바탕 */
  --c-line9-ink-dark: #c9bd9e;

  /* 결과 '추천' 배지(포인트 주황의 연한 판). 글자 #c04f00 은 #fff1e6 위 4.9:1 */
  --c-orange-50: #fff1e6;
  --c-orange-800: #c04f00;
  --c-orange-300: #ffa463;        /* 다크 배지 글자 */

  /* 칸 점수 4단계(CarDiagram, 2026-10-29 P2). 브랜드 파랑의 진하기만 쓴다.
     값은 car-viz.js 의 hsl 4단계를 hex 로 옮긴 것이다. 경계 93/85/70 은 ui.js 에 있다. */
  --c-score-1: #2951ae;   /* 93 이상. 흰 글자 7.0:1 */
  --c-score-2: #4565b0;   /* 85 이상. 흰 글자 5.6:1 */
  --c-score-3: #a0abc5;   /* 70 이상. 진한 글자 */
  --c-score-4: #c0c4ce;   /* 그 아래. 진한 글자 */
  /* 다크 테마 칸 점수. 어두운 바탕에서 밝은 회색 덩어리로 뜨지 않게 같은 파랑을 어둡게 낮췄다.
     글자는 전부 밝은 본문색(1 은 흰색 6.2:1, 나머지 6:1 이상). */
  --c-score-d-1: #2457d6;
  --c-score-d-2: #3a539c;
  --c-score-d-3: #333d68;
  --c-score-d-4: #2a3050;

  /* 타입. Pretendard 하나.
     2026-10-30 지하철 앱형 사양(ui_subway_spec 2-1): 12/13/14/15/17/22/28 + 히어로 24.
     본문 기본 15, 역명·CTA 17, 결과 점수 22, 'N호차' 28. 16·20·40 은 옛 규칙용으로 남긴다(새 코드에서 쓰지 않음). */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-15: .9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-40: 2.5rem;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;   /* 숫자·히어로 전용 */

  /* 간격 4pt */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* 반지름. 새 컴포넌트는 카드 16 / 버튼 12 / 알약.
     지금 화면은 별칭 --radius(10)·--radius-sm(8) 을 그대로 쓴다. P2 에서 컴포넌트를 새로 짤 때 옮긴다. */
  --r-card: 16px;
  --r-button: 12px;
  --r-pill: 999px;
  --r-legacy-card: 10px;
  --r-legacy-control: 8px;
  --r-field: 12px;   /* 역 박스·근거 줄·도식 */
  --r-cta: 14px;     /* 홈 '내 칸 추천받기' */

  /* 모션 2단 */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease: ease;

  /* z-index. 지금 쓰는 값에 이름만 붙였다 */
  --z-raised: 5;
  --z-sticky: 50;
  --z-nav: 100;
  --z-banner: 200;
  --z-dropdown: 1000;
  --z-overlay: 9999;
  --z-toast: 10000;

  /* 레이아웃 */
  --max-w: 1080px;
  /* 상단 바 52px(곧 내려요·카카오맵 48~56). 예전 60px + 하단선이 웹페이지처럼 보였다(spec D2). */
  --nav-h: 52px;
}

/* ───── 2. 의미값: 라이트(기본) ───── */
:root,
[data-theme="light"] {
  --color-bg: var(--c-gray-l-bg);
  --color-bg-sunken: var(--c-gray-l-bg2);
  --color-surface: var(--c-white);
  --color-surface-2: var(--c-gray-l-surface2);
  --color-surface-3: var(--c-gray-l-surface3);
  --color-border: var(--c-gray-l-border);
  --color-field: var(--c-gray-l-field);
  --color-hairline: var(--c-gray-l-hairline);
  --color-link-quiet: var(--c-gray-l-link);
  --color-off: var(--c-gray-l-off);
  --color-off-ink: var(--c-gray-l-off-ink);
  --color-rec-soft: var(--c-orange-50);
  --color-rec-ink: var(--c-orange-800);
  /* 카드 그림자·테두리 없음(토스). 다크만 1px 경계(아래 다크 블록). */
  --card-edge: none;

  --color-text: var(--c-gray-l-text);
  --color-text-dim: var(--c-gray-l-dim);
  --color-text-muted: var(--c-gray-l-muted);
  --color-title: var(--c-navy-900);
  /* 채움 버튼·배지 위 글자. 두 테마 모두 흰색 */
  --color-on-fill: var(--c-white);

  --color-accent: var(--c-blue-500);
  --color-accent-fill: var(--c-blue-600);
  --color-accent-fill-pressed: var(--c-blue-500);   /* 흰 글자 6.4:1 */
  /* 마우스 hover. 토스처럼 아주 조금만 어둡게(채움 1b45ad 에서 약 4%). 그림자는 바꾸지 않는다. */
  --color-accent-fill-hover: var(--c-blue-650);
  --color-accent-soft: rgba(36,87,214,.10);
  /* 연한 강조 면(accent-soft) 위 글자. 선택된 칩 등 */
  --color-accent-on-soft: var(--c-blue-500);
  --accent-rgb: 36,87,214;

  --color-point: var(--c-orange-500);
  --color-point-strong: var(--c-orange-600);
  --color-point-soft: rgba(var(--c-orange-rgb),.10);
  --point-rgb: var(--c-orange-rgb);
  --color-point-ink: var(--c-gray-l-text);

  --color-success: var(--c-green-500);
  --color-success-soft: rgba(34,192,136,.15);
  --color-success-ink: var(--c-green-800);
  --color-danger: var(--c-red-500);
  --color-danger-soft: rgba(229,85,85,.15);
  --color-warning: var(--c-yellow-500);
  /* 일요일 칩 글자. 의미색(danger)은 글자에 안 쓰므로 글자용을 따로 둔다 */
  --color-sunday-ink: var(--c-red-700);

  --line1: var(--c-line1);
  --line2: var(--c-line2);
  --line3: var(--c-line3);
  --line4: var(--c-line4);
  --line5: var(--c-line5-vivid);
  --line6: var(--c-line6-vivid);
  --line7: var(--c-line7);
  --line8: var(--c-line8);
  --line9: var(--c-line9-vivid);
  --line2-rgb: 0,168,77;
  --line4-rgb: 0,165,222;
  --line2-ink: var(--c-line2-ink-light);
  --line4-ink: var(--c-line4-ink-light);
  --line1-rgb: 0,82,164;
  --line3-rgb: 239,124,28;
  --line5-rgb: 137,54,224;
  --line6-rgb: 181,80,11;
  --line7-rgb: 116,127,0;
  --line8-rgb: 230,24,108;
  --line1-ink: var(--c-line1-ink-light);
  --line3-ink: var(--c-line3-ink-light);
  --line5-ink: var(--c-line5-ink-light);
  --line6-ink: var(--c-line6-ink-light);
  --line7-ink: var(--c-line7-ink-light);
  --line8-ink: var(--c-line8-ink-light);
  --line9-ink: var(--c-line9-ink-light);
  --line9-ink-on: var(--c-line9-ink-on);
  --line9-soft: var(--c-line9-soft);

  /* 칸 점수 채움과 그 위 글자. 다크는 아래 다크 블록에서 어두운 파랑으로 바꾼다 */
  --color-score-1: var(--c-score-1);
  --color-score-2: var(--c-score-2);
  --color-score-3: var(--c-score-3);
  --color-score-4: var(--c-score-4);
  --color-score-ink-dark: var(--c-gray-l-text);
  --color-score-ink-light: var(--c-white);

  /* 반투명 면 */
  --color-nav-bg: rgba(242,244,246,.92);
  --color-loading-bg: rgba(242,244,246,.95);
  --color-scrim: rgba(0,0,0,.5);

  /* 그림자. 시트(모달)·토스트(드롭다운) 2단 + 카드 경계용 1px */
  --shadow-line: 0 1px 2px rgba(0,0,0,.06);
  --shadow-toast: 0 4px 16px rgba(0,0,0,.12);
  --shadow-sheet: 0 8px 24px rgba(0,0,0,.12);
}

/* ───── 2. 의미값: 다크 ───── */
[data-theme="dark"] {
  --color-bg: var(--c-gray-d-bg);
  --color-bg-sunken: var(--c-gray-d-bg2);
  --color-surface: var(--c-gray-d-surface);
  --color-surface-2: var(--c-gray-d-surface2);
  --color-surface-3: var(--c-gray-d-surface3);
  --color-border: var(--c-gray-d-border);
  --color-field: var(--c-gray-d-surface2);
  --color-hairline: var(--c-gray-d-border);
  --color-link-quiet: var(--c-gray-d-dim);
  --color-off: var(--c-gray-d-surface2);
  --color-off-ink: var(--c-gray-d-muted);
  --color-rec-soft: rgba(var(--c-orange-rgb),.16);
  --color-rec-ink: var(--c-orange-300);
  --card-edge: 0 0 0 1px var(--c-gray-d-border);

  --color-text: var(--c-gray-d-text);
  --color-text-dim: var(--c-gray-d-dim);
  --color-text-muted: var(--c-gray-d-muted);
  --color-title: var(--c-gray-d-text);
  --color-on-fill: var(--c-white);

  /* 다크에서 2457d6 위 흰 글자는 6.16:1, 5b87f5 위는 3.37:1 이라 채움은 진한 쪽 */
  --color-accent: var(--c-blue-300);
  --color-accent-fill: var(--c-blue-500);
  --color-accent-fill-pressed: var(--c-blue-600);   /* 다크에서 눌림은 더 어둡게. 흰 글자 7.4:1 */
  --color-accent-fill-hover: var(--c-blue-550);
  --color-accent-soft: rgba(91,135,245,.14);
  /* 5b87f5 는 연한 면 위에서 3.9:1 이라 글자는 본문색 */
  --color-accent-on-soft: var(--c-gray-d-text);
  --accent-rgb: 91,135,245;

  --color-point: var(--c-orange-500);
  --color-point-strong: var(--c-orange-600);
  --color-point-soft: rgba(var(--c-orange-rgb),.14);
  --point-rgb: var(--c-orange-rgb);
  --color-point-ink: var(--c-gray-l-text);

  --color-success: var(--c-green-300);
  --color-success-soft: rgba(52,211,153,.12);
  --color-success-ink: var(--c-green-300);
  --color-danger: var(--c-red-300);
  --color-danger-soft: rgba(248,113,113,.12);
  --color-warning: var(--c-yellow-300);
  --color-sunday-ink: var(--c-red-300);

  --color-score-1: var(--c-score-d-1);
  --color-score-2: var(--c-score-d-2);
  --color-score-3: var(--c-score-d-3);
  --color-score-4: var(--c-score-d-4);
  --color-score-ink-dark: var(--c-gray-d-text);

  /* 어두운 바탕에서는 채움색 그대로 5:1 이상이라 ink = 채움색 */
  --line2-ink: var(--c-line2);
  --line4-ink: var(--c-line4);
  --line1-ink: var(--c-line1-ink-dark);
  --line3-ink: var(--c-line3);
  --line5-ink: var(--c-line5-ink-dark);
  --line6-ink: var(--c-line6-ink-dark);
  --line7-ink: var(--c-line7-ink-dark);
  --line8-ink: var(--c-line8-ink-dark);
  --line9-ink: var(--c-line9-ink-dark);
  --line9-soft: var(--c-gray-d-surface3);

  --color-nav-bg: rgba(10,12,20,.85);
  --color-loading-bg: rgba(10,12,20,.95);
  --color-scrim: rgba(0,0,0,.85);

  --shadow-line: 0 1px 2px rgba(0,0,0,.25);
  --shadow-toast: 0 4px 16px rgba(0,0,0,.4);
  --shadow-sheet: 0 8px 24px rgba(0,0,0,.4);
}

/* 움직임 줄이기를 켠 사람에게는 모션 토큰을 0 으로 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}

/* ───── 3. 옛 변수 이름 별칭 ─────
   값은 위에 있다. 기존 CSS 가 쓰는 이름을 의미 토큰에 잇기만 한다. */

:root {
  --bg: var(--color-bg);
  --bg2: var(--color-bg-sunken);
  --surface: var(--color-surface);
  --surface2: var(--color-surface-2);
  --surface3: var(--color-surface-3);
  --border: var(--color-border);
  --text: var(--color-text);
  --text-dim: var(--color-text-dim);
  --text-muted: var(--color-text-muted);

  /* 선택 상태·링크·칸 번호·막대 */
  --accent: var(--color-accent);
  /* 흰 글자를 얹는 채움 버튼 배경 */
  --accent2: var(--color-accent-fill);
  --accent-soft: var(--color-accent-soft);

  /* 포인트. 1순위 칸 outline·미응답 카드 왼쪽 바처럼 핵심 강조에만. 글자색 금지 */
  --point: var(--color-point);
  --point2: var(--color-point-strong);
  --point-soft: var(--color-point-soft);
  --point-ink: var(--color-point-ink);

  /* 초록·빨강은 막대·테두리·왼쪽 바에만. 글자로 초록이 꼭 필요하면 --green-ink */
  --green: var(--color-success);
  --green-dim: var(--color-success-soft);
  --green-ink: var(--color-success-ink);
  --red: var(--color-danger);
  --red-dim: var(--color-danger-soft);
  --yellow: var(--color-warning);

  --radius: var(--r-legacy-card);
  --radius-sm: var(--r-legacy-control);
  --radius-pill: var(--r-pill);
  --shadow: var(--shadow-line);
  --transition: var(--dur-fast) var(--ease);
}