/* live-page-v1 — LIVE ページ（live.html）の本文（LIVE 班、2026-09-28）。live-member-cards-v1.css の後に読み込む。
   ヘッダー・フッター・LIVE カードの型はホームと同じ CSS をそのまま使い、ここではこのページの構成だけを足す。
   単位（DETAIL-STANDARD §2）：8u。ページのガター（1440 で 136、≥761 で 24、≤760 で 20、≤360 で 16）はホームの実測と同じ。
   帯の規則（契約 §7.3）：帯の端 → 最初の文字 96（≤767：64）、最後の見える中身 → 帯の端 96（≤767：64）。
   節 → 節：最後の中身 → 次の見出しの文字 96（≤767：64）。見出しの文字 → 中身 32（≤767：24）。 */

/* 中身の列：サイト共通の変数（site-width-v1.css、主指揮 2026-09-28 採用の案C）。左右の余白は --site-gutter、列の最大幅は
   --site-max（1440 以下 1168、それより広い画面では画面に比例して広がり上限 1752）。1168px を直書きしない。
   変数が無いとき（site-width-v1.css を読まないページ）の仮の値だけ、括弧の中に書いておく。
   帯（地）と立涌は画面の全幅。カードの並びは列の幅から列の数を決める（列が広がれば列が増える）。 */
body.lp {
  --lp-gutter: var(--site-gutter, max(var(--page-pad, 24px), calc((100% - var(--site-max, 1168px)) / 2)));
}

/* ================= 1. 冒頭：共通の枠 sp-frame-v1 の帯と、立涌 ================= */
/* 帯（.sp-opener：夜空 #0d0724、ヘッダーの下 280）、題（ヘッダーの下端 → 題のインク 64、スマホ 24）、帯の端 → 最初の文字 96
   （スマホ 64）は sp-frame-v1.css のまま使う（主指揮 2026-09-28：全下層ページ共通の枠。ページを移っても題の位置が動かない）。
   ここでは LIVE だけのもの：目次（題の下の操作リンク）。 */
/* 立涌は sp-opener-v1.js（共通の枠のエンジン）＋ sp-wamon-tatewaku-v1.js が描く。線の色・太さ・動きはそちら */

/* 目次：題のインクの下 24（sp-frame の「題字のインク → 副情報のインク」、スマホ 16）に、操作リンクの型で置く。
   字は押せる箱（44）の上端に置き（字の行の箱 13、大文字のインクは箱の上 2.6）、下線は字の下端から 8.5（契約 §4）。
   題の行の箱の下端は大文字のインクの下 0.1em（sp-frame の計算）なので、間の値 = 24 − 0.1 × 題の大きさ − 2.6。 */
