/* 월간 관측 리포트 (/reports, /reports/<달>, 관리자 미리보기).
   값은 tokens.css 에서만 읽는다(16진수 색·모서리 px 를 여기 적지 않는다).
   한글 줄바꿈은 어절 단위(word-break: keep-all), 긴 주소만 어디서나 끊는다. */

/* ── 목록 ───────────────────────────────────────────────────────────────── */
.rp-index { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.rp-index-item { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--sp-5);
  align-items: start; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--surface-line); }
.rp-index-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rp-index-cover { display: block; border-radius: var(--r-inner); overflow: hidden;
  border: 1px solid var(--surface-line); background: var(--surface-sunken); }
.rp-index-cover img { display: block; width: 100%; height: auto; }
.rp-index-text { min-width: 0; }
.rp-index-title { margin: 0 0 var(--sp-2); font-size: var(--fs-22); word-break: keep-all; }
.rp-index-sub { margin: 0 0 var(--sp-2); color: var(--muted); word-break: keep-all; }

/* ── 표지 ───────────────────────────────────────────────────────────────── */
.rp-cover { margin: 0 0 var(--sp-7); border-radius: var(--r-panel); overflow: hidden;
  border: 1px solid var(--surface-line); background: var(--surface-sunken); }
.rp-cover img { display: block; width: 100%; height: auto; }

/* ── 본문 ───────────────────────────────────────────────────────────────── */
/* 글은 판 폭을 다 쓴다(2026-09-20 사장님: 옆에 폭이 남는데 줄바꿈하지 않는다, docs/4.design-system.md 4-3-1). */
.rp-lede { margin: 0 0 var(--sp-3); font-size: var(--fs-18); word-break: keep-all;
  text-wrap: pretty; }
.rp-notes { margin-top: var(--sp-4); }
.rp-notes > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-13); }
.rp-notelist { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); color: var(--muted);
  font-size: var(--fs-13); display: grid; gap: var(--sp-2); word-break: keep-all;
  text-wrap: pretty; }
.rp-whylist { margin: var(--sp-4) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2);
  word-break: keep-all; text-wrap: pretty; }

/* 나라별 표의 묶음 줄(그 밖 N개 나라) */
.rp-row-rest td { color: var(--muted); font-style: italic; }

/* ── 개별 사이트 사례(두 벌이 다른 곳은 여기뿐입니다) ────────────────────────── */
.rp-sites { list-style: none; margin: 0; padding: 0; counter-reset: rp; display: grid; gap: var(--sp-5); }
.rp-site { counter-increment: rp; padding: var(--sp-5); border-radius: var(--r-inner);
  background: var(--surface-sunken); border: 1px solid var(--surface-line); }
.rp-site-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.rp-site-head::before { content: counter(rp) '.'; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-site-name { margin: 0; font-size: var(--fs-18); word-break: keep-all; overflow-wrap: anywhere; }
.rp-site-score { font-size: var(--fs-22); font-weight: var(--fw-bold); color: var(--band-excellent);
  font-variant-numeric: tabular-nums; }
/* 가린 이름: 무료용 본문에는 도메인·주소가 처음부터 없다. 이 규칙은 자리를 읽기 좋게 할 뿐,
   가리기를 하는 것이 아니다(가리기는 services/monthly_report 에서 끝난다). */
.rp-masked { letter-spacing: 0.12em; color: var(--muted); }
.rp-site-meta, .rp-site-areas, .rp-site-passed { margin: var(--sp-2) 0 0; color: var(--muted);
  font-size: var(--fs-13); word-break: keep-all; text-wrap: pretty; }
/* 무료용 사례의 "특히 앞선 점" 세 줄(문장만, 숫자 없음). */
.rp-site-standouts { margin: var(--sp-1) 0 0; padding-left: 1.2em; color: var(--text); font-size: var(--fs-13);
  word-break: keep-all; }
.rp-site-standouts li + li { margin-top: var(--sp-1); }
.rp-teaser { margin: var(--sp-5) 0 var(--sp-3); text-align: center; color: var(--muted);
  font-size: var(--fs-18); letter-spacing: 0.2em; }

@media (max-width: 768px) {
  .rp-index-item { grid-template-columns: minmax(0, 1fr); }
}