/* ==========================================================================
   theme.css — 어드민웹 디자인 시스템 토큰 (U-1 / Phase 0)
   --------------------------------------------------------------------------
   출처: shadcn/ui 디자인 언어(zinc 중성 팔레트) + Basecoat UI 발췌·경량화.
   정본 결정값 = docs/specs/UI-UPGRADE-ADMINWEB.md §3.

   ★ Phase 0 원칙 (§4 가드레일):
     - 본 파일은 "토큰 정의"만 한다. 기존 요소(body·.card·button·table 등)는
       index.html 인라인 <style>이 계속 지배한다 → 시각 회귀 0.
     - 컴포넌트 클래스(c-btn·c-card 등)는 Phase 2에서 이 파일에 추가한다.
     - 지금 실제로 토큰을 소비하는 것은 dev-tools 안 "스타일 가이드"(.sg-*) 데모뿐.
   ========================================================================== */

/* ── 폰트: Pretendard Variable (OFL / vendored / U-1 Phase 0) ──────────────
   한글 어드민 시각 품질 1순위. woff2 하나(가변축 45~920) + font-display:swap.
   실패 시 아래 --font-sans 폴백 스택으로 자연 강등. CDN 미인용 = /admin embed. */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("vendor/pretendard/PretendardVariable.woff2") format("woff2");
}

:root {
  /* ── 컬러: 중성 팔레트 (surface·border·text) ─────────────────────────── */
  --bg:            #f1f5f9;   /* 앱 배경 (기존 body 배경 유지) */
  --surface:       #ffffff;   /* 카드·패널 */
  --surface-muted: #f8fafc;   /* 옅은 표면 (표 헤더·hover 등) */
  --border:        #e2e8f0;   /* 기본 테두리 */
  --border-strong: #cbd5e1;   /* 입력칸·강조 테두리 */
  --text:          #1e293b;   /* 본문 (slate-800) */
  --text-muted:    #64748b;   /* 보조 (slate-500) */
  --text-subtle:   #94a3b8;   /* 더 옅은 (slate-400) */

  /* ── Primary: 기존 파랑 유지 → 토큰화 (§3 blue-500~600) ──────────────── */
  --primary:       #3b82f6;   /* blue-500 */
  --primary-hover: #2563eb;   /* blue-600 (기존 button 색) */
  --primary-fg:    #ffffff;
  --primary-bg:    #eff6ff;   /* 연한 배경 변형 */
  --row-hover:     #dbeafe;   /* 표 행 hover (blue-100 = surface-muted보다 뚜렷) */

  /* ── 상태색 (+ 각 -bg 연한 배경) (§3) ────────────────────────────────── */
  --success:    #16a34a;  --success-bg: #dcfce7;  --success-fg: #166534;
  --warning:    #d97706;  --warning-bg: #fef3c7;  --warning-fg: #92400e;
  --danger:     #dc2626;  --danger-bg:  #fee2e2;  --danger-fg:  #991b1b;
  --info:       #0ea5e9;  --info-bg:    #e0f2fe;  --info-fg:    #075985;
  --purple:     #7c3aed;  --purple-bg:  #f5f3ff;  --purple-fg:  #6d28d9;  /* 환전·VIP 등 보라 계열 (다크 반전 대비) */

  /* ── 여백: 4px 그리드 ─────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ── radius ───────────────────────────────────────────────────────────── */
  /* 버튼·입력·탭 등 작은 요소. 4px = PM 선호 (2026-08-08) — 6px는 36px 높이 버튼에서
     높이의 17%를 먹어 둥글게 읽혔다. 4/8/12 로 위계도 고르게 벌어진다. */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  /* ── 표 헤더 (2026-08-08 / 어드민 정합 = CLAUDE.md §6) ──────────────────
     라이트에서도 다크 밴드. 다크 블록에서 재정의하지 않는다 = 두 모드 같은 값 = 분기 0. */
  --table-head-bg:     #3b4d6b;
  --table-head-fg:     #f8fafc;
  --table-head-border: #2a3852;

  /* ── 그림자 2단 ──────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.08);

  /* ── 타이포 스케일: 12/13/14/16/20/28px ──────────────────────────────── */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 28px;

  /* ── 폰트 스택 (Pretendard 우선 + 기존 폴백 유지) ────────────────────── */
  --font-sans: "Pretendard Variable", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Noto Sans KR", sans-serif;

  /* ── 셸(헤더·사이드바) 토큰 — ★ 딥 네이비 크롬 (2026-07-13 사용자 결정 / 팔레트 2안)
     라이트 콘텐츠 + 다크 네이비 크롬 하이브리드 채택 — 구 "하이브리드 회피"(2026-07-10) 결정을
     사용자가 명시로 뒤집음. 셸은 라이트/다크 테마 모두 네이비(다크 블록은 한 단 더 깊게)로
     일관 유지 → 테마 전환 시 콘텐츠만 반전. */
  --sidebar-width:      224px;
  --header-bg:          #101b31;   /* 딥 네이비 — 파트너 콘솔 구분(어드민=초록) */
  --header-fg:          #e8edf6;
  --header-border:      #1f2b44;
  --header-muted:       #8b99b5;
  --hbadge-border:      #3d4f73;   /* (파트너웹 미사용 / 네이비 정합값 유지) */
  --hbadge-fg:          #9fb0c9;
  --hbadge-hover-bg:    #1b2740;
  --sidebar-bg:         #0c1526;   /* 딥 네이비 (헤더보다 한 단 깊게) */
  --sidebar-border:     #1f2b44;
  --sidebar-fg:         #b7c3d8;   /* 메뉴 텍스트 */
  --sidebar-muted:      #76839f;   /* 섹션·서브 idle */
  --sidebar-section-fg: #dbe3f0;   /* 섹션 제목 (밝은 슬레이트) */
  --sidebar-hover-bg:   #16233d;
  --sidebar-hover-fg:   #ffffff;
  --sidebar-active-bg:  #1c2c4e;
  --sidebar-active-fg:  #93b4ff;
  --sidebar-icon:       #5e6f92;   /* idle 아이콘 (muted) */
  --sidebar-icon-active:#93b4ff;
}

