/* ============================================================
   배때지 V2 · 브라우저 호환 레이어 (fallback 전용)

   목적
     Chrome 에서 정상인 화면을 "기준"으로 두고,
     그 기능을 지원하지 않는 브라우저에서만 대체 규칙을 적용한다.

   Chrome 무영향 보장
     · 모든 대체 규칙은 @supports not (...) 안에 있다
       → Chrome 은 해당 기능을 지원하므로 블록 전체를 건너뛴다.
     · 예외는 -webkit- 접두어 추가뿐이며, 이는 표준 속성과 같은 값을
       한 줄 더 쓰는 것이라 렌더 결과가 달라지지 않는다.
     · JS 감지 클래스(html.no-flexgap 등)는 Chrome 에서 절대 붙지 않는다.

   이 파일은 마지막에 로드한다(다른 CSS 뒤에 와야 fallback 이 이긴다).
   ============================================================ */


/* ============================================================
   1) aspect-ratio  —  iOS Safari 15 미만 / 구형 Samsung Internet
      미지원 시 이미지 박스 높이가 0 이 되어 "사진이 안 보이는" 증상이 난다.
      ::before padding-top 비율 박스로 대체한다.
      (해당 컨테이너는 전부 position:relative + overflow:hidden 이고
       내부 img 는 position:absolute 또는 width/height 100% 라 그대로 채워진다)
   ============================================================ */
@supports not (aspect-ratio: 1 / 1) {

    /* --- 공용 캐러셀 (랭킹 · 상품 · 셀럽 · 브랜드) --- */
    .v2c-card__image::before,
    .v2c-brand__circle::before,
    /* --- SHOP 상품 카드 --- */
    .v2live-card-image::before,
    /* --- 상품 상세 / 관련 상품 --- */
    .v2-related-image::before,
    /* --- 개인화 추천 스켈레톤 --- */
    .v2reco-skel .sk-img::before,
    /* --- 메인 히어로 그리드 --- */
    .v2-home-hero__visual-grid a::before {
        content: "";
        display: block;
        padding-top: 100%;              /* 1 / 1 */
    }

    /* 비율이 다른 것들
       주의: content/display 를 반드시 함께 선언해야 한다.
             padding-top 만 쓰면 위 그룹에 없는 선택자(.v2mag-card__media 등)는
             ::before 가 아예 생성되지 않아 높이가 0 이 된다. */
    .v2c[data-carousel-mode="celeb"] .v2c-card__image::before,
    .v2mag-card__media::before {
        content: "";
        display: block;
        padding-top: 133.333%;          /* 3 / 4 */
    }
    .v2mag-cover .v2mag-card__ph::before {
        content: "";
        display: block;
        padding-top: 125%;              /* 4 / 5 */
    }
    .v2-home-hero-slide::before {
        content: "";
        display: block;
        padding-top: 125%;              /* 4 / 5 (모바일) */
    }
    .v2-home-promo-img::before {
        content: "";
        display: block;
        padding-top: 56.25%;            /* 16 / 9 */
    }
    .v2-related-slide-image::before {
        content: "";
        display: block;
        padding-top: 118%;              /* 1 / 1.18 */
    }
    .v2-product-slider-image::before {
        content: "";
        display: block;
        padding-top: 112%;              /* 1 / 1.12 */
    }

    /* 비율 박스를 쓰는 컨테이너는 반드시 relative 여야 한다 */
    .v2c-card__image,
    .v2c-brand__circle,
    .v2live-card-image,
    .v2-related-image,
    .v2reco-skel .sk-img,
    .v2-home-hero__visual-grid a,
    .v2mag-card__media,
    .v2-home-hero-slide,
    .v2-home-promo-img,
    .v2-related-slide-image,
    .v2-product-slider-image {
        position: relative;
        height: auto;
    }

    /* 내부 이미지를 비율 박스에 맞춰 채운다 */
    .v2c-card__image > img,
    .v2c-brand__circle > img,
    .v2live-card-image > img,
    .v2-related-image > img,
    .v2-home-hero__visual-grid a > img,
    .v2mag-card__media > img,
    .v2mag-card__media > picture,
    .v2-home-promo-img > img,
    .v2-related-slide-image > img,
    .v2-product-slider-image > img {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
    }
    .v2mag-card__media > picture > img {
        width: 100%; height: 100%;
    }

    /* 태블릿·PC 히어로 비율 (원본 미디어쿼리와 동일 분기) */
    @media (min-width: 768px) {
        .v2-home-hero-slide::before { padding-top: 62.5%; }   /* 16 / 10 */
    }
    @media (min-width: 1200px) {
        .v2-home-hero-slide::before { padding-top: 43.75%; }  /* 16 / 7 */
    }

    /* ★ 기존 규칙과의 충돌 해제
       shop-final.css:2915 는 태블릿 구간(601~1023px)에서
         .v2live-card-image::before { content:none !important; display:none !important }
       로 비율 박스를 끄고 aspect-ratio 에만 의존한다.
       aspect-ratio 가 없는 태블릿(iPad Safari 14 등)에서는 카드가 무너지므로
       그 구간에서만 !important 로 비율 박스를 되살린다.
       (shop-final.css:1815 의 동일한 ::before 는 그대로 두 규칙이 같은 값이라 무해) */
    @media (min-width: 601px) and (max-width: 1023px) {
        .v2live-card-image::before {
            content: "" !important;
            display: block !important;
            padding-top: 100% !important;
        }
    }
}


