/* ============================================================================
 * 배때지 V2 · 제품 LIVE (쇼츠) — 메인 섹션 / /live/ 전체 페이지 공용
 *
 *   반응형 열 수(기존 V2 브레이크포인트 그대로 재사용):
 *     ~600px       모바일  2열
 *     601~1023px   태블릿  3열
 *     1024px~      PC      4열
 *
 *   레이아웃 이동(CLS) 방지: .v2lv-media 는 aspect-ratio:9/16 로 «항상» 자리를
 *   먼저 잡는다. 영상/이미지 로드 여부와 무관하다.
 * ========================================================================== */

/* 스크린리더 전용 텍스트 — .sr-only 는 이 페이지들에 로드되는 CSS 에 없어서
   여기서 자체 클래스로 정의한다(전역 .sr-only 를 재정의하지 않는다). */
.v2lv-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- 섹션 */
.v2lv-section { margin: 0 0 34px; }

/* 섹션 헤더는 메인의 기존 .v2-home-sechead 를 그대로 쓴다.
   여기서는 제목 옆 LIVE 감성 표식만 추가한다. */
.v2lv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #e0264a;
    text-transform: uppercase;
}
.v2lv-eyebrow .v2lv-dot { width: 6px; height: 6px; }

/* ---------------------------------------------------------------- 그리드 */
.v2lv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 모바일 2열 */
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 601px) {
    .v2lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }  /* 태블릿 3열 */
}
@media (min-width: 1024px) {
    .v2lv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }  /* PC 4열 */
}

/* 카드·배지·오버레이·CTA 는 «공용 컴포넌트» v2/assets/live-ui.css 로 이관했다
   (2026-08-01 LIVE UI 통합). 이 파일은 /live/ 페이지 «껍데기» 만 담당한다:
   제목·인트로·검색바·정렬·개수·빈상태·페이지네이션·개별 상세 페이지.
   여기에 카드 스타일을 다시 쓰지 말 것 — 화면마다 카드가 달라지는 원인이 된다. */

