* {
    font-family: 'Nanum Gothic', sans-serif;
    box-sizing: border-box;
}

a {
    text-decoration: none; /* 밑줄 제거 */
    color: inherit; /* 색상 부모 요소로 상속 (기본 텍스트 색상) */
}

/* 하이퍼링크 호버 상태에도 스타일 제거 */
a:hover {
    text-decoration: none;
    color: inherit;
}
/*--------------------------------------------헤더영역 종료------------------------------------------------*/

main {
    padding: 20px;
    min-width : 900px;
    min-height : 900px;
}

/* h2 스타일 */
main h2 {
    display: flex; /* h2를 flexbox로 설정 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    margin: 0; /* 기본 마진 제거 */
}

/* html과 body에 100% 높이 설정 */
html, body {
    height: 100%; /* body와 html의 높이를 100%로 설정 */
    margin: 0;
    padding: 0;
}

body {
    background-color: #ffffff;
    color: #000000;
}

/* 컨테이너 스타일 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
}


/* 버튼에 마우스를 올렸을 때 색상 변화 */
button:hover {
    background-color: #ddd;
}

/* 클릭된 버튼 하이라이트 */
button.active {
    background-color: black;
    color: white;
}

/* 페이지네이션 버튼 스타일 */
.pageButton {
    background-color: rgba(0, 0, 0, 0.1); /* 버튼 배경색 */
    color: #000; /* 버튼 글자색 */
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;  
    margin: 10px 1px; /* 위, 아래에 10px, 좌우에 1px 마진 추가 */ 
}

/* active 클래스를 가진 페이지 버튼 스타일 */
.pageButton.active {
    background-color: black;
    color: white;
}

/* active 클래스를 가진 페이지 버튼에 마우스를 올렸을 때 */
.pageButton.active:hover {
    background-color: #ddd;
}


/*
@media (max-width: 600px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }
}*/

table {
    width: 100%; /* 전체 너비 사용 */
    border-collapse: collapse; /* 테두리 겹침 제거 */
    margin-top: 20px; /* 위쪽 여백 */
        justify-content: center; /* 가로로 가운데 정렬 */
    align-items: center; /* 세로로 가운데 정렬 */
}

th, td {
    padding: 15px; /* 내부 여백 */
    text-align: center; /* 가운데 정렬 추가 */
    border-bottom: 1px solid #ddd; /* 아래쪽 테두리 */
}

th {
    background-color: #f2f2f2; /* 헤더 배경색 */
    font-weight: bold; /* 굵은 글씨 */
}

tbody tr:hover {
    background-color: #f5f5f5; /* 마우스 오버 시 배경색 변화 */
    cursor: pointer; /* 포인터 변경 */
}

.center {
    text-align: center; /* 텍스트 가운데 정렬 */
    margin: 20px 0; /* 위아래 여백 추가 */
}

.odds-box {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
.odds-box p {
    margin: 2px 0;
}