/* ===================================
   縦長SVG背景画像用の最適化スタイル
   =================================== */

/* 基本設定: 横幅100%でY方向繰り返し（y.u mobile公式と同じ） */
body::after {
    /* 横幅を画面幅いっぱいに拡大 */
    background-size: 100% auto !important;
    /* 上部中央から開始 */
    background-position: center top !important;
    /* Y方向に繰り返し */
    background-repeat: repeat-y !important;
    /* 幅を100%に */
    width: 100% !important;
}

/* 横長画面での最適化 */
@media (min-aspect-ratio: 16/9) {
    body::after {
        /* 横長画面では幅に余白が出る可能性があるので背景色で補完 */
        background-color: #0f172a;
    }
}

/* 縦長画面（スマートフォン）での最適化 */
@media (max-aspect-ratio: 9/16) {
    body::after {
        /* モバイルでは高さを優先 */
        background-size: auto 100% !important;
        background-position: center center !important;
    }
}

/* タブレット縦向きでの最適化 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    body::after {
        background-size: auto 100% !important;
        background-position: center center !important;
    }
}

/* デスクトップ標準画面（16:9）での最適化 */
@media (min-width: 1366px) and (max-width: 1920px) {
    body::after {
        /* 標準的なデスクトップでは高さベース */
        background-size: auto 100% !important;
        background-position: center center !important;
    }
}

/* ウルトラワイド画面（21:9）での最適化 */
@media (min-aspect-ratio: 21/9) {
    body::after {
        /* ウルトラワイドでは幅を優先する場合もある */
        background-size: 100% auto !important;
        background-position: center center !important;
    }
}

/* 4K以上の高解像度での最適化 */
@media (min-width: 3840px) {
    body::after {
        /* 高解像度では原寸に近いサイズで表示 */
        background-size: auto 100% !important;
        background-position: center center !important;
        /* ベクター画像の品質を最大に */
        image-rendering: optimizeQuality !important;
    }
}

/* スクロール時のパフォーマンス最適化 */
body::after {
    /* スクロール時のちらつき防止 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* レイヤー化してパフォーマンス向上 */
    will-change: transform;
}

/* 背景の両端の処理 */
@media (min-width: 1920px) {
    body::after {
        /* 大画面で背景の左右に余白が出る場合の処理 */
        box-shadow: inset 0 0 0 100vw rgba(15, 23, 42, 0.5);
    }
}

/* アニメーション効果（オプション） */
@keyframes verticalFloat {
    0%, 100% {
        background-position-y: center;
    }
    50% {
        background-position-y: calc(center - 10px);
    }
}

/* 微妙な浮遊効果を追加（パフォーマンスに影響しない範囲で） */
body.floating-bg::after {
    animation: verticalFloat 20s ease-in-out infinite;
}

/* プリント時の対応 */
@media print {
    body::after {
        /* 印刷時は背景を無効化 */
        display: none;
    }
}

/* フォールバック: SVGがロードできない場合 */
body::after {
    /* Base64 SVGは既に埋め込まれているため、フォールバックは不要 */
    /* 万が一のためのグラデーションバックアップ */
    background-image: 
        var(--svg-background, linear-gradient(135deg, #1e3a8a 0%, #f97316 50%, #dc2626 100%));
}

/* 縦長画像のアスペクト比保持 */
@supports (aspect-ratio: 1) {
    body::after {
        /* アスペクト比のヒントをブラウザに提供 */
        aspect-ratio: auto;
    }
}