/* 테이블의 컨테이너 (스크롤을 하단에 위치시키기 위해) */
.yearRank {
    overflow-x: auto;  /* 가로 스크롤을 활성화 */
    overflow-y: auto;  /* 세로 스크롤을 활성화 */
    max-width: 100%;
    position: relative;  /* 컨테이너 위치를 설정 */
    height: 100%; /* 테이블의 높이를 설정 (원하는 높이로 조정) */
}

.radio-container {
    display: flex;
    justify-content: center;  /* 가로 방향으로 가운데 정렬 */
    align-items: center;      /* 세로 방향으로 가운데 정렬 */
    gap: 20px;                /* 라디오 버튼들 사이에 간격을 주기 위해 설정 */
}



/* 순위, 이름, 승점 열을 고정하는 부분 제거 */
table th[data-column="rank"],
table th[data-column="jkName"],
table th[data-column="weighted_sum"] {
    left: 0;
    z-index: 2; /* 다른 열보다 위에 표시 */
}

/* 테이블이 너무 커지지 않도록 */
table {
    width: 100%;
    border-collapse: collapse;
}

/* 순위, 이름, 승점 열 고정 스타일 제거 */
table td[data-column="rank"],
table td[data-column="jkName"],
table td[data-column="weighted_sum"] {
    background-color: #fff; /* 배경색 */
    z-index: 2; /* 위로 띄우기 */
}

/* 나머지 컬럼은 스크롤을 적용 */
table td {
    min-width: 100px; /* 최소 너비를 설정하여 스크롤 발생 */
}

/* 가로 스크롤을 하단에 고정하기 위한 추가 스타일 */
.yearRank {
    display: flex;
    flex-direction: column-reverse; /* 가로 스크롤이 하단에 위치하도록 */
}

.yearRank table {
    flex-grow: 1; /* 테이블이 여유 공간을 채우도록 */
    overflow-x: auto;
}

/* 첫 번째 행이 스크롤 시 고정되지 않도록 변경 */
table th {
    position: static;  /* sticky를 제거하여 고정되지 않도록 */
}

table td {
    position: static;  /* 셀도 position을 제거하여 함께 스크롤되도록 */
}