/* =============================================================================
 * ui_template_theme.css
 * 글로벌 디자인 테마 및 CSS 변수 (라이트/다크) — 프로그램 전체 한 벌(대시보드 값)
 *
 * 원칙:
 *   - 모든 색상/간격/폰트는 이 파일의 CSS 변수(var(--...))로만 참조.
 *   - 하드코딩된 Hex/px 값을 컴포넌트에 직접 입력 금지 (frontend.md §1).
 *   - 값은 이 파일 두 블록(밝음 · 어두움)에만 — 대시보드 `--b01-*` 는 여기 값의 별칭.
 * ========================================================================== */

/* 글꼴 파일(Noto Sans KR · SIL OFL 1.1) — 모든 PC 가 같은 글꼴 · CAD 앱도 이 파일을 읽음 */
@import url("./fonts/noto_sans_kr.css");

:root {
  /* 브라우저 기본 부품(체크 · 색 고르개 · 펼침 목록 · 스크롤 막대)이 테마를 따름 */
  color-scheme: light;

  /* ---------------------------------------------------------------------------
   * 1. 색상 토큰 (Colors) — 중립 회색 + 초록 강조
   * ------------------------------------------------------------------------ */
  /* 중립 (Neutrals) */
  --color-canvas: #ffffff; /* 카드 표면, 입력 필드 */
  --color-paper: #f6f7f9; /* 페이지 바탕, 테이블 교차행 */
  --color-mist: #e6e8ec; /* 헤어라인 보더, 구분선 */
  --color-smoke: #c1c7cf; /* 비활성 상태, 스켈레톤 플레이스홀더 */
  --color-ash: #9ca3af; /* 옅은 회색 글(장식) — 읽을 글은 --color-text-muted */
  --color-slate: #6b7280; /* 보조 본문 텍스트, 설명 */
  --color-charcoal: #1f2328; /* 본문 텍스트, 아이콘 스트로크 */
  --color-carbon: #222222; /* 다크 UI 요소, 니어블랙 액센트 */
  --color-ink: #000000; /* 최대 대비 텍스트/보더 */

  /* 강조 (Accent) */
  --color-accent: #1f7a4d; /* 링크 · 주 액션 · 고른 것 */
  --color-accent-soft: #eaf5ee; /* 고른 줄 · 태그 바탕 */
  --color-hover: #f3f4f6; /* 줄 · 메뉴 hover 바탕 */

  /* 상태 색상 (Status) — 성공 램프는 ✓ 를 같이 띄움(강조색과 같은 초록 계열) */
  --color-success: #1f8a4c; /* 성공/승인 */
  --color-warning: #b45309; /* 경고 */
  --color-danger: #c0392b; /* 에러/삭제 글자 · 선 */
  --color-danger-fill: #d6363c; /* 위험 채운 바탕(알림 점 · 배지) · 흰 글 대비 4.5 이상 */
  --color-info: #2e6fb5;
  /* 패널 접기/펼치기 손잡이 테두리 — 강조색 */
  --panel-handle-border: var(--color-accent);
  --color-scrim: rgba(16, 24, 40, 0.4); /* 모달 · 서랍 뒤 가림막 */

  /* 옛 이름 — 새 코드 금지 · 새 값의 별칭 */
  --color-deep-iris: var(--color-text);
  --color-plum-velvet: var(--color-text);
  --color-royal-amethyst: var(--color-accent);
  --color-mist-violet: var(--color-accent-soft);
  --color-lavender-wash: var(--color-accent);

  /* ---------------------------------------------------------------------------
   * 2. 의미 기반 별칭 (Semantic Aliases)
   *    컴포넌트는 가급적 아래 별칭을 사용해 라이트/다크 전환에 대응.
   * ------------------------------------------------------------------------ */
  --color-bg: var(--color-paper); /* 페이지 바탕 */
  --color-surface: var(--color-paper); /* 판 바탕 · 표 머리 · 얼룩줄 */
  --color-surface-raised: var(--color-canvas); /* 카드 · 떠 있는 표면 */
  --color-surface-sunken: var(--color-hover);
  --color-border: var(--color-mist); /* 기본 보더 */
  --color-border-strong: #cfd4db; /* 좌측 카드 외곽 · 표 머리 밑줄 */
  --color-text: var(--color-charcoal); /* 기본 글 · 제목 */
  --color-text-body: var(--color-charcoal); /* 일반 본문 */
  --color-text-secondary: var(--color-slate); /* 보조 텍스트 */
  --color-text-muted: var(--color-slate); /* 뮤트/placeholder */
  --color-primary: var(--color-accent); /* 주 액션 배경 */
  --color-primary-text: #ffffff; /* 주 액션 위 텍스트 */
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 88%, #000);
  --color-focus-ring: var(--color-accent);

  /* 차트 시리즈 색상 (CPU/메모리/디스크 등 구분용) */
  --color-chart-0: #5b8def; /* 파랑 — CPU */
  --color-chart-1: #34c38f; /* 초록 — 메모리 */
  --color-chart-2: #f1963b; /* 주황 — 디스크 */
  --color-chart-3: #9b6dde; /* 보라 — 예비 */

  /* ---------------------------------------------------------------------------
   * 3. 타이포그래피 (Typography)
   * ------------------------------------------------------------------------ */
  /* 폰트 패밀리 — 한 토큰 · Noto Sans KR 는 실은 파일(fonts/) · 뒤는 파일을 못 받을 때만 */
  --font-ui: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);
  --font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;

  /* 스케일 (px 고정 — design.md 명세) */
  --text-caption: 12px;
  --leading-caption: 1.3;
  --text-body-sm: 14px;
  --leading-body-sm: 1.4;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 24px;
  --leading-subheading: 1;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1;
  --text-heading: 40px;
  --leading-heading: 1;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1;
  --text-display: 64px;
  --leading-display: 1;

  /* 굵기 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---------------------------------------------------------------------------
   * 4. 간격 (Spacing) — 8px 기반, compact density
   * ------------------------------------------------------------------------ */
  --spacing-unit: 8px;
  --spacing-4: 4px; /* pill/tag 세로 패딩용 하프 유닛 */
  --spacing-8: 8px;
  /* 12px는 8px 배수가 아니지만 여러 화면이 이미 쓰고 있었다. 정의가 없어 그 선언들이
     통째로 무효가 되고 있었다 — 특히 `top/right/bottom/left: var(--spacing-12)`가 무효라
     절대 위치 요소가 offset 없이 원래 흐름 자리(좌상단)로 떨어져 라벨이 겹쳤다
     (2026-08-01 B04 2D 지도에서 발견). 값을 여기서 한 번 정의해 바로잡는다. */
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-216: 216px;
  --btn-group-gap: var(--spacing-4); /* 붙은 단추 묶음(.ui-btn-group) 사이 */

  /* ---------------------------------------------------------------------------
   * 5. 보더 반경 (Border Radius) — 8px 시그니처
   * ------------------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius-lg: 8px; /* 카드/버튼/입력/아이콘 = 시그니처 */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px; /* large 컨테이너 */
  --radius-pills: 1440px; /* pill/tag/캡슐 네비 전용 */

  --radius-cards: 10px;
  --radius-buttons: var(--radius-lg);
  --radius-inputs: var(--radius-lg);
  --radius-icons: var(--radius-lg);
  --radius-large: var(--radius-3xl);

  /* 입력칸 · 고르기칸 높이 — 크기마다 한 값(같은 줄이면 위아래가 맞음) */
  --control-height: 42px;
  --control-height-sm: 30px;
  /* 좌측 패널 컨테이너 칸 높이 · 라벨 틈 — 기준 = B05/B06 「구조물 배치」 · 공용 양식 `.ui-panel-form` 이 씀 */
  --panel-control-h: 26px;
  --panel-label-gap: 2px;

  /* 줄 위 작은 단추 한 규격 — 종단 머리 줄 [초기화]~▼ · [배수유역도] · [새 창] 이 함께 씀(높이 = 글자 12 + 여백 2 + 테두리 2) */
  --btn-bar-padding: 1px var(--spacing-8);
  --btn-bar-font-size: var(--text-caption);
  /* 보조 탭 단추 높이 — B08 · B09 보조 탭 줄(.ui-subtabs) 한 꼴 */
  --subtab-height: 24px;
  /* 큰 알약 글자 — 공용 알약(.ui-tag · 12px) 한 단 위 · 종단 누가토량 배지가 씀 */
  --pill-font-size-lg: var(--text-body-sm);

  /* ---------------------------------------------------------------------------
   * 6. 그림자 (Shadows) — 떠 있는 것(메뉴 · 모달 · 툴팁)만 · 카드는 선만
   * ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12);

  /* ---------------------------------------------------------------------------
   * 7. 레이아웃 (Layout)
   * ------------------------------------------------------------------------ */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Scrollbar */
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: color-mix(in srgb, var(--color-text) 12%, transparent);
  --color-scrollbar-thumb-hover: color-mix(in srgb, var(--color-text) 20%, transparent);
  --color-scrollbar-thumb-active: color-mix(in srgb, var(--color-text) 28%, transparent);

  /* 워크플로우 3단 레이아웃 (frontend.md §2) */
  --wf-header-height: 56px; /* 상단: 타이틀 + 진행 단계 */
  --wf-left-panel-width: 320px; /* 좌측: 입력 폼 (너비 고정) */
  /* 좁은 폭에서 좌측 패널이 물러나며 **본문에 남겨 두는 최소 폭**(2026-09-08).
     이 값이 없으면 패널이 화면을 거의 다 덮어 「넘침 0 인데 못 읽는」 화면이 된다. */
  --wf-min-content-width: 320px;
  /* 좁은 폭에서 쓰는 좌측 패널 폭 — 입력 칸이 아직 읽히는 선까지만 줄인다. */
  --wf-left-panel-narrow-width: 280px;

  /* ---------------------------------------------------------------------------
   * 8. 상호작용 (Motion & Z-index)
   * ------------------------------------------------------------------------ */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  /* 확인창은 모달 위에 떠야 한다 — 모달 닫기 확인이 모달 뒤에 깔리면 못 누른다. */
  --z-confirm: 1050;
  --z-toast: 1100;

  /* ---------------------------------------------------------------------------
   * 9. 2D 지도 벡터 팔레트 (B04 배경지도 · B05 배수유역도 공용)
   *   캔버스에 그리는 색이라 CSS로 직접 칠할 수 없다 — TS가 이 변수를 읽어 쓴다
   *   (`ui_template_palette.ts`). 여기가 유일한 정의처이며 화면별 복제 금지.
   *   배경이 위성사진이라 라이트/다크 공통으로 같은 색을 쓴다.
   * ------------------------------------------------------------------------ */
  --map-route: #f97316; /* 계획선 (B04 지도·B05 배수유역도 공통) */
  --map-route-locked: #ca8a04; /* 계획노선 편집 — 고정한 선 · 호 · 점 황금 (평면의 주황 · 절토 붉음 · 성토 청록 · 하늘색과 구별) */
  --map-route-node: #15803d; /* 계획노선 편집 — 교각점 녹색 (밝음 · 어두움 따로) */
  --map-cadastral: #f97316;
  --map-sigungu: #7c3aed;
  --map-eupmyeondong: #22c55e;
  --map-contour: #fdba74;
  --map-sheet-contour: #a5b4fc;
  --map-contour-major: #818cf8; /* 계획노선 편집 5m 등고선 — 도엽색보다 한 단 짙게 */
  --map-contour-minor: rgba(165, 180, 252, 0.45); /* 계획노선 편집 1m 등고선 — 얇고 옅게 */
  --map-sheet-stream: #2563eb;
  --map-sheet-elev-point: #f9a8d4;
  --map-sheet-cutfill: #f43f5e;
  --map-sheet-wall: #0f766e;
  --map-flow-arrow: #7c3aed;
  --map-upstream: rgba(29, 78, 216, 0.95); /* 상류 세류망 강조선 */
  --map-upstream-toggle: #1d4ed8; /* 토글 버튼 색띠 */
  --map-satellite-toggle: #64748b; /* 배경사진은 선 색이 없어 중립 회색 */
  --map-pipe-orphan: #e5e7eb; /* 유역이 없는 배관 마커 */
  --map-pipe-marker: rgba(249, 115, 22, 0.95); /* B04 기본 관 마커(세류 교차점) */
  --map-pipe-auto: rgba(14, 165, 233, 0.95); /* 최대 간격 규칙으로 자동 보충한 관 */
  --map-pipe-user: rgba(22, 163, 74, 0.95); /* 사용자가 넣거나 옮긴 관 */

  /* 배수유역 오버레이(B04 지도) */
  --map-halo: rgba(255, 255, 255, 0.9); /* 선·글자 뒤에 까는 흰 테두리 */
  --map-label-text: #1f2937; /* 지도 위 라벨 글자 */
  --map-marker-text: #111827; /* 관 마커 번호 글자·선택된 마커 테두리 */
  --map-marker-outline: #374151; /* 선택되지 않은 마커 테두리 */
  --map-basin-outline: #92400e; /* 2차 유역 외곽선(분수령) */
  --map-basin-ring: rgba(146, 64, 14, 0.95);
  --map-boundary-handle: rgba(146, 64, 14, 0.95); /* 유역선 편집 핸들 */
  --map-boundary-handle-moved: rgba(220, 38, 38, 0.95); /* 사용자가 옮긴 핸들 */
  --map-primary-region: #059669; /* 1차 유역 */
  --map-flow-region: #2563eb; /* 유역 방향 토글 */
  --map-grid-line: rgba(255, 255, 255, 0.55); /* 해석 격자 셀 선 */
  --map-flow-to-road-fill: rgba(220, 38, 38, 0.28);
  --map-flow-to-road-line: rgba(153, 27, 27, 0.95);
  --map-flow-away-fill: rgba(37, 99, 235, 0.22);
  --map-flow-away-line: rgba(255, 255, 255, 0.95);
  --map-flow-away-arrow: rgba(30, 64, 175, 0.95);
  --map-flow-unknown-fill: rgba(120, 113, 108, 0.18); /* 표고가 없어 판정 못한 셀 */

  /* 도로 유입 흐름 강도 색띠 — 적음(파랑) → 많음(빨강). 로그 스케일로 보간한다.
     보간을 하려면 hex여야 한다(rgba/색이름 금지). */
  --map-flow-ramp-0: #2563eb;
  --map-flow-ramp-1: #06b6d4;
  --map-flow-ramp-2: #22c55e;
  --map-flow-ramp-3: #eab308;
  --map-flow-ramp-4: #f97316;
  --map-flow-ramp-5: #dc2626;
  --map-inflow-outline: #dc2626; /* 선택한 지점으로 들어오는 셀들의 외곽선 */

  /* 유역 채움 파스텔 8종 — 유역 번호 순으로 돌려쓴다(사용자 지시: 파스텔톤).
     알파 0.45는 비선택 유역을 0.18로 낮출 때 문자열로 치환하므로 형식을 바꾸지 말 것. */
  --map-basin-1: rgba(167, 216, 199, 0.45);
  --map-basin-2: rgba(247, 208, 168, 0.45);
  --map-basin-3: rgba(186, 199, 240, 0.45);
  --map-basin-4: rgba(241, 183, 199, 0.45);
  --map-basin-5: rgba(214, 226, 168, 0.45);
  --map-basin-6: rgba(202, 186, 227, 0.45);
  --map-basin-7: rgba(168, 214, 232, 0.45);
  --map-basin-8: rgba(240, 219, 168, 0.45);
}

