@charset "utf-8";

/* 오답노트 홈 — surface=note_home. */

/* 다음단계 아래 가로 배너(note_next_step_below) 하단 간격 — note-home은 카드가 margin-bottom으로 다음과 간격을
   소유(보관함 카드는 margin-top 0)하는데 광고 슬롯은 rl-ad.css가 margin-top만 줘서, D-day 넛지가 [hidden]일 때
   배너↔보관함 간격이 0이 된다. note-home 리듬에 맞춰 하단 sp-6 부여 — D-day 보일 땐 그 margin-top과 block
   collapse로 24 유지(중복 없음), 광고 off/collapse 시 슬롯 미렌더/0높이라 고아 간격 없음. */
.rl-note-home > .rl-ad-slot--display {
  margin-bottom: var(--rl-sp-6);
}

/* 페이지 셸 — font-family는 base-interaction.css의 글로벌 body 단일 출처. 패딩은 0(.at-container 단일 출처 + 페이지 말미 .h40 spacer). */
.rl-note-home-title {
  font-size: var(--rl-fs-h2);
  letter-spacing: var(--rl-ls-h2);
  font-weight: 700;
  color: var(--rl-ink);
  margin: 0 0 16px;
  line-height: 1.3;
}

/* rest 리스트 카드 head row — 과목명 + 우측 스테이지 pill. ellipsis는 .card-name이 이미 보유.
   gap sp-3(12px) — 과목명 ellipsis 끝과 배지가 시각적으로 경쟁하지 않도록 호흡 확보. */
.rl-note-home-list-card-head {
  display: flex;
  align-items: center;
  gap: var(--rl-sp-3);
  min-width: 0;
}
.rl-note-home-list-card-head .rl-note-home-list-card-name {
  flex: 1 1 auto;
  min-width: 0;
}

/* 스테이지 상태 pill — 시작 전 / 진행 중 / 거의 완료 / 마스터 완료 / 재점검.
   토큰 기반 옅은 배경 + 톤 텍스트. 재점검만 살짝 강조(bad-soft + bad-text). */
.rl-note-home-list-card-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-note-home-list-card-state[data-state-kind="progress"] {
  background: var(--rl-surface-2);
  color: var(--rl-text-2);
}
.rl-note-home-list-card-state[data-state-kind="near"] {
  background: var(--rl-accent-soft);
  color: var(--rl-accent-deep);
}
.rl-note-home-list-card-state[data-state-kind="mastered"],
.rl-note-home-list-card-state[data-state-kind="mastered_zero_wrong"] {
  background: var(--rl-good-soft);
  color: var(--rl-good-text);
}
.rl-note-home-list-card-state[data-state-kind="recheck"] {
  background: var(--rl-bad-soft);
  color: var(--rl-bad-text);
}
/* 미응답 — 답안지에서 "답을 안 함" 상태를 진행(progress·중성)과 구분하는 kind. 토큰은 warn
   (주의 시그널) — 정답·오답 양 톤과 충돌 X. "응답 없음"/"건너뜀" 의미 신규 surface에서 재사용. */
.rl-note-home-list-card-state[data-state-kind="unanswered"] {
  background: var(--rl-warn-soft);
  color: var(--rl-warn-text);
}

/* 과목 전환 알림은 글로벌 `.rl-snackbar`(§3.5.2 Snackbar) 단일 출처로 통합 (v1.53).
   `.rl-note-home-toast*` 룰 폐기 — modal.css의 rlShowSnackbar 컴포넌트 호출. */

/* `.rl-info-round-part` separator(·) 룰은 banner.css 단일 출처로 이관(v1.55).
   오답노트·빠른학습·모의시험 모두 banner.css를 로드하므로 도메인 공통 룰의 자연스러운 위치. */

/* 메인 카드 정보 클러스터 — howto·round+잔여·날짜를 한 덩어리로 묶고 줄 간격은 line-height 단독.
   "라운드 시작 카드"라는 단일 정보 단위 인지를 만든다.
   - margin-top sp-2 = 진척 바와 호흡 분리 (howto 위 여백).
   - margin-bottom sp-3 = CTA 위 액션 호흡 유지.
   - 내부 p margin 0 = 줄 간격은 line-height만으로(p 간격 축소). */
.rl-banner[data-rl-surface="note_home"] .rl-note-home-info {
  margin: var(--rl-sp-2) auto var(--rl-sp-3);
}
.rl-banner[data-rl-surface="note_home"] .rl-note-home-info p {
  margin: 0;
}

/* 메인 지표 num+% 결합 — note_home 한정. 라벨은 margin-left:auto로 우측 분리(banner.css §3.8.10 슬롯 기본).
   tabular-nums 해제: 26px display 사이즈에서 '1' 같은 좁은 글리프가 등폭 슬롯에 갇혀 '2 1'처럼 떨어져 보이는 회귀 차단.
   --rl-ls-display(-0.025em) 트래킹으로 숫자 블록을 단일 단위로 결합. count-up 애니메이션(.rl-rc-arrive) 폭 jitter는
   2자리 변동 한정·600ms 구간이라 시각 결합 우선. */
.rl-banner[data-rl-surface="note_home"] .rl-stat {
  gap: 0;
}
.rl-banner[data-rl-surface="note_home"] .rl-stat-num {
  font-variant-numeric: normal;
  letter-spacing: var(--rl-ls-display);
}
.rl-banner[data-rl-surface="note_home"] .rl-stat-unit {
  letter-spacing: var(--rl-ls-display);
}
/* 라벨 근접 — banner.css 슬롯 기본 margin-left:auto(우측 끝 push) 해제.
   sp-4(14px) 고정 거리로 '21%'와 '오답 마스터율'을 한 그룹으로 읽히게 + 한 호흡 분리.
   align-self:baseline — 슬롯 기본 align-self:center가 부모 align-items:baseline을 덮어쓰던 회귀 차단.
   라벨이 숫자 중앙이 아니라 baseline에 정렬되어 '큰 숫자 + 작은 라벨' 위계가 시각적으로 한 그룹.
   color: text-5 — §1.14 (d) ladder 최하단(§2.1.3 v1.51 신설). 메인 지표 옆 caption은 가장 약하게 후퇴해 큰 숫자에 시선 양보. */
