/* 漢字変換トレーニング：docs/design.md v0.13 に準拠 */
:root{
  /* 7色 */
  --kami:#F6F7F4; --sumi:#1F2328; --enpitsu:#5A6068; --keisen:#C9D6CC; --ai:#24497A; --akapen:#D1342F; --murasaki:#6B3FA0;
  /* 派生 */
  --white:#FFFFFF; --ai-usu:#E4EBF4; --ai-koi:#1B3860; --keisen-koi:#A9BAAD; --enpitsu-usu:#ECEEEC; --murasaki-usu:#F1ECF8;
  --pad:16px; --gap:24px;
  --fs-title:28px; --fs-prompt:24px; --lh-prompt:46px;
  --fs-yomi:24px; --fs-ben:26px;
  --fs-inst:17px; --fs-fbh:26px; --fs-h:22px; --fs-body:17px; --fs-btn:18px; --fs-sm:14px; --fs-meta:15px; --fs-score:56px;
  color-scheme:light;
}
@media (min-width:600px){
  :root{
    --pad:32px; --gap:32px;
    --fs-title:34px; --fs-prompt:30px; --lh-prompt:56px;
    --fs-yomi:28px; --fs-ben:30px;
    --fs-inst:19px; --fs-fbh:28px; --fs-h:24px; --fs-body:18px; --fs-btn:19px; --fs-sm:15px; --fs-score:64px;
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--kami); color:var(--sumi);
  font-family:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  font-size:var(--fs-body); line-height:1.6; letter-spacing:0;
  line-break:strict; /* 「ッ」「っ」「ゃ」「ー」などの小さい仮名・長音を行の頭に置かない */
  -webkit-text-size-adjust:100%;
}
button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--ai);outline-offset:2px}
rt{font-size:.5em;font-weight:400}

[hidden]{display:none!important}
/* ホーム画面に追加して開いたとき（standalone）も、時計などと重ならないように上をあける */
.screen{display:none;max-width:600px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) var(--pad) 48px}
.screen.is-active{display:block}

/* ---------- ボタン ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;
  border-radius:12px;border:1.5px solid transparent;font-size:var(--fs-btn);font-weight:700;line-height:1.3;
  padding:8px 16px;text-align:center;word-break:keep-all;  /* 文言の中の空白でだけ折り返す。2行なら高さも2行分（design.md v0.27） */
  transition:transform 80ms,background-color 80ms;
}
.btn-primary{background:var(--ai);color:var(--white)}
.btn-primary:active{background:var(--ai-koi);transform:translateY(1px)}
.btn-primary:disabled{background:var(--enpitsu-usu);color:var(--enpitsu);cursor:not-allowed;transform:none}
.btn-secondary{background:var(--white);border-color:var(--keisen-koi)}
.btn-secondary:active{background:var(--ai-usu);border:2px solid var(--ai);transform:translateY(1px)}
.btn + .btn{margin-top:12px}
.note{font-size:var(--fs-sm);color:var(--enpitsu);margin:8px 0 0}
.btn-danger{background:var(--white);border:2px solid var(--sumi);color:var(--sumi)}
.btn-danger:active{background:var(--enpitsu-usu);transform:translateY(1px)}
.btn b{margin-left:2px}