/* =============================================================================
 * 다크 모드 (Dark) — 중립 회색 바탕 · 강조는 명도를 올려 대비 확보
 *   의미 별칭(bg · surface · text …)은 :root 식 그대로라 여기서는 값만 바꿈.
 * ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #1b1e23;
  --color-paper: #121417;
  --color-mist: #2c3038;
  --color-smoke: #4a4f58;
  --color-ash: #7d848e;
  --color-slate: #9aa1ab;
  --color-charcoal: #e6e8eb;
  --color-carbon: #f0f1f3;
  --color-ink: #ffffff;

  --color-accent: #3fae75;
  --color-accent-soft: #173326;
  --color-hover: #242830;
  --color-border-strong: #3b414b;
  --color-primary-text: #0e1512;
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #fff);

  --color-success: #3fbb6f;
  --color-warning: #f5a524;
  --color-danger: #e8695a;
  --color-danger-fill: #f06b6f;
  --color-info: #6aa6e0;
  --color-scrim: rgba(0, 0, 0, 0.55);
  --map-route-locked: #facc15;
  --map-route-node: #4ade80;

  --shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-lg: rgba(0, 0, 0, 0.5) 0px 32px 24px -12px, rgba(0, 0, 0, 0.3) 0px 3px 3px 0px;
}

/* 시스템 설정 기반 자동 다크 (사용자가 명시적으로 data-theme를 안 준 경우) — 위와 같은 값 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #1b1e23;
    --color-paper: #121417;
    --color-mist: #2c3038;
    --color-smoke: #4a4f58;
    --color-ash: #7d848e;
    --color-slate: #9aa1ab;
    --color-charcoal: #e6e8eb;
    --color-carbon: #f0f1f3;
    --color-ink: #ffffff;

    --color-accent: #3fae75;
    --color-accent-soft: #173326;
    --color-hover: #242830;
    --color-border-strong: #3b414b;
    --color-primary-text: #0e1512;
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #fff);

    --color-success: #3fbb6f;
    --color-warning: #f5a524;
    --color-danger: #e8695a;
    --color-danger-fill: #f06b6f;
    --color-info: #6aa6e0;
    --color-scrim: rgba(0, 0, 0, 0.55);
    --map-route-locked: #facc15;
    --map-route-node: #4ade80;

    --shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
    --shadow-lg: rgba(0, 0, 0, 0.5) 0px 32px 24px -12px, rgba(0, 0, 0, 0.3) 0px 3px 3px 0px;
  }
}

/* =============================================================================
 * 기본 리셋 및 문서 스타일
 * ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 일반 페이지의 가로·세로 스크롤바를 동일한 얇은 테마로 표시한다.
 * B08 CAD iframe은 별도 문서이므로 이 전역 스타일의 영향을 받지 않는다. */
