/* ============================================================
   v25.css — aroom.beauty(アルム) 스타일 스킨 (리뷰티 퍼플)
   - v2.css / v2-fallback.css 다음에 로드된다 (front_v25/master.php).
   - body class="v2-body v25-body" — 전역 오버라이드는 .v25-body 스코프,
     .v25-* 컴포넌트 클래스는 프리픽스 불필요.
   - 레이아웃/UX는 aroom.beauty 실측(Next.js CSS 번들 4개 + 페이지/
     레이아웃 JS 청크의 className·수치 관찰값):
     · 페이지 기본 배경 아이보리 #FBF8F5(lightBrown), 섹션은 카드가
       아닌 "배경 밴드"(흰/#F2F2F2/#F4F1F1/모브)를 교차시켜 구분
     · 홈 콘텐츠 섹션 max-w 1000px / 상세·폴백 = 448px 앱형 중앙
       컬럼(max-w-md) — 와이드·앱형 비대칭 프레임
     · "노 라운드" 언어: 카드 직각 + shadow-md(0 2px 6px
       rgba(0,0,0,.15))만. 라운드는 히어로 이미지(8px)·모달과
       알약 CTA(rounded-full)에만 허용
     · 2단 헤딩(TitleSet): 영문 세리프 디스플레이 22px→md 42px +
       일문(→현지어) 소제목 12→18px, 중앙 정렬 — 패션 매거진 문법
     · 히어로: 16:9 centerMode 양옆 peek + 흰 반투명 필 캡슐 도트
       (rgba(255,255,255,.9) radius 24px 안에 8px 원형 도트)
     · 검색 밴드: 모브 배경 + 흰 48px 직각 셀렉트 + 부위 원형
       아이콘 8개 그리드(4열×2행)
     · 커스텀 타이포 스케일: xs 10 / sm 12 / base 14 / md 16 /
       lg 18 / xl 20, line-height 1.4
     · 모바일 <992px: 하단 고정 5탭바(fixed bottom z-40, 24px
       아이콘 + 10px 라벨) + 좌측 absolute 햄버거 + 중앙 로고
     · 푸터: #898989 회색 밴드 + 흰 12/14px + 소셜 원형 #9C9C9C
   - 브랜드: aroom 와인/딥 마젠타 #8C1454(primary)·#901351(accent)·
     #7B165A(활성 도트)·#9B6275(ghost) 자리는 전부 리뷰티 퍼플
     (#6010A0, 그라데이션 #6010A0→#8A2BD9→#B368F0, 틴트 #F2E8FB/
     #F9F4FE) 통일. 모브 밴드 #B8A0A2는 퍼플 쪽으로 회전한 #B4A4BD.
     뉴트럴 무드 원본 유지: 아이보리 #FBF8F5(보더 #F2E9DF), 본문
     #4E5156, 브라운 #6A5052, 그레이 #848992/#DFE2E8/#F8F9FA,
     밴드 #F2F2F2/#F4F1F1, 비활성 #949497, 에러 #E01E5A,
     푸터 #898989/#9C9C9C, 비활성 도트 #D9D9D9.
   - 폰트: 본문 = 사이트 기본 Pretendard(aroom 히라기노 셀프호스팅
     자리), 세리프 디스플레이 = Playfair Display(aroom hunter otf
     자리 — 라이선스상 카피 불가, 구글폰트 대체).
   ============================================================ */

/* ------------------------------------------------------------
   1. 디자인 토큰 (aroom 실측 → 퍼플 매핑)
   ------------------------------------------------------------ */
