/* 라이브 앱 공통 상태 컴포넌트 (C-07) — 시안 W09_common_states.png
   Tailwind CDN/빌드 이원화 영향을 받지 않도록 CSS 변수 기반 순수 CSS로 작성.

   대비(WCAG 2.x) 계산 근거:
     #333333(--text-strong) on #ffffff(--surface) = 12.63:1
     #666666(--text-muted)  on #ffffff            = 5.74:1
     흰색 on #000666(--brand-primary)             = 17.24:1  (다시 시도 버튼)
   스켈레톤은 텍스트를 담지 않으므로 대비 요구 대상이 아니다. */

/* --- 스켈레톤 (로딩) --- */
.skeleton {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.skeleton__row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
}

.skeleton__block {
    background: #eef1f5;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.skeleton__block::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton__block::after { animation: none; }
}

.skeleton__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.skeleton__lines {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton__line {
    height: 14px;
}

.skeleton__line--long { width: 70%; }
.skeleton__line--short { width: 35%; }

.skeleton__badge {
    width: 56px;
    height: 28px;
    border-radius: 6px;
    flex: 0 0 auto;
}

/* row: 일정 행(시각 + 팀명 + 상태 배지) */
.skeleton__time {
    width: 48px;
    height: 16px;
    flex: 0 0 auto;
}

.skeleton--row .skeleton__row {
    gap: 16px;
    border-bottom: 1px solid var(--border);
}

/* table: 순위표 행(순위 + 팀명 + 스탯 열) */
.skeleton__rank {
    width: 20px;
    height: 16px;
    flex: 0 0 auto;
}

.skeleton__cell {
    width: 28px;
    height: 16px;
    flex: 0 0 auto;
}

.skeleton--table .skeleton__row {
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.skeleton--table .skeleton__line--long {
    flex: 1 1 auto;
}

/* --- 빈 상태 / 에러 상태 --- */
.empty-state,
.error-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
}

.empty-state__icon,
.error-state__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state__icon svg,
.error-state__icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--text-muted);
    stroke-width: 1.8;
    fill: none;
}

.error-state__icon svg {
    stroke: var(--error);
}

.empty-state__title,
.error-state__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 8px;
}

.empty-state__desc,
.error-state__desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.error-state__retry {
    margin-top: 20px;
    min-height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.error-state__retry:active {
    transform: scale(0.95);
}

.error-state__retry:focus-visible {
    outline: 2px solid var(--accent-live);
    outline-offset: 2px;
}

/* =========================================================================
   앱 셸 (W01_app_shell.png) — 헤더 · 언어 토글 · 탭
   Tailwind CDN 유틸리티에 의존하지 않도록 순수 CSS로 작성(빌드/CDN 이원화 방어).

   대비(WCAG 2.x) 계산 근거:
     흰색 on #000666(--brand-primary)              = 17.24:1  (헤더 워드마크)
     #000666 on #ffffff                            = 17.24:1  (활성 토글 KO, 활성 탭)
     흰색 on rgba(255,255,255,.14) over #000666    = 12.52:1  (비활성 토글 EN)
     #666666(--text-muted) on #ffffff              = 5.74:1   (비활성 탭)
   ※ 시안의 밝은 파랑(--accent-live #2196f3)은 흰 배경 대비 3.12:1로 텍스트 4.5:1에
     미달하므로, 활성 탭 텍스트/보더에는 --brand-primary를 사용한다.
   ========================================================================= */

.live-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--brand-primary);
    color: #ffffff;
}

.live-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    height: var(--live-header-h);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.live-header__brand svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

/* --- KO/EN 세그먼트 토글 (F9) --- */
.lang-toggle {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
}

.lang-toggle__btn {
    min-width: 44px;
    min-height: 40px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.lang-toggle__btn.is-active {
    background: #ffffff;
    color: var(--brand-primary);
}

.lang-toggle__btn:focus-visible {
    outline: 2px solid var(--accent-live);
    outline-offset: 2px;
}

/* --- 탭 네비 (C-02) --- */
.live-tabs {
    position: sticky;
    top: var(--live-header-h);
    z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.live-tabs__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    gap: 8px;

    /* [해결한 누락] overflow 정책이 없어 탭이 4개가 되면 375px에서 잘렸다.
       body{overflow-x:hidden}이 걸려 있어 가로 스크롤바조차 안 나타나므로 잘림이 조용히 숨는다.
       탭 네비는 하단 앱 전환 바와 달리 '항목이 더 있다'를 스크롤로 알려도 되는 자리다
       (하단 바는 4개 고정이므로 스크롤을 쓰지 않는다 — app-nav.css 주석 참조). */
    overflow-x: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 구 Edge */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.live-tabs__inner::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari — 스크롤바는 숨기되 스크롤은 유지 */
}

.live-tabs__inner > * {
    flex: 0 0 auto;                 /* 탭이 눌려서 글자가 깨지지 않게 */
    scroll-snap-align: start;
}

.live-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.live-tab svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

/* 허브 탭 신호: 색 단독이 아닌 도트 + 텍스트 병기 */
.live-tab__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--live-dot);
}

.live-tab.is-active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.live-tab:focus-visible {
    outline: 2px solid var(--accent-live);
    outline-offset: -2px;
}

