/* PITA HERO INI GELAP DI KEDUA MODE
   ─────────────────────────────────
   .page-hero berlatar rgb(45,45,45) baik pada mode terang maupun gelap —
   diperiksa di Chromium pada kelima halaman Grammar. Judul dan paragraf di
   atasnya memakai warna mode terang, sehingga gelap di atas gelap:

       h1  #6B4F3A cokelat  rasio 1,84
       p   #6E6E6E abu      rasio 2,70

   Keduanya kini terang, dan tetap terang di mode gelap karena latarnya
   memang tidak berubah. Ini BUKAN soal token yang tidak membalik —
   warnanya memang salah sejak awal untuk latar segelap itu. */
/* #6E6E6E adalah nilai --ink-soft pada mode TERANG. Ia dipaku di empat
   tempat, jadi tidak ikut membalik saat mode gelap — abu gelap di atas latar
   gelap, rasio 2,7 (diukur di Chromium, 38 temuan di 8 halaman).

   Kini var(--ink-soft) dengan #6E6E6E sebagai cadangan: mode terang persis
   sama seperti sebelumnya, mode gelap ikut menjadi #9A9890. */
/* Grammar Module Shared Styles — shared by Grammar-N1..N5 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--kyoto-cream,#F8F3E9);color:var(--charcoal,#2D2D2D);min-height:100dvh;display:flex;flex-direction:column}
/* width:100% WAJIB ada. body di berkas ini display:flex;flex-direction:column,
   dan pada flex-item margin kiri-kanan "auto" MEMBATALKAN stretch, sehingga
   .page menyusut ke lebar isinya dan TIDAK PERNAH mencapai max-width-nya:
   diukur 814px, bukan 960px, di layar selebar apa pun. */
