@charset "UTF-8";
/* ============================================================
   貝克知識中心內頁 - 全頁面共用樣式
   單頁式獨立樣式,不與站內其他 CSS 共用
   設計稿: Figma 貝殼貝克 歐巴x潮間帶「貝克知識中心內頁 26.08.17」

   色系:
   - 投資人系列(預設): <div class="kb-page">
   - 申貸人系列:       <div class="kb-page kb-page--loan">
   ============================================================ */

/* ---------- Reset ---------- */
/* 切版原稿是獨立 html，reset 寫在 * / body / img / a / ul / p 上。
   併進站台版型後（共用 header/footer），全域 reset 會把站台其他元件一起清掉，
   所以這裡把 reset 收進 .kb-page 之內；其餘樣式原本就已經在 .kb-page 底下。
   若切版重新交付，這一段要照樣改。 */
.kb-page, .kb-page *, .kb-page *::before, .kb-page *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.kb-page {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #333;
  background-color: #fff;
  position: relative;
}
.kb-page img { display: block; max-width: 100%; }
.kb-page a { text-decoration: none; color: inherit; }
.kb-page ul, .kb-page ol { list-style: none; }
/* 不要加 `.kb-page p { margin: 0 }`:它的優先級是 (0,1,1),會蓋掉
   .kb-figure-title / .kb-readmore-label 這類單 class 選擇器 (0,1,0) 設的 margin。
   p 的 margin 已由上面的 `.kb-page *` 歸零,不需要再寫一次 */

/* ---------- 色系變數 ---------- */
.kb-page {
  /* 投資人系列(綠) */
  --c-main: #5ab5b2;            /* Banner 底色 / 延伸閱讀箭頭鈕 / 強調綠字 */
  --c-strong: #4aa3a4;          /* 元件主色文字(圖卡標題、流程、pill、h3) */
  --c-h2: #f18252;              /* 區塊大標 */
  --c-border: #a9d9d6;          /* 膠囊/卡片淺色邊框 */
  --c-leadnote: #75b7bf;        /* 引言卡左邊線 */
  --c-thead: #5ab5b2;           /* 表頭底色 */
  --c-bullet: #5ab5b2;          /* 條列圓點 */
  --c-rgb: 90, 181, 178;        /* 淡色底/框的 RGB */
  --c-tint-rgb: 90, 181, 178;   /* --c-main 的 RGB:圖卡有色底的疊色、Roadmap 軌道漸層(非 --c-rgb) */
  --c-toc-num: #75b7bf;
  --c-toc-hover: #4aa3a4;
  --c-toc-active-num: #ff8066;
  --c-toc-active-text: #f18252;
  --c-toc-active-border: #ffcfbf;
  --c-hover: #4aa3a4;           /* Green/800:箭頭元件 hover */
  /* Banner 漸層與左側大圓底色(V2 設計稿 Banner 不再是純色) */
  --c-banner-bg: linear-gradient(180deg, #90d1ce 18.75%, #5ab5b2 91.35%);
  --c-banner-orb: #9cd5d1;
  /* Converge / Diverge 的實心結果塊與括號線:兩套色系在設計稿對到的層級不同
     (綠系結果塊＝main、線＝border;橘系結果塊＝strong、線＝main),故獨立成變數 */
  --c-solid: #5ab5b2;
  --c-line: #a9d9d6;
  /* 圖表元件(Roadmap / Pillars / 打勾膠囊)的標籤字與框線:綠系與 h3、圖卡標題同一色,
     橘系設計稿刻意低一階(標籤 Orange/800、卡片無框、膠囊框走 --c-rgb 28%),故獨立成變數 */
  --c-label: #4aa3a4;
  --c-card-border: rgba(90, 181, 178, .28);
  --c-pill-border: #a9d9d6;
  /* Converge / Diverge 編號卡的框線:綠系沿用 main 色框,橘系設計稿無框。
     橘系用 transparent 而非 none,保留 1px 框寬,卡片尺寸才與綠系一致 */
  --c-node-border: #5ab5b2;
}
.kb-page--loan {
  /* 申貸人系列(橘) */
  --c-main: #f9aa8f;
  --c-strong: #f18252;
  --c-h2: #4aa3a4;
  --c-border: #ffcfbf;
  --c-leadnote: #ffaa8e;
  --c-thead: #f18252;
  --c-bullet: #f18252;
  --c-rgb: 241, 130, 82;
  --c-tint-rgb: 249, 170, 143;
  --c-toc-num: #f9aa8f;
  --c-toc-hover: #f18252;
  --c-toc-active-num: #4aa3a4;
  --c-toc-active-text: #4aa3a4;
  --c-toc-active-border: #addadf;
  --c-hover: #ff8066;           /* Orange/800:箭頭元件 hover */
  --c-banner-bg: linear-gradient(180deg, #f9aa8f 0%, #ef9576 100%);
  --c-banner-orb: transparent;  /* 申貸人稿的大圓只有白色漸層,沒有底色 */
  --c-solid: #f18252;
  --c-line: #f9aa8f;
  --c-label: #ff8066;
  --c-card-border: transparent;
  --c-pill-border: rgba(241, 130, 82, .28);
  --c-node-border: transparent;
}

/* ---------- 頁面背景材質與裝飾 ---------- */
/* 上方不留白:Banner 貼齊頁頂,站台的 fixed header 直接浮在 Banner 上(設計稿 Banner y=0) */
.kb-page { position: relative; overflow: hidden; overflow: clip; padding-top: 0; padding-bottom: 62px; }
.kb-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/bg-texture.jpg") center top / cover no-repeat fixed;
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
.kb-deco-shell {
  position: absolute;
  left: 0;
  top: 3056px; /* 全站統一 */
  width: 282px;
  height: 370px;
  z-index: 0;
  pointer-events: none;
}
.kb-header, .kb-banner, .kb-body, .kb-footer { position: relative; z-index: 1; }

/* ---------- Header(暫未使用,之後補回) ---------- */
.kb-header { height: 120px; display: flex; align-items: center; }
.kb-header .kb-logo { width: 120px; height: 120px; flex-shrink: 0; }
.kb-header .kb-logo img { width: 100%; height: 100%; }
.kb-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 48px;
}
.kb-nav ul { display: flex; align-items: center; }
.kb-nav li { padding: 0 15px; }
.kb-nav .kb-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: .2px;
  color: #787878;
}
.kb-nav .kb-nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 8px 29px;
  border-radius: 50px;
  border: 1px solid #787878;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: #787878;
}
.kb-nav .kb-nav-pill--invest { border-color: #5ab5b2; color: #4aa3a4; }
.kb-nav .kb-nav-pill--loan { border-color: #ff8066; color: #ff8066; }
.kb-nav .kb-nav-icon { display: inline-flex; align-items: center; color: #787878; }
.kb-nav .kb-nav-icon svg { display: block; }

/* ---------- Banner(滿版) ----------
   設計稿 1440x500 滿版。裝飾圓與 INVEST/LOAN 字以「畫布中心」定位(calc(50% ± n)),
   視窗比 1440 寬時構圖跟著置中,不會偏向左邊。 */
.kb-banner {
  width: 100%;
  height: 500px;
  background: var(--c-banner-bg);
  overflow: hidden;
  position: relative;
}
/* 後台設了背景圖(controller applyBannerImage 加的 class 與變數):圖疊在漸層上,
   漸層只在圖載入前墊底。裝飾交給圖本身,markup 保留不刪 */
.kb-banner--image {
  background: var(--kb-banner-image) center / cover no-repeat, var(--c-banner-bg);
}
.kb-banner--image .kb-banner-circle1,
.kb-banner--image .kb-banner-circle2,
.kb-banner--image .kb-banner-word { display: none; }
/* 右下小圓:設計稿圓心 (1142, 572.5)、直徑 536 */
.kb-banner-circle1 {
  position: absolute;
  left: calc(50% + 154px);
  top: 304px;
  width: 536px;
  height: 536px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(225,225,225,.43) 0%, rgba(255,255,255,0) 100%);
  transform: rotate(123.35deg);
}
/* 左側大圓:設計稿圓心 (245, 260)、直徑 1000;白色漸層疊在 --c-banner-orb 底色上再整體半透明 */
.kb-banner-circle2 {
  position: absolute;
  left: calc(50% - 975px);
  top: -240px;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(225,225,225,.43) 0%, rgba(255,255,255,0) 59%), var(--c-banner-orb);
  opacity: .5;
  transform: rotate(93.65deg);
  backdrop-filter: blur(20px);
}
/* 設計稿字的基線約落在 Banner 底緣(下半被裁掉)。line-height 1 時 Poppins 基線在盒底上方 0.15em,
   所以 bottom 給 -0.15em 讓基線貼齊底緣;右緣對齊設計稿 x=1262 */
.kb-banner-word {
  position: absolute;
  right: calc(50% - 542px);
  bottom: -.15em;
  width: 663px;
  font-family: "Poppins", "Noto Sans TC", sans-serif;
  font-weight: 600;
  font-size: 105px;
  line-height: 1;
  text-align: right;
  color: #fff;
  opacity: .17;
}
/* 標題:桌機水平置中(≤991 改回靠左,見 RWD);垂直中心往下偏 21px 避開浮在上面的 header。
   用 left/right 0 + text-align 置中,不動 transform,進場動畫的 translateY 才不會被蓋掉 */
.kb-banner h1 {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 20px;
  text-align: center;
  top: calc(50% + 21px);
  transform: translateY(-50%);
  font-size: 52px;
  font-weight: 600;
  line-height: normal;
  color: #fff;
}

/* ---------- 麵包屑(Banner 左下角) ----------
   首頁 / 營運白皮書 / 投資人保障|資產活化中心 / 文章標題。只有首頁可點(其餘用 span),最後一層是目前頁面用白字 */
.kb-breadcrumb {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(255, 255, 255, .7);
}
.kb-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 8px; }
.kb-breadcrumb li { display: flex; gap: 8px; white-space: nowrap; }
.kb-breadcrumb li + li::before { content: "/"; }
.kb-breadcrumb a { color: inherit; transition: color .3s ease; }
.kb-breadcrumb a:hover { color: #fff; }
.kb-breadcrumb .kb-breadcrumb-current { color: #fff; }

/* ---------- Body 版面 ----------
   823px 為設計稿的內容欄寬(1440 畫布置中,左右邊距各 308) */
.kb-body {
  width: 823px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

/* ---------- TOC ---------- */
.kb-toc {
  width: 250px;
  flex-shrink: 0;
  padding-top: 54px;
  position: sticky;
  top: 0;
}
.kb-toc-head {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.56px;
  color: #787878;
}
.kb-toc-divider { height: 1px; background: #e3e3e3; margin: 8px 0 16px; }
.kb-toc-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 248px;
  padding: 9px 0 9px 16px;
  border-left: 2px solid transparent;
}
.kb-toc-item .kb-toc-num {
  width: 15px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  color: var(--c-toc-num);
}
.kb-toc-item .kb-toc-text {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .32px;
  color: #787878;
  transition: color .2s;
}
.kb-toc-item:not(.is-active):hover .kb-toc-text { color: var(--c-toc-hover); }
.kb-toc-item.is-active { border-left-color: var(--c-toc-active-border); }
.kb-toc-item.is-active .kb-toc-num { color: var(--c-toc-active-num); }
.kb-toc-item.is-active .kb-toc-text { font-weight: 600; color: var(--c-toc-active-text); }

/* ---------- Article ---------- */
.kb-article { width: 100%; }
.kb-article > section { padding: 52px 0; border-top: 1px solid #e3e3e3; }
.kb-article > section:first-child { border-top: 0; padding-top: 54px; }

.kb-h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .3px;
  color: var(--c-h2);
}

/* h3 小節標題 */
.kb-h3-teal {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .42px;
  color: var(--c-strong);
  margin: 48px 0 20px;
}
.kb-h3-green {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .42px;
  color: var(--c-main);
}

/* Eyebrow 小標籤 */
.kb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: #fff;
  margin-bottom: 14px;
}
.kb-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f18252;
}
.kb-eyebrow span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.12px;
  color: var(--c-strong);
}