/* =========================================================================
   라이브 허브 카드 (C-03) — 시안 W02_live_hub.png(모바일) · W02D(데스크탑)
   뷰포트 분기는 전적으로 미디어쿼리로 처리한다(JS로 window.innerWidth를 재지 않는다).
     모바일(<768px) : 세로 배치(로고·스코어·로고) + '상세보기' 버튼
     데스크탑(≥768px): 가로 행(팀명 좌 · 스코어 우), 버튼 숨김

   대비(WCAG 2.x) 계산 근거:
     #333333(--text-strong) on #ffffff = 12.63:1
     #666666(--text-muted)  on #ffffff = 5.74:1
     흰색 on #e11d48(--live-dot)       = 4.70:1  (LIVE 배지 — 배경 조정 금지)
     #333333 on #f1f3f5                = 11.36:1 (FT 배지)
     #000666(--brand-primary) on #e8eeff = 14.86:1 (예정/킥오프 배지)
   ※ --accent-live(#2196f3)·--success(#059669)는 흰 글씨 대비 미달이므로
     텍스트 배경으로 쓰지 않는다(연한 배경 + 진한 텍스트 원칙).
   ========================================================================= */

/* --- 상태 라인 (R-2-10 자동갱신/마지막 갱신, R-2-14 LIVE n 배지) --- */
.live-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.live-status__count {
    display: none; /* 모바일: 숨김. 데스크탑에서만 노출 (R-2-14) */
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--live-dot);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.live-status__auto {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e8eeff;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
}

