@charset "utf-8";

/* 모의시험 결과 상세 (rl_mock_result.php) — 디자인 시스템 토큰·형제 페이지 단일 출처 정합.
   페이지 wrapper(.at-container)가 max-width 768 cap + padding-inline 14px 단일 출처. 페이지 본문은 별도 좌우 패딩 X.

   시스템 클래스 직접 차용 — 같은 역할 컴포넌트는 페이지 무관 동일 토큰·문법 공유:
     페이지 헤더    → .rl-archive-header / .rl-archive-subject (rl_note_archive.css)
     필터 칩        → .rl-archive-tabs / .rl-archive-tab-count (rl_note_archive.css)
     점수 hero      → .rl-banner.is-result + .rl-state-label + h3 + .rl-stat + .rl-banner-meta + .rl-btn + .rl-btn-outline (banner.css)
     빈 상태        → .rl-archive-empty (rl_note_archive.css)
     상태 배지      → 메트릭 1:1 형제(.rl-note-home-list-card-state / .rl-mock-recent__state),
                     data-state-kind ∈ {unanswered / mastered / recheck} — rl_note.css §state 표 확장
   이 파일은 페이지 전용 슬롯(아코디언 패널 / 카드 head / hero pass·fail label tone)만 정의.
   카드 리스트는 단일 ol에 출제 번호 순으로 직렬, 필터는 JS가 카드 단위 [hidden] 토글 — 섹션 wrapper 없음. */

/* ─────────────────────────────────────────────────────────────────────────
 * 점수 hero — .rl-banner.is-result(banner.css)가 컨테이너/CTA/메타 모두 담당.
 * 그룹 간 24px 호흡은 banner.css `.rl-banner { margin: var(--rl-sp-6) 0 }` 단일 출처가 책임.
 * 헤더/탭 sp-6 margin도 rl_note_archive.css 단일 출처에서 일괄 적용 — 페이지 한정 override 불요.
 *
 * tone 매핑 — is-result(warn-text 갈색) base를 페이지 한정으로 primary(블루)로 재매핑.
 * 사용자 명세: "오답노트 정리하기 = primary blue · 같은 과목 다시 시험 = secondary gray".
 * 플랫폼 기존 블루 톤과 정합. 합/불 라벨은 별도 data-pass 매핑이 색 우선 적용해 보존.
 *
 * ────────────────────────────────────────────────────────────────────── */

/* 페이지 제목(h1) — 타인 결과 "#순위 닉네임님의 모의시험 결과"를 한 줄 고정.
   닉네임(__nick)만 말줄임(flex-shrink)되고 순위·접미사는 항상 노출(flex 0 0).
   .rl-archive-header h1(공유 단일 출처)은 불변 — 본 컨테이너 span만 페이지 한정 추가. */
