ssboost/4G23WAS3
0
1:root {2 --primary-color: #FB7F0D;3 --secondary-color: #ff9a8b;4 --accent-color: #FF6B6B;5 --background-color: #FFFFFF;6 --card-bg: #ffffff;7 --text-color: #334155;8 --border-color: #dddddd;9 --input-bg: #ffffff;10 --table-even-bg: #f3f3f3;11 --table-hover-bg: #f0f0f0;12 --border-radius: 18px;13 --shadow: 0 8px 30px rgba(251, 127, 13, 0.08);14}15 16/* 다크모드 색상 변수 */17[data-theme="dark"], .dark {18 --background-color: #1a1a1a;19 --card-bg: #2d2d2d;20 --text-color: #e5e5e5;21 --border-color: #404040;22 --input-bg: #2d2d2d;23 --table-even-bg: #333333;24 --table-hover-bg: #404040;25 --shadow: 0 8px 30px rgba(0, 0, 0, 0.3);26}27 28/* 다크모드 자동 감지 */29@media (prefers-color-scheme: dark) {30 :root {31 --background-color: #1a1a1a;32 --card-bg: #2d2d2d;33 --text-color: #e5e5e5;34 --border-color: #404040;35 --input-bg: #2d2d2d;36 --table-even-bg: #333333;37 --table-hover-bg: #404040;38 --shadow: 0 8px 30px rgba(0, 0, 0, 0.3);39 }40}41 42/* ── 전역 스타일 ── */43body {44 font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;45 background-color: var(--background-color) !important;46 color: var(--text-color) !important;47 line-height: 1.6;48 margin: 0;49 padding: 0;50}51 52/* Gradio 컨테이너 다크모드 대응 */53.gradio-container,54.gradio-container *,55.gr-app,56.gr-app * {57 background-color: var(--background-color) !important;58 color: var(--text-color) !important;59}60 61/* 푸터 숨김 설정 */62footer {63 visibility: hidden;64}65 66.gradio-container {67 width: 100%;68 margin: 0 auto;69 padding: 20px;70 background-color: var(--background-color) !important;71}72 73/* ── 섹션 스타일 ── */74.custom-section-group,75.gr-block.gr-group {76 background-color: var(--background-color) !important;77 box-shadow: none !important;78}79 80.custom-section-group::before,81.custom-section-group::after,82.gr-block.gr-group::before,83.gr-block.gr-group::after {84 display: none !important;85 content: none !important;86}87 88/* 섹션 프레임 */89.custom-frame {90 background-color: var(--card-bg) !important;91 border: 1px solid var(--border-color) !important;92 border-radius: var(--border-radius);93 padding: 20px;94 margin: 10px 0;95 box-shadow: var(--shadow);96 color: var(--text-color) !important;97}98 99/* 접을 수 있는 섹션 */100.collapsible-section {101 margin-bottom: 10px;102}103 104.collapsible-header {105 background-color: var(--primary-color) !important;106 color: white !important;107 padding: 10px 15px;108 border-radius: var(--border-radius);109 cursor: pointer;110 display: flex;111 justify-content: space-between;112 align-items: center;113 transition: background-color 0.3s;114}115 116.collapsible-header:hover {117 background-color: var(--secondary-color) !important;118}119 120.collapsible-content {121 display: none;122 padding: 15px;123 background-color: var(--card-bg) !important;124 border: 1px solid var(--border-color) !important;125 border-radius: 0 0 var(--border-radius) var(--border-radius);126 margin-top: -5px;127 color: var(--text-color) !important;128}129 130.collapsible-content.active {131 display: block;132}133 134/* 두 버튼에 공통으로 적용할 스타일 */135.execution-button {136 font-size: 18px !important;137 padding: 10px 20px !important;138 height: 45px !important;139 width: 100% !important;140 border-radius: 30px !important;141 margin: 0 !important;142 display: flex !important;143 align-items: center !important;144 justify-content: center !important;145 text-align: center !important;146 color: white !important;147 border: none !important;148 transition: transform 0.3s ease !important;149}150 151/* 각 버튼별 고유 색상 */152.primary-button {153 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;154 box-shadow: 0 4px 8px rgba(251, 127, 13, 0.25) !important;155}156 157.secondary-button {158 background: linear-gradient(135deg, #6c757d, #495057) !important;159 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;160}161 162.execution-button:hover {163 transform: translateY(-2px) !important;164 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;165}166 167/* 실행 버튼 컨테이너 */168.execution-section {169 margin-top: 20px;170 padding: 15px;171 background-color: var(--card-bg) !important;172 border-radius: 8px;173 border: 1px solid var(--border-color) !important;174 color: var(--text-color) !important;175}176 177/* ── 컴포넌트 스타일 ── */178/* 버튼 스타일 */179.custom-button {180 border-radius: 30px !important;181 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;182 color: white !important;183 font-size: 18px !important;184 padding: 10px 20px !important;185 border: none;186 box-shadow: 0 4px 8px rgba(251, 127, 13, 0.25);187 transition: transform 0.3s ease;188}189 190.custom-button:hover {191 transform: translateY(-2px);192 box-shadow: 0 6px 12px rgba(251, 127, 13, 0.3);193}194 195/* 작은 버튼 */196.custom-button-small {197 border-radius: 20px !important;198 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;199 color: white !important;200 font-size: 14px !important;201 padding: 8px 15px !important;202 border: none;203 box-shadow: 0 2px 6px rgba(251, 127, 13, 0.25);204 transition: transform 0.3s ease;205}206 207.custom-button-small:hover {208 transform: translateY(-1px);209 box-shadow: 0 4px 8px rgba(251, 127, 13, 0.3);210}211 212/* 리셋 버튼 */213.reset-button {214 border-radius: 30px !important;215 background: linear-gradient(135deg, #6c757d, #495057) !important;216 color: white !important;217 font-size: 16px !important;218 padding: 8px 16px !important;219 border: none;220 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);221 transition: transform 0.3s ease;222 margin-top: 20px;223}224 225.reset-button:hover {226 transform: translateY(-2px);227 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);228}229 230/* 입력 필드 스타일 */231.gr-input, 232.gr-text-input, 233.gr-sample-inputs,234input[type="text"],235textarea {236 border-radius: var(--border-radius) !important;237 border: 1px solid var(--border-color) !important;238 padding: 12px !important;239 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;240 transition: all 0.3s ease !important;241 background-color: var(--input-bg) !important;242 color: var(--text-color) !important;243}244 245.gr-input:focus, 246.gr-text-input:focus,247input[type="text"]:focus,248textarea:focus {249 border-color: var(--primary-color) !important;250 outline: none !important;251 box-shadow: 0 0 0 2px rgba(251, 127, 13, 0.2) !important;252 background-color: var(--input-bg) !important;253 color: var(--text-color) !important;254}255 256/* 체크박스와 라디오 버튼 스타일 */257input[type="checkbox"], 258input[type="radio"] {259 accent-color: var(--primary-color);260}261 262/* 드롭다운 스타일 */263.gr-dropdown,264select {265 border-radius: var(--border-radius) !important;266 border: 1px solid var(--border-color) !important;267 padding: 12px !important;268 transition: all 0.3s ease !important;269 background-color: var(--input-bg) !important;270 color: var(--text-color) !important;271}272 273.gr-dropdown:focus,274select:focus {275 border-color: var(--primary-color) !important;276 outline: none !important;277 box-shadow: 0 0 0 2px rgba(251, 127, 13, 0.2) !important;278}279 280/* 라벨 스타일 */281label,282.gr-label,283.gr-checkbox label,284.gr-radio label {285 color: var(--text-color) !important;286 font-weight: 500;287}288 289/* ── 섹션 제목 스타일 ── */290.section-title {291 display: flex;292 align-items: center;293 font-size: 20px;294 font-weight: 700;295 color: var(--text-color) !important;296 margin-bottom: 10px;297 padding-bottom: 5px;298 border-bottom: 2px solid var(--primary-color);299 font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;300}301 302.section-title img, .section-title i {303 margin-right: 10px;304 font-size: 20px;305 color: var(--primary-color);306}307 308/* 서브 섹션 제목 */309.subsection-title {310 font-size: 18px;311 font-weight: 600;312 color: var(--text-color) !important;313 margin: 15px 0 8px 0;314}315 316/* ── 테이블 스타일 ── */317.styled-table {318 width: 100%;319 border-collapse: collapse;320 table-layout: fixed;321 margin: 0;322 padding: 0;323 font-size: 14px;324 background-color: var(--card-bg) !important;325}326 327.styled-table th,328.styled-table td {329 padding: 12px 15px;330 text-align: left;331 border-bottom: 1px solid var(--border-color) !important;332 overflow: hidden;333 text-overflow: ellipsis;334 color: var(--text-color) !important;335}336 337.styled-table th {338 background-color: var(--primary-color) !important;339 color: white !important;340 font-weight: bold;341 position: sticky;342 top: 0;343 white-space: nowrap;344}345 346.styled-table tbody tr:nth-of-type(even) {347 background-color: var(--table-even-bg) !important;348}349 350.styled-table tbody tr:hover {351 background-color: var(--table-hover-bg) !important;352}353 354.styled-table tbody tr:last-of-type {355 border-bottom: 2px solid var(--primary-color) !important;356}357 358/* 데이터 컨테이너 */359.data-container {360 max-height: 600px;361 overflow-y: auto;362 border-radius: var(--border-radius);363 border: 1px solid var(--border-color) !important;364 margin-top: 15px;365 background-color: var(--card-bg) !important;366}367 368/* 빈 테이블 스타일 */369.empty-table {370 width: 100%;371 border-collapse: collapse;372 font-size: 14px;373 margin-top: 20px;374 background-color: var(--card-bg) !important;375}376 377.empty-table th {378 background-color: var(--primary-color) !important;379 color: white !important;380 text-align: left;381 padding: 12px;382 border: 1px solid var(--border-color) !important;383}384 385.empty-table td {386 padding: 10px;387 border: 1px solid var(--border-color) !important;388 text-align: center;389 color: var(--text-color) !important;390 background-color: var(--card-bg) !important;391}392 393/* 스크롤바 스타일 */394::-webkit-scrollbar {395 width: 8px;396 height: 8px;397}398 399::-webkit-scrollbar-track {400 background: var(--card-bg);401 border-radius: 10px;402}403 404::-webkit-scrollbar-thumb {405 background: var(--primary-color);406 border-radius: 10px;407}408 409/* ── 분석 결과 스타일 ── */410.analysis-result {411 margin-top: 30px;412 border: 1px solid var(--border-color) !important;413 border-radius: 5px;414 padding: 15px;415 background-color: var(--card-bg) !important;416 color: var(--text-color) !important;417}418 419.result-header {420 font-weight: bold;421 margin-bottom: 15px;422 color: var(--primary-color) !important;423 font-size: 16px;424}425 426.summary-box {427 background-color: var(--card-bg) !important;428 border-left: 4px solid var(--primary-color);429 padding: 10px 15px;430 margin-bottom: 20px;431 font-size: 14px;432 color: var(--text-color) !important;433}434 435.summary-title {436 font-weight: bold;437 margin-bottom: 5px;438 color: var(--text-color) !important;439}440 441.recommendation-box {442 background-color: var(--card-bg) !important;443 border-radius: 5px;444 padding: 15px;445 margin-bottom: 25px;446 box-shadow: var(--shadow);447 border: 1px solid var(--border-color) !important;448 color: var(--text-color) !important;449}450 451.recommendation-title {452 font-weight: bold;453 font-size: 16px;454 color: var(--primary-color) !important;455 margin-bottom: 10px;456}457 458.recommendation-item {459 padding: 6px 0;460 border-bottom: 1px solid var(--border-color) !important;461 color: var(--text-color) !important;462}463 464.recommendation-item:last-child {465 border-bottom: none;466}467 468/* ── 키워드 태그 스타일 ── */469.keyword-tag-container {470 margin-top: 20px;471 padding: 10px;472 border: 1px solid var(--border-color) !important;473 border-radius: 5px;474 background-color: var(--card-bg) !important;475}476 477.keyword-tag {478 display: inline-block;479 background-color: var(--primary-color);480 color: white;481 padding: 5px 10px;482 margin: 5px;483 border-radius: 15px;484 font-size: 12px;485}486 487.category-tag {488 display: inline-block;489 background-color: #2c7fb8;490 color: white;491 padding: 5px 10px;492 margin: 5px;493 border-radius: 15px;494 font-size: 12px;495}496 497/* ── 로딩 인디케이터 ── */498.loading-indicator {499 display: flex;500 align-items: center;501 justify-content: center;502 padding: 15px;503 background-color: var(--card-bg) !important;504 border-radius: 5px;505 margin: 10px 0;506 border: 1px solid var(--border-color) !important;507 color: var(--text-color) !important;508}509 510.loading-spinner {511 border: 4px solid rgba(0, 0, 0, 0.1);512 width: 24px;513 height: 24px;514 border-radius: 50%;515 border-left-color: var(--primary-color);516 animation: spin 1s linear infinite;517 margin-right: 10px;518}519 520@keyframes spin {521 0% { transform: rotate(0deg); }522 100% { transform: rotate(360deg); }523}524 525.progress-bar {526 height: 10px;527 background-color: var(--primary-color);528 border-radius: 5px;529 width: 0%;530 animation: progressAnim 2s ease-in-out infinite;531}532 533@keyframes progressAnim {534 0% { width: 10%; }535 50% { width: 70%; }536 100% { width: 10%; }537}538 539/* ── 레이아웃 유틸리티 ── */540.hidden-section {541 display: none;542}543 544/* 섹션 표시/숨김 제어 */545.section-visible {546 display: block;547 animation: fadeIn 0.5s ease-out;548}549 550/* 애니메이션 효과 */551@keyframes fadeIn {552 from { opacity: 0; transform: translateY(10px); }553 to { opacity: 1; transform: translateY(0); }554}555 556.fade-in {557 animation: fadeIn 0.5s ease-out;558}559 560 /* export_utils.py의 create_table_without_checkboxes 함수에서 생성하는 HTML 테이블 스타일 재정의 */561 .table-container {562 position: relative !important;563 width: 100% !important;564 margin: 0 !important;565 border-radius: 8px !important;566 overflow: hidden !important;567 box-shadow: var(--shadow) !important;568 background-color: var(--card-bg) !important;569 }570 571 .header-wrap {572 position: sticky !important;573 top: 0 !important;574 z-index: 10 !important;575 background-color: var(--primary-color) !important;576 }577 578 .data-container {579 max-height: 600px !important;580 overflow-y: auto !important;581 background-color: var(--card-bg) !important;582 }583 584 /* export_utils.py에서 정의된 테이블 스타일 재정의 */585 .data-container .styled-table {586 background-color: var(--card-bg) !important;587 color: var(--text-color) !important;588 }589 590 .data-container .styled-table th {591 background-color: var(--primary-color) !important;592 color: white !important;593 border-bottom: 1px solid var(--border-color) !important;594 }595 596 .data-container .styled-table td {597 background-color: var(--card-bg) !important;598 color: var(--text-color) !important;599 border-bottom: 1px solid var(--border-color) !important;600 }601 602 .data-container .styled-table tbody tr:nth-of-type(even) {603 background-color: var(--table-even-bg) !important;604 }605 606 .data-container .styled-table tbody tr:hover {607 background-color: var(--table-hover-bg) !important;608 }609 610 .data-container .styled-table tbody tr:last-of-type {611 border-bottom: 2px solid var(--primary-color) !important;612 }613 614 /* 툴팁 스타일 다크모드 대응 */615 .truncated-text:hover::after {616 background-color: var(--card-bg) !important;617 color: var(--text-color) !important;618 border: 1px solid var(--border-color) !important;619 box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;620 }621 622 /* 키워드 태그 컨테이너 다크모드 */623 .keyword-tag-container {624 background-color: var(--card-bg) !important;625 border: 1px solid var(--border-color) !important;626 color: var(--text-color) !important;627 }628 629 /* 분석 결과 스타일 다크모드 */630 .analysis-result {631 background-color: var(--card-bg) !important;632 border: 1px solid var(--border-color) !important;633 color: var(--text-color) !important;634 }635 636 .result-header {637 color: var(--primary-color) !important;638 }639 640 .match-item {641 border-bottom: 1px solid var(--border-color) !important;642 color: var(--text-color) !important;643 }644 645 .match-keyword {646 color: var(--primary-color) !important;647 }648 649 /* 반응형 조정 */650 @media (max-width: 768px) {651 .grid-container {652 grid-template-columns: 1fr;653 }654 }655 656/* Gradio 특정 컴포넌트들 다크모드 강제 적용 */657.gr-form,658.gr-box,659.gr-panel {660 background-color: var(--card-bg) !important;661 border-color: var(--border-color) !important;662 color: var(--text-color) !important;663}664 665/* 아코디언 스타일 다크모드 대응 */666details {667 background-color: var(--card-bg) !important;668 border: 1px solid var(--border-color) !important;669 border-radius: var(--border-radius);670 color: var(--text-color) !important;671}672 673details summary {674 background-color: var(--card-bg) !important;675 color: var(--text-color) !important;676 padding: 10px;677 border-radius: var(--border-radius);678}679 680/* 다크모드에서 HTML 테이블 스타일 강제 적용 */681table {682 background-color: var(--card-bg) !important;683 color: var(--text-color) !important;684}685 686table th {687 background-color: var(--primary-color) !important;688 color: white !important;689}690 691table td {692 background-color: var(--card-bg) !important;693 color: var(--text-color) !important;694 border-color: var(--border-color) !important;695}