/* 결장정보 (/Post/Absence) — Figma 시안 전면 재퍼블리싱. 뷰의 @section Styles로 로드. 공통은 site.css */
/* 클래스 prefix: ab- (absence). px 시안값은 rem으로 환산(루트 14px 기준 → 모바일 75% 축소 시 자동 비례). 보더 1px만 px 유지. */

/* ===================== 페이지 전용 토큰 ===================== */
.ab {
    --ab-blue: #1A56DB;          /* 액션/활성 파랑 */
    --ab-blue-deep: #0034CE;     /* SEO 세로바 네이비블루 */
    --ab-red: #E11D2A;           /* 부상/스쿼드 제외 빨강 */
    --ab-amber: #FFA600;         /* 별점 */
    --ab-text: #1F2430;          /* 강한 본문/제목 */
    --ab-text-dim: #5B6473;      /* 보조 텍스트 */
    --ab-text-mute: #98A0AE;     /* 흐린 라벨/시간 */
    --ab-border: #E8EBF0;        /* 카드/버튼 보더 */
    --ab-row-line: #F1F3F7;      /* 데이터 행 구분선 */
    --ab-badge-bg: #F1F3F7;      /* 회색 pill 배경 */
    --ab-card-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);

    display: flex;
    flex-direction: column;
    gap: 1.143rem;               /* 16px */
}

/* ⚠ 이 화면은 그룹 접기·검색 필터를 **`hidden` 속성**으로 다룬다. 아래 규칙들이 `display` 를 직접 지정해서
   브라우저 기본 `[hidden]{display:none}` 을 이겨 버리므로(사이트찾기에서 겪은 함정) 여기서 못 박는다.
   범위를 `.ab` 안으로 한정한다 — 전역에 걸면 hidden 을 단 채 보이도록 만든 다른 화면이 깨진다. */
.ab [hidden] { display: none !important; }

/* 아이콘 굵기 — **`::before` 에 걸어야 하고 `!important` 가 필요하다.**
   Bootstrap Icons 가 `.bi::before { font-weight: normal !important }` 로 못 박아 두기 때문에,
   `<i>` 요소에 `font-weight` 를 줘도 **글리프를 그리는 의사요소에는 닿지 않는다**
   (computed 를 요소에서 읽으면 700 으로 보이지만 `::before` 는 400 이라 화면은 그대로 가늘다 — 2026-08-18 확인).
   굵기 배리언트는 없지만 **브라우저 합성 볼드**로 실제로 굵어진다(캔버스 잉크량 126 → 186, +47.6%).
   ⚠ 벤더 `!important` 를 이기려면 이쪽도 `!important` 여야 한다. absence.css 가 bootstrap-icons 보다 뒤에 로드돼
     같은 특이도(0,1,1)면 이 규칙이 이긴다. 700 이상은 더 굵어지지 않는다(합성 볼드는 on/off). */
.ab-group-chev::before,
.ab-match-chev::before,
.ab-select .bi::before,
.ab-toolbar-note .bi::before { font-weight: 700 !important; }

/* 공통 파랑 세로바 */
.ab-bar {
    display: inline-block;
    width: 0.286rem;             /* 4px */
    height: 1.429rem;            /* 20px */
    border-radius: 999px;
    background: var(--ab-blue);
    flex: none;
}
.ab-bar--navy { background: var(--ab-blue-deep); height: 1.143rem; }

