/* ===== YouTube モーダル：中央配置・見た目 ===== */

/* 背景オーバーレイ */
.ytm-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  opacity:0; visibility:hidden;
  transition:opacity .15s ease;
  z-index:9999;
}

/* モーダル本体（常にflexだが非表示時は透明） */
.ytm-modal{
  position:fixed; inset:0;
  display:flex;                 /* ここで上下左右センター */
  align-items:center;
  justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .15s ease;
  z-index:10000;
  pointer-events:none;          /* クリックは内側のみ */
}

/* 開いたとき */
.ytm-overlay.is-open,
.ytm-modal.is-open{
  opacity:1; visibility:visible;
}

/* 中身のボックス */
.ytm-box{
  position:relative;
  width:min(90vw, 960px);
  background:#000;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  pointer-events:auto;          /* ここは操作可 */
}

/* 16:9 比率でレスポンシブ */
.ytm-framewrap{ position:relative; width:100%; padding-top:56.25%; }
.ytm-framewrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* 閉じるボタン */
.ytm-close{
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.55);
  color:#fff; border:0; border-radius:8px;
  padding:8px 10px; cursor:pointer; font-size:14px;
}
.ytm-close:hover{ background:rgba(0,0,0,.75); }

/* フォールバック導線 */
.ytm-fallback{ text-align:right; padding:8px 12px; }
.ytm-openin{ color:#fff; opacity:.85; text-decoration:underline; }
.ytm-openin:hover{ opacity:1; }

/* 背景スクロールロック */
.body--lock{ overflow:hidden; }