.rl-mock-result-title {
  display: flex;
  align-items: baseline;
  min-width: 0;
}
.rl-mock-result-title__rank {
  flex: 0 0 auto;
  margin-right: var(--rl-sp-1);
}
.rl-mock-result-title__nick {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-mock-result-title__suffix {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rl-mock-result-hero {
  --rl-se-tone:       var(--rl-primary);
  --rl-se-tone-hover: var(--rl-primary-hover);
  /* 결과 카드 상·하 padding 한 단계 다운 — banner.css base padding sp-4(14) 4면 → 본 페이지 한정 sp-3(12).
     사용자 명세 "전체 높이 아주 조금만 압축". 합산 4px 다운. */
  padding-top:    var(--rl-sp-3);
  padding-bottom: var(--rl-sp-3);
  /* 결과 카드 가운데 정렬 — banner.css base는 좌측 정렬(다른 surface). 본 페이지 hero는 점수 중심
     요약 카드라 가운데 정렬이 자연 — text-align center로 inline 자식(state-label/h3/banner-meta/hint)
     모두 가운데. flex 자식(.rl-stat)은 별도 justify center. */
  text-align: center;
}
.rl-mock-result-hero .rl-stat {
  justify-content: center;
}

/* 점수 단위 붙여쓰기 — banner.css `.rl-stat { gap: var(--rl-sp-2) }`(8) → 0으로 페이지 한정 override.
   '26점' 한 덩어리 표기 (사용자 명세 "26 점은 무조건 26점으로 붙이는 게 맞아"). */
.rl-mock-result-hero .rl-stat {
  gap: 0;
}

/* 합격 기준 해석 문구 — 결과 카드 하단 보조 라인.
   .rl-stat-label("합격 기준 N점") 우측 라벨에서 카드 본문 흐름 안 자연어로 위치 이동.
   fs-body-sm + text-3 + lh-normal — 결과 메타(rl-banner-meta)와 같은 위계 톤. */
.rl-mock-result-hint {
  font-size: var(--rl-fs-body-sm);
  color: var(--rl-text-3);
  line-height: var(--rl-lh-normal);
}
.rl-mock-result-hint strong {
  color: var(--rl-text-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 완료 시각 — hint와 같은 그룹의 보조 메타 (사용자 명세 "별도 섹션 X, 같은 보조 정보 그룹처럼 붙임").
   fs-caption + text-4(가장 약한 톤) — hint(fs-body-sm/text-3)보다 한 단계 더 후퇴해 위계 분리.
   tabular-nums로 시각 일관. */
.rl-mock-result-time {
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-4);
  line-height: var(--rl-lh-snug);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--rl-ls-tight);
}

/* 결과 카드 슬롯 그룹핑 — 사용자 명세 "동일 항목은 붙이고 다른 성격은 약간 띄우되 타이트하게".
   PHP 마크업 순서: state-label → h3 → stat → meta → hint → time (time이 카드 마지막).
   그룹 1 (상태): .rl-state-label(불합격 pill) + h3(과목명) — 같은 묶음 sp-1(4) 붙임
   그룹 2 (점수): .rl-stat(26점) — 단독
   그룹 3 (통계+해석+시각): .rl-banner-meta + .rl-mock-result-hint + .rl-mock-result-time — 한 보조 정보 묶음
   그룹 간 전환: sp-2(8) 타이트하게.
   카드 마지막 자식(time) margin-bottom 0 — 카드 padding-bottom(sp-3) 단일 호흡, 잉여 여백 제거.
   banner.css base margin(state-label/h3/stat/meta)을 페이지 한정으로 일괄 override. */
.rl-mock-result-hero .rl-state-label      { margin-bottom: var(--rl-sp-1); } /* 그룹 1 내: state → h3 */
.rl-mock-result-hero h3                   { margin: 0 auto var(--rl-sp-2); } /* 그룹 1 → 2 전환 */
.rl-mock-result-hero .rl-stat             { margin: 0 0 var(--rl-sp-2); }    /* 그룹 2 → 3 전환 */
.rl-mock-result-hero .rl-banner-meta      { margin: 0 auto; }                /* 그룹 3 내: meta + hint 한 덩어리, line-height만으로 호흡 */
.rl-mock-result-hero .rl-mock-result-hint { margin: 0 0 var(--rl-sp-1); }    /* 그룹 3 내: hint → time 같은 그룹 sp-1 붙임 */
.rl-mock-result-hero .rl-mock-result-time { margin: 0; }                     /* 카드 마지막, 하단 잉여 여백 없음 */

/* 합/불 라벨 약한 pill 배지 — base 텍스트만에서 inline pill로. bad-soft / good-soft 연한 톤 (오답 셀과
   동일 시스템 톤). 사용자 명세 "약한 pill" — caption-sm fw-700 + r-full + sp-1/sp-3 padding. */
.rl-mock-result-hero .rl-state-label {
  display: inline-flex;
  align-items: center;
  padding: var(--rl-sp-1) var(--rl-sp-3);
  border-radius: var(--rl-r-full);
  font-size: var(--rl-fs-caption-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--rl-ls-tight);
}
.rl-mock-result-hero .rl-state-label[data-pass="pass"] {
  background: var(--rl-good-soft);
  color: var(--rl-good-text);
}
.rl-mock-result-hero .rl-state-label[data-pass="fail"] {
  background: var(--rl-bad-soft);
  color: var(--rl-bad-text);
}

/* hero 메타 row — 출처(ownership) 텍스트 라벨 + 상태(pass) pill 배지를 한 줄에 정렬.
   wrapper가 column→row 전환 + 그룹 1 내 sp-1 호흡(기존 .rl-state-label margin-bottom 동등 흡수).
   `gap: sp-3` — 두 라벨이 "라벨 + 배지"로 시각 분리되도록 호흡 확보 (붙어 한 문장처럼 읽히는 회귀 방지). */
.rl-mock-result-hero-meta {
  display: flex;
  align-items: center;
  /* hero 카드의 다른 슬롯(h3·rl-stat·rl-banner-meta·hint·time)이 모두 카드 중앙 정렬이라
     meta row도 horizontal center로 정합 — 양측 라벨이 시각 무게 중심에 위치. */
  justify-content: center;
  gap: var(--rl-sp-3);
  margin-bottom: var(--rl-sp-1);
}
.rl-mock-result-hero-meta .rl-state-label { margin-bottom: 0; }
/* ownership 라벨(data-pass 미부착) — 보조 출처 텍스트. pill 스타일 무력화 + 약한 톤. specificity는
   `.rl-mock-result-hero-meta + :not([data-pass])`로 base pill 룰(0,2,0)보다 1단 위에서 override. */
.rl-mock-result-hero-meta .rl-state-label:not([data-pass]) {
  padding: 0;
  border-radius: 0;
  font-weight: 500;
  color: var(--rl-text-3);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 다음 행동 카드 (.rl-mock-result-next) — banner.css .rl-banner.is-action 단일 출처 차용.
 * primary tone / .rl-btn / .rl-sub-link 슬롯 그대로. 사용자 명세 "답안지 탐색을 위해 CTA 카드 25~35%
 * 압축" — 페이지 한정 compact override (heading 슬롯 제거는 PHP 마크업으로, CTA 높이는 여기서).
 *   - .rl-btn height h-btn-lg(56) → h-btn-md(44): ~21% 축소
 *   - .rl-btn font fs-h3(16) → fs-body-sm(13.5): CTA 위계 한 단계 다운
 * Smart Entry 단일 출처 변경 X — 본 페이지는 "주 행동 진입 카드"가 아닌 "보조 다음 행동" 위계라
 * fullscreen surface 단일 주 CTA(h-btn-lg) 강도 불요. 형제 페이지(rl_note·rlcnf·rl_mock) 영향 0. */
.rl-mock-result-next {
  /* 카드 내부 상단 패딩 한 단계 다운 — base sp-4(14) → sp-3(12). 하단은 banner.css `:has(.rl-sub-link)`
     룰이 sp-2(8)로 자동 압축. */
  padding-top: var(--rl-sp-3);
}
.rl-mock-result-next .rl-btn {
  height: var(--rl-h-btn-md);
  font-size: var(--rl-fs-body-sm);
}

/* "이미 도전한 시험지" 안내 — 좁은 화면에서 문장 단위로만 줄바꿈. seg(문장)는 inline-block이라
   seg 사이 공백만 break 지점이 되고, 한 문장이 줄 폭을 넘으면 keep-all+overflow-wrap으로 안전 분리.
   modal.css .rl-sheet-confirm__desc / __desc-seg 패턴 동형. */
.rl-mock-result-next__lead {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.rl-mock-result-next__seg {
  display: inline-block;
}

/* 결과 카드 ↔ CTA 카드 인접 간격 — 사용자 명세 "다른 그룹처럼 크게 벌리지 말고 같은 결과 흐름 안의
   연속 카드로". banner.css base sp-6(24) 양변 → 본 페이지 한정 sp-4(14)로 ~42% 압축.
   결과 카드 margin-bottom + CTA 카드 margin-top 동시 다운 — collapse `max(14,14)=14`.
   CTA 카드 ↔ 다음 그룹(필터)은 banner.css base sp-6(24)로 그대로 유지(섹션 전환 시그널 보존). */
.rl-mock-result-hero  { margin-bottom: var(--rl-sp-4); }
.rl-mock-result-next  { margin-top:    var(--rl-sp-4); }

/* mock_result_next_below 가로 배너 하단 간격 — mock-result는 카드가 margin-bottom으로 다음과 간격을 소유(답안지 탭 mt 0)인데
   광고 슬롯은 rl-ad.css가 margin-top만 줘서 배너↔답안지 탭 간격이 0이 된다. mock-result 리듬에 맞춰 하단 sp-6 부여
   (위 '다음 단계' 카드 margin-bottom과는 block collapse로 24 유지·중복 없음, 광고 off/collapse 시 슬롯 미렌더/0높이라 고아 없음). */
.rl-mock-result > .rl-ad-slot--display { margin-bottom: var(--rl-sp-6); }

/* ─────────────────────────────────────────────────────────────────────────
 * 필터 — 시스템 .rl-archive-tabs 차용. count 룰은 rl_note_archive.css 단일 출처에 위임.
 * 페이지 한정 보강은 0건 디스에이블 칩 하나뿐.
 * ────────────────────────────────────────────────────────────────────── */
.rl-archive-tabs a[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 카드 리스트 — 형제 .rl-note-home-list-card(rl_note.css)와 1:1 메트릭:
 *   surface-elev / line-2 / r-md / padding sp-3 sp-5 / margin-bottom sp-2 / hover border + bg primary-soft.
 * 답안지 전용 차이는 아코디언 토글(button)·세로 stack 구조뿐. 메트릭은 형제 정합.
 * ────────────────────────────────────────────────────────────────────── */
.rl-mock-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rl-mock-result-item {
  margin-bottom: var(--rl-sp-2);
  background: var(--rl-surface-elev);
  border: 1px solid var(--rl-line-2);
  border-radius: var(--rl-r-md);
  overflow: hidden;
  transition: border-color var(--rl-dur-micro) var(--rl-ease),
              background var(--rl-dur-micro) var(--rl-ease);
  /* 펼침 후 viewport 보정 시 app bar 아래로 자연 정착 — JS scrollIntoView block:'start' 기준 위 여백.
     앱바는 sticky top:0 + padding-top:env(safe-area-inset-top)이라 iOS 신앱에서 시각 점유가 safe-top+52px.
     mobile-nav.css 토큰(--rl-safe-top)을 우선 사용, 토큰 부재 셸에서는 raw env()로 dual-fallback(§2.9.1). */
  scroll-margin-top: calc(var(--rl-safe-top, env(safe-area-inset-top, 0px)) + var(--rl-h-appbar) + var(--rl-sp-2));
}
.rl-mock-result-list > :last-child { margin-bottom: 0; }
.rl-mock-result-item[hidden] { display: none; }

/* 답안 리스트 안 디스플레이 가로 배너(mock_result_review_list_inline) li — 카드 리듬(mb sp-2)보다 살짝 띄워
   광고임을 분간시키되 리스트 흐름 유지. 광고 슬롯 기본 margin-top sp-6 대신 양쪽 sp-4로 통일(위 카드 mb와 collapse).
   필터 전환 시 JS가 [hidden] 토글 → collapse(이동·재요청 없이 가시성만). 광고 off/no-fill 시 슬롯 0높이라 고아 없음. */
.rl-mock-result-ad { list-style: none; margin: 0; }
.rl-mock-result-ad[hidden] { display: none; }
.rl-mock-result-ad > .rl-ad-slot--display { margin-block: var(--rl-sp-4); }
@media (hover: hover) {
  .rl-mock-result-item:hover {
    border-color: var(--rl-primary-edge);
    background: var(--rl-primary-soft);
  }
}
.rl-mock-result-item[aria-expanded="true"] {
  border-color: var(--rl-primary-edge);
  background: var(--rl-primary-soft);
}

/* 토글 버튼 = 카드 hit area. 패딩은 형제 .rl-note-home-list-card와 동일(sp-3 sp-5). */
.rl-mock-result-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--rl-sp-5);
  width: 100%;
  padding: var(--rl-sp-3) var(--rl-sp-5);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.rl-mock-result-toggle-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rl-sp-1);
}
.rl-mock-result-head {
  display: inline-flex;
  align-items: center;
  gap: var(--rl-sp-2);
}
.rl-mock-result-num {
  font-size: var(--rl-fs-caption);
  font-weight: 700;
  color: var(--rl-text-2);
  letter-spacing: var(--rl-ls-body);
}

/* 상태 배지 — 형제 .rl-note-home-list-card-state(rl_note.css) / .rl-mock-recent__state(mock.css)와 1:1 메트릭.
   height 20 / padding 0 sp-2 / fw 700 / lh 1 / ls-body. data-state-kind 색 매핑도 형제 단일 출처와 동일 토큰.
   unanswered(미응답)는 rl_note.css가 단일 출처(warn-soft / warn-text).
   raw px 20 — §3.4.3 Badge dot 5×5와 같은 컴포넌트 전용 raw 메트릭(§8.5.3 P2). spacing scale 외 단일 출처
   값으로 형제 3종(rl_note.css ×2 / modal.css ×1)이 동일 메트릭. 토큰 추출은 §8.4 백로그(rl-h-pill-sm). */
.rl-mock-result-state {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 20px;
  padding: 0 var(--rl-sp-2);
  border-radius: var(--rl-r-full);
  font-size: var(--rl-fs-caption-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--rl-ls-body);
  background: var(--rl-surface-2);
  color: var(--rl-text-3);
  white-space: nowrap;
}
.rl-mock-result-state[data-state-kind="unanswered"] {
  background: var(--rl-warn-soft);
  color: var(--rl-warn-text);
}
.rl-mock-result-state[data-state-kind="mastered"] {
  background: var(--rl-good-soft);
  color: var(--rl-good-text);
}
.rl-mock-result-state[data-state-kind="recheck"] {
  background: var(--rl-bad-soft);
  color: var(--rl-bad-text);
}

/* 질문 발췌 — 1줄 ellipsis. 형제 .rl-archive-item .preview(rl_note_archive.css)와 동일 패턴. */
.rl-mock-result-q {
  font-size: var(--rl-fs-body-sm);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* trailing chevron — 형제 .rl-note-home-list-card-cta(rl_note.css) 정합:
   기본 text-3 약함, 카드 hover/active 시 primary로 등장. 펼침 시 90도 회전. */
.rl-mock-result-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--rl-text-3);
  transition: transform var(--rl-dur-micro) var(--rl-ease),
              color var(--rl-dur-micro) var(--rl-ease);
}
@media (hover: hover) {
  .rl-mock-result-item:hover .rl-mock-result-chevron { color: var(--rl-primary); }
}
.rl-mock-result-item[aria-expanded="true"] .rl-mock-result-chevron {
  transform: rotate(90deg);
  color: var(--rl-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 인플레이스 슬라이드다운 패널 — 한 번에 1개. 답안 본문은 .rl-learn 스코프 단일 출처(learn.css).
 *   .view-content > .question + .answer-container > .answer[.correct][.incorrect][value="o/x"]
 * 마크업이 exam·note·quick·rl_note_archive와 동일 — 학습 본문 토큰(--fs-quiz-q/a/e), 정답/내 선택
 * 시각(grade-correct / grade-wrong / primary), ::before 번호, ::after 텍스트 라벨 모두 자동 cascade.
 *
 * 트랜지션 — 사용자 명세: "짧고 조용한 슬라이드다운, 바운스 X, 한 번에 하나만".
 *   - 펼침: --rl-dur-base (200ms) — 자연스럽게 열림
 *   - 닫힘: --rl-dur-micro (150ms) — 빠르게 접힘
 *   - grid-template-rows 0fr ↔ 1fr (height 슬라이드) + opacity 0 ↔ 1 (페이드)
 *   - ease-out 토큰 — 바운스 없는 자연 감속
 *   - reduced-motion은 learn-tokens.css 글로벌 룰이 자동 처리 (애니메이션 거의 즉시).
 * ────────────────────────────────────────────────────────────────────── */
.rl-mock-result-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  /* 닫힘 — 빠르게 (micro 150ms) */
  transition: grid-template-rows var(--rl-dur-micro) var(--rl-ease-out),
              opacity var(--rl-dur-micro) var(--rl-ease-out);
}
.rl-mock-result-item[aria-expanded="true"] .rl-mock-result-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  /* 펼침 — 자연스럽게 (base 200ms) */
  transition: grid-template-rows var(--rl-dur-base) var(--rl-ease-out),
              opacity var(--rl-dur-base) var(--rl-ease-out);
}
.rl-mock-result-panel-inner {
  overflow: hidden;
  min-height: 0;
}
/* panel body 배경 — 학습 본문(exam·archive-preview)의 page surface와 동일 톤(`--rl-surface`).
   .answer 셀 base bg가 surface라서 panel을 surface로 두면 셀과 동일 면에 놓여 채점 표시 환경 정합
   (셀은 line-2 border + grade-correct/wrong 색으로 구분). 카드 hover/펼침의 primary-soft가
   panel까지 침투하지 않도록 surface로 명시 — head만 primary-soft, panel은 흰 면. */
.rl-mock-result-panel-body {
  padding: var(--rl-sp-4) var(--rl-sp-5) var(--rl-sp-5);
  border-top: 1px solid var(--rl-line);
  background: var(--rl-surface);
}

/* learn.css `.rl-learn .answer-container { margin: var(--rl-sp-6) 0 0 }` 그대로 받음 —
   본 페이지가 카드 내부 컴팩트 컨텍스트라 위 호흡을 한 단계 줄임(sp-6 → sp-4). 다른 토큰은 무영향. */
.rl-mock-result-panel-body.rl-learn .answer-container {
  margin-top: var(--rl-sp-4);
}

/* 문제 위 식별 메타(시행일·과목·정답률·풀이 수) — quick/note 해설 시트와 동일 토큰.
   panel body가 좌우 sp-5 패딩 단일 출처라 메타도 question과 같이 자체 inset 0(가장자리 정렬).
   항상 한 줄(nowrap·overflow hidden), 넘침 시 과목명(__subject)을 rl_explain_meta_fit.js가 드롭. */
.rl-mock-result-panel-body.rl-learn .view-content .rl-qcard-meta {
  margin-bottom: var(--rl-sp-2);
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-4);
  white-space: nowrap;
  overflow: hidden;
}
.rl-mock-result-panel-body.rl-learn .view-content .rl-qcard-meta__attempts { white-space: nowrap; }

