/* ============================================================================
 * 배때지 V2 · 제품 LIVE  «공용 UI 컴포넌트» (SSOT)
 *
 *   이 파일 하나가 LIVE 카드의 «생김새 전부» 를 정의한다.
 *   메인 캐러셀 / /live/ 목록 / 상품 상세 LIVE / 쇼츠 플레이어 플로팅 카드가
 *   모두 같은 클래스·같은 규칙을 쓴다. 화면별 예외 스타일을 만들지 않는다.
 *
 *   다른 파일의 역할(겹치지 않는다)
 *     live-rail.css    메인 캐러셀의 «배치»(슬롯 폭·화살표·스크롤)
 *     live.css         /live/ 페이지의 «껍데기»(제목·검색·페이지네이션)
 *     live-player.css  쇼츠 플레이어의 «무대»(전체화면·슬라이드·사이드 아이콘)
 *
 *   디자인 원칙 — Modern Luxury / Glass
 *     · 정보는 «항상» 영상 안에 있다. 이미지 밖 텍스트가 없다 → 카드 높이가 완전히 같다.
 *     · 오버레이는 항상 보인다. hover/터치는 opacity 만 미세하게 바꾼다(레이아웃 이동 0).
 *     · 유리(backdrop-filter) + 위로 갈수록 투명해지는 그라데이션으로 영상을 가리지 않는다.
 * ========================================================================== */

:root {
    /* 배때지 포인트 — 절제된 샴페인 골드(메인 랭킹 1~3위 강조색과 같은 계열) */
    --lv-point:      #c9a96e;
    --lv-point-ink:  #1a1a1a;
    --lv-point-hi:   #d9bd85;

    --lv-glass:      rgba(0, 0, 0, .45);
    --lv-radius:     16px;
    --lv-ink:        #fff;
    --lv-ink-soft:   rgba(255, 255, 255, .72);
}

/* ---------------------------------------------------------------- 카드 골격 */
.v2lv-card {
    position: relative;
    min-width: 0;
    display: block;                 /* 이미지 밖 정보가 없으므로 단일 블록이면 충분 */
}

.v2lv-media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;           /* ★ 비율 고정 = CLS 0 */
    overflow: hidden;
    border-radius: var(--lv-radius);
    background: #14141a;
    isolation: isolate;
    /* ★ 카드 «폭» 기준으로 오버레이를 조절하기 위한 컨테이너.
       미디어쿼리는 뷰포트만 보므로, PC 라도 카드가 좁으면(상품상세 1/4 열 등)
       글자가 줄바꿈되는 문제가 생긴다. 컨테이너 쿼리는 카드 실제 폭을 본다.
       미지원 브라우저는 아래 기본값 그대로 — 깨지지 않는다. */
    container-type: inline-size;
    container-name: lvcard;
    /* 카드 자체에 은은한 입체감 — 그림자는 레이아웃에 영향이 없다 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .10);
}
@supports not (aspect-ratio: 9 / 16) {
    .v2lv-media { height: 0; padding-bottom: 177.78%; }
}

.v2lv-video,
.v2lv-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;              /* 파일이 이미 720x1280 로 통일 → 비율 보정 불필요 */
    display: block;
    border: 0;
}
.v2lv-video  { z-index: 1; background: transparent; }

/* poster 는 «첫 프레임이 실제로 그려졌을 때만» 걷는다.
   play() 는 낙관적으로 붙으므로 is-playing 만 보고 지우면 빈 칸이 노출된다. */
.v2lv-poster { z-index: 2; transition: opacity .32s ease; }
.v2lv-card.is-playing.has-frame .v2lv-poster { opacity: 0; }

/* ---------------------------------------------------------------- LIVE 배지 */
.v2lv-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 23px;
    padding: 0 9px 0 8px;
    border-radius: 999px;
    background: rgba(18, 18, 22, .55);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: var(--lv-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    pointer-events: none;
}
.v2lv-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff3b46;
    box-shadow: 0 0 0 0 rgba(255, 59, 70, .6);
    animation: v2lvPulse 1.9s ease-out infinite;
}
@keyframes v2lvPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 70, .6); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 59, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 70, 0); }
}

