/* ============================================================
   2. 共通コンポーネント
   ============================================================ */
* { box-sizing: border-box; }

/* Web配信用の可変フォント・サブセット（設計書 §3.9・§12）。
   既存の assets/fonts-src/NotoSansJP-Variable.ttf（9.1MB、roster/image.py が
   講師向け名簿PNGの描画に使う。B-2対応で static/fonts/ から移設済み）とは
   別ファイル。生成は scripts/subset_font.py。
   wght 軸（100-900）を保った可変フォントなので、階層は太さで作る。
   環境（Mac=Hiragino / Windows=Yu Gothic）で字面が変わる問題を解消する。 */
@font-face {
  font-family: "Noto Sans JP";
  src: url("fonts/NotoSansJP-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 氏名用の補助サブセット（2026-08-30 追加）。人名用漢字863字のうち、上の
   基本サブセットにまだ入っていない字だけを収録（scripts/subset_font.py の
   compute_names_chars()。基本と重複させない）。font-family は基本サブセットと
   同じ名前にし、unicode-range だけで棲み分ける——ブラウザはこの範囲の文字が
   実際にページに現れたときしかこのファイルを取得しない。公開側（人名が出ない）
   ではリクエストが発生せず、管理画面の氏名一覧（人名がある）でだけ取得される
   （実測は報告参照）。
   常用漢字表にも人名用漢字表にも無い字（例:「髙」）は、このファイルを足しても
   フォールバックし続ける（tests/test_font_char_coverage.py で明示的に確認）。 */
@font-face {
  font-family: "Noto Sans JP";
  src: url("fonts/NotoSansJP-names.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E11, U+4E1E, U+4E43, U+4E4B, U+4E4E, U+4E58, U+4E5F, U+4E91, U+4E98-4E99, U+4E9B, U+4E9E, U+4EA5-4EA6, U+4EA8, U+4EAE, U+4ED4, U+4F0D, U+4F36, U+4F3D, U+4F43, U+4F51, U+4F5B, U+4F83, U+4F86, U+4F91, U+4FC4, U+4FD0, U+4FE0, U+4FE3, U+4FF1, U+5016, U+5026, U+502D, U+5072, U+50AD, U+50B3, U+50DE, U+50F9, U+5109, U+5132, U+5141, U+514E, U+5152, U+515C, U+5176, U+51A8, U+51B4, U+51C9, U+51CC, U+51DB-51DC, U+51E7, U+51EA, U+51F0-51F1, U+51FD, U+5269, U+5289, U+528D, U+52AB, U+52C1, U+52F3, U+52FA, U+52FF, U+5301, U+5321, U+535C, U+536F, U+5377, U+537D, U+537F, U+53A8-53A9, U+53C9, U+53E1-53E2, U+53EA, U+53F6, U+541E, U+543B, U+543E, U+54C9, U+54E8-54E9, U+5544, U+558B, U+55A7, U+55AC, U+55AE, U+55B0, U+5609, U+5617, U+5629, U+5642, U+564C, U+56B4, U+5703, U+5708, U+570B, U+5713, U+5718, U+572D, U+5750, U+5766, U+57DC, U+57F4, U+582F-5830, U+5835, U+583A, U+5859, U+589E, U+58D5, U+58D8, U+58DE, U+58EC, U+58EF, U+58FD, U+5937, U+5944, U+594E, U+5957, U+5967, U+596C, U+59E5, U+59EA, U+5A03, U+5A29, U+5B09, U+5B43, U+5B5C, U+5B5F, U+5B8B, U+5B8F, U+5B95, U+5BA5, U+5BC5, U+5BD3, U+5BE2, U+5BE6, U+5BEC, U+5BF5, U+5C07-5C08, U+5C16, U+5C24, U+5C2D, U+5C51, U+5CE8, U+5CEF, U+5CFB, U+5CFD, U+5D1A, U+5D69, U+5D6F, U+5D8B, U+5DBA, U+5DCC, U+5DD6, U+5DE2, U+5DEB, U+5DF2-5DF4, U+5DF7, U+5DFD, U+5E16, U+5E36, U+5E61, U+5E84, U+5E87, U+5E9A, U+5EB5, U+5EDF, U+5EE3, U+5EF3, U+5EFB, U+5EFF, U+5F18, U+5F1B, U+5F48, U+5F4C, U+5F57, U+5F66, U+5F6A, U+5F6C, U+5F9E, U+5FA0, U+5FB5, U+5FB7, U+5FBD, U+5FFD, U+601C, U+6046, U+6055, U+6062, U+6070, U+6089, U+608C, U+60C7, U+60DA, U+60DF-60E1, U+60E3, U+60F9-60FA, U+613C, U+6167, U+6190, U+61C9, U+61F7, U+620A, U+6216, U+621F, U+6230, U+6232, U+6258, U+62C2, U+62D4, U+62DC, U+6309, U+633A, U+633D, U+6367, U+6372, U+6377, U+637A, U+63A0, U+63AC, U+63C3, U+63ED, U+6416, U+641C, U+6451, U+647A, U+6492, U+649E, U+64AB, U+64AD, U+64B0, U+64CA, U+64E2, U+651D, U+6536, U+654D, U+6566, U+6590, U+65A1, U+65A7, U+65AF, U+65BC, U+6602, U+660A, U+660C, U+660F, U+6634, U+6643-6644, U+664B, U+664F, U+6652, U+665A, U+665D, U+665F, U+6666, U+6668, U+667A, U+6689, U+66A2, U+66C6, U+66C9, U+66D9, U+66DD, U+66F3, U+66FE, U+670B, U+6714, U+674E-674F, U+6756, U+675C, U+676D, U+6775, U+6777, U+6787, U+67CA, U+67D1, U+67D8, U+67DA, U+67F4, U+67FE, U+6816-6817, U+681E, U+6842, U+6850, U+6854, U+6867, U+6876, U+6881, U+6893, U+689B, U+689D, U+68A2, U+68A7, U+68AF, U+68B6, U+68F2, U+6900, U+690B, U+691B, U+6930, U+693F, U+694A, U+6953, U+6955, U+695A, U+6960, U+6962, U+696F, U+698A, U+698E, U+699B, U+69AE, U+69C7, U+69CC-69CD, U+69D9, U+69FB, U+6A02, U+6A0B, U+6A1F, U+6A23, U+6A2B, U+6A3A, U+6A3D, U+6A58-6A59, U+6A6B, U+6A80, U+6A8E, U+6A9C, U+6AA2, U+6AC2, U+6AD3, U+6ADB, U+6AFB, U+6B23, U+6B3D, U+6B4E, U+6B64-6B65, U+6B77, U+6B86, U+6BC5, U+6BCF, U+6BD8, U+6BEC, U+6C23, U+6C40, U+6C50, U+6C5D, U+6C72, U+6C8C, U+6C93, U+6CAB, U+6D1B, U+6D32, U+6D35, U+6D38, U+6D69, U+6D6C, U+6D89, U+6DC0, U+6DCB, U+6DDA, U+6DE8, U+6DF3, U+6DF5, U+6E1A, U+6E25, U+6E34, U+6E3E, U+6E4A, U+6E58, U+6E5B, U+6E9C, U+6EA2, U+6EAB, U+6EC9, U+6EEF, U+6F15, U+6F23, U+6F31, U+6F81, U+6FAA, U+6FD5, U+6FE1, U+7015, U+7027-7028, U+7058, U+7078, U+707C, U+70CF, U+711A, U+7130, U+7149, U+714C, U+7164, U+7199, U+71C8, U+71CE, U+71D2, U+71D5, U+71E6, U+71ED, U+71FF, U+722D, U+7232, U+723E, U+7252, U+725F, U+7261, U+727D, U+7280, U+72C0, U+72F9, U+72FC, U+732A, U+7345, U+7378, U+7396, U+73B2, U+73C0, U+73C2, U+73C8, U+73CA, U+7409, U+7422, U+7425, U+7433, U+7435-7436, U+745A-745B, U+745E, U+7473, U+7476, U+74DC, U+74E2, U+7525, U+752B, U+7560, U+7562, U+758A-758B, U+758F, U+7626, U+7690, U+7693, U+76C3, U+76DC, U+76E1, U+771E, U+7738, U+77A5, U+77E9, U+7825-7827, U+786F, U+788E, U+7893, U+7897, U+78A7, U+78A9, U+78D0, U+78EF, U+7941, U+7947, U+7950, U+7955, U+7962, U+7977, U+797F, U+7984, U+798E, U+79AA, U+79AE, U+79B0-79B1, U+79BD-79BE, U+79E4, U+79E6, U+7A00, U+7A14, U+7A1C, U+7A1F, U+7A3B, U+7A57, U+7A63, U+7A70, U+7A79, U+7A7F, U+7A84, U+7AAA, U+7ABA, U+7AE3, U+7AEA, U+7AFA, U+7AFF, U+7B08, U+7B19, U+7B20, U+7B39, U+7B48, U+7B51, U+7B94-7B95, U+7BC7, U+7BE0, U+7C1E, U+7C3E, U+7C7E, U+7C9F, U+7CA5, U+7CB9, U+7CCA, U+7D17-7D18, U+7D2C, U+7D43, U+7D46, U+7D62, U+7D9C, U+7DA0, U+7DB8, U+7DBA, U+7DBE, U+7DCB, U+7DD6, U+7DE3, U+7E1E, U+7E23, U+7E31, U+7E61, U+7E6B, U+7E82, U+7E8F, U+7E96, U+7F9A, U+7FD4, U+7FE0, U+8000, U+800C, U+8036, U+803D, U+8061, U+807D, U+8087, U+808B, U+80B4, U+80E1, U+80E4, U+8129, U+8139, U+8154, U+818F, U+81DF, U+81E5, U+8207, U+821C, U+8235, U+8299, U+82A5-82A6, U+82AD, U+82B9, U+82D1, U+82D4, U+82FA, U+8304-8305, U+8309, U+831C, U+8338, U+837B, U+8389-838A, U+839E, U+83AB, U+83C5, U+83D6, U+83E9, U+83EB, U+83F1, U+8404, U+840A, U+840C, U+8420, U+8429, U+842C, U+8431, U+8461, U+8463, U+8466, U+847A, U+8490, U+8494, U+8499, U+84B2, U+84BC, U+84C9, U+84D1, U+84EC, U+84EE, U+8513, U+8523, U+8526, U+852D, U+8543, U+8549, U+854E, U+8557, U+8568, U+856A, U+857E, U+8597, U+8599, U+85A9, U+85B0, U+85C1, U+85CF, U+85DD, U+85E5, U+862D, U+865B, U+8766, U+8776, U+87BA, U+87EC, U+87F9, U+881F, U+885E, U+887F, U+8888, U+88B4, U+88DD, U+88DF, U+88E1, U+88F3, U+8956, U+89BD, U+8A0A, U+8A23, U+8A3B, U+8A62, U+8A6B, U+8ABC, U+8AC4, U+8ACF, U+8AD2, U+8AFA, U+8B02, U+8B20, U+8B83, U+8B93, U+8C79, U+8CB0, U+8CD1, U+8CE3, U+8CF4, U+8D73, U+8DE8, U+8E44, U+8E5F, U+8F14, U+8F2F, U+8F3F, U+8F49, U+8F5F, U+8FB0, U+8FBB, U+8FBF, U+8FC2, U+8FC4, U+8FE6, U+8FEA, U+9017, U+9019, U+901E, U+9022, U+9041, U+9059, U+9065, U+907C, U+9091, U+90C1, U+90DE, U+912D, U+9149, U+9187, U+9189, U+918D, U+9190, U+91AC, U+91C0, U+91C9, U+91D8, U+91E7, U+9291, U+92D2, U+92F8, U+9304, U+9306, U+9310, U+9318, U+932B, U+934A, U+936C, U+93A7, U+93AD, U+9444, U+9583, U+958F, U+95A4, U+963F-9640, U+9677, U+9688, U+96AA, U+96BC, U+96C0-96C1, U+96DB-96DC, U+96EB, U+971E, U+9756, U+975C, U+9784, U+978D, U+9798, U+97A0, U+97AD, U+9801, U+980C, U+9817, U+985A, U+986F, U+98AF, U+98DC, U+9957, U+99A8, U+99B3-99B4, U+99C8, U+99D5, U+99FF, U+9A37, U+9A4D, U+9A57, U+9AEE, U+9B41, U+9B6F, U+9B8E, U+9BC9, U+9BDB, U+9C2F, U+9C52, U+9C57, U+9CE9, U+9CF3, U+9CF6, U+9D28, U+9D3B, U+9D5C, U+9D6C, U+9DC4, U+9DD7, U+9DF2, U+9DF9-9DFA, U+9E92, U+9E9F, U+9EBF, U+9EC3, U+9ECE, U+9ED1, U+9ED8, U+9EDB, U+9F0E, U+9F4A, U+9F8D, U+F91D, U+F928-F929, U+F936, U+F9D0, U+FA16, U+FA19-FA1B, U+FA22, U+FA26, U+FA30-FA31, U+FA33-FA35, U+FA37-FA38, U+FA3A-FA3B, U+FA3D, U+FA3F-FA41, U+FA43-FA48, U+FA4A-FA57, U+FA59-FA5C, U+FA5F, U+FA61-FA65, U+FA67-FA69;
}

/* --- 公開申込フォームの刷新（2026-09-05）で足した2書体 -----------------
   **必ず Noto の2件より後ろに置く。** 既存のテストの一部が「1件目」「2件目」を
   位置で取っているため、前に入れると別の宣言を見に行く。
   （位置依存そのものは脆いので、src の実在と font-display は
   test_全てのweb用書体_ で全件を回す形に直してある。）

   Quicksand: 欧文のコース名・キッカー・受講料の数字。ASCII のみ（16KB）。
   可変フォント（wght 300-700）。 */
@font-face {
  font-family: "Quicksand";
  src: url("fonts/Quicksand-subset.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Zen Maru Gothic: 見出し・主ボタン・ヘッダー帯の日程・和名コース名。
   **可変フォントではなく静的3本**なので、太さごとに宣言が要る。
   Noto と同じ広い集合で切ると1本485KB＝3本で1.46MB になるため、
   Zen が実際に描く範囲（かな・記号・コース名・会場名・固定文言）だけに絞って
   1本あたり約123KB にしてある。収録漏れは豆腐ではなく Noto へのフォールバックで、
   画面は壊れず書体だけ混ざる——気づきにくいので
   tests/test_font_char_coverage.py が照合する。 */
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("fonts/ZenMaruGothic-400-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("fonts/ZenMaruGothic-500-subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("fonts/ZenMaruGothic-700-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", system-ui, sans-serif;
  line-height: 1.55;
}

.env-banner {
  background: var(--alert);
  color: var(--on-fill);
  text-align: center;
  padding: var(--space-4);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-24);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.brand { font-weight: 700; color: var(--navy); text-decoration: none; }

/* 768pxの余裕は38pxしかない（設計 §5.3「幅の予算」実測）。gap を
   var(--space-4) にすることで8本（ログアウト含む）が1行に収まる。
   var(--space-12) の左右余白＋16pxのgapのままだと768pxで折り返す。
   現在地の背景を「箱」に見せる padding は ≥768px（@media (min-width:
   768px) 内の「4. 管理レイヤー」）にだけ足す——375px幅でここに
   padding を足すと折り返しが1行増え、.topbar の高さが169pxを超える
   （実測。375pxでは狭幅タップ領域ブロックの min-height:44px 経由で
   縦方向はすでに確保されているので、横方向の余白が無くても現在地の
   背景は文字を囲んで読める）。 */
.topbar nav { display: flex; align-items: center; gap: var(--space-4); }
.topbar nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-md);
}
.topbar nav a:hover { color: var(--blue); }

/* .brand（詳細度 0,1,0）は元々 .topbar a（0,1,1）に負けて --navy が
   死んでいた（2026-08-30 実測。設計 §5.3）。ナビのリンクを .topbar nav a
   に絞ったことでブランドはもう nav 側のセレクタと競合しないが、決定
   どおり明示のセレクタで --navy を復権させ、--fs-lg（16px）にして
   ブランド名とナビの差を太さだけにしない。 */
.topbar .brand { color: var(--navy); font-size: var(--fs-lg); }
/* レビュー B-5（2026-08-30）: .topbar a:hover を .topbar nav a:hover に
   絞った副作用で .brand に当たる hover が無くなっていた（回帰）。ブランド名は
   16px・紺・太字で見出しに見えるようになったぶん、押せる手がかりが hover
   しか無い。白地で4.60:1（AA）。 */
.topbar .brand:hover { color: var(--blue); }

/* 管理画面刷新 段4（2026-09-05）: ロゴとグローバルナビに Zen Maru Gothic を
   当てる。.topbar は base.html（管理画面）にしかない要素なので、この
   セレクタだけで公開画面と自然に分離できる（body クラスでの除外は不要）。 */
.topbar .brand, .topbar nav { font-family: var(--font-head); }

/* 現在地（設計 §5.3「見せ方」）。.on は .tab.on / .seg a.on が既に
   定義済みなので再利用しない——専用クラス名にすることで、このルールを
   丸ごと消せば現在地クラスの定義を確認するテストが確実に落ちる。
   --bg-quiet は --surface の上で1.17:1しかなく（2026-09-05 管理画面刷新で
   --bg-quiet を #f1ede6 に差し替えたため数値を更新）面だけでは成立しないので、
   background・color(--ink)・font-weight(700) を束にする。角丸は
   var(--radius)（999pxは状態バッジの語彙なのでここでは使わない）。
   border-bottom は足さない — .tab の下線と同じ形にすると、.topbar 自体が
   4つ目のタブ帯に化ける。 */
.topbar nav a.nav-current {
  background: var(--bg-quiet);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius);
}
/* レビュー B-6（2026-08-30）: .topbar nav a:hover と .topbar nav
   a.nav-current は同じ詳細度（0,2,2）で、後ろにある .nav-current が
   ソース順で勝つ。現在地にマウスを乗せても何も変わらず「死んだ要素」に
   見えるので、現在地専用の hover を明示する。面(--bg-quiet)と太さ(700)は
   保ったまま文字色だけ --blue にする——--blue on --bg-quiet は4.528:1で
   14px太字でもAAを満たす（実測。2026-09-05 管理画面刷新で --bg-quiet を
   #f1ede6 に差し替えたため数値を更新）。 */
.topbar nav a.nav-current:hover { color: var(--blue); }

main { max-width: 1180px; margin: 0 auto; padding: var(--space-24) var(--space-16) var(--space-64); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px var(--shadow-card);
  margin-bottom: var(--space-24);
  overflow: hidden;
  /* 既定は中身に余白を持たせる。フォームや操作ログのように
     card 直下へ要素を置く画面が、枠に密着しないように。 */
  padding: var(--space-16);
}
/* 一覧・設定のようにヘッダ帯とテーブルで面を作る画面は端まで使う */
.card.flush { padding: 0; }
.card.flush > p.muted { margin: var(--space-12) var(--space-16); }
/* .error は水平マージンを持たない（下のコメント参照）。padding: 0 の
   .card.flush の直下に置くと、カードの枠に隙間0で密着し、この1本だけが
   他の行より16px外側に出る（UIレビューで実測）。ここで内側に揃える。 */
.card.flush > .error { margin: var(--space-12) var(--space-16) var(--space-16); }
/* .card-head（padding: 13px 16px）と横位置を揃える。揃えないと、直下の
   見出しやテーブルだけ枠の左端に張り付いて見える（2026-08-18 実機指摘）。
   表は必ず .scroll に包まれる形になったので、この規則も table.list-table
   ではなく包む側の .scroll に当てる（table.list-table を直接持つ規則は
   包んだ時点で子セレクタが外れて死ぬ）。location-section や entry の
   中に入っている表はここでは揃えない——それぞれの親が既に同じ水平位置を
   与えている。

   .scroll 側の余白は 768px 以上に閉じる（下の「4. 管理レイヤー」）。
   狭幅で横スクロールの窓を32px狭めると、受講履歴の請求予定額の列が
   20pxだけ切れて 19,800 が 19,80 と読めてしまった（2026-08-31 実測）。
   隠れているのが分かる切れ方ではなく、そのまま読める数字になるのが危険。
   狭幅は開催回一覧のカードと同じく端まで使う。 */
.card.flush > h3 {
  margin-left: var(--space-16);
  margin-right: var(--space-16);
}
.card.narrow { max-width: 420px; margin: var(--space-48) auto; padding: var(--space-24); }
.add-row { padding: var(--space-12) var(--space-16); border-top: 1px solid var(--rule-2); }
.add-row form { display: flex; gap: var(--space-12); align-items: flex-end; }
.add-row label { flex: 1; margin: 0; }

/* 開催回の料金区分編集。行ごとに区分名・金額・説明をまとめて、
   ラベル無しの縦積み（input,select,textarea に display:block と
   width:100% を当てる既定のスタイル）がそのまま効くと何の欄か
   分からなくなるのを避ける。 */
.tier-row { display: flex; gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-12); }
.tier-row label { flex: 1; min-width: 140px; }

.card-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--rule-2);
}
.card-head h1, .card-head h2, .card-head h3 { font-size: var(--fs-lg); margin: 0; color: var(--ink); font-weight: 700; }
.card-head .btn { margin-left: auto; }
.count {
  font-size: var(--fs-xs); color: var(--ink-2);
  background: var(--bg-quiet); padding: 2px var(--space-8); border-radius: 999px;
}

