/* ============================================================
   renew/main.css — 메인페이지 전용 스타일 (정적 페이지, 위젯화 X)
   Figma: PC 6421:220 / MO 6421:462 (지점참고 6421:630)
   모든 셀렉터 .mo-renew 스코프 + .mo-main 페이지 네임스페이스.
   레이아웃 토큰(--mo-content-w 960 / --mo-fullbleed-w 1850 / --mo-wide-w 1440)은 tokens.css.
   ============================================================ */

/* 페이지 전체 배경 = 오프화이트(#fafafa). 순백이면 이질감 → 1920 바깥 여백/셸까지 통일.
   main.css 는 메인페이지에서만 로드되므로 .mo-renew(body) 지정해도 메인에만 적용. */
.mo-renew {
    background: var(--mo-bg-2);
    margin: 0;
    /* 가로 넘침 차단(overflow-x:clip)은 effects.css 의 body.mo-renew 로 공통 이관(전 renew 페이지). */
}

.mo-renew .mo-main {
    /* 가이드 §3.4: 1920 기준 디자인 → 페이지 최대폭 1920 캡(초과 시 좌우 여백).
       단 슬라이드 섹션은 이 캡 밖으로 뷰포트 끝까지 확장(아래 풀블리드 규칙) →
       .mo-main 은 가로 넘침을 자르지 않고 통과시킨다(클리핑은 body 가 담당). */
    max-width: var(--mo-base-w);
    margin: 0 auto;
    background: var(--mo-bg-2);
    overflow-x: visible;
}

/* ============================================================
   1920 초과 모니터 풀블리드 — 슬라이드 섹션만 뷰포트 좌우 끝까지.
   본문/비슬라이드 섹션은 1920 중앙 유지. ≤1920 에선 calc 가 0/뷰포트폭으로
   수렴해 무영향(회귀 0). 우측 확장은 hospital 의 기존 패턴 재사용.
   ============================================================ */
/* 좌측 정렬 유지 + 우측만 뷰포트 끝까지(라인업/메인BA — slidesOffset 로 좌측 인셋 유지).
   width:auto + margin-left:0 으로 Swiper 기본 .swiper{margin:auto} 무력화 — 그래야 음수
   margin-right 가 박스를 우측 뷰포트까지 "늘린다"(width:100% 면 안 늘고, auto 마진이 슬라이더를
   섬-마진만큼 우측으로 밀어 좌측에 빈틈이 생긴다). ≤1920 에선 calc=0 → 무영향. */
.mo-renew .mo-lineup__swiper,
.mo-renew .mo-main-ba__swiper {
    width: auto;
    margin-left: 0;
    margin-right: calc((100% - 100vw) / 2);
}

/* 히어로/밴드(좌우 대칭 100vw)는 각 섹션 규칙에서 직접 처리(아래) — margin 충돌 회피 */

/* 풀블리드(1850) / 콘텐츠(960) 공용 래퍼 */
.mo-renew .mo-main .mo-fb {
    width: var(--mo-fullbleed-w);
    max-width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

/* 공용 꺾쇠(chevron) — 밴드 네비/더보기 버튼 */
.mo-renew .mo-chevron {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--mo-ink);
    border-bottom: 1.5px solid var(--mo-ink);
}

.mo-renew .mo-chevron--down {
    transform: rotate(45deg);
}

.mo-renew .mo-chevron--up {
    transform: rotate(-135deg);
}

.mo-renew .mo-chevron--left {
    transform: rotate(135deg);
}

.mo-renew .mo-chevron--right {
    transform: rotate(-45deg);
}

/* ============================================================
   ① HERO — 후기 캐러셀 (중앙 카드 활성=영상, 좌우 페이드)
   Figma: 타이틀 x290 30/48 · 중앙 460x817 r50 · 측면 420x745 r50 · gap30
   ============================================================ */
.mo-renew .mo-mhero {
    position: relative;
    /* 1920 초과 모니터에서 뷰포트 좌우 끝까지(≤1920 에선 100vw=섬폭, margin 0). 자체 overflow:hidden 으로 클리핑 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* 고정 GNB(top15+높이58=~73) 아래로 헤드라인 진입(Figma 헤드라인 y173 PNG 대조) */
    padding: 163px 0 30px;
    overflow: hidden;
}

