:root{--bg-top: #fff4e8;--bg-bottom: #eaf6ff;--panel-bg: #fffdf8;--text-main: #233447;--text-muted: #5c7086;--accent: #ff8f7e;--accent-strong: #f06a53;--line: #e5e8ef;--chip-a: #ffd8cc;--chip-b: #fff0b8;--chip-c: #d0f4df;--chip-d: #cce8ff;--chip-e: #f5d7ff;--chip-f: #fcd9ea}*{box-sizing:border-box}body{margin:0;min-width:320px;font-family:Segoe UI,Noto Sans KR,sans-serif;color:var(--text-main);background:linear-gradient(160deg,var(--bg-top) 0%,var(--bg-bottom) 100%)}button{font-family:inherit}.app-shell{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}.bg-ornament{position:absolute;width:260px;height:260px;border-radius:999px;filter:blur(1px);opacity:.5}.bg-ornament-left{top:-80px;left:-70px;background:radial-gradient(circle,#ffe4a3,#ffe4a300 70%)}.bg-ornament-right{right:-90px;bottom:-90px;background:radial-gradient(circle,#b8e8ff,#b8e8ff00 70%)}.panel{position:relative;z-index:1;width:min(640px,100%);border-radius:30px;background:var(--panel-bg);border:1px solid var(--line);box-shadow:0 18px 40px #d8dce980;padding:30px;animation:panel-in .36s ease-out}.hero-panel{text-align:center}.hero-tag{margin:0;font-size:.85rem;color:var(--accent-strong);letter-spacing:.08em;text-transform:uppercase}h1{margin:10px 0 8px;font-size:clamp(2rem,4.2vw,2.8rem);line-height:1.1}.hero-subtitle{margin:0 0 10px;font-size:1.1rem;color:var(--text-muted)}.hero-icon{margin:8px 0 0;font-size:1.4rem}.hero-hint{margin:0 0 20px;color:var(--text-muted)}.primary-btn,.secondary-btn,.option-btn{border:0;border-radius:14px;cursor:pointer;transition:transform .15s ease,filter .15s ease}.primary-btn:hover,.secondary-btn:hover,.option-btn:hover{transform:translateY(-1px);filter:brightness(1.02)}.primary-btn{padding:12px 18px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);color:#fff;font-size:1rem;font-weight:700}.secondary-btn{padding:12px 18px;background:#f3f5fb;color:var(--text-main);font-size:1rem;font-weight:700}.question-panel h2{margin:10px 0 18px;font-size:clamp(1.4rem,3.6vw,1.9rem);line-height:1.35}.question-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}.back-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-size:.9rem;cursor:pointer;color:var(--text-main)}.back-btn:disabled{opacity:.5;cursor:not-allowed}.mini-title{margin:0;font-size:.88rem;color:var(--text-muted)}.progress{margin:0;color:var(--text-muted);font-weight:700}.option-grid{display:grid;gap:12px}.option-btn{width:100%;text-align:left;padding:14px 16px;background:#fff;border:1px solid var(--line);color:var(--text-main);font-size:1rem;animation:option-in .26s ease both}.option-btn:nth-child(2){animation-delay:60ms}.option-btn:nth-child(3){animation-delay:.12s}.option-btn:nth-child(4){animation-delay:.18s}.option-btn:disabled{opacity:.65;cursor:not-allowed}.result-title{margin:0;font-size:clamp(1.1rem,3vw,1.4rem);font-weight:700;line-height:1.5}.result-percent{margin:10px 0 20px;color:var(--text-muted)}.loading-panel{text-align:center}.loading-emoji{margin:0 0 8px;font-size:2rem}.spinner{width:68px;height:68px;margin:6px auto 14px;border-radius:999px;border:6px solid #ffe6c9;border-top-color:var(--accent-strong);animation:spin 1s linear infinite}.loading-title{margin:0;font-weight:800}.loading-message{margin:10px auto 0;max-width:470px;color:var(--text-muted)}.number-row{display:flex;flex-wrap:wrap;gap:10px}.number-chip{width:54px;height:54px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#1f2a36;box-shadow:inset 0 0 0 1px #fffa;animation:chip-in .28s ease both}.chip-0{background:var(--chip-a)}.chip-1{background:var(--chip-b)}.chip-2{background:var(--chip-c)}.chip-3{background:var(--chip-d)}.chip-4{background:var(--chip-e)}.chip-5{background:var(--chip-f)}.set-block+.set-block{margin-top:14px}.set-label{margin:0 0 8px;color:var(--text-muted);font-weight:700}.lucky-emoji{margin:0 0 6px;font-size:2rem}.result-panel{overflow:hidden}.confetti-layer{pointer-events:none;position:absolute;inset:0}.confetti{position:absolute;top:-10px;width:8px;height:14px;border-radius:2px;animation:fall 1.2s ease-out forwards}.confetti-0{background:#ffd166}.confetti-1{background:#ef476f}.confetti-2{background:#06d6a0}.confetti-3{background:#118ab2}.confetti-4{background:#f78c6b}.confetti-5{background:#9d7bff}.confetti:nth-child(1){left:5%;animation-delay:20ms}.confetti:nth-child(2){left:12%;animation-delay:90ms}.confetti:nth-child(3){left:19%;animation-delay:.14s}.confetti:nth-child(4){left:26%;animation-delay:60ms}.confetti:nth-child(5){left:33%;animation-delay:.11s}.confetti:nth-child(6){left:40%;animation-delay:.17s}.confetti:nth-child(7){left:47%;animation-delay:10ms}.confetti:nth-child(8){left:54%;animation-delay:.13s}.confetti:nth-child(9){left:61%;animation-delay:70ms}.confetti:nth-child(10){left:68%;animation-delay:.15s}.confetti:nth-child(11){left:75%;animation-delay:30ms}.confetti:nth-child(12){left:82%;animation-delay:.12s}.confetti:nth-child(13){left:89%;animation-delay:50ms}.confetti:nth-child(14){left:9%;animation-delay:.18s}.confetti:nth-child(15){left:28%;animation-delay:.21s}.confetti:nth-child(16){left:46%;animation-delay:.24s}.confetti:nth-child(17){left:64%;animation-delay:.22s}.confetti:nth-child(18){left:84%;animation-delay:.2s}.action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.copy-status{margin:12px 0 0;color:#18704f;font-weight:700}.copy-status.fail{color:#b63d2f}.disclaimer{margin:18px 0 0;color:var(--text-muted);font-size:.88rem}@media(max-width:640px){.panel{padding:22px;border-radius:24px}.number-chip{width:48px;height:48px}}@keyframes panel-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes option-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes chip-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:.95}to{transform:translateY(220px) rotate(210deg);opacity:0}}
