/* ─────────────────────────────────────────────────────────────
   테마 토큰
   라이트가 기본값(:root), 다크는 [data-theme="dark"] 로 오버라이드.
   ⚠ 색은 반드시 이 블록의 토큰을 거친다 — 규칙 본문/인라인 style/JS 에
     hex·rgba 를 직접 쓰면 다크모드에서 그 부분만 라이트로 남는다.
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* 브랜드 / 상태 */
  --primary:      #3b6fd4;
  --primary-lt:   #5588e8;
  --primary-dim:  #dce8fb;
  --primary-bg:   #f0f5ff;
  --teal:         #0ea5a0;
  --teal-bg:      #e6f7f6;
  --amber:        #d97706;
  --amber-bg:     #fef9ec;
  --rose:         #e04444;
  --rose-bg:      #fef2f2;
  --green:        #18a058;
  --green-bg:     #edfaf3;
  /* 확장 시맨틱 색 (대시보드 통계/배지 계열) */
  --purple:       #7c3aed;   /* 철회 */
  --purple-bg:    #f1ecfd;
  --blue-2:       #4470d8;   /* dstat.uri 계열 */
  --red-2:        #dc2626;   /* 금일 강조 */
  --orange-2:     #e09000;   /* dstat.domain 계열 */
  --green-2:      #16a34a;   /* 차단 */
  --rose-lt:      #f06060;
  --rose-border:  #fccaca;
  --green-lt:     #34d369;
  --green-border: #b3e8c9;
  /* 표면 / 경계 / 텍스트 */
  --surface:      #ffffff;   /* 카드(융기) */
  --surface-2:    #f8f9fc;   /* 페이지 바닥 + 함몰 영역(표 헤더·입력) */
  --surface-3:    #f0f2f7;   /* 칩/필드 채움 */
  --header-bg:    #ffffff;
  --iframe-bg:    #eaeef4;
  --border:       #e2e6f0;
  --border-lt:    #edf0f7;
  --text-1:       #1e2840;
  --text-2:       #4a5270;
  --text-3:       #8892aa;
  --on-accent:    #ffffff;   /* 컬러 버튼/배지 위 글자색 */
  /* 오버레이 / 툴팁 / 로그 콘솔 */
  --overlay:      rgba(20,30,70,.4);
  --tip-bg:       #1e2840;
  --tip-fg:       #ffffff;
  --log-bg:       #0f1722;
  --log-fg:       #a8c4e0;
  /* 그림자 */
  --shadow-xs:    0 1px 2px rgba(60,80,140,.06);
  --shadow-sm:    0 2px 8px rgba(60,80,140,.08), 0 0 0 1px rgba(60,80,140,.04);
  --shadow-md:    0 8px 24px rgba(60,80,140,.12), 0 0 0 1px rgba(60,80,140,.04);
  --shadow-lg:    0 20px 48px rgba(30,40,100,.16);
  --shadow-header: 0 1px 4px rgba(0,0,0,.08);
  --shadow-rail:   1px 0 3px rgba(0,0,0,.05);
  --shadow-tip:    0 8px 24px rgba(0,0,0,.28);
  --shadow-panel-hover: 0 8px 22px rgba(60,80,140,.12);
  /* 포커스링 / 글로우 (버튼 그림자·점 후광) */
  --focus-ring:     rgba(59,111,212,.12);
  --primary-glow:   rgba(59,111,212,.3);
  --primary-glow-hi:rgba(59,111,212,.4);
  --primary-wash:   rgba(59,111,212,.04);
  --rose-glow:      rgba(220,50,50,.25);
  --rose-glow-hi:   rgba(220,50,50,.35);
  --ring-primary: rgba(59,111,212,.15);
  --ring-amber:   rgba(217,119,6,.15);
  --ring-rose:    rgba(224,68,68,.15);
  --ring-green:   rgba(24,160,88,.15);
  --ring-teal:    rgba(14,165,160,.15);
  --lamp-green:   rgba(24,160,88,.5);
  --lamp-amber:   rgba(217,119,6,.5);
  --lamp-rose:    rgba(224,68,68,.5);
  /* 형태 / 타이포 / 모션 */
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --font:         'Pretendard', 'Noto Sans KR', sans-serif;
  --mono:         'JetBrains Mono', monospace;
  --transition:   all .18s cubic-bezier(.4,0,.2,1);
}

