:root{
  --paper:#EEF1F3; --paper-2:#E4E9EC; --paper-3:#F8FAFB; --paper-4:#DCE3E7;
  --ink:#1C2229; --ink-2:#4A555F; --ink-3:#7C8A94;
  --rule:#C9D4DA; --rule-2:#DCE4E8;
  --accent:#7D4A73; --accent-soft:rgba(125,74,115,.15); --accent-line:rgba(125,74,115,.45);
  --c-v:#1F5E8C;   --band-v:rgba(31,94,140,.13);
  --c-adj:#3B6B4E; --band-adj:rgba(59,107,78,.14);
  --c-aux:#8A3E76; --band-aux:rgba(138,62,118,.15);
  --c-pt:#8A6230;  --band-pt:rgba(138,98,48,.15);
  --c-n:#2B333B;   --band-n:rgba(43,51,59,.10);
  --c-o:#57517A;   --band-o:rgba(87,81,122,.14);
  --c-kei:#B03A50;
  --hover:rgba(28,34,41,.075);
  --shadow:0 1px 2px rgba(20,30,40,.06), 0 8px 24px rgba(20,30,40,.07);
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#13171B; --paper-2:#1B2126; --paper-3:#222930; --paper-4:#2A323A;
    --ink:#E7ECF0; --ink-2:#AEBAC3; --ink-3:#7B8892;
    --rule:#333D45; --rule-2:#283138;
    --accent:#CC8FC0; --accent-soft:rgba(204,143,192,.18); --accent-line:rgba(204,143,192,.5);
    --c-v:#82B9E2;   --band-v:rgba(130,185,226,.17);
    --c-adj:#88C29C; --band-adj:rgba(136,194,156,.17);
    --c-aux:#DC96CC; --band-aux:rgba(220,150,204,.19);
    --c-pt:#DDB176;  --band-pt:rgba(221,177,118,.18);
    --c-n:#D5DEE5;   --band-n:rgba(213,222,229,.12);
    --c-o:#B0A8D6;   --band-o:rgba(176,168,214,.18);
    --c-kei:#EA8B9D;
    --hover:rgba(231,236,240,.09);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#13171B; --paper-2:#1B2126; --paper-3:#222930; --paper-4:#2A323A;
  --ink:#E7ECF0; --ink-2:#AEBAC3; --ink-3:#7B8892;
  --rule:#333D45; --rule-2:#283138;
  --accent:#CC8FC0; --accent-soft:rgba(204,143,192,.18); --accent-line:rgba(204,143,192,.5);
  --c-v:#82B9E2;   --band-v:rgba(130,185,226,.17);
  --c-adj:#88C29C; --band-adj:rgba(136,194,156,.17);
  --c-aux:#DC96CC; --band-aux:rgba(220,150,204,.19);
  --c-pt:#DDB176;  --band-pt:rgba(221,177,118,.18);
  --c-n:#D5DEE5;   --band-n:rgba(213,222,229,.12);
  --c-o:#B0A8D6;   --band-o:rgba(176,168,214,.18);
  --c-kei:#EA8B9D;
  --hover:rgba(231,236,240,.09);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{height:100dvh}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--gothic); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

/* ── ヘッダ ───────────────────────────── */
header{
  flex:none; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 20px; background:var(--paper-3);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex; align-items:baseline; gap:10px; min-width:0}
.brand h1{
  font-family:var(--mincho); font-weight:600; font-size:20px; margin:0;
  letter-spacing:.14em; white-space:nowrap;
}
.brand .src{
  font-size:11px; color:var(--ink-3); letter-spacing:.08em; white-space:nowrap;
}
.tools{display:flex; align-items:center; gap:14px; margin-inline-start:auto; flex-wrap:wrap}
.grp{display:flex; align-items:center; gap:6px}
.grp>.lab{
  font-size:10px; letter-spacing:.16em; color:var(--ink-3); font-weight:500;
  padding-inline-end:2px;
}
.chip{
  font:inherit; font-size:12px; font-weight:500; line-height:1;
  padding:6px 10px; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--rule);
  transition:background .12s, border-color .12s, color .12s;
}
.chip:hover{background:var(--hover)}
.chip .dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-inline-end:5px; vertical-align:1px; background:currentColor;
}
.chip[aria-pressed="true"]{color:var(--ink); border-color:currentColor}
.chip.v[aria-pressed="true"]{background:var(--band-v); border-color:var(--c-v); color:var(--c-v)}
.chip.adj[aria-pressed="true"]{background:var(--band-adj); border-color:var(--c-adj); color:var(--c-adj)}
.chip.aux[aria-pressed="true"]{background:var(--band-aux); border-color:var(--c-aux); color:var(--c-aux)}
.chip.pt[aria-pressed="true"]{background:var(--band-pt); border-color:var(--c-pt); color:var(--c-pt)}
.chip.n[aria-pressed="true"]{background:var(--band-n); border-color:var(--c-n); color:var(--c-n)}
.chip.o[aria-pressed="true"]{background:var(--band-o); border-color:var(--c-o); color:var(--c-o)}
.chip.kei[aria-pressed="true"]{background:transparent; border-color:var(--c-kei); color:var(--c-kei)}
.chip.plain[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.chip.v .dot{color:var(--c-v)} .chip.adj .dot{color:var(--c-adj)}
.chip.aux .dot{color:var(--c-aux)} .chip.pt .dot{color:var(--c-pt)}
.chip.n .dot{color:var(--c-n)} .chip.o .dot{color:var(--c-o)}
.chip.kei .dot{color:var(--c-kei)}
.step{display:flex; border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.step button{
  font:inherit; font-size:12px; padding:5px 9px; cursor:pointer;
  background:transparent; color:var(--ink-2); border:0;
}
.step button+button{border-inline-start:1px solid var(--rule)}
.step button:hover{background:var(--hover)}

/* ── 本文（縦書き） ───────────────────── */
main{flex:1 1 auto; display:flex; min-height:0}
#scroll{
  flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden;
  background:var(--paper);
  scrollbar-width:thin;
}
#text{
  writing-mode:vertical-rl; text-orientation:mixed;
  height:100%; padding:34px 40px 30px 40px;
  font-family:var(--mincho);
  font-size:var(--fs,21px); line-height:2.05; letter-spacing:.02em;
}
section.dan{
  display:flex; flex-direction:column; align-items:stretch;
  gap:16px; margin-block-end:38px; height:100%;
}
.dan-mark{
  flex:none; font-family:var(--gothic); font-weight:500;
  font-size:11px; letter-spacing:.3em; color:var(--ink-3);
  border-block-start:2px solid var(--accent-line);
  padding-block-start:13px;
}
.body{flex:none}
.yaku{
  flex:none; font-size:.72em; line-height:2.0; color:var(--ink-2);
  border-block-start:1px dashed var(--rule);
  padding-block-start:16px;
}
.yaku .tag{
  font-family:var(--gothic); font-size:.82em; font-weight:500;
  letter-spacing:.2em; color:var(--accent); display:block; margin-block-end:.4em;
}
body:not([data-yaku="on"]) .yaku{display:none}

