:root{--bg:#f8efdc;--panel:#fffdf7;--panel-soft:#edf8ff;--panel-ivory:#fff5d6;--panel-yellow:#ffe588;--ink:#181818;--line:#181818;--accent:#ffcc4d;--accent-2:#7fd7ff;--accent-3:#ff9a76;--accent-4:#d7c3ff;--correct:#2e8b57;--correct-bg:#dcffe9;--wrong:#d64545;--wrong-bg:#ffe3e3;--muted:#4f4f4f;--line-soft:rgba(24,24,24,0.14);--shadow:6px 6px 0 var(--line);--shadow-soft:3px 3px 0 rgba(24,24,24,0.24);--button-shadow:4px 4px 0 var(--line);--radius-sm:16px;--radius:24px;--radius-lg:30px;--quiz-sun:#ffcc4d;--quiz-sky:#a7e8ff;--quiz-coral:#ffab87;--quiz-lilac:#d7c3ff;--quiz-lime:#dff16d;--quiz-cream:#fff3c9;--quiz-answer-1:#ffe28a;--quiz-answer-2:#c1edff;--quiz-answer-3:#ffc8b2;--quiz-answer-4:#e0d0ff;--space-1:8px;--space-2:12px;--space-3:16px;--space-4:20px;--space-5:24px;--space-6:32px;--space-7:40px}*{box-sizing:border-box}body,html{min-height:100vh;min-height:100dvh}body,html{background:var(--bg)}body{margin:0;font-family:Arial,Apple SD Gothic Neo,Noto Sans KR,sans-serif;line-height:1.5;color:var(--ink)}a{color:inherit}.app{max-width:1040px;margin:0 auto;padding:clamp(20px,4vw,32px) 16px 48px}.home-stack{display:grid;grid-gap:var(--space-5);gap:var(--space-5)}.home-stack>.hero{margin-bottom:0}.card,.dialog,.hero,.scoreboard{position:relative;overflow:hidden;background:var(--panel);border:4px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero{padding:clamp(28px,5vw,44px);margin-bottom:var(--space-5)}h1{margin:0 0 10px;font-size:clamp(2.4rem,4.5vw,4rem);line-height:.98;letter-spacing:-.05em}.feedback,.hero p,.hint,.progress,.small{margin:0;font-size:1.02rem;line-height:1.5;color:var(--muted)}.home-hero{padding:clamp(32px,8vw,68px) clamp(24px,6vw,56px);background:var(--panel-ivory);text-align:center}.home-hero-heading{display:inline-flex;align-items:center;justify-content:center;max-width:min(100%,100%);margin:0 auto 18px;padding:14px 24px;border:4px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--button-shadow);background:var(--panel-yellow);transform:rotate(-1.6deg)}.home-hero h1{margin-bottom:0;font-size:clamp(3rem,12vw,5.75rem)}.home-hero p{max-width:22rem;margin:0 auto;font-size:1.08rem;color:var(--ink);font-weight:700}.home-dialog{padding:22px 24px;background:var(--panel)}.home-dialog h2{margin-bottom:8px;font-size:clamp(1.35rem,3vw,1.9rem);letter-spacing:-.03em}.home-dialog .small{color:var(--muted);font-weight:700}.home-dialog--cta{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;background:var(--panel-soft)}.home-dialog-copy{display:grid;grid-gap:8px;gap:8px}.home-actions{margin-top:0}.home-actions .button-link{min-width:150px}.home-actions .button-link:focus-visible,.home-actions .button-link:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}.home-actions .start-button{background:var(--accent)}.home-secondary-link{background:var(--panel-soft)}.quiz-card,.quiz-dialog,.quiz-hero,.quiz-scoreboard{position:relative;overflow:hidden}.quiz-card>*,.quiz-dialog>*,.quiz-hero>*,.quiz-scoreboard>*{position:relative;z-index:1}.quiz-hero{padding:clamp(28px,6vw,40px);background:var(--quiz-cream)}.quiz-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}.quiz-hero-pill{background:var(--quiz-sun)}.quiz-chip,.quiz-section-tag{display:inline-flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;min-height:40px;padding:8px 14px;border:3px solid var(--line);border-radius:999px;background:var(--quiz-lilac);font-size:.9rem;font-weight:800;box-shadow:var(--shadow-soft)}.quiz-section-tag--cool{background:var(--quiz-sky)}.quiz-hero h1{max-width:11ch}.quiz-hero p{max-width:34rem}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-gap:20px;gap:20px;align-items:start}.card{padding:24px}.quiz-layout{gap:24px}.quiz-card{background:var(--panel)}.scoreboard{padding:20px;background:var(--panel-soft)}.quiz-scoreboard{background:white}.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 14px;border:3px solid var(--line);border-radius:999px;background:var(--accent);font-weight:700;box-shadow:var(--shadow-soft)}.question-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.question-head h2{margin:0}.quiz-question-head{align-items:flex-start;margin-bottom:24px}.quiz-question-copy{display:grid;grid-gap:8px;gap:8px;max-width:30rem}.quiz-subcopy{color:var(--muted);font-weight:700}.quiz-progress-pill{min-width:100px;background:var(--quiz-coral)}.diagram-wrap{display:grid;place-items:center;padding:16px;margin-bottom:20px;background:var(--panel-yellow);border:4px solid var(--line);border-radius:var(--radius-lg)}.quiz-diagram-wrap{padding:20px;background:white}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px}.quiz-answers{position:relative;gap:16px}.button-link,button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:4px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font:inherit;font-weight:800;min-height:68px;padding:14px 18px;cursor:pointer;box-shadow:var(--button-shadow);transition:transform .12s ease-out,box-shadow .12s ease-out,background .12s ease-out,color .12s ease-out}.quiz-answer-button{position:relative;overflow:hidden;text-align:center;word-break:keep-all}.quiz-answer-button:before{content:none}.quiz-card--correct{box-shadow:var(--shadow),0 0 0 6px rgba(46,139,87,.18)}.quiz-card--wrong{box-shadow:var(--shadow),0 0 0 6px rgba(214,69,69,.18);animation:quiz-card-shake .36s ease-out}.quiz-card--correct:after,.quiz-card--wrong:after{content:"";position:absolute;inset:12px;border-radius:calc(var(--radius) - 8px);pointer-events:none}.quiz-card--correct:after{background:radial-gradient(circle at 12% 22%,rgba(255,204,77,.92) 0 9px,transparent 10px),radial-gradient(circle at 82% 20%,rgba(127,215,255,.88) 0 8px,transparent 9px),radial-gradient(circle at 70% 68%,rgba(215,195,255,.86) 0 10px,transparent 11px),radial-gradient(circle at 18% 78%,rgba(255,154,118,.85) 0 8px,transparent 9px),radial-gradient(circle at 50% 50%,rgba(255,255,255,.78) 0 18%,transparent 48%);opacity:0;animation:quiz-celebration-burst .72s ease-out}.quiz-card--wrong:after{border:4px solid rgba(214,69,69,.32);opacity:0;animation:quiz-impact-ring .36s ease-out}.quiz-answer-button--correct-effect{animation:quiz-answer-pop .42s cubic-bezier(.2,.9,.3,1.2)}.quiz-answer-button--wrong-effect{animation:quiz-answer-shake .32s ease-out}.button-link:focus-visible,.button-link:hover,button:focus-visible,button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}.button-link:focus-visible,button:focus-visible{outline:4px solid var(--accent-2);outline-offset:4px}button:disabled{cursor:default;opacity:.8}.answer-button.correct{background:var(--correct-bg)}.answer-button.wrong{background:var(--wrong-bg)}.answer-tone-0{background:var(--quiz-answer-1)}.answer-tone-1{background:var(--quiz-answer-2)}.answer-tone-2{background:var(--quiz-answer-3)}.answer-tone-3{background:var(--quiz-answer-4)}.quiz-answer-button.correct{background:var(--correct-bg)}.quiz-answer-button.wrong{background:var(--wrong-bg)}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}.feedback{min-height:28px;font-weight:700}.quiz-feedback{padding:8px 12px;border:3px solid var(--line);border-radius:999px;background:var(--panel);box-shadow:var(--shadow-soft)}.quiz-feedback:empty{padding:0;border:0;background:transparent;box-shadow:none}.quiz-feedback.correct{background:var(--correct-bg)}.quiz-feedback.wrong{background:var(--wrong-bg)}.feedback.correct{color:var(--correct)}.feedback.wrong{color:var(--wrong)}@keyframes quiz-answer-pop{0%{transform:scale(1)}45%{transform:translateY(-4px) scale(1.04)}to{transform:scale(1)}}@keyframes quiz-answer-shake{0%,to{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}@keyframes quiz-card-shake{0%,to{transform:translateX(0)}24%{transform:translateX(-8px)}52%{transform:translateX(6px)}76%{transform:translateX(-3px)}}@keyframes quiz-celebration-burst{0%{opacity:0;transform:scale(.86)}24%{opacity:1}to{opacity:0;transform:scale(1.08)}}@keyframes quiz-impact-ring{0%{opacity:.85;transform:scale(.96)}to{opacity:0;transform:scale(1.02)}}.next-button,.restart-button,.start-button{background:var(--accent)}.secondary-button{background:var(--panel)}.score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;margin-top:14px}.quiz-scoreboard-copy{display:grid;grid-gap:10px;gap:10px}.quiz-dialog-score-grid,.quiz-score-grid{margin-top:18px}.score-box{border:3px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);padding:14px;box-shadow:var(--button-shadow)}.quiz-score-box--remaining,.quiz-score-box--score{background:white}.score-label{display:block;font-size:.95rem;color:var(--ink);font-weight:700;margin-bottom:6px}.score-value{font-size:clamp(2rem,5vw,2.5rem);font-weight:800;line-height:1}.dialog{padding:clamp(22px,4vw,30px)}.quiz-dialog{background:var(--quiz-cream)}.quiz-dialog-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.quiz-dialog-copy{display:grid;grid-gap:8px;gap:8px}.quiz-result-pill{background:var(--quiz-sun)}.dialog h2{margin:0 0 12px;font-size:1.8rem;letter-spacing:-.03em}.dialog-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}.chart-grid{display:grid;grid-gap:var(--space-5);gap:var(--space-5);margin-top:20px}.chart-group{display:grid;grid-gap:14px;gap:14px}.chart-group-items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:var(--space-4);gap:var(--space-4)}.chart-item{display:grid;grid-gap:12px;gap:12px}.chart-item h3{margin:0;font-size:1.25rem;letter-spacing:-.03em}.chart-item.playable{min-height:100%;padding:18px;border:4px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--button-shadow);cursor:pointer;transition:transform .12s ease-out,box-shadow .12s ease-out,background .12s ease-out}.chart-item.playable:focus-visible,.chart-item.playable:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}.chart-item.playable:focus-visible{outline:4px solid var(--accent-2);outline-offset:4px}.chart-grid .diagram-wrap{padding:12px;margin-bottom:0;background:var(--panel-yellow);border-radius:var(--radius-sm)}.home-chart-dialog .chart-grid{margin-top:18px}.home-chart-dialog .chart-item.playable{background:var(--panel-ivory)}.home-chart-dialog .chart-item.playable:focus-visible,.home-chart-dialog .chart-item.playable:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}.home-chart-dialog .chart-item h3{margin-bottom:10px}.home-chart-dialog .chart-grid .diagram-wrap{background:var(--panel-yellow)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}svg{max-width:100%;height:auto}@media (max-width:800px){.home-hero-heading{transform:rotate(-1deg)}.home-dialog--cta{flex-direction:column;align-items:stretch}.home-actions,.home-actions .button-link{width:100%}.quiz-dialog-top,.quiz-hero-top,.quiz-question-head{flex-direction:column;align-items:flex-start}.answers,.layout{grid-template-columns:1fr}.quiz-answers{grid-template-columns:repeat(2,minmax(0,1fr))}.quiz-answer-button{min-height:74px;padding:12px 10px}.chart-group-items{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:520px){.chart-group-items{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}.quiz-card--correct:after,.quiz-card--wrong:after{opacity:1;transform:none}.quiz-answer-button--correct-effect{box-shadow:var(--button-shadow),0 0 0 4px rgba(46,139,87,.22)}.quiz-answer-button--wrong-effect{box-shadow:var(--button-shadow),0 0 0 4px rgba(214,69,69,.22)}}