/**
 * dark-mode.css
 * デジタルツール比較ナビ — ダークモード対応スタイルシート
 * html[data-theme="dark"] で有効になる全サイト共通のオーバーライド
 */

/* ========================================
   CSS 変数（テーマカラー定義）
   ----------------------------------------
   設計思想：「映画館の暗さ」ではなく
   「夜の読書灯」くらいの柔らかい暗さ。
   ・背景は黒に近づけすぎない（#1e2030前後）
   ・ヘッダー/フッターはページと同系色（真っ黒NG）
   ・テキストは純白でなくクリーム系で目に優しく
   ・コントラスト比 7〜9:1 を目標（WCAG AA+）
   ======================================== */
:root {
  --dm-bg:           #1e2030;   /* ダークネイビー—深すぎない */
  --dm-surface:      #262840;   /* カード・記事本文の面 */
  --dm-surface-2:    #2e3252;   /* 一段高いサーフェス */
  --dm-border:       #3e4268;   /* 境界線—控えめに */
  --dm-text:         #bcc8e8;   /* オフホワイト—白すぎない */
  --dm-text-muted:   #8090b8;   /* 補足テキスト */
  --dm-link:         #82aaff;   /* 柔らかブルー */
  --dm-link-hover:   #adc8ff;
  --dm-accent:       #7090e0;
  --dm-header-bg:    #191b2e;   /* 背景より少し暗め—黒はNG */
  --dm-nav-bg:       #191b2e;
  --dm-footer-bg:    #161828;   /* フッターも同系統 */
  --dm-card-shadow:  0 2px 10px rgba(0,0,0,.25);  /* 控えめな影 */
  --dm-input-bg:     #262840;
}

/* ========================================
   ダークモード トグルボタン
   ======================================== */
#dm-toggle {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
  transition: background .25s, transform .2s, box-shadow .2s;
  background: #2e3252;  /* サーフェスと同系統で馴染む */
  color: #fcd34d;       /* 黄色は少し柔らかく */
}
#dm-toggle:hover {
  transform: scale(1.08);
  background: #363a60;
  box-shadow: 0 5px 18px rgba(0,0,0,.35);
}
html:not([data-theme="dark"]) #dm-toggle {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
html:not([data-theme="dark"]) #dm-toggle:hover {
  background: #f0f4ff;
}
/* スマホ：Cocoonフッターメニューの上に出す */
@media (max-width: 768px) {
  #dm-toggle {
    bottom: 70px;  /* .mobile-menu-buttons (~50px) の上に */
  }
}

/* ========================================
   ダークモード本体（html[data-theme="dark"]）
   ======================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Cocoon CSS変数もまとめて上書き */
  --cocoon-text-color:         var(--dm-text);
  --cocoon-thin-color:         var(--dm-text-muted);
  --cocoon-x-thin-color:       var(--dm-text-muted);
  --cocoon-basic-border-color: var(--dm-border);
}

