/* members-v2.css — members-v1.css の写し（fix1：重1 立ち上がり mask、重2 詳細の文字待ち、中4 焦点下線）。2026-09-29。
 * members-v1 — MEMBERS 一覧（members.html）と詳細（member.html）。下層ページ班、2026-09-28。
 * 契約：docs/RENEWAL-BRAND-SYSTEM.md（色・3書体・共通部品）、docs/DESIGN-DETAIL-STANDARD.md（8u、インクで測る）。
 * 構成：docs/SUBPAGE-STRUCTURE-2026-09-28.md §2〜§4。冒頭の帯・題字・副情報・余白の役割は下層ページ共通の枠 sp-frame-v1.css に従う
 * （主指揮 2026-09-28 採用：帯はヘッダーの下 280、ヘッダー → 題字のインク 64／スマホ 24、帯の端 → 最初の文字 96／スマホ 64）。
 * このファイルは MEMBERS 固有の部品だけを持つ：飛雲の造形、絞り込み、名簿、詳細の絵・CHANNELS・紹介文、閉じの帯。
 * 帯は 2 つだけ：夜空 #0d0724（冒頭の造形の地）→ 黒 #08090e（中身）。境目はまっすぐな地の切り替えで、線は引かない。 */

body.mb-page {
  --mb-sky: #0d0724;
  --mb-black: #08090e;
  --mb-paper: #f3ecdc;
  --mb-quiet: rgba(243, 236, 220, 0.78);
  --mb-gold: #d8b66a;
  --mb-gold-text: #ecd28a;
  --mb-signal: rgba(184, 156, 255, 0.32);
  --mb-ring: rgba(157, 123, 220, 0.5);
  --mb-face: "Barlow Condensed", "Zen Kaku Gothic New", system-ui, sans-serif;
  --mb-jp: "Zen Kaku Gothic New", system-ui, sans-serif;
  /* 中身の列の最大幅と左右の余白はサイト共通の変数で受ける（sp-frame-v1.css の --sp-gutter と同じ式。値は別の担当が決める）。
     名簿の列の数は中身の幅から決まる（N = round(幅 / 195)）ので、--site-max が広がれば列が増える（セルの大きさは変えない） */
  /* --site-gutter は「全幅の要素の左右の余白」専用（式に 100% を含み、使う場所の包含ブロックで解決される）。
     中身の幅は --site-max と --site-pad から求める（site-width-v1.css の説明どおり。--site-vw はスクロールバーを除いた幅） */
  --mb-gutter: var(--site-gutter, max(var(--page-pad, 40px), calc((100% - var(--site-max, 1168px)) / 2)));
  --mb-content: min(var(--site-max, 1168px), calc(var(--site-vw, 100vw) - 2 * var(--site-pad, var(--page-pad, 40px))));
  color: var(--mb-paper);
}

/* study16.css の「#main の直下は中身の幅」を、全幅の帯だけ外す（sp-opener・sp-body は sp-frame-v1.css が外す） */
body.mb-page #main > .mb-band {
  width: auto;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- 冒頭の帯の中の飛雲 */
/* sp-frame-v1.css の .sp-wamon と同じ層（文字より下）。帯の中だけに描く（帯は overflow: hidden。上端はヘッダーの下端と同じ色で続く） */
body.mb-page .mb-opener .mb-hiun {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  overflow: hidden;
}
/* 詳細：手前の段の雲は絵の前（ホームで手前の段の波をキャストの前に置くのと同じ）。文字には雲を重ねないので文字との前後は問題にならない */
body.mb-page .mb-opener > .mb-hiun--front { z-index: 3; }

