/* ============================================================
 *
 *  深淵通信カテゴリー｜深淵モード（v2.0）
 *  ----------------------------------------------------------
 *  カテゴリーID 27（深淵通信）または その子カテゴリーに属する
 *  単一記事 / アーカイブページに body.shinen-mode 経由で適用される。
 *
 *  外部CSSファイル化日：2026-05-20
 *  読み込み条件：body.shinen-mode 付与時のみ（functions.php 側で制御）
 *
 *  含まれるもの：
 *   - 旧 wp-content/themes/tcd083-child/style.css 行17-526
 *   - 旧 深淵通信記事の「カスタムCSS（この投稿のみ）」欄にあった
 *     サイドバー検索ボックスの::before修正（記事ごとに重複コピペされていた分）
 *
 *  TODO（旧style.cssから引き継ぎ）：
 *   - お問い合わせフォーム（CF7）の枠の深淵化
 *     → ANTHEMの「カスタマイズ > 追加CSS」側で既に実装済み（v1.7）
 *
 * ============================================================ */


/* --- 1. 全体背景：濃紺×黒紫グラデーション ------------------ */
body.shinen-mode {
  background: linear-gradient(135deg, #0a0e1f 0%, #15102a 50%, #1a0e22 100%) !important;
  background-attachment: fixed !important;
  color: #c8c5d4 !important;
}


/* --- 2. ラッパー要素の背景透過 ------------------------------ */
body.shinen-mode #blog_single,
body.shinen-mode div#blog_single,
html body.shinen-mode #blog_single {
  background: transparent !important;
}
body.shinen-mode #blog_archive,
body.shinen-mode div#blog_archive,
html body.shinen-mode #blog_archive {
  background: transparent !important;
}
body.shinen-mode #container,
body.shinen-mode #main_contents,
body.shinen-mode #main_col,
body.shinen-mode #side_col,
body.shinen-mode #content,
body.shinen-mode #archive,
body.shinen-mode #blog_list,
body.shinen-mode .archive_header,
body.shinen-mode article,
body.shinen-mode .post_content {
  background: transparent !important;
}


/* --- 3. 本文テキスト ---------------------------------------- */
body.shinen-mode .post_content,
body.shinen-mode .post_content p,
body.shinen-mode .post_content li {
  color: #c8c5d4 !important;
  line-height: 2.0;
}
body.shinen-mode .post_content h1,
body.shinen-mode .post_content h2,
body.shinen-mode .post_content h3,
body.shinen-mode .post_content h4,
body.shinen-mode .post_title_area h1,
body.shinen-mode .post_title_area h2,
body.shinen-mode .post_title,
body.shinen-mode .post_title_area .post_title,
body.shinen-mode .single_title,
body.shinen-mode .entry-title {
  color: #e8e4f0 !important;
}
body.shinen-mode a {
  color: #b08a30 !important;
}
body.shinen-mode a:hover {
  color: #d4a84a !important;
}
body.shinen-mode .post_content hr,
body.shinen-mode .shinentu-wrap hr {
  border-color: rgba(176, 138, 48, 0.3) !important;
}


/* --- 4. 深淵通信の記事HTML（shinentu-wrap）専用調整 ---------- */
body.shinen-mode .shinentu-wrap,
body.shinen-mode .shinentu-wrap p {
  color: #c8c5d4 !important;
}
body.shinen-mode .shinentu-wrap .sig {
  color: #8a8598 !important;
}
body.shinen-mode .claude-position {
  border-top-color: rgba(232, 228, 240, 0.3) !important;
}
body.shinen-mode .claude-position__label {
  color: #b08a30 !important;
}
body.shinen-mode .claude-position p {
  color: #c8c5d4 !important;
}


/* --- 5. パンくずリスト・メタ情報 ---------------------------- */
body.shinen-mode .breadcrumbs,
body.shinen-mode .breadcrumb,
body.shinen-mode #breadcrumb,
body.shinen-mode .post_meta,
body.shinen-mode .meta {
  color: #8a8598 !important;
}
body.shinen-mode .breadcrumbs a,
body.shinen-mode .breadcrumb a,
body.shinen-mode #breadcrumb a {
  color: #b08a30 !important;
}


/* --- 6. サイドバー基本（見出し・区切り線） -------------------- */
body.shinen-mode .l-sidebar,
body.shinen-mode #sidebar,
body.shinen-mode .sidebar {
  background: transparent !important;
}
body.shinen-mode #side_col .widget_headline,
body.shinen-mode #side_col .widget_headline span,
body.shinen-mode .widget_headline,
body.shinen-mode .widget_headline span,
html body.shinen-mode #side_col .widget_headline span {
  color: #d4a84a !important;
}
body.shinen-mode .widget_headline::after,
body.shinen-mode #side_col .widget_headline::after {
  background: rgba(176, 138, 48, 0.2) !important;
}