.live-status__updated {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- 카드 그리드 (데스크탑 2~3열, R-2-14) --- */
.match-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* --- 카드 --- */
.match-card {
    display: block;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-align: left;
    cursor: pointer;
}

.match-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.match-card:focus-visible {
    outline: 2px solid var(--accent-live);
    outline-offset: 2px;
}

.match-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.match-card__league {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

/* 모바일: 로고 위·팀명 아래의 세로 팀 블록이 스코어를 사이에 두고 나란히 선다. */
.match-card__body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.match-card__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.match-card__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* 스코어는 모바일용 합산 블록(.match-card__score)과 데스크탑용 팀별 값
   (.match-card__team-score)을 함께 심고, 뷰포트에 따라 한쪽만 노출한다.
   JS 분기를 피하기 위한 의도적 이중 마크업이다. */
.match-card__score {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 34px;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1;
}

.match-card__sep {
    font-size: 22px;
    color: var(--text-muted);
}

.match-card__team-score {
    display: none;
}

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

.match-card__event {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.match-card__cta {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border: none;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.match-card__cta:active {
    transform: scale(0.98);
}

/* --- 팀 식별자: 공식 엠블럼(img) 우선, 없으면 팀 컬러 도트 (R-2-3) --- */
.team-logo,
.team-dot {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.team-logo {
    object-fit: contain;
    background: #f1f3f5;
    padding: 2px;
}

.team-dot--empty {
    background: #e5e7eb;
}

/* --- 상태 배지 3변형 (R-2-5). LIVE는 도트 + 텍스트 병기 (R-2-7) --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge--live {
    background: var(--live-dot);
    color: #ffffff;
}

.status-badge--ft {
    background: #f1f3f5;
    color: var(--text-strong);
}

.status-badge--scheduled {
    background: #e8eeff;
    color: var(--brand-primary);
}

.status-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .status-badge__dot { animation: none; }
}

/* --- 데스크탑(≥768px): 가로 행 배치 + CTA 숨김 (시안 W02D) --- */
@media (min-width: 768px) {
    .match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-status__count {
        display: inline-flex;
    }

    .match-card__league {
        order: 2; /* 데스크탑은 배지 좌 · 리그 우 */
    }

    .match-card__body {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .match-card__team {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }

    .match-card__name {
        flex: 1 1 auto;
        text-align: left;
        font-size: 15px;
    }

    .team-logo,
    .team-dot {
        width: 28px;
        height: 28px;
    }

    .match-card__score {
        display: none;
    }

    .match-card__team-score {
        display: block;
        flex: 0 0 auto;
        font-size: 22px;
        font-weight: 800;
        color: var(--brand-primary);
        line-height: 1;
    }

    .match-card__meta {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
        text-align: left;
    }

    .match-card__event {
        text-align: left;
    }

    .match-card__cta {
        display: none;
    }
}

@media (min-width: 1024px) {
    .match-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================================
   리그 순위표 (C-04·C-06) — 시안 W03_standings.png

   대비(WCAG 2.x) 계산 근거:
     #333333 on #ecfdf5(UCL 행)      = 12.00:1
     #333333 on #eff6ff(유로파 행)    = 11.61:1
     #333333 on #fef2f2(강등권 행)    = 11.55:1
     #047857(골득실 +) on #ffffff     = 5.48:1  (on 음영 행 최저 5.01:1)
     #b3261e(--error, 골득실 −) on #ffffff = 6.54:1
   ※ --success(#059669)는 흰 배경 위 텍스트로 3.77:1이라 골득실 양수에 쓰지 않는다.
     좌측 컬러바는 텍스트가 아니므로 --success/--accent-live/--error를 그대로 쓴다.
   ========================================================================= */

.standings-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.standings-card__head {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.standings-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-strong);
}

.standings-card__league {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* R-3-6: 모바일 가로 스크롤 확보 — 데이터 가려짐 0 */
.standings-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.standings-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

.standings-table th {
    padding: 12px 10px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border);
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.standings-table th:nth-child(1),
.standings-table th:nth-child(2) {
    text-align: left;
}

.standings-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-strong);
    text-align: center;
    white-space: nowrap;
}

.standings-table td:nth-child(2) {
    text-align: left;
}

.standings-row__pos {
    font-weight: 800;
}

.standings-row__team {
    display: flex;
    align-items: center;
    gap: 8px;
}

.standings-row__team .team-logo,
.standings-row__team .team-dot {
    width: 24px;
    height: 24px;
}

.standings-row__name {
    font-weight: 700;
}

.standings-row__pts {
    font-weight: 800;
}

/* R-3-3: 승격권/강등권 = 좌측 컬러바 + 행 배경 음영 */
.standings-row--ucl { background: #ecfdf5; }
.standings-row--europa { background: #eff6ff; }
.standings-row--relegation { background: #fef2f2; }

.standings-row--ucl td:first-child { box-shadow: inset 4px 0 0 var(--success); }
.standings-row--europa td:first-child { box-shadow: inset 4px 0 0 var(--accent-live); }
.standings-row--relegation td:first-child { box-shadow: inset 4px 0 0 var(--error); }

/* 드릴다운 가능한 행 — 클릭하면 팀 스쿼드가 열린다.
   구간 배경색(ucl/europa/relegation)을 덮지 않도록 hover는 그림자로만 표현한다. */
.standings-row--drillable {
    cursor: pointer;
}

.standings-row--drillable:hover {
    box-shadow: inset 0 0 0 9999px rgba(0, 6, 102, 0.04);
}

.standings-row--drillable:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

/* R-3-5: 골득실 부호 색상 분기 */
.standings-gd--pos { color: #047857; font-weight: 700; }
.standings-gd--neg { color: var(--error); font-weight: 700; }
.standings-gd--zero { color: var(--text-muted); font-weight: 700; }

.standings-win { color: #047857; font-weight: 700; }
.standings-loss { color: var(--error); font-weight: 700; }

/* R-3-4: 색 단독 금지 — 하단 범례로 구간을 텍스트 병기 */
.standings-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding: 12px 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.standings-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.standings-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.standings-legend__dot--ucl { background: var(--success); }
.standings-legend__dot--europa { background: var(--accent-live); }
.standings-legend__dot--relegation { background: var(--error); }

/* =========================================================================
   경기 일정 (C-05) — 시안 W04_schedule.png · W04D_schedule_desktop.png

   대비(WCAG 2.x) 계산 근거:
     #333333 on #eef1f5(그룹 헤더)  = 11.15:1
     #666666 on #f1f3f5(경기 수 배지) = 5.16:1
     #000666(킥오프 시각) on #ffffff = 17.24:1
   ========================================================================= */

.schedule-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.schedule-group {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.schedule-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: #eef1f5;
}

.schedule-group__date {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-strong);
}

.schedule-group__count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f3f5;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

/* R-4-7: 행 터치 타깃 ≥40px (min-height 56px) */
.schedule-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    border: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
}

.schedule-group__head + .schedule-row {
    border-top: none;
}

.schedule-row:hover {
    background: #f8f9fa;
}

.schedule-row:focus-visible {
    outline: 2px solid var(--accent-live);
    outline-offset: -2px;
}

.schedule-row__time {
    flex: 0 0 auto;
    min-width: 52px;
    font-size: 15px;
    font-weight: 800;
    color: var(--brand-primary);
}

.schedule-row__teams {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.schedule-row__team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.schedule-row__team .team-logo,
.schedule-row__team .team-dot {
    width: 20px;
    height: 20px;
}

.schedule-row__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-row__league {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}

.schedule-row__status {
    flex: 0 0 auto;
}

/* 데스크탑: 날짜 그룹 2열 (R-4-9, 시안 W04D) */
@media (min-width: 768px) {
    .schedule-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* --- 방송 오버레이 (?view=overlay → body.broadcast-mode, F8-FR01·FR02) ---
   app-nav.css가 .app-nav-bar를 숨기므로 여기서는 헤더·탭·배경만 처리한다. */
body.broadcast-mode {
    background: transparent !important;
}

body.broadcast-mode .live-header,
body.broadcast-mode .live-tabs {
    display: none !important;
}

/* =========================================================================
   W5 경기 상세 (C-08·C-09·C-10 · Phase 4b)
   시안: W05_match_detail.png(모바일 풀스크린 시트) · W05D_match_detail_desktop.png(데스크탑 중앙 모달)

   R-5-7: 뷰포트 분기는 **CSS 미디어쿼리**가 담당한다(JS로 window.innerWidth를 재지 않는다).
     - <768px  : 풀스크린 시트
     - >=768px : 중앙 모달 (z-index:1000 — components.css 모달 계층과 동일)
   ========================================================================= */

#match-detail-root {
    display: none;
}

#match-detail-root.is-open {
    display: block;
}

/* 배경 스크롤 잠금 — 시트/모달이 열린 동안 뒤 목록이 함께 움직이지 않게 한다 */
body.detail-open {
    overflow: hidden;
}

/* 앱 전환 바(app-nav.css: .app-nav-bar z-1990 / .footer-more-menu z-2001)는 상세 패널(z-1000)보다
   위에 있다. #match-detail-root는 스태킹 컨텍스트를 만들지 않으므로 정수 비교에서 바가 이긴다.
   루브릭 R-5-7이 모달 z-index를 1000으로 고정하므로, 값을 올리는 대신 모달이 열린 동안 바를 감춘다.
   숨기지 않으면 (1) 시트 하단이 가려지고 (2) 백드롭 위로 링크가 노출돼 모달 격리가 깨진다. */
body.detail-open .app-nav-bar,
body.detail-open .footer-more-menu {
    display: none !important;
}

.detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* --- 모바일 기본: 풀스크린 시트 --- */
.detail-panel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--bg-canvas);
    outline: none;
    animation: detail-sheet-up 0.22s ease-out;
}

@keyframes detail-sheet-up {
    from { transform: translateY(3%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .detail-panel { animation: none; }
}

/* --- 상세 헤더 (← 뒤로 · 리그·매치데이) --- */
.detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 0 12px;
    height: var(--live-header-h);
    background: var(--brand-primary);
    color: #ffffff; /* on --brand-primary(#000666) = 17.24:1 */
}

/* 터치 타깃 >= 40px (디자인시스템 §8) */
.detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.detail-back:hover {
    background: rgba(255, 255, 255, 0.12);
}

.detail-back:active {
    transform: scale(0.95);
}

.detail-back:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.detail-back svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.detail-header__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- 대형 스코어보드 (R-5-1) --- */
.detail-scoreboard {
    padding: 20px 16px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.detail-scoreboard__pill {
    margin-bottom: 16px;
}

.detail-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* 흰 텍스트는 충분히 어두운 배경 위에만 (--live-dot #e11d48 = 4.70:1) */
.detail-pill--live {
    background: var(--live-dot);
    color: #ffffff;
}

.detail-pill--ft,
.detail-pill--scheduled {
    background: #f1f3f5;
    color: var(--text-strong);
}

.detail-scoreboard__body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.detail-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0; /* 긴 팀명이 그리드를 밀어내지 않도록 */
}

.detail-team .team-logo,
.detail-team .team-dot {
    width: 64px;
    height: 64px;
}

.detail-team__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
    text-align: center;
    word-break: keep-all;
}

.detail-score {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--brand-primary);
}

.detail-score__num {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.detail-score__sep {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-muted);
}

.detail-scoreboard__meta {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

/* --- 내부 탭 (타임라인/통계/라인업/H2H) --- */
.detail-tabs {
    display: flex;
    gap: 4px;
    padding: 0 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar {
    display: none;
}

.detail-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.detail-tab:hover {
    color: var(--text-strong);
}

/* 활성 탭은 색 + 하단 보더 병기 (색만으로 의미 전달 금지).
   텍스트색은 --accent-live(#2196f3)를 쓰면 흰 배경 위 3.12:1로 대비 미달이며,
   비활성 탭(--text-muted 5.74:1)보다 오히려 낮아지는 역전이 생긴다.
   외곽 .live-tab.is-active와 동일하게 --brand-primary(17.24:1)를 쓴다. */
.detail-tab.is-active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.detail-tab:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.detail-panel__content {
    padding: 16px;
}

/* =========================================================================
   C-09 이벤트 타임라인 — 홈=우측 / 원정=좌측 (시안 W05)
   ========================================================================= */

.timeline {
    list-style: none;
    margin: 0;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.timeline-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 14px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.timeline-divider::before,
.timeline-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.timeline-divider:not(:first-child) {
    margin-top: 20px;
}

/* 이벤트 행: [텍스트] [아이콘] [분]. 원정은 row-reverse로 뒤집어 좌측 정렬한다.
   모바일(375px)에서 중앙 경계를 정확히 50%로 두면 이름 칸이 ~90px밖에 남지 않아
   "P. Calderon" 같은 이름이 두 줄로 접힌다(시안은 짧은 한글 이름이라 드러나지 않았다).
   기본값을 44%로 완화해 이름 칸을 넓히고, 데스크탑(>=768px)에서 50%로 되돌린다. */
.timeline-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    min-height: 44px; /* 터치 타깃 */
}

.timeline-item--home {
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
    margin-left: 44%;
}

.timeline-item--away {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
    margin-right: 44%;
}

.timeline-item__text {
    min-width: 0;
}

.timeline-item__actor {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
    word-break: keep-all;
}

.timeline-item__arrow {
    color: var(--text-muted);
    font-weight: 400;
}

.timeline-item__detail {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

/* 분 표기는 읽어야 하는 정보다. --success(#059669)는 흰 배경 위 3.77:1로 미달이므로
   순위표(.standings-gd--pos)와 같은 #047857(5.48:1)을 쓴다. */
.timeline-item__minute {
    flex: 0 0 auto;
    min-width: 34px;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #047857;
}

.timeline-item__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.timeline-item__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

/* 이벤트 종류별 색 — 아이콘 형태가 이미 다르므로 색은 보조 단서다 */
.timeline-item__icon--goal,
.timeline-item__icon--penalty { color: var(--success); }
.timeline-item__icon--own-goal,
.timeline-item__icon--missed-penalty { color: var(--error); }
.timeline-item__icon--subst { color: var(--text-muted); }
.timeline-item__icon--var { color: var(--accent-live); }

/* 카드는 사각형을 색으로 채운다 */
.timeline-item__icon--yellow-card svg rect {
    fill: var(--warning);
    stroke: var(--warning);
}

.timeline-item__icon--red-card svg rect {
    fill: var(--error);
    stroke: var(--error);
}

/* 분 표기 색도 이벤트 성격에 맞춘다.
   경고색은 --warning(#d97706, 3.19:1) 대신 진한 앰버 #92400e(7.09:1)를 쓴다. */
.timeline-item[data-event-kind="yellow-card"] .timeline-item__minute { color: #92400e; }
.timeline-item[data-event-kind="red-card"] .timeline-item__minute,
.timeline-item[data-event-kind="own-goal"] .timeline-item__minute { color: var(--error); }
.timeline-item[data-event-kind="subst"] .timeline-item__minute,
.timeline-item[data-event-kind="var"] .timeline-item__minute { color: var(--text-muted); }

.timeline-empty {
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

/* =========================================================================
   C-10 경기 통계 (좌우 대칭 스탯 바)
   ========================================================================= */

.match-stats {
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.stat-row + .stat-row {
    margin-top: 16px;
}

.stat-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.stat-row__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}

.stat-row__value {
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.stat-row__value--home { color: var(--accent-live); }
.stat-row__value--away { color: var(--error); }

/* 트랙 위에서 두 바가 전체 폭을 값 비율대로 분할한다(맞닿음). 시안 W05D. */
.stat-row__bars {
    display: flex;
    height: 6px;
    border-radius: 999px;
    background: #eef1f4;
    overflow: hidden;
}

.stat-bar {
    display: block;
    height: 100%;
    transition: width 0.3s ease;
}

.stat-bar--home { background: var(--accent-live); }
.stat-bar--away { background: var(--error); }

@media (prefers-reduced-motion: reduce) {
    .stat-bar { transition: none; }
}

/* 데이터 부재(F4-FR04): 바 골격을 회색으로 낮추고 안내 문구를 얹는다 */
.match-stats--empty .stat-row__value {
    color: var(--text-muted);
}

.match-stats--empty .stat-row__bars {
    background: #f1f3f5;
}

.match-stats__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    /* 연한 배경 + 진한 텍스트 (#7c2d12 on #fef3c7 = 8.42:1). 흰 글씨를 --warning 위에 올리지 않는다. */
    background: #fef3c7;
    color: #7c2d12;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.match-stats__notice-icon {
    flex: 0 0 auto;
    display: inline-flex;
}

.match-stats__notice-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* =========================================================================
   데스크탑(>=768px): 중앙 모달 (C-14 · z-index:1000)
   ========================================================================= */
@media (min-width: 768px) {
    .detail-panel {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(960px, calc(100vw - 48px));
        max-height: calc(100vh - 64px);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
        animation: detail-modal-in 0.18s ease-out;
    }

    @keyframes detail-modal-in {
        from { transform: translate(-50%, -48%); opacity: 0; }
        to { transform: translate(-50%, -50%); opacity: 1; }
    }

    .detail-scoreboard {
        padding: 28px 24px 20px;
    }

    .detail-team .team-logo,
    .detail-team .team-dot {
        width: 84px;
        height: 84px;
    }

    .detail-team__name {
        font-size: 18px;
    }

    .detail-score__num {
        font-size: 56px;
    }

    .detail-panel__content {
        padding: 20px 24px 28px;
    }

    /* 데스크탑 타임라인은 좌우 여백을 넓혀 중앙선을 또렷하게 (시안 W05D).
       폭이 넉넉하므로 중앙 경계를 정확히 50%로 되돌린다(모바일 완화값 44% 취소). */
    .timeline {
        padding: 20px 24px;
    }

    .timeline-item {
        gap: 10px;
    }

    .timeline-item--home { margin-left: 50%; }
    .timeline-item--away { margin-right: 50%; }

    .timeline-item__minute {
        min-width: 38px;
    }
}

/* =========================================================================
   W6 선수 스탯 + 추정 평점 (C-11 · Phase 5a)
   시안: W06_player_stats.png · W06D_player_stats_desktop.png

   모달 셸(.detail-backdrop / .detail-panel / .detail-header)은 W5와 공유한다.
   ========================================================================= */

#player-stats-root {
    display: none;
}

#player-stats-root.is-open {
    display: block;
}

/* 선수 스탯은 경기 상세(z-1000) 위에 얹힌다 */
#player-stats-root .detail-backdrop {
    z-index: 1001;
}

#player-stats-root .detail-panel {
    z-index: 1002;
}

/* 타임라인의 선수 행은 클릭 가능하다는 신호를 준다 */
.timeline-item[data-player-id] {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.timeline-item[data-player-id]:hover {
    background: #f8fafc;
}

.timeline-item[data-player-id]:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.player-stat-view {
    padding: 16px;
}

/* --- 프로필 --- */
.player-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0 20px;
}

.player-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #e5e7eb;
}

.player-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 이니셜 폴백. 포지션 신호색 원본(--pos-*)은 흰 글씨 대비가 모자라므로
   텍스트용 어두운 변형(--pos-*-strong)을 배경으로 쓴다(variables.css 참조). */
.player-avatar__initial {
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
}

.player-avatar--gk { background: var(--pos-gk-strong); }
.player-avatar--df { background: var(--pos-df-strong); }
.player-avatar--mf { background: var(--pos-mf-strong); }
.player-avatar--fw { background: var(--pos-fw-strong); }
.player-avatar--unknown { background: #6b7280; }

/* 사진이 있을 때는 포지션 신호색을 링으로 둘러 색 정보를 유지한다 */
.player-avatar--gk { box-shadow: inset 0 0 0 3px var(--pos-gk); }
.player-avatar--df { box-shadow: inset 0 0 0 3px var(--pos-df); }
.player-avatar--mf { box-shadow: inset 0 0 0 3px var(--pos-mf); }
.player-avatar--fw { box-shadow: inset 0 0 0 3px var(--pos-fw); }

.player-profile__text {
    min-width: 0;
}

.player-profile__name {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-strong);
    word-break: keep-all;
}

.player-profile__original {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.player-profile__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.player-profile__sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* 포지션 배지 — 흰 텍스트를 올리므로 어두운 변형 사용 (원색은 GK 2.19:1로 미달) */
.pos-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.pos-badge--gk { background: var(--pos-gk-strong); }
.pos-badge--df { background: var(--pos-df-strong); }
.pos-badge--mf { background: var(--pos-mf-strong); }
.pos-badge--fw { background: var(--pos-fw-strong); }

/* --- "추정" 배지 (R-6-1 · R-6-3 [치명]) ---
   아이콘 + 텍스트 병기. 색만으로 의미를 전달하지 않는다.
   흰 글씨를 --warning(#d97706, 3.19:1) 위에 올리지 않고 연한 배경 + 진한 텍스트(8.42:1)를 쓴다. */
.estimate-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #7c2d12;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.estimate-badge__icon {
    display: inline-flex;
}

.estimate-badge__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* --- 대형 평점 카드 --- */
.rating-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rating-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #fef3c7;
    color: #7c2d12;
}

.rating-card__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.rating-card__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rating-card__value-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.rating-card__value {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

/* --- 섹션 --- */
.player-section {
    margin-top: 24px;
}

.player-section__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-strong);
}

.player-section__empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px;
    border-radius: 10px;
    background: #f1f3f5;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.player-section__empty svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* --- 스탯 4칸 --- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.stat-cell__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    color: var(--text-muted);
}

.stat-cell__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.stat-cell__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.stat-cell--goal .stat-cell__value { color: #047857; }      /* 5.48:1 */
.stat-cell--rating .stat-cell__value { color: var(--brand-primary); }
.stat-cell--empty .stat-cell__value { color: var(--text-muted); }

/* 슈팅 미제공 사유 — 없는 값을 있는 척하지 않는다 */
.stat-grid__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.stat-grid__notice svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* --- 산식 근거 박스 (R-6-2 [치명]) --- */
.formula-box {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    background: #fffbeb;
    color: #7c2d12; /* on #fffbeb = 9.04:1 */
}

.formula-box__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
}

.formula-box__icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.formula-box__body {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    word-break: keep-all;
}

/* --- 득점 랭킹 --- */
.scorer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.scorer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 56px;
}

.scorer-row + .scorer-row {
    border-top: 1px solid var(--border);
}

/* 현재 선수 하이라이트 — 배경 + 진한 파랑 텍스트(8.01:1). --accent-live는 2.87:1로 미달 */
.scorer-row--current {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #1e40af;
}

.scorer-row--current .scorer-row__rank,
.scorer-row--current .scorer-row__name {
    color: #1e40af;
}

.scorer-row__rank {
    flex: 0 0 auto;
    min-width: 32px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.scorer-row__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.scorer-row__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scorer-row__team {
    font-size: 12px;
    color: var(--text-muted);
}

.scorer-row__goals {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

/* --- 활동존 CTA --- */
.activity-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    margin-top: 24px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--brand-primary);
    color: #ffffff; /* 17.24:1 */
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.activity-cta:hover:not(:disabled) {
    background: var(--brand-primary-soft);
}

.activity-cta:active:not(:disabled) {
    transform: scale(0.99);
}

.activity-cta:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.activity-cta:disabled {
    background: #cbd5e1;
    color: #475569; /* 회색 배경 위 대비 확보 */
    cursor: not-allowed;
}

.activity-cta svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.activity-cta__icon,
.activity-cta__arrow {
    display: inline-flex;
}

/* --- 데스크탑 --- */
@media (min-width: 768px) {
    .player-stat-view {
        padding: 24px;
    }

    .player-avatar {
        width: 96px;
        height: 96px;
    }

    .player-profile__name {
        font-size: 26px;
    }

    .rating-card__value {
        font-size: 44px;
    }
}

/* =========================================================================
   W7 선수 활동존 (C-12 · Phase 5b)
   시안: W07_activity_zone.png(모바일 세로) · W07D_activity_zone_desktop.png(데스크탑 가로)

   모달 셸(.detail-backdrop / .detail-panel / .detail-header)은 W5·W6와 공유한다.
   피치 좌표 회전은 JS(PlayerActivityRender)가 담당한다 — CSS rotate(90deg)를 쓰면
   'FW #7' 라벨과 '공격 방향' 텍스트까지 뒤집힌다.

   대비(계산 확인):
     흰 텍스트 on 잔디 #14682f            = 6.88:1
     흰 텍스트 on --pos-fw #C0392B        = 5.44:1  (원색 통과)
     흰 텍스트 on --pos-*-strong          = 5.37~8.06:1 (GK/DF/MF는 원색이 미달이라 강한 변형)
     흰 텍스트 on 방향 pill #1f2937       = 14.68:1
     #7c2d12 on #fef3c7 (헤더 배지)       = 8.42:1
   ========================================================================= */

#player-activity-root {
    display: none;
}

#player-activity-root.is-open {
    display: block;
}

/* 활동존은 선수 스탯(z-1002) 위에 얹힌다 */
#player-activity-root .detail-backdrop {
    z-index: 1003;
}

#player-activity-root .detail-panel {
    z-index: 1004;
}

