/* Page Specific Styles */
.uni-comp-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);
}


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

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

/* 기존 .right-panel 스타일은 모달로 대체되므로 제거합니다. */

.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;
}

.university-list th {
    background-color: #f2f2f2;
    font-weight: bold;
}

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

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

.university-list tbody tr td strong {
    font-size: 1.1em;
}

/* Modal (Popup) Styles */
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed; /* 고정 위치 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    left: 0;
    top: 0;
    width: 100%; /* 전체 너비 */
    height: 100%; /* 전체 높이 */
    overflow: auto; /* 내용이 넘칠 경우 스크롤 */
    background-color: rgba(0,0,0,0.4); /* 배경색 (반투명 검정) */
    box-sizing: border-box; /* padding이 width/height에 포함되도록 */
}

/* JavaScript에서 .show 클래스를 추가/제거하여 모달을 표시/숨김 */
.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: auto; /* 내용이 넘칠 경우 수직 스크롤 */
    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와 함께 사용 시 유용 */
    overflow-y: auto; /* detail-content 내부에 스크롤이 필요할 경우 */
}

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: 70%; /* 검색 폼의 최대 너비 설정 (조정 가능) */
}

.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;
}