/* ===== N2 BUNPOU THEME OVERRIDE =====
   Mengubah tema pink N1 → biru N2, dan beberapa penyesuaian
   khusus untuk tata bahasa (pola lebih panjang dari kata tunggal). */

:root {
  --n2-primary: #1976d2;
  --n2-primary-dark: #0d47a1;
  --n2-primary-light: #bbdefb;
  --n2-accent: #ff6f00;
  --n2-toc-hover: #e3f2fd;
  --n2-example-bg: #f5f9ff;
  --n2-tip-bg: #fff8e1;
  --n2-plus-bg: #f3e5f5;
  --n2-plus-border: #9c27b0;
  --n2-highlight-bg: rgba(255, 224, 130, .6);
}

/* Dark mode: ganti palet biru-muda/kuning-pastel agar tidak menyala
   menabrak background gelap, dan jaga kontras teks tetap nyaman. */
[data-theme="dark"] {
  --n2-primary: #5b9bd9;
  --n2-primary-dark: #90caf9;
  --n2-primary-light: #2c4a6e;
  --n2-toc-hover: rgba(25, 118, 210, .18);
  --n2-example-bg: rgba(25, 118, 210, .12);
  --n2-tip-bg: rgba(255, 111, 0, .15);
  --n2-plus-bg: rgba(156, 39, 176, .16);
  --n2-plus-border: #ce93d8;
  --n2-highlight-bg: rgba(255, 213, 79, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n2-primary: #5b9bd9;
    --n2-primary-dark: #90caf9;
    --n2-primary-light: #2c4a6e;
    --n2-toc-hover: rgba(25, 118, 210, .18);
    --n2-example-bg: rgba(25, 118, 210, .12);
    --n2-tip-bg: rgba(255, 111, 0, .15);
    --n2-plus-bg: rgba(156, 39, 176, .16);
    --n2-plus-border: #ce93d8;
    --n2-highlight-bg: rgba(255, 213, 79, .35);
  }
}

/* Theme color overrides — sapu sebagian warna pink jadi biru */
.sec-label {
  background: var(--n2-primary) !important;
  color: #fff !important;
  opacity: 1 !important;
}
.section-header {
  background: var(--n2-primary-light) !important;
  color: var(--n2-primary-dark) !important;
  border-left: 4px solid var(--n2-primary) !important;
}
.section-header .sec-kanji,
.section-header:not(:has(.sec-num-badge)) {
  color: var(--n2-primary-dark) !important;
}
.section-header .sec-num-badge {
  background: var(--n2-primary) !important;
  color: #fff !important;
}
[data-theme="dark"] .section-header {
  background: rgba(25, 118, 210, .15) !important;
  border-left-color: var(--n2-primary) !important;
}
[data-theme="dark"] .section-header .sec-kanji,
[data-theme="dark"] .section-header:not(:has(.sec-num-badge)) {
  color: var(--n2-primary-dark) !important;
}
.card-num {
  background: var(--n2-primary-light) !important;
  color: var(--n2-primary-dark) !important;
  border-right: 2px solid var(--n2-primary-light) !important;
  font-size: 14px !important;
  min-width: 36px !important;
}
[data-theme="dark"] .card-num {
  background: rgba(25, 118, 210, .18) !important;
  color: var(--n2-primary-dark) !important;
  border-right-color: rgba(25, 118, 210, .25) !important;
}
.word-card:hover {
  border-color: var(--n2-primary-light) !important;
}
.toc h2 {
  color: var(--n2-primary) !important;
  border-bottom-color: var(--n2-primary-light) !important;
}
.toc-num {
  background: var(--n2-primary) !important;
}
.toc-row:hover {
  border-color: var(--n2-primary-light) !important;
  background: var(--n2-toc-hover) !important;
}
.toc-kanji {
  color: var(--n2-primary) !important;
}
.nav-title {
  color: var(--n2-primary) !important;
}
.page-nav a:not(.disabled),
.bottom-nav a:not(.disabled) {
  color: var(--n2-primary) !important;
}
.bottom-nav a:not(.disabled):not(.home) {
  background: var(--n2-primary) !important;
  color: #fff !important;
}
.chapter-banner {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 50%, #0d47a1 100%) !important;
}
[data-theme="dark"] .chapter-banner {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%) !important;
}
.book-header {
  background: var(--n2-primary) !important;
}
.book-header h1 {
  color: #fff !important;
}
.chapter-card:hover .chapter-num-badge {
  background: var(--n2-primary) !important;
}
.chapter-num-badge {
  background: var(--n2-primary) !important;
}
.chapter-kanji {
  color: var(--n2-primary-dark) !important;
}

/* Pola tata bahasa ditampilkan lebih besar */
/* Judul pola: font lebih kecil agar pola panjang muat 1–2 baris, bukan 3 */
/* PENTING: warna pakai --word-jp-color dari Reading Toolbar (bisa diubah user).
   --n2-primary-dark hanya fallback jika user belum memilih warna khusus. */
.word-jp {
  font-size: 1.15em !important;
  line-height: 1.4 !important;
  color: var(--word-jp-color, var(--n2-primary-dark)) !important;
  font-weight: 700 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
/* Pastikan ruby base text (kanji utama di dalam <ruby>) ikut warna word-jp.
   Beberapa browser tidak mewarisi color dari parent ke ruby base. */
.word-jp ruby,
.word-jp ruby rb {
  color: inherit !important;
}
/* Ruby di judul pola */
.word-jp ruby {
  line-height: normal;
  ruby-overhang: auto;
}
.word-jp rt {
  font-size: 8px !important;
  letter-spacing: 0px !important;
  line-height: 1 !important;
  white-space: nowrap;
  ruby-align: center;
}
.word-id-ind {
  font-size: 0.95em !important;
}

/* POS badge khusus untuk 文型 */
.pos-badge {
  background: var(--n2-primary) !important;
  color: white !important;
}

/* Example box dengan border biru */
.example-box {
  border-left: 4px solid var(--n2-primary) !important;
  background: var(--n2-example-bg) !important;
}

/* Tip box */
.tip-box {
  background: var(--n2-tip-bg) !important;
  border-left: 4px solid var(--n2-accent) !important;
}

/* Plus box (接続 & 意味) */
.plus-box {
  background: var(--n2-plus-bg) !important;
  border-left: 4px solid var(--n2-plus-border) !important;
  line-height: 1.7 !important;
}

/* Highlight (kata kunci yang ditekankan di kalimat contoh) — biru aksen tetap,
   tidak ikut warna kanji pilihan user karena fungsinya sebagai penanda. */
.highlight {
  background: linear-gradient(transparent 60%, var(--n2-highlight-bg) 60%) !important;
  font-weight: 700 !important;
  color: var(--n2-primary-dark) !important;
}


/* ===== LAYOUT FIX: Konsistensi lebar konten chapter =====
   Masalah: section-header melebar penuh, word-card dibatasi 720px → tidak rata.
   Solusi: semua elemen utama dibatasi max-width yang sama dan margin auto. */

/* Wrapper utama words-slot agar semua child terpusat */
#words-slot {
  width: 100%;
}

