main {
    overflow: hidden;
    min-height: calc(100vh);
    text-align: center;
}
* {
    box-sizing: border-box;
}

/*  */
.board_bg {
    position: absolute;
    top: 2.25rem;
    left: 0;
}
.history_top_menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 57rem;
    margin: 10rem auto 2.35rem;
    padding: 0 1rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
}
.history_tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.7rem;
}
.history_tab li {
    color: var(--color-gray01);
    font-family: var(--font-Pretendard);
    font-size: var(--font-size-40);
    font-weight: var(--font-weight-500);
    /* 원래 600인데 500으로 줄임 */
}
.history_tab li p {
    /* opacity: 0.3; */
    /* 원래는 0.3인데 시즌 차트 잠시 주석 처리 해둬서 임시로 1을 넣어둠 */
    opacity: 1;
}
.selected p {
    opacity: 1;
}

.monthly {
    position: relative;
}
.monthly img {
    /* opacity: 0; */
    /* 원래는 0인데 시즌 차트 잠시 주석 처리 해둬서 임시로 1을 넣어둠 */
    opacity: 1;
    width: 3.45rem;
    height: 1.5rem;
    position: absolute;
    top: -2rem;
    left: 0;
}
.season {
    position: relative;
}
.season img {
    opacity: 0;
    width: 3.45rem;
    height: 1.5rem;
    position: absolute;
    top: -2rem;
}
.selected img {
    opacity: 1;
}

.history_data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.5rem;
}

/* data dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    margin-top: 0.5rem;
    background-color: var(--color-gray23);
    border-radius: 0.2rem;
    width: 6.4rem;
    z-index: 10;
}

.dropdown-content a {
    padding: 0.6rem;
    text-decoration: none;
    display: block;
    color: var(--color-gray22);
    text-align: left;
    padding-left: 1.05rem;
}

.dropdown-content.show {
    display: block;
}
.dropdown-btn {
    background-color: var(--color-gray23);
    color: var(--color-gray22);
    font-family: var(--font-Pretendard);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-500);
    /* 원래 600인데 500으로 줄임 */
    padding: 0.6rem;
    padding-left: 1.05rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.15rem;
    border: none;
    cursor: pointer;
    border-radius: 0.2rem;
    width: 6.4rem;
}
.dropdown-btn img {
    width: 0.9rem;
    height: 0.9rem;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
}

.rotate {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
/* top */
.top {
    padding: 3.15rem 0;
    overflow: hidden;
}
.swiper-container {
    width: 100%;
    position: relative;
}

.swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 2.2rem;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.swiper-slide {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    position: relative;
    margin: 0;
    box-sizing: content-box !important;
}
.swiper-slide p {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    font-family: var(--font-Gmarket);
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-600);
    letter-spacing: 0.789px;
    text-transform: uppercase;
    line-height: 1.45;
    white-space: nowrap;
}
.swiper-slide img {
    width: 9.3rem;
    height: 12.6rem;
    border-radius: 0.85rem;
}
.swiper-slide-active {
    padding: 0 2.3rem;
}
.swiper-slide-active img {
    padding: 0;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}
.swiper-slide-active p {
    z-index: 5;
    top: -2.5rem;
}

/* ranking */

.swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.swiper-container-new .swiper-wrapper {
    padding-left: 0;
}
.swiper-slide {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.swiper-container-new .swiper-slide-active img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.sub_title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.55rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.sub_title h2 {
    color: var(--color-gray01);
    font-family: var(--font-Pretendard);
    font-size: var(--font-size-40);
    font-weight: var(--font-weight-500);
}
.sub_title p {
    font-family: var(--font-Gmarket);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-600);
    opacity: 0.3;
    letter-spacing: 0.789px;
    line-height: 1.2;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

/* chart */
.chart {
    max-width: 57rem;
    padding: 0 1rem;
    margin: 6.15rem auto 0;
}
.chart_box {
    width: 100%;
    height: auto;
    margin-top: 2.2rem;
    object-fit: cover;
}

.chart_box p {
    font-family: var(--font-Gmarket);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    opacity: 0.3;
    letter-spacing: 0.789px;
    line-height: 1.2;
}

.history_inner_wrap {
    max-width: 57rem;
    margin: 0 auto;
    padding-top: 0;
}

.history_header_tab {
    margin-top: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.history_header_tab button {
    width: 6.7rem;
    height: 2.7rem;
    border-radius: 2rem;
    background: var(--color-gray23);
    color: var(--color-gray26);
    text-align: center;
    font-family: var(--font-Pretendard);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-500);
    border: none;
    margin-right: 0.6rem;
    cursor: pointer;
}
.history_header_tab button.active {
    border: 1px solid var(--color-main);
    color: var(--color-main);
}
.history_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 4.4rem 0 6.25rem;
}
.history_content_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2.2rem;
}
.history_content_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.history_content_item.active {
    display: block;
}
.history_content_item h5 {
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.65);
    font-family: var(--font-Gmarket);
    font-size: var(--font-size-25);
    font-weight: var(--font-weight-600);
    line-height: 0.75;
    letter-spacing: 0.79px;
    text-transform: uppercase;
}
.history_content_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.45rem;
    margin-top: 1.1rem;
}
.history_content_content img {
    width: 15.6rem;
    height: 21.1rem;
    border-radius: 0.5rem;
}
.history_content_player {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 38rem;
    height: 21.1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--color-gray27);
    color: var(--color-gray01);
    font-family: var(--font-Pretendard);
    font-size: var(--font-size-40);
    font-weight: var(--font-weight-600);
    position: relative;
}
.history_content_info {
    gap: 0.4rem;
    margin-top: 1.1rem;
}
.content_info_title {
    color: var(--color-gray01);
    font-family: var(--font-Pretendard);
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-600);
    margin-bottom: 0.4rem;
}
.content_info_count {
    font-family: var(--font-Pretendard);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-400);
    letter-spacing: -0.1px;
    opacity: 0.43;
}

.hidden {
    display: none;
}
.active {
    display: block;
}

.chart_result_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2.6rem;
    margin-top: 1.6rem;
    text-align: start;
}

.chart_result_box li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.4rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

.chart_result_box li .best_series {
    width: 100%;
}
.chart_result_box li .power_ranking {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.result_box_txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.3rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0.6rem;
}
.chart_result_box h3 {
    font-family: var(--font-Gmarket);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-600);
    color: var(--color-main);
}
.chart_result_box span {
    font-family: var(--font-Gmarket);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-500);
    color: var(--color-main);
}
.chart_result_box p {
    font-family: var(--font-Pretendard);
    font-size: var(--font-size-17);
    font-weight: var(--font-weight-400);
    color: var(--color-gray48);
    margin-top: 0.5rem;
    letter-spacing: -1px;
    line-height: 20px;
}
.result_column_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.25rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.grid_box {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: start !important;
}

.grid_box div {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
}
.add_info_btn {
    margin: 4rem auto 7.25rem;
    width: 23.8%;
    min-width: 14rem;
    height: 4.5rem;
    background-color: var(--color-main);
    color: var(--color-white);
    font-size: var(--font-size-23);
    font-weight: var(--font-weight-500);
    letter-spacing: -0.623px;
    border: none;
    border-radius: 0.31rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
}

