.common-top-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
}

.common-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.6;
    color: #333333;
}

.custom-select {
    position: relative;
    width: 11.9rem;
    flex-shrink: 0;
}

.custom-select-trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    height: 2.8rem;
    padding: 0.6rem 1.5rem;
    border: 0.05rem solid #ededed;
    border-radius: 0.5rem;
    background: #ffffff;
    cursor: pointer;
}

.custom-select-value {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.6rem;
    text-align: center;
    color: #333333;
}

.custom-select-arrow {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 0.15rem solid #333333;
    border-bottom: 0.15rem solid #333333;
    transform: rotate(45deg) translateY(-0.1rem);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.custom-select.is-open .custom-select-arrow {
    transform: rotate(-135deg) translateY(-0.1rem);
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    max-height: 14rem;
    overflow: auto;
    border-radius: 0.5rem;
    border: 0.05rem solid #ededed;
}

.custom-select.is-open .custom-select-options {
    display: block;
}

.custom-select-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 2.8rem;
    padding: 0.6rem 1.5rem;
    background: #ffffff;
    border-bottom: 0.05rem solid #ededed;
    font-family: 'Pretendard', sans-serif;
    font-weight: 300;
    font-size: 1.3rem;
    line-height: 1.6rem;
    color: #333333;
    cursor: pointer;
}

.custom-select-option:first-child {
}

.custom-select-option:last-child {
    border-bottom: 0;
}

.custom-select-option.is-selected {
    background: #e4f3fe;
    color: #028bfd;
}



/*********************
    highlight.php
*********************/
.highlight-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.highlight-card {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.highlight-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 352 / 145;
    overflow: hidden;
    background: #eaeaea;
}

.highlight-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.highlight-card-body {margin-top: 1.6rem;}

.highlight-title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 500;
    color: #333333;
    word-break: keep-all;
}

.empty-message {
    margin: 0;
    padding: 2rem 1.6rem;
    border-radius: 1.2rem;
    background: #ffffff;
    font-size: 1.4rem;
    line-height: 2rem;
    text-align: center;
    color: #777777;
}


/*********************
    news.php
*********************/
.news-list-wrap {width: 100%;display: flex;flex-direction: column;gap: 2.5rem;}

.news-list-item {width: 100%;}

.news-card {display: flex;width: 100%;gap: 1.7rem;overflow: hidden;}

.news-thumb-wrap {
    aspect-ratio: 159 / 104;
    flex: 1;
    flex-shrink: 0;
}

.news-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.news-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.6rem;
  font-weight: 500;
  color: #333;
}

.news-content {
  margin: 1rem 0 1.9rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #333;
  font-weight: 400;
}

.news-date {
  font-size: 1.3rem;
  font-weight: 200;
  color: #b3b3b3;
  letter-spacing: 0.001rem;
}

.empty-message {


}



/*********************
    team_ranking.php
*********************/
.common-top-wrap.team-ranking-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 2rem;
}

.year-control {
    display: flex;
    align-items: center;
    gap: 2.8rem;
}

.year-nav-btn {
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    background: transparent;
    padding: 0;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.year-nav-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 0.25rem solid #333;
    border-right: 0.25rem solid #333;
    transform: translate(-50%, -50%) rotate(225deg);
}

.year-nav-btn.next::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.year-nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.year-text {
    margin: 0;
    font-size: 2rem;
    line-height: 2.4rem;
    font-weight: 600;
    color: #333;
    min-width: 5.6rem;
    text-align: center;
}

.custom-select {
    position: relative;
    width: 9.6rem;
    flex-shrink: 0;
}

.custom-select-trigger {
    box-sizing: border-box;
    width: 100%;
    height: 3.2rem;
    padding: 0.6rem 1.2rem;
    border: 0.05rem solid #ededed;
    border-radius: 0.5rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    cursor: pointer;
}