:root {
    /* 골격 폭 (aroom 실측: 홈 섹션 1000px / 헤더·푸터 내부 1500px / 상세 앱 컬럼 448px / 검색 폼 640px) */
    --v25-width: 1000px;
    --v25-wide: 1500px;
    --v25-col: 448px;

    /* 브랜드 퍼플 (aroom #8C1454/#901351/#7B165A 자리 통합) */
    --v25-brand: #6010A0;
    --v25-brand-strong: #8A2BD9;
    --v25-brand-deep: #480C78;          /* hover (aroom primaryHover 자리) */
    --v25-brand-bg: #F2E8FB;            /* aroom primaryLight #EEDEE6 자리 */
    --v25-brand-bg-soft: #F9F4FE;       /* aroom new-primaryMidLight #F4E8EE 자리 */
    --v25-gradient: linear-gradient(90deg, #6010A0, #8A2BD9, #B368F0);
    --v25-ghost: #8E6FAE;               /* aroom primaryDark #9B6275(ghost 보더/텍스트) 자리 */

    /* 모브 밴드 (aroom new-primaryMidDark #B8A0A2 로즈 그레이 → 퍼플 회전) */
    --v25-mauve: #B4A4BD;

    /* 뉴트럴 무드 (aroom 실측 원본 유지) */
    --v25-ivory: #FBF8F5;               /* lightBrown — 페이지 기본 배경 */
    --v25-ivory-line: #F2E9DF;          /* lightBrown 보더 */
    --v25-band-gray: #F2F2F2;           /* 인기시술 밴드 (new-primaryLight) */
    --v25-mist: #F4F1F1;                /* 칼럼 밴드 (midGray) */
    --v25-ink: #4E5156;                 /* 본문 (body 기본색) */
    --v25-brown: #6A5052;               /* 후기 메타 브라운 */
    --v25-gray-text: #848992;           /* 가격/보조 텍스트 (lightGray text) */
    --v25-gray-line: #DFE2E8;           /* lightGray border */
    --v25-gray-bg: #F8F9FA;             /* lightGray bg */
    --v25-disabled: #949497;
    --v25-error: #E01E5A;
    --v25-footer: #898989;
    --v25-social: #9C9C9C;
    --v25-dot: #D9D9D9;                 /* 캐러셀 비활성 도트 */

    /* 그림자 (aroom shadow-md 실측 — 카드는 이것 하나만) */
    --v25-shadow: 0px 2px 6px rgba(0, 0, 0, .15);

    /* 폰트 */
    --v25-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
    --v25-serif: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, 'Times New Roman', serif;

    /* 탭바 높이 (모바일 하단 고정) */
    --v25-tabbar-h: 58px;

    /* z-index 층 */
    --v25-z-tabbar: 1040;
    --v25-z-scrim: 1050;
    --v25-z-drawer: 1060;
}

/* ------------------------------------------------------------
   2. 베이스 (아이보리 캔버스 + 커스텀 타이포 스케일 base 14px)
   ------------------------------------------------------------ */
.v25-body {
    background: var(--v25-ivory);
    color: var(--v25-ink);
    font-family: var(--v25-font);
    font-size: 14px;                    /* aroom text-base=14px 실측 */
    line-height: 1.4;                   /* aroom line-height 1.4 */
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

/* v2.css의 616px 앱 프레임 가정 해제: 폴백 뷰가 v25 컬럼에서 렌더링 */
.v25-body .v2-main {
    flex: none;
}

/* 스크롤바 숨김 가로 스크롤 (카드 캐러셀/칩 행용) */
.v25-scroll-x {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.v25-scroll-x::-webkit-scrollbar {
    display: none;
}

/* ------------------------------------------------------------
   3. 헤더 (aroom 실측: 비고정, 흰 배경 p-2, 데스크톱 = 햄버거 +
      2줄 로고 + 텍스트 내비(h36, 활성 border-b) + 알약 검색 CTA /
      모바일 = absolute 햄버거 + 중앙 로고)
   ------------------------------------------------------------ */
.v25-header {
    background: #fff;
    border-bottom: 1px solid var(--v25-ivory-line);
    padding: 8px 0;                     /* aroom p-2 래퍼 */
}

.v25-header-in {
    max-width: var(--v25-wide);         /* aroom lg:max-w-[1500px] */
    margin: 0 auto;
    padding: 0 20px;                    /* aroom px-5 */
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    min-height: 52px;
}

.v25-burger {
    width: 48px;                        /* aroom 햄버거 48×48 */
    height: 48px;
    flex: none;
    border: 0;
    background: none;
    color: var(--v25-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.v25-burger svg {
    width: 26px;
    height: 26px;
}

/* 2줄 로고 블록 (aroom: 태그라인 10px primary + 워드마크) */
.v25-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-decoration: none;
    min-width: 0;
}

.v25-logo-tag {
    font-size: 11px;                    /* aroom 태그라인 10→14px */
    font-weight: 600;
    color: var(--v25-brand);
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v25-logo-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v25-logo-mark {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.v25-logo-word {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.2px;
    background: var(--v25-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

/* 데스크톱 텍스트 내비 (aroom: text-primary font-bold text-base h-36px, 활성 border-b border-primary) */
.v25-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

.v25-nav-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    font-size: 14px;
    font-weight: 700;
    color: var(--v25-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}

.v25-nav-link:hover {
    color: var(--v25-brand-deep);
}

.v25-nav-link.active {
    border-bottom-color: var(--v25-brand);
}

/* 알약 검색 CTA (aroom メニュー検索: px-6 py-2 rounded-full bg-primary — 사이트 유일의 라운드 버튼) */
.v25-pill-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: 0;
    border-radius: 9999px;
    background: var(--v25-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    transition: background .15s;
}

.v25-pill-cta:hover {
    background: var(--v25-brand-deep);
}

.v25-pill-cta svg {
    width: 16px;
    height: 16px;
}

/* 모바일 돋보기 (데스크톱에선 숨김) */
.v25-msearch {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--v25-brand);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.v25-msearch svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 991.98px) {
    .v25-nav,
    .v25-pill-cta {
        display: none;
    }

    .v25-msearch {
        display: flex;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* aroom 모바일: 좌측 absolute 햄버거 + 중앙 2줄 로고 */
    .v25-burger {
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
    }

    .v25-header-in {
        justify-content: center;
        padding: 0 56px;
    }

    .v25-logo {
        align-items: center;
    }

    .v25-logo-tag {
        font-size: 10px;                /* aroom 모바일 태그라인 10px */
        max-width: 220px;
    }

    .v25-logo-word {
        font-size: 17px;
    }
}

/* ------------------------------------------------------------
   4. 사이드 드로어 (aroom 실측: 오버레이 bg-black/30 z-50 +
      패널 w-70vw max-w-300px bg-white p-4 fixed h-full transition)
   ------------------------------------------------------------ */
.v25-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    z-index: var(--v25-z-scrim);
}

.v25-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 70vw;
    max-width: 300px;
    background: #fff;
    z-index: var(--v25-z-drawer);
    padding: 16px;
    transform: translateX(-105%);
    transition: transform .4s;
    overflow-y: auto;
}

.v25-drawer.open {
    transform: translateX(0);
    box-shadow: 0 0 24px rgba(0, 0, 0, .18);
}

.v25-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.v25-drawer-close {
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    background: none;
    color: var(--v25-ink);
    font-size: 18px;
    cursor: pointer;
}

.v25-drawer-sec {
    display: flex;
    flex-direction: column;
}

/* 드로어 링크 (aroom: body14 primary색) */
.v25-drawer-link {
    display: block;
    padding: 11px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--v25-brand);
    text-decoration: none;
}

.v25-drawer-link:hover {
    color: var(--v25-brand-deep);
    background: var(--v25-brand-bg-soft);
}

.v25-drawer-link.active {
    background: var(--v25-brand-bg);
}

.v25-drawer-link-sub {
    font-weight: 400;
    color: var(--v25-ink);
}

.v25-drawer-div {
    border: 0;
    border-top: 1px solid var(--v25-ivory-line);
    margin: 10px 0;
    opacity: 1;
}

/* ------------------------------------------------------------
   5. 모바일 하단 고정 탭바 (aroom 실측: flex justify-around
      bg-white py-2 fixed bottom-0 z-40, 24px 아이콘 + 10px 라벨,
      활성 text-primary font-bold)
   ------------------------------------------------------------ */
.v25-tabbar {
    display: none;
}

@media (max-width: 991.98px) {
    .v25-tabbar {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--v25-z-tabbar);
        background: #fff;
        border-top: 1px solid var(--v25-ivory-line);
        padding: 8px 0 calc(6px + env(safe-area-inset-bottom));
    }

    .v25-tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        flex: 1;
        min-width: 0;
        color: var(--v25-disabled);
        text-decoration: none;
    }

    .v25-tabbar-item i {
        font-size: 21px;                /* aroom 24px 아이콘 자리 */
        line-height: 1;
    }

    .v25-tabbar-item span {
        font-size: 10px;                /* aroom 10px 라벨 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .v25-tabbar-item.active {
        color: var(--v25-brand);
        font-weight: 700;
    }
}

/* ------------------------------------------------------------
   6. 콘텐츠 셸 + 폴백 앱 컬럼 (aroom 비대칭 프레임:
      네이티브 홈 = 풀폭 밴드 + 1000px 섹션 / 폴백 = 448px 흰 컬럼)
   ------------------------------------------------------------ */
.v25-main {
    width: 100%;
    min-height: 60vh;
    padding: 0 0 64px;
}

/* 폴백 v2/v1 뷰: aroom 상세 max-w-md(448px) 앱형 흰 중앙 컬럼 재현 */
.v25-fallback {
    max-width: var(--v25-col);
    margin: 0 auto;
    background: #fff;
    min-height: 70vh;
    padding-bottom: 32px;
}

@media (min-width: 576px) {
    .v25-fallback {
        border-left: 1px solid var(--v25-ivory-line);
        border-right: 1px solid var(--v25-ivory-line);
    }
}

/* ------------------------------------------------------------
   7. 2단 헤딩 TitleSet (aroom 시그니처: 중앙 정렬, 영문 세리프
      22px→md 42px + 현지어 소제목 12→18px 굵게)
   ------------------------------------------------------------ */
.v25-titleset {
    text-align: center;
    margin-bottom: 20px;
}

.v25-title-en {
    display: block;
    font-family: var(--v25-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: var(--v25-brand);
    letter-spacing: .5px;
}

.v25-title-sub {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--v25-ink);
}

/* 모브 밴드 위에서는 흰색 (aroom Select Menu 밴드 실측) */
.v25-band-mauve .v25-title-en,
.v25-band-mauve .v25-title-sub {
    color: #fff;
}

/* 세리프 대형 링크 (aroom "Read More": 세리프 22/42px + border-b) */
.v25-read-more {
    display: inline-block;
    font-family: var(--v25-serif);
    font-size: 22px;
    color: var(--v25-brand);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.v25-read-more:hover {
    color: var(--v25-brand-deep);
}

@media (min-width: 768px) {
    .v25-title-en {
        font-size: 42px;                /* aroom md 42px 점프 */
    }

    .v25-title-sub {
        font-size: 18px;
    }

    .v25-read-more {
        font-size: 42px;
    }
}

/* ------------------------------------------------------------
   8. 섹션 배경 밴드 (aroom: 카드 대신 풀폭 배경 밴드 교차로
      섹션 구분 — 아이보리/모브/흰색/#F2F2F2/#F4F1F1)
   ------------------------------------------------------------ */
.v25-band {
    padding: 36px 16px;
}

.v25-band-in {
    max-width: var(--v25-width);        /* aroom 홈 섹션 max-w-[1000px] */
    margin: 0 auto;
}

.v25-band-white { background: #fff; }
.v25-band-ivory { background: var(--v25-ivory); }
.v25-band-gray  { background: var(--v25-band-gray); }
.v25-band-mist  { background: var(--v25-mist); }
.v25-band-mauve { background: var(--v25-mauve); }

/* bg 로고 워터마크 (aroom bg_logo.png opacity-10 하단 중앙 500px 재현 — /logo.png) */
.v25-watermark {
    position: relative;
}

.v25-watermark::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 320px;
    height: 160px;
    background: url('/logo.png') center bottom / contain no-repeat;
    opacity: .07;
    pointer-events: none;
}

.v25-watermark > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .v25-band {
        padding: 56px 24px;
    }
}

/* ------------------------------------------------------------
   9. 히어로 캐러셀 (aroom 실측: 16:9 centerMode 양옆 peek +
      rounded-lg 8px + autoplay 3s + 흰 반투명 필 캡슐 도트)
   ------------------------------------------------------------ */
.v25-hero {
    position: relative;
    padding: 16px 0 8px;
    overflow: hidden;
}

.v25-hero .swiper-slide {
    width: min(92vw, 960px);            /* centerPadding 20→200px 재현: 양옆 peek */
}

.v25-hero-card {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 8px;                 /* aroom rounded-lg — 히어로만 라운드 허용 */
    overflow: hidden;
    background: var(--v25-band-gray) center / cover no-repeat;
    position: relative;
}

.v25-hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 비활성 슬라이드 살짝 딤 (peek 슬라이드 구분) */
.v25-hero .swiper-slide:not(.swiper-slide-active) .v25-hero-card {
    opacity: .85;
}

/* 캡슐 도트 (aroom 실측: 흰 반투명 필 radius 24px padding 8px 16px 안에 8px 원형 도트, 배너 하단 10% 부유) */
.v25-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .9);
    border-radius: 24px;
    padding: 8px 16px;
    width: auto;
}

.v25-hero-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v25-dot);
    opacity: 1;
    margin: 0;
}

.v25-hero-dots .swiper-pagination-bullet-active {
    background: var(--v25-brand);       /* aroom #7B165A 자리 → 퍼플 */
}

/* 히어로 화살표 (aroom 좌우 화살표) */
.v25-hero-prev,
.v25-hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--v25-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--v25-shadow);
}

