/**
 * sport-report.css — 종목별 심층 리포트
 * ═══════════════════════════════════════════════════════════
 * 프로젝트 규칙: border-radius: 0 · Lucide 아이콘만 · 다크 모드 필수
 * 색은 styles.css 의 CSS 변수를 쓴다 (--color-surface, --color-text-primary, --color-border …)
 */

/* ── 이 페이지가 "앞에 세우는" 색 ────────────────────────────────────────
 *
 * 글자·밑줄·포커스 테두리·강조 띠에 쓴다.
 * **종목색(--sport-color-hike)을 직접 쓰지 않는다** — 그건 칠하는 색이라
 * 글자로 쓰면 다크에서 대비 2.06 이 나온다 (AA 는 4.5).
 *
 * 테마별 잉크는 styles.css 가 SSOT 다. 여기선 등산 잉크를 물려받기만 한다.
 * (2단계에서 종목 탭이 늘어나면 이 한 줄을 종목별로 갈라 주면 된다)
 *
 * ⚠ **배경으로 칠할 때는 잉크를 쓰지 않는다.** 칩·버튼의 켜진 상태는
 *   종목색 바탕에 흰 글자(대비 8.05)라 이미 멀쩡하고, 바탕을 밝히면
 *   흰 글자가 되레 안 읽힌다.
 * ── */
:root { --sr-ink: var(--sport-ink-hike, var(--sport-color-hike)); }

.sr-content {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 16px 72px;
}

/* ── 페이지 타이틀 ── */
.sr-page-header { margin-bottom: 20px; }
.sr-page-title {
  font-size: 26px; font-weight: 700; margin: 0 0 6px;
  color: var(--color-text-primary);
}
.sr-page-desc {
  font-size: 13px; line-height: 1.6; margin: 0;
  color: var(--color-text-secondary);
}

/* ── ① 종목 탭 ── */
.sr-sport-tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}
.sr-sport-tab {
  padding: 10px 18px;
  font-size: 14px; font-weight: 600;
  background: transparent; color: var(--color-text-secondary);
  border: none; border-bottom: 2px solid transparent;
  cursor: pointer;
  border-radius: 0;
}
.sr-sport-tab:hover:not(:disabled) { color: var(--color-text-primary); }
/* 고른 종목을 알려 주는 유일한 표시라 글자·밑줄 둘 다 보여야 한다 */
.sr-sport-tab.active {
  color: var(--sr-ink);
  border-bottom-color: var(--sr-ink);
}
/* 준비 중인 종목 — 눌러도 아무 일 없다는 걸 보이게 한다 */
.sr-sport-tab:disabled { opacity: .38; cursor: not-allowed; }

/* ── ② 기간 chip (period-filter-component.js 가 .wc-period-chip 으로 렌더) ── */
.sr-period-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.sr-period-chips .wc-period-chip {
  padding: 6px 14px;
  font-size: 13px; font-weight: 500;
  background: var(--color-surface); color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
}
.sr-period-chips .wc-period-chip:hover { color: var(--color-text-primary); }
.sr-period-chips .wc-period-chip.active {
  background: var(--sport-color-hike, var(--color-primary));
  border-color: var(--sport-color-hike, var(--color-primary));
  color: #fff;
}

/* ── 안내 / 로딩 / 빈 상태 ── */
.sr-notice {
  display: none;
  padding: 12px 14px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.6;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid #ff9500;
  color: var(--color-text-secondary);
}
.sr-notice.show { display: block; }
.sr-notice a { color: var(--color-primary-ink); font-weight: 600; }

.sr-loading {
  display: none;
  align-items: center; justify-content: center; gap: 10px;
  padding: 60px 0;
  font-size: 14px; color: var(--color-text-secondary);
}
.sr-loading.show { display: flex; }
.sr-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;              /* 스피너는 예외 — 원이어야 돈다 */
  animation: sr-spin .8s linear infinite;
}
@keyframes sr-spin { to { transform: rotate(360deg); } }

.sr-empty {
  display: none;
  flex-direction: column; align-items: center; gap: 6px;
  padding: 64px 16px;
  text-align: center; color: var(--color-text-secondary);
}
.sr-empty.show { display: flex; }
.sr-empty p { margin: 0; font-size: 14px; }
.sr-empty-sub { font-size: 12.5px; opacity: .8; }
.sr-empty svg { color: var(--color-border); margin-bottom: 8px; }

