Update app.css

app.css

@@ -61,7 +61,7 @@ body {
   color: var(--text-primary);
 }
 
-/* 패널 레이아웃 조정 - 높이 50% 증가 */
+/* 패널 레이아웃 조정 - 높이 50% 증가 및 양쪽 일치 */
 .equal-height-container {
   display: flex;
   min-height: 900px; /* 기존 600px에서 50% 증가 */
@@ -103,7 +103,7 @@ body {
 }
 
 .right_content {
-  height: 900px; /* 기존 600px에서 50% 증가 */
+  height: 870px; /* 헤더(30px)를 제외한 높이 */
   display: flex; 
   flex-direction: column;
   justify-content: center;
@@ -124,8 +124,9 @@ footer, .footer, div[class*="footer"], #footer {
 #component-0 textarea,
 .gradio-container textarea,
 .ant-input-textarea-large textarea {
-  height: 450px !important; /* 기존 300px에서 50% 증가 */
-  min-height: 450px !important; /* 기존 300px에서 50% 증가 */
+  /* 더 정확한 높이 비율 조정 */
+  height: 750px !important; /* 우측 패널 내용물 높이 조정 (헤더, 버튼, 헬프텍스트 등 고려) */
+  min-height: 300px !important;
   resize: vertical !important;
   border: 2px solid var(--neutral-200);
   border-radius: 12px;
@@ -160,7 +161,7 @@ footer, .footer, div[class*="footer"], #footer {
 
 .right_panel {
   position: relative;
-  height: 900px; /* 기존 600px에서 50% 증가 */
+  height: 900px; /* 좌측 패널과 동일하게 900px */
   display: flex;
   flex-direction: column;
   padding-top: 0;
@@ -169,7 +170,7 @@ footer, .footer, div[class*="footer"], #footer {
 .panel {
   display: flex;
   flex-direction: column;
-  height: 900px; /* 기존 600px에서 50% 증가 */
+  height: 900px; /* 좌측 패널과 동일하게 900px */
   background: var(--surface);
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
@@ -178,13 +179,13 @@ footer, .footer, div[class*="footer"], #footer {
 .input-panel {
   display: flex;
   flex-direction: column;
-  height: 900px; /* 기존 600px에서 50% 증가 */
+  height: 900px; /* 좌측 패널과 동일하게 900px */
   flex: 1;
 }
 
 .html_content {
   flex: 1;
-  height: 870px; /* 기존 570px에서 50% 증가 (헤더 30px 고려) */
+  height: 870px; /* 헤더(30px)를 제외한 높이 */
   border-radius: 0 0 8px 8px;
   overflow: hidden;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
@@ -204,6 +205,25 @@ footer, .footer, div[class*="footer"], #footer {
   font-size: 0.8em; /* 기본 폰트 크기에서 20% 감소 */
 }
 
+/* 버튼 크기 10% 감소 */
+.ant-btn {
+  flex: 1;
+  min-width: 72px; /* 기존 80px에서 10% 감소 */
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s;
+  height: 36px; /* 기존 40px에서 10% 감소 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9em; /* 버튼 텍스트 크기도 10% 감소 */
+}
+
+/* 버튼에 작은 여백 추가 */
+.ant-flex .ant-btn {
+  margin: 2px;
+}
+
 /* 탭 컨텐츠 높이 조정 */
 .ant-tabs-content {
   height: 100%;
@@ -215,18 +235,6 @@ footer, .footer, div[class*="footer"], #footer {
   flex-direction: column;
 }
 
-.ant-btn {
-  flex: 1;
-  min-width: 80px;
-  border-radius: 8px;
-  font-weight: 500;
-  transition: all 0.3s;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .ant-btn-primary {
   background: linear-gradient(to right, var(--primary), var(--secondary));
   border: none;
@@ -416,8 +424,8 @@ footer, .footer, div[class*="footer"], #footer {
   }
 
   .ant-btn {
-    min-width: 60px;
-    font-size: 0.9rem;
+    min-width: 54px; /* 기존 60px에서 10% 감소 */
+    font-size: 0.81rem; /* 0.9rem에서 10% 감소 */
   }
 }