/* ============================================================================
 * 배때지 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); }
}

/* ------------------------------------------------- 좌상단 배지 줄 (2026-09-13)
 *  LIVE 배지 «옆» 에 검수영상 배지를 붙이기 위한 가로 줄이다.
 *  좌표(top/left)를 갖는 주체가 개별 배지에서 이 래퍼로 옮겨 왔다 — 안쪽 배지는
 *  position:static 이 되어 흐름대로 나란히 놓인다.
 *
 *  ★ 선택자를 일부러 «두 번» 겹쳤다(.v2lv-badges.v2lv-badges).
 *    live.css(.v2lvd-stage .v2lv-badge)·live-player.css(.v2lp-media .v2lv-badge)가
 *    같은 0,2,0 특정도로 top/left 를 덮어쓰고 있어, 파일 로드 순서에 기대지 않고
 *    이기려면 0,3,0 이 필요하다. !important 는 쓰지 않는다.
 * ========================================================================= */
/* ── 상단 한 줄 래퍼 (2026-09-13) ──────────────────────────────────────────
 *  LIVE · 검수영상 · 조회수 · 추천 «네 개» 를 한 줄에 나란히 놓는 유일한 자리.
 *
 *  왜 래퍼를 만들었나 — 예전에는 배지줄이 좌상단 absolute, 통계배지가 우상단
 *  absolute 라 서로를 모르는 채 같은 y 에 떠 있었다. 카드가 좁아지면 그대로
 *  겹쳤다(실측: 뷰포트 360 → 카드 159px 인데 둘이 필요로 한 폭은 227px).
 *  이제 둘 다 이 flex 줄의 항목이라 «겹침이 구조적으로 불가능» 하다 —
 *  자리가 모자라면 서로를 덮는 대신 검수영상 배지가 줄어든다.
 *
 *  좌표(top/left/right)의 주체는 개별 배지도, 배지줄도 아닌 이 래퍼다.
 * ========================================================================= */
.v2lv-topbar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;                 /* 오른쪽 끝까지 = 네 항목이 쓸 수 있는 전체 폭 */
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;           /* 접히면 아랫줄이 영상을 가린다 — 대신 줄여서 맞춘다 */
    pointer-events: none;        /* 추천 버튼만 아래에서 다시 켠다 */
}

.v2lv-badges {
    position: static;            /* 좌표는 .v2lv-topbar 가 갖는다 */
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;              /* 자리가 부족하면 여기가 먼저 줄어든다 */
    min-width: 0;
    flex-wrap: nowrap;
    pointer-events: none;
}
/* 줄일 때의 순서: LIVE 는 끝까지 온전히, 부족분은 «검수영상» 이 감당한다.
   (LIVE 가 잘리면 무슨 화면인지 자체가 안 읽힌다) */
