/*
 * ============================================================
 *  EIS Dashboard — 테마 설정 파일
 *  여기서 색상·폰트·그라데이션을 중앙 관리합니다.
 *
 *  ▶ 사용 방법
 *    1. 아래 :root 블록의 값만 수정하면 전체 화면에 반영됩니다.
 *    2. 각 화면별 오버라이드가 필요하면 하단 "화면별 테마"
 *       섹션에 추가하세요.
 *
 *  ▶ 현재 적용 테마 (WIA 브랜드)
 *    Primary   : #00287a  (딥 네이비)
 *    Secondary : #00a0c8  (시안 블루)
 *    Font      : Noto Sans KR
 * ============================================================
 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ============================================================
   전역 CSS 변수 (테마 토큰)
   ============================================================ */
:root {
  /* 폰트 */
  --font-base: 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', sans-serif;

  /* ── 브랜드 컬러 ── */
  --color-primary:        #0048d0;   /* 메인 (밝은 네이비) */
  --color-primary-light:  #2292ff;   /* 메인 밝은 버전   */
  --color-primary-dark:   #002298;   /* 메인 어두운 버전  */
  --color-secondary:      #00c8ec;   /* 서브 (시안 블루) */
  --color-secondary-light:#55ecff;   /* 서브 밝은 버전   */
  --color-secondary-dark: #007aa0;   /* 서브 어두운 버전  */

  /* ── 배경 ── */
  --bg-base:        #001845;
  --bg-glow-1:      rgba(0, 70, 200, 0.55);   /* primary 계열 글로우 */
  --bg-glow-2:      rgba(0, 210, 250, 0.22);  /* secondary 계열 글로우 */
  --bg-glow-3:      rgba(0, 35, 120, 0.65);   /* 하단 깊이감 */

  /* ── 텍스트 ── */
  --text-primary:    #f4fbff;    /* 주요 텍스트 */
  --text-secondary:  #bce8ff;    /* 부제목·레이블 */
  --text-muted:      #8ccce4;    /* 보조·단위 */
  --text-value:      #18eeff;    /* 수치 강조 */
  --text-time:       #72ddf8;    /* 시계 */

  /* ── 패널 ── */
  --panel-bg:        linear-gradient(145deg, rgba(0,65,175,0.58) 0%, rgba(0,18,72,0.82) 100%);
  --panel-border:    rgba(0, 195, 245, 0.45);
  --panel-shadow:    0 6px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(0,210,250,0.12);

  /* ── 패널 헤더 ── */
  --header-bg:       linear-gradient(90deg, rgba(0,65,175,0.72) 0%, rgba(0,22,85,0.20) 100%);
  --header-border:   rgba(0, 195, 245, 0.35);

  /* ── 인디케이터 줄 ── */
  --indicator-gradient: linear-gradient(180deg, #60f0ff, #00cce8, #004ad0);
  --indicator-glow:     0 0 16px rgba(0,220,255,1), 0 0 6px rgba(80,245,255,1);

  /* ── 게이지 바 ── */
  --gauge-wrap-bg:      rgba(0, 65, 175, 0.35);
  --gauge-wrap-border:  rgba(0, 195, 245, 0.28);
  --gauge-plan:         linear-gradient(0deg, #002298, #0048d0, #2292ff);
  --gauge-plan-glow:    0 -4px 14px rgba(0,95,230,0.75);
  --gauge-actual:       linear-gradient(0deg, #007aa0, #00c8ec, #55ecff);
  --gauge-actual-glow:  0 -4px 14px rgba(0,215,255,0.68);
  --gauge-bad:          linear-gradient(0deg, #6e0028, #cc1855, #ff3575);
  --gauge-bad-glow:     0 -4px 14px rgba(230,35,85,0.55);

  /* ── divider ── */
  --divider-color: rgba(0, 215, 255, 0.52);

  /* ── stat 섹션 ── */
  --stat-section-bg:     rgba(0, 60, 175, 0.35);
  --stat-section-border: rgba(0, 195, 245, 0.35);
  --stat-label-color:    #9cd4ec;
  --stat-label-bg:       rgba(0, 65, 175, 0.48);
  --stat-label-border:   rgba(0, 195, 245, 0.30);
  --stat-value-color:    #15eeff;
  --stat-value-bg:       rgba(0, 32, 138, 0.75);
  --stat-value-border:   rgba(0, 215, 255, 0.58);
  --stat-value-glow:     0 0 14px rgba(0,235,255,0.48);

  /* ── 증감 색상 ── */
  --color-up:           #ff5580;   /* 악화(초과) */
  --color-up-bg:        rgba(100, 0, 28, 0.45);
  --color-up-border:    rgba(255, 65, 105, 0.48);
  --color-up-glow:      0 0 12px rgba(255,75,100,0.35);
  --color-down:         #15eeff;   /* 개선(미달) */
  --color-down-bg:      rgba(0, 32, 138, 0.75);
  --color-down-border:  rgba(0, 215, 255, 0.58);
  --color-down-glow:    0 0 14px rgba(0,235,255,0.48);

  /* ── 진행 바 ── */
  --progress-bar: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-secondary-light));
  --progress-glow: 0 0 8px rgba(0,200,240,0.5);

  /* ── 상단 바 ── */
  --topbar-bg:            rgba(0, 5, 32, 0.98);
  --topbar-border:        rgba(0, 215, 255, 0.58);
  --topbar-shadow:        0 2px 28px rgba(0,0,0,0.75), 0 1px 0 rgba(0,215,255,0.18);
  --topbar-btn-bg:        rgba(0, 65, 175, 0.55);
  --topbar-btn-border:    rgba(0, 215, 255, 0.48);
  --topbar-btn-color:     #aadfff;
  --topbar-btn-hover-bg:  rgba(0, 195, 245, 0.32);

  /* ── 메뉴 드롭다운 ── */
  --menu-bg:          #001845;
  --menu-border:      rgba(0, 215, 255, 0.35);
  --menu-item-color:  #9cd4ec;
  --menu-active-color:#15eeff;

  /* ── 상태 LED (생산현황) ── */
  --led-ok-color:   #7fff7f;   --led-ok-core:   #1d6a00;   --led-ok-glow:   #3f3;
  --led-fail-color: #ff7f7f;   --led-fail-core: #9a0005;   --led-fail-glow: #f44;
  --led-stop-color: #ffb060;   --led-stop-core: #9a4000;   --led-stop-glow: #f80;
}


/* ============================================================
   화면별 테마 오버라이드 (필요 시 아래에 추가)
   예: #screen-ep { --color-primary: #2a007a; ... }
   ============================================================ */

/* (현재 전체 화면 동일 테마 적용) */