:root{--ink:#17243a;--muted:#627086;--paper:#f7f4ec;--card:#fffdf8;--blue:#2457d6;--blue-soft:#eaf0ff;--green:#16765a;--red:#b73945;--line:#d9deea;--shadow:0 16px 50px rgba(27,39,70,.09)}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 15% 0,#dfe9ff 0,transparent 35%),var(--paper);font-family:Inter,Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif}main{width:min(900px,calc(100% - 32px));margin:0 auto;padding:56px 0 80px}header{text-align:center;margin-bottom:28px}.eyebrow{margin:0 0 8px;color:var(--blue);font-size:.78rem;font-weight:800;letter-spacing:.14em}h1{font-family:Georgia,"Noto Serif KR",serif;font-size:clamp(2.25rem,7vw,4.25rem);margin:0;line-height:1}.intro{color:var(--muted);margin:16px auto 0;max-width:580px}.card{background:var(--card);border:1px solid rgba(22,36,58,.08);border-radius:24px;box-shadow:var(--shadow);padding:28px}.setup h2{margin-top:0}label{display:block;font-size:.9rem;font-weight:750;margin:0 0 8px}.input-row{display:flex;gap:10px}input{width:100%;min-width:0;border:1.5px solid var(--line);border-radius:12px;background:white;padding:14px 16px;font:600 1.05rem/1.2 inherit;color:var(--ink)}input:focus{outline:3px solid rgba(36,87,214,.18);border-color:var(--blue)}button{border:1px solid var(--line);border-radius:11px;background:white;color:var(--ink);font:700 .95rem/1 inherit;padding:11px 14px;cursor:pointer}button:hover{border-color:var(--blue);color:var(--blue)}button:focus-visible{outline:3px solid rgba(36,87,214,.25);outline-offset:2px}.primary{border-color:var(--blue);background:var(--blue);color:white;white-space:nowrap}.primary:hover{background:#1947bc;color:white}.helpers{display:flex;gap:8px;margin:10px 0}.helpers button{min-width:44px;font-size:1.2rem}.examples{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px;color:var(--muted);font-size:.8rem}.examples span{display:flex;align-items:center;justify-content:space-between;gap:5px;background:#f4f6fb;border-radius:10px;padding:7px 8px}.examples button{padding:6px 8px;font-size:.78rem}.error{min-height:1.25em;color:var(--red);font-weight:700}.lesson{margin-top:24px}.lesson-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.quiet{color:var(--muted)}.math{font-family:"STIX Two Math","Times New Roman",serif;font-size:1.45rem;font-weight:600;display:flex;align-items:center;gap:.25em;flex-wrap:wrap}.source{font-size:1.85rem;min-height:2.2rem}.frac{display:inline-grid;grid-template-rows:auto auto;vertical-align:middle;text-align:center;line-height:1.05;margin:0 .12em}.frac .top{border-bottom:1.5px solid currentColor;padding:0 .22em .08em}.frac .bottom{padding:.08em .22em 0}.operator{padding:0 .12em}.progress-wrap{margin:22px 0}.progress-wrap>div:first-child{font-size:.82rem;color:var(--muted);margin-bottom:7px}.progress{height:8px;background:#e8ebf2;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#6d8eff);transition:width .25s}.earned{list-style:none;padding:0;margin:0;display:grid;gap:8px}.earned li{display:flex;align-items:center;justify-content:space-between;background:#f0f8f4;color:var(--green);border-radius:11px;padding:10px 13px;font-weight:700}.earned .math{font-size:1.05rem}.question{margin-top:16px;border:1px solid #dce4f8;background:var(--blue-soft);border-radius:18px;padding:22px}.step-label{color:var(--blue);font-size:.78rem;font-weight:800;margin:0 0 7px}.question h2{font-size:1.2rem;margin:0 0 20px;line-height:1.45}.actions{margin-top:10px}.feedback,.hint{min-height:1.25em;margin:10px 0 0;font-weight:700}.feedback.wrong{color:var(--red)}.feedback.right{color:var(--green)}.hint{color:#544415;background:#fff8d9;border-radius:9px;padding:0}.hint:not(:empty){padding:10px 12px}.completion{text-align:center;border:2px solid #b8e2d3;background:#f0fbf6;border-radius:18px;padding:28px}.celebrate{color:var(--green);font-weight:850;letter-spacing:.1em}.completion h2{font-size:1.3rem}.final{font-size:2.4rem;justify-content:center;margin:24px 0}.completion .primary{margin-top:8px}[hidden]{display:none!important}@media(max-width:600px){main{width:min(100% - 20px,900px);padding:28px 0 48px}.card{border-radius:18px;padding:18px}.input-row{flex-direction:column}.input-row .primary{width:100%;padding:14px}.examples{grid-template-columns:1fr}.question{padding:17px}.source{font-size:1.55rem}.lesson-head{align-items:center}header{margin-bottom:20px}.intro{font-size:.92rem}}