/* --- 7. カテゴリー一覧ページ：記事カード -------------------- */
body.shinen-mode #blog_archive .item,
body.shinen-mode #blog_archive article.item,
body.shinen-mode #blog_list .item {
  background: transparent !important;
  border: none !important;
}
body.shinen-mode #blog_archive .item h2,
body.shinen-mode #blog_archive .item h3,
body.shinen-mode #blog_archive .item .post_title,
body.shinen-mode #blog_archive .item .item_title {
  color: #e8e4f0 !important;
}
body.shinen-mode #blog_archive .item p,
body.shinen-mode #blog_archive .item .item_desc,
body.shinen-mode #blog_archive .item .excerpt {
  color: #c8c5d4 !important;
}
body.shinen-mode #blog_archive .item .date,
body.shinen-mode #blog_archive .item .meta,
body.shinen-mode #blog_archive .item time {
  color: #8a8598 !important;
}


/* --- 8. 書き手アバター：深淵に飲まれずベージュのまま残す ---- */
body.shinen-mode .ut-clau-wrap,
body.shinen-mode .ut-author-card {
  background: rgba(244, 235, 216, 0.95) !important;
}


/* --- 9. 記事ナビ（前・次の記事）------------------------------ */
body.shinen-mode #next_prev_post {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 50px 0 0 !important;
}
body.shinen-mode #next_prev_post .item {
  flex: 1 1 0 !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
body.shinen-mode #next_prev_post .item a {
  background: rgba(20, 16, 38, 0.4) !important;
  border: 1px solid rgba(176, 138, 48, 0.2) !important;
  color: #c8c5d4 !important;
  display: block;
}
body.shinen-mode #next_prev_post .item a:hover {
  background: rgba(176, 138, 48, 0.15) !important;
  color: #d4a84a !important;
}
body.shinen-mode #next_prev_post .item .title,
body.shinen-mode #next_prev_post .item .nav {
  color: #c8c5d4 !important;
}
body.shinen-mode #next_prev_post .item .title span {
  color: #e8e4f0 !important;
}


/* --- 10. SNSシェア・コピーURL・コメント欄ラッパー ----------- */
body.shinen-mode #single_share_bottom,
body.shinen-mode .single_share,
body.shinen-mode #single_copy_title_url_bottom,
body.shinen-mode .single_copy_title_url,
body.shinen-mode #comments,
body.shinen-mode #comment_header,
body.shinen-mode .commentlist_wrap {
  background: transparent !important;
}
body.shinen-mode #single_copy_title_url_bottom .copy_btn,
body.shinen-mode .single_copy_title_url button,
body.shinen-mode .copy_title_url_btn {
  background: rgba(20, 16, 38, 0.4) !important;
  border: 1px solid rgba(176, 138, 48, 0.2) !important;
  color: #c8c5d4 !important;
}


/* --- 11. （欠番）-------------------------------------------- */
/*    旧: フッター記事リスト レイアウト修正                    */
/*    削除理由: ANTHEM素のfloatレイアウトで既に3列横並びになる  */
/*             ため、flex 上書きは不要だった（v1.4で削除）     */


