/* ===========================================================
   Luna Chem Lab 3D — Silver UI (LUNA TECH 톤)
   포토샵식 도킹 패널 + 툴팁 + HUD. --ui3d-scale 로 전체 UI 확대
   =========================================================== */
:root {
    --ui3d-scale: 1;
    --bg: #f4f6f9;
    --card: #ffffff;
    --line: #e2e6ec;
    --line2: #d3d9e2;
    --silver: #d7dde6;
    --silver2: #aeb7c6;
    --ink: #20262f;
    --sub: #6b7484;
    --acc: #2b6fd4;          /* tech blue */
    --teal: #2f9fb0;
    --warn: #d8a53f;
    --danger: #d65f5f;
    --shadow: 0 10px 30px rgba(32, 38, 47, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
    font-family: 'Space Grotesk', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* ── 3D 캔버스 ── */
#app3d { position: fixed; inset: 0; }
#app3d canvas { display: block; touch-action: none; }

/* ── 부트 로더 ── */
#boot {
    position: fixed; inset: 0; z-index: 300;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    transition: opacity .5s;
}
#boot.off { opacity: 0; pointer-events: none; }
#boot .flask { font-size: 52px; animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-6deg); } }
#boot .bar { width: 210px; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
#boot .bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--teal)); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(540%); } }
#boot small { color: var(--sub); letter-spacing: .06em; }

/* ── 상단바 ── */
#topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 90;
    display: flex; align-items: center; gap: 8px; padding: 0 10px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line2);
    font-size: calc(13px * var(--ui3d-scale));
}
#topbar .tb-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
#topbar .tb-title .beta {
    font-size: .68em; padding: 2px 7px; border-radius: 20px;
    background: linear-gradient(90deg, var(--acc), var(--teal)); color: #fff;
    letter-spacing: .1em;
}
#topbar .tb-sp { flex: 1; }
.tb-btn {
    height: 32px; padding: 0 11px; border-radius: 9px;
    border: 1px solid var(--line2); background: #fff; color: var(--ink);
    font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
}
.tb-btn:hover { border-color: var(--silver2); background: #f6f8fb; transform: translateY(-1px); }
.tb-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.tb-btn.icon { width: 32px; padding: 0; justify-content: center; }
/* 📸 캡처 개수 뱃지 (사진 버튼) */
.tb-badge {
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
    background: var(--acc); color: #fff; font-size: .74em; font-weight: 700;
    line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
}
.tb-badge[hidden] { display: none; }
.tb-scale { display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; color: var(--sub); }
.tb-scale input[type=range] {
    width: 92px; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--line2); border-radius: 4px; outline: none; cursor: pointer;
}
.tb-scale input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--ink); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: grab;
}
.tb-scale b { min-width: 42px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── 도킹 패널 ── */
.dk-panel {
    position: fixed; z-index: 40;
    min-width: 170px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line2);
    border-radius: 14px;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column;
    overflow: hidden;
    font-size: calc(13px * var(--ui3d-scale));
}
.dk-head {
    display: flex; align-items: center; gap: 7px;
    padding: .6em .7em;
    background: linear-gradient(180deg, #fbfcfe, #eef1f6);
    border-bottom: 1px solid var(--line);
    cursor: move; flex: none;
}
.dk-ico { font-size: 1.05em; }
.dk-title { font-weight: 700; letter-spacing: .02em; }
.dk-spacer { flex: 1; }
.dk-btn {
    width: 1.7em; height: 1.7em; border-radius: 6px; border: none;
    background: transparent; color: var(--sub); font-size: 1em; font-weight: 700;
    cursor: pointer; line-height: 1;
}
.dk-btn:hover { background: var(--line); color: var(--ink); }
.dk-body { padding: .65em; overflow: auto; flex: 1; }
.dk-panel.collapsed .dk-body, .dk-panel.collapsed .dk-resize { display: none; }
.dk-resize {
    position: absolute; right: 0; bottom: 0; width: 17px; height: 17px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 52%, var(--silver2) 53%, transparent 58%,
            transparent 66%, var(--silver2) 67%, transparent 72%,
            transparent 80%, var(--silver2) 81%, transparent 86%);
}

