/* FP QUEST — fonts.css（第6版 U19: 選べる日本語フォント・行間・設定画面の見本）。app.css / study.css / ux.css のあとに読み込む。
   ■ 読み込みの仕組み
     @font-face は「宣言」だけ。ブラウザは使われた書体の TTF だけを取得する。使われるのは
       html[data-font="<id>"] のときの本文（--font-ui 経由。body も .battle も --font-num の日本語側もこの変数を使う）だけ。
     設定画面の書体カードの見本は TTF ではなく字形を描いた SVG（.fontopt__pv。下の BEGIN/END ブロック）なので、選ばない書体は取得しない。
     標準（data-font="system"）では TTF を1つも取得しない。ロゴは <img>（ロゴキットの SVG/PNG・文字ではなく輪郭パス）なので影響しない。
   ■ フォント名の "FPQ " は別名（端末にある同名フォントと混ざらないように）。元ファイルは無変更の TTF（assets/fonts/FONT_SOURCES.txt）
   ■ 行間: html[data-lh="normal|relaxed|loose"]。--lh-body（本文）/ --lh-read（問題文・解説）/ --lh-read-sm（選択肢・注釈）。
     新しい読み物系の要素は line-height:var(--lh-read, 1.8) と書くと設定に追従する。 */

/* ------------------------------------------------------------------ @font-face */
@font-face{font-family:"FPQ Noto Sans JP";src:url(/assets/fonts/noto-sans-jp/font.ttf) format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"FPQ Noto Serif JP";src:url(/assets/fonts/noto-serif-jp/font.ttf) format("truetype");font-style:normal;font-weight:200 900;font-display:swap}
@font-face{font-family:"FPQ BIZ UDPGothic";src:url(/assets/fonts/biz-udp-gothic/font.ttf) format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"FPQ BIZ UDPMincho";src:url(/assets/fonts/biz-udp-mincho/font.ttf) format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"FPQ Zen Maru Gothic";src:url(/assets/fonts/zen-maru-gothic/font.ttf) format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"FPQ Zen Kaku Gothic New";src:url(/assets/fonts/zen-kaku-gothic-new/font.ttf) format("truetype");font-style:normal;font-weight:400;font-display:swap}

/* ------------------------------------------------------------------ 書体の切り替え（--font-ui を差し替える。標準は app.css のまま） */
:root{
  --font-sys:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif; /* app.css の --font-ui（標準）と同じ。同梱書体に無い字（✓ ✗ ～ など）の代替にもなる */
  --lh-read:1.8; --lh-read-sm:1.7;
}
:root[data-font="noto-sans-jp"]{--font-ui:"FPQ Noto Sans JP",var(--font-sys)}
:root[data-font="noto-serif-jp"]{--font-ui:"FPQ Noto Serif JP",var(--font-serif),var(--font-sys)}
:root[data-font="biz-udp-gothic"]{--font-ui:"FPQ BIZ UDPGothic",var(--font-sys)}
:root[data-font="biz-udp-mincho"]{--font-ui:"FPQ BIZ UDPMincho",var(--font-serif),var(--font-sys)}
:root[data-font="zen-maru-gothic"]{--font-ui:"FPQ Zen Maru Gothic",var(--font-sys)}
:root[data-font="zen-kaku-gothic-new"]{--font-ui:"FPQ Zen Kaku Gothic New",var(--font-sys)}

/* ------------------------------------------------------------------ 行間（normal は従来の値のまま触らない） */
html[data-lh="relaxed"]{--lh-body:1.95;--lh-read:2;--lh-read-sm:1.9}
html[data-lh="loose"]{--lh-body:2.15;--lh-read:2.2;--lh-read-sm:2.1}
html:is([data-lh="relaxed"],[data-lh="loose"]) :is(.qtext,.ox-statement,.expl__summary,.expl__calc,.rev__note,.revcard,.result-q__body,.source-transcript__text){line-height:var(--lh-read)}
html:is([data-lh="relaxed"],[data-lh="loose"]) :is(.choice,.expl__note,.expl__topic,.rev__val,.lead,.ai__msg,.textarea){line-height:var(--lh-read-sm)}