/* 다크: 색 토큰만 재정의 — 형태/타이포/모션 토큰은 상속 */
[data-theme="dark"] {
  color-scheme: dark;
  --primary:      #5b93f5;
  --primary-lt:   #7dabff;
  --primary-dim:  #2c4a80;
  --primary-bg:   #17253d;
  --teal:         #2dd4bf;
  --teal-bg:      #0f3330;
  --amber:        #f5a524;
  --amber-bg:     #3a2a0c;
  --rose:         #f87171;
  --rose-bg:      #3d1a1a;
  --green:        #3ecf7a;
  --green-bg:     #0f3322;
  --purple:       #a78bfa;
  --purple-bg:    #2b1f4d;
  --blue-2:       #6d9bff;
  --red-2:        #f26b6b;
  --orange-2:     #f0b13a;
  --green-2:      #4ade80;
  --rose-lt:      #fb8a8a;
  --rose-border:  #5c2626;
  --green-lt:     #5ee88f;
  --green-border: #1f5c3d;
  --surface:      #1a2130;
  --surface-2:    #121824;
  --surface-3:    #262f42;
  --header-bg:    #161d2b;
  --iframe-bg:    #121824;
  --border:       #2f3a4f;
  --border-lt:    #242d3e;
  --text-1:       #e8edf5;
  --text-2:       #b3bece;
  --text-3:       #8d9bb5;
  --on-accent:    #0b1220;   /* 밝은 컬러 버튼 위에는 어두운 글자가 대비가 높다 */
  --overlay:      rgba(0,0,0,.62);
  --tip-bg:       #e8edf5;   /* 툴팁은 반전 */
  --tip-fg:       #141b28;
  --log-bg:       #0a0f18;
  --log-fg:       #a8c4e0;
  --shadow-xs:    0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md:    0 8px 24px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-lg:    0 20px 48px rgba(0,0,0,.62);
  --shadow-header: 0 1px 4px rgba(0,0,0,.45);
  --shadow-rail:   1px 0 3px rgba(0,0,0,.40);
  --shadow-tip:    0 8px 24px rgba(0,0,0,.55);
  --shadow-panel-hover: 0 8px 22px rgba(0,0,0,.45);
  --focus-ring:     rgba(91,147,245,.25);
  --primary-glow:   rgba(91,147,245,.28);
  --primary-glow-hi:rgba(91,147,245,.42);
  --primary-wash:   rgba(91,147,245,.10);
  --rose-glow:      rgba(248,113,113,.22);
  --rose-glow-hi:   rgba(248,113,113,.34);
  --ring-primary: rgba(91,147,245,.25);
  --ring-amber:   rgba(245,165,36,.25);
  --ring-rose:    rgba(248,113,113,.25);
  --ring-green:   rgba(62,207,122,.25);
  --ring-teal:    rgba(45,212,191,.25);
  --lamp-green:   rgba(62,207,122,.55);
  --lamp-amber:   rgba(245,165,36,.55);
  --lamp-rose:    rgba(248,113,113,.55);
}

/* 인스턴스가 올린 커스텀 로고는 색을 알 수 없다 — 다크에서 어두운 로고가 묻히지 않도록
   옅은 판을 깐다. 클래스는 theme.js(applyBrandLogo)가 붙인다.
   기본 배너는 다크 전용 파일로 교체되므로 판이 필요 없다(= 이 클래스가 안 붙는다).
   메인 헤더(.header-banner)와 로그인 카드(.logo-banner) 양쪽에서 같은 규칙을 쓴다. */
[data-theme="dark"] .brand-logo-custom {
  background: rgba(255,255,255,.92);
  border-radius: 6px;
  padding: 2px 6px;
}