Hugging Face's logo

Spaces:
ginigen
/
AI
Running

App Files Community
AI / index.html
GiniGen AI
Press: 4월 기사 URL 오류 정정 — etnews ID 잘못 매핑됨
460fe45
raw
history blame contribute delete
68.5 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>지니젠AI · GiniGen AI — 한국 AI 전환의 모든 순간</title>
 <meta name="description" content="AX 종합병원 · 인공사회 · GiniGen Studio. 진단·시뮬레이션·생성의 한국 통합 AI 플랫폼. K-AI 리더보드 2위·5위, NIPA Blackwell 16대.">
 <meta name="keywords" content="지니젠AI, GiniGen, AX 종합병원, 인공사회, NationalOS, GiniGen Studio, AI 전환, AX, 한국 AI, K-AI 리더보드, Darwin, AETHER">
 <meta property="og:title" content="지니젠AI — 한국 AI 전환의 모든 순간을 한국어로">
 <meta property="og:description" content="진단(AX 종합병원) · 시뮬레이션(인공사회) · 생성(GiniGen Studio)의 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">
 <meta property="og:video" content="https://huggingface.co/spaces/ginigen/AI/resolve/main/hero-v1.mp4">
 <meta property="og:video:type" content="video/mp4">
 <meta property="og:video:width" content="1280">
 <meta property="og:video:height" content="720">
 <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 {
 --bg-deep: #0B1437;
 --bg-mid: #14215C;
 --bg-light: #1E3A8A;
 --accent-blue: #3B82F6;
 --accent-cyan: #00D9FF;
 --accent-gold: #F59E0B;
 --text-primary: #F8FAFC;
 --text-secondary: rgba(226, 232, 240, 0.78);
 --text-muted: rgba(226, 232, 240, 0.55);
 --surface: rgba(255, 255, 255, 0.06);
 --surface-hover: rgba(255, 255, 255, 0.10);
 --border: rgba(255, 255, 255, 0.10);
 --border-bright: rgba(0, 217, 255, 0.40);
 }
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 [id] { scroll-margin-top: 100px; }
 body {
 font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
 background: var(--bg-deep);
 background-image:
 radial-gradient(ellipse 80% 50% at 20% 0%, rgba(59, 130, 246, 0.18) 0%, transparent 50%),
 radial-gradient(ellipse 70% 60% at 80% 30%, rgba(0, 217, 255, 0.12) 0%, transparent 50%),
 radial-gradient(ellipse 60% 50% at 50% 100%, rgba(30, 58, 138, 0.30) 0%, transparent 60%);
 color: var(--text-primary);
 min-height: 100vh;
 overflow-x: hidden;
 line-height: 1.6;
 }
 /* ============ NAVIGATION ============ */
 .nav-container {
 position: fixed;
 top: 0; left: 0; right: 0;
 background: rgba(11, 20, 55, 0.72);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--border);
 z-index: 1000;
 padding: 16px 40px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .nav-left { display: flex; align-items: center; gap: 36px; }
 .logo {
 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: 600;
 letter-spacing: 1.2px;
 padding: 3px 7px;
 border: 1px solid var(--border);
 border-radius: 6px;
 }
 .tabs { display: flex; gap: 6px; }
 .tab {
 color: var(--text-secondary);
 text-decoration: none;
 font-size: 14.5px;
 font-weight: 600;
 padding: 8px 16px;
 border-radius: 8px;
 transition: all 0.25s ease;
 cursor: pointer;
 border: none;
 background: transparent;
 }
 .tab:hover { background: var(--surface-hover); color: var(--text-primary); }
 .tab.active {
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(0, 217, 255, 0.15) 100%);
 color: var(--accent-cyan);
 border: 1px solid var(--border-bright);
 }
 .powered-by {
 color: var(--text-muted);
 font-size: 12px;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .powered-by .dot {
 width: 6px; height: 6px; border-radius: 50%;
 background: #10B981;
 box-shadow: 0 0 8px #10B981;
 animation: pulse 2s infinite;
 }
 @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
 .live-link {
 text-decoration: none;
 color: var(--text-secondary);
 padding: 7px 14px;
 border: 1px solid var(--border);
 border-radius: 999px;
 transition: all 0.2s ease;
 font-weight: 600;
 font-size: 12.5px;
 }
 .live-link:hover {
 color: var(--accent-cyan);
 border-color: var(--border-bright);
 background: var(--surface-hover);
 }
 .live-dot {
 background: #EF4444 !important;
 box-shadow: 0 0 10px #EF4444 !important;
 }
 .live-arrow {
 font-size: 11px;
 opacity: 0.7;
 transition: transform 0.2s;
 margin-left: 2px;
 }
 .live-link:hover .live-arrow {
 transform: translate(2px, -2px);
 opacity: 1;
 }
 /* ============ PARTICLES (Network Nodes) ============ */
 .particles {
 position: fixed;
 inset: 0;
 overflow: hidden;
 z-index: 1;
 pointer-events: none;
 }
 .particle {
 position: absolute;
 width: 3px; height: 3px;
 background: var(--accent-cyan);
 border-radius: 50%;
 box-shadow: 0 0 12px var(--accent-cyan);
 opacity: 0.4;
 animation: drift 25s infinite ease-in-out;
 }
 @keyframes drift {
 0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
 50% { transform: translateY(-60vh) translateX(40px); opacity: 0.6; }
 }
 /* ============ MAIN ============ */
 .container {
 position: relative;
 z-index: 10;
 max-width: 1240px;
 margin: 0 auto;
 padding: 110px 24px 80px;
 }
 .tab-content { display: none; animation: fadeIn 0.5s ease; }
 .tab-content.active { display: block; }
 @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
 /* ============ HERO ============ */
 .hero {
 position: relative;
 margin: -110px calc(50% - 50vw) 0;
 width: 100vw;
 padding: 160px 24px 100px;
 min-height: 760px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 overflow: hidden;
 }
 .hero-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 overflow: hidden;
 background: var(--bg-deep);
 }
 .hero-bg video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 }
 .hero-overlay {
 position: absolute;
 inset: 0;
 z-index: 1;
 background:
 linear-gradient(180deg,
 rgba(11, 20, 55, 0.55) 0%,
 rgba(11, 20, 55, 0.40) 40%,
 rgba(11, 20, 55, 0.85) 92%,
 var(--bg-deep) 100%),
 radial-gradient(ellipse at center, transparent 0%, rgba(11, 20, 55, 0.45) 100%);
 pointer-events: none;
 }
 .hero-content {
 position: relative;
 z-index: 2;
 max-width: 820px;
 width: 100%;
 }
 .hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 8px 16px;
 background: rgba(245, 158, 11, 0.12);
 border: 1px solid rgba(245, 158, 11, 0.35);
 border-radius: 999px;
 font-size: 12.5px;
 font-weight: 600;
 color: var(--accent-gold);
 margin-bottom: 24px;
 letter-spacing: 0.3px;
 }
 .hero h1 {
 font-size: clamp(36px, 6vw, 64px);
 font-weight: 800;
 line-height: 1.15;
 letter-spacing: -1.5px;
 margin-bottom: 20px;
 text-shadow: 0 4px 30px rgba(0, 0, 0, 0.50);
 }
 .hero h1 .accent {
 background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 50%, #A78BFA 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
 .hero p {
 font-size: clamp(15px, 2vw, 19px);
 color: var(--text-secondary);
 max-width: 720px;
 margin: 0 auto 36px;
 line-height: 1.7;
 text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
 }
 .hero-stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 max-width: 760px;
 margin: 0 auto;
 }
 .hero-stat {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 20px 16px;
 backdrop-filter: blur(8px);
 }
 .hero-stat .num {
 font-size: 28px;
 font-weight: 800;
 color: var(--accent-cyan);
 letter-spacing: -0.5px;
 }
 .hero-stat .label {
 font-size: 13px;
 color: var(--text-secondary);
 margin-top: 4px;
 }
 /* ============ SECTION TITLE ============ */
 .section {
 margin-top: 80px;
 }
 .section-title {
 font-size: 13px;
 font-weight: 700;
 color: var(--accent-cyan);
 letter-spacing: 2px;
 text-transform: uppercase;
 margin-bottom: 12px;
 }
 .section-heading {
 font-size: clamp(28px, 4vw, 42px);
 font-weight: 800;
 line-height: 1.2;
 letter-spacing: -1px;
 margin-bottom: 16px;
 }
 .section-sub {
 font-size: 16.5px;
 color: var(--text-secondary);
 max-width: 720px;
 margin-bottom: 40px;
 }
 /* ============ 3 PILLARS ============ */
 .pillars {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 }
 .pillar {
 position: relative;
 background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 32px 26px;
 transition: all 0.3s ease;
 overflow: hidden;
 cursor: pointer;
 }
 .pillar::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: var(--gradient);
 opacity: 0.8;
 }
 .pillar:hover {
 transform: translateY(-6px);
 border-color: var(--border-bright);
 box-shadow: 0 20px 50px rgba(0, 217, 255, 0.15);
 }
 .pillar[data-color="cyan"] { --gradient: linear-gradient(90deg, #00D9FF, #3B82F6); }
 .pillar[data-color="blue"] { --gradient: linear-gradient(90deg, #3B82F6, #A78BFA); }
 .pillar[data-color="gold"] { --gradient: linear-gradient(90deg, #F59E0B, #FBBF24); }
 .pillar-icon {
 width: 52px; height: 52px;
 border-radius: 14px;
 background: var(--gradient);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 26px;
 margin-bottom: 18px;
 box-shadow: 0 8px 20px rgba(0, 217, 255, 0.18);
 }
 .pillar-tag {
 display: inline-block;
 font-size: 11px;
 font-weight: 700;
 color: var(--accent-cyan);
 letter-spacing: 1.5px;
 margin-bottom: 8px;
 }
 .pillar h3 {
 font-size: 22px;
 font-weight: 800;
 margin-bottom: 10px;
 letter-spacing: -0.5px;
 }
 .pillar .tagline {
 font-size: 14px;
 color: var(--text-secondary);
 line-height: 1.65;
 margin-bottom: 18px;
 }
 .pillar ul {
 list-style: none;
 padding: 0;
 border-top: 1px solid var(--border);
 padding-top: 16px;
 }
 .pillar ul li {
 font-size: 13.5px;
 color: var(--text-muted);
 padding: 5px 0;
 display: flex;
 align-items: flex-start;
 gap: 8px;
 }
 .pillar ul li::before {
 content: '◆';
 color: var(--accent-cyan);
 font-size: 8px;
 margin-top: 6px;
 flex-shrink: 0;
 }
 .pillar-cta {
 display: inline-block;
 margin-top: 18px;
 font-size: 13px;
 font-weight: 700;
 color: var(--accent-cyan);
 text-decoration: none;
 transition: gap 0.2s;
 }
 .pillar-cta:hover { gap: 12px; }
 .pillar-cta::after { content: ' →'; }
 /* ============ TRUST BAR ============ */
 .trust-bar {
 margin-top: 70px;
 background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(0, 217, 255, 0.05) 100%);
 border: 1px solid rgba(245, 158, 11, 0.25);
 border-radius: 20px;
 padding: 32px 28px;
 }
 .trust-bar-head {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 22px;
 flex-wrap: wrap;
 }
 .trust-bar-head .gold-badge {
 background: linear-gradient(135deg, #F59E0B, #FBBF24);
 color: #1F2937;
 font-size: 11px;
 font-weight: 800;
 padding: 5px 12px;
 border-radius: 6px;
 letter-spacing: 1px;
 }
 .trust-bar-head h3 {
 font-size: 20px;
 font-weight: 800;
 letter-spacing: -0.5px;
 }
 .trust-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
 }
 .trust-item {
 text-align: left;
 }
 .trust-item .val {
 font-size: 22px;
 font-weight: 800;
 color: var(--accent-gold);
 letter-spacing: -0.5px;
 }
 .trust-item .lbl {
 font-size: 12.5px;
 color: var(--text-secondary);
 margin-top: 4px;
 line-height: 1.4;
 }
 /* ============ TRENDS ============ */
 .trends-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px;
 }
 .trend-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 22px 20px;
 }
 .trend-card .yr {
 font-size: 11px;
 font-weight: 700;
 color: var(--accent-cyan);
 letter-spacing: 1px;
 margin-bottom: 8px;
 }
 .trend-card h4 {
 font-size: 16px;
 font-weight: 700;
 margin-bottom: 8px;
 line-height: 1.3;
 }
 .trend-card p {
 font-size: 13px;
 color: var(--text-secondary);
 line-height: 1.55;
 }
 .trend-card .stat {
 margin-top: 10px;
 font-size: 13px;
 color: var(--accent-gold);
 font-weight: 700;
 }
 /* ============ DETAIL PAGES (AX / Society / Studio) ============ */
 .detail-hero {
 text-align: left;
 padding: 40px 0;
 }
 .detail-hero h2 {
 font-size: clamp(32px, 5vw, 52px);
 font-weight: 800;
 line-height: 1.15;
 letter-spacing: -1.2px;
 margin-bottom: 18px;
 }
 .detail-hero .accent { color: var(--accent-cyan); }
 .detail-hero .lead {
 font-size: 18px;
 color: var(--text-secondary);
 max-width: 760px;
 line-height: 1.65;
 }
 .hero-cta-row {
 display: flex;
 gap: 12px;
 margin-top: 28px;
 flex-wrap: wrap;
 }
 .btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 14px 26px;
 border-radius: 999px;
 font-weight: 700;
 font-size: 15px;
 text-decoration: none;
 transition: all 0.2s ease;
 border: 1px solid transparent;
 cursor: pointer;
 }
 .btn-primary {
 background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
 color: white;
 box-shadow: 0 10px 28px rgba(0, 217, 255, 0.25);
 }
 .btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 14px 36px rgba(0, 217, 255, 0.40);
 }
 .btn-ghost {
 background: var(--surface);
 color: var(--accent-cyan);
 border-color: var(--border-bright);
 }
 .btn-ghost:hover {
 background: var(--surface-hover);
 border-color: var(--accent-cyan);
 }
 .hero-price-strip {
 margin-top: 22px;
 padding: 14px 20px;
 background: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(0, 217, 255, 0.06) 100%);
 border: 1px solid rgba(245, 158, 11, 0.30);
 border-radius: 12px;
 font-size: 14px;
 color: var(--text-secondary);
 display: inline-block;
 }
 .hero-price-strip strong {
 color: var(--accent-gold);
 font-weight: 800;
 }
 .feat-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 margin-top: 30px;
 }
 .feat {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 24px 22px;
 transition: all 0.25s;
 }
 .feat:hover { border-color: var(--border-bright); background: var(--surface-hover); }
 .feat .ico {
 font-size: 24px;
 margin-bottom: 12px;
 }
 .feat h4 {
 font-size: 17px;
 font-weight: 700;
 margin-bottom: 8px;
 }
 .feat p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
 /* ============ PRICING TABLE ============ */
 .pricing {
 margin-top: 40px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 28px 24px;
 }
 .pricing-row {
 display: grid;
 grid-template-columns: 1.4fr 0.8fr 2fr 1fr;
 gap: 16px;
 padding: 16px 0;
 border-bottom: 1px solid var(--border);
 align-items: center;
 }
 .pricing-row:last-child { border-bottom: none; }
 .pricing-row.head {
 font-size: 11.5px;
 font-weight: 700;
 color: var(--accent-cyan);
 letter-spacing: 1.2px;
 padding-bottom: 12px;
 text-transform: uppercase;
 }
 .pricing-row .tier { font-weight: 700; }
 .pricing-row .price { font-weight: 800; color: var(--accent-gold); font-size: 17px; }
 .pricing-row .desc { font-size: 13.5px; color: var(--text-secondary); }
 .pricing-row .target { font-size: 13px; color: var(--text-muted); }
 /* ============ INFOGRAPHIC for NationalOS ============ */
 .society-graph {
 margin-top: 30px;
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(0, 217, 255, 0.05) 100%);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 36px 28px;
 text-align: center;
 }
 .society-graph .big {
 font-size: clamp(48px, 8vw, 80px);
 font-weight: 900;
 background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 letter-spacing: -2px;
 line-height: 1;
 }
 .society-graph .big-lbl {
 font-size: 14px;
 color: var(--text-secondary);
 margin-top: 4px;
 }
 .society-stats {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
 margin-top: 28px;
 }
 .society-stat {
 background: rgba(255,255,255,0.05);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 18px 12px;
 }
 .society-stat .v { font-size: 22px; font-weight: 800; color: var(--accent-cyan); }
 .society-stat .l { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
 /* ============ IFRAME EMBED ============ */
 .embed-container {
 margin-top: 36px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 16px;
 min-height: 540px;
 }
 .embed-container iframe {
 width: 100%;
 height: 600px;
 border: none;
 border-radius: 12px;
 background: white;
 }
 .embed-placeholder {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 360px;
 color: var(--text-muted);
 text-align: center;
 padding: 30px;
 }
 .embed-placeholder .pico { font-size: 38px; margin-bottom: 14px; }
 .embed-placeholder h4 { font-size: 18px; color: var(--text-primary); margin-bottom: 8px; }
 .embed-placeholder a {
 display: inline-block;
 margin-top: 18px;
 background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
 color: white;
 text-decoration: none;
 padding: 12px 24px;
 border-radius: 999px;
 font-weight: 700;
 font-size: 14px;
 transition: transform 0.2s;
 }
 .embed-placeholder a:hover { transform: translateY(-2px); }
 /* ============ CONTACT ============ */
 .contact-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
 margin-top: 30px;
 }
 .contact-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 28px;
 }
 .contact-card h4 {
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 12px;
 }
 .contact-card p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; }
 .contact-card .ml {
 display: inline-block;
 margin-top: 14px;
 color: var(--accent-cyan);
 text-decoration: none;
 font-weight: 700;
 font-size: 14px;
 }
 /* ============ PRESS ============ */
 .press-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
 margin-top: 30px;
 }
 .press-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 18px;
 padding: 26px 24px;
 text-decoration: none;
 color: inherit;
 transition: all 0.25s ease;
 display: flex;
 flex-direction: column;
 gap: 12px;
 }
 .press-card:hover {
 border-color: var(--border-bright);
 background: var(--surface-hover);
 transform: translateY(-3px);
 box-shadow: 0 14px 36px rgba(0, 217, 255, 0.10);
 }
 .press-meta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 12.5px;
 letter-spacing: 0.5px;
 }
 .press-outlet {
 color: var(--accent-cyan);
 font-weight: 800;
 letter-spacing: 1.2px;
 text-transform: uppercase;
 }
 .press-date {
 color: var(--text-muted);
 }
 .press-title {
 font-size: 18px;
 font-weight: 800;
 line-height: 1.35;
 color: var(--text-primary);
 letter-spacing: -0.3px;
 margin: 0;
 }
 .press-summary {
 font-size: 14px;
 color: var(--text-secondary);
 line-height: 1.6;
 margin: 0;
 }
 .press-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: auto;
 padding-top: 8px;
 }
 .press-byline {
 font-size: 12px;
 color: var(--text-muted);
 }
 .press-cta {
 color: var(--accent-cyan);
 font-weight: 700;
 font-size: 14px;
 }
 .press-card:hover .press-cta {
 text-decoration: underline;
 }
 .press-note {
 margin-top: 24px;
 padding: 16px 20px;
 background: rgba(245, 158, 11, 0.06);
 border: 1px solid rgba(245, 158, 11, 0.20);
 border-radius: 12px;
 font-size: 13.5px;
 color: var(--text-secondary);
 line-height: 1.6;
 }
 .press-note strong {
 color: var(--accent-gold);
 font-weight: 800;
 }
 /* ============ FOOTER ============ */
 .footer {
 margin-top: 80px;
 padding: 28px 24px;
 border-top: 1px solid var(--border);
 text-align: center;
 color: var(--text-muted);
 font-size: 12.5px;
 line-height: 1.7;
 }
 .footer strong { color: var(--text-secondary); }
 .footer-links { margin-top: 10px; }
 .footer-links a { color: var(--text-muted); text-decoration: none; margin: 0 8px; }
 .footer-links a:hover { color: var(--accent-cyan); }
 /* ============ RESPONSIVE ============ */
 @media (max-width: 900px) {
 .pillars, .trust-grid, .trends-grid, .feat-grid, .society-stats, .contact-grid, .press-grid {
 grid-template-columns: 1fr;
 }
 .hero-stats { grid-template-columns: repeat(3, 1fr); }
 .nav-container { padding: 12px 16px; flex-direction: column; gap: 10px; }
 .nav-left { flex-direction: column; gap: 10px; width: 100%; }
 .tabs { flex-wrap: wrap; justify-content: center; }
 .container { padding-top: 180px; }
 .hero { margin-top: -180px; padding: 220px 20px 60px; min-height: 640px; }
 .pricing-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
 .pricing-row.head { display: none; }
 .pricing-row .price { font-size: 20px; }
 }
 @media (max-width: 480px) {
 .hero-stats { grid-template-columns: 1fr; }
 .society-stats { grid-template-columns: repeat(2, 1fr); }
 .tab { font-size: 13px; padding: 6px 10px; }
 }
 </style>
