/* ── Kaigo Module Shared Styles ──
   Used by all Materi/Kaigo-*.html pages.
   Replaces per-page inline <style> blocks to reduce duplication. */

/* Layout */
.wrap{max-width:900px;margin:0 auto;padding:0 20px}

/* Hero */
.hero{background:linear-gradient(135deg,var(--primary,#1565c0),var(--primary-dark,#1976d2));color:#fff;padding:48px 20px 32px;text-align:center}
.hero h1{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 8px}
.bdg{display:inline-block;background:rgba(255,255,255,.25);border-radius:20px;padding:4px 12px;font-size:.8rem;margin-bottom:12px}

/* Sections */
.sec{background:var(--white);border:1px solid var(--border-light);border-radius:12px;padding:18px;margin:12px 0}
.sec h3{color:var(--primary,#1565c0);margin:0 0 10px;font-size:1rem}

/* Section Titles */
.st{font-size:1.2rem;font-weight:700;color:var(--primary,#1565c0);margin:28px 0 12px;padding-bottom:8px;border-bottom:2px solid rgba(0,0,0,.08)}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:.85rem;margin:8px 0}
.tbl th{padding:8px 12px;text-align:left;font-size:.8rem;background:rgba(0,0,0,.05)}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--border-light)}

/* Tip / Info Box */
.tip{background:var(--matcha-pale);border-left:3px solid var(--matcha);padding:12px 16px;border-radius:0 10px 10px 0;font-size:.85rem;margin:12px 0}

/* Expandable Cards */
.card{background:var(--white);border:1px solid var(--border-light);border-radius:10px;padding:14px;margin-bottom:10px;cursor:pointer;transition:all .2s}
.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.card.open .det{display:block}
.det{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-light);font-size:.83rem;color:var(--ink-mid)}

/* 2-Column Grid */
.g2{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}

/* Quiz */
.qbox{background:rgba(0,0,0,.04);border-radius:14px;padding:20px;margin:20px 0}
.qq{font-weight:600;margin-bottom:12px}
.qopts{display:grid;gap:8px}
.qopt{background:var(--white);border:1px solid var(--border-mid);border-radius:8px;padding:10px 14px;cursor:pointer;font-size:.9rem;transition:all .2s}
.qopt:hover{background:rgba(0,0,0,.04)}
.qopt.correct{background:#e8f5e9;border-color:#4caf50;color:#1b5e20;animation:qopt-pop .4s cubic-bezier(.34,1.56,.64,1)}
.qopt.wrong{background:#fce4ec;border-color:#e91e63;color:#880e4f;animation:qopt-shake .4s ease}
/* .qopt sudah punya transition:all .2s (baris di atas), jadi warna/border
   sudah luwes berpindah -- animasi di sini cuma menambah dorongan satu-kali
   saat jawaban baru dinilai (setiap soal = elemen .qopt baru dari rnd(),
   jadi animation selalu retrigger wajar, bukan elemen dipakai ulang). */
@keyframes qopt-pop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes qopt-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){
  .qopt.correct,.qopt.wrong{animation:none!important;transition:none!important}
}
.qexp{margin-top:8px;padding:10px;background:var(--white);border-radius:8px;font-size:.85rem;color:var(--ink-mid);display:none}
.qexp.show{display:block}

/* Page Vocab Grid (top section) */
.pg-vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:12px 0}
.pv{background:var(--white);border:1px solid var(--border-light);border-radius:10px;padding:12px 14px}
.pv-jp{font-size:.95rem;font-weight:600;color:var(--ink)}
.pv-ro{font-size:.75rem;color:var(--ink-mid);margin:2px 0}
.pv-id{font-size:.85rem;color:var(--primary,#1565c0)}
.pv-btn{border:none;background:var(--primary,#1565c0);color:#fff;border-radius:6px;padding:2px 8px;cursor:pointer;font-size:.7rem;margin-top:6px}

/* Bottom Vocab Grid (exam vocabulary section) */
.vocab-item{background:var(--white);border-radius:8px;padding:10px;border-left:4px solid var(--accent,#1a237e)}
/* Isi kartu kosakata. Ketiganya dulu ditulis sebagai style inline di tiap
   kartu — 3.630 atribut di 76 halaman. Yang inline meng-hardcode #fff/#777/
   #333, sehingga menang atas aturan [data-theme="dark"] di bawah dan membuat
   kartu tetap putih di mode gelap. Lewat token, keduanya ikut berubah. */
.vocab-term{font-size:1.05rem;font-weight:700;color:var(--accent,#1a237e)}
.vocab-romaji{font-size:.8rem;color:var(--ink-soft)}
.vocab-meaning{font-size:.85rem;color:var(--ink);margin-top:3px}

/* Enriched vocabulary table */
.enriched-wrap{max-width:920px;margin:0 auto;padding:0 20px}
.enriched-card{background:var(--white);border:1px solid var(--border-light);border-radius:14px;padding:20px;margin:16px 0}
.enriched-card h3{color:var(--accent,#4a148c);margin:0 0 12px;font-size:1rem;font-weight:700}
.enriched-card table{width:100%;border-collapse:collapse;margin:10px 0}
.enriched-card th{padding:8px 12px;text-align:left;font-size:.78rem;background:rgba(0,0,0,.07);color:var(--accent,#4a148c)}
.enriched-card td{padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.06);font-size:.85rem;vertical-align:top;line-height:1.6}

/* Enriched tip box */
.enriched-tip{background:rgba(0,0,0,.04);border-left:3px solid var(--accent,#4a148c);padding:12px 15px;border-radius:0 10px 10px 0;font-size:.87rem;margin:16px 0;line-height:1.8}

/* Dialog section */
.dlg-wrap{max-width:920px;margin:0 auto;padding:0 20px}
.dlg-header{font-size:1.2rem;font-weight:700;color:var(--accent,#4a148c);margin:32px 0 14px;padding-bottom:8px;border-bottom:3px solid #f3e5f5}
.dlg-card{background:var(--white);border:1px solid var(--border-light);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.dlg-card-title{font-size:.94rem;font-weight:700;color:var(--accent,#4a148c);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f3e5f5}
.dlg-row{display:flex;gap:10px;margin:9px 0;align-items:flex-start}
.dlg-role{min-width:56px;font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:6px;text-align:center;background:#f3e5f5;color:var(--accent,#4a148c);margin-top:1px;flex-shrink:0}
.dlg-jp{font-size:.91rem;font-weight:500;color:var(--ink);line-height:1.6}
.dlg-id{font-size:.79rem;color:var(--ink-mid);margin-top:2px}
.dlg-speak{border:none;background:var(--accent,#4a148c);color:#fff;border-radius:6px;padding:2px 8px;cursor:pointer;font-size:.7rem;margin-left:6px}

/* Dark Mode Support */
[data-theme="dark"] .hero{background:linear-gradient(135deg,#1a237e,#283593)}
[data-theme="dark"] .sec,[data-theme="dark"] .card,[data-theme="dark"] .qbox,[data-theme="dark"] .enriched-card,[data-theme="dark"] .dlg-card,[data-theme="dark"] .pv,[data-theme="dark"] .vocab-item{background:#1e1e2e;border-color:#333}
[data-theme="dark"] .qopt{background:#2a2a3e;border-color:#444}
[data-theme="dark"] .qopt:hover{background:#3a3a4e}
[data-theme="dark"] .qopt.correct{background:#1b3a1b;border-color:#4caf50;color:#a5d6a7}
[data-theme="dark"] .qopt.wrong{background:#3a1b2a;border-color:#e91e63;color:#f48fb1}
[data-theme="dark"] .qexp{background:#2a2a3e}
[data-theme="dark"] .btn-outline{background:#1e1e2e;border-color:#555;color:#ccc}
[data-theme="dark"] .enriched-tip{background:rgba(255,255,255,.05)}
[data-theme="dark"] .kaigo-theme-toggle{background:#1e1e2e;border-color:#555}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:8px;font-size:.88rem;font-weight:600;cursor:pointer;border:none;font-family:Outfit,sans-serif;transition:all .15s}
.btn-primary{background:var(--primary,#1565c0);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-outline{background:var(--white);color:var(--ink-mid);border:1.5px solid var(--border-mid)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}

/* Quiz controls */
.quiz-btns{display:flex;gap:12px;margin-top:12px}
.quiz-score{text-align:center;font-size:.85rem;color:var(--ink-mid);margin-top:8px}

/* ── Additional shared styles for Materi pages ── */

/* TTS / Speak button */
.spk{border:none;background:var(--primary,#1565c0);color:#fff;border-radius:6px;padding:2px 8px;cursor:pointer;font-size:.7rem;margin-left:6px}
.tts{border:none;background:var(--primary,#1565c0);color:#fff;border-radius:6px;padding:2px 8px;cursor:pointer;font-size:.7rem;margin-left:6px}

/* Subtitle */
.sub{font-size:.85rem;color:var(--ink-mid);line-height:1.7;margin:6px 0}

/* Warning / Error states */
.warn{color:#e65100;font-weight:600}
.err{color:#c62828;font-weight:600}

/* Tags / Badges */
.tag{display:inline-block;padding:2px 8px;border-radius:5px;font-size:.7rem;font-weight:700;background:rgba(0,0,0,.06);color:var(--ink-mid);margin:2px}

/* Key-Value pairs */
.kv{display:flex;gap:8px;margin:4px 0;font-size:.85rem}
.kv b{min-width:60px;color:var(--primary,#1565c0)}

/* Question number */
.qnum{font-size:.75rem;font-weight:800;color:var(--primary,#1565c0);margin-bottom:4px}

/* Dialog extras */
.dl-pt{font-size:.8rem;font-weight:600;color:var(--ink);margin:4px 0}
.dl-st{font-size:.75rem;color:var(--ink-mid);margin-top:4px}
.dl-id{font-size:.79rem;color:var(--ink-mid);margin-top:2px}

/* Score bar */
.score-bar{height:6px;background:rgba(0,0,0,.1);border-radius:3px;overflow:hidden;margin:8px 0}
.score-fill{height:100%;background:var(--primary,#1565c0);border-radius:3px;transition:width .3s}

/* Search input */
.srch{width:100%;padding:10px 14px;border:1px solid var(--border-mid);border-radius:10px;font-size:.9rem;margin-bottom:12px;box-sizing:border-box}

/* Table wrapper */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.85rem;margin:8px 0}
.tbl th{padding:8px 12px;text-align:left;font-size:.8rem;background:rgba(0,0,0,.05)}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--border-light)}
.tbl tr:hover td{background:rgba(0,0,0,.03)}

/* Navigation bar (for overview/hub pages) */
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.brand strong{font-family:'Noto Serif JP',serif;color:var(--red);font-size:21px}
.brand span{font-size:11px;font-weight:800;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase}
.nav-links{display:flex;gap:2px;list-style:none}
.nav-right{display:flex;gap:8px;align-items:center}
.btn-nav{height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--border-mid);background:var(--white);color:var(--ink-mid);font-weight:700;font-size:13px;text-decoration:none;display:inline-flex;align-items:center;transition:all .15s}
.btn-nav:hover{border-color:var(--red);color:var(--red)}
@media(max-width:768px){.nav-links{display:none!important}}

/* Hero enhancements */
.hero-inner{max-width:1100px;margin:0 auto;position:relative}
.kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;background:rgba(232,83,74,.2);color:#ff8a80;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.hero-desc{color:rgba(255,255,255,.62);font-size:14px;line-height:1.85;max-width:640px;margin-bottom:1.5rem}
.feat-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{padding:4px 11px;border-radius:18px;background:rgba(255,255,255,.08);border:.5px solid rgba(255,255,255,.12);font-size:12px;font-weight:600;color:rgba(255,255,255,.75)}

/* Breadcrumb */
.breadcrumb{padding:.625rem clamp(16px,5vw,72px);background:var(--white);border-bottom:1px solid var(--border);font-size:12px;color:var(--ink-soft)}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb span{margin:0 .4rem;color:var(--border-mid)}

/* Card grid (hub pages) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:1.25rem}

/* Comparison table */
.cmp-table{width:100%;border-collapse:collapse;background:var(--white);border-radius:12px;overflow:hidden;border:.5px solid var(--border-mid);box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:1.5rem}
.cmp-table th{background:var(--ink);color:#fff;padding:.75rem 1rem;font-size:12px;font-weight:700;text-align:left}
.cmp-table td{padding:.7rem 1rem;font-size:13px;border-bottom:.5px solid var(--border-light);line-height:1.6;vertical-align:top}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table tr:nth-child-even) td{background:var(--cream)}

/* Info boxes */
.ib{border-radius:10px;padding:1rem 1.25rem;margin-bottom:1.25rem;border:.5px solid}
.ib.tip{background:var(--blue-pale);border-color:rgba(47,111,237,.2)}
.ib.warning{background:rgba(185,137,47,.07);border-color:rgba(185,137,47,.2)}
.ib.important{background:var(--red-pale);border-color:rgba(190,52,40,.15)}
.ib.success{background:var(--green-pale);border-color:rgba(33,135,93,.2)}
.ib-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.ib.tip .ib-title{color:var(--blue)}.ib.warning .ib-title{color:var(--gold)}.ib.important .ib-title{color:var(--red)}.ib.success .ib-title{color:var(--green)}
.ib p,.ib li{font-size:13px;line-height:1.75;color:var(--ink-mid)}
.ib ul{padding-left:1.2rem;margin-top:.3rem}

/* Badge */
.badge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:800}
.br{background:var(--red-pale);color:var(--red)}.bb{background:var(--blue-pale);color:var(--blue)}
.bg{background:var(--green-pale);color:var(--green)}.bo{background:rgba(185,137,47,.12);color:var(--gold)}

/* Back to top button */
.bttBtn{position:fixed;bottom:5.5rem;right:1.5rem;width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;border:none;font-size:18px;cursor:pointer;opacity:0;transition:opacity .3s;z-index:150;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(190,52,40,.3)}

/* Focus visible */
*:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* Dark mode extras */
[data-theme="dark"] .breadcrumb{background:var(--white);border-color:var(--border)}
[data-theme="dark"] .tbl th{background:rgba(255,255,255,.08)}
[data-theme="dark"] .tbl tr:hover td{background:rgba(255,255,255,.05)}
[data-theme="dark"] .cmp-table td{border-color:#333}
[data-theme="dark"] .cmp-table tr:nth-child(even) td{background:rgba(255,255,255,.03)}
[data-theme="dark"] .brand strong{color:var(--red)}
[data-theme="dark"] .btn-nav{background:#1e1e2e;border-color:#444;color:#ccc}
[data-theme="dark"] .card-grid .card{background:#1e1e2e;border-color:#333}
[data-theme="dark"] .tag{background:rgba(255,255,255,.1);color:#ccc}
[data-theme="dark"] .bttBtn{background:var(--red)}

/* ══════════════════════════════════════════════════════════════
   BOOK-STYLE DESIGN SYSTEM (Professional Kaigo Modules)
   Used by rewritten Kaigo modules for consistent book-like layout.
   ══════════════════════════════════════════════════════════════ */

/* Book Container */
.book{max-width:780px;margin:0 auto;padding:0 24px 80px;line-height:1.8;color:var(--ink,#2D2D2D);font-family:var(--body-font,'Outfit',-apple-system,sans-serif)}

/* Chapter Header */
.ch{background:linear-gradient(135deg,var(--ink,#2C3E50) 0%,#1A252F 100%);color:#fff;padding:60px 24px 48px;text-align:center;position:relative;overflow:hidden}
.ch::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(192,57,43,.1) 0%,transparent 50%);animation:bk-glow 8s ease-in-out infinite}
@keyframes bk-glow{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}
.ch-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;position:relative;z-index:1}
.ch-num{font-family:var(--serif-font,'Noto Serif JP',Georgia,serif);font-size:72px;font-weight:300;opacity:.15;position:absolute;top:20px;right:40px;line-height:1}
.ch-title{font-family:var(--serif-font,'Noto Serif JP',Georgia,serif);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;margin:0 0 8px;position:relative;z-index:1;line-height:1.2}
.ch-sub{font-size:16px;opacity:.8;margin:0;position:relative;z-index:1;font-weight:400}
.ch-meta{display:flex;justify-content:center;gap:24px;margin-top:24px;position:relative;z-index:1;flex-wrap:wrap}
.meta-i{display:flex;align-items:center;gap:6px;font-size:13px;opacity:.8}
.meta-ic{width:32px;height:32px;background:rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px}

/* Table of Contents */
.toc{background:var(--white);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:24px;margin:32px 0;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.toc-t{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mid,#6B7280);margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--border-light,#E8E4DF)}
.toc-list{list-style:none;padding:0;margin:0}
.toc-i{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--border-light,#E8E4DF);font-size:14px;color:var(--ink,#2D2D2D);text-decoration:none;transition:all .2s}
.toc-i:last-child{border-bottom:none}
.toc-i:hover{color:var(--red,#C0392B);padding-left:8px}
.toc-n{width:28px;height:28px;background:var(--red,#C0392B);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.toc-l{flex:1}

/* Book Section */
.bs{background:var(--white);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:32px;margin:24px 0;box-shadow:0 2px 12px rgba(0,0,0,.06);position:relative}
.bs::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red,#C0392B),#E74C3C);border-radius:12px 12px 0 0}

/* Section Header */
.bsh{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light,#E8E4DF)}
.bsi{width:40px;height:40px;background:var(--red,#C0392B);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.bst{font-family:var(--serif-font,'Noto Serif JP',Georgia,serif);font-size:1.3rem;font-weight:700;color:var(--ink,#2C3E50);margin:0}
.bsn{font-size:12px;font-weight:800;color:var(--red,#C0392B);text-transform:uppercase;letter-spacing:.1em}

/* Key Points Box */
.kp{background:linear-gradient(135deg,#FFF5F5 0%,#FFF0F0 100%);border:1px solid #FECACA;border-left:4px solid var(--red,#C0392B);border-radius:0 12px 12px 0;padding:20px 24px;margin:20px 0}
.kp-t{font-size:14px;font-weight:800;color:var(--red,#C0392B);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.kp ul{margin:0;padding-left:20px}
.kp li{font-size:14px;line-height:1.8;color:var(--ink,#2D2D2D);margin-bottom:6px}
.kp li::marker{color:var(--red,#C0392B)}

/* Vocab Grid (Book Style) */
.bvg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:16px 0}
.bvc{background:var(--cream,#FAFAF8);border:1px solid var(--border-light,#E8E4DF);border-radius:10px;padding:16px;transition:all .2s}
.bvc:hover{border-color:var(--red,#C0392B);box-shadow:0 4px 12px rgba(192,57,43,.1)}
.bvc-j{font-family:var(--serif-font,'Noto Serif JP',Georgia,serif);font-size:1.4rem;font-weight:700;color:var(--red,#C0392B);margin-bottom:4px}
.bvc-r{font-size:12px;color:var(--ink-mid,#6B7280);margin-bottom:6px}
.bvc-m{font-size:13px;color:var(--ink,#2D2D2D);line-height:1.5}
.bvc-e{font-size:11px;color:var(--ink-mid,#6B7280);margin-top:6px;padding-top:6px;border-top:1px dashed var(--border-light,#E8E4DF);font-style:italic;line-height:1.5}
.bvc-tts{display:inline-flex;align-items:center;gap:4px;background:var(--red,#C0392B);color:#fff;border:none;border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer;margin-top:8px;transition:all .2s}
.bvc-tts:hover{background:#E74C3C}

/* Dialog Container (Book Style) */
.bdc{background:var(--white);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;overflow:hidden;margin:16px 0}
.bdc-h{background:var(--ink,#2C3E50);color:#fff;padding:12px 20px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.bdc-b{padding:20px}
.bds{display:flex;gap:12px;margin-bottom:16px}
.bda{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;font-weight:700}
.bda-n{background:#E3F2FD;color:#1565C0}
.bda-d{background:#E8F5E9;color:#2E7D32}
.bda-p{background:#FFF3E0;color:#E65100}
.bdcn{flex:1;min-width:0}
.bdj{font-size:15px;line-height:1.7;color:var(--ink,#2D2D2D);margin-bottom:6px}
.bdi{font-size:13px;color:var(--ink-mid,#6B7280);line-height:1.6;padding-left:12px;border-left:2px solid var(--border-light,#E8E4DF)}
.bde{font-size:12px;color:var(--red,#C0392B);margin-top:8px;padding:10px;background:rgba(192,57,43,.05);border-radius:8px;line-height:1.6}
.bd-tts{background:none;border:1px solid var(--border-light,#E8E4DF);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer;margin-left:8px;transition:all .2s}
.bd-tts:hover{border-color:var(--red,#C0392B);color:var(--red,#C0392B)}

/* Quiz (Book Style) */
.bqc{background:var(--white);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:28px;margin:24px 0;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.bqh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--border-light,#E8E4DF)}
.bqt{font-size:16px;font-weight:800;color:var(--ink,#2C3E50);margin:0}
.bqp{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-mid,#6B7280)}
.bqpb{width:120px;height:6px;background:var(--border-light,#E8E4DF);border-radius:3px;overflow:hidden}
.bqpf{height:100%;background:var(--red,#C0392B);border-radius:3px;transition:width .3s ease}
.bq-o{display:grid;gap:10px}
.bq-b{background:var(--cream,#FAFAF8);border:2px solid var(--border-light,#E8E4DF);border-radius:10px;padding:14px 18px;font-size:14px;cursor:pointer;transition:all .2s;text-align:left;line-height:1.5}
.bq-b:hover{border-color:var(--red,#C0392B);background:#FFF5F5}
.bq-b.bq-ok{border-color:#27AE60;background:#F0FFF4;color:#155724}
.bq-b.bq-no{border-color:#E74C3C;background:#FFF5F5;color:#721C24}
.bq-e{background:#F8F9FA;border:1px solid var(--border-light,#E8E4DF);border-radius:10px;padding:16px 20px;margin-top:16px;font-size:13px;line-height:1.7;color:var(--ink-mid,#6B7280);display:none}
.bq-e.show{display:block}
.bq-e strong{color:var(--ink,#2D2D2D)}
.bq-n{display:flex;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light,#E8E4DF)}
.bqbtn{flex:1;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;border:none}
.bqbtn-p{background:var(--red,#C0392B);color:#fff}
.bqbtn-p:hover{background:#E74C3C}
.bqbtn-s{background:var(--cream,#FAFAF8);border:1px solid var(--border-light,#E8E4DF);color:var(--ink,#2D2D2D)}
.bqbtn-s:hover{border-color:var(--red,#C0392B)}

/* Summary Box */
.bsb{background:linear-gradient(135deg,#F8F9FA 0%,#F1F3F5 100%);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:24px;margin:24px 0}
.bsb-t{font-size:16px;font-weight:800;color:var(--ink,#2C3E50);margin:0 0 16px;display:flex;align-items:center;gap:8px}
.bsb-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.bsb-s{text-align:center;padding:16px;background:var(--white);border-radius:10px;border:1px solid var(--border-light,#E8E4DF)}
.bsb-sv{font-size:24px;font-weight:800;color:var(--red,#C0392B);margin-bottom:4px}
.bsb-sl{font-size:12px;color:var(--ink-mid,#6B7280);text-transform:uppercase;letter-spacing:.05em}

/* Module Navigation */
.bmn{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;border-top:2px solid var(--border-light,#E8E4DF)}
.bmn-a{flex:1;padding:16px 20px;background:var(--white);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;text-decoration:none;color:var(--ink,#2D2D2D);transition:all .2s}
.bmn-a:hover{border-color:var(--red,#C0392B);box-shadow:0 4px 12px rgba(192,57,43,.1)}
.bmn-al{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mid,#6B7280);margin-bottom:4px}
.bmn-at{font-size:14px;font-weight:700;color:var(--ink,#2C3E50)}

/* Note Box */
.bnote{background:#FFF8E1;border:1px solid #FFE082;border-left:4px solid #FFC107;border-radius:0 8px 8px 0;padding:16px 20px;margin:16px 0;font-size:13px;line-height:1.7}
.bnote-t{font-weight:800;color:#F57F17;margin-bottom:8px;display:flex;align-items:center;gap:6px}

/* Warning Box */
.bwarn{background:#FBE9E7;border:1px solid #FFCCBC;border-left:4px solid #FF5722;border-radius:0 8px 8px 0;padding:16px 20px;margin:16px 0;font-size:13px;line-height:1.7}
.bwarn-t{font-weight:800;color:#D84315;margin-bottom:8px;display:flex;align-items:center;gap:6px}

/* Step-by-Step */
.bstep{display:flex;gap:16px;margin:16px 0;align-items:flex-start}
.bstep-n{width:36px;height:36px;background:var(--red,#C0392B);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.bstep-c{flex:1}
.bstep-c h4{font-size:15px;font-weight:700;color:var(--ink,#2C3E50);margin:0 0 8px}
.bstep-c p{font-size:13px;color:var(--ink,#2D2D2D);margin:0 0 8px;line-height:1.7}
.bstep-c ul{margin:0;padding-left:20px;font-size:13px;line-height:1.7}
.bstep-c li{margin-bottom:4px}

/* Dark Mode Support (Book Style) */
[data-theme="dark"] .book{color:var(--ink,#E8E8E8)}
[data-theme="dark"] .ch{background:linear-gradient(135deg,#1A1B23 0%,#0D0E12 100%)}
[data-theme="dark"] .bs{background:#232430;border-color:#333440}
[data-theme="dark"] .toc{background:#232430;border-color:#333440}
[data-theme="dark"] .kp{background:linear-gradient(135deg,#2D1B1B 0%,#2D1B1B 100%);border-color:#5C3030}
[data-theme="dark"] .bvc{background:#1A1B23;border-color:#333440}
[data-theme="dark"] .bq-b:hover{background:#2D2D3E}
[data-theme="dark"] .bq-b.bq-ok{background:#1B3A1B}
[data-theme="dark"] .bq-b.bq-no{background:#3A1B2A}
[data-theme="dark"] .bdc{background:#232430;border-color:#333440}
[data-theme="dark"] .bdc-h{background:#1A1B23}
[data-theme="dark"] .bqc{background:#232430;border-color:#333440}
[data-theme="dark"] .bsb{background:#1A1B23}
[data-theme="dark"] .bsb-s{background:#232430;border-color:#333440}
[data-theme="dark"] .bmn-a{background:#232430;border-color:#333440}
[data-theme="dark"] .bnote{background:#2D2D1B;border-color:#5C5C30}
[data-theme="dark"] .bwarn{background:#2D1B1B;border-color:#5C3030}
[data-theme="dark"] .bq-e{background:#1A1B23}
[data-theme="dark"] .bda-n{background:#1A2535}
[data-theme="dark"] .bda-d{background:#1B3A1B}
[data-theme="dark"] .bda-p{background:#3A2B1B}

/* Legacy Quiz Class Aliases (for pages using short class names) */
.qc{background:var(--white);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:28px;margin:24px 0;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.qh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--border-light,#E8E4DF)}
.qt{font-size:16px;font-weight:800;color:var(--ink,#2C3E50);margin:0}
.qp{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-mid,#6B7280)}
.qpb{width:120px;height:6px;background:var(--border-light,#E8E4DF);border-radius:3px;overflow:hidden}
.qpf{height:100%;background:var(--red,#C0392B);border-radius:3px;transition:width .3s ease}
.qq{font-size:15px;font-weight:600;color:var(--ink,#2D2D2D);margin-bottom:16px;line-height:1.6}
.qo{display:grid;gap:10px}
.qb{background:var(--cream,#FAFAF8);border:2px solid var(--border-light,#E8E4DF);border-radius:10px;padding:14px 18px;font-size:14px;cursor:pointer;transition:all .2s;text-align:left;line-height:1.5}
.qb:hover{border-color:var(--red,#C0392B);background:#FFF5F5}
.qb.ok{border-color:#27AE60;background:#F0FFF4;color:#155724}
.qb.no{border-color:#E74C3C;background:#FFF5F5;color:#721C24}
.qe{background:#F8F9FA;border:1px solid var(--border-light,#E8E4DF);border-radius:10px;padding:16px 20px;margin-top:16px;font-size:13px;line-height:1.7;color:var(--ink-mid,#6B7280);display:none}
.qe.show{display:block}
.qe strong{color:var(--ink,#2D2D2D)}
.qn{display:flex;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light,#E8E4DF)}
.qbtn{flex:1;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;border:none}
.qbtn-p{background:var(--red,#C0392B);color:#fff}
.qbtn-p:hover{background:#E74C3C}
.qbtn-s{background:var(--cream,#FAFAF8);border:1px solid var(--border-light,#E8E4DF);color:var(--ink,#2D2D2D)}
.qbtn-s:hover{border-color:var(--red,#C0392B)}

/* Legacy Dialog Class Aliases */
.da{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;font-weight:700}
.da-n{background:#E3F2FD;color:#1565C0}
.da-d{background:#E8F5E9;color:#2E7D32}
.da-p{background:#FFF3E0;color:#E65100}
.dcon{flex:1;min-width:0}
.djp{font-size:15px;line-height:1.7;color:var(--ink,#2D2D2D);margin-bottom:6px}
.did{font-size:13px;color:var(--ink-mid,#6B7280);line-height:1.6;padding-left:12px;border-left:2px solid var(--border-light,#E8E4DF)}
.dexp{font-size:12px;color:var(--red,#C0392B);margin-top:8px;padding:10px;background:rgba(192,57,43,.05);border-radius:8px;line-height:1.6}
.d-tts{background:none;border:1px solid var(--border-light,#E8E4DF);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer;margin-left:8px;transition:all .2s}
.d-tts:hover{border-color:var(--red,#C0392B);color:var(--red,#C0392B)}

/* Legacy Vocab Class Aliases */
.vg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:16px 0}
.vc{background:var(--cream,#FAFAF8);border:1px solid var(--border-light,#E8E4DF);border-radius:10px;padding:16px;transition:all .2s}
.vc:hover{border-color:var(--red,#C0392B);box-shadow:0 4px 12px rgba(192,57,43,.1)}
.vc-j{font-family:var(--serif-font,'Noto Serif JP',Georgia,serif);font-size:1.4rem;font-weight:700;color:var(--red,#C0392B);margin-bottom:4px}
.vc-r{font-size:12px;color:var(--ink-mid,#6B7280);margin-bottom:6px}
.vc-m{font-size:13px;color:var(--ink,#2D2D2D);line-height:1.5}
.vc-e{font-size:11px;color:var(--ink-mid,#6B7280);margin-top:6px;padding-top:6px;border-top:1px dashed var(--border-light,#E8E4DF);font-style:italic;line-height:1.5}
.vc-tts{display:inline-flex;align-items:center;gap:4px;background:var(--red,#C0392B);color:#fff;border:none;border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer;margin-top:8px;transition:all .2s}
.vc-tts:hover{background:#E74C3C}

/* Legacy Box & Content Class Aliases */
.box{background:var(--white,#FFF);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:20px;margin:16px 0}
.box-title{font-size:15px;font-weight:700;color:var(--ink,#2C3E50);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-light,#E8E4DF)}
.content{max-width:780px;margin:0 auto;padding:0 24px 40px;line-height:1.8}
.module-nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding:16px;background:var(--white,#FFF);border:1px solid var(--border-light,#E8E4DF);border-radius:10px}
.mod-link{padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;color:var(--ink,#2D2D2D);background:var(--cream,#FAFAF8);border:1px solid var(--border-light,#E8E4DF);transition:all .2s}
.mod-link:hover,.mod-link.active{background:var(--red,#C0392B);color:#fff;border-color:var(--red,#C0392B)}
.nxt{display:inline-flex;align-items:center;gap:6px;padding:12px 20px;background:var(--red,#C0392B);color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;transition:all .2s}
.nxt:hover{filter:brightness(1.1);transform:translateX(4px)}
.lv-badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:800;background:var(--blue-pale,#E3F2FD);color:var(--blue,#1565C0)}
.d-role{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700;background:#F3E5F5;color:#7B1FA2;flex-shrink:0}
.d-text{font-size:14px;line-height:1.7;color:var(--ink,#2D2D2D);flex:1}
.d-turn{display:flex;gap:12px;margin:12px 0;align-items:flex-start}

/* Legacy Quiz Button & Feedback Aliases */
.q-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s;background:var(--red,#C0392B);color:#fff}
.q-btn:hover{filter:brightness(1.1)}
.q-fb{padding:12px 16px;border-radius:10px;font-size:13px;line-height:1.6;margin-top:12px;display:none}
.q-fb.show{display:block}
.q-fb.correct{background:#E8F5E9;border:1px solid #A5D6A7;color:#1B5E20}
.q-fb.wrong{background:#FFEBEE;border:1px solid #EF9A9A;color:#C62828}
.q-nav{display:flex;gap:12px;margin-top:16px}

/* Legacy Check Card Aliases */
.check-card{background:var(--white,#FFF);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:20px;margin:12px 0}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:16px 0}
.check-items{display:flex;flex-direction:column;gap:8px}
.check-items label{display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .2s}
.check-items label:hover{background:rgba(0,0,0,.04)}
.check-items input[type=checkbox]{width:18px;height:18px;accent-color:var(--red,#C0392B)}
[data-theme="dark"] .check-card{background:#232430;border-color:#333440}
[data-theme="dark"] .check-items label:hover{background:rgba(255,255,255,.05)}

/* Legacy Dialog Card Aliases */
.dialog-card{background:var(--white,#FFF);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:20px;margin:12px 0}
.dialog-title{font-size:15px;font-weight:700;color:var(--ink,#2C3E50);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-light,#E8E4DF)}
.dl{display:flex;gap:12px;margin:12px 0;align-items:flex-start}

/* Legacy Quiz Alt Aliases */
.q-opts{display:grid;gap:8px;margin:12px 0}
.q-text{font-size:15px;font-weight:600;color:var(--ink,#2D2D2D);margin-bottom:12px;line-height:1.6}
.q-title{font-size:16px;font-weight:800;color:var(--ink,#2C3E50);margin:0 0 12px}
[data-theme="dark"] .dialog-card{background:#232430;border-color:#333440}

/* Legacy Dialog & Method Aliases */
.id{font-size:13px;color:var(--ink-mid,#6B7280);line-height:1.6;margin-top:4px}
.jp{font-size:14px;color:var(--ink,#2D2D2D);line-height:1.7;font-weight:500}
.method-body{font-size:13px;line-height:1.7;color:var(--ink,#2D2D2D);margin-top:8px}

/* Legacy Quiz Wrap Aliases */
.quiz-wrap{background:var(--white,#FFF);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:20px;margin:16px 0}
.rst{font-size:13px;color:var(--ink-mid,#6B7280);margin-top:8px;padding:12px;background:var(--cream,#FAFAF8);border-radius:8px}
.rst.show{display:block}
.sec-desc{font-size:14px;color:var(--ink-mid,#6B7280);line-height:1.7;margin-bottom:16px}
.red{color:#E74C3C;font-weight:700}
[data-theme="dark"] .quiz-wrap{background:#232430;border-color:#333440}
[data-theme="dark"] .rst{background:#1A1B23}

/* Legacy Method Card Aliases */
.method-card{background:var(--white,#FFF);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:20px;margin:12px 0}
.method-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:16px 0}
.method-title{font-size:15px;font-weight:700;color:var(--ink,#2C3E50);margin-bottom:8px}
[data-theme="dark"] .method-card{background:#232430;border-color:#333440}
[data-theme="dark"] .box{background:#232430;border-color:#333440}
[data-theme="dark"] .content{color:var(--ink,#E8E8E8)}
[data-theme="dark"] .module-nav{background:#232430;border-color:#333440}
[data-theme="dark"] .mod-link{background:#1A1B23;border-color:#333;color:#ccc}
[data-theme="dark"] .mod-link:hover,.mod-link.active{background:#C0392B;color:#fff}

/* Legacy Step & Note Class Aliases */
.step{display:flex;gap:16px;margin:16px 0;align-items:flex-start}
.step-n{width:36px;height:36px;background:var(--red,#C0392B);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.step-c{flex:1}
.step-c h4{font-size:15px;font-weight:700;color:var(--ink,#2C3E50);margin:0 0 8px}
.step-c p{font-size:13px;color:var(--ink,#2D2D2D);margin:0 0 8px;line-height:1.7}
.step-c ul{margin:0;padding-left:20px;font-size:13px;line-height:1.7}
.step-c li{margin-bottom:4px}
.note{background:#FFF8E1;border:1px solid #FFE082;border-left:4px solid #FFC107;border-radius:0 8px 8px 0;padding:16px 20px;margin:16px 0;font-size:13px;line-height:1.7}
.note-t{font-weight:800;color:#F57F17;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.warn-t{font-weight:800;color:#D84315;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sb{background:linear-gradient(135deg,#F8F9FA 0%,#F1F3F5 100%);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;padding:24px;margin:24px 0}
.sb-t{font-size:16px;font-weight:800;color:var(--ink,#2C3E50);margin:0 0 16px;display:flex;align-items:center;gap:8px}
.sb-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.sb-s{text-align:center;padding:16px;background:var(--white);border-radius:10px;border:1px solid var(--border-light,#E8E4DF)}
.sb-sv{font-size:24px;font-weight:800;color:var(--red,#C0392B);margin-bottom:4px}
.sb-sl{font-size:12px;color:var(--ink-mid,#6B7280);text-transform:uppercase;letter-spacing:.05em}
.mn{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;border-top:2px solid var(--border-light,#E8E4DF)}
.mn-a{flex:1;padding:16px 20px;background:var(--white);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;text-decoration:none;color:var(--ink,#2D2D2D);transition:all .2s}
.mn-a:hover{border-color:var(--red,#C0392B);box-shadow:0 4px 12px rgba(192,57,43,.1)}
.mn-al{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mid,#6B7280);margin-bottom:4px}
.mn-at{font-size:14px;font-weight:700;color:var(--ink,#2C3E50)}
.dc{background:var(--white);border:1px solid var(--border-light,#E8E4DF);border-radius:12px;overflow:hidden;margin:16px 0}
.dc-h{background:var(--ink,#2C3E50);color:#fff;padding:12px 20px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.dc-b{padding:20px}
.ds{display:flex;gap:12px;margin-bottom:16px}

/* Dark mode aliases */
[data-theme="dark"] .qc,[data-theme="dark"] .dc{background:#232430;border-color:#333440}
[data-theme="dark"] .dc-h{background:#1A1B23}
[data-theme="dark"] .qb:hover{background:#2D2D3E}
[data-theme="dark"] .qb.ok{background:#1B3A1B}
[data-theme="dark"] .qb.no{background:#3A1B2A}
[data-theme="dark"] .qe{background:#1A1B23}
[data-theme="dark"] .sb{background:#1A1B23}
[data-theme="dark"] .sb-s{background:#232430;border-color:#333440}
[data-theme="dark"] .mn-a{background:#232430;border-color:#333440}
[data-theme="dark"] .vc{background:#1A1B23;border-color:#333440}
[data-theme="dark"] .note{background:#2D2D1B;border-color:#5C5C30}
[data-theme="dark"] .warn{background:#2D1B1B;border-color:#5C3030}
[data-theme="dark"] .bmn-a{background:#232430;border-color:#333440}
[data-theme="dark"] .da-n{background:#1A2535}
[data-theme="dark"] .da-d{background:#1B3A1B}
[data-theme="dark"] .da-p{background:#3A2B1B}

/* ══════════════════════════════════════════════════════════════
   ILLUSTRATION DESIGN SYSTEM
   Professional SVG illustrations for all Kaigo modules.
   ══════════════════════════════════════════════════════════════ */

/* Illustration Container */
.km-illustration{display:block;max-width:560px;width:100%;height:auto;margin:0 auto 32px;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.08);border:1px solid var(--ba,#E5E7EB);transition:all .3s}
.km-illustration:hover{box-shadow:0 8px 32px rgba(0,0,0,.12);transform:translateY(-2px)}
.km-illustration img,.km-illustration svg{display:block;width:100%;height:auto}
.km-illustration figcaption{padding:12px 16px;font-size:13px;color:#6B7280;text-align:center;background:var(--bk,#F9FAFB);border-top:1px solid var(--ba,#E5E7EB);line-height:1.5}
.km-illustration figcaption strong{color:var(--ink,#2C3E50)}

/* Illustration Categories */
.illu-medical{border-top:4px solid #DC2626}
.illu-care{border-top:4px solid #16A34A}
.illu-safety{border-top:4px solid #D97706}
.illu-comm{border-top:4px solid #7C3AED}
.illu-social{border-top:4px solid #2563EB}
.illu-exam{border-top:4px solid #0891B2}

/* Illustration Caption Variants */
.km-illustration .cap-jp{font-family:var(--serif-font,'Noto Serif JP',Georgia,serif);font-size:15px;font-weight:700;color:var(--ink,#2C3E50)}
.km-illustration .cap-id{font-size:12px;color:var(--ink-mid,#6B7280);margin-top:2px}

/* Responsive Illustration */
@media(max-width:480px){
  .km-illustration{border-radius:12px;margin:0 auto 24px}
  .km-illustration figcaption{padding:10px 14px;font-size:12px}
}

/* Dark Mode Illustration */
[data-theme="dark"] .km-illustration{box-shadow:0 4px 24px rgba(0,0,0,.4);border-color:#333440}
[data-theme="dark"] .km-illustration:hover{box-shadow:0 8px 32px rgba(0,0,0,.5)}
[data-theme="dark"] .km-illustration figcaption{background:#1A1B23;border-color:#333440;color:#9CA3AF}
[data-theme="dark"] .km-illustration figcaption strong{color:#E8E8E8}

/* Print Illustration */
@media print{
  .km-illustration{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
  .km-illustration figcaption{background:#f5f5f5}
}
/* ══════════════════════════════════════════════════════════════
   DARK MODE CONTRAST FIXES — All hard-coded text colors
   ══════════════════════════════════════════════════════════════ */

/* --- Section header (used in book-style .bs children) --- */
.sh{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light,#E8E4DF)}
.si{width:40px;height:40px;background:var(--red,#C0392B);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sn{font-size:12px;font-weight:800;color:var(--red,#C0392B);text-transform:uppercase;letter-spacing:.1em}
.st{font-size:1.3rem;font-weight:700;color:var(--ink,#2C3E50);margin:0}

/* --- Section title (.st used in book sections) --- */
[data-theme="dark"] .sh{border-color:#333440}
[data-theme="dark"] .si{background:#C0392B}
[data-theme="dark"] .sn{color:#E74C3C}
[data-theme="dark"] .st{color:#E8E8E8}

/* --- Warning & Error text colors (invisible on dark bg) --- */
[data-theme="dark"] .warn{color:#FF8A65}
[data-theme="dark"] .err{color:#EF9A9A}
[data-theme="dark"] .bnote-t{color:#FFD54F}
[data-theme="dark"] .bwarn-t{color:#FF8A65}

/* --- Note & Warning box dark overrides --- */
[data-theme="dark"] .note-t{color:#FFD54F}
[data-theme="dark"] .warn-t{color:#FF8A65}

/* --- Quiz correct/incorrect text (dark greens/reds invisible on dark bg) --- */
[data-theme="dark"] .qopt.correct{background:#1B3A1B;border-color:#4caf50;color:#A5D6A7}
[data-theme="dark"] .qopt.wrong{background:#3A1B2B;border-color:#e91e63;color:#F48FB1}
[data-theme="dark"] .qb.ok{background:#1B3A1B;border-color:#4caf50;color:#A5D6A7}
[data-theme="dark"] .qb.no{background:#3A1B2B;border-color:#e91e63;color:#F48FB1}
[data-theme="dark"] .bq-b.bq-ok{background:#1B3A1B;border-color:#4caf50;color:#A5D6A7}
[data-theme="dark"] .bq-b.bq-no{background:#3A1B2B;border-color:#e91e63;color:#F48FB1}

/* --- Table cell dark overrides --- */
[data-theme="dark"] .tbl-cell-sm{color:#D0CFC9}
[data-theme="dark"] .tbl td{color:#D0CFC9;border-color:#333440}
[data-theme="dark"] .tbl{border-color:#333440}

/* --- Section h3 in old templates --- */
[data-theme="dark"] .sec h3{color:#E8E8E8}

/* --- Tip box dark mode --- */
[data-theme="dark"] .tip{background:#1B3A1B;border-color:#4caf50;color:#A5D6A7}

/* --- Enriched card content dark text --- */
[data-theme="dark"] .enriched-card h3{color:#CE93D8}
[data-theme="dark"] .enriched-card th{color:#CE93D8}
[data-theme="dark"] .enriched-card td{color:#D0CFC9}

/* --- Dialog section dark mode --- */
[data-theme="dark"] .dlg-header{color:#CE93D8;border-color:#4A148C}
[data-theme="dark"] .dlg-card-title{color:#CE93D8;border-color:#4A148C}
[data-theme="dark"] .dlg-role{background:#4A148C;color:#E8E8E8}
[data-theme="dark"] .dlg-jp{color:#E8E8E8}
[data-theme="dark"] .dlg-id{color:#9A9890}

/* --- Dialog card dark text --- */
[data-theme="dark"] .dialog-title{color:#E8E8E8}
[data-theme="dark"] .d-text{color:#E8E8E8}
[data-theme="dark"] .d-role{background:#4A148C;color:#E8E8E8}
[data-theme="dark"] .dialog-card{background:#232430;border-color:#333440}
[data-theme="dark"] .dlg-jp{color:#E8E8E8}

/* --- Method card dark mode --- */
[data-theme="dark"] .method-title{color:#E8E8E8}
[data-theme="dark"] .method-body{color:#D0CFC9}

/* --- Box title dark --- */
[data-theme="dark"] .box-title{color:#E8E8E8}

/* --- Legacy quiz text colors --- */
[data-theme="dark"] .q-text{color:#E8E8E8}
[data-theme="dark"] .q-title{color:#E8E8E8}

/* --- Legacy step & content dark text --- */
[data-theme="dark"] .step-c h4{color:#E8E8E8}
[data-theme="dark"] .step-c p{color:#D0CFC9}
[data-theme="dark"] .step-c li{color:#D0CFC9}
[data-theme="dark"] .jp{color:#E8E8E8}
[data-theme="dark"] .id{color:#9A9890}
[data-theme="dark"] .sec-desc{color:#9A9890}

/* --- Subtitle & meta dark mode --- */
[data-theme="dark"] .sub{color:#9A9890}
[data-theme="dark"] .kv b{color:#FFD54F}

/* --- Breadcrumb dark mode --- */
[data-theme="dark"] .breadcrumb{background:#1A1B23;color:#9A9890}
[data-theme="dark"] .breadcrumb a{color:#9A9890}

/* --- Check items dark mode --- */
[data-theme="dark"] .check-items label{color:#D0CFC9}

/* --- Quiz question dark text --- */
[data-theme="dark"] .qq{color:#E8E8E8}
[data-theme="dark"] .qe{color:#9A9890}
[data-theme="dark"] .qe strong{color:#E8E8E8}
[data-theme="dark"] .dexp{color:#FF8A65}
[data-theme="dark"] .djp{color:#E8E8E8}
[data-theme="dark"] .did{color:#9A9890}

/* --- Summary box dark --- */
[data-theme="dark"] .sb-t{color:#E8E8E8}
[data-theme="dark"] .sb-sl{color:#9A9890}

/* --- Module nav dark --- */
[data-theme="dark"] .mn-al{color:#9A9890}
[data-theme="dark"] .mn-at{color:#E8E8E8}
[data-theme="dark"] .bmn-al{color:#9A9890}
[data-theme="dark"] .bmn-at{color:#E8E8E8}

/* --- BVC (book vocab cards) dark text --- */
[data-theme="dark"] .bvc-r{color:#9A9890}
[data-theme="dark"] .bvc-m{color:#D0CFC9}
[data-theme="dark"] .bvc-e{color:#9A9890}

/* --- VC (legacy vocab cards) dark text --- */
[data-theme="dark"] .vc-r{color:#9A9890}
[data-theme="dark"] .vc-m{color:#D0CFC9}
[data-theme="dark"] .vc-e{color:#9A9890}

/* --- RST (quiz results) dark --- */
[data-theme="dark"] .rst{color:#D0CFC9}

/* --- Quiz navigation dark --- */
[data-theme="dark"] .qbtn-s{background:#232430;border-color:#333440;color:#D0CFC9}
[data-theme="dark"] .bqbtn-s{background:#232430;border-color:#333440;color:#D0CFC9}

/* --- Red color class dark mode --- */
[data-theme="dark"] .red{color:#EF9A9A}

/* --- Vocab term clickable dark mode --- */
[data-theme="dark"] .vocab-term{color:#CE93D8}
[data-theme="dark"] .vocab-meaning{color:#D0CFC9}

/* --- Breadcrumb dark --- */
[data-theme="dark"] .breadcrumb a:hover{color:#FF8A65}

/* --- Dark mode for .ib (info box) --- */
[data-theme="dark"] .ib p,[data-theme="dark"] .ib li{color:#D0CFC9}
[data-theme="dark"] .ib-title{color:#FFD54F}
[data-theme="dark"] .ib.tip .ib-title{color:#64B5F6}
[data-theme="dark"] .ib.warning .ib-title{color:#FFD54F}
[data-theme="dark"] .ib.important .ib-title{color:#EF9A9A}
[data-theme="dark"] .ib.success .ib-title{color:#A5D6A7}

/* --- Kicker dark mode --- */
[data-theme="dark"] .kicker{color:#EF9A9A;background:rgba(239,154,154,.15)}

/* --- Hero desc dark mode --- */
[data-theme="dark"] .hero-desc{color:rgba(255,255,255,.7)}
[data-theme="dark"] .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}

/* --- Cmp table dark --- */
[data-theme="dark"] .cmp-table th{background:#1A1B23;color:#FFD54F;border-color:#333440}
[data-theme="dark"] .cmp-table td{color:#D0CFC9}

/* --- KD (knowledge detail) dark mode --- */
[data-theme="dark"] .q-fb.correct{background:#1B3A1B;border-color:#4caf50;color:#A5D6A7}
[data-theme="dark"] .q-fb.wrong{background:#3A1B2B;border-color:#e91e63;color:#F48FB1}

/* --- Quiz wrap dark text --- */
[data-theme="dark"] .quiz-wrap{color:#D0CFC9}

/* --- OL items in dark mode --- */
[data-theme="dark"] .kp li{color:#D0CFC9}
[data-theme="dark"] .kp li::marker{color:#FF8A65}
[data-theme="dark"] .bstep-c h4{color:#E8E8E8}
[data-theme="dark"] .bstep-c p{color:#D0CFC9}
[data-theme="dark"] .bstep-c li{color:#D0CFC9}

/* --- Meta items dark mode --- */
[data-theme="dark"] .meta-i{color:#D0CFC9}

/* --- TOC dark mode --- */
[data-theme="dark"] .toc-i{color:#D0CFC9;border-color:#333440}
[data-theme="dark"] .toc-i:hover{color:#FF8A65}
[data-theme="dark"] .toc-t{color:#9A9890;border-color:#333440}

/* ══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDE FIXES — kyoto-theme !important overrides
   These override the kyoto-theme.css !important rules that force
   dark colors on quiz buttons and other interactive elements.
   ══════════════════════════════════════════════════════════════ */

/* --- Quiz buttons: force light text in dark mode --- */
[data-theme="dark"] .qb{color:#D0CFC9 !important;background:#232430 !important;border-color:#333440 !important}
[data-theme="dark"] .qb:hover{background:#2D2D3E !important;border-color:#C0392B !important;color:#E8E8E8 !important}
[data-theme="dark"] .qb.ok{background:#1B3A1B !important;border-color:#4caf50 !important;color:#A5D6A7 !important}
[data-theme="dark"] .qb.no{background:#3A1B2B !important;border-color:#e91e63 !important;color:#F48FB1 !important}

/* --- BQ buttons (book-style quiz) --- */
[data-theme="dark"] .bq-b{color:#D0CFC9 !important;background:#232430 !important;border-color:#333440 !important}
[data-theme="dark"] .bq-b:hover{background:#2D2D3E !important;border-color:#C0392B !important;color:#E8E8E8 !important}

/* --- All card-like elements in .book: force readable text --- */
[data-theme="dark"] .book p{color:#D0CFC9}
[data-theme="dark"] .book strong{color:#E8E8E8}
[data-theme="dark"] .book ul{color:#D0CFC9}
[data-theme="dark"] .book li{color:#D0CFC9}

/* --- Vocab card dark text (override kyoto card colors) --- */
[data-theme="dark"] .vc{color:#D0CFC9 !important;background:#1A1B23 !important}
[data-theme="dark"] .vc-j{color:#C89B3C !important}
[data-theme="dark"] .bvc{color:#D0CFC9 !important;background:#1A1B23 !important}
[data-theme="dark"] .bvc-j{color:#C89B3C !important}

/* --- Key points box: ensure text is readable --- */
[data-theme="dark"] .kp{background:linear-gradient(135deg,#2D1B1B 0%,#2D1B1B 100%) !important;border-color:#5C3030 !important}
[data-theme="dark"] .kp-t{color:#FF8A65 !important}
[data-theme="dark"] .kp li{color:#D0CFC9 !important}

/* --- Note and warn boxes: text readable --- */
[data-theme="dark"] .note{background:#2D2D1B !important;border-color:#5C5C30 !important;color:#D0CFC9 !important}
[data-theme="dark"] .warn{background:#2D1B1B !important;border-color:#5C3030 !important;color:#FF8A65 !important}

/* --- Dialog avatars always visible --- */
[data-theme="dark"] .da{color:#E8E8E8 !important}
[data-theme="dark"] .da-n{background:#1A2535 !important;color:#64B5F6 !important}
[data-theme="dark"] .da-d{background:#1B3A1B !important;color:#A5D6A7 !important}
[data-theme="dark"] .da-p{background:#3A2B1B !important;color:#FFAB91 !important}

/* --- Dialog text visible in dark mode --- */
[data-theme="dark"] .djp{color:#E8E8E8 !important}
[data-theme="dark"] .did{color:#9A9890 !important}
[data-theme="dark"] .dexp{color:#FF8A65 !important}

/* --- Dialog header always dark --- */
[data-theme="dark"] .dc-h{background:#1A1B23 !important;color:#E8E8E8 !important}

/* --- Step number always visible --- */
[data-theme="dark"] .step-n{background:#C89B3C !important;color:#1A1209 !important}
[data-theme="dark"] .bstep-n{background:#C89B3C !important;color:#1A1209 !important}

/* --- Step content readable --- */
[data-theme="dark"] .step-c h4{color:#E8E8E8 !important}
[data-theme="dark"] .step-c p{color:#D0CFC9 !important}
[data-theme="dark"] .step-c li{color:#D0CFC9 !important}

/* --- Quiz feedback visible --- */
[data-theme="dark"] .qe{background:#1A1B23 !important;color:#9A9890 !important}
[data-theme="dark"] .qe strong{color:#E8E8E8 !important}
[data-theme="dark"] .qq{color:#E8E8E8 !important}

/* --- Summary stats --- */
[data-theme="dark"] .sb-sv{color:#C89B3C !important}
[data-theme="dark"] .sb-sl{color:#9A9890 !important}

/* --- Section titles --- */
[data-theme="dark"] .st{color:#E8E8E8 !important}
[data-theme="dark"] .sn{color:#E74C3C !important}
[data-theme="dark"] .toc-n{background:#C0392B !important}

/* --- Module navigation links --- */
[data-theme="dark"] .mn-a{color:#D0CFC9 !important}
[data-theme="dark"] .mn-at{color:#E8E8E8 !important}
[data-theme="dark"] .mn-al{color:#9A9890 !important}
[data-theme="dark"] .bmn-a{color:#D0CFC9 !important}
[data-theme="dark"] .bmn-at{color:#E8E8E8 !important}
[data-theme="dark"] .bmn-al{color:#9A9890 !important}

/* --- Section header border --- */
[data-theme="dark"] .sh{border-color:#333440 !important}

/* ══════════════════════════════════════════════════════════════
   KAIGO FOOTER STYLES — Replaces inline styles in all Kaigo modules
   ══════════════════════════════════════════════════════════════ */

.kaigo-footer{background:var(--ink);color:#fff;padding:40px 20px;text-align:center}
.kaigo-footer-inner{max-width:800px;margin:0 auto}
.kaigo-footer-title{font-weight:700;margin-bottom:12px}
.kaigo-footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.kaigo-footer-link{color:rgba(255,255,255,.6);text-decoration:none}
.kaigo-footer-link:hover{color:rgba(255,255,255,.9)}
.kaigo-footer-copy{font-size:12px;color:rgba(255,255,255,.4)}

/* Dark mode footer */
[data-theme="dark"] .kaigo-footer{background:#0D0E12}
[data-theme="dark"] .kaigo-footer-link{color:rgba(255,255,255,.5)}
[data-theme="dark"] .kaigo-footer-link:hover{color:#C89B3C}