/* =============================================================
   快找整合顧問 — /knowledge/ 知識文章樣式
   來源：ai.sc-icg.com 的 content.css + brand-tokens.css（已驗證的版型元件庫）
   適配：內文色改用固定值（sc-icg 的 palette color-3 是淺灰，不可當內文色）
   載入範圍：僅 knowledge 單篇與彙整頁，不影響既有 590 篇案例頁
   ============================================================= */

:root{

  /* ---- 品牌色:綁 Blocksy 調色盤 ---- */
  --brand-navy: var(--theme-palette-color-1, #2A4C74);
  --brand-sky:  var(--theme-palette-color-2, #37BFF0);
  --brand-ink:  #2B2F36;   /* sc-icg 專用：palette color-3 是淺灰，不可當內文色 */
  --brand-gray: #909192;

  /* ---- Navy 階(color-mix 推導,隨 theme 連動) ---- */
  --navy-50:  color-mix(in srgb, var(--brand-navy)  7%, #fff);
  --navy-100: color-mix(in srgb, var(--brand-navy) 15%, #fff);
  --navy-200: color-mix(in srgb, var(--brand-navy) 30%, #fff);
  --navy-300: color-mix(in srgb, var(--brand-navy) 46%, #fff);
  --navy-400: color-mix(in srgb, var(--brand-navy) 70%, #fff);
  --navy-500: var(--brand-navy);
  --navy-600: color-mix(in srgb, var(--brand-navy) 84%, #000);
  --navy-700: color-mix(in srgb, var(--brand-navy) 66%, #000);
  --navy-800: color-mix(in srgb, var(--brand-navy) 50%, #000);
  --navy-900: color-mix(in srgb, var(--brand-navy) 36%, #000);

  /* ---- Sky 階 ---- */
  --sky-50:  color-mix(in srgb, var(--brand-sky) 10%, #fff);
  --sky-100: color-mix(in srgb, var(--brand-sky) 22%, #fff);
  --sky-300: color-mix(in srgb, var(--brand-sky) 76%, #fff);
  --sky-400: var(--brand-sky);
  --sky-600: color-mix(in srgb, var(--brand-sky) 68%, #000);
  --sky-700: color-mix(in srgb, var(--brand-sky) 54%, #000);

  /* ---- 中性階 ---- */
  --ink-50:#F7F7F8; --ink-100:#EDEDEE; --ink-200:#DBDBDC; --ink-300:#C2C3C3;
  --ink-400:#A6A7A8; --ink-500:var(--brand-gray); --ink-600:#717273;
  --ink-700:#555657; --ink-800:var(--brand-ink); --ink-900:#232120;

  /* ---- 背景與線 ---- */
  --bg-base:   var(--theme-palette-color-8, #fff);
  --bg-subtle: #F7F8F9;
  --border-hair:   #E3E4E6;
  --border-base:   #D2D3D5;
  --border-strong: #B9BABC;

  /* ---- 深色區塊 ---- */
  --surface:          var(--navy-800);
  --surface-deep:     var(--navy-900);
  --on-surface:       #F2F5F9;
  --on-surface-muted: #9CB0C6;
  --on-surface-hair:  rgba(255,255,255,.14);

  /* ---- 字體:襯線 display + 無襯線內文(管顧編輯部式) ---- */
  --font-display: "Source Serif 4", "Noto Serif TC", "Songti TC", serif;
  --font-sans: "Inter", "Noto Sans TC", -apple-system, "PingFang TC",
               "Microsoft JhengHei", sans-serif;
  --font-num: "Source Serif 4", "Noto Serif TC", serif;
  --fnum: "tnum" 1, "lnum" 1;
  --theme-font-family: var(--font-sans);

  /* ---- 字級(編輯部級,大標更大) ---- */
  --fs-h1:   clamp(2.5rem, 4.6vw, 4.05rem);   /* 40 → 65px */
  --fs-h2:   clamp(1.8rem, 2.7vw, 2.45rem);   /* 29 → 39px,區塊標題最多兩行 */
  --fs-h3:   clamp(1.35rem, 2vw, 1.65rem);
  --fs-h4:   1.25rem;
  --fs-h5:   1.0625rem;
  --fs-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9375rem;
  --fs-cap:  0.8125rem;
  --fs-eyebrow: 0.78rem;

  /* ---- 行高(中文襯線大標 1.28-1.3,麥肯錫中文站實測 1.4;正文要鬆) ---- */
  --lh-display: 1.28;   /* 中文襯線大標 */
  --lh-h2: 1.4;
  --lh-snug: 1.5;
  --lh-lead: 1.75;
  --lh-body: 1.95;

  /* ---- 字重/字距 ---- */
  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700;
  --ls-display: 0.005em;  /* 中文襯線微張 */
  --ls-caps: 0.14em;      /* 英文 small caps 眉標(McKinsey 實測 .075em,取中) */

  /* ---- 網格與留白(拉大呼吸感) ---- */
  --container-max: 1280px;
  --gutter: 32px;
  --grid-cols: 12;
  --pad-x: clamp(24px, 6vw, 88px);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;
  /* 區塊上下間距:桌機 80 / 平板 60 / 手機 40(統一規範) */
  --section-y: 80px;
  --head-gap: 56px;   /* 區塊標頭與內容的距離 */
  --block-gap: 48px;

  /* ---- 方角、幾乎零陰影(管顧式銳利) ---- */
  --radius-0: 0;
  --radius-xs: 2px;
  --radius-pill: 999px;
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 40%, transparent);

  /* ---- 動效(克制精準;管顧站實測入場 0.4s、hover 0.12-0.35s) ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1:.2s; --dur-2:.45s; --dur-3:.6s; --dur-4:.9s;
  --move: 12px; --stagger: 80ms;
}

/* =============================================================
   快找整合顧問 — 知識文章樣式（knowledge.css）
   專欄文章的編輯部級呈現:表格、FAQ、底線重點、粗體、重點框。
   套用範圍:.entry-content(Blocksy 文章內容容器)
   ============================================================= */

/* ---- 基礎排版 ---- */
.entry-content{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--brand-ink);}

/* ---- 內文配圖（art-figure：段落間紀實配圖，方角、髮絲細框、留白隔開） ---- */
.entry-content .art-figure{margin:var(--space-8) 0;}
.entry-content .art-figure img{width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover;border:1px solid var(--border-hair);}
.entry-content .art-figure figcaption{margin-top:var(--space-3);
  font-size:var(--fs-cap);color:var(--ink-600);line-height:1.7;}
.entry-content .wp-block-image{margin:var(--space-8) 0;}
.entry-content .wp-block-image img{width:100%;height:auto;display:block;}
@media (max-width:689.98px){
  .entry-content .art-figure img{aspect-ratio:3/2;}
}
/* 手機：彙整卡的日期與分類字級下限（Blocksy 預設 12px 過小） */
@media (max-width:689.98px){
  .entry-meta, .entry-meta *{font-size:0.875rem;}
}
.entry-content > p{margin-block:0 var(--space-5);}
/* 文章韻律樣式(標題邊距/分隔線、清單縮排、li 行高)只作用於「真正的文章內容」。
   手刻頁改為區塊後也住在 .entry-content,若不排除,這些文章樣式會壓過手刻元件
   自訂的間距(h2 多 48px 邊距+框線、h3 多邊距、pill 的 li 被套 1.85 行高)。
   用 :not(:has(...)) 排除含 .paid-home/.paid-page 包裹的區塊頁。 */
.entry-content:not(:has(.paid-home,.paid-page)) h2{
  margin:var(--space-8) 0 var(--space-5);padding-top:var(--space-5);
  border-top:1px solid var(--border-hair);}
/* ⚠️ 2026-08-18:這幾條「文章韻律」規則特異度是 (0,2,1),會壓過元件層的
   .entry-content .art-xxx(0,2,0),讓版型元件的清單被硬塞 1.4em 縮排與行距。
   一律限定「裸標籤」(:not([class])),帶 class 的清單/標題交給元件自己管。 */
.entry-content:not(:has(.paid-home,.paid-page)) h3:not([class]){margin:var(--space-7) 0 var(--space-4);}
.entry-content:not(:has(.paid-home,.paid-page)) ul:not([class]),
.entry-content:not(:has(.paid-home,.paid-page)) ol:not([class]){margin:0 0 var(--space-5);padding-left:1.4em;}
.entry-content:not(:has(.paid-home,.paid-page)) ul:not([class]) > li,
.entry-content:not(:has(.paid-home,.paid-page)) ol:not([class]) > li{margin-bottom:var(--space-2);line-height:1.85;}
/* 手刻頁 pill 保險:不換行,確保等高 */
.tm-person__pills li{white-space:nowrap;}

/* ---- 導言(文章第一段,class="art-lead") ----
   字級與正文一致(不放大);改用中等字重 + 略深色 + 下方留白做區隔。 */
.entry-content .art-lead{font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:var(--fw-medium);color:var(--ink-800);margin-bottom:var(--space-6);}

/* ---- 粗體:一律深藍,降低視覺噪音 ---- */
.entry-content strong,.entry-content b{color:var(--brand-navy);font-weight:var(--fw-bold);}

/* ---- 底線重點:馬克筆式(天藍淡底,取代傳統底線) ---- */
.entry-content u,.entry-content .hl{
  text-decoration:none;
  box-shadow:inset 0 -0.5em 0 var(--sky-100);
  padding-inline:1px;}

/* ---- 重點框(關鍵要點/結論先行) ---- */
.entry-content .art-key{
  background:var(--navy-50);border-left:3px solid var(--brand-sky);
  padding:var(--space-5) var(--space-6);margin:var(--space-6) 0;
  border-radius:0;}
.entry-content .art-key p:last-child{margin-bottom:0;}
.entry-content .art-key__label{display:block;font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--sky-600);margin-bottom:var(--space-2);}

/* ---- 表格:髮絲線、深藍表頭 ---- */
.entry-content .art-table,
.entry-content table{width:100%;border-collapse:collapse;margin:var(--space-6) 0;
  font-size:var(--fs-sm);line-height:1.75;}
.entry-content table th{background:var(--brand-navy);color:#fff;
  font-weight:var(--fw-semibold);text-align:left;
  padding:12px 16px;border:0;}
.entry-content table td{padding:12px 16px;border:0;
  border-bottom:1px solid var(--border-hair);vertical-align:top;color:var(--ink-700);}
.entry-content table tr td:first-child{color:var(--brand-ink);font-weight:var(--fw-medium);}
.entry-content .art-table-wrap{overflow-x:auto;margin:var(--space-6) 0;}
.entry-content .art-table-wrap table{margin:0;min-width:560px;}

/* ---- FAQ 區塊 ---- */
.entry-content .art-faq{margin:var(--space-6) 0;border-top:1px solid var(--border-strong);}
.entry-content .art-faq__item{border-bottom:1px solid var(--border-hair);
  padding:var(--space-5) 0;}
.entry-content .art-faq__q{display:flex;gap:var(--space-3);align-items:baseline;
  margin:0 0 var(--space-3);font-family:var(--font-display);
  font-size:var(--fs-h5);font-weight:var(--fw-semibold);color:var(--brand-navy);}
.entry-content .art-faq__q::before{content:"Q";flex:none;
  font-family:var(--font-sans);font-size:var(--fs-cap);font-weight:var(--fw-bold);
  color:#fff;background:var(--brand-navy);width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);transform:translateY(-2px);}
.entry-content .art-faq__a{margin:0;color:var(--ink-700);line-height:1.9;}

/* ---- 引言 ---- */
.entry-content blockquote{margin:var(--space-6) 0;padding-left:var(--space-6);
  border-left:3px solid var(--brand-sky);font-family:var(--font-display);
  font-size:var(--fs-h4);line-height:1.7;color:var(--brand-navy);
  font-weight:var(--fw-regular);}
.entry-content blockquote p{margin:0;}

/* ---- 文末 CTA 帶（動態光帶 + 軌道點 + 按鈕光暈，與首頁 CTA 同語彙）---- */
.entry-content .art-cta{position:relative;overflow:clip;
  background:
    radial-gradient(70% 120% at 85% 50%,
      color-mix(in srgb, var(--brand-navy) 55%, transparent), transparent 75%),
    var(--surface-deep);
  color:var(--on-surface);
  padding:var(--space-8) var(--space-7);margin:var(--space-8) 0 0;text-align:left;}
.entry-content .art-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,
    color-mix(in srgb, var(--brand-sky) 20%, transparent) 50%,transparent 62%);
  background-size:260% 100%;
  animation:artSweep 7s ease-in-out infinite;}
@keyframes artSweep{0%{background-position:130% 0;}
  55%{background-position:-30% 0;}100%{background-position:-30% 0;}}
.entry-content .art-cta::after{content:"";position:absolute;top:50%;right:-90px;
  width:280px;height:280px;transform:translateY(-50%);border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--brand-sky) 50%, transparent);
  pointer-events:none;animation:artOrbit 40s linear infinite;}
@keyframes artOrbit{to{transform:translateY(-50%) rotate(360deg);}}
.entry-content .art-cta p{position:relative;z-index:1;
  color:var(--on-surface-muted);margin:0 0 var(--space-5);}
/* wpautop 會把按鈕包進 <p>，那個 p 吃到上面的 margin-bottom，
   讓區塊下留白變成 64+24=88 而上緣只有 64。最後一個子元素一律歸零。 */
.entry-content .art-cta > *:last-child{margin-bottom:0;}
.entry-content .art-cta h4{position:relative;z-index:1;color:#fff;
  font-family:var(--font-display);font-size:var(--fs-h4);margin:0 0 var(--space-3);}
/* ⚠️ .btn 的基礎樣式在 ai.sc-icg.com 是住在另一支 CSS，搬過來時漏了，
   導致按鈕吃到主題的連結預設樣式（白底、padding:0、箭頭貼著字）。這裡補齊。 */
.entry-content .art-cta .btn{position:relative;z-index:1;
  background:#fff;color:var(--navy-900);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;
  font-size:1.0625rem;font-weight:700;line-height:1.25;letter-spacing:.02em;
  text-decoration:none;border:0;border-radius:0;
  transition:background .2s ease,color .2s ease,transform .2s ease;}
.entry-content .art-cta .btn:hover{
  background:var(--brand-sky);color:#fff;transform:translateY(-2px);}
.entry-content .art-cta .btn:focus-visible{
  outline:3px solid #fff;outline-offset:4px;}
.entry-content .art-cta .btn::before{content:"";position:absolute;inset:-7px;
  border:1px solid color-mix(in srgb, var(--brand-sky) 65%, transparent);
  border-radius:6px;pointer-events:none;
  animation:btnHaloArt 2.4s ease-out infinite;}
@keyframes btnHaloArt{0%{opacity:.9;transform:scale(.96);}
  70%{opacity:0;transform:scale(1.12);}100%{opacity:0;transform:scale(1.12);}}
.entry-content .art-cta .btn::after{content:"→";font-family:var(--font-sans);
  animation:artArrow 1.6s ease-in-out infinite;}
@keyframes artArrow{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}
@media (prefers-reduced-motion:reduce){
  .entry-content .art-cta::before,.entry-content .art-cta::after,
  .entry-content .art-cta .btn::before,.entry-content .art-cta .btn::after{animation:none;}
}

/* =============================================================
   單篇文章標題 / 分類彙整標題（Blocksy hero-section type-2）
   管顧級深藍 masthead（v2 精修，去科技模板 tell）：
   靜態深藍（上淺下深，把標題坐進去）+ 單一角落 rim 光源（冷鋼藍、
   極慢呼吸 72s、當「點」不當「塗」）+ 一條 steel hairline keyline +
   襯線白標題。載入時光澤 settle 一次即停在畫面外，之後只剩幾乎無感的
   光暈呼吸——拿掉了永久斜向掃光與漂移網格。減動偏好下全部凍結成靜態。
   作用於「單篇文章」「分類彙整」「企業專欄列表(部落格首頁)」：
   body:is(.single-post,.category,.blog) 前綴（特異度 0,3,1 蓋過 Blocksy
   dynamic 0,3,0，背景再加 !important）。
   絕不外溢到首頁、其他頁面、標籤/作者/日期/搜尋彙整、WooCommerce 商店與商品。
   ============================================================= */
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"]{
  position:relative; overflow:hidden; isolation:isolate;
  border-bottom:1px solid color-mix(in srgb, var(--brand-sky) 30%, var(--navy-700));
  background-color:var(--navy-900) !important;
  background-image:linear-gradient(180deg,
    var(--surface) 0%, var(--navy-900) 100%) !important;
}
/* 單一角落 rim 光源：冷鋼藍、極慢呼吸（72s），疊在深藍上實際很淡 */
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"]::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(56% 92% at 93% 2%,
    color-mix(in srgb, var(--brand-sky) 58%, #5a7797) 0%, transparent 46%);
  opacity:.5;
  animation:heroBreath 72s ease-in-out infinite;
}
/* 載入時的一次性光澤 settle（1.3s 後停在畫面外，不再動） */
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"]::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 42%,
    color-mix(in srgb, var(--brand-sky) 15%, transparent) 50%, transparent 58%);
  background-size:220% 100%;
  animation:heroSettle 1.3s var(--ease-out) both;
}
@keyframes heroBreath{0%,100%{opacity:.32;}50%{opacity:.58;}}
@keyframes heroSettle{from{background-position:135% 0;}to{background-position:-35% 0;}}
/* 內容浮起 + 襯線白標題（字體才是管顧感的來源） */
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header{
  position:relative; z-index:1; color:rgba(255,255,255,.74);}
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header .page-title{
  color:#fff; font-family:var(--font-display);
  font-weight:var(--fw-regular); letter-spacing:var(--ls-display);}
/* meta / 麵包屑一律轉白，含日期分類間的「/」與麵包屑「›」分隔符 */
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header time,
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header .entry-meta,
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header .entry-meta li,
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header .entry-meta li::after,
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header .ct-breadcrumbs,
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header .ct-breadcrumbs *,
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header a{color:rgba(255,255,255,.74);}
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header a:hover{color:#fff;}
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header .last-item{color:#fff;}
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header svg{fill:currentColor;}
@media (prefers-reduced-motion:reduce){
  body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"]::before,
  body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"]::after{animation:none;}
}

/* =============================================================
   文章版型元件庫 v2(2026-08-18)
   目的:專欄文章原本只有「段落 + 一個重點框」,整篇缺乏節奏。
   本段補上十一種可輪替的版型元件,讓閱讀動線有起伏。

   設計紀律(全部沿用 DESIGN-GUIDE 鐵則,未放寬):
     ‧ 形狀:方角(--radius-0/--radius-xs),零陰影,靠 1px 髮絲線與淡底色塊分層
     ‧ 色彩:深藍 --brand-navy 當結構色;天藍只當「點」(短線、徽章、編號),
             不當大面積底色,白底不用 --sky-400 當文字(對比僅 2.1:1)
     ‧ 斷點只有 999.98px 與 689.98px 兩個
     ‧ 髮絲線只放項目之間(首項不加頂線、末項不加底線)
     ‧ 所有選擇器掛 .entry-content 底下;手刻頁(.paid-home/.paid-page)不受影響
       ⚠️ 修改 h2/h3 這類裸標籤時,選擇器必須沿用 :not(:has(.paid-home,.paid-page)),
          否則會滲進區塊化的手刻頁(2026-07-07 已出過事故)
   ============================================================= */

/* ---- 通用:膠囊眉標(給各元件的 label 共用) ---- */
.entry-content .art-eyebrow{
  display:inline-block;margin-bottom:var(--space-3);
  padding:4px 12px;border-radius:var(--radius-pill);
  background:var(--brand-navy);color:#fff;
  font-family:var(--font-sans);font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);line-height:1.5;}
/* 次級眉標:白底深藍框(用在淡底色塊上,避免整頁都是深藍膠囊) */
.entry-content .art-eyebrow--ghost{
  background:transparent;color:var(--brand-navy);
  box-shadow:inset 0 0 0 1px var(--navy-200);}

/* =============================================================
   1. H2 / H3 標題升級:髮絲線改深藍短棒,層級一眼可辨
   （字級仍交給 Blocksy 自訂器,這裡只動裝飾與間距,守鐵則 12）
   ============================================================= */
.entry-content:not(:has(.paid-home,.paid-page)) h2{
  position:relative;border-top:0;
  margin:var(--space-9) 0 var(--space-5);padding-top:var(--space-5);
  padding-left:var(--space-4);
  color:var(--brand-navy);}
/* 標題旗標一律「左側直棒」：h2 深藍 4px、h3 天藍 3px，
   縮排相同讓兩級標題左緣對齊，層級靠粗細與色階區分。
   （原本 h2 是上方橫線、h3 是左直線，同一份設計出現兩種語言。） */
.entry-content:not(:has(.paid-home,.paid-page)) h2::before{
  content:"";position:absolute;left:0;top:.22em;bottom:.22em;
  width:4px;height:auto;background:var(--brand-navy);}
/* ⚠️ h3 裝飾只作用於「裸 h3」(:not([class]))。
   FAQ 的題目是 h3.art-faq__q,已自帶 Q 徽章,再加左直線會打架。 */
.entry-content:not(:has(.paid-home,.paid-page)) h3:not([class]){
  position:relative;padding-left:var(--space-4);
  margin:var(--space-7) 0 var(--space-4);color:var(--navy-600);}
.entry-content:not(:has(.paid-home,.paid-page)) h3:not([class])::before{
  content:"";position:absolute;left:0;top:.28em;bottom:.28em;
  width:3px;background:var(--sky-300);}

/* =============================================================
   2. art-toc — 文章目錄(淡灰底、深藍頂棒、方形編號徽章、桌機兩欄)
   ============================================================= */
.entry-content .art-toc{
  background:var(--bg-subtle);border-top:3px solid var(--brand-navy);
  padding:var(--space-5) var(--space-6) var(--space-6);
  margin:var(--space-7) 0;}
.entry-content .art-toc__title{
  display:block;margin-bottom:var(--space-4);
  font-family:var(--font-sans);font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--sky-600);}
.entry-content .art-toc__list{
  list-style:none;counter-reset:toc;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3) var(--gutter);}
.entry-content .art-toc__list li{
  position:relative;margin:0;padding-left:34px;line-height:1.7;}
.entry-content .art-toc__list li::before{
  counter-increment:toc;content:counter(toc,decimal-leading-zero);
  position:absolute;left:0;top:.18em;
  width:26px;height:22px;border-radius:var(--radius-xs);
  background:var(--brand-navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-size:var(--fs-cap);
  font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;line-height:1;}
.entry-content .art-toc__list a{
  color:var(--ink-800);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--dur-1) ease;}
.entry-content .art-toc__list a:hover{border-bottom-color:var(--brand-sky);}

/* =============================================================
   3. art-key 升級 — 重點框的 label 改膠囊(原為裸眉標)
   ============================================================= */
.entry-content .art-key{
  background:var(--navy-50);border-left:3px solid var(--brand-sky);
  padding:var(--space-5) var(--space-6);margin:var(--space-7) 0;}
.entry-content .art-key__label{
  display:inline-block;margin-bottom:var(--space-3);
  padding:4px 12px;border-radius:var(--radius-pill);
  background:var(--brand-navy);color:#fff;
  font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps);text-transform:uppercase;line-height:1.5;}
.entry-content .art-key ul{margin-bottom:0;}

/* =============================================================
   4. art-callout — 提示 / 注意框(與 art-key 區隔:灰底、無左棒、頂底髮絲線)
   ============================================================= */
.entry-content .art-callout{
  background:var(--bg-subtle);
  border-top:1px solid var(--border-base);border-bottom:1px solid var(--border-base);
  padding:var(--space-5) var(--space-6);margin:var(--space-7) 0;}
.entry-content .art-callout__label{
  display:inline-block;margin-bottom:var(--space-3);
  padding:4px 12px;border-radius:var(--radius-pill);
  background:transparent;color:var(--brand-navy);
  box-shadow:inset 0 0 0 1px var(--navy-200);
  font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps);line-height:1.5;}
.entry-content .art-callout p:last-child{margin-bottom:0;}

/* =============================================================
   5. art-compare — 兩欄對照卡(常見誤解 vs 實際做法)
   誤區用中性灰、正解用深藍,不引入任何新色相
   ============================================================= */
.entry-content .art-compare{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gutter);margin:var(--space-7) 0;
  list-style:none;padding:0;}
.entry-content .art-compare__item{
  margin:0;padding:var(--space-5) var(--space-5) var(--space-6);
  border:1px solid var(--border-hair);border-top:3px solid var(--ink-300);
  background:#fff;}
.entry-content .art-compare__item--good{
  border-top-color:var(--brand-navy);background:var(--navy-50);
  border-color:var(--navy-100);}
.entry-content .art-compare__tag{
  display:inline-block;margin-bottom:var(--space-3);
  padding:3px 11px;border-radius:var(--radius-pill);
  background:var(--ink-500);color:#fff;
  font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:.08em;line-height:1.5;}
.entry-content .art-compare__item--good .art-compare__tag{background:var(--brand-navy);}
.entry-content .art-compare__title{
  margin:0 0 var(--space-3);font-family:var(--font-display);
  font-size:var(--fs-h5);font-weight:var(--fw-semibold);
  line-height:var(--lh-snug);color:var(--brand-navy);}
.entry-content .art-compare__desc{
  margin:0;font-size:var(--fs-sm);line-height:1.85;color:var(--ink-700);}

/* =============================================================
   6. art-scenes — 場景 / 情境橫列(左標籤、右說明,髮絲線只放項目之間)
   ============================================================= */
.entry-content .art-scenes{
  list-style:none;margin:var(--space-7) 0;padding:0;
  border-top:1px solid var(--border-strong);}
.entry-content .art-scenes li{
  display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);
  gap:var(--space-3) var(--space-6);align-items:start;
  margin:0;padding:var(--space-5) 0;
  border-bottom:1px solid var(--border-hair);}
.entry-content .art-scenes li:last-child{border-bottom:0;padding-bottom:0;}
.entry-content .art-scene__label{
  font-family:var(--font-sans);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);line-height:1.6;color:var(--brand-navy);
  padding-left:var(--space-3);border-left:3px solid var(--sky-300);}
.entry-content .art-scene__desc{
  margin:0;font-size:var(--fs-sm);line-height:1.85;color:var(--ink-700);}

/* =============================================================
   7. art-steps — 步驟卡(大編號徽章 + 左側連續軸線)
   ============================================================= */
.entry-content .art-steps{
  list-style:none;counter-reset:step;margin:var(--space-7) 0;padding:0;}
.entry-content .art-steps li{
  position:relative;margin:0;padding:0 0 var(--space-6) 56px;}
.entry-content .art-steps li:last-child{padding-bottom:0;}
.entry-content .art-steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:var(--radius-xs);
  background:var(--brand-navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-size:var(--fs-cap);
  font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;line-height:1;}
/* 軸線:連到下一個徽章,末項不畫 */
.entry-content .art-steps li::after{
  content:"";position:absolute;left:17.5px;top:44px;bottom:8px;
  width:1px;background:var(--border-base);}
.entry-content .art-steps li:last-child::after{display:none;}
.entry-content .art-step__title{
  margin:0 0 var(--space-2);padding-top:6px;
  font-family:var(--font-display);font-size:var(--fs-h5);
  font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--brand-navy);}
.entry-content .art-step__desc{
  margin:0;font-size:var(--fs-sm);line-height:1.85;color:var(--ink-700);}

/* =============================================================
   8. art-stats — 數據帶(襯線大數字,上下髮絲線,不用深色底)
   ============================================================= */
.entry-content .art-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--space-5) var(--gutter);margin:var(--space-7) 0;
  padding:var(--space-6) 0;
  border-top:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-strong);
  list-style:none;}
.entry-content .art-stats li{margin:0;}
.entry-content .art-stat__num{
  display:block;font-family:var(--font-num);font-variant-numeric:var(--fnum);
  font-size:clamp(2rem,3.4vw,2.75rem);font-weight:var(--fw-regular);
  line-height:1.15;letter-spacing:var(--ls-display);color:var(--brand-navy);}
.entry-content .art-stat__label{
  display:block;margin-top:var(--space-2);
  font-size:var(--fs-cap);line-height:1.7;color:var(--ink-600);}

/* =============================================================
   9. art-keypoints — 重點清單(方形徽章圓點,取代預設 bullet)
   ============================================================= */
.entry-content .art-keypoints{
  list-style:none;margin:var(--space-6) 0;padding:0;}
.entry-content .art-keypoints li{
  position:relative;margin:0 0 var(--space-3);padding-left:28px;
  line-height:1.85;color:var(--ink-700);}
.entry-content .art-keypoints li:last-child{margin-bottom:0;}
.entry-content .art-keypoints li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:8px;background:var(--brand-sky);
  box-shadow:0 0 0 1px var(--brand-navy);}

/* ---- art-checklist — 檢查清單(方框勾) ---- */
.entry-content .art-checklist{
  list-style:none;margin:var(--space-6) 0;padding:0;}
.entry-content .art-checklist li{
  position:relative;margin:0 0 var(--space-3);padding-left:32px;
  line-height:1.85;color:var(--ink-700);}
.entry-content .art-checklist li:last-child{margin-bottom:0;}
.entry-content .art-checklist li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:18px;height:18px;border:1px solid var(--navy-200);
  border-radius:var(--radius-xs);background:#fff;}
.entry-content .art-checklist li::after{
  content:"";position:absolute;left:5px;top:.62em;
  width:8px;height:4px;border-left:2px solid var(--brand-navy);
  border-bottom:2px solid var(--brand-navy);transform:rotate(-45deg);}

/* =============================================================
   10. 表格升級 — 斑馬紋 + 首欄深藍,長表格橫向捲動
   ============================================================= */
.entry-content table tbody tr:nth-child(even) td{background:var(--ink-50);}
.entry-content table tr td:first-child{color:var(--brand-navy);font-weight:var(--fw-semibold);}
.entry-content table td{border-bottom:1px solid var(--border-hair);}
.entry-content .art-tablenote{
  margin:var(--space-3) 0 0;font-size:var(--fs-cap);
  line-height:1.75;color:var(--ink-600);}

/* =============================================================
   11. art-faq 升級 — Q/A 方形徽章 + 卡片式(原為髮絲線分隔)
   ============================================================= */
.entry-content .art-faq{margin:var(--space-7) 0;border-top:0;}
.entry-content .art-faq__item{
  border:1px solid var(--border-hair);border-bottom:1px solid var(--border-hair);
  background:#fff;padding:var(--space-5) var(--space-6);margin-bottom:var(--space-3);}
.entry-content .art-faq__item:last-child{margin-bottom:0;}
.entry-content .art-faq__q{
  display:flex;gap:var(--space-3);align-items:baseline;
  margin:0 0 var(--space-3);font-family:var(--font-display);
  font-size:var(--fs-h5);font-weight:var(--fw-semibold);color:var(--brand-navy);}
.entry-content .art-faq__q::before{
  content:"Q";flex:none;font-family:var(--font-sans);
  font-size:var(--fs-cap);font-weight:var(--fw-bold);color:#fff;
  background:var(--brand-navy);width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);transform:translateY(-2px);}
.entry-content .art-faq__a{
  display:flex;gap:var(--space-3);align-items:baseline;
  margin:0;color:var(--ink-700);line-height:1.9;}
.entry-content .art-faq__a::before{
  content:"A";flex:none;font-family:var(--font-sans);
  font-size:var(--fs-cap);font-weight:var(--fw-bold);color:var(--brand-navy);
  background:var(--sky-100);width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);transform:translateY(-2px);}

