:root{
  --paper:#f1f4f6;--panel:#fbfcfd;--ink:#232c36;--sub:#5d6b79;--line:#d7dee5;
  --indigo:#2f5378;--indigo-deep:#24405c;--verm:#c2452d;--verm-soft:#f0d9d2;
  --ok:#2f7d4f;--ok-soft:#dceee3;--kana-font:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","MS PMincho",serif;
  --body-font:"Malgun Gothic","Apple SD Gothic Neo","Yu Gothic UI",system-ui,sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --paper:#151a20;--panel:#1d242c;--ink:#e5e9ec;--sub:#98a5b2;--line:#303a45;
  --indigo:#8db4dc;--indigo-deep:#a9c6e5;--verm:#d96a52;--verm-soft:#4a2b23;
  --ok:#7ec996;--ok-soft:#203c2e;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body-font);line-height:1.6}
button,select,input{font:inherit}
button,a,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--verm);outline-offset:3px}
.kj-shell{width:min(1040px,calc(100% - 32px));margin:0 auto;padding:30px 0 42px}
.kj-header{margin-bottom:20px}
.kj-back{color:var(--sub);font-size:.84rem;text-decoration:none}
.kj-back:hover{color:var(--indigo)}
.kj-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:22px}
.kj-kicker{margin:0 0 4px;color:var(--verm);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
h1,h2,p{margin-top:0}
h1{margin-bottom:8px;color:var(--indigo-deep);font-size:clamp(1.55rem,4vw,2.35rem);line-height:1.25}
h1 span,.kj-cell-char,.kj-detail-glyph,.kj-practice-card [lang="ja"]{font-family:var(--kana-font)}
.kj-lead{max-width:680px;margin-bottom:0;color:var(--sub);font-size:.9rem}
.kj-total{flex:0 0 auto;min-width:108px;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:var(--panel);text-align:center}
.kj-total strong{display:block;color:var(--ok);font-size:1.65rem;line-height:1.1;font-variant-numeric:tabular-nums}
.kj-total span{font-size:.72rem;color:var(--sub)}
.kj-practice-launch,.kj-board-section,.kj-method{margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.kj-section-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.kj-section-head h2,.kj-method h2{margin:0;color:var(--indigo-deep);font-size:1.15rem}
.kj-unknown{display:flex;align-items:center;gap:7px;color:var(--sub);font-size:.82rem;white-space:nowrap}
.kj-char-direction{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--sub);font-size:.78rem}
.kj-char-direction select{border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);padding:5px 28px 5px 9px}
.kj-practice-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kj-practice-buttons button{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:12px;cursor:pointer}
.kj-practice-buttons button:hover{border-color:var(--indigo);transform:translateY(-1px)}
.kj-practice-buttons span{grid-row:1/3;font-family:var(--kana-font);font-size:2rem;color:var(--verm)}
.kj-practice-buttons b{font-size:.9rem;color:var(--indigo-deep)}
.kj-practice-buttons small{font-size:.72rem;color:var(--sub)}
.kj-storage-note{margin:10px 0 0;color:var(--verm);font-size:.76rem}
.kj-board-head{align-items:flex-end}
.kj-sort{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.kj-sort button{border:0;border-radius:5px;background:transparent;color:var(--sub);padding:5px 10px;font-size:.76rem;cursor:pointer}
.kj-sort button.on{background:var(--indigo);color:var(--paper);font-weight:700}
.kj-board-note{margin:8px 0 18px;color:var(--sub);font-size:.8rem}
.kj-lesson{margin-top:19px}
.kj-lesson:first-child{margin-top:0}
.kj-lesson-head{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.kj-lesson-head h3{margin:0;color:var(--indigo-deep);font-size:.91rem}
.kj-lesson-head span{color:var(--sub);font-size:.7rem}
.kj-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.kj-cell{position:relative;min-width:0;aspect-ratio:1/1.03;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;transition:border-color .14s,transform .14s,background .14s}
.kj-cell:hover{border-color:var(--indigo);transform:translateY(-1px)}
.kj-cell.known{border-color:var(--ok);background:var(--ok-soft)}
.kj-cell.known::after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--ok)}
.kj-cell-char{font-size:clamp(1.45rem,4.4vw,2.15rem);line-height:1.05;color:var(--indigo-deep)}
.kj-cell-meaning{max-width:100%;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sub);font-size:.62rem}
.kj-method p{margin:9px 0 0;font-size:.82rem}
.kj-sources{color:var(--sub)}
.kj-sources a{color:var(--indigo)}
footer{margin-top:20px;color:var(--sub);font-size:.73rem;text-align:center}

