/* ===== 生徒用画面 v2 スタイル ===== */
/* 小学生向け: 大きめ文字・丸ゴシック系・やわらかい青緑系 */

:root {
  --bg: #f2fbfa;
  --panel: #ffffff;
  --ink: #2b3a42;
  --ink-soft: #5b6b73;
  --accent: #009688;
  --accent-dark: #00796b;
  --accent-soft: #b2dfdb;
  --accent-bg: #e0f2f1;
  --warn: #f6a609;
  --warn-bg: #fff6e0;
  --danger: #e05a4a;
  --danger-bg: #fdecea;
  --ok: #2e9e5b;
  --ok-bg: #e6f6ec;
  /* ①「かきかけ(保存した下書き)」の青系。すんだ=緑 / あとすこし=オレンジ と
     ぶつからない色を1つだけ足す(作業中であることを表す) */
  --draft: #3b82f6;
  --draft-bg: #eef4ff;
  --draft-chip: #dbe7ff;
  --draft-ink: #1d4ed8;
  --line: #d6e4e2;
  --paper-line: #cfd9dd;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 6px 20px rgba(0, 121, 107, 0.12);
  --font-round: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro",
    "Rounded Mplus 1c", "Zen Maru Gothic", "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-paper: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-round);
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.app-shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 14px;
}

/* ---- ヘッダー ---- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 4px 10px;
}

.app-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-dark);
  text-decoration: none;
}

.header-history-btn {
  border: 2px solid var(--accent-soft);
  background: var(--panel);
  color: var(--accent-dark);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.header-history-btn:active {
  background: var(--accent-bg);
}

.view {
  flex: 1;
  padding-bottom: 24px;
}

.app-footer {
  text-align: center;
  color: var(--ink-soft);
  padding: 12px 0 20px;
}

.app-disclaimer {
  margin: 8px auto 0;
  max-width: 640px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.75;
}

/* ---- 共通カード・見出し ---- */
.card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px;
  margin-bottom: 16px;
}

h1.screen-title {
  font-size: 24px;
  margin: 6px 0 16px;
  color: var(--accent-dark);
}

/* 誰のページかの表示(問題選択の見出しの上)。主役は見出しなので控えめに。 */
.screen-owner {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

.screen-owner + h1.screen-title {
  margin-top: 2px;
}

h2.section-title {
  font-size: 19px;
  margin: 0 0 12px;
  color: var(--accent-dark);
}

.lead {
  color: var(--ink-soft);
  margin: 0 0 16px;
}

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  padding: 15px 22px;
  cursor: pointer;
  width: 100%;
  transition: transform 0.05s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 0 var(--accent-dark);
}

.btn-secondary {
  background: var(--accent-bg);
  color: var(--accent-dark);
  border: 2px solid var(--accent-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-dark);
  border: 2px solid var(--accent-soft);
}

.btn-danger-soft {
  background: var(--warn-bg);
  color: #a5680a;
  border: 2px solid #f4d58a;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn + .btn {
  margin-top: 10px;
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- 入力 ---- */
label.field-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

.text-input {
  width: 100%;
  font-family: inherit;
  font-size: 18px;
  padding: 13px 14px;
  border: 2px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}

.text-input:focus {
  outline: none;
  border-color: var(--accent);
}

.field-hint {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.field-error {
  color: var(--danger);
  font-size: 14px;
  margin-top: 6px;
  min-height: 18px;
}

/* ---- ヘルプページ(help.html)への導線 ---- */
/* タイトル画面のコード入力の下と、フッターの2か所に置く。 */
.help-link-row {
  margin: 14px 0 0;
  text-align: center;
}

.footer-help-row {
  margin: 6px 0 0;
}

.help-link {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 2px dotted var(--accent-soft);
  padding-bottom: 2px;
}

/* ---- 問題選択: 級×形式タブ(3級・Eメール / 3級・英作文 / 準2級・Eメール / 準2級・英作文) ---- */
/* きろく(#history)の系列タブと同じ区分。スマホ幅では2×2、広い画面では横1列。 */
.level-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.level-tab {
  /* スマホ幅: 2列で折り返す / 560px以上: 横1列に並ぶ */
  flex: 1 1 calc(50% - 5px);
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  min-height: 48px;
  padding: 12px 8px;
  border-radius: 999px;
  border: 2px solid var(--accent-soft);
  background: var(--panel);
  color: var(--accent-dark);
  cursor: pointer;
}

.level-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 0 var(--accent-dark);
}

.level-tab:active {
  transform: translateY(1px);
}

@media (min-width: 560px) {
  .level-tab {
    flex: 1 1 0;
    font-size: 16px;
  }
}

.level-panel[hidden] {
  display: none;
}

/* ---- 問題選択: かきかた解説動画へのリンク(YouTubeを別タブで開く) ---- */
/* タブ(級×形式)ごとに1本。もんだい一覧より上に置き、選ぶ前に目に入るようにする。 */
.video-link {
  display: block;
  text-decoration: none;
  background: var(--accent-bg);
  border: 2px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 14px;
  color: var(--accent-dark);
  /* 長いラベルでも 375px 幅で溢れない */
  overflow-wrap: anywhere;
}

.video-link-main {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.video-link-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.5;
}

.video-link:active {
  background: var(--panel);
}

/* ---- 問題選択 ---- */
.group-block {
  margin-bottom: 18px;
}

.group-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent-dark);
  margin: 0 0 10px;
  padding-left: 4px;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.question-item {
  text-align: left;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  width: 100%;
}

