/**
 * スマートなダークモード実装
 * CSS変数とモジュール化で保守性・可読性を向上
 */

/* === CSS変数定義 === */
:root {
  /* ダークモード用カラーパレット */
  --dark-bg-primary: #121212;
  --dark-bg-secondary: #1a1a1a;
  --dark-bg-tertiary: #222;
  --dark-bg-accent: #333;
  --dark-border: #444;
  --dark-border-light: #555;
  --dark-text-primary: #e0e0e0;
  --dark-text-secondary: #cccccc;
  --dark-text-white: #ffffff;
  --dark-link: #80cbc4;
  --dark-link-hover: #b2ebf2;
  --dark-highlight: #5a5a30;
  --dark-code-bg: #2d2d2d;
  
  /* ライトモード用カラーパレット（サイドバー反転用） */
  --light-bg-primary: #ffffff;
  --light-bg-secondary: #f5f5f5;
  --light-border: #dddddd;
  --light-text-primary: #333333;
  --light-link: #0066cc;
  
  /* トランジション設定 */
  --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* === ベーススタイル === */
body.dark-mode {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  transition: var(--transition-theme);
}

/* === レイアウトコンポーネント === */
/* ヘッダー */
body.dark-mode #header,
body.dark-mode .header-container,
body.dark-mode #header-in {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

/* メインコンテンツエリア */
body.dark-mode .content,
body.dark-mode .article,
body.dark-mode main.main {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

/* ナビゲーション */
body.dark-mode #navi,
body.dark-mode #navi-in,
body.dark-mode #navi-in > ul,
body.dark-mode #navi-in > ul > li {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-mode #navi-in a {
  color: var(--dark-text-primary);
  transition: var(--transition-theme);
}

body.dark-mode #navi-in a:hover {
  background-color: var(--dark-bg-accent);
}

/* フッター */
body.dark-mode #footer {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

/* === UIコンポーネント === */
/* カード系コンポーネント */
body.dark-mode .entry-card,
body.dark-mode .related-entry-card,
body.dark-mode .a-wrap,
body.dark-mode .blogcard {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
  transition: var(--transition-theme);
}

body.dark-mode .a-wrap:hover {
  background-color: var(--dark-bg-accent);
}

/* テキスト要素 */
body.dark-mode .entry-title,
body.dark-mode .entry-content h2,
body.dark-mode .entry-content h3,
body.dark-mode .entry-content h4,
body.dark-mode .entry-content h5,
body.dark-mode .entry-content h6,
body.dark-mode .page-title,
body.dark-mode .archive-title {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-white) !important;
  border-color: var(--dark-border) !important;
}

/* 見出し要素（H3など）の詳細設定 */
body.dark-mode h3,
body.dark-mode .article h3,
body.dark-mode #content h3 {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-white) !important;
  border-color: var(--dark-border) !important;
}

/* 見出しの疑似要素（装飾）にも適用 */
body.dark-mode h3:before,
body.dark-mode h3:after,
body.dark-mode .article h3:before,
body.dark-mode .article h3:after {
  background-color: var(--dark-border) !important;
  border-color: var(--dark-border) !important;
}