h1 { font-size: var(--fs-xl); margin: 0 0 var(--space-16); color: var(--ink); }
h2 { font-size: var(--fs-md); margin: var(--space-24) 0 var(--space-12); color: var(--ink); }

/* 管理画面刷新 段4（2026-09-05）: 見出しに Zen Maru Gothic を当てる。
   `main h1, main h2, main h3` のような一括指定はしない — main は
   public_base.html にもあり、法定掲示ページ（/legal/*）の見出しにまで
   波及して1字だけ書体が割れる事故になったため（第1版で実測・報告参照）。

   body:not(.public) は保険ではなく、外すと事故る現役のガード。
   02-components.css は public_base.html からも読まれるため、この接頭辞を
   外すと法定掲示ページ（/legal/tokushoho 等）の見出しに Zen Maru Gothic が
   波及し、サブセットに無い字だけ別書体に落ちる
   （2026-09-05 修正ラウンド1・Important 2、tests/test_style_guard.py の
   test_font_headは公開側に届かない形になっている が実測で守る）。

   修正ラウンド2・Important 2（鍵の反転）: ラウンド1は `.card.flush
   .card-head h1/h2/h3` と `.card > h1` の2パターンにだけ当てていた。
   `flush` は表を端まで伸ばすレイアウト用のクラスで見出しの性質とは
   無関係なため、同じ画面の兄弟見出しで書体が割れた（顧客詳細:
   受講履歴／送信済みメール／似た顧客＝Zen、事務局メモ／顧客情報を
   編集／操作＝Noto。修了証の確認: h1＝Noto、h3「対象」「対象外」＝Zen）。

   ここでは鍵を反転させる —— body:not(.public) の h1/h2/h3 に
   まとめて当て、可変値の見出しだけを名指しで --font-body に戻す
   （このファイルでは4箇所。残り2箇所は settings.html 固有の構造なので
   06-settings-tabs.css 側に置く）。 */
