Update app.py

app.py

@@ -149,32 +149,32 @@ button:hover {
     background: linear-gradient(135deg, #0056b3, #002752);
 }
 
-/* 박스 및 탭 스타일링 */
-.tab, .input, .output {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    transition: 0.3s;
-    border-radius: 5px;
-}
-
-.tab:hover, .input:hover, .output:hover {
-    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-}
-
-/* 탭 테두리 및 사이즈 조절 */
+/* 탭 스타일링 */
 .tab {
     border: 2px solid #007BFF; /* 푸른색 테두리 적용 */
     margin-bottom: -1px; /* 탭 사이의 공간 제거 */
-    padding: 5px 10px; /* 탭 내부 패딩 감소 */
-    font-size: 14px; /* 탭 폰트 크기 감소 */
+    font-size: 14px; /* 폰트 사이즈 조정 */
 }
 
 .tab_content {
     border: 2px solid #007BFF; /* 탭 컨텐츠 테두리에 푸른색 적용 */
     border-top: none; /* 탭과의 중복 테두리 제거 */
 }
+
+/* 입력 폼 및 출력 폼 스타일링 */
+.input, .output {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 입체감을 주는 그림자 추가 */
+    border: 2px solid #17a2b8; /* 컬러 테두리 적용 */
+    border-radius: 5px; /* 테두리 둥글게 */
+}
+
+.input:hover, .output:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); /* 호버 시 더 큰 그림자 효과 */
+}
 """
 
 
+
 with gr.Blocks(css=css) as demo:
 
     gr.Markdown("# Korating: SELF(자가) 진단 서비스")  # 수정된 부분: title 추가