/*
 * Basketball Design System — Components
 * 모든 클래스는 .bb-* prefix 로 격리 (안전장치 1: 기존 .btn / .card 등과 cascade 충돌 0).
 *
 * 사용 예:
 *   <button class="bb-btn bb-btn-primary">저장</button>
 *   <div class="bb-form-actions">
 *     <button class="bb-btn bb-btn-primary" type="submit">제출</button>
 *   </div>
 *
 * 새 컴포넌트 추가 규칙: docs/conventions/frontend.md 의 "Basketball 디자인 시스템" 섹션 참고.
 */


/* =============================================================
 * Buttons
 * ============================================================= */
/* ⚠️ `display: inline-flex` 가 UA 스타일시트의 `[hidden] { display:none }` 을 이긴다
   (작성자 규칙이 UA 규칙보다 항상 우선). 그래서 el.hidden = true 를 줘도 버튼이
   화면에 그대로 보인다 — 실제로 STEP0 의 "다음" 숨김(R15)이 이렇게 새서 캡처
   판독으로 잡혔다. 이 저장소는 analysis.css 에서 같은 함정을 컴포넌트마다 따로
   막아 왔는데, 근본 원인이 .bb-btn 이므로 여기서 한 번에 막는다. */
.bb-btn[hidden] { display: none; }

.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-2);
  min-height: var(--bb-tap-target);
  min-width: var(--bb-tap-target);
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--bb-radius);
  font-family: var(--bb-font);
  font-size: var(--bb-text-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--bb-t-fast) var(--bb-ease),
              border-color var(--bb-t-fast) var(--bb-ease),
              color var(--bb-t-fast) var(--bb-ease);
  text-decoration: none;
  user-select: none;
}

.bb-btn:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 2px;
}

.bb-btn:disabled,
.bb-btn.bb-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Variants */
.bb-btn-primary {
  background: var(--bb-primary);
  color: var(--bb-bg);
}
.bb-btn-primary:hover {
  background: var(--bb-primary-dark);
}

.bb-btn-secondary {
  background: var(--bb-surface);
  color: var(--bb-ink);
  border-color: var(--bb-border);
}
.bb-btn-secondary:hover {
  background: var(--bb-border-soft);
}

.bb-btn-accent {
  background: var(--bb-accent);
  color: var(--bb-bg);
}
.bb-btn-accent:hover {
  background: var(--bb-accent-dark);
}

.bb-btn-danger {
  background: var(--bb-danger);
  color: var(--bb-bg);
}

.bb-btn-ghost {
  background: transparent;
  color: var(--bb-primary);
}
.bb-btn-ghost:hover {
  background: var(--bb-primary-soft);
}

/* Sizes */
.bb-btn-sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: var(--bb-text-sm);
}
.bb-btn-lg {
  padding: 14px 28px;
  font-size: var(--bb-text-lg);
}

/* Block */
.bb-btn-block {
  display: flex;
  width: 100%;
}


/* =============================================================
 * Form action wrappers
 * ============================================================= */
.bb-form-actions {
  display: flex;
  justify-content: center;
  gap: var(--bb-space-2);
  margin-top: var(--bb-space-3);
}

.bb-form-actions-start { justify-content: flex-start; }
.bb-form-actions-end   { justify-content: flex-end; }

.bb-cta-center {
  display: flex;
  justify-content: center;
  margin: var(--bb-space-4) 0;
}


/* =============================================================
 * Card
 * ============================================================= */
.bb-card {
  background: var(--bb-bg);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-3);
  box-shadow: var(--bb-shadow);
}

.bb-card-flat {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border-soft);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-3);
}


/* =============================================================
 * Modal
 * ============================================================= */
.bb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.bb-modal-box {
  background: var(--bb-bg);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-4);
  max-width: 90vw;
  width: 400px;
  box-shadow: var(--bb-shadow-lg);
}


