/**
 * トップページ専用のダークモード強化CSS
 */

/* トップページのカテゴリーカード強化（ライトモード：白地で背景と差別化） */
body.home .category-card,
body.front-page .category-card {
  background: #ffffff !important;
  border: 2px solid rgba(14, 79, 157, 0.28) !important;
  box-shadow: 0 4px 16px rgba(14, 79, 157, 0.14), 0 1px 4px rgba(14, 79, 157, 0.08) !important;
}

html.dark body.home .category-card,
html.dark body.front-page .category-card {
  background-color: #2D3748 !important;
  border: 1px solid #4A5568 !important;
  color: #FFFFFF !important;
}

html.dark body.home .category-card h3,
html.dark body.front-page .category-card h3 {
  color: #FFFFFF !important;
}

html.dark body.home .category-card span,
html.dark body.front-page .category-card span {
  color: #D1D5DB !important;
}

body.home .category-card:hover,
body.front-page .category-card:hover {
  background: linear-gradient(180deg, #eef8ff 0%, #cfe9ff 100%) !important;
  border-color: rgba(14, 79, 157, 0.34) !important;
  color: #072d59 !important;
}

html.dark body.home .category-card:hover,
html.dark body.front-page .category-card:hover {
  background-color: #3B82F6 !important;
  border-color: #3B82F6 !important;
}

body.home .category-card:hover h3,
body.home .category-card:hover span,
body.front-page .category-card:hover h3,
body.front-page .category-card:hover span {
  color: #072d59 !important;
}

html.dark body.home .category-card:hover h3,
html.dark body.home .category-card:hover span,
html.dark body.front-page .category-card:hover h3,
html.dark body.front-page .category-card:hover span {
  color: #ffffff !important;
}

/* ダークモードの切り替わりを明確に */
html.dark {
  background-color: #111827;
}

html:not(.dark) {
  background-color: #ffffff;
}