.hiun-fill { fill: var(--mb-sky, #0d0724); stroke: none; }
/* 雲は線画（主指揮の方針 2026-09-28：和の線 3 段で線画として描く）。雲の内側は地の夜空と同じ色で塗り、手前の雲が奥の雲の線を
   隠すためだけに使う（面の色は出さない）。比較用に、契約の深紫 #170d3a で面を出す版を data-fill="deep" で残す */
body.mb-page .mb-opener[data-fill="deep"] .hiun-fill { fill: #170d3a; }
.hiun-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* 線の色と太さは members-v1-hiun.js が属性で持つ（外形 #8c6be0・1.5／雲の輪郭 #6e50c6・1.2／渦 #5a3fb0・1.0）。
   金の一筆（契約の例外：和紋の金 #d8b66a、不透明度 0.5）：入場では 1.0 で書き切り、200ms 保って 800ms（ease-out）で 0.5 へ。
   前の版の破線の指定（pathLength 用の 1.02）は外した（残すと金が点線に見える） */
.hiun-gold { fill: none; stroke: #d8b66a; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- 操作リンクの型（契約 §4 の .u） */
/* Barlow Condensed 600・字間 0.2em、1px の下線を文字のインクの 8.5 下、押せる範囲 44 */
body.mb-page .mb-filters a,
body.mb-page .mb-u {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 0 12px;
  color: var(--mb-quiet);
  font: 600 14px/1 var(--mb-face);
  letter-spacing: 0.2em;
  text-decoration: none;
  white-space: nowrap;
}
body.mb-page .mb-u { font-size: 13px; }
body.mb-page .mb-filters a::after,
body.mb-page .mb-u::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.75px; /* 文字のインクの下端から 8.5（契約 §4、実測） */
  height: 1px;
  background: currentColor;
}
body.mb-page .mb-filters a:not([aria-current="page"])::after { content: none; } /* 未選択は下線なし・控えめ */
body.mb-page .mb-filters a[aria-current="page"] { color: var(--mb-paper); }
body.mb-page .mb-filters a:hover,
body.mb-page .mb-u--quiet:hover { color: var(--mb-paper); }
body.mb-page .mb-u--primary { color: var(--mb-gold-text); } /* 主要な操作 1 つ（配信中だけ）＝契約の金のゾーン */
body.mb-page .mb-u .mb-arrow { flex: none; width: 18px; height: 10px; margin-bottom: 1px; }
body.mb-page :is(.mb-filters a, .mb-u):focus-visible { outline: none; }
body.mb-page .mb-filters a:focus-visible::after { content: ""; height: 2px; background: #f3ecdc; }
body.mb-page .mb-lamp {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mb-gold); /* 配信中の点灯＝契約の金のゾーン */
}
body.mb-page .mb-u .mb-lamp { align-self: flex-end; margin-bottom: 3px; }

/* ---------------------------------------------------------------- 一覧：黒の帯の最初の行（絞り込み＋配信の要約） */
/* 帯の端 → 絞り込みの文字のインク 96（スマホ 64）。押せる範囲 44 の中で文字は下から 12 にあるので、箱では 20.5 引く（実測） */
body.sp.mb-page .mb-body > .mb-controls:first-child { margin-top: calc(var(--sp-edge, 96px) - 20.5px); }
body.mb-page .mb-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between; /* 配信の要約は副情報なので右のガターに揃える（契約 §4 節の見出し） */
  column-gap: 48px;
}
body.mb-page .mb-filters { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 0; }
body.mb-page .mb-live {
  display: flex;
  align-items: flex-end;
  min-height: 44px;
  margin: 0;
  color: var(--mb-quiet);
  font: 500 13px/13px var(--mb-jp);
}
body.mb-page .mb-live .mb-live-text { padding-bottom: 12px; } /* 絞り込みの文字と同じ下の位置に */
body.mb-page .mb-live .mb-u { font-size: 14px; }

/* ---------------------------------------------------------------- 一覧：互い違いの名簿 */
/* 選択中の下線のインク → 1 段目の絵の箱 32（構成案 §2.2「メタの行 → 最初の中身 32」、箱で測る：誰が 1 段目でも同じ位置） */
body.mb-page .mb-roster {
  --cols: 12;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  row-gap: 32px;
  column-gap: 0;
  margin: 27.25px 0 0;
  padding: 0;
  list-style: none;
}
/* 最後の名前のインク → フッターの最初の文字のインク 96（フッターの上の余白 16＋行の箱の中の 18 を引いて 58.5、実測） */
/* 最後の名前のインク → フッターの最初のインク 96。フッターの X・YouTube のアイコンは文字より 6 高いので、アイコンまでで測る（審査の指摘 9） */
body.sp.mb-page #main > .mb-body.sp-body { padding-bottom: 64px; } /* sp-frame-v1.css の #main > .sp-body より強く */
body.mb-page .mb-cell {
  grid-column: var(--gc, auto) / span 2;
  grid-row: var(--gr, auto);
  min-width: 0;
}
body.mb-page .mb-roster.is-pairs .mb-cell { grid-row: var(--gr, auto) / span 2; }
body.mb-page .mb-cell[hidden] { display: none; }
body.mb-page .mb-cell-link {
  display: block;
  color: var(--mb-paper);
  text-decoration: none;
  outline-offset: 4px;
}
body.mb-page .mb-cell-link:focus-visible { outline: none; }
body.mb-page .mb-cell-link:focus-visible .mb-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: #f3ecdc;
}

/* 絵の箱：正方形。元画像 1000px を箱の幅で表示＝画面内の全員が同じ倍率（s = 箱 / 1000）。
   外接枠の下端を「足元の線」（箱の下端から 8）に、外接枠の中心を箱の中心に置く（左右は箱の内側 8 に収める）。 */
body.mb-page .mb-art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  container-type: inline-size;
}
body.mb-page .mb-art .mb-fig {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  translate:
    clamp(calc(8px - var(--ax) * 100cqw), calc((0.5 - var(--ax) - var(--aw) / 2) * 100cqw), calc(100cqw - 8px - (var(--ax) + var(--aw)) * 100cqw))
    calc(100cqw - 8px - (var(--ay) + var(--ah)) * 100cqw);
}
/* 入場：足元の線で切り抜き、その下から立ち上がる。不透明のまま（公式絵はぼかし・フェードをしない） */
body.mb-page .mb-art.is-rising { clip-path: inset(-100% -50% 8px -50%); }
html.mb-js body.mb-page .mb-roster[data-enter="pending"] :is(.mb-fig, .mb-plate),
html.mb-js body.mb-page .mb-cell.is-waiting :is(.mb-fig, .mb-plate) { visibility: hidden; } /* 名前も自分の絵と一緒に出す（審査の指摘 5） */
/* 保険：スクリプトが読み込めなかったときも、3 秒で必ず絵を出す（入場の前に隠しているだけなので） */
html.mb-js body.mb-page .mb-roster[data-enter="pending"] :is(.mb-fig, .mb-plate),
html.mb-js body.mb-page .mb-hero[data-enter="pending"] .mb-art--hero .mb-fig { animation: mb-failsafe 0s linear 3s forwards; }
@keyframes mb-failsafe { to { visibility: visible; } }