/* =============================================================
   12. 引言升級 — 襯線大引號標記
   ============================================================= */
.entry-content blockquote{position:relative;padding-left:var(--space-7);}
.entry-content blockquote::before{
  content:"\201C";position:absolute;left:var(--space-4);top:-.16em;
  font-family:var(--font-display);font-size:2.6rem;line-height:1;
  color:var(--sky-300);}

/* ---- 配圖說明:左側短線,與正文區隔 ---- */
.entry-content .art-figure figcaption{
  padding-left:var(--space-3);border-left:2px solid var(--sky-300);}

/* =============================================================
   RWD — 平板(≤999.98px)
   ============================================================= */
@media (max-width:999.98px){
  .entry-content .art-toc__list{grid-template-columns:minmax(0,1fr);}
  .entry-content .art-scenes li{grid-template-columns:minmax(0,140px) minmax(0,1fr);}
}

/* =============================================================
   RWD — 手機(≤689.98px)
   ============================================================= */
@media (max-width:689.98px){
  .entry-content:not(:has(.paid-home,.paid-page)) h2{
    margin-top:var(--space-8);padding-top:var(--space-4);}
  .entry-content:not(:has(.paid-home,.paid-page)) h2::before{width:3px;height:auto;}
  .entry-content .art-toc{padding:var(--space-5) var(--space-5) var(--space-5);}
  .entry-content .art-key,
  .entry-content .art-callout{padding:var(--space-5) var(--space-5);}
  /* 對照卡與場景列在窄幅一律堆疊 */
  .entry-content .art-compare{grid-template-columns:minmax(0,1fr);gap:var(--space-5);}
  .entry-content .art-scenes li{grid-template-columns:minmax(0,1fr);gap:var(--space-2);}
  .entry-content .art-steps li{padding-left:48px;}
  .entry-content .art-steps li::before{width:32px;height:32px;}
  .entry-content .art-steps li::after{left:15px;top:40px;}
  .entry-content .art-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .entry-content .art-faq__item{padding:var(--space-5) var(--space-5);}
}