.v25-hero-prev { left: 12px; }
.v25-hero-next { right: 12px; }

@media (max-width: 767.98px) {
    .v25-hero-prev,
    .v25-hero-next {
        display: none;
    }
}

/* ------------------------------------------------------------
   10. 검색 밴드 컴포넌트 (aroom #select-menu 실측: 모브 밴드 안
       흰 아이콘+세리프 라벨, 흰 48px 직각 셀렉트, 검색 버튼
       max-w 343px, 부위 원형 아이콘 4열×2행)
   ------------------------------------------------------------ */
.v25-search-form {
    max-width: 640px;                   /* aroom 검색 폼 max-w-[640px] */
    margin: 0 auto;
}

.v25-field {
    margin-bottom: 14px;
}

.v25-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-family: var(--v25-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.v25-field-label i {
    font-size: 18px;                    /* aroom 흰 아이콘 20px 자리 */
}

.v25-select {
    display: block;
    width: 100%;
    height: 48px;                       /* aroom bg-white p-3 h-48 직각 */
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--v25-ink);
    font-size: 14px;
    appearance: auto;
}

.v25-search-submit {
    display: block;
    width: 100%;
    max-width: 343px;                   /* aroom 検索する max-w-[343px] */
    margin: 18px auto 0;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: var(--v25-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background .15s;
}

.v25-search-submit:hover {
    background: var(--v25-brand-deep);
}

/* 부위 원형 아이콘 그리드 (aroom 悩みの部位: w-3/12 4열×2행, 아이콘 55/72px, 흰 라벨) */
.v25-parts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 8px;
    max-width: 640px;
    margin: 0 auto;
}

