/**
 * スプラッシュポップアップ（src/components/SplashPopup.tsx）の <dialog> 自体の見た目。
 *
 * 中身（#splash-banner の .close ボタン・レスポンシブ幅）は旧テーマCSS
 * style.css:1544-1613 がそのまま担当するので、ここでは触らない。
 * テーマCSSの後に読み込む上書きシート（head-assets.ts の STYLES 末尾）。
 * a11y-overrides.css / nav-dropdown.css / column-guide-link.css と同じ運用。
 */

.splash-popup {
  padding: 0;
  border: 0;
  background: transparent;
  /* .close は top:-0.5rem 側にはみ出さないが、将来の装飾で切れないように */
  overflow: visible;

  /* 画面サイズに追従して大きく出す。
     ⛔ 旧 `max-width: min(90vw, 560px)` は廃止（2026-08-23）。
        560px で頭打ちになり、大きなモニタほど相対的に小さく見えていた。
     幅と高さの**両方**で頭打ちにするのが要点。高さを見ないと、
     横長のPCバナー（3:2）がノートPCの短い画面で縦にはみ出す。
     画像の実寸（PC 1536px / SP 1024px）が自然な上限になるので、
     それ以上には拡大しない（引き伸ばすと眠い絵になるため）。 */
  max-width: 92vw;
  max-height: 92dvh;
}

.splash-popup::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.splash-popup a {
  display: block;
}

/* 幅と高さの両方に上限を掛け、width/height を auto にすることで
   縦横比を保ったまま「画面に収まる最大サイズ」で表示される。
   max-width が 100%（＝親の #splash-banner 幅）なのは、
   680px以下でテーマCSSの `#splash-banner{width:89.3vw}` を効かせ続けるため
   （スマホの見え方は現状で良いので変えない）。 */
.splash-popup img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 92dvh;
}