/* ===========================================================
   Luna Chem Lab — SILVER completion layer (2026-07-08)
   Completes the `light` theme so EVERY component follows the
   Luna TECH index white-silver design language.
   Loaded LAST — overrides style.css dark hardcodes when
   :root[data-lab-theme="light"] (or "glass") is active.
   Silver tokens (match pages/luna-tech/index.html):
     bg #f4f6f9 · card #ffffff · line #e2e6ec/#d3d9e2
     ink #1c222e · ink2 #3a4252 · dim #7b8494
     sv2 #d7dde6 · sv3 #aeb7c6 · sv4 #8b95a6
     teal accent #2f9fb0
   =========================================================== */

:root[data-lab-theme="light"] {
    --slv-bg:    #f4f6f9;
    --slv-card:  #ffffff;
    --slv-card2: #fbfcfe;
    --slv-line:  #e2e6ec;
    --slv-line2: #d3d9e2;
    --slv-ink:   #1c222e;
    --slv-ink2:  #3a4252;
    --slv-dim:   #7b8494;
    --slv-teal:  #2f9fb0;
    --slv-teal-deep: #257f8d;
    --slv-sheen: linear-gradient(150deg, #fdfefe, #eef1f6);
    --slv-metal: linear-gradient(150deg, #fdfefe, #d7dde6 55%, #aeb7c6);
    --slv-shadow-sm: 0 1px 2px rgba(28,34,46,.05);
    --slv-shadow-md: 0 4px 10px rgba(28,34,46,.07), 0 14px 34px rgba(28,34,46,.10);
}

/* ─── Bottom canvas controls (강도/투입량/Undo/가이드/선택) ─── */
:root[data-lab-theme="light"] .canvas-controls {
    background: rgba(248,250,252,0.88) !important;
    border-top: 1px solid var(--slv-line) !important;
    backdrop-filter: blur(14px) saturate(1.05);
    box-shadow: none !important;
}
:root[data-lab-theme="light"] .ctrl-group {
    background: var(--slv-card) !important;
    border: 1px solid var(--slv-line) !important;
    box-shadow: var(--slv-shadow-sm), inset 0 1px 0 #fff !important;
}
:root[data-lab-theme="light"] .ctrl-label { color: var(--slv-ink2) !important; text-shadow: none !important; }
:root[data-lab-theme="light"] .ctrl-btn {
    background: var(--slv-sheen) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink) !important;
    box-shadow: inset 0 1px 0 #fff !important;
    text-shadow: none !important;
}
:root[data-lab-theme="light"] .ctrl-btn:hover {
    background: #20262f !important;
    color: #fff !important;
    border-color: #20262f !important;
}

/* ─── Lab Notebook (하단 실험 노트) ─── */
:root[data-lab-theme="light"] .notebook-panel {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid var(--slv-line) !important;
    border-bottom: none !important;
    box-shadow: 0 -6px 22px rgba(28,34,46,.08) !important;
    backdrop-filter: blur(14px);
}
:root[data-lab-theme="light"] .notebook-title { color: var(--slv-ink) !important; text-shadow: none !important; }
:root[data-lab-theme="light"] .notebook-panel * { text-shadow: none; }
:root[data-lab-theme="light"] .notebook-entry,
:root[data-lab-theme="light"] #notebookEntries > div {
    color: var(--slv-ink2) !important;
    border-color: var(--slv-line) !important;
}

/* ─── Floating lab buttons (교과서/로거/녹화/보고서/열화상/점화) ─── */
:root[data-lab-theme="light"] .lab-float-btn {
    background: var(--slv-card) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink2) !important;
    box-shadow: var(--slv-shadow-sm), inset 0 1px 0 #fff !important;
    text-shadow: none !important;
}
:root[data-lab-theme="light"] .lab-float-btn:hover {
    border-color: var(--slv-teal) !important;
    box-shadow: 0 4px 12px rgba(47,159,176,.18), inset 0 1px 0 #fff !important;
    transform: translateY(-1px);
}
:root[data-lab-theme="light"] .lab-float-btn .lab-state {
    background: #f2f4f8 !important;
    border: 1px solid var(--slv-line) !important;
    color: var(--slv-dim) !important;
}
:root[data-lab-theme="light"] .lab-float-btn.active,
:root[data-lab-theme="light"] .lab-float-btn.on {
    background: #20262f !important;
    color: #fff !important;
    border-color: #20262f !important;
}

