/* ============================================================
   BBTECH OPS — 공통 테마 토큰 (라이트 / 다크)
   ui_rule.md §0 디자인 토큰 기반. main.html / index.html 공용.
   다크 전환: <html data-theme="dark"> (theme.js가 설정)
   ============================================================ */

/* ── LINE Seed KR (⭐ 단일 정의 — 기존 20개 HTML <style> 중복 통합) ──────────
   · .woff2 = .ttf 무손실 컨테이너 변환(글리프 12,350·한글 11,172 전수·서브셋 축소 없음).
     3.26MB → 0.4~0.5MB (85%↓) · 모양 동일 · 온라인은 URL 참조(⛔ base64 재서빙 금지).
   · 라이선스 SIL OFL 1.1 (assets/fonts/OFL.txt · 폰트 name 테이블 nameID 13·14 보존).
   · 폴백 .ttf 병기 = 구형 브라우저 대비(woff2 지원 시 .ttf 는 다운로드되지 않음).
   ──────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "LINE Seed KR"; font-weight: 300; font-display: swap;
  src: url("/ops/static/assets/fonts/LINESeedKR-Th.woff2") format("woff2"),
       url("/ops/static/assets/fonts/LINESeedKR-Th.ttf") format("truetype");
}
@font-face {
  font-family: "LINE Seed KR"; font-weight: 400; font-display: swap;
  src: url("/ops/static/assets/fonts/LINESeedKR-Rg.woff2") format("woff2"),
       url("/ops/static/assets/fonts/LINESeedKR-Rg.ttf") format("truetype");
}
@font-face {
  font-family: "LINE Seed KR"; font-weight: 700; font-display: swap;
  src: url("/ops/static/assets/fonts/LINESeedKR-Bd.woff2") format("woff2"),
       url("/ops/static/assets/fonts/LINESeedKR-Bd.ttf") format("truetype");
}

:root {
  /* === BBTECH C.I. (브랜드색 — 테마 무관 유지) === */
  --bbtech-green:       #14B446;
  --bbtech-dark-green:  #003C1E;
  --white:              #FFFFFF;
  --black:              #000000;

  /* === Layout === */
  --color-bg:           #F5F6F8;
  --color-card-bg:      #FFFFFF;
  --color-card-border:  #E5E7EB;
  --color-card-shadow:        0 1px 3px rgba(0, 0, 0, 0.05),
                              0 1px 2px rgba(0, 0, 0, 0.04);
  --color-card-shadow-hover:  0 6px 16px rgba(0, 0, 0, 0.10),
                              0 2px 6px rgba(0, 0, 0, 0.06);
  --color-header-bg:     #FFFFFF;
  --color-header-border: #E5E7EB;

  /* === Text (Black Tint) === */
  --color-text-primary:   #1D1D1B;
  --color-text-secondary: #4B5563;
  --color-text-tertiary:  #9CA3AF;
  --color-text-inverse:   #FFFFFF;

  /* === Semantic / 증감 (의미색) === */
  --color-positive: var(--bbtech-green);   /* 좋아짐 = Green */
  --color-danger:   #FF4D4F;               /* 나빠짐/위험 = Red */
  --color-warning:  #FAAD14;               /* 주의/보통 = Orange */
  --color-neutral:  #6B7280;               /* 중립 = Gray */
  --color-kpi:      var(--bbtech-dark-green); /* 카드 KPI 값 */
  /* ⭐ 초과·기준 미달 강조 전용 (order_page_rev_rule §1.1) — CLAUDE.md v10 "빨강 금지"의
     사용자 명시 지정 예외. ⛔ 하드코딩 금지 = var(--color-over) 만. ⛔ 일반 데이터 막대/라인 사용 금지.
     적용 = 기준 초과/미달 부분에만 (02 order 차트5 초과분·차트6 부족 갭 / 후속: settlement WD10 초과·tat 95% 미만). */
  --color-over:     #E5484D;

  /* === 기타 === */
  --icon-bg:       #E6F3EB;   /* 아이콘 원형 배경 (Green tint) */
  --color-icon:    var(--bbtech-dark-green);  /* 카드 lucide 아이콘 색 (라이트 Dark Green) */
  --color-dim-bg:  #F3F4F6;   /* 준비중 카드/배지 dimmed 배경 */
  --btn-bg:        #6B7280;
  --btn-bg-hover:  var(--bbtech-green);

  /* === Chart Series (chart_rule.md §2.1 BBTECH 팔레트) === */
  --chart-primary:    #14B446;   /* 기본 데이터 (BBTECH Green) */
  --chart-secondary:  #003C1E;   /* 강조/누적 (Dark Green) */
  --chart-tertiary:   #6B7280;   /* 보조 (Gray 60%) */
  --chart-quaternary: #9CA3AF;   /* 약한 보조 (Gray 40%) */
  --chart-grid:       #E5E7EB;   /* 그리드선 */
  --chart-text:       #4B5563;   /* 차트 범례/축/라벨 텍스트 (라이트) */
  /* Small Multiple(02 수주 Chart4) 세로막대 3단계 (오래된 → 최신) */
  --stc-bar-1:        #D1FAE5;
  --stc-bar-2:        #6EE7B7;
  --stc-bar-3:        #14B446;
  /* 카테고리 색 (chart_rule §2.2.1, §1.4 순서). 5개↑ 공종/수주구분 전용 */
  --cat-work-1:  #14B446;   /* BULK     Green */
  --cat-work-2:  #003C1E;   /* S-GAS    Dark Green */
  --cat-work-3:  #6EE7B7;   /* UPW      Mint */
  --cat-work-4:  #0E7490;   /* 진공배관  Teal */
  --cat-work-5:  #9CA3AF;   /* 연장/휴일 Gray (name-keyed: 연장/휴일 고정) */
  --cat-work-6:  #7C3AED;   /* CHEMICAL Purple (name-keyed: CHEMICAL·미등록 신규 공종) */
  --cat-safety-watch: #D9F3E1;   /* 2차사 안전감시자 (사용자 명시 색 예외 · 연한 민트) */
  --cat-order-1: #2563EB;   /* MAIN  파랑 */
  --cat-order-2: #14B446;   /* 보완  초록 */
  --cat-order-3: #F97316;   /* 철거  주황 */

  /* ⭐⭐ 실적 / 직전년도 비교선 (order_status_page_rev_rule §1.5 · 2026-08-14)
     CLAUDE.md v10 "파랑·빨강 금지" 의 ⭐ 사용자 명시 지정 예외 — chart_rule §2.1.1 에 등재.
     ⛔ 새 색 창작 0 — ⭐ 기존 토큰을 가리키는 ⭐ 별칭이다(hex 신규 없음).
       파랑 = --cat-order-1(#2563EB) · 빨강 = --color-danger(라이트 #FF4D4F / 다크 #FF6B6D)
     ⭐ 별칭으로 둔 이유 = 의미가 다르다(MAIN 수주구분 ≠ 실적선). 그 토큰이 바뀌어도 여기서 끊어 조정한다.
     ⭐ 적용 = 02 수주 현황 「월별 수주 건수/금액 추이 (SITE 별)」 2개 차트뿐. ⛔ 타 차트 사용 금지. */
  /* ⭐ 「공종별 생산성 추세 (3개년)」(06) 의 연도색 = 이 페이지 SITE별 막대 3개와 공유한다.
     ⭐ 06 은 productivity.js 안에 GREY="#BFBFBF" / GREEN="#14B446" 로 ⛔ hex 하드코딩돼 있다.
     ⭐ 여기서 ⭐ 같은 값을 토큰화한다(⛔ 신규 색 창작 0 — 기존 색의 토큰화).
       · prev2 = ⭐ n-2 연도(회색)  · prev = ⭐ n-1 연도(중간 초록 = --chart-primary 와 동일 #14B446)
       · n(진초록) = ⭐ 기존 --chart-year-current 를 그대로 쓴다
     ⭐ 라이트/다크 동일값 — ⭐ 06 이 테마 무관 고정색이라 ⭐ 그 화면과 정확히 같게 하려면 같아야 한다. */
  --chart-year-prev2: #BFBFBF;
  --chart-year-prev:  var(--chart-primary);
  --chart-actual: var(--cat-order-1);
  --chart-prev:   var(--color-danger);

  /* ⭐ SITE 구분 전용 팔레트 (order_page_rev_rule §8.4) — 최대 6 SITE 한눈에 구분.
     ⛔ 기존 --chart-primary~quaternary 무수정(타 차트 영향 방지) · 신규 토큰만 추가.
     ⛔ 금지색(빨강/주황/파랑) 없음 = BBTECH Green 계열 + 완전 무채색(C*=0)만.
       무채색은 a*=b*=0 순중성 → 회색의 파랑 캐스트 제거(#6B7280 계열은 파랑 ΔE 21로 근접했음).
     계열 순서는 라이트·다크 동일 → 테마 전환 시 같은 SITE 가 같은 계열 유지.
       1 Green vivid(브랜드) · 2 Dark Green · 3 무채색 밝음 · 4 무채색 어두움
       5 Green 연함 · 6 Green 중간(저채도)
     실측(CIEDE2000, 15쌍 전부): 라이트 최소 ΔE 22.8 / 인접 최소 29.8
                                다크  최소 ΔE 22.2 / 인접 최소 28.4  (기준 ΔE≥20) */
  --chart-site-1: #14B446;
  --chart-site-2: #003C1E;
  --chart-site-3: #A8A8A8;
  --chart-site-4: #505050;
  --chart-site-5: #B5E8CD;
  --chart-site-6: #54806E;
  /* ⭐ 진행중(기준) 연도 라인 — 06 Chart1·5 (라이트=사이드바 Dark Green 유지, 다크만 밝은 톤 보정) */
  --chart-year-current: #003C1E;

  /* === Sizes === */
  --sidebar-width:   220px;
  --header-height:   64px;
  --content-padding: 24px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* === Typography === */
  --font-sans: "LINE Seed KR", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
               "맑은 고딕", sans-serif;
}

