/**
 * BODIK APPS Cool UI - theme122
 * BODIKブランドカラーを使用したワクワクするUI
 *
 * メインカラー: #F6F4F0 / #0E4F9D / #87A2C7 / #B3DBF2
 * アクセント:   #ff6900 / #bf0404
 */

/* ========================================
   CSS カスタムプロパティ (BODIK カラー)
======================================== */
:root {
  --bodik-cream:      #F2F3F5;
  --bodik-blue:       #0E4F9D;
  --bodik-blue-mid:   #87A2C7;
  --bodik-blue-light: #B3DBF2;
  --bodik-gold:       #ff6900;
  --bodik-gold-dark:  #e85f00;
  --bodik-gold-soft:  #fff1e8;
  --bodik-red:        #bf0404;
  --bodik-blue-dark:  #0a3d7a;
  --bodik-blue-deeper:#072d59;
  --bodik-sky:        #F2F3F5;
  --bodik-sky-soft:   #F5F5F8;
  --bodik-text-strong:#0F2742;
}

/* ========================================
   ベース背景
======================================== */
body:not(.dark) {
  background:
    linear-gradient(180deg, rgba(228, 228, 233, 0.58) 0%, rgba(240, 240, 244, 0.95) 18%, var(--bodik-sky) 100%) !important;
  color: var(--bodik-text-strong);
}
body:not(.dark) .site-main {
  background-color: transparent !important;
}
body:not(.dark) #primary {
  background-color: transparent !important;
}
body:not(.dark) .section-wrapper:not(.cta-section),
body:not(.dark) .latest-apps-section,
body:not(.dark) .categories-section,
body:not(.dark) .data-sources-section {
  background-color: transparent !important;
}

/* ========================================
   ヘッダー
======================================== */
#masthead {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(3, 50, 133, 0.12) !important;
  box-shadow: 0 12px 30px rgba(3, 50, 133, 0.08);
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden;
}
#masthead::before {
  content: none;
}
#masthead.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(3, 50, 133, 0.16) !important;
  box-shadow: 0 18px 40px rgba(3, 50, 133, 0.12);
}
#masthead > * {
  position: relative;
  z-index: 1;
}
.container-wide {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
}
.rd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 84px;
}
.rd-site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.rd-site-logo-image {
  display: block;
  width: auto;
  height: 46px;
  max-width: min(220px, 42vw);
}
.rd-main-navigation {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  font-family: "Noto Sans JP", sans-serif;
}
.rd-nav-list {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.rd-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.rd-nav-link,
.rd-sub-menu-link,
.rd-mobile-nav-link,
.rd-mobile-sub-link {
  color: #444444 !important;
  text-decoration: none;
}
.rd-menu-toggle {
  border: 1px solid rgba(3, 50, 133, 0.16);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.84);
  color: #444444 !important;
  font-weight: 400;
}
.rd-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 84px;
  padding: 0 0.1rem;
  font-weight: 400;
  transition: color 0.2s ease;
}
.rd-nav-name {
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.rd-nav-link::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 0;
  height: 2px;
  background: #0066cc;
  transition: width 0.3s ease;
  border-radius: 2px;
}
.rd-nav-link:hover::after,
.rd-nav-item:hover > .rd-nav-link::after {
  width: 100%;
}
.rd-nav-link:hover,
.rd-sub-menu-link:hover,
.rd-mobile-nav-link:hover,
.rd-mobile-sub-link:hover {
  color: #0066cc !important;
}
.rd-sub-menu,
.rd-sub-sub-menu {
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  min-width: 280px;
  margin: 0;
  padding: 0.6rem 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(3, 50, 133, 0.12);
  box-shadow: 0 18px 40px rgba(3, 50, 133, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 120;
}
.rd-sub-sub-menu {
  top: -0.6rem;
  left: calc(100% - 1px);
}
.rd-nav-item:hover > .rd-sub-menu,
.rd-sub-menu-item:hover > .rd-sub-sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rd-sub-menu-item,
.rd-sub-sub-menu li {
  position: relative;
}
.rd-sub-menu-link {
  display: block;
  padding: 0.65rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
.rd-mobile-menu {
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid rgba(3, 50, 133, 0.1);
  box-shadow: 0 16px 30px rgba(3, 50, 133, 0.12);
}
.rd-mobile-nav-list,
.rd-mobile-sub-menu,
.rd-mobile-sub-sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rd-mobile-nav-item + .rd-mobile-nav-item {
  margin-top: 0.45rem;
}
.rd-mobile-nav-link {
  display: block;
  padding: 0.75rem 0;
  font-size: 14px;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
}
.rd-mobile-sub-menu {
  padding-left: 1rem;
}
.rd-mobile-sub-link {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.92rem;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
}

/* ========================================
   ヒーローセクション
======================================== */
#hero {
  background: url('../images/bodik-bg02.png') no-repeat 50% center !important;
  background-size: cover !important;
  position: relative;
  overflow: hidden;
  min-height: 340px;
}

#hero::before {
  content: none;
}
#hero::after {
  content: none;
}

