/* ===================== 축구 경기 상세 (/sports-info/match/{id}) — 2026-11-04 개편 =====================
   피그마 03. 축구라인업 › 경기 상세(26.11.04 변경분 포함) · 정리본 docs/SoccerLineup-Spec.md 11절.
   값은 시안 px ÷ 16(데스크톱 루트 16px) — 모바일에서 루트가 75%(12px)로 줄면 같이 줄어든다. 글자는 아래 모바일 블록이 12px 하한을 깐다.
   ⚠ broadcast.css **다음에** 싣는다(Detail.cshtml) — 색 토큰(--bcs-*)과 [hidden] 규칙은 .bc-sched 에서, 툴팁(.bc-hint)은 그 파일에서 온다.
     이 화면의 칩·카드는 시안 값이 중계와 달라 .sd-* 로 따로 둔다(중계 클래스를 덮어쓰지 않는다).
   ⚠ 야구 상세(RwDetail)는 info.css 의 si-* 를 쓴다 — 이 파일과 무관하다. */

.sd { gap: 1rem; }
.sd-body { display: contents; }   /* 없는 경기 분기용 래퍼 — 레이아웃에 끼지 않는다 */

/* ── 1. 목록으로 ── */
.sd-back {
    display: inline-flex; align-items: center; gap: 0.428rem; align-self: flex-start;
    font-size: 0.875rem; font-weight: 700; line-height: 1.5; color: var(--bcs-mute);
    text-decoration: none;
}
.sd-back .bi { font-size: 1rem; }
.sd-back:hover { color: var(--bcs-text); }

/* ── 2~4. 경기 헤더 ── */
.sd-head {
    display: flex; flex-direction: column; gap: 0.438rem;
    padding: 1.375rem 1.75rem;
    border: 1px solid var(--bcs-line);
    border-radius: 0.75rem;
    background: #fff;
}
.sd-head-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.625rem; }
.sd-head-meta, .sd-head-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.625rem; min-width: 0; }
.sd-league {
    padding: 0.125rem 0.5rem; border-radius: 0.25rem; background: #EEF2F6;
    font-size: 0.75rem; font-weight: 500; line-height: 1.5; color: var(--bcs-slate);
}
.sd-kick { font-size: 0.875rem; font-weight: 500; line-height: 1.5; color: var(--bcs-sub); font-variant-numeric: tabular-nums; }
.sd-remain { font-size: 0.813rem; font-weight: 400; line-height: 1.5; color: var(--bcs-mute); }
.sd-live {
    display: inline-flex; align-items: center; gap: 0.313rem;
    padding: 0.188rem 0.5rem; border-radius: 0.375rem; background: var(--bcs-text);
    font-size: 0.75rem; font-weight: 700; line-height: 1.17; color: #fff;
}
.sd-live-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #60A5FA; flex: none; }
.sd-updated { font-size: 0.75rem; line-height: 1.5; color: var(--bcs-light); }
.sd-fav {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--bcs-line-strong); border-radius: 0.375rem; background: #fff;
    font-size: 0.813rem; font-weight: 500; line-height: 1.5; color: var(--bcs-sub);
    cursor: pointer;
}
.sd-fav:hover { border-color: var(--bcs-blue); }
.sd-fav.is-on .bi { color: #F59E0B; }

/* 팀 줄 — [로고 · 홈/팀명] [VS] [원정/팀명 · 로고], 가운데 정렬 */
.sd-match {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; column-gap: 1.25rem;
    margin-top: 0.5rem;
}
.sd-side { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.sd-side.is-home { justify-content: flex-end; }
/* 원정은 [팀명 · 로고] 순서라 뒤집는다 — row-reverse 에서 flex-end = 왼쪽(VS 쪽)에 붙는다 */
.sd-side.is-away { flex-direction: row-reverse; justify-content: flex-end; }
.sd-side-text { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; min-width: 0; text-align: center; }
.sd-side-label { font-size: 0.813rem; line-height: 1.5; color: var(--bcs-mute); }
.sd-side-name { font-size: 1.5rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); word-break: keep-all; overflow-wrap: anywhere; }
.sd-logo {
    flex: none; width: 3rem; height: 3rem;
    border: 2px solid var(--bcs-line); border-radius: 50%; background: #fff;
    overflow: hidden;
}
.sd-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sd-logo--sm { width: 1.75rem; height: 1.75rem; border-width: 1px; }
.sd-vs {
    padding: 0.235rem 0.714rem; border-radius: 0.429rem; background: #F1F3F7;
    font-size: 0.875rem; font-weight: 700; line-height: 1.5; color: var(--bcs-light);
    white-space: nowrap;
}
.sd-vs.is-score { font-size: 1.25rem; line-height: 1.05; padding: 0.375rem 0.75rem; color: var(--bcs-text); font-variant-numeric: tabular-nums; }

.sd-state { display: flex; flex-direction: column; align-items: center; gap: 0.438rem; margin-top: 0.5rem; text-align: center; }
.sd-state-text { margin: 0; font-size: 0.813rem; line-height: 1.5; color: var(--bcs-slate); word-break: keep-all; }
.sd-fav-note { margin: -0.25rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--bcs-light); word-break: keep-all; }

