/* /var/www/html/engine/style.css (최종 통합 버전) */

/* --- 공통 스타일 --- */
body {
    font-family: 'Noto Sans KR', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #fff;
    color: #333;
    margin: 0;
    padding: 0; /* body의 padding은 제거하여 전체 화면을 사용하도록 합니다. */
    font-size: 16px;
}

.container {
    max-width: 1100px; /* 공통 레이아웃 폭 지정 */
    margin: 20px auto; /* 가운데 정렬 */
    padding: 0 15px;   /* 좌우에 약간의 여백 추가 */
}

a {
    color: #003399;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* --- 문제 페이지 (prob_page.php) 전용 스타일 --- */
.title {
    text-align: center;
    margin: 20px 0;
}
.title h1 {
    font-size: 2em;
    color: #21618c;
    margin: 0;
}
.title small {
    color: #7f8c8d;
}
.meta {
    text-align: center;
    color: #555;
    margin-bottom: 20px;
    font-size: 0.95em;
}
.meta strong {
    color: #34495e;
}
h2 {
    margin: 30px 0 10px;
    color: #2980b9;
    font-size: 1.2em;
}
.desc {
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    white-space: pre-wrap;
    line-height: 1.6;
}
form {
    margin: 30px 0;
}
label {
    font-weight: bold;
    margin-right: 10px;
}
select, button {
    padding: 8px 14px;
    font-size: 14px;
    margin: 5px;
}

/* --- 코드 에디터 (CodeMirror) 스타일 --- */
.CodeMirror {
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 800px !important;
    font-size: 18px;
}
.CodeMirror-lines {
    padding: 5px;
}
#submit-form > textarea {
    display: none;
}

/* --- 테이블 공통 스타일 --- */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
table thead {
    background: #333;
    color: #fff;
}
table th, table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* --- 채점 결과 (Judges) 페이지 전용 스타일 --- */
.accepted { color: green; font-weight: bold; }
.wrong { color: red; font-weight: bold; }
.warning { color: orange; font-weight: bold; }
.error { color: #FF8C00; font-weight: bold; }

.search-form {
    text-align: right;
    margin-bottom: 10px;
}
.search-form input[type="text"] {
    padding: 5px;
    width: 150px;
}
.search-form input[type="submit"] {
    padding: 5px 10px;
}

/* --- 실시간 채점 결과 UI 스타일 --- */
#multi-result {
    margin-top: 20px;
}
#multi-result h3 {
    margin-top: 15px;
}