</head>
<body>
 <!-- NAVIGATION -->
 <nav class="nav-container">
 <div class="nav-left">
 <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" data-tab="ax">AX Hospital</button>
 <button class="tab" data-tab="society">Society</button>
 <button class="tab" data-tab="banana">Studio</button>
 <button class="tab" data-tab="trust">Proof</button>
 <button class="tab" data-tab="press">Press</button>
 <button class="tab" data-tab="contact">Contact</button>
 </div>
 </div>
 <a class="powered-by live-link" href="http://211.233.58.201:7902/" target="_blank" rel="noopener" aria-label="LIVE — GiniGen X-Ray (새 창)">
 <span class="dot live-dot"></span>
 <span>LIVE · GiniGen X-Ray</span>
 <span class="live-arrow">↗</span>
 </a>
 </nav>
<!-- PARTICLES -->
 <div class="particles" id="particles"></div>
<div class="container">
<!-- ============ HOME ============ -->
 <div id="home" class="tab-content active">
 <section class="hero">
 <div class="hero-bg" aria-hidden="true">
 <video autoplay muted loop playsinline preload="auto" poster="logo-stacked.png">
 <source src="hero-v1.mp4" type="video/mp4">
 </video>
 <div class="hero-overlay"></div>
 </div>
 <div class="hero-content">
 <div class="hero-badge">⚡ 2026.04 — 과기정통부·NIA + NIPA 동시 공인</div>
 <h1>AI 전환의 모든 순간을,<br><span class="accent">한국어로.</span></h1>
 <p>
 진단(<strong>AX 종합병원</strong>) · 시뮬레이션(<strong>인공사회</strong>) · 생성(<strong>GiniGen Studio</strong>).<br>
 한국 기업·정부·시민의 AI 전환을 떠받치는 세 개의 기둥.
 </p>
 <div class="hero-stats">
 <div class="hero-stat">
 <div class="num">2위·5위</div>
 <div class="label">K-AI 리더보드 동시 점유 (단일사 유일)</div>
 </div>
 <div class="hero-stat">
 <div class="num">16대</div>
 <div class="label">NIPA NVIDIA Blackwell GPU</div>
 </div>
 <div class="hero-stat">
 <div class="num">100만+</div>
 <div class="label">HuggingFace 월간 활성 사용자</div>
 </div>
 </div>
 </div><!-- /.hero-content -->
 </section>
