/* =========================================================
   VOTA
   Ranking
========================================================= */

.ranking-page {
    width: 100%;
    overflow-x: hidden;
	height:auto;
    background: #fff;
}

.ranking-inner {
    width: min(1260px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   Header
========================================================= */

.ranking-header {
    position: relative;

    padding-top: 60px;
    padding-bottom: 48px;
}

.ranking-eyebrow {
    display: block;

    margin-bottom: 17px;

    color: #ff2d86;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .22em;
    text-transform: uppercase;
}

.ranking-header h1 {
    margin: 0;

    color: #111;

    font-size: clamp(48px, 5vw, 72px);
    font-weight: 800;
    line-height: .95;

    letter-spacing: -.065em;
}

.ranking-header p {
    margin: 22px 0 0;

    color: #888;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   Header Decorative Text
   HTML 수정 없이 pseudo element 사용
========================================================= */

.ranking-header:after {
    content: "More\A Than Vote";

    position: absolute;

    right: 8px;
    bottom: 35px;

    white-space: pre;

    color: #ff8cc0;

    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 27px;
    font-weight: 400;
    line-height: .85;

    transform: rotate(-9deg);

    opacity: .8;

    pointer-events: none;
}


/* =========================================================
   Tabs
========================================================= */

.ranking-tabs {
    display: flex;
    align-items: center;

    width: 100%;
    height: 58px;

    margin-bottom: 54px;

    border-bottom: 1px solid #e5e5e5;
}

.ranking-tabs a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;

    height: 58px;

    color: #aaa;

    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;

    transition:
        color .2s ease,
        font-weight .2s ease;
}

.ranking-tabs a:hover {
    color: #222;
}

.ranking-tabs a.active {
    color: #ff2d7d;
    font-weight: 700;
}

.ranking-tabs a.active:after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    background: #ff2d7d;
}


/* =========================================================
   TOP 3
========================================================= */

.ranking-top3 {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.08fr)
        minmax(0, 1fr);

    align-items: end;

    gap: 22px;

    width: 100%;

    margin-bottom: 82px;
}


/* =========================================================
   TOP Card
========================================================= */

.ranking-top-card {
    position: relative;

    display: block;

    min-width: 0;

    color: #111;
    text-decoration: none;

    transition:
        transform .3s ease,
        filter .3s ease;
}

.ranking-top-card:hover {
    transform: translateY(-5px);
}


/* 실제 DOM 순서가 2 / 1 / 3이므로 */

.ranking-top-card-2 {
    grid-column: 1;
    grid-row: 1;

    margin-bottom: 24px;
}

.ranking-top-card-1 {
    grid-column: 2;
    grid-row: 1;

    z-index: 2;
}

.ranking-top-card-3 {
    grid-column: 3;
    grid-row: 1;

    margin-bottom: 24px;
}


/* =========================================================
   TOP Image
========================================================= */

.ranking-top-image {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: 15px;

    background: #eee;
}

.ranking-top-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.ranking-top-card:hover .ranking-top-image img {
    transform: scale(1.035);
}


/* 이미지 하단 그라데이션 */

.ranking-top-image:after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 52%;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.76),
            rgba(0,0,0,0)
        );

    pointer-events: none;
}


/* =========================================================
   1위
========================================================= */

.ranking-top-card-1 {
    margin-top: -8px;
}

.ranking-top-card-1 .ranking-top-image {
    aspect-ratio: 4 / 5.15;

    border-radius: 17px;

    border: 1px solid rgba(214,181,75,.55);

    box-shadow:
        0 24px 55px rgba(0,0,0,.13);
}


/* 1위 골드 빛 */

.ranking-top-card-1:before {
    content: "";

    position: absolute;

    top: -8px;
    right: 18%;
    left: 18%;

    height: 18px;

    border-radius: 50%;

    background: rgba(218,184,77,.22);

    filter: blur(15px);
}


/* =========================================================
   2위
========================================================= */

.ranking-top-card-2 .ranking-top-image {
    border: 1px solid rgba(180,185,195,.5);

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);
}


/* =========================================================
   3위
========================================================= */

.ranking-top-card-3 .ranking-top-image {
    border: 1px solid rgba(255,45,134,.25);

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);
}


/* =========================================================
   Rank
========================================================= */

/* =========================================================
   TOP 3 - BIG RANK NUMBER
========================================================= */

.ranking-top-rank {
    position: absolute;

    top: 18px;
    left: 20px;

    z-index: 8;

    pointer-events: none;
}

.ranking-top-rank span {
    display: block;

    font-family: Arial, sans-serif;

    font-size: 76px;
    font-weight: 900;
    line-height: .8;

    letter-spacing: -.08em;

    color: rgba(255,255,255,.92);

    text-shadow:
        0 3px 12px rgba(0,0,0,.28),
        0 1px 2px rgba(0,0,0,.5);
}


