/**
 * 知識庫前台改版 —— 樣式
 *
 * 設計稿 `agents/kb-design/` 是 inline style 的靜態 mockup；
 * 這裡是把它整理成一組 tz-kb-* 命名空間的正規樣式，不是把 inline style 搬過來。
 *
 * 無障礙上與設計稿的差異（設計稿沒過的地方，這裡改掉）：
 *   ① 設計稿深色 CTA 的次要按鈕邊框是 rgba(255,255,255,.34)，
 *      對 #192a3d 只有 2.98:1，未達控制項 3:1 → 改 .45（4.15:1）。
 *   ② 設計稿的產品卡邊框是 #e1e8ed（1.24:1）。整張卡是一個連結，
 *      屬控制項 → 改 #7a8da1（3.41:1）。純裝飾的容器邊框仍用 #e1e8ed。
 *   ③ 設計稿完全沒有定義 :focus-visible → 本檔補齊（見「鍵盤焦點」一節）。
 *
 * 對比實測（逐一算過，白底／#fafbfc 底）：
 *   #192a3d 14.58 / 14.08   #3a4f66 8.43 / 8.14   #55677a 5.82 / 5.62
 *   #1559ed 5.70 / 5.50     #7d6019 5.90 / 5.69   #7a8da1 3.41 / 3.29（邊框）
 *   白字 on #1559ed 5.70    白字 on #192a3d 14.58
 *
 * @package blocksy-child
 */

/* ==================================================================
 * 1. 色票與尺寸
 * ================================================================== */

.tz-kb {
	--tz-kb-ink: #192a3d;          /* 主要文字 */
	--tz-kb-ink-2: #3a4f66;        /* 內文 */
	--tz-kb-ink-3: #55677a;        /* 次要說明 */
	--tz-kb-link: #1559ed;         /* 連結／主色（＝站內色票 2） */
	--tz-kb-link-hover: #0f47c4;
	--tz-kb-gold: #7d6019;         /* 序號：是內容不是裝飾，所以用深金 */
	--tz-kb-rule: #d3b574;         /* 純裝飾的金色線 */
	--tz-kb-line: #e1e8ed;         /* 裝飾性分隔線／容器邊框 */
	--tz-kb-line-soft: #eef1f4;
	--tz-kb-control: #7a8da1;      /* 控制項邊框，3.41:1 */
	--tz-kb-surface: #ffffff;
	--tz-kb-canvas: #fafbfc;
	--tz-kb-tint: #f2f5f7;
	--tz-kb-tint-blue: #eef4ff;
	--tz-kb-dark: #192a3d;
	--tz-kb-focus: #1559ed;

	/* 錯誤／警示。不是這裡發明的色 —— 沿用站上既有的那一組：
	   tw-forms 前台 `--twf-bad / -ink / -bg / -line`
	   （wp-content/plugins/tw-forms/assets/css/front.css:38-41，
	   表單錯誤摘要 `.twf-errsum` 就是這個樣子），
	   contact-form.css:23 的 `--tzf-danger` 也是同一個 #b3261e。
	   對比：#7f1d1d on #fdeceb = 8.77:1（一般文字門檻 4.5，過）
	         #b3261e on #fdeceb = 5.72:1（圖示／邊框門檻 3.0，過） */
	--tz-kb-bad: #b3261e;
	--tz-kb-bad-ink: #7f1d1d;
	--tz-kb-bad-bg: #fdeceb;
	--tz-kb-bad-line: #f0c4c1;

	--tz-kb-max: 1290px;
	--tz-kb-pad: 20px;
	--tz-kb-radius: 5px;

	background: var(--tz-kb-canvas);
	color: var(--tz-kb-ink-2);
	/* 這一整塊住在 .entry-content 裡，別讓佈景主題的欄寬限制它 */
	width: 100%;
	max-width: none;
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
}

.tz-kb *,
.tz-kb *::before,
.tz-kb *::after {
	box-sizing: border-box;
}

.tz-kb-wrap {
	max-width: var(--tz-kb-max);
	margin-inline: auto;
	padding-inline: var(--tz-kb-pad);
}

/* 只給螢幕報讀器的文字 */
.tz-kb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
 * 2. 鍵盤焦點
 *
 * 設計稿沒有定義焦點樣式，這一節是實作補上的。
 * 用 :focus-visible 而不是 :focus —— 滑鼠點擊不該畫框。
 * 位移 2px 讓框浮在元件外側，深色區塊改用白框（見下）。
 * ================================================================== */

.tz-kb a:focus-visible,
.tz-kb button:focus-visible,
.tz-kb input:focus-visible,
.tz-kb [tabindex]:focus-visible {
	outline: 3px solid var(--tz-kb-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

.tz-kb-cta a:focus-visible,
.tz-kb-mobilebar a:focus-visible {
	--tz-kb-focus: #ffffff;
}

/* ==================================================================
 * 3. 共用元件
 * ================================================================== */

.tz-kb a {
	color: var(--tz-kb-link);
	text-decoration: none;
}

.tz-kb a:hover {
	color: var(--tz-kb-link-hover);
	text-decoration: underline;
}

.tz-kb h1,
.tz-kb h2,
.tz-kb h3,
.tz-kb h4 {
	color: var(--tz-kb-ink);
	font-weight: 700;
}

.tz-kb p {
	margin: 0;
}

.tz-kb ul,
.tz-kb ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tz-kb-icon {
	display: block;
}

/* --- 按鈕 ------------------------------------------------------- */

.tz-kb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/*
 * ⚠️ 這一整節的元件選擇器刻意寫成 `.tz-kb .tz-kb-xxx`（兩個 class）。
 * 上面的通則 `.tz-kb a`（0,1,1）與 `.tz-kb a:hover`（0,2,1）specificity
 * 比單一 class 高，單寫 `.tz-kb-btn--primary`（0,1,0）會被它蓋掉 ——
 * 實測就是這樣：主按鈕的白字變成藍字壓藍底，對比 1.00:1，完全看不見。
 * 加一層 .tz-kb 把 specificity 拉到 (0,2,0) / (0,3,0) 才贏得過。
 */
.tz-kb .tz-kb-btn:hover {
	text-decoration: none;
}

.tz-kb .tz-kb-btn--primary {
	background: var(--tz-kb-link);
	color: #ffffff;
}

.tz-kb .tz-kb-btn--primary:hover {
	background: var(--tz-kb-link-hover);
	color: #ffffff;
}

.tz-kb .tz-kb-btn--outline {
	background: var(--tz-kb-surface);
	border-color: var(--tz-kb-control);
	color: var(--tz-kb-ink-2);
	font-weight: 500;
}

.tz-kb .tz-kb-btn--outline:hover {
	background: var(--tz-kb-tint);
	color: var(--tz-kb-ink);
}

/* 深色 CTA 裡的次要按鈕。邊框 .45 → 對 #192a3d 4.15:1（設計稿的 .34 只有 2.98） */
.tz-kb .tz-kb-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .45);
	color: #ffffff;
	font-weight: 500;
}