<!-- 3 PILLARS -->
 <section class="section">
 <div class="section-title">3 PILLARS</div>
 <h2 class="section-heading">한 회사, 세 개의 시간축.</h2>
 <p class="section-sub">
 AI를 도입하기 전(시뮬레이션) · 도입한 후(진단·치료) · 그리고 결과물을 만드는 순간(생성). 지니젠은 그 모든 순간을 한 플랫폼에서 끝냅니다.
 </p>
 <div class="pillars">
<div class="pillar" data-color="cyan" onclick="switchTab('ax')">
 <div class="pillar-icon">🩺</div>
 <div class="pillar-tag">FOR ENTERPRISE · B2B</div>
 <h3>AX 종합병원</h3>
 <div class="tagline">왜 틀리는지, 어떻게 고치는지 — 6개 진료과 통합 진단 SaaS.</div>
 <ul>
 <li>모델 X-Ray: Activation Patching · Causal Tracing · Logit Lens</li>
 <li>외주 5,000만 → AX 100만 (1/50 비용)</li>
 <li>3개월 → 30분 (1/4,320 시간)</li>
 <li>미토스 대응 · AI 기본법 자동 인증</li>
 </ul>
 <span class="pillar-cta">상세 보기</span>
 </div>
<div class="pillar" data-color="blue" onclick="switchTab('society')">
 <div class="pillar-icon">🌐</div>
 <div class="pillar-tag">FOR GOVERNMENT · B2G</div>
 <h3>인공사회 (NationalOS)</h3>
 <div class="tagline">576,000명의 디지털 시민이 당신의 정책을 먼저 살아봅니다.</div>
 <ul>
 <li>사주 계층화 5,200만 한국 페르소나</li>
 <li>576K LIVE NPC 실시간 운용 인프라</li>
 <li>조직 디지털 트윈 + 정책 ROI 사전 검증</li>
 <li>6개월치 시뮬레이션 → 3시간</li>
 </ul>
 <span class="pillar-cta">상세 보기</span>
 </div>
