/* ============================================================================
 * 배때지 V2 · /live/ 실시간 쇼핑(온에어)
 *
 *   본문 폭은 조상 .v2live-shell 이 정한다 — 여기서 max-width 를 다시 걸지 않는다
 *   (걸면 PC 에서 이중 축소돼 모바일처럼 좁아진다).
 *
 *   브레이크포인트는 기존 V2 규칙 그대로:
 *     ~600px 모바일 · 601~1023px 태블릿 · 1024px~ PC
 *
 *   색은 배때지 기본(검정·흰색) + LIVE 공용 포인트(--lv-point, live-ui.css)만 쓴다.
 *   방송중 표식에만 붉은 계열을 허용한다(LIVE 배지의 관습적 의미).
 * ========================================================================== */

/* PC 본문 최대폭 — 영상+채팅 2열을 담으려면 기본 1320px 로는 좁다.
   ★ 페이지 컨테이너에 max-width 를 또 걸면 «이중 축소» 가 난다(기존 함정) →
     셸 자체의 폭만 이 페이지에서 넓힌다.
   ★ shop-final.min.css 는 @media(min-width:1024px) 에서 `max-width:1320px !important` 를
     «리터럴로» 박아 둔다(변수 경유가 아니다). 그래서 --v2-width 만 올리면 계산에 쓰이지
     않는다(실측: var=1560px 인데 max-width 는 1320px). 기존 !important 를 이기려면
     같은 속성을 !important 로 되돌리는 수밖에 없다 — 이 페이지 한정 규칙 하나로만 쓴다. */
@media (min-width: 1200px) {
    .v2live-shell--wide {
        --v2-width: 1560px;
        max-width: 1560px !important;
    }
}

.v2os {
    --os-line:    #e9e9ec;
    --os-ink:     #111;
    --os-ink-2:   #666;
    --os-ink-3:   #9a9aa2;
    --os-bg-soft: #f7f7f8;
    --os-live:    #e0264a;
    --os-radius:  16px;

    padding: 0 0 40px;
}

/* 스크린리더 전용 */
.v2os-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;
}

/* ------------------------------------------------------------ 시험 운영 안내 */
/* 고객이 «정식 방송» 으로 오해하지 않도록 맨 위에 둔다. 요란한 경고색 대신
   배때지 검정 기반 + 얇은 테두리로, 페이지 톤을 깨지 않게 한다. */
.v2os-testbar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 0;
    padding: 11px 13px;
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    background: #fff;
    font-size: 12.5px;
    line-height: 1.5;
    color: #333;
    word-break: keep-all;
}
.v2os-testtag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .v2os-testbar { align-items: flex-start; font-size: 12px; padding: 10px 11px; }
}

/* ---------------------------------------------------------------- 페이지 헤드 */
.v2os-head { padding: 18px 0 14px; }

.v2os-h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--os-ink);
}
.v2os-h1 .v2os-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--os-live);
    box-shadow: 0 0 0 4px rgba(224, 38, 74, .14);
}
.v2os-lead {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--os-ink-2);
    word-break: keep-all;
}

/* 검색 — 모바일에서도 «한 줄» 유지 */
.v2os-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.v2os-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;                 /* flex 자식이 줄어들 수 있게 — 없으면 줄바꿈처럼 보인다 */
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--os-line);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: var(--os-ink);
    -webkit-appearance: none;
    appearance: none;
}
.v2os-search input[type="search"]::placeholder { color: var(--os-ink-3); }
.v2os-search input[type="search"]:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .07);
}
.v2os-search button {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.v2os-search button:hover { background: #000; }

/* ---------------------------------------------------------------- 페이지 탭 */
/* 실시간 방송(/live/) · 상품 영상(/live/videos.php) — 서로 다른 «페이지» 다.
   따라서 button 이 아니라 실제 링크(a)로 만든다: 새로고침·뒤로가기·URL 공유가 모두 산다. */
.v2os-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    padding: 4px;
    border-radius: 14px;
    background: #f2f2f4;
}
.v2os-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    color: #6b6b73;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.v2os-tab.is-on {
    background: #fff;
    color: #111;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.v2os-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .07);
    font-size: 11px;
    font-weight: 700;
    color: inherit;
}
.v2os-tab.is-on span { background: #111; color: #fff; }

@media (min-width: 1024px) {
    .v2os-tabs { max-width: 420px; }
    .v2os-tab { height: 44px; font-size: 14px; }
}

/* ============================================================================
 * 방송 레이아웃 (2026-08-02 · 영상 + 채팅)
 *
 *   .v2os-stagewrap = [무대][채팅] 2열 그리드의 부모
 *     모바일(~767)   : 1열. 채팅은 탭 안으로 들어간다.
 *     태블릿(768~1199): 폭이 900 이상이면 2열, 그 미만이면 세로 배치
 *     PC(1200~)      : 2열 고정 — 영상 70% / 채팅 30%
 *
 *   높이는 «하드코딩하지 않는다». 무대는 aspect-ratio 로 자기 높이를 정하고,
 *   채팅은 그리드 stretch 로 그 높이를 그대로 받는다.
 * ========================================================================== */
.v2os-stagewrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 0 0 16px;
    align-items: stretch;
}