.w{cursor:pointer; border-radius:3px; transition:background .1s ease}
.w:hover{background:var(--hover)}
.w.sel{background:var(--accent-soft); box-shadow:0 0 0 1.5px var(--accent-line)}
[data-color="on"] .w.v{color:var(--c-v)}
[data-color="on"] .w.adj{color:var(--c-adj)}
[data-color="on"] .w.aux{color:var(--c-aux)}
[data-color="on"] .w.pt{color:var(--c-pt)}
[data-color="on"] .w.o{color:var(--c-o)}
[data-color="on"] .w.n{color:var(--c-n)}
[data-hl~="v"] .w.v{background:var(--band-v)}
[data-hl~="adj"] .w.adj{background:var(--band-adj)}
[data-hl~="aux"] .w.aux{background:var(--band-aux)}
[data-hl~="pt"] .w.pt{background:var(--band-pt)}
[data-hl~="n"] .w.n{background:var(--band-n)}
[data-hl~="o"] .w.o{background:var(--band-o)}
[data-kei="on"] .w.kei{
  -webkit-text-emphasis:sesame var(--c-kei); text-emphasis:sesame var(--c-kei);
  -webkit-text-emphasis-position:over right; text-emphasis-position:over right;
}
.w.sel{background:var(--accent-soft)!important}
.pn{color:var(--ink-3)}

/* ── 語釈パネル ───────────────────────── */
aside{
  flex:none; width:330px; background:var(--paper-3);
  border-inline-end:1px solid var(--rule);
  display:flex; flex-direction:column; min-height:0; order:-1;
}
.tabs{flex:none; display:flex; border-block-end:1px solid var(--rule)}
.tabs button{
  flex:1; font:inherit; font-size:12px; font-weight:500; letter-spacing:.12em;
  padding:11px 4px; background:transparent; border:0; cursor:pointer;
  color:var(--ink-3); border-block-end:2px solid transparent; margin-block-end:-1px;
}
.tabs button[aria-selected="true"]{color:var(--accent); border-block-end-color:var(--accent)}
.tabs button:hover{background:var(--hover)}
.pane{flex:1 1 auto; overflow-y:auto; padding:20px}
.pane[hidden]{display:none}

