/* ============================================================
   Changing.AI · WordPress 區塊 ↔ 設計系統 對接層
   只放「WordPress 輸出的 markup」對到 ds/ token 的規則。
   設計系統本身的規則一律改 ds/，不要寫在這裡。
   ============================================================ */

/* 色帶滿版時用 100vw 外推，避免出現橫向捲軸 */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ---------- 頁首 / 頁尾（DS §M 的 markup 由 template part 輸出） ---------- */
.app-header-inner .app-brand img { display: block; height: 40px; width: auto; }
.app-header .wp-block-navigation { flex: 1; font-size: var(--text-sm); }
.app-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 22px var(--space-3);
	font-weight: 500;
	color: var(--color-text-secondary);
	text-decoration: none;
	position: relative;
}
.app-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--color-text-primary); }
.app-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.app-header .wp-block-navigation [aria-current="page"] {
	font-weight: 600;
	color: var(--color-text-primary);
}
.app-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.app-header .wp-block-navigation [aria-current="page"]::after {
	content: "";
	position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
	height: 2px; background: var(--color-brand-primary);
}
/* 下拉子選單（業務 → 子分類，patterns/header.php 自動產生） */
.app-header .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-right: 4px; }
.app-header .wp-block-navigation .wp-block-navigation__submenu-icon { margin-right: var(--space-3); color: var(--color-text-muted); }
.app-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 180px !important;
	padding: var(--space-2) 0;
	border: 1px solid var(--color-border-soft) !important;
	border-radius: var(--radius-md);
	background: var(--color-surface-raised) !important;
	box-shadow: var(--shadow-popover);
}
.app-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px var(--space-4); }
.app-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--color-surface-warm); }
.app-header .wp-block-navigation .wp-block-navigation__submenu-container [aria-current="page"]::after { display: none; }
.app-header .wp-block-navigation .wp-block-navigation__submenu-container [aria-current="page"] { background: var(--color-surface-warm); }
/* 頁首下拉要蓋過計算保費面板（.cai-q-pin 也是 z-index:100、又在 DOM 後面） */
.app-header { z-index: 110; }
/* 有第三層的下拉：平常只有左欄（子分類），有第三層的子分類後面有 ›；滑鼠移到它（或鍵盤聚焦）時，同一個容器往右延伸、分隔線右邊兩欄列出第三層。桌面才套，手機全螢幕選單照舊（使用者 2026-10-12） */
@media (min-width: 600px) {
	/* 滑鼠由左欄移去右欄時，容器與右欄停留 0.3 秒才收（用 min-width／min-height 的延遲轉場；width:auto 無法轉場），免得一離開左欄就整個收起（2026-10-13） */
	.app-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(.wp-block-navigation__submenu-container) { width: auto !important; min-width: 200px !important; min-height: 0; padding: var(--space-2) 0 !important; transition: min-width 0s linear .3s, min-height 0s linear .3s; }
	.app-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> .has-child:hover),
	.app-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> .has-child:focus-within) { min-width: 600px !important; min-height: 380px; transition-delay: 0s; }
	.app-header .wp-block-navigation__submenu-container:has(.wp-block-navigation__submenu-container) > .wp-block-navigation-item { position: static; width: 196px; } /* 寬到右欄起點，中間不留沒反應的空隙 */
	.app-header .wp-block-navigation__submenu-container > .has-child { display: flex !important; align-items: center; }
	.app-header .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content { flex: 1; }
	.app-header .wp-block-navigation__submenu-container > .has-child:hover > .wp-block-navigation-item__content { background: var(--color-surface-warm); }
	.app-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { display: inline-flex !important; transform: none; margin-right: var(--space-3); }
	.app-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { position: absolute !important; top: var(--space-3) !important; bottom: var(--space-3); left: 196px !important; right: var(--space-3); display: block !important; columns: 2; column-gap: var(--space-2); min-width: 0 !important; max-height: none; overflow-y: auto; margin: 0; padding: 0 0 0 var(--space-4) !important; border: 0 !important; border-left: 1px solid var(--color-border-soft) !important; border-radius: 0; box-shadow: none; background: var(--color-surface-raised) !important; visibility: hidden !important; opacity: 0 !important; z-index: 1; transition: visibility 0s linear .3s, opacity 0s linear .3s; }
	.app-header .wp-block-navigation__submenu-container > .has-child:hover > .wp-block-navigation__submenu-container,
	.app-header .wp-block-navigation__submenu-container > .has-child:focus-within > .wp-block-navigation__submenu-container { visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; z-index: 3; transition-delay: 0s; }
	.app-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > li { break-inside: avoid; }
	/* 第三層超過 18 項（例 保障項目）改三欄、容器加寬加高 */
	.app-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:has(> li:nth-child(19)) { columns: 3; }
	.app-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> .has-child:hover > .wp-block-navigation__submenu-container > li:nth-child(19)),
	.app-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> .has-child:focus-within > .wp-block-navigation__submenu-container > li:nth-child(19)) { min-width: 900px !important; min-height: 480px; }
	.app-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px var(--space-3); }
}
/* 在子分類頁時，上層業務也標示為目前所在 */
.app-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content { font-weight: 600; color: var(--color-text-primary); }
/* 手機版選單（全螢幕）裡子分類直接展開、縮排 */
.app-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: 0 0 0 var(--space-4); background: transparent !important; }
.app-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 10px 0; }
/* 手機選單：第三層照常整段展開，⛔ 不可限高（手機選單內容不裁切，限高會壓到下一組，2026-10-13） */
.app-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { max-height: none !important; overflow: visible; }

