/* styles.css 또는 추가 CSS 파일에 아래 코드를 추가하세요 */
#performanceButton {
    width: 100%; /* 버튼을 가로로 전체 폭으로 확장 */
    padding: 10px; /* 패딩 추가 */
    font-size: 16px; /* 글자 크기 설정 */
    background-color: #f2f2f2; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 스타일 변경 */
    margin-top: 20px; /* 버튼 위쪽에 여백 추가 */
}

#performanceButton:hover {
    background-color: #f5f5f5; /* 호버 효과 */
}

#statisticsButton {
    width: 100%; /* 버튼을 가로로 전체 폭으로 확장 */
    padding: 10px; /* 패딩 추가 */
    font-size: 16px; /* 글자 크기 설정 */
    background-color: #f2f2f2; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 스타일 변경 */
    margin-top: 20px; /* 버튼 위쪽에 여백 추가 */
}

#statisticsButton:hover {
    background-color: #f5f5f5; /* 호버 효과 */
}


/* 버튼을 감싸는 컨테이너에 대한 스타일 */
.button-container {
    display: flex; /* 버튼들을 가로로 나열 */
    justify-content: center; /* 가운데 정렬 */
    gap: 20px; /* 버튼 간 간격을 20px로 설정 */
    flex-wrap: wrap; /* 화면 크기에 따라 버튼들이 자동으로 줄바꿈되도록 설정 */
    width: 100%; /* 부모 요소 너비에 맞게 설정 */
    box-sizing: border-box; /* padding을 포함한 너비 계산 */
    padding: 20px 0; /* 상하 여백 추가 */
}

/* 공통 버튼 스타일 */
.weekend-btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: 2px solid #ddd;
    background-color: #f8f8f8;
    transition: background-color 0.3s ease;
    width: 25%; /* 부모 요소의 크기를 최대한 차지하도록 설정 */
    box-sizing: border-box; /* padding과 border도 width에 포함되도록 설정 */
}

.weekend-btn:hover {
    background-color: #e0e0e0;
}


.triangle-btn{
    background-color: white;
    border: none; /* 테두리 없애기 */
}

.triangle-btn:hover {
    background-color: #f0f0f0; /* hover 시 배경 색상 살짝 변화 */
}


#rcNoRecordsButton {
    width: 100%; /* 버튼을 가로로 전체 폭으로 확장 */
    padding: 10px; /* 패딩 추가 */
    font-size: 16px; /* 글자 크기 설정 */
    background-color: #f2f2f2; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 스타일 변경 */
    margin-top: 20px; /* 버튼 위쪽에 여백 추가 */
}

#rcNoRecordsButton:hover {
    background-color: #f5f5f5; /* 호버 효과 */
}

#popularRecordsButton {
    width: 100%; /* 버튼을 가로로 전체 폭으로 확장 */
    padding: 10px; /* 패딩 추가 */
    font-size: 16px; /* 글자 크기 설정 */
    background-color: #f2f2f2; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 스타일 변경 */
    margin-top: 20px; /* 버튼 위쪽에 여백 추가 */
}

#popularRecordsButton:hover {
    background-color: #f5f5f5; /* 호버 효과 */
}


/* styles.css 또는 추가 CSS 파일에 아래 코드를 추가하세요 */
#allRaceRecordsButton {
    width: 100%; /* 버튼을 가로로 전체 폭으로 확장 */
    padding: 10px; /* 패딩 추가 */
    font-size: 16px; /* 글자 크기 설정 */
    background-color: #f2f2f2; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 스타일 변경 */
    margin-top: 20px; /* 버튼 위쪽에 여백 추가 */
}

#allRaceRecordsButton:hover {
    background-color: #f5f5f5; /* 호버 효과 */
}

#distanceRecordsButton {
    width: 100%; /* 버튼을 가로로 전체 폭으로 확장 */
    padding: 10px; /* 패딩 추가 */
    font-size: 16px; /* 글자 크기 설정 */
    background-color: #f2f2f2; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 스타일 변경 */
    margin-top: 20px; /* 버튼 위쪽에 여백 추가 */
}

#distanceRecordsButton:hover {
    background-color: #f5f5f5; /* 호버 효과 */
}

#gradeRecordsButton {
    width: 100%; /* 버튼을 가로로 전체 폭으로 확장 */
    padding: 10px; /* 패딩 추가 */
    font-size: 16px; /* 글자 크기 설정 */
    background-color: #f2f2f2; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
    border: none; /* 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 스타일 변경 */
    margin-top: 20px; /* 버튼 위쪽에 여백 추가 */
    margin-bottom: 20px; /* 버튼 아래쪽에 여백 추가 */
}

#gradeRecordsButton:hover {
    background-color: #f5f5f5; /* 호버 효과 */
}

.bold-row {
    border-top: 2px solid black; /* 위쪽 굵은 선 */
    border-bottom: 1px solid black; /* 아래쪽 굵은 선 */
}

.bold-row th,
.bold-row td {
    border-top: 2px solid black; /* 위쪽 굵은 선 */
    border-bottom: 1px solid black; /* 아래쪽 굵은 선 */
}

.dashed-row {
    border-top: none; /* 위쪽 선 제거 */
    border-bottom: 2px solid black; /* 아래쪽 굵은 실선 */
}

.dashed-row th,
.dashed-row td {
    border-top: none; /* 위쪽 선 제거 */
    border-bottom: 2px solid black; /* 아래쪽 굵은 실선 */
}

.bottom-row {
    border-top: none; /* 위쪽 선 제거 */
    border-bottom: 1px solid black; /* 아래쪽 굵은 실선 */
}

.bottom-row th,
.bottom-row td {
    border-top: none; /* 위쪽 선 제거 */
    border-bottom: 1px solid black; /* 아래쪽 굵은 실선 */
}

table .solid-row {
    border-top: 1px solid black; /* 위쪽 1px 실선 */
    border-bottom: 1px solid black; /* 아래쪽 1px 실선 */
}

table .solid-row th,
table .solid-row td {
    border-top: 1px solid black; /* 위쪽 1px 실선 */
    border-bottom: 1px solid black; /* 아래쪽 1px 실선 */
}

.pageButton {
    padding: 8px 12px;
    margin: 3px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f2f2f2;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pageButton:hover {
    background-color: #e0e0e0;
}

/* ✅ 현재 선택된 페이지 버튼 */
.pageButton.active {
    background-color: #282C34; /* 검색폼 버튼과 동일 */
    color: #fff;
    font-weight: bold;
    border: 1px solid #282C34;
}

.pageButton.active:hover {
    background-color: #3D4A59; /* hover 시 검색폼 hover 색상 */
}