/* =========================================================
   HERO
========================================================= */

.hero {
    width: 100%;
    max-width: none;
    height: 450px;
    margin: 0;

    display: grid;
    grid-template-columns: 50% 50%;

    padding-left: max(24px, calc((100% - 1260px) / 2));
    padding-right: max(24px, calc((100% - 1260px) / 2));

    box-sizing: border-box;

    background: #08070b;
    color: #fff;

    overflow: hidden;
}

.hero-copy {
    width: 70%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 10px;
    padding-left: 10px;

    position: relative;
    z-index: 2;
}

.eyebrow {
    margin: 0 0 12px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #ff2d7d;
}

.hero h1 {
    margin: 0 0 24px;

    font-size: 48px;
    line-height: 1.12;
    letter-spacing: -3px;
}

.hero h1 strong {
    color: #ff3b87;
}

.hero-desc {
    font-size: 16px;
    line-height: 1.7;

    color: #d0ccd2;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.primary-btn,
.light-btn,
.dark-btn {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 24px;

    padding: 15px 24px;

    border-radius: 999px;

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

.primary-btn {
    margin-top: 15px;

    background: #ff2d7d;
    color: #fff;
}

.light-btn {
    margin-top: 10px;

    background: #fff;
    color: #111;
}

.dark-btn {
    background: #fff;
    color: #111;
}


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

.hero-model {
    width: 100%;
    height: 450px;

    min-height: 0;
    min-width: 0;

    position: relative;

    overflow: hidden;
}

.hero-model img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: cover;
    object-position: center top;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            #08070b 0%,
            transparent 35%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.75),
            transparent 45%
        );
}

.hero-model-info {
    position: absolute;

    left: 50px;
    bottom: 48px;

    display: flex;
    flex-direction: column;
}

.hero-model-info span {
    font-size: 38px;
    font-weight: 900;
}

.hero-model-info small {
    margin: 4px 0;

    font-size: 12px;
}

.hero-model-info strong {
    font-size: 15px;

    color: #ff76a8;
}

.hero-pager {
    position: absolute;

    right: 45px;
    bottom: 45px;

    display: flex;
    gap: 8px;
}

.hero-pager i {
    width: 5px;
    height: 5px;

    display: block;

    background: #aaa;

    border-radius: 50%;
}

.hero-pager .on {
    width: 22px;

    border-radius: 8px;

    background: #fff;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.section {
    max-width: 1260px;

    margin: 0 auto;
    padding: 70px 0;
}

.section-head {
    margin-bottom: 22px;

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

.section-head h2 {
    margin: 0;

    font-size: 22px;
    letter-spacing: -1px;
}

.section-head a {
    font-size: 12px;
    color: #777;
}


/* =========================================================
   TRENDING
========================================================= */

#trending {
    max-width: none;

    padding: 70px max(42px, calc((100% - 1260px) / 2));

    background: #fff7fa;
}

#trending.section-head,
.trending-section .model-grid {
    max-width: 1260px;

    margin-left: auto;
    margin-right: auto;
}


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

.model-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 13px;
}

.model-card {
    position: relative;

    overflow: hidden;

    border-radius: 10px;

    background: #000;
}

.model-card > img {
    display: block;

    width: 100%;
    height: 290px;

    object-fit: cover;
}

.model-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.78),
            transparent 55%
        );

    pointer-events: none;
}

.rank {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

    color: #fff;

    font-size: 13px;
    font-weight: 800;
}

.card-body {
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 10px;

    z-index: 2;

    color: #fff;
}

.card-body h3 {
    margin: 0;

    font-size: 18px;
}

.card-body p {
    margin: 4px 0 10px;

    color: #ff76a8;

    font-size: 12px;
}