.v25-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}

.v25-part-ico {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    color: var(--v25-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: var(--v25-shadow);
    transition: transform .15s;
}

.v25-part:hover .v25-part-ico {
    transform: translateY(-2px);
}

.v25-part-label {
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .v25-part-ico {
        width: 72px;                    /* aroom md 72px */
        height: 72px;
        font-size: 30px;
    }

    .v25-parts {
        grid-template-columns: repeat(8, 1fr);  /* 데스크톱 한 줄 8개 */
        max-width: var(--v25-width);
    }
}

/* ------------------------------------------------------------
   11. 카드 캐러셀 행 (aroom: flex-[0_0_30%] peek 슬라이드 —
       가로 스크롤 + 다음 카드 살짝 보임)
   ------------------------------------------------------------ */
.v25-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 4px 14px;              /* 그림자 잘림 방지 */
    scroll-snap-type: x proximity;
}

.v25-row::-webkit-scrollbar {
    display: none;
}

.v25-row > * {
    flex: none;
    scroll-snap-align: start;
}

/* 서브섹션 헤드 (aroom History: primary 볼드 h3 + もっと見る) */
.v25-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.v25-row-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--v25-brand);
    margin: 0;
}

.v25-row-more {
    font-size: 12px;
    color: var(--v25-ink);
    text-decoration: none;
    white-space: nowrap;
}