.kj-dialog{width:min(620px,calc(100% - 24px));max-height:90vh;margin:auto;padding:0;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ink);box-shadow:0 16px 60px color-mix(in srgb,var(--ink) 35%,transparent);overflow:auto}
.kj-dialog::backdrop{background:color-mix(in srgb,var(--ink) 52%,transparent)}
.kj-dialog-inner{padding:20px}
.kj-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kj-dialog-top h2{margin:0;color:var(--indigo-deep);font-size:1rem}
.kj-close{border:0;border-radius:6px;background:transparent;color:var(--sub);padding:6px 8px;cursor:pointer}
.kj-close:hover{color:var(--ink)}
.kj-detail-hero{display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:center;margin:16px 0 18px;padding:16px;border:1px solid var(--line);border-radius:11px;background:var(--paper)}
.kj-detail-glyph{font-size:5rem;line-height:1;text-align:center;color:var(--verm)}
.kj-detail-meaning{margin:0;color:var(--indigo-deep);font-size:1.2rem;font-weight:800}
.kj-detail-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kj-chip{border:1px solid var(--line);border-radius:999px;color:var(--sub);font-size:.67rem;padding:2px 8px}
.kj-chip.travel{border-color:var(--verm);color:var(--verm)}
.kj-known-button{margin-top:12px;border:1px dashed var(--line);border-radius:999px;background:var(--panel);color:var(--sub);padding:6px 13px;cursor:pointer}
.kj-known-button.on{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--ok-soft);font-weight:700}
.kj-detail-section{padding:15px 0;border-top:1px solid var(--line)}
.kj-detail-section h3{margin:0 0 9px;color:var(--indigo-deep);font-size:.86rem}
.kj-example-list{display:grid;gap:7px}
.kj-example{display:grid;grid-template-columns:minmax(90px,.8fr) 1fr;gap:12px;padding:9px 10px;border-radius:8px;background:var(--paper)}
.kj-example-word{font-family:var(--kana-font);font-size:1.1rem;color:var(--indigo-deep)}
.kj-highlight{color:var(--verm);font-weight:800}
.kj-example-read{color:var(--sub);font-size:.74rem}
.kj-example-meaning{font-size:.77rem}
.kj-context-written{font-family:var(--kana-font);font-size:1.18rem;color:var(--indigo-deep)}
.kj-context-kana{margin:5px 0 0;color:var(--sub);font-size:.8rem}
.kj-context-ko{margin:8px 0 0;font-size:.82rem}
.kj-detail-actions{display:flex;justify-content:space-between;gap:8px;margin-top:15px}
.kj-detail-actions button,.kj-tts{border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--indigo);padding:7px 11px;cursor:pointer}

.kj-practice-dialog{width:min(590px,calc(100% - 24px))}
.kj-runner-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--sub);font-size:.74rem}
.kj-practice-card{min-height:310px;margin:14px 0 12px;padding:24px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.kj-practice-card:hover{border-color:var(--indigo)}
.kj-front-label{margin-bottom:12px;color:var(--sub);font-size:.72rem}
.kj-front-main{font-family:var(--kana-font);font-size:clamp(2.25rem,11vw,4.8rem);line-height:1.25;color:var(--indigo-deep)}
.kj-front-main.sentence{font-size:clamp(1.3rem,5vw,2rem);line-height:1.65}
.kj-reveal{width:100%}
.kj-reveal-primary{font-family:var(--kana-font);font-size:1.65rem;color:var(--verm)}
.kj-reveal-reading{margin-top:7px;color:var(--indigo-deep);font-size:1rem}
.kj-reveal-ko{margin-top:3px;color:var(--sub);font-size:.79rem}
.kj-reveal-meaning{margin-top:11px;font-size:.88rem}
.kj-runner-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.kj-runner-buttons button{border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--indigo);padding:9px 14px;cursor:pointer}
.kj-runner-buttons .primary{border-color:var(--indigo);background:var(--indigo);color:var(--paper);font-weight:700}
.kj-runner-buttons .known{border-color:var(--ok);color:var(--ok)}
.kj-runner-buttons .known.on{background:var(--ok-soft);font-weight:700}
.kj-empty{padding:48px 18px;text-align:center}
.kj-empty h2{color:var(--indigo-deep)}
.kj-empty p{color:var(--sub);font-size:.84rem}
.kj-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:720px){
  .kj-shell{width:min(100% - 20px,620px);padding-top:18px}
  .kj-title-row{align-items:flex-start;gap:12px}
  .kj-total{min-width:82px;padding:10px}
  .kj-practice-launch,.kj-board-section,.kj-method{padding:15px}
  .kj-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .kj-cell{aspect-ratio:1/1}
  .kj-cell-char{font-size:clamp(1.65rem,9vw,2.2rem)}
  .kj-practice-buttons{grid-template-columns:1fr}
  .kj-practice-buttons button{grid-template-columns:40px 1fr}
}
@media(max-width:420px){
  .kj-title-row{display:block}
  .kj-total{display:flex;align-items:baseline;justify-content:center;gap:5px;width:max-content;margin-top:13px}
  .kj-total strong{font-size:1.25rem}
  .kj-section-head{align-items:flex-start}
  .kj-board-head{display:block}
  .kj-sort{width:max-content;margin-top:10px}
  .kj-detail-hero{grid-template-columns:88px 1fr;gap:12px;padding:12px}
  .kj-detail-glyph{font-size:4rem}
  .kj-example{grid-template-columns:1fr;gap:2px}
  .kj-dialog-inner{padding:15px}
  .kj-practice-card{min-height:290px;padding:18px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}