body:not(.public) h1,
body:not(.public) h2,
body:not(.public) h3 {
  font-family: var(--font-head);
}

/* 可変値の見出し（管理画面6箇所のうち4箇所）。既存クラスだけでは
   「素の.card」の中で固定文言と可変値を区別できないため、各テンプレートに
   1つしかない目印（:has() で拾う兄弟要素、または一意なクラス）で個別に
   名指しする。テンプレートは変更しない —— 目印は既存のマークアップから
   拾うだけ。

   - .card:has(p[data-issued-password]) .card-head h1
     admins.html:9 の issued.kind（発行した認証情報の種別名。変数）。
     `data-issued-password` はこのカードにしか無い属性（issued.password を
     渡す<p>、card-head の兄弟）。同じ「素の.card > .card-head > h1」構造を
     持つ admins.html:104「自分のパスワードを変更」（固定文言）と
     区別するために使う —— クラスだけでは両者が同一構造で区別できない。
   - .card:has(.stat-band) .card-head h2
     customer_detail.html:9 の顧客氏名（customer.sei / customer.mei。変数）。
     `.stat-band`（申込/受講済/キャンセル件数の帯）はこのページにしか無い。
   - .card.narrow .card-head h1
     session_cancel_confirm.html:6 の開催回表示名＋「を中止する」
     （session_row.display_name。変数）。login.html も `.card.narrow` の
     直下に固定文言の h1（ログイン）を持つが、card-head を経由しないため
     `.card.narrow > h1`（子結合子）と衝突しない —— ここは子孫結合子で
     card-head 経由だけを拾う。
   - body:not(.public) .panel-head h1
     _session_panel.html:13 の開催回表示名または開催日
     （session_row.display_name / course_date。変数）。
     `.panel-head` はこのパーシャル専用のクラスだが、`body:not(.public)` の
     接頭辞が無いと詳細度で負ける —— `.panel-head h1`（クラス1・要素1）は
     広い規則 `body:not(.public) h1`（:not() の中身が1クラス扱い＝クラス1・
     要素2）にクラス数で並び、要素数で負ける。実ブラウザ（ローカルの
     最小再現HTML、getComputedStyle で確認）で実測: 接頭辞無しだと
     見出しは Zen のまま戻らない。他の5箇所はクラス数がもともと2以上
     あり詳細度で上回るため、この接頭辞は不要（同じ実測で確認）。

   足したら、この4箇所が本当に --font-body のままであることを確かめる
   判定（tests/test_style_guard.py）も入れてある。 */
.card:has(p[data-issued-password]) .card-head h1,
.card:has(.stat-band) .card-head h2,
.card.narrow .card-head h1,
body:not(.public) .panel-head h1 {
  font-family: var(--font-body);
}

.tabs { display: flex; padding: 0 var(--space-16); border-bottom: 1px solid var(--rule-2); gap: 2px; flex-wrap: wrap; }
/* 管理画面刷新 段4: タブ第1系統（.tabs/.tab, sessions.html のみが使う）に
   Zen Maru Gothic を当てる。button.tab はここで直接 font-family を書かず
   親（nav.tabs）に当てて継承させる —— `.tab-button` がハイフン境界で
   `\bbutton\b` に一致してフォーム部品の書体テストに掛かるのと同じ理由で、
   button.tab に直接書いても同じテストに引っかかる。 */
nav.tabs { font-family: var(--font-head); }
.tab {
  padding: var(--space-8) var(--space-16); font-size: var(--fs-sm); color: var(--ink-2);
  text-decoration: none; border-bottom: 2.5px solid transparent; font-weight: 400;
}
.tab.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--blue); }
/* <button> にも .tab を使うため、button の既定色・背景・影をリセットする。
   button, .btn のルールが .tab より後にあり、同じプロパティが競合すると
   button 側が勝つ（放っておくと青背景・白文字のボタン外観になる）。 */
button.tab {
  background: none; border: 0; box-shadow: none; font-weight: 400; padding: var(--space-8) var(--space-16);
}
/* button:hover, .btn:hover の background: var(--navy) は上のリセットでは打ち消せない
   （ホバー時だけ別の宣言が競合する）。放っておくと .tab の文字色（濃紺系）が
   navy地に乗り、実測でコントラスト比 1.3:1 程度まで落ちる
   （2026-08-18 実ブラウザでの computed style 確認で発覚）。 */
button.tab:hover { background: none; }

.filters {
  display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap;
  padding: var(--space-12) var(--space-16); background: var(--ground-soft); border-bottom: 1px solid var(--rule-2);
}
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.seg a { padding: var(--space-4) var(--space-12); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; background: var(--surface); }
.seg a.on { background: var(--navy); color: var(--on-fill); font-weight: 700; }
.period { font-size: var(--fs-sm); font-weight: 700; }

/* [2026-09-12 依頼者指摘] 管理画面の切り替え（カレンダー/一覧・今月/全日程）
   は「紺のベタ塗り＋濃い枠」で重く、スマホでは大きすぎて見えた。公開一覧と
   同じ「面の差で現在地を示す」形へ寄せる: 薄い地（--bg-quiet）の溝の中で、
   現在地だけを白い面（--surface）と薄い影で浮かせる。文字は現在地が
   --ink/700、それ以外は --ink-2/400（太さは 400/700 の2段のみ）。
   セレクタを body:not(.public) に限るのは、公開一覧（03-public.css）が
   .seg a.on を --bg-quiet で塗っており、溝と同色になって現在地が消えるため
   ——公開側の見た目はここでは変えない。
   高さは .btn-quiet / .filters select と同じ 32px（枠込み）に揃える。
   狭幅は 04-narrow.css の 44px 群（.seg a）が min-height で勝つ。 */
body:not(.public) .seg { background: var(--bg-quiet); border-color: var(--rule); }
body:not(.public) .seg a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 var(--space-12);
  background: transparent; color: var(--ink-2);
}
body:not(.public) .seg a:hover { color: var(--ink); }
body:not(.public) .seg a.on {
  background: var(--surface); color: var(--ink); font-weight: 700;
  box-shadow: 0 1px 2px var(--shadow-card);
}

/* 月の切り替え（‹ 前月 ／ 2026年11月 ／ 翌月 › ／ 今日）はひとまとまりの
   操作なので、.filters の折り返し単位を「1つずつ」から「この塊ごと」にする。
   [2026-09-12 依頼者指摘] 以前は3〜4個の独立した flex アイテムで、スマホ
   （375〜412px）では 11月（前月が「10月」と2桁になる月）に「12月 ›」だけが
   次の行へ落ち、開催回一覧（今月/全日程の切り替えが前に並ぶ）では毎月
   途中で折れていた。塊の中は折り返さない（nowrap）ので、収まらないときは
   塊ごと次の行へ移る。 */
.monthnav { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: nowrap; white-space: nowrap; }
.monthnav .period { padding: 0 var(--space-4); }

/* 月・年の一気ジャンプ（依頼: 1月から11月に一気に行けるように・年数も
   切り替えられるように）。.monthnav とは別の独立した flex アイテムにする
   ——.monthnav の中に入れると nowrap 制約に巻き込まれ、select の長い
   選択肢ぶん帯がまた折り返る（.filters は display: flex; flex-wrap: wrap
   なので、収まらなければこの塊ごと単独で次の行へ落ちてよい）。
   中の select は .filters select の見た目をそのまま継承するので、
   個別のスタイルは足さない。 */
.monthnav-jump { display: inline-flex; gap: var(--space-8); }

label { display: block; margin-bottom: var(--space-16); font-size: var(--fs-sm); color: var(--ink-2); }
label.check { display: inline-flex; align-items: center; gap: var(--space-8); margin: 0 var(--space-16) var(--space-8) 0; font-size: var(--fs-sm); color: var(--ink); }
fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-12) var(--space-16); margin-bottom: var(--space-16); }
legend { font-size: var(--fs-xs); color: var(--ink-2); padding: 0 var(--space-8); }

/* 書体だけはフォーム部品に継承されない。body の指定は届かず、
   input / select / button は UA 既定（Arial 系）、textarea は monospace で
   描画される。同じ16pxでも Arial は Hiragino Sans より x-height が大きく、
   公開申込フォームで入力欄の中の文字だけ和文から浮いていた（実測）。
   書体の出所は body の1宣言だけに保ちたいので、値は inherit に限る。 */
input, select, textarea, button { font-family: inherit; }

/* 16px を下回らせない。iOS Safari はフォーカス時に画面を自動拡大し、
   blur しても元に戻らない。幅の条件を付けないのは、拡大が幅に
   関わらず起きるため。フィルタ帯が広めに見えるのはその代償。 */
input, select, textarea {
  display: block; width: 100%; margin-top: var(--space-4); padding: var(--space-8) var(--space-12);
  font-size: var(--fs-lg); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
/* ラジオとチェックボックスを上の規則から外す。あれはテキスト入力向けで、
   width: 100% がネイティブの丸い操作子を直径90pxまで引き伸ばし、
   ラベル文字が下へ回り込む（公開申込フォームで実測）。管理画面は
   label.check input で個別に打ち消していたが、公開側のラベルは
   .check を持たないため素通りしていた。 */
input[type="checkbox"], input[type="radio"] {
  display: inline-block;
  width: auto;
  margin: 0 var(--space-8) 0 0;
  padding: 0;
  vertical-align: middle;
}
label.check input { display: inline; width: auto; margin: 0; }
/* [2026-09-12] 絞り込みのセレクトは同じ帯に並ぶ .btn-quiet / .seg と枠・影・
   高さ（32px）を揃える。文字は 16px（--fs-lg）のまま——iOS Safari の
   フォーカス時自動拡大の対策で、13px に落とせない。 */
.filters select {
  width: auto; max-width: 100%; margin: 0; height: 32px; font-size: var(--fs-lg); padding: 0 var(--space-8);
  border-color: var(--rule); box-shadow: 0 1px 2px var(--shadow-card);
}
/* .filters select と同じ扱い。上の input, select, textarea の width: 100%
   の宣言が検索欄にも効き、.filters（display: flex; flex-wrap: wrap）の帯を
   1行まるごと占有していた（顧客一覧、B-3）。font-size は明示せず継承の
   まま var(--fs-lg) = 16px を保つ——iOS Safari のフォーカス時自動拡大対策
   （直上のコメント参照）。 */
.filters input[type="search"] { width: auto; margin: 0; }
/* [2026-09-12] 検索欄の幅。width: auto だと <input size> 既定の約20字幅で
   placeholder（氏名・かな・メール・電話・所属）が切れる。狭幅は
   04-narrow.css の .filters-search が行幅いっぱいにする。 */
.filters-search { min-width: 280px; }

button, .btn {
  display: inline-block; padding: var(--space-8) var(--space-16); font-size: var(--fs-sm); font-weight: 700;
  color: var(--on-fill); background: var(--blue); border: 0; border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px var(--shadow-btn);
}
button:hover, .btn:hover { background: var(--navy); }

/* 破壊操作は既定で塗らず、hover で初めて赤くなる（決定2の撤回・裁定1、
   密度設計 2026-09-10）。2026-09-05 の決定2「破壊操作は hover でも赤の
   まま」を、2026-09-10 に依頼者が撤回した。撤回の理由: 既定から赤く
   塗ると、日常操作（階層1・.btn-primary の青い塗り）と同じ視覚的な
   重さになり、縦に並んだときに押し間違える——「常に主張してくる赤」より
   「触れたときだけ赤くなる」方が、階層の意味（不可逆・金銭）を保てる。
   新設の階層3（.btn-danger、下の「ボタン3階層」節）と同じ見た目に揃える。
   .delete-btn は改名しない（依頼者指示。テンプレート側の移行は別タスク）。
   平常時が常に赤だった旧実装の経緯（#1f6fb2→#8f2a22 のコントラスト等）は
   もう成立しないため、ここでは残さない——現在の理由だけを書く。 */
.delete-btn {
  background: var(--surface);
  color: var(--alert);
  border: 1px solid var(--rule-alert);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--fs-sm);
}
/* hover / :focus-visible で初めて赤く塗る。:focus-visible を並記するのは
   キーボード操作者が永久に「塗られていない」状態のまま気づけないため
   （旧実装のコメントの理由はここでも変わらず有効）。 */