/* 본문은 데이터가 있을 때만 */
.sr-body { display: none; }
.sr-body.show { display: block; }

/* ── 카드 공통 ── */
.sr-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 18px;
  margin-bottom: 16px;
}
.sr-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sr-card-title {
  font-size: 15px; font-weight: 700; margin: 0;
  color: var(--color-text-primary);
}
.sr-card-sub { font-size: 12px; color: var(--color-text-secondary); }
.sr-card-note {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ── ③ KPI ── */
.sr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.sr-kpi {
  background: var(--color-surface);
  padding: 14px 12px;
  text-align: center;
}
.sr-kpi-label {
  display: block; font-size: 11.5px; margin-bottom: 5px;
  color: var(--color-text-secondary);
}
.sr-kpi-val {
  display: block; font-size: 20px; font-weight: 700;
  color: var(--color-text-primary); line-height: 1.2;
}
.sr-kpi-unit { font-size: 12px; font-weight: 500; margin-left: 2px; opacity: .7; }
.sr-kpi-delta { display: block; font-size: 11.5px; margin-top: 4px; font-weight: 600; }
.sr-kpi-delta.up   { color: #00c476; }
.sr-kpi-delta.down { color: #e84040; }
.sr-kpi-delta.flat { color: var(--color-text-secondary); }

.sr-everest {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--color-border);
  font-size: 13px; color: var(--color-text-secondary);
}
.sr-everest b { color: var(--color-text-primary); font-size: 15px; }

/* ── ④ 지도 ── */
.sr-map {
  width: 100%; height: 420px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}

/* ── ⑤ 랭킹 ── */
/* 카드가 6장이다 — 최소폭을 280px 로 잡아야 넓은 화면에서 3열 × 2행으로
   떨어진다. 230px 이면 4열이 되어 마지막 줄에 2장만 남고, 칸이 좁아
   제목도 더 잘린다. */
.sr-rank-grid {
  /* 값 비례 막대의 폭 — 행마다 JS 가 덮어쓴다 (1위 = 100%).
     여기 선언이 기본값이자 이 토큰의 문서다. */
  --sr-rank-bar: 0%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.sr-rank {
  border: 1px solid var(--color-border);
  padding: 12px;
}
.sr-rank-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
/* 제목은 줄이지 않는다 — 부제가 길면 부제가 줄어야 한다.
   안 그러면 "표준 대비 / 최고" 처럼 제목이 두 줄로 깨져 위계가 거꾸로 된다. */
.sr-rank-label {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--color-text-primary);
}
.sr-rank-desc {
  flex: 1 1 auto; min-width: 0; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: var(--color-text-secondary);
}
/* 낮을수록 좋은 지표 — 숫자가 커지는 순서라 방향을 안 적으면 정렬이 깨진 줄 안다 */
.sr-rank-desc.lower-better { color: var(--color-text-primary); }
.sr-rank-desc.lower-better .sr-rank-ico {
  vertical-align: -1px; margin-right: 3px; opacity: 1;
}
/* 값 비례 막대 — 폭은 JS 가 --sr-rank-bar 로 넣는다 (1위 = 100%).
   150 / 139 / 122 를 빼서 계산하지 않아도 격차가 눈에 들어온다.
   background-image 라 hover 의 background-color 위에 그대로 남는다.
   첫 줄은 color-mix 를 못 읽는 브라우저용 폴백이다. */
.sr-rank-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 4px;
  font-size: 12.5px;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  background-image: linear-gradient(to right,
    var(--color-surface-alt) 0 var(--sr-rank-bar, 0%),
    transparent var(--sr-rank-bar, 0%));
  background-image: linear-gradient(to right,
    color-mix(in srgb, var(--sport-color-hike, #7B2D8E) 12%, transparent) 0 var(--sr-rank-bar, 0%),
    transparent var(--sr-rank-bar, 0%));
}
.sr-rank-row:first-of-type { border-top: none; }
/* 누를 수 있다는 표시 — hover 가 없는 모바일에선 오른쪽 > 아이콘이 맡는다 */
.sr-rank-row:hover { background-color: var(--color-surface-hover); }
.sr-rank-row:hover .sr-rank-title { color: var(--color-primary-ink); }
.sr-rank-row:hover .sr-rank-ico { opacity: 1; }
.sr-rank-row .sr-rank-ico {
  flex: 0 0 auto; align-self: center;
  color: var(--color-text-secondary); opacity: 0.4;
}
.sr-rank-no {
  flex: 0 0 18px; font-weight: 700; font-size: 11px;
  color: var(--color-text-secondary);
}
.sr-rank-row.top1 .sr-rank-no { color: var(--sr-ink); }
.sr-rank-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text-primary);
}
.sr-rank-date { flex: 0 0 auto; font-size: 11px; color: var(--color-text-secondary); }
.sr-rank-val  { flex: 0 0 auto; font-weight: 700; color: var(--color-text-primary); }
/* 1위 강조는 **값**에 준다.
   번호(.sr-rank-no)는 11px 이라 색을 바꿔도 거의 안 보인다 — 실제로 그랬다.
   시선이 먼저 닿는 건 숫자 쪽이다.

   글자만 키우면 두 가지가 어긋난다 — 둘 다 여기서 막는다.
     min-width   : 값 칸 폭이 행마다 달라져 오른쪽 끝이 들쭉날쭉해진다
     line-height : 1위 행만 2px 높아져 세 행의 간격이 안 맞는다 */
.sr-rank-val { min-width: 62px; text-align: right; line-height: 1.2; }
.sr-rank-row.top1 .sr-rank-val {
  font-size: 13.5px;
  /* **색은 일부러 안 준다** (--sr-ink 를 쓰면 줄 수는 있다).
     1위 행은 뒤의 막대가 언제나 100% 라 이미 종목색으로 물들어 있다.
     글자까지 같은 색으로 칠하면 색 위에 색이라 오히려 뭉개진다.
     여기선 크기로만 세운다. */
}
.sr-rank-empty { font-size: 12.5px; color: var(--color-text-secondary); padding: 6px 0; }

/* ── 차트 ── */
.sr-chart-wrap { position: relative; height: 260px; }

/* ── ⑧ ACWR ── */
.sr-acwr { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sr-acwr-val {
  font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--color-text-primary);
}
.sr-acwr-zone {
  display: inline-block; padding: 3px 10px;
  font-size: 12px; font-weight: 700; color: #fff;
}
.sr-acwr-detail { font-size: 12.5px; line-height: 1.7; color: var(--color-text-secondary); }
.sr-acwr-detail b { color: var(--color-text-primary); }

/* ── ⑨ 표 ── */
.sr-table-wrap { overflow-x: auto; }
.sr-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.sr-table th, .sr-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left; white-space: nowrap;
}
.sr-table th {
  font-size: 11.5px; font-weight: 600;
  color: var(--color-text-secondary);
  /* ⚠ `--sticky-top` 을 쓰면 안 된다. 부모 `.sr-table-wrap` 이
     `overflow-x: auto` 라 **스크롤 컨테이너**고(overflow-y 도 auto 로
     계산된다), sticky 는 화면이 아니라 **그 상자**를 기준으로 붙는다.
     그래서 59px 를 주면 머리글이 제자리에서 **아래로 59px 밀려**
     첫 줄을 덮었다(2026-09-21 실제 사고 — 날짜 줄이 머리글 위에
     올라왔다). 상자는 세로로 안 스크롤하므로 top:0 은 제자리 그대로다. */
  position: sticky; top: 0;
  background: var(--color-surface);
}
.sr-th-sort { cursor: pointer; user-select: none; }
.sr-th-sort:hover { color: var(--color-text-primary); }
.sr-th-sort::after { content: ''; display: inline-block; width: 9px; }
.sr-sorted-asc::after  { content: '▲'; font-size: 8px; margin-left: 3px; }
.sr-sorted-desc::after { content: '▼'; font-size: 8px; margin-left: 3px; }
.sr-num { text-align: right; }
.sr-table td.sr-num { font-variant-numeric: tabular-nums; }
.sr-th-title { min-width: 180px; }
.sr-table tbody tr { cursor: pointer; }
.sr-table tbody tr:hover { background: var(--color-surface-hover); }
.sr-table td.sr-td-title {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--color-text-primary);
}
/* 값이 없는 칸 — 분석 지표가 안 채워진 옛 활동 */
.sr-na { color: var(--color-text-secondary); opacity: .5; }