.question-item:active {
  background: var(--accent-bg);
}

.question-item .q-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-dark);
  background: var(--accent-bg);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 6px;
}

.question-item .q-preview {
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---- 問題文表示 ---- */
.prompt-box {
  background: var(--accent-bg);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 16px;
  white-space: pre-wrap;
  line-height: 1.9;
}

.prompt-questions {
  margin: 14px 0 0;
  padding-left: 20px;
}

.prompt-questions li {
  margin-bottom: 6px;
}

.exam-reference-card {
  background: #fffdf9;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 0 0 16px;
}

.exam-reference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.exam-reference-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 900;
}

.exam-reference-range {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

.exam-instructions {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
}

.exam-instructions li {
  margin: 3px 0;
}

/* 本番の下線強調(準2級Eメール「下線部の特徴を問う…質問を2つ」)を再現 */
.exam-instructions .exam-emph {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.exam-email-box,
.exam-question-box {
  border: 2px solid var(--accent-soft);
  border-radius: 14px;
  background: var(--accent-bg);
  padding: 14px 16px;
}

.exam-box-label {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.exam-email-text {
  color: var(--ink);
  font-family: var(--font-paper);
  font-size: 17px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.exam-question-text {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-paper);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 700;
}

.underlined-target {
  background: transparent;
  color: inherit;
  padding: 0 1px 2px;
  border-bottom: 3px solid var(--accent);
}

/* ---- 回答用紙(試験の紙らしく) ---- */
.answer-sheet {
  background: #fff;
  border: 1px solid #b9c6c9;
  border-radius: 6px;
  padding: 16px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-family: var(--font-paper);
}

.sheet-note {
  font-family: var(--font-round);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 12px;
  padding: 6px;
  background: #f6f8f8;
  border-radius: 8px;
}

.sheet-fixed {
  color: #7c8a90;
  background: #f0f3f3;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 17px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.sheet-fixed.top {
  margin-bottom: 10px;
}

.sheet-fixed.bottom {
  margin-top: 10px;
}

.sheet-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: none;
  border-radius: 0;
  padding: 4px 2px;
  font-family: var(--font-paper);
  font-size: 18px;
  line-height: 34px;
  color: #1f2b30;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 33px,
    var(--paper-line) 33px,
    var(--paper-line) 34px
  );
  background-attachment: local;
}

.sheet-textarea:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

/* ---- 語数カウンタ ---- */
.word-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 17px;
  margin: 12px 0;
  padding: 10px;
  border-radius: 999px;
}

.word-counter.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.word-counter.under {
  background: var(--warn-bg);
  color: #b07407;
}

.word-counter.over {
  background: var(--danger-bg);
  color: var(--danger);
}

.word-counter .range-hint {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---- 語数バッジ(結果・履歴の答案に添える) ---- */
.word-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 13px;
}

.word-badge.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.word-badge.under {
  background: var(--warn-bg);
  color: #b07407;
}

.word-badge.over {
  background: var(--danger-bg);
  color: var(--danger);
}

.word-badge .wb-range {
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---- 折りたたみ問題文 ---- */
.collapse {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
}

.collapse > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  color: var(--accent-dark);
  list-style: none;
}

.collapse > summary::-webkit-details-marker {
  display: none;
}

.collapse > summary::before {
  content: "▶ ";
  font-size: 12px;
}

.collapse[open] > summary::before {
  content: "▼ ";
}

.collapse .collapse-body {
  padding: 0 14px 14px;
}

/* ---- ローディング ---- */
.loading-wrap {
  text-align: center;
  padding: 40px 10px;
}

.loading-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border: 6px solid var(--accent-bg);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-msg {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-dark);
}

.loading-sub {
  color: var(--ink-soft);
  margin-top: 8px;
}

/* ---- 採点待ち: 目安・経過 ---- */
.grade-eta {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
}

/* 採点中の離脱防止アナウンス(2026-09-07 の事故対策)。強い警告色にはせず、
   お願いのトーンで出す。 */
.grade-stay {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--accent-dark);
}

.grade-elapsed {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.grade-bar {
  margin: 12px auto 0;
  max-width: 260px;
  height: 10px;
  background: var(--accent-bg);
  border-radius: 999px;
  overflow: hidden;
}

.grade-bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent-soft);
  border-radius: 999px;
  transition: width 0.9s linear;
}

/* ---- 採点待ち: ことわざカード ---- */
.proverb-slot {
  margin-top: 22px;
}

.proverb-loading {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

.proverb-card {
  background: var(--accent-bg);
  border: 2px solid var(--accent-soft);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  text-align: center;
}

.proverb-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  letter-spacing: 0.04em;
}

.proverb-en {
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--ink);
}

.proverb-ja {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}

.proverb-ja ruby rt {
  font-size: 0.6em;
  color: var(--ink-soft);
}

.proverb-kotowaza {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
}

.proverb-btn {
  margin-top: 16px;
}

/* D: ことわざカードの動き。フリップ(意味を見る)・スライドイン(次のことわざ) */
.proverb-card.is-flip {
  transform-origin: center;
  backface-visibility: hidden;
  animation: proverb-flip 0.36s ease;
}

