/*!
 * /assets/broadcast-omk.css
 * 오늘만셀러 (onmlive.com) 스타일 — 풀스크린 영상 + 오버레이 채팅 + 하단 상품핀
 *
 * body.lv-omk 가 활성화되면 view.php 레이아웃이 6.jpg 형식으로 전환됨.
 * 기존 yt-seller 클래스와 조합 가능 (lv-omk 가 우선 적용).
 */

/* ========================================
   1. 기본 body — 풀스크린 다크 (모바일 우선)
   ======================================== */
body.lv-omk {
  background: #000 !important;
  color: #fff !important;
  overflow: hidden !important;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
}

body.lv-omk .live-wrap {
  max-width: 540px !important;
  margin: 0 auto !important;
  background: #000 !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  /* view.css 의 padding-bottom:96px 무효화 — absolute 자식의 bottom 기준이 96px 밀리는 문제 */
  padding: 0 !important;
}

/* ========================================
   2. 영상 풀스크린 — flex:1 로 사용 가능한 공간 채우기
   ======================================== */
body.lv-omk .player {
  position: absolute !important;
  inset: 0 !important;
  aspect-ratio: unset !important;
  width: 100% !important;
  height: 100% !important;
  background: #000 !important;
  z-index: 1;
}

body.lv-omk .lv-player {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}

body.lv-omk .lv-player video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* 전체 프레임 표시 (크롭 없음) */
  background: #000 !important;
}

/* 기본 컨트롤바는 숨김 (오버레이 UI로 대체) */
body.lv-omk .lv-controls,
body.lv-omk .lv-video-overlay {
  display: none !important;
}

/* ========================================
   일시정지 오버레이 (모든 모드 공통 — omk 여부 관계없음)
   ======================================== */
.lv-paused-overlay {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  animation: lvPausedFadeIn 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.lv-paused-overlay.active {
  display: flex;
}
.lv-paused-play {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: #111;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 180ms cubic-bezier(0.16,1,0.3,1);
  padding-left: 4px; /* play 아이콘 시각 중앙 보정 */
}
.lv-paused-play:hover,
.lv-paused-play:active {
  transform: scale(1.08);
}
.lv-paused-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  padding: 4px 14px;
  background: rgba(0,0,0,0.4);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes lvPausedFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 모바일 — 아이콘 크기 소폭 축소 */
@media (max-width: 480px) {
  .lv-paused-play { width: 64px; height: 64px; font-size: 24px; }
  .lv-paused-label { font-size: 13px; }
}

/* ========================================
   3. 상단 셀러바 오버레이 (셀러 정보 + 시청시간 + 시청자수 + 컨트롤)
   ======================================== */
body.lv-omk .omk-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 10px 14px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
}

body.lv-omk .omk-topbar-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #333;
  flex-shrink: 0;
  border: 1.5px solid #fff;
}

body.lv-omk .omk-topbar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.lv-omk .omk-topbar-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.lv-omk .omk-topbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

body.lv-omk .omk-topbar-meta .omk-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.lv-omk .omk-topbar-meta .omk-play-ic {
  color: #ef4444;
  font-size: 9px;
}

