/* ============================================================
   renew/widgets.css — 리뉴얼 위젯 스타일 (모두 .mo-renew 하위 스코프)
   참고: 20260617_new/dev_ready/08_widget_gap.md
   ============================================================ */

/* ---------------- FAQ 아코디언 (Figma: 흰 카드 r35 + Qestion 칩 + 쉐브론) ---------------- */
.mo-renew .mo-faq {
    width: 100%;
}

.mo-renew .mo-faq__title {
    margin: 0 0 60px;
    color: var(--mo-ink);
    line-height: var(--mo-lh-48);
    padding: 0 40px;
}

/* 항목 = 흰색 라운드 카드 (배경 #fafafa 위) */
.mo-renew .mo-faq__item {
    margin-bottom: 20px;
    background: var(--mo-white);
    border-radius: var(--mo-r-sm);
    overflow: hidden;
}

.mo-renew .mo-faq__item:last-child {
    margin-bottom: 0;
}

.mo-renew .mo-faq__q {
    width: 100%;
    display: block;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 30px 35px;
    font-family: var(--mo-font);
    letter-spacing: var(--mo-tracking);
}

/* Qestion N. 칩 (회색 라운드, Figma 표기 그대로 'Qestion') */
.mo-renew .mo-faq__q-label {
    display: inline-block;
    margin-bottom: 15px;
    padding: 5px 13px;
    background: var(--mo-bg);
    border-radius: var(--mo-r-ui);
    font-family: var(--mo-font-en);
    font-size: var(--mo-fs-caption);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-renew .mo-faq__q-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mo-renew .mo-faq__q-text {
    font-size: var(--mo-fs-h3);
    line-height: var(--mo-lh-31);
    font-weight: var(--mo-w-regular);
    color: var(--mo-ink);
}

/* 쉐브론(닫힘=아래 ⌄, 열림=위 ⌃) */
.mo-renew .mo-faq__q-icon {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--mo-fade-ease);
}

.mo-renew .mo-faq__q-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid var(--mo-ink);
    border-bottom: 1.5px solid var(--mo-ink);
    transform: translate(-50%, -50%) rotate(45deg);
}

.mo-renew .mo-faq__item.open .mo-faq__q-icon {
    transform: rotate(180deg);
}

.mo-renew .mo-faq__a {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s var(--mo-fade-ease);
}

.mo-renew .mo-faq__item.open .mo-faq__a {
    max-height: 1200px;
}

.mo-renew .mo-faq__a-inner {
    padding: 5px 35px 40px;
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-29);
    color: var(--mo-ink);
}

/* ---------------- CTA 상담 모달 (cta_modal, Figma 6400:742 / 6400:4786) ----------------
   구조 ID/클래스는 wvppost.js 와 동일(폼 전송 재사용). 표현만 renew. */
/* z-index: GNB(1000~1200)·푸터/플로팅(1100) 보다 위 → 배경 블러가 헤더/플로팅까지 덮음 */
.mo-renew .mo-cta-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2001;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mo-renew .mo-cta-modal.open {
    display: flex;
}

