/* ===================================================
 * @module tdf-stage | @vars 전역 다크모드 변수 재사용 (신규 변수 없음 — 케이스 A)
 * @pair inc/cpt-tdf-stage.php, single-tdf-stage.php, archive-tdf-stage.php
 * @flow CPT tdf_stage: 스테이지 헤더 + 저지4종 + 결과/순위 테이블 + 아카이브 카드 그리드
 *
 * 라이트 모드 폴백 안내: --bg-, --text-, --border-, --link 계열 전역 변수는
 * body.dark-theme 프리셋 안에서만 정의되고 :root 라이트 정의가 없다
 * (css/changelog-v1.css와 동일한 상황). fallback 없는 var()는 선언 전체를
 * 무효화하므로(border가 통째로 사라짐) 이 파일의 모든 사용처에 라이트
 * 폴백 값을 명시한다. 다크모드에서는 프리셋 값이 그대로 우선 적용된다.
 * =================================================== */

/* ── 공통 컨테이너 ── */
/* 싱글/아카이브 양쪽 모두 이 클래스 하나로 통일 — single-tdf_stage.php도
   .tdf-archive-container를 그대로 씀 (2026-07-10 폭 버그 해결 과정에서
   확정. 자세한 경위는 doc/changelog.md 2026-07-10 항목 참고: 이 파일 맨 위
   헤더 주석에 있던 변수 축약 표기에 별표와 슬래시가 연속으로 들어간 문자열이
   있었는데, 그게 CSS 주석 종료 기호와 우연히 같아서 주석이 조기 종료됐고
   그 직후 첫 규칙이 파서에서 통째로 씹혔던 버그였음 — 클래스명·로딩순서와는
   무관했음. 주의: 이 파일에 주석 쓸 때 별표 다음 슬래시가 오는 문자 조합을
   절대 쓰지 말 것).
   box-sizing/overflow-x는 내부 그리드·플렉스 콘텐츠가 max-width를 뚫고 나가는
   것을 막기 위한 안전장치. */
.tdf-archive-container {
    box-sizing: border-box;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 24px 48px;
    overflow-x: hidden;
}

/* .tdf-article은 <article>이 아니라 일반 <div>임 (single-tdf_stage.php).
   Blocksy 부모 테마가 스코프 없이 모든 <article> 요소에 거는 폭/보더/패딩
   규칙(article { width/max-width/border/padding/box-shadow: var(--has-boxed*, ...) })을
   요소 자체를 바꿔서 원천적으로 피함 — !important 오버라이드 불필요.
   (아카이브 페이지도 애초에 <article> 태그를 쓰지 않아 이 문제가 없었음) */