.app-footer-brand img { display: block; height: 40px; width: auto; }
.app-footer p { margin: 0; }

/* ---------- 版面容器 ---------- */
.site-main { padding-block: var(--space-12) var(--space-20); }
@media (min-width: 768px) {
	:root { --wp--style--root--padding-left: var(--container-pad-tablet); --wp--style--root--padding-right: var(--container-pad-tablet); }
}

/* ---------- 區塊底色（群組 → 樣式） ----------
   滿版底色、內容維持在版心。舊站的 band-gray / band-brand / band-deep / band-dark
   直接沿用為別名，從 icard／bobe 搬來的內容不用改 class。 */
.is-style-band-warm, .is-style-band-sunken, .is-style-band-secondary,
.is-style-band-raised, .is-style-band-inverse,
.band-gray, .band-brand, .band-deep, .band-dark {
	box-sizing: border-box;
	padding-block: var(--space-12);
	position: relative;
}
:where(.wp-site-blocks, .editor-styles-wrapper) :is(
	.is-style-band-warm, .is-style-band-sunken, .is-style-band-secondary,
	.is-style-band-raised, .is-style-band-inverse,
	.band-gray, .band-brand, .band-deep, .band-dark
):not(.alignfull) {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px) {
	:where(.wp-site-blocks, .editor-styles-wrapper) :is(.is-style-band-warm, .is-style-band-sunken, .is-style-band-secondary, .is-style-band-raised, .is-style-band-inverse, .band-gray, .band-brand, .band-deep, .band-dark):not(.alignfull) { padding-inline: var(--container-pad-tablet); }
}

.is-style-band-warm, .band-gray      { background: var(--color-surface-warm); }
.is-style-band-sunken, .band-deep    { background: var(--color-surface-sunken); --color-prose-fill: var(--color-surface-warm); }
.is-style-band-secondary, .band-brand { background: var(--color-secondary-pale); }
.is-style-band-raised                { background: var(--color-surface-raised); }
.is-style-band-inverse, .band-dark   {
	background: var(--color-surface-inverse);
	color: var(--color-text-on-dark);
}
:is(.is-style-band-inverse, .band-dark) :is(h1, h2, h3, h4, h5, h6) { color: var(--color-text-on-dark-strong); }
:is(.is-style-band-inverse, .band-dark) a { color: var(--color-text-on-dark-strong); }