/* =============================================================
 * Badge
 * ============================================================= */
.bb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--bb-text-sm);
  font-weight: 600;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-surface);
  color: var(--bb-ink-sub);
}

.bb-badge-primary { background: var(--bb-primary-soft); color: var(--bb-primary-dark); }
.bb-badge-success { background: var(--bb-success-soft); color: #065F46; }
.bb-badge-warning { background: var(--bb-warning-soft); color: #92400E; }
.bb-badge-danger  { background: var(--bb-danger-soft);  color: #991B1B; }


/* =============================================================
 * State
 * ============================================================= */
.bb-loading {
  cursor: wait;
}

/* =============================================================
 * Utility — 숫자 폰트 (open_access rtp-recent-games.css/rtp-game-detail.css
 * 2곳에서 반복돼 승격 — Rule A. tabular-nums 로 숫자 컬럼 폭이 흔들리지 않게 함).
 * 3차 수정(2026-07-25): font-family 누락 보완 — 핸드오프 .num 규칙과 동일하게
 * 숫자는 Barlow(var(--bb-font-num), frontend.md 토큰 카탈로그 정본)로 렌더.
 * ============================================================= */
.bb-num {
  font-family: var(--bb-font-num);
  font-variant-numeric: tabular-nums;
}


/* =============================================================
 * Bottom sheet (signup_claim_first R4 — 선점 안내 등)
 * transform 기반 애니메이션(P1) — position/height 는 건드리지 않는다.
 * ============================================================= */
.bb-sheet-dim {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 22, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bb-t-base) var(--bb-ease);
  /* claim_dock_visibility(2026-08-07): 60→110. 하단 fixed nav(z-index 100)가 딤 위에
     그려져 시트가 열려도 nav 가 눌리는 역전이 있었다. 모달은 nav 위가 맞다. */
  z-index: 110;
}
.bb-sheet-dim--open {
  opacity: 1;
  pointer-events: auto;
}

.bb-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bb-bg);
  border-radius: var(--bb-radius-20) var(--bb-radius-20) 0 0;
  padding: var(--bb-space-3) var(--bb-space-3) var(--bb-space-4);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--bb-shadow-lg);
  transform: translateY(100%);
  transition: transform var(--bb-t-slow) var(--bb-ease);
  /* claim_dock_visibility(2026-08-07): 70→120 — 딤(110)·nav(100)·claim dock(101) 위. */
  z-index: 120;
}
.bb-sheet--open {
  transform: translateY(0);
}

/* Inline variant — 전체 페이지 리로드로 렌더되는 안내 카드(예: signup_account.html
   R8 race 배너). JS 오픈/클로즈 트리거 없이 항상 보여야 하므로 fixed/transform 을
   해제하고 일반 문서 흐름의 카드로 만든다. 타이포(.bb-sheet__title/__desc)는 그대로
   재사용 — 같은 톤 유지. */
.bb-sheet--inline {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: none;
  margin: 0 0 var(--bb-space-3);
  border-radius: var(--bb-radius-xl);
  box-shadow: none;
  border: 1px solid var(--bb-border-soft);
  transform: none;
  max-height: none;
  overflow: visible;
  z-index: auto;
}

