From 8a6f3f20c97f5650770ed6a7fea630bbb8953691 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sun, 15 Feb 2026 08:56:02 +0900
Subject: [PATCH] =?UTF-8?q?fix:Gemini=203.0=20Flash=20=EB=AA=A8=EB=8D=B8?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9=20+=20=EC=A0=9C=EB=AA=A9=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20UI/UX=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기본 모델을 gemini-3.0-flash로 변경
- @apply를 순수 CSS로 전환 (Tailwind CDN 호환)
- 제목 카드에 라디오 도트, 체크 뱃지, hover/selected 효과 추가
- 선택 시 border glow + 체크마크 표시

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/Services/Video/GeminiScriptService.php |  2 +-
 resources/views/video/veo3/index.blade.php | 54 +++++++++++++++++-----
 2 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/app/Services/Video/GeminiScriptService.php b/app/Services/Video/GeminiScriptService.php
index f2da6a40..bd831858 100644
--- a/app/Services/Video/GeminiScriptService.php
+++ b/app/Services/Video/GeminiScriptService.php
@@ -125,7 +125,7 @@ private function callGemini(string $prompt): ?string
         }
 
         try {
-            $model = $this->config->model ?: 'gemini-2.5-flash';
+            $model = $this->config->model ?: 'gemini-3.0-flash';
             $body = [
                 'contents' => [
                     [
diff --git a/resources/views/video/veo3/index.blade.php b/resources/views/video/veo3/index.blade.php
index 5e550ee2..fc03ed43 100644
--- a/resources/views/video/veo3/index.blade.php
+++ b/resources/views/video/veo3/index.blade.php
@@ -4,14 +4,39 @@
 
 @push('styles')
 <style>
-    .step-badge { @apply inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold; }
-    .step-active { @apply bg-indigo-600 text-white; }
-    .step-done { @apply bg-green-500 text-white; }
-    .step-pending { @apply bg-gray-200 text-gray-500; }
-    .scene-card { @apply bg-white border rounded-lg p-4 mb-3 shadow-sm; }
-    .progress-bar { @apply h-3 rounded-full transition-all duration-500 ease-out; }
-    .title-option { @apply border rounded-lg p-3 cursor-pointer transition-all hover:border-indigo-400 hover:bg-indigo-50; }
-    .title-option.selected { @apply border-indigo-600 bg-indigo-50 ring-2 ring-indigo-200; }
+    .step-badge {
+        display: inline-flex; align-items: center; justify-content: center;
+        width: 2rem; height: 2rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 700;
+    }
+    .step-active { background: #4f46e5; color: #fff; }
+    .step-done { background: #22c55e; color: #fff; }
+    .step-pending { background: #e5e7eb; color: #6b7280; }
+    .scene-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
+    .progress-bar { height: 0.75rem; border-radius: 9999px; transition: all 0.5s ease-out; }
+    .title-option {
+        border: 2px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; cursor: pointer;
+        transition: all 0.2s ease; position: relative; background: #fff;
+    }
+    .title-option:hover { border-color: #818cf8; background: #eef2ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.1); }
+    .title-option.selected {
+        border-color: #4f46e5; background: #eef2ff;
+        box-shadow: 0 0 0 3px rgba(79,70,229,.15), 0 4px 12px rgba(79,70,229,.1);
+    }
+    .title-option .radio-dot {
+        width: 1.25rem; height: 1.25rem; border-radius: 9999px; border: 2px solid #d1d5db;
+        display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease;
+    }
+    .title-option:hover .radio-dot { border-color: #818cf8; }
+    .title-option.selected .radio-dot { border-color: #4f46e5; background: #4f46e5; }
+    .title-option.selected .radio-dot::after {
+        content: ''; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #fff;
+    }
+    .title-option .check-badge {
+        position: absolute; top: -0.5rem; right: -0.5rem; width: 1.5rem; height: 1.5rem;
+        background: #4f46e5; border-radius: 9999px; display: none;
+        align-items: center; justify-content: center; color: #fff; font-size: 0.75rem;
+    }
+    .title-option.selected .check-badge { display: flex; }
     .fade-in { animation: fadeIn 0.3s ease-in; }
     @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 </style>
@@ -146,8 +171,15 @@ className="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-in
                         className={`title-option ${selectedIdx === i ? 'selected' : ''}`}
                         onClick={() => setSelectedIdx(i)}
                     >
-                        <div className="font-medium text-gray-800">{item.title}</div>
-                        <div className="text-sm text-gray-500 mt-1">{item.hook}</div>
+                        <div className="check-badge">✓</div>
+                        <div className="flex items-start gap-3">
+                            <div className="radio-dot mt-0.5"><span /></div>
+                            <div className="flex-1">
+                                <div className="font-medium text-gray-800">{item.title}</div>
+                                <div className="text-sm text-gray-500 mt-1">{item.hook}</div>
+                            </div>
+                            <div className="text-xs text-gray-400 mt-1 flex-shrink-0">#{i + 1}</div>
+                        </div>
                     </div>
                 ))}
             </div>
@@ -575,7 +607,7 @@ className="bg-indigo-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-in
             <div className="text-center mb-8">
                 <h1 className="text-3xl font-bold text-gray-900">YouTube Shorts AI 생성기</h1>
                 <p className="text-gray-500 mt-2">키워드 하나로 AI가 YouTube Shorts 영상을 자동 생성합니다</p>
-                <p className="text-xs text-gray-400 mt-1">Gemini 2.5 Flash + Veo 3.1 + Google TTS</p>
+                <p className="text-xs text-gray-400 mt-1">Gemini 3.0 Flash + Veo 3.1 + Google TTS</p>
             </div>
 
             {/* Step Indicator */}