/* 本編モーダル。通常は上寄せ、native fullscreen時だけpanelを画面へ広げる。
 * 設定メモ：現役：TOP本編dialogのみ。001は現在modalを読まずREBIRTH一覧への通常リンク。video-modal.jsのpanel／fullscreen／frame-pending状態に依存し、下層標準Brightcove操作barとは別UI。
 */
/* 調整メモ：px／vh制約はdialog外枠用。fullscreen対象はJSのpanelで、通常の最大1238px・16:9と同一ではない。TOP本編初期フレームoverlay中も閉じる操作は残す。 */
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal {
  position: fixed; inset: 0; box-sizing: border-box; width: 100%; max-width: none;
  height: 100%; height: 100dvh; max-height: none; margin: 0;
  padding: clamp(16px, 5.069444vw, 73px) 16px 16px; border: 0;
  color: var(--color-text-white); background: #000;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal[open] { display: grid; justify-items: center; align-content: start; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal::backdrop { background: #000; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_panel {
  position: relative;
  width: min(1238px, 100%, max(272px, calc((100dvh - clamp(16px, 5.069444vw, 73px) - 76px) * 16 / 9)));
  min-width: 0;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_video {
  display: block; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 9;
  object-fit: contain; border: 0; border-radius: 0; background: #000;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_controls {
  display: flex; align-items: center; gap: 16px;
  box-sizing: border-box; width: 100%; margin: 16px 0 0;
  opacity: 1; transition: opacity .3s ease;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_button,
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_mute {
  display: grid; place-items: center; flex: 0 0 44px; box-sizing: border-box;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--color-text-white); font-size: 18px; line-height: 1; cursor: pointer;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_volume { position: relative; display: flex; align-items: center; flex: 0 0 104px; min-width: 0; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_volumePanel { display: flex; align-items: center; width: 104px; gap: 0; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_progress { display: flex; align-items: center; flex: 1; min-width: 64px; min-height: 44px; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal :is([data-modal-seek], [data-modal-volume]) {
  display: block; box-sizing: border-box; appearance: none; -webkit-appearance: none;
  width: 100%; min-width: 0; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  accent-color: #fff; cursor: pointer; touch-action: pan-x pinch-zoom;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal input::-webkit-slider-runnable-track { height: 3px; border: 0; background: #555; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal [data-modal-seek]::-webkit-slider-runnable-track { background: linear-gradient(to right, #fff 0 var(--progress, 0%), #555 var(--progress, 0%) 100%); }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal input::-moz-range-track { height: 3px; border: 0; background: #555; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal input::-moz-range-progress { height: 3px; background: #fff; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  width: 2px; height: 20px; margin-top: -8.5px; border: 0; border-radius: 0; background: #fff; box-shadow: none;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal input::-moz-range-thumb { box-sizing: border-box; width: 2px; height: 20px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal input:disabled { opacity: .45; cursor: default; }
body:is(.design-center, .design-center-rebirthArticle) [data-modal-mute][aria-pressed="true"] .volume-audible,
body:is(.design-center, .design-center-rebirthArticle) [data-modal-mute][aria-pressed="false"] .volume-muted { display: none; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_close { font-size: 30px; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal [hidden] { display: none !important; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal :is(button, input):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_status { margin: 12px 0 0; color: var(--color-text-white); font-size: var(--design-center-body-font-size, 14px); line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_status:empty { display: none; }
/* 操作列の実幅で切替。Windowが広くても低い画面ではコンパクト音量UIを使う。 */
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_controls[data-modal-compact] { gap: 8px; }
body:is(.design-center, .design-center-rebirthArticle) [data-modal-compact] .design-center-videoModal_volume { flex-basis: 44px; }
body:is(.design-center, .design-center-rebirthArticle) [data-modal-compact] .design-center-videoModal_volumePanel {
  position: absolute; z-index: 4; right: 0; bottom: calc(100% + 8px);
  box-sizing: border-box; width: 160px; padding: 8px; background: #222; border: 1px solid #777;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_panel:fullscreen {
  box-sizing: border-box; width: 100%; height: 100%; padding: 0; background: #000;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_panel:fullscreen .design-center-videoModal_video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_panel:fullscreen .design-center-videoModal_controls {
  position: absolute; z-index: 3; bottom: max(8px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
  width: auto; margin: 0; background: transparent;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_panel:fullscreen .design-center-videoModal_status {
  position: absolute; z-index: 3; bottom: calc(64px + env(safe-area-inset-bottom)); left: 16px; right: 16px;
  margin: 0; pointer-events: none;
}
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_panel:fullscreen [data-modal-volume-help] { bottom: calc(96px + env(safe-area-inset-bottom)); }
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal_panel[data-modal-controls-hidden] { cursor: none; }
body:is(.design-center, .design-center-rebirthArticle) [data-modal-controls-hidden] .design-center-videoModal_controls { opacity: 0; pointer-events: none; }

/* AのBrightcove hostは既存video枠と同じ寸法。記事/Bのnative videoには適用しない。 */
body.design-center[data-design-center-brightcove] .design-center-videoModal_video { position: relative; }
body.design-center[data-design-center-brightcove] .design-center-videoModal_video :is(.design-center-bcPlayer, .vjs-tech) {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; aspect-ratio: auto;
}
body.design-center[data-design-center-brightcove] .design-center-videoModal_video .design-center-bcPlayer { background: #000; }
body.design-center[data-design-center-brightcove] .design-center-videoModal_video .vjs-tech { object-fit: contain; }

/* TOP配信動画の準備中は映像枠だけ黒で覆う。techを非表示にせずデコードを継続する。 */
body.design-center[data-design-center-brightcove] .design-center-videoModal_video[data-modal-frame-pending]::after {
  content: ""; position: absolute; inset: 0; z-index: 2; background: #000; pointer-events: none;
}

/* 個別の操作UIだけをhover半透明化し、列・音量容器にはopacityを掛けない。
 * disabled inputの既存.45は保持し、disabled操作へhoverを追加しない。 */
body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal :is(button, input[type="range"]) { transition: opacity .3s ease; }
@media (hover: hover) {
  body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal :is(button, input[type="range"]):not(:disabled):hover { opacity: .5; }
}
@media (prefers-reduced-motion: reduce), print {
  body:is(.design-center, .design-center-rebirthArticle) .design-center-videoModal :is(button, input[type="range"], .design-center-videoModal_controls) { transition: none; }
}