/* 배경: 페이지 전체(헤더·플로팅 포함)를 강하게 블러 (디자이너: 배경 블러 심하게) */
.mo-renew .mo-cta-modal__bg {
    display: none;
    position: fixed;
    inset: 0;
    margin: 0;
    z-index: 2000;
    background: rgba(250, 250, 250, 0.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* 패널: 540×651 r50 흰색 90% (Figma og_pop_01). 내부 콘텐츠는 290 폭 센터 컬럼(.mo-cta-modal__form). */
.mo-renew .mo-cta-modal__panel {
    position: relative;
    width: 540px;
    max-width: 100%;
    padding: 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.mo-renew .mo-cta-modal__form {
    width: 290px;
    max-width: calc(100% - 60px);
    margin: 0 auto;
    padding: 80px 0 70px;
}

/* 닫기: 48×30 pill #f5f5f5 + 1px 보더 (Figma Group 696, r36 회전90→가로형), 우상단 인셋 40 */
.mo-renew .mo-cta-modal__close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 48px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 36px;
    background: var(--mo-bg);
    color: var(--mo-ink);
    cursor: pointer;
    border: 0;
}

.mo-renew .mo-cta-modal__close svg {
    width: 19px;
    height: 19px;
}

.mo-renew .mo-cta-modal__head {
    text-align: center;
    margin-bottom: 70px;
}

/* 타이틀: fs20 w500 #ff1f00 (Figma) */
.mo-renew .mo-cta-modal__title {
    margin: 0 0 10px;
    font-size: var(--mo-fs-h3);
    line-height: 1.55;
    font-weight: var(--mo-w-medium);
    color: #ff1f00;
}

.mo-renew .mo-cta-modal__lead {
    margin: 0;
    font-size: var(--mo-fs-body);
    line-height: 1.824;
    color: var(--mo-ink);
}

/* 지점 셀렉트 — 이 프레임(압구정 단일지점)은 미노출. DOM 은 유지(wvppost 지점 훅). */
.mo-renew .mo-cta-modal__branch {
    display: none;
    flex-direction: column;
    align-items: center;
}

.mo-renew .mo-cta-modal .select-custom {
    position: relative;
    width: 280px;
    max-width: 100%;
}

.mo-renew .mo-cta-modal .select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border: 1px solid var(--mo-line);
    border-radius: var(--mo-r-ui);
    cursor: pointer;
}

.mo-renew .mo-cta-modal .select-button strong {
    font-size: var(--mo-fs-body-sm);
    font-weight: var(--mo-w-regular);
    color: var(--mo-sub);
}

.mo-renew .mo-cta-modal__chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--mo-sub);
    border-bottom: 1.5px solid var(--mo-sub);
    transform: translateY(-2px) rotate(45deg);
}

.mo-renew .mo-cta-modal .select-custom.on .mo-cta-modal__chevron {
    transform: translateY(2px) rotate(225deg);
}

.mo-renew .mo-cta-modal .select-list {
    display: none;
    list-style: none;
    margin: 6px 0 0;
    padding: 6px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
    background: var(--mo-white);
    border: 1px solid var(--mo-line-2);
    border-radius: var(--mo-r-ui);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    max-height: 220px;
    overflow-y: auto;
}

.mo-renew .mo-cta-modal .select-custom.on .select-list {
    display: block;
}

.mo-renew .mo-cta-modal .select-list li {
    padding: 9px 16px;
    font-size: var(--mo-fs-body-sm);
    color: var(--mo-ink);
    cursor: pointer;
}

.mo-renew .mo-cta-modal .select-list li:hover,
.mo-renew .mo-cta-modal .select-list li.on {
    background: var(--mo-bg);
}

/* 입력 — 언더라인 스타일 (Figma) */
.mo-renew .mo-cta-modal__field {
    margin-bottom: 22px;
}

.mo-renew .mo-cta-modal__field input {
    width: 100%;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid var(--mo-line-2);
    background: transparent;
    font-family: var(--mo-font);
    font-size: var(--mo-fs-body-sm);
    letter-spacing: var(--mo-tracking);
    color: var(--mo-ink);
}

.mo-renew .mo-cta-modal__field input::placeholder {
    color: var(--mo-line);
}

.mo-renew .mo-cta-modal__field input:focus {
    outline: none;
    border-bottom-color: var(--mo-ink);
}

.mo-renew .mo-cta-modal__email-hidden {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* 약관 체크 */
.mo-renew .mo-cta-modal__agree {
    margin: 44px 0 8px;
}

.mo-renew .mo-cta-modal__agree .checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
}

.mo-renew .mo-cta-modal__agree .checkbox input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.mo-renew .mo-cta-modal__agree .checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #dedede;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