/* ===================== 1. 섹션 타이틀 ===================== */
/* 공통 _PageTitle을 .ab(세로 flex gap 16px) 안에서 쓸 때: 박스 하단 여백 제거(.ab gap이 간격 담당) */
.ab .page-title-box { margin-bottom: 0; }
/* ===================== 2. 종목 필터 칩 ===================== */
.ab-sports {
    display: flex;
    gap: 0.571rem;
    overflow-x: auto;
    padding-bottom: 0.214rem;
    -webkit-overflow-scrolling: touch;
}
.ab-sport {
    display: inline-flex;
    align-items: center;
    gap: 0.357rem;
    flex: none;
    height: 2.429rem;            /* 34px */
    padding: 0 1.071rem;
    border-radius: 999px;
    border: 1px solid var(--ab-border);
    background: #fff;
    color: var(--ab-text-dim);
    font-size: 0.929rem;         /* 13px */
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.ab-sport.is-active {
    background: var(--ab-blue);
    border-color: var(--ab-blue);
    color: #fff;
}
.ab-sport-soon {
    font-size: 0.714rem;         /* 10px */
    font-weight: 600;
    color: var(--ab-text-mute);
    opacity: .7;
}

/* ===================== 3. 툴바 ===================== */
.ab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.857rem;
    flex-wrap: wrap;
}
/* 좌측: 전체분류 드롭다운 + 안내문 */
.ab-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    flex-wrap: wrap;
    min-width: 0;
}
/* 검색(시안 267×34) — 서버를 거치지 않는 **화면 필터**라 form 이 아니다(뷰 인라인 스크립트가 처리). */
.ab-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 12rem;
    max-width: 19.071rem;        /* 267px */
    min-width: 0;
}
.ab-search-ic {
    position: absolute;
    left: 0.714rem;              /* 10px */
    font-size: 1.143rem;         /* 16px */
    color: var(--ab-text-mute);
    pointer-events: none;
}
.ab-search-input {
    width: 100%;
    height: 2.429rem;            /* 34px */
    padding: 0 0.857rem 0 2.286rem;   /* 좌 32px = 돋보기 자리 */
    border: 1px solid var(--ab-border);
    border-radius: 0.571rem;     /* 8px */
    background: #fff;
    color: var(--ab-text);
    font-size: 0.929rem;         /* 13px */
}
.ab-search-input::placeholder { color: rgba(31, 36, 48, 0.5); }
.ab-search-input:focus { outline: none; border-color: var(--ab-blue); }
/* 브라우저 기본 X 버튼 제거 — 위치가 엔진마다 달라 돋보기와 겹친다 */
.ab-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ab-toolbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* 전체 분류 드롭다운(정적) */
.ab-select {
    display: inline-flex;
    align-items: center;
    gap: 0.643rem;
    height: 2.571rem;            /* 36px */
    padding: 0 0.929rem;
    border-radius: 0.571rem;     /* 8px */
    border: 1px solid var(--ab-border);
    background: #fff;
    color: var(--ab-text-dim);
    font-size: 0.929rem;
    font-weight: 600;
    cursor: pointer;
}
/* 시안 PC 는 #444950(토큰에 없는 값이라 리터럴), 모바일은 #5B6473 + stroke 2px 라 더 굵고 진하다. */
.ab-select .bi { font-size: 0.857rem; color: #444950; font-weight: 700; }

.ab-toolbar-note {
    display: inline-flex;
    align-items: center;
    gap: 0.357rem;
    font-size: 0.893rem;         /* 12.5px */
    font-weight: 700;
    color: var(--ab-text-mute);  /* #98A0AE — 시안 회색 */
    white-space: nowrap;
}
.ab-toolbar-note .bi {           /* 아이콘(파랑) — PC 는 문구 중간의 체크 */
    color: var(--ab-blue);
    font-size: 1rem;
    font-weight: 900;
}
.ab-note-info { display: none; }   /* 정보 아이콘은 모바일 전용 */

.ab-pos-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.357rem;
    height: 2.571rem;
    padding: 0 0.929rem;
    border-radius: 0.571rem;
    border: 1px solid var(--ab-border);
    background: #fff;
    color: var(--ab-text-dim);
    font-size: 0.857rem;
    font-weight: 600;
    cursor: pointer;
}
.ab-pos-btn .bi { color: var(--ab-text-dim); }   /* 시안 #5B6473 — 파랑이 아니다 */
.ab-pos-btn:hover { border-color: var(--ab-blue); }

/* ===================== 4. 리그 그룹 ===================== */
.ab-groups { display: flex; flex-direction: column; gap: 1.286rem; }

.ab-group {
    border: 1px solid var(--ab-border);
    border-radius: 1.143rem;     /* 16px */
    background: rgba(244, 246, 249, 0.5);
    box-shadow: var(--ab-card-shadow);
    overflow: hidden;
}

/* 그룹 헤더 바 */
.ab-group-head {
    display: flex;
    align-items: center;
    gap: 0.643rem;
    width: 100%;
    padding: 0.857rem 1.143rem;  /* 12 16 */
    border: 0;
    border-bottom: 1px solid var(--ab-border);
    background: #fff;
    text-align: left;
    cursor: pointer;
}
/* 접기 화살표 — **펼침 ∧ / 접힘 ∨**(일반 관례).
   ⚠ 사이트찾기 필터 아코디언은 이와 **반대 방향**이다(그 시안이 그렇다). 규칙을 옮겨 쓰지 말 것. */