.custom-select-value {
    font-size: 1.3rem;
    line-height: 1.6rem;
    font-weight: 500;
    color: #333;
}

.custom-select-arrow {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 0.15rem solid #333;
    border-bottom: 0.15rem solid #333;
    transform: rotate(45deg) translateY(-0.1rem);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.custom-select.is-open .custom-select-arrow {
    transform: rotate(-135deg) translateY(-0.1rem);
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}

.custom-select.is-open .custom-select-options {
    display: block;
}

.custom-select-option {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.8rem;
    padding: 0.6rem 1.2rem;
    background: #fff;
    border-left: 0.05rem solid #ededed;
    border-right: 0.05rem solid #ededed;
    border-bottom: 0.05rem solid #ededed;
    font-size: 1.3rem;
    line-height: 1.6rem;
    font-weight: 300;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.custom-select-option:first-child {
    border-top: 0.05rem solid #ededed;
    border-radius: 0.5rem 0.5rem 0 0;
}

.custom-select-option:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}

.custom-select-option.is-selected {
    background: #e4f3fe;
    color: #028bfd;
}

.ranking-table-wrap {
    overflow-x: auto;
    margin: 0 -2rem;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

#wrap.team-ranking-wrap .ranking-table col:nth-child(1) {
    width: 10%;
}

#wrap.team-ranking-wrap .ranking-table col:nth-child(2) {
    width: 22%;
}

#wrap.team-ranking-wrap .ranking-table col:nth-child(3) {
    width: 14%;
}

#wrap.team-ranking-wrap .ranking-table col:nth-child(4),
#wrap.team-ranking-wrap .ranking-table col:nth-child(5),
#wrap.team-ranking-wrap .ranking-table col:nth-child(6) {
    width: 10%;
}

#wrap.team-ranking-wrap .ranking-table col:nth-child(7),
#wrap.team-ranking-wrap .ranking-table col:nth-child(8) {
    width: 12%;
}

.ranking-table th,
.ranking-table td {
    border: 0.1rem solid #e5e5e5;
    text-align: center;
    vertical-align: middle;
    padding: 1rem 0.4rem;
    font-size: 1.2rem;
    line-height: 1.6rem;
    color: #333;
    word-break: keep-all;
}

.ranking-table th {
    background: #f7f7f7;
    font-weight: 500;
}

.ranking-table td.team-cell {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

.team-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-start;
}

.team-logo {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
    flex-shrink: 0;
}

.team-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.empty-message {
    margin: 0;
    padding: 2rem 1.6rem;
    border-radius: 1.2rem;
    background: #fff;
    font-size: 1.4rem;
    line-height: 2rem;
    text-align: center;
    color: #777;
}


/*********************
    highlight.php — UI scaffold (empty)
*********************/
#wrap.highlight-wrap {
}

#wrap.highlight-wrap > .container {
}

#wrap.highlight-wrap .common-top-wrap {
}

#wrap.highlight-wrap .common-title {
}

#wrap.highlight-wrap #highlightDateSelect.custom-select {
}

#wrap.highlight-wrap #highlightDateSelect .custom-select-trigger {
}

#wrap.highlight-wrap #highlightDateSelect .custom-select-value {
}

#wrap.highlight-wrap #highlightDateSelect .custom-select-arrow {
}

#wrap.highlight-wrap #highlightDateSelect .custom-select-options {
}

#wrap.highlight-wrap #highlightDateSelect .custom-select-option {
}

#wrap.highlight-wrap #highlightListWrap.highlight-list-wrap {
}

#wrap.highlight-wrap .highlight-list-item {
}

#wrap.highlight-wrap .highlight-card {
}

#wrap.highlight-wrap .highlight-thumb-wrap {
}

#wrap.highlight-wrap .highlight-thumb {
}

#wrap.highlight-wrap .highlight-card-body {
}

#wrap.highlight-wrap .highlight-title {
}