.empty{color:var(--ink-3); font-size:13px; line-height:1.9; padding-block-start:28px}
.empty .k{
  font-family:var(--mincho); font-size:34px; color:var(--rule);
  display:block; margin-block-end:14px; letter-spacing:.2em;
}
.hd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-block-end:4px}
.hd .word{font-family:var(--mincho); font-size:32px; font-weight:600; line-height:1.25}
.hd .yomi{font-size:12px; color:var(--ink-3); letter-spacing:.06em}
.pos{
  display:inline-block; font-size:11px; font-weight:500; letter-spacing:.1em;
  padding:3px 9px; border-radius:999px; border:1px solid currentColor; margin-block-end:16px;
}
.pos.v{color:var(--c-v); background:var(--band-v)}
.pos.adj{color:var(--c-adj); background:var(--band-adj)}
.pos.aux{color:var(--c-aux); background:var(--band-aux)}
.pos.pt{color:var(--c-pt); background:var(--band-pt)}
.pos.n{color:var(--c-n); background:var(--band-n)}
.pos.o{color:var(--c-o); background:var(--band-o)}
.row{display:grid; grid-template-columns:62px 1fr; gap:6px 12px; margin-block-end:12px}
.row dt{
  font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); font-weight:500;
  padding-block-start:3px;
}
.row dd{margin:0; font-size:14px; line-height:1.75}
.row dd .mean{font-family:var(--mincho); font-size:15.5px}
.note{
  margin-block-start:16px; padding:12px 14px; border-radius:8px;
  background:var(--paper-2); border-inline-start:3px solid var(--accent-line);
  font-size:13px; line-height:1.85; color:var(--ink-2);
}
.note b{color:var(--accent); font-weight:500; letter-spacing:.06em}
.keitag{
  display:inline-flex; align-items:center; gap:5px; font-size:12px;
  color:var(--c-kei); border:1px solid currentColor; border-radius:6px;
  padding:2px 8px; margin-block-start:14px;
}
.ctx{
  margin-block-start:18px; padding-block-start:14px; border-block-start:1px solid var(--rule-2);
  font-family:var(--mincho); font-size:14px; line-height:1.9; color:var(--ink-3);
}
.ctx .me{color:var(--ink); background:var(--accent-soft); border-radius:3px; padding:0 2px}
.nav{display:flex; gap:8px; margin-block-start:18px}
.nav button{
  flex:1; font:inherit; font-size:12px; padding:8px; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:8px; color:var(--ink-2);
}
.nav button:hover{background:var(--paper-4)}

.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.list li button{
  width:100%; text-align:start; font:inherit; cursor:pointer; display:flex;
  align-items:baseline; gap:10px; padding:8px 10px; border-radius:7px;
  background:transparent; border:0; color:var(--ink-2);
}
.list li button:hover{background:var(--hover)}
.list li button.on{background:var(--accent-soft); color:var(--ink)}
.list .s{font-family:var(--mincho); font-size:17px; color:var(--c-aux); min-width:2.6em}
.list .g{font-size:11.5px; color:var(--ink-3); line-height:1.5}
.list .d{
  font-size:10px; color:var(--ink-3); margin-inline-start:auto; flex:none;
  border:1px solid var(--rule); border-radius:4px; padding:1px 5px;
}
.listhead{
  font-size:11.5px; color:var(--ink-3); line-height:1.8;
  padding-block-end:12px; margin-block-end:8px; border-block-end:1px solid var(--rule-2);
}

.legend{
  flex:none; border-block-start:1px solid var(--rule); padding:12px 20px;
  font-size:11px; color:var(--ink-3); line-height:1.9;
}
.legend .sesame{
  -webkit-text-emphasis:sesame var(--c-kei); text-emphasis:sesame var(--c-kei);
  color:var(--ink-2); font-family:var(--mincho);
}

@media (max-width:820px){
  main{flex-direction:column}
  /* 縦書き欄は flex で高さを確定させる（auto にすると行が折り返せずつぶれる） */
  #scroll{order:0; flex:1 1 auto; min-height:0}
  aside{
    order:1; flex:none; width:100%;
    height:42vh; height:42dvh; max-height:none;
    border-inline-end:0; border-block-start:1px solid var(--rule);
    box-shadow:var(--shadow);
  }
  #text{font-size:var(--fs,19px); padding:22px 18px}
  header{
    flex-direction:row; flex-wrap:wrap; align-items:center;
    padding:8px 11px 7px; gap:6px 8px;
  }
  .brand{flex:1 1 auto; min-width:0; gap:7px}
  .brand h1{font-size:17px}
  .brand .src{display:none}
  .brand .work{overflow:hidden; text-overflow:ellipsis}
  .tools{
    flex:1 0 100%; margin-inline-start:0; gap:10px;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-block-end:2px;
  }
  .tools::-webkit-scrollbar{display:none}
  .grp{flex:none}
  .chip{padding:6px 9px; font-size:11.5px; white-space:nowrap}
  .grp>.lab{white-space:nowrap}
  .pane{padding:15px 16px}
  .hd .word{font-size:27px}
  .legend{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}

/* ══ ヘッダのナビ（作品ページ共通） ═══════════════ */
.back{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--ink-3); text-decoration:none;
  padding:5px 9px; border-radius:8px; border:1px solid transparent;
  white-space:nowrap;
}
.back:hover{background:var(--hover); color:var(--ink-2); border-color:var(--rule)}
.brand .work{
  font-family:var(--mincho); font-size:12.5px; color:var(--ink-3);
  letter-spacing:.1em; white-space:nowrap;
}

