/*
 * reading.css — 독서지수 메뉴 (2026-10-21)
 * designer 명세 /var/services/web/.design/iteach4u/reading/spec.md 를 따른다. 색·간격·글꼴은 top2.php 의 토큰만 쓴다.
 * 클래스는 명세의 BEM 이름 대신 PHP 쪽 이름(rd-scale-band, rd-btn-primary …)을 쓴다 — 뜻은 같다.
 */

/* top2.php 토큰 사본에 없는 9종 — tokens.css 값 그대로. 사본에 들어가면 이 블록 삭제 */
:root { --shadow-focus: 0 0 0 3px rgb(79 70 229 / .25); --control-height: 44px; --line-loose: 1.8; --letter-wide: .02em;
	--container-sm: 640px; --container-md: 768px; --z-sticky: 200; --z-toast: 1300; --control-height-lg: 48px; }
:root[data-theme="dark"] { --shadow-focus: 0 0 0 3px rgb(129 140 248 / .45); }

.rd-page, .rd-page * { box-sizing: border-box; }
.rd-page { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); font-size: var(--fs-base); line-height: var(--line-base); }
.rd-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.rd-main { margin: var(--space-6) 0 var(--space-12); }
.rd-main h2 { font-size: var(--fs-xl); letter-spacing: var(--letter-tight); margin: 0 0 var(--space-4); }
.rd-main h3 { font-size: var(--fs-md); margin: 0 0 var(--space-1); }
.rd-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); margin: 0 0 var(--space-6); }
.rd-page :is(a, button, input, select, summary):focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--shadow-focus); }

/* 서브 탭 */
.rd-tabnav { display: flex; align-items: center; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--color-border); margin-top: var(--space-5); }
.rd-tabnav a { flex: 0 0 auto; padding: var(--space-3) var(--space-4); margin-bottom: -1px; border-bottom: 2px solid transparent;
	font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted); text-decoration: none; }
.rd-tabnav a:hover { color: var(--color-fg); }
.rd-tabnav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-semibold); }
.rd-tabnav-ri { margin-left: auto; padding: 0 var(--space-3); font-size: var(--fs-xs); color: var(--color-fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-tabnav-ri b { color: var(--color-primary); font-size: var(--fs-sm); }

/* 대역색 — color-mix 라 다크에서도 primary 를 따라간다. 성인·전문만 accent(brass) */
.rd-band-1, .rd-band-2, .rd-band-3, .rd-band-4, .rd-band-5 { --rd-band: color-mix(in srgb, var(--color-primary) var(--rd-mix), var(--color-surface-2)); }
.rd-band-1 { --rd-mix: 22%; } .rd-band-2 { --rd-mix: 38%; } .rd-band-3 { --rd-mix: 54%; } .rd-band-4 { --rd-mix: 70%; } .rd-band-5 { --rd-mix: 88%; }
.rd-band-6 { --rd-band: var(--color-accent); }

/* 공통 조각 */
.rd-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); margin-bottom: var(--space-5); }
.rd-card-lg { padding: var(--space-8); max-width: var(--container-md); margin-inline: auto; }
.rd-center { text-align: center; }
.rd-muted { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.rd-warn { color: var(--color-warn-soft-fg, var(--color-fg)); background: var(--color-warn-soft); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.rd-lead { max-width: 60ch; font-size: var(--fs-md); color: var(--color-fg-muted); margin: 0 0 var(--space-5); }
.rd-eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--letter-wide); text-transform: uppercase; color: var(--color-accent-soft-fg); }
.rd-section { margin-bottom: var(--space-10); }
.rd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.rd-two .rd-card { margin-bottom: 0; }
.rd-list, .rd-steps { padding-left: 1.25em; margin: 0 0 var(--space-4); }
.rd-list li, .rd-steps li { margin-bottom: var(--space-2); }
.rd-up { color: var(--color-success-soft-fg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rd-down { color: var(--color-danger-soft-fg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height);
	padding: 0 var(--space-6); border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-bg);
	color: var(--color-fg); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; text-decoration: none;
	transition: background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.rd-btn:hover { background: var(--color-surface); }
.rd-btn:active { transform: translateY(1px); }
.rd-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); box-shadow: var(--shadow-sm); }
.rd-btn-primary:hover { background: var(--color-primary-hover); }
.rd-btn-lg { min-height: var(--control-height-lg); padding: 0 var(--space-8); font-size: var(--fs-base); }
.rd-btn:disabled { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-fg-subtle); box-shadow: none; cursor: not-allowed; }
.rd-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.rd-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--fs-xs);
	font-weight: var(--fw-semibold); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-fg); }