/* タイトル部分の親要素（コンテナ）も修正 */
body.dark-mode .entry-header,
body.dark-mode .page-header,
body.dark-mode .article-header {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* 公開日時と更新日時の表示も修正 */
body.dark-mode .date-tags,
body.dark-mode .post-date,
body.dark-mode .post-update,
body.dark-mode time.entry-date,
body.dark-mode time.updated {
  color: var(--dark-text-secondary) !important;
  background-color: transparent !important;
}

/* リンク */
body.dark-mode a:not(.sidebar a):not(#sidebar a):not(#footer a) {
  color: var(--dark-link);
  transition: color 0.3s ease;
}

body.dark-mode a:not(.sidebar a):not(#sidebar a):not(#footer a):hover {
  color: var(--dark-link-hover);
}

/* リスト要素（li）の文字色を記事本文と統一 */
body.dark-mode li,
body.dark-mode .entry-content li,
body.dark-mode .article li,
body.dark-mode .content li,
body.dark-mode .post-content li {
  color: var(--dark-text-primary) !important;
}

/* ネストしたリスト要素も統一 */
body.dark-mode ul li,
body.dark-mode ol li,
body.dark-mode .entry-content ul li,
body.dark-mode .entry-content ol li,
body.dark-mode .article ul li,
body.dark-mode .article ol li {
  color: var(--dark-text-primary) !important;
}

/* リスト内のリンクは通常のリンク色を保持 */
body.dark-mode li a:not(.sidebar a):not(#sidebar a) {
  color: var(--dark-link) !important;
}

/* === フォーム・インタラクティブ要素 === */
/* フォーム入力 */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="url"],
body.dark-mode input[type="search"],
body.dark-mode textarea {
  background-color: var(--dark-bg-accent);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

/* ボタン */
body.dark-mode .btn,
body.dark-mode .btn-wrap > a,
body.dark-mode [class*="btn-"] a,
body.dark-mode .station-btn-border,
body.dark-mode a.station-btn-border,
body.dark-mode .wp-block-button__link {
  background-color: var(--dark-border) !important;
  color: var(--dark-text-white) !important;
  border-color: var(--dark-border) !important;
  transition: var(--transition-theme);
}

body.dark-mode .btn:hover,
body.dark-mode .btn-wrap > a:hover,
body.dark-mode [class*="btn-"] a:hover,
body.dark-mode .station-btn-border:hover,
body.dark-mode a.station-btn-border:hover,
body.dark-mode .wp-block-button__link:hover {
  background-color: var(--dark-bg-accent) !important;
}

/* 検索ボックス */
body.dark-mode .search-box {
  background-color: var(--dark-bg-tertiary);
}

body.dark-mode .search-edit {
  background-color: var(--dark-bg-accent);
  color: var(--dark-text-primary);
}

/* === テーブル === */
body.dark-mode table,
body.dark-mode .wp-block-table,
body.dark-mode .table-responsive,
body.dark-mode .link-table,
body.dark-mode .navigation-table {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border: none !important; /* 外側の枠線を削除 */
}

body.dark-mode table th,
body.dark-mode table td {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border: none !important; /* セル間の枠線も削除 */
}

body.dark-mode table th {
  background-color: var(--dark-bg-accent) !important;
  border-bottom: 1px solid var(--dark-bg-primary) !important; /* 必要に応じてヘッダー下に薄い線 */
}

body.dark-mode table a {
  color: var(--dark-link) !important;
  transition: opacity 0.3s ease;
}

body.dark-mode table a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* テーブル全体のコンテナ */
body.dark-mode .table-container,
body.dark-mode .table-wrapper {
  background-color: var(--dark-bg-secondary) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 特定のナビゲーションテーブル（画像のような形式） */
body.dark-mode .navigation-links,
body.dark-mode .footer-navigation,
body.dark-mode .menu-navigation,
body.dark-mode .link-collection,
body.dark-mode .link-grid {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border: none !important;
}

/* テーブル内の個別リンクエリア */
body.dark-mode .navigation-links a,
body.dark-mode .footer-navigation a,
body.dark-mode .menu-navigation a,
body.dark-mode .link-collection a,
body.dark-mode .link-grid a {
  color: var(--dark-link) !important;
  background-color: var(--dark-bg-secondary) !important;
  transition: background-color 0.3s ease;
  border: none !important;
}

body.dark-mode .navigation-links a:hover,
body.dark-mode .footer-navigation a:hover,
body.dark-mode .menu-navigation a:hover,
body.dark-mode .link-collection a:hover,
body.dark-mode .link-grid a:hover {
  background-color: var(--dark-bg-accent) !important;
}

/* === コード・プリフォーマット === */
body.dark-mode pre,
body.dark-mode code {
  background-color: var(--dark-code-bg);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

/* === 特殊コンポーネント === */
/* 目次 */
body.dark-mode .toc,
body.dark-mode #toc {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

body.dark-mode .toc-title {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-white);
  border-bottom-color: var(--dark-border);
}

body.dark-mode .toc a {
  color: var(--dark-link);
}

body.dark-mode .toc a:hover {
  color: var(--dark-link-hover);
  text-decoration: underline;
}

/* アラート・情報ボックス */
body.dark-mode .information-box,
body.dark-mode .warning-box,
body.dark-mode .alert-box,
body.dark-mode .memo-box,
body.dark-mode .common-icon-box {
  background-color: var(--dark-bg-accent);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-light);
}

body.dark-mode .information-box::before,
body.dark-mode .warning-box::before,
body.dark-mode .alert-box::before,
body.dark-mode .memo-box::before {
  color: var(--dark-text-white);
  background-color: var(--dark-border);
}

/* ハイライト要素 */
body.dark-mode mark,
body.dark-mode .information-box mark,
body.dark-mode .warning-box mark,
body.dark-mode [style*="background-color: yellow"] {
  background-color: var(--dark-highlight) !important;
  color: var(--dark-text-white) !important;
  padding: 2px 5px;
  border-radius: 3px;
}

/* アンダーラインマーカーのダークモード統一 */
body.dark-mode .marker-under,
body.dark-mode .marker-under-blue,
body.dark-mode .marker-under-red,
body.dark-mode .marker-under-lightgreen,
body.dark-mode .marker-under-cream,
body.dark-mode .marker-under-jobanrapid-narita,
body.dark-mode .marker-under-hachiko-kawagoe,
body.dark-mode .marker-under-metrohibiya,
body.dark-mode .marker-under-yamanote-yokohama-negishi,
body.dark-mode .marker-under-tobutojo,
body.dark-mode .marker-under-tobunoda,
body.dark-mode .marker-under-seibuikebukuro,
body.dark-mode .marker-under-metroginza,
body.dark-mode .marker-under-tokyuoimachi,
body.dark-mode .marker-under-utsunomiya-takasaki,
body.dark-mode .marker-under-tokaido,
body.dark-mode .marker-under-naritaskyaccess,
body.dark-mode .marker-under-metroyurakucho,
body.dark-mode .marker-under-metrohanzomon,
body.dark-mode .marker-under-toeishinjuku,
body.dark-mode .marker-under-sttozai,
body.dark-mode .marker-under-st-bureau {
  background: linear-gradient(transparent 60%, var(--dark-border) 50%) !important;
  color: var(--dark-text-primary) !important;
}

/* 吹き出し */
body.dark-mode .speech-wrap {
  background-color: var(--dark-bg-tertiary);
}

body.dark-mode .speech-person {
  color: var(--dark-text-primary);
}

body.dark-mode .sbp-l .speech-balloon,
body.dark-mode .sbp-r .speech-balloon {
  background-color: var(--dark-bg-accent);
  color: var(--dark-text-primary);
}

/* === ページネーション === */
body.dark-mode .pagination .current {
  background-color: var(--dark-border);
  border-color: var(--dark-border);
}

body.dark-mode .pagination a {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
  transition: var(--transition-theme);
}

body.dark-mode .pagination a:hover {
  background-color: var(--dark-bg-accent);
}

/* === サイドバー反転スタイル === */
/* サイドバーベース - ダークモード時も暗い背景に変更 */
body.dark-mode #sidebar,
body.dark-mode .sidebar,
body.dark-mode .sidebar-scroll,
body.dark-mode .no-scrollable-sidebar,
body.dark-mode .widget-sidebar,
body.dark-mode aside.widget-area {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* サイドバー内のテキスト要素 */
body.dark-mode .sidebar h1,
body.dark-mode .sidebar h2,
body.dark-mode .sidebar h3,
body.dark-mode .sidebar .widget-title,
body.dark-mode #sidebar h1,
body.dark-mode #sidebar h2,
body.dark-mode #sidebar h3,
body.dark-mode #sidebar .widget-title,
body.dark-mode .widget-entry-cards h2,
body.dark-mode .widget-entry-cards h3 {
  background-color: var(--dark-bg-accent) !important;
  color: var(--dark-text-white) !important;
  border-color: var(--dark-border) !important;
}

/* サイドバー内のリンク */
body.dark-mode .sidebar a,
body.dark-mode #sidebar a {
  color: var(--dark-link) !important;
}

/* サイドバー内のウィジェット */
body.dark-mode .sidebar .widget,
body.dark-mode #sidebar .widget,
body.dark-mode .sidebar .widget_text,
body.dark-mode .sidebar .widget_custom_html,
body.dark-mode #sidebar .widget_text,
body.dark-mode #sidebar .widget_custom_html {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* サイドバー内のウィジェットリスト */
body.dark-mode .widget_recent_entries ul li a,
body.dark-mode .widget_categories ul li a,
body.dark-mode .widget_archive ul li a,
body.dark-mode .widget_pages ul li a,
body.dark-mode .widget_meta ul li a,
body.dark-mode .widget_recent_comments ul li,
body.dark-mode .widget_nav_menu ul li a {
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .widget_recent_entries ul li a:hover,
body.dark-mode .widget_categories ul li a:hover,
body.dark-mode .widget_archive ul li a:hover,
body.dark-mode .widget_pages ul li a:hover,
body.dark-mode .widget_meta ul li a:hover,
body.dark-mode .widget_nav_menu ul li a:hover {
  background-color: var(--dark-bg-accent) !important;
}

/* === 広告・外部コンテンツ === */
/* 広告コンテナのクリーンアップ */
body.dark-mode .widget-ad,
body.dark-mode .ad-area,
body.dark-mode .advertisement-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 広告画像 */
body.dark-mode .widget-ad img,
body.dark-mode .ad-area img {
  border: none !important;
  box-shadow: none !important;
}

/* === ユーティリティ === */
/* 罫線 */
body.dark-mode hr {
  border-color: var(--dark-border);
}

/* カテゴリ・タグリンク */
body.dark-mode .cat-link {
  background-color: var(--dark-border);
}

body.dark-mode .tag-link {
  background-color: var(--dark-bg-accent);
}

/* SNSボタン・シェアアイコン */
body.dark-mode .sns-share,
body.dark-mode .sns-follow {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .sns-share-message,
body.dark-mode .sns-follow-message {
  color: var(--dark-text-primary) !important;
}

/* サムネイル下と本文下のSNSボタン */
body.dark-mode .social-share,
body.dark-mode .share-buttons,
body.dark-mode .sns-buttons,
body.dark-mode .social-buttons,
body.dark-mode .entry-share,
body.dark-mode .post-share {
  background-color: var(--dark-bg-secondary) !important;
}

/* 個別のSNSボタン */
body.dark-mode .sns-share a,
body.dark-mode .sns-follow a,
body.dark-mode .social-share a,
body.dark-mode .share-buttons a,
body.dark-mode .sns-buttons a,
body.dark-mode .social-buttons a,
body.dark-mode .entry-share a,
body.dark-mode .post-share a {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
  transition: var(--transition-theme);
}

body.dark-mode .sns-share a:hover,
body.dark-mode .sns-follow a:hover,
body.dark-mode .social-share a:hover,
body.dark-mode .share-buttons a:hover,
body.dark-mode .sns-buttons a:hover,
body.dark-mode .social-buttons a:hover,
body.dark-mode .entry-share a:hover,
body.dark-mode .post-share a:hover {
  background-color: var(--dark-bg-accent) !important;
  opacity: 0.9;
}

/* 特定のSNSボタン（クラス名別） */
body.dark-mode .twitter-share,
body.dark-mode .facebook-share,
body.dark-mode .hatena-share,
body.dark-mode .pocket-share,
body.dark-mode .pinterest-share,
body.dark-mode .line-share,
body.dark-mode .buffer-share,
body.dark-mode .feedly-share,
body.dark-mode .rss-share {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* アイコン部分 */
body.dark-mode .sns-share i,
body.dark-mode .sns-follow i,
body.dark-mode .social-share i,
body.dark-mode .share-buttons i,
body.dark-mode .sns-buttons i,
body.dark-mode .social-buttons i {
  color: var(--dark-text-primary) !important;
}

/* プロフィール部分のSNSボタン */
body.dark-mode .profile-sns,
body.dark-mode .author-sns,
body.dark-mode .sidebar .sns-buttons,
body.dark-mode #sidebar .sns-buttons,
body.dark-mode .sidebar .social-buttons,
body.dark-mode #sidebar .social-buttons,
body.dark-mode .widget-profile .sns-share,
body.dark-mode .widget-profile .sns-follow {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .profile-sns a,
body.dark-mode .author-sns a,
body.dark-mode .sidebar .sns-buttons a,
body.dark-mode #sidebar .sns-buttons a,
body.dark-mode .sidebar .social-buttons a,
body.dark-mode #sidebar .social-buttons a,
body.dark-mode .widget-profile .sns-share a,
body.dark-mode .widget-profile .sns-follow a {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* SHAREタイトル部分 */
body.dark-mode .share-title,
body.dark-mode .sns-share-title,
body.dark-mode .social-title {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-white) !important;
  border-color: var(--dark-border) !important;
}

/* フォローボタン */
body.dark-mode .follow-buttons,
body.dark-mode .follow-section {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .follow-buttons a,
body.dark-mode .follow-section a {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* フッター内のリンクとアイコン */
body.dark-mode #footer a,
body.dark-mode .footer a,
body.dark-mode .footer-links a,
body.dark-mode .footer-menu a,
body.dark-mode #footer-widget-area a,
body.dark-mode .navi-footer a,
body.dark-mode #footer-menu a,
body.dark-mode #footer .widget a,
body.dark-mode #footer-menu-box a,
body.dark-mode #footer-bottom a {
  color: var(--dark-text-white) !important;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

body.dark-mode #footer a:hover,
body.dark-mode .footer a:hover,
body.dark-mode .footer-links a:hover,
body.dark-mode .footer-menu a:hover,
body.dark-mode #footer-widget-area a:hover,
body.dark-mode .navi-footer a:hover,
body.dark-mode #footer-menu a:hover,
body.dark-mode #footer .widget a:hover,
body.dark-mode #footer-menu-box a:hover,
body.dark-mode #footer-bottom a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ページトップボタン */
body.dark-mode #go-to-top {
  background-color: var(--dark-bg-accent);
  color: var(--dark-text-primary);
}

/* ボックスメニュー */
body.dark-mode .box-menu {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  transition: var(--transition-theme);
}

body.dark-mode .box-menu:hover {
  background-color: var(--dark-bg-accent);
}

/* === 通知バナー === */
.dark-mode-notification {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-bg-accent);
  color: var(--dark-text-white);
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: top 0.3s ease, opacity 0.3s ease;
}

.dark-mode-notification.show {
  top: 0;
  opacity: 1;
}

/* === アクセシビリティ === */
/* フォーカス状態の強化 */
body.dark-mode *:focus {
  outline: 2px solid var(--dark-link);
  outline-offset: 2px;
}

/* 高コントラスト対応 */
@media (prefers-contrast: high) {
  body.dark-mode {
    --dark-text-primary: #ffffff;
    --dark-link: #00ffff;
  }
}

/* === 動作軽減設定への対応 === */
@media (prefers-reduced-motion: reduce) {
  body.dark-mode,
  body.dark-mode * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === blank-box stickyのダークモード対応 === */
/* blank-box sticky要素 */
body.dark-mode .blank-box.sticky,
body.dark-mode .blank-box,
body.dark-mode .sticky-box,
body.dark-mode .sticky-container {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* blank-box sticky内のテキスト */
body.dark-mode .blank-box.sticky p,
body.dark-mode .blank-box p,
body.dark-mode .sticky-box p,
body.dark-mode .sticky-container p {
  color: var(--dark-text-primary) !important;
}

/* blank-box sticky内のリンク */
body.dark-mode .blank-box.sticky a,
body.dark-mode .blank-box a,
body.dark-mode .sticky-box a,
body.dark-mode .sticky-container a {
  color: var(--dark-link) !important;
}

/* blank-box sticky内のリンクホバー */
body.dark-mode .blank-box.sticky a:hover,
body.dark-mode .blank-box a:hover,
body.dark-mode .sticky-box a:hover,
body.dark-mode .sticky-container a:hover {
  color: var(--dark-link-hover) !important;
}

/* === info-boxのダークモード対応 === */
/* info-box要素 */
body.dark-mode .info-box,
body.dark-mode div.info-box {
  background-color: var(--dark-bg-accent) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-light) !important;
}

/* info-boxのアイコン部分 */
body.dark-mode .info-box::before,
body.dark-mode div.info-box::before {
  color: var(--dark-text-white) !important;
  background-color: var(--dark-border) !important;
}

/* info-box内のテキスト */
body.dark-mode .info-box p,
body.dark-mode div.info-box p,
body.dark-mode .info-box span,
body.dark-mode div.info-box span {
  color: var(--dark-text-primary) !important;
}

/* info-box内のリンク */
body.dark-mode .info-box a,
body.dark-mode div.info-box a {
  color: var(--dark-link) !important;
}

/* info-box内のリンクホバー */
body.dark-mode .info-box a:hover,
body.dark-mode div.info-box a:hover {
  color: var(--dark-link-hover) !important;
}

/* info-box内のハイライト・マーク要素 */
body.dark-mode .info-box mark,
body.dark-mode div.info-box mark,
body.dark-mode .info-box em,
body.dark-mode div.info-box em {
  background-color: var(--dark-highlight) !important;
  color: var(--dark-text-white) !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
}