/* 리딩 전문반 4개 페이지 공용 스타일 — 초등부터 고등까지 함께 쓰므로 연출을 절제한다 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1a2233;--ink2:#3d4d60;--gray:#6b7a90;--light:#f4f7fa;--white:#fff;
  --font:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
  --blue:#2563eb;--blue-lt:#eff6ff;--blue-br:#bfdbfe;
  --green:#059669;--green-lt:#f0fdf4;--green-br:#a7f3d0;
  --teal:#0891b2;--teal-lt:#ecfeff;--teal-br:#a5f3fc;
  --amber:#d97706;--amber-lt:#fffbeb;--amber-br:#fde68a;
  --red:#dc2626;--red-lt:#fef2f2;--red-br:#fecaca;
  --rd1:#7c3aed;--rd2:#5b21b6;
}
html{font-size:17px;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:#f1f5f9;line-height:1.75;overflow-x:hidden}
button,input{font:inherit}
button{border:0;cursor:pointer}
button:disabled{cursor:not-allowed}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1.5px solid #e2e8f0}
.site-header-inner{max-width:1180px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:950}
.logo-icon{font-size:22px}
.logo span{color:var(--rd1)}
.header-back{margin-left:auto;padding:7px 14px;border-radius:10px;background:var(--light);color:var(--ink2);
  font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
.header-back + .header-back{margin-left:0}
.header-back:hover{background:#e2e8f0}

/* HERO */
.hero{max-width:1180px;margin:0 auto;padding:20px 18px 0}
.hero-card{border-radius:18px;padding:26px 24px;color:#fff;background:linear-gradient(135deg,var(--rd1),var(--rd2))}
.hero-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.22);
  font-size:12px;font-weight:800;margin-bottom:10px}
.hero-title{font-size:26px;font-weight:950;line-height:1.35}
.hero-sub{font-size:14px;opacity:.92;margin-top:6px}
.hero-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.hero-chip{padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.2);font-size:12px;font-weight:700}