/* =============================================================
   art-callout--alert：重要補充 / 但書框（2026-08-18）
   與一般 art-callout 的視覺明確區隔：
     一般 callout ＝ 灰底、頂底髮絲線、白底藍框標籤（提示語氣）
     alert 變體   ＝ 淡藍底、深藍左棒、深藍實心標籤（提醒語氣）
   用在需要讀者特別留意的但書，例如涉及法遵、個資或專業分工的界線。
   仍守方角零陰影，色彩只用品牌深藍階，不引入新色相。
   ============================================================= */
.entry-content .art-callout--alert{
  background:var(--navy-50);
  border-top:0;border-bottom:0;
  border-left:3px solid var(--brand-navy);
  padding:var(--space-5) var(--space-6);}
.entry-content .art-callout--alert .art-callout__label{
  background:var(--brand-navy);color:#fff;
  box-shadow:none;letter-spacing:var(--ls-caps);}
/* 補充框內的粗體用深藍，與內文的一般粗體再拉開一階 */
.entry-content .art-callout--alert strong{
  color:var(--brand-navy);font-weight:var(--fw-bold);}

/* =============================================================
   麵包屑（導覽標記）— 2026-08-19
   Blocksy 的全域預設是 .ct-breadcrumbs{--theme-text-transform:uppercase;
   --theme-font-size:12px}，會把文章標題裡的英文（例如 AI Agent）
   渲染成 AI AGENT，並讓單篇文章的麵包屑比分類頁小一階。
   此處把深藍 masthead 上的麵包屑統一回原字與 14px。
   ============================================================= */