/* 헤더 우측의 "추정 · 실측 아님" 배지 (R-7-2 [치명]) */
.detail-header .activity-badge {
    margin-left: auto;
}

.activity-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #7c2d12;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.activity-badge__icon {
    display: inline-flex;
}

.activity-badge__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.activity-zone {
    padding: 16px;
}

/* --- 선수 컨텍스트 바 (R-7-7) --- */
.activity-context {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.activity-context__dot {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #9ca3af;
}

.activity-context__dot--gk { background: var(--pos-gk); }
.activity-context__dot--df { background: var(--pos-df); }
.activity-context__dot--mf { background: var(--pos-mf); }
.activity-context__dot--fw { background: var(--pos-fw); }

.activity-context__text {
    min-width: 0;
}

.activity-context__name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-strong);
}

.activity-context__bits {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.activity-context__sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

/* --- 피치 --- */
.activity-zone__main {
    display: block;
}

.activity-pitch {
    position: relative;
    background: #14682f;
    border-radius: 14px;
    overflow: hidden;
}

.pitch-svg {
    display: block;
    width: 100%;
    height: auto;
}

.pitch-turf {
    fill: #14682f;
}

.pitch-line {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 0.7;
}

.pitch-dot {
    fill: rgba(255, 255, 255, 0.6);
}

/* 타원은 SVG fill-opacity로 강도를 표현한다(색은 포지션 신호색) */
.zone-ellipse {
    /* 브라우저 렌더 최적화 힌트. 값 자체는 렌더러가 인라인으로 넣는다. */
    mix-blend-mode: normal;
}

/* 'FW #7' 라벨 — 포지션 신호색 위 흰 글씨. GK/DF/MF는 원색 대비가 모자라 강한 변형을 쓴다. */
.pitch-label {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pitch-label--gk { background: var(--pos-gk-strong); }
.pitch-label--df { background: var(--pos-df-strong); }
.pitch-label--mf { background: var(--pos-mf-strong); }
.pitch-label--fw { background: var(--pos-fw); } /* 5.44:1 — 원색으로 충분 */

/* 공격 방향 표시 */
.pitch-direction {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(31, 41, 55, 0.88);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.pitch-direction__icon {
    display: inline-flex;
}

.pitch-direction__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
}

/* --- 강도 범례 (R-7-6 [필수]) — 색 + 텍스트 병기 --- */
.zone-legend {
    margin-top: 16px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.zone-legend__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-strong);
}

.zone-legend__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zone-legend__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zone-legend__dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.zone-legend__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.zone-legend__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong); /* 12.63:1 */
}