/* =========================================================
   1위 - GOLD
========================================================= */

.ranking-top-card-1 .ranking-top-rank {
    top: 22px;
    left: 24px;
}

.ranking-top-card-1 .ranking-top-rank span {

    font-size: 112px;

    background:
        linear-gradient(
            180deg,
            #fff8c9 0%,
            #f8df76 18%,
            #d5a92e 45%,
            #fff0a3 67%,
            #c58b18 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 4px 5px rgba(92,65,10,.35))
        drop-shadow(0 0 18px rgba(240,196,70,.28));
}


/* 금빛 하이라이트 */

.ranking-top-card-1 .ranking-top-rank:after {
    content: "";

    position: absolute;

    top: 2px;
    left: 5px;

    width: 42px;
    height: 10px;

    border-radius: 50%;

    background: rgba(255,255,255,.65);

    filter: blur(8px);

    opacity: .65;
}


/* =========================================================
   2위 - SILVER
========================================================= */

.ranking-top-card-2 .ranking-top-rank {
    top: 18px;
    left: 20px;
}

.ranking-top-card-2 .ranking-top-rank span {

    font-size: 82px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e9ebee 22%,
            #9da3aa 48%,
            #ffffff 68%,
            #858b92 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.32))
        drop-shadow(0 0 12px rgba(255,255,255,.18));
}


/* =========================================================
   3위 - BRONZE
========================================================= */

.ranking-top-card-3 .ranking-top-rank {
    top: 18px;
    left: 20px;
}

.ranking-top-card-3 .ranking-top-rank span {

    font-size: 60px;

    background:
        linear-gradient(
            180deg,
            #f8d6c1 0%,
            #d89472 22%,
            #a95e43 50%,
            #efb294 72%,
            #8e4d38 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.3))
        drop-shadow(0 0 12px rgba(206,128,94,.18));
}

/* =========================================================
   Crown / Badge
========================================================= */

.ranking-crown {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 6;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    color: #111;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 7px 20px rgba(0,0,0,.16);
}

.ranking-top-card-1 .ranking-crown {
    top: 22px;
    right: 22px;

    width: 46px;
    height: 46px;

    color: #c59a25;
}


/* =========================================================
   TOP Info
========================================================= */

.ranking-top-info {
    position: absolute;

    right: 22px;
    bottom: 21px;
    left: 22px;

    z-index: 7;

    min-width: 0;

    color: #fff;
}

.ranking-top-info strong {
    display: block;

    overflow: hidden;

    color: #fff;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -.04em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-top-info span {
    display: block;

    margin-top: 5px;

    overflow: hidden;

    color: rgba(255,255,255,.68);

    font-size: 10px;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-top-info em {
    display: block;

    margin-top: 9px;

    color: #fff;

    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}


/* 1위 */

.ranking-top-card-1 .ranking-top-info {
    right: 26px;
    bottom: 27px;
    left: 26px;
}

.ranking-top-card-1 .ranking-top-info strong {
    font-size: 27px;
}

.ranking-top-card-1 .ranking-top-info span {
    margin-top: 6px;

    font-size: 11px;
}

.ranking-top-card-1 .ranking-top-info em {
    margin-top: 12px;

    color: #ff3d8e;

    font-size: 16px;
}


/* =========================================================
   TOP 100 List
========================================================= */

.ranking-list {
    width: 100%;

    border-top: 1px solid #111;
	height:auto;
	overflow-x:hidden;
}

.ranking-row {
    display: grid;

    grid-template-columns:
        54px
        72px
        minmax(0, 1fr)
        auto
        55px
        20px;

    align-items: center;

    gap: 18px;

    width: 100%;
    min-width: 0;
    min-height: 104px;

    box-sizing: border-box;

    border-bottom: 1px solid #e9e9e9;

    color: #111;
    text-decoration: none;

    transition:
        background-color .2s ease,
        padding .2s ease;
}

.ranking-row:hover {
    background: #fafafa;
}


/* 순위 */

.ranking-number {
    color: #111;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .05em;
}


/* 썸네일 */

.ranking-thumb {
    width: 72px;
    height: 76px;

    overflow: hidden;

    border-radius: 10px;

    background: #eee;
}

.ranking-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.ranking-row:hover .ranking-thumb img {
    transform: scale(1.04);
}


/* 모델 정보 */

.ranking-model {
    min-width: 0;
    overflow: hidden;
}

.ranking-model strong {
    display: block;

    overflow: hidden;

    color: #111;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -.025em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-model span {
    display: block;

    margin-top: 5px;

    overflow: hidden;

    color: #999;

    font-size: 10px;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* 투표수 */

.ranking-votes {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;

    gap: 4px;

    min-width: 85px;

    white-space: nowrap;
}

.ranking-votes strong {
    color: #111;

    font-size: 14px;
    font-weight: 700;
}

.ranking-votes span {
    color: #aaa;

    font-size: 9px;
}


/* 순위 변화 */

.ranking-change {
    color: #aaa;

    font-size: 10px;
    font-weight: 600;

    text-align: center;
    white-space: nowrap;
}

.ranking-change.up {
    color: #ff3d8e;
}

.ranking-change.down {
    color: #5790d9;
}


/* 화살표 */

.ranking-arrow {
    color: #aaa;

    font-size: 16px;
    font-weight: 300;

    text-align: right;

    transition:
        color .2s ease,
        transform .2s ease;
}

.ranking-row:hover .ranking-arrow {
    color: #111;

    transform: translateX(3px);
}


/* =========================================================
   Empty
========================================================= */

.ranking-empty {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 280px;

    border-top: 1px solid #111;
    border-bottom: 1px solid #e5e5e5;
}

.ranking-empty p {
    margin: 0;

    color: #999;

    font-size: 13px;
}


/* =========================================================
   Bottom
========================================================= */

.ranking-more {
    padding: 25px 0 70px;

    color: #aaa;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .1em;

    text-align: right;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1024px) {

    .ranking-inner {
        width: min(100% - 48px, 900px);
    }

    .ranking-header {
        padding-top: 65px;
    }

    .ranking-header:after {
        right: 0;
    }

    .ranking-top3 {
        gap: 16px;
    }

    .ranking-top-card-2,
    .ranking-top-card-3 {
        margin-bottom: 17px;
    }

    .ranking-top-card-1 .ranking-top-info strong {
        font-size: 23px;
    }

    .ranking-row {
        grid-template-columns:
            42px
            62px
            minmax(0, 1fr)
            auto
            45px
            18px;

        gap: 13px;
    }

    .ranking-thumb {
        width: 62px;
        height: 68px;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .ranking-inner {
        width: calc(100% - 32px);
    }


    /* -----------------------------------------
       Header
    ----------------------------------------- */

    .ranking-header {
        padding-top: 48px;
        padding-bottom: 27px;
    }

    .ranking-eyebrow {
        margin-bottom: 12px;

        font-size: 8px;
        letter-spacing: .19em;
    }

    .ranking-header h1 {
        font-size: 43px;
        letter-spacing: -.07em;
    }

    .ranking-header p {
        margin-top: 13px;

        font-size: 11px;
        line-height: 1.55;
    }

    .ranking-header:after {
        right: 0;
        bottom: 20px;

        font-size: 18px;
    }


    /* -----------------------------------------
       Tabs
    ----------------------------------------- */

    .ranking-tabs {
        height: 42px;

        margin-bottom: 28px;
    }

    .ranking-tabs a {
        height: 42px;

        font-size: 10px;
    }

    .ranking-tabs a.active:after {
        height: 2px;
    }


    /* -----------------------------------------
       TOP 3
    ----------------------------------------- */

    .ranking-top3 {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;

        margin-bottom: 45px;
    }


    /* 1위 */

    .ranking-top-card-1 {
        grid-column: 1 / -1;
        grid-row: 1;

        margin: 0;

        order: 1;
    }

    .ranking-top-card-1 .ranking-top-image {
        aspect-ratio: 4 / 5;

        border-radius: 14px;
    }


    /* 2위 */

    .ranking-top-card-2 {
        grid-column: 1;
        grid-row: 2;

        margin: 0;

        order: 2;
    }

    .ranking-top-card-2 .ranking-top-image {
        aspect-ratio: 4 / 5;

        border-radius: 12px;
    }


    /* 3위 */

    .ranking-top-card-3 {
        grid-column: 2;
        grid-row: 2;

        margin: 0;

        order: 3;
    }

    .ranking-top-card-3 .ranking-top-image {
        aspect-ratio: 4 / 5;

        border-radius: 12px;
    }


    /* -----------------------------------------
       Rank
    ----------------------------------------- */

    .ranking-top-rank {
        top: 13px;
        left: 13px;
		 z-index: 10;
    }

    .ranking-top-rank span {
       font-size: 58px !important;
        line-height: .8;
    }

    .ranking-top-card-1 .ranking-top-rank {
        top: 17px;
        left: 17px;
    }

    .ranking-top-card-1 .ranking-top-rank span {
        font-size: 14px;
    }


    /* -----------------------------------------
       Badge
    ----------------------------------------- */

    .ranking-crown {
        top: 11px;
        right: 11px;

        width: 30px;
        height: 30px;

        font-size: 9px;
    }

    .ranking-top-card-1 .ranking-crown {
        top: 14px;
        right: 14px;

        width: 36px;
        height: 36px;
    }


    /* -----------------------------------------
       Info
    ----------------------------------------- */

    .ranking-top-info {
        right: 13px;
        bottom: 14px;
        left: 13px;
    }

    .ranking-top-info strong {
        font-size: 15px;
    }

    .ranking-top-info span {
        margin-top: 4px;

        font-size: 8px;
    }

    .ranking-top-info em {
        margin-top: 7px;

        font-size: 10px;
    }


    /* 1위 */

    .ranking-top-card-1 .ranking-top-info {
        right: 17px;
        bottom: 18px;
        left: 17px;
    }

    .ranking-top-card-1 .ranking-top-info strong {
        font-size: 22px;
    }

    .ranking-top-card-1 .ranking-top-info span {
        font-size: 9px;
    }

    .ranking-top-card-1 .ranking-top-info em {
        margin-top: 8px;

        font-size: 13px;
    }


    /* -----------------------------------------
       TOP 100
    ----------------------------------------- */

    .ranking-list {
        border-top-width: 1px;
    }

    .ranking-row {
        grid-template-columns:
            32px
            52px
            minmax(0, 1fr)
            auto
            17px;

        gap: 9px;

        min-height: 78px;
    }


    /* 순위 */

    .ranking-number {
        font-size: 10px;
    }


    /* 썸네일 */

    .ranking-thumb {
        width: 52px;
        height: 58px;

        border-radius: 8px;
    }


    /* 모델 */

    .ranking-model strong {
        font-size: 13px;
    }

    .ranking-model span {
        margin-top: 4px;

        font-size: 8px;
    }


    /* 투표 */

    .ranking-votes {
        min-width: 0;

        display: block;

        text-align: right;
    }

    .ranking-votes strong {
        display: block;

        font-size: 12px;
    }

    .ranking-votes span {
        display: block;

        margin-top: 2px;

        font-size: 8px;
    }




    /* 화살표 */

    .ranking-arrow {
        font-size: 13px;
    }


    /* -----------------------------------------
       Bottom
    ----------------------------------------- */

    .ranking-more {
        padding: 20px 0 45px;

        font-size: 8px;
    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 380px) {

    .ranking-inner {
        width: calc(100% - 24px);
    }

    .ranking-header {
        padding-top: 40px;
    }

    .ranking-header h1 {
        font-size: 39px;
    }

    .ranking-header p {
        font-size: 10px;
    }

    .ranking-header:after {
        font-size: 16px;
    }

    .ranking-tabs a {
        font-size: 9px;
    }

    .ranking-top3 {
        gap: 9px;
    }

    .ranking-top-info strong {
        font-size: 13px;
    }

    .ranking-top-card-1 .ranking-top-info strong {
        font-size: 20px;
    }

    .ranking-row {
        grid-template-columns:
            27px
            46px
            minmax(0, 1fr)
            auto
            15px;

        gap: 7px;
    }

    .ranking-thumb {
        width: 46px;
        height: 52px;
    }

    .ranking-model strong {
        font-size: 12px;
    }

}


/* =========================================================
   RANKING LIST
   4위 ~ TOP 100
========================================================= */

.ranking-list {
    width: 100%;

    margin-top: 0;

    border-top: 1px solid #111;
}


/* =========================================================
   ROW
========================================================= */

.ranking-row {
    display: grid;

    grid-template-columns:
        58px
        86px
        minmax(0, 1fr)
        130px
        65px
        24px;

    align-items: center;

    gap: 20px;

    width: 100%;
    min-width: 0;
    min-height: 126px;

    box-sizing: border-box;

    padding: 14px 0;

    border-bottom: 1px solid #e8e8e8;

    color: #111;
    text-decoration: none;

    transition:
        background-color .2s ease,
        padding-left .2s ease,
        padding-right .2s ease;
}

.ranking-row:hover {
    background: #fafafa;

    padding-left: 10px;
    padding-right: 10px;
}


/* =========================================================
   NUMBER
========================================================= */

.ranking-number {
    color: #111;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .04em;
}


/* =========================================================
   THUMBNAIL
========================================================= */

.ranking-thumb {
    width: 86px;
    height: 96px;

    overflow: hidden;

    border-radius: 11px;

    background: #eee;
}

.ranking-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.ranking-row:hover .ranking-thumb img {
    transform: scale(1.04);
}


/* =========================================================
   MODEL
========================================================= */

.ranking-model {
    min-width: 0;
    overflow: hidden;
}

.ranking-model strong {
    display: block;

    overflow: hidden;

    color: #111;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;

    letter-spacing: -.035em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-model span {
    display: block;

    margin-top: 7px;

    overflow: hidden;

    color: #999;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   VOTES
========================================================= */

.ranking-votes {
    display: flex;

    align-items: baseline;
    justify-content: flex-end;

    gap: 5px;

    min-width: 0;

    white-space: nowrap;
}

.ranking-votes strong {
    color: #111;

    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.ranking-votes span {
    color: #999;

    font-size: 10px;
    font-weight: 400;
}


/* =========================================================
   RANK CHANGE
========================================================= */

.ranking-change {
    color: #aaa;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    text-align: center;

    white-space: nowrap;
}

.ranking-change.up {
    color: #ff2d86;
}

.ranking-change.down {
    color: #5b91dc;
}


/* =========================================================
   ARROW
========================================================= */

.ranking-arrow {
    color: #aaa;

    font-size: 18px;
    font-weight: 300;
    line-height: 1;

    text-align: right;

    transition:
        color .2s ease,
        transform .2s ease;
}

.ranking-row:hover .ranking-arrow {
    color: #111;

    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .ranking-row {
        grid-template-columns:
            48px
            72px
            minmax(0, 1fr)
            105px
            55px
            20px;

        gap: 15px;

        min-height: 108px;

        padding: 12px 0;
    }

    .ranking-number {
        font-size: 13px;
    }

    .ranking-thumb {
        width: 72px;
        height: 80px;

        border-radius: 9px;
    }

    .ranking-model strong {
        font-size: 15px;
    }

    .ranking-model span {
        margin-top: 5px;

        font-size: 10px;
    }

    .ranking-votes strong {
        font-size: 15px;
    }

    .ranking-votes span {
        font-size: 9px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ranking-list {
        border-top: 1px solid #111;
    }


    .ranking-row {
        grid-template-columns:
            30px
            58px
            minmax(0, 1fr)
            auto
            17px;

        gap: 10px;

        min-height: 88px;

        padding: 10px 0;
    }


    /* 순위 */

    .ranking-number {
        font-size: 11px;
    }


    /* 썸네일 */

    .ranking-thumb {
        width: 58px;
        height: 66px;

        border-radius: 8px;
    }


    /* 모델 */

    .ranking-model strong {
        font-size: 14px;
        line-height: 1.25;
    }

    .ranking-model span {
        margin-top: 5px;

        font-size: 9px;
        line-height: 1.3;
    }


    /* 투표 */

    .ranking-votes {
        display: block;

        min-width: 45px;

        text-align: right;
    }

    .ranking-votes strong {
        display: block;

        font-size: 13px;
        line-height: 1;
    }

    .ranking-votes span {
        display: block;

        margin-top: 4px;

        font-size: 8px;
    }


    /* 변동 */

    .ranking-change {
        display: none;
    }


    /* 화살표 */

    .ranking-arrow {
        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .ranking-row {
        grid-template-columns:
            27px
            52px
            minmax(0, 1fr)
            auto
            15px;

        gap: 8px;

        min-height: 80px;
    }

    .ranking-thumb {
        width: 52px;
        height: 59px;
    }

    .ranking-model strong {
        font-size: 13px;
    }

    .ranking-model span {
        font-size: 8px;
    }

    .ranking-votes {
        min-width: 40px;
    }

    .ranking-votes strong {
        font-size: 12px;
    }

}

@media (max-width: 767px) {

    .ranking-row {
        grid-template-columns:
            30px
            58px
            minmax(0, 1fr)
            auto
            42px
            17px;

        gap: 8px;
    }


    /* 순위 */

    .ranking-number {
        font-size: 11px;
    }


    /* 썸네일 */

    .ranking-thumb {
        width: 58px;
        height: 66px;

        border-radius: 8px;
    }


    /* 모델 */

    .ranking-model strong {
        font-size: 14px;
        line-height: 1.25;
    }

    .ranking-model span {
        margin-top: 5px;

        font-size: 9px;
        line-height: 1.3;
    }


    /* 투표 */

    .ranking-votes {
        display: block;

        min-width: 45px;

        text-align: right;
    }

    .ranking-votes strong {
        display: block;

        font-size: 13px;
        line-height: 1;
    }

    .ranking-votes span {
        display: block;

        margin-top: 4px;

        font-size: 8px;
    }


    /* 순위 변동 */

    .ranking-change {
        display: block;

        min-width: 42px;

        color: #aaa;

        font-size: 9px;
        font-weight: 600;
        line-height: 1;

        text-align: center;

        white-space: nowrap;
    }

    .ranking-change.up {
        color: #ff2d86;
    }

    .ranking-change.down {
        color: #5b91dc;
    }


    /* 화살표 */

    .ranking-arrow {
        font-size: 14px;
    }

}


/* =========================================================
   CURRENT SEASON
========================================================= */

.ranking-season {

    position: relative;

    width: 100%;
    height: 330px;

    margin-bottom: 46px;

    overflow: hidden;

    border-radius: 18px;

    background: #111;

}


/* =========================================================
   IMAGE
========================================================= */

.ranking-season-image {

    position: absolute;

    inset: 0;

    overflow: hidden;
}

.ranking-season-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.ranking-season:hover
.ranking-season-image img {

    transform: scale(1.025);

}


/* =========================================================
   OVERLAY
========================================================= */

.ranking-season-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.58) 38%,
            rgba(0,0,0,.18) 72%,
            rgba(0,0,0,.08) 100%
        );

    pointer-events: none;
}


/* 아래쪽 살짝 어둡게 */

.ranking-season-overlay:after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 35%;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.28),
            rgba(0,0,0,0)
        );

}


/* =========================================================
   CONTENT
========================================================= */

.ranking-season-content {

    position: absolute;

    top: 50%;
    left: 46px;

    z-index: 3;

    width: min(520px, 55%);

    color: #fff;

    transform: translateY(-50%);
}


.ranking-season-eyebrow {

    display: block;

    margin-bottom: 14px;

    color: #ff4b95;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: .22em;

}


.ranking-season-content h2 {

    margin: 0;

    color: #fff;

    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;

    line-height: .95;

    letter-spacing: -.065em;

}


.ranking-season-content p {

    margin: 17px 0 0;

    max-width: 440px;

    color: rgba(255,255,255,.72);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.6;

}


.ranking-season-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 23px;

    color: rgba(255,255,255,.72);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .08em;
}


.ranking-season-meta i {

    display: block;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #ff3d8e;

}


/* =========================================================
   BADGE
========================================================= */

.ranking-season-badge {

    position: absolute;

    right: 30px;
    bottom: 27px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.75);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .16em;

    transform: rotate(-5deg);

}


.ranking-season-badge span {

    color: #ff3d8e;

    font-size: 11px;
    font-weight: 900;

}


.ranking-season-badge strong {

    color: rgba(255,255,255,.75);

    font-size: 9px;
    font-weight: 700;

}


/* =========================================================
   HOVER
========================================================= */

.ranking-season:after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 120px;
    height: 120px;

    border-top: 1px solid rgba(255,255,255,.16);
    border-right: 1px solid rgba(255,255,255,.16);

    border-radius: 0 18px 0 0;

    pointer-events: none;

}


@media (max-width: 767px) {

    /* -----------------------------------------
       CURRENT SEASON
    ----------------------------------------- */

    .ranking-season {

        height: 235px;

        margin-bottom: 30px;

        border-radius: 13px;

    }


    .ranking-season-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.78) 0%,
                rgba(0,0,0,.42) 100%
            );

    }


    .ranking-season-content {

        top: auto;
        right: 20px;
        bottom: 22px;
        left: 20px;

        width: auto;

        transform: none;

    }


    .ranking-season-eyebrow {

        margin-bottom: 9px;

        font-size: 7px;

        letter-spacing: .18em;

    }


    .ranking-season-content h2 {

        font-size: 32px;

        letter-spacing: -.055em;

    }


    .ranking-season-content p {

        margin-top: 9px;

        max-width: 85%;

        font-size: 9px;

        line-height: 1.45;

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

        overflow: hidden;

    }


    .ranking-season-meta {

        gap: 8px;

        margin-top: 12px;

        font-size: 8px;

    }


    .ranking-season-meta i {

        width: 2px;
        height: 2px;

    }


    .ranking-season-badge {

        top: 17px;
        right: 17px;
        bottom: auto;

        font-size: 7px;

    }


    .ranking-season-badge span {

        font-size: 9px;

    }


    .ranking-season-badge strong {

        font-size: 7px;

    }

}