@keyframes bodik-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -25px) scale(1.06); }
  66%       { transform: translate(-20px, 18px) scale(0.94); }
}

.hero-particles {
  display: none;
}
.hero-solid {
  position: absolute;
  transform-style: preserve-3d;
  opacity: 0;
  filter: drop-shadow(0 12px 20px rgba(7, 45, 89, 0.35)) drop-shadow(0 4px 8px rgba(217, 144, 54, 0.18));
  animation: hero-solid-float linear infinite;
}
.hero-solid::before,
.hero-solid::after {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: center;
}
/* 五角形パネル（メイン面 + 上面 + 側面） */
.hero-solid--quad {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(179, 219, 242, 0.45));
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.hero-solid--quad::before {
  /* 上面（明るい）*/
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(179, 219, 242, 0.7));
  clip-path: polygon(50% 0%, 100% 38%, 50% 55%, 0% 38%);
  transform: translateZ(calc(var(--hero-depth) * 0.18)) rotateY(22deg) scaleY(0.96);
}
.hero-solid--quad::after {
  /* 底面（暗め・ゴールド）*/
  background: linear-gradient(180deg, rgba(217, 144, 54, 0.55), rgba(179, 100, 10, 0.32));
  clip-path: polygon(18% 100%, 50% 55%, 82% 100%, 50% 86%);
  transform: translateZ(calc(var(--hero-depth) * -0.12)) rotateX(55deg);
}
/* 三角形パネル */
.hero-solid--tri {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(135, 162, 199, 0.38));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.hero-solid--tri::before {
  /* 左面（中間調）*/
  background: linear-gradient(135deg, rgba(179, 219, 242, 0.65), rgba(14, 79, 157, 0.32));
  clip-path: polygon(50% 0%, 50% 72%, 0% 100%);
  transform: translateZ(calc(var(--hero-depth) * 0.16)) rotateY(-28deg);
}
.hero-solid--tri::after {
  /* 右面（暗め）*/
  background: linear-gradient(225deg, rgba(14, 79, 157, 0.42), rgba(7, 45, 89, 0.25));
  clip-path: polygon(50% 0%, 100% 100%, 50% 72%);
  transform: translateZ(calc(var(--hero-depth) * -0.1)) rotateY(28deg);
}
@keyframes hero-solid-float {
  0% {
    transform: translate3d(0, 0%, calc(var(--hero-depth) * -0.6)) rotateX(0deg) rotateY(0deg) rotateZ(-5deg) scale(0.85);
    opacity: 0.75;
  }
  25% {
    transform: translate3d(calc(var(--hero-drift) * 0.3), -18%, calc(var(--hero-depth) * -1)) rotateX(60deg) rotateY(90deg) rotateZ(4deg) scale(1.05);
    opacity: 0.95;
  }
  50% {
    transform: translate3d(calc(var(--hero-drift) * 0.65), -36%, calc(var(--hero-depth) * -0.5)) rotateX(120deg) rotateY(180deg) rotateZ(12deg) scale(1.0);
    opacity: 0.85;
  }
  75% {
    transform: translate3d(calc(var(--hero-drift) * 0.9), -54%, calc(var(--hero-depth) * -0.8)) rotateX(200deg) rotateY(270deg) rotateZ(18deg) scale(0.92);
    opacity: 0.55;
  }
  100% {
    transform: translate3d(var(--hero-drift), -75%, 0px) rotateX(280deg) rotateY(360deg) rotateZ(25deg) scale(0.78);
    opacity: 0;
  }
}