.tz-kb .tz-kb-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: #ffffff;
}

/* --- 金色裝飾線 ------------------------------------------------- */

.tz-kb-rule {
	display: block;
	width: 44px;
	height: 3px;
	margin: 0 auto 26px;
	background: var(--tz-kb-rule);
}

/* --- 搜尋表單 --------------------------------------------------- */

.tz-kb-search {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: var(--tz-kb-surface);
	border-radius: 6px;
}

.tz-kb-search__icon {
	display: flex;
	align-items: center;
	color: var(--tz-kb-ink-3);
}

.tz-kb-search__input {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	border: 0;
	background: transparent;
	color: var(--tz-kb-ink);
	font: inherit;
	line-height: 1.4;
}

.tz-kb-search__input::placeholder {
	color: #667a8f;
	opacity: 1;
}

.tz-kb-search__btn {
	flex: 0 0 auto;
	border: 0;
	background: var(--tz-kb-link);
	color: #ffffff;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

.tz-kb-search__btn:hover {
	background: var(--tz-kb-link-hover);
}

.tz-kb-search--hero {
	height: 60px;
	border: 2px solid var(--tz-kb-link);
	box-shadow: 0 2px 10px rgba(21, 89, 237, .10);
}

.tz-kb-search--hero .tz-kb-search__icon {
	padding: 0 6px 0 20px;
}

.tz-kb-search--hero .tz-kb-search__input {
	padding: 0 14px;
	font-size: 17px;
}

.tz-kb-search--hero .tz-kb-search__btn {
	width: 116px;
	font-size: 16px;
}

.tz-kb-search--bar {
	height: 48px;
	max-width: 720px;
	border: 1px solid var(--tz-kb-control);
	border-radius: 5px;
}

.tz-kb-search--bar .tz-kb-search__icon {
	padding: 0 4px 0 16px;
}

.tz-kb-search--bar .tz-kb-search__input {
	padding: 0 12px;
	font-size: 16px;
}

.tz-kb-search--bar .tz-kb-search__btn {
	width: 92px;
	font-size: 15px;
}

/*
 * 搜尋框的高度。
 *
 * 實測：Blocksy 對 `input[type="search"]` 設了固定 height（算出來 40px），
 * specificity (0,1,1) 比單一 class 的 .tz-kb-search__input (0,1,0) 高，
 * 於是 `align-self: stretch` 完全沒有作用（stretch 只有在 height:auto
 * 時才會拉長），觸控目標卡在 40px。多墊兩層 class 才蓋得過去。
 */
.tz-kb .tz-kb-search .tz-kb-search__input {
	height: auto;
}

/* 輸入框自己的焦點框會被 overflow:hidden 裁掉，改讓整條發亮 */
.tz-kb-search:focus-within {
	outline: 3px solid var(--tz-kb-focus);
	outline-offset: 2px;
}

.tz-kb-search__input:focus-visible {
	outline: none;
}

/* --- 關鍵字 chip ------------------------------------------------ */

.tz-kb .tz-kb-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--tz-kb-control);
	border-radius: 999px;
	background: var(--tz-kb-canvas);
	color: var(--tz-kb-ink-2);
	font-size: 14px;
}

.tz-kb .tz-kb-chip:hover {
	background: var(--tz-kb-tint-blue);
	border-color: var(--tz-kb-link);
	color: var(--tz-kb-link);
	text-decoration: none;
}

/* --- 深色 CTA --------------------------------------------------- */

.tz-kb-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 26px 28px;
	background: var(--tz-kb-dark);
	border-radius: var(--tz-kb-radius);
}

/*
 * ⚠️ 2026-09-09（A2）：這三條的選擇器從 `.tz-kb-cta__title`（0,1,0）
 * 改成 `.tz-kb .tz-kb-cta__title`（0,2,0）。
 *
 * 它們是 `<p>`，而檔案上方的 `.tz-kb p { margin: 0 }` 是 (0,1,1) ——
 * **一直贏過這裡**，所以標題那 6px 的下緣其實從上線第一天就沒有生效，
 * 標題與說明是黏在一起的（首頁、文章頁、這一頁三處都是）。
 * 量到才發現：`getComputedStyle(.tz-kb-cta__title).marginBottom === '0px'`。
 * 這正是本檔第 170 行那段註解講過的同一個坑，只是這一節漏了。
 * 沒有改任何數值，只是讓原作者寫的 6px 真的算數。
 */
.tz-kb .tz-kb-cta__title {
	margin: 0 0 6px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.tz-kb .tz-kb-cta__desc {
	margin: 0;
	/* .78 → 對 #192a3d 9.40:1 */
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
	line-height: 1.85;
}

/* 第三行小字（服務時間）。設計稿 SearchEmpty 的 rgba(255,255,255,.62)
   → 對 #192a3d 是 6.52:1，過 4.5。空字串時 PHP 端整行不輸出。 */
.tz-kb .tz-kb-cta__note {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, .62);
	font-size: 13px;
	line-height: 1.8;
}

.tz-kb-cta__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* --- 麵包屑 ----------------------------------------------------- */

.tz-kb-crumbrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.tz-kb-crumbs ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--tz-kb-ink-3);
}

.tz-kb-crumbs li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tz-kb-crumbs li + li::before {
	content: "›";
	color: var(--tz-kb-ink-3);
}