/* ============================================================
   2) object-fit  —  아주 오래된 브라우저
      미지원 시 이미지가 찌그러진다. 최소한 넘치지 않게만 보정한다.
   ============================================================ */
@supports not (object-fit: cover) {
    .v2c-card__image img,
    .v2live-card-image img,
    .v2mag-card__media img,
    .v2mag-hero-banner img,
    .v2cel-hero img {
        width: auto;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
    }
}


/* ============================================================
   3) inset 단축 속성  —  iOS Safari 14.1 미만
      미지원 시 오버레이·배지가 좌상단으로 몰리거나 사라진다.
   ============================================================ */
@supports not (inset: 0) {
    .v2c-card__noimg,
    .v2mag-card__ph,
    .v2mag-hero-banner picture,
    .v2mag-hero-banner img,
    .v2mag-hero-banner__ov,
    .v2mag-hero-banner__link,
    .v2cel-hero picture,
    .v2cel-hero img,
    .v2cel-hero__ov {
        top: 0; right: 0; bottom: 0; left: 0;
    }
}


/* ============================================================
   4) flexbox gap  —  iOS Safari 14.0 이하, 구형 Samsung Internet
      @supports 로는 grid gap 과 구분되지 않아 JS 가 감지해
      <html class="no-flexgap"> 를 붙인다(Chrome 에서는 절대 붙지 않는다).
      가로 레일의 카드 간격을 margin 으로 대체한다.
   ============================================================ */
/* 원칙: "> * + *" (두 번째 이후 형제)에만 여백을 준다.
   → 첫 자식 앞·마지막 자식 뒤에 바깥 여백이 절대 생기지 않는다.
   → 카드 폭 계산식(--v2c-card)은 --v2c-gap 변수를 그대로 쓰므로 폭도 변하지 않는다. */

/* --- 가로 레일 (랭킹 · 상품 · 셀럽 · 브랜드) --- */
.no-flexgap .v2c { gap: 0; }
.no-flexgap .v2c > .v2c-slide + .v2c-slide { margin-left: var(--v2c-gap, 10px); }

/* --- 가로 탭 --- */
.no-flexgap .v2mag-tabs,
.no-flexgap .v2c-tabs { gap: 0; }
.no-flexgap .v2mag-tabs > * + *,
.no-flexgap .v2c-tabs > * + * { margin-left: 7px; }

/* --- 세로(column) 방향 --- */
.no-flexgap .v2c-card { gap: 0; }
.no-flexgap .v2c-card > * + * { margin-top: 8px; }
.no-flexgap .v2c-card__info { gap: 0; }
.no-flexgap .v2c-card__info > * + * { margin-top: 2px; }
.no-flexgap .v2c-brand { gap: 0; }
.no-flexgap .v2c-brand > * + * { margin-top: 8px; }
.no-flexgap .v2mag-card__body { gap: 0; }
.no-flexgap .v2mag-card__body > * + * { margin-top: 3px; }
.no-flexgap .v2mag-more-wrap { gap: 0; }
.no-flexgap .v2mag-more-wrap > * + * { margin-top: 10px; }

/* --- 가로 인라인 묶음 --- */
.no-flexgap .v2c-sec__head { gap: 0; }
.no-flexgap .v2c-sec__head > * + * { margin-left: 12px; }
.no-flexgap .v2mag-card__meta { gap: 0; }
.no-flexgap .v2mag-card__meta > * + * { margin-left: 6px; }
.no-flexgap .v2mag-search { gap: 0; }
.no-flexgap .v2mag-search > * + * { margin-left: 8px; }
.no-flexgap .v2mag-bc { gap: 0; }
.no-flexgap .v2mag-bc > * + * { margin-left: 5px; }
.no-flexgap .v2mag-nav a { gap: 0; }
.no-flexgap .v2mag-nav a > * + * { margin-left: 10px; }
.no-flexgap .v2mag-meta { gap: 0; }
.no-flexgap .v2mag-meta > * + * { margin-left: 9px; }
.no-flexgap .v2mag-pager { gap: 0; }
.no-flexgap .v2mag-pager > * + * { margin-left: 6px; }

/* --- flex-wrap 되는 묶음 ---
   * + * 방식은 줄바꿈 첫 항목에 여백이 남는다.
   컨테이너 음수 마진 + 자식 전방향 마진이 유일하게 정확한 방법이다. */
.no-flexgap .v2mag-brands {
    gap: 0;
    margin: 0 -8px -8px 0;
}
.no-flexgap .v2mag-brands > li { margin: 0 8px 8px 0; }