/* Section header ikuti lebar word-card */
.section-header {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* card-body: pastikan teks tidak overflow ke kanan */
.card-body {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* example-box, plus-box, tip-box: pastikan tidak melebar melebihi card */
.example-box,
.plus-box,
.tip-box,
.nuance-box,
.extra-box {
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
  max-width: 100%;
}

/* tip-box: ubah dari flex horizontal ke flex-wrap agar tidak terpotong di mobile */
.tip-box {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

/* Tabel/grid Hafalkan jika ada — pastikan tidak overflow */
.tip-box table,
.plus-box table {
  width: 100%;
  table-layout: fixed;
  word-break: break-word;
  font-size: 0.85em;
}

/* ════════════════════════════════════════════════════════════════
   FIX — Tabel "Pola & Penggunaan / Contoh Kalimat" di plus-box
   (dipakai di Bab 20–22) ditulis dengan warna inline (style="background:#...")
   yang dirancang untuk mode terang saja. Di mode gelap / sepia, warna
   pastel tersebut tidak ikut berubah → header & baris tabel terlihat
   pudar/tidak konsisten dibanding bab lain.
   Solusi: netralkan background & border inline di dalam tabel plus-box,
   lalu pakai variabel tema (sama seperti elemen plus-box lain) supaya
   konsisten di light, dark, dan sepia — berlaku untuk SEMUA child yang
   punya inline style, jadi tidak perlu menyentuh tiap kode hex satu-satu. */
.plus-box table tr[style],
.plus-box table td[style] {
  background: var(--card-bg) !important;
  border-color: var(--n2-plus-border) !important;
}
.plus-box table tr:first-child td[style] {
  background: var(--n2-plus-bg) !important;
  color: var(--text) !important;
}
.plus-box table tr:nth-child(even) td[style] {
  background: var(--card-bg-alt) !important;
}
.plus-box table td[style] {
  color: var(--text) !important;
}
.plus-box table td[style] strong {
  color: var(--n2-primary-dark) !important;
}
/* Sub-teks abu-abu (mis. "Menerima aksi orang lain...") ditulis inline
   color:#666 — ganti ke warna muted tema supaya tetap terbaca di gelap */
.plus-box table td[style] span[style*="color:#666"] {
  color: var(--text) !important;
  opacity: .7;
}
[data-theme="dark"] .plus-box table tr[style],
[data-theme="dark"] .plus-box table td[style] {
  border-color: var(--n2-plus-border) !important;
}
body.sepia-mode .plus-box table tr[style],
body.sepia-mode .plus-box table td[style] {
  background: #f1e7d0 !important;
  border-color: #b5651d !important;
  color: #4a3826 !important;
}
body.sepia-mode .plus-box table tr:first-child td[style] {
  background: #ead9b8 !important;
}
body.sepia-mode .plus-box table td[style] strong {
  color: #6b3a0e !important;
}

/* Perbaiki bab-progress-wrap dan toc agar sama lebarnya */
#bab-progress-wrap > *,
.toc > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Perbaiki section-header di dalam word-list (jika dirender sebagai sibling) */
.word-list .section-header {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== JAPANESE SENTENCE: wrap hanya di batas kata, tidak di tengah kanji =====
   word-break: keep-all  → jangan potong di tengah kanji/kata Jepang
   overflow-wrap: anywhere → boleh wrap di batas yang aman jika terpaksa
   line-break: strict     → ikuti aturan typografi Jepang (jangan mulai baris
                             dengan tanda baca seperti 。、など) */

.example-jp {
  display: block !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
  white-space: normal !important;
  /* Hapus spasi otomatis antar ruby dan teks biasa */
  font-feature-settings: "kern" 1;
  text-spacing: none;
}

/* Ruby di kalimat contoh: furigana tidak mendorong jarak kanji */
.example-jp ruby {
  display: inline-ruby;
  ruby-overhang: auto;
  ruby-align: center;
}
.example-jp rt {
  ruby-align: center;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0;
}

/* Fix global: semua ruby di seluruh halaman (word-jp, plus-box, dll.) */
ruby {
  ruby-overhang: auto;
}
rt {
  ruby-overhang: auto;
}


/* ════════════════════════════════════════════════════════════════
   v6 FIX — Reading Toolbar (font/warna/sepia/fokus/fullscreen)
   Pastikan pilihan dari ⚙️ Pengaturan Baca benar-benar diterapkan
   ke seluruh UI, tidak hanya ke teks kartu.
   ════════════════════════════════════════════════════════════════ */

/* 1. Font Latin (pilihan "Gaya Huruf Arti") harus merambat ke semua
      elemen UI berbahasa Latin, bukan cuma <body>. Elemen JP tetap
      memakai Noto Serif JP karena selektor mereka punya font-family
      sendiri dan lebih spesifik. */
html, body,
button, input, select, textarea,
.word-id-ind, .example-id, .dialogue-id,
.plus-box, .tip-box, .nuance-box,
.related-word-box, .extra-box,
.page-nav, .bottom-nav,
.toc, .toc-row, .toc-kanji,
.chapter-banner, .book-header,
#reading-toolbar,
#rtb-panel,
.rtb-label, .rtb-opt, .rtb-focus-btn,
.search-result-item, .sr-id,
.bookmark-chip, .review-card,
.stat-card, .stat-lbl, .stat-val,
.section-header, .sec-meaning,
footer, .site-footer {
  font-family: var(--latin-font, 'Segoe UI', Arial, sans-serif);
}

/* Tetap pakai Noto Serif JP untuk teks Jepang (kanji + furigana) */
.word-jp, .word-jp *,
.example-jp, .example-jp *,
.dialogue, .dialogue *,
.sec-kanji,
.sj-label,
.sr-jp,
.bm-jp,
.review-card-jp,
#section-indicator .si-text,
.chapter-kanji,
ruby, rt, rb {
  font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho Pro', serif !important;
}

/* 2. Mode Sepia — pastikan komponen N2 (header section, banner, dll.)
      ikut palet krem hangat dan tidak masih biru menyilaukan. */
body.sepia-mode .section-header {
  background: #ead9b8 !important;
  color: #5a3e2e !important;
  border-left-color: #b5651d !important;
}
body.sepia-mode .section-header .sec-kanji,
body.sepia-mode .section-header:not(:has(.sec-num-badge)) {
  color: #5a3e2e !important;
}
body.sepia-mode .section-header .sec-num-badge,
body.sepia-mode .sec-label {
  background: #b5651d !important;
  color: #faf3e3 !important;
}
body.sepia-mode .card-num {
  background: #f1e7d0 !important;
  color: #6b4a1e !important;
  border-right-color: #d9c9a3 !important;
}
body.sepia-mode .chapter-banner {
  background: linear-gradient(135deg, #b5651d 0%, #8a4a14 50%, #6b3a0e 100%) !important;
}
body.sepia-mode .book-header { background: #b5651d !important; }
body.sepia-mode .toc h2,
body.sepia-mode .toc-kanji,
body.sepia-mode .nav-title {
  color: #6b4a1e !important;
  border-bottom-color: #d9c9a3 !important;
}
body.sepia-mode .toc-num,
body.sepia-mode .chapter-num-badge {
  background: #b5651d !important;
}
body.sepia-mode .page-nav a:not(.disabled),
body.sepia-mode .bottom-nav a:not(.disabled) {
  color: #b5651d !important;
  border-color: #b5651d !important;
}
body.sepia-mode .bottom-nav a:not(.disabled):not(.home) {
  background: #b5651d !important;
  color: #faf3e3 !important;
}
body.sepia-mode .example-box {
  background: #f1e7d0 !important;
  border-left-color: #b5651d !important;
}
body.sepia-mode .plus-box {
  background: #ead9b8 !important;
  border-left-color: #8a4fa0 !important;
}
body.sepia-mode .tip-box { background: #f5ebd2 !important; }
body.sepia-mode .pos-badge,
body.sepia-mode .pos-badge.verb,
body.sepia-mode .pos-badge.adj,
body.sepia-mode .pos-badge.adv,
body.sepia-mode .pos-badge.na-adj,
body.sepia-mode .pos-badge.idiom {
  background: #8a6a3a !important;
  color: #faf3e3 !important;
}
body.sepia-mode .highlight {
  background: linear-gradient(transparent 60%, rgba(181, 101, 29, .28) 60%) !important;
  color: #6b3a0e !important;
}
body.sepia-mode .progress-bar-fill { background: #b5651d !important; }

/* 3. Mode Fokus — perjelas efek dengan menyembunyikan juga elemen
      sekunder yang sebelumnya masih tampil (badge, kontrol kecil). */
body.focus-mode .related-word-box,
body.focus-mode .card-action-row,
body.focus-mode .furi-reveal-all-btn,
body.focus-mode .word-furigana {
  display: none !important;
}
body.focus-mode .word-card { padding-bottom: 6px; }

/* 4. Mode Layar Penuh — tombol toggle ikut berubah teks, dan saat
      fullscreen scrollbar tetap mulus + toolbar tidak nyangkut. */
body.is-fullscreen {
  background: var(--bg);
}
body.is-fullscreen #reading-toolbar { bottom: 20px; }

/* Tombol fullscreen aktif (saat layar sedang fullscreen) */
#rtb-fullscreen.active {
  border-color: var(--n2-primary) !important;
  color: var(--n2-primary) !important;
  background: var(--n2-primary-light) !important;
}

/* 5. Toolbar tombol opsi — pakai warna biru N2 alih-alih pink default,
      konsisten dengan tema N2. */
.rtb-opt:hover { border-color: var(--n2-primary) !important; color: var(--n2-primary) !important; }
.rtb-opt.active { border-color: var(--n2-primary) !important; background: var(--n2-primary) !important; color: #fff !important; }
.rtb-focus-btn:hover { border-color: var(--n2-primary) !important; color: var(--n2-primary) !important; }
.rtb-focus-btn.active { border-color: var(--n2-primary) !important; color: var(--n2-primary) !important; background: var(--n2-primary-light) !important; }
.rtb-toggle { border-color: var(--n2-primary) !important; color: var(--n2-primary) !important; }
.rtb-toggle:active { background: var(--n2-primary-light) !important; }
#rtb-panel { border-color: var(--n2-primary) !important; }
.rtb-font-opt:hover { border-color: var(--n2-primary) !important; }
.rtb-font-opt.active { border-color: var(--n2-primary) !important; background: var(--n2-primary-light) !important; }
.rtb-font-opt.active .rtb-font-name,
.rtb-font-check { color: var(--n2-primary) !important; }

/* Tombol Sepia tetap pakai aksen cokelat hangat saat aktif */
#rtb-sepia.active {
  border-color: #b5651d !important;
  color: #b5651d !important;
  background: #f4ecd8 !important;
}

/* 6. Pastikan word-id-ind (arti) mewarisi warna pilihan user juga di N2. */
.word-id-ind {
  color: var(--word-id-color, var(--text)) !important;
  font-size: 0.95em !important;
}

/* 7. Swatch warna jangan terlalu bertabrakan dengan border N2 light */
.rtb-swatch.active { border-color: var(--text) !important; }


/* ═══════════════════════════════════════════════════════════════════
   v12 — FITUR BARU
   1. Sembunyikan/Tampilkan Terjemahan (belajar aktif)
   2. Font size kanji inline (slider di kartu)
   3. Mode Fokus Satu Kartu (card-at-a-time)
   4. Sticky section header
   5. Tombol Back-to-Top lebih awal
   6. Indikator kartu ke-X dari Y
   7. Bookmark button lebih besar di mobile
   8. Font Jepang lebih besar di mobile
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Sembunyikan Terjemahan ─────────────────────────────────── */
.hide-translation-mode .word-id-ind,
.hide-translation-mode .example-id,
.hide-translation-mode .dialogue-id {
  filter: blur(5px);
  user-select: none;
  cursor: pointer;
  transition: filter .2s, background .15s;
  border-radius: 3px;
  /* Tanda visual: area ini bisa diklik */
  outline: 1px dashed transparent;
}
/* Desktop: hover menampilkan sementara (preview) */
@media (hover: hover) {
  .hide-translation-mode .word-id-ind:hover,
  .hide-translation-mode .example-id:hover,
  .hide-translation-mode .dialogue-id:hover {
    filter: blur(2px);
    outline-color: var(--n2-primary, #1976d2);
  }
}
/* Sudah di-klik/tap → tampilkan penuh */
.hide-translation-mode .word-id-ind.revealed,
.hide-translation-mode .example-id.revealed,
.hide-translation-mode .dialogue-id.revealed {
  filter: none;
  user-select: text;
  outline-color: transparent;
}
/* Tombol toggle terjemahan di toolbar */
#rtb-hide-trans {
  background: none;
  border: 2px solid var(--card-border, #ddd);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text, #333);
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
#rtb-hide-trans.active {
  border-color: var(--n2-primary) !important;
  background: var(--n2-primary-light) !important;
  color: var(--n2-primary-dark) !important;
}

/* ── 2. Slider Font Size Kanji inline ─────────────────────────── */
.inline-font-ctrl {
  display: none; /* hidden by default, shown in mode tertentu */
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
  font-size: 11px;
  color: var(--muted, #888);
}
.show-inline-font-ctrl .inline-font-ctrl {
  display: flex;
}
.inline-font-ctrl label {
  white-space: nowrap;
  font-size: 11px;
}
.inline-font-ctrl input[type=range] {
  width: 90px;
  accent-color: var(--n2-primary);
  cursor: pointer;
}
.inline-font-ctrl .ifc-val {
  font-weight: 700;
  color: var(--n2-primary-dark, #0d47a1);
  min-width: 28px;
  font-size: 11px;
}
/* Tombol toggle show/hide font ctrl */
#rtb-inline-font {
  background: none;
  border: 2px solid var(--card-border, #ddd);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text, #333);
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
#rtb-inline-font.active {
  border-color: var(--n2-primary) !important;
  background: var(--n2-primary-light) !important;
  color: var(--n2-primary-dark) !important;
}

/* ── 3. Mode Fokus Satu Kartu (One-at-a-time) ─────────────────── */
body.one-card-mode {
  overflow: hidden;
}
#one-card-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg, #fafafa);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
body.one-card-mode #one-card-overlay {
  display: flex;
}
#one-card-stage {
  width: 100%;
  max-width: 640px;
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#one-card-inner {
  width: 100%;
  background: var(--card-bg, #fff);
  border: 2px solid var(--n2-primary-light, #bbdefb);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(25,118,210,.12);
  padding: 0;
  overflow: hidden;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
}
#one-card-inner.slide-left {
  transform: translateX(-60px);
  opacity: 0;
}
#one-card-inner.slide-right {
  transform: translateX(60px);
  opacity: 0;
}
/* Indicator kartu ke-X dari Y */
#one-card-counter {
  text-align: center;
  font-size: 13px;
  color: var(--muted, #888);
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: .3px;
}
#one-card-counter .occ-current {
  color: var(--n2-primary-dark, #0d47a1);
  font-size: 16px;
  font-weight: 700;
}
/* Navigasi panah one-card */
#one-card-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.ocn-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--n2-primary-light, #bbdefb);
  background: var(--card-bg, #fff);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--n2-primary, #1976d2);
  transition: background .15s, border-color .15s, transform .1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ocn-arrow:hover { background: var(--n2-primary-light, #bbdefb); border-color: var(--n2-primary, #1976d2); transform: scale(1.08); }
.ocn-arrow:disabled { opacity: .35; cursor: default; transform: none; }
#ocn-close {
  padding: 8px 20px;
  border-radius: 20px;
  border: 2px solid var(--n2-primary, #1976d2);
  background: none;
  color: var(--n2-primary, #1976d2);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#ocn-close:hover { background: var(--n2-primary-light); }
/* Swipe hint inside one-card mode */
#one-card-swipe-hint {
  font-size: 11px;
  color: var(--muted, #aaa);
  text-align: center;
  margin-top: 6px;
}
/* Tombol aktifkan one-card di toolbar */
#rtb-one-card {
  background: none;
  border: 2px solid var(--card-border, #ddd);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text, #333);
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
#rtb-one-card.active {
  border-color: var(--n2-primary) !important;
  background: var(--n2-primary) !important;
  color: #fff !important;
}

/* ── 4. Section Indicator (sticky nav bar dengan jump menu) ───── */
/* Ditangani sepenuhnya oleh #section-indicator — lihat blok CSS di bawah */
/* .sticky-section-bar dihapus (duplikat dari #section-indicator) */

/* ── 5. Back-to-Top lebih awal (560→3 kartu ~300px) ─────────── */
/* Sudah handled di JS, tidak perlu CSS tambahan */

/* ── 7. Bookmark button lebih besar di mobile ─────────────────── */
@media (max-width: 640px) {
  .card-bookmark-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
    border-width: 2px !important;
  }
  .card-learn-btn {
    padding: 8px 16px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
  }
  .card-action-row {
    gap: 10px !important;
    margin-top: 12px !important;
  }
}

/* ── 8. Font Jepang lebih besar di mobile ─────────────────────── */
@media (max-width: 640px) {
  :root {
    --word-jp-size: 24px;
  }
  .word-jp {
    font-size: var(--word-jp-size, 24px) !important;
    line-height: 1.5 !important;
  }
  .example-jp {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .section-header .sec-kanji {
    font-size: 17px !important;
  }
}

/* ── One-card mode dark/sepia ───────────────────────────────────── */
[data-theme="dark"] #one-card-inner {
  border-color: rgba(25,118,210,.35);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
[data-theme="dark"] #one-card-overlay {
  background: var(--bg, #1a1a1a);
}
body.sepia-mode #one-card-inner {
  border-color: #d9c9a3;
  background: #faf3e3;
}
body.sepia-mode #one-card-overlay {
  background: #f5ead0;
}


/* ═══════════════════════════════════════════════════════════════════
   v12b — VISUAL & UX
   1. Animasi fade-in kartu saat pertama kali dimuat
   2. Warna section konsisten (badge nomor = warna border kiri)
   3. TOC preview contoh kalimat saat hover
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. FADE-IN KARTU BERTAHAP ─────────────────────────────────── */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hanya aktif saat .cards-animating ada di body
   (ditambah oleh JS, dihapus setelah semua kartu muncul) */
body.cards-animating .word-card {
  opacity: 0; /* state awal */
  animation: card-enter .38s cubic-bezier(.22,.68,0,1.15) forwards;
}

/* Setiap kartu delay bertahap: maks 12 kartu dikali 40ms = 480ms total */
body.cards-animating .word-card:nth-child(1)  { animation-delay: .04s }
body.cards-animating .word-card:nth-child(2)  { animation-delay: .08s }
body.cards-animating .word-card:nth-child(3)  { animation-delay: .12s }
body.cards-animating .word-card:nth-child(4)  { animation-delay: .16s }
body.cards-animating .word-card:nth-child(5)  { animation-delay: .20s }
body.cards-animating .word-card:nth-child(6)  { animation-delay: .24s }
body.cards-animating .word-card:nth-child(7)  { animation-delay: .28s }
body.cards-animating .word-card:nth-child(8)  { animation-delay: .32s }
body.cards-animating .word-card:nth-child(9)  { animation-delay: .36s }
body.cards-animating .word-card:nth-child(10) { animation-delay: .40s }
body.cards-animating .word-card:nth-child(11) { animation-delay: .44s }
body.cards-animating .word-card:nth-child(n+12) { animation-delay: .48s }

/* Section header ikut fade lebih cepat */
@keyframes section-enter {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
body.cards-animating .section-header {
  opacity: 0;
  animation: section-enter .3s ease forwards .02s;
}

/* Matikan animasi jika user prefer-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.cards-animating .word-card,
  body.cards-animating .section-header {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 2. WARNA SECTION KONSISTEN ─────────────────────────────────── */
/*
  Setiap section header mendapat hue unik yang diambil dari data-section-color
  yang di-inject oleh JS. Ini membuat badge nomor, border kiri, dan toc-num
  seragam per section.

  Palet: 5 warna N2 yang nyaman dan konsisten di light/dark/sepia
*/
:root {
  --sec-c1: #1976d2;  /* biru — default N2 */
  --sec-c2: #7b3fb5;  /* ungu */
  --sec-c3: #1a8c6a;  /* hijau teal */
  --sec-c4: #c47500;  /* oranye cokelat */
  --sec-c5: #b53060;  /* merah-muda tua */
}
[data-theme="dark"] {
  --sec-c1: #64b5f6;
  --sec-c2: #ce93d8;
  --sec-c3: #4db88c;
  --sec-c4: #ffca28;
  --sec-c5: #f48fb1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sec-c1: #64b5f6;
    --sec-c2: #ce93d8;
    --sec-c3: #4db88c;
    --sec-c4: #ffca28;
    --sec-c5: #f48fb1;
  }
}

/* data-sc="1..5" di-set oleh JS pada tiap .section-header */
.section-header[data-sc="1"] { border-left-color: var(--sec-c1) !important; }
.section-header[data-sc="2"] { border-left-color: var(--sec-c2) !important; }
.section-header[data-sc="3"] { border-left-color: var(--sec-c3) !important; }
.section-header[data-sc="4"] { border-left-color: var(--sec-c4) !important; }
.section-header[data-sc="5"] { border-left-color: var(--sec-c5) !important; }

.section-header[data-sc="1"] .sec-num-badge,
.section-header[data-sc="1"] .sec-label { background: var(--sec-c1) !important; }
.section-header[data-sc="2"] .sec-num-badge,
.section-header[data-sc="2"] .sec-label { background: var(--sec-c2) !important; }
.section-header[data-sc="3"] .sec-num-badge,
.section-header[data-sc="3"] .sec-label { background: var(--sec-c3) !important; }
.section-header[data-sc="4"] .sec-num-badge,
.section-header[data-sc="4"] .sec-label { background: var(--sec-c4) !important; }
.section-header[data-sc="5"] .sec-num-badge,
.section-header[data-sc="5"] .sec-label { background: var(--sec-c5) !important; }

.section-header[data-sc="1"] .sec-kanji { color: var(--sec-c1) !important; }
.section-header[data-sc="2"] .sec-kanji { color: var(--sec-c2) !important; }
.section-header[data-sc="3"] .sec-kanji { color: var(--sec-c3) !important; }
.section-header[data-sc="4"] .sec-kanji { color: var(--sec-c4) !important; }
.section-header[data-sc="5"] .sec-kanji { color: var(--sec-c5) !important; }

/* TOC num badge ikut warna section */
.toc-row[data-sc="1"] .toc-num { background: var(--sec-c1) !important; }
.toc-row[data-sc="2"] .toc-num { background: var(--sec-c2) !important; }
.toc-row[data-sc="3"] .toc-num { background: var(--sec-c3) !important; }
.toc-row[data-sc="4"] .toc-num { background: var(--sec-c4) !important; }
.toc-row[data-sc="5"] .toc-num { background: var(--sec-c5) !important; }

/* toc-kanji ikut warna section */
.toc-row[data-sc="1"] .toc-kanji { color: var(--sec-c1) !important; }
.toc-row[data-sc="2"] .toc-kanji { color: var(--sec-c2) !important; }
.toc-row[data-sc="3"] .toc-kanji { color: var(--sec-c3) !important; }
.toc-row[data-sc="4"] .toc-kanji { color: var(--sec-c4) !important; }
.toc-row[data-sc="5"] .toc-kanji { color: var(--sec-c5) !important; }

/* Sepia override untuk warna section */
body.sepia-mode .section-header[data-sc] { border-left-color: #b5651d !important; }
body.sepia-mode .section-header[data-sc] .sec-num-badge,
body.sepia-mode .section-header[data-sc] .sec-label { background: #b5651d !important; }
body.sepia-mode .section-header[data-sc] .sec-kanji { color: #5a3e2e !important; }
body.sepia-mode .toc-row[data-sc] .toc-num { background: #b5651d !important; }
body.sepia-mode .toc-row[data-sc] .toc-kanji { color: #5a3e2e !important; }



/* ── 3. TOC PREVIEW KALIMAT CONTOH ─────────────────────────────── */
/* Popup kecil muncul di bawah toc-row saat hover/focus */
.toc-row { position: relative; }

.toc-preview {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 200;
  width: max-content;
  max-width: min(360px, 90vw);
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--n2-primary-light, #bbdefb);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  pointer-events: none;
  font-size: 12px;
  line-height: 1.6;
  animation: preview-pop .18s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes preview-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

a.toc-row:hover .toc-preview,
a.toc-row:focus-visible .toc-preview,
a.toc-row.preview-open .toc-preview {
  display: block;
}

/* Sisi kanan layar — flip ke kiri */
.toc-preview.flip-left {
  left: auto;
  right: 0;
}

.toc-preview-jp {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--n2-primary-dark, #0d47a1);
  margin-bottom: 4px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.toc-preview-id {
  color: var(--muted, #666);
  font-size: 11.5px;
  border-top: 1px solid var(--num-border, #eee);
  padding-top: 5px;
  margin-top: 4px;
}
.toc-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted, #999);
  margin-bottom: 5px;
}

/* Warna aksen preview ikut section */
.toc-row[data-sc="1"] .toc-preview { border-color: var(--sec-c1) !important; }
.toc-row[data-sc="2"] .toc-preview { border-color: var(--sec-c2) !important; }
.toc-row[data-sc="3"] .toc-preview { border-color: var(--sec-c3) !important; }
.toc-row[data-sc="4"] .toc-preview { border-color: var(--sec-c4) !important; }
.toc-row[data-sc="5"] .toc-preview { border-color: var(--sec-c5) !important; }

.toc-row[data-sc="1"] .toc-preview-jp { color: var(--sec-c1) !important; }
.toc-row[data-sc="2"] .toc-preview-jp { color: var(--sec-c2) !important; }
.toc-row[data-sc="3"] .toc-preview-jp { color: var(--sec-c3) !important; }
.toc-row[data-sc="4"] .toc-preview-jp { color: var(--sec-c4) !important; }
.toc-row[data-sc="5"] .toc-preview-jp { color: var(--sec-c5) !important; }

/* Dark mode */
[data-theme="dark"] .toc-preview {
  background: var(--card-bg, #242424);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
body.sepia-mode .toc-preview {
  background: #faf3e3;
  border-color: #b5651d;
}
body.sepia-mode .toc-preview-jp { color: #5a3e2e !important; }

/* Mobile: tap untuk toggle (JS handle) — popup sedikit lebih lebar */
@media (max-width: 640px) {
  .toc-preview {
    max-width: calc(100vw - 32px);
    font-size: 13px;
    pointer-events: auto; /* bisa discroll di mobile */
  }
  .toc-preview-jp { font-size: 14px; }
}



/* ═══════════════════════════════════════════════════════════════════
   v17 — MOBILE LAYOUT FIX: Perlebar tampilan agar nyaman di HP
   Masalah: layout kartu terlalu sempit, kanji berantakan di HP
   Solusi: kartu full-width, nomor di atas, font lebih besar
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Kurangi padding body agar konten lebih lebar ── */
  body {
    font-size: 15px !important;
  }

  /* ── Page nav lebih kompak ── */
  .page-nav {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .page-nav a {
    font-size: 12px !important;
    padding: 6px 10px !important;
    min-width: 70px !important;
  }

  /* ── Word card: ubah dari grid 2-kolom → full-width stack ── */
  .word-card {
    display: block !important;
    padding: 0 !important;
    border-bottom: 3px solid var(--n2-primary-light, #bbdefb) !important;
  }

  /* ── Nomor kartu: tampilkan sebagai pill horizontal di atas ── */
  .card-num {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 14px 0 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    border-right: none !important;
    background: transparent !important;
    color: var(--n2-primary, #1976d2) !important;
    min-width: unset !important;
    width: auto !important;
    letter-spacing: 0.5px;
  }
  .card-num::before {
    content: "No.";
    font-size: 10px;
    margin-right: 3px;
    opacity: 0.6;
  }

  /* ── Card body: full-width, padding lega ── */
  .card-body {
    padding: 6px 14px 14px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Judul pola (word-jp): lebih besar dan lega ── */
  .word-jp {
    font-size: 22px !important;
    line-height: 1.7 !important;
    margin-bottom: 6px !important;
    display: block !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    letter-spacing: 0.5px !important;
  }

  /* ── Furigana lebih jelas ── */
  rt {
    font-size: 11px !important;
    letter-spacing: 0px !important;
  }

  /* ── Arti (word-id-ind) ── */
  .word-id-ind {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-top: 4px !important;
    display: block !important;
  }

  /* ── Example box: padding lebih lega, font lebih besar ── */
  .example-box {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border-left-width: 5px !important;
  }

  /* ── Kalimat Jepang di example box ── */
  .example-jp {
    font-size: 17px !important;
    line-height: 2.0 !important;
    margin-bottom: 8px !important;
    display: block !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  /* ── Terjemahan di example box ── */
  .example-id {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--muted2, #555) !important;
    padding-top: 6px !important;
    border-top: 1px dashed var(--card-border, #ddd) !important;
    margin-top: 6px !important;
    display: block !important;
  }

  /* ── Dialogue (percakapan) ── */
  .dialogue {
    font-size: 17px !important;
    line-height: 2.0 !important;
    display: block !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }
  .dialogue-id {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-top: 8px !important;
    padding-top: 6px !important;
    border-top: 1px dashed var(--card-border, #ddd) !important;
    display: block !important;
  }

  /* ── Plus box (接続, artinya lebih lega) ── */
  .plus-box {
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    border-radius: 0 8px 8px 0 !important;
    margin-top: 10px !important;
  }

  /* ── Tip box ── */
  .tip-box {
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin-top: 10px !important;
    border-radius: 8px !important;
  }

  /* ── Nuance box ── */
  .nuance-box {
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin-top: 10px !important;
  }

  /* ── Section header lebih besar ── */
  .section-header {
    padding: 14px 14px 12px !important;
    margin-top: 16px !important;
    border-left-width: 5px !important;
  }
  .section-header .sec-kanji {
    font-size: 19px !important;
    line-height: 1.4 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }
  .section-header .sec-meaning {
    font-size: 14px !important;
    margin-top: 3px !important;
    display: block !important;
    width: 100% !important;
  }

  /* ── Word meta (badge pos) ── */
  .word-meta {
    margin-top: 6px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .pos-badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
  }

  /* ── TOC lega ── */
  .toc {
    padding: 12px 10px !important;
  }
  .toc-row {
    padding: 10px 8px !important;
    gap: 10px !important;
  }
  .toc-kanji {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .toc-meaning {
    font-size: 13px !important;
  }

  /* ── Card action buttons lebih mudah di-tap ── */
  .card-action-row {
    margin-top: 14px !important;
    gap: 10px !important;
  }
  .card-learn-btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
  }

  /* ── Word furigana (reading di bawah word-jp) ── */
  .word-furigana {
    font-size: 12px !important;
    letter-spacing: 2px !important;
    margin-top: 3px !important;
    display: block !important;
  }

  /* ── Related word box ── */
  .related-word-box {
    font-size: 13px !important;
    margin-top: 6px !important;
    line-height: 1.6 !important;
  }

  /* ── Bottom nav ── */
  .bottom-nav {
    padding: 14px 10px 24px !important;
    gap: 8px !important;
  }
  .bottom-nav a {
    font-size: 13px !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
  }

  /* ── Chapter banner font lega ── */
  .chap-kanji {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }
  .chap-num {
    font-size: 48px !important;
  }

  /* ── Extra box ── */
  .extra-box {
    margin-top: 14px !important;
    border-radius: 10px !important;
  }
  .extra-box-title {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }

  /* ── Scroll margin kompensasi sticky bars ── */
  .section-header, .word-card {
    scroll-margin-top: 80px !important;
  }

} /* end @media max-width: 640px */

/* ── Extra kecil (HP lama, lebar < 380px) ── */
@media (max-width: 380px) {
  .word-jp {
    font-size: 20px !important;
  }
  .example-jp,
  .dialogue {
    font-size: 15px !important;
  }
  .card-body {
    padding: 6px 10px 12px 10px !important;
  }
  .example-box {
    padding: 10px 10px !important;
  }
  .page-nav a {
    font-size: 11px !important;
    padding: 5px 8px !important;
    min-width: 60px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v18 — AUTO-FIT FONT: Kalimat menyesuaikan lebar layar otomatis
   Tujuan: 1 kalimat = muat di layar, tidak perlu scroll kanan-kiri
   Teknik: font-size fluid dengan clamp() + word-break natural
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Kalimat contoh Jepang: ukuran fluid 13px–17px sesuai lebar layar ──
     clamp(min, preferred, max)
     - min  : 13px — tidak lebih kecil dari ini
     - 4vw  : 4% dari lebar layar (≈15px di 360px, ≈16px di 400px)
     - max  : 17px — tidak lebih besar dari ini
     Hasilnya: kalimat panjang otomatis lebih kecil, kalimat pendek tetap nyaman */
  .example-jp,
  .dialogue {
    font-size: clamp(13px, 4vw, 17px) !important;
    line-height: 2.1 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    /* Hapus indentasi/spasi awal yang sering muncul di HTML kanji */
    text-indent: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block !important;
  }

  /* ── Ruby (furigana): proporsional dengan teks ── */
  .example-jp rt,
  .dialogue rt {
    font-size: 0.62em !important;   /* selalu 62% dari font induk */
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  /* ── Judul pola (word-jp): fluid 18px–22px ── */
  .word-jp {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.8 !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* ── word-jp furigana proporsional ── */
  .word-jp rt {
    font-size: 0.55em !important;
    letter-spacing: 0 !important;
  }

  /* ── Example box: hilangkan padding kiri-kanan yang berlebihan ── */
  .example-box {
    padding: 12px 12px !important;
  }

  /* ── Hapus leading whitespace dari node teks Jepang ──
     Beberapa kalimat di HTML diawali spasi (　 atau U+3000) yang
     mendorong teks ke dalam dan bikin wrapping tidak rata. */
  .example-jp > ruby:first-child,
  .dialogue > ruby:first-child {
    margin-left: 0 !important;
  }

  /* ── Terjemahan: fluid 13px–15px ── */
  .example-id,
  .dialogue-id {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.7 !important;
  }

  /* ── Section header pola: fluid 16px–19px ── */
  .section-header .sec-kanji {
    font-size: clamp(16px, 4.5vw, 19px) !important;
    line-height: 1.5 !important;
  }

  /* ── Arti kata (word-id-ind): fluid ── */
  .word-id-ind {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.65 !important;
  }

} /* end @media max-width: 640px */


/* ═══════════════════════════════════════════════════════════════════
   v19 — UI AUDIT KOMPONEN MATERI GRAMMAR (CSS-only, scoped, additive)
   ───────────────────────────────────────────────────────────────────
   Tujuan: meningkatkan keterbacaan di smartphone (360–430 px) menyerupai
   buku tata bahasa Jepang profesional (Shin Kanzen / Try! / Sou-Matome):
   • lebih ringkas & horizontal (mayoritas kalimat muat 1–2 baris)
   • hierarki visual konsisten (judul → arti → contoh → 接続 → 意味 → 💡)
   • jarak antar elemen proporsional, furigana presisi, tanpa overflow
   • TIDAK mengubah HTML/JS/data/tema/warna/ikon/animasi.
   • Hanya menargetkan: .word-card / .word-jp / .word-meta / .word-id-ind /
     .example-box / .example-jp / .example-id / .plus-box / .tip-box /
     .nuance-box / .highlight / ruby / rt — semua scoped di dalam kartu.
   ═══════════════════════════════════════════════════════════════════ */

/* ── A. Variabel skala vertikal khusus materi grammar ──
   Dipakai di selektor di bawah; tidak menimpa var global lain.
   Skala ini dirancang agar tinggi baris kalimat Jepang cukup untuk ruby
   namun tidak terlalu lega (≈ 1.85 vs 2.0–2.1 sebelumnya). */
:root {
  --n2-jp-lh:           1.85;   /* line-height kalimat Jepang (ruang ruby cukup) */
  --n2-id-lh:           1.6;    /* line-height terjemahan Indonesia */
  --n2-title-lh:        1.55;   /* line-height judul pola (word-jp) */
  --n2-block-gap:       10px;   /* jarak vertikal antar blok di card-body */
  --n2-inline-gap:      6px;    /* jarak antar example-jp ↔ example-id */
  --n2-ruby-offset:     0.1em;  /* offset vertikal ruby agar tidak nempel underline */
}

/* ── B. Ruby presisi: cegah furigana mendorong panjang baris kalimat ──
   • ruby-align: center  → furigana ditengahkan di atas base
   • ruby-position: over → konsisten cross-browser
   • text-decoration-skip-ink: none → underline highlight tidak terputus
     oleh descender ruby; offset kecil agar tidak menyentuh furigana */
.word-jp ruby,
.example-jp ruby,
.dialogue ruby,
.plus-box ruby,
.tip-box ruby,
.nuance-box ruby {
  ruby-position: over;
  ruby-align: center;
  ruby-overhang: auto;
}

/* Furigana (rt) di dalam komponen materi — proporsional, tanpa
   letter-spacing yang membuat baris jadi panjang.
   Catatan: tidak menimpa font-size yang sudah di-set per selektor
   .word-jp rt / .example-jp rt di blok sebelumnya. */
.word-jp rt,
.example-jp rt,
.dialogue rt,
.plus-box rt,
.tip-box rt,
.nuance-box rt {
  letter-spacing: 0 !important;
  white-space: nowrap;
  line-height: 1;
}

/* ── C. Highlight grammar (kata kunci pola) — underline rapi di bawah base,
   tidak bertabrakan dengan ruby furigana di atas. */
.example-jp .highlight,
.dialogue .highlight {
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  /* Cegah highlight memotong line-break di kata kunci pola */
  white-space: nowrap;
}
/* Fallback bila kalimat sangat panjang: izinkan break jika perlu */
@supports (white-space: balance) {
  .example-jp .highlight {
    white-space: normal;
  }
}

/* ── D. word-card: rapikan hierarki internal di mobile ── */
@media (max-width: 640px) {

  /* Card-body: padding seragam, ruang bawah lebih kompak agar antar pola
     terasa seperti list buku tata bahasa, bukan kartu lega. */
  .card-body {
    padding: 4px 14px 12px 14px !important;
  }

  /* ── D.1 Judul pola (word-jp) ── */
  .word-jp {
    line-height: var(--n2-title-lh) !important;
    margin-bottom: 4px !important;
    /* Hindari baris pendek tunggal yang menggantung */
    text-wrap: pretty;
    /* Pastikan tidak overflow horizontal pada pola panjang */
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
    line-break: strict;
  }

  /* ── D.2 Word meta (badge + arti singkat) ── */
  .word-meta {
    margin-top: 2px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
    row-gap: 4px !important;
  }
  .word-id-ind {
    line-height: var(--n2-id-lh) !important;
    /* Cegah pemisahan di tengah klausa "selama / sementara (...)" */
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* ── D.3 Example box: kompres jarak agar tampilan horizontal ── */
  .example-box {
    margin-top: var(--n2-block-gap) !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border-left-width: 4px !important;
  }
  /* Judul kecil di dalam example-box (A. / B. / Contoh Kalimat) — lebih ringkas */
  .example-box > div[style*="font-weight:700"]:first-child {
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
    font-size: 0.86em !important;
  }

  /* ── D.4 Kalimat Jepang: line-height yang cukup untuk ruby
     tanpa terlalu lega. Mayoritas kalimat muat 1–2 baris pada
     viewport 360–430 px. ── */
  .example-jp,
  .dialogue {
    line-height: var(--n2-jp-lh) !important;
    margin-bottom: var(--n2-inline-gap) !important;
    /* Jaga ruang vertikal antar baris saat ruby muncul */
    padding-top: var(--n2-ruby-offset);
    /* Cegah kanji terisolasi di akhir baris */
    text-spacing: normal;
  }

  /* ── D.5 Terjemahan kalimat: lebih dekat dengan kalimat Jepang,
     pemisah dashed cukup tipis (tidak boros ruang). ── */
  .example-id,
  .dialogue-id {
    line-height: var(--n2-id-lh) !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top-style: dashed !important;
    border-top-width: 1px !important;
  }

  /* Spacer kosong <div style="height:6px"> antar kalimat — kompres sedikit
     agar daftar contoh terasa seperti urutan dalam buku, bukan kartu terpisah. */
  .example-box > div[style*="height:6px"] {
    height: 4px !important;
  }

  /* ── D.6 Plus-box (📐 接続 / 📖 意味) — kompak & rata ── */
  .plus-box {
    margin-top: 8px !important;
    padding: 9px 12px !important;
    line-height: 1.7 !important;
    border-radius: 0 8px 8px 0 !important;
  }
  .plus-box br + strong,
  .plus-box strong {
    line-height: 1.5;
  }

  /* ── D.7 Tip-box (💡 catatan) — lebih kalem, tidak teriak ── */
  .tip-box {
    margin-top: 8px !important;
    padding: 9px 12px !important;
    line-height: 1.65 !important;
    border-radius: 8px !important;
  }
  .tip-icon {
    flex-shrink: 0;
    margin-top: 1px;
  }

  /* ── D.8 Nuance-box — seragam dengan tip-box ── */
  .nuance-box {
    margin-top: 8px !important;
    padding: 9px 12px !important;
    line-height: 1.65 !important;
  }
}

/* ── E. Ultra-small (≤ 380 px) — penyesuaian khusus HP lama ── */
@media (max-width: 380px) {
  .card-body {
    padding: 4px 11px 11px 11px !important;
  }
  .example-box {
    padding: 9px 10px !important;
  }
  .plus-box,
  .tip-box,
  .nuance-box {
    padding: 8px 10px !important;
  }
  /* Sedikit lebih rapat agar kalimat panjang tetap 2 baris */
  .example-jp,
  .dialogue {
    line-height: 1.8 !important;
  }
  .word-jp {
    line-height: 1.5 !important;
  }
}

/* ── F. Tablet kecil (641–820 px) — tampilan tetap konsisten ──
   Sebagian besar styling mobile sudah cukup; di sini hanya pastikan
   max-width tetap dihormati & line-height tidak boros. */
@media (min-width: 641px) and (max-width: 820px) {
  .example-jp,
  .dialogue {
    line-height: 1.9;
  }
  .word-jp {
    line-height: 1.55;
  }
}

/* ── G. Anti-overflow guard ──
   Pengaman terakhir: jangan biarkan kalimat panjang membobol layar.
   Hanya berlaku di dalam kartu materi grammar; tidak menyentuh elemen
   lain (navigasi/TOC/banner aman). */
.word-card,
.word-card .card-body,
.word-card .example-box,
.word-card .plus-box,
.word-card .tip-box,
.word-card .nuance-box {
  max-width: 100%;
  box-sizing: border-box;
}
.word-card .example-jp,
.word-card .dialogue,
.word-card .word-jp,
.word-card .plus-box,
.word-card .tip-box,
.word-card .nuance-box {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ── H. Konsistensi tema gelap: pastikan border dashed terjemahan terlihat ── */
[data-theme="dark"] .example-id,
[data-theme="dark"] .dialogue-id {
  border-top-color: rgba(255,255,255,0.12) !important;
}

/* ── I. Sepia mode: pertahankan kontras pemisah ── */
body.sepia-mode .example-id,
body.sepia-mode .dialogue-id {
  border-top-color: #d9c9a3 !important;
}

/* ── J. Print-friendly: lebih rapat di kertas (tidak wajib tapi konsisten) ── */
@media print {
  .word-card .example-jp,
  .word-card .dialogue { line-height: 1.7; }
  .word-card .word-jp  { line-height: 1.4; }
}

/* ═══════════════════════════════════════════════════════════════════
   END v19 UI AUDIT
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v20 MOBILE WIDTH MAX — Perluas area konten materi JLPT di smartphone
   Tujuan : konten utama (word-card, section-header, toc, chapter-banner,
            bab-progress-wrap) memanjang ke kanan memanfaatkan lebar
            layar sebanyak mungkin, mendekati pengalaman desktop.
   Strategi (minimal & non-invasif):
     • Hanya berlaku saat lebar layar ≤ 720px (mobile + tablet sempit).
     • Tidak menyentuh struktur HTML, JS, data, warna, tema, navigasi.
     • Tidak mengubah tampilan desktop (>720px tetap di-cap 720px).
     • Tidak menyentuh font-size, line-height, ruby/rt, atau highlight.
     • Memanfaatkan overflow-x:hidden yang sudah ada di body.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

  /* 1. Word-card: persempit kolom nomor & tipiskan padding-body
        agar kalimat contoh / pembentukan / penjelasan punya ruang
        horizontal lebih luas. */
  .word-card {
    grid-template-columns: 38px 1fr !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .card-num {
    font-size: 15px !important;
  }
  .card-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-width: 0;
  }

  /* 2. Section-header / TOC / chapter-banner / bab-progress: full width
        di mobile, padding samping dikecilkan. */
  .section-header,
  .word-list .section-header {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #bab-progress-wrap > *,
  .toc > *,
  .chapter-banner > * {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .toc {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .chapter-banner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .book-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }


  /* 4. Example/Plus/Tip/Nuance/Extra box: dorong inner padding lebih
        ramping agar contoh kalimat punya ruang horizontal lebih luas.
        Tetap menjaga visual identity (background, radius, highlight). */
  .word-card .example-box,
  .word-card .plus-box,
  .word-card .tip-box,
  .word-card .nuance-box,
  .word-card .extra-box,
  .word-card .related-word-box {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
  }

  /* 5. Pengaman: tidak ada anak yang boleh mendorong layout ke kanan. */
  .word-card,
  .card-body,
  .example-box,
  .plus-box,
  .tip-box,
  .nuance-box,
  .extra-box {
    overflow-wrap: anywhere;
  }
}

/* Layar sangat sempit (≤ 380px): rapatkan lagi sedikit padding samping
   agar furigana panjang & contoh kalimat tetap punya ruang horizontal. */
@media (max-width: 380px) {
  .card-body {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .word-card {
    grid-template-columns: 34px 1fr !important;
  }
  .card-num {
    font-size: 14px !important;
  }
  .toc,
  .chapter-banner,
  .book-header,
  .section-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .word-card .example-box,
  .word-card .plus-box,
  .word-card .tip-box,
  .word-card .nuance-box,
  .word-card .extra-box,
  .word-card .related-word-box {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   END v20 MOBILE WIDTH MAX
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v24 — MODE RINGKAS & HIGHLIGHT TOGGLE
   ═══════════════════════════════════════════════════════════════════ */

/* ── 11. Mode Ringkas (Compact) ──────────────────────────────────── */

/* Sembunyikan contoh kalimat, kotak pembentukan, kotak makna, tip */
body.compact-mode .word-card .example-box,
body.compact-mode .word-card .plus-box,
body.compact-mode .word-card .tip-box,
body.compact-mode .word-card .nuance-box,
body.compact-mode .word-card .extra-box,
body.compact-mode .word-card .related-word-box,
body.compact-mode .word-card .dialogue {
  display: none !important;
}

/* Kurangi padding kartu agar tampak ringkas */
body.compact-mode .word-card .card-body {
  padding-bottom: 8px !important;
}

/* Tombol belajar tetap ada tapi diringkas ke bawah */
body.compact-mode .word-card .card-action-row {
  margin-top: 6px;
}

/* Garis bawah tipis antar kartu agar tetap terbaca sebagai daftar */
body.compact-mode .word-card {
  border-bottom: 1px solid var(--card-border, #e0e0e0) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
body.compact-mode .word-list .word-card:last-child {
  border-bottom: none !important;
}

/* Beri sedikit jarak vertikal pada word-meta agar arti tidak terlalu mepet */
body.compact-mode .word-meta {
  margin-top: 3px;
}

/* Tombol toggle di toolbar */
#rtb-compact {
  background: none;
  border: 2px solid var(--card-border, #ddd);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text, #333);
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
#rtb-compact.active {
  border-color: var(--n2-primary) !important;
  background: var(--n2-primary-light) !important;
  color: var(--n2-primary-dark) !important;
}

/* Animasi collapse yang halus — hanya pada perangkat yang tidak prefer reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  body:not(.compact-mode) .word-card .example-box,
  body:not(.compact-mode) .word-card .plus-box,
  body:not(.compact-mode) .word-card .tip-box {
    animation: none;
  }
}

/* ── 12. Highlight Toggle ─────────────────────────────────────────── */

/* Saat highlight-off: hapus semua gaya highlight */
body.highlight-off .highlight {
  background: none !important;
  color: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;
}

/* Tombol toggle highlight di toolbar */
#rtb-highlight {
  background: none;
  border: 2px solid var(--card-border, #ddd);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text, #333);
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
/* Aktif = highlight sedang ON (state default) */
#rtb-highlight.active {
  border-color: var(--n2-primary) !important;
  background: var(--n2-primary-light) !important;
  color: var(--n2-primary-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v25 — FIX: Sembunyikan kata yang sudah dipelajari
   Tambah !important agar tidak tertimpa display:grid / animasi
   ═══════════════════════════════════════════════════════════════════ */

/* Pastikan kartu yang sudah dipelajari benar-benar hilang saat mode aktif */
body.hide-learned-mode .word-card.is-learned {
  display: none !important;
}

/* Tombol hide-learned selalu tampil (tidak ikut compact-mode/hidden) */
.hide-learned-btn {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════
   END v25
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v26 — DESKTOP MODE FIX: Perbaiki layout grid word-card di semua viewport
   Masalah: saat "Request Desktop Site" di Chrome mobile, viewport menjadi
   >720px dan override mobile tidak aktif, tapi grid word-card kolaps
   karena word-card sebagai flex child tidak punya width:100%.
   Solusi: pastikan word-card & word-list selalu width:100%, dan
   card-body tidak kolaps di dalam grid.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. word-list: pastikan selalu 100% lebar parent ── */
.word-list {
  width: 100% !important;
  box-sizing: border-box;
}

/* ── 2. word-card: pastikan selalu 100% lebar word-list ── */
.word-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 3. card-body: min-width:0 KRITIS untuk grid item agar tidak overflow ── */
.card-body {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 4. Desktop (>720px): pastikan grid terdefinisi eksplisit ── */
@media (min-width: 721px) {
  .word-card {
    display: grid !important;
    grid-template-columns: 52px 1fr !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .card-num {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 14px 0 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border-right: 2px solid var(--n2-primary-light, #bbdefb) !important;
    background: var(--n2-primary-light, #bbdefb) !important;
    color: var(--n2-primary-dark, #0d47a1) !important;
    min-width: unset !important;
    width: auto !important;
  }
  .card-num::before {
    content: none !important;
  }
  .card-body {
    padding: 12px 16px 10px !important;
  }
  .section-header {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── 5. Medium (641px–720px): grid juga harus eksplisit ── */
@media (min-width: 641px) and (max-width: 720px) {
  .word-card {
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    max-width: 100% !important;
  }
  .card-num {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 14px 0 0 !important;
    border-right: 2px solid var(--n2-primary-light, #bbdefb) !important;
    background: var(--n2-primary-light, #bbdefb) !important;
    color: var(--n2-primary-dark, #0d47a1) !important;
    min-width: unset !important;
    width: auto !important;
  }
  .card-num::before {
    content: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   END v26 DESKTOP MODE FIX
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v27 — DESKTOP MODE FIX v2: Perbaiki teks vertikal/terpotong
   saat "Request Desktop Site" di Chrome mobile (viewport ~980px).

   Root cause:
   1. word-list dirender langsung ke DOM tanpa wrapper — sehingga
      lebar tergantung block formatting context yang bisa sempit.
   2. word-card grid item "1fr" kolaps ke ~0 karena word-list sendiri
      tidak punya lebar eksplisit dari parent-nya.
   3. Konflik antara width:100% global dan grid column 1fr.

   Solusi:
   - Paksa word-list menjadi block dengan lebar 100% viewport
   - Pastikan body/html tidak overflow-x yang bisa menyebabkan
     kontainer sempit
   - Re-deklarasi grid lebih defensif dengan explicit column size
   ═══════════════════════════════════════════════════════════════════ */

/* ── Akar masalah: html/body harus lebar penuh di semua mode ── */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ── word-list: block + lebar penuh + no overflow ── */
.word-list {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* ── word-card: width penuh (global, sebelum media query) ── */
.word-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ── Desktop ≥721px: grid harus pakai minmax agar 1fr tidak kolaps ── */
@media (min-width: 721px) {
  .word-card {
    display: grid !important;
    /* minmax(0, 1fr) adalah key fix: mencegah 1fr overflow ke kanan */
    grid-template-columns: 52px minmax(0, 1fr) !important;
    max-width: 720px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  .card-num {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 14px 0 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border-right: 2px solid var(--n2-primary-light, #bbdefb) !important;
    background: var(--n2-primary-light, #bbdefb) !important;
    color: var(--n2-primary-dark, #0d47a1) !important;
    min-width: unset !important;
    width: auto !important;
    /* Kunci: height auto agar tidak kolaps */
    height: auto !important;
    overflow: hidden !important;
  }

  .card-num::before {
    content: none !important;
  }

  /* card-body: KRITIS — minmax(0, 1fr) kolom berarti card-body
     tidak perlu width:100% lagi — cukup min-width:0 + overflow-wrap */
  .card-body {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px 10px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow: visible !important;
  }

  /* Semua konten di dalam card-body juga tidak boleh overflow ── */
  .card-body > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  /* Pastikan teks Jepang tidak vertical ── */
  .word-jp {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Kalimat contoh: pastikan horizontal ── */
  .example-jp, .dialogue {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* section-header tetap centered ── */
  .section-header {
    max-width: 720px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* ── Medium (641px–720px): sama, pakai minmax ── */
@media (min-width: 641px) and (max-width: 720px) {
  .word-card {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .card-num {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 14px 0 0 !important;
    border-right: 2px solid var(--n2-primary-light, #bbdefb) !important;
    background: var(--n2-primary-light, #bbdefb) !important;
    color: var(--n2-primary-dark, #0d47a1) !important;
    min-width: unset !important;
    width: auto !important;
  }
  .card-num::before {
    content: none !important;
  }
  .card-body {
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }
}

/* ── Failsafe global: pastikan tidak ada writing-mode vertikal ── */
* {
  writing-mode: horizontal-tb !important;
}
/* Kecuali elemen yang memang butuh vertical (biasanya tidak ada di app ini) */
[style*="writing-mode: vertical"] {
  writing-mode: horizontal-tb !important;
}

/* ═══════════════════════════════════════════════════════════════════
   END v27 DESKTOP MODE FIX v2
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v27b — MOBILE LAYOUT CRITICAL FIX
   Masalah nyata (dari screenshot baru):
   1. Di mobile, word-card masih berperilaku seperti grid karena
      display:block di @media (max-width:640px) tidak cukup spesifik
      atau ada rule lain yang mengoverride kembali ke grid.
   2. card-body sebagai grid item tidak punya cukup ruang (1fr ≈ 0)
      karena grid container tidak memiliki lebar eksplisit.
   
   Solusi: paksa display:block di SEMUA mobile viewport (≤720px)
   dengan specificity yang cukup tinggi, dan pastikan card-body
   menggunakan lebar penuh parent-nya.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Mobile (≤720px): PAKSA display:block, hapus grid sepenuhnya ── */
@media (max-width: 720px) {
  .word-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Reset semua grid properties */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  /* card-num: horizontal di atas (bukan kolom kiri) */
  .card-num {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 8px 14px 2px 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    border-right: none !important;
    border-bottom: none !important;
    background: transparent !important;
    color: var(--n2-primary, #1976d2) !important;
    min-width: unset !important;
    height: auto !important;
  }

  .card-num::before {
    content: "No." !important;
    font-size: 10px;
    margin-right: 3px;
    opacity: 0.6;
  }

  /* card-body: full-width, bukan grid item */
  .card-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 14px 14px 14px !important;
    min-width: unset !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Semua konten di dalam card-body: full-width */
  .card-body > *,
  .word-jp,
  .word-id-ind,
  .example-box,
  .plus-box,
  .tip-box,
  .nuance-box,
  .extra-box,
  .related-word-box,
  .dialogue,
  .card-action-row {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  /* word-jp: ukuran font mobile yang nyaman */
  .word-jp {
    font-size: 20px !important;
    line-height: 1.6 !important;
    display: block !important;
    margin-bottom: 4px !important;
  }

  /* word-id-ind: arti/terjemahan */
  .word-id-ind {
    font-size: 14px !important;
    line-height: 1.6 !important;
    display: block !important;
  }

  /* section-header: full-width */
  .section-header {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   END v27b MOBILE LAYOUT CRITICAL FIX
   ═══════════════════════════════════════════════════════════════════ */