/* lead-note 引言卡 */
.kb-lead-note {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 21px 24px;
  border-radius: 14px;
  border-left: 4px solid var(--c-leadnote);
  background: #fff;
  box-shadow: 0 2px 10px rgba(33, 37, 41, .05);
  margin: 26px 0;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .34px;
  color: #333;
}

/* 內文 */
.kb-p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .34px;
  color: #333;
}
.kb-p--loose { line-height: 1.95; }
.kb-p b, .kb-p strong { font-weight: 600; }
.kb-p .kb-em-green { font-weight: 600; color: var(--c-main); }
.kb-em-teal { font-weight: 600; color: var(--c-strong); }

/* 強調句 */
.kb-emphasis {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .4px;
  color: var(--c-strong);
  margin: 16px 0;
  white-space: pre-line;
}

/* 段落節奏 */
.kb-h2 + .kb-p { margin-top: 22px; }
.kb-p + .kb-p { margin-top: 12px; }
.kb-p + .kb-bullet-list { margin-top: 16px; }
.kb-bullet-list + .kb-p { margin-top: 16px; }

/* Figure 圖卡 */
.kb-figure {
  margin-top: 34px;
  padding: 30px 26px 28px;
  border-radius: 22px;
  border: 1px solid #e3e3e3;
  background: #fff;
  box-shadow: 0 2px 10px rgba(33, 37, 41, .05);
}
/* 有色底圖卡(全 12 頁共 6 張)。設計稿是「白底 → 材質 60% → 主色 16%」三層,
   但 CSS 的 background-image 層無法單獨設透明度,故在材質上方疊白 40% 等價替代。
   疊色取 --c-tint-rgb 而非 --c-rgb:橘系兩者不同色,用錯會偏深 */
.kb-figure--tint {
  background:
    linear-gradient(0deg, rgba(var(--c-tint-rgb), .16), rgba(var(--c-tint-rgb), .16)),
    linear-gradient(0deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)),
    url("../images/bg-texture.jpg") center / cover no-repeat,
    #fff;
}
.kb-figure-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .4px;
  color: var(--c-strong);
  margin-bottom: 26px;
}
.kb-figure-divider { height: 1px; background: #e6e9ea; margin: 26px 0; }
.kb-figure .kb-figure-subtitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .4px;
  color: var(--c-strong);
  margin-bottom: 26px;
}
.kb-figure + .kb-figure { margin-top: 26px; }
.kb-figure + .kb-p { margin-top: 26px; }
.kb-p + .kb-figure { margin-top: 34px; }
.kb-lead-note + .kb-figure { margin-top: 8px; }

/* Flow 直式流程 */
.kb-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kb-flow::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 24px;
  width: 2px;
  background: var(--c-border);
}
.kb-flow-step { display: flex; align-items: center; gap: 22px; position: relative; }
.kb-flow-num {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid var(--c-border);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-strong);
}
.kb-flow-label {
  flex: 1;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid rgba(var(--c-rgb), .28);
  background: rgba(var(--c-rgb), .1);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .32px;
  color: var(--c-strong);
}

/* Ring 環狀圖(利益綁定機制)
   座標依設計稿 771x440 換算成百分比,容器等比縮放 */
.kb-ring {
  position: relative;
  width: 100%;
  max-width: 771px;
  margin: 0 auto;
  aspect-ratio: 771 / 440;
}
.kb-ring::before {
  content: "";
  position: absolute;
  left: 50.06%;
  top: 51.14%;
  width: 49.29%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid #addadf;
  border-radius: 50%;
}
.kb-ring-core {
  position: absolute;
  left: 50.06%;
  top: 51.14%;
  transform: translate(-50%, -50%);
  width: 20.23%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-main);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .4px;
}
.kb-ring-item {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--c-rgb), .45);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  white-space: nowrap;
}
.kb-ring-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--c-rgb), .12);
}
.kb-ring-icon img { width: 24px; height: 24px; }
.kb-ring-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .32px;
  color: var(--c-strong);
}
/* 五個節點:圓周五等分,起點正上方 */
.kb-ring-item--cost       { left: 50.06%; top:  7.50%; }
.kb-ring-item--duty       { left: 73.41%; top: 39.32%; }
.kb-ring-item--penalty    { left: 64.46%; top: 82.50%; }
.kb-ring-item--motivation { left: 35.54%; top: 82.50%; }
.kb-ring-item--recovery   { left: 26.59%; top: 39.32%; }

