Update app.py

app.py

@@ -150,24 +150,27 @@ button:hover {
 }
 
 
-/* 탭의 색상 변경 */
-.tab {
-    background-color: #f0f0f0; /* 연한 회색으로 변경 */
+
+/* 탭 색깔 변경을 위한 CSS */
+/* 탭 버튼 스타일 */
+.tab-container .tab {
+    background-color: #f0f0f0; /* 연한 회색으로 배경색 변경 */
+    color: #333; /* 글자색 변경 */
 }
 
-/* 선택된 탭의 스타일 */
-.tab .tab_selected {
-    background-color: #007BFF; /* 선택된 탭의 배경색 변경 */
-    color: white; /* 선택된 탭의 글자색 변경 */
+/* 선택된 탭 스타일 */
+.tab-container .tab.selected {
+    background-color: #d9d9d9; /* 선택된 탭의 배경색을 더 어두운 회색으로 변경 */
+    color: #000; /* 선택된 탭의 글자색을 검정색으로 변경 */
+    border-bottom: 2px solid #007BFF; /* 선택된 탭의 하단 테두리 스타일 */
 }
 
 /* 탭 컨텐츠 영역 스타일 */
-.tab_content {
-    background-color: #f9f9f9; /* 탭 컨텐츠 배경색 변경 */
-    border-color: #dcdcdc; /* 탭 컨텐츠 테두리색 변경 */
+.tab-content {
+    border: 1px solid #dcdcdc; /* 탭 컨텐츠 영역의 테두리 색상 */
+    background-color: #f9f9f9; /* 탭 컨텐츠 영역의 배경색 */
 }
 
-
 /* 입력 폼 및 출력 폼 스타일링 */
 .input, .output {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 입체감을 주는 그림자 추가 */
@@ -201,7 +204,7 @@ button:hover {
 with gr.Blocks(css=css) as demo:
     gr.Markdown("# Korating: SELF(자가) 진단 서비스", elem_id="title")  # 타이틀
     gr.Markdown("### 디지털자산 인증평가의 리더인 '코레이팅'의 '가상자산 셀프 자가진단' 서비스는, 투자자 보호 및 건전한 가상자산 생태계 구축을 지원합니다.", elem_id="description1")  # 설명글 1
-    gr.Markdown("### 이용 방법: 기본 정보 입력, 총 8단계 TAP(1단계 체크리스트 ~ 최종단계 체크리스트 까지) 클릭후 입력 바랍니다.", elem_id="description2")  # 설명글 2
+    gr.Markdown("### 이용 방법: 기본 정보 입력, 총 8단계 TAP(1단계  ~ 최종 8단계까지) 클릭후 입력 바랍니다.", elem_id="description2")  # 설명글 2
 
     
     with gr.Tab("진단 기본 정보 입력"):