/* rl_mock.php — 모의시험 탭 진입 페이지. 디자인 시스템 토큰(--rl-*)만, raw hex 금지.
   평탄 구조 — 모든 sub-element가 outer section 직계 sibling(중첩 section 없음). */
.rl-mock { display:block; }

/* ── 섹션 헤더 — h2 제목 단독(트리거는 목록 아래 보조 카드로 이동). 오답노트 .rl-note-home-section-head와 1:1 ── */
/* 제목 단독 → min-height 미부여로 제목 캡 높이 수축, 상단 간격을 .rl-mock-popular__head(24px)와 시각 정합.
   하단은 리스트 밀착 방지 위해 sp-2. */
.rl-mock-recent__head {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--rl-sp-3); margin:var(--rl-sp-6) 0 var(--rl-sp-2);
    padding-inline:var(--rl-sp-1);
}
.rl-mock-recent__title {
    margin:0;
    font-size:var(--rl-fs-h4); font-weight:700;
    color:var(--rl-text-2); letter-spacing:var(--rl-ls-tight);
    line-height:var(--rl-lh-snug);
}
/* 목록 하단 "전체 기록 보기" 버튼 — 오답노트 .rl-note-home-list-toggle과 1:1 토큰.
   중앙 정렬 + transparent + 옅은 톤 — 메인 액션 위계 보호(시선 도구 X).
   페이지 이동형이라 chevron은 right(〉). 오답노트 펼치기형(˅)과 동사 구분. */
.rl-mock-recent__more-link {
    display:flex; align-items:center; justify-content:center;
    gap:var(--rl-sp-1);
    width:100%; margin:0 0 24px; padding:8px 14px;
    background:transparent; border:0; border-radius:var(--rl-r-md);
    color:var(--rl-text-3);
    font-size:var(--rl-fs-label); font-weight:600;
    letter-spacing:var(--rl-ls-body);
    text-decoration:none;
    transition:background .15s ease, color .15s ease;
}
@media (hover: hover) {
    .rl-mock-recent__more-link:hover {
        background:var(--rl-surface-2); color:var(--rl-text-2);
        text-decoration:none;
    }
}
.rl-mock-recent__more-link:active {
    background:var(--rl-surface-2); color:var(--rl-text-2);
    text-decoration:none;
}
.rl-mock-recent__more-link:focus-visible {
    outline:2px solid var(--rl-primary); outline-offset:2px;
}
.rl-mock-recent__more-link-icon {
    display:inline-flex; align-items:center;
    color:var(--rl-text-3);
}

/* ── 복습 목록 — 오답노트 `.rl-note-home-list` 정합. div > a 직계, gap 8px.
   base trailing 8px — rl_mock.php(more-link·ticker·next-step). ── */
.rl-mock-recent__list {
    display:flex; flex-direction:column; gap:var(--rl-sp-2);
    margin:0 0 var(--rl-sp-2);
}
/* sentinel(.rl-archive-scroll-status) 동반 페이지(rl_mock_records / rl_mock_live) —
   "마지막 카드 ↔ '모든 기록을 확인했어요' 텍스트" visible 간격을 sentinel padding-top sp-5(16) 단독으로
   결정한다. base margin-bottom 8을 0으로 override해 시각 간격 16 달성. rl_mock.php의 home list는
   sibling이 sentinel이 아니라 unmatch → base 8 유지. 형제 페이지(rl_note_archive·rl_quick_archive)는
   list 클래스가 `.rl-archive-list`라 :has 조건 자체 unmatch → 영향 0. */
.rl-mock-recent__list:has(+ .rl-archive-scroll-status) {
    margin-bottom:0;
}
/* §3.4.7 List Entry Card — padding sp-3/sp-5(12/16), hover border-edge + primary-soft 배경.
   오답노트 .rl-note-home-list-card와 1:1 메트릭 유지 (첫 화면 압축 일관성). */