<div class="pillar" data-color="gold" onclick="switchTab('banana')">
 <div class="pillar-icon">🎬</div>
 <div class="pillar-tag">FOR CREATORS · B2B+B2C</div>
 <h3>GiniGen Studio</h3>
 <div class="tagline">한국어가 깨지지 않는 단 하나의 AI 콘텐츠 플랫폼.</div>
 <ul>
 <li>영상 · 이미지 · 카드뉴스 · 웹툰 · 음악 통합</li>
 <li>한글 100% 보존 텍스트 렌더링</li>
 <li>기업 홍보 영상부터 1인 크리에이터까지</li>
 <li>ginigen.ai 운영 · 글로벌 다국어 지원</li>
 </ul>
 <span class="pillar-cta">상세 보기</span>
 </div>
</div>
 </section>
<!-- TRUST BAR -->
 <section class="trust-bar">
 <div class="trust-bar-head">
 <span class="gold-badge">정부 공인</span>
 <h3>우리가 주장하는 것이 아니라, 정부가 수치로 확인했습니다.</h3>
 </div>
 <div class="trust-grid">
 <div class="trust-item">
 <div class="val">0.011</div>
 <div class="lbl">K-AI 리더보드 1위와의 점수 차 (Rogue-28B-MIX 2위)</div>
 </div>
 <div class="trust-item">
 <div class="val">2개</div>
 <div class="lbl">정부 기관 동시 검증 (과기정통부·NIA + NIPA / 2026.04)</div>
 </div>
 <div class="trust-item">
 <div class="val">300+</div>
 <div class="lbl">HuggingFace 운영 모델·스페이스</div>
 </div>
 <div class="trust-item">
 <div class="val">5,000명+</div>
 <div class="lbl">한국 AI 디스코드 커뮤니티</div>
 </div>
 </div>
 </section>
