/* magazine-page-v1 — THEATER（内部名 magazine）の一覧（/theater/）と各回のページ（/theater/<番回>/）。同じ組み：冒頭の帯 → 舞台 → ほかの作品の格子（2026-11、PR3）。
   構図（オーナー 2026-11-03「PC だとトップのものを大きく出しすぎず、右側に概要を出す感じで左側の画像エリアを多少抑える」「一覧性を重視したい」）：
     PC（960 以上）の舞台は 2 列：本文の列を 10 列（列の間 32）に割り、左 7 列に再生面・右 3 列に概要の列（「動画 7 : 概要 3」。1440 で 808｜32｜328）。
     959 以下は縦に積む（再生面 → 番回と日付 → 題 → 概要 → 文字リンク → 共有）。ほかの作品は見出しなしで続け、格子は 4 列（1200 以上）・3 列（768〜1199）・2 列（767 以下）。
   表示名は THEATER（URL も /theater/）・内部名は magazine（ファイル名・CSS の mg-）。
   枠（冒頭の夜空の帯 280・題字の位置・帯の端 → 中身 96／64・列と余白）は sp-frame-v1.css と site-width-v1.css のもの。
   部品は既存の型だけを使う（新しい色・値・部品を作らない）：
     日付・題の札・前後の導線・再生できないときの文 … NEWS（news-page.css の .nw-date・.nw-headline-text・.nw-adjacent-label・.nw-adjacent-title・.nw-error を同じページで読む）
     再生の印 … WORKS の .wk-notch（48×48 の欠き。スマホの札は WORKS の格子の札と同じ 0.75 倍）
     題 … NEWS の記事の題の段（40/60。PC の右の列とスマホは 24/36）
     概要 … NEWS の記事の本文の型（.nw-article-body：Zen Kaku Gothic New 400 16/32・スマホ 15/28.5・改行は保つ）
     文字リンク … 共通の枠の .sp-u（和文の操作は LIVE の「もっと見る」の底上げ後の型：Zen Kaku Gothic New 700・15／14px・字間 0.08em）
     共有（2026-11-08。share-v1.js）… 文字リンクと同じ型の .nw-share-u（news-page.css。NEWS の記事と同じ部品）。舞台の文字の段の最後の段
     再生面の上の暗幕 … スマホのメニューの暗幕と同じ夜空の半透明 rgb(13 7 36 / .72)（契約 §2）
   動き：舞台の画像は NEWS の記事の図版と同じ巻き広げ（右から左へ。magazine-page-v1.js が値を動かす）。ほかの作品の格子は「一筆と幕」（motion-system）。
   操作の反応は画像の寄り 1.03 と題の下線だけ（契約 §5）。
   2026-11-03 オーナーが見本の「案 1 映画館型」を選んだ（寸法・色・字の型は見本 overlay.html の案 1 から）：
     概要の折りたたみ（.mg-more）・出演メンバー（.mg-cast）を舞台に足し、格子の札は一覧の上に重ねて開く画面（dialog.mg-ov）で再生する。 */

body.mg-page {
  --mg-paper: #f3ecdc;
  --mg-quiet: rgb(243 236 220 / 0.78);
  --mg-night: #0d0724;
  --mg-ground: #08090e;
  --mg-gold: #d8b66a;
  --mg-jp: "Zen Kaku Gothic New", sans-serif;
  --mg-face: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
  --mg-col-gap: 32px;
  --mg-faint: rgb(243 236 220 / 0.16); /* 紙色の 16%：重ねる画面の四角と × の線・下の帯の上の線、「続きを読む」の下線（見本の案 1） */
  /* news-page.css の NEWS の型（.nw-date・.nw-adjacent・.nw-error）が読む値。NEWS と同じ値（body.nw-page の定義の写し） */
  --nw-paper: #f3ecdc;
  --nw-quiet: rgba(243, 236, 220, 0.78);
  --nw-jp: "Zen Kaku Gothic New", sans-serif;
  --nw-face: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif;
}
@media (max-width: 767px) {
  body.mg-page { --mg-col-gap: 16px; }
}