/* ------------------------------------------------------------------ 設定画面: 書体カード（ラジオ） */
.fontpick{display:grid;gap:8px;margin:2px 0 4px}
@media (min-width:640px){.fontpick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fontopt{position:relative;display:flex;cursor:pointer} /* 2列のときは同じ行のカードの高さをそろえる */
.fontopt__radio{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.fontopt__box{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--surface);transition:border-color .15s,background .15s,box-shadow .15s}
@media (hover:hover){.fontopt:hover .fontopt__box{border-color:var(--ink-4)}}
.fontopt__radio:checked + .fontopt__box{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 3px var(--primary-soft)}
.fontopt__radio:focus-visible + .fontopt__box{outline:3px solid var(--primary);outline-offset:2px}
.fontopt__dot{width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid var(--ink-3);background:var(--surface);display:grid;place-items:center;transition:border-color .15s,background .15s}
.fontopt__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary-ink);transform:scale(0);transition:transform .15s var(--ease)}
.fontopt__radio:checked + .fontopt__box .fontopt__dot{border-color:var(--primary);background:var(--primary)}
.fontopt__radio:checked + .fontopt__box .fontopt__dot::after{transform:scale(1)}
.fontopt__body{display:block;min-width:0}
.fontopt__face{display:block}
.fontopt__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc((var(--fs-base) + 1px) * .23 + 2px) 10px} /* 行の間 = 名前の画像の下の余白（0.23em）+ 2px。説明文が次の行へ折り返しても名前の下端に触れない */
.fontopt__name{position:relative;display:block;font-size:calc(var(--fs-base) + 1px);font-weight:700;line-height:1.5}
.fontopt__label{font-size:calc(var(--fs-base) * .8125);color:var(--ink-2);line-height:1.5}
.fontopt__sample{position:relative;display:block;margin-top:4px;font-size:calc(var(--fs-base) * .95);line-height:1.7;color:var(--ink)}
.fontopt__line{display:block}
/* 見本の字形（書体名と 2行のサンプル）。TTF を取りに行かず、その書体の字形を描いた小さな SVG（assets/fonts/preview/、tools/make_font_previews.py で生成）を
   マスクにして currentColor で塗る → 選んでいない書体は一切ダウンロードしない・ダークテーマにも追従。マスクが使えない環境では実テキスト（.fontopt__txt）を標準フォントで表示する */