.rl-banner[data-rl-surface="note_home"] .rl-stat-label {
  margin-left: var(--rl-sp-4);
  align-self: baseline;
  color: var(--rl-text-5);
}

/* 빠른학습 진입 카드(host=home_quick) — note_home surface 차용하지만 빠른학습 도메인 슬롯.
   .rl-stat/.rl-progress/.rl-note-home-info 마크업은 출력 안 함(룰 매칭 자연 해소).
   "오답 마스터율 / 진행바 / 남은 문제" 1회독 압박 제거 → ready-line + help + 단일 CTA.
   feedback_quick_learning_metric_policy — "마스터율/점수/합격" 표현 X, "감각/한 판 더" 톤. */
.rl-banner[data-rl-host="home_quick"] .rl-quick-ready-line {
  margin: var(--rl-sp-1) auto var(--rl-sp-2);
  font-size: var(--rl-fs-bodylg);
  font-weight: 600;
  line-height: var(--rl-lh-snug);
  color: var(--rl-text);
}
.rl-banner[data-rl-host="home_quick"] .rl-quick-ready-line strong {
  color: var(--rl-primary);
  font-weight: 700;
}
.rl-banner[data-rl-host="home_quick"] .rl-quick-ready-help {
  margin: 0 auto;
}
/* 과목명(h3) 라인 + 시험일(D-day) 칩(.rl-quick-subject-row / .rl-dday-chip-btn)은 banner.css 단일 출처로 이관.
   오답노트 홈·빠른학습 홈·모의시험 카드 공용 — 같은 역할 = 같은 토큰. (banner.css는 rl_enqueue_banner_css로 본 페이지도 로드) */
/* 회원 한정 메타 정보줄 — "이번 라운드 N문제 · {보기방식}".
   오답노트 .rl-note-home-info-round 패턴 정합 — 폰트/색 명시 X로 ready-help와 동일 cascade.
   <strong> 토큰만 숫자 강조 (오답노트 동일). margin만 카드 호흡 유지. */
.rl-banner[data-rl-host="home_quick"] .rl-quick-ready-meta {
  margin: 0 auto var(--rl-sp-3);
}

/* 빠른학습 "최근 흐름" — 1(primary) + 2(secondary row) 세로 스택.
   §3.4.1 Card + §3.8.10 L2 Auxiliary 톤 (line-2 1px + shadow-sm), 메인 진입 카드(shadow-md) 한 단계 아래.
   가로 3-column 폐기 — 모바일 좁은 폭에서 숫자+상태가 한 칸에 어색 + 3지표 위계 동등화 회귀.
   3지표 중요도 동등 X — 최근 정답률이 주(primary, fs-num-display), 7일/누적은 보조(row, fs-bodylg).
   section head + title은 모의시험 .rl-mock-recent__head / 오답노트 .rl-note-home-section-head와
   1:1 메트릭 (h2 / fs-h4 / 700 / text-2 / ls-tight). 모의시험·오답노트 운영 코드 raw 24/4px는
   §8.4 후속에서 토큰 회수, 본 사용처는 토큰화 — G2 통과. */
/* 제목 단독(우측 트리거/링크 없음) → min-height 미부여로 제목 캡 높이 수축, 하위 보조 라인 밀착.
   트리거 동반 형제(.rl-mock-recent__head 등)는 정렬 위해 min-height 유지. */
.rl-quick-recent-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-sp-3);
  margin: var(--rl-sp-6) 0 var(--rl-sp-1);
  padding-inline: var(--rl-sp-1);
}
.rl-quick-recent-section-title {
  margin: 0;
  font-size: var(--rl-fs-h4);
  font-weight: 700;
  letter-spacing: var(--rl-ls-tight);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-2);
}
.rl-quick-recent-tile {
  margin: 0 0 var(--rl-sp-2);
  padding: 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-sm);
  box-sizing: border-box;
  min-width: 0;
}
.rl-quick-recent-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rl-sp-2);
  margin: 0 0 var(--rl-sp-2);
}
.rl-quick-recent-row .rl-quick-recent-tile {
  margin: 0;
}
.rl-quick-recent-tile-label {
  margin: 0 0 var(--rl-sp-1);
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-3);
}
.rl-quick-recent-tile-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--rl-sp-2);
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-3);
}
.rl-quick-recent-tile-value strong {
  font-size: var(--rl-fs-bodylg);
  font-weight: 700;
  color: var(--rl-text);
}
/* row 2-column(오늘/누적 활동량) — 메인 강조. 큰 숫자 fs-num-display + ls-display 결합.
   사용자 정의 — 정답률보다 "오늘 한 판 했는가 / 얼마나 많이 풀었는가" 활동량을 위계 정점에 둔다.
   메인 진입 카드는 풀폭 CTA + shadow-md로 위계 정점 — 본 row 숫자 크기로 위계 역전 없음. */
.rl-quick-recent-row .rl-quick-recent-tile-value strong {
  font-size: var(--rl-fs-num-display);
  font-weight: 800;
  letter-spacing: var(--rl-ls-display);
}
/* accuracy tile(최근 정답률) — 보조. 활동량 row 아래에 한 단계 작은 위계로 배치.
   숫자는 기본 tile-value strong(fs-bodylg/700) 그대로, 라벨만 한 단계 작게(caption-sm) 시각 분리.
   margin-bottom sp-6 = "최근 흐름" 그룹 마지막 요소 → 다음 그룹과 그룹 간격(§group-spacing).

   .is-empty modifier — accuracy null(응답 < 20) 케이스. "--%" 빈 점수판 회피 (사용자 본문
   "빈 점수판이 강조됨"). label "최근 흐름 집계 중" + 안내 한 줄 (early note와 카피 정합).

   값 아래 .rl-quick-recent-tile-help — 흐름 코멘트 자연어 라인 (up/flat/down/early). 숫자
   바로 아래라 답답하지 않도록 margin-top sp-1 (.rl-quick-recent-tile-help 단일 정의). */
