/*
 * みいひのブログ — 和モダンの茶屋（2026-10）
 * テーマ（rebirth_free001）の HTML はそのままに、見た目だけを上からかぶせる。
 * このファイルを読み込まなければ元のピンクのデザインに戻る（scripts/build_static.py の inject_head）。
 *
 * 謎解きの手がかりに関わるものには触れない:
 *   - 記事本文の下線装飾 .q_underline（ピンクの線。色は記事側の style 属性で指定されている）
 *   - 記事本文の絵文字・画像・アイキャッチ #post_image
 *   - ヒントのポップアップの中身（文言・リンク先・5分間出ない仕組み）。見た目だけ下で和モダンにしている
 *   - クリアページ・おまけクロスワードの本文（ページ独自のデザインを持っている）
 */

:root {
  --kinari: #f7f3ea;
  --washi: #fdfbf6;
  --sumi: #2b2b2b;
  --sumi-soft: #5c564c;
  --kuromon: #1f1d1b;
  --sakura: #e9a1b2;
  --sakura-deep: #c2607c;
  --line: #e3dac7;
  --shadow: 0 6px 24px rgba(60, 45, 25, 0.08);
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  /* テーマ本来の書体。ポップアップとクリア・クロスワードのページはこちらのまま */
  --theme-font: Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}

/* ── 地 ─────────────────────────────────────── */
body {
  background-color: var(--kinari) !important;
  /* 和紙の地紋（ごく薄い） */
  background-image:
    radial-gradient(rgba(120, 100, 70, 0.035) 1px, transparent 1px),
    radial-gradient(rgba(120, 100, 70, 0.025) 1px, transparent 1px);
  background-size: 22px 22px, 37px 37px;
  background-position: 0 0, 11px 17px;
  color: var(--sumi);
}
body, input, textarea { font-family: var(--gothic); }
.rich_font, .p-vertical, .widget_headline, .post_list_title h3, #related_post h3,
#post_title .title, .design_headline1 { font-family: var(--mincho) !important; letter-spacing: 0.06em; }

/* 上端の帯：桜色の太帯 → 黒門の細い黒 */
#container:before { background-color: var(--kuromon) !important; height: 4px !important; }

/* ── グローバルメニュー ──────────────────────── */
#global_menu { background-color: var(--kuromon) !important; }
#global_menu > ul > li > a,
#global_menu > ul > li:first-of-type a {
  color: #efe8da !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  font-family: var(--mincho);
  letter-spacing: 0.12em;
}
#global_menu > ul > li > a:hover,
#global_menu > ul > li.current-menu-item > a { color: var(--sakura) !important; background: transparent !important; }
#global_menu ul ul a { background-color: var(--kuromon) !important; }
#global_menu ul ul a:hover { color: var(--sakura) !important; }

/* ── ヘッダー（ロゴとバナー） ─────────────────── */
#header, #header_top { background: var(--washi) !important; }
#header { border-bottom: 1px solid var(--line); }
#header_banner img { border-radius: 6px; box-shadow: var(--shadow); }

/* トップのスライダー */
#header_post_slider { background: transparent !important; }
#index_header_slider { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }

/* ── 本文の列 ───────────────────────────────── */
#main_contents { background: transparent !important; }
/* 枠はテーマと同じく .main_col_inner の1px だけ（幅を変えるとアイキャッチの位置合わせがずれる） */
#main_col, #article { background: transparent !important; }
.main_col_inner {
  background: var(--washi) !important;
  border-color: var(--line) !important;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* 帯の見出し（「最新記事」「関連記事」、固定ページのタイトル帯、パンくず）：ピンクの帯 → 生成りに墨文字と桜の罫 */
.post_list_title h3, #related_post h3, .article_top, #bread_crumb {
  background-color: transparent !important;
  color: var(--sumi) !important;
}
.post_list_title h3, #related_post h3 {
  border-bottom: 1px solid var(--line);
  position: relative;
}
.post_list_title h3:after, #related_post h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  background: var(--sakura-deep);
}
.article_top .title, #bread_crumb ul { background-color: transparent !important; color: var(--sumi) !important; }
#bread_crumb { border-bottom: 1px solid var(--line); }
#bread_crumb a, #bread_crumb span, #bread_crumb li:before, #bread_crumb li:after { color: var(--sumi-soft) !important; }
#bread_crumb a:hover { color: var(--sakura-deep) !important; }

/* 記事タイトル */
#post_title .title { color: var(--sumi); font-weight: 700; line-height: 1.6; }

