/* =============================================================
 * readability.css — 役割別の文字サイズ・行高・色（2026-10-05）
 *
 * 依頼：docs/ui-20261005/typography-request.md（Kabuさんの実測と修正案）
 * 値は theme.css の --fs-* / --lh-* / --c-* を使う。
 * 各ページの <style> の後（</head> の直前）に読み込み、ページ側の指定を上書きする。
 *
 * 方針
 * - 言語ではなく役割で大きさを決める（問題文・選択肢・解説・意味を伝える訳・
 *   補助説明・件数・操作ラベル）。.vn / .vs-sub を一括で拡大しない。
 * - 「操作できない」と「文字を薄くする」を分ける。回答後の選択肢は正解・
 *   不正解・未選択とも読み直せる濃さを保つ。
 * - 濃い地（緑・赤・金のボタンや帯）の中の訳は、地に合った前景色にする。
 * - 解説の常時斜体はやめる（斜体は見出しに添える短い訳だけに残す）。
 * - !important はページ側の style 属性を上書きする箇所だけに使う。
 * ============================================================= */

/* -----------------------------------------------------------
 * 1. 全ページ共通
 * --------------------------------------------------------- */

/* 濃色ボタンの中の訳。.btn の .vn は既定で --green-soft（緑の地で 2.0:1）、
   単語ページの「つぎへ」の .vs-sub は #536b55（1.3:1）でほぼ読めなかった。
   ボタン自身の文字色を受け継がせる（緑・金・赤どの地でも本体の文字と同じ読みやすさ）。
   テンプレートの style 属性で色を指定している訳もあるため !important。 */
.btn:not(.btn--ghost) .vn,
.btn:not(.btn--ghost) .vs-sub {
  color: inherit !important;
  opacity: 0.9;
}

/* 上部の学生バー（profile.js）のログアウト：訳 10px → 12px（style 属性で指定されている） */
.logout-btn .vn { font-size: var(--fs-label-vn) !important; }

/* 戻るリンク（日本語 #6B8E6B は 3.2:1）とページ名に添える訳 */
.back-link,
.hub-bar .back-link,
.vocab-bar .back-link,
.practice-bar .back-link,
.quiz-bar .back-link { color: var(--c-sub); }
/* 問題数・正解数（件数）の補助文字 */
.practice-bar .score,
.practice-bar .score .total,
.quiz-bar .score { color: var(--c-sub); }
.hub-bar .crumb { color: var(--c-vn); }
.back-link .vn,
.hub-bar .back-link .vn,
.vocab-bar .back-link .vn,
.practice-bar .back-link .vn,
.quiz-bar .back-link .vn { font-size: 13px; color: var(--c-vn); }
.practice-bar .title-mini .vn,
.quiz-bar .title-mini .vn,
.vocab-bar .title-mini .vn { color: var(--c-vn); }

/* -----------------------------------------------------------
 * 2. ホーム（index.html / index2.html）
 * --------------------------------------------------------- */

/* 見出しの下の説明（16px の訳が 3.2:1 だった） */
.top-hero .vn { color: var(--c-vn); }

/* 全体の進み具合 */
.overall .label { font-size: 13px; color: var(--c-sub); }
.overall .label .vn { font-size: var(--fs-label-vn); opacity: 1; color: var(--c-vn); }

/* つづきから（resume-v2.css で 390px 以下は訳 11px まで縮んでいた） */
@media (max-width: 390px) {
  #resume-action-vn { font-size: 13px; color: var(--c-vn); }
  .resume-cta .resume-destination .vn { font-size: var(--fs-label-vn); }
}

/* きょうの ふくしゅう：0件のときも文字は読める濃さにする（押せないことは枠と矢印で示す） */
.review-cta .rc-title .vn { font-size: 13px; color: var(--c-vn); }
.review-cta.is-empty { opacity: 1; background: transparent; box-shadow: none; border: 1px dashed var(--green-pale); }
.review-cta.is-empty .rc-title { color: var(--c-sub); }
.review-cta.is-empty .rc-arrow { opacity: 0.35; }
.review-cta.is-empty .rc-badge { color: var(--green); }