#hero .hero-content {
  position: relative;
  z-index: 10;
}

.hero-title-gradient {
  background: linear-gradient(135deg, #ffffff 15%, #eef8ff 58%, #ffd59d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.28));
  line-height: 1.2;
}

/* プライマリボタン (ゴールド) */
.btn-bodik-primary {
  background: linear-gradient(135deg, var(--bodik-blue), #3389c9);
  color: white !important;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(14, 79, 157, 0.28);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
}
.btn-bodik-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(14, 79, 157, 0.36);
  color: white !important;
}

/* セカンダリボタン (アクセント) */
.btn-bodik-secondary {
  background: linear-gradient(135deg, var(--bodik-gold), var(--bodik-gold-dark));
  color: white !important;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  border: 2px solid transparent;
  box-shadow: 0 8px 24px rgba(255, 105, 0, 0.32);
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
}
.btn-bodik-secondary:hover {
  background: linear-gradient(135deg, var(--bodik-gold-dark), #d95700);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 105, 0, 0.4);
  color: white !important;
}

/* 注目アプリ グラスカード */
.featured-app-glass {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.36);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.featured-app-glass:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
}
.featured-app-glass .p-6,
.featured-app-glass.p-10 {
  background: rgba(4, 24, 48, 0.96);
}
.featured-app-glass,
.featured-app-glass * {
  color: #f3fbff;
}
.featured-app-glass h2,
.featured-app-glass h2 a {
  color: #fefefe !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.38);
}
.featured-app-glass p {
  color: #eaf7ff !important;
  line-height: 1.75;
}
.featured-app-glass a.inline-flex {
  color: #ffd3ba !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32);
}
.featured-app-glass a.inline-flex:hover {
  color: #fff1e8 !important;
}
.featured-app-glass .inline-block.rounded-full {
  box-shadow: 0 8px 20px rgba(255, 105, 0, 0.24);
}
.featured-app-glass .absolute.inset-0 {
  background: linear-gradient(to top, rgba(4, 24, 48, 0.82) 0%, rgba(4, 24, 48, 0.28) 58%, transparent 100%) !important;
}

@media (max-width: 767px) {
  .rd-header-inner {
    min-height: 72px;
    gap: 0.9rem;
  }
  .rd-site-logo-image {
    width: auto;
    height: 40px;
    max-width: 180px;
  }
  #hero {
    min-height: 300px;
    background-position: center top !important;
  }
}

/* ========================================
   アプリカード
======================================== */
.app-card {
  background: white !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(14, 79, 157, 0.07) !important;
  border: 1px solid rgba(135, 162, 199, 0.2) !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
}
.dark .app-card {
  background: rgba(10, 61, 122, 0.22) !important;
  border-color: rgba(135, 162, 199, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32) !important;
}
.app-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(14, 79, 157, 0.18),
              0 0 0 2px var(--bodik-gold) !important;
  border-color: transparent !important;
}
.dark .app-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
              0 0 0 2px var(--bodik-gold),
              0 0 35px rgba(255, 105, 0, 0.18) !important;
}

/* サムネイル画像ズーム */
.app-card a.block {
  overflow: hidden;
  display: block;
}
.app-card a.block img {
  transition: transform 0.45s ease;
  width: 100%;
}
.app-card:hover a.block img {
  transform: scale(1.06);
}