.mo-renew .mo-mhero__title {
    width: var(--mo-fullbleed-w);
    max-width: calc(100% - 70px);
    margin: 0 auto 75px;
    /* 타이틀→캐러셀 간격(Figma PNG 대조: 캐러셀 top y452) */
    padding-left: 255px;
    /* Figma 타이틀 x290 = 풀블리드(x35)+255 */
    color: var(--mo-ink);
    line-height: var(--mo-lh-45);
}

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

/* Swiper 컨테이너 — 좌우 카드 peek 위해 overflow visible(섹션 .mo-mhero 가 클리핑) */
.mo-renew .mo-mhero__swiper {
    overflow: visible;
}

/* 측면(비활성) 카드: 420x745 r50, 페이드+블러. centeredSlides 가 활성 중앙 정렬 */
.mo-renew .mo-mhero__swiper .swiper-slide {
    width: 420px;
    height: auto;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 0.45;
}

.mo-renew .mo-mhero__media {
    position: relative;
    width: 100%;
    aspect-ratio: 420 / 745;
    border-radius: var(--mo-r-md);
    overflow: hidden;
    /* 비활성 카드는 블러(디자이너 원본: 좌우 카드 흐림) */
    filter: blur(5px);
    transition: filter 0.4s ease;
}

/* 활성(중앙) 카드: 확대(scale≈460/420) + 불투명 + 선명. scale 은 레이아웃 불변 */
.mo-renew .mo-mhero__swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1.09);
    z-index: 2;
}

.mo-renew .mo-mhero__swiper .swiper-slide-active .mo-mhero__media {
    filter: none;
}

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

/* 인터뷰 영상 — cover <img> 위에 겹침. 기본 숨김(좌우는 블러 cover 노출),
   활성 카드에서만 표시·재생(.mo-mhero__media{filter:none} 으로 선명) */
.mo-renew .mo-mhero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mo-renew .mo-mhero__swiper .swiper-slide-active .mo-mhero__video {
    opacity: 1;
}

/* 좌우 네비 — 히어로 영역 오버레이. 디자인: 타원 아닌 원(50x50, Figma Group 378/379) */
.mo-renew .mo-mhero__nav {
    position: absolute;
    top: 63.5%;
    transform: translateY(-50%);
    z-index: 3;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(229, 229, 229, 0.15);
    cursor: pointer;
    transition: opacity 0.3s ease;
}

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

/* 원 안 화살표(꺾쇠) */
.mo-renew .mo-mhero__nav::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-right: 1.5px solid var(--mo-ink);
    border-bottom: 1.5px solid var(--mo-ink);
}

.mo-renew .mo-mhero__nav--next::before {
    transform: translateX(-2px) rotate(-45deg);
}

.mo-renew .mo-mhero__nav--prev::before {
    transform: translateX(2px) rotate(135deg);
}

.mo-renew .mo-mhero__nav--prev {
    left: 100px;
}

.mo-renew .mo-mhero__nav--next {
    right: 100px;
}

/* Swiper 비활성(끝 도달, loop 아님) 화살표 흐리게 — .mo-arrow/네비 공통 */
.mo-renew .swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

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

/* 하단 sticky CTA 바 — fixed(스크롤 무관 뷰포트 하단 고정). 모달/플로팅과 공존 */
.mo-renew .mo-mhero__cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 40px;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.mo-renew .mo-mhero__cta-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 800px;
    max-width: 100%;
    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 #f8f8f8;
    border-radius: var(--mo-r-xs);
    cursor: pointer;
}

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

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

/* body 레벨로 분리된 지속 CTA 바가 최하단에서 푸터를 가리지 않도록 페이지 하단 여백 확보
   (device 의 device-body{padding-bottom} 선례 동형). 바 위치(bottom:106 + h68) 기준 잠정치 — 실측 튜닝 */
body.mo-renew {
    padding-bottom: 180px;
}

/* ============================================================
   ② LINEUP — 프로그램 4카드 (430x550 r50, 풀-bg 이미지 + +버튼)
   ============================================================ */
.mo-renew .mo-lineup {
    width: 100%;
    max-width: 100%;
    margin: 200px auto 0;
}

.mo-renew .mo-lineup__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 33px;
    padding-left: 255px;
    max-width: var(--mo-base-w1600);
    /* 제목 x290 정렬 */
}

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

