/* =========================
   1. 基本の色（ライトモード / 白）
========================= */
body {
    font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    background: #f7f7f7;
    color: #333;
    margin: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* タイル */
.tile {
    background: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
}

.title {
    margin-top: 0;
    font-size: 28px;
    color: #111;
    line-height: 1.4;
}

/* カテゴリ・タグ */
.category { background: #e3f2fd; color: #0d47a1; }
.tags span { background: #ececec; color: #555; }

/* =========================
   2. 自動ダークモード（高コントラスト版）
========================= */
@media (prefers-color-scheme: dark) {
    body {
        /* フッター（黒）との差をつけるため少し明るいグレー */
        background: #1a1a1a; 
        color: #f5f5f5;
    }

    .tile {
        /* 背景より一段明るい色にして浮かせる */
        background: #2c2c2c; 
        border: 1px solid #444; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }

    .title {
        color: #ffffff;
    }

    /* メタ情報・日付 */
    .meta { border-bottom: 1px solid #444; }
    .category { background: #0d47a1; color: #ffffff; } /* 青を鮮やかに */
    .tags span { background: #444; color: #ccc; }
    .updated-date { color: #ddd; }
    .publish-date { color: #999; }

    /* 本文 (Toast UI Editor スタイル) */
    .content { color: #eeeeee; }
    
    .toastui-editor-contents h1,
    .toastui-editor-contents h2,
    .toastui-editor-contents h3 {
        border-bottom: 1px solid #444 !important;
        color: #ffffff !important;
    }

    .toastui-editor-dark.toastui-editor-contents p,
    .toastui-editor-dark.toastui-editor-contents li {
        color: #eeeeee !important;
    }

    /* PDFリンク */
    .pdf-link {
        background: #383838;
        border-left: 4px solid #6685ff;
        color: #ffffff;
    }
    .pdf-link:hover {
        background: #444444;
    }
    .pdf-link::before {
        background: #6685ff;
    }

    /* 戻るボタン */
    .back a { color: #aaa; }
    .back a:hover { color: #fff; }
}

/* =========================
   共通パーツ（その他）
========================= */
.meta {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 5px;
}

.category, .tags span {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
    line-height: 1; white-space: nowrap;
}

.updated-date, .publish-date { width: 100%; display: block; }
.updated-date { font-size: 14px; font-weight: 600; margin-top: 10px; }
.publish-date { font-size: 12px; margin-top: 4px; }

.content { font-size: 16px; line-height: 1.8; }
.toastui-editor-contents { background-color: transparent !important; font-family: inherit !important; }

.pdf-link {
    display: flex; align-items: center; padding: 14px 20px; margin-bottom: 12px;
    border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.2s;
}

.back { margin-top: 40px; text-align: center; }
.back a { display: inline-block; text-decoration: none; font-size: 15px; transition: color 0.2s; }

@media (max-width: 600px) {
    .tile { padding: 20px; }
    .title { font-size: 22px; }
}