:root{--bg:#f6f7fb;--panel:#fff;--ink:#1f2433;--muted:#6b7285;--line:#e1e5ef;--primary:#3b6fe0;--primary-ink:#fff;--accent:#ff8a3d;--ok:#16a34a;--no:#e5484d;--radius:16px;--tap:48px;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:Pretendard,Noto Sans KR,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}#app{min-height:100%}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.topbar{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:10px 16px;display:flex}.topbar h2{margin:0;font-size:20px}.back{min-height:var(--tap);border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:0 16px}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.row.center{justify-content:center}.row-label{color:var(--muted);font-size:15px}.primary{min-height:var(--tap);background:var(--primary);color:var(--primary-ink);border:none;border-radius:12px;padding:0 20px;font-weight:700}.tool{min-height:var(--tap);border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:0 16px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;min-height:44px;padding:0 14px;font-size:15px}.chip:active{background:#eef2ff}.segmented{background:#e9edf6;border-radius:12px;flex-wrap:wrap;gap:4px;padding:4px;display:inline-flex}.seg{background:0 0;border:none;border-radius:9px;min-height:40px;padding:0 14px}.seg.active{background:var(--panel);color:var(--primary);font-weight:700;box-shadow:0 1px 3px #0000001f}.slider{min-width:140px;height:var(--tap);accent-color:var(--primary);flex:1}.slider-label{text-align:right;font-variant-numeric:tabular-nums;min-width:70px}.home{text-align:center;max-width:720px;margin:0 auto;padding:64px 24px}.home-badge{color:var(--primary);background:#eef2ff;border-radius:999px;padding:6px 14px;font-weight:700;display:inline-block}.home-title{margin:16px 0 8px;font-size:44px}.home-sub{color:var(--muted);margin:0 0 40px;font-size:18px}.home-actions{grid-template-columns:1fr 1fr;gap:16px;display:grid}.big{border:none;border-radius:20px;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;font-size:22px;font-weight:800;display:flex}.big small{opacity:.85;font-size:14px;font-weight:500}.big-icon{font-size:40px}.big.primary{background:var(--primary);color:#fff}.big.secondary{background:var(--accent);color:#fff}.explore{flex-direction:column;height:100dvh;display:flex}.explore-body{flex:1;grid-template-columns:1fr 1fr;gap:12px;min-height:0;padding:12px;display:grid}.panel{border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);flex-direction:column;gap:10px;min-height:0;padding:12px;display:flex}.grid-wrap{flex:1;min-height:240px;position:relative}.grid-canvas{border-radius:12px;width:100%;height:100%;position:absolute;inset:0}.message{min-height:22px;color:var(--no);margin:0;font-size:15px}.viewer-wrap{border-radius:12px;flex:1;min-height:260px;position:relative;overflow:hidden}.viewer{position:absolute;inset:0}.viewer canvas{display:block}.name-tag{pointer-events:none;background:#ffffffeb;border-radius:999px;padding:8px 14px;font-size:18px;font-weight:800;position:absolute;top:12px;left:12px}.mini-section{pointer-events:none;background:#fff;border:2px solid #f59e0b;border-radius:12px;width:140px;height:140px;position:absolute;bottom:10px;right:10px}.play{min-height:var(--tap);background:var(--accent);color:#fff;border:none;border-radius:12px;padding:0 16px;font-weight:700}@media (orientation:portrait){.explore{height:auto;min-height:100dvh}.explore-body{grid-template-columns:1fr}.grid-wrap,.viewer-wrap{min-height:46vh}}.quiz-body{max-width:900px;margin:0 auto;padding:16px}.setup{border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:12px;padding:24px;display:flex}.setup h3{margin:8px 0 0}.best{color:var(--muted)}.start{align-self:stretch;font-size:20px}.loading{text-align:center;color:var(--muted);padding:40px}.question{flex-direction:column;gap:12px;display:flex}.progress{color:var(--muted);align-items:center;gap:10px;font-weight:700;display:flex}.type-tag{color:var(--primary);background:#eef2ff;border-radius:999px;padding:4px 10px;font-size:14px}.prompt{margin:0;font-size:20px;font-weight:700;line-height:1.45}.question-img{aspect-ratio:1;border-radius:var(--radius);border:1px solid var(--line);background:#fff;align-self:center;width:min(320px,70vw)}.choices{grid-template-columns:1fr 1fr;gap:12px;display:grid}.choice{border:3px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:8px;position:relative}.choice img{aspect-ratio:1;border-radius:10px;width:100%;display:block}.choice .mark{font-size:22px;font-weight:800;position:absolute;top:10px;left:12px}.choice.correct{border-color:var(--ok);background:#ecfdf3}.choice.wrong{border-color:var(--no);background:#fff1f1}.feedback .ok{color:var(--ok);text-align:center;font-size:22px;font-weight:800}.explain{border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);flex-direction:column;gap:8px;padding:16px;display:flex}.explain .no{color:var(--no);margin:0;font-size:20px;font-weight:800}.explain .why{margin:0;font-size:18px}.explain-viewer{border-radius:12px;height:280px;position:relative;overflow:hidden}.next{align-self:flex-end}.result{text-align:center;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);padding:32px}.score{color:var(--primary);margin:8px 0;font-size:56px;font-weight:900}.new-best{color:var(--accent);font-size:20px;font-weight:800}.by-type{padding:0;font-size:18px;line-height:1.8;list-style:none}.choice:disabled{opacity:1}@media (orientation:landscape) and (width>=900px){.quiz-body{max-width:1200px}.question{grid-template-columns:320px 1fr;grid-template-areas:"progress progress""prompt prompt""img choices""feedback feedback";align-items:start;gap:12px 20px;display:grid}.progress{grid-area:progress}.prompt{grid-area:prompt}.question-img{grid-area:img;width:320px}.choices{grid-area:choices;max-width:calc(100dvh - 190px)}.feedback{grid-area:feedback}}.home-footer{color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px;margin-top:40px;font-size:15px;display:flex}.home-footer a{color:var(--primary);align-items:center;min-height:44px;text-decoration:none;display:inline-flex}.version{font-variant-numeric:tabular-nums}.topbar .feedback{min-height:var(--tap);border:1px solid var(--line);color:var(--ink);border-radius:12px;align-items:center;margin-left:auto;padding:0 14px;font-size:15px;text-decoration:none;display:inline-flex}.hint{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.handle-dot{background:var(--no);width:12px;height:12px;box-shadow:0 0 0 1px var(--no);vertical-align:-1px;border:2px solid #fff;border-radius:50%;display:inline-block}