/* --- 12. サイドバー：おすすめ記事ウィジェット（タブ式） ----- */
body.shinen-mode .widget_tab_post_list_button {
  background: rgba(20, 16, 38, 0.4) !important;
}
body.shinen-mode .widget_tab_post_list_button .tab1,
body.shinen-mode .widget_tab_post_list_button .tab2 {
  background: rgba(20, 16, 38, 0.6) !important;
  color: #8a8598 !important;
  border-color: rgba(176, 138, 48, 0.2) !important;
}
body.shinen-mode .widget_tab_post_list_button .tab1.active,
body.shinen-mode .widget_tab_post_list_button .tab2.active {
  background: rgba(176, 138, 48, 0.2) !important;
  color: #d4a84a !important;
}
body.shinen-mode .widget_tab_post_list,
body.shinen-mode .widget_tab_post_list li,
body.shinen-mode .widget_tab_post_list li a {
  background: transparent !important;
}
body.shinen-mode .widget_tab_post_list .title_area {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.shinen-mode .widget_tab_post_list .title,
body.shinen-mode .widget_tab_post_list .title span {
  color: #c8c5d4 !important;
}
body.shinen-mode .widget_tab_post_list a:hover .title,
body.shinen-mode .widget_tab_post_list a:hover .title span {
  color: #d4a84a !important;
}


/* --- 13. サイドバー：カテゴリーリスト ------------------------ */
body.shinen-mode .tcd_category_list,
body.shinen-mode .tcd_category_list li,
body.shinen-mode .tcd_category_list li a {
  background: transparent !important;
}
body.shinen-mode .tcd_category_list a {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #c8c5d4 !important;
}
body.shinen-mode .tcd_category_list a:hover {
  color: #d4a84a !important;
}


/* --- 14. サイドバー：ポストスライダーウィジェット ---------- */

/* 14-1. スライダー本体の白背景＆白枠を撃破 */
body.shinen-mode .post_slider_widget .post_slider {
  background: rgba(20, 16, 38, 0.4) !important;
  border: none !important;
}

/* 14-2. スライド内のテキスト色 */
body.shinen-mode .post_slider_widget .post_slider .title_area .title,
body.shinen-mode .post_slider_widget .post_slider .title_area .title span,
body.shinen-mode .post_slider_widget .post_slider .title_area p {
  color: #e8e4f0 !important;
}

/* 14-3. ホバー時のテキスト強調 */
body.shinen-mode .post_slider_widget .post_slider a:hover .title,
body.shinen-mode .post_slider_widget .post_slider a:hover .title span {
  color: #f0d68a !important;
}

/* 14-4. slick-dots（●●●）の色 */
body.shinen-mode .post_slider_widget .slick-dots li button:before {
  color: rgba(176, 138, 48, 0.4) !important;  /* 非アクティブドット：薄ゴールド */
}
body.shinen-mode .post_slider_widget .slick-dots li.slick-active button:before {
  color: #d4a84a !important;  /* アクティブドット：明るいゴールド */
}


/* --- 15. 関連記事・コメント見出し帯（黒のり問題）の深淵化 --- */
body.shinen-mode #related_post .headline,
body.shinen-mode #comments .headline {
  background: rgba(176, 138, 48, 0.15) !important;
  color: #d4a84a !important;
}
body.shinen-mode #related_post .title_area {
  border-bottom-color: rgba(176, 138, 48, 0.2) !important;
  border-right-color: rgba(176, 138, 48, 0.2) !important;
}


/* --- 16. コメント欄：タブのアンバーゴールド3段階制御 -------- */
body.shinen-mode #comment_tab {
  background: transparent !important;
}
/* 通常状態：薄金 */
body.shinen-mode #comment_tab li,
body.shinen-mode #comment_tab li a {
  background: rgba(176, 138, 48, 0.05) !important;
  color: #c8c5d4 !important;
}
/* ホバー状態：中金 */
body.shinen-mode #comment_tab li:hover,
body.shinen-mode #comment_tab li:hover a {
  background: rgba(176, 138, 48, 0.12) !important;
  color: #d4a84a !important;
  cursor: pointer !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}
/* アクティブ状態：濃金（a まで含む詳細度強化版） */
body.shinen-mode #comment_tab li.active,
body.shinen-mode #comment_tab .active,
body.shinen-mode #comment_tab li.active a,
body.shinen-mode #comment_tab .active a {
  background: rgba(176, 138, 48, 0.2) !important;
  color: #d4a84a !important;
}


/* --- 17. コメントフォーム：入力欄＆ボタンの深淵化 ----------- */
body.shinen-mode .comment_form_wrapper {
  background: rgba(20, 16, 38, 0.4) !important;
  border: 1px solid rgba(176, 138, 48, 0.15) !important;
}
body.shinen-mode #comment_user_login,
body.shinen-mode #comment_user_login p {
  color: #c8c5d4 !important;
}
body.shinen-mode #comment_textarea textarea,
body.shinen-mode textarea#comment {
  background: rgba(10, 14, 31, 0.6) !important;
  border: 1px solid rgba(176, 138, 48, 0.2) !important;
  color: #e8e4f0 !important;
  caret-color: #d4a84a !important;
}
body.shinen-mode #comment_textarea textarea:focus,
body.shinen-mode textarea#comment:focus {
  border-color: rgba(176, 138, 48, 0.5) !important;
  outline: none !important;
}
body.shinen-mode #submit,
body.shinen-mode input#submit,
body.shinen-mode #submit_comment_wrapper #submit,
body.shinen-mode #submit_comment_wrapper input,
body.shinen-mode #respond #submit,
body.shinen-mode #respond input[type="submit"] {
  background: rgba(176, 138, 48, 0.2) !important;
  border: 1px solid rgba(176, 138, 48, 0.3) !important;
  color: #d4a84a !important;
  cursor: pointer !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}