/* Pillars 收斂圖(樣式庫「Pillars → 結果色塊」)
   N 個並列條件收斂成一個結論,卡片下接箭頭匯集到結果色塊。
   卡片等高由最長標題(兩行)決定,故用 flex 拉伸而非固定高度 */
.kb-pillars-row { display: flex; gap: 12px; }
.kb-pillar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--c-card-border);
  background: rgba(var(--c-rgb), .1);
}
.kb-pillar-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
}
.kb-pillar-icon img { width: 30px; height: 30px; }
/* 28px viewBox 的圖示(icon-rm-*)在 46px 圓底內只佔 22px,與 30px viewBox 的
   icon-sys-* 用同一組卡片但比例不同,故獨立一個尺寸 */
.kb-pillar-icon--sm img { width: 22px; height: 22px; }
.kb-pillar-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .32px;
  text-align: center;
  color: var(--c-label);
}
.kb-pillars-arrows { display: flex; gap: 12px; margin-top: 12px; }
.kb-pillars-arrows span { flex: 1; min-width: 0; height: 14px; position: relative; }
.kb-pillars-arrows span::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid var(--c-line);
}
.kb-pillars-result {
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--c-solid);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .36px;
  text-align: center;
  color: #fff;
}
/* 結果色塊的兩個弱化層級:淡底(需審慎評估)與白底描邊(原則不承作,對應樣式庫
   「外框卡片列」的否定語意)。描邊版把 1.5px 框線從 padding 扣掉,三種結果塊等高 */
.kb-pillars-result--soft { background: var(--c-border); color: var(--c-strong); }
.kb-pillars-result--outline {
  padding: 16.5px 20px;
  border: 1.5px solid var(--c-main);
  background: #fff;
  color: var(--c-strong);
}
/* 三張卡以「或」相隔(任一條件成立即得出結果)。卡片列與箭頭列都插入同寬的 16px 空位,
   箭頭才會對齊卡片中心;空位本身不畫箭頭 */
.kb-pillars-row--or { gap: 14px; }
.kb-pillars-or {
  flex: 0 0 16px;
  align-self: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--c-label);
}
.kb-pillars-arrows--or { gap: 14px; }
.kb-pillars-arrows .kb-pillars-or-gap { flex: 0 0 16px; }
.kb-pillars-arrows .kb-pillars-or-gap::before { content: none; }
.kb-pillars-note {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  color: #787878;
}

/* Converge 收斂框線(樣式庫「Converge 收斂框線」)
   多要素構成一個結果:左側編號膠囊經括號線收斂,箭頭指向右側結果色塊。
   括號線由每張卡的 ::after 短線加清單的 ::after 直線拼成,顏色走 --c-border。
   整組 300+43+84+21+300=748 寬,靠 fit-content 置中,上方小標才會對齊卡片左緣。
   兩側欄位要明寫 width: 300px 而非只給 flex-basis:fit-content 是照 max-content 算的,
   flex-basis 不計入,只給 basis 會縮成文字寬;容器不夠寬時再靠 flex-shrink 等比縮,
   平板寬度不用另寫斷點 */
.kb-converge { width: fit-content; max-width: 100%; margin: 0 auto; }
.kb-converge-label {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .26px;
  color: #333;
}
.kb-converge-row { display: flex; align-items: center; }
.kb-converge-list {
  position: relative;
  flex: 0 1 300px;
  width: 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kb-converge-list::after {
  /* 括號直線:首尾卡片中心(24px)之間 */
  content: "";
  position: absolute;
  left: calc(100% + 28px);
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--c-line);
}
.kb-converge-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--c-node-border);
  background: #fff;
}
.kb-converge-item::after {
  /* 括號短線:從卡片右緣接到直線 */
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 30px;
  height: 2px;
  transform: translateY(-50%);
  background: var(--c-line);
}
.kb-converge-num {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-main);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.kb-converge-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .32px;
  color: var(--c-label);
}
.kb-converge-arrow {
  /* 左邊 43 = 括號短線 30 + 留白 13;線 70 + 箭頭 14 */
  flex: 0 0 84px;
  height: 14px;
  margin: 0 21px 0 43px;
  position: relative;
}
.kb-converge-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 14px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--c-line);
}
.kb-converge-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 14px solid var(--c-line);
}
.kb-converge-result {
  flex: 0 1 300px;
  width: 300px;
  min-width: 0;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 16px;
  background: var(--c-solid);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .4px;
  text-align: center;
  color: #fff;
}

/* Diverge 分岔框線(樣式庫「Diverge 分岔框線」)
   Converge 的左右鏡射:左側單一來源塊,經箭頭與括號線分岔到右側多張編號卡。
   整組 240+80+16+26+409=771 寬,剛好填滿圖卡內寬,靠 fit-content 置中。
   卡片框線與 .kb-converge-item 共用 --c-node-border(橘系無框) */
.kb-diverge {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.kb-diverge-source {
  flex: 0 1 240px;
  width: 240px;
  min-width: 0;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 16px;
  background: var(--c-solid);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .36px;
  text-align: center;
  color: #fff;
}
.kb-diverge-arrow {
  /* 線 60 + 留白 6 + 箭頭 14;右邊 16 是箭頭到括號直線的距離 */
  flex: 0 0 80px;
  height: 14px;
  margin: 0 16px 0 0;
  position: relative;
}
.kb-diverge-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 20px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--c-line);
}
.kb-diverge-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 14px solid var(--c-line);
}
.kb-diverge-list {
  position: relative;
  flex: 0 1 435px;       /* 括號短線 26 + 卡片 409 */
  width: 435px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 26px;
}
.kb-diverge-list::before {
  /* 括號直線:首尾卡片中心(24px)之間,貼齊清單左緣 */
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--c-line);
}
.kb-diverge-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--c-node-border);
  background: #fff;
}
.kb-diverge-item::before {
  /* 括號短線:從直線接到卡片左緣 */
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 26px;
  height: 2px;
  transform: translateY(-50%);
  background: var(--c-line);
}
.kb-diverge-num {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-main);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.kb-diverge-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .32px;
  color: var(--c-label);
}
/* 樣式庫範例的尺寸(申貸流程頁「市場流動性」與元件庫一致):
   來源塊 300x120 / 20px 字,線 70 + 留白 2 + 箭頭 14,再留白 14 接括號;括號短線 30,卡片 341;
   整組 300+86+14+30+341=771,剛好填滿圖卡內寬 */
.kb-diverge--w300 .kb-diverge-source {
  flex-basis: 300px;
  width: 300px;
  min-height: 120px;
  font-size: 20px;
  letter-spacing: .4px;
}
.kb-diverge--w300 .kb-diverge-arrow { flex-basis: 86px; margin-right: 14px; }
.kb-diverge--w300 .kb-diverge-arrow::before { right: 16px; }
.kb-diverge--w300 .kb-diverge-list { flex-basis: 371px; width: 371px; padding-left: 30px; }
.kb-diverge--w300 .kb-diverge-item::before { width: 30px; }

/* 外框卡片列(樣式庫「外框卡片列」)
   白底＋淺色外框,系統中最弱的層級,用於否定或排除性質的並列條件。
   五張 155 寬 + 四個 12 間距 = 823,剛好填滿內文寬;卡高設計稿定 130,
   兩行標籤(如「使用權狀況存在重大障礙」)也放得下,故用 min-height 撐齊 */