/* 名札：名前のインクの上端を足元の線の 12 下に（= 箱の下端の 4 下）。PC は行の箱を 2 上へ、スマホ（14/20）は 1 上へ（実測） */
body.mb-page .mb-plate {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: var(--mb-plate-shift, -2px);
  min-height: 24px;
}
body.mb-page .mb-name {
  position: relative;
  color: var(--mb-paper);
  font: 700 16px/24px var(--mb-jp);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
body.mb-page .mb-cell-link:hover .mb-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px; /* 名前の行の箱の 3px 下 ＝ インクの約 6px 下 */
  height: 1px;
  background: currentColor;
}
body.mb-page .mb-badge {
  flex: none;
  color: var(--mb-gold-text);
  font: 600 12px/1 var(--mb-face);
  letter-spacing: 0.2em;
}
body.mb-page .mb-badge[hidden] { display: none; }
/* 名簿の LIVE の印：名前の右に 8 あけて添える。名前は絵の中心のまま（印は中心の計算に入れない。審査の指摘 6）。
   印の大文字の下端を名前の基線に揃える（実測で合わせる） */
body.mb-page .mb-name > .mb-badge {
  position: absolute;
  left: 100%;
  bottom: var(--mb-badge-bottom, 3px);
  margin-left: 8px;
  white-space: nowrap;
}
body.mb-page .mb-roster-note { margin: 0; color: var(--mb-quiet); font: 500 14px/1.9 var(--mb-jp); }