.zone-legend__desc {
    font-size: 12px;
    color: var(--text-muted); /* 5.74:1 */
}

/* --- 디스클레이머 (R-7-1 [치명]) --- */
.activity-disclaimer {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    background: #fffbeb;
    color: #7c2d12; /* 9.04:1 */
}

.activity-disclaimer__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
}

.activity-disclaimer__icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.activity-disclaimer__body {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
}

.activity-disclaimer__note {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    opacity: 0.92;
    word-break: keep-all;
}

/* --- 데스크탑: 가로 피치 + 우측 사이드바 (R-7-9) --- */
@media (min-width: 768px) {
    .activity-zone {
        padding: 24px;
    }

    .activity-zone__main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 24px;
        align-items: start;
    }

    .activity-zone__side {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .zone-legend {
        margin-top: 0;
    }

    /* 시안 W07D: 방향 pill은 우하단, 'FW #7' 라벨은 우상단(공격 방향인 오른쪽 골문 쪽) */
    .pitch-direction {
        left: auto;
        right: 20px;
        bottom: 18px;
        transform: none;
    }

    .pitch-label {
        top: 18px;
        right: 18px;
    }
}

/* =========================================================================
   이적시장 탭 (transfers-render.js)

   2026-08-07 신설. `packages/shared/css` 전체에 `.transfer` 매치 0건임을 grep으로 확인하고 만들었다
   (`.player-stats` 충돌 사고 재발 방지 — TROUBLESHOOTING.md).

   대비 근거: 유형 배지는 전부 **연한 배경 + 진한 텍스트**다.
   --warning(3.19:1)·--success(3.77:1)·--accent-live(3.12:1) 위에 흰 텍스트를 올리지 않는다(CLAUDE.md §2.1).
     #1e3a8a on #dbeafe = 8.6:1 / #7c2d12 on #fef3c7 = 8.42:1
     #14532d on #dcfce7 = 9.9:1 / #581c87 on #f3e8ff = 9.4:1 / #334155 on #f1f5f9 = 9.7:1
   ========================================================================= */
