/* ============================================================================
   dark.css — 위드제이 CRM · 다크모드 레이어 (2026-08-12)
   ----------------------------------------------------------------------------
   전략: toss-theme.css 와 동일한 "변수 재정의" 패턴. 각 HTML 인라인 <style>의
         :root 토큰(--bg/--card/--ink/--line/--soft/--muted/--dim)을 통째로 덮어
         컴포넌트 개별 수정 없이 전역 다크 전환.
   특이도: html[data-theme="dark"] (0,1,1) > :root (0,1,0) → 로드 순서와 무관하게
         인라인 <style>·mobile-*.css·toss-theme.css 를 모두 이긴다.
   톤: 짙은 회색(토스/노션 계열). 순검정 아님 — 표 격자·카드 층 구분 보존.
   브랜드: 버튼 배경 레드는 #E5172C 유지(흰 글씨 대비 5.35:1).
         텍스트용 레드만 --red-text(#ff5c6b)로 밝혀 다크 배경 대비 5.5:1 확보.
   적용 대상: admin·c·sales·report·payout·apply·join·notice·portfolio·tut·
         tutorial·onboarding 12개 전 페이지 공통.
   되돌리기: 각 HTML의 <link href="dark.css"> 한 줄 제거.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   1. 토큰 — 12개 페이지가 공유하는 :root 변수 전량 재정의
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"]{
  color-scheme: dark;                    /* 네이티브 스크롤바·폼 컨트롤 자동 다크 */

  /* ── 표면 계층 (배경 → 카드 → 옅은 표면 순으로 밝아짐) ── */
  --bg:#17191c;          /* 페이지 배경 */
  --card:#212429;        /* 카드·패널·표 배경 */
  --soft:#282b30;        /* 옅은 표면(zebra·헤더 셀·비활성 영역) */
  --surface-hi:#2f333a;  /* 한 단계 더 밝은 표면(hover·선택) */

  /* ── 텍스트 ── */
  --ink:#e7e9eb;         /* 본문/헤딩 (카드 위 대비 12.5:1) */
  --muted:#9ba1a8;       /* 보조 텍스트 (5.98:1) */
  --dim:#9ba1a8;         /* sales·portfolio가 쓰는 별칭 */
  --lead:#8b9199;

  /* ── 보더 ── */
  --line:#34383e;
  --line-strong:#454a52;

  /* ── 브랜드 레드 ── */
  --red:#E5172C;             /* 버튼 배경 — 브랜드 유지 */
  --red-hover:#f42a40;
  --red-text:#ff5c6b;        /* 다크 배경 위 레드 텍스트 (5.55:1) */
  --red-weak:rgba(229,23,44,.18);
  --red-weak-hover:rgba(229,23,44,.26);

  /* ── 상태색 (다크 배경에서 읽히도록 밝게) ── */
  --ok:#4ade80;  --ok-bg:rgba(74,222,128,.14);  --ok-line:rgba(74,222,128,.32);
  --warn:#fbbf24;--warn-bg:rgba(251,191,36,.14);--warn-line:rgba(251,191,36,.32);
  --info:#60a5fa;--info-bg:rgba(96,165,250,.14);--info-line:rgba(96,165,250,.32);
  --danger:#f87171;--danger-bg:rgba(248,113,113,.14);--danger-line:rgba(248,113,113,.32);
  --gold:#e0b341;

  /* ── 그림자: 다크에선 그림자가 안 보이므로 더 깊게 ── */
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 30px -18px rgba(0,0,0,.75);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);

  /* ── toss-theme.css 토큰 ── */
  --t-fg:#e7e9eb; --t-grey700:#c3c7cc; --t-grey600:#a8aeb5; --t-grey500:#9ba1a8;
  --t-muted:#9ba1a8; --t-surface:#17191c; --t-border:#34383e; --t-border-strong:#454a52;
  --t-success:#4ade80; --t-error:#f87171; --t-warning:#fbbf24; --t-info:#4ecdc4;
  --t-sh-1:0 1px 3px rgba(0,0,0,.5);
  --t-sh-2:0 2px 8px rgba(0,0,0,.55);
  --t-sh-3:0 4px 14px rgba(0,0,0,.62);
  --t-sh-4:0 8px 28px rgba(0,0,0,.7);

  /* ── sales.html 파이프라인 단계색 (칸반 — 다크에서 채도 낮추고 밝기 올림) ── */
  --contact:#60a5fa; --meet:#a78bfa; --nego:#fbbf24; --deal:#34d399;
  --after:#38bdf8; --lost:#f87171;
}

/* 전환 애니메이션 — 토글 순간 색이 부드럽게 바뀌도록.
   ⚠️ 인원 관리처럼 수백 행 표가 있는 화면에서 전역 * transition은 렉을 유발하므로
   body 수준으로만 제한한다. */
html[data-theme="dark"] body,
html[data-theme="light"] body{ transition:background-color .18s ease, color .18s ease; }

/* ═══════════════════════════════════════════════════════════════════════
   0. CSS 규칙 기반 밝은 배경·어두운 글자 대응 (2026-08-12 3차) — 자동 생성
   ─────────────────────────────────────────────────────────────────────
   인라인 안전망(섹션 3)은 `style=` 속성만 잡는다. `.selbtn{background:#fff}`
   같은 클래스 규칙은 못 잡아 고객 후보 선택·차단 카드가 흰 배경으로 남았다.
   12개 HTML의 <style>에서 선택자별 배경·글자를 추출해 색조별로 대응.
   배경 216개 · 글자 99개 선택자.
   ⚠️ 생성 규칙 3가지 안전장치:
      ① <script> 블록을 먼저 제거 — JS 템플릿 안의 <style> 문자열이 섞이면
         `' +'.g-badge` 같은 깨진 선택자가 들어가 그룹 전체가 무효화된다.
      ② 쉼표로 분리해 각각 접두사 — `dark A, B`로 묶으면 B는 접두사가 빠져
         라이트 모드까지 오염된다.
      ③ 선택자 화이트리스트 검증 + .knob·body 등 의도된 흰색 제외.
   ⚠️ 이 블록은 아래 수동 규칙보다 앞 — 같은 특이도면 나중 규칙이 이긴다. */

/* [배경] 중립 139개 */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .tw-xls tbody td,
html[data-theme="dark"] .input,
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field.sm input:focus,
html[data-theme="dark"] .field.sm select:focus,
html[data-theme="dark"] .field.sm textarea:focus,
html[data-theme="dark"] .tcell input:focus,
html[data-theme="dark"] td input:focus,
html[data-theme="dark"] td select:focus,
html[data-theme="dark"] .memtbl input:focus,
html[data-theme="dark"] .memtbl select:focus,
html[data-theme="dark"] input[type=file].input,
html[data-theme="dark"] .btn.sec,
html[data-theme="dark"] header.bar,
html[data-theme="dark"] .col,
html[data-theme="dark"] .ccard,
html[data-theme="dark"] .col.dragover,
html[data-theme="dark"] .org-exec-row.apex .org-person .rl,
html[data-theme="dark"] .org-trunk,
html[data-theme="dark"] .org-col,
html[data-theme="dark"] .org-col::before,
html[data-theme="dark"] .org-sup,
html[data-theme="dark"] .org-chip,
html[data-theme="dark"] .tab.on,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .cchip,
html[data-theme="dark"] .dh,
html[data-theme="dark"] .tcell input,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .field.sm input,
html[data-theme="dark"] .field.sm select,
html[data-theme="dark"] .field.sm textarea,
html[data-theme="dark"] .combo-list,
html[data-theme="dark"] .memtbl th,
html[data-theme="dark"] th.fzcol,
html[data-theme="dark"] td.fzcol,
html[data-theme="dark"] thead th.fzcol,
html[data-theme="dark"] .fzctl select,
html[data-theme="dark"] #undoPop .up-btn,
html[data-theme="dark"] .drow .dedit,
html[data-theme="dark"] .rrow .dedit,
html[data-theme="dark"] .rrow.cancelled .dedit,
html[data-theme="dark"] .ccard .dedit,
html[data-theme="dark"] textarea.cnote,
html[data-theme="dark"] .noteexp,
html[data-theme="dark"] .ccard-del,
html[data-theme="dark"] .scrape-prog-track,
html[data-theme="dark"] .bcal,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] header.topbar,
html[data-theme="dark"] .tabcfg-pop,
html[data-theme="dark"] #selfTourBox,
html[data-theme="dark"] #selfTourBox .st-demo,
html[data-theme="dark"] #selfTourBox .st-prev,
html[data-theme="dark"] .top .tag,
html[data-theme="dark"] .hdr-btn,
html[data-theme="dark"] .xls-item:hover,
html[data-theme="dark"] .menu-item:hover,
html[data-theme="dark"] .menu-item:active,
html[data-theme="dark"] .rtabs,
html[data-theme="dark"] .rtab.on,
html[data-theme="dark"] .vcbtn.sec,
html[data-theme="dark"] .vcbtn.sec:hover,
html[data-theme="dark"] .vc-chip,
html[data-theme="dark"] .vc-card,
html[data-theme="dark"] .vc-cap,
html[data-theme="dark"] .vc-acts,
html[data-theme="dark"] .fz-card,
html[data-theme="dark"] .fz-opt,
html[data-theme="dark"] .fz-opt:hover,
html[data-theme="dark"] .fz-cancel,
html[data-theme="dark"] .ctab,
html[data-theme="dark"] .rb-track,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .tier-head,
html[data-theme="dark"] .gd-step,
html[data-theme="dark"] .gd-toc a,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .gd-mock,
html[data-theme="dark"] .gd-flow .fstep,
html[data-theme="dark"] .pill.ghost,
html[data-theme="dark"] .pm.none,
html[data-theme="dark"] .thumb,
html[data-theme="dark"] .selbtn,
html[data-theme="dark"] tbody tr.blocked-row:hover,
html[data-theme="dark"] .blkbtn,
html[data-theme="dark"] .unblkbtn,
html[data-theme="dark"] .blk-card,
html[data-theme="dark"] .blk-mcancel,
html[data-theme="dark"] #tourDemo,
html[data-theme="dark"] #content .tbl-wrap tbody td,
html[data-theme="dark"] #content .tbl-wrap th.fzcol,
html[data-theme="dark"] #content .tbl-wrap td.fzcol,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] input,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] .login,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .col h3 .cnt,
html[data-theme="dark"] .card,
html[data-theme="dark"] .chip,
html[data-theme="dark"] th,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .qtab,
html[data-theme="dark"] .pvtbl th,
html[data-theme="dark"] .paychk,
html[data-theme="dark"] .ic-crow,
html[data-theme="dark"] .ic-crow:hover,
html[data-theme="dark"] .ic-tog::after,
html[data-theme="dark"] .ic-arw,
html[data-theme="dark"] .inbtbl th:nth-child(-n+3),
html[data-theme="dark"] .sec-card,
html[data-theme="dark"] .sline:hover,
html[data-theme="dark"] tbody tr,
html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] .bh-del,
html[data-theme="dark"] .bh-add,
html[data-theme="dark"] .bd-add,
html[data-theme="dark"] .bd-chip,
html[data-theme="dark"] .bd-chip button,
html[data-theme="dark"] .wrap,
html[data-theme="dark"] .pr-id-row,
html[data-theme="dark"] .pr-copy,
html[data-theme="dark"] .hero,
html[data-theme="dark"] section,
html[data-theme="dark"] .megac,
html[data-theme="dark"] .tiertab,
html[data-theme="dark"] .pcard,
html[data-theme="dark"] .pcard .img,
html[data-theme="dark"] .printbtn,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .intro,
html[data-theme="dark"] ul.rules li{
  background:var(--soft);
}

/* [배경] 파랑 14개 */
html[data-theme="dark"] .tw-xls tbody tr:hover td,
html[data-theme="dark"] .tag.kol,
html[data-theme="dark"] .tag.gen,
html[data-theme="dark"] .bcell.sel,
html[data-theme="dark"] .vc-camp-head,
html[data-theme="dark"] .fz-bar,
html[data-theme="dark"] .fz-opt.on,
html[data-theme="dark"] .pm.wh,
html[data-theme="dark"] .pm.ali,
html[data-theme="dark"] #content .tbl-wrap tbody tr:hover td,
html[data-theme="dark"] .chip.mgr,
html[data-theme="dark"] .ic-tog,
html[data-theme="dark"] .catbadge,
html[data-theme="dark"] .switch .track{
  background:var(--info-bg);
}