/* ================================================================== */
/* 舞台：16:9 の再生面。959 以下は本文の列の幅いっぱい（左端はガター。NEWS 一覧と同じ列）、960 以上は下の 2 列 */
/* ================================================================== */
.mg-stage { scroll-margin-top: calc(var(--hs-bar, 64px) + 24px); } /* ほかの作品から差し替えたとき、ヘッダーの下 24 に舞台の上端を送る */
.mg-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mg-night); /* 読み込み中は夜空の色の箱（NEWS の .nw-image と同じ） */
}
/* 再生前：再生面全体が 1 つの <button>。押したら同じ箱の中で <video> に置き換える（大きさ・位置は箱が決めるので動かない） */
.mg-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
body.sp .mg-poster:focus-visible { outline-offset: -4px; } /* 箱の外は切れるので内側に（WORKS の button.wk-notch と同じ） */
.mg-screen > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--mg-night);
}
/* 画像：動画のサムネイルは 16:9 の枠に合わせる（WORKS の動画のサムネイルと同じ cover。4:3 は上下が落ちる） */
.mg-poster img,
.mg-card-image img,
.mg-stage-link .mg-screen > img,
.mg-screen > .mg-error-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 480ms cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) {
  .mg-poster:hover img,
  .mg-card-link:hover .mg-card-image img,
  .mg-stage-link:hover .mg-screen > img { scale: 1.03; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-poster img, .mg-card-image img, .mg-stage-link .mg-screen > img { transition: none; }
}

/* 再生の印：黒の地が画像の左下の角に食い込む 48×48 の欠き（WORKS の .wk-notch と同じ。枠線なし） */
.mg-notch {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--mg-ground);
  color: var(--mg-quiet);
}
.mg-notch svg { width: 20px; height: 20px; }

/* 再生できなかったとき：再生面の上に文（NEWS の .nw-error）と「YouTube で見る」 */
.mg-error {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: rgb(13 7 36 / 0.72);
  text-align: center;
}
.mg-error .nw-error { color: var(--mg-paper); }

/* 公開予定の作品（2026-11-08。YouTube のプレミア公開のような予約の状態）：再生できない。サムネイルを暗くし（明るさ 0.35）、真ん中に
   舞台は「公開予定」の札と「{月}月{日}日（{曜}）{時}:{分} 公開」、格子の札は「{月}/{日}（{曜}）{時}:{分} 公開」だけを重ねる。
   再生の <button>・再生の印は出さない。色は紙色と、既にある金色 --mg-gold の線と字だけ（新しい色は作らない） */