.v2lv-badges .v2lv-badge    { flex: 0 0 auto; }
.v2lv-badges .v2lv-badge-qc { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.v2lv-badges.v2lv-badges .v2lv-badge {
    position: static;
    top: auto;
    left: auto;
}

/* 검수영상 배지 — LIVE 배지와 «같은 유리», 바탕 색조만 붉은핑크다.
 *
 *   .v2lv-badge 를 함께 달고 있으므로 높이·패딩·간격·반지름·테두리·글자크기·
 *   굵기·backdrop blur 를 «전부 그대로» 물려받는다. 여기서는 색조와 한글 자간,
 *   두 가지만 바꾼다 — 나란히 놓였을 때 같은 부품의 «다른 색» 으로 읽히게 하려면
 *   그 외의 값을 건드리면 안 된다(단색·그라디언트·드롭섀도를 주면 겉돈다).
 *
 *   색만으로 뜻을 전하지 않도록 재생표시(▶)와 '검수영상' 텍스트를 함께 둔다.
 */
.v2lv-badge-qc {
    /* 알약·테두리링·유리(blur)는 LIVE 와 같고 «색만» 다르다.
       단, LIVE 의 .55 를 그대로 따라 흐리게 두면 붉은핑크가 회색빛으로 죽는다
       (검정은 옅어도 검정이지만, 채도 있는 색은 옅어지면 색을 잃는다).
       그래서 알파만 올려 색이 또렷하게 서게 한다 — 모양이 같으니 겉돌지 않는다. */
    background: rgba(227, 38, 106, .92);
    /* 테두리 링은 LIVE 와 똑같이 유지(상속) — 여기서 더 밝게 주면 혼자 도드라진다 */
    letter-spacing: .01em;   /* 한글은 자간을 벌리지 않는다(LIVE 의 .1em 은 라틴 대문자용) */
}

/* 재생표시(▶) — LIVE 의 점(.v2lv-dot, 6px 고정)과 «같은 자리·같은 시각 무게».
   점이 어느 폭에서도 커지지 않으므로 이 삼각형도 구간별로 키우지 않는다.
   삼각형은 같은 크기의 원보다 작아 보여서 7px 로 둔다(광학 보정). */
.v2lv-play {
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    fill: currentColor;
}

/* ------------------------------------------------------- 조회수 + 추천 배지(§7)
 *  «하나의» 얇은 유리 배지 안에 [눈 조회수] · [엄지 추천] 을 나란히 둔다.
 *  두 개의 큰 배지로 쪼개지 않는다. LIVE 배지(좌상단)와 같은 높이·같은 유리.
 *  추천만 버튼이라 클릭을 받고, 조회수는 텍스트다.
 * ========================================================================= */
.v2lv-stats {
    position: static;            /* 좌표는 .v2lv-topbar 가 갖는다 */
    flex: 0 0 auto;              /* 숫자는 줄이지 않는다 — 줄면 읽을 수가 없다 */
    margin-left: auto;           /* ★ 줄의 오른쪽 끝 = 예전 absolute right:10px 와 «같은 그림».
                                       PC·태블릿은 이 기본값 그대로라 종전과 달라지지 않는다.
                                       모바일에서만 아래 미디어쿼리가 0 으로 바꿔
                                       네 항목을 붙여서 한 줄로 세운다. */
    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;
    /* 2026-08-24 접근성(target-size): 버튼 «자체» 박스가 22x11 이라 최소 24x24 에 미달했다.
       ::before 로 만든 히트영역은 감사기가 보는 getClientRects() 에 포함되지 않는다.
       padding 으로 박스를 키우고 같은 값의 음수 margin 으로 되돌려
       «주변 배치·보이는 위치는 그대로» 둔 채 탭 영역만 넓힌다. */
    margin: -7px -5px;
    padding: 7px 5px;
    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: 44px;   /* 2026-08-24 접근성: 최소 터치 타깃 44×44 충족(기존 40) */
    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; }
    .v2lv-topbar  { top: 11px; left: 11px; right: 11px; gap: 6px; }
    .v2lv-stats   { height: 24px; font-size: 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; }
    .v2lv-topbar  { top: 12px; left: 12px; right: 12px; gap: 6px; }
    .v2lv-stats   { height: 25px; font-size: 11.5px; }
    .v2lv-eye, .v2lv-thumb-ico { width: 13.5px; height: 13.5px; }
}

/* 카드가 더 좁아지면 «검수영상» 을 단계적으로 줄여 네 개를 끝까지 지킨다.
   글자가 «검수영…» 으로 잘리는 것보다, 짧아도 온전한 낱말이 낫다.
   어느 단계에서도 뜻은 배지의 aria-label(«검수영상»)이 그대로 읽어 준다. */
@supports (container-type: inline-size) {
    /* 문턱값은 «남는 폭» 을 실측해서 정했다. 카드 폭에서
       LIVE(43) + 조회수·추천(69) + 사이(6) 를 뺀 값이 검수영상 배지 몫이다.
         카드 186 → 52 남음 → «검수»(32) 는 들어가고 «검수영상»(58) 은 못 들어간다
         카드 159 → 25 남음 → 글자는 어떤 길이도 안 들어간다 → ▶ 만 남긴다
       그래서 200 / 168 두 단계로 끊는다(경계는 여유를 두고 잡았다). */

    /* 1단계 — 꼬리를 뗀다: 검수영상 → 검수 */
    @container lvcard (max-width: 165px) {
        .v2lv-qc-tail { display: none; }
    }
    /* 2단계 — 글자를 통째로 내리고 ▶ 아이콘만 남긴다.
       분홍 알약과 ▶ 는 그대로라 «검수영상» 이라는 구분은 눈으로도 유지되고,
       읽어 주는 이름은 aria-label 이 «검수영상» 으로 그대로 남는다. */
    @container lvcard (max-width: 145px) {
        .v2lv-qc-txt   { display: none; }
        .v2lv-badge-qc { padding: 0 5px; gap: 0; }
        .v2lv-play     { width: 7px; height: 7px; }
    }
    /* 3단계(초협소) — ▶ 조차 못 들어간다. 조회수·추천 쪽에서 폭을 마련한다.
       구분선은 알약 안에서 «둘» 이라는 걸 이미 간격이 말해 주므로 먼저 뺀다. */
    @container lvcard (max-width: 150px) {
        .v2lv-statsep { display: none; }
        .v2lv-stats   { padding: 0 4px; gap: 2px; font-size: 8px; }
        .v2lv-stat    { gap: 2px; }
        .v2lv-eye, .v2lv-thumb-ico { width: 9px; height: 9px; }
        /* LIVE 도 여기서만 한 번 더 조인다 — ▶ 알약이 들어갈 마지막 몇 px 을 만든다 */
        .v2lv-badge   { font-size: 8px; padding: 0 4px 0 3px; gap: 2px; }
        .v2lv-dot     { width: 4px; height: 4px; }
        .v2lv-topbar, .v2lv-badges { gap: 1px; }
        /* ▶ 알약을 마지막 한 칸까지 줄인다(여기서는 아이콘만 남아 있는 상태다) */
        .v2lv-badge-qc { padding: 0 3px; }
        .v2lv-play     { width: 6px; height: 6px; }
    }
}

