/* ページ全体の背景設定 */
body {
    background:
        linear-gradient(rgba(18, 18, 18, 0.7), rgba(18, 18, 18, 0.9)),
        url('../assets/images/erika-hero.jpg') no-repeat center top;

    /* 背景サイズを横幅いっぱいに(100%)。縦は自動計算(auto) */
    background-size: 100% auto;

    /* スクロールに合わせて背景も移動させる（コンテンツが長い場合、背景画像もスクロールして下の方が見えるようになる） */
    background-attachment: scroll;

    color: #e0e0e0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Bulmaのデフォルト背景を透明にする */
.hero.is-dark,
.section,
.footer {
    background-color: transparent !important;
}

/* カードを「グラスモーフィズム（すりガラス）」風にして視認性を確保 */
.card {
    /* 透明度を上げて、背景のエリカがより透けるように調整 */
    background-color: rgba(30, 30, 30, 0.2) !important;
    backdrop-filter: blur(10px);
    /* すりガラス効果は維持して文字の視認性を確保 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.card:hover {
    /* ホバー時も透明感を維持しつつ、わずかに明るく */
    background-color: rgba(243, 156, 18, 0.15) !important;
    border-color: #f39c12;
    transform: translateY(-8px);
}

/* テキストの視認性を上げるためのドロップシャドウ */
.title,
.subtitle {
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* 記事ページ（article.html）のフォントサイズ・行間調整（スマホ向け） */
@media screen and (max-width: 768px) {
    #app .content {
        font-size: 1.1rem;
        /* スマホでの基準文字サイズを少し大きく */
        line-height: 1.8;
        /* 行間を広げて読みやすく */
    }

    #app .content h1 {
        font-size: 1.75rem;
    }

    #app .content h2 {
        font-size: 1.5rem;
    }

    #app .content h3 {
        font-size: 1.25rem;
    }
}

/* --- 日報・記事のMarkdownコンテンツ向けダークモード対応 --- */
.box.has-background-black-ter .content h1,
.box.has-background-black-ter .content h2,
.box.has-background-black-ter .content h3,
.box.has-background-black-ter .content h4,
.box.has-background-black-ter .content h5,
.box.has-background-black-ter .content h6,
.box.has-background-black-ter .content p,
.box.has-background-black-ter .content li,
.box.has-background-black-ter .content strong,
.box.has-background-black-ter .content blockquote {
    color: #e0e0e0 !important;
}

.box.has-background-black-ter .content a {
    color: #82aaff;
}

.box.has-background-black-ter .content blockquote {
    background-color: #2a2a2a;
    border-left: 5px solid #555;
}


/* ==========================================
   Markdownコンテンツ（.content）のダークテーマ対応
========================================== */
/* 見出しと太字を真っ白に */
#app .content h1,
#app .content h2,
#app .content h3,
#app .content h4,
#app .content h5,
#app .content h6,
#app .content strong,
#app .content b {
    color: #ffffff !important;
}

/* 通常のテキストやリストを明るいグレーに */
#app .content p,
#app .content li {
    color: #e0e0e0;
}

/* 引用ブロック（>）のデザインをダークテーマに合わせる */
#app .content blockquote {
    background-color: rgba(0, 0, 0, 0.4);
    /* 背景を少し暗く */
    border-left: 5px solid #f39c12;
    /* 左側の線をオレンジ（アクセント）に */
    color: #cccccc;
}

/* リンクの色を少し明るいブルーにして見やすく */
#app .content a {
    color: #66b3ff;
    text-decoration: none;
}

#app .content a:hover {
    color: #99ccff;
    text-decoration: underline;
}

/* テーブル（表）を使った場合の文字色対応 */
#app .content table thead th,
#app .content table tbody td {
    color: #e0e0e0;
    border-color: #555555;
}