/* 스포츠중계 보드 (/Broadcast/List) — Figma 시안 전면 재퍼블리싱. 뷰의 @section Styles로 로드. 공통은 site.css */
/* 클래스 prefix: bc- (broadcast). .sb 래퍼는 site.css의 flex-column 레이아웃만 재사용. */

/* ===================== 페이지 전용 토큰 ===================== */
/* px 기준 시안값을 rem으로 환산(루트 14px 기준 → 모바일 75% 축소 시 자동 비례). 보더 1px만 px 유지. */
/* 토큰은 .bc(페이지 본문)와 .bcfs(풀스크린 오버레이) 양쪽에 정의 —
   .bcfs는 .bc 바깥(page-layout 형제)이라 .bc 스코프 변수가 상속되지 않으므로 함께 선언. */
.bc, .bcfs {
    --bc-blue: #1A56DB;          /* 액션/활성 파랑 */
    --bc-blue-deep: #0034CE;     /* SEO 세로바 네이비블루 */
    --bc-red: #E11D2A;           /* LIVE / 진행중 빨강 */
    --bc-text: #1F2430;          /* 강한 본문/제목 */
    --bc-text-dim: #5B6473;      /* 보조 텍스트 */
    --bc-text-mute: #98A0AE;     /* 흐린 라벨 */
    --bc-border: #E8EBF0;        /* 카드/버튼 보더 */
    --bc-soft: #F3F3F6;          /* 비활성 원/칩 배경 */
    --bc-soft-blue: #EEF3FF;     /* 종목 배지 연파랑 */
    --bc-row-line: #F1F3F7;      /* 데이터 행 구분선 */
    --bc-radius: 0.857rem;       /* 12px */
    --bc-radius-lg: 1rem;        /* 14px */
    --bc-card-shadow: 0 0.286rem 1.143rem rgba(20, 30, 55, 0.08);  /* 0 4px 16px */
}

.bc { gap: 1rem; }
/* AJAX 새로고침 래퍼 — 레이아웃상 투명하게 두어 내부(카테고리/타이틀/일정)가 .bc의 flex gap을 그대로 받게 함 */
#bcRefreshable { display: contents; }

/* 공통 파랑 세로바 */
.bc-bar {
    display: inline-block;
    width: 0.25rem;              /* 4px */
    height: 1.125rem;            /* 18px */
    border-radius: 999px;
    background: var(--bc-blue);
    flex: none;
}
.bc-bar--sm { height: 0.875rem; }   /* 14px */

/* ===================== 1. 상단 탭 (pill) ===================== */
.bc-tabs {
    display: flex;
    gap: 0.643rem;
    flex-wrap: wrap;
}
.bc-tab {
    display: inline-flex;        /* a/button 공통 — 텍스트 수직·수평 중앙 정렬 */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 9.143rem;         /* ~128px */
    height: 2.714rem;            /* 38px */
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--bc-border);
    background: #fff;
    color: var(--bc-text-dim);
    font-size: 0.929rem;         /* 13px */
    font-weight: 700;
    text-decoration: none;       /* a 태그 밑줄 제거 */
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}
.bc-tab:hover { border-color: var(--bc-blue); color: var(--bc-blue); }
.bc-tab.is-active {
    background: var(--bc-blue);
    border-color: var(--bc-blue);
    color: #fff;
}

/* ===================== 2. 섹션 타이틀 ===================== */
.bc-section-title {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    margin: 0;
    font-size: 1.1875rem;        /* 19px (Figma 상단 헤딩 '스포츠 중계 A') */
    font-weight: 800;
    color: var(--bc-text);
}
/* 섹션 소제목(경기 일정 등 — bc-bar--sm 동반) — Figma 13.5px */
.bc-section-title--sm { font-size: 0.84375rem; }   /* 13.5px */

/* ===================== 3. 카드 공통 ===================== */
.bc-card {
    background: #fff;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
    box-shadow: var(--bc-card-shadow);
    overflow: hidden;
}

/* 중계 시청 카드 헤더 */
.bc-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.857rem 1.143rem;
    border-bottom: 1px solid var(--bc-border);
}
.bc-card-head-title { font-size: 0.84375rem; font-weight: 800; color: var(--bc-text); }   /* 13.5px (Figma — 경기 일정 소제목과 동일) */

/* ── 플레이어 ── 높이는 분할별 종횡비에 맞춰 자동(재생 전=.bc-player-default 16:9, 재생 중=.bc-screens) */
.bc-player {
    position: relative;
    margin: 1.143rem;
    border-radius: var(--bc-radius);
    background: linear-gradient(135deg, #11161F, #222936);
    overflow: hidden;
}
/* 재생 전(기본 재생버튼) 상태 = 16:9로 플레이어 높이 확보 */
.bc-player-default { position: relative; width: 100%; aspect-ratio: 16 / 9; }
/* 시청 클릭 시 주입되는 영상 iframe — 플레이어를 꽉 채움 */
.bc-player iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; display: block; }

/* ── 화면 분할(멀티뷰) ── */
.bc-screens { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; gap: 2px; background: #000; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.bc-screen {
    position: relative; overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #11161F, #222936);
}
.bc-screen iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; display: block; }
.bc-screen-empty { display: inline-flex; align-items: center; gap: 0.4rem; color: #94a3b8; font-size: 0.9rem; }
.bc-screen.is-active { outline: 2px dashed #FACC15; outline-offset: -2px; }
/* 분할 레이아웃: 1=단일 / 2=좌우 / 3·4=2x2 (3은 우하단 셀 비움) */
.bc-screens.split-2 { aspect-ratio: 32 / 9; grid-template-columns: 1fr 1fr; }                                              /* 좌우 16:9 두 개 → 32:9 */
.bc-screens.split-3, .bc-screens.split-4 { aspect-ratio: 16 / 9; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }  /* 2x2 → 16:9 */
.bc-screens.split-1 .bc-screen:nth-child(n+2) { display: none; }
.bc-screens.split-2 .bc-screen:nth-child(n+3) { display: none; }
.bc-screens.split-3 .bc-screen:nth-child(4) { display: none; }

.bc-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 4.571rem; height: 4.571rem;   /* 64px */
    border-radius: 50%;
    background: var(--bc-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.286rem 1.429rem rgba(26, 86, 219, 0.5);
    transition: transform .12s, box-shadow .12s;
}
.bc-play .bi { font-size: 2rem; margin-left: 0.143rem; }
.bc-play:hover { transform: translate(-50%, -50%) scale(1.06); }

/* ── 컨트롤 바 ── */
.bc-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.857rem 1.143rem;
    background: rgba(241, 243, 247, 0.4);
    border-top: 1px solid var(--bc-border);
}

.bc-channels {
    display: flex;
    gap: 0.429rem;
    flex-wrap: wrap;
}
.bc-channel {
    height: 1.9375rem;           /* 31px (Figma) */
    padding: 0 0.875rem;         /* 좌우 14px */
    border-radius: var(--radius-md);   /* 8px */
    border: 1px solid var(--bc-border);
    background: #fff;
    color: var(--bc-text-dim);
    font-size: 0.78125rem;       /* 12.5px */
    font-weight: 700;
    transition: background-color .12s, color .12s, border-color .12s;
}
.bc-channel:hover { border-color: var(--bc-blue); color: var(--bc-blue); }
.bc-channel.is-active {
    background: var(--bc-blue);
    border-color: var(--bc-blue);
    color: #fff;
}

.bc-controls-right {
    margin-left: auto;
    display: flex;
    gap: 0.429rem;
}
.bc-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    height: 2.286rem;
    padding: 0 0.714rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--bc-border);
    background: #fff;
    color: var(--bc-text-dim);
    font-size: 0.857rem;         /* 12px */
    font-weight: 600;
}
.bc-mini-btn:hover { border-color: var(--bc-text-dim); color: var(--bc-text); }