/* ─── Canvas HUD chips (온도/pH/FPS/줌) + avatar ─── */
:root[data-lab-theme="light"] .hud-chip {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink2) !important;
    text-shadow: none !important;
    backdrop-filter: blur(8px);
}
:root[data-lab-theme="light"] .avatar-chip {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink2) !important;
    text-shadow: none !important;
}
:root[data-lab-theme="light"] .avatar-name { color: var(--slv-ink2) !important; }

/* ─── Zoom cluster + minimap ─── */
:root[data-lab-theme="light"] .cz-cluster {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid var(--slv-line2) !important;
    box-shadow: var(--slv-shadow-sm) !important;
}
:root[data-lab-theme="light"] .cz-btn {
    background: transparent !important;
    color: var(--slv-ink2) !important;
    border-color: transparent !important;
    text-shadow: none !important;
}
:root[data-lab-theme="light"] .cz-btn:hover { background: #eef1f6 !important; color: var(--slv-ink) !important; }
:root[data-lab-theme="light"] .cz-sep { background: var(--slv-line2) !important; }
:root[data-lab-theme="light"] .cz-minimap {
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid var(--slv-line2) !important;
}
:root[data-lab-theme="light"] .cz-minimap-viewport { border-color: var(--slv-teal) !important; }

/* ─── Left canvas toolbar (V/P/O/T/⋯) — reinforce ─── */
:root[data-lab-theme="light"] .canvas-toolbar {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid var(--slv-line2) !important;
    box-shadow: var(--slv-shadow-sm) !important;
}
:root[data-lab-theme="light"] .tb-btn { color: var(--slv-ink2) !important; text-shadow: none !important; }
:root[data-lab-theme="light"] .tb-btn.active {
    background: #20262f !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(28,34,46,.25) !important;
}
:root[data-lab-theme="light"] .tb-key { color: var(--slv-dim) !important; }
:root[data-lab-theme="light"] .tb-btn.active .tb-key { color: rgba(255,255,255,.7) !important; }
:root[data-lab-theme="light"] .tb-sep { background: var(--slv-line2) !important; }

/* ─── More menu popup ─── */
:root[data-lab-theme="light"] .more-menu {
    background: var(--slv-card) !important;
    border: 1px solid var(--slv-line2) !important;
    box-shadow: var(--slv-shadow-md) !important;
}
:root[data-lab-theme="light"] .mm-title { color: var(--slv-dim) !important; border-color: var(--slv-line) !important; }
:root[data-lab-theme="light"] .mm-item { color: var(--slv-ink2) !important; }
:root[data-lab-theme="light"] .mm-item:hover { background: #eef1f6 !important; color: var(--slv-ink) !important; }
:root[data-lab-theme="light"] .mm-item kbd {
    background: #f2f4f8 !important; border: 1px solid var(--slv-line2) !important; color: var(--slv-dim) !important;
}
:root[data-lab-theme="light"] .mm-divider { background: var(--slv-line) !important; }
:root[data-lab-theme="light"] .mm-danger { color: #c4352e !important; }

/* ─── Toast + smart tooltip ─── */
:root[data-lab-theme="light"] .toast {
    background: #20262f !important;
    color: #fff !important;
    border: 1px solid #2b3340 !important;
    box-shadow: var(--slv-shadow-md) !important;
    text-shadow: none !important;
}
:root[data-lab-theme="light"] #smartTooltip {
    background: #20262f !important;
    color: #eef1f6 !important;
    border: 1px solid #2b3340 !important;
    box-shadow: var(--slv-shadow-md) !important;
}

/* ─── Modals (mission/msds/yt/quiz/scenario/chem-picker/shortcut) ─── */
:root[data-lab-theme="light"] .modal-box,
:root[data-lab-theme="light"] .msds-box,
:root[data-lab-theme="light"] .yt-box,
:root[data-lab-theme="light"] .quiz-box,
:root[data-lab-theme="light"] .spk-box,
:root[data-lab-theme="light"] .cp-box,
:root[data-lab-theme="light"] .shortcut-panel,
:root[data-lab-theme="light"] .modal-shell {
    background: var(--slv-card) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink) !important;
    box-shadow: var(--slv-shadow-md) !important;
}
:root[data-lab-theme="light"] .modal-title,
:root[data-lab-theme="light"] .modal-shell-title { color: var(--slv-ink) !important; text-shadow: none !important; }
:root[data-lab-theme="light"] .modal-body { color: var(--slv-ink2) !important; }
:root[data-lab-theme="light"] .modal-shell-header {
    background: var(--slv-sheen) !important;
    border-bottom: 1px solid var(--slv-line) !important;
}
:root[data-lab-theme="light"] .modal-shell-body { color: var(--slv-ink2) !important; }
:root[data-lab-theme="light"] .modal-shell-footer {
    background: #f7f9fb !important;
    border-top: 1px solid var(--slv-line) !important;
}
:root[data-lab-theme="light"] .modal-close {
    background: var(--slv-sheen) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink) !important;
}
:root[data-lab-theme="light"] .sk-group h3 { color: var(--slv-teal-deep) !important; }
:root[data-lab-theme="light"] .sk-row { color: var(--slv-ink2) !important; }
:root[data-lab-theme="light"] .sk-row kbd {
    background: #f2f4f8 !important; border: 1px solid var(--slv-line2) !important; color: var(--slv-ink2) !important;
}