.delete-btn:hover, .delete-btn:focus-visible { background: var(--alert); color: var(--on-fill); }

/* [2026-09-12 依頼者指摘] 「白地＋濃い枠＋太字」の副ボタンは既定の
   フォーム部品のように見えて古い、との指摘。カード（.card）と同じ
   「薄い枠（--rule）＋薄い影（--shadow-card）」の面にして、ページの
   雰囲気（温かい地色・角丸・枠なしの薄い影）に寄せる。濃い枠
   （--rule-strong）は入力欄に残す——ボタンは文字と面で識別できる。
   高さは 32px 固定（.btn-secondary と同じ）。狭幅は 04-narrow.css の
   44px 群が min-height で勝つ。アイコン（公開URL の外部リンク印）を
   添えるため gap を持つ。 */
.btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  height: 32px; padding: 0 var(--space-12); font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink); background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); text-decoration: none;
  box-shadow: 0 1px 2px var(--shadow-card);
}
.btn-quiet:hover { border-color: var(--rule-strong); background: var(--surface-alt); color: var(--ink); }
.btn-quiet:focus-visible { border-color: var(--blue); }
/* [2026-09-14 ユーザー指摘] 開催回パネル下部の「編集」だけ色を変える。
   高さ・余白は .btn-quiet のまま（隣の「申込一覧を開く」と縦幅を揃える）で、
   塗りと文字色だけ --blue の反転にする。hover は主ボタンと同じ濃さへ。 */
.btn-quiet.btn-quiet-accent { color: var(--on-fill); background: var(--blue); border-color: var(--blue); }
.btn-quiet.btn-quiet-accent:hover { color: var(--on-fill); background: var(--navy); border-color: var(--navy); }
.btn-quiet svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* 押せないことを見て分かるようにする。.btn-quiet が color を明示しているため
   ブラウザ既定の淡色化が効かず、無効でも有効と1pxも変わらない見た目になる
   （UIレビューで実測）。枠と地も落として、押せる行と並んだときに区別できる形にする。 */
.btn-quiet:disabled, button:disabled {
  color: var(--ink-2); background: var(--bg-quiet); border-color: var(--rule);
  cursor: not-allowed; box-shadow: none;
}
.btn-quiet:disabled:hover, button:disabled:hover {
  border-color: var(--rule); color: var(--ink-2); background: var(--bg-quiet);
}

/* ============================================================
   密度設計（2026-09-10）のボタン3階層。.btn-quiet / .delete-btn は
   Task 5〜12 がテンプレートを書き換えるまでの移行期間そのまま残す
   （改名しない・依頼者指示。2系統併存は承知の上）。クラス名は後続
   タスクが同時に参照するため依頼者が先に固定した:
     階層1(日常・可逆)=.btn-primary / 階層2(二次・出力)=.btn-secondary /
     階層3(不可逆・金銭)=.btn-danger

   実測（README 受け入れ条件）: PC の階層3は 28px / 32px の2値。

   [Fix round 1, Critical 3, 依頼者裁定] 当初は申し送りの「抽斗の中28px・
   見出し32px」という記述を字面どおりに取り、<details open> の <summary>
   より後ろ（本文側）を28pxとしていた。しかしレビューが原本
   `管理画面 密度設計案.dc.html` を実測した結果、逆だった: 32pxの
   破壊ボタン（キャンセルする 508行・削除する 869行 等）はすべて抽斗の
   本文の中にあり、28pxの版（再送する 280行・統合する 894/1279行）は
   いずれも表の行（<tr>）の中にある。実際の分かれ目は「抽斗の外/中」
   ではなく「主操作＝32px／表の行内の小ボタン＝28px」。

   [Fix round 2, Critical 2, 依頼者裁定] round 1 はこれを `tr .btn-X`
   （<tr> 配下という構造）で表現していたが、レビューが原本を実測した
   ところ `<tr>` も `<table>` も1つも存在しない（tr count: 0, table
   count: 0, grid rows: 69）。28px/32pxのボタンはすべて `display:grid`
   の div 行の中にあり、`tr .btn-X` が動いていたのは既存テンプレートが
   たまたま <table> を使っているからにすぎない——Task 5 が申込一覧を
   グリッドに移した瞬間、tr が消えて静かに既定値へ戻る。CSSのテストは
   テンプレートを見ないので、このドリフトを止める関所が無かった。
   round 2 はこれを構造依存をやめた明示的な修飾クラス `.btn-inline` に
   置き換えた（primary=32px・danger=28px+padding8pxの1セットのみ）。

   [Fix round 3 → Fix round 4, 要求1, 依頼者裁定] 原本のボタン51件
   （`height:` を持つ <button>。狭幅は min-height で別建て12件＝
   44px×7＋48px×5。2026-09-11 に原本を再集計して確定）の全数
   調査。round 3 の表は誤っており、2人目のレビュアーが数え直した次の
   内訳が正しい（このリポジトリ側でも独立に数え直して一致を確認した）:

     件数  高さ   階層          水平padding  CSSでの書き方
      3   40px  primary       16px        .btn-primary（既定のみ）
      8   32px  primary       16px        .btn-primary.btn-h32
     12   32px  secondary     12px        .btn-secondary（既定のみ）
      7   32px  danger        12px        .btn-danger（既定のみ）
      3   28px  primary        8px        .btn-primary.btn-h28
                                           + .btn-primary.btn-pad-tight
      4   28px  secondary     12px        .btn-secondary.btn-h28
                                           （pad-tightを付けず既定12pxを継承）
      4   28px  secondary      8px        .btn-secondary.btn-h28
                                           + .btn-secondary.btn-pad-tight
      3   28px  danger         8px        .btn-danger.btn-h28
                                           + .btn-danger.btn-pad-tight
     --  ここまで44件（BUTTON_COMBOS の8通り）。残り7件:
      5   28px  実行時データ    8px        階層クラスをテンプレートが実行時に
                                           選び、.btn-h28 + .btn-pad-tight を
                                           常に添える（原本は Jinja 変数で
                                           背景・文字・枠を差し替えている）
      1   32px  disabled      12px        .btn-secondary:disabled /
                                           .btn-danger:disabled（既定のまま）
      1   40px  disabled      12px        原本の不統一（依頼者裁定）。既存の
                                           .btn-primary:disabled（40px/16px を
                                           継承）に揃える
     --
     51

   round 3 の表は 32px primary を .btn-primary の既定と書いていたが、
   .btn-primary の既定の高さは 40px である。この表を読んで .btn-h32 を
   貼り忘れると、32pxのつもりで40pxのボタンが出る——Task 5〜12 は上の
   表のとおりに貼ること。round 3 の件数も誤りだった。原因は (a) 40px
   primary と disabled を色で近い階層に寄せていたこと、(b) 階層が実行時
   データの5件を secondary と決めつけていたこと。

   高さとpaddingを直交する2系統の修飾クラスに分けた（クラス名は
   このタスクで決めた。Task 5〜12が要素に複数クラスを重ねて使う）:
     `.btn-h32` … primary専用（primaryだけ既定が40px）。secondary/danger
                  は既定で既に32pxなのでこのクラスを持つ規則を作らない。
     `.btn-h28` … 3階層共通の28px化。
     `.btn-pad-tight` … 水平paddingを8pxへ詰める。28pxでも既定の水平
                  padding（primary=16 / secondary=12 / danger=12）を
                  保つ場合（「28px secondary 12px」4件）は
                  `.btn-pad-tight` を付けない——`.btn-h28` だけで足りる。

   [Fix round 4, 要求2/3, 依頼者裁定] 高さ・水平paddingは「その値を
   宣言した規則がどこかに在る」ではなく「カスケードを解いた実効値」で
   検査する（test_ボタン3階層は原本の8通りの高さxpaddingの組み合わせを
   全て出せる）。`.btn-*.btn-h28` と `.btn-*.btn-pad-tight` は同詳細度
   (0,2,0) で pad-tight 側が後ろにあるため、pad-tight 側に height を
   足すと h28 が黙って負ける——足さないこと。あわせて、高さ・水平padding
   を宣言する規則に combinator（子孫・子・隣接。祖先の要素名やコンテナの
   クラスに依存する形）を書くことを一律に禁止した
   （test_ボタンの高さと水平paddingを宣言する規則は祖先や状態に
   依存しない）。禁止しているのは「特定の祖先の名前」ではなく「祖先や
   状態に依存して高さ・水平paddingを決めること」そのもの。

   [Fix round 3, 要求4, 依頼者裁定] 修飾クラスは必ず階層クラスとの
   複合（同じ要素に `.btn-primary` と `.btn-h28` の両方が付く形）でしか
   効かせない。`.btn-h28` 単独で height:28px を宣言する裸の規則を書くと、
   テンプレート側が「クラス単体を貼るだけ」という誤った使い方をした
   ときに3階層すべてへ一律28px/8pxが降ってしまう（実測。
   test_密度修飾クラスは階層クラスと複合でしか使われない が固定）。
   そのため以下は必ず `.btn-primary.btn-h28` のように階層クラスとの
   複合セレクタで書く。修飾クラスをテンプレートに付けるのは
   Task 5〜12 の担当（このタスクは CSS とテストだけ）。 */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-16); height: 40px;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--on-fill); background: var(--blue); border: 0;
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px var(--shadow-btn);
}
.btn-primary:hover { background: var(--navy); }
/* 「32px primary 16px」(8件、パネル内の主操作)。primaryだけ既定が40px
   （「40px primary 16px」3件＝承認する・返金済みにする・追加する）なので
   専用の高さ修飾クラスを持つ。padding は既定の16pxを継承する。 */
.btn-primary.btn-h32 { height: 32px; }
/* 「28px primary 8px」(3件、行内の承認)。高さと水平padding、それぞれ
   独立した修飾クラスの複合で表す。 */
.btn-primary.btn-h28 { height: 28px; }
.btn-primary.btn-pad-tight { padding: 0 var(--space-8); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  /* [Fix round 2, ラウンド0からの持ち越し] 原本実測: 32px高さのボタンは
     水平padding 12px（青の主操作=.btn-primaryだけ16px）。.btn-secondary
     は既定で32px高さなのに .btn-primary と同じ16pxのままだった
     （2026-09-11レビュー実測でSURVIVED）。 */
  padding: 0 var(--space-12); height: 32px;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
}
/* Fix round 1, Critical 2: button:hover, .btn:hover（詳細度 0,1,1）が
   background: var(--navy) を宣言している。.btn-secondary:hover（詳細度
   0,2,0）は詳細度で勝つが、border-color/color しか宣言していなかった
   ため、background だけは無宣言の.btn-secondary:hover側ではなく
   button:hoverの宣言がそのまま勝っていた（同じプロパティを2箇所が
   競合して初めて詳細度が意味を持つ——宣言していない側は競合にすら
   参加しない）。素の <button class="btn-secondary"> がhoverで
   紺地に青文字になる実欠陥だった。background を明示して打ち消す。 */
