@charset "utf-8";
:root{--navy:#10233c;--blue:#245aa5;--ink:#26374b;--muted:#728298;--line:#dfe5ef;--surface:#f3f6fb;--sky:#78b5f9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f5f7fb;font:15px/1.7 system-ui,-apple-system,"Malgun Gothic",sans-serif}a{color:inherit}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #e9a35a;outline-offset:3px}button,select{font:inherit}button{cursor:pointer}.topbar{background:#0e2238;color:#fff;position:relative;z-index:20}.top-inner{max-width:1530px;margin:auto;min-height:72px;padding:12px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:20px;font-weight:850}.brand small{display:block;font-size:10px;letter-spacing:.15em;color:#a5b8d4}.brand-icon{display:grid;place-items:center;width:39px;height:39px;background:#3264c6;border-radius:10px}.top-links{display:flex;flex-wrap:wrap;gap:10px}.top-links a{border:1px solid #ffffff40;text-decoration:none;padding:7px 11px;border-radius:7px;font-size:12px}.layout{max-width:1530px;margin:0 auto;display:grid;grid-template-columns:277px minmax(0,1fr);align-items:start}.sidebar{position:sticky;top:0;max-height:100vh;overflow:auto;background:#132941;color:#fff;min-height:calc(100vh - 72px)}.sidebar-inner{padding:30px 23px 45px}.eyebrow,.small-overline{display:block;color:#85bfff;font-size:11px;letter-spacing:.14em;font-weight:900}.sidebar h2{font-size:30px;letter-spacing:-.045em;line-height:1.22;margin:11px 0}.sidebar p{font-size:13px;color:#bbcbde}.score{background:#233e5d;border:1px solid #42617e;border-radius:13px;padding:15px;margin:22px 0}.score>span,.score>small{display:block;font-size:11px;color:#b4c7de}.score strong{font-size:23px;display:block}.bar{height:6px;border-radius:5px;background:#09223b;overflow:hidden;margin:6px 0 7px}.bar span{height:100%;display:block;background:#80b7ff;width:0}.step-nav-btn{width:100%;border:1px solid transparent;border-radius:9px;padding:10px;text-align:left;color:#d4e1f1;background:transparent;display:flex;gap:10px;align-items:center;margin:5px 0}.step-nav-btn.active{border-color:#719edd;background:#2b4b72;color:white}.step-nav-btn .num{width:34px;flex:none;color:#8fb5e5;font-weight:800}.step-nav-btn .name{font-size:12px;line-height:1.35}.step-nav-btn .done{margin-left:auto;color:#9fe0cb}.aside-link{display:block;font-size:12px;color:#a4bdda;margin-top:15px}.content{min-width:0;padding:32px 4% 70px}.intro{padding:25px 31px;border-radius:15px;background:linear-gradient(115deg,#142f51,#34537c);color:white;display:flex;gap:20px;justify-content:space-between;align-items:center}.intro h1{font-size:clamp(25px,3vw,39px);line-height:1.28;letter-spacing:-.045em;margin:13px 0}.intro h1 em{font-style:normal;color:#8dbfff}.intro p{max-width:720px;color:#d8e6fa;font-size:14px}.intro-stats{display:grid;grid-template-columns:1fr;gap:13px;padding:10px 19px;border-left:1px solid #ffffff40;flex:none}.intro-stats span{display:flex;align-items:baseline;gap:5px;font-size:11px}.intro-stats strong{font-size:24px}.notice{margin:18px 0;background:#fff9eb;border:1px solid #e6d5ae;border-radius:10px;padding:14px 18px;font-size:12px}.notice a{font-weight:800;color:#175aa4}.mobile-picker{display:none}.lesson{margin-top:18px}.lesson-heading{padding:23px 27px;background:white;border:1px solid var(--line);border-radius:13px;display:flex;justify-content:space-between;gap:16px;align-items:center}.lesson-heading h2{margin:7px 0;font-size:25px;line-height:1.3;letter-spacing:-.035em}.lesson-heading p{margin:0;color:#607187}.stage-label{font-size:11px;font-weight:800;color:#285a98;background:#eaf2fc;border-radius:40px;padding:8px 12px;white-space:nowrap}.section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:15px 0}.content-card{padding:22px 25px;background:#fff;border:1px solid var(--line);border-radius:12px;margin:15px 0}.section-grid .content-card{margin:0}.content-card h3{margin:0 0 12px;font-size:17px;letter-spacing:-.02em}.content-card p{margin:9px 0;font-size:13px}.content-card .muted{color:#72849b}.content-card .mono{font-family:Consolas,monospace;overflow-wrap:anywhere;font-weight:800;color:#22529a}.content-card code{font-family:Consolas,monospace;font-size:12px;overflow-wrap:anywhere}.chips{display:flex;flex-wrap:wrap;gap:7px}.chips span{font-size:11px;background:#eaf2ff;color:#2a5d9b;padding:4px 8px;border-radius:5px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.hint-label{font-size:11px;color:#7b8ca1}.task-list{padding-left:23px}.task-list li{padding:3px 0}.copy{padding:8px 13px;color:#1e518f;background:#e8f1ff;border:1px solid #c5d8ef;border-radius:7px;font-size:12px;font-weight:800}.code-block{border-radius:9px;background:#12243b;color:#d9eafc;white-space:pre;overflow:auto;max-height:420px;padding:18px;font:12px/1.68 Consolas,'Noto Sans Mono',monospace}.feedback{min-height:18px;color:#216742}.full-source{display:grid;gap:14px;margin-top:13px}.full-source h4{margin:0;font:700 12px Consolas,monospace}.full-source pre{white-space:pre;overflow:auto;max-height:300px;padding:12px;background:#f0f4fa;border:1px solid #dfe8f5;border-radius:7px;font:11px/1.5 Consolas,monospace}.content-card details{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}.content-card summary{cursor:pointer;color:#265a99;font-size:13px;font-weight:800}.device-picks{display:flex;gap:5px;flex-wrap:wrap}.device-picks button{border-radius:6px;background:#eef3fa;color:#3c587a;border:1px solid #dce6f3;padding:5px 9px;font-size:11px}.device-picks button.active{background:#214a87;color:white;border-color:#214a87}.stage-frame-outer{width:100%;overflow:auto;border:1px solid #d9e2ed;border-radius:9px;background:#e9eff7;padding:14px;margin-top:14px}.stage-frame{width:1200px;max-width:none;margin:auto;box-shadow:0 12px 35px #18314c24;background:white;transition:width .2s}.stage-frame iframe{display:block;width:100%;height:450px;background:#fff;border:0}.screenlinks{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.screenlinks a{font-size:12px;text-decoration:none;color:#225da9;border:1px solid #c5d4e9;padding:6px 10px;border-radius:6px}.repair{border-left:4px solid #e8b36d}.checks{display:grid;gap:10px}.checks label{display:flex;align-items:start;gap:10px;font-size:13px;line-height:1.5}.checks input{width:18px;height:18px;margin-top:2px;accent-color:#2d75c2;flex:none}.lesson-actions{border-top:1px solid var(--line);padding-top:16px;margin-top:18px;display:flex;justify-content:space-between;gap:12px}.lesson-actions button{border:1px solid #cbd9e9;background:#f8fbff;color:#24518d;font-weight:700;padding:10px 17px;border-radius:7px}.lesson-actions button.primary{background:#245fa9;color:white;border-color:#245fa9}.lesson-actions button:disabled{opacity:.45;cursor:default}.after{margin-top:35px;background:#edf4fe;border:1px solid #cbdcf2;padding:25px;border-radius:13px}.after h2{margin:0 0 10px;font-size:23px}.after p{font-size:14px}.after-links{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}.after-links a{padding:10px 15px;background:#245fa9;color:white;text-decoration:none;border-radius:7px;font-size:12px;font-weight:800}.after .source-note{font-size:12px;color:#6b7f99}@media(max-width:1100px){.layout{grid-template-columns:220px minmax(0,1fr)}.sidebar-inner{padding:22px 13px}.content{padding:22px}.intro-stats{display:none}.section-grid{grid-template-columns:1fr}}@media(max-width:750px){.layout{display:block}.sidebar{display:none}.content{padding:14px}.intro{padding:24px 19px}.intro h1{font-size:27px}.mobile-picker{display:grid;gap:5px;background:white;border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:14px}.mobile-picker label{font-size:12px;font-weight:800}.mobile-picker select{padding:8px;border:1px solid #c7d6e7;border-radius:6px;width:100%;background:white}.lesson-heading{padding:17px;flex-wrap:wrap}.lesson-heading h2{font-size:20px}.content-card{padding:15px}.stage-frame-outer{padding:9px}.top-inner{padding:12px 15px;flex-wrap:wrap}.top-links a{padding:5px 9px}.intro-stats{display:none}}@media print{.sidebar,.topbar,.mobile-picker,.device-picks,.copy,.screenlinks,.after-links,.lesson-actions{display:none!important}.layout{display:block}.content{padding:0}.stage-frame-outer{display:none}.content-card{break-inside:avoid}}