.tz-kb-crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.tz-kb-crumbs li[aria-current] span {
	color: var(--tz-kb-ink-3);
}

.tz-kb .tz-kb-crumbrow__search {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--tz-kb-control);
	border-radius: 4px;
	color: var(--tz-kb-ink-2);
	font-size: 14px;
}

.tz-kb .tz-kb-crumbrow__search:hover {
	border-color: var(--tz-kb-link);
	color: var(--tz-kb-link);
	text-decoration: none;
}

/* ==================================================================
 * 4. 知識庫首頁
 * ================================================================== */

.tz-kb-hero {
	padding: 72px 0 60px;
	background: var(--tz-kb-surface);
	border-bottom: 1px solid var(--tz-kb-line);
}

.tz-kb-hero__inner {
	max-width: 880px;
	text-align: center;
}

.tz-kb-hero__title {
	margin: 0 0 12px;
	font-size: 34px;
	line-height: 1.5;
	letter-spacing: .01em;
}

.tz-kb-hero__lead {
	margin: 0 0 34px;
	color: var(--tz-kb-ink-3);
	font-size: 16px;
	line-height: 1.9;
}

.tz-kb-suggest {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.tz-kb-suggest__label {
	margin-right: 4px;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
}

.tz-kb-home__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 64px;
	align-items: start;
	padding-top: 56px;
	padding-bottom: 24px;
}

.tz-kb-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.tz-kb-sechead__title {
	margin: 0;
	font-size: 21px;
	line-height: 1.6;
}

.tz-kb-sechead__note {
	margin: 6px 0 22px;
	color: var(--tz-kb-ink-3);
	font-size: 14px;
}

/* --- 最常被查詢的問題 -------------------------------------------- */

.tz-kb-poplist {
	border-top: 1px solid var(--tz-kb-line);
}

.tz-kb-poplist__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--tz-kb-line-soft);
}

.tz-kb-poplist__num {
	flex: 0 0 auto;
	width: 26px;
	padding-top: 12px;
	color: var(--tz-kb-gold);
	font-size: 15px;
	font-weight: 700;
}

.tz-kb-poplist__body {
	flex: 1;
	min-width: 0;
}

.tz-kb-poplist__link {
	display: block;
	/* 觸控目標：整行可點，最小高度 44 */
	min-height: 44px;
	padding: 4px 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.65;
}

.tz-kb-poplist__path {
	display: block;
	margin-top: 2px;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
}

/* --- 依產品瀏覽 -------------------------------------------------- */

.tz-kb-catlist {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tz-kb .tz-kb-cat {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	min-height: 72px;
	background: var(--tz-kb-surface);
	/* 整張卡是連結 ＝ 控制項，邊框要 3:1（設計稿的 #e1e8ed 只有 1.24） */
	border: 1px solid var(--tz-kb-control);
	border-radius: 4px;
	color: var(--tz-kb-ink);
}

.tz-kb .tz-kb-cat:hover {
	border-color: var(--tz-kb-link);
	background: var(--tz-kb-tint-blue);
	color: var(--tz-kb-ink);
	text-decoration: none;
}

.tz-kb-cat__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background: var(--tz-kb-tint);
	color: var(--tz-kb-ink);
}

.tz-kb-cat__icon svg {
	width: 20px;
	height: 20px;
}

.tz-kb-cat__body {
	flex: 1;
	min-width: 0;
}

.tz-kb-cat__name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.tz-kb-cat__sub {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
	line-height: 1.6;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tz-kb-cat__count {
	flex: 0 0 auto;
	color: var(--tz-kb-ink-3);
	font-size: 14px;
	font-weight: 700;
}

.tz-kb-home__cta {
	padding-bottom: 72px;
}

/* ==================================================================
 * 5. 搜尋結果頁／分類頁（同一套骨架）
 * ================================================================== */

.tz-kb-searchbar {
	padding: 22px 0;
	background: var(--tz-kb-surface);
	border-bottom: 1px solid var(--tz-kb-line);
}

.tz-kb-archive .tz-kb-crumbrow {
	margin-top: 20px;
	margin-bottom: 0;
}

/*
 * 分類頁／搜尋結果頁上方已經有一整條搜尋列，麵包屑那一顆「搜尋知識庫」
 * 就是重複的入口（截圖看出來的）。只在文章頁留著 —— 那裡沒有搜尋列。
 */
.tz-kb-results .tz-kb-crumbrow__search {
	display: none;
}

.tz-kb-results__grid {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding-top: 26px;
	padding-bottom: 72px;
}

.tz-kb .tz-kb-rail__title {
	margin: 0 0 12px;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
}

.tz-kb .tz-kb-rail__title + .tz-kb-filter {
	margin-bottom: 28px;
}

.tz-kb-rail__group + .tz-kb-rail__group {
	margin-top: 28px;
}

.tz-kb .tz-kb-filter__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 8px;
	border-radius: 4px;
	color: var(--tz-kb-ink-2);
	font-size: 15px;
}

.tz-kb .tz-kb-filter__item:hover {
	background: var(--tz-kb-tint);
	color: var(--tz-kb-ink);
	text-decoration: none;
}

.tz-kb .tz-kb-filter__item.is-active {
	background: var(--tz-kb-tint-blue);
	color: var(--tz-kb-ink);
	font-weight: 500;
}

.tz-kb-filter__box {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--tz-kb-control);
	border-radius: 3px;
	background: var(--tz-kb-surface);
	color: #ffffff;
}

.tz-kb .tz-kb-filter__item.is-active .tz-kb-filter__box {
	border-color: var(--tz-kb-link);
	background: var(--tz-kb-link);
}

.tz-kb-filter__box svg {
	width: 12px;
	height: 12px;
}

.tz-kb-filter__name {
	flex: 1;
	min-width: 0;
	line-height: 1.5;
}

.tz-kb-filter__count {
	flex: 0 0 auto;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
}

/* --- 結果標題 --------------------------------------------------- */

.tz-kb-results__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tz-kb-line);
}

.tz-kb-results__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
}

.tz-kb-results__count {
	margin-left: 10px;
	color: var(--tz-kb-ink-2);
	font-size: 15px;
	font-weight: 400;
}