.v25-row-more:hover {
    color: var(--v25-brand);
}

/* ------------------------------------------------------------
   12. 시술 메뉴 카드 (aroom 실측: w 290→324px, 이미지 h 163→
       182px 직각, 본문 shadow-md p-2: 클리닉 12/16 → 메뉴
       14/18 bold 2줄 → 가격 16px #848992 → 우하단 詳細 10px)
   ------------------------------------------------------------ */
.v25-mcard {
    display: block;
    width: 290px;
    background: #fff;
    box-shadow: var(--v25-shadow);      /* 보더/라운드 없음 — 그림자만 */
    text-decoration: none;
    color: inherit;
}

.v25-mcard-img {
    display: block;
    width: 100%;
    height: 163px;
    object-fit: cover;
    background: var(--v25-band-gray);
}

.v25-mcard-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v25-mcard-clinic {
    font-size: 12px;
    color: var(--v25-ink);
}

.v25-mcard-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--v25-ink);
    line-height: 1.4;
}

.v25-mcard-price {
    font-size: 16px;
    color: var(--v25-gray-text);        /* aroom 가격 #848992 */
}

.v25-mcard-more {
    align-self: flex-end;
    font-size: 10px;
    color: var(--v25-gray-text);
}

@media (min-width: 768px) {
    .v25-mcard { width: 324px; }
    .v25-mcard-img { height: 182px; }
    .v25-mcard-clinic { font-size: 16px; }
    .v25-mcard-title { font-size: 18px; }
}

/* ------------------------------------------------------------
   13. 후기 카드 (aroom 실측: 고정 h192 w282→324 p-2 흰 배경
       shadow relative — 별점+인증배지+하트 / 3줄 클램프 /
       하단 absolute 메타(시술명 브라운 + 날짜│성별│연령))
   ------------------------------------------------------------ */
.v25-rvcard {
    width: 282px;
    height: 192px;
    background: #fff;
    box-shadow: var(--v25-shadow);
    padding: 8px;
    position: relative;
}

.v25-rvcard-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.v25-rvcard-stars {
    color: #F5A623;
    font-size: 13px;
}

.v25-rvcard-badge {
    font-size: 10px;
    color: var(--v25-brand);
    background: var(--v25-brand-bg);
    padding: 2px 6px;
}

.v25-rvcard-heart {
    margin-left: auto;
    color: var(--v25-gray-line);
    font-size: 15px;
}

