@extends('layouts.app')

@section('title', '견적서 자동기획 프로젝트')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
        <i class="ri-robot-2-line text-teal-600"></i>
        견적서 자동기획 프로젝트
    </h1>
    <a href="{{ url('/rd') }}" class="bg-white hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg border transition text-sm">
        <i class="ri-arrow-left-line mr-1"></i>R&D 대시보드
    </a>
</div>

<!-- Hero Accent Card (dark gradient within content area) -->
<div class="bg-gradient-to-r from-gray-800 to-gray-900 text-white rounded-lg shadow-sm p-6 mb-8 border border-gray-700">
    <div class="flex items-center gap-4 mb-4">
        <div class="w-12 h-12 bg-teal-600/30 rounded-xl flex items-center justify-center">
            <i class="ri-robot-2-line text-2xl text-teal-400"></i>
        </div>
        <div>
            <p class="text-teal-400 text-sm font-medium tracking-wider">AI WORKFLOW DOCUMENTATION</p>
            <h2 class="text-2xl font-bold text-white">음성에서 견적서까지, 자동으로</h2>
        </div>
    </div>
    <p class="text-gray-300 mt-4 max-w-2xl leading-relaxed">
        제조 현장의 목소리를 데이터화하고 자동으로 문서화하는 프로세스입니다.<br>
        <strong class="text-white">Gemini의 멀티모달 분석</strong>과 <strong class="text-white">Claude의 코드 생성 능력</strong>을 결합한 최적의 솔루션
    </p>
    <div class="mt-6 flex flex-wrap gap-2">
        <span class="bg-teal-600/30 text-teal-300 px-3 py-1 rounded-full text-sm">음성 → 텍스트</span>
        <span class="bg-teal-600/30 text-teal-300 px-3 py-1 rounded-full text-sm">비정형 → 정형 데이터</span>
        <span class="bg-teal-600/30 text-teal-300 px-3 py-1 rounded-full text-sm">JSON → PPTX</span>
    </div>
</div>

<!-- Overview Section -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
        <i class="ri-file-list-3-line text-teal-600"></i>
        워크플로우 개요
    </h2>
    <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200 border-l-4 border-l-teal-600">
        <div class="grid md:grid-cols-3 gap-6 text-center">
            <div class="p-4 bg-gray-50 rounded-lg">
                <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <i class="ri-mic-line text-2xl text-teal-600"></i>
                </div>
                <h3 class="font-semibold text-gray-800 mb-1">Input</h3>
                <p class="text-gray-600 text-sm">음성 녹음 파일<br>(MP3, WAV)</p>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg relative">
                <div class="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 text-teal-500 text-xl hidden md:block flow-arrow">
                    <i class="ri-arrow-right-line"></i>
                </div>
                <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <i class="ri-settings-3-line text-2xl text-teal-600"></i>
                </div>
                <h3 class="font-semibold text-gray-800 mb-1">Process</h3>
                <p class="text-gray-600 text-sm">AI 분석 & 변환<br>(Gemini + Claude)</p>
                <div class="absolute right-0 top-1/2 translate-x-1/2 -translate-y-1/2 text-teal-500 text-xl hidden md:block flow-arrow">
                    <i class="ri-arrow-right-line"></i>
                </div>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
                <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <i class="ri-bar-chart-box-line text-2xl text-teal-600"></i>
                </div>
                <h3 class="font-semibold text-gray-800 mb-1">Output</h3>
                <p class="text-gray-600 text-sm">견적서 PPTX 파일<br>(자동 생성)</p>
            </div>
        </div>
    </div>
</section>

