/* 메인(홈) — Figma 03.메인 시안 값 1:1. 단일 컬럼(우측 레일 없음).
   섹션: 스포츠중계(LiveCard) · 3패널(결장자/라인업/픽스터) · 숏팁(shorttip.css 재사용) · 진행중대회 · 상금내역 · 스포츠뉴스 · 빈상태.
   px→rem(÷16), 포인트 블루는 시안대로 #2563EB / 강조 #1A56DB. */

.hm-main { display: flex; flex-direction: column; gap: 1.375rem; }   /* 섹션 간 22px */
.hm-section { display: flex; flex-direction: column; gap: 0.875rem; }  /* 타이틀→본문 14px */

/* 섹션 타이틀 — 18px/700/-0.025em #0F172A + 작은 회색 chevron(13px)
   ⚠ 시안은 섹션마다 크기가 다르다: 스포츠중계 19px/800(+세로바+더보기) · 숏팁/진행중대회/상금 18px/700 · 뉴스 16px/700.
     기본을 18px 로 두고 앞뒤 두 경우만 변형 클래스로 덮는다. */
.hm-sec-head { display: flex; align-items: center; gap: 0.5rem; }
.hm-sec-title { font-size: 1.125rem; font-weight: 700; line-height: 1.6875rem; letter-spacing: -0.025em; color: #0F172A; margin: 0; }
.hm-sec-chevron { color: #94A3B8; font-size: 0.8125rem; line-height: 1; }
.hm-sec-more { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: #98A0AE; text-decoration: none; }
.hm-sec-more:hover { color: #1A56DB; }

/* 스포츠 중계(리드 섹션) — 파란 세로바 + 19px/800. 세로바는 요소를 늘리지 않고 ::before 로 둔다. */
.hm-sec-head--lead { gap: 0.625rem; }
.hm-sec-head--lead .hm-sec-title {
    font-size: 1.1875rem; font-weight: 800; line-height: 1.75rem; letter-spacing: -0.025em; color: #1F2430;
    display: flex; align-items: center; gap: 0.625rem;
}
.hm-sec-head--lead .hm-sec-title::before {
    content: ""; flex: none; width: 0.25rem; height: 1.125rem; background: #1A56DB; border-radius: 999px;
}
/* 뉴스 — 시안 16px/700 */
.hm-sec-head--sm .hm-sec-title { font-size: 1rem; line-height: 1.5rem; }

/* ===== 1) 스포츠 중계 — LiveCard ===== */
/* ⚠⚠ **`minmax(0, 1fr)` 이어야 한다 — `1fr` 이 아니다.** `1fr` = `minmax(auto, 1fr)` 이고 그 `auto` 는
     **min-content 바닥**이라, 카드 안의 `nowrap` 텍스트(`.hm-live-title`)가 트랙을 그 길이만큼 벌린다.
     그러면 4열 그리드가 컨테이너를 넘어 **가로로 삐져나간다**(부모가 잘라내면 스크롤도 안 생겨 눈에 안 띈다).
     아래 반응형(2열·1열)도 같은 이유로 `minmax(0, …)` 다 — 한 곳만 고치면 그 폭에서만 터진다. */
.hm-live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
/* ⚠ 카드 내부는 **투명**이다 — 흰색을 깔지 않는다. 페이지 배경(app-shell #F0F4F8)이 그대로 비치고
     카드는 테두리로만 구분된다. 흰색을 깔면 배경보다 밝아져 카드가 떠 보인다. */
.hm-live-card {
    display: flex; flex-direction: column; gap: 0.625rem;
    border: 1px solid #D6D9E4; border-radius: 0.875rem;
    padding: 0.75rem 0.875rem 1.0625rem;
    background: transparent;
}
.hm-live-league {
    align-self: flex-start;
    background: rgba(37, 99, 235, 0.08); color: #2563EB;
    font-size: 0.875rem; line-height: 1.125rem;
    padding: 0.28rem 0.5rem; border-radius: 0.5rem;
}
/* 경기명(홈 VS 원정) — **한 줄로 고정하고 넘치면 말줄임**.
   ⚠ 팀명 길이는 데이터라 제어할 수 없다 — 그대로 두면 두 줄로 떨어져(실측: 긴 팀명 42px = 2줄,
     짧은 팀명 21px = 1줄) 카드마다 제목 위치가 어긋나고 아래 버튼 줄이 밀린다.
   ⚠ **`min-width: 0` 이 필요 없다** — 부모(`.hm-live-card`)가 flex **column** 이라 이 요소의 폭은
     `align-items: stretch` 로 이미 카드 폭에 묶여 있다(가로 flex 자식일 때와 다르다).
     대신 **그리드 트랙을 `minmax(0, 1fr)` 로 둬야 한다** — 아래 `.hm-live-grid` 주석 참조. */
.hm-live-title {
    font-size: 1rem; font-weight: 700; line-height: 1.3125rem; color: #0F172A; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠ 메인 카드에는 **피드 강조(`title_bold`/`title_color`)를 쓰지 않는다**(2026-08-20 결정) —
     한 번 적용했다가 걷어냈다(실측 139건 중 94건이 빨강이라 상단이 온통 빨간 굵은 제목이 됐다).
     그래서 `.is-bold` 규칙도 두지 않는다. 강조는 중계 페이지 팀명에만 있다(`broadcast.css`). */
.hm-live-btn {
    display: flex; align-items: center; justify-content: center;
    height: 2.1875rem; padding: 0.375rem 0.75rem; margin-top: 0.25rem;
    background: linear-gradient(162.65deg, #139AFB 8.18%, #002FC9 91.82%);
    border-radius: 0.5625rem; color: #fff; font-size: 0.875rem; font-weight: 700;
    text-decoration: none; transition: filter 0.15s ease;
}
.hm-live-btn:hover { color: #fff; filter: brightness(1.06); }
/* 진행예정 — 아직 볼 수 없는 방송이라 '시청하기' 대신 시작 시각을 같은 자리에 둔다.
   버튼과 같은 상자를 쓰되 링크가 아니어서(파랑 그라디언트 제거) 누를 수 있는 것처럼 보이지 않게 한다. */
.hm-live-btn--wait {
    background: #F1F5F9; color: #64748B; font-weight: 600; cursor: default;
}
.hm-live-btn--wait:hover { color: #64748B; filter: none; }

/* ===== 2) 3패널 (결장자정보 / 라인업 / 픽스터분석) ===== */
.hm-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
/* 시안 InfoCard: border 1px #DDE3EC · radius 10px (헤드 보더와 같은 색이어야 카드 테두리가 헤드 밑선과 이어져 보인다) */
.hm-panel { display: flex; flex-direction: column; background: #fff; border: 1px solid #DDE3EC; border-radius: 0.625rem; }
/* 패널 헤드 — 시안: 연한 파랑 배경(#F5F8FF) + 하단 보더 #DDE3EC, 높이 50px.
   ⚠ 배경이 있어야 카드 안에서 헤더가 분리돼 보인다(투명이면 본문과 한 덩어리로 보인다). */
.hm-panel-head {
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 3.125rem; padding: 0 0.875rem;
    background: #F5F8FF;
    border-bottom: 1px solid #DDE3EC;
    border-radius: 0.625rem 0.625rem 0 0;   /* 카드 라운드(10px)와 같은 값 — 배경이 모서리 밖으로 새지 않게 */
}
.hm-panel-title { font-size: 0.9375rem; font-weight: 700; line-height: 1.375rem; color: #0F172A; margin: 0; }
.hm-panel-more { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: #94A3B8; text-decoration: none; }
.hm-panel-more:hover { color: #1A56DB; }
.hm-panel-body { padding: 0.375rem; display: flex; flex-direction: column; }

/* 패널 행 공통 */
.hm-row {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem; border-radius: 0.375rem; text-decoration: none;
    transition: background 0.12s ease;
}
.hm-row:hover { background: #F7F8F8; }
.hm-row-ic { width: 0.75rem; height: 0.75rem; border-radius: 0.375rem; background: #E2E8F0; flex-shrink: 0; }
/* 결장자 — 리그 칩 + 이름 + 날짜 */
/* 리그 칩 — 시안값(Figma): bg rgba(29,78,216,0.08) / text #1D4ED8 / 11px 700 / radius 4px / padding 2px 8px.
   ⚠ 최초 구현이 회색(rgba(15,23,42,.07)/#555)이었는데 시안과 달랐다(2026-08-11 정정). */
.hm-row-league {
    flex-shrink: 0; padding: 0.125rem 0.5rem; border-radius: 0.25rem;
    background: rgba(29, 78, 216, 0.08); color: #1D4ED8;
    font-size: 0.6875rem; font-weight: 700; line-height: 1rem; white-space: nowrap;
}
.hm-row-name { font-size: 0.93rem; line-height: 1.375rem; letter-spacing: -0.005em; color: #0F172A; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row-name.is-grow { flex: 1 1 auto; }
.hm-row-date { margin-left: auto; flex-shrink: 0; font-size: 0.6875rem; line-height: 1rem; color: rgba(108, 108, 108, 0.5); }

/* ===== 4) 진행중 대회 (Figma: 중립 테두리 흰 카드 + 진행중 배지) ===== */
.hm-tn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }   /* 14px */
.hm-tn-card {
    display: flex; flex-direction: column; gap: 0.6875rem;   /* 11px */
    background: #fff;
    border: 1px solid #E8EBF0;                                /* 시안 중립 테두리 */
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    border-radius: 0.75rem;                                   /* 12px */
    padding: 1.25rem;                                         /* 20px */
    text-decoration: none;
}
.hm-tn-head { display: flex; align-items: center; gap: 0.5rem; }
.hm-tn-logo { font-size: 0.9375rem; font-weight: 800; line-height: 1.3125rem; }   /* 색은 인라인(회사색) */
.hm-tn-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin-left: auto; flex-shrink: 0;
    padding: 0.09375rem 0.375rem;                             /* ~1.5px 6px */
    background: rgba(225, 29, 42, 0.1); border-radius: 0.375rem;
    font-size: 0.65625rem; font-weight: 800; line-height: 0.9375rem; color: #E11D2A;   /* 10.5px */
}
.hm-tn-badge::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #E11D2A; }   /* 6px 점 */
.hm-tn-title { font-size: 0.9375rem; font-weight: 700; line-height: 1.3125rem; letter-spacing: -0.005em; color: #1F2430; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-tn-date { font-size: 0.78125rem; font-weight: 600; line-height: 1.125rem; letter-spacing: -0.005em; color: #98A0AE; }   /* 12.5px/600 */

/* ===== 5) 상금 내역 (Figma: 일반 18px 타이틀 + 흰 카드에 행 구분선) ===== */
.hm-prize-list {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid #E8EBF0;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    border-radius: 0.625rem;           /* 10px — 시안. ⚠ 빈 상태 카드(.hm-prize-section .hm-empty)와 같은 값이어야
                                          데이터 유무에 따라 같은 자리의 카드 모서리가 달라 보이지 않는다. */
    overflow: hidden;                  /* 행 구분선이 라운드 밖으로 안 나가게 */
}
.hm-prize-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.875rem 1.25rem;         /* 14px 20px */
    border-bottom: 1px solid #F1F3F7;
}
.hm-prize-row:last-child { border-bottom: none; }
.hm-prize-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.hm-prize-ava { width: 2.3125rem; height: 2.6875rem; border-radius: 0.5rem; background: #EEF1F5; flex-shrink: 0; }   /* 37x43 */
.hm-prize-name { font-size: 0.875rem; font-weight: 700; line-height: 1.25rem; color: #1F2430; }   /* 14px/700 */
.hm-prize-sub { font-size: 0.75rem; line-height: 1.0625rem; color: #98A0AE; }   /* 12px */
.hm-prize-amt { flex-shrink: 0; font-size: 0.9375rem; font-weight: 800; line-height: 1.375rem; color: #1A56DB; white-space: nowrap; }   /* 15px/800 */

/* ===== 6) 스포츠 뉴스 (Figma: 흰 카드 히어로 + 사이드 리스트) ===== */
.hm-news { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: stretch; }
/* 대표 기사 — 이미지(상단) + 흰 본문(하단) */
.hm-news-hero {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #E8EBF0;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    border-radius: 0.75rem; overflow: hidden; min-height: 20rem; text-decoration: none;
}
.hm-news-hero-img { flex: 1 1 auto; min-height: 12rem; background: linear-gradient(120deg, #EEF1F6, #E6EAF1); }
.hm-news-hero-body { flex-shrink: 0; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; background: #fff; }
.hm-news-badges { display: flex; align-items: center; gap: 0.375rem; }
.hm-badge { display: inline-flex; align-items: center; padding: 0.09375rem 0.375rem; border-radius: 0.375rem; background: #EEF3FF; font-size: 0.65625rem; font-weight: 800; line-height: 0.9375rem; color: #1A56DB; }   /* 10.5px · 시안 파랑 배지 */
.hm-badge-hot { background: rgba(225, 29, 42, 0.1); color: #E11D2A; }   /* 시안 HOT 빨강 */
.hm-news-hero-title { font-size: 1.125rem; font-weight: 800; line-height: 1.5625rem; color: #1F2430; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-news-hero-desc { font-size: 0.84375rem; line-height: 1.25rem; color: #5B6473; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-news-hero-date { font-size: 0.75rem; line-height: 1.0625rem; color: #98A0AE; }
/* 사이드 기사 */
.hm-news-side { display: flex; flex-direction: column; gap: 1rem; }
.hm-news-item { display: flex; gap: 0.75rem; padding: 0.75rem; background: #fff; border: 0.6px solid rgba(15, 23, 42, 0.06); border-radius: 0.875rem; text-decoration: none; }
.hm-news-thumb { width: 5rem; height: 4rem; border-radius: 0.5rem; background: linear-gradient(120deg, #EEF1F6, #E6EAF1); flex-shrink: 0; }
.hm-news-item-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hm-news-item-meta { display: flex; align-items: center; gap: 0.375rem; }
.hm-badge-sm { display: inline-flex; align-items: center; padding: 0.09375rem 0.375rem; border-radius: 0.375rem; background: #EEF3FF; font-size: 0.5625rem; font-weight: 800; line-height: 0.9375rem; color: #1A56DB; }   /* 9px · 시안 파랑 배지 */
.hm-news-item-time { font-size: 0.625rem; color: rgba(15, 23, 42, 0.6); }
.hm-news-item-title { font-size: 0.75rem; font-weight: 700; line-height: 1rem; color: #0F172A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 뉴스 카테고리 배지는 시안대로 파랑 단색(.hm-badge/.hm-badge-sm)으로 통일 — 종목별 색상 클래스 제거(hm-cat-*는 마크업에 남아도 무효). */

/* ===== 빈 상태 (데이터없는경우) ===== */
.hm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2.25rem 1rem; text-align: center; }
.hm-empty-ic { width: 3.25rem; height: 3.25rem; border-radius: 999px; background: #F1F5F9; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 1.35rem; }
.hm-empty-title { font-size: 0.875rem; font-weight: 700; line-height: 1.3125rem; color: #64748B; }
.hm-empty-sub { font-size: 0.75rem; line-height: 1.125rem; color: #94A3B8; }

/* 패널(결장자/라인업/픽스터) 빈 상태 — 시안은 **아이콘 없이 문구 한 줄**, weight 500.
   ⚠ 아이콘을 넣으면 3패널이 나란히 서는 자리에서 회색 원 3개가 먼저 눈에 들어와, 정작 카드가 비었다는
     사실보다 장식이 강해진다. 섹션형(중계·숏팁·대회·상금·뉴스)만 아이콘을 쓴다. */
.hm-empty.in-panel { padding: 1.75rem 1rem; flex: 1 1 auto; }
.hm-empty.in-panel .hm-empty-title { font-weight: 500; }

/* 상금 내역 빈 상태 — 시안은 흰 카드 안이다.
   ⚠ 흰 카드가 데이터 목록(.hm-prize-list)에만 걸려 있어서, 비면 카드째 사라지고 문구만 배경 위에 떠 있었다. */
.hm-prize-section .hm-empty {
    background: #fff; border-radius: 0.625rem;
    padding: 2.3125rem 1rem 0.875rem;   /* 37px 0 14px */
}

/* ===== 반응형 ===== */
@media (max-width: 1100px) {
    .hm-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* minmax(0,…) 이유는 위 주석 */
    .hm-news { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .hm-panel-grid, .hm-tn-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .hm-live-grid { grid-template-columns: minmax(0, 1fr); }   /* minmax(0,…) 이유는 위 주석 */
}