.v25-rvcard-text {
    font-size: 14px;
    color: var(--v25-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.v25-rvcard-meta {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
}

.v25-rvcard-menus {
    display: block;
    font-size: 12px;
    color: var(--v25-brown);            /* aroom #6A5052 브라운 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v25-rvcard-sub {
    display: block;
    font-size: 12px;
    color: var(--v25-gray-text);
    margin-top: 2px;
}

.v25-rvcard-sub span + span::before {
    content: '│';
    margin: 0 4px;
    color: var(--v25-gray-line);
}

@media (min-width: 768px) {
    .v25-rvcard { width: 324px; }
}

/* ------------------------------------------------------------
   14. 상담검색(Special) 카드 (aroom 실측: 2열→md 4열 그리드,
       320×180 이미지 + primary 볼드 1줄 헤더 + 2줄 본문, 플랫)
   ------------------------------------------------------------ */
.v25-spgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
}

.v25-spcard {
    display: block;
    text-decoration: none;
}

.v25-spcard-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;               /* aroom 320×180 */
    object-fit: cover;
    background: var(--v25-band-gray);
}

.v25-spcard-title {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--v25-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v25-spcard-desc {
    display: -webkit-box;
    margin-top: 3px;
    font-size: 10px;
    color: var(--v25-ink);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .v25-spgrid { grid-template-columns: repeat(4, 1fr); }
    .v25-spcard-title { font-size: 16px; }
    .v25-spcard-desc { font-size: 14px; }
}

/* ------------------------------------------------------------
   15. 칼럼/매거진 카드 (aroom Beauty Column 실측: 썸네일 +
       날짜 YYYY.MM.DD + 제목 2줄 볼드)
   ------------------------------------------------------------ */
.v25-colcard {
    display: block;
    width: 290px;
    text-decoration: none;
    background: #fff;
    box-shadow: var(--v25-shadow);
}

.v25-colcard-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--v25-band-gray);
}

.v25-colcard-body {
    padding: 8px;
}

.v25-colcard-date {
    font-size: 12px;
    color: var(--v25-gray-text);
}

.v25-colcard-title {
    display: -webkit-box;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--v25-ink);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .v25-colcard { width: 324px; }
}

/* ------------------------------------------------------------
   16. 버튼 시스템 (aroom 실측: 전부 직각 w-full py-2 —
       primary / secondary(흰+primary 보더) / ghost(#9B6275
       자리 → 뮤트 퍼플) / disabled #949497)
   ------------------------------------------------------------ */
.v25-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--v25-brand);
    border-radius: 0;                   /* 직각 */
    background: var(--v25-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}

.v25-btn:hover {
    background: var(--v25-brand-deep);
    border-color: var(--v25-brand-deep);
    color: #fff;
}

.v25-btn-outline {
    background: #fff;
    color: var(--v25-brand);
}

.v25-btn-outline:hover {
    background: var(--v25-brand-bg-soft);
    color: var(--v25-brand);
    border-color: var(--v25-brand);
}

.v25-btn-ghost {
    background: #fff;
    border-color: var(--v25-ghost);
    color: var(--v25-ghost);
}

.v25-btn-ghost:hover {
    background: var(--v25-brand-bg-soft);
    border-color: var(--v25-ghost);
    color: var(--v25-ghost);
}

.v25-btn-disabled,
.v25-btn:disabled {
    background: var(--v25-disabled);
    border-color: var(--v25-disabled);
    color: #fff;
    pointer-events: none;
}

/* 태그 칩 (aroom 클리닉 상세 태그: inline-block mr-2 mb-2 — 日本語対応可 등) */
.v25-tagchip {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 4px 10px;
    background: var(--v25-brand-bg);
    color: var(--v25-brand);
    font-size: 12px;
}

/* 4px 단위 스페이서 (aroom Spacer 컴포넌트 재현) */
.v25-sp-2 { height: 8px; }
.v25-sp-4 { height: 16px; }
.v25-sp-6 { height: 24px; }
.v25-sp-8 { height: 32px; }

/* ------------------------------------------------------------
   17. 푸터 (aroom 실측: bg #898989 px-6 py-10, 흰 12/14px 4줄
       + 소셜 원형 40/48px #9C9C9C + 카피라이트 10px 중앙,
       모바일은 탭바 여유분 pb)
   ------------------------------------------------------------ */
.v25-footer {
    background: var(--v25-footer);
    color: #fff;
    padding: 40px 24px 28px;
}

.v25-footer-in {
    max-width: var(--v25-width);
    margin: 0 auto;
}

.v25-footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin-bottom: 20px;
}

.v25-footer-menu a {
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 0 10px;
    border-right: 1px solid rgba(255, 255, 255, .35);
    line-height: 1.2;
}

.v25-footer-menu a:first-child {
    padding-left: 0;
}

.v25-footer-menu a:last-child {
    border-right: 0;
}

