/* ============================================================
   home.css — 홈 전용 디자인 (v2.21.0 🏟 스포츠 중계 스타일)
   사용자 결정 2026-10-29: "너무 밋밋하다" → 분위기 '스포츠 중계', 범위 '홈 먼저'.
   - 포인트 색 --brand(중계 레드) 하나 + 굵은 숫자(점수판) + 섹션 제목 왼쪽 색 띠
   - 상단 배너는 다크·밝은 모드 모두 어두운 중계 화면으로 고정 (엠블럼 검은 배경과도 어울림)
   - 홈에서만 쓰는 클래스(hm-*)와 body[data-page="home"] 범위로만 덮어써 다른 페이지 영향 없음
     → 마음에 들면 공통 부품(style.css·components.css)으로 옮겨 전체 페이지에 확장
   ============================================================ */
:root {
  --brand:      #e5323b;               /* 중계 레드 (다크) */
  --brand-2:    #ff6a3d;               /* 그라데이션 끝 */
  --brand-soft: rgba(229,50,59,.12);
}
:root[data-theme="light"] {
  --brand:      #d11f2a;
  --brand-2:    #f0522a;
  --brand-soft: rgba(209,31,42,.08);
}

/* ---------- 🏟 상단 중계 배너 ---------- */
.hm-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-radius: var(--radius-lg);
  color: #f2f4f6;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(229,50,59,.38), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(88,166,255,.16), transparent 60%),
    linear-gradient(160deg, #1a1d23 0%, #0b0c0e 70%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* 경기장 잔디 줄무늬 느낌의 사선 패턴 */
.hm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 22px, transparent 22px 44px);
}
/* 아래쪽 레드 띠 (중계 자막 바) */
.hm-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.hm-hero-top { display: flex; align-items: center; gap: var(--sp-4); }
.hm-logo {
  flex: none; width: 84px; height: 84px; object-fit: contain; border-radius: 14px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.hm-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: rgba(255,255,255,.75);
}
.hm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 rgba(229,50,59,.7); animation: hm-pulse 1.8s infinite; }
@keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 rgba(229,50,59,.7); } 70% { box-shadow: 0 0 0 8px rgba(229,50,59,0); } 100% { box-shadow: 0 0 0 0 rgba(229,50,59,0); } }
.hm-name {
  margin: 2px 0 0; font-size: 34px; line-height: 1.05; font-weight: 900; letter-spacing: -.5px;
  font-style: italic;
}
.hm-name span {
  margin-left: 6px; font-size: .62em; letter-spacing: 1px;
  background: linear-gradient(90deg, #ffffff, #b9c0c8); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hm-sub { margin-top: 6px; font-size: var(--fs-sm); color: rgba(255,255,255,.72); }
.hm-sub b { color: #fff; }

/* 시즌 진행 막대 (점수판 아래 경기 시간 바 느낌) */
.hm-season { margin-top: var(--sp-4); }
.hm-season-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-xs); color: rgba(255,255,255,.7); }
.hm-dday {
  font-size: var(--fs-sm); font-weight: 900; font-style: italic; letter-spacing: .5px; color: #fff;
  padding: 2px 10px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.hm-track { position: relative; height: 8px; margin-top: 8px; border-radius: 999px; background: rgba(255,255,255,.12); }
.hm-track .bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffffff, #c7ccd1); }
.hm-track .mid { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--brand); border-radius: 1px; }
.hm-track-lab { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }

/* ---------- 섹션 제목: 왼쪽 레드 띠 ---------- */
body[data-page="home"] .section-title {
  font-size: var(--fs-lg); font-weight: 900; letter-spacing: -.3px;
  padding-left: 12px; position: relative;
}
body[data-page="home"] .section-title::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

/* ---------- 📊 시즌 요약: 점수판 숫자 ---------- */
body[data-page="home"] .stat-tile {
  position: relative; overflow: hidden; text-align: left;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 2px);
}
body[data-page="home"] .stat-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); opacity: .85;
}
body[data-page="home"] .stat-tile .value {
  font-size: 34px; line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  background: none; color: var(--silver-bright);
}
body[data-page="home"] .stat-tile .value small { font-size: .5em; font-style: normal; margin-left: 2px; color: var(--text-muted); }
body[data-page="home"] .stat-tile .label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); margin-top: 8px; }
body[data-page="home"] .stat-tile.alert { border-color: var(--danger); background: var(--danger-bg); }
body[data-page="home"] .stat-tile.alert .value { color: var(--danger); }
body[data-page="home"] .stat-tile.alert::after { background: var(--danger); }
.hm-mini { height: 4px; margin-top: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hm-mini i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

/* ---------- 🔥 연승 · 🧊 연패 · 📅 7일: 카드 위쪽 색 띠 ---------- */
body[data-page="home"] #activity .card { border-top: 3px solid var(--silver-dim); }
body[data-page="home"] #activity .card.hm-hot { border-top-color: var(--brand); }
body[data-page="home"] #activity .card.hm-cold { border-top-color: var(--info); }
body[data-page="home"] #activity .member-row .meta { font-weight: 900 !important; font-style: italic; font-variant-numeric: tabular-nums; }
body[data-page="home"] #activity .card.hm-hot .member-row .meta { color: var(--brand) !important; }
body[data-page="home"] #activity .card.hm-cold .member-row .meta { color: var(--info) !important; }

/* ---------- 🔗 바로가기: 타일 ---------- */
.hm-links { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .hm-links { grid-template-columns: repeat(3, 1fr); } }
.hm-link {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 112px;
  padding: var(--sp-4); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.hm-link:hover { transform: translateY(-2px); border-color: var(--brand); }
.hm-link:active { transform: translateY(0); }
.hm-link-ico {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: 12px; background: var(--brand-soft);
}
.hm-link-name { font-weight: 900; font-size: var(--fs-base); }
.hm-link-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.hm-link::after {
  content: "→"; position: absolute; right: 14px; top: 14px; font-weight: 900; color: var(--text-dim);
  transition: transform .15s, color .15s;
}
.hm-link:hover::after { transform: translateX(3px); color: var(--brand); }
/* 대표 메뉴(도륙리그)는 강조 */
.hm-link.feature {
  grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: var(--sp-3);
  color: #fff; border: none;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%);
}
.hm-link.feature .hm-link-ico { background: rgba(255,255,255,.2); }
.hm-link.feature .hm-link-desc { color: rgba(255,255,255,.85); }
.hm-link.feature::after { color: #fff; top: 50%; transform: translateY(-50%); }
.hm-link.feature:hover::after { transform: translate(3px, -50%); color: #fff; }

@media (max-width: 380px) {
  .hm-logo { width: 68px; height: 68px; }
  .hm-name { font-size: 28px; }
  body[data-page="home"] .stat-tile .value { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .hm-dot { animation: none; } .hm-link, .hm-link::after { transition: none; } }