.rl-mock-recent__link {
    display:flex; align-items:center; justify-content:space-between;
    /* gap sp-5 — card-text(배지 끝)와 chevron 사이. 오답노트 .rl-note-home-list-card와 1:1 메트릭. */
    gap:var(--rl-sp-5); padding:var(--rl-sp-3) var(--rl-sp-5);
    background:var(--rl-surface-elev); border:1px solid var(--rl-line-2);
    border-radius:var(--rl-r-md); color:var(--rl-text);
    text-decoration:none;
    /* box-shadow 400ms — 방금 친 시험 강조 해제(JS가 [data-just-finished] 제거) 시 부드러운 페이드.
       border/bg .15s는 hover 즉시 피드백 유지. */
    transition:border-color .15s ease, background .15s ease, box-shadow 400ms var(--ease-out);
}
/* "방금 친 시험" 일시 강조 — page/result.php에서 set_session('rl_mock_just_finished_wr_id')로 신호.
   rl_mock.php 진입 시 매칭 카드에 data-just-finished 부여 → 위 모서리를 경첩 삼아 슬롯 위에서
   젖혀진 채 들렸다가, 아래로 내려오며 평평하게 펴져 목록 행에 "꽂히듯" 박히는 1회성 진입 모션.
   끝에 미세 역젖힘(rotateX 4deg→0)으로 박히는 손맛. primary-edge border + primary-soft 배경 +
   shadow-md로 정착. JS가 ~2.4s 뒤 attribute 제거하면 base transition으로 자연 복귀.
   재생 시점은 스크롤 진입 시 1회(인라인 JS가 is-arming→is-revealed 토글) — 흐름 카드와 동일 게이트.
   design-system §1.14 (c) "반복 노출 자극화 금지" 정합 — 1회성, 반복 없음. */
.rl-mock-recent__link[data-just-finished] {
    border-color:var(--rl-primary-edge);
    background:var(--rl-primary-soft);
    box-shadow:var(--rl-shadow-md);
    /* 위 모서리 경첩 + 비행 중 형제 위로 떠오르도록 stacking */
    transform-origin:50% 0;
    position:relative;
    z-index:1;
}
/* 화면 진입 전 대기 — 슬롯-인 0% 상태(슬롯 위 젖혀진 채 은닉) 유지. */
.rl-mock-recent__link[data-just-finished].is-arming {
    opacity:0;
    transform:perspective(1200px) translateY(-46%) rotateX(-34deg);
}
/* 카드가 화면에 들어온 순간 1회 재생. */
.rl-mock-recent__link[data-just-finished].is-revealed {
    animation:rl-mock-slot-in 600ms var(--ease-out) both;
}
@keyframes rl-mock-slot-in {
    0% {
        opacity:0;
        /* 슬롯 위에서 위 모서리를 경첩 삼아 젖혀진 채 대기 */
        transform:perspective(1200px) translateY(-46%) rotateX(-34deg);
        box-shadow:var(--rl-shadow-pop);
    }
    45% { opacity:1; }
    72% {
        /* 슬롯 바닥에 닿아 살짝 박힘 — 반대로 미세하게 젖혀짐 */
        transform:perspective(1200px) translateY(0) rotateX(4deg);
    }
    100% {
        opacity:1;
        transform:perspective(1200px) translateY(0) rotateX(0);
        box-shadow:var(--rl-shadow-md);
    }
}
@media (prefers-reduced-motion: reduce) {
    .rl-mock-recent__link[data-just-finished].is-revealed { animation:none; }
}
@media (hover: hover) {
    .rl-mock-recent__link:hover {
        border-color:var(--rl-primary-edge);
        background:var(--rl-primary-soft);
        text-decoration:none;
    }
}
.rl-mock-recent__link:active {
    border-color:var(--rl-primary-edge);
    background:var(--rl-primary-soft);
    text-decoration:none;
}
.rl-mock-recent__text {
    display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto;
}
/* 과목명 + 우측 스테이지 배지 row — 오답노트 .rl-note-home-list-card-head와 1:1 메트릭.
   gap sp-3 — 과목명 ellipsis 끝과 배지가 시각적으로 경쟁하지 않도록 호흡 확보. */