/* ---------- スタート ---------- */
.top-bar{display:flex;justify-content:flex-end}
.sound{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;
  background:var(--white);border:1.5px solid var(--keisen-koi);border-radius:12px;font-size:var(--fs-meta);font-weight:700;line-height:1;
}
.sound[aria-pressed="false"]{color:var(--enpitsu)}
.sound svg{flex:none}
.sound:active{background:var(--ai-usu);transform:translateY(1px)}
.app-title{font-size:var(--fs-title);font-weight:700;line-height:1.4;margin:8px 0 4px}
.app-lead{font-size:var(--fs-meta);color:var(--enpitsu);margin:0 0 var(--gap)}
.field-label{display:block;font-size:var(--fs-meta);font-weight:700;margin:0 0 8px}
.name-input{
  width:100%;height:56px;border:1.5px solid var(--keisen-koi);border-radius:6px;background:var(--white);
  font:inherit;font-size:20px;padding:0 16px;color:var(--sumi);
}
.name-input:focus{border:2px solid var(--ai)}
fieldset{border:0;margin:var(--gap) 0;padding:0}
legend{padding:0;margin-bottom:8px;font-size:var(--fs-meta);font-weight:700}
.kind{
  display:flex;gap:12px;align-items:center;width:100%;min-height:64px;padding:10px 16px;margin-bottom:12px;
  background:var(--white);border:1.5px solid var(--keisen-koi);border-radius:12px;text-align:left;
}
.kind{cursor:pointer;position:relative}
.kind input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.kind:has(input:focus-visible){outline:3px solid var(--ai);outline-offset:2px}
.kind:active{transform:translateY(1px)}
.kind .dot{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--enpitsu);display:grid;place-items:center}
.kind .dot::after{content:"";width:12px;height:12px;border-radius:50%;background:transparent}
.kind.is-checked{background:var(--ai-usu);border:2px solid var(--ai);padding:9.5px 15.5px}
.kind.is-checked .dot{border-color:var(--ai)}
.kind.is-checked .dot::after{background:var(--ai)}
.kind-name{display:block;font-size:18px;font-weight:700;line-height:1.4}
.kind-desc{display:block;font-size:var(--fs-sm);color:var(--enpitsu);line-height:1.5}
/* なんねんせい？：2〜6 を横1列。えらんだ学年はぬりつぶし（藍の地に白い字） */
.grade-set{margin:var(--gap) 0 0}
.kinds-note{margin:0;font-size:var(--fs-meta);font-weight:400;color:var(--enpitsu);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.grades{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.grade-opt{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;
  background:var(--white);border:1.5px solid var(--keisen-koi);border-radius:12px;cursor:pointer;color:var(--sumi);
}
.grade-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.grade-opt:has(input:focus-visible){outline:3px solid var(--ai);outline-offset:2px}
.grade-opt:active{background:var(--ai-usu);border:2px solid var(--ai);transform:translateY(1px)}
.grade-opt.is-checked{background:var(--ai);border:2px solid var(--ai);color:var(--white)}
.g-num{font-size:var(--fs-yomi);font-weight:700;line-height:1.1}
.g-unit{font-size:var(--fs-sm);font-weight:700;line-height:1.2}
/* 開いた文言は文節の空白でだけ折り返す（design.md 第2章） */
.app-lead,.kind-desc,.note,.note-meta,.empty,.del-text,.del-head,.list-title,.hint-label{word-break:keep-all;overflow-wrap:anywhere}

/* ニックネームの一覧：練習の種類のラジオと同じ形。「はじめての人」は点線の枠 */
.who{margin:0}
.who-name{font-size:20px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.who-opt.is-new{border-style:dashed}
.who-opt.is-new .who-name{font-size:18px}
.who-opt .plus{flex:none;margin:0 1px}
#nickWrap{margin-bottom:0}
.who:not([hidden]) + #nickWrap{margin-top:0}
.note-btn{margin-top:12px}
.sep{border:0;border-top:1px solid var(--keisen);margin:48px 0}
.text-btn{
  min-height:48px;padding:0 12px;margin-left:-12px;background:none;border:0;border-radius:12px;
  font-size:var(--fs-meta);font-weight:400;color:var(--enpitsu);text-decoration:underline;text-underline-offset:4px;
}
.text-btn:active{background:var(--enpitsu-usu)}

/* 名前を消す：後ろに幕を敷き、下からシートを出す（帯はつけない） */
.scrim{position:fixed;inset:0;z-index:20;background:rgba(31,35,40,.4)}
.dialog-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:600px;margin:0 auto;
  background:var(--white);border-radius:24px 24px 0 0;box-shadow:0 -8px 24px rgba(31,35,40,.12);
  padding:24px var(--pad) calc(24px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto;
}
.del-head{font-size:var(--fs-h);font-weight:700;line-height:1.4;margin:0 0 16px}
.del-head:focus{outline:none}
.del-head .nw,.del-text .nw{white-space:nowrap}  /* 名前はかぎかっこごと折り返さない */
.del-name{
  display:flex;align-items:center;width:100%;min-height:56px;padding:8px 16px;margin-bottom:12px;text-align:left;
  background:var(--white);border:1.5px solid var(--keisen-koi);border-radius:12px;font-size:20px;font-weight:700;line-height:1.4;overflow-wrap:anywhere;
}
.del-name:active{background:var(--ai-usu);border:2px solid var(--ai);padding:7.5px 15.5px}
.del-text{font-size:var(--fs-body);line-height:1.8;margin:0 0 24px}

/* ---------- 出題 ---------- */
.q-head{display:flex;align-items:center;gap:12px;padding:0 0 8px}
.q-type{font-size:var(--fs-sm);color:var(--enpitsu)}
.q-count{margin-left:auto;font-size:var(--fs-meta);font-weight:700;white-space:nowrap}
.quit{
  flex:none;min-height:48px;padding:0 16px;border-radius:12px;
  background:var(--white);border:1.5px solid var(--keisen-koi);
  font-size:var(--fs-sm);font-weight:700;line-height:1;
  transition:transform 80ms,background-color 80ms;
}
.quit:active{background:var(--ai-usu);border:2px solid var(--ai);padding:0 15.5px;transform:translateY(1px)}
.progress{display:flex;gap:4px;margin-bottom:var(--gap)}
.progress span{flex:1;height:8px;border-radius:2px;background:var(--keisen)}
.progress span.done{background:var(--ai)}
.progress span.now{background:var(--white);box-shadow:inset 0 0 0 2px var(--ai)}
.instruction{font-size:var(--fs-inst);font-weight:700;line-height:1.6;margin:0 0 12px;word-break:keep-all;overflow-wrap:anywhere}

.prompt{
  background-color:var(--white);border:1.5px solid var(--keisen);border-radius:16px;
  padding:8px var(--pad-card,16px);margin:0 0 var(--gap);
  font-size:var(--fs-prompt);line-height:var(--lh-prompt);overflow-wrap:anywhere;
  background-image:repeating-linear-gradient(to bottom,
     transparent 0, transparent calc(var(--lh-prompt) - 1px),
     var(--keisen) calc(var(--lh-prompt) - 1px), var(--keisen) var(--lh-prompt));
  background-position:0 8px; background-origin:border-box; background-clip:padding-box;
}
@media (min-width:600px){.prompt{--pad-card:24px}}
.em{
  white-space:nowrap; /* 色がついた語を2行に分けない */
  font-weight:700;background:var(--ai-usu);border-radius:4px;padding:0 4px;
  text-decoration:underline;text-decoration-color:var(--ai);text-decoration-thickness:3px;text-underline-offset:6px;
}
.fix{display:inline-block;text-align:center;text-indent:0}  /* 赤ペンのルビ：ルビの行の下に語の行（design.md v0.27） */
.fix-rt{display:block;color:var(--akapen);font-weight:700;font-size:.55em;line-height:.8;white-space:nowrap}  /* .8：<ruby> のときと同じ高さ（行の高さを広げない） */
.fix-b{white-space:nowrap}

/* 誤変換（タップ形式）：［ ］の語を、文の中で押せるボタンにする。
   タップ領域 48px を確保し、行が折り返しても上下のボタンの間が 12px 以上あくよう、行の高さを広げる */
/* 語とすぐあとの「。」「、」をひとまとまりにする（句読点だけが次の行の頭に来ないように） */
.nobr{white-space:nowrap}
/* 問題文の折り返し（design.md v0.20 画面2。本問・変換問題で共通）：決めた位置でだけ折り返す。区切りから区切りまでの .seg は
   1つのまとまりで、1行に入らないときだけ中で折り返す（はみ出させない）。色がついた語・タップする語＋すぐあとのひらがな・句読点
   （.conv-group）も同じ。overflow は visible のまま（◯・ルビ・✕・押下中の枠・フォーカスの枠を切らない） */
.prompt{word-break:keep-all}
.prompt .seg,.conv-group{display:inline-block;max-width:100%;overflow:visible}
/* 1行に入らないまとまりの中は keep-all のまま（「、」のあとで折り返す）。それでも入らないときの overflow-wrap:anywhere で、
   「。」「、」や小さい仮名が行の頭に来ないよう、それらは前の字と .nobr でひとまとまりにしてある（prompt.js。QA 2026-10-08-v018 中-1・中-3） */
.prompt.is-tap{--lh-prompt:64px}
@media (min-width:600px){.prompt.is-tap{--lh-prompt:72px}}
.tap{
  display:inline-block;min-width:48px;min-height:48px;margin:0 6px;padding:0 8px;vertical-align:baseline;text-align:center;
  background:var(--white);border:1.5px solid var(--keisen-koi);border-radius:6px;
  font:inherit;line-height:45px;color:var(--sumi);white-space:nowrap;
  user-select:none;-webkit-user-select:none;
  transition:transform 80ms,background-color 80ms;
}
.tap:active:not(:disabled){background:var(--ai-usu);border-color:var(--ai);box-shadow:0 0 0 .5px var(--ai);transform:translateY(1px)}
.tap:disabled{cursor:default}
.tap.is-picked-wrong{background:var(--murasaki-usu);border:2px solid var(--murasaki);color:var(--sumi);padding:0 7.5px;line-height:44px}
.tap.is-picked-wrong .batsu{display:inline-block;vertical-align:-1px;margin-right:4px}
/* 解答後は、ほかの語をふつうの文字に戻して文を読みやすくする */
.tap.is-rest{margin:0;padding:0;min-width:0;min-height:0;border:0;background:transparent;line-height:inherit}  /* 枠も外す（透明な枠が残ると行が 2px 高くなる。QA 2026-10-09-v021 軽微-1） */
/* 直した語：◯の大きさと左右の余白は、語の大きさに合わせて js（fitMaru）で決める */
.tap-fixed{display:inline-block;line-height:1.3;white-space:nowrap}
.tap-fixed.pop{animation:pop 240ms 200ms ease-out}
.struck{text-decoration:line-through;text-decoration-color:var(--akapen);text-decoration-thickness:2px}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{
  position:relative;min-height:72px;padding:12px 8px;border-radius:12px;
  background:var(--white);border:1.5px solid var(--keisen-koi);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  user-select:none;-webkit-user-select:none;overflow-wrap:anywhere;line-height:1.3;
  transition:transform 80ms,background-color 80ms,opacity 120ms;
}
.choice:active:not(:disabled){background:var(--ai-usu);border:2px solid var(--ai);transform:translateY(1px)}
.choices.yomi .choice{font-size:var(--fs-yomi);font-weight:700}
.choices.yomi.one{grid-template-columns:1fr}  /* 1マスに入らない語があるときは1列 */

/* 弁別：変換候補リスト */
.ime{background:var(--white);border:1.5px solid var(--keisen-koi);border-radius:6px;overflow:hidden}
.ime .choice{
  width:100%;min-height:60px;border:0;border-radius:0;flex-direction:row;justify-content:flex-start;
  gap:0;padding:8px 16px;font-size:var(--fs-ben);text-align:left;
}
.ime .choice + .choice{border-top:1px solid var(--keisen)}
.ime .num{flex:none;width:24px;font-size:var(--fs-sm);color:var(--enpitsu)}
.ime .choice:active:not(:disabled){background:var(--ai);color:var(--white);border:0;transform:none}
.ime .choice:active:not(:disabled) .num{color:var(--white)}
.ime .choice + .choice:active:not(:disabled){border-top:1px solid var(--keisen)}
.ime .word{flex:none}
.ime .tag{margin-left:auto}

/* 解答後の状態 */
.choice:disabled{cursor:default}
.choice.is-other{opacity:.45}
.choice.is-correct{border:2px solid var(--akapen)}
.ime .choice.is-correct{border:0;box-shadow:inset 0 0 0 2px var(--akapen)}
.choice.is-picked-wrong{background:var(--murasaki-usu);border:2px solid var(--murasaki);color:var(--sumi)}
.ime .choice.is-picked-wrong{border:0;box-shadow:inset 0 0 0 2px var(--murasaki)}
/* 不正解のときの正しい答え：墨の枠。◯はつけない */
.choice.is-answer{border:2px solid var(--sumi)}
.ime .choice.is-answer{border:0;box-shadow:inset 0 0 0 2px var(--sumi)}
.tag{font-size:var(--fs-sm);font-weight:700;line-height:1.4;white-space:nowrap}
.is-correct .tag{color:var(--akapen)}
/* ✕は語の左に置く */
.choice .word .batsu{display:inline-block;vertical-align:-2px;margin-right:6px}
/* ✕を入れた語は◯を描かないので、左右のあき（◯の分）をとらない。測った幅（語＋✕の分）に収まるように */
.choices.yomi .choice.is-picked-wrong .word{padding:0}
.ime .num .batsu{display:block}
.is-picked-wrong .tag{color:var(--murasaki)}
.word{position:relative;display:inline-block;padding:0 .25em}
.maru{position:absolute;left:-10px;top:-8px;width:calc(100% + 20px);height:calc(100% + 16px);pointer-events:none;overflow:visible}
.maru path{fill:none;stroke:var(--akapen);stroke-width:3px;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 360ms cubic-bezier(.4,0,.2,1) forwards}
.is-correct.pop{animation:pop 240ms 200ms ease-out}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{50%{transform:scale(1.03)}}

/* 変換問題：入力欄と「こたえる」 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conv-input{
  width:100%;height:64px;border:1.5px solid var(--keisen-koi);border-radius:6px;background:var(--white);
  font:inherit;font-size:var(--fs-ben);padding:0 16px;color:var(--sumi);
}
.conv-input:focus{border:2px solid var(--ai);padding:0 15.5px}
.conv-input.is-correct{border:2px solid var(--akapen)}
.conv-input.is-picked-wrong{background:var(--murasaki-usu);border:2px solid var(--murasaki);color:var(--sumi);padding:0 15.5px}
.conv-input:disabled{opacity:1;-webkit-text-fill-color:currentColor}
.conv-note{margin:12px 0 0;padding:8px 12px;background:var(--ai-usu);border-radius:6px;font-size:var(--fs-meta);font-weight:700;line-height:1.5}
.conv-note .line{display:block;word-break:keep-all;overflow-wrap:anywhere}  /* 1文1行。入りきらないときは文節で折り返す */
.conv .btn{margin-top:12px}
/* 変換問題の解答後：変換した語を◯で囲む（◯の大きさと左右の余白は js の fitMaru） */
.em .word{padding:0 .2em;line-height:1.3}  /* ◯を合わせる語の箱を、行の高さではなく文字の高さにする */
.em.pop{display:inline-block;animation:pop 240ms 200ms ease-out}
/* 変換問題：色がついた語の箱。幅は js（sizeSlot）で、答える前も後も同じにする（design.md v0.28）。語はまん中に置き、
   語の中では折り返さない（まとまりが1行に入らないときは、箱のすぐあとで折り返す） */
.em-slot{display:inline-block;text-align:center;white-space:nowrap;text-indent:0}
.em-slot .em{display:inline-block}
/* ひらがなを打つ問題の解答前・不正解のあと：語の箱（.word、inline-block）には .em の下線が届かないので、箱に下線を引く
   （QA 2026-10-12-v027 中-2。正解で◯がついたら下線は消す：変換問題の正解と同じ） */
.em .word.ul{text-decoration:underline;text-decoration-color:var(--ai);text-decoration-thickness:3px;text-underline-offset:6px}

/* ---------- フィードバック（シート） ---------- */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:10;max-width:600px;margin:0 auto;
  background:var(--white);border-radius:24px 24px 0 0;box-shadow:0 -8px 24px rgba(31,35,40,.12);
  padding:24px var(--pad) calc(24px + env(safe-area-inset-bottom));max-height:70vh;overflow-y:auto;
  transform:translateY(105%);transition:transform 240ms ease-out;visibility:hidden;
}
.sheet.is-open{transform:none;visibility:visible}
/* 上の帯 6px：正解は赤ペン、不正解は紫。文字を読む前に正誤がわかるように */
.sheet{padding-top:30px}
.sheet.ok{box-shadow:inset 0 6px 0 var(--akapen),0 -8px 24px rgba(31,35,40,.12)}
.sheet.ng{box-shadow:inset 0 6px 0 var(--murasaki),0 -8px 24px rgba(31,35,40,.12)}
.fb-head{display:flex;align-items:center;gap:12px;font-size:var(--fs-fbh);font-weight:700;line-height:1.3;margin:0}
.fb-head.ng{color:var(--murasaki)}
.fb-head:focus,.instruction:focus,.res-hello:focus{outline:none}
.fb-head.ok{color:var(--akapen)}
.fb-head svg{flex:none}
.fb-answer{margin:8px 0 0;font-size:var(--fs-body)}
.fb-answer b{font-size:1.15em;white-space:nowrap}
/* 別解の行：別解の語と「でもせいかい」は折り返さない（design.md 画面2b） */
.fb-answer .alt-line{display:block;margin-top:4px}
.fb-answer .alt-line b{font-size:1em}
.fb-answer .nw{display:inline-block;white-space:nowrap}  /* inline-block：WebKit で前の空白で行を変える（QA 2026-10-09-g4b1 低-2） */
.fb-expl{margin:12px 0 0;line-height:1.8}
/* 解説・ヒントの本文の折り返し（design.md v0.22 画面3）：問題文と同じく、区切りから区切りまでの .seg の間でだけ折り返す。
   1行に入らないまとまりは中で折り返す（行の頭に置かない字は prompt.js で .nobr にしてある） */
.fb-expl,.hint p{word-break:keep-all;overflow-wrap:anywhere}
.fb-expl .seg,.hint p .seg{display:inline-block;max-width:100%;overflow:visible}
.hint{margin:16px 0 0;background:var(--kami);border-left:4px solid var(--ai);border-radius:6px;padding:12px 16px}
.hint-label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--enpitsu);margin-bottom:4px}
.hint p{margin:0;line-height:1.8}
.sheet .btn{margin-top:24px}
/* 10問（ちょうせん）の最後の本問のシート：たしかめに進む前の区切りの案内。ボタンの上 16px（design.md v0.24 画面3） */
.sheet .fb-guide{margin:24px 0 0}
.sheet .fb-guide:not([hidden]) + .btn{margin-top:16px}