/* カテゴリバッジ */
.app-card .app-category a,
.app-card .entry-header a.text-xs.font-medium.bg-blue-600,
.app-card .entry-header a.text-xs.font-medium.bg-blue-700 {
  background: linear-gradient(135deg, var(--bodik-blue), #3389c9) !important;
  border-radius: 20px !important;
  letter-spacing: 0.2px;
  color: #ffffff !important;
}

/* 地域バッジ */
.app-card .app-region a {
  background: linear-gradient(135deg, var(--bodik-gold), var(--bodik-gold-dark)) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
}

/* タイトル */
.app-card .entry-title a {
  color: var(--bodik-blue) !important;
  transition: color 0.2s;
}
.dark .app-card .entry-title a {
  color: var(--bodik-blue-light) !important;
}
.app-card .entry-title a:hover {
  color: var(--bodik-gold) !important;
}

/* 詳細リンク */
.app-card .app-links a {
  color: var(--bodik-blue) !important;
  font-weight: 600;
  transition: color 0.2s;
}
.dark .app-card .app-links a {
  color: var(--bodik-blue-light) !important;
}
.app-card .app-links a:hover {
  color: var(--bodik-gold) !important;
}

/* データソースリンク */
.app-card .data-source a {
  color: var(--bodik-blue) !important;
}
.dark .app-card .data-source a {
  color: var(--bodik-blue-light) !important;
}

/* ========================================
   セクションタイトル
======================================== */
.section-wrapper > .container > h2 {
  color: var(--bodik-blue);
  font-weight: 800;
  position: relative;
}
.dark .section-wrapper > .container > h2 {
  color: var(--bodik-blue-light);
}
.section-wrapper > .container > h2::after {
  content: '';
  display: block;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bodik-gold), rgba(255,105,0,0));
  border-radius: 2px;
  margin: 8px auto 0;
  animation: bodik-underline-grow 0.7s ease forwards;
}
@keyframes bodik-underline-grow {
  to { width: 56px; }
}

/* latest-apps の h2 */
.latest-apps-container > h2 {
  color: var(--bodik-blue);
  font-weight: 800;
}
.dark .latest-apps-container > h2 {
  color: var(--bodik-blue-light);
}

/* すべて表示 リンク */
.section-wrapper a[href*="app"],
.latest-apps-container a.inline-flex {
  color: var(--bodik-blue) !important;
  font-weight: 600;
}
.dark .section-wrapper a[href*="app"],
.dark .latest-apps-container a.inline-flex {
  color: var(--bodik-blue-light) !important;
}

/* ========================================
   CTA セクション
======================================== */
.cta-section {
  background: linear-gradient(135deg, var(--bodik-blue) 0%, #2e78cf 50%, var(--bodik-blue-mid) 100%) !important;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -8%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255,105,0,0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: bodik-orb-float 13s ease-in-out infinite;
  pointer-events: none;
}

/* ========================================
   フッター
======================================== */
#colophon {
  background: linear-gradient(180deg, var(--bodik-blue-dark) 0%, var(--bodik-blue-deeper) 100%) !important;
  border-top: none !important;
  color: var(--bodik-cream);
}
#colophon h3 {
  color: var(--bodik-blue-light) !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(179, 219, 242, 0.2);
  padding-bottom: 8px;
}
#colophon ul a,
#colophon p.text-sm a {
  color: rgba(246, 244, 240, 0.88) !important;
  transition: color 0.2s;
}
#colophon ul a:hover,
#colophon p.text-sm a:hover {
  color: var(--bodik-gold) !important;
}
#colophon .border-t {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
#colophon p.text-sm {
  color: rgba(246, 244, 240, 0.82) !important;
}
#colophon span.font-bold {
  color: var(--bodik-blue-light) !important;
}

/* ========================================
   アーカイブページ フィルター
======================================== */
.filter-sidebar .bg-white {
  border: 1px solid rgba(135, 162, 199, 0.2);
  box-shadow: 0 4px 20px rgba(14, 79, 157, 0.07);
}
.filter-sidebar h2 {
  color: var(--bodik-blue) !important;
}
.dark .filter-sidebar h2 {
  color: var(--bodik-blue-light) !important;
}
.filter-sidebar input:focus,
.filter-sidebar select:focus {
  border-color: var(--bodik-blue) !important;
  box-shadow: 0 0 0 3px rgba(14, 79, 157, 0.15) !important;
  outline: none;
}

