css / 버튼위치 변경

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) {

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">