body.lv-omk .omk-topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 볼륨 버튼 (omk 모드 전용) — 상단 액션바 좌측에 */
body.lv-omk .omk-vol-btn {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 16px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  border-radius: 0 !important;
}
body.lv-omk .omk-vol-btn:hover,
body.lv-omk .omk-vol-btn:active { color: #fbbf24 !important; }

/* 볼륨 슬라이더 — 기본 숨김, .open 클래스 있을 때만 표시 */
body.lv-omk .omk-vol-slider-wrap {
  display: none;
  align-items: center;
  padding: 0 8px;
  height: 32px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  overflow: hidden;
  transition: width 220ms ease;
}
body.lv-omk .omk-vol-slider-wrap.open { display: inline-flex; }
body.lv-omk .omk-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 84px;
  height: 3px;
  background: rgba(255,255,255,0.4);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
body.lv-omk .omk-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.lv-omk .omk-vol-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* X 닫기 버튼만 — 배경 없이 흰 X 만 노출 */
body.lv-omk .omk-topbar-actions .omk-close-btn,
body.lv-omk .omk-topbar-actions a.omk-close-btn {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

body.lv-omk .omk-topbar-actions .omk-close-btn:hover,
body.lv-omk .omk-topbar-actions .omk-close-btn:active {
  color: #fbbf24 !important;
  background: transparent !important;
}

/* ========================================
   4. 핀 배너 (상단, 영상 위에 띠 형태)
   ======================================== */
/* ⚠️ 공지 띠의 top 은 **셀러바 실측 높이**로 정한다 (2026-10-29 요청 4).
      종전에는 60px 고정이었다. 그런데 위 셀러바는
        상단 안전영역(노치) + 셀러명(+단골맺기 버튼) + 시간·시청자수
      로 높이가 기기마다 달라진다. 특히 [단골맺기] 가 붙으면 이름줄이
      22~24px 로 커져 셀러바가 70px 을 넘고, 그 아래 공지가 60px 에 깔려
      **시간·실시간 시청자수와 공지가 겹쳐** 보였다 — 실제 신고 내용이다.
      viewer.js 가 --omk-topbar-h 를 셀러바 내용의 바닥 + 8px 로 설정한다.
      아래 60px 은 JS 가 돌기 전/못 돌 때의 보수적 기본값이다. */
body.lv-omk .omk-pinbanner {
  position: absolute;
  top: var(--omk-topbar-h, 60px);
  left: 12px; right: 12px;
  z-index: 49;
  padding: 8px 12px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #fff;
  overflow: hidden;
}

body.lv-omk .omk-pinbanner-ic {
  width: 22px; height: 22px;
  background: #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  flex-shrink: 0;
}

body.lv-omk .omk-pinbanner-text {
  flex: 1; min-width: 0;
  white-space: normal;         /* nl2br 로 삽입된 <br> 를 반영 */
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* ========================================
   5. 우측 떠있는 액션 버튼 (솔루션/도입 등)
   ======================================== */
body.lv-omk .omk-side-actions {
  position: absolute;
  top: 30%;
  right: 10px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.lv-omk .omk-side-btn {
  width: 56px;
  padding: 8px 6px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

body.lv-omk .omk-side-btn i {
  font-size: 14px;
}

body.lv-omk .omk-side-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

/* ========================================
   6. 채팅 오버레이 (영상 위 좌측 하단, 반투명)
      - 입력바 바로 위에 붙음 (모바일 safe-area 포함)
      - 상품핀 있을 때: 상품핀 위로 들어올림
   ======================================== */
body.lv-omk .chat,
body.lv-omk #lvChatWrap {
  position: absolute !important;
  top: auto !important;
  bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  /* 화면 가득 — 좌우 끝까지, 내부 padding 0 (텍스트 들여쓰기는 .chat-row 에서 처리) */
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
  z-index: 45 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: none !important;
  max-height: 220px !important;
  min-height: 80px !important;
  /* 스크롤은 내부 #chatList 가 담당 — wrap 은 그냥 visible 로 두고 자식이 이벤트 처리 */
  overflow: visible !important;
  /* wrap 도 pointer-events:auto 로 두어야 자식 chatList 의 스크롤 제스처가 정상 캡처됨.
     wrap 이 차지하는 영역은 화면 하단 20% (chat overlay 영역) 뿐이라 영상 조작 방해 없음. */
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* youtube.css 의 body.lv-stage #lvChatWrap::before ("실시간 채팅" 헤더 + border-bottom)
   가 omk 모드에서도 그려져 채팅 위에 흰 줄로 보이는 문제. specificity 동률·우선순위
   확보를 위해 #lvChatWrap 명시. */
body.lv-omk #lvChatWrap::before,
body.lv-omk .chat::before,
body.lv-omk #lvChatWrap::after,
body.lv-omk .chat::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  height: 0 !important;
}

/* .chat 내부의 비로그인 안내 박스(`<div class="small mt-2">`)도 omk 모드에서는 숨김
   (omk-bottombar 의 omkLoginPrompt 가 같은 안내를 더 잘 보여줌) */
body.lv-omk .chat > .small,
body.lv-omk #lvChatWrap > .small {
  display: none !important;
}

/* 상품 핀이 있으면 채팅을 더 위로 들어올림 */
body.lv-omk.has-sticky-cta .chat,
body.lv-omk.has-sticky-cta #lvChatWrap {
  bottom: calc(124px + env(safe-area-inset-bottom)) !important;
}

/* omk 모드에서는 #chatList 자체가 영상 위 transparent overlay 로 표시되므로
   별도의 .lv-chat-overlay (youtube.css 의 모바일 복제 오버레이) 는 숨김.
   안 그러면 같은 메시지가 두 곳에 동시에 보여 "채팅이 2개씩 올라옴" 으로 인지됨. */
body.lv-omk .lv-chat-overlay { display: none !important; }

/* specificity = (0,0,3,1) — youtube.css 의 `body.lv-stage #lvChatWrap .chat-list`
   ({ display:none }, 모바일 미디어 안)을 cascade 로 이기기 위해 #lvChatWrap 중첩 명시 */
body.lv-omk #lvChatWrap .chat-list,
body.lv-omk #lvChatWrap #chatList,
body.lv-omk .chat-list,
body.lv-omk #chatList {
  display: flex !important;
  flex-direction: column !important;
  /* justify-content: flex-end 제거 — overflow-y:auto 와 함께 쓰면 상단 스크롤 접근 불가한 CSS 버그.
     대신 아래 ::before 트릭으로 하단 정렬 시각효과만 얻고 스크롤 정상 동작. */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  /* 스크롤 허용 3종 세트 (iOS 관성 포함) */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  pointer-events: auto !important;
  max-height: 220px !important;
  min-height: 80px !important;
  width: 100% !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
/* 스크롤바 — **쓰지 않을 때는 보이지 않는다** (2026-11-07 요청:
   "시청자 페이지에서 채팅에 스크롤이 보이는게 불편해서 스크롤은 사용하지
    않는경우 안보이도록").

   ⚠️ 폭(4px)은 **그대로 둔다.** 폭을 0 으로 접었다 펴면 그때마다 채팅 내용의
      가용 너비가 바뀌어 **글이 다시 줄바꿈되며 흔들린다**(레이아웃 이동).
      그래서 트랙 폭은 고정하고 **thumb 의 색만** 투명↔반투명으로 바꾼다.
   ⚠️ display:none 으로 아예 없애지 않는다. 그러면 채팅이 길 때 스크롤이
      가능한지조차 알 수 없다 — 스크롤 중에는 보여야 한다.
   ⚠️ 파이어폭스는 ::-webkit-scrollbar 를 모르므로 scrollbar-color 로 같이 준다.
      (scrollbar-width 는 thin 으로 두고 색만 바꿔 역시 폭을 고정한다) */
body.lv-omk #chatList::-webkit-scrollbar { width: 4px; }
body.lv-omk #chatList::-webkit-scrollbar-track { background: transparent; }
body.lv-omk #chatList::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 220ms ease;
}
body.lv-omk #chatList {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 220ms ease;
}
/* 스크롤 중 · 포인터를 올렸을 때만 보인다. 클래스는 view.php 의 JS 가 붙인다. */
body.lv-omk #chatList.lv-sb-on::-webkit-scrollbar-thumb,
body.lv-omk #chatList:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
}
body.lv-omk #chatList.lv-sb-on,
body.lv-omk #chatList:hover {
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}
/* 하단 정렬 트릭 — ::before 요소가 margin-top:auto 로 자기 자신을 위로 밀어냄.
   결과: 메시지가 적을 땐 아래쪽에 붙고, 많을 땐 위로 스크롤 가능. justify-content 버그 회피. */
body.lv-omk #chatList::before {
  content: '';
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

/* 모바일 (≤768px) — 채팅 영역 줄임 */
@media (max-width: 768px) {
  body.lv-omk .chat-list,
  body.lv-omk #chatList {
    max-height: 180px !important;
  }
}

body.lv-omk #lvChatWrap .chat-row,
body.lv-omk #lvChatWrap .chat-list > div,
body.lv-omk #lvChatWrap #chatList > div,
body.lv-omk .chat-row,
body.lv-omk .chat-list > div {
  background: transparent !important;
  background-color: transparent !important;
  padding: 2px 12px !important;
  margin: 2px 0 !important;
  font-size: 13px !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7) !important;
  border: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
  max-width: 100% !important;
  align-self: stretch !important;
  word-wrap: break-word !important;
  pointer-events: auto !important;
  line-height: 1.4 !important;
}

body.lv-omk .chat-row .nm,
body.lv-omk .chat-row .name {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
}

body.lv-omk .chat-row.system .nm,
body.lv-omk .chat-row[data-system="1"] .nm {
  color: #f472b6 !important;
}

body.lv-omk .chat-row.system,
body.lv-omk .chat-row[data-system="1"] {
  color: #f472b6 !important;
}

/* 채팅 영역에서 입력바는 제외 (입력바는 하단에 별도) */
body.lv-omk .chat-input {
  display: none !important;
}

/* ========================================
   최근 채팅으로 돌아가기 버튼 (오버레이 모드)
   - lv-stage 의 display:none 오버라이드 필요 (specificity 확보)
   - 채팅 오버레이 하단·중앙에 알약형으로 표시
   - .lv-show 클래스 있을 때만 실제 표시
   ======================================== */
body.lv-omk .lv-new-msg-btn,
body.lv-omk #lvChatWrap .lv-new-msg-btn,
body.lv-stage.lv-omk #lvChatWrap .lv-new-msg-btn {
  display: none !important;  /* 기본 숨김 */
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  z-index: 60 !important;
  pointer-events: auto !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  align-items: center !important;
  gap: 6px !important;
  animation: lvNewMsgBtnPop 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}
