ui/styles.css

/* 항상 세로 스크롤바를 표시해서 폭이 바뀌지 않게 하기 */
html {
    overflow-y: scroll;
}

/* ================================
   기본 컨테이너 스타일 (전체 폭 통일)
   ================================ */
   .gradio-container,
   .main {
   max-width: 1400px !important;   /* 화면 너무 넓어지지 않게 적당히 넓은 고정폭 */
   width: 100% !important;
   margin: 0 auto !important;      /* 항상 가운데 정렬 */
   }
   
   .fixed-list * {
       font-size: 15px !important;
   }
   
   
   /* ================================
   데이터프레임 기본 스타일
   ================================ */
   .dataframe {
   font-size: 16px !important;
   width: 100% !important;
   }
   
   .dataframe table {
   font-size: 16px !important;
   width: 100% !important;
   table-layout: auto !important;
   }
   
   .dataframe th {
   font-size: 18px !important;
   font-weight: bold !important;
   padding: 12px !important;
   white-space: nowrap !important;
   }
   
   .dataframe td {
   font-size: 16px !important;
   padding: 10px !important;
   white-space: nowrap !important;
   }
   
   
   /* ================================
      리더보드 검색 바 스타일
   ================================ */
   .search-input input {
       font-size: 16px !important;
       padding: 12px 16px !important;
       border-radius: 8px !important;
       /* border: 2px solid #e0e0e0 !important; */
       transition: border-color 0.3s ease !important;
   
       /* 🔹 input 높이 고정 */
       height: 40px !important;
       box-sizing: border-box !important;
   }
   
   .search-input input:focus {
       border-color: #4a90e2 !important;
       outline: none !important;
       box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
   }
   
   /* 검색 영역 wrapper */
   .search-input {
       margin: 8px 0 12px 0 !important;
       display: block;
   }
   
   .search-input input {
       margin: 0 !important;
   }
   
/* ================================
   버튼 스타일 (기본 스타일 유지)
   ================================ */
.clear-search-btn,
.refresh-btn {
    border-radius: 8px !important;
    font-weight: 500 !important;

    /* 🔹 검색바와 동일한 세로 높이로 맞춤 */
    height: 40px !important;
    padding: 0 16px !important;

    /* 기존 스타일 최대한 유지 */
    margin-top: 4px !important;
}

/* 다운로드 버튼 너비 제한 */
.download-script-btn {
    max-width: 400px !important;
    width: 400px !important;
    display: block !important;
    margin: 12px 0 !important;
}
   
   
   
   /* ================================
   리더보드 그룹/테이블 여백 및 카드 스타일
   ================================ */
   .leaderboard-group {
       margin: 18px 0 28px 0 !important;
       padding: 12px 14px !important;
       /* border: 1px solid #eee; */
       border-radius: 12px;
       /* background: #ffffff; */
   }
   
   .leaderboard-table {
       margin-top: 8px !important;
   }
   
   /* 표 셀 여백 보강 (리더보드 전용) */
   .leaderboard-table .dataframe th {
       padding: 12px 14px !important;
   }
   .leaderboard-table .dataframe td {
       padding: 10px 14px !important;
   }
   
   /* ================================
   제출 상태(Textbox) 스크롤 및 줄바꿈 강제
   ================================ */
   .submission-status textarea {
       max-height: 420px !important;
       overflow-y: auto !important;
       white-space: pre-wrap !important;   /* 개행 유지 */
       word-break: break-word !important;  /* 긴 단어/표 폭주 방지 */
       text-align: left !important;        /* 좌측 정렬 강제 */
   }
   
   /* 중첩 스크롤 방지: 래퍼는 스크롤 해제 */
   .submission-status, .submission-status .wrap {
       max-height: none !important;
       overflow: visible !important;
   }