body:is(.single-post,.category,.blog) .hero-section[data-type="type-2"] .entry-header .ct-breadcrumbs{
  --theme-text-transform:none;
  --theme-font-size:14px;}


/* 表格在窄螢幕可橫向捲動，避免內容被壓扁或撐破版面 */
.entry-content figure.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.entry-content figure.wp-block-table table{min-width:520px;}
@media (max-width:689.98px){
  .entry-content figure.wp-block-table{margin-inline:0;}
}

/* ==== 彙整頁：分類篩選器 + 3 欄網格 ==== */
.kb-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--space-7);}
.kb-filter__item{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:2px;
  border:1px solid var(--border-base);background:var(--bg-base);color:var(--ink-700);
  font-size:var(--fs-sm);text-decoration:none;transition:border-color .18s ease,color .18s ease,background .18s ease;}
.kb-filter__item:hover{border-color:var(--brand-navy);color:var(--brand-navy);}
.kb-filter__item.is-active{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff;}
.kb-filter__count{font-size:var(--fs-cap);opacity:.7;font-variant-numeric:tabular-nums;}
.kb-filter__item.is-active .kb-filter__count{opacity:.85;}

.kb-grid{display:grid;gap:26px;grid-template-columns:repeat(3,1fr);}
@media (max-width:1023.98px){.kb-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:639.98px){.kb-grid{grid-template-columns:1fr;gap:20px;}}

