/*
 * gpxviewer 디자인 토큰 — UI 기준(doc/ui-guide.md)의 값 정의.
 *
 * 규칙
 * - 색·글자 크기·둥글기는 여기 정의된 변수로만 쓴다. 새 값이 필요하면 여기에 먼저 추가하고
 *   doc/ui-guide.md 표도 함께 고친다(tools/check-ui.mjs가 직접 쓴 값을 잡아낸다).
 * - 모든 HTML에서 style.css보다 먼저 로드한다.
 * - 미디어쿼리에는 CSS 변수를 쓸 수 없으므로 화면 전환 기준은 아래 주석의 3개 값만 쓴다.
 *
 * 화면 전환 기준(breakpoint)
 *   (max-width: 600px) and (orientation: portrait)   모바일 세로
 *   (max-width: 899px) and (max-height: 500px)        모바일 가로 / 낮은 화면
 *   (max-width: 899px)                                태블릿 이하
 */
:root {
  /* ── 브랜드(녹색) ── */
  --color-primary: #2a7a3b;        /* 주요 버튼, 선택 상태, 링크 강조. 흰 배경 대비 5.32:1 */
  --color-primary-strong: #1f5c2c; /* 마우스 올림·눌림 */
  --color-primary-soft: #e8f3ee;   /* 선택된 항목 배경 */
  --color-primary-line: #bcdccb;   /* 선택된 항목 테두리 */
  --color-on-primary: #fff;        /* 녹색 배경 위 글자 */
  --color-brand-3d: #0c63e4;       /* 서비스 이름 "3D Road"의 3D(2026-10-15). 흰 배경 5.36:1, 오프화이트 헤더(#f7f7f5) 4.99:1 — 처음 값 #0d6efd는 흰 배경 4.50이라 헤더에서 4.20으로 모자랐다 */
  --color-brand-road: #495057;     /* "3D Road"의 Road. 흰 배경 대비 8.2:1 */

  /* ── 중립(바탕·테두리·글자) ── */
  --color-surface: #fff;
  --color-surface-subtle: #f7f7f5;
  --color-surface-muted: #f0f0ee;
  --color-border: #e2e2df;
  --color-border-strong: #ccc;
  --color-text: #333;              /* 본문 12.63:1 */
  --color-text-secondary: #555;    /* 부가 정보 7.46:1 */
  --color-text-muted: #666;        /* 가장 옅은 글자. 흰 배경 5.74:1 — 이보다 옅은 회색 글자 금지 */

  /* ── 상태 ── */
  --color-danger: #a33;
  --color-danger-soft: #fde2e2;
  --color-direction-active: var(--color-like); /* 정방향/역방향 버튼에서 "지금 방향"의 화살표(2026-10-15). 나침반 북쪽 바늘과 같은 빨강, 흰 배경 대비 4.0:1(그래픽 3:1 기준) */
  --color-like: #ff0000;           /* 좋아요 하트(누름). 나침반 북쪽 바늘(#compass의 fill="red")과 같은 색. 흰 배경 대비 4.0:1 — 글자가 아닌 아이콘이라 비텍스트 기준 3:1을 만족 */
  --color-warning: #7a5c00;
  --color-warning-soft: #fef8e6;
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* ── 지도 위 그림(MapLibre 엔진의 경로·마커·경유지 라벨) ── */
  --color-map-track: #f00;                      /* 경로 선. Cesium 엔진의 경로 색과 같다 */
  --color-map-track-outline: rgba(0, 0, 0, 0.5); /* 경로 선 테두리 */
  --color-map-marker: #fff;                     /* 진행 마커, 경유지 라벨 글자·기둥 */
  --color-map-marker-outline: #000;             /* 마커·라벨 테두리 */

  /* ── 글자 크기: 5단계. 12px 미만 금지 ── */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  /* ── 여백: 이 값들 중에서 고른다 ── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;

  /* ── 모서리 둥글기 ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ── 그림자: 지도 위에 떠 있는 컨트롤(확대·축소 버튼 등)에 ── */
  --shadow-float: 0 1px 4px rgba(0, 0, 0, 0.3);

  /* ── 아이콘 크기: SVG 아이콘은 이 값들로만 ── */
  --icon-sm: 12px; /* 데스크톱 컨트롤 바(높이 24px) */
  --icon-md: 16px;
  --icon-lg: 20px; /* 모바일 세로·가로(버튼 44px) */

  /* ── 터치 영역: 모바일에서 누를 수 있는 요소의 최소 가로·세로 ── */
  --touch-min: 44px;
  /* 뷰어 모바일 컨트롤 줄 전용(2026-10-16): 8개 아이콘 버튼이 360px 폰 한 줄에 들어가도록 가로·세로 40px. 사용자가 고른 44px 기준의 예외 — doc/ui-guide.md §5 */
  --touch-compact: 40px;
}