/* 체크 상태: 레드 채움 + 흰 체크마크 (appearance:none 이라 직접 그려준다) */
.mo-renew .mo-cta-modal__agree .checkbox input[type="checkbox"]:checked {
    background: var(--mo-red);
    border-color: var(--mo-red);
}

.mo-renew .mo-cta-modal__agree .checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mo-renew .mo-cta-modal__agree label {
    font-size: var(--mo-fs-body-sm);
    color: var(--mo-ink);
}

.mo-renew .mo-cta-modal .alert_msg {
    display: none;
    margin: 6px 0 0;
    font-size: var(--mo-fs-caption);
    color: var(--mo-red);
}

/* 제출 — 레드 pill */
.mo-renew .mo-cta-modal__submit-row {
    margin-top: 59px;
    text-align: center;
}

/* 제출: 135×41 pill #ff0000, fs17 w500 (Figma Group 15) */
.mo-renew .mo-cta-modal__submit {
    min-width: 135px;
    height: 41px;
    padding: 0 27px;
    border: 0;
    border-radius: 999px;
    background: var(--mo-red);
    color: var(--mo-white);
    font-family: var(--mo-font);
    font-size: var(--mo-fs-body);
    font-weight: var(--mo-w-medium);
    letter-spacing: var(--mo-tracking);
    cursor: pointer;
}

/* 히어로 가격바 = 모달 트리거(클릭 가능) */
.mo-renew .mo-hero__cta-bar {
    cursor: pointer;
}

@media (max-width: 768px) {

    /* MO 패널: 350×624 r25 (Figma Rectangle 116) */
    .mo-renew .mo-cta-modal__panel {
        width: 350px;
        border-radius: 25px;
    }

    .mo-renew .mo-cta-modal__form {
        padding: 64px 0 56px;
    }

    /* MO 닫기 40×25 인셋25, 버튼 텍스트 fs15 (Figma) */
    .mo-renew .mo-cta-modal__close {
        top: 25px;
        right: 25px;
        width: 40px;
        height: 25px;
    }

    .mo-renew .mo-cta-modal__close svg {
        width: 14px;
        height: 14px;
    }

    .mo-renew .mo-cta-modal__submit {
        font-size: var(--mo-fs-body-sm);
    }

    .mo-renew .mo-cta-modal .select-custom {
        width: 100%;
    }

    .mo-renew .mo-cta-modal__submit-row {
        margin-top: 35px;
    }

    .mo-renew .mo-cta-modal__head {
        margin-bottom: 60px;
    }
}

/* ---------------- 하단 sticky CTA ---------------- */
.mo-renew .mo-cta-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--mo-white);
    box-shadow: 0 -1px 0 var(--mo-line-2);
}

.mo-renew .mo-cta-sticky__inner {
    width: var(--mo-content-w);
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 16px 20px;
}

.mo-renew .mo-cta-sticky__text {
    font-size: var(--mo-fs-body-sm);
    color: var(--mo-ink);
    letter-spacing: var(--mo-tracking);
}

.mo-renew .mo-cta-sticky__btn {
    flex: 0 0 auto;
    display: inline-block;
    background: var(--mo-red);
    color: var(--mo-white);
    border-radius: 999px;
    padding: 12px 30px;
    font-size: var(--mo-fs-body-sm);
    font-weight: var(--mo-w-medium);
    letter-spacing: var(--mo-tracking);
    text-decoration: none;
}

/* ============================================================
   디바이스/시술 상세 위젯 (작업2 — 모공 리액터 기준작)
   Figma 모공 리액터 PC 6400:1622 / MO 6400:3419 실측
   ============================================================ */