* {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
  scrollbar-width: thin;
}

@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }

  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  *::-webkit-scrollbar-track {
    background-color: transparent;
  }

  *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-pills);
    background-color: var(--color-scrollbar-thumb);
    background-clip: padding-box;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scrollbar-thumb-hover);
  }

  *::-webkit-scrollbar-thumb:active {
    background-color: var(--color-scrollbar-thumb-active);
  }

  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }

  *::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

@media (forced-colors: active) {
  * {
    scrollbar-color: auto;
  }
}

/* ─── 공용 접기 컨테이너 (ui_template_collapsible.ts) ─────────────────────────
   컨테이너에 `ui-collapsible`, 제목에 `ui-collapsible__title`을 주면 제목 행 전체가
   클릭 영역이 되고, 접히면 제목을 뺀 직속 자식이 숨겨진다. 펼침 ▾ / 접힘 ▸ 캐럿 표시. */
.ui-collapsible__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8, 8px);
  cursor: pointer;
  user-select: none;
}

.ui-collapsible__title::after {
  content: "▾";
  flex: 0 0 auto;
  margin-block: -0.4em;
  color: var(--color-text-muted);
  /* 레이아웃 허용 범위 내에서 최대한 크게(제목 글자의 약 1.7배). 음수 margin으로 행 높이는 유지. */
  font-size: 1.7em;
  line-height: 1;
}