.card-body button {
    width: 100%;

    padding: 8px;

    border-radius: 8px;

    background: #ff2d7d;
    color: #fff;

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


/* =========================================================
   RANKING
========================================================= */

.ranking-section {
    max-width: 1260px;

    margin: 0 auto;

    padding: 50px 0;
}

.ranking-grid {
    display: grid;

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

    gap: 60px;
}

.ranking-box {
    min-width: 0;
}

.ranking-list {
    height: 320px;

    overflow-y: auto;

    border-top: 1px solid #eee;

    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.ranking-list::-webkit-scrollbar {
    width: 4px;
}

.ranking-list::-webkit-scrollbar-track {
    background: transparent;
}

.ranking-list::-webkit-scrollbar-thumb {
    background: #ddd;

    border-radius: 10px;
}

.rank-row {
    height: 64px;

    display: grid;

    grid-template-columns:
        45px
        42px
        1fr
        130px
        55px;

    align-items: center;

    gap: 10px;

    border-bottom: 1px solid #eee;

    font-size: 13px;
}

.rank-row img {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    object-fit: cover;
}

.rank-row span {
    color: #ff2d7d;
}

.rank-row em {
    font-style: normal;

    color: #16a34a;

    font-size: 11px;
}

.rank-row .flat {
    color: #aaa;
}

.rank-row .down {
    color: #ef4444;
}

.rank-row .new {
    color: #ff2d7d;
}


/* =========================================================
   RISING / NEW
========================================================= */

.split-section {
    max-width: none;

    margin: 0 auto;

    padding: 50px max(42px, calc((100% - 1260px) / 2));

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 60px;

    background: #f7f7f8;
	padding-top:10px;
}

.split-section > * {
    max-width: 600px;
}

.compact {
    margin-bottom: 18px;
}

.subsection {
    margin-top: 35px;
}

.mini-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
}

.mini-grid article {
    position: relative;
}

.mini-grid img {
    display: block;

    width: 100%;
    height: 190px;

    object-fit: cover;

    border-radius: 9px;
}

.mini-grid b {
    display: block;

    margin-top: 8px;
}

.mini-grid span {
    position: absolute;

    right: 8px;
    bottom: 33px;

    padding: 4px 6px;

    border-radius: 5px;

    background: #111c;
    color: #fff;

    font-size: 10px;
}


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

.season {
    max-width: 1260px;

    margin: 50px auto 50px;

    padding: 50px 60px;

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

    border-radius: 14px;

    background: #111;
    color: #fff;
}

.season h2 {
    margin: 0 0 24px;

    font-size: 35px;
    line-height: 1.05;
    letter-spacing: -2px;
}

.trophy {
    font-size: 100px;

    opacity: 0.5;
}


/* =========================================================
   CREATOR
========================================================= */

.creator-banner {
    min-height: 320px;
    padding: 65px max(42px, calc((100% - 1260px) / 2));

    color: #fff;
    background-color: #000;
    background-image: url("/images/banner.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;

    position: relative;
}

/* 딤드 */
.creator-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* 콘텐츠는 딤드 위로 */
.creator-banner > div {
    position: relative;
    z-index: 1;
}

.creator-banner h2 {
    margin: 0 0 10px;

    font-size: 32px;
    letter-spacing: -1.5px;
}

.creator-banner p:not(.eyebrow) {
    color: #bbb;

    line-height: 1.7;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    min-height: 110px;

    padding: 35px 42px;

    display: flex;
    align-items: center;

    gap: 50px;

    border-top: 1px solid #eee;
}

footer nav {
    display: flex;

    gap: 20px;

    font-size: 11px;
    color: #777;
}

footer small {
    margin-left: auto;

    color: #aaa;
}


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

.mobile-nav {
    display: none;
}


/* =========================================================
   HAMBURGER
========================================================= */

.hamburger {
    display: none;

    width: 36px;
    height: 36px;

    padding: 0;
    margin-left: 4px;

    border: 0;
    background: none;

    font-size: 23px;
    line-height: 1;

    cursor: pointer;
}


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

@media (max-width: 900px) {

    /* HEADER */

    .site-header {
        height: 62px;

        padding: 0 20px;

        gap: 0;
    }

    main {
        min-height: 60vh;
    }

    .main-nav,
    .login {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .header-actions {
        gap: 10px;
    }


    /* HERO */

    .hero {
        position: relative;

        display: block;

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

        overflow: hidden;
    }

    .hero-model {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        min-height: 0;
    }

    .hero-model img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center top;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                0deg,
                rgba(0, 0, 0, .92) 0%,
                rgba(0, 0, 0, .55) 35%,
                rgba(0, 0, 0, 0) 70%
            );
    }

    .hero-copy {
        position: absolute;

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

        z-index: 3;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        width: 100%;
        min-height: 330px;

        padding: 35px 25px 30px;

        background:
            linear-gradient(
                0deg,
                rgba(8, 7, 11, .95) 0%,
                rgba(8, 7, 11, .75) 45%,
                rgba(8, 7, 11, 0) 100%
            );
    }

    .eyebrow {
        font-size: 9px;
    }

    .hero h1 {
        margin: 0 0 18px;

        font-size: 34px;
        line-height: 1.15;

        letter-spacing: -2px;
    }

    .hero-desc {
        font-size: 13px;
        line-height: 1.65;
    }

    .primary-btn {
        margin-top: 15px;

        align-self: flex-end;
    }

    .hero-model-info {
        position: absolute;

        left: 25px;
        bottom: 25px;

        z-index: 4;
    }

    .hero-model-info span {
        font-size: 28px;
    }

    .hero-pager {
        display: none;
    }


    /* SECTION */

    .section {
        padding: 45px 20px;
    }

    .section-head h2 {
        font-size: 18px;
    }


    /* TRENDING */

    #trending {
        padding: 20px;
    }


    /* MODEL GRID */

    .model-grid {
        display: flex;

        width: 100%;

        overflow-x: auto;

        gap: 10px;

        scroll-snap-type: x mandatory;

        padding-bottom: 5px;
    }

    .model-card {
        flex: 0 0 145px;
        min-width: 145px;

        scroll-snap-align: start;
    }

    .model-card > img {
        height: 205px;
    }

    .card-body {
        left: 9px;
        right: 9px;
        bottom: 8px;
    }

    .card-body h3 {
        font-size: 15px;
    }


    /* RANKING */

    .ranking-section {
        width: 100%;

        padding: 45px 20px;
    }

    .ranking-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 35px;

        width: 100%;
    }

    .ranking-box {
        width: 100%;
        min-width: 0;
    }

    .ranking-list {
        width: 100%;
        height: 290px;

        overflow-y: hidden;
    }

    .rank-row {
        width: 100%;
        height: 58px;

        grid-template-columns:
            30px
            38px
            minmax(0, 1fr)
            80px
            40px;

        gap: 10px;

        font-size: 12px;
    }

    .rank-row img {
        width: 34px;
        height: 34px;
    }


    /* RISING / NEW */

    .split-section {
        display: block;

        width: 100%;
        max-width: none;

        padding: 28px 20px 45px;
    }

    .split-section > .subsection {
        width: 100%;

        margin: 0 0 35px;
    }

    .split-section > .subsection:last-child {
        margin-bottom: 0;
    }


    /* MINI GRID */

    .mini-grid {
        display: flex;

        width: 100%;

        overflow-x: auto;

        gap: 10px;

        padding-bottom: 5px;
    }

    .mini-grid article {
        flex: 0 0 31%;
        min-width: 31%;
    }

    .mini-grid img {
        width: 100%;
        height: 150px;

        object-fit: cover;
    }


    /* SEASON */

    .season {
        margin: 0 20px 45px;

        padding: 30px 25px;
    }

    .season h2 {
        font-size: 26px;
    }

    .trophy {
        font-size: 60px;
    }


    /* CREATOR */

    .creator-banner {
        min-height: 320px;

        padding: 45px 25px;

        background-position: right bottom;

    }

    .creator-banner h2 {
        font-size: 25px;
    }


    /* FOOTER */

    footer {
        display: block;

        padding: 30px 20px 30px;
    }

    footer nav {
        margin: 20px 0;

        flex-wrap: wrap;
    }

    footer small {
        display: block;
    }


    /* MOBILE BOTTOM NAV */

    .mobile-nav {
        position: fixed;

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

        height: 66px;

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

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

        border-top: 1px solid #eee;

        z-index: 30;
    }

    .mobile-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 4px;

        font-size: 18px;
        color: #777;
    }

    .mobile-nav span {
        font-size: 9px;
    }

    .mobile-nav .active {
        color: #ff2d7d;
    }

    .mobile-nav .create {
        width: 44px;
        height: 44px;

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

        border-radius: 50%;

        background: #ff2d7d;
        color: #fff;

        font-size: 27px;
    }


    /* MOBILE MENU */

    .mobile-menu {
        display: block;

        position: fixed;
        inset: 0;

        z-index: 1000;

        visibility: hidden;
        pointer-events: none;
    }

    .mobile-menu.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-menu-dim {
        position: fixed;

        top: 0;
        left: 0;
        right: min(82vw, 360px);
        bottom: 0;
		width:100%;

        z-index: 1;

        background: rgba(0, 0, 0, .35);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .3s ease,
            visibility .3s ease;
    }

    .mobile-menu.is-open .mobile-menu-dim {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-header {
        height: 76px;

        padding: 0 24px;

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

        border-bottom: 1px solid #eee;
    }

    .mobile-menu-logo {
        display: block;

        font-size: 24px;
        font-weight: 900;
        letter-spacing: -1.5px;

        color: #111;
    }

    .mobile-menu-logo span {
        color: #ff2d78;
    }

    .mobile-menu-close {
        position: relative;

        width: 40px;
        height: 40px;

        padding: 0;

        border: 0;
        background: none;

        cursor: pointer;
    }

    .mobile-menu-close::before,
    .mobile-menu-close::after {
        content: "";

        position: absolute;

        left: 10px;
        top: 19px;

        width: 22px;
        height: 1.5px;

        background: #111;
    }

    .mobile-menu-close::before {
        transform: rotate(45deg);
    }

    .mobile-menu-close::after {
        transform: rotate(-45deg);
    }

    .mobile-menu-nav {
        padding: 20px 24px 0;
    }

    .mobile-menu-nav a {
        display: flex;
        align-items: center;

        height: 64px;

        border-bottom: 1px solid #eee;

        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.3px;

        color: #111;

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

    .mobile-menu-nav a:hover {
        color: #ff2d78;
        padding-left: 6px;
    }

    .mobile-menu-account {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

        padding: 28px 24px;
    }

    .mobile-menu-account a {
        height: 48px;

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

        border: 1px solid #ddd;

        background: #fff;
        color: #111;

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

    .mobile-menu-account a:last-child {
        border-color: #111;

        background: #111;
        color: #fff;
    }
}


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

@media (min-width: 901px) and (max-width: 1200px) {

    .hero h1 {
        font-size: 39px;
    }

    .model-card > img {
        height: 250px;
    }

    .section,
    .split-section {
        padding-left: 28px;
        padding-right: 28px;
    }

    .site-header {
        padding: 0 28px;
    }

	



}

.model-grid .model-card > a > img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
}


@media (min-width: 1200px) and (max-width: 1400px) {
	.ranking-section{
		max-width:1180px;
	}

}


.model-grid .model-card {
    overflow: hidden;
}

.model-grid .model-card > a {
    display: block;
}

.model-grid .model-card > a > img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

@media (max-width: 768px) {

    .model-grid .model-card > a > img {
        height: 240px;
    }

}

.hero-model > a {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    z-index: auto;

    transition:
        opacity .6s ease,
        visibility .6s ease;
}

.hero-model > a.active {
    opacity: 1;
    visibility: visible;

    z-index: auto;
}


@media (max-width: 900px) {

    .hero-pager {
        display: none !important;
    }

}


@media (min-width: 901px) {

    /* =====================================================
       PC HERO IMAGE
    ===================================================== */

    .hero-model > a > img {
        transform: scale(1.05);
        transform-origin: center center;

        transition: transform 1s ease;
    }


    /* =====================================================
       PC HERO DARK OVERLAY
    ===================================================== */

    .hero-model > a > .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 7, 11, .95) 0%,
                rgba(8, 7, 11, .75) 30%,
                rgba(8, 7, 11, .25) 55%,
                rgba(8, 7, 11, 0) 100%
            ),
            linear-gradient(
                0deg,
                rgba(8, 7, 11, .85) 0%,
                rgba(8, 7, 11, 0) 45%
            );
    }


    /* =====================================================
       ACTIVE SLIDE IMAGE
    ===================================================== */

    .hero-model > a.active > img {
        transform: scale(1.05);
    }

}