/* ---------- 結果 ---------- */
.res-hello{font-size:var(--fs-h);font-weight:700;margin:24px 0 16px}
.marks{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.marks{align-items:center}
.score{font-size:18px;margin:0 0 var(--gap);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.score b{font-size:var(--fs-score);line-height:1}
.conv-score{font-size:var(--fs-meta);margin:-16px 0 var(--gap)}
.conv-score b{font-size:1.4em}
.conv-score .line{display:block}  /* ひらがな・変換の順に1行ずつ（design.md v0.24 画面4） */
.list-title{font-size:var(--fs-inst);font-weight:700;margin:0 0 8px}
.miss{list-style:none;margin:0 0 var(--gap);padding:0;background:var(--white);border:1.5px solid var(--keisen);border-radius:16px}
.miss li{min-height:56px;padding:12px 16px}
.miss li + li{border-top:1px solid var(--keisen)}
.miss .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.miss .w{font-size:24px;font-weight:700;line-height:1.3}
.miss .t,.miss .p{font-size:var(--fs-sm);color:var(--enpitsu)}
/* タイプ名（読み・ひらがな・変換 など）は折り返さない。語と1行に入らないときは、語の下の行に右寄せ（design.md v0.24 画面4） */
.miss .row{flex-wrap:wrap}
.miss .t{white-space:nowrap;margin-left:auto}
.miss .p .line{display:block;word-break:keep-all;overflow-wrap:anywhere}
.miss .mk{flex:none;width:28px;display:grid;place-items:center;align-self:center}
.ch-list .row{justify-content:flex-start}
.ch-list .w{flex:1}
/* 画面2bの案内と同じ箱。1文1行、入りきらないときは文節で折り返す */
.guide{margin:0;padding:8px 12px;background:var(--ai-usu);border-radius:6px;font-size:var(--fs-meta);font-weight:700;line-height:1.5}
.guide .line{display:block;word-break:keep-all;overflow-wrap:anywhere}
.ch-list:has(+ .ch-guide:not([hidden])){margin-bottom:16px}
.ch-guide{margin:0 0 24px}
.all-ok{display:flex;align-items:center;gap:8px;font-size:var(--fs-h);font-weight:700;color:var(--akapen);margin:24px 0 var(--gap)}
.all-ok svg{flex:none}

/* まちがいノート */
.back-btn{
  display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;margin-left:-12px;
  background:none;border:0;border-radius:12px;font-size:var(--fs-meta);font-weight:700;color:var(--ai);
}
.back-btn:active{background:var(--ai-usu)}
.note-title{margin:8px 0 4px}
.note-title:focus{outline:none}
.note-meta{font-size:var(--fs-meta);color:var(--enpitsu);margin:0 0 16px}
.note-meta b{color:var(--sumi)}
.note-meta:has(+ .note-desc:not([hidden])){margin-bottom:4px}
.note-desc{font-size:var(--fs-meta);color:var(--enpitsu);line-height:1.6;margin:0 0 16px;word-break:keep-all;overflow-wrap:anywhere}
.note-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:5;max-width:600px;margin:0 auto;
  background:var(--white);border-top:1px solid var(--keisen);padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
}
#s-note .note-bar{display:none}
#s-note.is-active .note-bar:not([hidden]){display:block}
/* 下のバーの高さ（56＋24）＋24px の余白 */
#s-note.has-bar{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
.load-error{font-size:var(--fs-meta);color:var(--sumi);margin:12px 0 0}
.empty{font-size:var(--fs-meta);color:var(--enpitsu);margin:0 0 var(--gap)}
.empty b{color:var(--sumi)}
.btn .nw{white-space:nowrap}  /* 「（3もん）」などを途中で折り返さない */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0ms!important;animation-delay:0ms!important;transition-duration:0ms!important}
  .maru path{stroke-dashoffset:0}
}