/* .lv-show 활성 시 실제 표시 */
body.lv-omk .lv-new-msg-btn.lv-show,
body.lv-omk #lvChatWrap .lv-new-msg-btn.lv-show,
body.lv-stage.lv-omk #lvChatWrap .lv-new-msg-btn.lv-show {
  display: inline-flex !important;
}
body.lv-omk .lv-new-msg-btn i {
  font-size: 11px !important;
  color: #0B5FD9 !important;
}
body.lv-omk .lv-new-msg-btn:hover,
body.lv-omk .lv-new-msg-btn:active {
  background: #ffffff !important;
  transform: translateX(-50%) translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3) !important;
}
@keyframes lvNewMsgBtnPop {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1); }
}

/* 채팅 스켈레톤 숨김 */
body.lv-omk .lv-skel-chat-row {
  background: transparent !important;
}

/* ========================================
   7. 하단 상품 핀 카드 (영상 위 하단 sticky)
   ======================================== */
body.lv-omk .omk-product-pin {
  position: absolute;
  bottom: 60px;
  left: 10px; right: 10px;
  z-index: 60;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  color: #111;
}

body.lv-omk .omk-product-pin-num {
  position: absolute;
  top: -6px; left: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.lv-omk .omk-product-pin-img {
  width: 48px; height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background:#fff;
  flex-shrink: 0;border:1px solid #e5e7eb;}

body.lv-omk .omk-product-pin-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.lv-omk .omk-product-pin-title {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.lv-omk .omk-product-pin-price {
  font-size: 15px;
  font-weight: 800;
  color: #ef4444;
  line-height: 1.2;
}

body.lv-omk .omk-product-pin-cta {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(239,68,68,0.4);
}

body.lv-omk .omk-product-pin-cta:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* ========================================
   8. 최하단 채팅 입력 + 액션 아이콘 바
   ======================================== */
body.lv-omk .omk-bottombar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 70;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
  display: flex;
  align-items: center;
  gap: 6px;
}

body.lv-omk .omk-bottombar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #555;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

body.lv-omk .omk-bottombar-avatar i {
  font-size: 16px;
  line-height: 1;
}

body.lv-omk .omk-bottombar-avatar:hover,
body.lv-omk .omk-bottombar-avatar:active {
  background: #666;
}

body.lv-omk .omk-bottombar-avatar-num {
  position: absolute;
  bottom: -2px; right: -2px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #000;
}

body.lv-omk .omk-bottombar-input {
  flex: 1;
  height: 36px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0 14px;
  color: #fff;
  font-size: 13px;
  outline: none;
}

body.lv-omk .omk-bottombar-input::placeholder {
  color: rgba(255,255,255,0.6);
}

body.lv-omk .omk-bottombar-input:focus {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}

body.lv-omk .omk-bottombar-action {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

body.lv-omk .omk-bottombar-action:hover,
body.lv-omk .omk-bottombar-action:active {
  background: rgba(255,255,255,0.15);
}

body.lv-omk .omk-bottombar-action.is-active {
  color: #fbbf24;
}

/* 입력창 내부 전송 버튼 (input 오른쪽 끝) */
body.lv-omk .omk-bottombar-inputwrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
body.lv-omk .omk-bottombar-inputwrap .omk-bottombar-input {
  flex: 1;
  padding-right: 42px; /* 전송 버튼 자리 확보 */
}
body.lv-omk .omk-bottombar-send-inline {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent; /* 배경 제거 — 아이콘만 */
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
body.lv-omk .omk-bottombar-send-inline:active {
  color: rgba(255,255,255,0.6);
}

/* 좌측 아바타(기본 배송지 진입) 숨김 — 설정(톱니) 메뉴 '기본 배송지'로 이동 */
body.lv-omk .omk-bottombar-avatar { display: none !important; }

/* 설정(톱니) 팝업 메뉴 */
body.lv-omk .omk-settings-menu {
  position: absolute;
  right: 12px;
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 80;
  background: rgba(18,18,20,0.97);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 6px;
  min-width: 170px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  display: none;
}
body.lv-omk .omk-settings-menu.is-open { display: block; }
body.lv-omk .omk-settings-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.lv-omk .omk-settings-item:hover,
body.lv-omk .omk-settings-item:active { background: rgba(255,255,255,0.10); }
body.lv-omk .omk-settings-item i { width: 18px; text-align: center; font-size: 15px; opacity: 0.9; }

/* ========================================
   9. 기존 요소 숨김 (lv-omk 모드에서 불필요)
   ======================================== */
body.lv-omk .meta,
body.lv-omk .notice,
body.lv-omk .pinned,
body.lv-omk .lv-action-bar,
body.lv-omk .section-title,
body.lv-omk .products,
body.lv-omk .lv-sticky-product,
body.lv-omk .lv-reaction-picker,
body.lv-omk .coupons-wrap,
body.lv-omk .timedeal-bar,
body.lv-omk #lvChatCollapseBtn,
body.lv-omk #lvHideChatBtn,
body.lv-omk .lv-fab-left,
body.lv-omk #lvMyOrdersFab,
body.lv-omk #lvNoticeBox,
body.lv-omk .order-toast-stack {
  /* 일부는 JS 로직에서 필요하므로 visibility 만 처리 */
}

body.lv-omk .meta { display: none !important; }
body.lv-omk .notice { display: none !important; }
body.lv-omk .pinned { display: none !important; }
body.lv-omk .lv-action-bar { display: none !important; }
body.lv-omk .lv-sticky-product { display: none !important; }
body.lv-omk #lvChatCollapseBtn { display: none !important; }
body.lv-omk #lvHideChatBtn { display: none !important; }
body.lv-omk .lv-fab-left { display: none !important; }
body.lv-omk #lvMyOrdersFab { display: none !important; }

/* 채팅 섹션 타이틀은 숨김 */
body.lv-omk .section-title { display: none !important; }
body.lv-omk .products { display: none !important; }

/* 알림 벨/푸시 토글 — omk 상단바 바로 아래 (top: 64px) */
body.lv-omk .notif-bell {
  position: fixed !important;
  top: 64px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 48 !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
body.lv-omk .notif-bell i { font-size: 14px !important; }
body.lv-omk .notif-bell .cnt {
  top: -3px !important;
  right: -3px !important;
  min-width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
}

body.lv-omk .lv-push-toggle {
  position: fixed !important;
  top: 108px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 48 !important;
  font-size: 10px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}

/* 알림벨이 있고 푸시토글도 있을 때 푸시토글이 알림벨 아래로 가도록 — 기존 right:70px 무효화 */
body.lv-omk .notif-bell + .lv-push-toggle,
body.lv-omk:has(.notif-bell) .lv-push-toggle {
  right: 12px !important;
  top: 108px !important;
}

/* notif-panel 위치 보정 (벨 클릭 시 펼침 패널) */
body.lv-omk .notif-panel {
  top: 108px !important;
  right: 12px !important;
  z-index: 49 !important;
}

/* 떠오르는 반응 (이모지) — 영상 위에 표시 */
body.lv-omk .lv-floating-reactions {
  position: absolute !important;
  bottom: 0 !important;
  right: 20px !important;
  z-index: 35 !important;
  pointer-events: none !important;
}

/* ========================================
   10. PC 미디어 쿼리 (≥769px) — 영상 중앙 + 좌우 검은 배경
   ======================================== */
@media (min-width: 769px) {
  body.lv-omk .live-wrap {
    max-width: 420px !important;
    box-shadow: 0 0 60px rgba(0,0,0,0.8);
  }
  /* PC 에서도 채팅창은 모바일과 동일하게 하단(입력바 바로 위)에 고정.
     일부 환경에서 .chat 의 relative 가 살아나는 케이스 차단 — fixed-on-wrap 식 강제.
     좌우는 live-wrap 가득 (max-width:420px 의 좌우 끝까지) */
  body.lv-omk .chat,
  body.lv-omk #lvChatWrap {
    position: absolute !important;
    top: auto !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    max-height: 220px !important;
    min-height: 80px !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    border: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  body.lv-omk.has-sticky-cta .chat,
  body.lv-omk.has-sticky-cta #lvChatWrap {
    bottom: calc(124px + env(safe-area-inset-bottom)) !important;
  }
  /* PC 에서는 알림받기 버튼 숨김 (브라우저 푸시 알림은 PC 사용자에게 노이즈) */
  body.lv-omk .lv-push-toggle {
    display: none !important;
  }
}

/* ========================================
   11. 안전 영역 (노치) 패딩
   ======================================== */
@supports (padding: max(0px)) {
  body.lv-omk .omk-topbar {
    padding-top: max(10px, env(safe-area-inset-top));
  }
  /* 노치 기기 기본값. --omk-topbar-h 가 들어오면 그 값이 이긴다. */
  body.lv-omk .omk-pinbanner {
    top: var(--omk-topbar-h, max(60px, calc(env(safe-area-inset-top) + 50px)));
  }
}

/* ========================================
   12. LIVE 뱃지 위치 조정 (셀러바 안으로 흡수)
   ======================================== */
body.lv-omk .badge-live,
body.lv-omk .badge-status,
body.lv-omk .viewer-count {
  display: none !important;
}

/* ========================================
   13. ENDED 상태 — 채팅/입력바 숨김 (의미 없음)
        SCHEDULED/READY 상태도 동일하게 처리하려면 .lv-status-scheduled 추가
   ======================================== */
body.lv-omk.lv-status-ended .chat,
body.lv-omk.lv-status-ended #lvChatWrap,
body.lv-omk.lv-status-ended .omk-bottombar,
body.lv-omk.lv-status-ended .omk-product-pin,
body.lv-omk.lv-status-ended .omk-pinbanner,
body.lv-omk.lv-status-ended .lv-push-toggle,
body.lv-omk.lv-status-ended .notif-bell {
  display: none !important;
}

/* ── 다시보기 판매 중이면 상품 UI 는 되살린다 (2026-09-29) ──
   위 규칙은 "종료 = 더 살 수 없다" 는 전제로 만들어졌다. 다시보기 판매가
   생기면서 그 전제가 깨졌다 — 마크업은 그대로 있는데 CSS 가 숨겨서
   **상품이 하나도 안 보이는** 상태가 됐다.
   채팅은 계속 숨긴다(종료된 방송의 채팅은 의미가 없다). 상품만 되살린다.
   body 에 클래스가 하나 더 붙어 위 규칙보다 특정도가 높다.

   배치(2026-09-29 2차): 액션 줄을 **영상 상단**에 둔다.
   하단은 <video controls> 가 재생·일시정지·탐색 바를 그리는 자리라,
   무엇을 올려두든 컨트롤을 덮거나 클릭을 가로챈다. 아예 비운다.
   한 줄 구성: [판매중 상품]  [ 상품핀 · 구매하기 ]  [내주문]
   .omk-pinbanner 는 되살리지 않는다 — 상품핀이 같은 정보를 같은 자리에
   보여주게 되어 겹친다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-bottombar {
  display: flex !important;
}
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-product-pin {
  display: flex !important;
}

/* ── 다시보기 하단 층 쌓기 (2026-11-03) ─────────────────────────────
   예전에는 상품핀 카드와 액션 바가 **같은 띠(top:64px)** 를 나눠 써서 겹쳤다 —
   바는 space-between 으로 좌우 끝을, 카드는 left/right 76px 로 가운데를 썼는데
   바의 버튼이 3개가 되면서 오른쪽 두 개가 카드 위로 올라왔다.

   ⚠️ '영상 아래'에 흐름으로 둘 수는 없다. .live-wrap 이 height:100dvh +
      overflow:hidden 이고 .player 가 position:absolute; inset:0 이라
      **화면 전체가 영상**이다. 흐름에 두면 화면 밖으로 잘린다.
      그래서 아래에서 위로 층을 쌓는다:

        영상
        [상품핀: 상품명·가격 · 구매하기]   ← bottom: ctl + bar + gap (110px)
        [상품]            [내주문][카톡]   ← bottom: ctl (60px)  — 바의 아래 패딩으로 밀어 올림
        네이티브 재생 컨트롤                ← 0 ~ ctl

   ⚠️ 바(.omk-bottombar)는 bottom:0 에 붙어 있고 **내용만** 아래 패딩으로
      올라가 있다. 그라데이션을 라이브처럼 화면 끝까지 내리기 위해서다.
      그래서 바가 컨트롤 영역을 덮으므로 pointer-events:none 이 필수다.

   구매 버튼은 라이브 방송과 같이 **카드 안**(.omk-product-pin-cta)에 둔다.
   바에 알약을 따로 두면 같은 openOrder() 버튼이 둘이 된다.
   채팅은 ENDED 규칙이 이미 숨긴다(.chat / #lvChatWrap / 입력창) — 다시보기 채팅 없음.

   두 값을 각 규칙에 따로 쓰면 한쪽만 고쳤을 때 다시 겹친다. 여기 한 곳에만 둔다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open {
  --lv-rp-ctl: 60px;   /* 브라우저 기본 재생 컨트롤 높이 여유 */
  --lv-rp-bar: 42px;   /* 액션 줄 높이 (= .omk-bottombar-tab 높이) */
  --lv-rp-gap: 8px;    /* 층 사이 간격 */
}

/* 상품핀 카드 — 액션 줄 바로 위. 좌우는 기본값(10px) 그대로 쓴다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-product-pin {
  top: auto !important;
  bottom: calc(var(--lv-rp-ctl) + var(--lv-rp-bar) + var(--lv-rp-gap)
               + env(safe-area-inset-bottom, 0px)) !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 60;                   /* 액션 바(70) 아래, 영상 위 */
}


/* 채팅 입력은 다시보기에서 의미가 없다 — 버튼만 남긴다.
   (.chat / #lvChatWrap 은 위 ENDED 규칙이 이미 숨긴다) */
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-bottombar-inputwrap {
  display: none !important;
}

/* 액션 줄 — 라이브 송출 화면과 **같은 모양**으로 두되, 재생 버튼을 가리지 않는다
   (2026-11-03 요청: "레이아웃이랑 디자인은 기존 라이브 송출과 동일하게 구현하고
    재생버튼을 가리지 않고 그 위에 ... 나올 수 있도록").

   ⚠️ 두 요구가 정면으로 부딪힌다:
      · 라이브와 같은 디자인 = 바닥에 붙은 그라데이션 스크림.
        그라데이션은 화면 끝에 닿아 있어야 자연스럽다. 공중에 띄우면
        아래쪽에 선이 생겨 어색하다(그래서 한때 background:none 으로 뒀다).
      · 재생 버튼을 가리지 않기 = 그 바닥이 <video controls> 자리다.
   → **바는 바닥에 붙이고(bottom:0), 내용만 패딩으로 밀어 올린다.**
      그라데이션은 라이브처럼 화면 끝까지 내려가고, 버튼은 컨트롤 위에 선다.
   ⚠️ 그래서 컨테이너가 컨트롤 영역을 덮는다 — pointer-events:none 이 **필수**다.
      없으면 재생·탐색 바를 누를 수 없다(버튼만 auto 로 되돌린다). */
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-bottombar {
  /* --lv-rp-ctl 은 위 body 규칙에서 상속받는다 — 상품핀과 같은 값을 써야 한다. */
  top: auto !important;
  bottom: 0 !important;
  height: auto;
  /* 좌우·위 패딩은 라이브(8px 12px)와 같다. 아래 패딩만 컨트롤 높이만큼 더 준다. */
  padding: 8px 12px calc(var(--lv-rp-ctl) + env(safe-area-inset-bottom, 0px)) !important;
  justify-content: flex-start;
  align-items: center;
  gap: 6px !important;           /* 라이브와 같은 간격 */
  flex-wrap: nowrap;             /* 두 줄로 쪼개지지 않게 */
  /* ⚠️ 위 설명대로 필수 — 이게 없으면 재생 컨트롤을 누를 수 없다. */
  pointer-events: none;
  /* ⚠️ 스크림이 재생 컨트롤을 덮지 않게 **띠 모양**으로 자른다 (2026-11-03).
        기본 .omk-bottombar 는 to top 0% 에서 rgba(0,0,0,.85) 로 시작한다 —
        바가 bottom:0 에 붙어 있으니 그 가장 진한 부분이 정확히
        <video controls> 위에 얹혀 재생·탐색 바가 흐려 보였다(사용자 신고).
        아래 --lv-rp-ctl 구간은 완전 투명으로 두고, 버튼이 앉는 높이부터
        스크림을 올린다.
     ⚠️ 위쪽 끝은 **%** 로 끝낸다. 한때 마지막 두 단계를 px 로 적었는데
        (ctl + 줄높이 → 100%) 바 높이와 몇 px 차이로 맞물려 바 윗변에
        가로선이 보였다. % 로 두면 바 높이가 바뀌어도 완만하게 사라진다. */
  background: linear-gradient(to top,
      rgba(0,0,0,0)    calc(var(--lv-rp-ctl) - 10px),
      rgba(0,0,0,0.45) calc(var(--lv-rp-ctl) + 16px),
      rgba(0,0,0,0.30) 88%,
      rgba(0,0,0,0)    100%) !important;
}

/* ⚠️ 두 번째 스크림이 더 큰 원인이었다 (2026-11-03).
      view.css 의 .player::after 는 화면 하단 **120px** 를 덮는
      linear-gradient(0deg, hsl(0 0% 0% / 0.85), transparent) 이고 z-index:2 라
      네이티브 재생 컨트롤 위에 그려진다. 바 스크림과 겹쳐 컨트롤이
      거의 검정에 묻혀 있었다.
      다시보기에서는 이 '시네마틱' 스크림을 끈다 — 여기 떠 있는 것은
      흰 상품카드와 아이콘 버튼뿐이고, 둘의 가독성은 위 띠 스크림이 맡는다.
      상단(.player::before)은 그대로 둔다 — 제목·시청자수가 거기 있다. */
body.lv-omk.lv-status-ended .player::after {
  display: none !important;
}

/* 라이브와 같은 배치를 재현한다.
   라이브는 [버튼] [채팅입력 flex:1] [버튼] [버튼] 이라 첫 버튼이 왼쪽 끝,
   나머지가 오른쪽 끝에 붙는다. 다시보기는 채팅 입력이 없으므로(채팅 x)
   첫 버튼에 margin-right:auto 를 줘 같은 결과를 만든다.
   space-between 을 쓰면 3개가 좌·중·우로 갈려 라이브와 달라 보인다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-bottombar-tab:first-of-type {
  margin-right: auto;
}

/* 버튼 자체는 라이브와 같은 모양이다 — 크기·배경·모서리를 재정의하지 않고
   기본 .omk-bottombar-tab(min-width:46px, height:42px, 투명 배경)을 그대로 쓴다.
   두 가지만 더한다:
     · pointer-events:auto — 컨테이너가 none 이라 버튼만 되살린다.
     · drop-shadow — 버튼이 앉는 높이(바닥에서 60~102px)는 그라데이션이
       거의 투명해지는 구간이라, 밝은 장면에서 흰 아이콘이 묻힌다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-bottombar-tab {
  pointer-events: auto;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.75));
  transition: transform 140ms ease, opacity 140ms ease;
}
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-bottombar-tab .omk-bottombar-tab-label {
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
/* 눌렀을 때만 반응 — 기본 규칙의 회색 사각 배경은 쓰지 않는다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-bottombar-tab:active {
  background: none;
  transform: scale(0.94);
  opacity: 0.85;
}

/* ── 한 줄 배치 (2026-11-03 요청) ────────────────────────────────────
   "상품 카드, 상품, 내주문, 카톡 순으로 1행에 전부 나열".
   view.php 의 스크립트가 상품핀 카드를 .omk-bottombar 안 첫 칸으로 옮기고
   body 에 lv-rp-oneline 을 붙인다. 그 뒤에만 이 규칙이 적용된다 —
   스크립트가 돌지 않으면 위 2층 배치가 그대로 남는다(깨지지 않는다).

     [상품카드: 썸네일 · 이름 · 가격 · 구매하기][상품][내주문][카톡]
     네이티브 재생 컨트롤                                        ← 아래 60px

   ⚠️ 폭이 빠듯하다. 390px 기기에서 버튼 3개와 좌우 패딩을 빼면 카드에
      약 215px 이 남고, 썸네일·가격·구매하기 버튼을 빼면 상품명에 70px
      안팎만 돌아간다. 그래서 카드 안쪽 치수를 한 줄 전용으로 줄이고
      상품명은 말줄임(기본 규칙의 ellipsis)에 맡긴다.
      버튼을 4개 이상 쓰게 되면 이 배치는 다시 봐야 한다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open.lv-rp-oneline .omk-product-pin {
  /* 흐름 안으로 들어왔으므로 절대위치 값을 전부 되돌린다.
     ⚠️ static 이 아니라 relative 다. .omk-product-pin-num(상품 번호 배지)이
        position:absolute; top:-6px; left:-4px 로 **카드 기준**에 걸려 있어서,
        static 으로 두면 기준이 .omk-bottombar(absolute)로 올라가 배지가
        카드가 아니라 바 왼쪽 위 구석에 가서 붙는다. relative 면 흐름에
        들어가면서도 기준을 유지한다(offset 은 아래에서 auto 로 지운다). */
  position: relative !important;
  top: auto !important; bottom: auto !important;
  left: auto !important; right: auto !important;
  flex: 1 1 auto;
  min-width: 0;                  /* 없으면 긴 상품명이 버튼을 밀어낸다 */
  /* ⚠️ 바가 pointer-events:none 이라 카드만 되살린다 — 없으면 구매하기를 못 누른다. */
  pointer-events: auto;
  padding: 6px 8px;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
body.lv-omk.lv-status-ended.lv-replay-sale-open.lv-rp-oneline .omk-product-pin-img   { width: 40px; height: 40px; }
body.lv-omk.lv-status-ended.lv-replay-sale-open.lv-rp-oneline .omk-product-pin-title { font-size: 12px; }
body.lv-omk.lv-status-ended.lv-replay-sale-open.lv-rp-oneline .omk-product-pin-price { font-size: 13.5px; }
body.lv-omk.lv-status-ended.lv-replay-sale-open.lv-rp-oneline .omk-product-pin-cta   { padding: 8px 12px; font-size: 12px; }

/* 첫 버튼의 margin-right:auto 를 되돌린다 — 카드가 flex:1 로 이미 밀어낸다.
   남겨 두면 상품 과 내주문 사이가 벌어진다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open.lv-rp-oneline .omk-bottombar-tab:first-of-type { margin-right: 0; }
/* 버튼은 줄어들지 않는다 — 좁아지면 카드가 줄어야 한다. */
body.lv-omk.lv-status-ended.lv-replay-sale-open.lv-rp-oneline .omk-bottombar-tab { flex: 0 0 auto; }

/* 좁은 화면 — 아이콘을 줄이고 상품핀 여백도 함께 줄인다. */
@media (max-width: 380px) {
  body.lv-omk.lv-status-ended.lv-replay-sale-open .omk-bottombar {
    /* ⚠️ 아래 패딩을 반드시 같이 적는다. `padding: 0 8px` 로 줄이면 아래 패딩이
       0 이 되어 버튼이 네이티브 재생 컨트롤 위로 내려앉는다(좁은 화면에서만
       재생 버튼이 가려지는 형태로). 좌우만 줄이고 위·아래는 유지한다. */
    padding: 8px 8px calc(var(--lv-rp-ctl) + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 탭 크기는 건드리지 않는다 — view.php 의 기본 규칙이 360px 이하에서
     이미 min-width:40px 로 줄인다. 여기서 또 정하면 라이브와 달라진다. */
}

/* 종료/예정 화면 — 풀스크린 다크 빈 상태 */
body.lv-omk .empty-state {
  background: #000 !important;
  color: #fff !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
}

body.lv-omk .es-icon {
  color: rgba(255,255,255,0.4) !important;
}

body.lv-omk .es-title {
  color: #fff !important;
}

body.lv-omk .es-sub {
  color: rgba(255,255,255,0.7) !important;
}

/* ========================================
   14. 채팅 행 inline 스타일 오버라이드
   ======================================== */
body.lv-omk .chat-row strong,
body.lv-omk .chat-row b {
  color: inherit !important;
}

/* viewer.js 가 동적 inline color 를 줄 수 있어 강제 흰글씨 */
body.lv-omk #chatList .chat-row,
body.lv-omk #chatList .chat-row span,
body.lv-omk #chatList .chat-row b,
body.lv-omk #chatList .chat-row strong,
body.lv-omk #chatList > div {
  color: #fff !important;
}

body.lv-omk #chatList .chat-row .nm,
body.lv-omk #chatList .chat-row .name {
  color: #fbbf24 !important;
  margin-right: 6px !important;
  font-weight: 700 !important;
}

body.lv-omk #chatList .chat-row.system,
body.lv-omk #chatList .chat-row.system * {
  color: #f472b6 !important;
}

/* 스켈레톤 (초기 로딩) 숨김 — omk 모드에서는 깔끔하게 */
body.lv-omk #chatList .lv-skel-chat-row {
  display: none !important;
}