.rl-quick-recent-tile.is-accuracy {
  margin-bottom: var(--rl-sp-6);
}
.rl-quick-recent-tile.is-accuracy .rl-quick-recent-tile-label {
  font-size: var(--rl-fs-caption-sm);
}
/* row tile은 "{N}문제"가 한 덩어리로 읽혀야 함. 부모 .rl-quick-recent-tile-value의 gap이 sp-2면
   "7 문제"처럼 너무 떨어져 보여 한 덩어리 인식이 깨짐. row에서는 sp-1로 한 단계 줄여 숫자와
   단위 텍스트("문제") 사이 숨통만 살짝 둔다. anonymous 텍스트 노드가 flex item으로 처리되어
   부모 gap이 적용되는 회귀 차단. */
.rl-quick-recent-row .rl-quick-recent-tile-value {
  gap: var(--rl-sp-1);
}
/* accuracy tile empty 상태 — 타이틀 숨기고 안내 한 줄만 노출. 단독 라인이라 상단 마진 제거. */
.rl-quick-recent-tile.is-accuracy.is-empty .rl-quick-recent-tile-help {
  margin-top: 0;
}
/* accuracy tile 보조 라인 — 두 컨텍스트 공통:
   1) is-accuracy(데이터 있음): 정답률 값 아래 흐름 코멘트 ("이전 흐름보다 N%포인트 높아요" 등)
   2) is-accuracy.is-empty(응답 < 20): 라벨 "최근 흐름 집계 중" 아래 안내 한 줄
   trend 배지(상승세/하락세/유지 중) UI는 폐기 — 자연어 한 줄로 통일 (사용자 정의 "분석보다
   행동 유도", 빠른학습 홈 톤 정합). */
.rl-quick-recent-tile-help {
  margin: var(--rl-sp-1) 0 0;
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-relaxed);
  color: var(--rl-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-quick-recent-tile-help strong {
  color: var(--rl-text);
  font-weight: 700;
}
/* 상승 배지 — 최근 정답률 trend 'up'일 때만 노출(회원 카드 한정, 비회원은 trend 없음).
   §3.4.3 Badge 문법을 mock.css .rl-mock-recent__state와 공유(height 20 / padding 0 sp-2 / r-full /
   caption-sm / weight 700 / ls-body). good variant = good-soft bg + 짝 good-text — static이라
   라이트·다크 동일 고대비. 정답률은 보조 위계라 포화 good 대신 soft로 가산 톤만(§1637 "색은 한 단계 가산만"). */
.rl-quick-recent-trend-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--rl-sp-1);
  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-good-soft);
  color: var(--rl-good-text);
  white-space: nowrap;
}
/* 상승 아이콘 — 인라인 SVG trending-up(Lucide). currentColor 상속(good-text)이라 배지 텍스트와 동색.
   크기는 1em으로 배지 글자(caption-sm)에 연동 — raw px 없이 텍스트와 함께 스케일. */
.rl-quick-recent-trend-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
/* 실전 준비도 섹션 — 최근 흐름과 분리된 독립 진단 섹션(종합: 빠른학습·모의시험·오답노트).
   제목/보조설명은 .rl-quick-other-section-* / .rl-note-home-section-* 와 1:1 토큰 정합(도메인 분리 prefix).
   섹션 제목으로 종합 지표임을 노출 → 카드 안 라벨 제거(단계명이 시선 1순위). */
/* 빠른학습 홈 마지막 섹션 하단 마진 0 — 컨테이너 gap 없이 각 섹션 margin으로 간격을 주므로
   마지막 섹션(다음 단계·최근 학습한 과목·숨김 등 무엇이든)의 하단 마진만 회수해 페이지 끝 여백 제거.
   nth-last-child(of :not(script)) — 파셜 끝 <script>를 건너뛰고 시각적 마지막 섹션을 잡는다(page-shell 선례). */
.rl-quick-home > *:nth-last-child(1 of :not(script):not([hidden])) {
  margin-bottom: 0;
}
.rl-quick-readiness-section-head {
  margin: var(--rl-sp-6) 0 var(--rl-sp-1);
  padding-inline: var(--rl-sp-1);
}
.rl-quick-readiness-section-title {
  margin: 0;
  font-size: var(--rl-fs-h4);
  font-weight: 700;
  letter-spacing: var(--rl-ls-tight);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-2);
}
.rl-quick-readiness-section-desc {
  margin: 0 0 var(--rl-sp-3);
  padding-inline: var(--rl-sp-1);
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-3);
}
/* 실전 준비도 카드(readiness flag ON, 회원) — 독립 카드(형제 오늘/누적 타일과 동일 결: surface-elev + line-2 + r-md + shadow-sm).
   위계: 단계명(시선 1순위, 라벨은 섹션 제목으로 이관) → 안내 → 진행 막대 3개(풀어본 문제/익힌 문제/실전 확인). 액션은 상단 row 우측.
   숫자/점수/분모 미표시(feedback_quick_learning_metric_policy) — 과목 전체 진행도의 위치·진행감만.
   폐기된 안정도 5칸 게이지(라운드 단위·첫 정답 B38 결함) 대체. 막대는 전부 과목 전체 문제 수 대비라
   풀어본 문제 ≥ 익힌 문제 ≥ 실전 확인 길이가 자연 중첩. 풀블루 CTA 금지(상단 진입 CTA가 primary). */