/* [배경] 초록 11개 */
html[data-theme="dark"] .cchip.on,
html[data-theme="dark"] .vc-allclear,
html[data-theme="dark"] .vc-camp-head.vc-done,
html[data-theme="dark"] tbody tr.confirmed-row,
html[data-theme="dark"] #content .tbl-wrap tbody tr.row-nc td,
html[data-theme="dark"] #content .tbl-wrap tbody tr.confirmed-row td,
html[data-theme="dark"] #content .tbl-wrap tbody tr.row-nc td.fzcol,
html[data-theme="dark"] #content .tbl-wrap tbody tr.confirmed-row td.fzcol,
html[data-theme="dark"] .chip.amt,
html[data-theme="dark"] .paychk:has(input:checked),
html[data-theme="dark"] .sharehint{
  background:var(--ok-bg);
}

/* [배경] 노랑·주황 14개 */
html[data-theme="dark"] .blk-c,
html[data-theme="dark"] .cchip.warn,
html[data-theme="dark"] .memtbl tbody tr.memrow-link-dead td.fzcol,
html[data-theme="dark"] .memtbl tr.memrow-link-dead,
html[data-theme="dark"] .memtbl tr.memrow-dirty td,
html[data-theme="dark"] .vc-newb,
html[data-theme="dark"] .guide-card .g-note,
html[data-theme="dark"] .sel-help,
html[data-theme="dark"] .msg-banner,
html[data-theme="dark"] .blk-tag.blk-c,
html[data-theme="dark"] .note,
html[data-theme="dark"] .dupbadge,
html[data-theme="dark"] .warn,
html[data-theme="dark"] .g-note{
  background:var(--warn-bg);
}

/* [배경] 빨강·분홍 37개 */
html[data-theme="dark"] .tw-xls tbody tr.tw-miss td,
html[data-theme="dark"] .tw-xls tbody tr.tw-miss:hover td,
html[data-theme="dark"] .org-exec,
html[data-theme="dark"] .org-sup.top,
html[data-theme="dark"] .org-col.dragover .org-col-b,
html[data-theme="dark"] .cchip.danger,
html[data-theme="dark"] .tag.mix,
html[data-theme="dark"] .tsum input,
html[data-theme="dark"] .memtbl tbody tr.memrow-cancelled td.fzcol,
html[data-theme="dark"] #undoPop .up-btn:hover,
html[data-theme="dark"] .drow .openbtn,
html[data-theme="dark"] .ccard-del:hover,
html[data-theme="dark"] .bcal-nav button:hover,
html[data-theme="dark"] .bcell:hover,
html[data-theme="dark"] .bcell.blk,
html[data-theme="dark"] .sb-tab.on,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .selbtn:hover:not(:disabled),
html[data-theme="dark"] .sel-badge,
html[data-theme="dark"] tbody tr.selected-row,
html[data-theme="dark"] tbody tr.selected-row:hover,
html[data-theme="dark"] #content .tbl-wrap tbody tr.row-canc td,
html[data-theme="dark"] #content .tbl-wrap tbody tr.blocked-row td,
html[data-theme="dark"] #content .tbl-wrap tbody tr.row-cand td,
html[data-theme="dark"] #content .tbl-wrap tbody tr.selected-row td,
html[data-theme="dark"] #content .tbl-wrap tbody tr.row-canc td.fzcol,
html[data-theme="dark"] #content .tbl-wrap tbody tr.blocked-row td.fzcol,
html[data-theme="dark"] #content .tbl-wrap tbody tr.row-cand td.fzcol,
html[data-theme="dark"] #content .tbl-wrap tbody tr.selected-row td.fzcol,
html[data-theme="dark"] .pvtbl tr.dup,
html[data-theme="dark"] .msg.err,
html[data-theme="dark"] .camp-banner,
html[data-theme="dark"] .pr-box,
html[data-theme="dark"] .pr-copy:hover,
html[data-theme="dark"] .agree,
html[data-theme="dark"] .chip.on,
html[data-theme="dark"] .pcard .hot{
  background:var(--danger-bg);
}

/* [배경] 보라 1개 */
html[data-theme="dark"] .cchip.remind{
  background:rgba(147,51,234,.16);
}

/* [글자] 중립 33개 */
html[data-theme="dark"] .input,
html[data-theme="dark"] .vform label,
html[data-theme="dark"] .col h3,
html[data-theme="dark"] .org-exec-row.sub .org-person,
html[data-theme="dark"] .org-sup,
html[data-theme="dark"] .org-sup b,
html[data-theme="dark"] .org-col.pool .org-col-h,
html[data-theme="dark"] .tag,
html[data-theme="dark"] #undoPop .up-btn,
html[data-theme="dark"] .bcal-nav button,
html[data-theme="dark"] .bcell,
html[data-theme="dark"] #selfTourBox .st-desc,
html[data-theme="dark"] .vc-cap,
html[data-theme="dark"] .fz-bar-desc,
html[data-theme="dark"] .fol,
html[data-theme="dark"] .num,
html[data-theme="dark"] .notice-doc h3,
html[data-theme="dark"] .notice-doc li,
html[data-theme="dark"] .notice-doc .when,
html[data-theme="dark"] .gd-toc a,
html[data-theme="dark"] .guide-card h3,
html[data-theme="dark"] .gd-points li,
html[data-theme="dark"] details.gd-more li,
html[data-theme="dark"] .field label,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] section li,
html[data-theme="dark"] footer b,
html[data-theme="dark"] .t-step span:last-child,
html[data-theme="dark"] ul.pts li,
html[data-theme="dark"] .rtab,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .intro,
html[data-theme="dark"] .card p{
  color:var(--ink);
}

/* [글자] 초록 11개 */
html[data-theme="dark"] .cchip.on,
html[data-theme="dark"] .vc-allclear,
html[data-theme="dark"] .vc-camp-head.vc-done,
html[data-theme="dark"] .chip.amt,
html[data-theme="dark"] .paychk:has(input:checked),
html[data-theme="dark"] .added .it,
html[data-theme="dark"] .sline .am.in,
html[data-theme="dark"] .sharehint,
html[data-theme="dark"] .sharehint b,
html[data-theme="dark"] .rtab.on[data-tab="client"],
html[data-theme="dark"] .gd-points li .pi{
  color:#6ee7a0;
}

/* [글자] 파랑 19개 */
html[data-theme="dark"] .cchip,
html[data-theme="dark"] .tag.gen,
html[data-theme="dark"] .bcell.sel,
html[data-theme="dark"] .vc-camp-head,
html[data-theme="dark"] .vc-camp-head .cnt,
html[data-theme="dark"] .vc-tags,
html[data-theme="dark"] .fz-bar-desc b,
html[data-theme="dark"] .fz-opt-chk,
html[data-theme="dark"] .guide-card .g-one,
html[data-theme="dark"] .pm.wh,
html[data-theme="dark"] .pm.ali,
html[data-theme="dark"] .cam-name::before,
html[data-theme="dark"] .tier-head .tl,
html[data-theme="dark"] .tier-head .dim,
html[data-theme="dark"] .cam-name,
html[data-theme="dark"] .chip.mgr,
html[data-theme="dark"] .ic-lbl,
html[data-theme="dark"] .ic-arw:hover:not(:disabled),
html[data-theme="dark"] .catbadge{
  color:#7cb3ff;
}

/* [글자] 노랑·주황 16개 */
html[data-theme="dark"] .blk-c,
html[data-theme="dark"] .cchip.warn,
html[data-theme="dark"] .tag.mix,
html[data-theme="dark"] .memtbl tr.memrow-link-dead td,
html[data-theme="dark"] .vc-newb,
html[data-theme="dark"] .guide-card .g-note,
html[data-theme="dark"] .sel-help,
html[data-theme="dark"] .msg-banner,
html[data-theme="dark"] .blk-tag.blk-c,
html[data-theme="dark"] .blkbtn:hover:not(:disabled),
html[data-theme="dark"] .unblkbtn,
html[data-theme="dark"] .note,
html[data-theme="dark"] .dupbadge,
html[data-theme="dark"] .sline .am.exp,
html[data-theme="dark"] .warn,
html[data-theme="dark"] .g-note{
  color:#fcd34d;
}

/* [글자] 보라 20개 */
html[data-theme="dark"] .org-exec-cap,
html[data-theme="dark"] .org-sup.top,
html[data-theme="dark"] .cchip.danger,
html[data-theme="dark"] .cchip.remind,
html[data-theme="dark"] .tag.kol,
html[data-theme="dark"] .tsum>span,
html[data-theme="dark"] .tsum input,
html[data-theme="dark"] .formsec,
html[data-theme="dark"] #undoPop .up-btn:hover,
html[data-theme="dark"] .bcal-dow span:first-child,
html[data-theme="dark"] .bcell.blk,
html[data-theme="dark"] .hdr-btn:hover,
html[data-theme="dark"] .vc-meta a:hover,
html[data-theme="dark"] .vc-linkbtn:hover,
html[data-theme="dark"] .ctab:hover:not(.on),
html[data-theme="dark"] .msg.err,
html[data-theme="dark"] .camp-banner,
html[data-theme="dark"] .pr-box .pt,
html[data-theme="dark"] .pr-box .pd,
html[data-theme="dark"] .agree{
  color:#c9a4f7;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. 하드코딩 오버라이드 — 인라인 <style> 안에서 변수를 안 쓰고
      #fff·#f2f4f6 등을 직접 박아둔 컴포넌트 (변수 재정의로 안 잡히는 곳)
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] body{ background:var(--bg); color:var(--ink); }

/* ── 공통 표면: 흰 배경으로 박힌 주요 컨테이너 ── */
html[data-theme="dark"] header.topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .box,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .tabcfg-pop,
html[data-theme="dark"] .menu,
html[data-theme="dark"] #moreMenu,
html[data-theme="dark"] .loginbox,
html[data-theme="dark"] .campaign,
html[data-theme="dark"] .cand-camp,
html[data-theme="dark"] .section,
html[data-theme="dark"] #selfTourBox,
html[data-theme="dark"] #tourDemo{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
}
/* .wrap 은 onboarding·notice에서 본문 컨테이너(흰 배경)로 쓰인다 */
html[data-theme="dark"] .wrap{ background:transparent; color:var(--ink); }
html[data-theme="dark"] body > .wrap{ background:var(--card); }

/* ── 표: 헤더 셀·zebra·격자 ── */
html[data-theme="dark"] table{ background:var(--card); color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] th{ background:var(--soft); color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] td{ border-color:var(--line); }
html[data-theme="dark"] tbody tr:hover td{ background:rgba(255,255,255,.035); }
html[data-theme="dark"] .memtbl th,
html[data-theme="dark"] .memtbl td{ border-color:var(--line); }
html[data-theme="dark"] .thclone{ background:var(--soft); }

/* ── 폼 요소 ── */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--soft);
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:#767c84; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-weak);
}
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled{ background:#1c1f23; color:#6c727a; }
/* 표 안 인풋은 배경 투명(격자 유지) — 라이트의 td input{border:transparent} 패턴 대응 */
html[data-theme="dark"] td input:not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] td select{ background:transparent; }
html[data-theme="dark"] td input:focus,
html[data-theme="dark"] td select:focus{ background:var(--soft); }
/* 날짜·시간 피커 아이콘이 다크에서 검게 묻히는 문제 */
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator{ filter:invert(.75); }

