/* ===================================
   SVG背景の代替実装方法
   =================================== */

/* 方法1: object-fitを使用した最適化 */
body::after {
    /* ベクター画像の品質を最大限に保持 */
    object-fit: fill;
    object-position: top;
}

/* 方法2: SVGスケーリングの最適化 */
@supports (background-size: 100% auto) {
    body::after {
        /* 横幅100%、Y方向繰り返し */
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* 方法3: パターン背景として使用（Y方向タイル） */
body.pattern-mode::after {
    /* 横幅100%でY方向にパターン繰り返し */
    background-size: 100% auto;
    background-attachment: fixed;
    background-repeat: repeat-y;
}

/* 高解像度ディスプレイでのシャープネス向上 */
@media (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi) {
    body::after {
        /* ベクターグラフィックスの最適レンダリング */
        image-rendering: auto;
        image-rendering: optimizeQuality;
        /* Safariでのレンダリング改善 */
        -webkit-image-rendering: optimizeQuality;
    }
}

/* モバイルデバイスでの最適化 */
@media (max-width: 768px) and (orientation: portrait) {
    body::after {
        /* 縦向きモバイルでも横幅100% */
        background-size: 100% auto;
        background-position: center top;
        background-repeat: repeat-y;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    body::after {
        /* 横向きモバイルでも横幅100% */
        background-size: 100% auto;
        background-position: center top;
        background-repeat: repeat-y;
    }
}

/* SVGの鮮明度を最大化 */
body::after {
    /* ブラウザのスムージングを制御 */
    font-smoothing: none;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    
    /* サブピクセルレンダリングを無効化 */
    text-rendering: geometricPrecision;
    
    /* エッジの鮮明さを保持 */
    shape-rendering: crispEdges;
    shape-rendering: geometricPrecision;
}

/* Internet Explorer/Edge Legacy対応 */
@supports (-ms-ime-align: auto) {
    body::after {
        image-rendering: -ms-optimize-contrast;
    }
}

/* 大画面（4K以上）での最適化 */
@media (min-width: 3840px) {
    body::after {
        /* 超高解像度では原寸表示も検討 */
        background-size: contain;
        background-position: center center;
        /* 背景色で空白部分を埋める */
        background-color: #0f172a;
    }
}

/* アニメーション効果（オプション） */
body.animated-bg::after {
    /* 緩やかなズーム効果 */
    animation: subtleZoom 30s ease-in-out infinite alternate;
}

@keyframes subtleZoom {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.05) translate3d(0, 0, 0);
    }
}

/* パフォーマンス最適化 */
body::after {
    /* コンポジット層を作成してパフォーマンス向上 */
    will-change: transform, opacity;
    
    /* バックフェースを非表示にしてレンダリング改善 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* 3Dトランスフォームでハードウェアアクセラレーション */
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* プリント時の最適化 */
@media print {
    body::after {
        /* 印刷時は背景を非表示またはシンプルに */
        display: none;
    }
}