/* ===================================================
 * @module tdf-home-widget | @vars 전역 다크모드 변수 재사용 (신규 변수 없음 — 케이스 A)
 * @pair inc/tdf-home-widget.php
 * @flow 홈/프론트 화면 최상단 TDF 미리보기 — ① 헤더+진행바 박스 1개,
 *       ② 요약 카드 + 저지4종 카드 = 개별 박스 5개를 한 줄에 나열
 *       (감싸는 배경 박스 없이 각 카드가 독립적으로 떠 있는 형태, css/tdf-stage.css
 *       .tdf-jersey-card 클래스 재사용)
 *
 * 라이트 모드 폴백 안내: css/tdf-stage.css와 동일 원칙 — 이 파일이 쓰는
 * --bg-/--text-/--border-/--link 계열 전역 변수는 body.dark-theme 프리셋 안에서만
 * 정의되므로 모든 사용처에 라이트 폴백 값을 명시한다.
 * =================================================== */

.tdf-home-widget-wrap {
    margin: 32px auto 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 위젯 바로 다음에 오는 본문 그리드(Blocksy [data-vertical-spacing]) 상단 여백만 50% 축소.
   --theme-content-vertical-spacing은 사이트 전역 그리드 공용 변수라 여기서 직접 바꾸면
   다른 아카이브 페이지까지 영향을 주므로, 위젯의 인접 형제일 때만 스코프를 좁혀서 재정의 */
.tdf-home-widget-wrap + [data-vertical-spacing] {
    padding-top: calc(var(--theme-content-vertical-spacing) / 2);
}

.tdf-home-group {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 10px;
    padding: 14px 20px;
}

.tdf-home-group-progress {
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

.tdf-home-progress-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px 16px;
    padding: 14px 20px;
}

/* ── 전체보기 탭 (박스 세로 전체를 채우는 버튼형 링크, 오른쪽 끝 flush) ── */
.tdf-home-more-sep {
    flex-shrink: 0;
    align-self: stretch;
    width: 1px;
    margin: 14px 0;
    background: var(--border-main, #e2e2e8);
}
/* body.dark-theme a / a:visited (css/dark-mode-core.css)가 요소 2개+클래스 1개로
   단일 클래스 선택자보다 명세도가 높아 흰 글씨를 덮어쓰므로, 조상 클래스로 감싸 명세도를 올린다.
   :visited도 별도 규칙(var(--link-visited))이라 명시적으로 같이 눌러줘야 함 */
.tdf-home-widget-wrap .tdf-home-more-tab,
.tdf-home-widget-wrap .tdf-home-more-tab:visited {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: #F5A623;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
    transition: filter var(--transition-fast, 0.15s ease);
}
.tdf-home-widget-wrap .tdf-home-more-tab:hover {
    filter: brightness(0.88);
    color: #ffffff;
}

.tdf-home-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.tdf-home-title-race {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--point-color, #C21807);
    white-space: nowrap;
}
.tdf-home-title-sep { color: var(--text-soft, #6e6e73); }
.tdf-home-title-stage {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main, #1d1d1f);
    white-space: nowrap;
}
.tdf-home-title-winner {
    font-size: 0.88rem;
    color: var(--text-soft, #6e6e73);
    white-space: nowrap;
}
.tdf-home-title-winner strong { color: var(--text-main, #1d1d1f); font-weight: 600; }

/* ── 요약 카드 + 저지4종 = 개별 박스 5개, 한 줄 배치 ──
   .tdf-jersey-grid(그리드 컨테이너)는 display:contents로 무력화해 그 자식인
   .tdf-jersey-card 4개가 이 flex 행의 직접 자식(=개별 박스)으로 흐르게 한다. */
.tdf-home-summary-jersey-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.tdf-home-summary-jersey-row .tdf-jersey-grid {
    display: contents;
}
.tdf-home-summary-jersey-row .tdf-jersey-card {
    flex: 1 1 200px;
}
/* 디스크립션을 생략한 홈 위젯 전용 슬림화 — 아카이브 배너는 디스크립션이 남아있어
   header 하단 구분선이 여전히 필요하므로 그쪽 스타일은 건드리지 않는다 */
.tdf-home-summary-jersey-row .tdf-jersey-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.tdf-home-summary-card {
    position: relative;
    flex: 1 1 200px;
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 8px;
    padding: 10px 14px 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.82rem;
    color: var(--text-soft, #6e6e73);
}
.tdf-home-summary-card::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 5px;
    border-radius: 3px;
    background: var(--point-color, #C21807);
}
.tdf-home-summary-item strong { color: var(--text-main, #1d1d1f); font-weight: 600; }

@media (max-width: 640px) {
    .tdf-home-group { padding: 12px 16px; }
    .tdf-home-group-progress { padding: 0; }
    .tdf-home-progress-main { padding: 12px 16px; }
    .tdf-home-more-tab { padding: 0 14px; font-size: 0.8rem; }
    .tdf-today-stage { font-size: 0.74rem; }
}