/*
 * 고도 차트 색(2026-10-16): 차트는 지도 바로 아래 패널이라 지도 종류와 색이 이어져야 한다.
 * 기본(:root)은 지도형(OpenFreeMap 등), 위성영상 지도(VWorld·Cesium·MapLibre 위성)는 data-chart-theme="satellite"로 덮는다 — 둘 다 밝은 패널이고
 * 채움·글자 색은 같으며 배경 색조만 다르다(지도형 = 거의 흰 민트, 위성형 = 밝은 민트).
 * 속성은 viewer-boot.js가 엔진을 정한 직후 <html>에 붙이고, common.js renderElevationChart가 차트를 만들 때 읽는다.
 * --chart-fill-rgb는 JS에서 알파를 붙여 쓰는 채널 값(R, G, B)이다.
 *
 * 2026-10-15 "칙칙하다"는 보고로 밝고 선명하게 바꿨다. 칙칙함의 원인: 패널 배경에 회색이 섞여 있었고(연회색 (244,246,241)·회색 연녹 (217,232,223)),
 * 채움 초록 (42,122,59)(채도 49%)이 회색 배경과 섞여 올리브빛 (77,144,92)이 됐다. 지금은 채움 (18,135,64)(채도 76%)로 재생 구간이 맑은 초록 (50,152,90)으로 나온다.
 * 대비는 0.92 투명도로 흰 바탕과 합성한 실제 배경 기준이다(위성형 (234,249,240) 휘도 92%, 지도형 (247,252,249)):
 *   눈금 글자 13.1·13.8:1, 윤곽선 7.5·7.8:1, 재생선 4.4·4.7:1, 재생 채움/배경 3.34·3.46:1, 경유지 글자/남은 채움 10.3·10.6:1,
 *   경유지 글자/재생 채움 4.39·4.46:1(4.5에 0.1 안팎 못 미치나 이전 4.48과 같은 수준), 재생선 라벨 글자(흰색) 4.83:1.
 * 재생 채움 알파 0.85는 "재생 채움/배경 3:1 이상"과 "경유지 글자/재생 채움"의 균형점이다(0.88이면 3.49↑·4.21↓).
 */
:root {
  --chart-bg: rgba(246, 252, 248, 0.92);
  --chart-border: #cfe3d6;
  --chart-text: #14301f;
  --chart-grid: rgba(0, 0, 0, 0.08);
  --chart-fill-rgb: 18, 135, 64;
  --chart-fill-a-played: 0.85;
  --chart-fill-a-rest: 0.28;
  --chart-line: #0f5c2a;
  --chart-playhead: #dc2626;
  --chart-playhead-text: #ffffff;
  --chart-wp-text: #10261a;
  --chart-wp-line: rgba(0, 0, 0, 0.7);
}

:root[data-chart-theme="satellite"] {
  /* 지도형과 채움·글자 색은 같고 배경 색조만 밝은 민트다(위성 영상 아래에서 패널이 흰색으로 뜨지 않고 지도형과도 구분된다). 이전 값은 커밋 c3ae9ad. */
  --chart-bg: rgba(232, 248, 239, 0.92);
  --chart-border: #a8d4bb;
  --chart-grid: rgba(0, 0, 0, 0.10);
}