/* 顶栏/底栏专用样式：与 tailwind-config 品牌色一致，确保动态插入的导航和页脚始终有正确颜色 */
:root {
  --brand-50: #f8fafc;
  --brand-600: #2563eb;
  --brand-800: #1e293b;
  --brand-900: #0f172a;
  --brand-orange: #ff9d00;
  --blue-700: #1d4ed8;
}

/* 底栏背景与文字（不依赖 Tailwind，确保始终有深色背景） */
#footer-placeholder footer,
#footer-placeholder > footer,
footer.bg-brand-900 {
  background-color: var(--brand-900) !important;
  color: #fff !important;
}
#footer-placeholder .text-white {
  color: #fff !important;
}
#footer-placeholder .text-gray-400,
#footer-placeholder .text-gray-500 {
  color: #9ca3af !important;
}
#footer-placeholder .text-gray-500 {
  color: #6b7280 !important;
}
#footer-placeholder .border-gray-700 {
  border-color: #374151 !important;
}
#footer-placeholder .border-gray-800 {
  border-color: #1f2937 !important;
}
#footer-placeholder a:hover {
  color: #fff !important;
}

/* 底栏：公式SNS 图标（圆形按钮、悬停效果） */
#footer-placeholder footer a[title="Facebook"],
#footer-placeholder footer a[title="X (旧Twitter)"],
#footer-placeholder footer a[title="LINE"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  transition: background 0.2s, transform 0.2s;
}
#footer-placeholder footer a[title="Facebook"]:hover,
#footer-placeholder footer a[title="X (旧Twitter)"]:hover,
#footer-placeholder footer a[title="LINE"]:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.1);
}
#footer-placeholder footer [aria-label="公式SNS"] {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 顶栏：右侧按钮（問い合わせ）背景色 */
#navbar .bg-brand-600,
#navbar #nav-btn {
  background-color: var(--brand-600) !important;
  color: #fff !important;
}
#navbar .bg-brand-600:hover,
#navbar #nav-btn:hover {
  background-color: var(--blue-700) !important;
}

/* 顶栏：导航链接与移动端菜单按钮、图标颜色 */
#navbar .text-brand-800 {
  color: var(--brand-800) !important;
}
#navbar .text-brand-900 {
  color: var(--brand-900) !important;
}
#navbar .text-brand-900:hover,
#navbar .hover\:text-brand-600:hover,
#navbar a:hover.text-brand-800 {
  color: var(--brand-600) !important;
}
/* 顶栏最右侧：移动端汉堡菜单图标（必须有颜色，否则看不见） */
#navbar #mobile-menu-btn {
  color: var(--brand-900) !important;
}
#navbar #mobile-menu-btn:hover {
  color: var(--brand-600) !important;
}
#navbar #mobile-menu-btn svg {
  color: inherit !important;
  stroke: currentColor;
}
#navbar #mobile-menu-btn svg path {
  stroke: currentColor;
}
#navbar .bg-brand-50 {
  background-color: var(--brand-50) !important;
}
#navbar .rounded-md:hover {
  background-color: var(--brand-50) !important;
}

/* 顶栏：白色背景与边框 */
#navbar.bg-white {
  background-color: #fff !important;
}
#navbar .border-gray-200 {
  border-color: #e5e7eb !important;
}