.ranking-container {
    background-color: #1c1c1c;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

.ranking-container .ranking-event-area {
    margin-bottom: 5px;
}

.ranking-header {
    background: linear-gradient(0deg, #131313 0%, #222222 100%);
    padding: 10px 10px 5px 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.ranking-icon {
    width: 40px;
    height: 40px;
    background-image: url('/static/img/hof/rank_title.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 15px;
}

.ranking-title {
    flex-grow: 1;
    margin-bottom: 3px;
}

.ranking-title h2 {
    display: inline-block;
}

.ranking-title .ranking-desc {
    display: inline-block;
    padding: 6px 10px 5px;
    background-color: #d19717;
    border-radius: 15px;
    color: #0c0c0c;
    font-weight: 900;
}

.ranking-header h2 {
    color: #ffd700;
    margin-right: 5px;
    font-size: 15px;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table tr.rank {
    outline: 2px solid transparent; /* 기본 상태에서 어두운 outline */
    box-sizing: border-box; /* 요소 크기 계산에 padding 및 border 포함 */
    transition: outline-color 0.1s ease-in-out; /* 부드러운 전환을 위해 추가 */
}

.ranking-table tr.rank:hover {
    outline-color: #ff0000; /* hover 시 부드럽게 색상이 변하도록 설정 */
}

.ranking-table th {
    background-color: #2c2c2c;
    padding: 18px 16px ;
    text-align: left;
    font-weight: bolder;
    color: #ffffff;
    font-size: 14px;
}

.ranking-table .depth-1 th {
    width: 25%;
}

.ranking-table .depth-2 th {
    text-align: center;
}

.ranking-table td {
    padding: 0 10px;
}

.ranking-table td.no_data {
    height: 100px;
}

.rank-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
    margin-top: 10px;
}

.rank-1 .rank-icon {
    background-image: url('/static/img/hof/rank_01.gif?v=2');
}

.rank-2 .rank-icon {
    background-image: url('/static/img/hof/rank_02.png?v=2');
}

.rank-3 .rank-icon {
    background-image: url('/static/img/hof/rank_03.png?v=2');
}

.rank-4 .rank-icon {
    background-image: url('/static/img/hof/rank_04.png?v=2');
}

.rank-5 .rank-icon {
    background-image: url('/static/img/hof/rank_05.png?v=2');
}

.arrow-down {
    float: right;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #daab42;
}

.arrow-up {
    float: right;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #daab42;
}

.ranking-table td {
    color: #ffffff;
}

.ranking-table .rank-1 td {
    font-weight: bolder;
    color: #ffd700;
}

@media screen and (max-width: 767px) {
    .ranking-container * {
        font-size: calc(100% - 4%);
    }
    .ranking-table th {
        font-size: 10px;
    }
    .ranking-header h2 {
        font-size: 12px;
    }
}