/* 고수 허브 — 화면 꾸미기 (10-06 원장님: 「선생님이 색감을 골랐으면, 재미있잖아」) · js/theme.js
   바탕 테마: 밝게(기본) · 어둡게(data-theme=dark) · 종이 · 바다 · 숲 · 분홍(data-theme=light + data-skin)
   강조색 8개: data-accent (없으면 파랑). 단추·링크·선택 표시만 바뀐다.
   인쇄물(학습지·문제집 iframe)과 수업 화면(빔 .pz)은 자기 색을 따로 써서 바뀌지 않는다.
   index.html 맨 마지막 css — 같은 무게의 앞 규칙을 덮는다. */

/* ---------- 1. 바탕 테마 (밝은 계열만 — 어둡게는 app.css 그대로) ---------- */
:root[data-theme="light"][data-skin="paper"] {      /* 종이: 따뜻한 크림, 눈 편함 */
  --bg: #F5EFE3; --surface: #FFFCF5; --surface-2: #FAF4E8; --line: #E6DCC8; --line-strong: #D3C5AB; --line-2: #EFE7D7; --chip: #F2EADB;
  --text: #2A2117; --text-2: #574A39; --text-3: #7A6B55; --mute-soft: #EFE7D6;
  --navy: #3A2F24; --navy-2: #4A3D2F; --navy-3: #5A4B3A;
  --side-bg: #3A2F24; --side-text: #D9CCB6; --side-hover: #4A3D2F; --side-line: #5A4B3A;
}
:root[data-theme="light"][data-skin="sea"] {        /* 바다: 아주 옅은 하늘빛 + 남색 사이드바 */
  --bg: #EDF5FC; --surface: #FFFFFF; --surface-2: #F2F8FD; --line: #D6E5F2; --line-strong: #BCD2E6; --line-2: #E6F0F9; --chip: #E6F0F9;
  --text: #0B1B30; --text-2: #3A506B; --text-3: #5F7690; --mute-soft: #E5EEF7;
  --navy: #0E2A52; --navy-2: #173A6B; --navy-3: #214A82;
  --side-bg: #0E2A52; --side-text: #BFD2EA; --side-hover: #173A6B; --side-line: #214A82;
}
:root[data-theme="light"][data-skin="forest"] {     /* 숲: 아주 옅은 초록 + 짙은 초록 사이드바 */
  --bg: #EEF5EE; --surface: #FFFFFF; --surface-2: #F3F8F2; --line: #D8E6D6; --line-strong: #BFD4BC; --line-2: #E5EFE4; --chip: #E5EFE4;
  --text: #12221A; --text-2: #3C5244; --text-3: #607867; --mute-soft: #E4EDE3;
  --navy: #163D2B; --navy-2: #1F4F38; --navy-3: #2A6146;
  --side-bg: #163D2B; --side-text: #C3D9CB; --side-hover: #1F4F38; --side-line: #2A6146;
}
:root[data-theme="light"][data-skin="pink"] {       /* 분홍: 옅은 분홍 + 자두색 사이드바 */
  --bg: #FBF0F3; --surface: #FFFFFF; --surface-2: #FDF5F7; --line: #F0DCE3; --line-strong: #E2C3CF; --line-2: #F7E8ED; --chip: #F7E8ED;
  --text: #2A1520; --text-2: #5C4150; --text-3: #846475; --mute-soft: #F4E6EB;
  --navy: #4A1D3A; --navy-2: #5C2649; --navy-3: #6E3058;
  --side-bg: #4A1D3A; --side-text: #E6CAD8; --side-hover: #5C2649; --side-line: #6E3058;
}
/* 하얀 판으로 박혀 있던 곳을 테마 면 색으로 */
:root[data-skin][data-theme="light"] .demo-bar { background: var(--surface-2); }
:root[data-skin][data-theme="light"] .topbar { background: var(--bg); }