.mg-screen.mg-upcoming > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mg-upcoming > img { filter: brightness(0.35); }
.mg-upcoming-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 16px;
  text-align: center;
  pointer-events: none;
}
.mg-upcoming-badge {
  display: inline-block;
  padding: 3px 10px 3px calc(10px + 0.2em); /* 字間 0.2em の右の余りを左にも足して、字を枠の真ん中に */
  border: 1px solid var(--mg-gold);
  color: var(--mg-gold);
  font: 700 13px/20px var(--mg-jp);
  letter-spacing: 0.2em;
}
.mg-upcoming-when {
  color: var(--mg-paper);
  font: 700 24px/36px var(--mg-jp);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* 一覧の舞台の公開予定（公開済みが 0 件のとき）は、舞台の中身全体がその作品のページへの 1 つのリンク（.mg-stage-link。2026-11-08）。
   押し方と反応は格子の札と同じ：題の下線（news-page.css の .nw-link）・画像の寄り 1.03（上の .mg-stage-link）・フォーカスの枠（sp-frame-v1.css）。
   960 以上はリンクが舞台の 2 列を受け持つ（下の 2 列の節）。作品のページの舞台はリンクにしない */
.mg-card-image .mg-upcoming-cover { padding: 8px; }
.mg-card-image .mg-upcoming-when { font-size: 15px; line-height: 24px; }
@media (max-width: 767px) {
  .mg-upcoming-cover { gap: 10px; }
  .mg-upcoming-when { font-size: 18px; line-height: 28px; }
  .mg-card-image .mg-upcoming-when { font-size: 12px; line-height: 18px; letter-spacing: 0; }
}

/* 舞台の文字の段：番回と日付 → 題 → 概要 → 文字リンク → 共有（→ 前後の作品）。概要・文字リンクの無い回は段ごと出さない。
   共有の段は公開済みの作品・公開予定の作品のページとも最後の段（一覧の舞台の公開予定はリンクの中なので出さない） */
.mg-meta { margin-top: 12.5px; } /* 画像 → 番回の段のインク 16（NEWS 一覧の先頭の札と同じ：行の箱の上の余り 3.5 を引く） */
.mg-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; margin: 0; }
.mg-no {
  color: var(--mg-paper);
  font: 600 15px/16px var(--mg-face); /* 日付（detail-fix-v1.css の 15／14px）と同じ大きさで並べる */
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.mg-line .nw-date { display: inline; }
.mg-title {
  max-width: 896px;
  margin: -4px 0 0; /* 日付のインク → 題のインク 12（NEWS の記事の題と同じ） */
  color: var(--mg-paper);
  font: 700 40px/60px var(--mg-jp);
  overflow-wrap: anywhere;
  word-break: keep-all;
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
.mg-desc {
  max-width: var(--sp-col, 640px); /* 本文の行の長さの上限（NEWS の記事の本文と同じ）。PC の右の列では列の幅まで */
  margin: 4.5px 0 0; /* 題のインク → 概要のインク 24（題の行の箱の下の余り 10 と、16/32 の行の箱の上の余り 9.5 を引く） */
  color: var(--mg-paper);
  font: 400 16px/32px var(--mg-jp);
  white-space: pre-wrap; /* 改行は保つ（受け渡しの形） */
  overflow-wrap: anywhere;
  text-wrap: pretty; /* 1 字だけの行を作らない（題と同じ） */
}
.mg-links,
.mg-share { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 14px 0 0; } /* 題のインク → 文字のインク 24（題の行の箱の下の余り 10 を引く） */
.mg-desc + :is(.mg-links, .mg-share) { margin-top: 16px; } /* 概要のインク → 文字のインク 24（16/32 の行の箱の下の余り 8 を引く） */
.mg-links + .mg-share { margin-top: 6px; } /* 文字リンクの下線 → 共有の字のインク 24（足した段の間の目安。押せる高さ 44 のうち下線より下の 15.5 と、字の上の余りの実測 2.5 を引く） */

/* 和文の操作（契約 §4）：LIVE の「もっと見る」の底上げ後の型。押せる高さ 44、下線は行の箱の 6 下 */
body.sp .sp-u.mg-u {
  align-items: flex-start;
  color: var(--mg-quiet);
  font: 700 15px/1.5 var(--mg-jp);
  letter-spacing: 0.08em;
}
body.sp .sp-u.mg-u::after { top: calc(15px * 1.5 + 6px); right: 0.08em; }
body.sp .sp-u.mg-u .ui-icon { width: 12px; height: 12px; margin-top: 6px; }
body.sp .sp-u.mg-u:is(:hover, :focus-visible) { color: var(--mg-paper); }

/* 前後の作品（一覧・各回のページ）：左右 2 つに分けて横 1 行。左＝前（番号が 1 つ小さい作品。「← No.{n}」と題）、右＝次（1 つ大きい作品。
   「No.{n} →」と題、右寄せ）。端の作品は片側だけで、出す側の位置は変えない。矢印は icons42.svg の arrow-left・arrow-right（「YouTube で見る」の
   arrow-up-right と同じ系統の線）。文字の型は NEWS の前後の導線（.nw-adjacent-label・.nw-adjacent-title）。
   959 以下は文字の段の下で、番回の上に題（2 行で省略。NEWS の前後の導線のスマホの型 15/24）。960 以上は再生面の真下に 1 行（下の 2 列の節） */
.mg-adjacent-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mg-col-gap); align-items: start; margin: 44.5px 0 -4.5px; } /* 文字の段の最後のインク → 番回のインク 48（行の箱の上の余り 3.5 を引く）。下は題の行の箱の下の余り 4.5 を引く */
.mg-adjacent-nav[hidden] { display: none; }
.mg-adjacent { display: grid; row-gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.mg-adjacent--prev { grid-column: 1; }
.mg-adjacent--next { grid-column: 2; justify-items: end; text-align: right; }
.mg-adjacent .mg-adjacent-label { display: inline-flex; align-items: center; gap: 8px; line-height: 16px; }
.mg-adjacent-label .ui-icon { flex: none; width: 12px; height: 12px; }
.mg-adjacent .mg-adjacent-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 題は 2 行で省略 */
  overflow: hidden;
  font-size: 15px;
  line-height: 24px;
}
.mg-adjacent:is(:hover, :focus-visible) .nw-headline-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } /* NEWS の前後の導線と同じ */