.mo-renew .mo-lineup__nav {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

/* Swiper 컨테이너 — 카드 x240 인셋은 JS slidesOffsetBefore(PC 205/MO 20)로 처리.
   세로 14px 여백(padding) + 동일 음수 마진으로 레이아웃은 그대로 두고, hover 확대 카드가
   가로 클리핑(overflow:hidden)에 세로로 잘리지 않게 숨 쉴 공간을 준다(아래 카드 hover 줌). */
.mo-renew .mo-lineup__swiper {
    overflow: hidden;
    padding-top: 14px;
    padding-bottom: 14px;
    margin-top: -14px;
    margin-bottom: -14px;
}

.mo-renew .mo-lineup__swiper .swiper-slide {
    width: 430px;
    height: auto;
}

.mo-renew .mo-lineup__link {
    position: relative;
    display: block;
    height: 550px;
    border-radius: var(--mo-r-md);
    overflow: hidden;
    text-decoration: none;
}

.mo-renew .mo-lineup__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 카드 상단 그라데이션(흰색→투명) — 텍스트 가독성/디자이너 원본 배경 그라데이션 */
.mo-renew .mo-lineup__link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55%;
    z-index: 1;
    background: linear-gradient(180deg, var(--mo-white) 0%, rgba(255, 255, 255, 0.85) 28%, rgba(255, 255, 255, 0) 100%);
}

.mo-renew .mo-lineup__body {
    position: absolute;
    top: 45px;
    left: 45px;
    right: 45px;
    z-index: 2;
}

.mo-renew .mo-lineup__name {
    margin: 0 0 14px;
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

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

/* 카드 하단 링크 화살표(→) — 검은 원 + 흰 꺾쇠(디자이너: + 아님, 화살표 링크) */
.mo-renew .mo-lineup__arrow {
    position: absolute;
    left: 45px;
    bottom: 45px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mo-ink);
}

.mo-renew .mo-lineup__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 41%;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--mo-white);
    border-right: 2px solid var(--mo-white);
    transform: translate(-20%, -50%) rotate(45deg);
}

/* 화살표 몸통 직선 (-) 추가 */
.mo-renew .mo-lineup__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    /* 직선 길이 */
    height: 1.5px;
    /* 선 두께 (머리와 동일하게) */
    background-color: var(--mo-white);
    transform: translate(-65%, -50%);
}

/* 카드 마우스오버 시 화살표 버튼 컬러 반전(디자이너 코멘트) */
.mo-renew .mo-lineup__arrow {
    transition: background 0.25s ease;
}

.mo-renew .mo-lineup__card:hover .mo-lineup__arrow {
    background: var(--mo-white);
    /*box-shadow: inset 0 0 0 1px var(--mo-line-2);*/
}

.mo-renew .mo-lineup__card:hover .mo-lineup__arrow::before {
    border-top-color: var(--mo-ink);
    border-right-color: var(--mo-ink);
}

.mo-renew .mo-lineup__card:hover .mo-lineup__arrow::after {
    background-color: var(--mo-ink);
}

/* 카드 hover 미세 줌(애플 레퍼런스: 살짝 떠오르는 정도). 그림자 없음.
   링크가 있는 라인업 카드에만 적용. 모바일(hover 없음)은 @media(hover:hover) 로 차단. */
.mo-renew .mo-lineup__card {
    transition: transform 0.35s var(--mo-fade-ease);
}

@media (hover: hover) {
    .mo-renew .mo-lineup__card:hover {
        transform: scale(1.03);
    }
}

/* ============================================================
   ③ DEVICES — 주요 디바이스 (지점별 커스텀). 탭 필터 + 3x3 그리드.
   카드 460x181 r35 #fff · 썸네일 85x121 · 카테고리칩 r8 · 정가→할인가
   ============================================================ */
.mo-renew .mo-devices {
    width: var(--mo-fullbleed-w);
    max-width: calc(100% - 40px);
    margin: 200px auto 0;
    padding-left: 205px;
    /* 콘텐츠 x240 정렬(풀블리드 35 + 205) */
    padding-right: 205px;
}

/* 제목/탭은 카드(x240)보다 50 안쪽(x290) — Figma */
.mo-renew .mo-devices__title {
    margin: 0 0 21px 50px;
    color: var(--mo-ink);
}

.mo-renew .mo-devices__tabs {
    display: flex;
    gap: 30px;
    margin: 0 0 30px 50px;
}