/* 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-badge-qc { background: rgba(219, 34, 100, .97); }
    .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;
}
/* 2026-08-24 대비 보정: #8b8b93 는 흰/연회색 배경에서 3.12~3.38:1 로 AA 미달.
   글자 크기·굵기·문구·여백은 그대로 두고 색만 4.5:1 이상으로 낮춘다. */
.v2lv-sechead p {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b6b73;
}
.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: #6b6b73;   /* 2026-08-24 대비 보정 (기존 #8b8b93, 3.12:1 → 4.88:1) */
    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; }
        .v2lv-badges  { gap: 4px; }
        .v2lv-topbar  { top: 8px; left: 8px; right: 8px; }   /* 좌표는 래퍼가 갖는다 */
        .v2lv-stats   { height: 21px; font-size: 9.5px; padding: 0 7px; gap: 5px; }
        .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;
        }
    }
}

/* 2026-08-24 대비 보정 — .v2-price-cny (원가 위안 표시)
   색이 PHP 인라인(color:#9b9b9b / #8e8e8e)으로 박혀 있어 2.57~3.28:1 로 AA 미달이다.
   출력 PHP(v2/lib/v2_price.php 등)는 이번 범위 밖이라 손대지 않고,
   공통 CSS 한 줄로만 덮는다. 인라인을 이기려면 !important 가 필요하다.
   크기·여백·문구·레이아웃은 그대로다(색만). */
.v2-price-cny { color: #6b6b73 !important; }

/* ★ 이 블록은 «파일 맨 끝» 에 있어야 한다 ────────────────────────────────────
   바로 위의 @container lvcard(max-width:240px) 와 특정도가 같다. 먼저 두면
   컨테이너 블록이 나중에 나와 이겨 버리고, 모바일 치수가 통째로 무시된다.
   컨테이너 블록은 PC 상품상세의 좁은 카드용이라 지우면 안 되고, 순서로 가른다.
   ========================================================================== */

/* ======================================================= 모바일 배지 줄 치수
 *  배치는 PC 와 «같다». 치수만 줄인다.
 *    왼쪽  : LIVE · 검수영상  — 각각 «따로» 선 알약 두 개
 *    오른쪽: 조회수 · 추천    — 원래대로 알약 «하나» 로 붙여 오른쪽 끝 고정
 *            (.v2lv-stats 의 margin-left:auto 가 기본값이라 여기서 줄 게 없다)
 *
 *  통짜 알약·구획선은 쓰지 않는다. 겹치지 않는 것은 .v2lv-topbar 라는 flex 줄이
 *  보장한다 — 자리가 모자라면 서로를 덮는 대신 검수영상 배지가 줄어든다.
 * ========================================================================= */
@media (max-width: 600px) {
    /* 알약 «셋» 이 한 줄에 들어가야 한다. 실측(390px → 카드 174 · 쓸 폭 158):
         LIVE 38 + 검수영상 52 + 조회수·추천 58 + 사이 8 = 156 → 겨우 들어간다.
       여기서 여백을 1px 만 키워도 «검수영상» 부터 잘리기 시작한다. */
    .v2lv-topbar { gap: 4px; }
    .v2lv-badges { gap: 4px; }

    .v2lv-badge  { height: 22px; font-size: 8.5px; letter-spacing: 0;
                   padding: 0 5px 0 4px; gap: 3px; }
    .v2lv-dot    { width: 5px; height: 5px; }
    .v2lv-play   { width: 6px; height: 6px; }

    .v2lv-stats  { height: 22px; font-size: 8.5px; padding: 0 5px; gap: 3px; }
    .v2lv-stat   { gap: 3px; }
    .v2lv-eye, .v2lv-thumb-ico { width: 9px; height: 9px; }
}

/* 좁은 폰(≈360 이하) — 알약 여백만 1px 씩 더 조여 «검수영상» 글자를 지킨다.
   ★ 이 블록은 위의 (max-width:600px) 보다 «뒤» 에 있어야 이긴다 — 특정도가 같다. */
@media (max-width: 380px) {
    .v2lv-topbar { gap: 3px; }
    .v2lv-badges { gap: 3px; }
    .v2lv-badge  { padding: 0 4px 0 3px; }
    .v2lv-stats  { padding: 0 4px; gap: 2px; }
    .v2lv-stat   { gap: 2px; }
}