.rd-chip-lg { font-size: var(--fs-base); padding: var(--space-2) var(--space-5); border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.rd-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.rd-chip-link { min-height: var(--control-height); padding: 0 var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; }
.rd-chip-link:hover { border-color: var(--color-primary); }
.rd-chip-link.active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-soft-fg); font-weight: var(--fw-semibold); }

.rd-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.rd-form label, .rd-band-pick label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.rd-page select { min-height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--color-border-input, var(--color-border-strong)); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-fg); font: inherit; }
.rd-error { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-danger-soft); color: var(--color-danger-soft-fg); font-size: var(--fs-sm); }

/* 소개 */
.rd-hero { background: var(--gradient-paper-warm); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-8); margin-bottom: var(--space-8); }
.rd-hero h1 { margin: var(--space-2) 0 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--line-tight); letter-spacing: var(--letter-tight); }
.rd-hero .rd-lead { max-width: 52ch; margin: var(--space-3) 0 0; }
.rd-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.rd-hero-mine { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--color-fg-muted); }
.rd-hero-mine b { color: var(--color-primary); font-size: var(--fs-lg); }
.rd-band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.rd-band-card { position: relative; overflow: hidden; margin: 0; }
.rd-band-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--space-1); background: var(--rd-band); }
.rd-band-card p { margin: var(--space-1) 0 0; }
.rd-band-range { font-size: var(--fs-xs); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.rd-faq { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--color-bg); }
.rd-faq summary { cursor: pointer; font-weight: var(--fw-semibold); }
.rd-faq p { margin: var(--space-3) 0 0; color: var(--color-fg-muted); }

/* 눈금 */
.rd-scale { position: relative; display: flex; gap: 0; margin: var(--space-10) 0 var(--space-4); padding-top: var(--space-8); }
.rd-scale-band { position: relative; height: var(--space-3); background: var(--rd-band); }
.rd-scale-band:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.rd-scale-band:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.rd-scale-band span, .rd-scale-band small { position: absolute; font-size: var(--fs-xs); white-space: nowrap; }
.rd-scale-band span { top: var(--space-4); left: 0; right: 0; text-align: center; color: var(--color-fg-muted); letter-spacing: var(--letter-tight); }
.rd-scale-band small { top: calc(var(--space-4) + 1.2em); left: 0; color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.rd-scale-marker { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rd-scale-marker b { color: var(--color-primary); }
.rd-scale-marker::after { content: ""; width: 2px; height: var(--space-6); background: var(--color-fg); border-radius: var(--radius-full); }
.rd-scale + * { margin-top: var(--space-10); }

/* 측정·훈련 진행 */
.rd-stage[hidden] { display: none; }
.rd-progress { background: var(--color-bg); padding: var(--space-3) 0; margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.rd-progress-text { display: block; font-size: var(--fs-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); }
.rd-progress-bar { height: var(--space-1); border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.rd-progress-bar i { display: block; height: 100%; background: var(--color-primary); transition: width var(--duration-base) var(--ease-out); }
.rd-timer-bar { height: var(--space-2); }
.rd-timer-bar i { transition: none; }
.rd-timer-bar.is-low i { background: var(--color-warn); }
.rd-passage { max-width: 68ch; margin-inline: auto; padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.rd-passage header { margin-bottom: var(--space-5); }
.rd-passage-title { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-xl); line-height: var(--line-tight); letter-spacing: var(--letter-tight); }
.rd-passage-source { margin: 0; }
.rd-passage-text { font-size: var(--fs-md); line-height: var(--line-loose); word-break: keep-all; overflow-wrap: anywhere; }
.rd-passage-text p { margin: 0 0 var(--space-5); }
.rd-passage-text p:last-child { margin-bottom: 0; }
.rd-passage.is-hidden .rd-passage-text { visibility: hidden; }
.rd-stage[data-stage="read"] .rd-actions, .rd-stage[data-stage="quiz"] .rd-actions { max-width: 68ch; margin-inline: auto; justify-content: flex-end; }

.rd-quiz { max-width: 68ch; margin-inline: auto; }
.rd-q { border: 0; margin: var(--space-6) 0 0; padding: 0; min-width: 0; }
.rd-q:first-child { margin-top: 0; }
.rd-q-stem { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); padding: 0; font-weight: var(--fw-semibold); }
.rd-q-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full);
	background: var(--color-primary-soft); color: var(--color-primary-soft-fg); font-size: var(--fs-xs); }
.rd-choice { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-3) var(--space-4); margin-top: var(--space-2);
	cursor: pointer; background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
	transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.rd-choice input { flex: 0 0 auto; margin: var(--space-1) 0 0; width: 1.1em; height: 1.1em; }
.rd-choice:hover { border-color: var(--color-primary); }
.rd-choice:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.rd-choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
.rd-choice.is-correct { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success-soft-fg); box-shadow: none; }
.rd-choice.is-wrong { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger-soft-fg); box-shadow: none; }
.rd-choice:has(input:disabled) { cursor: default; }
.rd-choice:has(input:disabled):not(.is-correct, .is-wrong) { color: var(--color-fg-subtle); border-color: var(--color-border); background: var(--color-bg); }
.rd-choice-tag { margin-left: auto; flex: 0 0 auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.rd-q-explain { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--color-fg-muted); }