/* Pretendard 적용: theme.css가 인라인 <style> 뒤에 로드 → body font-family만 덮어씀
   (margin·background 등 나머지 body 속성은 인라인 유지). 폰트 실패 시 폴백 스택. */
body { font-family: var(--font-sans); }

/* ==========================================================================
   아이콘 헬퍼 (Lucide 스프라이트 / U-1 Phase 0)
   사용: <svg class="icon"><use href="/admin/vendor/icons.svg#i-search"></use></svg>
   currentColor 상속 → 텍스트 색 따라감. 크기는 font-size 기준(1em).
   -------------------------------------------------------------------------- */
.icon {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -0.18em;
  flex-shrink: 0; stroke-width: 2; color: inherit;
}
.icon-sm { width: 1em; height: 1em; }
.icon-lg { width: 1.4em; height: 1.4em; }

/* ==========================================================================
   스타일 가이드 데모 (dev-tools 안 #style-guide 전용)
   -------------------------------------------------------------------------- */
.sg-section { margin-top: var(--sp-5); }
.sg-section > h3 {
  font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600;
  margin: 0 0 var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em;
}
/* 컴포넌트 데모 배치 (Phase 2) */
.sg-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sg-row + .sg-row { margin-top: 10px; }

/* 색 스와치 */
.sg-swatches {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.sg-swatch { width: 120px; }
.sg-swatch-chip {
  height: 52px; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.sg-swatch-label {
  font-size: var(--fs-xs); color: var(--text-muted);
  margin-top: var(--sp-1); font-variant-numeric: tabular-nums;
}

/* radius / shadow / spacing 데모 박스 */
.sg-boxes { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; }
.sg-box {
  width: 80px; height: 56px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-xs); color: var(--text-muted);
}
.sg-box--r-sm { border-radius: var(--radius-sm); }
.sg-box--r    { border-radius: var(--radius); }
.sg-box--r-lg { border-radius: var(--radius-lg); }
.sg-box--sh-sm { border-radius: var(--radius); box-shadow: var(--shadow-sm); border-color: transparent; }
.sg-box--sh    { border-radius: var(--radius); box-shadow: var(--shadow); border-color: transparent; }

/* spacing 눈금 */
.sg-spaces { display: flex; align-items: flex-end; gap: var(--sp-3); }
.sg-space { text-align: center; }
.sg-space-bar { background: var(--primary); border-radius: 2px; width: 16px; }
.sg-space-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); }

/* 아이콘 스프라이트 데모 */
.sg-icons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-2);
}
.sg-icon {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-size: var(--fs-xs);
}
.sg-icon .icon { width: 22px; height: 22px; color: var(--primary); }
.sg-icon span { color: var(--text-muted); }

/* 타이포 스케일 데모 */
.sg-type { display: flex; flex-direction: column; gap: var(--sp-1); }
.sg-type-row { color: var(--text); font-variant-numeric: tabular-nums; }
.sg-type-row span { color: var(--text-subtle); font-size: var(--fs-xs); margin-left: var(--sp-2); }
.sg-t-xs  { font-size: var(--fs-xs); }
.sg-t-sm  { font-size: var(--fs-sm); }
.sg-t-md  { font-size: var(--fs-md); }
.sg-t-lg  { font-size: var(--fs-lg); }
.sg-t-xl  { font-size: var(--fs-xl); }
.sg-t-2xl { font-size: var(--fs-2xl); font-weight: 700; }

/* ==========================================================================
   셸: 헤더 · 사이드바 (U-1 Phase 1 / 라이트)
   theme.css가 인라인 <style> 뒤에 로드 → 아래 규칙이 인라인 셸(다크) 기본값을 덮어씀.
   라이트 크롬 = 다크모드 대비 + Lucide 아이콘 배선 + active/hover 토큰화.
   DOM(id·data-page·라벨) 무변경 — 아이콘은 <li> 첫 자식으로만 추가.
   -------------------------------------------------------------------------- */

/* 폭 224px + 라이트 사이드바(우측 경계선) */
#sidebar      { width: var(--sidebar-width); background: var(--sidebar-bg);
                border-right: 1px solid var(--sidebar-border); }
#main-content { margin-left: var(--sidebar-width); }

/* ── 라이트 헤더(하단 경계선) + 다크전제 콘텐츠 색 재조정 ─────────────── */
#top-header  { background: var(--header-bg); color: var(--header-fg);
               border-bottom: 1px solid var(--header-border); }
#header-logo { color: var(--header-fg); }
#who         { color: var(--header-muted); }
#notify-sound-label { color: var(--header-fg); }
#header-holdings .hhold-kv   { color: var(--header-muted); }
#header-holdings .hhold-kv b { color: var(--text); }
#header-vendor { border-left-color: var(--border); }
#header-vendor .hv-tag        { color: var(--header-muted); }
#header-vendor .hv-row b      { color: #059669; }            /* 잔액 = 진한 초록 */
#header-vendor .hv-row b.hv-off { color: var(--danger); }
/* 헤더 배지 = 라이트 칩 (다크 #374151 전제 덮어씀) */
/* 헤더 배지 = 아웃라인(투명 배경) / 0건(severity-NORMAL)=색 없이 muted, ≥1(WARN/HIGH)=테두리·글자 색 */
#top-header .hbadge { background: transparent; border-color: var(--hbadge-border); color: var(--hbadge-fg); }
#top-header .hbadge:hover { background: var(--hbadge-hover-bg); }
#top-header .hbadge.severity-WARN { border-color: #d97706; color: #b45309; }
#top-header .hbadge.severity-HIGH { border-color: var(--danger); color: var(--danger); }