/* 상태 칩(헤더 · 팀 카드 공통) — 확정 · 예상 · 라인업 대기중 · 경기 취소/연기/중단 */
.sd-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.125rem 0.5rem; border-radius: 0.25rem;
    font-size: 0.75rem; font-weight: 500; line-height: 1.5; white-space: nowrap; flex: none;
}
.sd-chip--confirmed { background: var(--bcs-blue-soft); color: var(--bcs-blue-deep); }
.sd-chip--expected  { background: var(--bcs-slate-bg); color: var(--bcs-slate); }
.sd-chip--waiting   { background: #FFFBEB; color: #B45309; }
.sd-chip--stop      { padding: 0.188rem 0.563rem 0.188rem 0.5rem; border-radius: 0.375rem; background: #F8FAFC; color: var(--bcs-mute); }
.sd-chip--hint { cursor: help; }
.sd-chip--hint .bi { font-size: 0.75rem; }

/* ── 5. 고정 안내 ── */
.sd-notice {
    display: flex; align-items: flex-start; gap: 0.5rem;
    margin: 0; padding: 0.75rem 1rem;
    border: 1px solid var(--bcs-line); border-radius: 0.625rem; background: var(--bcs-blue-bg);
    font-size: 0.875rem; font-weight: 500; line-height: 1.5; color: var(--bcs-blue-deep);
    word-break: keep-all;
}
.sd-notice .bi { flex: none; line-height: 1.5; }

/* ── 카드 공통 ── */
.sd-card { border: 1px solid var(--bcs-line); border-radius: 0.75rem; background: #fff; }

/* ── 6. 라인업 평가 ── */
.sd-eval { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; }
.sd-eval-title { margin: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); }
.sd-eval-list { margin: 0; padding: 0 0 0 1.125rem; list-style: disc; }
.sd-eval-list li { font-size: 0.875rem; line-height: 1.65; color: var(--bcs-sub); word-break: keep-all; }
.sd-eval-list li::marker { color: var(--bcs-light); }

/* ── 7. 팀 카드 ── */
.sd-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.sd-team { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1.25rem; }
.sd-team-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sd-team-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); }
.sd-team-side { flex: none; font-size: 0.813rem; line-height: 1.5; color: var(--bcs-mute); }
.sd-team-form { flex: none; font-size: 0.875rem; font-weight: 500; line-height: 1.5; color: var(--bcs-sub); font-variant-numeric: tabular-nums; }
.sd-team-chip { margin-left: auto; }

