/* ============================================================
   v2-fallback.css — v2 앱 프레임(616px) 안에서 렌더링되는
   "v2 뷰가 없는 v1 폴백 페이지" 모바일 레이아웃 오버라이드.

   - master(front_v2)가 v2.css 다음에 로드한다.
   - 폴백 뷰의 인라인 <style>은 body 안에서 이 파일보다 나중에
     적용되므로, 여기서는 항상 더 높은 특이도(.v2-body 프리픽스)
     + 필요시 !important 로 이긴다.
   - 주 대상: /clinic/{id} (views/front/vendor/detail.php, km-* 크몽
     스타일). 해당 뷰의 @media(max-width:768px) 모바일 규칙을
     뷰포트 폭과 무관하게 재선언하는 방식.
   ============================================================ */

/* ------------------------------------------------------------
   1. 문서 레벨 — 폴백 뷰의 PC 강제폭 해제
   (detail.php: html,body{min-width:1320px!important; overflow:visible!important})
   :root(0,1,0) / body.v2-body(0,1,1) 특이도로 html/body(0,0,1)를 이김
   ------------------------------------------------------------ */
:root,
body.v2-body {
    min-width: 0 !important;
    overflow-x: clip !important; /* hidden은 sticky를 깨뜨리므로 clip */
    overflow-y: auto !important;
}