/* 어휘 모드 */
.rd-word { text-align: center; padding: var(--space-8) var(--space-6); margin-bottom: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.rd-word-term { margin: var(--space-2) 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); }
.rd-q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.rd-q-grid .rd-choice { margin-top: 0; }

/* 피드백·결과 */
.rd-feedback-title { margin-bottom: var(--space-4); }
.rd-feedback-list { padding-left: 1.4em; margin: 0; }
.rd-feedback-list li { margin-bottom: var(--space-3); }
.rd-feedback-list li.ok::marker { color: var(--color-success-soft-fg); }
.rd-feedback-list li.ng::marker { color: var(--color-danger-soft-fg); }
.rd-feedback-list .rd-tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-right: var(--space-2); }
.rd-feedback-list li.ok .rd-tag { color: var(--color-success-soft-fg); }
.rd-feedback-list li.ng .rd-tag { color: var(--color-danger-soft-fg); }

.rd-result { text-align: center; padding: var(--space-10) var(--space-6); background: var(--gradient-paper-warm); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.rd-result .rd-scale { text-align: left; max-width: var(--container-md); margin-inline: auto; }
.rd-result .rd-actions { justify-content: center; }
.rd-result-ri { margin: var(--space-2) 0 0; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--letter-tight); }
.rd-result-ri b { font-size: calc(var(--fs-4xl) * 1.5); font-weight: var(--fw-bold); color: var(--color-primary); }
.rd-result-ri span { margin-left: var(--space-2); font-size: var(--fs-lg); color: var(--color-fg-muted); }
.rd-result-band { margin: var(--space-3) 0 0; }
.rd-result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); max-width: var(--container-sm); margin: var(--space-10) auto 0; }
.rd-result-stats > div { padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.rd-result-stats dt { font-size: var(--fs-xs); color: var(--color-fg-muted); }
.rd-result-stats dd { margin: var(--space-1) 0 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* 높이기 */
.rd-train-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.rd-train-head p { margin: 0; }
.rd-train-head b { color: var(--color-primary); }
.rd-band-pick { display: flex; align-items: center; gap: var(--space-2); }
.rd-goal { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.rd-goal-bar { display: inline-block; flex: 1 1 auto; max-width: var(--container-sm); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.rd-goal-bar i { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-full); }
.rd-mode-card.is-empty { opacity: .55; pointer-events: none; }
.rd-mode-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }
.rd-mode-card { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-6); color: inherit; text-decoration: none; border-radius: var(--radius-xl);
	transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.rd-mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.rd-mode-card:first-child { background: var(--gradient-paper-warm); }
.rd-mode-card h2 { margin: 0; font-size: var(--fs-lg); }
.rd-mode-card p { margin: 0; }
.rd-mode-card .rd-btn { margin-top: auto; align-self: flex-start; }
.rd-train-result { max-width: var(--container-md); margin-inline: auto; text-align: center; }
.rd-train-score { margin: var(--space-2) 0; font-size: var(--fs-2xl); }
.rd-train-score b { color: var(--color-primary); }
.rd-train-delta { margin: 0 0 var(--space-2); }
.rd-train-delta .rd-up, .rd-train-delta .rd-down { font-size: var(--fs-lg); }
.rd-train-result .rd-feedback-list { text-align: left; margin-top: var(--space-5); }
.rd-train-result .rd-actions { justify-content: center; }

/* 지문 서재 */
.rd-card-flush { padding: 0; overflow-x: auto; }
.rd-library td:nth-child(3), .rd-library th:nth-child(3) { text-align: right; }
.rd-library a { color: var(--color-fg); font-weight: var(--fw-medium); text-decoration: none; }
.rd-library a:hover { color: var(--color-primary); text-decoration: underline; }
.rd-locked { color: var(--color-fg-muted); }
.rd-center-actions { justify-content: center; max-width: 68ch; margin-inline: auto; }

/* 추천 도서 */
.rd-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.rd-book { position: relative; margin: 0; padding-left: calc(var(--space-5) + var(--space-8)); }
.rd-book-no { position: absolute; left: var(--space-4); top: var(--space-5); display: inline-grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full);
	background: var(--color-primary-soft); color: var(--color-primary-soft-fg); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.rd-book h2 { font-size: var(--fs-base); margin: 0; }
.rd-book-meta { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.rd-book p:last-child { margin: 0; font-size: var(--fs-sm); }

/* 나의 기록 — 칭호·순위·배지 */
.rd-fun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-4); }
.rd-fun .rd-card { margin: 0; }
.rd-title-card { position: relative; overflow: hidden; background: var(--gradient-paper-warm); }
.rd-title-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--space-2); background: var(--rd-band, var(--color-primary)); }
.rd-title-name { margin: var(--space-2) 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); color: var(--color-primary); }
.rd-rank-top { margin: var(--space-2) 0; font-size: var(--fs-xl); }
.rd-rank-top b { color: var(--color-primary); font-size: var(--fs-2xl); }
.rd-rank-bar { height: var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; margin-bottom: var(--space-2); }
.rd-rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 45%, var(--color-surface-2)), var(--color-primary)); border-radius: var(--radius-full); }
.rd-birth-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.rd-birth-form label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.rd-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.rd-badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-3); text-align: center;
	background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-fg-muted); }
