/* 保護者アプリ（旧「授業マイページ」。2026-08-17 名称変更）
   2026-08-13 トンマナ更新：角丸・やわらかい影・少し大きめの文字を採用。
   配色は既存の実装色を維持する（緑#28a745系＝授業/振替、青#0284c7＝自習、
   オレンジ#ea580c＝季節講習・追加授業、赤#dc2626＝欠席・要対応）。
   フォントはOS標準の日本語1系統に統一し、数字だけ別書体にしない（混在の違和感を避けるため）。 */
/* ===== 画面の器（2026-08-22 遼様指示で全面的に作り直し） =====
   これまでは #mah-app を「幅420pxの白いカード」にして、その外側をグレーの地に置いていた。
   GAS時代にPCで横に広がりすぎないようにした名残で、次の3つの実害が出ていた。
     1. 画面の大きなAndroid（412px）だと左右に地が残り、アプリが無駄に小さく見える
        （iPhone SEの375pxは、たまたま420px未満なので全幅に見えていただけ）
     2. スクロールすると、下部のフローティングメニューの裏に地のグレーがチラつく
     3. min-width:401px でカード自身をスクロールの器にしていたため、
        いまどきのスマホはほぼ全部「ページではなくカードが動く」挙動になっていた
   遼様のご指示は「アプリ部分と背景が分かれている必要は全くない」「各デバイスに最適化する」。
   よって **カードという見せ方をやめ、地と同じ背景の1枚もの** にする。
   角丸・影・別背景はすべて廃止し、幅は「広い画面で上限を設けるだけ」に留める。

   --mah-shell-max（画面の器の上限幅）を 640px にした理由：
     - 縦持ちのスマホは全部この値より狭いので、**どの端末でも素の全幅**になる
       （iPhone SE 375 / iPhone 14 390 / 大きめAndroid 412 / iPhone Pro Max 430）
     - 上限を外して768pxのタブレットで全幅にすると、7列のカレンダーの1マスが
       幅100px超の平たい長方形になり「スマホアプリを引き伸ばした画面」になる。
       640pxなら1マスは約80px×84px（2026-08-29 文字の引き上げで高さは70→84px）で、
       スマホでの見え方と同じ正方形に近い形を保てる
       （「広い画面でカレンダーだけ肥大させない」という2026-08-13の判断はここで守る）
     - 上限に当たっても地の色は画面全体と同じなので、カードとして浮いては見えない

   --mah-pad-x / --mah-pad-t は「アプリの余白」。ヘッダー帯だけは画面端まで伸ばしたいので、
   帯側でこの値を負のマージンとして打ち消す。値を1箇所にまとめておかないと、
   狭い画面向けに余白を詰めたときに帯だけ端からズレる。
   固定値の段組みをやめて clamp で連続的に変えているのは、375pxで窮屈にならず
   412pxで間延びしないようにするため（境目で急に余白が飛ぶのを避ける）。 */
:root{
  --mah-shell-max:640px;
  --mah-page-bg:#fbfcfb;
  /* 「振替先が未定」の赤。**共有部品（/assets/schedule-calendar.css の --sc-danger-rgb）と
     同じチャンネル値**を持つ。同じリングが本部の振替管理にも出るので、値が割れると
     電話中に保護者と本部が別の赤を見ることになる。
     色そのものではなく R G B の成分で持つ理由は、リングが
     〈不透明な枠線〉と〈42%の半透明の発光〉の2つで出来ているため。
     以前は枠線 #dc2626／発光 rgba(220,38,38,.42) と別々にベタ書きしてあり、
     片方だけ直せば静かに2色になる状態だった */
  --mah-pending-rgb:220 38 38;
  /* 授業の予定のカレンダー（真ん中のタブ）の緑。**新しい色ではなく**、
     月送りの矢印（.mah-cal-nav button）が前から持っていた値に名前を付けただけ。
     2026-09-18 遼様指示で、自習予約の画面の案内文と月送りの矢印も
     「自習の青」ではなくこの緑にそろえた（＝真ん中のカレンダーと同じトンマナ）。
     自習の青は、予約の印（カレンダーの帯・選択中のコマ・予約ボタン）にだけ残す。
     ink-deep は文字用の濃い版（#eef8f1 の面の上で 4.9:1。ink は 3.0:1 しかないので文字には使わない）。
     値はどちらもこのファイルに元からあったもの（#16a34a＝矢印／#1f7a48＝振替バッジの文字だった色） */
  --mah-lesson-soft:#eef8f1;
  --mah-lesson-ink:#16a34a;
  --mah-lesson-ink-deep:#1f7a48;
}
/* 地の色は html にも置く。iOSの弾むスクロール（バウンス）で body の外側が見えたとき、
   ここが白いままだと画面の端に別の色の帯が出る */
/* ===== 文字の大きさ（2026-08-29 遼様のご指摘で一括見直し） =====
   「全体的に文字が小さい。ベースを約20%大きくし、大小のメリハリを付ける」。
   スタッフアプリと同じ換算で全 font-size を引き上げた
   （14px級×1.20／17px以上×1.26／24px以上×1.30／12px級×1.14／
     それ未満×1.12・下限13px、0.5px刻みに丸め）。
   例外は2つだけ（理由はそれぞれの場所に書いてある）：
   中央ボタンの丸の中のラベルと、320px級の端末でのカレンダーの帯の文字。
   （中央の丸は 2026-08-30 にピルの中へ収め、2026-09-19 に3つのタブと同じ形にしたので、1つ目の例外はもう無い） */
html{background:var(--mah-page-bg);}
/* 縦スクロールバーが出る画面（出欠の名簿など）と出ない画面（ホーム）で、中身の幅が
   スクロールバーの幅（PCで約15px）ぶんずれて見えるのを防ぐ（2026-08-30 遼様のご指摘）。
   スクロールバーの場所を常に確保しておく。スマホは元々重なって表示されるので影響しない */
html{scrollbar-gutter:stable;}
body{
  background:var(--mah-page-bg);margin:0;padding:0;
  font-family:'Zen Maru Gothic','BIZ UDPGothic','Yu Gothic UI','Meiryo UI','Hiragino Kaku Gothic ProN',sans-serif;
  /* 画面より中身が短いときも地の色で埋める（下部メニューの裏に別の色を作らない） */
  min-height:100vh;min-height:100dvh;
}
#mah-app{
  --mah-pad-x:clamp(10px, 3.4vw, 22px); --mah-pad-t:clamp(14px, 3.6vw, 20px);
  font-family:'Zen Maru Gothic','BIZ UDPGothic','Yu Gothic UI','Meiryo UI','Hiragino Kaku Gothic ProN',sans-serif;
  width:100%;max-width:var(--mah-shell-max);margin:0 auto;
  /* 下の余白は、フローティングメニュー（下端から約90px。文字の引き上げでピルが
     少し背高になった）＋指の逃げ場ぶん。
     ホームバーのある端末では safe-area のぶんだけさらに空ける */
  padding:var(--mah-pad-t) var(--mah-pad-x) calc(112px + env(safe-area-inset-bottom));
  background:var(--mah-page-bg);
  color:#1f2937;position:relative;min-height:100vh;min-height:100dvh;box-sizing:border-box;
  font-size:17.5px;
  /* 横にはみ出したぶんは切る（2026-09-19 遼様「左から右に動かすときだけ、下のメニューが下にがくつく」）。
     画面の横スライドで右から入ってくる画面は、動いている間だけ器の右へ最大32pxはみ出す。
     右へのはみ出しはページに横スクロールの幅を作るので、スマホは表示の幅を広げ直し、
     position:fixed の下のメニューが一瞬ずれる（iPhone 13 相当の実測：幅 390→410px・メニューが 32px 下へ）。
     左から入るときは、はみ出しが負の側に出るので幅が生まれず、ずれない（＝右へ移るときだけ起きていた）。
     hidden ではなく clip にしているのは、上の帯（.mah-user-info）の position:sticky を壊さないため
     （hidden は器をスクロールの入れ物にしてしまい、帯が貼り付かなくなる。スタッフアプリの #tea-app と同じ理由）。
     clip を知らない古い端末（iOS 15 以前）向けに hidden を先に書く形は取らない：そこでは帯が貼り付かなくなり、
     一瞬のずれより悪くなる。position:fixed のもの（下のメニュー・ポップアップ）は器の外が基準なので切られない */
  overflow-x:clip;
}
#mah-app *{box-sizing:border-box}
/* 【消した指定について】かつてここに
     @media (min-width:401px){ #mah-app{ max-height:calc(100vh - 40px); overflow-y:auto; } }
   があった。カードが画面より狭かった時代に、固定ヘッダー(position:sticky)が
   ページ全体へ貼り付いてカードの外へ飛び出すのを防ぐための指定（2026-08-17）。
   カードそのものを廃止し、#mah-app がページの流れの中でそのまま伸びる形にしたので、
   sticky の基準はページ＝ビューポートで正しくなり、この回避策は不要になった。
   **戻さないこと**：戻すと、いまどきのスマホでページではなく器の中だけがスクロールし、
   メニューの裏に器の外の色がチラつく問題が再発する。 */
/* フォームコントロール（button/input/select/textarea）はUA既定フォントを持ち祖先を継承しないため、
   明示的に継承させる。指定漏れのボタンがブラウザ既定フォントで浮く不具合の再発防止。 */
button,input,select,textarea{font-family:inherit}
/* 素早く2回押しても拡大しない（2026-09-11 スタッフのテスト「月をまたいで素早く連打すると画面がアップされてしまう」）。
   スマホはボタンを続けて押すと「ダブルタップで拡大」と受け取る。manipulation が止めるのはこの拡大だけで、
   2本指での拡大・スクロールはそのまま使える */
