/* USV — tokens.css — 디자인 토큰 + 폰트 임포트 */
/* ===================================================================
   USV 관제시스템 공통 스타일 — Notion 라이트 테마 v2.0
   설계서: design-spec.md 기준 전면 재작성
   =================================================================== */

/* ===== 폰트 =====
   외부 CDN 차단 환경에서도 콘솔 오류 없이 로컬 시스템 폰트로 동작하도록
   웹폰트 @import 는 제거하고 font stack 만 유지한다. */

/* ===================================================================
   1. CSS 변수 — 디자인 토큰 (설계서 1.1절)
   =================================================================== */
:root {
  /* --- 배경 & 서피스 --- */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-muted: #F3F4F6;
  --surface-hover: #F9FAFB;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --divider: #F1F5F9;

  /* --- 텍스트 --- */
  --text: #111827;
  --text-sub: #374151;
  --muted: #6B7280;
  --muted-light: #9CA3AF;

  /* --- 브랜드 --- */
  --brand: #2563EB;
  --brand-hover: #1D4ED8;
  --brand-active: #1E40AF;
  --brand-soft: #EFF6FF;
  --brand-soft-border: #BFDBFE;
  --accent: #8B5CF6;
  --accent-soft: #EDE9FE;
  /* v3.2.3-297: 배지 토큰화 — accent/neutral 텍스트 쌍 (다크쌍은 하단 다크 블록에 정의) */
  --accent-text: #5B21B6;
  --neutral-soft: #F3F4F6;
  --neutral-text: #374151;

  /* --- 시맨틱 색상 --- */
  --success: #10B981;        --success-soft: #D1FAE5;   --success-text: #065F46;
  --warn:    #F59E0B;        --warn-soft:    #FEF3C7;   --warn-text:    #92400E;
  --danger:  #EF4444;        --danger-soft:  #FEE2E2;   --danger-text:  #991B1B;
  --info:    #0EA5E9;        --info-soft:    #E0F2FE;   --info-text:    #075985;
  --teal:    #0D9488;        --teal-soft:    #CCFBF1;   --teal-text:    #134E4A;

  /* --- 지도 전용 색상 --- */
  --map-path-auto:   #22C55E;
  --map-path-track:  #3B82F6;
  --map-path-return: #F59E0B;   /* 복귀/보조 경로 (v2.6.1 E-3) */
  --map-fence-in:    #2563EB;
  --map-fence-out:   #EF4444;
  --map-boat-active: #10B981;
  --map-boat-active-stroke: #059669;
  --map-boat-idle:   #6B7280;
  --map-obstacle:    #EF4444;
  --map-wp-fill:     #3B82F6;
  --map-wp-stroke:   #1D4ED8;
  --map-wp-selected: #F59E0B;   /* 선택/드래그 중 */
  --map-wp-selected-stroke: #D97706;

  /* --- 차트 시리즈 색상 (v2.6.0 M-6) --- */
  --chart-do:   #2563EB;   /* 용존산소 — 파랑 (brand) */
  --chart-ph:   #7C3AED;   /* pH — 보라 */
  --chart-temp: #D97706;   /* 수온 — 앰버 */
  --chart-turb: #DC2626;   /* 탁도 — 빨강 */
  --chart-sal:  #059669;   /* 염도 — 에메랄드 */

  /* --- 히트맵 위험도 팔레트 (v2.6.0 M-6) --- */
  --heatmap-risk-critical: #8B0000;   /* ≥ 90% — 심각 */
  --heatmap-risk-danger:   #EF4444;   /* ≥ 80% — 위험 */
  --heatmap-risk-warn:     #F97316;   /* ≥ 70% — 주의 */
  --heatmap-risk-ok:       #2E7D32;   /* ≥ 50% — 보통 */
  --heatmap-risk-safe:     #0277BD;   /* <  50% — 안전 */

  /* --- 반경 --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- 그림자 --- */
  --shadow-sm:      0 1px 2px rgba(0,0,0,.04);
  --shadow-card:    0 1px 3px rgba(0,0,0,.05);
  --shadow-hover:   0 4px 20px rgba(0,0,0,.08);
  --shadow-popover: 0 8px 32px rgba(0,0,0,.12);
  --shadow-modal:   0 20px 60px rgba(0,0,0,.20);
  --shadow-focus:   0 0 0 3px rgba(37,99,235,.15);

  /* --- 타이포그래피 --- */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   11px;  --lh-xs:   1.4;
  --fs-sm:   12px;  --lh-sm:   1.5;
  --fs-base: 13px;  --lh-base: 1.55;
  --fs-md:   14px;  --lh-md:   1.55;
  --fs-lg:   16px;  --lh-lg:   1.5;
  --fs-xl:   18px;  --lh-xl:   1.45;
  --fs-2xl:  22px;  --lh-2xl:  1.35;
  --fs-3xl:  28px;  --lh-3xl:  1.25;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- 스페이싱 (8pt 그리드) --- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;

  /* --- 레이아웃 --- */
  --sidebar-width:           260px;
  --sidebar-width-collapsed: 64px;
  --header-height:           56px;
  --right-panel-width:       420px;

  /* --- 접근성 / 터치 (Phase F Sprint B) --- */
  --touch-target-min:        44px;   /* WCAG 2.5.5 (AAA) / Apple HIG 권장 */
  --touch-target-comfort:    48px;   /* 주요 CTA (Material) */

  /* --- Disabled 상태 (WCAG AA UI 3:1) --- */
  --disabled-bg:      #F3F4F6;   /* = surface-muted */
  --disabled-text:    #6B7280;   /* = --muted, on #F3F4F6 컨트라스트 3.76:1 ✓ */
  --disabled-border:  #D1D5DB;   /* = --border-strong */
  --disabled-opacity: .65;       /* 텍스트 유지 시 시각적 힌트용 (opacity-only 경로) */

  /* --- 모션 --- */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .12s;
  --dur-base: .2s;
  --dur-slow: .35s;

  /* --- z-index --- */
  --z-base:           1;
  --z-map-overlay:    100;
  --z-dropdown:       300;
  --z-sticky-header:  500;
  --z-sidebar:        600;
  --z-popover:        800;
  --z-modal-backdrop: 1000;
  --z-modal:          1100;
  --z-toast:          2000;

  /* --- 테마 전환 모션 --- */
  color-scheme: light;
}

