Update index.html

index.html

@@ -6,821 +6,216 @@
 <title>Proto-AGI FACE — AI 성형 시뮬레이터</title>
 <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
 <style>
-*{margin:0;padding:0;box-sizing:border-box;}
-:root{
-  --bg:#f8f9fc;--bg-deep:#f0f2f8;--surface:#ffffff;--surface-alt:#f5f6fa;
-  --border:#e2e5f0;--border-hover:#c7cce0;
-  --shadow-sm:0 1px 3px rgba(15,23,42,0.04),0 1px 2px rgba(15,23,42,0.06);
-  --shadow:0 4px 16px rgba(15,23,42,0.06),0 1px 3px rgba(15,23,42,0.08);
-  --shadow-lg:0 12px 40px rgba(15,23,42,0.08),0 4px 12px rgba(15,23,42,0.06);
-  --text:#0f172a;--text-sec:#475569;--text-muted:#94a3b8;
-  --accent:#6366f1;--accent-light:#818cf8;--accent-bg:rgba(99,102,241,0.06);
-  --teal:#0d9488;--teal-bg:rgba(13,148,136,0.06);
-  --rose:#e11d48;--rose-bg:rgba(225,29,72,0.06);
-  --amber:#d97706;--amber-bg:rgba(217,119,6,0.06);
-  --green:#16a34a;
-  --radius:16px;--radius-sm:10px;--radius-xs:6px;
-  --font-display:'Sora','Noto Sans KR',sans-serif;
-  --font-body:'Noto Sans KR','Sora',sans-serif;
-  --font-mono:'JetBrains Mono',monospace;
-  --tr:0.25s cubic-bezier(0.4,0,0.2,1);
-}
-html{scroll-behavior:smooth;}
-body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
-::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:transparent;}
-::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.2);border-radius:10px;}
-::selection{background:rgba(99,102,241,0.15);}
-
-.bg-pattern{position:fixed;inset:0;z-index:0;pointer-events:none;
-  background:radial-gradient(ellipse 80% 50% at 20% 10%,rgba(99,102,241,0.04),transparent 50%),
-  radial-gradient(ellipse 60% 40% at 80% 90%,rgba(13,148,136,0.03),transparent 50%);}
-
-.app-wrapper{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;max-width:960px;margin:0 auto;padding:24px 24px 48px;}
-
-/* HEADER */
-.header{text-align:center;padding:40px 0 28px;animation:fadeIn .8s ease-out;}
-@keyframes fadeIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
-.header-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:5px;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
-.header-title{font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;margin-bottom:12px;}
-.gradient-text{background:linear-gradient(135deg,#6366f1,#e11d48 40%,#0d9488 70%,#6366f1);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s ease-in-out infinite;}
-@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
-.header-sub{font-size:13px;color:var(--text-sec);line-height:1.7;max-width:600px;margin:0 auto 16px;}
-.header-sub b{color:var(--text);font-weight:600;}
-.pill-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;animation:fadeUp .8s .2s ease-out both;}
-@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
-.pill{padding:4px 12px;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--text-muted);transition:var(--tr);box-shadow:var(--shadow-sm);}
-.pill:hover{border-color:var(--accent);color:var(--accent);}
-
-/* NAV */
-.nav{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:4px;margin-bottom:24px;position:sticky;top:12px;z-index:100;box-shadow:var(--shadow);animation:fadeUp .8s .3s ease-out both;}
-.nav-item{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text-muted);transition:var(--tr);user-select:none;}
-.nav-item:hover{color:var(--text-sec);background:var(--surface-alt);}
-.nav-item.active{color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 4px 16px rgba(99,102,241,0.3),inset 0 1px 0 rgba(255,255,255,0.15);}
-.nav-icon{font-size:14px;}
-
-/* PANELS */
-.panel{display:none;animation:panelIn .4s ease-out;}.panel.active{display:block;}
-@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
-
-/* CARD */
-.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:20px;box-shadow:var(--shadow-sm);transition:all .3s;}
-.card:hover{box-shadow:var(--shadow);border-color:var(--border-hover);}
-.card-header{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
-.card-icon{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
-.card-icon.purple{background:var(--accent-bg);border:1px solid rgba(99,102,241,0.15);}
-.card-icon.teal{background:var(--teal-bg);border:1px solid rgba(13,148,136,0.15);}
-.card-icon.rose{background:var(--rose-bg);border:1px solid rgba(225,29,72,0.15);}
-.card-icon.amber{background:var(--amber-bg);border:1px solid rgba(217,119,6,0.15);}
-.card-title{font-family:var(--font-display);font-size:17px;font-weight:700;}
-.card-desc{font-size:12.5px;color:var(--text-muted);line-height:1.65;margin-bottom:18px;padding-left:50px;}
-
-/* FORM */
-.form-row{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
-.form-group{flex:1;min-width:180px;}
-.form-label{display:block;font-size:11px;font-weight:600;color:var(--text-sec);margin-bottom:6px;letter-spacing:0.3px;}
-select,input[type=password]{width:100%;padding:10px 14px;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-family:var(--font-body);font-size:13px;outline:none;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;}
-select:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,0.1);}
-textarea{width:100%;min-height:80px;padding:12px 14px;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-family:var(--font-body);font-size:13px;line-height:1.7;resize:vertical;outline:none;transition:border-color .3s,box-shadow .3s;}
-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,0.1);}
-textarea::placeholder{color:var(--text-muted);font-size:12px;}
-
-/* UPLOAD */
-.upload-zone{position:relative;border:2px dashed var(--border);border-radius:var(--radius);padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s;background:var(--surface-alt);overflow:hidden;}
-.upload-zone:hover{border-color:var(--accent);background:rgba(99,102,241,0.03);}
-.upload-zone.has-image{border-style:solid;border-color:var(--teal);background:#fff;padding:8px;}
-.upload-icon{font-size:36px;margin-bottom:8px;opacity:.6;}
-.upload-text{font-size:12px;color:var(--text-muted);}
-.upload-text b{color:var(--text-sec);}
-.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
-.upload-zone img{width:100%;max-height:350px;object-fit:contain;border-radius:var(--radius-sm);}
-
-/* BUTTONS */
-.btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:18px;}
-.btn{padding:12px 24px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:13px;transition:all .25s;letter-spacing:0.2px;}
-.btn-primary{background:linear-gradient(135deg,#e11d48,#be123c);color:#fff;box-shadow:0 4px 16px rgba(225,29,72,0.25);width:100%;padding:14px;}
-.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(225,29,72,0.35);}
-.btn-primary:active{transform:translateY(0);}.btn-primary:disabled{opacity:0.45;cursor:not-allowed;transform:none!important;}
-
-/* RADIO GROUP */
-.radio-group{display:flex;gap:6px;flex-wrap:wrap;}
-.radio-group label{display:flex;align-items:center;gap:5px;padding:7px 14px;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:20px;cursor:pointer;font-size:11.5px;font-weight:500;color:var(--text-sec);transition:all .2s;}
-.radio-group input{display:none;}
-.radio-group input:checked+label{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:700;box-shadow:0 2px 8px rgba(99,102,241,0.15);}
-
-/* ═══════════════════════════════════════
-   FACE SCAN ANIMATION — 얼굴 마스크 레이저
-   ═══════════════════════════════════════ */
-.scan-overlay{display:none;position:relative;padding:60px 20px;text-align:center;background:linear-gradient(180deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);border-radius:var(--radius);overflow:hidden;margin-bottom:20px;}
-.scan-overlay.active{display:block;animation:scanFadeIn .6s ease-out;}
-@keyframes scanFadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
-
-/* Particle field background */
-.scan-particles{position:absolute;inset:0;overflow:hidden;}
-.scan-particles span{position:absolute;width:2px;height:2px;background:#818cf8;border-radius:50%;opacity:0;animation:particleDrift 4s linear infinite;}
-@keyframes particleDrift{
-  0%{opacity:0;transform:translateY(100%) scale(0);}
-  20%{opacity:.6;}
-  80%{opacity:.4;}
-  100%{opacity:0;transform:translateY(-100%) scale(1.5);}
-}
-
-/* SVG Face mask container */
-.face-container{position:relative;width:220px;height:280px;margin:0 auto 24px;}
-
-/* The face mask SVG */
-.face-mask{width:100%;height:100%;filter:drop-shadow(0 0 20px rgba(99,102,241,0.3));}
-.face-outline{fill:none;stroke:#818cf8;stroke-width:1.5;stroke-linecap:round;opacity:0;animation:drawFace 3s ease-out forwards;}
-@keyframes drawFace{
-  0%{stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0;}
-  10%{opacity:1;}
-  100%{stroke-dashoffset:0;opacity:1;}
-}
-
-/* Horizontal laser scan line */
-.laser-line{position:absolute;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,#e11d48,#f97316,#e11d48,transparent);box-shadow:0 0 15px 3px rgba(225,29,72,0.4),0 0 40px 8px rgba(225,29,72,0.15);border-radius:2px;animation:laserScan 2.8s ease-in-out infinite;z-index:5;}
-@keyframes laserScan{
-  0%{top:8%;opacity:0;}
-  5%{opacity:1;}
-  50%{top:88%;opacity:1;}
-  55%{opacity:0;}
-  100%{top:8%;opacity:0;}
-}
-
-/* Grid overlay */
-.scan-grid{position:absolute;inset:0;background:
-  repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(99,102,241,0.06) 19px,rgba(99,102,241,0.06) 20px),
-  repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(99,102,241,0.06) 19px,rgba(99,102,241,0.06) 20px);
-  animation:gridPulse 3s ease-in-out infinite;}
-@keyframes gridPulse{0%,100%{opacity:.3}50%{opacity:.7}}
-
-/* Corner brackets */
-.scan-corner{position:absolute;width:24px;height:24px;z-index:6;}
-.scan-corner::before,.scan-corner::after{content:'';position:absolute;background:#0d9488;border-radius:1px;}
-.scan-corner.tl{top:0;left:0;}.scan-corner.tr{top:0;right:0;}.scan-corner.bl{bottom:0;left:0;}.scan-corner.br{bottom:0;right:0;}
-.scan-corner.tl::before,.scan-corner.tr::before{top:0;height:2px;width:16px;}
-.scan-corner.tl::after,.scan-corner.bl::after{left:0;width:2px;height:16px;}
-.scan-corner.tr::before{right:0;left:auto;}.scan-corner.tr::after{right:0;width:2px;height:16px;}
-.scan-corner.bl::before{bottom:0;top:auto;height:2px;width:16px;}.scan-corner.bl::after{bottom:0;top:auto;}
-.scan-corner.br::before{bottom:0;right:0;top:auto;left:auto;height:2px;width:16px;}.scan-corner.br::after{right:0;bottom:0;top:auto;width:2px;height:16px;}
-
-/* Data readout */
-.scan-data{position:absolute;font-family:var(--font-mono);font-size:9px;color:#818cf8;opacity:0;animation:dataFlash 4s ease-in-out infinite;white-space:nowrap;}
-@keyframes dataFlash{0%,100%{opacity:0;}20%{opacity:.8;}40%{opacity:.3;}60%{opacity:.9;}80%{opacity:0;}}
-
-/* Status text */
-.scan-status{position:relative;z-index:10;}
-.scan-status-main{font-family:var(--font-display);font-size:16px;font-weight:700;color:#e2e8f0;margin-bottom:6px;animation:breathe 2s ease-in-out infinite;}
-@keyframes breathe{0%,100%{opacity:1}50%{opacity:.5}}
-.scan-status-sub{font-family:var(--font-mono);font-size:11px;color:#818cf8;letter-spacing:1px;}
-.scan-progress-bar{width:60%;margin:14px auto 0;height:3px;background:rgba(99,102,241,0.15);border-radius:3px;overflow:hidden;}
-.scan-progress-fill{height:100%;background:linear-gradient(90deg,#6366f1,#e11d48,#0d9488);background-size:200% 100%;border-radius:3px;animation:progressShimmer 2s linear infinite;transition:width 0.5s ease;}
-@keyframes progressShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
-
-/* Pulsing rings around face */
-.pulse-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid rgba(99,102,241,0.3);border-radius:50%;animation:pulseExpand 3s ease-out infinite;}
-@keyframes pulseExpand{0%{width:100px;height:130px;opacity:.6;}100%{width:280px;height:360px;opacity:0;}}
-
-/* ═══ RESULTS ═══ */
-.result-section{margin-bottom:20px;animation:rIn .5s ease-out;}
-@keyframes rIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
-.result-image-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
-.result-image-wrap img{width:100%;display:block;}
-.result-label{padding:12px 16px;font-size:12px;font-weight:600;color:var(--text-sec);border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;}
-.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
-.result-grid .result-image-wrap img{max-height:300px;object-fit:contain;}
-
-/* Before/After slider container */
-.ba-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
-.ba-container .ba-label{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
-
-/* Report */
-.report-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:20px;}
-.report-card h1,.report-card h2,.report-card h3{font-family:var(--font-display);margin-top:16px;margin-bottom:8px;color:var(--text);}
-.report-card h1{font-size:18px;}.report-card h2{font-size:15px;}.report-card h3{font-size:13px;}
-.report-card p,.report-card li{font-size:13px;line-height:1.8;color:var(--text-sec);}
-.report-card blockquote{border-left:3px solid var(--accent);padding:8px 14px;background:var(--accent-bg);border-radius:0 var(--radius-xs) var(--radius-xs) 0;margin:12px 0;font-size:12px;color:var(--accent);}
-.report-card hr{border:none;border-top:1px solid var(--border);margin:16px 0;}
-
-/* Error */
-.error-msg{padding:16px 20px;text-align:center;color:var(--rose);font-size:13px;background:var(--surface);border:1px solid rgba(225,29,72,0.2);border-radius:var(--radius);margin-bottom:16px;}
-.error-msg:empty{display:none;}
-
-/* HERO */
-.hero-card{background:linear-gradient(135deg,#4f46e5,#6366f1 30%,#e11d48 70%,#be123c);border-radius:var(--radius);padding:32px 28px;margin-bottom:20px;position:relative;overflow:hidden;animation:fadeUp .6s ease-out;}
-.hero-card::before{content:'';position:absolute;top:-60%;right:-20%;width:50%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.08),transparent 60%);transform:rotate(20deg);}
-.hero-title{font-family:var(--font-display);font-size:22px;font-weight:900;color:#fff;position:relative;}
-.hero-sub{font-size:11.5px;color:rgba(255,255,255,0.8);line-height:1.7;margin-top:6px;position:relative;}
-.hero-badge{display:inline-block;background:rgba(255,255,255,0.2);backdrop-filter:blur(8px);color:#fff;font-size:10px;font-weight:800;padding:5px 14px;border-radius:20px;margin-top:10px;animation:cmpPulse 2.5s ease-in-out infinite;position:relative;border:1px solid rgba(255,255,255,0.25);}
-@keyframes cmpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
-
-/* SOMA stats */
-.soma-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:20px;animation:fadeUp .8s .1s ease-out both;}
-.soma-stat{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 6px;text-align:center;transition:all .3s;box-shadow:var(--shadow-sm);}
-.soma-stat:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow);}
-.soma-stat-icon{font-size:20px;margin-bottom:4px;}
-.soma-stat-label{font-size:8.5px;color:var(--text-muted);font-weight:600;line-height:1.3;}
-
-/* FOOTER */
-.footer{text-align:center;margin-top:48px;padding:24px 0;border-top:1px solid var(--border);}
-.footer-brand{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:4px;}
-.footer-dev{font-size:11px;color:var(--text-muted);margin-bottom:6px;}
-.footer-dev a{color:var(--accent);text-decoration:none;font-weight:600;}
-.footer-line{width:40px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--rose),transparent);margin:10px auto;border-radius:2px;opacity:0.4;}
-.footer-tech{font-family:var(--font-mono);font-size:9px;color:var(--text-muted);opacity:0.6;letter-spacing:1px;}
-
-/* API Key toggle */
-.key-toggle{font-size:11px;color:var(--accent);cursor:pointer;font-weight:600;margin-bottom:12px;display:inline-flex;align-items:center;gap:4px;}
-.key-toggle:hover{text-decoration:underline;}
-.key-section{display:none;margin-bottom:14px;padding:16px;background:var(--surface-alt);border-radius:var(--radius-sm);border:1px solid var(--border);}
-.key-section.open{display:block;}
-
-/* Pipeline indicator */
-.pipeline{display:flex;align-items:center;gap:0;margin:14px 0;flex-wrap:wrap;justify-content:center;}
-.pipeline-step{display:flex;align-items:center;gap:4px;padding:5px 10px;background:var(--surface-alt);border:1px solid var(--border);border-radius:16px;font-size:9.5px;font-weight:600;color:var(--text-muted);transition:all .3s;}
-.pipeline-step.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);}
-.pipeline-step.done{background:rgba(13,148,136,0.08);border-color:var(--teal);color:var(--teal);}
-.pipeline-arrow{color:var(--border);font-size:12px;margin:0 2px;}
-
-/* Responsive */
-@media(max-width:640px){
-  .app-wrapper{padding:12px 12px 32px;}.header{padding:24px 0 16px;}.header-title{font-size:32px;}
-  .nav{flex-wrap:wrap;position:static;}.nav-item{font-size:10.5px;padding:10px 4px;}
-  .card{padding:20px 16px;}.card-desc{padding-left:0;margin-top:8px;}
-  .form-row{flex-direction:column;gap:10px;}.form-group{min-width:100%;}
-  .soma-stats{grid-template-columns:repeat(3,1fr);}.hero-title{font-size:18px;}
-  .result-grid{grid-template-columns:1fr;}
-  .face-container{width:160px;height:210px;}
-}
+*{margin:0;padding:0;box-sizing:border-box}
+:root{--bg:#f8f9fc;--surface:#fff;--surface-alt:#f5f6fa;--border:#e2e5f0;--border-hover:#c7cce0;
+--shadow-sm:0 1px 3px rgba(15,23,42,.04),0 1px 2px rgba(15,23,42,.06);--shadow:0 4px 16px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
+--text:#0f172a;--text-sec:#475569;--text-muted:#94a3b8;--accent:#6366f1;--teal:#0d9488;--rose:#e11d48;--pink:#ec4899;--amber:#d97706;
+--radius:16px;--radius-sm:10px;--radius-xs:6px;
+--fd:'Sora','Noto Sans KR',sans-serif;--fb:'Noto Sans KR','Sora',sans-serif;--fm:'JetBrains Mono',monospace;--tr:.25s cubic-bezier(.4,0,.2,1)}
+html{scroll-behavior:smooth}body{font-family:var(--fb);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
+::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:rgba(99,102,241,.2);border-radius:10px}::selection{background:rgba(99,102,241,.15)}
+.bg-p{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 50% at 20% 10%,rgba(99,102,241,.04),transparent 50%),radial-gradient(ellipse 60% 40% at 80% 90%,rgba(13,148,136,.03),transparent 50%)}
+.wrap{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:24px 24px 48px}
+.hdr{text-align:center;padding:28px 0 16px;animation:fi .8s ease-out}
+@keyframes fi{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
+.hdr-eye{font-family:var(--fm);font-size:10px;font-weight:600;letter-spacing:5px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
+.hdr-t{font-family:var(--fd);font-size:40px;font-weight:800;letter-spacing:-1.5px;margin-bottom:8px}
+.gt{background:linear-gradient(135deg,#6366f1,#e11d48 40%,#0d9488 70%,#6366f1);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:sh 6s ease-in-out infinite}
+@keyframes sh{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
+.pills{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;animation:fu .8s .2s ease-out both}
+@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+.pill{padding:3px 10px;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-family:var(--fm);font-size:9px;font-weight:500;color:var(--text-muted);box-shadow:var(--shadow-sm)}
+.nav{display:flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:4px;margin-bottom:18px;position:sticky;top:12px;z-index:100;box-shadow:var(--shadow);animation:fu .8s .3s ease-out both}
+.ni{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 4px;border-radius:var(--radius-sm);cursor:pointer;font-size:11.5px;font-weight:600;color:var(--text-muted);transition:var(--tr);user-select:none}
+.ni:hover{color:var(--text-sec);background:var(--surface-alt)}
+.ni.a{color:#fff;box-shadow:0 4px 16px rgba(99,102,241,.3)}
+.ni.a[data-t="face"]{background:linear-gradient(135deg,#3b82f6,#2563eb)}.ni.a[data-t="physio"]{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.ni.a[data-t="compat"]{background:linear-gradient(135deg,#ec4899,#db2777)}.ni.a[data-t="sim"]{background:linear-gradient(135deg,#e11d48,#be123c)}
+.pnl{display:none;animation:pi .4s ease-out}.pnl.a{display:block}@keyframes pi{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:14px;box-shadow:var(--shadow-sm);transition:all .3s}
+.card:hover{box-shadow:var(--shadow);border-color:var(--border-hover)}
+.ch{display:flex;align-items:center;gap:10px;margin-bottom:12px}.ci{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
+.ci.bl{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.15)}.ci.pu{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.15)}.ci.pk{background:rgba(236,72,153,.06);border:1px solid rgba(236,72,153,.15)}.ci.ro{background:rgba(225,29,72,.06);border:1px solid rgba(225,29,72,.15)}
+.ct{font-family:var(--fd);font-size:15px;font-weight:700}
+.fl{display:block;font-size:10.5px;font-weight:600;color:var(--text-sec);margin-bottom:4px}.fr{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}.fg{flex:1;min-width:140px}
+select,input[type=password]{width:100%;padding:8px 11px;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-family:var(--fb);font-size:12px;outline:none;transition:border-color .3s}
+select:focus,input:focus{border-color:var(--accent)}
+textarea{width:100%;min-height:60px;padding:8px 11px;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-family:var(--fb);font-size:12px;line-height:1.6;resize:vertical;outline:none}textarea:focus{border-color:var(--accent)}textarea::placeholder{color:var(--text-muted);font-size:11px}
+.uz{position:relative;border:2px dashed var(--border);border-radius:var(--radius);padding:28px 14px;text-align:center;cursor:pointer;transition:all .3s;background:var(--surface-alt)}
+.uz:hover{border-color:var(--accent);background:rgba(99,102,241,.03)}.uz.hi{border-style:solid;border-color:var(--teal);background:#fff;padding:6px}
+.uz input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.uz img{width:100%;max-height:280px;object-fit:contain;border-radius:var(--radius-sm)}
+.uzi{font-size:26px;margin-bottom:4px;opacity:.6}.uzt{font-size:10.5px;color:var(--text-muted)}.uzt b{color:var(--text-sec)}
+.uzs{padding:18px 10px}.uzs .uzi{font-size:20px;margin-bottom:2px}.uzs img{max-height:180px}
+.btn{padding:11px 20px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--fb);font-weight:600;font-size:12.5px;transition:all .25s;width:100%;margin-top:10px}
+.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.btn:hover{transform:translateY(-2px)}
+.bb{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 4px 16px rgba(59,130,246,.25)}
+.bp{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;box-shadow:0 4px 16px rgba(139,92,246,.25)}
+.bk{background:linear-gradient(135deg,#ec4899,#db2777);color:#fff;box-shadow:0 4px 16px rgba(236,72,153,.25)}
+.br{background:linear-gradient(135deg,#e11d48,#be123c);color:#fff;box-shadow:0 4px 16px rgba(225,29,72,.25)}
+.rg{display:flex;gap:4px;flex-wrap:wrap}.rg label{display:flex;align-items:center;gap:3px;padding:5px 10px;background:var(--surface-alt);border:1.5px solid var(--border);border-radius:20px;cursor:pointer;font-size:10.5px;font-weight:500;color:var(--text-sec);transition:all .2s}
+.rg input{display:none}.rg input:checked+label{background:rgba(99,102,241,.06);border-color:var(--accent);color:var(--accent);font-weight:700}
+.kt{font-size:10px;color:var(--accent);cursor:pointer;font-weight:600;margin-bottom:8px;display:inline-flex;align-items:center;gap:3px}.kt:hover{text-decoration:underline}
+.ks{display:none;margin-bottom:10px;padding:12px;background:var(--surface-alt);border-radius:var(--radius-sm);border:1px solid var(--border)}.ks.o{display:block}
+/* Loader */
+.ld{display:none;text-align:center;padding:36px 16px}.ld.a{display:block}
+.lr{width:38px;height:38px;border:3px solid rgba(99,102,241,.12);border-top-color:var(--accent);border-radius:50%;animation:sp .9s linear infinite;margin:0 auto 10px;position:relative}
+.lr::after{content:'';position:absolute;inset:4px;border:2px solid transparent;border-top-color:var(--teal);border-radius:50%;animation:sp 1.4s linear infinite reverse}
+@keyframes sp{to{transform:rotate(360deg)}}.lt{font-size:12px;color:var(--text-sec);animation:br 2s ease-in-out infinite}@keyframes br{0%,100%{opacity:1}50%{opacity:.5}}
+/* Scan */
+.sco{display:none;position:relative;padding:44px 14px;text-align:center;background:linear-gradient(180deg,#0f172a,#1e1b4b 50%,#0f172a);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}.sco.a{display:block;animation:sci .5s ease-out}
+@keyframes sci{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
+.sp{position:absolute;inset:0;overflow:hidden}.sp span{position:absolute;width:2px;height:2px;background:#818cf8;border-radius:50%;opacity:0;animation:pd 4s linear infinite}
+@keyframes pd{0%{opacity:0;transform:translateY(100%) scale(0)}20%{opacity:.5}80%{opacity:.3}100%{opacity:0;transform:translateY(-100%) scale(1.5)}}
+.fc{position:relative;width:160px;height:210px;margin:0 auto 16px}
+.fm{width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(99,102,241,.3))}
+.fo{fill:none;stroke:#818cf8;stroke-width:1.5;stroke-linecap:round;opacity:0;animation:df 3s ease-out forwards}
+@keyframes df{0%{stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0}10%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
+.ll{position:absolute;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,#e11d48,#f97316,#e11d48,transparent);box-shadow:0 0 15px 3px rgba(225,29,72,.4);border-radius:2px;animation:ls 2.8s ease-in-out infinite;z-index:5}
+@keyframes ls{0%{top:8%;opacity:0}5%{opacity:1}50%{top:88%;opacity:1}55%{opacity:0}100%{top:8%;opacity:0}}
+.sg{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(99,102,241,.05) 19px,rgba(99,102,241,.05) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(99,102,241,.05) 19px,rgba(99,102,241,.05) 20px);animation:gp 3s ease-in-out infinite}@keyframes gp{0%,100%{opacity:.3}50%{opacity:.7}}
+.sc{position:absolute;width:18px;height:18px;z-index:6}.sc::before,.sc::after{content:'';position:absolute;background:#0d9488;border-radius:1px}
+.sc.tl{top:0;left:0}.sc.tr{top:0;right:0}.sc.bl{bottom:0;left:0}.sc.br{bottom:0;right:0}
+.sc.tl::before,.sc.tr::before{top:0;height:2px;width:12px}.sc.tl::after,.sc.bl::after{left:0;width:2px;height:12px}
+.sc.tr::before{right:0;left:auto}.sc.tr::after{right:0;width:2px;height:12px}.sc.bl::before{bottom:0;top:auto;height:2px;width:12px}.sc.bl::after{bottom:0;top:auto}
+.sc.br::before{bottom:0;right:0;top:auto;left:auto;height:2px;width:12px}.sc.br::after{right:0;bottom:0;top:auto;width:2px;height:12px}
+.pr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid rgba(99,102,241,.2);border-radius:50%;animation:pe 3s ease-out infinite}
+@keyframes pe{0%{width:70px;height:95px;opacity:.5}100%{width:220px;height:290px;opacity:0}}
+.sd{position:absolute;font-family:var(--fm);font-size:7.5px;color:#818cf8;opacity:0;animation:dfl 4s ease-in-out infinite;white-space:nowrap}
+@keyframes dfl{0%,100%{opacity:0}20%{opacity:.7}60%{opacity:.8}80%{opacity:0}}
+.ssm{font-family:var(--fd);font-size:13px;font-weight:700;color:#e2e8f0;margin-bottom:3px;animation:br 2s ease-in-out infinite}
+.sss{font-family:var(--fm);font-size:9px;color:#818cf8;letter-spacing:1px}
+.spb{width:50%;margin:8px auto 0;height:3px;background:rgba(99,102,241,.15);border-radius:3px;overflow:hidden}
+.spf{height:100%;background:linear-gradient(90deg,#6366f1,#e11d48,#0d9488);background-size:200% 100%;border-radius:3px;animation:ps 2s linear infinite;transition:width .5s ease}
+@keyframes ps{0%{background-position:100% 0}100%{background-position:-100% 0}}
+/* Results */
+.ra{margin-top:14px;animation:ri .5s ease-out}@keyframes ri{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.rh{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);font-size:12.5px;line-height:1.9;color:var(--text-sec);margin-top:10px}
+.rh:empty{display:none}.rh h1,.rh h2,.rh h3{font-family:var(--fd);color:var(--text);margin:12px 0 5px}.rh h1{font-size:16px}.rh h2{font-size:13.5px}.rh h3{font-size:12px}
+.rh blockquote{border-left:3px solid var(--accent);padding:5px 10px;background:rgba(99,102,241,.06);border-radius:0 var(--radius-xs) var(--radius-xs) 0;margin:8px 0;font-size:11px;color:var(--accent)}
+.rh hr{border:none;border-top:1px solid var(--border);margin:12px 0}.rh li{margin-left:14px}
+.riw{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px}.riw img{width:100%;display:block}
+.ril{padding:8px 12px;font-size:10.5px;font-weight:600;color:var(--text-sec);border-top:1px solid var(--border)}
+.rgg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.em{padding:12px;text-align:center;color:var(--rose);font-size:11.5px;background:var(--surface);border:1px solid rgba(225,29,72,.2);border-radius:var(--radius);margin-bottom:10px}.em:empty{display:none}
+.rv:empty{display:none}
+.ft{text-align:center;margin-top:36px;padding:18px 0;border-top:1px solid var(--border)}.ftb{font-family:var(--fd);font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:3px}
+.ftd{font-size:10px;color:var(--text-muted)}.ftd a{color:var(--accent);text-decoration:none;font-weight:600}
+.ftl{width:40px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--rose),transparent);margin:6px auto;border-radius:2px;opacity:.4}
+.ftt{font-family:var(--fm);font-size:8px;color:var(--text-muted);opacity:.5;letter-spacing:1px}
+@media(max-width:640px){.wrap{padding:12px 12px 32px}.hdr{padding:16px 0 10px}.hdr-t{font-size:28px}.nav{flex-wrap:wrap;position:static}.ni{font-size:10px;padding:8px 3px}.card{padding:16px 12px}.fr{flex-direction:column}.rgg{grid-template-columns:1fr}.fc{width:120px;height:160px}}
 </style>
 </head>
 <body>
-<div class="bg-pattern"></div>
-<div class="app-wrapper">
-
-<!-- HEADER -->
-<header class="header">
-  <div class="header-eyebrow">SOMA Multi-Agent System</div>
-  <h1 class="header-title"><span class="gradient-text">Proto-AGI FACE</span></h1>
-  <p class="header-sub"><b>5 AI 에이전트 협업</b> · <b>성형 시뮬레이션</b> · <b>관상 분석</b> · <b>궁합 분석</b> · <b>Before/After</b></p>
-  <div class="pill-row">
-    <span class="pill" style="background:linear-gradient(135deg,rgba(225,29,72,0.08),rgba(249,115,22,0.08));border-color:rgba(225,29,72,0.25);color:#e11d48;font-weight:700;">🏥 VIDRAFT</span>
-    <span class="pill">🩺 의사 AI</span><span class="pill">🔮 관상 AI</span>
-    <span class="pill">💡 창발 AI</span><span class="pill">⚖️ 비평 AI</span><span class="pill">🎯 감독 AI</span>
+<div class="bg-p"></div>
+<div class="wrap">
+<header class="hdr">
+  <div class="hdr-eye">SOMA Multi-Agent System</div>
+  <h1 class="hdr-t"><span class="gt">Proto-AGI FACE</span></h1>
+  <div class="pills">
+    <span class="pill" style="background:linear-gradient(135deg,rgba(225,29,72,.08),rgba(249,115,22,.08));border-color:rgba(225,29,72,.25);color:#e11d48;font-weight:700">🏥 VIDRAFT</span>
+    <span class="pill">🩺 의사</span><span class="pill">🔮 관상</span><span class="pill">💡 창발</span><span class="pill">⚖️ 비평</span><span class="pill">🎯 감독</span>
   </div>
 </header>
-
-<!-- NAV -->
 <nav class="nav">
-  <div class="nav-item active" data-tab="simulate" onclick="switchTab('simulate')"><span class="nav-icon">✨</span><span>시뮬레이션</span></div>
-  <div class="nav-item" data-tab="soma" onclick="switchTab('soma')"><span class="nav-icon">🧠</span><span>SOMA 시스템</span></div>
-  <div class="nav-item" data-tab="guide" onclick="switchTab('guide')"><span class="nav-icon">📖</span><span>사용법</span></div>
+  <div class="ni a" data-t="face" onclick="st('face')">🔍 얼굴분석</div>
+  <div class="ni" data-t="physio" onclick="st('physio')">🔮 관상</div>
+  <div class="ni" data-t="compat" onclick="st('compat')">💑 궁합</div>
+  <div class="ni" data-t="sim" onclick="st('sim')">✨ 시뮬레이션</div>
 </nav>
-
-<!-- ═══ 시뮬레이션 탭 ═══ -->
-<div class="panel active" id="panel-simulate">
-
-  <!-- Hero -->
-  <div class="hero-card">
-    <div class="hero-title">🏥 AI 성형 시뮬레이션</div>
-    <div class="hero-sub">SOMA 파이프라인: 5개 AI 에이전트가 협업하여<br>의학적 분석 → 프롬프트 최적화 → 이미지 생성 → 품질 평가 → 리포트 작성</div>
-    <div class="hero-badge">🔬 Nano Banana 2 Edit × SOMA 5-Agent</div>
-  </div>
-
-  <!-- SOMA Agent Stats -->
-  <div class="soma-stats">
-    <div class="soma-stat"><div class="soma-stat-icon">🩺</div><div class="soma-stat-label">의사 AI<br>얼굴 분석</div></div>
-    <div class="soma-stat"><div class="soma-stat-icon">💡</div><div class="soma-stat-label">창발 AI<br>프롬프트</div></div>
-    <div class="soma-stat"><div class="soma-stat-icon">🎨</div><div class="soma-stat-label">이미지<br>생성 (1K)</div></div>
-    <div class="soma-stat"><div class="soma-stat-icon">⚖️</div><div class="soma-stat-label">비평 AI<br>품질 평가</div></div>
-    <div class="soma-stat"><div class="soma-stat-icon">🎯</div><div class="soma-stat-label">감독 AI<br>종합 리포트</div></div>
-  </div>
-
-  <!-- Input Card -->
-  <div class="card">
-    <div class="card-header"><div class="card-icon rose">🏥</div><div class="card-title">시술 시뮬레이션</div></div>
-    <div class="card-desc">얼굴 사진을 업로드하고, 원하는 시술을 선택하세요. SOMA 5-Agent가 분석부터 리포트까지 자동 수행합니다.</div>
-
-    <!-- API Keys -->
-    <div class="key-toggle" onclick="toggleKeys()">🔑 API Keys 설정 ▾</div>
-    <div class="key-section" id="key-section">
-      <div class="form-row">
-        <div class="form-group">
-          <div class="form-label">FAL API Key (이미지 생성)</div>
-          <input type="password" id="fal-key" placeholder="fal_... (환경변수 FAL_KEY 우선)">
-        </div>
-        <div class="form-group">
-          <div class="form-label">Fireworks API Key (VLM 분석)</div>
-          <input type="password" id="fw-key" placeholder="fw_... (환경변수 FIREWORKS_API_KEY 우선)">
-        </div>
-      </div>
-    </div>
-
-    <!-- Upload -->
-    <div class="upload-zone" id="upload-zone" onclick="document.getElementById('file-input').click()">
-      <div id="upload-placeholder">
-        <div class="upload-icon">🖼️</div>
-        <div class="upload-text"><b>얼굴 사진 업로드</b><br>클릭 또는 드래그 · 정면, 균일 조명 권장</div>
-      </div>
-      <img id="preview-img" style="display:none">
-      <input type="file" id="file-input" accept="image/*" style="display:none" onchange="handleFile(this)">
-    </div>
-
-    <!-- Procedure selection -->
-    <div class="form-row" style="margin-top:16px;">
-      <div class="form-group" style="flex:2;">
-        <div class="form-label">🏥 시술 프리셋</div>
-        <select id="preset-select">
-          <option value="없음 (직접 입력)">없음 (직접 입력)</option>
-          <option value="👁️ 자연유착 쌍꺼풀">👁️ 자연유착 쌍꺼풀</option>
-          <option value="👁️ 절개 쌍꺼풀">👁️ 절개 쌍꺼풀</option>
-          <option value="👃 코끝 성형">👃 코끝 성형</option>
-          <option value="👃 콧대 성형">👃 콧대 성형</option>
-          <option value="🦷 사각턱 축소">🦷 사각턱 축소</option>
-          <option value="💉 팔자주름 필러">💉 팔자주름 필러</option>
-          <option value="💉 이마 보톡스">💉 이마 보톡스</option>
-          <option value="💋 입술 필러">💋 입술 필러</option>
-          <option value="🏥 눈+코 동시">🏥 눈+코 동시</option>
-          <option value="🏥 풀페이스 리프팅">🏥 풀페이스 리프팅</option>
-          <option value="✨ 동안 스타일">✨ 동안 스타일</option>
-        </select>
-      </div>
-      <div class="form-group" style="flex:1;">
-        <div class="form-label">📐 비율</div>
-        <select id="aspect-ratio">
-          <option value="auto">Auto</option>
-          <option value="1:1">1:1</option>
-          <option value="3:4">3:4</option>
-          <option value="4:3">4:3</option>
-          <option value="9:16">9:16</option>
-          <option value="16:9">16:9</option>
-        </select>
-      </div>
-    </div>
-
-    <!-- Custom prompt -->
-    <div class="form-group">
-      <div class="form-label">✏️ 추가 지시 (선택)</div>
-      <textarea id="custom-prompt" placeholder="프리셋 외 추가 요청을 자유롭게 입력하세요"></textarea>
-    </div>
-
-    <!-- Intensity -->
-    <div class="form-group" style="margin-top:4px;">
-      <div class="form-label">💪 시술 강도</div>
-      <div class="radio-group">
-        <input type="radio" name="intensity" id="int-subtle" value="자연스럽게 (Subtle)">
-        <label for="int-subtle">🌿 자연스럽게</label>
-        <input type="radio" name="intensity" id="int-moderate" value="보통 (Moderate)" checked>
-        <label for="int-moderate">⚡ 보통</label>
-        <input type="radio" name="intensity" id="int-strong" value="확실하게 (Strong)">
-        <label for="int-strong">🔥 확실하게</label>
-      </div>
-    </div>
-
-    <!-- Pipeline indicator -->
-    <div class="pipeline" id="pipeline">
-      <span class="pipeline-step" id="ps-doctor">🩺 분석</span><span class="pipeline-arrow">→</span>
-      <span class="pipeline-step" id="ps-creator">💡 프롬프트</span><span class="pipeline-arrow">→</span>
-      <span class="pipeline-step" id="ps-gen">🎨 생성</span><span class="pipeline-arrow">→</span>
-      <span class="pipeline-step" id="ps-critic">⚖️ 평가</span><span class="pipeline-arrow">→</span>
-      <span class="pipeline-step" id="ps-report">🎯 리포트</span>
-    </div>
-
-    <div class="btn-group">
-      <button class="btn btn-primary" id="btn-run" onclick="runSimulation()">🚀 시뮬레이션 시작</button>
-    </div>
-  </div>
-
-  <!-- ═══ FACE SCAN ANIMATION ═══ -->
-  <div class="scan-overlay" id="scan-overlay">
-    <!-- Particles -->
-    <div class="scan-particles" id="scan-particles"></div>
-    <!-- Grid -->
-    <div class="scan-grid"></div>
-
-    <!-- Face container -->
-    <div class="face-container">
-      <!-- Pulse rings -->
-      <div class="pulse-ring" style="animation-delay:0s;"></div>
-      <div class="pulse-ring" style="animation-delay:1s;"></div>
-      <div class="pulse-ring" style="animation-delay:2s;"></div>
-
-      <!-- Corner brackets -->
-      <div class="scan-corner tl"></div>
-      <div class="scan-corner tr"></div>
-      <div class="scan-corner bl"></div>
-      <div class="scan-corner br"></div>
-
-      <!-- Laser scan line -->
-      <div class="laser-line"></div>
-
-      <!-- Face mask SVG -->
-      <svg class="face-mask" viewBox="0 0 220 280" xmlns="http://www.w3.org/2000/svg">
-        <!-- Face oval -->
-        <ellipse class="face-outline" cx="110" cy="145" rx="78" ry="105"
-          style="animation-delay:0s;stroke-dasharray:600;"/>
-        <!-- Left eye -->
-        <ellipse class="face-outline" cx="78" cy="118" rx="22" ry="10"
-          style="animation-delay:.4s;stroke-dasharray:120;stroke:#e11d48;stroke-width:1.2;"/>
-        <!-- Right eye -->
-        <ellipse class="face-outline" cx="142" cy="118" rx="22" ry="10"
-          style="animation-delay:.5s;stroke-dasharray:120;stroke:#e11d48;stroke-width:1.2;"/>
-        <!-- Left eyebrow -->
-        <path class="face-outline" d="M52,98 Q78,84 102,98"
-          style="animation-delay:.7s;stroke-dasharray:80;stroke:#818cf8;stroke-width:1;"/>
-        <!-- Right eyebrow -->
-        <path class="face-outline" d="M118,98 Q142,84 168,98"
-          style="animation-delay:.8s;stroke-dasharray:80;stroke:#818cf8;stroke-width:1;"/>
-        <!-- Nose -->
-        <path class="face-outline" d="M110,128 L110,160 Q102,172 94,166 M110,160 Q118,172 126,166"
-          style="animation-delay:1s;stroke-dasharray:100;stroke:#0d9488;stroke-width:1.2;"/>
-        <!-- Mouth -->
-        <path class="face-outline" d="M82,195 Q96,206 110,207 Q124,206 138,195"
-          style="animation-delay:1.3s;stroke-dasharray:80;stroke:#f59e0b;stroke-width:1.2;"/>
-        <!-- Jaw line -->
-        <path class="face-outline" d="M36,140 Q40,210 110,248 Q180,210 184,140"
-          style="animation-delay:1.6s;stroke-dasharray:400;stroke:#6366f1;stroke-width:0.8;opacity:0.5;"/>
-        <!-- Cross guides -->
-        <line class="face-outline" x1="110" y1="60" x2="110" y2="240"
-          style="animation-delay:2s;stroke-dasharray:200;stroke:rgba(99,102,241,0.15);stroke-width:0.6;"/>
-        <line class="face-outline" x1="40" y1="145" x2="180" y2="145"
-          style="animation-delay:2.1s;stroke-dasharray:160;stroke:rgba(99,102,241,0.15);stroke-width:0.6;"/>
-      </svg>
-
-      <!-- Data readouts -->
-      <div class="scan-data" style="top:12%;left:-30%;animation-delay:0.5s;">SYMMETRY: ANALYZING...</div>
-      <div class="scan-data" style="top:35%;right:-35%;animation-delay:1.2s;">RATIO: 1.618:1</div>
-      <div class="scan-data" style="top:60%;left:-28%;animation-delay:2s;">BONE: MAPPING...</div>
-      <div class="scan-data" style="top:82%;right:-30%;animation-delay:2.8s;">TISSUE: READY</div>
-    </div>
-
-    <!-- Status -->
-    <div class="scan-status">
-      <div class="scan-status-main" id="scan-text">🩺 얼굴 분석 중...</div>
-      <div class="scan-status-sub" id="scan-sub">SOMA Multi-Agent Processing</div>
-      <div class="scan-progress-bar"><div class="scan-progress-fill" id="scan-progress" style="width:5%;"></div></div>
-    </div>
-  </div>
-
-  <!-- RESULTS -->
-  <div id="results-area" style="display:none;">
-    <div class="error-msg" id="error-msg"></div>
-
-    <!-- Generated image -->
-    <div class="result-section" id="result-gen" style="display:none;">
-      <div class="result-image-wrap">
-        <img id="result-img" alt="시뮬레이션 결과">
-        <div class="result-label">🎨 시뮬레이션 결과 (1K)</div>
-      </div>
-    </div>
-
-    <!-- Before/After -->
-    <div class="ba-container" id="result-ba" style="display:none;">
-      <div class="ba-label">🔄 Before / After 비교</div>
-      <div id="ba-html"></div>
-    </div>
-
-    <!-- Angles -->
-    <div id="result-angles" style="display:none;">
-      <div class="result-grid">
-        <div class="result-image-wrap">
-          <img id="angle-45" alt="45도 앵글">
-          <div class="result-label">📐 45도 앵글</div>
-        </div>
-        <div class="result-image-wrap">
-          <img id="angle-side" alt="측면 프로필">
-          <div class="result-label">📐 측면 프로필</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Report -->
-    <div class="report-card" id="result-report" style="display:none;">
-      <div id="report-html"></div>
-    </div>
-  </div>
+<div style="margin-bottom:14px"><span class="kt" onclick="document.getElementById('ks').classList.toggle('o')">🔑 API Keys ▾</span>
+<div class="ks" id="ks"><div class="fr"><div class="fg"><div class="fl">FAL Key</div><input type="password" id="fk" placeholder="fal_..."></div><div class="fg"><div class="fl">Fireworks Key</div><input type="password" id="wk" placeholder="fw_..."></div></div></div></div>
+
+<!-- TAB 1: 얼굴 분석 -->
+<div class="pnl a" id="p-face"><div class="card"><div class="ch"><div class="ci bl">🔍</div><div class="ct">의학적 얼굴 분석</div></div>
+<div class="uz" id="uz-face" onclick="this.querySelector('input').click()"><div class="ph"><div class="uzi">🖼️</div><div class="uzt"><b>얼굴 사진 업로드</b></div></div><img class="ui" style="display:none"><input type="file" accept="image/*" onchange="hu(this,'face')"></div>
+<button class="btn bb" id="bf" onclick="runFace()">🔍 의학적 얼굴 분석 시작</button></div>
+<div class="ld" id="ld-face"><div class="lr"></div><div class="lt">🩺 얼굴 구조 분석 중...</div></div>
+<div class="ra"><div class="rh" id="rf"></div></div></div>
+
+<!-- TAB 2: 관상 -->
+<div class="pnl" id="p-physio"><div class="card"><div class="ch"><div class="ci pu">🔮</div><div class="ct">관상 분석</div></div>
+<div class="uz" id="uz-physio" onclick="this.querySelector('input').click()"><div class="ph"><div class="uzi">🖼️</div><div class="uzt"><b>얼굴 사진 업로드</b></div></div><img class="ui" style="display:none"><input type="file" accept="image/*" onchange="hu(this,'physio')"></div>
+<button class="btn bp" id="bp" onclick="runPhysio()">🔮 관상 분석 시작</button></div>
+<div class="ld" id="ld-physio"><div class="lr"></div><div class="lt">🔮 관상 분석 중...</div></div>
+<div class="ra"><div class="rv" id="rpv"></div><div class="rh" id="rp"></div></div></div>
+
+<!-- TAB 3: 궁합 -->
+<div class="pnl" id="p-compat"><div class="card"><div class="ch"><div class="ci pk">💑</div><div class="ct">관상 궁합 분석</div></div>
+<div class="fr"><div class="fg"><div class="fl">📸 나의 얼굴</div><div class="uz uzs" id="uz-c1" onclick="this.querySelector('input').click()"><div class="ph"><div class="uzi">🧑</div><div class="uzt"><b>사진 1</b></div></div><img class="ui" style="display:none"><input type="file" accept="image/*" onchange="hu(this,'c1')"></div></div>
+<div class="fg"><div class="fl">📸 상대방 얼굴</div><div class="uz uzs" id="uz-c2" onclick="this.querySelector('input').click()"><div class="ph"><div class="uzi">🧑</div><div class="uzt"><b>사진 2</b></div></div><img class="ui" style="display:none"><input type="file" accept="image/*" onchange="hu(this,'c2')"></div></div></div>
+<div class="fg"><div class="fl">🔗 관계 유형</div><div class="rg">
+<input type="radio" name="rel" id="r1" value="💼 비즈니스 파트너"><label for="r1">💼 비즈니스</label>
+<input type="radio" name="rel" id="r2" value="❤️ 연인 / 배우자" checked><label for="r2">❤️ 연인</label>
+<input type="radio" name="rel" id="r3" value="👨‍👩‍👧 가족"><label for="r3">👨‍👩‍👧 가족</label>
+<input type="radio" name="rel" id="r4" value="🤝 친구 / 동료"><label for="r4">🤝 친구</label>
+</div></div>
+<button class="btn bk" id="bc" onclick="runCompat()">💑 궁합 분석 시작</button></div>
+<div class="ld" id="ld-compat"><div class="lr"></div><div class="lt">💑 궁합 분석 중...</div></div>
+<div class="ra"><div class="rv" id="rcv"></div><div class="rh" id="rc"></div></div></div>
+
+<!-- TAB 4: 시뮬레이션 -->
+<div class="pnl" id="p-sim"><div class="card"><div class="ch"><div class="ci ro">✨</div><div class="ct">성형 시뮬레이션</div></div>
+<div class="uz" id="uz-sim" onclick="this.querySelector('input').click()"><div class="ph"><div class="uzi">🖼️</div><div class="uzt"><b>얼굴 사진 업로드</b></div></div><img class="ui" style="display:none"><input type="file" accept="image/*" onchange="hu(this,'sim')"></div>
+<div class="fr" style="margin-top:10px"><div class="fg" style="flex:2"><div class="fl">🏥 시술 프리셋</div><select id="ps">
+<option>없음 (직접 입력)</option><option>👁️ 자연유착 쌍꺼풀</option><option>👁️ 절개 쌍꺼풀</option><option>👃 코끝 성형</option><option>👃 콧대 성형</option>
+<option>🦷 사각턱 축소</option><option>💉 팔자주름 필러</option><option>💉 이마 보톡스</option><option>💋 입술 필러</option><option>🏥 눈+코 동시</option><option>🏥 풀페이스 리프팅</option><option>✨ 동안 스타일</option>
+</select></div><div class="fg" style="flex:1"><div class="fl">📐 비율</div><select id="ar"><option>auto</option><option>1:1</option><option>3:4</option><option>4:3</option></select></div></div>
+<div class="fg"><div class="fl">✏️ 추가 지시</div><textarea id="cp" placeholder="프리셋 외 추가 요청"></textarea></div>
+<div class="fg" style="margin-top:4px"><div class="fl">💪 강도</div><div class="rg">
+<input type="radio" name="int" id="i1" value="자연스럽게 (Subtle)"><label for="i1">🌿 자연</label>
+<input type="radio" name="int" id="i2" value="보통 (Moderate)" checked><label for="i2">⚡ 보통</label>
+<input type="radio" name="int" id="i3" value="확실하게 (Strong)"><label for="i3">🔥 확실</label>
+</div></div>
+<button class="btn br" id="bs" onclick="runSim()">🚀 시뮬레이션 시작</button></div>
+<!-- Scan Animation -->
+<div class="sco" id="sco"><div class="sp" id="spp"></div><div class="sg"></div>
+<div class="fc"><div class="pr"></div><div class="pr" style="animation-delay:1s"></div><div class="pr" style="animation-delay:2s"></div>
+<div class="sc tl"></div><div class="sc tr"></div><div class="sc bl"></div><div class="sc br"></div><div class="ll"></div>
+<svg class="fm" viewBox="0 0 220 280"><ellipse class="fo" cx="110" cy="145" rx="78" ry="105" style="stroke-dasharray:600"/>
+<ellipse class="fo" cx="78" cy="118" rx="22" ry="10" style="animation-delay:.4s;stroke-dasharray:120;stroke:#e11d48;stroke-width:1.2"/>
+<ellipse class="fo" cx="142" cy="118" rx="22" ry="10" style="animation-delay:.5s;stroke-dasharray:120;stroke:#e11d48;stroke-width:1.2"/>
+<path class="fo" d="M52,98 Q78,84 102,98" style="animation-delay:.7s;stroke-dasharray:80;stroke-width:1"/>
+<path class="fo" d="M118,98 Q142,84 168,98" style="animation-delay:.8s;stroke-dasharray:80;stroke-width:1"/>
+<path class="fo" d="M110,128 L110,160 Q102,172 94,166 M110,160 Q118,172 126,166" style="animation-delay:1s;stroke-dasharray:100;stroke:#0d9488;stroke-width:1.2"/>
+<path class="fo" d="M82,195 Q96,206 110,207 Q124,206 138,195" style="animation-delay:1.3s;stroke-dasharray:80;stroke:#f59e0b;stroke-width:1.2"/>
+</svg>
+<div class="sd" style="top:10%;left:-22%;animation-delay:.5s">SYMMETRY: ANALYZING</div>
+<div class="sd" style="top:38%;right:-25%;animation-delay:1.2s">RATIO: 1.618</div>
+<div class="sd" style="top:62%;left:-20%;animation-delay:2s">BONE: MAPPING</div>
+<div class="sd" style="top:82%;right:-22%;animation-delay:2.8s">TISSUE: READY</div>
 </div>
-
-<!-- ═══ SOMA 시스템 탭 ═══ -->
-<div class="panel" id="panel-soma">
-  <div class="hero-card" style="background:linear-gradient(135deg,#1e1b4b,#312e81 40%,#4f46e5);">
-    <div class="hero-title">🧠 SOMA (Self-Orchestrating Modular Architect)</div>
-    <div class="hero-sub">VIDRAFT이 개발한 다중 에이전트 협업 프레임워크<br>"AI 전문가 5명이 회의하는 시스템"</div>
-    <div class="hero-badge">상생(相生) × 상극(相克) — 환각 최소화</div>
-  </div>
-  <div class="card">
-    <div class="card-header"><div class="card-icon purple">🔮</div><div class="card-title">작동 원리</div></div>
-    <div style="padding:8px 0;font-size:12.5px;color:var(--text-sec);line-height:2;">
-      <b style="color:var(--text);">① 🩺 의사 AI</b> → 얼굴 구조 분석, 시술 적합성 판단, 리스크 평가<br>
-      <b style="color:var(--text);">② 💡 창발 AI</b> → 의사 소견 반영 최적 프롬프트 생성<br>
-      <b style="color:var(--text);">③ 🎨 이미지 생성</b> → Nano Banana 2 Edit (1K)<br>
-      <b style="color:var(--text);">④ ⚖️ 비평 AI</b> → 6개 기준 엄격 평가 + 교차 검증<br>
-      <b style="color:var(--text);">⑤ 🎯 감독 AI</b> → 모든 결과 종합, 최종 리포트만 출력
-    </div>
-  </div>
-  <div class="card">
-    <div class="card-header"><div class="card-icon teal">⚖️</div><div class="card-title">상생과 상극</div></div>
-    <div style="padding:8px 0;font-size:12px;color:var(--text-sec);line-height:2;">
-      <b style="color:var(--teal);">상생 (시너지):</b> 🩺→💡 의학적 정확성이 창의적 프롬프트로 전환 · 🔮→🩺 관상학 인사이트가 시술 추천 보완<br>
-      <b style="color:var(--rose);">상극 (견제):</b> ⚖️이 💡의 결과를 비판적 검증 · 🩺가 비현실적 시술을 의학적으로 걸러냄 · 🎯이 갈등 조율
-    </div>
-  </div>
-  <div class="card">
-    <div class="card-header"><div class="card-icon amber">📊</div><div class="card-title">비평 AI 평가 기준 (60점 만점)</div></div>
-    <div style="padding:8px 0;font-size:11.5px;color:var(--text-sec);line-height:2;">
-      프롬프트 충실도(10) · 자연스러움(10) · 동일인 유지도(10) · 의학적 현실성(10) · 전체 조화(10) · 아티팩트 검출(10)<br>
-      <span style="color:var(--teal);font-weight:600;">🟢 48+ 고품질</span> · <span style="color:var(--amber);font-weight:600;">🟡 36~47 수용 가능</span> · <span style="color:var(--rose);font-weight:600;">🔴 36 미만 재생성 필요</span>
-    </div>
-  </div>
-</div>
-
-<!-- ═══ 사용법 탭 ═══ -->
-<div class="panel" id="panel-guide">
-  <div class="card">
-    <div class="card-header"><div class="card-icon purple">📖</div><div class="card-title">사용 가이드</div></div>
-    <div style="padding:8px 0;font-size:12.5px;color:var(--text-sec);line-height:2.2;">
-      <b style="color:var(--text);">0. API Key 설정</b> — 환경변수 또는 🔑 섹션에서 입력<br>
-      <b style="color:var(--text);">1. 얼굴 사진 업로드</b> — 정면, 균일 조명, 고해상도 권장<br>
-      <b style="color:var(--text);">2. 시술 선택</b> — 프리셋 11종 또는 직접 입력, 강도 조절<br>
-      <b style="color:var(--text);">3. 시뮬레이션 시작</b> — SOMA 파이프라인 자동 실행<br>
-      <b style="color:var(--text);">4. 결과 확인</b> — 시뮬레이션 이미지, Before/After, 다각도, 리포트<br><br>
-      <span style="font-size:11px;color:var(--text-muted);">💡 프리셋 + 추가 지시를 함께 사용하면 더 정교한 결과<br>⚠️ AI 시뮬레이션이며 실제 수술 결과와 다를 수 있습니다</span>
-    </div>
-  </div>
-</div>
-
-<!-- FOOTER -->
-<footer class="footer">
-  <div class="footer-brand">Proto-AGI FACE</div>
-  <div class="footer-dev">개발: <a href="https://vidraft.net" target="_blank">VIDRAFT</a> · <a href="/gradio" style="color:var(--teal);text-decoration:none;font-weight:600;">전체 기능 (Gradio UI) →</a></div>
-  <div class="footer-line"></div>
-  <div class="footer-tech">SOMA × NANO-BANANA-2 × KIMI-K2P5 · 🩺🔮💡⚖️🎯 5-Agent</div>
-</footer>
-
+<div style="position:relative;z-index:10"><div class="ssm" id="stx">🩺 분석 중...</div><div class="sss" id="ssu">SOMA Processing</div><div class="spb"><div class="spf" id="spg" style="width:5%"></div></div></div></div>
+<!-- Results -->
+<div id="sr" style="display:none"><div class="em" id="se"></div>
+<div class="riw" id="sg" style="display:none"><img id="si"><div class="ril">🎨 시뮬레이션 결과</div></div>
+<div id="sb" style="display:none;margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px"></div>
+<div class="rgg" id="sa" style="display:none;margin-top:10px"><div class="riw"><img id="s45"><div class="ril">📐 45도</div></div><div class="riw"><img id="ssd"><div class="ril">📐 측면</div></div></div>
+<div class="rh" id="srp" style="margin-top:10px"></div></div></div>
+
+<footer class="ft"><div class="ftb">Proto-AGI FACE</div><div class="ftd"><a href="https://vidraft.net" target="_blank">VIDRAFT</a> · <a href="/gradio" style="color:var(--teal);font-weight:600">Gradio UI →</a></div><div class="ftl"></div><div class="ftt">SOMA × NANO-BANANA-2 × KIMI-K2P5 · 5-Agent</div></footer>
 </div>
-
 <script>
-const B = window.location.origin;
-let uploadedFilePath = null;
-
-/* ═══ TAB SWITCHING ═══ */
-function switchTab(t){
-  document.querySelectorAll('.nav-item').forEach(e=>e.classList.remove('active'));
-  document.querySelectorAll('.panel').forEach(e=>e.classList.remove('active'));
-  document.querySelector(`[data-tab="${t}"]`).classList.add('active');
-  document.getElementById(`panel-${t}`).classList.add('active');
-}
-
-/* ═══ API KEY TOGGLE ═══ */
-function toggleKeys(){
-  const s=document.getElementById('key-section');
-  s.classList.toggle('open');
-}
-
-/* ═══ FILE UPLOAD ═══ */
-function handleFile(input){
-  const file=input.files&&input.files[0];
-  if(!file)return;
-  const zone=document.getElementById('upload-zone');
-  const ph=document.getElementById('upload-placeholder');
-  const img=document.getElementById('preview-img');
-  const reader=new FileReader();
-  reader.onload=function(e){
-    img.src=e.target.result;
-    img.style.display='block';
-    ph.style.display='none';
-    zone.classList.add('has-image');
-  };
-  reader.readAsDataURL(file);
-  uploadToGradio(file);
-}
-
-async function uploadToGradio(file){
-  const fd=new FormData();fd.append('files',file);
-  const urls=[
-    `${B}/gradio/upload`,
-    `${B}/gradio/gradio_api/upload`,
-    `${B}/gradio_api/upload`,
-    `${B}/upload`,
-  ];
-  for(const u of urls){
-    try{const r=await fetch(u,{method:'POST',body:fd});if(r.ok){const j=await r.json();uploadedFilePath=Array.isArray(j)?j[0]:j;return;}}catch{}
-  }
-}
-
-/* Drag & drop */
-const zone=document.getElementById('upload-zone');
-zone.addEventListener('dragover',e=>{e.preventDefault();zone.style.borderColor='var(--accent)';zone.style.background='rgba(99,102,241,0.05)';});
-zone.addEventListener('dragleave',()=>{zone.style.borderColor='';zone.style.background='';});
-zone.addEventListener('drop',e=>{e.preventDefault();zone.style.borderColor='';zone.style.background='';const f=e.dataTransfer.files&&e.dataTransfer.files[0];if(f&&f.type.startsWith('image/')){document.getElementById('file-input').files=e.dataTransfer.files;handleFile(document.getElementById('file-input'));}});
-
-/* ═══ PARTICLES ═══ */
-function initParticles(){
-  const c=document.getElementById('scan-particles');
-  c.innerHTML='';
-  for(let i=0;i<30;i++){
-    const s=document.createElement('span');
-    s.style.left=Math.random()*100+'%';
-    s.style.animationDelay=Math.random()*4+'s';
-    s.style.animationDuration=(3+Math.random()*3)+'s';
-    c.appendChild(s);
-  }
-}
-
-/* ═══ SCAN ANIMATION ═══ */
-const scanSteps=[
-  {text:'🩺 얼굴 구조 분석 중...',sub:'Doctor Agent — Facial Anatomy Analysis',pct:10,step:'ps-doctor'},
-  {text:'🩺 시술 적합성 판단 중...',sub:'Doctor Agent — Procedure Evaluation',pct:15,step:'ps-doctor'},
-  {text:'💡 프롬프트 최적화 중...',sub:'Creator Agent — Prompt Engineering',pct:25,step:'ps-creator'},
-  {text:'🎨 이미지 생성 중...',sub:'Nano Banana 2 Edit — Generating 1K',pct:40,step:'ps-gen'},
-  {text:'🎨 고품질 렌더링 중...',sub:'Image Processing — Please Wait',pct:55,step:'ps-gen'},
-  {text:'⚖️ 품질 검증 중...',sub:'Critic Agent — 6-Axis Quality Check',pct:65,step:'ps-critic'},
-  {text:'📐 다각도 생성 중...',sub:'45° + Profile Angle Generation',pct:78,step:'ps-critic'},
-  {text:'🎯 리포트 작성 중...',sub:'Director Agent — Synthesizing Report',pct:88,step:'ps-report'},
-  {text:'✨ 거의 완료...',sub:'Finalizing Results',pct:95,step:'ps-report'},
-];
-let scanInterval=null;
-
-function startScan(){
-  const ov=document.getElementById('scan-overlay');
-  ov.classList.add('active');
-  ov.style.display='block';
-  initParticles();
-  document.querySelectorAll('.pipeline-step').forEach(s=>{s.classList.remove('active','done');});
-  let idx=0;
-  updateScanStep(scanSteps[0]);
-  scanInterval=setInterval(()=>{
-    idx++;
-    if(idx<scanSteps.length){
-      updateScanStep(scanSteps[idx]);
-    }
-  },4000);
-}
-
-function updateScanStep(step){
-  document.getElementById('scan-text').textContent=step.text;
-  document.getElementById('scan-sub').textContent=step.sub;
-  document.getElementById('scan-progress').style.width=step.pct+'%';
-  const steps=['ps-doctor','ps-creator','ps-gen','ps-critic','ps-report'];
-  const ci=steps.indexOf(step.step);
-  steps.forEach((s,i)=>{
-    const el=document.getElementById(s);
-    if(i<ci)el.classList.add('done'),el.classList.remove('active');
-    else if(i===ci)el.classList.add('active'),el.classList.remove('done');
-    else el.classList.remove('active','done');
-  });
-}
-
-function stopScan(){
-  if(scanInterval)clearInterval(scanInterval);
-  const ov=document.getElementById('scan-overlay');
-  ov.classList.remove('active');
-  ov.style.display='none';
-  document.querySelectorAll('.pipeline-step').forEach(s=>{s.classList.remove('active');s.classList.add('done');});
-}
-
-/* ═══ GRADIO API CALL ═══ */
-async function gc(api,data){
-  const urls=[
-    `${B}/gradio/call${api}`,
-    `${B}/gradio/api${api}`,
-    `${B}/gradio/gradio_api/call${api}`,
-    `${B}/api${api}`,
-    `${B}/gradio_api/call${api}`,
-  ];
-  for(const u of urls){
-    try{
-      const r=await fetch(u,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({data})});
-      if(!r.ok)continue;
-      const j=await r.json();if(!j.event_id)continue;
-      return new Promise((ok,no)=>{
-        const es=new EventSource(`${u}/${j.event_id}`);let d=false;
-        const h=e=>{if(d)return;try{const raw=JSON.parse(e.data);const p=Array.isArray(raw)?raw:(raw&&raw.data?raw.data:null);if(p){d=true;es.close();ok(p);}}catch{}};
-        es.onmessage=h;es.addEventListener('complete',h);
-        es.addEventListener('process_completed',e=>{if(d)return;try{const raw=JSON.parse(e.data);const out=raw&&raw.output&&raw.output.data?raw.output.data:null;if(out){d=true;es.close();ok(out);}}catch{}});
-        es.onerror=()=>{if(!d){d=true;es.close();no(new Error('연결 오류'));}};
-        setTimeout(()=>{if(!d){d=true;es.close();no(new Error('시간 초과 (3분)'));}},180000);
-      });
-    }catch(e){continue;}
-  }
-  throw new Error('API 연결 실패 — Gradio 서버를 확인하세요');
-}
-
-function mkFile(p){return{path:p,meta:{_type:'gradio.FileData'},orig_name:'face.png',mime_type:'image/png'};}
-
-function extractImageUrl(d){
-  if(!d)return null;
-  if(typeof d==='string'){
-    // 상대 경로면 /gradio 접두사 추가
-    if(d.startsWith('/file='))return B+'/gradio'+d;
-    if(d.startsWith('http'))return d;
-    return d;
-  }
-  if(d.url){
-    let u=d.url;
-    if(u.startsWith('/file='))return B+'/gradio'+u;
-    return u;
-  }
-  if(d.path){
-    let p=d.path;
-    if(p.startsWith('/file='))return B+'/gradio'+p;
-    if(!p.startsWith('http'))return B+'/gradio/file='+p;
-    return p;
-  }
-  if(d.value){
-    return extractImageUrl(d.value);
-  }
-  return null;
-}
-
-/* ═══ RUN SIMULATION ═══ */
-async function runSimulation(){
-  if(!uploadedFilePath){alert('얼굴 사진을 업로드해주세요.');return;}
-  const btn=document.getElementById('btn-run');
-  btn.disabled=true;
-
-  // Hide previous results
-  document.getElementById('results-area').style.display='none';
-  ['result-gen','result-ba','result-angles','result-report'].forEach(id=>{document.getElementById(id).style.display='none';});
-  document.getElementById('error-msg').textContent='';
-
-  // Get form values
-  const prompt=document.getElementById('custom-prompt').value;
-  const preset=document.getElementById('preset-select').value;
-  const intensity=document.querySelector('input[name="intensity"]:checked').value;
-  const aspect=document.getElementById('aspect-ratio').value;
-  const falKey=document.getElementById('fal-key').value;
-  const fwKey=document.getElementById('fw-key').value;
-
-  startScan();
-
-  try{
-    const fileData=mkFile(uploadedFilePath);
-    const result=await gc('/run_simulation',[fileData,prompt,preset,intensity,aspect,falKey,fwKey]);
-    stopScan();
-
-    document.getElementById('results-area').style.display='block';
-
-    // result: [gen_img, slider_html, report, angle45, angle_side, error]
-    const genImg=extractImageUrl(result[0]);
-    const sliderHtml=result[1]||'';
-    const report=result[2]||'';
-    const angle45=extractImageUrl(result[3]);
-    const angleSide=extractImageUrl(result[4]);
-    const error=result[5]||'';
-
-    if(error){
-      document.getElementById('error-msg').textContent='⚠️ '+error;
-    }
-
-    if(genImg){
-      document.getElementById('result-img').src=genImg;
-      document.getElementById('result-gen').style.display='block';
-    }
-
-    if(sliderHtml){
-      document.getElementById('ba-html').innerHTML=sliderHtml;
-      document.getElementById('result-ba').style.display='block';
-    }
-
-    if(angle45||angleSide){
-      if(angle45)document.getElementById('angle-45').src=angle45;
-      if(angleSide)document.getElementById('angle-side').src=angleSide;
-      document.getElementById('result-angles').style.display=((angle45||angleSide)?'block':'none');
-    }
-
-    if(report){
-      document.getElementById('report-html').innerHTML=marked?marked.parse(report):report.replace(/\n/g,'<br>');
-      document.getElementById('result-report').style.display='block';
-    }
-
-    // Scroll to results
-    document.getElementById('results-area').scrollIntoView({behavior:'smooth',block:'start'});
-
-  }catch(e){
-    stopScan();
-    document.getElementById('results-area').style.display='block';
-    document.getElementById('error-msg').textContent='⚠️ '+e.message;
-  }
-
-  btn.disabled=false;
-}
-
-/* ═══ SIMPLE MARKDOWN PARSER ═══ */
-const marked={
-  parse(md){
-    return md
-      .replace(/^### (.*$)/gm,'<h3>$1</h3>')
-      .replace(/^## (.*$)/gm,'<h2>$1</h2>')
-      .replace(/^# (.*$)/gm,'<h1>$1</h1>')
-      .replace(/\*\*(.*?)\*\*/g,'<b>$1</b>')
-      .replace(/\*(.*?)\*/g,'<em>$1</em>')
-      .replace(/^> (.*$)/gm,'<blockquote>$1</blockquote>')
-      .replace(/^---$/gm,'<hr>')
-      .replace(/^- (.*$)/gm,'<li>$1</li>')
-      .replace(/\n\n/g,'<br><br>')
-      .replace(/\n/g,'<br>');
-  }
-};
+const B=window.location.origin,U={face:null,physio:null,c1:null,c2:null,sim:null};
+function st(t){document.querySelectorAll('.ni').forEach(e=>e.classList.remove('a'));document.querySelectorAll('.pnl').forEach(e=>e.classList.remove('a'));document.querySelector(`[data-t="${t}"]`).classList.add('a');document.getElementById(`p-${t}`).classList.add('a')}
+function hu(inp,k){const f=inp.files&&inp.files[0];if(!f)return;const z=inp.closest('.uz'),ph=z.querySelector('.ph'),im=z.querySelector('.ui');const r=new FileReader();r.onload=e=>{im.src=e.target.result;im.style.display='block';if(ph)ph.style.display='none';z.classList.add('hi')};r.readAsDataURL(f);ul(f,k)}
+async function ul(f,k){const fd=new FormData();fd.append('files',f);for(const u of[`${B}/gradio/upload`,`${B}/gradio/gradio_api/upload`,`${B}/gradio_api/upload`,`${B}/upload`]){try{const r=await fetch(u,{method:'POST',body:fd});if(r.ok){const j=await r.json();U[k]=Array.isArray(j)?j[0]:j;return}}catch{}}}
+function mf(p){return{path:p,meta:{_type:'gradio.FileData'},orig_name:'face.png',mime_type:'image/png'}}
+async function gc(api,data){for(const u of[`${B}/gradio/call${api}`,`${B}/gradio/api${api}`,`${B}/gradio/gradio_api/call${api}`,`${B}/api${api}`,`${B}/gradio_api/call${api}`]){try{const r=await fetch(u,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({data})});if(!r.ok)continue;const j=await r.json();if(!j.event_id)continue;return new Promise((ok,no)=>{const es=new EventSource(`${u}/${j.event_id}`);let d=false;const h=e=>{if(d)return;try{const raw=JSON.parse(e.data),p=Array.isArray(raw)?raw:(raw&&raw.data?raw.data:null);if(p){d=true;es.close();ok(p)}}catch{}};es.onmessage=h;es.addEventListener('complete',h);es.addEventListener('process_completed',e=>{if(d)return;try{const raw=JSON.parse(e.data),out=raw&&raw.output&&raw.output.data?raw.output.data:null;if(out){d=true;es.close();ok(out)}}catch{}});es.onerror=()=>{if(!d){d=true;es.close();no(new Error('연결 오류'))}};setTimeout(()=>{if(!d){d=true;es.close();no(new Error('시간 초과'))}},180000)})}catch{}}throw new Error('API 연결 실패')}
+function iu(d){if(!d)return null;if(typeof d==='string'){if(d.startsWith('/file='))return B+'/gradio'+d;return d}const u=d.url||d.path||(d.value&&(d.value.url||d.value.path));if(!u)return null;if(u.startsWith('/file='))return B+'/gradio'+u;if(!u.startsWith('http'))return B+'/gradio/file='+u;return u}
+function md(s){return s.replace(/^### (.*$)/gm,'<h3>$1</h3>').replace(/^## (.*$)/gm,'<h2>$1</h2>').replace(/^# (.*$)/gm,'<h1>$1</h1>').replace(/\*\*(.*?)\*\*/g,'<b>$1</b>').replace(/\*(.*?)\*/g,'<em>$1</em>').replace(/^> (.*$)/gm,'<blockquote>$1</blockquote>').replace(/^---$/gm,'<hr>').replace(/^- (.*$)/gm,'<li>$1</li>').replace(/\n\n/g,'<br><br>').replace(/\n/g,'<br>')}
+function sl(id){document.getElementById(id).classList.add('a')}function hl(id){document.getElementById(id).classList.remove('a')}
+/* 1. Face */
+async function runFace(){if(!U.face){alert('사진을 업로드해주세요.');return}const b=document.getElementById('bf');b.disabled=true;document.getElementById('rf').innerHTML='';sl('ld-face');try{const r=await gc('/face_analysis',[mf(U.face),document.getElementById('wk').value]);hl('ld-face');document.getElementById('rf').innerHTML=md(r[0]||'')}catch(e){hl('ld-face');document.getElementById('rf').innerHTML='<div class="em">⚠️ '+e.message+'</div>'}b.disabled=false}
+/* 2. Physio */
+async function runPhysio(){if(!U.physio){alert('사진을 업로드해주세요.');return}const b=document.getElementById('bp');b.disabled=true;document.getElementById('rpv').innerHTML='';document.getElementById('rp').innerHTML='';sl('ld-physio');try{const r=await gc('/physiognomy_analysis',[mf(U.physio),document.getElementById('wk').value]);hl('ld-physio');document.getElementById('rpv').innerHTML=r[0]||'';document.getElementById('rp').innerHTML=md(r[1]||'')}catch(e){hl('ld-physio');document.getElementById('rp').innerHTML='<div class="em">⚠️ '+e.message+'</div>'}b.disabled=false}
+/* 3. Compat */
+async function runCompat(){if(!U.c1||!U.c2){alert('두 사람의 사진을 모두 업로드해주세요.');return}const b=document.getElementById('bc');b.disabled=true;document.getElementById('rcv').innerHTML='';document.getElementById('rc').innerHTML='';sl('ld-compat');const rel=document.querySelector('input[name="rel"]:checked').value;try{const r=await gc('/compatibility_analysis',[mf(U.c1),mf(U.c2),rel,document.getElementById('wk').value]);hl('ld-compat');document.getElementById('rcv').innerHTML=r[0]||'';document.getElementById('rc').innerHTML=md(r[1]||'')}catch(e){hl('ld-compat');document.getElementById('rc').innerHTML='<div class="em">⚠️ '+e.message+'</div>'}b.disabled=false}
+/* 4. Sim — scan animation */
+const SS=[{t:'🩺 얼굴 분석 중...',s:'Doctor Agent',p:12},{t:'💡 프롬프트 최적화...',s:'Creator Agent',p:25},{t:'🎨 이미지 생성 중...',s:'Nano Banana 2',p:45},{t:'⚖️ 품질 검증...',s:'Critic Agent',p:65},{t:'📐 다각도 생성...',s:'Angle Gen',p:78},{t:'🎯 리포트 작성...',s:'Director Agent',p:90}];
+let si=0,stm=null;
+function startSc(){const o=document.getElementById('sco');o.style.display='block';o.classList.add('a');const c=document.getElementById('spp');c.innerHTML='';for(let i=0;i<20;i++){const s=document.createElement('span');s.style.left=Math.random()*100+'%';s.style.animationDelay=Math.random()*4+'s';s.style.animationDuration=(3+Math.random()*3)+'s';c.appendChild(s)}si=0;uSc();stm=setInterval(()=>{si++;if(si<SS.length)uSc()},5000)}
+function uSc(){const s=SS[si];document.getElementById('stx').textContent=s.t;document.getElementById('ssu').textContent=s.s;document.getElementById('spg').style.width=s.p+'%'}
+function stopSc(){if(stm)clearInterval(stm);const o=document.getElementById('sco');o.classList.remove('a');o.style.display='none'}
+async function runSim(){if(!U.sim){alert('사진을 업로드해주세요.');return}const b=document.getElementById('bs');b.disabled=true;document.getElementById('sr').style.display='none';['sg','sb','sa'].forEach(id=>{document.getElementById(id).style.display='none'});document.getElementById('se').textContent='';document.getElementById('srp').innerHTML='';startSc();try{const r=await gc('/run_simulation',[mf(U.sim),document.getElementById('cp').value,document.getElementById('ps').value,document.querySelector('input[name="int"]:checked').value,document.getElementById('ar').value,document.getElementById('fk').value,document.getElementById('wk').value]);stopSc();document.getElementById('sr').style.display='block';const gi=iu(r[0]),ba=r[1]||'',rp=r[2]||'',a45=iu(r[3]),as=iu(r[4]),er=r[5]||'';if(er)document.getElementById('se').textContent='⚠️ '+er;if(gi){document.getElementById('si').src=gi;document.getElementById('sg').style.display='block'}if(ba){document.getElementById('sb').innerHTML=ba;document.getElementById('sb').style.display='block'}if(a45||as){if(a45)document.getElementById('s45').src=a45;if(as)document.getElementById('ssd').src=as;document.getElementById('sa').style.display='grid'}if(rp)document.getElementById('srp').innerHTML=md(rp);document.getElementById('sr').scrollIntoView({behavior:'smooth'})}catch(e){stopSc();document.getElementById('sr').style.display='block';document.getElementById('se').textContent='⚠️ '+e.message}b.disabled=false}
+document.querySelectorAll('.uz').forEach(z=>{z.addEventListener('dragover',e=>{e.preventDefault();z.style.borderColor='var(--accent)'});z.addEventListener('dragleave',()=>{z.style.borderColor=''});z.addEventListener('drop',e=>{e.preventDefault();z.style.borderColor='';const f=e.dataTransfer.files&&e.dataTransfer.files[0];if(f&&f.type.startsWith('image/')){const inp=z.querySelector('input[type=file]');const dt=new DataTransfer();dt.items.add(f);inp.files=dt.files;inp.dispatchEvent(new Event('change'))}})});
 </script>
 </body>
 </html>