/* ============================================================
   5) -webkit- 접두어  —  Safari / iOS 전 버전
      backdrop-filter 는 Safari 가 접두어 없이는 무시한다.
      (Chrome 은 두 속성 모두 지원하므로 결과가 동일하다)
   ============================================================ */
/* 주의: -webkit-backdrop-filter 는 Chrome 에서 backdrop-filter 의 "별칭"이다.
   inherit 같은 값을 넣으면 원래 blur 를 덮어써 Chrome 이 오히려 깨진다.
   → 반드시 원본과 "같은 값"만 접두어로 한 줄 더 쓴다(렌더 결과 불변). */
.v2live-header { -webkit-backdrop-filter: blur(18px); }

/* 3D 코버플로 — Safari 는 접두어가 있어야 안정적으로 합성한다 */
.v2cf-stage { -webkit-perspective: 1200px; }
.v2cf-track { -webkit-transform-style: preserve-3d; }
.v2cf-slide { -webkit-backface-visibility: hidden; }

/* 관성 스크롤 (iOS) */
.v2c,
.v2mag-tabs,
.v2mag-grid { -webkit-overflow-scrolling: touch; }


/* ============================================================
   6) 100dvh  —  iOS Safari 15.4 미만 / Firefox 108 미만
      calc() 안에서 dvh 를 쓰면 선언 전체가 무효가 되어 높이가 무너진다.
      지원하지 않을 때만 vh 로 대체한다.
   ============================================================ */
@supports not (height: 100dvh) {
    /* 관리자 드로어 */
    .va-nav { height: 100vh; }

    /* SHOP 필터 패널 — 원본: max-height: calc(100dvh - 110px - env(safe-area-inset-bottom)) */
    .v2live-filter-panel,
    .v2shop-filter-panel,
    .v2-filter-panel {
        max-height: calc(100vh - 110px - env(safe-area-inset-bottom, 0px));
    }

    /* 상품 상세 AI 패널 (모바일) */
    @media (max-width: 699px) {
        .v2-product-ai-panel { height: 100vh !important; }
    }

    /* 상품 검색 패널 */
    .v2-item-search-panel { min-height: 100vh; }

    /* 브랜드 칩 목록 (모바일) */
    @media (max-width: 767px) {
        #v2BrandChips .v2brand-group-list { max-height: calc(100vh - 350px); }
    }
}

/* iOS 주소창이 열린 상태에서 하단 버튼/네비가 가려지지 않게.
   dvh 를 지원하면 dvh 값이 이기고, 지원하지 않으면 아래 vh 값이 그대로 남는다.
   (선언 순서상 vh 를 먼저 쓰고 dvh 로 덮는 표준 패턴) */
.v2live-filter-panel,
.v2shop-filter-panel,
.v2-filter-panel {
    max-height: calc(100vh - 110px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 110px - env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   7) position: sticky  —  구형 iOS
   ============================================================ */
@supports (position: -webkit-sticky) and (not (position: sticky)) {
    .v2live-header,
    .v2shop-head-stack,
    .v2-home-quick,
    .v2mag-tabs { position: -webkit-sticky; }
}


/* ============================================================
   8) 컨테이너 쿼리  —  Safari 16 미만 / Firefox 110 미만 / 구형 Samsung
      미지원이면 @container 블록이 통째로 무시되어 상품 상세 이미지가
      기본값으로 떨어진다. 뷰포트 미디어쿼리로 같은 결과를 만든다.
      (JS 가 html.no-containerq 를 붙일 때만 적용된다)
   ============================================================ */
.no-containerq .v2-product-image-wrap { width: 100%; }
@media (max-width: 380px) {
    .no-containerq .v2-product-image-wrap { max-width: 100%; }
}
@media (min-width: 521px) {
    .no-containerq .v2-product-image-wrap { margin-left: auto; margin-right: auto; }
}


/* ============================================================
   9) scroll-snap  —  미지원 시 JS 스냅만으로 동작하게
      (v2-carousel.js 가 드래그 종료 시 직접 스냅하므로 기능은 유지된다)
   ============================================================ */
@supports not (scroll-snap-type: x mandatory) {
    .v2c { overflow-x: auto; }
}


/* ============================================================
   10) gap 미지원 grid  —  아주 구형
   ============================================================ */
@supports not (row-gap: 1px) {
    .v2mag-grid > li { margin-bottom: 18px; }
    .v2tb-grid > li  { margin-bottom: 16px; }
}


/* ============================================================
   11) :focus-visible  —  Safari 15.4 미만
       미지원 시 포커스 링이 전혀 안 보여 키보드 접근성이 사라진다.
   ============================================================ */
@supports not selector(:focus-visible) {
    .v2c:focus,
    .v2cf:focus,
    .v2mag-tab:focus,
    .v2cf-ctrl:focus,
    .v2mag-more:focus {
        outline: 2px solid #3d5afe;
        outline-offset: 2px;
    }
}