/* 一覧のカード（トップのスライダー .header_slider も .post_list なので外す） */
.post_list:not(.header_slider) .item, #index_post_list .item, #related_post .item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.post_list:not(.header_slider) .item:hover, #index_post_list .item:hover, #related_post .item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.post_list:not(.header_slider) .item .title, #related_post .item .title { font-family: var(--mincho); color: var(--sumi); }
/* スライダーの見出しは白のまま、明朝にして影を少し */
.header_slider .title { color: #fff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }

/* 前後の記事 */
#next_prev_post .item { border-color: var(--line) !important; }
#next_prev_post a { color: var(--sumi) !important; }
#next_prev_post a:hover { color: var(--sakura-deep) !important; }

/* ── 記事本文：文字の大きさと行間だけ。装飾（.q_underline など）には触れない ──
   クリアページ（page-id-124）とおまけクロスワード（page-id-181）は本文が独自のデザインなので掛けない */
body:not(.page-id-124):not(.page-id-181) .post_content { color: var(--sumi); line-height: 2.05; letter-spacing: 0.03em; }
body:not(.page-id-124):not(.page-id-181) .post_content > p { margin-bottom: 1.6em; }
/* 色を変えるのは class の無い普通の文字リンクだけ。ボタン（.store-youtube-btn など）は各ページのデザインのまま */
body:not(.page-id-124):not(.page-id-181) .post_content a:not([class]), .custom-html-widget a:not([class]) { color: var(--sakura-deep) !important; }
body:not(.page-id-124):not(.page-id-181) .post_content a:not([class]):hover, .custom-html-widget a:not([class]):hover { color: var(--kuromon) !important; }
.page-id-124 .post_content, .page-id-181 .post_content { font-family: var(--theme-font); color: #000; }

/* ── ヒントのポップアップ（Popup Maker #pum-255）：紺色 → 生成りのカード ──
   紺色は WordPress の追加CSS（ページ内の style#wp-custom-css、!important 付き）なので、#pum-255 を付けて上書きする */
#pum-255 .pum-container {
  background: var(--washi) !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--sakura-deep) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 40px rgba(60, 45, 25, 0.2) !important;
  padding: 26px 24px 24px !important;
  font-family: var(--gothic);
}
#pum-255 .pum-title {
  color: var(--sakura-deep) !important;
  font-family: var(--mincho) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.14em !important;
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}
#pum-255 .pum-content {
  color: var(--sumi-soft) !important;
  font-size: 13.5px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.04em !important;
}
#pum-255 .pum-content p { margin-bottom: 18px; }
/* 「ヒントはこちらから」：灰色の地に青文字 → 桜色の地に白文字 */
#pum-255 .pum-content a.q_custom_button {
  width: 100% !important;
  height: auto !important;
  min-height: 48px;
  line-height: 48px;
  background: var(--sakura-deep) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 14px rgba(194, 96, 124, 0.35);
}
#pum-255 .pum-content a.q_custom_button:after { content: "\00a0\00a0→"; }
#pum-255 .pum-content a.q_custom_button:before { background: var(--kuromon) !important; }
#pum-255 .pum-content a.q_custom_button:hover { background: var(--kuromon) !important; color: #fff !important; }
/* CLOSE：水色の角タブ → カードの上辺にのせた小さな札（本文の「CLOSEした場合」と合わせて文言は CLOSE のまま） */
#pum-255 .pum-content + .pum-close {
  top: -13px !important;
  right: 16px !important;
  height: auto !important;
  padding: 5px 12px !important;
  line-height: 1 !important;
  font-family: var(--gothic) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  color: var(--sumi) !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(60, 45, 25, 0.12) !important;
  opacity: 1 !important;
}
#pum-255 .pum-content + .pum-close:hover { color: #fff !important; background: var(--sakura-deep) !important; border-color: var(--sakura-deep) !important; }

/* ── サイドバー：桜色の柱 → 生成りの縦長カード ─── */
#side_col {
  background-color: var(--washi) !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
#side_col .widget_headline {
  background: transparent !important;
  color: var(--sumi) !important;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px !important;
}
.category_list_widget li a, #side_col .styled_post_list1_widget li a {
  background-color: #fff !important;
  color: var(--sumi) !important;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.category_list_widget li a:hover, #side_col .styled_post_list1_widget li a:hover { color: var(--sakura-deep) !important; border-color: var(--sakura); }
#side_col .styled_post_list1_widget .title { color: var(--sumi) !important; }

/* ── フッター：黒門 ──────────────────────────── */
#footer { background-color: var(--kuromon) !important; color: #d9d1c1; }
#footer a, #footer .widget_headline, #footer_widget .widget_headline { color: #efe8da !important; background: transparent !important; }
#footer a:hover { color: var(--sakura) !important; }
#footer_bottom { border-color: rgba(255, 255, 255, 0.1) !important; }
#copyright { color: #9d9585; letter-spacing: 0.1em; }

/* ページ上部へ戻る */
#return_top, #return_top a { background-color: var(--sakura-deep) !important; }

/* ページ送り */
.page_navi span.current, .page_navi a:hover { background-color: var(--kuromon) !important; border-color: var(--kuromon) !important; }

/* ── スマホのメニュー ────────────────────────── */
#drawer_menu { background: var(--kuromon) !important; }
#drawer_menu a, #mobile_menu a { color: #efe8da !important; border-color: rgba(255, 255, 255, 0.1) !important; }
#menu_button span, #menu_button span:before, #menu_button span:after { background-color: var(--sumi) !important; }

@media screen and (max-width: 750px) {
  .main_col_inner { border-radius: 0; box-shadow: none; }
  #side_col { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
}