/* ── 다힘 2.0 Azul Pro 디자인 시스템 & 다크 모드 토큰 ── */
  :root {
    --erdi-bg: #f8fafc;
    --erdi-card: #ffffff;
    --erdi-card-hover: #f1f5f9;
    --erdi-border: #e2e8f0;
    --erdi-text: #0f172a;
    --erdi-text-sec: #475569;
    --erdi-text-muted: #94a3b8;
    --erdi-primary: #5b8fb8;
    --erdi-primary-hover: #4a7a9e;
    --erdi-accent: #6aa3c8;
    --erdi-danger: #cf6f6f;
    --erdi-success: #5fa080;
    --erdi-warning: #d6ad62;
    --erdi-purple: #9387c9;
    --erdi-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
    --erdi-shadow-lg: 0 12px 36px -4px rgba(15, 23, 42, 0.12);
  }

  body.dark-theme {
    --erdi-bg: #090d16;
    --erdi-card: #131b2e;
    --erdi-card-hover: #1c2742;
    --erdi-border: #243452;
    --erdi-text: #f8fafc;
    --erdi-text-sec: #cbd5e1;
    --erdi-text-muted: #64748b;
    --erdi-primary: #8fbfd9;
    --erdi-primary-hover: #7dd3fc;
    --erdi-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
    --erdi-shadow-lg: 0 12px 40px -4px rgba(0, 0, 0, 0.65);
    background-color: var(--erdi-bg) !important;
    color: var(--erdi-text) !important;
  }

  body.dark-theme .erdi-passage-card,
  body.dark-theme .erdi-rec,
  body.dark-theme .erdi-how-item,
  body.dark-theme .erdi-modal-content {
    background: var(--erdi-card) !important;
    border-color: var(--erdi-border) !important;
    color: var(--erdi-text) !important;
  }
  body.dark-theme .erdi-passage-body {
    color: #f1f5f9 !important;
  }
  body.dark-theme .erdi-live {
    background: #0d1424 !important;
    border-color: var(--erdi-border) !important;
    color: #e2e8f0 !important;
  }
  body.dark-theme .erdi-live .ph {
    color: #64748b !important;
  }
  body.dark-theme .erdi-back,
  body.dark-theme .erdi-btn-tool {
    background: var(--erdi-card) !important;
    border-color: var(--erdi-border) !important;
    color: var(--erdi-text-sec) !important;
  }
  body.dark-theme .erdi-back:hover,
  body.dark-theme .erdi-btn-tool:hover {
    background: var(--erdi-card-hover) !important;
    color: #fff !important;
  }
  body.dark-theme .erdi-brand {
    color: #fff !important;
  }
  body.dark-theme .erdi-grade {
    background: var(--erdi-card) !important;
    border-color: var(--erdi-border) !important;
    color: var(--erdi-text-sec) !important;
  }
  body.dark-theme .erdi-grade.active {
    background: var(--erdi-primary) !important;
    border-color: var(--erdi-primary) !important;
    color: #0f172a !important;
    font-weight: 700 !important;
  }
  body.dark-theme .erdi-h,
  body.dark-theme .erdi-passage-title {
    color: #fff !important;
  }
  body.dark-theme .erdi-sub {
    color: var(--erdi-text-sec) !important;
  }
  body.dark-theme .erdi-axis-name,
  body.dark-theme .erdi-axis-val,
  body.dark-theme .erdi-total {
    color: #fff !important;
  }
  body.dark-theme .erdi-axis-narr {
    color: var(--erdi-text-sec) !important;
  }
  body.dark-theme .erdi-focus {
    background: rgba(56, 189, 248, 0.1) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
  }
  body.dark-theme .erdi-focus h4 {
    color: #8fbfd9 !important;
  }
  body.dark-theme .erdi-focus p {
    color: #cbd5e1 !important;
  }
  body.dark-theme .erdi-retell textarea {
    background: #0d1424 !important;
    border-color: var(--erdi-border) !important;
    color: #f8fafc !important;
  }
  body.dark-theme .erdi-note.info {
    background: var(--erdi-card) !important;
    color: var(--erdi-text-sec) !important;
  }
  body.dark-theme .erdi-step .dot {
    background: #1e293b !important;
    color: #94a3b8 !important;
  }
  body.dark-theme .erdi-step.active .dot {
    background: var(--erdi-primary) !important;
    color: #0f172a !important;
  }
  body.dark-theme .erdi-step .ln {
    background: #243452 !important;
  }

  /* ── 셸 및 레이아웃 ── */
  .erdi-shell { max-width: 820px; margin: 0 auto; padding: 24px 20px 96px; }

  /* ── 상단 툴바 ── */
  .erdi-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 18px; flex-wrap:wrap; }
  .erdi-topbar-left { display:flex; align-items:center; gap:12px; }
  .erdi-back { width:40px; height:40px; border-radius:12px; border:1px solid var(--erdi-border);
    background:var(--erdi-card); color:var(--erdi-text-sec); display:inline-flex; align-items:center; justify-content:center;
    font-size:1.15rem; text-decoration:none; transition:.15s; flex:none; }
  .erdi-back:hover { background:var(--erdi-card-hover); color:var(--erdi-text); text-decoration:none; transform:translateX(-2px); }
  .erdi-brand { font-family:var(--ar-font-display); font-weight:800; font-size:1.24rem; color:var(--erdi-text); letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
  .erdi-brand .bi { color:var(--erdi-primary); font-size:1.3rem; }

  .erdi-top-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .erdi-btn-tool {
    padding:7px 12px; border-radius:10px; border:1px solid var(--erdi-border);
    background:var(--erdi-card); color:var(--erdi-text-sec); font-size:.88rem; font-weight:700;
    cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s;
  }
  .erdi-btn-tool:hover { background:var(--erdi-card-hover); color:var(--erdi-text); }
  .erdi-btn-tool.active { background:var(--erdi-primary); color:#fff; border-color:var(--erdi-primary); }

  /* HUD 칩 바 (스트릭 / 백분위 / 명예의 전당) */
  .erdi-hud-bar {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--erdi-card); border:1px solid var(--erdi-border); border-radius:14px;
    padding:8px 16px; margin-bottom:20px; box-shadow:var(--erdi-shadow); flex-wrap:wrap;
  }
  .erdi-hud-item { display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:700; color:var(--erdi-text-sec); }
  .streak-badge { color:#d9905a; font-weight:800; display:inline-flex; align-items:center; gap:4px; }
  .tier-chip {
    padding:4px 10px; border-radius:980px; font-weight:800; font-size:.82rem;
    background:rgba(14,165,233,.12); color:var(--erdi-primary); display:inline-flex; align-items:center; gap:4px;
  }

  /* 단계 표시 */
  .erdi-steps { display:flex; align-items:center; gap:8px; margin:0 0 24px; padding:4px 0; }
  .erdi-step { display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; color:var(--erdi-text-muted); }
  .erdi-step .dot { width:28px; height:28px; border-radius:50%; background:#e2e8f0; color:#64748b;
    display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; transition:.25s; }
  .erdi-step.active { color:var(--erdi-text); }
  .erdi-step.active .dot { background:var(--erdi-primary); color:#fff; box-shadow:0 0 12px rgba(14,165,233,.45); transform:scale(1.08); }
  .erdi-step.done .dot { background:rgba(95,160,128,.18); color:#5fa080; }
  .erdi-step .ln { width:28px; height:2px; background:var(--erdi-border); border-radius:2px; }

  .erdi-h { font-family:var(--ar-font-display); font-size:clamp(24px,4.5vw,32px); font-weight:800;
    letter-spacing:-.02em; color:var(--erdi-text); margin:0 0 8px; line-height:1.2; }
  .erdi-sub { font-size:1.02rem; color:var(--erdi-text-sec); line-height:1.55; margin:0 0 22px; }

  /* 학년 선택 칩 */
  .erdi-grades { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; align-items:center; }
  .erdi-grade { padding:8px 16px; border-radius:980px; border:1px solid var(--erdi-border);
    background:var(--erdi-card); color:var(--erdi-text-sec); font-weight:700; font-size:.92rem; cursor:pointer; transition:.15s; }
  .erdi-grade:hover { border-color:var(--erdi-primary); color:var(--erdi-primary); }
  .erdi-grade.active { background:var(--erdi-primary); border-color:var(--erdi-primary); color:#fff; }

  /* 진행 안내 카드 */
  .erdi-how { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 24px; }
  .erdi-how-item { background:var(--erdi-card); border:1px solid var(--erdi-border); border-radius:18px; padding:18px 16px; box-shadow:var(--erdi-shadow); transition:.2s; }
  .erdi-how-item:hover { transform:translateY(-2px); box-shadow:var(--erdi-shadow-lg); }
  .erdi-how-item .ic { width:40px; height:40px; border-radius:12px; background:rgba(14,165,233,.1);
    display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--erdi-primary); margin-bottom:12px; }
  .erdi-how-item h4 { margin:0 0 4px; font-size:.98rem; font-weight:700; color:var(--erdi-text); }
  .erdi-how-item p { margin:0; font-size:.86rem; color:var(--erdi-text-sec); line-height:1.45; }
  @media (max-width:560px){ .erdi-how { grid-template-columns:1fr; } }

  /* 지문 카드 & 룰러 */
  .erdi-passage-card {
    background:var(--erdi-card); border:1px solid var(--erdi-border); border-radius:20px;
    padding:30px 32px; margin:0 0 22px; position:relative; box-shadow:var(--erdi-shadow);
  }
  .erdi-passage-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
  .erdi-passage-title-wrap { display:flex; align-items:center; gap:10px; }
  .erdi-passage-title { font-family:var(--ar-font-display); font-size:1.24rem; font-weight:800; color:var(--erdi-text); margin:0; }
  .erdi-meta-badges { display:flex; align-items:center; gap:6px; }
  .erdi-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:980px; font-size:.82rem; font-weight:700; }
  .erdi-chip-grade { background:rgba(14,165,233,.12); color:var(--erdi-primary); }
  .erdi-chip-stats { background:#f1f5f9; color:#475569; }
  body.dark-theme .erdi-chip-stats { background:#1e293b; color:#94a3b8; }

  .erdi-passage-body {
    font-size: 1.36rem; line-height: 2.15; letter-spacing: .01em;
    color: var(--erdi-text); white-space: pre-wrap; word-break: keep-all; position:relative;
    transition: font-size .15s ease;
  }
  .erdi-passage-body.font-sm { font-size: 1.15rem; line-height: 2.0; }
  .erdi-passage-body.font-md { font-size: 1.36rem; line-height: 2.15; }
  .erdi-passage-body.font-lg { font-size: 1.58rem; line-height: 2.25; }

  /* 집중 룰러 (Focus Reading Ruler) */
  #readingRuler {
    position: absolute; left: 0; right: 0; height: 46px; pointer-events: none;
    background: rgba(14, 165, 233, 0.09); border-top: 2px solid var(--erdi-primary); border-bottom: 2px solid var(--erdi-primary);
    border-radius: 4px; display: none; z-index: 10; transition: top 0.06s ease-out;
  }
  body.dark-theme #readingRuler {
    background: rgba(56, 189, 248, 0.15); border-color: #8fbfd9;
  }

  /* 🎯 낭독 호흡 페이서 (Reading Pacer) 스타일 */
  .pacer-active-word {
    background: #bae6fd !important; color: #4a7a9e !important; border-radius: 4px; padding: 0 4px;
    box-shadow: 0 0 10px rgba(14,165,233,.4); transition: background .12s, color .12s;
  }
  body.dark-theme .pacer-active-word {
    background: #4a7a9e !important; color: #e0f2fe !important;
  }

  /* 📖 어휘 팝오버 툴팁 */
  #vocabMiniGlossary {
    position: absolute; display: none; z-index: 120; background: var(--erdi-card);
    border: 1px solid var(--erdi-border); border-radius: 12px; padding: 10px 14px;
    box-shadow: var(--erdi-shadow-lg); max-width: 240px; font-size: .88rem; line-height: 1.45;
    pointer-events: none;
  }

  /* 녹음 패널 & HUD */
  .erdi-rec { background:var(--erdi-card); border:1px solid var(--erdi-border); border-radius:20px; padding:24px; margin:0 0 22px; box-shadow:var(--erdi-shadow); }
  .erdi-rec-row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .erdi-rec-status { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--erdi-text-sec); font-size:1rem; }
  .erdi-rec-status .pip { width:12px; height:12px; border-radius:50%; background:#94a3b8; flex:none; transition:.2s; }
  .erdi-rec-status.live .pip { background:#cf6f6f; animation:erdiPulse 1.1s infinite; }
  
  .erdi-timer-wrap { display:flex; align-items:baseline; gap:8px; }
  .erdi-timer { font-family:var(--ar-font-display); font-weight:800; font-size:1.3rem; color:var(--erdi-text); font-variant-numeric:tabular-nums; }
  .erdi-timer .target { color:var(--erdi-text-muted); font-size:.82rem; font-weight:600; }
  .erdi-speed-chip { display:none; align-items:center; gap:4px; padding:4px 10px; border-radius:980px; font-size:.82rem; font-weight:700; background:rgba(95,160,128,.12); color:#5fa080; }

  /* 🌊 실시간 Canvas 오디오 파형 비주얼라이저 */
  .waveform-container {
    width: 100%; height: 54px; margin: 18px 0 6px; background: rgba(14,165,233,.04);
    border: 1px solid var(--erdi-border); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  }
  #voiceWaveCanvas { width: 100%; height: 100%; }

  .erdi-live { min-height:68px; background:#f8fafc; border:1px solid var(--erdi-border); border-radius:16px;
    padding:16px 18px; color:var(--erdi-text-sec); font-size:1.02rem; line-height:1.65; margin-top:16px; }
  .erdi-live .ph { color:var(--erdi-text-muted); }
  .erdi-live .interim { color:var(--erdi-text-muted); font-style:italic; }

  /* 버튼 보강 */
  .erdi-actions { display:flex; gap:10px; flex-wrap:wrap; }
  .ar-btn.lg { padding:14px 26px; font-size:1.05rem; font-weight:800; border-radius:14px; }
  .ar-btn.block { width:100%; justify-content:center; }
  .ar-btn-primary { background:var(--erdi-primary); color:#fff; border:none; box-shadow:0 4px 16px rgba(14,165,233,.3); cursor:pointer; }
  .ar-btn-primary:hover { background:var(--erdi-primary-hover); transform:translateY(-1px); }
  .ar-btn-danger { background:#cf6f6f; color:#fff; border:none; box-shadow:0 4px 16px rgba(207,111,111,.3); cursor:pointer; }
  .ar-btn-danger:hover { background:#cf6f6f; transform:translateY(-1px); }
  .ar-btn-subtle { background:#f1f5f9; color:#334155; border:1px solid var(--erdi-border); cursor:pointer; }
  .ar-btn-subtle:hover { background:#e2e8f0; color:#0f172a; }
  body.dark-theme .ar-btn-subtle { background:#1e293b; color:#cbd5e1; border-color:var(--erdi-border); }
  body.dark-theme .ar-btn-subtle:hover { background:#243452; color:#fff; }
  .ar-btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

  /* 자기 말 재구성 (STEP 2) */
  .erdi-retell textarea { width:100%; border:1px solid var(--erdi-border); border-radius:16px; padding:18px;
    font-family:inherit; font-size:1.08rem; color:var(--erdi-text); background:#fff; resize:vertical; min-height:104px; transition:.15s; }
  .erdi-retell textarea:focus { outline:none; border-color:var(--erdi-primary); box-shadow:0 0 0 3px rgba(14,165,233,.18); }
  .erdi-retell-tools { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
  .erdi-char-count { font-size:.86rem; color:var(--erdi-text-muted); font-weight:600; }
  .erdi-btn-dictate { padding:6px 14px; border-radius:980px; border:1px solid var(--erdi-border); background:#fff; color:var(--erdi-primary); font-size:.88rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
  body.dark-theme .erdi-btn-dictate { background:#1e293b; border-color:var(--erdi-border); color:#8fbfd9; }
  .erdi-btn-dictate.active { background:#cf6f6f; color:#fff; border-color:#cf6f6f; animation:erdiPulse 1s infinite; }

  /* 📈 누적 진단 성장 추이 비교 배너 */
  .growth-banner {
    display:none; align-items:center; justify-content:space-between; gap:12px;
    background:linear-gradient(135deg, rgba(95,160,128,.12), rgba(14,165,233,.12));
    border:1px solid rgba(95,160,128,.3); border-radius:16px; padding:14px 18px; margin-bottom:16px;
  }
  .growth-text { font-weight:800; color:#4d8a6c; font-size:.96rem; display:flex; align-items:center; gap:8px; }
  body.dark-theme .growth-text { color:#8fc4a8; }

  /* 결과 화면 (STEP 3) 탭 뷰 */
  .erdi-result-tabs { display:flex; gap:8px; margin:20px 0 16px; border-bottom:1px solid var(--erdi-border); padding-bottom:10px; }
  .erdi-tab-btn {
    padding:8px 18px; border-radius:10px; border:1px solid transparent; background:transparent;
    font-weight:700; font-size:.95rem; color:var(--erdi-text-sec); cursor:pointer; transition:.15s;
  }
  .erdi-tab-btn:hover { background:var(--erdi-card-hover); color:var(--erdi-text); }
  .erdi-tab-btn.active { background:rgba(14,165,233,.12); color:var(--erdi-primary); font-weight:800; border-color:rgba(14,165,233,.3); }

  .erdi-result-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
  .erdi-total { font-family:var(--ar-font-display); font-weight:800; letter-spacing:-.02em; color:var(--erdi-text); line-height:1; }
  .erdi-total .num { font-size:3.4rem; color:var(--erdi-primary); }
  .erdi-total .den { font-size:1.1rem; color:var(--erdi-text-muted); }
  
  .stage-badge { display:inline-block; padding:8px 18px; border-radius:980px; font-weight:800; font-size:1rem; letter-spacing:-.01em; }
  .stage-badge.stable     { background:rgba(95,160,128,.16); color:#5fa080; border:1px solid rgba(95,160,128,.3); }
  .stage-badge.borderline { background:rgba(214,173,98,.16); color:#d6ad62; border:1px solid rgba(214,173,98,.3); }
  .stage-badge.moderate   { background:rgba(249,115,22,.16); color:#d9905a; border:1px solid rgba(249,115,22,.3); }
  .stage-badge.critical   { background:rgba(207,111,111,.16); color:#cf6f6f; border:1px solid rgba(207,111,111,.3); }

  /* 🔍 Word Accuracy Diff Inspector 스타일 */
  .diff-view-card {
    background:var(--erdi-card); border:1px solid var(--erdi-border); border-radius:18px;
    padding:22px; margin-top:14px; line-height:2.4; font-size:1.24rem;
  }
  .diff-legend { display:flex; gap:14px; font-size:.85rem; font-weight:700; margin-bottom:14px; flex-wrap:wrap; }
  .diff-legend-item { display:inline-flex; align-items:center; gap:6px; }
  .diff-dot { width:10px; height:10px; border-radius:50%; }
  
  .diff-word { display:inline-block; padding:2px 6px; margin:2px 3px; border-radius:6px; position:relative; cursor:default; }
  .diff-match { background:rgba(95,160,128,.14); color:#4d8a6c; font-weight:700; }
  body.dark-theme .diff-match { background:rgba(95,160,128,.25); color:#8fc4a8; }
  .diff-mismatch { background:rgba(214,173,98,.16); color:#b88a3a; font-weight:700; border-bottom:2px solid #d6ad62; }
  body.dark-theme .diff-mismatch { background:rgba(214,173,98,.25); color:#e0bd7a; }
  .diff-missing { background:rgba(207,111,111,.14); color:#cf6f6f; text-decoration:line-through; font-weight:600; }
  body.dark-theme .diff-missing { background:rgba(207,111,111,.25); color:#f87171; }

  /* 레이더 캔버스 영역 */
  .erdi-radar-wrap {
    display:flex; justify-content:center; align-items:center; margin:16px 0;
    padding:20px; background:rgba(14,165,233,.04); border-radius:20px; border:1px solid var(--erdi-border);
  }
  #erdiRadarCanvas { max-width: 100%; height: auto; }

  .erdi-axis { padding:14px 0; border-bottom:1px solid var(--erdi-border); }
  .erdi-axis:last-child { border-bottom:none; }
  .erdi-axis-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .erdi-axis-name { font-weight:700; color:var(--erdi-text); font-size:1.02rem; }
  .erdi-axis-val { font-family:var(--ar-font-display); font-weight:800; color:var(--erdi-text); font-variant-numeric:tabular-nums; }
  .erdi-axis-val .den { color:var(--erdi-text-muted); font-size:.78em; }
  .erdi-bar { height:10px; background:#e2e8f0; border-radius:6px; overflow:hidden; margin:8px 0; }
  body.dark-theme .erdi-bar { background:#243452; }
  .erdi-bar > span { display:block; height:100%; border-radius:6px; background:var(--erdi-primary);
    width:0; transition:width .9s cubic-bezier(.16,1,.3,1); }
  .erdi-bar.low > span { background:#cf6f6f; }
  .erdi-bar.mid > span { background:#d6ad62; }
  .erdi-bar.high > span { background:#5fa080; }
  .erdi-axis-narr { font-size:.92rem; color:var(--erdi-text-sec); line-height:1.6; margin:0; }
  
  /* 💡 AI 1타 읽기 전문 코치의 3단 처방전 */
  .ai-coach-card {
    background:linear-gradient(135deg, rgba(14,165,233,.06), rgba(147,135,201,.06));
    border:1px solid rgba(14,165,233,.2); border-radius:20px; padding:22px; margin-top:20px;
  }
  .ai-coach-header { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.05rem; color:#5b8fb8; margin-bottom:14px; }
  body.dark-theme .ai-coach-header { color:#8fbfd9; }
  .ai-coach-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
  @media (max-width:680px){ .ai-coach-grid { grid-template-columns:1fr; } }
  .ai-coach-item { background:var(--erdi-card); border:1px solid var(--erdi-border); border-radius:14px; padding:14px; }
  .ai-coach-item h5 { margin:0 0 6px; font-size:.95rem; font-weight:800; color:var(--erdi-text); display:flex; align-items:center; gap:6px; }
  .ai-coach-item p { margin:0; font-size:.88rem; color:var(--erdi-text-sec); line-height:1.55; }

  /* 🔄 오독 문장 집중 재도전 클리닉 카드 */
  .retry-clinic-box {
    background:rgba(214,173,98,.08); border:1px solid rgba(214,173,98,.25); border-radius:16px;
    padding:18px; margin-top:20px;
  }
  .retry-clinic-header { font-weight:800; color:#b88a3a; font-size:1rem; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
  body.dark-theme .retry-clinic-header { color:#e0bd7a; }
  .retry-sentence-item {
    display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--erdi-card);
    border:1px solid var(--erdi-border); border-radius:12px; padding:12px 14px; margin-bottom:8px; font-size:.96rem;
  }
  .retry-sentence-item:last-child { margin-bottom:0; }

  .erdi-saved { display:flex; align-items:center; gap:9px; justify-content:center; background:rgba(95,160,128,.09);
    border-radius:14px; padding:14px; margin-top:20px; font-size:.92rem; color:#4d8a6c; font-weight:700; }
  body.dark-theme .erdi-saved { color:#8fc4a8; background:rgba(95,160,128,.15); }

  /* 모달 레이어 */
  .erdi-modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
  }
  .erdi-modal-content {
    background: #fff; border-radius: 24px; max-width: 680px; width: 100%; max-height: 90vh;
    overflow-y: auto; padding: 32px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  }
  .erdi-modal-close {
    position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--erdi-border); background: var(--erdi-card); color: var(--erdi-text-sec);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; transition:.15s;
  }
  .erdi-modal-close:hover { background: var(--erdi-card-hover); color: var(--erdi-text); }

  /* 공식 성취 인증서 스타일 */
  .cert-paper {
    border: 8px double #cbd5e1; border-radius: 16px; padding: 32px 28px; text-align: center;
    background: #ffffff; position: relative; color: #0f172a;
  }
  body.dark-theme .cert-paper {
    background: #0f172a; border-color: #334155; color: #f8fafc;
  }
  .cert-header { font-size: 1.6rem; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 8px; color: #5b8fb8; }
  .cert-sub { font-size: 0.95rem; color: #64748b; margin-bottom: 24px; }
  .cert-body { margin: 20px 0; line-height: 1.8; font-size: 1.05rem; }
  .cert-score-box {
    display: inline-flex; gap: 20px; background: rgba(2, 132, 199, 0.08); padding: 14px 28px;
    border-radius: 14px; margin: 16px 0; font-weight: 700;
  }
  .cert-stamp {
    width: 80px; height: 80px; border: 3px solid #cf6f6f; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; color: #cf6f6f; font-weight: 900; font-size: 0.9rem;
    transform: rotate(-12deg); margin-top: 16px; box-shadow: 0 0 10px rgba(207, 111, 111, 0.15);
  }

  /* ASMR 팝오버 메뉴 */
  #asmrPopover {
    position: absolute; top: 70px; right: 20px; width: 260px; background: var(--erdi-card);
    border: 1px solid var(--erdi-border); border-radius: 16px; padding: 16px; box-shadow: var(--erdi-shadow-lg);
    display: none; z-index: 100;
  }
  .asmr-btn-group { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
  .asmr-chip { padding:7px 10px; border-radius:8px; border:1px solid var(--erdi-border); background:var(--erdi-card); font-size:.84rem; font-weight:700; cursor:pointer; text-align:center; }
  .asmr-chip.active { background:var(--erdi-primary); color:#fff; border-color:var(--erdi-primary); }

  /* 🎊 Confetti 캔버스 (전체화면) */
  #confettiCanvas {
    position: fixed; inset: 0; pointer-events: none; z-index: 2000; width: 100%; height: 100%; display: none;
  }

  /* 애니메이션 및 유틸 */
  .hidden { display:none !important; }
  @keyframes erdiPulse { 0%{ box-shadow:0 0 0 0 rgba(207,111,111,.5);} 70%{ box-shadow:0 0 0 10px rgba(207,111,111,0);} 100%{ box-shadow:0 0 0 0 rgba(207,111,111,0);} }
  @keyframes erdiFade { from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
  .erdi-fade { animation:erdiFade .4s ease both; }

  @media (max-width:560px){
    .erdi-shell { padding:18px 16px 84px; }
    .erdi-passage-card { padding:22px 18px; }
    .erdi-step .label { display:none; }
    .erdi-topbar { margin-bottom:14px; }
  }

  /* A4 인쇄 가드 */
  @media print {
    body { background: #fff !important; color: #000 !important; padding: 0 !important; }
    .erdi-topbar, .erdi-top-tools, .erdi-hud-bar, .erdi-steps, .erdi-actions, #readingRuler, .erdi-saved, #vocabEndContainer, .erdi-result-tabs, #confettiCanvas { display: none !important; }
    .erdi-shell { max-width: 100% !important; padding: 0 !important; }
    .erdi-passage-card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
    .stage-badge { border: 1px solid #000 !important; color: #000 !important; }
    .erdi-bar > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cert-paper { border-color: #000 !important; }
  }