@charset "utf-8";

.rank_title_wrap {position:relative;align-items: center;justify-content: space-between;background: rgba(0, 0, 0, 0.5);z-index: 1;}
.rank_title_wrap h2 {margin: 0;font-size: 24px;color: #fff;text-align: center;flex-grow: 1;z-index: 1;}
.rank_title_wrap {
    margin-bottom: 0px;
    padding-bottom: 10px;
}

.rank_title_wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.con_r_rank {position: relative;z-index: 1;}
.rank_table_wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1;
    background-size: cover;
    padding: 10px;
    border-radius: 0px;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

.rank_row {
    display: flex;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    z-index: 1;
}

.rank_row > div {
    flex: 1;
    text-align: center;
    font-size: 14px;
}

.rank_row.header {
    background: rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.rank_row.header {
    /* 헤더는 고정, 스크롤 대상 아님 */
    display: flex;
    /* 열 너비 고정 필요시 아래 참고 */
}

.rank_list_scroll {
    max-height:300px; 
    overflow-y: auto;   
}

/* 각 행 레이아웃 */
.rank_row {
    display: flex;
    border-bottom: 1px solid #ccc;
}

/* 각 열 너비 조절 */
.rank_row > div {
    flex: 1;  
    padding: 5px;
    box-sizing: border-box;
}

/* 예: 순위 열만 좁게 */
.rank_row > div:first-child {
    flex: 0 0 50px;
}