/* 스포츠정보 (/Info/List·Detail 등) — site.css에서 분리(기능별). 뷰의 @section Styles로 로드. 공통은 site.css */
/* ===================== 스포츠정보 (.si) ===================== */
/* 1행 종목 메뉴 바 — 가로 열거, active 그라데이션 */
.si-menubar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* 간격은 .sb 컨테이너의 flex gap(12px)에 위임 — margin-bottom을 더하면 이중 간격(결장정보보다 벌어짐) */
}
/* 종목 탭 pill — 시안 컬러: 비활성 흰 배경+#E8EBF0 테두리+#5B6473 글자 / 활성 #1A56DB 단색+흰 글자(알약형) */
.si-menu {
    display: inline-flex;
    align-items: center;
    height: 2.286rem;          /* 32px */
    padding: 0 0.971rem;       /* 13.5px */
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E8EBF0;
    color: #5B6473;
    font-size: 0.929rem;       /* 13px */
    font-weight: 700;
    text-decoration: none;
}
.si-menu:hover { border-color: #1A56DB; color: #1A56DB; }
.si-menu.is-active,
.si-menu.is-active:hover { background: #1A56DB; color: #fff; border-color: #1A56DB; }

/* 준비중 배지 — 종목 pill 안 종목명 옆 소형 라벨. 색은 pill 글자색을 상속(활성=흰색, 비활성=회색). */
.si-menu-badge { margin-left: 0.375rem; font-size: 0.714rem; font-weight: 600; opacity: 0.7; }

/* 모바일 종목 선택 — 스포츠중계식 원형 카테고리 바(데스크톱 숨김, 모바일 미디어쿼리에서 flex). .bc-catbar와 동일 룩 */
.si-catbar {
    display: none;
    align-items: flex-start;
    gap: 0.857rem;
    padding: 0.857rem;
    background: #fff;
    border: 1px solid #E8EBF0;
    border-radius: 0.857rem;
    overflow-x: auto;
}
.si-cat { display: inline-flex; flex-direction: column; align-items: center; gap: 0.429rem; flex: none; min-width: 3.571rem; text-decoration: none; }
.si-cat-ico {
    position: relative;
    width: 3.143rem; height: 3.143rem;
    border-radius: 50%;
    background: rgba(241, 243, 247, 0.5);
    border: 1px solid #E8EBF0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.429rem; line-height: 1;
    transition: background-color .12s, border-color .12s;
}
.si-cat:hover .si-cat-ico { border-color: #1A56DB; }
.si-cat.is-active .si-cat-ico { background: #1A56DB; border-color: #1A56DB; }
.si-cat-label { font-size: 0.821rem; font-weight: 700; color: #5B6473; }
.si-cat.is-active .si-cat-label { color: #1A56DB; }
.si-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: #E11D2A;
    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;
}

/* 커스텀 카테고리 드롭다운 (모바일) */
.si-dropdown {
    display: none;
    position: relative;
}

.si-dropdown-toggle {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--cat-grad);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-sm);
}

.si-dropdown-toggle .bi {
    position: absolute;
    right: 14px;
    font-size: 1rem;
    transition: transform 0.18s ease;
}

.si-dropdown.is-open .si-dropdown-toggle .bi { transform: rotate(180deg); }

/* hover — 다른 버튼들과 동일하게 색 변화. 그라데이션(종목)=brightness */
.si-dropdown-toggle { transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.si-dropdown-toggle:hover { filter: brightness(0.93); }

.si-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1030;
    display: none;
    max-height: 320px;
    overflow-y: auto;
}

.si-dropdown.is-open .si-dropdown-menu { display: block; }

.si-dropdown-option {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    text-align: center;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.si-dropdown-option:hover { background: var(--bg-surface-2); }
.si-dropdown-option.is-selected { color: var(--cat-blue); font-weight: 700; }

/* 2행 리그 콤보바 — 라벨 + 아웃라인 콤보, 항상 표시 */
.si-dropdown--league { display: block; min-width: 14rem; max-width: 22rem; }
/* 리그 토글: 종목 행(그라데이션)과 위계를 두려 아웃라인(흰 배경)으로. 라벨 좌측 정렬(셰브론은 절대배치 우측). */
.si-dropdown--league .si-dropdown-toggle {
    justify-content: flex-start;
    padding-right: 2.2rem;
    background: #fff;
    border: 1px solid var(--slate-300);
    color: var(--text-primary);
    font-weight: 600;
}
.si-dropdown--league .si-dropdown-toggle .bi { color: var(--text-tertiary); }
/* 리그(아웃라인) 토글 hover — 테두리/배경 틴트(.btn-ghost 패턴과 동일) */
.si-dropdown--league .si-dropdown-toggle:hover { filter: none; background: var(--cat-hover); border-color: var(--accent); color: var(--cat-deep); }
/* 스포츠정보 모바일 리그 콤보만 라벨 중앙정렬. 셰브론은 절대배치 우측이라 좌우 대칭 패딩으로 중앙 맞춤. */
.si-league-mobile .si-dropdown--league .si-dropdown-toggle {
    justify-content: center;
    padding: 0 2.2rem;
    background: #1A56DB;                 /* 종목이 원형 바로 바뀌어, 리그 콤보를 파란 솔리드로(시안) */
    border-color: #1A56DB;
    color: #fff;
}
.si-league-mobile .si-dropdown--league .si-dropdown-toggle .bi { color: #fff; }
.si-league-mobile .si-dropdown--league .si-dropdown-toggle:hover { filter: brightness(0.93); background: #1A56DB; border-color: #1A56DB; color: #fff; }
/* 열린 리스트에서 현재 선택된 리그 — 파란 배경 + 흰 글자 강조(시안) */
.si-league-mobile .si-dropdown--league .si-dropdown-option.is-selected { background: #1A56DB; color: #fff; }

/* 드롭다운 옵션이 <a>(서버 필터링 네비게이션)라 밑줄 제거 + 세로 가운데 정렬 */
.si-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* 빈 상태 */
.si-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3.5rem 1rem;
    color: var(--text-tertiary);
    text-align: center;
}

.si-empty .bi { font-size: 2.25rem; opacity: 0.55; }
.si-empty p { margin: 0; font-size: var(--text-sm); }

/* 준비중 종목 빈 상태 카드 — '해당 종목은 준비중입니다' (Figma: 흰 카드 + 옅은 테두리 + 중앙 정렬) */
.si-prep {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 4.5rem 1rem;
    background: #fff;
    border: 1px solid var(--sb-border);
    border-radius: 1.143rem;
    text-align: center;
}
.si-prep-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-secondary); }
.si-prep-desc { margin: 0; font-size: 0.857rem; color: var(--text-tertiary); }

/* ===== Rotowire(비축구) 경기 상세 — 선발/라인업/부상 (목록은 축구와 공통 si-pro/si-leagues/si-matches 재사용) ===== */
.si-rw-starter { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem; padding: 0.35rem 0.5rem; border-radius: 0.375rem; background: rgba(26, 86, 219, 0.06); color: #1A56DB; font-size: 0.857rem; }
.si-rw-starter i { font-size: 0.929rem; }
.si-rw-starter b { color: #0F172A; font-weight: 700; }
.si-rw-players { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; color: #4B4F55; font-size: 0.893rem; }
.si-rw-pos { margin-left: 0.25rem; color: #98A0AE; font-size: 0.786rem; font-style: normal; }

/* 부상/결장 — 상세 카드 내 컴팩트 목록(좁은 카드라 표 대신 스택) */
.si-rw-injlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.si-rw-injlist li { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.5rem; border-bottom: 1px solid #F1F3F7; }
.si-rw-injlist li:last-child { border-bottom: 0; padding-bottom: 0; }
.si-rw-injname { font-weight: 600; color: #1F2430; font-size: 0.893rem; }
.si-rw-injmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: #78808D; font-size: 0.821rem; }
.si-rw-inj-status { padding: 0.05rem 0.45rem; border-radius: 0.25rem; background: rgba(225, 29, 42, 0.1); color: #E11D2A; font-size: 0.786rem; font-weight: 700; }
.si-rw-injret { color: #1A56DB; }

/* ===== 데이터 있을때 — 좌: 리그 리스트(셀렉트박스 대체) / 우: 경기 목록 카드 (시안) ===== */
.si-pro { display: flex; align-items: flex-start; gap: 4rem; }

/* 좌측 리그 리스트 */
.si-leagues { flex: 0 0 23rem; max-width: 23rem; }
.si-league-mobile { display: none; }   /* 데스크톱 숨김 — 모바일에서만 리그 콤보 노출(상단 종목 콤보와 동일 패턴) */
.si-leagues-label { padding: 0 0.286rem 0.571rem 0.643rem; font-size: 1rem; font-weight: 700; color: #5B6473; }
.si-leagues-list {
    display: flex; flex-direction: column; gap: 0.286rem;
    padding: 0.143rem 0.286rem 0.714rem;
    background: #F7F8FA; border-radius: 0.357rem;
}
.si-league-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    height: 3rem; padding: 0 0.857rem; border-radius: 0.571rem;
    color: #5B6473; font-size: 1.071rem; font-weight: 700; text-decoration: none;
}
.si-league-item:hover { background: #EEF3FF; }
.si-league-item.is-active { background: #EEF3FF; color: #1A56DB; }
.si-league-count {
    flex: none; min-width: 1.328rem; padding: 0 0.357rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.286rem; background: #F1F3F7; color: #98A0AE;
    font-size: 0.786rem; font-weight: 800; line-height: 1.45;
}
.si-league-item.is-active .si-league-count { background: #1A56DB; color: #fff; }

/* 우측 경기 목록 */
.si-matches { flex: 1; min-width: 0; }
.si-matches-note { margin: 0 0.286rem 0.571rem; text-align: right; font-size: 0.821rem; color: #78808D; }
.si-matches-card {
    background: #fff; border: 1px solid #E8EBF0;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04); border-radius: 0.857rem; overflow: hidden;
}

/* 헤더/행 공통 4열 그리드: [별] [리그] [경기(중앙)] [경기일정(우)] */
.si-matches-head,
.si-match-row {
    display: grid;
    grid-template-columns: 1.143rem 8rem minmax(0, 1fr) 10rem;
    align-items: center;
    gap: 0.571rem;
    padding: 0.857rem 1.143rem;
}
.si-matches-head {
    background: rgba(241, 243, 247, 0.6);
    border-bottom: 1px solid #E8EBF0;
    font-size: 0.857rem; font-weight: 700; color: #98A0AE;
}
.si-mh-match { text-align: center; }
.si-mh-sched { text-align: right; }

.si-match-row { border-bottom: 1px solid #F1F3F7; text-decoration: none; }
.si-match-row:last-child { border-bottom: 0; }
.si-match-row:hover { background: #F9FAFB; }
/* 상세 미제공 종목(NBA/NHL/NFL)의 비클릭 행 — 링크 어포던스 제거 */
.si-match-row--nolink { cursor: default; }
.si-match-row--nolink:hover { background: transparent; }
/* 별 — 즐겨찾기 자리표시(현재 비동작 시각 요소) */
/* 즐겨찾기 별(목록) — 행 전체가 링크라 `<span>` 이지만 실제로는 눌린다(favorite.js 가 이동을 가로챈다).
   ⚠ 그래서 커서를 pointer 로 둔다 — 안 그러면 누를 수 있다는 걸 알 방법이 없다. */
.si-match-star { color: #CBD2DC; font-size: 0.95rem; cursor: pointer; transition: color .12s ease; }
.si-match-star:hover { color: #FFA64D; }
.si-match-star.is-on, .si-match-star.is-on:hover { color: #FFA600; }
.si-mr-league { font-size: 0.964rem; font-weight: 500; color: #5B6473; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 경기명: 홈(우정렬) · vs(작은 회색) · 원정(좌정렬) — 팀명 길이와 무관하게 vs 중앙 고정 */
.si-mr-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.571rem; }
.si-mr-home, .si-mr-away { font-size: 1rem; font-weight: 700; color: #1F2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-mr-home, .si-mr-away { text-align: center; }
.si-mr-vs { font-size: 0.786rem; font-weight: 700; color: #98A0AE; }

.si-mr-sched { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.429rem; }
.si-mr-dot { width: 0.429rem; height: 0.429rem; border-radius: 50%; background: #1A56DB; flex: none; }
.si-mr-time { font-size: 0.929rem; font-weight: 600; color: #1A56DB; white-space: nowrap; }
/* 시간(HH:mm) — 라운드 배경 pill(#EFF4F8) */
.si-mr-clock { padding: 0.143rem 0.5rem; border-radius: 0.5rem; background: #EFF4F8; color: #1A56DB; font-size: 0.929rem; font-weight: 600; white-space: nowrap; }

/* PC 전용 보정(시안) — 모바일(≤767.98px)은 미변경.
   ① 팀명 정렬: 홈=우정렬·원정=좌정렬(시안). 기본 규칙은 둘 다 center라 데스크톱만 덮어씀.
   ② 경기일정: 회색 평문(#5B6473) — 시안엔 파란색·pill 배경이 없음. */
@media (min-width: 768px) {
    .si-mr-home { text-align: right; }
    .si-mr-away { text-align: left; }
    .si-mr-time { color: #5B6473; }
    .si-mr-clock { background: transparent; padding: 0; color: #5B6473; }
}

/* 모바일 — 좌우 2단을 세로 스택, 리그 리스트는 가로 스크롤 칩, 경기 행은 2줄 */
@media (max-width: 767.98px) {
    /* 세로 스택 시 교차축=가로. 데스크톱 상속값 align-items:flex-start면 경기목록(.si-matches)이
       콘텐츠 폭으로 줄어 좌우가 어긋난다 → stretch로 꽉 채운다. */
    .si-pro { flex-direction: column; gap: 1rem; align-items: stretch; }
    /* 좌측 리그 리스트(가로 스크롤 pill)는 작은 화면에서 드래그가 어색 → 숨기고 상단 리그 콤보(.si-league-mobile)로 대체 */
    .si-leagues { display: none; }
    .si-league-mobile { display: block; }
    .si-matches { width: 100%; }
    .si-matches-note { text-align: left; }
    .si-matches-head { display: none; }
    /* 하나의 카드 → 경기마다 개별 카드(한 영역씩) */
    .si-matches-card {
        background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0;
        display: flex; flex-direction: column; gap: 0.571rem;
    }
    .si-match-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "star league sched" "match match match";
        row-gap: 0.4rem;
        background: #fff;
        border: 1px solid #E8EBF0;
        border-radius: 0.857rem;
        box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    }
    .si-match-row:last-child { border-bottom: 1px solid #E8EBF0; }   /* 카드형이라 마지막도 하단 테두리 유지 */
    .si-match-star { grid-area: star; position: relative; }
    /* 터치 영역 — **아이콘은 그대로, 누를 수 있는 범위만** 넓힌다(모바일 실측 11~13px 은 손가락으로 누르기 좁다).
       ⚠⚠ **`::after` 로 넓히고 패딩·크기를 건드리지 않는다** — 실제 박스가 커지면 grid/flex 트랙이 밀려
         줄 정렬이 어긋난다. 가상요소는 레이아웃 영향이 **0** 이고, `favorite.js` 는
         `e.target.closest('[data-fav]')` 로 찾으므로 가상요소를 눌러도 부모(별)가 잡힌다.
       ⚠ 넓힌 영역이 덮는 것은 **같은 행(상세 링크)** 뿐이라 다른 버튼을 막지 않는다 —
         실측으로 확인했다(위·아래·좌·우 20px 지점에 독립 클릭 대상이 없다).
       ⚠ 36×40px 은 권장(44px)보다 작다 — 그보다 키우면 옆 칸을 눌러야 할 만큼 넓어진다.
       ⚠ 스포츠중계(`broadcast.css` 의 `.bc-c-fav::after`)와 **같은 값**이다 — 한쪽을 고치면 다른 쪽도. */
    .si-match-star::after {
        content: '';
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 3rem;        /* 36px (모바일 루트 12px 기준) */
        height: 3.333rem;   /* 40px */
    }
    .si-mr-league { grid-area: league; }
    .si-mr-sched { grid-area: sched; }
    .si-mr-match { grid-area: match; padding-top: 0.5rem; border-top: 1px solid #E8EBF0; }   /* 상/하 내용 사이 구분선 — 카드 패딩 안쪽이라 좌우 살짝 인셋(중계리스트와 동일) */
}

/* ===== 경기 상세 — 라인업 미발표 빈 상태 (시안) ===== */
/* 목록으로 (상단) */
/* 부모 `.sb`가 세로 flex(align-items:stretch 기본)라 inline-flex여도 가로 100%로 늘어난다
   → 클릭영역이 줄 전체가 되어 빈 공간을 눌러도 이동한다. align-self로 내용 폭만 차지하게 고정. */
.si-dh-back {
    display: inline-flex; align-items: center; gap: 0.429rem;
    align-self: flex-start;
    color: #5B6473; font-size: 0.964rem; font-weight: 700; text-decoration: none;
}
.si-dh-back .bi { font-size: 1.1rem; }
.si-dh-back:hover { color: var(--cat-deep); }

/* 경기 요약 카드 */
.si-dh-card {
    background: #fff; border: 1px solid #E8EBF0;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04); border-radius: 1.143rem;
    padding: 0.643rem 1.393rem;
}
.si-dh-top {
    display: flex; align-items: center; justify-content: space-between; gap: 0.571rem;
    min-height: 2.286rem; padding-bottom: 0.857rem; border-bottom: 1px solid #F1F3F7;
}
.si-dh-updated { font-size: 0.821rem; color: #98A0AE; }
/* 관심 경기 — 즐겨찾기 자리표시(현재 비동작) */
.si-dh-fav {
    display: inline-flex; align-items: center; gap: 0.429rem;
    height: 2rem; padding: 0 0.857rem;
    border: 1px solid rgba(26, 86, 219, 0.4); border-radius: 0.571rem;
    background: #fff; color: #1A56DB; font-size: 0.893rem; font-weight: 700;
}
.si-dh-fav { cursor: pointer; }   /* 2026-08-18 실제 토글이 됐다(favorite.js) — 누를 수 있음을 커서로 알린다 */
.si-dh-fav:hover { background: #EEF3FF; }

.si-dh-info { display: flex; flex-direction: column; align-items: center; gap: 0.857rem; padding: 0.857rem 0; }
.si-dh-metarow { display: flex; align-items: center; justify-content: center; gap: 0.571rem; }
.si-dh-league {
    padding-left: 0.5rem; border-left: 0.286rem solid #98A0AE;   /* 회색 세로 바 + 진한 회색 텍스트 */
    color: #3A4250; font-size: 1.143rem; font-weight: 700; line-height: 1.2;
}
/* 경기일시 — 파란 텍스트, 폰트는 팀명(.si-dh-team)과 동일. 시간부분은 라운드 pill(#EFF4F8) */
.si-dh-date { color: #1A56DB; font-size: 1.143rem; font-weight: 800; }
.si-dh-clock {
    padding: 0.143rem 0.5rem; border-radius: 0.5rem;
    background: #EFF4F8; color: #1A56DB; font-size: 1rem; font-weight: 800;
}
/* VS를 영역 정중앙에 고정 — 홈(우정렬) · VS(중앙) · 원정(좌정렬) 3열 그리드 */
.si-dh-teams {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.571rem; width: 100%;
    background: #F5F7FA; border: 1px solid #E8EBF0; border-radius: 0.571rem; padding: 0.857rem 0.714rem;   /* 회색 bg + 테두리 박스 */
}
.si-dh-team { font-size: 1.143rem; font-weight: 800; color: #1F2430; text-align: center; }   /* 각 영역 센터정렬(vs에 안 붙임) */
.si-dh-vs { color: #98A0AE; font-size: 0.857rem; font-weight: 800; }   /* vs 자체 bg 제거(팀 박스 위 평문) */
.si-dh-note { margin: 0; font-size: 0.821rem; color: #98A0AE; text-align: center; }

/* ===== 축구(Pro) 요약 카드 시안 보정(.si-dh-card--pro) — RwDetail(비축구)은 위 기본 룩 유지, 여기서만 덮는다 =====
   시안: 리그=파란 배지 / 일시=회색 평문(파란·pill 아님) / 팀=박스 없이 중앙 + VS 회색 pill / 상태=배지(확정 파랑·그 외 회색). */
.si-dh-card--pro .si-dh-metarow { flex-wrap: wrap; }
/* 리그 배지(파란) — 기존 좌측 세로바(.si-dh-league) 대체 */
.si-dh-card--pro .si-dh-league-badge {
    padding: 0.143rem 0.429rem; border-radius: 0.286rem;
    background: #EEF3FF; color: #1A56DB; font-size: 0.857rem; font-weight: 800;
}
/* 일시 — 회색 평문 */
.si-dh-card--pro .si-dh-date { color: #98A0AE; font-size: 0.857rem; font-weight: 600; }
/* 팀 — 박스/테두리 제거, 중앙 정렬 flex */
/* 팀명 줄 — **VS를 영역 정중앙에 고정**한다(기본 룩과 동일한 3열 그리드 유지).
   flex+justify-content:center로 두면 '홈+VS+원정' 묶음이 통째로 가운데 정렬돼,
   팀명 길이가 다르면 VS가 좌우로 밀린다. 박스 룩(회색bg·테두리)만 벗기고 그리드는 남긴다. */
.si-dh-card--pro .si-dh-teams {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.143rem;
    background: transparent; border: 0; border-radius: 0; padding: 0;
}
/* 홈=우정렬 · 원정=좌정렬 → 두 팀명이 VS에 붙고, VS는 컨테이너 정중앙에 남는다. */
.si-dh-card--pro .si-dh-teams > .si-dh-team:first-child { justify-self: end; text-align: right; }
.si-dh-card--pro .si-dh-teams > .si-dh-team:last-child { justify-self: start; text-align: left; }
/* VS — 회색 pill */
.si-dh-card--pro .si-dh-vs {
    padding: 0.235rem 0.714rem; border-radius: 0.429rem;
    background: #F1F3F7; color: #98A0AE; font-size: 0.857rem; font-weight: 800;
}
/* 상태 배지 — 노트 위. 확정=파랑, 예상/미발표=회색 */
.si-dh-card--pro .si-dh-status {
    padding: 0.143rem 0.5rem; border-radius: 0.429rem;
    background: #F1F3F7; color: #98A0AE; font-size: 0.75rem; font-weight: 800;
}
.si-dh-card--pro .si-dh-status.is-blue { background: #EEF3FF; color: #1A56DB; }

/* 양팀 예상 라인업 준비중 */
.si-dh-empties { display: flex; align-items: stretch; gap: 1.571rem; }
.si-dh-empty {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.521rem;
    padding: 4.536rem 1rem;
    background: #fff; border: 1px solid #E8EBF0; border-radius: 1.143rem;
    text-align: center;
}
.si-dh-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.429rem; height: 3.429rem; border-radius: 50%;
    background: #F1F3F7; color: #98A0AE; font-size: 1.6rem;
}
.si-dh-empty-title { font-size: 1rem; font-weight: 600; color: #5B6473; }
.si-dh-empty-desc { margin: 0; font-size: 0.857rem; color: #98A0AE; }

@media (max-width: 767.98px) {
    .si-dh-empties { flex-direction: column; gap: 1rem; }
    .si-dh-empty { padding: 3rem 1rem; }
}

/* ===== 경기 상세 — 미확정(결장·복귀예정·주전경쟁) 카드 (시안) ===== */
.si-uc-grid { display: flex; align-items: flex-start; gap: 1.143rem; }
.si-uc-card {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1rem;
    padding: 1.143rem;
    background: #fff; border: 1px solid #E8EBF0;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04); border-radius: 1.143rem;
}
/* 카드 헤더 — 팀명 + 홈/원정 배지 + 라인업 미발표 태그(우측) */
.si-uc-head { display: flex; align-items: center; gap: 0.571rem; }
.si-uc-team { font-size: 1.071rem; font-weight: 800; color: #1F2430; }
.si-uc-side {
    padding: 0.107rem 0.429rem; border-radius: 0.286rem;
    background: #EEF3FF; color: #1A56DB; font-size: 0.75rem; font-weight: 700;
}
.si-uc-tag {
    margin-left: auto;
    padding: 0.107rem 0.429rem; border-radius: 0.429rem;
    background: #F1F3F7; color: #98A0AE; font-size: 0.75rem; font-weight: 700;
}

/* 섹션(결장/복귀예정/주전경쟁) */
.si-uc-sec { display: flex; flex-direction: column; gap: 0.429rem; }
.si-uc-sec-head { display: flex; align-items: center; }
.si-uc-sec-title { font-size: 0.857rem; font-weight: 700; color: #5B6473; }
.si-uc-sec-title b { color: #98A0AE; font-weight: 700; }
.si-uc-more {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    font-size: 0.714rem; font-weight: 700; color: #555;
}
.si-uc-more:hover { color: #1A56DB; }

.si-uc-list { display: flex; flex-direction: column; gap: 0.429rem; }
.si-uc-row {
    display: flex; align-items: center; gap: 0.429rem;
    padding: 0.571rem 0.714rem;
    background: rgba(244, 246, 249, 0.4); border: 1px solid #E8EBF0; border-radius: 0.571rem;
}
.si-uc-row.is-hidden { display: none; }
.si-uc-pname { font-size: 0.893rem; font-weight: 700; color: #1F2430; white-space: nowrap; }
.si-uc-pos { font-size: 0.786rem; font-weight: 400; color: #98A0AE; }
.si-uc-key {
    padding: 0.143rem 0.286rem; border-radius: 0.286rem;
    background: #EEF3FF; color: #1A56DB; font-size: 0.679rem; font-weight: 800;
}
/* 영향 배지 — 기본(매우높음·높음)=빨강, .si-uc-impact--mid(보통/낮음/미미)=회색 */
.si-uc-impact {
    padding: 0.143rem 0.429rem; border-radius: 0.286rem;
    background: rgba(225, 29, 42, 0.1); color: #E11D2A; font-size: 0.714rem; font-weight: 800;
}
.si-uc-impact--mid { background: #F1F3F7; color: #5B6473; }
/* 결장 사유 배지(부상/출전정지 등) — 회색 pill */
.si-uc-reason {
    padding: 0.143rem 0.429rem; border-radius: 0.286rem;
    background: #F1F3F7; color: #5B6473; font-size: 0.714rem; font-weight: 700;
}
/* 우측 통계 텍스트 — 'N경기 연속 · N일 결장' / 복귀 */
.si-uc-stat { margin-left: auto; font-size: 0.786rem; color: #5B6473; white-space: nowrap; text-align: right; }
.si-uc-return { color: #1A56DB; font-weight: 700; }

/* 주전 경쟁 — 포지션 라벨 + 후보별 확률 바 */
.si-uc-battle {
    display: flex; flex-direction: column; gap: 0.429rem;
    padding: 0.571rem 0.714rem;
    background: rgba(244, 246, 249, 0.4); border: 1px solid #E8EBF0; border-radius: 0.571rem;
}
.si-uc-battle-pos { font-size: 0.821rem; font-weight: 700; color: #5B6473; }
.si-uc-bar-row { display: flex; align-items: center; gap: 0.571rem; }
.si-uc-bar-name { flex: 0 0 6.857rem; font-size: 0.821rem; font-weight: 600; color: #1F2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-uc-bar { flex: 1; min-width: 0; height: 0.571rem; border-radius: 999px; background: #F1F3F7; overflow: hidden; }
.si-uc-bar-fill { display: block; height: 100%; border-radius: 999px; background: #1A56DB; }
.si-uc-bar-pct { flex: 0 0 auto; min-width: 2.286rem; text-align: right; font-size: 0.786rem; font-weight: 800; color: #1A56DB; }

@media (max-width: 767.98px) {
    .si-uc-grid { flex-direction: column; align-items: stretch; gap: 1rem; }
    /* 좁은 폭: 행을 2줄로(통계가 아래로) */
    .si-uc-row { flex-wrap: wrap; }
    .si-uc-stat { margin-left: 0; flex-basis: 100%; text-align: left; }
    .si-uc-bar-name { flex-basis: 5rem; }
}

/* ===== 경기 상세 — 확정 라인업(피치 + 벤치) (시안) ===== */
/* 카드 헤더 보강 — 포메이션 배지 / 확정 태그 / 관심경기 채움 */
.si-uc-formation { font-size: 0.821rem; font-weight: 700; color: #5B6473; }
.si-uc-tag.is-confirmed { background: #EEF3FF; color: #1A56DB; }
.si-dh-fav.is-on { border-color: #1A56DB; }
.si-dh-fav.is-on .bi { color: #1A56DB; }
.si-uc-head .si-uc-formation { margin-left: 0.286rem; }

/* 포메이션 피치 — 다크 그라데이션 필드, 위(공격)→아래(GK) 행 배치 */
.si-pitch {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 1.143rem 0.857rem; min-height: 20.714rem;   /* 5행(시안 290px) 기준 높이 */
    background: linear-gradient(180deg, #16335F 0%, #0C1D3C 100%);
    border-radius: 0.857rem; overflow: hidden;
}
/* 필드 라인 — 외곽선 + 중앙선 + 센터서클(장식).
   시안: 외곽선 = 사방 12px 안쪽 · 1px rgba(255,255,255,.12) · radius 8px,
        중앙선 = 외곽선과 같은 좌우 범위의 1px 가로선.
   ::before/::after 두 개뿐이라(센터서클이 ::after) **외곽선 박스의 배경으로 중앙선을 함께 그린다**
   (좌우 범위가 동일해 한 요소로 표현 가능 — 요소 추가 불필요). */
.si-pitch::before {
    content: ""; position: absolute; inset: 0.857rem;   /* 12px */
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.571rem;   /* 8px */
    background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) no-repeat;
    background-size: 100% 1px; background-position: 0 50%;   /* = 중앙 가로선 */
}
.si-pitch::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 3.429rem; height: 3.429rem; transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%;
}
/* 행은 자연 높이 + 컨테이너 space-between → 맨 윗행(공격)·맨 아랫행(GK)이 항상 위/아래 끝에 붙음.
   행 수(4행/5행)와 무관하게 GK가 바닥에 정렬되고, 남는 공간은 행 사이로 분배(밑이 뜨지 않음). */
.si-pitch-row { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: flex-start; gap: 0.25rem; }
/* 선수는 행 내에서 동일 폭(flex:1) → 가운데 열(CF·DM·GK)이 정확히 센터 정렬, 컬럼도 깔끔히 맞음 */
.si-pitch-player { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.143rem; }
.si-pitch-dot {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.286rem; height: 2.286rem; border-radius: 50%;
    background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    color: #0A1838; font-size: 0.714rem; font-weight: 800;
}
/* 이름은 말줄임 없이 전체 표시 — 길면 셀 폭 안에서 줄바꿈 */
.si-pitch-name {
    font-size: 0.679rem; font-weight: 600; color: rgba(255, 255, 255, 0.9);
    text-align: center; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere;
}
/* 결번 슬롯(피드 누락) — 열 폭은 유지(flex:1)하되 점선 빈 원으로 '자리 있음'만 표시 */
.si-pitch-dot--empty { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.28); box-shadow: none; }

/* 벤치 칩 */
.si-bench { display: flex; flex-wrap: wrap; gap: 0.429rem; }
.si-bench-chip {
    display: inline-flex; align-items: center; gap: 0.357rem;
    padding: 0.286rem 0.571rem; border-radius: 0.429rem;
    background: rgba(244, 246, 249, 0.5); border: 1px solid #E8EBF0;
    font-size: 0.821rem; font-weight: 600; color: #5B6473;
}
.si-bench-chip i { font-style: normal; font-size: 0.75rem; color: #98A0AE; }

/* 결장/벤치 없음 placeholder */
.si-uc-empty {
    display: flex; align-items: center; justify-content: center;
    padding: 1.286rem 1rem; border-radius: 0.571rem;
    background: rgba(244, 246, 249, 0.5);
    font-size: 0.857rem; font-weight: 600; color: #98A0AE;
}

/* 경기 상세 '목록으로' 버튼은 공통 .btn .btn-ghost(site.css) 사용 */


/* 모바일 (≤767px) — site.css 모바일 블록에서 이동(기본 규칙 뒤에 와야 캐스케이드 정상) */
@media (max-width: 767.98px) {
    /* 카테고리: 데스크톱 pill 숨김 → 원형 카테고리 바 + 리그 콤보 */
    .si-dropdown { display: block; }
    .si-menubar { display: none; }
    .si-catbar { display: flex; }
    /* 리그 콤보: 라벨 옆에서 전체폭 */
    .si-dropdown--league { flex: 1; min-width: 0; max-width: none; }
}