.rd-badge .rd-badge-icon { font-size: var(--fs-2xl); filter: grayscale(1); opacity: .45; }
.rd-badge small { font-size: var(--fs-xs); }
.rd-badge.is-earned { background: var(--color-bg); border: 1px solid var(--color-accent); color: var(--color-fg); box-shadow: var(--shadow-sm); }
.rd-badge.is-earned .rd-badge-icon { filter: none; opacity: 1; }
.rd-badge.is-earned small { color: var(--color-fg-muted); }
.rd-new-badges { margin: var(--space-4) auto 0; padding: var(--space-3) var(--space-4); max-width: var(--container-sm); border-radius: var(--radius-lg); background: var(--color-accent-soft); color: var(--color-accent-soft-fg); font-weight: var(--fw-semibold); }
.rd-result-rank { margin: var(--space-4) 0 0; font-size: var(--fs-md); }
.rd-result-rank b { color: var(--color-primary); }

/* 명예의 전당 · 관리자 현황 */
.rd-hall { list-style: none; margin: 0; padding: 0; }
.rd-hall li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md); }
.rd-hall li:last-child { border-bottom: 0; }
.rd-hall li.is-me { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.rd-hall-rank { width: var(--space-8); text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rd-hall-nick { flex: 1; min-width: 0; }
.rd-hall b { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.rd-admin { border-style: dashed; }
.rd-admin-stats { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-4); }

/* 나의 기록 */
.rd-record-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.rd-record-summary .rd-card { margin: 0; }
.rd-stat-label { display: block; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.rd-stat-value { display: block; margin-top: var(--space-1); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.rd-stat-value b { color: var(--color-primary); }
.rd-chart { display: block; width: 100%; height: auto; overflow: visible; margin: var(--space-4) 0; padding: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.rd-chart-grid { stroke: var(--color-border); stroke-width: 1; }
.rd-chart-label { fill: var(--color-fg-muted); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; } /* SVG 사용자 단위 — 예외 */
.rd-chart-line { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rd-chart-dot { fill: var(--color-bg); stroke: var(--color-primary); stroke-width: 2; }
.rd-chart-dot.is-test { fill: var(--color-primary); }
.rd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rd-table th { padding: var(--space-2) var(--space-3); background: var(--color-surface); color: var(--color-fg-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: left; border-bottom: 1px solid var(--color-border); }
.rd-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; text-align: left; }
.rd-table tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) {
	.rd-two, .rd-mode-grid, .rd-record-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rd-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.rd-wrap { padding: 0 var(--space-4); }
	.rd-hero { padding: var(--space-6) var(--space-5); }
	.rd-hero h1 { font-size: var(--fs-2xl); }
	.rd-two, .rd-mode-grid, .rd-band-grid, .rd-record-summary, .rd-book-grid, .rd-result-stats, .rd-q-grid, .rd-fun { grid-template-columns: 1fr; }
	.rd-actions .rd-btn, .rd-hero-actions .rd-btn { flex: 1 1 100%; }
	.rd-passage { padding: var(--space-5) var(--space-4); margin-inline: calc(var(--space-4) * -1); border-inline: 0; border-radius: 0; }
	.rd-result-ri b { font-size: var(--fs-4xl); }
	.rd-scale-band small { display: none; }
	.rd-card-lg { padding: var(--space-5); }
}

/* 디자이너 검토 2026-10-22 반영 — 화면 밖 읽기 전용 글자, 좁은 화면의 표 */
.rd-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rd-page [tabindex="-1"]:focus { outline: none; }
.rd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rd-table-scroll .rd-table { min-width: 480px; }
@media (max-width: 1024px) { .rd-section.rd-two:has(.rd-table) { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rd-library th:nth-child(4), .rd-library td:nth-child(4) { display: none; } }

/* 디자이너 검토 2026-10-22 중간·낮음 반영 */
:is(.rd-hero, .rd-result, .rd-title-card, .rd-mode-card:first-child) :is(.rd-lead, .rd-muted) { color: var(--gray-600); }   /* M-2 paper-warm 위 회색 글자 */
.rd-choice input:focus-visible { box-shadow: none; }        /* M-3 링은 label 하나만 */
.rd-badge { position: relative; }                           /* M-5 획득 표시를 색에만 기대지 않게 */
.rd-badge.is-earned::after { content: "✓"; position: absolute; top: var(--space-2); right: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-accent-soft-fg); }
legend.rd-word { display: block; width: 100%; float: none; }   /* M-7 */
legend.rd-word > span { display: block; }
.rd-stage[data-stage="read"] .rd-progress { position: sticky; top: var(--rd-sticky-top, 0); z-index: var(--z-sticky); }   /* M-9 --rd-sticky-top 은 reading.js 가 헤더 높이로 채움 */
.rd-goal { flex: 1 1 100%; order: 3; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }   /* L-1 */
.rd-goal.is-done { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-soft-fg); }
.rd-mode-meta { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-accent-soft-fg); }   /* L-2 */
.rd-mode-card h2 .rd-chip { margin-left: var(--space-2); vertical-align: middle; }
.rd-badge.is-earned { background: color-mix(in srgb, var(--color-accent-soft) 55%, var(--color-bg)); }   /* L-3 */
.rd-hall .rd-chip { flex: 0 0 auto; }                       /* L-4 */
.rd-admin { background: var(--color-surface); }             /* L-5 */
.rd-admin-stats > div { background: var(--color-bg); }
.rd-chip-lg[class*="rd-band-"]::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--rd-band); }   /* L-7 */
.rd-flat { color: var(--color-fg-muted); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }   /* L-8 증감 0 */
.rd-train-delta .rd-flat { font-size: var(--fs-lg); }
.rd-table :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }   /* L-9 */
@media (max-width: 640px) {
	.rd-chart-label { font-size: 22px; } .rd-chart-dot { stroke-width: 3; }   /* M-10 SVG 사용자 단위 — 예외 유지 */
	.rd-admin-stats, .rd-record-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* L-5·L-6 */
	.rd-tabnav-ri { display: none; }                         /* L-13 */
}
@media (max-width: 400px) { .rd-hall .rd-chip { display: none; } }