/* ---------------------------------------------------------------- 詳細 */
/* 冒頭の帯は絵と雲の高さまで伸ばす（主指揮：詳細はアバターを大きく見せる構成を優先してよい）。題字（名前）の位置は他のページと同じ */
body.sp.mb-page #main > .sp-opener.mb-opener--detail { height: auto; }
/* 絵の箱：PC は min(640, 中身の 0.48) を 8 の倍数に切り下げ（1440 = 560、1200 = 536、1024 = 464：構成案 §12）。
   上限 640：--site-max が広がったときに絵も大きくなる（1168 のままなら 560）。元画像 1000px を越えない。縦積み（900 未満）は min(560, 中身の幅） */
body.mb-page.mb-page--detail {
  --mb-art-w: min(640px, round(down, calc(0.48 * var(--mb-content)), 8px));
}
body.mb-page .mb-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mb-art-w);
  grid-template-areas: "head fig" "info fig";
  grid-template-rows: auto 1fr;
  column-gap: 48px;
  align-items: start;
  padding-bottom: var(--mb-hero-pb, 96px);
}
body.mb-page .mb-head { grid-area: head; min-width: 0; }
body.mb-page .mb-info { grid-area: info; min-width: 0; }
body.mb-page .mb-figure { grid-area: fig; margin: 32px 0 0; } /* 絵の箱の上端は帯の上端から 32 */
body.mb-page .mb-art--hero { width: var(--mb-art-w); }
body.mb-page .mb-opener.is-missing .mb-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "info"; }

/* 題字（名前）：ヘッダーの下端 → 名前のインクの上端 64（スマホ 24）＝他の下層ページの題字と同じ位置。
   和文 56/1.15 の行の箱では、インクは箱の上から約 8.7 で始まる（実測）→ 箱では 64 − 8.7 */
body.mb-page .mb-head { padding-top: calc(var(--sp-title-ink, 64px) - 8.7px); }
body.mb-page .mb-h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0;
  color: var(--mb-paper);
  font: 700 56px/1.15 var(--mb-jp);
  letter-spacing: 0.02em;
  /* 光学補正：先頭の字の左の余白を打ち消し、見えている左端をガターに揃える。字ごとの値は JS が実際の書体で測って入れる
     （members-v1-detail.js alignNameInk）。これは JS が動くまでの代わりの値（漢字の平均 0.07em） */
  margin-left: -0.07em;
}
body.mb-page .mb-h1 .mb-badge { font-size: 16px; }
/* 副情報の行（ロール · ローマ字）：sp-frame-v1.css の .sp-meta（13px・字間 0.2em）。名前のインク → この行のインク 24（スマホ 16）。
   和文 56/1.15 の箱の下端はインクの下 11.2 にあるので（実測）、箱では 24 − 11.2 − 2.6（Barlow 13/13 の上の余白）＋ 1 */
body.mb-page .mb-kicker.sp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  padding-top: calc(var(--sp-title-meta, 24px) - 11.2px - 2.6px + 8px); /* ＋8：実測（和文の箱の下の余白が計算より 7 大きい） */
  text-transform: uppercase;
}
body.mb-page .mb-kicker span + span::before { content: "·"; margin-right: 12px; } /* 区切りの中黒（文言ではなく組版の記号） */