/* ------------------------------------------------------- 조회수 + 추천 배지(§7)
 *  «하나의» 얇은 유리 배지 안에 [눈 조회수] · [엄지 추천] 을 나란히 둔다.
 *  두 개의 큰 배지로 쪼개지 않는다. LIVE 배지(좌상단)와 같은 높이·같은 유리.
 *  추천만 버튼이라 클릭을 받고, 조회수는 텍스트다.
 * ========================================================================= */
.v2lv-stats {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 23px;                       /* .v2lv-badge 와 동일 */
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: var(--lv-ink);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;  /* 숫자가 바뀌어도 폭이 흔들리지 않는다 */
    pointer-events: none;                /* 배지 자체는 클릭을 통과시킨다 */
}
.v2lv-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.v2lv-statsep {
    width: 1px;
    height: 11px;
    background: rgba(255, 255, 255, .28);
}
.v2lv-eye,
.v2lv-thumb-ico { width: 12px; height: 12px; flex: 0 0 auto; opacity: .95; }

/* 추천 버튼 — 배지 안에서만 클릭을 받는다. 터치 영역은 ::before 로 넓힌다. */
.v2lv-reco {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, transform .18s ease;
}
/* 최소 40px 터치 타깃 확보(배지는 23px 이라 보이지 않는 여백으로 넓힌다) */
.v2lv-reco::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: max(100%, 44px);
    height: 40px;
    transform: translate(-50%, -50%);
}
.v2lv-reco:hover { color: #fff; }
.v2lv-reco:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }
.v2lv-reco.is-on { color: var(--lv-point); }
.v2lv-reco.is-on .v2lv-thumb-ico { fill: currentColor; stroke: currentColor; opacity: 1; }
.v2lv-reco.is-bump { animation: v2lvRecoPop .2s ease-out; }
@keyframes v2lvRecoPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.v2lv-reco[aria-busy="true"] { opacity: .6; }

/* 스크린리더 전용(색만으로 상태를 전달하지 않는다) */
.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-hit {
    position: absolute;
    inset: 0;
    z-index: 4;                     /* 오버레이(5)보다 «아래» — CTA 클릭이 먹힌다 */
    display: block;
    border-radius: inherit;
    -webkit-tap-highlight-color: transparent;
}
.v2lv-hit:focus-visible { outline: 3px solid var(--lv-point); outline-offset: -3px; }

/* ================================================================ 정보 오버레이
 *  항상 표시된다. hover 시 opacity 만 바뀐다(위치·크기 불변 = 레이아웃 이동 0).
 * ========================================================================= */
.v2lv-ov {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 7px 7px;      /* 그라데이션 여백 축소 — 오버레이 총높이를 카드의 25% 안으로 */
    /* 위로 갈수록 완전히 투명해져 영상을 가리지 않는다 */
    background: linear-gradient(to top,
                rgba(0, 0, 0, .62) 0%,
                rgba(0, 0, 0, .34) 52%,
                rgba(0, 0, 0, 0) 100%);
    opacity: .97;
    transition: opacity .25s ease;
    pointer-events: none;           /* 배경은 클릭을 통과시킨다 */
}
.v2lv-card:hover .v2lv-ov,
.v2lv-card:focus-within .v2lv-ov { opacity: 1; }

/* 유리 패널 — 실제 정보가 얹히는 곳 */
.v2lv-ov-in {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 8px;
    border-radius: 11px;
    background: var(--lv-glass);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    pointer-events: auto;
}

/* 좌측: 브랜드 / 상품명 / 가격 */
.v2lv-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.v2lv-brand {
    font-size: 10px;                /* §8 권장 10~11px */
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lv-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2lv-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;          /* 상품명 «한 줄» + 말줄임표(§8) — 카드마다 높이가 같아진다 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lv-ink);
    text-decoration: none;
    word-break: break-all;
}
.v2lv-price {
    margin-top: 1px;
    font-size: 14px;                /* §8 권장 14~16px */
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--lv-ink);
    white-space: nowrap;         /* 「2,500위안」이 두 줄로 쪼개지지 않게 */
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2lv-price.is-ask { font-size: 12.5px; font-weight: 700; color: var(--lv-ink-soft); }