.ab-group-chev {
    margin-left: auto;
    flex: none;
    font-size: 0.857rem;
    /* 굵기는 이 요소가 아니라 **`::before` 규칙**(파일 상단)이 담당한다 — Bootstrap Icons 의 `!important` 때문. */
    color: var(--ab-text-dim);
    transition: transform .18s ease;
}
.ab-group-head[aria-expanded="false"] .ab-group-chev { transform: rotate(180deg); }
.ab-group-name {
    font-size: 1.214rem;         /* 17px */
    font-weight: 900;
    letter-spacing: -0.025em;    /* -0.425px */
    color: var(--ab-text);
}
.ab-group-count {
    display: inline-flex;
    align-items: center;
    height: 1.571rem;
    padding: 0 0.643rem;
    border-radius: 999px;
    background: var(--ab-badge-bg);
    color: var(--ab-text-dim);
    font-size: 0.857rem;         /* 12px */
    font-weight: 700;
}
/* 타이틀바: 이미지가 있으면 배경 이미지(인라인 style) + 흰 글자, 없으면 흰 배경(기본) */
.ab-group-head--img {
    background-size: cover;
    background-position: center;
    border-bottom-color: transparent;
}
.ab-group-head--img .ab-group-name { color: #fff; }
.ab-group-head--img .ab-group-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.ab-group-head--img .ab-group-chev { color: #fff; }

/* 그룹 바디 */
.ab-group-body {
    display: flex;
    flex-direction: column;
    gap: 0.857rem;
    padding: 1.143rem;           /* 16 */
}

/* ── 리그 서브카드 ── */
.ab-league {
    border: 1px solid var(--ab-border);
    border-radius: 0.571rem;     /* 8px */
    background: #fff;
    overflow: hidden;
}
.ab-league-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.571rem 1rem;      /* 8 14 */
    background: rgba(238, 243, 255, 0.6);
    border-bottom: 1px solid var(--ab-border);
}
.ab-league-name {
    font-size: 0.964rem;         /* 13.5px */
    font-weight: 700;
    color: var(--ab-blue);
}
.ab-league-name--strong { font-weight: 900; }
.ab-league-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.143rem 0.429rem;
    border-radius: 0.286rem;     /* 4px */
    background: rgba(255, 255, 255, 0.7);
    color: rgba(26, 86, 219, 0.8);
    font-size: 0.714rem;         /* 10px */
    font-weight: 700;
}
.ab-league-count {
    margin-left: auto;
    font-size: 0.821rem;         /* 11.5px */
    color: rgba(26, 86, 219, 0.6);
    white-space: nowrap;
}

/* ── 경기 행 (토글 버튼) ── */
.ab-match {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    width: 100%;
    padding: 0.857rem 1rem;      /* 12 14 */
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--ab-row-line);
    text-align: left;
    cursor: pointer;
}
.ab-match:last-child { border-bottom: 0; }
.ab-match:hover { background: rgba(238, 243, 255, 0.35); }

.ab-match-time {
    flex: none;
    width: 5.5rem;
    font-size: 0.893rem;         /* 12.5px */
    color: var(--ab-text-mute);
    white-space: nowrap;
}
/* 양 팀 영역 */
.ab-match-side {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    flex: 1 1 0;
    min-width: 0;
}
.ab-match-side--home { justify-content: flex-end; }
.ab-match-side--away { justify-content: flex-start; }
/* 가운데: 결장수 + 펼침 화살표 */
.ab-match-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.357rem;
    flex: none;
    min-width: 5.5rem;
}
/* 우측: 라인업 확정 = `✓확정`(파랑) / 미확정 = `예상`(회색). 아이콘만 있던 걸 시안대로 텍스트까지 낸다.
   min-width 로 두 상태의 폭을 맞춰 둔다 — 안 그러면 확정/미확정이 섞인 목록에서 팀명 끝선이 들쭉날쭉해진다. */
.ab-match-confirm {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.143rem;
    min-width: 3.143rem;         /* 44px */
    color: var(--ab-blue);
    font-size: 0.786rem;         /* 11px */
    font-weight: 800;
    white-space: nowrap;
}
.ab-match-confirm .bi { font-size: 1rem; font-weight: 900; }
.ab-match-confirm--soon { color: var(--ab-text-mute); font-weight: 600; }
/* 팀 로고 — 실제 크레스트 없이 방패 아이콘 플레이스홀더 */
.ab-team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.286rem; height: 1.286rem;   /* 18px */
    flex: none;
    color: #aab2c0;
    font-size: 1.143rem;                 /* 16px */
}
.ab-team-logo .bi { line-height: 1; }
/* 실제 팀 로고 이미지 — 로고칸에 꽉 차게(비율 유지). 로드 실패 시 JS가 숨기고 방패 아이콘 노출 */
.ab-team-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ab-team-name {
    font-size: 1rem;             /* 14px */
    font-weight: 700;
    color: var(--ab-text);
    max-width: 8rem;
    min-width: 0;                /* flex 내 축소 허용 → 좁은 카드에서도 ... 처리 */
}
.ab-team-out {
    flex: none;
    font-size: 0.857rem;         /* 12px */
    font-weight: 700;
    color: var(--ab-blue);
    white-space: nowrap;
}
.ab-match-chev {
    flex: none;
    /* 시안은 PC·모바일 모두 **파랑**(#1A56DB)이다 — 같은 줄의 '결장 N'(PC)·시간(모바일)과 같은 색.
       굵기도 stroke 도형이라 두꺼워서, 아이콘 폰트에는 합성 볼드로 맞춘다(.ab-group-chev 주석 참조). */
    color: var(--ab-blue);
    font-size: 0.786rem;
    font-weight: 700;
    transition: transform .18s ease;
}
.ab-match.is-open .ab-match-chev,
.ab-match[aria-expanded="true"] .ab-match-chev { transform: rotate(180deg); }