/* ===================== 4. 스포츠 카테고리 필터 바 ===================== */
.bc-catbar {
    display: flex;
    align-items: flex-start;
    gap: 0.857rem;
    padding: 1rem 1.143rem;
    background: #F1F3F766;                /* rgba(241,243,247,0.4) — Figma */
    border: 1px solid var(--bc-border);   /* #E8EBF0 */
    border-radius: var(--bc-radius);
    overflow-x: auto;
}
.bc-cat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.429rem;
    background: transparent;
    flex: none;
    min-width: 3.571rem;
}
.bc-cat-ico {
    position: relative;
    width: 3.143rem; height: 3.143rem;   /* 44px */
    border-radius: 50%;
    background: rgba(241, 243, 247, 0.5);
    border: 1px solid var(--bc-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.429rem;
    line-height: 1;
    transition: background-color .12s, border-color .12s, color .12s;
}
.bc-cat.is-active .bc-cat-ico {
    background: var(--bc-blue);
    border-color: var(--bc-blue);
    color: #fff;
}
.bc-cat.is-active .bc-cat-ico .bi { color: #fff; }
.bc-cat-ico .bi { font-size: 1.286rem; color: var(--bc-text-dim); }
.bc-cat:hover .bc-cat-ico { border-color: var(--bc-blue); }

.bc-cat-label {
    font-size: 0.821rem;         /* 11.5px */
    font-weight: 700;
    color: var(--bc-text-dim);
}
.bc-cat.is-active .bc-cat-label { color: var(--bc-blue); }

.bc-cat-badge {
    position: absolute;
    top: -0.143rem;
    right: -0.143rem;
    min-width: 1.143rem;
    height: 1.143rem;
    padding: 0 0.286rem;
    border-radius: 999px;
    background: var(--bc-red);
    border: 2px solid #fff;
    color: #fff;
    font-size: 0.643rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ===================== 6·7. 경기 일정 카드 ===================== */
.bc-sched-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.857rem 1.143rem;
    border-bottom: 1px solid var(--bc-border);
}
.bc-sched-head-title { font-size: 0.84375rem; font-weight: 800; color: var(--bc-text); }   /* 13.5px (경기 일정 소제목과 동일) */
.bc-sched-head-title--wait { color: #666C77; }   /* 진행예정 제목은 회색(Figma) */
#bcLiveCount { color: var(--bc-red); }   /* 진행중 N — 숫자만 빨간색 */
.bc-sched-head-tail { margin-left: auto; font-size: 0.786rem; color: var(--bc-text-mute); }

.bc-dot {
    width: 0.571rem; height: 0.571rem;    /* 8px */
    border-radius: 50%;
    flex: none;
}
.bc-dot--live { background: var(--bc-red); }
.bc-dot--wait { background: #C4C4C4; }   /* 진행예정 헤더 회색 dot (Figma) */

/* 가로 스크롤 래퍼 (모바일 폴백) */
.bc-table-scroll { overflow-x: auto; }

/* grid 기반 테이블 — 컬럼: 즐겨찾기 종목 시간 상태 리그 경기명 분할 중계 */
.bc-sched-table { min-width: 52rem; }
.bc-sched-row {
    display: grid;
    grid-template-columns: 2.2rem 3.4rem 4rem 5rem 8rem minmax(15rem, 1fr) 11rem 4.6rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.143rem;
    min-height: 4.214rem;        /* ~59px */
    border-bottom: 1px solid var(--bc-row-line);
}
.bc-sched-row:last-child { border-bottom: 0; }

.bc-sched-row--head {
    min-height: 2.857rem;
    background: rgba(232, 235, 240, 0.4);
}
.bc-sched-row--head > span {
    font-size: 0.786rem;         /* 11px */
    font-weight: 700;
    color: var(--bc-text-mute);
}

/* 컬럼 정렬 */
.bc-c-fav, .bc-c-sport, .bc-c-time, .bc-c-state, .bc-c-split, .bc-c-watch { text-align: center; }
.bc-c-fav { display: flex; justify-content: center; }
.bc-c-fav .bi { font-size: 1.071rem; color: var(--bc-text-mute); cursor: pointer; }

/* 관심 경기 별 (2026-09-18 배선) — 담기는 것은 **방송이 아니라 연결된 경기**다.
   ⚠⚠ 색·전이는 스포츠정보(`info.css:284-286` 의 `.si-match-star`)와 **같은 값**이어야 한다 —
     같은 즐겨찾기가 화면마다 다르게 반응하면 회원이 다른 기능으로 읽는다.
     기본 `#CBD2DC` 는 이 화면의 `--bc-text-mute` 가 대신하고, hover `#FFA64D` · 켜짐 `#FFA600` 은 그대로 가져온다.
   ⚠⚠ hover 는 **`[data-fav]`(담을 수 있는 별)에만** 준다 — 미연계 별에 반응을 주면
     `cursor:default` 로 막아 둔 것이 무의미해지고 **누를 수 있는 것처럼 보인다.** */
.bc-c-fav[data-fav] .bi { transition: color .12s ease; }
.bc-c-fav[data-fav]:hover .bi { color: #FFA64D; }
.bc-c-fav.is-on .bi, .bc-c-fav.is-on:hover .bi { color: #FFA600; }

/* 담을 키가 없는 방송 — **방송코드가 비어 있을 때만** 나온다(피드 이상).

   ⚠⚠ **'경기 미연계' 는 더 이상 이 상태가 아니다 (2026-09-28 정책 변경).** 중계 즐겨찾기가
     경기가 아니라 **방송 자체**를 담게 되어, 연계가 없어도 별이 정상 동작한다. 그 시절에는
     실측 182건 중 171건이 이 비활성이었다 — 조건을 `HasMatch` 로 되돌리지 말 것.
   ⚠⚠ `cursor: default` 가 **필수**다: 위 규칙이 전 별에 `pointer` 를 주고 있어,
      그대로 두면 **누를 수 있어 보이는데 아무 일도 안 나는** 상태가 된다(배선 전 상태 그대로다). */
.bc-c-fav--nomatch .bi { cursor: default; opacity: 0.35; }

.bc-c-sport { display: flex; justify-content: center; }
.bc-sport-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 1.4375rem;              /* 23px (Figma) */
    padding: 0 0.5938rem;           /* 좌우 9.5px (세로는 height로 고정) */
    border-radius: 0.755rem;        /* 라운드 */
    border: 1px solid var(--bc-blue);
    background: var(--bc-soft-blue);
    color: var(--bc-blue);
    font-size: 0.625rem;            /* 10px */
    font-weight: 700;
    line-height: 1;
}

.bc-c-time { font-size: 0.78125rem; font-weight: 500; color: var(--bc-text); }   /* 12.5px */

.bc-c-state { display: flex; justify-content: center; }
.bc-state {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    font-size: 0.75rem;          /* 12px */
    font-weight: 800;
}
.bc-state--live { color: var(--bc-red); }
.bc-state--wait { color: var(--bc-text-dim); font-weight: 500; }

.bc-c-league {
    font-size: 0.75rem;          /* 12px */
    font-weight: 600;
    color: var(--bc-text-dim);
    text-align: center;
}

/* 경기명 영역 */
.bc-c-match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.357rem;
    min-width: 0;
}
.bc-m-logo {
    width: 1.286rem; height: 1.286rem;
    border-radius: 50%;
    background: var(--bc-soft);
    border: 1px solid var(--bc-border);
    flex: none;
    overflow: hidden;
}
.bc-m-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; display: block; }
/* 피드가 `title_bold='Y'` 로 표시한 주요 경기의 팀명 — 기본 700 위에서 800 으로만 올린다.
   ⚠ `N` 을 400 으로 내리지 않는다(실측 139건 중 45건이 `N` — 그 경기들이 기존보다 얇아진다).
   ⚠ **팀명만 적용한다** — `vs`·점수(`.bc-m-score`)는 기본색을 지켜야 진행중 점수가 묻히지 않는다.
   ⚠ 색은 인라인 style 로 온다(피드 값이라 CSS 에 고정할 수 없다) — 뷰에서 hex 검증된 값만 들어간다
     (`LivenTvItem.TitleColorCss` — 외부 문자열을 그대로 넣으면 CSS 주입이다). */
.bc-m-name.is-bold, .bcfs-game-team.is-bold { font-weight: 800; }

.bc-m-name {
    font-size: 0.84375rem;       /* 13.5px */
    font-weight: 700;
    color: var(--bc-text);
    max-width: 12rem;
}
.bc-m-score {
    margin: 0 0.286rem;
    font-size: 1.0625rem;        /* 17px */
    font-weight: 800;
    color: var(--bc-text);
    white-space: nowrap;
    flex: none;
}
/* 홈/원정 그룹 — 점수를 항상 가운데로 두고 팀명과 정렬(스코어보드형) */
.bc-m-home, .bc-m-away { display: flex; align-items: center; gap: 0.357rem; min-width: 0; flex: 1 1 0; }
.bc-m-home { justify-content: flex-end; }    /* 홈: 점수 쪽(오른쪽)으로 정렬 */
.bc-m-away { justify-content: flex-start; }  /* 원정: 점수 쪽(왼쪽)으로 정렬 */

/* 분할 칩 */
.bc-c-split { display: flex; justify-content: center; gap: 0.286rem; flex-wrap: wrap; }
.bc-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.375rem;   /* 3px 6px (Figma) */
    border-radius: 0.25rem;        /* 4px (Figma) */
    border: 1px solid var(--bc-border);
    background: #fff;
    color: var(--bc-text-mute);
    font-size: 0.65625rem;         /* 10.5px */
    font-weight: 700;
    cursor: pointer !important;
}
.bc-chip.is-active {
    background: var(--bc-blue);
    border-color: var(--bc-blue);
    color: #fff;
}

/* 중계 버튼 */
.bc-c-watch { display: flex; justify-content: center; }
.bc-watch-btn {
    min-width: 3.3125rem;        /* 53px (Figma) */
    height: 1.875rem;            /* 30px */
    padding: 0 0.875rem;         /* 좌우 14px */
    border-radius: var(--radius-md);   /* 8px */
    background: var(--bc-blue);
    border: 1px solid var(--bc-blue);
    color: #fff;
    font-size: 0.78125rem;       /* 12.5px */
    font-weight: 700;
    transition: background-color .12s;
}
.bc-watch-btn:hover { background: #1147b8; }
/* '중단' 상태도 시청 버튼과 동일 색(파랑) — 라벨만 바뀜 */

/* 정보보기 버튼 (진행예정 전용, 2026-09-21) — 영상 없이 결장정보·숏팁만 여는 **보조 동작**이라
   시청(파랑 채움)과 위계를 나눈다(흰 배경 + 파란 테두리).
   ⚠⚠ 높이·radius 는 `.bc-watch-btn` 과 **같은 값**이어야 두 표(진행중/진행예정)의 행 높이가 갈리지 않는다.
   ⚠⚠ 칸이 `4.6rem` 뿐이라 패딩·글자를 줄였다 — '정보보기' 4글자가 줄바꿈되면 그 행만 높아진다
     (`white-space: nowrap` 이 그 최후 방어다). 라벨을 늘리려면 grid 마지막 트랙부터 넓힌다. */
.bc-info-btn {
    min-width: 3.3125rem;        /* 시청 버튼과 동일 */
    height: 1.875rem;            /* 30px — 시청 버튼과 동일 */
    padding: 0 0.5rem;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--bc-blue);
    color: var(--bc-blue);
    font-size: 0.75rem;          /* 12px */
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .12s, color .12s;
}
.bc-info-btn:hover { background: var(--bc-soft-blue); }

/* 경기와 연계되지 않은 방송 — 보여 줄 결장정보가 없다.
   ⚠ 별(`.bc-c-fav--nomatch`)과 **같은 판단**이다: 숨기지 않고 못 누르게 둔다
     (없애면 기능이 사라진 것처럼 보이고, 매칭률은 관리자가 별칭을 채우면 오르는 일시적 상태다). */
.bc-info-btn--off {
    border-color: var(--bc-border);
    color: var(--bc-text-mute);
    cursor: default;
}
.bc-info-btn--off:hover { background: #fff; }


/* ── 진행예정 '정보보기' 인라인 패널 — 해당 행 **바로 아래** (2026-09-29 지시) ──────────
   지시: *"방송예정은 하단에 있기에 상단으로 올라가기가 불편하다. 정보보기 클릭 시 해당 경기
          바로 아래에 영역을 만들어 결장정보·숏팁을 보여주도록 처리해줘."*

   ⚠⚠ 이 패널은 `.bc-sched-table` 의 **형제 블록**이지 `.bc-sched-row` 가 아니다 —
     행은 `display: grid` 에 컬럼이 8개로 고정돼 있어, 행 안에 넣으면 **컬럼 하나로 빨려 들어간다.**
   ⚠ 행 개수를 세는 `bcVisibleCount` 는 `.bc-sched-row` 만 세므로 이 패널이 진행중/예정 카운트를
     흔들지 않는다(클래스를 `bc-sched-row` 로 바꾸면 그 카운트가 틀어진다).
   ⚠ 데스크톱에서는 `.bc-sched-table { min-width: 52rem }` 안이라 가로 스크롤을 표와 함께 탄다. */
.bc-inline-info {
    /* ⚠⚠ **flex 열 + gap 이어야 한다 — 그냥 block 으로 두지 말 것.**
       주입되는 부분뷰는 `<h3 class="bc-section-title">` + `<div class="bc-abs-grid">` 인데
       `.bc-section-title` 은 `margin: 0` 이라 **자기 여백이 없다** — 상단 영역에서는 `.bc` 의
       `gap: 1rem` 이 그 간격을 만들어 준다(`#bcMatchInfo`·`#bcAbsence` 가 `display: contents` 라
       제목·카드가 `.bc` 의 직접 아이템이 된다). 이 패널은 그 바깥이라 gap 을 **직접** 줘야 하고,
       안 주면 제목이 결장정보 카드에 붙는다(2026-09-29 지적).
       ⚠ 값은 `.bc` 와 **같은 1rem** 이다 — 같은 내용이 두 자리에서 다른 간격으로 보이지 않게 맞춘다. */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.857rem 1rem 1.143rem;
    border-bottom: 1px solid var(--bc-border);
    background: var(--bc-soft-blue);
}
/* 패널 배경이 옅은 파랑이라 안내 카드는 흰 바탕으로 띄워 구분한다 */
.bc-inline-info .bc-abs-none { background: #fff; }

.bc-inline-loading {
    margin: 0;
    padding: 0.857rem;
    color: var(--bc-text-mute);
    font-size: 0.857rem;
    text-align: center;
}

/* 열려 있는 정보보기 버튼 — 라벨이 '닫기' 로 바뀌므로 상태가 눈에도 보이게 채운다.
   ⚠ '닫기'(2자)는 '정보보기'(4자)보다 짧아 `min-width: 3.3125rem` 안에 들어간다 —
     라벨을 더 긴 말로 바꾸면 그 행만 높아진다(위 `.bc-info-btn` 주석의 함정). */
.bc-info-btn.is-open {
    background: var(--bc-blue);
    border-color: var(--bc-blue);
    color: #fff;
}
.bc-info-btn.is-open:hover { background: var(--bc-blue); }

/* '이 경기의 결장정보가 없습니다' — **정보보기로 누른 경우에만** 나온다(2026-09-22).
   ⚠ 시청(ch1)으로 열렸을 때는 영역을 조용히 닫는다 — 영상이 주목적이라 안내가 방해가 된다.
     반대로 정보보기는 회원이 그 정보를 보려고 직접 누른 것이라 **반응이 없으면 고장으로 읽힌다.**
   ⚠ 2026-09-29 부터 이 안내가 뜨는 자리는 **상단이 아니라 인라인 패널**이다(`.bc-inline-info`). */
.bc-abs-none {
    margin: 0;
    padding: 1.143rem;
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-radius);
    background: #fff;
    color: var(--bc-text-dim);
    font-size: 0.929rem;
    text-align: center;
}

/* 진행 예정: 분할칩은 자리만 유지(투명).
   ⚠⚠ **`.bc-c-watch` 에는 더 이상 걸지 않는다 (2026-09-21)** — 그 칸이 정보보기 버튼 자리가 됐고,
     셀에 이 클래스를 되돌리면 `pointer-events:none` 으로 **버튼이 통째로 죽는다.** */
.bc-is-pending { opacity: 0; pointer-events: none; }

/* ===================== 실시간 채팅 풀스크린 오버레이 ===================== */
/* 풀뷰포트 fixed — 사이드바/헤더 위를 덮는다. 기본 숨김, .is-open이면 flex. */
.bcfs {
    --bcfs-chat-w: 24.286rem;        /* 340px */

    position: fixed;
    inset: 0;
    z-index: 1900;   /* 레이아웃 사이드바(1040)·드롭다운(1600) 위, 로딩 오버레이(2000) 아래 */
    display: none;
    flex-direction: row;
    background: #000;
}
.bcfs.is-open { display: flex; }

/* ── 좌측: 플레이어 ── */
.bcfs-player {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.143rem;
    background: linear-gradient(135deg, #192036 0%, #000 100%);
    color: #fff;
    overflow: hidden;
}

/* 좌상단 LIVE 배지 */
/* 방송 영상 레이어(오버레이 플레이어) — 이동된 .bc-screens를 종횡비 유지하며 가운데 배치 */
.bcfs-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    background: #000;
    container-type: size;          /* cqw/cqh 기준 컨테이너 */
    align-items: center;
    justify-content: center;
}
.bcfs-player.is-playing .bcfs-video { display: flex; }
/* 오버레이에선 풀뷰 영역에 'contain'(너비·높이 중 작은 쪽 기준) → 분할해도 비율 유지. 종횡비는 .bc-screens(.split-*)가 지정 */
.bcfs-video > .bc-screens { position: static; inset: auto; height: auto; max-width: 100%; max-height: 100%; width: min(100cqw, calc(100cqh * 16 / 9)); }
.bcfs-video > .bc-screens.split-2 { width: min(100cqw, calc(100cqh * 32 / 9)); }
.bcfs-video > .bc-screens.split-3, .bcfs-video > .bc-screens.split-4 { width: min(100cqw, calc(100cqh * 16 / 9)); }
.bcfs-player.is-playing .bcfs-center,
.bcfs-player.is-playing .bcfs-pctrl { display: none; }   /* 재생 중엔 프로모/모의 컨트롤 숨김 */
.bcfs-live, .bcfs-viewers { z-index: 2; }                /* 배지는 영상 위에 유지 */

.bcfs-live {
    position: absolute;
    top: 1.143rem; left: 1.143rem;
    display: inline-flex;
    align-items: center;
    gap: 0.429rem;
    padding: 0.357rem 0.714rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.75rem;          /* 10.5px */
    font-weight: 800;
    letter-spacing: 0.04em;
}
.bcfs-live-dot {
    width: 0.429rem; height: 0.429rem;
    border-radius: 50%;
    background: var(--bc-red);
}

/* 우상단 시청자수 */
.bcfs-viewers {
    position: absolute;
    top: 1.143rem; right: 1.143rem;
    display: inline-flex;
    align-items: center;
    gap: 0.357rem;
    padding: 0.357rem 0.714rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 0.857rem;
    font-weight: 600;
}

/* 중앙 컨텐츠 */
.bcfs-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.857rem;               /* 26px */
    max-width: 100%;
}
.bcfs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.357rem;
    padding: 0.357rem 0.857rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.786rem;         /* 11px */
    font-weight: 700;
}
.bcfs-title {
    margin: 0;
    font-size: 2.143rem;         /* 30px */
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.025em;    /* 시안 -0.75px */
}
.bcfs-title-em { color: #7FB0FF; }
.bcfs-sub {
    margin: -1rem 0 0;
    font-size: 0.929rem;         /* 13px */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}

.bcfs-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.bcfs-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;         /* 카드 내용 가운데 정렬(시안) */
    gap: 0.357rem;
    width: 19.643rem;            /* ~275px */
    max-width: 100%;
    padding: 1rem 1.143rem;
    border-radius: var(--bc-radius);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    text-align: center;
}
.bcfs-info-title { font-size: 0.893rem; font-weight: 700; color: #fff; }   /* 12.5px */
.bcfs-info-sub { font-size: 0.75rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); }

.bcfs-find-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.714rem 1.286rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--bc-blue);
    font-size: 0.929rem;
    font-weight: 700;
    transition: background-color .12s;
}
.bcfs-find-btn:hover { background: #fff; }

.bcfs-hint {
    margin: 0;
    font-size: 0.821rem;         /* 11.5px */
    color: rgba(255, 255, 255, 0.45);
}

/* 하단 플레이어 컨트롤 바 */
.bcfs-pctrl {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1rem 1.429rem 1.143rem;
}
.bcfs-pctrl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.857rem;
    margin-bottom: 0.643rem;
}
.bcfs-pctrl-left, .bcfs-pctrl-right {
    display: inline-flex;
    align-items: center;
    gap: 0.643rem;
}
.bcfs-pbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff;
    font-size: 1.286rem;
    line-height: 1;
}
.bcfs-pbtn:hover { color: rgba(255, 255, 255, 0.8); }
.bcfs-time { font-size: 0.929rem; font-weight: 700; color: #fff; }
.bcfs-vol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.286rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 1rem;
}
.bcfs-ch {
    display: inline-flex;
    align-items: center;
    padding: 0.357rem 0.714rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 0.821rem;
    font-weight: 700;
}
.bcfs-progress {
    height: 0.429rem;            /* 6px */
    border-radius: 8px;
    background: #717171;
    overflow: hidden;
}
.bcfs-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 8px;
    background: var(--bc-blue);
}

