@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap";
:root{--primary:#ff6b6b;--primary-dark:#ee5a5a;--accent:#ffa62b;--bg:#0f0f1a;--bg-card:#1a1a2e;--bg-card2:#16213e;--text:#f0f0f5;--text-muted:#9090aa;--border:#ffffff14;--shadow:0 8px 32px #0006;--radius:20px;--radius-sm:12px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Noto Sans KR,sans-serif;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.04)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.page-wrapper{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex;position:relative}.page-wrapper:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 60% at 20% 10%,#ff6b6b1f 0%,#0000 60%),radial-gradient(60% 40% at 80% 90%,#ffa62b1a 0%,#0000 60%);position:fixed;inset:0}.card{z-index:1;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:480px;box-shadow:var(--shadow);padding:32px 24px;animation:.45s cubic-bezier(.22,1,.36,1) both fadeInScale;position:relative}.landing-emoji{text-align:center;margin-bottom:16px;font-size:72px;animation:3s ease-in-out infinite float;display:block}.landing-title{text-align:center;background:linear-gradient(135deg,#ff6b6b,#ffa62b,#ff6b6b) 0 0/200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:1.75rem;font-weight:900;line-height:1.3;animation:3s linear infinite shimmer}.landing-subtitle{text-align:center;color:var(--text-muted);margin-bottom:28px;font-size:.9rem}.badge-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:32px;display:flex}.badge{color:#ff9e9e;background:#ff6b6b1f;border:1px solid #ff6b6b40;border-radius:100px;padding:4px 12px;font-size:.78rem;font-weight:500}.btn-primary{border-radius:var(--radius-sm);color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b6b,#ffa62b) 0 0/200% 200%;border:none;width:100%;padding:16px;font-family:Noto Sans KR,sans-serif;font-size:1.05rem;font-weight:700;transition:transform .18s,box-shadow .18s,opacity .18s;animation:4s infinite gradientShift;display:block;box-shadow:0 4px 20px #ff6b6b66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px #ff6b6b8c}.btn-primary:active{opacity:.9;transform:translateY(0)}.btn-secondary{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-muted);cursor:pointer;background:#ffffff0a;margin-top:12px;padding:14px;font-family:Noto Sans KR,sans-serif;font-size:.95rem;font-weight:500;transition:all .18s;display:block}.btn-secondary:hover{color:var(--text);background:#ffffff14;border-color:#ffffff2e}.progress-wrap{margin-bottom:28px}.progress-meta{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.progress-label{color:var(--text-muted);font-size:.8rem;font-weight:500}.progress-count{color:var(--primary);font-size:.85rem;font-weight:700}.progress-bar-bg{background:var(--border);border-radius:100px;width:100%;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#ff6b6b,#ffa62b);border-radius:100px;height:100%;transition:width .5s cubic-bezier(.22,1,.36,1)}.question-area{animation:.35s cubic-bezier(.22,1,.36,1) both fadeInUp}.question-number{color:var(--primary);background:#ff6b6b26;border-radius:100px;margin-bottom:12px;padding:3px 10px;font-size:.75rem;font-weight:700;display:inline-block}.question-text{color:var(--text);margin-bottom:24px;font-size:1.15rem;font-weight:700;line-height:1.5}.choices-list{flex-direction:column;gap:12px;display:flex}.choice-btn{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);text-align:left;cursor:pointer;background:#ffffff08;align-items:center;gap:12px;padding:16px 20px;font-family:Noto Sans KR,sans-serif;font-size:.95rem;font-weight:500;line-height:1.45;transition:all .22s;display:flex}.choice-btn:hover{background:#ff6b6b1a;border-color:#ff6b6b59;transform:translate(4px)}.choice-btn.selected{background:#ff6b6b33;border-color:#ff6b6b99;animation:.3s pulse}.choice-letter{width:28px;height:28px;color:var(--primary);background:#ff6b6b26;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.78rem;font-weight:700;display:flex}.loading-wrap{text-align:center;padding:16px 0}.loading-emoji{margin-bottom:16px;font-size:48px;animation:1.2s ease-in-out infinite pulse;display:block}.loading-text{margin-bottom:8px;font-size:1.1rem;font-weight:700}.loading-sub{color:var(--text-muted);margin-bottom:24px;font-size:.85rem}.loading-dots{justify-content:center;gap:6px;display:flex}.loading-dot{background:var(--primary);border-radius:50%;width:8px;height:8px;animation:1.2s ease-in-out infinite pulse}.loading-dot:nth-child(2){animation-delay:.2s}.loading-dot:nth-child(3){animation-delay:.4s}.result-page{flex-direction:column;align-items:center;min-height:100vh;padding:24px 16px 48px;display:flex;position:relative}.result-page:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 60% at 20% 10%,#ff6b6b1f 0%,#0000 60%),radial-gradient(60% 40% at 80% 90%,#ffa62b1a 0%,#0000 60%);position:fixed;inset:0}.result-card{z-index:1;width:100%;max-width:480px;position:relative}.result-header{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);margin-bottom:16px;padding:32px 24px;animation:.45s cubic-bezier(.22,1,.36,1) both fadeInScale}.result-emoji{margin-bottom:12px;font-size:64px;animation:3s ease-in-out infinite float;display:block}.result-type-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;font-size:.78rem;font-weight:700}.result-title{background:linear-gradient(135deg,#ff6b6b,#ffa62b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:4px;font-size:1.8rem;font-weight:900;line-height:1.2}.result-subtitle{color:var(--text-muted);margin-bottom:16px;font-size:.9rem}.result-type-badge{color:#ff9e9e;background:#ff6b6b26;border:1px solid #ff6b6b4d;border-radius:100px;padding:5px 16px;font-size:.85rem;font-weight:700;display:inline-block}.result-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;padding:24px;animation:.45s cubic-bezier(.22,1,.36,1) both fadeInUp}.result-section:nth-child(2){animation-delay:80ms}.result-section:nth-child(3){animation-delay:.16s}.result-section:nth-child(4){animation-delay:.24s}.result-section:nth-child(5){animation-delay:.32s}.section-title{color:var(--primary);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;margin-bottom:12px;font-size:.85rem;font-weight:700;display:flex}.section-body{color:var(--text);font-size:.95rem;line-height:1.7}.inner-voice-box{border-left:3px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:#ffb3b3;background:#ff6b6b14;padding:12px 16px;font-size:.93rem;font-style:italic;line-height:1.6}.guide-box{border-radius:var(--radius-sm);color:#ffd580;background:#ffa62b14;border:1px solid #ffa62b33;padding:14px 16px;font-size:.93rem;line-height:1.7}.result-actions{z-index:1;flex-direction:column;gap:10px;margin-top:4px;animation:.5s cubic-bezier(.22,1,.36,1) .4s both fadeInUp;display:flex;position:relative}.share-btn{border-radius:var(--radius-sm);color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b6b,#ffa62b);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:16px;font-family:Noto Sans KR,sans-serif;font-size:1rem;font-weight:700;transition:all .18s;display:flex;box-shadow:0 4px 20px #ff6b6b66}.share-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px #ff6b6b8c}.retry-btn{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-muted);cursor:pointer;background:#ffffff0a;justify-content:center;align-items:center;gap:8px;padding:14px;font-family:Noto Sans KR,sans-serif;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .18s;display:flex}.retry-btn:hover{color:var(--text);background:#ffffff14;border-color:#ffffff2e}.toast{border:1px solid var(--border);color:var(--text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;z-index:9999;white-space:nowrap;background:#1e1e32f2;border-radius:100px;padding:12px 24px;font-size:.9rem;font-weight:500;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;position:fixed;bottom:32px;left:50%;transform:translate(-50%)translateY(80px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.not-found{text-align:center}.not-found-emoji{margin-bottom:16px;font-size:56px;display:block}.not-found-title{margin-bottom:8px;font-size:1.3rem;font-weight:700}.not-found-desc{color:var(--text-muted);margin-bottom:24px;font-size:.9rem}@media (max-width:360px){.card{padding:24px 16px}.landing-title{font-size:1.5rem}.question-text{font-size:1rem}.result-title{font-size:1.5rem}}@media (min-width:600px){.landing-title{font-size:2rem}.question-text{font-size:1.2rem}}.pet-icons-row{justify-content:center;gap:12px;margin-bottom:16px;font-size:48px;display:flex}.pet-landing-icon{animation:3s ease-in-out infinite float;display:inline-block}.pet-landing-icon:nth-child(2){animation-delay:.4s}.select-label{text-align:center;color:var(--text-muted);margin-bottom:14px;font-size:.85rem;font-weight:500}.pet-select-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.pet-select-btn{border-radius:var(--radius);border:2px solid var(--border);cursor:pointer;background:#ffffff08;flex-direction:column;align-items:center;gap:6px;padding:20px 12px;font-family:Noto Sans KR,sans-serif;transition:all .22s cubic-bezier(.22,1,.36,1);display:flex}.pet-select-btn:hover{transform:translateY(-4px)}.pet-select-btn.dog{border-color:#ff6b6b4d}.pet-select-btn.dog:hover{background:#ff6b6b1a;border-color:#ff6b6b99;box-shadow:0 8px 24px #ff6b6b40}.pet-select-btn.cat{border-color:#a76aff4d}.pet-select-btn.cat:hover{background:#a76aff1a;border-color:#a76aff99;box-shadow:0 8px 24px #a76aff40}.pet-select-emoji{font-size:44px;line-height:1}.pet-select-name{color:var(--text);font-size:1rem;font-weight:700}.pet-select-desc{color:var(--text-muted);font-size:.7rem;font-weight:400}:root{--cat-primary:#a76aff;--cat-accent:#5ee7d4}.progress-bar-fill.cat{background:linear-gradient(90deg,#a76aff,#5ee7d4)}.choice-btn.cat:hover{background:#a76aff1a;border-color:#a76aff59}.choice-btn.cat.selected{background:#a76aff33;border-color:#a76aff99}.cat-result-page:before{background:radial-gradient(80% 60% at 20% 10%,#a76aff1f 0%,#0000 60%),radial-gradient(60% 40% at 80% 90%,#5ee7d41a 0%,#0000 60%)}.cat-header{border-color:#a76aff26}.cat-title{background:linear-gradient(135deg,#a76aff,#5ee7d4);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.cat-badge{color:#c9a0ff;background:#a76aff26;border-color:#a76aff4d}.cat-section-title{color:var(--cat-primary)}.cat-voice-box{border-left-color:var(--cat-primary);color:#c9a0ff;background:#a76aff14}.cat-guide-box{color:#93f0e6;background:#5ee7d414;border-color:#5ee7d433}