/* ── 펼침 패널 ── */
.ab-expand {
    display: none;
    padding: 0.286rem 1rem 1rem; /* 4 14 14 — 시안 */
    background: rgba(244, 246, 249, 0.6);
    border-bottom: 1px solid var(--ab-row-line);
}
.ab-expand:last-child { border-bottom: 0; }
.ab-expand.is-open { display: block; }

/* ── 펼침 패널 안: 좌=홈 / 우=원정 팀 카드 2분할(2026-08-13 시안 개정) ──
   이전엔 양 팀 결장자를 한 리스트에 섞어 5열 그리드 한 줄씩 냈다. 지금은 서비스가 팀별로 나눠 내려보낸다. */
.ab-teams { display: flex; align-items: stretch; gap: 0.714rem; }   /* 10px */
.ab-team-card {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--ab-border);
    border-radius: 0.571rem;     /* 8px */
    background: #fff;
    overflow: hidden;
}
.ab-team-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.571rem 0.857rem;  /* 8 12 */
    background: rgba(244, 246, 249, 0.7);
    border-bottom: 1px solid var(--ab-border);
}
.ab-team-card-name {
    font-size: 0.929rem;         /* 13px */
    font-weight: 700;
    color: var(--ab-text);
    min-width: 0;
}
.ab-team-card-out {
    margin-left: auto;
    flex: none;
    padding: 0.143rem 0.429rem;
    border-radius: 999px;
    background: rgba(225, 29, 42, 0.1);
    color: var(--ab-red);
    font-size: 0.786rem;         /* 11px */
    font-weight: 800;
    white-space: nowrap;
}
/* 결장 0인 팀 — 카드를 비우지 않고 문구를 넣어 좌우 높이를 맞춘다 */
.ab-team-card-empty {
    padding: 1.714rem 0.857rem;
    text-align: center;
    font-size: 1rem;             /* 14px */
    color: var(--ab-text-mute);
}

.ab-out-list { display: flex; flex-direction: column; }

/* 선수 1명 = **그리드 4조각**(id · stats · cause · season).
   PC 2행 / 모바일 3행으로 **배치만 다르다** — 그래서 행 <div> 로 묶지 않고 grid-template-areas 로 가른다.
     PC     : [id ....... stats] / [cause ..... season]
     모바일 : [id .............] / [cause ...........] / [stats ... season]
   행으로 묶으면 통계가 PC 는 1행·모바일은 3행이라 마크업이 두 벌이 된다. */
.ab-out-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "id    stats"
        "cause season";
    align-items: center;
    column-gap: 0.429rem;
    row-gap: 0.286rem;
    padding: 0.714rem 0.857rem;  /* 10 12 */
    border-bottom: 1px solid var(--ab-row-line);
}
.ab-out-item:last-child { border-bottom: 0; }
.ab-out-id { grid-area: id; display: flex; align-items: center; gap: 0.429rem; min-width: 0; }
.ab-out-cause { grid-area: cause; display: flex; align-items: center; gap: 0.429rem; min-width: 0; }
.ab-out-stats { grid-area: stats; }
.ab-out-season { grid-area: season; }

/* 포지션 — 시안에서 회색 pill 배지가 됐다(예전엔 맨 텍스트) */
.ab-out-pos {
    flex: none;
    padding: 0.143rem 0.429rem;
    border-radius: 0.286rem;     /* 4px */
    background: var(--ab-badge-bg);
    color: var(--ab-text-dim);
    font-size: 0.786rem;         /* 11px */
    font-weight: 700;
    white-space: nowrap;
}
.ab-out-player {
    font-size: 0.929rem;         /* 13px */
    font-weight: 700;
    color: var(--ab-text);
    min-width: 0;
    flex: 0 1 auto;              /* 길면 이 칸만 줄며 ... 처리(별점·통계는 고정) */
}
/* 중요도 별점 — **이름 바로 옆에 붙는다**(시안 Frame 5464 = 포지션 + 이름 + 별점 한 묶음).
   ⚠ `margin-left:auto` 를 여기 걸면 안 된다 — 별점이 우측 통계 옆으로 날아가 이름과 떨어진다.
   ⚠ **시안 개정으로 금색 → 파랑**(채움 #1A56DB / 빈 #E8EBF0). --ab-amber 로 되돌리지 말 것. */
.ab-out-stars {
    display: inline-flex;
    gap: 0.071rem;
    font-size: 0.929rem;
    color: var(--ab-border);
    flex: none;
}
.ab-out-stars .is-on { color: var(--ab-blue); }
/* 인라인 통계(출전·골·도움) — 1행에서 **우측 끝으로 미는 건 이쪽**이다. current_season 실데이터.
   시안은 이미지 아이콘이나 에셋 미수령이라 이모지 유지. */