/* 값 표시(표 레벨·상태 등 / 색은 --pill 커스텀 속성) — 실제 버튼(지급/회수·하부생성)과 혼동 방지:
   테두리·배경 없이 색 텍스트만 (라이트·다크 공통). */
.val-pill {
  font-weight: 600; white-space: nowrap;
  color: var(--pill, var(--text-muted));
}

/* ── 사이드바 메뉴 색·아이콘 ─────────────────────────────────────────── */
#sidebar .menu-item    { color: var(--sidebar-fg); gap: 10px; }
#sidebar .menu-section { color: var(--sidebar-section-fg); gap: 8px; font-weight: 600; }
#sidebar .menu-item:hover,
#sidebar .menu-section:hover,
#sidebar .menu-section.open { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-fg); }
#sidebar .menu-item.active  { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg);
                              border-left-color: var(--sidebar-active-fg); font-weight: 600; } /* 네이비 셸 = 좌측바도 라이트블루 */
#sidebar .submenu { background: transparent; }

/* 섹션 제목이 공간을 채우고 화살표는 우측 정렬 (아이콘 | 제목 | ▶) */
#sidebar .menu-section > span:not(.menu-arrow) { flex: 1; }
#sidebar .menu-arrow { color: var(--sidebar-muted); }

/* 사이드바 아이콘 (menu-item·menu-section 첫 자식) */
#sidebar .menu-item > .icon,
#sidebar .menu-section > .icon {
  width: 17px; height: 17px; color: var(--sidebar-icon);
  transition: color 0.12s;
}
#sidebar .menu-item:hover > .icon,
#sidebar .menu-section:hover > .icon { color: var(--sidebar-active-fg); }
#sidebar .menu-item.active > .icon   { color: var(--sidebar-icon-active); }

/* 서브메뉴 = 아이콘 대신 들여쓰기 유지, 섹션 제목선에 맞춰 정렬 보정 */
#sidebar .submenu-item { color: var(--sidebar-muted); padding-left: 45px; }
#sidebar .submenu-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-fg); }
#sidebar .submenu-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg);
                                border-left-color: var(--sidebar-active-fg); }

/* ── 헤더 아이콘 버튼 (사이드바 토글 등 / 전역 button 파랑 override) ──── */
.hicon-btn {
  background: transparent; border: none; padding: 6px; margin-right: 2px;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--header-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.hicon-btn:hover { background: var(--surface-muted); color: var(--header-fg); }
.hicon-btn .icon { width: 20px; height: 20px; }

/* ── 헤더 설정 드롭다운 (톱니 → 계정·알림음·다크모드·로그아웃 / U-1 Phase 5 후속) ── */
#settings-menu { position: relative; display: inline-flex; }
#settings-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 210px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
#settings-dropdown[hidden] { display: none; }
#settings-account { padding: 8px 10px 6px; font-size: var(--fs-sm); color: var(--text-muted); }
#settings-account #who { color: var(--text); font-weight: 600; font-size: var(--fs-md); }
.settings-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.settings-item {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  padding: 10px 10px; border-radius: var(--radius-sm); font-size: var(--fs-md);
  color: var(--text); background: transparent; border: none; cursor: pointer;
  text-align: left; font-family: inherit; line-height: 1.2;
}
button.settings-item:hover, label.settings-item:hover { background: var(--surface-muted); }
.settings-item .icon { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
.settings-toggle { justify-content: space-between; }
.settings-toggle > span { display: inline-flex; align-items: center; gap: 9px; }
.settings-toggle input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; margin: 0; }

/* ── 사이드바 접기 모드 (아이콘만 60px / U-1 Phase 1-B) ───────────────── */
html.sidebar-collapsed #sidebar      { width: 60px; }
html.sidebar-collapsed #main-content { margin-left: 60px; }
/* 라벨(텍스트노드·span)은 font-size:0로 숨김, 아이콘은 px 고정이라 유지 */
html.sidebar-collapsed #sidebar .menu-item,
html.sidebar-collapsed #sidebar .menu-section {
  justify-content: center; padding-left: 0; padding-right: 0; font-size: 0; gap: 0;
}
/* 섹션 제목 span은 flex:1이라 font-size:0만으론 공간을 계속 먹어 아이콘이 좌측으로 밀림
   → display:none으로 flex 흐름에서 제거해야 top-level 아이콘과 세로선이 정렬됨. */
html.sidebar-collapsed #sidebar .menu-section > span:not(.menu-arrow),
html.sidebar-collapsed #sidebar .menu-arrow,
html.sidebar-collapsed #sidebar .submenu,
html.sidebar-collapsed #sidebar .sidebar-badge { display: none !important; }

/* ── 서브메뉴 전체 펼침/닫힘 버튼 (U-1 Phase 5 후속 / 사이드바 상단) ──────── */
#sidebar-tools { padding: 8px 12px 4px; }
#sidebar-expand-all {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: transparent; border: 1px solid var(--sidebar-border);
  color: var(--sidebar-muted); border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: var(--fs-xs); font-weight: 500; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#sidebar-expand-all:hover {
  background: var(--sidebar-hover-bg); color: var(--sidebar-hover-fg); border-color: var(--sidebar-active-fg);
}
#sidebar-expand-all .icon { width: 14px; height: 14px; color: var(--sidebar-icon); }
#sidebar-expand-all:hover .icon { color: var(--sidebar-active-fg); }
/* 접기 모드(60px)에선 전체 펼침 버튼 숨김 */
html.sidebar-collapsed #sidebar-tools { display: none; }

/* ==========================================================================
   로그인 카드 (U-1 Phase 1-C)
   -------------------------------------------------------------------------- */
