/* 予約帳 教室の画面と保護者のページ（お客のページ）
   見た目：販売ページ（lp.css）と同じ組み方（カズ 10/24「操作画面も LP に合わせて改善して」）。
   細い罫線で区切る紙の帳票。朱は注意の印（残りが少ないときの「残り n」・必須・差・エラー・取り消し）だけ。
   番号は「算用数字＋細い縦の罫線」（.num）の一本。記号（⚠ など）は使わず、意味は言葉で出す（アヤ 10/24 見た目 v2 検査）。
   書体：ヒラギノ角ゴシックを基準にする（カズ 10/24）。見出しは W6（600）、本文は W3（400）。
   Windows／Android は近いゴシック（Yu Gothic・Meiryo・Noto Sans）。外（Google Fonts など）からは何も読まない。
   色：ここの :root は「はじめの青」（theme.py の M）。教室の「ふだんの色」や期の色が別のときは、
   /theme.css?t=... が :root の同じ変数を上書きする（app/theme.py）。色の値はここに直書きせず、変数で使う。
   使わないもの：角丸の箱・影・グラデーション・絵文字・アイコンフォント・長いダッシュ */
:root {
  --paper: #ffffff;      /* 地 */
  --paper-2: #eef3f8;    /* 少し濃い地（選んだ行・押す前） */
  --field: #ffffff;      /* 入力欄とコマのボタンの地 */
  --ink: #1f4e79;        /* 文字 */
  --ink-h: #476e91;      /* 文字の色のボタンにのせたとき */
  --ink-2: #4a6a8a;      /* 薄い字（地の上で 4.5:1 以上・満席と受付終了のコマの時刻もこれ） */
  --rule: #d9e2ec;       /* 罫線 */
  --rule-2: #ecf0f6;     /* 表の中の細い罫線 */
  --shu: #2f6fb0;        /* 朱：注意の印だけ（地の上で 4.5:1 以上） */
  --shu-pale: #e0e9f3;   /* 朱のボタンにのせたとき */
  --shu-on: #c1d4e7;     /* 文字の色の塗りの上に出す朱（選んだコマの「残り n」） */
  --off-bg: #eff3f6;     /* 休みの日（薄い灰） */
  --b: 600;              /* 太字＝ヒラギノ W6 */
  --head: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo",
    "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo",
    "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  line-break: strict;
  font-variant-emoji: text;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--paper-2); color: var(--ink); }

