/* 고수 허브 — 디자인 B-2 (10-24 원장님 결정 · wDs2) : 흰 바탕 · 옅은 하늘 + 흰 왼쪽 메뉴
   색 다섯 가지만: 바탕(흰 · 아주 옅은 회색) · 글자(짙은 회청) · 주색 #2370C8 하나 · 다음 단추 초록 #1B7F3A(다음 단추만) · 경고 빨강 #D03A3A
   · 선생님 · 원장 · 관리부 화면(index.html · demo.html) 맨 마지막 css. 학생 앱 · 학부모 · 키즈 · 인쇄 · 칠판(빔 .pz)은 안 바뀜.
   · 색은 기본 「밝게」만(어둡게 · 종이 · 바다 · 숲 · 분홍은 그대로). 강조색을 고른 사람은 주색 대신 그 강조색.
     기기가 어둡게인데 「밝게」를 직접 고른 경우는 예전 밝은 색 그대로(이 파일은 기기 밝게일 때만 색을 덮음).
   · 단추 크기는 모든 테마 공통. 패드(손가락)에선 최소 32px.
   · 전부 @media screen — 인쇄(학습지 · 시험지 · 평가지)는 안 바뀜.
   · js 안 style(rooms.js · step-bar.js · scope-band.js · class-board.js 등)은 선택자 무게로 덮음 — js 파일은 안 고침.
   시안: shots/wds1/시안B-2.css · 그림: shots/wds2/ · 시험: tools/qa/wds2_ui.mjs */