/* 문제 본문 좌우 패딩 — learn.css `.question { padding: 0 var(--rl-sp-3) }` override.
   본 페이지는 panel body가 이미 좌우 sp-5(16) 패딩을 가지므로 문제 본문 자체 좌우 inset은 제거,
   panel body 패딩 단일로 정렬해 본문이 패널 가장자리와 같은 라인에서 시작.
   line-height — learn.css base `lh-relaxed`(1.6) → `lh-normal`(1.5) 한 단계 다운. 폰트 quiz-e/body(15)로
   줄어든 것과 비례해 줄간도 컴팩트. view.css의 `.view-content p { line-height:180% }`(1.8)도 본 페이지 한정
   토큰값으로 reset — 자식 p universal에 동일 line-height 강제해 cascade 잠금. */
.rl-mock-result-panel-body.rl-learn .view-content .question,
.rl-mock-result-panel-body.rl-learn .view-content .question p {
  padding-left: 0;
  padding-right: 0;
  line-height: var(--rl-lh-normal);
}

/* .question 내부 spacing — 폰트가 quiz-q(17) → quiz-e(16)로 한 단계 줄어든 것에 비례해
   자식 요소 간격도 한 단계씩 다운. 시각 호흡이 폰트와 정합되게.
   - 빈 단락 호흡 (.rl-q-spacer): height 0 — 본 페이지는 카드 내부 컴팩트 컨텍스트라 spacer 자체 무력화.
     문제 본문 행간(line-height relaxed)이 단락 호흡 흡수.
   - 예시 박스 padding (.ex): sp-3(12) → sp-2(8) 상하 / sp-3(12) 좌우 유지(텍스트 inset 보호)
   - 예시 박스 안 list 들여쓰기 (ul/ol): sp-6(24) → sp-5(20)
   - 표 셀 padding (th/td): sp-2/sp-3(8/12) → sp-1/sp-2(4/8) (body-sm 폰트에 비례). */
