/* ============================================================
   5. 管理レイヤー（≥768px） — 密度を上げてよいのはここだけ
   ============================================================ */
@media (min-width: 768px) {
  body { font-size: var(--fs-sm); }

  /* 表を包む枠を .card-head と同じ左端に揃える。狭幅ではやらない
     （上の .card.flush > h3 の注釈を参照）。 */
  .card.flush > .scroll {
    margin-left: var(--space-16);
    margin-right: var(--space-16);
    width: calc(100% - 32px);
  }

  /* マウス操作前提の幅でも、WCAG 2.2 SC 2.5.8 の 24px は下回らせない。
     Apple HIG の44pxは持ち込まない（ここは指で押す幅ではない）。
     素の <a>（一覧の「公開URL」など）は行ボックスが13pxしかなく、
     何も指定しないと基準を割る。.attendee summary / .cal-card は
     767px 側にも同じ集合で足す（Task 18）— 片方だけだと広幅で
     24px を割る。 */
  button, .btn, .tab, .topbar a, .brand, main a:not(.btn-quiet):not(.seg a):not(.course-chip),
  select:not(.filters select), textarea, .entry summary,
  input:not([type="hidden"]):not([type="checkbox"]), label.check,
  .attendee summary, .cal-card, .check-tap, .cust-drawer-summary, .notice-done summary, summary.card-head {
    min-height: 24px;
  }
  .topbar a, .brand, main a, .tab, .seg a {
    display: inline-flex;
    align-items: center;
  }

  /* 修正ラウンド2（rereview4 M-1残り）: 上の集合は min-height だけを
     揃えていて、.check-tap は可視文字を .sr-only にしたぶんラベル幅が
     チェックボックス（13px）ぶんしか残らず 24×21px だった（WCAG 2.2
     SC 2.5.8 の 24px を幅で割る）。列幅（事前課題72px）には
     余裕があるので min-width で作る。チェックボックス自体の width は
     引き続き当てない（task-5-brief.md「チェック（widthを当てない）」は
     input 自体の話で、この<label>には掛からない）。 */
  .check-tap { min-width: 24px; }

  /* 現在地の背景を「箱」に見せる padding（設計 §5.3「幅の予算」）。
     768pxの余裕は38pxしかない実測値の上で決めた値なので、この
     ブレークポイントの中に閉じる。375px側に漏らすと .topbar の高さが
     169pxを超える（.topbar nav 付近のコメント参照。行番号ではなく
     セレクタで探すこと）。border-radius は .nav-current 側に直接
     置いてあるので、ここでは padding だけ足す（幅には影響しない
     ので狭幅にも既に効いている）。 */
  .topbar nav a {
    padding: var(--space-4) var(--space-8);
  }

  /* レビュー B-3（2026-08-30）: 768pxの余裕はWebフォント適用後で4.4pxしか
     無く、フォールバック書体（Hiragino Sans, font-display: swap の
     読み込み中）では768.2pxで溢れて2段になる（実測: .topbar 54.7→95.5px）。
     水平パディングを24pxから16pxへ絞り、余裕を20.4px（Webフォント）/
     15.8px（フォールバック）にする。左右だけを絞る——.topbar の
     padding-top/bottom（var(--space-12)、狭幅の高さ169pxの計算に含まれる）
     は変えない。 */
  .topbar {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

  /* レビュー B-4（2026-08-30）: ログアウトだけ他の7本と分ける（押し間違えると
     作業中の画面からログアウトしてしまうため）。≥768pxに閉じる——320pxで
     margin-left+border-left+padding-leftの計20pxを足すとログアウトが
     単独行になり、border-left が行頭に浮いた縦棒として残る（意味を失った
     飾り。実測: .topbar 169→217px, +28%）。狭幅側は .topbar nav の gap が
     分離を担う。 */
  .topbar nav .logout {
    margin-left: var(--space-8);
    border-left: 1px solid var(--rule);
    padding-left: var(--space-12);
  }

  /* .attendee summary の display / grid-template-columns / gap は
     無条件ルール（.attendee 付近）に置かず、767px 側と別の値をここに書く
     （Task 18。理由はそちらのコメントと対）。

     密度設計（2026-09-10）Task 10: 受講者行を申込一覧（Task 5）と同じ
     固定グリッドに揃える——列は「メモ印/氏名/申込/区分/状態/職種/所属/
     注意/操作」（task-10-brief.md「受講者行は Task 5 のグリッドと同形」）。
     出席の列（56px）は 2026-09-14 の依頼者決定で廃止した。列の並び・幅は
     `.entry summary`（申込一覧の10列）から `[prework] 72px` を1本
     抜いただけ——他の列の順序・幅は不変。named line（[memo][name]…）は
     `.cell-*` / `.head-*`（static/02-components.css の汎用ルール）が
     指す名前と共有する。 */
  .attendee summary {
    display: grid;
    grid-template-columns:
      [memo] 16px [name] minmax(0, 1fr) [applied] 96px [kind] 48px
      [status] 96px [occupation] 72px [organization] 140px [experience] 72px
      [alert] 168px [action] 96px;
    gap: var(--space-8);
  }
  /* 事前課題（ACLS・PEARSのみ、2026-09-13ユーザー指摘）。申込一覧の
     `.entry.entry--prework summary` と同じ「＋prework 1本だけを named
     line で挿入する」手法。列幅・位置とも申込一覧の10列目と揃える。
     [2026-09-13 追加のユーザー指摘] 金額（amount, 136px）を削除し、
     所属（organization, 140px。申込一覧と同じ列幅・全文表示）を追加。
     金額は cell-status の「入金済み/入金待ち」ピルで状態は分かるため、
     正確な金額が要るときだけ行を開く（申込一覧の同種の判断と揃える）。
     [2026-09-13 さらなるユーザー指摘] 職種（occupation, 72px。申込一覧と
     同じ列幅）を追加。 */
  .attendee.attendee--prework summary {
    grid-template-columns:
      [memo] 16px [name] minmax(0, 1fr) [applied] 96px [kind] 48px
      [status] 96px [occupation] 72px [organization] 140px [experience] 72px
      [alert] 168px [prework] 72px [action] 96px;
  }

  /* .panel-stats の display / grid-template-columns も同じ理由でここに書く
     （上の .attendee summary のコメントと対）。static/06-settings-tabs.css の
     無条件ルールは margin だけを持ち、狭幅（767px側・static/04-narrow.css）
     はそちらで別に2列のdt/dd縦積みを定義する。ここは密度設計 Task 10 の
     要件——7項目の集計を `repeat(7, 1fr)` の横1帯にする（依頼者が原本
     `管理画面 密度設計案.dc.html` から実測した値）。

     `<dl>` の子は dt・dd が交互に14個並ぶ。`grid-auto-flow: column` と
     `grid-template-rows: auto auto`（2行）を組み合わせることで、
     暗黙の配置が「列優先」になり、各 dt/dd の対がそのまま1列に収まる
     （row優先の既定のままだと7列に14個が2段で流し込まれ、dt/ddの対が
     列をまたいでずれる）。 */
  .panel-stats {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: 0;
    border-bottom: 1px solid var(--rule-2);
  }
  .panel-stats dt {
    font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
    white-space: nowrap; padding: var(--space-12) var(--space-16) 0;
  }
  .panel-stats dd { margin: 0; padding: 0 var(--space-16) var(--space-12); }
  /* 項目間の仕切り線（原本の border-left 1px）。dt は各列の1行目、dd は
     2行目——どちらも2列目以降（nth-of-type(n+2)）にだけ線を引く。 */
  .panel-stats dt:nth-of-type(n+2), .panel-stats dd:nth-of-type(n+2) {
    border-left: 1px solid var(--rule-2);
  }

  /* .panel-dialog の width / max-width も同じ理由でここに書く（上のコメント参照）。 */
  .panel-dialog { width: 92vw; max-width: 720px; }

  /* コース色の識別線。色は style 属性の --card-accent から来る（DB の
     course_types.color を accent_color() でサニタイズした値）。
     狭幅（≤767px）には出さない——04-narrow.css で td が display: block に
     なるため、td に線を当てると開催日の1行だけに4pxの切れ端が付く。 */
  .session-list td[style*="--card-accent"] { border-left: 4px solid var(--card-accent); }
  /* [2026-09-12 依頼者指摘] 「担当の名前が改行されないように」。
     .session-list は .scroll に包まれており（overflow-x: auto）、
     この列が入り切らない回だけ表全体が横スクロールで吸収する——
     ページ全体の横スクロールにはならない。狭幅（04-narrow.css）では
     .session-list-wrap が overflow-x: visible のカード表示に変わり
     nowrap がそのまま外へ溢れるため、ここ（768px以上）に閉じる。 */
  .sessions-instructor { white-space: nowrap; }

  /* [2026-09-12] 行の操作（編集／申込一覧／公開URL）は PC 幅では横一列に
     並べ、語中で折れないようにする。狭幅は 04-narrow.css が
     .session-list td:last-child を flex-wrap で縦に積む（そちらを優先）。 */
  .session-list td:last-child { white-space: nowrap; }

  /* [2026-09-12] 顧客一覧の連絡先（メール／電話）は語中で折らない。
     1280px でメールが「uiseed.exa / mple.com」のように途中で折れていた
     （実機で確認）。列が広がる分は .scroll が吸収する。 */
  .customer-list .cust-contact { white-space: nowrap; }

  /* [2026-09-12] 顧客一覧の「申込中」「受講歴」列は、チップが複数付くと
     1行に収まらない。チップ自体（.course-chip）は nowrap のままだが、
     列の中で折り返してよい——.customer-list td には既定の white-space
     以外の指定を入れていないので実際には冗長だが、他の列（session-list
     の担当・操作列）が明示的に nowrap を選んでいるのに合わせ、この列は
     「折り返す」という判断を明示しておく。 */
  .customer-list td[data-label="申込中"], .customer-list td[data-label="受講歴"] {
    white-space: normal;
  }

  /* 密度設計（2026-09-10、Task 5）: 申込一覧の1行＝固定10列グリッド。
     PC幅（≥768px）でだけ列を固定する——狭幅は .entry summary が既定の
     flex-wrap のまま（カードとして読む。skill design-system の寸法表）。
     列の並び・幅は原本 `管理画面 密度設計案.dc.html` の grid-template-columns
     を正とする（7箇所すべて同一。task-5-brief.md）。gap は8pxのスケール値
     （var(--space-8)）、列幅自体は px の実測値（罫・余白と違い、列の意味を
     持つ寸法なので var(--space-N) の対象外）。

     `::before` の▸/▾（開閉の矢印）はここでは出さない。`display:grid` の
     直下でも生成ボックスとして grid item 扱いになり、列がずれる
     （`.attendee summary` と同じ判断——そちらも矢印を持たない）。
     開いた行のマーカーは11本目の列を増やさず、既存1列目（メモ印の
     16px列）に出す——原本 `.dc.html` 364行が実際にそうしている
     （下の `.entry[open] .cell-memo` 参照。修正ラウンド1では「11番目の
     暗黙列が要る」と見送ったが、原本を読み違えていた。rereview3 判定
     覆り）。 */
  .entry summary::before { display: none; }
  /* 列見出し行（.entry-head。Task 5 修正ラウンド1レビュー指摘 M-1）は
     行本体と同じグリッド定義を共有する——別々に持つと片方だけ直して
     ずれる事故になる。狭幅での非表示は 02-components.css 側（カードと
     して読む一覧に見出し行は要らない）。

     名前列は修正ラウンド1まで minmax(0, 1fr) だった。768〜899px前後は
     他の9列（10列目はACLS/PEARSのみ）の固定幅合計＋gapだけで
     776px（NCLS）/856px（ACLS・PEARS）に達し、名前列がちょうど0pxまで
     潰れて「氏名が空欄のまま申込日と重なる」ことがある。64pxの下限を
     与えて、狭くなっても最低限読める幅を残す（修正ラウンド2 N-2）。 */
  .entry summary, .entry-head {
    display: grid;
    grid-template-columns:
      [memo] 16px [name] minmax(64px, 1fr) [applied] 96px [kind] 48px
      [status] 96px [occupation] 72px [organization] 140px [experience] 72px
      [alert] 168px;
    gap: var(--space-8);
  }
  /* 密度設計 Task 14: 区分〜請求/入金の4列を包む .row-band（
     _reservation_row.html）は、PC幅では箱を作らない（display: contents）。
     4列はこれまでどおり上の名前つき列（kind/status/alert/amount）に
     直接乗る。375px の flex-wrap の段2は 04-narrow.css。 */
  .entry summary > .row-band { display: contents; }
  /* ACLS・PEARSだけ事前課題の72px列（9列目）が増える。他の列の順序・幅は
     不変——「＋prework」の1本だけを named line で挿入する。 */
  .entry.entry--prework summary, .entry-head.entry-head--prework {
    grid-template-columns:
      [memo] 16px [name] minmax(64px, 1fr) [applied] 96px [kind] 48px
      [status] 96px [occupation] 72px [organization] 140px [experience] 72px
      [alert] 168px [prework] 72px;
  }
  /* 修正ラウンド2 Major N-2: 10列の固定幅合計＋gapは856px（ACLS・
     PEARS。NCLSは776px）で、名前列の下限64pxを足すと920/840px必要。
     768〜899px前後はこれがビューポートに収まらず、.card の既定の
     overflow: hidden 宣言（02-components.css）がグリッドのはみ出し分を
     そのまま切り、操作列・事前課題列に到達する手段が無くなる
     （横スクロールも出ない——「収まっている」のではなく「切っている」
     ため）。追加のブレークポイントは作らない（768px一本の制約）。この
     カードだけ横方向の overflow を hidden から auto に開け、収まらない
     ぶんは横スクロールで届かせる（縦方向は角丸のクリップを保つため
     hidden のまま）。対象は reservations.html の .card.flush.entries
     のみ（他の .card.flush はテーブルを .scroll で包む既存の形のまま）。 */
  /* 密度設計 Task 13（2026-09-11）: 1024px前後の「1列＋8列」（申し送り
     §6）を足す前提として、この要素をコンテナクエリの起点にする。
     ブレークポイントは増やさない（768px一本の制約。task-13-brief.md）
     ので、ビューポート幅ではなく .card.flush.entries 自身の inline-size
     を見る——@container は @media を名乗らないため
     test_ブレークポイントは768pxだけ の対象に入らず、768px一本の制約と
     両立する（task-13-brief.md「container 相当の手法」）。しきい値の
     中身・実測値は下の @container ブロック直上のコメントを見る。 */
  .card.flush.entries {
    overflow-x: auto;
    overflow-y: hidden;
    container-type: inline-size;
    container-name: entries-card;
  }
  /* 開いた行のマーカー（▾）。既存1列目（メモ印）を流用し、閉じた行は
     メモ印のまま（原本 B1/B4）にする。文字色を透明にしてから ::after で
     重ねるのは、この<span>のテキストノード（note_mark。空のことも
     ある）をテンプレート側で分岐せずに済ませるため。 */
  .entry[open] .cell-memo { position: relative; color: transparent; }
  .entry[open] .cell-memo::after {
    content: "▾";
    position: absolute;
    inset: 0;
    color: var(--ink-2);
  }
  /* 列見出し行（.attendee-head。task-10-brief.md「第1版で落ちていたもの」
     ではないが、申込一覧の .entry-head（Task 5 修正ラウンド1レビュー
     指摘 M-1）と同じ理由で必要——原本 `A`（.dc.html 137行 `hdrN`）が
     必ず持つ列見出し行）。行本体（.attendee summary）と同じグリッド
     定義を共有する——別々に持つと片方だけ直してずれる事故になる。
     **`.entry summary, .entry-head` より後ろに置く。** テンプレートは
     `class="entry-head attendee-head"`（型・非表示は .entry-head を
     流用し、9列だけ .attendee-head で上書きする）なので、同じ詳細度
     （単一クラス）どうしはソース順で決まる——前に置くと10列の
     .entry-head 側に display / grid-template-columns を静かに奪われる
     （実測して確認済み）。 */
  .attendee-head {
    display: grid;
    grid-template-columns:
      [memo] 16px [name] minmax(0, 1fr) [applied] 96px [kind] 48px
      [status] 96px [occupation] 72px [organization] 140px [experience] 72px
      [alert] 168px [action] 96px;
    gap: var(--space-8);
  }
  .attendee-head.attendee-head--prework {
    grid-template-columns:
      [memo] 16px [name] minmax(0, 1fr) [applied] 96px [kind] 48px
      [status] 96px [occupation] 72px [organization] 140px [experience] 72px
      [alert] 168px [prework] 72px [action] 96px;
  }
  /* .cell-prework/.head-prework の leaf 規則（grid-column: prework）は
     下の申込一覧セクションに既にある（汎用の named line マッピング。
     .entry 専用ではない）ので、ここでは重複させない。 */
  /* F2（発注者の追加指摘・2026-09-12）: 氏名・申込・区分を包む帯
     （_attendee_row.html の .attendee-name-band／.attendee-secondary）。
     ここ（panel-cardが1024pxを超える広幅）では箱を作らず、cell-name/
     cell-applied/cell-kind をこれまでどおり name/applied/kind の各
     named列へ独立して乗せる——2段とも display: contents にして中身を
     グリッドまで透過させる（`.attendee-secondary` も contents にしないと
     cell-applied/cell-kind がその子のまま grid item になれない）。
     下の @container ブロックだけがこれを上書きし、narrowでは
     .attendee-name-band を1つの flex 項目にまとめる。 */
  .attendee summary > .attendee-name-band,
  .attendee summary > .attendee-name-band > .attendee-secondary { display: contents; }
  /* 列だけ指定した項目は、DOM 順が列順と食い違うと自動配置のカーソルが
     戻れず次の行へ落ちる（実測: 経験年数を .attendee-secondary に足した
     2026-09-14、所属が2段目・状態ピルが3段目に割れた。所属→状態の
     順は元から列順と逆だった）。1段目に載る項目は全部 grid-row: 1 を
     明示する。.row-note だけ自動（2段目）のまま。 */
  .attendee summary > .cell-memo, .attendee summary > .cell-status,
  .attendee summary > .cell-alert, .attendee summary > .cell-prework,
  .attendee summary > .cell-action,
  .attendee summary > .attendee-name-band > .cell-name,
  .attendee summary > .attendee-name-band > .cell-organization,
  .attendee summary > .attendee-name-band > .attendee-secondary > * { grid-row: 1; }
  /* 氏名は語中で折らない（列が狭いときは、かなが折り返して吸収する）。 */
  .attendee summary .attendee-name { white-space: nowrap; }
  /* 列の中身は named line 1本だけを指す `grid-column: <name>` にする
     （既定の grid-column-end: auto は1トラック分だけ span する）。
     DOM順ではなくこの割当てで位置が決まるため、要素を1つ落としても
     他の列は動かない（テンプレート側の条件分岐で列を消したときにずれる
     事故を防ぐ、tests の test_申込一覧の行は要素が無くても10列すべてを
     出力する 参照）。 */
  .cell-memo { grid-column: memo; }
  .cell-name { grid-column: name; min-width: 0; }
  .cell-applied { grid-column: applied; }
  .cell-kind { grid-column: kind; }
  .cell-status { grid-column: status; }
  .cell-alert { grid-column: alert; }
  /* .cell-amount/.cell-action は .entry（申込一覧）ではもう使わないが、
     .attendee（開催回パネル）が今後もこの2列を使い続けるので named line
     マッピング自体は消さない（reservation-list-brief.md）。 */
  .cell-amount { grid-column: amount; }
  .cell-prework { grid-column: prework; }
  .cell-action { grid-column: action; }
  /* 職種・所属・経験年数（reservation-list-brief.md、2026-09-12）。 */
  .cell-occupation { grid-column: occupation; }
  /* [2026-09-13 ユーザー指摘] 省略記号（ellipsis）で切って title 属性頼みに
   していたが、依頼者は全文表示を望んだ——固定140pxの列幅に収まらない
   ぶんは折り返す（overflow:hidden/nowrapを外すだけでよい。日本語は語の
   区切りなしに自然改行されるので overflow-wrap は不要）。行の高さは
   グリッド行が中身に合わせて自然に伸びる（他の列は既定の1行のまま）。 */
.cell-organization { grid-column: organization; }
  .cell-experience { grid-column: experience; }
  /* 見出し行の列（.head-*）も同じ named line を指す。 */
  .head-memo { grid-column: memo; }
  .head-name { grid-column: name; }
  .head-applied { grid-column: applied; }
  .head-kind { grid-column: kind; }
  .head-status { grid-column: status; text-align: center; }
  .head-alert { grid-column: alert; }
  /* .head-amount/.head-action は .attendee-head が使い続けるので残す
     （.entry-head はもう出さない。reservation-list-brief.md）。 */
  .head-amount { grid-column: amount; text-align: right; }
  .head-prework { grid-column: prework; text-align: center; }
  .head-action { grid-column: action; text-align: right; }
  .head-occupation { grid-column: occupation; text-align: center; }
  .head-organization { grid-column: organization; text-align: center; }
  .head-experience { grid-column: experience; text-align: center; }
  /* 押せない理由の行下本文は、承認・繰り上げボタンと同じ行の2段目へ
     自動的に流れ落ちる（10列とも既に埋まっているため、次の行へ回る）。
     原本（.dc.html 337行）は本文が氏名列の左端から始まる（メモ印の
     16px列は開けたまま）。`name` の named line から始め、末尾までを
     幅に取る（Task 5 修正ラウンド1レビュー指摘 m-5）。 */
  /* .row-memo（顧客メモ・申込メモ、reservation-list-brief.md §2）も
     同じ「name列から末尾まで」の全幅本文として扱う。 */
  .row-note, .row-memo { grid-column: name / -1; }

  /* ユーザー指摘 2026-09-11（A1）で「ほかの出力 ▾」「この回の操作 ▾」の
     抽斗2つを廃止したため、`.toolbar` 専用のグリッド化と、その中の
     drawer-panel を全幅にする打ち消し規則は不要になった（02-components.css
     の素の flex-wrap がそのまま≥768pxでも使える）。

     F3（修正ラウンド1・Task Aの申告）: 375px（AHA・講師複数の回）で
     ツールバー帯が45px→149pxに伸びたため、出力ボタンだけ1つの
     `<details class="drawer toolbar-outputs">`「出力」に戻した。PC
     （≥768px）は原本にトグルが無いので、`.cust-mail-drawer` と同じ
     `::details-content` の手法で常に開いたまま・summary は隠す
     （HTML側は常に open 属性なしで出す——375pxの初期状態はサーバが
     決められないため）。`::details-content` を解さない旧ブラウザでは
     summaryを隠さない（押せば開ける）。 */
  .toolbar-outputs::details-content { content-visibility: visible; block-size: auto; }
  @supports selector(::details-content) {
    .toolbar-outputs > summary { display: none; }
  }

  /* 残る唯一の `.drawer-panel`（375px専用「ほかの集計」
     entry-metrics-drawer）は親の `.entry-metrics` が≥768pxで常に
     display:none のため、ここに768px用のグリッド化を書いても届かない
     ——書かない。

     密度設計（2026-09-10、Task 8）: 申込1件を開いた中身。依頼者が原本
     から実測した3つの値をそのまま使う——狭幅では1列に積む（既定の
     block表示のまま）ので、この@mediaの外には書かない。 */
  /* B5（2026-09-11依頼者フィードバック第2弾）で状況バーが4系統→2系統に
     改訂され2列グリッドにしていたが、2026-09-14 に「見出し＋ピル」の
     横1行の帯（02-components.css の flex）へ変えたため、PC専用の
     グリッド化は持たない（2列に割ると承認と入金が画面の左右に離れる）。 */
  /* align-items: start——2列を白いカードにした（2026-09-14）ので、短い側の
     カードが長い側の高さまで空のまま伸びないようにする。 */
  .detail-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
  .item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-16); }
  /* [2026-09-12 依頼者指摘] 「質問と回答のデザインがほぼ同じで分かりづらい」。
     項目ラベル（11px太字グレー）と値（14px通常）はフォントで区別してある
     ものの、項目どうしの境目が無いため、長い回答（複数行に折り返す）が
     隣の項目と視覚的に連続して見える。`.cust-field`（customer_detail.html）
     と同じ形——薄い罫線＋上下paddingで1項目＝1行の境界をはっきりさせる。 */
  .item {
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--space-12); padding: var(--space-8) 0;
    border-bottom: 1px solid var(--rule-2); align-items: baseline;
  }

  /* メール送信履歴（作り直し・Task B・2026-09-11 依頼者指摘）: 768px以上
     では「種別名｜状態｜最終送信日時｜回数｜操作」の5列グリッドにする
     （task-B-brief.md B3）。狭幅（既定）は static/02-components.css 側の
     素の縦積みのまま——この@mediaの外には書かない。 */
  .mail-history-row {
    display: grid;
    /* [2026-09-12 依頼者指摘] 操作列（末尾）を 1fr→1.3fr に広げ、種別名
       （状態列）・最終送信日時のぶんを少し削って回す。長い短縮名の
       ボタンでも1行に収まりやすくする（それでも収まらない場合は
       .mail-resend-btn が2行への折り返しを吸収する）。 */
    /* [2026-09-14] 右列を白いカード（左右 padding 16px）にした分だけ幅が
       減り、状態列の「送信済み」ピルが2行に折れた。状態列に 72px の下限を
       置き、種別名・日時の比率を少し削って回す。 */
    grid-template-columns: minmax(0, 1fr) minmax(72px, 0.9fr) minmax(0, 0.75fr) 40px minmax(0, 1.2fr);
    gap: var(--space-4) var(--space-12);
    align-items: center;
  }
  .mail-history-row > * { display: block; }
  .mail-history-head {
    display: grid; font-weight: 700; color: var(--ink-2); font-size: var(--fs-xs);
  }
  .mail-history-status, .mail-history-sent, .mail-history-count, .mail-history-action {
    margin-top: 0;
  }

  /* 直上の `.entry summary, .entry-head` の10列グリッド定義は一覧行の
     集約summary専用だが、子孫セレクタのため .entry に入れ子で増えた抽斗
     （取り消し・返金の操作）の summary にも当たってしまう。ここで
     打ち消さないと、1行のテキストが16px幅の「memo」列に収まらず何行も
     折り返って縦に伸びる（実測で発見。02-components.css側の基本打ち消しと対）。
     「申込フォームの回答」は Task B（2026-09-11）で抽斗自体を廃止した
     ため、.answers-drawer 分の打ち消しは無くなった。 */
  .danger-drawer summary {
    display: inline-flex; grid-template-columns: none;
  }

  /* 密度設計 Task 13（2026-09-11）: 1024px前後の「1列＋8列」（申し送り
     §6）。しきい値は .card.flush.entries 自身の inline-size に対する
     1024px。ビューポート幅ではない——main の水平padding・.card の罫・
     .entry のpaddingぶん、ビューポートより66px狭い（実測: ビューポート
     1024pxでコンテナ幅990px・summary幅958px、1280pxでコンテナ幅1146px・
     summary幅1114px）。1024という数字をそのまま境界に使うと、
     ビューポート1024pxは畳み（990≤1024）、1280pxは畳まない
     （1146>1024）の両方を実測どおりに満たす。768〜899px（Task 5が
     横スクロールで逃がしていた範囲）もこの境界より内側なので同じく
     畳まれる。

     .entry summary/.entry-head・.detail-columns はいずれも
     .card.flush.entries の子孫なので、1つのコンテナクエリでまとめて
     畳める。`.toolbar` はA1で抽斗を廃止し常に flex なので、ここで
     打ち消す宣言はもう無い。 */
  @container entries-card (max-width: 1024px) {
    /* 一覧の10列（ACLS・PEARSは事前課題を含め11列）を8列（同9列）へ。
       「申込」「区分」の2トラック（96px・48px、計144px＋gap8px）を
       グリッドの列そのものから削り、その幅ぶんを氏名トラックへ吸収する
       ——列の意味（申込→区分の順）は氏名の下2段に残したまま、
       グリッドの列数を実際に減らす（task-13-brief.md「8列」）。
       「削っただけ幅を氏名に足す」のではなく、名前トラック自体は
       minmax() のまま1frで余りを取る（元から可変だったため）。

       行は3段: 1段目 = [memo][氏名][status][occupation][organization]
       [experience][alert]（[prework]）（7列・ACLS/PEARSは8列。
       請求/入金・操作・出席は撤去済み）。2段目 = 申込日（氏名トラックの真下）。
       3段目 = 区分（同じく氏名トラックの真下）。申込・区分を2段目に
       横並びさせると、氏名トラックが狭い768px近辺で2つの文字列が重なる
       （grid-column を同じ1トラックに2つ並べる形は重なりを避けられない）。
       縦2段に割ることで、各段は氏名トラックいずれか1つの文字列だけを
       収めればよくなる（申込日1本なら32pxのトラックでも折り返さず
       収まる）。

       職種・所属・経験年数を row1 のまま追加して収まるかを実測した
       （reservation-list-brief.md §1-e）。**1024pxビューポートでは収まる**
       （実測: コンテナ幅990px・summary幅958px、固定幅合計620px＋gap7本
       56px＋氏名下限32pxで708px ≤ 958px）。**しかし @container のしきい値
       （max-width: 1024px）は768pxも含み、768pxビューポートではコンテナが
       734px・summary が702pxまで狭くなる（実測。tests/test_admin_density_
       acceptance.py::test_横スクロール0かつ全ボタンが到達可能[768] で
       html.scrollWidth が768pxを18px超える横スクロールとして実際に検出
       された）。事前課題ありの固定幅合計692px＋gap8本64px＋氏名下限32pxで
       788px必要——702pxに収まらない。**
       このため organization（140px、3列中いちばん幅を取る）だけを、
       申込・区分と同じ「氏名トラックの下の段」（row4）へ折り込む
       （task-13-brief.md「8列」と同じ手法）。row1に残すのは職種・経験年数
       の2つ（合計144px）だけにし、事前課題ありの固定幅合計を692-140=552px
       に減らす。552+gap7本56px+氏名下限32px=640px ≤ 702pxで768pxでも
       収まる（実測で確認）。1024px側は元々十分な余裕（958px）があるので
       row4に折り込んでも見た目は変わらない。 */
    .entry summary, .entry-head {
      grid-template-columns:
        [memo] 16px [name] minmax(32px, 1fr)
        [status] 96px [occupation] 72px [experience] 72px
        [alert] 168px;
      grid-template-rows: [row1] auto [row2] auto [row3] auto [row4] auto;
    }
    .entry.entry--prework summary, .entry-head.entry-head--prework {
      grid-template-columns:
        [memo] 16px [name] minmax(32px, 1fr)
        [status] 96px [occupation] 72px [experience] 72px
        [alert] 168px [prework] 72px;
      grid-template-rows: [row1] auto [row2] auto [row3] auto [row4] auto;
    }
    .cell-name, .head-name { grid-row: row1; }
    .cell-applied, .head-applied { grid-column: name; grid-row: row2; }
    .cell-kind, .head-kind { grid-column: name; grid-row: row3; }
    /* 所属だけ氏名トラックの4段目（申込・区分と同じ折り込み）。 */
    .cell-organization, .head-organization { grid-column: name; grid-row: row4; }
    .cell-memo, .head-memo,
    .cell-status, .head-status,
    .cell-occupation, .head-occupation,
    .cell-experience, .head-experience,
    .cell-alert, .head-alert,
    .cell-prework, .head-prework {
      grid-row: row1;
    }
    /* 2段目〜4段目（申込・区分・所属）の文字サイズ・色は 02-components.css
       の `.cell-applied` / `.cell-kind`（fs-xs・ink-2。復習は `.is-review`
       が別途 navy 太字で上書き）・`.cell-organization`（05-admin.css の
       leaf規則。2026-09-13 に全文表示へ変更し ellipsis は外した）が
       既に効いているため、ここでは触らない。 */

    /* 開いた中身の2列を1列へ（申し送り §6）。 */
    .detail-columns { grid-template-columns: minmax(0, 1fr); }
  }

  /* [Task 14] 開催回パネル（.panel-body。カレンダーのポップアップと
     /calendar/sessions/<id> の両方が同じ断片）にも Task 13 と同じ
     「1列＋7列」の畳みを入れる。ポップアップの <dialog class="panel-dialog">
     は max-width: 720px（上）なので、受講者行の9列グリッド
     （固定幅 712px＋gap 64px＝776px）はどの画面幅でも収まらず、
     .card の overflow: hidden で右端の「承認」ボタンが
     切れて押せなかった（Task 14 実測: 1280/1024/768px のいずれも
     ボタンの右端がダイアログの右端を 73px 超過）。フルページも
     768〜880px で同じ。しきい値は Task 13 と同じ 1024px（申し送り §6。
     ポップアップは常に 720px なので常に畳まれる）。 */
  .panel-body {
    container-type: inline-size;
    container-name: panel-card;
  }
  @container panel-card (max-width: 1024px) {
    /* [2026-09-13 ユーザー指摘] 実測（4bytesの前回コミット時点）:
       事前課題ありの固定幅合計は memo16+status96+alert168+amount136+
       attend56+prework72+action96=640px+name下限32px+gap7本56px=728pxで、
       720pxの吹き出し幅に**そもそも収まっていなかった**（氏名が
       1〜2文字ずつ折り返る実害を発注者のスクリーンショットで確認）。
       金額（amount）を削除（cell-status の入金ピルで状態は分かる。
       正確な額は行を開けば見える——申込一覧と同じ判断）、注意
       （alert）を168→120pxに縮め（もともと注意欄はほとんど空で、
       「先頭1つ＋＋N」の畳みも1行に収まる長さで足りる）、代わりに
       所属を氏名の帯（.attendee-name-band）へ折り込む（下記）。
       新しい固定幅合計（事前課題あり）は
       memo16+status96+alert120+attend56+prework72+action96=456px+
       name下限32px+gap6本48px=536pxで、720pxに余裕を持って収まる。 */
    .attendee summary, .attendee-head {
      grid-template-columns:
        [memo] 16px [name] minmax(32px, 1fr)
        [status] 96px [alert] 120px [action] 96px;
      grid-template-rows: [row1] auto;
    }
    .attendee.attendee--prework summary, .attendee-head.attendee-head--prework {
      grid-template-columns:
        [memo] 16px [name] minmax(32px, 1fr)
        [status] 96px [alert] 120px
        [prework] 72px [action] 96px;
      grid-template-rows: [row1] auto;
    }
    /* 注意（alert）を168→120pxに縮めた分、「先頭1つ＋＋N」が1行に
       収まらない組み合わせ（長い1件目＋＋N）が出うる。02-components.css
       の .cell-alert は overflow: hidden の単一行 flex なので、収まらない
       ぶんは黙って**切れて見えなくなる**——狭くした代わりに折り返しを
       許し（overflow: hidden のままでも grid 行の高さは auto なので、
       折り返した2行目もそのまま見える）、切れる事故を防ぐ。 */
    .attendee summary > .cell-alert { flex-wrap: wrap; }
    /* F2（発注者の追加指摘・2026-09-12）: 720px（吹き出し幅）で畳んだとき、
       見出しが「氏名／申込／区分」と縦3段、行も氏名の下に申込日・区分が
       縦積みになっていた（発注者のスクリーンショットより）。

       見出しは「氏名」1語だけにする——申込・区分の値は行側に横並びで
       出るため、見出しラベルは要らない（head-applied/head-kindを隠す）。

       行は .attendee-name-band を1つの grid item にまとめ、row1・name列
       の中で氏名と「申込日・区分」を横に並べる（.entry の .row-band と
       同じ flex-wrap の手法）。**実測（tests/test_admin_density_
       acceptance.py）: name列はこのコンテナ幅（720px）で実効70pxしか
       なく、氏名だけでほぼ埋まる。** 申込日・区分を2つの独立した flex
       項目のまま折り返すと、それぞれ別の行に落ちて元の3段積みへ逆戻り
       する（実測 SURVIVED）。`.attendee-secondary` で1つにまとめることで、
       折り返しても申込日と区分は必ず同じ行に並ぶ（3段→最大2段。狭い
       ポップアップでは氏名が1段目、申込日・区分が2段目になる）。
       氏名（cell-name）は flex: 0 0 auto で縮めない。 */
    .attendee summary > .attendee-name-band {
      grid-column: name; grid-row: row1;
      display: flex; flex-wrap: wrap; align-items: baseline;
      gap: var(--space-8); min-width: 0;
    }
    .attendee summary > .attendee-name-band > .cell-name { flex: 0 0 auto; max-width: 100%; }
    .attendee summary > .attendee-name-band > .attendee-secondary {
      display: flex; align-items: baseline; gap: var(--space-4);
      flex: 0 1 auto; white-space: nowrap;
    }
    /* 「・」区切りは narrow だけの見た目（値そのものは変えない）。 */
    .attendee summary > .attendee-name-band > .attendee-secondary > .cell-kind::before { content: "・"; }
    /* 職種（2026-09-13）。申込日・区分と同じく常に短い値なので
       .attendee-secondary に含めて一緒に折り返す——所属（長さ不定）とは
       別扱いにした理由とちょうど逆（下記コメント参照）。ここだけの
       スコープにする（reservation-list-brief.md 由来の .cell-occupation
       本体には font-size/color を持たせていない——申込一覧では素の
       本文サイズのままでよい列のため）。 */
    .attendee summary > .attendee-name-band > .attendee-secondary > .cell-occupation {
      font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap;
    }
    .attendee summary > .attendee-name-band > .attendee-secondary > .cell-occupation::before { content: "・"; }
    /* 経験年数（2026-09-14）。職種と同じ扱いで帯に折り込む。 */
    .attendee summary > .attendee-name-band > .attendee-secondary > .cell-experience {
      font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap;
    }
    .attendee summary > .attendee-name-band > .attendee-secondary > .cell-experience::before { content: "・"; }
    /* 所属（2026-09-13）。長さが不定なので申込日・区分・職種とは別の
       独立した flex item にし、flex-basis: 100% で常に自分の行から始める
       （wrap のときだけ改行が入る flex の仕様どおり——直前の申込日・区分・
       職種が同じ行に収まっていても、所属の直前で必ず改行される）。 */
    .attendee summary > .attendee-name-band > .cell-organization {
      flex: 1 1 100%; font-size: var(--fs-xs); color: var(--ink-2);
    }
    .attendee-head > .head-applied, .attendee-head > .head-kind,
    .attendee-head > .head-occupation, .attendee-head > .head-organization,
    .attendee-head > .head-experience { display: none; }
    .attendee-head > .head-name { grid-row: row1; }
    .attendee summary > .cell-memo, .attendee-head > .head-memo,
    .attendee summary > .cell-status, .attendee-head > .head-status,
    .attendee summary > .cell-alert, .attendee-head > .head-alert,
    .attendee summary > .cell-prework, .attendee-head > .head-prework,
    .attendee summary > .cell-action, .attendee-head > .head-action {
      grid-row: row1;
    }
  }

  /* ============================================================
     Task 11: 受講生詳細（templates/customer_detail.html）専用。
     `cust-` 接頭辞で申込一覧・行・ボタンの共通語彙とは重ならない
     セレクタに限定する（Task 5 と同じファイルを触るための取り決め）。
     ボタンの色・高さ・padding は 02-components.css の階層クラス
     （.btn-primary/.btn-secondary/.btn-danger + .btn-h28/.btn-h32/
     .btn-pad-tight）をテンプレート側で組み合わせるだけで、ここでは
     新設しない。 */

  /* [D3, 2026-09-12 依頼者指摘] 見出し右の累計支払額（.cust-total 一式）は
     「累計金額は不要」で削除した。集計の帯（.stat-band、下の
     .stat-item 群）の中の「累計支払額」だけが残る。

     集計の帯を .panel-stats（開催回パネルの申込状況・復習参加…）と同じ
     「数字のタイル」の読み方に揃える。.stat-band 自体（display:flex・
     flex-wrap:wrap・色）は06-settings-tabs.cssのまま——ここは中身の
     span 3つ（ラベル・値・単位）だけの新設。PCのみ（密度を上げてよいのは
     管理画面をPC幅で見ているときだけ）。 */
  .stat-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .stat-k { font-size: var(--fs-xs); color: var(--ink-2); }
  .stat-v {
    font-size: var(--fs-lg); font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .stat-unit { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); margin-left: 2px; }

  /* 基本情報（かな/ローマ字/メール/…/状態）の3列の定義リスト。
     依頼者が原本から実測したグリッド（そのまま使用）。 */
  .cust-fields {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--space-24); margin-top: var(--space-12);
  }
  .cust-field {
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--space-12); padding: var(--space-8) 0;
    border-bottom: 1px solid var(--rule-2); align-items: baseline;
  }
  .cust-field-k { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
  .cust-field-v { font-size: var(--fs-md); overflow-wrap: anywhere; }

  /* 概要カード（全幅）＋2列。左=受講履歴／似た顧客、右=事務局メモ／
     送信済みメール／顧客情報を編集／この顧客の操作。 */
  .cust-columns {
    display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
    gap: var(--space-16); align-items: start;
  }
  .cust-col-main, .cust-col-side { display: flex; flex-direction: column; gap: var(--space-16); }

  /* 受講履歴（8列のまま。依頼者が原本から実測したグリッド）。 */
  .cust-hist-head, .cust-hist-grid {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 80px 80px 96px 96px 56px 80px;
    gap: var(--space-8); align-items: center;
  }
  .cust-hist-head {
    padding: var(--space-8) var(--space-16); background: var(--ground-soft);
    border-bottom: 1.5px solid var(--rule);
    font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
  }
  .cust-hist-row { border-bottom: 1px solid var(--rule-2); }
  .cust-hist-row:hover { background: var(--surface-alt); }
  .cust-hist-grid { padding: var(--space-8) var(--space-16); }
  .cust-hist-course { min-width: 0; display: block; }
  .cust-hist-course-name {
    display: block; font-size: var(--fs-md); font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* コース列は153px程度しかないため、会場名は2行クランプ
     （1行 ellipsis だと長い会場名が必ず切れる。申し送り §4.5 #4）。 */
  .cust-hist-course-venue {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-2); overflow: hidden;
  }
  /* 申込メモは列ではなく行の下（11px）。1列目の幅に空セルで揃える
     ——padding-left では合わせない（申し送り §3）。 */
  .cust-hist-memo {
    display: grid; grid-template-columns: 80px minmax(0, 1fr);
    gap: var(--space-8); padding: 0 var(--space-16) var(--space-8);
    font-size: var(--fs-xs); color: var(--ink-2);
  }

  /* 似た顧客（7列。依頼者が原本から実測したグリッド）。 */
  .cust-dup-head, .cust-dup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 96px 48px 88px 80px 88px;
    gap: var(--space-8); align-items: center;
  }
  .cust-dup-head {
    padding: var(--space-8) var(--space-16); background: var(--ground-soft);
    border-bottom: 1.5px solid var(--rule);
    font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
  }
  .cust-dup-grid { padding: var(--space-8) var(--space-16); border-bottom: 1px solid var(--rule-2); }
  .cust-dup-name, .cust-dup-mail {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cust-dup-name { font-size: var(--fs-md); font-weight: 700; }
  .cust-dup-mail { font-size: var(--fs-sm); color: var(--ink-2); }
  .cust-dup-action { display: flex; justify-content: flex-end; }
  .cust-dup-note { padding: 0 var(--space-16) var(--space-12); font-size: var(--fs-xs); color: var(--ink-2); }
  /* [Fix1, Major-4/M-6] 375px専用の候補カード直近の注記（04-narrow.css）。
     PCではカード末尾の .cust-dup-note（上）が同じ情報を出すので隠す。 */
  .cust-dup-warn { display: none; }

  /* 表の副次情報・右揃えの金額共通ユーティリティ（cust- 接頭辞のみ・
     .num は既存の共通語彙のため上書きしない）。 */
  .cust-align-r { text-align: right; }
  .cust-num { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); white-space: nowrap; }
  .cust-alert-text { color: var(--alert); font-weight: 700; }

  /* 件数バッジの警告色版（.count は既存の bg-quiet/ink-2 の pill）。 */
  .count-warn { color: var(--warn); }

  /* 階層3の抽斗（受講歴を削除する／この顧客の操作）。既定は赤文字＋赤枠の
     見出しだけで、地は塗らない（決定2の撤回と同じ理由。02-components.css
     の .delete-btn 直前コメント参照）。 */
  .cust-drawer-danger > summary { color: var(--alert); }
  .cust-drawer-danger > summary:hover { background: var(--bg-alert); }
  .cust-drawer-note { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); margin-left: var(--space-8); }
  .cust-drawer-body { padding: 0 var(--space-16) var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
  .cust-drawer-body form { display: flex; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
  .cust-drawer-item { border-top: 1px solid var(--rule-2); padding-top: var(--space-12); display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
  /* 押せない理由は title だけに乗せない（375px には hover が無いため）。 */
  .cust-disabled-reason { font-size: var(--fs-xs); color: var(--warn); margin: 0; }

  .cust-mail-list { list-style: none; margin: 0; padding: 0; }
  .cust-mail-list li {
    padding: var(--space-8) var(--space-16); border-bottom: 1px solid var(--rule-2);
    display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-sm);
  }

  /* [Fix1, Critical-1] 送信済みメールはPCでは常に開いたカード（原本
     id="C" はそもそも <details> ではない。トグルできない）。HTML側は
     常に open 属性なしで出す（375pxの初期状態はサーバが決められない
     ため）ので、768px以上でだけ中身を強制的に見せる。::details-content
     は details の「中身」を表す擬似要素で、details の open 属性を見る
     セレクタとは別物（`test_密度修飾クラスはtrやdetails_openという
     構造に依存しない` が禁じているのはその属性セレクタそのもの）。 */
  .cust-mail-drawer::details-content { content-visibility: visible; block-size: auto; }
  .cust-mail-drawer > summary { cursor: default; }
  .cust-mail-drawer > summary::-webkit-details-marker { display: none; }
  .cust-mail-body { display: block; }

  /* [Fix1, 依頼者裁定] .stat-band と .hint はブリーフが足させたもので
     原本C/M3どちらにも無い（PC側の見た目はこれまでどおり、常に開いた
     ままにする）。理由は上の送信済みメールと同じ。

     [Fix2, Minor-C] ::details-content を解さないブラウザでは、この
     ルールはただ無視されるだけで中身は畳まれたまま——なのに、すぐ下の
     summary の display:none だけは常に効いてしまい、開く手段が
     画面から消える（依頼者裁定は「畳む」であって「消す」ではない）。
     summary を隠すのは ::details-content が実際に効くときだけにする。
     効かない場合は summary が残るので、閉じた状態からでも押せば開く
     （送信済みメールの `.cust-mail-drawer > summary` と同じ考え方）。 */
  .cust-stat-drawer::details-content { content-visibility: visible; block-size: auto; }
  @supports selector(::details-content) {
    .cust-stat-drawer > summary { display: none; }
  }
}