/**
 * 競輪AI予想 広告表示スタイル
 * Version: 2.3.2
 *
 * Changelog:
 * 2.3.2 - ins.adsbygoogle CLS 対策: min-height をラベル高さ分増量
 *         - .keirin-adsense-ad の min-height を 250px→280px（PC）, 200px→230px（モバイル）に変更
 *         - 「広告」ラベル（約30px）分を加算し、広告読み込み時のコンテナ高さ変動を解消
 * 2.3.1 - 広告iframe重なり問題を修正
 *         - 広告コンテナとinsタグに position: relative を追加
 *         - iframeのposition:absoluteの基準点を正しく設定
 *         - 広告とコンテンツが重ならないように修正
 * 2.3.0 - 広告サイズを広告コンテンツに完全に合わせる修正
 *         - 広告コンテナの背景、ボーダー、パディングを完全に削除
 *         - height: auto を明示的に設定し、広告の実サイズで表示
 *         - insタグのpadding、overflowを最適化
 *         - スマホでの広告表示問題を修正
 * 2.2.0 - インフィード広告のスマホ表示最適化
 *         - PC用/スマホ用AdSense広告の個別スタイル追加
 *         - インフィード広告の最小幅要件（300px）を設定
 *         - insタグの幅を100%に設定してレスポンシブ対応
 *         - スマホ用広告コンテナのサイズ最適化
 * 2.1.0 - スマホでの広告表示を確実にする修正
 *         - すべての広告要素に !important を追加してテーマCSSをオーバーライド
 *         - display, visibility, opacity を明示的に指定
 *         - レスポンシブ対応の強化
 * 2.0.0 - バナー広告の横幅制限と縦横比保持の実装
 *         - race-predictionクラスの間に配置時の視認性向上
 *         - 複数バナー広告対応
 */

/* 広告コンテナ */
.keirin-ad-container {
    margin: 40px auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
    clear: both !important;
    overflow: visible !important;
    display: block !important; /* 確実に表示 */
    visibility: visible !important; /* 確実に表示 */
    opacity: 1 !important; /* 確実に表示 */
}

/* テーマ由来の左右ズレを無効化 */
.single-post .entry-content .keirin-ad-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 広告ラベル */
.keirin-ad-label {
    font-size: 0.75rem;
    color: #999;
    text-align: center;
    margin-bottom: 10px;
    font-weight: normal;
    letter-spacing: 0.05em;
}

/* AdSense広告コンテナ */
.keirin-adsense-ad {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 40px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* テーマの狭い領域でも表示 */
    box-sizing: border-box !important;
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 280px; /* CLS対策: medium rectangle (300x250) + 「広告」ラベル（約30px）分を事前確保 */
    position: relative !important; /* iframeのposition:absoluteの基準点 */
}

/* PC用AdSense広告 */
.keirin-adsense-pc {
    max-width: 800px !important;
}

/* スマホ用AdSense広告 */
.keirin-adsense-mobile {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* バナー広告コンテナ */
.keirin-banner-ad {
    margin: 40px auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    display: block !important; /* 確実に表示 */
    visibility: visible !important; /* 確実に表示 */
    opacity: 1 !important; /* 確実に表示 */
    /* CLS対策: 画像読み込み前に高さを確保（width/height属性がない場合のフォールバック） */
    min-height: 90px;
}

.keirin-banner-ad a {
    display: block !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease;
    max-width: 800px !important; /* 横幅の最大値を制限 */
    margin: 0 auto !important;
    visibility: visible !important; /* 確実に表示 */
}

.keirin-banner-ad a:hover {
    opacity: 0.85;
}

/* バナー画像 - 横幅制限と縦横比保持 */
.keirin-banner-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 縦横比を保持 */
    object-fit: contain;
    /* 最大横幅を800pxに制限 */
    max-width: 800px !important;
    visibility: visible !important; /* 確実に表示 */
    opacity: 1 !important; /* 確実に表示 */
}

/* race-prediction間の広告の視認性向上 */
.race-prediction + .keirin-ad-container {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 20px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .keirin-ad-container {
        margin: 30px auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .keirin-adsense-ad {
        padding: 0 !important;
        margin: 30px auto !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 230px; /* CLS対策: スマホ用 medium rectangle（200px）+ 「広告」ラベル（約30px）分を確保 */
        background: transparent !important;
        border: none !important;
    }

    /* スマホ用AdSense広告の最適化 */
    .keirin-adsense-mobile {
        padding: 0 !important;
        margin: 20px auto !important;
        min-width: 0 !important;
        width: 100% !important;
        border: 0 !important;
        background: transparent !important;
    }

    .keirin-banner-ad {
        margin: 30px auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .keirin-banner-ad a {
        max-width: 100% !important; /* モバイルでは幅いっぱいに表示 */
        display: block !important;
        visibility: visible !important;
    }

    .keirin-banner-image {
        max-width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .keirin-ad-label {
        display: none !important;
    }

    .race-prediction + .keirin-ad-container {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        padding: 15px 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
    }
}

/* 記事コンテンツ内での広告の配置調整 */
.single-post .entry-content .keirin-ad-container {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* テーマとの互換性を確保 */
.keirin-ad-container * {
    box-sizing: border-box;
}

/* AdSense用の追加スタイル */
.keirin-adsense-ad ins {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important; /* iframeのposition:absoluteの基準点 */
}

/* スマホ用AdSense広告のinsタグ最適化 */
.keirin-adsense-mobile ins {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important; /* iframeのposition:absoluteの基準点 */
}

/* 広告の内部要素をコンテナ幅に収める */
.keirin-adsense-slot > div,
.keirin-adsense-slot iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* AdSenseのスクリプトタグ */
.keirin-adsense-ad script {
    display: block !important;
}

/* 広告とrace-predictionの間隔調整 */
.all-predictions .keirin-ad-container {
    margin-left: 2rem;
    margin-right: 2rem;
}

@media (max-width: 900px) {
    .all-predictions .keirin-ad-container {
        margin-left: 0.6rem;
        margin-right: 0.6rem;
    }
}