.rl-mock-result-panel-body.rl-learn .view-content .question .rl-q-spacer {
  height: 0;
}

/* 빈 단락 호흡 무력화 — note.php/exam.php는 PHP 후처리로 빈 p를 .rl-q-spacer로 변환하지만
   본 페이지는 wr_content 그대로 dump해 spacer 클래스 부재. 또한 에디터(CKEditor 등)는 빈 단락을
   `<p><br></p>` 또는 `<p>&nbsp;</p>`로 표현하므로 `:empty`만으로는 안 잡힘 — `:has(>br:only-child)`
   동시 사용. height + line-height + margin + padding 모두 0으로 잠금. */
.rl-mock-result-panel-body.rl-learn .view-content .question p:empty,
.rl-mock-result-panel-body.rl-learn .view-content .question p:has(> br:only-child) {
  height: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* .question 마지막 자식 하단 마진 제거 — wr_content 안 인라인 `style="margin-bottom:Npx"`도
   잠금. .question 다음 .rl-grade-status 또는 .answer-container와의 그룹 간 간격은 형제 요소
   자체 margin-top이 결정 → 마지막 자식 잉여 호흡을 0으로 정리해야 위·아래 호흡이 정확히 정합. */
.rl-mock-result-panel-body.rl-learn .view-content .question > *:last-child {
  margin-bottom: 0 !important;
}
.rl-mock-result-panel-body.rl-learn .view-content .question .ex {
  padding: var(--rl-sp-2) var(--rl-sp-3);
}
.rl-mock-result-panel-body.rl-learn .view-content .question .ex > ul,
.rl-mock-result-panel-body.rl-learn .view-content .question .ex > ol {
  padding-inline-start: var(--rl-sp-5);
}
.rl-mock-result-panel-body.rl-learn .view-content .question th,
.rl-mock-result-panel-body.rl-learn .view-content .question td {
  padding: var(--rl-sp-1) var(--rl-sp-2);
}

/* 보기 셀 패딩 — learn.css `.answer { padding: var(--rl-sp-3) !important }` (12 4면) override.
   본 페이지는 카드 내부 펼침 패널이라 셀 컴팩트화 — 상하 sp-2(8) / 좌우 sp-3(12) 유지로
   번호(::before)·마크(::after)·텍스트 grid(28/1fr/auto) 시각 정합 보존.
   min-height: 0 — learn.css `min-height: h-btn-md(44)` 강제 해제. 본 페이지는 읽기 전용 답안지(터치
   액션 없음)이고 60문항 펼침 컨텍스트라 자연 높이로 컴팩트. 결과적으로 셀 높이 padding+line만으로
   결정되어 풀이 화면 톤(44 고정) → 답안 확인 톤(자연)으로 톤 분리. 사용자 명세 ~10% 축소 정합.
   grid 3열을 auto로 — ::after 텍스트 라벨("정답"·"제출") 폭에 맞추거나 일반 셀에서 0으로 자연 collapse. */
.rl-mock-result-panel-body.rl-learn .answer-container .answer {
  padding: var(--rl-sp-2) var(--rl-sp-3) !important;
  grid-template-columns: 28px 1fr auto !important;
  min-height: 0 !important;
}

/* 28 1fr auto — §3.8.2 Answer Choice "Grid layout"(§8.5.3 P2)의 변형: 좌측 28 + 본문 1fr까지 동일,
   우측 ::after 라벨 폭 가변이라 22 → auto. base의 raw 28은 §3.8.2 P2 cite 그대로 통과. */
/* 일반 보기 셀(.answer, 정답/제출 아님) — 사용자 명세: "나머지 보기: 회색 배경만, 빈 원 아이콘 제거".
   읽기 전용 답안지에서 빈 원이 있으면 풀이 화면처럼 오인. 페이지 한정으로 회색 배경 + ::after hide.
   :not(.correct):not(.incorrect)로 specificity 0,5,1 — learn.css `.answer.correct/.incorrect`(0,3,2) 위. */
.rl-mock-result-panel-body.rl-learn .answer-container .answer:not(.correct):not(.incorrect) {
  background: var(--rl-surface-2) !important;
  border-color: var(--rl-line-2) !important;
}
.rl-mock-result-panel-body.rl-learn .answer-container .answer:not(.correct):not(.incorrect)::after {
  display: none;
}

/* 정답·제출 ::after — learn.css base는 ✓/× 원 아이콘. 사용자 명세: "정답"/"제출" 텍스트 라벨로 교체.
   원 시각(border/background/animation/사이즈) 모두 리셋 + 텍스트 chip 톤. grade-correct-accent / grade-wrong-accent. */
.rl-mock-result-panel-body.rl-learn .answer-container .answer.correct::after,
.rl-mock-result-panel-body.rl-learn .answer-container .answer.incorrect::after {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  background-image: none;
  animation: none;
  font-size: var(--rl-fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--rl-ls-tight);
}
.rl-mock-result-panel-body.rl-learn .answer-container .answer.correct::after {
  content: "정답";
  color: var(--rl-grade-correct-accent);
}
.rl-mock-result-panel-body.rl-learn .answer-container .answer.incorrect::after {
  content: "제출";
  color: var(--rl-grade-wrong-accent);
}

/* 문제·보기 폰트 — learn.css base는 --fs-quiz-q(17, 문제) / --fs-quiz-a(17, 보기). 본 페이지는
   카드 내부 컴팩트 패널이라 학습 토큰 그룹 가장 작은 quiz-e(16)에서 한 단계 더 다운 — 일반 본문
   토큰 --fs-body(15)로 cross-over. 답안지 60문항 펼침 컨텍스트의 세로 공간 절약 + 카드 펼침 호흡 정합.
   자체 + 자식 universal `*`에 동일 토큰 + !important 적용 — wr_content 안 사용자 게시 인라인
   `style="font-size:Npx"`가 있어도 CSS !important가 inline의 일반 specificity(1,0,0,0)를 이김
   (inline에 !important 없는 한). learn.css의 `.rl-learn .view-content { font-size:var(--rl-fs-body) !important }`
   상위 cascade와 같은 강도로 정합. ::before(번호) / ::after("정답"/"제출") pseudo는 universal에 안 잡혀
   자기 토큰(--rl-fs-label / --rl-fs-caption) 유지. */
.rl-mock-result-panel-body.rl-learn .view-content .question,
.rl-mock-result-panel-body.rl-learn .view-content .question *,
.rl-mock-result-panel-body.rl-learn .answer-container .answer,
.rl-mock-result-panel-body.rl-learn .answer-container .answer * {
  font-size: var(--rl-fs-body) !important;
}

/* 표 — learn.css `.question table { font-size: var(--rl-fs-body-sm) }` 토큰 그대로 복원.
   위 universal !important가 table까지 quiz-e로 강제하는 회귀 차단. specificity 0,4,2로 universal(0,4,1) 위. */
.rl-mock-result-panel-body.rl-learn .view-content .question table,
.rl-mock-result-panel-body.rl-learn .view-content .question table * {
  font-size: var(--rl-fs-body-sm) !important;
}

/* MathJax 수식 — `<mjx-container>` 안 모든 요소는 자체 root font-size에 비례 계산. universal
   !important가 mjx-* 자식까지 강제하면 비례 깨짐 → 자식 universal에 inherit로 복원해
   mjx-container 자체(=inherit quiz-e)에 비례 렌더링. specificity 0,4,2로 universal(0,4,1) 위. */
.rl-mock-result-panel-body.rl-learn .view-content .question mjx-container,
.rl-mock-result-panel-body.rl-learn .view-content .question mjx-container * {
  font-size: inherit !important;
}

/* 채점 후 메타 행 — note.php 단일 출처(.rl-grade-status / .rl-gs-chip / .rl-gs-result)
   직접 차용. learn.css가 모든 토큰·animation·다크 모드 매핑을 받음.
   본 페이지는 chip 1개(.rl-gs-result)만 노출 — 정답률·해설 chip 미사용.
   learn.css base는 grid 1fr auto 1fr(3 chip 위치 분리)이라 chip 1개는 auto-flow로 1열(좌측) 정착 →
   본 페이지 한정 flex center로 override해 단일 chip을 가운데 배치. */
.rl-mock-result-panel-body.rl-learn .rl-grade-status {
  display: flex;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 풀이(해설) 영역 — wr_content answer_summary HTML dump. learn.css의
 * #explanation-section 마크업과 다른 자유 컨텐츠이므로 페이지 한정 wrapper만 정의.
 * 학습 본문 토큰(--fs-quiz-e / --lh-relaxed) 직접 부여 — .rl-learn .view-content cascade가
 * fs-body로 통일하는 것을 본 wrapper에서 학습 해설 토큰으로 명시 (단일 출처는 learn.css 토큰).
 * ────────────────────────────────────────────────────────────────────── */
.rl-mock-result-explain {
  margin-top: var(--rl-sp-5);
  padding-top: var(--rl-sp-4);
  border-top: 1px solid var(--rl-line);
}
.rl-mock-result-explain-title {
  margin: 0 0 var(--rl-sp-2);
  font-size: var(--rl-fs-body);
  font-weight: 700;
  color: var(--rl-text-2);
  letter-spacing: var(--rl-ls-tight);
  line-height: var(--rl-lh-snug);
}
.rl-mock-result-explain-body {
  font-size: var(--rl-fs-body);
  line-height: var(--rl-lh-relaxed);
  color: var(--rl-text);
}
.rl-mock-result-explain-empty {
  margin: 0;
  font-size: var(--rl-fs-body-sm);
  color: var(--rl-text-3);
  line-height: var(--rl-lh-normal);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 도전 통계 + 명예의 전당 카드 (.rl-mock-stats)
 *   page-specific 정보형 카드 — Smart Entry(.rl-banner §3.8.10)가 action·진입 카드라
 *   stats·leaderboard 정보 surface로는 부적합해 페이지 한정 분리. 시각 정합은 형제
 *   카드(.rl-mock-result-hero / .rl-mock-result-next)와 동일 토큰(surface-elev / line-2 /
 *   r-md / shadow-md / padding sp-4 sp-3). hero ↔ stats ↔ next 사이 24px 호흡은
 *   banner.css base와 동일하게 margin sp-6 0으로 단일 출처.
 *
 *   viewer 분기 (G-5):
 *     - data-rl-mode="live"  (owner+challenge):       metrics + delta + HoF + toggle (+ self-rank-out)
 *     - data-rl-mode="live"  (owner+원본, live 우선):  metrics + delta + HoF + toggle (+ self-rank-out)
 *     - data-rl-mode="cache" (owner+원본, live 장애):  metrics + delta + HoF + toggle (self-rank-out 제외)
 *     - data-rl-mode="cache" (public_*):              metrics + HoF (delta/toggle 미렌더 — owner 아님)
 *   슬롯 노출은 PHP가 owner 여부 기준으로 분기(mode 무관). self-rank-out만 mode==='live' 조건.
 *   CSS는 mode 속성 자체에 분기 룰 없음.
 * ────────────────────────────────────────────────────────────────────── */
.rl-mock-stats {
  margin: var(--rl-sp-6) 0;
  padding: var(--rl-sp-4) var(--rl-sp-3);
  background: var(--rl-surface-elev);
  border: 1px solid var(--rl-line-2);
  border-radius: var(--rl-r-md);
  box-shadow: var(--rl-shadow-md);
  /* 목록 배지 카드에서 #앵커 진입 시 정착 offset — 아코디언 .rl-mock-result-item와 동일 표현식(§2.9.1).
     sticky 앱바(safe-top + appbar 높이)에 통계 제목이 가리지 않도록 위 여백 확보. */
  scroll-margin-top: calc(var(--rl-safe-top, env(safe-area-inset-top, 0px)) + var(--rl-h-appbar) + var(--rl-sp-2));
}
/* 도착 1회성 강조 — "여기로 이동했다" 인지용. 배경이 0.5s primary-soft로 살짝 밝아졌다 base(surface-elev)로
   복귀(animation fill 없음 → 종료 시 CSS background 그대로). just-finished pulse와 동일 정신(§1.14 (c)
   1회성·반복 금지), 통계 카드 전용 클래스로 분리. 과한 모션 X — 배경 톤 변화만. */
.rl-mock-stats.is-arrived {
  /* ease: 같은 파일 아코디언 transition과 동일하게 scope 토큰 --rl-ease-out 사용
     (learn-tokens.css에서 시스템 --ease-out으로 정의 — 단일 값). */
  animation: rl-mock-stats-arrive 500ms var(--rl-ease-out);
}
@keyframes rl-mock-stats-arrive {
  0%   { background: var(--rl-primary-soft); }
  100% { background: var(--rl-surface-elev); }
}
@media (prefers-reduced-motion: reduce) {
  .rl-mock-stats.is-arrived { animation: none; }
}

/* 섹션 heading — 도전 통계 / 상위 점수 두 곳 공통. fs-h4 + 700 + text-2(보조 위계).
   메트릭/리스트와 sp-3(12) 호흡, 카드 첫 슬롯이라 marg-top 0. */
.rl-mock-stats__heading {
  margin: 0 0 var(--rl-sp-3);
  font-size: var(--rl-fs-h4);
  font-weight: 700;
  color: var(--rl-text-2);
  line-height: var(--rl-lh-snug);
  letter-spacing: var(--rl-ls-tight);
}

/* 3-tile metrics grid — 도전·평균·최고. surface-2 칩에 큰 숫자 + 작은 라벨 stack.
   숫자는 num-display(26px) + tabular-nums로 시각 정합, 라벨은 caption + text-3로 후퇴.
   타일 간 sp-2(8) gap — 카드 내부 작은 호흡(같은 그룹 안 형제). */
.rl-mock-stats__metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rl-sp-2);
}
.rl-mock-stats__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rl-sp-1);
  /* 사용자 검수 피드백 — 통계 박스 위아래 여백 한 단계 압축(sp-3→sp-2). */
  padding: var(--rl-sp-2);
  background: var(--rl-surface-2);
  border-radius: var(--rl-r-sm);
}
.rl-mock-stats__metric-num {
  font-size: var(--rl-fs-num-display);
  font-weight: 700;
  line-height: 1;
  color: var(--rl-text);
  letter-spacing: var(--rl-ls-num);
  font-variant-numeric: tabular-nums;
}
/* 메트릭 숫자 옆 단위 — 회/점. 숫자(num-display 26)에 비해 한 단계 작게(caption 12) + 약한 톤.
   2회 / 29점 / 30점 — 숫자·단위가 한 덩어리로 읽히도록 좌측 마진 제거(사용자 검수 피드백). */
