From d149af95b7e0c8fa99417c43c3409b429ed0dffd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Wed, 4 Mar 2026 10:12:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[china-tech]=20Agibot=20=ED=9C=B4?=
 =?UTF-8?q?=EB=A8=B8=EB=85=B8=EC=9D=B4=EB=93=9C=20=EB=A1=9C=EB=B4=87=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=ED=83=AD=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 두 번째 탭: Agibot 원정 A1 분석 콘텐츠
- 탭 전환 시 차트 지연 초기화 (lazy init)
- 비전 단계별 인터랙티브 UI
---
 .../views/china-tech/big-tech/index.blade.php | 420 ++++++++++++------
 1 file changed, 277 insertions(+), 143 deletions(-)

diff --git a/resources/views/china-tech/big-tech/index.blade.php b/resources/views/china-tech/big-tech/index.blade.php
index c8554738..fc2ca287 100644
--- a/resources/views/china-tech/big-tech/index.blade.php
+++ b/resources/views/china-tech/big-tech/index.blade.php
@@ -5,17 +5,29 @@
 @push('styles')
 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
 <style>
-    .bigtech-body { font-family: 'Noto Sans KR', sans-serif; background-color: #f0fdf4; color: #0f172a; }
+    .bigtech-body { font-family: 'Noto Sans KR', sans-serif; color: #0f172a; }
     .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 320px; max-height: 400px; }
     @media (min-width: 768px) { .chart-container { height: 380px; } }
-    .gradient-text { background: linear-gradient(to right, #16a34a, #2563eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-    .card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
 
     /* 탭 버튼 스타일 */
     .bigtech-tab { padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; border: 1px solid #e2e8f0; background: white; color: #64748b; cursor: pointer; }
     .bigtech-tab:hover { background: #f1f5f9; color: #334155; }
     .bigtech-tab.active { background: #16a34a; color: white; border-color: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3); }
     .bigtech-tab.placeholder { opacity: 0.6; cursor: default; }
+    .tab-content { display: none; }
+    .tab-content.active { display: block; }
+
+    /* 탭0: 캄브리콘 스타일 */
+    .tab-cambricon { background-color: #f0fdf4; }
+    .gradient-text { background: linear-gradient(to right, #16a34a, #2563eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+    .card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
+
+    /* 탭1: Agibot 스타일 */
+    .tab-agibot { background-color: #fafaf9; }
+    .vision-tab { transition: all 0.3s ease; }
+    .vision-tab.active { background-color: #4f46e5; color: white; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
 </style>
 @endpush
 
@@ -27,7 +39,7 @@
             <h2 class="text-lg font-bold text-slate-800 mb-3">5대 신흥빅테크</h2>
             <div class="flex flex-wrap gap-2">
                 <button class="bigtech-tab active" onclick="switchTab(0)">천텐스, 캄브리콘 AI 반도체 분석</button>
-                <button class="bigtech-tab placeholder" disabled>준비 중 (2)</button>
+                <button class="bigtech-tab" onclick="switchTab(1)">Agibot 휴머노이드 로봇 정보</button>
                 <button class="bigtech-tab placeholder" disabled>준비 중 (3)</button>
                 <button class="bigtech-tab placeholder" disabled>준비 중 (4)</button>
                 <button class="bigtech-tab placeholder" disabled>준비 중 (5)</button>
@@ -35,9 +47,8 @@
         </div>
     </div>
 
-    {{-- 탭 콘텐츠 영역 --}}
-    <div id="tab-content-0" class="tab-content">
-        {{-- 캄브리콘 분석 콘텐츠 --}}
+    {{-- ========== 탭 0: 캄브리콘 분석 ========== --}}
+    <div id="tab-content-0" class="tab-content active tab-cambricon">
         <header class="bg-white border-b-4 border-green-600 shadow-sm">
             <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
                 <h1 class="text-2xl font-black text-slate-800 tracking-tight">CAMBRICON <span class="text-green-600">INSIGHT</span></h1>
@@ -51,7 +62,6 @@
         </header>
 
         <main class="max-w-7xl mx-auto px-4 py-10">
-
             <section class="text-center mb-16">
                 <h2 class="text-4xl md:text-5xl font-black mb-4"><span class="gradient-text">캄브리콘 (Cambricon)</span>: 중국 AI 굴기의 핵심</h2>
                 <p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto font-medium">
@@ -118,7 +128,6 @@
                     <h3 class="text-3xl font-bold text-slate-800 mb-3">최근 주가 급등 원인 분석</h3>
                     <p class="text-slate-600 max-w-2xl mx-auto">미국의 대중국 반도체 수출 제재가 심화됨에 따라, 중국 내 AI 인프라 구축 수요가 캄브리콘으로 집중되고 있습니다.</p>
                 </div>
-
                 <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
                     <div class="space-y-6 lg:col-span-1">
                         <div class="p-4 bg-green-50 rounded-lg border border-green-100">
@@ -143,7 +152,6 @@
                             <p class="text-sm text-slate-600">국가 주도의 '동수서산(東數西算)' 데이터센터 인프라 프로젝트 핵심 공급사로 선정.</p>
                         </div>
                     </div>
-
                     <div class="lg:col-span-2">
                         <div class="chart-container">
                             <canvas id="stockChart"></canvas>
@@ -162,11 +170,9 @@
                     <p class="text-slate-600 mb-6 leading-relaxed">
                         초기 캄브리콘의 성장은 화웨이(Huawei)와의 협력이 결정적이었습니다. 2017년 화웨이의 모바일 AP '기린(Kirin) 970'에 캄브리콘의 NPU IP가 세계 최초로 탑재되었습니다.
                     </p>
-
                     <div class="chart-container" style="height: 250px; max-height: 250px;">
                         <canvas id="revenueChart"></canvas>
                     </div>
-
                     <p class="text-sm text-slate-600 mt-6 bg-slate-50 p-3 rounded border border-slate-100">
                         <strong>피벗 성공:</strong> 화웨이가 자체 AI 아키텍처(Da Vinci)를 개발하며 IP 라이선스 매출이 급감했으나, 캄브리콘은 신속하게 클라우드 및 엣지 서버용 칩셋 제조사로 비즈니스 모델을 전환하여 자립에 성공했습니다.
                     </p>
@@ -180,11 +186,9 @@
                     <p class="text-slate-600 mb-6 leading-relaxed">
                         Siyuan(스위안) 590 등 최신 라인업은 엔비디아의 A100 및 중국 수출용 다운그레이드 모델인 H20을 정조준하고 있습니다. 특히 FP32 및 메모리 대역폭에서 경쟁력을 확보하려 노력 중입니다.
                     </p>
-
                     <div class="chart-container" style="height: 280px; max-height: 300px;">
                         <canvas id="performanceChart"></canvas>
                     </div>
-
                     <p class="text-sm text-slate-600 mt-4 bg-slate-50 p-3 rounded border border-slate-100">
                         <strong>성능 평가:</strong> 최상위 칩인 H100에는 미치지 못하지만, 생태계 적응력과 중국 내 안정적 수급이라는 무기를 통해 H20 및 A100의 훌륭한 대체재로 평가받고 있습니다.
                     </p>
@@ -202,181 +206,311 @@
                     <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#기술자립</span>
                 </div>
             </section>
-
         </main>
 
         <footer class="bg-slate-900 text-slate-400 py-6 text-center text-sm rounded-b-lg">
             <p>&copy; 2024 Cambricon Analysis Report. Data presented is synthesized for infographic purposes.</p>
         </footer>
     </div>
+
+    {{-- ========== 탭 1: Agibot 휴머노이드 로봇 ========== --}}
+    <div id="tab-content-1" class="tab-content tab-agibot">
+        <nav class="bg-stone-50/90 backdrop-blur-md border-b border-stone-200">
+            <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
+                <div class="font-bold text-xl text-indigo-700 tracking-tight">🤖 Agibot Insight</div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="#agibot-intro" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">개요</a>
+                    <a href="#agibot-specs" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">원정 A1 스펙</a>
+                    <a href="#agibot-comparison" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">vs 옵티머스</a>
+                    <a href="#agibot-vision" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">미래 비전</a>
+                </div>
+            </div>
+        </nav>
+
+        <main class="max-w-6xl mx-auto px-4 py-10 space-y-24">
+
+            <!-- Hero / Intro -->
+            <section id="agibot-intro" class="text-center space-y-6 animate-fade-in mt-8">
+                <div class="inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-xs font-bold tracking-wider uppercase mb-4">Analysis Report</div>
+                <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
+                    화웨이 천재 소년의 반격,<br>
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-teal-500">애지봇 '원정 A1'</span>
+                </h1>
+                <p class="max-w-2xl mx-auto text-lg text-slate-600 leading-relaxed">
+                    화웨이 '천재 소년' 프로젝트 출신 펑즈후이(Zhihui Jun)가 설립한 애지봇(Agibot)은
+                    범용 휴머노이드 로봇 '원정(Yuanzheng) A1'을 통해 로보틱스 시장에 파란을 일으키고 있습니다.
+                    이 페이지는 원정 A1의 기술적 역량, 테슬라 옵티머스와의 차별점, 그리고 궁극적인 AI 결합 비전을 탐구합니다.
+                </p>
+            </section>
+
+            <!-- 기술 사양 -->
+            <section id="agibot-specs" class="scroll-mt-24 bg-white rounded-3xl p-8 shadow-sm border border-stone-100">
+                <div class="mb-8">
+                    <h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-4">⚙️ 원정 A1 기술 사양 대시보드</h2>
+                    <p class="text-slate-600">이 섹션에서는 원정 A1의 핵심 하드웨어 및 소프트웨어 스펙을 시각적으로 탐색합니다. 아래 데이터 카드와 방사형 차트를 통해 로봇의 물리적 특성과 컴퓨팅 능력이 어떻게 균형을 이루고 있는지 확인할 수 있습니다.</p>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
+                            <div class="text-3xl mb-2">📏</div>
+                            <div class="text-sm text-slate-500 font-medium mb-1">신장 / 체중</div>
+                            <div class="text-xl font-bold text-slate-800">175cm / 53kg</div>
+                            <div class="text-xs text-slate-400 mt-2">인간과 유사한 비율</div>
+                        </div>
+                        <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
+                            <div class="text-3xl mb-2">🦾</div>
+                            <div class="text-sm text-slate-500 font-medium mb-1">자유도 (DOF)</div>
+                            <div class="text-xl font-bold text-slate-800">49+</div>
+                            <div class="text-xs text-slate-400 mt-2">유연한 관절 모터 제어</div>
+                        </div>
+                        <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
+                            <div class="text-3xl mb-2">⚡</div>
+                            <div class="text-sm text-slate-500 font-medium mb-1">최대 보행 속도</div>
+                            <div class="text-xl font-bold text-slate-800">7 km/h</div>
+                            <div class="text-xs text-slate-400 mt-2">빠른 기동성 확보</div>
+                        </div>
+                        <div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
+                            <div class="text-3xl mb-2">🧠</div>
+                            <div class="text-sm text-slate-500 font-medium mb-1">AI 연산 능력</div>
+                            <div class="text-xl font-bold text-slate-800">200 TOPS</div>
+                            <div class="text-xs text-slate-400 mt-2">자체 개발 로컬 AI 처리</div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col justify-center">
+                        <h3 class="text-center text-sm font-semibold text-slate-500 mb-2 uppercase tracking-wider">원정 A1 역량 프로필</h3>
+                        <div class="chart-container">
+                            <canvas id="capabilityRadarChart"></canvas>
+                        </div>
+                        <p class="text-center text-xs text-slate-400 mt-4">* 각 지표는 동급 휴머노이드 대비 상대적 평가치입니다.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- vs 옵티머스 비교 -->
+            <section id="agibot-comparison" class="scroll-mt-24">
+                <div class="mb-8 text-center max-w-3xl mx-auto">
+                    <h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-4">🥊 원정 A1 vs 테슬라 옵티머스</h2>
+                    <p class="text-slate-600">현재 휴머노이드 업계의 기준점인 테슬라 옵티머스(Optimus Gen 2)와의 비교를 통해 애지봇이 취하고 있는 차별화 전략을 분석합니다.</p>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
+                    <div class="lg:col-span-3 bg-white rounded-3xl p-6 shadow-sm border border-stone-100">
+                        <div class="grid grid-cols-3 font-bold text-slate-700 border-b border-stone-200 pb-3 mb-3 text-sm md:text-base">
+                            <div>비교 항목</div>
+                            <div class="text-indigo-600">애지봇 원정 A1</div>
+                            <div class="text-slate-500">테슬라 옵티머스</div>
+                        </div>
+                        <div class="grid grid-cols-3 items-center py-3 border-b border-stone-100 text-sm md:text-base">
+                            <div class="font-medium text-slate-600">개발 철학</div>
+                            <div>Agile 개발, 오픈소스 생태계, 특화 AI 결합</div>
+                            <div>수직 계열화, 대량 양산, 자동차 제조 인프라 활용</div>
+                        </div>
+                        <div class="grid grid-cols-3 items-center py-3 border-b border-stone-100 text-sm md:text-base">
+                            <div class="font-medium text-slate-600">하드웨어 특징</div>
+                            <div>PowerFlow 커스텀 모터, 역관절 구조 채택 (경량화)</div>
+                            <div>테슬라 자체 설계 액추에이터, 인간과 매우 유사한 관절</div>
+                        </div>
+                        <div class="grid grid-cols-3 items-center py-3 border-b border-stone-100 text-sm md:text-base">
+                            <div class="font-medium text-slate-600">초기 타겟 시장</div>
+                            <div>B2B 산업 환경 및 AI 연구 플랫폼</div>
+                            <div>테슬라 기가팩토리 내부 투입 후 B2C 확대</div>
+                        </div>
+                        <div class="grid grid-cols-3 items-center py-3 text-sm md:text-base">
+                            <div class="font-medium text-slate-600">핵심 강점</div>
+                            <div class="text-indigo-600 font-medium">소프트웨어 혁신 속도, 경량성</div>
+                            <div class="text-slate-600 font-medium">제조 단가 절감, 데이터 수집 규모</div>
+                        </div>
+                    </div>
+                    <div class="lg:col-span-2 bg-white rounded-3xl p-6 shadow-sm border border-stone-100">
+                        <h3 class="text-center text-sm font-semibold text-slate-500 mb-4 uppercase tracking-wider">주요 물리 제원 비교</h3>
+                        <div class="chart-container" style="height: 250px;">
+                            <canvas id="comparisonBarChart"></canvas>
+                        </div>
+                        <p class="text-xs text-slate-500 mt-4 leading-relaxed">원정 A1은 옵티머스 대비 약간 더 가벼운 무게(53kg vs 57kg)를 유지하면서도 더 많은 관절 자유도를 통해 복잡한 움직임을 구현하는 데 집중하고 있습니다.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 미래 비전 -->
+            <section id="agibot-vision" class="scroll-mt-24 bg-slate-900 rounded-3xl p-8 md:p-12 shadow-lg text-stone-50">
+                <div class="mb-10 text-center max-w-3xl mx-auto">
+                    <div class="inline-block px-3 py-1 rounded-full bg-slate-800 text-indigo-300 text-xs font-bold tracking-wider uppercase mb-4">Future Vision</div>
+                    <h2 class="text-2xl md:text-4xl font-bold mb-4">🧠 'AI + 하드웨어' : Embodied AI의 실현</h2>
+                    <p class="text-slate-300">펑즈후이가 지향하는 궁극적인 목표는 단순한 자동화 기계가 아닙니다. 소프트웨어 세상에 갇혀 있던 AI에게 물리적 신체를 부여하여 현실 세계와 상호작용하는 <strong>'Embodied AI (구현된 AI)'</strong> 모델을 구축하는 것입니다. 아래 단계를 클릭하여 비전을 확인하세요.</p>
+                </div>
+                <div class="flex flex-col md:flex-row justify-center gap-4 mb-8">
+                    <button onclick="updateVision(1)" id="btn-vision-1" class="vision-tab active flex-1 py-4 px-6 rounded-xl bg-slate-800 text-center cursor-pointer border border-slate-700 hover:border-indigo-400">
+                        <div class="text-2xl mb-2">🌐</div>
+                        <div class="font-bold">1단계: Foundation Model</div>
+                    </button>
+                    <button onclick="updateVision(2)" id="btn-vision-2" class="vision-tab flex-1 py-4 px-6 rounded-xl bg-slate-800 text-center cursor-pointer border border-slate-700 hover:border-indigo-400">
+                        <div class="text-2xl mb-2">🦾</div>
+                        <div class="font-bold">2단계: Hardware Integration</div>
+                    </button>
+                    <button onclick="updateVision(3)" id="btn-vision-3" class="vision-tab flex-1 py-4 px-6 rounded-xl bg-slate-800 text-center cursor-pointer border border-slate-700 hover:border-indigo-400">
+                        <div class="text-2xl mb-2">🚀</div>
+                        <div class="font-bold">3단계: AGI & Ecosystem</div>
+                    </button>
+                </div>
+                <div id="vision-content" class="bg-slate-800 rounded-2xl p-6 md:p-8 min-h-[200px] flex items-center border border-slate-700">
+                    <div class="animate-fade-in text-lg leading-relaxed text-slate-200">
+                        <h3 class="text-xl font-bold text-indigo-300 mb-3">대규모 언어/시각 모델의 진화</h3>
+                        <p>첫 번째 단계는 뛰어난 인지 능력과 추론 능력을 갖춘 AI 파운데이션 모델(Foundation Model)의 활용입니다. 애지봇은 자체적인 200 TOPS 연산 모듈을 통해 클라우드에 의존하지 않고 로컬에서 방대한 시각 데이터와 언어 명령을 실시간으로 처리할 수 있는 '두뇌'를 개발합니다. 이는 로봇이 인간의 언어를 이해하고 시각적으로 환경을 인식하는 핵심 기반이 됩니다.</p>
+                    </div>
+                </div>
+            </section>
+
+        </main>
+
+        <footer class="bg-stone-100 border-t border-stone-200 py-8 text-center text-slate-500 text-sm">
+            <p>&copy; 2026 Agibot & Robotics Analysis SPA. Generated for educational demonstration.</p>
+            <p class="mt-2 text-xs">Note: Specs are based on publicly available data and estimations.</p>
+        </footer>
+    </div>
 </div>
 @endsection
 
 @push('scripts')
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
+// 탭별 차트 초기화 상태 추적
+const chartInitialized = { 0: false, 1: false };
+
 function switchTab(index) {
-    // 현재는 탭 0만 활성화
+    // 탭 버튼 활성화
     document.querySelectorAll('.bigtech-tab').forEach((btn, i) => {
         btn.classList.toggle('active', i === index);
     });
+    // 탭 콘텐츠 전환
+    document.querySelectorAll('.tab-content').forEach((content, i) => {
+        content.classList.toggle('active', i === index);
+    });
+    // 해당 탭 차트 초기화 (최초 1회)
+    if (!chartInitialized[index]) {
+        if (index === 0) initCambriconCharts();
+        if (index === 1) initAgibotCharts();
+        chartInitialized[index] = true;
+    }
+    // 스크롤 맨 위로
+    window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
-// Chart.js 초기화
-document.addEventListener('DOMContentLoaded', function() {
+// === Agibot 비전 탭 상호작용 ===
+const visionData = {
+    1: { title: "대규모 언어/시각 모델의 진화", text: "첫 번째 단계는 뛰어난 인지 능력과 추론 능력을 갖춘 AI 파운데이션 모델(Foundation Model)의 활용입니다. 애지봇은 자체적인 200 TOPS 연산 모듈을 통해 클라우드에 의존하지 않고 로컬에서 방대한 시각 데이터와 언어 명령을 실시간으로 처리할 수 있는 '두뇌'를 개발합니다. 이는 로봇이 인간의 언어를 이해하고 시각적으로 환경을 인식하는 핵심 기반이 됩니다." },
+    2: { title: "소프트웨어의 물리적 체화 (Embodied AI)", text: "두 번째는 원정 A1과 같은 정교한 하드웨어에 AI를 이식하는 것입니다. 'AI + 하드웨어' 모델의 핵심은 AI가 가상 세계를 넘어 현실의 물리 법칙, 중력, 마찰력 등을 경험하며 학습하는 것입니다. 고성능 조인트 모터(PowerFlow)와 49+ 자유도의 결합은 AI의 판단을 정확한 물리적 움직임으로 변환하는 필수적인 브릿지 역할을 합니다." },
+    3: { title: "범용 인공지능(AGI)과 오픈 생태계 구축", text: "마지막으로 펑즈후이는 애지봇 플랫폼을 오픈소스화하여 전 세계 연구자들이 참여하는 생태계를 꿈꿉니다. 특정한 작업만 수행하는 로봇이 아닌, 어떤 환경에서도 적응하고 학습할 수 있는 AGI(범용 인공지능)를 로보틱스를 통해 달성하고자 합니다. 스마트폰이 모바일 생태계를 만든 것처럼, 휴머노이드가 물리적 노동의 플랫폼이 되는 미래입니다." }
+};
+
+function updateVision(step) {
+    document.querySelectorAll('.vision-tab').forEach(btn => {
+        btn.classList.remove('active');
+        btn.classList.add('bg-slate-800');
+    });
+    const activeBtn = document.getElementById('btn-vision-' + step);
+    activeBtn.classList.add('active');
+    activeBtn.classList.remove('bg-slate-800');
+
+    const data = visionData[step];
+    document.getElementById('vision-content').innerHTML =
+        '<div class="text-lg leading-relaxed text-slate-200" style="animation: fadeIn 0.5s ease-in-out;">' +
+        '<h3 class="text-xl font-bold text-indigo-300 mb-3">' + data.title + '</h3>' +
+        '<p>' + data.text + '</p></div>';
+}
+
+// === 캄브리콘 차트 초기화 ===
+function initCambriconCharts() {
     const wrapLabel = (label, max = 16) => {
         const words = label.split(' ');
-        const lines = [];
-        let currentLine = '';
-        words.forEach(word => {
-            if ((currentLine + word).length > max) {
-                if (currentLine) lines.push(currentLine.trim());
-                currentLine = word + ' ';
-            } else {
-                currentLine += word + ' ';
-            }
-        });
-        if (currentLine) lines.push(currentLine.trim());
+        const lines = []; let cur = '';
+        words.forEach(w => { if ((cur + w).length > max) { if (cur) lines.push(cur.trim()); cur = w + ' '; } else { cur += w + ' '; } });
+        if (cur) lines.push(cur.trim());
         return lines;
     };
-
-    const commonTooltip = {
-        callbacks: {
-            title: function(tooltipItems) {
-                const item = tooltipItems[0];
-                let label = item.chart.data.labels[item.dataIndex];
-                if (Array.isArray(label)) {
-                    return label.join(' ');
-                } else {
-                    return label;
-                }
-            }
-        }
-    };
-
-    const commonOptions = {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            tooltip: commonTooltip,
-            legend: {
-                labels: { font: { family: "'Noto Sans KR', sans-serif" } }
-            }
-        }
-    };
+    const commonTooltip = { callbacks: { title: function(items) { let l = items[0].chart.data.labels[items[0].dataIndex]; return Array.isArray(l) ? l.join(' ') : l; } } };
+    const commonOpts = { responsive: true, maintainAspectRatio: false, plugins: { tooltip: commonTooltip, legend: { labels: { font: { family: "'Noto Sans KR', sans-serif" } } } } };
 
     // 주가 차트
-    const stockLabelsRaw = ['2023 Q1 (생성AI 붐)', '2023 Q2', '2023 Q3 (수출규제 강화)', '2023 Q4', '2024 Q1 (대규모 수주)', '2024 Q2', '2024 Q3 (Siyuan 590)'];
-    const stockLabels = stockLabelsRaw.map(lbl => wrapLabel(lbl));
-
-    const ctxStock = document.getElementById('stockChart').getContext('2d');
-    new Chart(ctxStock, {
+    new Chart(document.getElementById('stockChart').getContext('2d'), {
         type: 'line',
         data: {
-            labels: stockLabels,
-            datasets: [{
-                label: '상대적 주가 지수 추이 (추정)',
-                data: [60, 150, 140, 135, 180, 240, 290],
-                borderColor: '#16a34a',
-                backgroundColor: 'rgba(22, 163, 74, 0.1)',
-                borderWidth: 3,
-                pointBackgroundColor: '#2563eb',
-                pointRadius: 5,
-                fill: true,
-                tension: 0.3
-            }]
+            labels: ['2023 Q1 (생성AI 붐)', '2023 Q2', '2023 Q3 (수출규제 강화)', '2023 Q4', '2024 Q1 (대규모 수주)', '2024 Q2', '2024 Q3 (Siyuan 590)'].map(l => wrapLabel(l)),
+            datasets: [{ label: '상대적 주가 지수 추이 (추정)', data: [60, 150, 140, 135, 180, 240, 290], borderColor: '#16a34a', backgroundColor: 'rgba(22, 163, 74, 0.1)', borderWidth: 3, pointBackgroundColor: '#2563eb', pointRadius: 5, fill: true, tension: 0.3 }]
         },
-        options: {
-            ...commonOptions,
-            scales: {
-                y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
-                x: { grid: { display: false }, ticks: { font: { size: 11 } } }
-            }
-        }
+        options: { ...commonOpts, scales: { y: { beginAtZero: true, grid: { color: '#e2e8f0' } }, x: { grid: { display: false }, ticks: { font: { size: 11 } } } } }
     });
 
     // 매출 비중 차트
-    const revLabelsRaw = ['모바일 IP (화웨이 등)', '클라우드/서버 가속기', '엣지 컴퓨팅', '기타 서비스'];
-    const revLabels = revLabelsRaw.map(lbl => wrapLabel(lbl));
-
-    const ctxRev = document.getElementById('revenueChart').getContext('2d');
-    new Chart(ctxRev, {
+    new Chart(document.getElementById('revenueChart').getContext('2d'), {
         type: 'bar',
         data: {
-            labels: revLabels,
+            labels: ['모바일 IP (화웨이 등)', '클라우드/서버 가속기', '엣지 컴퓨팅', '기타 서비스'].map(l => wrapLabel(l)),
             datasets: [
-                {
-                    label: '2018년 매출 비중 (%)',
-                    data: [95, 2, 0, 3],
-                    backgroundColor: '#ef4444',
-                    borderRadius: 4
-                },
-                {
-                    label: '2023년 매출 비중 (%)',
-                    data: [5, 65, 20, 10],
-                    backgroundColor: '#3b82f6',
-                    borderRadius: 4
-                }
+                { label: '2018년 매출 비중 (%)', data: [95, 2, 0, 3], backgroundColor: '#ef4444', borderRadius: 4 },
+                { label: '2023년 매출 비중 (%)', data: [5, 65, 20, 10], backgroundColor: '#3b82f6', borderRadius: 4 }
             ]
         },
-        options: {
-            ...commonOptions,
-            indexAxis: 'y',
-            scales: {
-                x: { stacked: false, beginAtZero: true, max: 100 },
-                y: { stacked: false, ticks: { font: { size: 11 } } }
-            }
-        }
+        options: { ...commonOpts, indexAxis: 'y', scales: { x: { stacked: false, beginAtZero: true, max: 100 }, y: { stacked: false, ticks: { font: { size: 11 } } } } }
     });
 
-    // 성능 비교 레이더 차트
-    const perfLabelsRaw = ['AI 연산 (INT8 TOPS)', 'AI 연산 (FP32 TFLOPS)', '메모리 대역폭 (GB/s)', '에너지 효율성'];
-    const perfLabels = perfLabelsRaw.map(lbl => wrapLabel(lbl));
-
-    const ctxPerf = document.getElementById('performanceChart').getContext('2d');
-    new Chart(ctxPerf, {
+    // 성능 비교 레이더
+    new Chart(document.getElementById('performanceChart').getContext('2d'), {
         type: 'radar',
         data: {
-            labels: perfLabels,
+            labels: ['AI 연산 (INT8 TOPS)', 'AI 연산 (FP32 TFLOPS)', '메모리 대역폭 (GB/s)', '에너지 효율성'].map(l => wrapLabel(l)),
             datasets: [
-                {
-                    label: 'Siyuan 590 (Cambricon)',
-                    data: [75, 70, 80, 85],
-                    borderColor: '#06b6d4',
-                    backgroundColor: 'rgba(6, 182, 212, 0.2)',
-                    pointBackgroundColor: '#06b6d4',
-                    borderWidth: 2
-                },
-                {
-                    label: 'NVIDIA H20 (수출통제용)',
-                    data: [70, 65, 85, 75],
-                    borderColor: '#f97316',
-                    backgroundColor: 'rgba(249, 115, 22, 0.2)',
-                    pointBackgroundColor: '#f97316',
-                    borderWidth: 2
-                },
-                {
-                    label: 'NVIDIA A100',
-                    data: [65, 80, 95, 70],
-                    borderColor: '#8b5cf6',
-                    backgroundColor: 'rgba(139, 92, 246, 0.2)',
-                    pointBackgroundColor: '#8b5cf6',
-                    borderWidth: 2
-                }
+                { label: 'Siyuan 590 (Cambricon)', data: [75, 70, 80, 85], borderColor: '#06b6d4', backgroundColor: 'rgba(6, 182, 212, 0.2)', pointBackgroundColor: '#06b6d4', borderWidth: 2 },
+                { label: 'NVIDIA H20 (수출통제용)', data: [70, 65, 85, 75], borderColor: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.2)', pointBackgroundColor: '#f97316', borderWidth: 2 },
+                { label: 'NVIDIA A100', data: [65, 80, 95, 70], borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.2)', pointBackgroundColor: '#8b5cf6', borderWidth: 2 }
+            ]
+        },
+        options: { ...commonOpts, scales: { r: { angleLines: { color: '#e2e8f0' }, grid: { color: '#e2e8f0' }, pointLabels: { font: { size: 11 }, color: '#475569' }, ticks: { display: false, min: 0, max: 100 } } } }
+    });
+}
+
+// === Agibot 차트 초기화 ===
+function initAgibotCharts() {
+    Chart.defaults.font.family = "'Noto Sans KR', sans-serif";
+
+    // 역량 레이더
+    new Chart(document.getElementById('capabilityRadarChart').getContext('2d'), {
+        type: 'radar',
+        data: {
+            labels: ['인지 능력 (Vision)', '연산/AI (Compute)', '민첩성 (Agility)', '조작 정밀도 (Dexterity)', '적재 하중 (Payload)'],
+            datasets: [{ label: '원정 A1 역량지수', data: [85, 95, 90, 80, 60], backgroundColor: 'rgba(79, 70, 229, 0.2)', borderColor: 'rgba(79, 70, 229, 1)', pointBackgroundColor: 'rgba(79, 70, 229, 1)', pointBorderColor: '#fff', borderWidth: 2 }]
+        },
+        options: {
+            responsive: true, maintainAspectRatio: false,
+            scales: { r: { angleLines: { color: 'rgba(0,0,0,0.05)' }, grid: { color: 'rgba(0,0,0,0.05)' }, pointLabels: { font: { size: 12, weight: '500' }, color: '#475569' }, ticks: { display: false, min: 0, max: 100 } } },
+            plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 12 } }
+        }
+    });
+
+    // 비교 바 차트
+    new Chart(document.getElementById('comparisonBarChart').getContext('2d'), {
+        type: 'bar',
+        data: {
+            labels: ['무게 (Weight, kg)', '자유도 (DOF)'],
+            datasets: [
+                { label: '애지봇 원정 A1', data: [53, 49], backgroundColor: 'rgba(79, 70, 229, 0.8)', borderRadius: 6 },
+                { label: '테슬라 옵티머스 (Gen 2)', data: [57, 28], backgroundColor: 'rgba(148, 163, 184, 0.6)', borderRadius: 6 }
             ]
         },
         options: {
-            ...commonOptions,
-            scales: {
-                r: {
-                    angleLines: { color: '#e2e8f0' },
-                    grid: { color: '#e2e8f0' },
-                    pointLabels: { font: { size: 11 }, color: '#475569' },
-                    ticks: { display: false, min: 0, max: 100 }
-                }
+            responsive: true, maintainAspectRatio: false,
+            interaction: { mode: 'index', intersect: false },
+            scales: { y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)', drawBorder: false } }, x: { grid: { display: false } } },
+            plugins: {
+                legend: { position: 'bottom', labels: { padding: 20, usePointStyle: true, pointStyle: 'circle' } },
+                tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 12, callbacks: { label: function(ctx) { let l = ctx.dataset.label || ''; if (l) l += ': '; l += ctx.parsed.y + (ctx.dataIndex === 0 ? ' kg' : ' 개'); return l; } } }
             }
         }
     });
+}
+
+// 페이지 로드 시 탭 0 차트 초기화
+document.addEventListener('DOMContentLoaded', function() {
+    initCambriconCharts();
+    chartInitialized[0] = true;
 });
 </script>
 @endpush