.kb-card{background:var(--bg-base);border:1px solid var(--border-hair);border-radius:3px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.kb-card:hover{transform:translateY(-3px);border-color:var(--border-base);
  box-shadow:0 12px 28px rgba(42,76,116,.10);}
.kb-card__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;}
.kb-card__thumb{aspect-ratio:3/2;overflow:hidden;background:var(--ink-100);}
.kb-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.kb-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1;}
.kb-card__tag{align-self:flex-start;font-size:var(--fs-cap);letter-spacing:.02em;padding:3px 9px;border-radius:2px;
  background:var(--navy-50);color:var(--brand-navy);}
.kb-card__title{font-size:1.0625rem;font-weight:var(--fw-semibold);line-height:1.55;margin:0;color:var(--ink-900);}
.kb-card__desc{font-size:var(--fs-sm);line-height:1.75;color:var(--ink-600);margin:0;}
.kb-empty{padding:40px 0;color:var(--ink-600);}

.kb-pager{display:flex;gap:8px;justify-content:center;margin-top:var(--space-8);flex-wrap:wrap;}
.kb-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border:1px solid var(--border-base);border-radius:2px;text-decoration:none;
  color:var(--ink-700);font-size:var(--fs-sm);}
.kb-pager .page-numbers.current{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff;}
.kb-pager .page-numbers:hover:not(.current){border-color:var(--brand-navy);color:var(--brand-navy);}

