/* さんすう（houkagoday-navi.com の /sansu/ と記事の体験）の出題画面のスタイル。
 * family-dashboard の web/css/app.css「9. さんすう」「10. 文章題 ？の はこ」を元に、houkago の配色と幅 360〜1024px に合わせて直したもの。
 * - 元の vw / vh は 1024×768 の壁の画面が前提。ここでは パネルの幅から決めた --u（元の 1vw）と、固定の --v（元の 1vh = 7.68px）に置き換えた。
 *   図の ●○ などは JS が px で描くので、縦（--v）は固定にして図の高さを保つ
 * - 文字の大きさは --u に比例させるが、幅が狭いときに読めなくなるので max(…, 下限px) で下限を設ける
 * - 誤答は opacity だけで示す（赤・橙・黄・揺れ・点滅は使わない）。赤・橙・黄の色相は図にも使わない
 * - 子どもの画面の外（体験の開始ボタン・フォーム・保護者ページ）のスタイルも、このファイルの後半に置く */

/* パネルの幅 = 72 * --u。広い画面では 737px（--u = 10.24px）で止め、狭い画面では ページの幅に合わせて縮める */
.sansu-stage { --u: min(10.24px, calc((100vw - 34px) / 72)); --v: 7.68px; --wf-ink: var(--fg); --wf-ink-2: var(--fg-sub); --wf-ink-3: var(--fg-sub); --wf-btn-bg: rgba(128, 128, 128, 0.1); --wf-btn-line: rgba(128, 128, 128, 0.55); --wf-paper: var(--bg); margin: var(--space-4) auto; width: calc(72 * var(--u)); max-width: 100%; }
.sansu-stage[hidden], .sansu-stage [hidden] { display: none !important; }
.sansu-stage .math-panel { display: flex; flex-direction: column; gap: calc(1.4 * var(--v)); width: 100%; background: var(--bg); color: var(--fg); border: 2px solid var(--border); border-radius: 16px; padding: calc(2.4 * var(--v)) calc(2.4 * var(--u)) calc(2 * var(--v)); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
.sansu-stage .math-panel.is-end > *:not(.math-end) { display: none; }
.sansu-stage .math-q { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(0.6 * var(--v)); min-height: calc(17 * var(--v)); text-align: center; }
.sansu-stage .math-q-text { max-width: 100%; font-size: calc(7 * var(--u)); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; word-break: keep-all; }
.sansu-stage .math-q.is-mid .math-q-text { font-size: calc(5.2 * var(--u)); }
.sansu-stage .math-q.is-small .math-q-text { font-size: calc(4 * var(--u)); }
.sansu-stage .math-q.is-text .math-q-text { font-size: max(calc(3 * var(--u)), 15px); font-weight: 400; line-height: 1.5; text-align: left; }
.sansu-stage .math-ask { font-size: max(calc(2.6 * var(--u)), 15px); line-height: 1.3; color: var(--fg-sub); }
.sansu-stage .mclock { flex: none; width: calc(30 * var(--v)); height: calc(30 * var(--v)); }
.sansu-stage .mclock-face { fill: var(--bg-soft); stroke: var(--fg); stroke-width: 3; }
.sansu-stage .mclock-tick { stroke: var(--fg-sub); stroke-width: 1; }
.sansu-stage .mclock-tick.is-big { stroke: var(--fg); stroke-width: 2.5; }
.sansu-stage .mclock-num { fill: var(--fg); font-size: 18px; font-weight: 600; font-family: var(--font-sans); stroke: var(--bg-soft); stroke-width: 3px; paint-order: stroke fill; stroke-linejoin: round; }
.sansu-stage .mclock-hand { stroke-linecap: round; }
.sansu-stage .mclock-hand.is-short { stroke: var(--fg); stroke-width: 8; }
.sansu-stage .mclock-hand.is-long { stroke: var(--brand); stroke-width: 4.5; }
.sansu-stage .mclock-pin { fill: var(--fg); }
.sansu-stage .mdots { flex: none; width: calc(36 * var(--u)); height: calc(14.4 * var(--u)); }
.sansu-stage .mdot.is-a { fill: var(--fg); }
.sansu-stage .mdot.is-b { fill: none; stroke: var(--fg); stroke-width: 2.5; }
.sansu-stage .mdot.is-c { fill: none; stroke: var(--fg-sub); stroke-width: 2; stroke-dasharray: 3 3.3; }
/* 縦の筆算（等幅の列に 1 文字ずつ置く）と、縦に積む分数 */
.sansu-stage .mcol { flex: none; }
.sansu-stage .mcol-text { fill: var(--fg); font-size: 56px; font-weight: 600; font-family: var(--font-sans); font-variant-numeric: tabular-nums; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }
.sansu-stage .mcol-line { stroke: var(--fg); stroke-width: 3; }
.sansu-stage .mfrac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 0.15em; font-size: 0.72em; line-height: 1.1; }
.sansu-stage .mfrac-n { padding: 0 0.2em; border-bottom: 0.09em solid currentColor; }
.sansu-stage .mfrac-d { padding: 0 0.2em; }
.sansu-stage .math-hint { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(0.6 * var(--v)); min-height: calc(14 * var(--v)); }
.sansu-stage .mfig { flex: none; width: calc(44 * var(--u)); height: calc(6.4 * var(--u)); }
.sansu-stage .mfig-cell { fill: none; stroke: var(--fg-sub); stroke-width: 1.5; }
.sansu-stage .math-hint-text { max-width: 100%; font-size: max(calc(2.5 * var(--u)), 14px); line-height: 1.3; text-align: center; word-break: keep-all; }
.sansu-stage .math-hint-text.is-line { font-size: max(calc(2.2 * var(--u)), 14px); line-height: 1.25; font-variant-numeric: tabular-nums; }
.sansu-stage .math-hint-text.is-explain { font-size: max(calc(2.9 * var(--u)), 15px); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 選択肢は 2 列 2 行: 高さ 64px 以上・間隔 12px 以上（基準ビューポートで 76px・13px／16px） */
.sansu-stage .math-choices { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(1.8 * var(--v)) calc(1.6 * var(--u)); }
.sansu-stage .math-choice { -webkit-appearance: none; appearance: none; min-width: 0; min-height: calc(10 * var(--v)); margin: 0; padding: calc(0.4 * var(--v)) calc(1 * var(--u)); border: calc(0.4 * var(--u)) solid var(--border); border-radius: calc(16px * 0.8); background: var(--bg-soft); color: var(--fg); font-size: calc(4.6 * var(--u)); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; transition: opacity 0.2s ease; }
.sansu-stage .math-choices.is-long .math-choice { font-size: max(calc(3.4 * var(--u)), 18px); }
.sansu-stage .math-choice.is-off { opacity: 0.35; }
.sansu-stage .math-choice.is-answer { border-color: var(--fg); }
.sansu-stage .math-choice.is-ok { background: var(--trust-green); border-color: var(--trust-green); color: #fff; }
.sansu-stage .math-fb { flex: none; min-height: calc(5 * var(--v)); font-size: max(calc(2.7 * var(--u)), 15px); line-height: 1.35; text-align: center; white-space: nowrap; }
/* 下段: 左 = おしえて / 中央 = もう 1 もん / 右 = おしまい。「もう 1 もん」の二度打ちが「おしえて」に落ちないよう位置を分ける */
.sansu-stage .math-foot { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; column-gap: calc(1.2 * var(--u)); }
.sansu-stage #math-teach { grid-column: 1; justify-self: start; }
.sansu-stage #math-more { grid-column: 2; }
.sansu-stage #math-quit { grid-column: 3; justify-self: end; }
.sansu-stage .math-btn { -webkit-appearance: none; appearance: none; min-height: calc(7 * var(--v)); margin: 0; padding: calc(0.6 * var(--v)) calc(2.4 * var(--u)); border: 1px solid var(--border); border-radius: calc(16px * 0.8); background: var(--bg-soft); color: var(--fg); font-size: max(calc(2.5 * var(--u)), 14px); line-height: 1.3; white-space: nowrap; }
.sansu-stage .math-end { padding: calc(6 * var(--v)) 0; font-size: calc(4.4 * var(--u)); font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; }
.sansu-stage .anim-math-in { animation: fd-math-in 0.25s ease-out; }
@keyframes fd-math-in { from { opacity: 0; } to { opacity: 1; } }
/* ✓ のポップ（opacity ではなく transform。正答のときだけ。family-dashboard の fd-pop と同じ） */
@keyframes fd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.sansu-stage .anim-pop { animation: fd-pop 0.3s ease-out; }

/* ---------- 10. さんすう 1 年の文章題「？の はこ」（docs/design/math/word-design.md §5・§6。.math-panel.is-word のときだけ） ----------
   図・判断の行・文の印は、色で意味を付けない。赤・橙・黄（色相 0〜65°・330〜360° で彩度 20% 超）を使わない（W9）。
   テーマの --fg が暖色に寄っているテーマ（ライトの夜・ナチュラル・ナチュラルの夜）は、明るさを保ったまま彩度を 14% に下げた色を使う。
   ボタンの地と枠はどのテーマでも無彩色の半透明。動きは transform（平行移動）と opacity だけで、JS が CSSOM で付け外しする */
.sansu-stage .math-panel.is-word .math-q { display: block; min-height: 0; text-align: left; }
.sansu-stage .math-panel.is-word .math-hint { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: calc(1.4 * var(--v)); min-height: 0; }
.sansu-stage .math-panel.is-word .math-choices { gap: calc(1.6 * var(--v)) calc(1.6 * var(--u)); }
.sansu-stage .math-panel.is-word .math-choice { min-height: calc(8.6 * var(--v)); padding: 0 calc(1 * var(--u)); font-size: max(calc(3.8 * var(--u)), 18px); transition: none; }   /* 誤答で薄くするのは すぐに（図の動きと重ねて同時に 3 つ以上動かさない） */
.sansu-stage .math-choices.is-wait { visibility: hidden; }
/* 文: 1 文ずつの行。▶ = いまの文（太字。色は変えない）。数が動く文は右に印の場所をとっておく（判断が済むと「□→ へる」） */
.sansu-stage .wq { margin: 0; padding: 0; list-style: none; font-size: max(calc(2.6 * var(--u)), 15px); line-height: 1.45; }
.sansu-stage .wq-li { display: flex; align-items: flex-start; gap: calc(0.6 * var(--u)); }
.sansu-stage .wq-cur { flex: none; width: calc(2.2 * var(--u)); font-family: var(--font-sans); }   /* ▶ は明朝（ナチュラル）だと幅が広いので見出しの書体で */
.sansu-stage .wq-txt { flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.sansu-stage .wq-li.is-cur .wq-txt { font-weight: 700; }
.sansu-stage .wq-tag { flex: none; width: calc(8.8 * var(--u)); height: calc(3.77 * var(--u)); display: flex; align-items: center; justify-content: flex-end; gap: calc(0.3 * var(--u)); font-size: max(calc(1.9 * var(--u)), 12.5px); line-height: 1.2; white-space: nowrap; color: var(--wf-ink-2); }
.sansu-stage .wq-icon { flex: none; width: calc(2.6 * var(--u)); height: calc(1.55 * var(--u)); stroke: currentColor; }
/* 図（高さ calc(19 * var(--v))）: 上の段に名札、その下に入れ物（太枠）。左右の欄（各 calc(16 * var(--u))）に外の人・ばしょ。群は名札より下のレーンを横に動く */
.sansu-stage .wfig { position: relative; flex: none; height: calc(19 * var(--v)); color: var(--wf-ink); }
.sansu-stage .wtag { position: absolute; top: 0; height: calc(3 * var(--v)); font-size: max(calc(1.9 * var(--u)), 12.5px); line-height: calc(3 * var(--v)); white-space: nowrap; color: var(--wf-ink); }
.sansu-stage .wtag.is-box { left: calc(18.6 * var(--u)); }
.sansu-stage .wtag.is-wide { left: calc(5.6 * var(--u)); }
.sansu-stage .wbox { position: absolute; left: calc(18.6 * var(--u)); top: calc(3.3 * var(--v)); width: calc(30 * var(--u)); height: calc(15.7 * var(--v)); box-sizing: border-box; border: calc(0.4 * var(--u)) solid var(--wf-ink); border-radius: calc(1 * var(--u)); }
.sansu-stage .wbox.is-wide { left: calc(5.6 * var(--u)); width: calc(56 * var(--u)); display: flex; }
.sansu-stage .wbox-body { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.sansu-stage .wbox-open { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.sansu-stage .wbox-q { font-family: var(--font-sans); font-size: calc(6 * var(--u)); font-weight: 700; line-height: 1; color: var(--wf-ink); }
.sansu-stage .wbox-q.is-room { font-size: calc(4.4 * var(--u)); }
.sansu-stage .wbox-q.is-zone { font-size: max(calc(1.9 * var(--u)), 12.5px); line-height: 1; }
.sansu-stage .wsg { display: flex; align-items: flex-start; justify-content: center; gap: calc(1.6 * var(--u)); width: 100%; }
.sansu-stage .wsg-col { flex: 0 1 calc(13.5 * var(--u)); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(0.4 * var(--v)); }
.sansu-stage .wsg-lab { max-width: 100%; font-size: max(calc(1.6 * var(--u)), 11.5px); line-height: 1.2; text-align: center; word-break: keep-all; overflow-wrap: anywhere; color: var(--wf-ink-2); }
.sansu-stage .wroom { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(0.4 * var(--v)); }
.sansu-stage .wroom-lab { flex: none; font-size: max(calc(1.8 * var(--u)), 12.5px); line-height: 1.3; white-space: nowrap; color: var(--wf-ink-2); }
.sansu-stage .wroom-body { position: relative; flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.sansu-stage .wroom-div { flex: none; width: calc(0.25 * var(--u)); margin: calc(1 * var(--v)) 0; background: var(--wf-ink-3); }
.sansu-stage .wactor { position: absolute; width: calc(17.6 * var(--u)); display: flex; flex-direction: column; align-items: center; color: var(--wf-ink-2); }
.sansu-stage .wactor.is-l { left: 0; }
.sansu-stage .wactor.is-r { right: 0; }
.sansu-stage .wactor.is-s0 { top: calc(3.3 * var(--v)); }
.sansu-stage .wactor.is-s1 { top: calc(11.2 * var(--v)); }
.sansu-stage .wactor-lab { flex: none; height: calc(3.3 * var(--v)); font-size: max(calc(1.8 * var(--u)), 12.5px); line-height: calc(3.3 * var(--v)); white-space: nowrap; }
.sansu-stage .wactor-marks { display: flex; justify-content: center; align-items: flex-start; line-height: 0; }
.sansu-stage .wgrp { position: absolute; left: 0; top: calc(6.6 * var(--v)); line-height: 0; }
.sansu-stage .wgrp.is-s1 { top: calc(14.5 * var(--v)); }
.sansu-stage .wmarks { display: block; overflow: visible; }
.sansu-stage .wm-a { fill: var(--wf-ink); }
.sansu-stage .wm-b { fill: none; stroke: var(--wf-ink); stroke-width: 2.2; }
.sansu-stage .wm-c { fill: none; stroke: var(--wf-ink-2); stroke-width: 2; stroke-dasharray: 3 3.3; }
.sansu-stage .wm-s { fill: none; stroke: var(--wf-ink); stroke-width: 2.2; }
.sansu-stage .wm-h { fill: none; stroke: var(--wf-ink-2); stroke-width: 2; stroke-dasharray: 3 3.3; }
.sansu-stage .wm-bundle.wm-a { fill: var(--wf-ink); stroke: none; }
.sansu-stage .wm-bundle.wm-b { fill: none; stroke: var(--wf-ink); stroke-width: 2; }
/* 入ってきた群の跡（点線。S2）・10 のたばの「10」の印（S3。ぬりつぶしのたばの上は地の色。地の色もナチュラルは彩度を下げる） */
.sansu-stage .wm-bundle.wm-c, .sansu-stage .wm-bundle.wm-h { fill: none; stroke: var(--wf-ink-2); stroke-width: 2; stroke-dasharray: 3 3.3; }
.sansu-stage .wm-ten-n { fill: var(--wf-ink); font-family: var(--font-sans); font-weight: 700; }
.sansu-stage .wm-ten-n.wm-on-a { fill: var(--wf-paper); }
.sansu-stage .wm-ten-n.wm-on-c, .sansu-stage .wm-ten-n.wm-on-h { fill: var(--wf-ink-2); }
/* 2 段の図（求差・求大小・異種の数量）と 1 列の図（順序数）。図の高さの中で上下中央にそろえる */
.sansu-stage .wrows { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(0.4 * var(--v)); }
.sansu-stage .wrow2 { display: flex; align-items: center; }
.sansu-stage .wrow2-lab { flex: none; width: calc(17.5 * var(--u)); padding-right: calc(1 * var(--u)); box-sizing: border-box; font-size: max(calc(1.8 * var(--u)), 12.5px); line-height: 1.25; text-align: right; white-space: nowrap; color: var(--wf-ink-2); }
.sansu-stage .wrow2-cells { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: calc(1 * var(--u)); }
.sansu-stage .wrow2.is-nums { height: calc(2.2 * var(--v)); }
.sansu-stage .wrow2.is-nums .wrow2-cells { align-self: stretch; }
.sansu-stage .wcells { position: relative; flex: none; display: flex; align-items: center; }
.sansu-stage .wrow2-note { font-size: max(calc(1.6 * var(--u)), 11.5px); line-height: 1.2; white-space: nowrap; color: var(--wf-ink-2); }
.sansu-stage .wrow2-q { font-size: max(calc(2.2 * var(--u)), 14px); line-height: 1.2; font-weight: 700; color: var(--wf-ink); }
.sansu-stage .wrow2-tail { flex: none; font-size: max(calc(1.8 * var(--u)), 12.5px); line-height: 1.25; white-space: nowrap; color: var(--wf-ink-2); }   /* 列のうしろ側の端の「← うしろ」（S4） */
.sansu-stage .wbr { flex: none; display: flex; flex-direction: column; align-items: stretch; }
.sansu-stage .wbr-line { display: block; width: 100%; height: 8px; }
.sansu-stage .wbr-text { font-size: max(calc(1.8 * var(--u)), 12.5px); line-height: 1.25; text-align: center; white-space: nowrap; color: var(--wf-ink); }
.sansu-stage .wbr.is-small .wbr-text { font-size: max(calc(1.5 * var(--u)), 11.5px); line-height: 1.2; color: var(--wf-ink-2); }   /* 帯の札「{上の段}と おなじ」（S5） */
.sansu-stage .wlinks { display: block; }
.sansu-stage .wlink { stroke: var(--wf-ink-3); stroke-width: 1.5; fill: none; }
.sansu-stage .wq-zone { fill: none; stroke: var(--wf-ink-2); stroke-width: 1.6; stroke-dasharray: 4 3; }
.sansu-stage .wzone { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
.sansu-stage .wbox-open.is-row { justify-content: flex-start; }
.sansu-stage .wband { position: absolute; top: 0; bottom: 0; background: rgba(128, 128, 128, 0.18); border-radius: calc(0.6 * var(--u)); }
.sansu-stage .wself { font-size: max(calc(1.6 * var(--u)), 11.5px); line-height: 1.2; white-space: nowrap; color: var(--wf-ink); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.sansu-stage .wnums { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.sansu-stage .wnum { position: absolute; bottom: 0; font-size: max(calc(1.5 * var(--u)), 11.5px); line-height: 1; color: var(--wf-ink-2); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.sansu-stage .wnum.is-self { font-weight: 700; color: var(--wf-ink); }
/* 判断の行（判断が済むと同じ場所が式の帯。高さ calc(8.6 * var(--v)) は変わらない） */
.sansu-stage .wrow { flex: none; height: calc(8.6 * var(--v)); display: flex; align-items: center; justify-content: center; gap: calc(1.6 * var(--u)); color: var(--wf-ink); }
.sansu-stage .wask { flex: 0 1 auto; max-width: calc(29 * var(--u)); font-size: max(calc(2.5 * var(--u)), 14px); line-height: 1.2; text-align: right; word-break: keep-all; overflow-wrap: anywhere; }
.sansu-stage .wask.is-long { font-size: max(calc(2.1 * var(--u)), 12.5px); }
.sansu-stage .wbtn { -webkit-appearance: none; appearance: none; flex: none; height: calc(8.6 * var(--v)); min-width: calc(17 * var(--u)); margin: 0; padding: 0 calc(1.2 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(0.8 * var(--u)); border: calc(0.4 * var(--u)) solid var(--wf-btn-line); border-radius: calc(16px * 0.8); background: var(--wf-btn-bg); color: var(--wf-ink); font-size: max(calc(2.8 * var(--u)), 15px); font-weight: 700; line-height: 1; }
.sansu-stage .wbtn.is-off { opacity: 0.35; }
.sansu-stage .wbtn-icon { flex: none; width: calc(4.4 * var(--u)); height: calc(2.6 * var(--u)); stroke: currentColor; }
.sansu-stage .wstrip { font-size: max(calc(3.4 * var(--u)), 18px); font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sansu-stage .wstrip.is-long { font-size: max(calc(2.9 * var(--u)), 15px); }
.sansu-stage .math-fb[data-wline] { color: var(--wf-ink); }
.sansu-stage .math-fb.is-long { font-size: max(calc(2.3 * var(--u)), 14px); }   /* ひとり段階のヒント「{名札}は ふえた？ へった？」が長いとき（S6） */

/* 縦の筆算の大きさ（JS が --mcols に桁数を入れる。高さ 18 * --v、幅は viewBox の縦横比どおり） */
.sansu-stage .mcol { height: calc(18 * var(--v)); width: calc(18 * var(--v) * var(--mcols, 4) * 40 / 170); }

/* ---------- 幅が狭いとき（スマートフォン）の調整 ---------- */
@media (max-width: 720px) {
  .sansu-stage .math-fb { white-space: normal; }
  .sansu-stage .math-end { white-space: normal; padding: calc(4 * var(--v)) 0; }
  .sansu-stage .math-hint-text { max-width: 100%; }
  .sansu-stage .math-foot { column-gap: 8px; }
  .sansu-stage .math-btn { padding: 0.6vh 14px; }
  /* 文の右に出る「ふえる／へる」の印の場所（判断が済むまで空。場所はとっておく） */
  .sansu-stage .wq-tag { width: 72px; height: 22px; font-size: 12.5px; }
  .sansu-stage .wq-icon { width: 24px; height: 14px; }
  .sansu-stage .wq-cur { width: 18px; }
  /* 入れ物の中の ●○ は、入れ物の幅に収まるように縮める（収まる数なら元の大きさのまま） */
  .sansu-stage .wbox .wmarks { max-width: 100%; height: auto; }
  .sansu-stage .wbtn { min-width: 0; flex: 1 1 0; }
  /* 判断の問いは、判断ボタンの上に 1 行で（語の途中で折り返さない）。問いの行が増えるぶん、行の高さは自動 */
  .sansu-stage .wrow.is-judge { height: auto; flex-wrap: wrap; row-gap: 6px; padding: 4px 0; }
  .sansu-stage .wrow.is-judge .wask { flex: 0 0 100%; max-width: 100%; text-align: center; word-break: keep-all; overflow-wrap: normal; }
  .sansu-stage .wrow.is-strip { min-height: calc(8.6 * var(--v) + 30px); }
}

/* ---------- ページ・フォーム・保護者ページ（子どもの画面の外） ---------- */
.sansu-trial { margin: var(--space-3) 0 var(--space-5); }
.sansu-trial .btn { margin-bottom: var(--space-2); }
.sansu-trial .btn[hidden], .sansu-trial [hidden] { display: none !important; }
.sansu-trial-after { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); background: var(--bg-soft); border-radius: var(--radius-md); }
.sansu-form { max-width: 480px; margin: var(--space-4) 0; }
.sansu-field { margin: 0 0 var(--space-4); border: 0; padding: 0; min-width: 0; }
.sansu-field label, .sansu-field legend { display: block; font-weight: 600; margin-bottom: var(--space-1); padding: 0; }
.sansu-field fieldset label { font-weight: 400; }
.sansu-field input[type="text"], .sansu-field input[type="password"], .sansu-field select { width: 100%; min-height: var(--tap-min); padding: 8px 12px; font-size: var(--fs-16); border: 1px solid #667085; border-radius: var(--radius-md); background: var(--bg); color: var(--fg); }
fieldset.sansu-field label { display: block; font-weight: 400; min-height: 32px; margin: 0 0 var(--space-1); }
fieldset.sansu-field label input { margin-right: 6px; }
fieldset.sansu-field select { width: auto; min-width: 6em; }
.sansu-help { margin: var(--space-1) 0 0; color: var(--fg-sub); font-size: var(--fs-14); }
.sansu-warn { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--brand); background: var(--brand-soft); color: var(--fg); }
.sansu-notice { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); background: var(--bg-soft); border-radius: var(--radius-md); font-weight: 600; }
.sansu-error { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--fg); background: var(--bg-soft); color: var(--fg); font-weight: 600; }
.sansu-note { margin: var(--space-4) 0; }
/* 欄の見た目を壊さずに、人には見えない・読み上げにも出ない（おとり欄） */
.sansu-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sansu-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.sansu-tab { min-height: var(--tap-min); padding: 8px 16px; font-size: var(--fs-16); border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--fg); cursor: pointer; }
.sansu-tab.is-on { border-color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.sansu-days { list-style: none; padding: 0; margin: 0 0 var(--space-3); columns: 2; column-gap: var(--space-5); }
.sansu-days li { display: flex; justify-content: space-between; gap: var(--space-3); max-width: 15em; }
.sansu-table-wrap { overflow-x: auto; }
.sansu-table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-14); }
.sansu-table th[scope="col"] { white-space: nowrap; font-size: 12px; padding: 4px 5px; }
.sansu-days li span { white-space: nowrap; }
.sansu-phone-note { display: none; font-size: 13px; text-align: center; margin: var(--space-3) 0 0; }
@media (max-width: 599px) { .sansu-phone-note { display: block; } }
.sansu-table th, .sansu-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.sansu-table td { text-align: right; font-variant-numeric: tabular-nums; }
/* 子どもが使うページ */
.sansu-select { text-align: center; }
.sansu-select-title { margin: var(--space-4) 0; font-size: var(--fs-24); border: 0; padding: 0; }
.sansu-select-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.sansu-select-btn { min-width: 9em; min-height: 64px; padding: 8px 24px; font-size: var(--fs-24); font-weight: 700; border: 3px solid var(--border); border-radius: 16px; background: var(--bg-soft); color: var(--fg); cursor: pointer; }
.sansu-guardian-link { margin-top: var(--space-6); font-size: var(--fs-13); }
.sansu-end-note { display: none; }
.sansu-stage .math-end-text { font-size: inherit; }
.sansu-stage .math-end-note { margin-top: var(--space-3); font-size: max(calc(2.6 * var(--u)), 15px); font-weight: 400; }


/* かぞえる問題の ●（dotsSvg）: 壁の並べ方（幅 36u）が 300px に足りない画面（--u < 8.33px = 画面の幅 633px 以下）では、viewBox 300×120 を
   幅 300px・高さ 120px で描く（● 24px。● どうしのすき間は 4 単位以上のまま 4px 以上。内幅が 300 未満なら縮む） */
@media (max-width: 633px) { .sansu-stage .mdots { width: 300px; height: 120px; max-width: 100%; } }