/* ── 브레드크럼 ── */
.tdf-breadcrumb {
    font-size: 0.82rem;
    color: var(--text-soft, #6e6e73);
    margin-bottom: 12px;
}
.tdf-breadcrumb a { color: var(--text-soft, #6e6e73); text-decoration: none; }
.tdf-breadcrumb a:hover { color: var(--link-hover, #2540b8); }
.tdf-breadcrumb-sep { margin: 0 6px; }

/* ── 스테이지 헤더 ── */
.tdf-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.tdf-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
}
.tdf-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main, #1d1d1f);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tdf-type-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--bg-soft, #f1f3f6);
    color: var(--text-soft, #6e6e73);
    border: 1px solid var(--border-main, #e2e2e8);
}
/* 코스 타입별 색상 — project_tdf 앱(viewer/templates/base.html)과 동일 배색 유지 */
.tdf-type-badge.tdf-type-mountain { background: #f5f0ff; color: #6d28d9; border-color: #7c3aed44; }
.tdf-type-badge.tdf-type-flat     { background: #f0fdf4; color: #15803d; border-color: #16a34a44; }
.tdf-type-badge.tdf-type-hilly    { background: #fffbeb; color: #b45309; border-color: #d9770044; }
.tdf-type-badge.tdf-type-tt       { background: #eff6ff; color: #1d4ed8; border-color: #3b82f644; }
body.dark-theme .tdf-type-badge.tdf-type-mountain { background: #2a1a2e; color: #d8b4fe; border-color: #7c3aed55; }
body.dark-theme .tdf-type-badge.tdf-type-flat     { background: #162316; color: #86efac; border-color: #16a34a55; }
body.dark-theme .tdf-type-badge.tdf-type-hilly    { background: #2a1f12; color: #fcd34d; border-color: #d9770055; }
body.dark-theme .tdf-type-badge.tdf-type-tt       { background: #131e30; color: #93c5fd; border-color: #3b82f655; }
.tdf-route {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    color: var(--text-soft, #6e6e73);
    font-size: 0.9rem;
}
.tdf-km { font-family: monospace; color: #F5A623; font-weight: 700; }
.tdf-date, .tdf-time { color: var(--text-soft, #6e6e73); opacity: 0.85; }

.tdf-header-nav { display: flex; gap: 8px; flex-shrink: 0; }
.tdf-nav-btn {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    color: var(--text-main, #1d1d1f);
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.tdf-nav-btn:hover { border-color: var(--link-hover, #2540b8); color: var(--link-hover, #2540b8); }
.tdf-nav-btn-home {
    flex: 1 1 auto;
    min-width: 220px;
    text-align: center;
    padding: 8px 32px;
    font-weight: 600;
    border-color: var(--link, #3B4FCC);
    color: var(--link, #3B4FCC);
}
.tdf-nav-btn-home:hover { background: var(--bg-soft, #f1f3f6); border-color: var(--link-hover, #2540b8); color: var(--link-hover, #2540b8); }

/* ── 저지 4종 그리드 (왼쪽 컬러 바 + 상단 선수/배지 + 하단 획득 조건 설명) ── */
.tdf-jersey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.tdf-jersey-grid-compact { margin-bottom: 16px; }
/* 싱글 페이지 상단 하이라이트 모듈 왼쪽 컬럼(3/10 폭) 전용 — 세로 1열 스택 (2026-07-10 복구) */
.tdf-jersey-grid-stack { grid-template-columns: 1fr; margin-bottom: 0; gap: 10px; }
.tdf-jersey-card {
    position: relative;
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 8px;
    padding: 12px 14px 12px 20px;
    overflow: hidden;
}
.tdf-jersey-card::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 5px;
    border-radius: 3px;
    background: var(--tdf-jersey-color, var(--border-main, #e2e2e8));
}
.tdf-jersey-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1.5px solid var(--border-main, #e2e2e8);
}
.tdf-jersey-rider { min-width: 0; }
.tdf-jersey-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main, #1d1d1f);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tdf-jersey-team {
    font-size: 0.8rem;
    color: var(--text-soft, #6e6e73);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tdf-jersey-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-left: 10px;
    border-left: 1px solid var(--border-main, #e2e2e8);
}
.tdf-jersey-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--tdf-jersey-color, var(--border-main, #e2e2e8));
    border: 1px solid var(--border-main, #e2e2e8);
    flex-shrink: 0;
}
.tdf-jersey-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-soft, #6e6e73);
    white-space: nowrap;
}
.tdf-jersey-meaning {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-main, #1d1d1f);
}

@media (max-width: 767px) {
    .tdf-jersey-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 상단 하이라이트 모듈(싱글 페이지 전용, 3:7): 왼쪽 배지+Top5 세로 스택 / 오른쪽 스테이지 해설(article_ko) ── */
.tdf-highlight-section {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 28px;
}
.tdf-highlight-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tdf-highlight-right.tdf-content { margin-bottom: 0; }
@media (max-width: 768px) {
    .tdf-highlight-section { grid-template-columns: 1fr; }
}

/* ── 미니 배지 (우승/GC1위/팀1위) — 상단 모듈 왼쪽 세로 스택 ── */
.tdf-badge-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tdf-badge-stack .tdf-mini-badge { flex: none; width: 100%; }
.tdf-mini-badge {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    align-items: stretch;
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 8px;
    overflow: hidden;
}
.tdf-mini-badge-left {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    text-align: center;
    background: var(--bg-soft, #f1f3f6);
    border-right: 1px solid var(--border-main, #e2e2e8);
}
.tdf-mini-badge-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px 14px;
}
.tdf-mini-badge-icon { font-size: 1.2rem; line-height: 1; }
.tdf-mini-badge-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-soft, #6e6e73);
    line-height: 1.3;
}
.tdf-mini-badge-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main, #1d1d1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tdf-mini-badge-team-name {
    font-size: 0.72rem;
    color: var(--text-soft, #6e6e73);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ── 스테이지 결과(Top5) — 세로 리스트, 상단 모듈 왼쪽 배지 스택 아래 배치 ── */
.tdf-result-list {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 8px;
    padding: 4px 14px;
}
.tdf-result-list-header {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-main, #1d1d1f);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-divider, #ececf2);
}
.tdf-result-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-divider, #ececf2);
}
.tdf-result-list-item:last-child { border-bottom: none; }
.tdf-result-list-item .tdf-result-info { min-width: 0; flex: 1 1 auto; text-align: left; }
.tdf-result-list-item .tdf-rider-name { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdf-result-list-item .tdf-team-name { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdf-result-list-item .tdf-result-gap { font-family: monospace; font-size: 0.78rem; color: var(--text-soft, #6e6e73); flex: 0 0 auto; }

/* ── 하이라이트 본문 (드롭캡 색상은 style.css 공통 규칙에서 처리) ── */
/* font-size는 실제 프로덕션 본문에 적용되는 워드폰트 프리셋 클래스 has-medium-font-size 기준값
   (theme.json medium = 20px, --wp--preset--font-size--medium 변수)과 동일하게 맞춤 —
   TDF 본문은 has-medium-font-size 클래스가 안 붙는 순수 HTML이라 직접 지정 필요.
   line-height/margin-bottom은 style.css .entry-content 표준값(1.75, 1.4em)과 일치.
   2026-07-10, 써드볼트 전역 규격 일치. 다크모드 텍스트 색상만 별도 지정. */
.tdf-content { margin-bottom: 28px; }
.tdf-content p {
    font-size: var(--wp--preset--font-size--medium, 20px);
    line-height: 1.75;
    margin-bottom: 1.4em;
    color: var(--text-main, #1d1d1f);
}

/* ── 순위 테이블 카드 (싱글: 결과 1개 / 아카이브: 스테이지결과+GC+팀순위 나란히) ── */
.tdf-tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.tdf-table-card {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 8px;
    overflow: hidden;
}
.tdf-table-header {
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-main, #1d1d1f);
    border-bottom: 1px solid var(--border-divider, #ececf2);
    background: var(--bg-soft, #f1f3f6);
}

.tdf-race-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tdf-race-table thead th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-soft, #6e6e73);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 12px 6px;
}
.tdf-race-table tbody td {
    padding: 7px 12px;
    border-top: 1px solid var(--border-divider, #ececf2);
    vertical-align: middle;
}
.tdf-race-table .tdf-col-rank { width: 2.5rem; }
.tdf-race-table .tdf-col-gap { text-align: right; font-family: monospace; white-space: nowrap; }
.tdf-race-table .tdf-col-change { text-align: center; width: 3.2rem; }

.tdf-rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-soft, #6e6e73);
}
.tdf-rank-1 { background: color-mix(in srgb, #FFD700 22%, transparent); color: #b8971a; }
.tdf-rank-2 { background: color-mix(in srgb, #C0C0C0 22%, transparent); color: #7a7a7a; }
.tdf-rank-3 { background: color-mix(in srgb, #CD7F32 22%, transparent); color: #a5652c; }

.tdf-rider-name { font-weight: 600; color: var(--text-main, #1d1d1f); }
.tdf-team-name { font-size: 0.74rem; color: var(--text-soft, #6e6e73); margin-top: 1px; }

.tdf-rank-change { font-weight: 700; font-size: 0.78rem; }
.tdf-rank-up { color: #16a34a; }
.tdf-rank-down { color: #dc2626; }
.tdf-rank-same { color: var(--text-soft, #6e6e73); }

/* ── 아카이브: 헤더 ── */
.tdf-archive-header { margin-bottom: 20px; }
.tdf-archive-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.tdf-archive-title { font-size: 1.6rem; font-weight: 700; color: var(--text-main, #1d1d1f); margin: 0; }
.tdf-archive-empty { text-align: center; padding: 48px 0; color: var(--text-soft, #6e6e73); }

/* ── 오늘의 스테이지 위젯 (아카이브 헤더 타이틀 오른쪽) ── */
.tdf-today-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-main, #1d1d1f);
}
.tdf-today-label { font-weight: 600; color: var(--text-soft, #6e6e73); white-space: nowrap; }
.tdf-today-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    background: #F5A623;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
}
.tdf-today-route { white-space: nowrap; font-weight: 500; }
.tdf-today-km { color: var(--text-soft, #6e6e73); font-weight: 400; }
.tdf-today-sep {
    width: 1px;
    height: 16px;
    background: var(--border-main, #e2e2e8);
}
.tdf-today-time { font-family: monospace; font-size: 0.8rem; color: var(--text-soft, #6e6e73); white-space: nowrap; }
.tdf-today-progress {
    position: relative;
    width: 90px;
    height: 3px;
    border-radius: 2px;
    background: var(--border-main, #e2e2e8);
}
.tdf-today-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 2px;
    background: #F5A623;
}
.tdf-today-progress-fill::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F5A623;
}
.tdf-today-status { font-weight: 700; color: #F5A623; white-space: nowrap; }

@media (max-width: 700px) {
    .tdf-today-stage { font-size: 0.78rem; }
    .tdf-today-progress { width: 60px; }
}

/* ── 아카이브: 현재 순위 배너 (저지 4종 + GC/팀순위 나란히) ── */
.tdf-standings-banner {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 32px;
}
.tdf-standings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.tdf-standings-title { font-size: 1.1rem; font-weight: 700; color: var(--text-main, #1d1d1f); }
.tdf-standings-link { font-size: 0.82rem; color: var(--link, #3B4FCC); text-decoration: none; }
.tdf-standings-link:hover { color: var(--link-hover, #2540b8); }
.tdf-standings-banner .tdf-tables-grid { margin-top: 14px; }

/* ── 아카이브: 연도별 그룹 ── */
.tdf-year-group { margin-bottom: 32px; }
.tdf-year-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main, #1d1d1f);
    border-bottom: 1px solid var(--border-divider, #ececf2);
    padding-bottom: 8px;
    margin-bottom: 14px;
}
.tdf-stage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.tdf-stage-card {
    display: block;
    background: var(--bg-panel, #ffffff);
    border: 1.5px solid var(--border-main, #e2e2e8);
    border-radius: 8px;
    padding: 12px 14px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.tdf-stage-card:hover,
.tdf-stage-card:focus-visible {
    border-color: var(--link-hover, #2540b8);
    background: var(--bg-soft, #f1f3f6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.tdf-stage-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tdf-stage-card-num { font-weight: 400; color: var(--text-main, #1d1d1f); font-size: 0.92rem; }
.tdf-stage-card-num-value { font-weight: 700; color: #b8971a; font-size: 1.1rem; }
.tdf-stage-card-route { font-size: 0.8rem; color: var(--text-main, #1d1d1f); margin-top: 6px; }
.tdf-stage-card-winner { font-size: 0.8rem; color: #b8971a; font-weight: 600; margin-top: 6px; }

@media (max-width: 480px) {
    .tdf-jersey-grid { grid-template-columns: 1fr; }
    .tdf-tables-grid { grid-template-columns: 1fr; }
}

/* ── 코스 해설 + GPX 지도 (싱글 페이지 전용, 2단: 왼쪽 프로필이미지+해설 / 오른쪽 지도) ── */
.tdf-course-section {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 28px;
}
.tdf-course-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tdf-course-profile-img {
    background: #0a0c12;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-main, #e2e2e8);
}
.tdf-course-profile-img img {
    width: 100%;
    display: block;
    height: auto;
}
.tdf-course-desc-body { padding: 14px; }
.tdf-course-desc-body p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-main, #1d1d1f);
    margin-bottom: 0.85rem;
}
.tdf-course-desc-body p:last-child { margin-bottom: 0; }
.tdf-course-map {
    min-height: 340px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-main, #e2e2e8);
}
@media (max-width: 768px) {
    .tdf-course-section { grid-template-columns: 1fr; }
    .tdf-course-map { min-height: 280px; }
}

/* Leaflet 기본 컨트롤 UI는 라이브러리 기본값이 흰 배경 고정이라 다크모드에서 튐 —
   기존 전역 변수만 재사용해 오버라이드 (신규 변수 없음, 케이스 A 원칙 유지) */
body.dark-theme .leaflet-bar a,
body.dark-theme .leaflet-control-layers,
body.dark-theme .leaflet-control-attribution {
    background: var(--bg-panel, #ffffff);
    color: var(--text-main, #1d1d1f);
    border-color: var(--border-main, #e2e2e8);
}
body.dark-theme .leaflet-control-layers-expanded { background: var(--bg-panel, #ffffff); }
body.dark-theme .leaflet-bar a:hover { background: var(--bg-soft, #f1f3f6); }
body.dark-theme .leaflet-control-attribution a { color: var(--link, #3B4FCC); }