/* 文字の段の下端を最後のインクにそろえる（舞台 → ほかの作品、文字の段 → 前後の作品をインクで測るため）。最後の段の行の箱・押せる高さの、インクより下の余りを引く。
   最後の段は共有（作品の舞台はいつも出す）。題が最後になるのは一覧の舞台の公開予定（リンク）だけ */
.mg-meta > .mg-share { margin-bottom: -15.5px; } /* 押せる高さ 44 のうち下線より下 */
.mg-meta > .mg-title:last-child { margin-bottom: -10px; }

/* PC（960 以上）：2 列。本文の列を 10 列（列の間 32）に割り、左 7 列に再生面・右 3 列に文字の段（オーナー「動画 7 : 概要 3」）。
   左右の上端はそろえる（右の列の最初のインク＝番回の字の上端を、再生面の上端に）。前後の作品は 2 段目で、2 列にまたがって横幅いっぱい
   （「次」は文字の段の右端まで。オーナー「次のやつは右端まで」2026-11-03）。2 段目は再生面と文字の段の高い方の下に付く */
@media (min-width: 960px) {
  .mg-stage,
  .mg-stage > .mg-stage-link {
    display: grid;
    grid-template-columns: minmax(0, calc((100% - 9 * var(--mg-col-gap)) * 0.7 + 6 * var(--mg-col-gap))) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--mg-col-gap);
    align-items: start;
  }
  .mg-stage > .mg-stage-link { grid-column: 1 / -1; grid-row: 1; } /* 一覧の舞台の公開予定：リンクが舞台の幅いっぱいで、同じ 2 列を中で組む */
  .mg-screen { grid-column: 1; grid-row: 1; }
  .mg-meta { grid-column: 2; grid-row: 1; }
  .mg-adjacent-nav { grid-column: 1 / -1; grid-row: 2; margin: 43px 0 -5px; } /* 再生面（文字の段が高ければその最後のインク）→ 前後の作品の字 48（オーナー「もうちょっと隙間」。16/26 の行の箱の上の余り 5 を引く）。下も 5 を引く */
  .mg-adjacent { display: flex; align-items: center; column-gap: 16px; }
  .mg-adjacent--next { flex-direction: row-reverse; justify-self: end; max-width: 100%; } /* 題 → 「No.{n} →」（右端） */
  .mg-adjacent .mg-adjacent-label { flex: none; line-height: 26px; }
  .mg-adjacent .mg-adjacent-title { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 26px; } /* 題は 1 行で省略（NEWS の前後の導線の 16/26） */
  .mg-meta { min-width: 0; margin-top: -3.5px; } /* 番回の段の行の箱の上の余り 3.5 を引く */
  .mg-title { margin-top: 1px; font-size: 24px; line-height: 36px; } /* NEWS の記事の題の 24/36 の段。日付 → 題 12 */
  .mg-desc { margin-top: 8.5px; } /* 題のインク → 概要のインク 24（24/36 の行の箱の下の余り 6 と 9.5 を引く） */
  .mg-title + :is(.mg-links, .mg-share) { margin-top: 18px; } /* 題のインク → 文字のインク 24 */
  .mg-meta > .mg-title:last-child { margin-bottom: -6px; }
}