.fontopt__pv{display:none;width:calc(var(--pv-w) * 1em);max-width:100%;aspect-ratio:var(--pv-w) / 1.15;background:currentColor;-webkit-mask-image:var(--pv-img);mask-image:var(--pv-img);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.fontopt__pv--name{--pv-w:var(--pv-name-w);--pv-img:var(--pv-name);margin-bottom:-.23em} /* 画像の下 0.23em は字面の下の余白。baseline 揃えで隣の説明文と同じ行に載せる */
.fontopt__pv--s1{--pv-w:var(--pv-s1-w);--pv-img:var(--pv-s1)}
.fontopt__pv--s2{--pv-w:var(--pv-s2-w);--pv-img:var(--pv-s2)}
@supports ((-webkit-mask-image:url(a.svg)) or (mask-image:url(a.svg))){
  .fontopt__pv{display:block}
  .fontopt__sample .fontopt__pv + .fontopt__pv{margin-top:.55em}
  .fontopt__sample--pv{padding-top:.275em}
  .fontopt__txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* BEGIN font-previews（tools/make_font_previews.py が生成。手で編集しない） */
.fontopt[data-font-id="noto-sans-jp"]{--pv-name:url(/assets/fonts/preview/noto-sans-jp-name.svg);--pv-name-w:6.462;--pv-s1:url(/assets/fonts/preview/noto-sans-jp-s1.svg);--pv-s1-w:12.074;--pv-s2:url(/assets/fonts/preview/noto-sans-jp-s2.svg);--pv-s2-w:10.804}
.fontopt[data-font-id="noto-serif-jp"]{--pv-name:url(/assets/fonts/preview/noto-serif-jp-name.svg);--pv-name-w:6.475;--pv-s1:url(/assets/fonts/preview/noto-serif-jp-s1.svg);--pv-s1-w:12.310;--pv-s2:url(/assets/fonts/preview/noto-serif-jp-s2.svg);--pv-s2-w:10.855}
.fontopt[data-font-id="biz-udp-gothic"]{--pv-name:url(/assets/fonts/preview/biz-udp-gothic-name.svg);--pv-name-w:8.344;--pv-s1:url(/assets/fonts/preview/biz-udp-gothic-s1.svg);--pv-s1-w:13.613;--pv-s2:url(/assets/fonts/preview/biz-udp-gothic-s2.svg);--pv-s2-w:11.886}
.fontopt[data-font-id="biz-udp-mincho"]{--pv-name:url(/assets/fonts/preview/biz-udp-mincho-name.svg);--pv-name-w:8.314;--pv-s1:url(/assets/fonts/preview/biz-udp-mincho-s1.svg);--pv-s1-w:13.174;--pv-s2:url(/assets/fonts/preview/biz-udp-mincho-s2.svg);--pv-s2-w:11.518}
.fontopt[data-font-id="zen-maru-gothic"]{--pv-name:url(/assets/fonts/preview/zen-maru-gothic-name.svg);--pv-name-w:7.208;--pv-s1:url(/assets/fonts/preview/zen-maru-gothic-s1.svg);--pv-s1-w:12.386;--pv-s2:url(/assets/fonts/preview/zen-maru-gothic-s2.svg);--pv-s2-w:10.642}
.fontopt[data-font-id="zen-kaku-gothic-new"]{--pv-name:url(/assets/fonts/preview/zen-kaku-gothic-new-name.svg);--pv-name-w:9.316;--pv-s1:url(/assets/fonts/preview/zen-kaku-gothic-new-s1.svg);--pv-s1-w:12.386;--pv-s2:url(/assets/fonts/preview/zen-kaku-gothic-new-s2.svg);--pv-s2-w:10.642}
/* END font-previews */
.fontopt__meta{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:6px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.fontopt__state{font-weight:700}
.fontopt__radio:checked + .fontopt__box .fontopt__meta{color:var(--ink-2)}
.fontopt.is-loading .fontopt__state{color:var(--primary)}
.fontopt.is-failed .fontopt__state{color:var(--ng-ink)}
.fontopt[data-font-id="system"] .fontopt__face{font-family:var(--font-sys)} /* 「標準」だけは実テキスト（端末のフォント。取得するものはない） */
:root[data-motion="reduce"] .fontopt__box,:root[data-motion="reduce"] .fontopt__dot,:root[data-motion="reduce"] .fontopt__dot::after{transition:none}

/* 行間チップ（3つ）: 線の間隔でも違いが分かる */
.lhpick .seg__item{display:grid;justify-items:center;align-content:center;gap:5px;min-height:56px;padding:6px 4px;line-height:1.3}
.lhicon{display:grid;align-content:center;gap:var(--g,3px);width:22px;height:20px}
.lhicon i{display:block;height:2px;border-radius:1px;background:currentColor;opacity:.8}
.lhicon i:nth-child(2){width:78%}
.lhicon i:nth-child(3){width:58%}

/* クイック設定（Aa）の書体セレクト */
.fontsel{display:grid;gap:6px}
.fontsel__state{min-height:1.5em;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.fontsel__state.is-loading{color:var(--primary);font-weight:700}
.fontsel__state.is-failed{color:var(--ng-ink);font-weight:700}

/* ------------------------------------------------------------------ 設定画面: ライブプレビュー（実際の問題画面と同じクラスを使う） */
.fontprev{margin:10px 0 4px;padding:10px;border:1.5px dashed var(--line-2);border-radius:16px;background:var(--surface-2)}
.fontprev__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin:0 2px 8px;font-size:12px;line-height:1.5;font-weight:700;color:var(--ink-3)}
.fontprev .qcard{box-shadow:none}
.fontprev .choice{cursor:default}
.fontprev__check{display:grid;gap:4px;margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);font-size:calc(var(--fs-base) * .9);line-height:var(--lh-read-sm)}
.fontprev__check b{font-weight:800;color:var(--ink-3);font-size:.82em;letter-spacing:.06em;margin-right:.6em}