:root{--bg-primary: #070913;--bg-secondary: #0d1226;--bg-card: rgba(18, 24, 48, .65);--bg-card-hover: rgba(28, 37, 72, .75);--accent-cyan: #00f2fe;--accent-violet: #7f00ff;--accent-purple: #e100ff;--accent-gold: #f6d365;--accent-emerald: #00f2fe;--text-main: #f0f4fd;--text-muted: #94a3b8;--text-dim: #64748b;--border-glass: rgba(255, 255, 255, .12);--border-glow: rgba(0, 242, 254, .4);--glow-cyan: 0 0 25px rgba(0, 242, 254, .35);--glow-purple: 0 0 25px rgba(225, 0, 255, .35);--glow-gold: 0 0 25px rgba(246, 211, 101, .35);--shadow-card: 0 20px 40px rgba(0, 0, 0, .5);--font-main: "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;--font-oriental: "Gowun Batang", serif;--font-title: "Cinzel", serif;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: .35s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-primary);background-image:radial-gradient(circle at 15% 20%,rgba(127,0,255,.15) 0%,transparent 40%),radial-gradient(circle at 85% 75%,rgba(0,242,254,.12) 0%,transparent 45%),radial-gradient(circle at 50% 50%,rgba(13,18,38,.95) 0%,var(--bg-primary) 100%);background-attachment:fixed;color:var(--text-main);min-height:100vh;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#00f2fe4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00f2fe99}.app-container{max-width:1200px;margin:0 auto;padding:24px 20px 60px;display:flex;flex-direction:column;min-height:100vh}.main-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:20px;margin-bottom:30px;box-shadow:var(--shadow-card);gap:16px;flex-wrap:wrap}.left-nav-group{display:flex;align-items:center;gap:10px}.nav-btn{background:#ffffff14;border:1px solid var(--border-glass);color:var(--text-main);padding:8px 16px;border-radius:14px;font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:var(--transition-fast)}.nav-btn:hover{background:#00f2fe26;border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:var(--glow-cyan);transform:translateY(-1px)}.home-btn{background:linear-gradient(135deg,#f6d36526,#ff780026);border-color:#f6d36566;color:var(--accent-gold)}.home-btn:hover{border-color:var(--accent-gold);color:#fff;box-shadow:var(--glow-gold)}.logo-area{display:flex;align-items:center;gap:14px}.logo-icon{font-size:2.2rem;filter:drop-shadow(0 0 10px rgba(0,242,254,.6));animation:floatIcon 3s ease-in-out infinite alternate}@keyframes floatIcon{0%{transform:translateY(0) rotate(0)}to{transform:translateY(-5px) rotate(5deg)}}.logo-text h1{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,var(--text-main) 30%,var(--accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:8px}.logo-text .sub-title{font-family:var(--font-title);font-size:1rem;color:var(--accent-gold);-webkit-text-fill-color:var(--accent-gold)}.logo-text .tagline{font-size:.82rem;color:var(--text-muted)}.header-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.lang-selector-box{display:flex;align-items:center;gap:6px;background:#ffffff14;border:1px solid var(--border-glass);padding:6px 12px;border-radius:30px;font-size:.82rem;transition:var(--transition-fast)}.lang-selector-box:hover{border-color:var(--accent-cyan);background:#ffffff24}.lang-icon{font-size:1rem}.lang-select{background:transparent;border:none;color:var(--text-main);font-family:var(--font-main);font-size:.85rem;font-weight:600;cursor:pointer;outline:none}.lang-select option{background:#0d1226;color:#f0f4fd}.privacy-badge{background:#00f2fe1a;border:1px solid rgba(0,242,254,.3);color:var(--accent-cyan);padding:6px 14px;border-radius:30px;font-size:.82rem;font-weight:500}.sound-toggle-btn{background:#ffffff0d;border:1px solid var(--border-glass);color:var(--text-main);padding:6px 14px;border-radius:30px;cursor:pointer;font-size:.82rem;transition:var(--transition-fast)}.sound-toggle-btn:hover{background:#ffffff26;border-color:var(--accent-cyan)}.menu-drawer-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10000;display:flex;justify-content:center;align-items:center;padding:20px;animation:fadeIn .25s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.menu-drawer-content{width:100%;max-width:860px;max-height:88vh;overflow-y:auto;border:1px solid var(--border-glow);box-shadow:0 0 50px #00f2fe40;background:#0d1226f2;padding:32px}.menu-drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;border-bottom:1px solid var(--border-glass);padding-bottom:16px}.drawer-title-group{display:flex;align-items:center;gap:12px}.drawer-icon{font-size:1.8rem}.drawer-title-group h2{font-size:1.5rem;font-weight:800;color:var(--accent-cyan)}.close-menu-btn{background:#ffffff1a;border:1px solid var(--border-glass);color:var(--text-main);width:38px;height:38px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center}.close-menu-btn:hover{background:#ff3c3c4d;border-color:#ff4d4d;color:#fff}.menu-categories-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.category-block{background:#121830b3;border:1px solid var(--border-glass);border-radius:18px;padding:20px;transition:var(--transition-fast)}.category-block:hover{border-color:#00f2fe4d}.category-block.full-width{grid-column:span 2}.cat-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;border-bottom:1px dashed rgba(255,255,255,.1);padding-bottom:8px}.cat-icon{font-size:1.3rem}.cat-header h3{font-size:1.1rem;color:var(--accent-gold)}.service-link-list{list-style:none;display:flex;flex-direction:column;gap:10px}.service-link-list.grid-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}.service-link-list a{color:var(--text-main);text-decoration:none;font-size:.92rem;padding:8px 12px;border-radius:10px;background:#ffffff0a;border:1px solid transparent;display:block;transition:var(--transition-fast)}.service-link-list a:hover{background:#00f2fe1f;border-color:var(--accent-cyan);color:var(--accent-cyan);transform:translate(4px)}.active-app-link{background:#00f2fe26!important;border-color:var(--accent-cyan)!important;color:var(--accent-cyan)!important;font-weight:700}.glass-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-glass);border-radius:24px;padding:32px;box-shadow:var(--shadow-card);position:relative;overflow:hidden}.input-section{text-align:center;max-width:860px;margin:0 auto 30px;width:100%}.section-intro h2{font-family:var(--font-oriental);font-size:1.8rem;color:var(--text-main);margin-bottom:10px}.section-intro p{color:var(--text-muted);font-size:.95rem;margin-bottom:28px}.mode-tabs{display:flex;justify-content:center;gap:12px;margin-bottom:24px}.tab-btn{background:#ffffff0d;border:1px solid var(--border-glass);color:var(--text-muted);padding:12px 28px;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-fast)}.tab-btn:hover{color:var(--text-main);border-color:#00f2fe66}.tab-btn.active{background:linear-gradient(135deg,#00f2fe33,#7f00ff33);border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.mode-container{display:none}.mode-container.active{display:block}.dropzone{border:2px dashed rgba(0,242,254,.3);border-radius:20px;padding:48px 24px;background:#0d122666;cursor:pointer;position:relative;transition:var(--transition-normal)}.dropzone:hover,.dropzone.drag-over{border-color:var(--accent-cyan);background:#00f2fe0d;box-shadow:var(--glow-cyan)}.file-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload-icon{font-size:3.5rem;margin-bottom:12px;filter:drop-shadow(0 0 12px rgba(0,242,254,.5))}.dropzone-content h3{font-size:1.2rem;font-weight:700;margin-bottom:6px}.dropzone-content .hint{font-size:.85rem;color:var(--text-dim);margin-bottom:20px}.btn-primary{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet));color:#fff;border:none;padding:12px 28px;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:var(--transition-fast);box-shadow:0 4px 15px #00f2fe4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow-cyan)}.btn-secondary{background:#ffffff14;border:1px solid var(--border-glass);color:var(--text-main);padding:12px 24px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-fast)}.btn-secondary:hover{background:#ffffff26;border-color:var(--text-main)}.btn-outline{background:transparent;border:1px solid var(--border-glass);color:var(--text-muted);padding:12px 24px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-fast)}.btn-outline:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}.large-btn{padding:16px 32px;font-size:1.05rem}.sample-bar{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:.9rem;color:var(--text-muted)}.sample-items{display:flex;gap:8px}.sample-btn{background:#ffffff0f;border:1px solid var(--border-glass);color:var(--text-main);padding:6px 14px;border-radius:20px;font-size:.85rem;cursor:pointer;transition:var(--transition-fast)}.sample-btn:hover{border-color:var(--accent-gold);color:var(--accent-gold)}.webcam-wrapper{position:relative;width:100%;max-width:480px;height:360px;margin:0 auto 20px;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--border-glass)}#webcamVideo{width:100%;height:100%;object-fit:cover}.webcam-overlay-guide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:#0000004d}.face-guide-ellipse{width:200px;height:260px;border:2px dashed var(--accent-cyan);border-radius:50%;box-shadow:0 0 20px #00f2fe66;animation:pulseGuide 2s infinite ease-in-out}@keyframes pulseGuide{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.03);opacity:1}}.webcam-overlay-guide p{margin-top:14px;font-size:.85rem;color:var(--accent-cyan)}.webcam-controls{display:flex;justify-content:center;gap:16px}.scan-section{text-align:center;max-width:760px;margin:0 auto 30px}.scan-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}.scan-pulse{width:12px;height:12px;background:var(--accent-cyan);border-radius:50%;box-shadow:var(--glow-cyan);animation:blinkPulse 1s infinite}@keyframes blinkPulse{0%,to{opacity:.2}50%{opacity:1}}.canvas-wrapper{position:relative;width:100%;max-width:500px;height:400px;margin:0 auto 24px;border-radius:20px;overflow:hidden;background:#060913;border:1px solid var(--border-glow);box-shadow:var(--glow-cyan)}#scanCanvas{width:100%;height:100%;object-fit:contain}.laser-scanner{position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--accent-cyan),#fff,var(--accent-cyan),transparent);box-shadow:0 0 15px var(--accent-cyan),0 0 25px var(--accent-cyan);animation:scanLaser 2.2s infinite ease-in-out}@keyframes scanLaser{0%{top:0%;opacity:.8}50%{top:96%;opacity:1}to{top:0%;opacity:.8}}.scan-corner{position:absolute;width:20px;height:20px;border-color:var(--accent-cyan);border-style:solid}.scan-corner.top-left{top:12px;left:12px;border-width:3px 0 0 3px}.scan-corner.top-right{top:12px;right:12px;border-width:3px 3px 0 0}.scan-corner.bottom-left{bottom:12px;left:12px;border-width:0 0 3px 3px}.scan-corner.bottom-right{bottom:12px;right:12px;border-width:0 3px 3px 0}.scan-metrics-hud{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.metric-item{background:#0d1226b3;border:1px solid var(--border-glass);padding:10px 8px;border-radius:12px;display:flex;flex-direction:column;gap:4px}.metric-item .label{font-size:.75rem;color:var(--text-dim)}.metric-item .val{font-size:.95rem;font-weight:700;color:var(--text-main)}.neon-text{color:var(--accent-cyan)!important;text-shadow:0 0 8px rgba(0,242,254,.5)}.highlight{color:var(--accent-gold)!important}.progress-bar-container{width:100%;height:8px;background:#ffffff1a;border-radius:10px;overflow:hidden;margin-bottom:12px}.progress-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-violet),var(--accent-gold));transition:width .3s linear}.scan-status-text{font-size:.9rem;color:var(--text-muted)}.result-section{display:flex;flex-direction:column;gap:30px}.result-hero{border:1px solid var(--border-glow)}.hero-header{text-align:center;margin-bottom:30px}.result-badge{background:linear-gradient(135deg,#f6d36533,#ff780033);border:1px solid var(--accent-gold);color:var(--accent-gold);padding:6px 16px;border-radius:30px;font-size:.85rem;font-weight:700;display:inline-block;margin-bottom:12px}.result-title{font-family:var(--font-oriental);font-size:2.2rem;color:var(--accent-gold);margin-bottom:8px;text-shadow:0 0 20px rgba(246,211,101,.3)}.result-summary{color:var(--text-muted);font-size:1.05rem;max-width:760px;margin:0 auto}.hero-body{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.scanned-image-box{position:relative;width:100%;max-width:420px;height:360px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--border-glass);background:#000;box-shadow:0 10px 30px #0009}#resultCanvas{width:100%;height:100%;object-fit:contain}.overlay-toggle{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#070913d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 16px;border-radius:20px;border:1px solid var(--border-glass);font-size:.8rem;color:var(--text-main);white-space:nowrap}.score-box{display:flex;flex-direction:column;align-items:center;justify-content:center}.score-gauge{position:relative;width:220px;height:180px;margin-bottom:24px}.gauge-svg{width:100%;height:100%}.gauge-bg{stroke:#ffffff1a}.gauge-fill{stroke:url(#scoreGrad);stroke:var(--accent-cyan);stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(.1,1,.1,1)}.score-text{position:absolute;bottom:10px;left:50%;transform:translate(-50%);text-align:center}.score-number{font-size:3.5rem;font-weight:900;color:var(--accent-cyan);line-height:1;text-shadow:var(--glow-cyan)}.score-unit{font-size:1.2rem;color:var(--text-muted);margin-left:2px}.score-label{display:block;font-size:.8rem;color:var(--text-dim);margin-top:4px}.trait-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.tag{padding:8px 16px;border-radius:12px;font-size:.88rem;font-weight:600}.animal-tag{background:linear-gradient(135deg,#e100ff33,#7f00ff33);border:1px solid var(--accent-purple);color:var(--accent-purple)}.trait-tag{background:#ffffff0f;border:1px solid var(--border-glass);color:var(--text-main)}.result-tabs-card{padding:24px}.result-nav-tabs{display:flex;border-bottom:1px solid var(--border-glass);margin-bottom:24px;gap:8px;overflow-x:auto}.result-tab-btn{background:transparent;border:none;border-bottom:3px solid transparent;color:var(--text-muted);padding:12px 20px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-fast);white-space:nowrap}.result-tab-btn:hover{color:var(--text-main)}.result-tab-btn.active{border-bottom-color:var(--accent-cyan);color:var(--accent-cyan)}.result-tab-content{display:none}.result-tab-content.active{display:block}.samjeong-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.samjeong-card{background:#0d122680;border:1px solid var(--border-glass);border-radius:18px;padding:24px;transition:var(--transition-normal)}.samjeong-card:hover{border-color:#00f2fe4d;transform:translateY(-3px)}.highlight-card{border-color:var(--accent-cyan);background:#00f2fe0d;box-shadow:var(--glow-cyan)}.samjeong-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}.samjeong-icon{font-size:1.5rem}.samjeong-header h3{font-size:1.1rem;font-weight:700;flex:1}.ratio-badge{font-size:.75rem;background:#ffffff1a;padding:4px 8px;border-radius:6px;color:var(--text-muted)}.samjeong-card h4{color:var(--accent-gold);font-size:1.05rem;margin-bottom:8px}.samjeong-card p{color:var(--text-muted);font-size:.9rem;line-height:1.6}.ogwan-list{display:flex;flex-direction:column;gap:16px}.ogwan-item{display:flex;align-items:center;gap:20px;background:#0d122680;border:1px solid var(--border-glass);padding:18px 24px;border-radius:16px}.ogwan-icon{font-size:2rem;width:48px;height:48px;background:#ffffff0d;border-radius:14px;display:flex;align-items:center;justify-content:center}.ogwan-info{flex:1}.ogwan-info h4{font-size:1.05rem;color:var(--text-main);margin-bottom:4px}.ogwan-info p{font-size:.88rem;color:var(--text-muted)}.ogwan-score{font-size:1.2rem;font-weight:800;color:var(--accent-cyan)}.fortunes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.fortune-box{background:#0d122680;border:1px solid var(--border-glass);border-radius:18px;padding:22px}.f-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.f-icon{font-size:1.4rem}.f-header h4{flex:1;font-size:1.05rem}.f-score{font-size:1.1rem;font-weight:800;color:var(--accent-cyan)}.f-progress{height:6px;background:#ffffff1a;border-radius:10px;overflow:hidden;margin-bottom:12px}.f-bar{height:100%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-violet));border-radius:10px}.fortune-box p{font-size:.88rem;color:var(--text-muted)}.advice-container{display:grid;grid-template-columns:1fr 1fr;gap:20px}.advice-card{padding:24px;border-radius:18px;border:1px solid var(--border-glass)}.good-advice{background:#00f2fe0d;border-color:#00f2fe4d}.warning-advice{background:#ff78000d;border-color:#ff78004d}.advice-card h4{font-size:1.1rem;margin-bottom:16px}.good-advice h4{color:var(--accent-cyan)}.warning-advice h4{color:var(--accent-gold)}.advice-card ul{padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:.92rem;color:var(--text-muted)}.action-bar{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:10px}.main-footer{text-align:center;margin-top:40px;padding-top:20px;border-top:1px solid var(--border-glass);font-size:.85rem;color:var(--text-dim)}.main-footer .disclaimer{margin-top:6px;font-size:.78rem;color:#94a3b899}.hidden{display:none!important}@media (max-width: 900px){.hero-body,.samjeong-grid,.fortunes-grid,.advice-container{grid-template-columns:1fr}.scan-metrics-hud{grid-template-columns:1fr 1fr}.menu-categories-grid{grid-template-columns:1fr}.category-block.full-width{grid-column:span 1}.service-link-list.grid-links{grid-template-columns:1fr}}@media (max-width: 600px){.main-header{flex-direction:column;align-items:flex-start;gap:12px}.result-title{font-size:1.7rem}.action-bar{flex-direction:column}.action-bar button{width:100%}}