/* ================================================================== */
/* 概要の折りたたみ（舞台と重ねる画面）：台本が data-mg-fold="folded" にした概要だけを行数で切る（JS が無いときは全文）。          */
/* 行数：舞台は PC 5・スマホ 4、重ねる画面は PC 2・スマホ 3。「続きを読む」は実際にはみ出すときだけ台本が足す                     */
/* ================================================================== */
.mg-desc { --mg-fold-lines: 4; }
.mg-ov-desc { --mg-fold-lines: 3; }
[data-mg-fold="folded"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--mg-fold-lines);
  overflow: hidden;
}
.mg-more-row { margin: 0; }
/* 「続きを読む」「折りたたむ」（見本の案 1：Barlow 14・字間 0.12em・控えめの色・下線、下向きの矢印。開いたら上向き） */
.mg-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--mg-faint);
  border-radius: 0;
  background: none;
  color: var(--mg-quiet);
  font: 600 14px/20px var(--mg-face);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.mg-more::before { content: ""; position: absolute; inset: -11px -4px -10px; } /* 押せる高さ 44（見た目の 23 の上下に足す） */
.mg-more .ui-icon { flex: none; width: 12px; height: 12px; }
.mg-more[aria-expanded="true"] .ui-icon { rotate: 180deg; }
.mg-more:is(:hover, :focus-visible) { color: var(--mg-paper); }

/* 出演メンバー（CAST）：ラベル「CAST」（Barlow 13・字間 0.2em・控えめの色）と、人ごとに丸い顔と名前（太字）。押すとその人の MEMBERS の詳細。
   PC（960 以上）は顔 40 の右に名前、ラベルは左（1 段目の顔の縦の真ん中）。スマホは顔 48 の下に名前、ラベルは上（見本の案 1）。
   丸の中の絵の置き方（left・top・一辺）は magazine-v1.mjs の faceFit が % で書く */
.mg-cast { display: flex; align-items: flex-start; gap: 20px; }
.mg-cast-label { flex: none; margin: 0; color: var(--mg-quiet); font: 600 13px/40px var(--mg-face); letter-spacing: 0.2em; }
.mg-cast-list { display: flex; flex-wrap: wrap; gap: 10px 18px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.mg-cast-item { min-width: 0; }
.mg-cast-link { display: flex; align-items: center; gap: 10px; color: var(--mg-paper); text-decoration: none; }
.mg-face {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--mg-night);
}
.mg-face img { position: absolute; display: block; max-width: none; }
.mg-cast-name { color: var(--mg-paper); font: 700 14px/20px var(--mg-jp); white-space: nowrap; }
.mg-cast-link:is(:hover, :focus-visible) .mg-cast-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } /* 題の下線と同じ */

/* 舞台の文字の段の中の位置（概要 → 続きを読む → 出演メンバー → 文字リンク → 共有。足したものの間は 24 を目安に、行の箱の余りを引く） */
.mg-meta > .mg-desc + .mg-more-row { margin-top: 13px; } /* 概要のインク → 続きを読むの字 24（16/32 の下の余り 8・20 の行の上の余り 3） */
.mg-meta > .mg-cast { margin-top: 16px; } /* 概要のインク → 顔 24（下の余り 8） */
.mg-meta > .mg-title + .mg-cast { margin-top: 14px; } /* 題のインク → 顔 24（題の行の箱の下の余り 10） */
.mg-meta > .mg-more-row + .mg-cast { margin-top: 24px; } /* 下線 → 顔 24 */
.mg-meta > .mg-more-row + :is(.mg-links, .mg-share),
.mg-meta > .mg-cast + :is(.mg-links, .mg-share) { margin-top: 24px; }

@media (min-width: 960px) {
  .mg-desc { --mg-fold-lines: 5; }
  .mg-ov-desc { --mg-fold-lines: 2; }
  .mg-meta > .mg-title + .mg-cast { margin-top: 18px; } /* 24/36 の行の箱の下の余り 6 */
}
@media (max-width: 959px) {
  .mg-cast { display: block; }
  .mg-cast-label { line-height: 16px; }
  .mg-cast-list { gap: 16px 14px; margin-top: 12px; }
  .mg-cast-link { flex-direction: column; gap: 6px; }
  .mg-face { width: 48px; height: 48px; }
  .mg-cast-name { font-size: 12px; line-height: 16px; }
}
@media (max-width: 767px) {
  .mg-meta > .mg-desc + .mg-more-row { margin-top: 14.25px; } /* 15/28.5 の下の余り 6.75 */
  .mg-meta > .mg-cast { margin-top: 17.25px; }
  .mg-meta > .mg-title + .mg-cast { margin-top: 18px; }
}