/* L-10: 대역 사이 틈을 gap 대신 테두리로 — 너비 %가 눈금 위치와 정확히 맞아 마커가 어긋나지 않는다 */
.rd-scale-band { box-sizing: border-box; }
.rd-scale-band + .rd-scale-band { border-left: 2px solid var(--color-bg); }

/* 소개: AI 시대와 문해력 (2026-10-22) */
.rd-ai { padding: var(--space-8); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); }
.rd-ai h2 { margin: var(--space-2) 0 var(--space-4); font-size: var(--fs-2xl); letter-spacing: var(--letter-tight); line-height: var(--line-tight); }
.rd-ai h2 em { font-style: normal; color: var(--color-primary); }
.rd-ai-lead { max-width: 70ch; font-size: var(--fs-md); margin: 0 0 var(--space-6); }
.rd-ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.rd-ai-grid .rd-card { margin: 0; }
.rd-ai-grid h3 { font-size: var(--fs-md); margin: 0 0 var(--space-2); color: var(--color-primary); }
.rd-ai-grid p { margin: 0; font-size: var(--fs-sm); line-height: var(--line-base); }
.rd-ai-close { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border-left: var(--space-1) solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-soft-fg); border-radius: var(--radius-md); font-weight: var(--fw-medium); }
@media (max-width: 900px) { .rd-ai-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rd-ai { padding: var(--space-5); } .rd-ai h2 { font-size: var(--fs-xl); } }

