:root{--ink: #3a2e4a;--ink-soft: #6b5b7e;--paper: #fffdf8;--card: #ffffff;--primary: #ff7eb3;--primary-deep: #ff5e9c;--accent: #ffd23f;--mint: #8fe3c8;--sky: #8fd3fe;--lav: #c3b3f5;--shadow: 0 18px 40px -16px rgba(120, 80, 160, .45);--shadow-sm: 0 8px 20px -10px rgba(120, 80, 160, .4);--radius: 28px;--radius-sm: 18px;--font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}.sky{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:linear-gradient(180deg,#c8b6ff,#ffc8dd 38%,#ffe5a8 72%,#fff6e0);background-size:100% 200%;animation:sky-drift 18s ease-in-out infinite alternate}@keyframes sky-drift{0%{background-position:0 0}to{background-position:0 100%}}.clouds{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}.cloud{position:absolute;background:#ffffffd9;border-radius:100px;filter:blur(2px);opacity:.7;animation:float-x linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:100px}.cloud:before{width:60%;height:140%;top:-40%;left:12%}.cloud:after{width:45%;height:120%;top:-30%;right:14%}@keyframes float-x{0%{transform:translate(-30vw)}to{transform:translate(130vw)}}.sparkle{position:fixed;z-index:-1;pointer-events:none;font-size:14px;opacity:.8;animation:twinkle 3s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.2;transform:scale(.7)}50%{opacity:.95;transform:scale(1.1)}}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:0 18px 64px}.stage{width:100%;max-width:560px;margin:0 auto}.center{text-align:center}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px}.btn{font-family:var(--font);font-weight:800;font-size:18px;border:none;cursor:pointer;border-radius:999px;padding:16px 30px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-deep));box-shadow:0 10px 0 -2px #ff5e9c59,var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;-webkit-tap-highlight-color:transparent}.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}.btn:active{transform:translateY(3px);box-shadow:0 4px 0 -2px #ff5e9c59,var(--shadow-sm)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn--ghost{background:#fff;color:var(--primary-deep);box-shadow:var(--shadow-sm);border:2px solid #ffe0ec}.btn--block{width:100%}.btn--lg{font-size:20px;padding:18px 34px}.field{position:relative}.input{width:100%;font-family:var(--font);font-size:17px;font-weight:600;padding:16px 18px;border-radius:var(--radius-sm);border:2px solid #efe7f7;background:#fbf8ff;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #ffe0ec}.label{display:block;font-weight:800;font-size:14px;color:var(--ink-soft);margin:0 0 8px 4px}.ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow);overflow:hidden;border:1px solid #f0e9f8}.ac-item{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;border:none;background:none;cursor:pointer;font-family:var(--font);font-size:16px;text-align:left;color:var(--ink);transition:background .1s ease}.ac-item:hover,.ac-item[aria-selected=true]{background:#fff2f7}.ac-item+.ac-item{border-top:1px solid #f6f0fb}.ac-kind{font-size:12px;font-weight:800;color:#fff;padding:3px 9px;border-radius:999px;flex:none}.ac-kind--초{background:var(--mint)}.ac-kind--중{background:var(--sky)}.ac-kind--고{background:var(--lav)}.ac-region{margin-left:auto;font-size:13px;color:var(--ink-soft)}.h1{font-size:38px;font-weight:900;line-height:1.15;letter-spacing:-.02em}.h2{font-size:26px;font-weight:900;letter-spacing:-.01em}.sub{font-size:16px;color:var(--ink-soft);font-weight:600;line-height:1.6}.pill{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;padding:7px 14px;border-radius:999px;background:#ffffffb3;color:var(--primary-deep);box-shadow:var(--shadow-sm)}.counter{display:inline-flex;flex-direction:column;align-items:center;gap:2px}.counter-num{font-size:44px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.counter-num .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#57d97e;margin:0 0 6px 8px;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.progress{height:12px;background:#ffffffb3;border-radius:999px;overflow:hidden;box-shadow:var(--shadow-sm)}.progress>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--primary));transition:width .45s cubic-bezier(.34,1.56,.64,1)}.q-enter{animation:q-in .42s cubic-bezier(.34,1.4,.5,1) both}.q-exit{animation:q-out .28s ease both}@keyframes q-in{0%{opacity:0;transform:translate(40px) scale(.96)}to{opacity:1;transform:none}}@keyframes q-out{0%{opacity:1;transform:none}to{opacity:0;transform:translate(-40px) scale(.96)}}.choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:var(--font);font-size:18px;font-weight:700;color:var(--ink);background:#fbf8ff;border:2px solid #efe7f7;border-radius:var(--radius-sm);padding:20px;cursor:pointer;margin-top:14px;transition:transform .12s ease,border-color .12s ease,background .12s ease}.choice:hover{transform:translateY(-2px);border-color:var(--primary);background:#fff2f7}.choice:active{transform:scale(.98)}.choice .ord{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--sky),var(--lav))}.result-emoji{font-size:96px;line-height:1;animation:pop .6s cubic-bezier(.34,1.7,.5,1) both}@keyframes pop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.15) rotate(6deg)}to{transform:scale(1) rotate(0)}}.result-badge{display:inline-block;padding:6px 16px;border-radius:999px;font-weight:900;color:#fff;font-size:14px}.mini-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}.mini-type{background:#fbf8ff;border-radius:14px;padding:10px 4px;text-align:center;font-size:22px;border:2px solid transparent;transition:transform .12s ease}.mini-type.on{border-color:var(--primary);transform:scale(1.08);background:#fff2f7}.donate{margin-top:18px;border-radius:var(--radius);padding:22px;background:linear-gradient(135deg,#5b4a7a,#3a2e4a);color:#fff;text-align:center}.donate .btn{background:linear-gradient(135deg,var(--accent),#ffb01f);color:#4a3a12;box-shadow:var(--shadow-sm)}.lb-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--radius-sm);background:#fbf8ff;margin-top:10px}.lb-row.me{background:#fff2f7;border:2px solid var(--primary)}.lb-rank{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--ink-soft);background:#fff;box-shadow:var(--shadow-sm)}.lb-rank.medal-1{background:linear-gradient(135deg,#ffe17a,#ffb01f);color:#6a4a00}.lb-rank.medal-2{background:linear-gradient(135deg,#e8eef5,#bcc7d6);color:#4a5566}.lb-rank.medal-3{background:linear-gradient(135deg,#f7c89b,#e89b5a);color:#5a3210}.lb-name{font-weight:800}.lb-count{margin-left:auto;font-weight:900;color:var(--primary-deep);font-variant-numeric:tabular-nums}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;align-items:center;gap:10px}.muted{color:var(--ink-soft);font-weight:600}.link-btn{background:none;border:none;color:var(--primary-deep);font-weight:800;cursor:pointer;font-family:var(--font);font-size:15px;padding:6px}.demo-tag{position:fixed;left:12px;bottom:12px;z-index:30;font-size:12px;font-weight:700;color:var(--ink-soft);background:#fffc;padding:6px 12px;border-radius:999px;box-shadow:var(--shadow-sm)}.fade-up{animation:fade-up .5s ease both}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media(max-width:480px){.h1{font-size:30px}.result-emoji{font-size:78px}.counter-num{font-size:38px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}