button,[role="button"],.mah-cal-day{touch-action:manipulation}
/* ログイン画面と各フォームの見出し */
.mah-header{text-align:center;margin-bottom:20px;padding-bottom:15px;border-bottom:3px solid #28a745}
.mah-header h2{color:#16a34a;margin:0 0 5px;font-size:26.5px;font-weight:800}
.mah-header p{margin:0;font-size:15px;color:#64748b}
/* ログイン画面は入力欄が2つしかないので、広い画面では横に伸ばさず中央に置く。
   スマホでは器のほうが狭いため、この指定は当たらない（見た目は変わらない）。
   2026-08-22：器の幅を640pxまで許したことで、PCで入力欄だけが不自然に長くなったため */
#mah-view-auth{max-width:400px;margin:0 auto}
.mah-form-head{margin-bottom:18px}
.mah-form-head h2{color:#1f2937;margin:0;font-size:24px;font-weight:800}
.mah-hint{font-size:14.5px;color:#0369a1;background:#eff8fd;border:1px solid #d3ecfa;border-radius:12px;padding:10px 13px;margin:0 0 16px;font-weight:700}
/* 季節講習まわりの案内はオレンジ（画面のテーマ色に合わせる。青のままだと自習予約に見える） */
.mah-hint-orange{color:#a24e14;background:#fdf5ee;border-color:#f7dcc4}

/* ===== ログイン中のユーザー表示＝3タブ共通の固定ヘッダー帯（2026-08-17 遼様指示） =====
   スクロールしても動かない帯にして「ここから下が中身」という区切りを作る。
   下に薄い境界線と影を置き、コンテンツが帯の下をくぐるのが分かるようにしている。
   左右は負のマージンで器の端まで伸ばす（アプリの左右余白ぶんを打ち消す）。
   2026-08-22：カード（角丸32px）をやめたので、帯の上の角丸も外した。
   角丸だけ残すと、四角い画面の中で帯の肩だけが欠けて見える。
   背景・境界線の色は画面が変わっても固定。テーマ色（緑/橙/青）はここには入れない。 */
.mah-user-info{
  position:sticky;top:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin:calc(-1 * var(--mah-pad-t)) calc(-1 * var(--mah-pad-x)) 20px;
  padding:13px var(--mah-pad-x);
  background:rgba(251,252,251,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:none;border-bottom:1px solid #e8ede9;border-radius:0;
  box-shadow:0 2px 8px rgba(30,40,35,.04)
}
/* 氏名の側は縦に積む（1行目＝生徒名とモード、2行目＝校舎名。2026-09-11 遼様指示） */
.mah-user-info > div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.mah-user-line{display:flex;align-items:center;gap:9px;min-width:0;max-width:100%}
.mah-user-name{font-size:18px;font-weight:800;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===== 校舎名（ログイン画面の見出しの下と、ログイン後の帯の生徒名の下）2026-09-11 遼様指示 =====
   ご兄弟の関係で複数の校舎を掛け持ちする保護者が、いまどの校舎かを取り違えないための表示。
   取り違え防止が目的なので、**校舎名は途中で切らない**（狭い画面では折り返す）。
   iPhone SE（横320px）で切れるのは氏名の側（.mah-user-name の …）だけ */
.mah-school-line{display:flex;align-items:center;gap:5px;max-width:100%;
  font-size:13px;font-weight:700;color:#4b5563;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
/* ビルのアイコンは 2026-09-18 遼様指示で外したので、アイコン用の指定も置かない */
.mah-header .mah-school-line{justify-content:center;margin:0 0 6px;color:#15803d}
/* ===== 別のお子さまを見る（2026-09-12 遼様のご判断） =====
   生徒名・校舎名と同じ縦並びの中に、3行目として置く。
   ログアウト（右の薄いグレー文字）より目立ち、生徒名より目立たない強さにしたいので、
   帯の中では枠だけの緑（塗りつぶさない）にしてある。
   狭い画面（iPhone SE 横320px）でもログアウトと重ならないよう、氏名側の列の中に収める */
.mah-sibling-btn{display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-size:13px;font-weight:700;font-family:inherit;line-height:1.2;
  background:#fff;border:1.5px solid #86efac;color:#15803d;
  padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.mah-sibling-btn:disabled{border-color:#e2e8f0;color:#cbd5e1;cursor:progress}
/* ポップアップに並ぶお子さまのボタン。1人1行にして、氏名を折り返さない
   （ポップアップ下部の横並びに入れると「兄弟花／子」のように割れる） */
.mah-sibling-pick{display:block;width:100%;margin:10px 0 0;font-size:16px}
/* ポップアップの中の暗証番号欄（きょうだいで暗証番号が違うご家庭のときだけ出る） */
.mah-sibling-pin{width:100%;max-width:190px;margin:4px auto 0;display:block;text-align:center;
  font-size:22px;letter-spacing:.5em;text-indent:.5em;padding:10px;border:2px solid #d7e0d9;border-radius:10px;font-family:inherit}
.mah-sibling-pin:focus{outline:none;border-color:#28a745}
/* 暗証番号が違ったときの断りの文。同じカードの中、入力欄のすぐ下に出す（2026-09-17 最終レビュー）。
   別のポップアップに飛ばすと、閉じた拍子に入力欄ごと消えて、入口を押すところからやり直しになる。
   赤はこのファイルで「間違い・お急ぎ」に使っている #dc2626（.mah-modal-icon.ng と同じ）で、新しい色は作らない */
.mah-sibling-pin-err{margin:10px 0 0;text-align:center;font-size:13.5px;font-weight:700;line-height:1.5;color:#dc2626}
.mah-btn-switch{font-size:13.5px;background:#fff;border:1.5px solid #28a745;color:#16a34a;padding:7px 13px;border-radius:10px;cursor:pointer;font-weight:700}
.mah-btn-switch:disabled{border-color:#e2e8f0;color:#cbd5e1;cursor:not-allowed}
.mah-btn-text{display:block;width:100%;background:none;border:none;color:#94a3b8;font-size:13.5px;padding:8px;cursor:pointer;text-align:center}
/* ログアウトは枠なしのグレー文字（緑の枠付きボタンだと画面右上で悪目立ちするため）。
   狭い画面で氏名が長いときは、縮むのは氏名側（…で省略）でログアウトは縮ませない */
.mah-logout{flex:0 0 auto;white-space:nowrap;background:none;border:none;color:#94a3b8;font-size:13px;font-weight:700;padding:4px 2px;cursor:pointer;font-family:inherit}

/* セクション見出し（お知らせ／季節講習／カレンダー等のブロックを区切る） */
.mah-section-lbl{font-size:13px;font-weight:800;letter-spacing:.04em;color:#94a3b8;margin:20px 0 10px}
#mah-notice-section > .mah-section-lbl{margin-top:0}

.mah-group{margin-bottom:15px}
.mah-group label{display:block;font-weight:700;margin-bottom:8px;font-size:17px;border-left:4px solid #28a745;padding-left:10px}
.mah-input{width:100%;height:48px;padding:0 15px;border:1.5px solid #d7dedb;border-radius:12px;font-size:19px;box-sizing:border-box;font-family:inherit;color:#1f2937}
.mah-input:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px rgba(40,167,69,.12)}
.mah-btn{display:block;width:100%;padding:15px;color:#fff;border:none;border-radius:14px;font-size:19px;font-weight:800;cursor:pointer;text-align:center;transition:.2s;font-family:inherit}
.mah-btn:disabled{background:#cbd5e1!important;cursor:not-allowed;box-shadow:none}
.mah-btn-green{background:#28a745;box-shadow:0 6px 18px rgba(40,167,69,.25)}
.mah-btn-blue{background:#fff;color:#0284c7;border:2px solid #0284c7}
.mah-btn-orange{background:#fff;color:#ea580c;border:2px solid #ea580c}
/* 塗りつぶしの確定ボタン（自習=青・季節講習=オレンジ。画面のテーマ色と揃える） */
.mah-btn-blue-solid{background:#0284c7;box-shadow:0 6px 18px rgba(2,132,199,.25)}
.mah-btn-orange-solid{background:#ea580c;box-shadow:0 6px 18px rgba(234,88,12,.25)}
.mah-btn-secondary{background:#64748b;margin-top:10px}
/* 「今すぐ決める」のような要対応（赤）の操作。日別詳細の「振替先を決める」(.mah-act-decide) と
   同じ赤にして、ポップアップと飛んだ先のボタンが同じ操作だと分かるようにする */
.mah-btn-red{background:#dc2626;box-shadow:0 6px 18px rgba(220,38,38,.25)}

.mah-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;font-size:13px;font-weight:800;margin-right:5px;border:1px solid transparent}
.mah-badge i{font-size:13px}
.mah-badge-red{background:#fee2e2;color:#dc2626}
.mah-badge-green{background:#e6f6ec;color:#16a34a}
.mah-badge-blue{background:#e3f1fb;color:#0284c7}
.mah-badge-orange{background:#fef1e2;color:#ea580c}
.mah-badge-purple{background:#f3e8ff;color:#9333ea}
.mah-badge-teal{background:#d9f3ef;color:#0d8577}
.mah-badge-pink{background:#fbe7f0;color:#c2367d}
/* 振替は**元の種別と同じ色**で出す（2026-09-18 遼様指示）。
   「通常授業」と「通常授業（振替）」、「季節講習」と「季節講習（振替）」…が同じ色になり、
   振替かどうかは文字の「（振替）」だけで見分ける。
   以前あった振替専用の色（.mah-badge-*-mk＝淡い地＋枠線）は廃止した */

.mah-tl-item{border:1px solid #eef1ef;border-radius:16px;padding:16px;margin-bottom:12px;position:relative;background:#fff;box-shadow:0 2px 10px rgba(30,40,35,.05)}
.mah-tl-date{font-size:21.5px;font-weight:800;margin:10px 0}
.mah-tl-time{font-size:19px;font-weight:800;margin:0 0 12px;font-variant-numeric:tabular-nums}
/* 実際の出欠の記録。予定（上のバッジ）とは別物なので、控えめな帯で下に添える。
   色（出席=緑／欠席=赤）だけに頼らず、アイコンと文字を必ず伴わせる */
.mah-att{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:0 0 12px; padding:7px 10px; border-radius:8px;
  font-size:14.5px; font-weight:700; line-height:1.5;
}
.mah-att i{ font-size:15px; flex:0 0 auto; }
.mah-att.is-present{ background:#e8f6ee; color:#1d7a48; }
.mah-att.is-absent { background:#fde8e6; color:#b7392f; }
.mah-att-late{
  padding:1px 7px; border-radius:999px; font-size:13px; font-weight:800;
  background:#fdead2; color:#a24e14;
}
/* 振替の行き来（2026-09-11 スタッフのテスト「振替元の日時が出ていない」）。
   振替先のカードに「振替元：」、元の日のカードに「振替先：」を1行で添える。
   文字色 #4a6274 は白地に対して約6.6:1。アイコンは飾りなので薄くてよい */
.mah-src-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 12px;font-size:14px;font-weight:700;color:#4a6274;line-height:1.5}
.mah-src-note i{color:#8a9aa8;font-size:13px}
.mah-tl-item > .mah-src-note:last-child{margin-bottom:0}
.mah-badge-gray{background:#eef1f4;color:#4a5b6b}

.mah-card-list{display:flex;flex-direction:column;gap:10px}
.mah-card{background:#fff;border:1.5px solid #e2e8f0;padding:15px;border-radius:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.15s;font-weight:700;font-size:19px;color:#334155;box-shadow:0 2px 8px rgba(30,40,35,.04)}
.mah-card.checked{border-color:#28a745;background:#f2fbf5;border-width:2.5px;padding:14px;color:#15803d}
.mah-card.disabled{background:#f6f7f8;color:#94a3b8;cursor:not-allowed;border-color:#e8ecea;font-weight:400;box-shadow:none}
.mah-hidden{display:none!important}
/* 通信中の目隠し。2026-08-22：カードをやめて #mah-app がページの高さぶん伸びるようになったため、
   absolute+height:100% のままだと「ページ全体の中央」に進捗バーが置かれ、
   長い画面では画面外に出て見えなくなる。fixed にして常に画面の中央に出す。
   重なり順（z-index:99）は変えない：下部メニューが上に出るのは従来どおり */
#mah-overlay{position:fixed;inset:0;background:rgba(255,255,255,.95);z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0}

/* --- フェイクプログレスバー（緑） --- */
.mah-progress-container{width:80%;max-width:250px;height:8px;background-color:#e2e8f0;border-radius:10px;overflow:hidden;position:relative;margin:0 auto;}
.mah-progress-bar{width:0%;height:100%;background-color:#28a745;border-radius:10px;animation:mah-fake-progress 10s cubic-bezier(0.1, 0.5, 0.05, 1) forwards;}
@keyframes mah-fake-progress{0%{width:0%;}10%{width:30%;}40%{width:70%;}100%{width:95%;}}

/* モード表示。生徒モードと間違えて入ってしまった保護者がすぐ気づけるよう、
   2つのモードで色相を離してある（2026-08-17 遼様指示：もっと分かりやすく）。
   2026-09-19 遼様：アイコンは外し、「塗りに枠」もやめて授業のバッジ（.mah-badge）と同じ作りにする
   （淡い塗りだけ・角は丸く）。保護者＝緑、生徒＝青紫。色そのものが手がかり */
.mah-role-badge{flex:0 0 auto;display:inline-flex;align-items:center;
  font-size:13px;font-weight:800;padding:4px 10px;border-radius:99px;letter-spacing:.01em;
  background:#e6f6ec;color:#15803d;border:1px solid transparent}
.mah-role-badge.is-student{background:#eef2ff;color:#4338ca}
.mah-seats-info{font-size:15px;font-weight:800}
.mah-seats-info.full{color:#dc2626}
.mah-seats-info.few{color:#d97706}
.mah-seats-info.ok{color:#16a34a}

/* お知らせエリア：白ベースにして、色は左のアイコンチップと文字だけで表す */
.mah-notice{border-radius:16px;padding:14px 15px;margin-bottom:10px;border:1px solid #eef1ef;background:#fff;cursor:pointer;
  box-shadow:0 2px 10px rgba(30,40,35,.05);display:flex;gap:12px;align-items:flex-start}
.mah-notice-chip{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:17px}
.mah-notice.urgent .mah-notice-chip{background:#fde3e1;color:#dc2626}
.mah-notice.warn .mah-notice-chip{background:#fef3e2;color:#d97706}
.mah-notice-main{flex:1;min-width:0}
.mah-notice-top{font-weight:800;font-size:15.5px;color:#1f2937}
.mah-notice-body{font-size:14.5px;color:#64748b;margin-top:2px;line-height:1.5}
.mah-notice-cta{font-size:13px;font-weight:700;margin-top:6px}
.mah-notice.urgent .mah-notice-cta{color:#dc2626}
.mah-notice.warn .mah-notice-cta{color:#d97706}

/* コマチケット（季節講習・追加授業＝オレンジ系で統一）。
   カレンダーを画面外に押し出さないよう、横1行のコンパクトなカードにする */
.mah-ticket-card{background:#fff;border:1px solid #fbe6d3;border-radius:16px;padding:15px 16px;margin-bottom:6px;
  box-shadow:0 2px 10px rgba(90,60,20,.05);display:flex;justify-content:space-between;align-items:center;gap:12px}
.mah-ticket-card .mah-badge{margin-right:0}
.mah-ticket-sub{font-size:13px;color:#94a3b8;margin-top:6px}
.mah-btn-mini{background:#fff;border:1.5px solid #ea580c;color:#ea580c;font-weight:800;font-size:13.5px;
  padding:9px 14px;border-radius:11px;white-space:nowrap;cursor:pointer;font-family:inherit}

/* 日別詳細カードの操作ボタン */
.mah-tl-actions{display:flex;gap:8px;flex-wrap:wrap}
/* 生徒モード（閲覧のみ）で、操作ボタンの代わりに置く1行（2026-08-19）。
   ボタンに見えない色・形にする＝押せるものが1つも無いことが形で分かる。
   文字色 #4a6274 は地の #f4f7f9 に対して 6.3:1（色だけに頼らずアイコンも添える） */
.mah-viewonly-note{
  display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:10px;
  background:#f4f7f9;color:#4a6274;font-size:13.5px;font-weight:700;line-height:1.5;
}
/* 「読み込めなかった」ことを、その場所で伝える枠（2026-09-11 の点検で追加）。
   通信に失敗したときに「0件」「満席」として黙って描いていた箇所を、この枠に置き換えている。
   ・注意色（欠席と同じ赤系）で「いつもの空っぽ」と区別できるようにする
   ・アイコンも添える（色だけに頼らない）
   ・下の細い行に「持っていても今は出せない／予約できない」ことまで書く＝問い合わせを1本減らす
   文字色 #b91c1c は地の #fef4f3 に対して約6.0:1、補足の #7c2d2d は約8.5:1。 */
.mah-load-error{padding:11px 13px;border-radius:11px;background:#fef4f3;border:1.5px solid #f8cbc8;
  color:#b91c1c;font-size:14px;font-weight:800;line-height:1.6}
.mah-load-error-sub{display:inline-block;margin-top:2px;font-weight:600;font-size:13px;color:#7c2d2d}

.mah-act-btn{flex:1;min-width:118px;padding:11px 10px;border-radius:12px;font-size:14.5px;font-weight:800;text-align:center;cursor:pointer;border:1.5px solid transparent;background:#fff;font-family:inherit}
.mah-act-makeup{color:#16a34a;border-color:#bfe8cd;background:#f2fbf5}
.mah-act-absent{color:#dc2626;border-color:#f8cbc8;background:#fef4f3}
.mah-act-late{color:#0284c7;border-color:#bfe0f5;background:#eff8fd}
.mah-act-cancel{color:#64748b;border-color:#d7dedb;background:#f8fafa}
.mah-act-decide, .mah-act-change{color:#fff;background:#dc2626;border-color:#dc2626}

/* マンスリーカレンダー */
/* 回数の3枚と、その下の月送りが近すぎて窮屈だったので間隔を広げた（2026-08-17 遼様指摘） */
.mah-cal-summary { display: flex; gap: 8px; margin: 0 0 20px; }
.mah-cal-summary-box { flex: 1; background: #fff; border:1px solid #eef1ef; border-radius: 14px; padding: 12px 10px; text-align: center; box-shadow:0 2px 8px rgba(30,40,35,.04); }
.mah-cal-summary-box .num { font-size: 27.5px; font-weight: 800; color: #1f2937; font-variant-numeric: tabular-nums; }
.mah-cal-summary-box .label { font-size: 13px; color: #94a3b8; font-weight: 700; margin-top: 3px; }
.mah-cal-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 14px; }
/* 月送りの矢印。4つのカレンダー（ホーム・自習・季節講習・振替先）で同じ見た目にする。
   自習だけ青に上書きしていたが、2026-09-18 遼様指示で上書きをやめ、ここの緑1つに寄せた */
.mah-cal-nav button { background:var(--mah-lesson-soft); border:none; color:var(--mah-lesson-ink); width:32px; height:32px; border-radius:10px; font-size:15px; cursor:pointer; padding:0; font-family:inherit; }
/* 押せないときは「淡い面＋濃い文字」（UI指示書 4-5）。2026-08-22 まで #cbd5e1 の文字を
   淡い緑の面（#eef8f1）に置いていて **1.37:1**＝矢印が消えていた。
   面からテーマ色（緑）を抜いて中立の灰にすることで「いまは効かない」を色でも示し、
   矢印そのものは #5a6b7d で 4.91:1 まで濃くして読めるようにする
   （本部の月送りが 4.88:1 なので、2アプリでほぼ同じ濃さになる）。
   なぜ押せないのかは JS 側（setCalNavBounds）が title と読み上げ用の名前に出す */
.mah-cal-nav button:disabled { background:#f1f3f2; color:#5a6b7d; cursor:not-allowed; }
.mah-cal-month-label { font-size: 17.5px; font-weight: 800; min-width: 132px; text-align: center; }
.mah-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mah-cal-dow { text-align: center; font-size: 13px; font-weight: 800; color: #a3aca6; padding: 2px 0 6px; }
/* 選べる日はうっすら緑で塗り、選べない日は沈ませる。白地に白マスだと
   「押せる場所」が読み飛ばされるため、SCHOOL Manager同様にコントラストを付ける（2026-08-13 遼様指摘） */
/* 高さは固定値。「選択日（帯が白い下敷きに載って一番背が高くなる状態）」でも収まる値にしてある。
   可変にすると、日付を選ぶたびにその行だけ縦に伸びてカレンダー全体が動いてしまう（2026-08-17 モックで確定）。
   2026-08-29 文字の引き上げに伴い 70px → 80px（内訳：余白5+日付の丸22+間隔3+
   白下敷きの帯2段（2+19+2+19+2=44）+余白5=79）。共有部品（.sc-cal-day）も同じ値にしてある */
/* --mah-ring-inset / --mah-ring-radius は「マスの外側に巻くリング」の寸法。
   リングは2種類ある（たった今予約した日＝テーマ色／振替先が未定の欠席＝赤）が、
   どちらも同じ寸法でないと同じ日に重なったときに揃わない。
   画面幅が狭いとマスの隙間も狭くなり、外に出しすぎると隣のマスに削られるので、
   狭い画面向けの上書きは変数側だけで済むようにしてある */
.mah-cal-day {
  --mah-ring-inset: -3px; --mah-ring-radius: 15px;
  min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border: 1.5px solid transparent; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight:700; color: #2c3a33; background: #e9f4ec;
  /* 左右の余白は上下より狭い3px：帯の文字を13pxへ上げた結果、375px級の端末で
     「授業2」が帯の幅ちょうどになった。Zen Maru Gothicが読み込めず代替書体に
     落ちた場合でも数字が切れないよう、帯に4pxの余裕を持たせる */
  padding: 5px 3px; gap: 3px; position: relative; transition:.12s;
}
.mah-cal-day:hover { background: #d8ecdd; }
/* キーボードで日付をたどれるようにした（2026-08-22）ので、いまどのマスに居るかを必ず見せる。
   outline は枠線と違って場所を取らないので、マスの高さも隣との間隔も1pxも変わらない
   （offset を負にして、外側のリング＝赤い「振替先が未定」と重ならない位置に置く）*/
.mah-cal-day:focus-visible { outline: 3px solid #0f7a3d; outline-offset: -2px; }
.mah-cal-day.empty { visibility: hidden; }
/* 選択日：現状どおり緑の四角で塗りつぶす（ここは変更しないというご指示） */
.mah-cal-day.selected { background: #16a34a; border-color: #16a34a; color:#fff; box-shadow:0 4px 12px rgba(22,163,74,.35); }
/* 本日：セル全体ではなく日付の数字だけを丸く塗る。
   選択日は「四角」なので、同じ日が本日かつ選択中でも形の違いで両方読み取れる */
.mah-cal-d { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; line-height:1; flex:0 0 auto; font-size:14.5px; }
.mah-cal-day.today .mah-cal-d { background:#16a34a; color:#fff; font-weight:800; }
.mah-cal-day.selected.today .mah-cal-d { background:#fff; color:#16a34a; }
/* 選択中のコマ数の丸。2026-08-29「通知の印が小さく読みづらい」のご指摘で
   18px→21px・数字13pxに引き上げ（右上へのはみ出し量は変えていない） */
.mah-cal-count { position: absolute; top: -6px; right: -6px; background: #16a34a; color: #fff; border-radius: 50%; width: 21px; height: 21px; font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow:0 0 0 2px var(--mah-page-bg); }
.mah-cal-day.disabled-day { background: #f5f6f5; color: #c3cbc6; cursor: not-allowed; font-weight: 400; }
/* 押せない日（休館日・予約可能期間外）の帯は沈める。
   ドットだった頃は5pxで灰色の下地に埋もれていたが、帯にしたことで
   マス全幅×15pxになり、下地の灰色より帯のほうが目立って
   「押せない日」に見えなくなった（2026-08-17 敵対的レビューで発見）。
   色の意味（緑=授業/青=自習）は残しつつ、押せないことを優先して読ませる */
.mah-cal-day.disabled-day .mah-cal-bar { opacity: .28; }
/* 帯（バー）。点（ドット）を廃止した本体。区分は「授業」「自習」の2つだけで、
   振替・季節講習・追加授業はすべて「授業」に含める（保護者にとって振替かどうかは
   カレンダー上では関係ない、という2026-08-17 遼様の判断）。色は既存のまま
   授業=#16a34a／自習=#0284c7 で、帯の中に文字も入れるので色覚に依らず読める。
   帯は下端に寄せる（margin-top:auto）。マスの overflow は切らない：発光リング
   （.mah-cal-day-new::after）がマスの外側に出るため、切ると光が消える。
   はみ出しの抑制は帯側の overflow:hidden で足りる */
.mah-cal-bars { display:flex; flex-direction:column; gap:3px; width:100%; margin-top:auto; }
.mah-cal-bar { height:19px; border-radius:4px; background:#cbd5e1; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:2px;
  font-size:13px; font-weight:800; color:#fff; letter-spacing:-.02em; white-space:nowrap; }
.mah-cal-bar .n { font-size:13px; opacity:.9; font-variant-numeric:tabular-nums; }
.mah-cal-bar-lesson { background:#16a34a; }
.mah-cal-bar-study { background:#0284c7; }
/* 「休館」「満席」の帯（季節講習の予約画面だけで出る）。
   灰色にするだけだと色でしか伝わらないので、押せない理由をマスの中に文字で置く。
   授業=緑／自習=青と混ざらないよう、意味を持たない濃いグレーにしている。
   #64748b の面に白文字＝5.0:1（4.5:1 以上）*/
.mah-cal-bar-closed { background:#64748b; }
/* 選択日は緑一色で塗るため、そのままだと緑の帯が消える。
   帯だけ白い下敷きに載せて、色の意味（緑=授業／青=自習）を保つ */
/* 下敷きの左右は1px：帯の文字を13pxへ上げたぶん、選択日は帯の幅が一番きつくなる。
   左右2pxのままだと、代替書体に落ちた端末で「授業2」の数字の端が削れる */
.mah-cal-day.selected .mah-cal-bars { background:#fff; border-radius:6px; padding:2px 1px; gap:2px; }
/* カレンダーと「◯月◯日の予定」が近すぎてエリアの切れ目が分からなかったので、
   余白を広げたうえで薄い区切り線を入れた（2026-08-17 遼様指摘）。
   月を送った直後は中身が空になるので、線だけが宙に浮かないよう :empty で消す */
/* カレンダーの真下に置く注記（押せない日の理由・選べる日数）。
   補助的な文字だが「読めない＝無いのと同じ」なので、薄いグレーにはしない
   （#475569 が地の #fbfcfb で 8.0:1）*/
.mah-cal-note { font-size:14.5px; font-weight:700; color:#475569; margin:12px 0 0; line-height:1.6; }
.mah-cal-note b { color:#1f2937; font-variant-numeric:tabular-nums; }
.mah-cal-day-detail { margin-top: 26px; padding-top: 22px; border-top: 1px solid #e8ede9; }
.mah-cal-day-detail:empty { display: none; }
.mah-cal-day-detail h3 { font-size: 18px; margin: 0 0 14px; }

/* 遅刻連絡・欠席確認モーダル（タップ選択のみ、文字入力なし） */
#mah-late-modal, #mah-absence-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(31,41,55,.45); z-index: 9500; display: flex; align-items: center; justify-content: center; }
/* position:relative は右上の×（.mah-modal-x）を置くため */
.mah-modal-content { position: relative; background: #fff; padding: 22px; border-radius: 18px; width: 90%; max-width: 350px; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.mah-late-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.mah-late-btn { padding: 16px 0; border: 1.5px solid #0284c7; background: #fff; color: #0284c7; border-radius: 12px; font-size: 18px; font-weight: 800; cursor: pointer; font-family:inherit; }
.mah-late-btn:active { background: #0284c7; color: #fff; }

/* 下部3タブ（左＝お知らせ／中央＝カレンダー／右＝自習予約）。フローティングのピル型カプセル。
   画面下端に密着させないのは、メニューの下をコンテンツがくぐるのが見えることで
   「まだ先がある」と分かるため（2026-08-17 遼様指示でフローティングを維持） */
/* 幅は本文の器（--mah-shell-max）に左右の余白24pxを引いた値で揃える。
   固定値（旧:396px＝420pxのカード幅なり）にしておくと、器の幅を変えたときに
   メニューだけ本文と幅が合わなくなる（2026-08-22 器の作り直しに合わせて連動させた） */
#mah-bottomnav{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: calc(100% - 24px); max-width: calc(var(--mah-shell-max) - 24px); z-index: 500; pointer-events: none;
}
/* ===== 3つのタブ（2026-09-19 遼様のご指示で作り直し） =====
   「自分がどこにいるかわからない」との声を受けて：
     ・3つとも同じ緑のトンマナ（授業のカレンダーの緑の変数だけを使う。新しい色は作らない）
     ・**選んでいる1つだけ**に色が付く：薄い緑の背景（--mah-lesson-soft）＋緑のアイコンと文字（--mah-lesson-ink。カレンダーと同じ。2026-09-19）。
       文字の濃さは #eef8f1 の上で 4.9:1（ink の #16a34a は 3.0:1 しかないので使わない）
     ・選んでいないものは色を付けない灰色。ただし**読める濃さ**にした：
       以前の #9aa5a0 は白の上で 2.5:1 しかなく（archive/design-audit-2026-08-16.md で指摘済み）、
       「どこに何があるか」自体が読みにくかった。このファイルに元からある灰色 #5b6560（白の上で 6.0:1）を使う。
       ピルは92%の白で下の中身が透けるので、4.5:1 ちょうどの灰色だと濃い中身の上で割り込む。余裕を持たせてある
     ・以前の中央の「緑地に白抜きの大きな丸」（常時点灯・光る影）はやめ、3つを同じ形・同じ大きさにそろえた。
       常に点灯していると、カレンダー以外を開いているときも「そこに居る」ように見えていた
   薄い緑の背景はボタンごとに塗らず、下敷き（.mah-nav-ink）を1枚だけ置いて、選んだボタンの下へ滑らせる。
   滑る速さと動きは、画面の横スライド（.mah-view-in-*）と同じ 220ms・ease-out。
   ボタンは flex:1 で同じ幅なので、下敷きの位置は「幅＋すき間」の何個分かだけで決まる（JSで寸法を測らない）。
   ピルの余白とすき間は変数1か所に持つ（ピル本体と下敷きの計算で値が割れないように） */
.mah-nav-pill{
  --mah-nav-pad:5px; --mah-nav-gap:6px;
  pointer-events: auto; position: relative;
  display: flex; gap: var(--mah-nav-gap); padding: var(--mah-nav-pad);
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid #eef1ef; border-radius: 999px; box-shadow: 0 8px 28px rgba(30,40,35,.16);
}
.mah-nav-ink{
  position:absolute; z-index:0; pointer-events:none;
  top:var(--mah-nav-pad); bottom:var(--mah-nav-pad); left:var(--mah-nav-pad);
  width:calc((100% - 2 * var(--mah-nav-pad) - 2 * var(--mah-nav-gap)) / 3);
  border-radius:999px; background:var(--mah-lesson-soft);
  transform:translateX(0);
  transition:transform 220ms ease-out;
}
.mah-nav-pill[data-active="calendar"] .mah-nav-ink{transform:translateX(calc(100% + var(--mah-nav-gap)))}
.mah-nav-pill[data-active="study"] .mah-nav-ink{transform:translateX(calc(200% + 2 * var(--mah-nav-gap)))}
.mah-nav-btn{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:6px 4px; border-radius:999px; font-size:13px; font-weight:800; color:#64748b; cursor:pointer;
  background:transparent; border:none; position:relative; z-index:1; white-space:nowrap;
  transition:color 220ms ease-out,background-color 220ms ease-out;
}
/* アイコンは残す（「アイコンを使う場所を減らす」2026-09-19 の例外）：
   ここは「いまどの画面か」を示す場所で、アイコンが目印の役目を持つため */
.mah-nav-btn i{font-size:22.5px}
/* 2026-09-19 遼様「カラーリングが暗い。カレンダーの薄い緑と濃い緑にする」：
   選んでいるタブは、カレンダーの「授業」の印と同じ緑（--mah-lesson-ink）。下敷きは同じ薄い緑（--mah-lesson-soft） */
.mah-nav-btn.active{color:var(--mah-lesson-ink)}

/* ===== 3つの画面を切り替えるときの横スライド（2026-09-19 遼様のご要望） =====
   並びは左から お知らせ → カレンダー → 自習予約。右の画面へ移るときは中身が右から入って左へ滑り、
   左へ戻るときは左から入って右へ滑る（メニューの下敷きと同じ向き・同じ速さ）。
   動かすのは入ってくる画面だけ。出ていく画面はその場で消す：
   2枚を同時に出すと、高さの違う画面がページのスクロールの中で重なり、位置が跳ねるため。
   動かすのは transform と opacity だけ（レイアウトを動かさない＝中身を作り直しても重くならない）。
   移動は32px（画面幅の1割弱）。全幅を滑らせると、入ってくる画面の反対側が一瞬空白になる。
   終わりの状態は元の見た目そのもの（fill-mode を付けない＝終わったら transform が残らない）。
   右から入る画面は動いている間だけ器の右へはみ出すので、器（#mah-app）の overflow-x:clip で切っている
   （切らないと横スクロールの幅が生まれ、下のメニューががくつく。2026-09-19）。
   動きを減らす設定では下の prefers-reduced-motion で止める */
.mah-view-in-from-right{animation:mah-view-in-from-right 220ms ease-out}
.mah-view-in-from-left{animation:mah-view-in-from-left 220ms ease-out}
@keyframes mah-view-in-from-right{from{transform:translateX(32px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes mah-view-in-from-left{from{transform:translateX(-32px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ===== 画面ごとのテーマ色（お知らせ=オレンジ／自習予約=青／季節講習=オレンジ） =====
   色を乗せるのはボタン・アイコン・見出しといったアクセントだけにとどめ、
   土台であるカレンダーのマスには一切乗せない（2026-08-17 遼様指示）。
   自習予約画面のカレンダーをホーム画面と1ドットも変えないことで、
   「同じものを操作している」感覚を保ち、帯の色（緑=授業／青=自習）の意味も濁らせない。 */
.mah-notice-theme .mah-section-lbl{color:#c2410c}
.mah-ticket-theme .mah-section-lbl{color:#a24e14}
/* 自習予約タブ：ブルー基調。
   ただし 2026-09-18 遼様指示で、**カレンダーの前後の案内文と月送りの矢印だけ**は
   真ん中のカレンダー（授業の予定）と同じ緑にそろえた。
     ・月送りの矢印 … 上書きをやめ、共通の .mah-cal-nav button（緑）をそのまま使う
     ・カレンダーの上の案内（.mah-hint）と下の見出し（.mah-section-lbl）… 緑＋15%大きい文字
   自習の青は、予約の印（カレンダーの帯・選択中のコマ数・予約ボタン）にだけ残している。 */
.mah-study-theme .mah-header{border-bottom-color:#0284c7}
.mah-study-theme .mah-header h2{color:#0284c7}
/* 「選択中のコマ数」バッジは予約操作の手がかりなのでテーマ色に寄せる（マスの塗りは共通のまま） */
.mah-study-theme .mah-cal-count{background:#0284c7}
/* カレンダーの上下の案内文（2026-09-18）。
   文字は 15% 大きく（14.5px→16.5px／13px→15px。0.5px刻みに丸め、下限13pxは当然満たす）、
   色は授業の予定のカレンダーと同じ緑の変数を指す。地の上で 4.9:1 ある濃い版を使う */
.mah-study-theme .mah-hint{font-size:16.5px;color:var(--mah-lesson-ink-deep);background:var(--mah-lesson-soft);border-color:var(--mah-lesson-soft)}
.mah-study-theme .mah-section-lbl{font-size:15px;color:var(--mah-lesson-ink-deep)}

.mah-slot-card{display:flex;justify-content:space-between;align-items:center;border:1.5px solid #eef1ef;background:#fff;border-radius:14px;padding:14px 15px;margin-bottom:10px;box-shadow:0 2px 8px rgba(30,40,35,.04)}
.mah-slot-card[data-slot]{cursor:pointer}
.mah-slot-card .t{font-weight:800;font-size:17.5px;color:#1f2937}
.mah-slot-card .s{font-size:13.5px;font-weight:700}
.mah-slot-card.ok .s{color:#16a34a}
.mah-slot-card.few .s{color:#d97706}
/* 自習の空きは○△✕ではなく「残り◯席」の数字で固定（2026-09-08 WP11・要望D3）。
   自習タブの青系（白地に #0369a1 = 5.9:1）。満席は .full と同じ赤 */
.mah-slot-card.seats .s{color:#0369a1}
.mah-slot-card.full{background:#fafafa;border-color:#eef1ef}
.mah-slot-card.full .t{color:#c3c9c5}
.mah-slot-card.full .s{color:#dc2626}
/* 「選択の上限」は満席とは意味が違う（枠は空いていて、自分が上限まで選んだだけ）。
   赤は本アプリでは「欠席・要対応」の色なので使わず、選択枚数の表示と同じ琥珀色にする */
.mah-slot-card.limit{background:#fffaf3;border-color:#f5e2cb}
.mah-slot-card.limit .t{color:#a89a88}
.mah-slot-card.limit .s{color:#b3630f}
/* 「すでにご予定があります」も満席とは意味が違う（席は空いていて、本人が別の予定で埋まっている）。
   赤は「欠席・要対応」の色なので使わない。淡い面＋濃い文字にする（4-5）。
   時刻も「何の予定か」も、押せなくても**読ませる**必要がある情報なので、
   どちらも 4.5:1 を超える濃さにしてある
   （#f4f6f5 の面で 時刻#5b6560=5.6:1／状態#334155=9.5:1）。2026-08-22 */
.mah-slot-card.busy{background:#f4f6f5;border-color:#e3e9e5}
.mah-slot-card.busy .t{color:#5b6560}
.mah-slot-card.busy .s{color:#334155}
.mah-slot-card.checked{border-color:#0284c7;background:#eff8fd;border-width:2.5px;padding:13px 14px}
/* ○△✕（新幹線の座席予約のような空き状況表示）は文字より少し大きく出す */
.mah-slot-card .s .sym{font-size:18px}

/* 季節講習の予約フォーム：オレンジ基調。自習予約（青）と同じ土台のまま色だけ差し替える。
   操作は同じで、今どちらの予約をしているかは色で分かる、という状態にするため */
.mah-ticket-theme .mah-cal-nav button{background:#fdf0e6;color:#ea580c}
.mah-ticket-theme .mah-cal-count{background:#ea580c}
.mah-ticket-theme .mah-slot-card.checked{border-color:#ea580c;background:#fff6ef}

/* 「◯コマ選択中／残り◯コマ」。確定ボタンの真上に置き、
   押してから「残りが足りません」と言われる事態を無くす */
.mah-select-count{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  margin:16px 0 10px;padding:11px 14px;border-radius:12px;background:#fdf5ee;border:1px solid #f7dcc4;
  font-size:14.5px;font-weight:800;color:#a24e14}
.mah-select-count.is-full{background:#fdeada;border-color:#f0b884}
.mah-select-count .note{font-weight:700;color:#b45309}

/* ===== 完了演出（クラッカー）と自動復帰　2026-08-13 タスクA-6 =====
   動かすのは transform / opacity だけにして、スマホでも軽く保つ。
   紙吹雪は左右14枚ずつ＝計28枚に固定し、演出後はJS側でDOMごと破棄する。
   will-changeは付けない（枚数分の合成レイヤー確保でかえって重くなるため）。
   「楽しさ」より先に「登録できたことが確実に伝わること」を優先する構成にしている。 */
#mah-view-success{
  position:relative;min-height:360px;text-align:center;padding:10px 0 20px;
  display:flex;flex-direction:column;justify-content:center;
}
.mah-success-card{position:relative;z-index:2}

.mah-success-icon{
  width:84px;height:84px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;
  background:#28a745;box-shadow:0 8px 24px rgba(40,167,69,.3);
  animation:mah-success-pop .42s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes mah-success-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

#mah-success-title{margin:0 0 14px;font-size:26.5px;font-weight:800;color:#16a34a}

/* 登録した内容の明細。「本当に登録できたのか」への回答はこの箱が担う */
.mah-success-detail{
  max-width:340px;margin:0 auto 16px;background:#fff;border:1px solid #eef1ef;
  border-radius:16px;box-shadow:0 2px 10px rgba(30,40,35,.05);overflow:hidden;
}
.mah-success-detail:empty{display:none}
.mah-success-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;border-top:1px solid #f2f4f3}
.mah-success-row:first-child{border-top:none}
.mah-success-row .k{font-size:13px;font-weight:800;color:#94a3b8;flex:0 0 auto}
.mah-success-row .v{font-size:18px;font-weight:800;color:#1f2937;text-align:right;font-variant-numeric:tabular-nums}
/* 明細の下に添える一文（お休みの取り消しの「この日は通常どおりご出席ください。」など。2026-09-12）。
   数字ではなく文章なので、明細の行（右寄せ・大きめ）とは分けて左寄せの本文として置く */
.mah-success-lead{padding:12px 15px;border-top:1px solid #f2f4f3;font-size:14px;font-weight:700;color:#1f2937;text-align:left;line-height:1.6}

/* 自動で戻ることを予告するバー（勝手に画面が変わった、と思わせないため） */
.mah-success-note{font-size:14.5px;color:#64748b;font-weight:700;margin:0 0 8px}
.mah-success-progress{width:180px;height:4px;margin:0 auto 18px;background:#e8ecea;border-radius:99px;overflow:hidden}
.mah-success-progress>span{
  display:block;height:100%;width:100%;border-radius:99px;background:#28a745;transform-origin:left center;
  animation:mah-success-countdown var(--mah-success-ms,2400ms) linear both;
}
@keyframes mah-success-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* テーマ色（振替=緑がデフォルト／季節講習=オレンジ／自習=青。赤は「欠席」の色なので使わない） */
#mah-view-success.is-blue   .mah-success-icon{background:#0284c7;box-shadow:0 8px 24px rgba(2,132,199,.3)}
#mah-view-success.is-blue   #mah-success-title{color:#0284c7}
#mah-view-success.is-blue   .mah-success-progress>span{background:#0284c7}
#mah-view-success.is-blue   #mah-success-now-btn{background:#0284c7;box-shadow:0 6px 18px rgba(2,132,199,.25)}
#mah-view-success.is-orange .mah-success-icon{background:#ea580c;box-shadow:0 8px 24px rgba(234,88,12,.3)}
#mah-view-success.is-orange #mah-success-title{color:#ea580c}
#mah-view-success.is-orange .mah-success-progress>span{background:#ea580c}
#mah-view-success.is-orange #mah-success-now-btn{background:#ea580c;box-shadow:0 6px 18px rgba(234,88,12,.25)}

/* --- クラッカー本体 --- */
/* カード(z-index:2)より前面に出す。以前は背面(z-index:1)に沈んでおり、
   紙吹雪の一部がカードやボタンの下に隠れて見えなかった（2026-08-17指摘） */
.mah-confetti{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:3}
.mah-confetti-origin{position:absolute;bottom:26%;width:0;height:0}
.mah-confetti-origin.left{left:16%}
.mah-confetti-origin.right{right:16%}
.mah-confetti-piece{position:absolute;left:0;top:0;animation:mah-confetti-x var(--dur) linear var(--delay) both}
.mah-confetti-piece>span{display:block;width:7px;height:11px;border-radius:2px;
  animation:mah-confetti-y var(--dur) linear var(--delay) both}
.mah-confetti-piece.round>span{width:8px;height:8px;border-radius:50%}

/* 横は等速、縦は「打ち上げ→頂点→加速して落下」。キーフレーム内でイージングを切り替えて重力っぽく見せる */
@keyframes mah-confetti-x{from{transform:translateX(0)}to{transform:translateX(var(--dx))}}
@keyframes mah-confetti-y{
  0%  {transform:translateY(0) rotate(0deg);opacity:1;animation-timing-function:cubic-bezier(.05,.75,.35,1)}
  42% {transform:translateY(var(--up)) rotate(var(--rot-mid));opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.62)}
  100%{transform:translateY(var(--fall)) rotate(var(--rot-end));opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .mah-confetti{display:none}
  .mah-success-icon,.mah-success-progress>span,.mah-nav-badge{animation:none}
  /* 画面の横スライドとメニューの下敷きの滑りも止める（切り替えは一瞬で行う。どれを選んでいるかの色は残る） */
  .mah-view-in-from-right,.mah-view-in-from-left{animation:none}
  .mah-nav-ink,.mah-nav-btn{transition:none}
}

/* ===== 予約直後、その日のカレンダーのマスをピコピコ光らせる（2026-08-17 遼様指示） =====
   以前は日別詳細の「コマのカード」を光らせていたが、それは廃止した。
   複数の日をまとめて予約できるようになり、戻り先に出せる1日分の詳細では
   入った予約を全部は見せられないため、月間カレンダー上で「今しがた入れた日」が
   一目で分かるようにしている（該当する日のマスはすべて光る）。
   カードの登場アニメ（旧 mah-tl-new-in）も一緒に廃止した。日別詳細は日付を選び直すたびに
   作り直されるので、そのつど個々のカードがふわっと動くと「新しく入った」の意味を失ううえ、
   日付マスの発光と2箇所で注意を奪い合ってしまうため。

   光らせるのは疑似要素のリングだけで、マスの背景・枠線・影には触れない。
   そのため「本日=数字だけ丸く塗る」「選択日=マスを緑で塗る」と重なっても全部読み取れる。
   動かすのは transform / opacity のみなのでスマホでも軽い。 */
/* 緑（振替）だけは選択日の緑の塗りと同系色で紛れるため、リングをやや濃い緑にして
   外側に白の縁を1本入れ、塗りとの境目を作る（2026-08-17 敵対的レビューで発見） */
.mah-cal-day-new{--mah-glow:#0f7a3d;--mah-glow-soft:rgba(15,122,61,.35)}
.mah-cal-day-new.is-blue{--mah-glow:#0284c7;--mah-glow-soft:rgba(2,132,199,.35)}
.mah-cal-day-new.is-orange{--mah-glow:#ea580c;--mah-glow-soft:rgba(234,88,12,.35)}
/* 発光クラスが付いたマスは、リングが隣のマスに隠れないよう前面に出す。
   マスは不透明な背景を持つので、重ね順を上げないと後ろの兄弟に塗り潰される
   （狭い画面ほど隙間が詰まって顕著になる） */
.mah-cal-day-new{z-index:1}
.mah-cal-day-new::after{
  content:'';position:absolute;inset:var(--mah-ring-inset);border-radius:var(--mah-ring-radius);pointer-events:none;
  border:2.5px solid var(--mah-glow);
  box-shadow:0 0 10px 2px var(--mah-glow-soft), 0 0 0 1.5px #fff inset;
  opacity:0;
  animation:mah-cal-day-blink 820ms ease-out 3 forwards;
}
/* ピコピコ＝控えめな明滅を3回。1回では見逃すが、延々と光り続けると落ち着かないので回数で止める
   （JS側も数秒後にカレンダーを描き直して発光クラスごと外す）。
   forwards と opacity:0 の初期値が無いと、3回終わった瞬間に「くっきり表示」へ跳ね戻り、
   JSがクラスを外すまで静止したリングが残ってしまう */
@keyframes mah-cal-day-blink{
  0%  {opacity:0;transform:scale(.86)}
  35% {opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.14)}
}
/* 明滅を止める指定は、上の定義より後に置かないと打ち消せない（同じ詳細度なら後勝ちのため）。
   ただし「どの日に予約が入ったか」は演出ではなく情報なので、動かないリングとしては残す
   （数秒後にJS側がカレンダーを描き直して消える） */
@media (prefers-reduced-motion: reduce){
  .mah-cal-day-new::after{animation:none;opacity:1;transform:none}
}

/* ===== 振替先が未定の欠席が残っている日を、赤いリングで光らせ続ける（2026-08-17 遼様指示） =====
   遼様の言葉：「残っている日付のところを赤枠をつけて、ピカピカとふわっと光らせる」
   「イメージとしては、振替や自習が完了した日付を発光させるのの赤いバージョン」。
   狙いは意図的に“目障り”な状態を作って、期限が来る前に振替先を決めてもらうこと
   （振替を消化せずに権利が消えるのを防ぐ、というのが今回の全ての出発点）。

   作りは完了直後の発光（.mah-cal-day-new::after）をそのまま流用している：
   ・帯（バー）を増やさないのでカレンダーの高さは1pxも変わらない
   ・マスの背景・枠線・影に触れないので「本日=数字だけ丸く塗る」「選択日=マスを緑で塗る」と共存する
   完了直後の発光との違いは3点だけ。色が赤／回数で止めずに光り続ける／疑似要素が ::before。
   ::before を使うのは、同じ日に「たった今予約した」発光（::after）が重なりうるため。
   両方を ::after で描くと後から付いたほうに潰され、片方の情報が丸ごと消える。 */
.mah-cal-day-pending{ z-index:1 } /* リングが隣のマス（不透明な背景を持つ）に隠れないよう前面へ */
.mah-cal-day-pending::before{
  content:'';position:absolute;inset:var(--mah-ring-inset);border-radius:var(--mah-ring-radius);pointer-events:none;
  /* 枠線と発光は同じ1つのチャンネル値から作る（片方だけ直すと2色のリングになる）。
     2026-09-11 スタッフテスト指摘：点滅が気づきにくかったため、線を2.5px→3pxへ太くし、
     発光の輪郭も9px→11pxへひとまわり強くした（発光の濃さ=42%は共有部品と同じ値のまま） */
  border:3px solid rgb(var(--mah-pending-rgb));
  /* 内側の白い線は、選択日（マスが緑一色）に重なったときに赤枠との境目を作るためのもの */
  box-shadow:0 0 11px 2.5px rgb(var(--mah-pending-rgb) / 42%), 0 0 0 1.5px #fff inset;
  animation:mah-cal-day-pending 2s ease-in-out infinite;
}
/* 完了直後の発光（820ms×3回）と違い、こちらは止めない。ただし目がチカチカしない速さにする
   （検査M-2が「2秒以上」を固定値として見ている。2秒未満にはしない）。
   2026-09-11：2.6秒→2秒（下限）に詰め、谷を opacity:.5→.35 まで落として、以前より
   気づきやすい強さに調整（谷でも赤枠は読める＝「どの日か」という情報は常に残る）。
   動かすのは opacity だけなので、常時アニメーションでもスマホで軽い */
@keyframes mah-cal-day-pending{
  0%,100%{opacity:.35}
  50%    {opacity:1}
}
/* 同じ日に「未消化の欠席（赤）」と「たった今入れた予約（テーマ色）」が重なった場合。
   2つのリングが同じ位置だと後ろ側が完全に隠れるので、完了直後の発光のほうだけマスの内側へ寄せて
   二重丸にする。外側＝赤（消えない）／内側＝テーマ色（数秒で消える）と役割が分かれて読める。
   寸法は外側リングからの相対で出すので、狭い画面向けの上書きにも自動で追従する */
.mah-cal-day-pending.mah-cal-day-new::after{
  inset:calc(var(--mah-ring-inset) + 5px);
  border-radius:calc(var(--mah-ring-radius) - 5px);
}
/* 明滅は止めるが、赤いリング自体は残す。
   「どの日が未消化か」は演出ではなく情報なので、動きを止めても消してはいけない */
@media (prefers-reduced-motion: reduce){
  .mah-cal-day-pending::before{animation:none;opacity:1}
}

/* 表示中の月の外に「振替先が未定」の欠席が残っているときに、月送りボタンへ出す印。
   赤いリングは表示中の月にしか描けないので、印が無いと「欠席は先月・期限は今月末」という
   一番危ない組み合わせを見落とす。

   【2026-08-22】ここは 7px の赤い丸だけだった＝**色でしか伝えていなかった**
   （UI指示書 4-1、しかも付録に「状態を7pxの丸で表した」として同じ失敗が載っている）。
   本部の振替管理は同じ場面で「未」の文字を出しているので、そちらに合わせる。
   丸ではなく角丸の札にするのは、文字を入れると丸には収まらないため
   （形も本部の .sc-cal-nav-pending と同じにしてある）。
   ボタンは 32x32 の固定寸法なので、札は絶対配置で外側へ逃がす。
   こうすると押せる面積も、カレンダーの高さも 1px も変わらない
   （下部メニューの .mah-nav-badge と同じ作法）。 */
.mah-cal-nav button{ position:relative }
.mah-cal-nav-pending{
  position:absolute;top:-7px;right:-8px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:6px;
  background:rgb(var(--mah-pending-rgb));color:#fff;
  font-size:13px;font-weight:800;line-height:1;font-style:normal;letter-spacing:0;
  /* 地の色で縁取りして、シェブロンの上に重なっても札の輪郭が読めるようにする */
  box-shadow:0 0 0 1.5px var(--mah-page-bg);
  pointer-events:none;
}
/* 【2026-08-22】札は明滅させない（本部＝共有部品の .sc-cal-nav-pending と同じ静止の札にする）。
   もとは日付マスの赤いリングと同じ mah-cal-day-pending を札にも掛けていたが、
   キーフレームの谷は opacity:.5 なので、**白文字＋赤地が 2.33:1 まで沈んで読めなくなる**。
   リングは「線が1本あるかどうか」なので谷でも成立するが、札は文字が本体なので成立しない。
   明滅させるのはカレンダーのマスのリングだけ、と役割を分ける
   （UI指示書 3-3 は「谷でも情報として成立していること」を条件にしている）。
   ＊「押せない月送りでは札を沈める」（旧 opacity:.55）も一緒にやめた。
     白文字が 2.68:1 になって同じ理由で読めなくなるうえ、
     札が出る＝その向きの月に予定が残っている＝その月へは進める、なので
     「押せない＋札あり」はそもそも起こらない（本部も同じく沈めていない）。 */

/* ===== 広い画面（タブレット・PC）向けの微調整 =====
   器の幅は --mah-shell-max（640px）で頭打ちになるので、ここでやるのは
   「幅に余裕があるぶん、文字とマスを少しだけゆったりさせる」ことだけ。
   カレンダーのマスは1辺を大きく増やさない：横に広がったぶん高さも少し足して
   正方形に近い形を保つだけに留める（大画面でカレンダーが別物に肥大するのを防ぐ）。 */
@media (min-width: 560px) {
  #mah-app { font-size: 18px; }
  .mah-cal-grid { gap: 8px; }
  .mah-cal-day { min-height: 84px; }
  .mah-cal-d { font-size: 15.5px; }
  .mah-cal-bar { height: 21px; font-size: 14px; }
  .mah-cal-bar .n { font-size: 13.5px; }
  .mah-cal-summary-box .num { font-size: 31px; }
  .mah-cal-summary-box .label { font-size: 13.5px; }
  .mah-cal-month-label { font-size: 19px; }
}

/* ===== 狭いスマホ（iPhone SE など 400px以下）向けの調整 =====
   SE第1世代の320pxでも横スクロールが出ないこと、
   タップ対象が小さくなりすぎないことを優先する。
   2026-08-22：余白（--mah-pad-x / --mah-pad-t）は基本ルール側の clamp が
   画面幅に応じて連続的に決めるようになったので、ここでは指定しない。
   カード（角丸・影）の打ち消しも、カードそのものを廃止したので不要になった。 */
@media (max-width: 400px) {
  #mah-bottomnav { max-width: 100%; }

  /* カレンダーは間隔を詰めてマス目を大きく保つ。
     日付は .mah-cal-d（丸）が持つので、文字の大きさはそちらに指定する */
  .mah-cal-grid { gap: 4px; }
  /* 隙間が狭くなるぶんリングも内側に寄せる（外に出しすぎると隣のマスに削られる）。
     角丸もマスと同心になるよう合わせる。
     赤（未消化の欠席）とテーマ色（予約直後）の2種類のリングが同じ変数を見ているので、
     ここを直せば両方に効く＝片方だけ寸法がズレる事故が起きない */
  .mah-cal-day { border-radius: 10px; --mah-ring-inset: -2px; --mah-ring-radius: 12px; }
  .mah-cal-d { font-size: 13.5px; }

  .mah-tl-item { padding: 14px; border-radius: 14px; }
  .mah-card { padding: 13px; font-size: 18px; }

  /* 操作ボタンは1行に1つずつ。中途半端な折り返しをやめ、指で押しやすくする */
  .mah-tl-actions { flex-direction: column; }
  .mah-act-btn { min-width: 0; width: 100%; padding: 12px 10px; }

  .mah-cal-summary { gap: 6px; }
  .mah-cal-summary-box { padding: 10px 6px; }
  .mah-cal-summary-box .num { font-size: 24px; }
  .mah-cal-summary-box .label { font-size: 13px; }

  .mah-notice { padding: 13px; }
  .mah-ticket-card { padding: 13px 14px; }
  .mah-success-detail { max-width: 100%; }
}

/* SE第1世代（320px）。ここまで狭いと3列の集計が窮屈になるので文字をさらに詰める。
   余白は基本ルールの clamp（下限10px）が既にこの幅ぶんまで詰めている */
@media (max-width: 340px) {
  .mah-cal-grid { gap: 3px; }
  .mah-cal-day { padding: 4px 2px; --mah-ring-inset: -1.5px; --mah-ring-radius: 11.5px; }
  /* この幅ではマスの余白が4pxしかないので、内側リング（既定は外側+5px）が
     「授業」「自習」の帯に食い込んで左右の端を隠してしまう。
     二重丸として読み分けられる最小限（+3px）まで詰める */
  .mah-cal-day-pending.mah-cal-day-new::after{
    inset: calc(var(--mah-ring-inset) + 3px);
    border-radius: calc(var(--mah-ring-radius) - 3px);
  }
  .mah-cal-d { font-size: 13px; }
  /* マスの横幅が40px弱まで縮むので、帯の文字も一段詰める。
     ここは一括引き上げ（下限13px）の例外：帯の内寸は約32pxしかなく、13pxだと
     「自習2」（2文字+数字）の数字が右端で切れる。11.5pxが切れずに収まる上限。
     マスの高さ（80px）は変えない：選んだ日だけ行が伸びるのを防ぐための固定値のため */
  .mah-cal-bar { font-size: 11.5px; }
  .mah-cal-bar .n { font-size: 11px; }
  .mah-cal-summary-box .num { font-size: 21.5px; }
  .mah-ticket-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .mah-btn-mini { width: 100%; }
}

/* ===== 汎用モーダル（alert/confirm の置き換え）===== */
.mah-modal-overlay {
  position: fixed; inset: 0; background: rgba(31,41,55,.45); z-index: 9700;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* 画面より高い中身（「ホーム画面に追加する方法」の3つの手順など）は枠の中で縦にスクロールさせる。
   外側の重ねは fixed で中央寄せなので、高さの上限が無いと枠が上下にはみ出し、×・見出し・「閉じる」が画面の外に出て
   押せなくなっていた（2026-10-10 点検の指摘5。320×454 で枠の上端 -116px）。紹介コードのカード（.mah-referral-card）と同じ作法。
   100dvh はアドレス欄の出入りに合わせた見えている高さ（対応しない古い端末は前の行の 100vh を使う） */
.mah-modal-card {
  position: relative;   /* 右上の×（.mah-modal-x）の基準 */
  background: #fff; border-radius: 20px; padding: 26px 22px 22px; width: 100%; max-width: 340px;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,.25); animation: mah-modal-pop .28s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes mah-modal-pop { 0%{transform:scale(.85);opacity:0} 100%{transform:scale(1);opacity:1} }
.mah-modal-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.mah-modal-icon.ok   { background:#e6f6ec; color:#16a34a; }
.mah-modal-icon.warn { background:#fef3e2; color:#d97706; }
.mah-modal-icon.ng   { background:#fde3e1; color:#dc2626; }
.mah-modal-card h3 { margin: 0 0 8px; font-size: 21.5px; font-weight: 800; color: #1f2937; }
.mah-modal-card #mah-modal-body { font-size: 15.5px; color: #64748b; line-height: 1.6; margin-bottom: 20px; }
.mah-modal-actions { display: flex; gap: 10px; }
.mah-modal-actions .mah-btn { margin: 0; }
/* 右上の×（2026-08-30 遼様「閉じずに前の画面に戻れない場合がある」）。
   背景タップ・Esc と合わせて、どのポップアップも同じ3つで閉じられる。
   JS（initModalDismiss）が全ポップアップに同じものを差し込むので、画面ごとに作法が違うことは起きない。
   当たり判定は44px四方（指で押す最小サイズ）。見た目は薄い×だけにして本文の邪魔をしない。
   役割は本部アプリの .modal-x と同じ（薄い文字色→触れたら濃く・面が付く）で、色はこのアプリのもの */
.mah-modal-x {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: none;
  color: #94a3b8; font-size: 22px; cursor: pointer; font-family: inherit; line-height: 1;
}
.mah-modal-x:hover, .mah-modal-x:active { background: #f1f5f9; color: #1f2937; }
.mah-modal-x:focus-visible { outline: 2px solid #28a745; outline-offset: 1px; }

/* 期限アラートの中に出す「どのコマがあと何日か」の一覧。
   モーダル本文は中央寄せだが、この一覧だけは左（日時）と右（残り日数）を突き合わせて
   読むものなので、行の中で両端に寄せる */
.mah-deadline-list { text-align: left; border: 1px solid #f4d6d4; border-radius: 12px; overflow: hidden;
  background: #fffafa; margin: 12px 0 2px; }
.mah-deadline-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-top: 1px solid #f8e5e3; font-size: 14.5px; }
.mah-deadline-row:first-child { border-top: none; }
.mah-deadline-row .d { font-weight: 700; color: #1f2937; }
.mah-deadline-row .r { font-weight: 800; color: #dc2626; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 期限を過ぎた分は保護者の操作では登録できない（振替先は明日以降しか選べないため）。
   まだ間に合うものと同じ赤にすると区別が付かないので、濃い赤に沈めて別物として見せる */
.mah-deadline-row .r.is-over { color: #7f1d1d; }
.mah-deadline-more { font-size: 13px; color: #94a3b8; padding: 8px 12px; border-top: 1px solid #f8e5e3; }

/* ===== お知らせタブ（2026-08-13 遼様決定：3画面構成＋既読は明示ボタンのみ） ===== */
/* フローティングメニューの「未読」赤バッジ。スマホアプリの通知バッジのイメージ。
   要対応タスク・未読お知らせがゼロになるまで消えない（読み流し防止）。
   文言はスタッフアプリと揃えて「未読」に統一した（2026-08-17 遼様指示） */
/* .mah-nav-btn の position:relative（バッジを置くため）は、タブの定義の側にまとめた（2026-09-19） */
/* 2026-08-29 遼様「通知のウォッチは小さく読みづらい」→ 文字9.5px→13px・
   余白も広げてひと回り大きく（高さ約21px）。大きくなったぶん、タブの文字に
   かぶらないよう上外側へ逃がす（top / right を調整） */
.mah-nav-badge{animation:mah-badge-bounce 3.2s ease-in-out infinite;position:absolute;top:-4px;right:calc(50% - 26px);min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#dc2626;color:#fff;font-size:13px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(220,38,38,.45);pointer-events:none}
/* 未読が残っている間、数秒おきに小さく跳ねて気づきやすくする（2026-08-17指示）。
   常時動かすと煩わしいので、サイクルの前半だけ2回跳ね、後半は静止させる */
@keyframes mah-badge-bounce{
  0%,100%{transform:translateY(0)}
  4%{transform:translateY(-4px)}
  8%{transform:translateY(0)}
  12%{transform:translateY(-2px)}
  16%{transform:translateY(0)}
}
/* 塾からのお知らせカード */
.mah-notice-card{background:#fff;border:1px solid #eef1ef;border-radius:16px;padding:15px 16px;margin-bottom:10px;
  box-shadow:0 2px 10px rgba(30,40,35,.05)}
.mah-notice-card.is-read{opacity:.72}
.mah-notice-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mah-notice-card-title{font-weight:800;font-size:17px;color:#1f2937}
.mah-unread-chip{background:#dc2626;color:#fff;font-size:13px;font-weight:800;padding:4px 10px;border-radius:99px;flex:0 0 auto}
.mah-read-chip{background:#e6f6ec;color:#16a34a;font-size:13px;font-weight:800;padding:4px 10px;border-radius:99px;flex:0 0 auto}
.mah-notice-card-body{font-size:15px;color:#475569;margin-top:8px;line-height:1.65}
.mah-notice-card-date{font-size:13px;color:#94a3b8;margin-top:8px}

/* チケットで使えない日時（2026-08-31 WP5b、決定24）。
   チケットカードの一覧と、予約画面で選べない時間帯のカード。
   「満席（赤）」「ご予定あり（灰）」とは意味が違う＝本部がこのチケットでは受けないと決めた時間帯。
   カードは予定ありと同じ淡い面にし、状態の文字で区別する（色だけで伝えない） */
.mah-ticket-blocks{font-size:13px;color:#b45309;margin-top:6px;line-height:1.55;font-weight:700}
.mah-ticket-blocks i{margin-right:3px}
.mah-slot-card.restricted{background:#f4f6f5;border-color:#e3e9e5}
.mah-slot-card.restricted .t{color:#5b6560}
.mah-slot-card.restricted .s{color:#9a3412}

/* ===== お友達紹介コード（2026-09-11 遼様のご指示）=====
   お知らせのいちばん上に出す入口ボタンと、カードを見せるポップアップ。
   入口は「うれしい知らせ」なので、欠席・期限で使う赤やオレンジとは別の緑にし、
   紙のカードと同じ山吹色の枠を細く回して、押した先に何が出るかを色で予告する */
.mah-referral-open{
  background:linear-gradient(135deg,#1c7a45,#0f5f36);
  border:2px solid #d9a441;
  box-shadow:0 6px 18px rgba(15,95,54,.25);
  margin-bottom:6px;
}
.mah-referral-open i{margin-right:6px;color:#f4cd72}

/* カードのポップアップ。縦長の絵を出すので、狭い端末では中身を縦にスクロールさせる
   （画面からはみ出して「閉じるボタンが押せない」を作らない） */
.mah-referral-card{max-width:380px;max-height:calc(100vh - 48px);overflow-y:auto}
.mah-referral-lead{font-size:14.5px;color:#475569;line-height:1.6;margin:0 0 14px}
/* Canvas は幅・高さの属性（1080×1920）が実寸。画面には縮めて出す。
   max-width と max-height を両方掛けると、縦横の比を保ったまま入る側に合わせて縮む */
.mah-referral-canvas{
  display:block;margin:0 auto 14px;width:auto;height:auto;
  max-width:100%;max-height:56vh;border-radius:14px;
  box-shadow:0 8px 24px rgba(15,95,54,.22);
}
/* 共有も保存も使えない端末への案内（押しても何も起きないボタンを出さないための3つ目の道） */
.mah-referral-hint{
  font-size:14px;color:#475569;line-height:1.6;margin:0 0 12px;
  background:#f4f7f9;border-radius:12px;padding:11px 12px;text-align:left;
}
.mah-referral-card .mah-btn{margin-top:8px}

/* ===== 案内の欄（ホーム画面に追加・スマホへの通知。2026-10-10 遼様「お知らせの一番上に表示して目立たせて」）=====
   お知らせタブのいちばん上。白い面のお知らせのカードより目立つよう、淡い緑の面＋緑の枠＋大きめの見出し。
   緑は保護者アプリの主の色（.mah-btn-green の #28a745・見出しの濃い緑 #166534）で、新しい系統の色は作らない。
   飾りのアイコンは付けない（ボタンの文字だけで通じる形。2026-09-19「アイコンを使う場所を減らす」）。
   文字は 13px を下限（本文 15.5〜16px・いちばん下の小さな文字 13.5px）。押す所は高さ 44px 以上 */
.mah-app-guide{background:#f0faf3;border:2px solid #28a745;border-radius:18px;padding:12px 16px 16px;margin:0 0 14px;
  box-shadow:0 6px 18px rgba(40,167,69,.12)}
.mah-app-guide-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mah-app-guide-title{margin:0;font-size:19px;font-weight:800;color:#166534;line-height:1.4}
/* 「あとで」は小さく控えめに（押すとこの端末では14日畳む）。指で押せる高さは保つ */
.mah-app-guide-later{flex:0 0 auto;background:none;border:none;color:#475569;font-size:14px;font-weight:700;
  padding:0 6px;min-height:44px;cursor:pointer;font-family:inherit;text-decoration:underline}
.mah-guide-step{padding-top:8px}
/* 2つとも出ているときだけ区切り線（片方が隠れているときに線だけ浮かないよう、隠れていない1つ目の直後に限る） */
#mah-install-step:not(.mah-hidden) + #mah-push-section{border-top:1px solid #cfe9d7;margin-top:14px;padding-top:14px}
.mah-guide-step-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;color:#1f2937;margin:0 0 6px;line-height:1.4}
.mah-guide-num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:#28a745;color:#fff;font-size:16px;font-weight:800}
.mah-guide-desc{font-size:15.5px;color:#334155;margin:0 0 4px;line-height:1.6}
.mah-guide-btn{margin-top:10px;padding:13px;font-size:17px;min-height:48px}
.mah-push-status{font-weight:800;font-size:16px;color:#1f2937;margin:0 0 6px;line-height:1.5}
.mah-push-desc{font-size:15.5px;color:#334155;margin:0 0 8px;line-height:1.6}
.mah-push-note{font-size:14px;color:#a24e14;background:#fdf5ee;border:1px solid #f7dcc4;border-radius:10px;
  padding:9px 11px;margin:0 0 10px;line-height:1.6}
.mah-push-btn{margin-top:10px;padding:13px;font-size:17px;min-height:48px}
/* iPhone でホーム画面のアプリでないうちの「通知を受け取る」（2番目の手順）。押せるが、1番目より控えめに見せる */
.mah-push-btn.mah-push-btn-wait{background:#fff;color:#15803d;border:2px solid #28a745;box-shadow:none}

/* いちばん下の小さな残り（受け取っている状態と「通知を止める」／畳んでいる間の入口） */
.mah-guide-foot{margin:22px 0 6px;text-align:center}
.mah-push-foot-status{font-size:13.5px;color:#64748b;margin:0;line-height:1.6}
.mah-guide-link{background:none;border:none;color:#15803d;font-size:14px;font-weight:700;text-decoration:underline;
  padding:0 8px;min-height:44px;cursor:pointer;font-family:inherit}

/* 「ホーム画面に追加する方法」のポップアップ（汎用ポップアップの本文）。大きな番号つきの3つの手順 */
.mah-install-steps{list-style:none;counter-reset:mah-install;margin:4px 0 14px;padding:0;text-align:left}
.mah-install-steps li{counter-increment:mah-install;position:relative;min-height:38px;padding:5px 0 12px 48px;
  font-size:16px;color:#1f2937;line-height:1.6}
.mah-install-steps li::before{content:counter(mah-install);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:#28a745;color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mah-install-after{margin:0;text-align:left;font-size:15px;font-weight:700;color:#166534;background:#f0faf3;
  border-radius:12px;padding:10px 12px;line-height:1.6}