/* ============================================================
   renew/price.css — 가격표 페이지 전용 스타일 (.mo-renew .mo-price 스코프)
   실측: Figma PC 6400:1130 (1920×5040) / MO 6400:3722 (390×4082)
   토큰: tokens.css(.mo-renew --mo-*). 폰트/색/라운드는 실측에 맞춰 고정.
   ⚠️ 클래스/구조는 page-price.js(탭 필터)와 결합 — 변경 시 동기화.
   ============================================================ */

/* body(.mo-renew) UA 기본 마진 제거 — 없으면 calc(100%-40) 가 8px*2 만큼 줄어
   MO 콘텐츠 폭이 350→334 로 클립됨(디자인 대조에서 확인). */
.mo-renew {
    margin: 0;
}

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

/* 콘텐츠 컬럼 960(좌우 480 센터) — Figma 콘텐츠 x480~1440 */
.mo-renew .mo-price__inner {
    width: var(--mo-content-w);
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

/* ---------- 헤더(중앙 정렬) ---------- */
/* Figma 타이틀 y252 → 고정 GNB(top15+58) 아래 여백 확보 (PNG 글리프 대조로 232 확정) */
.mo-renew .mo-price__head {
    padding-top: 252px;
    text-align: center;
}

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

/* 타이틀 y252 → 안내문 y317 (텍스트 top 델타 65, h2 라인박스 45) */
.mo-renew .mo-price__desc {
    margin: 20px 0 0;
    color: var(--mo-ink);
}

/* PC/MO 카피 토글(타이틀 1줄/2줄·안내문 2줄/3줄 실측 줄바꿈) */
.mo-renew .mo-price .mo-mo-only {
    display: none;
}

/* ---------- 카테고리 필터 탭(좌측 정렬) ---------- */
/* Figma 탭 y509, 첫 탭 x520 = 콘텐츠좌(480)+40, 탭 간격 30, fs15 */
.mo-renew .mo-price__tabs {
    display: flex;
    gap: 30px;
    margin-top: 130px;
    padding-left: 40px;
}

.mo-renew .mo-price__tab {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--mo-font);
    font-size: var(--mo-fs-point);
    /* 15px */
    line-height: 1;
    letter-spacing: var(--mo-tracking);
    color: var(--mo-line);
    /* 비활성 #cccccc */
}

.mo-renew .mo-price__tab.is-active {
    color: var(--mo-ink);
    /* 활성 #323232 */
}

/* ---------- 시술 그룹/행 ---------- */
/* Figma 첫 행 카드 y609 (PNG 대조로 탭↓ 85 확정) */
.mo-renew .mo-price__table {
    margin-top: 71px;
}

/* 그룹: 좌 그룹명 / 우 옵션 행(465). padding-left 40 → 그룹명 x520, 행 우측 정렬 x1440 */
.mo-renew .mo-price__group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 40px;
    margin-bottom: 70px;
    /* 그룹 간 = 마지막 카드↓ 다음 그룹 카드 70 */
}

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

/* 그룹명 fs17 w500. y624 vs 첫 카드 y609 → top 보정 15 */
.mo-renew .mo-price__gtitle {
    flex: 0 0 auto;
    margin: 15px 0 0;
    font-size: var(--mo-fs-body);
    /* 17px */
    line-height: 1.5;
    font-weight: var(--mo-w-medium);
    /* 500 */
    color: var(--mo-ink);
}

/* 옵션 행 카드 컬럼: 465 폭, 카드 사이 20 */
.mo-renew .mo-price__rows {
    flex: 0 0 auto;
    width: 465px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 행 카드 465×100 r35(실측, MO 도 35로 고정), 좌우 패딩 35 */
.mo-renew .mo-price__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    padding: 0 35px;
    background: var(--mo-white);
    border-radius: 35px;
}

.mo-renew .mo-price__option {
    font-size: var(--mo-fs-body);
    /* 17px */
    line-height: 1;
    font-weight: var(--mo-w-light);
    /* 350 */
    color: var(--mo-ink);
}

/* 가격: 정가(취소선·그레이) → 할인가(레드 볼드), 간격 10 */
.mo-renew .mo-price__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mo-renew .mo-price__list {
    font-size: 20px;
    line-height: 1;
    font-weight: var(--mo-w-medium);
    /* 500 */
    color: var(--mo-line);
    /* #cccccc */
    text-decoration: line-through;
}

.mo-renew .mo-price__sale {
    font-size: 20px;
    line-height: 1;
    font-weight: var(--mo-w-medium);
    /* 500 */
    color: var(--mo-red);
    /* #ff0000 */
}

/* 하단 우측 주석 fs15 #cccccc */
.mo-renew .mo-price__note {
    margin: -16px 0 0;
    padding: 0 20px 0 0;
    text-align: right;
    font-size: var(--mo-fs-point);
    /* 15px */
    line-height: 1;
    font-weight: var(--mo-w-regular);
    color: var(--mo-line);
}

/* ============================================================
   모바일 (≤768, 390 디자인 기준)
   Figma: 타이틀 y149 / 안내 y234 / 탭 y401 / 첫 카드 y515
   ============================================================ */
@media (max-width: 768px) {
    .mo-renew .mo-price .mo-pc-only {
        display: none;
    }

    .mo-renew .mo-price span.mo-mo-only {
        display: inline;
    }

    .mo-renew .mo-price p.mo-mo-only {
        display: block;
    }

    /* 타이틀 y149 (PNG 글리프 대조로 134 확정) */
    .mo-renew .mo-price__head {
        padding-top: 149px;
    }

    .mo-renew .mo-price__desc {
        margin-top: 15px;
    }

    /* 탭 y401(안내 끝↓ 80), 첫 탭 x35 = 콘텐츠좌(20)+15, 간격 20, 가로 스크롤 */
    .mo-renew .mo-price__tabs {
        gap: 20px;
        margin-top: 80px;
        padding-left: 15px;
        /* overflow-x: auto;*/
        white-space: nowrap;
    }

    /* 첫 카드 y515, 탭 끝↓ 약 96 → 그룹명 y475 기준 56 */
    .mo-renew .mo-price__table {
        margin-top: 56px;
    }

    /* 세로 스택: 그룹명 위 / 카드 아래(풀폭 350) */
    .mo-renew .mo-price__group {
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 70px;
        /* 그룹 간 누적 -2.5/그룹 보정(PNG 대조). 그룹내 간격은 불변. */
    }

    /* 그룹명 x35(콘텐츠좌 20+15), 카드 위 12 */
    .mo-renew .mo-price__gtitle {
        margin: 0 0 12px 15px;
        font-size: var(--mo-fs-body);
        /* 17px (PC=MO) */
    }

    .mo-renew .mo-price__rows {
        width: 100%;
        gap: 10px;
    }

    /* 카드 350×70, 좌우 패딩 25 */
    .mo-renew .mo-price__row {
        height: 70px;
        padding: 0 25px;
    }

    /* 옵션 fs15 */
    .mo-renew .mo-price__option {
        font-size: var(--mo-fs-body-sm);
        /* 15px */
    }

    /* 가격 fs17 */
    .mo-renew .mo-price__list,
    .mo-renew .mo-price__sale {
        font-size: var(--mo-fs-body);
        /* 17px */
    }
}