feat(galaxy): Darwin-centered Galaxy Hero (?config=config_darwin.json) + fullscreen popup modal (FAB)

index.html

@@ -1479,6 +1479,121 @@ button { font-family: inherit; }
   background: var(--accent);
 }
 
+/* ---------- GALAXY MODAL (popup fullscreen) ---------- */
+.galaxy-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 8, 11, 0.96);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  z-index: 1000;
+  display: none;
+  align-items: stretch;
+  justify-content: stretch;
+  animation: modalFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.galaxy-modal.open { display: flex; }
+@keyframes modalFadeIn {
+  from { opacity: 0; backdrop-filter: blur(0); }
+  to { opacity: 1; backdrop-filter: blur(8px); }
+}
+.galaxy-modal-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.galaxy-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 32px;
+  border-bottom: 1px solid var(--border-strong);
+  background: rgba(11, 11, 14, 0.85);
+}
+.galaxy-modal-title {
+  font-family: 'Inter', 'Pretendard', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.005em;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.galaxy-modal-title::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  background: var(--accent);
+  border-radius: 50%;
+  box-shadow: 0 0 8px var(--accent);
+  animation: pulse 2s infinite;
+}
+.galaxy-modal-close {
+  font-family: 'Inter', sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+.galaxy-modal-close:hover {
+  color: var(--text-primary);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+.galaxy-modal-iframe {
+  flex: 1;
+  width: 100%;
+  border: 0;
+  background: #000;
+}
+
+/* Open Galaxy Trigger Button (floating) */
+.galaxy-fab {
+  position: fixed;
+  bottom: 28px;
+  right: 28px;
+  z-index: 90;
+  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
+  color: var(--text-primary);
+  border: 0;
+  padding: 14px 22px;
+  font-family: 'Inter', 'Pretendard', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  border-radius: 100px;
+  cursor: pointer;
+  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.galaxy-fab:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.55);
+}
+.galaxy-fab::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(255,255,255,0.7);
+  animation: pulse 2s infinite;
+}
+@media (max-width: 720px) {
+  .galaxy-fab { bottom: 18px; right: 18px; padding: 12px 18px; font-size: 12px; }
+}
+
 /* ---------- HERO 2 — MODEL GALAXY EMBED ---------- */
 .hero-2 {
   border-top: 1px solid var(--border-strong);
@@ -1921,27 +2036,27 @@ button { font-family: inherit; }
 <section id="galaxy" class="hero-2">
   <div class="container">
     <div class="hero-2-inner">
-      <div class="section-eyebrow reveal">— Live · Interactive · 22,400+ models</div>
-      <h2 class="section-title reveal">하나의 갤럭시.<br><span style="color:var(--accent-bright);">22,400+</span> 모델.</h2>
+      <div class="section-eyebrow reveal">— Live · Interactive · Darwin Family Centered</div>
+      <h2 class="section-title reveal"><span style="color:var(--accent-bright);">Darwin</span> 갤럭시.<br>중심에 비드래프트.</h2>
       <p class="section-lead reveal">
-        Darwin family + 2026 글로벌 트렌딩 모델이 단일 3D 갤럭시로 시각화됩니다. 노드를 hover하면 모델명·다운로드·family 정보, 클릭하면 클러스터로 줌인. <strong style="color:var(--text-primary);">FINAL-Bench가 운영하는 sigma.js 기반 라이브 인터랙티브.</strong>
+        <strong style="color:var(--text-primary);">Darwin 공식 모델 약 20여종 + 자발적 커뮤니티 파생 400+종</strong>이 화면 중심에 배치된 인터랙티브 3D 갤럭시. 노드를 hover하면 모델명·다운로드·family 정보 표시, 클릭하면 부모-자식 진화 체인 (merge / quantize / adapter) 확인. 우상단 Atlas 셀렉터로 전체 HF Galaxy (22,400+ 모델) 비교 전환 가능.
       </p>
       <div class="hero-2-stats reveal">
         <div class="hero-2-stat">
-          <div class="hero-2-stat-num">22,400<span class="small">+</span></div>
-          <div class="hero-2-stat-label">Models in galaxy</div>
+          <div class="hero-2-stat-num">약 20<span class="small">여종</span></div>
+          <div class="hero-2-stat-label">Darwin 공식 모델 (중심)</div>
         </div>
         <div class="hero-2-stat">
-          <div class="hero-2-stat-num">5<span class="small">개 클러스터</span></div>
-          <div class="hero-2-stat-label">Darwin · Trending · Multimodal · NLP · Other</div>
+          <div class="hero-2-stat-num">400<span class="small">+</span></div>
+          <div class="hero-2-stat-label">자발적 커뮤니티 파생</div>
         </div>
         <div class="hero-2-stat">
-          <div class="hero-2-stat-num">2<span class="small">모드</span></div>
-          <div class="hero-2-stat-label">Galaxy · Atlas</div>
+          <div class="hero-2-stat-num">4<span class="small">개 Atlas</span></div>
+          <div class="hero-2-stat-label">Darwin / Modalities / Large NLP / 전체 HF</div>
         </div>
         <div class="hero-2-stat">
-          <div class="hero-2-stat-num">5–15<span class="small">초</span></div>
-          <div class="hero-2-stat-label">초기 로딩 (대용량 갤럭시)</div>
+          <div class="hero-2-stat-num">3–8<span class="small">초</span></div>
+          <div class="hero-2-stat-label">초기 로딩 (Darwin 33KB · 가벼움)</div>
         </div>
       </div>
     </div>
@@ -1949,8 +2064,8 @@ button { font-family: inherit; }
 
   <div class="hero-2-frame-wrap reveal">
     <iframe class="hero-2-iframe"
-      src="https://final-bench-model-galaxy.hf.space"
-      title="Model Galaxy — Darwin family + 2026 Trending"
+      src="https://final-bench-model-galaxy.hf.space/?config=config_darwin.json"
+      title="Darwin Galaxy — VIDRAFT 중심"
       loading="lazy"
       allow="fullscreen"
       referrerpolicy="no-referrer">
@@ -1959,11 +2074,14 @@ button { font-family: inherit; }
 
   <div class="container">
     <div class="hero-2-footer reveal">
-      <a href="https://huggingface.co/spaces/FINAL-Bench/model-galaxy" target="_blank" rel="noopener" class="btn btn-primary">
-        Open Standalone <span class="arrow">↗</span>
+      <a href="https://final-bench-model-galaxy.hf.space/?config=config_darwin.json" target="_blank" rel="noopener" class="btn btn-primary">
+        Open Fullscreen <span class="arrow">↗</span>
+      </a>
+      <a href="https://huggingface.co/spaces/FINAL-Bench/model-galaxy" target="_blank" rel="noopener" class="btn">
+        전체 HF Galaxy (22,400+) <span class="arrow">↗</span>
       </a>
-      <span class="hero-2-hint">갤럭시가 보이지 않으면 5–15초 후 새로고침 (대용량 데이터 로딩)</span>
-      <span class="hero-2-meta">FINAL-Bench / model-galaxy · sigma.js + 22,400+ nodes</span>
+      <span class="hero-2-hint">갤럭시 로딩에 3–8초 소요 (Darwin 데이터 33KB)</span>
+      <span class="hero-2-meta">Darwin Family Centered · sigma.js · FINAL-Bench / model-galaxy</span>
     </div>
   </div>
 </section>
@@ -2910,6 +3028,58 @@ button { font-family: inherit; }
   </div>
 </footer>
 
+<!-- DARWIN GALAXY POPUP MODAL (전체화면 인터랙티브) -->
+<button id="galaxyFab" class="galaxy-fab" type="button" aria-label="Open Darwin Galaxy fullscreen">
+  Darwin Galaxy 풀스크린
+  <span class="arrow" aria-hidden="true">↗</span>
+</button>
+
+<div id="galaxyModal" class="galaxy-modal" role="dialog" aria-modal="true" aria-labelledby="galaxyModalTitle">
+  <div class="galaxy-modal-inner">
+    <div class="galaxy-modal-header">
+      <div id="galaxyModalTitle" class="galaxy-modal-title">Darwin Galaxy — VIDRAFT 중심 인터랙티브 가시화</div>
+      <button id="galaxyModalClose" class="galaxy-modal-close" type="button" aria-label="Close">닫기 ✕</button>
+    </div>
+    <iframe id="galaxyModalIframe" class="galaxy-modal-iframe"
+      title="Darwin Galaxy Fullscreen"
+      allow="fullscreen"
+      referrerpolicy="no-referrer"
+      src="about:blank"></iframe>
+  </div>
+</div>
+
+<script>
+// Galaxy modal — open/close (lazy-load iframe on open to save bandwidth)
+(function(){
+  const fab = document.getElementById('galaxyFab');
+  const modal = document.getElementById('galaxyModal');
+  const closeBtn = document.getElementById('galaxyModalClose');
+  const frame = document.getElementById('galaxyModalIframe');
+  if (!fab || !modal || !closeBtn || !frame) return;
+
+  const galaxyUrl = "https://final-bench-model-galaxy.hf.space/?config=config_darwin.json";
+
+  function openModal() {
+    if (frame.src === "about:blank") frame.src = galaxyUrl;
+    modal.classList.add('open');
+    document.body.style.overflow = 'hidden';
+  }
+  function closeModal() {
+    modal.classList.remove('open');
+    document.body.style.overflow = '';
+  }
+
+  fab.addEventListener('click', openModal);
+  closeBtn.addEventListener('click', closeModal);
+  modal.addEventListener('click', function(e){
+    if (e.target === modal) closeModal();
+  });
+  document.addEventListener('keydown', function(e){
+    if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
+  });
+})();
+</script>
+
 <script>
 // Hero video sequential playlist (VD1.mp4 → VD2.mp4 → 무한 loop)
 // + case-insensitive fallback (HF는 case-sensitive — vd2.mp4 / VD2.mp4 양쪽 자동 시도)