*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #FEE500;--primary-dark: #F2D600;--primary-text: #3A1D1D;--primary-light: #FFF8CC;--primary-bg: #FFFCE5;--bg: #f5f5f5;--card: #ffffff;--text: #333333;--text-secondary: #666666;--text-muted: #999999;--text-caption: #b5b5b5;--border: #eeeeee;--border-dark: #dddddd;--testo-color: #5A4800;--testo-light: #FFF8CC;--egen-color: #e86c9e;--egen-light: #fdf0f5;--radius: 8px;--radius-sm: 6px}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:Noto Sans KR,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100dvh;overflow-x:hidden}.app{max-width:460px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--card)}.app-header{position:sticky;top:0;z-index:100;display:flex;justify-content:flex-end;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--border)}.lang-toggle{background:none;border:1px solid var(--border-dark);border-radius:4px;padding:4px 10px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text-secondary)}.lang-toggle:active{background:var(--bg)}.app-main{flex:1;padding:0 16px 24px}.app-footer{padding:20px 16px;text-align:center;background:var(--bg);border-top:1px solid var(--border)}.app-footer p{font-size:11px;color:var(--text-caption);line-height:1.6}.page{display:flex;flex-direction:column;align-items:center;animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.btn-primary{width:100%;padding:15px 24px;background:var(--primary);color:var(--primary-text);border:none;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;transition:background .15s;margin-top:16px}.btn-primary:hover{background:var(--primary-dark)}.btn-primary:active{opacity:.9}.btn-primary:disabled{background:#ccc;cursor:not-allowed}.btn-secondary{width:100%;padding:14px 24px;background:var(--card);color:var(--primary-text);border:1px solid var(--primary);border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;margin-top:10px}.btn-secondary:hover{background:var(--primary-light)}.landing{padding-top:32px;text-align:center}.landing-badge{display:inline-block;background:var(--primary);color:var(--primary-text);padding:4px 10px;border-radius:2px;font-size:11px;font-weight:700;letter-spacing:.5px;margin-bottom:20px}.landing-title{font-size:26px;font-weight:800;color:var(--primary-text);margin-bottom:6px;letter-spacing:-.5px}.landing-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:28px}.landing-hero{background:var(--primary-bg);border-radius:var(--radius);padding:28px 20px 24px;margin-bottom:24px;width:100%}.landing-emoji{font-size:52px;margin-bottom:14px;display:inline-block}.landing-desc{font-size:16px;font-weight:600;line-height:1.7;white-space:pre-line;color:var(--text)}.how-it-works{width:100%;margin-bottom:24px}.how-it-works h3{font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:10px}.steps{display:flex;gap:8px}.step{flex:1;background:var(--bg);border-radius:var(--radius-sm);padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--text-secondary)}.step-num{width:22px;height:22px;background:var(--primary);color:var(--primary-text);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.test-count{margin-top:16px;font-size:13px;color:var(--text-muted)}.count-number{font-weight:700;color:var(--primary);margin-right:2px}.privacy-note{margin-top:12px;font-size:11px;color:var(--text-caption)}.gender-page{padding-top:60px;text-align:center}.gender-page h2{font-size:20px;font-weight:700;margin-bottom:6px}.gender-note{font-size:13px;color:var(--text-muted);margin-bottom:36px}.gender-buttons{display:flex;gap:12px;width:100%}.gender-btn{flex:1;background:var(--card);border:1px solid var(--border-dark);border-radius:var(--radius);padding:30px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:all .15s;font-size:15px;font-weight:600;color:var(--text)}.gender-btn:active{background:var(--bg)}.gender-btn.male:hover,.gender-btn.female:hover{border-color:var(--primary);background:var(--primary-bg)}.gender-emoji{font-size:40px}.camera-page{padding-top:16px;text-align:center}.camera-page h2{font-size:18px;font-weight:700;margin-bottom:6px}.camera-instruction{font-size:13px;color:var(--text-secondary);margin-bottom:16px}.camera-container{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#1a1a1a}.camera-video{width:100%;height:100%;object-fit:cover}.camera-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.hand-guide{width:150px;height:150px;border:2px dashed rgba(255,255,255,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:guidePulse 2s infinite}@keyframes guidePulse{0%,to{border-color:#fff3}50%{border-color:#ffffff80}}.guide-icon{font-size:36px;opacity:.5}.camera-sub{font-size:12px;color:var(--text-muted);margin-top:10px}.capture-btn{margin-top:16px}.divider{display:flex;align-items:center;width:100%;margin:14px 0;gap:14px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.divider span{font-size:12px;color:var(--text-muted);font-weight:500}.file-input-hidden{display:none}.upload-hero{margin:24px 0 8px}.upload-emoji{font-size:44px;display:block;margin-bottom:10px}.upload-notice{font-size:16px;font-weight:700;margin-bottom:4px}.upload-notice-sub{font-size:13px;color:var(--text-secondary)}.analyzing-page{padding-top:80px;text-align:center}.analyzing-spinner{margin-bottom:24px}.spinner{width:44px;height:44px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.analyzing-page h2{font-size:18px;font-weight:700;margin-bottom:4px}.analyzing-page p{color:var(--text-secondary);font-size:14px;margin-bottom:28px}.analyzing-steps{display:flex;flex-direction:column;gap:14px;align-items:flex-start}.a-step{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-muted);animation:stepFade .4s ease forwards;opacity:0}.a-step:nth-child(1){animation-delay:0s}.a-step:nth-child(2){animation-delay:.5s}.a-step:nth-child(3){animation-delay:1s}@keyframes stepFade{to{opacity:1}}.a-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:dotPulse 1s infinite}@keyframes dotPulse{0%,to{opacity:.3}50%{opacity:1}}.result-page{padding-top:24px;text-align:center}.result-page h2{font-size:18px;font-weight:700;margin-bottom:16px}.result-card{width:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 20px;position:relative}.result-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0}.result-card.testo:before{background:var(--primary)}.result-card.egen:before{background:var(--egen-color)}.result-emoji{font-size:52px;margin-bottom:8px}.result-label{font-size:13px;color:var(--text-muted);margin-bottom:2px}.result-type{font-size:30px;font-weight:800;margin-bottom:20px;letter-spacing:-.5px}.result-card.testo .result-type{color:var(--primary)}.result-card.egen .result-type{color:var(--egen-color)}.result-stats{display:flex;flex-direction:column;margin-bottom:14px;border-top:1px solid var(--border)}.stat{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.stat-label{font-size:13px;color:var(--text-secondary)}.stat-value{font-size:14px;font-weight:700;color:var(--text)}.confidence-bar{width:100%;height:4px;background:var(--border);border-radius:2px;margin-bottom:20px;overflow:hidden}.confidence-fill{height:100%;border-radius:2px;transition:width .8s ease}.result-card.testo .confidence-fill{background:var(--primary)}.result-card.egen .confidence-fill{background:var(--egen-color)}.result-traits h3{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:10px;letter-spacing:.3px}.traits-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.trait-tag{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500}.result-card.testo .trait-tag{background:var(--testo-light);color:var(--testo-color)}.result-card.egen .trait-tag{background:var(--egen-light);color:var(--egen-color)}.share-section{width:100%;margin-top:20px}.share-section h3{font-size:14px;font-weight:700;margin-bottom:10px}.share-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.share-btn{padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border-dark);background:var(--card);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;color:var(--text)}.share-btn:active{background:var(--bg)}.share-btn.native{grid-column:1 / -1;background:var(--primary);color:var(--primary-text);border:none;font-size:15px;padding:14px}.share-btn.native:active{background:var(--primary-dark)}.scientific-note{width:100%;margin-top:20px;background:var(--bg);border-radius:var(--radius-sm);padding:16px;text-align:left}.scientific-note h4{font-size:13px;font-weight:700;margin-bottom:6px}.scientific-note p{font-size:12px;color:var(--text-secondary);line-height:1.7}.disclaimer{margin-top:20px;font-size:11px;color:var(--text-caption);line-height:1.6;white-space:pre-line}.error-page{padding-top:80px;text-align:center}.error-icon{font-size:48px;margin-bottom:14px}.error-page h2{font-size:18px;font-weight:700;margin-bottom:6px}.error-page p{color:var(--text-secondary);font-size:14px;margin-bottom:24px}.ad-banner{width:100%;min-height:100px;margin:16px 0;border-radius:var(--radius-sm);overflow:hidden}.ad-slot{width:100%;min-height:100px;margin:20px 0}.info-section{width:100%;margin-top:28px}.info-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:8px;text-align:left}.info-card h3{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--text)}.info-card p,.info-card li{font-size:13px;color:var(--text-secondary);line-height:1.8}.info-card ul{padding-left:18px;margin-top:6px}.info-card li{margin-bottom:2px}.info-toggle{width:100%;background:var(--primary);border:none;border-radius:var(--radius-sm);padding:14px;font-size:15px;font-weight:700;color:var(--primary-text);cursor:pointer;margin-bottom:8px;transition:background .15s}.info-toggle:hover{background:var(--primary-dark)}.footer-nav{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:12px}.footer-nav button{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:2px 4px}.footer-nav button:hover{color:var(--text-secondary);text-decoration:underline}.footer-divider{color:var(--text-caption);font-size:11px}.content-page{padding-top:24px;text-align:left}.content-title{font-size:22px;font-weight:800;color:var(--text);margin-bottom:4px;text-align:center}.content-date{font-size:12px;color:var(--text-muted);text-align:center;margin-bottom:24px}.content-intro{font-size:15px;color:var(--text-secondary);text-align:center;margin-bottom:24px;line-height:1.7}.content-body{width:100%}.content-body h2{font-size:15px;font-weight:700;color:var(--text);margin-top:24px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}.content-body p{font-size:13px;color:var(--text-secondary);line-height:1.8;margin-bottom:4px}.content-body p.pre-line{white-space:pre-line}.content-contact{margin-top:20px;font-size:13px;color:var(--text-muted)}.research-sections{width:100%;display:flex;flex-direction:column;gap:6px}.research-section{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.research-section.open{border-color:var(--primary)}.research-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--bg);border:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--text);text-align:left;transition:background .15s}.research-toggle:hover{background:var(--primary-bg)}.research-section.open .research-toggle{background:var(--primary-bg);border-bottom:1px solid var(--border)}.research-arrow{font-size:11px;color:var(--text-muted);flex-shrink:0;margin-left:8px}.research-content{padding:16px;animation:fadeIn .2s ease}.research-content p{font-size:13px;color:var(--text-secondary);line-height:1.9;white-space:pre-line}.btn-research{width:100%;padding:14px 24px;background:var(--bg);color:var(--text-secondary);border:1px solid var(--border-dark);border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;margin-top:24px}.btn-research:hover{background:var(--primary-bg);border-color:var(--primary);color:var(--text)}@media(max-width:380px){.landing-title{font-size:22px}.result-type{font-size:26px}}@media(prefers-color-scheme:dark){:root{--primary: #FEE500;--primary-dark: #F2D600;--primary-light: #3d3520;--primary-bg: #2a2510;--primary-text: #3A1D1D;--bg: #0a0a0a;--card: #141414;--text: #efefef;--text-secondary: #a0a0a0;--text-muted: #666;--text-caption: #555;--border: #222;--border-dark: #333;--testo-color: #b47cd8;--testo-light: rgba(155, 89, 182, .15);--egen-color: #ee6c9e;--egen-light: rgba(238, 108, 158, .12)}.lang-toggle{color:var(--text-secondary)}.gender-btn,.share-btn{color:var(--text)}}