.bb-sheet__title {
  margin: 0 0 var(--bb-space-2);
  font-size: var(--bb-text-lg);
  font-weight: 800;
  color: var(--bb-ink);
  line-height: 1.35;
}
.bb-sheet__desc {
  margin: 0 0 var(--bb-space-3);
  font-size: var(--bb-text-sm);
  color: var(--bb-ink-sub);
  line-height: 1.55;
}
.bb-sheet__actions {
  display: flex;
  gap: var(--bb-space-2);
}
.bb-sheet__actions .bb-btn { flex: 1; }
/* POST 버튼을 감싼 form 도 다른 버튼처럼 전체 폭(signup_verify_ext 안내 시트 [본인인증하고 되찾기 요청]) */
.bb-sheet__actions > form { flex: 1; display: flex; }
.bb-sheet__actions + .bb-btn { margin-top: var(--bb-space-2); }
.bb-sheet__link {
  display: block;
  width: 100%;
  margin-top: var(--bb-space-2);
  background: none;
  border: none;
  padding: var(--bb-space-2) 0;
  font-size: var(--bb-text-sm);
  font-weight: 600;
  color: var(--bb-ink-sub);
  text-align: center;
  cursor: pointer;
  min-height: var(--bb-tap-target);
}
/* 시트 안 짧은 오류 한 줄 (signup_verify_ext 안내 시트 — ack 실패 시 시트를 남기고 보인다) */
.bb-sheet__err {
  margin: var(--bb-space-2) 0;
  font-size: var(--bb-text-sm);
  font-weight: 600;
  color: var(--bb-danger);
  text-align: center;
}
.bb-sheet__err[hidden] { display: none; }
/* signup_verify_ext 안내 시트 — 한국어 제목이 어절 중간에서 끊기지 않게("옮겨졌어/요") */
.bb-identity-notice { word-break: keep-all; overflow-wrap: break-word; }


/* =============================================================
 * Progress bar (signup_claim_first 단계형 플로우 — 1/3, 1/2 등)
 * ============================================================= */
.bb-progress {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  flex: 1;
}
.bb-progress-track {
  flex: 1;
  height: 4px;
  background: var(--bb-border-soft);
  border-radius: var(--bb-radius-pill);
  overflow: hidden;
}
.bb-progress-fill {
  height: 100%;
  background: var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  transition: width var(--bb-t-base) var(--bb-ease);
}
.bb-progress-label {
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-sm);
  font-weight: 700;
  color: var(--bb-ink-sub);
  white-space: nowrap;
}


/* =============================================================
 * Mini profile card (signup_claim_first — 선택된 선수 요약 카드)
 * ============================================================= */
.bb-miniprofile {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  background: var(--bb-surface);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-2) var(--bb-space-15);
  margin-bottom: var(--bb-space-3);
  text-align: left;
}
.bb-miniprofile--spaced { margin-top: var(--bb-space-3); }
.bb-miniprofile__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bb-border-soft);
  color: var(--bb-ink-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.bb-miniprofile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bb-miniprofile__body { min-width: 0; }
.bb-miniprofile__name {
  display: block;
  font-size: var(--bb-text-sm);
  font-weight: 800;
  color: var(--bb-ink);
}
.bb-miniprofile__meta {
  display: block;
  font-size: var(--bb-text-2xs);
  color: var(--bb-ink-muted);
  margin-top: 2px;
}


/* =============================================================
 * Link banner (signup_claim_first R12 — my_profile 상단 1회성 배너)
 * ============================================================= */
.bb-link-banner {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin: 0 var(--bb-space-3) var(--bb-space-3);
  padding: var(--bb-space-3);
  background: var(--bb-primary-soft);
  border: 1px solid var(--bb-primary-soft);
  border-radius: var(--bb-radius-xl);
  color: var(--bb-primary-dark);
  font-size: var(--bb-text-sm);
  font-weight: 700;
}
.bb-link-banner__icon { flex-shrink: 0; }


/* =============================================================
 * Guardian Tag Card (signup_verify_ext R15 — 대기 계정 내 프로필 배너)
 * ============================================================= */
.bb-guardian-tag-card {
  margin: 0 var(--bb-space-3) var(--bb-space-3);
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-xl);
}
/* settings_tab R21 — 배지 한 줄이 설정 › 본인 확인으로 가는 링크. 배지는 왼쪽, › 는 오른쪽 끝. */
.bb-guardian-tag-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-2);
  min-height: var(--bb-tap-target);
  padding: 0 var(--bb-space-4);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.bb-guardian-tag-card__chev { display: flex; flex: none; color: var(--bb-ink-sub); }