/* LAYOUT */
.page-body{max-width:1180px;margin:0 auto;padding:18px}
.main-wrap{min-width:0}
.card{background:#fff;border:1.5px solid #e2e8f0;border-radius:16px;padding:22px}

/* 인트로 */
.rd-intro{text-align:center;padding:20px 8px}
.rd-intro-emoji{font-size:56px}
.rd-intro h2{font-size:24px;font-weight:950;margin:10px 0 6px}
.rd-intro p{font-size:15px;color:var(--ink2)}
.rd-axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:18px 0;text-align:left}
.rd-axis{background:var(--light);border:1.5px solid #e2e8f0;border-radius:12px;padding:13px 15px}
.rd-axis b{display:block;font-size:14px;font-weight:900;color:var(--rd2);margin-bottom:3px}
.rd-axis span{font-size:12.5px;color:var(--gray);line-height:1.6}
.rd-saved{background:var(--teal-lt);border:1.5px solid var(--teal-br);border-radius:12px;padding:12px 14px;
  font-size:13px;color:#0e7490;margin:14px 0;font-weight:700;text-align:left;line-height:1.7}
.rd-retake-warn{background:var(--amber-lt);border:1.5px solid var(--amber-br);border-radius:12px;padding:12px 14px;
  font-size:13px;color:#78350f;margin:14px 0;font-weight:700;text-align:left;line-height:1.7}

/* 문항 */
.rd-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rd-phase{font-size:13px;font-weight:900;color:var(--rd2)}
.rd-count{font-size:13px;font-weight:800;color:var(--gray)}
.rd-bar{height:7px;border-radius:999px;background:#e9edf3;overflow:hidden;margin-bottom:18px}
.rd-bar-fill{height:100%;background:linear-gradient(90deg,var(--rd1),var(--rd2));transition:width .2s}
.rd-prompt{font-size:15px;font-weight:800;color:var(--gray);margin-bottom:10px}
.rd-word{font-size:44px;font-weight:950;color:var(--ink);text-align:center;line-height:1.3;
  background:#faf5ff;border:2px solid #e9d5ff;border-radius:16px;padding:22px 14px;margin-bottom:18px;letter-spacing:.01em}
.rd-sentence{font-size:28px;font-weight:800;color:var(--ink);text-align:center;line-height:1.5;
  background:#faf5ff;border:2px solid #e9d5ff;border-radius:16px;padding:26px 18px;margin-bottom:18px}

.qz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.qz-opts-2{grid-template-columns:1fr 1fr}
.qz-opt{padding:16px 14px;border-radius:14px;background:#fff;border:2px solid #e2e8f0;color:var(--ink);
  font-size:16px;font-weight:800;text-align:center;transition:.12s}
.qz-opt:hover:not(:disabled){border-color:var(--rd1);background:#faf5ff}
.qz-opt:disabled{opacity:.55}
.qz-correct{background:var(--green-lt)!important;border-color:var(--green)!important;color:#065f46!important;opacity:1!important}
.qz-wrong{background:var(--red-lt)!important;border-color:var(--red)!important;color:#991b1b!important;opacity:1!important}
.rd-tf{font-size:20px;padding:22px 14px}

/* 축 전환 안내 */
.rd-bridge{text-align:center;padding:26px 10px}
.rd-bridge-emoji{font-size:48px}
.rd-bridge h3{font-size:20px;font-weight:950;margin:10px 0 6px}
.rd-bridge p{font-size:14px;color:var(--ink2);line-height:1.8}

/* 결과 */
.rd-result{text-align:center;padding:16px 4px}
.rd-level{font-size:56px;font-weight:950;color:var(--rd2);line-height:1.1}
.rd-level-name{font-size:20px;font-weight:900;color:var(--ink);margin-top:4px}
.rd-cefr{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;background:#faf5ff;
  border:1.5px solid #e9d5ff;color:var(--rd2);font-size:12.5px;font-weight:800}
.rd-why{text-align:left;background:var(--light);border:1.5px solid #e2e8f0;border-radius:14px;padding:16px 18px;margin:18px 0}
.rd-why-title{font-size:13px;font-weight:900;color:var(--ink2);margin-bottom:8px}
.rd-why li{list-style:none;font-size:14px;color:var(--ink2);line-height:1.85;padding-left:18px;position:relative}
.rd-why li::before{content:'·';position:absolute;left:6px;font-weight:950;color:var(--rd1)}
.rd-parent{text-align:left;background:var(--teal-lt);border:1.5px solid var(--teal-br);border-radius:14px;padding:16px 18px;margin:14px 0}
.rd-parent-title{font-size:13px;font-weight:900;color:#0e7490;margin-bottom:6px}
.rd-parent p{font-size:14px;color:#0e5c73;line-height:1.85}
.rd-note{text-align:left;background:var(--amber-lt);border:1.5px solid var(--amber-br);border-radius:14px;
  padding:14px 16px;margin:14px 0;font-size:13px;color:#78350f;line-height:1.75}

.lc-btn{display:block;width:100%;padding:15px;border-radius:14px;background:var(--light);color:var(--ink2);
  font-size:16px;font-weight:900;margin-top:10px;text-align:center;text-decoration:none}
.lc-btn-ok{background:var(--rd1);color:#fff}
.lc-btn-ok:hover{background:var(--rd2)}

/* 준비 중 안내 (초·중·고 학습 페이지) */
.rd-soon{text-align:center;padding:26px 10px}
.rd-soon-emoji{font-size:56px}
.rd-soon h2{font-size:23px;font-weight:950;margin:10px 0 8px}
.rd-soon > p{font-size:15px;color:var(--ink2);line-height:1.85;max-width:620px;margin:0 auto}
.rd-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:22px 0;text-align:left}
.rd-level-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:15px 17px}
.rd-level-card b{display:block;font-size:15px;font-weight:950;color:var(--rd2)}
.rd-level-card em{display:block;font-style:normal;font-size:12px;font-weight:800;color:var(--gray);margin:2px 0 6px}
.rd-level-card span{font-size:13px;color:var(--ink2);line-height:1.7}
.rd-loop{text-align:left;background:var(--light);border:1.5px solid #e2e8f0;border-radius:14px;padding:16px 18px;margin:18px 0}
.rd-loop-title{font-size:13px;font-weight:900;color:var(--ink2);margin-bottom:8px}
.rd-loop li{list-style:none;font-size:13.5px;color:var(--ink2);line-height:1.9}

/* AI 지문 학습 루프 (R1~R3) — 5단계: 사전어휘 → 통독 → 이해확인 → 정독 → 요약 */
.rd-lesson{text-align:left}
.rd-step-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.rd-step-label{font-size:13px;font-weight:900;color:var(--rd2)}
.rd-step-dots{display:flex;gap:5px}
.rd-step-dot{width:8px;height:8px;border-radius:50%;background:#e2e8f0}
.rd-step-dot.on{background:var(--rd1)}
.rd-step-dot.done{background:var(--green)}
.rd-timer{font-size:13px;font-weight:900;color:var(--amber);background:var(--amber-lt);border:1.5px solid var(--amber-br);border-radius:999px;padding:4px 12px}
.rd-glossary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}
.rd-glossary-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:12px 14px;text-align:center}
.rd-glossary-card b{display:block;font-size:16px;color:var(--ink)}
.rd-glossary-card span{display:block;font-size:12.5px;color:var(--gray);margin-top:3px}
.rd-say-btn{border:0;background:none;font-size:13px;padding:2px 4px;vertical-align:middle;cursor:pointer;opacity:.75}
.rd-say-btn:hover{opacity:1}
.rd-passage{background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:20px 22px;font-size:16px;line-height:1.95;color:var(--ink);margin:14px 0;white-space:pre-wrap}
.rd-q-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:16px 18px;margin:12px 0}
.rd-q-tag{display:inline-block;font-size:10.5px;font-weight:900;color:var(--rd1);background:#faf5ff;border-radius:999px;padding:2px 9px;margin-bottom:8px}
.rd-q-text{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:10px}
.rd-q-explain{margin-top:10px;font-size:13px;color:#0e5c73;background:var(--teal-lt);border:1.5px solid var(--teal-br);border-radius:10px;padding:10px 12px;line-height:1.7}
.rd-summary-box{width:100%;min-height:90px;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px;font-size:14px;font-family:inherit;color:var(--ink);resize:vertical}
.rd-summary-box:focus{outline:2px solid var(--rd1);border-color:var(--rd1)}
.rd-score-badge{display:inline-block;font-size:14px;font-weight:900;color:#fff;background:var(--rd1);border-radius:999px;padding:6px 16px;margin-bottom:12px}
.rd-spinner{width:34px;height:34px;border:4px solid #e2e8f0;border-top-color:var(--rd1);border-radius:50%;margin:20px auto;animation:rd-spin .8s linear infinite}
@keyframes rd-spin{to{transform:rotate(360deg)}}
html.motion-off .rd-spinner{animation:none;border-top-color:#e2e8f0}
.rd-level-card{cursor:pointer;transition:transform .15s,box-shadow .15s}
.rd-level-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.rd-level-card:focus-visible{outline:3px solid var(--rd1);outline-offset:2px}

@media (max-width:640px){
  html{font-size:16px}
  .rd-word{font-size:34px;padding:18px 10px}
  .rd-sentence{font-size:21px;padding:20px 14px}
  .qz-opts{grid-template-columns:1fr}
  .qz-opts-2{grid-template-columns:1fr 1fr}
  .rd-level{font-size:46px}
}