/* ===================================================================
   2. 다크 모드 토큰 (v2.3 D1)
   적용 방식: <html data-theme="dark"> 또는 prefers-color-scheme 자동 감지
   =================================================================== */
[data-theme='dark'] {
  color-scheme: dark;

  /* --- 배경 & 서피스 --- */
  --bg:              #0F172A;
  --surface:         #1E293B;
  --surface-muted:   #273548;
  --surface-hover:   #2C3B52;
  --border:          #334155;
  --border-strong:   #475569;
  --divider:         #1E293B;

  /* --- 텍스트 --- */
  --text:            #F1F5F9;
  --text-sub:        #CBD5E1;
  --muted:           #94A3B8;
  --muted-light:     #64748B;

  /* --- 브랜드 (톤 조정) --- */
  --brand:           #3B82F6;
  --brand-hover:     #60A5FA;
  --brand-active:    #2563EB;
  --brand-soft:      #1E3A8A;
  --brand-soft-border:#1E40AF;
  --accent:          #A78BFA;
  --accent-soft:     #4C1D95;
  /* v3.2.3-297: 배지 토큰 다크쌍 — purple 텍스트는 밝게(판독불가 해소), neutral 은 slate */
  --accent-text:     #C4B5FD;
  --neutral-soft:    #334155;
  --neutral-text:    #CBD5E1;

  /* --- 시맨틱 (soft/text 쌍을 다크 배경에서 읽히게) --- */
  --success:         #34D399;   --success-soft:   #064E3B;   --success-text:   #6EE7B7;
  --warn:            #FBBF24;   --warn-soft:      #78350F;   --warn-text:      #FDE68A;
  --danger:          #F87171;   --danger-soft:    #7F1D1D;   --danger-text:    #FCA5A5;
  --info:            #38BDF8;   --info-soft:      #0C4A6E;   --info-text:      #7DD3FC;
  --teal:            #2DD4BF;   --teal-soft:      #134E4A;   --teal-text:      #5EEAD4;

  /* --- 지도 (채도 유지) --- */
  --map-path-auto:   #22C55E;
  --map-path-track:  #60A5FA;
  --map-path-return: #FBBF24;
  --map-fence-in:    #60A5FA;
  --map-fence-out:   #F87171;
  --map-boat-active: #34D399;
  --map-boat-active-stroke: #10B981;
  --map-boat-idle:   #94A3B8;
  --map-obstacle:    #F87171;
  --map-wp-fill:     #60A5FA;
  --map-wp-stroke:   #93C5FD;
  --map-wp-selected: #FBBF24;
  --map-wp-selected-stroke: #FCD34D;

  /* --- 차트 (다크 배경 대비: 약간 밝게) --- */
  --chart-do:   #60A5FA;
  --chart-ph:   #A78BFA;
  --chart-temp: #FBBF24;
  --chart-turb: #F87171;
  --chart-sal:  #34D399;

  /* --- 히트맵 (다크에서 더 선명) --- */
  --heatmap-risk-critical: #B91C1C;
  --heatmap-risk-danger:   #F87171;
  --heatmap-risk-warn:     #FB923C;
  --heatmap-risk-ok:       #4ADE80;
  --heatmap-risk-safe:     #38BDF8;

  /* --- 그림자 (어두운 배경에서 더 선명) --- */
  --shadow-sm:      0 1px 2px rgba(0,0,0,.30);
  --shadow-card:    0 1px 3px rgba(0,0,0,.35);
  --shadow-hover:   0 4px 20px rgba(0,0,0,.45);
  --shadow-popover: 0 8px 32px rgba(0,0,0,.55);
  --shadow-modal:   0 20px 60px rgba(0,0,0,.65);
  --shadow-focus:   0 0 0 3px rgba(59,130,246,.35);

  /* --- Disabled (다크) WCAG AA UI 3:1 --- */
  --disabled-bg:      #273548;   /* = surface-muted(dark) */
  --disabled-text:    #94A3B8;   /* = --muted(dark), on #273548 컨트라스트 4.59:1 ✓ */
  --disabled-border:  #475569;   /* = --border-strong(dark) */
}