.rl-mock-stats__metric-unit {
  margin-left: 0;
  font-size: var(--rl-fs-caption);
  font-weight: 600;
  color: var(--rl-text-3);
  letter-spacing: var(--rl-ls-body);
}

.rl-mock-stats__metric-label {
  font-size: var(--rl-fs-caption);
  font-weight: 500;
  color: var(--rl-text-3);
  line-height: var(--rl-lh-snug);
  letter-spacing: var(--rl-ls-body);
}

/* 표본 적음 안내 — attempt_total < 5 시 메트릭 grid 바로 아래 한 줄.
   같은 보조 메타 그룹(메트릭 + 안내 한 묶음)으로 sp-2 호흡, fs-caption-sm + text-3로 후퇴.
   delta(있을 시)는 다음 슬롯에서 sp-3로 분리 — 안내가 메트릭 그룹 안 보조임을 시각적으로 표현. */
.rl-mock-stats__sample-note {
  /* 사용자 검수 피드백 — sample-note 위 마진 sp-2→sp-1로 metric grid와 더 타이트하게. */
  margin: var(--rl-sp-1) 0 0;
  padding: 0 var(--rl-sp-1);
  font-size: var(--rl-fs-caption-sm);
  color: var(--rl-text-3);
  line-height: var(--rl-lh-snug);
  letter-spacing: var(--rl-ls-body);
}