/* 우측: 상품보기 CTA — 배때지 포인트 컬러 */
.v2lv-cta {
    position: relative;
    flex: 0 0 auto;
    align-self: center;             /* stretch 해제 — 패널 높이를 따라 커지지 않는다 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;                   /* 기존 34~69px → 약 40% 축소 */
    padding: 0 9px;
    border-radius: 9px;
    background: var(--lv-point);
    color: var(--lv-point-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    pointer-events: auto;
    transition: background .18s ease, transform .18s ease;
}
/* 모바일(2열)은 카드가 좁다 — «디자인은 같고 크기만» 줄여 상품명 폭을 확보한다.
   높이는 44px 터치 타깃 하한을 고려해 34px 이상 유지한다. */
@media (max-width: 600px) {
    .v2lv-cta   { height: 28px; padding: 0 9px; font-size: 10.5px; border-radius: 9px; }
    /* 오버레이 총높이를 카드(9:16)의 25% 안으로 — §8 권장 58~72px */
    .v2lv-ov    { padding: 10px 7px 7px; gap: 6px; }
    .v2lv-ov-in { padding: 5px 5px 5px 8px; gap: 6px; border-radius: 11px; }
}
@media (max-width: 380px) {
    .v2lv-cta   { padding: 0 8px; font-size: 10px; }
}

/* 보이는 크기는 28px 이지만 터치 타깃은 40px 이상을 확보한다(§8) */
.v2lv-cta::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: calc(100% + 12px);
    height: 42px;
    transform: translate(-50%, -50%);
}
.v2lv-cta:hover { background: var(--lv-point-hi); }
.v2lv-cta:active { transform: scale(.97); }
.v2lv-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 품절 */
.v2lv-soldout {
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .2);
    color: var(--lv-ink);
    font-size: 9.5px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- 반응형
 *  «디자인은 동일하고 크기만» 커진다. 구조·색·배치는 어느 폭에서도 같다. */
@media (min-width: 601px) {
    .v2lv-ov      { padding: 22px 10px 10px; gap: 8px; }
    .v2lv-ov-in   { padding: 7px 7px 7px 10px; border-radius: 13px; }
    .v2lv-brand   { font-size: 10px; }
    .v2lv-title   { font-size: 12.5px; }
    .v2lv-price   { font-size: 15px; }
    .v2lv-cta     { height: 30px; padding: 0 11px; font-size: 11px; }
    .v2lv-badge   { height: 24px; font-size: 10.5px; top: 11px; left: 11px; }
    .v2lv-stats   { height: 24px; font-size: 11px;   top: 11px; right: 11px; }
    .v2lv-eye, .v2lv-thumb-ico { width: 13px; height: 13px; }
}
@media (min-width: 1024px) {
    .v2lv-ov      { padding: 26px 11px 11px; }
    .v2lv-ov-in   { padding: 8px 8px 8px 11px; border-radius: 14px; }
    .v2lv-brand   { font-size: 11px; }
    .v2lv-title   { font-size: 13px; }
    .v2lv-price   { font-size: 16px; }
    .v2lv-cta     { height: 32px; padding: 0 13px; font-size: 11.5px; border-radius: 10px; }
    .v2lv-badge   { height: 25px; font-size: 11px; top: 12px; left: 12px; }
    .v2lv-stats   { height: 25px; font-size: 11.5px; top: 12px; right: 12px; }
    .v2lv-eye, .v2lv-thumb-ico { width: 13.5px; height: 13.5px; }
}

/* backdrop-filter 미지원 브라우저 — 유리 대신 더 진한 반투명으로 가독성 유지 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .v2lv-ov-in { background: rgba(0, 0, 0, .62); }
    .v2lv-badge { background: rgba(18, 18, 22, .78); }
    .v2lv-stats { background: rgba(0, 0, 0, .68); }
}

@media (prefers-reduced-motion: reduce) {
    .v2lv-dot { animation: none; }
    .v2lv-reco, .v2lv-reco.is-bump { animation: none !important; transition: none !important; }
    .v2lv-poster, .v2lv-ov, .v2lv-cta { transition: none; }
}

/* ================================================================ 플로팅 카드
 *  쇼츠 플레이어에서 쓰는 변형. «같은 컴포넌트» 에 상품 썸네일만 추가된다.
 *  별도 디자인을 만들지 않는다 — 클래스와 토큰이 전부 위와 같다.
 * ========================================================================= */
.v2lv-ov.is-float {
    padding: 60px 12px calc(12px + env(safe-area-inset-bottom));
}
.v2lv-ov.is-float .v2lv-ov-in { padding: 10px; border-radius: 16px; }