.v25-footer-menu a:hover {
    text-decoration: underline;
    color: #fff;
}

.v25-footer-cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.v25-footer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.6;
}

.v25-footer-name {
    font-size: 14px;
    font-weight: 700;
}

.v25-footer-notice {
    opacity: .85;
}

/* 소셜 원형 버튼 (aroom: 40→48px #9C9C9C 원 + 흰 24px 아이콘) */
.v25-social {
    display: flex;
    gap: 10px;
}

.v25-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--v25-social);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: background .15s;
}

.v25-social-btn:hover {
    background: var(--v25-brand);
    color: #fff;
}

.v25-footer-copy {
    margin: 24px 0 0;
    text-align: center;
    font-size: 10px;                    /* aroom 카피라이트 10px 중앙 */
    color: rgba(255, 255, 255, .9);
}

@media (min-width: 768px) {
    .v25-social-btn {
        width: 48px;
        height: 48px;
        font-size: 21px;
    }

    .v25-footer-info {
        font-size: 14px;
    }
}

@media (max-width: 991.98px) {
    /* 하단 탭바 여유분 (aroom pb-20 재현) */
    .v25-footer {
        padding-bottom: calc(28px + var(--v25-tabbar-h) + env(safe-area-inset-bottom));
    }
}

/* ------------------------------------------------------------
   18. 폴백 v2 컴포넌트 리톤 (.v25-body 스코프 — aroom 톤:
       직각 + shadow-md, 퍼플 활성, 아이보리 캔버스 위 흰 컬럼)
   ------------------------------------------------------------ */

/* 섹션 타이틀: 자간 0, 잉크 톤 */
.v25-body .v2-section-title,
.v25-body .v2-page-title {
    color: var(--v25-ink);
    letter-spacing: 0;
}

.v25-body .v2-more {
    color: var(--v25-brand);
}

/* 칩: 직각 (aroom 노 라운드), 활성 = 퍼플 */
.v25-body .v2-chip {
    border-radius: 0;
    border-color: var(--v25-gray-line);
    background: #fff;
}

.v25-body .v2-chip:hover {
    border-color: var(--v25-brand);
    color: var(--v25-brand);
}

.v25-body .v2-chip.active {
    background: var(--v25-brand);
    border-color: var(--v25-brand);
    color: #fff;
}

/* 탭: 활성 퍼플 언더라인 (aroom 상세 3탭 재현) */
.v25-body .v2-tab.active {
    color: var(--v25-brand);
}

.v25-body .v2-tab.active::after {
    background: var(--v25-brand);
}

/* 카드류: 라운드 제거 + shadow-md (aroom "노 라운드" 언어) */
.v25-body .v2-hcard-logo,
.v25-body .v2-ecard-thumb,
.v25-body .v2-acard-thumb,
.v25-body .v2-bacard-img,
.v25-body .v2-rcard-imgs img {
    border-radius: 0;
}

.v25-body .v2-hcard-logo {
    border-color: var(--v25-ivory-line);
}

/* 아바타/카테고리 아이콘: 원형 유지하되 aroom 흰 원 + 그림자 */
.v25-body .v2-cat-ico {
    background: #fff;
    color: var(--v25-brand);
    box-shadow: var(--v25-shadow);
}

.v25-body .v2-tag {
    border-radius: 0;
    background: var(--v25-gray-bg);
}

.v25-body .v2-chip-mini {
    color: var(--v25-brand);
}

.v25-body .v2-badge-cert {
    background: var(--v25-brand-bg);
    color: var(--v25-brand);
    border-radius: 0;
}

/* 가격 강조: 퍼플 */
.v25-body .v2-price-discount {
    color: var(--v25-brand);
}

/* 버튼: 직각 + 퍼플 */
.v25-body .v2-btn,
.v25-body .v2-btn-brand,
.v25-body .v2-btn-outline,
.v25-body .v2-btn-sm {
    border-radius: 0;
}

.v25-body .v2-btn-brand {
    background: var(--v25-brand);
}

.v25-body .v2-btn-brand:hover {
    background: var(--v25-brand-deep);
}

.v25-body .v2-btn-outline {
    border-color: var(--v25-gray-line);
}

/* 검색 필: 알약 유지 (aroom 유일의 라운드 CTA 문법과 일치) */
.v25-body .v2-search-pill {
    background: #fff;
    border: 1px solid var(--v25-ivory-line);
}

/* 히어로(폴백 홈): 라운드 8px 유지 — aroom 히어로만 라운드 허용 */
.v25-body .v2-hero-card {
    border-radius: 8px;
}

/* 빈 상태/보조 텍스트 */
.v25-body .v2-empty {
    color: var(--v25-disabled);
}