<!-- AI TRENDS -->
 <section class="section">
 <div class="section-title">MARKET CONTEXT · 2026</div>
 <h2 class="section-heading">시장이 가는 방향, 지니젠이 서 있는 자리.</h2>
 <p class="section-sub">
 Gartner · McKinsey · IDC가 공통으로 가리키는 2026 시그널. 우리가 그 시그널에 정확히 매핑됩니다.
 </p>
 <div class="trends-grid">
 <div class="trend-card">
 <div class="yr">AGENTIC AI</div>
 <h4>Agentic AI 시장 폭발</h4>
 <p>2025 $7.6B → 2026 $10.8B. 기업앱 40%가 AI 에이전트 탑재 (Gartner).</p>
 <div class="stat">→ AX 종합병원이 에이전트 사전 검증</div>
 </div>
 <div class="trend-card">
 <div class="yr">VERTICAL LLM</div>
 <h4>한국어 특화 모델 수요</h4>
 <p>SLM 시장 CAGR 28.7%. 도메인 특화 + 한국어 정확성이 차별 지점.</p>
 <div class="stat">→ Rogue·Darwin·AETHER 라인업 보유</div>
 </div>
 <div class="trend-card">
 <div class="yr">GOVERNANCE</div>
 <h4>거버넌스 · 컴플라이언스</h4>
 <p>79% 실험 vs 11% 프로덕션 갭. 검증 도구가 baseline 요구사항.</p>
 <div class="stat">→ 정책의학과 AI 기본법 자동 인증</div>
 </div>
 <div class="trend-card">
 <div class="yr">DIGITAL TWIN</div>
 <h4>조직·정책 디지털 트윈</h4>
 <p>맥킨지: 변혁 드라이버로서의 AI. 도입 전 시뮬레이션이 새 카테고리.</p>
 <div class="stat">→ 인공사회가 한국형 표준</div>
 </div>
 <div class="trend-card">
 <div class="yr">REGULATION</div>
 <h4>AI 기본법 2026.01.26 시행</h4>
 <p>고영향 AI 영향평가·워터마크·위험등급 의무. 자동 대응 도구 수요 폭증.</p>
 <div class="stat">→ 정책의학과 자동 부합</div>
 </div>
 <div class="trend-card">
 <div class="yr">SECURITY</div>
 <h4>미토스 충격 (2026.04)</h4>
 <p>오픈BSD 27년 결함이 수시간에 발견. 한국 99% 온프레미스 LLM 무방비.</p>
 <div class="stat">→ AX 응급실 24h 대응</div>
 </div>
 </div>
 </section>
 </div>
<!-- ============ AX 종합병원 ============ -->
 <div id="ax" class="tab-content">
 <section class="detail-hero">
 <div class="section-title">FOR ENTERPRISE · B2B</div>
 <h2>한국 최초 AI 모델·서비스<br><span class="accent">종합 진료 플랫폼</span>.</h2>
 <p class="lead">
 블랙박스였던 LLM 내부를 X-Ray로 투시 진단하고, 자동 처방·치료까지 한 플랫폼에서 완결합니다. 외주 5,000만원 진단을 100만원에, 3개월을 30분에.
 </p>
 <div class="hero-cta-row">
 <a href="#contact" class="btn btn-primary" onclick="switchTab('contact'); return false;">
 ✉ PoC 사전 신청
 </a>
 <a href="#pricing-ax" class="btn btn-ghost">
 💰 가격표 보기
 </a>
 </div>
 <div class="hero-price-strip">
 외래 진단 <strong>100만원/회</strong> · 종합검진 <strong>1,000만원/년</strong> · 정부 라이선스 <strong>5억원/년</strong>
 </div>
 </section>
<section class="section" id="pricing-ax">
 <div class="section-title">진료 가격 모델</div>
 <h2 class="section-heading">한국 AX의 의료보험 구조.</h2>
 <p class="section-sub">외래 100만 원부터 정부 라이선스 연 5억 원까지. 누구나 진단을 받을 수 있도록.</p>
 <div class="pricing">
 <div class="pricing-row head">
 <div>등급</div><div>가격</div><div>내용</div><div>대상</div>
 </div>
 <div class="pricing-row">
 <div class="tier">외래 (LLM 일반 진단)</div>
 <div class="price">100만 / 회</div>
 <div class="desc">Case 1·2 일반 검진 — 모델 능력 + 안전성</div>
 <div class="target">기업 IT팀, 소규모 LLM 도입처</div>
 </div>
 <div class="pricing-row">
 <div class="tier">정밀 (Layer 분석)</div>
 <div class="price">500만 / 회</div>
 <div class="desc">영상의학과 X-Ray 심층 분석 + 인과 추적</div>
 <div class="target">금융·국방·의료 온프레미스 LLM</div>
 </div>
 <div class="pricing-row">
 <div class="tier">응급실 (24h 콜)</div>
 <div class="price">500만 / 년</div>
 <div class="desc">미토스 응급 즉시 대응 + 5분 내 출동</div>
 <div class="target">서비스 운영 중인 기업·기관</div>
 </div>
 <div class="pricing-row">
 <div class="tier">종합검진 (연 회원)</div>
 <div class="price">1,000만 / 년</div>
 <div class="desc">6진료과 전체 진단 + 분기별 정기 검진</div>
 <div class="target">대기업 R&D, AI 자회사 운영처</div>
 </div>
 <div class="pricing-row">
 <div class="tier">정부 라이선스</div>
 <div class="price">5억 / 년</div>
 <div class="desc">부처·지자체 라이선스 + 진단 전문의 양성</div>
 <div class="target">정부 부처, 광역지자체</div>
 </div>
 </div>
 </section>
