:root{--green:#2f7d4e;--green-dark:#24633d;--green-soft:#e6f2e9;--x:#c7483d;--x-dark:#a63a31;--x-soft:#fbe9e6;--yellow-soft:#fdf3d3;--yellow:#e2b93b;--bg:#f5f7ef;--surface:#fff;--text:#1f2a22;--muted:#56655b;--line:#dfe5da;--radius:16px;--shadow:0 2px 10px #1f2a2214;--focus:0 0 0 3px #fff, 0 0 0 6px #1f6fd1}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);word-break:keep-all;overflow-wrap:break-word;margin:0;font-family:system-ui,-apple-system,Apple SD Gothic Neo,Malgun Gothic,Noto Sans KR,sans-serif;line-height:1.5}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,summary:focus-visible{box-shadow:var(--focus);outline:none}h1:focus{outline:none}.app{flex-direction:column;min-height:100dvh;display:flex}.container{flex:1;width:100%;max-width:560px;margin:0 auto;padding:20px 16px 32px}.screen{flex-direction:column;animation:.2s ease-out enter;display:flex}@keyframes enter{0%{opacity:0;transform:translateY(6px)}}.home-hero{text-align:center;padding:28px 0 8px}.hero-emoji{font-size:56px;line-height:1}.home h1{color:var(--green-dark);margin:12px 0 4px;font-size:30px}.subtitle{color:var(--muted);margin:0;font-size:18px}.home-guide{text-align:center;margin:24px 0 12px;font-weight:600}.mode-list{gap:14px;display:grid}.mode-card{border-radius:var(--radius);background:var(--green);color:#fff;text-align:left;width:100%;min-height:96px;box-shadow:var(--shadow);border:2px solid #0000;align-items:center;gap:14px;padding:18px 20px;transition:transform .1s;display:flex}.mode-card:active{transform:scale(.98)}.mode-advanced{background:var(--yellow-soft);color:var(--text);border-color:var(--yellow)}.mode-emoji{font-size:36px;line-height:1}.mode-text{flex-direction:column;flex:1;display:flex}.mode-label{font-size:24px;font-weight:800}.mode-desc{opacity:.9;font-size:15px}.mode-count{white-space:nowrap;background:#fff3;border-radius:999px;padding:4px 10px;font-size:15px;font-weight:700}.mode-advanced .mode-count{background:#0000000f}.progress{flex:1}.progress-text{color:var(--green-dark);font-weight:700}.progress-bar{background:var(--line);border-radius:999px;height:8px;margin-top:6px;overflow:hidden}.progress-fill{background:var(--green);border-radius:inherit;height:100%;transition:width .3s}.quiz-top{align-items:flex-start;gap:16px;display:flex}.quit{color:var(--muted);background:0 0;border:none;min-height:44px;padding:4px 6px;font-size:14px;text-decoration:underline}.badge{background:var(--green-soft);color:var(--green-dark);border-radius:999px;align-self:flex-start;margin-top:20px;padding:4px 12px;font-size:14px;font-weight:700}.badge-advanced{background:var(--yellow-soft);color:#6b5100}.question-text{min-height:4.5em;margin:16px 0 28px;font-size:24px;font-weight:700;line-height:1.5}.ox-buttons{gap:14px;display:grid}.ox{border-radius:var(--radius);color:#fff;width:100%;min-height:88px;box-shadow:var(--shadow);border:none;justify-content:center;align-items:center;gap:12px;font-weight:900;transition:transform .15s,opacity .15s,box-shadow .15s;display:flex}.ox-mark{font-size:44px;line-height:1}.ox-word{font-size:18px;font-weight:700}.ox-o{background:var(--green)}.ox-x{background:var(--x)}.ox:active:not(:disabled){transform:scale(.97)}.ox:disabled{cursor:default;opacity:.45}.ox.is-selected{opacity:1;box-shadow:0 0 0 4px var(--surface), 0 0 0 7px var(--text);transform:scale(1.03)}.hint{text-align:center;color:var(--muted);margin:20px 0 0;font-size:15px}.feedback-head{text-align:center;margin:24px 0 8px}.feedback-emoji{font-size:52px;line-height:1}.feedback h1{margin:8px 0 0;font-size:30px}.is-correct h1{color:var(--green-dark)}.is-wrong h1{color:var(--x-dark)}.streak{background:var(--yellow-soft);border-radius:999px;margin:10px 0 0;padding:4px 12px;font-size:15px;font-weight:700;display:inline-block}.feedback-question{color:var(--muted);margin:16px 0 12px;font-size:17px}.answer-box{border-radius:var(--radius);background:var(--green-soft);border:2px solid var(--green);padding:18px 20px}.is-wrong .answer-box{background:var(--x-soft);border-color:var(--x)}.answer-line{flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 8px;display:flex}.answer-line strong{font-size:24px}.my-answer{color:var(--muted);font-size:15px}.explanation{margin:0;font-size:20px;line-height:1.6}.sticky-cta{padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to bottom, #f5f7ef00, var(--bg) 30%);margin-top:20px;position:sticky;bottom:0}.btn-primary,.btn-secondary{border-radius:var(--radius);width:100%;min-height:60px;padding:12px 20px;font-size:20px;font-weight:800}.btn-primary{background:var(--green);color:#fff;box-shadow:var(--shadow);border:none}.btn-primary:active{background:var(--green-dark)}.btn-secondary{border:2px solid var(--green);background:var(--surface);color:var(--green-dark)}.btn-text{min-height:48px;color:var(--muted);background:0 0;border:none;font-size:16px;text-decoration:underline}.result{text-align:center;padding-top:16px}.result-mode{color:var(--muted);margin:0;font-weight:600}.result-emoji{margin-top:16px;font-size:72px;line-height:1}.result h1{color:var(--green-dark);margin:8px 0 0;font-size:32px}.score{margin:6px 0 0;font-size:22px}.score strong{color:var(--green-dark);font-size:40px}.result .streak{align-self:center}.result-message{border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);margin:16px 0 0;padding:16px;font-size:17px}.result-actions{gap:12px;margin-top:24px;display:grid}.review{text-align:left;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:24px}.review summary{cursor:pointer;border-radius:var(--radius);padding:16px 18px;font-weight:700}.review ol{margin:0;padding:0 18px 8px 38px}.review li{border-top:1px solid var(--line);padding:12px 0}.review p{margin:0 0 4px}.review-q{font-weight:600}.review-a{color:var(--green-dark)}.review-e{color:var(--muted)}.event{color:var(--muted);justify-content:center;align-items:center;gap:10px;padding:16px;font-size:14px;display:flex}.event-logo{max-height:32px}@media (width>=768px){.container{padding-top:48px}.question-text{font-size:28px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}