/* ── 시약장 ── */
.rg-cat {
    font-size: .78em; font-weight: 800; letter-spacing: .08em;
    color: var(--sub); text-transform: uppercase;
    margin: .7em 0 .35em; padding-bottom: .25em;
    border-bottom: 1px solid var(--line);
}
.rg-cat:first-child { margin-top: 0; }
.rg-item {
    display: flex; align-items: center; gap: .6em; width: 100%;
    padding: .55em .6em; margin-bottom: .35em;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff; font: inherit; color: var(--ink);
    cursor: pointer; text-align: left; transition: all .15s;
}
.rg-item:hover { border-color: var(--acc); background: #f4f8ff; transform: translateX(2px); }
.rg-chip {
    width: 1.15em; height: 1.15em; border-radius: 50%;
    border: 2px solid rgba(32, 38, 47, .18); flex: none;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,.12);
}
.rg-name { flex: 1; font-weight: 600; font-size: .92em; line-height: 1.25; }
.rg-name small { display: block; color: var(--sub); font-size: .8em; font-weight: 500; }
.rg-add, .rg-mol {
    flex: none; width: 1.9em; height: 1.9em; border-radius: 8px;
    border: 1px solid var(--line); background: #fff;
    font-size: .95em; cursor: pointer; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.rg-add { color: var(--acc); font-weight: 800; }
.rg-add:hover { border-color: var(--acc); background: #f0f6ff; }
.rg-mol:hover { border-color: var(--teal); background: #effafb; transform: scale(1.08); }

/* ── 분자 뷰어 ── */
.mol-wrap {
    width: 100%; height: calc(100% - 3.6em);
    min-height: 150px;
    border-radius: 10px; overflow: hidden;
    background: radial-gradient(ellipse at 50% 30%, #ffffff, #e8ecf2);
    border: 1px solid var(--line);
}
.mol-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.mol-cap {
    padding: .5em .2em 0; text-align: center;
    font-size: .95em; line-height: 1.4; color: var(--ink);
}
.mol-cap small { color: var(--sub); }

/* ── 인스펙터 성분 목록 ── */
.in-comps {
    display: flex; flex-wrap: wrap; gap: .3em;
    margin: .45em 0;
}
.in-comp {
    display: inline-flex; align-items: center; gap: .35em;
    font-size: .82em; font-weight: 600; color: var(--ink);
    background: #f2f5f9; border: 1px solid var(--line);
    border-radius: 14px; padding: .22em .6em;
}
.in-comp i {
    width: .8em; height: .8em; border-radius: 50%;
    border: 1.5px solid rgba(32,38,47,.15);
}

/* ── 장비/인스펙터 버튼 ── */
.eq-btn {
    display: flex; align-items: center; gap: .5em; width: 100%;
    padding: .55em .65em; margin-bottom: .35em;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff; font: inherit; font-weight: 600; color: var(--ink);
    cursor: pointer; text-align: left; transition: all .15s;
}
.eq-btn:hover { border-color: var(--silver2); background: #f6f8fb; transform: translateX(2px); }
.eq-btn.warn { border-color: #ecd9a4; background: #fffaf0; }
.eq-btn.warn:hover { border-color: var(--warn); }
.eq-btn.danger { color: var(--danger); border-color: #f0d4d4; background: #fff8f8; }
.eq-btn.danger:hover { border-color: var(--danger); }
.eq-hr { border: none; border-top: 1px dashed var(--line2); margin: .55em 0; }

/* ── 인스펙터 ── */
.in-title { font-weight: 800; font-size: 1.06em; margin-bottom: .55em; }
.in-title small { color: var(--sub); font-weight: 600; }
.in-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .34em 0; border-bottom: 1px dashed var(--line);
    font-size: .95em;
}
.in-row span { color: var(--sub); }
.in-row b.hot { color: #d8562f; }
.in-bar {
    height: .5em; border-radius: 5px; background: var(--line);
    margin: .6em 0 .7em; overflow: hidden;
}
.in-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--acc)); border-radius: 5px; transition: width .3s; }
.in-empty { color: var(--sub); font-size: .92em; line-height: 1.5; padding: .4em 0 .6em; }
.in-hint {
    font-size: .85em; color: var(--sub); line-height: 1.5;
    background: #f2f5f9; border-radius: 8px; padding: .55em .6em; margin: .5em 0;
}
.in-warn {
    font-size: .87em; color: #9a6a10; font-weight: 700;
    background: #fff6e2; border: 1px solid #f0dfae; border-radius: 8px;
    padding: .5em .6em; margin: .5em 0;
}

/* ── 미션 ── */
.ms-item {
    display: flex; gap: .5em; align-items: flex-start;
    padding: .45em .3em; font-size: .93em; line-height: 1.45;
    border-bottom: 1px dashed var(--line); color: var(--ink);
}
.ms-item:last-child { border-bottom: none; }
.ms-item.done { color: var(--sub); text-decoration: line-through; }
.ms-item.done .ms-chk { text-decoration: none; }
.ms-chk { flex: none; }

/* ── 미션 클릭 → 가이드 ── */
.ms-item.ms-click { cursor: pointer; border-radius: 8px; transition: background .15s; }
.ms-item.ms-click:hover { background: #eef4fb; }

/* ── 🎓 교육과정 배지 (실버 pill) ── */
.ms-body { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.ms-txt { line-height: 1.42; }
.cur-badge {
    display: inline-flex; align-items: center; gap: .3em; align-self: flex-start;
    max-width: 100%; font-size: .76em; font-weight: 700; line-height: 1.3;
    padding: .14em .55em; border-radius: 999px;
    background: linear-gradient(180deg, #f7f9fc, #eaeef4);
    border: 1px solid var(--silver2); color: var(--sub);
    text-decoration: none; letter-spacing: -.01em; white-space: normal; cursor: help;
}
.cur-badge .cur-code { color: var(--acc); font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none; }
.cur-badge.safe { border-color: #ead9ae; background: linear-gradient(180deg, #fbf6e9, #f4ecd6); color: #9a7b2f; }
.ms-item.done .cur-badge { text-decoration: none; opacity: .85; }
.gd-cur { margin: -.2em 0 .5em; }
.gd-cur .cur-badge { font-size: .82em; }

/* ── 실험 가이드 패널 ── */
.gd-mission { font-weight: 800; font-size: 1.02em; margin-bottom: .55em; line-height: 1.4; }
.gd-step {
    display: flex; gap: .55em; align-items: flex-start;
    padding: .45em .55em; border-radius: 9px;
    font-size: .9em; line-height: 1.45; color: var(--sub);
    border: 1px solid transparent; margin-bottom: .25em;
}
.gd-step.cur { background: #fff6e2; border-color: #f0dfae; color: var(--ink); }
.gd-step.past { opacity: .6; }
.gd-step .n {
    flex: none; width: 1.55em; height: 1.55em; border-radius: 50%;
    background: var(--line); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .82em;
}
.gd-step.cur .n { background: var(--warn); color: #fff; }
.gd-step.past .n { background: #bfe3cd; color: #2a7a4b; }
.gd-nav { display: flex; gap: .35em; margin-top: .55em; }
.gd-nav .eq-btn { margin-bottom: 0; justify-content: center; padding: .45em .5em; }
.gd-nav .eq-btn:disabled { opacity: .45; cursor: default; transform: none; }
.gd-done {
    background: #effaf3; border: 1px solid #bfe3cd; color: #2a7a4b;
    border-radius: 10px; padding: .6em; font-weight: 800; text-align: center; margin-top: .45em;
}

/* ── 🧮 몰 계산기 ── */
.mc-h {
    font-size: .84em; font-weight: 800; letter-spacing: .03em;
    color: var(--ink); margin: 0 0 .55em;
    display: flex; align-items: baseline; gap: .5em;
}
.mc-h small { color: var(--sub); font-weight: 700; letter-spacing: .02em; }
.mc-h2 { margin-top: .95em; padding-top: .75em; border-top: 1px solid var(--line); }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.mc-f { display: flex; flex-direction: column; gap: .28em; font-size: .82em; color: var(--sub); font-weight: 600; }
.mc-inp {
    display: flex; align-items: center; gap: .3em;
    border: 1px solid var(--line2); border-radius: 9px; background: #fff;
    padding: .05em .55em; transition: border-color .15s, box-shadow .15s, background .15s;
}
.mc-inp:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(43, 111, 212, .12); }
.mc-inp input {
    width: 100%; min-width: 0; border: none; outline: none; background: transparent;
    font: inherit; font-weight: 700; color: var(--ink);
    padding: .42em 0; font-variant-numeric: tabular-nums;
}
.mc-inp input::placeholder { color: var(--teal); font-weight: 700; opacity: .75; }
.mc-inp i { color: var(--sub); font-style: normal; font-weight: 700; font-size: .9em; flex: none; }
.mc-inp.hl { border-color: var(--teal); background: #effafb; box-shadow: 0 0 0 3px rgba(47, 159, 176, .14); }
.mc-out {
    margin-top: .6em; padding: .5em .65em; border-radius: 9px;
    font-size: .9em; font-weight: 700; line-height: 1.45; text-align: center;
    background: #f2f5f9; color: var(--sub); border: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.mc-out.ok { background: #effafb; border-color: #bfe6ec; color: #1c6e7d; }
.mc-out.warn { background: #fff6e2; border-color: #f0dfae; color: #9a6a10; }
.mc-live { margin-top: .1em; }
.mc-empty { color: var(--sub); font-size: .9em; line-height: 1.5; padding: .5em .1em; }
.mc-vhead { font-size: .86em; font-weight: 700; color: var(--ink); margin-bottom: .45em; font-variant-numeric: tabular-nums; }
.mc-vhead small { color: var(--sub); font-weight: 600; }
.mc-tbl { width: 100%; border-collapse: collapse; font-size: .86em; }
.mc-tbl th {
    text-align: left; color: var(--sub); font-weight: 700; font-size: .92em;
    padding: .2em .3em; border-bottom: 1.5px solid var(--line);
}
.mc-tbl td {
    padding: .32em .3em; border-bottom: 1px dashed var(--line);
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.mc-tbl th:not(:first-child), .mc-tbl td:not(:first-child) { text-align: right; }
.mc-tbl td:first-child { font-weight: 700; }
.mc-tbl td b { color: var(--acc); }
.mc-tbl td.sol { color: var(--sub); font-weight: 600; font-style: italic; text-align: center; }

/* ── 전역 툴팁 (UI 버튼) ── */
#uiTip {
    position: fixed; z-index: 200; max-width: 260px;
    background: var(--ink); color: #f4f6f9;
    padding: 7px 11px; border-radius: 9px;
    font-size: calc(12px * var(--ui3d-scale)); line-height: 1.45; font-weight: 500;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    opacity: 0; pointer-events: none; transform: translateY(3px);
    transition: opacity .15s, transform .15s;
}
#uiTip.on { opacity: 1; transform: none; }

/* ── 3D 오브젝트 툴팁 ── */
#objTip {
    position: fixed; z-index: 120; max-width: 280px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line2); border-radius: 10px;
    padding: 8px 12px;
    font-size: calc(12.5px * var(--ui3d-scale)); line-height: 1.5;
    color: var(--ink); box-shadow: var(--shadow);
    opacity: 0; pointer-events: none; transition: opacity .12s;
}
#objTip.on { opacity: 1; }
#objTip small { color: var(--sub); }

/* ── HUD 칩 (비커 위 온도) ── */
#chips3d { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.obj-chip {
    position: absolute; transform: translate(-50%, -100%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--line2); border-radius: 20px;
    padding: 3px 11px;
    font-size: calc(11.5px * var(--ui3d-scale)); font-weight: 700;
    color: var(--ink); white-space: nowrap;
    box-shadow: 0 3px 10px rgba(32, 38, 47, 0.12);
    font-variant-numeric: tabular-nums;
}
.obj-chip.hot { border-color: #f0bfa4; background: #fff6ef; color: #c04a1e; }

/* ── 토스트 ── */
#toast3d {
    position: fixed; left: 50%; bottom: 26px; z-index: 210;
    transform: translate(-50%, 16px);
    background: var(--ink); color: #fff;
    padding: 11px 20px; border-radius: 12px;
    font-size: calc(13.5px * var(--ui3d-scale)); font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    opacity: 0; pointer-events: none;
    transition: all .25s cubic-bezier(.2, .9, .3, 1.2);
    max-width: min(560px, 90vw); text-align: center;
}
#toast3d.on { opacity: 1; transform: translate(-50%, 0); }
#toast3d.warn { background: #8a4a12; }

/* ── 창 메뉴 ── */
.dk-menu {
    position: fixed; z-index: 220; min-width: 200px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(14px);
    border: 1px solid var(--line2); border-radius: 12px;
    box-shadow: var(--shadow); padding: 6px;
    display: none;
    font-size: calc(13px * var(--ui3d-scale));
}
.dk-menu.on { display: block; }
.dk-menu-item {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 8px 10px; border: none; border-radius: 8px;
    background: transparent; font: inherit; font-weight: 600; color: var(--ink);
    cursor: pointer; text-align: left;
}
.dk-menu-item:hover { background: #eef2f7; }
.dk-menu-item .chk { width: 1.1em; color: var(--teal); font-weight: 800; }

/* ── 도움말 오버레이 ── */
#helpOverlay {
    position: fixed; inset: 0; z-index: 250;
    background: rgba(32, 38, 47, 0.45);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: none; align-items: center; justify-content: center; padding: 24px;
}
#helpOverlay.on { display: flex; }
.hp-card {
    width: min(720px, 94vw); max-height: 86vh; overflow: auto;
    background: var(--card); border-radius: 20px;
    border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0,0,0,.35);
    padding: 26px 28px;
    font-size: calc(13.5px * var(--ui3d-scale));
}
.hp-card h2 { font-size: 1.45em; margin-bottom: 4px; letter-spacing: -.01em; }
.hp-card .hp-sub { color: var(--sub); margin-bottom: 18px; }
.hp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; }
@media (max-width: 640px) { .hp-grid { grid-template-columns: 1fr; } }
.hp-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: .5em 0; border-bottom: 1px dashed var(--line);
}
.hp-row span { color: var(--ink); font-weight: 500; }
.hp-keys { display: flex; gap: 4px; flex: none; }
kbd {
    display: inline-block; min-width: 1.7em; text-align: center;
    padding: .18em .5em; border-radius: 7px;
    background: linear-gradient(180deg, #fff, #eef1f6);
    border: 1px solid var(--line2); border-bottom-width: 2.5px;
    font-family: inherit; font-size: .88em; font-weight: 700; color: var(--ink);
}
.hp-close {
    margin-top: 18px; width: 100%; padding: 12px;
    border: none; border-radius: 12px;
    background: var(--ink); color: #fff; font: inherit; font-weight: 700;
    cursor: pointer; font-size: 1.05em;
}
.hp-close:hover { background: #333c4c; }
.hp-tip {
    background: linear-gradient(90deg, #eef6ff, #eefaf7);
    border: 1px solid #d7e6f5; border-radius: 12px;
    padding: 12px 15px; margin: 14px 0 4px; line-height: 1.6; font-size: .95em;
}

/* 모바일 안내 최소화 (PC+아이패드 우선) */
@media (max-width: 700px) {
    #topbar { flex-wrap: wrap; height: auto; padding: 6px 8px; row-gap: 5px; }
    .tb-scale { display: none; }
}