/* ---- 공통: 콘텐츠 컬럼 센터링 ---- */
.mo-renew .mo-text,
.mo-renew .mo-point-block,
.mo-renew .mo-faq {
    width: var(--mo-content-w);
    max-width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

/* ---- 간격 스페이서 (섹션 간 수직 여백; 위젯 자체는 상하 패딩 0, 간격은 스페이서가 담당) ---- */
.mo-renew .mo-spacer {
    width: 100%;
    height: var(--mo-sp, 80px);
}

/* ---- 공통: 캐러셀 화살표 (programs-v2 슬라이드 위젯과 동일 — 타원 pill + 화살표) ---- */
.mo-renew .mo-arrow {
    position: relative;
    width: 50px;
    height: 30px;
    border: 0;
    border-radius: 20px;
    background-color: var(--mo-bg);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.mo-renew .mo-arrow:hover {
    opacity: 0.7;
}

.mo-renew .mo-arrow::before {
    content: "";
    display: block;
    width: 19px;
    height: 13px;
    background: url('/assets/img/lineup/arrow_r.svg') no-repeat center / contain;
}

.mo-renew .mo-arrow--prev::before {
    transform: scaleX(-1);
}

.mo-renew .mo-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Swiper 비활성(끝 도달, loop 아님)/잠금(슬라이드 부족) — renew 공용 */
.mo-renew .swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.mo-renew .swiper-button-lock {
    display: none;
}

/* ---------------- HERO (hero_device) ---------------- */
.mo-renew .mo-hero {
    position: relative;
    width: 100%;
    background: var(--mo-bg-2);
}

.mo-renew .mo-hero__media {
    width: 100%;
}

.mo-renew .mo-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

.mo-renew .mo-hero__img--mo {
    display: none !important;
}

/* PC: 좌측 흰 영역에 텍스트 오버레이 (Figma x290/y310 = 15%/35%) */
.mo-renew .mo-hero__body {
    position: absolute;
    top: 35%;
    left: 15.1%;
    z-index: 2;
}

.mo-renew .mo-hero__eyebrow {
    margin: 0 0 15px;
    padding-left: 5px;
}

.mo-renew .mo-hero__title {
    margin: 0;
    font-size: var(--mo-fs-h2);
    line-height: 48px;
    font-weight: var(--mo-w-regular);
    color: var(--mo-ink);
    letter-spacing: -2%;
}

.mo-renew .mo-hero__title span {
    display: block;
}

.mo-renew .mo-hero__meta {
    list-style: none;
    margin: 39px 0 0;
    padding: 0;
}

.mo-renew .mo-hero__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    font-size: var(--mo-fs-caption);
    line-height: 1.154;
}

/* 메타 아이콘(Figma: 시술시간/회복기간/유지기간 라인 아이콘, 약 14~16px) */
.mo-renew .mo-hero__meta-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b4b4b4;
}

.mo-renew .mo-hero__meta-icon.meta-icon1 {
    width: 18px;
    height: 20px;
}

.mo-renew .mo-hero__meta-icon.meta-icon2 {}

.mo-renew .mo-hero__meta-icon.meta-icon3 {}

.mo-renew .mo-hero__meta-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mo-renew .mo-hero__meta-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.mo-renew .mo-hero__meta-label {
    flex: 0 0 auto;
    width: 60px;
    color: #b4b4b4;
    font-weight: var(--mo-w-medium);
    letter-spacing: -2%;
}

.mo-renew .mo-hero__meta-value {
    color: var(--mo-black);
    letter-spacing: -2%;
}

/* PC: 가격/예약 바 — 히어로 하단 중앙 오버레이 (Figma y779, 800x68 r20) */
.mo-renew .mo-hero__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4.5%;
    z-index: 2;
    display: flex;
    justify-content: center;
}

/* Figma: bg #E5E5E5 15% + Background blur 20 + 0.5px #F5F5F5 (프로스트 글래스) */
.mo-renew .mo-hero__cta-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 800px;
    max-width: calc(100% - 80px);
    height: 68px;
    padding: 0 30px 0 30px;
    background: rgba(229, 229, 229, 0.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 0.5px solid #f5f5f5;
    border-radius: var(--mo-r-xs);
}