/* ========================================
   15. 통합 주문 모달 상단 — 상품 한 줄 (썸네일 + 상품명 + 가격 + 수량)
   ======================================== */
.lv-uni-product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background:#fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 16px;
}
.lv-uni-product-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background:#fff;
  flex-shrink: 0;border:1px solid #e5e7eb;}
.lv-uni-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lv-uni-product-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-uni-product-price {
  font-size: 13px;
  font-weight: 700;
  color: #0B5FD9;
}
.lv-uni-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
.lv-uni-qty button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  line-height: 1;
}
.lv-uni-qty input {
  width: 44px;
  height: 32px;
  border: none;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  -moz-appearance: textfield;
}
.lv-uni-qty input::-webkit-outer-spin-button,
.lv-uni-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 옵션 박스 (색상/사이즈) — 통합 모달용 */
.lv-uni-option-box {
  margin-bottom: 14px;
  padding: 12px;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  border-radius: 8px;
}
.lv-uni-option-row { margin-bottom: 10px; }
.lv-uni-option-row:last-child { margin-bottom: 0; }
.lv-uni-option-row .opt-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #9d174d;
  display: block;
}

/* 통합 모달 폼 그룹 간격 압축 — 한 화면에 모두 보이도록 */
#orderModal .ig-form-group { margin-bottom: 12px !important; }
#orderModal .ig-modal-body { padding: 16px !important; }
@media (min-width: 769px) {
  #orderModal .ig-modal-content { max-width: 480px !important; }
}