#login-overlay { background: var(--bg); }
#login-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 32px 28px;
  width: 380px; box-shadow: var(--shadow);
}
#login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
#login-brand .icon { width: 26px; height: 26px; color: var(--primary); }
#login-box h1 { margin: 0; font-size: var(--fs-xl); color: var(--text); font-weight: 700; }
#login-subtitle { margin: 0 0 22px; color: var(--text-muted); font-size: var(--fs-sm); }
#login-form { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
#login-form label { font-size: var(--fs-sm); color: var(--text-muted); gap: 6px; }
#login-form input {
  padding: 9px 11px; font-size: var(--fs-md); width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
#login-form input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg);
}
#login-form button[type="submit"] {
  margin-top: 6px; width: 100%; padding: 10px; font-size: var(--fs-md); font-weight: 600;
  background: var(--primary); border-radius: var(--radius-sm);
}
#login-form button[type="submit"]:hover { background: var(--primary-hover); }
#login-msg { margin-top: 14px; text-align: center; }

/* ==========================================================================
   공통 컴포넌트 클래스 (U-1 Phase 2 / c- 접두사)
   ★ 정의만 — 실제 페이지 적용은 Phase 3. 기존 인라인 스타일과 충돌 없이 공존.
   데모 = dev-tools 스타일 가이드 #style-guide.
   -------------------------------------------------------------------------- */

/* ── c-btn ─────────────────────────────────────────────────────────────── */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.c-btn:disabled, .c-btn.is-loading { opacity: 0.6; cursor: not-allowed; }
.c-btn .icon { width: 15px; height: 15px; }
.c-btn--primary   { background: var(--primary); color: var(--primary-fg); }
.c-btn--primary:hover:not(:disabled)   { background: var(--primary-hover); }
.c-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.c-btn--secondary:hover:not(:disabled) { background: var(--surface-muted); }
.c-btn--ghost     { background: transparent; color: var(--text-muted); }
.c-btn--ghost:hover:not(:disabled)     { background: var(--surface-muted); color: var(--text); }
.c-btn--danger    { background: var(--danger); color: #fff; }
.c-btn--danger:hover:not(:disabled)    { background: #b91c1c; }
.c-btn--sm { padding: 5px 10px; font-size: var(--fs-xs); }
.c-btn--md { padding: 8px 14px; }
.c-btn.is-loading::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: c-spin 0.6s linear infinite;
}
@keyframes c-spin { to { transform: rotate(360deg); } }

/* 로딩 표시 (공용) — 표·패널이 채워지기 전 자리. 어드민웹 theme.css .c-table-loading과 동일 정의.
   글자만 두면 "눌렸는지 / 조회가 된 건지"를 값 변화로만 판단해야 한다 (2026-07-27 사용자 지적). */
/* ★ 지연 표시: 첫 150ms는 투명 (2026-07-27 / 어드민웹과 동일).
   빠른 조회는 보이기 전에 결과로 덮어써져 깜빡임이 없고, 느릴 때만 저절로 드러난다.
   JS 타이머가 아니라 CSS인 이유 = 결과 0건이면 호출부가 빈 문자열을 쓰는데, 표가 이미 비어 있으면
   DOM 변경이 0건이라 "그려졌음"을 감지할 수 없어 스피너가 갇힌다(실제 사고). */
.c-table-loading { text-align: center; padding: 22px 0; color: var(--text-muted); font-size: 13px;
  opacity: 0; animation: c-loading-appear 120ms linear 150ms forwards; }
@keyframes c-loading-appear { to { opacity: 1; } }
.c-table-loading::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
  animation: c-spin 0.6s linear infinite;
}

/* ── c-input / c-select / c-check / c-toggle ──────────────────────────── */
.c-field { display: flex; flex-direction: column; gap: 5px; }
.c-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.c-hint  { font-size: var(--fs-xs); color: var(--text-subtle); }
.c-input, .c-select {
  font-family: inherit; font-size: var(--fs-md); color: var(--text);
  padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); width: 100%;
}
.c-input:focus, .c-select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg);
}
.c-input[aria-invalid="true"], .c-select[aria-invalid="true"] { border-color: var(--danger); }
.c-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-bg); }
.c-input::placeholder { color: var(--text-subtle); }
.c-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.c-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.c-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.c-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-toggle-track {
  width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong);
  transition: background 0.15s; position: relative; flex-shrink: 0;
}
.c-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.15s;
}
.c-toggle input:checked + .c-toggle-track { background: var(--primary); }
.c-toggle input:checked + .c-toggle-track::after { transform: translateX(16px); }
.c-toggle input:focus-visible + .c-toggle-track { box-shadow: 0 0 0 3px var(--primary-bg); }

/* ── c-card ────────────────────────────────────────────────────────────── */
.c-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.c-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.c-card__title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin: 0; }
.c-card__body { padding: 16px; }
.c-card__footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ── c-table (sticky header · zebra · hover · 숫자 우측 · 밀도) ──────────── */
.c-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.c-table th, .c-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.c-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--table-head-bg);
  color: var(--table-head-fg); font-weight: 600; white-space: nowrap;
}
.c-table tbody tr:hover td { background: var(--surface-muted); }
.c-table--zebra tbody tr:nth-child(even) td { background: var(--surface-muted); }
.c-table .num, .c-table td.num, .c-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.c-table--dense th, .c-table--dense td { padding: 5px 8px; }

/* ── c-modal (기존 .modal-overlay open/close JS 위에 스킨) ─────────────── */
.c-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); max-width: 90vw; }
.c-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.c-modal__title { font-size: var(--fs-lg); font-weight: 600; margin: 0; color: var(--text); }
.c-modal__body { padding: 20px; }
.c-modal__footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.c-modal__close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); display: inline-flex; }
.c-modal__close:hover { background: var(--surface-muted); color: var(--text); }

