:root{--ink:#17313d;--muted:#60717a;--navy:#123f55;--teal:#087f74;--teal2:#0d9488;--mint:#dff4ef;--paper:#fff;--bg:#f2f6f5;--line:#d5e1df;--warn:#9a5b12;--warnbg:#fff7e6;--bad:#ad3434;--badbg:#fff0f0;--good:#176b55;--goodbg:#eaf8f3;--shadow:0 12px 35px rgba(25,61,70,.08);--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Pretendard,"Noto Sans KR",system-ui,-apple-system,sans-serif;line-height:1.55}button,input,select{font:inherit}button{color:inherit}.skip-link{position:fixed;left:12px;top:-60px;background:#fff;padding:10px;z-index:100}.skip-link:focus{top:12px}.site-header{background:var(--navy);color:#fff;padding:22px 24px}.header-inner{max-width:1240px;margin:auto;display:flex;align-items:center;gap:16px}.brand-mark{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#dff4ef;color:var(--teal);font-weight:800}.eyebrow,.card-label,.step-kicker{margin:0 0 3px;letter-spacing:.12em;font-size:.72rem;font-weight:800;color:#83d7c7}.site-header h1{margin:0;font-size:clamp(1.25rem,3vw,1.75rem)}.session-status{margin-left:auto;display:grid;grid-template-columns:auto auto;gap:0 7px;font-size:.78rem}.session-status strong{grid-column:2;color:#b7e6dc}.status-dot{width:8px;height:8px;border-radius:50%;background:#67e8c9;align-self:center}.stepper-wrap{background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:0;z-index:20}.stepper{max-width:1160px;min-width:700px;margin:0 auto;padding:12px 22px;display:flex;list-style:none}.stepper li{flex:1;position:relative}.stepper li:not(:last-child):after{content:"";position:absolute;height:2px;background:var(--line);left:64%;right:-36%;top:17px}.stepper li.done:not(:last-child):after{background:var(--teal2)}.stepper button{border:0;background:none;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}.stepper span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e9efee;color:#758681;font-weight:800;z-index:1}.stepper em{font-style:normal;font-size:.77rem;color:var(--muted);white-space:nowrap}.stepper button[aria-current=step] span,.stepper li.done span{background:var(--teal);color:#fff}.stepper button[aria-current=step] em{font-weight:800;color:var(--teal)}.workspace{max-width:1240px;margin:0 auto;padding:30px 24px 54px}.step-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;gap:20px}.step-kicker{color:var(--teal)}.step-heading h2{margin:3px 0 5px;font-size:clamp(1.45rem,3vw,2rem)}.step-heading p:last-child{margin:0;color:var(--muted)}.step-panel{display:none}.step-panel.active{display:block;animation:fade .22s ease}@keyframes fade{from{opacity:.35;transform:translateY(4px)}}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.two-column{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);gap:22px}.image-card,.assembly-card{padding:20px;display:grid;place-items:center}.microscope-image-wrap,.assembly-image-wrap{width:min(100%,600px);aspect-ratio:1;position:relative}.microscope-image-wrap img,.assembly-image-wrap img{width:100%;height:100%;display:block;object-fit:contain}.hotspot,.dropzone{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2}.hotspot{width:34px;height:34px;border:3px solid #fff;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;box-shadow:0 3px 12px #17313d66;cursor:pointer}.hotspot:hover,.hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.15)}.hotspot.visited{background:var(--teal2)}.learning-card,.inventory,.controls-card{padding:26px}.learning-card{display:flex;flex-direction:column;min-height:390px}.card-label{color:var(--teal)}.learning-card h3,.inventory h3,.controls-card h3,.results-card h3{font-size:1.25rem;margin:8px 0}.learning-card>p:nth-of-type(2){color:var(--muted)}.part-progress{margin-top:auto}.part-progress>span{color:var(--muted);font-size:.85rem}.part-progress>strong{float:right}.part-progress div{height:7px;background:#e5eeec;border-radius:9px;margin:8px 0 20px;overflow:hidden}.part-progress i{display:block;width:0;height:100%;background:var(--teal2);transition:width .25s}.btn{border:1px solid transparent;border-radius:10px;padding:10px 17px;font-weight:750;cursor:pointer;transition:.15s}.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #69cdbc;outline-offset:2px}.btn.primary{background:var(--teal);color:#fff}.btn.primary:hover{background:#056d64}.btn.secondary{background:var(--mint);color:#075e57}.btn.ghost{background:#fff;border-color:var(--line)}.btn:disabled{opacity:.48;cursor:not-allowed}.full{width:100%}.assembly-image-wrap .dropzone{border:2px dashed var(--teal);background:#ffffffe8;color:var(--navy);padding:7px 12px;border-radius:9px;font-size:.8rem;white-space:nowrap}.dropzone.targeted{box-shadow:0 0 0 5px #42b8a644}.dropzone.mounted{background:var(--goodbg);border-style:solid;color:var(--good)}.muted{color:var(--muted)}.instrument{display:flex;align-items:center;text-align:left;gap:13px;width:100%;border:1px solid #a9d6ce;background:#f3fbf9;padding:13px;border-radius:12px;margin:12px 0;cursor:grab}.instrument.selected{outline:3px solid #69cdbc}.instrument.mounted{display:none}.instrument-icon{width:42px;height:42px;border-radius:9px;background:var(--mint);display:grid;place-items:center;font-size:1.35rem}.instrument small{display:block;color:var(--muted)}.feedback{padding:11px 13px;border-radius:10px;margin:15px 0;font-size:.9rem}.feedback.neutral{background:#edf4f5;color:#45616b}.feedback.success{background:var(--goodbg);color:var(--good)}.feedback.error{background:var(--badbg);color:var(--bad)}.feedback.warning{background:var(--warnbg);color:var(--warn)}.lab-grid{display:grid;grid-template-columns:minmax(400px,1.1fr) minmax(320px,.9fr);gap:22px}.scope-card{padding:17px;background:#e7efed}.scope-topline{display:flex;justify-content:space-between;padding:2px 4px 12px;color:#526b71;font-size:.75rem;letter-spacing:.12em}.scope-topline strong{color:var(--navy);font-size:.95rem}.scope-canvas{width:min(100%,620px);aspect-ratio:1;display:block;margin:auto;border-radius:50%;touch-action:none}.scope-hint{text-align:center;color:#526b71;font-size:.82rem;padding-top:10px}.controls-card hr{border:0;border-top:1px solid var(--line);margin:23px 0}.control-section{margin:15px 0}.control-section>label,.controls-card>label,.measurement-entry label,.input-grid label{display:grid;gap:6px;font-size:.85rem;font-weight:750}.range-row{display:grid;grid-template-columns:1fr 56px;align-items:center;gap:8px}.range-row output{text-align:right;font-weight:800;color:var(--teal)}input,select{width:100%;border:1px solid #bdcdca;background:#fff;border-radius:9px;padding:9px 10px;color:var(--ink)}input[type=range]{padding:0;accent-color:var(--teal)}.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#edf3f2;padding:4px;border-radius:10px}.segmented button,.target-tabs button{border:0;background:transparent;border-radius:8px;padding:8px;font-weight:700;cursor:pointer}.segmented button.active,.target-tabs button.active{background:#fff;color:var(--teal);box-shadow:0 2px 8px #17313d18}.dpad{width:126px;margin:8px auto;display:grid;grid-template-columns:repeat(3,42px);grid-template-areas:". u ." "l c r" ". d ."}.dpad button{width:38px;height:38px;border:1px solid var(--line);background:#f5f9f8;border-radius:8px;cursor:pointer}.dpad [data-dir=up]{grid-area:u}.dpad [data-dir=left]{grid-area:l}.dpad [data-dir=center]{grid-area:c}.dpad [data-dir=right]{grid-area:r}.dpad [data-dir=down]{grid-area:d}.formula{font-size:.84rem;background:#f2f7f6;padding:10px;border-radius:8px}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.input-grid .full{grid-column:1/-1}.calibration-pills,.completion-list{display:flex;gap:7px;flex-wrap:wrap}.calibration-pills span,.completion-list span{padding:5px 9px;border-radius:20px;background:#edf3f2;color:#60717a;font-size:.78rem}.calibration-pills .done,.completion-list .done{background:var(--goodbg);color:var(--good)}.target-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#edf3f2;padding:4px;border-radius:10px;margin:12px 0}.measurement-entry{display:grid;gap:10px}.results-card{padding:28px}.results-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.result-summary{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.summary-chip{padding:10px 13px;border-radius:10px;background:#f0f6f5}.summary-chip small{display:block;color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:790px}th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:.86rem}th{background:#f3f7f6;color:#51666c}.step-actions{display:flex;justify-content:space-between;margin-top:22px}.toast-region{position:fixed;right:20px;bottom:20px;z-index:50}.toast{background:var(--navy);color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);animation:fade .2s;margin-top:8px;max-width:320px}
.focus-stepper{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;margin-top:8px}.focus-stepper button{height:34px;border:1px solid var(--line);border-radius:8px;background:#f5f9f8;font-weight:800;cursor:pointer}.focus-stepper span{text-align:center;color:var(--muted);font-size:.76rem}.focus-stepper kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:1px solid #b9c9c6;border-bottom-width:2px;border-radius:5px;background:#fff;color:var(--navy);font:700 .7rem inherit}
@media(max-width:850px){.two-column,.lab-grid{grid-template-columns:1fr}.lab-grid .scope-card{order:0}.controls-card{order:1}.session-status{display:none}.workspace{padding:22px 15px}.site-header{padding:16px}.step-heading{align-items:center}.microscope-image-wrap,.assembly-image-wrap{max-width:530px}}
@media(max-width:520px){.brand-mark{display:none}.site-header h1{font-size:1.15rem}.step-heading{display:block}.step-heading .btn{margin-top:12px}.image-card,.assembly-card{padding:6px}.learning-card,.inventory,.controls-card,.results-card{padding:18px}.lab-grid{grid-template-columns:minmax(0,1fr)}.scope-card{padding:8px}.input-grid{grid-template-columns:1fr}.input-grid .full{grid-column:auto}.results-heading{display:block}.results-heading .btn{margin-top:10px}.hotspot{width:29px;height:29px;font-size:.75rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}