/* ── 우측: 채팅 패널 ── */
.bcfs-chat {
    flex: none;
    width: var(--bcfs-chat-w);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border-left: 1px solid var(--bc-border);
}

/* 탭 헤더 */
.bcfs-tabs {
    display: flex;
    align-items: stretch;
    height: 3.143rem;            /* ~44px */
    border-bottom: 1px solid var(--bc-border);
    flex: none;
}
.bcfs-tab {
    position: relative;
    flex: 1 1 0;                 /* 3개 탭 균등 너비(시안) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.286rem;
    padding: 0 0.857rem;
    background: transparent;
    color: var(--bc-text-dim);
    font-size: 0.893rem;
    font-weight: 700;
}
.bcfs-tab.is-active { color: var(--bc-blue); }
/* 활성 밑줄 — 텍스트 아래 양옆 여백 둔 둥근 바(시안 Horizontal Divider) */
.bcfs-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0.571rem; right: 0.571rem; bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--bc-blue);
}
.bcfs-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.143rem;
    height: 1.143rem;
    padding: 0 0.286rem;
    border-radius: 999px;
    background: var(--bc-red);
    color: #fff;
    font-size: 0.643rem;
    font-weight: 800;
    line-height: 1;
}
.bcfs-tab-dot { color: var(--bc-red); font-size: 0.5rem; }
.bcfs-close {
    margin-left: auto;
    flex: none;
    width: 3.143rem;
    border-left: 1px solid var(--bc-border);
    background: transparent;
    color: var(--bc-text-mute);
    font-size: 1.571rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bcfs-close:hover { color: var(--bc-text); background: var(--bc-row-line); }

/* 탭 패널 — 활성만 세로 flex로 영역 채움, 나머지 숨김 */
.bcfs-panel {
    display: none;
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
}
.bcfs-panel.is-active { display: flex; }

/* 서브 헤더 */
.bcfs-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.714rem 1rem;
    border-bottom: 1px solid var(--bc-border);
    flex: none;
}
.bcfs-brand { font-size: 0.929rem; font-weight: 800; color: var(--bc-text); }
.bcfs-online {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    font-size: 0.857rem;
    font-weight: 700;
    color: var(--bc-text-dim);
}