/* ── c-toast (기존 global-toast 패턴 스킨) ────────────────────────────── */
.c-toast { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: var(--fs-sm); background: var(--text); color: #fff; }
.c-toast--ok   { background: var(--success); }
.c-toast--err  { background: var(--danger); }
.c-toast--info { background: var(--info); }

/* ── c-badge (상태 pill) ──────────────────────────────────────────────── */
.c-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; }
.c-badge--success { background: var(--success-bg); color: var(--success-fg); }
.c-badge--warning { background: var(--warning-bg); color: var(--warning-fg); }
.c-badge--danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.c-badge--info    { background: var(--info-bg);    color: var(--info-fg); }
.c-badge--neutral { background: var(--surface-muted); color: var(--text-muted); }

/* ── c-tabs ────────────────────────────────────────────────────────────── */
.c-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.c-tab { padding: 8px 14px; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.c-tab:hover { color: var(--text); }
.c-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ── c-pagination ─────────────────────────────────────────────────────── */
.c-pagination { display: inline-flex; align-items: center; gap: 4px; }
.c-page-btn { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); }
.c-page-btn:hover:not(:disabled) { background: var(--surface-muted); }
.c-page-btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.c-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── c-empty / c-skeleton ─────────────────────────────────────────────── */
.c-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: var(--text-muted); text-align: center; }
.c-empty .icon { width: 30px; height: 30px; color: var(--text-subtle); }
.c-empty__text { font-size: var(--fs-sm); }
.c-skeleton { height: 14px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border) 37%, var(--surface-muted) 63%); background-size: 400% 100%; animation: c-shimmer 1.4s ease infinite; }
@keyframes c-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── c-filter-bar (조회조건 공통 레이아웃) ────────────────────────────── */
.c-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* ==========================================================================
   Phase 3: base 요소 토큰 리트로핏 (43페이지 공용 button·card·input·table 일괄)
   ★ 기존 인라인 <style> 뒤 로드 → 색·radius·focus만 토큰화. 크기(padding·font-size)는
   유지 = 레이아웃 reflow 0. 페이지 DOM·id·라벨 전부 무변경 → 전 페이지 동시 현대화.
   -------------------------------------------------------------------------- */

/* 버튼 — c-btn--primary와 색 일치 (크기는 기존 유지 = 표 셀 등 reflow 방지) */
button { background: var(--primary); border-radius: var(--radius-sm); }
button:hover { background: var(--primary-hover); }
button.danger { background: var(--danger); }
button.danger:hover { background: #b91c1c; }
/* ghost = 아웃라인 secondary (흰 배경 + 뚜렷한 테두리 = 버튼임이 분명 / 너무 옅음 수정) */
button.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
button.ghost:hover { background: var(--surface-muted); border-color: var(--text-subtle); }

/* 표 인라인 액션 버튼 색상 (지급/회수·하부생성 등 / 색은 --btn-fill(라이트)·--btn-line(다크)) —
   라이트=채움 버튼 / 다크=아웃라인(테두리·글자색). 실제 버튼임을 유지하면서 색 구분. */
button.btn-tinted {
  background: var(--btn-fill, var(--primary)); color: #fff;
  border: 1px solid var(--btn-fill, var(--primary));
}
button.btn-tinted:hover { filter: brightness(1.08); }
html.theme-dark button.btn-tinted {
  background: transparent; color: var(--btn-line, var(--primary));
  border-color: var(--btn-line, var(--primary));
}
html.theme-dark button.btn-tinted:hover { filter: none; background: var(--surface-muted); }
.tabs button { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.tabs button:hover { background: var(--surface-muted); }
.tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 카드 */
.card { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow-sm); }

/* 폼 입력 — focus ring + radius 토큰 + ★ 전역 여백·폰트 (form 밖 div 필터까지 도달 / 2026-07-11 여백·폰트 확대)
   텍스트류만 / 체크박스·토글 제외. 인라인 style 패딩은 index.html에서 함께 상향(인라인 우선). */
form input, form select,
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="email"],
select, textarea {
  /* ★ border-color만 주면 form 밖 인풋은 브라우저 기본 border-style:inset(입체 베벨) 유지 →
     다크에서 '그림자 박스'로 보임. 전체 shorthand로 flat 1px 지정해 베벨 제거 (2026-07-11). */
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  padding: 7px 10px; font-size: var(--fs-md);
  /* ★ 오버플로우 방지 (2026-07-18): 그리드/플렉스 셀이 좁아져도 컨트롤이 카드 테두리를 뚫지 않게.
     min-width:0 = 그리드/플렉스 자식의 기본 min-width:auto(내용 폭) 해제 → 셀과 함께 축소 허용. */
  box-sizing: border-box; max-width: 100%; min-width: 0;
}
form input:focus, form select:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus,
input[type="time"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg);
}

/* 표 — 색만 토큰화 (padding·font-size 유지 = 밀도 보존) */
th { background: var(--surface-muted); color: var(--text-muted); }
/* ★ thead 안쪽만 다크 밴드 — 행 라벨 th(.pd-fields 등)는 클래스 특이도로 종전 유지. */
thead th {
  color-scheme: dark;
  background: var(--table-head-bg);
  color: var(--table-head-fg);
  border-color: var(--table-head-border);
  font-weight: 600;
}
th, td { border-color: var(--border); }

/* 페이지 제목·힌트·모달 경계 */
.page-title { color: var(--text); border-bottom-color: var(--border); }
.hint { color: var(--text-muted); }
.modal-box { box-shadow: var(--shadow); border: 1px solid var(--border); }
.modal-header { border-bottom-color: var(--border); }

/* 대시보드 상단 배지 */
.badge { border-radius: var(--radius-sm); border-color: var(--border-strong); }
.badge:hover { border-color: var(--primary); background: var(--primary-bg); }

/* ==========================================================================
   Ctrl+K 커맨드 팔레트 (U-1 Phase 4-A)
   -------------------------------------------------------------------------- */
#cmdk-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15, 23, 42, 0.4);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
#cmdk-overlay[hidden] { display: none; }
#cmdk-box { width: 540px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
#cmdk-input { width: 100%; padding: 15px 18px; border: none; border-bottom: 1px solid var(--border);
  font-family: inherit; font-size: var(--fs-lg); color: var(--text); outline: none; background: var(--surface); }
