:root{--text-dark:#2d3436;--text-gray:#636e72;--bg-soft:#fdfbfb;--primary-pink:#ffb8d1;--shadow-soft:0 15px 35px #0000000d}body{background-color:var(--bg-soft);color:var(--text-dark);font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,sans-serif;line-height:1.5;overflow-x:hidden}.app{background:linear-gradient(#fff5f7 0%,#f0f4ff 100%);flex-direction:column;align-items:center;min-height:100vh;padding:40px 20px;display:flex}.main-content{flex-direction:column;flex:1;justify-content:center;width:100%;max-width:450px;display:flex}.landing-view{text-align:center;animation:.8s ease-out fadeIn}.main-character-float{margin-bottom:20px;font-size:6rem;animation:3s ease-in-out infinite float;display:inline-block}.hero h1{margin-bottom:20px;font-size:2.8rem;font-weight:900;line-height:1.2}.hero h1 span{color:#ff7675;text-shadow:2px 2px #ffeaa7}.hero p{color:var(--text-gray);margin-bottom:30px;font-size:1.1rem}.input-group{margin-bottom:25px;animation:1s ease-out fadeIn}.name-input{text-align:center;background:#fff;border:4px solid #f1f2f6;border-radius:20px;outline:none;width:100%;max-width:300px;padding:15px 25px;font-size:1.1rem;font-weight:700;transition:all .3s}.name-input:focus{border-color:#ff7675;box-shadow:0 5px 15px #ff76751a}.btn-start{color:#fff;cursor:pointer;background:#2d3436;border:none;border-radius:50px;padding:22px 50px;font-size:1.3rem;font-weight:800;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 25px #0003}.btn-start:hover{background:#ff7675;transform:scale(1.05)translateY(-5px)}.quiz-view{box-shadow:var(--shadow-soft);background:#fff;border-radius:40px;padding:40px 25px}.progress-container{background:#f1f2f6;border-radius:10px;height:10px;margin-bottom:40px;overflow:hidden}.progress-bar{background:#ff7675;height:100%;transition:width .4s ease-in-out}.q-number{color:#ff7675;margin-bottom:10px;font-size:1.2rem;font-weight:900;display:block}.question-text{word-break:keep-all;margin-bottom:35px;font-size:1.5rem;line-height:1.4}.options-grid{flex-direction:column;gap:12px;display:flex}.option-btn{text-align:left;cursor:pointer;background:#f9f9f9;border:3px solid #0000;border-radius:20px;padding:16px 20px;font-size:.95rem;font-weight:600;line-height:1.3;transition:all .2s}.option-btn:hover{color:#ff7675;background:#fff;border-color:#ff7675;transform:scale(1.02)}.result-view{text-align:center;animation:.8s cubic-bezier(.175,.885,.32,1.275) slideUp}.sticker-container{border:15px solid var(--border-color);background:#fff;border-radius:45px;margin-bottom:45px;padding:6px;transition:transform .3s;position:relative;overflow:hidden;transform:rotate(-1.5deg);box-shadow:15px 15px #00000026}.sticker-container:hover{transform:rotate(0)scale(1.02)}.sticker-body{background-color:var(--sticker-color);background-image:radial-gradient(circle at 2px 2px,#ffffff80 1.5px,#0000 0);background-size:25px 25px;border:4px dashed #00000026;border-radius:35px;padding:45px 25px}.user-greeting{color:#2d3436;text-transform:uppercase;margin-bottom:30px;font-size:1.2rem;font-weight:900}.user-greeting span{background:#fff;border:2px solid #2d3436;border-radius:15px;padding:5px 15px;box-shadow:4px 4px #0000001a}.sticker-main{margin-bottom:40px}.sticker-emoji{filter:drop-shadow(8px 8px #ffffffe6);margin-bottom:20px;font-size:7.5rem;animation:2.5s infinite bounce;display:block}.sticker-name{color:#2d3436;text-shadow:4px 4px #fff;letter-spacing:-1.5px;margin-bottom:10px;font-size:2.6rem;font-weight:900}.sticker-mbti{color:#fff;letter-spacing:4px;background:#2d3436;border-radius:50px;padding:8px 25px;font-size:1.4rem;font-weight:950;display:inline-block;box-shadow:6px 6px #0003}.bombs-grid{flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%;margin-bottom:35px;display:flex}.mini-bubble{white-space:nowrap;background:#fff;border:2.5px solid #2d3436;border-radius:15px;padding:8px 14px;font-size:.8rem;font-weight:800;box-shadow:4px 4px #0000001a}.mini-bubble:nth-child(2n){transform:rotate(3deg)}.mini-bubble:nth-child(odd){transform:rotate(-3deg)}.final-desc{color:#2d3436;word-break:keep-all;background:#fff;border:4px solid #2d3436;border-radius:30px;padding:30px;font-size:1.05rem;font-weight:800;line-height:1.8;box-shadow:8px 8px #0000001a}.btn-retry{color:#fff;cursor:pointer;background:#2d3436;border:none;border-radius:60px;width:100%;padding:24px;font-size:1.3rem;font-weight:900;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 15px 30px #0003}.btn-retry:hover{background:#ff7675;transform:scale(1.05)translateY(-5px)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes bounce{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.15)rotate(4deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.share-buttons{justify-content:center;margin-top:50px;padding-bottom:70px;display:flex}@media (width<=480px){.hero h1{font-size:2.2rem}.sticker-name{font-size:2rem}.sticker-emoji{font-size:5.5rem}.sticker-container{border-width:10px}}:root{--primary:#2ecc71;--primary-dark:#27ae60;--secondary:#e67e22;--bg-color:#f9fbf9;--text-color:#2c3e50;--text-light:#7f8c8d;--card-bg:#fff;--shadow:0 4px 6px #0000000d;--radius:12px;--font-main:"Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);line-height:1.6}.container{max-width:1000px;margin:0 auto;padding:0 20px}h1,h2,h3{font-weight:700;line-height:1.2}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;font-family:inherit;transition:all .2s}.btn{border-radius:var(--radius);padding:10px 20px;font-weight:600;display:inline-block}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-dark)}