/* ============================================================================
 * 배때지 V2 · 제품 LIVE 쇼츠 플레이어
 *
 *   메인·목록 카드 클릭 또는 /live/{id}/ 직접 접속으로 열린다.
 *   외부 라이브러리 없음. 스와이프/휠/키보드 전환은 live-player.js 가 처리한다.
 *
 *   ★ 이 파일은 «플레이어를 열 때만» 로드된다(카드 클릭 시 동적 주입).
 *     메인 초기 렌더링 경로에 포함되지 않는다.
 * ========================================================================== */

.v2lp {
    position: fixed;
    inset: 0;
    z-index: 9700;
    background: #0b0b0d;
    display: flex;
    align-items: center;
    justify-content: center;
    overscroll-behavior: contain;
    touch-action: none;             /* 세로 스와이프를 우리가 처리한다 */
}
.v2lp[hidden] { display: none; }

/* 배경 스크롤 잠금 */
html.v2lp-open, body.v2lp-open { overflow: hidden !important; }

/* ── 무대 ────────────────────────────────────────────────────────────────── */
.v2lp-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 슬라이드 — 현재/이전/다음 3장만 DOM 에 둔다 */
.v2lp-slide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100%, calc(100vh * 9 / 16));
    height: 100%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.v2lp.is-dragging .v2lp-slide { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .v2lp-slide { transition: none !important; }
}

/* PC·태블릿 — 중앙에 세로 카드 형태 */
@media (min-width: 768px) {
    /* 이웃 슬라이드는 «보이지 않게» 한다. 슬라이드 높이가 무대보다 작아
       ±100% 이동으로도 위아래가 화면에 걸치는데, 그러면 이전/다음 영상의
       상품 카드가 함께 떠 있어 어떤 상품인지 헷갈린다(실측).
       DOM 과 프리로드는 그대로라 넘김 성능에는 영향이 없다. */
    .v2lp-slide { opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
    .v2lp-slide.is-active { opacity: 1; pointer-events: auto; }
    .v2lp.is-dragging .v2lp-slide { opacity: 1; }
    .v2lp-slide {
        width: min(430px, calc((100vh - 48px) * 9 / 16));
        height: min(calc(100vh - 48px), calc(430px * 16 / 9));
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    }
}

.v2lp-media {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}
.v2lp-video,
.v2lp-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}
.v2lp-poster { z-index: 1; transition: opacity .3s ease; }
.v2lp-slide.is-playing .v2lp-poster { opacity: 0; }
.v2lp-video { z-index: 0; }

/* LIVE 배지 · 정보 오버레이 · CTA 는 «공용 컴포넌트» live-ui.css 가 담당한다
   (.v2lv-badge / .v2lv-ov.is-float / .v2lv-ov-in / .v2lv-meta / .v2lv-cta).
   플레이어 전용 디자인을 여기서 다시 만들지 않는다 — 이 파일은 «무대» 만 담당한다:
   전체화면 셸 · 슬라이드 트랜지션 · 사이드 아이콘 · 진행 힌트 · 오류 표시. */

/* 무대 안에서는 배지를 살짝 안쪽으로 */
.v2lp-media .v2lv-badge { top: 12px; left: 12px; z-index: 6; }

/* 조회수 배지 — 카드와 같은 컴포넌트(.v2lv-views), 위치만 무대에 맞춘다.
   모바일(무대가 화면 폭을 꽉 채움)에서는 닫기(✕, fixed top:14 · 42px)와 겹치므로
   그 «아래» 로 내린다. 768 이상은 무대가 가운데 좁게 서서 겹치지 않는다. */
.v2lp-media .v2lv-stats { top: 66px; right: 12px; z-index: 6; }
@media (min-width: 768px) {
    .v2lp-media .v2lv-stats { top: 12px; }
}

/* ── 컨트롤 ──────────────────────────────────────────────────────────────── */
.v2lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}
.v2lp-btn:hover { background: rgba(255, 255, 255, .26); }
.v2lp-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.v2lp-btn[disabled] { opacity: .3; cursor: default; }
.v2lp-btn svg { width: 21px; height: 21px; fill: currentColor; }
.v2lp-btn[data-lp-share] svg,
.v2lp-nav svg { fill: none; }
.v2lp-btn.is-on { background: rgba(255, 255, 255, .34); color: var(--lv-point, #c9a96e); }
/* 하트(data-lp-like) 규칙은 2026-08-01 제거 — LIVE 화면에 하트는 존재하지 않는다(§20). */
.v2lp-ico { font-size: 17px; line-height: 1; }

.v2lp-close { position: fixed; top: 14px; right: 14px; z-index: 20; }

/* 음소거 — §17/§19: 영상 «우측 상단» (닫기 버튼 바로 왼쪽). 사이드 세로줄에 쌓지 않는다. */
.v2lp-side [data-lp-sound] {
    position: fixed;
    top: 14px;
    right: 64px;
    z-index: 20;
}

/* 사이드 컨트롤 — 모바일은 우측 하단 세로, PC 는 무대 오른쪽 */
.v2lp-side {
    position: fixed;
    right: 14px;
    bottom: calc(150px + env(safe-area-inset-bottom));
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (min-width: 768px) {
    .v2lp-side { right: max(14px, calc(50vw - 300px)); bottom: 50%; transform: translateY(50%); }
}

/* 중앙 「소리 켜기」 오버레이(.v2lp-unmute)는 2026-08-01 지시로 제거했다.
   소리 제어는 우측 사이드의 음소거 토글 버튼 하나로 통일한다. */

/* ── 진행 힌트 ───────────────────────────────────────────────────────────── */
.v2lp-count {
    position: fixed;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    pointer-events: none;
}

.v2lp-loading {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: #9a9aa2;
    font-size: 13px;
    z-index: 3;
}

/* 영상 오류 — poster 와 상품 보기는 그대로 유지된다 */
.v2lp-err {
    position: absolute;
    left: 0; right: 0; top: 42%;
    z-index: 7;
    text-align: center;
    color: #e6e6ea;
    font-size: 12.5px;
    pointer-events: none;
}
.v2lp-err[hidden] { display: none; }