/* ── 모바일 ── */
@media (max-width: 768px) {
  .sr-content { padding: 16px 12px 56px; }
  .sr-page-title { font-size: 21px; }
  .sr-card { padding: 14px; }
  .sr-map { height: 300px; }
  .sr-chart-wrap { height: 220px; }
  .sr-kpi-val { font-size: 17px; }
  .sr-acwr-val { font-size: 28px; }
}

/* ── ⑥-2 VAM 커브 ── */
/* 원본 시계열을 활동마다 읽어야 해서 **눌러야** 계산한다.
   기간에 활동이 많으면 읽기 비용이 크다 — 미리 몇 건인지 알린다. */
.sr-vam-gate {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 0;
}
.sr-vam-gate.done { display: none; }
.sr-vam-gate-text {
  margin: 0; flex: 1 1 260px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--color-text-secondary);
}
.sr-btn {
  padding: 8px 18px;
  font-size: 13px; font-weight: 600;
  background: var(--sport-color-hike, var(--color-primary));
  color: #fff; border: none; border-radius: 0;
  cursor: pointer;
}
.sr-btn:disabled { opacity: .5; cursor: progress; }

.sr-vam-body { display: none; }
.sr-vam-body.show { display: block; }

.sr-vam-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 1px; margin-top: 14px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.sr-vam-cell { background: var(--color-surface); padding: 10px 8px; text-align: center; }
.sr-vam-dur { display: block; font-size: 11px; color: var(--color-text-secondary); }
.sr-vam-num {
  display: block; font-size: 17px; font-weight: 700;
  color: var(--color-text-primary); line-height: 1.3;
}
.sr-vam-grade { display: block; font-size: 10.5px; font-weight: 700; }
.sr-vam-cell.na .sr-vam-num { color: var(--color-text-secondary); opacity: .45; }