.btn-secondary:hover { background: var(--surface); border-color: var(--blue); color: var(--blue); }
/* [Fix round 4, 要求1] 「28px secondary」(計8件、原本の28px群で最大勢力
   =保存/確認する/行内アクション)。既定で既に32pxなので.btn-h32は不要。
   .btn-h28単独（4件、保存・確認する等）は既定の水平padding12pxを継承。
   .btn-h28 + .btn-pad-tight（4件、行内アクション）で8pxまで詰める。 */
.btn-secondary.btn-h28 { height: 28px; }
.btn-secondary.btn-pad-tight { padding: 0 var(--space-8); }

/* メールアドレスコピー（2026-09-13ユーザー指摘）。.btn-secondary /
   .btn-quiet の両方に併用され、視覚は継承する——ここでは「件数」を
   含む長いラベルが折り返して2段になるのを防ぐだけ（出力ドロワー・
   パネルfootとも横1行の帯の中に並ぶため、折り返すと帯の高さが崩れる）。 */
.copy-emails-btn { white-space: nowrap; }

/* 階層3。既定は赤文字＋赤枠だけで塗らない（決定2の撤回。理由は上の
   .delete-btn のコメントを参照——同じ理由がここにも当てはまる）。
   hover / :focus-visible で初めて --alert を塗り、白文字に反転する。 */
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-12); height: 32px;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--alert); background: var(--surface); border: 1px solid var(--rule-alert);
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
}
.btn-danger:hover, .btn-danger:focus-visible { background: var(--alert); color: var(--on-fill); }
/* 「28px danger 8px」(3件、再送する・統合する等)。既定で既に32pxなので
   .btn-h32は不要。水平paddingも原本の実測どおり8pxへ詰める。 */
.btn-danger.btn-h28 { height: 28px; }
.btn-danger.btn-pad-tight { padding: 0 var(--space-8); }

/* 押せない状態は3階層共通。--fill-disabled / --ink-disabled は密度設計で
   新設した免除トークン（コントラスト検査の対象外、01-tokens.css参照）で、
   :disabled のときにしか使わない。 */
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled {
  background: var(--fill-disabled); color: var(--ink-disabled); border: 1px solid var(--rule);
  cursor: not-allowed; box-shadow: none;
}
.btn-primary:disabled:hover, .btn-secondary:disabled:hover, .btn-danger:disabled:hover,
.btn-danger:disabled:focus-visible {
  background: var(--fill-disabled); color: var(--ink-disabled); border-color: var(--rule);
}

/* 水平マージンを持たせない。.error は card の内と外の両方で使われ、
   どちらでも「親の内容領域の端」に揃うのが正しい。16px を入れると
   カードの外では下のカードと、カードの中では入力欄と行頭がずれる。 */
.error {
  color: var(--alert); background: var(--bg-alert); border: 1px solid var(--alert);
  border-radius: var(--radius); padding: var(--space-12) var(--space-12); font-size: var(--fs-sm); margin: 0 0 var(--space-16);
}
/* .transferred-notice は申込一覧の振替成功の一行（既存の .success の
   見た目をそのまま使う。新しい色は足さない）。 */
.success, .transferred-notice {
  color: var(--ok); background: var(--bg-ok); border: 1px solid var(--ok);
  border-radius: var(--radius); padding: var(--space-12) var(--space-12); font-size: var(--fs-sm); margin: 0 0 var(--space-16);
}
.transferred-notice form { margin-top: var(--space-8); }
/* 密度設計 Task 7（task-7-brief.md）: 申込一覧の通知の整理。.error/.success
   （枠付き・角丸・16pxマージン）は単発の通知向けで、複数積むと一覧の頭を
   大きく下げる（実測 5本で180px超）。ここは .card.flush の中だけで使う
   専用のフラッシュ行——枠を持たず下罫1本（--rule-2）だけで区切り、
   マージンを持たない。失敗系（.notice-fail）は1行1本で常時、完了系
   （.notice-done）は1行に畳む。 */
.notice-fail, .notice-ok, .notice-done > summary, .notice-done-item {
  margin: 0; padding: var(--space-8) var(--space-16); font-size: var(--fs-sm);
  border-bottom: 1px solid var(--rule-2);
}
.notice-fail { color: var(--alert); background: var(--bg-alert); display: flex; align-items: flex-start; gap: var(--space-8); }
.notice-ok { color: var(--ok); background: var(--bg-ok); }
/* .notice（会場未設定の案内）は既存テストが class="notice" の完全一致を
   見ているため増やせない——見た目だけここで揃える。03-public.css の汎用
   .notice（枠付き・16pxマージン、定員到達の予告用）が02より後に読み込まれる
   ため、同じ詳細度だと常にあちらが勝つ。`.card.flush > .notice` まで書いて
   詳細度で上書きする（実測: 詳細度が同じだと venue_missing_warning が45px、
   コンパクト化できていなかった）。 */
.card.flush > .notice { margin: 0; padding: var(--space-8) var(--space-16); font-size: var(--fs-sm); color: var(--warn); background: var(--bg-quiet); border-bottom: 1px solid var(--rule-2); border-radius: 0; }
.notice-done { border-bottom: 1px solid var(--rule-2); }
.notice-done > summary {
  display: flex; align-items: center; gap: var(--space-8); cursor: pointer;
  list-style: none; background: var(--ground-soft); color: var(--ink-2);
}
.notice-done > summary::-webkit-details-marker { display: none; }
.notice-done > summary::before { content: "▸"; color: var(--ink-2); font-size: var(--fs-xs); flex: none; }
.notice-done[open] > summary::before { content: "▾"; }
.notice-done-more { color: var(--ink-2); }
.notice-done-list { background: var(--ground-soft); padding: 0 var(--space-16) var(--space-8) var(--space-32); }
.notice-done-item { border-bottom: none; padding: var(--space-4) 0; color: var(--ink-2); }
.notice-done-list .transferred-notice { margin: var(--space-8) 0; }
.import-report {
  background: var(--surface-alt); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--space-12) var(--space-16); font-size: var(--fs-sm); overflow-x: auto; white-space: pre-wrap;
  word-break: break-word;
}
.preview { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 var(--space-16); }
.preview b { color: var(--ink); }
/* 0件のときの文言。かつて2箇所に分けて定義されており（設定画面タブの
   節に後発の定義があった）、後発が同じセレクタで padding / text-align /
   font-style だけ上書きし、font-size だけ前者が生き残る状態だった
   （2箇所の宣言が合わさって初めて実際の見た目になる、気づきにくい壊れ方）。
   ここに1本化する。 */
.empty {
  text-align: center;
  padding: var(--space-32) var(--space-16);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-style: italic;
}
/* .empty の唯一の文字色付きリンク（0件の復帰リンク）が色指定を持たず
   ブラウザ既定色のまま出ていた（レビュー軽微-14）。 */
.empty a { color: var(--blue); }
.muted { color: var(--ink-2); font-size: var(--fs-sm); }

table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: var(--fs-sm); }
th {
  padding: var(--space-8) var(--space-12); background: var(--surface); text-align: left;
  font-size: var(--fs-xs); color: var(--ink-2); font-weight: 700;
  letter-spacing: .04em; border-bottom: 1.5px solid var(--rule);
}
td { padding: var(--space-12) var(--space-12); border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
/* :has(:focus-visible) が無いと、マウス操作者だけが「今どの行にいるか」の
   手掛かりを得ていた（キーボードで行内のリンクへ tab 移動しても行の強調が
   出ない。レビュー B-1）。:focus-within は行内のリンク・ボタンをクリック
   しただけでも発火し、キーボード操作者への手掛かりのつもりが見た目の変化を
   マウス操作にも広げてしまう（round1レビュー指摘5）。:focus-visible は
   マウスのクリックでは当たらないので :has() と組み合わせ、狙いどおり
   キーボード操作のときだけ行を強調する。tests/test_style_guard.py の
   test_行のホバー強調はfocus_withinも持つ が3箇所（このファイル・
   06-settings-tabs.css の .list-table・04-narrow.css の .session-list）を
   まとめて見る。 */
tbody tr:hover td, tbody tr:has(:focus-visible) td { background: var(--surface-alt); }
table input { margin-top: 0; }

.num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-md); }
th.num { font-weight: 700; font-size: var(--fs-xs); }
/* 0 を沈める。非0の数字を目立たせるため（2026-09-05 デザイン確定案）。
   別クラスで足し、既存の .num 宣言は変えない。**金額列には付けない** ——
   .num は件数と金額の両方に付いており、金額側に及ぶと「入金額0・純売上0」
   という最初に気づくべき数字が最も沈む。金額側に zero が無いことは
   tests/test_style_guard.py の test_金額のセルにzeroクラスを付けない で守る。 */
.num.zero { color: var(--ink-2); }

/* 売上レポートの合計行・小計行。数字だけの行が縦に並ぶ表なので、
   地の色を変えないと、どこまでが小計でどこからが明細か読めない。
   --ground-soft はページ地（--ground）の上に置く帯の色で、白い表の
   面（--surface）の上では沈んで見分けが付かなかった（対白 1.035）。
   --ground（対白 1.09）に差し替え、上罫でも区切る。 */
.total-row { background: var(--bg-quiet); font-weight: 700; }
.subtotal-row { background: var(--ground); border-top: 1.5px solid var(--rule); }

/* tbody tr:hover td の背景（--surface-alt）は td 側を塗るため、行側の
   .total-row / .subtotal-row の地色を覆ってしまい、ホバー時に強調が
   消える（実測: 合計行が対白 1.04 までほぼ白くなる）。.session-list の
   tbody tr:hover td に background: transparent を当てて打ち消すのと
   同じ考え方で、この2種の行だけホバー時の td 背景を打ち消して行側の
   色を透かす。 */
.total-row:hover td, .subtotal-row:hover td { background: transparent; }
.confirmed { color: var(--ok); }
.pending { color: var(--warn); }
.available { color: var(--blue); }
.full { color: var(--alert); }
.date { font-weight: 700; font-size: var(--fs-md); }

.pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  padding: 2.5px var(--space-8); border-radius: 999px; background: var(--bg-quiet); color: var(--ink-2);
}
/* pill-open（公開中）と pill-ok（成功）は同じ見た目。名前を分けているのは、
   意味が違うものを1つの名前で兼ねると、片方の色を変えたときに巻き添えが出るため。 */
.pill-open, .pill-ok { background: var(--bg-ok); color: var(--ok); }
.pill-alert { background: var(--bg-alert); color: var(--alert); }
/* 「見ておけばよい」トーン（原本 `S`/`W` の琥珀）。対応が要る .pill-alert
   と分ける——全部赤にすると優先度が読めなくなる（Task 5 修正ラウンド1
   レビュー指摘 M-3・M-4）。 */
.pill-warn { background: var(--bg-quiet); color: var(--warn); }

/* [2026-09-12] 顧客一覧（customers.html）の刷新。最終申込日・累計支払額の
   代わりに「申込中」「受講歴」をコース名のチップで出す。
   .course-chip は .pill と同じ地色・角丸（999px）だが、コース色の点
   （::before）を持つ点だけ違うので別クラスにした——.pill に色付きの
   ::before を足すと、既存の pill-open/pill-alert/pill-warn（面全体で
   トーンを示す）と役割が混ざる。margin は右と下に取り、折り返して2段に
   なっても隣のチップと重ならないようにする。 */
/* [2026-09-12 依頼者指摘] 申込中チップはクリックでその開催回の申込一覧へ
   飛べるようにする（<span> → <a>）。text-decoration/color を明示するのは、
   <a> の既定（下線・青文字）を防ぐため——.course-chip 自体の見た目
   （display: inline-flex 等）は <a> でも崩れない。 */