.rl-quick-readiness-card {
  margin: 0;
  padding: 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-sm);
  box-sizing: border-box;
}
/* 상단 row — 단계명(좌, 시선 1순위) + 보조 액션 링크(우). 액션 없으면 단계명만 좌측 정렬.
   하단 풀폭 액션 row·divider 폐기로 카드 높이 압축(요약 진단 카드). */
.rl-quick-readiness-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rl-sp-2);
}
.rl-quick-readiness-stage {
  font-size: var(--rl-fs-bodylg);
  font-weight: 700;
  line-height: var(--rl-lh-normal);
  letter-spacing: var(--rl-ls-tight);
  color: var(--rl-text);
}
.rl-quick-readiness-body {
  margin: var(--rl-sp-1) 0 0;
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-normal);
  color: var(--rl-text-3);
}
/* 문장 단위 줄바꿈 — 각 문장 block(좁은 화면서 문장 중간 끊김 방지), 문장 내부는 한글 어절 단위(keep-all). */
.rl-quick-readiness-body-line {
  display: block;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rl-quick-readiness-bars {
  display: flex;
  flex-direction: column;
  gap: var(--rl-sp-2);
  margin-top: var(--rl-sp-2);
}
/* 막대 모드(단계명·보조문구 미노출, flag OFF) — 막대가 카드 첫 요소면 위 표현과의 간격이 없으므로 상단 마진 0 */
.rl-quick-readiness-bars:first-child {
  margin-top: 0;
}
.rl-quick-readiness-bar-row {
  display: flex;
  align-items: center;
  gap: var(--rl-sp-3);
}
.rl-quick-readiness-bar-label {
  flex: 0 0 5em; /* 라벨 폭 고정 — 막대 좌측 정렬(한글 최장 "풀어본 문제" 텍스트폭 + 소폭 여유) */
  white-space: nowrap; /* 라벨 한 줄 유지 */
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-3);
}
.rl-quick-readiness-bar-track {
  flex: 1 1 0;
  height: var(--rl-sp-1); /* 4px — 얇고 단정한 진행 막대(요약 진단 카드). 채움 fill 대비로 진행도 인지 */
  border-radius: var(--rl-r-full);
  background: var(--rl-line-2); /* 미달 구간 — 연한 rail */
  overflow: hidden;
}
.rl-quick-readiness-bar-fill {
  display: block;
  height: 100%;
  width: var(--rl-rd-fill, 0%); /* PHP 동적값 — inline --rl-rd-fill 소비 */
  border-radius: var(--rl-r-full);
  background: var(--rl-primary);
  transition: width var(--rl-dur-emph, 320ms) cubic-bezier(0.22, 1, 0.36, 1);
}
.rl-quick-readiness-bar-fill.is-on {
  min-width: var(--rl-sp-1); /* 1%라도 채워진 상태가 보이도록 최소 길이 보장(트랙 높이와 동일 = 둥근 nub) */
}
/* 보조 액션 — 카드 상단 우측 텍스트 링크(풀폭 row·divider 폐기, 카드 높이 압축). 텍스트+chevron 약한 affordance(§1.14 a). 풀블루 금지(상단 진입 CTA가 primary). */
.rl-quick-readiness-action {
  display: inline-flex;
  align-items: center;
  gap: var(--rl-sp-1);
  flex-shrink: 0;
  font-size: var(--rl-fs-caption);
  font-weight: 600;
  color: var(--rl-primary);
  text-decoration: none;
}
.rl-quick-readiness-action-chev {
  width: var(--rl-sp-3);
  height: var(--rl-sp-3);
  flex-shrink: 0;
  transition: transform var(--rl-dur-micro) var(--rl-ease-out);
}
@media (hover: hover) {
  .rl-quick-readiness-action:hover { color: var(--rl-primary-hover); }
  .rl-quick-readiness-action:hover .rl-quick-readiness-action-chev { transform: translateX(var(--rl-sp-1)); }
}

/* ── 등장/진행 애니메이션 ── 단계명→안내→막대 staggered fade-up + 막대 채움 grow("게이지 상승" 진행감).
   **발화는 JS가 `.is-revealing` 추가 시에만**(IntersectionObserver 45~50% 노출, 세션·과목·단계당 1회).
   기본(클래스 없음) = 정적 최종 상태(매 로드 재생 안 함). 토큰 모션만, fill-mode both로 깜빡임 없음.
   reduced-motion = 무애니(JS도 발화 안 하지만 CSS로 이중 보장). 상세 게이트는 rl_home_quick_recent_card.php IIFE. */
@keyframes rl-rd-rise {
  from { opacity: 0; transform: translateY(var(--rl-sp-1)); }
  to   { opacity: 1; transform: none; }
}
@keyframes rl-rd-grow {
  from { width: 0; }
  to   { width: var(--rl-rd-fill, 0%); }
}
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-stage,
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-body,
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-row {
  animation: rl-rd-rise var(--rl-dur-base) var(--rl-ease-out) both;
}
/* stagger offset(ms) — 모션 choreography. 단계명→안내→막대1·2·3 순차 등장. */
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-stage { animation-delay: 40ms; }
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-body  { animation-delay: 90ms; }
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-row:nth-child(1) { animation-delay: 140ms; }
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-row:nth-child(2) { animation-delay: 190ms; }
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-row:nth-child(3) { animation-delay: 240ms; }
/* 막대 채움 — 각 행 등장 직후 0→목표폭 grow(진행감 핵심). transition보다 우선. */
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-fill.is-on {
  animation: rl-rd-grow var(--rl-dur-sheet) var(--rl-ease-sheet) both;
}
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-row:nth-child(1) .rl-quick-readiness-bar-fill.is-on { animation-delay: 200ms; }
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-row:nth-child(2) .rl-quick-readiness-bar-fill.is-on { animation-delay: 250ms; }
.rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-row:nth-child(3) .rl-quick-readiness-bar-fill.is-on { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .rl-quick-readiness-card.is-revealing .rl-quick-readiness-stage,
  .rl-quick-readiness-card.is-revealing .rl-quick-readiness-body,
  .rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-row,
  .rl-quick-readiness-card.is-revealing .rl-quick-readiness-bar-fill.is-on {
    animation: none;
  }
}