/* 설정 화면 보호자 배지(.st-badge--info)와 같은 조합 — 바탕 accent-soft / 글자 accent-dark */
.bb-guardian-tag-card__badge { background: var(--bb-accent-soft); color: var(--bb-accent-dark); }


/* =============================================================
 * Signup Card (my_tab — 게스트 데모 프로필 히어로 바로 아래 가입 유도 카드)
 * ============================================================= */
.bb-signup-card {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
  margin: 0 var(--bb-space-3) var(--bb-space-3);
  padding: var(--bb-space-4);
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-xl);
}
.bb-signup-card__title {
  margin: 0;
  font-size: var(--bb-text-base);
  font-weight: 700;
  color: var(--bb-ink);
}
.bb-signup-card__actions {
  display: flex;
  gap: var(--bb-space-2);
}
.bb-signup-card__actions .bb-btn { flex: 1; }

/* ── --center: 핸드오프 02-my-guest.png 정본 (아이콘 + 2줄 제목 + 부제) ──────
   ⚠️ 제목의 줄바꿈은 **CSS 가 한다** — `<br>` 로 나누면 my_tab R3 의
      `assertIn(DEMO_CARD_TITLE, html)` 이 깨진다(contracts/my_tab.py 주석).
      max-width(ch) + balance 로 "회원가입을 하면 / 자신의 데이터를 볼 수 있어요" 2줄이 된다. */
.bb-signup-card--center {
  align-items: center;
  gap: var(--bb-space-2);
  padding: var(--bb-space-4) var(--bb-space-3) var(--bb-space-3);
  background: var(--bb-bg);
  border-color: var(--bb-border-soft);
  box-shadow: var(--bb-shadow-sm);
  text-align: center;
}
.bb-signup-card--center .bb-signup-card__title {
  max-width: 20ch;
  font-size: var(--bb-text-lg);
  font-weight: 800;
  line-height: 1.45;
  /* ⚠️ `word-break: keep-all` 없이는 한국어가 **어절 중간에서** 끊긴다
     ("회원가입을 하 / 면 자신의 …" — 실측). balance 만으로는 못 막는다. */
  word-break: keep-all;
  text-wrap: balance;
}
.bb-signup-card--center .bb-signup-card__actions {
  width: 100%;
  margin-top: var(--bb-space-2);
}
.bb-signup-card--center .bb-signup-card__actions .bb-btn {
  min-height: 52px;
  font-size: var(--bb-text-base);
  font-weight: 800;
  border-radius: var(--bb-radius-xl);
}
.bb-signup-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--bb-space-05);
  color: var(--bb-primary);
  background: var(--bb-primary-soft);
  border-radius: var(--bb-radius-lg);
}
.bb-signup-card__sub {
  max-width: 26ch;
  margin: 0;
  font-size: var(--bb-text-sm);
  font-weight: 600;
  line-height: 1.55;
  color: var(--bb-ink-muted);
  word-break: keep-all;
  text-wrap: balance;
}

/* my_stats.html — 히어로가 없는 페이지 상단에 배지+카드를 쌓을 때 쓰는 래퍼 */
.rtp-stats-demo-block { padding: var(--bb-space-3) 0 0; }
.rtp-stats-demo-block .rtp-hero__demo-badge { margin: 0 var(--bb-space-3) var(--bb-space-3); }


/* =============================================================
 * Live banner (youtube_live — 홈 상단 KBA 유튜브 실시간 중계)
 * 모바일 우선(375px, 320px 검증) — 항목 세로 스택. 라이브 1/2~3건은 전부 노출,
 * 4건 이상은 backend 가 상위 MAX_BANNER_ITEMS 개만 items 에 담고 나머지는
 * overflow_count 로 넘긴다(템플릿은 개수 계산 안 함).
 * ============================================================= */