.series_box {
    width: 100%;
    padding: 3.6657vw 3.2258vw;
    border-radius: 20px;
    background: #101010;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.series_box ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}
/* ⭐ 핵심 수정: 고정 비율 너비로 10개 균등 배치 */
.series_box ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    gap: 0 !important;
    width: 10%; /* 10개 아이템 균등 배치 */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.series_grap {
    width: 30px !important;
    height: 300px;
    margin-bottom: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.series_grap div {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: -webkit-linear-gradient(top, #e5195c 0%, #151515 100%);
    background: linear-gradient(180deg, #e5195c 0%, #151515 100%);
}
.series_box ul li:nth-child(2) .series_grap div {
    height: 90%;
}
.series_box ul li:nth-child(3) .series_grap div {
    height: 85%;
}
.series_box ul li:nth-child(4) .series_grap div {
    height: 80%;
}
.series_box ul li:nth-child(5) .series_grap div {
    height: 75%;
}
.series_box ul li:nth-child(6) .series_grap div {
    height: 70%;
}
.series_box ul li:nth-child(7) .series_grap div {
    height: 65%;
}
.series_box ul li:nth-child(8) .series_grap div {
    height: 60%;
}
.series_box ul li:nth-child(9) .series_grap div {
    height: 55%;
}
.series_box ul li:nth-child(10) .series_grap div {
    height: 50%;
}
.series_rank {
    color: var(--color-pink02) !important;
    font-size: var(--font-size-16) !important;
    font-weight: var(--font-weight-600) !important;
    font-family: var(--font-Pretendard) !important;
    margin-bottom: 18px;
}
.series_drama > div {
    width: 76px;
    height: 76px; /* aspect-ratio 폴백 */
    aspect-ratio: 1/1;
    border-radius: 10px !important;
    background-size: 150% !important;
    background-position: center center !important;
}
.series_box ul li .series_drama {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.series_box ul li:first-child .series_drama > div {
    border: 2px solid var(--color-pink02);
    border-radius: 10px;
}

.series_drama p {
    margin-top: 16px !important;

    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray42);

    line-height: 17px;
    height: 36px;
    letter-spacing: -0.02em;

    max-width: 76px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;

    text-overflow: ellipsis;
    word-break: keep-all;
}
.series_count {
    margin-top: 5px;
    font-size: var(--font-size-12) !important;
    font-weight: var(--font-weight-400) !important;
    color: var(--color-gray09) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/*  */

.power_ranking_box {
    width: 100%;
    padding: 48px 50px 48px 48px;
    border-radius: 20px;
    background: #101010;
}
.power_ranking_box ul li {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    margin-bottom: 32px;
}
.power_ranking_box ul li div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px;
}
.basic_rank {
    font-size: var(--font-size-20) !important;
    font-weight: var(--font-weight-400) !important;
    color: var(--color-pink02) !important;
    font-family: var(--font-Pretendard) !important;
}
.basic_actor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 18px !important;
}
.basic_actor img {
    max-width: 58px;
    height: 58px; /* aspect-ratio 폴백 */
    aspect-ratio: 1/1;
    border-radius: 10px;
}
ul li .basic_actor > div {
    background-size: 150% !important;
    border-radius: 0.4rem !important;
    background-position: center center !important;
    width: 2.8rem;
    height: 2.8rem;
}
ul li:first-child .basic_actor > div {
    border: 2px solid var(--color-pink02);
    border-radius: 10px;
}
.basic_actor p {
    font-size: var(--font-size-18) !important;
    font-weight: var(--font-weight-500) !important;
    color: var(--color-gray42) !important;
    font-family: var(--font-Pretendard) !important;
    margin-top: 0 !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.basic_count {
    font-size: var(--font-size-18) !important;
    font-weight: var(--font-weight-500) !important;
    color: var(--color-pink02) !important;
    font-family: var(--font-Pretendard) !important;
}

/*  */

.best_popularity_box,
.best_ost_box {
    width: 100%;
    padding: 48px;
    border-radius: 20px;
    background: #101010;
}
.best_popularity_box ul,
.best_ost_box ul {
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 12px 1fr;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    row-gap: 32px;
}
/*  */
.best_couple_box {
    width: 100%;
    padding: 51px 48px 57px 48px;
    border-radius: 20px;
    background: #101010;
}
.best_couple_box ul li {
    margin-bottom: 47px;
}
.best_couple_box ul li:last-child {
    margin-bottom: 0;
}

.best_couple_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    max-width: fit-content;
}
.best_couple_info h3 {
    font-size: var(--font-size-14) !important;
    font-weight: var(--font-weight-500) !important;
    color: var(--color-gray05) !important;
    line-height: 1.28;
    font-family: var(--font-Pretendard) !important;
}
.haert_icon {
    width: 10px;
    height: 9px;
    margin-bottom: 6px;
}
.best_couple_actor_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.best_couple_actor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    max-width: fit-content;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.best_couple_actor img {
    max-width: 58px;
    height: 58px; /* aspect-ratio 폴백 */
    aspect-ratio: 1/1;
    border-radius: 10px;
}
.best_couple_actor div {
    font-size: var(--font-size-18) !important;
    font-weight: var(--font-weight-500) !important;
    color: var(--color-gray42) !important;
    line-height: normal !important;
    margin-top: 0 !important;
    letter-spacing: normal !important;
}
.best_couple_box ul li:first-child .best_couple_actor img {
    border: 2px solid var(--color-pink02);
    border-radius: 10px;
}

.couple_grap {
    width: 100% !important;
    height: 31px !important;
    margin-bottom: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.couple_grap div {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: -webkit-linear-gradient(right, #e5195c 0%, #151515 100%);
    background: linear-gradient(270deg, #e5195c 0%, #151515 100%);
    -webkit-box-flex: 0 !important;
    -ms-flex: none !important;
    flex: none !important;
    text-align: end;
    padding-right: 10px;
    padding-top: 4px;
}

.best_couple_box ul li:nth-child(2) .couple_grap div {
    width: 90% !important;
}

.best_couple_box ul li:nth-child(3) .couple_grap div {
    width: 85% !important;
}

.best_couple_box ul li:nth-child(4) .couple_grap div {
    width: 75% !important;
}

.best_couple_box ul li:nth-child(5) .couple_grap div {
    width: 65% !important;
}
.basic_percent {
    font-size: var(--font-size-18) !important;
    font-weight: var(--font-weight-500) !important;
    color: var(--color-white) !important;
    font-family: var(--font-Pretendard) !important;
}
@media (max-width: 1330px) {
    .top {
        padding: 2.15rem 0;
    }
    .swiper-slide p {
        text-shadow: 0px 0px 4.327px rgba(0, 0, 0, 0.65);
    }
    .swiper-slide-active p {
        z-index: 9;
        top: -1.5rem !important;
    }

    .swiper-slide img {
        width: 7.8rem;
        height: 10.7rem;
    }
    .swiper-wrapper {
        padding-left: 1.8rem;
    }
    .swiper-slide-active {
        padding: 0 1.8rem;
    }
    .swiper-slide-active img {
        padding: 0;
        -webkit-transform: scale(1.4);
        -ms-transform: scale(1.4);
        transform: scale(1.4);
    }
}
@media (max-width: 1200px) {
    .chart_result_box p {
        font-size: var(--font-size-14);
        margin-top: 0.3rem;
    }
    .result_column_box {
        gap: 2.4vw;
    }
}
@media (max-width: 1100px) {
    .result_column_box {
        gap: 2.2vw;
    }
}
@media (max-width: 1050px) {
    .result_column_box {
        gap: 2vw;
    }
}
@media (max-width: 1000px) {
    .history_tab li {
        font-size: var(--font-size-34);
    }
    .sub_title h2 {
        font-size: var(--font-size-34);
    }

    .sub_title p {
        font-size: var(--font-size-15);
    }
    .chart_result_box h3 {
        font-size: var(--font-size-17);
    }
    .chart_result_box span {
        font-size: var(--font-size-12);
    }
    .chart_result_box p {
        font-size: var(--font-size-12);
        margin-top: 0.1rem;
    }
    .add_info_btn {
        font-size: var(--font-size-20);
    }

    .series_drama > div {
        width: 62px;
        height: 62px; /* aspect-ratio 폴백 */
    }
    .series_drama p {
        min-height: calc(var(--font-size-12) * 1.28 * 2);
    }
    .basic_actor p {
        font-size: var(--font-size-16) !important;
    }
    .basic_count {
        font-size: var(--font-size-16) !important;
    }
    .power_ranking_box {
        padding: 40px;
    }
    .best_couple_box {
        padding: 40px;
    }
    .best_popularity_box,
    .best_ost_box {
        padding: 40px;
    }
    .chart_result_box li {
        gap: 1rem;
    }

    .best_couple_actor div {
        font-size: var(--font-size-16) !important;
    }
    .best_couple_box ul li {
        margin-bottom: 34px;
    }
}
@media (max-width: 900px) {
    .chart_result_box h3 {
        font-size: var(--font-size-15);
    }
    .result_column_box {
        gap: 1.7vw;
    }
}
@media (max-width: 850px) {
    .result_column_box {
        gap: 1.4vw;
    }
}
@media (max-width: 800px) {
    .result_column_box {
        gap: 1.1vw;
    }
    .series_drama > div {
        width: 52px;
        height: 52px; /* aspect-ratio 폴백 */
    }
    .series_count {
        font-size: var(--font-size-10) !important;
    }
    .chart_result_box p {
        font-size: var(--font-size-11);
    }
    .series_drama p {
        margin-top: 14px !important;
        min-height: calc(var(--font-size-11) * 1.28 * 2);
    }
    .series_rank {
        font-size: var(--font-size-14) !important;
    }
    .power_ranking_box {
        padding: 32px;
    }
    .basic_actor {
        gap: 18px !important;
    }
    ul li .basic_actor > div {
        width: 2.6rem !important;
        height: 2.6rem !important;
    }
    .basic_actor p {
        font-size: var(--font-size-14) !important;
    }
    .basic_count {
        font-size: var(--font-size-14) !important;
    }
    .power_ranking_box ul li div {
        gap: 18px;
    }
    .best_couple_box ul li {
        margin-bottom: 26px;
    }
    .best_couple_actor img {
        width: 2.6rem;
        height: 2.6rem; /* aspect-ratio 폴백 */
    }
    .best_couple_box {
        padding: 30px;
    }
    .best_popularity_box,
    .best_ost_box {
        padding: 30px;
    }
    .basic_actor img {
        width: 2.6rem;
        height: 2.6rem; /* aspect-ratio 폴백 */
    }
    .basic_actor {
        gap: 12px !important;
    }
    .basic_actor p {
        font-size: var(--font-size-12) !important;
    }
    .basic_percent {
        font-size: var(--font-size-14) !important;
    }
    .best_couple_actor div {
        font-size: var(--font-size-12) !important;
    }
    .best_couple_info h3 {
        font-size: var(--font-size-12) !important;
    }
}

@media (max-width: 750px) {
    .result_column_box {
        gap: 0.7vw;
    }
}
@media (max-width: 700px) {
    .history_top_menu {
        margin: 5.5rem 0 2.85rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.8rem;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .history_tab {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.85rem;
    }
    .history_tab li {
        font-size: var(--font-size-26);
        min-width: fit-content;
    }
    .history_tab li p {
        font-size: var(--font-size-26);
    }
    .monthly img {
        width: 1.75rem;
        height: 0.8rem;
        top: -1rem;
    }

    .season img {
        opacity: 0;
        width: 1.75rem;
        height: 0.8rem;
        top: -1rem;
    }
    .selected img {
        opacity: 1;
    }
    .history_data {
        gap: 0.3rem;
    }

    .dropdown-content {
        width: 5.4rem;
    }
    .dropdown-content a {
        padding: 0.6rem;
        padding-left: 1.05rem;
        text-decoration: none;
        font-size: var(--font-size-16);
        display: block;
    }
    .dropdown-btn {
        font-size: var(--font-size-16);
        padding: 0.6rem;
        padding-left: 0.75rem;
        gap: 1.1rem;
        border-radius: 0.2rem;
        width: 5.4rem;
    }
    .dropdown-btn img {
        width: 0.8rem;
        height: 0.8rem;
    }

    .top {
        padding: 1.25rem 0;
    }
    .swiper-slide p {
        text-shadow: 0px 0px 4.327px rgba(0, 0, 0, 0.65);
        top: 0.6rem;
        left: 0.6rem;
        font-size: var(--font-size-10);
        letter-spacing: 0.488px;
        line-height: 1.17;
        white-space: nowrap;
    }
    .swiper-slide-active p {
        z-index: 9;
        top: -0.5rem !important;
    }

    .swiper-slide img {
        width: 5.52rem;
        height: 7.7rem;
        border-radius: 0.5rem;
    }
    .swiper-wrapper {
        padding-left: 0.95rem;
    }
    .swiper-slide-active {
        padding: 0 0.95rem;
    }
    .swiper-slide-active img {
        padding: 0;
        -webkit-transform: scale(1.35);
        -ms-transform: scale(1.35);
        transform: scale(1.35);
        border-radius: 0.6rem;
    }
    .swiper-slide-active p {
        z-index: 5;
        top: -3rem;
    }

    .sub_title {
        gap: 0.25rem;
    }
    .sub_title h2 {
        font-size: var(--font-size-26);
    }
    .sub_title p {
        font-size: var(--font-size-14);
        line-height: normal;
    }

    .chart {
        margin-top: 4rem;
        min-width: 16rem;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .history_inner_wrap {
        max-width: 34rem;
        margin: 0 auto;
        padding-top: 0;
        padding-left: 1rem;
    }

    .history_header_tab {
        margin-top: 1.25rem;
    }
    .history_header_tab button {
        width: 5.4rem;
        min-width: fit-content;
        height: 2.3rem;
        padding: 0.55rem 1.1rem;
        border-radius: 2rem;
        text-align: center;
        font-size: var(--font-size-16);
        margin-right: 0.3rem;
    }
    .history_content {
        margin: 3.35rem auto 2.4rem;
        max-width: 16rem;
    }
    .history_content_list {
        gap: 2.4rem;
    }
    .history_content_item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .history_content_item.active {
        display: block;
    }
    .history_content_item h5 {
        font-size: var(--font-size-20);
        line-height: normal;
        letter-spacing: 0.5px;
    }
    .history_content_content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.8rem;
        margin-top: 1.25rem;
    }
    .history_content_content img {
        width: 16rem;
        height: 21.6rem;
    }
    .history_content_player {
        max-width: 16rem;
        height: 8.9rem;
    }
    .history_content_info {
        margin-top: 1.2rem;
    }
    .content_info_title {
        font-size: var(--font-size-24);
    }
    .content_info_count {
        font-size: var(--font-size-22);
        letter-spacing: -0.1px;
        opacity: 0.43;
    }

    .chart_result_box {
        gap: 1.4rem;
    }

    .chart_result_box li {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .result_box_txt {
        margin-bottom: 0.6rem;
    }
    .chart_result_box h3 {
        font-size: var(--font-size-18);
    }
    .chart_result_box span {
        font-size: var(--font-size-12);
    }
    .chart_result_box p {
        font-size: var(--font-size-15);
        margin-top: 0.5rem;
    }
    .result_column_box {
        gap: 1.25rem;
    }
    .add_info_btn {
        width: 55.6%;
        max-width: 14rem;
        height: 3.6rem;
        margin: 2rem auto 5rem;
        height: 3.6rem;
        font-size: var(--font-size-18);
    }
    .chart_result_box li .power_ranking {
        width: 100%;
    }

    .grid_box div {
        width: 100%;
    }
    .power_ranking_box ul li,
    .best_couple_box ul li,
    .best_popularity_box ul li,
    .best_ost_box ul li {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }
    .series_rank {
        font-size: var(--font-size-12) !important;
    }
    .series_drama p {
        font-size: var(--font-size-9) !important;
        min-height: calc(var(--font-size-9) * 1.28 * 2) !important;
        max-width: 100%; /* 부모 너비에 맞춤 */
    }
    .series_count {
        font-size: var(--font-size-8) !important;
    }
    .series_drama > div {
        width: 44px;
        height: 44px; /* aspect-ratio 폴백 */
        border-radius: 8px !important;
    }
    .series_rank {
        margin-bottom: 14px;
    }

    .series_grap {
        width: 24px !important;
        height: 250px;
    }
}

@media (max-width: 600px) {
    .history_top_menu {
        max-width: 22.3rem;
    }
    .chart_result_box p {
        font-size: var(--font-size-13);
        margin-top: 0.5rem;
    }
    .sub_title {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .series_drama > div {
        width: 36px;
        height: 36px; /* aspect-ratio 폴백 */
        border-radius: 6px !important;
    }
    .series_drama p {
        line-height: 15px;
        height: 33px;
    }
}
@media (max-width: 500px) {
    .chart {
        margin-top: 2.5rem;
    }

    .chart_result_box h3 {
        font-size: var(--font-size-17);
    }
    .chart_result_box p {
        font-size: var(--font-size-12);
        margin-top: 0.5rem;
    }
    .add_info_btn {
        margin: 2rem auto 5rem;
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-400);
    }
    .power_ranking_box,
    .best_couple_box,
    .best_popularity_box,
    .best_ost_box {
        padding: 28px;
    }
    .best_couple_box ul li {
        margin-bottom: 22px;
    }
    .power_ranking_box ul li {
        margin-bottom: 22px;
    }
    .chart_result_box li {
        gap: 18px;
    }
    .series_drama p {
        font-size: var(--font-size-7) !important;
        min-height: calc(var(--font-size-7) * 1.28 * 2) !important;
        line-height: 12px;
        height: 24px;
    }
    .series_count {
        font-size: var(--font-size-6) !important;
    }
    .series_drama > div {
        width: 28px;
        height: 28px; /* aspect-ratio 폴백 */
        border-radius: 4px !important;
    }
    ul li .basic_actor > div {
        width: 2.3rem !important;
        height: 2.3rem !important;
    }
    .best_couple_actor img {
        width: 2.3rem;
        height: 2.3rem; /* aspect-ratio 폴백 */
    }
    .series_grap {
        width: 20px !important;
        height: 180px;
    }
}
@media (max-width: 400px) {
    .sub_title h2 {
        font-size: var(--font-size-22);
    }
    .sub_title p {
        font-size: var(--font-size-12);
    }
    .series_drama > div {
        width: 22px;
        height: 22px; /* aspect-ratio 폴백 */
        border-radius: 2px !important;
    }
    .series_drama p {
        font-size: var(--font-size-6) !important;
        min-height: calc(var(--font-size-6) * 1.28 * 2) !important;
    }
    .series_count {
        font-size: var(--font-size-5) !important;
    }

    .series_grap {
        width: 16px !important;
        height: 150px;
    }
    .series_rank {
        font-size: var(--font-size-10) !important;
    }
}

@media (max-width: 360px) {
    .power_ranking_box,
    .best_couple_box,
    .best_popularity_box,
    .best_ost_box {
        padding: 24px;
    }
    .best_couple_info h3 {
        font-size: var(--font-size-10) !important;
    }
    .best_couple_actor img {
        width: 2.1rem;
        height: 2.1rem; /* aspect-ratio 폴백 */
    }
    .best_couple_actor div {
        font-size: var(--font-size-11) !important;
    }
    .basic_rank {
        font-size: var(--font-size-16) !important;
    }
    .chart_result_box li {
        gap: 8px;
    }
    .basic_percent {
        font-size: var(--font-size-12) !important;
    }
    .couple_grap {
        height: 26px !important;
    }
    .couple_grap div {
        padding-top: 0px;
    }
    ul li .basic_actor > div {
        width: 2.1rem !important;
        height: 2.1rem !important;
    }
    .basic_actor img {
        width: 2.1rem;
        height: 2.1rem; /* aspect-ratio 폴백 */
    }
    .basic_actor p {
        font-size: var(--font-size-11) !important;
    }
}