/* =========================================================
   RANKING
   Season / Section / List Enhancement
========================================================= */


/* =========================================================
   CURRENT SEASON
========================================================= */

.ranking-season {

    position: relative;

    width: 100%;
    height: 330px;

    margin-bottom: 46px;

    overflow: hidden;

    border-radius: 18px;

    background: #111;
}


.ranking-season-image {

    position: absolute;

    inset: 0;

    overflow: hidden;
}


.ranking-season-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.ranking-season:hover
.ranking-season-image img {

    transform: scale(1.025);

}


/* =========================================================
   SEASON OVERLAY
========================================================= */

.ranking-season-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.62) 35%,
            rgba(0,0,0,.22) 70%,
            rgba(0,0,0,.05) 100%
        );

    pointer-events: none;
}


.ranking-season-overlay:after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 35%;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.28),
            rgba(0,0,0,0)
        );
}


/* =========================================================
   SEASON CONTENT
========================================================= */

.ranking-season-content {

    position: absolute;

    top: 50%;
    left: 46px;

    z-index: 3;

    width: min(520px, 55%);

    color: #fff;

    transform: translateY(-50%);
}


.ranking-season-eyebrow {

    display: block;

    margin-bottom: 14px;

    color: #ff3d8e;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: .22em;

}


.ranking-season-content h2 {

    margin: 0;

    color: #fff;

    font-size: clamp(36px, 4vw, 58px);
    font-weight: 800;

    line-height: .95;

    letter-spacing: -.065em;
}