/* ─── Tour (tutorial) tooltip ─── */
:root[data-lab-theme="light"] .tour-tooltip {
    background: var(--slv-card) !important;
    border: 1px solid var(--slv-teal) !important;
    color: var(--slv-ink) !important;
    box-shadow: 0 10px 40px rgba(28,34,46,.18), 0 0 0 4px rgba(47,159,176,.12) !important;
}
:root[data-lab-theme="light"] .tour-title { color: var(--slv-ink) !important; }
:root[data-lab-theme="light"] .tour-desc { color: var(--slv-ink2) !important; }
:root[data-lab-theme="light"] .tour-step-num { color: var(--slv-teal-deep) !important; }
:root[data-lab-theme="light"] .tour-btn {
    background: var(--slv-sheen) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink) !important;
}
:root[data-lab-theme="light"] .tour-btn-next {
    background: #20262f !important; color: #fff !important; border-color: #20262f !important;
}
:root[data-lab-theme="light"] .tour-hint {
    background: #fdf8ec !important; border: 1px solid #e6d3a6 !important; color: #8a6a1f !important;
}

/* ─── Scenario guide / PPE row (keep hazard-banner strong red for safety) ─── */
:root[data-lab-theme="light"] .scenario-guide {
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink2) !important;
    box-shadow: var(--slv-shadow-md) !important;
}
:root[data-lab-theme="light"] .ppe-row {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink2) !important;
}

/* ─── Scrollbars ─── */
:root[data-lab-theme="light"] ::-webkit-scrollbar-thumb { background: var(--slv-line2) !important; }
:root[data-lab-theme="light"] ::-webkit-scrollbar-track { background: transparent !important; }

/* ─── Side panel internals: reagent color dots keep their chemistry colors;
       equip/chem buttons already covered by dock.css, reinforce text ─── */
:root[data-lab-theme="light"] .equip-btn,
:root[data-lab-theme="light"] .chem-btn { text-shadow: none !important; }