/* ══ 作品一覧（index.html） ═══════════════════════ */
body.home{display:block; overflow:auto; height:auto; min-height:100dvh}
.home-wrap{max-width:1020px; margin:0 auto; padding:0 24px 72px}
.hero{padding:72px 0 34px; border-block-end:1px solid var(--rule); margin-block-end:40px}
.hero .eyebrow{
  font-size:11px; letter-spacing:.34em; color:var(--accent);
  font-weight:500; margin:0 0 16px;
}
.hero h1{
  font-family:var(--mincho); font-weight:600; font-size:clamp(30px,5vw,44px);
  letter-spacing:.1em; margin:0 0 18px; text-wrap:balance; line-height:1.4;
}
.hero p{
  margin:0; max-width:34em; font-size:14.5px; line-height:2.0; color:var(--ink-2);
}
.hero .counts{
  display:flex; gap:26px; margin-block-start:26px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-3);
}
.hero .counts b{
  display:block; font-family:var(--mincho); font-size:26px; font-weight:600;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2;
}
.genre{margin-block-end:44px}
.genre>h2{
  font-size:11px; letter-spacing:.3em; font-weight:500; color:var(--ink-3);
  margin:0 0 16px; padding-block-end:10px; border-block-end:1px solid var(--rule-2);
}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:14px}
a.card{
  display:flex; gap:16px; text-decoration:none; color:inherit;
  background:var(--paper-3); border:1px solid var(--rule);
  border-radius:12px; padding:18px 18px 16px;
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
a.card:hover{border-color:var(--accent-line); transform:translateY(-2px); box-shadow:var(--shadow)}
.card .spine{
  flex:none; writing-mode:vertical-rl; font-family:var(--mincho);
  font-size:14px; letter-spacing:.16em; color:var(--accent);
  border-inline-end:1px solid var(--rule-2); padding-inline-end:13px;
}
.card .meat{min-width:0; display:flex; flex-direction:column; gap:7px}
.card h3{
  font-family:var(--mincho); font-size:20px; font-weight:600; margin:0;
  letter-spacing:.05em; line-height:1.4;
}
.card .by{font-size:11.5px; color:var(--ink-3); letter-spacing:.06em}
.card .lede{font-size:12.5px; line-height:1.8; color:var(--ink-2); margin:0}
.card .stats{
  display:flex; gap:8px; flex-wrap:wrap; margin-block-start:auto;
  padding-block-start:6px; font-size:10.5px; color:var(--ink-3);
}
.card .stats span{
  border:1px solid var(--rule); border-radius:5px; padding:2px 7px;
  font-variant-numeric:tabular-nums;
}
.card .stats span.aux{color:var(--c-aux); border-color:currentColor}
.home-foot{
  border-block-start:1px solid var(--rule); padding-block-start:22px;
  font-size:12px; line-height:2.0; color:var(--ink-3);
}
.home-foot code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
  background:var(--paper-2); border-radius:4px; padding:1px 5px;
}
@media (max-width:820px){
  .home-wrap{padding:0 16px 56px}
  .hero{padding:44px 0 26px; margin-block-end:30px}
  .cards{grid-template-columns:1fr}
}

/* ══ 読み終わりの見返し ═══════════════════════════ */
.endleaf{justify-content:flex-start}
a.nextwork{
  display:block; text-decoration:none; color:inherit;
  border-block-start:1px solid var(--rule); padding-block-start:16px;
  padding-inline:6px 0;
}
a.nextwork:hover .nw-title{color:var(--accent)}
.nw-lab{
  display:block; font-family:var(--gothic); font-size:11px;
  letter-spacing:.28em; color:var(--ink-3); margin-block-end:12px;
}
.nw-title{font-family:var(--mincho); font-size:.9em; color:var(--ink-2)}
.body br+.w, .body br+.pn{margin-block-start:.4em}