/* ================================================================== */
/* ほかの作品：舞台に出ている回を除く全回（新しい順）。見出しなし。汎用のカード・枠線・区切り線は使わない     */
/* ================================================================== */
.mg-back { margin-top: var(--sp-gap-section, 96px); } /* 舞台の最後のインク → 札の画像の上端 96／スマホ 64（規定の節の間。区切り線なし） */

.mg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--mg-col-gap); } /* 行の間 48（NEWS の格子と同じ：題の行の箱の下の余り 4 を引く）。列は列の幅を満たす（1fr） */
.mg-card { min-width: 0; }
.mg-card[hidden] { display: none; }
.mg-card-link { display: block; color: inherit; text-decoration: none; }
.mg-card-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 12.5px; /* 画像 → 番回の段のインク 16 */
  background: var(--mg-night);
}
.mg-card-text { display: block; min-width: 0; }
.mg-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 題は 2 行で省略 */
  overflow: hidden;
  margin-top: 2.5px; /* 日付のインク → 題のインク 12（NEWS の札と同じ） */
  color: var(--mg-paper);
  font: 700 16px/26px var(--mg-jp);
  overflow-wrap: anywhere;
  word-break: keep-all;
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty; /* 1 字だけの行を作らない（NEWS の題と同じ） */
}

@media (min-width: 1200px) {
  .mg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mg-no { font-size: 14px; }
  .mg-title { margin-top: 1px; font-size: 24px; line-height: 36px; } /* 日付 → 題 12（NEWS の記事のスマホと同じ） */
  .mg-desc { margin-top: 11.3px; font-size: 15px; line-height: 28.5px; } /* 題のインク → 概要のインク 24（NEWS の記事の本文のスマホの型。行の箱の上の余り 6.7） */
  .mg-links, .mg-share { margin-top: 18px; } /* 題 → 文字 24 */
  .mg-links + .mg-share { margin-top: 4px; } /* 文字リンクの下線 → 共有の字のインク 24（下線より下の 17 と、字の上の余りの実測 3 を引く） */
  .mg-desc + :is(.mg-links, .mg-share) { margin-top: 17.25px; } /* 概要 → 文字 24（15/28.5 の行の箱の下の余り 6.75 を引く） */
  body.sp .sp-u.mg-u { font-size: 14px; }
  body.sp .sp-u.mg-u::after { top: calc(14px * 1.5 + 6px); }
  .mg-adjacent-nav { margin-top: 44.5px; } /* 文字の段の最後のインク → 前後の作品の番回のインク 48（PC と同じ。行の箱の上の余り 3.5 を引く） */
  .mg-meta > .mg-share { margin-bottom: -17px; } /* 押せる高さ 44 のうち下線（21 + 6）より下 */
  .mg-meta > .mg-title:last-child { margin-bottom: -6px; }
  /* 2 列の格子：上にサムネイル（16:9）、下に番回と日付・題（2 行で省略）。行の間 32（WORKS のスマホと同じ。題の行の箱の下の余り 4 を引く） */
  .mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--mg-col-gap); }
  .mg-card-image .mg-notch { transform: scale(0.75); transform-origin: 0 100%; } /* WORKS の格子の札と同じ */
  .mg-card-title { margin-top: 4.5px; font-size: 15px; line-height: 24px; } /* 日付 → 題のインク 12（NEWS のスマホと同じ） */
}

