:root{--ink: #ffffff;--ink-dim: rgba(255, 255, 255, .84);--card: rgba(255, 255, 255, .14);--card-line: rgba(255, 255, 255, .22);--red: #e2394a;--blue: #1368ce;--yellow: #e0a000;--green: #26890c;--deep: rgba(0, 0, 0, .24);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--ink);font-family:system-ui,-apple-system,Noto Sans KR,sans-serif;font-weight:600;-webkit-text-size-adjust:100%;background:#4c1d95 fixed linear-gradient(155deg,#5b2ee0,#7e2fc4 55%,#a3327f)}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{min-height:100vh;display:flex;flex-direction:column}.pad{padding:20px}.fill{flex:1;display:flex;flex-direction:column;min-height:0}.center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;text-align:center}.muted{color:var(--ink-dim);font-weight:600}.big{font-size:clamp(30px,7vw,60px);font-weight:800;margin:0;letter-spacing:-.02em}.huge{font-size:clamp(56px,17vw,176px);font-weight:800;letter-spacing:.06em;margin:0;text-shadow:0 6px 0 var(--deep)}label{display:block;font-size:14px;color:var(--ink-dim);margin-bottom:8px;font-weight:700}input{width:100%;padding:16px 16px 20px;font-size:22px;font-weight:700;border-radius:14px;border:0;background:#fff;color:#241a3d;box-shadow:inset 0 -4px #0000001f}input::placeholder{color:#b3a9c9}input:focus{outline:3px solid #ffd84d;outline-offset:2px}button{font:inherit;font-weight:800;color:var(--ink);border:0;border-radius:14px;padding:15px 26px 20px;font-size:19px;cursor:pointer;background:var(--card);box-shadow:inset 0 -5px 0 var(--deep);transition:transform .06s ease-out}button:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 -2px 0 var(--deep)}button:disabled{opacity:.5;cursor:default}button.primary{background:#26890c}.field{width:min(420px,100%);text-align:left;margin-bottom:16px}form.field{display:flex;flex-direction:column;gap:12px;margin-bottom:0}form.field label{margin-bottom:0}form.field button{width:100%}.error{color:#ffe14d;font-size:16px;font-weight:700}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;flex:1}.choices.two{grid-template-columns:1fr}.choice{display:flex;height:100%;align-items:center;justify-content:center;gap:10px;font-size:clamp(30px,10vw,48px);border-radius:20px;min-height:22vh;padding-bottom:7px;box-shadow:inset 0 -7px 0 var(--deep)}.choice.red{background:var(--red)}.choice.blue{background:var(--blue)}.choice.yellow{background:var(--yellow);color:#2b1f00}.choice.green{background:var(--green)}.choice.dim{opacity:.3}.choice.picked{outline:5px solid #fff;outline-offset:-5px}.bar{height:14px;background:var(--deep);border-radius:999px;overflow:hidden}.bar>span{display:block;height:100%;background:#ffd84d;transition:width .2s linear}.banner{position:fixed;left:0;right:0;bottom:0;padding:12px;background:var(--red);text-align:center;font-size:16px;font-weight:800}.banner[hidden]{display:none}.rank{width:min(560px,100%);display:flex;flex-direction:column;gap:10px}.rank-row{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:14px;padding:14px 18px 19px;box-shadow:inset 0 -5px 0 var(--deep);font-size:19px;font-weight:800;will-change:transform}.rank-row .place{width:2ch;color:var(--ink-dim);font-variant-numeric:tabular-nums}.rank-row .who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.rank-row .pts{font-variant-numeric:tabular-nums}.rank-row.top{background:#ffd84d;color:#3a2a00}.rank-row.top .place{color:#6b4f00}.steps{width:min(900px,100%);display:flex;flex-direction:column;gap:18px}.step-card{background:#fff;color:#2a1a4a;border-radius:22px;padding:16px 30px 23px;text-align:center;box-shadow:inset 0 -7px #0000001f}.step-label{display:block;font-size:clamp(15px,1.7vw,22px);font-weight:700;color:#7a6a99}.step-value{display:block;font-size:clamp(28px,5vw,64px);font-weight:800;word-break:break-all}.step-value.code{font-size:clamp(52px,12vw,150px);letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1.1}.list{width:min(700px,100%);display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.chip{background:var(--card);border:2px solid var(--card-line);border-radius:999px;padding:10px 18px;font-size:18px;font-weight:700;animation:pop .3s ease-out both}.chip.away{opacity:.45}@keyframes pop{0%{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}.quizzes{width:min(640px,100%);display:flex;flex-direction:column;gap:10px}.quizzes button{text-align:left}.quizzes button small{display:block;color:var(--ink-dim);font-weight:600;margin-top:5px;font-size:14px}.podium{display:flex;align-items:flex-end;gap:14px}.step{background:var(--card);border-radius:16px 16px 0 0;padding:16px 12px 18px;width:clamp(100px,23vw,190px);text-align:center;animation:rise .5s cubic-bezier(.2,1.3,.4,1) both;box-shadow:inset 0 -6px 0 var(--deep)}.step .name{font-size:clamp(17px,2.6vw,26px);font-weight:800}.step .score{color:var(--ink-dim);font-size:16px;font-variant-numeric:tabular-nums}.step.first{height:clamp(160px,27vh,270px);background:#ffd84d;color:#3a2a00;animation-delay:1.2s}.step.first .score{color:#6b4f00}.step.second{height:clamp(120px,21vh,205px);animation-delay:.6s}.step.third{height:clamp(95px,17vh,165px);animation-delay:0s}@keyframes rise{0%{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.step,.chip{animation-duration:.01s;animation-delay:0s}button{transition:none}}