/* ============================================================
   renew/membership.css — 멤버십 페이지 전용 (.mo-renew .mo-mbs 스코프)
   실측: Figma PC 6400:1055 (1920×5040) / MO 6400:3170 (390×4328)
   토큰: tokens.css(.mo-renew --mo-*). 압구정 전용 정적 페이지.
   ⚠️ 클래스/구조는 디자이너 팩(membership.html)과 공유 — 변경 시 동기화.
   ============================================================ */

/* body(.mo-renew) UA 기본 마진 제거 (price.css 와 동일 이유: calc(100%-40) 클립 방지) */
.mo-renew {
    margin: 0;
    background: var(--mo-bg-2);
}

/* 페이지 셸: 1920 캡·센터 */
.mo-renew .mo-mbs {
    max-width: var(--mo-base-w);
    margin: 0 auto;
    background: var(--mo-bg-2);
    overflow-x: clip;
}

/* PC/MO 카피 토글 */
.mo-renew .mo-mbs .mo-mo-only {
    display: none;
}

/* ============================================================
   ① HERO — 풀블리드 비주얼(1850×850 r120) + 하단 eyebrow CTA + 예약 버튼
   Figma: 히어로 y123 x35 1850x850 r120 bg#efefef / 사진 881x850 중앙
   ============================================================ */
.mo-renew .mo-mbs__hero-wrap {
    /* 고정 GNB(top15+58) 아래로 히어로 진입(Figma 히어로 top y123) */
    padding-top: 123px;
}

.mo-renew .mo-mbs__hero {
    position: relative;
    width: var(--mo-fullbleed-w);
    max-width: calc(100% - 40px);
    height: 850px;
    margin: 0 auto;
    border-radius: var(--mo-r-lg);
    /* PC 120 */
    background: #efefef;
    overflow: hidden;
}

/* 사진: PC 는 중앙 정렬(881 폭), 높이 꽉 채움 */
.mo-renew .mo-mbs__hero-img {
    display: block;
    height: 100%;
    width: auto;
    margin: 0 auto;
    object-fit: cover;
}

/* 하단 고정 CTA — body 레벨 분리, fixed(스크롤 무관 뷰포트 하단 고정).
   main 의 .mo-mhero__cta(wrapper) + .mo-mhero__cta-bar(바) 동형. 모달/플로팅과 공존.
   래퍼: 중앙 정렬 컨테이너 / 바: 좌 텍스트 + 우 레드 예약버튼(프로스트) */
.mo-renew .mo-mbs__cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 40px;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.mo-renew .mo-mbs__cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 800px;
    max-width: 100%;
    height: 68px;
    padding: 0 30px;
    border-radius: var(--mo-r-xs);
    /* 20 */
    background-color: rgba(229, 229, 229, 0.15);
    /* 반투명 배경 (필수) */

    backdrop-filter: blur(20px);
    /* 블러 20px */
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid #f5f5f5;
    /* #e5e5e5 */
    cursor: pointer;
}

/* body 레벨 지속 CTA 바가 푸터를 가리지 않도록 페이지 하단 여백 확보(main 선례 동형) */
body.mo-renew {
    padding-bottom: 180px;
}

.mo-renew .mo-mbs__cta-text {
    font-size: 16px;
    line-height: 1;
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-renew .mo-mbs__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    border-radius: 999px;
    background: var(--mo-red);
    font-size: 16px;
    line-height: 1;
    font-weight: var(--mo-w-medium);
    color: var(--mo-white);
    text-decoration: none;
}

/* ============================================================
   ② INTRO — 타이틀 + 안내문(중앙 정렬)
   Figma: 타이틀 fs30 y1023 / 안내 fs17 y1083
   ============================================================ */
.mo-renew .mo-mbs__head {
    text-align: center;
}

.mo-renew .mo-mbs__title {
    margin: 0;
    font-size: 30px;
    line-height: 1.5;
    font-weight: var(--mo-w-regular);
    color: var(--mo-ink);
}

.mo-renew .mo-mbs__desc {
    margin: 15px 0 0;
    font-size: var(--mo-fs-body);
    /* 17 */
    line-height: 1.824;
    color: var(--mo-ink);
}

/* ============================================================
   ③ TIERS — 5등급 카드(960×430 r50). PC: 좌측 텍스트 + 우측 워터마크
   Figma 카드: x480 960x430 r50, gap 50, 텍스트 left x560(=480+80)
   ============================================================ */