#wrap.highlight-wrap .highlight-list-wrap .empty-message {
}


/*********************
    news.php — UI scaffold (empty)
    (루트: #wrap.highlight-wrap — highlight.php 와 동일 클래스)
*********************/
#wrap.highlight-wrap .news-list-wrap {
}

#wrap.highlight-wrap .news-list-item {
}

#wrap.highlight-wrap .news-card {
}

#wrap.highlight-wrap .news-thumb-wrap {
}

#wrap.highlight-wrap .news-thumb {
}

#wrap.highlight-wrap .news-info {
}

#wrap.highlight-wrap .news-title {
}

#wrap.highlight-wrap .news-content {
}

#wrap.highlight-wrap .news-date {
}

#wrap.highlight-wrap .news-list-wrap .empty-message {
}


/*********************
    player_ranking.php — UI scaffold (empty)
*********************/
#wrap.player-ranking-wrap {
}

#wrap.player-ranking-wrap > .container {
}

#wrap.player-ranking-wrap .common-top-wrap.player-ranking-top {
}

#wrap.player-ranking-wrap .year-control {
}

#wrap.player-ranking-wrap #prevYearBtn.year-nav-btn.prev {
}

#wrap.player-ranking-wrap #seasonYearText.year-text {
}

#wrap.player-ranking-wrap #nextYearBtn.year-nav-btn.next {
}

#wrap.player-ranking-wrap #seasonTypeSelect.custom-select {
}

#wrap.player-ranking-wrap #seasonTypeSelect .custom-select-trigger {
}

#wrap.player-ranking-wrap #seasonTypeSelect .custom-select-value {
}

#wrap.player-ranking-wrap #seasonTypeSelect .custom-select-arrow {
}

#wrap.player-ranking-wrap #seasonTypeSelect .custom-select-options {
}

#wrap.player-ranking-wrap #seasonTypeSelect .custom-select-option {
}

#wrap.player-ranking-wrap .player-ranking-tab-wrap {width: 100%;display: flex;align-items: center;justify-content: center;border-radius: 0.5rem;overflow: hidden;margin-bottom: 2.5rem;}

#wrap.player-ranking-wrap .player-ranking-tab-btn {flex: 1;flex-shrink: 0;padding: 1.6rem 2rem;background: #f4f4f4;color: #333;font-size: 1.8rem;font-weight: 500;}

#wrap.player-ranking-wrap .player-ranking-tab-btn.is-active {background: var(--brand-color2);color: #fff;}

#wrap.player-ranking-wrap .player-ranking-menu-list {display: flex;flex-direction: column;gap: 2.5rem;width: 100%;}

#wrap.player-ranking-wrap .player-ranking-menu-item {
    width: 100%;
}

#wrap.player-ranking-wrap .player-ranking-menu-card {width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 2rem;border: 1px solid #ededed;border-radius: 0.5rem;}

#wrap.player-ranking-wrap .player-ranking-menu-title {font-size:  1.8rem;font-weight: 500;color: #333;}

#wrap.player-ranking-wrap .player-ranking-menu-link {color: var(--brand-color2);font-size: 1.6rem;font-weight: 500;padding: 0.7rem 1.3rem;background: #e4f3fe;border-radius: 50rem;}


/*********************
    player_ranking_detail.php — UI scaffold (empty)
*********************/
#wrap.player-ranking-detail-wrap {
}

#wrap.player-ranking-detail-wrap > .container {
}

#wrap.player-ranking-detail-wrap .player-ranking-detail-top {display: flex;align-items: center;margin-bottom: 2.4rem;}

#wrap.player-ranking-detail-wrap .back-btn {width: 100%;display: flex;align-items: center;}

#wrap.player-ranking-detail-wrap .player-ranking-detail-title {flex: 1;margin-left: -1rem;text-align: center;font-size: 2rem;color: #333;font-weight: 600;letter-spacing: -0.1rem;}