/* ════════ 1. 단추 크기 (모든 테마) ════════ */
@media screen {
  .btn { height: 36px; padding: 0 16px; font-size: 14px; border-radius: 8px; gap: 6px; }
  .btn .ic { width: 16px; height: 16px; }
  .btn.sm { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
  .btn.sm .ic { width: 14px; height: 14px; }
  .btn.lg { height: 42px; padding: 0 20px; font-size: 15px; }
  .btn.icon { width: 36px; } .btn.sm.icon { width: 28px; }
  .btn.next, .btn.sm.next { height: 38px; min-height: 38px; padding: 0 16px; font-size: 15px; }      /* 초록 다음 단추 44 → 38 (색 · 깜빡임 그대로) */
  .btn.pm-save { min-height: 38px; padding: 6px 16px; }
  .tc-todo .btn { min-height: 34px; }
  .chip { height: 28px; padding: 0 10px; font-size: 13px; }
  .tabs button, .tabs a { height: 38px; padding: 0 12px; font-size: 14px; }
  .ictabs > a, .ictabs > button { min-height: 40px; padding: 4px 12px 5px 6px; font-size: 14px; gap: 6px; }
  .tab-ic { width: 24px; height: 24px; } .tab-ic .ic { width: 14px; height: 14px; }
  .nav a { height: 34px; font-size: 13.5px; }      /* rDs2: 14px 이면 원장 메뉴 「시험지 · 프린트 올리기 NOW」가 두 줄로 꺾여 아래 줄과 겹침 → 예전 13.5px */
  .nav a .hot-dot { flex: none; white-space: nowrap; }
  .nav a .ic { width: 17px; height: 17px; }
  :root .td-tabs .td-tab { height: 34px; }
  :root .td-tabs .td-tab b { font-size: 14px; }
  .adm-tabs a { min-height: 38px; padding: 8px 14px; }
  .btn.xs { font-size: 13px; }      /* rDs2 10-24 반 카드 「시간」 등 작은 단추 글자 12 → 13px(teach.css) */
  :root .wz-ms .ms-row .btn.xs { font-size: 13px; }      /* rDs2 v358 만들기 화면 작은 단추 12.5 → 13px(sheet-wz.css) */
}
@media screen and (pointer: coarse) {      /* 패드 · 폰: 손가락 누르는 곳 최소 32px */
  .btn { height: 38px; } .btn.sm, .btn.sm.icon { height: 32px; min-width: 32px; } .chip { height: 32px; } .btn.icon { width: 38px; }
  .nav a { height: 38px; } :root .td-tabs .td-tab { height: 38px; }
}

/* ════════ 2. 색 (기본 「밝게」만) ════════ */
@media screen and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-skin]) {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F8FA; --line: #E5E7EB; --line-strong: #D1D5DB; --line-2: #F0F1F3; --chip: #F4F5F7; --mute-soft: #F1F2F4;
    --text: #1F2329; --text-2: #50565F; --text-3: #8B9099;
    --navy: #2A3A50; --navy-2: #34465E; --navy-3: #3F526B;
    --side-bg: #FFFFFF; --side-text: #50565F; --side-text-strong: #1F2329; --side-hover: #F4F5F7; --side-line: #E5E7EB;
    --ok: #1B7F3A; --ok-soft: #E8F4EC; --bad: #D03A3A; --bad-soft: #FCEDED;
    --sh-1: none; --sh-2: 0 1px 3px rgba(31, 35, 41, .06); --r: 8px; --r-lg: 10px; --r-xl: 12px;
    /* 탭 아이콘 8색 → 5색 */
    --t-blue: #2370C8; --t-violet: #2370C8; --t-teal: #2370C8; --t-green: #1B7F3A; --t-slate: #6A7A8E; --t-amber: #A06C10; --t-orange: #A06C10; --t-rose: #D03A3A;
    --st-att: #D03A3A; --st-att-soft: #FCEDED; --st-live: #1B7F3A; --st-live-soft: #E8F4EC; --st-end: #6A7A8E; --st-end-soft: #EFF3F7;
    --todo-bg: #FDF7E7; --todo-line: #EDD79B; --todo-ink: #7C5B10;
    --bfz-warn: #A06C10; --bfz-warn-soft: #FDF7E7;
    --acc-g: #1B7F3A; --acc-g-soft: #E8F4EC;
    --g-o: #5E6E82; --g-n: #5E6E82; --g-s: #5E6E82;
  }
  /* 주색 = 강조색을 안 고른 사람만 (강조색 8개는 theme.css 그대로) */
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) {
    --brand: #2370C8; --brand-hover: #1D60AE; --brand-press: #184F90; --brand-soft: #EAF4FD; --brand-line: #A9CFF0; --on-brand: #fff;
    --side-active-bg: #EAF4FD;
    --focus: 0 0 0 3px rgba(35, 112, 200, .25);
    --glow: radial-gradient(circle at 85% -10%, rgba(35, 112, 200, .25), rgba(35, 112, 200, 0) 55%);
  }
  :root:not([data-theme="dark"]):not([data-skin]) {
    /* 지금 보는 반 칩 = 주색 · 다른 오늘 반 = 흰 바탕 + 옅은 주색 테두리 */
    --td-on-bg: var(--brand); --td-on-tx: #fff; --td-go-bg: #FFFFFF; --td-go-bd: var(--brand-line); --td-go-tx: var(--brand-hover); --td-go-hv: var(--brand-soft); --td-soon-bd: var(--brand); --td-past-bg: #F1F4F8; --td-past-bd: #DDE4EC; --td-past-tx: #6A7A8E;
    --bfz-vio: var(--brand); --bfz-vio-soft: var(--brand-soft); --bfz-teal: var(--brand); --bfz-teal-soft: var(--brand-soft);
    --g-q: var(--brand); --g-r: var(--brand);
    --side-active-bg: var(--brand-soft);
  }

  /* ── 고른 것 = 진한 채움 대신 회색 선 + 옅은 하늘 ── */
  /* rDs2: 「.btn { border-color: 회색 }」 뺌 — 무게 (0,4,0) 이라 주 단추 · 위험 · 초록 · 투명(ghost) 단추 테두리까지 회색으로 덮음. 테두리는 --line-strong 값만 바꿔도 됨 */
  :root:not([data-theme="dark"]):not([data-skin]) .btn.primary { box-shadow: none; }
  :root:not([data-theme="dark"]):not([data-skin]) .chip.active, :root:not([data-theme="dark"]):not([data-skin]) .chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-press); font-weight: 700; }
  :root:not([data-theme="dark"]):not([data-skin]) .tabs button.active, :root:not([data-theme="dark"]):not([data-skin]) .tabs a.active { color: var(--text); font-weight: 800; }
  :root:not([data-theme="dark"]):not([data-skin]) .tabs button.active::after, :root:not([data-theme="dark"]):not([data-skin]) .tabs a.active::after { background: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]) .ictabs > a.on, :root:not([data-theme="dark"]):not([data-skin]) .ictabs > button.on { background: transparent; }
  :root:not([data-theme="dark"]):not([data-skin]) .ictabs > a.on::after, :root:not([data-theme="dark"]):not([data-skin]) .ictabs > button.on::after { background: var(--text); height: 2px; }
  :root:not([data-theme="dark"]):not([data-skin]) .wz-seg button.on, :root:not([data-theme="dark"]):not([data-skin]) .wz-lv button.on { background: var(--brand-soft); color: var(--brand-press); border-color: var(--brand-line); }

  /* ── 만들기 화면(.wz)은 따로 코발트 색 묶음 → 같은 색으로 ── */
  :root:not([data-theme="dark"]):not([data-skin]) .wz { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F8FA; --mute-soft: #F1F2F4; --line: #E5E7EB; --line-strong: #D1D5DB; --text: #1F2329; --text-2: #50565F; --text-3: #8B9099; --navy: #2A3A50; --p-coral: #D03A3A; }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .wz { --brand: #2370C8; --brand-hover: #1D60AE; --brand-press: #184F90; --brand-soft: #EAF4FD; --brand-line: #A9CFF0; }
  :root:not([data-theme="dark"]):not([data-skin]) .wz { --p-acc: var(--brand); --p-acc-hover: var(--brand-hover); --p-acc-text: var(--brand-press); --p-acc-soft: var(--brand-soft); --p-acc-line: var(--brand-line); --p-sky: var(--brand); --p-teal: var(--brand); --p-violet: var(--brand); }

  /* ── 왼쪽 메뉴: 흰 바탕 + 옅은 오른쪽 선 · 고른 줄만 옅은 하늘 · 로고 뒤 작은 남색 네모 ── */
  :root:not([data-theme="dark"]):not([data-skin]) .sidebar { border-right: 1px solid var(--line); }
  :root:not([data-theme="dark"]):not([data-skin]) .sidebar .brand b, :root:not([data-theme="dark"]):not([data-skin]) .sidebar .foot .me { color: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav a:hover { color: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav a.active { color: var(--brand-press); font-weight: 700; }
  :root:not([data-theme="dark"]):not([data-skin]) .nav a.active .ic { color: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav a.active::before { background: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav .group { color: var(--text-3); }
  :root:not([data-theme="dark"]):not([data-skin]) .sidebar .avatar { background: var(--brand-soft); color: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]) .sidebar .brand img { background: #2A3A50; border-radius: 9px; padding: 4px; }      /* 흰 글자 로고가 흰 바탕에 묻히지 않게 */

  /* ── 반 색 띠 3~4px 옅게 · 반 색 글자는 주색 · 「반 고치기」 = 흰 바탕 + 빨간 테두리(wDs3 원장님 10-24) ── */
  :root:not([data-theme="dark"]):not([data-skin]) .rms-card::before { width: 3px; opacity: .55; }
  :root:not([data-theme="dark"]):not([data-skin]) .rms-card.today { border-color: color-mix(in srgb, var(--cc, #888) 28%, var(--line)); }
  :root:not([data-theme="dark"]):not([data-skin]) .rms-card.on { border: 1.5px solid color-mix(in srgb, var(--cc, #888) 45%, var(--line)); box-shadow: none; }
  :root:not([data-theme="dark"]):not([data-skin]) .rms-card:hover { box-shadow: var(--sh-2); transform: none; }
  :root:not([data-theme="dark"]):not([data-skin]) .rms-room, :root:not([data-theme="dark"]):not([data-skin]) .rms-go { color: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]) .rms-tdy { background: color-mix(in srgb, var(--cc, #888) 70%, #fff); }
  :root:not([data-theme="dark"]):not([data-skin]) .th2-cls .bar, :root:not([data-theme="dark"]):not([data-skin]) .th2-cl .bar, :root:not([data-theme="dark"]):not([data-skin]) .tc-bar, :root:not([data-theme="dark"]):not([data-skin]) .kb-bar, :root:not([data-theme="dark"]):not([data-skin]) .lb-h .cb { opacity: .5; width: 3px; }
  :root:not([data-theme="dark"]):not([data-skin]) #cl .cls-card.cls-c:not(.on) { background: color-mix(in srgb, var(--cc, #888) 5%, var(--surface)); border-color: var(--line); border-left: 4px solid color-mix(in srgb, var(--cc, #888) 60%, #fff) !important; }
  html.pg-room:root:not([data-theme="dark"]):not([data-skin]) .td-tab.on { background: var(--td-on-bg); }
  :root:not([data-theme="dark"]):not([data-skin]) body .btn.cls-adm-btn { background: var(--surface); border: 1.5px solid var(--bad); color: var(--bad); font-size: 14px; }      /* wDs3 10-24 원장님 「반 고치기 · 추가 · 삭제」 = 빨강으로 되돌림(흰 바탕 + 빨간 테두리 · 글자) */
  :root:not([data-theme="dark"]):not([data-skin]) body .btn.cls-adm-btn svg { color: var(--bad); }      /* wDs3 */
  :root:not([data-theme="dark"]):not([data-skin]) body .btn.cls-adm-btn:hover, :root:not([data-theme="dark"]):not([data-skin]) body .btn.cls-adm-btn:focus-visible { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }      /* wDs3 */
  :root:not([data-theme="dark"]):not([data-skin]) body .btn.cls-adm-btn:hover svg { color: var(--bad); }      /* wDs3 */

  /* ── 학습지 만들기 ② 범위 띠: 하늘 · 파랑 · 남색 → 주색 하나 (scope-band.js SB_CSS 덮음) ── */
  :root:not([data-theme="dark"]):not([data-skin]) :is(.sb-sky, .sb-blue, .sb-navy, .sb-cl, .sb-chip, .sb-big, .sb-src) { --sb-c: var(--brand); --sb-bg: var(--brand-soft); --sb-bd: var(--brand-line); --sb-soft: var(--surface); --sb-ring: color-mix(in srgb, var(--brand) 14%, transparent); }
  :root:not([data-theme="dark"]):not([data-skin]) .sb-cga.on, :root:not([data-theme="dark"]):not([data-skin]) .sb-clt .cp-sort button.on { border-color: var(--brand); color: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]) .sb-cga.on .sb-ck { background: var(--brand); border-color: var(--brand); }

/* ── 수업 탭 · 내 학습지 · 홈에 색이 박힌 단추 정리: 주 단추 = 주색 채움 하나 · 나머지 = 흰 바탕 + 회색 테두리 · 다음 단추만 초록 깜빡 ── */
  /* 주 단추(주색 채움): 수업 탭 「학습지 만들기」(예전 초록) */
  :root:not([data-theme="dark"]):not([data-skin]) .bfz .bfz-btn.kb-mk { background: var(--brand); border-color: var(--brand); color: #fff; }
  :root:not([data-theme="dark"]):not([data-skin]) .bfz .bfz-btn.kb-mk:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
  /* 나머지 = 흰 바탕 + 회색 테두리 */
  :root:not([data-theme="dark"]):not([data-skin]) .bfz .bfz-btn.pr:not(.gnext):not(.kb-mk):not(:disabled), :root:not([data-theme="dark"]):not([data-skin]) .bfz .bfz-btn.soft,
  :root:not([data-theme="dark"]):not([data-skin]) body .btn.ms-cam, :root:not([data-theme="dark"]):not([data-skin]) body .btn.ms-d1ed, :root:not([data-theme="dark"]):not([data-skin]) body .dte-b.blue, :root:not([data-theme="dark"]):not([data-skin]) body .dtm-b[data-ded][style],
  :root:not([data-theme="dark"]):not([data-skin]) body .ms-acts .btn.primary, :root:not([data-theme="dark"]):not([data-skin]) body .btn.primary[data-mk="sheet"],
  :root:not([data-theme="dark"]):not([data-skin]) body .bfz .kb-hwall { background: var(--surface) !important; border: 1px solid var(--line-strong) !important; color: var(--text) !important; filter: none; box-shadow: none; }
  :root:not([data-theme="dark"]):not([data-skin]) .bfz .bfz-btn.pr:disabled { background: var(--surface); border-color: var(--line); color: var(--text-3); }
  :root:not([data-theme="dark"]):not([data-skin]) :is(.bfz .bfz-btn.pr:not(.gnext):not(.kb-mk), .bfz .bfz-btn.soft, body .btn.ms-cam, body .btn.ms-d1ed, body .dte-b.blue, body .ms-acts .btn.primary, body .btn.primary[data-mk="sheet"], body .bfz .kb-hwall):not(:disabled):hover { background: var(--brand-soft) !important; border-color: var(--brand-line) !important; color: var(--brand-press) !important; }
  :root:not([data-theme="dark"]):not([data-skin]) body .btn.ms-cam .ic { background: currentColor; }
  /* 앱 설치 「바로 설치」(예전 초록 · inst-core.js 안 !important) → 흰 바탕 + 주색 글자 */
  :root:not([data-theme="dark"]):not([data-skin]) body .btn.gi-ready, :root:not([data-theme="dark"]):not([data-skin]) body button.gi-ready { background: var(--surface) !important; color: var(--brand) !important; border: 1px solid var(--brand-line) !important; }
  /* 고른 칸(진한 남색 · 파랑 채움) → 옅은 하늘 + 주색 글자 */
  :root:not([data-theme="dark"]):not([data-skin]) body .ms-cc.on, :root:not([data-theme="dark"]):not([data-skin]) body .kb-seg button.on, :root:not([data-theme="dark"]):not([data-skin]) body .rms-chips button.on, :root:not([data-theme="dark"]):not([data-skin]) body .wz .wz-seg button.on, :root:not([data-theme="dark"]):not([data-skin]) body .wz [data-evn].on, :root:not([data-theme="dark"]):not([data-skin]) body .wz .wz-lv button.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-press); }
  :root:not([data-theme="dark"]):not([data-skin]) body .ms-cc.on small { color: var(--brand-press); opacity: .8; }
  /* 고르는 칸(.seg 라디오 · 진한 남색) → 옅은 하늘 · 메뉴 「카메라」 남색~청록 띠 → 주색 하나 */
  :root:not([data-theme="dark"]):not([data-skin]) body .seg:not(.wo-seg) input:checked + span { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-press); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav .nav-pair a.nav-cam { background: var(--brand); color: #fff; font-size: 13px !important; }
  :root:not([data-theme="dark"]):not([data-skin]) .nav .nav-pair a.nav-cam:hover, :root:not([data-theme="dark"]):not([data-skin]) .nav .nav-pair a.nav-cam.on { background: var(--brand-hover); filter: none; color: #fff; }
  /* 관리부 왼쪽 메뉴(mgmt-nav.js 안 style — 어두운 메뉴용 흰 글자) → 흰 메뉴에 맞게 · 빨강 「수납 · 돈 받기」 = 흰 바탕 + 빨간 테두리 · 글자 */
  :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav a { color: var(--side-text); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav a:hover { color: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav a.active { color: var(--brand-press); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav .group { color: var(--text-2); background: var(--surface-2); border-left-color: var(--brand-line); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav .mg-gh small, :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav a.mg-big small { color: var(--text-3); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav a.mg-red { background: var(--surface); color: var(--bad); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 60%, var(--line)); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav a.mg-red .ic { color: var(--bad); }
  :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav a.mg-red:hover, :root:not([data-theme="dark"]):not([data-skin]) .nav.mg-nav a.mg-red.active { background: var(--bad-soft); color: var(--bad); outline: 0; box-shadow: inset 0 0 0 1.5px var(--bad); }
  /* 범위 띠 나머지 박힌 파랑 */
  :root:not([data-theme="dark"]):not([data-skin]) .sb-band { --sb-c: var(--brand); --sb-bg: var(--brand-soft); --sb-bd: var(--brand-line); --sb-soft: var(--surface); --sb-ring: color-mix(in srgb, var(--brand) 14%, transparent); }
  :root:not([data-theme="dark"]):not([data-skin]) .sb-clt .cp-sort button.on { background: var(--brand-soft); }
  :root:not([data-theme="dark"]):not([data-skin]) .sb-cg.today .sb-cgh > span { color: var(--brand); }
  /* rDs2: 메뉴 「NOW」 표시 — 어두운 메뉴용 옅은 주황 글자(home-b2d.css)가 흰 메뉴에서 안 보임 → 옅은 빨강 바탕 + 빨강 글자 */
  :root:not([data-theme="dark"]):not([data-skin]) .nav a .hot-dot { background: var(--bad-soft); color: var(--bad); }
  /* ── wDs3 10-24 원장님: 진한 남색 띠 → 흰 바탕 + 옅은 테두리 · 글자 진하게 · 강조 주색 (밝게 · 강조색 안 고른 사람만 — 다크 · 강조색은 예전 그대로) ── */
  /* 원장 「수업하기 — 『선생님』으로 들어가기」(왼쪽 메뉴 위 카드 · 홈 큰 띠 · 수업 주소 안내) — hub.css .teach-go 남색 그라데이션 */
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .teach-go { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--sh-2); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .teach-go > .ic:first-child { color: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .teach-go .tgo-t b { color: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .teach-go .tgo-t small { color: var(--text-2); opacity: 1; }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .teach-go > .ic:last-child { color: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .teach-go:hover { filter: none; background: var(--brand-soft); border-color: var(--brand-line); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .teach-go:focus-visible { outline: 3px solid var(--brand-line); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .teach-go-home { border-left: 4px solid var(--brand); }
  /* 관리부 첫 화면 맨 위 「관리부」 띠(desk.css .dk-top 남색 · 안의 흰 글자 · 흰 테두리 단추) */
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-top { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-who b { color: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-who small { color: var(--text-2); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-who small.bad { color: var(--bad); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-now { border-left-color: var(--line); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-clock .ck-box { background: var(--surface-2); border-color: var(--line); color: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-clock > span, :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-live { color: var(--text-2); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-live b { color: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-brsel button { border-color: var(--line-strong); color: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-brsel button.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-press); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-exam button, :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-exam .dk-got { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-exam button.hot { background: var(--brand-soft); color: var(--brand-press); box-shadow: inset 0 0 0 1px var(--brand-line); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-exam .dk-addexam { background: none; box-shadow: none; border: 1px dashed var(--line-strong); color: var(--text-2); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-top .dk-ib { border-color: var(--line-strong); color: var(--text) !important; }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-top .dk-ib:hover { background: var(--brand-soft); border-color: var(--brand-line); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-top .dk-ib.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-press) !important; }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-top .dk-mic.on { background: var(--ok); border-color: var(--ok); color: #fff !important; }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-find { background: var(--surface-2); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-find input { color: var(--text); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .dk-find input::placeholder { color: var(--text-3); }
  /* 사용 설명서 주제 머리 카드(「체험하기」 등 — help.css .hp-hero 진한 그라데이션) */
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .hp-hero { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-left: 4px solid var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .hp-hero small { color: var(--brand-press); opacity: 1; }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .hp-hero p { color: var(--text-2); opacity: 1; }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .hp-hero .hp-ic.big { background: var(--brand-soft); color: var(--brand); }
  :root:not([data-theme="dark"]):not([data-skin]):not([data-accent]) .hp-hero .hp-ic.big .ic { background: var(--brand); }
  /* 메뉴 묶음 이름 13px */
  :root:not([data-theme="dark"]):not([data-skin]) .nav .group { font-size: 13px; }
}