/* ============================================================
3. 公開レイヤー — 申込者が見る画面。幅を問わず寸法を落とさない
一度きりの初見利用で、多くはスマホ。管理画面の密度を持ち込まない。
============================================================ */
body.public { font-size: var(--fs-lg); }
body.public main { max-width: 640px; padding: var(--space-32) var(--space-16) var(--space-48); }
/* 申込ページのコース名。18pxでは弱いとの実機指摘を受け、専用の24px段
（--fs-2xl）を承認の上で追加した（2026-08-18）。24pxの許可セレクタは
FS_2XL_SELECTORS（tests/test_style_guard.py）が唯一の出どころ。 */
body.public h1 {
font-size: var(--fs-2xl);
font-weight: 700;
margin: 0 0 var(--space-24);
padding-bottom: var(--space-12);
border-bottom: 3px solid var(--navy);
}
body.public label { font-size: var(--fs-lg); color: var(--ink); }
/* 共通の h2 は管理画面の密度に合わせた14px。公開は本文が16pxなので、
打ち消さないと「受講料」の見出しが直下の料金リスト（16px）より小さく出る。
レビュー重要-4（実測）: 16pxのままだと本文16px・見出し16pxで太さしか
違わず、一覧が18px（.loc-group h2 / .list-filter）に上げた段が
フォーム側だけ抜けていた。一覧側は step 6 で「16pxでは本文と区別が
付かない」として18pxに上げており、その判断がここに通っていなかった。
18pxに揃える（h1の24pxとは別の段のまま残る）。 */
body.public h2 { font-size: var(--fs-xl); }
/* 公開ページのヘッダー。ロゴは提供された比率のまま置く（変形・影・色替えは
使用ガイドラインで禁止）。main と同じ 640px の読み幅に左端を揃える。
ロゴは幅200px・高さ38.5px相当（元画像比率800:154）で描画される想定。
リンクの上下に space-8（8px）ずつの余白を足し、38.5+16=54.5px で
タップ領域48pxを満たす。
【レビューM-9で訂正】以前は img に max-width: 60% を指定しており、
これがアンカー自身の指定幅200pxに対して循環的に解決されて実際には
120×23pxまで潰れていた（200×38.5pxで描画されたことが一度も無かった）。
max-width: 100% に直す。 */
.public-header { max-width: 640px; margin: 0 auto; padding: var(--space-24) var(--space-16) 0; }
.public-header a { display: inline-block; padding: var(--space-8) 0; }
.public-header img { display: block; width: 200px; max-width: 100%; height: auto; }
/* レビュー重要-4（実測）: 必須の選択肢グループの見出し（受講コース・
受講団体など7個）が13px・--ink-2のままだと、本文（16px・--ink）より
弱く出て「必須の見出し」に見えない。本文と同じ強さに上げる。 */
body.public legend { font-size: var(--fs-lg); color: var(--ink); }
/* 申込ページの日時・会場。何の情報かをラベルで示す。項目名と値の対なので dl。
ラベルは補足なので13px、値は公開の本文サイズ16pxのまま。 */
body.public .session-facts { margin: 0 0 var(--space-24); }
body.public .session-facts dt {
font-size: var(--fs-sm);
font-weight: 700;
color: var(--ink-2);
}
body.public .session-facts dd { margin: 2px 0 var(--space-12); }
body.public .card { padding: var(--space-24); }
/* レビュー重要-5（実測）: 送信失敗直後に最初に見る .error が13pxのまま
だと、本文16pxの画面のなかで一番読みにくい文字になる。公開だけ16pxに
上げる（管理画面の .error は13pxのまま——共通の .error の margin: 0
水平無しはそのまま活きるので、ここでは font-size と p/ul の内側の
余白だけを公開向けに直す）。.error 内の p / ul はこれまで何も
宣言しておらずブラウザ既定（p が margin: 13px 0、ul が
padding-left: 40px 相当）のままだった——これがスケール外だったので
var(--space-*) で明示する。 */
body.public .error { font-size: var(--fs-lg); }
body.public .error p { margin: 0 0 var(--space-8); }
body.public .error ul { margin: 0; padding-left: var(--space-24); }
/* 選択肢は1行1件。指で押せる高さを確保する。fieldset の中のラベルは
.check を持たないので、ここで面倒を見る。 */
body.public fieldset label,
body.public .consent {
display: flex;
align-items: center;
gap: var(--space-8);
min-height: 48px;
margin: 0;
cursor: pointer;
}
/* 入力欄も48px。狭幅レイヤーの44pxが効いたままだと公開側の基準に届かない。
ラジオとチェックボックス自体は対象外（押す対象は囲うラベル）。 */
body.public input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.public select,
body.public textarea {
min-height: 48px;
}
/* 法令表記へのリンク。本文中に並ぶので inline-flex にして「／」の
区切りを保ったまま高さだけ確保する。 */
body.public main a,
.public-footer a {
display: inline-flex;
align-items: center;
min-height: 48px;
}
/* 公開ページのリンク色を --blue に統一する（設計 §4.6・§9-3・§12「リンク色」）。
対象は apply.html のエラー一覧／同意欄のプライバシーポリシー／同意欄の
特定商取引法に基づく表記／NCLSテキストの購入ページ、cancel.html の
振替・返金案内、public_csrf_error.html の戻るリンク の6箇所。
.public-footer a は対象外（既に --ink-2 で別途スタイル済み。§9-3
「揃えない」の裁定）。
レビュー重要-2（旧実装は :not() の除外リストだった。差し戻し）:
body.public main a は要素3（body/main/a）・クラス1（.public）で
詳細度 (0,1,3)。ここへ :not(.apply-link):not(.area-index-link) を
足すと、:not() の引数もそのまま詳細度に数えられる仕様のため
(0,3,3) まで跳ね上がる——.list-filter a や .empty a（いずれも
(0,1,1)）の color 宣言を常に上書きして殺していた（変異試験で
SURVIVED を実測）。極めつけは、公開の main に
（button, .btn の (0,1,0)）を置くと (0,3,3) が勝ち、青地に青文字＝
コントラスト1:1で文字が消える事故（実測）。除外リストは公開に
色付きリンクを足すたびに追記が要り、忘れると同じ事故が起きる。
直し方: :where() で main 側を詳細度ゼロの既定にする。:where() の
中身は詳細度に数えない仕様なので、このルール全体の詳細度は
要素1（a）だけの (0,0,1) になる——クラスを持つ部品
（.apply-link / .area-index-link / .btn / .list-filter a /
.empty a 等）は必ずこれより詳細度が高く、除外リストが無くても
自然に勝つ。.apply-link は .avail-waitlist + .apply-link（輪郭
ボタン）にも同じクラスが付くので、この既定を上書きする形は両方の
申込ボタン系列で成立する。CSSの並べ替えにも依存しない。 */
:where(body.public main) a {
color: var(--blue);
}
body.public button {
width: 100%;
min-height: 48px;
font-size: var(--fs-lg);
margin-top: var(--space-8);
}
/* 申込フォームの補足説明。ラベルの一部として読ませるので、
本文より小さく・弱くするが、AA は割らない（--ink-2）。 */
.hint {
display: block;
font-size: var(--fs-sm);
color: var(--ink-2);
font-weight: 400;
margin-top: 2px;
}
/* 定員到達の予告や、項目ごとのお知らせブロック */
.notice {
background: var(--bg-quiet);
border-radius: var(--radius);
padding: var(--space-12) var(--space-16);
margin: 0 0 var(--space-16);
font-size: var(--fs-sm);
}
.notice strong { display: block; margin-bottom: var(--space-4); color: var(--ink); }
.notice p { margin: 0; }
/* 同意欄に添える規約の全文。長いので枠で囲って本文と分ける */
.consent + .policy-body {
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: var(--space-12) var(--space-16);
margin: var(--space-8) 0 var(--space-16);
font-size: var(--fs-sm);
color: var(--ink-2);
max-height: 220px;
overflow-y: auto;
}
/* カレンダー（月表示）。7列の Grid。 は使わない —
狭幅の組み替えを開催回一覧に閉じる style_guard の規律に触れないため。 */
.cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 1px; background: var(--rule-2); margin: 0 var(--space-16) var(--space-16);
border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.cal-head {
background: var(--ground-soft); color: var(--ink-2);
font-size: var(--fs-xs); text-align: center; padding: var(--space-8) 0;
}
.cal-day { background: var(--surface); min-height: 92px; padding: var(--space-4); }
.cal-outside { background: var(--ground-soft); }
.cal-today { box-shadow: inset 0 0 0 2px var(--blue); }
/* .cal-date と .cal-add（＋マーク、下記）を同じ行に横並びにする。絶対配置で
右上に重ねる案は、狭幅（.cal-day min-height:0・padding:2px の極小マス、
04-narrow.css）でフォントの実測メトリクスしだいで下の .cal-card と
数px重なる恐れがあった（2026-09-12 実装時レビュー指摘）ので、通常の
フローに乗せる——.cal-add の実際の高さぶんだけ .cal-day-head 自体が
伸び、後続の .cal-card は必ずその下から始まる（重なりが原理的に無い）。 */
.cal-day-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cal-date { font-size: var(--fs-xs); color: var(--ink-2); }
/* カレンダーの日付から開催回を追加する＋マーク（依頼: カレンダーの日付を
クリックすると開催回追加ができるように）。タップ領域は素の として
main a の44px/24px集合にそのまま含まれるので、ここでは見た目の
サイズだけを決める（新しい min-height/height の規則は書かない）。 */
.cal-add {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; width: 18px; height: 18px;
font-size: var(--fs-xs); line-height: 1; text-align: center;
border-radius: 999px; background: var(--bg-quiet); color: var(--ink-2);
text-decoration: none;
}
.cal-add:hover { background: var(--blue); color: var(--on-fill); }
/* 末尾の月の切り替えは狭幅だけに出す。広幅は7列で1画面に収まるので要らない。 */
.cal-monthnav { display: none; }
/* 凡例（.cal-legend）と月表の下の詳細（.cal-agenda）も狭幅だけ
（狭幅のカレンダー設計。決定表参照）。 */
.cal-legend { display: none; }
.cal-agenda { display: none; }
.cal-card {
display: block; text-decoration: none; color: var(--ink);
border-left: 4px solid var(--card-accent); background: var(--surface-alt);
border-radius: var(--radius);
/* 右パディングは元6px（等距離）。原則は8pxへ丸めるが、ここは個別に4pxへ
据え置く。狭幅で同日に2件以上並ぶと .cal-day の横並びが折り返さず、
.cal-grid の overflow: hidden で見切れる既存の不具合がある
（.cal-day の gap と同じ理由・同じ実測）。8pxのままだと、gapを8pxへ
戻した後もなお変更前より見切れが広がったままだった。 */
padding: var(--space-4) var(--space-4); margin-top: var(--space-4);
}
.cal-card:hover { background: var(--bg-quiet); }
.cal-count { display: block; font-size: var(--fs-xs); font-weight: 700; }
.cal-name { display: block; font-size: var(--fs-xs); }
.cal-time { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.cal-draft { border-left-style: dashed; }
.cal-quiet { opacity: .6; }
.cal-cancelled { opacity: .6; text-decoration: line-through; }
/* [2026-09-13 ユーザー指摘] もっと目立つように。以前は太字ではなく
（`.pill` を経由しない独自ルールのため、他画面の注意ピルが揃って
持っている font-weight: 700 が抜けていた）、文字サイズも本文と同じ
11px（--fs-xs）だった——月表の中で最優先に見せたい「要対応」が、
隣接する開催地名・時刻と同じ太さ・同じ大きさで並び、埋もれていた。
色の面積（--bg-alert の塗り）はこの現場の「注意は塗りを主張しすぎない」
という決定（.pill-alert と同じ配色）を保ったまま、太字＋13px（--fs-sm）
にして文字そのものの主張を強める。 */
.cal-badge {
display: inline-block; margin-top: 2px; padding: 0 var(--space-8); border-radius: 999px;
background: var(--bg-alert); color: var(--alert); font-size: var(--fs-sm); font-weight: 700;
}
/* 狭幅で「開催回のある日だけを縦積み」に組み替えるための目印（Task 18）。
広幅では見た目を変えない。 */
.cal-has .cal-date { font-weight: 700; }
/* 土日を太字で見分ける（色を増やさない——`:root` の外に色を書かない絶対
規則1）。以前は狭幅の縦1列リスト（列見出しの `.cal-head` が消える構成）
だけの手当てだった。狭幅も「7列の月表＋その下に詳細」に統一し、
`.cal-head` が狭幅でも常時表示されるようになったので、探しやすさを
保つ仕組みは広幅と共通でよい——狭幅だけの特別扱いをやめ、この規則を
両方の幅で使う（決定表: 狭幅のカレンダー再設計）。`.cal-has .cal-date`
の太字と意味が重なる場面がある点は元から広幅にもあった特性で、ここで
新たに悪化させるものではない。 */
.cal-date.cal-weekend { font-weight: 700; }
/* 月表のマスの中身の出し分け（狭幅のカレンダー設計。2026-08-31
ユーザー裁定・決定表）。サーバは幅を知らないので両方を常に描画し、
CSS の display だけで切り替える。既定（このルールは @media より前）は
広幅の見え方——全文（.cal-full）を見せ、略記（.cal-brief）は隠す。
.cal-full は display: contents にして、直下の cal-count/cal-name/
cal-time/cal-badge の見た目（変更前の cal-card 直下と同じ）を保つ。 */
.cal-full { display: contents; }
.cal-brief { display: none; }
/* 要対応の印。❗（絵文字）は 40px で入らないので使わない（実測・決定表）。
最初は赤い太字の「!」だけにしたが、**11px の裸の「!」は細くて見つけにくい**と
実機で指摘された（2026-08-31）。**赤い丸の中に白抜き**にする——この現場で
状態を示すときの語彙（`.cal-badge` / `.pill` と同じ 999px の丸み）に揃える。
白文字と --alert の明暗差は 6.10:1 で基準（4.5:1）を満たす。
色は --alert / --surface で、:root に色を足さない（絶対規則1）。 */
.cal-alert {
display: inline-block;
min-width: 13px;
padding: 0 2px;
border-radius: 999px;
background: var(--alert);
color: var(--surface);
font-weight: 700;
text-align: center;
}
.cal-legend li { display: flex; align-items: center; }
.cal-legend-swatch {
display: inline-block; width: 10px; height: 10px; margin-right: var(--space-4);
border-radius: var(--radius); background: var(--card-accent);
}
.cal-agenda-day { margin-bottom: var(--space-16); }
.cal-agenda-date { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin: 0 0 var(--space-4); }
.cal-agenda-dow { font-weight: 400; color: var(--ink-2); }
.cal-agenda-list { list-style: none; margin: 0; padding: 0; }
.cal-agenda-item {
border-left: 4px solid var(--card-accent); background: var(--surface-alt);
border-radius: var(--radius); padding: var(--space-4) var(--space-8);
margin-top: var(--space-4);
}
/* ------------------------------------------------------------
公開・一覧（/courses/。Phase 8 step 6。設計 §3・§4.1.1・§3.9）
この画面だけ body_class が "public list"（public_base.html の
body_class ブロック。設計 §4.1.1）。幅とカラムの規則だけを
上書きし、タップ対象のセレクタには .list を混ぜない —
body.public.list main a のような複合セレクタは _css_public_tap() の
^body\.public\s+ 除去に引っかからず、ui-reviewer.md の PUBLIC_TAP
集合とずれる（設計 §6.2）。申込リンク（.apply-link）は main の中の
なので、既存の body.public main a が48pxのタップ高さを既に
与えている。ここで min-height を重ねて書かない。
------------------------------------------------------------ */
/* body.public main の 640px 宣言（上の「3. 公開レイヤー」冒頭）はその
まま残し、詳細度の高い複合セレクタで上書きする（宣言ブロックを分割・
並べ替えると test_公開レイヤーが定義されている が落ちる。設計 §4.1）。 */
body.public.list main { max-width: 1180px; }
body.public.list .public-header,
body.public.list .public-footer { max-width: 1180px; }
/* 見せ方の切り替え（開催地から探す／日程から探す。設計 §3.10・§3.10.1）。
既存の .seg をそのまま流用し、新しいクラスは作らない。
文字サイズだけ16px（--fs-lg）へ上書きする——13px（--fs-sm）は管理画面の
密度で、公開の本文16pxに対しページの主操作が最小段になってしまう
（.loc-group h2 / .list-filter / .empty と同じ上書きの流儀。
【事実の訂正】このコメントと components.md は以前「18px」と誤って
書いていた。18px は --fs-xl で、320pxでの .seg の幅の予算（16pxで
274px／上限300px）を超えて横スクロールする。実装は最初から --fs-lg
＝16pxで、直すべきは記述のほうだった）。
管理画面の .seg には触れない（セレクタを body.public.list に限定）。
非現在側の文字色は --ink-2（白地に5.45:1）が真下の索引チップ
（.area-index-link・--ink・17.6:1）より薄く、序列が逆に見えていた
（レビュー実測。E-5）ので --ink に揃える。 */
body.public.list .seg a { font-size: var(--fs-lg); color: var(--ink); }
/* 切り替えと索引の間隔が0pxで、8px角丸の矩形（.seg）と999pxのピル
（.area-index-link）が隙間なく積み、別々の操作なのに1つの塊に見えて
いた（レビュー実測。E-2）。8段のスケール内で下の余白を足す。 */
body.public.list .seg { margin-bottom: var(--space-8); }
/* 現在地（.on）の --navy ベタ塗りをやめる（設計 §3.10.1「切り替えの
見え方」）。公開ページで --navy が面として使われるのはここだけで、
面積は申込ボタンの1.54倍——ファーストビューの視覚的重心が申込ボタンで
はなく切り替えに移っていた（レビュー実測。E-4）。現在地は ✓ と
font-weight: 700（.seg a.on の既存宣言）と面の差（--bg-quiet）で示す。
--bg-quiet 上の --ink は15.05:1でコントラストは十分（実測。2026-09-05
管理画面刷新で --bg-quiet を #f1ede6 に差し替えたため数値を更新）。 */
body.public.list .seg a.on { background: var(--bg-quiet); color: var(--ink); }
/* .seg の既定の overflow: hidden 宣言（このファイル冒頭「2. 共通
コンポーネント」）は角丸の外にはみ出す子要素の背景を切り取るための
ものだが、フォーカスリング（outline-offset: 2px）も一緒に切って
しまう。公開側はキーボード操作のレビュー観点に入っているためここで
直す。子（先頭・末尾の ）自身に角丸を持たせ、overflow を外す——
管理画面の .seg（calendar.html / sessions.html）も対象に含めて直す
（挙動を変えない範囲の既存欠陥の是正。設計 §3.10.1「フォーカス
リング」）。
（旧注記）以前はここに「コメントに波括弧を書かないこと」という
注意書きがあった。tests/test_style_guard.py の _rules() がコメントを
剥がす前に生ファイルへ正規表現を掛けており、コメント内の波括弧が実在の
CSSルールと誤認され、直後の本物の .seg ルールのセレクタ抽出を壊して
いたため（実際にこれで誤検知が起きた）。2026-09-05 段3 修正ラウンド1で
_rules() 自体がコメントを除去してから走査するよう直したため、この
注意書きは不要になった。 */
.seg { overflow: visible; }
/* overflow を外しただけでは、隣の兄弟の背景（後続の の box）が先行
要素のフォーカスリングの右辺を塗りつぶす（実測: 1本目の だけ
左・上・下の3辺しか描かれない）。:focus-visible のときだけ自分を
手前に出す（設計 §3.10.1「フォーカスリングの重なり」）。 */
.seg a:focus-visible { position: relative; z-index: 1; }
/* 角丸は calc(var(--radius) - 1px) にする（設計 §3.10.1「角丸の合わせ」）。
枠1px＋角丸8pxの内縁の曲率は7pxで、子に8pxをそのまま与えると .on の
塗りの四隅に1px弱のすき間が出る（実測）。 */
.seg a:first-child {
border-top-left-radius: calc(var(--radius) - 1px);
border-bottom-left-radius: calc(var(--radius) - 1px);
}
.seg a:last-child {
border-top-right-radius: calc(var(--radius) - 1px);
border-bottom-right-radius: calc(var(--radius) - 1px);
}
/* 開催地の索引（h1直下。レビューM-5）。17〜20の開催地を上から目視で
探すしかなく、スマホでは目的の開催地まで何画面もスクロールする問題
への対応。