/* ══════════════════════════════════════════════════════════════
   랭킹 4개 페이지(매매/전세/월세/환경) 공용 — 단일 정의
   예전엔 .rank-hd / .rank-tab / .rank-strip 이 {trade,rent,wolse,environment}-ranking.css 에
   4벌씩 복붙돼 있었다(구현원칙 11). 값이 갈릴 자리마다 손으로 고쳐야 했던 게 문제였지,
   페이지별 색 자체는 8제약 #7 예외 2(카테고리 구분색)로 허용된다.
   → 모양·크기·간격은 여기 한 곳에서만 정하고, 페이지 CSS 는 아래 변수 5개만 지정한다.
     클래스를 다시 정의하지 말 것.

       :root { --rank-hd-a / --rank-hd-b (헤더 그라데이션 양끝)
               --rank-hd-line (헤더 아래 선) --rank-title (제목색) --rank-accent (링크·활성 탭) }

   KPI 수치는 스트립이 아니라 콘텐츠 영역의 .kpi-card 가 맡는다(main.css 단일 정의).
   랭킹도 같은 규칙으로 옮겼다 — 진한 sticky 스트립에 있던 그 달 통계는 .kpi-card 로,
   기준 달 선택은 사이트 공통 .strip(tag.common.monthStrip)으로 갈라 넣는다.
   ══════════════════════════════════════════════════════════════ */

/* 랭킹은 표가 넓어 콘텐츠 폭이 1440 — 상단 스트립도 같은 폭으로 맞춘다(기본 1200).
   좌우 패딩까지 .rank-body(16px)와 같게 맞춰야 스트립 제목과 본문 왼쪽 끝이 한 줄로 선다. */
:root { --kpi-max: 1440px; }
.strip { padding-left: 16px; padding-right: 16px; }

/* ── 페이지 헤더 ── */
.rank-hd {
    background: linear-gradient(135deg, var(--rank-hd-a, #f8fafc) 0%, var(--rank-hd-b, #e2e8f0) 100%);
    padding: 26px 20px 22px;
    border-bottom: 1px solid var(--rank-hd-line, #cbd5e1);
}
.rank-hd-inner { max-width: 1440px; margin: 0 auto; }
.rank-bc { font-size: 13px; color: #475569; margin-bottom: 8px; }
.rank-bc a { color: var(--rank-accent, #1d4ed8); text-decoration: none; }
.rank-bc a:hover { text-decoration: none; }
.rank-title { font-size: 22px; font-weight: 800; color: var(--rank-title, #1e293b); letter-spacing: -.5px; margin-bottom: 4px; }
.rank-desc  { font-size: 13px; color: #475569; }

/* ── 탭 ── */
.rank-tabs { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.rank-tab { padding: 7px 14px; font-size: 13px; font-weight: 700; text-decoration: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; color: #475569; }
.rank-tab.active { background: var(--rank-accent, #1d4ed8); color: #fff; border-color: var(--rank-accent, #1d4ed8); }
.rank-tab:hover:not(.active) { background: #f1f5f9; color: #0f172a; }

/* ── 요약 줄 ── */
/* 칸 자체(.kpi-items / .kpi-item)는 main.css 공용 정의를 그대로 쓴다.
   자리는 "조건 매칭 랭킹" 카드 *안*, 제목 줄과 지표 해설 사이 — 이 요약이 아래 표를 설명하는 것이라
   같은 테두리 안에 둔다. 별도 카드로 위에 띄웠더니 기준 달 배지와 개수가 두 번씩 나왔다.
   전폭(1440)에 두면 칸이 360px 씩 벌어져 값 오른쪽이 크게 빈다(구현원칙 12) — 표 폭이면 다른
   7개 페이지(1,200)와 같은 밀도가 된다.
   🔴 여기 들어가는 값은 전부 필터를 따라가야 한다(각 페이지 renderKpi). 필터와 무관한 전국 값은
   표 각주로 내렸다 — 자리가 곧 "조건 안의 이야기" 라는 약속이기 때문이다. */
.rank-card > .kpi-items { border-bottom: 1px solid var(--border, #e2e8f0); }

/* 🔴 값이 짧아 칸의 3분의 2가 빈다 — 실측(1280px, 매매): 칸 322px 인데 글자는 100~143px 이고
   오른쪽이 179~222px 씩 남았다(1440px 에선 260~275px). 행 974px 중 608px 이 빈 것.
   격자는 이미 minmax(0,1fr) 라 *칸*은 폭을 나눠 갖는데, 칸 안 내용이 전부 왼쪽에 붙어 생기는 빈칸이다.
   → **전 칸 가운데 정렬 하나로 통일한다.** 한때 첫 칸 왼쪽 / 가운데 칸 가운데 / 마지막 칸 오른쪽으로
   벌려 뒀는데, 칸마다 정렬이 다른 건 규칙이 아니라 임의라 읽는 사람이 기준을 못 잡는다(사용자 지적).
   구현원칙 12 "머리와 값의 정렬을 같이 옮겨야 세로줄이 맞는다" — 라벨·값·보조줄을 한꺼번에 옮긴다
   (.kpi-item-value 는 flex 라 text-align 이 안 먹어 justify-content 를 따로 준다).
   폭 맞춤의 나머지 절반은 *칸 수*가 맡는다: 4칸 고정(2열 x 2행)이라 칸이 좁아 남는 폭이 작다.
   3칸이면 데스크탑에서 칸이 너무 넓고 모바일 2열에서 마지막 칸 옆이 통째로 빈다(390px 에서 223px).
   새 페이지도 4칸을 유지할 것. */
.rank-card > .kpi-items > .kpi-item { text-align: center; }
.rank-card > .kpi-items > .kpi-item .kpi-item-value { justify-content: center; }

@media (max-width: 768px) {
    .strip { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 580px) {
    .rank-hd { padding: 18px 14px 14px; }
    .rank-title { font-size: 18px; letter-spacing: -.3px; }
}