b, strong { font-weight: var(--b); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .24em; }
a:hover { text-decoration-thickness: 2px; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

/* ------------------------------------------------------------------ 保護者のページ */
/* 上の固定の帯：文字の色の地に白い字 */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  min-height: 48px;
  padding: 8px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .06em;
}
.bar b { margin-left: 2px; font-family: var(--head); font-size: 21px; font-weight: var(--b); letter-spacing: .02em; }
.bar-sep { opacity: .6; }
.bar-mark { min-width: 1.5em; font-size: 14px; }
/* 回数がちがうとき：朱の小さな札（墨の帯の上で目に入るように） */
.bar.warn .bar-mark { padding: 2px 8px; border-radius: 2px; background: var(--shu); color: #fff; }

.preview-bar {
  padding: 8px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
  font-size: 14px;
  font-weight: var(--b);
  text-align: center;
}

.toast {
  position: sticky;
  top: 48px;
  z-index: 19;
  margin: 0;
  padding: 10px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 15px;
  text-align: center;
}

/* 見出し */
.head { padding: 10px 0 0; }
.school { margin: 0; color: var(--ink-2); font-size: 14px; letter-spacing: .06em; }
h1 {
  margin: 2px 0 8px;
  color: var(--ink);
  font-family: var(--head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
  font-feature-settings: "palt";
}
.lead { margin: 0 0 10px; line-height: 1.65; }
/* 期間・お休み・締切：紙の帳票のように横罫線だけ */
.period {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
.period dt, .period dd { padding: 5px 0; border-bottom: 1px solid var(--rule); }
.period dt { padding-right: 18px; font-family: var(--head); font-weight: 600; letter-spacing: .06em; }
.period dd { margin: 0; }

/* 段（もとのカード）：角丸と影をやめ、横罫線で区切る */
.card {
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
/* 上の帯や期間の表の罫線と、段の罫線が二重にならないように */
.wrap > .card:first-child, .form > .card:first-of-type { border-top: 0; }
.wrap > .card:first-child, .form > .card:first-of-type { padding-top: 18px; }
.btns + .card { margin-top: 24px; }
.card h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
  font-feature-settings: "palt";
}
.card h3 {
  margin: 20px 0 8px;
  color: var(--ink);
  font-family: var(--head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}
/* 段の番号：太字の数字と、細い縦の罫線 */
.num {
  flex: none;
  min-width: 1.4em;
  padding-right: 12px;
  border-right: 1px solid var(--ink);
  font-family: var(--head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.hint { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
/* お知らせ：左の細い線だけ（注意は朱の線） */
.note {
  margin: 14px 0;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--ink);
}
.note.warn { border-left-color: var(--shu); }
.notice {
  margin: 12px 0 0;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--ink);
  font-size: 15px;
}

/* 入力 */
.field { margin: 0 0 18px; }
.field:last-child { margin-bottom: 0; }
.lab { display: block; margin: 0 0 4px; font-weight: var(--b); }
/* 「必須」：朱の小さな字 */
.lab em {
  margin-left: 10px;
  color: var(--shu);
  font-size: 12px;
  font-style: normal;
  font-weight: var(--b);
  letter-spacing: .1em;
  vertical-align: 1px;
}
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"],
select, textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* iOS のズームを防ぐ */
  letter-spacing: .02em;
}
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: 1; }   /* 薄い字。入れた字とは見分けがつく */
input:disabled, select:disabled, textarea:disabled { border-color: var(--rule); background: var(--paper-2); color: var(--ink-2); }
textarea { min-height: 64px; resize: vertical; }
input[type="date"] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.count-wrap { display: flex; align-items: center; gap: 8px; }
.count-wrap input { width: 110px; }

/* 切り替えのボタン（コース・期の種類）：細い線。選んだものは墨の塗り */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg.cols-1 { grid-template-columns: 1fr; }
.seg.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-item { position: relative; display: block; }
.seg-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-item span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  height: 100%;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
  font-weight: var(--b);
  line-height: 1.3;
  letter-spacing: .04em;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.seg-item input:checked + span { background: var(--ink); color: #fff; }
.seg-item input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 期の種類（季節の習い事／月の習い事／週の習い事）：360px で1行に収める */
.seg.cols-3 .seg-item span { padding: 6px 2px; font-size: 14px; letter-spacing: 0; }

/* 日付ごとの行：横罫線 */
.days { border-top: 1px solid var(--ink); }
.day {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
/* 週の頭（月曜）は少し濃い罫線（前の行の罫線に重ねる） */
.day.wk { margin-top: -1px; border-top: 1px solid var(--ink-2); }
.day.wk:first-child { margin-top: 0; border-top: 0; }
.dl { padding-left: 2px; font-size: 15px; font-weight: var(--b); white-space: nowrap; letter-spacing: 0; }
/* 曜日はどの日も薄い墨（日曜も朱にしない。朱は注意だけ。休みは灰の帯で伝わる） */
.dl small { margin-left: 1px; color: var(--ink-2); font-size: 13px; font-weight: 400; }
/* 休みの日：薄い灰 */
.day.closed { background: var(--off-bg); color: var(--ink-2); }
.day.closed .dl { padding-left: 8px; }
.day.closed .dl small { color: inherit; }
.days.weekly .day { padding: 8px 0; }   /* 週間の通塾予定表（月〜日の7行） */
.off { padding: 10px 4px 10px 8px; font-size: 15px; }
.cellwrap { min-width: 0; }
.cells { display: grid; gap: 6px; }
.cells.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cells.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cells .none { grid-column: 1 / -1; padding: 10px 4px; color: var(--ink-2); font-size: 14px; }
/* その時刻にコマがない枠：薄い点線の空き枠（押せるボタンの墨の線と見分けがつくように） */
.ph { min-height: 46px; border: 1px dashed var(--rule); border-radius: 2px; }
/* コマのボタン：細い線。選んだら墨の塗りに白い字 */
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 46px;
  padding: 4px 2px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: var(--b);
  line-height: 1.15;
  letter-spacing: -.02em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* 「残り n」：ふだんは薄い墨。残りが少ないとき（app.js が .low をつける：残り3以下か定員の4分の1以下）だけ朱 */
.slot .rem { margin-top: 2px; color: var(--ink-2); font-size: 12px; font-weight: var(--b); letter-spacing: .04em; }
.slot .rem.low { color: var(--shu); }
.slot.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.slot.on .rem { color: rgba(255, 255, 255, .78); }
.slot.on .rem.low { color: var(--shu-on); }
.slot.on .t::before { content: "\2713"; margin-right: 1px; font-size: 13px; }
/* 360px で1日に4コマ並ぶときは、✓ を出すと時刻が2行に割れる。墨の塗りだけで選んだと分かるので ✓ を外す */
@media (max-width: 559px) {
  .cells.cols-4 .slot.on .t::before { content: none; }
}
/* 満席・受付終了のコマ：枠は罫線の色、塗りなし。時刻は薄い墨（5.1:1）＋打ち消し線、「満席」の2文字は墨 */
.slot:disabled, .slot.full { border-color: var(--rule); background: transparent; color: var(--ink-2); cursor: not-allowed; }
.slot.full .t, .slot:disabled:not(.on) .t { text-decoration: line-through; text-decoration-thickness: 1px; }
.slot.full .rem { color: var(--ink); }
/* 受付終了のあと、変更用リンクで開いた自分のコマ（選んだまま押せない）：塗りが外れるので「残り n」も生成りの上の色に */
.slot.on:disabled .rem { color: var(--ink-2); }
.slot.on:disabled .rem.low { color: var(--shu); }
@media (hover: hover) {
  .slot:not(:disabled):not(.on):hover, .seg-item input:not(:checked) + span:hover { background: var(--paper-2); }
}

/* ハニーポット（画面に出さない） */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* エラー：朱の線と朱の字 */
.err {
  margin: 14px 0;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--shu);
  color: var(--shu);
  font-weight: var(--b);
}
.err p { margin: 0; }
.err ul { margin: 4px 0 0; padding-left: 1.2em; }

/* 送るボタン：墨の塗り・角 2px・影なし */
.send {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 20px 0 10px;
  padding: 10px 16px;
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: var(--b);
  line-height: 1.4;
  letter-spacing: .14em;
  cursor: pointer;
}
/* 押せないとき（受付終了・送っている間）：罫線の色の地に墨の字（9.9:1） */
.send:disabled { background: var(--rule); color: var(--ink); cursor: not-allowed; }
/* 副ボタン：墨の細い線 */
.sub {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 12px 0 0;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: var(--b);
  letter-spacing: .06em;
  cursor: pointer;
}
.tel { margin: 10px 0 0; font-size: 15px; text-align: center; }
.tel a, .tel-big a { font-weight: var(--b); white-space: nowrap; }
.tel-big { margin: 10px 0 0; font-size: 22px; letter-spacing: .04em; text-align: center; }
/* 受付の終わり：朱の線 */
.closed-box { margin: 8px 0 16px; padding: 14px 0 14px 14px; border-top: 0; border-left: 2px solid var(--shu); }
.closed-box p { margin: 0; }

/* 送ったあと */
/* 送ったあとはフォームが隠れて、期間の表のすぐ下に来る（罫線を二重にしない） */
.done { border-top: 0; padding-top: 20px; }
.done h2 { color: var(--ink); }
.done:focus { outline: none; }
.done-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.done-list li { padding: 8px 2px; border-bottom: 1px solid var(--rule); font-weight: var(--b); }
.editbox { margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ink); }
.editbox h3 { margin-top: 0; }
.editbox p { margin: 0 0 8px; }
.link { word-break: break-all; font-size: 14px; }

.foot { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 13px; text-align: center; }
.foot a { color: var(--ink-2); }

/* ------------------------------------------------------------------ 教室の画面 */
/* 上の帯：LP と同じ。地の色に太字の「予約帳」と細い罫線 */
.t-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 6px max(16px, calc(50% - 304px));
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.t-brand {
  padding: 11px 0;
  color: var(--ink);
  font-family: var(--head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  text-decoration: none;
  white-space: nowrap;
}
.t-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 14px; }
.t-top form { margin: 0 0 0 auto; }
.t-logout {
  min-height: 44px;
  padding: 4px 12px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
}
.crumb { margin: 4px 0 0; font-size: 14px; }
.crumb a { display: inline-block; min-height: 44px; padding: 11px 0; color: var(--ink-2); }
.crumb a:hover { color: var(--ink); }
/* コピーしたときの知らせ：画面の下に出す（長いページでも見える） */
.t-page .toast {
  position: fixed;
  top: auto;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 30;
  max-width: 608px;
  margin: 0 auto;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
}

/* ボタン：主は墨の塗り、副は墨の細い線、取り消しと終了は朱の細い線 */
.btn, .btn-sub, .btn-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: var(--b);
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-sub { background: transparent; color: var(--ink); }
.btn-warn { border-color: var(--shu); background: transparent; color: var(--shu); }
.btn.small, .btn-sub.small, .btn-warn.small { min-height: 44px; padding: 6px 12px; font-size: 14px; letter-spacing: .04em; }
.btn.wide, .btn-sub.wide { display: flex; width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.btns form { margin: 0; }
.btn[disabled] { opacity: .6; cursor: wait; }

/* 期の一覧：横罫線 */
.terms { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.term-item { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
.term-item:last-child { border-bottom: 0; padding-bottom: 0; }
.term-item h3 { margin: 0 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.term-item h3 a { text-decoration: none; }
.term-item h3 a:hover { text-decoration: underline; }
.term-meta { margin: 0; color: var(--ink-2); font-size: 14px; }
/* 状態の札：受付中は墨の塗り、下書きは点線、終了は薄い線（色分けはしない） */
.badge {
  display: inline-block;
  margin-right: 8px;
  padding: 0 6px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: var(--b);
  line-height: 1.7;
  letter-spacing: .08em;
  vertical-align: 1px;
}
.badge.open { background: var(--ink); color: #fff; }
.badge.draft { border-style: dashed; }
.badge.closed { border-color: var(--rule); color: var(--ink-2); }

/* 項目と中身（教室の設定のご利用の情報）：横罫線だけ */
.kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--ink);
  font-size: 15px;
}
.kv dt, .kv dd { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.kv dt { padding-right: 18px; font-family: var(--head); font-weight: 600; letter-spacing: .06em; }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: var(--b); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; }

/* 「次に欲しいもの」投票（教室のホームの1段）：横罫線の一覧 */
.wish-lead { margin: 0 0 4px; }
.wish-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin: 16px 0 18px; border-top: 1px solid var(--ink); }
.wish-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--rule);
  font-weight: var(--b);
  line-height: 1.4;
  cursor: pointer;
}
.wish-item input { width: 20px; height: 20px; margin: 0; flex: none; }
.wish-item span { min-width: 0; overflow-wrap: anywhere; }
.wish-item small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; }
.wish-item:has(input:checked) { background: var(--paper-2); }
.wish-other textarea { min-height: 88px; }
.wish-done { margin: 0 0 4px; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.wish-done li { padding: 8px 2px; border-bottom: 1px solid var(--rule); font-weight: var(--b); overflow-wrap: anywhere; }
.wish-text { display: block; font-weight: 400; white-space: pre-line; }
.wish-keep { margin: 0; font-size: 14px; text-align: center; }
.wish-keep a { display: inline-block; min-height: 44px; padding: 11px 8px; }

/* 期の管理 */
.copybox { margin: 0 0 22px; }
.copybox:last-child { margin-bottom: 0; }
.copybox textarea, .copybox input { font-size: 14px; }
.copybox .url {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
  word-break: break-all;
  font-size: 14px;
}
.qr-img { display: block; width: 180px; max-width: 60%; height: auto; margin: 6px 0; border: 1px solid var(--ink); background: var(--paper); }
/* 人数の3つ：太字の数字と、細い罫線で3つに区切る */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.stats li { padding: 12px 6px 10px; text-align: center; }
.stats li + li { border-left: 1px solid var(--rule); }
.stats b { display: block; font-family: var(--head); font-size: 30px; font-weight: 600; line-height: 1.2; }
.stats span { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.stats li.warn b, .stats li.warn span { color: var(--shu); }
.students { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.student { padding: 12px 0; border-bottom: 1px solid var(--rule); }
/* 回数がちがう人：朱の縦の線 */
.student.warn { padding-left: 12px; border-left: 2px solid var(--shu); }
.student p { margin: 0 0 2px; overflow-wrap: anywhere; }
.st-count { font-weight: var(--b); }
.st-count .bad { color: var(--shu); }
.st-slots, .st-note { font-size: 14px; }
.st-foot { color: var(--ink-2); font-size: 13px; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.st-actions form { margin: 0; }
/* コマ別の人数：横罫線の表。満席の人数は朱 */
.grid { border-top: 1px solid var(--ink); }
.g-day { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.g-day.closed { padding-left: 8px; background: var(--off-bg); color: var(--ink-2); }
.g-day .off { padding: 0; }
.g-date { margin: 0 0 4px; font-family: var(--head); font-weight: 700; letter-spacing: .04em; }
.g-slots { margin: 0; padding: 0; list-style: none; }
.g-slot { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 8px; padding: 4px 0; font-size: 14px; }
.g-slot + .g-slot { border-top: 1px solid var(--rule-2); }
.g-slot.empty { color: var(--ink-2); }
.g-slot.full .g-num, .g-slot.full .g-num small { color: var(--shu); }
.g-slot.full .g-num { font-weight: var(--b); }
.g-time { font-weight: var(--b); }
.g-num small { color: var(--ink-2); }
.g-names { grid-column: 2; color: var(--ink); overflow-wrap: anywhere; }
details.hist summary { min-height: 44px; padding: 10px 0; font-family: var(--head); font-size: 17px; font-weight: 600; cursor: pointer; }
.hist-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); font-size: 14px; }
.hist-list li { padding: 6px 0; border-bottom: 1px solid var(--rule-2); }

/* 期の設定画面 */
.ed-sec h2 { font-size: 19px; }
.ed-row { display: grid; gap: 10px; margin: 0 0 12px; }
.ed-row > * { min-width: 0; }
.ed-row.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ed-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-row label { display: block; margin: 0 0 4px; color: var(--ink); font-size: 14px; font-weight: var(--b); line-height: 1.5; }
.ed-row input, .ed-row select { min-height: 44px; padding: 8px 10px; }
.ed-row input[type="date"] { padding: 8px 6px; }
/* 休み・型・コース・例外のまとまり：上の罫線で区切る */
.ed-box { margin: 0 0 12px; padding: 14px 0 4px; border-top: 1px solid var(--rule); }
.ed-box-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}
.ed-box-head span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ed-del {
  min-height: 44px;
  min-width: 44px;
  padding: 4px 12px;
  border: 1px solid var(--ink-2);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: .04em;
  cursor: pointer;
}
.ed-add {
  min-height: 44px;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px dashed var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: var(--b);
  letter-spacing: .04em;
  cursor: pointer;
}
.ed-sec summary { min-height: 44px; padding: 10px 0; font-weight: var(--b); cursor: pointer; }
/* 毎週の休み：横罫線の1行に月〜日 */
.ed-wd {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0 0 16px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.ed-wd label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  font-weight: var(--b);
  cursor: pointer;
}
.ed-wd label:has(input:checked) { background: var(--off-bg); }
.ed-wd input { width: 20px; height: 20px; margin: 0; }
.ed-wdp { display: grid; grid-template-columns: 2.2em 1fr; gap: 6px 8px; align-items: center; margin: 0 0 16px; }
.ed-wdp select { min-height: 44px; }
/* 週間の通塾予定表：いまの1週間（月〜日の時刻） */
.ed-week { margin: 0 0 12px; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ed-week li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ed-week li.off { background: var(--off-bg); color: var(--ink-2); }
.ed-err { margin: 6px 0 0; color: var(--shu); font-size: 14px; font-weight: var(--b); }
.ed-help { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; line-height: 1.7; }
/* 新しい期：例に戻す（副ボタン） */
.ed-example { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 14px; }
.ed-example .ed-help { flex: 1 1 12em; min-width: 0; margin: 0; }
/* 公開：横罫線の3行。選んだ行は少し濃い生成り */
.ed-status { display: grid; border-top: 1px solid var(--ink); }
.ed-status label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.ed-status label:has(input:checked) { background: var(--paper-2); }
.ed-status input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; }
.ed-status small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; }
.ed-foot {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  margin: 16px -16px 0;
  padding: 10px 16px;
  background: var(--paper);
  border-top: 1px solid var(--ink);
}
.ed-foot .btn, .ed-foot .btn-sub { padding-left: 6px; padding-right: 6px; }   /* 360px で「プレビュー」を1行に */

/* 日付ごとの型のカレンダー：横罫線の格子。型を決めた日は墨の塗り、休みは薄い灰 */
.cal-month { margin: 10px 0 18px; }
.cal-title { margin: 0 0 6px; font-family: var(--head); font-weight: 700; letter-spacing: .04em; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.cal .wd { padding: 4px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 12px; text-align: center; }
.cal button, .cal .blank {
  min-height: 48px;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.15;
  cursor: pointer;
}
.cal .blank { cursor: default; }
.cal button b { display: block; margin-top: 3px; color: var(--ink-2); font-size: 12px; font-weight: var(--b); }
.cal button:focus-visible { outline-offset: -3px; }
.cal button.set { background: var(--ink); color: #fff; }
.cal button.set b { color: #fff; }
.cal button.set:focus-visible { outline-color: #fff; }
.cal button.off { background: var(--off-bg); color: var(--ink-2); }
.cal button.off b { color: var(--ink-2); }
@media (hover: hover) {
  .cal button:not(.set):not(.off):hover { background: var(--paper-2); }
}

/* 「AIに聞く」（教室のホームと期の管理の1段・v1.12）：会話は「先生」「AI」の小さな見出しと文。
   AI の発言は左の墨の線（.ask-a）、先生の発言は薄い字（.ask-u）。設定の案は墨の細い枠のカード（.ask-plan）。
   朱は「外れる予約」の細い枠（.ask-orphans）だけ。エラーも墨の線と太字（朱にしない）。飾り・絵文字は使わない */
.ask textarea { min-height: 72px; }
.ask-thread { margin: 14px 0 0; border-top: 1px solid var(--rule); }
.ask-turn { padding: 12px 0 0; }
.ask-turn:last-child { padding-bottom: 4px; }
.ask-who { margin: 0 0 2px; color: var(--ink-2); font-size: 12px; font-weight: var(--b); line-height: 1.5; letter-spacing: .12em; }
.ask-u { margin: 0; padding: 0 0 0 16px; color: var(--ink-2); white-space: pre-line; line-height: 1.75; }
.ask-a { margin: 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--ink); white-space: pre-line; line-height: 1.75; }
.ask-a.ask-wait { color: var(--ink-2); }
.ask-lead { margin: 0; }
.ask-folded { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.ask-plan { margin: 8px 0 0; padding: 12px 14px 14px; border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); white-space: normal; }
.ask-plan.old { border-color: var(--rule); color: var(--ink-2); }
.ask-plan h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.ask-plan ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; }
.ask-plan li { padding: 5px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.ask-plan li.has-k { display: grid; grid-template-columns: 4.8em minmax(0, 1fr); gap: 0 8px; }
.ask-k { font-weight: var(--b); letter-spacing: .04em; }
.ask-sub { display: block; margin: 12px 0 4px; font-size: 14px; font-weight: var(--b); letter-spacing: .04em; }
.ask-orphans { margin: 12px 0 0; padding: 0 10px 8px; border: 1px solid var(--shu); border-radius: 2px; }
.ask-orphans .ask-sub { margin-top: 8px; }
.ask-orphans-note { margin: 6px 0 0; font-size: 14px; }
.ask-plan.old .ask-orphans { border-color: var(--rule); }
.ask-note { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.ask-note .ask-sub { margin: 0 0 2px; color: var(--ink); }
.ask-plan .btns { margin-top: 14px; }
.ask-reset { margin-left: auto; }
.ask-status { margin: 10px 0 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--ink); font-weight: var(--b); white-space: pre-line; }
.ask-foot { margin: 14px 0 0; }

/* 色（教室の設定の「ふだんの色」・期の設定の「色」）：色見本の札。「自分で色を決める」は小さな折りたたみ（目立たせない） */
.sw-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.sw {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--b);
  line-height: 1.3;
  cursor: pointer;
}
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sw:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sw:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.sw-chip { flex: none; width: 60px; height: 28px; border: 1px solid var(--rule); border-radius: 2px; }
.sw span { min-width: 0; overflow-wrap: anywhere; }
.sw small { display: block; color: var(--ink-2); font-size: 12px; font-weight: 400; }
.sw-custom { margin: 0 0 4px; }
.sw-custom summary { display: inline-block; min-height: 44px; padding: 11px 0; color: var(--ink-2); font-size: 13px; font-weight: 400; cursor: pointer; }
.sw-custom .sw { margin: 2px 0 10px; }
.sw-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.sw-pick label { display: block; font-size: 13px; font-weight: var(--b); }
.sw-pick input[type="color"] {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 4px;
  padding: 2px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--field);
  cursor: pointer;
}
.sw-help { margin: 0; }

/* マウスでのせたとき（スマホでは押したあとに色が残らないように、hover のある機器だけ） */
@media (hover: hover) {
  .send:not(:disabled):hover { background: var(--ink-h); }
  .sub:hover { background: var(--paper-2); }
  .t-logout:hover { background: var(--paper-2); }
  .btn:hover { border-color: var(--ink-h); background: var(--ink-h); }
  .btn-sub:hover { background: var(--paper-2); }
  .btn-warn:hover { background: var(--shu-pale); }
  .ed-del:hover { background: var(--paper-2); }
  .ed-add:hover { background: var(--paper-2); }
}
@media (min-width: 560px) {
  .day { grid-template-columns: 76px minmax(0, 1fr); }
  .slot { font-size: 16px; }
  .wish-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .head { padding-top: 24px; }
  h1 { font-size: 28px; }
}
@media (max-width: 380px) {
  .ed-row.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}