.kb-outline-row { display: flex; flex-wrap: wrap; gap: 12px; }
.kb-p + .kb-outline-row { margin-top: 26px; }
.kb-outline-row + .kb-p { margin-top: 26px; }
.kb-outline-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 8px 16px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: #fff;
}
.kb-outline-icon { width: 22px; height: 22px; flex-shrink: 0; }
.kb-outline-icon img { width: 22px; height: 22px; display: block; }
.kb-outline-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .28px;
  text-align: center;
  color: var(--c-label);
}

/* 評級階梯欄(樣式庫「評級階梯欄」)
   柱高依數值遞增,三欄底部對齊。柱高與配色由 --g-* 帶入,
   配色走色系變數,故申貸人橘系可直接沿用 */
.kb-grades { display: flex; align-items: flex-end; gap: 22px; }
.kb-grade-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.kb-grade-col--c { --g-color: var(--c-leadnote); --g-height:  64px; }
.kb-grade-col--b { --g-color: var(--c-strong);   --g-height: 126px; }
.kb-grade-col--a { --g-color: var(--c-h2);       --g-height: 188px; }
.kb-grade-margin,
.kb-grade-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.kb-grade-cap {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: #787878;
}
.kb-grade-num {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--g-color);
}
.kb-grade-bar {
  width: 100%;
  height: var(--g-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  border-radius: 14px;
  background: var(--g-color);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}
.kb-grade-val {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: #333;
}

/* Roadmap 橫向流程軸(樣式庫「Roadmap 橫向流程軸」)
   軌道漸層由淺到深,末端節點放大實心表示結果。
   節點以 flex 等分,故軌道兩端各縮 1/(2N) 才會落在首尾節點中心 */
.kb-roadmap {
  --rm-n: 7;             /* 節點數。節點以 flex 等分,故軌道兩端各縮 1/(2n) 才落在首尾節點中心 */
  display: flex;
  position: relative;
  margin-top: 47px;      /* 讓出「逾期」標記與其短線 */
  padding-bottom: 14px;
}
.kb-roadmap::before {
  content: "";
  position: absolute;
  left: calc(100% / var(--rm-n) / 2);
  right: calc(100% / var(--rm-n) / 2);
  top: 11px;
  transform: translateY(-50%);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--c-tint-rgb), .22) 0%,
    rgba(var(--c-tint-rgb), .5) 55%,
    rgb(var(--c-tint-rgb)) 100%);
}
.kb-roadmap-item {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kb-roadmap-dot {
  width: 16px;
  height: 16px;
  margin: 3px 0;         /* 撐成 22px,與末端節點對齊中心 */
  border-radius: 50%;
  border: 3px solid var(--c-main);
  background: #fff;
  position: relative;
  z-index: 1;
}
.kb-roadmap-item--end .kb-roadmap-dot {
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  background: var(--c-main);
}
.kb-roadmap-label {
  margin-top: 11px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .32px;
  text-align: center;
  color: var(--c-label);
}
.kb-roadmap-item--end .kb-roadmap-label { color: var(--c-main); }
.kb-roadmap-flag {
  position: absolute;
  top: -33px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  white-space: nowrap;
  color: #787878;
}
.kb-roadmap-flag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: rgba(var(--c-rgb), .35);
}

/* Roadmap 圖示列變體
   節點上方多一列圖示,節點列因此落到最底,軌道改貼齊底部。
   節點不等分容器而是固定 110px 置中,才對得上設計稿的節點中心距;
   等分會把六個節點撐開到 128px 一格 */
.kb-roadmap--icon {
  --rm-n: 6;
  --rm-w: 110px;
  justify-content: center;
  margin-top: 0;         /* 沒有「逾期」這類標記,不需讓位 */
  padding-bottom: 0;
}
.kb-roadmap--icon .kb-roadmap-item { flex: 0 0 var(--rm-w); }
.kb-roadmap--icon::before {
  /* 節點框高 22px(一般節點 16px 加上下 3px margin),中心距容器底 11px */
  top: auto;
  bottom: 11px;
  transform: none;
  left:  calc((100% - var(--rm-n) * var(--rm-w)) / 2 + var(--rm-w) / 2);
  right: calc((100% - var(--rm-n) * var(--rm-w)) / 2 + var(--rm-w) / 2);
}
.kb-roadmap-icon { width: 28px; height: 28px; }
.kb-roadmap-icon img { width: 28px; height: 28px; }
/* 標籤 flex:1 讓它吃掉多餘高度:某一節點的標籤折成兩行時(如「法院公證與抵押權設定」),
   其他節點的圓點才會跟著被推到同一條底線上,不會高低不齊 */
.kb-roadmap--icon .kb-roadmap-label { flex: 1; margin-top: 4px; font-size: 15px; }
.kb-roadmap--icon .kb-roadmap-dot { margin-top: 18px; }
.kb-roadmap--icon .kb-roadmap-item--end .kb-roadmap-dot { margin-top: 15px; }
/* 這個變體的六個標籤同色,末端不換色 */
.kb-roadmap--icon .kb-roadmap-item--end .kb-roadmap-label { color: var(--c-label); }
/* 剛好塞滿欄寬的長標籤(如十字的「職業／收入／信用條件」在 150px 欄):
   設計稿字距 0 剛好 150,基底規則的 .32px 字距會多出 3px 而折行,故拿掉字距並禁止換行 */
.kb-roadmap-label--nowrap { letter-spacing: 0; white-space: nowrap; }
/* 節點數與中心距依各頁設計稿不同(預設 6 節點 110px 是 knowledge_2 量出來的),
   其他頁用 modifier 帶入自己的值,不要改預設 */
.kb-roadmap--n6w118 { --rm-n: 6; --rm-w: 118px; }
.kb-roadmap--n6w120 { --rm-n: 6; --rm-w: 120px; }
.kb-roadmap--n4w142 { --rm-n: 4; --rm-w: 142px; }
.kb-roadmap--n7w108 { --rm-n: 7; --rm-w: 108px; }
/* 八節點時設計稿是等分 771px(96.375px 一格),取整數 96 */
.kb-roadmap--n8w96  { --rm-n: 8; --rm-w: 96px; }
.kb-roadmap--n7w100 { --rm-n: 7; --rm-w: 100px; }
/* 兩排版用的五節點欄寬:150 是 771 寬圖卡、137 是結論卡內 703 寬圖卡量出來的 */
.kb-roadmap--n5w150 { --rm-n: 5; --rm-w: 150px; }
.kb-roadmap--n5w137 { --rm-n: 5; --rm-w: 137px; }

/* Roadmap 兩排版(樣式庫「Roadmap 兩排版」)
   步驟超過 8 個時拆成上下兩條圖示列 Roadmap,讀法為上排由左至右、再接下排。
   軌道漸層跨排連續:上排 22%→55%、下排 55%→100%,末端實心節點只在下排。
   設計稿上排節點中心到下排圖示頂是 46px(Roadmap 框底留白 19 + 排距 10 + 框頂留白 9 + 節點半徑 8),
   .kb-roadmap--icon 沒有上下留白、節點中心距底 11px,故排距補成 35 */
.kb-roadmap-2row { display: flex; flex-direction: column; gap: 35px; }
.kb-roadmap--row1::before {
  background: linear-gradient(90deg,
    rgba(var(--c-tint-rgb), .22) 0%,
    rgba(var(--c-tint-rgb), .38) 55%,
    rgba(var(--c-tint-rgb), .55) 100%);
}
.kb-roadmap--row2::before {
  background: linear-gradient(90deg,
    rgba(var(--c-tint-rgb), .55) 0%,
    rgba(var(--c-tint-rgb), .77) 55%,
    rgb(var(--c-tint-rgb)) 100%);
}

/* Pill-chain 膠囊鏈(樣式庫「Pill-chain 膠囊鏈」)
   短鏈,膠囊依內容寬度置中排列、以 chevron 串接,末端膠囊實心表示結果。
   與 Roadmap 不同,這裡不強調時間軸,只交代「A 支撐 B」的推導關係 */