.mo-renew .mo-devices__tab {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--mo-font);
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    letter-spacing: 0;
    color: var(--mo-line);
    cursor: pointer;
}

.mo-renew .mo-devices__tab.is-active {
    color: var(--mo-ink);
}

/* 그리드 래퍼: 접힘(2행 노출)+하단 페이드+더보기 버튼.
   펼침은 JS 가 실제 콘텐츠 높이(scrollHeight)를 inline max-height 로 주입 →
   접힘값(아래)에서 전체 높이까지 매끄럽게 늘어남("장막 벗겨지듯"). */
.mo-renew .mo-devices__grid-wrap {
    position: relative;
    /* 접힘 높이: 1·2행 온전 + 3행 절반쯤이 페이드 아래로 비치도록(디자인 원본 대조).
       행 피치 ≈ 211px(카드 181 + gap 30) → 2행끝 392 / 3행 422~603, 그 중턱까지 노출. */
    max-height: 640px;
    overflow: hidden;
    padding-bottom: 60px;
    transition: max-height 0.55s var(--mo-fade-ease);
}

.mo-renew .mo-devices__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

/* 디자이너 카드(피드백1차): 카드가 1670↓ 폭에서 글자 2줄로 깨짐 → 1500↓ 2열·1220↓ 1열로 접음 */
@media (max-width: 1500px) {
    .mo-renew .mo-devices__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1220px) {
    .mo-renew .mo-devices__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* 하단 페이드(접힘 시) */
.mo-renew .mo-devices__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 205px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, var(--mo-bg-2) 78%);
    transition: opacity 0.4s ease;
}

.mo-renew .mo-devices__grid-wrap.is-expanded .mo-devices__fade {
    opacity: 0;
}

/* 더보기 버튼(⌄, 펼치면 ⌃) — 페이드 위 중앙 하단 */
.mo-renew .mo-devices__expand {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 2;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 100%;
    background: rgba(229, 229, 229, 0.15);
    cursor: pointer;
    transition: opacity 0.3s ease;
}

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

.mo-renew .mo-devices__grid-wrap.is-expanded .mo-devices__expand .mo-chevron--down {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.mo-renew .mo-devices__card {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 181px;
    padding: 30px;
    background: var(--mo-white);
    border-radius: var(--mo-r-sm);
}

.mo-renew .mo-devices__card.is-hidden {
    display: none;
}

.mo-renew .mo-devices__thumb {
    flex: 0 0 auto;
    width: 85px;
    height: 121px;
    border-radius: var(--mo-r-ui);
    background: var(--mo-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mo-renew .mo-devices__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mo-renew .mo-devices__info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

.mo-renew .mo-devices__chips {
    display: flex;
    gap: 5px;
    margin: 0 0 10px;
    justify-content: flex-end;
}

.mo-renew .mo-devices__chip {
    display: inline-block;
    padding: 6px 10px;
    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);
    line-height: var(--mo-lh-15);
}

.mo-renew .mo-devices__name {
    margin: 0 0 4px;
    color: var(--mo-ink);
}

.mo-renew .mo-devices__name strong {
    font-weight: var(--mo-w-medium);
}

.mo-renew .mo-devices__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: flex-end;
}

.mo-renew .mo-devices__list {
    font-size: var(--mo-fs-h3);
    font-weight: var(--mo-w-medium);
    color: var(--mo-line);
    text-decoration: line-through;
}

.mo-renew .mo-devices__sale {
    font-size: var(--mo-fs-h3);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

/* ============================================================
   ④ PHILO — 건강하고 효과적인 개선 (2-up r120 + 캡션)
   ============================================================ */
.mo-renew .mo-philo {
    width: var(--mo-fullbleed-w);
    max-width: calc(100% - 40px);
    margin: 200px auto 0;
}

.mo-renew .mo-philo__head {
    padding-left: 255px;
    margin: 0 0 70px;
}

.mo-renew .mo-philo__title {
    margin: 0 0 21px;
    color: var(--mo-ink);
}

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

.mo-renew .mo-philo__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mo-gutter);
}

.mo-renew .mo-philo__fig {
    position: relative;
    margin: 0;
}

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