/* CHANNELS：信号線（サイバー）。1px の線に等間隔の節点、箱なし */
/* 副情報の行のインク → CHANNELS のインク 48（見出し行 44 の下寄せ分を引く、実測） */
body.mb-page .mb-channels {
  margin-top: 26px;
  /* 幅は「読む列（上限 640）を 3 等分した間隔 × 実際の配信先の数」（審査の指摘 7）。1 つだけの人は線が短く、節点は左から。
     節点の間隔は全員同じ（3 つの人の間隔）になる */
  width: calc(min(100%, 640px) * var(--n, 3) / 3);
  max-width: 100%;
}
body.mb-page .mb-channels[hidden] { display: none; }
/* 見出し行は高さ 44 で固定（配信中に WATCH LIVE の押せる範囲 44 が入っても下がずれない）。文字は行の下から 12 */
body.mb-page .mb-ch-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 44px; }
body.mb-page .mb-ch-label {
  margin: 0;
  padding-bottom: 12px;
  color: var(--mb-quiet);
  font: 600 12px/16px var(--mb-face);
  letter-spacing: 0.2em;
}
body.mb-page .mb-ch-state {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  color: var(--mb-quiet);
  font: 500 12px/16px var(--mb-jp);
  text-align: right;
}
body.mb-page .mb-ch-state > span { padding-bottom: 12px; }
body.mb-page .mb-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  margin: 12px 0 0; /* 見出しの文字（行の下から 12）→ 節点 24 */
  padding: 0;
  list-style: none;
}
body.mb-page .mb-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 24px; /* 節点（48）の中心 */
  height: 1px;
  background: var(--mb-signal);
}
body.mb-page .mb-node a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 48px;
  color: var(--mb-paper);
  text-decoration: none;
}
body.mb-page .mb-node-ring {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--mb-ring);
  border-radius: 50%;
  background: var(--mb-node-fill, var(--mb-sky)); /* 地の色で塗り、線を節点の後ろで切る（ホームの信号線と同じ） */
  color: var(--mb-quiet);
}
body.mb-page .mb-node-ring svg { width: 20px; height: 20px; }
body.mb-page .mb-node-name {
  position: relative;
  margin-top: 12px;
  font: 600 12px/16px var(--mb-face);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* 下線は文字のインクの 8.5 下（操作リンクの型）。字間の末尾の 0.2em は線に含めない */
body.mb-page .mb-node-name::after { content: ""; position: absolute; left: 0; right: 0.2em; bottom: -6px; height: 1px; background: currentColor; }
body.mb-page .mb-node-handle {
  margin-top: 10px; /* 下線 → ハンドルの文字のインク 8（実測） */
  color: var(--mb-quiet);
  font: 600 13px/16px var(--mb-face);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-align: center;
}
body.mb-page .mb-node a:hover .mb-node-handle { color: var(--mb-paper); }
body.mb-page .mb-node a:focus-visible { outline: none; }
body.mb-page .mb-node a:focus-visible .mb-node-name::after { height: 2px; background: #f3ecdc; }

body.mb-page .mb-bio {
  margin: 37.5px 0 0; /* ハンドルのインク → 紹介文のインク 48（実測） */
  max-width: 640px;
  color: var(--mb-paper);
  font: 500 16px/30px var(--mb-jp);
  white-space: pre-line;
}
body.mb-page .mb-bio[hidden] { display: none; }

html.mb-js body.mb-page .mb-hero[data-enter="pending"] .mb-art--hero .mb-fig { visibility: hidden; }
html.mb-js body.mb-page .mb-hero[data-enter="pending"] :is(.mb-head, .mb-info) { visibility: hidden; animation: mb-failsafe 0s linear 3s forwards; }
body.mb-page .mb-art--hero.is-rising {
  clip-path: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 8px, #000 32px);
          mask-image: linear-gradient(to top, transparent 0, transparent 8px, #000 32px);
}

/* 閉じの帯：帯の端 → 最初の文字のインク 96、最後の文字のインク → フッターの文字のインク 96（スマホ 64）。実測で箱を合わせる */
body.mb-page .mb-band {
  position: relative;
  background: var(--mb-black);
  padding: 0 var(--mb-gutter);
}
body.mb-page .mb-band--close {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  padding-top: 92px;
  padding-bottom: 65.5px; /* 最後の文字のインク → フッターの最初のインク（X・YouTube のアイコンを含む）96（実測） */
}
body.mb-page .mb-neighbors { display: flex; gap: 16px 64px; }
body.mb-page .mb-neighbors[hidden] { display: none; }
/* 前後のリンクを出さないとき（1 人だけのロール）：ALL MEMBERS だけ。押せる範囲 44 の中の文字の位置の差を補う（実測） */
body.mb-page .mb-band--close.is-solo { padding-top: 75.5px; padding-bottom: 54px; }
@media (max-width: 899px) { body.mb-page .mb-band--close.is-solo { padding-top: 68.5px; } }
@media (max-width: 767px) { body.mb-page .mb-band--close.is-solo { padding-top: 36.5px; padding-bottom: 21px; } }
body.mb-page .mb-nb { display: flex; flex-direction: column; gap: 8px; min-height: 44px; color: var(--mb-paper); text-decoration: none; }
body.mb-page .mb-nb-k { color: var(--mb-quiet); font: 600 12px/16px var(--mb-face); letter-spacing: 0.2em; }
body.mb-page .mb-nb-name { position: relative; font: 700 18px/24px var(--mb-jp); }
body.mb-page .mb-nb:hover .mb-nb-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; }
body.mb-page .mb-nb:focus-visible { outline: none; }
body.mb-page .mb-nb:focus-visible .mb-nb-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: #f3ecdc; }
body.mb-page .mb-noscript { margin: 0; padding: 32px 0; }
body.mb-page .mb-noscript a { color: var(--mb-paper); }

/* ---------------------------------------------------------------- 幅ごと */
@media (max-width: 899px) {
  /* 縦積み：名前（題字の位置）→ 絵（雲の上に立つ）→ 夜空の帯の端 → CHANNELS と紹介文（黒の帯） */
  body.mb-page.mb-page--detail { --mb-art-w: min(560px, var(--mb-content)); }
  body.mb-page .mb-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "info"; grid-template-rows: auto; padding-bottom: 0; }
  body.mb-page .mb-figure { justify-self: end; margin-top: 16px; }
  /* 夜空は絵と雲まで（JS が雲の下端で --mb-sky-h を決める）。文字は黒の帯へ、帯の端 → CHANNELS のインク 96（スマホ 64） */
  body.sp.mb-page #main > .sp-opener.mb-opener--detail {
    background: linear-gradient(var(--mb-sky), var(--mb-sky)) 0 0 / 100% var(--mb-sky-h, 100%) no-repeat, var(--mb-black);
  }
  body.mb-page .mb-channels { margin-top: calc(var(--mb-copy-gap, 32px) + var(--sp-edge, 96px) - 20px); }
  body.mb-page .mb-band--close { padding-top: 85px; } /* 紹介文のインク → 前後リンクのインク 96（実測） */
}
@media (max-width: 767px) {
  body.mb-page .mb-controls { row-gap: 0; }
  body.mb-page .mb-filters { column-gap: 24px; }
  body.mb-page .mb-live { flex-basis: 100%; }
  body.mb-page .mb-roster { row-gap: 24px; margin-top: 12.5px; } /* 配信の要約のインク → 1 段目の絵の箱 24（実測） */
  /* 配信中は要約が下線つきのリンクになり、インクの下端（下線）が 7 下がる。同じ 24 を保つ */
  body.mb-page .mb-controls:has(.mb-live .mb-u) + .mb-roster { margin-top: 19.5px; }
  body.sp.mb-page #main > .mb-body.sp-body { padding-bottom: 31px; } /* 最後の名前 → フッターのアイコンのインク 64（実測） */
  body.mb-page .mb-name { font-size: 14px; line-height: 20px; }
  body.mb-page .mb-plate { min-height: 20px; --mb-plate-shift: -1px; }
  body.mb-page .mb-h1 { font-size: 32px; }
  body.mb-page .mb-head { padding-top: calc(var(--sp-title-ink, 24px) - 5px); } /* 32/1.15 の箱のインクは上から約 5（実測） */
  body.mb-page .mb-kicker.sp-meta { padding-top: calc(var(--sp-title-meta, 16px) - 6.4px - 2.6px + 5px); } /* ＋5：実測 */
  body.mb-page .mb-bio { font-size: 15px; line-height: 28px; margin-top: 23px; }
  body.mb-page .mb-band--close { padding-top: 53px; padding-bottom: 21px; } /* 紹介文 → 前後 64、最後 → フッターのアイコン 64（実測） */
  body.mb-page .mb-neighbors { flex: 1 1 100%; justify-content: space-between; }
  body.mb-page .mb-nb--next { align-items: flex-end; text-align: right; }
}