.ab-out-stats { display: inline-flex; align-items: center; gap: 0.429rem; flex: none; }
.ab-out-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.214rem;
    font-size: 0.893rem;         /* 12.5px */
    color: var(--ab-text-dim);
    white-space: nowrap;
}

/* 상태 배지.
   ⚠ 시안은 부상(빨강)·출전 불투명(주황)·복귀(파랑) **3색**인데 CatKind 가 excl/doubt 2종뿐이라 다 낼 수 없다.
     CatText 문자열로 색을 고르면 사전(sponet_phrase) 문구가 바뀌는 순간 색이 죽으므로 쓰지 않는다.
     3색이 필요하면 missing_type 원문 → CatKind 매핑을 늘려야 한다(별건). */
.ab-out-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.143rem 0.429rem;
    border-radius: 0.429rem;     /* 6px */
    font-size: 0.786rem;         /* 11px */
    font-weight: 800;
    white-space: nowrap;
}
.ab-out-badge--excl { background: rgba(225, 29, 42, 0.1); color: var(--ab-red); }
.ab-out-badge--doubt { background: rgba(217, 140, 26, 0.1); color: #D98C1A; }
.ab-out-badge--injury { background: rgba(232, 77, 61, 0.1); color: #E84D3D; }
/* '핵심' 배지 — **요청으로 일단 숨김**(2026-08-13). 시안에 없는 항목이라 노출을 보류한 것이고 데이터·마크업은 그대로다.
   되살리려면 아래 display 한 줄만 지우면 된다. (핵심 여부는 시즌 정보 모달의 '핵심 선수' 표기로 계속 확인 가능.) */
.ab-out-badge--key { display: none; background: rgba(225, 29, 42, 0.1); color: var(--ab-red); }

.ab-out-reason {
    font-size: 0.857rem;         /* 12px */
    color: var(--ab-text-dim);
    min-width: 0;
    flex: 0 1 auto;
}

/* 시즌 정보 버튼 — 시안은 회색 보더 + 파란 글자(예전엔 파란 보더) */
.ab-out-season {
    justify-self: end;
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 1.571rem;            /* 22px */
    padding: 0 0.571rem;
    border-radius: 0.429rem;     /* 6px */
    border: 1px solid var(--ab-border);
    background: #fff;
    color: var(--ab-blue);
    font-size: 0.786rem;         /* 11px */
    font-weight: 700;
    cursor: pointer;
}
.ab-out-season:hover { border-color: var(--ab-blue); }

/* 빈 상태 (그룹에 리그 없음 / 리그에 결장 경기 없음 / 노출 그룹 없음) */
.ab-empty {
    padding: 0.857rem 1rem;
    font-size: 0.857rem;         /* 12px */
    color: var(--ab-text-mute);
    text-align: center;
}
.ab-empty--league {
    background: rgba(244, 246, 249, 0.5);
    border: 1px solid var(--ab-border);
    border-radius: 0.429rem;
}
.ab-empty--page {
    padding: 2.857rem 1rem;
    border: 1px dashed var(--ab-border);
    border-radius: 0.857rem;
    background: #fff;
}

/* ===================== 7. SEO / 서비스 안내 (broadcast bc-seo* 재현) ===================== */
.ab-seo {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    padding: 1.429rem 1.571rem;
}
.ab-seo-title {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    margin: 0 0 0.857rem;
    font-size: 1.143rem;         /* 16px */
    font-weight: 700;
    color: #0F172A;
}
.ab-seo-lead {
    margin: 0 0 0.857rem;
    font-size: 0.857rem;         /* 12px */
    line-height: 1.571rem;
    color: #555;
}
.ab-seo-keywords {
    margin: 0 0 1.143rem;
    font-size: 0.786rem;         /* 11px */
    color: #303030;
    word-break: keep-all;
}
.ab-seo-block {
    padding-top: 1.143rem;
    border-top: 1px solid var(--border-subtle);
}
.ab-seo-block + .ab-seo-block { margin-top: 1.143rem; }
.ab-seo-subtitle {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    margin: 0 0 0.571rem;
    font-size: 1.143rem;
    font-weight: 700;
    color: #0F172A;
}
.ab-seo-body {
    margin: 0;
    font-size: 0.857rem;
    line-height: 1.571rem;
    color: #555;
    word-break: keep-all;
}

/* ===================== 포지션 약어 안내 모달 ===================== */
.ab-modal {
    position: fixed;
    inset: 0;
    z-index: 1900;                 /* 사이드바(1600)·헤더 위, 로딩 오버레이(2000) 아래 */
    display: none;                 /* .is-open 시 flex */
    align-items: center;
    justify-content: center;
    padding: 1.143rem;             /* 16px */
    background: rgba(0, 0, 0, 0.4);
}
.ab-modal.is-open { display: flex; }
.ab-modal-box {
    display: flex;
    flex-direction: column;
    gap: 1.057rem;                 /* 섹션 간격 ~14.8px */
    width: 100%;
    max-width: 40rem;              /* 560px */
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.429rem 1.429rem 2.286rem 1.857rem;   /* 상20 우20 하32 좌26 — 하단 여백 확대 */
    background: #fff;
    border-radius: 1.143rem;       /* 16px */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.ab-modal-head { display: flex; align-items: center; gap: 0.571rem; }
.ab-modal-title {
    font-size: 1.214rem;           /* 17px */
    font-weight: 800;
    color: var(--ab-text);
}
.ab-modal-close {
    margin-left: auto;
    width: 2.286rem;               /* 32px */
    height: 2.286rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 0.571rem;
    color: #6A707B;
    font-size: 1.286rem;
    cursor: pointer;
}
.ab-modal-close:hover { background: var(--ab-row-line); }
.ab-pos-group { display: flex; flex-direction: column; gap: 0.714rem; }
.ab-pos-group-title {
    font-size: 1rem;               /* 14px */
    font-weight: 800;
    color: var(--ab-blue);
}
.ab-pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.643rem 1.143rem;
}
.ab-pos-item { display: flex; align-items: center; gap: 0.571rem; min-width: 0; }
.ab-pos-abbr {
    flex: none;
    min-width: 3.429rem;           /* 48px 배지 */
    text-align: center;
    padding: 0.143rem 0.429rem;    /* 2px 6px */
    background: var(--ab-badge-bg);
    border-radius: 0.286rem;       /* 4px */
    font-size: 0.786rem;           /* 11px */
    font-weight: 800;
    color: var(--ab-text-dim);
}
.ab-pos-name {
    font-size: 0.929rem;           /* 13px */
    color: var(--ab-text-dim);
}

/* ===================== 시즌 성적 모달 ===================== */
/* 박스: 패딩 0 + 풀폭 섹션(헤더/부제/밴드/그리드), 섹션별 패딩·보더로 구분(시안) */
.ab-stat-box { max-width: 50.714rem; gap: 0; padding: 0; overflow: hidden; }  /* 710px — 시안 폭 */
/* 헤더: 선수명 + 닫기 + 하단 보더 */
.ab-stat-box .ab-modal-head {
    padding: 1.143rem 1.429rem;            /* 16 20 */
    border-bottom: 1px solid var(--ab-border);
}
.ab-stat-subs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.143rem;
    padding: 0.857rem 1.429rem;            /* 12 20 */
}
.ab-stat-sub {                     /* 리그 · 팀 */
    font-size: 0.929rem;           /* 13px */
    font-weight: 700;
    color: var(--ab-text);
    text-align: center;
}
.ab-stat-sub2 {                    /* 포지션 · 핵심 선수 */
    font-size: 0.893rem;           /* 12.5px */
    color: var(--ab-text-mute);
    text-align: center;
}
.ab-stat-band {                    /* "선수 정보" 밴드 */
    background: #F5F8FF;
    border-top: 1px solid var(--ab-border);
    border-bottom: 1px solid var(--ab-border);
    padding: 0.571rem 0;
    font-size: 0.929rem;
    font-weight: 700;
    color: var(--ab-blue);
    text-align: center;
}
/* 통계 그리드 — 풀폭, 셀 사이 1px 회색 구분선(배경이 비쳐 보임) */
.ab-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--ab-row-line);
}
/* ⚠ 필수 — 위 `display:grid`(작성자 스타일)가 브라우저 기본 `[hidden]{display:none}`(UA 스타일)을 이긴다.
   이게 없으면 JS의 `grid.hidden = true`가 무시돼, 시즌 성적이 없는 선수를 열었을 때
   **직전 선수의 숫자가 그대로 남은 그리드**가 안내문과 함께 보인다. `display`를 지정한 요소를
   `[hidden]`으로 숨기려면 항상 이 짝이 필요하다. */