/* 캡션 = 이미지 가로 중앙, 하단부 오버레이(Figma: 텍스트가 이미지 중앙에 위치) */
.mo-renew .mo-philo__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 80px;
    margin: 0;
    text-align: center;
    font-family: var(--mo-font-en);
    color: #9e9e9e;
}

.mo-renew .mo-philo__cap--ghost {
    color: #eaeaea;
}

/* ============================================================
   ⑤ BAND — 풀블리드 이미지 밴드 (1920 풀폭 + 네비)
   ============================================================ */
.mo-renew .mo-band {
    position: relative;
    /* 1920 초과 모니터에서 뷰포트 좌우 끝까지(≤1920 무영향). 자체 overflow:hidden 으로 클리핑 */
    width: 100vw;
    margin: 200px calc(50% - 50vw) 0;
    overflow: hidden;
}

/* 풀폭 슬라이드 캐러셀(Swiper, 1장씩, 전 뷰포트 3초 자동·무한루프) */
.mo-renew .mo-band__swiper {
    width: 100%;
    overflow: hidden;
}

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

/* 밴드 네비 = 꺾쇠(‹ ›) — pill 없이 얇은 꺾쇠만(디자이너) */
.mo-renew .mo-band__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: rgba(229, 229, 229, 0.15);
    border-radius: 100%;
    cursor: pointer;
}

.mo-renew .mo-band__nav .mo-chevron {
    width: 11px;
    height: 11px;
    border-width: 1.5px;
}

.mo-renew .mo-band__nav--prev {
    left: 100px;
}

.mo-renew .mo-band__nav--next {
    right: 100px;
}

/* ============================================================
   ⑥ PROOF — 입증된 안전함 (제목 좌 / 본문+더알아보기 우)
   ============================================================ */
.mo-renew .mo-proof {
    width: var(--mo-fullbleed-w);
    max-width: calc(100% - 40px);
    margin: 200px auto 0;
    padding-left: 255px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

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

.mo-renew .mo-proof__body {
    margin: 0 0 30px;
    color: var(--mo-ink);
}

/* 더 알아보기: 기본 밑줄 없음 → hover 시 하단 라인 생성(디자이너 코멘트) */
.mo-renew .mo-proof__more {
    display: inline-block;
    position: relative;
    color: var(--mo-line);
    text-decoration: none;
}

.mo-renew .mo-proof__more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--mo-line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--mo-fade-ease);
}

.mo-renew .mo-proof__more:hover::after {
    transform: scaleX(1);
}

/* ============================================================
   ⑦ BIGIMG — 메인 대형 이미지 (r120 + 로고 오버레이)
   ============================================================ */
.mo-renew .mo-bigimg {
    width: var(--mo-fullbleed-w);
    max-width: calc(100% - 40px);
    margin: 200px auto 0;
}

.mo-renew .mo-bigimg__wrap {
    position: relative;
    border-radius: var(--mo-r-lg);
    overflow: hidden;
}

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

.mo-renew .mo-bigimg__logo {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-width: 40%;
    /*filter: brightness(0) invert(1);*/
}

/* ============================================================
   ⑧ STATS — 누적 수치 (3-up 숫자 55/80 + 라벨)
   ============================================================ */
.mo-renew .mo-stats {
    width: var(--mo-content-w);
    max-width: calc(100% - 40px);
    margin: 140px auto 0;
}

.mo-renew .mo-stats__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

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