/* 메시지 스크롤 영역 */
.bcfs-msgs {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 0.857rem 1rem;
}

.bcfs-msg-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.357rem;
}

/* 입력 바 */
.bcfs-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.714rem 1rem;
    border-top: 1px solid var(--bc-border);
    flex: none;
}
.bcfs-input-field {
    flex: 1 1 0;
    min-width: 0;
    height: 2.429rem;
    padding: 0 0.857rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bc-border);
    background: rgba(241, 243, 247, 0.4);
    font-size: 0.893rem;
    color: var(--bc-text);
}
.bcfs-input-field::placeholder { color: rgba(152, 160, 174, 0.5); }
.bcfs-send {
    flex: none;
    height: 2.429rem;
    padding: 0 1rem;
    border-radius: var(--radius-sm);
    background: #F1F3F7;
    color: var(--bc-text-mute);
    font-size: 0.857rem;
    font-weight: 700;
    transition: background .12s, color .12s;
}
/* 입력란에 글자가 있으면 전송 버튼 파랑, 비면 위 기본 스타일 */
.bcfs-send.has-text { background: var(--bc-blue); color: #fff; }
.bcfs-send.has-text:hover { background: #1147b8; }

/* ===================== 경기 탭 패널 ===================== */
/* 스크롤 리스트 (서브헤더·입력바 없음) */
.bcfs-games {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 0.857rem 1rem 1.143rem;
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
}

/* 섹션 헤더 */
.bcfs-games-head {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    font-size: 0.857rem;         /* 12px */
    font-weight: 800;
    color: var(--bc-text);
}
.bcfs-games-head--soon { color: var(--bc-text-dim); }
.bcfs-games-head:not(:first-child) { margin-top: 0.643rem; }
.bcfs-games-dot {
    width: 0.571rem; height: 0.571rem;   /* 8px */
    border-radius: 50%;
    background: var(--bc-red);
    flex: none;
}
.bcfs-games-count { color: var(--bc-red); }
.bcfs-games-count--soon { color: var(--bc-text-dim); }

/* 경기 카드 */
.bcfs-game {
    display: flex;
    flex-direction: column;
    gap: 0.286rem;               /* 4px */
    width: 100%;
    padding: 0.536rem 0.679rem;  /* 7.5px 9.5px */
    border-radius: 0.571rem;     /* 8px */
    border: 1px solid var(--bc-border);
    background: #fff;
}
/* 현재 방송중(활성) 카드 강조 */
.bcfs-game.is-active {
    border-color: var(--bc-blue);
    background: rgba(238, 243, 255, 0.5);
}

/* 행1: 메타 */
.bcfs-game-meta {
    display: flex;
    align-items: center;
    gap: 0.357rem;
    min-width: 0;
}
.bcfs-game-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.286rem; height: 1.286rem;   /* 18px */
    border-radius: 50%;
    color: #fff;
    font-size: 0.643rem;
    font-weight: 800;
    line-height: 1;
    flex: none;
}
/* 종목 이모지 badge — 실데이터(경기일정 연동). 이모지는 자체 색이라 옅은 중립 배경 */
.bcfs-game-badge--sport {
    background: #EEF2F7;
    font-size: 0.786rem;   /* 11px — 이모지 */
}
/* 경기 패널 빈 상태(진행중/예정 0건) */
.bcfs-game-empty {
    padding: 1rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: inherit;
    opacity: 0.6;
}
.bcfs-game-league {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.786rem;         /* 11px */
    font-weight: 600;
    color: var(--bc-text-mute);
}
/* 우측 끝: LIVE 배지 */
.bcfs-game-live {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.214rem;
    padding: 0.143rem 0.429rem;
    border-radius: 0.286rem;     /* 4px 둥근 사각(시안) */
    background: rgba(225, 29, 42, 0.1);
    color: var(--bc-red);
    font-size: 0.643rem;         /* 9px */
    font-weight: 800;
    letter-spacing: 0.02em;
}
.bcfs-game-live-dot {
    width: 0.286rem; height: 0.286rem;   /* 4px */
    border-radius: 50%;
    background: var(--bc-red);
}
/* 우측 끝: 예정 시간 */
.bcfs-game-time {
    flex: none;
    font-size: 0.75rem;          /* 10.5px */
    font-weight: 700;
    color: var(--bc-text-mute);
}

/* 행2: 경기명 */
.bcfs-game-name {
    display: flex;
    align-items: center;
    gap: 0.357rem;
    min-width: 0;
}
.bcfs-game-team {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.893rem;         /* 12.5px */
    font-weight: 700;
    color: var(--bc-text);
}
.bcfs-game-vs {
    flex: none;
    font-size: 0.786rem;
    font-weight: 700;
    color: var(--bc-text-mute);
}

/* 행3: 액션 (와이드 버튼 + 칩 3개) */
.bcfs-game-act {
    display: flex;
    align-items: center;
    gap: 0.357rem;
    margin-top: 0.143rem;
}
.bcfs-game-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 1.857rem;            /* 26px */
    border-radius: var(--radius-sm);
    font-size: 0.821rem;         /* 11.5px */
    font-weight: 700;
}
.bcfs-game-btn--live {
    background: var(--bc-blue);
    border: 1px solid var(--bc-blue);
    color: #fff;
}
.bcfs-game-btn--live:hover { background: #1147b8; }
/* 방송중(슬롯 소유) = 활성 — 방송시청(슬롯1) 버튼: 진한 파랑 + 내부 링 */
.bcfs-game-btn--live.is-active { background: var(--bc-blue-deep); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
/* 방송중(슬롯 소유) = 활성 — 칩(슬롯2~4): 파랑 채움(메인 .bc-chip.is-active와 동일) */
.bcfs-game-chip.is-active { background: var(--bc-blue); border-color: var(--bc-blue); color: #fff; }
.bcfs-game-btn--soon {
    background: #F1F3F7;
    border: 1px solid #F1F3F7;
    color: var(--bc-text-mute);
    cursor: default;
}
.bcfs-game-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.571rem; height: 1.857rem;   /* 22×26 */
    border-radius: var(--radius-sm);
    border: 1px solid var(--bc-border);
    background: #fff;
    color: var(--bc-text-mute);
    font-size: 0.75rem;          /* 10.5px */
    font-weight: 700;
    cursor: pointer;
}

/* ===================== 픽스터 탭 패널 ===================== */
/* 랭킹 카드 세로 리스트 (스크롤) */
.bcfs-pk-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.714rem;               /* 10px */
    padding: 0.857rem 0.929rem;  /* 12px 13px */
}
/* 픽스터 없음 빈 상태 */
.bcfs-pk-empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: inherit;
    opacity: 0.6;
}
/* 카드는 픽스터 리스트로 이동하는 링크 — 앵커 기본 스타일 제거 */
a.bcfs-pk-card { text-decoration: none; color: inherit; cursor: pointer; }