body.shinen-mode #submit:hover,
body.shinen-mode input#submit:hover,
body.shinen-mode #submit_comment_wrapper #submit:hover,
body.shinen-mode #submit_comment_wrapper input:hover,
body.shinen-mode #respond #submit:hover,
body.shinen-mode #respond input[type="submit"]:hover {
  background: rgba(176, 138, 48, 0.35) !important;
  color: #f0d68a !important;
}

/* 17-2. コメントフォーム：input欄の深淵化（詳細度強化版） */
body.shinen-mode #guest_info input[type="text"],
body.shinen-mode #guest_info input[type="email"],
body.shinen-mode #guest_info input[type="url"],
body.shinen-mode #guest_info input {
  background: rgba(20, 16, 38, 0.6) !important;
  border: 1px solid rgba(176, 138, 48, 0.3) !important;
  color: #e8e4f0 !important;
  caret-color: #d4a84a !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* 17-3. フォーカス時の枠を深淵ゴールドに */
body.shinen-mode #guest_info input[type="text"]:focus,
body.shinen-mode #guest_info input[type="email"]:focus,
body.shinen-mode #guest_info input[type="url"]:focus,
body.shinen-mode #guest_info input:focus {
  border: 1px solid #d4a84a !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(212, 168, 74, 0.3) !important;
}

/* 17-4. textarea のフォーカス時を input と統一 */
body.shinen-mode #comment_textarea textarea:focus,
body.shinen-mode #commentform textarea:focus,
body.shinen-mode .comment-form textarea:focus {
  border: 1px solid #d4a84a !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(212, 168, 74, 0.3) !important;
}

/* 17-5. textarea 通常時を input と統一 */
body.shinen-mode #comment_textarea textarea,
body.shinen-mode textarea#comment {
  border: 1px solid rgba(176, 138, 48, 0.3) !important;
}


/* --- 18. サイドバー：最近の記事ウィジェット（styled_post_list1） --- */
body.shinen-mode .styled_post_list1,
body.shinen-mode .styled_post_list1 li,
body.shinen-mode .styled_post_list1 li a {
  background: transparent !important;
}
body.shinen-mode .styled_post_list1 .title_area {
  background: rgba(20, 16, 38, 0.4) !important;
  border-color: rgba(176, 138, 48, 0.15) !important;
}
body.shinen-mode .styled_post_list1 .title,
body.shinen-mode .styled_post_list1 .title span,
body.shinen-mode .styled_post_list1 .title_area .title {
  color: #c8c5d4 !important;
}
body.shinen-mode .styled_post_list1 a:hover .title,
body.shinen-mode .styled_post_list1 a:hover .title span {
  color: #d4a84a !important;
}


/* --- 19. サイドバー：アーカイブウィジェット（dropdown式） --- */
body.shinen-mode .tcdw_archive_list_widget,
body.shinen-mode .p-dropdown,
body.shinen-mode .p-dropdown__list,
body.shinen-mode .p-dropdown__list li,
body.shinen-mode .p-dropdown__list li a {
  background: transparent !important;
}
body.shinen-mode .p-dropdown__title {
  background: rgba(20, 16, 38, 0.4) !important;
  border: 1px solid rgba(176, 138, 48, 0.15) !important;
  color: #c8c5d4 !important;
  cursor: pointer !important;
}
body.shinen-mode .p-dropdown__title.is-active {
  color: #d4a84a !important;
  border-color: rgba(176, 138, 48, 0.25) !important;
}
body.shinen-mode .p-dropdown__list li a {
  background: rgba(20, 16, 38, 0.4) !important;
  border-color: rgba(176, 138, 48, 0.15) !important;
  color: #c8c5d4 !important;
}
body.shinen-mode .p-dropdown__list li a:hover {
  background: rgba(176, 138, 48, 0.1) !important;
  color: #d4a84a !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}


/* --- 20. サイドバー：投稿カレンダーウィジェット ------------- */
/*    あえてゴールドではなく深淵紫（#512F5B）の円ボタンに      */
/*    深淵モードの背景グラデーションと同系統で「暦の質感」を    */
body.shinen-mode #wp-calendar tbody a {
  background: #512F5B !important;
  color: #d4a84a !important;
}
body.shinen-mode #wp-calendar tbody a:hover {
  background: #6b3e78 !important;
  color: #f0d68a !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}