.mo-renew .mo-stats__num {
    display: block;
    font-size: 55px;
    line-height: 1.45;
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-renew .mo-stats__label {
    color: var(--mo-ink);
    margin: 15px 0 0 0;
    display: block;
}

/* ============================================================
   ⑨ BA(하단) — 맞춤형 시술 효과 (Swiper). .mo-ba 헤드/슬라이드 스타일은 widgets.css 재사용.
   ============================================================ */
.mo-renew .mo-main-ba {
    margin-top: 200px;
}

/* Swiper 컨테이너 = 페이지 풀폭(라인업과 동형). 좌측 인셋·우측 peek 은 JS
   slidesOffsetBefore/After(PC 205/35, MO 20/20)로 처리 → 카드가 우측 끝까지 이어짐.
   (구 1440 중앙밴드는 넓은 화면에서 우측 빈여백이 "짤림"처럼 보여 풀폭으로 전환) */
.mo-renew .mo-main-ba__swiper {
    /* width/margin 은 상단 풀블리드 블록(width:auto + margin-right calc)에서 처리 */
    overflow: hidden;
}

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

/* 헤드 좌측정렬(PC 전용) — 풀폭 카드와 제목/화살표 정렬 일치(라인업 .mo-lineup__head 동형).
   공용 .mo-ba__head(widgets.css, 프로그램 페이지 재사용) 베이스는 그대로 두고 메인만 오버라이드.
   min-width 래핑으로 MO 헤드 규칙(아래 @media + widgets MO 베이스)에 padding-left 누수 방지. */
@media (min-width: 769px) {
    .mo-renew .mo-main-ba .mo-ba__head {
        width: auto;
        max-width: var(--mo-base-w1600);
        margin: 0 0 40px;
        padding: 0 0 0 255px;
    }
}

.mo-renew .mo-main-ba .mo-ba__img-wrap {
    aspect-ratio: 490 / 410;
}

.display_pc_only {}

.display_tablet_only {
    display: none;
}

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

    .display_pc_only {
        display: none;
    }

    .display_tablet_only {
        display: block;
    }

    /* HERO: 단일 카드 스와이프 (Figma MO 타이틀 y137 대조) */
    .mo-renew .mo-mhero {
        padding: 129px 0 10px;
    }

    .mo-renew .mo-mhero__title {
        width: 100%;
        max-width: none;
        padding: 0 35px;
        margin-bottom: 20px;
        line-height: var(--mo-lh-35);
    }

    /* MO 히어로: 단일 카드(350x623). 활성 scale 제거(중앙 1장만 노출) */
    .mo-renew .mo-mhero__swiper .swiper-slide {
        width: 350px;
        max-width: 90vw;
        opacity: 1;
    }

    .mo-renew .mo-mhero__swiper .swiper-slide-active {
        transform: none;
    }

    .mo-renew .mo-mhero__media {
        aspect-ratio: 350 / 623;
        border-radius: var(--mo-r-lg);
        filter: none;
    }

    .mo-renew .mo-mhero__nav--prev {
        left: 10px;
    }

    .mo-renew .mo-mhero__nav--next {
        right: 10px;
    }

    .mo-renew .mo-mhero__cta {
        padding: 0 15px 12px;
        bottom: 0px;
    }

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

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

    .mo-renew .mo-mhero__cta-bar {
        width: 100%;
        height: 55px;
        /* body 레벨 지속 노출 → 흰 콘텐츠 위 가독성 위해 프로스트 복원(PC 톤과 동일) */
        background: rgba(229, 229, 229, 0.15);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border: 0.5px solid #f8f8f8;
        border-radius: var(--mo-r-xs);
        padding: 0 20px;
    }

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

    .mo-renew .mo-mhero__cta-btn {
        font-size: var(--mo-fs-body-sm);
        height: 30px;
        width: 78px;
    }

    /* LINEUP: 2업 스와이프 카드 300x385 */
    .mo-renew .mo-lineup {
        width: 100%;
        max-width: none;
        margin-top: 100px;
    }

    .mo-renew .mo-lineup__head {
        padding: 0 35px;
        margin-bottom: 24px;
    }

    .mo-renew .mo-lineup__head .mo-lineup__title {
        margin: 0px 0 22px 0;
    }

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

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

    .mo-renew .mo-lineup__arrow {
        left: 30px;
        bottom: 35px;
    }

    .mo-renew .mo-lineup__name {
        margin: 0 0 0px;
    }

    .mo-renew .mo-lineup__swiper .swiper-slide {
        width: 300px;
        max-width: 78vw;
    }

    .mo-renew .mo-lineup__link {
        height: 385px;
        border-radius: var(--mo-r-md);
    }

    .mo-renew .mo-lineup__body {
        top: 30px;
        left: 35px;
        right: 35px;
    }

    .mo-renew .mo-lineup__plus {
        left: 35px;
        bottom: 35px;
    }

    /* DEVICES: 세로 리스트 (350x122) */
    .mo-renew .mo-devices {
        width: 100%;
        max-width: none;
        margin-top: 100px;
        padding: 0 20px;
    }

    .mo-renew .mo-devices__title {
        padding: 0 15px;
        margin: 0 0 10px 50px;
    }

    .mo-renew .mo-devices__title,
    .mo-renew .mo-devices__tabs {
        margin-left: 0;
    }

    .mo-renew .mo-devices__tabs {
        gap: 20px;
        overflow-x: auto;
        padding: 0 15px;
        margin: 0 0 20px 0px;
    }

    .mo-renew .mo-devices__chip {
        padding: 3px 7px 5px 7px;
    }

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

    /* MO: 접힘 높이(세로 리스트 ~3~4장 노출, 펼치면 전체) */
    .mo-renew .mo-devices__grid-wrap {
        max-height: 685px;
    }

    .mo-renew .mo-devices__fade {
        height: 167px;
    }

    /* MO 히어로 네비: 원형 축소(40x40) */
    .mo-renew .mo-mhero__nav {
        width: 40px;
        height: 40px;
    }

    .mo-renew .mo-devices__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mo-renew .mo-devices__card {
        height: auto;
        gap: 15px;
        padding: 15px;
        border-radius: var(--mo-r-xs);
    }

    .mo-renew .mo-devices__thumb {
        width: 65px;
        height: 92px;
    }

    .mo-renew .mo-devices__list,
    .mo-renew .mo-devices__sale {
        font-size: var(--mo-fs-body);
    }

    .mo-renew .mo-devices__expand {
        width: 35px;
        height: 35px;
    }

    /* PHILO: 이미지 세로 스택 */
    .mo-renew .mo-philo {
        width: 100%;
        max-width: none;
        margin-top: 100px;
        padding: 0 20px;
        display: flex;
        flex-direction: column-reverse;
    }

    .mo-renew .mo-philo__head {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 20px;
    }

    .mo-renew .mo-philo__title {
        margin: 0 0 10px;
    }

    .mo-renew .mo-philo__pair {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mo-renew .mo-philo__img {
        border-radius: var(--mo-r-lg);
    }

    .mo-renew .mo-philo__cap {
        bottom: 35px;
        font-size: var(--mo-fs-body-sm);
    }

    /* BAND */
    .mo-renew .mo-band {
        margin-top: 100px;
    }

    .mo-renew .mo-band__nav {
        display: none;
    }

    /* PROOF: 1단 스택 */
    .mo-renew .mo-proof {
        width: 100%;
        max-width: none;
        margin-top: 100px;
        padding: 0 35px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* BIGIMG */
    .mo-renew .mo-bigimg {
        width: 100%;
        max-width: none;
        margin-top: 100px;
        padding: 0 20px;
    }

    .mo-renew .mo-bigimg__wrap {
        border-radius: var(--mo-r-lg);
    }

    .mo-renew .mo-bigimg__logo {
        width: 170px;
        top: 58%;
    }

    /* STATS: 세로 스택 */
    .mo-renew .mo-stats {
        margin-top: 90px;
    }

    .mo-renew .mo-stats__row {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .mo-renew .mo-stats__num {
        font-size: 35px;
        line-height: 1;
        margin-bottom: 8px;
    }

    .mo-renew .mo-stats__label {
        font-size: 17px;
    }

    /* BA 하단 (맞춤형 시술) — Figma MO: before|after 한 카드 ~300폭(+다음 peek),
       제목은 2줄 + 화살표 아래줄(가로 좁아 3줄 깨짐 방지로 헤드 세로 스택) */
    .mo-renew .mo-main-ba .mo-ba__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 24px;
    }

    .mo-renew .mo-main-ba .mo-ba__nav {
        align-self: flex-end;
    }

    .mo-renew .mo-main-ba .swiper-slide.mo-ba__slide {
        width: 300px;
        max-width: 80vw;
    }

    .mo-renew .mo-main-ba .mo-ba__img-wrap {
        /* before|after 합성 비율(PC 490x410 ≈ MO 300x250) 그대로 노출 */
        aspect-ratio: 300 / 250;
    }
}

/* ============================================================
   섹션 간 여백은 스페이서(widgets/spacer)가 전담 → 섹션 자체 top 마진 제거.
   (파일 맨 끝 = 위 PC 규칙 + MO @media 보다 뒤 → 동일 특이도에서 항상 우선)
   ============================================================ */
.mo-renew .mo-lineup,
.mo-renew .mo-devices,
.mo-renew .mo-philo,
.mo-renew .mo-band,
.mo-renew .mo-proof,
.mo-renew .mo-bigimg,
.mo-renew .mo-stats,
.mo-renew .mo-main-ba {
    margin-top: 0;
}