/* --- 1. 背景：本物の「茶色レンガ」を再現 --- */
html, body {
    /* ベースの茶色 */
    background-color: #7a4a31 !important;
    
    /* CSSで描くレンガの目地（めじ） */
    background-image: 
        linear-gradient(335deg, #5c3a21 23px, transparent 23px),
        linear-gradient(155deg, #5c3a21 23px, transparent 23px),
        linear-gradient(335deg, #5c3a21 23px, transparent 23px),
        linear-gradient(155deg, #5c3a21 23px, transparent 23px) !important;
    background-size: 58px 58px !important;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px !important;
    background-attachment: fixed !important;
}

/* 紺色の重なりを完全に排除 */
#container, .wrap, .main, #content, .article {
    background-color: transparent !important;
}

/* --- 2. 文字の視認性：背景に負けない「縁取り」演出 --- */
/* 全体の文字に薄い黒影をつけて、茶色の背景でも白文字を浮かび上がらせる */
body, .article, .entry-content, .widget-title, .sidebar, .main, .menu-caption {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 0px 0px 5px rgba(0,0,0,0.5) !important;
}

/* リンク文字は「探偵のネクタイ」のような明るい黄色で強調 */
.article a, .sidebar a, .entry-title a {
    color: #ffeb3b !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,1) !important;
}

/* --- 3. コンテンツのまとまり（読みやすさの工夫） --- */
/* 記事本文のエリアに、ほんの少しだけ暗いフィルターをかけて文字をさらに読みやすく */
.main, .sidebar {
    background-color: rgba(0, 0, 0, 0.2) !important; /* レンガが透ける程度の薄い黒 */
    padding: 20px !important;
    border-radius: 10px;
}

/* --- 4. 記事カード（証拠品）のデザインは維持 --- */
.entry-card-wrap {
    background-color: #fdfaf1 !important; /* 明るい紙の色 */
    border: 3px solid #fff !important;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6) !important;
    transform: rotate(-1deg);
}

/* カード内の文字は影をつけず、ハッキリ黒で表示（書類っぽさ） */
.entry-card-wrap * {
    text-shadow: none !important;
    color: #1a1a1b !important;
}

/* --- 5. ヘッダーとアピールエリア --- */
.header, .appeal-area {
    background-color: rgba(0, 43, 91, 0.8) !important; /* 紺色を透過させてレンガを透かす */
    border-bottom: 5px solid #c3002f;
}
/* --- 1. スケジュール表（テーブル）を「捜査報告書」風にする --- */
/* 投稿本文内のテーブル（表）の背景を白っぽくして読みやすくします */
.entry-content table {
    background-color: rgba(255, 255, 255, 0.9) !important; /* 90%不透明の白 */
    color: #333 !important; /* 文字はハッキリした黒 */
    border: 2px solid #5c3a21 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

/* テーブルの見出し部分を少し強調 */
.entry-content table th {
    background-color: #f0f0f0 !important;
    border-bottom: 2px solid #5c3a21 !important;
    color: #000 !important;
    font-weight: bold;
}

/* テーブル内の文字影を消す（白背景なので影があると汚く見えるため） */
.entry-content table td, .entry-content table th {
    text-shadow: none !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
}

/* --- 2. 自己紹介（サイドバー）を「探偵のIDカード」風にする --- */
/* サイドバーのプロフィールウィジェットを強調 */
.author-box, .widget_text, .widget_profile {
    background-color: #fdfaf1 !important; /* 少し黄色味のある古い紙の色 */
    padding: 20px !important;
    border: 2px solid #fff !important;
    border-radius: 5px !important;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.5) !important;
    color: #333 !important;
    text-shadow: none !important; /* 影を消して読みやすく */
}

/* 自己紹介内のリンクやタイトルの色調整 */
.author-box .author-name, .widget-title {
    color: #1a1a1b !important;
    text-shadow: none !important;
}

/* プロフィール画像にフチをつけて写真っぽく */
.author-thumb img {
    border: 5px solid #fff !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
/* --- UI向上：文字エリアのメリハリ強化 --- */

/* 記事メインコンテンツとサイドバーの背景を白く浮かせ、文字をくっきりさせる */
.main, .sidebar {
    background-color: rgba(255, 255, 255, 0.92) !important; /* ほぼ白の背景を敷く */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    padding: 30px !important;
    border-radius: 4px !important;
    border: 1px solid #dcdcdc !important;
}

/* メインエリア内の文字色を「真っ黒」にして視認性を最大化 */
.main, .main p, .main li, .sidebar, .sidebar .widget {
    color: #1a1a1b !important;
    text-shadow: none !important; /* 背景が白いので影は不要 */
    line-height: 1.8 !important; /* 行間を広げて読みやすく */
}

/* 見出し（H2, H3）を「事件のタイトル」風に強調 */
.article h2, .article h3 {
    color: #c3002f !important; /* 探偵の赤 */
    border-left: 8px solid #002b5b !important;
    padding: 10px 15px !important;
    background-color: #f0f0f0 !important;
    margin-top: 40px !important;
}

/* リンクの色を「青」に戻して、直感的に「押せる」と分からせる（UIの基本） */
.article a {
    color: #0056b3 !important;
    text-decoration: underline !important;
}