html[data-theme="dark"] body {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* ========================================
   ★ テキスト全体強制ルール
   ----------------------------------------
   inline <style> の !important にも確実に
   勝つため、全要素に一括適用する。
   「色が意味を持つ要素」は下の除外ブロックで戻す。
   ※ :not() チェーン形式で旧ブラウザ互換を確保
   ======================================== */
html[data-theme="dark"] *:not(.cta-btn):not(.cta-btn-blue):not(.cta-btn-green):not(.cta-btn-rakuten):not(.rec-badge):not(.cat-label):not(.hero-badge):not(.hero-tag):not(.step-number):not(.rank-label) {
  color: #e8ecf8 !important;
}

/* --- 除外①：CTAボタン・バッジ類は白文字のまま --- */
html[data-theme="dark"] .cta-btn,
html[data-theme="dark"] .cta-btn-blue,
html[data-theme="dark"] .cta-btn-green,
html[data-theme="dark"] .cta-btn-rakuten {
  color: #fff !important;
}

/* --- 除外②：補足テキスト（スニペット・日付・メタ）は少し落とす --- */
html[data-theme="dark"] .entry-card-snippet,
html[data-theme="dark"] .entry-card-meta,
html[data-theme="dark"] .post-date,
html[data-theme="dark"] .entry-category,
html[data-theme="dark"] .card-desc,
html[data-theme="dark"] small,
html[data-theme="dark"] .home-cat-sub {
  color: #94a3b8 !important;
}

/* --- 除外③：リンクは青系で識別できるように --- */
html[data-theme="dark"] a:not(.cta-btn):not(.cta-btn-blue):not(.cta-btn-green):not(.cta-btn-rakuten):not(.entry-card-wrap):not(.article-card) {
  color: #82aaff !important;
}
html[data-theme="dark"] a:not(.cta-btn):not(.cta-btn-blue):not(.cta-btn-green):not(.cta-btn-rakuten):not(.entry-card-wrap):not(.article-card):hover {
  color: #adc8ff !important;
}

/* --- Cocoon: ヘッダー・ナビ・フッター --- */
html[data-theme="dark"] .header-container,
html[data-theme="dark"] .site-header-inner {
  background-color: var(--dm-header-bg) !important;
  background: var(--dm-header-bg) !important;
}
html[data-theme="dark"] .navi,
html[data-theme="dark"] .navi-in,
html[data-theme="dark"] .navi-in > ul,
html[data-theme="dark"] #navi {
  background-color: var(--dm-nav-bg) !important;
}
html[data-theme="dark"] .navi-in > ul > li > a {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .navi-in > ul > li:hover > a {
  background: var(--dm-surface) !important;
}
html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer-container,
html[data-theme="dark"] #footer {
  background-color: var(--dm-footer-bg) !important;
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .footer a,
html[data-theme="dark"] #footer a {
  color: #93c5fd !important;
}

/* ========================================
   Cocoon スマホ底部フッターメニュー
   dark mode でボタン背景が明るいまま残る問題を修正
   ======================================== */
