@layer theme-custom {
/* ──────────────────────────────────────────────
   手機版關閉電子報訂閱彈窗
   原因：#edm_subscription_sidebar 在手機上會蓋住整個畫面，
   壓在頁首 Banner 與頁面標題上。桌機版維持原樣不動。
   還原方式：刪掉這段，或用 theme_css_rollback。
   ────────────────────────────────────────────── */
@media (max-width: 767.98px){
	#edm_subscription_sidebar{
		display: none !important;
	}
}

/* ──────────────────────────────────────────────
   四支柱配色系統 v4（2026-08-18）
   規格來源：2026-05-09 四大支柱配色系統 v1.0
     極簡健康 葉綠 #22c55e ｜ 極簡習慣 蝴蝶橘 #ff8a1f
     極簡 AI  科技藍 #60a5fa ｜ 極簡人生 記憶紫 #a78bfa

   做法：靠文章頁的分類連結 /blog/category/{id} 判斷這篇屬於哪根柱子，
   用 :has() 把顏色灌進 CSS 變數，底下所有裝飾都吃這個變數。
   文章內容只寫 class、不寫色碼；要換色改這裡一處，全站跟著換。

   ⚠️ 這份自訂 CSS 會被平台包進 @layer theme-custom，
   layer 內的規則永遠輸給平台自己的規則（跟特異性無關）。
   所以 bfx 家族的字級與間距一律加 !important，否則會被吃掉。

   category id：3=極簡健康　2=極簡習慣　1=極簡人生　17=極簡 AI
   還原：刪掉這一整段，或 theme_css_rollback。
   ────────────────────────────────────────────── */

