/* ============================================================
   6. 設定画面タブ
   ============================================================ */
.settings-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* 2026-09-14 ユーザー指摘: 会場管理の開催地索引が枠の左端に寄り過ぎて
   見える・数が多くて煩雑。原因は .area-index に左右マージンが無いまま
   .card.flush（padding: 0）の上に直接乗っており、同じカード内の見出し
   （.card-head h2）や説明文（p.muted、margin: 12px 16px）より16px
   左に出ていたこと（実機でgetBoundingClientRectを実測）。
   .area-index / .area-index-link 自体は公開の一覧（course_list.html）と
   共有しているクラスなので変えず、ここ（#tab-venues）だけの上乗せで
   ・見出しと同じ16pxの左右マージンを与えて揃える
   ・薄い地色の枠で1つの「索引」として囲み、本文の白地から浮いた
     チップの壁に見えないようにする
   の2点を直す。 */
#tab-venues .area-index {
  margin: 0 var(--space-16) var(--space-24);
  padding: var(--space-12) var(--space-16);
  background: var(--bg-quiet);
  border-radius: var(--radius);
}
/* 2026-09-14 依頼: 索引を地方別（location_regions.py）に分ける。
   見出し（.area-index-group-label）は新規クラス——公開の一覧
   （course_list.html）は地方分けをしないので、.area-index-* 側には
   足さずここだけに置く。 */
#tab-venues .area-index-group + .area-index-group { margin-top: var(--space-12); }
#tab-venues .area-index-group-label {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
}

/* 管理画面刷新 段4（2026-09-05）: ページ見出し「設定」に Zen Maru Gothic を
   当てる。.settings-container は settings.html だけが使うので、
   スコープ用の body:not(.public) は不要（実測でこのクラスは他に無い）。 */
.settings-container > h1 { font-family: var(--font-head); }

/* タブ語彙の第2系統（設定画面）。クラス名は変えない — settings.html 末尾の
   インラインJS と static/app.js（第1系統・.tabs/.tab/.tab.on）がそれぞれ
   ハードコードしたセレクタで動いており、名前を揃えるとJSを壊す（Phase 8
   設計 §4.3）。ここでは宣言だけを第1系統（:198-214 の .tabs/.tab/.tab.on）と
   同じトークン・同じ値に揃える: フォントサイズ var(--fs-sm)・下線コンテナは
   1px solid var(--rule-2)・選択状態は文字色 var(--ink) + 太字700 + 下線
   var(--blue)。margin-bottom はコンテナの border-bottom 幅の符号反転
   （コンテナ下端にタブ自身の下線を重ねて二重線を防ぐ）なので、コンテナの
   幅を変えたらここも合わせて変える。

   font-family（管理画面刷新 段4・2026-09-05）: Zen Maru Gothic は
   .tab-button / .mail-course-tab-button（button 要素）に直接書かず、
   ここ（親のナビ）に当てて継承させる。button を含むセレクタに直接書くと、
   `.tab-button` がハイフン境界で `\bbutton\b` に一致し、
   test_フォーム部品に書体が指定されている が拾ってしまう（実測）。
   02-components.css の `input, select, textarea, button` に対する
   font-family: inherit の宣言が既にあるので、ここに置くだけで
   .tab-button / .mail-course-tab-button まで届く。
   （同じセレクタで2つ目の規則を作らないこと —— test_タブ第1系統と第2系統は
   同じトークンに揃っている が `rules[selector]` で1個だけ引くため、
   同一セレクタの規則を後から足すと前のプロパティが読めなくなる。実測で
   一度落とした。） */
.tabs-nav, .mail-course-tabs-nav {
  display: flex;
  gap: var(--space-8);
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: var(--space-24);
  flex-wrap: wrap;
  font-family: var(--font-head);
}

/* transition: all はやめ、:hover / .active の宣言で実際に変わる
   プロパティだけを列挙する（設計 §4.5・§12「アニメーション」）。
   :hover は color と background を変える。.active は color（同じ）と
   border-bottom-color と font-weight を変えるが、font-weight は
   ここでは列挙しない —— 太さは 400/700 の2段階のみ（§3.9.1・§4.4）で
   中間の太さを許可しておらず、遷移させると一瞬でも段階外の太さが
   画面に出る。太さは瞬時に切り替える。 */