.kb-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.kb-chain-item {
  padding: 10px 16px;
  border-radius: 999px;
  /* 淡底是 --c-main 的淡色(橘系設計稿為 Orange/500 main),不是 --c-rgb */
  background: rgba(var(--c-tint-rgb), .1);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--c-label);
}
.kb-chain-item--end { background: var(--c-solid); color: #fff; }
/* 兩節點的「許多人以為」短鏈設計稿是靠左,不像五節點那條置中 */
.kb-chain--start { justify-content: flex-start; }
.kb-chain-arrow { width: 14px; height: 14px; flex-shrink: 0; position: relative; }
.kb-chain-arrow::before {
  /* 設計稿 chevron 為 6x10 線段,用 7px 方框取上、右兩邊轉 45° 畫出;
     旋轉後尖端在右,方框中心須往左偏才會落在 14px 格子的視覺中心 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.8px solid var(--c-main);
  border-right: 1.8px solid var(--c-main);
  transform: translate(-70%, -50%) rotate(45deg);
}
/* 節點中心距依設計稿逐頁不同(風險評估流程 110、債權管理流程 118),
   用修飾 class 換欄寬即可;手機斷點的 --rm-w: auto 寫在後面,會照常蓋掉 */
.kb-roadmap--icon-wide { --rm-w: 118px; }

/* KPI 卡帶
   一組並列的數值卡,用於在圖表上方交代該圖共用的前提條件。
   白底淺框是系統中較弱的層級,才不會壓過下方表格 */
.kb-kpi-row { display: flex; gap: 12px; }
.kb-kpi-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--c-border);
  background: #fff;
}
.kb-kpi-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-main);
}
.kb-kpi-label {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .26px;
  color: #333;
}

/* 案例比較卡(樣式庫「案例比較卡」)
   兩案例並列對照,每張卡列出同一組數值,底部的比例條把差異放大。
   比例條的寬度是各頁案例數值算出來的(前順位貸款 ÷ 房屋價值),
   直接寫在 HTML 的 inline width,不做 modifier class */
.kb-compare { display: flex; gap: 25px; }
.kb-compare-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: #fff;
}
.kb-compare-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-strong);
}
.kb-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  line-height: 1.2;
}
.kb-compare-key { color: #787878; }
.kb-compare-val { font-weight: 600; color: var(--c-label); }
.kb-compare-bar {
  height: 28px;
  border-radius: 6px;
  background: var(--c-border);
  overflow: hidden;
}
.kb-compare-fill { height: 100%; border-radius: 6px; background: var(--c-main); }

/* 公式列 */
.kb-formula { display: flex; flex-direction: column; gap: 12px; }
.kb-formula-line {
  display: flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 12px;
  border: 1px solid rgba(var(--c-rgb), .28);
  background: rgba(var(--c-rgb), .1);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .32px;
  color: var(--c-strong);
}
/* 一般公式條是單行 44px,少數幾條在設計稿上是加高的 100px。
   用 min-height 而非加大 padding,窄螢幕文字換行時才會自然往下長 */
.kb-formula-line--tall { min-height: 100px; }
/* 計算鏈:多條公式用向下三角串接,末端用實心結果塊收尾(樣式庫「公式列」)。
   三角 18x14 用 border 畫,不另出 icon;結果塊底色取 --c-rgb 與同圖公式條的框線/底色同源 */
.kb-formula-arrow {
  width: 0;
  height: 0;
  margin: 22px auto;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid var(--c-main);
}
.kb-formula-line--result {
  justify-content: center;
  min-height: 64px;
  background: rgb(var(--c-rgb));
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .56px;
  color: #fff;
}
/* 設計稿的公式文字全部置中,但基底規則靠左是 12 頁共用的既有狀態,
   目前只在指定的那條套用;若日後決定整批置中,把這兩行搬進基底即可 */
.kb-formula-line--center { justify-content: center; text-align: center; }

/* Table 表格 */
.kb-table { border-radius: 10px; overflow: hidden; }
.kb-table .kb-tr { display: flex; align-items: center; padding: 15px 18px; }
.kb-table .kb-thead { background: var(--c-thead); align-items: flex-start; }
.kb-table .kb-thead > div {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .725px;
  color: #fff;
}
.kb-table .kb-col1 { width: 250px; display: flex; align-items: center; gap: 8px; }
.kb-table .kb-col2 { width: 214px; }
.kb-table .kb-col3 { width: 214px; }
.kb-table .kb-colh { width: 356px; display: flex; align-items: center; }
.kb-table .kb-colq { width: 178px; display: flex; align-items: center; }
.kb-table .kb-colt { width: 237px; display: flex; align-items: center; }
.kb-table .kb-tr:nth-child(odd):not(.kb-thead) { background: rgba(var(--c-rgb), .05); }
.kb-grade {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(var(--c-rgb), .1);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: var(--c-strong);
}
.kb-table .kb-td { font-size: 16px; line-height: 1.5; letter-spacing: .32px; color: #333; }
.kb-table .kb-td--rate { font-weight: 600; color: #f18252; }

/* 圓點條列 */
.kb-bullet-list { display: flex; flex-direction: column; gap: 8px; }
.kb-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: .34px;
  color: #333;
}
.kb-bullet-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-bullet);
  flex-shrink: 0;
  margin-top: 13px;
}

/* 評級區間圖(風險評估模型頁) */
.kb-scale { position: relative; width: 748px; height: 96px; }
.kb-scale-label {
  position: absolute;
  top: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}
.kb-scale-tick { position: absolute; top: 30px; width: 2px; height: 14px; }
.kb-scale-axis { position: absolute; top: 36px; height: 2px; }
.kb-scale-arrow {
  position: absolute;
  top: 30px;
  left: 734px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 13px solid #f18252;
}
.kb-scale-bar { position: absolute; top: 54px; width: 173px; height: 8px; border-radius: 4px; }
.kb-scale-name {
  position: absolute;
  top: 70px;
  font-size: 15px;
  font-weight: 600;
  line-height: 23px;
}
.kb-c-gray { color: #afb5b8; } .kb-bg-gray { background: #d6dbdd; }
.kb-c-teal400 { color: #75b7bf; } .kb-bg-teal400 { background: #75b7bf; }
.kb-c-green800 { color: #4aa3a4; } .kb-bg-green800 { background: #4aa3a4; }
.kb-c-orange900 { color: #f18252; } .kb-bg-orange900 { background: #f18252; }

/* pill 標籤列 */
.kb-pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
/* 三欄等寬變體:設計稿的 tag 是 267px 固定寬填滿 823px,不依文字寬度收縮 */
.kb-pill-list--grid { display: grid; grid-template-columns: repeat(3, 1fr); }
/* 四欄版:八顆短標籤時設計稿排 4×2(178px 一顆),與 --grid 併用,手機仍走 --grid 的兩欄 */
.kb-pill-list--grid4 { grid-template-columns: repeat(4, 1fr); }
.kb-p + .kb-pill-list { margin-top: 26px; }
.kb-pill-list + .kb-p { margin-top: 26px; }
.kb-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px 11px 15px;
  border-radius: 999px;
  border: 1px solid var(--c-pill-border);
  background: #fff;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .31px;
  color: var(--c-label);
}
.kb-pill img { width: 16px; height: 16px; }

/* ReadMore 延伸閱讀卡 */
.kb-readmore {
  display: block;
  margin-top: 32px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--c-border);
  background: #fff;
}
.kb-readmore-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 1.56px;
  color: #f18252;
  margin-bottom: 8px;
}
.kb-readmore-row { display: flex; align-items: center; gap: 18px; }
.kb-readmore-book {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--c-rgb), .1);
}
.kb-readmore-book img { width: 24px; height: 24px; }
.kb-readmore-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.kb-readmore-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .4px;
  color: var(--c-strong);
}
.kb-readmore-desc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .3px;
  color: #787878;
}
.kb-readmore-go {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-main);
  transition: background-color .25s ease;
}
.kb-readmore-go img { width: 17px; height: 17px; }
.kb-readmore:hover .kb-readmore-go { background: var(--c-hover); }
.kb-readmore--compact { margin-top: 26px; }
.kb-readmore--compact + .kb-readmore--compact { margin-top: 16px; }

