/* Looks (테마), picked with the swatches in the top bar; <html data-look> is set in index.html before paint.
   green = 처음 초록 (default; owner moved it back from mono, 2026-10-29), mono = 흑백, clean = 흰색, side = 왼쪽 메뉴, pill = 파란 알약. green is style.css as is.
   Each look keeps the light/dark split of style.css: light under :root[data-look], dark under the same media query. */

/* ---------- swatches ---------- */
.looks { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.looks-label { font-size: 12px; opacity: .75; margin-right: 2px; white-space: nowrap; }
@media (max-width: 600px) { .looks-label { display: none; } .looks { gap: 6px; } }
.looks button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgb(128 128 128 / 55%);
}
.looks button.is-on { box-shadow: 0 0 0 2px var(--topbar-bg, #fff), 0 0 0 4px currentColor; }
.looks [data-look="mono"] { background: linear-gradient(135deg, #111 50%, #fff 50%); }
.looks [data-look="clean"] { background: #fff; border: 5px solid #0f766e; }
.looks [data-look="side"] { background: linear-gradient(90deg, #123c39 40%, #f4f6f8 40%); }
.looks [data-look="pill"] { background: #3355d1; }
.looks [data-look="green"] { background: #0f766e; }

/* ---------- mono: 흑백 ---------- */
:root[data-look="mono"] {
  --brand: #111; --brand-deep: #111; --brand-soft: #f2f2f2; --hint-fill: #f4f4f4;
  --bg: #fff; --surface: #fff; --line: #e5e5e5; --text: #111; --muted: #777; --desk: #f3f3f3;
  --rule: #111; --topbar-bg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="mono"]:not([data-theme="light"]) {
    --brand: #f2f2f2; --brand-deep: #f2f2f2; --brand-soft: #222; --hint-fill: #eee;
    --bg: #0f0f0f; --surface: #0f0f0f; --line: #2a2a2a; --text: #eee; --muted: #999; --desk: #1a1a1a;
    --rule: #eee; --topbar-bg: #0f0f0f;
  }
}
:root[data-look="mono"] .topbar { background: var(--bg); color: var(--text); border-bottom: 1px solid var(--rule); }
:root[data-look="mono"] .topbar-inner { padding: 18px 24px 4px; }
:root[data-look="mono"] .mark { display: none; }
:root[data-look="mono"] .eyebrow { font-size: 11px; letter-spacing: .2em; color: var(--muted); opacity: 1; }
:root[data-look="mono"] h1 { font-size: 22px; letter-spacing: -.03em; }
:root[data-look="mono"] .tools { padding: 0 24px; gap: 18px; }
:root[data-look="mono"] .tool-tab { background: none; color: var(--muted); border-radius: 0; padding: 12px 0; font-weight: 500; border-bottom: 2px solid transparent; }
:root[data-look="mono"] .tool-tab.is-active { color: var(--text); font-weight: 700; border-bottom-color: var(--rule); }
:root[data-look="mono"] .tool-tab.is-soon { border: 0; border-bottom: 2px solid transparent; }
:root[data-look="mono"] .tool-num { display: inline; width: auto; height: auto; margin-right: 5px; background: none; color: inherit; font-size: inherit; }
:root[data-look="mono"] .evidence { gap: 32px; }
:root[data-look="mono"] :is(.side, .pdf-side, .ph-side, .sh-side) { gap: 0; }
:root[data-look="mono"] :is(.side, .pdf-side, .ph-side, .sh-side) .panel { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 20px 0; background: none; }
:root[data-look="mono"] .page-bar { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 10px 0; }
:root[data-look="mono"] .btn { border-radius: 4px; }
:root[data-look="mono"] .btn.primary { color: var(--bg); }
:root[data-look="mono"] .paper-wrap { border-radius: 0; }
:root[data-look="mono"] .drop-hint, :root[data-look="mono"] .paste-box { border-radius: 4px; }

/* ---------- clean: 흰색 ---------- */
:root[data-look="clean"] { --bg: #f6f7f9; --line: #e6e9ee; --shadow: 0 1px 3px rgb(20 30 50 / 6%); --topbar-bg: #fff; }
@media (prefers-color-scheme: dark) {
  :root[data-look="clean"]:not([data-theme="light"]) { --topbar-bg: #1a2029; }
}
:root[data-look="clean"] .topbar { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line); }
:root[data-look="clean"] .topbar-inner { padding: 14px 24px 6px; }
:root[data-look="clean"] .mark { width: 36px; height: 36px; box-shadow: none; }
:root[data-look="clean"] .eyebrow { display: none; }
:root[data-look="clean"] h1 { font-size: 19px; }
:root[data-look="clean"] .tools { padding: 0 24px; gap: 22px; }
:root[data-look="clean"] .tool-tab { background: none; color: var(--muted); border-radius: 0; padding: 10px 2px 12px; border-bottom: 2px solid transparent; font-weight: 500; }
:root[data-look="clean"] .tool-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }
:root[data-look="clean"] .tool-tab.is-soon { border: 0; }
:root[data-look="clean"] .tool-num { display: none; }
:root[data-look="clean"] .evidence { gap: 24px; }
:root[data-look="clean"] .panel, :root[data-look="clean"] .page-bar { border: 0; border-radius: 16px; box-shadow: var(--shadow); }
:root[data-look="clean"] :is(.side, .pdf-side, .ph-side, .sh-side) .panel { padding: 20px; }
:root[data-look="clean"] .btn { border-radius: 10px; }
:root[data-look="clean"] .paper-wrap { border-radius: 16px; }

/* ---------- side: 왼쪽 메뉴 ---------- */
:root[data-look="side"] { --bg: #f4f6f8; --topbar-bg: #123c39; }
@media (prefers-color-scheme: dark) {
  :root[data-look="side"]:not([data-theme="light"]) { --topbar-bg: #0b2421; }
}
@media (min-width: 901px) {
  :root[data-look="side"] body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
  :root[data-look="side"] body > main { grid-column: 2; max-width: none; margin: 0; }
  :root[data-look="side"] .topbar { grid-row: 1 / span 20; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  :root[data-look="side"] .topbar-inner { flex-direction: column; align-items: flex-start; flex-wrap: wrap; padding: 22px 18px 22px; gap: 10px; }
  :root[data-look="side"] .looks { margin: 4px 0 0; }
  :root[data-look="side"] .tools { flex-direction: column; padding: 0 10px 16px; gap: 4px; margin: 0; }
  :root[data-look="side"] .tool-tab { text-align: left; border-radius: 10px; padding: 11px 12px; }
  :root[data-look="side"] .tool-tab.is-soon { border: 1px dashed rgb(255 255 255 / 30%); }
}
:root[data-look="side"] .topbar { background: var(--topbar-bg); }
:root[data-look="side"] .mark { width: 40px; height: 40px; box-shadow: none; }
:root[data-look="side"] .eyebrow { font-size: 12px; }
:root[data-look="side"] h1 { font-size: 18px; }
:root[data-look="side"] .tool-tab { background: none; color: #cfe3e0; font-weight: 500; }
:root[data-look="side"] .tool-tab:hover { background: rgb(255 255 255 / 8%); }
:root[data-look="side"] .tool-tab.is-active { background: rgb(255 255 255 / 14%); color: #fff; font-weight: 700; }
:root[data-look="side"] .tool-num { background: rgb(255 255 255 / 18%); }
:root[data-look="side"] .panel, :root[data-look="side"] .page-bar { border-radius: 14px; }
:root[data-look="side"] .btn { border-radius: 9px; }

/* ---------- pill: 파란 알약 ---------- */
:root[data-look="pill"] {
  --brand: #3355d1; --brand-deep: #2440a8; --brand-soft: #eef2ff; --hint-fill: #f1f4ff;
  --bg: #f5f6fb; --line: #e3e6f0; --track: #e9ecf6; --topbar-bg: #f5f6fb;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="pill"]:not([data-theme="light"]) {
    --brand: #7f9cff; --brand-deep: #a9bcff; --brand-soft: #1c2340;
    --bg: #10131c; --surface: #181c28; --line: #2a3042; --track: #1e2333; --topbar-bg: #10131c;
  }
}
:root[data-look="pill"] .topbar { background: var(--bg); color: var(--text); padding-bottom: 14px; }
:root[data-look="pill"] .topbar-inner { position: relative; flex-direction: column; justify-content: center; gap: 4px; padding-top: 22px; }
:root[data-look="pill"] .looks { position: absolute; top: 16px; right: 16px; }
:root[data-look="pill"] .mark { display: none; }
:root[data-look="pill"] .eyebrow { color: var(--brand); opacity: 1; font-weight: 700; }
:root[data-look="pill"] h1 { font-size: 26px; }
:root[data-look="pill"] .tools { justify-content: flex-start; width: max-content; max-width: calc(100% - 32px); margin: 10px auto 0; padding: 5px; gap: 2px; border-radius: 999px; background: var(--track); }
:root[data-look="pill"] .tool-tab { border-radius: 999px; background: none; color: var(--muted); padding: 8px 18px; font-weight: 500; }
:root[data-look="pill"] .tool-tab.is-active { background: var(--surface); color: var(--brand-deep); font-weight: 700; box-shadow: 0 1px 4px rgb(30 40 90 / 12%); }
:root[data-look="pill"] .tool-tab.is-soon { border: 0; }
:root[data-look="pill"] .tool-num { width: 18px; height: 18px; font-size: 11px; }
:root[data-look="pill"] .panel, :root[data-look="pill"] .page-bar { border-radius: 18px; box-shadow: 0 2px 10px rgb(30 40 90 / 5%); }
:root[data-look="pill"] .btn { border-radius: 999px; }
:root[data-look="pill"] .btn.wide { border-radius: 12px; }
:root[data-look="pill"] .paper-wrap { border-radius: 18px; }

/* ---------- green: 처음 초록 (style.css) ---------- */
:root[data-look="green"] { --topbar-bg: #0f766e; }

@media print {
  :root[data-look] body { display: block !important; }
}