/* 페이지네이션: 현재 페이지 퍼플 직각 */
.v25-body .v2-pagination a,
.v25-body .v2-pagination span {
    border-radius: 0;
}

.v25-body .v2-pagination .active,
.v25-body .v2-pagination .current {
    background: var(--v25-brand);
    color: #fff;
}

/* 별점 그대로 (관용색), 링크 기본색만 퍼플 톤 */
.v25-body a {
    color: inherit;
}

.v25-body .v2-rcard-vendor {
    color: var(--v25-brand);
}

/* Bootstrap(폴백 v1 뷰) 최소 리톤: 프라이머리 버튼/링크 퍼플 + 직각 */
.v25-body .btn-primary {
    background: var(--v25-brand);
    border-color: var(--v25-brand);
    border-radius: 0;
}

.v25-body .btn-primary:hover {
    background: var(--v25-brand-deep);
    border-color: var(--v25-brand-deep);
}

.v25-body .btn-outline-primary {
    color: var(--v25-brand);
    border-color: var(--v25-brand);
    border-radius: 0;
}

.v25-body .btn-outline-primary:hover {
    background: var(--v25-brand);
    border-color: var(--v25-brand);
    color: #fff;
}

.v25-body .text-primary {
    color: var(--v25-brand) !important;
}

.v25-body .bg-primary {
    background-color: var(--v25-brand) !important;
}

.v25-body .card {
    border-radius: 0;
    border: 0;
    box-shadow: var(--v25-shadow);
}

/* ============================================================
   서브페이지(메인메뉴 목록) 폭 = 랜딩 홈 콘텐츠 폭(1000px) 정렬
   사용자 요청: 각 메인메뉴 페이지 폭을 홈 콘텐츠 폭과 동일하게.
   aroom 상세는 448px 앱컬럼 유지, 목록만 :has()로 1000px 확장 + 다열.
   ============================================================ */
.v25-body .v25-fallback:has(.v2-clinic-list),
.v25-body .v25-fallback:has(.v2-event-list),
.v25-body .v25-fallback:has(.v2-review-feed),
.v25-body .v25-fallback:has(.v2-ba-grid),
.v25-body .v25-fallback:has(.v2-yt-grid),
.v25-body .v25-fallback:has(.v2-mag-feature) {
    max-width: var(--v25-width);   /* 1000px = 홈 밴드 콘텐츠 폭 */
    padding-left: 16px;
    padding-right: 16px;
    background: transparent;        /* 밴드 톤 위 카드가 떠 보이게 */
    border-left: 0;
    border-right: 0;
}

@media (min-width: 768px) {
    /* 가로카드 리스트(clinic/event/review) → 2열 그리드로 폭 채움 */
    .v25-body .v2-clinic-list,
    .v25-body .v2-event-list,
    .v25-body .v2-review-feed {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        align-items: start;
    }
    /* 그리드 안 구분선(hr) 제거 → aroom 직각+그림자 카드로 구분 */
    .v25-body .v2-clinic-list > .v2-divider,
    .v25-body .v2-event-list > .v2-divider,
    .v25-body .v2-review-feed > .v2-divider {
        display: none;
    }
    .v25-body .v2-clinic-list > .v2-hcard,
    .v25-body .v2-event-list > .v2-ecard,
    .v25-body .v2-review-feed > .v2-rcard {
        background: #fff;
        box-shadow: var(--v25-shadow);   /* aroom: 라운드 없음, 그림자만 */
        padding: 14px;
    }
    .v25-body .v2-review-feed > .v2-rcard .v2-rcard-imgs {
        margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
    }
    /* 매거진: 기사 카드가 main 직속 → 폴백 main 직접 그리드화 */
    .v25-body .v25-fallback:has(.v2-mag-feature) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        align-items: start;
    }
    .v25-body .v25-fallback:has(.v2-mag-feature) > * { grid-column: 1 / -1; }
    .v25-body .v25-fallback:has(.v2-mag-feature) > .v2-acard {
        grid-column: auto;
        background: #fff;
        box-shadow: var(--v25-shadow);
    }
    .v25-body .v25-fallback:has(.v2-mag-feature) > .v2-divider { display: none; }
    .v25-body .v25-fallback:has(.v2-mag-feature) > .v2-mag-feature .v2-mag-feature-img {
        aspect-ratio: auto;
        height: 360px;
    }
}

@media (min-width: 1024px) {
    /* 전후사진 3열 / 유튜브 4열 포스터 그리드 */
    .v25-body .v2-ba-grid { grid-template-columns: repeat(3, 1fr); }
    .v25-body .v2-yt-grid { grid-template-columns: repeat(4, 1fr); }
}