.tab-button, .mail-course-tab-button {
  padding: var(--space-8) var(--space-16);
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-2);
  transition: color 200ms ease, background-color 200ms ease,
    border-bottom-color 200ms ease;
  margin-bottom: -1px;
  /* 基底の button（02-components.css）が持つ角丸と影を打ち消す。
     打ち消し漏れのせいで、透明・枠なしなのに落ち影だけが残り「角丸の箱」に
     見えていた（2026-09-05 実測）。第1系統の button.tab はすでに box-shadow を
     none にしており、2系統の見た目が割れていた原因がこれ。
     （旧注記）以前はここに「プロパティ名: 値; の形を書かないこと」という
     注意書きがあった。tests/test_style_guard.py の prop() がコメントを
     除去せずに body へ正規表現を掛けており、コメント中の見せかけの宣言を
     本物と誤認して壊れていたため（2026-09-05 実測で発覚）。同日の段3
     修正ラウンド1で _rules() 自体がコメントを除去してから走査するよう
     直したため、この注意書きは不要になった（変異試験で確認済み:
     このブロック内のコメントに実際と異なる box-shadow の値を書いても
     テストは緑のまま）。 */
  border-radius: 0;
  box-shadow: none;
}

.tab-button:hover, .mail-course-tab-button:hover {
  color: var(--ink);
  background: var(--surface-alt);
}

.tab-button.active, .mail-course-tab-button.active {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--blue);
}

.tabs-content, .mail-course-tabs-content {
  margin-top: var(--space-24);
}

.tab-pane, .mail-course-tab-pane {
  display: none;
}

.tab-pane.active, .mail-course-tab-pane.active {
  display: block;
  animation: fadeIn 200ms ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* OSで「視差効果を減らす」を選んでいる利用者（めまい・前庭障害への配慮）
   向けに、タブの色遷移とフェードインを止める（設計 §4.5・§12
   「アニメーション」）。この @media は px を含まないので、
   test_ブレークポイントは768pxだけ の走査には掛からない（実測済み）。
   fadeIn 自体は残す（Phase 8 §1「アニメーションは控えめに残す」）——
   ここで止めるのは動きだけで、.tab-pane.active は animation: none でも
   display: block のまま即座に表示される（opacity の指定が無いため既定の
   不透明で出る）。 */
@media (prefers-reduced-motion: reduce) {
  /* .apply-spinner は申込フォームの送信中の回転（2026-09-05 追加）。
     **ブロックを増やさず、ここに足す** —— 別の @media を作ると
     tests/test_style_guard.py が「reduce ブロックが transition を
     止めていない」で落ちる（片方のブロックしか見ないため）。
     回転を止めても「送信中…」の文言が状態を伝える。 */
  .tab-button, .mail-course-tab-button,
  .tab-pane.active, .mail-course-tab-pane.active,
  .apply-spinner {
    transition: none;
    animation: none;
  }
}

/* 設定画面内のテーブルスタイル */
.list-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-24);
}