.tz-kb-archive__desc {
	margin: 16px 0 0;
	color: var(--tz-kb-ink-2);
	font-size: 15px;
	line-height: 1.9;
}

/* --- 一筆結果 --------------------------------------------------- */

.tz-kb-result {
	padding: 18px 0;
	border-bottom: 1px solid var(--tz-kb-line-soft);
}

.tz-kb-result__path {
	margin: 0 0 6px;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
	line-height: 1.6;
}

.tz-kb-result__title {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.6;
}

.tz-kb-result__title a {
	display: inline-block;
	min-height: 44px;
	padding: 6px 0;
	color: var(--tz-kb-link);
	font-weight: 700;
}

.tz-kb-result__excerpt {
	max-width: 760px;
	margin: 0;
	color: var(--tz-kb-ink-2);
	font-size: 15px;
	line-height: 1.9;
}

.tz-kb-result__date {
	margin: 10px 0 0;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
}

.tz-kb mark {
	padding: 0 2px;
	border-radius: 2px;
	/* #192a3d on #ffe9a8 = 12.13:1 */
	background: #ffe9a8;
	color: var(--tz-kb-ink);
}

.tz-kb-more {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 30px 0 0;
}

/* --- 搜尋 0 筆（設計稿 SearchEmpty / SearchEmptyMobile）------------
 *
 * 設計稿：Artifact d5247cd3-1caa-4a21-a511-3ffc4aba73d8 的後兩個畫板。
 * 前兩個畫板（404 桌機／手機）已經上線，所以這一區的每一個色與每一個
 * 元件都刻意跟 `not-found-404.css` 對得起來 —— chip 直接用既有的
 * `.tz-kb-chip`（跟 `.tz-404-chip` 是同一組值），深色帶直接用既有的
 * `.tz-kb-cta`。**不要為「找不到」再發明第二種視覺語言。**
 *
 * 與設計稿的落差全部寫在 `agents/A3-404-PAGE.md` §7 的交付說明裡。
 * ------------------------------------------------------------------ */

/*
 * 0 筆時左欄不輸出，版面收成單欄置中。
 *
 * ⚠️ 一定要蓋掉 `.tz-kb-results__grid` 的 `236px minmax(0,1fr)` ——
 *    只剩一個子元素時它會掉進第一欄（236px 寬），整頁被壓成一條。
 * ⚠️ 選擇器寫成兩個 class（0,2,0）而不是單寫 `--solo`（0,1,0），
 *    才穩穩贏過檔案前段 `.tz-kb-wrap` 的 max-width，不必依賴檔案順序。
 *
 * 880 = 設計稿的 920 減掉本站左右各 20px 的 --tz-kb-pad（設計稿是 40px），
 * 內容寬正好是設計稿的 840px。
 */
.tz-kb-results .tz-kb-results__grid--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 880px;
	padding-top: 44px;
}

/* 0 筆的標題比有結果時大一級（設計稿 26 vs 20），而且底下不畫線 ——
   那條線是「結果清單開始了」的意思，這裡沒有清單。 */
.tz-kb-results .tz-kb-results__head--empty {
	display: block;
	padding-bottom: 0;
	border-bottom: 0;
}

.tz-kb-results .tz-kb-results__head--empty .tz-kb-results__title {
	margin-bottom: 6px;
	font-size: 26px;
	line-height: 1.5;
}

/* 設計稿那句導言。**取代**了原本「找不到符合『…』的文章。換個關鍵字，
   或直接把錯誤訊息貼給我們。」—— 那兩件事現在各自有更好的位置
   （可以點的 chip ＋ 底下的深色帶），見 knowledge-base.php 的註解。
   #55677a on #fafbfc = 5.62:1

   ⚠️ 2026-09-10 訂正：A2 第一版寫的是 `.tz-kb .tz-kb-noresult`，
   **而 `.tz-kb-noresult` 是共用的** —— `kb_templates/archive-categories.php:216`
   的「這個分類目前沒有已發布的文章。」也在用，而且同樣在 `.tz-kb` 之下，
   所以那條 (0,2,0) 的新選擇器打得到它：下緣多 24px、色從 #3a4f66 變 #55677a、
   字級從繼承值變成 15px，手機再多一條 margin-bottom。
   **那是兩種不同的訊息，不該共用一組值。** 這一句改用自己的 class。 */
.tz-kb .tz-kb-empty__intro {
	margin: 0 0 24px;
	color: var(--tz-kb-ink-3);
	font-size: 15px;
	line-height: 1.9;
}

/* 空的分類彙整頁那一句（`kb_templates/archive-categories.php`）。
   **這是 T6 上線以來就有的規則，原封不動放回來**，不是新寫的值。

   ⚠️ 它的 `margin` 從第一天起就沒有生效過：`.tz-kb p { margin: 0 }`（0,1,1）
   贏過這條 (0,1,0)，所以線上量到的一直是 0（A2 commit 自己也量到同一件事）。
   **沒有順手把它補成 (0,2,0)** —— 那會讓彙整頁上緣多出 24px，
   是一個沒有人要求、我也驗證不到（站上找不到 0 篇的知識庫分類）的版面變動。
   要不要讓這 24px 算數，是彙整頁自己的待決事項。 */
.tz-kb-noresult {
	margin: 24px 0 0;
	color: var(--tz-kb-ink-2);
}

/* 白卡。邊框 #e1e8ed（1.24:1）是**純裝飾的容器邊框**，不是控制項 ——
   卡片裡每一個可點的東西自己都有 3:1 以上的邊框。 */
.tz-kb-empty__card {
	padding: 26px 28px 28px;
	background: var(--tz-kb-surface);
	border: 1px solid var(--tz-kb-line);
	border-radius: var(--tz-kb-radius);
}

.tz-kb .tz-kb-empty__lead {
	margin: 0 0 14px;
	color: var(--tz-kb-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}

.tz-kb-empty__chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

/* 「或換個問法」在 chip 區下面時上緣已經有 26px，這裡只收一點 */
.tz-kb .tz-kb-empty__chips + .tz-kb-empty__lead {
	margin-bottom: 12px;
}

.tz-kb-empty__tips {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tz-kb-empty__tip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--tz-kb-ink-2);
	font-size: 15px;
	line-height: 1.8;
}

