Update app.css

app.css

@@ -24,11 +24,44 @@ body {
   line-height: 1.5;
 }
 
-/* 프롬프트 입력창 높이 강제 설정 */
+/* MOUSE 탭 높이 관련 스타일 */
+.main-tabs {
+  min-height: 100vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.main-tabs > div[role="tabpanel"] {
+  flex: 1 !important;
+  min-height: calc(100vh - 60px) !important;
+}
+
+.mouse-tab {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* 레이아웃 컨테이너 높이 조정 */
+.ant-row {
+  min-height: calc(100vh - 100px) !important;
+}
+
+/* 좌측 패널 높이 조정 */
+.ant-col-md-8 {
+  height: 100% !important;
+}
+
+.ant-flex {
+  height: 100% !important;
+}
+
+/* 프롬프트 입력창 강제 높이 설정 */
 .ant-input-textarea-large textarea,
 .ant-input-textarea textarea,
 #component-0 textarea,
-textarea {
+textarea,
+.ant-input textarea {
   height: 300px !important;
   min-height: 300px !important;
   max-height: 300px !important;
@@ -39,20 +72,30 @@ textarea {
   padding: 1rem;
 }
 
-/* 우측 웹 출력 화면 높이 강제 설정 */
+/* iframe 컨테이너 강제 높이 설정 */
 .html_content,
-.html_content iframe,
-iframe {
+.html_content > div {
   height: 800px !important;
   min-height: 800px !important;
   max-height: 800px !important;
-  overflow-y: auto !important;
+  overflow: hidden !important;
   border-radius: 12px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
   background: var(--surface);
 }
 
-/* 우측 패널 전체 높이 설정 */
+/* iframe 자체 강제 높이 설정 */
+.html_content iframe,
+iframe {
+  height: 800px !important;
+  min-height: 800px !important;
+  max-height: 800px !important;
+  width: 100% !important;
+  border: none !important;
+  overflow: auto !important;
+}
+
+/* 우측 패널 강제 높이 설정 */
 .right_panel {
   position: relative;
   height: 900px !important;
@@ -62,12 +105,47 @@ iframe {
   overflow: hidden !important;
 }
 
-/* iframe 내부 스크롤 설정 */
-.html_content iframe {
-  width: 100% !important;
-  border: none !important;
-  overflow-y: scroll !important;
-  display: block !important;
+/* 컨텐츠 영역 강제 높이 설정 */
+.right_content {
+  height: 800px !important;
+  min-height: 800px !important;
+  max-height: 800px !important;
+  overflow: auto !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: var(--surface);
+  border-radius: 0 0 8px 8px;
+}
+
+/* 탭 컨텐츠 영역 높이 조정 */
+.ant-tabs-content {
+  height: 100% !important;
+}
+
+.ant-tabs-tabpane {
+  height: 100% !important;
+}
+
+/* 모든 가능한 컨테이너에 대한 높이 제한 */
+.gradio-container,
+.contain,
+.contain > div,
+.content-wrap,
+.content {
+  max-height: 900px !important;
+  overflow: hidden !important;
+}
+
+/* 추가적인 레이아웃 안정성을 위한 스타일 */
+.ms-application {
+  height: 100% !important;
+  min-height: 100vh !important;
+}
+
+.ant-config-provider {
+  height: 100% !important;
 }
 
 .left_header {
@@ -160,19 +238,40 @@ iframe {
   color: white;
 }
 
+.ant-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
+}
+
 .ant-btn-default {
   background: var(--surface);
   border: 1px solid var(--primary);
   color: var(--primary);
 }
 
+.ant-btn-default:hover {
+  color: var(--secondary);
+  border-color: var(--secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
+}
+
 .ant-btn-default[title="Code 실행"] {
   background-color: var(--success);
   color: white;
   border: none;
 }
 
-/* Custom scrollbar */
+.ant-btn-default[title="Code 실행"]:hover {
+  background-color: #40d869;
+}
+
+/* 스크롤바 설정 */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--neutral-300) var(--neutral-100);
+}
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -215,6 +314,14 @@ iframe {
   background: var(--surface);
 }
 
+/* 입력창 포커스 스타일 */
+#component-0 textarea:focus,
+.gradio-container textarea:focus,
+.ant-input-textarea-large textarea:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2);
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .left_header {
@@ -229,6 +336,22 @@ iframe {
     min-width: 60px;
     font-size: 0.9rem;
   }
+
+  /* 모바일에서의 높이 설정 */
+  .ant-input-textarea-large textarea,
+  .ant-input-textarea textarea {
+    height: 300px !important;
+    min-height: 300px !important;
+    max-height: 300px !important;
+  }
+  
+  .html_content,
+  .html_content iframe,
+  iframe {
+    height: 800px !important;
+    min-height: 800px !important;
+    max-height: 800px !important;
+  }
 }
 
 footer, .footer, div[class*="footer"], #footer {