<section class="section">
 <div class="section-title">6개 진료과</div>
 <h2 class="section-heading">한 병원에서 모든 진단·처방을 받는다.</h2>
 <div class="feat-grid">
 <div class="feat">
 <div class="ico">🩻</div>
 <h4>영상의학과 — 모델 X-Ray</h4>
 <p>Activation Patching · Causal Tracing · Logit Lens 통합. 30층 LLM 각 layer에서 어느 지점이 환각·오류를 발생시키는지 정확히 식별.</p>
 </div>
 <div class="feat">
 <div class="ico">🫀</div>
 <h4>내과 — 모델 능력 진단</h4>
 <p>정확도 · 환각 · 편향을 자동 측정. 한국어 문화·언어 이해(CLIcK 0.791) 포함 종합 검진.</p>
 </div>
 <div class="feat">
 <div class="ico">⚕️</div>
 <h4>외과 — 자동 처방·치료</h4>
 <p>Fine-tuning · 증류(Distillation) · 교배(Crossbreeding) 자동 권고. Blackwell GPU 자동 할당·실행.</p>
 </div>
 <div class="feat">
 <div class="ico">🧠</div>
 <h4>정신의학과 — 안전성</h4>
 <p>Alignment · Jailbreak · 프롬프트 인젝션 취약점 자동 점검. 미토스 류 보안 위협 사전 차단.</p>
 </div>
 <div class="feat">
 <div class="ico">🚨</div>
 <h4>응급실 — 24h 대응</h4>
 <p>모델·서비스·앱 통합 응급 대응. 5분 내 대응, A/B 검증 후 안전 재배포 인증.</p>
 </div>
 <div class="feat">
 <div class="ico">📜</div>
 <h4>정책의학과 — AI 기본법 부합</h4>
 <p>고영향 AI 영향평가·워터마크 자동 삽입·위험등급 자동 산출. 2026.01.26 시행 법령 자동 충족.</p>
 </div>
 </div>
 </section>
<section class="section">
 <div class="section-title">데모</div>
 <h2 class="section-heading">실제 작동하는 플랫폼.</h2>
 <div class="embed-container">
 <div class="embed-placeholder">
 <div class="pico">🩺</div>
 <h4>AX 종합병원 데모 곧 공개</h4>
 <p>Phase 1 PoC (금융 1사 · 공공 1기관 · 의료 1병원 · 제조 대기업 1곳) 진행 중. 정식 데모는 베타 출시와 함께 공개됩니다.</p>
 <a href="#contact" onclick="switchTab('contact'); return false;">사전 PoC 신청하기</a>
 </div>
 </div>
 </section>
 </div>
<!-- ============ 인공사회 ============ -->
 <div id="society" class="tab-content">
 <section class="detail-hero">
 <div class="section-title">FOR GOVERNMENT · B2G</div>
 <h2>한국 사회를<br><span class="accent">디지털로 먼저 살아보다</span>.</h2>
 <p class="lead">
 NationalOS는 사주(四柱)로 계층화된 5,200만 한국 페르소나 위에 576,000명의 LIVE NPC를 실시간으로 운용합니다. 정책·전환을 적용하면 6개월 후 무엇이 일어나는가 — 실행 전에 확인하세요.
 </p>
 </section>
<section class="society-graph">
 <div class="big">576,000</div>
 <div class="big-lbl">LIVE NPCs · 지금 이 순간 실시간으로 살아 움직이는 디지털 시민들</div>
 <div class="society-stats">
 <div class="society-stat">
 <div class="v">5,200만</div>
 <div class="l">사주 계층화 한국 페르소나</div>
 </div>
 <div class="society-stat">
 <div class="v">144</div>
 <div class="l">Blackwell GPU (VIDRAFT 연합)</div>
 </div>
 <div class="society-stat">
 <div class="v">6개월 → 3h</div>
 <div class="l">시뮬레이션 시간 단축</div>
 </div>
 <div class="society-stat">
 <div class="v">KR→JP→CN→US</div>
 <div class="l">확장 로드맵</div>
 </div>
 </div>
 </section>
<section class="section">
 <div class="section-title">LIVE DEMO · 3D</div>
 <h2 class="section-heading">576,000 NPC, 실시간 3D 시뮬레이션.</h2>
 <p class="section-sub">VIDRAFT NationalOS Live3D — 한반도 위 디지털 시민의 실시간 흐름을 브라우저에서 직접 확인.</p>
 <div class="embed-container" style="min-height: 720px; padding: 12px;">
 <iframe src="https://vidraft-nationalos.hf.space/live3d.html"
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking"
 allowfullscreen
 loading="lazy"
 style="width:100%; height:700px; border:none; border-radius:12px; background:#0B1437; display:block;"
 title="NationalOS Live3D">
 </iframe>
 </div>
 </section>
<section class="section">
 <div class="section-title">3 USE CASES</div>
 <h2 class="section-heading">정부·기업·금융 — 디지털 트윈으로 검증하기.</h2>
 <div class="feat-grid">
 <div class="feat">
 <div class="ico">🏛️</div>
 <h4>정부 정책 사전 검증</h4>
 <p>광역지자체·부처 정책을 5,200만 페르소나에 적용. 시민 반응·경제 효과·세대 갈등을 사전 시뮬레이션.</p>
 </div>
 <div class="feat">
 <div class="ico">🏢</div>
 <h4>기업 조직 디지털 트윈</h4>
 <p>콜센터 300명 = 300 NPC. AI 전환 시나리오 적용 후 생산성·이직률·고객만족도 변화를 6개월 후까지 미리 본다.</p>
 </div>
 <div class="feat">
 <div class="ico">💼</div>
 <h4>금융·전자상거래 (Afford-X)</h4>
 <p>VIDRAFT World Model 기반. 신상품·요금제·캠페인이 시장에서 어떻게 반응할지 디지털 사회에서 먼저 테스트.</p>
 </div>
 </div>
 </section>
<section class="section">
 <div class="section-title">PHILOSOPHY</div>
 <h2 class="section-heading">"FFN as Society"</h2>
 <p class="section-sub">
 AI는 더 이상 도구가 아니라 사회 자체의 모형이 됩니다. 우리는 한국 사회의 다층 구조 — 세대·지역·산업·가치관 — 를 사주 차원의 계층 변수로 인코딩하여, "한국적 의사결정"을 시뮬레이션 가능한 형태로 코드화했습니다.
 </p>
 <div class="feat-grid">
 <div class="feat">
 <div class="ico">🔮</div>
 <h4>사주 계층화</h4>
 <p>출생일·성별·지역·세대를 차원으로 5,200만 페르소나 분포 재구성.</p>
 </div>
 <div class="feat">
 <div class="ico">⚡</div>
 <h4>LIVE NPC</h4>
 <p>576K NPC가 24시간 실시간으로 의사결정·소비·이동. PoC가 아닌 가동 중인 인프라.</p>
 </div>
 <div class="feat">
 <div class="ico">🌏</div>
 <h4>아시아 확장</h4>
 <p>한국 검증 후 일본·중국·미국 페르소나로 확장. 글로벌 정책 시뮬레이션 표준화.</p>
 </div>
 </div>
 </section>
 </div>