.proverb-card.is-slide {
  animation: proverb-slide-in 0.3s ease;
}

@keyframes proverb-flip {
  0% {
    transform: perspective(700px) rotateY(-90deg);
    opacity: 0.2;
  }
  60% {
    transform: perspective(700px) rotateY(12deg);
    opacity: 1;
  }
  100% {
    transform: perspective(700px) rotateY(0deg);
  }
}

@keyframes proverb-slide-in {
  0% {
    transform: translateX(42px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* カウントダウンが目安を過ぎたとき(最終チェック中メッセージ) */
.grade-elapsed.is-overtime {
  color: var(--accent-dark);
  font-weight: 700;
}

/* ---- 3段めくり: 例文・由来 ---- */
.proverb-example {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-style: italic;
}

/* 例文の日本語訳: 例文の直下に小さめ・控えめに添える */
.proverb-example-ja {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.proverb-example-ja ruby rt {
  font-size: 0.6em;
  color: var(--ink-soft);
}

.proverb-origin {
  margin-top: 14px;
  padding: 12px 12px 10px;
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
  text-align: left;
}

.proverb-origin-head {
  font-size: 14px;
  font-weight: 800;
  color: #b5730a;
  margin-bottom: 6px;
}

.proverb-origin-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}

.proverb-origin-body ruby rt {
  font-size: 0.6em;
  color: var(--ink-soft);
}

.proverb-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.proverb-actions .proverb-btn {
  margin-top: 0;
}

/* ---- キラカード(金枠 + 光沢シャイン + ✨) ---- */
.proverb-card.is-kira {
  position: relative;
  overflow: hidden;
  border-color: #e6b800;
  background:
    linear-gradient(135deg, #fffbe6 0%, #fff4c2 45%, #ffe9a8 100%);
  box-shadow: 0 0 0 3px #ffd84d, 0 8px 26px rgba(212, 160, 23, 0.4);
}

.proverb-card.is-kira::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 60%;
  height: 220%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(8deg);
  animation: kira-shine 2.4s ease-in-out infinite;
  pointer-events: none;
}

.proverb-kira-badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background: #ffcf33;
  color: #7a5200;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(212, 160, 23, 0.4);
}

@keyframes kira-shine {
  0% {
    left: -40%;
  }
  60%,
  100% {
    left: 130%;
  }
}

/* ---- 🦉 えいごカードずかん ---- */
.zukan-card {
  cursor: pointer;
}

.zukan-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin: 4px 0 10px;
}

.zukan-now {
  font-size: 30px;
  font-weight: 800;
  color: var(--accent-dark);
}

.zukan-total {
  font-size: 16px;
  color: var(--ink-soft);
}

.zukan-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.zukan-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zukan-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--panel);
  font-family: inherit;
}

.zukan-row.seen {
  cursor: pointer;
  border-color: var(--accent-soft);
  background: var(--accent-bg);
}

