/* ============================================================================
 * 배때지 V2 · 메인 「제품 LIVE」 캐러셀            (2026-08-01 전면 개편)
 *
 *   · 한 화면 노출: 모바일 2 · 태블릿 3 · PC 4  (--lv-per 로 한 곳에서만 정한다)
 *   · 슬롯(.v2lv-slot)이 폭을 «먼저» 잡는다 → 카드가 재활용으로 비어도 자리 유지 = CLS 0.
 *   · 가로 이동은 JS(live-rail.js)가 scrollLeft 로 직접 한다.
 *     overflow-x:hidden + touch-action:pan-y → 브라우저 관성(fling)이 개입하지 않는다.
 *   · 카드 자체(.v2lv-card / .v2lv-media / .v2lv-badge / .v2lv-ov …)의 모양은
 *     공용 컴포넌트 v2/assets/live-ui.css 가 담당한다. 여기서 다시 정의하지 않는다.
 *     여기서는 «배치» 만 한다.
 * ========================================================================== */

.v2lv-railwrap {
    position: relative;
    /* 화살표가 카드 밖으로 살짝 나가도 잘리지 않게 — 세로는 자르지 않는다 */
    margin: 0 -2px;
    padding: 0 2px;
}

.v2lv-rail {
    --lv-per: 2;                    /* 모바일 기본 2장 */
    --lv-gap: 10px;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--lv-gap);
    overflow-x: hidden;             /* 스크롤 주체는 JS. 네이티브 관성 없음 */
    overflow-y: visible;
    scroll-behavior: auto;          /* 애니메이션은 JS 가 프레임 단위로 그린다 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;            /* 세로 스크롤은 브라우저, 가로는 JS */
    -webkit-tap-highlight-color: transparent;
}
.v2lv-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* JS 가 없거나 아직 로드 전이면 네이티브 가로 스크롤로 폴백한다(기능이 막히지 않는다) */
.v2lv-rail:not([data-lv-ready]) { overflow-x: auto; }

.v2lv-slot {
    flex: 0 0 calc((100% - (var(--lv-per) - 1) * var(--lv-gap)) / var(--lv-per));
    max-width: calc((100% - (var(--lv-per) - 1) * var(--lv-gap)) / var(--lv-per));
    min-width: 0;
}

@media (min-width: 601px)  { .v2lv-rail { --lv-per: 3; --lv-gap: 14px; --lv-cap: 340px; } }
@media (min-width: 1024px) { .v2lv-rail { --lv-per: 4; --lv-gap: 16px; --lv-cap: 380px; } }

/* ── 카드가 열 수보다 적을 때(§상품 상세: 대부분 1개) ──────────────────────
   실제 카드 수(--lv-n)만큼만 나눠 «꽉» 채운다. 1/4 칸에 걸려 오른쪽이 비지 않는다.
   다만 PC 에서 1장이 폭 전체를 먹으면 9:16 이 화면을 뒤덮으므로 --lv-cap 으로 상한을 둔다.
   상한에 걸리면 `justify-content: safe center` 가 가운데로 모아 좌우 여백이 대칭이 된다
   (카드가 넘칠 때는 safe 가 자동으로 start 로 떨어져 스크롤 시작점이 흔들리지 않는다).
   min()/safe center 미지원 브라우저는 위의 기본 규칙(1/열수)이 그대로 남는다. */
@supports (width: min(10px, 10%)) {
    .v2lv-rail { --lv-cols: min(var(--lv-per), var(--lv-n, 99)); }
    .v2lv-slot {
        flex: 0 0 min(calc((100% - (var(--lv-cols) - 1) * var(--lv-gap)) / var(--lv-cols)), var(--lv-cap, 100%));
        max-width: min(calc((100% - (var(--lv-cols) - 1) * var(--lv-gap)) / var(--lv-cols)), var(--lv-cap, 100%));
    }
}
.v2lv-rail { justify-content: safe center; }

/* 드래그 중에는 텍스트/이미지 선택을 막는다(마우스 드래그가 선택으로 새지 않게) */
.v2lv-rail.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.v2lv-rail.is-dragging .v2lv-hit { pointer-events: none; }

/* ---------------------------------------------------------------- 화살표(PC) */
.v2lv-arrow {
    position: absolute;
    top: 0; bottom: 0;
    margin: auto 0;
    z-index: 5;
    width: 40px; height: 40px;
    /* 카드 정보영역을 뺀 «영상 부분» 중앙에 오도록 위로 올린다 */
    transform: translateY(-24px);
    display: none;                  /* 터치 기기에서는 쓰지 않는다 */
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(17,17,20,.08);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #16161a;
    box-shadow: 0 6px 18px rgba(17,17,20,.16);
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
}
.v2lv-arrow svg { width: 20px; height: 20px; }
.v2lv-arrow--prev { left: -6px; }
.v2lv-arrow--next { right: -6px; }
.v2lv-arrow[hidden] { display: none !important; }
.v2lv-arrow[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.v2lv-arrow:focus-visible { outline: 3px solid #16161a; outline-offset: 2px; }

/* 화살표는 PC 폭에서만 쓴다. 터치 전용 기기(마우스 없음)에서는 스와이프뿐이므로 감춘다.
   ※ hover 미디어만으로 켜지 않는다 — 일부 환경(구형 헤드리스/터치 노트북)에서
      hover:hover 판정이 어긋나 PC 에서도 화살표가 사라진다. */
@media (min-width: 1024px) {
    .v2lv-arrow { display: inline-flex; }
    .v2lv-rail { cursor: grab; }
}
@media (hover: none) and (pointer: coarse) {
    .v2lv-arrow { display: none !important; }
}
@media (hover: hover) and (pointer: fine) {
    .v2lv-arrow:hover { transform: translateY(-24px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .v2lv-arrow { transition: none; }
    .v2lv-arrow:hover { transform: translateY(-24px); }
}

/* ---------------------------------------------------------------- 높이 균일화 */
/* 제목이 1줄인 카드와 2줄인 카드가 섞이면 카드 총높이가 달라진다(지시서 §1 "높이 동일").
   제목 영역을 «항상 2줄» 로 잡아 준다 — 영상(9:16)은 이미 동일하므로 이걸로 전부 같아진다.
   line-clamp 는 live.css 가 이미 2줄로 제한하고 있어 넘치지 않는다. */
/* (구) 이미지 밖 제목 2줄 높이 확보 규칙은 제거했다 —
   정보가 전부 영상 «안» 오버레이로 들어가 카드 높이가 이미 완전히 같다. */

/* ---------------------------------------------------------------- 재활용 슬롯 */
/* 창(현재±1페이지) 밖 슬롯은 카드를 비운다. 폭은 위 flex-basis 가 유지하므로
   스크롤 좌표가 흔들리지 않는다. 비어 있는 동안에도 높이를 유지해 CLS 를 막는다. */
.v2lv-slot:empty::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    background: #f2f2f4;
}
@supports not (aspect-ratio: 9 / 16) {
    .v2lv-slot:empty::before { height: 0; padding-bottom: 177.78%; }
}