/* =========================================================================
   news.css — 축구 뉴스 페이지 전용 (apps/news/index.html)

   전제: variables.css(토큰) → style.css → app-nav.css → banner.css → live.css → news.css 순 로드.
   상태 컴포넌트(.skeleton / .empty-state / .error-state)와 헤더(.live-header)·
   KO/EN 토글(.lang-toggle)은 live.css의 것을 그대로 재사용한다 — 중복 정의하지 않는다.

   신규 클래스는 전부 `news-` 접두사다. 2026-08-07 기준 `packages/shared/css` 전체에
   `.news-` / `.chip` / `.attribution` 매치 0건임을 grep으로 확인하고 만들었다
   (`.player-stats` 충돌 사고의 재발 방지 — TROUBLESHOOTING.md 참조).

   대비(WCAG 2.x) 근거:
     #333333(--text-strong) on #ffffff        = 12.63:1  (기사 제목)
     #666666(--text-muted)  on #ffffff        = 5.74:1   (시각·보조)
     #000666(--brand-primary) on #ffffff      = 17.24:1  (활성 칩 텍스트)
     #7c2d12 on #fef3c7                       = 8.42:1   (영상 배지 — 연한 배경 + 진한 텍스트)
   ※ --accent-live(3.12:1)·--warning(3.19:1) 위에는 흰 텍스트를 올리지 않는다(CLAUDE.md §2.1).
   ========================================================================= */

/* --- 매체 필터 칩 --------------------------------------------------------- */
.news-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.news-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px; /* 터치 타깃 ≥40px */
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.news-chip:hover:not(:disabled) {
    background: rgba(0, 6, 102, 0.04);
    border-color: var(--brand-primary);
}

.news-chip:active:not(:disabled) {
    transform: scale(0.95);
}

.news-chip.is-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

/* 실패한 매체: 색만이 아니라 '!' 기호와 disabled 상태를 함께 준다(색 단독 신호 금지) */
.news-chip.is-down {
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: line-through;
}

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

.news-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
}

.news-chip.is-active .news-chip__count {
    background: rgba(255, 255, 255, 0.22);
}

.news-chip__count--down {
    background: #fef3c7;
    color: #7c2d12;
}

/* --- 목록 ---------------------------------------------------------------- */
.news-list {
    display: grid;
    gap: 12px;
}

@media (min-width: 768px) {
    .news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- 카드 ---------------------------------------------------------------- */
.news-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.news-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 16px -6px rgba(0, 6, 102, 0.25);
}

.news-card:active {
    transform: scale(0.99);
}

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

.news-card__body {
    flex: 1 1 auto;
    min-width: 0; /* 긴 제목이 그리드를 밀어내지 않게 */
}

.news-card__title {
    margin: 0 0 6px;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    word-break: keep-all;      /* 한국어 어절 중간 줄바꿈 방지 */
    overflow-wrap: anywhere;   /* 긴 URL·영문 단어는 강제 줄바꿈 */
}

.news-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* 출처 표기 — 이 페이지의 존재 이유다. 시각적으로 항상 읽히게 둔다. */
.news-card__source {
    font-weight: 700;
    color: var(--brand-primary);
}

.news-card__time {
    color: var(--text-muted);
}

.news-card__kind {
    padding: 1px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #7c2d12;
    font-weight: 700;
}

/* AI 번역 병기 — 번역 제목 아래 원문을 함께 보여준다.
   🔴 "AI 번역" 배지는 지우면 안 된다(CLAUDE.md §3.5 불변식).
   #7c2d12 on #fef3c7 = 8.42:1 · 원문 #666666 on #ffffff = 5.74:1 */
.news-card__original {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: -2px 0 6px;
    font-size: 12px;
    line-height: 1.45;
}

.news-card__ai {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fef3c7;
    color: #7c2d12;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.news-card__origtext {
    color: var(--text-muted);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* 외국어 항목 표기 — 클릭 전에 언어를 알려준다.
   #1e3a8a on #dbeafe = 8.6:1 */
.news-card__lang {
    padding: 1px 6px;
    border-radius: 4px;
    background: #dbeafe;
    color: #1e3a8a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.news-card__ext {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--text-muted);
}

/* --- 영상 카드 ------------------------------------------------------------ */
.news-card__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 112px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

.news-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
}

.news-card__play svg {
    width: 26px;
    height: 26px;
    color: #ffffff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

@media (max-width: 380px) {
    .news-card__thumb {
        width: 88px;
    }
}

/* --- '더 보기' ------------------------------------------------------------ */
/* 네트워크를 타지 않는다 — 이미 받아온 목록을 더 그릴 뿐이다(news-logic.js) */
.news-more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.news-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.news-more__btn:hover {
    border-color: var(--brand-primary);
    background: rgba(0, 6, 102, 0.04);
}

.news-more__btn:active {
    transform: scale(0.97);
}

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

.news-more__count {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* --- 저작권/출처 고지 ------------------------------------------------------ */
/* 휘발성 배너가 아니라 화면 안 지속 상태로 둔다(CLAUDE.md §3.2) */
.news-attribution {
    margin: 24px 0 0;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
    word-break: keep-all;
}