.sd-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sd-tag { padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; line-height: 1.5; word-break: keep-all; }
.sd-tag--alert   { background: var(--bcs-red-bg); color: var(--bcs-red); }
.sd-tag--neutral { background: #F0F4F8; color: var(--bcs-sub); }

/* 선발 가능성 기호 설명 + 등급 칩(피치 · 기호 설명 공용 — 시안: 유력 #DBEAFE / 가능 #EEF2F6 / 낮음 흰 + 테두리) */
.sd-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.5rem; font-size: 0.75rem; line-height: 1.5; }
.sd-legend b { font-weight: 700; color: var(--bcs-sub); }
.sd-legend-text { color: var(--bcs-mute); }
.sd-grade {
    display: inline-flex; align-items: center;
    padding: 0.125rem 0.5rem; border: 1px solid transparent; border-radius: 0.375rem;
    font-size: 0.75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; flex: none;
}
.sd-grade--hi  { background: var(--bcs-blue-soft); color: var(--bcs-blue-deep); }
.sd-grade--mid { background: #EEF2F6; color: var(--bcs-sub); }
.sd-grade--lo  { background: #fff; border-color: var(--bcs-line-strong); color: var(--bcs-mute); }
.sd-grade--pitch { padding: 0 0.25rem; line-height: 1.5; }

/* 카드 안 안내(라인업 대기중 · 취소 · 연기 · 중단) */
.sd-team-notice {
    margin: 0; padding: 1.25rem;
    border: 1px solid var(--bcs-line); border-radius: 0.5rem; background: #F8FAFC;
    font-size: 0.875rem; line-height: 1.5; color: var(--bcs-slate); word-break: keep-all;
}

/* ── 8. 피치뷰 — 518×648(≈4:5) 네이비, 안쪽 10px 이 터치라인. 라인 위치는 시안 비율(%)이다 ── */
/* ⚠ 높이는 '비율 기본 + 내용이 넘치면 늘어남' 이다 — 선수 줄(.sd-rows)을 흐름 안에 두고 overflow 를 막지 않아야
   aspect-ratio 의 자동 최소 크기(내용 높이)가 살아난다. 4-2-3-1(5줄)·4-1-2-1-2(6줄)를 모바일 폭에 담으면
   비율 높이로는 골키퍼 줄이 피치 밖으로 잘린다(2026-11-04 실측). overflow:hidden 을 되살리지 말 것. */
.sd-pitch {
    position: relative;
    display: flex; flex-direction: column;
    aspect-ratio: 518 / 648;
    border-radius: 0.875rem;
    background: linear-gradient(180deg, #16335F 0%, #0C1D3A 100%);
}
.sd-field {
    position: absolute; inset: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    /* 잔디 줄무늬 — 10% 간격으로 한 줄씩 */
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 10%, transparent 10%, transparent 20%);
    pointer-events: none;
}
.sd-field > span { position: absolute; box-sizing: border-box; }
.sd-f-half { left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: rgba(255, 255, 255, 0.45); }
.sd-f-circle { left: 50%; top: 50%; width: 17.67%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 50%; }
.sd-f-spot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; left: 50%; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.sd-f-spot--c { top: 50%; }
.sd-f-spot--top { top: 11.3%; }
.sd-f-spot--bot { top: 88.7%; }
.sd-f-box { left: 50%; width: 60.04%; height: 16.94%; transform: translateX(-50%); border: 1.5px solid rgba(255, 255, 255, 0.45); }
.sd-f-box--top { top: -1.5px; }
.sd-f-box--bot { bottom: -1.5px; }
.sd-f-area { left: 50%; width: 29.92%; height: 6.45%; transform: translateX(-50%); border: 1.5px solid rgba(255, 255, 255, 0.45); }
.sd-f-area--top { top: -1.5px; }
.sd-f-area--bot { bottom: -1.5px; }
.sd-f-goal { left: 50%; width: 15.06%; height: 8px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.15); border: 1.5px solid rgba(255, 255, 255, 0.7); }
.sd-f-goal--top { top: -9px; }
.sd-f-goal--bot { bottom: -9px; }

/* 선수 줄 — 시안: 첫 줄 위 58 · 마지막 줄 아래 20(피치 518×648 기준). 흐름 안에 두므로 여백은 폭 기준 %(58/518 · 20/518)다. */
.sd-rows {
    position: relative; flex: 1 1 auto;
    margin: 0 10px; padding: 11.2% 0 3.86%;
    display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;
}
.sd-row { display: flex; align-items: flex-start; }
.sd-pl {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
    padding: 0 0.125rem;
    outline: none;
}
.sd-pl[data-hint] { cursor: help; }
.sd-pl-dot {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 3.5rem; height: 3.5rem; flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    font-size: 0.75rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); white-space: nowrap;
}
.sd-pl[data-hint]:hover .sd-pl-dot, .sd-pl[data-hint]:focus-visible .sd-pl-dot { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25); }
.sd-pl.is-unexp .sd-pl-dot { border: 3px solid #60A5FA; }   /* 예상 외 선발(확정 후에만) */
.sd-pl-name { display: flex; align-items: flex-start; justify-content: center; gap: 0.25rem; max-width: 100%; }
.sd-pl-nm {
    min-width: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;   /* 최대 2줄 */
    font-size: 0.813rem; font-weight: 500; line-height: 1.3; color: #fff; text-align: center;
    word-break: keep-all; overflow-wrap: anywhere;
}
.sd-pl-badge {
    padding: 0.25rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.1);
    font-size: 0.75rem; font-weight: 700; line-height: 1.2; color: #fff; white-space: nowrap;
}