/* ══ お気に入りの星 ══════════════════════════════ */
:root{ --star:#C08A1E; --star-soft:rgba(192,138,30,.13); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --star:#E7C063; --star-soft:rgba(231,192,99,.16); } }
:root[data-theme="dark"]{ --star:#E7C063; --star-soft:rgba(231,192,99,.16); }
.star{
  font:inherit; font-size:17px; line-height:1; cursor:pointer;
  background:transparent; border:0; padding:5px 7px; border-radius:9px;
  color:var(--rule); flex:none;
  transition:transform .14s ease, background .14s ease;
}
.star:hover{color:var(--ink-3); background:var(--hover)}
.star[aria-pressed="true"]{color:var(--star)}
.star[aria-pressed="true"]:hover{background:var(--star-soft)}
a.card{position:relative}
.card .meat{padding-inline-end:24px}
.card .star{position:absolute; top:10px; inset-inline-end:8px}
header .star{font-size:18px}

/* ══ お気に入りの棚（作品一覧の先頭） ════════════ */
.shelf>h2{display:flex; align-items:center; gap:9px}
.shelf>h2 .n{
  font-family:var(--gothic); font-size:10px; letter-spacing:0;
  color:var(--star); border:1px solid currentColor; border-radius:999px;
  padding:1px 7px; font-variant-numeric:tabular-nums;
}
.fav-empty{
  border:1px dashed var(--rule); border-radius:12px; padding:20px 22px;
  font-size:13px; line-height:1.9; color:var(--ink-3);
}
.fav-empty .star{color:var(--star); pointer-events:none; padding:0 2px}

/* ══ 白文（漢文の原文） ══════════════════════════ */
.hakubun{
  flex:none; font-size:.8em; line-height:2.15; letter-spacing:.16em;
  color:var(--ink-2);
  border-block-start:1px dotted var(--rule);
  padding-block-start:16px;
}
.hakubun .tag{
  font-family:var(--gothic); font-size:.8em; font-weight:500; letter-spacing:.2em;
  color:var(--ink-3); display:block; margin-block-end:.5em;
}
body:not([data-haku="on"]) .hakubun{display:none}
#hakuBtn[hidden]{display:none}

/* ══ 練習ページ（フラッシュカード／確認問題） ════ */
body.drill{display:block; overflow:auto; height:auto; min-height:100dvh}
.drill-wrap{max-width:660px; margin:0 auto; padding:28px 22px 80px}
.drill-tabs{
  display:flex; gap:4px; background:var(--paper-2); border:1px solid var(--rule);
  border-radius:12px; padding:4px; margin-block-end:8px;
}
.drill-tabs button{
  flex:1; font:inherit; font-size:13px; font-weight:500; letter-spacing:.08em;
  padding:9px 8px; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--ink-3);
}
.drill-tabs button[aria-selected="true"]{background:var(--paper-3); color:var(--ink); box-shadow:var(--shadow)}
.drill-note{font-size:11.5px; color:var(--ink-3); line-height:1.9; margin:0 0 20px}
.pane-d[hidden]{display:none}

.bar{height:4px; border-radius:99px; background:var(--paper-4); overflow:hidden; margin-block-end:8px}
.bar::before{content:""; display:block; height:100%; width:var(--p,0%); background:var(--star); transition:width .3s ease}
.stat{font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; margin-block-end:16px; font-variant-numeric:tabular-nums}

.flash{
  background:var(--paper-3); border:1px solid var(--rule); border-radius:16px;
  padding:34px 26px; min-height:280px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; box-shadow:var(--shadow);
}
.flash:hover{border-color:var(--accent-line)}
.flash .fside{display:none; flex-direction:column; align-items:center; gap:12px; width:100%}
.flash:not(.flipped) .front{display:flex}
.flash.flipped .back{display:flex}
.flash .dan{font-size:10px; letter-spacing:.24em; color:var(--ink-3)}
.flash .term{font-family:var(--mincho); font-size:44px; font-weight:600; line-height:1.3; letter-spacing:.04em}
.flash .ctx{font-family:var(--mincho); font-size:13.5px; line-height:2.0; color:var(--ink-3); max-width:34em}
.flash .hint{font-size:11px; color:var(--ink-3); letter-spacing:.1em; margin-block-start:6px}
.flash .yomi{font-size:12.5px; color:var(--ink-3); letter-spacing:.1em}
.flash .mean{font-family:var(--mincho); font-size:21px; line-height:1.7; max-width:24em}
.flash .katsu{font-size:12.5px; color:var(--ink-2)}
.flash .note{
  font-size:12.5px; line-height:1.85; color:var(--ink-2); text-align:start;
  background:var(--paper-2); border-inline-start:3px solid var(--accent-line);
  border-radius:8px; padding:11px 13px; margin-block-start:4px;
}
.flash .note b{color:var(--accent); font-weight:500}

.row2{display:flex; gap:9px; margin-block-start:16px; flex-wrap:wrap; justify-content:center}
.btn{
  font:inherit; font-size:13px; font-weight:500; padding:10px 18px; cursor:pointer;
  border-radius:10px; border:1px solid var(--accent-line);
  background:var(--accent-soft); color:var(--accent); text-decoration:none;
  display:inline-flex; align-items:center;
}
.btn:hover{background:var(--accent); color:var(--paper-3); border-color:var(--accent)}
.btn.ghost{background:transparent; border-color:var(--rule); color:var(--ink-2)}
.btn.ghost:hover{background:var(--hover); color:var(--ink); border-color:var(--ink-3)}

.done{text-align:center; padding:44px 12px; color:var(--ink-2)}
.done .big{
  display:block; font-family:var(--mincho); font-size:46px; font-weight:600;
  color:var(--accent); margin-block-end:14px; font-variant-numeric:tabular-nums;
}
.done p{font-size:14px; line-height:1.9; margin:0}

.qhead{display:flex; justify-content:space-between; align-items:baseline; margin-block-end:14px}
.qn{font-size:11px; letter-spacing:.2em; color:var(--ink-3)}
.qscore{font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.qctx{
  font-family:var(--mincho); font-size:15px; line-height:2.1; color:var(--ink-2);
  background:var(--paper-2); border-radius:10px; padding:14px 16px; margin:0 0 16px;
}
.qtext{font-size:17px; font-weight:500; line-height:1.7; margin:0 0 18px; text-wrap:balance}
.opts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.opt{
  width:100%; text-align:start; font:inherit; font-size:14px; line-height:1.7;
  padding:13px 16px; border-radius:11px; cursor:pointer;
  background:var(--paper-3); border:1px solid var(--rule); color:var(--ink);
}
.opt:hover:not(:disabled){border-color:var(--accent-line); background:var(--accent-soft)}
.opt:disabled{cursor:default; opacity:.62}
.opt.right{border-color:#3F8F5E; background:rgba(63,143,94,.14); opacity:1}
.opt.wrong{border-color:#C0504E; background:rgba(192,80,78,.14); opacity:1}
.verdict{
  margin-block-start:18px; padding:15px 17px; border-radius:11px; font-size:13.5px;
  line-height:1.85; background:var(--paper-2); border-inline-start:3px solid var(--rule);
}
.verdict.ok{border-inline-start-color:#3F8F5E}
.verdict.ng{border-inline-start-color:#C0504E}
.verdict b{letter-spacing:.08em}
.verdict .note{
  margin-block-start:9px; font-size:12.5px; color:var(--ink-2);
  padding-block-start:9px; border-block-start:1px solid var(--rule-2);
}
.verdict .note b{color:var(--accent); font-weight:500}
.verdict .row2{justify-content:flex-start}
@media (max-width:820px){
  .drill-wrap{padding:20px 15px 64px}
  .flash{padding:28px 18px; min-height:240px}
  .flash .term{font-size:36px}
}

/* 意味→語 の選択肢は語を大きく見せる */
.opt.big{font-family:var(--mincho); font-size:19px; letter-spacing:.04em; padding:12px 16px}
/* 間違えた語の振り返り */
.misslist{
  list-style:none; margin:22px auto 4px; padding:14px 0 0; max-width:30em;
  border-block-start:1px solid var(--rule-2); text-align:start;
  display:flex; flex-direction:column; gap:9px;
}
.misslist li{display:flex; gap:14px; align-items:baseline; font-size:13px}
.misslist .s{
  font-family:var(--mincho); font-size:18px; color:var(--accent);
  flex:none; min-width:4.5em;
}
.misslist .m{color:var(--ink-2); line-height:1.7}

/* ══ 読み仮名（ルビ） ════════════════════════════ */
rt{
  font-family:var(--gothic); font-size:.4em; font-weight:400;
  letter-spacing:0; color:var(--ink-3);
}
body[data-ruby="off"] rt{display:none}
[data-color="on"] .w.v rt, [data-color="on"] .w.adj rt,
[data-color="on"] .w.aux rt, [data-color="on"] .w.pt rt,
[data-color="on"] .w.n rt, [data-color="on"] .w.o rt{color:inherit; opacity:.7}

/* ══ 句法 ════════════════════════════════════════ */
:root{ --ku:#1F5E8C; --imp-band:rgba(192,138,30,.20); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ku:#82B9E2; --imp-band:rgba(231,192,99,.20); } }
:root[data-theme="dark"]{ --ku:#82B9E2; --imp-band:rgba(231,192,99,.20); }
.w.ku{
  text-decoration:underline; text-decoration-color:var(--star);
  text-decoration-thickness:2px; text-underline-offset:.28em;
}
[data-hl~="imp"] .w.imp{background:var(--imp-band)}
.chip.imp .dot{color:var(--star)}
.chip.imp[aria-pressed="true"]{background:var(--imp-band); border-color:var(--star); color:var(--star)}
.legend .kuline{
  text-decoration:underline; text-decoration-color:var(--star);
  text-decoration-thickness:2px; text-underline-offset:.2em; color:var(--ink-2);
}
.kutag{
  display:inline-block; margin-inline-start:7px; margin-block-end:16px;
  font-size:11px; font-weight:500; letter-spacing:.08em;
  color:var(--star); border:1px solid currentColor; border-radius:999px; padding:3px 9px;
}
.kugroup{margin-block-end:16px}
.kugroup h3{
  font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--star);
  margin:0 0 6px; padding-block-end:5px; border-block-end:1px solid var(--rule-2);
}
.kugroup .list .s{color:var(--star)}
.tabs button{padding:11px 2px; font-size:11.5px; letter-spacing:.06em}

/* ══ 出題の範囲 ══════════════════════════════════ */
.scope{display:flex; gap:6px; margin-block-end:16px; flex-wrap:wrap}
.scope[hidden]{display:none}
.scope button{
  font:inherit; font-size:11.5px; font-weight:500; letter-spacing:.06em;
  padding:6px 12px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--rule); color:var(--ink-3);
}
.scope button:hover{background:var(--hover); color:var(--ink-2)}
.scope button[aria-pressed="true"]{
  background:var(--imp-band); border-color:var(--star); color:var(--star);
}
.kuinline{color:var(--star); font-weight:500}

/* ══ 頻出ポイント ════════════════════════════════ */
:root{ --spot:#B0374C; --spot-band:rgba(176,55,76,.16); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --spot:#EE8A9C; --spot-band:rgba(238,138,156,.18); } }
:root[data-theme="dark"]{ --spot:#EE8A9C; --spot-band:rgba(238,138,156,.18); }
[data-hl~="spot"] .w.spot{
  background:var(--spot-band); box-shadow:0 0 0 1px var(--spot) inset; border-radius:4px;
}
.chip.spot .dot{color:var(--spot)}
.chip.spot[aria-pressed="true"]{background:var(--spot-band); border-color:var(--spot); color:var(--spot)}
.spots{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.spots li{border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--paper-2)}
.sq{
  width:100%; text-align:start; font:inherit; cursor:pointer; display:flex;
  flex-direction:column; gap:6px; padding:12px 13px; background:transparent; border:0; color:var(--ink);
}
.sq:hover{background:var(--hover)}
.sq .tt{
  align-self:flex-start; font-size:10px; letter-spacing:.14em; color:var(--spot);
  border:1px solid currentColor; border-radius:999px; padding:2px 8px;
}
.sq .qq{font-size:13px; line-height:1.8}
.sa{padding:0 13px 13px; font-size:13px; line-height:1.85}
.sa .ans{
  margin:0; padding:11px 13px; border-radius:8px; background:var(--paper-3);
  border-inline-start:3px solid var(--spot); color:var(--ink);
}
.sa .note{
  margin-block-start:9px; padding:0; background:none; border:0;
  font-size:12px; color:var(--ink-3); line-height:1.8;
}
.sa .jump{
  margin-block-start:10px; font:inherit; font-size:11.5px; cursor:pointer;
  background:transparent; border:1px solid var(--rule); border-radius:8px;
  padding:6px 11px; color:var(--ink-2);
}
.sa .jump:hover{background:var(--hover); color:var(--ink); border-color:var(--spot)}
.stat .tt{
  color:var(--spot); border:1px solid currentColor; border-radius:999px;
  padding:1px 8px; font-size:10px; letter-spacing:.12em;
}
.flash .qq{
  font-family:var(--mincho); font-size:20px; line-height:1.95; text-align:start;
  max-width:26em;
}
.flash .ans{
  font-family:var(--mincho); font-size:17px; line-height:1.95; text-align:start;
  margin:0; max-width:28em;
}

/* ══ 辞書（単語帳）と活用表 ══════════════════════ */
.lex, .conj{
  margin-block-start:16px; border:1px solid var(--rule);
  border-radius:9px; background:var(--paper-2); overflow:hidden;
}
.lex-head, .conj-head{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:9px 12px; border-block-end:1px solid var(--rule);
  background:var(--paper-4);
}
.lex-head .w, .conj-head .w{font-family:var(--mincho); font-size:16px; letter-spacing:.04em}
.lex-head .y{font-size:11px; color:var(--ink-3)}
.lex-head .p, .conj-head .p{font-size:11px; color:var(--ink-2)}
.lex-head .src, .conj-head .src{
  margin-inline-start:auto; font-size:9.5px; letter-spacing:.18em;
  color:var(--ink-3); border:1px solid var(--rule); border-radius:4px; padding:1px 6px;
}
ol.senses{margin:0; padding:10px 12px 10px 0; list-style:none; counter-reset:sense}
ol.senses li{
  counter-increment:sense; position:relative; padding-inline-start:34px;
  font-size:13px; line-height:1.8; margin-block-end:3px;
}
ol.senses li::before{
  content:"①②③④⑤⑥" ; content:counter(sense, decimal);
  position:absolute; inset-inline-start:12px; top:0;
  font-size:11px; color:var(--accent); font-variant-numeric:tabular-nums;
  border:1px solid var(--accent-line); border-radius:50%;
  width:15px; height:15px; line-height:14px; text-align:center;
}
.lex-note{
  margin:0; padding:9px 12px; font-size:12px; line-height:1.8; color:var(--ink-2);
  border-block-start:1px dashed var(--rule);
}
.conj-meta{
  display:flex; flex-wrap:wrap; gap:4px 14px; padding:8px 12px;
  font-size:11.5px; color:var(--ink-2); border-block-end:1px dashed var(--rule);
}
.conj-meta b{
  font-weight:500; color:var(--ink-3); letter-spacing:.1em;
  font-size:10px; margin-inline-end:5px;
}
.conj-scroll{overflow-x:auto}
.conj table{border-collapse:collapse; width:100%; min-width:300px}
.conj th, .conj td{
  border-inline-end:1px solid var(--rule); padding:6px 4px; text-align:center;
  font-size:11px; line-height:1.45;
}
.conj th:last-child, .conj td:last-child{border-inline-end:0}
.conj th{
  font-weight:500; color:var(--ink-3); letter-spacing:.04em;
  border-block-end:1px solid var(--rule); background:var(--paper-3);
}
.conj td{font-family:var(--mincho); font-size:13px; color:var(--ink); padding:9px 4px}
.conj th.on{color:var(--accent); background:var(--accent-soft)}
.conj td.on{background:var(--accent-soft); color:var(--accent); font-weight:600}

/* カードをめくったときに下へ出す辞書・活用表 */
.cardref{max-width:560px; margin:14px auto 0; text-align:start}
.cardref .lex, .cardref .conj{margin-block-start:10px}

/* ══ 拡大縮小 ═══════════════════════════════════ */
#sizer{position:relative}
#stage{position:absolute; inset-block-start:0; inset-inline-start:0; transform-origin:0 0}
#scroll[data-zoomed="on"]{overflow-y:auto}
.zoomlevel{
  font-size:11px; color:var(--ink-3); min-width:3.4em; text-align:center;
  font-variant-numeric:tabular-nums;
}

body[data-pan="on"] #scroll{cursor:grab}

/* ══ PDF 書き出し ════════════════════════════════ */
/* 画面では見えないが、組版の寸法を測れるように置いておく */
#printroot{
  position:fixed; inset-block-start:0; inset-inline-start:0;
  width:0; height:0; overflow:hidden; visibility:hidden; z-index:-1;
}
.pdfdlg{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,14,18,.45); backdrop-filter:blur(2px);
}
.pdfdlg[hidden]{display:none}
.pd-box{
  width:min(460px, 100%); max-height:calc(100vh - 40px); overflow:auto;
  background:var(--paper-3); border:1px solid var(--rule);
  border-radius:14px; box-shadow:var(--shadow);
}
.pd-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-block-end:1px solid var(--rule); background:var(--paper-4);
}
.pd-head b{font-size:13px; letter-spacing:.1em; font-weight:600}
.pd-head .close{margin-inline-start:auto}
.pd-body{padding:14px}
.pd-row{display:flex; align-items:center; gap:10px; margin-block-end:10px}
.pd-lab{font-size:11px; color:var(--ink-3); letter-spacing:.1em; min-width:5.5em}
.pd-seg{display:flex; gap:4px; flex-wrap:wrap}
.pd-seg button{
  font:inherit; font-size:11.5px; padding:6px 11px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--rule); color:var(--ink-2);
}
.pd-seg button:hover{background:var(--hover)}
.pd-seg button[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent);
}
.pd-seg.bgseg button{display:inline-flex; align-items:center; gap:6px}
.pd-seg.bgseg i{
  width:13px; height:13px; border-radius:3px; display:inline-block;
  box-shadow:0 0 0 1px rgba(128,128,128,.45) inset;
}
.pd-checks{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.pd-checks label{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); cursor:pointer}
.pd-note{
  margin:14px 0 0; padding:10px 12px; border-radius:9px; background:var(--paper-2);
  font-size:11.5px; line-height:1.8; color:var(--ink-2);
}
.pd-note b{color:var(--accent); font-variant-numeric:tabular-nums}
.pd-foot{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-block-start:1px solid var(--rule); background:var(--paper-2);
}
.pd-hint{font-size:10.5px; color:var(--ink-3); line-height:1.6; flex:1}
.btnp{
  font:inherit; font-size:12.5px; font-weight:600; padding:9px 20px; border-radius:9px;
  cursor:pointer; background:var(--accent); color:#fff; border:0; white-space:nowrap;
}
.btnp:hover{filter:brightness(1.08)}

/* ── 紙面そのもの ── */
#printroot .measure{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mincho); font-size:var(--pfs,13px);
  line-height:var(--plh,1.9); letter-spacing:var(--pls,.02em);
  position:absolute; inset-block-start:0; inset-inline-start:0;
  width:max-content;                 /* 縦書きでは width が行数の向き */
}
#printroot .pp{
  box-sizing:border-box; break-after:page; page-break-after:always;
  background:var(--pbg,#fff); color:var(--pink,#111);
}
#printroot .pp:last-child{break-after:auto; page-break-after:auto}
#printroot .pp header{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--gothic); font-size:8.5pt; color:var(--pink,#111); opacity:.6;
  padding-block-end:2mm; margin-block-end:2mm; border-block-end:.4pt solid #bbb;
}
#printroot .ppbody{
  writing-mode:vertical-rl; text-orientation:mixed; overflow:hidden;
  font-family:var(--mincho); font-size:var(--pfs,13px);
  line-height:var(--plh,1.9); letter-spacing:var(--pls,.02em);
  color:var(--pink,#111);
}
#printroot .pdan{
  font-family:var(--gothic); font-size:.62em; letter-spacing:.24em; color:var(--pink,#111); opacity:.7;
  border-block-start:1.2pt solid #999; padding-block-start:1.5mm; margin-inline:0 1.5mm;
}
#printroot .phaku{
  font-size:.78em; color:var(--pink,#111); opacity:.85; border-block-start:.4pt dotted #999;
  padding-block-start:1.5mm; margin-inline-end:1.5mm;
}
#printroot .pyaku{
  font-size:.72em; color:var(--pink,#111); opacity:.72; border-block-start:.4pt dashed #aaa;
  padding-block-start:1.5mm; margin-inline-end:1.5mm; line-height:1.8;
}
#printroot .kei{-webkit-text-emphasis:sesame #b03a50; text-emphasis:sesame #b03a50;
  -webkit-text-emphasis-position:over right; text-emphasis-position:over right}