/* ステージの帯 */
.stage-banner .stage-no { font-size: 12px; }
.stage-banner .stage-title { font-size: 22px; }
.stage-banner .stage-vn { font-size: 14px; line-height: 1.5; color: var(--c-vn); }
.stage-banner.prep .stage-vn,
.stage-banner.prep .stage-range { color: #7a6229; }
.stage-banner .stage-theme { font-size: 14px; line-height: 1.5; color: var(--c-sub); }
.stage-banner .stage-range { font-size: 12px; }
.stage-banner.locked .stage-vn,
.stage-banner.locked .stage-theme { color: #7f8c7f; }

/* 地図のノード名（日本語 11.5px → 14px、訳 9.5px → 13px、状態 10px → 12px）。
   字を大きくした分、札の幅を 130px → 168px に広げ、行数の上限も 1 行ずつ増やす。 */
.node-caption { max-width: 168px; }
.node-caption .cap-jp {
  font-size: 14px;
  line-height: 1.35;
  -webkit-line-clamp: 3;
}
.node-caption .cap-vn {
  font-size: 13px;
  line-height: 1.35;
  margin-top: 2px;
  color: var(--c-vn);
  -webkit-line-clamp: 3;
}
.node-caption .cap-percent { font-size: 12px; line-height: 1.4; margin-top: 2px; color: var(--c-sub); }
.node-caption .cap-percent .vn { font-size: 12px; color: var(--c-vn); }
.node-row.is-locked .cap-jp { color: #637563; }
.node-row.is-locked .cap-vn { opacity: 1; color: #6f7f6f; }

/* 次のコース */
.next-course-no { font-size: 12px; }
.next-course-vn { font-size: 14px; line-height: 1.5; color: var(--c-vn); }
.next-course-note { font-size: 13px; line-height: 1.55; }
.next-course-note .vn { font-size: 13px; }

/* -----------------------------------------------------------
 * 3. 課のハブ（lessonN-hub.html）
 *    主題は PC 60px → 40px（Kabuさん案 36〜40px の上限）。スマホは 34px。
 * --------------------------------------------------------- */
.hub-hero .lesson-title { font-size: 40px; line-height: 1.2; }
.hub-hero .lesson-vn { font-size: 16px; line-height: 1.6; color: var(--c-vn); }
.lesson-progress .label { font-size: 13px; color: var(--c-sub); letter-spacing: 0.1em; }
.lesson-progress .label .vn { font-size: 13px; letter-spacing: 0; color: var(--c-vn); }
.module-card { padding: 18px 20px; }
.module-card .m-body { gap: 6px; }
/* 「おまけ」カード（.bonus-card）は写真の上の小さな札で、狭い幅の縮小をページ側が持つので対象外 */
.module-card:not(.bonus-card) .m-label { font-size: 20px; line-height: var(--lh-tight); }
.module-card .m-vn { font-size: var(--fs-vn-body); line-height: 1.45; color: var(--c-vn); }
.module-card .m-status .count { font-size: var(--fs-meta); color: var(--c-sub); }
.module-card .m-status .pill { font-size: 13px; letter-spacing: 0.04em; padding: 4px 12px; }
.module-card .m-status .pill .vn { font-size: var(--fs-label-vn) !important; color: inherit; } /* style 属性で 10px */
.module-card .next-badge { font-size: 13px; color: var(--ink); }
.module-card .next-badge .vn { font-size: var(--fs-label-vn); color: inherit; }
.module-card.in-progress .pill { color: var(--ink); }
.module-card.completed .pill .vn,
.module-card.in-progress .pill .vn { color: inherit; }
/* 20課などの「おまけ」カードは暗い写真の上に明るい文字。上の色指定を戻す */
.bonus-card .m-vn { color: #E8DEC6; }
.bonus-card .m-status .count { color: #F4E4B8; }
.bonus-card .vn { color: inherit; }
.module-card .m-status .count .vn { font-size: var(--fs-label-vn) !important; } /* style 属性で 10px */
.bonus-heading { font-size: 13px; color: var(--c-sub); }
.bonus-heading .vn { color: var(--c-vn); }
/* 上部バー：390px で「← もどる Quay lại」が3行に折れていた（1課だけ英語切替ボタンがあり幅が足りない）。
   戻るリンクは1行に保ち、入りきらないときはレベル表示を次の行へ回す */
@media (max-width: 420px) {
  /* rewards.js が後から .hub-bar{flex-wrap:nowrap} を差し込むので詳細度を上げる */
  html body .hub-bar { flex-wrap: wrap; row-gap: 10px; }
  html body .hub-bar > * { white-space: nowrap; flex-shrink: 0; }
}
html .numbers-hub-link { font-size: 14px; }
html .numbers-hub-link span { font-size: 13px; opacity: 1; color: var(--c-vn); }
html .supplement-link span { font-size: 13px; color: var(--c-vn); }
@media (max-width: 720px) {
  .hub-hero .lesson-title { font-size: 34px; }
  .module-card { padding: 16px; gap: 14px; }
  .module-card .icon-circle { width: 50px; height: 50px; }
}

/* -----------------------------------------------------------
 * 4. たんご（vocab-study.css / mobile-vocab-rc.css）
 * --------------------------------------------------------- */
/* 単語の意味・問題・解説にはベトナム語が大きく出る。丸ゴシックで描くと、丸ゴシックに無い字
   （ư ờ ệ など）だけ補いのフォントになり、1語の中で書体と太さが混ざって見えた（Kabuさん指摘 10/5）。
   ラテン文字はすべて Be Vietnam Pro、かな・漢字は丸ゴシックで描く。 */
.vocab-overview { font-family: var(--font-mixed); }
.vocab-overview .vs-heading { font-size: var(--fs-page-title); line-height: var(--lh-tight); }
.vocab-overview > .vs-sub { font-size: var(--fs-vn-body); line-height: 1.6; color: var(--c-vn); }
.vocab-overview .vs-step-label { font-size: 13px; }

/* グループカード：題 19px → 20px、訳 13px → 16px、語数・ひらく 12px → 13px */
.vocab-overview .vs-group strong { font-size: 20px; }
.vocab-overview .vs-group .vs-sub { font-size: var(--fs-vn-body); line-height: 1.5; color: var(--c-vn); }
.vocab-overview .vs-group .vs-count { font-size: var(--fs-meta); color: var(--c-sub); }
.vocab-overview .vs-group-open { font-size: 13px; }
/* 320px 前後はカードが2列で中身の幅が約110px しかない。語中で割れない大きさに抑える */
@media (max-width: 359px) {
  .vocab-overview .vs-group strong { font-size: 17px; }
  .vocab-overview .vs-group .vs-sub { font-size: 14px; }
}

/* 単語の説明：意味 18px、例文の日本語 18px、訳 16px、補足 14px */
.vocab-overview .vs-reading { font-size: 14px; color: var(--c-sub); }
.vocab-overview .vs-tag { font-size: 12px; }
.vocab-overview .vs-use-heading { font-size: 14px; }
.vocab-overview .vs-example { font-size: var(--fs-expl-jp); line-height: var(--lh-body); }
.vocab-overview .vs-example .vs-sub { font-size: var(--fs-vn-body); line-height: 1.6; color: var(--c-vn); margin-top: 6px; }
.vocab-overview .vs-note { font-size: 15px; line-height: var(--lh-body); }
.vocab-overview .vs-note .vs-sub { font-size: var(--fs-vn-body); color: var(--c-vn); }
.vocab-overview .vs-flip-hint { font-size: 14px; }

/* たしかめよう：問題の指示 16px、件数 13px、選択肢 18px */
.vocab-overview .vs-card > .vs-sub { font-size: var(--fs-vn-body); line-height: 1.6; color: var(--c-vn); }
.vocab-overview .vs-card > .vs-count { font-size: var(--fs-meta); color: var(--c-sub); }
.vocab-overview .vs-option {
  font-family: var(--font-mixed);
  font-size: var(--fs-option);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
/* 回答後：押せないだけで、文字は薄くしない（Chrome 既定の無効色 rgba(16,16,16,.3) が出ていた） */
.vocab-overview .vs-option:disabled { color: var(--ink); opacity: 1; }
.vocab-overview .vs-option.correct { color: #22401f; }
.vocab-overview .vs-option.wrong { color: #6e2a17; }
.vocab-overview .vs-feedback { font-size: var(--fs-expl-jp); line-height: var(--lh-body); }
.vocab-overview .vs-feedback > p { margin: 6px 0 0; }
.vocab-overview .vs-listen-hint,
.vocab-overview .vs-error { font-size: 15px; line-height: 1.6; color: var(--c-vn); }
/* ボタンに添える訳（もどる・おとを きく 等） */
.vocab-overview .btn .vs-sub { font-size: 13px; }

/* 21〜50課の単語カード（旧デザイン） */
.card-tag { font-size: 12px; color: var(--c-sub); }
.card-romaji,
.flip-hint,
.flip-hint .vn,
.vocab-bar .counter,
.count-label,
.count-label .vn { color: var(--c-sub); }
.mastery-btn .vn { font-size: var(--fs-label-vn) !important; color: inherit !important; opacity: 0.88; }
.card-group .g-badge .vn,
.card-group .g-note .vn { font-size: 12px; }
.vocab-complete .stat .label { color: var(--c-sub); }

/* -----------------------------------------------------------
 * 5. 問題（基本練習 lessonN-practice.html／小テスト quiz.html）
 *    問題文 26px（スマホ 22px）、選択肢 18px（17px）、日本語の解説 18px（17px）、
 *    訳・解説の訳 16px、補助説明 14px。行高 1.7。
 * --------------------------------------------------------- */
.q-tag { font-size: 13px; }
.q-tag .vn { color: inherit; }
.q-prompt .jp { font-size: var(--fs-question); line-height: 1.5; }
.q-prompt .jp .big { font-size: calc(var(--fs-question) + 4px); }
.q-prompt .vn-hint {
  font-size: var(--fs-vn-body);
  line-height: 1.6;
  color: var(--c-vn);
  font-style: normal;
}
.option-btn {
  font-family: var(--font-mixed);
  font-size: var(--fs-option);
  line-height: 1.45;
}
.option-btn .opt-cap { font-size: 15px; }

/* 選択肢の列（option-layout.js が data-opt-fit を付ける）。
   標準は 2×2、2列で1行に収まらない長い選択肢は1列。文字は縮めない。
   短い助詞（.cols-4）と絵（.img-opts）はページ側の並びのまま。 */
/* 問題・選択肢・解説の横幅をそろえる（小テストは選択肢だけ 760px で狭かった） */
.q-stage .options-grid[data-opt-fit] { max-width: none; width: 100%; }
.options-grid[data-opt-fit="pair"],
.vs-options[data-opt-fit="pair"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.options-grid[data-opt-fit="long"],
.vs-options[data-opt-fit="long"] { grid-template-columns: minmax(0, 1fr); }
.vs-options[data-opt-fit] .vs-option,
.options-grid[data-opt-fit] .option-btn { min-width: 0; }

/* 回答後に選ばなかった選択肢（基本練習の .fade）：薄くせず、地と枠だけ控えめにする */
.option-btn.fade {
  opacity: 1;
  color: #4a5a4a;
  background: transparent;
  border-color: #dde4d6;
  box-shadow: none;
}

/* 不正解の選択肢：白文字が赤 #D4574F の地で 3.7:1 だったため、回答後の地だけ少し濃くする（5.0:1） */
.option-btn.wrong,
.option-btn.opt-wrong:not(.img-opt) { background: #B8433C; border-color: #B8433C; }

/* 基本練習の解説 */
.feedback .verdict { font-size: 19px; }
.feedback .verdict .vn { font-size: 15px !important; color: var(--c-vn); }
.feedback .expl-jp { font-size: var(--fs-expl-jp); line-height: var(--lh-body); }
.feedback .expl-vn {
  font-size: var(--fs-vn-body);
  line-height: 1.65;
  color: var(--c-vn);
  font-style: normal;
  margin-top: 6px;
}
.feedback .correct-line { font-size: 16px; }

/* 解説にもベトナム語が混ざる（「せんせい = giáo viên.」など）。字ごとに書体が混ざらないようにする */
.feedback .expl-jp,
.feedback .correct-line,
.q-feedback .fb-expl,
.review-item .ri-expl,
.review-item .ri-ans { font-family: var(--font-mixed); }

/* 小テストの解説 */
.q-feedback .fb-verdict { font-size: 18px; }
.q-feedback .fb-verdict .vn { font-size: 15px; color: var(--c-vn); }
.q-feedback .fb-expl { font-size: var(--fs-expl-jp); line-height: var(--lh-body); }
.q-feedback .fb-expl .vn { font-size: var(--fs-vn-body); line-height: 1.65; color: var(--c-vn); font-style: normal; margin-top: 4px; }

/* 小テスト：問題の種類の札（濃い緑の地）と、金色の「つぎへ」。
   金の地に白文字は 2.1:1。地の色は変えず、文字を濃い墨色（5.4:1）にする。 */
.q-section .vn { color: inherit; opacity: 0.92; }
.quiz-nav .btn:not(:disabled) { color: var(--ink); }
.quiz-nav .btn:not(:disabled) .vn { color: var(--ink) !important; opacity: 0.85; }

/* 小テストのはじめの画面・結果の見直し */
.quiz-intro .intro-sub { font-size: var(--fs-vn-body); color: var(--c-vn); }
.quiz-intro .intro-stat .label { font-size: 13px; color: var(--c-sub); }
.quiz-intro > p.vn { font-size: var(--fs-vn-body); line-height: 1.6; color: var(--c-vn); font-style: normal; }
.review-item .ri-prompt { font-size: 18px; }
.review-item .ri-ans { font-size: 16px; }
.review-item .ri-expl { font-size: 16px; line-height: var(--lh-body); }
.review-item .ri-expl .vn { font-size: 15px; line-height: 1.6; color: var(--c-vn); font-style: normal; }
.results-screen .verdict-vn { font-size: var(--fs-vn-body); color: var(--c-vn); }
.results-screen .passline,
.results-screen .stat .label { font-size: 13px; color: var(--c-sub); }

/* 基本練習：途中でやめたときの注意・聞くボタン・音の切り替え */
.practice-note .jp { font-size: 13px; }
.practice-note .vn { font-size: var(--fs-label-vn); color: var(--c-vn); }
/* ボタンの中の訳はボタンの文字色を受け継ぐ（地が濃くても淡くても読める）。style 属性で 11px・#6B8E6B */
.replay-btn .vn { font-size: var(--fs-label-vn) !important; color: inherit !important; opacity: 0.88; }
.practice-nav #next-btn .vn { font-size: 13px !important; }
#btn-restart .vn { font-size: var(--fs-label-vn) !important; color: var(--c-vn) !important; }

/* -----------------------------------------------------------
 * 6. 練習メニュー（practice-menu.html）
 * --------------------------------------------------------- */
.practice-heading .eyebrow { font-size: 13px; }
.practice-heading .subtitle { font-size: var(--fs-vn-body); color: var(--c-vn); }
.practice-option .copy .description { font-size: var(--fs-vn-body); line-height: 1.55; color: #4f6249; font-family: var(--font-mixed); }
.practice-option .action { font-size: 14px; }
@media (max-width: 600px) {
  .practice-heading .eyebrow { font-size: 12px; }
  .practice-heading .subtitle { font-size: 15px; }
  .practice-option .copy .description { font-size: 15px; }
  .practice-option .action { font-size: 13px; }
}