/* 태블릿: 폭이 충분할 때만 2열 */
@media (min-width: 900px) and (max-width: 1199px) {
    .v2os-stagewrap { grid-template-columns: minmax(0, 1fr) 300px; }
}
/* PC: 영상 약 70% / 채팅 약 30% */
@media (min-width: 1200px) {
    .v2os-stagewrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
}
@media (min-width: 1600px) {
    .v2os-stagewrap { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* 채팅 칸 — 2열일 때 무대와 같은 높이를 갖는다 */
.v2os-chatcol { min-width: 0; min-height: 0; display: flex; }
.v2os-chatcol > .v2ch { flex: 1 1 auto; }

/* 모바일에서는 그리드의 채팅 칸을 숨기고 탭 안의 것만 쓴다 */
@media (max-width: 899px) {
    .v2os-chatcol { display: none; }
}
@media (min-width: 900px) {
    .v2os-tabs-m, .v2os-tabpanel { display: none !important; }
}

/* ---------------------------------------------------------------- 모바일 탭 */
.v2os-tabs-m {
    display: flex;
    gap: 6px;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 12px;
    background: #f2f2f4;
}
.v2os-tabm {
    position: relative;
    flex: 1 1 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #6b6b73;
    cursor: pointer;
}
.v2os-tabm.is-on { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.v2os-tabm .dot {
    min-width: 16px; height: 16px;
    padding: 0 4px;
    display: none;
    align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--os-live, #e0264a);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}
.v2os-tabm.has-new .dot { display: inline-flex; }

.v2os-tabpanel[hidden] { display: none; }

/* ---------------------------------------------------------------- 방송 무대 */
.v2os-stage {
    position: relative;
    margin: 0 0 16px;
    border-radius: var(--os-radius);
    overflow: hidden;
    background: #0b0b0d;
    isolation: isolate;
}

/* 비율 — 방송 설정값(가로 16:9 / 세로 9:16)을 그대로 따른다.
   모바일 세로형은 화면을 넘지 않도록 높이 상한을 둔다. */
.v2os-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0b0b0d;
}
.v2os-stage.is-portrait .v2os-frame {
    aspect-ratio: 9 / 16;
    max-height: min(78vh, 720px);
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    aspect-ratio: 9 / 16;
}
.v2os-frame > iframe,
.v2os-frame > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #0b0b0d;
    object-fit: contain;
}

/* 대기/오류 화면 — 빈 검은 화면이 아니라 «의도된» 화면 */
.v2os-idle {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 18px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(120% 90% at 50% 0%, #23232a 0%, #121216 55%, #0b0b0d 100%);
}
.v2os-idle-ico {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    margin: 0 0 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.v2os-idle-ico svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.v2os-idle-t {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.v2os-idle-d {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .66);
    word-break: keep-all;
}
.v2os-idle-foot {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.v2os-idle-foot strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}
.v2os-idle-foot span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
}

/* 배지 줄(LIVE / 시청자 / 시작시각) */
.v2os-badges {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: calc(100% - 24px);
    pointer-events: none;
}
.v2os-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}
.v2os-badge.is-live { background: var(--os-live); }
.v2os-badge.is-live i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: v2osPulse 1.6s ease-in-out infinite;
}
.v2os-badge svg { width: 13px; height: 13px; fill: currentColor; }
@keyframes v2osPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .v2os-badge.is-live i { animation: none; }
}

/* ---------------------------------------------------------------- 방송 정보 */
.v2os-info { margin: 0 0 18px; }
.v2os-info-t {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.4;
    color: var(--os-ink);
    /* 긴 제목도 레이아웃을 밀지 않는다 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.v2os-info-d {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--os-ink-2);
    word-break: keep-all;
    white-space: pre-line;
}
.v2os-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    color: var(--os-ink-3);
}
.v2os-meta span { display: inline-flex; align-items: center; gap: 5px; }
.v2os-meta svg { width: 14px; height: 14px; fill: currentColor; opacity: .75; }

/* ---------------------------------------------------------------- 혜택 카드 */
.v2os-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 26px;
}
.v2os-benefits.is-1 { grid-template-columns: minmax(0, 1fr); }
.v2os-benefits.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.v2os-benefit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
    border: 1px solid var(--os-line);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
}
a.v2os-benefit:hover { border-color: #111; }
.v2os-benefit-ico {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: #111;
}
.v2os-benefit-ico svg { width: 16px; height: 16px; fill: #fff; }
.v2os-benefit-tx {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.v2os-benefit strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--os-ink);
    letter-spacing: -.01em;
}
.v2os-benefit span {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--os-ink-3);
    word-break: keep-all;
}