/* v1 헤더/푸터 잔재 컨테이너 고정폭 해제 (v2 레이아웃엔 없지만 안전망) */
.v2-body .header .container,
.v2-body .footer .container,
.v2-body .main-content .container {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* ------------------------------------------------------------
   2. Bootstrap 기본 col-N 복원 — 모바일 그리드 에뮬레이션
   v2.css가 모든 [class*="col-"]을 100%로 붕괴시키지만,
   접두사 없는 col-N(모바일 폭에서도 적용되는 클래스)은
   실제 모바일 뷰포트와 동일하게 원래 비율을 유지한다.
   (예: mypage 통계 타일 .col-4 → 33.33%)
   ------------------------------------------------------------ */
.v2-body .v2-main .row > .col-1  { width: 8.3333%; }
.v2-body .v2-main .row > .col-2  { width: 16.6667%; }
.v2-body .v2-main .row > .col-3  { width: 25%; }
.v2-body .v2-main .row > .col-4  { width: 33.3333%; }
.v2-body .v2-main .row > .col-5  { width: 41.6667%; }
.v2-body .v2-main .row > .col-6  { width: 50%; }
.v2-body .v2-main .row > .col-7  { width: 58.3333%; }
.v2-body .v2-main .row > .col-8  { width: 66.6667%; }
.v2-body .v2-main .row > .col-9  { width: 75%; }
.v2-body .v2-main .row > .col-10 { width: 83.3333%; }
.v2-body .v2-main .row > .col-11 { width: 91.6667%; }
.v2-body .v2-main .row > .col-12 { width: 100%; }
.v2-body .v2-main .row > .col-auto { width: auto; }

/* ------------------------------------------------------------
   3. 병원 상세 (km-vendor-page) — 컨테이너/기본 폭
   ------------------------------------------------------------ */
.v2-body .km-vendor-page {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    padding-bottom: 40px;
}

.v2-body .km-vendor-page .container {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* ------------------------------------------------------------
   4. 히어로 — 2컬럼 그리드(1fr 340px) → 1컬럼 스택(이미지 위)
   ------------------------------------------------------------ */
.v2-body .km-hero-wrap {
    min-width: 0 !important;
    overflow: hidden;
}

.v2-body .km-hero {
    display: flex !important;
    flex-direction: column-reverse;
    gap: 20px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 16px;
}

.v2-body .km-hero__content {
    padding: 16px 0;
    overflow: visible;
    word-break: keep-all;
}

.v2-body .km-hero__topbar {
    flex-wrap: wrap;
    gap: 8px;
}

.v2-body .km-hero__title {
    font-size: 18px;
}

.v2-body .km-hero__seller-card {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
}

.v2-body .km-hero__seller-btn {
    width: 100%;
    text-align: center;
    margin-top: 8px;
}

/* 갤러리: 340px 고정폭 → 프레임 100%, 우측 대기열 제거 */
.v2-body .km-hero__gallery {
    width: 100% !important;
    padding: 0;
}

.v2-body .km-hero__gallery-main-wrap {
    width: 100% !important;
    touch-action: pan-y pinch-zoom;
}

.v2-body .km-hero__gallery-queue {
    display: none !important;
}

.v2-body .km-hero__gallery-nav {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.v2-body .km-hero__gallery-nav--prev { left: 8px; }
.v2-body .km-hero__gallery-nav--next { right: 8px; }

/* ------------------------------------------------------------
   5. 본문 레이아웃 — 2컬럼(1fr 340px) → 1컬럼, 사이드바 인플로우
   ------------------------------------------------------------ */
.v2-body .km-layout {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    padding-top: 20px;
}

/* 사이드바: sticky/fixed 해제하고 본문 아래 일반 카드로 노출
   (뷰의 모바일 규칙이 fixed 하단바 + 카드 일부 숨김을 걸어도
   여기서 전부 복원 — v2 프레임에는 자체 하단 내비가 있음) */
.v2-body .km-sidebar {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
}

.v2-body .km-sidebar__inner {
    gap: 16px !important;
}

.v2-body .km-sidebar .km-price-card {
    display: block !important;
    border: 1px solid var(--v2-gray-150) !important;
    border-radius: var(--v2-radius-lg) !important;
    box-shadow: none !important;
}

.v2-body .km-sidebar .km-price-card__header,
.v2-body .km-sidebar .km-price-card__features {
    display: block !important;
}

.v2-body .km-sidebar .km-price-card__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 20px 24px 24px !important;
}

.v2-body .km-sidebar .km-btn--secondary,
.v2-body .km-sidebar .km-btn--outline {
    display: inline-flex !important;
}

.v2-body .km-sidebar .km-seller-mini { display: flex !important; }
.v2-body .km-sidebar .km-notice-box { display: flex !important; }

/* ------------------------------------------------------------
   6. 스티키 탭 내비 — v2 헤더(56px) 아래 정렬, 프레임 폭 가로 스크롤
   ------------------------------------------------------------ */
.v2-body .km-sticky-nav {
    top: 56px; /* v2-header 높이 */
    padding: 8px 16px;
    gap: 0;
    margin-left: -16px;
    margin-right: -16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.v2-body .km-sticky-nav__item {
    padding: 8px 12px;
    font-size: 13px;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   7. 섹션/카드류 — 뷰의 모바일(≤768px) 규칙 재선언
   ------------------------------------------------------------ */
.v2-body .km-content-section { padding: 24px 0; }
.v2-body .km-content-section__title { font-size: 18px; }

/* 최근 리뷰: AI 요약 420px 고정폭 → 세로 스택 */
.v2-body .km-recent-review-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.v2-body .km-recent-review__body {
    flex-direction: column;
    gap: 16px;
}

.v2-body .km-recent-review__summary {
    flex: none !important;
    width: 100%;
}

.v2-body .km-recent-review__carousel { width: 100%; }
.v2-body .km-recent-review__nav--next { right: -10px; }

/* 이벤트(포트폴리오) 그리드 3열 → 1열, 좌우로 튀어나온 화살표 숨김 */
.v2-body .km-portfolio-track {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 10px;
}

.v2-body .km-portfolio-nav { display: none !important; }

/* 시술 상품 2열 → 1열 세로 카드 */
.v2-body .km-products { grid-template-columns: 1fr !important; }

.v2-body .km-product-card { flex-direction: column; }

.v2-body .km-product-card__image {
    flex: none;
    width: 100%;
    height: 150px;
}

/* FAQ */
.v2-body .km-faq__question {
    padding: 14px 16px;
    font-size: 14px;
}

/* 전문가 카드 / 정책 */
.v2-body .km-expert-card__header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
}

.v2-body .km-expert-card__stats { justify-content: center; }

.v2-body .km-policy__item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
}

/* 리뷰 */
.v2-body .km-review-summary { padding: 20px; }
.v2-body .km-review-summary__number { font-size: 36px; }
.v2-body .km-review-item__header { flex-wrap: wrap; }

.v2-body .km-review-item__date {
    width: 100%;
    margin-top: 8px;
}

/* 정보 테이블 — 라벨/값 세로 스택 */
.v2-body .km-info-row { flex-direction: column; }

.v2-body .km-info-label {
    flex: none;
    width: 100%;
    padding: 10px 12px;
}

.v2-body .km-info-value { padding: 10px 12px; }

/* 전후사진 마키 카드 폭 (뷰 720px 규칙과 동일) */
.v2-body .km-ba-card { flex-basis: 240px; }

/* ------------------------------------------------------------
   8. v2 브랜드 톤 보정 — 크몽 teal/indigo 포인트 → 리뷰티 퍼플
   (색/여백 수준의 가벼운 보정만, 구조 리스킨 금지)
   ------------------------------------------------------------ */
.v2-body .km-btn--primary { background: var(--v2-brand); }
.v2-body .km-btn--primary:hover { background: var(--v2-brand-strong); }

.v2-body .km-hero__badge { background: var(--v2-brand); }
.v2-body .km-badge--premium { background: var(--v2-brand-gradient); }
.v2-body .km-verified-badge { color: var(--v2-brand); }

.v2-body .km-price-card__feature i { color: var(--v2-brand); }

.v2-body .km-prime-box {
    background: var(--v2-brand-bg-soft);
    border-color: var(--v2-brand-bg);
}
.v2-body .km-prime-box__badge { background: var(--v2-brand); }
.v2-body .km-prime-box__list i { color: var(--v2-brand); }

.v2-body .km-sticky-nav__item.active { background: var(--v2-brand); }

.v2-body .km-treatment-tab:hover {
    border-color: var(--v2-brand);
    color: var(--v2-brand);
}
.v2-body .km-treatment-tab.active {
    background: var(--v2-brand);
    border-color: var(--v2-brand);
}
.v2-body .km-treatment-subgroup-title { border-left-color: var(--v2-brand); }

.v2-body .km-gallery-tab:hover {
    border-color: var(--v2-brand);
    color: var(--v2-brand);
}
.v2-body .km-gallery__thumb.active { border-color: var(--v2-brand); }

.v2-body .km-doctor-card__specialty { color: var(--v2-brand); }

/* ------------------------------------------------------------
   9. 기타 폴백 페이지 (login / mypage / cart 등)
   - 그리드 붕괴/이미지 폭은 v2.css가 이미 처리.
   - v1 공통 포인트 컬러(--primary-color, 핑크 #e91e63)만
     브랜드 퍼플로 재매핑 → btn-primary/링크/탭 등 일괄 보정.
   ------------------------------------------------------------ */
.v2-body {
    --primary-color: var(--v2-brand);
    --primary-dark: var(--v2-brand-deep);
    --primary-light: var(--v2-brand-bg);
}