.course-chip {
  display: inline-flex; align-items: center; gap: var(--space-4);
  /* 24px は WCAG 2.5.8（対象サイズ）の最小値。<a> 化（2026-09-12）に
     伴い、44px/24pxのタップ集合からは除外した（static/04-narrow.css の
     同日コメント参照）が、集合の外でも最小値そのものは満たしておく。 */
  height: 24px; padding: 0 var(--space-8); margin: 2px var(--space-4) 2px 0;
  border-radius: 999px; background: var(--bg-quiet); color: var(--ink);
  font-size: var(--fs-xs); white-space: nowrap;
  text-decoration: none;
}
/* 押せることが分かるように、hover でだけ下線を出す。 */
.course-chip:hover { text-decoration: underline; }
.course-chip::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--chip-color, var(--ink-2));
}
/* 受講歴（過去）はコース色を持たないので、点は中立色（--ink-2）で固定する。 */
.course-chip-past::before { background: var(--ink-2); }
.course-chip-date, .course-chip-count { color: var(--ink-2); }
/* [2026-09-13 ユーザー指摘] 復習参加の申込が通常参加と同じチップに見え、
   顧客一覧だけでは区別できなかった。区分表示の「復習」（.cell-kind.
   is-review、開催回パネル・申込一覧）と同じ太字・紺色で揃える。 */
.course-chip-review { font-weight: 700; color: var(--navy); }

/* 氏名は詳細ページへのリンクだが、他ページのテーブル内リンク（--blue）と
   違い既定は本文色（--ink）にする——一覧の主情報なのでリンクだと気づかせる
   ためだけに青くする必要が無い。hover で初めてリンクだと分かれば十分。 */
.cust-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.cust-name:hover { color: var(--blue); }
/* font-weight: 400 を明示するのは、375px の .list-table.stacked td:first-child
   の font-weight: 700（行の見出し扱い）を継承して、ふりがなまで太字に
   なるのを止めるため（実機で確認）。 */
.cust-kana { display: block; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 400; }
.cust-contact { color: var(--ink-2); font-size: var(--fs-sm); }
/* チップが2段に折り返す行で、氏名・連絡先が下へ沈まないようにする。 */
.customer-list td { vertical-align: top; }

/* ページ送り。.monthnav（カレンダーの月送り）と同じ「ひとまとまりの
   帯」の考え方だが、こちらは前へ/次へ/位置の3要素だけなので折り返し
   禁止（white-space/flex-wrap:nowrap）まではしない——.pager 自体が
   .card-head の外に単独で置かれ、隣の要素と競合しないため。 */
.pager { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); }
.pager-pos { color: var(--ink-2); font-size: var(--fs-sm); }

/* メール送信履歴（作り直し・Task B・2026-09-11 依頼者指摘）: 1行＝1種別の
   縦の表。狭幅（既定）は素の縦積み——`.mail-history-row` の子は
   `display: block` で上から「種別名」「状態」「最終送信日時」「回数」
   「操作」の順に並ぶ。768px以上のグリッド化は static/05-admin.css 側
   （.detail-columns と同じ @media (min-width: 768px) の中）。 */
.mail-history { margin-top: var(--space-8); }
.mail-history-row {
  padding: var(--space-8) 0; margin: 0; border-bottom: 1px solid var(--rule-2);
}
.mail-history-row:last-child { border-bottom: 0; }
.mail-history-row > * { display: block; }
/* 見出し行は768px未満では出さない（縦積みでは自明なため）。768px以上の
   表示は static/05-admin.css 側で明示的に打ち消す。 */
.mail-history-head { display: none; }
/* 何のメールかを示す種別名（2026-09-10 依頼者指摘）。ピルより先に読ませる。 */
.mail-history-name { font-weight: 700; }
.mail-history-status { margin-top: var(--space-4); }
.mail-history-status .pill {
  margin-right: var(--space-8);
  /* [2026-09-12 ユーザー指摘] 「対象外（STORES時代の申込）」など長い
     ラベルが複数行に折り返ると、999pxの丸み（.pill の既定）が縦横比の
     近い箱に掛かって円形に近くなり、四隅の文字が視覚的な丸みの外へ
     はみ出していた（実機で確認）。この列は他のメール状態ピル（送信済み・
     入金済み等、すべて1行に収まる短い語）と共存するため、.pill 全体の
     999pxは変えず、この列の中だけ角丸を通常のトークンへ落として
     複数行でも破綻しない見た目にする。 */
  border-radius: var(--radius);
  white-space: normal;
  overflow-wrap: break-word;
}
.mail-history-sent, .mail-history-count { margin-top: var(--space-4); color: var(--ink-2); font-size: var(--fs-sm); }
.mail-history-action { margin-top: var(--space-8); }
/* メール再送ボタン専用（2026-09-12 依頼者指摘: 「文字が枠からはみ出して
   変になっている」）。種別の短縮名（最長13字、_MAIL_KIND_SHORT_NAMES の
   「開催中止（キャンセル待ち）」）を含む文言は、狭い操作列や375pxでは
   1行に収まらないことがある。.btn-h28/.btn-h32 の固定 height のまま
   複数行に折り返すと、はみ出た行がボタンの外枠の上下に飛び出て見える
   （実測。テキストが枠を割って見える不具合そのもの）。

   高さ・水平paddingを .btn-h28 等の既存修飾クラスに任せず、この専用
   クラス側に持たせて height: auto にする——height/padding を階層クラス
   との単一コンパウンドで宣言する限り、既存の8通りの表
   （test_ボタン3階層は原本の8通りの高さxpaddingの組み合わせを全て出せる）
   はこの新しいクラス組み合わせを対象外として無視する（_resolve_button_
   layout は member_classes が対象の class集合の部分集合かどうかしか
   見ないため、.mail-resend-btn を含む組は8通りのどれとも一致しない）。
   祖先セレクタ（`.mail-history-action .btn-h28` のような形）は
   _button_layout_offenders が構造依存として禁じているので使わない。

   min-height は使わない（48/44/24pxのタップ領域予約値専用。装飾に使うと
   test_ボタン3階層はheightを使いmin_heightの予約値を装飾に使わない が
   落ちる）。height: auto に padding var(--space-4)（上下）を足すだけで
   1行のときは既存の28px相当の見た目になり、折り返した2行目以降は
   paddingの外へはみ出さず自然に箱が伸びる。 */
.btn-secondary.mail-resend-btn, .btn-primary.mail-resend-btn {
  height: auto;
  padding: var(--space-4) var(--space-8);
  line-height: 1.3; white-space: normal; text-align: center;
}

.approval-section {
  display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: flex-end; margin-top: var(--space-8);
}
.approval-section label { margin-bottom: 0; }
.approval-section input { width: auto; }
.approval-section input[name="paid_amount"],
.approval-section input[name="paid_at"],
.approval-section input[name="cancel_fee_amount"],
.approval-section input[name="refunded_at"] { max-width: 160px; }

/* 申込一覧。名前と状態だけを並べ、詳細は開いたときだけ出す。
   外側は .card.flush（padding: 0）なので、左右の余白をここで持つ。
   上の .card.flush > p.muted と同じ 16px に揃える（実機確認: 揃えないと
   summary・表・再送ボタンだけがカードの端にべったり接して見える）。 */
/* 行の下罫は原本では --rule-2（#eeeae3。見出し行の1.5px罫だけが --rule）。
   Task 5 で列と行送りを原本に合わせた以上、罫の濃さも対で合わせないと
   一覧全体が原本より重く見える（Task 5 修正ラウンド1レビュー指摘 m-10）。 */
.entry { border-bottom: 1px solid var(--rule-2); padding: var(--space-8) var(--space-16); }
/* min-height はここに書かない。タップ領域は幅で44px/24pxが変わる規則
   （狭幅=タップ・広幅=マウス）なので、下の @media 2箇所に .entry summary を
   加えて既存のセレクタ集合と同じ値に揃える（2026-08-18 レビュー指摘）。
   list-style: none は、display: flex を当てるとブラウザ既定の開閉マーカーが
   消えるため（Safari実機で確認）。::before で代わりの矢印を出す。 */
.entry summary {
  display: flex; align-items: center; gap: var(--space-12); cursor: pointer; flex-wrap: wrap;
  list-style: none;
}
.entry summary::-webkit-details-marker { display: none; }
.entry summary::before {
  content: "▸"; color: var(--ink-2); font-size: var(--fs-xs); flex: none;
}
.entry[open] summary::before { content: "▾"; }
/* 密度設計（2026-09-10、Task 5）: 氏名14px太字（列2）。旧実装は本文の
   13px（fs-sm）を継承していただけで、明示的な指定が無かった。
   原本は氏名に white-space: nowrap を持ち、長い氏名では代わりにかな側
   （.entry-kana の ellipsis）が縮んで吸収する。無いと氏名自体が2段に
   折り返り、行の高さが崩れる（Task 5 修正ラウンド1レビュー指摘 M-5・
   実測: 39px→60.39px）。
   overflow/text-overflow は修正ラウンド2で追加（review4 N-1）: かな側が
   0まで縮んでも氏名自体は縮む手段が無く、1000px幅・13字の氏名が「申込」
   列に27.2pxはみ出して両方読めなくなっていた。.entry-kana と同じ形で
   氏名側も省略できるようにする（flexアイテムの自動最小幅は overflow が
   visible でないときだけ0になる——.entry-kana が min-width:0 を書かずに
   縮められているのと同じ理屈）。 */
.entry-name { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* かな11px（列2）。既存の .muted（13px）とは別の値のため専用クラスにする
   （.muted を13pxのまま使う既存箇所が他に多数あり、そちらは変えない）。 */
.entry-kana { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* customer_detail.html の素の <details><summary>（受講歴を追加する／
   受講歴を削除する／概要の内訳）。.card-head を持たない分、既定のまま
   だと文字1行ぶんの高さ（約22px）しか無くタップ領域を満たさない
   （Minor-6実測）。min-height はタップ領域専用の規則なので、値そのもの
   （44px狭幅／24px広幅）は 04-narrow.css / 05-admin.css の既存の集合に
   加える（ui-reviewer.md の ADMIN_TAP とも同期させること）。

   2026-09-12 依頼者指摘: 素の文字にしか見えず押せることが分からない
   （実機確認）。padding・太字・上罫線・hover を足して「押せる行」に
   見せる——border-top は上の要素（card-head や直前の抽斗）との境目を
   兼ねる。 */
.cust-drawer-summary {
  display: flex; align-items: center; gap: var(--space-8); cursor: pointer; list-style: none; flex-wrap: wrap;
  padding: var(--space-8) var(--space-16); font-weight: 700; color: var(--ink); border-top: 1px solid var(--rule-2);
}
.cust-drawer-summary:hover { background: var(--surface-alt); }
.cust-drawer-summary::-webkit-details-marker { display: none; }

/* [D2] 抽斗の見出し2種（.cust-drawer-summary と summary.card-head）に
   右端の山形（chevron）を付ける。押せる行に見せるための視覚的な手がかり
   ——テキストだけでは開閉できることが伝わらない（実機確認）。currentColor
   を使うので、.cust-drawer-danger の赤文字（05-admin.css）も自動で追随
   する。開閉状態は details:open 疑似クラスで判定する——details の open
   属性を見る属性セレクタは使わない（依頼者裁定で禁じられているのはその
   属性セレクタそのもの。`:open` は状態を見る擬似クラスで別物。対応しない
   ブラウザでは山形が下向きのまま残るだけで、開閉の動作自体には影響しない）。 */
.cust-drawer-summary::after, summary.card-head::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-left: auto; flex: 0 0 auto; opacity: .6;
}
details:open > .cust-drawer-summary::after, details:open > summary.card-head::after {
  transform: rotate(-135deg);
}
/* [丸め報告] calc(var(--radius-card) - 1px)（11px）は border-radius の
   ガードテスト（RADIUS_SCALE のトークン・999px・50%・0 以外を許さない）
   を calc() ごと弾く。スケール外という扱いで最も近い段に丸める
   ——var(--radius-card) 自身（12px、差1px）を採用する（var(--radius) は
   8px で差4px、var(--radius-13) は13pxで差2px、どちらも遠い）。 */
summary.card-head:hover { background: var(--surface-alt); border-radius: var(--radius-card); }

/* [D1] 事務局メモ（2026-09-12 依頼者指摘「事務局メモと保存ボタンが
   密接しすぎ」）。説明文（.memo-hint）と保存ボタンを同じ行にまとめ、
   space-between で離す。幅を問わず効く——375pxで説明文が消えても
   margin-top ぶんは textarea との間に残るので、ボタンが textarea に
   直接くっつく状態にはならない（04-narrow.css の .cust-memo-hint
   display:none はそのまま）。ボタンは .btn-primary に combinator 付きで
   height/padding を書かない（test_ボタン3階層は... が禁じる。高さは
   .btn-h32 に任せる）ので、ここでは flex だけを足す。 */
.cust-memo-foot {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-12); margin-top: var(--space-12);
}
.cust-memo-foot .memo-hint { margin: 0; flex: 1 1 auto; }
.cust-memo-foot .btn-primary { flex: 0 0 auto; margin-left: auto; }
/* 申込者の詳細は th/td の2列。分割できない長いメールアドレスが横スクロールの
   窓（狭幅で317px）から91px前後はみ出し、周りの overflow: hidden に切られて
   読めなくなる。折り返して収める。 */