/* 랭킹 카드 */
.bcfs-pk-card {
    display: flex;
    align-items: center;
    gap: 0.857rem;               /* 12px */
    width: 100%;
    padding: 0.821rem 0.964rem;  /* 11.5px 13.5px */
    border-radius: 0.857rem;     /* 12px */
    border: 1px solid var(--bc-border);
    background: #fff;
}

/* 좌측 순번 */
.bcfs-pk-rank {
    flex: none;
    width: 1.429rem;             /* 20px */
    text-align: center;
    font-size: 0.929rem;         /* 13px */
    font-weight: 800;
    color: var(--bc-text-mute);
}

/* 중앙 정보 */
.bcfs-pk-info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.143rem;               /* 2px */
}
.bcfs-pk-name-row {
    display: flex;
    align-items: center;
    gap: 0.429rem;               /* 6px */
    min-width: 0;
}
.bcfs-pk-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 1.036rem;         /* 14.5px */
    font-weight: 800;
    color: var(--bc-text);
}
.bcfs-pk-reco {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.286rem;            /* 18px 고정(시안) */
    padding: 0 0.429rem;         /* 좌우 6px */
    border-radius: 0.286rem;     /* 4px */
    background: var(--bc-blue);
    color: #fff;
    font-size: 0.679rem;         /* 9.5px */
    font-weight: 800;
    line-height: 1;
}