.zukan-row.seen.kira {
  border-color: #ffd84d;
  background: linear-gradient(135deg, #fffbe6 0%, #fff2b8 100%);
}

.zukan-kira {
  font-size: 14px;
}

.zukan-en {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.zukan-mean {
  font-size: 13px;
  color: var(--ink-soft);
}

.zukan-row.locked {
  align-items: center;
  border-style: dashed;
  background: repeating-linear-gradient(
    45deg,
    #f2f5f6,
    #f2f5f6 8px,
    #eaeff0 8px,
    #eaeff0 16px
  );
}

.zukan-silhouette {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: #b7c3c6;
}

/* ずかん詳細(復習) */
.proverb-card--detail {
  text-align: center;
}

/* ---- 誤操作防止: 採点中のヘッダ無効化 ---- */
/* pointer-events は殺さない(タップを拾ってトーストを出すため。C) */
.app-title.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.header-history-btn:disabled,
.header-history-btn.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- 小トースト(採点中ロックのフィードバック等。C) ---- */
.toast-root {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 80;
  max-width: 88vw;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(43, 58, 66, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-root.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- 結果ページ ---- */
.score-badge {
  text-align: center;
  padding: 22px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.score-badge .score-num {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.1;
}

.score-badge .score-max {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-soft);
}

.score-badge.pass {
  background: var(--ok-bg);
  color: var(--ok);
}

.score-badge.near {
  background: var(--warn-bg);
  color: #b07407;
}

.score-badge.grow {
  background: var(--accent-bg);
  color: var(--accent-dark);
}

.pass-message {
  font-size: 18px;
  font-weight: 800;
  margin-top: 10px;
}

.feedback-card {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  border-left: 6px solid var(--accent);
}

.feedback-card .fc-title {
  font-weight: 800;
  margin-bottom: 6px;
}

.feedback-card.good {
  background: var(--ok-bg);
  border-left-color: var(--ok);
}

.feedback-card.fix {
  background: var(--warn-bg);
  border-left-color: var(--warn);
}

.feedback-card.next {
  background: var(--accent-bg);
  border-left-color: var(--accent);
}

/* ワンポイント アドバイス(数字表記の注釈)。減点ではないので、
   赤(danger)ではなく やわらかい黄色系で「直すところ」と区別する。 */
.style-advice-card {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--warn-bg);
  border-left: 6px solid var(--warn);
}

.style-advice-card .style-advice-body {
  font-weight: 700;
  line-height: 1.7;
}

.style-advice-card .style-advice-note {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.corrections-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.correction-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fff;
}

.correction-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 16px;
}

.correction-before {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 3px 8px;
  border-radius: 6px;
  text-decoration: line-through;
}

.correction-arrow {
  color: var(--ink-soft);
  font-weight: 800;
}

.correction-after {
  background: var(--ok-bg);
  color: var(--ok);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.correction-comment {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.edited-answer-box {
  background: #f6f8f8;
  border-radius: var(--radius-sm);
  padding: 14px;
  white-space: pre-wrap;
  line-height: 1.8;
  font-family: var(--font-paper);
  font-size: 17px;
}

/* 生徒の提出原文(等幅っぽく・改行そのまま) */
.student-answer-box {
  background: #f6f8f8;
  border-radius: var(--radius-sm);
  padding: 14px;
  white-space: pre-wrap;
  line-height: 1.8;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 16px;
  color: #1f2b30;
}

/* 書きなおしの型の説明 */
.rewrite-note {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #a5680a;
}

/* ---- 履歴グラフ ---- */
.chart-wrap {
  overflow-x: auto;
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 320px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}

.trend-note {
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--ok);
  margin: 14px 0 4px;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 14px;
}

.history-table th,
.history-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  text-align: left;
}

.history-table th {
  color: var(--ink-soft);
  font-weight: 700;
}

.history-hint {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

.history-row {
  cursor: pointer;
}

.history-row:active td {
  background: var(--accent-bg);
}

/* ---- 終了画面 ---- */
.done-screen {
  text-align: center;
  padding: 40px 16px;
}

.done-emoji {
  font-size: 60px;
}

.done-msg {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-dark);
  margin: 14px 0;
}

/* ---- エラー表示 ---- */
.error-box {
  background: var(--danger-bg);
  border: 2px solid #f3c1ba;
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}

.error-box .error-msg {
  color: var(--danger);
  font-weight: 700;
  margin-bottom: 12px;
}

.empty-note {
  text-align: center;
  color: var(--ink-soft);
  padding: 30px 10px;
  font-size: 17px;
}

/* ---- モーダル ---- */
.modal-root[hidden] {
  display: none;
}

.modal-root {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 40, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  padding: 12px;
}

.modal-card {
  background: var(--panel);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  /* 画面内に必ず収める。.modal-root の padding 12px×2 を差し引く。
     dvh はモバイルのURLバー可変高に追従する(非対応ブラウザは上の vh にフォールバック)。
     トリミング画面の「やめる」まで届くよう、あふれた分はカード内でスクロールさせる。 */
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 18px;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.25);
}

.modal-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-dark);
  margin: 0 0 14px;
}

.guide-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;
}

.guide-list .guide-emoji {
  font-size: 28px;
}

/* 撮影ガイドの補足(問題文の写り込みは気にしなくてよい と先に伝える) */
.guide-note {
  margin: -8px 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.6;
}

.file-input-label {
  display: block;
}

.file-input-label input[type="file"] {
  display: none;
}

/* ---- OCR: トリミング(答案の部分だけを切り出す) ---- */
.crop-stage {
  display: flex;
  justify-content: center;
  background: #16302f;
  border-radius: var(--radius-sm);
  padding: 8px;
  overflow: hidden;
}

.crop-canvas {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  /* 枠外ドラッグでの新規作成は廃止したので、crosshair(=描ける合図)にはしない */
  cursor: move;
  /* ドラッグ中にページがスクロール/ズームしないようにする(指操作の必須設定) */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* トリミング画面の説明文。縦の余白を詰めて「やめる」まで画面内に収める */
.crop-lead {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* 副ボタン(わくを もどす / やめる)は横並びで高さを節約する */
.crop-sub-row {
  display: flex;
  gap: 10px;
}

/* 横並びで狭くなるぶん、文字を折り返さない範囲まで詰める(1行で読ませる) */
.crop-sub-row .btn {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  padding: 15px 10px;
  white-space: nowrap;
}

.crop-hint {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.5;
}

.ocr-editarea {
  width: 100%;
  min-height: 160px;
  font-family: var(--font-paper);
  font-size: 17px;
  line-height: 1.7;
  padding: 12px;
  border: 2px solid var(--accent-soft);
  border-radius: var(--radius-sm);
}

.ocr-warnings {
  background: var(--warn-bg);
  color: #a5680a;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  margin: 10px 0;
}

/* ruby 表示 */
ruby rt {
  font-size: 0.6em;
  color: var(--ink-soft);
}

@media (min-width: 480px) {
  .modal-root {
    align-items: center;
  }
}

/* ---- 推移グラフ 系列タブ(#history) ---- */
.series-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.series-tab {
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid var(--accent-soft);
  background: var(--panel);
  color: var(--accent-dark);
  cursor: pointer;
}

.series-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 0 var(--accent-dark);
}

.series-tab:active {
  transform: translateY(1px);
}

/* ---- 合格ライン 進捗バー(#result) ---- */
.pass-progress {
  text-align: center;
}

.pass-progress .pp-head {
  font-size: 18px;
  font-weight: 800;
  color: var(--warn);
  margin-bottom: 12px;
}

.pass-progress.reached .pp-head {
  color: var(--ok);
}

.pass-progress .pp-track {
  position: relative;
  height: 18px;
  background: var(--accent-bg);
  border-radius: 999px;
  overflow: hidden;
}

.pass-progress .pp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffcb52, #f6a609);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.pass-progress.reached .pp-fill {
  background: linear-gradient(90deg, #6fcf97, #2e9e5b);
}

/* トラック右端が「ごうかくライン」= 100%地点 */
.pass-progress .pp-goal {
  position: absolute;
  top: -3px;
  right: 0;
  width: 3px;
  height: 24px;
  background: #b07407;
  border-radius: 2px;
}

.pass-progress .pp-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---- スタンプ帳(30もん チャレンジ) ---- */
.stamp-card {
  text-align: center;
}

.stamp-count {
  margin: 4px 0 12px;
}

.stamp-count .stamp-now {
  font-size: 40px;
  font-weight: 900;
  color: var(--accent-dark);
  line-height: 1;
}

.stamp-count .stamp-goal {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-soft);
}