/* ================================================================== */
/* 重ねる画面（dialog.mg-ov。2026-11-03 オーナーが見本の「案 1 映画館型」を選んだ）。格子の札を押すと一覧の上に重ねて開く。         */
/* PC（960 以上）：全面の暗い幕（::backdrop）と真ん中の 1 列。動画の幅は min(960, 100vw − 352, (100dvh − 320) × 16/9)、上から 40。  */
/*   動画の下 24 に情報（番号と日付 → 題 24/36 と、その行の右に YouTube で見る → 概要 15/28 の 2 行 → 続きを読む → CAST）。        */
/*   前後は左右の端から 76 の 48×48 の四角（線は紙色の 16%）と下に No.n、動画の縦の真ん中。右上（上 20・右 24）に ESC と ×。      */
/*   中身が縦に収まらないときは重ねる画面の中でスクロールする（前後の四角も中身と一緒に動く。× は動かない）。                      */
/* スマホ（959 以下）：不透明の全画面。上の帯 52（THEATER と ×）・動画は横幅いっぱい・左右 20 の余白で情報・下の帯 64（前後）。     */
/* 開閉は不透明度 160ms（動きを減らす設定では動かさない）。安全域（env(safe-area-inset-*)）を守る。                                */
/* ================================================================== */
html.v8-preview-lock { overflow: hidden; overflow-anchor: none; } /* 開いている間は背景のスクロールを止める（WORKS の拡大表示と同じ印） */
dialog.mg-ov {
  --mg-ov-pad: 20px;
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--mg-ground);
  color: var(--mg-paper);
  font-family: var(--mg-jp);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 1;
  transition: opacity 160ms ease;
}
dialog.mg-ov::backdrop { background: #08090e; opacity: 1; transition: opacity 160ms ease; }
dialog.mg-ov.is-hidden,
dialog.mg-ov.is-hidden::backdrop { opacity: 0; }
dialog.mg-ov:focus { outline: none; }
dialog.mg-ov *,
dialog.mg-ov *::before,
dialog.mg-ov *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  dialog.mg-ov,
  dialog.mg-ov::backdrop { transition: none; }
}

/* 上の帯（スマホ）：左に THEATER・右に ×。スクロールしても上に残る */
.mg-ov-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(52px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(var(--mg-ov-pad) + env(safe-area-inset-left));
  background: var(--mg-ground);
}
.mg-ov-label { margin: 0; color: var(--mg-quiet); font: 600 13px/16px var(--mg-face); letter-spacing: 0.2em; }
.mg-ov-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mg-quiet);
  font: 600 12px/1 var(--mg-face);
  letter-spacing: 0.16em;
  cursor: pointer;
}
.mg-ov-esc { display: none; }
.mg-ov-x { display: grid; place-items: center; width: 44px; height: 44px; color: var(--mg-paper); }
.mg-ov-x .ui-icon { width: 20px; height: 20px; }

/* 再生面（舞台と同じ .mg-screen の箱：16:9・ポスターの <button>・<video>・再生できないときの文） */
.mg-ov-stage { position: relative; }