.rl-mock-recent__row {
    display:flex; align-items:center;
    gap:var(--rl-sp-3); min-width:0;
}
.rl-mock-recent__subject {
    flex:1 1 auto; min-width:0;
    font-size:var(--rl-fs-body); font-weight:500; line-height:1.4;
    color:var(--rl-text); letter-spacing:var(--rl-ls-body);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 스테이지 배지 — 오답노트 .rl-note-home-list-card-state와 1:1 토큰.
   mastered(good)=합격/고득점, recheck(bad)=불합격→오답 확인, progress=채점 전 폴백. */
.rl-mock-recent__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-recent__state[data-state-kind="progress"] {
    background:var(--rl-surface-2); color:var(--rl-text-2);
}
.rl-mock-recent__state[data-state-kind="mastered"] {
    background:var(--rl-good-soft); color:var(--rl-good-text);
}
.rl-mock-recent__state[data-state-kind="recheck"] {
    background:var(--rl-bad-soft); color:var(--rl-bad-text);
}
/* 보조 배지(내 기록·참여자) 공통 — 소유/속성 표시(행동 유도 아님)라 진단 state 배지보다 왼쪽 + 한 단계
   약한 톤. §3.4.3 Badge 문법을 .rl-mock-recent__state와 공유(height 20 / padding 0 sp-2 / r-full /
   caption-sm). 텍스트는 포화 CTA 색을 피한 muted 톤(각 variant가 짝 토큰 지정 — 아래) — CTA/버튼처럼
   보이지 않게. font-weight도 state(700)보다 한 단계 낮춰 위계 분리. */
.rl-mock-recent__challenge,
.rl-mock-recent__self {
    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:600; line-height:1;
    letter-spacing:var(--rl-ls-body);
    white-space:nowrap;
}
/* "참여자 N명" — 같은 시험지 사회적 신호. info-soft bg + 짝 토큰 info-text(차분한 진한 파랑).
   state 배지(good/bad-soft + 짝 good/bad-text)와 동일 패턴 — soft + 짝 *-text, 모두 static이라
   라이트·다크 동일 고대비. 적응형 --rl-text-3(다크 회색)과 짝 어긋나 다크 대비 저하 회수. */
.rl-mock-recent__challenge {
    background:var(--rl-info-soft); color:var(--rl-info-text);
}
/* "내 기록" — 익명 라이브 피드(rl_mock_live) 본인 row 소유 표시. HoF self-chip과 동일 어휘. 연한 파란 bg
   (hover/data-self의 primary-soft와 겹쳐도 한 톤 진해 식별) + muted 텍스트(포화 primary 제거 → 비-CTA). */
.rl-mock-recent__self {
    background:var(--rl-primary-edge); color:var(--rl-text-2);
}
/* 본인 row 카드 아주 약한 강조 — 기본 line-2(회색) 대신 primary-edge(연한 파랑) 테두리만(배경 유지,
   좌측 수직 바 금지 §1.10). hover/active의 primary-soft 배경과는 배경 유무로 구분. */
.rl-mock-recent__link[data-self] {
    border-color:var(--rl-primary-edge);
}
/* 메타 라인 1줄 고정 — 카드 높이 2줄 유지(과목명 row + meta row). 메타가 길어지면(rl_mock_records의
   "점·완료일·정답/오답/미응답") 좁은 화면에서 ellipsis. rl_mock.php·rl_mock_live의 짧은 메타는
   nowrap inert — 형제 영향 0. <span>이 기본 inline이라 text-overflow가 동작하지 않으므로
   display:block로 승격 — 부모(.rl-mock-recent__text)가 min-width:0이라 flex shrink 통과. */
.rl-mock-recent__meta {
    display:block;
    font-size:var(--rl-fs-caption); color:var(--rl-text-3);
    line-height:1.5;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
.rl-mock-recent__meta strong {
    color:var(--rl-text-2); font-weight:600;
}
/* trailing CTA — chevron-only muted variant (§3.4.7 + §1.14 (f) affordance ladder).
   상단 Smart Entry 메인 CTA의 시각 위계 보호 — N건 반복 행 우측에는 텍스트 없이
   chevron만, 기본 --text-3 약함. 카드 hover 시 --primary로 등장. */
.rl-mock-recent__cta {
    display:inline-flex; align-items:center; flex-shrink:0;
    color:var(--rl-text-3);
    transition:color .15s ease;
}
@media (hover: hover) {
    .rl-mock-recent__link:hover .rl-mock-recent__cta {
        color:var(--rl-primary);
    }
}
.rl-mock-recent__link:active .rl-mock-recent__cta,
.rl-mock-recent__link:focus-visible .rl-mock-recent__cta {
    color:var(--rl-primary);
}

/* ── 실시간 모의시험 현황 티커 — 2줄 구조(head + slot).
   head row: 라벨 + 우측 "전체 현황 >" 시각 affordance(클릭은 카드 전체).
   slot row: 이벤트 1건(rel + subject + 채점 완료) — 6.5초 주기 회전.
   카드 자체가 <a> — hover/active 시 .rl-mock-recent__link와 동일 톤.
   상단 그룹 간격 sp-6를 티커가 단일 출처로 책임(다른 섹션 __head와 동일 패턴) — 위 형제가
   광고든 빈 상태로 빠진 카드든 무엇이어도 24 보장(.rl-mock block collapse). 광고에 margin 부여 불가. */
a.rl-mock-ticker {
    display:flex; flex-direction:column; gap:var(--rl-sp-1);
    padding:var(--rl-sp-3) var(--rl-sp-5); margin:var(--rl-sp-6) 0 var(--rl-sp-3);
    background:var(--rl-surface); border-radius:var(--rl-r-md);
    border:1px solid var(--rl-line);
    color:var(--rl-text); text-decoration:none;
    transition:border-color .15s ease, background .15s ease;
}
@media (hover: hover) {
    a.rl-mock-ticker:hover {
        border-color:var(--rl-primary-edge);
        background:var(--rl-primary-soft);
        text-decoration:none;
    }
}
a.rl-mock-ticker:active {
    border-color:var(--rl-primary-edge);
    background:var(--rl-primary-soft);
    text-decoration:none;
}
a.rl-mock-ticker:focus-visible {
    outline:2px solid var(--rl-primary); outline-offset:2px;
}
.rl-mock-ticker__head {
    display:flex; align-items:baseline; justify-content:space-between;
    gap:var(--rl-sp-3);
}
.rl-mock-ticker__head-label {
    font-size:var(--rl-fs-caption);
    color:var(--rl-text-3); letter-spacing:var(--rl-ls-body);
}
.rl-mock-ticker__slot {
    min-width:0;
    /* gap sp-1: rel trailing "·" 문장이 자연 흐름으로 보이도록 좁게. */
    display:inline-flex; align-items:baseline; gap:var(--rl-sp-1);
    font-size:var(--rl-fs-body-sm); color:var(--rl-text-2);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transition:opacity .32s ease;
}
.rl-mock-ticker__slot.is-fading { opacity:0; }
/* 시간 ("방금 전") — 슬롯 선두, 약한 톤. */
.rl-mock-ticker__rel { color:var(--rl-text-3); font-weight:400; }
.rl-mock-ticker__subject { font-weight:600; color:var(--rl-text); }
/* 동작어("채점 완료") — subject에 비해 한 단계 약함. 점수·합격여부 raw 노출 회피(§1.14 (c)). */
.rl-mock-ticker__action { font-weight:500; color:var(--rl-text-2); }
/* head row 우측 시각 affordance — span(비인터랙티브). 카드 hover에 동조해 톤만 변동. */
.rl-mock-ticker__more {
    flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center; gap:2px;
    font-size:var(--rl-fs-caption); color:var(--rl-text-4);
    transition:color .15s ease;
}
@media (hover: hover) {
    a.rl-mock-ticker:hover .rl-mock-ticker__more {
        color:var(--rl-primary);
    }
}
a.rl-mock-ticker:active .rl-mock-ticker__more,
a.rl-mock-ticker:focus-visible .rl-mock-ticker__more {
    color:var(--rl-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 최근 모의시험 흐름 (.rl-mock-flow) — design-system §3.8.11 Score Trend Bars.
 *   CTA 과목 한정 점수 막대그래프. Y축 0~100 고정, 합격선 가로 점선, 마지막 막대만 강조.
 *   §3.4.1 Card + §3.8.10 L2 Auxiliary 톤(surface-elev + line-2 + shadow-sm).
 *   동적 높이(--rl-bar-h/--rl-passline)는 파셜의 요소 style로 주입(여기선 소비만, §CSS 예외).
 * ────────────────────────────────────────────────────────────────────────── */
.rl-mock-flow-section { display:block; }
/* 제목 = 카드 밖 standalone 섹션 헤딩. .rl-mock-recent__head / .rl-mock-popular__head와 동일 토큰. */
.rl-mock-flow__head {
    margin:var(--rl-sp-6) 0 var(--rl-sp-2);
    padding-inline:var(--rl-sp-1);
}
.rl-mock-flow__title {
    margin:0;
    display:flex; align-items:baseline; gap:var(--rl-sp-1);
    font-size:var(--rl-fs-h4); font-weight:700;
    color:var(--rl-text-2); letter-spacing:var(--rl-ls-tight);
    line-height:var(--rl-lh-snug);
    white-space:nowrap;
}
/* 과목명만 말줄임 — 길어지면 …, 접미사("최근 모의시험 흐름")는 항상 한 줄 유지. */
.rl-mock-flow__title-subject {
    min-width:0; flex:0 1 auto;
    overflow:hidden; text-overflow:ellipsis;
}
.rl-mock-flow__title-suffix { flex:0 0 auto; }
/* 카드 본문 — §3.4.1 Card + §3.8.10 L2 Auxiliary 톤. */
.rl-mock-flow__card {
    padding:var(--rl-sp-4) var(--rl-sp-4) var(--rl-sp-5);
    background:var(--rl-surface-elev);
    border:1px solid var(--rl-line-2);
    border-radius:var(--rl-r-md);
    box-shadow:var(--rl-shadow-sm);
}
/* 요약 줄 — 상태 배지 + "최근 점수 N점 · 합격선 대비". */
.rl-mock-flow__summary {
    display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--rl-sp-2);
    margin:0 0 var(--rl-sp-3);
}
.rl-mock-flow__summary-text {
    font-size:var(--rl-fs-caption); color:var(--rl-text-3);
    line-height:var(--rl-lh-snug);
}
.rl-mock-flow__summary-text strong { color:var(--rl-text); font-weight:700; }
/* 차트 — 미니 차트. 막대 bottom 정렬, 합격선은 absolute. 막대 높이%·합격선 위치% 모두
   차트 height(64) 동일 기준 → score=qualify 막대 top이 합격선과 정확히 일치.
   하단 1px baseline = 막대 접지선(축). 그래프 위 큰 점수 숫자는 미노출(상단 요약 줄에 이미 있음).
   좌측 64px gutter = 합격선 라벨 자리(막대 content box 침범 불가, 점수 무관 겹침 0). */
.rl-mock-flow__chart {
    position:relative;
    display:flex; align-items:flex-end; gap:var(--rl-sp-2);
    height:64px; margin-top:var(--rl-sp-3);
    padding-left:64px;
    border-bottom:1px solid var(--rl-line-2);
}
.rl-mock-flow__col {
    position:relative;
    flex:1; min-width:0;
    display:flex; align-items:flex-end; justify-content:center;
    height:100%;
}
/* 이전(보조) 막대 — 회색이 아닌 브랜드 계열 저명도(primary-light @ 0.55)로 "최근 5회 흐름"이 시계열로
   읽히게(배경 장식 회피). 0점대도 회차 존재가 보이도록 최소 높이(sp-1) 보장(자동 스케일 아님). */
.rl-mock-flow__bar {
    width:100%; max-width:34px;
    height:max(var(--rl-bar-h, 50%), var(--rl-sp-1));
    background:var(--rl-primary-light);
    opacity:0.55;
    border-radius:var(--rl-r-xs) var(--rl-r-xs) 0 0;
    transform-origin:bottom;
}
/* 강조 막대(최신) — 풀 톤(opacity 1) primary 세로 그라데이션 + 은은한 lift. 이전 막대와 차이는
   색 점프가 아닌 톤/그라데이션/그림자(과한 대비 회피, §3.5.6 Progress Bar 그라데이션 문법 정합). */
.rl-mock-flow__col.is-current .rl-mock-flow__bar {
    background:linear-gradient(180deg, var(--rl-primary-light), var(--rl-primary));
    opacity:1;
    box-shadow:var(--rl-shadow-md);
}
/* 합격선 — 과목별 qualify% 위치 가로 점선. 라인은 막대 뒤(DOM상 cols보다 먼저 + z-index 없음)로
   은은한 참조선(1px + text-4 저강도). 라벨은 좌측 거터(막대 영역 밖)라 막대에 가리지 않고 읽힌다. */
.rl-mock-flow__passline {
    position:absolute; left:0; right:0;
    bottom:var(--rl-passline, 60%);
    border-top:1px dashed var(--rl-text-4);
    opacity:0.6; /* 라인만 저강도(양쪽 모드 안전) — 라벨은 형제라 영향 없음 */
    pointer-events:none;
}
.rl-mock-flow__passline-label {
    position:absolute; left:var(--rl-sp-1); bottom:var(--rl-passline, 60%);
    transform:translateY(50%); /* 텍스트 수직 중앙을 점선에 일치 */
    padding:0 var(--rl-sp-1);
    background:var(--rl-surface-elev); /* 점선이 글자 가로질러도 읽히도록 마스킹 */
    font-size:var(--rl-fs-caption-sm); color:var(--rl-text-4);
    white-space:nowrap;
}
/* 해석 1줄 — 직전 대비. */
.rl-mock-flow__note {
    margin:var(--rl-sp-3) 0 0;
    font-size:var(--rl-fs-caption); color:var(--rl-text-3);
    line-height:var(--rl-lh-snug);
}

/* ── 진입 애니메이션 — 스크롤 진입 시 1회(인라인 JS가 is-arming→is-revealed 토글) ──
   막대: scaleY 0→1 좌→우 stagger / 합격선: 막대 안착 후 fade-in.
   JS 미발화(no-JS·에러)는 arming 미부여라 기본 최종 상태 노출(안전). reduced-motion 즉시. */
.rl-mock-flow__chart.is-arming .rl-mock-flow__bar { transform:scaleY(0); }
.rl-mock-flow__chart.is-arming .rl-mock-flow__passline { opacity:0; }
.rl-mock-flow__chart.is-revealed .rl-mock-flow__bar {
    transform:scaleY(1);
    /* 은은한 back-out 스프링 — 막대가 살짝 솟았다 안착(진입 생기). 과하지 않게 overshoot 작게. */
    transition:transform var(--rl-dur-emph) cubic-bezier(0.34, 1.32, 0.64, 1);
    transition-delay:calc(var(--rl-bar-i, 0) * 80ms);
}
.rl-mock-flow__chart.is-revealed .rl-mock-flow__passline {
    opacity:0.6; /* 안착 강도(저강도) */
    transition:opacity var(--rl-dur-base) var(--rl-ease-out);
    transition-delay:var(--rl-passline-delay, 480ms);
}
@media (prefers-reduced-motion: reduce) {
    .rl-mock-flow__chart.is-arming .rl-mock-flow__bar { transform:none; }
    .rl-mock-flow__chart.is-arming .rl-mock-flow__passline { opacity:0.6; }
    .rl-mock-flow__chart.is-revealed .rl-mock-flow__bar,
    .rl-mock-flow__chart.is-revealed .rl-mock-flow__passline { transition:none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 인기 도전 시험지 (.rl-mock-popular)
 *   rl_mock_result.php의 HoF 리더보드(.rl-mock-stats)와 동일 시각 언어 — rank pill +
 *   행 구조 + token. 사용자가 "도전 통계 카드"에서 본 rank pill을 본 페이지 인기 리스트에서도
 *   같은 의미로 인지하도록 정합. 메트릭은 형제 페이지(.rl-mock-stats__rank/__row) 1:1.
 *
 *   viewer 분기: 없음. chip URL param(?pop_band=)이 유일 분기, 마크업 통일.
 * ────────────────────────────────────────────────────────────────────── */

/* 헤더 row — 제목 단독(우측 트리거/링크 없음). min-height 미부여 → 제목 캡 높이로 수축,
   부제(__sort)가 설계값 sp-1로 밀착(트리거 있는 .rl-mock-recent__head는 정렬 위해 min-height 유지). */
.rl-mock-popular__head {
    display:flex; align-items:center;
    gap:var(--rl-sp-2);
    margin:var(--rl-sp-6) 0 var(--rl-sp-1);
    padding-inline:var(--rl-sp-1);
    min-width:0; /* 자식 title이 컨테이너 폭 초과 시 shrink 허용(말줄임 전제) */
}
/* 과목명 주입으로 길어질 수 있어 한 줄 고정 + 말줄임(2줄 래핑 방지). */
.rl-mock-popular__title {
    margin:0;
    min-width:0;
    font-size:var(--rl-fs-h4); font-weight:700;
    color:var(--rl-text-2); letter-spacing:var(--rl-ls-tight);
    line-height:var(--rl-lh-snug);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 부제 정렬 카피 — 한 줄 짧은 안내, 리스트 위 호흡 sp-2. */
.rl-mock-popular__sort {
    margin:0 0 var(--rl-sp-2);
    padding-inline:var(--rl-sp-1);
    font-size:var(--rl-fs-caption);
    color:var(--rl-text-3);
    line-height:var(--rl-lh-snug);
    letter-spacing:var(--rl-ls-body);
}

/* 랭크 리스트 — ol, 행 간 sp-2(같은 그룹 연속 카드, .rl-mock-recent와 동일). */
.rl-mock-popular__list {
    list-style:none;
    padding:0;
    margin:var(--rl-sp-2) 0 var(--rl-sp-6);
    display:flex; flex-direction:column;
    gap:var(--rl-sp-2);
}
.rl-mock-popular__item { margin:0; }

/* 행 카드 — surface-elev + line-2 + r-md, hover/active는 형제 .rl-mock-recent__link와 동일 톤.
   button reset(appearance/border/text-align)로 <a>에서 <button>으로 전환된 후에도 시각 metric 보존. */
.rl-mock-popular__link {
    appearance:none; -webkit-appearance:none;
    width:100%; cursor:pointer; font:inherit;
    display:flex; align-items:center;
    gap:var(--rl-sp-3);
    padding:var(--rl-sp-3) var(--rl-sp-4);
    background:var(--rl-surface-elev);
    border:1px solid var(--rl-line-2);
    border-radius:var(--rl-r-md);
    color:var(--rl-text);
    text-align:left;
    text-decoration:none;
    transition:border-color var(--rl-dur-micro) var(--rl-ease), background var(--rl-dur-micro) var(--rl-ease);
}
.rl-mock-popular__link:disabled { opacity:.6; cursor:wait; }
@media (hover: hover) {
    .rl-mock-popular__link:hover {
        border-color:var(--rl-primary-edge);
        background:var(--rl-primary-soft);
        text-decoration:none;
    }
}
.rl-mock-popular__link:active {
    border-color:var(--rl-primary-edge);
    background:var(--rl-primary-soft);
    text-decoration:none;
}
.rl-mock-popular__link:focus-visible {
    outline:2px solid var(--rl-primary); outline-offset:2px;
}

/* 텍스트 stack — 과목 / 시험지명 / 메타 3단. */
.rl-mock-popular__text {
    flex:1 1 auto; min-width:0;
    display:flex; flex-direction:column;
    gap:var(--rl-sp-1);
}
.rl-mock-popular__subject {
    font-size:var(--rl-fs-body); font-weight:600;
    color:var(--rl-text); line-height:1.4;
    letter-spacing:var(--rl-ls-body);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rl-mock-popular__sheet {
    font-size:var(--rl-fs-body-sm); color:var(--rl-text-2);
    line-height:var(--rl-lh-snug);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rl-mock-popular__meta {
    font-size:var(--rl-fs-caption); color:var(--rl-text-3);
    line-height:var(--rl-lh-snug); letter-spacing:var(--rl-ls-body);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rl-mock-popular__meta strong {
    color:var(--rl-text-2); font-weight:700;
    font-variant-numeric:tabular-nums;
}
/* "지금까지" soft prefix — 좁은 화면에서 먼저 숨김. meta가 "최고·평균·N회 도전"으로 길어 좁은 폭에선
   끝(N회 도전, 핵심)이 ellipsis로 잘리므로 가운데 필러를 먼저 양보. 480px = 프로젝트 단일 모바일
   브레이크포인트(타 css 정합). 태블릿+(>480)에선 노출. */
@media (max-width: 480px) {
    .rl-mock-popular__meta-soft { display:none; }
}

/* trailing CTA label — "같은 시험지로 도전" 명시 라벨. chevron 좌측에 inline, 카드 hover 시 primary 톤 강조. */
.rl-mock-popular__cta-label {
    flex:0 0 auto;
    display:inline-flex; align-items:center;
    font-size:var(--rl-fs-caption); font-weight:600;
    color:var(--rl-primary);
    letter-spacing:var(--rl-ls-tight);
    line-height:1;
    white-space:nowrap;
    transition:color var(--rl-dur-micro) var(--rl-ease);
}

/* trailing chevron — 형제 .rl-mock-recent__cta와 동일 패턴. */
.rl-mock-popular__cta {
    flex:0 0 auto;
    display:inline-flex; align-items:center;
    color:var(--rl-primary);
    transition:color var(--rl-dur-micro) var(--rl-ease);
}
@media (hover: hover) {
    .rl-mock-popular__link:hover .rl-mock-popular__cta,
    .rl-mock-popular__link:hover .rl-mock-popular__cta-label {
        color:var(--rl-primary);
    }
}
.rl-mock-popular__link:active .rl-mock-popular__cta,
.rl-mock-popular__link:focus-visible .rl-mock-popular__cta,
.rl-mock-popular__link:active .rl-mock-popular__cta-label,
.rl-mock-popular__link:focus-visible .rl-mock-popular__cta-label {
    color:var(--rl-primary);
}