#wrap.player-ranking-detail-wrap .player-ranking-detail-list {
}

#wrap.player-ranking-detail-wrap .player-ranking-detail-item {padding: 2.4rem 0;border-bottom: 1px solid #ededed;display: flex;align-items: center;justify-content: space-between;}

#wrap.player-ranking-detail-wrap .player-ranking-detail-item.is-first {
}

#wrap.player-ranking-detail-wrap .player-ranking-detail-left {display: flex;align-items: center;justify-content: flex-start;gap: 1.2rem;}

#wrap.player-ranking-detail-wrap .rank-badge {width: 3.2rem;height: 3.2rem;border-radius: 5rem;background: #f4f4f4;display: flex;align-items: center;justify-content: center;font-size: 1.8rem;color: #b3b3b3;font-weight: 400;}

#wrap.player-ranking-detail-wrap .rank-badge.rank-badge-first {background: transparent;}

#wrap.player-ranking-detail-wrap .player-info {display: flex;align-items: center;justify-content: flex-start;/* gap: 1rem; */}

#wrap.player-ranking-detail-wrap .player-info .team-meta {
    display: flex;
    align-items: center;
    width: 6.4rem;
}

#wrap.player-ranking-detail-wrap .player-info .team-logo {height: 1.3rem;margin-right: 0.2rem;}

#wrap.player-ranking-detail-wrap .player-info .team-name {color: #333;font-size: 1.3rem;font-weight: 300;}

#wrap.player-ranking-detail-wrap .player-info .player-name {color: #333;font-size: 2rem;font-weight: 500;}

#wrap.player-ranking-detail-wrap .player-ranking-detail-value {color: #333;font-size: 1.8rem;font-weight: 500;}

#wrap.player-ranking-detail-wrap .player-ranking-detail-value.is-first {color: var(--brand-color2);}

#wrap.player-ranking-detail-wrap .player-ranking-detail-empty {
}


/*********************
    schedule.php — UI scaffold (empty)
*********************/
#wrap.game-schedule-wrap {
}

#wrap.game-schedule-wrap > .container {
}

#wrap.game-schedule-wrap #datePickerBar.date-picker-bar {
}

#wrap.game-schedule-wrap #prevMonthBtn.date-nav-btn.prev {
}

#wrap.game-schedule-wrap #monthDisplayBtn.date-display-btn {
}

#wrap.game-schedule-wrap #selectedDateText {
}

#wrap.game-schedule-wrap #nextMonthBtn.date-nav-btn.next {
}

#wrap.game-schedule-wrap #hiddenMonthInput.date-picker-input {
}

#wrap.game-schedule-wrap .game-schedule-content {margin-top: 2.7rem;}

#wrap.game-schedule-wrap .game-day-section + .game-day-section {margin-top: 4rem;}

#wrap.game-schedule-wrap .game-day-title {color: #333;font-size: 1.8rem;font-weight: 600;}

#wrap.game-schedule-wrap .game-card-list {
}

#wrap.game-schedule-wrap .game-card-item {padding: 3rem 0;border-bottom: 1px solid #ededed;display: flex;flex-direction: column;gap: 1.2rem;}

#wrap.game-schedule-wrap .game-card-item:last-child {border-bottom: 0;}

#wrap.game-schedule-wrap .game-card-top {display: flex;align-items: center;width: 100%;justify-content: space-between;}

#wrap.game-schedule-wrap .game-meta {display: flex;align-items: center;gap: 0.6rem;color: #333;}

#wrap.game-schedule-wrap .stadium-name {color: #333;font-weight: 300;font-size: 1.3rem;}

#wrap.game-schedule-wrap .game-meta .divider {font-size: 1.3rem;color: #333;font-weight: 300;}

#wrap.game-schedule-wrap .game-time {color: #333;font-size: 1.3rem;font-weight: 300;}

