/* 画面全体の暗幕 */
.legal-modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  background: color-mix(in oklab, black 60%, transparent);
  display: none;                 /* JSでgridに切り替え */
  place-items: center;           /* 中央寄せ */
  z-index: 9999;
}

/* <dialog> ベースのモーダル */
.legal-modal{
  width: min(1000px, 92vw);
  height: min(85vh, 92vh);
  border: none; padding: 0; margin: 0;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  background: var(--bg, #fff);
  color: var(--fg, #111);
}

/* ヘッダー */
.legal-modal__head{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background: var(--panel,#f8fafc);
  border-bottom: 1px solid var(--border,#e5e7eb);
}
.legal-modal__title{ margin:0; font-size:16px; font-weight:600; flex:1; }
.legal-modal__close{
  appearance:none; border:1px solid var(--border,#e5e7eb);
  background:transparent; padding:6px 10px; border-radius:8px; cursor:pointer;
}

/* 本文スクロール領域 */
.legal-modal__body{
  height: calc(100% - 54px);
  overflow:auto;
  padding: clamp(16px, 2vw, 24px);
}

/* 既存の terms-privacy.css と干渉しない軽微調整 */
.legal-modal__body .container{ max-width: unset; padding:0; }
.legal-modal__body .toc{ position: static; margin-bottom: 16px; }

/* “リンク風”ボタン（利用規約/プライバシーポリシーに使用） */
.linklike{
  background: none; border: none; padding: 0;
  color: var(--link,#1d4ed8);
  text-decoration: underline; cursor: pointer; font: inherit;
}

.legal-modal-backdrop { place-items: center; }
.legal-modal { margin-inline: auto; }