/* ---------- 2. 강조색 (단추·링크·선택 표시) ---------- */
:root[data-accent="navy"]   { --acc: #1E3A8A; --acc-h: #182F72; --acc-p: #13265C; }
:root[data-accent="teal"]   { --acc: #0B7A7B; --acc-h: #096566; --acc-p: #075253; }
:root[data-accent="green"]  { --acc: #1B7A43; --acc-h: #166637; --acc-p: #11522C; }
:root[data-accent="orange"] { --acc: #C0530A; --acc-h: #A44608; --acc-p: #883A06; }
:root[data-accent="red"]    { --acc: #C62F37; --acc-h: #A9262D; --acc-p: #8C1F25; }
:root[data-accent="purple"] { --acc: #6D3AC9; --acc-h: #5B2FAD; --acc-p: #4A2690; }
:root[data-accent="pink"]   { --acc: #BE2F6E; --acc-h: #A3275E; --acc-p: #87204E; }
:root[data-accent] {
  --brand: var(--acc); --brand-hover: var(--acc-h); --brand-press: var(--acc-p);
  --brand-soft: color-mix(in srgb, var(--acc) 9%, var(--surface));
  --brand-line: color-mix(in srgb, var(--acc) 30%, var(--surface));
  --focus: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent);
  --side-active-bg: color-mix(in srgb, var(--acc) 34%, transparent);
}
/* 파랑이 박혀 있던 곳도 강조색으로 */
:root[data-accent] .btn.primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 25%, transparent); }
:root[data-accent] .page-nav .pn-back { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #fff)); }
:root[data-accent] .page-nav .pn-back { box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent); }
:root[data-accent] .lv-head i { background: var(--brand); }
:root[data-accent] .filters button.f-high.on { background: var(--brand); border-color: var(--brand); }
:root[data-accent] .xpl-btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
/* 어두운 바탕에서는 강조색을 밝게 */
:root[data-theme="dark"][data-accent] {
  --brand: color-mix(in srgb, var(--acc) 80%, #fff); --brand-hover: color-mix(in srgb, var(--acc) 70%, #fff); --brand-press: color-mix(in srgb, var(--acc) 90%, #fff);
  --brand-soft: color-mix(in srgb, var(--acc) 20%, transparent); --brand-line: color-mix(in srgb, var(--acc) 45%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent] {
    --brand: color-mix(in srgb, var(--acc) 80%, #fff); --brand-hover: color-mix(in srgb, var(--acc) 70%, #fff); --brand-press: color-mix(in srgb, var(--acc) 90%, #fff);
    --brand-soft: color-mix(in srgb, var(--acc) 20%, transparent); --brand-line: color-mix(in srgb, var(--acc) 45%, transparent);
  }
}

/* ---------- 3. 「화면 꾸미기」 판 ---------- */
.lk { color: var(--text); font-size: 13.5px; }
.lk-pop { position: fixed; z-index: 3000; width: 316px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); box-shadow: var(--sh-3); padding: 14px 14px 12px; }
.lk h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.lk-skins { margin-bottom: 14px; }
.lk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lk-head b { font-size: 15px; }
.lk-x { border: 0; background: transparent; color: var(--text-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.lk-x:hover { background: var(--surface-2); }
.lk-skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lk-skin { border: 2px solid var(--line); background: var(--surface); border-radius: 12px; padding: 6px 6px 5px; cursor: pointer; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; display: grid; gap: 4px; text-align: center; }
.lk-skin:hover { border-color: var(--line-strong); }
.lk-skin.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.lk-mini { display: flex; height: 38px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.lk-mini i { display: block; width: 26%; background: var(--ms); }
.lk-mini span { flex: 1; background: var(--mb); padding: 5px; display: grid; gap: 3px; align-content: start; }
.lk-mini em { display: block; height: 7px; border-radius: 3px; background: var(--mc); }
.lk-mini em + em { width: 60%; height: 5px; background: var(--ma, var(--brand)); }
.lk-accs { display: flex; flex-wrap: wrap; gap: 7px; }
.lk-acc { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset; }
.lk-acc.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.lk-acc.on::after { content: ""; position: absolute; inset: 0; background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.lk-acc-n { font-size: 12px; color: var(--text-2); margin: 10px 0 12px; min-height: 16px; }
.lk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.lk-foot small { color: var(--text-3); font-size: 11.5px; line-height: 1.4; }
.lk-reset { flex: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 8px; height: 32px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lk-reset:hover { border-color: var(--brand); color: var(--brand); }
.lk-in { max-width: 440px; }      /* 설정 화면 안에 그대로 넣을 때 */
.lk-in .lk-head { display: none; }
@media (max-width: 640px) {
  .lk-pop { left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
}
@media print { .lk-pop { display: none !important; } }

/* ---------- 4. 어둡게: 남색 글자가 바탕에 묻히던 곳(제목·고른 탭) → 본문 글자색 ---------- */
:root[data-theme="dark"] .ms-tabs button.on, :root[data-theme="dark"] .ms-gr, :root[data-theme="dark"] .wz-tab.on, :root[data-theme="dark"] .wz-tab:hover, :root[data-theme="dark"] .wz-sec h4, :root[data-theme="dark"] .wz-tree-h h4, :root[data-theme="dark"] .wz-card h3, :root[data-theme="dark"] .wz-ltabs button.on, :root[data-theme="dark"] .ws-top b, :root[data-theme="dark"] .wz-sum b, :root[data-theme="dark"] .wz-cnt b { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ms-tabs button.on, :root:not([data-theme="light"]) .ms-gr, :root:not([data-theme="light"]) .wz-tab.on, :root:not([data-theme="light"]) .wz-tab:hover, :root:not([data-theme="light"]) .wz-sec h4, :root:not([data-theme="light"]) .wz-tree-h h4, :root:not([data-theme="light"]) .wz-card h3, :root:not([data-theme="light"]) .wz-ltabs button.on, :root:not([data-theme="light"]) .ws-top b, :root:not([data-theme="light"]) .wz-sum b, :root:not([data-theme="light"]) .wz-cnt b { color: var(--text); }
}