<!-- 4 Steps Process -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
        <i class="ri-refresh-line text-teal-600"></i>
        상세 프로세스 (4단계)
    </h2>

    <!-- Step 1 -->
    <div class="mb-4">
        <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 border-l-4 border-l-teal-600">
            <div class="bg-teal-600 text-white px-4 py-3 flex items-center gap-3">
                <span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-lg font-bold">1</span>
                <div class="flex-1">
                    <h3 class="font-bold">음성 데이터 분석 및 데이터 구조화</h3>
                    <p class="text-teal-100 text-xs">Gemini 1.5 Pro 활용</p>
                </div>
                <span class="bg-white/20 px-2 py-1 rounded text-xs flex items-center gap-1">
                    <i class="ri-crosshair-2-line"></i> Gemini
                </span>
            </div>
            <div class="p-4">
                <div class="grid md:grid-cols-3 gap-4">
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-download-line text-teal-600"></i> Input
                        </h4>
                        <ul class="space-y-1 text-sm text-gray-600">
                            <li class="flex items-start gap-1">
                                <span class="text-teal-500 mt-0.5"><i class="ri-checkbox-blank-circle-fill text-xs"></i></span>
                                음성 파일 (MP3, WAV 등)
                            </li>
                            <li class="flex items-start gap-1">
                                <span class="text-teal-500 mt-0.5"><i class="ri-checkbox-blank-circle-fill text-xs"></i></span>
                                기존 견적서 양식 샘플
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-settings-3-line text-teal-600"></i> Process
                        </h4>
                        <ul class="space-y-1 text-sm text-gray-600">
                            <li class="flex items-start gap-1">
                                <span class="text-teal-500 mt-0.5"><i class="ri-checkbox-blank-circle-fill text-xs"></i></span>
                                대화 내용을 텍스트로 변환 (STT)
                            </li>
                            <li class="flex items-start gap-1">
                                <span class="text-teal-500 mt-0.5"><i class="ri-checkbox-blank-circle-fill text-xs"></i></span>
                                맥락 파악 및 규칙 정리
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-upload-line text-teal-600"></i> Output
                        </h4>
                        <div class="bg-gray-800 rounded-lg p-3 text-xs">
                            <p class="text-gray-400 text-xs mb-1">// Structured Data (JSON)</p>
                            <pre class="text-green-400 overflow-x-auto"><code>{
  "customer": "A사",
  "items": [...],
  "total_price": "..."
}</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 2 -->
    <div class="mb-4">
        <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 border-l-4 border-l-teal-600">
            <div class="bg-teal-600 text-white px-4 py-3 flex items-center gap-3">
                <span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-lg font-bold">2</span>
                <div class="flex-1">
                    <h3 class="font-bold">웹 기반 중간 검토 및 데이터 보정</h3>
                    <p class="text-teal-100 text-xs">Claude Web Page Skill</p>
                </div>
                <span class="bg-white/20 px-2 py-1 rounded text-xs flex items-center gap-1">
                    <i class="ri-tools-line"></i> Claude
                </span>
            </div>
            <div class="p-4">
                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-settings-3-line text-teal-600"></i> Process
                        </h4>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-start gap-2">
                                <span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold shrink-0">1</span>
                                추출된 데이터를 테이블 형태로 표시
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold shrink-0">2</span>
                                사용자가 오인식된 항목을 직접 수정
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold shrink-0">3</span>
                                수정 사항 즉시 JSON 데이터에 반영
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-sparkle-line text-teal-600"></i> Key Feature
                        </h4>
                        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="px-3 py-1 bg-teal-600 text-white rounded text-sm font-semibold">
                                    데이터 확정
                                </span>
                                <span class="text-gray-500 text-sm">버튼 클릭</span>
                            </div>
                            <p class="text-sm text-gray-600">
                                확정 버튼을 누르면 <strong class="text-teal-700">PPTX 생성 스크립트</strong>로 데이터가 전달됩니다.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 3 -->
    <div class="mb-4">
        <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 border-l-4 border-l-teal-600">
            <div class="bg-teal-600 text-white px-4 py-3 flex items-center gap-3">
                <span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-lg font-bold">3</span>
                <div class="flex-1">
                    <h3 class="font-bold">PPTX 생성 로직 실행</h3>
                    <p class="text-teal-100 text-xs">Claude Code Skill</p>
                </div>
                <span class="bg-white/20 px-2 py-1 rounded text-xs flex items-center gap-1">
                    <i class="ri-terminal-box-line"></i> Claude
                </span>
            </div>
            <div class="p-4">
                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-settings-3-line text-teal-600"></i> Process
                        </h4>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-start gap-2">
                                <span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold shrink-0">1</span>
                                <span><code class="bg-gray-100 px-1 rounded text-xs">python-pptx</code> 라이브러리 활용</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold shrink-0">2</span>
                                템플릿 슬라이드에 데이터 매핑
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="w-5 h-5 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 text-xs font-bold shrink-0">3</span>
                                코드 자동 작성 및 실행
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-layout-line text-teal-600"></i> 레이아웃 자동 배치
                        </h4>
                        <div class="space-y-2">
                            <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg text-sm">
                                <i class="ri-file-copy-line text-teal-600"></i>
                                <span class="text-gray-700">품목이 많으면 슬라이드 자동 복제</span>
                            </div>
                            <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg text-sm">
                                <i class="ri-bar-chart-box-line text-teal-600"></i>
                                <span class="text-gray-700">표 크기 자동 조절 로직 포함</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4 p-3 bg-teal-600 rounded-lg text-white flex items-center gap-3">
                    <i class="ri-bar-chart-box-line text-2xl"></i>
                    <div>
                        <p class="text-teal-100 text-xs">OUTPUT</p>
                        <p class="font-bold">최종 견적서 파일 (.pptx)</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 4 -->
    <div class="mb-4">
        <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 border-l-4 border-l-teal-600">
            <div class="bg-teal-600 text-white px-4 py-3 flex items-center gap-3">
                <span class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-lg font-bold">4</span>
                <div class="flex-1">
                    <h3 class="font-bold">최종 산출물 피드백 및 저장</h3>
                    <p class="text-teal-100 text-xs">Review & Iteration</p>
                </div>
                <span class="bg-white/20 px-2 py-1 rounded text-xs flex items-center gap-1">
                    <i class="ri-loop-left-line"></i> 반복
                </span>
            </div>
            <div class="p-4">
                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-file-list-3-line text-teal-600"></i> 프로세스
                        </h4>
                        <ul class="space-y-2 text-sm text-gray-600">
                            <li class="flex items-start gap-1">
                                <i class="ri-check-line text-teal-500 mt-0.5"></i>
                                생성된 PPTX 파일을 사용자에게 제공
                            </li>
                            <li class="flex items-start gap-1">
                                <i class="ri-check-line text-teal-500 mt-0.5"></i>
                                디자인/내용 수정 필요 시 Claude에게 요청
                            </li>
                            <li class="flex items-start gap-1">
                                <i class="ri-check-line text-teal-500 mt-0.5"></i>
                                코드 즉시 재수정 가능
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                            <i class="ri-chat-3-line text-teal-600"></i> 수정 요청 예시
                        </h4>
                        <div class="space-y-2">
                            <div class="p-2 bg-gray-50 rounded-lg border-l-4 border-teal-600">
                                <p class="text-sm text-gray-700 italic">"표의 색상을 변경해줘"</p>
                            </div>
                            <div class="p-2 bg-gray-50 rounded-lg border-l-4 border-teal-600">
                                <p class="text-sm text-gray-700 italic">"마지막에 안내 문구를 추가해줘"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Tech Stack Table -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
        <i class="ri-tools-line text-teal-600"></i>
        주요 기술 스택 및 역할 분담
    </h2>
    <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 border-l-4 border-l-teal-600">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-teal-600 text-white">
                        <th class="px-4 py-3 text-left font-semibold text-sm">단계</th>
                        <th class="px-4 py-3 text-left font-semibold text-sm">담당 AI</th>
                        <th class="px-4 py-3 text-left font-semibold text-sm">기술 및 도구</th>
                        <th class="px-4 py-3 text-left font-semibold text-sm">비고</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-3">
                            <span class="font-semibold text-gray-800 text-sm">음성 인식 & 추론</span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs font-medium">Gemini</span>
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            <code class="bg-gray-100 px-2 py-1 rounded text-xs">Multimodal Audio Input</code>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-sm">긴 대화의 맥락 파악에 최적</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors bg-gray-50/50">
                        <td class="px-4 py-3">
                            <span class="font-semibold text-gray-800 text-sm">데이터 구조화</span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs font-medium">Gemini / Claude</span>
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            <code class="bg-gray-100 px-2 py-1 rounded text-xs">JSON Schema 추출</code>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-sm">비정형 → 정형 데이터 변환</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-3">
                            <span class="font-semibold text-gray-800 text-sm">UI/UX 구성</span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs font-medium">Claude</span>
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            <code class="bg-gray-100 px-2 py-1 rounded text-xs">React / HTML/JS</code>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-sm">사용자 데이터 확인 인터페이스</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors bg-gray-50/50">
                        <td class="px-4 py-3">
                            <span class="font-semibold text-gray-800 text-sm">문서 생성</span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="bg-teal-100 text-teal-700 px-2 py-1 rounded text-xs font-medium">Claude</span>
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            <code class="bg-gray-100 px-2 py-1 rounded text-xs">Python (python-pptx)</code>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-sm">실제 파일 바이너리 생성</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Success Tips -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
        <i class="ri-lightbulb-line text-teal-600"></i>
        성공적인 자동화를 위한 팁
    </h2>
    <div class="grid md:grid-cols-3 gap-4">
        <!-- Tip 1 -->
        <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-200 border-l-4 border-l-teal-600">
            <div class="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center text-white text-lg font-bold mb-3">
                1
            </div>
            <h3 class="font-bold text-gray-800 mb-2 text-sm">프롬프트 엔지니어링 (Few-shot)</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
                Gemini에게 음성을 넘길 때, <strong class="text-teal-600">"이전 견적서 사례" 2~3개</strong>를 함께 예시로 주면 추출 정확도가 대폭 향상됩니다.
            </p>
            <div class="mt-3 p-2 bg-gray-50 rounded-lg">
                <p class="text-xs text-teal-700">
                    <span class="font-semibold">핵심:</span> 예시 기반 학습으로 정확도 향상
                </p>
            </div>
        </div>

        <!-- Tip 2 -->
        <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-200 border-l-4 border-l-teal-600">
            <div class="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center text-white text-lg font-bold mb-3">
                2
            </div>
            <h3 class="font-bold text-gray-800 mb-2 text-sm">템플릿 고정</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
                PPTX의 배경 디자인이나 로고는 미리 만든 <code class="bg-gray-100 px-1 rounded text-xs">template.pptx</code> 파일을 활용하고, AI는 <strong class="text-teal-600">값만 채우도록</strong> 설정
            </p>
            <div class="mt-3 p-2 bg-gray-50 rounded-lg">
                <p class="text-xs text-teal-700">
                    <span class="font-semibold">핵심:</span> 디자인 품질 유지에 유리
                </p>
            </div>
        </div>

        <!-- Tip 3 -->
        <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-200 border-l-4 border-l-teal-600">
            <div class="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center text-white text-lg font-bold mb-3">
                3
            </div>
            <h3 class="font-bold text-gray-800 mb-2 text-sm">예외 처리</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
                대화 중 불확실한 내용은 <code class="bg-amber-100 text-amber-700 px-1 rounded text-xs">Unconfirmed</code> 플래그를 달아 웹 페이지에서 <strong class="text-teal-600">강조 표시</strong>되도록 설계
            </p>
            <div class="mt-3 p-2 bg-gray-50 rounded-lg">
                <p class="text-xs text-teal-700">
                    <span class="font-semibold">핵심:</span> 불확실성 명시적 관리
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Claude Code Skills Section -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
        <i class="ri-hammer-line text-teal-600"></i>
        Claude Code Skills 기반 구현
    </h2>
    <p class="text-gray-600 text-sm mb-4">음성 → 텍스트 변환 이후 PPTX 생성까지 Claude Code의 Subagent와 Skills를 활용한 자동화 파이프라인</p>

    <!-- Skills Architecture -->
    <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200 border-l-4 border-l-teal-600 mb-6">
        <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
            <i class="ri-building-line text-teal-600"></i> Skills 아키텍처
        </h3>
        <div class="grid md:grid-cols-3 gap-4">
            <!-- Text Analyzer Skill -->
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="flex items-center gap-2 mb-3">
                    <span class="w-8 h-8 bg-teal-600 rounded-lg flex items-center justify-center text-white text-sm font-bold">1</span>
                    <h4 class="font-bold text-gray-800 text-sm">text-analyzer-skill</h4>
                </div>
                <p class="text-gray-600 text-xs mb-3">자연어 텍스트 분석 및 PDF 템플릿 구조 매핑</p>
                <div class="space-y-1">
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> 섹션 패턴 인식
                    </div>
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> 콘텐츠 자동 분류
                    </div>
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> JSON Schema 추출
                    </div>
                </div>
                <div class="mt-3 p-2 bg-gray-800 rounded text-xs">
                    <code class="text-green-400">node txt-to-pptx.js</code>
                </div>
            </div>

            <!-- Proposal Skill -->
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="flex items-center gap-2 mb-3">
                    <span class="w-8 h-8 bg-teal-600 rounded-lg flex items-center justify-center text-white text-sm font-bold">2</span>
                    <h4 class="font-bold text-gray-800 text-sm">proposal-skill</h4>
                </div>
                <p class="text-gray-600 text-xs mb-3">PDF 기획서 분석 및 PPT 기획서 자동 생성</p>
                <div class="space-y-1">
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> PDF 구조 분석
                    </div>
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> 템플릿 추출
                    </div>
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> 콘텐츠 자동 매핑
                    </div>
                </div>
                <div class="mt-3 p-2 bg-gray-800 rounded text-xs">
                    <code class="text-green-400">npm run create-proposal</code>
                </div>
            </div>

            <!-- PPTX Skill -->
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="flex items-center gap-2 mb-3">
                    <span class="w-8 h-8 bg-teal-600 rounded-lg flex items-center justify-center text-white text-sm font-bold">3</span>
                    <h4 class="font-bold text-gray-800 text-sm">pptx-skill</h4>
                </div>
                <p class="text-gray-600 text-xs mb-3">HTML 슬라이드를 PowerPoint 파일로 변환</p>
                <div class="space-y-1">
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> HTML → PPTX 변환
                    </div>
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> PptxGenJS 라이브러리
                    </div>
                    <div class="flex items-center gap-1 text-xs text-gray-500">
                        <span class="text-teal-500"><i class="ri-checkbox-blank-circle-fill" style="font-size: 6px;"></i></span> 썸네일 검증
                    </div>
                </div>
                <div class="mt-3 p-2 bg-gray-800 rounded text-xs">
                    <code class="text-green-400">node html2pptx.js</code>
                </div>
            </div>
        </div>
    </div>

    <!-- PPT Team Agent Flow -->
    <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200 border-l-4 border-l-teal-600 mb-6">
        <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
            <i class="ri-bar-chart-box-line text-teal-600"></i> PPT Team Agent 워크플로우
        </h3>
        <div class="bg-gray-50 rounded-lg p-4 mb-4">
            <div class="flex flex-wrap items-center justify-center gap-2 text-sm">
                <div class="bg-white px-3 py-2 rounded-lg border border-gray-200 text-center">
                    <p class="text-xs text-gray-500">Input</p>
                    <p class="font-semibold text-gray-700">source/*.txt</p>
                </div>
                <span class="text-teal-500 flow-arrow"><i class="ri-arrow-right-line"></i></span>
                <div class="bg-white px-3 py-2 rounded-lg border border-gray-200 text-center">
                    <p class="text-xs text-gray-500">Parser</p>
                    <p class="font-semibold text-gray-700">텍스트 파싱</p>
                </div>
                <span class="text-teal-500 flow-arrow"><i class="ri-arrow-right-line"></i></span>
                <div class="bg-white px-3 py-2 rounded-lg border border-gray-200 text-center">
                    <p class="text-xs text-gray-500">Analyzer</p>
                    <p class="font-semibold text-gray-700">섹션 인식</p>
                </div>
                <span class="text-teal-500 flow-arrow"><i class="ri-arrow-right-line"></i></span>
                <div class="bg-white px-3 py-2 rounded-lg border border-gray-200 text-center">
                    <p class="text-xs text-gray-500">Mapper</p>
                    <p class="font-semibold text-gray-700">템플릿 매핑</p>
                </div>
                <span class="text-teal-500 flow-arrow"><i class="ri-arrow-right-line"></i></span>
                <div class="bg-teal-600 px-3 py-2 rounded-lg text-center text-white">
                    <p class="text-xs text-teal-100">Output</p>
                    <p class="font-semibold">PPTX 생성</p>
                </div>
            </div>
        </div>

        <!-- Directory Structure -->
        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                    <i class="ri-folder-3-line text-teal-600"></i> 디렉터리 구조
                </h4>
                <div class="bg-gray-800 rounded-lg p-3 text-xs font-mono">
                    <pre class="text-green-400 overflow-x-auto">flow-chart/
├── source/           <span class="text-gray-500"># TXT 입력 파일</span>
├── pptx/             <span class="text-gray-500"># PPTX 출력</span>
├── templates/        <span class="text-gray-500"># JSON 템플릿</span>
├── data/             <span class="text-gray-500"># 샘플 데이터</span>
├── run.js            <span class="text-gray-500"># 통합 실행</span>
└── estimate-pptx-generator.js</pre>
                </div>
            </div>
            <div>
                <h4 class="font-semibold text-gray-700 mb-2 text-sm flex items-center gap-1">
                    <i class="ri-flashlight-line text-teal-600"></i> 실행 명령어
                </h4>
                <div class="space-y-2">
                    <div class="bg-gray-800 rounded-lg p-2 text-xs">
                        <code class="text-cyan-400">npm run ppt</code>
                        <span class="text-gray-500 ml-2"># TXT → PPTX</span>
                    </div>
                    <div class="bg-gray-800 rounded-lg p-2 text-xs">
                        <code class="text-cyan-400">npm run estimate</code>
                        <span class="text-gray-500 ml-2"># 견적서 생성</span>
                    </div>
                    <div class="bg-gray-800 rounded-lg p-2 text-xs">
                        <code class="text-cyan-400">npm run template</code>
                        <span class="text-gray-500 ml-2"># 템플릿 기반</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Estimate PPTX Generator -->
    <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200 border-l-4 border-l-teal-600">
        <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
            <i class="ri-file-list-3-line text-teal-600"></i> SAM ERP 견적서 생성기
        </h3>
        <div class="grid md:grid-cols-2 gap-6">
            <div>
                <h4 class="font-semibold text-gray-700 mb-3 text-sm">생성되는 슬라이드 구성</h4>
                <div class="space-y-2">
                    <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                        <span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">1</span>
                        <span class="text-sm text-gray-700">표지 (SAM 로고 및 시스템 소개)</span>
                    </div>
                    <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                        <span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">2</span>
                        <span class="text-sm text-gray-700">견적관리 메인 (필터, 통계, 목록)</span>
                    </div>
                    <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                        <span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">3</span>
                        <span class="text-sm text-gray-700">견적 상세 (정보 입력 폼)</span>
                    </div>
                    <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                        <span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">4</span>
                        <span class="text-sm text-gray-700">견적서 문서 (요약)</span>
                    </div>
                    <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg">
                        <span class="w-6 h-6 bg-teal-100 rounded flex items-center justify-center text-teal-600 text-xs font-bold">5</span>
                        <span class="text-sm text-gray-700">견적서 문서 (항목별 상세 내역)</span>
                    </div>
                </div>
            </div>
            <div>
                <h4 class="font-semibold text-gray-700 mb-3 text-sm">견적 데이터 구조 (JSON)</h4>
                <div class="bg-gray-800 rounded-lg p-3 text-xs">
                    <pre class="text-green-400 overflow-x-auto"><code>{
  "company": "(주) 주일기업",
  "documentNumber": "ABC123",
  "client": {
    "name": "회사명",
    "site": "현장명",
    "contact": "연락처"
  },
  "items": [
    {
      "name": "FSSB01(주차장)",
      "width": 2530,
      "height": 2550,
      "materialCost": 1420000,
      "laborCost": 510000
    }
  ],
  "summary": {
    "grandTotal": 93950000
  }
}</code></pre>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Technical Implementation -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
        <i class="ri-settings-3-line text-teal-600"></i>
        기술 구현 세부사항
    </h2>
    <div class="grid md:grid-cols-2 gap-4">
        <!-- Text Parser -->
        <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-200 border-l-4 border-l-teal-600">
            <h3 class="font-bold text-gray-800 mb-3 text-sm flex items-center gap-2">
                <i class="ri-edit-line text-teal-600"></i> 텍스트 파서 (TextParser)
            </h3>
            <p class="text-gray-600 text-xs mb-3">자연어 텍스트의 구조와 내용을 자동 파싱</p>
            <div class="bg-gray-50 rounded-lg p-3 mb-3">
                <p class="text-xs text-gray-500 mb-2">섹션 인식 패턴:</p>
                <div class="space-y-1 text-xs">
                    <div class="flex items-center gap-2">
                        <code class="bg-gray-200 px-1 rounded text-gray-800">프로젝트명:</code>
                        <span class="text-gray-600">메타데이터 추출</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <code class="bg-gray-200 px-1 rounded text-gray-800">=== 섹션 ===</code>
                        <span class="text-gray-600">주요 섹션 구분</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <code class="bg-gray-200 px-1 rounded text-gray-800">1. 항목</code>
                        <span class="text-gray-600">번호 목록 인식</span>
                    </div>
                </div>
            </div>
            <div class="text-xs text-teal-700 bg-teal-50 p-2 rounded">
                <strong>정확도:</strong> 섹션 인식률 90% 이상
            </div>
        </div>

        <!-- Template Mapper -->
        <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-200 border-l-4 border-l-teal-600">
            <h3 class="font-bold text-gray-800 mb-3 text-sm flex items-center gap-2">
                <i class="ri-map-pin-line text-teal-600"></i> 템플릿 매퍼 (TemplateMapper)
            </h3>
            <p class="text-gray-600 text-xs mb-3">파싱된 데이터를 PDF 템플릿 구조에 매핑</p>
            <div class="bg-gray-50 rounded-lg p-3 mb-3">
                <p class="text-xs text-gray-500 mb-2">매핑 대상:</p>
                <div class="grid grid-cols-2 gap-2 text-xs">
                    <div class="bg-white p-2 rounded border border-gray-200">
                        <span class="text-gray-700">표지 (Cover)</span>
                    </div>
                    <div class="bg-white p-2 rounded border border-gray-200">
                        <span class="text-gray-700">문서 히스토리</span>
                    </div>
                    <div class="bg-white p-2 rounded border border-gray-200">
                        <span class="text-gray-700">메뉴 구조</span>
                    </div>
                    <div class="bg-white p-2 rounded border border-gray-200">
                        <span class="text-gray-700">상세 화면</span>
                    </div>
                </div>
            </div>
            <div class="text-xs text-teal-700 bg-teal-50 p-2 rounded">
                <strong>일치도:</strong> SAM_ERP 스토리보드 95% 일치
            </div>
        </div>

        <!-- PptxGenJS -->
        <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-200 border-l-4 border-l-teal-600">
            <h3 class="font-bold text-gray-800 mb-3 text-sm flex items-center gap-2">
                <i class="ri-bar-chart-box-line text-teal-600"></i> PptxGenJS 라이브러리
            </h3>
            <p class="text-gray-600 text-xs mb-3">JavaScript 기반 PowerPoint 생성</p>
            <div class="bg-gray-800 rounded-lg p-3 text-xs mb-3">
                <pre class="text-green-400"><code>// 색상 코드 (# 없이)
{ color: 'FF0000' }
{ fill: { color: '1e3a5f' } }

// 슬라이드 크기 (16:9)
pres.defineLayout({
  name: 'CUSTOM_16x9',
  width: 10,
  height: 5.625
});</code></pre>
            </div>
            <div class="text-xs text-amber-700 bg-amber-50 p-2 rounded">
                <strong>주의:</strong> 색상 코드에 # 접두사 사용 금지
            </div>
        </div>

        <!-- HTML2PPTX -->
        <div class="bg-white rounded-lg shadow-sm p-5 border border-gray-200 border-l-4 border-l-teal-600">
            <h3 class="font-bold text-gray-800 mb-3 text-sm flex items-center gap-2">
                <i class="ri-refresh-line text-teal-600"></i> HTML → PPTX 변환
            </h3>
            <p class="text-gray-600 text-xs mb-3">Playwright + PptxGenJS 조합</p>
            <div class="bg-gray-50 rounded-lg p-3 mb-3">
                <p class="text-xs text-gray-500 mb-2">HTML 작성 규칙:</p>
                <div class="space-y-1 text-xs text-gray-600">
                    <div class="flex items-start gap-1">
                        <i class="ri-close-line text-red-500"></i>
                        <span>텍스트에 border/background 금지</span>
                    </div>
                    <div class="flex items-start gap-1">
                        <i class="ri-close-line text-red-500"></i>
                        <span>불릿 기호로 시작하는 텍스트 금지</span>
                    </div>
                    <div class="flex items-start gap-1">
                        <i class="ri-close-line text-red-500"></i>
                        <span>table 태그 사용 금지 (flexbox 사용)</span>
                    </div>
                    <div class="flex items-start gap-1">
                        <i class="ri-check-line text-green-500"></i>
                        <span>body: 720pt x 405pt (16:9)</span>
                    </div>
                </div>
            </div>
            <div class="text-xs text-teal-700 bg-teal-50 p-2 rounded">
                <strong>검증:</strong> thumbnail.py로 시각적 확인
            </div>
        </div>
    </div>
</section>

<!-- Visual Flow Diagram -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
        <i class="ri-git-branch-line text-teal-600"></i>
        전체 흐름도
    </h2>
    <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200 border-l-4 border-l-teal-600">
        <div class="flex flex-wrap items-center justify-center gap-3">
            <div class="text-center">
                <div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center mb-1">
                    <i class="ri-mic-line text-3xl text-white"></i>
                </div>
                <p class="text-xs font-medium text-gray-600">음성 녹음</p>
            </div>

            <div class="text-teal-500 text-xl flow-arrow hidden sm:block">
                <i class="ri-arrow-right-line"></i>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center mb-1">
                    <i class="ri-robot-2-line text-3xl text-white"></i>
                </div>
                <p class="text-xs font-medium text-gray-600">Gemini STT</p>
            </div>

            <div class="text-teal-500 text-xl flow-arrow hidden sm:block">
                <i class="ri-arrow-right-line"></i>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center mb-1">
                    <i class="ri-file-list-3-line text-3xl text-white"></i>
                </div>
                <p class="text-xs font-medium text-gray-600">JSON 데이터</p>
            </div>

            <div class="text-teal-500 text-xl flow-arrow hidden sm:block">
                <i class="ri-arrow-right-line"></i>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center mb-1">
                    <i class="ri-computer-line text-3xl text-white"></i>
                </div>
                <p class="text-xs font-medium text-gray-600">웹 검토</p>
            </div>

            <div class="text-teal-500 text-xl flow-arrow hidden sm:block">
                <i class="ri-arrow-right-line"></i>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 bg-teal-600 rounded-xl flex items-center justify-center mb-1">
                    <i class="ri-settings-3-line text-3xl text-white"></i>
                </div>
                <p class="text-xs font-medium text-gray-600">Claude Code</p>
            </div>

            <div class="text-teal-500 text-xl flow-arrow hidden sm:block">
                <i class="ri-arrow-right-line"></i>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center mb-1">
                    <i class="ri-bar-chart-box-line text-3xl text-white"></i>
                </div>
                <p class="text-xs font-medium text-gray-600">PPTX 완성</p>
            </div>
        </div>

        <!-- Legend -->
        <div class="mt-6 pt-4 border-t border-gray-200">
            <div class="flex flex-wrap justify-center gap-4 text-xs">
                <div class="flex items-center gap-1">
                    <span class="w-3 h-3 bg-teal-600 rounded"></span>
                    <span class="text-gray-600">AI 처리 단계</span>
                </div>
                <div class="flex items-center gap-1">
                    <span class="w-3 h-3 bg-gray-800 rounded"></span>
                    <span class="text-gray-600">최종 산출물</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer info card -->
<div class="bg-gradient-to-r from-gray-800 to-gray-900 text-white rounded-lg shadow-sm p-6 mb-4 border border-gray-700">
    <div class="text-center">
        <div class="flex items-center justify-center gap-2 mb-2">
            <i class="ri-robot-2-line text-xl text-teal-400"></i>
            <p class="font-semibold text-white">AI 기반 제조 견적서 자동화 시스템</p>
        </div>
        <p class="text-gray-400 text-sm">Powered by Gemini + Claude</p>
    </div>
</div>
@endsection

@push('scripts')
<style>
    .flow-arrow { animation: flowPulse 2s infinite; }
    @keyframes flowPulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
</style>
@endpush