/* GGULTV 편성표 — 다크 톤(ggultv-live 계열), 마지막 열 우측정렬 시청 배지 */
.gbc-wrap { --gbc-bg:#1a1d21; --gbc-row:#22262c; --gbc-line:#31363d; --gbc-txt:#e6e8eb; --gbc-mut:#9aa0a6; --gbc-acc:#fc6300;
  background: var(--gbc-bg); border: 1px solid var(--gbc-line); border-radius: 12px; color: var(--gbc-txt);
  font-size: 14px;
  /* 좁은 화면에서 시청처 배지가 많아 표가 넘칠 때: 페이지가 아니라 카드 안에서만 가로 스크롤 */
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.gbc-dep { padding: 16px; color: #d63638; margin: 0; }

/* SSR = 페이지 캐시 스냅샷 → 흐리게 시작, JS 가 첫 REST 갱신 후 인라인 opacity 로 선명화.
   ⚠️ transition 금지 — LiteSpeed CSS 비동기 스왑과 얽혀 전이가 0.45 에서 동결됐다(실사고). */
.gbc-stale .gbc-body { opacity: .45; }

/* margin:0 필수 — 테마의 table{margin-bottom:1.5em} 이 카드 안에 먹어 바닥에 빈 공간이 생긴다 */
.gbc-table { width: 100%; border-collapse: collapse; margin: 0; }
.gbc-table thead th { text-align: center; font-size: 12px; font-weight: 600; color: var(--gbc-mut);
  padding: 10px 14px; border-bottom: 1px solid var(--gbc-line); background: #14171a; }
.gbc-th-match { width: auto; }

.gbc-row td { padding: 11px 14px; border-bottom: 1px solid var(--gbc-line); vertical-align: middle; }
.gbc-row:last-child td { border-bottom: 0; }
.gbc-row.is-live { background: rgba(252,99,0,.06); }

/* 리그 셀(행마다): 종목 아이콘 + 리그명 한 줄 */
.gbc-lg { border-right: 1px solid var(--gbc-line); white-space: nowrap; text-align: center; width: 110px; }
.gbc-lg-in { display: inline-flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; }
.gbc-lg-ico { font-size: 13px; line-height: 1; flex: none; }
.gbc-lg-name { font-weight: 700; font-size: 10px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }

/* 시간: 월/일 24시:분 */
.gbc-status { white-space: nowrap; width: 96px; text-align: center; }
.gbc-time { color: var(--gbc-mut); font-variant-numeric: tabular-nums; font-size: 10px; line-height: 1.3; }

/* 경기: 팀명·로고·점수 [배지] 점수·로고·팀명 (가운데 대칭).
   ⚠️ flex 는 td 가 아니라 내부 래퍼(.gbc-match-in)에 — td{display:flex} 는 셀이 행 높이
   동기화에서 빠져 다른 열이 높아질 때 아래 경계선이 중간에 끝난다(실사고). */
.gbc-match-in { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gbc-side { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.gbc-home { justify-content: flex-end; }
.gbc-away { justify-content: flex-start; }
.gbc-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; flex: none; }
.gbc-logo--ph { background: #31363d; }
.gbc-team-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* flex:none + nowrap 필수 — 테마 word-break 가 td 에 먹으면 축소된 점수가 '7\n7' 로 꺾인다(실사고).
   축소는 팀명(ellipsis)이 흡수. */
.gbc-sc { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 14px; text-align: center;
  flex: none; white-space: nowrap; }

/* 가운데 배지(진행중 / 시작전) */
.gbc-mid { flex: none; min-width: 96px; text-align: center; }
/* 라이브: 점멸 dot 아이콘 + 진행상황(후반 7분 등) 필 배지.
   초록 배경 + 흰 폰트 — 주황 톤이던 시절 시청 배지(주황)와 겹쳐 가독성 저하(사용자 피드백). */
.gbc-live { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #fff; background: #166534; border: 1px solid #1d7c42; }
.gbc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: gbc-pulse 1.4s infinite; }
@keyframes gbc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.gbc-soon { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--gbc-mut); background: #2b3037; border: 1px solid var(--gbc-line); }

/* 시청처 배지 — 열 폭을 좁게 잡고(경기 열이 넓어짐) 셀 전역에 여러 줄로 자연스럽게 채움 */
.gbc-watch { width: 24%; border-left: 1px solid var(--gbc-line); }
.gbc-watch-grid { display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 6px; height: 100%; }
.gbc-badge { display: inline-block; margin: 0; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.gbc-badge--tv { background: rgba(252,99,0,.26); color: #ffcda6; border: 1px solid rgba(252,99,0,.5); }
.gbc-badge--online { background: rgba(59,130,246,.26); color: #bcd8ff; border: 1px solid rgba(59,130,246,.55); }
.gbc-watch-none { color: var(--gbc-mut); }

.gbc-empty td { padding: 22px 14px; text-align: center; color: var(--gbc-mut); }

/* 라이브 행 = 문자중계 진입점(행 전체 클릭). 미지원 종목(e스포츠 등, .gbc-norelay)은 제외 */
.gbc-row.is-live:not(.gbc-norelay) { cursor: pointer; }
.gbc-row.is-live:not(.gbc-norelay):hover { background: rgba(252,99,0,.12); }

/* ---------------- 문자중계 모달 (다크톤) ---------------- */
.gbc-mo { position: fixed; inset: 0; z-index: 100000; display: none; }
.gbc-mo.is-open { display: block; }
.gbc-mo-bg { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.gbc-mo-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(560px, calc(100vw - 24px)); max-height: min(78vh, 720px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #1a1d21; border: 1px solid #31363d; border-radius: 14px; color: #e6e8eb;
  box-shadow: 0 18px 60px rgba(0,0,0,.55); font-size: 13px; }
.gbc-mo-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #14171a; border-bottom: 1px solid #31363d; }
.gbc-mo-head { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.gbc-mo-lg { color: #9aa0a6; font-size: 11px; flex-basis: 100%; text-align: center; }
.gbc-mo-team { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38%; }
.gbc-mo-score { font-weight: 800; font-variant-numeric: tabular-nums; color: #fc6300; }
.gbc-mo-live { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  color: #fff; background: #166534; border: 1px solid #1d7c42; border-radius: 999px; padding: 1px 7px; }
.gbc-mo-done { font-size: 10px; font-weight: 700; color: #9aa0a6; background: #2b3037; border: 1px solid #31363d; border-radius: 999px; padding: 1px 7px; }
.gbc-mo-x { flex: none; background: none; border: 0; color: #9aa0a6; font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 6px; }
.gbc-mo-x:hover { color: #fff; }

/* 본문 스크롤 — 다크톤 커스텀 스크롤바 */
.gbc-mo-body { overflow-y: auto; padding: 10px 12px 14px; scrollbar-width: thin; scrollbar-color: #3a4048 #1a1d21; }
.gbc-mo-body::-webkit-scrollbar { width: 8px; }
.gbc-mo-body::-webkit-scrollbar-track { background: #1a1d21; }
.gbc-mo-body::-webkit-scrollbar-thumb { background: #3a4048; border-radius: 999px; border: 2px solid #1a1d21; }
.gbc-mo-body::-webkit-scrollbar-thumb:hover { background: #4a515a; }

/* 기간 그룹(details) — 지난 그룹은 접힘 */
.gbc-rl-g { border: 1px solid #31363d; border-radius: 10px; margin-bottom: 8px; background: #1e2126; overflow: hidden; }
.gbc-rl-g summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; font-weight: 700; font-size: 12px; background: #22262c; user-select: none; }
.gbc-rl-g summary::-webkit-details-marker { display: none; }
.gbc-rl-g summary::before { content: '▸'; color: #9aa0a6; font-size: 10px; transition: transform .12s; }
.gbc-rl-g[open] summary::before { transform: rotate(90deg); }
.gbc-rl-n { margin-left: auto; color: #9aa0a6; font-weight: 500; font-size: 10px; }
.gbc-rl-list { padding: 4px 0 6px; }

/* 이벤트 행 */
.gbc-rl-i { display: flex; align-items: baseline; gap: 7px; padding: 4px 12px; line-height: 1.5; }
.gbc-rl-m { flex: none; min-width: 34px; color: #9aa0a6; font-size: 11px; font-variant-numeric: tabular-nums; }
.gbc-rl-ic { flex: none; font-size: 12px; }
.gbc-rl-t { min-width: 0; overflow-wrap: anywhere; }
.gbc-rl-sc { flex: none; margin-left: auto; font-weight: 800; font-size: 11px; color: #fc6300; font-variant-numeric: tabular-nums; }
.gbc-rl-i.is-home .gbc-rl-t { color: #ffcda6; }
.gbc-rl-i.is-away .gbc-rl-t { color: #bcd8ff; }
.gbc-rl-i.ev-ball_count_info .gbc-rl-t { color: #9aa0a6; font-size: 12px; }
.gbc-rl-i.ev-batting_result .gbc-rl-t, .gbc-rl-i.ev-game_progress .gbc-rl-t { font-weight: 700; }
.gbc-rl-i.ev-player_introduction .gbc-rl-t { font-weight: 700; color: #e6e8eb; }
.gbc-rl-i.ev-game_result .gbc-rl-t { font-weight: 600; }

/* 가운데 마커(전반 종료·후반 시작 등) — 스크린샷의 필 형태 */
.gbc-rl-mark { text-align: center; padding: 6px 0; }
.gbc-rl-mark span { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: #fff; background: #166534; border: 1px solid #1d7c42; }
.gbc-rl-empty { text-align: center; color: #9aa0a6; padding: 22px 0; margin: 0; }

@media (max-width: 640px) {
  .gbc-mo-panel { width: calc(100vw - 16px); max-height: 84vh; }
}

/* 타블릿·모바일: 헤더 제거, 행당 한 열 3줄 스택(종목+리그+시간 / 경기 / 시청 배지) — 전부 가운데 정렬 */
@media (max-width: 1024px) {
  .gbc-wrap { font-size: 13px; overflow-x: hidden; }
  .gbc-table, .gbc-body { display: block; }
  .gbc-table thead { display: none; }
  .gbc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    row-gap: 7px; column-gap: 8px; padding: 11px 10px; border-bottom: 1px solid var(--gbc-line); }
  .gbc-row:last-child { border-bottom: 0; }
  .gbc-row td { display: block; padding: 0; border: 0; width: auto; }
  /* 1줄: 종목아이콘 + 리그명 + 시간 */
  .gbc-lg, .gbc-status { flex: none; }
  /* 2줄: 경기 전폭 대칭 — flex 는 .gbc-match-in 이 항상 담당하므로 td 는 배치만 */
  .gbc-match { flex-basis: 100%; }
  .gbc-match-in { gap: 8px; }
  .gbc-team-name { max-width: 120px; }
  .gbc-mid { min-width: 64px; }
  /* 3줄: 시청 배지 전폭 */
  .gbc-watch { flex-basis: 100%; }
  /* 빈 상태도 블록 전환 */
  .gbc-empty, .gbc-empty td { display: block; text-align: center; }
}
@media (max-width: 480px) {
  .gbc-team-name { max-width: 100px; } /* 84px 는 '시카고 파이어' 등 5팀 말줄임(375px 실측) — 100px 이 잘림 0·넘침 0 */
  .gbc-mid { min-width: 44px; }
  .gbc-match-in { gap: 6px; }
}