/* 白底卡片（群組 → 樣式 → 白底卡片），對應 DS §F .card */
.is-style-card {
	background: var(--color-surface-raised);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

/* ---------- 按鈕：預設＝DS CTA；外框＝DS Secondary；弱按鈕＝DS Ghost ---------- */
.wp-block-button__link { min-height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background: transparent;
	color: var(--color-secondary-mid);
	border: 1px solid var(--color-secondary-mid);
}
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--color-text-secondary);
	border-color: transparent;
}
@media (hover: hover) {
	.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--color-secondary-pale); color: var(--color-secondary-mid); }
	.wp-block-button.is-style-ghost > .wp-block-button__link:hover { background: var(--color-surface-warm); }
}
.wp-block-button__link:focus-visible { outline: var(--focus-outline) solid var(--color-secondary-mid); outline-offset: var(--focus-offset); }

/* ---------- 文章內文：沿用 DS §I .prose / 設計稿 .article-prose ----------
   post-content 區塊已掛 class="prose article-prose"，這裡只補 WordPress 區塊的差異。 */
.article-prose h1, .article-prose h2 { font-family: var(--font-serif); letter-spacing: -0.01em; }
:is(.prose, .editor-styles-wrapper .is-root-container) > * { margin-block-end: 0; }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-table { margin-inline: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
	background: var(--color-surface-raised); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-table table { border: 0; }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-table :is(th, td) { border-left: 0; border-right: 0; border-top: 0; }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-table thead { border-bottom: 0; }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-table figcaption { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-2) var(--space-3); }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-image figcaption { font-size: var(--text-sm); color: var(--color-text-muted); }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-quote { margin-inline: 0; }

/* ---------- 文章頁頭 / 列表 ---------- */
.post-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.post-meta a { color: var(--color-text-muted); }
.post-list .wp-block-post { padding-block: var(--space-6); border-bottom: 1px solid var(--color-border-faint); }
.post-list .wp-block-post-title { font-family: var(--font-serif); font-size: var(--text-h3); margin: 0; }
.post-list .wp-block-post-excerpt { color: var(--color-text-body); }
.post-list .wp-block-post-excerpt__excerpt { margin: var(--space-2) 0 0; }
.wp-block-query-pagination { margin-top: var(--space-8); font-size: var(--text-sm); }

/* ---------- 頁尾細節（設計稿 site-footer.js 的 inline style 搬來） ---------- */
.app-footer-notice {
	padding-bottom: var(--space-6); margin: 0 auto var(--space-8) !important;
	border-bottom: 1px solid var(--color-hairline-on-dark-faint);
	color: var(--color-state-warn-on-dark);
	font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 600;
	line-height: var(--leading-snug); text-align: center; max-width: 60rem;
}
.app-footer .app-footer-grid { grid-template-columns: minmax(0, 1fr); }
.app-footer-legal {
	color: var(--color-text-on-dark-muted); font-size: var(--text-sm);
	line-height: var(--leading-relaxed); margin-top: var(--space-3) !important; max-width: 40rem;
}

/* ---------- 修正（本機測試後補） ---------- */
/* 按鈕是連結元素，不吃全站連結底線 */
.wp-element-button, .wp-block-button__link { text-decoration: none !important; }
/* 色帶內的段落間距（prose 的 > * + * 只管第一層） */
:is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark, .is-style-card) > * + * { margin-top: var(--space-3); }
:is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark) > :first-child { margin-top: 0; }
/* 色帶緊鄰色帶時不留米色縫 */
:is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark) + :is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark) { margin-top: 0 !important; }
/* DS .prose a 會把按鈕字染成連結色，按鈕在文章內要蓋回來 */
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-button__link { color: #fff; }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--color-secondary-mid); }
:is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-button.is-style-ghost > .wp-block-button__link { color: var(--color-text-secondary); }
/* 手機版選單按鈕靠右 */
.app-header .wp-block-navigation__responsive-container-open { margin-left: auto; }
@media (max-width: 599px) { .app-header .wp-block-navigation { justify-content: flex-end; } }
/* 頁首內層是 flex，WordPress 的區塊間距（margin-top）會把選單往下推，歸零 */
.app-header-inner > * { margin-block: 0; }
.app-header .wp-block-navigation { align-self: stretch; align-items: center; }

/* 文章底部的友站 Banner（inc/partner-banner.php） */

/* 文章頁：標題上方導覽列、下方作者／最後更新（inc/post-meta.php） */
.cai-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-text-muted)}
.cai-breadcrumb a{color:var(--color-text-secondary);text-decoration:none}
.cai-breadcrumb a:hover{color:var(--color-secondary-mid);text-decoration:underline}
.cai-breadcrumb-sep{color:var(--color-text-subtle)}
.cai-byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0;font-size:var(--text-sm);color:var(--color-text-muted)}
.cai-byline-author{font-weight:600;color:var(--color-text-secondary)}