.v2lv-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.v2lv-ov.is-float .v2lv-title { font-size: 12.5px; }
.v2lv-ov.is-float .v2lv-price { font-size: 14px; }
.v2lv-ov.is-float .v2lv-cta   { min-height: 40px; padding: 0 14px; font-size: 12.5px; }

@media (min-width: 768px) {
    .v2lv-ov.is-float { padding: 64px 14px 14px; }
    .v2lv-thumb { width: 52px; height: 52px; }
    .v2lv-ov.is-float .v2lv-title { font-size: 13.5px; }
    .v2lv-ov.is-float .v2lv-price { font-size: 15px; }
    .v2lv-ov.is-float .v2lv-cta   { min-height: 42px; padding: 0 16px; font-size: 13px; }
}

/* ================================================================ 섹션 헤더
 *  LIVE 섹션의 «제목 + 더보기» 도 이 컴포넌트가 자급자족한다.
 *
 *  [2026-08-01 버그] 이전에는 메인 테마의 .v2-home-sechead / .v2-home-more 에
 *  의존했는데, 그 규칙은 home-v2.css 에만 있다. 상품 상세(item.php)는 그 파일을
 *  로드하지 않아 헤더가 무스타일이 됐고, 크기가 CSS 로만 정해지던 chevron SVG 가
 *  «화면을 가득 채우는 거대한 화살표» 로 렌더됐다(실측).
 *  → LIVE 섹션은 어느 페이지에 놓여도 같은 모습이 되도록 여기서 전부 정의한다.
 * ========================================================================= */
.v2lv-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}
.v2lv-sechead-l { min-width: 0; }
.v2lv-sechead h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #16161a;
}
.v2lv-sechead p {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8b8b93;
}
.v2lv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #e0264a;
    text-transform: uppercase;
}
.v2lv-eyebrow .v2lv-dot { width: 6px; height: 6px; }

.v2lv-more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #8b8b93;
    text-decoration: none;
    white-space: nowrap;
}
.v2lv-more:hover { color: #16161a; }
/* ★ 크기를 CSS «와» 속성 양쪽에 못박는다. 이 규칙이 없는 페이지에서도
   마크업의 width/height 속성이 남아 거대 렌더가 재발하지 않는다. */
.v2lv-more svg { width: 15px; height: 15px; flex: 0 0 auto; }

@media (min-width: 1024px) {
    .v2lv-sechead   { margin-bottom: 14px; }
    .v2lv-sechead h2 { font-size: 20px; }
    .v2lv-sechead p  { font-size: 12.5px; }
    .v2lv-more       { font-size: 12.5px; }
}


/* ================================================================ 좁은 카드 대응
 *  뷰포트가 아니라 «카드 폭» 을 기준으로 줄인다.
 *  예) PC 상품상세의 1/4 열 카드(≈190px)는 뷰포트가 1440px 이라 모바일 미디어쿼리가
 *      걸리지 않는다 → 컨테이너 쿼리로만 잡을 수 있다.
 *  디자인·구조·색은 그대로이고 «치수만» 작아진다.
 * ========================================================================= */
@supports (container-type: inline-size) {
    @container lvcard (max-width: 240px) {
        .v2lv-ov      { padding: 10px 6px 6px; gap: 6px; }
        .v2lv-ov-in   { padding: 4px 4px 4px 7px; gap: 6px; border-radius: 10px; }
        .v2lv-brand   { font-size: 9px; }
        .v2lv-title   { font-size: 10.5px; line-height: 1.3; }
        .v2lv-price   { font-size: 11.5px; }
        .v2lv-cta     { height: 26px; padding: 0 7px; font-size: 10px; border-radius: 8px; }
        .v2lv-badge   { height: 21px; font-size: 9px; padding: 0 7px 0 6px; top: 8px; left: 8px; }
        .v2lv-stats   { height: 21px; font-size: 9.5px; padding: 0 7px; gap: 5px; top: 8px; right: 8px; }
        .v2lv-eye, .v2lv-thumb-ico { width: 11px; height: 11px; }
    }
    @container lvcard (max-width: 168px) {
        /* 초협소 — CTA 를 아이콘만 남긴다(레이블은 스크린리더에 남는다) */
        .v2lv-cta { padding: 0 7px; font-size: 0; min-width: 30px; }
        .v2lv-cta::after {
            content: '›';
            font-size: 17px;
            font-weight: 800;
            line-height: 1;
        }
    }
}