@extends('layouts.app')

@section('title', 'Google Cloud API 요금')

@push('styles')
<style>
    .gca-section-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #e5e7eb; overflow: hidden; }
    .gca-section-header { padding: 12px 20px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
    .gca-section-header h2 { font-size: 15px; font-weight: 600; color: #1f2937; }
    .gca-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
    .gca-badge-blue { background: #dbeafe; color: #1e40af; }
    .gca-badge-green { background: #dcfce7; color: #166534; }
    .gca-badge-amber { background: #fef3c7; color: #92400e; }
    .gca-badge-purple { background: #f3e8ff; color: #6b21a8; }
    .gca-badge-red { background: #fee2e2; color: #991b1b; }
    .gca-badge-gray { background: #f3f4f6; color: #374151; }
    .gca-info-box { padding: 12px 16px; border-radius: 8px; font-size: 13px; }
    .gca-bar { height: 20px; border-radius: 4px; transition: width 0.6s ease; min-width: 32px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; font-size: 10px; font-weight: 600; color: #fff; }
    .gca-bar-input { background: linear-gradient(90deg, #2563eb, #3b82f6); }
    .gca-bar-output { background: linear-gradient(90deg, #dc2626, #ef4444); }
    .highlight-row { background: #ecfdf5; }
    .highlight-row td { font-weight: 600; }
</style>
@endpush

@section('content')
<div class="space-y-6">

    {{-- 페이지 헤더 --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Google Cloud API 요금</h1>
            <p class="mt-1 text-sm text-gray-500">Vertex AI, Gemini API, Cloud Storage 요금표</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-400">(주)코드브릿지엑스 | 2026.03</span>
            <a href="{{ route('google-cloud.cloud-api-pricing.download') }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors"
               title="상세 PPTX 다운로드">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                PPTX
            </a>
        </div>
    </div>

    {{-- 요약 카드 --}}
    <div class="flex gap-4" style="flex-wrap: wrap;">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                최저 단가 모델
            </div>
            <div class="text-lg font-bold text-gray-900 mt-1">Gemini 2.5 Flash-Lite</div>
            <div class="text-sm text-blue-600 mt-0.5">입력 $0.10 / 출력 $0.40 (1M 토큰)</div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                최고 성능 모델
            </div>
            <div class="text-lg font-bold text-gray-900 mt-1">Gemini 2.5 Pro</div>
            <div class="text-sm text-purple-600 mt-0.5">입력 $1.25 / 출력 $10.00 (1M 토큰)</div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                배치 할인
            </div>
            <div class="text-lg font-bold text-emerald-600 mt-1">50% 할인</div>
            <div class="text-sm text-gray-500 mt-0.5">Batch / Flex 모드 사용 시</div>
        </div>
    </div>

    {{-- ─── 섹션 1: Vertex AI — Gemini 모델 요금 ─── --}}
    <div class="gca-section-card">
        <div class="gca-section-header">
            <h2>1. Vertex AI — Gemini 모델 요금 (1M 토큰 기준)</h2>
        </div>
        <div class="p-5">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 25%;">모델</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 15%;">입력 (1M)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 15%;">출력 (1M)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 15%;">배치 입력</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 15%;">배치 출력</th>
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium">특징</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $models = [
                            ['name' => 'Gemini 2.5 Pro', 'input' => 1.25, 'output' => 10.00, 'bInput' => 0.625, 'bOutput' => 5.00, 'note' => '최고 성능, 복잡한 추론', 'deprecated' => false],
                            ['name' => 'Gemini 2.5 Flash', 'input' => 0.30, 'output' => 2.50, 'bInput' => 0.15, 'bOutput' => 1.25, 'note' => '속도+성능 밸런스', 'deprecated' => false],
                            ['name' => 'Gemini 2.5 Flash-Lite', 'input' => 0.10, 'output' => 0.40, 'bInput' => 0.05, 'bOutput' => 0.20, 'note' => '최저가, 경량 작업', 'deprecated' => false],
                            ['name' => 'Gemini 2.0 Flash', 'input' => 0.15, 'output' => 0.60, 'bInput' => 0.075, 'bOutput' => 0.30, 'note' => '2026.06.01 중단 예정', 'deprecated' => true, 'replacement' => '2.5 Flash'],
                            ['name' => 'Gemini 2.0 Flash-Lite', 'input' => 0.075, 'output' => 0.30, 'bInput' => 0.038, 'bOutput' => 0.15, 'note' => '2026.06.01 중단 예정', 'deprecated' => true, 'replacement' => '2.5 Flash-Lite'],
                        ];
                    @endphp
                    @foreach($models as $idx => $model)
                        <tr class="border-b border-gray-100 hover:bg-gray-50 {{ $idx === 1 ? 'highlight-row' : '' }} {{ $model['deprecated'] ? 'bg-red-50 opacity-75' : '' }}">
                            <td class="py-2.5 px-3">
                                <span class="font-medium {{ $model['deprecated'] ? 'text-gray-400 line-through' : 'text-gray-800' }}">{{ $model['name'] }}</span>
                                @if($model['deprecated'])
                                    <span class="gca-badge gca-badge-red ml-1">중단 예정</span>
                                @endif
                            </td>
                            <td class="py-2.5 px-3 text-right font-semibold {{ $model['deprecated'] ? 'text-gray-400' : 'text-blue-600' }}">${{ number_format($model['input'], 2) }}</td>
                            <td class="py-2.5 px-3 text-right font-semibold {{ $model['deprecated'] ? 'text-gray-400' : 'text-red-500' }}">${{ number_format($model['output'], 2) }}</td>
                            <td class="py-2.5 px-3 text-right text-gray-{{ $model['deprecated'] ? '400' : '500' }}">${{ number_format($model['bInput'], 3) }}</td>
                            <td class="py-2.5 px-3 text-right text-gray-{{ $model['deprecated'] ? '400' : '500' }}">${{ number_format($model['bOutput'], 2) }}</td>
                            <td class="py-2.5 px-3 text-xs {{ $model['deprecated'] ? 'text-red-500 font-medium' : 'text-gray-600' }}">
                                {{ $model['note'] }}
                                @if($model['deprecated'])
                                    <span class="text-gray-400">&rarr; {{ $model['replacement'] }}</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            {{-- 시각적 바 차트 --}}
            <div class="mt-5 pt-5 border-t border-gray-200">
                <div class="text-sm font-medium text-gray-700 mb-3">출력 단가 비교 (1M 토큰, USD)</div>
                <div class="space-y-3">
                    @php
                        $maxOutput = 10.0;
                        $barModels = [
                            ['name' => '2.5 Pro', 'output' => 10.00, 'deprecated' => false],
                            ['name' => '2.5 Flash', 'output' => 2.50, 'deprecated' => false],
                            ['name' => '2.5 Flash-Lite', 'output' => 0.40, 'deprecated' => false],
                            ['name' => '2.0 Flash', 'output' => 0.60, 'deprecated' => true],
                            ['name' => '2.0 Flash-Lite', 'output' => 0.30, 'deprecated' => true],
                        ];
                    @endphp
                    @foreach($barModels as $bm)
                        <div class="flex items-center gap-3 {{ $bm['deprecated'] ? 'opacity-40' : '' }}">
                            <div class="shrink-0 text-xs text-right {{ $bm['deprecated'] ? 'text-gray-400 line-through' : 'text-gray-500' }}" style="width: 90px;">{{ $bm['name'] }}</div>
                            <div style="flex: 1;">
                                <div class="gca-bar gca-bar-output" style="width: {{ max(($bm['output'] / $maxOutput) * 100, 5) }}%;">
                                    ${{ number_format($bm['output'], 2) }}
                                </div>
                            </div>
                            @if($bm['deprecated'])
                                <span class="text-xs text-red-400 shrink-0">중단</span>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-4 gca-info-box bg-red-50 border border-red-200 text-red-800">
                <div class="flex items-start gap-2">
                    <svg class="w-5 h-5 text-red-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    <div>
                        <strong>Gemini 2.0 모델 중단 안내 (2026.06.01)</strong>
                        <div class="mt-1 text-sm text-red-700">
                            Google은 <strong>2026년 6월 1일</strong>부로 Gemini 2.0 Flash 및 2.0 Flash-Lite 모델의 서비스를 종료합니다.
                            해당 모델을 사용 중인 경우 종료일 전에 마이그레이션이 필요합니다.
                        </div>
                        <div class="mt-2 text-xs text-red-600">
                            <span class="font-semibold">마이그레이션 가이드:</span>
                            <code class="bg-red-100 px-1.5 py-0.5 rounded">gemini-2.0-flash</code> &rarr; <code class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded">gemini-2.5-flash</code> &nbsp;|&nbsp;
                            <code class="bg-red-100 px-1.5 py-0.5 rounded">gemini-2.0-flash-lite</code> &rarr; <code class="bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded">gemini-2.5-flash-lite</code>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4 gca-info-box bg-emerald-50 border border-emerald-200 text-emerald-800">
                <strong>배치(Batch/Flex) 할인:</strong> 실시간 응답이 불필요한 대량 처리 작업은 Batch 모드를 사용하면 <strong>표준 대비 50% 할인</strong>된 가격이 적용됩니다. 처리 시간은 24시간 내 완료 보장.
            </div>
        </div>
    </div>

    {{-- ─── 섹션 2: 추가 기능 요금 ─── --}}
    <div class="gca-section-card">
        <div class="gca-section-header">
            <h2>2. 추가 기능 요금</h2>
        </div>
        <div class="p-5 space-y-4">
            <div>
                <div class="text-sm font-medium text-gray-700 mb-2">Google Search Grounding</div>
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 30%;">항목</th>
                            <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 25%;">무료 한도</th>
                            <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 25%;">초과 요금</th>
                            <th class="text-left py-2.5 px-3 text-gray-600 font-medium">비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b border-gray-100">
                            <td class="py-2.5 px-3 font-medium text-gray-800">Gemini API (AI Studio)</td>
                            <td class="py-2.5 px-3 text-emerald-600 font-semibold">무료 (무제한)</td>
                            <td class="py-2.5 px-3 text-gray-400">-</td>
                            <td class="py-2.5 px-3 text-gray-600">Dynamic Retrieval 임계값 적용</td>
                        </tr>
                        <tr>
                            <td class="py-2.5 px-3 font-medium text-gray-800">Vertex AI</td>
                            <td class="py-2.5 px-3 text-blue-600 font-semibold">5,000건/일 무료</td>
                            <td class="py-2.5 px-3 text-amber-600">$35 / 1,000건</td>
                            <td class="py-2.5 px-3 text-gray-600">grounding 포함 요청만 카운트</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div>
                <div class="text-sm font-medium text-gray-700 mb-2">Imagen 4 (이미지 생성)</div>
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 30%;">모델</th>
                            <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 25%;">가격</th>
                            <th class="text-left py-2.5 px-3 text-gray-600 font-medium">비고</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b border-gray-100">
                            <td class="py-2.5 px-3 font-medium text-gray-800">Imagen 4 (Standard)</td>
                            <td class="py-2.5 px-3 text-gray-700">$0.03 / 이미지</td>
                            <td class="py-2.5 px-3 text-gray-600">1024x1024 기준</td>
                        </tr>
                        <tr>
                            <td class="py-2.5 px-3 font-medium text-gray-800">Imagen 4 Ultra</td>
                            <td class="py-2.5 px-3 text-gray-700">$0.06 / 이미지</td>
                            <td class="py-2.5 px-3 text-gray-600">고해상도</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="gca-info-box bg-blue-50 border border-blue-200 text-blue-800">
                <strong>에러 응답 무료:</strong> 4xx/5xx 응답(잘못된 요청, 서버 오류)은 과금되지 않습니다. 성공적으로 생성된 응답에만 요금이 부과됩니다.
            </div>
        </div>
    </div>

    {{-- ─── 섹션 3: Cloud Storage 요금 ─── --}}
    <div class="gca-section-card">
        <div class="gca-section-header">
            <h2>3. Cloud Storage 요금</h2>
        </div>
        <div class="p-5 space-y-4">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 20%;">스토리지 클래스</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">저장 비용 (GB/월)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">Class A (1K건)</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">Class B (1K건)</th>
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium">적합한 용도</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $storageClasses = [
                            ['name' => 'Standard', 'badge' => 'gca-badge-blue', 'storage' => '$0.020', 'classA' => '$0.005', 'classB' => '$0.0004', 'use' => '자주 접근하는 데이터'],
                            ['name' => 'Nearline', 'badge' => 'gca-badge-green', 'storage' => '$0.010', 'classA' => '$0.01', 'classB' => '$0.001', 'use' => '30일+ 미접근 데이터'],
                            ['name' => 'Coldline', 'badge' => 'gca-badge-amber', 'storage' => '$0.004', 'classA' => '$0.01', 'classB' => '$0.005', 'use' => '90일+ 미접근 데이터'],
                            ['name' => 'Archive', 'badge' => 'gca-badge-gray', 'storage' => '$0.0012', 'classA' => '$0.05', 'classB' => '$0.05', 'use' => '365일+ 장기 보관'],
                        ];
                    @endphp
                    @foreach($storageClasses as $sc)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-2.5 px-3">
                                <span class="gca-badge {{ $sc['badge'] }}">{{ $sc['name'] }}</span>
                            </td>
                            <td class="py-2.5 px-3 text-right font-semibold text-gray-800">{{ $sc['storage'] }}</td>
                            <td class="py-2.5 px-3 text-right text-gray-600">{{ $sc['classA'] }}</td>
                            <td class="py-2.5 px-3 text-right text-gray-600">{{ $sc['classB'] }}</td>
                            <td class="py-2.5 px-3 text-gray-600 text-xs">{{ $sc['use'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
                <div class="text-sm font-semibold text-emerald-800 mb-2">Always Free 무료 티어</div>
                <div class="flex gap-4" style="flex-wrap: wrap;">
                    <div class="text-sm text-emerald-700" style="flex: 1 1 180px;">
                        <div class="font-medium">저장 공간</div>
                        <div>5GB Standard (US 리전)</div>
                    </div>
                    <div class="text-sm text-emerald-700" style="flex: 1 1 180px;">
                        <div class="font-medium">Class A 작업</div>
                        <div>5,000건 / 월</div>
                    </div>
                    <div class="text-sm text-emerald-700" style="flex: 1 1 180px;">
                        <div class="font-medium">Class B 작업</div>
                        <div>50,000건 / 월</div>
                    </div>
                    <div class="text-sm text-emerald-700" style="flex: 1 1 180px;">
                        <div class="font-medium">네트워크 이그레스</div>
                        <div>1GB / 월</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── 섹션 4: 비용 시뮬레이션 ─── --}}
    <div class="gca-section-card">
        <div class="gca-section-header">
            <h2>4. SAM 프로젝트 비용 시뮬레이션</h2>
        </div>
        <div class="p-5">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 18%;">시나리오</th>
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 22%;">사용량</th>
                        <th class="text-center py-2.5 px-3 text-gray-600 font-medium" style="width: 15%;">모델</th>
                        <th class="text-right py-2.5 px-3 text-gray-600 font-medium" style="width: 15%;">월 예상 비용</th>
                        <th class="text-left py-2.5 px-3 text-gray-600 font-medium">비고</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $scenarios = [
                            ['name' => '소규모', 'desc' => '일 100건, 입력 50K/출력 5K', 'model' => '2.5 Flash', 'cost' => 5, 'note' => 'AI 챗봇 PoC, 내부 도구'],
                            ['name' => '중규모', 'desc' => '일 1,000건, 입력 100K/출력 10K', 'model' => '2.5 Flash', 'cost' => 30, 'note' => '고객 문의 자동 응답'],
                            ['name' => '대규모', 'desc' => '일 10,000건, 입력 200K/출력 20K', 'model' => '2.5 Flash', 'cost' => 250, 'note' => '대량 문서 분석, 데이터 추출'],
                            ['name' => '고급 분석', 'desc' => '일 500건, 입력 500K/출력 50K', 'model' => '2.5 Pro', 'cost' => 350, 'note' => '복잡한 추론, 코드 생성'],
                        ];
                    @endphp
                    @foreach($scenarios as $sc)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-2.5 px-3 font-medium text-gray-800">{{ $sc['name'] }}</td>
                            <td class="py-2.5 px-3 text-gray-600 text-xs">{{ $sc['desc'] }}</td>
                            <td class="py-2.5 px-3 text-center"><span class="gca-badge gca-badge-blue">{{ $sc['model'] }}</span></td>
                            <td class="py-2.5 px-3 text-right font-semibold {{ $sc['cost'] > 100 ? 'text-amber-600' : 'text-emerald-600' }}">~${{ number_format($sc['cost']) }}</td>
                            <td class="py-2.5 px-3 text-gray-600 text-xs">{{ $sc['note'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="flex gap-4 mt-4" style="flex-wrap: wrap;">
                <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg" style="flex: 1 1 280px;">
                    <div class="text-sm text-blue-700">SAM 현재 사용 패턴 (추정)</div>
                    <div class="text-2xl font-bold text-blue-700 mt-1">~$5~30/월</div>
                    <div class="text-sm text-blue-600 mt-1">소~중규모 수준 | Gemini 2.5 Flash 기준</div>
                </div>
                <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg" style="flex: 1 1 280px;">
                    <div class="text-sm text-amber-700">비용 절감 팁</div>
                    <div class="text-lg font-bold text-amber-700 mt-1">Batch 모드 + Flash-Lite 조합</div>
                    <div class="text-sm text-amber-600 mt-1">실시간 불필요 작업은 배치로 50% 절감</div>
                </div>
            </div>

            <div class="mt-4 gca-info-box bg-gray-50 border border-gray-200 text-gray-700">
                <strong>참고:</strong> 위 시뮬레이션은 단순 계산 기준이며, 실제 비용은 프롬프트 길이, 응답 길이, 캐시 히트율, Context Caching 사용 여부에 따라 달라집니다.
                <a href="https://cloud.google.com/vertex-ai/generative-ai/pricing" target="_blank" class="underline text-blue-600 ml-1">공식 가격 페이지</a>에서 최신 정보를 확인하세요.
            </div>
        </div>
    </div>

    <p class="text-xs text-gray-400 text-center">※ Google Cloud 공식 가격 페이지 기준 (2026.03). 리전/약정/볼륨 할인에 따라 실제 비용이 달라질 수 있습니다.</p>

</div>
@endsection
