:root{--ink:#181326;--plum:#2b1735;--wine:#79203d;--gold:#c99a45;--paper:#f6f1e8;--cream:#fffaf2;--muted:#746d76;--line:#ded4c6;--ok:#26735a;--bad:#a33a4a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans KR",sans-serif}button,input{font:inherit}button{cursor:pointer}.shell{min-height:100vh;background:radial-gradient(circle at 75% 5%,rgba(201,154,69,.12),transparent 28%),var(--paper)}
.topbar{height:76px;max-width:1160px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(43,23,53,.13)}.brand{display:flex;align-items:center;gap:11px;border:0;background:transparent;color:var(--ink);text-align:left}.mark{width:40px;height:40px;border:1px solid var(--gold);display:grid;place-items:center;border-radius:50%;font:italic 700 22px Georgia;color:var(--gold)}.brand strong,.brand small{display:block;letter-spacing:.16em}.brand strong{font:700 16px Georgia}.brand small{font-size:8px;margin-top:3px;color:var(--muted)}.pill{border:1px solid var(--line);background:rgba(255,255,255,.55);padding:9px 13px;border-radius:99px;font-size:11px;color:var(--muted)}
.hero{max-width:1160px;margin:auto;padding:58px 28px 38px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}.eyebrow{color:var(--wine);font-size:11px;letter-spacing:.2em;font-weight:800}.hero h1{margin:18px 0 20px;font:500 clamp(43px,6vw,72px)/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.04em}.hero h1 em{font-weight:500;color:var(--wine);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:8px}.lead{max-width:590px;color:#655d68;font-size:16px;line-height:1.8}.modes{display:flex;gap:8px;margin:28px 0 16px;flex-wrap:wrap}.modes button{border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.5);padding:11px 17px;font-size:12px;color:#655d68;font-weight:700}.modes button.active{background:var(--plum);border-color:var(--plum);color:#fff}.primary{border:0;background:var(--wine);color:#fff;min-height:56px;padding:0 28px;font-weight:800;box-shadow:0 12px 30px rgba(121,32,61,.2)}.primary:hover{background:#8a2a49}.note{font-size:11px;color:var(--muted);margin-top:16px}.disc-stage{height:380px;display:grid;place-items:center;position:relative}.disc{width:300px;height:300px;border-radius:50%;background:repeating-radial-gradient(circle,#1b1721 0 4px,#28232c 5px 7px,#17131c 8px 10px);box-shadow:0 32px 65px rgba(24,19,38,.3);display:grid;place-items:center;animation:spin 18s linear infinite}.disc-label{width:105px;height:105px;border-radius:50%;background:var(--wine);border:5px solid #d6ad61;display:grid;place-items:center;align-content:center;color:#fff}.disc-label b{font:600 32px Georgia}.disc-label small{font-size:7px;letter-spacing:.16em}@keyframes spin{to{transform:rotate(360deg)}}
.stats{max-width:1100px;margin:0 auto 54px;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}.stats div{text-align:center;padding:24px;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats b{display:block;font:500 31px Georgia;color:var(--wine)}.stats span{font-size:12px;color:var(--muted)}
.home-grid{max-width:1100px;margin:auto;padding:0 28px 70px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{background:rgba(255,250,242,.75);border:1px solid var(--line);padding:30px}.panel h2{margin:7px 0 24px;font:500 28px Georgia}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.steps b{color:var(--gold);font:600 24px Georgia}.steps span,.steps small{display:block}.steps span{font-size:13px;font-weight:800;margin:8px 0}.steps small{font-size:11px;color:var(--muted);line-height:1.5}.rank{display:grid;gap:0}.rank>div{display:grid;grid-template-columns:28px 1fr 76px 52px;align-items:center;border-top:1px solid var(--line);padding:11px 0;font-size:12px}.rank>div>b{color:var(--gold);font:700 16px Georgia}.rank em{font-style:normal;font:600 16px Georgia;color:var(--wine)}.rank time{font-size:10px;color:var(--muted)}
.quiz{max-width:920px;margin:auto;padding:34px 24px 68px}.status{display:grid;grid-template-columns:130px 1fr 100px;align-items:center;gap:22px;margin-bottom:20px}.status small{display:block;font-size:9px;letter-spacing:.18em;color:var(--muted)}.status strong{font:600 23px Georgia}.progress{height:3px;background:#d9cfc1}.progress i{display:block;height:100%;background:var(--wine)}.quiz-card{background:var(--plum);color:white;text-align:center;padding:35px 28px;border-radius:3px}.sound{width:88px;height:88px;margin:auto;border-radius:50%;border:1px solid #bb8f42;display:grid;place-items:center;font:600 35px Georgia}.sound.playing{animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 13px rgba(201,154,69,.12)}}.quiz-card h2{font:500 28px Georgia;margin:18px 0}.audio-row{max-width:560px;margin:auto;display:grid;grid-template-columns:48px 1fr 62px;align-items:center;gap:15px}.play{width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:var(--plum);font-weight:900}.track{height:4px;background:rgba(255,255,255,.17)}.track i{display:block;height:100%;background:var(--gold)}.answers{display:grid;gap:9px;margin-top:18px}.answer{width:100%;display:grid;grid-template-columns:38px 1fr auto;align-items:center;text-align:left;border:1px solid var(--line);background:var(--cream);padding:14px 16px;color:var(--ink)}.answer>b{color:var(--gold);font:700 19px Georgia}.answer strong,.answer small{display:block}.answer strong{font-size:14px}.answer small{margin-top:4px;color:var(--muted);font-size:11px}.answer.correct{border-color:var(--ok);background:#eef8f3}.answer.wrong{border-color:var(--bad);background:#fff0f1}.answer em{font-style:normal;font-size:11px;font-weight:800}.answer:disabled{cursor:default}.answer-footer{margin-top:16px;background:#eee6da;border-left:4px solid var(--gold);padding:17px;display:flex;justify-content:space-between;align-items:center;gap:16px}.answer-footer strong,.answer-footer small,.answer-footer a{display:block}.answer-footer small,.answer-footer a{font-size:11px;color:var(--muted);margin-top:5px}.answer-footer button{border:0;background:var(--wine);color:#fff;padding:13px 18px;font-weight:800}
.result{max-width:790px;margin:auto;padding:62px 24px 80px;text-align:center}.result h1{font:500 43px Georgia;margin:8px}.medal{width:150px;height:150px;border-radius:50%;margin:28px auto;display:grid;place-items:center;align-content:center;border:8px double var(--gold);background:var(--plum);color:#fff}.medal b{font:600 47px Georgia}.medal small{color:#d8c8a8}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-bottom:22px}.result-stats div{padding:18px;border-right:1px solid var(--line)}.result-stats div:last-child{border:0}.result-stats span,.result-stats strong{display:block}.result-stats span{font-size:10px;color:var(--muted)}.result-stats strong{font:600 22px Georgia;margin-top:5px}.save{padding:22px;background:#fffaf2;border:1px solid var(--line)}.save-row{display:flex;max-width:480px;margin:12px auto 0}.save input{flex:1;min-width:0;padding:13px;border:1px solid var(--line)}.save button{border:0;background:var(--plum);color:#fff;padding:0 18px}.actions{margin-top:20px;display:flex;justify-content:center;gap:10px}.ghost{min-height:56px;padding:0 24px;border:1px solid var(--line);background:transparent}
footer{padding:28px;text-align:center;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.7}.hidden{display:none!important}
@media(max-width:760px){.topbar{height:66px;padding:0 18px}.pill{display:none}.hero{grid-template-columns:1fr;padding:38px 20px 24px}.hero h1{font-size:43px}.disc-stage{display:none}.stats{margin-inline:20px}.stats div{padding:16px 6px}.stats b{font-size:24px}.home-grid{grid-template-columns:1fr;padding:0 20px 50px}.steps{grid-template-columns:1fr}.status{grid-template-columns:105px 1fr 82px;gap:10px}.quiz{padding:22px 14px 55px}.quiz-card{padding:28px 15px}.quiz-card h2{font-size:23px}.answer{padding:13px 11px}.answer-footer{align-items:flex-start;flex-direction:column}.result-stats{grid-template-columns:1fr}.result-stats div{border-right:0;border-bottom:1px solid var(--line)}.result-stats div:last-child{border-bottom:0}.save-row{flex-direction:column}.save button{padding:13px}.actions{flex-direction:column}.primary,.ghost{width:100%}}