.ui-collapsible.is-collapsed > .ui-collapsible__title::after {
  content: "▸";
}

/* 카드 제목 ⚙(280-5) — 캐럿 바로 왼쪽 · 제목 높이 그대로(음수 margin) */
.ui-collapsible__settings {
  flex: 0 0 auto;
  margin: -0.4em 0 -0.4em auto;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.ui-collapsible__settings:hover,
.ui-collapsible__settings:focus-visible {
  color: var(--color-primary);
}

.ui-collapsible.is-collapsed > :not(.ui-collapsible__title) {
  display: none;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1;
}

h1 {
  font-size: var(--text-heading);
}
h2 {
  font-size: var(--text-heading-sm);
}
h3 {
  font-size: var(--text-subheading);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ─── B · M 화면 전역 글 선택 막음(81-1) ───────────────────────────────────
   `html.is-bm-route` 는 main.ts 가 라우트마다 토글(A 영역은 안 붙음).
   허용 = input · textarea · select · [contenteditable] · 원문 본문(m01lab-src__body). */
html.is-bm-route {
  user-select: none;
  -webkit-user-select: none;
}
html.is-bm-route input,
html.is-bm-route textarea,
html.is-bm-route select,
html.is-bm-route [contenteditable],
html.is-bm-route .m01lab-src__body,
html.is-bm-route .m01lab-src__body * {
  user-select: text;
  -webkit-user-select: text;
}

/* =============================================================================
 * 551-2 그림 전용 값 — 화면 테마와 따로 · 지금 색 고정
 *   종단 · 횡단 · 이정표 SVG 선 · 지도 계획선 · CAD 바탕 · 3D 바탕은 --draw-* 만 씀.
 *   값은 글자 hex 로 박음(--color-* 를 가리키지 않음) — 화면 테마가 바뀌어도 그림 색은 그대로.
 * ========================================================================== */
:root {
  --draw-accent: #3e0079; /* 설계선 · EP 선 · 이정표 강조 */
  --draw-primary: #26114a; /* 자유 표시 · 노선 추천 계획선 */
  --draw-chart-0: #5b8def; /* 원지반선 · 성토 */
  --draw-chart-1: #34c38f; /* 횡단 원지반선 */
  --draw-chart-2: #f1963b; /* 토사 깎기 */
  --draw-chart-3: #9b6dde; /* 발파암 깎기 */
  --draw-success: #1f8a4c;
  --draw-warning: #b8860b;
  --draw-danger: #c0392b;
  --draw-text: #26114a;
  --draw-text-body: #333333;
  --draw-text-secondary: #615e6e;
  --draw-text-muted: #9491a1;
  --draw-grid: #e6e2e3; /* 눈금 · CAD 격자 */
  --draw-surface: #f6f7fa;
  --draw-surface-raised: #ffffff; /* 그림 바탕 · 3D 바탕 */
  --draw-canvas: #ffffff; /* CAD 바탕 */
  --draw-map-contour: #ffd68c; /* 위성 위 겹(노선분석) — 도엽 등고선 */
  --draw-map-stream: #38bdf8; /* 세류 · 하천 */
  --draw-map-road: #f8fafc; /* 기존 도로 */
  --draw-map-parcel: #f0abfc; /* 지적 경계 */
}

:root[data-theme="dark"] {
  --draw-accent: #b99aff;
  --draw-primary: #b99aff;
  --draw-success: #3fbb6f;
  --draw-warning: #e0b64a;
  --draw-danger: #e8695a;
  --draw-text: #d8ccff;
  --draw-text-body: #e4e0f0;
  --draw-text-secondary: #b3aec6;
  --draw-text-muted: #8b86a0;
  --draw-grid: #322a45;
  --draw-surface: #1e1930;
  --draw-surface-raised: #251f38;
  --draw-canvas: #16121f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --draw-accent: #b99aff;
    --draw-primary: #b99aff;
    --draw-success: #3fbb6f;
    --draw-danger: #e8695a;
    --draw-text: #d8ccff;
    --draw-text-body: #e4e0f0;
    --draw-text-secondary: #b3aec6;
    --draw-text-muted: #8b86a0;
    --draw-grid: #322a45;
    --draw-surface: #1e1930;
    --draw-surface-raised: #251f38;
    --draw-canvas: #16121f;
  }
}