/* --- [추가] 순위 페이지 전용 스타일 --- */
.koistudy-rank-table thead th { text-align: center; }
.koistudy-rank-table tbody tr:hover { background-color: #f5f5f5; }
.koistudy-rank-table td { text-align: center; }
.koistudy-rank-table td.user-col, .koistudy-rank-table td.homepage-col { text-align: left; }
.koistudy-rank-table .homepage-col { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #888; }
.koistudy-rank-table tr.rank-is-me td { background-color: #fef9e7; }
.koistudy-rank-table tr.rank-gold td:first-child { background: #ffd700; color: #fff; font-weight: bold; }
.koistudy-rank-table tr.rank-silver td:first-child { background: #c0c0c0; color: #fff; font-weight: bold; }
.koistudy-rank-table tr.rank-bronze td:first-child { background: #cd7f32; color: #fff; font-weight: bold; }


/* --- [추가] 페이지네이션 UI 공통 스타일 --- */
.pagination { 
    list-style: none; 
    display: inline-block; 
    padding-left: 0; 
    margin: 20px 0; 
    border-radius: 4px; 
    text-align: center;
    width: 100%;
}
.pagination > li { 
    display: inline; 
}
.pagination > li > a, .pagination > li > span { 
    position: relative; 
    float: left; 
    padding: 6px 12px; 
    margin-left: -1px; 
    line-height: 1.42857143; 
    color: #337ab7; 
    text-decoration: none; 
    background-color: #fff; 
    border: 1px solid #ddd; 
}
.pagination > li:first-child > a, .pagination > li:first-child > span { 
    margin-left: 0; 
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
}
.pagination > li:last-child > a, .pagination > li:last-child > span { 
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
}
.pagination > li > a:hover, .pagination > li > span:hover, 
.pagination > li > a:focus, .pagination > li > span:focus { 
    z-index: 2; 
    color: #23527c; 
    background-color: #eee; 
    border-color: #ddd; 
}
.pagination > .active > a, .pagination > .active > span, 
.pagination > .active > a:hover, .pagination > .active > span:hover, 
.pagination > .active > a:focus, .pagination > .active > span:focus { 
    z-index: 3; 
    color: #fff; 
    cursor: default; 
    background-color: #337ab7; 
    border-color: #337ab7; 
}

/* --- [추가] 순위 페이지 상단 네비게이션 --- */
.rank-pagination { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; font-size: 14px; }
.page-link { display: inline-block; padding: 6px 12px; margin: 0 2px; border: 1px solid #ddd; background: #fff; color: #337ab7; text-decoration: none; border-radius: 4px; }
.page-link:hover { background-color: #eee; }
.page-link.active { background-color: #337ab7; color: white; border-color: #337ab7; cursor: default; }
.page-link.you-btn { background-color: #5cb85c; color: white; border-color: #4cae4c; }

/* --- [추가] Rank 페이지 전용 스타일 --- */

/* 컨트롤 패널 (버튼, 필터) */
.rank-controls { 
    margin-bottom: 20px; 
    padding: 15px; 
    background-color: #f8f9fa; 
    border-radius: 8px; 
}
.rank-sort-buttons, .rank-filter-form { 
    display: flex; 
    justify-content: right; 
    align-items: right; 
    gap: 10px; 
    flex-wrap: wrap; 
}
.rank-sort-buttons { 
    margin-bottom: 15px; 
}

/* 버튼 기본 스타일 */
.btn { 
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

/* [핵심] 활성화된 버튼 스타일 (파란색 배경, 흰색 글씨) */
.btn.active { 
    color: #000000 !important; 
    background-color: #337ab7 !important; 
    border-color: #2e6da4 !important; 

}

.rank-filter-form .btn.active {
    background-color: #5cb85c !important; /* 필터 버튼은 초록색으로 활성화 */
    border-color: #4cae4c !important;
}

/* 필터 UI */
.rank-filter-form {
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.rank-filter-form strong { font-size: 14px; color: #555; }
.rank-filter-form input[type="text"] { height: 30px; width: 120px; font-size: 12px; padding: 4px 10px; border: 1px solid #ccc; border-radius: 20px; }
.rank-filter-form .btn-info { background-color: #5bc0de; color: #000; border-color: #46b8da;}
.rank-filter-form .btn-warning { background-color: #f0ad4e; color: #000; border-color: #eea236;}

/* 페이지네이션 & You 버튼 */
.pagination-container { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; }
.you-btn { background-color: #28a745; color: white !important; border-radius: 20px; padding: 8px 20px; font-weight: bold; text-decoration: none; }
.you-btn:hover { background-color: #218838; }

/* 테이블 스타일 개선 */
.koistudy-rank-table { border-top: 2px solid #333; border-bottom: 2px solid #333; }
.koistudy-rank-table th { background-color: #343a40; color: #fff; border-bottom: 0; }
.koistudy-rank-table td { border-left: none; border-right: none; }
.koistudy-rank-table td:first-child, .koistudy-rank-table td:nth-child(2) { text-align: left; }

/* 순위 강조 스타일 (그라데이션 적용) */
.rank-gold td:first-child { background: radial-gradient(ellipse at center, #fff5a1 0%, #ffd700 100%); font-weight: bold; color: #333; }
.rank-silver td:first-child { background: radial-gradient(ellipse at center, #f0f0f0 0%, #c0c0c0 100%); font-weight: bold; color: #333; }
.rank-bronze td:first-child { background: radial-gradient(ellipse at center, #f0c39e 0%, #cd7f32 100%); color: white; font-weight: bold; }