body{margin:0}:root{--primary: #f2f20d;--bg-light: #f8f8f5;--bg-dark: #222210;--white: #ffffff;--slate-900: #0f172a;--slate-600: #475569;--slate-400: #94a3b8;--slate-200: #e2e8f0;--border: #e2e8f0;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#f1f5f9;color:var(--slate-900);font-family:Spline Sans,Noto Sans KR,sans-serif;-webkit-font-smoothing:antialiased}.app-container{width:100%;max-width:430px;min-height:100vh;margin:0 auto;background-color:var(--bg-light);box-shadow:0 20px 25px -5px #0000001a;display:flex;flex-direction:column;position:relative;overflow-x:hidden}.app-content{flex:1;display:flex;flex-direction:column;padding-bottom:90px}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:sticky;top:0;background-color:var(--bg-light);z-index:50}.header-title{font-size:1.125rem;font-weight:700;letter-spacing:-.025em}.icon-btn{font-size:24px;cursor:pointer;padding:8px;border-radius:50%;transition:background-color .2s}.icon-btn:hover{background-color:#0000000d}.screen{display:none;flex:1;flex-direction:column;padding:0 24px}.screen.active{display:flex;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero-box{width:100%;aspect-ratio:16 / 10;background-color:#f2f20d1a;border:4px solid rgba(242,242,13,.2);border-radius:2rem;margin:16px 0 32px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.1),transparent);pointer-events:none;z-index:2}.hero-tag-wrap{position:absolute;bottom:20px;left:20px;z-index:3}.start-tag{background-color:var(--primary);color:var(--slate-900);font-size:.75rem;font-weight:700;padding:6px 16px;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em}.marquee-container{width:100%;height:100%;overflow:hidden;position:absolute;display:flex;align-items:center;z-index:1}.marquee-content{display:flex;gap:20px;animation:marquee 15s linear infinite}.marquee-content img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.main-title{font-size:2.25rem;font-weight:800;line-height:1.1;margin-bottom:16px;letter-spacing:-.025em}.highlight{color:#ff6b35}.start-desc{color:var(--slate-600);font-size:1.125rem;line-height:1.5;margin-bottom:32px}.meta-stats{display:flex;gap:12px;margin-bottom:40px}.stat-box{flex:1;background-color:#f2f20d26;padding:12px;border-radius:1.25rem;display:flex;flex-direction:column;align-items:center;gap:4px}.stat-box span:first-child{font-size:20px;color:var(--slate-600)}.stat-box span:last-child{font-size:.875rem;font-weight:700}.action-area{margin-top:auto;padding:24px 0}.start-btn{width:100%;background-color:var(--primary);color:var(--slate-900);border:none;border-radius:9999px;padding:20px;font-size:1.25rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 15px -3px #f2f20d4d}.start-btn:hover{transform:translateY(-2px)}.start-btn:active{transform:scale(.98)}.start-info{background:var(--white);padding:20px;border-radius:1.5rem;margin-bottom:16px;box-shadow:var(--shadow)}.start-info h3{font-size:1.125rem;font-weight:700;margin-bottom:8px}.start-info p{font-size:.875rem;color:var(--slate-600);line-height:1.6}.progress-section{padding:16px 0;display:flex;flex-direction:column;gap:12px}.progress-info{display:flex;justify-content:space-between;align-items:flex-end}.progress-label{font-weight:700;font-size:1rem}.progress-count{font-size:.875rem;color:var(--slate-600);font-weight:500}.progress-bar-track{height:12px;background-color:var(--slate-200);border-radius:9999px;overflow:hidden;border:1px solid var(--border)}.progress-bar-fill{height:100%;background-color:var(--primary);border-radius:9999px;transition:width .4s cubic-bezier(.4,0,.2,1)}.question-text{font-size:1.875rem;font-weight:700;line-height:1.2;margin:16px 0 24px}.options-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;padding-bottom:24px}.option-card{background:var(--white);border:2px solid transparent;border-radius:1.5rem;padding:16px;text-align:left;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;height:100%}.option-card:hover{border-color:var(--primary);transform:translateY(-2px)}.option-icon-box{width:100%;aspect-ratio:1;border-radius:1rem;display:flex;align-items:center;justify-content:center;overflow:hidden}.option-icon-box .material-symbols-outlined{font-size:48px;transition:transform .2s}.option-card:hover .material-symbols-outlined{transform:scale(1.1)}.option-title{font-weight:700;font-size:1rem;margin-top:4px}.option-sub{font-size:.75rem;color:var(--slate-600);margin-top:2px}.bg-orange-100{background-color:#ffedd5}.text-orange-500{color:#f97316}.bg-blue-100{background-color:#dbeafe}.text-blue-500{color:#3b82f6}.bg-green-100{background-color:#dcfce7}.text-green-500{color:#22c55e}.bg-yellow-100{background-color:#fef9c3}.text-yellow-500{color:#eab308}.bg-red-100{background-color:#fee2e2}.text-red-500{color:#ef4444}.bg-purple-100{background-color:#f3e8ff}.text-purple-500{color:#a855f7}.bg-pink-100{background-color:#fce7f3}.text-pink-500{color:#ec4899}.bg-slate-100{background-color:#f1f5f9}.text-slate-500{color:#64748b}.loading-screen{justify-content:center;align-items:center}.loading-content{text-align:center}.loading-ball{width:80px;height:80px;animation:spin 1s linear infinite;margin-bottom:24px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:1.5rem;font-weight:700;margin-bottom:8px}.loading-sub{color:var(--slate-600)}.result-screen{padding-top:24px}.result-header{text-align:center;margin-bottom:24px}.result-eyebrow{font-size:.875rem;font-weight:600;color:var(--slate-600);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}.result-main-title{font-size:2rem;font-weight:800}.result-card{background:var(--white);border-radius:2rem;padding:32px 24px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;text-align:center}.result-mon-wrap{width:180px;height:180px;margin:0 auto 20px}.result-mon{width:100%;height:100%;object-fit:contain}.result-badge-row{margin-bottom:12px}.result-type-badge{padding:6px 16px;border-radius:9999px;color:#fff;font-size:.75rem;font-weight:700;box-shadow:0 4px 12px #0000001a}.result-mon-name{font-size:2.25rem;font-weight:800;margin-bottom:4px}.result-mon-en{color:var(--slate-600);font-size:.875rem;letter-spacing:.05em;margin-bottom:20px}.result-divider{height:1px;background-color:var(--border);margin:20px 0}.result-desc-text{text-align:left;line-height:1.7;color:var(--slate-600)}.traits-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.trait-tag{background:#f1f5f9;padding:4px 12px;border-radius:9999px;font-size:.75rem;font-weight:600}.score-summary{display:flex;gap:12px;margin:24px 0}.score-chip{flex:1;background:var(--white);padding:12px;border-radius:1rem;text-align:center;box-shadow:var(--shadow)}.score-chip-val{display:block;font-size:1.25rem;font-weight:800;color:var(--slate-900)}.score-chip-label{font-size:.625rem;color:var(--slate-600);font-weight:700;text-transform:uppercase}.result-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}.share-btn{background:linear-gradient(135deg,#ff6b35,#ff9a3c);color:#fff;border:none;border-radius:1rem;padding:16px;font-size:1.125rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 10px 15px -3px #ff6b354d}.retry-btn{background:transparent;border:2px solid var(--border);color:var(--slate-600);border-radius:1rem;padding:16px;font-size:1rem;font-weight:600;cursor:pointer}.history-list{display:flex;flex-direction:column;gap:16px;margin-top:24px}.history-item{background:var(--white);padding:16px;border-radius:1.5rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px}.history-mon{width:60px;height:60px;object-fit:contain}.history-info{flex:1}.history-date{font-size:.75rem;color:var(--slate-400);margin-bottom:4px}.history-name{font-size:1.125rem;font-weight:700;color:var(--slate-900)}.history-type{font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:9999px;color:#fff;display:inline-block;margin-top:4px}.bottom-nav{position:fixed;bottom:0;width:100%;max-width:430px;background-color:var(--white);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:12px 16px 24px;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--slate-400);cursor:pointer;text-decoration:none}.nav-item.active{color:var(--slate-900)}.nav-item.active .material-symbols-outlined{color:var(--primary)}.nav-label{font-size:10px;font-weight:700}.footer{padding:32px 24px;text-align:center}.footer-links{font-size:.75rem;color:var(--slate-400);margin-bottom:8px}.footer-links span,.text-btn{cursor:pointer;text-decoration:underline;background:none;border:none;font-size:inherit;color:inherit;font-family:inherit}.copyright{font-size:.75rem;color:var(--slate-400)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.modal-content{background:var(--white);width:90%;max-width:380px;max-height:80vh;border-radius:1.5rem;padding:24px;position:relative;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;color:var(--slate-400);cursor:pointer}.modal-title{font-size:1.25rem;font-weight:700;margin-bottom:16px;color:var(--slate-900)}.modal-body{font-size:.875rem;line-height:1.6;color:var(--slate-600)}.modal-body p{margin-bottom:12px}.drawer-overlay{position:fixed;inset:0;background:#00000080;z-index:900;animation:fadeIn .2s ease-out}.drawer{position:fixed;top:0;bottom:0;width:280px;background:var(--white);z-index:950;padding:24px;box-shadow:var(--shadow-lg);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.drawer-left{left:0;transform:translate(-100%)}.drawer-left.open{transform:translate(0)}.drawer-right{right:0;transform:translate(100%)}.drawer-right.open{transform:translate(0)}.drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:12px}.drawer-header h2{font-size:1.25rem;font-weight:700}.drawer-menu{display:flex;flex-direction:column;gap:16px}.drawer-menu-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:var(--slate-600);cursor:pointer;transition:background-color .2s}.drawer-menu-item:hover{background-color:var(--slate-100);color:var(--slate-900)}.login-form{display:flex;flex-direction:column;gap:16px}.login-input{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;font-size:1rem}.login-btn{background:var(--slate-900);color:var(--white);padding:12px;border-radius:12px;font-weight:700;border:none;cursor:pointer}.confetti-piece{position:fixed;top:-20px;pointer-events:none;z-index:999;animation:confettiFall linear forwards}@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}