/* 打勾是內容的一部分（「這是一條建議」），不是純裝飾的淺金線，
   所以用深金 #7d6019 —— on #ffffff 5.90:1。 */
.tz-kb-empty__tick {
	flex: 0 0 auto;
	margin-top: 6px;
	color: var(--tz-kb-gold);
}

.tz-kb-empty__strong {
	color: var(--tz-kb-ink);
	font-weight: 500;
}

.tz-kb .tz-kb-empty__browse {
	margin: 34px 0 14px;
	color: var(--tz-kb-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

/*
 * 產品卡 —— 用的是首頁那一顆 `.tz-kb-cat`，只換版面：
 * 桌機四欄排不下右側的篇數，所以照設計稿把篇數收到名稱底下。
 * 元件本身（邊框 3.41:1、hover、focus）一個字都沒改。
 */
.tz-kb-emptycats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.tz-kb .tz-kb-emptycats .tz-kb-cat {
	gap: 12px;
	padding: 14px 16px;
}

.tz-kb-emptycats .tz-kb-cat__icon {
	width: 38px;
	height: 38px;
}

.tz-kb-emptycats .tz-kb-cat__icon svg {
	width: 19px;
	height: 19px;
}

/*
 * 四欄之下每張卡的文字區只有 117px，「SketchUp 草圖大師」「WithSecure 唯思安全」
 * 一定會折成兩行（設計稿的靜態 mockup 沒有折，實測會 —— 見交付說明的落差表）。
 * `text-wrap: balance` 讓它折在「SketchUp / 草圖大師」而不是「SketchUp 草圖 / 大師」。
 * 不支援的瀏覽器就照原樣折，不影響任何尺寸。
 */
.tz-kb-emptycats .tz-kb-cat__name {
	font-size: 15px;
	text-wrap: balance;
}

.tz-kb-emptycats .tz-kb-cat__count {
	display: block;
	margin-top: 2px;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
}

.tz-kb-empty__links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 14px;
}

.tz-kb .tz-kb-empty__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 500;
}

.tz-kb-empty__arrow {
	flex: 0 0 auto;
}

/* 純裝飾的分隔符號，本身不傳達資訊（aria-hidden） */
.tz-kb-empty__sep {
	color: #d5dde4;
}

.tz-kb-empty__cta {
	margin-top: 40px;
}

/* --- 沒找到答案的出口 -------------------------------------------- */

.tz-kb-ask {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 34px;
	padding: 20px 26px;
	background: var(--tz-kb-surface);
	border: 1px solid var(--tz-kb-line);
	border-radius: var(--tz-kb-radius);
}

.tz-kb-ask__text {
	margin: 0;
	color: var(--tz-kb-ink-2);
	font-size: 15px;
	line-height: 1.85;
}

.tz-kb-ask .tz-kb-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 24px;
}

/* ==================================================================
 * 6. 文章頁
 * ================================================================== */

.tz-kb-article__grid {
	display: grid;
	grid-template-columns: minmax(0, 760px) 320px;
	gap: 72px;
	align-items: start;
	justify-content: center;
	padding-top: 26px;
	padding-bottom: 76px;
}

.tz-kb-article__grid--solo {
	grid-template-columns: minmax(0, 760px);
}

.tz-kb-article__title {
	margin: 0 0 20px;
	font-size: 32px;
	line-height: 1.55;
	letter-spacing: .01em;
}

/* --- 詮釋資料條 -------------------------------------------------- */

.tz-kb-meta {
	display: flex;
	align-items: stretch;
	margin: 0 0 34px;
	padding: 14px 0;
	border-top: 1px solid var(--tz-kb-line);
	border-bottom: 1px solid var(--tz-kb-line);
}

.tz-kb-meta__item {
	flex: 1;
	min-width: 0;
	padding: 0 20px;
}

.tz-kb-meta__item:first-child {
	padding-left: 0;
}

.tz-kb-meta__item:last-child {
	padding-right: 0;
}

.tz-kb-meta__item + .tz-kb-meta__item {
	border-left: 1px solid var(--tz-kb-line);
}

.tz-kb-meta__label {
	margin: 0 0 5px;
	color: var(--tz-kb-ink-3);
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1.6;
}