/* "마지막 학습 X" / "첫 기록을 쌓는 중" 보조 라인 — 회원 has-data 카드 한정.
   section-head 아래 더 약한 보조 톤 (caption-sm / text-4). 사용자 피드백 "지금보다 조금 더
   보조 톤이면 좋아" 정합 — text-3 → text-4 한 단계 약화 (§1.14 affordance ladder 최하단).
   "마지막 학습은 성과 지표가 아니라 맥락 정보 — 메인 stat과 동등 강조 시 출석 기록 카드처럼
   흐려짐". 비회원·empty 분기에는 미노출.
   복귀 안내(3일+/7일+) 동반 시 한 단계 진하게(text-3)로 메시지 변별. */
.rl-quick-recent-lastplay {
  margin: 0 0 var(--rl-sp-2);
  padding-inline: var(--rl-sp-1);
  font-size: var(--rl-fs-caption-sm);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-4);
}
.rl-quick-recent-lastplay-comeback {
  margin-left: var(--rl-sp-1);
  color: var(--rl-text-3);
}

/* "첫 기록 준비 중" empty body — 회원 + 기록 0 분기. 0 stat 직접 표시 회피
   (사용자 본문 "0이 강조돼서 빈 계정처럼 느껴짐") + 단일 안내 한 줄. */
.rl-quick-recent-empty-body {
  margin: 0;
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-relaxed);
  color: var(--rl-text-3);
}

/* 비회원 "최근 흐름" 인트로 라인 — 빈 상태/응답 1+ 상태 공통 사용.
   제목 단독 섹션 부제와 동일 역할 → 모의시험 "최근 인기 도전 시험지" 부제(.rl-mock-popular__sort)와
   시각 메트릭 1:1 정합 (caption / lh-snug / text-3 / ls-body, 리스트 위 호흡 sp-3). */
.rl-quick-guest-recent-intro {
  margin: 0 0 var(--rl-sp-3);
  padding-inline: var(--rl-sp-1);
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-snug);
  letter-spacing: var(--rl-ls-body);
  color: var(--rl-text-3);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 빠른학습 "숨김 문제 관리" 보조 카드 — 오답노트 .rl-note-home-secondary 패턴 정합.
   같은 역할(메인 카드 + KPI 카드 아래 secondary 진입 row)이라 시각 메트릭 동일 — desc 좌측 +
   cta 우측 chevron, surface-2 + line + radius-sm. 도메인 분리 위해 .rl-quick-home-secondary
   클래스 신설 (§8.4 향후 .rl-home-secondary 통합 검토). */