.list-table thead {
  background: var(--ground-soft);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.list-table th, .list-table td {
  padding: var(--space-12);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  /* 分割できない長い文字列（メールアドレス）は折り返す。折り返さないと
     列の幅がその1件に引きずられ、**後ろの列が横スクロールの窓の外へ
     押し出される**。修了証の確認画面で実測: 66字のアドレスを1件入れると
     表が 349px → 529px に伸び、180px が画面の外に出た。押し出されるのは
     3列目——「対象外」の表では「理由」の列で、**この画面が答えるべき
     「なぜこの人が対象外か」が見えなくなる**。横スクロールで届きはするが、
     届くことと見えることは別（2026-08-31 実測）。 */
  overflow-wrap: anywhere;
}

/* :has(:focus-visible) で、行内の編集/削除リンクへキーボードで移動した
   ときも同じ強調を出す（レビュー B-1。static/02-components.css の
   一般規則と同じ手）。:focus-within だとクリックでも発火してしまうため
   :has(:focus-visible) に統一している（round1レビュー指摘5）。 */
.list-table tbody tr:hover, .list-table tbody tr:has(:focus-visible) {
  background: var(--surface-alt);
}

.list-table button {
  margin-right: var(--space-8);
}

/* 削除フォームは <form style="display:inline"> で保存ボタンの直後に置かれる。
   button の margin-right だけでは詰まって見えたため、こちら側にも余白を持たせる
   （2026-08-18 実機指摘: 保存と削除が密接しすぎている）。 */
.list-table form[id^="delete-"] {
  margin-left: var(--space-4);
}

/* .list-table .delete-btn の平常時（background: var(--alert) 他）と
   :hover/:focus-visible はここにあったが、02-components.css の
   .delete-btn / .delete-btn:hover, .delete-btn:focus-visible へ統合し、
   ここから削除した（Important 1 対応: 2026-09-05 段3 修正ラウンド1）。
   .list-table の外（顧客詳細「この顧客を削除」等）には赤い地を与える
   宣言が無く、そこだけ平常時が青のまま hover で赤に反転する不整合が
   あったため、.list-table の有無に関わらず効く宣言へ一本化した。
   統合した時点では、ここにあった :hover/:focus-visible（詳細度
   (0,3,0)）は 02 側の (0,2,0) と同一の値（--alert-hover）だったので、
   削除しても見た目は変わらなかった（Minor 2 対応）。

   [Fix round 1, Important, 2026-09-11] その後、密度設計の決定2撤回
   （01-tokens.css の --alert-hover 直前コメント／02-components.css の
   .delete-btn 直前コメント参照）で .delete-btn は既定で塗らず、
   hover/:focus-visible で初めて --alert（--alert-hover ではない）を
   塗る形に変わった。上の段落の「(0,2,0)と同一の値（--alert-hover）」は
   2026-09-05時点の記述であり、現在の挙動ではない——現行の値は
   02-components.css の .delete-btn:hover, .delete-btn:focus-visible を
   正とする。 */

/* セクション分離 */
h3 {
  font-size: var(--fs-lg);
  margin: var(--space-24) 0 var(--space-16) 0;
  color: var(--ink);
}

h4 {
  font-size: var(--fs-md);
  margin: var(--space-16) 0 var(--space-12) 0;
  color: var(--ink-2);
}

.location-section {
  padding: var(--space-16);
  background: var(--ground-soft);
  border-radius: var(--radius);
  margin-bottom: var(--space-24);
}

/* 管理画面刷新 段4 修正ラウンド2・Important 2（鍵の反転、残り2箇所）:
   02-components.css の `body:not(.public) h1, h2, h3` が settings.html の
   見出しにも当たるため、可変値の見出しだけを個別に --font-body へ戻す。

   - .location-section[id^="venue-loc-"] h3
     settings.html:134 の開催地名（location.name。変数）。この id
     （venue-loc- + location.id）は開催地ループの1件ずつに振られる目印で、
     他の .location-section（settings.html:248「開催地未設定」＝固定文言、
     id無し）には無い。
   - .mail-course-tabs-content .location-section h3
     settings.html:528 のメール種別ラベル（entry.kind_label。変数）。
     `.mail-course-tabs-content` はメール文面タブ専用のクラスで、
     他の .location-section を含まない。 */
.location-section[id^="venue-loc-"] h3,
.mail-course-tabs-content .location-section h3 {
  font-family: var(--font-body);
}

/* メール文面: 既定は閲覧のみ・「編集」で書けるようにする（2026-09-10依頼）。
   見た目はこのタブの中に閉じる——新しい語彙を作らず、既存の
   button:disabled / .btn-quiet:disabled が使っている「地を沈めて枠を弱める」
   組み合わせ（--bg-quiet / --rule / --ink-2）をそのまま流用する。 */
.mail-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.mail-entry-head h3 { margin: 0; }
.mail-entry-head .mail-edit-toggle { margin: 0; }

#tab-email .mail-entry-field:read-only {
  background: var(--bg-quiet);
  color: var(--ink-2);
  border-color: var(--rule);
  cursor: default;
}

/* チェックボックス自体は label.check の既定レイアウトのままでよい。
   ここでは「編集中」の目印だけ足す（チェックが付いた種別の見出し行を
   ほんの少し強調し、読み込み欄との対応を分かりやすくする）。 */
.mail-edit-flag { accent-color: var(--blue); }

/* 2026-09-14 依頼:「共通のメールを送信する」チェック。チェックを付けると
   件名・本文が読み取り専用に戻る——その見た目は既存の
   #tab-email .mail-entry-field:read-only（上のルール）がそのまま面倒を
   見るので、ここでは新しい沈み色を増やさない。チェックボックス自体の色だけ
   .mail-edit-flag と揃える。 */