.ab-stat-grid[hidden] { display: none; }
.ab-stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.286rem;
    padding: 1.143rem 0.571rem;            /* 셀 높이 시안과 유사 */
    background: #fff;
}
.ab-stat-cell--empty { background: #fff; }                                 /* 마지막 행 빈 칸(흰색, 내용만 없음) */
.ab-stat-cell-label { display: inline-flex; align-items: center; justify-content: center; gap: 0.286rem; font-size: 0.786rem; color: var(--ab-text-mute); }   /* 11px, 아이콘+라벨 가로 */
.ab-stat-cell-ico { font-size: 0.929rem; line-height: 1; flex: none; }      /* 통계 아이콘(시안 16px) */
.ab-stat-cell-val { font-size: 1.286rem; font-weight: 800; color: var(--ab-text); }  /* 18px */
.ab-stat-foot { padding: 0.571rem 0; border-top: 1px solid var(--ab-border); text-align: center; font-size: 0.786rem; color: var(--ab-text-mute); }
/* 시즌 성적 데이터 없는 선수 안내(그리드 대체) */
.ab-stat-empty { padding: 2rem 1rem; text-align: center; font-size: 0.929rem; color: var(--ab-text-mute); }

/* ===================== 모바일 (≤767.98px) ===================== */
@media (max-width: 767.98px) {
    /* 포지션 안내 모달: 1단 */
    .ab-modal-box { padding: 1.143rem; }
    .ab-pos-grid { grid-template-columns: 1fr; }

    /* 시즌 성적 모달: 통계 2단 */
    .ab-stat-grid { grid-template-columns: repeat(2, 1fr); }

    /* 툴바 2행 — 1행 [분류][검색] 반반 / 2행 [라인업 안내] … [포지션 안내] */
    .ab-toolbar { align-items: stretch; }
    .ab-toolbar-left { width: 100%; gap: 0.714rem; }
    .ab-select { flex: 1 1 0; min-width: 0; height: 2.286rem; justify-content: space-between; }
    .ab-search { flex: 1 1 0; max-width: none; min-width: 0; }
    .ab-select .bi { color: var(--ab-text-dim); }   /* 모바일 시안 #5B6473 (PC 는 #444950) */
    .ab-search-input { height: 2.286rem; }
    .ab-toolbar-right { width: 100%; justify-content: space-between; }
    /* 라인업 안내 — 모바일 시안은 **정보 아이콘이 맨 앞**이고 문구까지 전부 파랑이다
       (PC 는 회색 문구 + 중간의 파란 체크). 아이콘은 마크업에 둘 다 있고 여기서 맞바꾼다. */
    .ab-toolbar-note { color: var(--ab-blue); font-size: 0.857rem; gap: 0.286rem; }   /* 12px / gap 4 */
    .ab-toolbar-note .bi { font-size: 1rem; }                                          /* 14px */
    .ab-note-info { display: inline-flex; }
    .ab-note-check { display: none; }
    /* 포지션 안내 — 시안 70×21(텍스트 54 + 좌우 8). 아이콘이 들어가면 그 폭을 넘긴다. */
    .ab-pos-btn { height: 1.5rem; padding: 0 0.571rem; border-radius: 0.429rem; font-size: 0.786rem; font-weight: 700; }
    .ab-pos-btn .bi { display: none; }

    /* 그룹 카드 — 시안 radius 14 / 헤더 padding 14 / 제목 14px·700.
       ⚠ **배경을 흰색으로 되돌린다.** PC 는 카드가 `rgba(244,246,249,.5)`(회색빛)이고 헤더만 흰색이라
         본문이 회색으로 비치는 게 시안인데, **모바일 시안은 카드 전체가 `#FFFFFF`** 다
         (`.ab-group-body` 는 배경이 없어 이 값이 그대로 본문 색이 된다). */
    .ab-group { border-radius: 1rem; background: #fff; }
    .ab-group-head { padding: 1rem; }
    .ab-group-name { font-size: 1rem; font-weight: 700; }
    .ab-group-body { padding: 0.857rem; gap: 0.857rem; }

    /* 리그 헤더 — 축소해서 유지한다.
       ⚠ **시안에는 리그 헤더가 없지만 지우지 않는다.** 시안은 '1개 리그' 더미로 그려져 리그명이 없어도 되지만,
         실데이터는 그룹 하나에 리그가 여러 개다(실측 3그룹 18리그) → 지우면 어느 리그 경기인지 알 수 없다. */
    /* ⚠ 헤더가 **카드 뚜껑이 아니라 독립 라벨**이 된다 — 바로 아래 `.ab-league` 에서 카드 테두리·radius·overflow 를
       걷어내므로, 헤더만 직각으로 남으면 아래의 둥근 상자(경기 카드·빈 상자)와 모서리가 어긋나고
       헤더의 `border-bottom` 과 그 상자의 윗변이 겹쳐 선이 두 줄로 보인다.
       → 사방 radius 를 주고 아래 선을 없앤 뒤 간격으로 띄운다. */
    .ab-league-head {
        padding: 0.429rem 0.714rem;
        border-radius: 0.571rem;
        border-bottom: 0;
        margin-bottom: 0.571rem;
    }
    .ab-league-name { font-size: 0.857rem; }
    /* 빈 리그 상자도 경기 카드와 같은 radius 로 맞춘다 — 그룹 본문 안에서 모서리를 2단계로만 쓴다:
       **라벨(리그 헤더) 0.571rem / 내용 상자(경기 카드·빈 상자) 0.857rem**.
       셋이 제각각(6.85 / 5.15 / 10.28px)이면 같은 묶음인데 따로 노는 것처럼 보인다. */
    .ab-empty--league { border-radius: 0.857rem; }

    /* 경기 = **카드**(시안 MatchAbsenteeCard). 헤더는 연파랑, 펼침 패널과 한 카드로 이어 붙인다. */
    .ab-league { border: 0; border-radius: 0; background: transparent; overflow: visible; }
    .ab-match {
        gap: 0.857rem;
        padding: 0.857rem;
        background: #EEF3FF;
        border: 1px solid var(--ab-border);
        border-radius: 0.857rem;
    }
    .ab-match + .ab-expand { margin-bottom: 0.857rem; }
    .ab-match:not(.is-open) { margin-bottom: 0.857rem; }
    .ab-match.is-open { border-radius: 0.857rem 0.857rem 0 0; border-bottom-color: var(--ab-border); }
    .ab-match:hover { background: #EEF3FF; }
    .ab-expand {
        padding: 0.857rem;
        background: #fff;
        border: 1px solid var(--ab-border);
        border-top: 0;
        border-radius: 0 0 0.857rem 0.857rem;
    }

    /* 시간 = 파랑(시안). 팀은 로고 없이 `홈 vs 원정` 한 덩어리로 좌측에 붙는다. */
    .ab-match-time { flex: none; width: auto; font-size: 0.786rem; font-weight: 700; color: var(--ab-blue); }
    /* ⚠ **`vs` 를 축으로 좌우를 맞춘다** — 홈은 오른쪽 끝, 원정은 왼쪽 끝에 붙인다.
       `flex: 0 1 auto`(내용 폭) + 둘 다 왼쪽정렬로 두면 팀명 길이에 따라 `vs` 의 x 가 행마다 달라져
       목록이 들쭉날쭉해진다. 시안도 홈팀 상자를 `width:55px; text-align:right` 로 **고정폭 우측정렬**해
       같은 효과를 냈는데, 고정폭은 긴 팀명이 잘리므로 여기서는 flex 로 같은 축을 만든다. */
    .ab-match-side { flex: 1 1 0; min-width: 0; }
    .ab-match-side--home { order: 2; justify-content: flex-end; }
    .ab-match-side--away { order: 3; justify-content: flex-start; }
    .ab-match-side .ab-team-logo { display: none; }         /* 시안: 모바일은 로고 없음 */
    .ab-match-side--home::after {                           /* 구분자 vs — 마크업에 없어 CSS 로 넣는다 */
        content: 'vs';
        flex: none;
        font-size: 0.786rem;
        font-weight: 700;
        color: var(--ab-text-mute);
    }
    .ab-team-name { font-size: 0.929rem; max-width: none; }
    .ab-match-center { order: 4; margin-left: auto; flex: none; min-width: 0; }
    .ab-team-out { display: none; }                         /* 결장 수는 아래 팀 카드에 팀별로 있다 */
    /* ⚠ 확정 표시는 **아이콘만 남긴다** — 시안엔 없지만 툴바의 "라인업 확정 시 표시" 안내가 거짓이 된다.
       미확정('예상')은 숨겨서 안내 문구와 정확히 일치시킨다. */
    .ab-match-confirm { order: 5; flex: none; min-width: 0; }
    .ab-match-confirm { font-size: 0; }                     /* 텍스트('확정') 숨김, 아이콘만 */
    .ab-match-confirm .bi { font-size: 1rem; }
    .ab-match-confirm--soon { display: none; }

    /* 펼침 패널: 팀 카드 2분할 → 세로 적층.
       좌우를 유지하면 카드 폭이 170px대로 눌려 선수명·별점·통계가 겹친다. */
    .ab-teams { flex-direction: column; }
    /* ⚠ **`flex: 1 1 0` 을 그대로 두면 안 된다.** 그 값은 PC 의 **가로** 배치에서 좌우 균등 폭을 만들려던 것인데,
       세로로 바꾸면 `flex-basis: 0` 이 **높이 0** 이 된다. `.ab-teams` 에 정해진 높이가 없어 flex-grow 가 나눠줄
       여백도 없으므로 카드가 2px(위아래 보더)로 접히고, `overflow: hidden` 이 선수 목록을 통째로 잘라낸다
       — 화면에는 "결장정보가 안 보이는" 상태가 된다(2026-08-18 수정). */
    .ab-team-card { flex: 0 0 auto; }

    /* 선수 아이템 3행 — 별점·사유가 각 행의 우측 끝으로 간다(시안) */
    .ab-out-item {
        grid-template-areas:
            "id    id"
            "cause cause"
            "stats season";
        row-gap: 0.429rem;
    }
    .ab-out-stars { margin-left: auto; }
    .ab-out-reason { margin-left: auto; text-align: right; }

    .ab-seo { padding: 1.143rem; }
}