/* ===================================================
   style-hints.css — Natural Warm 共通スタイル上書き
   hints.html および全ブログ記事で読み込む
   =================================================== */

:root {
  --bg:           #faf8f5;
  --bg-warm:      #f2ebe3;
  --accent:       #c47a5a;
  --accent-dark:  #a8624a;
  --accent-light: #f5e9e1;
  --green:        #7a9e82;
  --green-light:  #edf4ee;
  --text:         #2a1f18;
  --text-sub:     #6b5c52;
  --text-muted:   #9e8c80;
  --border:       #e0d4ca;
  --white:        #ffffff;
  --serif:        "M PLUS Rounded 1c", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* ===== ベース ===== */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ===== ヒーロー（一覧ページ） ===== */
.hints-hero {
  background: var(--bg-warm) !important;
}

.hints-hero h1 {
  font-family: var(--serif) !important;
  color: var(--text) !important;
}

.hints-hero p {
  color: var(--text-sub) !important;
}

/* ===== 記事ヒーロー ===== */
.article-hero {
  background: var(--bg-warm) !important;
}

.article-hero .badge {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

.article-hero h1 {
  font-family: var(--serif) !important;
  color: var(--text) !important;
}

.article-hero .meta {
  color: var(--text-muted) !important;
}

/* ===== カテゴリフィルターボタン ===== */
.cat-btn {
  border: 1.5px solid var(--border) !important;
  color: var(--text-sub) !important;
  background: var(--white) !important;
  border-radius: 999px !important;
}

.cat-btn.active,
.cat-btn:hover {
  background: var(--accent) !important;
  color: var(--white) !important;
  border-color: var(--accent) !important;
}

/* ===== 記事カード ===== */
.hint-card {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 2px 12px rgba(42,31,24,0.05) !important;
}

.hint-card:hover {
  box-shadow: 0 8px 28px rgba(42,31,24,0.10) !important;
  border-color: var(--accent-light) !important;
}

.hint-card .card-tag {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

.hint-card .card-tag.tag-green {
  background: var(--green-light) !important;
  color: var(--green) !important;
}

.hint-card h2,
.hint-card h3 {
  color: var(--text) !important;
}

.hint-card .card-meta,
.hint-card .card-date {
  color: var(--text-muted) !important;
}

/* ===== 記事本文：セクション見出し ===== */
.article-wrap h2,
.article-body h2 {
  font-family: var(--serif) !important;
  color: var(--text) !important;
  border-left-color: var(--accent) !important;
}

.article-wrap h3,
.article-body h3 {
  color: var(--text) !important;
}

/* ===== タイプバッジ・ラベル ===== */
.type-badge,
.section-label {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

/* ===== CTA・ボタン ===== */
.article-cta,
.cta-box {
  background: var(--bg-warm) !important;
  border-color: var(--border) !important;
}

.btn-cta,
a.btn-orange,
.article-wrap a[style*="#f6b24a"],
.article-wrap a[style*="f6b24a"] {
  background: var(--accent) !important;
  color: var(--white) !important;
  border-color: var(--accent) !important;
}

/* ===== 記事内コンサルバナー ===== */
.consult-banner,
.article-consult {
  background: var(--bg-warm) !important;
  border-color: var(--border) !important;
}