/* live-member-cards-v1 — LIVE のメンバー色のカード（LIVE 班、2026-09-28）。products-bands-v1.css の後に読み込む。
   オーナー 2026-09-28：「LIVE、黒背景なのはいいけど、メンバーそれぞれのミニキャラに応じたカラー抽出ロジックに応じた色の
   カードコンテナ実装してくれ。境界がわかりづらい。」
   products-bands-v1 が外した地と枠の上に重ねる。帯の色（#08090e）・ヒーローとの境目・DOM・文言・データは変えない。

   器の意味（DETAIL-STANDARD §1）：カードはそのメンバーの「チャンネル」＝サイバー（信号）の器。
     地  ：ミニキャラから抽出した色（本番の useAccentColors、UV パレット）を、全員同じ明るさ（OKLCH L 0.25）に沈めた面。
     上辺：その色の信号線（1px）。契約 §4「サイバーなら信号線で作る」。色の違いが一目で分かるのは、この細い線だけ。
     和の要素（紋・波）は入れない。一つの部品に和とサイバーを混ぜない（契約 §1）。
   色の値は member-colors-v1.js の derive() が作る（--mc-ground / --mc-signal / --mc-signal-soft）。
   色が決まるまで・決まらないときの地は #1d1f25（UV パレットの銀 #C9D1E8 を同じ規則で沈めた値＝無彩に近い地）。

   寸法（8u。DETAIL-STANDARD §2・§4）
     カードの内側の余白：24（≤767：16）＝「文字 ↔ 器の縁」の最小値。上下左右とも同じ（対称）。
     カードの間：32（≤767：16）＝サイトの列の間（NEWS・WORKS・PRODUCTS と同じ）。縦横とも同じ。
     節の見出し → 最初のカード：見出しの文字の下端から 32（≤767：24）。products-bands の帯の端 96／64 はそのまま。 */

/* ================= 1. 配信中のカード（.v8-live-group） ================= */
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) > #v8-live-content:has(> .v8-live-group) {
  gap: 32px;
  align-items: stretch;
}
/* 横長の画面（主指揮 2026-09-28、site-width-v1 の案C）：1441px 以上は列が画面に比例して広がる（上限 1752）。2列のままだと
   カード1枚が 760px を超えて右側が空くので、2人以上のときは 3 列にする。1440 以下は既存の 2 列（1人だけのときは既存の横長の1枚） */
@media (min-width: 1441px) {
  :is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) > #v8-live-content:has(> .v8-live-group + .v8-live-group) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] {
  position: relative;
  isolation: isolate;
  /* 描かれた文字で上下左右 24（対称）。上は名前（19px・行の高さ 1.45）の字の上の余白 7、左は和文の字の左の余白 2 を引いた値 */
  padding: 17px 24px 24px 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
  align-content: start;
}
/* 節の見出しの字 → 最初のカードの上端 32（見出しの行の箱は字の下に 5 の余り。27 + 5 = 32） */
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) > .v8-live-heading:has(+ #v8-live-content > .v8-live-group) {
  margin-bottom: 27px;
}
/* 地：擬似要素に塗る（立ち昇る見せ方で、文字を切らずに地だけを切り抜くため） */
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  background: var(--mc-ground, #1d1f25);
  pointer-events: none;
}
/* 上辺の信号線 */
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  display: block;
  width: auto;
  height: 1px;
  background: var(--mc-signal, rgba(184, 156, 255, 0.32));
  transform-origin: 0 50%;
  pointer-events: none;
}
/* 中の縦の間隔（字で測る）：名前の段（LIVE・PROFILE）→ 題 24、題 → 視聴リンク 16。
   行の箱の余りを引いた値：題の上 9（24 − 15）、視聴リンクの上 11.5（16 − 4.5） */
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] > .v8-live-title {
  margin: 9px 0 0;
  padding: 0;
}
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] > .v8-live-destinations {
  padding-top: 11.5px;
}
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] > .v8-live-person {
  min-height: 0;
  padding: 0;
}
/* サムネイルがあるカード：サムネイルの列と文字の列の間 24（カードの内側の余白と同じ値） */
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc]:has(> a.v8-live-picture img) {
  column-gap: 24px;
}
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] a.v8-live-picture img {
  display: block;
}
/* フォーカスの輪：カードの地の上でも見える紙色 */
:is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] a:focus-visible {
  outline: 2px solid #f3ecdc;
  outline-offset: 4px;
}
@media (max-width: 767px) {
  :is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) > #v8-live-content:has(> .v8-live-group) { gap: 16px; }
  /* 見出しの下に状態の行が折り返す：状態の字 → 最初のカード 24 */
  :is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) > .v8-live-heading:has(+ #v8-live-content > .v8-live-group) { margin-bottom: 16px; }
  /* 名前の段 → 題：PROFILE の押せる箱（44）が字の下に 21 あるので、題の上の余白は 0（字で 21）。箱を題に重ねない */
  :is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] > .v8-live-title { margin-top: 0; }
  :is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] { padding: 11px 16px 16px 14px; }   /* 字で 16 */
  :is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc]:has(> a.v8-live-picture img) { column-gap: 16px; }
}

