/* BizCrm 화면 테마 — 다크 (bizCare html.theme-dark 팔레트: Tokyo Night 계열)
   라이트는 기존 slim.css / mobile.css 그대로. 선택은 localStorage "bizcrm.theme" (app.html <head> 에서 첫 그리기 전 적용). */
html.theme-dark {
  color-scheme: dark;
  --primary: #7aa2f7; --primary-dark: #5a7dc7; --primary-light: #2f3650; --on-primary: #0b1020;
  --bg: #16181e; --card: #24283b; --card2: #1f2335;
  --text: #c0caf5; --text-dim: #8a93b8; --muted: #8a93b8; --border: rgba(122, 162, 247, .16);
  --title: #c0caf5; --surface: #24283b; --surface-2: #1f2335; --surface-3: #1a1b26; --elevated: #2a2f45;
  --success: #9ece6a; --warning: #e0af68; --danger: #f7768e;
  --highlight-bg: #2f3650; --highlight-bg-strong: #3a4463;
  --x-pr: #7aa2f7; --x-title: #c0caf5; --x-line: rgba(122, 162, 247, .16); --x-soft: #1f2335;
  --m-pr: #7aa2f7; --m-line: rgba(122, 162, 247, .16); --m-bg: #16181e;
  --mui-pr: #7aa2f7; --mui-pr-d: #5a7dc7; --mui-line: rgba(192, 202, 245, .28); --mui-txt: #c0caf5; --mui-dim: #8a93b8; --mui-err: #f7768e;
  --shadow: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
}
html.theme-dark body { background: var(--bg); color: var(--text); }
html.theme-dark ::selection { background: #3a4463; }
html.theme-dark * { scrollbar-color: #3a4463 transparent; }

/* ── 공통 표면 (카드 · 표 · 입력) ── */
html.theme-dark .card, html.theme-dark .ext-roster, html.theme-dark .filter-bar, html.theme-dark .tag-dropdown, html.theme-dark .x-pop, html.theme-dark .x-acct-pop,
html.theme-dark .ci-modal, html.theme-dark .login-box, html.theme-dark .ot-list, html.theme-dark .m-card, html.theme-dark .m-grp, html.theme-dark .mui-menu { background: var(--surface); color: var(--text); border-color: var(--border); }
html.theme-dark input, html.theme-dark select, html.theme-dark textarea,
html.theme-dark .tb-sel, html.theme-dark .ci-field input, html.theme-dark .ci-field select, html.theme-dark .ci-field textarea,
html.theme-dark .filter-bar input, html.theme-dark .filter-bar select, html.theme-dark .ot-filters input, html.theme-dark .ot-filters select,
html.theme-dark .list-foot .page-size select, html.theme-dark .login-box .field input { background-color: var(--surface-3); color: var(--text); border-color: rgba(192, 202, 245, .2); }
html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: #565f89; }
html.theme-dark .tb-sel:disabled, html.theme-dark input:disabled, html.theme-dark select:disabled, html.theme-dark textarea:disabled { background-color: var(--surface-2); color: var(--muted); }
html.theme-dark select option { background: var(--surface); color: var(--text); }
html.theme-dark .btn-sm, html.theme-dark .btn-refresh, html.theme-dark .pager button, html.theme-dark .filter-chip, html.theme-dark .range-btn, html.theme-dark .x-btn:not(.pr):not(.pl),
html.theme-dark .ot-btn, html.theme-dark table.ot-table .cell-actions button, html.theme-dark .m-mini, html.theme-dark .m-card .cell-actions button, html.theme-dark .m-loadmore, html.theme-dark .ci-btn:not(.pr):not(.primary) { background: var(--surface-2); color: var(--text); border-color: rgba(192, 202, 245, .18); }
html.theme-dark .btn-sm:hover, html.theme-dark .btn-refresh:hover, html.theme-dark .pager button:hover, html.theme-dark .ot-btn:hover, html.theme-dark table.ot-table .cell-actions button:hover { background: var(--elevated); }
/* 채운 강조 버튼: 흰 글씨 대신 어두운 글씨 (bizCare --on-primary) */
html.theme-dark .btn-sm.pr, html.theme-dark .x-btn.pr, html.theme-dark .ci-btn.pr, html.theme-dark .ci-btn.primary, html.theme-dark .x-apk-dl, html.theme-dark .pager button.on, html.theme-dark .pager button.active,
html.theme-dark .login-submit, html.theme-dark .ot-btn.pr, html.theme-dark .ot-btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary) !important; }
html.theme-dark .btn-sm.pr:hover, html.theme-dark .x-btn.pr:hover, html.theme-dark .x-apk-dl:hover, html.theme-dark .login-submit:hover { background: #8fb3ff; }
html.theme-dark .x-btn.pl, html.theme-dark .btn-refresh.cy { background: var(--highlight-bg); border-color: rgba(122,162,247,.35); color: var(--primary); }
html.theme-dark .btn-sm.dg, html.theme-dark .ot-x { background: rgba(247, 118, 142, .12); border-color: rgba(247, 118, 142, .35); color: var(--danger); }
html.theme-dark .ci-close:hover { background: rgba(247, 118, 142, .15); }

/* 표 */
html.theme-dark table th, html.theme-dark table.ot-table th { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
html.theme-dark table td { border-color: var(--border); }
html.theme-dark table.htbl tr:hover td, html.theme-dark table.crmt tr:hover td, html.theme-dark table.ot-table tr:hover td,
html.theme-dark .call-item:hover, html.theme-dark .site-row:hover { background: var(--highlight-bg); }
html.theme-dark table.htbl tr.row-new td { background: rgba(247, 118, 142, .07); }
html.theme-dark table.htbl tr.dup-row td { background: rgba(224, 175, 104, .08); }
html.theme-dark .stbl th, html.theme-dark .stbl td { border-color: var(--border); }

/* 머리줄 · 알약 · 배지 */
html.theme-dark .topbar { background: var(--surface-3); border-color: var(--border); }
html.theme-dark .brand-word, html.theme-dark .x-crumb b { color: var(--text); }
html.theme-dark .price-pill, html.theme-dark .notice-btn, html.theme-dark .warn-box, html.theme-dark .resv-on { background: rgba(224, 175, 104, .12); border-color: rgba(224, 175, 104, .35); color: #e0af68; }
html.theme-dark .notice-btn:hover { background: rgba(224, 175, 104, .2); }
html.theme-dark .info-box, html.theme-dark .dnis-site { background: rgba(122, 162, 247, .1); border-color: rgba(122, 162, 247, .3); color: #a9c1ff; }
html.theme-dark .dnis-site.s-nationcompany { background: rgba(187, 154, 247, .16); border-color: rgba(187, 154, 247, .4); color: #c4b5fd; }
html.theme-dark .dnis-site.s-tdanawa { background: rgba(255, 158, 100, .16); border-color: rgba(255, 158, 100, .4); color: #fdba74; }
html.theme-dark .co-switch, html.theme-dark .co-tag { background: var(--highlight-bg); border-color: rgba(122, 162, 247, .35); color: var(--primary); }
html.theme-dark .kind-badge, html.theme-dark .ext-roster .er-item { background: var(--surface-2); color: var(--text); }
html.theme-dark .test-badge { background: rgba(255, 158, 100, .15); color: #ff9e64; }
html.theme-dark .call-dir.in { background: rgba(122,162,247,.15); color: #7aa2f7; } html.theme-dark .call-dir.out { background: rgba(224,175,104,.15); color: #e0af68; }
html.theme-dark .call-dir.missed { background: rgba(247,118,142,.15); color: #f7768e; } html.theme-dark .call-dir.nk { background: rgba(187,154,247,.15); color: #bb9af7; } html.theme-dark .call-dir.sm { background: rgba(115,218,202,.15); color: #73daca; }
html.theme-dark .lead-st { filter: saturate(.9); }
html.theme-dark .lead-st.st-상담신청 { background: rgba(247,118,142,.15); color: #f7768e; } html.theme-dark .lead-st.st-상담중 { background: rgba(255,158,100,.15); color: #ff9e64; } html.theme-dark .lead-st.st-상담완료 { background: rgba(158,206,106,.15); color: #9ece6a; }
html.theme-dark code, html.theme-dark .pre, html.theme-dark pre { background: var(--surface-3); color: var(--text); border-color: var(--border); }
@keyframes pulseCardDark { 0%,100%{ background: var(--card2); } 50%{ background: rgba(247,118,142,.12); } }

/* 좌측 메뉴 */
html.theme-dark .leftpanel { background: var(--surface-3); border-color: var(--border); }
html.theme-dark .x-nav-g { background: var(--surface); border-color: var(--border); box-shadow: none; }
html.theme-dark .x-nav-gt { background: var(--surface-2); color: var(--text); }
html.theme-dark .x-nav-g:not(.closed) > .x-nav-gt { border-bottom-color: var(--border); }
html.theme-dark .x-nav-gt:hover, html.theme-dark .x-nav-it:hover { background: var(--elevated); color: var(--text); }
html.theme-dark .x-nav-items { padding: 6px; gap: 2px; }
html.theme-dark .x-nav-it { color: var(--muted); border-radius: 7px; padding: 8px 12px; }
html.theme-dark .x-nav-it.on,
html.theme-dark .x-nav-it.on:hover { background: var(--primary); color: var(--on-primary); font-weight: 600; box-shadow: none; }
html.theme-dark .x-nav-g.has-on { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
html.theme-dark .x-nav-it.on .x-nbdg { background: var(--danger); color: #fff; }
html.theme-dark .x-nav-foot { color: #565f89; border-color: var(--border); }
html.theme-dark .x-side-tg { background: var(--surface); border-color: var(--border); color: var(--muted); }
html.theme-dark .x-side-tg:hover { background: var(--elevated); }

/* 팝오버 · 계정 */
html.theme-dark .x-acct-head { background: var(--surface-2); }
html.theme-dark .x-acct-action:hover, html.theme-dark .x-acct-action:focus-visible { background: var(--elevated); color: var(--text); }
html.theme-dark .x-acct-pop, html.theme-dark .x-pop, html.theme-dark .tag-dropdown, html.theme-dark .ci-modal { box-shadow: var(--shadow-lg); }
html.theme-dark .x-theme-it.on { background: var(--highlight-bg-strong); color: var(--primary); }
html.theme-dark .x-apk-qr { background: #fff; } /* QR 은 흰 바탕 유지 (스캔) */
html.theme-dark .up-kv code { background: var(--surface-3); }
html.theme-dark .dcs-use { background: rgba(59,130,246,.2); color: #93c5fd; }
html.theme-dark .dcs-chip.on { background: rgba(22,163,74,.18); color: #86efac; border-color: rgba(22,163,74,.35); }
html.theme-dark .dcs-chip.off { background: rgba(220,38,38,.18); color: #fca5a5; border-color: rgba(220,38,38,.35); }
html.theme-dark .dcs-chip.wait { background: rgba(217,119,6,.18); color: #fcd34d; border-color: rgba(217,119,6,.35); }
html.theme-dark .theme-opt { background: var(--surface-2); }
html.theme-dark .theme-opt.on { box-shadow: 0 0 0 2px var(--highlight-bg-strong); }

/* 창(모달) */
html.theme-dark .modal-overlay { background: rgba(5, 6, 10, .66); }
html.theme-dark .modal-overlay.modal-float { background: transparent; }
html.theme-dark .ci-header { background: #2563eb; border-color: transparent; color: #fff; }
html.theme-dark .ci-header h3, html.theme-dark .ci-header h3 * { color: #fff; }
html.theme-dark .ci-footer { background: var(--surface); border-color: var(--border); color: var(--text); }

/* 옛 간편문의 목록 (ot-) */
html.theme-dark .ot-list { background: var(--surface); border-color: var(--border); color: var(--text); }
html.theme-dark .ot-filters { background: var(--surface-2); border-color: var(--border); }
html.theme-dark table.ot-table td { border-color: var(--border); color: var(--text); }

/* 로그인 */
html.theme-dark .login-box { box-shadow: var(--shadow-lg); }
html.theme-dark .login-box h1, html.theme-dark .login-box h2, html.theme-dark .login-box label { color: var(--text); }

/* ── 모바일 (≤768px) ── */
@media (max-width: 768px) {
  html.theme-dark .m-appbar, html.theme-dark .m-sheet-head, html.theme-dark .m-more-head { background: var(--surface-3); border-color: var(--border); }
  html.theme-dark .m-appbar h1, html.theme-dark .m-ib, html.theme-dark .m-name, html.theme-dark .m-li { color: var(--text); }
  html.theme-dark .m-ib:active, html.theme-dark .m-li:active, html.theme-dark .m-card:active { background: var(--elevated); }
  html.theme-dark body.m-flt-open #mFltBtn { background: var(--highlight-bg); }
  /* 하단 탭 다크: 짙은 남색 + 선택 탭은 연파랑 상자 */
  html.theme-dark { --m-tabbg: #16275c; --m-tabon: rgba(122,162,247,.30); --m-tabdim: rgba(192,202,245,.72); }
  html.theme-dark .m-tabs { box-shadow: 0 -2px 10px rgba(0,0,0,.45); }
  html.theme-dark body.m-flt-open .filter-bar, html.theme-dark body.m-flt-open .ot-filters { background: var(--surface); }
  html.theme-dark .m-card { box-shadow: none; }
  html.theme-dark .m-memo, html.theme-dark .m-fsum { color: var(--muted); background: transparent; }
  html.theme-dark .m-chip { background: var(--surface-2); color: var(--text); border-color: var(--border); }
  html.theme-dark .m-chip.ty { background: var(--highlight-bg); color: var(--primary); }
  html.theme-dark .m-chip.miss { background: rgba(247,118,142,.15); color: #f7768e; }
  html.theme-dark .m-chip.st-상담신청 { background: rgba(247,118,142,.15); color: #f7768e; }
  html.theme-dark .m-chip.st-상담중 { background: rgba(255,158,100,.15); color: #ff9e64; }
  html.theme-dark #dashView .card, html.theme-dark #dcsView .card, html.theme-dark #dcsctlView .card, html.theme-dark #astView .card, html.theme-dark #calldashView .card, html.theme-dark .cfg-grid > .card, html.theme-dark #configView .card, html.theme-dark #coWrap .co-card, html.theme-dark #uplusView .card { background: var(--surface); border-color: var(--border); }
  html.theme-dark #dashView .card-header, html.theme-dark #dcsView .card-header, html.theme-dark #dcsctlView .card-header, html.theme-dark #astView .card-header, html.theme-dark #calldashView .card-header,
  html.theme-dark .bx-metric, html.theme-dark .as-metrics .as-k, html.theme-dark #dashView .ext-roster { background: var(--surface); }
  html.theme-dark table.m-tbl tr { background: var(--surface); border-color: var(--border); }
  html.theme-dark .m-li.m-sel select { background-color: var(--surface-3); }
  /* MUI 창 · 메뉴 · 입력 */
  html.theme-dark .ci-modal { background: var(--bg); box-shadow: var(--shadow-lg); }
  html.theme-dark .ci-header { background: #2563eb; color: #fff; border-bottom: 0; box-shadow: none; }
  html.theme-dark .ci-header h3, html.theme-dark .ci-header h3 *, html.theme-dark .ci-header button { color: #fff; }
  html.theme-dark .ci-footer { background: var(--surface-3); border-color: var(--border); }
  html.theme-dark .ci-field.mui-notch > label:first-child, html.theme-dark .memo-input-wrap .mui-float { background: var(--bg); color: var(--mui-dim); }
  html.theme-dark .ci-field.mui-tf input:not([type=checkbox]):not([type=radio]), html.theme-dark .ci-field.mui-tf textarea, html.theme-dark .ci-body .mui-sel, html.theme-dark .mui-tf .mui-sel, html.theme-dark .memo-input-wrap textarea, html.theme-dark .mui-sel { background-color: transparent; color: var(--text); border-color: var(--mui-line); }
  html.theme-dark .mui-menu { background: var(--elevated); box-shadow: var(--shadow-lg); }
  html.theme-dark .mui-menu li, html.theme-dark .mui-menu [role=option] { color: var(--text); }
  html.theme-dark .mui-menu .on, html.theme-dark .mui-menu [aria-selected=true] { background: var(--highlight-bg-strong); }
  html.theme-dark .mui-chip { background: var(--surface-2); color: var(--text); border-color: var(--mui-line); }
  html.theme-dark .mui-chip.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
  html.theme-dark .ci-body input[type=checkbox], html.theme-dark #configView input[type=checkbox], html.theme-dark .m-card input[type=checkbox] { background: transparent; border-color: rgba(192,202,245,.6); }
  html.theme-dark .ci-body input[type=checkbox]:checked, html.theme-dark #configView input[type=checkbox]:checked, html.theme-dark .m-card input[type=checkbox]:checked { background: var(--primary); border-color: var(--primary); }
  html.theme-dark .mui-confirm .ci-header { background: var(--surface); }
  html.theme-dark .memo-entry { background: var(--surface); border-color: var(--border); color: var(--text); }
  html.theme-dark .ext-roster .er-title { color: var(--text); }
  html.theme-dark .ext-roster::after { background: linear-gradient(90deg, transparent, var(--surface)); }
}
html.theme-dark .pp-amt { color: #e0af68; }
html.theme-dark .x-dotn, html.theme-dark .x-nbdg { border-color: var(--surface-3); }
html.theme-dark .ot-scroll, html.theme-dark #tblWrap { border-color: var(--border); }
html.theme-dark .tag-add { border-color: rgba(192, 202, 245, .3); color: var(--muted); }
html.theme-dark table.ot-table td a, html.theme-dark table.ot-table td a.nm, html.theme-dark table.ot-table td b, html.theme-dark .ot-list b { color: var(--text); }
html.theme-dark table.ot-table td a.nm:hover { color: var(--primary); }
html.theme-dark .x-nav-gt span, html.theme-dark .x-nav-gt .x-cv { color: var(--text); }
@media (max-width: 768px) {
  html.theme-dark .m-li { background: var(--surface); border-color: var(--border); }
  html.theme-dark .m-grp { border-color: var(--border); }
  html.theme-dark .m-gt { color: var(--muted); }
  html.theme-dark .ext-roster .er-title { background: var(--surface); }
}
html.theme-dark .login-body, html.theme-dark .login-wrap { background: var(--bg); }

/* 앱 업데이트 팝업 (mobile.js showUpd) — 앱의 BizUi 대화상자와 같은 모양: 라이트 #1976d2/흰 카드, 다크 #7aa2f7/#24283b */
.app-upd-ov { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0,0,0,.5); animation: ciFadeIn .15s ease; }
.app-upd { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 22px 24px 14px; box-shadow: 0 16px 48px rgba(0,0,0,.28); box-sizing: border-box; }
.app-upd h3 { margin: 0; color: #1976d2; font-size: 19px; font-weight: 700; line-height: 1.3; }
.app-upd p { margin: 12px 0 0; color: #5f6368; font-size: 15px; line-height: 1.5; white-space: pre-line; word-break: keep-all; }
.app-upd .app-upd-v b { color: #212121; }
.app-upd .app-upd-n { color: #212121; background: #f5f7fa; border-radius: 8px; padding: 10px 12px; }
.app-upd .app-upd-nh { font-size: 13px; font-weight: 700; color: #212121; }
.app-upd .app-upd-list { margin: 4px 0 0; padding-left: 18px; }
.app-upd .app-upd-list li { margin: 4px 0 0; color: #212121; font-size: 14px; line-height: 1.45; }
.app-upd .app-upd-h { font-size: 13px; }
.app-upd-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.app-upd-b { min-width: 64px; height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: transparent; color: #1976d2; font-size: 15px; font-weight: 700; cursor: pointer; }
.app-upd-b.pr { background: #1976d2; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
html.theme-dark .app-upd-ov { background: rgba(5,6,10,.66); }
html.theme-dark .app-upd { background: #24283b; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
html.theme-dark .app-upd h3, html.theme-dark .app-upd-b { color: #7aa2f7; }
html.theme-dark .app-upd p { color: #8a93b8; }
html.theme-dark .app-upd .app-upd-v b, html.theme-dark .app-upd .app-upd-n,
html.theme-dark .app-upd .app-upd-nh, html.theme-dark .app-upd .app-upd-list li { color: #c0caf5; }
html.theme-dark .app-upd .app-upd-n { background: #1a1b26; }
html.theme-dark .app-upd-b.pr { background: #7aa2f7; color: #0b1020; }
/* 고객 상세 상담내역 · 상담관리 카드 전화 버튼 — 다크 */
html.theme-dark .memo-rows { background: transparent; border-color: var(--border); }
html.theme-dark .memo-row { border-color: var(--border); }
@media (min-width: 769px) {
html.theme-dark .memo-compose .memo-fmt-btn { background: var(--surface-2); border-color: var(--border); color: var(--text); }
html.theme-dark .memo-compose .memo-input-wrap textarea { background: var(--surface-3); color: var(--text); border-color: rgba(192,202,245,.28); }
html.theme-dark .memo-compose .memo-input-wrap textarea:focus { box-shadow: 0 0 0 2px rgba(122,162,247,.25); }
}
html.theme-dark .m-card .m-r2 .m-tel { color: var(--text); }
html.theme-dark .m-call { background: #2f3650; color: var(--primary); }

/* 검색 카드 · 목록 카드 · 제목줄 버튼 — 라이트 고정색을 테마 색으로 */
html.theme-dark .main { background: var(--bg); color: var(--text); }
html.theme-dark .x-phd h1 { color: var(--text); }
html.theme-dark .bx-find { background: var(--surface-2); }
html.theme-dark .bx-find,
html.theme-dark .bx-sheet,
html.theme-dark .bx-metric {
  border-color: var(--border);
  box-shadow: none;
  color: var(--text);
}
html.theme-dark .bx-sheet,
html.theme-dark .bx-metric { background: var(--surface); }
html.theme-dark .bx-find .filter-bar,
html.theme-dark .bx-find .ot-filters { background: transparent; border: 0; }
html.theme-dark .bx-find .filter-bar input,
html.theme-dark .bx-find .filter-bar select,
html.theme-dark .bx-find .ot-filters input,
html.theme-dark .bx-find .ot-filters select,
html.theme-dark .bx-find input,
html.theme-dark .bx-find select {
  background-color: var(--surface-3);
  color: var(--text);
  border-color: rgba(192, 202, 245, .22);
  color-scheme: dark;
}
html.theme-dark .bx-find-meta,
html.theme-dark .bx-tilde { color: var(--muted); }
html.theme-dark .bx-btn {
  background: var(--surface-2);
  color: var(--text);
  border-color: rgba(192, 202, 245, .22);
}
html.theme-dark .bx-btn:hover { background: var(--elevated); color: var(--text); }
html.theme-dark .bx-btn.pr,
html.theme-dark .bx-btn.pr:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
html.theme-dark .bx-btn.danger { background: rgba(247, 118, 142, .12); color: var(--danger); border-color: rgba(247, 118, 142, .4); }
html.theme-dark .bx-find .range-btn,
html.theme-dark .bx-find .filter-chip {
  background: var(--surface-2);
  color: var(--text);
  border-color: rgba(192, 202, 245, .22);
}
html.theme-dark .bx-find .range-btn.active,
html.theme-dark .bx-find .filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
html.theme-dark .bx-sheet .list-foot { border-top-color: var(--border); background: var(--surface); }
html.theme-dark table.crmt.nc th,
html.theme-dark table.crmt.nc td,
html.theme-dark table.ot-table th,
html.theme-dark table.ot-table td,
html.theme-dark #logsView table.htbl th,
html.theme-dark #logsView table.htbl td,
html.theme-dark #payView table.htbl th,
html.theme-dark #payView table.htbl td {
  border-color: var(--border);
  color: var(--text);
}
html.theme-dark table.crmt.nc thead th,
html.theme-dark table.crmt thead th,
html.theme-dark table.ot-table thead th,
html.theme-dark #logsView table.htbl thead th,
html.theme-dark #payView table.htbl thead th {
  background: var(--surface-2);
  color: var(--muted);
}
html.theme-dark table.crmt.nc tr.th-filters th,
html.theme-dark table.ot-table tr.th-filters th { background: var(--surface); }
html.theme-dark table.crmt.nc tr.th-filters select,
html.theme-dark table.crmt.nc tr.th-filters input,
html.theme-dark table.ot-table tr.th-filters select,
html.theme-dark table.ot-table tr.th-filters input,
html.theme-dark button.hf-reset {
  background: var(--surface-3);
  color: var(--text);
  border-color: rgba(192, 202, 245, .22);
}
html.theme-dark table.crmt tr:hover td,
html.theme-dark table.crmt.nc tr:hover td,
html.theme-dark table.ot-table tr:hover td,
html.theme-dark table.htbl tr:hover td { background: var(--highlight-bg); }
html.theme-dark table.crmt td.memo-td,
html.theme-dark table.crmt th.th-memo { border-left-color: rgba(192, 202, 245, .28); }
html.theme-dark .pager button { background: var(--surface-2); color: var(--text); border-color: rgba(192, 202, 245, .22); }
html.theme-dark .pager button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
html.theme-dark .count-badge { color: var(--muted); }

/* 블루 스카이 · 블러시 핑크 — 라이트 화면 전체에 샘플과 같은 색.
   통화 제어 줄(.x-sp)은 기존 남색을 유지한다. */
html.theme-sky {
  color-scheme: light;
  --primary: #0284c7; --primary-dark: #0369a1; --primary-light: #e0f2fe; --on-primary: #fff;
  --bg: #e7f4fc; --card: #ffffff; --card2: #eef7fc;
  --text: #0f2942; --text-dim: #5b7c95; --muted: #5b7c95; --border: #c5dff0;
  --title: #0f2942; --surface: #ffffff; --surface-2: #f3f9fd; --surface-3: #ffffff; --elevated: #e3f2fb;
  --highlight-bg: #e3f2fb; --highlight-bg-strong: #d7eefb;
  --x-pr: #0284c7; --x-title: #0f2942; --x-line: #c5dff0; --x-soft: #e3f2fb;
  --m-pr: #0284c7; --m-line: #c5dff0; --m-bg: #e7f4fc; --m-tabbg: #0369a1;
  --mui-pr: #0284c7; --mui-pr-d: #0369a1; --mui-line: #c5dff0; --mui-txt: #0f2942; --mui-dim: #5b7c95;
  --chrome: #f7fbfe; --side: #f4f9fd; --find: #f3f9fd; --menu-head: #e3f2fb; --th: #eef7fc; --hover: #f3f9fd; --card-line: #b9d7ea; --login-bg: #0369a1;
}
html.theme-pink {
  color-scheme: light;
  --primary: #db4d7a; --primary-dark: #be3a66; --primary-light: #fce7ee; --on-primary: #fff;
  --bg: #fff1f5; --card: #ffffff; --card2: #fff0f4;
  --text: #3d2430; --text-dim: #8a6272; --muted: #8a6272; --border: #f3c9d6;
  --title: #3d2430; --surface: #ffffff; --surface-2: #fff7f9; --surface-3: #ffffff; --elevated: #fde4ec;
  --highlight-bg: #fde4ec; --highlight-bg-strong: #fce7ee;
  --x-pr: #db4d7a; --x-title: #3d2430; --x-line: #f3c9d6; --x-soft: #fde4ec;
  --m-pr: #db4d7a; --m-line: #f3c9d6; --m-bg: #fff1f5; --m-tabbg: #be3a66;
  --mui-pr: #db4d7a; --mui-pr-d: #be3a66; --mui-line: #f3c9d6; --mui-txt: #3d2430; --mui-dim: #8a6272;
  --chrome: #fff8fa; --side: #fff6f8; --find: #fff7f9; --menu-head: #fde4ec; --th: #fff0f4; --hover: #fff5f8; --card-line: #f0c2d0; --login-bg: #be3a66;
}
html.theme-sky body,
html.theme-pink body { background: var(--bg); color: var(--text); }
html.theme-sky .main,
html.theme-pink .main { color: var(--text); }
html.theme-sky .topbar,
html.theme-pink .topbar { background: var(--chrome); border-bottom-color: var(--border); }
html.theme-sky .topbar-brand,
html.theme-pink .topbar-brand { border-right-color: var(--border); }
html.theme-sky .topbar-right,
html.theme-pink .topbar-right { color: var(--muted); }
html.theme-sky .topbar-right .x-iconbtn,
html.theme-pink .topbar-right .x-iconbtn { color: var(--muted); }
html.theme-sky .topbar-right .x-iconbtn:hover,
html.theme-pink .topbar-right .x-iconbtn:hover { background: var(--menu-head); color: var(--text); }
html.theme-sky .tb-sel,
html.theme-pink .tb-sel { border-color: var(--border); }
html.theme-sky .leftpanel,
html.theme-pink .leftpanel { background: var(--side); border-color: var(--border); }
html.theme-sky .x-nav-g,
html.theme-pink .x-nav-g { background: #fff; border-color: var(--card-line); }
html.theme-sky .x-nav-gt,
html.theme-pink .x-nav-gt,
html.theme-sky .x-nav-g.has-on > .x-nav-gt,
html.theme-pink .x-nav-g.has-on > .x-nav-gt { background: var(--menu-head); color: var(--text); border-bottom-color: var(--border); }
html.theme-sky .x-nav-gt:hover,
html.theme-pink .x-nav-gt:hover { background: var(--hover); }
html.theme-sky .x-nav-it,
html.theme-pink .x-nav-it { color: var(--muted); }
html.theme-sky .x-nav-it:hover,
html.theme-pink .x-nav-it:hover { background: var(--hover); color: var(--text); }
html.theme-sky .x-nav-it.on,
html.theme-sky .x-nav-it.on:hover,
html.theme-pink .x-nav-it.on,
html.theme-pink .x-nav-it.on:hover { background: transparent; color: var(--primary-dark); font-weight: 700; box-shadow: none; }
html.theme-sky .x-nav-g.has-on,
html.theme-pink .x-nav-g.has-on { border-color: var(--card-line); }
html.theme-sky .x-nav-foot,
html.theme-pink .x-nav-foot { color: var(--muted); }
html.theme-sky .x-phd h1,
html.theme-pink .x-phd h1 { color: var(--title); }
html.theme-sky .bx-find,
html.theme-pink .bx-find { background: var(--find); border-color: var(--card-line); color: var(--text); }
html.theme-sky .bx-sheet,
html.theme-sky .bx-metric,
html.theme-pink .bx-sheet,
html.theme-pink .bx-metric { background: #fff; border-color: var(--card-line); }
html.theme-sky .bx-btn,
html.theme-pink .bx-btn { background: #fff; color: var(--text); border-color: var(--border); }
html.theme-sky .bx-btn:hover,
html.theme-pink .bx-btn:hover { background: var(--hover); }
html.theme-sky .bx-btn.pr,
html.theme-sky .bx-btn.pr:hover,
html.theme-pink .bx-btn.pr,
html.theme-pink .bx-btn.pr:hover,
html.theme-sky .btn-sm.pr,
html.theme-pink .btn-sm.pr,
html.theme-sky .x-btn.pr,
html.theme-pink .x-btn.pr,
html.theme-sky .ci-btn.pr,
html.theme-sky .ci-btn.primary,
html.theme-pink .ci-btn.pr,
html.theme-pink .ci-btn.primary,
html.theme-sky .login-submit,
html.theme-sky .login-submit:hover,
html.theme-pink .login-submit,
html.theme-pink .login-submit:hover,
html.theme-sky .ot-btn.pr,
html.theme-sky .ot-btn.primary,
html.theme-pink .ot-btn.pr,
html.theme-pink .ot-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
html.theme-sky .bx-find .range-btn.active,
html.theme-pink .bx-find .range-btn.active,
html.theme-sky .range-btn.active,
html.theme-pink .range-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
html.theme-sky .ci-header,
html.theme-pink .ci-header { background: var(--primary); }
html.theme-sky .login-body,
html.theme-pink .login-body { background: var(--login-bg); }
html.theme-sky .login-box .field input:focus,
html.theme-pink .login-box .field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
html.theme-sky table.crmt.nc thead th,
html.theme-sky table.crmt thead th,
html.theme-sky table.ot-table thead th,
html.theme-sky table.htbl thead th,
html.theme-sky #logsView table.htbl thead th,
html.theme-sky #payView table.htbl thead th,
html.theme-pink table.crmt.nc thead th,
html.theme-pink table.crmt thead th,
html.theme-pink table.ot-table thead th,
html.theme-pink table.htbl thead th,
html.theme-pink #logsView table.htbl thead th,
html.theme-pink #payView table.htbl thead th { background: var(--th); color: var(--muted); }
html.theme-sky table.crmt.nc th,
html.theme-sky table.crmt.nc td,
html.theme-sky table.ot-table th,
html.theme-sky table.ot-table td,
html.theme-sky table.htbl th,
html.theme-sky table.htbl td,
html.theme-pink table.crmt.nc th,
html.theme-pink table.crmt.nc td,
html.theme-pink table.ot-table th,
html.theme-pink table.ot-table td,
html.theme-pink table.htbl th,
html.theme-pink table.htbl td { border-color: var(--border); }
html.theme-sky table.crmt tr:hover td,
html.theme-sky table.crmt.nc tr:hover td,
html.theme-sky table.ot-table tr:hover td,
html.theme-sky table.htbl tr:hover td,
html.theme-pink table.crmt tr:hover td,
html.theme-pink table.crmt.nc tr:hover td,
html.theme-pink table.ot-table tr:hover td,
html.theme-pink table.htbl tr:hover td { background: var(--hover); }
html.theme-sky .pager button.on,
html.theme-sky .ot-foot .pager button.on,
html.theme-pink .pager button.on,
html.theme-pink .ot-foot .pager button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
html.theme-sky .x-theme-it.on,
html.theme-sky .x-theme-it.on:hover,
html.theme-pink .x-theme-it.on,
html.theme-pink .x-theme-it.on:hover { background: var(--highlight-bg); color: var(--primary-dark); }
html.theme-sky .x-theme-it .x-theme-ck,
html.theme-pink .x-theme-it .x-theme-ck { color: var(--primary); }
html.theme-sky .m-appbar,
html.theme-pink .m-appbar { background: var(--chrome); border-bottom-color: var(--border); }
html.theme-sky .m-appbar h1,
html.theme-pink .m-appbar h1 { color: var(--title); }
html.theme-sky .m-tabs,
html.theme-pink .m-tabs { background: var(--m-tabbg); }
html.theme-sky .card,
html.theme-sky .ext-roster,
html.theme-sky .filter-bar,
html.theme-sky .x-pop,
html.theme-sky .ci-modal,
html.theme-pink .card,
html.theme-pink .ext-roster,
html.theme-pink .filter-bar,
html.theme-pink .x-pop,
html.theme-pink .ci-modal { border-color: var(--border); }
html.theme-sky .st-side,
html.theme-sky .st-main,
html.theme-sky .st-grp,
html.theme-pink .st-side,
html.theme-pink .st-main,
html.theme-pink .st-grp { border-color: var(--border); }

/* t226u: 미연결 내선 배지·배너(어두운 테마) */
html.theme-dark .unl-badge { background: rgba(224, 175, 104, .14); border-color: rgba(224, 175, 104, .45); color: #e0af68; }
html.theme-dark .agent-select.unl { background-color: rgba(224, 175, 104, .10); border-color: rgba(224, 175, 104, .45); color: #e0af68; }
html.theme-dark .agent-select.unl option { color: var(--text); }
html.theme-dark .unl-banner { background: rgba(224, 175, 104, .10); border-color: rgba(224, 175, 104, .40); color: #e0af68; }
html.theme-dark .unl-banner > .x-ic { color: #e0af68; }
html.theme-dark .unl-banner .unl-help { color: #c9a26e; }
html.theme-dark .unl-banner .unl-x { background: var(--surface-2); border-color: rgba(224, 175, 104, .40); color: #e0af68; }