.mo-renew .mo-hero__cta-name {
    font-size: var(--mo-fs-body);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}


.mo-renew .mo-hero__cta-name span {
    font-weight: var(--mo-w-light);
}

.mo-renew .mo-hero__cta-price {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.mo-renew .mo-hero__cta-list {
    font-size: 18px;
    font-weight: var(--mo-w-medium);
    color: var(--mo-line);
}

.mo-renew .mo-hero__cta-sale {
    font-size: 18px;
    font-weight: var(--mo-w-medium);
    color: var(--mo-red);
}

.mo-renew .mo-hero__cta-vat {
    font-size: 11px;
    color: var(--mo-line);
}

.mo-renew .mo-hero__cta-btn {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100px;
    /*padding: 0 26px;*/
    background: var(--mo-red);
    color: var(--mo-white);
    border-radius: 999px;
    font-size: 16px;
    font-weight: var(--mo-w-medium);
    text-decoration: none;
}

/* ---------------- 범용 텍스트 (text) ---------------- */
.mo-renew .mo-text {
    padding: 0;
}

.mo-renew .mo-text--center {
    text-align: center;
}

.mo-renew .mo-text__p {
    margin: 0;
    color: var(--mo-ink);
    font-size: 17px;
    line-height: var(--mo-lh-31);
}

/* PC/MO 두 벌 토글(크기·줄바꿈 상이) — 기본 PC 노출, ≤768 MO 노출 */
.mo-renew .mo-text__p--mo {
    display: none;
}

@media (max-width: 768px) {

    .mo-renew .mo-text__p--pc {
        display: none;
    }

    .mo-renew .mo-text__p--mo {
        display: block;
        font-size: var(--mo-fs-point);
        line-height: var(--mo-lh-29);
    }
}

/* ---------------- BA 캐러셀 (ba_compare) ---------------- */
.mo-renew .mo-ba {
    padding: 0;
    /* overflow:hidden 제거 — 슬라이더가 1920 섬 밖으로 우측 풀블리드(아래 __swiper margin-right)
       할 수 있도록 섹션은 클리핑하지 않는다(클리핑은 __swiper 자체 + body). */
}

.mo-renew .mo-ba__head,
.mo-renew .mo-data__head {
    width: var(--mo-wide-w);
    max-width: calc(100% - 40px);
    margin: 0 auto 40px;
    /* Figma: 제목 x290 / 화살표 끝 x1630 = 와이드밴드(x240~1680) 안쪽 50px 인셋 */
    padding: 0 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.mo-renew .mo-ba__title span,
.mo-renew .mo-data__section {
    display: block;
    color: var(--mo-ink);
}

.mo-renew .mo-ba__nav,
.mo-renew .mo-data__nav {
    flex: 0 0 auto;
    display: flex;
    gap: 5px;
}

/* Swiper 컨테이너 — 메인 슬라이드와 동일: 섬(1920) 풀폭 + 좌측 인셋은 JS slidesOffsetBefore
   (JSON breakpoints: PC 240/MO 20). 1920 초과 모니터는 우측만 뷰포트 끝까지(≤1920 무영향).
   head 는 여전히 1440 센터라, 풀폭 swiper + offsetBefore 240 으로 첫 카드 x240(기존 밴드-좌) 정렬 유지. */
.mo-renew .mo-ba__swiper,
.mo-renew .mo-data__swiper {
    /* width:auto + margin-left:0 → Swiper 기본 margin:auto 무력화. 음수 margin-right 가
       박스를 우측 뷰포트까지 늘려 풀블리드(width:100% 면 안 늘어난다). ≤1920 무영향. */
    width: auto;
    margin: 0;
    margin-right: calc((100% - 100vw) / 2);
    overflow: hidden;
}

.mo-renew .mo-ba__slide {
    width: 490px;
    max-width: 80vw;
    height: auto;
}

.mo-renew .mo-ba__img-wrap {
    width: 100%;
    aspect-ratio: 490 / 410;
    overflow: hidden;
    /* Figma: before|after 페어 외곽 r50(PC)/r35(MO) — rectangleCornerRadii [50,0,0,50]+[0,50,50,0] */
    border-radius: var(--mo-r-md);
}

.mo-renew .mo-ba__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mo-renew .mo-ba__label {
    margin: 18px 0 0;
    padding-left: 20px;
    /* Figma: 라벨 x260 = 이미지 x240 + 20 */
    color: var(--mo-ink);
}

/* ---------------- 포인트 영역 (point_block) ---------------- */
.mo-renew .mo-point-block {
    padding: 0;
}

.mo-renew .mo-point-block__section {
    margin: 0 0 100px;
    /* Figma: 제목 x520 = 콘텐츠 x480 + 40 (이미지/Point 라벨은 콘텐츠 좌측 정렬) */
    padding-left: 40px;
    color: var(--mo-ink);
}

/* 섹션 타이틀 PC/MO 두 벌(줄바꿈 차이) — 기본 PC 노출, MO 숨김 */
.mo-renew .mo-point-block__section--mo {
    display: none;
}

.mo-renew .mo-point-block__item {
    margin-bottom: 200px;
}

.mo-renew .mo-point-block__item:last-child {
    margin-bottom: 0;
}

.mo-renew .mo-point-block__media {
    width: 100%;
    margin-bottom: 25px;
}

.mo-renew .mo-point-block__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mo-r-md);
}

