/* ===== Single (post) only — uses tokens ===== */
body.bac-single-post{
  --single-max: 780px; /* 読了性用の幅（必要なら） */
}

/* 読了性：本文幅をやや絞る（テーマに合わせて適用範囲を絞ってOK） */
body.bac-single-post .l-main .entry-content,
body.bac-single-post .p-main .entry-content,
body.bac-single-post .post .entry-content{
  max-width: var(--single-max);
}

/* タイポ＆装飾（カテゴリ色を使用） */
body.bac-single-post a{ color: var(--cat-link); }
body.bac-single-post .entry-title,
body.bac-single-post h1{
  border-left: 6px solid var(--cat-brand);
  padding-left: .55em;
}

body.bac-single-post h2{
  margin-top: 2.2em;
  border-left: 4px solid var(--cat-brand);
  padding-left: .5em;
}

body.bac-single-post h3{
  margin-top: 1.8em;
  border-bottom: 2px solid var(--cat-accent-weak);
  padding-bottom: .2em;
}

/* 引用・注意枠 */
body.bac-single-post blockquote{
  border-left: 3px solid var(--cat-brand);
  background: var(--cat-accent-weak);
  padding: 1em 1.2em;
  border-radius: 10px;
}
body.bac-single-post .notice,
body.bac-single-post .cta-box{
  border: 1px solid var(--cat-border);
  background: #fff;
  border-radius: 12px;
  padding: 1em 1.2em;
}

/* 目次（プラグイン想定） */
body.bac-single-post .toc, 
body.bac-single-post .table-of-contents{
  border:1px solid var(--cat-border);
  background:#fff;
  border-radius:12px;
  padding:1em;
}

/* テーブル・画像 */
body.bac-single-post table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--cat-border);
  border-radius:10px; overflow:hidden;
}
body.bac-single-post table th,
body.bac-single-post table td{ border-bottom:1px solid var(--cat-border); padding:.7em .8em; }
body.bac-single-post figure img{ border-radius:12px; }

/* ===== base tokens (既定) ===== */
:root{
  --cat-brand:#0b6aff;         /* 強調色（ボタン/見出しなど） */
  --cat-bg:#ffffff;            /* ページ背景 */
  --cat-link:#0b6aff;          /* リンク色 */
  --cat-border:rgba(0,0,0,.08);
  --cat-accent-weak:rgba(0,0,0,.04);
  --hero-overlay:rgba(0,0,0,.28); /* ヒーロー画像の上に被せる薄い幕 */
}

/* ===== 親: インスタグラム基礎ガイド (instagram-basics) ===== */
.catgroup-instagram-basics{
  --cat-brand:#3B82F6;         /* blue-500 */
  --cat-bg:#F5F8FF;
  --cat-link:#1D4ED8;          /* blue-700 */
  --hero-overlay:rgba(15,23,42,.35); /* 紺寄りのオーバーレイで可読性UP */
}

/* ===== 親: フォロワーを増やす方法 (increase-followers) ===== */
.catgroup-increase-followers{
  --cat-brand:#10B981;         /* emerald-500 */
  --cat-bg:#F3FBF7;
  --cat-link:#0E9F6E;          /* emerald-600 */
  --hero-overlay:rgba(16,185,129,.28);
}

/* ===== 親: インスタトラブル解決 (instagram-troubleshooting) ===== */
.catgroup-instagram-troubleshooting{
  --cat-brand:#F59E0B;         /* amber-500：注意喚起系 */
  --cat-bg:#FFF8ED;
  --cat-link:#B45309;          /* amber-700 */
  --hero-overlay:rgba(0,0,0,.32);
}

/* ===== 親: Instagram最新情報 (instagram-news) ===== */
.catgroup-instagram-news{
  --cat-brand:#FFFFFF;         /* ダーク背景上の強調 */
  --cat-bg:#0F172A;            /* slate-900 */
  --cat-link:#93C5FD;          /* blue-300 */
  --hero-overlay:rgba(3,7,18,.45);
}

/* ===== 共通UI（var参照に統一） ===== */
body{ background:var(--cat-bg); }
a{ color:var(--cat-link); }
.category-menu .btn{
  color:#fff;
  background:var(--cat-brand);
  border:1px solid var(--cat-border);
}
.badge{ background:var(--cat-accent-weak); }
h2, .c-widget__title{ border-left:4px solid var(--cat-brand); padding-left:.6em; }


/* 個別記事（post）のアイキャッチだけ 4:3 に固定 */
/* SWELLでよく使われるラッパークラスを網羅しつつ、single専用にスコープ */
body.bac-single-post :where(.post-thumbnail, .c-eyecatch, .eyecatch, .p-articleEyecatch, .c-postThumb) img.wp-post-image{
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;     /* aspect-ratio と併用で 4:3 を維持 */
  object-fit: cover;
  display: block;
}

.p-breadcrumb__list.l-container{
	padding:0px;
}

/* ===== スラッグ別オーバーレイ（共通透かしの後に置く） ===== */

/* instagram-basics：上→下の白グラデ */
.is-cat-instagram-basics .cat-hero__bg::after{
  background: linear-gradient(to bottom, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%);
}

/* instagram-troubleshooting：暗め想定で薄膜 */
.is-cat-instagram-troubleshooting .cat-hero__bg::after{
  background: rgba(255,255,255,.12);
}

/* growth-tips：明るめ想定でさらに控えめ */
.is-cat-growth-tips .cat-hero__bg::after{
  background: rgba(255,255,255,.08);
}

/* latest-updates：下→上の白グラデ（下側のテキスト保護） */
.is-cat-latest-updates .cat-hero__bg::after{
  background: linear-gradient(to top, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 60%);
}

/* voice：やや黄味の透明グラデ */
.is-cat-voice .cat-hero__bg::after{
  background: linear-gradient(180deg, rgba(255,255,240,.18), rgba(255,255,255,0));
}

/* （任意）黒グラデ濃度もカテゴリ別に微調整したい場合 */
.is-cat-instagram-basics .cat-hero__inner.has-img{
  background: linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.22));
}