<!-- ============ GiniGen Studio ============ -->
 <div id="banana" class="tab-content">
 <section class="detail-hero">
 <div class="section-title">FOR CREATORS · B2B + B2C</div>
 <h2>한국어가 깨지지 않는<br><span class="accent">단 하나의 AI 콘텐츠 플랫폼</span>.</h2>
 <p class="lead">
 영상 · 이미지 · 카드뉴스 · 웹툰 · 음악. 글로벌 AI 영상 모델이 한국어 텍스트를 망가뜨릴 때, GiniGen Studio는 100% 보존합니다. 기업 홍보부터 1인 크리에이터까지.
 </p>
 </section>
<section class="section">
 <div class="section-title">CORE VALUE</div>
 <h2 class="section-heading">왜 GiniGen Studio인가.</h2>
 <div class="feat-grid">
 <div class="feat">
 <div class="ico">🇰🇷</div>
 <h4>한국어 100% 보존</h4>
 <p>한국어 텍스트 렌더링이 깨지지 않는 유일한 AI 영상·이미지 플랫폼. 글로벌 모델의 한계를 해결.</p>
 </div>
 <div class="feat">
 <div class="ico">🎬</div>
 <h4>대용량 텍스트 지원</h4>
 <p>장문 영상 스크립트·웹툰 한 화 분량을 한 번에. 글자 수 제약 없이 콘텐츠 생성.</p>
 </div>
 <div class="feat">
 <div class="ico">⚙️</div>
 <h4>5종 통합 워크플로우</h4>
 <p>영상 → 이미지 → 카드뉴스 → 웹툰 → 음악. 한 프로젝트에서 모두 연결.</p>
 </div>
 </div>
 </section>
<section class="section">
 <div class="section-title">TWO MARKETS</div>
 <h2 class="section-heading">B2B와 B2C, 양면 전략.</h2>
 <div class="feat-grid" style="grid-template-columns: 1fr 1fr;">
 <div class="feat">
 <div class="ico">🏢</div>
 <h4>B2B — 기업 홍보 영상 자동화</h4>
 <p>마케팅팀 · 광고대행사 · 미디어 기업 대상. 한국어 광고 영상·기업 IR 영상·소셜 콘텐츠를 시간/10·비용/20으로 단축.</p>
 </div>
 <div class="feat">
 <div class="ico">🎨</div>
 <h4>B2C — 1인 크리에이터 도구</h4>
 <p>웹툰 작가 · 카드뉴스 운영자 · 음악 콘텐츠 크리에이터 대상. 카드뉴스부터 웹툰 한 화까지 1인이 끝낸다.</p>
 </div>
 </div>
 </section>
<section class="section">
 <div class="section-title">LIVE PLATFORM</div>
 <h2 class="section-heading">지금 바로 사용 가능합니다.</h2>
 <div class="embed-container">
 <div class="embed-placeholder">
 <div class="pico">🎬</div>
 <h4>GiniGen Studio 정식 운영 중</h4>
 <p>ginigen.ai 도메인에서 정식 서비스 운영 중. Quick Start · Content Studio · Pro Studio · Tools 라인업 제공.</p>
 <a href="https://www.ginigen.ai" target="_blank">ginigen.ai에서 시작하기</a>
 </div>
 </div>
 </section>
 </div>
<!-- ============ TRUST ============ -->
 <div id="trust" class="tab-content">
 <section class="detail-hero">
 <div class="section-title">PROOF · 2026</div>
 <h2>주장이 아닌 <span class="accent">수치</span>.<br>광고가 아닌 <span class="accent">공인</span>.</h2>
 <p class="lead">
 설립 6개월 만에 두 개 정부 기관이 독립적으로 공인했습니다. 한국 AI 스타트업 중 이례적인 사례입니다.
 </p>
 </section>
<section class="section">
 <div class="section-title">2026.04 — 두 기관 동시 공인</div>
 <h2 class="section-heading">정부가 직접 검증한 기술 역량.</h2>
 <div class="feat-grid" style="grid-template-columns: 1fr 1fr;">
 <div class="feat">
 <div class="ico">🏅</div>
 <h4>과기정통부 + NIA · K-AI 리더보드</h4>
 <p><strong>Rogue-28B-MIX 종합 2위 (0.559) · Rogue-28B-KR 5위 (0.530)</strong><br>1위와 점수 차 0.011. 한 회사가 Top 5에 동시 등재된 유일 사례. API 호출 없이 모델 자체 성능 평가.</p>
 </div>
 <div class="feat">
 <div class="ico">⚡</div>
 <h4>NIPA · 첨단 GPU 지원 사업</h4>
 <p><strong>NVIDIA Blackwell GPU 16대 확보</strong><br>지니젠AI 단독 16대 + VIDRAFT 연합 128대 = 합계 144대. 2026.04.10부터 가동. 정부 공인 인프라.</p>
 </div>
 </div>
 </section>
<section class="section">
 <div class="section-title">GLOBAL PRESENCE</div>
 <h2 class="section-heading">HuggingFace에서 검증된 실사용.</h2>
 <div class="feat-grid">
 <div class="feat">
 <div class="ico">🌍</div>
 <h4>월간 100만+ MAU</h4>
 <p>HuggingFace 글로벌 사용자가 실제로 매월 100만 명 이상 사용 중. 광고 없는 자생적 트래픽.</p>
 </div>
 <div class="feat">
 <div class="ico">📦</div>
 <h4>300+ 모델·스페이스</h4>
 <p>지니젠 및 VIDRAFT 연합 오픈 라인업. 연간 800개 이상 신규 공개 운영.</p>
 </div>
 <div class="feat">
 <div class="ico">⭐</div>
 <h4>HuggingFace STAR AI Top 12</h4>
 <p>2024년 글로벌 STAR AI 선정. FINAL Bench는 HF 데이터셋 글로벌 Top 5.</p>
 </div>
 </div>
 </section>
<section class="section">
 <div class="section-title">PORTFOLIO MODELS</div>
 <h2 class="section-heading">핵심 모델 자산.</h2>
 <div class="feat-grid">
 <div class="feat">
 <div class="ico">🧬</div>
 <h4>Darwin 시리즈</h4>
 <p>진화적 모델 머징. CMA-ES 기반 FFN 교배. 9B·27B Opus 라인업, V8 NEG (Native Entropy Gating).</p>
 </div>
 <div class="feat">
 <div class="ico">🛸</div>
 <h4>AETHER-Pilot-14B</h4>
 <p>Latin-square Hybrid Attention 자체 설계 아키텍처. 5종 Attention 통합. Proto-AGI 라인.</p>
 </div>
 <div class="feat">
 <div class="ico">🛡️</div>
 <h4>Rogue 시리즈</h4>
 <p>K-AI 리더보드 2·5위 동시 점유. 한국어 특화 LLM. CLIcK 0.791 — 한국어 문화·언어 이해 최상위.</p>
 </div>
 </div>
 </section>
 </div>