/* 통계 라인 */
.bcfs-pk-stats {
    display: flex;
    align-items: center;
    gap: 0.571rem;               /* 8px */
    font-size: 0.857rem;         /* 12px */
    font-weight: 400;
    color: var(--bc-text-mute);
}
.bcfs-pk-sep { color: var(--bc-border); }
.bcfs-pk-streak {
    font-weight: 700;
    color: var(--bc-blue);
}
.bcfs-pk-streak--lose { color: var(--bc-red); }

/* 우측 적중률 */
.bcfs-pk-rate {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.bcfs-pk-rate-label {
    font-size: 0.75rem;          /* 10.5px */
    font-weight: 600;
    color: var(--bc-text-mute);
}
.bcfs-pk-rate-val {
    font-size: 1.286rem;         /* 18px */
    font-weight: 800;
    color: var(--bc-blue);
}

/* ===================== 4-1. 이 경기 결장정보 ===================== */
/* 시안(04-01.스포츠중계 A): 좌우 2카드. 카드 안은 팀 헤더 + 결장 선수 행 목록. */

/* ch1에 방송이 있을 때만 노출되는 묶음(결장정보 + 숏팁).
   display:contents 로 두어 내부 h3/카드가 .bc의 flex gap을 그대로 받게 한다.
   ⚠ [hidden] 짝을 반드시 함께 선언 — author display 가 UA의 [hidden]{display:none} 을 이겨서
     이게 없으면 hidden 을 걸어도 계속 보인다. */
#bcMatchInfo { display: contents; }
#bcMatchInfo[hidden] { display: none; }

/* 결장정보 주입 컨테이너도 contents — 안 그러면 이 div가 하나의 flex 아이템이 되어
   내부 제목(h3)과 카드 사이에 .bc 의 flex gap 이 적용되지 않는다(= 제목이 카드에 붙어버림).
   contents 로 두면 제목·카드가 .bc 의 직접 아이템이 되어 숏팁 섹션과 간격이 같아진다. */
#bcAbsence { display: contents; }

/* 더보기로 아직 펼치지 않은 결장 행 */
.bc-abs-item.is-hidden { display: none; }
/* 같은 이유로 버튼도 [hidden] 짝 필요(.bc-abs-more 는 inline-flex) */
.bc-abs-more[hidden] { display: none; }
.bc-abs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0,1fr) — 긴 팀명이 칸을 밀어내지 않게 */
    gap: 1.071rem;               /* 15px */
    /* ⚠ start 필수 — 기본값(stretch)이면 한쪽 카드에서 '더보기'로 목록을 펼쳤을 때
       같은 행의 반대편 카드까지 같은 높이로 늘어난다. 카드마다 제 내용만큼만 차지하게 한다. */
    align-items: start;
}
.bc-abs-card {
    display: flex;
    flex-direction: column;
    gap: 1.143rem;               /* 16px */
    min-width: 0;
    padding: 0.643rem 0.857rem;  /* 9px 12px */
    background: #fff;
    border-radius: 0.571rem;     /* 8px */
}
.bc-abs-head {
    display: flex;
    align-items: center;
    gap: 0.429rem;               /* 6px */
    min-width: 0;
}
/* 홈/원정 구분 — 좌=홈, 우=원정이 한눈에 보이게 */
.bc-abs-side {
    flex: none;
    padding: 0 0.286rem;
    background: var(--bc-soft-blue);
    border-radius: 0.286rem;
    font-size: 0.714rem;         /* 10px */
    font-weight: 800;
    line-height: 1.143rem;
    color: var(--bc-blue);
}
.bc-abs-team {
    font-size: 0.893rem;         /* 12.5px */
    font-weight: 800;
    color: var(--bc-text);
    min-width: 0;
}
/* 결장자 0명인 팀 카드 */
.bc-abs-empty {
    margin: 0;
    padding: 0.857rem 0;
    text-align: center;
    font-size: 0.821rem;         /* 11.5px */
    color: var(--bc-text-mute);
}
.bc-abs-count {
    flex: none;
    padding: 0 0.429rem;         /* 0 6px */
    background: var(--bc-row-line);
    border-radius: 0.286rem;     /* 4px */
    font-size: 0.75rem;          /* 10.5px */
    font-weight: 700;
    line-height: 1.143rem;       /* 16px */
    color: var(--bc-text-mute);
}
/* 더보기(button) — 헤더 우측 끝으로. margin-left:auto 라 팀명 길이와 무관하게 고정 위치 */
.bc-abs-more {
    display: inline-flex;
    align-items: center;
    gap: 0.143rem;               /* 2px */
    margin-left: auto;
    flex: none;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 0.643rem;         /* 9px */
    font-weight: 700;
    color: var(--bc-blue);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.bc-abs-more .bi { font-size: 0.786rem; }   /* 11px */
.bc-abs-more:hover { text-decoration: underline; }

.bc-abs-list {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;               /* 8px */
    margin: 0;
    padding: 0;
    list-style: none;
}
.bc-abs-item {
    display: flex;
    align-items: center;
    gap: 0.571rem;               /* 8px */
    min-width: 0;
    padding: 0.536rem 0.679rem;  /* 7.5px 9.5px */
    background: #F7F8F8;
    border: 1px solid var(--bc-row-line);
    border-radius: 0.571rem;     /* 8px */
}
/* 포지션 배지 */
.bc-abs-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.857rem;             /* 26px */
    min-height: 1.714rem;        /* 24px */
    background: rgba(241, 243, 247, 0.7);
    border-radius: 0.286rem;
    font-size: 0.714rem;         /* 10px */
    font-weight: 800;
    color: var(--bc-text-dim);
}
/* 선수명 + 사유 (남는 폭 전부, 말줄임) */
.bc-abs-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.bc-abs-name {
    font-size: 0.893rem;         /* 12.5px */
    font-weight: 700;
    line-height: 1.286rem;
    color: var(--bc-text);
}
.bc-abs-desc {
    font-size: 0.786rem;         /* 11px */
    line-height: 1.143rem;
    color: var(--bc-text-mute);
}
/* 핵심 배지 */
.bc-abs-key {
    flex: none;
    padding: 0 0.286rem;
    background: var(--bc-soft-blue);
    border-radius: 0.286rem;
    font-size: 0.714rem;         /* 10px */
    font-weight: 800;
    line-height: 1.036rem;       /* 14.5px */
    color: var(--bc-blue);
}
/* 영향도/출전 상태 배지 — 기본 회색.
   ⚠ 색 규칙은 스포츠정보 상세(info.css .si-uc-impact)와 **동일하게 유지**한다.
     같은 '영향 매우높음'이 화면마다 다른 색이면 사용자가 다른 의미로 읽는다.
     회색값(#F1F3F7 / #5B6473)은 .si-uc-impact--mid 와 같은 값이라 토큰으로 그대로 쓴다. */