/* ── ⑥-3 경사대별 시간·에너지 ── */
.sr-grade-body { display: none; }
.sr-grade-body.show { display: block; }
#srGradeHint { margin-top: 0; }
#srGradeHint.hide { display: none; }

.sr-grade-table {
  margin-top: 14px;
  border: 1px solid var(--color-border);
  overflow-x: auto;
}
.sr-grade-row {
  display: grid;
  grid-template-columns: 1.5fr 92px 1fr 92px 1fr;
  align-items: center; gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--color-border);
  min-width: 460px;
}
.sr-grade-row:last-child { border-bottom: none; }
.sr-grade-row.head {
  font-size: 11px; font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface-alt);
}
.sr-grade-name { display: flex; align-items: center; gap: 7px; color: var(--color-text-primary); }
.sr-grade-swatch { width: 10px; height: 10px; flex: 0 0 10px; }
.sr-grade-short { font-size: 10.5px; color: var(--color-text-secondary); }
.sr-grade-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
/* 막대는 두 지표의 차이를 눈으로 보여 준다 — 숫자만으론 잘 안 보인다 */
.sr-grade-bar { height: 8px; background: var(--color-surface-alt); }
.sr-grade-bar span { display: block; height: 100%; }
.sr-grade-row.dim { opacity: .45; }

/* ── ⑥-4 경사대별 페이스 ── */
.sr-pg-body { display: none; }
.sr-pg-body.show { display: block; }
#srPaceGradeHint { margin-top: 0; }
#srPaceGradeHint.hide { display: none; }

