/*
 * PBI-2612 / PRD-36: LINE 版デモの確認ダイアログを端末枠の中に収める。
 *
 * LINE 版は SPA を「スマートフォンの枠」（.phone-frame > .phone-screen）の中に描いている。
 * 確認ダイアログは SweetAlert2 で、コンテナを **body 直下に position: fixed / inset: 0** で
 * 置くため、枠を無視してブラウザのウィンドウ全体に広がる。ポップアップ自体の既定幅も
 * 32em（= 512px）で枠の 390px より広く、PC で見ると枠の外にはみ出す。
 *
 * コンテナは body 直下なので、CSS では枠の中へ移せない（親を変えられない）。
 * そこで **コンテナの座標を枠の画面領域に合わせる**。枠の寸法はバンドル CSS の
 * .phone-frame と同じ式で表せるので、JS を足さずに一致させられる。
 *
 *   .phone-frame { width: 390px; height: min(844px, calc(100dvh - var(--fixu-demo-bar-h) - 32px));
 *                  margin: 16px 0; border: 10px solid; box-sizing: content-box }
 *
 * → 画面領域は「水平中央・幅 390px」「上端 = デモバー + 16px(margin) + 10px(枠線)」
 *   「高さ = .phone-frame の height（content-box なので枠線を含まない）」になる。
 *   --fixu-demo-bar-h は demo-assets/demo-bar.js が実測値を入れる（既定 36px）。
 *
 * 480px 以下では枠が画面いっぱい（幅 100% / 枠線なし）に変わるため、SweetAlert2 の
 * 既定（ウィンドウ全体）で正しい。そのぶんは上書きしない。
 *
 * 取得元の demo03 は撤去済みで、このスナップショットが正本。スナップショットを
 * 取り直せないため、SPA 側ではなくここで当てている（static-demo/README.md 参照）。
 */

@media (min-width: 481px) {
    .swal2-container {
        top: calc(var(--fixu-demo-bar-h, 36px) + 26px) !important; /* 16px margin + 10px border */
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 390px !important;
        max-width: 100% !important;
        height: min(844px, calc(100dvh - var(--fixu-demo-bar-h, 36px) - 32px)) !important;
    }

    /* 既定は 32em（512px）で枠より広い。コンテナ（padding .625em）の内側に収める。 */
    .swal2-container .swal2-popup {
        width: 100% !important;
    }
}