/* 2026-08-06(사용자 지시) — 핸드오프 01-home-live.png 로 재정렬.
   ⚠️ 바뀐 것: 섹션을 감싸던 **붉은 테두리 카드를 없앤다**. 정본은 섹션이 투명하고
   각 항목이 흰 카드로 페이지 배경 위에 떠 있는 모양이다. 붉은 래퍼는 항목 카드와
   이중 테두리가 되어 "배너 안의 배너"처럼 보였다(사용자 스크린샷). */
.bb-live-banner {
  /* ⚠️ 좌우 마진은 0 이다. 부모 .rtp-entry__body 가 이미 `padding: 24px 20px` 를 갖고
     있어서, 여기에 다시 20px 를 주면 40px 가 되어 배너만 형제(검색폼·기록 랭킹 등)보다
     20px 씩 안쪽으로 들어간다(실측: 배너 left=40/right=350, 나머지 left=20/right=370).
     세로 마진만 남긴다. */
  margin: var(--bb-space-3) 0 var(--bb-space-1);
}

/* mvp_align rev.7 R11 — 헤더: "오늘의 중계" + "● LIVE {n}" 배지 + 우측 "유튜브에서 보기 ›" */
.bb-live-banner__head {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin: 0 0 var(--bb-space-15) 2px;
}
.bb-live-banner__headtitle {
  font-size: var(--bb-text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bb-ink);
}
.bb-live-banner__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--bb-text-2xs);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--bb-danger);
  border-radius: var(--bb-radius-pill);
  padding: 4px 9px;
}
.bb-live-banner__ytlink {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--bb-text-2xs);
  font-weight: 700;
  color: var(--bb-ink-sub);
  white-space: nowrap;
  /* 탭 타겟 44px — flow 테스트(_mobile_and_taptarget_check)가 getBoundingClientRect 의
     width·height **둘 다** 44 이상을 요구한다. 텍스트 링크라 높이가 20px 정도로 잡혀
     회귀에서 걸렸다. 헤더 높이가 커지지 않도록 음수 마진으로 상쇄한다. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -12px;
  margin-bottom: -12px;
}
.bb-live-banner__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--bb-radius-pill);
  background: #fff;
  box-shadow: 0 0 0 0 color-mix(in srgb, #fff 60%, transparent);
  animation: bb-live-pulse 1.8s ease-out infinite;
}
.bb-live-banner__empty {
  margin: 0;
  padding: var(--bb-space-4) var(--bb-space-2);
  text-align: center;
  font-size: var(--bb-text-sm);
  font-weight: 700;
  color: var(--bb-ink-sub);
}
@keyframes bb-live-pulse {
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bb-danger) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bb-danger) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-live-banner__dot { animation: none; }
}

.bb-live-banner__list {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-15);
}

.bb-live-banner__item {
  display: flex;
  align-items: center;
  gap: var(--bb-space-15);
  min-height: var(--bb-tap-target);
  min-width: var(--bb-tap-target);
  padding: var(--bb-space-15);
  background: var(--bb-bg);
  border: 1px solid transparent;
  border-radius: var(--bb-radius-xl);
  box-shadow: var(--bb-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.bb-live-banner__item:active {
  transform: scale(0.99);
  border-color: color-mix(in srgb, var(--bb-danger) 45%, var(--bb-border));
}

/* 썸네일은 항상 **어두운 블록**이다 — 이미지가 실리든(object-fit) 폴백이든 같은 실루엣이라
   목록이 들쭉날쭉하지 않다. 재생 삼각형은 가운데 하나만 둔다(정본). */
.bb-live-banner__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 104px;
  height: 66px;
  border-radius: var(--bb-radius);
  background: var(--bb-hero-inner);
  overflow: hidden;
}
.bb-live-banner__thumb--fallback {
  background: var(--bb-hero-inner);
}
.bb-live-banner__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 재생 표시 — 정본은 가운데 큰 반투명 삼각형(원형 버튼 아님). 썸네일 이미지 위에
   그대로 얹히므로 position:absolute 를 유지한다. */