/* ---------------------------------------------------------------- 섹션 공통 */
.v2os-sec { margin: 0 0 30px; }
.v2os-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}
.v2os-sechead h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--os-ink);
}
.v2os-sechead p {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--os-ink-3);
}
.v2os-seccount {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--os-ink-3);
}

.v2os-empty {
    padding: 26px 16px;
    border: 1px dashed var(--os-line);
    border-radius: 14px;
    background: var(--os-bg-soft);
    text-align: center;
    font-size: 13px;
    color: var(--os-ink-3);
}

/* ---------------------------------------------------------------- 방송 상품 */
.v2os-prods {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 6px;
    /* 가로 스크롤바는 숨기되 스크롤은 유지 */
    scrollbar-width: none;
}
.v2os-prods::-webkit-scrollbar { display: none; }

.v2os-prod {
    flex: 0 0 62%;
    max-width: 260px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--os-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    position: relative;
}
.v2os-prod.is-featured { border-color: #111; box-shadow: 0 0 0 1px #111 inset; }

.v2os-prod-img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--os-bg-soft);
    overflow: hidden;
}
.v2os-prod-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.v2os-nowbadge {
    position: absolute;
    top: 8px; left: 8px;
    height: 22px;
    padding: 0 8px;
    display: none;                 /* is-featured 일 때만 보인다 */
    align-items: center;
    border-radius: 999px;
    background: var(--os-live);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
}
.v2os-prod.is-featured .v2os-nowbadge { display: inline-flex; }

.v2os-prod-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 11px 12px;
    flex: 1 1 auto;
}
.v2os-prod-brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--os-ink-3);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2os-prod-name {
    font-size: 13px;
    line-height: 1.45;
    color: var(--os-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    word-break: break-word;
}
.v2os-prod-price {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 800;
    color: var(--os-ink);
}
.v2os-prod-deal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--os-live);
}
.v2os-prod-acts {
    display: flex;
    gap: 6px;
    /* 특가 줄이 있는 카드와 없는 카드의 버튼 높이를 맞춘다(가로 나열 시 들쭉날쭉 방지) */
    margin-top: auto;
    padding-top: 10px;
}
.v2os-prod-acts a {
    flex: 1 1 0;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--os-line);
    color: var(--os-ink);
    background: #fff;
}
.v2os-prod-acts a.is-primary {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* ---------------------------------------------------------------- 지난 방송 */
.v2os-past { display: flex; flex-direction: column; gap: 10px; }

.v2os-pastcard {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    padding: 0;
    border: 1px solid var(--os-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.v2os-pastcard:hover { border-color: #111; }

/* ★ aspect-ratio 를 쓰면 안 된다.
   그리드 아이템은 기본이 stretch 라 «행 높이» 로 늘어나는데, 그 상태에서 aspect-ratio 가
   폭을 되계산해(높이×16/10) 116px 열을 넘어 본문 글자 위를 덮었다(실측 156px).
   열 폭과 행 높이를 그대로 채우게 두고, 이미지는 object-fit:cover 로 잘라 맞춘다. */
.v2os-pastthumb {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 78px;
    background: #111;
    overflow: hidden;
}
.v2os-pastthumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.v2os-pastthumb .v2os-noimg {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: rgba(255, 255, 255, .35);
    font-size: 11px;
    letter-spacing: .1em;
}
.v2os-pastflag {
    position: absolute;
    left: 7px; bottom: 7px;
    height: 20px; padding: 0 7px;
    display: inline-flex; align-items: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

.v2os-pastbody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 12px 14px 12px 0;
    min-width: 0;
}
.v2os-pasttitle {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--os-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.v2os-pastmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--os-ink-3);
}
.v2os-pastmeta span { display: inline-flex; align-items: center; gap: 4px; }
.v2os-pastmeta svg { width: 13px; height: 13px; fill: currentColor; opacity: .7; }

/* ---------------------------------------------------------------- 알림 박스 */
.v2os-alarm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
    background: #111;
    color: #fff;
}
.v2os-alarm-txt strong {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.v2os-alarm-txt span {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .6);
    word-break: keep-all;
}
.v2os-alarm-btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #111;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.v2os-alarm-btn svg { width: 16px; height: 16px; fill: currentColor; }
.v2os-alarm-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .34) inset;
}
.v2os-alarm-btn[disabled] { opacity: .6; cursor: default; }