/* 주문 모달 수량 입력 — 흰 배경 + 검정 글자 (가독성) */
#orderModal .lv-uni-qty,
.lv-uni-qty {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
}
#orderModal .lv-uni-qty input,
.lv-uni-qty input {
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 700 !important;
}
#orderModal .lv-uni-qty button,
.lv-uni-qty button {
  background: #ffffff !important;
  color: #111827 !important;
}
#orderModal .lv-uni-qty button:hover,
.lv-uni-qty button:hover {
  background: #f3f4f6 !important;
}

/* ============================================
   16. 핀배너 토글 (접힘 상태)
   ============================================ */
body.lv-omk .omk-pinbanner {
  cursor: pointer;
  user-select: none;
  transition: max-height 0.25s ease, padding 0.2s ease;
  max-height: 40vh;             /* 여러 줄 전체 노출 (스크롤 가능) */
  align-items: flex-start;
}
body.lv-omk .omk-pinbanner-ic { margin-top: 2px; }
body.lv-omk .omk-pinbanner-chev {
  margin-left: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
body.lv-omk .omk-pinbanner.is-collapsed {
  max-height: 32px;
  padding: 5px 12px;
  align-items: center;
}
body.lv-omk .omk-pinbanner.is-collapsed .omk-pinbanner-text {
  font-size: 11px;
  opacity: 0.85;
  /* 접힘 상태: 첫 줄만 노출 — omk-pn-rest 는 아래에서 숨김 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.4;
}
/* 접힘 시 rest 강제 숨김 (br + 나머지 줄들) */
body.lv-omk .omk-pinbanner.is-collapsed .omk-pn-rest { display: none !important; }
/* 펼침 시 rest 노출 (기본 inline 이면 br 이 실제 개행 유발) */
body.lv-omk .omk-pinbanner:not(.is-collapsed) .omk-pn-rest { display: inline; }
body.lv-omk .omk-pinbanner.is-collapsed .omk-pinbanner-ic,
body.lv-omk .omk-pinbanner.is-collapsed .omk-pinbanner-chev { margin-top: 0; }
body.lv-omk .omk-pinbanner.is-collapsed .omk-pinbanner-chev {
  transform: rotate(180deg);
}
/* 펼침 상태 (기본): nl2br <br> 반영 + 세로 스크롤 허용 */
body.lv-omk .omk-pinbanner:not(.is-collapsed) .omk-pinbanner-text {
  white-space: normal;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(40vh - 20px);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* ============================================
   17. 공통 시트 (오버레이 슬라이드업) — 마이페이지/주문 등
   ============================================ */
body.lv-omk .lv-sheet {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: lvSheetFadeIn 0.15s ease;
}
body.lv-omk .lv-sheet.is-open {
  display: flex;
}
@keyframes lvSheetFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.lv-omk .lv-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 85dvh;
  background: #ffffff;
  color: #111827;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: lvSheetSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes lvSheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

body.lv-omk .lv-sheet-handle {
  width: 40px;
  height: 4px;
  background: #d1d5db;
  border-radius: 999px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

body.lv-omk .lv-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}
body.lv-omk .lv-sheet-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111827;
}
body.lv-omk .lv-sheet-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
body.lv-omk .lv-sheet-close:hover {
  background: #f3f4f6;
  color: #111827;
}

body.lv-omk .lv-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* 마이페이지 시트 폼 */
body.lv-omk .lv-sheet-form .fld { margin-bottom: 12px; }
body.lv-omk .lv-sheet-form label {
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  display: block;
  margin-bottom: 6px;
}
body.lv-omk .lv-sheet-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #ffffff;
  color: #111827;
}
body.lv-omk .lv-sheet-form input:focus {
  outline: none;
  border-color: #0B5FD9;
  box-shadow: 0 0 0 3px rgba(11, 95, 217, 0.15);
}
body.lv-omk .lv-sheet-form input[readonly] {
  background:#fff;
  color: #6b7280;
}
body.lv-omk .lv-sheet-form .fld-row {
  display: flex;
  gap: 8px;
}
body.lv-omk .lv-sheet-form .btn-postcode {
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  background:#fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: #374151;
}
body.lv-omk .lv-sheet-form .save-btn {
  width: 100%;
  padding: 13px;
  background: #0B5FD9;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}
body.lv-omk .lv-sheet-form .save-btn:disabled {
  background: #9ca3af;
  cursor: wait;
}
body.lv-omk .lv-sheet-form .save-btn:hover:not(:disabled) {
  background: #0A4CB5;
}

/* 주문 시트 — 주문 리스트 */
body.lv-omk .lv-sheet-empty {
  padding: 40px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 13.5px;
}
body.lv-omk .lv-sheet-empty i {
  font-size: 36px;
  color: #d1d5db;
  margin-bottom: 10px;
  display: block;
}
body.lv-omk .lv-sheet-loading {
  padding: 30px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}
body.lv-omk .lv-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}
body.lv-omk .lv-order-row:last-child { border-bottom: 0; }
body.lv-omk .lv-order-row .info { flex: 1; min-width: 0; }
body.lv-omk .lv-order-row .num {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}
body.lv-omk .lv-order-row .meta {
  font-size: 11.5px;
  color: #6b7280;
  margin-top: 3px;
}
body.lv-omk .lv-order-row .price {
  font-size: 14px;
  font-weight: 800;
  color: #0B5FD9;
  text-align: right;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}
body.lv-omk .lv-order-row .badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 4px;
}
body.lv-omk .lv-order-row .badge.pending  { background: #fef3c7; color: #92400e; }
body.lv-omk .lv-order-row .badge.paid     { background: #d1fae5; color: #065f46; }
body.lv-omk .lv-order-row .badge.shipping { background: #dbeafe; color: #1e40af; }
body.lv-omk .lv-order-row .badge.shipped  { background: #D6E4FD; color: #0A4CB5; }
body.lv-omk .lv-order-row .badge.cancelled{ background: #fee2e2; color: #991b1b; }
body.lv-omk .lv-sheet-flash {
  margin: 8px 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
body.lv-omk .lv-sheet-flash.ok   { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
body.lv-omk .lv-sheet-flash.err  { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
body.lv-omk .lv-sheet-flash.info { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }

/* 외부 플랫폼 미러 채팅 (YouTube/TikTok) — 닉네임 색상으로 구분 */
body.lv-omk .chat-row.is-youtube .nm { color:#ff4d4f; }
body.lv-omk .chat-row.is-tiktok  .nm { color:#22d3ee; }

/* === 몰입 모드(소리 켠 뒤 영상 탭) — 영상 위 전체 오버레이 숨김 ===
   view.css 의 body.lv-immersive 규칙 보강: omk 의 !important 채팅 규칙(#lvChatWrap .chat-list 등)을
   확실히 이기도록 body.lv-omk.lv-immersive (2클래스) 로 명시 + visibility 까지 끔. */
body.lv-omk.lv-immersive .chat,
body.lv-omk.lv-immersive #lvChatWrap,
body.lv-omk.lv-immersive #lvChatWrap .chat-list,
body.lv-omk.lv-immersive #lvChatWrap #chatList,
body.lv-omk.lv-immersive .chat-list,
body.lv-omk.lv-immersive #chatList,
body.lv-omk.lv-immersive #newMsgBtn,
body.lv-omk.lv-immersive .lv-chat-toolbtn,
body.lv-omk.lv-immersive .omk-topbar,
body.lv-omk.lv-immersive .omk-pinbanner,
body.lv-omk.lv-immersive .omk-bottombar,
body.lv-omk.lv-immersive .omk-product-pin,
body.lv-omk.lv-immersive .notif-bell,
body.lv-omk.lv-immersive .lv-push-toggle,
body.lv-omk.lv-immersive .viewer-count,
body.lv-omk.lv-immersive .badge-live,
body.lv-omk.lv-immersive .badge-status {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   채팅 가독성 설정 · 고정 채팅 · 연결 배너 (2026-11-02)

   왜 이 파일에 넣는가
     view.php 가 읽는 CSS 중 **마지막에 로드**되는 파일이고, 위쪽 omk 규칙들이
     `font-size:13px !important` / `max-height:220px !important` 처럼
     !important 로 박혀 있다. 사용자 설정이 그걸 이기려면 같은 !important 에
     **더 높은 명시도**가 필요하다 — 그래서 선택자에 html 의 data 속성을 끼운다.
       기존:  body.lv-omk #lvChatWrap .chat-row        (id 1, class 1)
       여기:  html[data-...] body.lv-omk #lvChatWrap .chat-row (id 1, class 2)  ← 승
   ⚠️ 속성을 <html> 에 둔다. <body> 가 그려지기 전에 적용돼야 깜빡임이 없다.
   ========================================================================== */

/* ── 글자 크기 ─────────────────────────────────────────────────────────── */
html[data-lvchat-size="s"] body.lv-omk #lvChatWrap .chat-row,
html[data-lvchat-size="s"] body.lv-omk #chatList > div,
html[data-lvchat-size="s"] body.lv-omk #lvChatPin .lv-chatpin-msg { font-size: 11.5px !important; }
html[data-lvchat-size="l"] body.lv-omk #lvChatWrap .chat-row,
html[data-lvchat-size="l"] body.lv-omk #chatList > div,
html[data-lvchat-size="l"] body.lv-omk #lvChatPin .lv-chatpin-msg { font-size: 15.5px !important; }
html[data-lvchat-size="xl"] body.lv-omk #lvChatWrap .chat-row,
html[data-lvchat-size="xl"] body.lv-omk #chatList > div,
html[data-lvchat-size="xl"] body.lv-omk #lvChatPin .lv-chatpin-msg { font-size: 18px !important; }

/* PC(비 omk 레이아웃)도 같이 적용 — 한쪽만 되면 설정이 고장난 것처럼 보인다. */
html[data-lvchat-size="s"]  .chat-list .chat-row { font-size: 12px; }
html[data-lvchat-size="l"]  .chat-list .chat-row { font-size: 15.5px; }
html[data-lvchat-size="xl"] .chat-list .chat-row { font-size: 18px; }

/* ── 글자 굵기 ─────────────────────────────────────────────────────────── */
html[data-lvchat-weight="b"] body.lv-omk #lvChatWrap .chat-row,
html[data-lvchat-weight="b"] body.lv-omk #chatList > div { font-weight: 700 !important; }
html[data-lvchat-weight="b"] .chat-list .chat-row { font-weight: 700; }

/* ── 표시 줄 수 (모바일 오버레이 높이) ─────────────────────────────────────
   ONM Live 의 chatDisplayLineCount 와 같은 개념이다. 우리 모바일 화면에서
   채팅은 영상 위 고정 높이 영역이므로 '몇 줄 보일지' 가 실제 의미를 갖는다.
   한 줄 ≈ 18px(13px × line-height 1.4)로 보고 여유를 더해 환산한다.
   ⚠️ 글자 크기를 키우면 같은 높이에 들어가는 줄 수가 줄어든다. 높이를 글자
      크기까지 조합해 재계산하지는 않았다 — 조합이 12가지가 되고, 사용자는
      결국 눈으로 보고 맞춘다. 두 설정을 독립으로 둔다. */
html[data-lvchat-lines="4"]  body.lv-omk #chatList,
html[data-lvchat-lines="4"]  body.lv-omk .chat-list { max-height: 84px  !important; }
html[data-lvchat-lines="6"]  body.lv-omk #chatList,
html[data-lvchat-lines="6"]  body.lv-omk .chat-list { max-height: 126px !important; }
html[data-lvchat-lines="8"]  body.lv-omk #chatList,
html[data-lvchat-lines="8"]  body.lv-omk .chat-list { max-height: 168px !important; }
html[data-lvchat-lines="12"] body.lv-omk #chatList,
html[data-lvchat-lines="12"] body.lv-omk .chat-list { max-height: 252px !important; }
html[data-lvchat-lines="16"] body.lv-omk #chatList,
html[data-lvchat-lines="16"] body.lv-omk .chat-list { max-height: 336px !important; }

/* ── 고정 채팅 ─────────────────────────────────────────────────────────── */
.lv-chatpin {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(11, 95, 217, 0.12);
  border: 1px solid rgba(11, 95, 217, 0.35);
  border-left: 3px solid hsl(var(--hd-brand, 214 90% 45%));
}
.lv-chatpin.lv-show { display: flex; }
.lv-chatpin-ico {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 11px;
  color: hsl(var(--hd-brand, 214 90% 45%));
}
.lv-chatpin-body { min-width: 0; flex: 1 1 auto; }
.lv-chatpin-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--hd-brand, 214 90% 45%));
  margin-bottom: 1px;
}
.lv-chatpin-msg {
  font-size: 13px;
  line-height: 1.45;
  /* 긴 메시지가 화면을 다 먹지 않게 3줄로 자른다. 단어 기준 줄바꿈 유지.
     ⚠️ line-clamp 는 display:-webkit-box 와 함께여야 동작한다. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 영상 위(검정 배경)에서는 흰 글자여야 보인다. */
body.lv-omk .lv-chatpin {
  margin: 0 8px 6px;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.22);
  border-left-color: #fbbf24;
  backdrop-filter: blur(6px);
}
body.lv-omk .lv-chatpin-ico,
body.lv-omk .lv-chatpin-name { color: #fbbf24; }
body.lv-omk .lv-chatpin-msg {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* ── 실시간 연결 끊김 배너 ─────────────────────────────────────────────── */
.lv-conn-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.lv-conn-banner.lv-show { display: flex; }
body.lv-omk .lv-conn-banner {
  margin: 0 8px 6px;
  background: rgba(154, 52, 18, 0.92);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── 채팅 설정 팝오버 ──────────────────────────────────────────────────── */
.lv-chatset-wrap { position: relative; display: inline-flex; }
.lv-chatset-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  min-width: 212px;
  padding: 10px;
  border-radius: 12px;
  background: hsl(var(--hd-elevated, 0 0% 100%));
  border: 1px solid hsl(var(--hd-border, 220 13% 88%));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  text-align: left;
}
.lv-chatset-panel.lv-open { display: block; }
.lv-chatset-row + .lv-chatset-row { margin-top: 10px; }
.lv-chatset-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--hd-muted, 220 9% 46%));
  margin-bottom: 5px;
}
.lv-chatset-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.lv-chatset-opt {
  flex: 1 1 auto;
  min-width: 42px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid hsl(var(--hd-border, 220 13% 88%));
  background: hsl(var(--hd-surface, 0 0% 98%));
  color: hsl(var(--hd-text, 220 20% 20%));
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lv-chatset-opt[aria-pressed="true"] {
  background: hsl(var(--hd-brand, 214 90% 45%));
  border-color: hsl(var(--hd-brand, 214 90% 45%));
  color: #fff;
}
/* 영상 위에서 열릴 때(모바일) — 어두운 패널로. */
body.lv-omk .lv-chatset-panel {
  background: rgba(17, 17, 17, 0.96);
  border-color: rgba(255, 255, 255, 0.18);
}
body.lv-omk .lv-chatset-label { color: rgba(255, 255, 255, 0.62); }
body.lv-omk .lv-chatset-opt {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}