/* ========================================
   スクロールリビール
======================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.13s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.21s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.29s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.37s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.45s; }

/* ========================================
   評価の星色
======================================== */
.app-rating span {
  font-size: 15px !important;
}

/* ========================================
   パルスアニメ
======================================== */
@keyframes bodik-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 105, 0, 0.38); }
  50%       { box-shadow: 0 0 0 10px rgba(255, 105, 0, 0); }
}
.pulse-bodik-gold {
  animation: bodik-pulse-gold 2.2s ease-in-out infinite;
}

/* ========================================
   アーカイブ ページ ヘッダー
======================================== */
.page-header .page-title {
  color: var(--bodik-blue) !important;
}
.dark .page-header .page-title {
  color: var(--bodik-blue-light) !important;
}

/* ========================================
   single-app ページ
======================================== */
.app-categories a.bg-blue-600,
.app-categories a.bg-blue-700 {
  background: linear-gradient(135deg, var(--bodik-blue), #3389c9) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
}

/* カテゴリカード - 背景と差別化するため白地+濃いボーダー */
.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;
  border-radius: 12px !important;
}
.category-card h3 {
  color: var(--bodik-blue) !important;
}
.category-card span {
  color: rgba(15, 39, 66, 0.68) !important;
}
.category-card:hover {
  background: linear-gradient(180deg, #eef8ff 0%, #cfe9ff 100%) !important;
  border-color: var(--bodik-blue) !important;
  box-shadow: 0 8px 28px rgba(14, 79, 157, 0.22), 0 0 0 1px rgba(14, 79, 157, 0.15) !important;
  transform: translateY(-4px);
}
.category-card:hover h3 {
  color: var(--bodik-blue-deeper) !important;
}
.category-card:hover span {
  color: rgba(15, 39, 66, 0.85) !important;
}

/* ========================================
   ヒーローセクション テキスト強制上書き
======================================== */
/* サブタイトル・説明文を常に明るく表示 */
#hero p,
#hero .hero-content p {
  color: rgba(179, 219, 242, 0.95) !important;
}

/* 注目アプリカード内テキストを常に明るく表示 */
#hero .featured-app-glass p,
#hero .featured-app-glass h2,
#hero .featured-app-glass h3,
#hero .featured-app-glass a,
#hero .featured-app-glass span:not(.inline-block) {
  color: #f3fbff !important;
}
#hero .featured-app-glass h2 a,
#hero .featured-app-glass a.hover\:opacity-80 {
  color: #ffffff !important;
}
#hero .featured-app-glass a.inline-flex {
  color: #ffd3ba !important;
}

/* ========================================
   ライトモード配色監査上書き
======================================== */
body:not(.dark) .site-main,
body:not(.dark) .site-main p,
body:not(.dark) .site-main li,
body:not(.dark) .site-main label,
body:not(.dark) .site-main dt,
body:not(.dark) .site-main dd {
  color: #18324d;
}

body:not(.dark) .site-main .text-gray-900,
body:not(.dark) .site-main .text-gray-800,
body:not(.dark) .site-main .text-gray-700,
body:not(.dark) .site-main .text-gray-600,
body:not(.dark) .site-main .text-gray-500,
body:not(.dark) .site-main .text-gray-400 {
  color: #18324d !important;
}

body:not(.dark) .site-main .bg-white,
body:not(.dark) .site-main .bg-gray-50,
body:not(.dark) .site-main .bg-gray-100,
body:not(.dark) .site-main .data-source-card,
body:not(.dark) .site-main .comments-area,
body:not(.dark) .site-main .no-results,
body:not(.dark) .site-main article.bg-white,
body:not(.dark) .site-main .filter-sidebar > div,
body:not(.dark) .site-main .tech-tags-container,
body:not(.dark) .site-main .user-dropdown {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 244, 247, 0.98) 100%) !important;
  color: #18324d !important;
  border-color: rgba(135, 162, 199, 0.28) !important;
}

