/*
헤더에 연결된 공통 CSS에서 body, .container, h1과 같은 스타일은 이미 결정하고 있으므로,
여기서는 해당 스타일들을 재정의하지 않고 페이지 고유의 요소들에 집중합니다.
공통 스타일을 재정의하려면 !important를 사용해야 하지만, 이는 권장되지 않습니다.
*/

/* 기존 body 스타일 (제거 또는 주석 처리) */
/*
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}
*/

/* 기존 .container 스타일 (제거 또는 주석 처리) */
/*
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
*/

/* 기존 h1 스타일 (제거 또는 주석 처리) */
/*
h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
}
*/

.main-content {
    display: flex; /* Flexbox 레이아웃 유지 */
    gap: 20px;
}

.left-panel {
    flex: 1; /* 왼쪽 패널이 전체 너비를 사용하도록 변경 */
    padding-right: 0; /* 오른쪽 패딩 제거 */
}

.university-list {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.university-list th,
.university-list td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    vertical-align: top; /* 셀 내용이 위쪽에 정렬되도록 추가 */
}

.university-list th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center; /* 헤더 텍스트 중앙 정렬 */
}

.university-list tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.university-list tbody tr:hover {
    background-color: #e9e9e9;
}

/* 학교명과 시도명을 위한 별도 행 스타일 */
.school-header-row {
    background-color: #e0e0e0; /* 배경색을 약간 다르게 하여 구분 */
    font-weight: bold;
    text-align: left; /* 학교명은 왼쪽 정렬 */
}

.school-header-row td {
    padding: 8px 10px; /* 약간 작은 패딩 */
    border-bottom: 2px solid #bbb; /* 아래쪽 진한 선으로 구분 */
    font-size: 1.1em; /* 폰트 크기 강조 */
}

/* 학과 간 구분 점선 */
.department-row.dotted-separator td {
    border-top: 1px dotted #ccc; /* 얇은 점선 */
}

/* 모달 관련 스타일 */
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed; /* 고정 위치 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    left: 0;
    top: 0;
    width: 100%; /* 전체 너비 */
    height: 100%; /* 전체 높이 */
    background-color: rgba(0,0,0,0.4); /* 배경색 (반투명 검정) */
    box-sizing: border-box; /* padding이 width/height에 포함되도록 */
}

.modal.show {
    display: flex !important; /* 'show' 클래스가 추가되면 모달이 보이도록 강제합니다. */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: flex-start; /* 수직 상단 정렬 */
    padding-top: 10vh; /* 뷰포트 높이의 10%만큼 상단 여백을 주어 플로팅 효과를 줍니다. */
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 모달 너비 */
    max-width: 700px; /* 최대 너비 */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative; /* 닫기 버튼 위치 지정을 위함 */
    
    /* 팝업 높이 조정: 더 크게, 스크롤바 없도록 */
    max-height: 70vh; /* 뷰포트 높이의 70%로 조정 */
    overflow-y: hidden; /* 모달 컨텐츠 자체에는 스크롤바 없앰 */
    
    display: flex; /* 내부 컨텐츠를 위한 플렉스박스 레이아웃 */
    flex-direction: column; /* 세로 방향으로 정렬 */
}

.close-button {
    color: #aaa;
    position: absolute; /* .modal-content에 상대적으로 위치 */
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
}

.detail-content {
    margin-top: 20px;
    flex-grow: 1; /* 남은 공간을 채우도록 성장 */
    min-height: 0; /* flex-grow와 함께 사용 시 유용 */
    /* detail-content 내부에서 스크롤이 필요할 경우만 스크롤바 표시 */
    overflow-y: auto; /* 내용이 넘칠 경우 수직 스크롤 */
    /* 모달 높이에 맞게 detail-content의 최대 높이 조정 */
    /* 70vh (modal-content max-height)에서 상단/하단 패딩, 제목, 경쟁률 텍스트 높이 제외 */
    max-height: calc(70vh - 200px); /* 헤더와 경쟁률 텍스트가 차지하는 공간 고려하여 조정 */
}

canvas {
    max-width: 100%;
    height: 300px; /* 그래프 높이를 팝업 높이에 맞춰 조정 */
    display: block; /* 캔버스가 차지하는 공간을 정확히 하기 위해 */
}

/* Search and Pagination Styles */
.search-pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* 작은 화면에서 줄바꿈 */
    gap: 10px; /* 요소 간 간격 */
}

.search-form {
    display: flex;
    gap: 5px;
    flex-grow: 1; /* 검색 폼이 사용 가능한 공간을 더 차지하도록 늘림 */
    max-width: 75%; /* 검색 폼의 최대 너비 설정 */
}

.search-form input[type="text"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    flex-grow: 3; /* 검색창이 버튼보다 더 많은 공간을 차지하도록 조정 */
}

.search-form button {
    padding: 8px 15px;
    background-color: #2c3e50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-grow: 1; /* 버튼도 유연하게 늘어나도록 */
}

.search-form button:hover {
    background-color: #34495e;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 5px;
}

.pagination a {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #2c3e50;
    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #f2f2f2;
}

.pagination a.active {
    background-color: #2c3e50;
    color: white;
    border-color: #2c3e50;
}

.competition-rate {
    font-weight: bold;
    color: #555;
    margin-bottom: 15px;
    text-align: center;
}

/* 남녀 비율 색상 스타일 (이 페이지에서는 사용되지 않지만 혹시 필요할까봐 유지) */
.male-count {
    color: blue;
    font-weight: bold;
}

.female-count {
    color: red;
    font-weight: bold;
}