/* delta chip — live + owner 한정. 평균 대비 위/아래/같음 3 방향, 시각 톤도 분리.
   above=good(녹색) / below=warn(주황) / same=중립 회색. 화살표 아이콘 + 카피 한 줄.
   inline-flex로 카피 길이만큼 자연 폭, 카드 좌측 정착 (block stack 흐름 안 align). */
.rl-mock-stats__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--rl-sp-1);
  /* 위 요소(metric grid 박스 / sample-note)에 딱 붙지 않도록 같은 보조 그룹 내 호흡(sp-1). */
  margin: var(--rl-sp-1) 0 0;
  padding: var(--rl-sp-1) var(--rl-sp-3);
  border-radius: var(--rl-r-full);
  font-size: var(--rl-fs-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--rl-ls-tight);
}
.rl-mock-stats__delta[data-direction="above"] {
  background: var(--rl-good-soft);
  color: var(--rl-good-text);
}
.rl-mock-stats__delta[data-direction="below"] {
  background: var(--rl-warn-soft);
  color: var(--rl-warn-text);
}
.rl-mock-stats__delta[data-direction="same"] {
  background: var(--rl-surface-2);
  color: var(--rl-text-3);
}
.rl-mock-stats__delta-icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

/* divider — heading 그룹 사이 시각 분리. line(가장 약한 톤) 1px, sp-4 상하 호흡.
   <hr> 기본 마진/보더 리셋 + display block. */