#cmdk-input::placeholder { color: var(--text-subtle); font-size: var(--fs-sm); }
#cmdk-list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.cmdk-item { padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm);
  color: var(--text); display: flex; align-items: center; gap: 8px; }
.cmdk-item.is-active { background: var(--primary-bg); color: var(--primary-hover); }
.cmdk-empty { padding: 16px 18px; color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }

/* ==========================================================================
   U-1 Phase 5 — 다크모드 (토큰 값 반전 + 인라인 하드코딩 표면 다크 전용 오버라이드)
   --------------------------------------------------------------------------
   설계: 라이트 테마는 한 바이트도 건드리지 않는다(회귀 0 보장).
     (1) html.theme-dark 에서 :root 토큰값만 반전 → 토큰을 소비하는 모든 스타일
         (Phase 1~4 셸·c- 컴포넌트·Phase 3 base 리트로핏·login·cmdk)이 자동으로 뒤집힌다.
     (2) index.html 인라인 <style>이 아직 하드코딩(#fff·#f8fafc·#1f2937 등)으로 남긴
         표면·텍스트·상태칩은 html.theme-dark 접두 셀렉터로 다크값만 덧입힌다(라이트엔 무영향).
   토글: 헤더 #theme-toggle 버튼 + <head> 부팅 스크립트가 첫 페인트에 클래스 선반영.
   ========================================================================== */

/* 네이티브 폼컨트롤·스크롤바·date picker가 테마를 따라가도록 */
:root { color-scheme: light; }

/* ── (1) 토큰 값 반전 ─────────────────────────────────────────────────── */
html.theme-dark {
  color-scheme: dark;

  --bg:            #0b1220;   /* 앱 배경 (near slate-950) */
  --surface:       #131c2e;   /* 카드·패널 (배경보다 한 단 밝게) */
  --surface-muted: #1c2740;   /* 표 헤더·hover */
  --border:        #2a3852;
  --border-strong: #3b4d6b;
  --text:          #e6edf6;
  --text-muted:    #9fb0c9;
  --text-subtle:   #6b7d99;

  --primary:       #3b82f6;
  --primary-hover: #60a5fa;   /* 다크에선 hover가 밝아지는 방향 */
  --primary-fg:    #ffffff;
  --primary-bg:    #17233d;   /* active/focus 다크 파랑 틴트 */
  --row-hover:     #26375a;   /* 표 행 hover (surface보다 확실히 밝은 파랑 틴트) */

  --success: #22c55e;  --success-bg: #123020;  --success-fg: #86efac;
  --warning: #f59e0b;  --warning-bg: #35280c;  --warning-fg: #fcd34d;
  --danger:  #ef4444;  --danger-bg:  #3a1a1c;  --danger-fg:  #fca5a5;
  --info:    #38bdf8;  --info-bg:    #0d2a3d;  --info-fg:    #7dd3fc;
  --purple:  #a78bfa;  --purple-bg:  #241a3d;  --purple-fg:  #c4b5fd;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:    0 6px 20px rgba(0, 0, 0, 0.6);

  /* 셸(헤더·사이드바) — 딥 네이비 크롬 연속(2026-07-13 팔레트 2안 / 라이트 셸보다 한 단 깊게 = 콘텐츠 다크와 톤 정합) */
  --header-bg:          #0d1626;
  --header-fg:          #e8edf6;
  --header-border:      #1d2940;
  --header-muted:       #8b99b5;
  --hbadge-border:      var(--border);        /* 다크 = 기존 유지 */
  --hbadge-fg:          var(--text-muted);    /* 다크 = 기존 유지 */
  --hbadge-hover-bg:    var(--surface-muted); /* 다크 = 기존 유지 */
  --sidebar-bg:         #0a1220;
  --sidebar-border:     #1d2940;
  --sidebar-fg:         #b7c3d8;
  --sidebar-muted:      #76839f;
  --sidebar-section-fg: #e6edf6;
  --sidebar-hover-bg:   #16233d;
  --sidebar-hover-fg:   #ffffff;
  --sidebar-active-bg:  #1a2a4a;
  --sidebar-active-fg:  #93b4ff;
  --sidebar-icon:       #5e6f92;
  --sidebar-icon-active:#93b4ff;
}

/* ── (2) 인라인 하드코딩 표면·텍스트 다크 오버라이드 ────────────────────── */

/* 앱 캔버스 + 기본 텍스트 */
html.theme-dark body { background: var(--bg); color: var(--text); }

/* 카드 / 패널 / 모달 표면 */
html.theme-dark .card            { background: var(--surface); }
html.theme-dark .card h2         { color: var(--text); border-bottom-color: var(--border); }
html.theme-dark .card h3         { color: var(--text-muted); }
html.theme-dark .modal-box       { background: var(--surface); }
html.theme-dark .modal-info-bar  { border-bottom-color: var(--border); }
html.theme-dark .modal-tabs-nav  { border-bottom-color: var(--border); }
html.theme-dark .modal-header h3 { color: var(--text); }
html.theme-dark .block-panel     { background: var(--surface-muted); border-color: var(--border); }

/* 폼 입력 (인라인 base = 브라우저 흰 배경 → 다크 표면 + 밝은 글자) */
html.theme-dark form input, html.theme-dark form select, html.theme-dark textarea,
html.theme-dark input[type="text"], html.theme-dark input[type="password"],
html.theme-dark input[type="number"], html.theme-dark input[type="search"],
html.theme-dark input[type="date"], html.theme-dark input[type="datetime-local"],
html.theme-dark input[type="time"], html.theme-dark input[type="email"], html.theme-dark select {
  /* 표면보다 한 단 밝게 = 필드 경계가 또렷 → 카드 위 인풋이 '그림자 박스'로 보이던 문제 해소 */
  background: var(--surface-muted); color: var(--text);
}
html.theme-dark form label { color: var(--text-muted); }

