Update app.py

app.py

@@ -149,19 +149,25 @@ button:hover {
     background: linear-gradient(135deg, #0056b3, #002752);
 }
 
-/* 탭의 색상을 연한 회색 계열로 변경 */
+
+/* 탭의 색상 변경 */
 .tab {
-    background-color: #f0f0f0; /* 연한 회색 배경 */
-    color: #333; /* 어두운 글자색 */
-    border: 1px solid #dcdcdc; /* 테두리 색상 */
+    background-color: #f0f0f0; /* 연한 회색으로 변경 */
+}
+
+/* 선택된 탭의 스타일 */
+.tab .tab_selected {
+    background-color: #007BFF; /* 선택된 탭의 배경색 변경 */
+    color: white; /* 선택된 탭의 글자색 변경 */
 }
 
+/* 탭 컨텐츠 영역 스타일 */
 .tab_content {
-    background-color: #f9f9f9; /* 탭 컨텐츠 배경색을 더 연한 회색으로 설정 */
-    border: 1px solid #dcdcdc; /* 탭 컨텐츠 테두리 색상 */
-    border-top: none; /* 탭과의 중복 테두리 제거 */
+    background-color: #f9f9f9; /* 탭 컨텐츠 배경색 변경 */
+    border-color: #dcdcdc; /* 탭 컨텐츠 테두리색 변경 */
 }
 
+
 /* 입력 폼 및 출력 폼 스타일링 */
 .input, .output {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 입체감을 주는 그림자 추가 */
@@ -192,12 +198,11 @@ 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("# Korating: SELF(자가) 진단 서비스")  # 수정된 부분: title 추가
-    gr.Markdown("### 디지털자산 인증평가의 리더인 '코레이팅'의 '가상자산 셀프 자가진단' 서비스는, 투자자 보호 및 건전한 가상자산 생태계 구축을 지원합니다.")  # 수정된 부분: 설명글 추가
-    gr.Markdown("### 이용 방법: 기본 정보 입력, 총 8단계 TAP(1단계 체크리스트 ~ 최종단계 체크리스트 까지) 클릭후 입력 바랍니다.")  # 수정된 부분: 설명글 추가
     
     with gr.Tab("진단 기본 정보 입력"):
         project_name = gr.Textbox(label="프로젝트명")