.page{max-width:960px;width:100%;margin:0 auto;padding:32px 20px 80px;flex:1}
.page-hero{margin-bottom:32px}
.kicker{display:inline-block;padding:4px 12px;border-radius:16px;background:rgba(107,79,58,.08);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6B4F3A;margin-bottom:10px}
[data-theme="dark"] .kicker{background:rgba(200,155,60,.10);color:#C89B3C}
.page-hero h1{font-family:'Noto Serif JP',serif;font-size:clamp(24px,4vw,36px);font-weight:700;color:#F0E9DC;margin-bottom:8px;line-height:1.25}
[data-theme="dark"] .page-hero h1{color:#C89B3C}
.page-hero p{font-size:14px;color:rgba(255,255,255,.78);max-width:600px}
/* controls */
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.search-box{flex:1;min-width:200px;max-width:100%;box-sizing:border-box;padding:10px 14px;border:1.5px solid rgba(107,79,58,.15);border-radius:9px;font-family:inherit;font-size:14px;background:#FEFCF8;color:#2D2D2D;outline:none;transition:border-color 150ms}
[data-theme="dark"] .search-box{background:#1A1A1A;color:#E8E5DF;border-color:rgba(200,155,60,.15)}
.search-box:focus{border-color:#6B4F3A}
.cat-btn{padding:8px 14px;border-radius:18px;border:1.5px solid rgba(107,79,58,.15);background:none;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all 120ms;color:#6B4F3A;white-space:nowrap}
.cat-btn.active,.cat-btn:hover{background:#6B4F3A;color:#FEF;border-color:#6B4F3A}
[data-theme="dark"] .cat-btn{color:#C89B3C;border-color:rgba(200,155,60,.18)}
[data-theme="dark"] .cat-btn.active{background:#C89B3C;color:#1A1209;border-color:#C89B3C}
/* stats */
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.stat{background:#FEFCF8;border:1px solid rgba(107,79,58,.10);border-radius:9px;padding:8px 14px;text-align:center}
[data-theme="dark"] .stat{background:#1A1A1A;border-color:rgba(200,155,60,.10)}
.stat-n{font-size:20px;font-weight:700;color:#6B4F3A;display:block}
[data-theme="dark"] .stat-n{color:#C89B3C}
.stat-l{font-size:10px;color:var(--ink-soft, #6F6F6F);text-transform:uppercase;letter-spacing:.05em}
/* cards */
.card-grid{display:grid;gap:10px}
.g-card{background:#FEFCF8;border:1px solid rgba(107,79,58,.10);border-radius:12px;padding:16px 18px;cursor:pointer;transition:all 140ms;box-sizing:border-box;min-width:0}
[data-theme="dark"] .g-card{background:#1A1A1A;border-color:rgba(200,155,60,.10)}
.g-card:hover{border-color:#6B4F3A;box-shadow:0 4px 16px rgba(107,79,58,.09)}
[data-theme="dark"] .g-card:hover{border-color:#C89B3C}
.g-card.open{border-color:#6B4F3A;background:rgba(107,79,58,.03)}
[data-theme="dark"] .g-card.open{border-color:#C89B3C;background:rgba(200,155,60,.05)}
.g-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.g-jp{font-family:'Noto Serif JP',serif;font-size:17px;font-weight:700;color:#6B4F3A;min-width:100px}
[data-theme="dark"] .g-jp{color:#C89B3C}
.g-id{font-size:13px;color:#4A4A4A;font-weight:600}
[data-theme="dark"] .g-id{color:#C8C5BF}
.g-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(107,79,58,.08);color:#6B4F3A;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;margin-left:auto}
[data-theme="dark"] .g-tag{background:rgba(200,155,60,.10);color:#C89B3C}
.g-body{display:none;margin-top:12px;padding-top:12px;border-top:1px solid rgba(107,79,58,.08)}
[data-theme="dark"] .g-body{border-top-color:rgba(200,155,60,.08)}
.g-card.open .g-body{display:block}
.g-pattern{font-size:13px;font-weight:600;color:#553C2B;margin-bottom:8px}
[data-theme="dark"] .g-pattern{color:#D4AA56}
.g-example{display:flex;flex-direction:column;gap:4px;background:rgba(107,79,58,.04);border-radius:8px;padding:10px 12px}
[data-theme="dark"] .g-example{background:rgba(200,155,60,.05)}
.g-ex-jp{font-family:'Noto Serif JP',serif;font-size:16px;color:#2D2D2D}
[data-theme="dark"] .g-ex-jp{color:#E8E5DF}
.g-ex-id{font-size:13px;color:var(--ink-soft,#6E6E6E);font-style:italic}
.g-audio{background:none;border:1px solid rgba(107,79,58,.15);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;color:#6B4F3A;margin-top:6px;display:inline-flex;align-items:center;gap:4px}
[data-theme="dark"] .g-audio{border-color:rgba(200,155,60,.18);color:#C89B3C}
/* vocab card */
.v-card{background:#FEFCF8;border:1px solid rgba(107,79,58,.10);border-radius:10px;padding:14px 16px;display:flex;gap:14px;align-items:flex-start;transition:all 130ms}
[data-theme="dark"] .v-card{background:#1A1A1A;border-color:rgba(200,155,60,.10)}
.v-card:hover{border-color:#6B4F3A;box-shadow:0 3px 12px rgba(107,79,58,.08)}
[data-theme="dark"] .v-card:hover{border-color:#C89B3C}
.v-num{font-size:11px;color:#C0BDB7;width:28px;flex-shrink:0;margin-top:3px;text-align:right}
.v-jp{font-family:'Noto Serif JP',serif;font-size:18px;font-weight:700;color:#6B4F3A;display:block;line-height:1.2;margin-bottom:2px}
[data-theme="dark"] .v-jp{color:#C89B3C}
.v-read{font-size:12px;color:#8B6E56;margin-bottom:4px;display:block}
[data-theme="dark"] .v-read{color:rgba(200,155,60,.6)}
.v-id{font-size:13px;color:#4A4A4A;line-height:1.5}
[data-theme="dark"] .v-id{color:#C8C5BF}
.v-actions{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.v-btn{background:none;border:1px solid rgba(107,79,58,.14);border-radius:6px;padding:4px 9px;font-size:12px;cursor:pointer;color:#6B4F3A;transition:all 120ms;white-space:nowrap}
.v-btn:hover{background:rgba(107,79,58,.07)}
[data-theme="dark"] .v-btn{border-color:rgba(200,155,60,.18);color:#C89B3C}
/* latihan */
.quiz-wrap{background:#FEFCF8;border:1px solid rgba(107,79,58,.10);border-radius:14px;padding:24px;max-width:600px;margin:0 auto}
[data-theme="dark"] .quiz-wrap{background:#1A1A1A;border-color:rgba(200,155,60,.10)}
.quiz-q{font-family:'Noto Serif JP',serif;font-size:26px;font-weight:700;color:#6B4F3A;text-align:center;margin-bottom:8px}
[data-theme="dark"] .quiz-q{color:#C89B3C}
.quiz-hint{font-size:13px;color:var(--ink-soft,#6E6E6E);text-align:center;margin-bottom:20px}
.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
@media(max-width:480px){.quiz-choices{grid-template-columns:1fr}.controls{flex-direction:column;align-items:stretch}.search-box{min-width:0;width:100%}}
.qc-btn{padding:12px 14px;border-radius:9px;border:1.5px solid rgba(107,79,58,.14);background:#FEFCF8;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all 130ms;color:#2D2D2D;text-align:left;line-height:1.4}
[data-theme="dark"] .qc-btn{background:#242424;border-color:rgba(200,155,60,.12);color:#E8E5DF}
.qc-btn:hover:not(:disabled){border-color:#6B4F3A;background:rgba(107,79,58,.05)}
.qc-btn.correct{background:#EAF2E8!important;border-color:#5B7C5B!important;color:#5B7C5B!important}
.qc-btn.wrong{background:#FAEAEA!important;border-color:#A63A3A!important;color:#A63A3A!important}
.quiz-feedback{font-size:13px;line-height:1.65;padding:10px 14px;border-radius:8px;min-height:40px;margin-bottom:12px}
.quiz-feedback.ok{background:#EAF2E8;border-left:4px solid #5B7C5B;color:#3A6A3A}
.quiz-feedback.ng{background:#FAEAEA;border-left:4px solid #A63A3A;color:#7A2A2A}
[data-theme="dark"] .quiz-feedback.ok{background:rgba(91,124,91,.15);color:#8FBF8F}
[data-theme="dark"] .quiz-feedback.ng{background:rgba(166,58,58,.15);color:#E07070}
/* pagination */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:20px;flex-wrap:wrap}
.pg-btn{padding:7px 13px;border-radius:8px;border:1px solid rgba(107,79,58,.14);background:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#6B4F3A;transition:all 120ms}
.pg-btn:hover,.pg-btn.active{background:#6B4F3A;color:#FEF;border-color:#6B4F3A}
[data-theme="dark"] .pg-btn{color:#C89B3C;border-color:rgba(200,155,60,.18)}
[data-theme="dark"] .pg-btn.active{background:#C89B3C;color:#1A1209}
.no-result{text-align:center;padding:40px;color:var(--ink-soft, #6F6F6F);font-size:14px}
/* section tabs */
.section-tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid rgba(107,79,58,.10);overflow-x:auto}
[data-theme="dark"] .section-tabs{border-bottom-color:rgba(200,155,60,.10)}
.sec-tab{padding:10px 16px;border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-soft,#6E6E6E);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all 130ms}
.sec-tab.active{color:#6B4F3A;border-bottom-color:#6B4F3A}
[data-theme="dark"] .sec-tab{color:#9A9890}
[data-theme="dark"] .sec-tab.active{color:#C89B3C;border-bottom-color:#C89B3C}
.sec-panel{display:none}.sec-panel.active{display:block}
/* progress bar */
.prog-bar{height:5px;background:rgba(107,79,58,.08);border-radius:3px;margin-bottom:20px;overflow:hidden}
.prog-fill{height:100%;background:#6B4F3A;border-radius:3px;transition:width 400ms}
[data-theme="dark"] .prog-fill{background:#C89B3C}
/* Back nav:not(.kn-nav) */
.back-nav{display:flex;gap:8px;margin-bottom:20px;font-size:13px;flex-wrap:wrap}
.back-nav a{color:#6B4F3A;text-decoration:none;font-weight:600}
[data-theme="dark"] .back-nav a{color:#C89B3C}
.back-nav a:hover{text-decoration:underline}
.back-sep{color:var(--ink-soft, #6F6F6F)}

/* Dark Mode */
[data-theme="dark"] .page{background:var(--kyoto-dark-surface,#1a1a2e)}
[data-theme="dark"] .g-card,[data-theme="dark"] .sec{background:#1e1e2e;border-color:#333}
[data-theme="dark"] .g-head{border-color:#444}
[data-theme="dark"] .search-box{background:#1e1e2e;border-color:#555;color:#ccc}
[data-theme="dark"] .cat-btn{background:#2a2a3e;border-color:#555;color:#ccc}
/* color:#fff di sini menimpa aturan baris 38 yang sudah benar dan
   menghasilkan putih di atas emas terang = 2,56:1 (gagal WCAG AA).
   Teks gelap dipakai supaya cocok dengan --primary mode gelap yang
   memang warna TERANG (emas/cyan). */
[data-theme="dark"] .cat-btn.active{background:var(--primary,#1565c0);color:#17150E}
[data-theme="dark"] .controls select{background:#1e1e2e;border-color:#555;color:#ccc}
[data-theme="dark"] .jp-word{color:#90caf9;border-bottom-color:#90caf9}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP
   ══════════════════════════════════════════════════════════════════
   Sebelum ini berkas hanya punya SATU media query, dan itu pun untuk
   layar <=480px — jadi tampilan lebar memang tidak pernah dirancang.
   Diukur di layar 1920px: teks hanya membentang 774px (40% layar),
   sisanya margin kosong, sementara tiap .g-card cuma berisi kanji,
   arti pendek, dan satu tag — dengan lubang kosong besar di tengah.

   Solusinya menambah kolom, bukan sekadar melebarkan: satu daftar
   176 item selebar 1400px justru lebih sulit dibaca (baris terlalu
   panjang) dan tetap sepanjang itu untuk digulir. */
@media (min-width: 1280px) {
  .page { max-width: 1180px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1760px) {
  .page { max-width: 1460px; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}