/* 03_screens.md 3章：押せる部分 56px 以上、本文 20px 以上、動きは控えめ、色だけで正誤を示さない
   色のコントラスト（WCAG 2.2）：文字 4.5:1 以上（1.4.3）、押せる部分の枠や状態を示す図形 3:1 以上（1.4.11）。09 Q-29 */
:root {
  --bg: #f7f4ec;
  --surface: #ffffff;
  --ink: #2b2a27;
  --muted: #6b675e;
  --line: #d9d3c3;              /* 表の罫線など、飾りの線 */
  --control-line: #8f8877;      /* 押せる部分の枠（背景との差 3:1 以上） */
  --accent: #2a7363;
  --accent-ink: #ffffff;
  --accent-soft: #dcefe9;
  --warm: #e0a43a;
  --warm-strong: #a86d00;       /* 「とちゅう」「いまの問題」の枠など（背景との差 3:1 以上） */
  --hint-bg: #8f5a00;           /* 「ヒント」の札（白文字との差 4.5:1 以上） */
  --warm-soft: #fbefd6;
  --ok: #1f6f4a;
  --ok-soft: #e1f2e8;
  --info-soft: #e8eef8;
  --danger: #a33a2a;
  --math: #3a6ea5;
  --japanese: #b0533c;
  --radius: 14px;
  --tap: 56px;
  --fs: 20px;
  color-scheme: light;
}
:root[data-text-size='large'] { --fs: 24px; }
:root[data-text-size='extraLarge'] { --fs: 28px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* 子どもの画面は、学校で習う字の形に近い教科書体を優先する（Windows 10 以降に標準で入っている）。
     iPhone・iPad・Mac には教科書体が標準で入っていないため、丸ゴシックを使う */
  font-family: 'UD デジタル 教科書体 N-R', 'UD Digi Kyokasho N-R', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
  font-size: var(--fs);
  line-height: 1.9;
  word-break: keep-all;          /* 分かち書きの空白で改行する */
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
rt { font-size: 0.55em; color: #4a4740; } /* 読み仮名を頼りに読む子のため、薄くしすぎない */
button { font: inherit; color: inherit; }
/* キーボードで操作したときの位置を、はっきり示す（WCAG 2.4.7・2.4.13） */
:focus-visible { outline: 4px solid #1d4ed8; outline-offset: 3px; border-radius: 6px; }
[tabindex='-1']:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.screen { min-height: 100dvh; display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; }
.loading { align-items: center; justify-content: center; }
.topbar {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.title { margin: 0; font-size: 1.05em; text-align: center; }
.content { padding: 16px 16px 120px; flex: 1; }
.back {
  min-height: 48px; padding: 0 12px; border: 0; background: transparent; color: var(--accent); font-weight: 700; cursor: pointer;
}

button.primary, button.secondary, button.danger, .file-label {
  min-height: var(--tap); padding: 10px 20px; border-radius: var(--radius); cursor: pointer; font-weight: 700;
  border: 2px solid var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
button.primary { background: var(--accent); color: var(--accent-ink); }
button.secondary, .file-label { background: var(--surface); color: var(--accent); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button:disabled { opacity: 0.45; cursor: default; }
/* 押せない「こたえる」は、半透明にすると後ろの文字が透けて重なって見えるため、不透明な薄い色にする（09 Q-36） */
button.primary:disabled { opacity: 1; background: #c9d6d1; border-color: #c9d6d1; color: #52605b; }
button.big { width: 100%; min-height: 64px; font-size: 1.1em; }
button.wide { width: 100%; }
.file-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-label { position: relative; margin-top: 8px; }

.label { font-size: 0.85em; color: var(--muted); }
.sub, .small { color: var(--muted); font-size: 0.9em; }

/* ホーム */
.home-theme { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--surface); border-radius: var(--radius); padding: 12px 16px; border: 1px solid var(--line); }
.theme-art { display: block; flex: none; }
.summary-art { margin: 0 auto 4px; }
.theme-name { font-weight: 700; }
.growth-count { margin-top: 2px; font-size: 0.85em; font-weight: 700; color: #8a6200; }
/* たつじん えまき（09 Q-49）：1単元＝1コマ。コマは正方形で、となりのコマと地面・線路・川がつながる */
.emaki { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 640px; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: var(--surface); }
.koma { position: relative; display: block; aspect-ratio: 1 / 1; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; overflow: hidden; }
.emaki-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.koma-locked .emaki-art { filter: grayscale(1) opacity(0.6); } /* まだのコマは背景も色を抜く（09 Q-52） */
/* たつじん！のコマ：金色の枠と星の印 */
.koma::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.koma-done::after { box-shadow: inset 0 0 0 3px #e0a43a; }
.koma-star { position: absolute; top: 3px; right: 3px; width: 1.5em; height: 1.5em; border-radius: 50%; background: #f6c445; border: 2px solid #5c4100; color: #5c4100; font-size: 0.75em; line-height: 1.3em; text-align: center; font-weight: 800; }
.emaki.mini .koma-star { width: 1.2em; height: 1.2em; font-size: 0.6em; line-height: 1.05em; border-width: 1px; top: 1px; right: 1px; }
.emaki.mini .koma-done::after { box-shadow: inset 0 0 0 2px #e0a43a; }
/* キラキラ（ノーミスで たつじん！）：金の太い枠と、ななめに光る帯。印は ✦ */
.koma-kira::after { box-shadow: inset 0 0 0 4px #f6c445, inset 0 0 0 6px #8a6200; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 100% 0; }
.koma-kira .koma-star { background: #fff3c4; }
/* いま解いた単元のコマ（ふりかえり） */
.koma-here::after { box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 5px #fff; }
.summary-emaki { margin-top: 16px; }
.summary-emaki-head { margin: 0 0 6px; font-weight: 700; }
.summary-emaki .emaki.mini { max-width: 320px; }
.koma-name { position: absolute; left: 0; right: 0; top: 0; padding: 3px 4px; background: rgba(255, 255, 255, 0.82); font-size: 0.72em; line-height: 1.25; font-weight: 700; color: var(--ink); text-align: center; }
.emaki.mini { grid-template-columns: repeat(7, 1fr); border-width: 1px; border-radius: 8px; }
.emaki-link { display: block; width: 100%; margin-top: 16px; padding: 10px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; cursor: pointer; }
.emaki-link-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.emaki-link-title { font-weight: 700; }
.emaki-link-head::after { content: '▶'; margin-left: auto; color: var(--accent); font-size: 0.85em; }
.emaki-section { margin-bottom: 20px; }
.emaki-section h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.emaki-section h2 .growth-count { white-space: nowrap; }
.emaki-section .sub { margin: 0 0 8px; }
/* スマホの幅では1行を3コマにして、単元の名前が入る広さにする */
@media (max-width: 480px) { .emaki:not(.mini) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .emaki:not(.mini) .koma-name { font-size: 0.85em; } }
.home-theme > div { flex: 1 1 5em; }
.home-theme .secondary { flex: 0 0 auto; min-height: 48px; padding: 6px 14px; font-size: 0.9em; } /* 大きなボタンは「つぎに やること」だけにするため、小さめにする */
h1 { font-size: 1.3em; line-height: 1.6; margin: 8px 0; }
.next-card { margin-top: 16px; background: var(--surface); border: 3px solid var(--accent); border-radius: 22px; padding: 16px; }
.next-card p { margin: 0; }
.next-label { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 800; border-radius: 999px; padding: 2px 14px; font-size: 0.9em; }
.next-subject { margin-top: 8px !important; color: var(--muted); font-weight: 700; }
.next-title { font-size: 1.3em; font-weight: 800; line-height: 1.6; }
.next-meta { color: var(--muted); }
.next-go { margin-top: 12px; min-height: 72px; font-size: 1.25em; }
.pick-label { margin: 24px 0 0 !important; }
.subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 16px; }
.subject { min-height: 80px; border-radius: 18px; border: 0; color: #fff; font-size: 1.25em; font-weight: 800; cursor: pointer; }
.subject.subject-math { background: var(--math); }
.subject.subject-japanese { background: var(--japanese); }
.learn.learn-math .progress .dot.done { background: var(--math); border-color: var(--math); }
.subject rt { color: rgba(255, 255, 255, 0.85); }
.recommend { margin-top: 8px; }
.primary-link { display: inline-block; margin-top: 8px; padding: 12px 18px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.parent-note { font-size: 0.8em; color: var(--muted); margin-top: 24px; }

/* テーマ */
.setup { display: flex; flex-direction: column; gap: 16px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.theme-card { position: relative; min-height: 120px; border-radius: 20px; background: var(--surface); border: 3px solid var(--control-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 12px; }
.theme-card { white-space: pre-line; font-size: 0.95em; } /* 「きょうりゅう・」のあとで改行し、「・」だけが行に残らないように */
.theme-card.selected { border-color: var(--accent); background: var(--accent-soft); border-width: 4px; }
/* 選んだことを色だけでなく印でも示す（WCAG 1.4.1） */
.theme-card.selected::after { content: '✓'; position: absolute; top: 6px; right: 10px; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; line-height: 1.4em; text-align: center; font-size: 0.9em; }
.subthemes { display: grid; gap: 10px; margin-top: 16px; }

/* 学習目標 */
.objective-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.objective { width: 100%; min-height: 72px; display: flex; justify-content: flex-start; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); border: 2px solid var(--control-line); background: var(--surface); cursor: pointer; text-align: left; }
.objective .level { min-width: 5.2em; text-align: center; } /* 進み具合は単元名の左に、幅をそろえて置く（09 Q-39） */
.level { flex: none; font-size: 0.85em; padding: 2px 12px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); }
.level-learning { border-color: var(--warm-strong); background: var(--warm-soft); }
.level-mastered { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight: 700; }
/* たつじん！：いちばん上のスタンプ。金色で、ほかのスタンプと形（太い枠）でも区別する */
.level-expert { border: 3px solid #8a6200; background: linear-gradient(135deg, #fff3c4, #f6d365); color: #5c4100; font-weight: 800; }
.by-theme { padding: 4px 16px; font-size: 0.85em; }

/* 学習 */
.progress { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); }
.dot.done { background: var(--accent); }
.dot.now { width: 22px; height: 22px; background: var(--warm); border: 3px solid var(--warm-strong); } /* いまの問題は大きさでも示す */
.count { white-space: nowrap; margin-left: 8px; font-size: 0.9em; color: var(--muted); }
/* 幅の狭い画面では、点を小さくして「1/5」が改行されないようにする */
@media (max-width: 359px) { .progress { gap: 3px; } .dot { width: 10px; height: 10px; } .dot.now { width: 16px; height: 16px; } }
.lead { margin: 0 0 8px; }
.prompt { font-weight: 800; font-size: 1.15em; line-height: 1.75; margin: 0 0 10px; color: var(--ink); } /* 問いは答える場所の見出し（09 Q-35） */
.dock-answer .prompt { font-size: 1.05em; margin-bottom: 4px; }
.mat-lead { margin: 0 0 4px; }
/* 答える場所だけを色で示す（09 Q-34）。資料は落ち着いた色にして、視線を答える場所へ集める */
.learn-answer { background: #eef6f3; border: 2px solid #cfe6de; border-radius: var(--radius); padding: 12px; align-self: start; }
.answer-guide { margin: 0 0 10px; color: var(--accent); font-weight: 700; font-size: 0.9em; display: flex; gap: 8px; align-items: flex-start; }
.answer-guide-icon { margin-top: 0.3em; }
.answer-guide-icon { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75em; }
.learn-body { display: grid; gap: 16px; }
.learn { overflow-x: clip; } /* 横から入る動きの間に横スクロールが出ないように */
@media (min-width: 768px) {
  /* iPad・PC：資料と答えを左右に並べる（03 の3.1節） */
  .learn-body { grid-template-columns: 1fr 1fr; align-items: start; }
}
.material { margin: 0 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.mat-title { font-weight: 700; margin-bottom: 6px; }
.notice { font-size: 0.65em; color: var(--muted); margin: 8px 0 0; }
.tbl { border-collapse: collapse; width: 100%; background: var(--surface); }
.tbl th, .tbl td { border: 1px solid var(--control-line); padding: 6px 8px; text-align: center; }
.tbl th { word-break: keep-all; overflow-wrap: normal; } /* 「チョウ」が「チョ／ウ」のように切れないように */
.tbl thead th { background: #efebe0; }
.tbl tbody th { text-align: left; background: #faf8f2; }
.picto-cols { display: flex; justify-content: space-around; align-items: flex-end; gap: 8px; }
.picto-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.picto-marks { display: flex; flex-direction: column-reverse; align-items: center; line-height: 1.15; font-size: 1.2em; color: #3d3a34; min-height: calc(var(--rows) * 1.15em); justify-content: flex-start; }
.picto-label { border-top: 3px solid var(--ink); width: 100%; text-align: center; font-size: 0.8em; padding-top: 4px; }
.card { margin: 0; }
.card-row { display: grid; grid-template-columns: 9em 1fr; gap: 8px; border-bottom: 1px dashed var(--line); padding: 4px 0; }
.card-row dt { color: var(--muted); }
.card-row dd { margin: 0; font-weight: 700; }
.passage p { margin: 0 0 8px; }

.choices { display: grid; gap: 10px; }
.choice { min-height: var(--tap); padding: 10px 16px; border-radius: var(--radius); border: 3px solid var(--control-line); background: var(--surface); cursor: pointer; text-align: left; display: flex; align-items: center; gap: 12px; }
/* 選んだしるし：丸の印は「丸をねらって押すもの」に見えたため付けない（09 Q-38。子どもの試用で、丸にカーソルを合わせようとしていた）。
   選んだら、枠を太くし、右に ✓ を出す（色だけで選んだことを示さない。WCAG 1.4.1） */
.choice.selected { border-width: 4px; }
.choice.selected::after { content: '✓'; margin-left: auto; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9em; }
.choice.selected { border-color: var(--accent); background: var(--accent-soft); }
.choice.correct { border-color: var(--ok); background: var(--ok-soft); }
/* 間違えた選択肢：もう選べない。色だけに頼らず×と文字で示す */
.choice.tried { border-style: dashed; color: var(--muted, #6b6b6b); background: var(--surface); cursor: default; }
.choice.tried::after { content: '× ちがった'; margin-left: auto; flex: none; font-size: 0.8em; font-weight: 700; color: var(--muted, #6b6b6b); }
.answer-hint { margin: 0 0 6px; font-size: 0.95em; }
.choice.correct::after { content: '← こたえ'; margin-left: auto; width: auto; height: auto; border-radius: 0; background: none; display: inline; font-size: 0.85em; font-weight: 700; color: var(--ok); }

.numinput { display: grid; gap: 10px; }
.numbox { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.numval { min-width: 4em; text-align: center; font-size: 1.6em; font-weight: 800; border-bottom: 4px solid var(--accent); }
.numval.correct { color: var(--ok); border-color: var(--ok); }
.numpad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 560px; margin: 0 auto 10px; width: 100%; } /* 画面の下に固定（09 Q-34） */
.key { min-height: 52px; border-radius: 12px; border: 2px solid var(--control-line); background: var(--surface); font-size: 1.3em; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.key.del { grid-column: span 2; font-size: 1em; }

.order { display: grid; gap: 10px; }
.order-item { min-height: var(--tap); display: grid; grid-template-columns: 2.2em 1fr; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius); border: 3px solid var(--control-line); background: var(--surface); cursor: pointer; text-align: left; }
.order-item.picked { border-color: var(--accent); background: var(--accent-soft); border-width: 4px; }
.order-item:not(.picked) .order-num { border-color: transparent; } /* まだ押していないときは丸を見せない（ねらう的に見えないように。09 Q-38） */
.order-num { width: 2em; height: 2em; border-radius: 50%; border: 2px solid var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--accent); }

.feedback { margin-top: 16px; border-radius: var(--radius); padding: 12px 16px; border: 3px solid var(--line); background: var(--surface); }
.feedback.ok { border-color: var(--ok); background: var(--ok-soft); }
.feedback.retry { border-color: var(--warm-strong); background: var(--warm-soft); }
.feedback.reveal { border-color: var(--accent); background: var(--info-soft); }
.fb-head { font-weight: 800; margin: 0 0 4px; }
.feedback .mark { color: var(--ok); }
.feedback.calm .fb-head { font-weight: 700; }
.hint-label { display: inline-block; font-size: 0.85em; font-weight: 700; background: var(--hint-bg); color: #fff; border-radius: 6px; padding: 0 8px; margin-right: 4px; }
.actionbar { position: sticky; bottom: 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
/* 学習画面：画面の高さに合わせ、問題の部分だけをスクロールさせる。下の帯と問題が重ならない（09 Q-36） */
.screen.learn { height: 100dvh; min-height: 0; }
.learn-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 24px; overscroll-behavior: contain; }
.learn-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* けいさんメモ（09 Q-39）：問題の上に重ねる、うすいます目の紙。下の「こたえる」や数字ボタンはそのまま使える */
.memo-toggle { min-height: 44px; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--control-line); background: var(--surface); font-weight: 700; cursor: pointer; white-space: nowrap; }
.memo-toggle.on { border-color: var(--accent); background: var(--accent-soft); }
.scratch { position: absolute; inset: 0; z-index: 5; background-color: rgba(255, 255, 255, 0.6); background-image: linear-gradient(rgba(58, 110, 165, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 110, 165, 0.16) 1px, transparent 1px); background-size: 36px 36px; border-top: 3px solid var(--accent); }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.scratch-tools { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.scratch-tools button { min-height: 44px; padding: 4px 14px; }
@media (min-width: 768px) { .scratch { right: 50%; border-right: 3px solid var(--accent); } } /* PC・iPad の横向きでは左の資料の列に重ね、右の答える場所はそのまま使える */
.learn .actionbar { position: relative; flex: none; background: var(--bg); border-top: 2px solid var(--line); }
/* 答えたあと：正誤と解説を、画面の下から出る帯にまとめ、「つぎへ」などのボタンと一体にする（09 Q-30）。
   帯はいつも画面の下にあるので、PC・iPad の横長画面でも隠れない */
.actionbar.has-pad { background: #eef6f3; border-top: 3px solid #cfe6de; border-radius: 18px 18px 0 0; padding-top: 10px; }
.dock-answer { max-width: 560px; margin: 0 auto; }
.dock-answer .answer-guide { margin-bottom: 4px; }
.dock-answer .numinput { margin-bottom: 8px; }
.dock-answer .numval { font-size: 1.4em; }
.learn-body.one-col { grid-template-columns: 1fr; max-width: 760px; }
.learn-answer .numpad { margin: 8px 0 0; max-width: none; }
.actionbar .feedback { margin: 0; padding: 0; border: 0; background: transparent; }
.actionbar .feedback:empty { display: none; }
.actionbar.has-feedback { border-top: 4px solid var(--line); border-radius: 18px 18px 0 0; max-height: 70dvh; overflow-y: auto; padding-top: 14px; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); }
.actionbar.has-feedback .feedback { margin-bottom: 12px; }
.actionbar.has-feedback.ok { background: var(--ok-soft); border-top-color: var(--ok); }
.actionbar.has-feedback.retry { background: var(--warm-soft); border-top-color: var(--warm-strong); }
.actionbar.has-feedback.reveal { background: var(--info-soft); border-top-color: var(--accent); }
.actionbar .fb-head { font-size: 1.1em; }
/* 選択式で間違えたときの帯は1行にして、選択肢を隠さない */
.actionbar.has-feedback.compact { padding-top: 8px; }
.actionbar.has-feedback.compact .feedback { margin-bottom: 8px; }
.actionbar.has-feedback.compact .fb-head { margin: 0; }
.review-banner { display: inline-block; margin: 0 0 4px; padding: 2px 12px; border-radius: 999px; background: var(--warm-soft); border: 2px solid var(--warm-strong); font-size: 0.9em; font-weight: 700; }

/* ふりかえり */
.summary { background: var(--surface); border-radius: var(--radius); padding: 20px; border: 1px solid var(--line); text-align: center; }
.summary-big { font-size: 1.1em; font-weight: 700; margin: 4px 0; }
/* ふりかえり（09 Q-43）：結果の言葉 → 丸 → 数 → スタンプの条件、の順に読む */
.summary > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.summary-obj { display: inline-block; color: var(--muted); font-weight: 700; margin: 0 0 4px; }
.summary-head { font-size: 1.6em; font-weight: 800; margin: 0 auto 10px; color: var(--accent); text-align: center; line-height: 1.3; }
.summary-review { margin: 4px auto 0; color: var(--muted); }
.summary-dots { list-style: none; padding: 0; margin: 0 auto 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.summary-dots li { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2em; }
.summary-dots .dot-ok { background: var(--ok); color: #fff; }
.summary-dots .dot-ng { background: var(--surface); border: 3px solid var(--line); }
/* スタンプの はしご（できた！ → たつじん！。09 Q-45） */
.stamp-new { margin: 12px auto 0; font-weight: 800; font-size: 1.15em; }
.stamp-new.stamp-expert { font-size: 1.3em; }
.stamp-ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.stamp-ladder.summary-goal { margin-top: 16px; text-align: left; background: var(--bg); border-radius: var(--radius); padding: 12px 16px; }
.stamp-ladder li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.stamp-ladder .level { flex: none; }
/* まだもらっていないスタンプ：点線の「あき枠」。押せるボタンに見えないよう、白い面や影は付けない */
.stamp-empty { border: 2px dashed #b7b0a0; background: transparent; color: #8a8478; font-weight: 700; }
.stamp-cond { font-size: 0.95em; }
.stamp-ladder li.got .stamp-cond { font-weight: 800; color: var(--ok); }
.summary-next { margin: 14px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; flex-wrap: wrap; }
/* スマホの幅では詰める（上の決まりより後ろに置いて、上書きする） */
@media (max-width: 480px) {
  .summary { padding: 14px 12px; }
  .summary-art { width: 72px; height: 54px; }
  .summary-head { font-size: 1.35em; }
  .summary-dots { gap: 8px; }
  .summary-dots li { width: 32px; height: 32px; font-size: 1em; }
  .stamp-ladder.summary-goal { margin-top: 12px; padding: 10px 12px; }
}

/* 設定 */
.opt { border: 0; padding: 0; margin: 0 0 18px; }
.opt legend { font-weight: 700; margin-bottom: 6px; }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { min-height: 52px; padding: 6px 16px; border-radius: 12px; border: 2px solid var(--control-line); background: var(--surface); cursor: pointer; }
.seg.selected { border-color: var(--accent); border-width: 3px; background: var(--accent-soft); font-weight: 700; }
.seg.selected::before { content: '✓ '; } /* 色だけでなく印でも示す */
.guardian-link { margin-top: 24px; }

/* 保護者向け（大人向けの文なので通常の行間） */
.guardian-text { font-size: 0.8em; line-height: 1.7; word-break: normal; font-family: 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif; }
.guardian-text h2 { font-size: 1.1em; margin: 24px 0 8px; border-left: 6px solid var(--accent); padding-left: 8px; }
.guardian-text .primary, .guardian-text .secondary, .guardian-text .danger { margin: 4px 0; }
.guardian-table td, .guardian-table th { text-align: left; font-size: 0.9em; }
.help-box { background: var(--info-soft); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; }
.help-box summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.notice-box { background: var(--warm-soft); border-radius: var(--radius); padding: 10px 14px; }
.error { color: var(--danger); font-weight: 700; }
.msg { background: var(--accent-soft); padding: 8px 12px; border-radius: 10px; }
.row { display: grid; gap: 8px; margin-top: 8px; }
.hold { width: 100%; min-height: 96px; border-radius: 20px; border: 3px solid var(--accent); cursor: pointer; font-weight: 700; user-select: none; -webkit-user-select: none; touch-action: none;
  background: linear-gradient(90deg, var(--accent-soft) calc(var(--p) * 100%), var(--surface) 0); }

/* はじめの画面：アプリの価値をひと目で伝える（09 Q-33） */
.intro-hero { margin: -16px -16px 8px; padding: 28px 20px 24px; background: linear-gradient(160deg, var(--accent-soft), #fbefd6 70%); border-bottom: 1px solid var(--line); text-align: center; font-size: 1.25em; line-height: 1.8; }
.intro-kicker { display: inline-block; margin: 0 0 8px; padding: 2px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.8em; }
.intro-title { font-size: clamp(26px, 9vw, 2.4em); word-break: keep-all; line-height: 1.35; margin: 4px 0 16px; letter-spacing: 0.04em; color: var(--ink); }
.intro-themes { list-style: none; margin: 0 auto 16px; padding: 0; display: flex; justify-content: center; gap: 8px; max-width: 20em; }
.intro-themes li { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; padding: 10px 6px; background: var(--surface); border-radius: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.intro-theme-icon { font-size: 2em; line-height: 1.2; }
.intro-theme-name { font-size: 0.72em; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.intro-lead { max-width: 34em; margin: 0 auto; font-size: 0.85em; text-align: left; }
.intro-sub { font-size: 1.1em !important; }
.intro-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.intro-features li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.intro-feature-icon { grid-row: span 2; font-size: 1.8em; line-height: 1.3; }
.intro-features strong { font-size: 1.05em; color: var(--accent); }
@media (min-width: 768px) {
  .intro-hero { border-radius: 0 0 24px 24px; font-size: 1.5em; padding: 40px 24px 32px; }
  .intro-features { grid-template-columns: repeat(3, 1fr); }
  .intro-features li { grid-template-columns: 1fr; }
  .intro-feature-icon { grid-row: auto; }
}

/* スマホの幅では、問題が1画面に収まるように余白・行間を詰める（09 Q-37）。押せる部分は 44px 以上を保つ */
@media (max-width: 767px), (max-height: 820px) {
  .learn-main { padding: 10px 12px 12px; }
  .learn-body { gap: 10px; }
  .material { padding: 8px 10px; margin-bottom: 8px; line-height: 1.7; }
  .mat-title { margin-bottom: 2px; }
  .tbl th, .tbl td { padding: 2px 8px; line-height: 1.6; }
  .card-row { padding: 2px 0; line-height: 1.6; }
  .picto-marks { font-size: 1em; line-height: 1.05; min-height: calc(var(--rows) * 1.05em); }
  .learn-answer { padding: 10px; }
  .prompt { font-size: 1.08em; line-height: 1.65; margin-bottom: 8px; }
  .choices, .order { gap: 8px; }
  .choice, .order-item { min-height: 50px; padding: 4px 12px; line-height: 1.6; }
  .dock-answer .prompt { font-size: 1em; margin-bottom: 0; }
  .dock-answer .numinput { margin-bottom: 4px; gap: 4px; }
  .dock-answer .numval { font-size: 1.2em; }
  .key { min-height: 46px; }
  .numpad { gap: 5px; margin-bottom: 8px; }
  .actionbar { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  button.big { min-height: 56px; }
}

/* 背の低いスマホ（iPhone SE など）では、さらに詰める。押せる部分は 44px を保つ */
@media (max-height: 700px) {
  .topbar { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .key { min-height: 44px; font-size: 1.15em; }
  .numpad { gap: 4px; margin-bottom: 6px; }
  button.big { min-height: 50px; }
  .choice, .order-item { min-height: 46px; padding: 2px 10px; }
  .order-num { width: 1.7em; height: 1.7em; }
  .answer-guide { margin-bottom: 6px; line-height: 1.5; }
  .material { line-height: 1.6; }
}

/* 下のメニュー（09 Q-31） */
.screen.has-nav .content { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-top: 2px solid var(--control-line); padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); }
.tab { min-height: 68px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.85em; color: var(--muted); cursor: pointer; border-top: 4px solid transparent; }
.tab.active { color: var(--accent); font-weight: 800; border-top-color: var(--accent); } /* 色だけでなく上の線と太字でも示す */
@media (min-width: 768px) { .tabbar { left: 50%; right: auto; width: min(1100px, 100%); transform: translateX(-50%); border-left: 2px solid var(--control-line); border-right: 2px solid var(--control-line); border-radius: 18px 18px 0 0; } }

/* 学習を始める前の確認（09 Q-31） */
.sheet-backdrop { position: fixed; inset: 0; z-index: 10; background: rgba(30, 28, 24, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 640px; background: var(--surface); border-radius: 22px 22px 0 0; padding: 20px 16px max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15); }
.sheet-title { font-size: 1.2em; font-weight: 800; margin: 0 0 8px; }
.sheet-meta { display: flex; gap: 12px; align-items: center; margin: 0 0 16px; }
.sheet-actions, .footer-pair { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.sheet-actions button, .footer-pair button { white-space: nowrap; padding-left: 12px; padding-right: 12px; }

/* 動きの設定（03 の3.2節） */
@media (prefers-reduced-motion: no-preference) {
  :root[data-motion='standard'] .actionbar.has-feedback { animation: slideup 200ms ease-out; }
  :root[data-motion='standard'] .learn-main { animation: slidein 220ms ease-out; }
  :root[data-motion='standard'] .sheet { animation: slideup 200ms ease-out; }
  /* いまうまったピースは、ゆっくりすけていく（09 Q-47） */
  :root[data-motion='standard'] .koma-new { animation: koma-reveal 1.4s ease-in-out 0.3s both; }
  :root[data-motion='standard'] .koma-kira::after { animation: kira 3.2s ease-in-out infinite; }
  :root[data-motion='standard'] .koma-here:not(.koma-new)::after { animation: koma-pulse 1.6s ease-in-out 2; }
}
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideup { from { transform: translateY(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
:root[data-motion='none'] *, :root[data-motion='reduced'] * { animation: none !important; transition: none !important; }

/* マウスで操作する画面（PC）では、押せる部分を少し小さくしてよい */
@media (pointer: fine) { :root { --tap: 48px; } }
.guardian-table th:not(:first-child), .guardian-table td:not(:first-child) { white-space: nowrap; }
@keyframes koma-reveal { 0% { filter: grayscale(1); transform: scale(1); } 60% { transform: scale(1.12); } 100% { filter: none; transform: scale(1); } }
@keyframes koma-pulse { 50% { box-shadow: inset 0 0 0 3px #f6c445, inset 0 0 0 5px #fff; } }
@keyframes kira { 0%, 60% { background-position: 100% 0; } 100% { background-position: -150% 0; } }