/* 結論卡 */
.kb-conclusion {
  padding: 38px 34px;
  border-radius: 22px;
  border: 1px solid rgba(var(--c-rgb), .25);
  background: #fff;
}
.kb-conclusion .kb-h2 { margin-bottom: 22px; }
.kb-conclusion .kb-p + .kb-p { margin-top: 16px; }
.kb-conclusion .kb-figure { box-shadow: none; }

/* ---------- Footer(暫未使用,之後補回) ---------- */
.kb-footer { margin-top: 62px; background: rgba(90, 181, 178, .75); }
.kb-footer-inner {
  background: #5ab5b2;
  border-radius: 500px 0 0 0;
  padding-top: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.kb-footer-cols {
  width: 1250px;
  min-height: 335px;
  padding: 0 47px;
  display: flex;
  gap: 95px;
  align-items: flex-start;
  font-family: Arial, "Noto Sans TC", sans-serif;
}
.kb-footer-logo { width: 147px; height: 147px; flex-shrink: 0; }
.kb-footer-logo img { width: 100%; height: 100%; }
.kb-footer-col { width: 68px; flex-shrink: 0; }
.kb-footer-col--contact { width: 250px; }
.kb-footer-col h4 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1.3px;
  color: #fff;
}
.kb-footer-col .kb-footer-divider { height: 1px; background: #fff; margin: 15px 0 18px; }
.kb-footer-col ul li a {
  display: block;
  padding: 1.5px 0 9.5px;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .3px;
  color: #fff;
}
.kb-footer-contact-list { margin-top: 23px; }
.kb-footer-contact-list li {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .3px;
  color: #fff;
}
.kb-footer-contact-list li .kb-ficon {
  width: 17.5px;
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  color: #fff;
}
.kb-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 120px;
  margin-top: 16px;
  padding: 7px 29px;
  border-radius: 50px;
  background: #fff;
  font-size: 12px;
  line-height: 18px;
  color: #f9aa8f;
}
.kb-footer-btn svg { display: block; }
.kb-footer-follow {
  margin-top: 22px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}
