.ggultv-sp {
  --sp-bg: #ffffff;
  --sp-border: #e6e8eb;
  --sp-text: #1a1d21;
  --sp-muted: #6b7280;
  --sp-live: #e11d48;
  --sp-accent: #1d4ed8;
  --sp-tab-bg: #f4f6f9;
  max-width: var(--gb-container-width, 720px);
  margin: 0 auto;
  background: var(--sp-bg);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--sp-text);
  font-size: 15px;
  line-height: 1.4;
}

.ggultv-sp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, #0f172a, #1e293b);
  color: #fff;
}
.ggultv-sp__title { font-weight: 700; letter-spacing: .2px; }
.ggultv-sp__updated { font-size: 12px; color: #cbd5e1; }

/* 탭 */
.ggultv-sp__tabs {
  display: flex;
  overflow-x: auto;
  gap: 0;
  background: var(--sp-tab-bg);
  border-bottom: 1px solid var(--sp-border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ggultv-sp__tab {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ggultv-sp__tab:hover { color: var(--sp-text); }
.ggultv-sp__tab.is-active {
  color: var(--sp-accent);
  border-bottom-color: var(--sp-accent);
  background: var(--sp-bg);
}

.ggultv-sp__body { padding: 6px 0; min-height: 80px; }
.ggultv-sp__msg { padding: 28px 16px; text-align: center; color: var(--sp-muted); }

/* SSR 직후(is-ssr): 페이지 캐시에 굳은 옛 데이터(스코어/시각)가 잠깐 보이는 것 방지.
   소스(SEO)에는 남기고 화면에서만 숨김 — JS 첫 렌더 또는 4초 안전장치가 해제. */
.ggultv-sp.is-ssr .ggultv-sp__title,
.ggultv-sp.is-ssr .ggultv-sp__body > * { visibility: hidden; }
.ggultv-sp.is-ssr .ggultv-sp__body { position: relative; }
.ggultv-sp.is-ssr .ggultv-sp__body::before {
  content: '경기 정보를 불러오는 중…';
  visibility: visible;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--sp-muted);
}

/* 경기 행 */
.sp-match {
  padding: 12px 16px;
  border-top: 1px solid var(--sp-border);
}
.sp-match:first-child { border-top: 0; }
.sp-match.is-live { background: #fff1f4; }

.sp-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.sp-team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 0;
}
.sp-home { justify-content: flex-end; text-align: right; }
.sp-away { justify-content: flex-start; text-align: left; }
.sp-name {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.sp-home .sp-name { align-items: flex-end; }
.sp-away .sp-name { align-items: flex-start; }
.sp-name > :first-child,
.sp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sp-rank { font-size: 11px; font-weight: 600; color: var(--sp-muted); }
.sp-logo { width: 26px; height: 26px; object-fit: contain; flex: none; }

.sp-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
}
.sp-score { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-vs { font-size: 13px; font-weight: 700; color: var(--sp-muted); }

.sp-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--sp-muted);
  white-space: nowrap;
}
.sp-badge.sp-live {
  background: var(--sp-live);
  color: #fff;
  animation: sp-pulse 1.4s ease-in-out infinite;
}
.sp-badge.sp-done { background: #e5e7eb; color: #374151; }
.sp-badge.sp-soon { background: #e0edff; color: var(--sp-accent); }
.sp-badge.sp-off  { background: #fde68a; color: #92400e; }

.sp-meta { margin-top: 6px; text-align: center; font-size: 12px; color: var(--sp-muted); }

/* filter="next" 모드 — 다음 경기 안내형 간소 표시(2026-07-25 사용자 요청):
   VS·국가/리그명 숨김(야구 볼카운트 sp-bb 는 유지), 팀명 보통 두께, 예정 배지 글자색 주황 */
.ggultv-sp--next .sp-vs { display: none; }
.ggultv-sp--next .sp-meta:not(.sp-bb) { display: none; }
.ggultv-sp--next .sp-team { font-weight: 400; }
.ggultv-sp--next .sp-badge.sp-soon { color: #FC6300; }
.sp-meta.sp-bb { margin-top: 4px; font-weight: 700; color: var(--sp-live); font-variant-numeric: tabular-nums; }

@keyframes sp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@media (max-width: 480px) {
  .ggultv-sp { font-size: 14px; }
  .sp-logo { width: 22px; height: 22px; }
  .sp-score { font-size: 18px; }
  .sp-mid { min-width: 76px; }
  .ggultv-sp__tab { padding: 10px 13px; }
}

@media (prefers-color-scheme: dark) {
  .ggultv-sp {
    --sp-bg: #0f1115;
    --sp-border: #262a31;
    --sp-text: #e5e7eb;
    --sp-muted: #9aa3af;
    --sp-tab-bg: #161a20;
  }
  .sp-match.is-live { background: #1f1115; }
  .sp-badge { background: #20242b; }
  .sp-badge.sp-done { background: #2a2f37; color: #cbd5e1; }
  .sp-badge.sp-soon { background: #14233f; }
}

/* ------------------------------------------------------------------ *
 *  중계 보기: 행 맨 오른쪽 재생 아이콘(새 탭으로 named.net 플레이어)
 * ------------------------------------------------------------------ */
.sp-match { display: flex; align-items: center; gap: 10px; }
.sp-body { flex: 1 1 auto; min-width: 0; }
.sp-watch {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sp-live); color: #fff;
  text-decoration: none;
  transition: transform .12s, filter .12s;
}
.sp-watch:hover { filter: brightness(1.1); transform: scale(1.06); }
.sp-watch svg { display: block; margin-left: 2px; } /* 재생 삼각형 시각 보정 */

@media (max-width: 480px) {
  .sp-watch { width: 34px; height: 34px; }
  .sp-watch svg { width: 17px; height: 17px; }
}