<!-- ============ PRESS ============ -->
 <div id="press" class="tab-content">
 <section class="detail-hero">
 <div class="section-title">MEDIA · PRESS</div>
 <h2>한국 미디어가 본 <span class="accent">지니젠AI</span>.</h2>
 <p class="lead">
 설립 6개월, 한국 기술 매체가 보도한 핵심 마일스톤. 추가 보도·미디어 문의는 <a href="mailto:contact@ginigen.net" style="color:var(--accent-cyan); text-decoration:underline;">contact@ginigen.net</a>.
 </p>
 </section>
<section class="section">
 <div class="section-title">COVERAGE · 2026</div>
 <h2 class="section-heading">언론 보도.</h2>
 <div class="press-grid">
<a class="press-card" href="https://v.daum.net/v/20260416145034571" target="_blank" rel="noopener">
 <div class="press-meta">
 <span class="press-outlet">전자신문</span>
 <span class="press-date">2026.04.16</span>
 </div>
 <h3 class="press-title">지니젠AI, 'K-AI 리더보드' 2위…첨단 GPU 활용 지원 사업 선정</h3>
 <p class="press-summary">
 과기정통부·NIA 'K-AI 리더보드'에서 Rogue-27B-KR이 종합 점수 0.549로 2위 기록 — 1위(0.560)와 단 0.011 차이. 동시에 NIPA 첨단 GPU 활용 지원 사업에 선정돼 엔비디아 블랙웰 GPU 16장 확보. 한국어 특화 AI 영상 모델 성능 고도화 본격 추진.
 </p>
 <div class="press-footer">
 <span class="press-byline">이원지 기자 · Daum 미러</span>
 <span class="press-cta">원문 보기 ↗</span>
 </div>
 </a>
<a class="press-card" href="https://www.etnews.com/20260316000342" target="_blank" rel="noopener">
 <div class="press-meta">
 <span class="press-outlet">전자신문 · etnews</span>
 <span class="press-date">2026.03.16</span>
 </div>
 <h3 class="press-title">지니젠AI, 소형 AI모델 전용 평가체계 공개…허깅페이스 스페이스·데이터셋 10위권 동시 진입</h3>
 <p class="press-summary">
 지니젠AI와 비드래프트가 공동 개발한 'Smol AI 월드컵' 평가 플랫폼이 글로벌 AI 허브 허깅페이스에서 스페이스·데이터셋 인기 순위 동시 10위권 진입. 대규모 GPU 없이도 소형 언어모델의 실전 성능을 공정 비교 — AI 기술 민주화의 새 표준.
 </p>
 <div class="press-footer">
 <span class="press-byline">이원지 기자</span>
 <span class="press-cta">원문 보기 ↗</span>
 </div>
 </a>
</div>
<div class="press-note">
 <strong>미디어 키트.</strong> 로고 자산(<a href="logo.png" target="_blank" style="color:var(--accent-cyan);">가로형</a> · <a href="logo-stacked.png" target="_blank" style="color:var(--accent-cyan);">스택형</a>)·회사 소개·기술 자료·CEO 인터뷰 요청은 <a href="mailto:contact@ginigen.net" style="color:var(--accent-cyan);">contact@ginigen.net</a>으로 부탁드립니다. 24시간 내 응답.
 </div>
 </section>
 </div>
<!-- ============ CONTACT ============ -->
 <div id="contact" class="tab-content">
 <section class="detail-hero">
 <div class="section-title">CONTACT · COMPANY</div>
 <h2>함께 <span class="accent">한국 AI 전환</span>의<br>다음 장을 씁니다.</h2>
 <p class="lead">
 B2B PoC · 정부 라이선스 · 파트너십 · 투자 문의는 아래로 연락 주십시오. 24시간 내 응답합니다.
 </p>
 </section>
<section class="section">
 <div class="section-title">CORPORATE</div>
 <h2 class="section-heading">회사 정보.</h2>
 <div class="contact-grid">
 <div class="contact-card">
 <h4>🏢 (주) 지니젠AI · GiniGen AI Inc.</h4>
 <p>
 <strong>설립</strong>: 2025년 10월<br>
 <strong>대표</strong>: 최선영 (CEO)<br>
 <strong>주소</strong>: 서울 강남구 강남대로 112길 47, 2F 424<br>
 <strong>사업자번호</strong>: 763-88-03595<br>
 <strong>통신판매업</strong>: 2025-Seoul Gangnam-06701
 </p>
 </div>
 <div class="contact-card">
 <h4>✉️ 문의·파트너십</h4>
 <p>
 B2B PoC · 정부 라이선스 · 투자 · 미디어 문의를 환영합니다. GiniGen Studio 사용 문의는 ginigen.ai 도움말 센터로 부탁드립니다.
 </p>
 <a class="ml" href="mailto:contact@ginigen.net">contact@ginigen.net →</a>
 </div>
 </div>
 </section>
 </div>
</div>
<!-- FOOTER -->
 <footer class="footer">
 <strong>(주) 지니젠AI</strong> · 대표 최선영 · 서울 강남구 강남대로 112길 47, 2F 424 · 사업자번호 763-88-03595<br>
 통신판매업 신고 2025-Seoul Gangnam-06701 · © 2026 GiniGen AI Inc.
 <div class="footer-links">
 <a href="https://www.ginigen.ai" target="_blank">GiniGen Studio (ginigen.ai)</a>·
 <a href="https://huggingface.co/ginigen" target="_blank">HuggingFace</a>·
 <a href="https://huggingface.co/spaces/VIDraft/AI" target="_blank">VIDRAFT 허브</a>·
 <a href="#">개인정보처리방침</a>·
 <a href="#">이용약관</a>
 </div>
 </footer>
<script>
 // ============ TAB SWITCHING ============
 function switchTab(name) {
 document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
 document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
 const btn = document.querySelector(`.tab[data-tab="${name}"]`);
 const con = document.getElementById(name);
 if (btn) btn.classList.add('active');
 if (con) con.classList.add('active');
 window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 document.querySelectorAll('.tab').forEach(tab => {
 tab.addEventListener('click', e => {
 e.preventDefault();
 switchTab(tab.getAttribute('data-tab'));
 });
 });
 // ============ PARTICLES ============
 const pc = document.getElementById('particles');
 for (let i = 0; i < 22; i++) {
 const p = document.createElement('div');
 p.className = 'particle';
 const size = 2 + Math.random() * 4;
 p.style.width = size + 'px';
 p.style.height = size + 'px';
 p.style.left = Math.random() * 100 + '%';
 p.style.bottom = -10 + 'px';
 p.style.animationDelay = (Math.random() * 25) + 's';
 p.style.animationDuration = (18 + Math.random() * 14) + 's';
 pc.appendChild(p);
 }
 </script>
</body>
</html>