/* ── 9·10. 벤치 · 결장 ── */
.sd-sec { display: flex; flex-direction: column; gap: 0.75rem; }
.sd-sec-title { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); }
.sd-sec-n { font-weight: 500; color: var(--bcs-mute); }
.sd-sec-key { font-weight: 700; color: var(--bcs-red); }
.sd-help { display: inline-flex; font-size: 1rem; color: var(--bcs-light); cursor: help; }
.sd-help:hover, .sd-help:focus-visible { color: var(--bcs-blue); outline: none; }

.sd-bench { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
/* 벤치 칩 — 이름 + 포지션 칩(.sd-pos--*). 2026-11-05 지시 *"포지션 칩은 모두 해당 색상으로"* 로 회색 글자(.sd-bench-pos)를
   4분류 색 칩으로 바꿨다. 칩이 안에 들어가 위아래 여백을 줄이고 세로 가운데로 맞춘다. */
.sd-bench-chip {
    display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%;
    padding: 0.188rem 0.25rem 0.188rem 0.625rem; border: 1px solid var(--bcs-line); border-radius: 0.375rem; background: #fff;
}
.sd-bench-name { min-width: 0; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.813rem; font-weight: 500; line-height: 1.5; color: var(--bcs-text); }
.sd-bench-chip .sd-pos { padding: 0.063rem 0.375rem; border-radius: 0.25rem; }

.sd-miss-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sd-miss { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem 0.875rem; border-radius: 0.5rem; background: #F8FAFC; }
.sd-miss-l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; min-width: 0; }
.sd-miss-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); }
/* 포지션 칩 — 영문 detailed_position 4분류(SoccerDetailService.PosKindOf). 결장 · 벤치 · 포지션 경쟁이 함께 쓴다.
   ⚠ 결장정보 화면(absence.css .ab-out-pos--* · .ab-pos-abbr--*)과 **같은 값**이다 — 한쪽만 고치지 말 것. */