.rl-quick-home-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rl-sp-3);
  padding: var(--rl-sp-3) var(--rl-sp-5);
  margin: 0 0 var(--rl-sp-2);
  background: var(--rl-surface-2);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-sm);
  color: var(--rl-text-3);
  text-decoration: none;
  transition: color 0.15s ease;
}
@media (hover: hover) {
  .rl-quick-home-secondary:hover {
    color: var(--rl-text-2);
    text-decoration: none;
  }
  .rl-quick-home-secondary:hover .rl-quick-home-secondary-cta {
    color: var(--rl-primary-hover);
  }
}
.rl-quick-home-secondary:active {
  color: var(--rl-text-2);
  text-decoration: none;
}
.rl-quick-home-secondary:active .rl-quick-home-secondary-cta {
  color: var(--rl-primary-hover);
}
.rl-quick-home-secondary:focus-visible {
  outline: 2px solid var(--rl-primary);
  outline-offset: 2px;
}
.rl-quick-home-secondary-desc {
  font-size: var(--rl-fs-body-sm);
  line-height: var(--rl-lh-snug);
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.rl-quick-home-secondary-desc strong {
  color: var(--rl-text);
  font-weight: 700;
}
.rl-quick-home-secondary-cta {
  display: inline-flex;
  align-items: center;
  font-size: var(--rl-fs-body-sm);
  color: var(--rl-primary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
/* archive 진입 variant — title(진한 기본색) + meta(회색·카운트) 두 줄 위계.
   오답노트 .rl-note-home-secondary--archive와 1:1 토큰·메트릭 정합. chevron만 primary 유지. */
.rl-quick-home-secondary--archive .rl-quick-home-secondary-desc {
  display: flex;
  flex-direction: column;
  gap: var(--rl-sp-1);
}
.rl-quick-home-secondary--archive .rl-quick-home-secondary-title {
  font-size: var(--rl-fs-body);
  font-weight: 600;
  color: var(--rl-text);
}
.rl-quick-home-secondary--archive .rl-quick-home-secondary-meta {
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rl-quick-home-secondary--archive .rl-quick-home-secondary-meta strong {
  font-weight: 600;
  color: var(--rl-text-3);
}

/* 빠른학습 "다른 과목도 이어서 풀기" 섹션 — 오답노트 .rl-note-home-section-head /
   .rl-note-home-list-card / .rl-note-home-list-toggle와 1:1 메트릭 정합. 도메인 분리 위해
   .rl-quick-other-* prefix. 사용자 본문 정합: "각 카드 클릭 시 상단 메인 카드 + 최근 흐름이
   해당 과목으로 바뀜" — href=?target=<bo>로 메인 홈 의도 일시 override (extend 처리).
   ready 라벨 + meta 라벨은 column 적층, 카드 클릭 단위는 풀폭 anchor 단일 hit. */
/* 제목 단독(우측 트리거 없음) → min-height 미부여로 제목 캡 높이 수축, 상단 간격을
   .rl-quick-recent-section-head(24px)와 시각 정합. 하단은 리스트 밀착 방지 위해 sp-2. */
.rl-quick-other-section-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-quick-other-section-title {
  margin: 0;
  font-size: var(--rl-fs-h4);
  font-weight: 700;
  letter-spacing: var(--rl-ls-tight);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-2);
}
/* 섹션 제목 아래 보조 설명 — 오답노트 .rl-note-home-section-desc와 1:1 토큰 정합. */
.rl-quick-other-section-head:has(+ .rl-quick-other-section-desc) {
  margin-bottom: var(--rl-sp-1);
}
.rl-quick-other-section-desc {
  margin: 0 0 var(--rl-sp-3);
  padding-inline: var(--rl-sp-1);
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-3);
}
/* 모의시험 .rl-mock-recent__list / __link / __subject / __meta 와 1:1 메트릭 정합.
   §3.4.7 List Entry Card — text gap 3px(P2), subject fs-body/500/ls-body/lh:1.4,
   meta fs-caption/text-3/lh:1.5, cta chevron-only muted (§1.14 (f) ladder). */
.rl-quick-other-list {
  list-style: none;
  margin: 0 0 var(--rl-sp-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rl-sp-2);
}
/* 토글이 없으면(overflow == 0, 3개 이하) list 자체의 margin-bottom을 24px로 — 토글이 있을 때
   (toggle margin-bottom sp-6)와 동일한 섹션 trailing 간격 유지. :has(+ X)로 토글 인접 여부만
   판정하므로 중간 <script>(과목 전환 마커 트래킹) 같은 비레이아웃 요소 영향 받지 않음. */
.rl-quick-other-list:not(:has(+ .rl-quick-other-list-toggle)) {
  margin-bottom: var(--rl-sp-6);
}
.rl-quick-other-list-item[hidden] {
  display: none;
}
.rl-quick-other-list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-sp-5);
  background: var(--rl-surface-elev);
  border: 1px solid var(--rl-line-2);
  border-radius: var(--rl-r-md);
  padding: var(--rl-sp-3) var(--rl-sp-5);
  color: var(--rl-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
@media (hover: hover) {
  .rl-quick-other-list-card:hover {
    border-color: var(--rl-primary-edge);
    background: var(--rl-primary-soft);
    text-decoration: none;
  }
}
.rl-quick-other-list-card:active,
.rl-quick-other-list-card:focus-visible {
  border-color: var(--rl-primary-edge);
  background: var(--rl-primary-soft);
  text-decoration: none;
  outline: 0;
}
.rl-quick-other-list-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.rl-quick-other-list-card-name {
  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);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-quick-other-list-card-meta {
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-3);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.rl-quick-other-list-card-meta strong {
  color: var(--rl-text-2);
  font-weight: 600;
}
.rl-quick-other-list-card-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--rl-text-3);
  transition: color 0.15s ease;
}
@media (hover: hover) {
  .rl-quick-other-list-card:hover .rl-quick-other-list-card-cta {
    color: var(--rl-primary);
  }
}
.rl-quick-other-list-card:active .rl-quick-other-list-card-cta,
.rl-quick-other-list-card:focus-visible .rl-quick-other-list-card-cta {
  color: var(--rl-primary);
}
/* "N개 더 보기 / 접기" 토글 — 오답노트 .rl-note-home-list-toggle와 1:1. */
.rl-quick-other-list-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rl-sp-1);
  width: 100%;
  margin: 0 0 var(--rl-sp-6);
  padding: var(--rl-sp-2) var(--rl-sp-4);
  background: transparent;
  border: 0;
  border-radius: var(--rl-r-md);
  color: var(--rl-text-3);
  font-family: inherit;
  font-size: var(--rl-fs-label);
  font-weight: 600;
  letter-spacing: var(--rl-ls-body);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .rl-quick-other-list-toggle:hover {
    background: var(--rl-surface-2);
    color: var(--rl-text-2);
  }
}
.rl-quick-other-list-toggle:focus-visible {
  outline: 2px solid var(--rl-primary);
  outline-offset: 2px;
}
.rl-quick-other-list-toggle-icon {
  display: inline-flex;
  align-items: center;
  color: var(--rl-text-3);
  transition: transform 0.18s ease;
}
.rl-quick-other-list-toggle[aria-expanded="true"] .rl-quick-other-list-toggle-icon {
  transform: rotate(180deg);
}

/* chevron-right/left — "다음/이전 화면 이동" 시각 표지. 큰 primary filled 버튼에는 사용하지 않는다.
   color: currentColor 상속 → 호스트 텍스트 색을 따라간다. 후속에 root utility로 분리. */
.rl-chevron-right { display: inline-block; vertical-align: middle; margin-left: 4px; flex-shrink: 0; }
.rl-chevron-left  { display: inline-block; vertical-align: middle; margin-right: 4px; flex-shrink: 0; }

/* 섹션 헤더 — h2 제목 단독. 모의시험 `.rl-mock-recent__head`와 1:1 메트릭. */
/* 제목 단독 → min-height 미부여로 제목 캡 높이 수축, 상단 간격을 메인 카드(24px)와 시각 정합.
   하단은 리스트 밀착 방지 위해 sp-2. */
.rl-note-home-section-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);
}
/* 섹션 타이틀 — 메인 카드와 리스트 사이 맥락 분리. 첫 카드 위계 보호 위해 sub 톤.
   모의시험 `.rl-mock-recent__title` 정합 — line-height snug. */
.rl-note-home-section-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);
}
/* 섹션 제목 아래 보조 설명 한 줄 — 제목과 한 그룹(밀착 sp-1), 리스트와는 sp-3.
   caption/text-3 약한 보조 톤(§1.14 affordance ladder 하단). 회원 주 분기(데이터 有)
   한정, empty/비회원 분기 미노출(과목 선택 불가 → 안내 모순). */