/* ── 側欄／清單裡的分類名稱，四根柱子各自的顏色 ── */
body.b_blog_list a[href$="/blog/category/3"],
body.b_blog_detail a[href$="/blog/category/3"]{ color:#1B7A4B; }
body.b_blog_list a[href$="/blog/category/2"],
body.b_blog_detail a[href$="/blog/category/2"]{ color:#C1633B; }
body.b_blog_list a[href$="/blog/category/1"],
body.b_blog_detail a[href$="/blog/category/1"]{ color:#6E55B8; }
body.b_blog_list a[href$="/blog/category/17"],
body.b_blog_detail a[href$="/blog/category/17"]{ color:#2F6FB5; }

/* ── 這篇文章屬於哪根柱子 ── */
body.b_blog_detail{
	--pillar:      #ff8a1f;   /* 抓不到分類時走品牌蝴蝶橘 */
	--pillar-ink:  #C1633B;
	--pillar-wash: #FFF6EC;
	--pillar-line: #E4D9C6;
	--paper:       #FDFAF3;
	--ink-soft:    #6E6255;
}
body.b_blog_detail:has(.article-classify a[href*="/blog/category/3"]){
	--pillar:#22c55e; --pillar-ink:#1B7A4B; --pillar-wash:#EFFAF3;
}
body.b_blog_detail:has(.article-classify a[href*="/blog/category/2"]){
	--pillar:#ff8a1f; --pillar-ink:#C1633B; --pillar-wash:#FFF6EC;
}
body.b_blog_detail:has(.article-classify a[href*="/blog/category/1"]){
	--pillar:#a78bfa; --pillar-ink:#6E55B8; --pillar-wash:#F6F3FF;
}
body.b_blog_detail:has(.article-classify a[href*="/blog/category/17"]){
	--pillar:#60a5fa; --pillar-ink:#2F6FB5; --pillar-wash:#EFF6FD;
}

/* ── 標題下方的分類標籤，做成該柱子的色票膠囊 ── */
body.b_blog_detail .article-classify a{
	color: var(--pillar-ink);
	font-weight: 700;
	background: var(--pillar-wash);
	border: 1.5px solid var(--pillar);
	border-radius: 999px;
	padding: .18em .85em;
	text-decoration: none;
	display: inline-block;
	line-height: 1.6;
}
body.b_blog_detail .article-classify a:hover{
	background: var(--pillar);
	color: #fff;
}

/* ── 內文：小標、分隔線、連結都吃同一個變數 ── */
body.b_blog_detail .blog-info-text h4{
	color: var(--pillar-ink);
	border-left: 5px solid var(--pillar);
	padding-left: .6em;
	line-height: 1.5;
}
body.b_blog_detail .blog-info-text hr{
	border: none;
	border-top: 2px solid var(--pillar-line);
	margin: 28px 0;
}
body.b_blog_detail .blog-info-text a:not(.btn){
	color: var(--pillar-ink);
	text-decoration-color: var(--pillar);
	text-underline-offset: .18em;
}

/* ──────────────────────────────────────────────
   bfx 內容區塊家族｜寫文章時只用 class，不寫色碼
     .bfx-quote   金句框（框起來、置中）
       └ .bfx-eyebrow 小標籤　└ .bfx-big 大字
     .bfx-line    單句強調（左邊一條柱子色）
     .bfx-action  行動框（第一行自動變成標題）
     .bfx-stat    數字卡　└ .bfx-num 大數字　└ .bfx-statlabel 說明
     .bfx-cite    引用自己的舊文／別人的話
     .bfx-note    結尾的小字註記
   ────────────────────────────────────────────── */
body.b_blog_detail .bfx-quote{
	background: var(--pillar-wash);
	border: 3px solid var(--pillar);
	border-radius: 16px;
	padding: 22px !important;
	margin: 26px 0 !important;
	text-align: center;
}
body.b_blog_detail .bfx-eyebrow{
	font-size: 13px !important;
	color: var(--pillar-ink) !important;
	font-weight: 800 !important;
	letter-spacing: 2px !important;
}
body.b_blog_detail .bfx-big{
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 10px 0 0 !important;
	line-height: 1.5 !important;
}
body.b_blog_detail .bfx-line{
	border-left: 6px solid var(--pillar);
	background: var(--paper);
	border-radius: 10px;
	padding: 16px 18px !important;
	margin: 18px 0 !important;
	font-size: 19px !important;
	font-weight: 700 !important;
}
body.b_blog_detail .bfx-action{
	background: var(--pillar-wash);
	border-left: 6px solid var(--pillar);
	border-radius: 10px;
	padding: 18px 20px !important;
	margin: 24px 0 !important;
}
body.b_blog_detail .bfx-action > :first-child{
	font-weight: 800 !important;
	color: var(--pillar-ink) !important;
	margin-bottom: 10px !important;
}
body.b_blog_detail .bfx-action > :last-child{
	margin-bottom: 0 !important;
}
body.b_blog_detail .bfx-stat{
	margin: 18px 0 0 !important;
}
body.b_blog_detail .bfx-stat + .bfx-stat{
	margin-top: 20px !important;
}
body.b_blog_detail .bfx-num{
	font-weight: 800 !important;
	font-size: 46px !important;
	line-height: 1.1 !important;
	color: var(--pillar-ink) !important;
	font-variant-numeric: tabular-nums;
	margin: 0 !important;
}
body.b_blog_detail .bfx-num small{
	font-size: 26px !important;
	font-weight: 600 !important;
	margin-left: 4px;
}
body.b_blog_detail .bfx-statlabel{
	font-size: 15px !important;
	color: var(--ink-soft) !important;
	margin: 4px 0 0 !important;
}
body.b_blog_detail .bfx-cite{
	border-left: 4px solid var(--pillar-line);
	padding-left: 18px;
	font-size: 17px !important;
	line-height: 1.9 !important;
	margin: 20px 0 !important;
}
body.b_blog_detail .bfx-note{
	color: var(--ink-soft) !important;
	font-size: 15px !important;
	margin-top: 26px !important;
}

/* ── 手機分類膠囊列：四色 ── */
.catbar-chip[href$="/blog/category/3"]{ color:#1B7A4B; background:#EFFAF3; }
.catbar-chip[href$="/blog/category/2"]{ color:#C1633B; background:#FFF6EC; }
.catbar-chip[href$="/blog/category/1"]{ color:#6E55B8; background:#F6F3FF; }
.catbar-chip[href$="/blog/category/17"]{ color:#2F6FB5; background:#EFF6FD; }
.catbar-chip[href$="/blog/category/3"].is-active{ background:#22c55e; color:#fff; }
.catbar-chip[href$="/blog/category/2"].is-active{ background:#ff8a1f; color:#fff; }
.catbar-chip[href$="/blog/category/1"].is-active{ background:#a78bfa; color:#fff; }
.catbar-chip[href$="/blog/category/17"].is-active{ background:#60a5fa; color:#fff; }
}