.bc-abs-status {
    flex: none;
    padding: 0.143rem 0.429rem;  /* 2px 6px */
    background: var(--bc-row-line);
    border-radius: 0.286rem;
    font-size: 0.75rem;          /* 10.5px */
    font-weight: 700;
    color: var(--bc-text-dim);
    white-space: nowrap;
}
/* 영향 매우높음(critical) · 높음(high) — .si-uc-impact 와 같은 빨강 */
.bc-abs-status--high {
    background: rgba(225, 29, 42, 0.1);
    color: var(--bc-red);        /* #E11D2A */
    font-weight: 800;
}

/* ===================== 4-2. 숏팁 ===================== */
/* 숏팁 자리표시 — 데이터가 없을 때(현재 항상)만 나온다 (2026-09-29).
   ⚠⚠ **여기에 예시 문장을 넣지 말 것** — 2026-09-22 에 정적 더미를 내린 이유가 그대로 유효하다
     (어느 경기든 같은 문장이 떠서 회원에게 그 경기의 실제 정보로 읽혔다).
   ⚠ `.bc-abs-none`(결장정보 없음)과 규격을 맞추되 더 낮은 위계로 둔다 — 그쪽은 회원이 정보보기를
     눌러 얻은 '답' 이고, 이쪽은 아직 기능이 없다는 '예고' 다. */
.bc-tip-empty {
    margin: 0;
    padding: 1.143rem;
    border: 1px dashed var(--bc-border);
    border-radius: var(--bc-radius);
    background: #fff;
    color: var(--bc-text-mute);
    font-size: 0.857rem;
    text-align: center;
}

.bc-tip { overflow: hidden; }    /* 헤더 배경이 카드 라운드를 넘지 않게 */
.bc-tip-head {
    display: flex;
    align-items: center;
    gap: 0.571rem;               /* 8px */
    padding: 0.571rem 1rem;      /* 8px 14px */
    background: #F5F8FF;
    border-bottom: 1px solid var(--bc-border);
}
.bc-tip-league {
    font-size: 0.964rem;         /* 13.5px */
    font-weight: 900;
    color: var(--bc-blue);
}
.bc-tip-tag {
    padding: 0.143rem 0.429rem;  /* 2px 6px */
    border-radius: 0.286rem;
    font-size: 0.714rem;         /* 10px */
    font-weight: 700;
    color: rgba(26, 86, 219, 0.8);
}
.bc-tip-body { padding: 0.857rem 1rem; }   /* 12px 14px */
.bc-tip-teams {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    min-width: 0;
}
.bc-tip-team {
    display: inline-flex;
    align-items: center;
    gap: 0.571rem;
    min-width: 0;
}
.bc-tip-logo {
    display: inline-flex;
    flex: none;
    width: 1.071rem;             /* 15px */
    height: 1.071rem;
    background: #F3F4F6;
    border-radius: 0.214rem;
    overflow: hidden;
}
.bc-tip-logo img { width: 100%; height: 100%; object-fit: contain; }
.bc-tip-name {
    font-size: 1rem;             /* 14px */
    font-weight: 600;
    color: var(--bc-text);
    min-width: 0;
}
.bc-tip-vs {
    flex: none;
    font-size: 0.857rem;         /* 12px */
    font-weight: 700;
    color: var(--bc-blue);
}
/* 날짜 — 우측 끝 고정 */
.bc-tip-date {
    margin-left: auto;
    flex: none;
    font-size: 0.893rem;         /* 12.5px */
    font-weight: 500;
    color: var(--bc-text-mute);
    white-space: nowrap;
}
.bc-tip-text {
    margin: 0.857rem 0 0;        /* 12px */
    padding: 0.571rem 0.857rem 0;/* 8px 12px, 위 구분선과 간격 */
    border-top: 1px solid var(--bc-border);
    font-size: 1.036rem;         /* 14.5px */
    font-weight: 500;
    line-height: 1.45;
    color: #4B4F55;
    word-break: break-word;
}

