Update app.py

app.py

@@ -554,41 +554,44 @@ with gr.Blocks() as demo:
 # 5. Application Styling (CSS)
 # ==========================================
 css = """
-/* [1] 기본 테이블 설정 (가로 스크롤 방어) */
 table { 
-    table-layout: fixed !important; 
-    width: 100% !important; 
-    border-collapse: collapse;
+    table-layout: auto !important; 
+    width: max-content !important; 
+    min-width: 100% !important;
 }
 
-/* [2] 패턴 기반 열 너비 자동 할당 (핵심!) */
-/* 홀수 번째 열 (1, 3, 5...번째 열: Section이나 Code 열) */
-table th:nth-child(odd), 
-table td:nth-child(odd) { 
-    width: 8% !important; /* ID 열은 8%만 차지 */
-    background-color: #fafafa; /* 시각적 구분을 위해 살짝 배경색 추가 */
+th, td {
+    min-width: 150px; 
 }
 
-/* 짝수 번째 열 (2, 4, 6...번째 열: Description 열) */
-table th:nth-child(even), 
-table td:nth-child(even) { 
-    width: auto !important; /* 나머지는 내용 열이 차지 */
+table:has(th:nth-last-child(2):first-child),
+table:has(th:nth-last-child(4):first-child),
+table:has(th:nth-last-child(5):first-child),
+table:has(th:nth-last-child(6):first-child) {
+    table-layout: fixed !important;
+    width: 100% !important;
 }
 
-/* [3] 예외 상황 처리: Code+Desc 병합(Combine)이 적용되어 열 개수가 줄었을 때 */
-/* 열이 병합되어 모든 열이 '내용'을 포함하게 되면, 너비를 균등하게 분배합니다. */
-table:has(th:nth-child(1):not(:has(+ th:nth-child(2)))) {
-    table-layout: auto !important;
-}
-
-/* [4] 가독성 보정 */
-td { 
-    font-size: 16px !important;
-    line-height: 1.6;
-    padding: 12px !important;
-    word-break: keep-all !important; /* 단어 단위 줄바꿈으로 깔끔하게 */
-    vertical-align: top !important;
-}
+table th:nth-last-child(2):first-child, table td:nth-last-child(2):first-child { width: 15% !important; min-width: 0 !important; } 
+table th:nth-last-child(1), table td:nth-last-child(1) { width: 85% !important; min-width: 0 !important; }
+
+table th:nth-child(1):nth-last-child(4), table td:nth-child(1):nth-last-child(4) { width: 10% !important; min-width: 0 !important; } 
+table th:nth-child(2):nth-last-child(3), table td:nth-child(2):nth-last-child(3) { width: 40% !important; min-width: 0 !important; } 
+table th:nth-child(3):nth-last-child(2), table td:nth-child(3):nth-last-child(2) { width: 10% !important; min-width: 0 !important; } 
+table th:nth-child(4):nth-last-child(1), table td:nth-child(4):nth-last-child(1) { width: 40% !important; min-width: 0 !important; }
+
+table th:nth-child(1):nth-last-child(5), table td:nth-child(1):nth-last-child(5) { width: 15% !important; min-width: 0 !important; } 
+table th:nth-child(2):nth-last-child(4), table td:nth-child(2):nth-last-child(4) { width: 10% !important; min-width: 0 !important; } 
+table th:nth-child(3):nth-last-child(3), table td:nth-child(3):nth-last-child(3) { width: 30% !important; min-width: 0 !important; } 
+table th:nth-child(4):nth-last-child(2), table td:nth-child(4):nth-last-child(2) { width: 10% !important; min-width: 0 !important; } 
+table th:nth-child(5):nth-last-child(1), table td:nth-child(5):nth-last-child(1) { width: 35% !important; min-width: 0 !important; }
+
+table th:nth-child(1):nth-last-child(6), table td:nth-child(1):nth-last-child(6) { width: 8% !important; min-width: 0 !important; } 
+table th:nth-child(2):nth-last-child(5), table td:nth-child(2):nth-last-child(5) { width: 15% !important; min-width: 0 !important; } 
+table th:nth-child(3):nth-last-child(4), table td:nth-child(3):nth-last-child(4) { width: 27% !important; min-width: 0 !important; } 
+table th:nth-child(4):nth-last-child(3), table td:nth-child(4):nth-last-child(3) { width: 8% !important; min-width: 0 !important; } 
+table th:nth-child(5):nth-last-child(2), table td:nth-child(5):nth-last-child(2) { width: 15% !important; min-width: 0 !important; } 
+table th:nth-child(6):nth-last-child(1), table td:nth-child(6):nth-last-child(1) { width: 27% !important; min-width: 0 !important; }
 
 thead th { 
     font-size: 18px !important;