.entry table td { overflow-wrap: anywhere; }

/* 列見出し行（原本 hdrA/hdrN。Task 5 修正ラウンド1レビュー指摘 M-1）。
   原本は一覧のたびに必ずこの見出し行を持つ。狭幅（≤767px）ではカードと
   して読む一覧に列見出しは要らないので出さない——.entry summary が
   狭幅で flex に戻るのと同じ判断。グリッド自体（列幅・grid-column）は
   .entry summary と共有する（05-admin.css の @media 内）。 */
.entry-head {
  display: none;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink-2); letter-spacing: .04em;
  background: var(--ground-soft); border-bottom: 1.5px solid var(--rule);
  padding: var(--space-8) var(--space-16);
}
/* --font-head は body:not(.public) 経由でしか宣言しない（公開側に届かない
   形の既存の約束。test_font_headは公開側に届かない形になっている 参照）。
   .entry-head は申込一覧（管理画面）専用だが、素のクラスセレクタだけでは
   その保証が機械的に読み取れないため、この1行を分けて明示する。 */
body:not(.public) .entry-head { font-family: var(--font-head); }

/* ============================================================
   密度設計（2026-09-10、Task 5）: 申込一覧10列グリッドの列内容。
   列の並び・幅（grid-template-columns）は狭幅では効かない（.entry summary
   は既定のまま flex）ので、ここは列内の文字サイズ・配置だけを持つ。
   グリッド自体（列幅・gap・grid-column の割当）は 05-admin.css の
   @media (min-width: 768px) に置く——タップ/マウスで規則が変わる既存の
   分担（コメント上の「min-height はここに書かない」と同じ考え方）。
   ============================================================ */
/* 列1・メモ印（16px）。●/◐/◉ の1文字だけなので中央寄せにする。
   開催回パネルの同じ印（.attendee-mark）は --blue を持つが、こちらは
   本文色のままだった（同じ関数 note_mark() が出す同じ印の色が画面で
   ずれていた。Task 5 修正ラウンド1レビュー指摘 review4 m-3）。 */
.cell-memo { text-align: center; color: var(--blue); }
/* 列2・氏名・かな（可変）。氏名とかなをベースラインで並べる。 */
.cell-name { display: flex; align-items: baseline; gap: var(--space-8); min-width: 0; }
/* 列3・申込（96px・11px・tabular）。 */
.cell-applied { font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 列4・区分（48px）。通常=11px --ink-2 ／ 復習=11px太字 --navy。 */
.cell-kind { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.cell-kind.is-review { font-weight: 700; color: var(--navy); }
/* 列5・状態（96px）。状態ピルは必ず1つだけ。 */
.cell-status { text-align: center; }
/* 原本は状態ピルに white-space: nowrap を持つ（行グリッド7箇所すべて）。
   これが無いと、96px列に収まらない長さのラベル（「実入金額が未記録」等）
   でピルが2段になり、固定10列グリッドの主目的（1行＝固定高さ）が
   ごく普通の確定行で壊れる（Task 5 修正ラウンド1レビュー指摘 C-1・
   実測: 39px→56.09px）。 */
.cell-status .pill { white-space: nowrap; }
/* 列6・注意（168px・1段固定）。3件以上は先頭1つ＋「＋N」に畳む
   （テンプレート側）。white-space: nowrap でバッジが2行に割れるのを防ぐ。 */
.cell-alert { display: flex; align-items: center; gap: var(--space-4); overflow: hidden; }
.cell-alert .pill { white-space: nowrap; }
/* 列7・請求/入金（136px・右揃え・tabular）。不一致のときは入金額側だけ
   --alert にする（依頼者裁定。ピル側の文言修正と対）。 */
.cell-amount { font-size: var(--fs-sm); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 既定は請求額（--ink-2）より濃い --ink にする（原本 paidFg の既定値。
   コントラスト差で「これが実際の入金額」と読ませる）。未記録（—）だけ
   --ink-2、不一致は --alert（依頼者裁定・変更なし）。 */
.cell-amount .amount-paid { font-weight: 700; color: var(--ink); }
.cell-amount .amount-paid.amount-unrecorded { color: var(--ink-2); }
.cell-amount .amount-paid.amount-alert { color: var(--alert); }
/* 事前課題（72px、ACLS・PEARSのみ）。チェックボックス自体に width を
   当てない（task-5-brief.md）。出席の列（56px）は 2026-09-14 の依頼者決定で
   廃止した（出席していない人はキャンセルにする運用）。 */
.cell-prework { display: flex; justify-content: center; }
/* チェックの<label>。widthは当てない（brief「チェック（widthを当てない）」
   のとおりチェックボックス自体のサイズは変えない——ここでの width/min-width
   はチェックボックスではなく、この<label>＝タップ領域に対して足す）。
   高さは min-height（.check-tap を ADMIN_TAP の44px/24px集合に登録。
   static/04-narrow.css・05-admin.css・ui-reviewer.md）で作る
   （Task 5 修正ラウンド1レビュー指摘 review4 M-1）。幅は同じ2ファイルに
   min-width を追加して作る（Task 5 修正ラウンド2 rereview4: 44×21px/
   24×21pxのまま幅がWCAG 2.2 SC 2.5.8の24pxを割っていた）。
   margin: 0 は隣の label.check（342行）と同じ理由——上の label の
   全体規則（margin-bottom: var(--space-16)）を明示的に打ち消さないと、
   チェック欄のある行だけ+16px高くなる（Task 5 修正ラウンド2 Critical
   N-1: 39px→57pxの退行。実測・変異で確認済み）。 */
.check-tap { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; }
/* 事前課題チェックの添え字「事前課題」。狭幅（04-narrow.css）だけで見せ、
   列見出しのあるPCでは出さない。 */
.check-caption { display: none; }
/* スクリーンリーダー向けだけに残す文字（タップ領域・見た目には影響しない）。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* 列10・操作（96px）。承認/繰り上げボタンは右揃え。 */
.cell-action { display: flex; justify-content: flex-end; }
/* 承認・繰り上げが押せない理由を行の下にも本文で出す（disabled + title
   だけだと畳んだ状態でホバーできず理由が読めない）。 */
.row-note { font-size: var(--fs-xs); color: var(--warn); }
/* メモは「押せない理由」（.row-note、warn色＝注意喚起）と違い、注意・
   警告ではなく単なる情報なので警告色を継がない。 */
.row-memo { color: var(--ink-2); }

/* カード下部の凡例（メモ印）。 */
.entry-legend { font-size: var(--fs-xs); color: var(--ink-2); margin: var(--space-8) var(--space-16); }
/* A2（ユーザー指摘 2026-09-11）: 一覧の末尾の「この回を中止する」／
   「中止メールを再送する」の帯（flex行・末尾なので下端を丸める）。
   旧・出席の保存バー（.attend-save-bar）は 2026-09-14 の出席廃止で撤去した。 */
.session-cancel-bar {
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
  padding: var(--space-16);
  border-top: 1px solid var(--rule-2);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.session-cancel-bar form { margin: 0; }
/* 修了証の確認画面（templates/certificates.html）: 誰に送るかの最終確認
   （2026-09-14 依頼者依頼）。対象の表に1人ずつチェックを出し、末尾の帯に
   人数と送信ボタンを置く（.session-cancel-bar と同じ形の帯）。 */
.cert-pick, .cert-pick-all { accent-color: var(--blue); }
.cert-pick-head, .cert-pick-cell { width: 44px; text-align: center; }
.cert-send-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--rule-2);
  background: var(--ground-soft);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.cert-send-bar .muted .cert-pick-count { font-weight: 700; color: var(--ink); }
/* 詳細（開いた中）の状況バー。一覧で畳まれた注意バッジの全件を読める。 */
.entry-status-bar { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-12); }
.entry-status-bar .pill { white-space: nowrap; }

/* [2026-09-14 ユーザー指摘] 「受講生情報の項目を区切る罫線と、各受講生を
   区切る罫線が同じで見づらい」。開いた行だけ地色を一段落とし（--ground-soft）
   左端に青の帯を立てて、閉じた行（白い面・--rule-2 の罫）と面で区別する。
   中の区画（申込の内容／メモ・メール送信履歴／次にすること）は白い
   カード（.detail-main / .detail-side / .next-actions、下）にするので、
   項目の罫（.item の --rule-2）はカードの内側にだけ現れる。
   box-shadow の inset は、border-left と違って中身の位置をずらさない。 */
.entry[open] {
  background: var(--ground-soft);
  box-shadow: inset 3px 0 0 var(--blue);
}

/* ============================================================
   申込一覧のツールバー1行目（見出し）＋2行目（出力ボタンの帯）。
   ユーザー指摘 2026-09-11（A1）で「ほかの出力 ▾」「この回の操作 ▾」の
   2抽斗をやめ、出力系ボタンをそのまま横並びで出す形に作り直した
   （旧・密度設計 Task 6 の抽斗版を置き換え）。幅に依存しない基本形
   （flexで縦積みにも耐える）だけをここに置く——768px側の追加調整は
   無い（抽斗が無いので05-admin.css側の専用グリッドも不要になった）。
   ============================================================ */
/* 1行目（‹ 開催回一覧／h1／件数バッジ／要約）は既存の .card-head を
   使う。要約テキストが長い開催回（複数講師）でも折り返せるよう、この
   画面専用の修飾クラスで flex-wrap だけ足す（.card-head 本体は他の画面
   多数が使うため触らない）。 */
.card-head.toolbar-head { flex-wrap: wrap; }
.toolbar-summary { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 2行目。左に「出席が未確認」の注記とメール送信状況ピル（A4）、右へ
   出力ボタンが続く——すべて同じ flex 行の項目で、1280pxでは1行、
   幅が足りなければ自然に折り返す（横スクロールはしない）。 */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-8) var(--space-16);
  background: var(--ground-soft);
  border-bottom: 1px solid var(--rule-2);
}
.toolbar-alert { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-size: var(--fs-sm); color: var(--ink-2); }
/* 出力ボタンの帯。個数がAHAの講師数などで増減しても新しいCSSを足さず
   自然に折り返す（task-A-brief.md A1「1280pxで1行、狭幅では折り返し」）。 */
.toolbar-outputs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
/* AHAロスターの注記（A1）。抽斗に隠さず、ボタンの帯のすぐ下に11px小さく
   出す。.toolbar と同じ地色・下罫で1つの帯として続けて見せる。 */
.toolbar-notes { padding: 0 var(--space-16) var(--space-8); background: var(--ground-soft); border-bottom: 1px solid var(--rule-2); }
.toolbar-note { font-size: var(--fs-xs); color: var(--ink-2); margin: var(--space-4) 0 0; }

/* 密度設計 Task 12 修正ラウンド1（2026-09-11）: 375pxだけの「上部集計」
   （確定・承認待ち・入金未確認を常時、残り4つを抽斗）。PC（≥768px）には
   この機能自体が無い（依頼者の制約「PCの表示は変えない」）ので、既定は
   非表示にし、static/04-narrow.css の狭幅 @media だけで表示に戻す。 */
.entry-metrics { display: none; }

/* 抽斗（<details class="drawer">）の開閉マーカー。`.toolbar-chip` は
   ツールバー系の抽斗トグルに共通のマーカークラス。
   ユーザー指摘 2026-09-11（A1）で「Excelで出力／ほかの出力／この回の
   操作」の抽斗2つは廃止し、いったんは375px専用の「ほかの集計」
   （.entry-metrics-drawer、Task 12）だけがこのマーカーを使っていたが、
   F3（修正ラウンド1・Task Aの申告）で375pxの出力ボタンの帯
   （.toolbar-outputs）にも同じマーカーを戻した——ツールバー系の抽斗
   トグルは見た目・開閉マーカーを共通にする。
   .entry summary と同じ理由（ブラウザ既定のマーカーとの二重表示を
   防ぐ）で list-style を消し、::after で代わりの三角を出す。閉時は▾
   （下にパネルを開く）・開時は▴（たたむ）——.entry（▸→▾、横に開く）
   とは向きの意味が逆になる。 */
.drawer > summary.toolbar-chip { list-style: none; cursor: pointer; }
.drawer > summary.toolbar-chip::-webkit-details-marker { display: none; }
.drawer > summary.toolbar-chip::after { content: "▾"; margin-left: var(--space-4); }
.drawer[open] > summary.toolbar-chip::after { content: "▴"; }

/* 抽斗の中身（名簿／AHAロスター／修了証／この回の操作／中止メールの
   再送）。見出し（.drawer-label）＋本文（.drawer-body）の対を、狭幅では
   素の縦積みで読ませ、≥768pxだけ「見出し120px＋本文」の2列グリッドに
   する（05-admin.css）。 */
.drawer-panel {
  padding: var(--space-12) var(--space-16);
  background: var(--ground-soft);
  border-top: 1px solid var(--rule-2);
}
.drawer-label {
  display: block;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink-2);
}
/* --font-head は body:not(.public) 経由でしか宣言しない（公開側に届かない
   形の既存の約束。.entry-head と同じ理由・同じ形）。 */
