GINIGEN 공식 로고 적용 — nav 로고·favicon·og:image

- logo.png (가로형 1250x220) — 네비게이션 좌측 로고
- logo-stacked.png (1250x834) — favicon + apple-touch-icon + og:image
- .logo CSS: gradient text → flex+img, hover drop-shadow 글로우
- .logo-sub: 'AI' 텍스트를 둥근 보더 배지 스타일로 재설계
- og:image 절대 URL: hf.co/spaces/ginigen/AI/resolve/main/logo-stacked.png
- 컬러: 로고 원본(블루→퍼플) 유지 (옵션 A)

index.html

@@ -10,6 +10,9 @@
     <meta property="og:description" content="진단(AX 종합병원) · 시뮬레이션(인공사회) · 생성(허그와트 바나나)의 3대 통합 플랫폼">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://ginigen.net">
+    <meta property="og:image" content="https://huggingface.co/spaces/ginigen/AI/resolve/main/logo-stacked.png">
+    <link rel="icon" type="image/png" href="logo-stacked.png">
+    <link rel="apple-touch-icon" href="logo-stacked.png">
     <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css" rel="stylesheet">
     <style>
         :root {
@@ -61,22 +64,31 @@
         }
         .nav-left { display: flex; align-items: center; gap: 36px; }
         .logo {
-            font-size: 22px;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            letter-spacing: -0.5px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
             cursor: pointer;
             text-decoration: none;
+            height: 32px;
+        }
+        .logo-img {
+            height: 26px;
+            width: auto;
+            display: block;
+            filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.32));
+            transition: filter 0.25s ease;
+        }
+        .logo:hover .logo-img {
+            filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.55));
         }
         .logo-sub {
             font-size: 11px;
             color: var(--text-muted);
-            font-weight: 500;
-            margin-left: 8px;
-            letter-spacing: 0.5px;
+            font-weight: 600;
+            letter-spacing: 1.2px;
+            padding: 3px 7px;
+            border: 1px solid var(--border);
+            border-radius: 6px;
         }
         .tabs { display: flex; gap: 6px; }
         .tab {
@@ -646,8 +658,9 @@
     <!-- NAVIGATION -->
     <nav class="nav-container">
         <div class="nav-left">
-            <a href="#home" class="logo" onclick="switchTab('home'); return false;">
-                GiniGen<span class="logo-sub">AI</span>
+            <a href="#home" class="logo" onclick="switchTab('home'); return false;" aria-label="GiniGen AI 홈">
+                <img src="logo.png" alt="GiniGen" class="logo-img">
+                <span class="logo-sub">AI</span>
             </a>
             <div class="tabs">
                 <button class="tab active" data-tab="home">홈</button>