.kb-footer-sns { display: flex; gap: 17px; margin-top: 4px; padding: 4.5px 0 5.5px; color: #fff; }
.kb-footer-sns a { display: inline-flex; color: #fff; }
.kb-copyright {
  width: 100%;
  padding: 15px 10px;
  background: #333;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, .6);
  font-family: Arial, "Noto Sans TC", sans-serif;
}

/* ---------- 進場動畫 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kb-anim {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .kb-anim.is-visible { opacity: 1; transform: none; }
  .kb-anim-child {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .kb-anim.is-visible .kb-anim-child { opacity: 1; transform: none; }
  @keyframes kbBannerTitle {
    from { opacity: 0; transform: translateY(calc(-50% + 26px)); }
    to { opacity: 1; transform: translateY(-50%); }
  }
  .kb-banner h1 { animation: kbBannerTitle .8s ease .15s both; }
  @keyframes kbBannerWord {
    from { opacity: 0; }
    to { opacity: .17; }
  }
  .kb-banner-word { animation: kbBannerWord 1.4s ease .4s both; }
}

/* ============================================================
   RWD(設計稿僅提供 1440 桌機版,以下為合理補充規則)
   ============================================================ */

/* ---------- ~1219px:容器改流動寬 ---------- */
@media (max-width: 1219px) {
  .kb-toc { width: 220px; }
  .kb-toc-item { width: auto; }
}

/* ---------- ~991px:目錄移至文章上方 ---------- */
@media (max-width: 991px) {
  .kb-deco-shell { display: none; }
  /* Banner:視窗比 942 容器窄,標題與 INVEST/LOAN 改貼視窗邊,與內文 20px 邊距對齊 */
  .kb-banner { height: 400px; }
  .kb-banner h1 { left: 20px; right: auto; padding: 0; text-align: left; }
  .kb-banner-word { right: 20px; width: auto; }
  .kb-banner-circle1 { left: auto; right: -260px; top: 220px; }
  .kb-banner-circle2 { left: -640px; top: -300px; }
  .kb-breadcrumb { left: 20px; right: 20px; }
  .kb-toc { position: static; width: 100%; padding-top: 40px; }
  .kb-article > section:first-child { padding-top: 40px; }

  /* Ring:容器變窄,節點等比縮小避免互相重疊 */
  .kb-ring-item { gap: 8px; padding: 5px 14px 5px 5px; }
  .kb-ring-icon { width: 38px; height: 38px; }
  .kb-ring-icon img { width: 20px; height: 20px; }
  .kb-ring-label { font-size: 14px; }
  .kb-ring-core { font-size: 17px; }

  /* Pillars / 評級階梯 / Roadmap:欄寬變窄,內容等比縮小 */
  .kb-pillar { padding: 18px 8px 14px; gap: 10px; }
  .kb-pillar-icon { width: 40px; height: 40px; }
  .kb-pillar-icon img { width: 26px; height: 26px; }
  .kb-pillar-label { font-size: 14px; }
  .kb-pillars-result { padding: 16px; font-size: 16px; }

  .kb-grades { gap: 14px; }
  .kb-grade-num { font-size: 19px; }
  .kb-grade-bar { font-size: 16px; }

  .kb-roadmap-label { font-size: 14px; letter-spacing: 0; }
  /* 圖示列變體的標籤是兩個 class 選到的,優先級高於上一行,要另外寫 */
  .kb-roadmap--icon .kb-roadmap-label { font-size: 14px; }
  /* 6x118 = 708px,在 768 視窗的圖卡內寬(676px)放不下,退回 110px */
  .kb-roadmap--n6w118,
  .kb-roadmap--n6w120 { --rm-w: 110px; }
  /* 7x108 = 756px 同樣放不下,縮到 96px(7x96 = 672);
     「一般土地增值稅」七字在 96px 欄內要 13px 才不換行 */
  .kb-roadmap--n7w108 { --rm-w: 96px; }
  .kb-roadmap--n7w108 .kb-roadmap-label { font-size: 13px; }
  /* 7x100 = 700 同樣放不下,比照上面縮到 96px */
  .kb-roadmap--n7w100 { --rm-w: 96px; }
  .kb-roadmap--n7w100 .kb-roadmap-label { font-size: 13px; }
  /* 兩排版五節點:5x150 = 750 超過 676,縮到 130px(650);
     結論卡內的圖卡在 768 只剩 604 寬,137 那組再縮到 120px(600) */
  .kb-roadmap--n5w150 { --rm-w: 130px; }
  .kb-roadmap--n5w137 { --rm-w: 120px; }
}

/* ---------- ~767px:行動版 ---------- */
@media (max-width: 767px) {
  .kb-page { padding-top: 0; padding-bottom: 40px; }

  /* Banner:維持 PC 構圖等比縮小(標題左中偏下、INVEST/LOAN 右下裁切、麵包屑左下) */
  .kb-banner { height: 280px; }
  /* 沒設手機版圖就沿用桌機版 */
  .kb-banner--image {
    background-image: var(--kb-banner-mobile-image, var(--kb-banner-image)), var(--c-banner-bg);
  }
  .kb-banner h1 { font-size: 32px; top: calc(50% + 12px); }
  .kb-banner-word { font-size: 62px; }
  /* 背景圓依 PC 構圖等比(以 Banner「高度」為基準,維持圓弧切入比例)
     PC 1440x500:右下圓 536px=高度107%、top 61%;左側大圓 1000px=高度200%、top -48% */
  .kb-banner-circle1 {
    left: auto;
    right: -30%;
    top: 61%;
    width: auto;
    height: 107%;
    aspect-ratio: 1 / 1;
  }
  .kb-banner-circle2 {
    left: -55%;
    top: -48%;
    width: auto;
    height: 160%;
    aspect-ratio: 1 / 1;
  }
  .kb-breadcrumb { bottom: 12px; font-size: 12px; line-height: 18px; }
  .kb-breadcrumb ol { gap: 0 6px; }
  .kb-breadcrumb li { gap: 6px; }

  .kb-toc-head { font-size: 12px; }
  .kb-toc-item { padding: 7px 0 7px 12px; }
  .kb-toc-item .kb-toc-text { font-size: 15px; line-height: 22px; }

  .kb-article > section { padding: 36px 0; }
  .kb-h2 { font-size: 24px; }
  .kb-h3-teal, .kb-h3-green { font-size: 18px; }
  .kb-h3-teal { margin: 32px 0 14px; }
  .kb-p,
  .kb-lead-note,
  .kb-bullet-list li { font-size: 15.5px; letter-spacing: .2px; }
  .kb-lead-note { padding: 16px 18px; margin: 20px 0; }
  .kb-emphasis { font-size: 17px; }
  .kb-eyebrow span { font-size: 13px; letter-spacing: .8px; }

  .kb-figure { padding: 20px 16px; border-radius: 16px; overflow-x: auto; }
  .kb-figure-title,
  .kb-figure .kb-figure-subtitle { font-size: 17px; margin-bottom: 18px; }

  /* 表格改流動欄寬 */
  .kb-table .kb-tr { padding: 12px 12px; }
  .kb-table .kb-colh { width: 50%; }
  .kb-table .kb-colq { width: 25%; }
  .kb-table .kb-colt { width: 33.333%; }
  .kb-table .kb-col1 { width: 40%; }
  .kb-table .kb-col2 { width: 30%; }
  .kb-table .kb-col3 { width: 30%; }
  .kb-table .kb-td,
  .kb-table .kb-thead > div { font-size: 14px; letter-spacing: .2px; }

  .kb-flow { gap: 14px; }
  .kb-flow-step { gap: 14px; }
  .kb-flow-num { width: 34px; height: 34px; font-size: 13px; }
  .kb-flow::before { left: 16px; }
  .kb-flow-label { font-size: 15px; padding: 10px 14px; }

  /* Ring:手機無設計稿,改為直式堆疊(中心置頂),節點樣式沿用 */
  .kb-ring {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .kb-ring::before { display: none; }
  .kb-ring-core,
  .kb-ring-item {
    position: static;
    transform: none;
    width: auto;
  }
  .kb-ring-core {
    aspect-ratio: auto;
    padding: 14px;
    border-radius: 999px;
    margin-bottom: 4px;
    font-size: 16px;
  }
  .kb-ring-item { justify-content: flex-start; }

  /* Pillars:手機無設計稿,五張卡片改兩欄自動換行,箭頭收成單一置中 */
  .kb-pillars-row { flex-wrap: wrap; }
  .kb-pillar { flex: 1 1 calc(50% - 6px); }
  .kb-pillars-arrows { justify-content: center; }
  .kb-pillars-arrows span { flex: 0 0 40px; }
  .kb-pillars-arrows span:not(:first-child) { display: none; }
  .kb-pillars-note { font-size: 12.5px; }
  /* 「或」相隔的三張卡改直式,「或」置中夾在卡片之間;箭頭列的空位已被上一條規則藏掉 */
  .kb-pillars-row--or { flex-direction: column; }
  .kb-pillars-row--or .kb-pillar { flex: 0 0 auto; }
  .kb-pillars-or { flex-basis: auto; }

  /* 評級階梯:柱高等比縮短,避免手機上過高 */
  .kb-grades { gap: 8px; }
  .kb-grade-col--c { --g-height:  48px; }
  .kb-grade-col--b { --g-height:  92px; }
  .kb-grade-col--a { --g-height: 136px; }
  .kb-grade-cap { font-size: 12px; }
  .kb-grade-num { font-size: 16px; }
  .kb-grade-val { font-size: 15px; }
  .kb-grade-bar { padding-bottom: 12px; border-radius: 10px; font-size: 15px; }

  /* Roadmap:手機無設計稿,橫向七節點放不下,改直式時間軸 */
  .kb-roadmap {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 40px;
    padding-bottom: 0;
  }
  .kb-roadmap::before {
    /* 直式軌道:首尾節點中心距容器上下緣都是 padding(7) + 節點半徑(11) = 18px,
       與節點數無關,故不沿用桌機的 1/(2n) */
    left: 11px;
    right: auto;
    top: 18px;
    bottom: 18px;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
      rgba(var(--c-tint-rgb), .22) 0%,
      rgba(var(--c-tint-rgb), .5) 55%,
      rgb(var(--c-tint-rgb)) 100%);
  }
  .kb-roadmap-item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 7px 0;
  }
  /* 橫向排列時 dot 靠左,而一般節點 16px、末端節點 22px 寬度不同,
     中心會落在不同位置。左右各補 3px 讓兩者同寬 22px,中心一致落在軌道的 11px,
     順帶讓所有標籤的左緣對齊 */
  .kb-roadmap-dot { margin: 3px; }
  .kb-roadmap-label { margin-top: 0; text-align: left; }
  /* 「逾期」靠左對齊容器,短線仍對齊節點中心(11px),兩者不共用同一個水平基準 */
  .kb-roadmap-flag {
    top: -30px;
    left: 0;
    transform: none;
  }
  /* 短線由文字下緣一路連到第一個節點中心(18px),與軌道接續;
     重疊到節點的部分會被節點的 z-index 蓋住。
     flag 已改為靠左,故 left 要明寫 11px 對齊節點中心,不能沿用桌機的 50% */
  .kb-roadmap-flag::after { top: 21px; left: 11px; height: 27px; }

  /* 圖示列變體:桌機的固定欄寬與底部軌道都要解除,改回直式那一套。
     這些屬性在桌機是用兩個 class 選的,優先級高於上面的直式規則,
     不重寫的話手機會沿用桌機值 */
  /* margin-top 要再寫一次:上面直式規則的 40px 是為「逾期」標記讓位,
     與桌機變體的 margin-top: 0 優先級相同、寫在後面,會把它蓋掉 */
  .kb-roadmap--icon { --rm-w: auto; margin-top: 0; justify-content: flex-start; }
  .kb-roadmap--icon .kb-roadmap-item { flex: 0 0 auto; }
  .kb-roadmap--icon::before {
    top: 18px;
    bottom: 18px;
    left: 11px;
    right: auto;
    transform: translateX(-50%);
  }
  /* 直式時節點要回到列首,圖示與標籤才接在它右邊 */
  .kb-roadmap--icon .kb-roadmap-dot { order: -1; margin: 3px; }
  /* 末端節點本身就是 22px,不能再加左右 3px,否則比一般節點(16+3+3)寬 6px,
     該列的圖示與標籤會跟著往右偏 */
  .kb-roadmap--icon .kb-roadmap-item--end .kb-roadmap-dot { margin: 0; }
  .kb-roadmap--icon .kb-roadmap-label { margin-top: 0; }
  /* 直式後欄寬不再受限,標籤字級回到與其他 roadmap 相同 */
  .kb-roadmap--n7w108 .kb-roadmap-label { font-size: 14px; }
  /* 桌機為對齊設計稿斷行點而寫死的 <br>,直式排版寬度夠,不需要斷 */
  .kb-roadmap--icon .kb-roadmap-label br { display: none; }
  /* 直式後欄寬不再受限,標籤字級回到與其他 roadmap 相同 */
  .kb-roadmap--n7w100 .kb-roadmap-label { font-size: 14px; }
  /* 兩排版:兩條直式列首尾相接成一條。排間距歸零,上排軌道延伸到底、下排從頂開始,
     漸層改直向並沿用跨排分段(上排 22%→55%、下排 55%→100%),看起來就是一條連續軌道 */
  .kb-roadmap-2row { gap: 0; }
  .kb-roadmap--row1::before {
    bottom: 0;
    background: linear-gradient(180deg,
      rgba(var(--c-tint-rgb), .22) 0%,
      rgba(var(--c-tint-rgb), .38) 55%,
      rgba(var(--c-tint-rgb), .55) 100%);
  }
  .kb-roadmap--row2::before {
    top: 0;
    background: linear-gradient(180deg,
      rgba(var(--c-tint-rgb), .55) 0%,
      rgba(var(--c-tint-rgb), .77) 55%,
      rgb(var(--c-tint-rgb)) 100%);
  }

  /* KPI 卡:五張橫排在手機放不下,改兩欄 */
  .kb-kpi-row { flex-wrap: wrap; }
  .kb-kpi-card { flex: 1 1 calc(50% - 6px); }

  /* 案例比較卡:兩張並列在手機放不下,改上下堆疊 */
  .kb-compare { flex-direction: column; gap: 12px; }
  .kb-compare-card { padding: 18px; }

  /* Converge:橫向收斂改直式,括號線收掉、箭頭轉向下、結果色塊滿版接在最下 */
  .kb-converge { width: 100%; }
  .kb-converge-row { flex-direction: column; align-items: stretch; }
  .kb-converge-list,
  .kb-converge-result { flex: 0 0 auto; width: auto; }
  .kb-converge-list::after,
  .kb-converge-item::after { display: none; }
  .kb-converge-arrow { flex: 0 0 auto; width: 14px; height: 36px; margin: 10px auto; }
  .kb-converge-arrow::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 14px;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
  }
  .kb-converge-arrow::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 14px solid var(--c-line);
    border-bottom: 0;
  }
  .kb-converge-result { min-height: 80px; font-size: 18px; }

  /* Diverge:同 Converge 改直式,來源塊滿版在上、箭頭轉向下、括號線收掉 */
  .kb-diverge { flex-direction: column; align-items: stretch; width: 100%; }
  .kb-diverge-source,
  .kb-diverge-list { flex: 0 0 auto; width: auto; }
  .kb-diverge-source { min-height: 80px; }
  .kb-diverge-list { padding-left: 0; }
  .kb-diverge-list::before,
  .kb-diverge-item::before { display: none; }
  .kb-diverge-arrow { flex: 0 0 auto; width: 14px; height: 36px; margin: 10px auto; }
  .kb-diverge-arrow::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 14px;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
  }
  .kb-diverge-arrow::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 14px solid var(--c-line);
    border-bottom: 0;
  }
  /* --w300 的尺寸是兩個 class 選的,優先級高於上面的直式規則,要再解除一次 */
  .kb-diverge--w300 .kb-diverge-source,
  .kb-diverge--w300 .kb-diverge-list { flex-basis: auto; width: auto; }
  .kb-diverge--w300 .kb-diverge-source { min-height: 80px; font-size: 18px; letter-spacing: .36px; }
  .kb-diverge--w300 .kb-diverge-arrow { flex-basis: auto; margin-right: auto; }
  .kb-diverge--w300 .kb-diverge-arrow::before { right: auto; }
  .kb-diverge--w300 .kb-diverge-list { padding-left: 0; }

  /* 外框卡片列:手機無設計稿,五張改兩欄自動換行 */
  .kb-outline-card { flex: 1 1 calc(50% - 6px); min-height: 0; padding: 20px 8px 14px; }

  /* 膠囊鏈:手機無設計稿。維持橫排、靠桌機的 flex-wrap 自然換行(700px 約兩行、375px 約三行),
     不改直式——五顆直排會高到 360px,窄版太佔空間 */
  .kb-chain { gap: 8px; }
  .kb-chain-item { font-size: 15px; padding: 9px 14px; }
  /* 兩節點短鏈手機放得下,維持橫向 */
  .kb-chain--start { flex-direction: row; }
  .kb-chain--start .kb-chain-arrow { transform: none; }

  .kb-pill { font-size: 14px; padding: 9px 16px 9px 12px; }
  /* 三欄格手機無設計稿,改兩欄 */
  .kb-pill-list--grid { grid-template-columns: repeat(2, 1fr); }

  .kb-readmore { padding: 16px; }
  .kb-readmore-row { gap: 12px; }
  .kb-readmore-book { width: 40px; height: 40px; }
  .kb-readmore-title { font-size: 17px; }
  .kb-readmore-desc { font-size: 13.5px; }

  .kb-conclusion { padding: 24px 20px; border-radius: 16px; }
}