.mail-use-shared { accent-color: var(--blue); }
.mail-use-shared-toggle { margin: 0 0 var(--space-8); }
/* .mail-edit-toggle は label.check（02-components.css）の
   display: inline-flex を持つため、素の hidden 属性（UAの既定の
   display: none 相当は詳細度が低い）に負けて表示され続ける——CSS
   カスケードの既知の落とし穴（hiddenはdisplayに負ける）。共通のメールを
   送信するがONの種別で「編集」だけが浮いて出ていたのはこれが原因
   （実機で再現確認済み）。static/03-public.css の body.public.apply
   [hidden] と同じ考え方で、この要素だけ確実に隠す。 */
.mail-edit-toggle[hidden] { display: none !important; }
/* 「共通のメールを送信する」がONの種別は、見出し行の左に細い線を
   足して一覧の中でも一目で分かるようにする（読み取り専用の地色だけだと
   スクロールで見出しが先に目に入る）。 */
.mail-entry.is-shared { border-left: 3px solid var(--rule-strong); }

.mail-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-8);
}

/* 保存完了の一時的な通知。.notice の見た目をそのまま使う
   （静止時の位置と余白だけここで整える）。 */
.mail-notice { margin: 0 0 var(--space-16); }

.add-section {
  padding: var(--space-16);
  background: var(--bg-quiet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-top: var(--space-24);
}

.add-section h3, .add-section h4 {
  margin-top: 0;
}

.undecided-option {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--rule);
}

/* 開催回パネル。<table> でなく <details> の並びを Grid で桁揃えする。
   親設計書§14 の「印をクリックすると行の下に開いてその場で編集」を
   JS 無しで成立させるため。
   .panel-body は JS がフェッチした断片を差し込む目印（将来タスク）。
   .card の margin-bottom はポップアップに入れ子で表示すると余分な
   余白になるので、ここで打ち消す。 */
.panel-body { margin-bottom: 0; }
.panel-head { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
/* .panel-stats の display / grid-template-columns / dt・dd の文字サイズは
   ここに置かない（Task 10。理由は .attendee summary と同じ——狭幅
   （static/04-narrow.css）と768px以上（static/05-admin.css）で違う値が
   要るのに、この無条件ルールが両方の @media より後ろ（このファイルは
   base.html の <link> で最後に読まれる）にあると、詳細度が同じため
   常にこちらが勝ってしまい、どちらの上書きも効かなくなる。margin だけ
   ここに残す（狭幅・広幅どちらでも同じでよい値）。 */
.panel-stats { margin: var(--space-12) 0; }
/* dl の値＋注記（密度設計 Task 10。dt/dd の対はそのまま——値の強調・色と
   注記の小さい灰色文字を dd の中の入れ子 span として持つ）。狭幅・広幅の
   どちらでも共通に使う（幅で変わるのは .panel-stats 自体のグリッドだけ）。 */
.stat-value {
  display: block; font-size: var(--fs-xl); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-value--alert { color: var(--alert); }
.stat-value--warn { color: var(--warn); }
.stat-note { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); white-space: nowrap; }
/* 顧客詳細（B-4）。.panel-stats は dt/dd の対専用の2列グリッドで、
   span を並べる用途には合わない（span はグリッドに2列で流し込まれ
   3行目に1つだけ残り、dt/dd 向けの色・サイズ指定も当たらなかった）。
   設計書§15のモックが描く「横に流れる帯」を、既存トークンだけで
   flex-wrap の帯として作る新規クラス。.panel-stats 側は変更しない。

   2026-09-12 依頼者指摘（詳細ページ全体のUI/UX改修）: 素の文字列の
   横並びだった帯を、開催回パネルの .panel-stats と同じ「数字のタイル」
   の読み方に揃える（値を太字・大きめで見せ、ラベルは上に小さく添える）。
   中身は .stat-item/.stat-k/.stat-v/.stat-unit（05-admin.css の cust- 群、
   PCのみ——密度を上げてよいのは管理画面をPC幅で見ているときだけという
   既定方針に合わせる。375pxは.stat-band自体は変わらずプレーンな
   横並びのまま読める）。gap・padding をタイル間の余白に合わせて広げる。
   display:flex・flex-wrap:wrap・色トークンは変えない
   （test_顧客詳細の統計は専用クラスで横並びの帯になる が見る）。 */
.stat-band { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); padding: var(--space-12) var(--space-16); margin: var(--space-12) 0; color: var(--ink-2); font-size: var(--fs-sm); }
.panel-foot { display: flex; gap: var(--space-12); margin-top: var(--space-16); }
.attendee { border-top: 1px solid var(--rule-2); }
/* display / grid-template-columns / gap はここに置かない（Task 18）。
   狭幅と768px以上で違う値が要るのに、この無条件ルールが両方の
   メディアクエリより後ろ（ソース順）にあると、詳細度が同じため常に
   こちらが勝ってしまい、狭幅側の上書きが無効になる（幅375のビューポートで
   実測して確認: .attendee summary の gridTemplateColumns がここの7列の
   まま出ていた）。両メディアクエリ内にそれぞれ書く。 */