/* 彙整頁用自訂網格，隱藏主題預設的文章列表避免重複 */
.post-type-archive-knowledge .entries,
.tax-knowledge_topic .entries{display:none;}


/* 自訂彙整區塊要對齊站台容器寬度，並隱藏主題預設的彙整標題（會與自訂標題重複） */
.kb-wrap{max-width:1290px;margin-inline:auto;padding-inline:20px;}
@media (max-width:689.98px){.kb-wrap{padding-inline:16px;}}


/* ==== 彙整頁標題區 ====
   站台設計是「透明頁首 + 深色 hero」（見 /contact/），
   CPT 彙整頁在 Blocksy 沒有 hero 設定可用，這裡比照做一個同調性的標題區。 */
.post-type-archive-knowledge .hero-section,
.tax-knowledge_topic .hero-section{display:none;}
.kb-hero{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:300px;padding:130px 20px 50px;
  background:linear-gradient(120deg,#1E7FD4 0%,#2A4C74 46%,#3B3FA8 100%);}
.kb-hero__inner{max-width:64ch;}
.kb-hero__title{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-h2);
  margin:0 0 14px;color:#fff;}
.kb-hero__desc{font-size:var(--fs-lead);line-height:1.75;color:rgba(255,255,255,.88);margin:0;}
.kb-wrap{padding-top:var(--space-8);}
@media (max-width:689.98px){
  .kb-hero{min-height:200px;padding:100px 16px 36px;}
}

/* ==== 間距收斂 ====
   1) figure 內的 table 自帶 32px 上下 margin，造成 figure 底部多出 64px 空白。
      間距交給 figure 管，table 本身歸零。
   2) H2 原本有 border-top 搭配 padding-top，線條移除後 padding 就成了無意義的空隙。
   3) 區隔改用留白節奏，不再靠線條。 */
.entry-content figure.wp-block-table{margin:var(--space-7) 0;}
.entry-content figure.wp-block-table > table{margin:0;}
.entry-content figure.wp-block-table + .art-tablenote{margin-top:10px;}

.entry-content:not(:has(.paid-home,.paid-page)) h2,
.entry-content h2{margin-top:var(--space-7);padding-top:0;border-top:0;}
.entry-content h2:first-of-type{margin-top:0;}
.entry-content:not(:has(.paid-home,.paid-page)) h3:not([class]),
.entry-content h3{margin-top:var(--space-6);}

/* 元件之間的節奏統一，避免各自帶不同的外距 */
.entry-content .art-callout,
.entry-content .art-compare,
.entry-content .art-scenes,
.entry-content .art-steps,
.entry-content .art-checklist,
.entry-content .art-keypoints{margin:var(--space-6) 0;}
.entry-content .art-figure{margin:var(--space-7) 0;}