From 332169da817dcc4a99284d5607e1bbd7535eaf70 Mon Sep 17 00:00:00 2001
From: rudals252 <rudals252@daooldns.co.kr>
Date: Mon, 22 Sep 2025 13:39:56 +0900
Subject: [PATCH] =?UTF-8?q?css=20/=20=EB=B2=84=ED=8A=BC=EC=9C=84=EC=B9=98?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/static/css/style.css | 13 +++++++++----
 src/templates/index.html | 15 ++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/static/css/style.css b/src/static/css/style.css
index 1fabba6..e3c9b63 100755
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -195,7 +195,7 @@ body {
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-lg);
     padding: 15px;
-    margin: 10px auto 20px auto;
+    margin: 5px auto 20px auto; /* 탭과의 간격 줄임 */
     box-shadow: var(--box-shadow);
     width: 100%;
     max-width: var(--max-width);
@@ -229,6 +229,8 @@ body {
     padding-top: 15px;
     border-top: 1px solid #f0f0f0;
     margin-top: 10px;
+    position: relative;
+    z-index: 1; /* 부모보다 낮은 z-index */
 }
 
 .current_api_info {
@@ -525,18 +527,20 @@ body {
 
 .tab_navigation {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start; /* 좌측 정렬 */
     gap: 0;
-    margin: 20px auto;
+    margin: 10px auto 15px auto; /* API 설정과 통일 */
     max-width: var(--max-width);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-lg);
     overflow: hidden;
     background-color: #f8f9fa;
+    width: 100%; /* API 설정 영역과 동일한 너비 */
+    box-sizing: border-box;
 }
 
 .tab_btn {
-    flex: 1;
+    flex: none; /* 고정 크기로 변경 */
     padding: 12px 20px;
     background-color: transparent;
     border: none;
@@ -546,6 +550,7 @@ body {
     color: #666;
     transition: all 0.3s ease;
     position: relative;
+    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
 }
 
 .tab_btn:not(:last-child) {
diff --git a/src/templates/index.html b/src/templates/index.html
index b141a9e..f1005b8 100755
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -27,6 +27,14 @@
       <span class="title">AI Image Generator</span>
     </div>
 
+    <!-- 탭 네비게이션 (최상단으로 이동) -->
+    <div class="tab_navigation">
+      <button class="tab_btn active" data-tab="text-generator">
+        Text Generator
+      </button>
+      <button class="tab_btn" data-tab="image-upload">Image Upload</button>
+    </div>
+
     <!-- API 엔드포인트 설정 영역 -->
     <div class="api_config_zone">
       <div class="config_header">
@@ -68,13 +76,6 @@
         </div>
       </div>
     </div>
-    <!-- 탭 네비게이션 -->
-    <div class="tab_navigation">
-      <button class="tab_btn active" data-tab="text-generator">
-        Text Generator
-      </button>
-      <button class="tab_btn" data-tab="image-upload">Image Upload</button>
-    </div>
 
     <!-- Text Generator 탭 -->
     <div id="text-generator-tab" class="tab_content active">