/* ---------- 手機吸頂目錄與回頂部 ---------- */
.kb-toc-fixedbar { display: none; }

/* 閱讀進度條:貼在站台 header 下緣,top 由 JS 依 header 實際高度設定。
   z-index 低於 header(999),讓 header 陰影自然疊在上面 */
.kb-progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: #e3e3e3;
  z-index: 998;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.kb-progress.is-show { opacity: 1; }
.kb-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-main, #5ab5b2);
  transition: width .1s linear;
}

/* 桌機吸頂標題列:貼在進度條下緣(top 由 JS 設定),捲過 Banner 後出現,提示本頁主題。
   內容寬 942px 與 Banner 標題容器對齊;≤991px 隱藏,手機改由吸頂目錄列負責 */
.kb-titlebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 997;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(33, 37, 41, .08);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.kb-titlebar.is-show {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.kb-titlebar-inner {
  max-width: 942px;
  margin: 0 auto;
  padding: 10px 0;
  font-family: "Noto Sans TC", sans-serif;
}
.kb-titlebar ol {
  display: flex;
  align-items: baseline;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 24px;
  color: #787878;
  white-space: nowrap;
  overflow: hidden;
}
.kb-titlebar li { display: flex; gap: 8px; margin: 0; }
.kb-titlebar li + li::before { content: "/"; color: #c4c4c4; }
.kb-titlebar-current {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-strong, #4aa3a4);
}
@media (max-width: 991px) {
  .kb-titlebar { display: none; }
}

.kb-backtop {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--kb-backtop-color, #4aa3a4);
  box-shadow: 0 4px 16px rgba(33, 37, 41, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s;
  z-index: 40;
}
.kb-backtop.is-show { opacity: 1; visibility: visible; transform: none; }
.kb-backtop svg { display: block; }
body:has(.kb-page--loan) .kb-backtop { color: #f18252; }

@media (max-width: 991px) {
  /* 原目錄區塊:與桌機側欄相同樣式,完整攤開在文章上方 */

  /* 吸頂目錄列:捲離原目錄後從頂端滑入 */
  .kb-toc-fixedbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(33, 37, 41, .1);
    transform: translateY(-110%);
    transition: transform .28s ease;
  }
  .kb-toc-fixedbar.is-show { transform: none; }

  .kb-toc-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 13px 20px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .kb-toc-toggle-label {
    flex-shrink: 0;
    padding: 4px 12px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    color: var(--c-strong);
  }
  .kb-toc-current {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-toc-active-text);
  }
  .kb-toc-caret {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-right: 2px;
    border-right: 2px solid var(--c-strong);
    border-bottom: 2px solid var(--c-strong);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
  }
  .kb-toc-fixedbar.is-open .kb-toc-caret { transform: rotate(225deg) translateY(-2px); }

  .kb-toc-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--c-main), var(--c-strong));
    pointer-events: none;
  }

  /* 下拉面板:卡片式 */
  .kb-toc-panel {
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 2px);
    max-height: min(60vh, 480px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(var(--c-rgb), .18);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(33, 37, 41, .16);
  }
  .kb-toc-fixedbar.is-open .kb-toc-panel { display: block; animation: kbTocDrop .22s ease; }
  @keyframes kbTocDrop {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  /* 面板內容與 PC 側欄一致:小標+分隔線+原始清單樣式 */
  .kb-toc-panel { padding: 16px 20px 18px; }
  .kb-toc-panel .kb-toc-head { margin: 0; }
  .kb-toc-panel .kb-toc-item { width: auto; }

  /* 錨點捲動時預留吸頂列高度 */
  .kb-article > section { scroll-margin-top: 64px; }

  .kb-backtop { width: 48px; height: 48px; right: 14px; bottom: 16px; }
}

/* 回頂部鈕質感 */
.kb-backtop { border: 1px solid rgba(33, 37, 41, .06); }
.kb-backtop:hover { transform: scale(1.06); }
.kb-backtop:active { transform: scale(.94); }