body.lp .lp-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin: 0;
  padding-top: calc(var(--sp-title-meta, 24px) - 0.1 * var(--sp-title, 56px) - 2.6px + 1px);   /* + 1：実測（1440・390） */
}
body.lp .lp-index a {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0;
  color: rgba(243, 236, 220, 0.78);
  font: 600 13px/13px "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.2em;
  text-decoration: none;
  white-space: nowrap;
}
body.lp .lp-index a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.2em;                                /* 最後の字の後ろの字間ぶんは線を引かない */
  top: 20px;                                   /* 大文字のインクの下端（13 × 0.9 = 11.7）+ 8.5 ≈ 20（実測で合わせる） */
  height: 1px;
  background: currentColor;
}
body.lp .lp-index a:hover { color: #f3ecdc; }
body.lp .lp-index a:focus-visible { outline: 2px solid #f3ecdc; outline-offset: 4px; }
body.lp .lp-index a[hidden] { display: none; }
@media (max-width: 767px) {
  body.lp .lp-index { gap: 0 24px; }
  body.lp .lp-index a::after { top: 19px; }    /* スマホの実測で字の下端 → 下線 8.5 */
}

/* ================= 2. 配信中（ホームと同じ LIVE 部品。黒の帯） ================= */
body.lp #main#main > .edition-live-wrap.lp-onair {
  position: relative;
  width: auto;
  max-width: none;
  margin: 0 var(--lp-gutter);
  padding: 90px 0 0;                           /* 帯の端 → 見出しの字 96（見出しの行の箱は字の上に 6。sp-frame の --sp-edge） */
}
body.lp #main > .edition-live-wrap.lp-onair::before { content: none; }
body.lp #main > .edition-live-wrap > #on-air { padding-bottom: 0; }
body.lp #main > .edition-live-wrap > #on-air[data-state="live"] { padding-bottom: 0; }
/* 見出し：ホームの LIVE 見出しと同じ書体・大きさ。このページの節にはアイコンを付けない（ナビのアイコンは題に使った） */
body.lp #v8-live-title,
body.lp .lp-heading h2 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  color: #f3ecdc;
  font: 600 25px/1.15 "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.04em;
}
/* 待機（配信なし・確認中・不明）：1行の信号。ホームの待機アーカイブはこのページでは下の ARCHIVES が受け持つ */
body.lp #on-air:not([data-state="live"]) > #v8-live-content > div.v8-live-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.lp #on-air > #v8-live-content > div.v8-live-empty::before { content: none; }
body.lp #on-air > #v8-live-content > div.v8-live-empty .v8-live-empty-icon { flex: none; width: 24px; height: 24px; color: rgba(243, 236, 220, 0.78); }
body.lp #on-air > #v8-live-content > div.v8-live-empty .v8-live-empty-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
body.lp #on-air > #v8-live-content > div.v8-live-empty .v8-live-empty-copy h3 {
  flex: none;
  min-height: 0;                               /* 既存の 44 の高さを外し、行の高さをアイコン（24）にする */
  margin: 0;
  color: #f3ecdc;
  font: 600 13px/1 "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.2em;
}
body.lp #on-air > #v8-live-content > div.v8-live-empty .v8-live-empty-copy p {
  margin: 0;
  color: rgba(243, 236, 220, 0.78);
  font: 400 13px/1.5 "Zen Kaku Gothic New", sans-serif;
}
body.lp #on-air > #v8-live-content > div.v8-live-empty .v8-live-empty-link { display: none; }   /* 配信先は下の CHANNELS */
body.lp #on-air > .v8-live-heading { margin-bottom: 27px; }   /* 見出しの字 → 中身の上端 32（見出しの行の箱は字の下に 5） */
body.lp #on-air > .v8-live-foot { margin-top: 16px; padding: 0; background: transparent; }
body.lp #on-air > .v8-live-heading:has(+ #v8-live-content > .v8-live-empty) { margin-bottom: 21px; }   /* 見出しの字 → 待機の行の字 32（≥960 は既存の規則で行の上に 4 の余りが出る） */
@media (max-width: 959px) { body.lp #on-air > .v8-live-heading:has(+ #v8-live-content > .v8-live-empty) { margin-bottom: 25px; } }

/* ================= 3. 節（配信予定・アーカイブ・チャンネル） ================= */
body.lp #main#main > .lp-section {
  width: auto;
  max-width: none;
  margin: 0 var(--lp-gutter);
  padding: 90px 0 0;                           /* 前の節の最後の中身 → 見出しの字 96（見出しの行の箱は字の上に 6） */
  /* 幅の規則（#main の直下を本文の幅に縮めるホームの規則）に勝つため #main#main。余白の上書きも同じ強さで書く */
}
body.lp .lp-section[hidden] { display: none; }
body.lp .lp-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 0 0 27px;                            /* 見出しの字 → 中身の上端 32（見出しの行の箱は字の下に 5） */
}
body.lp .lp-archives > .lp-heading { margin-bottom: 25px; }   /* 絞り込みの字は行の箱の上端から 2 下 → 字で 32 */
body.lp .lp-heading-meta {
  margin: 0;
  color: rgba(243, 236, 220, 0.78);
  font: 600 13px/1.5 "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---- 配信予定 ---- */
body.lp .lp-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 352px), 1fr));   /* 1168 で 3 列、列が広がれば増える */
  gap: 32px;
}
body.lp .lp-schedule-item { display: flex; }
body.lp .lp-schedule-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 24px;
  color: #f3ecdc;
  text-decoration: none;
}
body.lp .lp-schedule-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mc-ground, #1d1f25); }
body.lp .lp-schedule-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--mc-signal, rgba(184, 156, 255, 0.32)); transform-origin: 0 50%; }
body.lp .lp-schedule-time { font: 600 25px/1.15 "Barlow Condensed", sans-serif; letter-spacing: 0.04em; }
body.lp .lp-schedule-name { margin-top: 8px; font: 700 14px/1.4 "Zen Kaku Gothic New", sans-serif; }
body.lp .lp-schedule-title { color: rgba(243, 236, 220, 0.78); font: 400 13px/1.6 "Zen Kaku Gothic New", sans-serif; }
body.lp .lp-schedule-meta { display: inline-flex; align-items: center; gap: 8px; color: rgba(243, 236, 220, 0.78); font: 600 13px/1 "Barlow Condensed", sans-serif; letter-spacing: 0.04em; }
body.lp .lp-schedule-meta .ui-icon { width: 13px; height: 13px; }

