:root{--bg:#f6f7fb;--panel:#fff;--ink:#1d2140;--muted:#5d6385;--line:#e3e6f0;--brand:#2b4acb;--brand-ink:#fff;--accent:#ffd166;--ok:#237a33;--ok-bg:#e6f7ea;--warn:#b8450a;--warn-bg:#fff1e6;--bad:#c92a2a;--bad-bg:#ffecec;--radius:14px;--shadow:0 2px 10px #1d214014;color:var(--ink);background:var(--bg);font-family:Pretendard,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12142a;--panel:#1b1e3a;--ink:#eef0ff;--muted:#a7acd0;--line:#2c3060;--shadow:0 2px 10px #0006;--ok-bg:#12351c;--warn-bg:#3a2312;--bad-bg:#3a1515}}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;line-height:1.55}a{color:var(--brand)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) a{color:#9fb2ff}}button,input,select,textarea{font:inherit}button{cursor:pointer}:focus-visible{outline-offset:2px;outline:3px solid #ff9f1c}.wrap{max-width:1120px;margin:0 auto;padding:0 16px}.top{background:var(--panel);border-bottom:1px solid var(--line);z-index:10;position:sticky;top:0}.top .wrap{align-items:center;gap:12px;height:56px;display:flex}.logo{color:var(--ink);white-space:nowrap;align-items:center;gap:8px;font-weight:800;text-decoration:none;display:flex}.logo code{background:var(--brand);color:#fff;border-radius:8px;padding:2px 8px;font-size:13px}.spacer{flex:1}.btn{background:var(--brand);color:var(--brand-ink);border:0;border-radius:10px;align-items:center;gap:6px;min-height:44px;padding:10px 16px;font-weight:700;text-decoration:none;display:inline-flex}.btn.ghost{color:var(--ink);border:1px solid var(--line);background:0 0}.btn.ok{background:var(--ok)}.btn.warn{background:var(--warn)}.btn.small{min-height:36px;padding:6px 10px;font-size:14px}.btn:disabled{opacity:.5;cursor:default}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.grid2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;display:grid}.grid3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;display:grid}h1{margin:0 0 12px;font-size:clamp(26px,4vw,40px);line-height:1.25}h2{margin:0 0 12px;font-size:22px}h3{margin:0 0 8px;font-size:17px}.muted{color:var(--muted)}.field{gap:6px;margin-bottom:12px;display:grid}.field input,.field select{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;min-height:44px;padding:10px 12px}.err{background:var(--bad-bg);color:var(--bad);border-radius:10px;margin:8px 0;padding:10px 12px}.note{background:var(--warn-bg);border-radius:10px;margin:8px 0;padding:10px 12px}.tabs{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.tabs button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;min-height:40px;padding:8px 14px}.tabs button[aria-pressed=true]{background:var(--brand);color:#fff;border-color:var(--brand)}.hero{padding:48px 0 28px}.hero .lead{color:var(--muted);max-width:720px;font-size:18px}.pill{background:var(--accent);color:#3b2a00;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;display:inline-block}.pics{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.pics button{border:2px solid var(--line);background:var(--panel);border-radius:12px;min-height:52px;font-size:26px}.pics button[aria-pressed=true]{border-color:var(--brand);background:#e7ecff}.picked{align-items:center;gap:8px;min-height:44px;font-size:30px;display:flex}table.prog{border-collapse:collapse;font-size:13px}table.prog th,table.prog td{border:1px solid var(--line);text-align:center;min-width:34px;padding:4px 6px}table.prog th{background:var(--bg);position:sticky;top:0}.cell-pass{color:#0b3d16;background:#b2f2bb}.cell-try{color:#4a3300;background:#ffe8a1}.cell-stuck{color:#5c0a0a;background:#ffc9c9;font-weight:700}.scroll-x{max-width:100%;overflow-x:auto}.cards-print{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;display:grid}.login-card{border:2px dashed var(--line);color:#1d2140;background:#fff;border-radius:12px;padding:12px}.login-card .pp{letter-spacing:6px;font-size:30px}@media print{.top,.noprint{display:none!important}body{background:#fff}.login-card{break-inside:avoid}}.ed{grid-template-columns:300px minmax(0,1fr) minmax(320px,520px);gap:12px;height:calc(100vh - 56px);padding:12px;display:grid}.ed>*{min-height:0}.ed .side{overflow:auto}.ed .code{flex-direction:column;min-height:420px;display:flex}.ed .code .blockly,.ed .code .cm{border:1px solid var(--line);background:#fff;border-radius:12px;flex:1;min-height:360px;overflow:hidden}.ed .code .cm .cm-editor{height:100%;font-size:15px}.ed .stagecol{flex-direction:column;gap:8px;display:flex;overflow:auto}.stage{border:1px solid var(--line);touch-action:none;image-rendering:auto;background:#000;border-radius:12px;width:100%;height:auto}.stage:focus-visible{outline:3px solid #ff9f1c}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.steps{flex-wrap:wrap;gap:6px;margin:8px 0;display:flex}.steps a{border:1px solid var(--line);min-width:36px;height:36px;color:var(--ink);background:var(--panel);border-radius:10px;place-items:center;font-weight:700;text-decoration:none;display:inline-grid}.steps a.cur{outline:3px solid var(--brand)}.steps a.done{color:#0b3d16;background:#b2f2bb}.result{border-radius:12px;padding:12px}.result.pass{background:var(--ok-bg)}.result.fail{background:var(--bad-bg)}.console{color:#d0d6ff;white-space:pre-wrap;background:#0f1226;border-radius:10px;max-height:120px;padding:8px;font-family:ui-monospace,Menlo,monospace;font-size:12px;overflow:auto}.pad{grid-template-columns:repeat(3,56px);justify-content:center;gap:6px;display:grid}.pad button{border:1px solid var(--line);background:var(--panel);height:52px;color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:12px;font-size:20px}.hint{color:#3b2a00;background:#fff9db;border-radius:10px;margin:6px 0;padding:10px}.replaybar{align-items:center;gap:8px;display:flex}.replaybar input{flex:1}@media (max-width:1100px){.ed{grid-template-columns:1fr;height:auto}.ed .code{min-height:480px}}footer{color:var(--muted);padding:28px 0 40px;font-size:14px}.levels td,.levels th{border-bottom:1px solid var(--line);text-align:left;vertical-align:top;padding:8px 10px}.levels{border-collapse:collapse;width:100%}.sr{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.skip:focus{clip:auto;z-index:100;background:var(--panel);width:auto;height:auto;color:var(--ink);box-shadow:var(--shadow);border-radius:8px;padding:8px 12px;position:fixed;top:8px;left:8px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}