.tz-kb-meta__value {
	margin: 0;
	color: var(--tz-kb-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
}

/* --- 內文 -------------------------------------------------------
 * 這裡面是十幾年累積的 post_content：Gutenberg 區塊、裸 HTML 表格、
 * 舊的 <font>、YouTube 內嵌都有。樣式要能接住這些形態。
 * ---------------------------------------------------------------- */

.tz-kb-content {
	color: var(--tz-kb-ink-2);
	font-size: 17px;
	line-height: 1.95;
}

.tz-kb-content > *:first-child {
	margin-top: 0;
}

.tz-kb .tz-kb-content p {
	margin: 0 0 20px;
}

.tz-kb-content h2 {
	margin: 38px 0 14px;
	font-size: 21px;
	line-height: 1.6;
	scroll-margin-top: 24px;
}

.tz-kb-content h3 {
	margin: 30px 0 12px;
	font-size: 18px;
	line-height: 1.6;
	scroll-margin-top: 24px;
}

.tz-kb-content h4,
.tz-kb-content h5,
.tz-kb-content h6 {
	margin: 24px 0 10px;
	color: var(--tz-kb-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.tz-kb .tz-kb-content ul,
.tz-kb .tz-kb-content ol {
	margin: 0 0 20px;
	padding-left: 1.6em;
	list-style: revert;
}

.tz-kb-content li {
	margin-bottom: 8px;
}

.tz-kb-content strong,
.tz-kb-content b {
	color: var(--tz-kb-ink);
}

.tz-kb-content a {
	text-decoration: underline;
}

.tz-kb-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.tz-kb-content figure {
	margin: 0 0 20px;
}

.tz-kb-content figcaption {
	margin-top: 8px;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
	line-height: 1.8;
}

.tz-kb-content code {
	padding: 2px 6px;
	border: 1px solid var(--tz-kb-line);
	border-radius: 3px;
	background: var(--tz-kb-tint);
	color: var(--tz-kb-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
}

.tz-kb-content pre {
	margin: 0 0 20px;
	padding: 14px 18px;
	overflow-x: auto;
	background: var(--tz-kb-tint);
	border-left: 3px solid var(--tz-kb-rule);
	border-radius: 0 4px 4px 0;
	color: var(--tz-kb-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	line-height: 1.75;
}

.tz-kb-content pre code {
	padding: 0;
	border: 0;
	background: none;
}

.tz-kb-content blockquote {
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--tz-kb-tint);
	border-left: 3px solid var(--tz-kb-rule);
	border-radius: 0 4px 4px 0;
}

/* 表格 —— 顏色跟全站同一套（layout-fixes.css 的 B8）。
   原本這裡的格線是 --tz-kb-line（#e1e8ed）＝ 1.19:1 on #fafbfc，
   表頭底是 --tz-kb-tint（#f2f5f7）＝ 1.06:1，兩個都遠低於
   WCAG 1.4.11 對「傳達資訊的非文字元素」的 3:1 —— 業主 2026-09-06
   回報「太淺，辨識很差」就是這個。

   var() 的第二引數寫死同一個色碼，是為了 `?techez_fixes=0`
   （layout-fixes.css 不載入）時知識庫仍然是修好的狀態。
   對比值的計算與取捨寫在 layout-fixes.css 的 B8，不在這裡重複。

   ⚠️ 2026-09-09（A3）訂正。這一段原本寫的是：

       「知識庫既有文章的表格**全部沒有 <th>**（Elementor 時代留下的
        HTML，連 <thead> 都沒有），所以下面的表頭規則在現有 22 篇上
        不會生效，實際救回辨識度的是格線與外框。」

   **「全部」是錯的**，而且已經不成立了。實測 240 篇知識庫文章：含 <table>
   的 22 篇，其中完全沒有 <th> 的是 10 篇（不是 22 篇），A3 那一輪已經補了
   其中 8 篇的 <thead>，所以下面的表頭規則現在**真的在線上生效**。

   沒補的兩篇（16668 / 16667）是**拿 table 做左右並排版面**，第一列那兩格
   各裝一個 <h3>；套上表頭樣式反而會壞 —— `.tz-kb-content h3` 的計算後色是
   #192a3d（Blocksy 的標題色，不繼承 thead th 的白字），壓在表頭底 #55677a
   上只有 **2.51:1**。那是判斷後認定不該動，不是漏掉。

   ⚠️ 另一個當時沒想到的失效形狀：**有 <th> 卻沒有 <thead>**。
   下面的選擇器是 `.tz-kb-content thead th`，缺 <thead> 一樣吃不到
   （實測：有 th 無 thead → background 是 rgba(0,0,0,0)）。
   反過來，**隱含的 <tbody> 不影響** —— 選擇器路徑上根本沒有 tbody，
   顯式與隱含兩種寫法實測都命中。 */

.tz-kb-content table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 15px;
	border: 1px solid var(--tz-tbl-edge, #55677a);
}

.tz-kb-content th,
.tz-kb-content td {
	padding: 10px 12px;
	border: 1px solid var(--tz-tbl-line, #7a8da1);
	line-height: 1.8;
	text-align: left;
	vertical-align: top;
}

.tz-kb-content thead th,
.tz-kb-content thead td {
	background: var(--tz-tbl-head-bg, #55677a);
	color: var(--tz-tbl-head-ink, #ffffff);
	border-color: var(--tz-tbl-head-line, rgba(255, 255, 255, .62));
	border-bottom-color: var(--tz-tbl-edge, #55677a);
	font-weight: 700;
}

.tz-kb-content hr {
	margin: 30px 0;
	border: 0;
	border-top: 1px solid var(--tz-kb-line);
}

.tz-kb-content iframe {
	max-width: 100%;
}

/* --- 這篇有幫助嗎 ----------------------------------------------- */

.tz-kb-vote {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin: 34px 0 28px;
	padding: 18px 24px;
	background: var(--tz-kb-surface);
	border: 1px solid var(--tz-kb-line);
	border-radius: var(--tz-kb-radius);
	scroll-margin-top: 100px;
}

.tz-kb-vote__q {
	margin: 0;
	color: var(--tz-kb-ink);
	font-size: 16px;
	font-weight: 500;
}

.tz-kb-vote__buttons {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tz-kb-vote__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--tz-kb-control);
	border-radius: 4px;
	background: var(--tz-kb-surface);
	color: var(--tz-kb-ink-2);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
}

.tz-kb-vote__btn:hover {
	border-color: var(--tz-kb-link);
	color: var(--tz-kb-link);
}

.tz-kb-vote__btn svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

.tz-kb-vote__thanks {
	margin: 0;
	color: var(--tz-kb-ink-2);
	font-size: 15px;
}

.tz-kb-vote__thanks[hidden] {
	display: none;
}

/* 投票失敗 —— 跟「謝謝」共用 `.tz-kb-vote__thanks`（PHP 端故意的，
 * 為的是沿用上面那條 `[hidden]` 規則），所以這裡靠雙 class 的權重
 * （0,2,0 > 0,1,0）壓過它，不用 `!important`。
 *
 * ⚠️ 這裡**刻意不碰 `display`**。上面 `.tz-kb-vote__thanks[hidden]`
 *    也是 0,2,0，若在它之後再宣告一次 display，`hidden` 就會失效，
 *    「沒有送出成功」會每次載入都出現。要排版一律只動 flex 屬性。
 *
 * 不只用顏色傳達狀態（色盲可及性）：左側 4px 實心色條、警示三角圖示、
 * 加粗字重，三個非顏色線索。圖示走 background-image 而不是 content 文字，
 * 才不會被螢幕報讀器唸出來（這段本身已經有 role="alert"）。 */
.tz-kb-vote__thanks.tz-kb-vote__failed {
	position: relative;
	flex: 1 0 100%;
	padding: 12px 16px 12px 46px;
	border: 1px solid var(--tz-kb-bad-line);
	border-left: 4px solid var(--tz-kb-bad);
	border-radius: 4px;
	background: var(--tz-kb-bad-bg);
	color: var(--tz-kb-bad-ink);
	font-weight: 600;
	line-height: 1.7;
}

.tz-kb-vote__thanks.tz-kb-vote__failed::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 16px;
	width: 19px;
	height: 19px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23b3261e%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10.3%203.6%201.8%2018a2%202%200%200%200%201.7%203h16.4a2%202%200%200%200%201.7-3L13.7%203.6a2%202%200%200%200-3.4%200Z%22/%3E%3Cpath%20d=%22M12%209v4.2%22/%3E%3Cpath%20d=%22M12%2017.2h.01%22/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 側欄 ------------------------------------------------------- */

.tz-kb-article__sidesticky {
	position: sticky;
	top: 24px;
}

.tz-kb-card {
	padding: 20px 24px;
	margin-bottom: 20px;
	background: var(--tz-kb-surface);
	border: 1px solid var(--tz-kb-line);
	border-radius: var(--tz-kb-radius);
}

.tz-kb-card:last-child {
	margin-bottom: 0;
}

.tz-kb .tz-kb-card__title {
	margin: 0 0 12px;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.6;
}

.tz-kb-toc a {
	display: block;
	min-height: 44px;
	padding: 11px 0 11px 14px;
	border-left: 2px solid var(--tz-kb-line-soft);
	color: var(--tz-kb-ink-2);
	font-size: 15px;
	line-height: 1.6;
}

.tz-kb-toc a:hover,
.tz-kb-toc a.is-current {
	border-left-color: var(--tz-kb-link);
	color: var(--tz-kb-ink);
	font-weight: 500;
	text-decoration: none;
}

.tz-kb-related li + li a {
	border-top: 1px solid var(--tz-kb-line-soft);
}

.tz-kb-related a {
	display: block;
	min-height: 44px;
	padding: 11px 0;
	font-size: 15px;
	line-height: 1.7;
}

.tz-kb-catcard__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tz-kb-catcard__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 4px;
	background: var(--tz-kb-tint);
	color: var(--tz-kb-ink);
}

.tz-kb-catcard__icon svg {
	width: 19px;
	height: 19px;
}

.tz-kb-catcard__name {
	display: block;
	color: var(--tz-kb-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.tz-kb-catcard__count {
	display: block;
	color: var(--tz-kb-ink-3);
	font-size: 13px;
}

.tz-kb-catcard__link {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-top: 4px;
	font-size: 15px;
}

/* --- 手機底部固定列（桌機不顯示） ------------------------------- */

.tz-kb-mobilebar {
	display: none;
}

/* ==================================================================
 * 7. 響應式
 *
 * 三個驗收寬度：1600 / 1280 / 390。
 * 1280 仍是完整雙欄（1240 內寬 > 760+320+64）；
 * 1000 以下併成單欄；760 以下進手機版。
 * ================================================================== */

@media (max-width: 1200px) {

	.tz-kb-home__grid {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 40px;
	}

	.tz-kb-article__grid {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 40px;
	}

	.tz-kb-results__grid {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 36px;
	}
}

@media (max-width: 1000px) {

	.tz-kb-home__grid,
	.tz-kb-article__grid,
	.tz-kb-article__grid--solo,
	.tz-kb-results__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.tz-kb-article__sidesticky {
		position: static;
	}

	/* 單欄之後側欄卡片改成並排，不要一路往下拖 */
	.tz-kb-article__sidesticky {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 20px;
		align-items: start;
	}

	/*
	 * 併成單欄之後側欄會落在全文的**後面**，一份讀完才看得到的目錄
	 * 是純粹的雜訊（實測 16626 在 390 寬時目錄的 y=25884，全文早就結束了）。
	 * 設計稿的手機版本來也沒有畫目錄 —— 這裡照做，直接不輸出。
	 */
	.tz-kb-toc {
		display: none;
	}

	.tz-kb-card {
		margin-bottom: 0;
	}
}

/* ------------------------------------------------------------------
 * 併成單欄之後的左欄篩選器
 *
 * 實測 390 寬：垂直的篩選清單有 525px 高，使用者要往下捲過整整一頁
 * 才看得到第一筆結果（h1 落在 y=860）。
 *
 * 不用 CSS order 把結果搬到前面 —— 那會讓 Tab 順序與視覺順序不一致。
 * 改成橫向可捲的膠囊列：DOM 順序不動、可及性不動，高度從 525px 降到約 150px。
 * ------------------------------------------------------------------ */

@media (max-width: 1000px) {

	.tz-kb-rail {
		overflow: hidden;
	}

	.tz-kb .tz-kb-filter {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		margin-bottom: 0;
		-webkit-overflow-scrolling: touch;
	}

	.tz-kb-filter li {
		flex: 0 0 auto;
	}

	.tz-kb .tz-kb-filter__item {
		gap: 8px;
		padding: 0 16px;
		border: 1px solid var(--tz-kb-control);
		border-radius: 999px;
		background: var(--tz-kb-surface);
		white-space: nowrap;
	}

	.tz-kb .tz-kb-filter__item.is-active {
		border-color: var(--tz-kb-link);
		background: var(--tz-kb-tint-blue);
	}

	.tz-kb-filter__box {
		display: none;
	}

	.tz-kb-rail__group + .tz-kb-rail__group {
		margin-top: 18px;
	}
}

@media (max-width: 760px) {

	.tz-kb {
		--tz-kb-pad: 20px;
		font-size: 16px;
	}

	.tz-kb-hero {
		padding: 40px 0 34px;
	}

	.tz-kb-hero__title {
		font-size: 24px;
	}

	.tz-kb-hero__lead {
		margin-bottom: 24px;
		font-size: 15px;
	}

	.tz-kb-search--hero {
		height: auto;
		flex-wrap: wrap;
		padding-bottom: 0;
	}

	.tz-kb-search--hero .tz-kb-search__icon {
		padding: 0 4px 0 14px;
	}

	/* 三層 class：要贏過上面那條 `.tz-kb .tz-kb-search .tz-kb-search__input
	   { height:auto }`。手機上大搜尋框會換行，輸入列的高度失去撐持，
	   實測只有 32px，觸控目標不足 44。 */
	.tz-kb .tz-kb-search--hero .tz-kb-search__input {
		height: 52px;
		font-size: 16px;
	}

	.tz-kb-search--hero .tz-kb-search__btn {
		width: 100%;
		height: 48px;
		order: 3;
	}

	.tz-kb-home__grid {
		padding-top: 32px;
		gap: 36px;
	}

	.tz-kb-poplist__link {
		font-size: 16px;
	}

	.tz-kb-cat__sub {
		white-space: normal;
	}

	.tz-kb-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		padding: 22px 20px;
	}

	.tz-kb-cta__actions .tz-kb-btn {
		flex: 1;
	}

	.tz-kb-ask {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.tz-kb-results__grid {
		padding-top: 20px;
		padding-bottom: 40px;
	}

	.tz-kb-results__title {
		font-size: 19px;
	}

	.tz-kb-result__title {
		font-size: 17px;
	}

	/* --- 搜尋 0 筆：SearchEmptyMobile ---------------------------- */

	.tz-kb-results .tz-kb-results__grid--solo {
		padding-top: 28px;
		padding-bottom: 32px;
	}

	.tz-kb-results .tz-kb-results__head--empty .tz-kb-results__title {
		font-size: 20px;
		line-height: 1.55;
	}

	/* 設計稿手機版把「共 0 篇」放到標題底下自成一行，不是接在後面 */
	.tz-kb-results__head--empty .tz-kb-results__count {
		display: block;
		margin-top: 4px;
		margin-left: 0;
	}

	.tz-kb .tz-kb-empty__intro {
		margin-bottom: 20px;
	}

	.tz-kb-empty__card {
		padding: 20px 18px 22px;
	}

	.tz-kb .tz-kb-empty__lead {
		margin-bottom: 12px;
	}

	.tz-kb-empty__chips {
		gap: 8px;
		margin-bottom: 22px;
	}

	.tz-kb .tz-kb-empty__chips + .tz-kb-empty__lead {
		margin-bottom: 10px;
	}

	.tz-kb-empty__tick {
		width: 16px;
		height: 16px;
		margin-top: 5px;
	}

	.tz-kb .tz-kb-empty__browse {
		margin: 28px 0 12px;
		font-size: 17px;
	}

	.tz-kb-emptycats {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.tz-kb .tz-kb-emptycats .tz-kb-cat {
		min-height: 68px;
		padding: 12px 16px;
	}

	/* 兩個出口連結各自成一行；中間那個「｜」在直向排列時沒有意義 */
	.tz-kb-empty__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin-top: 8px;
	}

	.tz-kb-empty__sep {
		display: none;
	}

	.tz-kb-empty__cta {
		margin-top: 28px;
	}

	/* 手機上麵包屑收成一顆分類標籤，不佔兩行（Mobile.dc.html） */
	.tz-kb-crumbrow {
		gap: 10px;
	}

	.tz-kb-crumbs ol {
		flex-wrap: nowrap;
		gap: 0;
	}

	.tz-kb-crumbs li {
		display: none;
	}

	.tz-kb-crumbs li:nth-last-child(2),
	.tz-kb-crumbs li:only-child {
		display: flex;
		min-width: 0;
	}

	.tz-kb-crumbs li:nth-last-child(2)::before {
		content: "‹";
	}

	.tz-kb-crumbs li:nth-last-child(2) a,
	.tz-kb-crumbs li:only-child a {
		overflow: hidden;
		max-width: 62vw;
		padding: 0 14px 0 6px;
		border: 1px solid var(--tz-kb-control);
		border-radius: 999px;
		background: var(--tz-kb-surface);
		color: var(--tz-kb-ink-2);
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tz-kb .tz-kb-crumbrow__search span {
		display: none;
	}

	.tz-kb .tz-kb-crumbrow__search {
		justify-content: center;
		width: 44px;
		padding: 0;
	}

	.tz-kb-article__grid {
		padding-top: 20px;
		/* 底部固定列的高度，別壓住最後一段 */
		padding-bottom: 96px;
	}

	.tz-kb-article__title {
		font-size: 24px;
		line-height: 1.6;
	}

	/* 三欄詮釋資料在 390 會擠成三行破碎的字，改成標籤在左的清單 */
	.tz-kb-meta {
		display: block;
		margin-bottom: 26px;
		padding: 12px 0;
	}

	.tz-kb-meta__item {
		display: flex;
		align-items: baseline;
		gap: 12px;
		padding: 5px 0;
	}

	.tz-kb-meta__item + .tz-kb-meta__item {
		border-left: 0;
	}

	.tz-kb-meta__label {
		flex: 0 0 76px;
		margin: 0;
		font-size: 13px;
		letter-spacing: 0;
	}

	.tz-kb-content {
		font-size: 16px;
	}

	.tz-kb-content h2 {
		margin-top: 28px;
		font-size: 17px;
	}

	.tz-kb-content h3 {
		font-size: 16px;
	}

	.tz-kb-vote {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 18px;
	}

	.tz-kb-vote__buttons {
		gap: 10px;
	}

	.tz-kb-vote__btn {
		flex: 1;
		justify-content: center;
		min-height: 46px;
	}

	.tz-kb-vote__form {
		width: 100%;
	}

	/* 手機上「問人」是最後的出口，一直看得到 */
	.tz-kb-mobilebar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--tz-kb-surface);
		border-top: 1px solid var(--tz-kb-line);
	}

	.tz-kb .tz-kb-mobilebar__main {
		flex: 1;
		min-height: 48px;
		padding: 0 16px;
		font-size: 16px;
	}

	.tz-kb .tz-kb-mobilebar__call {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border: 1px solid var(--tz-kb-control);
		border-radius: 4px;
		color: var(--tz-kb-link);
	}

	.tz-kb .tz-kb-mobilebar__call svg {
		width: 21px;
		height: 21px;
	}
}

/* ------------------------------------------------------------------
 * 手機底部列與既有的浮動聯絡鈕會疊在一起 —— 把浮動鈕往上推。
 * 浮動鈕本體在 inc/floating-buttons.php / floating-buttons.css，
 * 這裡只在「知識庫文章頁 + 手機」這個交集調整它的位置，不改它的模組。
 * ------------------------------------------------------------------ */

@media (max-width: 760px) {

	.tz-kb-page--article .tz-fab {
		bottom: 84px;
	}
}