/* 헤더 잔재 하드코딩색 (theme.css 셸 규칙이 특정 hex로 지정한 것) */
html.theme-dark #header-vendor .hv-row b        { color: #34d399; }   /* 벤더 잔액 = 밝은 초록 */
html.theme-dark #top-header .hbadge.severity-WARN { border-color: var(--warning); color: var(--warning-fg); }
html.theme-dark #top-header .hbadge.severity-HIGH { border-color: var(--danger);  color: var(--danger-fg); }

/* 표: 클릭행 hover + 베팅·롤링 sticky 표(br-table) + 일별통계 */
html.theme-dark tr.clickable:hover           { background: var(--primary-bg); }
html.theme-dark .br-table                    { border-top-color: var(--border); border-left-color: var(--border); }
html.theme-dark .br-table .br-sum            { border-top-color: var(--border); }
html.theme-dark .br-table thead th           { background: var(--table-head-bg); }
html.theme-dark .br-table .br-name           { background: var(--surface); }
html.theme-dark .br-table thead th.br-name   { background: var(--table-head-bg); }
html.theme-dark .br-table tr.br-total td,
html.theme-dark .br-table tr.br-total td.br-name { background: var(--primary-bg); }
/* 정산 매트릭스 행 hover — 다크에서 sticky 이름 열도 함께 강조 (라이트는 index.html 공통 규칙이 커버) */
html.theme-dark .br-table tbody tr:hover td,
html.theme-dark .br-table tbody tr:hover td.br-name { background: var(--row-hover); }
html.theme-dark .rd-type-table tr.rd-type-casino td { border-bottom-color: var(--border-strong); }

/* 대시보드 배지(상단) — 옅은 표면 칩 */
html.theme-dark .badge { background: var(--surface-muted); }

/* 상태 배지 (block-panel 등 / 의미색은 -bg·-fg 토큰으로 자동 반전) */
html.theme-dark .status-badge               { background: var(--surface-muted); color: var(--text-muted); }
html.theme-dark .status-badge.status-active { background: var(--success-bg); color: var(--success-fg); }
html.theme-dark .status-badge.status-blocked{ background: var(--danger-bg);  color: var(--danger-fg); }
html.theme-dark .status-badge.status-error  { background: var(--warning-bg); color: var(--warning-fg); }

/* 지급·회수 4박스 그리드 */
html.theme-dark .adjust-box              { border-color: var(--border-strong); }
html.theme-dark .adjust-box-money        { background: var(--primary-bg); }
html.theme-dark .adjust-box-point        { background: var(--surface); }
html.theme-dark .adjust-box .adjust-box-title { color: var(--text); }
html.theme-dark .adjust-box label        { color: var(--text-muted); }

/* 재사용 토글 스위치 off 트랙 + 모달 닫기 hover */
html.theme-dark .toggle-switch .toggle-slider { background: var(--border-strong); }
html.theme-dark button.modal-close:hover      { background: var(--surface-muted); color: var(--text); }

/* 중립 c-toast (default = var(--text) 배경 → 다크에선 밝아져 깨짐 → 표면칩으로 고정) */
html.theme-dark .c-toast { background: var(--surface-muted); color: var(--text); border: 1px solid var(--border); }

/* 비고 상태 배지 (회수완료 등) */
html.theme-dark .badge-ok  { background: var(--success-bg); color: var(--success-fg); border-color: var(--success); }
html.theme-dark .badge-err { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger); }

