:root{--bg-color: #0f172a;--text-color: #f8fafc;--card-bg: rgba(15, 23, 42, .4);--card-border: rgba(255, 255, 255, .08);--primary: #8b5cf6;--primary-hover: #7c3aed;--secondary: #ec4899;--accent: #38bdf8;--font-main: "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", 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;min-height:100vh;margin:0;display:flex;justify-content:center;align-items:center;background-image:radial-gradient(circle at 15% 50%,rgba(139,92,246,.15),transparent 40%),radial-gradient(circle at 85% 30%,rgba(236,72,153,.15),transparent 40%);background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;max-width:500px;min-height:100vh;padding:24px;display:flex;flex-direction:column;justify-content:center}.container{width:100%;display:flex;flex-direction:column;align-items:center}.card{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:28px;border:1px solid var(--card-border);padding:2.5rem 2rem;width:100%;box-shadow:0 20px 40px #0006;animation:slideUp .6s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.card-image{width:100%;height:220px;object-fit:cover;border-radius:20px;margin-bottom:1.5rem;box-shadow:0 10px 25px #0000004d;background:#1e293b}.title{font-size:2.8rem;font-weight:800;margin-bottom:.5rem;background:linear-gradient(135deg,#a78bfa,#f472b6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;letter-spacing:-.03em;text-align:center}.subtitle{font-size:1.1rem;color:#94a3b8;margin-bottom:2.5rem;font-weight:400;word-break:keep-all;text-align:center}.story-text{font-size:1.05rem;margin-bottom:1.2rem;text-align:center;color:#cbd5e1;word-break:keep-all;line-height:1.6}.question-text{font-size:1.35rem;font-weight:700;margin-bottom:2rem;text-align:center;color:#fff;word-break:keep-all;letter-spacing:-.01em}.options-grid{display:flex;flex-direction:column;gap:.8rem;width:100%}.option-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:1.1rem 1.4rem;border-radius:18px;color:#f8fafc;font-size:1.05rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center;word-break:keep-all;line-height:1.4}.option-btn:hover{background:#8b5cf626;border-color:#8b5cf680;transform:translateY(-2px);box-shadow:0 4px 15px #8b5cf633}.option-btn:active{transform:translateY(1px)}.start-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;padding:1.2rem;font-size:1.2rem;font-weight:700;border-radius:50px;cursor:pointer;box-shadow:0 8px 25px #ec489966;transition:all .3s ease;font-family:inherit;width:100%;max-width:320px}.start-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px #ec489980;background:linear-gradient(135deg,var(--primary-hover),var(--secondary))}.start-btn:active{transform:translateY(1px)}.share-btn{background:#ffffff14;color:#fff;border:1px solid rgba(255,255,255,.15);padding:1.1rem 2rem;font-size:1.1rem;font-weight:600;border-radius:50px;cursor:pointer;transition:all .3s ease;font-family:inherit;margin-top:1.5rem;width:100%}.share-btn:hover{background:#ffffff26;border-color:#ffffff4d}.restart-btn{background:transparent;border:none;color:#94a3b8;padding:1rem;font-size:1rem;cursor:pointer;transition:all .3s;text-decoration:underline;margin-top:.5rem}.restart-btn:hover{color:#fff}.mbti-result{font-size:5rem;font-weight:900;margin:1.5rem 0;line-height:1;background:linear-gradient(to bottom right,#38bdf8,#8b5cf6,#ec4899);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 10px 40px rgba(139,92,246,.3);animation:scaleIn .8s cubic-bezier(.16,1,.3,1);letter-spacing:-.05em}.result-desc{font-size:1.25rem;color:#f1f5f9;margin-bottom:2rem;font-weight:500;word-break:keep-all}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:3rem 0}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:2rem}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:#0f172ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:14px 28px;border-radius:50px;font-size:1rem;font-weight:500;z-index:1000;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #00000080;animation:toastFadeOut 2.5s forwards;pointer-events:none}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toastFadeOut{0%{opacity:0;transform:translate(-50%,20px)}15%{opacity:1;transform:translate(-50%)}85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}