.rl-note-home-section-head:has(+ .rl-note-home-section-desc) {
  margin-bottom: var(--rl-sp-1);
}
.rl-note-home-section-desc {
  margin: 0 0 var(--rl-sp-3);
  padding-inline: var(--rl-sp-1);
  font-size: var(--rl-fs-caption);
  line-height: var(--rl-lh-snug);
  color: var(--rl-text-3);
}
/* ───────── 과목별 리스트 ───────── */
.rl-note-home-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 8px;
}
/* 토글이 없으면(rest_overflow == 0, 5개 이하) list 자체의 margin-bottom을 24px로 — 토글이
   있을 때(margin-bottom 24px)와 동일한 섹션 trailing 간격 유지. 광고가 빈 출력이어도(margin: 0)
   list의 margin-bottom만으로 24px 보장. */
.rl-note-home-list:not(:has(+ .rl-note-home-list-toggle)) {
  margin-bottom: var(--rl-sp-6);
}
/* "N개 더 보기 / 최근 5개만 보기" 토글 — 6번째부터의 카드는 hidden 속성으로 display:none. JS가 토글.
   보조 버튼 톤: 과목 카드보다 짧은 padding + 옅은 톤 + label 사이즈. 시선 도구 X — 액션은 메인 카드 CTA에 집중. */
.rl-note-home-list-toggle {
  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);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .rl-note-home-list-toggle:hover {
    background: var(--rl-surface-2);
    color: var(--rl-text-2);
  }
}
.rl-note-home-list-toggle:focus-visible {
  outline: 2px solid var(--rl-primary);
  outline-offset: 2px;
}
.rl-note-home-list-toggle-icon {
  display: inline-flex;
  align-items: center;
  color: var(--rl-text-3);
  transition: transform 0.18s ease;
}
.rl-note-home-list-toggle[aria-expanded="true"] .rl-note-home-list-toggle-icon {
  transform: rotate(180deg);
}
.rl-note-home-list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap = card-text(badge 끝)과 chevron 사이. 배지·화살표가 시각적으로 붙지 않도록 16px(sp-5).
     padding-right(16px)와 합해 chevron이 카드 우측 끝에 안정적으로 자리.
     padding-y는 sp-3(12px) — 첫 화면에서 리스트가 차지하는 세로 길이를 압축, 메인 라운드 카드 위계 보호.
     모의시험 .rl-mock-recent__link와 1:1 메트릭 유지. */
  gap: var(--rl-sp-5);
  background: var(--rl-surface-elev);
  border: 1px solid var(--rl-line-2);
  border-radius: var(--rl-r-md);
  padding: var(--rl-sp-3) var(--rl-sp-5);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* hidden 속성 명시 처리 — .rl-note-home-list-card { display:flex }가 UA [hidden]{display:none}을
   덮어버려 idx>=5 카드가 노출되던 회귀 차단. specificity 0,2,0로 base 규칙(0,1,0) 우선. */
.rl-note-home-list-card[hidden] {
  display: none;
}
@media (hover: hover) {
  .rl-note-home-list-card:hover {
    border-color: var(--rl-primary-edge);
    background: var(--rl-primary-soft);
    text-decoration: none;
    outline: 0;
  }
}
.rl-note-home-list-card:active,
.rl-note-home-list-card:focus-visible {
  border-color: var(--rl-primary-edge);
  background: var(--rl-primary-soft);
  text-decoration: none;
  outline: 0;
}
.rl-note-home-list-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.rl-note-home-list-card-name {
  font-size: var(--rl-fs-body);
  font-weight: 500;
  color: var(--rl-text);
  letter-spacing: var(--rl-ls-body);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-note-home-list-card-meta {
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-3);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.rl-note-home-list-card-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-note-home-list-card-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--rl-text-3);
  transition: color 0.15s ease;
}
@media (hover: hover) {
  .rl-note-home-list-card:hover .rl-note-home-list-card-cta {
    color: var(--rl-primary);
  }
}
.rl-note-home-list-card:active .rl-note-home-list-card-cta,
.rl-note-home-list-card:focus-visible .rl-note-home-list-card-cta {
  color: var(--rl-primary);
}

/* ───────── 광고 wrapper ─────────
   광고 OFF baseline: 슬롯이 빈 출력을 내면 wrapper도 0 높이로 collapse.
   광고 ON: 가로 overflow 가드만 단일 룰로 유지(.note_temp).
   margin sp-6 양변 — 그룹 간 24px 원칙 정합 (raw 16px → 토큰 회수). 광고는 위·아래 콘텐츠와
   서로 다른 성격 그룹 = 24px 호흡. ([[feedback_group_spacing_principle]]) */
.rl-note-home-ad { margin: var(--rl-sp-6) 0; }
.rl-note-home-ad:empty { margin: 0; }
.rl-note-home-ad .note_temp { max-width: 100%; box-sizing: border-box; }

/* ───────── 보조 영역 (관리하기 / 시험지 보기) ─────────
   hover는 텍스트 색만 변경 — desc text-3 → text-2, cta primary → primary-hover.
   border/background 변화 없음. */
