/* theme.css — 화면 공용 밝은/어두운 테마.
 *
 * [왜] 세 화면(index · predmaint · predmaint-edge)이 전부 어두운 바탕이라
 *   캡처해서 인쇄하면 검은 종이가 나온다(사장님 2026-09-14). 화면은 이미
 *   :root 변수로만 색을 정하고 있어서, 변수만 갈아끼우면 밝은 판이 된다.
 *
 * [어떻게] html[data-theme="light"] 일 때 변수를 덮어쓴다. 각 화면의 <style>
 *   보다 선택자가 구체적이라 순서에 상관없이 이긴다. 인쇄(@media print)는
 *   토글과 무관하게 항상 밝은 판이다 — 인쇄가 검게 나오는 것이 문제의 시작이었다.
 *
 * [주의] 밝은 판의 강조색은 어두운 판보다 한 단계 짙다. 흰 종이 위에서
 *   #38bdf8(하늘색)·#fb923c(주황)은 대비가 2.5:1 도 안 나와 11px 글자가 안 읽힌다.
 */

:root{
  /* 화면 JS 가 '#fb923c' 를 직접 쓰던 자리를 var(--org) 로 바꿨다. 여기서 정한다. */
  --org:#fb923c;
  /* 강조 배경 위 글자색. 어두운 판은 밝은 하늘색 위에 짙은 글자. */
  --btnfg:#06263a;
  --btnfg-bad:#3a0d0d;
  --btnfg-warn:#3a2a06;
  /* 가장 깊은 바탕(엣지 화면의 계기판·JSON 상자). */
  --deep:#050a10;
}

html[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --card:#ffffff; --sb:#eef2f6;
  --line:#d5dde6; --fg:#0f172a; --mut:#526174;
  --acc:#0369a1; --ok:#047857; --warn:#b45309; --cau:#a16207;
  --bad:#b91c1c; --pri:#6d28d9; --org:#c2410c;
  --btnfg:#ffffff; --btnfg-bad:#ffffff; --btnfg-warn:#ffffff;
  --deep:#eef2f6;
  color-scheme:light;
}

/* ── 토글 버튼. JS 가 header / .topbar 끝에 붙인다. ─────────────────────── */
.theme-toggle{
  margin-left:8px; padding:4px 10px; border-radius:16px; font-size:12px; font-weight:700;
  background:transparent; color:var(--mut); border:1px solid var(--line); cursor:pointer;
  font-family:inherit; line-height:1.4; white-space:nowrap;
}
.theme-toggle:hover{color:var(--fg); border-color:var(--mut)}

/* ── 인쇄는 언제나 밝은 판. 캡처가 아니라 진짜 인쇄일 때를 위해. ───────── */
@media print{
  :root{
    --bg:#ffffff; --panel:#ffffff; --card:#ffffff; --sb:#ffffff;
    --line:#c8d0da; --fg:#000000; --mut:#444c56;
    --acc:#0369a1; --ok:#047857; --warn:#b45309; --cau:#a16207;
    --bad:#b91c1c; --pri:#6d28d9; --org:#c2410c;
    --btnfg:#ffffff; --btnfg-bad:#ffffff; --btnfg-warn:#ffffff;
    --deep:#f4f6f9;
  }
  .theme-toggle{display:none}
  /* 고정 사이드바·상단바는 종이에서 매 장마다 겹친다. */
  .sb,.topbar{position:static;height:auto}
  .layout{display:block}
}