/* ─── Mini tutorial box (#tutorialBox — JS inline-styled, so !important) ─── */
:root[data-lab-theme="light"] #tutorialBox {
    background: var(--slv-card) !important;
    border: 1px solid var(--slv-teal) !important;
    box-shadow: 0 10px 40px rgba(28,34,46,.16), 0 0 0 4px rgba(47,159,176,.10) !important;
    color: var(--slv-ink2) !important;
}
:root[data-lab-theme="light"] #tutorialBox > div { color: var(--slv-ink2); }
:root[data-lab-theme="light"] #tutorialBox button {
    background: var(--slv-sheen) !important;
    border: 1px solid var(--slv-line2) !important;
    color: var(--slv-ink) !important;
}
:root[data-lab-theme="light"] #tutorialBox button:last-child {
    background: #20262f !important;
    border-color: #20262f !important;
    color: #fff !important;
}

/* ─── Title bar (드래그 이동) — 실버 톤 ─── */
:root[data-lab-theme="light"] .cw-titlebar {
    background: linear-gradient(180deg, #fbfcfe, #eef1f6) !important;
    border: 1px solid var(--slv-line2) !important;
    border-bottom: none !important;
}
:root[data-lab-theme="light"] .cw-titlebar:hover {
    background: linear-gradient(180deg, #ffffff, #e8ecf2) !important;
}
:root[data-lab-theme="light"] .cw-tb-grip { color: var(--slv-sv3, #aeb7c6) !important; }
:root[data-lab-theme="light"] .cw-tb-label { color: var(--slv-ink2) !important; }
:root[data-lab-theme="light"] .cw-tb-dock { color: var(--slv-teal) !important; }
:root[data-lab-theme="light"] .cw-tb-dock:hover { background: rgba(47,159,176,0.14) !important; }
:root[data-lab-theme="light"] .canvas-wrap {
    border-color: var(--slv-line2) !important;
    background: #eef1f6 !important;
}
:root[data-lab-theme="light"] .canvas-workspace.cw-floating {
    box-shadow: 0 18px 60px rgba(28,34,46,0.20), 0 0 0 1px var(--slv-line2) !important;
}

/* ─── Canvas stage frame: soft silver ring around the scene ─── */
:root[data-lab-theme="light"] .canvas-stage {
    box-shadow: 0 1px 2px rgba(28,34,46,.06), 0 14px 40px rgba(28,34,46,.10) !important;
    border-radius: 10px;
    overflow: hidden;
}
:root[data-lab-theme="light"] #labCanvas { border-radius: 10px; }

/* ─── Workspace surround: Photoshop식 밝은 실버 작업대 (기본 #050510 다크 오버라이드) ─── */
:root[data-lab-theme="light"] .canvas-workspace {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.75), rgba(255,255,255,0) 55%),
        repeating-conic-gradient(var(--slv-bg2, #eceff4) 0% 25%, #e4e8ee 0% 50%) 0 0 / 28px 28px,
        #e8ebf1 !important;
}
:root[data-lab-theme="light"] .canvas-workspace .cr-handle:hover {
    background: rgba(47,159,176,0.30) !important;
}

/* ─── 도킹 패널 헤더 3중 중복 정리 ───
   탭바(장비 Equipment) + 드래그핸들(장비 Equipment) + 내부 타이틀(장비)가
   같은 이름을 3번 보여줌 → 도킹 상태에선 내부 타이틀 숨김 (탭이 이름 역할) */
:root[data-lab-theme="light"] .dock-panel[class*="dock-in-"]:not(.dock-in-floating) .panel-title {
    display: none !important;
}
:root[data-lab-theme="light"] .dock-panel .panel-drag-handle.dock-managed {
    background: linear-gradient(180deg, #fbfcfe, #eef1f6) !important;
    border-bottom: 1px solid var(--slv-line, #e2e6ec) !important;
}