.sd-pos { flex: none; padding: 0.188rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.sd-pos--gk  { background: #E0F2FE; color: #0369A1; }
.sd-pos--def { background: #DCFCE7; color: #15803D; }
.sd-pos--mid { background: #FFEDD5; color: #C2410C; }
.sd-pos--att { background: #F3E8FF; color: #7E22CE; }
.sd-pos--etc { background: #EEF2F6; color: var(--bcs-slate); }
.sd-stars { flex: none; font-size: 0.813rem; font-weight: 700; line-height: 1.5; color: var(--bcs-blue); letter-spacing: 0.02em; }
.sd-stars-off { color: var(--bcs-line-strong); }
.sd-miss-period { margin-left: auto; flex: none; font-size: 0.75rem; line-height: 1.5; color: var(--bcs-mute); white-space: nowrap; }
.sd-miss-l2 { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sd-mchip { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border: 1px solid transparent; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; line-height: 1.5; word-break: keep-all; }
.sd-mchip--out { background: var(--bcs-red); color: #fff; font-weight: 700; }
.sd-mchip--exp { background: #fff; border-color: var(--bcs-red); color: var(--bcs-red); font-weight: 700; }
.sd-mchip--imp-hi  { background: var(--bcs-red-bg); color: var(--bcs-red); }
.sd-mchip--imp-mid { background: #FFFBEB; color: #B45309; }
.sd-mchip--imp-lo  { background: var(--bcs-slate-bg); color: var(--bcs-mute); }
.sd-mchip--reason  { background: #EEF2F6; color: var(--bcs-sub); }
.sd-mchip--ret     { background: #fff; border-color: var(--bcs-line); color: var(--bcs-slate); }
.sd-miss-season { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--bcs-light); }

/* ── 11. 결장 분석 안내 박스 ── */
.sd-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bcs-line); border-radius: 0.75rem; background: #F8FAFC;
    box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.07);
}
.sd-cta-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.sd-cta-eyebrow { padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--bcs-line); font-size: 0.75rem; font-weight: 700; line-height: 1.17; color: var(--bcs-mute); }
.sd-cta-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); word-break: keep-all; }
.sd-cta-desc { margin: -0.25rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--bcs-mute); word-break: keep-all; }
.sd-cta-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.75rem; padding: 0.625rem 1rem;
    border: 1px solid var(--bcs-blue-line); border-radius: 0.5rem; background: var(--bcs-blue-bg);
    font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: var(--bcs-blue-deep); white-space: nowrap;
    text-decoration: none;
}
.sd-cta-btn:hover { border-color: var(--bcs-blue); color: var(--bcs-blue-deep); }

/* ── 참고. 포지션 경쟁 ── */
.sd-battle { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem; }
.sd-battle-head { display: flex; align-items: center; gap: 0.5rem; }
.sd-battle-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); }
.sd-battle-chip { padding: 0.125rem 0.5rem; border-radius: 0.25rem; background: var(--bcs-blue-bg); font-size: 0.75rem; font-weight: 500; line-height: 1.5; color: var(--bcs-blue); }
.sd-battle-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sd-battle-team { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; padding: 1rem; border: 1px solid var(--bcs-line); border-radius: 0.625rem; background: #fff; }
.sd-battle-team-head { display: flex; align-items: baseline; gap: 0.375rem; min-width: 0; }
.sd-battle-team-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: var(--bcs-text); }
.sd-battle-team-head span { flex: none; font-size: 0.75rem; line-height: 1.2; color: var(--bcs-mute); }
.sd-battle-none { margin: 0; font-size: 0.813rem; line-height: 1.5; color: var(--bcs-mute); }
.sd-battle-pos { display: flex; flex-direction: column; gap: 0.375rem; }
.sd-battle-pos-name { align-self: flex-start; }   /* 포지션 칩(.sd-pos--*)을 글자 폭으로 — 2026-11-05 회색 글자에서 칩으로 */
.sd-battle-cons { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem 0.5rem; }
.sd-battle-con { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; }
.sd-battle-name { max-width: 6.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.813rem; font-weight: 700; line-height: 1.5; color: var(--bcs-text); }
.sd-battle-vs { font-size: 0.75rem; line-height: 1.2; color: var(--bcs-light); }
/* 포지션 경쟁 등급 — 시안: 유력 #2563EB 바탕 흰 글자 / 가능 #F4F9FF + 1px #2563EB / 낮음 #F1F5F9 + 1px #94A3B8 (피치 등급과 색이 다르다 — 시안 그대로) */
.sd-bgrade { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border: 1px solid transparent; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; flex: none; }
.sd-bgrade--hi  { background: #2563EB; color: #fff; }
.sd-bgrade--mid { background: #F4F9FF; border-color: #2563EB; color: #2563EB; }
.sd-bgrade--lo  { background: #F1F5F9; border-color: #94A3B8; color: #475569; }

/* 툴팁 본문(<template id="sdAbsHelp|sdBattleHelp">) — body 에 붙는 .bc-hint 안이라 토큰 대신 값. 툴팁 공통 기준: 12px 고정. */
.sd-hint-list { margin: 0; font-size: 12px; line-height: 1.5; }
.sd-hint-list dt { font-weight: 700; color: #334155; }
.sd-hint-list dd { margin: 0 0 6px; color: #334155; }
.sd-hint-star { color: #2563EB; font-weight: 700; }
.sd-hint-star.is-off { color: #94A3B8; }
.sd-hint-grades { display: flex; flex-direction: column; gap: 4px; }
.sd-hint-grades .sd-bgrade { font-size: 12px; padding: 0 6px; margin-right: 4px; }
.sd-hint-foot { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #64748B; }

.sd-back:focus-visible, .sd-fav:focus-visible, .sd-cta-btn:focus-visible, .sd-chip--hint:focus-visible {
    outline: 2px solid var(--bcs-blue); outline-offset: 2px;
}

/* ===================== 모바일 (≤767.98px) ===================== */
@media (max-width: 767.98px) {
    .sd-head { padding: 1rem; }
    .sd-head-top { align-items: flex-start; }
    .sd-head-right { margin-left: auto; }
    .sd-match { column-gap: 0.625rem; }
    .sd-side { gap: 0.5rem; }
    .sd-side.is-home, .sd-side.is-away { flex-direction: column; align-items: center; justify-content: flex-start; }   /* 로고 위 · 팀명 아래 */
    .sd-logo { width: 2.75rem; height: 2.75rem; }
    .sd-logo--sm { width: 1.75rem; height: 1.75rem; }

    .sd-teams { grid-template-columns: minmax(0, 1fr); }
    .sd-team { padding: 1rem 0.875rem; }
    .sd-pl-dot { width: 3.25rem; height: 3.25rem; }   /* 루트 12px → 39px — 아래에서 px 하한을 깐다 */
    .sd-cta { flex-direction: column; align-items: stretch; }
    .sd-cta-btn { align-self: stretch; }
    .sd-battle { padding: 1rem; }
    .sd-battle-body { grid-template-columns: minmax(0, 1fr); }
}

/* 모바일 12px 하한(공통 규칙 1-2) — 루트 75% 라 0.75rem 이 9px 로 내려간다. 모바일 구간에서만 px 로 바닥을 깐다.
   ⚠ `.sd` 를 앞에 붙여 위 규칙들보다 우선한다. 새 글자 요소를 더하면 여기도 넣는다. */
@media (max-width: 767.98px) {
    .sd .sd-league, .sd .sd-remain, .sd .sd-live, .sd .sd-updated, .sd .sd-fav, .sd .sd-side-label, .sd .sd-state-text, .sd .sd-fav-note,
    .sd .sd-chip, .sd .sd-chip--hint .bi, .sd .sd-tag, .sd .sd-legend, .sd .sd-grade, .sd .sd-pl-dot, .sd .sd-pl-badge,
    .sd .sd-pos, .sd .sd-miss-period, .sd .sd-mchip, .sd .sd-miss-season, .sd .sd-cta-eyebrow, .sd .sd-cta-desc,
    .sd .sd-battle-chip, .sd .sd-battle-team-head span, .sd .sd-battle-pos-name, .sd .sd-battle-vs, .sd .sd-bgrade { font-size: 12px; }

    .sd .sd-kick, .sd .sd-notice, .sd .sd-eval-list li, .sd .sd-team-side, .sd .sd-team-form, .sd .sd-team-notice,
    .sd .sd-pl-nm, .sd .sd-bench-name, .sd .sd-miss-name, .sd .sd-stars, .sd .sd-battle-name, .sd .sd-battle-none,
    .sd .sd-battle-team-head b, .sd .sd-back, .sd .sd-sec-title, .sd .sd-eval-title, .sd .sd-cta-btn { font-size: 13px; }

    .sd .sd-side-name { font-size: 17px; line-height: 1.35; }
    .sd .sd-vs { font-size: 13px; }
    .sd .sd-vs.is-score { font-size: 17px; }
    .sd .sd-team-name, .sd .sd-cta-title, .sd .sd-battle-title { font-size: 15px; }

    /* 원 — 역할 글자 '미드필더'(12px 굵게 ≈ 48px)가 들어가는 최소 지름. 5명 줄(폭 ≈ 60px/명)에서 넘치지 않는 값 */
    .sd .sd-pl-dot { width: 52px; height: 52px; letter-spacing: -0.02em; }
    .sd .sd-pl.is-unexp .sd-pl-dot { border-width: 2px; }
}