/* ==========================================================================
     view.php — ToLive 톤 (라이트 베이스 + 블루/오렌지 + 영상만 검정)
     모바일 우선 (max-width 540) · PC 에서는 양옆 회색 배경 + 중앙 정렬
     ========================================================================== */
  /* 페이지 배경 — 흰색 (2026-10-29). 종전 hsl(220 14% 93%) 회색이었다.
     ⚠️ view.php 는 body 에 lv-omk 가 붙어 broadcast-omk.css 의
        'background:#000 !important' 가 최종 승자다. 즉 이 줄은 실제로는
        화면에 보이지 않는 **죽은 규칙**이었고, 같은 페이지의 배경을
        세 파일(인라인 #0f0f0f · 여기 회색 · omk 검정)이 각자 선언하는
        충돌 상태였다. 혼선을 줄이려고 회색만 걷어낸다. */
  body { background: #ffffff; }
  .live-wrap {
    max-width: 540px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: 96px;
    background: hsl(var(--hd-bg));
    position: relative;
  }
  @media (min-width: 1024px) {
    .live-wrap { box-shadow: 0 0 0 1px hsl(var(--hd-border)), 0 12px 36px hsl(0 0% 0% / 0.08); }
  }
  a { color: hsl(var(--hd-brand-deep)); text-decoration: none; }
  a:hover { color: hsl(var(--hd-brand)); }

  /* === Player === */
  .player {
    background: #000;
    aspect-ratio: 9/16;
    position: relative;
    overflow: hidden;
  }
  @media (min-aspect-ratio: 1/1) { .player { aspect-ratio: 16/9; } }
  .player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
  /* 상하단 시네마틱 그라데이션 */
  .player::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 96px;
    background: linear-gradient(180deg, hsl(0 0% 0% / 0.55) 0%, transparent 100%);
    pointer-events: none; z-index: 2;
  }
  .player::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 120px;
    background: linear-gradient(0deg, hsl(0 0% 0% / 0.85) 0%, transparent 100%);
    pointer-events: none; z-index: 2;
  }

  /* LIVE 배지 — glass + ring pulse */
  /* === Replay 모드 — 챕터 마커 + 채팅 하이라이트 === */
  .lv-chapter-bar {
    position: absolute;
    bottom: 50px;
    left: 12px;
    right: 12px;
    height: 22px;
    pointer-events: none;
    z-index: 5;
  }
  .lv-chapter-bar .lv-chapter-mark {
    position: absolute;
    transform: translateX(-50%);
    width: 12px;
    height: 22px;
    background: hsl(17 97% 54% / 0.92);
    border: 2px solid rgba(0,0,0,0.45);
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    transition: transform 120ms;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  .lv-chapter-bar .lv-chapter-mark:hover { transform: translateX(-50%) scale(1.4); }
  /* 채팅 메시지 — replay 모드에서 현재 video 시간과 일치하면 강조 */
  .chat-row.lv-replay-now {
    background: linear-gradient(90deg, hsl(17 97% 54% / 0.22), transparent);
    border-left: 3px solid hsl(17 97% 50%);
    padding-left: 8px !important;
    transition: background 200ms;
  }

  .badge-live {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    background: hsl(var(--hd-live)); color: white;
    padding: 5px 11px 5px 9px;
    border-radius: var(--hd-r-pill);
    font-size: var(--hd-fs-xs); font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: var(--hd-shadow-glow-live);
  }
  .badge-live .live-dot { background: white; box-shadow: 0 0 0 0 hsl(0 0% 100% / 0.7); }
  .badge-live .live-dot { animation: liveRing 1.6s ease infinite; }

  .badge-status {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    background: hsl(var(--hd-info) / 0.85);
    backdrop-filter: blur(8px);
    color: white;
    padding: 5px 12px;
    border-radius: var(--hd-r-pill);
    font-size: var(--hd-fs-xs); font-weight: 700;
    letter-spacing: 0.05em;
  }

  /* === 커스텀 비디오 플레이어 (LIVE 버튼 + DVR + 화질/속도) === */
  .lv-player {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
  }
  .lv-player video {
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
  }
  .lv-controls {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 38px 12px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
    color: #fff;
    z-index: 4;
    opacity: 0;
    transition: opacity 280ms cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
  }
  .lv-player:hover .lv-controls,
  .lv-controls.lv-show {
    opacity: 1;
    pointer-events: auto;
  }
  .lv-progress-wrap {
    margin-bottom: 8px;
    padding: 6px 0;
    cursor: pointer;
  }
  .lv-progress {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    overflow: hidden;
    transition: height 180ms;
  }
  .lv-progress-wrap:hover .lv-progress { height: 6px; }
  .lv-progress-buffered, .lv-progress-played {
    position: absolute; top: 0; bottom: 0; left: 0;
    border-radius: 999px;
    pointer-events: none;
  }
  .lv-progress-buffered { background: rgba(255,255,255,0.4); width: 0%; }
  .lv-progress-played {
    background: linear-gradient(to right, #0B5FD9, #0068F0);
    width: 0%;
    transition: width 200ms linear;
  }
  .lv-controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: visible;
  }
  .lv-btn {
    background: transparent;
    border: 0;
    color: white;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; min-height: 32px;
    transition: background 160ms;
  }
  .lv-btn:hover { background: rgba(255,255,255,0.16); }
  .lv-btn:active { background: rgba(255,255,255,0.24); }
  .lv-btn i { font-size: 13px; }
  .lv-live-btn {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.35);
    color: white;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 180ms;
  }
  .lv-live-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }
  .lv-live-btn.lv-at-edge {
    background: #ef4444;
    border-color: #ef4444;
    cursor: default;
  }
  .lv-live-btn.lv-at-edge .lv-live-dot { animation: lvLiveDotPulse 1.6s ease infinite; }
  .lv-live-btn.lv-at-edge:hover { background: #dc2626; }
  .lv-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
    transition: background 180ms;
  }
  .lv-live-btn.lv-at-edge .lv-live-dot { background: white; box-shadow: 0 0 0 0 rgba(255,255,255,0.8); }
  @keyframes lvLiveDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }
  .lv-time-display {
    font-size: 11.5px;
    color: #d1d5db;
    margin: 0 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .lv-spacer { flex: 1; }
  .lv-vol-slider {
    width: 70px;
    accent-color: #0068F0;
    cursor: pointer;
  }
  @media (max-width: 540px) {
    .lv-vol-slider { display: none; }
    .lv-time-display { display: none; }
    .lv-controls { padding: 28px 8px 8px; }
    .lv-live-btn { padding: 4px 8px; font-size: 10.5px; }
    .lv-btn { padding: 4px 6px; min-width: 30px; min-height: 30px; }
  }
  .lv-speed-btn, .lv-quality-btn {
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 10px;
    color: white;
    background: transparent;
    border: 1px solid transparent;
  }
  .lv-speed-btn:hover, .lv-quality-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.2);
  }
  .lv-menu {
    position: absolute;
    bottom: 60px;
    right: 12px;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 6px;
    min-width: 140px;
    z-index: 8;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .lv-menu.lv-open { display: block; }
  .lv-menu-title {
    font-size: 10.5px;
    color: #9ca3af;
    padding: 6px 12px 4px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .lv-menu-item {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    color: white;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    transition: background 140ms;
  }
  .lv-menu-item:hover { background: rgba(255,255,255,0.12); }
  .lv-menu-item.lv-active {
    color: #0068F0;
    background: rgba(21,168,146,0.14);
  }
  .lv-menu-item.lv-active::before {
    content: "✓";
    margin-right: 8px;
    font-weight: 800;
  }

  /* 시청자수 카운터 — glass */
  .viewer-count {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    display: none; align-items: center; gap: 7px;
    background: hsl(0 0% 0% / 0.5);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid hsl(0 0% 100% / 0.1);
    color: white;
    padding: 5px 12px;
    border-radius: var(--hd-r-pill);
    font-size: var(--hd-fs-xs); font-weight: 700;
    letter-spacing: -0.01em;
  }
  .viewer-count .vc-dot { width: 7px; height: 7px; background: hsl(var(--hd-live)); border-radius: 50%; animation: vcBlink 1.5s ease-in-out infinite; }
  @keyframes vcBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

  /* === 빈 상태 (방송 준비 중, 종료) — 영상 박스(검정) 안에서 표시 === */
  /*   중앙 정렬을 위해 flex column + centered — 상하좌우 완전 중앙 */
  .empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: hsl(0 0% 80%);
    z-index: 1;
  }
  .empty-state .es-icon {
    font-size: 56px;
    color: hsl(var(--hd-accent));
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 12px hsl(var(--hd-accent) / 0.35));
  }
  .empty-state .es-title { font-size: var(--hd-fs-lg); font-weight: 700; color: white; margin-bottom: 6px; letter-spacing: -0.02em; }
  .empty-state .es-sub { font-size: var(--hd-fs-sm); color: hsl(0 0% 70%); }
  /* 스트림 준비 중 waiting overlay 도 중앙 (viewer.js showWaitingOverlay 가 inset:0 로 생성) */

  /* === Countdown — 영상 박스 안 다크 위에 표시 === */
  .countdown {
    display: inline-flex; gap: 8px;
    font-family: var(--hd-font-mono);
    margin: 18px 0 10px;
  }
  .countdown span {
    background: hsl(0 0% 100% / 0.08);
    border: 1px solid hsl(0 0% 100% / 0.12);
    padding: 14px 14px 12px;
    border-radius: var(--hd-r-md);
    font-size: 28px; font-weight: 800;
    color: hsl(var(--hd-accent));
    min-width: 60px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
  }

  /* === Meta header === */
  .meta {
    padding: 16px 18px 14px;
    background: hsl(var(--hd-surface));
    border-bottom: 1px solid hsl(var(--hd-border));
  }
  .meta h1 {
    font-size: 17px; margin: 0 0 6px;
    color: hsl(var(--hd-text));
    font-weight: 800; letter-spacing: -0.03em;
    line-height: 1.35;
  }
  .meta .store {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--hd-fs-sm);
    color: hsl(var(--hd-text-soft));
    font-weight: 600;
  }
  .meta .store i { color: hsl(var(--hd-brand)); font-size: 11px; }

  /* === Notice === */
  .notice {
    padding: 12px 18px;
    background: linear-gradient(90deg, hsl(216 90% 96%) 0%, hsl(216 85% 92%) 100%);
    border-bottom: 1px solid hsl(216 60% 86%);
    font-size: var(--hd-fs-sm);
    color: hsl(var(--hd-brand-deep));
    display: flex; align-items: flex-start; gap: 8px;
  }
  .notice b { color: hsl(219 100% 25%); font-weight: 800; flex-shrink: 0; }

  /* === Pinned product === */
  .pinned {
    position: relative;
    padding: 14px 18px 14px 22px;
    border-bottom: 1px solid hsl(var(--hd-border));
    display: flex; gap: 12px; align-items: center;
    background: linear-gradient(135deg, hsl(21 100% 97%) 0%, hsl(21 100% 93%) 100%);
    overflow: hidden;
  }
  .pinned::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: linear-gradient(180deg, hsl(var(--hd-accent)) 0%, hsl(16 95% 45%) 100%);
    box-shadow: 0 0 12px hsl(var(--hd-accent) / 0.5);
  }
  .pinned img {
    width: 60px; height: 60px;
    object-fit: cover;
    border-radius: var(--hd-r-md);
    background: hsl(var(--hd-elevated));
    box-shadow: 0 1px 3px hsl(0 0% 0% / 0.08);
  }
  .pinned .pn-title {
    font-size: var(--hd-fs-base); font-weight: 600;
    color: hsl(var(--hd-text));
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .pn-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .pinned .pn-price {
    font-size: var(--hd-fs-lg); font-weight: 800;
    color: hsl(var(--hd-live));
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .pn-discount {
    background: hsl(var(--hd-live));
    color: white;
    padding: 2px 8px;
    border-radius: var(--hd-r-sm);
    font-size: var(--hd-fs-xs); font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 1px 3px hsl(var(--hd-live) / 0.25);
  }
  .pn-original {
    color: hsl(var(--hd-muted));
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-size: var(--hd-fs-sm);
    font-weight: 400;
  }
  /* 타임세일 진행 시: 메인 상품 카드 강조 */
  .pinned.is-flash-sale {
    box-shadow: 0 0 0 2px hsl(var(--hd-live)), 0 4px 12px hsl(var(--hd-live) / 0.25);
    animation: pnFsPulse 1.4s ease-in-out infinite;
  }
  @keyframes pnFsPulse {
    0%,100% { box-shadow: 0 0 0 2px hsl(var(--hd-live)), 0 4px 12px hsl(var(--hd-live) / 0.25); }
    50%     { box-shadow: 0 0 0 3px hsl(var(--hd-live)), 0 8px 20px hsl(var(--hd-live) / 0.4); }
  }
  .pinned .pn-price.pn-price-sale {
    color: hsl(var(--hd-live));
    font-size: calc(var(--hd-fs-lg) * 1.05);
  }
  .pn-fs-badge {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, hsl(var(--hd-live)), #ec4899);
    color: #fff;
    padding: 3px 9px; border-radius: 999px;
    font-size: var(--hd-fs-xs); font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(220,38,38,0.35);
  }
  .pn-fs-badge.urgent { animation: pnFsBadgePulse 700ms ease-in-out infinite; }
  @keyframes pnFsBadgePulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.08); }
  }
  .pinned .pn-cta { margin-left: auto; flex-shrink: 0; }
  .pinned .pn-cta button {
    background: hsl(var(--hd-brand));
    color: white;
    font-weight: 700;
    border-radius: var(--hd-r-pill);
    padding: 9px 18px;
    border: 0;
    font-size: var(--hd-fs-sm);
    cursor: pointer;
    box-shadow: 0 4px 12px hsl(var(--hd-brand) / 0.3);
    transition: transform var(--hd-dur-fast) var(--hd-ease), background var(--hd-dur) var(--hd-ease);
  }
  .pinned .pn-cta button:hover { background: hsl(var(--hd-brand-deep)); }
  .pinned .pn-cta button:hover { transform: translateY(-1px); }
  .pinned .pn-cta button:active { transform: translateY(0); }

  .sold-counter {
    display: inline-flex; align-items: center; gap: 4px;
    background: hsl(216 85% 92%);
    color: hsl(var(--hd-brand-deep));
    padding: 3px 8px;
    border-radius: var(--hd-r-sm);
    font-size: var(--hd-fs-xs); font-weight: 700;
  }

  /* === Section title — mkt24 톤 강화 === */
  .section-title {
    padding: 20px 18px 10px;
    font-size: 13px;
    color: hsl(var(--hd-text));
    letter-spacing: -0.025em;
    font-weight: 800;
    display: flex; align-items: center; gap: 8px;
  }
  .section-title::before {
    content: '';
    width: 3px; height: 14px;
    background: linear-gradient(180deg, hsl(var(--hd-brand-2)), hsl(var(--hd-brand)));
    border-radius: 2px;
  }

  /* === Products grid (모바일 1열, 태블릿+ 2열) === */
  .products {
    padding: 0 18px 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  @media (min-width: 480px) {
    .products { grid-template-columns: 1fr 1fr; }
  }
  .product-card {
    position: relative;
    display: flex; gap: 12px;
    padding: 12px;
    background: hsl(var(--hd-surface));
    border: 1px solid hsl(var(--hd-border));
    border-radius: var(--hd-r-lg);
    cursor: pointer;
    transition: transform var(--hd-dur-fast) var(--hd-ease),
                border-color var(--hd-dur) var(--hd-ease),
                box-shadow var(--hd-dur) var(--hd-ease);
  }
  .product-card:hover {
    border-color: hsl(var(--hd-brand) / 0.5);
    box-shadow: 0 4px 16px hsl(var(--hd-brand) / 0.1);
    transform: translateY(-1px);
  }
  .product-card:active { transform: translateY(0) scale(0.98); }
  .product-card img {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: var(--hd-r-md);
    flex-shrink: 0;
    background: hsl(var(--hd-border));
  }
  .product-card .nm {
    font-size: var(--hd-fs-base);
    color: hsl(var(--hd-text));
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .product-card .pr {
    font-size: var(--hd-fs-md);
    color: hsl(0 84% 42%);  /* WCAG AA: white 위 5.8:1 */
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .product-card .original-price {
    color: hsl(var(--hd-muted));
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-size: var(--hd-fs-xs);
    margin-right: 4px;
    font-weight: 400;
  }
  .product-card .ts { font-size: var(--hd-fs-xs); color: hsl(0 0% 42%); margin-top: 2px; }  /* WCAG AA: white 위 5.6:1 */

  .product-card .discount-badge {
    position: absolute; top: 6px; left: 6px;
    background: linear-gradient(135deg, hsl(var(--hd-live)) 0%, hsl(var(--hd-accent)) 100%);
    color: white;
    padding: 3px 9px;
    border-radius: var(--hd-r-sm);
    font-size: 10px; font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 6px hsl(var(--hd-live) / 0.4);
    z-index: 2;
  }
  .product-card .stock-badge {
    position: absolute; top: 6px; right: 6px;
    background: hsl(0 0% 100% / 0.95);
    backdrop-filter: blur(8px);
    color: hsl(46 100% 28%);
    padding: 3px 9px;
    border-radius: var(--hd-r-sm);
    border: 1px solid hsl(48 100% 80%);
    font-size: 10px; font-weight: 800;
    z-index: 2;
    box-shadow: 0 2px 4px hsl(0 0% 0% / 0.08);
  }
  .product-card .sold-overlay {
    position: absolute; inset: 0;
    background: hsl(0 0% 100% / 0.85);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--hd-r-lg);
  }
  .product-card .sold-overlay span {
    color: hsl(var(--hd-live));
    font-weight: 800;
    font-size: var(--hd-fs-md);
    letter-spacing: 0.12em;
  }

  /* 찜 버튼 — 라이트 상품 카드 위 라이트 글래스 */
  .wish-btn {
    position: absolute; bottom: 6px; right: 6px;
    width: 32px; height: 32px;
    background: hsl(0 0% 100% / 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid hsl(var(--hd-border));
    border-radius: 50%;
    color: hsl(var(--hd-text-soft));
    cursor: pointer; font-size: 15px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--hd-dur) var(--hd-ease);
    z-index: 3;
    box-shadow: 0 2px 6px hsl(0 0% 0% / 0.08);
  }
  .wish-btn:hover { background: white; color: hsl(var(--hd-live)); transform: scale(1.08); border-color: hsl(var(--hd-live) / 0.5); }
  .wish-btn.active { background: hsl(var(--hd-live)); border-color: hsl(var(--hd-live)); color: white; box-shadow: 0 4px 12px hsl(var(--hd-live) / 0.4); }
  .wish-btn.active::before { content: '❤'; }
  .wish-btn:not(.active)::before { content: '♡'; }

  /* 재입고 알림 */
  .restock-btn {
    position: absolute; bottom: 6px; left: 6px;
    background: hsl(var(--hd-accent));
    color: hsl(var(--hd-on-accent));
    border: 0;
    padding: 6px 12px;
    border-radius: var(--hd-r-md);
    font-size: 10px; font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 8px hsl(var(--hd-accent) / 0.4);
    transition: transform var(--hd-dur-fast) var(--hd-ease);
  }
  .restock-btn:hover { transform: translateY(-1px); }
  .restock-btn.registered {
    background: hsl(var(--hd-brand)); color: white; cursor: default;
    box-shadow: none;
  }

  /* === Timedeal bar === */
  .timedeal-bar {
    display: none;
    padding: 12px 16px;
    background: linear-gradient(95deg, hsl(var(--hd-live)) 0%, hsl(14 90% 55%) 100%);
    border-bottom: 1px solid hsl(0 70% 45%);
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .timedeal-bar::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at top right, hsl(0 0% 100% / 0.15) 0%, transparent 70%);
    pointer-events: none;
  }
  .timedeal-bar.active { display: flex; align-items: center; gap: 12px; }
  .timedeal-bar .td-icon { font-size: 22px; filter: drop-shadow(0 2px 4px hsl(0 0% 0% / 0.4)); }
  .timedeal-bar .td-body { flex: 1; min-width: 0; }
  .timedeal-bar .td-title {
    font-size: 10px; color: hsl(0 0% 100% / 0.9);
    font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .timedeal-bar .td-name {
    font-size: var(--hd-fs-base); color: white; font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 2px;
  }
  .timedeal-bar .td-price {
    font-size: var(--hd-fs-xs); color: hsl(0 0% 100% / 0.9);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  .timedeal-bar .td-price del { color: hsl(0 0% 100% / 0.55); margin-right: 4px; }
  .timedeal-bar .td-countdown {
    background: hsl(0 0% 0% / 0.45);
    padding: 8px 12px;
    border-radius: var(--hd-r-md);
    font-family: var(--hd-font-mono);
    font-weight: 800;
    font-size: var(--hd-fs-md);
    color: white;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .timedeal-bar .td-stock { font-size: 10px; color: hsl(0 0% 100% / 0.9); font-weight: 700; }

  /* === Coupons === */
  .coupons-wrap { display: none; padding: 14px 18px; border-bottom: 1px solid hsl(var(--hd-border)); }
  .coupons-wrap.active { display: block; }
  .coupons-wrap .ch {
    font-size: var(--hd-fs-xs);
    color: hsl(var(--hd-text-soft));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    font-weight: 800;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .coupons-scroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .coupons-scroll::-webkit-scrollbar { display: none; }
  .coupon-card {
    flex: 0 0 auto;
    background: linear-gradient(135deg, hsl(21 100% 96%) 0%, hsl(21 100% 92%) 100%);
    border: 1px dashed hsl(21 90% 72%);
    border-radius: var(--hd-r-md);
    padding: 12px 14px;
    min-width: 188px;
    display: flex; flex-direction: column; gap: 5px;
    scroll-snap-align: start;
    position: relative;
  }
  .coupon-card::before, .coupon-card::after {
    content: ''; position: absolute;
    width: 12px; height: 12px;
    background: hsl(var(--hd-bg));
    border: 1px dashed hsl(21 90% 72%);
    border-radius: 50%;
    top: 50%; transform: translateY(-50%);
  }
  .coupon-card::before { left: -7px; }
  .coupon-card::after  { right: -7px; }
  .coupon-card.received {
    border-color: hsl(var(--hd-brand));
    background: linear-gradient(135deg, hsl(216 88% 95%) 0%, hsl(216 85% 90%) 100%);
  }
  .coupon-card.received::before, .coupon-card.received::after { border-color: hsl(var(--hd-brand)); }
  .coupon-card.disabled { opacity: 0.45; }
  .coupon-card .cv {
    color: hsl(var(--hd-live));
    font-weight: 800;
    font-size: var(--hd-fs-xl);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }
  .coupon-card.received .cv { color: hsl(var(--hd-brand-deep)); }
  .coupon-card .ct {
    color: hsl(var(--hd-text));
    font-size: var(--hd-fs-sm);
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .coupon-card .cm { color: hsl(var(--hd-muted)); font-size: 10px; }
  .coupon-card .cb {
    background: hsl(var(--hd-brand));
    color: white;
    border: 0;
    padding: 7px 14px;
    border-radius: var(--hd-r-sm);
    font-size: var(--hd-fs-xs); font-weight: 700;
    margin-top: 6px;
    cursor: pointer;
    transition: transform var(--hd-dur-fast) var(--hd-ease), background var(--hd-dur) var(--hd-ease);
  }
  .coupon-card .cb:hover { background: hsl(var(--hd-brand-deep)); }
  .coupon-card .cb:hover { transform: translateY(-1px); }
  .coupon-card .cb:disabled { background: hsl(var(--hd-border-strong)); color: hsl(var(--hd-muted)); cursor: not-allowed; transform: none; }
  .coupon-card .cb.ok { background: hsl(var(--hd-brand)); color: white; }

  /* === 영화관 모드 (Theater) — 비디오 영역 확대 === */
  body.lv-theater .container { max-width: 1400px !important; }
  
  body.lv-theater .lv-player { max-height: 75vh !important; aspect-ratio: 16/9; }

  /* === YouTube 스타일 액션 바 === */
  .lv-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 6px;
    border-top: 1px solid hsl(var(--hd-border));
    margin-top: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lv-action-bar::-webkit-scrollbar { display: none; }
  .lv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: hsl(var(--hd-elevated));
    border: 1px solid hsl(var(--hd-border));
    color: hsl(var(--hd-text));
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 180ms;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .lv-action-btn:hover {
    background: hsl(var(--hd-surface));
    border-color: hsl(var(--hd-brand) / 0.5);
  }
  .lv-action-btn:active { transform: scale(0.96); }
  .lv-action-btn i { font-size: 14px; color: hsl(var(--hd-text-soft)); }
  .lv-action-btn.lv-liked {
    background: hsl(var(--hd-brand) / 0.12);
    border-color: hsl(var(--hd-brand) / 0.5);
    color: hsl(var(--hd-brand));
  }
  .lv-action-btn.lv-liked i { color: #ef4444; }
  .lv-action-btn .lv-action-count {
    color: hsl(var(--hd-muted));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }
  .lv-action-btn.lv-liked .lv-action-count { color: hsl(var(--hd-brand-deep)); }
  .lv-action-spacer { flex: 1; }
  @media (max-width: 540px) {
    .lv-action-bar { padding: 8px 12px 4px; gap: 6px; }
    .lv-action-btn { padding: 6px 10px; font-size: 11.5px; }
    .lv-action-btn .lv-action-label { display: none; }
  }

  /* === 이모지 반응 픽커 === */
  .lv-reaction-picker {
    display: none;
    padding: 10px 18px;
    gap: 8px;
    flex-wrap: wrap;
    background: hsl(var(--hd-elevated));
    border-radius: 14px;
    margin: 0 18px;
    animation: lvReactionPickIn 200ms ease;
  }
  .lv-reaction-picker.lv-open { display: flex; }
  @keyframes lvReactionPickIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
  .lv-reaction-emoji {
    background: transparent;
    border: 0;
    font-size: 22px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
    transition: all 160ms;
  }
  .lv-reaction-emoji:hover { background: hsl(var(--hd-surface)); transform: scale(1.2); }
  .lv-reaction-emoji:active { transform: scale(0.95); }

  /* === 떠오르는 반응 (Floating reactions) === */
  .lv-floating-reactions {
    position: fixed;
    pointer-events: none;
    z-index: 60;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    overflow: hidden;
  }
  /* 크기·회전·속도는 JS 가 반응마다 다르게 넣는다(--lv-scale/--lv-spin/--lv-dur).
     ⚠️ 값이 없을 때의 기본값을 반드시 두어야 한다 — 구 캐시의 viewer.js 가
        변수를 안 넣어도 애니메이션이 깨지지 않게. */
  .lv-float-emoji {
    position: absolute;
    bottom: 80px;
    font-size: 28px;
    line-height: 1;
    opacity: 1;
    animation: lvFloatUp var(--lv-dur, 3.2s) cubic-bezier(0.16,1,0.3,1) forwards;
    will-change: transform, opacity;
  }
  /* 이미지 아이콘을 쓰는 경우 (LIVE_BOOT.reactionIcons) */
  .lv-float-emoji img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
  @keyframes lvFloatUp {
    0%   { transform: translateY(0) translateX(0) scale(calc(var(--lv-scale,1) * 0.7)); opacity: 0; }
    10%  { opacity: 1;
           transform: translateY(-30px) translateX(var(--lv-drift,10px))
                      scale(calc(var(--lv-scale,1) * 1.1)); }
    100% { opacity: 0;
           transform: translateY(-65vh) translateX(var(--lv-drift,10px))
                      scale(calc(var(--lv-scale,1) * 1.4)) rotate(var(--lv-spin,15deg)); }
  }
  /* 움직임을 줄이도록 설정한 사용자용 — **별도 애니메이션 이름**을 쓴다.
     ⚠️ 같은 @keyframes 이름을 @media 안에서 다시 선언하는 방식은 쓰지 않았다.
        유효한 CSS 이긴 하나 '마지막 선언이 이긴다' 에 의존해, 규칙을 나중에
        옮기기만 해도 조용히 뒤바뀐다. */
  @keyframes lvFloatUpCalm {
    0%   { opacity: 0; transform: none; }
    30%  { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-40px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lv-float-emoji { animation: lvFloatUpCalm 0.9s linear forwards; }
  }

  /* === 채팅 도구 버튼 === */
  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
  }
  .lv-chat-toolbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: hsl(var(--hd-elevated));
    border: 1px solid hsl(var(--hd-border));
    color: hsl(var(--hd-text-soft));
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms;
  }
  .lv-chat-toolbtn:hover { background: hsl(var(--hd-surface)); color: hsl(var(--hd-brand)); }
  .lv-chat-toolbtn.lv-off { opacity: 0.5; text-decoration: line-through; }

  /* === Chat — YouTube 스타일 강화 === */
  .chat { padding: 12px 18px 16px; position: relative; }
  .chat.lv-collapsed .chat-list,
  .chat.lv-collapsed .chat-input,
  .chat.lv-collapsed .lv-new-msg-btn { display: none; }
  .chat-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    background: hsl(var(--hd-surface));
    border: 1px solid hsl(var(--hd-border));
    border-radius: var(--hd-r-lg);
  }
  .chat-row {
    font-size: var(--hd-fs-sm);
    padding: 4px 8px;
    line-height: 1.5;
    border-radius: var(--hd-r-sm);
    transition: background var(--hd-dur-fast) var(--hd-ease);
  }
  .chat-row:hover { background: hsl(var(--hd-elevated)); }
  .chat-row .nm {
    color: #b8bdc7; font-weight: 600;   /* 시청자 닉네임 = 옅은 회색 */
    margin-right: 6px;
    letter-spacing: -0.01em;
  }
  .chat-row .msg { color: #ffffff; }     /* 메시지 텍스트 = 흰색 */
  .chat-row.system .nm { color: hsl(var(--hd-gold)); }
  /* 구매(주문) 채팅 = 노란색 (닉+메시지) — system 보다 뒤라 우선 */
  .chat-row.is-order .nm,
  .chat-row.is-order .msg { color: #ffd21e; }
  /* 관리자(셀러) 채팅 = 볼드 */
  .chat-row.is-admin .nm,
  .chat-row.is-admin .msg { font-weight: 800; }
  .chat-row .msg-time {
    color: hsl(var(--hd-muted));
    font-size: 10.5px;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 160ms;
    font-variant-numeric: tabular-nums;
  }
  .chat-row:hover .msg-time { opacity: 1; }
  .chat-row.lv-new-msg {
    animation: lvNewMsgFlash 600ms ease;
  }
  @keyframes lvNewMsgFlash {
    0% { background: hsl(var(--hd-brand) / 0.18); }
    100% { background: transparent; }
  }

  /* === 새 메시지 알림 버튼 === */
  .lv-new-msg-btn {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    background: hsl(var(--hd-brand));
    color: white;
    border: 0;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    z-index: 5;
    animation: lvNewMsgBtnIn 250ms ease;
  }
  .lv-new-msg-btn.lv-show { display: inline-flex; }
  .lv-new-msg-btn:hover { background: hsl(var(--hd-brand-deep)); }
  @keyframes lvNewMsgBtnIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  .lv-chat-emoji-btn {
    background: hsl(var(--hd-elevated)) !important;
    color: hsl(var(--hd-text-soft)) !important;
    padding: 11px 13px !important;
    min-height: 44px;
    font-size: 16px !important;
    flex-shrink: 0;
  }
  .lv-chat-emoji-btn:hover { background: hsl(var(--hd-surface)) !important; color: hsl(var(--hd-brand)) !important; }
  .chat-empty {
    color: hsl(var(--hd-muted));
    font-size: var(--hd-fs-sm);
    text-align: center;
    padding: 24px 16px;
  }
  .chat-input { display: flex; gap: 8px; margin-top: 10px; }
  .chat-input input {
    flex: 1;
    background: hsl(var(--hd-surface));
    border: 1px solid hsl(var(--hd-border-strong));
    color: hsl(var(--hd-text));
    border-radius: var(--hd-r-md);
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    min-height: 44px;
    letter-spacing: -0.02em;
    transition: border-color var(--hd-dur) var(--hd-ease), box-shadow var(--hd-dur) var(--hd-ease);
  }
  .chat-input input:focus {
    outline: none;
    border-color: hsl(var(--hd-brand));
    box-shadow: 0 0 0 3px hsl(var(--hd-brand) / 0.18);
  }
  .chat-input button {
    background: hsl(var(--hd-brand-deep));  /* WCAG AA: white 위 5.4:1 */
    border: 0;
    color: white;
    padding: 11px 18px;
    border-radius: var(--hd-r-md);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px hsl(var(--hd-brand) / 0.3);
    transition: background var(--hd-dur) var(--hd-ease);
  }
  .chat-input button:hover { background: hsl(var(--hd-brand-deep)); }

  /* === Sticky CTA === */

  /* === Notification bell (영상 위 floating, 검정 글래스 유지) === */
  .notif-bell {
    position: fixed; top: 16px; right: 16px; z-index: 40;
    width: 42px; height: 42px;
    background: hsl(0 0% 0% / 0.55);
    backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid hsl(0 0% 100% / 0.12);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: white;
    transition: transform var(--hd-dur) var(--hd-ease), background var(--hd-dur) var(--hd-ease);
  }
  .notif-bell:hover { transform: scale(1.05); background: hsl(0 0% 0% / 0.75); }
  .notif-bell .cnt {
    position: absolute; top: -4px; right: -4px;
    background: hsl(var(--hd-live)); color: white;
    font-size: 10px; font-weight: 800;
    min-width: 20px; height: 20px;
    border-radius: var(--hd-r-pill);
    padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid hsl(var(--hd-bg));
  }
  .notif-bell .cnt.hidden { display: none; }
  .notif-panel {
    position: fixed; top: 68px; right: 16px;
    width: min(320px, calc(100vw - 32px));
    max-height: 60vh; overflow-y: auto;
    background: hsl(var(--hd-surface));
    border: 1px solid hsl(var(--hd-border));
    border-radius: var(--hd-r-lg);
    padding: 8px;
    z-index: 39; display: none;
    box-shadow: var(--hd-shadow-3);
  }
  .notif-panel.open { display: block; animation: panelIn var(--hd-dur) var(--hd-ease-out); }
  @keyframes panelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .notif-row {
    padding: 12px 10px;
    border-bottom: 1px solid hsl(var(--hd-border));
    font-size: var(--hd-fs-sm);
    cursor: pointer;
    transition: background var(--hd-dur-fast) var(--hd-ease);
  }
  .notif-row:hover { background: hsl(var(--hd-elevated)); }
  .notif-row:last-child { border-bottom: 0; }
  .notif-row.unread { background: hsl(216 88% 95%); border-radius: var(--hd-r-md); margin-bottom: 4px; border-color: transparent; }
  .notif-row .nt { color: hsl(var(--hd-text)); font-weight: 700; }
  .notif-row .nm { color: hsl(var(--hd-text-soft)); margin-top: 3px; line-height: 1.4; }
  .notif-row .ntime { color: hsl(var(--hd-muted)); font-size: 10px; margin-top: 4px; }
  .notif-empty { padding: 28px; text-align: center; color: hsl(var(--hd-muted)); font-size: var(--hd-fs-sm); }

  /* === 구매 알림 토스트 (2026-07-16 v2: 요청으로 숨김 처리) ===
     JS 가 계속 요소를 append 하지만 CSS 로 완전 비노출.
     아래 정의는 향후 다시 켤 때 참고용 (스타일은 그대로 유지). */
  .order-toast-stack {
    display: none !important;   /* 숨김 처리 */
    position: fixed;
    left: 12px; right: 12px;
    top: 68px;                     /* 상단바 아래 */
    bottom: auto;
    z-index: 9500;                 /* 채팅 wrap / product panel / sticky CTA 위 */
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
    max-width: 100%;
    align-items: center;
  }
  @media (min-width: 720px) {
    /* PC 는 좌측 상단 카드 */
    .order-toast-stack {
      left: 20px; right: auto;
      top: 76px;
      max-width: 340px;
      align-items: flex-start;
    }
  }
  .order-toast {
    background: rgba(15,23,42,0.94);
    color: #fff;
    border: 1px solid rgba(251,191,36,0.55);
    border-left: 4px solid #fbbf24;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.18);
    animation: toastIn 240ms cubic-bezier(0.16,1,0.3,1);
    pointer-events: auto;
    line-height: 1.5;
    max-width: min(92vw, 360px);
    width: fit-content;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
  }
  .order-toast .ot-icon {
    display: inline-flex; align-items: center;
    background: hsl(var(--hd-brand));
    color: white;
    padding: 2px 8px;
    border-radius: var(--hd-r-sm);
    font-weight: 800; font-size: 10px;
    margin-right: 8px;
    letter-spacing: 0.02em;
  }
  .order-toast .ot-name { color: #fef3c7; font-weight: 700; }
  .order-toast .ot-product { color: #e2e8f0; }
  .order-toast .ot-time { color: #94a3b8; font-size: 10px; margin-top: 4px; }
  .order-toast .ot-icon { background: #fbbf24 !important; color: #7c2d12 !important; }

  /* === 주문 모달 — mkt24 라이트 톤 override === */
  .modal-content {
    border: 0 !important;
    border-radius: 16px !important;
    background: hsl(var(--hd-surface)) !important;
    box-shadow: 0 24px 48px hsl(0 0% 0% / 0.18), 0 8px 16px hsl(0 0% 0% / 0.1) !important;
    color: hsl(var(--hd-text));
  }
  .modal-header {
    background: hsl(var(--hd-surface));
    border-bottom: 1px solid hsl(var(--hd-border)) !important;
    padding: 16px 20px !important;
    border-radius: 16px 16px 0 0;
  }
  .modal-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    color: hsl(var(--hd-text)) !important;
  }
  .modal-body {
    padding: 20px !important;
    color: hsl(var(--hd-text));
  }
  .btn-close {
    width: 32px; height: 32px;
    border-radius: 999px;
    opacity: 0.6;
    transition: opacity 180ms;
  }
  .btn-close:hover { opacity: 1; }
  .modal-backdrop.show { opacity: 0.55; }
  /* 모바일 풀스크린 모달 */
  @media (max-width: 540px) {
    .modal-dialog { margin: 0 !important; max-width: 100% !important; min-height: 100vh; }
    .modal-content { border-radius: 0 !important; min-height: 100vh; }
    .modal-header { border-radius: 0 !important; }
  }
  /* 모달 내 Bootstrap 폼 — view.php 의 색 토큰 매핑 */
  .modal .form-control, .modal .form-select {
    background: hsl(var(--hd-surface));
    border: 1px solid hsl(var(--hd-border-strong));
    color: hsl(var(--hd-text));
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    min-height: 46px;
    letter-spacing: -0.02em;
  }
  .modal .form-control:focus, .modal .form-select:focus {
    border-color: hsl(var(--hd-brand));
    box-shadow: 0 0 0 3px hsl(var(--hd-brand) / 0.15);
  }
  .modal .form-label, .modal label.form-label {
    font-size: 12px;
    font-weight: 700;
    color: hsl(var(--hd-text-soft));
    margin-bottom: 6px;
    letter-spacing: -0.02em;
  }
  .modal .btn { font-weight: 700; letter-spacing: -0.02em; min-height: 44px; padding: 10px 18px; border-radius: 10px; }
  .modal .btn-primary { background: hsl(var(--hd-brand)); color: white; border: 0; box-shadow: 0 2px 6px hsl(var(--hd-brand) / 0.28); }
  .modal .btn-primary:hover { background: hsl(var(--hd-brand-deep)); }
  .modal .btn-secondary { background: hsl(var(--hd-elevated)); color: hsl(var(--hd-text-soft)); border: 1px solid hsl(var(--hd-border-strong)); }
  .modal .btn-warning { background: hsl(var(--hd-accent)); color: hsl(var(--hd-on-accent)); border: 0; }
  .modal .alert { border-radius: 10px; padding: 10px 14px; font-size: 13px; }
  .modal .alert-info { background: hsl(216 88% 95%); border: 1px solid hsl(216 60% 86%); color: hsl(var(--hd-brand-deep)); }
  .modal .alert-warning { background: hsl(48 100% 95%); border: 1px solid hsl(48 100% 80%); color: hsl(46 100% 22%); }
  .modal .alert-danger { background: hsl(0 90% 95%); border: 1px solid hsl(0 80% 85%); color: hsl(var(--hd-danger)); }
  .modal .text-warning { color: hsl(var(--hd-live)) !important; font-weight: 800; }  /* 가격은 빨강 강조 */
  .modal .text-muted { color: hsl(var(--hd-muted)) !important; }
  .modal .text-success { color: hsl(var(--hd-brand-deep)) !important; }

  /* === LIVE 뷰어 (구매자) 컨트롤 제한 ===
     LIVE 시청 중에는 pause / seek / 10초 뒤로 관련 컨트롤을 감춘다.
     라이브 = 실시간 편집 불가. 오직 시청만.  (REPLAY 모드는 컨트롤 그대로 유지) */
  .lv-controls[data-live-viewer="1"] .lv-play-btn,
  .lv-controls[data-live-viewer="1"] .lv-rewind-btn,
  .lv-controls[data-live-viewer="1"] .lv-progress-wrap { display: none !important; }
  /* LIVE 구매자 모드: 일시정지 오버레이 완전 숨김 (사용자 요청) */
  .lv-player[data-live-viewer="1"] .lv-paused-overlay { display: none !important; }
  .lv-controls[data-live-viewer="1"] .lv-play-btn { display: none !important; }


/* ========================================================
   시청자 회선 품질 인디케이터 (LIVE 뷰어 self-diagnosis)
   ⚠️ 우측 상단 닫기 버튼(omk-close-btn)과 위치 충돌 → 숨김 처리.
      내부 텔레메트리(POST /viewer_quality_report) 는 계속 동작.
   ======================================================== */
.lv-netq { display: none !important; }
.lv-netq-hidden-DELETED-BELOW {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 200ms, transform 150ms, background 200ms;
  opacity: 0.85;
}
.lv-netq:hover { opacity: 1; transform: scale(1.04); }
.lv-netq-icon { display: block; }
.lv-netq-bar {
  transition: fill 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms;
  opacity: 0.25;
}
/* Level 별 활성 바 갯수 + 색상 */
.lv-netq[data-level="5"] .lv-netq-bar[data-bar="1"],
.lv-netq[data-level="5"] .lv-netq-bar[data-bar="2"],
.lv-netq[data-level="5"] .lv-netq-bar[data-bar="3"],
.lv-netq[data-level="5"] .lv-netq-bar[data-bar="4"],
.lv-netq[data-level="5"] .lv-netq-bar[data-bar="5"] { opacity: 1; fill: #10b981; }
.lv-netq[data-level="4"] .lv-netq-bar[data-bar="1"],
.lv-netq[data-level="4"] .lv-netq-bar[data-bar="2"],
.lv-netq[data-level="4"] .lv-netq-bar[data-bar="3"],
.lv-netq[data-level="4"] .lv-netq-bar[data-bar="4"] { opacity: 1; fill: #14b8a6; }
.lv-netq[data-level="3"] .lv-netq-bar[data-bar="1"],
.lv-netq[data-level="3"] .lv-netq-bar[data-bar="2"],
.lv-netq[data-level="3"] .lv-netq-bar[data-bar="3"] { opacity: 1; fill: #eab308; }
.lv-netq[data-level="2"] .lv-netq-bar[data-bar="1"],
.lv-netq[data-level="2"] .lv-netq-bar[data-bar="2"] { opacity: 1; fill: #f97316; }
.lv-netq[data-level="1"] .lv-netq-bar[data-bar="1"] { opacity: 1; fill: #dc2626; animation: lv-netq-blink 1s infinite; }

@keyframes lv-netq-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* 낮은 품질일 때 인디케이터 자체 강조 */
.lv-netq[data-level="1"] { background: rgba(220, 38, 38, 0.85); opacity: 1; }
.lv-netq[data-level="2"] { background: rgba(249, 115, 22, 0.75); opacity: 1; }

/* 라벨 (Excellent/Good/Fair/Poor/Critical) */
.lv-netq-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Tooltip (클릭 시 표시) */
.lv-netq-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 12px 14px;
  background: rgba(15, 15, 20, 0.95);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 220ms, transform 220ms;
  text-align: left;
}
.lv-netq.lv-netq-open .lv-netq-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lv-netq-tt-title {
  font-weight: 800;
  font-size: 12.5px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.lv-netq-tt-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.lv-netq-tt-row span:first-child {
  color: rgba(255, 255, 255, 0.65);
}
.lv-netq-tt-row span:last-child {
  color: #fff;
  font-weight: 700;
}
.lv-netq-tt-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
  min-height: 0;
}
.lv-netq-tt-hint:empty { display: none; }

/* 모바일 조정 */
@media (max-width: 640px) {
  .lv-netq {
    top: 8px;
    right: 8px;
    padding: 5px 8px;
    font-size: 10.5px;
  }
  .lv-netq-label { display: none; }
  .lv-netq-tooltip {
    min-width: 180px;
    font-size: 11.5px;
  }
}

/* === 몰입 모드: 소리 켠 뒤 영상 탭 → 영상 위 오버레이 전체 숨김 (viewer.js 가 body.lv-immersive 토글) ===
   한 번 더 탭하면 다시 표시. 영상만 남기고 채팅·아이콘·버튼·시간·공지·상품핀·배지 등 전부 숨김.
   컨트롤은 opacity:0 로 눌러 lv-show 도 무시. */
body.lv-immersive .lv-video-overlay,
body.lv-immersive .lv-controls,
body.lv-immersive .viewer-count,
body.lv-immersive .badge-live,
body.lv-immersive .badge-status,
body.lv-immersive .lv-netq,
body.lv-immersive .omk-topbar,
body.lv-immersive .omk-pinbanner,
body.lv-immersive .omk-bottombar,
body.lv-immersive .omk-product-pin,
body.lv-immersive .chat,
body.lv-immersive #lvChatWrap,
body.lv-immersive #newMsgBtn,
body.lv-immersive .lv-push-toggle,
body.lv-immersive .notif-bell,
body.lv-immersive .lv-quick,
body.lv-immersive .lv-recent-quick {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.22s ease;
}

/* === 송출 끊김 안내 (2026-11-03) =========================================
   방송 행은 셀러가 직접 종료할 때까지 LIVE 로 유지된다(2026-07-16 정책).
   그래서 송출이 끊긴 구간에도 화면은 "LIVE" 인데 영상만 멈춘다 —
   2026-11-03 방송 129 는 그 상태가 1시간 37분 이어졌다.
   이 칩은 그 구간에만 나타난다. 판정 불가(null)면 나타나지 않는다. */
.lv-stalled {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;                 /* 일시정지 오버레이보다 위, 컨트롤바와는 자리가 겹치지 않는다 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 22px;
  max-width: min(88%, 340px);
  text-align: center;
  border-radius: 14px;
  background: rgba(17, 17, 20, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  /* 클릭은 플레이어로 통과시킨다 — 탭해서 재생을 되살리려는 조작을 막지 않는다. */
  pointer-events: none;
}
.lv-stalled[hidden] { display: none; }
.lv-stalled > i { font-size: 22px; color: #FFC24A; }
.lv-stalled > strong { font-size: 15px; font-weight: 700; line-height: 1.35; }
/* 단어 중간에서 줄이 끊기지 않게 — 한글 가독성 */
.lv-stalled > strong,
.lv-stalled > span { word-break: keep-all; overflow-wrap: break-word; }
.lv-stalled > span { font-size: 12.5px; opacity: .78; line-height: 1.4; }