.attendee summary {
  align-items: center; cursor: pointer; list-style: none; padding: var(--space-8) 0;
}
.attendee summary::-webkit-details-marker { display: none; }
/* .attendee-mark は密度設計 Task 10 で `.cell-memo`（申込一覧と共有する
   汎用クラス。static/02-components.css。同じ text-align:center;
   color:var(--blue) を既に持つ）に置き換えた。 */
.attendee-name { font-weight: 700; }
.attendee-amount { font-size: var(--fs-sm); color: var(--ink-2); }
.amount-mismatch { color: var(--alert); font-weight: 700; }
.attendee-detail { padding: var(--space-8) 0 var(--space-12) 1.5em; }
.cancelled-group summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); padding: var(--space-8) 0; }

/* メモの編集。textarea は 16px 以上（iOS Safari の自動拡大対策）。
   クラス名に textarea / input を含めない（style_guard の語境界に当たる）。 */
.memo-form { margin: var(--space-8) 0 0; }
.memo-form textarea {
  width: 100%; font-size: var(--fs-lg); font-family: inherit;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: var(--space-8);
}
.memo-hint { font-size: var(--fs-xs); color: var(--ink-2); margin: var(--space-4) 0 var(--space-8); }
/* メモが無い行でも押せる領域を確保する。:hover の「＋メモ」は装飾として
   重ねるだけ — タッチ端末で :hover は発火しないので、機能を依存させない。 */
.attendee summary:hover .cell-memo::after { content: "＋"; color: var(--ink-2); }

/* カレンダーのカードを押すと開く <dialog> のポップアップ。
   width / max-width / height はここに置かない（Task 18）。狭幅と768px以上で
   違う値が要るのに、この無条件ルールが両方のメディアクエリより後ろ
   （ソース順）にあると、詳細度が同じため常にこちらが勝ってしまい、狭幅側の
   上書きが無効になる（.attendee summary と同じ穴。幅375のビューポートで
   実測して確認した）。両メディアクエリ内にそれぞれ書く。 */
.panel-dialog { border: 0; border-radius: var(--radius); padding: 0; }
.panel-dialog::backdrop { background: var(--shadow-modal); }

/* ---------- 復習参加「初めて／復習」分岐（申込フォーム）----------
   CSS のみ（決定10。JS を使わない）。~/ncls-certificate-app の /issue
   画面と同じ、一般兄弟結合子（~）によるタブ切り替え（body:has() ではない、
   実測確認済み）。ラジオ・ナビ・regular-only/review-only は全て <form>
   の直接の子であることが前提——間に別の要素を挟むと ~ が届かない。

   幅は上書きされない前提で書く。input[type="radio"]（要素＋属性 =
   詳細度 0,1,1）は .attendance-switch__radio（クラス1つ = 0,1,0）より
   詳細度が高く、記述順に関係なく上の input[type="radio"] に書いた
   width: auto が勝つ。隠蔽は position: absolute と clip が担っており、width が
   auto のままでも視覚的には隠れるので実害は無い。padding や border を
   足すのは危険（clip では救われず実際に事故る）ので足さない。 */
.attendance-switch__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.attendance-switch__nav {
  display: flex;
  gap: var(--space-8);
  border: none;
  padding: 0;
  margin: 0 0 var(--space-16);
}