/* 자동 감지 (data-theme 미지정 시 시스템 선호 따라가기) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg:              #0F172A;
    --surface:         #1E293B;
    --surface-muted:   #273548;
    --surface-hover:   #2C3B52;
    --border:          #334155;
    --border-strong:   #475569;
    --divider:         #1E293B;

    --text:            #F1F5F9;
    --text-sub:        #CBD5E1;
    --muted:           #94A3B8;
    --muted-light:     #64748B;

    --brand:           #3B82F6;
    --brand-hover:     #60A5FA;
    --brand-active:    #2563EB;
    --brand-soft:      #1E3A8A;
    --brand-soft-border:#1E40AF;
    --accent:          #A78BFA;
    --accent-soft:     #4C1D95;
    /* v3.2.3-297: 배지 토큰 다크쌍 (prefers-color-scheme) */
    --accent-text:     #C4B5FD;
    --neutral-soft:    #334155;
    --neutral-text:    #CBD5E1;

    --success:         #34D399;   --success-soft:   #064E3B;   --success-text:   #6EE7B7;
    --warn:            #FBBF24;   --warn-soft:      #78350F;   --warn-text:      #FDE68A;
    --danger:          #F87171;   --danger-soft:    #7F1D1D;   --danger-text:    #FCA5A5;
    --info:            #38BDF8;   --info-soft:      #0C4A6E;   --info-text:      #7DD3FC;
    --teal:            #2DD4BF;   --teal-soft:      #134E4A;   --teal-text:      #5EEAD4;

    --map-path-auto:   #22C55E;
    --map-path-track:  #60A5FA;
    --map-path-return: #FBBF24;
    --map-fence-in:    #60A5FA;
    --map-fence-out:   #F87171;
    --map-boat-active: #34D399;
    --map-boat-active-stroke: #10B981;
    --map-boat-idle:   #94A3B8;
    --map-obstacle:    #F87171;
    --map-wp-fill:     #60A5FA;
    --map-wp-stroke:   #93C5FD;
    --map-wp-selected: #FBBF24;
    --map-wp-selected-stroke: #FCD34D;

    --shadow-sm:      0 1px 2px rgba(0,0,0,.30);
    --shadow-card:    0 1px 3px rgba(0,0,0,.35);
    --shadow-hover:   0 4px 20px rgba(0,0,0,.45);
    --shadow-popover: 0 8px 32px rgba(0,0,0,.55);
    --shadow-modal:   0 20px 60px rgba(0,0,0,.65);
    --shadow-focus:   0 0 0 3px rgba(59,130,246,.35);

    --disabled-bg:      #273548;
    --disabled-text:    #94A3B8;
    --disabled-border:  #475569;
  }
}

/* Leaflet 타일 다크톤 보정 — v3.2.3-78
   ⚠️ 이전엔 CSS 의 .leaflet-tile 과 JS(USVMap)의 .leaflet-tile-pane 양쪽에
   filter 를 적용해 이중 invert 가 누적 → 다크모드에서 지도가 거의 검게 변하는 결함.
   이제 .leaflet-tile-pane 한 곳에만 필터를 적용한다 (USVMap._applyTileFilter).
   별도 페이지의 .leaflet-tile { opacity: 1 !important } 인라인 규칙은
   opacity stuck 우회용이라 filter 와 무관, 그대로 유지. */

/* 테마 전환 트랜지션 (과도하지 않게) */
body, .sidebar, .topbar, .card, .modal, .tbl, .btn, .badge {
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}