body:not(.public) .drawer-label { font-family: var(--font-head); }
.drawer-body { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-12); }
.drawer-body-row { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.drawer-body form { margin: 0; }


/* ============================================================
   密度設計（2026-09-10、Task 8）: 申込1件を開いた中身。
   状況4系統 → 次にすること → 2列（項目表／メモ・メール） →
   取り消し・返金の抽斗。グリッド化（列幅・列数）は 05-admin.css の
   @media (min-width: 768px) に置く——他のグリッド（.entry summary 等）
   と同じ「タップ/マウスで規則が変わる」分担。ここは狭幅でも共通の
   見た目（背景・罫・文字サイズ）だけを持つ。
   ============================================================ */
.status-bar { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin: var(--space-4) 0 var(--space-12); }
/* [2026-09-14] 承認／入金の2系統は、罫で囲った箱（1行が2つの空箱に
   見えていた）をやめ、「見出し＋ピル＋補足」を横1行に並べる帯にする。
   縦の高さが減り、下の白いカードと見た目の役割（帯＝要約／カード＝詳細）
   が分かれる。 */
.status-col {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--space-8);
}
.status-col-label { font-weight: 700; font-size: var(--fs-xs); color: var(--ink-2); margin: 0; }
.status-col p { margin: 0; }

/* 「次にすること」は要対応の区画なので、白いカードに --warn の左帯を
   付けて他の2カードと役割を分ける（2026-09-14 の開いた行のカード化）。 */
.next-actions {
  background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--warn);
  border-radius: var(--radius-card); padding: var(--space-12) var(--space-16);
  margin: 0 0 var(--space-12);
}
.next-actions-title { font-weight: 700; margin: 0 0 var(--space-8); }
.next-action { margin: 0 0 var(--space-8); }
.next-action:last-child { margin-bottom: 0; }
.next-action-label { font-weight: 700; margin: 0 0 var(--space-4); }

.detail-main-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-4); }
/* 開いた行の2つの区画を白いカードにする（2026-09-14。上の .entry[open]
   のコメント参照）。項目（.item）の罫はこのカードの中にだけ引く。 */
.detail-main, .detail-side {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-card); padding: var(--space-12) var(--space-16);
}
.item-group { margin: 0 0 var(--space-12); }
.item-group:last-child { margin-bottom: 0; }
.item-group-title { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); letter-spacing: .04em; margin: 0; }
.item {
  display: flex; gap: var(--space-8); align-items: baseline;
  padding: var(--space-8) 0; border-bottom: 1px solid var(--rule-2);
}
.item:last-child { border-bottom: 0; }
.item-label { font-weight: 700; color: var(--ink-2); font-size: var(--fs-xs); flex: none; }
.item-value.is-missing { color: var(--ink-2); }

.detail-side h4, .detail-main h4 { font-weight: 700; font-size: var(--fs-md); margin: 0 0 var(--space-8); }
/* 右カードの2つ目以降の見出し（メール送信履歴）は、上のメモとの間に罫を引く。 */
.detail-side > h4:not(:first-child) { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--rule-2); }
.mail-history-head { padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule-2); }

/* 取り消し・返金の操作。既定で閉じる（<details> に open を持たせない）。
   日常操作と同じ塗りボタンが並ぶ状態をやめるのが設計の骨格の1つ
   （4操作はテンプレート側で .btn-danger を付ける）。
   [2026-09-14 ユーザー指摘] 閉じているときは薄い赤枠を出さず、赤い
   「キャンセル」ボタンだけを中央に置く。開いたときだけ白いカード
   （赤い枠）になり、中の4操作は左寄せで並ぶ。 */
/* 開催回の移動へのリンク（2026-09-14）。キャンセルのボタンと同じく中央に
   置く。危険操作ではないので薄い枠の副ボタン（.btn-quiet）。 */
.move-link { margin: var(--space-16) 0 0; text-align: center; }
.move-link + .danger-drawer { margin-top: var(--space-8); }
.danger-drawer { margin-top: var(--space-16); text-align: center; }
.danger-drawer[open] {
  background: var(--surface); border: 1px solid var(--rule-alert);
  border-radius: var(--radius-card); padding: var(--space-12) var(--space-16);
}
/* [2026-09-13 ユーザー指摘] 全幅の文字だけのトグルは見づらい——.btn-danger
   と同じ見た目の小さな赤ボタンにする（表記も「キャンセル」に短縮。中の
   4操作＝キャンセル/振替/返金/訂正の総称だが、事務局が最初に押すのは
   ほぼ必ずキャンセルのため、それを代表させる）。`inline-flex` で打ち消す
   のは元の `display: block` と同じ理由: `.entry summary`（一覧行の集約
   summary専用、02-components.css 直上／05-admin.css の @media 内）は
   子孫セレクタで書かれているため、.entry の中に入れ子で増えたこの2つの
   抽斗の summary にも当たってしまう（display:flex、768px以上ではさらに
   10列グリッドになり、1行のテキストが16px幅の列に収まらず何行にも
   折り返って縦に伸びる実害があった。密度設計 2026-09-10、Task 8 実装時に
   実測で発見）。05-admin.css の @media 側にも同じ打ち消しが要る
   （そちらは grid になるため、display: inline-flex も併せて上書きする）。 */
.danger-drawer summary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--space-12); height: 32px;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--alert); background: var(--surface); border: 1px solid var(--rule-alert);
  border-radius: var(--radius); cursor: pointer; list-style: none;
}
.danger-drawer summary:hover, .danger-drawer summary:focus-visible {
  background: var(--alert); color: var(--on-fill);
}
.danger-drawer summary::-webkit-details-marker { display: none; }
/* ボタンの見た目にした以上、開閉の▸/▾は不要（.btn-danger自体に矢印は
   無い）。`.entry summary::before`（子孫セレクタ、直上）と
   `.entry[open] summary::before`（開いた行の中は常に▾になる、同ファイル）
   の両方を、詳細度を上げて確実に上書きする（後者は `.entry[open]` が
   クラス+属性2つぶんの詳細度を持つため、同じ詳細度の上書きでは足りず、
   `.entry[open] .danger-drawer summary::before` まで足す必要がある）。 */
.danger-drawer summary::before { content: none; }
.entry[open] .danger-drawer summary::before { content: none; }
.drawer-op { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--rule-2); text-align: left; }
/* 密度設計の作り直し（Task B・2026-09-11）で「申込フォームの回答」の
   抽斗（details.answers-drawer）を廃止したため、専用summaryの打ち消しは
   不要になった。 */

.scroll { overflow-x: auto; }

/* 売上レポートの表は列が14本あり、auto の table layout では 768px
   （管理レイヤーの下限）で、他の数値列が短い内容のまま縮まないぶん
   「開催回」列（改行できるCJK文字列）だけが極端に圧縮され、1〜3文字
   ごとに縦へ折り返る（実測: 開催回62px・thead高185px・明細行高243px、
   375pxより読めない）。375px では逆に自然崩壊で974pxまで広がり読める。
   この表だけに最小幅を持たせ、768px でも同じ974px相当を確保して
   .scroll の横スクロールへ確実に逃がす。他の画面の table は
   width: 100% のままなので影響しない。 */
.sales-table { min-width: 980px; }

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

/* 法令表記の本文は改行を含む長文。div は既定で改行を潰すので、
   テンプレート側で |safe を使わずに改行だけは保つ。 */
.legal-body { white-space: pre-wrap; }
.policy-body { white-space: pre-wrap; }

/* 既定は申込フォーム側（main と同じ640px）に合わせる。一覧
   （body.public.list）だけ1180pxへ上書きする（設計 §9-2。ヘッダー・
   フッターはページの幅に追従させる。以前は .public-header が640px、
   .public-footer が1180pxで食い違っていた）。 */
.public-footer {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-16) var(--space-48);
  display: flex;
  gap: var(--space-16);
  font-size: var(--fs-sm);
}
/* レビュー軽微-8: 下線が無いと「リンクに見えない」。§9-3の裁定は色に
   ついてのもの（--ink-2 のまま揃えない）なので、色はそのまま据え置き、
   下線だけ足して回復する——:root に新しい色は要らない。 */
.public-footer a { color: var(--ink-2); text-decoration: underline; }
.public-footer a:hover { color: var(--blue); }

/* honeypot。display: none にしない。隠し方を変えるとボットに検知される */
.hp { position: absolute; left: -9999px; }