.rl-mock-stats__divider {
  margin: var(--rl-sp-4) 0;
  padding: 0;
  height: 1px;
  border: 0;
  background: var(--rl-line);
}

/* leaderboard — 랭크 pill + 이름 + 점수 + (본인 한정) "내 기록" chip 한 줄 row.
   행 간 sp-1(4) gap — 같은 그룹 안 형제(연속 row)는 타이트하게.
   본인 row는 primary-soft bg로 시각 lift, rank pill·이름 색까지 동반 강조. */
.rl-mock-stats__leaderboard {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rl-sp-1);
}
.rl-mock-stats__row {
  display: flex;
  align-items: center;
  gap: var(--rl-sp-3);
  /* 사용자 검수 피드백 — top 5가 들어가는 케이스에서 카드가 너무 길어지지 않도록
     세로 padding을 한 단계 압축(sp-2 → sp-1). 좌우 padding은 그대로 유지. */
  padding: var(--rl-sp-1) var(--rl-sp-3);
  border-radius: var(--rl-r-sm);
  background: transparent;
}
.rl-mock-stats__row[data-is-self="true"] {
  background: var(--rl-primary-soft);
}

/* drill-down 행(내 기록 아님 + 결과 페이지 존재) — 행 전체가 참여자 결과로 이동.
   스트레치드 anchor 단일 hit area + hover 시 surface-2 lift. chevron은 §3.1.5 chevron-only muted. */
.rl-mock-stats__row[data-rl-linkable="true"] {
  position: relative;
  cursor: pointer;
}
.rl-mock-stats__row-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.rl-mock-stats__row-link:focus-visible {
  outline: 2px solid var(--rl-primary);
  outline-offset: 2px;
}
@media (hover: hover) {
  .rl-mock-stats__row[data-rl-linkable="true"]:hover {
    background: var(--rl-surface-2);
  }
}
/* trailing chevron — 점수 오른쪽 고정 슬롯. 모든 행에 동일 폭(아이콘 14px=sp-4) reserve해 chevron
   유무와 무관하게 점수 정렬 불변. 링크 행만 내부에 chevron(기본 text-3, 행 hover 시 primary 등장 +
   translateX 마이크로모션 §3.1.5). 비링크 행은 빈 슬롯이 같은 폭만 차지. */