.mo-renew .mo-mbs__tiers {
    width: var(--mo-content-w);
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.mo-renew .mo-mbs__card {
    position: relative;
    height: 430px;
    border-radius: var(--mo-r-md);
    /* 50 */
    overflow: hidden;
}

/* 카드 내부: 상단 헤드 / 하단 본문(space-between → 본문 하단 정렬) */
.mo-renew .mo-mbs__card-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 50px 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mo-renew .mo-mbs__card-head {
    /* 헤드(등급+이름) */
}

.mo-renew .mo-mbs__grade {
    margin: 0 0 9px;
    font-size: var(--mo-fs-h3);
    /* 20 */
    line-height: 1;
    font-weight: var(--mo-w-regular);
}

.mo-renew .mo-mbs__name {
    margin: 0;
    font-size: var(--mo-fs-h3);
    /* 20 */
    line-height: 1;
    font-weight: var(--mo-w-regular);
}

.mo-renew .mo-mbs__lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mo-renew .mo-mbs__line {
    font-size: var(--mo-fs-body);
    /* 17 */
    line-height: 31px;
    font-weight: var(--mo-w-regular);
}

/* 워터마크 대형 숫자: 우측 하단 정렬, 카드별 불투명도(인라인) */
.mo-renew .mo-mbs__wm {
    position: absolute;
    right: 110px;
    bottom: 30px;
    z-index: 0;
    font-size: 250px;
    line-height: 1;
    font-weight: var(--mo-w-regular);
    color: #d6d5d1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -25%;
}

.mo-renew .mo-mbs__card--members_500 .mo-mbs__wm span:nth-child(1) {
    color: #E0E0E0;
}

.mo-renew .mo-mbs__card--members_500 .mo-mbs__wm span:nth-child(2) {
    color: #F2F2F2;
}

.mo-renew .mo-mbs__card--members_500 .mo-mbs__wm span:nth-child(3) {
    color: #ECECEC;
}

.mo-renew .mo-mbs__card--members_700 .mo-mbs__wm span:nth-child(1) {
    color: #FFFFFF;
}

.mo-renew .mo-mbs__card--members_700 .mo-mbs__wm span:nth-child(2) {
    color: #F2F2F2;
}

.mo-renew .mo-mbs__card--members_700 .mo-mbs__wm span:nth-child(3) {
    color: #F8F8F8;
}

.mo-renew .mo-mbs__card--members_1000 .mo-mbs__wm span:nth-child(1) {
    color: #FDF1E1;
}

.mo-renew .mo-mbs__card--members_1000 .mo-mbs__wm span:nth-child(2) {
    color: #CFC7BD;
}

.mo-renew .mo-mbs__card--members_1000 .mo-mbs__wm span:nth-child(3) {
    color: #E3DACF;
}

.mo-renew .mo-mbs__card--members_1000 .mo-mbs__wm span:nth-child(4) {
    color: #CAC5BD;
}

.mo-renew .mo-mbs__card--members_1500 .mo-mbs__wm span:nth-child(1) {
    color: #55514C;
}

.mo-renew .mo-mbs__card--members_1500 .mo-mbs__wm span:nth-child(2) {
    color: #C9C8C6;
}

.mo-renew .mo-mbs__card--members_1500 .mo-mbs__wm span:nth-child(3) {
    color: #A59E95;
}

.mo-renew .mo-mbs__card--members_1500 .mo-mbs__wm span:nth-child(4) {
    color: #8B8782;
}


.mo-renew .mo-mbs__card--members_2000 .mo-mbs__wm span:nth-child(1) {
    color: #A1A1A1;
}

.mo-renew .mo-mbs__card--members_2000 .mo-mbs__wm span:nth-child(2) {
    color: #F3F3F3;
}

.mo-renew .mo-mbs__card--members_2000 .mo-mbs__wm span:nth-child(3) {
    color: #888888;
}

.mo-renew .mo-mbs__card--members_2000 .mo-mbs__wm span:nth-child(4) {
    color: #595753;
}

/* ============================================================
   ④ NOTES — 유의 사항(콘텐츠 좌측, fs15)
   Figma: y3915 x480 fs15 #323232
   ============================================================ */
.mo-renew .mo-mbs__notes {
    width: var(--mo-content-w);
    max-width: calc(100% - 40px);
    margin: 0 auto;
    color: var(--mo-ink);
}

.mo-renew .mo-mbs__notes-title {
    margin: 0 0 8px;
    font-size: var(--mo-fs-point);
    /* 15 */
    line-height: 29px;
    font-weight: var(--mo-w-regular);
}

.mo-renew .mo-mbs__notes-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mo-renew .mo-mbs__notes-item {
    position: relative;
    padding-left: 12px;
    font-size: var(--mo-fs-point);
    /* 15 */
    line-height: 29px;
    font-weight: var(--mo-w-regular);
}

.mo-renew .mo-mbs__notes-item::before {
    content: "·";
    position: absolute;
    left: 2px;
}

.display_pc_only {}

.display_tablet_only {
    display: none;
}

/* ============================================================
   모바일 (≤768, 390 디자인 기준)
   Figma: 히어로 y99 350x460 r50 / 타이틀 fs20 y589 / 첫 카드 y843 350x430 gap30
   MO 카드: 중앙 정렬(텍스트+워터마크 모두 center), 본문 상단 정렬
   ============================================================ */
@media (max-width: 768px) {

    .display_pc_only {
        display: none;
    }

    .display_tablet_only {
        display: block;
    }

    .mo-renew .mo-mbs .mo-pc-only {
        display: none;
    }

    .mo-renew .mo-mbs img.mo-mo-only {
        display: block;
    }

    /* 히어로 350×460 r50, 사진 꽉 채움 */
    .mo-renew .mo-mbs__hero-wrap {
        padding-top: 99px;
    }

    .mo-renew .mo-mbs__hero {
        width: var(--mo-content-w);
        /* 350 */
        height: 460px;
        border-radius: var(--mo-r-lg);
        /* MO 50 */
    }

    .mo-renew .mo-mbs__hero-img {
        width: 100%;
        height: 100%;
    }

    /* 하단 고정 CTA: 풀폭 프로스트 바(main MO 동형). 바 프로스트는 PC 룰 유지, 폭/높이만 재정의 */
    .mo-renew .mo-mbs__cta {
        padding: 0 15px 12px;
        bottom: 0;
    }

    .mo-renew .mo-mbs__cta-bar {
        width: 100%;
        height: 55px;
        padding: 0 20px;
    }

    /* 풀폭 고정 바(bottom:0, h55)와 겹치지 않게 네이버·카카오 플로팅을 바 위로 */
    .mo-renew .mo-float {
        bottom: 79px;
    }

    /* MO 바가 낮아(55) 페이지 하단 여백도 그만큼만 */
    body.mo-renew {
        padding-bottom: 80px;
    }

    .mo-renew .mo-mbs__cta-text {
        font-size: var(--mo-fs-point);
        /* 15 */
    }

    .mo-renew .mo-mbs__cta-btn {
        width: 78px;
        height: 29px;
        font-size: var(--mo-fs-point);
        /* 15 */
    }

    /* 타이틀 fs20(=h3) / 안내 fs15 */
    .mo-renew .mo-mbs__title {
        font-size: var(--mo-fs-h3);
        /* 20 */
    }

    .mo-renew .mo-mbs__desc {
        margin-top: 10px;
        font-size: var(--mo-fs-point);
        /* 15 */
        line-height: 29px;
    }

    /* 카드 350×430 gap30, 중앙 정렬 */
    .mo-renew .mo-mbs__tiers {
        width: var(--mo-content-w);
        /* 350 */
        gap: 30px;
    }

    .mo-renew .mo-mbs__card {
        border-radius: var(--mo-r-lg);
        /* MO 50 */
    }

    /* 본문 상단 정렬 + 가운데 정렬 */
    .mo-renew .mo-mbs__card-inner {
        padding: 40px 25px;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }

    .mo-renew .mo-mbs__card-head {
        margin-bottom: 24px;
    }

    .mo-renew .mo-mbs__grade {
        margin-bottom: 8px;
    }

    .mo-renew .mo-mbs__lines {
        font-size: var(--mo-fs-point);
        /* 기본 15 */
    }

    .mo-renew .mo-mbs__line {
        font-size: var(--mo-fs-point);
        /* 15 */
        line-height: 29px;
    }

    /* Figma 실측: 500 카드만 본문 fs17(나머지 fs15) */
    .mo-renew .mo-mbs__card--members_500 .mo-mbs__line {
        font-size: var(--mo-fs-body);
        /* 17 */
        line-height: 31px;
    }

    /* 워터마크: 중앙 정렬, 하단, fs160 */
    .mo-renew .mo-mbs__wm {
        left: 42%;
        transform: translateX(-50%);
        right: 0;
        bottom: 35px;
        text-align: center;
        font-size: 160px;
    }

    /* 유의사항 콘텐츠 좌측 15 인셋 */
    .mo-renew .mo-mbs__notes {
        padding: 0 15px;
    }
}