/* =========================
統一文章模組版型（通用）
========================= */
/* 整體版面：置中、簡約字體 */
.article-wrap {
max-width: 860px;
margin: 0 auto;
padding: 28px 20px 48px;
font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC",
"Microsoft JhengHei", system-ui, sans-serif;
line-height: 1.9;
color: #333333;
}
/* 首圖＋摘要區塊（不包在 article-wrap 裡） */
.post-intro {
max-width: 860px;
margin: 0 auto 24px;
text-align: center;
}
.post-intro img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 16px;
}
/* 文章大標題：24px（第一層） */
.post-title {
font-size: 24px;
letter-spacing: 0.15em;
text-align: center;
color: #a04605;
margin: 0 0 24px;
}
/* 小節標題：22px（第二層，用
） */
.article-wrap h2 {
text-align: center;
font-size: 22px;
letter-spacing: 0.15em;
color: #a04605;
margin: 32px 0 18px;
}
/* 次級小標題：20px（第三層，用 ） */
.article-wrap h3 {
font-size: 20px;
margin: 24px 0 12px;
color: #5a3a1f;
}
/* 一般內文段落：18px（第四層） */
.article-wrap p {
font-size: 18px;
margin: 0 0 1.6em;
}
/* 重點段落：用黑色圓點背景標記（class = kpoint） */
.article-wrap p.kpoint {
position: relative;
padding-left: 1.4em;
font-weight: 600;
background-image: radial-gradient(circle, #000000 0, #000000 45%, transparent 46%);
background-repeat: no-repeat;
background-position: 0.2em 0.9em;
background-size: 0.45em 0.45em;
}
/* 條列重點示範：黑色實心圓點（需要時可加 class="bullet-list"） */
.article-wrap ul.bullet-list {
margin: 0 0 1.6em 1.6em;
padding: 0;
}
.article-wrap ul.bullet-list li {
font-size: 18px;
line-height: 1.9;
list-style-type: disc;
color: #000000;
margin: 0 0 0.4em;
}
/* 段落之間的細橫線：用
.article-wrap h3 {
font-size: 20px;
margin: 24px 0 12px;
color: #5a3a1f;
}
/* 一般內文段落：18px（第四層） */
.article-wrap p {
font-size: 18px;
margin: 0 0 1.6em;
}
/* 重點段落：用黑色圓點背景標記（class = kpoint） */
.article-wrap p.kpoint {
position: relative;
padding-left: 1.4em;
font-weight: 600;
background-image: radial-gradient(circle, #000000 0, #000000 45%, transparent 46%);
background-repeat: no-repeat;
background-position: 0.2em 0.9em;
background-size: 0.45em 0.45em;
}
/* 條列重點示範：黑色實心圓點（需要時可加 class="bullet-list"） */
.article-wrap ul.bullet-list {
margin: 0 0 1.6em 1.6em;
padding: 0;
}
.article-wrap ul.bullet-list li {
font-size: 18px;
line-height: 1.9;
list-style-type: disc;
color: #000000;
margin: 0 0 0.4em;
}
/* 段落之間的細橫線：用
（可省略不用） */
.article-wrap p.separator {
border-top: 1px solid #e2ddd6;
margin: 40px 0;
}
/* 延伸閱讀（若要維持舊樣式也可以共用） */
.article-wrap p.reading-link {
text-align: center;
font-size: 18px;
margin-top: 8px;
}
.article-wrap p.reading-link a {
color: #a04605;
text-decoration: none;
border-bottom: 1px solid rgba(160, 70, 5, 0.3);
padding-bottom: 2px;
}
.article-wrap p.reading-link a:hover {
border-bottom-color: rgba(160, 70, 5, 0.8);
}
/* 書籍色塊連結（了解更多書名用） */
.article-wrap p.book-link-wrap {
text-align: center;
margin: 32px 0 16px;
}
.article-wrap p.book-link-wrap + p.book-link-wrap {
margin-top: 20px;
}
/* 書籍按鈕整塊設定 */
.article-wrap a.book-link-block,
.article-wrap a.book-link-block:visited,
.article-wrap a.book-link-block:hover,
.article-wrap a.book-link-block:active {
display: inline-block;
padding: 12px 32px;
font-size: 18px;
border-radius: 999px;
background-color: #606330;
color: #ffffff !important;
text-decoration: none;
border: 1px solid #606330;
letter-spacing: 0.12em;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
transition: background-color 0.25s ease, border-color 0.25s ease,
box-shadow 0.25s ease, transform 0.15s ease;
}
.article-wrap a.book-link-block:hover {
background-color: #4e552a;
border-color: #4e552a;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
transform: translateY(1px);
}
/* 預防 span、strong 被染色 */
.book-link-block * {
color: #ffffff !important;
}
/* 按鈕：橄欖綠底＋白字（含 hover 狀態） */
.article-wrap a.book-link-block,
.article-wrap a.book-link-block:visited,
.article-wrap a.book-link-block:hover,
.article-wrap a.book-link-block:active {
display: inline-block;
padding: 12px 32px;
font-size: 18px;
border-radius: 999px;
background-color: #606330; /* 橄欖綠 CI 色 */
color: #ffffff; /* 文字白色 */
text-decoration: none;
border: 1px solid #606330;
letter-spacing: 0.12em;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
transition: background-color 0.25s ease, border-color 0.25s ease,
box-shadow 0.25s ease, transform 0.15s ease;
}
.article-wrap a.book-link-block:hover {
background-color: #4e552a; /* 稍深橄欖綠，保持日式沈穩感 */
border-color: #4e552a;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
transform: translateY(1px);
}
/* 文末「了解更多無極瑤池金母 靈修觀念」標題 */
.article-wrap p.channel-title {
text-align: center;
font-size: 18px;
letter-spacing: 0.2em;
margin: 40px 0 16px;
}
/* 文末頻道連結區塊（橫式＋圖示） */
.article-wrap ul.channel-links {
list-style: none;
padding: 0;
margin: 0 0 8px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 18px;
}
.article-wrap ul.channel-links li {
margin: 0;
}
.article-wrap ul.channel-links a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 16px;
color: #555555;
text-decoration: none;
border-bottom: none;
}
/* 圓形色塊圖示：咖啡色（YouTube）、灰色（Podcast） */
.article-wrap .channel-icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
color: #ffffff;
}
.article-wrap .channel-icon.yt {
background-color: #a04605;
}
.article-wrap .channel-icon.pod {
background-color: #888888;
}
.article-wrap ul.channel-links a span.channel-text {
border-bottom: 1px solid rgba(160, 70, 5, 0.3);
padding-bottom: 1px;
}
.article-wrap ul.channel-links a:hover span.channel-text {
border-bottom-color: rgba(160, 70, 5, 0.8);
}
"