body:not(.dark) .site-main input:not([type="submit"]):not([type="button"]):not([type="reset"]),
body:not(.dark) .site-main select,
body:not(.dark) .site-main textarea {
  background-color: #f8f8f9 !important;
  color: #18324d !important;
  border-color: rgba(135, 162, 199, 0.42) !important;
}

/* コメントフォームの投稿ボタン */
#commentform input[type="submit"],
.comment-form input[type="submit"] {
  background: linear-gradient(135deg, var(--bodik-blue), #3389c9) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 15px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(14, 79, 157, 0.3) !important;
}
#commentform input[type="submit"]:hover,
.comment-form input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(14, 79, 157, 0.4) !important;
}

body:not(.dark) .site-main input::placeholder,
body:not(.dark) .site-main textarea::placeholder {
  color: rgba(24, 50, 77, 0.52) !important;
}

body:not(.dark) .site-main a:not(.btn-bodik-primary):not(.btn-bodik-secondary):not(.app-open-button) {
  color: #0e4f9d;
}

body:not(.dark) .site-main a:hover:not(.btn-bodik-primary):not(.btn-bodik-secondary):not(.app-open-button) {
  color: #0a3d7a;
}

body:not(.dark) .site-main .bg-gray-200,
body:not(.dark) .site-main .bg-gray-300 {
  background: linear-gradient(180deg, #ebebed 0%, #d8d8dc 100%) !important;
  color: #18324d !important;
  border-color: rgba(135, 162, 199, 0.34) !important;
}

body:not(.dark) .site-main .bg-light-primary,
body:not(.dark) .site-main .bg-blue-600,
body:not(.dark) .site-main .bg-blue-700,
body:not(.dark) .site-main .bg-green-600,
body:not(.dark) .site-main .bg-green-700,
body:not(.dark) .site-main .bg-gray-600,
body:not(.dark) .site-main .bg-gray-700 {
  color: #ffffff !important;
}

body:not(.dark) .site-main .entry-content,
body:not(.dark) .site-main .prose,
body:not(.dark) .site-main .prose p,
body:not(.dark) .site-main .prose li,
body:not(.dark) .site-main .prose strong,
body:not(.dark) .site-main .prose blockquote {
  color: #18324d !important;
}

/* ========================================
   ライトモードのコントラスト補正
======================================== */
body:not(.dark) .bg-light-secondary,
body:not(.dark) .bg-light-accent,
body:not(.dark) .data-source-icon.bg-light-secondary {
  color: var(--bodik-blue-deeper) !important;
}

body:not(.dark) .bg-light-primary,
body:not(.dark) .bg-blue-600,
body:not(.dark) .bg-blue-700,
body:not(.dark) .bg-green-600,
body:not(.dark) .bg-green-700,
body:not(.dark) .bg-gray-600,
body:not(.dark) .bg-gray-700 {
  color: #ffffff !important;
}

body:not(.dark) .rounded-full.bg-blue-600,
body:not(.dark) .rounded-full.bg-blue-700,
body:not(.dark) .featured-badge span.bg-blue-600,
body:not(.dark) .taxonomy-region .inline-flex.bg-blue-600,
body:not(.dark) .app-regions a.bg-green-700 {
  color: #ffffff !important;
}

body:not(.dark) .cta-section a.bg-transparent,
body:not(.dark) .cta-section .border-blue-600.text-blue-600 {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--bodik-blue) !important;
  border-color: rgba(14, 79, 157, 0.75) !important;
  box-shadow: 0 8px 24px rgba(7, 45, 89, 0.16) !important;
}

body:not(.dark) .cta-section a.bg-transparent:hover,
body:not(.dark) .cta-section .border-blue-600.text-blue-600:hover {
  background: var(--bodik-blue) !important;
  color: #ffffff !important;
}

