/* members-v3b.css — MEMBERS 一覧 v3b（2026-09-29、メンバー別の足元雲なし）。members-v2.css・members-role-v1.css の後に読む。
 * 契約：docs/RENEWAL-BRAND-SYSTEM.md（色・3 書体・名札・操作の反応・焦点）、docs/DESIGN-DETAIL-STANDARD.md（8u、インクで測る）。
 * 位置と余白の値は members-v3b-list.js がインクを測って入れる（ここは型と色だけ）。冒頭の帯・絞り込み・配信の要約は members-v2.css のまま。
 * 色は契約の値だけ：黒の帯 #08090e（地）、紙 #f3ecdc、控えめな紙 rgba(243,236,220,.78)、和の線（名簿は一段下の 2 段）、
 * 配信中の点灯 #d8b66a（ランプ）・#ecd28a（金の文字、灯る瞬間のランプ）。
 * 大きさは列の倍率 u（--m3-u、1440 以下は 1）で大きくし、1920 でも 1440 と同じ構図にする。 */

body.mb-page .m3 {
  --m3-u: 1;
  position: relative;
  margin-top: var(--m3-top, 43.25px); /* 絞り込みの下線のインク → 1 段目で最も高い絵 48（JS が実測で入れる。これは PC の既定） */
}
body.mb-page .m3-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 1; }
body.mb-page .m3-cell { position: absolute; height: var(--m3-h, 0px); }
body.mb-page .m3-cell[hidden] { display: none; }
body.mb-page .m3-link {
  position: relative;
  display: block;
  height: 100%;
  color: var(--mb-paper, #f3ecdc);
  text-decoration: none;
}
body.mb-page .m3-link:focus-visible { outline: none; }

/* ---------------------------------------------------------------- 絵：正方形の箱（一辺 c）。外接枠の下端＝箱の下端（足元の線）、外接枠の中心＝箱の中心 */
body.mb-page .m3-art {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--m3-c, 234px);
  height: var(--m3-c, 234px);
}
body.mb-page .m3-fig {
  position: absolute;
  left: calc((0.5 - var(--ax) - var(--aw) / 2) * 100%);
  top: calc((1 - var(--ay) - var(--ah)) * 100%);
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  /* 寄り（1.03 倍）の支点は足元（外接枠の下端の中央） */
  transform-origin: calc((var(--ax) + var(--aw) / 2) * 100%) calc((var(--ay) + var(--ah)) * 100%);
  transition: scale 480ms cubic-bezier(0.25, 1, 0.5, 1);
}
/* 入場：足元の線で切り抜き、下から立ち上がる（不透明のまま。公式絵はぼかし・フェードをしない） */
body.mb-page .m3-art.is-rising { clip-path: inset(-100% -60% 0 -60%); }

/* ---------------------------------------------------------------- 名札：名前＋矢印 → 役割 → ON AIR（契約 §4「名前 → 状態」） */
/* 各段の縦の位置は JS（インクで測る）。各段は箱の中央に置き、インクの中心を絵の中心に合わせる横のずれ（--m3-*-dx）を足す。
   --m3-clamp：名札が隣の人の絵に 48u より近づく・列からはみ出すときに、3 段をまとめて寄せる量（JS。ふだんは 0） */