/* タブ語彙の第3系統。ラジオ + label（JS無し）で、第1・第2系統（下線タブ）
   とは選択状態の見せ方が違う——ここは選択中を塗り（background: var(--blue)）
   で示す塗りチップ。理由: 公開の申込フォーム内にあり、`:root` に無い色は
   足さないという絶対規則1の下で48px超のタップ領域とWCAG 2.5.8のフォーカス
   リング（下の :focus-visible）を両立させる必要があり、下線だけでは
   フォーカスリングと選択状態の視覚的合図が重なって見分けにくい
   （Phase 8 設計 §4.3。「形が違ってよい理由」の指定例そのもの）。
   フォントサイズ var(--fs-lg) も公開レイヤーの本文16px（design-system
   SKILL.md の寸法表）にすでに揃っている。太さ・角丸・色トークンの参照は
   他の2系統と共通（400/700・var(--ink-2)）。

   **2026-09-05: 塗りの色を var(--blue) から var(--c-main)（コース別パレット）へ。**
   確定案（Claude Design）はフォーム全体がコース色で、参加区分だけ別の青が
   残っていると「ここだけ色が違う」状態になる（実機で実測して指摘を受けた）。
   var(--c-main) は body.public に既定が張ってあるので、data-course の無い
   公開ページでも未解決にはならない。
   見せ方も確定案の形（灰色の帯の中に選択中のチップが浮く）に寄せる。 */
.attendance-switch__nav {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--form-inert);
  border-radius: var(--radius-16);
}
/* グループのラベルは読み上げにだけ残す。カードの見出し「参加区分と受講料」が
   同じことを言っており、画面に2つ出ると重複して読みにくい。 */
.attendance-switch__nav legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 指摘6【低】: 「初めて（通常参加）」の自然幅144pxに対し、左右12pxの
   paddingだと360px幅でも内側134pxしか無く2行になる（実測）。左右を4pxに
   詰めると360pxでは内側150pxになり1行に収まる。320pxは詰めても内側130px
   until足りず2行のまま——align-items: stretch（.attendance-switch__nav の
   既定）で隣の1行タブと高さが揃うので、2行でも見た目は壊れない。 */
.attendance-switch__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-13);
  border: 0;
  background: none;
  color: var(--form-text-2);
  font-size: var(--fs-15);
  font-weight: 700;
  cursor: pointer;
}
/* 指摘E-10/E-11（在庫表との再照合、2026-09-05・実測）: .attendance-switch__tab
   は label 要素なので、body.public label（03-public.css、詳細度 (0,1,2)）に
   font-size / color を上書きされ、非選択タブが 15px / var(--form-text-2) の
   確定案でなく 16px / var(--ink) のまま出ていた。.attendance-switch__tab
   単体は (0,1,0) で足りない。

   セレクタ自体は変えない —— test_style_guard.py の
   test_タップ領域計測の公開集合がCSSとui_reviewerで一致する と
   test_参加区分タブの左右paddingが詰まっている が「.attendance-switch__tab」
   という文字列そのものをセレクタとして探しており（前置詞つきに変えると
   両方落ちる。実測）、body.public を足すリネームはできない。
   代わりに、同じ要素を指す詳細度の高い別セレクタを追加してこの2値
   （font-size / color）だけ上書きする。 */
body.public.apply label.attendance-switch__tab {
  font-size: var(--fs-15);
  color: var(--form-text-2);
}

#attendance-regular:checked ~ .attendance-switch__nav label[for="attendance-regular"],
#attendance-review:checked ~ .attendance-switch__nav label[for="attendance-review"] {
  background: var(--c-main);
  color: var(--on-fill);
  box-shadow: 0 6px 18px var(--c-shadow);
}

/* 指摘E: 選択中のタブはリング色（旧: var(--c-main)）と地の色（選択中の塗り
   も var(--c-main)）が同色で、コントラスト 1.00:1（実測）——選択中の項目に
   タブで入るとフォーカスリングがまったく見えない。内側に var(--surface)
   （白）・外側に var(--c-deep)（濃色）の二重リングにし、選択中の塗り
   （var(--c-main)）・非選択の地（var(--form-inert)）のどちらの上でも
   見分けられるようにする。 */
#attendance-regular:focus-visible ~ .attendance-switch__nav label[for="attendance-regular"],
#attendance-review:focus-visible ~ .attendance-switch__nav label[for="attendance-review"] {
  outline: none;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--c-deep);
}

/* display: contents にすると、非表示化していない側では箱を作らず
   子要素がそのまま <form> の直下にあるのと同じレイアウトになる。
   既存の label / fieldset の余白を崩さないための選択。 */
.regular-only { display: contents; }
.review-only { display: none; }

#attendance-review:checked ~ .regular-only { display: none; }
#attendance-review:checked ~ .review-only { display: contents; }