.sr-pg-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 1px; margin-top: 14px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.sr-pg-cell { background: var(--color-surface); padding: 10px 8px; }
.sr-pg-band {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--color-text-secondary); margin-bottom: 5px;
}
.sr-pg-swatch { width: 9px; height: 9px; flex: 0 0 9px; }
.sr-pg-pace {
  display: block; font-size: 16px; font-weight: 700;
  color: var(--color-text-primary); line-height: 1.3;
}
.sr-pg-unit { font-size: 11px; font-weight: 500; opacity: .7; margin-left: 2px; }
/* 기준선 대비 — 빠르면 초록, 느리면 회색. 등산은 '느림'이 나쁨이 아니라 붉게 하지 않는다 */
.sr-pg-ratio { display: block; font-size: 11px; font-weight: 600; margin-top: 3px; }
.sr-pg-ratio.fast { color: #00c476; }
.sr-pg-ratio.slow { color: var(--color-text-secondary); }

/* ── VAM 시즌 비교 ── */
.sr-vam-cmp {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.sr-vam-cmp.hide { display: none; }
.sr-btn-ghost {
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
}
.sr-btn-ghost:hover:not(:disabled) {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}
.sr-btn-ghost.on {
  background: var(--color-text-secondary);
  border-color: var(--color-text-secondary);
  color: var(--color-surface);
}
.sr-btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
.sr-vam-cmp-note { font-size: 11.5px; color: var(--color-text-secondary); }

/* ── 기록 선택 (체크박스 + 제목 검색) ── */
.sr-pick-bar {
  display: none;
  align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--sr-ink);
}
.sr-pick-bar.show { display: flex; }
.sr-pick-text { flex: 1 1 auto; font-size: 13px; color: var(--color-text-primary); }
.sr-pick-text b { color: var(--sr-ink); }

.sr-list-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.sr-search {
  flex: 1 1 200px; max-width: 280px;
  padding: 6px 10px;
  font-size: 13px; font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
}
/* outline 을 껐으니 이 테두리가 포커스 표시 전부다 — 안 보이면 키보드로 길을 잃는다 */
.sr-search:focus {
  outline: none;
  border-color: var(--sr-ink);
}

.sr-th-pick { width: 34px; }
.sr-table td.sr-td-pick { width: 34px; }
.sr-table input[type="checkbox"] { cursor: pointer; margin: 0; }
/* 고른 기록 — 표는 기간 전체를 보여 주므로 어느 것이 분석에 들어갔는지 표시한다.

   바탕 하나로만 구분하면 6건 중 5건처럼 대부분이 칠해질 때 차이가 안 읽힌다.
   그래서 **왼쪽 3px 띠**를 같이 둔다 — 고른 비율과 무관하게 줄이 딱 보인다.
   (.sr-pick-bar · .sr-help-eq 와 같은 3px 띠 어법이다)

   첫 줄은 color-mix 를 못 읽는 브라우저용 폴백이다. */
.sr-table tbody tr.picked > td {
  background-color: var(--color-surface-alt);
  background-color: color-mix(in srgb, var(--sr-ink) 10%, transparent);
}
.sr-table tbody tr.picked > td:first-child {
  box-shadow: inset 3px 0 0 var(--sr-ink);
}

/* ── 카드 해설 (.sr-help) ──
   <details> 를 쓴다 — 접고 펴기·키보드·스크린리더를 브라우저가 맡는다.
   다른 카드에도 그대로 쓸 수 있게 이름을 카드에 묶지 않았다. */
.sr-help {
  margin-bottom: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.sr-help-sum {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  font-size: 12.5px; font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
}
.sr-help-sum::-webkit-details-marker { display: none; }
.sr-help-sum:hover { color: var(--color-text-primary); }
.sr-help-sum svg { flex: 0 0 14px; }
/* 펼침 표시 — 아이콘을 따로 두지 않고 꺾쇠 하나로 */
.sr-help-sum::after {
  content: '⌄';
  margin-left: auto;
  font-size: 14px; line-height: 1;
}
.sr-help[open] .sr-help-sum::after { content: '⌃'; }
.sr-help[open] .sr-help-sum {
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.sr-help-body {
  padding: 12px 14px 14px;
  font-size: 12.5px; line-height: 1.75;
  color: var(--color-text-secondary);
}
.sr-help-body p { margin: 0 0 9px; }
.sr-help-body p:last-child { margin-bottom: 0; }
.sr-help-body b { color: var(--color-text-primary); }
.sr-help-body h4 {
  margin: 14px 0 7px;
  font-size: 12.5px; font-weight: 700;
  color: var(--color-text-primary);
}
.sr-help-body ul { margin: 0 0 9px; padding-left: 17px; }
.sr-help-body li { margin-bottom: 4px; }
.sr-help-body code {
  padding: 1px 4px;
  font-size: 11.5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.sr-help-eq {
  padding: 8px 10px; margin: 0 0 9px;
  font-size: 12.5px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-left: 3px solid var(--sr-ink);
}
.sr-help-tbl {
  border-collapse: collapse;
  margin: 0 0 9px;
  font-size: 12px;
}
.sr-help-tbl td {
  padding: 3px 14px 3px 0;
  font-variant-numeric: tabular-nums;
}
.sr-help-tbl td:last-child { color: var(--color-text-primary); font-weight: 600; }

/* ── 필터 행 (기간 chip + 직접 선택) ── */
.sr-filter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.sr-filter-row .sr-period-chips { margin-bottom: 0; }

/* 공유 버튼 — 활동 상세에선 카드 **모서리에 붙는 절대 배치**(.ad-share-wrap)지만
   여기선 필터 행 안에 나란히 놓인다. 절대 배치를 풀지 않으면 행 밖으로 나가
   화면에서 사라진다. 동작·모양은 그대로 쓰고 자리만 되돌린다. */
.sr-filter-row .sr-share-wrap {
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;   /* 오른쪽 끝으로 — 직접 선택 버튼과 한 덩어리 */
}
/* 둘 다 auto 면 사이가 벌어진다. 밀어내는 일은 공유 버튼이 이미 했다 */
.sr-filter-row .sr-share-wrap + .sr-pick-btn { margin-left: 0; }
.sr-pick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 6px 14px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
}
.sr-pick-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-secondary); }
/* 고른 것이 있으면 켜진 상태로 보인다 — 어딘가 걸러져 있다는 신호 */
.sr-pick-btn.on {
  background: var(--sport-color-hike, var(--color-primary));
  border-color: var(--sport-color-hike, var(--color-primary));
  color: #fff;
}

/* ── 피커 모달 ── */
.sr-modal[hidden] { display: none; }
.sr-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.sr-modal-backdrop {
  position: absolute; inset: 0;
  background: var(--color-modal-overlay, rgba(0,0,0,.5));
}
.sr-modal-panel {
  position: relative;
  display: flex; flex-direction: column;
  width: calc(100% - 32px); max-width: 640px; max-height: 84vh;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}
.sr-modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.sr-modal-title {
  margin: 0; flex: 1 1 auto;
  font-size: 15px; font-weight: 700;
  color: var(--color-text-primary);
}
.sr-modal-close {
  padding: 0 4px;
  font-size: 22px; line-height: 1;
  color: var(--color-text-secondary);
  background: none; border: none; border-radius: 0;
  cursor: pointer;
}
.sr-modal-close:hover { color: var(--color-text-primary); }

.sr-modal-tools {
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
}
.sr-modal-chips { margin-bottom: 10px; }
.sr-modal-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sr-modal-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--color-text-secondary);
  cursor: pointer;
}
.sr-modal-count {
  margin-left: auto;
  font-size: 12px; color: var(--color-text-secondary);
}
.sr-modal-count b { color: var(--sr-ink); }