html[data-theme="dark"] .mobile-footer-menu-buttons,
html[data-theme="dark"] .mobile-menu-buttons {
  background-color: var(--dm-nav-bg) !important;
  border-top-color: var(--dm-border) !important;
}
html[data-theme="dark"] .mobile-footer-menu-buttons .menu-button-in,
html[data-theme="dark"] .mobile-menu-buttons .menu-button-in {
  background-color: transparent !important;
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .mobile-footer-menu-buttons .menu-caption,
html[data-theme="dark"] .mobile-menu-buttons .menu-caption {
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .mobile-footer-menu-buttons a,
html[data-theme="dark"] .mobile-menu-buttons a {
  color: var(--dm-text-muted) !important;
}

/* --- Cocoon: メインコンテンツ背景 --- */
html[data-theme="dark"] .main,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .content-in {
  background-color: var(--dm-bg) !important;
}
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .article,
html[data-theme="dark"] .post {
  background-color: var(--dm-surface) !important;
  border-radius: 8px;
}

/* --- Cocoon: カード --- */
html[data-theme="dark"] .entry-card-wrap,
html[data-theme="dark"] .a-wrap,
html[data-theme="dark"] .widget-entry-card {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: var(--dm-card-shadow) !important;
  color: var(--dm-text) !important;
}
/* カードタイトル：タイトルは本文より明るく・確実に読める白系 */
html[data-theme="dark"] .entry-card-title,
html[data-theme="dark"] .card-title.e-card-title,
html[data-theme="dark"] .entry-card-wrap .entry-card-title,
html[data-theme="dark"] .entry-card-wrap .card-title,
html[data-theme="dark"] .entry-card-wrap h2,
html[data-theme="dark"] .entry-card-wrap h3 {
  color: #e8ecf8 !important;  /* 本文(#bcc8e8)より明るい—タイトルとして目立つ */
}
html[data-theme="dark"] .entry-card-snippet,
html[data-theme="dark"] .entry-card-wrap .entry-card-snippet {
  color: #94a3b8 !important;
}

/* home-cat-grid ダークモード（index.html inline styleにも直接書いているので二重保険） */
html[data-theme="dark"] .home-cat-grid .entry-card-title,
html[data-theme="dark"] .home-cat-grid .dh-cat-card-title,
html[data-theme="dark"] .home-cat-grid h2,
html[data-theme="dark"] .home-cat-grid h3 {
  color: #e8ecf8 !important;
}
html[data-theme="dark"] .home-cat-grid .entry-card-snippet {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .home-cat-grid .entry-card-meta,
html[data-theme="dark"] .home-cat-grid .post-date,
html[data-theme="dark"] .home-cat-grid .entry-date {
  color: #7090b8 !important;
  border-top-color: var(--dm-border) !important;
}

/* --- Cocoon: サイドバー --- */
html[data-theme="dark"] .widget,
html[data-theme="dark"] .widget-wrap,
html[data-theme="dark"] .sidebar .widget {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .widgettitle {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}

/* --- サイドバー カテゴリー・タグリスト 白背景強制解除 ---
     Cocoon CSS が li・a に白背景を付けるのをダークモードで上書き */
html[data-theme="dark"] .sidebar ul,
html[data-theme="dark"] .sidebar li,
html[data-theme="dark"] .widget ul li,
html[data-theme="dark"] .widget-sidebar ul li,
html[data-theme="dark"] .wp-block-categories-list li,
html[data-theme="dark"] .widget_categories li,
html[data-theme="dark"] .widget_archive li,
html[data-theme="dark"] .widget_recent_entries li,
html[data-theme="dark"] .widget_nav_menu li {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
/* リスト内リンク */
html[data-theme="dark"] .sidebar ul li a,
html[data-theme="dark"] .widget ul li a,
html[data-theme="dark"] .wp-block-categories-list a,
html[data-theme="dark"] .widget_categories a,
html[data-theme="dark"] .widget_archive a,
html[data-theme="dark"] .widget_recent_entries a {
  color: #93c5fd !important;   /* 柔らかブルーで視認性確保 */
  background-color: transparent !important;
}
html[data-theme="dark"] .sidebar ul li a:hover,
html[data-theme="dark"] .widget ul li a:hover {
  color: #bfdbfe !important;
  background-color: var(--dm-surface-2) !important;
}
/* Cocoon のカテゴリーウィジェット見出し */
html[data-theme="dark"] .sidebar h2.wp-block-heading,
html[data-theme="dark"] .sidebar .widget h2,
html[data-theme="dark"] .sidebar .widget h3 {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
/* wp-block-group（Cocoon ブロックウィジェット外枠） */
html[data-theme="dark"] .sidebar .wp-block-group,
html[data-theme="dark"] .widget .wp-block-group {
  background-color: var(--dm-surface) !important;
}

/* --- Cocoon: テーブル --- */
html[data-theme="dark"] table,
html[data-theme="dark"] .hikaku-table {
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] th {
  background-color: #2a3a60 !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] td {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] tr:nth-child(even) td {
  background-color: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .hikaku-table tr:nth-child(even) td {
  background: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .hikaku-table tbody tr:first-child td {
  background: #253325 !important;
}

/* --- Cocoon: コードブロック --- */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  background-color: #1a1c30 !important;  /* 真っ黒から少し明るく */
  color: #90c8ff !important;
  border-color: var(--dm-border) !important;
}

/* --- Cocoon: ブロッククォート --- */
html[data-theme="dark"] blockquote {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-accent) !important;
  color: var(--dm-text-muted) !important;
}

/* --- Cocoon: サマリーボックス・ランクボックス --- */
html[data-theme="dark"] .summary-box {
  background: #222e50 !important;
  border-color: var(--dm-accent) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .summary-box h3 {
  color: #adc8ff !important;
}
html[data-theme="dark"] .rank-box {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .rank-title {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .rank-spec-item {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* --- Cocoon: ボックス系（result, danger等） --- */
html[data-theme="dark"] .result-box {
  background: #302515 !important;    /* 少し明るい琥珀系 */
  border-color: #e0820a !important;
}
html[data-theme="dark"] .danger-box {
  background: #301818 !important;    /* 少し明るい赤系 */
  border-color: #e03030 !important;
}
html[data-theme="dark"] .danger-box h2 {
  background: transparent !important;
}
html[data-theme="dark"] .matome-box {
  background: var(--dm-surface) !important;  /* 真っ黒をやめてサーフェス色に */
  border: 1px solid var(--dm-border);
}
html[data-theme="dark"] .for-who {
  background: #222e50 !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .author-note,
html[data-theme="dark"] .real-voice {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .situation-list li {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* --- Cocoon: FAQ --- */
html[data-theme="dark"] .faq-item {
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .faq-q {
  background: #1e3a5f !important;
}
html[data-theme="dark"] .faq-a {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

/* --- Cocoon: スマホフッターメニュー --- */
html[data-theme="dark"] .footer-menu-sp,
html[data-theme="dark"] .sp-menu-bar {
  background: var(--dm-nav-bg) !important;
  border-top-color: var(--dm-border) !important;
}
html[data-theme="dark"] .footer-menu-sp a {
  color: var(--dm-text-muted) !important;
}

/* --- Cocoon: ページネーション --- */
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pager-links a {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .pagination .current,
html[data-theme="dark"] .pager-links .current {
  background: var(--dm-accent) !important;
  color: #fff !important;
}

/* --- Cocoon: 関連記事 --- */
html[data-theme="dark"] .related-entry-card-wrap {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .related-entry-card-title {
  color: var(--dm-text) !important;
}

/* --- Cocoon: タグ・カテゴリーラベル --- */
html[data-theme="dark"] .cat-label {
  opacity: 0.85;
}

/* --- Cocoon: インプット・フォーム --- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* --- Cocoon: CTA ボタン（色は維持） --- */
html[data-theme="dark"] .cta-btn,
html[data-theme="dark"] .cta-btn-green {
  /* グラデーションはそのまま維持 */
  opacity: 0.95;
}

/* --- Cocoon: PR表示・アフィリエイト開示 --- */
html[data-theme="dark"] .pr-notice {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}

/* ========================================
   カスタムページ（learn/ hikaku/ hikaku/等）
   ======================================== */

/* site-header はダークなので変更不要 */
html[data-theme="dark"] .site-nav {
  background: var(--dm-nav-bg) !important;
  border-bottom: 1px solid var(--dm-border);
}
html[data-theme="dark"] .site-nav a {
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .site-nav a:hover {
  color: var(--dm-text) !important;
}

/* カスタムページ本体 */
html[data-theme="dark"] .page-body,
html[data-theme="dark"] .main-content {
  background: var(--dm-bg) !important;
}

/* article-card */
html[data-theme="dark"] .article-card {
  background: var(--dm-surface) !important;
  box-shadow: var(--dm-card-shadow) !important;
}
html[data-theme="dark"] .article-card .card-title {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .article-card .card-desc {
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .article-card .card-footer {
  background: var(--dm-surface-2) !important;
  border-top-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .article-card .card-arrow {
  color: var(--dm-link) !important;
}

/* cat-section ヘッド */
html[data-theme="dark"] .cat-section {
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .cat-head {
  background: transparent !important;
}
html[data-theme="dark"] .cat-head-title {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .cat-head-count {
  color: var(--dm-text-muted) !important;
}

/* show-more ボタン */
html[data-theme="dark"] .show-more-btn {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .show-more-btn:hover {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-accent) !important;
}

/* hikaku page */
html[data-theme="dark"] .hc-hero {
  /* ヒーロービジュアルはそのまま維持 */
}
html[data-theme="dark"] .hc-section {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .hc-section-title,
html[data-theme="dark"] .hc-card-title {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .hc-card {
  background: var(--dm-surface) !important;
  box-shadow: var(--dm-card-shadow) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .hc-card-body {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .hc-rank-item {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

/* site-footer */
html[data-theme="dark"] .site-footer {
  background: var(--dm-footer-bg) !important;
}

/* ランディングページ等の白背景セクション */
html[data-theme="dark"] section,
html[data-theme="dark"] .section {
  background-color: transparent !important;
}

/* ========================================
   記事ページ インラインCSS 白背景ラッパー対策
   ----------------------------------------
   各記事がインライン<style>で独自クラスに
   background:#fff を設定しているが、
   dark-mode.css はそれを上書きできていなかった。
   「白地に白文字」を防ぐため全件列挙して上書き。
   ======================================== */
html[data-theme="dark"] .article-wrap,
html[data-theme="dark"] .article-body,
html[data-theme="dark"] .article-inner,
html[data-theme="dark"] .article-container {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

/* .body クラス（記事本文ラッパーとして使用） */
html[data-theme="dark"] .body {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* カード系 */
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .related-item,
html[data-theme="dark"] .pickup-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .step-item,
html[data-theme="dark"] .step-box {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* ボックス系 */
html[data-theme="dark"] .hook-box,
html[data-theme="dark"] .toc-box,
html[data-theme="dark"] .related-box,
html[data-theme="dark"] .af-notice,
html[data-theme="dark"] .cv {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* キャラクター・吹き出し系 */
html[data-theme="dark"] .cv-bubble,
html[data-theme="dark"] .balloon-body,
html[data-theme="dark"] .char-voice-card {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* 記事ごとのグラデーション吹き出しボックス（gradient は JS自動パッチ未対応）*/
html[data-theme="dark"] .mineo-voice-box,
html[data-theme="dark"] .senior-voice,
html[data-theme="dark"] [class*="-voice-box"],
html[data-theme="dark"] [class*="voice-bubble"],
html[data-theme="dark"] [class*="speech-box"] {
  background: var(--dm-surface-2) !important;
  background-image: none !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .mineo-voice-box p,
html[data-theme="dark"] .mineo-voice-box .voice-body p,
html[data-theme="dark"] .mineo-voice-box .voice-name,
html[data-theme="dark"] .mineo-voice-box strong,
html[data-theme="dark"] .senior-voice p,
html[data-theme="dark"] .senior-voice strong,
html[data-theme="dark"] [class*="-voice-box"] p,
html[data-theme="dark"] [class*="-voice-box"] strong {
  color: var(--dm-text) !important;
}

/* ランク・著者ノート系（既存ルール強化） */
html[data-theme="dark"] .rank-box,
html[data-theme="dark"] .author-note,
html[data-theme="dark"] .real-voice {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* h2/h3 のグラデーション背景をフラットに上書き */
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  background: transparent !important;
  background-image: none !important;
  color: var(--dm-text) !important;
}

/* ========================================
   .hl グラデーションテキスト：ダークモードでも保持
   h2/h3/h4 の background:transparent を .hl で上書き
   ======================================== */
html[data-theme="dark"] .hl {
  background: linear-gradient(90deg, #f59e0b, #f97316) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ========================================
   ホームページ hc-* カード系 白背景対策
   ----------------------------------------
   index.html インラインCSS の background:#fff を
   dark mode 時に上書き。高詳細度セレクターで
   card-fix.css の !important にも勝つ。
   ======================================== */
html[data-theme="dark"] .hc-latest-card,
html[data-theme="dark"] .hc-card,
html[data-theme="dark"] .hc-rank-item,
html[data-theme="dark"] .hc-cat-link {
  background: var(--dm-surface) !important;
  box-shadow: var(--dm-card-shadow) !important;
}
html[data-theme="dark"] .hc-latest-card__body,
html[data-theme="dark"] .hc-latest-card__footer,
html[data-theme="dark"] .hc-card__footer,
html[data-theme="dark"] .hc-rank-item:nth-child(even) {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .hc-latest-card__title,
html[data-theme="dark"] .hc-card__title,
html[data-theme="dark"] .hc-rank-item .hc-card__title {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .hc-latest-card__date,
html[data-theme="dark"] .hc-card__meta,
html[data-theme="dark"] .hc-card__updated,
html[data-theme="dark"] .hc-section__sub {
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .hc-card__desc {
  color: var(--dm-text-muted) !important;
}

/* ========================================
   article-card タイトル・日付
   card-fix.css の color:#1a1a2e!important を
   より高詳細度で上書き
   ======================================== */
html[data-theme="dark"] .article-card .entry-title,
html[data-theme="dark"] #list.ect-entry-card .entry-title {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .article-card .entry-date,
html[data-theme="dark"] #list.ect-entry-card .entry-date {
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] #list.ect-entry-card .entry-card-wrap {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

/* ========================================
   スクロールバー（Chrome/Edge）
   ======================================== */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  background: var(--dm-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--dm-border);
  border-radius: 4px;
}

/* ========================================
   トランジション（切り替え時の滑らかさ）
   ======================================== */
html.dm-transition,
html.dm-transition *,
html.dm-transition *::before,
html.dm-transition *::after {
  transition:
    background-color .25s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease !important;
}

/* ══════════════════════════════════════════════════
   著者プロフィールウィジェット（サイドバー）ダークモード
   .dh-author-widget は index.html inline style で白背景定義
   ══════════════════════════════════════════════════ */
html[data-theme="dark"] .dh-author-widget {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: var(--dm-card-shadow) !important;
}
html[data-theme="dark"] .dh-author-name {
  color: #e8ecf8 !important;
}
html[data-theme="dark"] .dh-author-role {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text-muted) !important;
}
html[data-theme="dark"] .dh-author-bio {
  color: var(--dm-text-muted) !important;
}
/* 新着記事一覧ボタン */
html[data-theme="dark"] .dh-author-sns .btn-articles {
  background: var(--dm-surface-2) !important;
  color: #bcc8e8 !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .dh-author-sns .btn-articles:hover {
  background: #3a3e62 !important;
  border-color: #6070b0 !important;
}
html[data-theme="dark"] .dh-author-sns .btn-profile {
  background: #2a2e4a !important;
  border-color: #3e4268 !important;
  color: #e2e8f0 !important;
}

/* ── サイドバー カテゴリーリスト テキスト ── */
html[data-theme="dark"] .list-item-caption {
  color: #93c5fd !important;
}
html[data-theme="dark"] .cat-item a,
html[data-theme="dark"] .wp-block-categories-list .cat-item a {
  color: #93c5fd !important;
  background: transparent !important;
}

/* ══════════════════════════════════════════════════
   人気記事ランキング（#home-ranking）ダークモード
   .hc-rank-item は白背景・濃色テキスト定義済み
   ══════════════════════════════════════════════════ */
html[data-theme="dark"] #home-ranking {
  background: transparent !important;
}
html[data-theme="dark"] .hc-rank-item {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
  box-shadow: var(--dm-card-shadow) !important;
}
html[data-theme="dark"] .hc-rank-item:hover {
  background: var(--dm-surface-2) !important;
  border-color: #6070b0 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .hc-rank-title {
  color: #e0e8f8 !important;
}
html[data-theme="dark"] .hc-rank-label {
  background: #1e2d5a !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .hc-rank-thumb {
  background: var(--dm-surface-2) !important;
}

/* ══ 探索ボタン：ダークモードでもオレンジ固定 ══ */
html[data-theme="dark"] .dh-explore-trigger {
  background: linear-gradient(135deg, #f97316, #dc4e0a) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html[data-theme="dark"] .dh-here-tag {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255,255,255,.7) !important;
}
html[data-theme="dark"] .dh-explore-arr {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ══ あわせて読む（pickup-link）：薄紫背景をダーク化 ══ */
html[data-theme="dark"] .pickup-link {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .pickup-link-title {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .pickup-link-desc {
  color: #aab6d8 !important;
}

/* ══ 自動パッチ要素：背景transitionを無効化（ダーク化時のチラつき防止） ══ */
html[data-theme="dark"] [data-dm-patched] {
  transition-property: transform, box-shadow !important;
}

/* ══ ピラーバナー（まとめ記事への回遊）：ダーク化 ══ */
html[data-theme="dark"] .pillar-back-banner {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  border-left-color: #ea580c !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .pillar-back-banner .pbb-label {
  color: #fb923c !important;
}
html[data-theme="dark"] .pillar-back-banner .pbb-link {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .pillar-back-banner .pbb-arrow {
  color: #fb923c !important;
}

/* ========================================
   ★ ダークモード視認性パッチ（2026-06-08 全記事パトロール）
   ----------------------------------------
   白/明色背景の箱・ボタン・マーカーは、文字だけ明色化される一方
   背景が明色のまま残り「白地に明色文字」で読めなくなっていた。
   background-color のみ暗色化＝グラデーション(background-image)は保持。
   ======================================== */
html[data-theme="dark"] .cta-btn,
html[data-theme="dark"] .cta-btn-sub,
html[data-theme="dark"] .cta-btn-rk,
html[data-theme="dark"] .art-cta-btn,
html[data-theme="dark"] .hub-cta-btn,
html[data-theme="dark"] .quiz-trigger,
html[data-theme="dark"] .quiz-card,
html[data-theme="dark"] .qq-btn,
html[data-theme="dark"] .dh-quiz-opt,
html[data-theme="dark"] .cl-item,
html[data-theme="dark"] .lead-box,
html[data-theme="dark"] .pain-card,
html[data-theme="dark"] .type-card,
html[data-theme="dark"] .kc-verdict-body,
html[data-theme="dark"] .kc-verdict,
html[data-theme="dark"] .kc-verdict-label,
html[data-theme="dark"] .highlight,
html[data-theme="dark"] .data-highlight,
html[data-theme="dark"] .sc-card,
html[data-theme="dark"] .sc-label,
html[data-theme="dark"] .sc-hint,
html[data-theme="dark"] .sc-emoji,
html[data-theme="dark"] .persona-deep-points,
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background:#f5f3ff"],
html[data-theme="dark"] [style*="background:#fef"],
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background:#e0f2fe"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background:#fff7ed"],
html[data-theme="dark"] [style*="background:#fffbeb"] {
  background-color: #2a2d44 !important;
  border-color: #3e4268 !important;
}
/* 上記の箱・ボタン内の文字は明色に統一 */
html[data-theme="dark"] .cta-btn,
html[data-theme="dark"] .cta-btn *,
html[data-theme="dark"] .cta-btn-sub,
html[data-theme="dark"] .cta-btn-rk,
html[data-theme="dark"] .art-cta-btn,
html[data-theme="dark"] .hub-cta-btn,
html[data-theme="dark"] .kc-verdict-label {
  color: #e8ecf8 !important;
}
/* 色付きバッジは文字を白にして可読性を確保（バッジ色は保持） */
html[data-theme="dark"] .hero-badge,
html[data-theme="dark"] .dh-hero-badge,
html[data-theme="dark"] .rank-label {
  color: #fff !important;
}
/* 新着一覧のカード見出しが暗背景に暗文字だった件（#list.list のID指定に勝つ） */
html[data-theme="dark"] .entry-card-title,
html[data-theme="dark"] .ect-entry-card .entry-card-title,
html[data-theme="dark"] #list.list .entry-card-title,
html[data-theme="dark"] #list .entry-card-title {
  color: #e8ecf8 !important;
}