body:not(.dark) .btn-bodik-primary,
body:not(.dark) .btn-bodik-primary:hover,
body:not(.dark) .btn-bodik-secondary,
body:not(.dark) .btn-bodik-secondary:hover,
body:not(.dark) .app-open-button,
body:not(.dark) .app-open-button:hover {
  color: #ffffff !important;
}

body:not(.dark) .app-card [style*="background:rgba(135,162,199,0.2)"] {
  color: var(--bodik-blue-deeper) !important;
}

/* ============================================================
   コメントエリア ライトモード対応
   ============================================================ */

/* コメントエリア内の白・薄グレー文字をダーク色に変換 */
body:not(.dark) .site-main .comments-area .text-white,
body:not(.dark) .site-main .comments-area .text-gray-300 {
  color: #18324d !important;
}

/* コメントカード：ダーク背景をライト背景に変更 */
body:not(.dark) .site-main .comments-area .comment-body {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f4 100%) !important;
  border-color: rgba(135, 162, 199, 0.3) !important;
}

/* Googleサインインセクション：ライトモード向け背景・枠 */
body:not(.dark) .site-main #bodik-google-signin-section {
  background: rgba(14, 79, 157, 0.04) !important;
  border-color: rgba(14, 79, 157, 0.15) !important;
}

/* 星評価ラベル・表示テキスト */
body:not(.dark) .site-main .star-rating-label {
  color: #18324d !important;
}
body:not(.dark) .site-main .rating-display {
  color: #555555 !important;
}

/* 「次回のコメントで使用するため〜」クッキー同意欄を非表示 */
.comment-form-cookies-consent {
  display: none !important;
}

/* ============================================================
   Markdown レンダリング スタイル (.bodik-md-*)
   ============================================================ */

.bodik-md-h { font-weight: 700; line-height: 1.3; margin: 1.4em 0 0.5em; color: #0e4f9d; }
.bodik-md-h1 { font-size: 1.75rem; border-bottom: 2px solid rgba(14,79,157,0.2); padding-bottom: 0.25em; }
.bodik-md-h2 { font-size: 1.4rem;  border-bottom: 1px solid rgba(14,79,157,0.15); padding-bottom: 0.2em; }
.bodik-md-h3 { font-size: 1.15rem; }
.bodik-md-h4 { font-size: 1rem; }
.bodik-md-h5, .bodik-md-h6 { font-size: 0.9rem; color: #3a6db5; }

.entry-content p,
.entry-content .bodik-md-h ~ p { margin: 0 0 0.9em; line-height: 1.8; color: #18324d; }

.bodik-md-ul,
.bodik-md-ol { margin: 0.5em 0 1em 1.5em; padding: 0; }
.bodik-md-ul { list-style: disc; }
.bodik-md-ol { list-style: decimal; }
.bodik-md-ul li,
.bodik-md-ol li { margin-bottom: 0.3em; line-height: 1.7; color: #18324d; }

.bodik-md-blockquote {
  margin: 1em 0;
  padding: 0.75em 1em;
  border-left: 4px solid #87a2c7;
  background: rgba(14,79,157,0.04);
  border-radius: 0 6px 6px 0;
  color: #3a5a80;
  font-style: italic;
}

.bodik-md-hr {
  border: none;
  border-top: 1px solid rgba(135,162,199,0.35);
  margin: 1.5em 0;
}

.bodik-md-pre {
  background: #1e2a3a;
  border-radius: 8px;
  padding: 1em 1.25em;
  overflow-x: auto;
  margin: 1em 0;
}
.bodik-md-pre code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  color: #c9d8ee;
  white-space: pre;
}

.bodik-md-code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85em;
  background: rgba(14,79,157,0.08);
  color: #0e4f9d;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid rgba(14,79,157,0.12);
}

.bodik-md-link { color: #0e4f9d; text-decoration: underline; }
.bodik-md-link:hover { color: #0a3d7a; }

.bodik-md-img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5em 0; }