/* 360 前後：4 つの絞り込みを 1 行に収める（MANAGEMENT だけが 2 行目に落ちないように。審査の指摘 8）。
   操作リンクの標準の大きさ 13px（契約 §4 の .u）に下げ、間隔を 16 に */
@media (max-width: 400px) {
  body.mb-page .mb-filters { column-gap: 16px; }
  body.mb-page .mb-filters a { font-size: 13px; }
}

/* ---------------------------------------------------------------- 見つからない id（404） */
/* 帯と題字は sp-frame-v1.css のまま（帯 280、題字「404」はほかの下層ページの題字と同じ位置）。黒の帯の中身は：
   帯の端 → 見出しのインク 96（スマホ 64）、見出し → 本文 24（16）、本文 → 操作 24（16）、最後 → フッター 96（64）。すべてインクで */
body.sp.mb-page .mb-404 > .mb-404-h:first-child { margin-top: calc(var(--sp-edge, 96px) - 6px); }
body.mb-page .mb-404-h { word-break: auto-phrase; }
body.mb-page .mb-404-lead { margin: 11px 0 0; word-break: auto-phrase; } /* 見出しのインク → 本文のインク 24（実測） */
body.mb-page .mb-404-actions { display: flex; flex-wrap: wrap; gap: 0 32px; margin: -2.5px 0 0; } /* 本文のインク → 操作の文字のインク 24（実測） */
/* 題字「404」：数字の左の余白は大文字（sp-frame-v1.css の −0.04em）より小さいので、見えている左端をガターに揃え直す（実測） */
body.sp.mb-page .mb-opener--missing .sp-title > span { margin-left: -0.012em; }
/* 和文の操作（契約 §4）：Zen Kaku Gothic New 700・13px・字間 0.08em、下線の位置は同じ */
body.mb-page .mb-u--jp { font: 700 13px/1 var(--mb-jp); letter-spacing: 0.08em; }
/* 操作の下線のインク → フッターの最初のインク（X・YouTube のアイコンを含む）96（スマホ 64、実測） */
body.sp.mb-page #main > .mb-404.sp-body { padding-bottom: 63px; }
@media (max-width: 767px) {
  body.sp.mb-page .mb-404 > .mb-404-h:first-child { margin-top: calc(var(--sp-edge, 64px) - 5px); }
  body.mb-page .mb-404-lead { margin-top: 4.5px; }
  body.mb-page .mb-404-actions { margin-top: -11px; }
  body.sp.mb-page #main > .mb-404.sp-body { padding-bottom: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  html.mb-js body.mb-page .mb-roster[data-enter="pending"] .mb-fig,
  html.mb-js body.mb-page .mb-hero[data-enter="pending"] .mb-art--hero .mb-fig,
  html.mb-js body.mb-page .mb-hero[data-enter="pending"] :is(.mb-head, .mb-info) { visibility: visible; }
}