:root{--bg: #f2f4f6;--card: #ffffff;--text: #191f28;--sub: #6b7684;--line: #e5e8eb;--soft: #f2f4f6;--accent: #4f5bd5;--accent-soft: #eceefd;--on-accent: #ffffff;--good: #0a9f5c;--good-soft: #e6f8ef;--bad: #e5484d;--bad-soft: #fdecec;--gold: #ff9f1a;--bonus-bg: #fff4e0;--bonus-fg: #b35c00;--shadow: rgba(0, 0, 0, .06);--code-bg: #1d2230;--code-fg: #e6e9f0;--code-no: #5d6680;--code-cur: rgba(255, 214, 102, .16);--code-cur-bar: #ffd666;--t-kw: #c792ea;--t-str: #c3e88d;--t-num: #f78c6c;--t-com: #7f8aa3;--t-bi: #82aaff;--t-def: #ffcb6b;--radius: 18px;--ko: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Noto Sans Mono", "D2Coding", monospace;color-scheme:light}.theme-course{--accent: #4f5bd5;--accent-soft: #eceefd}.theme-project{--accent: #0c9f74;--accent-soft: #e3f7f0}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0f1115;--card: #1a1d24;--text: #eceef2;--sub: #979fae;--line: #2b303b;--soft: #242833;--accent: #7b86f0;--accent-soft: #262a45;--good: #2fcf85;--good-soft: #15291f;--bad: #ff6b70;--bad-soft: #321a1c;--bonus-bg: #332612;--bonus-fg: #ffb84d;--shadow: rgba(0, 0, 0, .4);--code-bg: #151923;color-scheme:dark}:root:not([data-theme=light]) .theme-course{--accent: #7b86f0;--accent-soft: #262a45}:root:not([data-theme=light]) .theme-project{--accent: #3fd3a3;--accent-soft: #163129;--on-accent: #06251b}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ko);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}h1,h2,h3,p{margin:0}.app{max-width:480px;margin:0 auto;min-height:100dvh}.screen{padding:calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;gap:14px}.muted{color:var(--sub)}.small{font-size:13px}.row{display:flex;gap:8px}.row>.btn{flex:1}.stack{display:flex;flex-direction:column;gap:8px}.card{background:var(--card);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px}.rich{display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.6;word-break:keep-all}.ic{font-family:var(--mono);font-size:.9em;background:var(--soft);border-radius:6px;padding:1px 5px;word-break:break-all}.btn{border:0;border-radius:14px;padding:15px 16px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .08s ease,filter .15s ease}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--accent);color:var(--on-accent)}.btn.ghost{background:var(--soft);color:var(--text)}.btn.bonus{background:var(--bonus-bg);color:var(--bonus-fg)}.btn.wide{width:100%}.btn.small{padding:9px 12px;font-size:14px;border-radius:10px}.icon-btn{width:40px;height:40px;border:0;border-radius:12px;background:transparent;font-size:22px;color:var(--sub);cursor:pointer;flex:none}.home-head{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 4px 6px}.home-head h1{font-size:26px;font-weight:800;margin-bottom:4px}.streak{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:8px 10px;border-radius:16px;background:var(--card);color:var(--sub);font-size:12px}.streak b{font-size:22px;line-height:1.1}.streak.on b{color:var(--gold)}.section-title{font-size:16px;font-weight:800;padding:10px 4px 0}.course{gap:12px}.course-top{display:flex;gap:14px;align-items:center}.course-text h2{font-size:19px;font-weight:800}.course-text p{font-size:14px;margin-top:2px}.badge{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:18px;flex:none}.meter{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;flex:1}.card .meter{flex:none}.meter i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .3s ease}.course-stats{font-size:14px;font-weight:600}.pips{display:flex;align-items:center;gap:6px}.pip{width:22px;height:8px;border-radius:99px;background:var(--line)}.pip.done{background:var(--accent)}.pips small{margin-left:6px;font-size:13px}.hint{font-size:12px;text-align:center}.foot{font-size:13px;text-align:center;padding:4px 0 8px}.code{background:var(--code-bg);color:var(--code-fg);border-radius:14px;padding:12px 0;font-family:var(--mono);font-size:13.5px;line-height:1.65;overflow-x:auto;-webkit-overflow-scrolling:touch}.code-inner{display:inline-block;min-width:100%}.code.compact{font-size:12.5px;padding:8px 0;line-height:1.55}.code.wide{font-size:12px}.ln{display:flex;width:100%;padding:0 12px 0 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;white-space:pre;border-left:3px solid transparent}.ln .no{flex:none;width:2.2em;padding-right:.8em;text-align:right;color:var(--code-no);user-select:none}.ln .lc{flex:1}.code.tappable .ln{cursor:pointer;padding-top:5px;padding-bottom:5px}.code.tappable .ln:not(:disabled):active{background:#ffffff14}.ln.cur{background:var(--code-cur);border-left-color:var(--code-cur-bar)}.ln.err{background:#ff6b702e;border-left-color:#ff6b70}.ln.right{background:#2fcf8533;border-left-color:#2fcf85}.ln.wrong{background:#ff6b7033;border-left-color:#ff6b70}.t-kw{color:var(--t-kw)}.t-str{color:var(--t-str)}.t-num{color:var(--t-num)}.t-com{color:var(--t-com);font-style:italic}.t-bi{color:var(--t-bi)}.t-def{color:var(--t-def)}.blank{display:inline-block;min-width:3em;border-bottom:2px dashed var(--code-cur-bar);background:#ffd6661f;border-radius:4px 4px 0 0;text-align:center}.blank.filled{border-bottom-style:solid;padding:0 3px}.blank.right{border-color:#2fcf85;background:#2fcf8533}.blank.fixed{border-color:#ffd666}.code-line{font-family:var(--mono);white-space:pre}.output{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px 12px;display:flex;flex-direction:column;gap:4px}.output-label{font-size:12px;font-weight:700;color:var(--sub)}.output-text{font-family:var(--mono);font-size:14px;line-height:1.55;display:flex;flex-direction:column;white-space:pre-wrap;word-break:break-all}.output.target{border-color:var(--accent);border-style:dashed}.output.actual .output-text{color:var(--bad)}.out-empty{color:var(--sub);font-family:var(--ko);font-size:13px}.out-err{align-self:flex-start;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--bad);background:var(--bad-soft);border-radius:6px;padding:1px 6px;margin-top:2px}.out-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}:root:not([data-theme=dark]) .choice-code,:root:not([data-theme=dark]) .order-tile,:root:not([data-theme=dark]) .diff{--t-kw: #7c3aed;--t-str: #2b7a3a;--t-num: #c2410c;--t-bi: #1d4ed8;--t-def: #a16207;--t-com: #6b7684}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .choice-code,:root:not([data-theme=light]) .order-tile,:root:not([data-theme=light]) .diff{--t-kw: #c792ea;--t-str: #c3e88d;--t-num: #f78c6c;--t-bi: #82aaff;--t-def: #ffcb6b;--t-com: #7f8aa3}}.out-err small{font-family:var(--ko);font-weight:700;margin-right:6px}.play{min-height:100dvh;padding-bottom:0;gap:0}.play-head{display:flex;align-items:center;gap:8px;margin:-8px -4px 12px}.play-head .meter{height:10px;background:var(--line)}.play-body{display:flex;flex-direction:column;gap:14px;flex:1;padding-bottom:24px}.q-tags{display:flex;gap:6px}.tag{align-self:flex-start;font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:5px 10px;border-radius:99px}.tag.retry{color:var(--bonus-fg);background:var(--bonus-bg)}.q-title{font-size:19px;font-weight:800;line-height:1.45;word-break:keep-all}.hint-line{font-size:13px;color:var(--sub);margin-bottom:-6px}.concept-card,.brief-card{background:var(--card);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px}.concept-card h2,.brief-card h2{font-size:21px;font-weight:800;line-height:1.4;word-break:keep-all}.trace-btn{align-self:stretch}.choices{display:flex;flex-direction:column;gap:10px}.choices.tokens{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:16px;padding:13px 14px;font-size:16px;font-weight:600;cursor:pointer;word-break:keep-all}.choice:active:not(:disabled){transform:scale(.99)}.choice:disabled{cursor:default}.choice .num{flex:none;width:26px;height:26px;border-radius:8px;background:var(--soft);color:var(--sub);font-size:13px;display:grid;place-items:center}.choice-out{display:flex;flex-direction:column;font-family:var(--mono);font-size:15px;font-weight:600;white-space:pre-wrap;word-break:break-all}.choice-code{font-size:15px;overflow-x:auto}.choice-text{line-height:1.45}.choices.tokens .choice{padding:12px;gap:8px}.choice.right{border-color:var(--good);background:var(--good-soft)}.choice.right .num{background:var(--good);color:#fff}.choice.wrong{border-color:var(--bad);background:var(--bad-soft)}.choice.wrong .num{background:var(--bad);color:#fff}.choice:disabled:not(.right):not(.wrong){opacity:.55}.order{display:flex;flex-direction:column;gap:14px}.order-board{background:var(--code-bg);color:var(--code-fg);border-radius:14px;min-height:90px;padding:8px 0;display:flex;flex-direction:column;border:2px solid transparent}.order-board.right{border-color:var(--good)}.order-board.wrong{border-color:var(--bad)}.order-board .placeholder{color:var(--code-no);font-size:14px;padding:24px 16px;text-align:center}.order-row{display:flex;align-items:center;border:0;background:transparent;color:inherit;padding:6px 12px 6px 0;font-family:var(--mono);font-size:13.5px;text-align:left;cursor:pointer}.order-row .no{width:2.2em;padding-right:.8em;text-align:right;color:var(--code-no);flex:none}.order-row:disabled{cursor:default}.order-bank{display:flex;flex-direction:column;gap:8px}.order-tile{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-bottom-width:4px;background:var(--card);border-radius:12px;padding:10px 12px;font-size:14px;text-align:left;cursor:pointer;overflow-x:auto}.order-tile.used{visibility:hidden;height:0;padding:0;border:0;margin-top:-8px}.order-tile .indent{color:var(--sub);font-size:12px}.order-answer{display:flex;flex-direction:column;gap:6px}.answer-label{font-size:13px;font-weight:700;color:var(--good)}.fix-box{display:flex;flex-direction:column;gap:4px}.diff{display:flex;gap:8px;align-items:center;font-size:14px;padding:6px 10px;border-radius:8px;overflow-x:auto}.diff>span:first-child{font-weight:800}.diff.del{background:var(--bad-soft);color:var(--bad);text-decoration:line-through}.diff.add{background:var(--good-soft);color:var(--good)}.dock{position:sticky;bottom:0;margin:0 -16px;padding:12px 16px calc(env(safe-area-inset-bottom) + 16px);background:linear-gradient(to bottom,transparent,var(--bg) 24%);z-index:2}.dock:empty{display:none}.dock.open{background:var(--card);border-radius:22px 22px 0 0;box-shadow:0 -6px 24px var(--shadow);max-height:62dvh;overflow-y:auto}.dock.open.right{background:var(--good-soft)}.dock.open.wrong{background:var(--bad-soft)}.feedback{display:flex;flex-direction:column;gap:10px;animation:rise .18s ease-out}.verdict{font-size:18px;font-weight:800}.why{font-size:15px}.dock.right .verdict{color:var(--good)}.dock.wrong .verdict{color:var(--bad)}.dock.right .btn.primary{background:var(--good);color:#fff}.dock.wrong .btn.primary{background:var(--bad);color:#fff}.dock .btn.ghost{background:var(--card)}@keyframes rise{0%{transform:translateY(12px);opacity:0}}.overlay{position:fixed;inset:0;background:#00000073;display:grid;place-items:center;padding:24px;z-index:10}.modal{background:var(--card);border-radius:22px;padding:24px 20px 18px;width:min(100%,340px);display:flex;flex-direction:column;gap:8px}.modal h3{font-size:19px;word-break:keep-all}.modal p{line-height:1.5;word-break:keep-all}.modal .row{margin-top:12px}.trace-sheet{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;max-width:480px;margin:0 auto;animation:rise .18s ease-out}.trace-head{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 8px 6px 16px}.trace-head h3{font-size:17px;font-weight:800;flex:1}.trace-count{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}.trace-body{flex:1;overflow-y:auto;padding:4px 16px 12px;display:flex;flex-direction:column;gap:10px}.trace-caption{font-size:15px;font-weight:700;color:var(--accent)}.trace-caption.done{color:var(--good)}.trace-caption.err{color:var(--bad)}.trace-state{display:flex;flex-direction:column;gap:8px}.vars{background:var(--card);border-radius:14px;padding:10px 14px}.vars-title{font-size:12px;font-weight:700;color:var(--sub);margin-bottom:4px}.vars-empty{font-size:13px;color:var(--sub)}.vars-grid{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;font-family:var(--mono);font-size:13.5px}.var-name{font-weight:700}.var-value{word-break:break-all}.var-name.changed,.var-value.changed{color:var(--accent)}.var-value.changed{background:var(--accent-soft);border-radius:4px;padding:0 4px;margin-left:-4px}.trace-ret{font-size:14px;background:var(--accent-soft);border-radius:10px;padding:8px 12px}.trace-ret b{font-family:var(--mono)}.trace-err{display:flex;flex-direction:column;gap:2px;font-weight:700;color:var(--bad);background:var(--bad-soft);border-radius:10px;padding:8px 12px;font-size:14px}.trace-err small{font-weight:500;font-family:var(--mono);word-break:break-all}.trace-out-box{background:var(--card);border-radius:14px;padding:10px 14px}.trace-out{margin:0;font-family:var(--mono);font-size:13.5px;white-space:pre-wrap;word-break:break-all}.trace-out.empty{color:var(--sub);font-family:var(--ko);font-size:13px}.trace-slider{margin:0 16px;accent-color:var(--accent)}.trace-controls{display:grid;grid-template-columns:auto 1fr 1.4fr;gap:8px;padding:10px 16px calc(env(safe-area-inset-bottom) + 14px);background:var(--bg);border-top:1px solid var(--line)}.result-head{text-align:center;padding:28px 0 8px;display:flex;flex-direction:column;gap:6px}.result-head h1{font-size:30px;font-weight:800}.score{font-size:18px;color:var(--sub)}.score b{font-size:34px;color:var(--accent)}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{background:var(--card);border-radius:16px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:2px}.stat b{font-size:20px}.stat span{font-size:13px;color:var(--sub)}.missed,.learned{gap:4px}.missed h2,.learned h2{font-size:17px;margin-bottom:4px}.missed-row{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45}.learned-row{padding:8px 0;border-top:1px solid var(--line);font-weight:600;font-size:15px}.clean{text-align:center;font-weight:600}.clean-msg{text-align:center;font-weight:700;color:var(--accent);padding:8px}.program h2,.challenge h2{font-size:17px}.copied{font-size:13px;text-align:center;min-height:1em}.hints{display:flex;flex-direction:column;gap:8px}.hint-box{background:var(--soft);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px}.hint-box .rich{font-size:14px}.sub-head{display:flex;align-items:center;gap:4px;margin-left:-8px}.sub-head h1{font-size:20px;font-weight:800}.sub-head .icon-btn{font-size:30px}.lead{font-size:14px;padding:0 4px}.unit{gap:4px}.unit h2{font-size:16px}.unit h2 small{font-weight:500;font-size:13px}.unit>.muted{margin-bottom:6px}.concept-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}.concept-title{font-size:15px;font-weight:600;word-break:keep-all}.level{display:flex;gap:2px;flex:none}.level i{width:5px;height:14px;border-radius:2px;background:var(--line)}.level i.on{background:var(--accent)}.concept-row.mastered .level i.on{background:var(--gold)}.unit-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--line)}.missions{padding:8px 20px;gap:0}.mission-row{display:flex;align-items:center;gap:12px;padding:13px 0;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}.mission-row:first-child{border-top:0}.mission-row:disabled{opacity:.45;cursor:default}.mission-no{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--sub);font-weight:800;flex:none}.mission-row.done .mission-no{background:var(--accent);color:var(--on-accent)}.mission-row.next .mission-no{background:var(--accent-soft);color:var(--accent)}.mission-text{display:flex;flex-direction:column;gap:2px;flex:1}.mission-text b{font-size:15px;word-break:keep-all}.chev{color:var(--sub);font-size:20px}