body.shinen-mode #wp-calendar tbody td {
  color: #c8c5d4 !important;
}
body.shinen-mode #wp-calendar thead th {
  color: #8a8598 !important;
}
body.shinen-mode #wp-calendar caption {
  color: #d4a84a !important;
}
body.shinen-mode #wp-calendar-nav a,
body.shinen-mode .wp-calendar-nav a {
  color: #b08a30 !important;
}
body.shinen-mode #wp-calendar-nav a:hover,
body.shinen-mode .wp-calendar-nav a:hover {
  color: #d4a84a !important;
}


/* ============================================================
 *
 *  サイドバー検索ボックス｜深淵モード対応（v2.0統合版）
 *  ----------------------------------------------------------
 *  旧構成では3箇所に分散していた検索ボックス修正を、ここに統合：
 *   1. style.css 末尾の暗色版（shinen-mode かつ touhei/clapus でない）
 *   2. 深淵通信記事の「カスタムCSS」欄の ::before content 修正
 *   3. クラパス・クラウ記事の「カスタムCSS」欄の同じコピー
 *  
 *  共通の ::before content と input透明化は shinen-mode 全てに適用、
 *  暗色見た目は :not() で touhei/clapus を除外して制御。
 *
 * ============================================================ */

/* 共通：通常モードの .submit_button::before 定義を深淵モードでも完全再現 */
body.shinen-mode #searchform .submit_button::before {
  text-indent: 0 !important;
  display: block !important;
  width: 50px !important;
  height: 60px !important;
  line-height: 60px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 1 !important;
  position: absolute !important;
  font-family: 'design_plus' !important;
  color: #333 !important;
  font-size: 18px !important;
  content: '\e915' !important;
  right: 0px !important;
  top: 0px !important;
}

/* 共通：submit input本体を透明化（青ボタンを消す） */
body.shinen-mode #searchform #searchsubmit {
  background: transparent !important;
  border: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 50px !important;
  height: 60px !important;
  z-index: 2 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* 暗色版：clapus/clau（白）と touhei（群青）を除外して、暗色だけに当てる */

/* 検索フォーム全体の枠とBG */
body.shinen-mode:not(.shinen-clapus-mode):not(.clau-mode):not(.touhei-mode) #searchform {
  background: #0E0E22 !important;
  border: 1px solid #3F3327 !important;
  transition: border-color 0.3s ease !important;
}

/* 入力テキストフィールド */
body.shinen-mode:not(.shinen-clapus-mode):not(.clau-mode):not(.touhei-mode) #searchform input[type="text"] {
  background: transparent !important;
  color: #e8e4f0 !important;
  border: none !important;
}

/* プレースホルダー */
body.shinen-mode:not(.shinen-clapus-mode):not(.clau-mode):not(.touhei-mode) #searchform input[type="text"]::placeholder {
  color: #7a7090 !important;
}

/* フォーカス時：枠を明るめゴールドに */
body.shinen-mode:not(.shinen-clapus-mode):not(.clau-mode):not(.touhei-mode) #searchform:focus-within {
  border-color: #d4a84a !important;
}

/* 虫眼鏡アイコン（::before）をゴールド化 */
body.shinen-mode:not(.shinen-clapus-mode):not(.clau-mode):not(.touhei-mode) #searchform .submit_button::before {
  color: #b08a30 !important;
}

/* 虫眼鏡ホバー時 */
body.shinen-mode:not(.shinen-clapus-mode):not(.clau-mode):not(.touhei-mode) #searchform .submit_button:hover::before {
  color: #d4a84a !important;
}

/* === 深淵モード CSS ここまで（v2.0） ========================== */
/* ============================================================
 *  サイドバー：記事の書き手ウィジェット｜深淵モード（v1.0）
 *  ----------------------------------------------------------
 *  ANTHEM追加CSSで「タイトル上辺＋左右＋下辺」のコの字囲みが
 *  実装されている前提で、その線色を深淵ゴールド薄めに置換する。
 *  カード本体のベージュ背景は触らない（深淵×ベージュの灯火）。
 * ============================================================ */

/* タイトル枠：深淵ゴールド薄め */
body.shinen-mode #side_col .widget_ut_author_widget .widget_headline {
  border-color: rgba(176, 138, 48, 0.3) !important;
}

/* タイトル文字色：深淵モードでも読みやすさ重視で元のダーク色維持 */
/* （ベージュ背景上の濃色なので、深淵モードでも視認性◎） */

/* カード本体の枠：深淵ゴールド薄め */
body.shinen-mode #side_col .widget_ut_author_widget .ut-clau-wrap {
  border-color: rgba(176, 138, 48, 0.3) !important;
}