.mo-renew .mo-point-block__img--mo {
    display: none;
}

/* 2단: 좌 제목 / 우 본문 (Figma x556 제목 | x1045 본문) */
.mo-renew .mo-point-block__text {
    display: grid;
    grid-template-columns: 1fr 395px;
    gap: 40px;
    align-items: start;
}

/* Point 라벨 + 제목 한 줄 가로 배치(baseline 정렬). MO 는 세로로 전환 */
.mo-renew .mo-point-block__head {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.mo-renew .mo-point-block__label {
    margin: 0;
}

.mo-renew .mo-point-block__title {
    margin: 0;
    color: var(--mo-ink);
}

.mo-renew .mo-point-block__title span {
    display: block;
}

.mo-renew .mo-point-block__body {
    margin: 0;
    color: var(--mo-ink);
}

/* ---------------- data(검증) 영역 (data_stats) ---------------- */
.mo-renew .mo-data {
    padding: 0;
    /* overflow:hidden 제거 — .mo-ba 와 동일 이유(우측 풀블리드 허용). */
}

/* 와이드 밴드(1440) 안에서 4카드 균일 노출: 335*4 + 24*3 = 1412 */
.mo-renew .mo-data__card {
    width: 335px;
    height: auto;
    max-width: 80vw;
    padding: 45px 50px;
    background: var(--mo-white);
    border-radius: var(--mo-r-md);
}

.mo-renew .mo-data__card-title {
    margin: 0 0 10px;
    color: var(--mo-red);
    letter-spacing: -3%;
}

.mo-renew .mo-data__card-body {
    margin: 0 0 28px;
    color: var(--mo-ink);
}

.mo-renew .mo-data__imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mo-renew .mo-data__img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--mo-r-xs);
}

/* ---------------- 추천 대상 (reco_list) ----------------
   Figma: 제목·항목은 콘텐츠 좌측(x480) 정렬, 구분선은 풀블리드(x0~1920) */
.mo-renew .mo-reco {
    width: 100%;
    padding: 0;

}

.mo-renew .mo-reco__title {
    margin: 0 0 60px;
    padding: 0 calc((100% - var(--mo-content-w)) / 2 + 40px);
    color: var(--mo-ink);
    line-height: var(--mo-lh-48);
}

