:root{--canvas:#f6f7f9;--surface:#f3f4f7;--ink:#242936;--muted:#737b8c;--border:#e2e5ec;--accent:#5546dd;--radius:6px;--font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.65}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);background:#fff;color:var(--ink);padding:8px 12px;min-height:36px;border-radius:var(--radius);cursor:pointer;white-space:nowrap;transition:background .15s}button:hover{background:var(--surface)}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a5a0ff;outline-offset:2px}a{color:inherit;text-decoration:none}p{margin:8px 0 16px}h1,h2,h3{line-height:1.4;letter-spacing:-.025em}h2{font-size:16px}h3{font-size:14px}ul,ol{padding-left:22px}li{margin:7px 0}code,pre{font-family:var(--mono)}.app{min-height:100vh}.topbar{height:67px;border-bottom:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{font-size:20px;font-weight:550;letter-spacing:-.7px;display:flex;gap:6px;align-items:center}.brand strong{font-weight:750}.brand-mark{display:grid;place-items:center;background:var(--accent);color:#fff;width:32px;height:32px;border-radius:7px;margin-right:6px}.brand-mark svg{width:21px;height:21px}.beta{font-size:9px;letter-spacing:1px;padding:2px 5px;background:#f0efff;border:1px solid #e4e1ff;color:var(--accent);border-radius:3px;margin-left:5px}.header-meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}.header-divider{height:15px;width:1px;background:var(--border);margin:0 10px}.local-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#269b6a;flex:none}.coursebar{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 32px;background:#fff;border-bottom:1px solid var(--border)}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.6px;color:var(--accent)}.coursebar p{margin:4px 0 0;font-size:14px;font-weight:600}.coursebar nav{display:flex;gap:7px}.coursebar nav a{display:flex;align-items:center;gap:8px;max-width:163px;font-size:11px;color:var(--muted);line-height:1.35;padding:9px 11px;border:1px solid transparent;border-radius:6px}.coursebar nav a>span:first-child{font:600 11px var(--mono);color:#8c919b}.coursebar nav a[aria-current]{color:var(--accent);background:#f2f1ff;border-color:#ddd9ff}.coursebar nav a[aria-current]>span:first-child{color:var(--accent)}.lesson{padding:24px 28px 0;max-width:2000px;margin:auto}.lesson-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 20px}.breadcrumb{font-size:11px;color:var(--muted);display:flex;gap:9px}.breadcrumb span{color:#b4b8c2}h1{font-size:26px;margin:7px 0 5px;font-weight:750}.lesson-heading p{color:var(--muted);font-size:13px;margin:0}.lesson-actions{display:flex;align-items:center;gap:8px}.save-status{font-size:11px;color:var(--muted);margin-right:8px}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:#4338ca}.run-tests{min-width:134px;font-size:12px;font-weight:650}.workspace{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(340px,1.7fr) minmax(270px,1fr);height:580px;min-height:480px;border:1px solid var(--border);background:#fff;border-radius:7px 7px 0 0;overflow:hidden}.panel-heading{height:44px;flex:none;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);padding:0 14px;font-size:11px;background:#fcfcfd;color:#515866}.panel-heading strong{font-weight:650;color:var(--ink)}.pill{margin-left:auto;padding:1px 7px;background:#edf0f4;font-size:10px;border-radius:4px}.language{font-size:10px;color:var(--muted);margin-left:auto}.task-panel,.editor-panel,.preview-panel{min-width:0;min-height:0;display:flex;flex-direction:column}.task-panel,.editor-panel{border-right:1px solid var(--border)}.task-content{padding:17px 18px;overflow:auto;scrollbar-gutter:stable;flex:1;font-size:12px;color:#555e6e;word-break:keep-all;overflow-wrap:anywhere}.task-content h2{color:var(--ink);font-size:13px;margin:19px 0 8px}.task-content h2:first-of-type{margin-top:15px}.tags{display:flex;flex-wrap:wrap;gap:5px}.tags span{font-size:10px;border:1px solid #e5e7ec;padding:2px 6px;border-radius:3px;color:#6a7180}.problem{background:#f7f7fc;border-left:3px solid #b8b1f9;padding:10px 12px;margin:15px 0}.problem strong{font-size:11px;color:#565087}.problem p{margin:4px 0 0}.steps li{margin:10px 0}.file-tree{border-top:1px solid var(--border);padding:9px 0;max-height:195px;overflow:auto;scrollbar-gutter:stable;flex-shrink:0}.tree-heading{font:600 9px var(--mono);color:#858b97;padding:0 15px 7px;display:flex;justify-content:space-between}.file-tree button{border:0;border-radius:0;width:100%;justify-content:flex-start;padding:4px 15px;min-height:29px;font:11px var(--mono);color:#626a78;overflow:hidden}.file-tree button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-tree svg{width:13px;flex-shrink:0;color:#8393b1}.file-tree .active-file{background:#efedff;color:var(--accent)}.icon-button{padding:4px;min-height:26px;border:none;background:transparent}.editor-panel>.sp-code-editor{flex:1;min-height:0}.editor-status{height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#fafafa;border-top:1px solid var(--border);color:#878c96;font:9px var(--mono)}.preview-panel>.sp-preview{flex:1;min-height:0}.sp-wrapper{--sp-font-mono:var(--mono)!important;--sp-font-size:12px!important}.sp-code-editor .cm-scroller{scrollbar-gutter:stable}.sp-tabs{border-bottom:1px solid #e7e8ee!important}.sp-tab-button{font:11px var(--mono)!important;border-radius:0}.bottom-panel{border:1px solid var(--border);border-top:0;background:#fff;border-radius:0 0 7px 7px;overflow:hidden}.bottom-tabs{display:flex;align-items:center;background:#fafafb;border-bottom:1px solid var(--border);padding:0 12px;min-height:44px;gap:4px}.bottom-tabs button{background:transparent;border:0;border-radius:0;border-bottom:2px solid transparent;font-size:11px;min-height:44px;color:var(--muted);padding:7px 11px}.bottom-tabs button[aria-selected=true]{border-bottom-color:var(--accent);color:var(--accent)}.bottom-tabs .solution-button{margin-left:auto;color:#555b6b}.result-count{font:10px var(--mono);padding:1px 5px;border-radius:3px}.pass{background:#dcf5e7;color:#19643e}.fail{background:#ffe7e7;color:#ad3838}.test-body,.learning-body{padding:18px 22px}.test-summary{font-size:12px;color:var(--muted);margin-bottom:10px}.test-body .sp-tests{max-height:350px;overflow:auto;scrollbar-gutter:stable}.test-body details{font-size:12px;margin:12px 0;border-top:1px solid var(--border);padding-top:10px}summary{cursor:pointer;font-weight:600}summary span{margin-left:10px;font-weight:500}.learning-body{font-size:13px}.learning-body h2{margin:0 0 8px}.learning-body li{margin:12px 0}.muted{color:var(--muted);font-size:12px}.pass-text{color:#217546}.error-text{color:#be3b43}.review-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;cursor:pointer}.review-item input{accent-color:var(--accent);width:17px;height:17px;flex:none;margin-top:2px}.completion{display:flex;align-items:center;gap:15px;padding-top:15px;margin-top:12px;border-top:1px solid var(--border)}.completion span{color:var(--muted);font-size:12px}.notice{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;background:#f0efff;border:1px solid #d7d2ff;border-radius:6px;margin:0 0 16px;font-size:12px}.notice button:first-of-type{margin-left:auto}.notice.error{background:#fff3f3;border-color:#eec9cb;color:#923339}.danger{border-color:#b52d3a;color:#a72230}.runtime-error{padding:20px;overflow:auto;color:#a7353f;font-size:12px;word-break:break-word}.runtime-error code{font-size:10px}.solution-panel{background:#fff;border:1px solid var(--border);border-radius:7px;padding:24px;margin-top:22px;font-size:13px}.solution-heading{display:flex;justify-content:space-between;align-items:center}.solution-heading h2{margin:4px 0 15px}.tradeoffs{background:#f7f8fa;padding:14px 18px;margin:20px 0}.tradeoffs ul{margin-bottom:0}.solution-panel select{padding:8px;border:1px solid var(--border);border-radius:4px;margin-left:8px;max-width:75%;font:12px var(--mono)}.diff-code,.source-code{font:12px/1.7 var(--mono);overflow:auto;max-height:500px;scrollbar-gutter:stable;background:#fafbfc;border:1px solid var(--border);padding:12px;-moz-tab-size:2;tab-size:2}.diff-code{padding:0}.diff-line{display:block;min-height:20px;white-space:pre}.diff-added .diff-line{background:#e7f6ed;color:#246344}.diff-removed .diff-line{background:#fdeced;color:#943f45}.diff-legend{display:flex;gap:16px;font-size:11px;margin:12px 0 4px}.diff-legend span:first-child{color:#943f45}.diff-legend span:nth-child(2){color:#246344}footer{display:flex;justify-content:space-between;gap:16px;padding:22px 30px;color:#8b919d;font-size:10px}.mobile-nav{display:none}.focus-mode .workspace{grid-template-columns:1fr;height:72vh}.focus-mode .task-panel,.focus-mode .preview-panel{display:none}.focus-mode .editor-panel{border:0}.spinner{width:14px;height:14px;border:2px solid #ffffff70;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.run-tests>span{display:flex;align-items:center;justify-content:center;width:17px;height:17px}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(min-width:1700px){.workspace{height:660px}.task-content{font-size:13px}.sp-wrapper{--sp-font-size:13px!important}}@media(max-width:1150px){.coursebar{align-items:flex-start;flex-direction:column;gap:14px}.coursebar nav{width:100%;justify-content:space-between}.coursebar nav a{max-width:unset;flex:1}.workspace{grid-template-columns:230px minmax(300px,1fr);height:620px}.preview-panel{grid-column:2;grid-row:2;border-top:1px solid var(--border);min-height:260px}.editor-panel{grid-column:2;grid-row:1;min-height:320px}.task-panel{grid-row:1/3}.lesson-heading{align-items:flex-start}.lesson-actions{flex-wrap:wrap;justify-content:flex-end}.save-status{flex-basis:100%;text-align:right}.focus-mode .editor-panel{grid-column:1;grid-row:1;min-height:0}}@media(max-width:760px){.topbar{height:58px;padding:0 16px}.brand{font-size:17px}.header-meta{font-size:11px}.header-meta .local-dot,.header-divider{display:none}.header-meta{font-size:0}.header-meta strong{font-size:12px}.coursebar{padding:16px;gap:12px}.coursebar nav{overflow-x:auto;justify-content:flex-start;padding-bottom:3px;gap:6px}.coursebar nav a{flex:0 0 148px;padding:8px}.coursebar p{font-size:13px}.lesson{padding:18px 12px 0}.lesson-heading{display:block;margin-bottom:14px}h1{font-size:23px}.lesson-heading p{font-size:12px}.lesson-actions{margin-top:15px;justify-content:flex-start;gap:6px}.save-status{flex-basis:auto;order:4;text-align:left;width:100%;margin-top:2px}.lesson-actions button{min-height:40px}.run-tests{margin-left:auto}.mobile-nav{display:flex;gap:6px;margin-bottom:10px}.mobile-nav button{flex:1;font-size:12px;min-height:42px}.mobile-nav button[aria-pressed=true]{background:#efedff;color:var(--accent);border-color:#d8d3ff}.workspace{display:block;height:540px;min-height:0}.workspace .task-panel,.workspace .editor-panel,.workspace .preview-panel{height:100%;border-right:0;min-height:0}.workspace .preview-panel{border-top:0}.mobile-task .editor-panel,.mobile-task .preview-panel,.mobile-editor .task-panel,.mobile-editor .preview-panel,.mobile-preview .task-panel,.mobile-preview .editor-panel{display:none}.focus-mode .workspace{height:calc(100dvh - 170px);min-height:400px}.focus-mode .lesson-heading>div:first-child{display:none}.focus-mode .lesson-actions{margin-top:0}.task-content{font-size:13px}.bottom-tabs{padding:0 5px;flex-wrap:wrap;gap:0}.bottom-tabs button{font-size:11px;flex:1;padding:7px 6px}.bottom-tabs .solution-button{flex-basis:100%;margin:0;border-top:1px solid var(--border);justify-content:flex-end;min-height:38px}.bottom-tabs svg{width:14px}.test-body,.learning-body{padding:16px}.completion{flex-direction:column;align-items:flex-start}.solution-panel{padding:16px}.source-code,.diff-code{font-size:11px}.notice{align-items:flex-start}.notice button:first-of-type{margin-left:0}footer{padding:18px 14px;flex-wrap:wrap;font-size:9px}footer span:nth-child(2){display:none}.solution-heading h2{font-size:15px}.diff-legend{flex-wrap:wrap}.editor-status{font-size:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.spinner{animation:none;border-style:dotted}}.case-list{max-height:320px;overflow:auto;scrollbar-gutter:stable}.case-list details{padding:8px 0;margin:0}.case-list summary{font-size:12px;font-weight:500}.case-list summary span{margin-left:0;margin-right:8px}.test-error{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.6 var(--mono);padding:12px;background:#fff5f5;color:#963b43;border-left:2px solid #d7737b}