body.mb-page .m3-plate { position: absolute; inset: 0; }
body.mb-page .m3-line {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
body.mb-page .m3-line--name { top: var(--m3-name-top, 0px); }
body.mb-page .m3-line--role { top: var(--m3-role-top, 0px); }
body.mb-page .m3-line--air { top: var(--m3-air-top, 0px); }
body.mb-page .m3-unit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--m3-u));
  translate: calc(var(--m3-name-dx, 0px) + var(--m3-clamp, 0px)) 0;
}
body.mb-page .m3-name {
  position: relative;
  color: var(--mb-paper, #f3ecdc);
  font: 700 calc(16px * var(--m3-u)) / calc(24px * var(--m3-u)) var(--mb-jp, "Zen Kaku Gothic New", sans-serif);
  letter-spacing: 0.04em;
}
/* 矢印：ヒーローの名札と同じ 14×10、控えめな紙色（契約 §2 の操作用アイコン） */
body.mb-page .m3-arrow {
  flex: none;
  width: calc(14px * var(--m3-u));
  height: calc(10px * var(--m3-u));
  color: var(--mb-quiet, rgba(243, 236, 220, 0.78));
  transition: transform 320ms cubic-bezier(0.25, 1, 0.5, 1);
}
/* 役割の札：本番 role.ts の ROLE_CARD_TAG_LABEL。Barlow Condensed 600・12・字間 0.2em（契約 §3 の操作ラベルの字間）・控えめな紙色 0.78 */
body.mb-page .m3-role {
  display: block;
  translate: calc(var(--m3-role-dx, 0px) + var(--m3-clamp, 0px)) 0;
  color: var(--mb-quiet, rgba(243, 236, 220, 0.78));
  font: 600 calc(12px * var(--m3-u)) / calc(16px * var(--m3-u)) var(--mb-face, "Barlow Condensed", sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* ON AIR：本番の一覧の語。配信中だけ見える（行の高さは全員ぶん取る）。金は契約のゾーン「配信中を示す点灯」 */
body.mb-page .m3-air {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--m3-u));
  translate: calc(var(--m3-air-dx, 0px) + var(--m3-clamp, 0px)) 0;
  color: var(--mb-gold-text, #ecd28a);
  font: 600 calc(12px * var(--m3-u)) / calc(16px * var(--m3-u)) var(--mb-face, "Barlow Condensed", sans-serif);
  letter-spacing: 0.2em;
  visibility: hidden;
}
/* ランプ：ヘッダーの ON AIR・配信の要約と同じ 8 の金の丸。中心を大文字の中心に合わせる（JS が測る） */
body.mb-page .m3-lamp {
  flex: none;
  width: calc(8px * var(--m3-u));
  height: calc(8px * var(--m3-u));
  border-radius: 50%;
  background: var(--mb-gold, #d8b66a);
  translate: 0 var(--m3-lamp-y, 0px);
}
/* 配信中は見せる。ただし名札（親）が隠れている間（入場の前・立ち上がりの途中）は一緒に隠れるよう、visible ではなく inherit */
body.mb-page .m3-cell[data-live="true"] .m3-air { visibility: inherit; }
/* 灯る瞬間を待つ間（入場の途中）は隠しておく。灯る瞬間に ON AIR の字と照りのランプが同時に出る（JS） */
body.mb-page .m3-cell[data-ignite="wait"] .m3-air { opacity: 0; }

/* ---------------------------------------------------------------- 操作の反応（契約 §5 の 3 つだけ）と焦点 */
body.mb-page .m3-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.04em; /* 末尾の字間は線に含めない */
  bottom: calc(-3px * var(--m3-u)); /* 名前の行の箱の 3u 下 ＝ インクの約 6u 下（members-v2.css の名前の下線と同じ位置） */
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
@media (hover: hover) {
  body.mb-page .m3-link:hover .m3-name::after { transform: scaleX(1); animation: vp-restroke 480ms both; }
  body.mb-page .m3-link:hover .m3-arrow { transform: translateX(calc(4px * var(--m3-u))); }
  body.mb-page .m3-link:hover .m3-fig { scale: 1.03; }
}
/* キーボードの焦点：四角い枠を使わず、名前の字に紙色 2px の下線（契約 §5：カードは題の文字に 2px の下線）＋矢印の 4u 送り */
body.mb-page .m3-link:focus-visible .m3-name::after { transform: scaleX(1); height: 2px; background: #f3ecdc; }
body.mb-page .m3-link:focus-visible .m3-arrow { transform: translateX(calc(4px * var(--m3-u))); }

/* ---------------------------------------------------------------- 入場の前は隠す（保険：3 秒で必ず出す。mb-failsafe は members-v2.css） */
html.mb-js body.mb-page .m3[data-enter="pending"] :is(.m3-fig, .m3-plate),
html.mb-js body.mb-page .m3-cell.is-waiting :is(.m3-fig, .m3-plate) { visibility: hidden; }
html.mb-js body.mb-page .m3[data-enter="pending"] :is(.m3-fig, .m3-plate) { animation: mb-failsafe 0s linear 3s forwards; }

/* ---------------------------------------------------------------- スマホ（2 列）：名前は 14/20（members-v2.css のスマホの名前と同じ） */
body.mb-page .m3[data-cols="2"] .m3-name { font-size: 14px; line-height: 20px; }

@media (prefers-reduced-motion: reduce) {
  html.mb-js body.mb-page .m3[data-enter="pending"] :is(.m3-fig, .m3-plate) { visibility: visible; }
  body.mb-page .m3-fig,
  body.mb-page .m3-arrow { transition: none; }
  body.mb-page .m3-link:hover .m3-name::after { animation: none; }
}