/* ==========================================================================
   文章版面（2026-10-08 在草稿 #243 逐項定案）
   ========================================================================== */

/* ---- 標題區（hero）：業務色深底、反白字；頁首、標題區、內文之間不留縫 ---- */
.single .wp-site-blocks > .site-main{margin-top:0!important;padding-top:0}
.single .site-main > header.wp-block-group{margin-top:0!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;max-width:none!important;
  padding:var(--space-12) max(var(--wp--style--root--padding-left,16px),calc(50vw - var(--wp--style--global--content-size,60rem)/2)) var(--space-10);
  background:var(--color-secondary-deep);color:var(--color-text-on-dark);margin-bottom:var(--space-12)!important}
.single .site-main > header.wp-block-group > *{max-width:var(--wp--style--global--content-size,60rem);margin-left:0!important;margin-right:0!important}
.single .site-main > header .wp-block-post-title{font-size:var(--text-h1);line-height:var(--leading-tight);margin-top:var(--space-3)!important;color:#FFFFFF}
.single .site-main > header .cai-byline{margin-top:var(--space-4)!important;color:var(--color-text-on-dark)}
.single .site-main > header .cai-byline-author{color:var(--color-text-on-dark-strong)}
.single .site-main > header .cai-byline-sep{color:var(--color-text-on-dark-muted)}
.single .site-main > header .cai-breadcrumb, .single .site-main > header .cai-breadcrumb-sep{color:var(--color-text-on-dark-muted)}
.single .site-main > header .cai-breadcrumb a{color:var(--color-text-on-dark)}
.single .site-main > header .cai-breadcrumb a:hover{color:var(--color-text-on-dark-strong)}
.cai-byline-sep{color:var(--color-text-subtle)}

/* ---- 內文節奏：章節（h2）之間至少 120px；段落 16px ---- */
:is(.article-prose, .editor-styles-wrapper .is-root-container) > h2{position:relative;font-size:var(--text-h2);line-height:var(--leading-snug);padding-left:18px;margin-top:120px!important;margin-bottom:0}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > h2:first-child{margin-top:0!important}
/* h2 前方直立細線：赭色（設計系統的編輯語氣色，跨業務固定），拉長到整個字高 */
:is(.article-prose, .editor-styles-wrapper .is-root-container) > h2::before{content:"";position:absolute;left:0;top:.14em;bottom:.02em;width:3px;border-radius:2px;background:var(--color-accent-mid)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > h2 + *{margin-top:var(--space-3)!important}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > p + p{margin-top:var(--space-4)!important}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > p + .wp-block-list{margin-top:var(--space-4)!important}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-list + p{margin-top:var(--space-4)!important}
/* 比較表第一欄是列名，不要被擠到折行 */
@media (min-width:641px){:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table :is(th, td):first-child{white-space:nowrap}}
/* 手機：多欄比較表改為可橫向捲動，第一欄固定，不把每格切成一字一行 */
@media (max-width:640px){:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table{background:linear-gradient(to left,var(--color-surface-raised),var(--color-surface-raised)) right/16px 100% no-repeat local,linear-gradient(to left,rgba(0,0,0,.14),transparent) right/16px 100% no-repeat scroll,var(--color-surface-raised)}:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table table:has(tr > :nth-child(4)){min-width:560px}:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table table:has(tr > :nth-child(4)) :is(th, td):first-child{white-space:nowrap}:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table table:not(:has(tr > :nth-child(4))){min-width:0}:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table table:not(:has(tr > :nth-child(4))) thead th{white-space:normal}:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table :is(th, td):first-child{position:sticky;left:0;z-index:1}:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table td:first-child{background:var(--color-surface-raised)}}
.article-prose > .cai-plans{margin-block:var(--space-6) 0}
/* ---- 表格樣式「單次全年對照」（公司頁投保條件一覽，2026-10-21 定案）：第2、3欄之間虛線；跨兩欄的格＝單次全年相同，淡米底＋標籤 ---- */
:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table.is-style-single-annual :is(th, td):nth-child(2):not([colspan]){border-right:1px dashed var(--color-border-default)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table.is-style-single-annual td[colspan="2"]{background:var(--color-surface-warm)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) .wp-block-table.is-style-single-annual td[colspan="2"]::before{content:"單次、全年相同";display:table;margin-bottom:2px;padding:0 8px;font-size:var(--text-xs);line-height:1.6;color:var(--color-accent-deep);background:var(--color-surface-raised);border:1px solid var(--color-accent-pale);border-radius:999px}

/* ---- 內建「詩句」區塊＝導語：暖色底、襯線粗體、深赭色 ---- */
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-verse{margin-top:var(--space-4)!important;padding:var(--space-5) var(--space-6);border:0;border-radius:var(--radius-md);background:var(--color-surface-warm);font-family:var(--font-serif);font-size:var(--text-xl);font-weight:600;line-height:var(--leading-relaxed);color:var(--color-accent-deep);white-space:pre-wrap;overflow:visible}

/* ---- 內建「粗體」：重點字加淡赭色螢光底，方便掃讀 ---- */
:is(.article-prose, .editor-styles-wrapper .is-root-container) strong{font-weight:700;color:var(--color-text-primary);background:linear-gradient(transparent 60%,var(--color-accent-pale) 60%);padding:0 .1em}

/* ---- 內建「引文」區塊的「提示」樣式：暖色底、左赭色粗邊；內放「標題（H4）」＋「編號清單」 ---- */
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote.is-style-tip{margin-top:var(--space-8)!important;padding:var(--space-5) var(--space-6) var(--space-6);border:1px solid color-mix(in srgb,var(--color-accent-mid) 30%,transparent);border-left:4px solid var(--color-accent-mid);border-radius:var(--radius-md);background:var(--color-accent-pale);color:var(--color-text-body);font-style:normal}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote.is-style-tip p{margin:0;color:var(--color-text-body);font-style:normal}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote.is-style-tip > h4{display:flex;align-items:center;gap:10px;margin:0 0 var(--space-3);font-family:var(--font-sans);font-size:var(--text-base);font-weight:700;letter-spacing:0;text-transform:none;color:var(--color-accent-deep)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote.is-style-tip > h4::before{content:"";flex:0 0 auto;width:20px;height:20px;background:var(--color-accent-mid);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote.is-style-tip ol{margin:0;padding:0;list-style:none;counter-reset:tip}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote.is-style-tip ol > li{position:relative;counter-increment:tip;padding-left:30px;color:var(--color-text-body)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote.is-style-tip ol > li + li{margin-top:var(--space-3)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote.is-style-tip ol > li::before{content:counter(tip);position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--color-accent-mid);color:#fff;font:600 .75rem/20px var(--font-num);text-align:center}

/* ---- 段落「預告」樣式：低調小字、上方細線、「即將推出」小框（文末自動放，inc/partner-banner.php） ---- */
p.is-style-teaser{margin-top:var(--space-16);padding-top:var(--space-5);border-top:1px solid var(--color-border-faint);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-text-muted)}
p.is-style-teaser::before{content:"即將推出";display:inline-block;margin-right:10px;padding:0 8px;border:1px solid color-mix(in srgb,var(--color-accent-mid) 40%,transparent);border-radius:999px;font-size:var(--text-xs);font-weight:600;line-height:1.7;color:var(--color-accent-deep);vertical-align:1px}
.cai-article-end > .cai-partner-banner{margin-top:var(--space-8)}
.cai-article-end > .cai-partner-banner:first-child{margin-top:var(--space-16)}

/* ---- 表格、詳情等有外框的區塊：前後至少 24px，不貼著上下文字（使用者 2026-10-08） ---- */
:is(.article-prose, .editor-styles-wrapper .is-root-container) > :is(.wp-block-table, .wp-block-details, figure.wp-block-image){margin-top:var(--space-6)!important}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > :is(.wp-block-table, .wp-block-details, figure.wp-block-image, .wp-block-quote, .wp-block-verse, .cai-plans) + :not(h2){margin-top:var(--space-6)!important}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > h2 + :is(.wp-block-table, .wp-block-details){margin-top:var(--space-4)!important}
/* 連續的詳情（FAQ）要接成同一塊，不隔開（設計系統 §I.1.1：連續 details 組成一張面板） */
:is(.article-prose, .editor-styles-wrapper .is-root-container) > .wp-block-details + .wp-block-details{margin-top:0!important}

/* ---------- 分類入口頁（/travel/benefits/）：清單樣式「保障目錄」、段落樣式「小字標籤」（2026-10-10 定案，原型在測試頁 #217） ---------- */
/* 已上線的項目：名稱加連結＋一行說明 → 整張卡可點；未上線：只寫名稱、不加連結 → 自動虛線框＋「即將推出」 */
:is(.article-prose, .editor-styles-wrapper .is-root-container) > p.is-style-eyebrow{margin-top:var(--space-2)!important;font-size:var(--text-sm);color:var(--color-text-muted)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > ul.is-style-benefit-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-5)!important;padding:0;list-style:none}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > ul.is-style-benefit-index > li{position:relative;margin:0;padding:var(--space-4) var(--space-5);border:1px solid var(--color-border-soft);border-radius:var(--radius-md);background:var(--color-surface-raised);font-size:var(--text-sm);line-height:1.6;color:var(--color-text-muted);transition:border-color .15s,box-shadow .15s}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > ul.is-style-benefit-index > li::marker{content:none}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > ul.is-style-benefit-index > li > a:first-child{display:block;margin-bottom:4px;font-size:var(--text-base);font-weight:700;color:var(--color-text-primary);text-decoration:none}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > ul.is-style-benefit-index > li > a:first-child::after{content:" →";color:var(--color-accent-mid)}
.article-prose > ul.is-style-benefit-index > li > a:first-child::before{content:"";position:absolute;inset:0;border-radius:inherit}
.article-prose > ul.is-style-benefit-index > li:has(> a:first-child):hover{border-color:var(--color-accent-mid);box-shadow:var(--shadow-popover)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > ul.is-style-benefit-index > li:not(:has(a)){background:transparent;border-style:dashed;font-weight:600}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > ul.is-style-benefit-index > li:not(:has(a))::after{content:"即將推出";margin-left:8px;padding:1px 8px;border-radius:var(--radius-pill);background:var(--color-surface-warm);font-size:.75rem;font-weight:500}
@media (max-width:640px){:is(.article-prose, .editor-styles-wrapper .is-root-container) > ul.is-style-benefit-index{grid-template-columns:1fr}}

/* ---------- 內文裡的色帶（群組 → 樣式 band-*）：小標與內文一致；計算保費欄併入色帶上緣（2026-10-10 定案，原型在測試頁 #217） ---------- */
:is(.article-prose, .editor-styles-wrapper .is-root-container) > :is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark){margin-top:120px!important}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > :is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark) > h2{position:relative;font-size:var(--text-h2);line-height:var(--leading-snug);padding-left:18px;margin-top:0!important;margin-bottom:0}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > :is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark) > h2::before{content:"";position:absolute;left:0;top:.14em;bottom:.02em;width:3px;border-radius:2px;background:var(--color-accent-mid)}
:is(.article-prose, .editor-styles-wrapper .is-root-container) > :is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark) > h2 + *{margin-top:var(--space-3)!important}
/* quote-panel.js 把色帶裡的計算保費欄移到色帶正上方並加 .cai-q-on-band：此時色帶上緣改由 Panel 撐開 */
.article-prose > .cai-q-pin.cai-q-on-band{margin-top:120px!important;margin-bottom:0!important}
.article-prose > .cai-q-pin.cai-q-on-band:not([data-stuck]){background:var(--cai-q-band-bg);box-shadow:0 calc(-1 * var(--space-10)) 0 var(--cai-q-band-bg)}
.article-prose > .cai-q-pin.cai-q-on-band + :is([class*="is-style-band-"], .band-gray, .band-brand, .band-deep, .band-dark){margin-top:0!important;padding-top:var(--space-6)}