/* finance 요약/합계 카드 */
html.theme-dark .finance-summary-card         { background: var(--surface-muted); border-color: var(--border); }
html.theme-dark .finance-summary-card strong  { color: var(--primary-hover); }
html.theme-dark .fsc-approved { background: var(--primary-bg); border-color: var(--border-strong); color: var(--primary-hover); }
html.theme-dark .fsc-pending  { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-fg); }
html.theme-dark .fsc-rejected { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger-fg); }
html.theme-dark .fsc-refunded { background: #241a3d; border-color: #4c3a7a; color: #c4b5fd; }

/* outbox: 요약카드·표·상세·상태칩 */
html.theme-dark .summary-card                { background: var(--surface); border-color: var(--border); }
html.theme-dark .summary-card.has-deadletter { background: var(--danger-bg); border-color: var(--danger); }
html.theme-dark .summary-card-title          { color: var(--text); }
html.theme-dark .summary-card-metric         { color: var(--text-muted); }
html.theme-dark .summary-card-metric strong  { color: var(--text); }
html.theme-dark .outbox-table thead tr       { background: var(--surface-muted); }
html.theme-dark .outbox-table th, html.theme-dark .outbox-table td { border-bottom-color: var(--border); }
html.theme-dark .outbox-table td             { color: var(--text); }
html.theme-dark .outbox-table tr:hover td    { background: var(--surface-muted); }
html.theme-dark .outbox-status.s-published   { background: var(--surface-muted); color: var(--text-muted); border-color: var(--border-strong); }
html.theme-dark .outbox-status.s-pending     { background: var(--primary-bg); color: var(--primary-hover); border-color: var(--border-strong); }
html.theme-dark .outbox-status.s-scheduled   { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning); }
html.theme-dark .outbox-status.s-deadletter  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger); }
html.theme-dark .outbox-table tr.outbox-detail-row td { background: #2a2110; border-top-color: #5a4418; border-bottom-color: #5a4418; }
html.theme-dark .outbox-detail-meta dt       { color: var(--text-muted); }
html.theme-dark .outbox-detail-meta dd       { color: var(--text); }
html.theme-dark .outbox-detail-payload       { background: var(--surface); border-color: var(--border); }
html.theme-dark .outbox-toggle-cell.no-detail { color: var(--text-subtle); }

/* 회원/조직 트리 */
html.theme-dark .tree-children       { border-left-color: var(--border-strong); }
html.theme-dark .tree-arrow          { color: var(--text-muted); }
html.theme-dark .tree-arrow.leaf     { color: var(--text-subtle); }
html.theme-dark .tree-node-username  { color: #9ec5ff; }
html.theme-dark .tree-node-username:hover { color: var(--primary-hover); }
html.theme-dark .tree-child-count    { color: var(--text-muted); }
html.theme-dark .tree-uid-hint       { color: var(--text-subtle); }
html.theme-dark .tree-node-highlighted > .tree-node-username { background: var(--warning-bg); color: var(--warning-fg); }
html.theme-dark .tree-node-search-match > .tree-node-username { background: var(--success-bg); color: var(--success-fg); }
html.theme-dark #tree-search-results .tree-search-item        { background: var(--info-bg); color: var(--info-fg); border-color: var(--border-strong); }
html.theme-dark #tree-search-results .tree-search-item:hover  { background: var(--surface-muted); }
html.theme-dark .mt-row       { border-bottom-color: var(--border); }
html.theme-dark .mt-row:hover { background: var(--surface-muted); }

/* 공지·이벤트 에디터/카드 */
html.theme-dark #notice-body-editor, html.theme-dark #event-body-editor { background: var(--surface); }
html.theme-dark .event-card         { background: var(--surface); border-color: var(--border); }
html.theme-dark .event-card-meta    { color: var(--text-muted); }
html.theme-dark .event-card-actions { border-top-color: var(--border); }
html.theme-dark #event-bg-preview   { border-color: var(--border); }
html.theme-dark .event-badge.ongoing  { background: var(--success-bg); color: var(--success-fg); }
html.theme-dark .event-badge.upcoming { background: var(--warning-bg); color: var(--warning-fg); }
html.theme-dark .event-badge.hot      { background: var(--danger-bg);  color: var(--danger-fg); }
html.theme-dark .event-badge.vip      { background: var(--purple-bg); color: var(--purple-fg); }

/* Quill 리치텍스트 에디터 (공지·이벤트·쪽지 / vendored quill.snow.css 다크 오버라이드 — 원본 미수정) */
html.theme-dark .ql-toolbar.ql-snow,
html.theme-dark .ql-container.ql-snow      { border-color: var(--border); background: var(--surface); }
html.theme-dark .ql-editor                 { color: var(--text); }
html.theme-dark .ql-editor.ql-blank::before{ color: var(--text-subtle); }
html.theme-dark .ql-snow .ql-stroke        { stroke: var(--text-muted); }
html.theme-dark .ql-snow .ql-fill,
html.theme-dark .ql-snow .ql-stroke.ql-fill{ fill: var(--text-muted); }
html.theme-dark .ql-snow .ql-picker        { color: var(--text-muted); }
html.theme-dark .ql-snow.ql-toolbar button:hover .ql-stroke,
html.theme-dark .ql-snow.ql-toolbar button.ql-active .ql-stroke,
html.theme-dark .ql-snow .ql-picker-label:hover .ql-stroke { stroke: var(--primary-hover); }
html.theme-dark .ql-snow.ql-toolbar button:hover .ql-fill,
html.theme-dark .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--primary-hover); }
html.theme-dark .ql-snow.ql-toolbar button:hover,
html.theme-dark .ql-snow.ql-toolbar button.ql-active,
html.theme-dark .ql-snow .ql-picker-label:hover,
html.theme-dark .ql-snow .ql-picker-label.ql-active,
html.theme-dark .ql-snow .ql-picker-item:hover,
html.theme-dark .ql-snow .ql-picker-item.ql-selected { color: var(--primary-hover); }
html.theme-dark .ql-snow .ql-picker-options { background: var(--surface); border-color: var(--border); }
html.theme-dark .ql-snow .ql-tooltip { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow); }
html.theme-dark .ql-snow .ql-tooltip input[type=text] { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
html.theme-dark .ql-snow a { color: var(--primary-hover); }

/* ==========================================================================
   파트너 대시보드 8카드 · 목록 아이디 링크 — 다크 보정 (2026-07-12)
   -------------------------------------------------------------------------- */
/* 라이트의 파스텔 틴트(-bg 토큰)가 다크에선 탁하게 떠 보임(주황=올리브빛 등)
   → 카드 배경은 평면 표면색으로 되돌리고 '좌측 컬러바'만 남겨 무난하게. */
html.theme-dark .pdash-card.c-orange,
html.theme-dark .pdash-card.c-slate,
html.theme-dark .pdash-card.c-teal,
html.theme-dark .pdash-card.c-blue { background: var(--surface); }

/* 회원/파트너 목록 아이디 링크 = 다크에선 primary(#3b82f6)가 어두워 흐림 → 밝은 파랑 */
html.theme-dark .ml-open, html.theme-dark .pl-open, html.theme-dark .ci-open { color: #9ec5ff; }
html.theme-dark .ml-open:hover, html.theme-dark .pl-open:hover, html.theme-dark .ci-open:hover { color: #bcd6ff; }

/* ── 비밀번호 표시 토글 (2026-07-16) ─────────────────────────────
   회원생성·회원가입 비밀번호 입력칸의 눈 아이콘. JS(attachPasswordToggle)가
   input을 .pw-wrap 으로 감싸고 버튼을 주입한다 = 기존 폼 HTML 무변경.
   ★ 기본 = 가림. 노출 시점은 사용자가 정한다(자동 노출 없음). */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap > input {
  width: 100%;
  /* 아이콘 폭만큼 오른쪽 여백 = 긴 값 입력 시 글자가 아이콘 밑으로 안 들어감 */
  padding-right: 38px !important;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  line-height: 0;
}
.pw-toggle:hover {
  color: var(--text, #e2e8f0);
  background: rgba(148, 163, 184, 0.12);
}
.pw-toggle:focus-visible {
  outline: 2px solid var(--primary, #3b82f6);
  outline-offset: 1px;
}
.pw-toggle svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}