/* ⚠️ inset:0 로 썸네일 전체를 덮고 그 안에서 가운데 정렬한다. offset 없이 absolute 만
   주면 static position(형제가 전부 absolute 인 flex 컨테이너)이라 몇 px 씩 치우친다. */
.bb-live-banner__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, #fff 78%, transparent);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.bb-live-banner__pill {
  position: absolute;
  left: 6px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: var(--bb-text-2xs);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--bb-bg);
  background: var(--bb-danger);
  border-radius: var(--bb-radius-8);
}
.bb-live-banner__pill-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--bb-radius-pill);
  background: #fff;
}
/* mvp_align rev.7 R8 — replay 는 LIVE 배지 대신 "다시보기"(중립색) */
.bb-live-banner__pill--replay {
  background: color-mix(in srgb, var(--bb-ink) 62%, transparent);
}

.bb-live-banner__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-2);
}
/* 정본은 "경기장 · 대회명 N일차" 를 **한 문단으로 흘려** 2줄까지 감싼다.
   ⚠️ 예전엔 nowrap+ellipsis 로 1줄을 잘랐다 — 경기장 이름이 길면 대회명이 통째로
   사라져서 어느 경기인지 알 수 없었다. `__sub` 는 이제 이 문단 안의 색만 담당한다. */
.bb-live-banner__label {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--bb-text-sm);
  font-weight: 700;
  line-height: 1.42;
  color: var(--bb-ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bb-live-banner__sub {
  font-weight: 700;
  color: var(--bb-ink);
}
.bb-live-banner__viewers {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 800;
  color: var(--bb-danger);
}
.bb-live-banner__metasep { color: var(--bb-ink-muted); }
/* mvp_align rev.7 R11 — 부제 행: 채널명(KBA/KSSBF) · 시청자 */
.bb-live-banner__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--bb-text-2xs);
  font-weight: 700;
  color: var(--bb-ink-sub);
}
/* 채널 원형 이니셜 배지 — 텍스트는 backend 가 만든 item.channel_badge("KS") */
.bb-live-banner__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  font-family: var(--bb-font-num);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  background: var(--bb-neutral-900);
  border-radius: var(--bb-radius-pill);
}
.bb-live-banner__channel {
  font-family: var(--bb-font-num);
  letter-spacing: 0.02em;
}
.bb-live-banner__debug {
  overflow-wrap: break-word;
  font-size: var(--bb-text-2xs);
  color: var(--bb-warning);
}

.bb-live-banner__overflow {
  margin: var(--bb-space-2) 0 0;
  font-size: var(--bb-text-sm);
  color: var(--bb-ink-sub);
  text-align: center;
}

/* ⚠️ [hidden] 가드 — .bb-live-banner__item{display:flex} 가 UA 의 [hidden]{display:none}
   을 이겨서 "더보기"로 접힌 항목이 그대로 보이는 걸 막는다(rtp-recent-games.css 와 동일 패턴).
   더보기(youtube_live mini R14) — 상위 3건(items) 밑에 나머지(more_items)를 hidden 으로
   렌더해두고 이 버튼이 펼침/접힘을 토글한다(rtp-live-banner.js). */
.bb-live-banner__item[hidden] { display: none; }

.bb-live-banner__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--bb-tap-target);
  min-width: var(--bb-tap-target);
  margin: var(--bb-space-2) 0 0;
  padding: var(--bb-space-15) var(--bb-space-2);
  font-family: inherit;
  font-size: var(--bb-text-sm);
  font-weight: 700;
  color: var(--bb-danger);
  background: var(--bb-bg);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.bb-live-banner__more:active {
  transform: scale(0.99);
  border-color: color-mix(in srgb, var(--bb-danger) 45%, var(--bb-border));
}