/* ================= 2. アーカイブのカード（.lia-link） ================= */
/* サムネイルはカードの上端・左右いっぱい（16:9 を小さくしない）。その下の地にメンバー名・題・日付。 */
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list.lia-list {
  align-items: stretch;
}
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-item {
  display: flex;
}
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-link[data-mc],
body.lp .lp-archive-card[data-mc] {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 0 0 20px;                            /* 日付の字の下端 → カードの下端 24（日付の行の箱は字の下に 4） */
}
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-link[data-mc]::before,
body.lp .lp-archive-card[data-mc]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mc-ground, #1d1f25);
  pointer-events: none;
}
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-link[data-mc]::after,
body.lp .lp-archive-card[data-mc]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;                                   /* サムネイルの上に通す */
  height: 1px;
  background: var(--mc-signal, rgba(184, 156, 255, 0.32));
  transform-origin: 0 50%;
  pointer-events: none;
}
/* サムネイル → 名前の字 16（名前の行の箱は字の上に 5.5 の余り）、名前 → 題 8、題 → 日付 8（既存の値）。左右は 24（≤767：16） */
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-link[data-mc] > :is(.lia-name, .lia-title, .lia-meta) {
  margin-left: 24px;
  margin-right: 24px;
}
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-link[data-mc] > .lia-name { margin-top: 10.5px; }
/* ホームの待機：見出しの字 → 「アーカイブ」の字 32（既存 40.5。handoff の指摘「他の節より広い」を LIVE 班として直す）、
   「アーカイブ」の字 → カード 16（既存 19.5）、最後のカード → 注記の字 32（既存 52）。≤767：24／16／24 */
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-root.lia-root { padding-top: 23.5px; }
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list.lia-list { margin-top: 12.5px; }
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-footer.lia-footer { margin-top: 12px; }
body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-link[data-mc]:focus-visible {
  outline: 2px solid #f3ecdc;
  outline-offset: 4px;
}
@media (max-width: 767px) {
  body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list.lia-list {
    column-gap: 16px;
    row-gap: 16px;
  }
  body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-link[data-mc],
  body.lp .lp-archive-card[data-mc] { padding-bottom: 12px; }   /* 字で 16 */
  body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list .lia-link[data-mc] > :is(.lia-name, .lia-title, .lia-meta) {
    margin-left: 16px;
    margin-right: 16px;
  }
  body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-root.lia-root { padding-top: 17px; }
  body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-footer.lia-footer { margin-top: 20.5px; }
}

/* 768〜959：名前が 20px・名前の段が 76 の高さになる（既存の study55 の規則）。題の上を 2 にして字で 24 を保つ */
@media (min-width: 768px) and (max-width: 959px) {
  :is(body.s55 #main > .edition-live-wrap > #on-air, body.lp #on-air) .v8-live-group[data-mc] > .v8-live-title { margin-top: 2px; }
}
/* 768〜959：4列だとカードが 156px になり、内側の 24 を取ると題が1行4〜5字で折り返す。2列 × 2段（4本はそのまま）にする */
@media (min-width: 768px) and (max-width: 959px) {
  body.s55 #on-air:not([data-state="live"]) > #v8-live-content > .v8-live-empty.lia-enhanced .lia-list.lia-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
}

/* ================= 3. 見せ方：地が下から立ち昇り、信号線が左から通る ================= */
/* 序破急：地 720ms（ゆっくり出て、中ほどで速く、静かに止まる）→ 地の途中から信号線 360ms。間隔は JS（1枚目 240、以降 80）。 */
@media (prefers-reduced-motion: no-preference) {
  [data-mc][data-mc-reveal="wait"]::before { clip-path: inset(100% 0 0 0); }
  [data-mc][data-mc-reveal="wait"]::after { transform: scaleX(0); }
  [data-mc][data-mc-reveal="run"]::before {
    animation: mc-rise 720ms cubic-bezier(0.65, 0, 0.35, 1) var(--mc-delay, 0ms) both;
  }
  [data-mc][data-mc-reveal="run"]::after {
    animation: mc-signal 360ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--mc-delay, 0ms) + 480ms) both;
  }
}
@keyframes mc-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mc-signal { from { transform: scaleX(0); } to { transform: scaleX(1); } }