/* 情報：番号と日付 → 題 → 概要 → 続きを読む → CAST → YouTube で見る（スマホは縦に積む） */
.mg-ov-info { padding: 18px calc(var(--mg-ov-pad) + env(safe-area-inset-right)) calc(64px + 32px + env(safe-area-inset-bottom)) calc(var(--mg-ov-pad) + env(safe-area-inset-left)); }
dialog.mg-ov:has(.mg-ov-steps[hidden]) .mg-ov-info { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.mg-ov-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mg-ov-title {
  margin: 0;
  color: var(--mg-paper);
  font: 700 20px/30px var(--mg-jp);
  letter-spacing: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
.mg-ov-desc {
  margin: 0;
  color: var(--mg-paper);
  font: 400 15px/27px var(--mg-jp);
  white-space: pre-wrap; /* 改行は保つ（受け渡しの形） */
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.mg-ov-main > .mg-more-row { margin-top: 4px; }
.mg-ov-links { margin: 20px 0 0; }

/* 前後（スマホ）：下の帯 64＋安全域。上に線、左に「← No.n」・右に「No.n →」（端ではその側を出さない） */
.mg-ov-steps {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  height: calc(64px + env(safe-area-inset-bottom));
  padding: 0 calc(var(--mg-ov-pad) + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(var(--mg-ov-pad) + env(safe-area-inset-left));
  border-top: 1px solid var(--mg-faint);
  background: var(--mg-ground);
}
.mg-ov-steps[hidden] { display: none; }
.mg-ov-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mg-paper);
  font: 600 14px/1 var(--mg-face);
  letter-spacing: 0.1em;
  cursor: pointer;
}
.mg-ov-step--next { flex-direction: row-reverse; margin-left: auto; }
.mg-ov-step-box { display: grid; place-items: center; }
.mg-ov-step-box .ui-icon { width: 14px; height: 14px; }

@media (min-width: 960px) {
  dialog.mg-ov {
    --mg-ov-w: min(960px, 100vw - 352px, (100dvh - 320px) * 16 / 9);
    padding: 40px 0 calc(40px + env(safe-area-inset-bottom));
    background: transparent;
  }
  dialog.mg-ov::backdrop {
    background: rgb(8 9 14 / 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* 右上の ESC と ×（スクロールしても動かない） */
  .mg-ov-bar { position: static; height: 0; padding: 0; background: none; }
  .mg-ov-label { display: none; }
  .mg-ov-close { position: fixed; top: calc(20px + env(safe-area-inset-top)); right: calc(24px + env(safe-area-inset-right)); z-index: 3; }
  .mg-ov-esc { display: inline; }
  .mg-ov-x { width: 48px; height: 48px; border: 1px solid var(--mg-faint); background: rgb(8 9 14 / 0.6); }
  .mg-ov-close:is(:hover, :focus-visible) .mg-ov-esc { color: var(--mg-paper); }
  .mg-ov-stage { width: var(--mg-ov-w); margin: 0 auto; }
  .mg-ov-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    width: var(--mg-ov-w);
    margin: 24px auto 0;
    padding: 0;
  }
  dialog.mg-ov:has(.mg-ov-steps[hidden]) .mg-ov-info { padding-bottom: 0; }
  .mg-ov-title { font-size: 24px; line-height: 36px; }
  .mg-ov-desc { max-width: 46em; line-height: 28px; }
  .mg-ov-main > .mg-cast { margin-top: 18px; }
  .mg-ov-links { margin: 0; padding-top: 28px; } /* 題の行の右（番号と日付の段 16 ＋ 段の間 12 の下から） */
  /* 前後：左右の端から 76 の 48×48 の四角と下に No.n。動画の縦の真ん中（動画は上から 40・高さは幅 × 9/16） */
  .mg-ov-steps {
    position: absolute;
    top: calc(40px + var(--mg-ov-w) * 9 / 32);
    bottom: auto;
    display: block;
    height: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .mg-ov-step {
    position: absolute;
    top: 0;
    flex-direction: column;
    gap: 8px;
    color: var(--mg-quiet);
    font: 600 13px/16px var(--mg-face);
    letter-spacing: 0.08em;
    translate: 0 -50%;
  }
  .mg-ov-step--prev { left: calc(76px + env(safe-area-inset-left)); }
  .mg-ov-step--next { right: calc(76px + env(safe-area-inset-right)); flex-direction: column; margin: 0; }
  .mg-ov-step-box { width: 48px; height: 48px; border: 1px solid var(--mg-faint); background: rgb(8 9 14 / 0.6); color: var(--mg-paper); }
  .mg-ov-step-box .ui-icon { width: 20px; height: 20px; }
  .mg-ov-step:is(:hover, :focus-visible) .mg-ov-step-no { color: var(--mg-paper); }
}

/* ================================================================== */
/* 入場（magazine-page-v1.js が値を動かす）。動きを許す環境だけ。スクリプトが読めなくても 3.5 秒で必ず外れる（head の印）。 */
/* ================================================================== */
html.mg-entering body.mg-page [data-mg-reveal] {
  -webkit-mask-image: linear-gradient(to left, #000 var(--mg-a, -96px), transparent var(--mg-b, 0px));
  mask-image: linear-gradient(to left, #000 var(--mg-a, -96px), transparent var(--mg-b, 0px));
}
@media (prefers-reduced-motion: reduce) {
  html.mg-entering body.mg-page [data-mg-reveal] { -webkit-mask-image: none; mask-image: none; }
}