/* ---- アーカイブ：絞り込み ---- */
body.lp .lp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0 0 8px;                             /* 絞り込みの最後の段の下線 → カードの上端 32（押せる箱の余り 24 + 8） */
}
body.lp .lp-chip {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(243, 236, 220, 0.78);
  font: 700 13px/1 "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
}
body.lp .lp-chip-node {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 2.5px;                           /* 13px の行の箱の中央 */
  border-radius: 50%;
  background: var(--mc-signal, rgba(157, 123, 220, 0.5));
}
body.lp .lp-chip-label { position: relative; }
/* 選択中：紙色＋操作リンクの下線（文字の行の箱の 6px 下） */
body.lp .lp-chip[aria-pressed="true"] { color: #f3ecdc; }
body.lp .lp-chip[aria-pressed="true"] .lp-chip-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.08em;
  top: 19px;
  height: 1px;
  background: currentColor;
}
body.lp .lp-chip:hover { color: #f3ecdc; }
body.lp .lp-chip:focus-visible { outline: 2px solid #f3ecdc; outline-offset: 4px; }

/* ---- アーカイブ：カード（ホームの待機アーカイブと同じ型・同じ文字の大きさ） ---- */
body.lp .lp-archive-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));   /* 1168 で 4 列、976（1024）で 3 列。列が広がれば 5・6 列へ */
  gap: 32px;
}
body.lp .lp-archive-item { display: flex; min-width: 0; }
body.lp .lp-archive-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
body.lp .lp-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0724; }
body.lp .lp-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.lp .lp-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  background: rgba(13, 7, 36, 0.82);
  color: #f3ecdc;
  font: 600 12px/1.2 "Barlow Condensed", sans-serif;
}
body.lp .lp-card-name { margin: 16px 24px 0; color: #f3ecdc; font: 700 14px/1.4 "Zen Kaku Gothic New", sans-serif; overflow-wrap: anywhere; }
body.lp .lp-card-title {
  display: -webkit-box;
  min-height: calc(2 * 1.6em);
  margin: 8px 24px 0;
  overflow: hidden;
  color: rgba(243, 236, 220, 0.78);
  font: 400 13px/1.6 "Zen Kaku Gothic New", sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.lp .lp-card-meta { margin: 8px 24px 0; color: rgba(243, 236, 220, 0.78); font: 600 13px/1.4 "Barlow Condensed", sans-serif; letter-spacing: 0.04em; }
body.lp .lp-archive-card:hover .lp-card-title { color: #f3ecdc; }
body.lp .lp-archive-card:focus-visible { outline: 2px solid #f3ecdc; outline-offset: 4px; }
/* もっと見る：和文の操作の型（Zen Kaku Gothic New 700・13px・0.08em、下線は行の箱の 6px 下） */
body.lp .lp-more { display: flex; justify-content: flex-start; margin: 23px 0 -24px; }   /* 最後のカード → 字 24（本文 → 操作）。操作はページの左ガター。下の −24 は押せる箱の余りで、節の終わり＝下線にする */
body.lp .lp-more-button {
  position: relative;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(243, 236, 220, 0.78);
  font: 700 13px/1 "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: inline-flex;
  align-items: flex-start;                     /* 字を押せる箱の上端に置き、下線を字の行の箱の 6 下に */
}
body.lp .lp-more-button::after { content: ""; position: absolute; left: 0; right: 0.08em; top: 19px; height: 1px; background: currentColor; }
body.lp .lp-more-button[hidden] { display: none; }
body.lp .lp-more-button:hover { color: #f3ecdc; }
body.lp .lp-more-button:focus-visible { outline: 2px solid #f3ecdc; outline-offset: 4px; }
body.lp .lp-more:has(> .lp-more-button[hidden]) { display: none; }

/* ---- チャンネル：キャラ絵は箱に入れず、同じ倍率で足元の線にそろえて立たせる。配信先はそのメンバーの色の信号線 ---- */
body.lp .lp-channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));   /* 1168 で 6 列、976 で 5 列、720 で 3 列。絵は同じ倍率のまま */
  gap: 48px 32px;
}
body.lp .lp-ch { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
body.lp .lp-ch-profile { display: flex; flex-direction: column; align-items: flex-start; width: 100%; color: #f3ecdc; text-decoration: none; }
/* 絵：一辺 S の正方形の原画を同じ倍率で置き、外接枠の下端（ay+ah）を足元の線（箱の下端）に合わせる。横は外接枠の中心を箱の中心へ */
body.lp .lp-ch-art {
  --s: 144px;
  position: relative;
  display: block;
  width: 100%;
  height: var(--s);
  overflow: visible;
}
body.lp .lp-ch-art img {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--s);
  height: var(--s);
  max-width: none;
  transform: translate(calc(-50% + (0.5 - var(--ax) - var(--aw) / 2) * var(--s)), calc((1 - var(--ay) - var(--ah)) * var(--s)));
}
/* 名札：足元の線 → 名前の字の上端 12（ホームの名札と同じ、キャラ絵の 48 の例外） */
body.lp .lp-ch-plate { display: flex; align-items: center; gap: 8px; margin-top: 5.5px; min-height: 22px; }   /* 足元の線 → 名前の字 12（行の箱の字の上の余り 6.5） */
body.lp .lp-ch-name { font: 700 16px/1.4 "Zen Kaku Gothic New", sans-serif; overflow-wrap: anywhere; }
body.lp .lp-ch-profile:hover .lp-ch-name { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
body.lp .lp-ch-profile:focus-visible { outline: 2px solid #f3ecdc; outline-offset: 4px; }
body.lp .lp-live-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: #d8b66a;                         /* 配信中の点灯（金の3ゾーン） */
  color: #08090e;
  font: 600 11px/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: 0.2em;
}
body.lp .lp-live-badge[hidden] { display: none; }
body.lp .lp-ch-role { margin-top: 8px; color: rgba(243, 236, 220, 0.78); font: 600 11px/1.2 "Barlow Condensed", sans-serif; letter-spacing: 0.2em; }
/* 配信先の信号線：1px の線（メンバーの色）に、等間隔の節点（配信先ごとに1つ、44px の押せる箱） */
body.lp .lp-ch-rail {
  position: relative;
  display: flex;
  gap: 24px;
  margin-top: 16px;
}
body.lp .lp-ch-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;                                   /* 節点の中心 */
  height: 1px;
  background: var(--mc-signal-soft, rgba(184, 156, 255, 0.32));
}
body.lp .lp-ch-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  color: rgba(243, 236, 220, 0.78);
  text-decoration: none;
}
body.lp .lp-ch-ring {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--mc-signal, rgba(157, 123, 220, 0.5));
  background: #08090e;                         /* 線を節点の中で止める（地で塗る） */
}
body.lp .lp-ch-ring .ui-icon { width: 14px; height: 14px; }
body.lp .lp-ch-platform { font: 600 11px/1.2 "Barlow Condensed", sans-serif; letter-spacing: 0.2em; }
body.lp .lp-ch-node:hover { color: #f3ecdc; }
body.lp .lp-ch-node:focus-visible { outline: 2px solid #f3ecdc; outline-offset: 4px; }

/* ページの終わり：最後の中身 → フッターの文字 96（≤767：64）。フッターの上の余白はホームの brand-unify の値 */
body.lp #main#main > .lp-channels { padding-bottom: 59px; }   /* 最後の配信先の字 → フッターの字 96（フッターの行の箱の余り 37） */

@media (min-width: 768px) and (max-width: 1023px) {
  body.lp .lp-channel-list { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }   /* 720 で 4 列 */
  body.lp .lp-archive-grid { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); }   /* 976 で 4 列、720 で 3 列 */
}
@media (max-width: 767px) {
  body.lp #main#main > .edition-live-wrap.lp-onair { padding-top: 59px; }
  body.lp #main#main > .lp-section { padding-top: 59px; }
  body.lp .lp-heading { margin-bottom: 20px; }                 /* 見出しの字 → 中身 24 */
  body.lp .lp-archives > .lp-heading { margin-bottom: 17px; }
  body.lp .lp-more { margin-top: 15px; }                       /* 最後のカード → 字 16 */
  body.lp #on-air > .v8-live-heading { margin-bottom: 16px; }
  body.lp #on-air > .v8-live-heading:has(+ #v8-live-content > .v8-live-empty) { margin-bottom: 18.5px; }   /* 字で 24 */
  body.lp #v8-live-title, body.lp .lp-heading h2 { font-size: 22px; }
  body.lp .lp-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  body.lp .lp-schedule-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.lp .lp-schedule-card { padding: 16px; }
  body.lp .lp-card-name, body.lp .lp-card-title, body.lp .lp-card-meta { margin-left: 16px; margin-right: 16px; }
  body.lp .lp-filter { gap: 0 16px; }
  body.lp .lp-channel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  body.lp .lp-ch-art { --s: 128px; }
  body.lp #main#main > .lp-channels { padding-bottom: 26px; }            /* 字で 64 */
}
@media (max-width: 767px) {
  /* 待機の1行：スマホではラベルの下に文を置く（左揃え、ラベルと文の間 8） */
  body.lp #on-air > #v8-live-content > div.v8-live-empty { align-items: flex-start; }
  body.lp #on-air > #v8-live-content > div.v8-live-empty .v8-live-empty-copy { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
  body.lp #on-air > #v8-live-content > div.v8-live-empty .v8-live-empty-copy p { padding: 0; margin: 0; text-align: left; }
}

/* ヘッダーの今いるページ（LIVE）：NEWS 班と同じ暫定の見た目（紙色＋下線）。見た目の決定はヘッダー班の担当。
   モーション層（motion-system-v1）を読み込めば、同じ aria-current で下線が引かれたままになる。 */
body.hs.eh-study.s55.lp .s13-header #s14-nav a[aria-current="page"] { color: #f3ecdc; }
body.hs.eh-study.s55.lp .s13-header #s14-nav a[aria-current="page"]::after { opacity: 1; }