/* 2026-10-22 사이트 공통 css/base.css 가 모든 legend 를 숨긴다(font-size:0, color:transparent, text-indent:-100%).
 * 독서지수는 문항 줄기·어휘 낱말을 legend 로 쓰므로 이 화면 안에서만 되돌린다 — 없으면 문제 문장이 안 보인다 */
.rd-page legend { text-indent: 0; white-space: normal; overflow: visible; font-size: inherit; line-height: inherit; color: inherit; text-shadow: none; }

/* 2026-10-22 자녀·학급(manage.php)·학생 입장(student.php)·프로필 배너 */
.rd-profile-bar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary-soft-fg); font-size: var(--fs-sm); }
.rd-profile-bar a { margin-left: auto; font-weight: var(--fw-semibold); color: inherit; }
.rd-flash { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-success-soft); color: var(--color-success-soft-fg); font-size: var(--fs-sm); }
.rd-chip-ok { border-color: transparent; background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.rd-chip-off { border-color: transparent; background: var(--color-danger-soft); color: var(--color-danger-soft-fg); }
.rd-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.rd-section-head h2 { margin: 0; }
.rd-plan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rd-inline-form { display: inline; margin: 0; }
.rd-actions-left { justify-content: flex-start; margin: var(--space-4) 0; }
.rd-input { min-height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--color-border-input, var(--color-border-strong)); border-radius: var(--radius-md);
	background: var(--color-bg); color: var(--color-fg); font: inherit; font-size: var(--fs-sm); }
textarea.rd-input { padding: var(--space-2) var(--space-3); min-height: 0; width: 100%; resize: vertical; }
.rd-input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-primary); }
.rd-input-xs { width: 5em; } .rd-input-sm { width: 7em; }
.rd-input-code { width: 9em; font-size: var(--fs-xl); letter-spacing: 0.25em; text-transform: uppercase; text-align: center; font-variant-numeric: tabular-nums; }
.rd-form-stack { flex-direction: column; align-items: stretch; }
.rd-form-stack label { margin-top: var(--space-2); }
.rd-code { margin: var(--space-2) 0; font-size: var(--fs-3xl, 2.25rem); font-weight: var(--fw-bold); letter-spacing: 0.3em; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.rd-code-sm { font-size: var(--fs-sm); letter-spacing: 0.15em; font-weight: var(--fw-semibold); }
.rd-btn-sm { min-height: var(--control-height-sm, 36px); padding: 0 var(--space-4); font-size: var(--fs-xs); }
.rd-btn-danger { border-color: var(--color-danger-soft-fg); color: var(--color-danger-soft-fg); background: transparent; }
.rd-btn-danger:hover { background: var(--color-danger-soft); }
.rd-danger-zone { display: block; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px dashed var(--color-border); }
.rd-child-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.rd-child { margin: 0; border-top: 4px solid var(--rd-band, var(--color-border)); }
.rd-child h3 { margin: 0 0 var(--space-2); }
.rd-child h3 a { color: inherit; text-decoration: none; }
.rd-child-ri { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
.rd-child-ri b { font-size: var(--fs-2xl); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.rd-roster td form { white-space: nowrap; }
.rd-start-level { font-size: var(--fs-md); }
.rd-student h2 { margin-top: 0; }
@media (max-width: 640px) { .rd-profile-bar a { margin-left: 0; } .rd-plan { flex-direction: column; align-items: flex-start; } }