.rl-note-home-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 8px;
  background: var(--rl-surface-2);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-sm);
  color: var(--rl-text-3);
  text-decoration: none;
  transition: color 0.15s ease;
}
@media (hover: hover) {
  .rl-note-home-secondary:hover {
    color: var(--rl-text-2);
    text-decoration: none;
  }
  .rl-note-home-secondary:hover .rl-note-home-secondary-cta {
    color: var(--rl-primary-hover);
  }
}
.rl-note-home-secondary:active {
  color: var(--rl-text-2);
  text-decoration: none;
}
.rl-note-home-secondary:active .rl-note-home-secondary-cta {
  color: var(--rl-primary-hover);
}
.rl-note-home-secondary:focus-visible {
  outline: 2px solid var(--rl-primary);
  outline-offset: 2px;
}
.rl-note-home-secondary-desc {
  font-size: var(--rl-fs-body-sm);
  line-height: 1.45;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.rl-note-home-secondary-cta {
  font-size: var(--rl-fs-body-sm);
  color: var(--rl-primary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

/* archive 진입 카드 — title+meta 두 줄 위계. 다른 secondary는 desc 텍스트 노드만 가져 영향 없음. */
.rl-note-home-secondary--archive .rl-note-home-secondary-desc {
  display: flex;
  flex-direction: column;
  gap: var(--rl-sp-1);
}
.rl-note-home-secondary--archive .rl-note-home-secondary-title {
  font-size: var(--rl-fs-body);
  font-weight: 600;
  color: var(--rl-text);
}
.rl-note-home-secondary--archive .rl-note-home-secondary-meta {
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rl-note-home-secondary--archive .rl-note-home-secondary-meta strong {
  font-weight: 600;
  color: var(--rl-text-3);
}

/* 카드 외측 보조 텍스트(disclaimer·secondary-login). Empty/guest 본체는 .rl-banner 단일 출처. */
.rl-note-home-guest-disclaimer {
  font-size: var(--rl-fs-caption);
  color: var(--rl-text-4);
  margin: 14px 0 0;
  line-height: 1.5;
}
.rl-note-home-guest-secondary-login {
  text-align: center;
  margin: 16px 0 0;
  font-size: var(--rl-fs-body-sm);
  color: var(--rl-text-3);
}
.rl-note-home-guest-secondary-login a {
  color: var(--rl-primary);
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--rl-r-xs);
}
@media (hover: hover) {
  .rl-note-home-guest-secondary-login a:hover {
    background: var(--rl-primary-soft);
    text-decoration: none;
    outline: 0;
  }
}
.rl-note-home-guest-secondary-login a:active,
.rl-note-home-guest-secondary-login a:focus-visible {
  background: var(--rl-primary-soft);
  text-decoration: none;
  outline: 0;
}

/* === Round Complete Arrival — rl_note.php 도착 시 마스터율 영역만 갱신 강조 ===
   카드 자체 등장 X(과한 의미부여·로딩 느낌 회피). "방금 반영됨"은 마스터율 영역만 갱신 강조로 표현.
   설계 원칙: 보상 반복 X·연결감만 — 한 번의 차분한 제스처로 "값이 도착해 안착"을 읽힌다.
   easing은 모션 토큰만 사용(raw cubic-bezier 금지, §8.5 G).

   choreography(2비트 카덴스, all delay 기준):
   1) .rl-stat soft highlight (CSS, 1200ms 200ms — primary-soft glow bloom→recede, ease-out)
   2) 숫자 prev→now 카운트업          (JS,  640ms 200ms — ease-out, 1·2% 변화도 인지)
   3) 진행바 width prev→now           (JS 인라인, 700ms 200ms — ease-out, 차분한 안착)
   ─ 위 3종 동시 release(t=0.20s) → 값이 함께 갱신되는 한 호흡 ─
   4) 진행바 끝점 pulse               (CSS, 620ms 540ms — fill이 도착하는 순간 합류하는 확인 비트)
   타임라인: 0.20s highlight·count-up·fill 시작 → 0.54s 끝점 pulse 합류 → 0.84s 숫자·0.90s fill 도착 → ~1.40s glow 잔향 정지.
   ────────────────────────────────────────────────────────── */

/* 마스터율 영역 soft highlight — primary-soft 배경이 빠르게 차오르고(bloom) 천천히 물러남(recede).
   영역 자체가 "방금 갱신됨"의 시선 anchor. 1~2% 변화는 width만으로 안 보이므로 영역 glow가 신호 보장.
   배경만 트랜지션(박스모델 불변) → 아래 진행바·위 타이틀 레이아웃 시프트 0. */
.rl-banner.is-action.rl-rc-arrive .rl-stat {
  border-radius: var(--rl-r-md);
  animation: rl-rc-stat-highlight 1200ms 200ms var(--ease-out) both;
}
@keyframes rl-rc-stat-highlight {
  0%   { background: transparent; }
  20%  { background: var(--rl-primary-soft); }
  100% { background: transparent; }
}

/* 진행바 끝점 pulse — fill 우측 가장자리에서 점 하나가 또렷이 차오르며 안착(확인 비트).
   얇은 막대라 expanding ring은 상하 클립됨 → 점 scale 물성으로 신호(0.5→1.25 overshoot→1 settle).
   fill에 position:relative(.rl-rc-arrive 한정) + ::after 점 absolute. parent .rl-progress overflow:hidden이라
   글로우가 막대 밖으로 새지 않고 안에서 마무리. translate(-2px,-50%)로 점이 끝선 약간 안쪽 — 잘림 방지.
   delay 540ms — fill(200~900ms)이 목적지에 다다르는 구간에 합류해 "도착 → 확인" 2비트로 읽힌다. */
.rl-banner.is-action.rl-rc-arrive .rl-progress-fill {
  position: relative;
}
.rl-banner.is-action.rl-rc-arrive .rl-progress-fill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rl-on-primary);
  transform: translate(-2px, -50%) scale(0.5);
  opacity: 0;
  pointer-events: none;
  animation: rl-rc-endpoint-pulse 620ms 540ms var(--ease-out) both;
}
@keyframes rl-rc-endpoint-pulse {
  0%   { opacity: 0; transform: translate(-2px, -50%) scale(0.5); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  40%  { opacity: 1; transform: translate(-2px, -50%) scale(1.25); box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.9); }
  100% { opacity: 0; transform: translate(-2px, -50%) scale(1); box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rl-banner.is-action.rl-rc-arrive .rl-stat,
  .rl-banner.is-action.rl-rc-arrive .rl-progress-fill::after {
    animation: none !important;
  }
  .rl-banner.is-action.rl-rc-arrive .rl-progress-fill::after { display: none; }
}