/* 목록은 길어질 수 있다 — 여기만 스크롤한다 */
.sr-modal-body { flex: 1 1 auto; overflow-y: auto; }
.sr-pick-row {
  display: grid;
  grid-template-columns: 30px 88px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.sr-pick-row:last-child { border-bottom: none; }
.sr-pick-row:hover { background: var(--color-surface-hover); }
.sr-pick-row.on { background: var(--color-primary-muted, rgba(127,127,127,.09)); }
.sr-pick-date { font-size: 11.5px; color: var(--color-text-secondary); }
.sr-pick-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text-primary);
}
.sr-pick-meta {
  font-size: 11.5px; color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sr-pick-empty {
  padding: 34px 18px; text-align: center;
  font-size: 13px; color: var(--color-text-secondary);
}

.sr-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
}
.sr-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
  .sr-modal-panel { max-height: 92vh; }
  .sr-pick-row { grid-template-columns: 26px 1fr; row-gap: 2px; }
  .sr-pick-date { grid-column: 2; }
  .sr-pick-meta { grid-column: 2; }
}

/* ── 모달: 선택한 것만 보기 ──
   고를 것이 없으면 걸 수 없다(빈 목록에 갇히지 않게). */
.sr-modal-all input:disabled { cursor: not-allowed; }
.sr-modal-all.off { opacity: .45; cursor: not-allowed; }
.sr-pick-empty-hint {
  display: block; margin-top: 6px;
  font-size: 12px; color: var(--color-text-secondary);
}