/* ===== 공통 디자인: 색상·글자·버튼 크기는 여기에서 바꿉니다. ===== */
:root{color-scheme:dark;--bg:#0f1729;--surface:#152136;--panel:#172339;--line:#2b394f;--text:#f0f4fa;--muted:#afbdd0;--teal:#6de8d2;--yellow:#ffe099;--radius:22px;font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;font-size:16px;line-height:1.6}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 50% 0,#16334277,transparent 52%),var(--bg);color:var(--text)}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:48px;border:1px solid transparent;border-radius:12px;font-weight:650;color:inherit;background:none;transition:background .18s,transform .18s,border-color .18s}button:hover{background:#ffffff0d}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1:focus{outline:none}kbd{padding:3px 6px;background:#ffffff08;border:1px solid var(--line);border-radius:5px;font:inherit;font-size:13px}em{font-style:normal}svg{display:block;width:100%;height:100%}.skip-link{position:fixed;top:-80px;left:12px;z-index:99;background:var(--teal);color:var(--bg);padding:12px}.skip-link:focus{top:12px}
.site-header{height:84px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0d}.brand{display:flex;gap:12px;align-items:center;font-size:20px;font-weight:750;white-space:nowrap}.brand b{font-size:14px;margin-left:5px;color:var(--teal)}.brand-icon{font-size:32px;line-height:1;color:var(--teal)}.header-actions{display:flex;align-items:center;gap:26px}.key-help{color:#8e9fb6;font-size:13px}.key-separator{margin:0 10px;color:#4a5a72}.total-stars{display:flex;gap:8px;align-items:center;font-size:14px}.total-stars>span:first-child{color:var(--yellow);font-size:21px}.total-stars b{font-size:20px}.total-stars>span:last-child{color:#899cb6}.icon-button{width:48px;font-size:25px;background:#ffffff04;border-color:var(--line)}
/* ===== 홈 화면 ===== */
.home-screen{max-width:1240px;padding:44px 40px 28px;margin:auto}.home-intro{margin-bottom:36px}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--teal);font-size:14px;font-weight:650;letter-spacing:.02em;margin-bottom:10px}.eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--teal)}.home-intro h1{font-size:clamp(32px,3.5vw,48px);line-height:1.35;font-weight:820;letter-spacing:-1.7px;margin-bottom:12px}.home-intro h1 em{color:var(--teal)}.home-intro p{color:var(--muted);line-height:1.8}.mobile-break{display:none}.experiment-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.experiment-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;background:linear-gradient(130deg,#1a2a3d88,#142033);position:relative;overflow:hidden}.projectile-card{border-color:#3b706f;background:linear-gradient(135deg,#193c4280,#152136 80%)}.experiment-card:has(button:hover){border-color:#66968e}.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.experiment-number{font:600 12px/1.5 system-ui,sans-serif;letter-spacing:2px;color:#a0b0c5}.projectile-card .experiment-number{color:var(--teal)}.card-stars{font-size:17px;color:#7689a5;white-space:nowrap;letter-spacing:3px}.card-stars b{font-size:13px;letter-spacing:0;color:#a5b4cb;margin-left:6px}.card-stars .earned{color:var(--yellow)}.card-diagram{height:120px;margin:10px -6px 8px}.diagram-grid{fill:none;stroke:#7390a2;stroke-width:.6;opacity:.11}.card-title{display:flex;gap:10px;align-items:center;margin-bottom:6px}.card-title>span{font-size:24px}.card-title h2{font-size:24px;letter-spacing:-.6px;line-height:1.4}.experiment-card>p{font-size:16px;color:var(--muted);margin-bottom:22px;word-break:keep-all}.card-button{display:flex;align-items:center;justify-content:space-between;width:100%;border-color:#35465b;padding:10px 16px;text-align:left;font-size:16px;background:#ffffff03}.projectile-card .card-button{background:var(--teal);color:#112c32;border-color:var(--teal)}.projectile-card .card-button:hover{background:#95f3e2}.card-button>span:not(.coming-label){font-size:23px;line-height:1}.coming-label{color:#aab8cf;font-size:12px;font-weight:500}.home-footer{display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#92a4bd;margin-top:30px}.home-footer b{color:var(--yellow)}
/* ===== 실험 공통 레이아웃: 왼쪽 70%, 오른쪽 30% ===== */
.simulation-screen{padding:0 28px;max-width:2200px;margin:auto}.experiment-header{display:flex;align-items:center;gap:24px;height:100px}.back-button{border-color:var(--line);padding:8px 18px;font-size:16px}.experiment-header h1{font-size:25px;line-height:1.3;margin-top:3px;letter-spacing:-.5px}.experiment-header .experiment-number{font-size:11px}.experiment-mode{margin-left:auto;color:var(--teal);font-size:14px}.simulation-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(328px,3fr);gap:20px;height:calc(100dvh - 270px);min-height:550px}.stage{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#14283a;min-width:0;isolation:isolate}.stage canvas{display:block;touch-action:none;width:100%;height:100%;outline:none}#canvas-container{position:absolute;inset:0}.scene-top{position:absolute;inset:16px 18px auto;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.scene-label{display:flex;align-items:center;gap:8px;font-size:14px;border:1px solid #9ad8d32a;background:#102331de;padding:10px 12px;border-radius:10px;backdrop-filter:blur(10px)}#environment-dot{width:7px;height:7px;background:var(--teal);border-radius:50%}.subtle-button{font-size:14px;background:#102331df;border-color:#9ad8d330;padding:8px 12px;pointer-events:auto}.subtle-button:hover{background:#224957}.scene-message{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);border:1px solid #9ad8d323;border-radius:14px;background:#102331e8;color:#e3efe9;padding:11px 18px;max-width:calc(100% - 36px);width:max-content;text-align:center;font-size:15px;pointer-events:none;backdrop-filter:blur(6px)}.scene-message.success{border-color:#75e4c591;color:#b3ffe8}.scene-bottom{position:absolute;inset:auto 20px 16px;display:flex;justify-content:space-between;gap:12px;color:#cadce3;font-size:12px;text-shadow:0 1px 4px #061722}.scene-bottom b{font-weight:600}.trajectory-legend{position:absolute;bottom:49px;left:20px;right:20px;display:flex;flex-wrap:wrap;gap:8px;pointer-events:none}.trajectory-chip{font-size:11px;display:flex;gap:6px;align-items:center;background:#102331db;border-radius:6px;padding:5px 8px;color:#d3e4e9}.trajectory-chip i{width:8px;height:8px;border-radius:50%;flex-shrink:0}.control-panel{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#152136;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#526279 transparent}.panel-title{font-size:18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}.panel-title small{font-size:12px;color:#9fadc0;font-weight:450}.control{margin-bottom:22px}.control-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:16px;color:#d4deed}.control-label output{font-size:28px;font-weight:760;line-height:1.3;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap}.control-label output small{font-size:14px;font-weight:500;margin-left:3px}.range-limits{display:flex;justify-content:space-between;color:#94a6bf;font-size:12px}.control input[type=range]{width:100%;height:28px;margin:3px 0;accent-color:var(--teal);cursor:pointer;touch-action:pan-y}.segmented{display:flex;gap:7px}.segmented button{flex:1;min-width:0;padding:8px 3px;border-color:#35465a;font-size:14px;color:#bccae0}.segmented button small{display:block;font-size:12px;font-weight:450}.segmented button[aria-pressed=true]{border-color:var(--teal);background:#6de8d215;color:var(--teal)}.unit-note{font-size:12px;color:#9bacc4;margin-top:5px}.action-row{display:flex;gap:9px;margin:22px 0 18px}.primary-button{background:var(--teal);color:#0d2f33;padding:10px 18px;border-color:var(--teal);font-size:17px}.primary-button:hover{background:#a1f4e4}.action-row .primary-button{flex:1.5}.secondary-button{padding:10px 14px;border-color:#465671;background:#ffffff04}.action-row .secondary-button{flex:1}.section-divider{border:0;border-top:1px solid var(--line);margin:20px 0}.measurement-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.measurement-heading h3{font-size:16px}.measurement-heading span{font-size:12px;color:#a6b7ce}.measurements{display:grid;gap:8px}.measurement{display:flex;align-items:center;justify-content:space-between;background:#0d192b;border:1px solid #26354b;border-radius:11px;padding:10px 12px}.measurement>span{font-size:14px;color:#aabbd1}.measurement output{font-size:24px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.4}.measurement output small{font-size:13px;font-weight:450;color:#aabbd1;margin-left:4px}.clear-trails{width:100%;font-size:14px;color:#c7d5e8;margin-top:9px;border-color:#35465a}.mission-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mission-heading h3{font-size:17px}.mission-heading span{font-size:13px;color:var(--yellow)}.mission-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}.mission-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#b8c7db;line-height:1.55}.mission-list .mission-icon{color:#8d9cb2;font-size:21px;line-height:1.1}.mission-list .achieved{color:#e5eacb}.mission-list .achieved .mission-icon{color:var(--yellow)}.mission-tip{font-size:12px;color:#9eafc4;padding:12px;background:#ffffff04;border-radius:10px;margin-top:14px}.teacher-dock{height:84px;display:flex;align-items:center;justify-content:center}.teacher-button{display:flex;align-items:center;gap:14px;padding:11px 22px;border:1px solid #455466;background:#1a2b3d;box-shadow:0 5px 25px #0002;border-radius:30px;font-size:16px}.teacher-button>span:first-child{font-size:20px}.teacher-button>span:last-child{color:var(--teal)}.settings-dialog{color:var(--text);background:#18253b;border:1px solid #3c4b65;border-radius:20px;width:min(520px,calc(100% - 32px));padding:24px;box-shadow:0 20px 80px #0007}.settings-dialog::backdrop{background:#050c19aa;backdrop-filter:blur(5px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.dialog-header h2{font-size:23px}.settings-dialog p{font-size:16px;margin:12px 0}.quiet{color:var(--muted)}.toast{position:fixed;z-index:100;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:15px 24px;background:#e5fff5;color:#173b3a;box-shadow:0 8px 30px #0006;border:1px solid #9defd6;border-radius:14px;font-size:16px;text-align:center}.canvas-error{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;background:#102033;text-align:center}.canvas-error h2{font-size:23px}.canvas-error p{color:var(--muted);max-width:440px}.noscript{padding:24px;background:#392828}
/* ===== 태블릿·휴대전화: 3D 장면 아래로 컨트롤을 배치합니다. ===== */
@media(min-width:1600px){.home-screen{padding-top:60px}.card-diagram{height:140px}.simulation-layout{grid-template-columns:7fr 3fr}.control-panel{padding:28px}}
@media(max-width:1000px){.key-help{display:none}.simulation-screen{padding:0 16px}.simulation-layout{grid-template-columns:minmax(0,1.6fr) minmax(310px,1fr);gap:14px}.scene-top{inset:12px;flex-wrap:wrap}.scene-label{font-size:12px}.scene-top .subtle-button{font-size:12px}.scene-bottom{font-size:11px;inset:auto 12px 14px}.control-panel{padding:18px}.home-screen{padding:36px 28px 26px}.experiment-card{padding:22px}.card-stars{letter-spacing:1px}.card-title h2{font-size:22px}}
@media(max-width:760px){.site-header{height:72px;padding:0 20px}.header-actions{gap:14px}.brand{font-size:17px;gap:8px}.brand-icon{font-size:28px}.home-screen{padding:30px 20px}.home-intro{margin-bottom:25px}.home-intro h1{letter-spacing:-1px}.home-intro p{font-size:15px}.mobile-break{display:block}.experiment-grid{gap:16px}.experiment-card{padding:18px}.card-top{align-items:flex-start}.experiment-number{font-size:10px;letter-spacing:1px}.card-stars{font-size:14px}.card-stars b{display:block;text-align:right;font-size:11px}.card-diagram{height:90px}.card-title{gap:7px;align-items:flex-start}.card-title h2{font-size:20px}.card-title>span{font-size:20px}.experiment-card>p{min-height:50px;font-size:14px;margin-bottom:14px}.card-button{padding:9px 11px;font-size:14px;flex-wrap:wrap;gap:2px}.coming-label{font-size:11px}.home-footer{flex-direction:column;gap:6px;margin-top:24px}.experiment-header{height:94px;gap:16px}.experiment-header h1{font-size:23px}.experiment-mode{display:none}.back-button{padding:8px 12px;font-size:14px}.simulation-layout{display:flex;flex-direction:column;height:auto;min-height:0;gap:16px}.stage{height:52dvh;min-height:360px;flex-shrink:0}.control-panel{overflow:visible;padding:22px}.scene-top{flex-wrap:nowrap}.scene-message{font-size:13px;bottom:93px;padding:10px 12px}.scene-bottom{font-size:11px}.teacher-dock{position:sticky;bottom:0;height:76px;background:linear-gradient(transparent,#0f1729 45%);z-index:5}.teacher-button{font-size:14px;gap:10px}.panel-title{font-size:20px}.control-label{font-size:17px}.control-label output{font-size:30px}.mission-list li{font-size:16px}.trajectory-chip{font-size:10px}.trajectory-legend{left:12px;right:12px;gap:4px}}
@media(max-width:440px){.brand b{display:none}.site-header{padding:0 16px}.total-stars{gap:5px}.header-actions{gap:10px}.experiment-grid{grid-template-columns:1fr}.experiment-card{padding:20px 22px}.card-diagram{height:108px}.card-stars b{display:inline;margin-left:6px}.experiment-number{font-size:11px}.card-title h2{font-size:23px}.experiment-card>p{min-height:0;font-size:16px}.card-button{font-size:16px}.home-intro h1{font-size:29px}.home-intro p{font-size:16px}.home-screen{padding:28px 16px}.scene-label{padding:8px;font-size:11px}.scene-top .subtle-button{padding:8px;font-size:11px}.trajectory-legend{bottom:47px}.scene-message{bottom:108px}.scene-bottom{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* 교실 화면에서도 본문과 현재 중력값을 읽기 쉽게 유지합니다. */
.home-intro p,.experiment-card>p{font-size:16px}
.segmented button small{font-size:24px;font-weight:750;line-height:1.4}
/* ===== 충돌 막대그래프와 롤러코스터 에너지 계기판 ===== */
.collision-graphs{position:absolute;left:18px;right:18px;bottom:44px;padding:14px 18px;background:#102137ef;border:1px solid #56718b55;border-radius:16px;backdrop-filter:blur(6px)}
.graph-title{display:flex;justify-content:space-between;gap:8px;font-size:15px}.graph-title>span{font-size:12px;color:#aebed4}.graph-pairs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}.graph-pair+.graph-pair{border-left:1px solid #58708755;padding-left:22px}.graph-label{font-size:14px;color:#e3edfb}.graph-label small{font-size:12px;color:#aebed4}.bar-comparison{display:flex;justify-content:center;align-items:center;gap:22px}.chart-column{width:56px;text-align:center;font-variant-numeric:tabular-nums}.chart-column>span{font-size:16px;font-weight:700}.bar-well{height:64px;position:relative;border-radius:5px;overflow:hidden;margin:3px 10px}.chart-bar{position:absolute;bottom:0;left:0;right:0}.momentum-bar{background:#6de8d2}.kinetic-bar{background:#f0a68a}.converted-background{background:#8491a4}.chart-column>small{font-size:12px}.equal-mark{font-size:28px;color:#6de8d2}.energy-arrow{font-size:23px;color:#b4c6dd}.graph-footnote{font-size:12px;color:#a9bbd2;margin-top:8px}.graph-footnote b{color:#edf5ff}.stage[data-sim=collision] .scene-message{bottom:auto;top:94px}.stage[data-sim=coaster] .scene-message{bottom:56px}.coaster-chart{position:absolute;left:16px;top:96px;width:228px;padding:14px 12px;background:#102137ec;border:1px solid #56718b55;border-radius:14px;pointer-events:none}.energy-total-line{display:flex;justify-content:space-between;align-items:center;gap:6px;border-top:2px dashed #ffe099;padding-top:8px;font-size:13px;color:#ffe099}.energy-total-line b{font-size:19px}.energy-sum-label{font-size:12px;color:#bdcce0;margin:7px 0 14px;text-align:center}.energy-columns{display:flex;gap:9px;justify-content:space-between}.energy-column{flex:1;text-align:center;min-width:0}.energy-column strong{font-size:16px;font-variant-numeric:tabular-nums}.energy-well{height:142px;position:relative;background:#ffffff07;margin:5px 12px 6px;border-radius:5px;overflow:hidden}.energy-well i{position:absolute;bottom:0;left:0;right:0}.energy-column>span{font-size:13px}.energy-stacked{height:7px;display:flex;border-radius:5px;overflow:hidden;margin-top:14px}.energy-stacked [data-sum=potential]{background:#65a9fa}.energy-stacked [data-sum=kinetic]{background:#f18480}.energy-stacked [data-sum=heat]{background:#a3adbc}.coaster-chart>p{font-size:11px;color:#b3c5dc;margin-top:9px;text-align:center}.impact-shake{animation:impact-shake .3s ease-out}@keyframes impact-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@media(max-width:1000px){.coaster-chart{width:178px;left:10px;padding:10px}.energy-well{height:110px;margin-left:8px;margin-right:8px}.energy-column strong{font-size:14px}.graph-title{flex-wrap:wrap}.bar-comparison{gap:10px}.graph-pairs{gap:12px}.graph-pair+.graph-pair{padding-left:12px}}
@media(max-width:760px){.stage[data-sim=coaster]{min-height:520px}.coaster-chart{top:84px;width:166px}.energy-well{height:90px}.collision-graphs{left:10px;right:10px;padding:10px;bottom:34px}.graph-title{font-size:13px}.graph-title>span{font-size:10px}.graph-footnote{font-size:10px}.stage[data-sim=collision]{min-height:460px}.stage[data-sim=collision] .scene-message{top:80px;max-width:94%}.graph-label{font-size:12px}.chart-column>span{font-size:14px}.stage[data-sim=coaster] .scene-message{bottom:45px}}

/* AI 선생님과 설정: 답변은 안전하게 일반 텍스트로 표시합니다. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.settings-dialog a{color:var(--teal);text-decoration:underline}.settings-dialog input,.ai-panel input{width:100%;min-height:50px;border:1px solid #536580;border-radius:10px;padding:12px;background:#0e1a2e;color:var(--text);font-size:16px}.settings-dialog label{display:block;margin:20px 0 8px}.orbit-classification{border:1px solid #5d6991;background:#a5a0ff12;color:#d0caff;border-radius:12px;padding:14px;margin:16px 0;font-size:25px;font-weight:750;text-align:center}.ai-panel{position:fixed;z-index:30;right:0;top:0;bottom:0;width:min(440px,100%);padding:24px;background:#17243a;border-left:1px solid #52647e;box-shadow:-15px 0 60px #0005;display:flex;flex-direction:column;gap:16px;transform:translateX(105%);transition:transform .25s;visibility:hidden}.ai-panel.is-open{transform:translateX(0);visibility:visible}.ai-panel .dialog-header{margin:0}.ai-panel h2{font-size:23px}.chat-messages{flex:1;overflow-y:auto;min-height:80px;display:flex;flex-direction:column;gap:16px;padding:8px 2px}.chat-message{padding:14px;border:1px solid #40516c;border-radius:14px;background:#202f48}.chat-message.user{background:#1c4648;border-color:#437775;margin-left:24px}.chat-message b{font-size:13px;color:#a9cbd6}.chat-message p{font-size:16px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:5px}.quick-questions{display:flex;flex-wrap:wrap;gap:7px}.quick-questions button{padding:8px 10px;border-color:#465875;font-size:13px}.ai-panel form{display:flex;gap:9px}.ai-panel form input{min-width:0}.ai-panel form button{flex-shrink:0}#chat-loading{font-size:14px;color:var(--teal)}