.rl-mock-stats__row-chevron {
  flex: 0 0 auto;
  width: var(--rl-sp-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rl-text-3);
  transition: transform var(--rl-dur-micro) var(--rl-ease),
              color var(--rl-dur-micro) var(--rl-ease);
}
@media (hover: hover) {
  .rl-mock-stats__row[data-rl-linkable="true"]:hover .rl-mock-stats__row-chevron {
    color: var(--rl-primary);
    transform: translateX(2px);
  }
}

/* 랭크 pill — 24px(sp-6 토큰) 원형. surface-2 base, 본인 row는 primary 채움. */
.rl-mock-stats__rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rl-sp-6);
  height: var(--rl-sp-6);
  border-radius: var(--rl-r-full);
  background: var(--rl-surface-2);
  color: var(--rl-text-2);
  font-size: var(--rl-fs-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--rl-ls-tight);
  font-variant-numeric: tabular-nums;
}
.rl-mock-stats__row[data-is-self="true"] .rl-mock-stats__rank {
  background: var(--rl-primary);
  color: var(--rl-on-primary);
}

/* 이름은 내용 폭(grow X) — 본인 row의 "내 기록" chip이 이름 바로 옆에 붙도록(소유 표시). 남는 폭은
   점수의 margin-left:auto가 흡수해 점수를 우측 끝에 고정. 길면 shrink + ellipsis(min-width 0). */
.rl-mock-stats__name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--rl-fs-body-sm);
  font-weight: 500;
  color: var(--rl-text-2);
  letter-spacing: var(--rl-ls-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-mock-stats__row[data-is-self="true"] .rl-mock-stats__name {
  color: var(--rl-text);
  font-weight: 700;
}

/* 점수 — 행의 정렬 기준이라 항상 우측 끝 고정(margin-left:auto가 이름·chip 뒤 남는 폭 흡수).
   fs-h4 + tabular-nums. 단위(점) 한 단계 작게 + text-3로 보조. */
.rl-mock-stats__score {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--rl-fs-h4);
  font-weight: 700;
  color: var(--rl-text);
  line-height: 1;
  letter-spacing: var(--rl-ls-num);
  font-variant-numeric: tabular-nums;
}
.rl-mock-stats__score-unit {
  margin-left: var(--rl-sp-1);
  font-size: var(--rl-fs-caption);
  font-weight: 600;
  color: var(--rl-text-3);
}

/* 본인 chip — 이름 옆 소유 표시("이 행이 내 행"). 점수 정렬 기준을 흐리지 않게 점수 왼쪽(이름 뒤)에 배치.
   행 배경이 이미 primary-soft로 강조되므로 chip은 점수보다 약하게 — 연한 파란(primary-edge) fill + muted
   텍스트(text-2) + weight 600. 목록 카드 "내 기록" 배지(.rl-mock-recent__self)와 동일 톤(역할 일관). */
.rl-mock-stats__self-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: var(--rl-sp-1) var(--rl-sp-2);
  border-radius: var(--rl-r-full);
  background: var(--rl-primary-edge);
  color: var(--rl-text-2);
  font-size: var(--rl-fs-caption-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--rl-ls-tight);
  white-space: nowrap;
}

/* "현재 화면" chip — drill-down으로 이동한 결과의 주인 행 표시. self-chip과 같은 pill 폼이되
   "나"가 아니므로 primary tint 대신 중립(surface-2 fill/text-2)으로 구분(rank pill과 같은 중립 톤). */
.rl-mock-stats__viewing-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: var(--rl-sp-1) var(--rl-sp-2);
  border-radius: var(--rl-r-full);
  background: var(--rl-surface-2);
  color: var(--rl-text-2);
  font-size: var(--rl-fs-caption-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--rl-ls-tight);
  white-space: nowrap;
}

/* optin row — live + 본인이 top N 진입 시. 시각적으로 조용한 보조 슬롯.
   체크박스는 시스템 네이티브 그대로(accent-color로 색만 정합).
   사용자 검수 피드백 — checkbox ↔ text 수직 가운데 정렬: line-height:1 + checkbox margin 0
   으로 inline-baseline 영향 제거. last-child 0 margin은 카드 패딩 통일 룰(.rl-mock-stats > :last-child)에서 처리. */
.rl-mock-stats__optin {
  display: flex;
  align-items: center;
  gap: var(--rl-sp-2);
  margin-top: var(--rl-sp-4);
  padding-top: var(--rl-sp-3);
  border-top: 1px solid var(--rl-line);
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-3);
  line-height: 1;
  cursor: pointer;
}
.rl-mock-stats__optin input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--rl-primary);
}
.rl-mock-stats__optin > span {
  line-height: 1;
}

/* 카드 하단 패딩 통일 — 마지막 슬롯이 어떤 컴포넌트(__leaderboard / __optin / __hint / __delta)이든
   카드 padding-bottom과 동일 시각 호흡 유지. 슬롯별 margin-bottom 잔여로 카드 끝 패딩이 다르게 보이는
   회귀 회수. <ol>·<p>·<label> 같은 컨테이너의 leaf 자식까지 cascade(2단계)로 reset. */
.rl-mock-stats > :last-child,
.rl-mock-stats > :last-child > :last-child {
  margin-bottom: 0;
}

/* hint — 본인 top N 밖 / 비회원 안내. optin과 동일 위계의 보조 카피. */
.rl-mock-stats__hint {
  margin: var(--rl-sp-4) 0 0;
  padding-top: var(--rl-sp-3);
  border-top: 1px solid var(--rl-line);
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-3);
  line-height: var(--rl-lh-normal);
}

/* 답안지 잠금 안내 --quiet — 공유 .rl-archive-empty(rl_note_archive.css, 진짜 빈 상태) 변형.
   주 행동은 상단 도전 CTA라 이 안내는 시각 강도를 낮춘다(박스 강조·진한 굵은 제목 완화).
   공유 컴포넌트는 그대로 두고 이 surface에서만 토큰으로 override. */
.rl-archive-empty--quiet {
  padding: var(--rl-sp-5) var(--rl-sp-4);
  background: transparent;
  border-color: var(--rl-line);
}
.rl-archive-empty--quiet .rl-archive-empty__title {
  font-size: var(--rl-fs-body-sm);
  font-weight: 500;
  color: var(--rl-text-2);
}