/* ---------------------------------------------------------------- 상품 영상 */
/* 기존 제품 LIVE(쇼츠) 20건은 «방송» 이 아니다. 지난 방송으로 위장하지 않고
   별도 섹션으로 유지한다. 카드는 기존 live-ui.css 규칙을 그대로 쓴다. */
.v2os-shorts { margin-top: 6px; }
.v2os-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--os-line);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--os-ink);
    text-decoration: none;
}
.v2os-more:hover { border-color: #111; }

/* ---------------------------------------------------------------- 반응형 */

/* 모바일 — 좌우 여백 14px, 하단 고정 내비와 겹치지 않게 여백 확보 */
@media (max-width: 600px) {
    .v2os { padding: 0 14px calc(96px + env(safe-area-inset-bottom, 0px)); }
    .v2os-head { padding: 14px 0 12px; }
    .v2os-h1 { font-size: 19px; }
    .v2os-stage { margin-left: 0; margin-right: 0; border-radius: 14px; }
    .v2os-benefits { gap: 6px; }
    .v2os-benefit { padding: 11px 9px; }
    .v2os-benefit-tx > span { display: none; }    /* 모바일은 아이콘+제목만 */
    .v2os-prod { flex-basis: 58%; }
    .v2os-pastcard { grid-template-columns: 116px minmax(0, 1fr); }
    .v2os-pastbody { padding: 10px 12px 10px 0; }
    .v2os-alarm { flex-direction: column; align-items: stretch; text-align: left; }
    .v2os-alarm-btn { width: 100%; justify-content: center; }
}

/* 태블릿 */
@media (min-width: 601px) and (max-width: 1023px) {
    .v2os { padding: 0 18px 60px; }
    .v2os-prod { flex-basis: 32%; }
}

/* PC — 본문 폭을 충분히 쓰고, 상품은 4열 그리드로 정렬한다 */
@media (min-width: 1024px) {
    .v2os { padding: 0 0 70px; }
    .v2os-head { padding: 26px 0 18px; }
    .v2os-h1 { font-size: 26px; }
    .v2os-lead { font-size: 14.5px; max-width: 760px; }
    .v2os-search { max-width: 560px; }

    .v2os-info-t { font-size: 22px; }
    .v2os-stage { margin-bottom: 18px; }
    /* PC 가로형: «높이 상한» 으로 자르면 16:9 가 깨져 플레이어가 레터박스로 채워진다.
       비율을 유지한 채 크기만 제한하려면 폭을 제한해야 한다(1100 × 9/16 ≈ 619px). */
    .v2os-stage:not(.is-portrait) .v2os-frame {
        max-width: 1100px;
        margin: 0 auto;
    }
    .v2os-stage.is-portrait .v2os-frame { max-height: 640px; }

    .v2os-benefits { gap: 12px; }
    .v2os-benefit { flex-direction: row; align-items: center; gap: 12px; padding: 16px; }
    .v2os-benefit-ico { flex: 0 0 auto; width: 36px; height: 36px; }

    /* 상품이 4개 이하면 가로 스크롤 대신 4열 그리드 */
    .v2os-prods.is-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        overflow: visible;
    }
    .v2os-prods.is-grid .v2os-prod { flex: initial; max-width: none; }
    .v2os-prods:not(.is-grid) .v2os-prod { flex-basis: 23%; max-width: 300px; }

    /* 지난 방송 — 2열(작은 4열 카드 금지) */
    .v2os-past {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .v2os-pastcard { grid-template-columns: 168px minmax(0, 1fr); }

    .v2os-sechead h2 { font-size: 18px; }
}

/* PC 에서 «모바일 하단 고정 내비» 숨김 (2026-08-02 지시)
   ────────────────────────────────────────────────────────────
   bottom-nav-common.css 는 «모든 V2 화면» 에 display:flex !important 로 이 바를
   띄운다. PC 에서도 화면 하단에 떠 있어 방송 화면·상품 카드와 겹쳐 보였다.
   전역 규칙을 고치면 V2 전 페이지 레이아웃이 바뀌므로, 이 파일이 로드되는
   «실시간 쇼핑 페이지(/live/, /live/videos.php)» 에서만 되돌린다.
   태블릿(601~1023px)은 터치 환경이라 그대로 둔다. */
@media (min-width: 1024px) {
    html body .v2shop-bottom-nav { display: none !important; }
}

/* 초대형 화면에서는 조금 더 크게(비율은 그대로 16:9) */
@media (min-width: 1600px) {
    .v2os-stage:not(.is-portrait) .v2os-frame { max-width: 1240px; }
}