/* ── 다크 테마 (라이트 → 다크 매핑) ───────────────────────────── */
:root[data-theme="dark"] {
  --color-bg:           #15171A;
  --color-card-bg:      #22252A;
  --color-card-border:  #33373E;
  --color-card-shadow:        0 1px 3px rgba(0, 0, 0, 0.45),
                              0 1px 2px rgba(0, 0, 0, 0.40);
  --color-card-shadow-hover:  0 6px 16px rgba(0, 0, 0, 0.55),
                              0 2px 6px rgba(0, 0, 0, 0.45);
  --color-header-bg:     #003C1E;   /* 헤더는 Dark Green 유지 */
  --color-header-border: rgba(255, 255, 255, 0.12);

  --color-text-primary:   #E5E7EB;
  --color-text-secondary: #9CA3AF;
  --color-text-tertiary:  #6B7280;
  --color-text-inverse:   #FFFFFF;

  /* 증감 의미색 — 어두운 배경 가독성 위해 약간 밝게 (의미 유지) */
  --color-positive: #2EC85F;
  --color-danger:   #FF6B6D;
  --color-warning:  #F5B544;
  --color-neutral:  #9CA3AF;
  --color-kpi:      #2EA855;   /* KPI = 밝은 Green (Dark Green은 다크 배경서 안 보임) */

  --icon-bg:       #1E2A22;    /* 어두운 Green tint */
  --color-icon:    #2EA855;    /* 카드 아이콘 = 밝은 Green (다크 배경 가독성) */
  --color-dim-bg:  #2A2D33;    /* 준비중 카드 dimmed (다크) */
  --btn-bg:        #4B5563;

  /* 차트 시리즈 — 다크 배경 가독성 위해 보정 (Dark Green은 다크서 안 보임) */
  --chart-primary:    #2EC85F;
  --chart-secondary:  #7FB89B;
  --chart-tertiary:   #9CA3AF;
  --chart-quaternary: #6B7280;
  --chart-grid:       #33373E;
  --chart-text:       #E5E7EB;   /* 차트 텍스트 — 다크 배경 가독성 (밝은 회색) */
  /* Small Multiple 세로막대 — 다크 대비 조정 (최신월 가장 밝게 = 강조 유지) */
  --stc-bar-1:        #2C6E4C;
  --stc-bar-2:        #37A86B;
  --stc-bar-3:        #4FE08A;
  /* 카테고리 색 — 다크 보정 (S-GAS Dark Green 등 검정처럼 안 보이게 밝게) */
  --cat-work-1:  #22C55E;   /* BULK     */
  --cat-work-2:  #16A34A;   /* S-GAS    (다크: 밝은 Green) */
  --cat-work-3:  #86EFAC;   /* UPW      */
  --cat-work-4:  #22D3EE;   /* 진공배관  (밝은 Teal) */
  --cat-work-5:  #CBD5E1;   /* 연장/휴일 (밝은 Gray, name-keyed 고정) */
  --cat-work-6:  #7C3AED;   /* CHEMICAL Purple (name-keyed) */
  --cat-safety-watch: #D9F3E1;   /* 2차사 안전감시자 (사용자 명시 색 예외 · 연한 민트) */
  --cat-order-1: #2563EB;   /* MAIN  */
  --cat-order-2: #14B446;   /* 보완  */
  --cat-order-3: #F97316;   /* 철거  */
  /* ⭐ SITE 구분 팔레트 — 다크 보정 (§8.4). 계열 순서는 라이트와 동일(같은 SITE = 같은 계열).
     실측: 15쌍 최소 ΔE 22.2 / 인접 최소 28.4 · 금지색 최근접 ΔE 28↑ */
  --chart-site-1: #2EC85F;
  --chart-site-2: #0C6806;
  --chart-site-3: #B6B6B6;
  --chart-site-4: #616161;
  --chart-site-5: #BAF5DC;
  --chart-site-6: #5A8B77;
  /* ⭐ 진행중(기준) 연도 라인 — 다크 보정(연한 Green, site-5 계열).
     실측(CIEDE2000): vs 2025 #14B446 ΔE 26.4 · vs 2024 #BFBFBF ΔE 21.8 ·
     카드배경 #22252A 대비 12.58:1 · 금지색 최근접 ΔE 38.3 (Dark Green #003C1E 은 다크서 불가시) */
  --chart-year-current: #BAF5DC;
}

/* ── 테마 토글 버튼 (Dark Green 헤더 위 공용) ───────────────────── */
.btn-theme {
  height: 32px; width: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-inverse);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn-theme:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}
.btn-theme svg { width: 17px; height: 17px; }