@extends('layouts.app')

@section('title', '중국 AI기술')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
    .ai-body { font-family: 'Noto Sans KR', sans-serif; color: #0f172a; }

    /* 탭 스타일 */
    .ai-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; }
    .ai-tab:hover { background: #f1f5f9; color: #334155; }
    .ai-tab.active { background: #2563eb; color: white; border-color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); }
    .ai-tab-content { display: none; }
    .ai-tab-content.active { display: block; }

    /* 타임라인 */
    .timeline-line { position: absolute; left: 1.5rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #3b82f6, #8b5cf6, #ec4899); }
    .timeline-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px; position: relative; z-index: 1; }

    /* 카드 */
    .ai-card { background: white; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; transition: all 0.2s; }
    .ai-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }

    /* 스탯 카드 */
    .stat-card { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); color: white; border-radius: 1rem; padding: 1.5rem; }

    /* 비교 테이블 */
    .compare-table th { background: #f8fafc; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .compare-table td { font-size: 0.875rem; }

    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .animate-up { animation: fadeInUp 0.6s ease-out forwards; }
</style>
@endpush

@section('content')
<div class="ai-body min-h-screen">
    {{-- 헤더 --}}
    <div style="background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 50%, #1e1b4b 100%);" class="text-white px-6 py-8 rounded-b-2xl mb-6">
        <div style="max-width: 1400px; margin: 0 auto;">
            <p class="text-blue-300 text-sm font-medium mb-1">중국의 기술도약</p>
            <h1 class="text-3xl font-black mb-2" style="background: linear-gradient(to right, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">중국 AI기술 발전과정</h1>
            <p class="text-gray-300 text-sm">2012 딥러닝 혁명부터 2026 글로벌 AI 패권 경쟁까지</p>
        </div>
    </div>

    {{-- 탭 네비게이션 --}}
    <div style="max-width: 1400px; margin: 0 auto;" class="px-4">
        <div class="flex flex-wrap gap-2 mb-6">
            <button class="ai-tab active" onclick="switchAiTab(0)">개요 · 연대기</button>
            <button class="ai-tab" onclick="switchAiTab(1)">주요 기업 · 모델</button>
            <button class="ai-tab" onclick="switchAiTab(2)">정부 정책</button>
            <button class="ai-tab" onclick="switchAiTab(3)">미·중 AI 경쟁</button>
            <button class="ai-tab" onclick="switchAiTab(4)">시사점</button>
        </div>

        {{-- ============================================= --}}
        {{-- 탭 0: 개요 · 연대기 --}}
        {{-- ============================================= --}}
        <div class="ai-tab-content active" id="aiTab0">
            {{-- 핵심 수치 --}}
            <div class="grid gap-4 mb-8" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                <div class="stat-card">
                    <p class="text-blue-200 text-xs font-medium">AI 특허 출원 (2023)</p>
                    <p class="text-3xl font-black mt-1">61,154건</p>
                    <p class="text-blue-200 text-xs mt-1">전 세계 1위 (미국 21,400건)</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
                    <p class="text-purple-200 text-xs font-medium">AI 기업 수</p>
                    <p class="text-3xl font-black mt-1">4,500+</p>
                    <p class="text-purple-200 text-xs mt-1">미국에 이어 세계 2위</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #059669, #34d399);">
                    <p class="text-emerald-200 text-xs font-medium">AI 시장 규모 (2025)</p>
                    <p class="text-3xl font-black mt-1">$400억+</p>
                    <p class="text-emerald-200 text-xs mt-1">연평균 성장률 30%+</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #dc2626, #f87171);">
                    <p class="text-red-200 text-xs font-medium">AI 논문 발표</p>
                    <p class="text-3xl font-black mt-1">세계 1위</p>
                    <p class="text-red-200 text-xs mt-1">2019년 미국 추월</p>
                </div>
            </div>

            {{-- 타임라인 --}}
            <h2 class="text-xl font-bold mb-4 text-gray-800">발전 연대기</h2>
            <div class="relative pl-12 space-y-6 mb-8">
                <div class="timeline-line"></div>

                {{-- 2012~2015 --}}
                <div class="relative animate-up">
                    <div class="timeline-dot bg-blue-500" style="position: absolute; left: -2.15rem; top: 0.5rem; box-shadow-color: #3b82f6;"></div>
                    <div class="ai-card">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs font-bold rounded">2012~2015</span>
                            <span class="font-bold text-gray-800">딥러닝 기반 구축기</span>
                        </div>
                        <ul class="text-sm text-gray-600 space-y-1 ml-4 list-disc">
                            <li><strong>2012</strong> — 바이두, 딥러닝 연구소(IDL) 설립. 앤드류 응(Andrew Ng) 영입</li>
                            <li><strong>2013</strong> — 바이두 음성인식 Deep Speech 발표, 중국어 인식률 획기적 개선</li>
                            <li><strong>2014</strong> — 알리바바, 텐센트 AI 연구소 설립. 중국 AI 스타트업 투자 급증</li>
                            <li><strong>2015</strong> — 바이두 자율주행 프로젝트 시작. 센스타임(SenseTime) 안면인식 기술 상용화</li>
                        </ul>
                    </div>
                </div>

                {{-- 2016~2017 --}}
                <div class="relative animate-up">
                    <div class="timeline-dot bg-indigo-500" style="position: absolute; left: -2.15rem; top: 0.5rem; box-shadow-color: #6366f1;"></div>
                    <div class="ai-card">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="px-2 py-0.5 bg-indigo-100 text-indigo-700 text-xs font-bold rounded">2016~2017</span>
                            <span class="font-bold text-gray-800">국가 전략 수립기</span>
                        </div>
                        <ul class="text-sm text-gray-600 space-y-1 ml-4 list-disc">
                            <li><strong>2016</strong> — AlphaGo 충격 → 중국 정부, AI를 국가 핵심 전략으로 격상</li>
                            <li><strong>2017.3</strong> — AI가 최초로 정부업무보고에 등장 (리커창 총리)</li>
                            <li><strong>2017.7</strong> — <strong>「차세대 AI 발전계획」</strong> 발표 — 2030년 AI 세계 1위 목표</li>
                            <li><strong>2017</strong> — iFlytek 음성인식, 메그비(Megvii) Face++ 글로벌 진출</li>
                        </ul>
                    </div>
                </div>

                {{-- 2018~2020 --}}
                <div class="relative animate-up">
                    <div class="timeline-dot bg-purple-500" style="position: absolute; left: -2.15rem; top: 0.5rem; box-shadow-color: #a855f7;"></div>
                    <div class="ai-card">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs font-bold rounded">2018~2020</span>
                            <span class="font-bold text-gray-800">상용화 · 반도체 위기</span>
                        </div>
                        <ul class="text-sm text-gray-600 space-y-1 ml-4 list-disc">
                            <li><strong>2018</strong> — 미국, 화웨이/ZTE 제재 시작. 중국 AI 반도체 자립 필요성 대두</li>
                            <li><strong>2019</strong> — 화웨이, 자체 AI칩 Ascend 910 발표. 캄브리콘 MLU 시리즈 출시</li>
                            <li><strong>2019</strong> — AI 논문 수 미국 추월, 특허 출원 세계 1위 달성</li>
                            <li><strong>2020</strong> — 코로나 대응에 AI 대규모 활용 (안면인식, 열화상, 접촉추적)</li>
                            <li><strong>2020</strong> — 미국 AI칩 수출규제 본격화 (NVIDIA A100 등)</li>
                        </ul>
                    </div>
                </div>

                {{-- 2021~2023 --}}
                <div class="relative animate-up">
                    <div class="timeline-dot bg-pink-500" style="position: absolute; left: -2.15rem; top: 0.5rem; box-shadow-color: #ec4899;"></div>
                    <div class="ai-card">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="px-2 py-0.5 bg-pink-100 text-pink-700 text-xs font-bold rounded">2021~2023</span>
                            <span class="font-bold text-gray-800">대규모 언어모델(LLM) 경쟁</span>
                        </div>
                        <ul class="text-sm text-gray-600 space-y-1 ml-4 list-disc">
                            <li><strong>2021</strong> — 바이두 ERNIE 3.0, 화웨이 PanGu-α (2,000억 파라미터) 발표</li>
                            <li><strong>2022.11</strong> — ChatGPT 등장 → 중국 "AI 시빌(Sputnik) 모멘트"</li>
                            <li><strong>2023.3</strong> — 바이두 ERNIE Bot(文心一言) 출시. 100+ 중국 LLM 난립 ("백모대전")</li>
                            <li><strong>2023.8</strong> — 중국 정부, 생성형 AI 서비스 관리법 시행 (세계 최초 AI 규제법)</li>
                            <li><strong>2023</strong> — 알리바바 Qwen, 01.AI Yi, Moonshot Kimi, Zhipu GLM-4 등 연쇄 출시</li>
                        </ul>
                    </div>
                </div>

                {{-- 2024~2026 --}}
                <div class="relative animate-up">
                    <div class="timeline-dot bg-red-500" style="position: absolute; left: -2.15rem; top: 0.5rem; box-shadow-color: #ef4444;"></div>
                    <div class="ai-card" style="border: 2px solid #fecaca;">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="px-2 py-0.5 bg-red-100 text-red-700 text-xs font-bold rounded">2024~2026</span>
                            <span class="font-bold text-gray-800">오픈소스 · 효율화 혁명</span>
                        </div>
                        <ul class="text-sm text-gray-600 space-y-1 ml-4 list-disc">
                            <li><strong>2024.1</strong> — DeepSeek-V2 발표, MoE 아키텍처로 훈련비용 95% 절감</li>
                            <li><strong>2024</strong> — Qwen2.5, Yi-Lightning, GLM-4 등 오픈소스 모델 글로벌 Top 진입</li>
                            <li><strong>2024</strong> — 유니트리(Unitree) 휴머노이드 로봇 G1/H1 대량생산 ($16,000)</li>
                            <li><strong>2025.1</strong> — <strong>DeepSeek-R1</strong> 발표 — GPT-o1 수준, 훈련비 $5.6M (미국 대비 1/10)</li>
                            <li><strong>2025</strong> — Agibot 로봇 파운데이션 모델, 캄브리콘 클라우드 AI칩 양산</li>
                            <li><strong>2026</strong> — 중국 AI칩 자급률 목표 70%, 미국과의 기술격차 급속 축소</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================= --}}
        {{-- 탭 1: 주요 기업 · 모델 --}}
        {{-- ============================================= --}}
        <div class="ai-tab-content" id="aiTab1">
            <h2 class="text-xl font-bold mb-4 text-gray-800">중국 AI 주요 기업 & 모델</h2>

            {{-- LLM 기업 --}}
            <h3 class="text-base font-bold text-gray-700 mb-3">대규모 언어모델 (LLM)</h3>
            <div class="grid gap-4 mb-8" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                <div class="ai-card">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-blue-600 text-white text-xs font-bold rounded">DeepSeek</span>
                        <span class="text-xs text-gray-500">환방퀀트(幻方量化) 자회사</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-2">헤지펀드 출신의 AI 연구소. 효율적 훈련으로 세계를 놀라게 함.</p>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p><strong>DeepSeek-V2</strong> — MoE 236B, 훈련비 $2.7M (GPT-4 대비 1/100)</p>
                        <p><strong>DeepSeek-R1</strong> — 추론 특화, GPT-o1 수준, 완전 오픈소스 (MIT)</p>
                        <p><strong>핵심 혁신</strong> — Multi-Head Latent Attention, DeepSeekMoE</p>
                    </div>
                </div>

                <div class="ai-card">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-orange-500 text-white text-xs font-bold rounded">Alibaba</span>
                        <span class="text-xs text-gray-500">통의치엔원(通义千问)</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-2">알리바바 클라우드의 오픈소스 LLM. 다국어·멀티모달 강점.</p>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p><strong>Qwen2.5</strong> — 72B, 오픈소스 LLM 벤치마크 1위</p>
                        <p><strong>Qwen-VL</strong> — 시각 언어 모델, 이미지 이해 탁월</p>
                        <p><strong>핵심 강점</strong> — Apache 2.0 라이선스, 상업 사용 자유</p>
                    </div>
                </div>

                <div class="ai-card">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-sky-500 text-white text-xs font-bold rounded">Baidu</span>
                        <span class="text-xs text-gray-500">문심일언(文心一言)</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-2">중국 AI 선구자. 검색+자율주행+LLM 통합 생태계.</p>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p><strong>ERNIE 4.0</strong> — 바이두 최신 LLM, 중국어 이해 최강</p>
                        <p><strong>Apollo</strong> — 세계 최대 자율주행 오픈 플랫폼</p>
                        <p><strong>사용자</strong> — ERNIE Bot 3억+ 사용자 (2025)</p>
                    </div>
                </div>

                <div class="ai-card">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-teal-500 text-white text-xs font-bold rounded">Moonshot</span>
                        <span class="text-xs text-gray-500">월지암면(月之暗面)</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-2">칭화대 출신 창업. 200만 토큰 초장문맥 처리의 선구자.</p>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p><strong>Kimi</strong> — 200만 토큰 컨텍스트, 장문서 분석 최적화</p>
                        <p><strong>MAU</strong> — 1,200만+ 월간 활성 사용자 (2024)</p>
                        <p><strong>핵심 혁신</strong> — 무한 컨텍스트 윈도우 기술</p>
                    </div>
                </div>

                <div class="ai-card">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-emerald-600 text-white text-xs font-bold rounded">01.AI</span>
                        <span class="text-xs text-gray-500">이카이푸(李开复) 창업</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-2">전 Google China 대표 이카이푸가 설립. 효율적 모델 추구.</p>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p><strong>Yi-Lightning</strong> — GPT-4o 수준, 가격 1/5</p>
                        <p><strong>Yi-34B</strong> — 오픈소스, Llama2-70B 수준 성능</p>
                        <p><strong>전략</strong> — "TC-PMF" (기술·비용·제품 시장 적합성)</p>
                    </div>
                </div>

                <div class="ai-card">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-violet-600 text-white text-xs font-bold rounded">Zhipu AI</span>
                        <span class="text-xs text-gray-500">지푸AI(智谱AI)</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-2">칭화대 KEG 연구실 스핀오프. 학술 기반 LLM의 대표주자.</p>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p><strong>GLM-4</strong> — 칭화대 기반, 중국어·영어 이중 언어 강점</p>
                        <p><strong>CogView/CogVideo</strong> — 텍스트→이미지/영상 생성</p>
                        <p><strong>핵심</strong> — 정부·학계 밀접 협력, B2B 시장 강세</p>
                    </div>
                </div>
            </div>

            {{-- AI 반도체 --}}
            <h3 class="text-base font-bold text-gray-700 mb-3">AI 반도체 & 하드웨어</h3>
            <div class="grid gap-4 mb-8" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                <div class="ai-card">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-gray-800 text-white text-xs font-bold rounded">Huawei</span>
                        <span class="text-xs text-gray-500">승등(昇腾) Ascend</span>
                    </div>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p><strong>Ascend 910B</strong> — NVIDIA A100 대체 목표, 7nm 공정</p>
                        <p><strong>CANN</strong> — 자체 AI 컴퓨팅 프레임워크 (CUDA 대체)</p>
                        <p><strong>과제</strong> — 소프트웨어 생태계가 NVIDIA 대비 부족</p>
                    </div>
                </div>

                <div class="ai-card">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-green-700 text-white text-xs font-bold rounded">Cambricon</span>
                        <span class="text-xs text-gray-500">캄브리콘(寒武纪)</span>
                    </div>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p><strong>MLU 590</strong> — 클라우드 AI 추론 칩, 국산화 선두</p>
                        <p><strong>시원(思元)</strong> — AI 훈련/추론 통합 프로세서 시리즈</p>
                        <p><strong>목표</strong> — 중국판 NVIDIA, 데이터센터 AI칩 자급</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================= --}}
        {{-- 탭 2: 정부 정책 --}}
        {{-- ============================================= --}}
        <div class="ai-tab-content" id="aiTab2">
            <h2 class="text-xl font-bold mb-4 text-gray-800">중국 정부 AI 정책 로드맵</h2>

            <div class="space-y-4 mb-8">
                <div class="ai-card" style="border-left: 4px solid #ef4444;">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-2 py-0.5 bg-red-100 text-red-700 text-xs font-bold rounded">2017</span>
                        <span class="font-bold text-sm">차세대 AI 발전계획 (新一代人工智能发展规划)</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-2">중국 AI 전략의 근간이 되는 국가 마스터플랜.</p>
                    <table class="w-full text-xs text-gray-500">
                        <tr class="border-b"><td class="py-1 font-medium" style="width:100px;">1단계 (2020)</td><td>AI 핵심기술 세계 수준 도달, AI 산업 규모 1,500억 위안</td></tr>
                        <tr class="border-b"><td class="py-1 font-medium">2단계 (2025)</td><td>AI 기초이론 일부 돌파, AI 산업 규모 4,000억 위안</td></tr>
                        <tr><td class="py-1 font-medium">3단계 (2030)</td><td>AI 이론·기술·응용 모두 세계 1위, AI 핵심산업 1조 위안</td></tr>
                    </table>
                </div>

                <div class="ai-card" style="border-left: 4px solid #f59e0b;">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-2 py-0.5 bg-amber-100 text-amber-700 text-xs font-bold rounded">2021</span>
                        <span class="font-bold text-sm">14차 5개년 계획 (十四五规划)</span>
                    </div>
                    <p class="text-sm text-gray-600">AI를 7대 첨단기술 분야로 지정. AI 연구 투자 연 15%+ 증가, AI 인재 50만명 양성 목표.</p>
                </div>

                <div class="ai-card" style="border-left: 4px solid #3b82f6;">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs font-bold rounded">2023</span>
                        <span class="font-bold text-sm">생성형 AI 서비스 관리 잠행방법 (临时办法)</span>
                    </div>
                    <p class="text-sm text-gray-600">세계 최초 생성형 AI 전용 규제. 핵심 내용:</p>
                    <ul class="text-xs text-gray-500 ml-4 list-disc mt-1 space-y-0.5">
                        <li>서비스 출시 전 알고리즘 등록 의무</li>
                        <li>훈련 데이터 적법성 보장</li>
                        <li>사회주의 핵심가치관 준수 (콘텐츠 필터링)</li>
                        <li>사용자 실명인증, 생성물 워터마크 의무</li>
                    </ul>
                </div>

                <div class="ai-card" style="border-left: 4px solid #10b981;">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs font-bold rounded">2024~2025</span>
                        <span class="font-bold text-sm">AI+ 행동계획 & 반도체 자립</span>
                    </div>
                    <p class="text-sm text-gray-600">AI를 전 산업에 융합하는 "AI+" 전략 본격화.</p>
                    <ul class="text-xs text-gray-500 ml-4 list-disc mt-1 space-y-0.5">
                        <li><strong>AI+제조</strong> — 스마트 팩토리 5,000개 구축 목표</li>
                        <li><strong>AI+의료</strong> — AI 진단 보조 시스템 전국 병원 보급</li>
                        <li><strong>반도체</strong> — 국가 빅펀드 3기 ($47.5B), AI칩 자급률 70% 목표</li>
                        <li><strong>컴퓨팅</strong> — 국가 AI 컴퓨팅 센터 20개소 구축</li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- ============================================= --}}
        {{-- 탭 3: 미·중 AI 경쟁 --}}
        {{-- ============================================= --}}
        <div class="ai-tab-content" id="aiTab3">
            <h2 class="text-xl font-bold mb-4 text-gray-800">미·중 AI 기술 격차 비교</h2>

            <div class="overflow-x-auto mb-8">
                <table class="compare-table w-full text-sm border-collapse bg-white rounded-lg overflow-hidden" style="box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                    <thead>
                        <tr>
                            <th class="text-left p-3 border-b">분야</th>
                            <th class="text-center p-3 border-b" style="color: #2563eb;">미국</th>
                            <th class="text-center p-3 border-b" style="color: #dc2626;">중국</th>
                            <th class="text-center p-3 border-b">격차</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b">
                            <td class="p-3 font-medium">LLM 성능 (Top)</td>
                            <td class="p-3 text-center">GPT-4o, Claude 4</td>
                            <td class="p-3 text-center">DeepSeek-R1, Qwen2.5</td>
                            <td class="p-3 text-center"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded font-bold">근접</span></td>
                        </tr>
                        <tr class="border-b">
                            <td class="p-3 font-medium">AI 반도체</td>
                            <td class="p-3 text-center">NVIDIA H100/B200</td>
                            <td class="p-3 text-center">Ascend 910B, MLU 590</td>
                            <td class="p-3 text-center"><span class="px-2 py-0.5 bg-red-100 text-red-700 text-xs rounded font-bold">2~3세대</span></td>
                        </tr>
                        <tr class="border-b">
                            <td class="p-3 font-medium">훈련 효율성</td>
                            <td class="p-3 text-center">자원 풍부, 대규모 투자</td>
                            <td class="p-3 text-center">MoE, 소규모 효율 혁신</td>
                            <td class="p-3 text-center"><span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded font-bold">중국 우위</span></td>
                        </tr>
                        <tr class="border-b">
                            <td class="p-3 font-medium">오픈소스 생태계</td>
                            <td class="p-3 text-center">Meta Llama, Mistral</td>
                            <td class="p-3 text-center">Qwen, DeepSeek, Yi, GLM</td>
                            <td class="p-3 text-center"><span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded font-bold">중국 약진</span></td>
                        </tr>
                        <tr class="border-b">
                            <td class="p-3 font-medium">AI 응용 (소비자)</td>
                            <td class="p-3 text-center">ChatGPT, Copilot</td>
                            <td class="p-3 text-center">Kimi, Doubao(豆包), ERNIE</td>
                            <td class="p-3 text-center"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded font-bold">대등</span></td>
                        </tr>
                        <tr class="border-b">
                            <td class="p-3 font-medium">자율주행</td>
                            <td class="p-3 text-center">Waymo, Tesla FSD</td>
                            <td class="p-3 text-center">바이두 Apollo, 화웨이 ADS</td>
                            <td class="p-3 text-center"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded font-bold">근접</span></td>
                        </tr>
                        <tr class="border-b">
                            <td class="p-3 font-medium">로보틱스</td>
                            <td class="p-3 text-center">Boston Dynamics, Figure</td>
                            <td class="p-3 text-center">Unitree, Agibot</td>
                            <td class="p-3 text-center"><span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded font-bold">중국 가성비 우위</span></td>
                        </tr>
                        <tr>
                            <td class="p-3 font-medium">AI 규제</td>
                            <td class="p-3 text-center">자율 규제 중심</td>
                            <td class="p-3 text-center">정부 주도 강력 규제</td>
                            <td class="p-3 text-center"><span class="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs rounded font-bold">방식 상이</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- 미국 규제 타임라인 --}}
            <h3 class="text-base font-bold text-gray-700 mb-3">미국의 대중국 AI 규제 강화 흐름</h3>
            <div class="space-y-3">
                <div class="ai-card" style="padding: 1rem;">
                    <div class="flex items-start gap-3">
                        <span class="px-2 py-0.5 bg-gray-200 text-gray-700 text-xs font-bold rounded shrink-0">2019</span>
                        <p class="text-sm text-gray-600">화웨이 Entity List 등재, 미국 기술·부품 수출 금지</p>
                    </div>
                </div>
                <div class="ai-card" style="padding: 1rem;">
                    <div class="flex items-start gap-3">
                        <span class="px-2 py-0.5 bg-gray-200 text-gray-700 text-xs font-bold rounded shrink-0">2022</span>
                        <p class="text-sm text-gray-600">CHIPS and Science Act 서명. A100 이상 AI칩 대중국 수출 금지</p>
                    </div>
                </div>
                <div class="ai-card" style="padding: 1rem;">
                    <div class="flex items-start gap-3">
                        <span class="px-2 py-0.5 bg-gray-200 text-gray-700 text-xs font-bold rounded shrink-0">2023</span>
                        <p class="text-sm text-gray-600">규제 강화: H800(중국 특화 칩)도 금지. 제3국 우회수출 차단</p>
                    </div>
                </div>
                <div class="ai-card" style="padding: 1rem;">
                    <div class="flex items-start gap-3">
                        <span class="px-2 py-0.5 bg-red-200 text-red-700 text-xs font-bold rounded shrink-0">2025</span>
                        <p class="text-sm text-gray-600">AI 모델 가중치 수출 규제 검토, 클라우드 AI 서비스 규제 확대</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================= --}}
        {{-- 탭 4: 시사점 --}}
        {{-- ============================================= --}}
        <div class="ai-tab-content" id="aiTab4">
            <h2 class="text-xl font-bold mb-4 text-gray-800">시사점 및 전망</h2>

            <div class="space-y-4">
                <div class="ai-card" style="border-left: 4px solid #2563eb;">
                    <h3 class="font-bold text-sm text-blue-700 mb-2">1. "제약이 혁신을 낳았다"</h3>
                    <p class="text-sm text-gray-600">미국의 AI칩 수출 규제가 오히려 중국의 소프트웨어 효율화 혁신을 가속했다. DeepSeek-R1은 미국 대비 1/10 비용으로 동등 성능을 달성하며, <strong>자원 제약이 알고리즘 혁신의 동력</strong>이 될 수 있음을 증명했다.</p>
                </div>

                <div class="ai-card" style="border-left: 4px solid #7c3aed;">
                    <h3 class="font-bold text-sm text-violet-700 mb-2">2. 오픈소스 전략의 승리</h3>
                    <p class="text-sm text-gray-600">DeepSeek, Qwen, Yi 등은 완전 오픈소스(MIT/Apache 2.0)로 공개하며 글로벌 개발자 생태계를 빠르게 확보했다. 미국의 폐쇄형(OpenAI) vs 중국의 개방형 전략이 대비되며, <strong>오픈소스가 기술 전파와 표준화의 핵심 무기</strong>가 되고 있다.</p>
                </div>

                <div class="ai-card" style="border-left: 4px solid #059669;">
                    <h3 class="font-bold text-sm text-emerald-700 mb-2">3. 정부·민간 협력 모델</h3>
                    <p class="text-sm text-gray-600">국가 단위 AI 전략 + 민간 기업 실행력의 결합이 중국 AI 발전의 핵심 동력이다. 정부가 인프라(컴퓨팅 센터, 데이터)를 제공하고, 기업이 응용·서비스를 개발하는 <strong>"국가 주도 + 시장 경쟁" 이중 엔진 모델</strong>이 작동 중이다.</p>
                </div>

                <div class="ai-card" style="border-left: 4px solid #dc2626;">
                    <h3 class="font-bold text-sm text-red-700 mb-2">4. 한국에 대한 시사점</h3>
                    <p class="text-sm text-gray-600">한국은 AI 반도체(삼성·SK) 제조 역량은 있으나, AI 모델·서비스 분야에서 미·중 양국에 뒤처지고 있다. <strong>중국의 효율화 혁신(적은 자원으로 높은 성과)</strong>은 자원이 제한된 한국 기업에게 참고할 모델이다. 특히 산업 특화 AI(제조, 바이오, 소재)에서의 차별화가 필요하다.</p>
                </div>

                <div class="ai-card" style="border-left: 4px solid #f59e0b;">
                    <h3 class="font-bold text-sm text-amber-700 mb-2">5. 2026 이후 전망</h3>
                    <ul class="text-sm text-gray-600 ml-4 list-disc space-y-1">
                        <li>미·중 AI 성능 격차는 계속 축소될 전망 (특히 오픈소스 모델)</li>
                        <li>AI 반도체 격차는 2~3년 유지 예상 (공정 미세화 한계)</li>
                        <li>AI 응용 분야(로봇, 자율주행, 스마트시티)에서 중국이 규모의 경제로 앞설 가능성</li>
                        <li>AI 거버넌스(규제)가 기술 발전 못지않게 중요한 경쟁 요소로 부상</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
function switchAiTab(index) {
    document.querySelectorAll('.ai-tab').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
    });
    document.querySelectorAll('.ai-tab-content').forEach((content, i) => {
        content.classList.toggle('active', i === index);
    });
}
</script>
@endpush