#wrap.game-schedule-wrap .kbo-game-status-badge {border-radius: 5rem;padding: 0.6rem 1.3rem;font-size: 1.3rem;font-weight: 300;background: #f4f4f4;color: #333;}

#wrap.game-schedule-wrap .kbo-game-status-badge--scheduled {background: #e4f3fe;color: var(--brand-color2);}

#wrap.game-schedule-wrap .kbo-game-status-badge--live,
#wrap.game-schedule-wrap .kbo-game-status-badge--final {background: #f4f4f4;color: #333;}

#wrap.game-schedule-wrap .team-score-row {display: flex;align-items: center;justify-content: space-between;}

#wrap.game-schedule-wrap .team-score-row .team-info {
}

#wrap.game-schedule-wrap .team-score-row .team-logo {height: 1.6rem;}

#wrap.game-schedule-wrap .team-score-row .team-name {color: #333;font-size: 1.8rem;font-weight: 500;}

#wrap.game-schedule-wrap .team-score-row .team-score {font-size: 2.5rem;font-weight: 500;color: #b3b3b3;}

#wrap.game-schedule-wrap .team-score-row .team-score.is-win {color: #ff0000;}
#wrap.game-schedule-wrap .team-score-row .team-score.is-loss {color: #b3b3b3;}
#wrap.game-schedule-wrap .team-score-row .team-score.is-dash {color: #333;}

#wrap.game-schedule-wrap .empty-game-message {
}


/*********************
    team_ranking_detail.php — UI scaffold (empty)
    (루트: #wrap.highlight-wrap — 현재 마크업은 container 만 존재)
*********************/
#wrap.highlight-wrap {
}

#wrap.highlight-wrap > .container {
}


/*********************
    team_ranking.php — UI scaffold (empty)
*********************/
#wrap.team-ranking-wrap {
}

#wrap.team-ranking-wrap > .container {
}

#wrap.team-ranking-wrap .common-top-wrap.team-ranking-top {
}

#wrap.team-ranking-wrap .year-control {
}

#wrap.team-ranking-wrap #prevYearBtn.year-nav-btn.prev {
}

#wrap.team-ranking-wrap #seasonYearText.year-text {
}

#wrap.team-ranking-wrap #nextYearBtn.year-nav-btn.next {
}

#wrap.team-ranking-wrap #seasonTypeSelect.custom-select {
}

#wrap.team-ranking-wrap #seasonTypeSelect .custom-select-trigger {
}

#wrap.team-ranking-wrap #seasonTypeSelect .custom-select-value {
}

#wrap.team-ranking-wrap #seasonTypeSelect .custom-select-arrow {
}

#wrap.team-ranking-wrap #seasonTypeSelect .custom-select-options {
}

#wrap.team-ranking-wrap #seasonTypeSelect .custom-select-option {
}

#wrap.team-ranking-wrap .ranking-table-wrap {
}

#wrap.team-ranking-wrap .ranking-table {
}

#wrap.team-ranking-wrap .ranking-table colgroup {
}

#wrap.team-ranking-wrap .ranking-table col {
}

#wrap.team-ranking-wrap .ranking-table thead {
}

#wrap.team-ranking-wrap .ranking-table thead tr {
}

#wrap.team-ranking-wrap .ranking-table th {
}

#wrap.team-ranking-wrap #rankingTableBody {
}

#wrap.team-ranking-wrap .ranking-table tbody tr {
}

#wrap.team-ranking-wrap .ranking-table td {
}

#wrap.team-ranking-wrap .ranking-table td.team-cell {
}

#wrap.team-ranking-wrap .ranking-table .team-info {
}

#wrap.team-ranking-wrap .ranking-table .team-logo {
}

#wrap.team-ranking-wrap .ranking-table .team-name {width: fit-content;flex: 1;text-align: left;}

#wrap.team-ranking-wrap .ranking-table .empty-message {
}