:root { --primary-color: #FB7F0D; --secondary-color: #ff9a8b; --accent-color: #FF6B6B; --background-color: #FFFFFF; --card-bg: #ffffff; --text-color: #334155; --border-radius: 18px; --shadow: 0 8px 30px rgba(251, 127, 13, 0.08); } body { font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; margin: 0; padding: 0; } /* 푸터 숨김 설정 추가 */ footer { visibility: hidden; } .gradio-container { width: 100%; margin: 0 auto; padding: 20px; background-color: var(--background-color); } /* 헤더 스타일 - 주황색 박스 형태 */ .custom-header { background: #FF7F00; padding: 2rem; border-radius: 15px; margin-bottom: 20px; box-shadow: var(--shadow); text-align: center; } .custom-header h1 { margin: 0; font-size: 2.5rem; font-weight: 700; color: black; } .custom-header p { margin: 10px 0 0; font-size: 1.2rem; color: black; } /* 콘텐츠 박스 (프레임) 스타일 */ .custom-frame { background-color: var(--card-bg); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: var(--border-radius); padding: 20px; margin: 10px 0; box-shadow: var(--shadow); } /* 섹션 그룹 스타일 */ .custom-section-group { margin-top: 20px; padding: 0; border: none; border-radius: 0; background-color: var(--background-color); box-shadow: none !important; } /* 버튼 스타일 */ .custom-button { border-radius: 30px !important; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important; color: white !important; font-size: 18px !important; padding: 10px 20px !important; border: none; box-shadow: 0 4px 8px rgba(251, 127, 13, 0.25); transition: transform 0.3s ease; } .custom-button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(251, 127, 13, 0.3); } /* 제목 스타일 */ .custom-title { font-size: 28px; font-weight: bold; margin-bottom: 10px; color: var(--text-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 5px; } /* 입력 필드 스타일 */ .gr-input, .gr-text-input, .gr-sample-inputs { border-radius: var(--border-radius) !important; border: 1px solid #dddddd !important; padding: 12px !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important; transition: all 0.3s ease !important; } .gr-input:focus, .gr-text-input:focus { border-color: var(--primary-color) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(251, 127, 13, 0.2) !important; } /* 메인 컨텐츠 스크롤바 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; } /* 애니메이션 스타일 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease-out; } /* 섹션 제목 스타일 */ .section-title { display: flex; align-items: center; font-size: 20px; font-weight: 700; color: #333333; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 2px solid #FB7F0D; font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; } .section-title img { margin-right: 10px; width: 24px; height: 24px; } /* 그룹 래퍼 배경 */ .custom-section-group, .gr-block.gr-group { background-color: var(--background-color) !important; box-shadow: none !important; } .custom-section-group::before, .custom-section-group::after, .gr-block.gr-group::before, .gr-block.gr-group::after { display: none !important; content: none !important; } /* 체크박스 스타일 */ .gr-checkbox { font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; } /* 파일 다운로드 버튼 스타일 */ .gr-file-preview .download-link { border-radius: 20px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 6px 12px; border: none; } /* 텍스트 영역 스타일 */ .gr-textarea { font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; border-radius: var(--border-radius) !important; border: 1px solid #dddddd !important; }