#printroot .mark{text-decoration:underline; text-decoration-color:#c08a1e; text-underline-offset:.28em}
#printroot rt{font-family:var(--gothic); font-size:.4em; color:var(--pink,#111); opacity:.65; letter-spacing:0}
#printroot .pn{color:var(--pink,#111); opacity:.6}
#printroot[data-color="on"] .t.v{color:#1f5e8c}
#printroot[data-color="on"] .t.adj{color:#3b6b4e}
#printroot[data-color="on"] .t.aux{color:#8a3e76}
#printroot[data-color="on"] .t.pt{color:#8a6230}
#printroot[data-color="on"] .t.o{color:#57517a}

@media print{
  html, body{height:auto !important; overflow:visible !important; background:#fff !important}
  body{display:block !important; margin:0 !important}
  body > *{display:none !important}
  body > #printroot{
    display:block !important; position:static !important;
    width:auto !important; height:auto !important;
    overflow:visible !important; visibility:visible !important; z-index:auto !important;
  }
  #printroot .measure{display:none}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
.pd-range{flex:1; min-width:120px; accent-color:var(--accent); cursor:pointer}
.pd-val{
  font-size:11px; color:var(--ink-2); min-width:4em; text-align:end;
  font-variant-numeric:tabular-nums;
}

/* ══ この形になる理由 ════════════════════════════ */
.why{
  display:block; font-size:12.5px; line-height:1.85; color:var(--ink-2);
  background:var(--paper-2); border-inline-start:3px solid var(--c-v);
  border-radius:0 7px 7px 0; padding:8px 11px; margin-block-start:4px;
}
.why b{color:var(--c-v); font-weight:600}
.row dd .why{margin-block-start:2px}
.fside .why, .verdict .why{margin-block-start:10px; text-align:start}