/* ===================== 모바일 (≤767.98px) ===================== */
@media (max-width: 767.98px) {
    .bc-tab { min-width: 0; flex: 1 1 0; }

    /* 결장정보 — 좌우 2카드를 세로 1열로 (가로 스크롤·눌림 방지) */
    .bc-abs-grid { grid-template-columns: 1fr; gap: 0.714rem; }
    /* 배지 2개(핵심·출전상태)까지 한 줄에 넣으면 선수명이 뭉개진다 → 줄바꿈 허용하고
       정보 블록이 한 줄을 다 차지하게 한다. */
    .bc-abs-item { flex-wrap: wrap; row-gap: 0.429rem; }
    .bc-abs-info { flex: 1 0 60%; }

    /* 숏팁 — 팀명 2개 + 날짜가 한 줄에 안 들어가므로 날짜를 다음 줄 우측으로 */
    .bc-tip-teams { flex-wrap: wrap; row-gap: 0.286rem; }
    .bc-tip-date { margin-left: auto; }
    .bc-tip-name { font-size: 0.929rem; }
    .bc-tip-text { font-size: 0.964rem; }

    .bc-section-title { font-size: 1.214rem; }

    .bc-player { margin: 0.857rem; }
    .bc-play { width: 3.571rem; height: 3.571rem; }
    .bc-play .bi { font-size: 1.6rem; }

    /* 컨트롤 바(기본채널·멀티 ch·실시간 채팅·새로고침)는 모바일에서 숨김 */
    .bc-controls { display: none; }

    /* 방송영역: 모바일에선 분할 없이 기본채널(1번 화면) 하나만 — split-2/3/4 클래스여도 단일 강제 */
    .bc-screens { aspect-ratio: 16 / 9 !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
    .bc-screens .bc-screen:nth-child(n+2) { display: none !important; }
    .bcfs-video > .bc-screens { width: min(100cqw, calc(100cqh * 16 / 9)) !important; }   /* 오버레이도 단일 16:9 */
    /* 전체채팅 경기리스트: 모바일은 단일 방송이라 멀티 슬롯 칩(2·3·4) 숨김 — 방송시청(ch1)만 노출 */
    .bcfs-game-chip { display: none; }

    /* 카테고리 바: 가로 스크롤 유지 */
    .bc-catbar { gap: 0.643rem; padding: 0.857rem; }

    /* ── 경기 일정: 가로 스크롤 표 → 카드형 리스트 ── */
    .bc-table-scroll { overflow-x: visible; }
    .bc-sched-table { min-width: 0; display: flex; flex-direction: column; gap: 0.571rem; padding: 0.857rem; }
    .bc-sched-row.bc-sched-row--head { display: none; }  /* 컬럼 헤더 행(종목/시간/상태…) 숨김 — .bc-sched-row보다 우선 */

    .bc-sched-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.286rem 0.5rem;
        min-height: 0;
        padding: 0.714rem 0.857rem;
        border: 1px solid var(--bc-border);
        border-radius: var(--radius-md);
    }
    /* 카드형이라 마지막 행도 하단 테두리 유지(데스크톱 표의 :last-child border-bottom:0 무효화) */
    .bc-sched-row:last-child { border-bottom: 1px solid var(--bc-border); }

    /* 정보보기 인라인 패널 — 모바일에선 `.bc-sched-table` 이 flex 열이라 이 패널도 카드가 된다.
       ⚠ 위 행(카드)과 **붙여 보이게** 음수 마진으로 gap 을 지우고 위쪽 모서리를 각지게 둔다 —
         떨어져 있으면 '어느 경기의 정보인가' 가 흐려진다(목록 하단에서 펼치는 것이 이 기능의 목적이다).
       ⚠ 데스크톱 패딩(1rem)보다 좁힌다 — 화면 폭이 좁아 그대로 두면 내용이 눌린다. */
    .bc-inline-info {
        margin-top: -0.571rem;
        padding: 0.714rem 0.857rem 0.857rem;
        border: 1px solid var(--bc-border);
        border-top: 0;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }
    .bc-c-split,
    .bc-c-state { display: none; }                      /* 분할칩·상태(진행중/예정) 숨김 */

    /* ⚠⚠ 즐겨찾기 별은 **모바일에서도 보여야 한다 — 숨기지 말 것.**
         *"어느 화면에서 별을 선택해도 양쪽에 반영"* 이 요구인데 모바일에서만 못 담으면 절반만 성립한다
         (스포츠정보는 모바일에서도 별이 보인다). 위치는 데스크톱 첫 칸과 맞춰 메타줄 맨 앞이다. */
    .bc-c-fav { order: 0; position: relative; }
    /* 터치 영역 — **아이콘은 그대로, 누를 수 있는 범위만** 넓힌다(모바일 실측 11~13px 은 손가락으로 누르기 좁다).
       ⚠⚠ **`::after` 로 넓히고 패딩·크기를 건드리지 않는다** — 실제 박스가 커지면 grid/flex 트랙이 밀려
         줄 정렬이 어긋난다. 가상요소는 레이아웃 영향이 **0** 이고, `favorite.js` 는
         `e.target.closest('[data-fav]')` 로 찾으므로 가상요소를 눌러도 부모(별)가 잡힌다.
       ⚠ 넓힌 영역이 덮는 것은 **같은 행(상세 링크)** 뿐이라 다른 버튼을 막지 않는다 —
         실측으로 확인했다(위·아래·좌·우 20px 지점에 독립 클릭 대상이 없다).
       ⚠ 36×40px 은 권장(44px)보다 작다 — 그보다 키우면 옆 칸을 눌러야 할 만큼 넓어진다.
       ⚠ 스포츠정보(`info.css` 의 `.si-match-star::after`)와 **같은 값**이다 — 한쪽을 고치면 다른 쪽도.
       ⚠ 연계되지 않은 별은 넓히지 않는다(아래) — 누를 수 없는 영역만 커지면 오조작이 된다. */
    .bc-c-fav::after {
        content: '';
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 3rem;        /* 36px (모바일 루트 12px 기준) */
        height: 3.333rem;   /* 40px */
    }
    .bc-c-fav--nomatch::after { content: none; }
    .bc-c-sport { order: 1; }
    .bc-c-time  { order: 2; }
    .bc-c-league { order: 4; text-align: left; }
    .bc-c-watch { order: 5; margin-left: auto; }        /* 메타줄 우측 끝 버튼(진행중=시청 · 진행예정=정보보기) */
    /* ⚠ 구 `.bc-c-watch.bc-is-pending`(모바일에서 회색 비활성 시청 버튼) 2개는 2026-09-21 에 제거했다 —
         진행예정 셀에서 그 클래스를 떼어 **매칭 대상이 0이 된 죽은 규칙**이었다.
         그 자리는 이제 정보보기 버튼이고, '진행예정'이라는 사실은 시간·상태 배지가 알린다.
       ⚠ 되살리려면 `_Board.cshtml` 의 진행예정 `.bc-c-watch` 에 클래스를 되돌려야 하는데,
         그러면 `pointer-events:none` 이 정보보기까지 막는다. */
    .bc-c-match {                                       /* 두 번째 줄: 경기명 — 메타줄과 구분선으로 분리(구분선 좌우 살짝 안쪽) */
        order: 6;
        flex-basis: 100%;
        margin-top: 0.214rem;                           /* 구분선 위 간격 */
        padding-top: 0.643rem;                          /* 구분선 아래 간격 */
        justify-content: flex-start;
        border-top: 1px solid var(--bc-border);         /* 카드 좌우 패딩만큼 자연 인셋(풀블리드 아님) */
    }
    .bc-c-match .bc-m-name { min-width: 0; max-width: none; }
    /* 점수 영역: 진행중=파란 점수 pill, 진행예정=VS(파랑) */
    .bc-m-score--live {
        padding: 0.143rem 0.5rem;
        border-radius: 999px;
        background: var(--bc-soft-blue);
        color: var(--bc-blue);
    }
    .bc-m-score--vs { color: var(--bc-blue); }
    /* 팀 정보: 엠블럼+팀명을 한 덩어리로 붙여 각 반쪽 영역 안에서 가운데 정렬(긴 이름은 …로 축약) */
    .bc-m-home, .bc-m-away { justify-content: center; }

    /* ── 채팅 오버레이: 세로 스택(상단 플레이어 + 하단 채팅 전체폭) ── */
    .bcfs.is-open { flex-direction: column; }
    .bcfs-player {
        flex: none;
        height: 42vh;            /* 상단 플레이어 영역 */
        min-height: 16rem;
        padding: 1rem;
    }
    .bcfs-center { gap: 1.143rem; }
    .bcfs-title { font-size: 1.714rem; }
    .bcfs-sub { margin-top: -0.643rem; }
    .bcfs-cards { gap: 0.643rem; }
    .bcfs-info-card { width: 100%; }
    /* 좁은 화면에선 중앙 안내가 컨트롤바와 겹치지 않게 컨트롤바를 컴팩트 */
    .bcfs-pctrl { padding: 0.643rem 1rem 0.857rem; }
    .bcfs-hint { display: none; }

    .bcfs-chat {
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
        border-left: 0;
        border-top: 1px solid var(--bc-border);
    }
}