.stamp-bar {
  height: 16px;
  background: var(--accent-bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.stamp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4db6ac, #009688);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.stamp-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 40px;
  line-height: 1;
}

.stamp-star {
  color: #d5dede;
}

.stamp-star.on {
  color: #f6b93b;
  text-shadow: 0 2px 4px rgba(246, 166, 9, 0.3);
}

.stamp-hint {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 12px 0 0;
}

/* 採点直後の達成演出 */
.stamp-celebrate {
  background: linear-gradient(135deg, #fff3cf, #ffe6a0);
  border: 2px solid #f4d58a;
  color: #a5680a;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

/* ---- デジタル賞状(#award) ---- */
.award-wrap {
  padding: 4px 0 24px;
}

.award-cert {
  position: relative;
  background: linear-gradient(180deg, #fffdf5, #fff8e6);
  border: 8px double #c9a227;
  border-radius: 14px;
  padding: 32px 24px 28px;
  text-align: center;
  color: #5a4a1c;
  box-shadow: 0 8px 30px rgba(201, 162, 39, 0.25);
}

.award-cert::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #e0c66b;
  border-radius: 8px;
  pointer-events: none;
}

.award-ribbon {
  font-size: 52px;
  line-height: 1;
}

.award-heading {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.4em;
  color: #b8901c;
  margin: 8px 0 18px;
}

.award-name {
  font-size: 24px;
  font-weight: 800;
  color: #4a3d17;
  border-bottom: 2px solid #d9c37a;
  display: inline-block;
  padding: 0 16px 6px;
  margin-bottom: 18px;
}

.award-body {
  font-size: 17px;
  line-height: 2;
  margin-bottom: 18px;
}

.award-congrats {
  font-size: 22px;
  font-weight: 900;
  color: #d18b00;
  margin-bottom: 16px;
}

.award-date {
  font-size: 15px;
  color: #7a6a34;
  margin-bottom: 10px;
}

/* ブランド表示: ロゴを主にし、画像が無い場合のみテキストへフォールバック */
.award-brand {
  margin-top: 18px;
}

.award-logo {
  display: block;
  width: 140px;
  max-width: 60%;
  height: auto;
  margin: 0 auto;
}

/* 既定は非表示。ロゴの onerror で display:block に切り替わる */
.award-seal {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: #b8901c;
}

/* 賞状未達成の案内 */
.award-pending {
  text-align: center;
}

.award-pending-emoji {
  font-size: 52px;
}

.award-pending-msg {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-dark);
  margin: 8px 0 16px;
}

/* 印刷: 賞状だけを A4 縦(portrait)で1ページに収める */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
  body {
    background: #fff;
  }
  .app-header,
  .app-footer,
  .award-actions {
    display: none !important;
  }
  .app-shell {
    max-width: none;
    padding: 0;
  }
  .award-wrap {
    padding: 0;
  }
  /* 印刷領域は 186mm x 273mm。縦向きは横幅が狭いので余白と行間を締め、
     縦方向は中央寄せで1ページいっぱいに見せる */
  .award-cert {
    box-shadow: none;
    border-color: #c9a227;
    page-break-inside: avoid;
    break-inside: avoid;
    height: 269mm;
    padding: 16mm 14mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .award-ribbon {
    font-size: 34pt;
  }
  .award-heading {
    font-size: 24pt;
    margin: 6mm 0 8mm;
  }
  .award-name {
    font-size: 18pt;
    /* flex 化で inline-block が block 化されるため、下線が広がらないよう中央寄せ */
    align-self: center;
    margin: 0 0 8mm;
  }
  .award-body {
    font-size: 12pt;
    line-height: 1.9;
    margin-bottom: 8mm;
  }
  .award-congrats {
    font-size: 16pt;
    margin-bottom: 6mm;
  }
  .award-date {
    font-size: 11pt;
    margin-bottom: 4mm;
  }
  /* ロゴは印刷でも必ず出す(背景画像ではなく img なので色調整のみ) */
  .award-brand {
    margin-top: 8mm;
  }
  .award-logo {
    display: block !important;
    width: 40mm;
    max-width: 40mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .award-seal {
    font-size: 10pt;
  }
}

/* OCR挿入直後の確認リマインダー */
.ocr-check-note {
  background: #fff3e0;
  border: 1.5px solid #f0b25f;
  color: #8a5a1d;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 10px 0 4px;
  font-size: 15px;
  line-height: 1.6;
}

/* ---- 問題文の訳(保護者向けの参考情報。控えめなトーン) ---- */
.translation-card {
  box-shadow: none;
  border: 1px dashed var(--line);
}

.translation-card .translation-title {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.translation-body {
  white-space: pre-wrap;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---- 再添削(書きなおし再提出) ---- */
/* 点差カード(#result)。既存カードのトーンを踏襲。up=緑系/same=青緑系/
   down=中立のやさしい配色。責めない文言なので down も刺激の少ない色にする。 */
.retry-delta {
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

.retry-delta.up {
  background: var(--ok-bg);
  border-color: var(--ok);
  color: #1f7a44;
}

.retry-delta.same {
  background: var(--accent-bg);
  border-color: var(--accent-soft);
  color: var(--accent-dark);
}

.retry-delta.down {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink-soft);
}

/* C: 一発合格カード(#result)。書きなおし無しで合格ラインを超えたとき。
   retry-delta.up と同じ「よくできた」トーンで並べる。 */
.first-perfect {
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  background: var(--ok-bg);
  border: 2px solid var(--ok);
  color: #1f7a44;
}

/* 書きなおし上限の注記(#result) */
.retry-limit-note {
  margin: 10px 2px 0;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

/* 書きなおし画面のバナー(#answer) */
.retry-banner {
  background: var(--accent-bg);
  border: 2px solid var(--accent-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.retry-banner-head {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-dark);
  margin-bottom: 8px;
}

/* 「さっきの アドバイス」ボックス */
.retry-advice {
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.retry-advice-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.retry-advice-summary {
  margin-bottom: 8px;
  line-height: 1.7;
}

.retry-advice-card {
  border-left: 5px solid var(--warn);
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 8px;
}

.retry-advice-title {
  font-weight: 800;
  margin-bottom: 4px;
}

/* 履歴一覧の「かきなおし◯回目」チップ(小さな丸ピル) */
.retry-chip {
  display: inline-block;
  background: var(--accent-bg);
  color: var(--accent-dark);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
 * Ver2 第2便 UI改善(② 履歴からの書きなおし / ③ 済マーク・問題番号 /
 * ④ おめでとう演出・報酬予告)。既存パレット・角丸トーンを踏襲。
 * ========================================================= */

/* ③ もんだい一覧の 済マーク(✓ やった / ★ かんぺき) */
.question-item.is-done {
  border-color: var(--ok);
  background: var(--ok-bg);
}

.question-item.is-perfect {
  border-color: var(--warn);
  background: var(--warn-bg);
}

.question-item .q-mark {
  display: inline-block;
  margin-top: 6px;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 10px;
  vertical-align: middle;
}

.question-item.is-done .q-mark {
  color: #1f7a44;
  background: #d7f0e0;
  border: 1px solid var(--ok);
}

.question-item.is-perfect .q-mark {
  color: #a5680a;
  background: #ffedbf;
  border: 1px solid var(--warn);
}

/* B: 「あとすこしで かんぺき!」— 責めないオレンジ系(緑マークと差し替え) */
.question-item.is-near {
  border-color: var(--warn);
  background: var(--warn-bg);
}

.question-item.is-near .q-mark {
  color: #b45309;
  background: #ffe1b3;
  border: 1px solid var(--warn);
}

/* ①: 「✏️ かきかけ」— 保存した下書きがある問題。青系で「作業中」を表す
   (緑=すんだ / オレンジ=あとすこし と ぶつからない色にする) */
.question-item.is-draft {
  border-color: var(--draft);
  background: var(--draft-bg);
}

.question-item.is-draft .q-mark {
  color: var(--draft-ink);
  background: var(--draft-chip);
  border: 1px solid var(--draft);
}

.near-perfect-chip {
  display: inline-block;
  background: #ffe1b3;
  color: #b45309;
  border: 1px solid var(--warn);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* A: 問題選択 上部の「まえの つづきから」カード */
.continue-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 2px solid var(--warn);
  background: var(--warn-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.continue-card:active {
  transform: translateY(1px);
}

.continue-icon {
  font-size: 26px;
  line-height: 1;
  flex: 0 0 auto;
}

.continue-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.continue-title {
  font-size: 17px;
  font-weight: 800;
  color: #a5680a;
}

.continue-detail {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.continue-arrow {
  flex: 0 0 auto;
  font-size: 28px;
  font-weight: 900;
  color: var(--warn);
  line-height: 1;
}

/* ===== 採点のクオータ(月次枠 + チケット) ===== */

/* もんだい一覧 上部の残数チップ(常時表示。注記つきの2行構成)
   チケット併記で本文が長くなるため、狭い画面では折り返して縦に伸ばす
  (はみ出させない・横スクロールを起こさない)。 */
.quota-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 8px 16px;
  border-radius: 18px;
  background: var(--accent-bg);
  border: 1.5px solid var(--accent-soft);
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 800;
}

.quota-chip .quota-chip-icon {
  font-size: 18px;
  line-height: 1.4;
}

.quota-chip .quota-chip-body {
  display: flex;
  flex-direction: column;
  min-width: 0; /* flex 子要素の折り返しを許す(はみ出し防止) */
  line-height: 1.4;
}

.quota-chip .quota-chip-text {
  overflow-wrap: break-word;
}

/* 月次枠とチケットの区切り(「あと3かい ＋ 🎟️ チケット5まい」) */
.quota-chip .quota-chip-plus {
  margin: 0 4px;
  opacity: 0.7;
}

/* 併記時のチケット部分。折り返しても「🎟️ チケット ◯まい」が分断されないようにする */
.quota-chip .quota-chip-ticket {
  display: inline-block;
  white-space: nowrap;
}

/* 「かきなおしも 1かい と かぞえるよ」の注記(すこし小さく・控えめ) */
.quota-chip .quota-chip-note {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.85;
}

/* 上限到達時のチップ(責めない・落ち着いた色) */
.quota-chip.quota-chip-done {
  background: var(--warn-bg);
  border-color: #f4d58a;
  color: #a5680a;
}

/* 上限到達の注記(#result)。ボタン群の「上」に置くので、目に入る強さにする。 */
.retry-limit-note.quota-out-note {
  margin: 4px 2px 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  border: 2px solid #f4d58a;
  color: #a5680a;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}

/* 残り1回の事前警告(#answer 送信ボタンの直上)。押す前に必ず目に入る位置。 */
.last-attempt-warn {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  border: 2px solid #f4d58a;
  color: #a5680a;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

/* 上限到達: 回答用紙ボタンの代わりのやさしい案内カード */
.quota-block-card {
  margin: 18px 0 0;
  padding: 22px 18px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  border: 2px solid #f4d58a;
  text-align: center;
}

.quota-block-emoji {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
}

.quota-block-msg {
  font-size: 18px;
  font-weight: 800;
  color: #a5680a;
  line-height: 1.5;
}

/* A2: 履歴モーダル上部に複製した書きなおしボタン */
.hist-rewrite-top {
  width: 100%;
  margin-bottom: 14px;
}

/* ③ 履歴の もんだい番号(小さな丸ピル) */
.hist-qnum {
  display: inline-block;
  background: var(--accent-bg);
  color: var(--accent-dark);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* ② かんぺきバッジ(結果・履歴。retry-chip とトーンを合わせた星ピル) */
.kanpeki-badge {
  display: inline-block;
  background: #fff3cf;
  color: #a5680a;
  border: 1px solid #f4d58a;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* 履歴ふりかえりモーダルの小見出し(もんだい番号・かんぺきバッジ) */
.modal-subtitle {
  margin: -4px 0 12px;
}

/* ---- せんせいに つたえる(質問・感想) ---- */
/* もんだい一覧の入口。主導線(問題を選ぶ)より一段弱いトーンにしたいので、
   .btn ではなく細い枠のピルにして右寄せで置く(残数チップより小さい)。 */
.feedback-launch {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 12px;
}

.feedback-launch-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-dark);
  background: var(--panel);
  border: 1.5px solid var(--accent-soft);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.feedback-launch-btn:active {
  transform: translateY(1px);
}

.feedback-lead {
  margin: -6px 0 12px;
  font-size: 16px;
  color: var(--ink-soft);
}

.feedback-input {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.feedback-input:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.feedback-note {
  margin: 6px 0 12px;
  font-size: 13px;
  color: var(--ink-soft);
}

.feedback-sending,
.feedback-error {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
}

.feedback-sending {
  background: var(--accent-bg);
  color: var(--accent-dark);
}

.feedback-error {
  background: var(--danger-bg);
  border: 2px solid #f3c1ba;
  color: var(--danger);
}

.feedback-done {
  text-align: center;
  padding: 8px 0 18px;
}

.feedback-done-emoji {
  font-size: 44px;
  line-height: 1.2;
}

.feedback-done-msg {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-dark);
}

/* ④ スタンプ帳の報酬予告(未達成時のみ常設) */
.stamp-reward-preview {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-dark);
  background: var(--accent-bg);
  border: 1px dashed var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* ④ 合格ライン突破の演出(紙吹雪風・2.6秒で自動消滅) */
.pass-celebrate {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}

.pass-celebrate .confetti-piece {
  position: absolute;
  top: -8%;
  font-size: 26px;
  will-change: transform, opacity;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) rotate(320deg);
    opacity: 0.9;
  }
}

.pass-celebrate-banner {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  background: linear-gradient(135deg, #fff3cf, #ffe6a0);
  border: 3px solid #f4d58a;
  color: #a5680a;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  border-radius: var(--radius);
  padding: 16px 22px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  animation: celebrate-pop 2.6s ease-out both;
}

@keyframes celebrate-pop {
  0% {
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
  }
  12% {
    transform: translateX(-50%) scale(1.08);
    opacity: 1;
  }
  22% {
    transform: translateX(-50%) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0;
  }
}

/* アニメーションを控えたい設定では帯だけ静かに出す */
@media (prefers-reduced-motion: reduce) {
  .pass-celebrate .confetti-piece {
    display: none;
  }
  .pass-celebrate-banner {
    animation: none;
    transform: translateX(-50%) scale(1);
  }
  /* D: ことわざカードの動きも無効化 */
  .proverb-card.is-flip,
  .proverb-card.is-slide {
    animation: none;
    transform: none;
  }
  /* キラの光沢アニメも無効化(枠・色の特別感は残す) */
  .proverb-card.is-kira::after {
    animation: none;
    display: none;
  }
  /* C: トーストの動きは控えめに(表示自体は残す) */
  .toast-root {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}

/* =========================================================
   印刷: #answer(回答用紙)を 英検本番風の「手書き用 解答用紙」にする
   ---------------------------------------------------------
   ねらい: 印刷 → 紙に手書き → 「写真から入力」で読み込む、という使い方。
   最重要要件: 全級・全形式で 1ページ目に収まり、2ページ目を作らないこと。
   (罫線は画像を使わず 1行=1div の border-bottom で引く)
   ========================================================= */

/* 印刷専用の要素は画面には出さない */
.print-only {
  display: none !important;
}

/* 画面側の導線(「いんさつして 手書きも できるよ！」) */
.print-hint-row {
  margin: 14px 0 0;
  text-align: center;
}

.print-hint-link {
  border: none;
  background: none;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.print-hint-link:active {
  opacity: 0.6;
}

@media print {
  /* A4縦・余白12mm(印刷領域 186mm × 273mm) */
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html,
  body {
    background: #fff;
  }

  body {
    /* 問題文が最長のケース(準2級Eメール)でも1ページに収まるよう圧縮する */
    font-size: 9pt;
    line-height: 1.5;
  }

  .app-shell {
    max-width: none;
    padding: 0;
    min-height: 0;
  }

  .view {
    padding-bottom: 0;
  }

  /* 画面専用UIは一切印刷しない(2ページ目にボタンが出る事故を防ぐ) */
  h1.screen-title,
  .btn,
  .btn-row,
  .word-counter,
  .last-attempt-warn,
  .quota-chip,
  .feedback-launch,
  .retry-banner,
  .ocr-check-note,
  .sheet-note,
  .sheet-textarea,
  .print-hint-row,
  .toast-root,
  .modal-root,
  .app-disclaimer,
  .footer-help-row {
    display: none !important;
  }

  /* 印刷専用要素を出す(.print-only の非表示より後に置いて打ち消す) */
  .print-only {
    display: block !important;
  }

  /* ---- ヘッダー(級・形式・語数めやす・なまえ欄) ---- */
  .print-sheet-head {
    border-bottom: 2px solid #333;
    padding-bottom: 2mm;
    margin-bottom: 3mm;
  }

  .print-sheet-title {
    font-size: 13pt;
    font-weight: 800;
    color: #000;
  }

  .print-sheet-meta {
    display: flex;
    align-items: baseline;
    gap: 6mm;
    margin-top: 1.5mm;
    font-size: 9pt;
    color: #000;
  }

  .print-sheet-tag {
    font-weight: 800;
  }

  .print-sheet-name {
    margin-left: auto;
    white-space: nowrap;
  }

  .print-name-line {
    display: inline-block;
    width: 40mm;
    border-bottom: 1px solid #333;
  }

  /* ---- 問題文(既存の exam-reference-card をそのまま縮めて使う) ---- */
  .exam-reference-card {
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 3mm 4mm;
    margin: 0 0 3mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .exam-reference-head {
    margin-bottom: 1.5mm;
  }

  .exam-reference-kicker {
    min-height: 0;
    padding: 0.5mm 2mm;
    background: #eee;
    color: #000;
    font-size: 8pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .exam-reference-range {
    color: #000;
    font-size: 8pt;
  }

  .exam-instructions {
    margin: 0 0 2.5mm;
    padding-left: 5mm;
    font-size: 8pt;
    line-height: 1.45;
    color: #000;
  }

  .exam-instructions li {
    margin: 0;
  }

  .exam-email-box,
  .exam-question-box {
    border: 1px solid #999;
    border-radius: 3px;
    background: #fff;
    padding: 2.5mm 3mm;
  }

  .exam-box-label {
    color: #000;
    font-size: 7.5pt;
    margin-bottom: 1mm;
  }

  .exam-email-text {
    color: #000;
    font-size: 9pt;
    line-height: 1.5;
  }

  .exam-question-text {
    color: #000;
    font-size: 10pt;
    line-height: 1.45;
  }

  .underlined-target {
    border-bottom: 1.5px solid #000;
  }

  /* ---- 解答らん(太めの外枠 + 横罫線) ---- */
  .answer-sheet {
    border: 2px solid #333;
    border-radius: 2px;
    box-shadow: none;
    padding: 3mm 4mm 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-caution {
    margin: 0 0 2mm;
    font-family: var(--font-round);
    font-size: 8pt;
    color: #333;
  }

  /* 定型文(Hi, ◯◯! / Thank you for your e-mail. / Best wishes,)は印字しておく */
  .sheet-fixed {
    background: none;
    color: #444;
    padding: 0;
    font-size: 10pt;
    line-height: 1.5;
  }

  .sheet-fixed.top {
    margin: 0 0 1mm;
  }

  .sheet-fixed.bottom {
    margin: 2mm 0 0;
  }

  /* 罫線本体。子どもの手書き用にゆったり(1行 10mm)。
     最長ケース(準2級Eメール・10行)でも1ページに収まることを PDF で実測済み。 */
  .print-lines {
    margin: 0;
  }

  .print-line {
    height: 10mm;
    border-bottom: 0.4mm solid #b5b5b5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ---- 下部の案内 ---- */
  .print-foot {
    margin: 3mm 0 0;
    font-family: var(--font-round);
    font-size: 7.5pt;
    line-height: 1.4;
    color: #444;
  }
}