/* /live/ 세로 목록 그리드 (모바일2·태블릿3·PC4) */
.v2lv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0; padding: 0; list-style: none;
}
@media (min-width: 601px)  { .v2lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .v2lv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* 화면 밖 카드의 렌더 비용 절감 — «세로 목록 전용».
   메인 캐러셀(가로)에 걸면 잘린 카드가 렌더 스킵돼 빈칸으로 보인다. */
@supports (content-visibility: auto) {
    .v2lv-grid > .v2lv-card { content-visibility: auto; contain-intrinsic-size: auto 420px; }
}

/* ---------------------------------------------------------------- 전체 페이지 */
/* 폭은 «조상 .v2live-shell» 이 결정한다(모바일 100% · 태블릿 100vw-24 · PC 1440).
   여기서 또 max-width 를 걸면 PC 에서 셸보다 좁아져 두 겹으로 줄어든다.
   다른 V2 본문(.v2tnp 등)과 같은 규칙 — 좌우 여백만 담당한다. */
.v2lvp { width: 100%; margin: 0; padding: 16px 14px 60px; }
@media (min-width: 601px)  { .v2lvp { padding: 20px 20px 70px; } }
@media (min-width: 1024px) { .v2lvp { padding: 24px 28px 80px; } }
.v2lvp-h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 8px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #16161a;
}
.v2lvp-h1 .v2lv-dot { width: 9px; height: 9px; }
.v2lvp-intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.65;
    color: #6b6b74;
}
.v2lvp-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}
.v2lvp-search { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
.v2lvp-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e2e2e6;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    color: #16161a;
}
.v2lvp-search button {
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: #16161a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.v2lvp-sorts { display: flex; gap: 6px; }
.v2lvp-sort {
    height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid #e2e2e6;
    border-radius: 9px;
    background: #fff;
    color: #6b6b74;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.v2lvp-sort.is-on { background: #16161a; border-color: #16161a; color: #fff; }
.v2lvp-count { margin: 0 0 12px; font-size: 12.5px; color: #6b6b74; }
.v2lvp-count strong { color: #16161a; }
/* 빈 상태 — 텍스트 전용. 아이콘·의사요소(::before/::after)를 쓰지 않는다.
   폰트 크기는 상속이 아니라 여기서 고정한다(조상 크기에 끌려 커지지 않게). */
.v2lvp-empty {
    padding: 44px 16px;
    border: 1px solid #ececef;
    border-radius: 14px;
    background: #fafafa;
    text-align: center;
}
.v2lvp-empty p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #6b6b74;
}
.v2lvp-empty::before, .v2lvp-empty::after { content: none; }
.v2lvp-empty-act { margin-top: 14px !important; }
.v2lvp-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #d9d9de;
    border-radius: 9px;
    background: #fff;
    color: #16161a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}
.v2lvp-empty-btn:hover { border-color: #16161a; }

/* 페이지네이션 — 기존 SHOP 번호형과 동일한 감각 */
.v2lvp-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 26px 0 0;
}
.v2lvp-pager a,
.v2lvp-pager span {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid #e2e2e6;
    border-radius: 8px;
    background: #fff;
    color: #6b6b74;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.v2lvp-pager .is-on { background: #16161a; border-color: #16161a; color: #fff; }
.v2lvp-pager .is-gap { border-color: transparent; background: transparent; }

/* 구 모달 플레이어(.v2lvm-*) CSS 는 2026-08-01 3차에서 제거했다.
   카드 클릭은 이제 쇼츠 플레이어(live-player.css)가 담당한다. */

/* 다크 모드 규칙은 두지 않는다 — V2 공개 화면은 라이트 단일 테마다
   (home-v2.css·shop-live.css 어디에도 prefers-color-scheme 분기가 없다).
   여기서만 색을 뒤집으면 같은 페이지 안에서 카드만 어긋난다. */

/* ============================================================================
 *  개별 LIVE 상세 페이지  /live/{id}/          (2026-08-01 2차)
 *  폭은 조상 .v2live-shell 이 결정한다 — 여기서 max-width 를 걸지 않는다.
 * ========================================================================== */
.v2lvd { width: 100%; padding: 14px 14px 60px; }
@media (min-width: 601px)  { .v2lvd { padding: 20px 20px 70px; } }
@media (min-width: 1024px) { .v2lvd { padding: 24px 28px 80px; } }

.v2lvd-crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8b8b93; }
.v2lvd-crumb a { color: #8b8b93; text-decoration: none; }
.v2lvd-crumb a:hover { color: #16161a; text-decoration: underline; }

.v2lvd-h1 {
    margin: 8px 0 16px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.02em;
    color: #16161a;
}
@media (min-width: 1024px) { .v2lvd-h1 { font-size: 22px; margin-bottom: 20px; } }

/* 모바일: 세로 스택 / PC: 영상 + 정보 2열 */
.v2lvd-wrap { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) {
    .v2lvd-wrap { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; align-items: start; }
}

.v2lvd-stage {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}
@supports not (aspect-ratio: 9 / 16) {
    .v2lvd-stage { height: 0; padding-bottom: 177.78%; }
}
.v2lvd-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}
.v2lvd-stage .v2lv-badge { top: 10px; left: 10px; z-index: 3; }

.v2lvd-novideo {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #b9b9c0; font-size: 13px;
}

/* 음소거 토글 — controls 와 겹치지 않게 우상단 */
.v2lvd-sound {
    position: absolute;
    /* 우측 상단은 조회수 배지(.v2lv-views) 자리다 — 그 «아래» 로 내려 겹치지 않게 한다 */
    top: 44px; right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 17, 20, .66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.v2lvd-sound:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.v2lvd-sound-ico { font-size: 13px; }

.v2lvd-info { min-width: 0; }
.v2lvd-brand { display: inline-block; font-size: 12px; font-weight: 700; color: #8b8b93; }
.v2lvd-name { margin: 6px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.45; color: #16161a; }
.v2lvd-price { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #16161a; }
.v2lvd-price.is-ask { font-size: 17px; color: #6b6b74; }
.v2lvd-state {
    display: inline-block;
    margin: 6px 0 0;
    padding: 4px 9px;
    border-radius: 6px;
    background: #f4f4f6;
    color: #86868c;
    font-size: 12px;
    font-weight: 700;
}
.v2lvd-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin-top: 16px;
    border-radius: 12px;
    background: #16161a;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}
.v2lvd-cta.is-alt { background: #fff; border: 1px solid #d9d9de; color: #16161a; }
.v2lvd-note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #9a9aa2; }

/* 이전 / 목록 / 다음 */
.v2lvd-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: stretch;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ececef;
}
.v2lvd-nav-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e6e6ea;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
}
.v2lvd-nav-item.is-next { text-align: right; align-items: flex-end; }
.v2lvd-nav-item.is-off { background: #fafafa; border-style: dashed; }
.v2lvd-nav-lb { font-size: 11px; font-weight: 700; color: #a0a0a8; }
.v2lvd-nav-tt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #16161a;
    word-break: break-all;
}
.v2lvd-nav-item.is-off .v2lvd-nav-tt { color: #b5b5bc; }
.v2lvd-nav-all {
    display: inline-flex; align-items: center;
    padding: 0 14px;
    border: 1px solid #16161a; border-radius: 10px;
    color: #16161a; font-size: 12.5px; font-weight: 700; text-decoration: none;
    white-space: nowrap;
}