/* ── 버튼 ── */
html[data-theme="dark"] .btn.sec,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .hdr-btn{
  background:var(--soft);
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .btn.sec:not(:disabled):hover,
html[data-theme="dark"] .hdr-btn:hover{ background:var(--surface-hi); border-color:var(--line-strong); }
html[data-theme="dark"] .btn:disabled{ opacity:.45; }

/* ── 토스트·언두팝: 라이트에선 어두운 배경이라 다크에선 반대로 밝혀야 보인다 ── */
html[data-theme="dark"] .toast,
html[data-theme="dark"] #undoPop,
html[data-theme="dark"] #wjToast{ background:#3a3f47; color:#fff; }
html[data-theme="dark"] #memSaveBar{ background:#2b3038; color:#fff; }

/* ── 오버레이 딤: 다크에선 더 진하게 (배경이 이미 어두워 구분이 약함) ── */
html[data-theme="dark"] .scrim,
html[data-theme="dark"] .sb-scrim.show,
html[data-theme="dark"] .blk-modal,
html[data-theme="dark"] .fz-modal{ background:rgba(0,0,0,.66); }

/* ── 사이드바 탭 활성 상태 ── */
html[data-theme="dark"] .sidebar .tab.on,
html[data-theme="dark"] .sidebar .tab:hover{ background:var(--surface-hi); }

/* ── 클래스 조합으로 하드코딩된 밝은 배경 ──────────────────────────────
   admin.html은 `.drow .dedit{background:#fff}`처럼 클래스 2개(특이도 0,2,0)로
   흰 배경을 박아둔 곳이 있다. 태그 단위 규칙(html[data-theme] select = 0,1,2)
   으로는 특이도에서 져서 표 안 입력칸이 흰색으로 남는다.
   → 같은 클래스를 명시해 (0,2,1) 이상으로 올려 덮는다. !important 불필요. */
html[data-theme="dark"] .dedit,
html[data-theme="dark"] textarea.cnote,
html[data-theme="dark"] .noteexp{
  background:var(--soft);
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .dedit:focus,
html[data-theme="dark"] textarea.cnote:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-weak);
}
/* 취소(제외)된 행의 입력칸 — 라이트에선 옅은 분홍기, 다크에선 붉은기 도는 어두운 톤 */
html[data-theme="dark"] .rrow.cancelled .dedit{ background:#2b2426; color:#9d8f8f; }

/* ── 엑셀식 왼쪽 고정 열(sticky, .fzcol) ──
   ⚠️ 배경이 반드시 불투명해야 한다. 투명하면 가로 스크롤 시 뒤 셀 내용이
      고정 열 위로 비쳐 글자가 겹쳐 보인다(인원 관리 표에서 200칸). */
html[data-theme="dark"] th.fzcol,
html[data-theme="dark"] td.fzcol{ background:var(--card); }
html[data-theme="dark"] thead th.fzcol{ background:var(--soft); }
html[data-theme="dark"] tbody tr:hover td.fzcol{ background:var(--surface-hi); }

/* 인원 관리 상태 칩(연락·방문 체크 등) */
html[data-theme="dark"] .cchip{ background:var(--soft); color:var(--muted); border-color:var(--line); }
html[data-theme="dark"] .cchip.on,
html[data-theme="dark"] .cchip[aria-pressed="true"]{ background:var(--red-weak); color:var(--red-text); border-color:var(--red-weak-hover); }

/* ── 관리 대시보드 조직도 ── */
html[data-theme="dark"] .org-chip,
html[data-theme="dark"] .org-col{ background:var(--card); border-color:var(--line); }
html[data-theme="dark"] .org-chip:hover{ background:var(--surface-hi); }
html[data-theme="dark"] .org-exec{ background:rgba(229,23,44,.10); }
/* 최상단(apex) 역할 뱃지 — 라이트에선 흰 배경+레드 글씨 */
html[data-theme="dark"] .org-exec-row.apex .org-person .rl{ background:var(--card); color:var(--red-text); }

/* 캠페인 행 hover 시 나타나는 「열기」 버튼 — 연한 분홍 배경(#fdf2f3) */
html[data-theme="dark"] .drow .openbtn{
  background:rgba(229,23,44,.15);
  border-color:rgba(229,23,44,.34);
  color:var(--red-text);
}

/* 회색 뱃지(.tag) — 배경 #f2f2f3 / 글자 #555 */
html[data-theme="dark"] .tag{ background:var(--surface-hi); color:var(--muted); }

/* ─────────────────────────────────────────────────────────────────────────
   2-b. 콘텐츠 페이지 전용 (notice·tutorial·onboarding·portfolio·apply·join)
        이 페이지들은 admin과 달리 흰 카드를 태그/단일 클래스에 직접 박아뒀다.
        ⚠️ .knob(토글 스위치 손잡이)은 다크에서도 흰색이 맞으므로 건드리지 않는다.
   ───────────────────────────────────────────────────────────────────────── */
/* 흰 카드 표면 + 본문 글자 */
html[data-theme="dark"] section,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .pcard,
html[data-theme="dark"] header.bar{
  background:var(--card);
  color:var(--ink);
  border-color:var(--line);
}
/* 배경만 교체(글자색은 브랜드 레드 등 원래 의도를 유지해야 하는 버튼들) */
html[data-theme="dark"] .printbtn,
html[data-theme="dark"] .gd-toc a,
html[data-theme="dark"] .bh-add,
html[data-theme="dark"] .bh-del,
html[data-theme="dark"] .bd-add{
  background:var(--soft);
  border-color:var(--line);
}
html[data-theme="dark"] .printbtn,
html[data-theme="dark"] .gd-toc a{ color:var(--ink); }

/* 하드코딩된 진한 본문 글자 */
html[data-theme="dark"] section li,
html[data-theme="dark"] .guide-card h3,
html[data-theme="dark"] .guide-card p,
html[data-theme="dark"] .lede{ color:var(--ink); }

/* 상태 박스 — 연한 배경 + 진한 글자 조합 */
html[data-theme="dark"] .agree{ background:var(--danger-bg); border-color:var(--danger-line); color:var(--red-text); }
html[data-theme="dark"] .warn{ background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
html[data-theme="dark"] .g-note{ background:var(--soft); border-color:var(--line); color:var(--muted); }
html[data-theme="dark"] .intro{ background:var(--soft); color:var(--ink); }
html[data-theme="dark"] .pr-box{ background:rgba(229,23,44,.12); }
html[data-theme="dark"] .pcard .hot{ background:var(--danger-bg); color:var(--red-text); }
html[data-theme="dark"] .sharehint b,
html[data-theme="dark"] .rtab.on[data-tab="client"]{ color:var(--ok); }

/* tutorial — 단계 카드와 그 설명 문단 */
html[data-theme="dark"] .t-step{ border-color:var(--line); }
html[data-theme="dark"] .t-step span:last-child{ color:var(--ink); }
html[data-theme="dark"] .sharehint{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); }
html[data-theme="dark"] .rtab.on{ background:var(--surface-hi); color:var(--ink); }

/* onboarding — 번호 매긴 수칙 카드 (흰 배경 + 밝은 글자라 다크에서 글이 사라졌다) */
html[data-theme="dark"] ul.rules li{ background:var(--card); border-color:var(--line); color:var(--ink); }

/* portfolio — 카테고리 헤더는 JS가 업종별 파스텔 배경+진한 글자를 인라인으로 넣는다.
   색이 데이터마다 달라 안전망으로 못 잡으므로, 색 구분보다 가독성을 우선해 통일한다. */
html[data-theme="dark"] .cathead{ background:var(--soft)!important; color:var(--ink)!important; }

/* onboarding — 안내 카드 본문 (color:#333 하드코딩) */
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card b{ color:var(--ink); }

/* portfolio 토스트는 클래스가 아니라 #toast(ID)라 위의 .toast 규칙에 걸리지 않는다.
   라이트의 #1a1a1a는 다크 배경에서 거의 묻히므로 한 단계 밝은 표면으로. */
html[data-theme="dark"] #toast{ background:#3a3f47; color:#fff; }

/* ─────────────────────────────────────────────────────────────────────────
   2-c. c.html 고객 진행 리포트 — 고객이 보는 화면이라 가독성 우선.
        표 셀이 `#content .tbl-wrap tbody td{background:#fff}`로 고정돼 있어
        흰 배경 위에 밝은 글자가 얹히면 사실상 읽을 수 없게 된다.
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] #content .tbl-wrap tbody td,
html[data-theme="dark"] #content .tbl-wrap td.name-row,
html[data-theme="dark"] #content .tbl-wrap td.linkcell{ background:var(--card); }
html[data-theme="dark"] #content .tbl-wrap td.name-row{ color:var(--ink); }
html[data-theme="dark"] #content .tbl-wrap tbody tr:hover td{ background:var(--surface-hi); }
/* 표 헤더의 진한 남색(#244084)은 다크에서도 흰 글씨 대비가 충분하다 — 톤만 한 단계 낮춘다 */
html[data-theme="dark"] #content .tbl-wrap thead th,
html[data-theme="dark"] .thclone thead th{ background:#1e3567; }

/* 팔로워 티어 밴드(만 팔로워 / 천 팔로워) */
html[data-theme="dark"] .tier-head{ background:var(--soft); }
html[data-theme="dark"] .tier-head .tl{ color:var(--ink); }
html[data-theme="dark"] .tier-head .dim{ color:#8fa8d4!important; }

/* 링크 알약(프로필·게시물) */
html[data-theme="dark"] .pill{ background:rgba(229,23,44,.13); border-color:rgba(229,23,44,.30); color:var(--red-text); }
html[data-theme="dark"] .pill:hover{ background:var(--red); color:#fff; border-color:var(--red); }
html[data-theme="dark"] .pill.ghost{ background:var(--soft); border-color:var(--line); color:var(--muted); }
html[data-theme="dark"] .pm.wh{ background:var(--info-bg); border-color:var(--info-line); color:var(--info); }

/* ⚠️ c.html·폼 페이지의 전역 입력 규칙은 :not() 6개 체인이라 특이도가 (0,6,1)로
   매우 높다 — 태그 단위 규칙(0,1,2)으로는 절대 못 이긴다.
   같은 체인을 그대로 빌려 접두사만 붙여 덮는다. */
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=date]):not([type=time]):not([type=datetime-local]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background:var(--soft);
  color:var(--ink);
}
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{
  background:var(--surface-hi);
  border-color:var(--red);
}

/* 열 고정 안내바 / 요약 통계 카드 */
html[data-theme="dark"] .fz-bar{ background:var(--info-bg); border-color:var(--info-line); }
html[data-theme="dark"] .fz-bar-desc{ color:var(--ink); }
html[data-theme="dark"] .fz-bar-desc b{ color:var(--info); }
html[data-theme="dark"] .stat{ background:var(--card); border-color:var(--line); }

/* ⚠️ 보더 토큰(--line)을 '아주 옅은 글자색'으로 전용한 캘린더 날짜.
   다크에선 #34383e로 뒤집혀 배경과 거의 구분되지 않는다(스케줄 탭 지난달 날짜). */
html[data-theme="dark"] [style*="color:var(--line)"],
html[data-theme="dark"] [style*="color: var(--line)"]{ color:#7b818a!important; }

/* 연파랑 안내 박스(예약자 혼선 방지 등) — 인라인 배경 */
html[data-theme="dark"] [style*="background:#e8f0fe"]{
  background:var(--info-bg)!important;
  border-color:var(--info-line)!important;
  color:var(--ink)!important;
}

/* ── 진행상태 뱃지(.prog-pill) ──
   JS가 상태별 파스텔 배경 + 진한 글자를 인라인으로 넣는다(MPBG_C / MPCOL_C).
   상태 구분은 고객이 한눈에 읽는 핵심 정보이므로 통일하지 않고
   9개 상태 각각을 '어두운 틴트 배경 + 밝은 같은 계열 글자'로 대응시킨다. */
html[data-theme="dark"] .prog-pill[style*="#f1f5f9"]{ background:rgba(148,163,184,.18)!important; color:#cbd5e1!important; }  /* 컨펌전 */
html[data-theme="dark"] .prog-pill[style*="#eef4ff"]{ background:rgba(37,99,235,.20)!important;  color:#93c0ff!important; }  /* 컨펌완료 */
html[data-theme="dark"] .prog-pill[style*="#f5f0fe"]{ background:rgba(147,51,234,.20)!important; color:#c9a4f7!important; }  /* 방문예정 */
html[data-theme="dark"] .prog-pill[style*="#fff3e9"]{ background:rgba(234,88,12,.20)!important;  color:#fdba74!important; }  /* 방문완료 */
html[data-theme="dark"] .prog-pill[style*="#eafaf1"]{ background:rgba(22,163,74,.22)!important;  color:#6ee7a0!important; }  /* 업로드완료 */
html[data-theme="dark"] .prog-pill[style*="#fee2e2"]{ background:rgba(220,38,38,.20)!important;  color:#fca5a5!important; }  /* 취소 */
html[data-theme="dark"] .prog-pill[style*="#ecfeff"]{ background:rgba(8,145,178,.20)!important;  color:#67e8f9!important; }  /* 제품수령 전 */
html[data-theme="dark"] .prog-pill[style*="#fef3c7"]{ background:rgba(180,83,9,.24)!important;   color:#fcd34d!important; }  /* 배송중 */
html[data-theme="dark"] .prog-pill[style*="#ccfbf1"]{ background:rgba(13,148,136,.22)!important; color:#5eead4!important; }  /* 배송완료 */

/* ── 체험단원 리스트「참여 이력(클라이언트)」칩 (renderMemberList의 clientChip) ──
   JS가 배경·글자를 인라인으로 함께 넣는데, 위쪽 일괄 규칙들은 **배경만** 다크로
   바꾸고 글자(#374151·#9ca3af)는 인라인 그대로 남긴다 → 어두운 배경 + 어두운 글자.
   취소 칩(#f3f4f6)은 아예 일괄 목록에 없어 흰 배경 + 흐린 회색으로 남는다.
   → prog-pill과 같이 4개 상태를 '배경 + 글자' 쌍으로 대응한다.
   #memlistTbl로 스코프를 좁혀 다른 화면의 같은 색 요소에는 영향이 없다. */
html[data-theme="dark"] #memlistTbl [style*="background:#dcfce7"]{ background:rgba(22,163,74,.22)!important;   color:#6ee7a0!important; }  /* 🏪 방문 */
html[data-theme="dark"] #memlistTbl [style*="background:#dbeafe"]{ background:rgba(37,99,235,.22)!important;   color:#93c0ff!important; }  /* 📦 수령 */
html[data-theme="dark"] #memlistTbl [style*="background:#fef9c3"]{ background:rgba(180,83,9,.26)!important;    color:#fcd34d!important; }  /* 진행중 */
html[data-theme="dark"] #memlistTbl [style*="background:#f3f4f6"]{ background:rgba(148,163,184,.16)!important; color:#98a1ad!important; }  /* 취소(흐림+취소선) */

/* ── 밝은 그라디언트 배경 ─────────────────────────────────────────────
   ⚠️ 자동 생성기는 `background:#색` 형태만 찾아 **그라디언트를 통째로 놓쳤다**.
      그라디언트는 색이 2~3개라 평균 휘도로 판정해야 하고 방향·정지점 구조가
      제각각이라 일괄 생성이 어렵다 → 9곳을 개별 대응한다.
   발견 경로: 캠페인 정보의 「👥 모집 구성」(.tiergrp)과 고객 화면 모바일의
   캠페인 이름 밴드(.cam-head)가 흰 채로 남아 글자가 묻힌다는 제보. */
html[data-theme="dark"] .tiergrp{
  background:linear-gradient(180deg,var(--card),var(--soft));
  border-color:var(--line);
}
html[data-theme="dark"] .cam-head{
  background:linear-gradient(180deg,var(--card),var(--soft));
}
html[data-theme="dark"] .guide-card.master{
  background:linear-gradient(var(--card),var(--soft));
}
/* join.html 상단 헤더 — admin의 header.topbar(0,2,2)가 더 구체적이라 안 겹친다 */
html[data-theme="dark"] header{
  background:linear-gradient(180deg,var(--card),var(--soft));
}
/* 로딩 스켈레톤 — 밝은 회색 물결이 다크에서 번쩍인다 */
html[data-theme="dark"] .skel{
  background:linear-gradient(90deg,#22262b,#2e343b,#22262b);
}

/* 모집 구성 입력칸 — 합계(.tsum)는 라이트에서 연분홍+레드 강조 */
html[data-theme="dark"] .tcell input{ background:var(--soft); color:var(--ink); }
/* ⚠️ 합계 칸의 레드 강조는 위쪽 `input:not()` 6개 체인(특이도 0,7,2)에 밀린다.
   합계가 눈에 띄어야 등급별 입력을 검산할 수 있으므로 !important로 확정한다. */
html[data-theme="dark"] .tsum input{
  background:rgba(229,23,44,.14)!important;
  border-color:rgba(229,23,44,.34)!important;
  color:var(--red-text)!important;
}
html[data-theme="dark"] .tarrow{ color:var(--muted); }
html[data-theme="dark"] .formsec{ color:var(--red-text); border-bottom-color:rgba(229,23,44,.28); }

/* ── 구분선·링크·코드 ── */
html[data-theme="dark"] hr{ border-color:var(--line); background:var(--line); }
html[data-theme="dark"] a{ color:#7cb3ff; }
html[data-theme="dark"] a:visited{ color:#a892e0; }
html[data-theme="dark"] code,
html[data-theme="dark"] pre{ background:var(--soft); color:#e0c9a0; border-color:var(--line); }

/* ─────────────────────────────────────────────────────────────────────────
   3. 인라인 style 안전망 — JS 템플릿 문자열이 만드는 style="…" 잔여물
      ⚠️ 부분 문자열 매칭이라 경계에 주의: [style*="background:#fff"] 는
         #fff5f6 같은 6자리 색도 함께 잡는다. 그래서 세미콜론·공백·문자열 끝으로
         끝나는 경우만 좁혀 매칭한다. (대부분은 소스에서 var()로 치환됨)
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background:#fff "],
html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style$="background:#fff"],
html[data-theme="dark"] [style*="background:#ffffff;"],
html[data-theme="dark"] [style$="background:#ffffff"],
html[data-theme="dark"] [style*="background:white;"],
html[data-theme="dark"] [style$="background:white"]{
  background:var(--card)!important;
}

/* 연한 회색 배경 계열 (표 헤더·비활성 칸) */
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background:#f6f6f4"],
html[data-theme="dark"] [style*="background:#f6f7f9"],
html[data-theme="dark"] [style*="background:#f4f5f6"],
html[data-theme="dark"] [style*="background:#f2f4f6"],
html[data-theme="dark"] [style*="background:#f3f2ef"],
html[data-theme="dark"] [style*="background:#eef0f3"],
html[data-theme="dark"] [style*="background:#d7d7dc"]{
  background:var(--soft)!important;
}

/* 진한 텍스트가 인라인으로 박힌 경우 (다크 배경에서 안 보임) */
html[data-theme="dark"] [style*="color:#15171a"],
html[data-theme="dark"] [style*="color:#1a1a1a"],
html[data-theme="dark"] [style*="color:#191f28"],
html[data-theme="dark"] [style*="color:#22252a"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color:#000"]{
  color:var(--ink)!important;
}
/* 중간 회색 텍스트 */
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color:#888"],
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color:#bbb"],
html[data-theme="dark"] [style*="color:#6b7178"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color:#8a8f98"]{
  color:var(--muted)!important;
}

/* 레드 텍스트 — 다크 배경에서 #b3122a·#e5172c 는 대비 부족 → 밝은 레드로 */
html[data-theme="dark"] [style*="color:#b3122a"],
html[data-theme="dark"] [style*="color:#c2122a"],
html[data-theme="dark"] [style*="color:#b03040"],
html[data-theme="dark"] [style*="color:#b91c1c"],
html[data-theme="dark"] [style*="color:#e5172c"],
html[data-theme="dark"] [style*="color:#E5172C"]{
  color:var(--red-text)!important;
}
/* 상태 텍스트 (초록·파랑·주황) */
html[data-theme="dark"] [style*="color:#1a7f37"],
html[data-theme="dark"] [style*="color:#1e7e46"],
html[data-theme="dark"] [style*="color:#03b26c"]{ color:var(--ok)!important; }
html[data-theme="dark"] [style*="color:#1d4ed8"],
html[data-theme="dark"] [style*="color:#2563eb"]{ color:var(--info)!important; }
html[data-theme="dark"] [style*="color:#92560a"],
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color:#c2410c"],
html[data-theme="dark"] [style*="color:#c2671a"]{ color:var(--warn)!important; }

/* 연한 상태 배경 (뱃지·알림 박스) — 다크에선 반투명 틴트로 */
html[data-theme="dark"] [style*="background:#e9f7ef"],
html[data-theme="dark"] [style*="background:#ecfdf5"],
html[data-theme="dark"] [style*="background:#f0fdf4"]{ background:var(--ok-bg)!important; }
html[data-theme="dark"] [style*="background:#eef4ff"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background:#dbeafe"]{ background:var(--info-bg)!important; }
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background:#fff7ed"]{ background:var(--warn-bg)!important; }
html[data-theme="dark"] [style*="background:#fdecea"],
html[data-theme="dark"] [style*="background:#fff5f6"],
html[data-theme="dark"] [style*="background:#fff4f4"],
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background:#fef2f2"]{ background:var(--danger-bg)!important; }
/* 표 행 전체를 강조하는 경우 — tr에 배경을 주면 td가 위에 덮으므로 td까지 함께 */
html[data-theme="dark"] tr[style*="background:#fff4f4"] > td,
html[data-theme="dark"] tr[style*="background:#fff5f6"] > td{ background:rgba(229,23,44,.10)!important; }

/* 세그먼트 토글 트랙 배경 (보드 ↔ 담당자별 등) */
html[data-theme="dark"] [style*="background:#e8ebef"],
html[data-theme="dark"] [style*="background: #e8ebef"],
html[data-theme="dark"] [style*="background:#eef0f2"]{ background:var(--soft)!important; }

/* ⚠️ 다크모드 특유의 함정 — '텍스트 색 토큰(--ink)을 배경으로' 쓴 활성 표시.
   라이트: --ink(거의 검정) 배경 + 흰 글씨 = 또렷한 활성 상태.
   다크:   --ink가 밝은 회색으로 뒤집히는데 글자는 인라인 흰색 그대로 →
           흰 배경에 흰 글씨가 되어 완전히 사라진다(언어 전환 버튼에서 발견).
   → 흰 글씨를 살릴 수 있는 중간 명도 표면으로 고정한다(흰 글씨 대비 8.4:1). */
html[data-theme="dark"] [style*="background: var(--ink)"],
html[data-theme="dark"] [style*="background:var(--ink)"]{
  background:#4a5058!important;
  border-color:#4a5058!important;
}

/* 연한 베이지·크림 배경 (대기·심사 구분행 등) */
html[data-theme="dark"] [style*="background:#fbf3e6"],
html[data-theme="dark"] [style*="background:#fdf6e3"],
html[data-theme="dark"] [style*="background:#faf5eb"]{ background:var(--warn-bg)!important; }

/* ⚠️ 보더용 토큰(--t-border-strong)을 '옅은 글자색'으로 전용한 곳.
   라이트에선 연회색이라 자연스럽지만 다크에선 #454a52로 뒤집혀
   배경 대비 1.9:1 — 캘린더의 지난달 날짜가 사실상 보이지 않는다.
   → 옅은 느낌은 유지하되 읽히는 명도(대비 4.6:1)로 올린다. */
html[data-theme="dark"] [style*="color:var(--t-border-strong)"],
html[data-theme="dark"] [style*="color: var(--t-border-strong)"]{ color:#7b818a!important; }

/* 폼 필드 인풋 — .field 컨텍스트 규칙이 태그 단위 규칙을 이겨 밝게 남는다 */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field.sm input,
html[data-theme="dark"] .field.sm select,
html[data-theme="dark"] .field.sm textarea{
  background:var(--soft);
  color:var(--ink);
  border-color:var(--line);
}

/* ── sales.html(영업 CRM) 계열 파스텔 배경 ──
   이 페이지는 toss-theme을 안 쓰고 자체 스타일 체계라 KPI·표에 파스텔 배경을
   인라인으로 직접 넣는다. 색이 20종 넘게 흩어져 있어 계열별로 묶어 대응한다.
   ⚠️ 대소문자가 섞여 있어(#F7F8FA / #f7f8fa) 속성 선택자에 i 플래그를 쓴다. */
html[data-theme="dark"] [style*="background:#fafbfc" i],
html[data-theme="dark"] [style*="background:#f1f3f5" i],
html[data-theme="dark"] [style*="background:#f7f8fa" i],
html[data-theme="dark"] [style*="background:#eef0f3" i]{ background:var(--soft)!important; }

html[data-theme="dark"] [style*="background:#eef2ff" i]{ background:var(--info-bg)!important; }
html[data-theme="dark"] [style*="background:#f6f1ff" i]{ background:rgba(147,51,234,.16)!important; border-color:rgba(147,51,234,.32)!important; }
html[data-theme="dark"] [style*="background:#f0fbf4" i],
html[data-theme="dark"] [style*="background:#e7f7ee" i]{ background:var(--ok-bg)!important; border-color:var(--ok-line)!important; }
html[data-theme="dark"] [style*="background:#fffbe6" i],
html[data-theme="dark"] [style*="background:#fff4e5" i],
html[data-theme="dark"] [style*="background:#fff9f5" i]{ background:var(--warn-bg)!important; border-color:var(--warn-line)!important; }
html[data-theme="dark"] [style*="background:#fff7f7" i],
html[data-theme="dark"] [style*="background:#fde8eb" i],
html[data-theme="dark"] [style*="background:#fdf2f3" i]{ background:var(--danger-bg)!important; border-color:var(--danger-line)!important; }

/* 파이프라인 단계별 강조 행 — tr에 파스텔 배경, td가 그 위에 얹힌다.
   실제 렌더에서 수집한 색 목록 기준(추측 아님). */
html[data-theme="dark"] [style*="background:#f7f9ff" i],
html[data-theme="dark"] [style*="background:#f4f8ff" i],
html[data-theme="dark"] [style*="background:#f5fbff" i],
html[data-theme="dark"] [style*="background:#e3f2ff" i]{ background:var(--info-bg)!important; }
html[data-theme="dark"] [style*="background:#fffaf3" i],
html[data-theme="dark"] [style*="background:#fff3e0" i]{ background:var(--warn-bg)!important; }
html[data-theme="dark"] [style*="background:#faf6ff" i],
html[data-theme="dark"] [style*="background:#f3e8ff" i]{ background:rgba(147,51,234,.16)!important; }
/* 행에 배경이 있으면 셀은 투명이어야 색이 두 번 겹치지 않는다 */
html[data-theme="dark"] tr[style*="background:#f" i] > td{ background:transparent!important; }
/* 위 tr 배경이 td에 CSS로 되풀이 지정된 경우까지 커버 */
html[data-theme="dark"] td[style*="background:#f" i]{ background:transparent!important; }

/* sales 표 헤더·활성 탭·정산 체크 라벨 */
/* sales의 th는 자체 규칙(background:#fafbfc)이 끈질기게 남아 !important로 확정한다 */
html[data-theme="dark"] table th,
html[data-theme="dark"] th.inb-sort{ background:var(--soft)!important; }
html[data-theme="dark"] .tabs .tab.on{ background:var(--soft); }
html[data-theme="dark"] .tabs .tab.on{ background:var(--red-weak); color:var(--red-text); }
html[data-theme="dark"] .paychk{ background:var(--soft); color:var(--muted); border-color:var(--line); }
html[data-theme="dark"] .paychk:has(input:checked){ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
html[data-theme="dark"] .ii{ background:var(--soft); color:var(--ink); border-color:var(--line); }

/* 연한 보더 */
html[data-theme="dark"] [style*="border-color:#f3c9ce"],
html[data-theme="dark"] [style*="border-color:#9ad0a5"],
html[data-theme="dark"] [style*="border-color:#e9e9ec"],
html[data-theme="dark"] [style*="border-color:#e6e8eb"]{ border-color:var(--line)!important; }

/* ─────────────────────────────────────────────────────────────────────────
   4. 미디어 보정
   ───────────────────────────────────────────────────────────────────────── */
/* 흰 배경 로고·아이콘이 다크에서 눈부시지 않도록 살짝 눌러준다.
   ⚠️ 샤오홍슈 게시물 썸네일·왕홍 프로필 사진은 콘텐츠라 건드리지 않는다. */
html[data-theme="dark"] img:not(.no-dim):not(.thumb):not(.avatar):not(.post-img):not(.logo){
  filter:brightness(.92);
}

/* 스크롤바 (WebKit) */
html[data-theme="dark"] ::-webkit-scrollbar{ width:11px; height:11px; }
html[data-theme="dark"] ::-webkit-scrollbar-track{ background:var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#3d4249; border-radius:6px; border:2px solid var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:#4d525a; }

/* 선택 영역 */
html[data-theme="dark"] ::selection{ background:rgba(229,23,44,.38); color:#fff; }

/* ─────────────────────────────────────────────────────────────────────────
   5. 테마 토글 버튼 (theme.js 가 주입)
   ───────────────────────────────────────────────────────────────────────── */
.wj-theme-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--line, #e9e9ec);
  background:var(--card, #fff);
  color:var(--ink, #15171a);
  border-radius:9px; padding:7px 11px;
  font-size:13px; font-weight:600; line-height:1;
  font-family:inherit; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:background .14s ease, border-color .14s ease;
}
.wj-theme-btn:hover{ background:var(--soft, #fafafa); border-color:var(--line-strong, #d1d6db); }
.wj-theme-btn:focus-visible{ outline:2px solid var(--red, #E5172C); outline-offset:2px; }
.wj-theme-btn .wj-theme-ic{ font-size:14px; }

/* 헤더가 없는 페이지용 — 우상단 고정 배치 */
.wj-theme-btn.wj-float{
  position:fixed;
  top:calc(10px + env(safe-area-inset-top, 0px));
  right:12px;
  z-index:870;                 /* c.html #tourFab(880)·모달(990+) 아래 */
  box-shadow:0 2px 10px rgba(0,0,0,.14);
  padding:8px 10px;
}
html[data-theme="dark"] .wj-theme-btn.wj-float{ box-shadow:0 2px 12px rgba(0,0,0,.5); }

/* 모바일: 플로팅 버튼은 아이콘만 (라벨 숨김) */
@media (max-width:640px){
  .wj-theme-btn.wj-float .wj-theme-tx{ display:none; }
  .wj-theme-btn.wj-float{ padding:9px 10px; border-radius:999px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   6. 인라인 색 전수 대응 — 소스에서 추출해 자동 생성한 블록
   ═══════════════════════════════════════════════════════════════════════ */
/* ── 밝은 인라인 배경 일괄 대응 (2026-08-12 보강) ──────────────────────
   ⚠️ 이전에는 `background:#fff;`처럼 세미콜론으로 경계를 좁혀 매칭했는데,
      그 탓에 #fffdf5·#f7faff 같은 변형을 대부분 놓쳤다(정산 탭 PR 패널이
      흰 배경으로 남아 글자가 안 보이는 원인). 소스 전체에서 인라인 배경색을
      추출해 휘도 200 이상만 색조별로 묶어 대응한다. 총 89색.
   생성 근거: admin·c·sales 등 12개 HTML의 background:#xxxxxx 전수 스캔. */

/* 중립 회색 계열 26색 */
html[data-theme="dark"] [style*="background:#e7e7e8" i],
html[data-theme="dark"] [style*="background:#e9ecef" i],
html[data-theme="dark"] [style*="background:#ececef" i],
html[data-theme="dark"] [style*="background:#eceef0" i],
html[data-theme="dark"] [style*="background:#eceef1" i],
html[data-theme="dark"] [style*="background:#eceff2" i],
html[data-theme="dark"] [style*="background:#efeff0" i],
html[data-theme="dark"] [style*="background:#f0f0ef" i],
html[data-theme="dark"] [style*="background:#f1eceb" i],
html[data-theme="dark"] [style*="background:#f1f1f3" i],
html[data-theme="dark"] [style*="background:#f2f2f3" i],
html[data-theme="dark"] [style*="background:#f4f5f7" i],
html[data-theme="dark"] [style*="background:#f4f6f8" i],
html[data-theme="dark"] [style*="background:#f4f6fa" i],
html[data-theme="dark"] [style*="background:#f5f5f6" i],
html[data-theme="dark"] [style*="background:#f5f6f8" i],
html[data-theme="dark"] [style*="background:#f6faf7" i],
html[data-theme="dark"] [style*="background:#f7f2f2" i],
html[data-theme="dark"] [style*="background:#f7f7f8" i],
html[data-theme="dark"] [style*="background:#f7f8fc" i],
html[data-theme="dark"] [style*="background:#f7f9fc" i],
html[data-theme="dark"] [style*="background:#faf6f6" i],
html[data-theme="dark"] [style*="background:#fafafb" i],
html[data-theme="dark"] [style*="background:#fbfbfc" i],
html[data-theme="dark"] [style*="background:#fdf7f8" i],
html[data-theme="dark"] [style*="background:#fffafa" i]{
  background:var(--soft)!important;
}

/* 파랑 계열 17색 */
html[data-theme="dark"] [style*="background:#c8ccd4" i],
html[data-theme="dark"] [style*="background:#cfd4da" i],
html[data-theme="dark"] [style*="background:#d1d6db" i],
html[data-theme="dark"] [style*="background:#d3e3fd" i],
html[data-theme="dark"] [style*="background:#d8dbe0" i],
html[data-theme="dark"] [style*="background:#e0f2fe" i],
html[data-theme="dark"] [style*="background:#e9edf2" i],
html[data-theme="dark"] [style*="background:#eaf1fe" i],
html[data-theme="dark"] [style*="background:#eaf2fd" i],
html[data-theme="dark"] [style*="background:#edf3fc" i],
html[data-theme="dark"] [style*="background:#eef2f7" i],
html[data-theme="dark"] [style*="background:#f1f5f9" i],
html[data-theme="dark"] [style*="background:#f3eafe" i],
html[data-theme="dark"] [style*="background:#f5f3ff" i],
html[data-theme="dark"] [style*="background:#f6f8ff" i],
html[data-theme="dark"] [style*="background:#f7faff" i],
html[data-theme="dark"] [style*="background:#faf7ff" i]{
  background:var(--info-bg)!important;
}

/* 초록 계열 11색 */
html[data-theme="dark"] [style*="background:#dcfce7" i],
html[data-theme="dark"] [style*="background:#dff3e6" i],
html[data-theme="dark"] [style*="background:#e4f7ea" i],
html[data-theme="dark"] [style*="background:#e8f5e9" i],
html[data-theme="dark"] [style*="background:#eaf7ee" i],
html[data-theme="dark"] [style*="background:#eafaf0" i],
html[data-theme="dark"] [style*="background:#eafaf1" i],
html[data-theme="dark"] [style*="background:#eef6ef" i],
html[data-theme="dark"] [style*="background:#eef6f0" i],
html[data-theme="dark"] [style*="background:#f2faf5" i],
html[data-theme="dark"] [style*="background:#f3faf5" i]{
  background:var(--ok-bg)!important;
}

/* 노랑·주황 계열 11색 */
html[data-theme="dark"] [style*="background:#f5e8b0" i],
html[data-theme="dark"] [style*="background:#fde9c8" i],
html[data-theme="dark"] [style*="background:#fdf3dd" i],
html[data-theme="dark"] [style*="background:#fdf6e8" i],
html[data-theme="dark"] [style*="background:#fed7aa" i],
html[data-theme="dark"] [style*="background:#fef6e0" i],
html[data-theme="dark"] [style*="background:#fff3e6" i],
html[data-theme="dark"] [style*="background:#fff6da" i],
html[data-theme="dark"] [style*="background:#fff7e6" i],
html[data-theme="dark"] [style*="background:#fff8e1" i],
html[data-theme="dark"] [style*="background:#fff8e6" i]{
  background:var(--warn-bg)!important;
}

/* 빨강·분홍 계열 24색 */
html[data-theme="dark"] [style*="background:#f0ebe3" i],
html[data-theme="dark"] [style*="background:#f1ede6" i],
html[data-theme="dark"] [style*="background:#f3c9ce" i],
html[data-theme="dark"] [style*="background:#f4ecec" i],
html[data-theme="dark"] [style*="background:#fbdde3" i],
html[data-theme="dark"] [style*="background:#fbe9eb" i],
html[data-theme="dark"] [style*="background:#fceef0" i],
html[data-theme="dark"] [style*="background:#fde2e2" i],
html[data-theme="dark"] [style*="background:#fde8ea" i],
html[data-theme="dark"] [style*="background:#fdeaea" i],
html[data-theme="dark"] [style*="background:#fdecec" i],
html[data-theme="dark"] [style*="background:#fdecef" i],
html[data-theme="dark"] [style*="background:#fdeef0" i],
html[data-theme="dark"] [style*="background:#fdf2f8" i],
html[data-theme="dark"] [style*="background:#ffe1e4" i],
html[data-theme="dark"] [style*="background:#fff0f1" i],
html[data-theme="dark"] [style*="background:#fff1e6" i],
html[data-theme="dark"] [style*="background:#fff1f0" i],
html[data-theme="dark"] [style*="background:#fff1f2" i],
html[data-theme="dark"] [style*="background:#fff3e9" i],
html[data-theme="dark"] [style*="background:#fff3f3" i],
html[data-theme="dark"] [style*="background:#fff5f5" i],
html[data-theme="dark"] [style*="background:#fffaf0" i],
html[data-theme="dark"] [style*="background:#fffdf5" i]{
  background:var(--danger-bg)!important;
}

/* ── 어두운 인라인 글자색 일괄 대응 (2026-08-12 보강) ──────────────────
   배경을 어둡게 바꾸면 그 위에 인라인으로 박힌 진한 글자(#333·#1a7f37 등)가
   그대로 남아 읽히지 않는다. 휘도 118 이하 글자색을 색조별로 밝은 짝에 대응.
   총 69색 — 색 의미(초록=완료, 빨강=경고)는 유지한다. */

/* 중립(본문) 12색 */
html[data-theme="dark"] [style*="color:#111" i],
html[data-theme="dark"] [style*="color:#1b1d20" i],
html[data-theme="dark"] [style*="color:#1f2328" i],
html[data-theme="dark"] [style*="color:#222" i],
html[data-theme="dark"] [style*="color:#2c3137" i],
html[data-theme="dark"] [style*="color:#33383d" i],
html[data-theme="dark"] [style*="color:#3a3a3a" i],
html[data-theme="dark"] [style*="color:#3a3f45" i],
html[data-theme="dark"] [style*="color:#3b4046" i],
html[data-theme="dark"] [style*="color:#444" i],
html[data-theme="dark"] [style*="color:#555b63" i],
html[data-theme="dark"] [style*="color:#5a6068" i]{
  color:var(--ink)!important;
}

/* 빨강 7색 */
html[data-theme="dark"] [style*="color:#6b2a33" i],
html[data-theme="dark"] [style*="color:#7a2318" i],
html[data-theme="dark"] [style*="color:#7a2530" i],
html[data-theme="dark"] [style*="color:#9a5a60" i],
html[data-theme="dark"] [style*="color:#c00" i],
html[data-theme="dark"] [style*="color:#c0392b" i],
html[data-theme="dark"] [style*="color:#dc2626" i]{
  color:var(--red-text)!important;
}

/* 초록 9색 */
html[data-theme="dark"] [style*="color:#059669" i],
html[data-theme="dark"] [style*="color:#0a7d3c" i],
html[data-theme="dark"] [style*="color:#0a8a3a" i],
html[data-theme="dark"] [style*="color:#15803d" i],
html[data-theme="dark"] [style*="color:#166534" i],
html[data-theme="dark"] [style*="color:#1a5c2a" i],
html[data-theme="dark"] [style*="color:#3f7a4e" i],
html[data-theme="dark"] [style*="color:#475" i],
html[data-theme="dark"] [style*="color:#566" i]{
  color:#6ee7a0!important;
}

/* 파랑 22색 */
html[data-theme="dark"] [style*="color:#0369a1" i],
html[data-theme="dark"] [style*="color:#0b2a5b" i],
html[data-theme="dark"] [style*="color:#0b6ba8" i],
html[data-theme="dark"] [style*="color:#1a4d8f" i],
html[data-theme="dark"] [style*="color:#1d3c78" i],
html[data-theme="dark"] [style*="color:#1e40af" i],
html[data-theme="dark"] [style*="color:#23456e" i],
html[data-theme="dark"] [style*="color:#244084" i],
html[data-theme="dark"] [style*="color:#2f5fd0" i],
html[data-theme="dark"] [style*="color:#2f63c8" i],
html[data-theme="dark"] [style*="color:#333d4b" i],
html[data-theme="dark"] [style*="color:#334155" i],
html[data-theme="dark"] [style*="color:#33415c" i],
html[data-theme="dark"] [style*="color:#3730a3" i],
html[data-theme="dark"] [style*="color:#3d4350" i],
html[data-theme="dark"] [style*="color:#41598c" i],
html[data-theme="dark"] [style*="color:#4338ca" i],
html[data-theme="dark"] [style*="color:#475569" i],
html[data-theme="dark"] [style*="color:#4a5160" i],
html[data-theme="dark"] [style*="color:#4e5968" i],
html[data-theme="dark"] [style*="color:#64748b" i],
html[data-theme="dark"] [style*="color:#667" i]{
  color:#7cb3ff!important;
}

/* 노랑·주황 14색 */
html[data-theme="dark"] [style*="color:#78350f" i],
html[data-theme="dark"] [style*="color:#7a5b00" i],
html[data-theme="dark"] [style*="color:#7a5b14" i],
html[data-theme="dark"] [style*="color:#7a5d00" i],
html[data-theme="dark"] [style*="color:#7c4a02" i],
html[data-theme="dark"] [style*="color:#8a4b00" i],
html[data-theme="dark"] [style*="color:#8a6100" i],
html[data-theme="dark"] [style*="color:#8a6d00" i],
html[data-theme="dark"] [style*="color:#92400e" i],
html[data-theme="dark"] [style*="color:#92700a" i],
html[data-theme="dark"] [style*="color:#92703a" i],
html[data-theme="dark"] [style*="color:#9a3412" i],
html[data-theme="dark"] [style*="color:#a05a00" i],
html[data-theme="dark"] [style*="color:#a06a00" i]{
  color:#fcd34d!important;
}

/* 보라 5색 */
html[data-theme="dark"] [style*="color:#7a3fd0" i],
html[data-theme="dark"] [style*="color:#7c3aed" i],
html[data-theme="dark"] [style*="color:#8a1020" i],
html[data-theme="dark"] [style*="color:#a01020" i],
html[data-theme="dark"] [style*="color:#d32030" i]{
  color:#c9a4f7!important;
}

/* ── 밝은 인라인 테두리 일괄 대응 (2026-08-12 보강) ───────────────────
   배경·글자를 어둡게 바꿔도 테두리가 밝은 채로 남으면 어두운 화면에서
   흰 선처럼 튄다(정산 탭 PR 패널의 `solid #cfe0ff`). `solid #색`은
   테두리에만 쓰이는 패턴이라 배경·글자와 안전하게 구분된다.
   solid 57색 · border-color 18색. */

html[data-theme="dark"] [style*="solid #99d3cb" i],
html[data-theme="dark"] [style*="solid #b5e0bf" i],
html[data-theme="dark"] [style*="solid #bae6fd" i],
html[data-theme="dark"] [style*="solid #bcd0f5" i],
html[data-theme="dark"] [style*="solid #bfe3c9" i],
html[data-theme="dark"] [style*="solid #bfe3cb" i],
html[data-theme="dark"] [style*="solid #bfe6cd" i],
html[data-theme="dark"] [style*="solid #c2d4f1" i],
html[data-theme="dark"] [style*="solid #c3d5f5" i],
html[data-theme="dark"] [style*="solid #c7d2fe" i],
html[data-theme="dark"] [style*="solid #c7d8f5" i],
html[data-theme="dark"] [style*="solid #cbd5e1" i],
html[data-theme="dark"] [style*="solid #ccc" i],
html[data-theme="dark"] [style*="solid #ccced8" i],
html[data-theme="dark"] [style*="solid #ccdaf1" i],
html[data-theme="dark"] [style*="solid #cddcf5" i],
html[data-theme="dark"] [style*="solid #cfe0ff" i],
html[data-theme="dark"] [style*="solid #cfe6d6" i],
html[data-theme="dark"] [style*="solid #d6d7db" i],
html[data-theme="dark"] [style*="solid #d6e0ff" i],
html[data-theme="dark"] [style*="solid #d8dce2" i],
html[data-theme="dark"] [style*="solid #ddc9f5" i],
html[data-theme="dark"] [style*="solid #ddd" i],
html[data-theme="dark"] [style*="solid #ddd6fe" i],
html[data-theme="dark"] [style*="solid #dfe3e8" i],
html[data-theme="dark"] [style*="solid #dfe3ea" i],
html[data-theme="dark"] [style*="solid #e2e6ee" i],
html[data-theme="dark"] [style*="solid #e5c98a" i],
html[data-theme="dark"] [style*="solid #e5e7eb" i],
html[data-theme="dark"] [style*="solid #e5e8eb" i],
html[data-theme="dark"] [style*="solid #e6d488" i],
html[data-theme="dark"] [style*="solid #e6d8f5" i],
html[data-theme="dark"] [style*="solid #e6e9ef" i],
html[data-theme="dark"] [style*="solid #e7e0d6" i],
html[data-theme="dark"] [style*="solid #e8edf5" i],
html[data-theme="dark"] [style*="solid #eee" i],
html[data-theme="dark"] [style*="solid #eef0f2" i],
html[data-theme="dark"] [style*="solid #f0c5c5" i],
html[data-theme="dark"] [style*="solid #f0c8dd" i],
html[data-theme="dark"] [style*="solid #f0d0a0" i],
html[data-theme="dark"] [style*="solid #f0d0d5" i],
html[data-theme="dark"] [style*="solid #f0d4d8" i],
html[data-theme="dark"] [style*="solid #f0d98a" i],
html[data-theme="dark"] [style*="solid #f0e2bf" i],
html[data-theme="dark"] [style*="solid #f1d6da" i],
html[data-theme="dark"] [style*="solid #f2f2f4" i],
html[data-theme="dark"] [style*="solid #f2f4f6" i],
html[data-theme="dark"] [style*="solid #f3d3a3" i],
html[data-theme="dark"] [style*="solid #f3d3c2" i],
html[data-theme="dark"] [style*="solid #f3f3f5" i],
html[data-theme="dark"] [style*="solid #f6c9ce" i],
html[data-theme="dark"] [style*="solid #fcd34d" i],
html[data-theme="dark"] [style*="solid #fde68a" i],
html[data-theme="dark"] [style*="solid #fecaca" i],
html[data-theme="dark"] [style*="solid #fed7aa" i],
html[data-theme="dark"] [style*="solid #ffbdb3" i],
html[data-theme="dark"] [style*="solid #ffd591" i]{
  border-color:var(--line)!important;
}

html[data-theme="dark"] [style*="border-color:#86efac" i],
html[data-theme="dark"] [style*="border-color:#9ed9b3" i],
html[data-theme="dark"] [style*="border-color:#b5e0bf" i],
html[data-theme="dark"] [style*="border-color:#bbe5cb" i],
html[data-theme="dark"] [style*="border-color:#bcd0f5" i],
html[data-theme="dark"] [style*="border-color:#bcd4ff" i],
html[data-theme="dark"] [style*="border-color:#bfe3cb" i],
html[data-theme="dark"] [style*="border-color:#c7d2fe" i],
html[data-theme="dark"] [style*="border-color:#cddcf5" i],
html[data-theme="dark"] [style*="border-color:#cfe0cf" i],
html[data-theme="dark"] [style*="border-color:#cfe6d6" i],
html[data-theme="dark"] [style*="border-color:#d1d6db" i],
html[data-theme="dark"] [style*="border-color:#dcdcdf" i],
html[data-theme="dark"] [style*="border-color:#dcdce0" i],
html[data-theme="dark"] [style*="border-color:#ddd" i],
html[data-theme="dark"] [style*="border-color:#e6d488" i],
html[data-theme="dark"] [style*="border-color:#f3d3c2" i],
html[data-theme="dark"] [style*="border-color:#fcd34d" i]{
  border-color:var(--line)!important;
}

/* ── 인라인 색 rgb() 표기 대응 (2026-08-12 4차) ────────────────────────
   ⚠️ JS가 style을 한 번이라도 건드리면(예: `el.style.display='block'`)
      브라우저가 style 속성 전체를 재직렬화하며 `#fff` → `rgb(255, 255, 255)`
      로 정규화한다. 그러면 hex만 보는 안전망이 조용히 빗나간다.
      실제 사례: 고객 화면 모바일 「☰ 메뉴」(#menuSheet)가 열린 뒤에만
      흰 배경 + 흰 글씨가 되어 항목이 안 보였다.
   → 같은 색을 rgb() 표기로도 매칭한다. 배경 128색 · 글자 91색. */

/* [배경·rgb] 중립 39색 */
html[data-theme="dark"] [style*="background: rgb(215, 215, 220)"],
html[data-theme="dark"] [style*="background: rgb(231, 231, 232)"],
html[data-theme="dark"] [style*="background: rgb(233, 236, 239)"],
html[data-theme="dark"] [style*="background: rgb(236, 236, 239)"],
html[data-theme="dark"] [style*="background: rgb(236, 238, 240)"],
html[data-theme="dark"] [style*="background: rgb(236, 238, 241)"],
html[data-theme="dark"] [style*="background: rgb(236, 239, 242)"],
html[data-theme="dark"] [style*="background: rgb(238, 240, 243)"],
html[data-theme="dark"] [style*="background: rgb(239, 239, 240)"],
html[data-theme="dark"] [style*="background: rgb(240, 240, 239)"],
html[data-theme="dark"] [style*="background: rgb(241, 236, 235)"],
html[data-theme="dark"] [style*="background: rgb(241, 241, 243)"],
html[data-theme="dark"] [style*="background: rgb(241, 243, 245)"],
html[data-theme="dark"] [style*="background: rgb(242, 242, 243)"],
html[data-theme="dark"] [style*="background: rgb(242, 244, 246)"],
html[data-theme="dark"] [style*="background: rgb(243, 242, 239)"],
html[data-theme="dark"] [style*="background: rgb(244, 245, 246)"],
html[data-theme="dark"] [style*="background: rgb(244, 245, 247)"],
html[data-theme="dark"] [style*="background: rgb(244, 246, 248)"],
html[data-theme="dark"] [style*="background: rgb(244, 246, 250)"],
html[data-theme="dark"] [style*="background: rgb(245, 245, 246)"],
html[data-theme="dark"] [style*="background: rgb(245, 246, 248)"],
html[data-theme="dark"] [style*="background: rgb(246, 246, 244)"],
html[data-theme="dark"] [style*="background: rgb(246, 247, 249)"],
html[data-theme="dark"] [style*="background: rgb(246, 250, 247)"],
html[data-theme="dark"] [style*="background: rgb(247, 242, 242)"],
html[data-theme="dark"] [style*="background: rgb(247, 247, 248)"],
html[data-theme="dark"] [style*="background: rgb(247, 248, 250)"],
html[data-theme="dark"] [style*="background: rgb(247, 248, 252)"],
html[data-theme="dark"] [style*="background: rgb(247, 249, 252)"],
html[data-theme="dark"] [style*="background: rgb(249, 250, 251)"],
html[data-theme="dark"] [style*="background: rgb(250, 246, 246)"],
html[data-theme="dark"] [style*="background: rgb(250, 250, 250)"],
html[data-theme="dark"] [style*="background: rgb(250, 250, 251)"],
html[data-theme="dark"] [style*="background: rgb(250, 251, 252)"],
html[data-theme="dark"] [style*="background: rgb(251, 251, 252)"],
html[data-theme="dark"] [style*="background: rgb(253, 247, 248)"],
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background: rgb(255, 250, 250)"]{
  background:var(--soft)!important;
}

/* [배경·rgb] 파랑 25색 */
html[data-theme="dark"] [style*="background: rgb(200, 204, 212)"],
html[data-theme="dark"] [style*="background: rgb(207, 212, 218)"],
html[data-theme="dark"] [style*="background: rgb(209, 214, 219)"],
html[data-theme="dark"] [style*="background: rgb(211, 227, 253)"],
html[data-theme="dark"] [style*="background: rgb(216, 219, 224)"],
html[data-theme="dark"] [style*="background: rgb(219, 234, 254)"],
html[data-theme="dark"] [style*="background: rgb(224, 242, 254)"],
html[data-theme="dark"] [style*="background: rgb(232, 235, 239)"],
html[data-theme="dark"] [style*="background: rgb(232, 240, 254)"],
html[data-theme="dark"] [style*="background: rgb(233, 237, 242)"],
html[data-theme="dark"] [style*="background: rgb(234, 241, 254)"],
html[data-theme="dark"] [style*="background: rgb(234, 242, 253)"],
html[data-theme="dark"] [style*="background: rgb(237, 243, 252)"],
html[data-theme="dark"] [style*="background: rgb(238, 242, 247)"],
html[data-theme="dark"] [style*="background: rgb(238, 242, 255)"],
html[data-theme="dark"] [style*="background: rgb(238, 244, 255)"],
html[data-theme="dark"] [style*="background: rgb(239, 246, 255)"],
html[data-theme="dark"] [style*="background: rgb(241, 245, 249)"],
html[data-theme="dark"] [style*="background: rgb(243, 234, 254)"],
html[data-theme="dark"] [style*="background: rgb(244, 248, 255)"],
html[data-theme="dark"] [style*="background: rgb(245, 243, 255)"],
html[data-theme="dark"] [style*="background: rgb(246, 241, 255)"],
html[data-theme="dark"] [style*="background: rgb(246, 248, 255)"],
html[data-theme="dark"] [style*="background: rgb(247, 250, 255)"],
html[data-theme="dark"] [style*="background: rgb(250, 247, 255)"]{
  background:var(--info-bg)!important;
}

/* [배경·rgb] 초록 14색 */
html[data-theme="dark"] [style*="background: rgb(220, 252, 231)"],
html[data-theme="dark"] [style*="background: rgb(223, 243, 230)"],
html[data-theme="dark"] [style*="background: rgb(228, 247, 234)"],
html[data-theme="dark"] [style*="background: rgb(231, 247, 238)"],
html[data-theme="dark"] [style*="background: rgb(232, 245, 233)"],
html[data-theme="dark"] [style*="background: rgb(233, 247, 239)"],
html[data-theme="dark"] [style*="background: rgb(234, 247, 238)"],
html[data-theme="dark"] [style*="background: rgb(234, 250, 240)"],
html[data-theme="dark"] [style*="background: rgb(234, 250, 241)"],
html[data-theme="dark"] [style*="background: rgb(238, 246, 239)"],
html[data-theme="dark"] [style*="background: rgb(238, 246, 240)"],
html[data-theme="dark"] [style*="background: rgb(240, 251, 244)"],
html[data-theme="dark"] [style*="background: rgb(242, 250, 245)"],
html[data-theme="dark"] [style*="background: rgb(243, 250, 245)"]{
  background:var(--ok-bg)!important;
}

/* [배경·rgb] 노랑·주황 15색 */
html[data-theme="dark"] [style*="background: rgb(245, 232, 176)"],
html[data-theme="dark"] [style*="background: rgb(253, 233, 200)"],
html[data-theme="dark"] [style*="background: rgb(253, 243, 221)"],
html[data-theme="dark"] [style*="background: rgb(253, 246, 232)"],
html[data-theme="dark"] [style*="background: rgb(254, 215, 170)"],
html[data-theme="dark"] [style*="background: rgb(254, 243, 199)"],
html[data-theme="dark"] [style*="background: rgb(254, 246, 224)"],
html[data-theme="dark"] [style*="background: rgb(255, 243, 230)"],
html[data-theme="dark"] [style*="background: rgb(255, 244, 229)"],
html[data-theme="dark"] [style*="background: rgb(255, 246, 218)"],
html[data-theme="dark"] [style*="background: rgb(255, 247, 230)"],
html[data-theme="dark"] [style*="background: rgb(255, 248, 225)"],
html[data-theme="dark"] [style*="background: rgb(255, 248, 230)"],
html[data-theme="dark"] [style*="background: rgb(255, 251, 230)"],
html[data-theme="dark"] [style*="background: rgb(255, 251, 235)"]{
  background:var(--warn-bg)!important;
}

/* [배경·rgb] 빨강·분홍 34색 */
html[data-theme="dark"] [style*="background: rgb(240, 235, 227)"],
html[data-theme="dark"] [style*="background: rgb(241, 237, 230)"],
html[data-theme="dark"] [style*="background: rgb(243, 201, 206)"],
html[data-theme="dark"] [style*="background: rgb(244, 236, 236)"],
html[data-theme="dark"] [style*="background: rgb(251, 221, 227)"],
html[data-theme="dark"] [style*="background: rgb(251, 233, 235)"],
html[data-theme="dark"] [style*="background: rgb(252, 238, 240)"],
html[data-theme="dark"] [style*="background: rgb(253, 226, 226)"],
html[data-theme="dark"] [style*="background: rgb(253, 232, 234)"],
html[data-theme="dark"] [style*="background: rgb(253, 232, 235)"],
html[data-theme="dark"] [style*="background: rgb(253, 234, 234)"],
html[data-theme="dark"] [style*="background: rgb(253, 236, 234)"],
html[data-theme="dark"] [style*="background: rgb(253, 236, 236)"],
html[data-theme="dark"] [style*="background: rgb(253, 236, 239)"],
html[data-theme="dark"] [style*="background: rgb(253, 238, 240)"],
html[data-theme="dark"] [style*="background: rgb(253, 242, 243)"],
html[data-theme="dark"] [style*="background: rgb(253, 242, 248)"],
html[data-theme="dark"] [style*="background: rgb(254, 226, 226)"],
html[data-theme="dark"] [style*="background: rgb(254, 242, 242)"],
html[data-theme="dark"] [style*="background: rgb(255, 225, 228)"],
html[data-theme="dark"] [style*="background: rgb(255, 240, 241)"],
html[data-theme="dark"] [style*="background: rgb(255, 241, 230)"],
html[data-theme="dark"] [style*="background: rgb(255, 241, 240)"],
html[data-theme="dark"] [style*="background: rgb(255, 241, 242)"],
html[data-theme="dark"] [style*="background: rgb(255, 243, 233)"],
html[data-theme="dark"] [style*="background: rgb(255, 243, 243)"],
html[data-theme="dark"] [style*="background: rgb(255, 244, 244)"],
html[data-theme="dark"] [style*="background: rgb(255, 245, 245)"],
html[data-theme="dark"] [style*="background: rgb(255, 245, 246)"],
html[data-theme="dark"] [style*="background: rgb(255, 247, 237)"],
html[data-theme="dark"] [style*="background: rgb(255, 247, 247)"],
html[data-theme="dark"] [style*="background: rgb(255, 249, 245)"],
html[data-theme="dark"] [style*="background: rgb(255, 250, 240)"],
html[data-theme="dark"] [style*="background: rgb(255, 253, 245)"]{
  background:var(--danger-bg)!important;
}

/* [배경·rgb] 보라 1색 */
html[data-theme="dark"] [style*="background: rgb(243, 232, 255)"]{
  background:rgba(147,51,234,.16)!important;
}

/* [글자·rgb] 중립 19색 */
html[data-theme="dark"] [style*="color: rgb(17, 17, 17)"],
html[data-theme="dark"] [style*="color: rgb(21, 23, 26)"],
html[data-theme="dark"] [style*="color: rgb(26, 26, 26)"],
html[data-theme="dark"] [style*="color: rgb(27, 29, 32)"],
html[data-theme="dark"] [style*="color: rgb(31, 35, 40)"],
html[data-theme="dark"] [style*="color: rgb(34, 34, 34)"],
html[data-theme="dark"] [style*="color: rgb(34, 37, 42)"],
html[data-theme="dark"] [style*="color: rgb(44, 49, 55)"],
html[data-theme="dark"] [style*="color: rgb(51, 51, 51)"],
html[data-theme="dark"] [style*="color: rgb(51, 56, 61)"],
html[data-theme="dark"] [style*="color: rgb(58, 58, 58)"],
html[data-theme="dark"] [style*="color: rgb(58, 63, 69)"],
html[data-theme="dark"] [style*="color: rgb(59, 64, 70)"],
html[data-theme="dark"] [style*="color: rgb(68, 68, 68)"],
html[data-theme="dark"] [style*="color: rgb(85, 85, 85)"],
html[data-theme="dark"] [style*="color: rgb(85, 91, 99)"],
html[data-theme="dark"] [style*="color: rgb(90, 96, 104)"],
html[data-theme="dark"] [style*="color: rgb(102, 102, 102)"],
html[data-theme="dark"] [style*="color: rgb(107, 113, 120)"]{
  color:var(--ink)!important;
}

/* [글자·rgb] 빨강·분홍 8색 */
html[data-theme="dark"] [style*="color: rgb(107, 42, 51)"],
html[data-theme="dark"] [style*="color: rgb(122, 35, 24)"],
html[data-theme="dark"] [style*="color: rgb(122, 37, 48)"],
html[data-theme="dark"] [style*="color: rgb(154, 90, 96)"],
html[data-theme="dark"] [style*="color: rgb(185, 28, 28)"],
html[data-theme="dark"] [style*="color: rgb(204, 0, 0)"],
html[data-theme="dark"] [style*="color: rgb(192, 57, 43)"],
html[data-theme="dark"] [style*="color: rgb(220, 38, 38)"]{
  color:var(--red-text)!important;
}

/* [글자·rgb] 초록 11색 */
html[data-theme="dark"] [style*="color: rgb(5, 150, 105)"],
html[data-theme="dark"] [style*="color: rgb(10, 125, 60)"],
html[data-theme="dark"] [style*="color: rgb(10, 138, 58)"],
html[data-theme="dark"] [style*="color: rgb(21, 128, 61)"],
html[data-theme="dark"] [style*="color: rgb(22, 101, 52)"],
html[data-theme="dark"] [style*="color: rgb(26, 92, 42)"],
html[data-theme="dark"] [style*="color: rgb(26, 127, 55)"],
html[data-theme="dark"] [style*="color: rgb(30, 126, 70)"],
html[data-theme="dark"] [style*="color: rgb(63, 122, 78)"],
html[data-theme="dark"] [style*="color: rgb(68, 119, 85)"],
html[data-theme="dark"] [style*="color: rgb(85, 102, 102)"]{
  color:#6ee7a0!important;
}

/* [글자·rgb] 파랑 26색 */
html[data-theme="dark"] [style*="color: rgb(3, 105, 161)"],
html[data-theme="dark"] [style*="color: rgb(11, 42, 91)"],
html[data-theme="dark"] [style*="color: rgb(11, 107, 168)"],
html[data-theme="dark"] [style*="color: rgb(25, 31, 40)"],
html[data-theme="dark"] [style*="color: rgb(26, 77, 143)"],
html[data-theme="dark"] [style*="color: rgb(29, 60, 120)"],
html[data-theme="dark"] [style*="color: rgb(29, 78, 216)"],
html[data-theme="dark"] [style*="color: rgb(30, 64, 175)"],
html[data-theme="dark"] [style*="color: rgb(35, 69, 110)"],
html[data-theme="dark"] [style*="color: rgb(36, 64, 132)"],
html[data-theme="dark"] [style*="color: rgb(37, 99, 235)"],
html[data-theme="dark"] [style*="color: rgb(47, 95, 208)"],
html[data-theme="dark"] [style*="color: rgb(47, 99, 200)"],
html[data-theme="dark"] [style*="color: rgb(51, 61, 75)"],
html[data-theme="dark"] [style*="color: rgb(51, 65, 85)"],
html[data-theme="dark"] [style*="color: rgb(51, 65, 92)"],
html[data-theme="dark"] [style*="color: rgb(55, 48, 163)"],
html[data-theme="dark"] [style*="color: rgb(61, 67, 80)"],
html[data-theme="dark"] [style*="color: rgb(65, 89, 140)"],
html[data-theme="dark"] [style*="color: rgb(67, 56, 202)"],
html[data-theme="dark"] [style*="color: rgb(71, 85, 105)"],
html[data-theme="dark"] [style*="color: rgb(74, 81, 96)"],
html[data-theme="dark"] [style*="color: rgb(78, 89, 104)"],
html[data-theme="dark"] [style*="color: rgb(100, 116, 139)"],
html[data-theme="dark"] [style*="color: rgb(102, 102, 119)"],
html[data-theme="dark"] [style*="color: rgb(107, 114, 128)"]{
  color:#7cb3ff!important;
}

/* [글자·rgb] 노랑·주황 18색 */
html[data-theme="dark"] [style*="color: rgb(120, 53, 15)"],
html[data-theme="dark"] [style*="color: rgb(122, 91, 0)"],
html[data-theme="dark"] [style*="color: rgb(122, 91, 20)"],
html[data-theme="dark"] [style*="color: rgb(122, 93, 0)"],
html[data-theme="dark"] [style*="color: rgb(124, 74, 2)"],
html[data-theme="dark"] [style*="color: rgb(138, 75, 0)"],
html[data-theme="dark"] [style*="color: rgb(138, 97, 0)"],
html[data-theme="dark"] [style*="color: rgb(138, 109, 0)"],
html[data-theme="dark"] [style*="color: rgb(146, 64, 14)"],
html[data-theme="dark"] [style*="color: rgb(146, 86, 10)"],
html[data-theme="dark"] [style*="color: rgb(146, 112, 10)"],
html[data-theme="dark"] [style*="color: rgb(146, 112, 58)"],
html[data-theme="dark"] [style*="color: rgb(154, 52, 18)"],
html[data-theme="dark"] [style*="color: rgb(160, 90, 0)"],
html[data-theme="dark"] [style*="color: rgb(160, 106, 0)"],
html[data-theme="dark"] [style*="color: rgb(180, 83, 9)"],
html[data-theme="dark"] [style*="color: rgb(194, 65, 12)"],
html[data-theme="dark"] [style*="color: rgb(194, 103, 26)"]{
  color:#fcd34d!important;
}

/* [글자·rgb] 보라 9색 */
html[data-theme="dark"] [style*="color: rgb(122, 63, 208)"],
html[data-theme="dark"] [style*="color: rgb(124, 58, 237)"],
html[data-theme="dark"] [style*="color: rgb(138, 16, 32)"],
html[data-theme="dark"] [style*="color: rgb(160, 16, 32)"],
html[data-theme="dark"] [style*="color: rgb(176, 48, 64)"],
html[data-theme="dark"] [style*="color: rgb(179, 18, 42)"],
html[data-theme="dark"] [style*="color: rgb(194, 18, 42)"],
html[data-theme="dark"] [style*="color: rgb(211, 32, 48)"],
html[data-theme="dark"] [style*="color: rgb(229, 23, 44)"]{
  color:#c9a4f7!important;
}

/* ── 별도 CSS 파일의 `!important` 흰 배경 (toss-theme.css) ───────────────
   dark.css의 안전망은 **인라인 style**과 admin.html 내부 규칙을 겨냥해 만들어져,
   `toss-theme.css`처럼 별도 파일에서 `background:#fff!important`로 선언한 곳은
   특이도·!important 어느 쪽으로도 못 이겨 흰 채로 남았다.
   제보: 헤더 「⋯ 더보기」를 열면 항목이 **흰 배경 + 흰 글자(대비 1.03)** 라
   로그아웃(빨간 글자)만 보였다. 시트 컨테이너(#moreMenu)는 이미 어두웠고
   **그 안의 .btn.sm만** 흰색이었다 — 컨테이너만 보고 넘기면 놓친다. */
html[data-theme="dark"] .topbar-more-menu .btn.sm{
  background:transparent!important;
  color:var(--ink)!important;
  border-color:transparent!important;
}
html[data-theme="dark"] .topbar-more-menu .btn.sm:hover,
html[data-theme="dark"] .topbar-more-menu .btn.sm:active{ background:var(--surface-hi)!important; }
html[data-theme="dark"] .topbar-more-menu #logoutBtn{ color:var(--red-text)!important; }

/* 모바일 정산표 좌측 고정 열 + 시트형 표(.sheet-tbl) — 스크롤해도 가려야 하므로
   불투명 배경이 필요한 자리다. 투명이 아니라 **카드색**으로 바꾼다. */
html[data-theme="dark"] .payout-tbl th:first-child,
html[data-theme="dark"] .payout-tbl td:first-child,
html[data-theme="dark"] .payout-tbl th:nth-child(2),
html[data-theme="dark"] .payout-tbl td:nth-child(2){ background:var(--card)!important; }
html[data-theme="dark"] .sheet-tbl{ background:var(--card); }
html[data-theme="dark"] .sheet-tbl tbody td{ background:transparent; }
html[data-theme="dark"] .sheet-tbl tbody tr:hover td{ background:var(--surface-hi); }

/* ── 영업 CRM 인바운드 상태색 (sales.html의 INB_COLORS 7종) ─────────────
   `{bg, fg, row}` 세 색을 JS가 알약·행에 함께 인라인으로 넣는데, 배경 일부만
   스윕돼 **어두운 배경 + 어두운 글자**가 됐다(상태 select 옵션 대비 1.58).
   기존 블록이 이미 잡고 있는 색(#0369a1·#0a7d3c·#7c3aed 등)은 건드리지 않고
   **미대응 4쌍만** 채운다. */
html[data-theme="dark"] [style*="color:#3949ab" i]{ color:#93c0ff!important; }  /* 신규 */
html[data-theme="dark"] [style*="color:#c46a00" i]{ color:#fdba74!important; }  /* 부재중 */
html[data-theme="dark"] [style*="color:#0f766e" i]{ color:#5eead4!important; }  /* 입금대기 */
html[data-theme="dark"] [style*="color:#71717a" i]{ color:#a1a1aa!important; }  /* 실패 */
html[data-theme="dark"] [style*="background:#dff6f2" i]{ background:rgba(13,148,136,.16)!important; }  /* 입금대기 알약 */
html[data-theme="dark"] [style*="background:#f2fcfa" i]{ background:rgba(13,148,136,.10)!important; }  /* 입금대기 행 */
html[data-theme="dark"] [style*="background:#f4fbf6" i]{ background:rgba(22,163,74,.10)!important; }   /* 계약 행 */
html[data-theme="dark"] [style*="background:#f0f0f1" i]{ background:rgba(148,163,184,.14)!important; } /* 실패 */

/* 모바일 상단 햄버거(☰ 메뉴) — @media 안에서 배경을 받아 흰색으로 남는다.
   미디어 쿼리 안 규칙은 CSSMediaRule이라 선택자 추적에도 잘 안 잡힌다. */
html[data-theme="dark"] .sb-collapse,
html[data-theme="dark"] .topbar-burger{
  background:transparent!important;
  color:var(--muted)!important;
}
html[data-theme="dark"] .sb-collapse:hover,
html[data-theme="dark"] .topbar-burger:hover{
  background:var(--surface-hi)!important;
  color:var(--ink)!important;
}

/* ── 멤버표 진행상태 행 배경 (admin.html의 MPBG 9색) ────────────────────
   `<tr style="background:{MPBG[progress]}">`로 들어오는 행 색. 위쪽 일괄 규칙은
   9색 중 5색만 커버했고(그마저 컨펌전·컨펌완료가 같은 info-bg로 뭉개짐),
   #f5f0fe·#ecfeff·#ccfbf1·#fdf4ff 4색은 **밝은 채로 남아** 밝은 배경 + 밝은
   글자가 됐다(제보: 배송완료·제품수령 전 행의 금액·날짜가 안 보임, 대비 1.08).
   진행상태는 한눈에 읽는 핵심 정보라 뭉치지 않고 9색을 각각 대응한다.
   ⚠️ 행 배경은 글자 뒤에 깔리므로 알파를 .10~.16으로 낮게 — 뱃지(.prog-pill,
      .20~.24)보다 연하게 잡아야 td 글자(--ink) 대비가 유지된다.
   ⚠️ hex와 rgb() 표기를 **둘 다** 매칭한다 — 진행상태 select를 바꾸면
      `tr.style.background=MPBG[v]`가 실행되며 브라우저가 style 속성을
      재직렬화해 `background: rgb(...)`가 되어 hex 매칭이 조용히 빗나간다. */
html[data-theme="dark"] .memtbl tr[style*="background:#f1f5f9"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(241, 245, 249)"]{ background:rgba(148,163,184,.10)!important; }  /* 컨펌전 */
html[data-theme="dark"] .memtbl tr[style*="background:#eef4ff"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(238, 244, 255)"]{ background:rgba(37,99,235,.13)!important; }   /* 컨펌완료 */
html[data-theme="dark"] .memtbl tr[style*="background:#f5f0fe"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(245, 240, 254)"]{ background:rgba(147,51,234,.13)!important; }  /* 방문예정 */
html[data-theme="dark"] .memtbl tr[style*="background:#fff3e9"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(255, 243, 233)"]{ background:rgba(234,88,12,.13)!important; }   /* 방문완료 */
html[data-theme="dark"] .memtbl tr[style*="background:#eafaf1"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(234, 250, 241)"]{ background:rgba(22,163,74,.14)!important; }   /* 업로드완료 */
html[data-theme="dark"] .memtbl tr[style*="background:#ecfeff"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(236, 254, 255)"]{ background:rgba(8,145,178,.14)!important; }   /* 제품수령 전 */
html[data-theme="dark"] .memtbl tr[style*="background:#fef3c7"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(254, 243, 199)"]{ background:rgba(180,83,9,.16)!important; }    /* 배송중 */
html[data-theme="dark"] .memtbl tr[style*="background:#ccfbf1"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(204, 251, 241)"]{ background:rgba(13,148,136,.15)!important; }  /* 배송완료 */
html[data-theme="dark"] .memtbl tr[style*="background:#fdf4ff"],
html[data-theme="dark"] .memtbl tr[style*="background: rgb(253, 244, 255)"]{ background:rgba(192,38,211,.14)!important; }  /* 환불 */

/* ── 흰 글자 인라인 복구 (부분 문자열 매칭이 border-color를 삼킨다) ──────
   `[style*="color:#1d4ed8"]` 류의 글자색 규칙은 부분 문자열이라
   **`border-color:#1d4ed8`에도 걸린다**. 그래서 진한 배경 + 흰 글자로 만든
   버튼(`style="color:#fff;background:#1d4ed8;border-color:#1d4ed8"`)의 글자가
   밝은 파랑으로 바뀌어 파랑 배경 위 파랑 글자(대비 2.64)가 됐다.
   → 인라인에 흰 글자가 **명시된** 요소는 흰 글자로 되돌린다. 파일 맨 뒤에 두어
     같은 특이도에서 나중 규칙이 이기게 한다(대상: 📦 배송·🤝 배송·🏨 배송 등). */
html[data-theme="dark"] [style*="color:#fff;"],
html[data-theme="dark"] [style*="color:#ffffff;" i],
html[data-theme="dark"] [style*="color: rgb(255, 255, 255);"],
html[data-theme="dark"] [style$="color:#fff"],
html[data-theme="dark"] [style$="color:#ffffff" i]{ color:#fff!important; }

/* 인쇄 시에는 항상 라이트 (견적서·계약서 인쇄 품질 보존) */
@media print{
  html[data-theme="dark"]{ --bg:#fff; --card:#fff; --soft:#fafafa; --ink:#15171a; --muted:#6b7178; --line:#e9e9ec; }
  html[data-theme="dark"] body{ background:#fff; color:#15171a; }
  .wj-theme-btn{ display:none!important; }
}