.mo-renew .mo-reco__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mo-line-2);
}

.mo-renew .mo-reco__item {
    padding: 40px calc((100% - var(--mo-content-w)) / 2 + 40px) 45px;
    border-bottom: 1px solid #DEDEDE;
    color: var(--mo-ink);
    font-size: var(--mo-fs-h3);
    line-height: var(--mo-lh-31);
}

/* ---------------- FAQ 섹션 여백(아코디언 위젯은 위에서 정의) ---------------- */
.mo-renew .mo-faq {
    padding: 0;
}


.display_pc_only {}

.display_tablet_only {
    display: none;
}


/* ============================================================
   모바일 재정의 (≤768, 390 디자인 기준)
   ============================================================ */
@media (max-width: 768px) {

    .display_pc_only {
        display: none;
    }

    .display_tablet_only {
        display: block;
    }

    /* 스페이서 MO 높이 */
    .mo-renew .mo-spacer {
        height: var(--mo-sp-mo, 40px);
    }

    /* HERO: 텍스트 → 이미지 → 가격바 세로 스택. 상단은 고정 GNB 여백 확보
       (Figma MO 헤드라인 y135 대조) */
    .mo-renew .mo-hero {
        display: flex;
        flex-direction: column;
        padding: 134px 0 0;
    }

    .mo-renew .mo-hero__title {
        line-height: 35px;
    }

    .mo-renew .mo-point {
        font-size: var(--mo-fs-point);
    }

    .mo-renew .mo-hero__eyebrow {
        margin: 0 0 10px;
        padding-left: 2px;
    }

    .mo-renew .mo-hero__cta-name span {
        display: none;
    }

    .mo-renew .mo-hero__img--pc {
        display: none !important;
    }

    .mo-renew .mo-hero__img--mo {
        display: block !important;
    }

    .mo-renew .mo-hero__media {
        order: 2;
    }

    .mo-renew .mo-hero__body {
        order: 1;
        position: static;
        padding: 0 35px;
        margin-bottom: 24px;
    }

    .mo-renew .mo-hero__cta {
        order: 3;
        position: relative;
        z-index: 2;
        padding: 0 15px;
        /* 이미지 하단에 겹치도록 끌어올림(바 높이만큼) → 프로스트로 이미지 비침 */
        margin-top: -86px;
    }

    .mo-renew .mo-hero__cta-bar {
        width: 100%;
        max-width: none;
        height: 86px;
        flex-wrap: wrap;
        align-content: center;
        gap: 4px 10px;
        padding: 0 20px 0 20px;
        border-radius: var(--mo-r-xs);
        /* PC 와 동일하게 프로스트 글래스(상속) — bg/blur/border 재정의 안 함 */
    }

    .mo-renew .mo-hero__cta-name {
        flex: 1 0 100%;
        font-size: var(--mo-fs-body-sm);
    }

    .mo-renew .mo-hero__cta-list,
    .mo-renew .mo-hero__cta-sale {
        font-size: var(--mo-fs-h4);
    }

    .mo-renew .mo-hero__cta-btn {
        width: 78px;
        height: 30px;
        font-size: 15px;
    }

    /* 섹션 공통 여백 축소 */
    .mo-renew .mo-text {
        padding: 0;
    }

    .mo-renew .mo-ba,
    .mo-renew .mo-point-block,
    .mo-renew .mo-data,
    .mo-renew .mo-reco {
        padding: 0;
    }

    .mo-renew .mo-faq {
        padding: 0;
    }

    .mo-renew .mo-ba__head,
    .mo-renew .mo-data__head {
        margin-bottom: 26px;
        /* MO: 제목 x35 = 콘텐츠 x20(margin auto) + 15(padding) */
        padding: 0 15px;
        max-width: calc(100% - 40px);
    }

    /* MO: before|after 한 카드 크게(~290폭) + 다음 카드 peek (Figma 6400:3419) */
    .mo-renew .mo-ba__slide {
        width: 290px;
        max-width: 80vw;
    }

    .mo-renew .mo-ba__img-wrap {
        /* before|after 합성 비율 그대로(490x410) — 좌우 크롭 없이 전체 노출 */
        aspect-ratio: 490 / 410;
        /* MO 외곽 r35 (r-md), 라벨 인셋 15 */
    }

    .mo-renew .mo-ba__label {
        padding-left: 15px;
        margin: 15px 0 0 0;
    }

    .mo-renew .mo-point-block__section {
        margin-bottom: 71px;
        /* MO: 제목 x35 = 콘텐츠 x20 + 15 (좌측 정렬, Figma 6400:3419) */
        padding-left: 15px;
    }

    /* MO 에서 타이틀 두 벌 토글 (PC 숨김 / MO 노출) */
    .mo-renew .mo-point-block__section--pc {
        display: none !important;
    }

    .mo-renew .mo-point-block__section--mo {
        display: block;
        margin: 0 0 70px !important;
    }

    /* MO: head(Point N.+제목) → 이미지 → 본문 순으로 재배치 (Figma 6400:3419).
       DOM(media, text>head,body) 은 그대로 두고 display:contents + order 로 시각 재정렬
       → PC/MO 섹션을 두 벌로 복제하지 않아도 됨(콘텐츠 단일 유지). */
    .mo-renew .mo-point-block__item {
        display: flex;
        flex-direction: column;
        margin-bottom: 160px;
    }

    .mo-renew .mo-point-block__text {
        display: contents;
    }

    .mo-renew .mo-point-block__img--pc {
        display: none;
    }

    .mo-renew .mo-point-block__img--mo {
        display: block;
        border-radius: var(--mo-r-sm);
    }

    .mo-renew .mo-point-block__head {
        order: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 0 0 20px;
        padding: 0 0 0 15px;
    }

    .mo-renew .mo-point-block__media {
        order: 2;
        margin: 0 0 20px;
    }

    .mo-renew .mo-point-block__body {
        order: 3;
        margin: 0;
        padding: 0 15px;
    }

    .mo-renew .mo-data__card {
        width: 280px;
        max-width: 75vw;
        padding: 30px 25px;
        border-radius: var(--mo-r-sm);
    }

    .mo-renew .mo-reco__item {
        padding: 20px 35px;
        font-size: var(--mo-fs-h4);
        line-height: var(--mo-lh-31);
    }

    .mo-renew .mo-reco__title {
        padding: 0 35px;
        line-height: var(--mo-lh-35);
        margin: 0 0 45px 0 !important;
    }

    /* FAQ 카드 MO 패딩 축소 */
    .mo-renew .mo-faq__q {
        padding: 24px 25px;
    }

    .mo-renew .mo-faq__a-inner {
        padding: 0 25px 26px;
    }

    .mo-renew .mo-faq__q-text {
        font-size: var(--mo-fs-h4);
        line-height: var(--mo-lh-h4);
    }


    .mo-renew .mo-arrow {
        width: 37px;
        height: 22px;
    }

    .mo-renew .mo-arrow::before {
        width: 15px;
        height: 10px;
    }

    .mo-renew .mo-faq__title {
        padding: 0 15px;
        line-height: var(--mo-lh-35);
        /* !important: device 인라인 .mo-h2(margin 30) 블랭킷을 이김 (reco__title 패턴과 동일) */
        margin: 0 0 33px 0 !important;
    }

    .mo-renew .mo-hero__meta {
        margin: 32px 0 0 0;
    }

    .mo-renew .mo-hero__meta-icon {
        width: 12px;
        height: 12px;
    }

    .mo-renew .mo-hero__meta-icon.meta-icon1 {
        width: 15px;
        height: 17px;
    }

}