/**
 * システム設定に合わせるダークモードのスタイル
 */

/* ダークモード時の基本スタイル */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
  transition: background-color 0.3s, color 0.3s;
}

/* 通知バナー（オプション） */
.dark-mode-notification {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  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, opacity 0.3s;
}

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

/* 主要コンテンツエリアのダークモードスタイル */

/* ヘッダー */
body.dark-mode #header,
body.dark-mode #header-container,
body.dark-mode #header-in {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode .header-container {
  background-color: #1a1a1a;
}

body.dark-mode .logo-text {
  color: #e0e0e0;
}

/* メニュー */
body.dark-mode #navi,
body.dark-mode #navi-in,
body.dark-mode #navi-in > ul,
body.dark-mode #navi-in > ul > li {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode #navi-in a {
  color: #e0e0e0;
}

body.dark-mode #navi-in a:hover {
  background-color: #333;
}

/* メインコンテンツ */
body.dark-mode .content,
body.dark-mode .article {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode main.main,
body.dark-mode .content {
  background-color: #1a1a1a;
}

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 {
  color: #e0e0e0;
}

body.dark-mode a {
  color: #80cbc4;
}

body.dark-mode hr {
  border-color: #444;
}

/* カード */
body.dark-mode .a-wrap {
  background-color: #222;
  color: #e0e0e0;
}

body.dark-mode .a-wrap:hover {
  background-color: #333;
}

body.dark-mode .card-title {
  color: #e0e0e0;
}

body.dark-mode .entry-card,
body.dark-mode .related-entry-card {
  background-color: #222;
  border-color: #444;
}

body.dark-mode .entry-card-title,
body.dark-mode .related-entry-card-title {
  color: #e0e0e0;
}

/* サイドバー */
body.dark-mode aside.sidebar {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode .sidebar h3 {
  background-color: #222;
  color: #e0e0e0;
}

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: #e0e0e0;
  border-color: #444;
}

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: #333;
}

/* カテゴリリンク */
body.dark-mode .cat-link {
  background-color: #444;
}

/* タグリンク */
body.dark-mode .tag-link {
  background-color: #333;
}

/* SNSボタン */
body.dark-mode .sns-share,
body.dark-mode .sns-follow {
  background-color: #1a1a1a;
}

body.dark-mode .sns-share-message,
body.dark-mode .sns-follow-message {
  color: #e0e0e0;
}

/* ブログカード */
body.dark-mode .blogcard {
  background-color: #222;
  border-color: #444;
}

body.dark-mode .blogcard-title {
  color: #e0e0e0;
}

/* コードブロック */
body.dark-mode pre,
body.dark-mode code {
  background-color: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}

/* テーブル */
body.dark-mode table {
  border-color: #444;
}

body.dark-mode table th,
body.dark-mode table td {
  border-color: #444;
}

body.dark-mode table th {
  background-color: #333;
}

/* フッター */
body.dark-mode #footer {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

/* ページネーション */
body.dark-mode .pagination .current {
  background-color: #444;
  border: 1px solid #444;
}

body.dark-mode .pagination a {
  background-color: #222;
  border: 1px solid #444;
}

body.dark-mode .pagination a:hover {
  background-color: #333;
}

/* フォーム入力 */
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: #333;
  border-color: #444;
  color: #e0e0e0;
}

/* 検索フォーム */
body.dark-mode .search-box {
  background-color: #222;
}

body.dark-mode .search-edit {
  background-color: #333;
  color: #e0e0e0;
}

/* 目次 */
body.dark-mode .toc {
  background-color: #222;
  border-color: #444;
}

body.dark-mode .toc-title {
  color: #e0e0e0;
}

/* 吹き出し */
body.dark-mode .speech-wrap {
  background-color: #222;
}

body.dark-mode .speech-person {
  color: #e0e0e0;
}

body.dark-mode .sbp-l .speech-balloon {
  background-color: #333;
  color: #e0e0e0;
}

body.dark-mode .sbp-r .speech-balloon {
  background-color: #333;
  color: #e0e0e0;
}

/* ボックスメニュー */
body.dark-mode .box-menu {
  background: #222;
  color: #e0e0e0;
}

body.dark-mode .box-menu:hover {
  background: #333;
}

/* ページトップボタン */
body.dark-mode #go-to-top {
  background-color: #333;
  color: #e0e0e0;
}