/* to2.at/14 작업면에 맞춘 배치: 50px 헤더, 왼쪽 게임, 오른쪽 흰 편집기. */
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--ground:#edf3f1;--route:#24795b;--route-deep:#1d634e;--ink:#263c35;--text:#354b43;--muted:#62776d;--line:#e3eae6;--mono:'JetBrains Mono',Consolas,'D2Coding',monospace}
body{height:100dvh;display:grid;grid-template-rows:50px minmax(0,1fr);overflow:hidden;font-size:14px}
.top{height:50px;padding:0 22px;gap:20px;border-color:#e4ebe7}
.brand{font-size:15px;gap:10px;color:#203e32}
.brand svg{width:30px;height:30px;padding:4px;border-radius:8px;background:#e9f4ed}
.session-title{font-size:12px;font-weight:650;border-left:1px solid var(--line);padding-left:20px;white-space:nowrap}
.tally{margin-left:auto;order:2;flex-direction:row;gap:12px;color:var(--muted)}
#progress{font-size:11px;color:var(--muted);font-weight:400}.tally-lang{font-size:11px}
.course-menu{order:3;position:relative;flex:none}
.course-menu>summary{font-size:12px;padding:7px 13px;border:1px solid #dfe5e1;border-radius:9px;cursor:pointer;list-style:none;background:white}
.course-menu>summary::-webkit-details-marker,.language-menu>summary::-webkit-details-marker,.settings-menu>summary::-webkit-details-marker{display:none}
.course-menu .route{position:absolute;top:42px;right:0;width:360px;max-width:90vw;padding:20px;background:white;box-shadow:0 8px 26px #173c2920;border-radius:12px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.course-menu:not([open]) .route{display:none}.course-menu .seg-name{display:inline-block;min-width:50px}.course-menu .seg{flex-wrap:wrap;gap:7px}
.course-menu .ladder{position:absolute;right:0;top:270px;width:360px;max-width:90vw;padding:16px 20px;background:white;border-radius:0 0 12px 12px;box-shadow:0 14px 24px #173c2915;z-index:2}
.course-menu:not([open]) .ladder{display:none}
.layout{display:grid;grid-template-columns:minmax(0,calc(50% - 40px)) minmax(0,1fr);gap:0;padding:0;min-height:0}
.pane-game{position:relative;overflow:hidden;gap:0;background:#f4f5f1;padding:0}
.stage{height:100%;gap:0;min-height:0;position:relative;justify-content:center}
.scene-wrap{border:0;border-radius:0;padding:0;background:transparent;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;width:100%}
#scene{width:100%;height:100%;min-height:0;max-height:none;object-fit:contain}
.stage-bar{position:absolute;left:16px;top:14px;z-index:2}.tabs{gap:4px}.tabs button{border:0;background:#ffffffd9;font-size:11px;min-height:27px;padding:3px 9px;box-shadow:0 1px 5px #243d2910}.tabs button.cur{box-shadow:none;background:#fff;color:var(--route)}
.stage-foot{position:absolute;bottom:17px;left:18px;right:18px;min-height:0;font-size:11px;pointer-events:none}.status{font-size:11px;background:#ffffffe8;border-radius:5px;padding:3px 7px}.status:empty{display:none}.hud{font-size:12px;background:#ffffffe8;border-radius:5px;padding:3px 7px}.hud:empty{display:none}
.legend-box{position:absolute;left:16px;bottom:15px;background:#fffffff0;border:0;border-radius:6px;padding:0 10px;max-width:calc(100% - 32px);z-index:3}.legend-box>summary{font-size:10px;min-height:24px;padding:3px 0}.legend-box[open]{padding-bottom:8px}.legend-box[open]~*{display:none}
.result:not(:empty){position:absolute;left:18px;right:18px;bottom:56px;z-index:4;padding:14px 18px;max-height:45%;overflow:auto;box-shadow:0 4px 20px #263c351a}
.pane-code{padding:16px 16px 16px 20px;overflow:auto;gap:10px;background:#edf3f1;min-width:0}
.pane-code .code{padding:0;border:1px solid #e0e8e2;border-radius:16px;box-shadow:0 3px 18px #223d3010;display:flex;flex-direction:column;gap:0;min-height:100%;flex:1 0 auto;overflow:visible}
.brief{position:relative;padding:22px 24px 20px;gap:0;background:#f9fcfa;border-radius:16px 16px 0 0;border-bottom:1px solid var(--line)}
.sign{display:block;padding:0}.mission-label{display:block;font-size:11px;font-weight:650;color:#597267;margin-bottom:16px}.brief h1{font-size:14px;font-weight:500;line-height:1.6}.brief .task{font-size:14px;line-height:1.65;margin-top:5px;max-width:none}.brief .topic{display:none}.steps{display:none}
.mission-row{position:absolute;right:24px;top:18px;display:block;max-width:calc(100% - 48px)}
.tips{font-size:12px;margin:0}.tips summary{font-size:11px;color:#516d60;font-weight:500;min-height:24px;list-style:none}.tips summary::after{content:' ↗'}.tips[open]{background:white;border:1px solid var(--line);border-radius:10px;padding:12px 16px;width:400px;max-width:100%;box-shadow:0 8px 24px #203e3220;position:relative;z-index:8}.tips[open] p{font-size:13px}.tips:not([open]) summary{font-size:0}.tips:not([open]) summary::after{content:'도움말 ↗';font-size:11px}
.file-bar{height:49px;display:flex;align-items:center;gap:10px;padding:14px 23px;border-bottom:1px solid #edf1ee;font:12px/20px var(--mono);position:relative;flex-shrink:0}
.file-icon{font:700 10px var(--sans);background:#eaf3ed;color:#3b7258;min-width:16px;height:18px;padding:2px;border-radius:3px;text-align:center}
.language-menu{margin-left:auto;font:11px var(--sans);color:#60776b;position:relative}.language-menu>summary{cursor:pointer;list-style:none;padding:5px 0 5px 12px}.language-menu>summary::after{content:' ⌄';padding-left:6px}
.language-menu[open]>.lang-bar,.language-menu[open]>.lang-note{position:absolute;right:0;width:320px;max-width:75vw;background:white;z-index:9;padding:12px;border:1px solid var(--line)}
.language-menu[open]>.lang-bar{top:30px;border-radius:10px 10px 0 0;box-shadow:0 8px 24px #203e3220}.language-menu[open]>.lang-note{top:125px;border-radius:0 0 10px 10px}.lang-bar h2{font-size:12px}.langs{border:0;gap:3px;overflow:visible}.langs button{font-size:11px;padding:4px 8px;min-height:28px;border:0;border-radius:5px}
.code-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.code-cons{padding:0 22px}.code-cons:empty{padding:0}.cons{font-size:11px;padding:6px 10px;margin:6px 0;border:0}.prelude{padding:10px 22px 0}.prelude .code-head h3,.prelude .code-head span{font-size:11px}.prelude pre{font-size:13px;max-height:110px}
.editor{margin-top:10px;border:0;border-radius:0;height:auto;min-height:180px;flex:1 1 0;grid-template-columns:43px minmax(0,1fr);background:#fff}
.editor:focus-within{outline:none;border:0}.gutter{background:#fff;border-right:1px solid #f1f4f2;color:#9aaca3;font:16px/21px var(--mono);padding:8px 10px 8px 0}
#code,#syntax{font:16px/21px var(--mono);letter-spacing:0;padding:8px 10px;tab-size:4;white-space:pre;word-break:normal;overflow-wrap:normal}
#code{color:transparent;caret-color:#263c35;-webkit-text-fill-color:transparent;z-index:2}#code::selection{background:#a5d6c480;-webkit-text-fill-color:transparent}#syntax{position:absolute;inset:0;margin:0;pointer-events:none;overflow:visible;color:#263c35;z-index:1;background:transparent}.hl{z-index:0}.token-keyword{color:#235c9e}.token-number{color:#817d27}.token-string{color:#9c4c33}.token-comment{color:#667c70}
.api{background:white;border:0;border-top:1px solid var(--line);border-radius:0;padding:0 22px;max-height:125px;overflow:auto;flex-shrink:0}.api>summary{font-size:10px;font-weight:400;color:#6c8176;min-height:34px;padding:12px 0 5px}.api>summary::before{display:none}.api[open]{padding-bottom:12px}.api dl>div{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:2px 0;border:0;align-items:baseline}.api dt{font:12px/1.6 var(--mono);color:#344b40;max-width:240px}.api dd{font:12px/1.6 var(--sans);color:#61776c}
.ed-actions{position:relative;align-items:center;gap:12px;padding:16px 22px 14px;border-top:1px solid var(--line);min-height:76px;flex-shrink:0}.ed-actions #run{order:5;flex:0 0 148px;margin-left:0;height:44px;border-radius:10px;font-size:13px}.ed-actions #run .i{display:none}.ed-actions #restore{order:4;width:44px;height:44px;font-size:0;justify-content:center;background:#f7faf8;border:1px solid #e1e8e3;border-radius:10px;padding:0}.ed-actions #restore .i{width:21px;height:21px}.answer-btn{order:3;margin-left:auto;font-size:11px!important;border:0!important;background:none!important;padding:5px 6px!important;min-height:32px!important;color:#597366!important}.answer-btn .i{width:13px}
.settings-menu{position:relative;order:1}.settings-menu>summary{list-style:none;cursor:pointer;color:#617d6d;padding:7px 2px;display:flex;align-items:center}.settings-menu>.playback{position:absolute;left:0;bottom:40px;width:280px;padding:16px;background:white;border:1px solid var(--line);box-shadow:0 5px 22px #203e3220;border-radius:10px;z-index:9;gap:12px}.settings-menu:not([open])>.playback{display:none}
.ed-foot{border-top:1px solid var(--line);margin:0;padding:10px 22px;font-size:10px;color:#778c80;min-height:35px;flex-shrink:0}.shortcut{margin-left:auto}.line-count{display:none}.trace{border:0;background:transparent;padding:0 5px;flex-shrink:0}.trace>summary{min-height:22px;padding:0;font-size:10px;color:#6d8175}.trace[open]{background:white;padding:10px 16px;border-radius:10px}.pane-code:has(.trace[open]) .code{min-height:calc(100% - 28px)}
@media(min-width:1181px){.pane-code .code{min-height:100%}#scene{max-height:none}.editor{min-height:180px}}
@media(max-width:1180px) and (min-width:761px){.layout{grid-template-columns:minmax(0,46.875%) minmax(0,1fr);align-items:stretch}.pane-code .code{min-height:100%}.pane-code{padding-left:14px}.brief{padding:20px}.ed-actions{gap:7px;padding:12px 16px}.ed-actions #run{flex-basis:110px}.tally-lang{display:none}.brief .task{font-size:13px}.api dl>div{grid-template-columns:1fr;gap:0}.editor{min-height:160px}}
@media(max-width:760px){body{height:auto;min-height:100dvh;overflow:auto;display:block}.top{height:50px;flex-wrap:nowrap;padding:0 12px;gap:12px;position:sticky;top:0}.brand{font-size:13px;gap:6px}.brand svg{width:25px;height:25px}.session-title{font-size:11px;padding-left:10px}.tally{display:none}.course-menu{margin-left:auto}.course-menu>summary{font-size:11px;padding:5px 9px}.layout{display:flex;padding:0;gap:0}.pane-game{height:42dvh;min-height:260px;flex:none;width:100%}.pane-code{padding:12px;width:100%;overflow:visible}.pane-code .code{min-height:560px}.brief{padding:20px}.mission-row{right:20px;top:16px}.editor{height:240px;flex:none;min-height:240px}.file-bar{padding:12px 20px}.ed-actions{padding:12px 16px;gap:8px}.ed-actions #run{flex-basis:115px}.api{padding:0 20px}.shortcut{font-size:9px}.ed-foot{padding:10px 16px}.trace{padding:0 6px}}