.transfer-search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.transfer-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-strong);
    font-size: 15px;
}

.transfer-search input:focus-visible {
    outline: 2px solid var(--accent-live);
    outline-offset: -1px;
}

.transfer-search button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.transfer-search button:active {
    transform: scale(0.95);
}

.transfer-hint,
.transfer-note {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    word-break: keep-all;
}

/* --- 팀 검색 결과 --- */
.transfer-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.transfer-team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.transfer-team:hover {
    border-color: var(--brand-primary);
}

.transfer-team.is-selected {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

.transfer-team:focus-visible {
    outline: 2px solid var(--accent-live);
    outline-offset: 2px;
}

.transfer-team__logo {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    object-fit: contain;
}

.transfer-team__country {
    font-weight: 500;
    opacity: 0.75;
    font-size: 12px;
}

/* --- 이적 목록 --- */
.transfer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.transfer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
    background: var(--surface);
}

/* 방향은 색 단독으로 전달하지 않는다 — 화살표 기호 + 텍스트 라벨을 함께 렌더한다 */
.transfer-row--in {
    border-left-color: #14532d;
}

.transfer-row--out {
    border-left-color: #96271f;
}

.transfer-row__dir {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 40px;
}

.transfer-row__sign {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.transfer-row--in .transfer-row__sign,
.transfer-row--in .transfer-row__dirlabel {
    color: #14532d;
}

.transfer-row--out .transfer-row__sign,
.transfer-row--out .transfer-row__dirlabel {
    color: #96271f;
}

.transfer-row__dirlabel {
    font-size: 11px;
    font-weight: 700;
}

.transfer-row__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.transfer-row__player {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 700;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.transfer-row__club {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.transfer-row__logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.transfer-row__meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.transfer-row__date {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.transfer-type {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: #f1f5f9;
    color: #334155;
}

.transfer-type--ttype-transfer {
    background: #dbeafe;
    color: #1e3a8a;
}

.transfer-type--ttype-loan {
    background: #fef3c7;
    color: #7c2d12;
}

.transfer-type--ttype-free {
    background: #dcfce7;
    color: #14532d;
}

.transfer-type--ttype-return {
    background: #f3e8ff;
    color: #581c87;
}

@media (max-width: 420px) {
    .transfer-row {
        flex-wrap: wrap;
    }

    .transfer-row__meta {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }
}

/* ============================================================
   팀 스쿼드 (순위표 드릴다운) — 2026-08-09 신규
   모달 셸(.detail-backdrop/.detail-panel/.detail-header/.detail-body)은
   경기 상세와 **공유**한다. 여기서는 본문 전용 클래스만 정의한다.
   ============================================================ */

.squad-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 16px;
    border-bottom: 1px solid #e2e8f0;
}

.squad-head__badge {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.squad-head__badge--empty {
    display: inline-block;
    border-radius: 50%;
    background: #e2e8f0;
}

.squad-head__name {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.squad-head__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    font-size: 13px;
    color: #64748b;
}

.squad-head__count {
    font-weight: 700;
    color: #0f172a;
}

.squad-group {
    margin-top: 20px;
}

.squad-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 14px;
}

.squad-group__count {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

/* 포지션 배지 — 색만으로 의미를 전달하지 않는다(디자인시스템 §8).
   GK/DF/MF/FW 텍스트를 함께 싣고, 대비 확보를 위해 연한 배경 + `--pos-*-strong` 텍스트를 쓴다. */
.squad-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: #f1f5f9;
    color: #334155;
}

.squad-pos--gk { background: #fdf3e0; color: var(--pos-gk-strong); }
.squad-pos--df { background: #e8f1f8; color: var(--pos-df-strong); }
.squad-pos--mf { background: #e7f5ed; color: var(--pos-mf-strong); }
.squad-pos--fw { background: #fbeceb; color: var(--pos-fw-strong); }

.squad-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 터치 타깃 ≥40px 확보 (디자인시스템 §8) */
.squad-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 8px;
}

.squad-player:hover {
    background: #f8fafc;
}

.squad-player__no {
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
    border-left: 3px solid transparent;
    padding-left: 4px;
}

.squad-player__no--gk { border-left-color: var(--pos-gk); }
.squad-player__no--df { border-left-color: var(--pos-df); }
.squad-player__no--mf { border-left-color: var(--pos-mf); }
.squad-player__no--fw { border-left-color: var(--pos-fw); }

.squad-player__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.squad-player__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.squad-captain {
    padding: 0 5px;
    border-radius: 4px;
    background: #fef3c7;
    color: #7c2d12;
    font-size: 11px;
    font-weight: 800;
}

.squad-player__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
}

.squad-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.squad-stat__label {
    color: #94a3b8;
}

.squad-stat__value {
    font-weight: 700;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   해외파 한국 선수 이적 피드 — 2026-08-09 신규
   팀 검색 UI(.transfer-search)를 대체. 기존 .transfer-* 클래스는
   빈 상태·주석(.transfer-empty/.transfer-note)에서 계속 쓰인다.
   ============================================================ */

.ktransfer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ktransfer {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.ktransfer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ktransfer__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* '오피셜' 배지 — 날짜가 공식 발표일임을 색이 아니라 텍스트로 밝힌다(디자인시스템 §8) */
.ktransfer__official {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ktransfer__type {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    background: #f1f5f9;
    color: #334155;
}

/* 유형별 구분 — 전부 연한 배경 + 진한 텍스트(흰 글씨 대비 위반 회피, §2.1) */
.ktransfer__type--transfer { background: #e8f1f8; color: #1f5f8b; }
.ktransfer__type--loan { background: #fdf3e0; color: #8a5a00; }
.ktransfer__type--free { background: #e7f5ed; color: #1b7a43; }
.ktransfer__type--return { background: #f1f5f9; color: #475569; }

.ktransfer__player {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.ktransfer__move {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.ktransfer__club {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ktransfer__club--to {
    font-weight: 700;
    color: #0f172a;
}

.ktransfer__logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.ktransfer__arrow {
    color: #94a3b8;
    font-weight: 800;
}

/* ──────────────────────────────────────────────────────────────
   이적 탭 — 정형 기록 / 뉴스 2구획 (2026-08-09)

   두 소스를 **섞지 않고 구획**한다. 위(.ktrecords)는 상류 API가 확정한 기록,
   아래(.ktnews)는 언론 보도를 자동 수집한 것이다. 한 목록에 섞으면 둘의 인식적
   지위가 같아 보이는데, 이 리포는 추정·자동수집물에 배지 병기를 요구한다(§4.2).
   ────────────────────────────────────────────────────────────── */

.ktrecords__title,
.ktnews__title {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 4px;
}

.ktrecords__gap-note {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 10px;
    line-height: 1.5;
}

.ktnews {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.ktnews__disclaimer {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 12px;
    line-height: 1.5;
}

/* 축소 모드 고지 — 실패를 감추지 않는다. 연한 배경 + 진한 텍스트(§2.1 대비 규약) */
.ktnews__degraded {
    padding: 8px 12px;
    margin: 0 0 12px;
    border-radius: 8px;
    background: #fef3c7;
    color: #7c2d12;
    font-size: 12px;
    font-weight: 700;
}

.ktnews__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ktnews__card {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.ktnews__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #64748b;
}

/* [뉴스] 배지 — 이 항목이 확정 기록이 아니라 보도임을 색이 아니라 텍스트로 밝힌다 */
.ktnews__badge {
    padding: 1px 6px;
    border-radius: 4px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ktnews__date {
    font-variant-numeric: tabular-nums;
}

.ktnews__source {
    font-weight: 700;
    color: #475569;
}

.ktnews__headline {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #1e293b;
    text-decoration: none;
    word-break: keep-all;      /* 한국어 어절 중간에서 끊기지 않게 */
    overflow-wrap: anywhere;   /* 그래도 넘치면 강제 줄바꿈 — 375px 보호 */
}

.ktnews__headline:hover,
.ktnews__headline:focus-visible {
    text-decoration: underline;
    color: var(--brand-primary);
}

.ktnews__related {
    margin-top: 8px;
}

.ktnews__rel-toggle {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    min-height: 40px;          /* 터치 타깃 ≥40px(디자인시스템 §8) */
    display: flex;
    align-items: center;
}

.ktnews__rel-toggle:focus-visible {
    outline: 2px solid var(--accent-live);
    outline-offset: 2px;
}

.ktnews__rel-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 10px;
    border-left: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 관련 기사도 터치 타깃 ≥40px(디자인시스템 §8). 한 줄짜리 제목이 19px로 떨어지는 것을
   375px 실측에서 확인해 min-height로 올렸다 — 두 줄 이상이면 자연히 넘는다. */
.ktnews__rel-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
}

.ktnews__rel-link {
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
    text-decoration: none;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ktnews__rel-link:hover,
.ktnews__rel-link:focus-visible {
    text-decoration: underline;
    color: var(--brand-primary);
}

.ktnews__rel-meta {
    font-size: 11px;
    color: #94a3b8;
}

.ktnews__attribution {
    font-size: 11px;
    color: #94a3b8;
    margin: 12px 0 0;
    line-height: 1.5;
}