/* ======================================
   投稿詳細ページ: ガラス調透明感背景
   ※ is_single() 時のみ functions.php から読み込み
====================================== */

/* 記事ページ全体の背景グラデーション */
body.single .l-content {
    position: relative;
    background: linear-gradient(
        135deg,
        #fafafa 0%,
        #f5f3f0 50%,
        #faf8f6 100%
    );
}

/* ガラス調の透明レイヤー */
body.single .l-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(198, 181, 150, 0.05) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(198, 181, 150, 0.03) 0%,
            transparent 50%
        );
    pointer-events: none;
    z-index: 0;
}

/* 記事コンテンツエリア: ガラスモルフィズム効果 */
body.single .l-mainContent .post_content,
body.single .l-mainContent > .l-article {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(198, 181, 150, 0.12);
    padding: 40px 60px;
    margin: 20px auto;
}

/* アイキャッチ画像エリア */
body.single .p-articleThumb {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 関連記事エリアもガラス調 */
body.single .p-relatedPosts {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 30px;
    margin-top: 40px;
}

/* PC表示 */
@media (min-width: 768px) {
    body.single .l-mainContent .post_content,
    body.single .l-mainContent > .l-article {
        padding: 40px 60px;
    }
}

/* SP表示 */
@media (max-width: 767px) {
    body.single .l-mainContent .post_content,
    body.single .l-mainContent > .l-article {
        padding: 24px 16px;
        margin: 10px;
        border-radius: 12px;
    }

    body.single .p-relatedPosts {
        padding: 20px;
        margin-top: 30px;
    }
}