.ranking-season-content p {

    margin: 17px 0 0;

    max-width: 450px;

    color: rgba(255,255,255,.72);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.6;
}


.ranking-season-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 23px;

    color: rgba(255,255,255,.7);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .08em;
}


.ranking-season-meta i {

    display: block;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #ff3d8e;
}


/* =========================================================
   SEASON BADGE
========================================================= */

.ranking-season-badge {

    position: absolute;

    right: 30px;
    bottom: 27px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.75);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .16em;

    transform: rotate(-5deg);
}


.ranking-season-badge span {

    color: #ff3d8e;

    font-size: 11px;
    font-weight: 900;
}


.ranking-season-badge strong {

    color: rgba(255,255,255,.75);

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.ranking-section-heading {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 22px;
}


.ranking-section-heading > div:first-child {

    min-width: 0;

}


.ranking-section-heading span {

    display: block;

    margin-bottom: 9px;

    color: #ff2d86;

    font-size: 9px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: .2em;
}


.ranking-section-heading h2 {

    margin: 0;

    color: #111;

    font-size: 25px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -.055em;
}


/* =========================================================
   TOTAL MODELS
========================================================= */

.ranking-total {

    padding-bottom: 2px;

    color: #aaa;

    font-size: 9px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: .12em;
}


/* =========================================================
   FEATURED
========================================================= */

.ranking-featured {

    margin-bottom: 72px;
}


/*
 * TOP 3 자체는 기존 디자인 유지
 * 섹션 타이틀만 추가
 */

.ranking-featured .ranking-top3 {

    margin-top: 0;
}


/* =========================================================
   ALL RANKINGS
========================================================= */

.ranking-all {

    margin-top: 0;

    padding-bottom: 60px;
}


/* =========================================================
   LIST
========================================================= */

.ranking-all .ranking-list {

    margin-top: 0;

    border-top: 1px solid #111;
}


/* =========================================================
   ROW
========================================================= */

.ranking-all .ranking-row {

    min-height: 116px;

    padding: 10px 0;

    transition:
        background-color .25s ease,
        padding-left .25s ease,
        padding-right .25s ease;
}


.ranking-all .ranking-row:hover {

    background: #fafafa;

    padding-left: 12px;
    padding-right: 12px;
}


/* =========================================================
   MODEL
========================================================= */

.ranking-all .ranking-model small {

    display: block;

    margin-top: 8px;

    color: #bbb;

    font-size: 8px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .12em;
}


/* 국가 구분점 */

.ranking-all .ranking-model span i {

    display: inline-block;

    margin: 0 3px;

    color: #ccc;

    font-style: normal;
}


/* =========================================================
   RANK NUMBER
========================================================= */

.ranking-all .ranking-number {

    font-size: 14px;

    letter-spacing: .06em;
}


/* =========================================================
   THUMB
========================================================= */

.ranking-all .ranking-thumb {

    width: 82px;
    height: 92px;

    border-radius: 10px;
}


/* =========================================================
   VOTES
========================================================= */

.ranking-all .ranking-votes {

    min-width: 100px;
}


.ranking-all .ranking-votes strong {

    font-size: 30px;
}


.ranking-all .ranking-votes span {

    font-size: 9px;
}


/* =========================================================
   RANK CHANGE
========================================================= */

.ranking-all .ranking-change {

    min-width: 45px;

    font-size: 10px;
}


.ranking-all .ranking-change .change-icon {

    margin-right: 2px;

    font-size: 8px;
}


.ranking-all .ranking-change.up {

    color: #ff2d86;
}


.ranking-all .ranking-change.down {

    color: #5790d9;
}


.ranking-all .ranking-change .change-stay {

    color: #bbb;

    font-size: 10px;
}


/* =========================================================
   ARROW
========================================================= */

.ranking-all .ranking-arrow {

    width: 24px;

    color: #bbb;

    font-size: 17px;
}


/* =========================================================
   TOP 3 + ALL RANKINGS SPACING
========================================================= */

.ranking-featured + .ranking-all {

    margin-top: 0;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1200px) {

    .ranking-season {

        height: 360px;

    }


    .ranking-season-content {

        left: 58px;

    }


    .ranking-all .ranking-row {

        min-height: 120px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .ranking-season {

        height: 300px;

        border-radius: 14px;

    }


    .ranking-season-content {

        left: 35px;

        width: 55%;

    }


    .ranking-season-content h2 {

        font-size: 42px;

    }


    .ranking-season-content p {

        font-size: 11px;

    }


    .ranking-all .ranking-row {

        min-height: 106px;

    }


    .ranking-all .ranking-thumb {

        width: 68px;
        height: 76px;

    }


    .ranking-all .ranking-model small {

        margin-top: 6px;

        font-size: 7px;

    }


    .ranking-section-heading {

        margin-bottom: 18px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ranking-season {

        height: 235px;

        margin-bottom: 32px;

        border-radius: 12px;

    }


    .ranking-season-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.8) 0%,
                rgba(0,0,0,.48) 100%
            );

    }


    .ranking-season-content {

        top: auto;
        right: 20px;
        bottom: 21px;
        left: 20px;

        width: auto;

        transform: none;

    }


    .ranking-season-eyebrow {

        margin-bottom: 9px;

        font-size: 7px;

        letter-spacing: .18em;

    }


    .ranking-season-content h2 {

        font-size: 31px;

        letter-spacing: -.055em;

    }


    .ranking-season-content p {

        margin-top: 9px;

        max-width: 85%;

        font-size: 9px;

        line-height: 1.45;

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

        overflow: hidden;

    }


    .ranking-season-meta {

        gap: 8px;

        margin-top: 11px;

        font-size: 8px;

    }


    .ranking-season-meta i {

        width: 2px;
        height: 2px;

    }


    .ranking-season-badge {

        top: 17px;
        right: 17px;
        bottom: auto;

        font-size: 7px;

    }


    .ranking-season-badge span {

        font-size: 9px;

    }


    .ranking-season-badge strong {

        font-size: 7px;

    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .ranking-section-heading {

        margin-bottom: 15px;

    }


    .ranking-section-heading span {

        margin-bottom: 7px;

        font-size: 7px;

    }


    .ranking-section-heading h2 {

        font-size: 20px;

    }


    .ranking-total {

        padding-bottom: 1px;

        font-size: 7px;

    }


    .ranking-featured {

        margin-bottom: 45px;

    }


    /* -----------------------------------------
       ALL RANKINGS
    ----------------------------------------- */

    .ranking-all {

        padding-bottom: 40px;

    }


    .ranking-all .ranking-list {

        border-top-width: 1px;

    }


    .ranking-all .ranking-row {

        grid-template-columns:
            32px
            52px
            minmax(0, 1fr)
            auto
            17px;

        gap: 9px;

        min-height: 82px;

        padding: 10px 0;

    }


    .ranking-all .ranking-row:hover {

        padding-left: 5px;
        padding-right: 5px;

    }


    .ranking-all .ranking-number {

        font-size: 10px;

    }


    .ranking-all .ranking-thumb {

        width: 52px;
        height: 58px;

        border-radius: 8px;

    }


    .ranking-all .ranking-model strong {

        font-size: 13px;

    }


    .ranking-all .ranking-model span {

        margin-top: 4px;

        font-size: 8px;

    }


    .ranking-all .ranking-model small {

        margin-top: 5px;

        font-size: 6px;

    }


    .ranking-all .ranking-votes {

        min-width: 0;

        display: block;

        text-align: right;

    }


    .ranking-all .ranking-votes strong {

        font-size: 12px;

    }


    .ranking-all .ranking-votes span {

        display: block;

        margin-top: 2px;

        font-size: 8px;

    }




    .ranking-all .ranking-arrow {

        font-size: 13px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .ranking-season {

        height: 220px;

    }


    .ranking-season-content {

        right: 16px;
        bottom: 17px;
        left: 16px;

    }


    .ranking-season-content h2 {

        font-size: 28px;

    }


    .ranking-season-content p {

        font-size: 8px;

    }


    .ranking-section-heading h2 {

        font-size: 18px;

    }


    .ranking-all .ranking-row {

        grid-template-columns:
            27px
            46px
            minmax(0, 1fr)
            auto
            15px;

        gap: 7px;

    }


    .ranking-all .ranking-thumb {

        width: 46px;
        height: 52px;

    }


    .ranking-all .ranking-model strong {

        font-size: 12px;

    }

}

@media (max-width: 767px) {

    .ranking-all .ranking-row {

        grid-template-columns:
            32px
            52px
            minmax(0, 1fr)
            auto
            36px
            17px;

        gap: 8px;

    }


    /* 순위 증감 다시 표시 */

    .ranking-all .ranking-change {

        display: flex;

        align-items: center;
        justify-content: flex-end;

        min-width: 36px;

        font-size: 9px;
        font-weight: 700;

        white-space: nowrap;

    }


    .ranking-all .ranking-change .change-icon {

        margin-right: 2px;

        font-size: 7px;

    }


    .ranking-all .ranking-change.up {

        color: #ff2d86;

    }


    .ranking-all .ranking-change.down {

        color: #5790d9;

    }


    .ranking-all .ranking-change .change-stay {

        color: #bbb;

        font-size: 9px;

    }

}