/* ================================================
   Inner Pages — 內頁共用樣式
   Version 1.0 / 2026-04-08
   適用：__template_01 / 02 / 03
   色彩體系：#0077B6（活力藍）+ #2B4590（沉穩藍）+ #C4933F（精緻金）
   ================================================ */


/* ── 1. Inner Page Banner（三版共用） ── */

.inner-banner {
	position: relative;
	background: linear-gradient(135deg, var(--np-brand) 0%, var(--np-text) 55%, var(--t-ink-deep) 100%);
	min-height: 200px;
	display: flex;
	align-items: center;
	overflow: hidden;
	/* padding-top 需容納固定定位 Navbar（80px）+ 視覺呼吸空間（40px）*/
	padding: 120px 0 56px;
}

/* 右上角幾何裝飾圓 */
.inner-banner::before {
	content: '';
	position: absolute;
	right: -60px;
	top: -60px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 2px solid rgba(var(--np-brand-rgb), 0.22);
	pointer-events: none;
}

/* 右下角填色裝飾圓 */
.inner-banner::after {
	content: '';
	position: absolute;
	right: 60px;
	bottom: -90px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(var(--np-brand-rgb), 0.07);
	pointer-events: none;
}

.inner-banner-content {
	position: relative;
	z-index: 2;
}

.inner-banner-label {
	font-family: 'Cormorant Garamond', serif;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(var(--np-text-rgb), 0.9);
	margin-bottom: 8px;
	display: block;
}

.inner-banner-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 18px;
	line-height: 1.3;
}

/* 麵包屑 */
.inner-breadcrumb ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.inner-breadcrumb ol li {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	display: flex;
	align-items: center;
}

.inner-breadcrumb ol li + li::before {
	content: '/';
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.35);
}

.inner-breadcrumb ol li a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* ⛔⭐ 2026-09-03:原本 hover 換成 `--np-text`(=#1657d6 深藍),而麵包屑坐在**深色 hero** 上
   ⇒ 深藍字壓深底,hover 一過去就幾乎看不見(修好 hover 探針的 @import 漏掃後才量到)。
   ⭐ 原則:**hover 不換色,只把同一個顏色的強度拉滿**(75% → 100%)。
     換色才需要判斷「新色在這個底上夠不夠亮」;同色滿強度則**不可能反轉對比**,
     而且在任何佈景、任何 hero 底下都成立 —— 這比逐一挑顏色穩健。 */
.inner-breadcrumb ol li a:hover {
	color: rgba(255, 255, 255, 1);
}

.inner-breadcrumb ol li:last-child {
	color: rgba(255, 255, 255, 0.85);
}


/* ── 2. 內頁主內容區（三版共用基礎） ── */

.inner-content-section {
	padding: 15px 0 15px;
	background: var(--t-paper);
}

/* 區段子標題（用於全寬版各區塊上方） */
.inner-section-heading {
	margin-bottom: 36px;
}

.inner-section-label {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--np-text);
	display: block;
	margin-bottom: 8px;
}

.inner-section-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: var(--np-text);
	margin: 0 0 12px;
	line-height: 1.35;
}

.inner-section-gold-line {
	width: 36px;
	height: 3px;
	background: var(--np-brand);
	border-radius: 2px;
	margin-bottom: 14px;
}

.inner-section-desc {
	font-size: 15px;
	color: #6B7280;
	line-height: 1.85;
	margin: 0;
}


/* ── 3. Template 01：側欄式（最新消息、公證知識） ── */

/* 文章卡片 */
.article-card {
	background: #ffffff;
	border: 1px solid #E5E2DC;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb), 0.07);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	margin-bottom: 28px;
	display: flex;
	flex-direction: column;
}

.article-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(var(--np-brand-rgb), 0.13);
}

.article-card-thumb {
	width: 100%;
	height: 350px;
	object-fit: cover;
	display: block;
}

.article-card-thumb-placeholder {
	width: 100%;
	height: 350px;
	background: linear-gradient(135deg, rgba(var(--np-brand-rgb),0.08) 0%, rgba(var(--np-brand-rgb),0.12) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.article-card-thumb-placeholder svg {
	stroke: rgba(var(--np-brand-rgb),0.3);
}

/* ⭐ 2026-09-03(棒86 批次3):**檔案不存在**時要長得跟「DB 沒設圖」一樣,不能整塊塌掉。
   出身:本站對「沒有圖」本來就有設計 —— `.article-card-thumb-placeholder`(350px 品牌漸層 + 淡圖示)。
   但那條只服務「DB 欄位是空的」;**DB 有值、檔案 404** 走的是 `nx-media` 缺圖護欄,
   而 `.article-card-thumb-link` 自己沒有高度(高度在 `<img>` 上)⇒ 圖一藏,整塊縮成 0。
   ⇒ 補回同樣的 350px 與同一組漸層,讓兩條「沒有圖」的路徑在畫面上長得一樣。 */
.article-card-thumb-link.is-missing {
	height: 350px;
	background: linear-gradient(135deg, rgba(var(--np-brand-rgb),0.08) 0%, rgba(var(--np-brand-rgb),0.12) 100%);
}

.article-card-body {
	padding: 22px 26px 26px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.article-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.article-card-author {
	margin-left: auto;
	font-size: 12px;
	color: #6B7280;
	line-height: 1;
}

.article-card-category {
	font-size: 11px;
	font-weight: 600;
	color: #ffffff;
	background: var(--np-brand);
	padding: 3px 10px;
	border-radius: 20px;
	letter-spacing: 0.04em;
}

.article-card-date {
	font-size: 12px;
	color: #6B7280;
}

.article-card-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #1E1E2E;
	margin: 0 0 10px;
	line-height: 1.55;
	transition: color 0.2s;
	text-decoration: none;
	display: block;
}

.article-card:hover .article-card-title {
	color: var(--np-text);
}

/* 卡片標題升為 h2 後，內層連結沿用標題樣式（顏色/底線交由 .article-card-title 控制） */
.article-card-title a {
	color: inherit;
	text-decoration: none;
	display: block;
}

/* 專欄主列表主題導言（首頁未篩選時顯示） */
.docs-intro {
	background: #FFFFFF;
	border-left: 3px solid var(--np-brand);
	border-radius: 8px;
	padding: 20px 24px;
	margin: 0 0 24px;
}

.docs-intro p {
	margin: 0;
	font-size: 15px;
	line-height: 1.95;
	color: #4B5563;
}

.article-card-excerpt {
	font-size: 14px;
	color: #6B7280;
	line-height: 1.85;
	flex: 1;
}

.article-card-footer {
	margin-top: 18px;
	display: flex;
	justify-content: flex-end;
}

.article-read-more {
	font-size: 13px;
	font-weight: 600;
	color: var(--np-text);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: gap 0.2s ease, color 0.2s ease;
}

.article-read-more:hover {
	color: var(--np-text);
	gap: 8px;
}

/* 分頁 */
.inner-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 40px;
}

.inner-pagination .page-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #E5E2DC;
	border-radius: 8px;
	font-size: 14px;
	color: #1E1E2E;
	text-decoration: none;
	background: #ffffff;
	transition: all 0.2s ease;
}

.inner-pagination .page-btn:hover,
.inner-pagination .page-btn.active {
	background: var(--np-brand);
	border-color: var(--np-brand);
	color: #ffffff;
}

.inner-pagination .page-btn.disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* 側欄 */
.inner-sidebar {
	position: sticky;
	top: 100px;
}

.sidebar-widget {
	background: #ffffff;
	border: 1px solid #E5E2DC;
	border-radius: 12px;
	padding: 22px;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb), 0.07);
	margin-bottom: 22px;
}

.sidebar-widget-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--np-text);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--np-brand);
}

/* 搜尋 */
.sidebar-search-form {
	display: flex;
}

.sidebar-search-input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid #E5E2DC;
	border-right: none;
	border-radius: 8px 0 0 8px;
	font-size: 14px;
	font-family: 'Noto Sans TC', sans-serif;
	outline: none;
	transition: border-color 0.2s;
	background: var(--t-paper);
}

.sidebar-search-input:focus {
	border-color: var(--np-brand);
	background: #ffffff;
}

.sidebar-search-btn {
	padding: 10px 16px;
	background: var(--np-brand);
	border: 1px solid var(--np-brand);
	border-radius: 0 8px 8px 0;
	color: #ffffff;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
}

.sidebar-search-btn:hover {
	background: var(--np-brand);
}

/* 分類列表 */
.sidebar-cat-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-cat-list li {
	border-bottom: 1px solid var(--t-paper);
}

.sidebar-cat-list li:last-child {
	border-bottom: none;
}

.sidebar-cat-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	font-size: 14px;
	color: #1E1E2E;
	text-decoration: none;
	transition: color 0.2s;
}

.sidebar-cat-list li a:hover {
	color: var(--np-text);
}

.sidebar-cat-count {
	font-size: 11px;
	color: #ffffff;
	background: var(--np-brand);
	padding: 2px 8px;
	border-radius: 20px;
	min-width: 22px;
	text-align: center;
}

/* 近期文章 */
.sidebar-recent-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-recent-item {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--t-paper);
}

.sidebar-recent-item:last-child {
	border-bottom: none;
}

.sidebar-recent-thumb {
	width: 54px;
	height: 54px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: rgba(var(--np-brand-rgb),0.08);
}

.sidebar-recent-info {
	flex: 1;
	min-width: 0;
}

.sidebar-recent-info a {
	font-size: 13px;
	font-weight: 600;
	color: #1E1E2E;
	text-decoration: none;
	line-height: 1.5;
	display: block;
	margin-bottom: 4px;
	transition: color 0.2s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-recent-info a:hover {
	color: var(--np-text);
}

.sidebar-recent-date {
	font-size: 12px;
	color: #6B7280;
}

/* 標籤雲 */
.sidebar-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.sidebar-tag {
	font-size: 13px;
	color: #1E1E2E;
	background: var(--t-paper);
	padding: 5px 12px;
	border-radius: 20px;
	border: 1px solid #E5E2DC;
	text-decoration: none;
	transition: all 0.2s ease;
}

.sidebar-tag:hover {
	background: var(--np-brand);
	color: #ffffff;
	border-color: var(--np-brand);
}


/* ── 4. Template 02：全寬 Tab + Accordion ── */

/* Tab 導覽 */
.inner-tab-nav {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #E5E2DC;
	margin-bottom: 40px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.inner-tab-nav::-webkit-scrollbar {
	display: none;
}

.inner-tab-btn {
	padding: 14px 28px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #6B7280;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
	white-space: nowrap;
}

.inner-tab-btn:hover {
	color: var(--np-text);
}

.inner-tab-btn.active {
	color: var(--np-text);
	border-bottom-color: var(--np-brand);
}

.inner-tab-panel {
	display: none;
}

.inner-tab-panel.active {
	display: block;
}

/* Accordion */
.inner-accordion-item {
	background: #ffffff;
	border: 1px solid #E5E2DC;
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(var(--np-brand-rgb), 0.05);
	transition: border-color 0.2s;
}

.inner-accordion-item.open {
	border-color: rgba(var(--np-brand-rgb), 0.3);
}

.inner-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	cursor: pointer;
	transition: background 0.2s;
	user-select: none;
}

.inner-accordion-header:hover {
	background: var(--t-paper);
}

.inner-accordion-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #1E1E2E;
	display: flex;
	align-items: center;
	gap: 12px;
}

.acc-icon {
	width: 34px;
	height: 34px;
	background: rgba(var(--np-brand-rgb), 0.09);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s;
}

.acc-icon svg {
	stroke: var(--np-brand);
	width: 18px;
	height: 18px;
}

.inner-accordion-item.open .acc-icon {
	background: var(--np-brand);
}

.inner-accordion-item.open .acc-icon svg {
	stroke: #ffffff;
}

.inner-accordion-toggle {
	width: 30px;
	height: 30px;
	background: var(--t-paper);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s;
}

.inner-accordion-toggle svg {
	stroke: #6B7280;
	width: 16px;
	height: 16px;
	transition: transform 0.3s ease, stroke 0.2s;
}

.inner-accordion-item.open .inner-accordion-toggle {
	background: var(--np-brand);
}

.inner-accordion-item.open .inner-accordion-toggle svg {
	stroke: #ffffff;
	transform: rotate(45deg);
}

.inner-accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease-out;
}

.inner-accordion-item.open .inner-accordion-body {
	max-height: 2000px;
}

.inner-accordion-content {
	padding: 4px 22px 22px 22px;
	border-top: 1px solid var(--t-paper);
}

/* Checklist（文件清單） */
.inner-checklist {
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
}

.inner-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 0;
	font-size: 14px;
	color: #1E1E2E;
	line-height: 1.75;
	border-bottom: 1px solid var(--t-paper);
}

.inner-checklist li:last-child {
	border-bottom: none;
}

.checklist-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--np-brand);
	flex-shrink: 0;
	margin-top: 7px;
}

/* 注意事項色塊 */
.inner-note-block {
	background: rgba(var(--np-brand-rgb), 0.07);
	border-left: 4px solid var(--np-brand);
	border-radius: 0 10px 10px 0;
	padding: 14px 18px;
	margin-top: 18px;
}

.inner-note-block p {
	font-size: 14px;
	color: #1E1E2E;
	margin: 0;
	line-height: 1.85;
}

/* 費用表格 */
.inner-fee-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.inner-fee-table th {
	background: var(--np-brand);
	color: #ffffff;
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	font-family: 'Noto Sans TC', sans-serif;
}

.inner-fee-table th:first-child { border-radius: 8px 0 0 0; }
.inner-fee-table th:last-child  { border-radius: 0 8px 0 0; }

.inner-fee-table td {
	padding: 11px 16px;
	border-bottom: 1px solid #E5E2DC;
	color: #1E1E2E;
	vertical-align: middle;
}

.inner-fee-table tr:last-child td {
	border-bottom: none;
}

.inner-fee-table tr:nth-child(even) td {
	background: var(--t-paper);
}

.inner-fee-table-wrap {
	background: #ffffff;
	border: 1px solid #E5E2DC;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(var(--np-brand-rgb),0.05);
	margin-bottom: 24px;
}


/* ── 5. Template 03：置中簡潔 ── */

.inner-content-centered {
	max-width: 800px;
	margin: 0 auto;
}

/* 聯絡資訊卡片 */
.contact-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
	margin-bottom: 50px;
}

.contact-info-card {
	background: #ffffff;
	border: 1px solid #E5E2DC;
	border-radius: 12px;
	padding: 28px 22px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb), 0.07);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s;
}

.contact-info-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(var(--np-brand-rgb), 0.13);
	border-color: rgba(var(--np-brand-rgb), 0.3);
}

.contact-info-icon {
	width: 56px;
	height: 56px;
	background: rgba(var(--np-brand-rgb), 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
}

.contact-info-icon svg {
	stroke: var(--np-brand);
	width: 22px;
	height: 22px;
}

.contact-info-label {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #6B7280;
	margin-bottom: 6px;
	font-weight: 400;
	text-transform: uppercase;
}

.contact-info-value {
	font-size: 15px;
	font-weight: 700;
	color: #1E1E2E;
	line-height: 1.55;
	text-decoration: none;
	display: block;
}

a.contact-info-value:hover {
	color: var(--np-text);
}

/* 下載清單 */
.download-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.download-item {
	background: #ffffff;
	border: 1px solid #E5E2DC;
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-shadow: 0 2px 12px rgba(var(--np-brand-rgb), 0.05);
	transition: transform 0.2s ease, border-color 0.2s;
}

.download-item:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--np-brand-rgb), 0.35);
}

.download-item-info {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
}

.download-item-icon {
	width: 44px;
	height: 44px;
	background: rgba(var(--np-brand-rgb), 0.09);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.download-item-icon svg {
	stroke: var(--np-brand);
	width: 20px;
	height: 20px;
}

.download-item-name {
	font-size: 15px;
	font-weight: 600;
	color: #1E1E2E;
	margin-bottom: 2px;
}

.download-item-desc {
	font-size: 13px;
	color: #6B7280;
}

.btn-download {
	padding: 9px 20px;
	background: var(--np-brand);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s ease;
	white-space: nowrap;
	cursor: pointer;
}

.btn-download:hover {
	background: var(--np-brand);
	color: #ffffff;
}


/* ── 6. RWD ── */

@media (max-width: 991px) {
	.inner-banner { min-height: 200px; padding: 120px 0 56px; }
	.inner-banner-title { font-size: 36px; }
	.inner-content-section { padding: 70px 0 90px; }
	.inner-sidebar { position: sticky; top: 100px; }
	.inner-tab-btn { padding: 14px 28px; font-size: 15px; }
	.inner-section-title { font-size: 26px; }
}

@media (max-width: 767px) {
	.inner-banner { min-height: 165px; padding: 88px 0 36px; }
	.inner-banner-title { font-size: 22px; margin-bottom: 12px; }
	.inner-banner::before { width: 180px; height: 180px; right: -40px; }
	.inner-content-section { padding: 40px 0 60px; }
	.article-card-thumb,
	.article-card-thumb-placeholder { height: 160px; }
	.contact-info-grid { grid-template-columns: 1fr; gap: 12px; }
	.download-item { flex-direction: column; align-items: flex-start; }
	.download-item .btn-download { width: 100%; justify-content: center; }
	.inner-tab-btn { padding: 10px 14px; font-size: 13px; }
	.inner-section-title { font-size: 20px; }
}


/* ================================================================
   最新消息（news.php / news-detail.php）專屬樣式
   Version 1.0 / 2026-04-08
   ================================================================ */

/* ── 篩選條件提示列 ── */
.news-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}
.news-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(var(--np-brand-rgb),0.08);
	border: 1px solid rgba(var(--np-brand-rgb),0.25);
	color: var(--np-text);
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 13px;
}
.news-filter-remove {
	color: var(--np-text);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	font-weight: 700;
	transition: color 0.2s;
}
.news-filter-remove:hover { color: #C493333F; }

/* ── 空結果區塊 ── */
.news-empty {
	text-align: center;
	padding: 60px 20px;
	color: #6B7280;
}
.news-empty svg {
	display: block;
	margin: 0 auto 16px;
	stroke: #D1D5DB;
}
.news-empty p { margin-bottom: 20px; font-size: 15px; }

/* ── 分頁總筆數 ── */
.pagination-summary {
	text-align: center;
	color: #9CA3AF;
	font-size: 13px;
	margin-top: 12px;
}

/* ── 側欄 active 狀態 ── */
.sidebar-cat-list a.active,
.sidebar-tag.active {
	color: var(--np-text);
	font-weight: 700;
}
.sidebar-recent-item.current .sidebar-recent-info a {
	color: var(--np-text);
	font-weight: 600;
}

/* ── 通用按鈕（列表頁）── */
.btn-inner-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--np-brand);
	color: #fff;
	border-radius: 8px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, transform 0.2s;
	border: none;
}
.btn-inner-primary:hover {
	background: #b07836;
	color: #fff;
	transform: translateY(-2px);
}
.btn-inner-outline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	color: var(--np-text);
	border: 1.5px solid var(--np-brand);
	border-radius: 8px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn-inner-outline:hover {
	background: var(--np-brand);
	color: #fff;
	transform: translateY(-2px);
}


/* ================================================================
   news-detail.php — 文章詳細頁
   ================================================================ */

/* ── 文章 Hero 圖 ── */
.news-article-hero {
	margin-bottom: 28px;
	border-radius: 12px;
	overflow: hidden;
}
.news-article-hero-img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	display: block;
}

/* ── 文章 Header ── */
.news-article-header { margin-bottom: 24px; }

.news-article-meta-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.news-article-category {
	display: inline-block;
	background: rgba(var(--np-brand-rgb),0.10);
	color: var(--np-text);
	border-radius: 20px;
	padding: 3px 12px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s;
}
.news-article-category:hover { background: rgba(var(--np-brand-rgb),0.20); color: var(--np-text); }
.news-article-date,
.news-article-author {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #6B7280;
}
.news-article-title {
	font-family: var(--font-body);
	font-size: 26px;
	font-weight: 700;
	color: #1E1E2E;
	line-height: 1.45;
	margin: 0 0 20px;
}

/* ── 社群分享 ── */
.news-article-share {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	border-top: 1px solid #E5E2DC;
	border-bottom: 1px solid #E5E2DC;
	margin-bottom: 24px;
}

/* ── 文章摘要 ── */
.news-article-summary {
	background: var(--t-paper);
	border-left: 4px solid var(--np-brand);
	border-radius: 0 8px 8px 0;
	padding: 16px 20px;
	margin-bottom: 28px;
	font-size: 15px;
	color: #374151;
	line-height: 1.8;
}

/* ── 文章主體（RichText 排版）── */
.news-article-body {
	font-size: 16px;
	line-height: 1.9;
	color: #1E1E2E;
	margin-bottom: 32px;
}
/* ⭐⭐ 2026-09-03(棒虶86):內文標題級距 —— 業主現場指出「小節標題的字級應該介於文章標題和內文之間」。
   實測確認他是對的,而且問題比看起來嚴重 —— **階層是倒的**:
     文章標題 `.news-article-title` = **26px**,而內文 `h3` = **30px**(比標題還大)、`h2` = **50px**。
   根因:母版 `master.css` 用**裸元素選擇器**訂了一整套排版預設(h2 50 / h3 30 / p 15…),
     而此處原本只定了顏色與間距、**沒有定字級** ⇒ 完全吺到母版那套。
   ⇒ 訂出完整級距(不只治 h3):文章標題 26 → h2 22 → h3 19 → h4 17 → 內文 16。
   ⚠️ 只治 h3 不夠 —— 下一篇若用 h2 就是 50px,比現在還壞。 */
.news-article-body h2,
.news-article-body h3,
.news-article-body h4 { color: var(--np-text); margin: 28px 0 14px; }
.news-article-body h2 { font-size: 22px; line-height: 1.5; }
.news-article-body h3 { font-size: 19px; line-height: 1.55; }
.news-article-body h4 { font-size: 17px; line-height: 1.6; }
/* ⭐ 順手治一個同根的不一致:容器是 16px,`li` 繼承得到 16,
   但 `master.css` 的裸 `p{font-size:15px}` 會**蓋掉繼承** ⇒ 同一篇文章裡
   段落 15px、清單 16px。兩者角色相同卻不同大小是明確的錯。
   用 `inherit` 而不寫死 16px:手機版 `@media` 把容器改 15px 時,段落會自己跟著變。 */
.news-article-body p { font-size: inherit; }
.news-article-body img { max-width: 100%; height: auto; border-radius: 8px; }
.news-article-body a   { color: var(--np-text); text-decoration: underline; }
.news-article-body ul,
.news-article-body ol  { padding-left: 24px; margin: 14px 0; }
.news-article-body li  { margin-bottom: 6px; }
.news-article-body blockquote {
	border-left: 4px solid var(--np-brand);
	margin: 20px 0;
	padding: 12px 20px;
	background: var(--t-paper);
	border-radius: 0 8px 8px 0;
	color: #374151;
	font-style: italic;
}

/* ── 附件下載 ── */
.news-article-attachment {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #F0F7FF;
	border: 1px solid #BFDBFE;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #1E40AF;
}
.news-attachment-link {
	color: var(--np-text);
	font-weight: 600;
	text-decoration: underline;
	word-break: break-all;
}
.news-attachment-link:hover { color: #C493333F; }

/* ── 標籤 ── */
.news-article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
	padding-top: 20px;
	border-top: 1px solid #E5E2DC;
}
.news-article-tag {
	display: inline-block;
	background: #F3F4F6;
	color: #374151;
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.news-article-tag:hover { background: var(--np-brand); color: #fff; }

/* ── 文章底部導覽區（上下篇 + 返回）── */
.news-article-footer-nav {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 2px solid #E5E2DC;
}

/* 上下篇並排 */
.news-article-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 20px;
}
.news-nav-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #fff;
	border-radius: 12px;
	padding: 18px 20px;
	text-decoration: none;
	border: 1.5px solid #E5E2DC;
	transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
	min-height: 90px;   /* 讓兩卡片高度對齊 */
}
.news-nav-item:hover {
	border-color: var(--np-brand);
	box-shadow: 0 4px 16px rgba(var(--np-brand-rgb),0.12);
	transform: translateY(-3px);
}
.news-nav-next { text-align: right; }
.news-nav-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	/* ⛔ 2026-09-03:原 #9CA3AF 在白底實量 **2.54**,11px 未過 AA(需 4.5)。
	   改用本檔既有的 muted 灰 #6B7280(白底 4.83),不新增色票。 */
	color: #6B7280;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.news-nav-title {
	font-size: 14px;
	color: #374151;
	font-weight: 600;
	line-height: 1.5;
}
.news-nav-item:hover .news-nav-label { color: var(--np-text); }
.news-nav-item:hover .news-nav-title  { color: #1E1E2E; }

/* 空佔位卡片（無上一篇或無下一篇時，維持兩欄對稱）*/
.news-nav-empty {
	background: transparent;
	border-color: transparent;
	pointer-events: none;
	box-shadow: none;
}
.news-nav-empty:hover {
	transform: none;
	border-color: transparent;
	box-shadow: none;
}

/* 返回按鈕：與上下篇同層，置中分隔 */
.news-back-btn-wrap {
	display: flex;
	justify-content: center;
	padding: 4px 0 8px;
}

/* ── RWD ── */
/* ⛔⭐ 2026-09-03 Codex 覆核 B4:原本這裡**只縮了文章標題,沒縮內文標題**
   ⇒ 桌機好不容易修好的階層,在窄斷點又壞掉:
     ≤991 標題 22 == h2 22(打平,看不出誰是誰)、≤767 標題 20 < h2 22(**又倒回去**)。
   ⭐ 教訓:字級階層是**一整條級距**,不是單一數字 —— 在任何斷點改其中一階,
     整條都要跟著等比縮,否則就是在別的寬度重新製造同一個病。
     (這正是「驗收只涵蓋你真的跑過的那組條件」:桌機驗過了,窄寬沒驗。)
   級距(嚴格遞減,每階至少差 1px 且標題永遠最大):
     桌機  26 / 22 / 19 / 17 / 16
     ≤991  24 / 21 / 19 / 17 / 16
     ≤767  22 / 19 / 17 / 16 / 15 */
@media (max-width: 991px) {
	.news-article-title { font-size: 24px; }
	.news-article-body h2 { font-size: 21px; }
	.news-article-body h3 { font-size: 19px; }
	.news-article-body h4 { font-size: 17px; }
	.news-article-hero-img { height: 260px; }
	.news-article-nav { grid-template-columns: 1fr; }
	.news-nav-next { text-align: left; }
}
@media (max-width: 767px) {
	.news-article-hero-img { height: 200px; }
	.news-article-title { font-size: 22px; }
	.news-article-body { font-size: 15px; }
	.news-article-body h2 { font-size: 19px; }
	.news-article-body h3 { font-size: 17px; }
	.news-article-body h4 { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════
   DOCS（公證知識）補充樣式
   ─ 主結構複用 .news-article-*，此處僅擴充 docs 獨有元件
   ════════════════════════════════════════════════════════════════ */

/* 附件下載 */
.news-article-attachment {
	margin-top: 32px;
	padding: 20px 24px;
	background: #F0F4F8;
	border-radius: 10px;
	border: 1px solid var(--color-border, #E2E8F0);
}
.attachment-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0 0 12px;
}
.attachment-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	border-radius: 8px;
	background: var(--color-primary, var(--np-brand));
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, box-shadow 0.2s;
}
.attachment-link:hover {
	background: var(--color-gold, var(--np-brand));
	box-shadow: 0 4px 12px rgba(var(--np-brand-rgb),0.25);
}

/* 社群分享 */
.news-article-share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.share-label {
	font-size: 13px;
	color: var(--color-text-muted, #64748B);
	font-weight: 600;
}
.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #F1F5F9;
	transition: background 0.2s, transform 0.2s;
	text-decoration: none;
}
.share-btn:hover { transform: translateY(-2px); background: #E2E8F0; }

/* 篩選條件提示列（docs 列表頁復用 .news-filter-bar） */
/* .news-filter-bar 與 .news-filter-tag 已定義於 news 區段，無需重複 */

/* 空白 no-results 狀態（docs 列表頁）── .news-empty 已存在 */

/* RWD */
@media (max-width: 767px) {
	.news-article-attachment { padding: 16px; }
	.comment-item { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════
   cac.php ── 租約公證費試算
   ═══════════════════════════════════════════════════════ */

/* Banner 右側裝飾：房屋浮水印 icon（此頁獨有） */
.cac-banner .container { position: relative; }
.cac-banner-deco {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: 150px;
	height: 150px;
	color: rgba(255, 255, 255, 0.12);
	pointer-events: none;
	display: inline-flex;
}
.cac-banner-deco svg { width: 100%; height: 100%; }
@media (max-width: 767px) {
	.cac-banner-deco { width: 96px; height: 96px; right: 16px; opacity: 0.7; }
}


/* ── 試算工作區（左側步驟 + 右側計算機卡） ── */
.cac-workspace-section {
	padding: 20px 0 70px;
	background: var(--color-bg-alt, var(--t-paper));
}
.cac-workspace-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px;
	align-items: start;
}

/* 左側步驟欄（桌機 sticky） */
.cac-steps-col {
	position: sticky;
	top: 110px;
}
/* 左欄標題區：漸層卡片 + 金色立柱 + 半透明大數字 */
.cac-steps-head {
	position: relative;
	padding: 22px 22px 22px 28px;
	margin-bottom: 18px;
	background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.04), rgba(var(--np-brand-rgb), 0.03));
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 12px;
	overflow: hidden;
}
.cac-steps-head::before {
	content: '';
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 18px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--color-accent, var(--np-brand));
}
.cac-steps-head::after {
	content: '5';
	position: absolute;
	right: 14px;
	bottom: -10px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 82px;
	font-weight: 600;
	color: rgba(var(--np-text-rgb), 0.12);
	line-height: 1;
	pointer-events: none;
}
.cac-steps-en {
	display: inline-block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-accent, var(--np-text));
	text-transform: uppercase;
	letter-spacing: 0.22em;
	margin-bottom: 6px;
	position: relative;
	z-index: 1;
}
.cac-steps-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0 0 10px;
	line-height: 1.3;
	position: relative;
	z-index: 1;
}
.cac-steps-goldline {
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-accent, var(--np-brand));
	position: relative;
	z-index: 1;
}

/* 左欄步驟列表 + 虛線金色連接線 */
.cac-steps-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}
.cac-steps-list::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 36px;
	bottom: 36px;
	width: 1px;
	background: repeating-linear-gradient(to bottom, rgba(var(--np-brand-rgb), 0.45) 0, rgba(var(--np-brand-rgb), 0.45) 4px, transparent 4px, transparent 10px);
	pointer-events: none;
	z-index: 0;
}
.cac-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 10px;
	z-index: 1;
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.cac-step:hover {
	border-color: var(--color-accent, var(--np-brand));
	box-shadow: 0 6px 20px rgba(var(--np-brand-rgb), 0.08);
	transform: translateX(4px);
}
.cac-step--highlight {
	border-color: rgba(var(--np-brand-rgb), 0.45);
	background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.06), rgba(var(--np-brand-rgb), 0.02));
}
.cac-step-num {
	flex-shrink: 0;
	width: 30px;
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-size: 26px;
	font-weight: 600;
	color: var(--color-accent, var(--np-text));
	line-height: 1;
}
.cac-step-body { min-width: 0; }
.cac-step-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0 0 4px;
	line-height: 1.3;
}
.cac-step-desc {
	font-size: 12.5px;
	color: var(--color-text-muted, #6B7280);
	line-height: 1.55;
	margin: 0;
}

/* 試算機主卡（右欄） */
.cac-calc-wrap {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(var(--np-brand-rgb), 0.08);
	overflow: hidden;
	position: relative;
}
.cac-calc-wrap::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--np-brand) 30%, var(--np-brand) 70%, transparent);
}

/* 主卡標題列（icon 徽章 + 標題 + ribbon） */
.cac-calc-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 24px 32px;
	background: linear-gradient(135deg, #FFFFFF 0%, #FBF8F1 100%);
	border-bottom: 1px solid var(--color-border, #E5E2DC);
	color: var(--color-text, #1E1E2E);
}
.cac-calc-header::after {
	content: '';
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(var(--np-brand-rgb), 0.55) 25%, rgba(var(--np-brand-rgb), 0.55) 75%, transparent);
}
.cac-calc-title {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0;
	flex: 1;
	min-width: 0;
}
.cac-calc-title svg {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 10px;
	box-sizing: content-box;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.18), rgba(var(--np-brand-rgb), 0.06));
	color: var(--color-accent, var(--np-text));
}
.cac-calc-title > span { line-height: 1.2; }
.cac-calc-ribbon {
	flex-shrink: 0;
	display: inline-block;
	padding: 6px 14px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-accent, var(--np-text));
	text-transform: uppercase;
	letter-spacing: 0.22em;
	border: 1px solid rgba(var(--np-brand-rgb), 0.4);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* 主卡 body */
.cac-calc-body {
	padding: 28px 32px;
}

/* 單一欄位列 */
.cac-form-row { margin-bottom: 20px; }
.cac-form-row--auto .cac-dx-box .dx-texteditor { background: #FBF8F1 !important; }

.cac-form-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #1E1E2E);
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.cac-label-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(var(--np-brand-rgb), 0.12);
	color: var(--color-accent, var(--np-text));
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}
.cac-label-num--auto {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
}
.cac-form-unit {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--color-text-muted, #6B7280);
	background: var(--color-bg-alt, var(--t-paper));
	border-radius: 4px;
	padding: 2px 7px;
}
.cac-form-badge {
	font-size: 11px;
	font-weight: 600;
	color: var(--color-accent, var(--np-text));
	background: rgba(var(--np-brand-rgb), 0.1);
	border-radius: 12px;
	padding: 2px 10px;
}
.cac-form-hint {
	font-size: 12px;
	color: var(--color-text-muted, #6B7280);
	margin: 6px 0 0;
	padding-left: 30px;
}

/* DevExtreme NumberBox 覆寫 */
.cac-dx-box .dx-texteditor {
	border-radius: 8px !important;
	border-color: var(--color-border, #E5E2DC) !important;
}
.cac-dx-box .dx-texteditor:hover,
.cac-dx-box .dx-texteditor.dx-state-focused {
	border-color: var(--color-accent, var(--np-brand)) !important;
	box-shadow: 0 0 0 3px rgba(var(--np-brand-rgb), 0.12) !important;
}

/* 分隔線 */
.cac-form-divider {
	border: none;
	border-top: 1px dashed var(--color-border, #E5E2DC);
	margin: 24px 0;
}

/* 結果區（金框 + 大數字） */
.cac-result-row {
	position: relative;
	margin-top: 16px;
	padding: 22px 24px 16px;
	background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.08), rgba(var(--np-brand-rgb), 0.02));
	border: 1px solid rgba(var(--np-brand-rgb), 0.4);
	border-radius: 12px;
}
.cac-result-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
}
.cac-result-en {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-accent, var(--np-text));
	text-transform: uppercase;
	letter-spacing: 0.15em;
}
.cac-result-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
}
.cac-result-label svg { color: var(--color-accent, var(--np-text)); flex-shrink: 0; }

.cac-dx-box--result .dx-texteditor {
	background: #fff !important;
	border-radius: 8px !important;
	border-color: rgba(var(--np-brand-rgb), 0.35) !important;
}
.cac-dx-box--result .dx-texteditor-input {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--color-primary, var(--np-text)) !important;
	letter-spacing: 0.02em;
}
.cac-result-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--color-text-muted, #6B7280);
	margin: 8px 0 0;
}
.cac-result-note svg { color: var(--color-accent, var(--np-text)); flex-shrink: 0; }

/* 重新試算 */
.cac-reset-wrap { text-align: center; margin-top: 20px; }
.btn-cac-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 20px;
	padding: 9px 22px;
	font-size: 13px;
	color: var(--color-text-muted, #6B7280);
	cursor: pointer;
	transition: all 0.2s;
}
.btn-cac-reset:hover {
	border-color: var(--color-accent, var(--np-brand));
	color: var(--color-accent, var(--np-text));
	background: rgba(var(--np-brand-rgb), 0.05);
}

/* ── 費率說明表 ── */
.cac-table-section { padding: 20px 0 70px; }

.cac-table-head {
	text-align: center;
	margin-bottom: 28px;
}
.cac-table-en {
	display: inline-block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-accent, var(--np-text));
	text-transform: uppercase;
	letter-spacing: 0.22em;
	margin-bottom: 8px;
}
.cac-table-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0 0 12px;
	line-height: 1.3;
}
.cac-table-goldline {
	width: 44px;
	height: 3px;
	margin: 0 auto 14px;
	border-radius: 2px;
	background: var(--color-accent, var(--np-brand));
}
.cac-table-desc {
	font-size: 14.5px;
	color: var(--color-text-muted, #6B7280);
	margin: 0;
}
.cac-table-card {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 8px 28px rgba(var(--np-brand-rgb), 0.06);
	overflow: hidden;
	position: relative;
}
.cac-table-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--np-brand) 30%, var(--np-brand) 70%, transparent);
}

/* ── RWD ── */
@media (max-width: 991px) {
	.cac-workspace-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.cac-steps-col { position: static; }
	.cac-steps-head { text-align: center; padding: 20px 22px; }
	.cac-steps-head::before { display: none; }
	.cac-steps-head::after { font-size: 68px; right: 10px; }
	.cac-steps-goldline { margin: 0 auto; }

	/* 平板版步驟改橫向 */
	.cac-steps-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
	}
	.cac-steps-list::before { display: none; }
	.cac-step {
		flex: 1 1 calc(33.333% - 10px);
		min-width: 0;
	}
	.cac-step:hover { transform: translateY(-2px); }
}
@media (max-width: 767px) {
	.cac-workspace-section { padding: 10px 0 50px; }
	.cac-steps-list { flex-direction: column; }
	.cac-step { flex: 1 1 auto; }
	.cac-steps-title { font-size: 19px; }

	.cac-calc-header {
		padding: 20px 22px;
		flex-wrap: wrap;
		gap: 10px;
	}
	.cac-calc-header::after { left: 22px; right: 22px; }
	.cac-calc-title { font-size: 20px; gap: 10px; }
	.cac-calc-title svg { padding: 8px; width: 20px; height: 20px; }
	.cac-calc-ribbon { font-size: 11px; padding: 4px 10px; letter-spacing: 0.18em; }
	.cac-calc-body { padding: 22px 20px; }
	.cac-form-hint { padding-left: 0; }

	.cac-dx-box--result .dx-texteditor-input { font-size: 20px !important; }

	.cac-table-title { font-size: 22px; }
	.cac-table-card { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════
   charge.php ── 公(認)證費用標準表
   ═══════════════════════════════════════════════════════ */

/* ── 說明區 ── */
.charge-intro-section { padding: 56px 0 40px; background: var(--color-bg-alt, #F8F7F3); }

.charge-intro-wrap {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 14px;
	padding: 32px 36px;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb),0.06);
}
.charge-intro-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, var(--color-primary, var(--np-text)), var(--color-secondary, var(--np-brand)));
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.charge-intro-body {
	flex: 1;
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text, #1E293B);
}
.charge-intro-body p { margin: 0 0 6px; }
.charge-intro-body p:last-child { margin: 0; }
.charge-intro-cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
}

/* CTA 按鈕 */
.btn-charge-contact,
.btn-charge-calc {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s;
}
.btn-charge-contact {
	background: var(--color-primary, var(--np-brand));
	color: #fff;
	box-shadow: 0 3px 12px rgba(var(--np-brand-rgb),0.22);
}
.btn-charge-contact:hover { background: var(--color-secondary, var(--np-brand)); color: #fff; transform: translateY(-2px); }

.btn-charge-calc {
	background: transparent;
	border: 1px solid var(--color-primary, var(--np-brand));
	color: var(--color-primary, var(--np-text));
}
.btn-charge-calc:hover { background: var(--color-primary, var(--np-brand)); color: #fff; transform: translateY(-2px); }

/* ── 費率主表區 ── */
.charge-table-section { padding: 64px 0; }

.charge-table-header { text-align: center; margin-bottom: 36px; }
.charge-table-title {
	font-size: 26px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0 0 10px;
}
.charge-table-subtitle {
	font-size: 14px;
	color: var(--color-text-muted, #64748B);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Badge */
.charge-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	border-radius: 4px;
	padding: 2px 9px;
}
.charge-badge--blue {
	background: #EFF6FF;
	color: var(--color-secondary, var(--np-text));
	border: 1px solid #BFDBFE;
}

/* 費率表外框 */
.charge-fee-wrap {
	background: #fff;
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(var(--np-brand-rgb),0.07);
}
.charge-fee-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* 費率表本體 */
.charge-fee-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	min-width: 760px;
}
.charge-fee-table th,
.charge-fee-table td {
	border: 1px solid #E2E8F0;
	padding: 10px 14px;
	vertical-align: middle;
	line-height: 1.6;
}

/* 表頭 */
.charge-thead-group th,
.charge-thead-sub th {
	background: var(--color-primary, var(--np-brand));
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
}
.charge-col-group { font-size: 14px !important; letter-spacing: 0.5px; }
.charge-col-group--cert { background: #1D4ED8 !important; }

.charge-thead-sub th {
	background: rgba(var(--np-brand-rgb),0.85);
	font-weight: 600;
	font-size: 12.5px !important;
}
.charge-thead-sub small { opacity: 0.8; font-size: 11px; }

/* 事由欄 */
.charge-col-item { min-width: 220px; text-align: left; }
.charge-item-cell {
	background: #FAFAFA;
	color: var(--color-text, #1E293B);
	font-weight: 500;
	min-width: 220px;
}

/* 公證欄（金額）*/
.charge-notarize-cell {
	text-align: right;
	color: var(--color-primary, var(--np-text));
	font-weight: 600;
	font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
}
.charge-col-enforce {
	background: #F0F4FF;
	color: #1D4ED8;
}

/* 認證欄（金額）*/
.charge-cert-cell {
	text-align: right;
	color: #047857;
	font-weight: 600;
	font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
	background: #F0FDF4;
}

/* 說明性文字欄 */
.charge-note-cell {
	font-size: 13px;
	color: var(--color-text, #1E293B);
	line-height: 1.7;
}

/* 小字說明 */
.charge-note {
	display: block;
	font-size: 12px;
	color: var(--color-text-muted, #64748B);
	margin-top: 4px;
}

/* 區段分隔列 */
.charge-section-divider td {
	background: var(--color-primary, var(--np-brand));
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	padding: 8px 14px;
}

/* 隔行變色 */
.charge-fee-table tbody tr:nth-child(even) .charge-item-cell { background: #F5F7FA; }
.charge-fee-table tbody tr:hover .charge-item-cell { background: #EFF6FF; }

/* ── 備考條文區 ── */
.charge-notes-section {
	padding: 0 0 72px;
	background: var(--color-bg-alt, #F8F7F3);
}

.charge-notes-header { text-align: center; margin-bottom: 28px; }
.charge-notes-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0;
}
.charge-notes-title svg { color: var(--color-secondary, var(--np-text)); }

.charge-notes-card {
	background: #fff;
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 14px;
	padding: 36px 40px;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb),0.06);
}
.charge-notes-list {
	margin: 0;
	padding-left: 20px;
	counter-reset: note-counter;
}
.charge-notes-list > li {
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-text, #1E293B);
	margin-bottom: 10px;
	padding-left: 4px;
}
.charge-notes-list > li:last-child { margin-bottom: 0; }
.charge-notes-list > li strong { color: var(--color-primary, var(--np-text)); }
.charge-notes-list ul {
	margin: 6px 0 0;
	padding-left: 18px;
}
.charge-notes-list ul li {
	font-size: 13.5px;
	margin-bottom: 4px;
	color: var(--color-text-muted, #64748B);
}

/* ── RWD ── */
@media (max-width: 991px) {
	.charge-intro-wrap { flex-direction: column; gap: 18px; padding: 24px 22px; }
	.charge-intro-cta { flex-direction: row; flex-wrap: wrap; }
	.charge-intro-icon { width: 46px; height: 46px; }
}
@media (max-width: 767px) {
	.charge-table-title { font-size: 20px; }
	.charge-notes-card { padding: 22px 18px; }
	.charge-fee-table { font-size: 12.5px; }
}

/* ── 共用區塊標題（情境 / 說明 / FAQ）── */
.charge-section-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.charge-section-eng { display: inline-block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent, var(--np-text)); font-weight: 700; margin-bottom: 8px; }
.charge-section-title { font-size: 26px; font-weight: 700; color: var(--color-primary, var(--np-text)); margin: 0 0 14px; line-height: 1.35; }
.charge-section-line { width: 48px; height: 3px; background: var(--color-accent, var(--np-brand)); border-radius: 2px; margin: 0 auto 16px; }
.charge-section-sub { font-size: 15px; line-height: 1.8; color: var(--color-text-muted, #64748B); margin: 0; }
.charge-section-sub a { color: var(--color-secondary, var(--np-text)); font-weight: 600; text-decoration: underline; }

/* ── 情境卡：你想辦哪一種 ── */
.charge-scenario-section { padding: 60px 0 24px; }
.charge-scenario-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.charge-scenario-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 14px;
	padding: 26px 22px;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb),0.06);
	transition: transform 0.2s, box-shadow 0.2s;
}
.charge-scenario-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(var(--np-brand-rgb),0.12); }
.charge-scenario-icon {
	width: 50px; height: 50px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, var(--color-primary, var(--np-text)), var(--color-secondary, var(--np-brand)));
	margin-bottom: 16px;
}
.charge-scenario-name { font-size: 17px; font-weight: 700; color: var(--color-text, #1E293B); margin: 0 0 8px; }
.charge-scenario-eg { font-size: 13px; line-height: 1.7; color: var(--color-text-muted, #64748B); margin: 0 0 14px; }
.charge-scenario-fee { font-size: 14px; color: var(--color-text-muted, #64748B); margin: 0 0 6px; }
.charge-scenario-fee-num { font-size: 22px; font-weight: 800; color: var(--color-accent, var(--np-text)); }
.charge-scenario-note { font-size: 12.5px; line-height: 1.7; color: var(--color-text-muted, #64748B); margin: 0 0 18px; flex-grow: 1; }
.charge-scenario-links { display: flex; gap: 10px; margin-top: auto; }
.charge-scenario-links a {
	flex: 1; text-align: center;
	font-size: 13.5px; font-weight: 600;
	padding: 9px 8px; border-radius: 8px;
	text-decoration: none; transition: all 0.2s;
	border: 1px solid var(--color-primary, var(--np-brand));
	color: var(--color-primary, var(--np-text));
}
.charge-scenario-links a:hover { background: var(--color-bg-alt, #F8F7F3); }
.charge-scenario-links a.charge-scenario-book { background: var(--color-primary, var(--np-brand)); color: #fff; }
.charge-scenario-links a.charge-scenario-book:hover { background: var(--color-secondary, var(--np-brand)); }

/* ── 費用怎麼決定的 ── */
.charge-explain-section { padding: 40px 0 56px; }
.charge-explain-wrap { background: var(--color-bg-alt, #F8F7F3); border-radius: 16px; padding: 44px 40px; }
.charge-explain-head { text-align: center; max-width: 680px; margin: 0 auto 32px; }
.charge-explain-head .charge-section-line { margin: 14px auto 16px; }
.charge-explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.charge-explain-item { background: #fff; border-radius: 12px; padding: 26px 24px; border: 1px solid var(--color-border, #E5E2DC); }
.charge-explain-no { display: inline-block; font-size: 13px; font-weight: 800; color: #fff; background: var(--color-accent, var(--np-brand)); width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 8px; margin-bottom: 14px; }
.charge-explain-item h3 { font-size: 16px; font-weight: 700; color: var(--color-primary, var(--np-text)); margin: 0 0 10px; }
.charge-explain-item p { font-size: 14px; line-height: 1.85; color: var(--color-text, #1E293B); margin: 0; }

/* ── 完整費率表前導說明 ── */
.charge-table-hint { font-size: 13px; line-height: 1.7; color: var(--color-text-muted, #64748B); max-width: 640px; margin: 12px auto 0; }

/* ── 費用 FAQ ── */
.charge-faq-section { padding: 24px 0 64px; }
.charge-faq-list { max-width: 820px; margin: 0 auto; }
.charge-faq-item { background: #fff; border: 1px solid var(--color-border, #E5E2DC); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.charge-faq-item[open] { border-color: var(--color-secondary, var(--np-brand)); box-shadow: 0 4px 18px rgba(var(--np-brand-rgb),0.07); }
.charge-faq-q {
	cursor: pointer; list-style: none;
	padding: 18px 52px 18px 22px;
	font-size: 15.5px; font-weight: 600;
	color: var(--color-primary, var(--np-text));
	position: relative;
}
.charge-faq-q::-webkit-details-marker { display: none; }
.charge-faq-q::after {
	content: ''; position: absolute; right: 22px; top: 50%;
	width: 10px; height: 10px;
	border-right: 2px solid var(--color-text-muted, #64748B);
	border-bottom: 2px solid var(--color-text-muted, #64748B);
	transform: translateY(-65%) rotate(45deg);
	transition: transform 0.2s;
}
.charge-faq-item[open] .charge-faq-q::after { transform: translateY(-35%) rotate(-135deg); }
.charge-faq-a { padding: 0 22px 20px; font-size: 14px; line-height: 1.9; color: var(--color-text, #1E293B); }

/* ── 新增區塊 RWD ── */
@media (max-width: 991px) {
	.charge-scenario-grid { grid-template-columns: repeat(2, 1fr); }
	.charge-explain-grid { grid-template-columns: 1fr; gap: 16px; }
	.charge-explain-wrap { padding: 32px 24px; }
}
@media (max-width: 575px) {
	.charge-scenario-grid { grid-template-columns: 1fr; }
	.charge-section-title { font-size: 22px; }
}


/* ============================================================
   FAQ / 常見問答 — faq.php
   ============================================================ */

/* ── 說明介紹卡 ─────────────────────────────────────────── */
.faq-intro-section { background: var(--color-bg-alt, #F0F4F8); }
.faq-intro-wrap {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 12px;
	padding: 32px 36px;
	box-shadow: 0 4px 24px rgba(var(--np-brand-rgb), 0.07);
}
.faq-intro-icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(var(--np-brand-rgb), 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary, var(--np-text));
	margin-top: 4px;
}
.faq-intro-body h2.faq-intro-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0 0 8px;
}
.faq-intro-body p {
	font-size: 15px;
	color: var(--color-text-muted, #64748B);
	line-height: 1.75;
	margin: 0;
}

/* ── 主 FAQ 區 ──────────────────────────────────────────── */
.faq-main-section { background: var(--color-bg, #fff); }

/* 分類標題（有類別時出現）*/
.faq-group { margin-bottom: 42px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--color-secondary, var(--np-text));
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-border, #E2E8F0);
}
.faq-group-title svg { color: var(--color-accent, var(--np-text)); flex-shrink: 0; }

/* 手風琴群組 */
.faq-accordion-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 每一個 FAQ 項目 */
.faq-item {
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 10px;
	overflow: hidden;
	background: var(--color-bg, #fff);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.faq-item:hover {
	border-color: rgba(var(--np-brand-rgb), 0.35);
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb), 0.08);
}
.faq-item.is-open {
	border-color: var(--color-secondary, var(--np-brand));
	box-shadow: 0 6px 28px rgba(var(--np-brand-rgb), 0.13);
}

/* 問題按鈕（header）*/
.faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	background: none;
	border: 0;
	padding: 20px 22px;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}
.faq-question:hover { background: rgba(var(--np-brand-rgb), 0.04); }
.faq-item.is-open .faq-question { background: rgba(var(--np-brand-rgb), 0.05); }

/* 序號徽章 */
.faq-q-num {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-secondary, var(--np-brand));
	color: #fff;
	font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.faq-item.is-open .faq-q-num {
	background: var(--color-accent, var(--np-brand));
}

/* 問題文字 */
.faq-q-text {
	flex: 1;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--color-text, #1E293B);
	line-height: 1.55;
}

/* 箭頭圖示 */
.faq-q-arrow {
	flex-shrink: 0;
	color: var(--color-text-muted, #64748B);
	display: flex;
	align-items: center;
	transition: transform 0.3s ease, color 0.2s;
}
.faq-item.is-open .faq-q-arrow {
	transform: rotate(180deg);
	color: var(--color-secondary, var(--np-text));
}

/* 答案面板 */
.faq-answer {
	border-top: 1px solid var(--color-border, #E2E8F0);
}
.faq-answer[hidden] { display: none; }
.faq-answer-inner {
	padding: 20px 22px 22px 72px; /* 左縮排對齊問題文字 */
	font-size: 14.5px;
	color: var(--color-text-muted, #64748B);
	line-height: 1.8;
}
.faq-answer-inner p { margin: 0 0 10px; }
.faq-answer-inner p:last-child { margin-bottom: 0; }
.faq-answer-inner ul,
.faq-answer-inner ol { padding-left: 20px; margin: 0 0 10px; }
.faq-answer-inner li { margin-bottom: 6px; }
.faq-answer-inner strong { color: var(--color-primary, var(--np-text)); }
.faq-answer-inner a {
	color: var(--color-secondary, var(--np-text));
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.2s;
}
.faq-answer-inner a:hover { text-decoration-color: currentColor; }

/* ── 快速連結 ────────────────────────────────────────────── */
.faq-quicklink-section {
	background: var(--color-bg-alt, #F0F4F8);
	border-top: 1px solid var(--color-border, #E2E8F0);
}
.faq-quicklink-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	text-align: center;
	margin: 0 0 32px;
}
.faq-quicklink-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.faq-quicklink-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 12px;
	padding: 24px 22px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 4px 24px rgba(var(--np-brand-rgb), 0.06);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.25s;
}
.faq-quicklink-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(var(--np-brand-rgb), 0.15);
	border-color: var(--color-secondary, var(--np-brand));
	text-decoration: none;
	color: inherit;
}
.faq-quicklink-icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: rgba(var(--np-brand-rgb), 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-secondary, var(--np-text));
	transition: background 0.25s;
}
.faq-quicklink-card:hover .faq-quicklink-icon {
	background: rgba(var(--np-brand-rgb), 0.15);
}
.faq-quicklink-body { flex: 1; }
.faq-quicklink-en {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent, var(--np-text));
	margin-bottom: 3px;
}
.faq-quicklink-zh {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin-bottom: 5px;
}
.faq-quicklink-body p {
	font-size: 13.5px;
	color: var(--color-text-muted, #64748B);
	margin: 0;
	line-height: 1.55;
}
.faq-quicklink-arrow {
	flex-shrink: 0;
	color: var(--color-text-muted, #64748B);
	opacity: 0.5;
	display: flex;
	align-items: center;
	transition: opacity 0.2s, transform 0.2s;
}
.faq-quicklink-card:hover .faq-quicklink-arrow {
	opacity: 1;
	transform: translateX(3px);
	color: var(--color-secondary, var(--np-text));
}

/* ── RWD ────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.faq-quicklink-grid { grid-template-columns: 1fr; gap: 14px; }
	.faq-intro-wrap { padding: 24px 22px; gap: 16px; }
}
@media (max-width: 767px) {
	.faq-answer-inner { padding: 18px 18px 20px 18px; }
	.faq-q-text { font-size: 14.5px; }
	.faq-question { padding: 16px 18px; gap: 12px; }
	.faq-q-num { width: 30px; height: 30px; font-size: 12px; }
	.faq-quicklink-card { padding: 18px 16px; }
	.faq-quicklink-title { font-size: 19px; }
}


/* ============================================================
   Required / 案件應備文件 — required.php
   ============================================================ */

/* ── 說明介紹區 ─────────────────────────────────────────── */
.req-intro-section { background: var(--color-bg-alt, #F0F4F8); }
.req-intro-wrap {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 12px;
	padding: 32px 36px;
	box-shadow: 0 4px 24px rgba(var(--np-brand-rgb), 0.07);
}
.req-intro-icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(var(--np-brand-rgb), 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary, var(--np-text));
	margin-top: 4px;
}
.req-intro-body p {
	font-size: 15px;
	color: var(--color-text-muted, #64748B);
	line-height: 1.75;
	margin: 0 0 8px;
}
.req-intro-body p:last-child { margin-bottom: 0; }
.req-intro-note {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 14px;
	color: #C0392B;
}
.req-intro-note svg { flex-shrink: 0; margin-top: 2px; }

/* ── 服務頁整頁免責聲明（快速連結區與 footer 之間）─────────── */
.svc-page-disclaimer {
	background: var(--color-bg, #fff);
	padding: 0 0 56px;
}
.svc-page-disclaimer .container {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 9px;
	max-width: 880px;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.svc-page-disclaimer svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--color-gold, #B8995A);
	opacity: .85;
}
.svc-page-disclaimer p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.85;
	color: #8A8A8A;
	letter-spacing: .2px;
}
.svc-page-disclaimer p strong {
	color: #6E6E6E;
	font-weight: 600;
}
@media (max-width: 575px) {
	.svc-page-disclaimer { padding-bottom: 40px; }
	.svc-page-disclaimer p { font-size: 13px; }
}

/* ── 授權書下載 ─────────────────────────────────────────── */
.req-download-section { background: var(--color-bg, #fff); padding-bottom: 0; }
.req-download-card {
	background: var(--color-bg-alt, #F0F4F8);
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 12px;
	padding: 18px 24px;
	transition: padding 0.3s ease;
}

/* 標題列：左（展開按鈕）／右（身分證明文件說明連結） */
.req-download-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

/* 左側展開按鈕 */
.req-download-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 4px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	transition: color 0.2s;
}
.req-download-toggle:hover { color: var(--color-secondary, var(--np-text)); }
.req-download-toggle-ico {
	display: inline-flex;
	color: var(--color-secondary, var(--np-text));
}
.req-download-toggle-arrow {
	display: inline-flex;
	color: var(--color-accent, var(--np-text));
	transition: transform 0.3s ease;
}
.req-download-toggle.is-open .req-download-toggle-arrow {
	transform: rotate(180deg);
}

/* 右側：身分證明文件說明連結 */
.req-identity-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 20px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary, var(--np-text));
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.req-identity-link-btn:hover {
	background: var(--color-primary, var(--np-brand));
	border-color: var(--color-primary, var(--np-brand));
	color: #fff;
	text-decoration: none;
}
.req-identity-link-btn svg { flex-shrink: 0; }

/* 授權書按鈕陣列（預設收合；展開時水平置中） */
.req-download-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--color-border, #E2E8F0);
}
.req-download-grid[hidden] { display: none; }
.req-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-primary, var(--np-text));
	text-decoration: none;
	transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.req-download-btn:hover {
	background: var(--color-secondary, var(--np-brand));
	border-color: var(--color-secondary, var(--np-brand));
	color: #fff;
	text-decoration: none;
}
.req-download-btn svg { flex-shrink: 0; }

/* 響應式：手機版左右堆疊 */
@media (max-width: 575px) {
	.req-download-bar { flex-direction: column; align-items: stretch; }
	.req-download-toggle { justify-content: space-between; }
	.req-identity-link-btn { justify-content: center; }
}

/* ── 應備文件主區 ────────────────────────────────────────── */
.req-index-section { background: var(--color-bg, #fff); }
.req-section-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0 0 24px;
}
.req-section-title-bar {
	display: inline-block;
	width: 5px;
	height: 24px;
	border-radius: 3px;
	background: var(--color-accent, var(--np-brand));
}

/* 快速跳點索引 */
.req-quicknav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
	padding: 20px 24px;
	background: var(--color-bg-alt, #F0F4F8);
	border-radius: 10px;
	border: 1px solid var(--color-border, #E2E8F0);
}
.req-quicknav-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 20px;
	font-size: 13px;
	color: var(--color-primary, var(--np-text));
	text-decoration: none;
	transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.req-quicknav-btn:hover {
	background: var(--color-secondary, var(--np-brand));
	border-color: var(--color-secondary, var(--np-brand));
	color: #fff;
	text-decoration: none;
}
.req-quicknav-btn svg { flex-shrink: 0; }

/* ── 分類 Tab 區（required 專屬；與網站設計系統一致） ───────── */

/* 置中式區段標題（仿 inner-section-heading 樣式，統一視覺語彙） */
.req-tab-heading {
	text-align: center;
	margin-bottom: 36px;
}
.req-tab-heading-label {
	display: inline-block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent, var(--np-text));
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 10px;
}
.req-tab-heading-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	margin: 0 0 14px;
	line-height: 1.3;
	letter-spacing: 2px;
}
.req-tab-heading-line {
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-accent, var(--np-brand));
	margin: 0 auto 16px;
}
.req-tab-heading-desc {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 15px;
	color: var(--color-text-muted, #6B7280);
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.75;
}

/* Tab 列（水平置中、金色底線強調） */
.req-tab-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 8px;
	border-bottom: 1px solid var(--color-border, #E5E2DC);
	margin-bottom: 32px;
	padding: 0 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.req-tab-nav::-webkit-scrollbar { display: none; }

/* Tab 列換行用：強制下一個 button 從新的一排開始（公證 / 認證 分排） */
.req-tab-nav-break {
	flex-basis: 100%;
	width: 100%;
	height: 0;
}

.req-tab-btn {
	position: relative;
	padding: 14px 22px 16px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-text-muted, #6B7280);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.25s ease, border-color 0.25s ease, font-weight 0.25s ease;
}
.req-tab-btn:hover {
	color: var(--color-primary, var(--np-text));
}
.req-tab-btn.is-active {
	color: var(--color-text, #1E1E2E);
	font-weight: 700;
	border-bottom-color: var(--color-accent, var(--np-brand));
}
.req-tab-btn:focus-visible {
	outline: 2px solid rgba(var(--np-brand-rgb), 0.45);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Tab 面板 */
.req-tab-panels { min-height: 120px; }
.req-tab-panel { display: none; }
.req-tab-panel.is-active { display: block; }

/* 響應式：手機版 Tab 改為較小字、橫向捲動 */
@media (max-width: 767px) {
	.req-tab-heading-title { font-size: 26px; }
	.req-tab-nav {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.req-tab-nav-break { display: none; }
	.req-tab-btn {
		flex: 0 0 auto;
		padding: 12px 14px 14px;
		font-size: 14px;
	}
}

/* 手風琴容器 */
.req-accordion-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 單一文件項目 */
.req-item {
	border: 1px solid var(--color-border, #E2E8F0);
	border-radius: 10px;
	overflow: hidden;
	background: var(--color-bg, #fff);
	transition: box-shadow 0.25s, border-color 0.25s;
	scroll-margin-top: 110px; /* 固定導覽高度補償 */
}
.req-item:hover {
	border-color: rgba(var(--np-brand-rgb), 0.35);
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb), 0.08);
}
.req-item.is-open {
	border-color: var(--color-secondary, var(--np-brand));
	box-shadow: 0 6px 28px rgba(var(--np-brand-rgb), 0.13);
}

/* 問題按鈕 */
.req-question {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	background: none;
	border: 0;
	padding: 20px 22px;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}
.req-question:hover { background: rgba(var(--np-brand-rgb), 0.04); }
.req-item.is-open .req-question { background: rgba(var(--np-brand-rgb), 0.05); }

/* 序號 */
.req-q-num {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-secondary, #aaadae);
	color: #fff;
	font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.req-item.is-open .req-q-num { background: var(--color-accent, var(--np-brand)); }

/* 文字 */
.req-q-text {
	flex: 1;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--color-text, #1E293B);
	line-height: 1.55;
}

/* 箭頭 */
.req-q-arrow {
	flex-shrink: 0;
	color: var(--color-text-muted, #64748B);
	display: flex;
	align-items: center;
	transition: transform 0.3s ease, color 0.2s;
}
.req-item.is-open .req-q-arrow {
	transform: rotate(180deg);
	color: var(--color-secondary, var(--np-text));
}

/* 答案面板 */
.req-answer { border-top: 1px solid var(--color-border, #E2E8F0); }
.req-answer[hidden] { display: none; }
.req-answer-inner {
	padding: 20px 22px 24px 72px;
	font-size: 14.5px;
	color: var(--color-text-muted, #64748B);
	line-height: 1.8;
}
.req-answer-inner p { margin: 0 0 10px; }
.req-answer-inner p:last-child { margin-bottom: 0; }
.req-answer-inner ul { padding-left: 0px; margin: 0 0 10px; }
.req-answer-inner ol { padding-left: 45px; margin: 0 0 10px; }
.req-answer-inner li { margin-bottom: 6px; }
.req-answer-inner strong { color: var(--color-primary, var(--np-text)); }
.req-answer-inner h4 strong { font-size: 16px; }
.req-answer-inner h5 strong { font-size: 15px; }
.req-answer-inner a {
	color: var(--color-secondary, var(--np-text));
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.2s;
}
.req-answer-inner a:hover { text-decoration-color: currentColor; }

/* 備註區塊 */
.req-short-note {
	margin-top: 14px;
	padding: 12px 16px;
	background: rgba(var(--np-brand-rgb), 0.07);
	border-left: 3px solid var(--color-accent, var(--np-brand));
	border-radius: 0 6px 6px 0;
	font-size: 13.5px;
	color: var(--color-text-muted, #64748B);
}

/* ── RWD ────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.req-intro-wrap { padding: 24px 22px; gap: 16px; }
	.req-download-card { padding: 22px 20px; }
	.req-quicknav { padding: 16px 18px; }
}
@media (max-width: 767px) {
	.req-answer-inner { padding: 18px 18px 20px 18px; }
	.req-q-text { font-size: 14.5px; }
	.req-question { padding: 16px 18px; gap: 12px; }
	.req-q-num { width: 30px; height: 30px; font-size: 12px; }
	.req-section-title { font-size: 19px; }
	.req-download-grid { gap: 8px; }
	.req-download-btn { font-size: 12.5px; padding: 8px 14px; }
}

/* ============================================================
   Service / 服務項目  service.php
   ============================================================ */

/*  服務簡介區  */
/* ============================================================
   Service — service.php 服務項目頁
   ============================================================ */

/* ── 服務簡介區（svc-intro-section） ── */
.svc-intro-section {
	background: #FFFFFF;
	padding: 80px 0 90px;
	position: relative;
	overflow: hidden;
}

/* 背景幾何裝飾 */
.svc-intro-section::before {
	content: '';
	position: absolute;
	left: -80px;
	bottom: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 1px solid rgba(var(--np-brand-rgb),0.10);
	pointer-events: none;
}
.svc-intro-section::after {
	content: '';
	position: absolute;
	right: -40px;
	top: 40px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgba(var(--np-brand-rgb),0.04);
	pointer-events: none;
}

.svc-intro-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 72px;
	position: relative;
	z-index: 1;
}
.svc-intro-text { flex: 1; }
.svc-intro-label {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--np-text);
	margin-bottom: 14px;
	display: block;
}
.svc-intro-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 34px;
	font-weight: 700;
	color: var(--np-text);
	margin: 0 0 18px;
	line-height: 1.3;
}
.svc-intro-gold-line {
	width: 44px;
	height: 3px;
	background: var(--np-brand);
	border-radius: 2px;
	margin-bottom: 22px;
}
.svc-intro-desc {
	font-size: 15.5px;
	color: #6B7280;
	line-height: 1.9;
	margin: 0 0 32px;
}
.svc-intro-cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
/* 右欄：亮點清單 */
.svc-intro-highlights {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.svc-highlight-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid #E5E2DC;
	border-left: 3px solid transparent;
	border-radius: 12px;
	padding: 18px 22px;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb),0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s;
}
.svc-highlight-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(var(--np-brand-rgb),0.12);
	border-left-color: var(--np-brand);
}
.svc-highlight-icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: rgba(var(--np-brand-rgb),0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--np-text);
	transition: background 0.25s, color 0.25s;
}
.svc-highlight-card:hover .svc-highlight-icon {
	background: var(--np-brand);
	color: #fff;
}
.svc-highlight-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.svc-highlight-body strong {
	font-size: 15px;
	font-weight: 700;
	color: #1E1E2E;
	line-height: 1.4;
}
.svc-highlight-body span {
	font-size: 13px;
	color: #6B7280;
	line-height: 1.55;
}

/* ── 服務卡片區（svc-cards-section） ── */
.svc-cards-section {
	background: var(--t-paper);
	padding: 84px 0 96px;
}
.svc-section-header {
	text-align: center;
	margin-bottom: 56px;
}
.svc-section-label {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--np-text);
	display: block;
	margin-bottom: 12px;
}
.svc-section-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: var(--np-text);
	margin: 0 0 16px;
	line-height: 1.3;
}
.svc-section-gold-line {
	width: 44px;
	height: 3px;
	background: var(--np-brand);
	border-radius: 2px;
	margin: 0 auto 18px;
}
.svc-section-sub {
	font-size: 15px;
	color: #6B7280;
	line-height: 1.85;
	max-width: 560px;
	margin: 0 auto;
}

/* Editorial header modifier — 跨白底 section 間的視覺斷點(2026-05-28 Phase C 加入) */
/* 用於相鄰同色 section 之間,加跨幅金漸層細線 + 大號 chapter 編號(Cormorant Garamond) */
.svc-section-header--editorial {
	position: relative;
	padding-top: 64px;
}
.svc-section-header--editorial::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 240px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--np-brand-rgb),0.55) 30%, rgba(var(--np-brand-rgb),0.85) 50%, rgba(var(--np-brand-rgb),0.55) 70%, transparent 100%);
}
.svc-section-chapter {
	font-family: 'Cormorant Garamond', serif;
	font-size: 42px;
	font-weight: 400;
	color: var(--np-text);
	line-height: 1;
	margin: 22px 0 14px;
	letter-spacing: 0.02em;
	display: block;
}
.svc-section-header--editorial .svc-section-label {
	margin-bottom: 14px;
}

.svc-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.svc-card {
	background: #FFFFFF;
	border: 1px solid #E5E2DC;
	border-top: 3px solid #E5E2DC;
	border-radius: 14px;
	padding: 34px 28px 30px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb),0.06);
	display: flex;
	flex-direction: column;
}
.svc-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(var(--np-brand-rgb),0.13);
	border-top-color: var(--np-brand);
}
.svc-card-icon {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	background: rgba(var(--np-brand-rgb),0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	color: var(--np-text);
	transition: background 0.25s, color 0.25s;
	flex-shrink: 0;
}
.svc-card:hover .svc-card-icon {
	background: var(--np-brand);
	color: #fff;
}
.svc-card-icon svg {
	width: 26px;
	height: 26px;
	stroke-width: 1.5;
}
.svc-card-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #1E1E2E;
	margin: 0 0 12px;
	line-height: 1.45;
}
.svc-card-desc {
	font-size: 14px;
	color: #6B7280;
	line-height: 1.85;
	margin: 0;
	flex: 1;
}

/* 服務總覽頁：可點整卡的服務連結卡（svc-card 以 <a> 呈現） */
.svc-card--linked {
	text-decoration: none;
	color: inherit;
}
.svc-card--linked:hover,
.svc-card--linked:focus {
	text-decoration: none;
	color: inherit;
}
.svc-card-eng {
	font-family: 'Cormorant Garamond', serif;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--np-text);
	margin-bottom: 6px;
	display: block;
}
.svc-card-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 20px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--np-text);
	transition: gap 0.25s ease, color 0.25s ease;
}
.svc-card--linked:hover .svc-card-more,
.svc-card--linked:focus .svc-card-more {
	color: var(--np-text);
	gap: 8px;
}

/* 總覽頁 4 卡：桌機 2×2 更平衡（覆寫 .svc-cards-grid 預設 3 欄） */
.svc-cards-grid--overview {
	grid-template-columns: repeat(2, 1fr);
	max-width: 920px;
	margin: 0 auto;
}
.svc-steps-list {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	counter-reset: svc-step;
}
.svc-steps-list li {
	counter-increment: svc-step;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	font-size: 13.5px;
	color: #1E1E2E;
	border-bottom: 1px dashed #E5E2DC;
	line-height: 1.6;
}
.svc-steps-list li:last-child {
	border-bottom: none;
}
.svc-steps-list li::before {
	content: counter(svc-step);
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--np-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

/* ── 公認證流程區（svc-process-section） ── */
.svc-process-section {
	background: #FFFFFF;
	padding: 84px 0 96px;
	position: relative;
	overflow: hidden;
}

/* 背景幾何裝飾 */
.svc-process-section::before {
	content: '';
	position: absolute;
	right: -60px;
	bottom: -60px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	border: 1px solid rgba(var(--np-brand-rgb),0.10);
	pointer-events: none;
}

.svc-process-steps {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.svc-process-step {
	flex: 1;
	min-width: 140px;
	max-width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 16px 28px;
	background: #fff;
	border: 1px solid #E5E2DC;
	border-bottom: 3px solid transparent;
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(var(--np-brand-rgb),0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-bottom-color 0.25s;
}
.svc-process-step:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 34px rgba(var(--np-brand-rgb),0.14);
	border-bottom-color: var(--np-brand);
}
.svc-process-num {
	font-family: 'Cormorant Garamond', serif;
	font-size: 42px;
	font-weight: 600;
	color: var(--np-text);
	line-height: 1;
	margin-bottom: 14px;
	opacity: 0.75;
}
.svc-process-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(var(--np-brand-rgb),0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--np-text);
	margin-bottom: 16px;
	transition: background 0.25s, color 0.25s;
}
.svc-process-step:hover .svc-process-icon {
	background: var(--np-brand);
	color: #fff;
}
.svc-process-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--np-text);
	margin: 0 0 8px;
}
.svc-process-desc {
	font-size: 13px;
	color: #6B7280;
	line-height: 1.65;
	margin: 0;
}
.svc-process-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	margin-top: 60px;
	color: rgba(var(--np-text-rgb),0.7);
	flex-shrink: 0;
}

/* ── CTA 深色區塊（svc-cta-section） ── */
.svc-cta-section {
	background: linear-gradient(145deg, #1A2D5A 0%, var(--np-brand) 55%, #1E3070 100%);
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

/* CTA 幾何裝飾 */
.svc-cta-section::before {
	content: '';
	position: absolute;
	right: -80px;
	top: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 1.5px solid rgba(var(--np-brand-rgb),0.20);
	pointer-events: none;
}
.svc-cta-section::after {
	content: '';
	position: absolute;
	left: 60px;
	bottom: -100px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(var(--np-brand-rgb),0.06);
	pointer-events: none;
}

.svc-cta-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	position: relative;
	z-index: 1;
}

.svc-cta-text { flex: 1; }
.svc-cta-label {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: rgba(var(--np-text-rgb),0.9);
	display: block;
	margin-bottom: 12px;
}
.svc-cta-title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 16px;
	line-height: 1.3;
}
.svc-cta-desc {
	font-size: 15px;
	color: rgba(255,255,255,0.75);
	line-height: 1.9;
	margin: 0;
	max-width: 520px;
}
.svc-cta-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
}
.btn-svc-cta-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--np-brand);
	color: #fff;
	border-radius: 8px;
	padding: 14px 32px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
	white-space: nowrap;
	letter-spacing: 0.01em;
}
.btn-svc-cta-primary:hover {
	background: #b07836;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(var(--np-brand-rgb),0.35);
}
.btn-svc-cta-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: rgba(255,255,255,0.88);
	border: 1.5px solid rgba(255,255,255,0.32);
	border-radius: 8px;
	padding: 13px 32px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
	white-space: nowrap;
}
.btn-svc-cta-outline:hover {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.75);
	color: #fff;
	transform: translateY(-2px);
}
/* ⭐⭐ 2026-09-03(棒86 批次3 ④):CTA 在兩種畫布下必須是兩種版面。
   ── 診斷(量測,不是感覺)──────────────────────────────────────────────
   這個區塊原本是為 **全寬頁**(staging 的 service.php / about-us.php,版心 1140)設計的:
   左文右鈕、`space-between`、按鈕直向堆疊 —— 在 1140 寬底下成立。
   但 `_core/fe/docs-detail.php` 把它重用在 **文章欄(col-lg-8,實測 750px)** 裡,同一套規則就垮了:
     文字塊 481 + gap 48 + 按鈕欄 191 = 720,按鈕欄只剩 191px
     ⇒ 兩顆鈕被壓成等寬直條(各 191×54)、上下堆疊 ⇒ **主次不分**(填色鈕與外框鈕看起來一樣重);
     ⇒ 標題吃不滿寬、右上角的裝飾圓弧被按鈕蓋住;
     ⇒ 整塊沒有任何一條共用的對齊線(label / 標題 / 按鈕三者各自為政)。
   ⛔ 這不是「品味問題」,是**畫布決定版面**:窄欄不該硬塞兩欄。
   ⭐ 業主 2026-09-03 原話:「**上下 padding 過多**」「**整個底很厚,視覺不好**」
      「要考量**整體畫面**的感覺」。⛔ 單欄化本身會**變厚**(按鈕從文字旁邊移到文字下面,多一列 ≈ 82px)
      ⇒ 只做單欄化會正好違反業主要的方向,必須同步把量收回來(padding 80→36、gap 28→20、
      label 12→8、title 16→10、desc 行高 1.9→1.65、標題 32→27)。實測 285 → 251px。
   ⭐ 圓角:整頁其他區塊(側欄卡、相關文章卡、文章主圖)都是圓角,只有這塊是直角深色條
      ——「整個底很厚」有一半是它跟整頁不是同一套語言造成的。

   ── 為什麼用「結構選擇器」而不是 container query(2026-09-03 覆核後改寫)─────────
   第一版用 `container-type: inline-size` + `@container (max-width:900px)`,語義上最貼切,
   但踩到三個坑,最後一個是 Codex 覆核抓到的:
     ① container query **只作用在容器的後代,容器不能查詢自己**
        ⇒ 區塊自己的 padding / border-radius 寫在裡面完全不生效(後代規則卻都生效,極易誤判)。
     ② container query **不增加特異度** ⇒ 放在 `.svc-cta-*` 基準規則之前會被蓋掉。
     ③ ⛔**後面還有既有的 RWD `@media`**:`@media (max-width:991px)` 也宣告了
        `.svc-cta-content{gap:32px}`,同特異度且**在後面** ⇒ 768–991px 這一段,
        我收的 `gap:20px` 被悄悄蓋回 32px,「減厚」在那個寬度區間**沒有生效**。
   ⇒ 改用 `.col-lg-8 > .svc-cta-section`(0,2,0)與其後代(0,3,0):
      **順序無關、永遠贏過既有的 (0,1,0) RWD 規則**,而且少一層機制、少一個 containment 副作用。
   ⚠️ 代價(明記):判準從「這一塊多寬」變成「它在不在內容欄裡」。
      全寬用法(不在 col-lg-8 裡)一個值都不會被動到;但若日後把它放進**別的**窄容器,不會自動適應。

   ── 手機(≤767)刻意維持兩鈕全寬直排 ────────────────────────────────
   ⛔ 那不是選擇,是**算術**:375 視窗下內容寬只有 300px,兩顆 190px 的鈕排不下。
      既有 `@media (max-width:767px)` 的 `width:100%` 正確,本批**不覆蓋它**。 */
.col-lg-8 > .svc-cta-section {
	padding: 36px 0;
	border-radius: var(--t-radius-lg, 14px);
}
.col-lg-8 > .svc-cta-section .svc-cta-content {
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.col-lg-8 > .svc-cta-section .svc-cta-text { width: 100%; }
.col-lg-8 > .svc-cta-section .svc-cta-label { margin-bottom: 8px; }
.col-lg-8 > .svc-cta-section .svc-cta-title { font-size: 27px; margin-bottom: 10px; }
.col-lg-8 > .svc-cta-section .svc-cta-desc { max-width: none; line-height: 1.65; }
/* 業主 2026-09-03 現場裁示(附截圖標註「靠右對齊」):兩顆鈕靠右。
   ⭐ 這推翻了我原本「label/標題/按鈕同一條左對齊線」的代選;設計方向由業主拍板,改。
   改完的閱讀結構 = 文字靠左、動作靠右(常見的 CTA 形式),並且把右半邊原本空著的區域用上。
   ⚠️ ≤767 時兩顆鈕是全寬直排(內容寬只有 300px,排不下),靠齊對那一段沒有意義。 */
.col-lg-8 > .svc-cta-section .svc-cta-actions {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	width: 100%;
}
/* ≤767:標題回到既有的手機字級(26px),與站台其餘手機排版一致 */
@media (max-width: 767px) {
	.col-lg-8 > .svc-cta-section .svc-cta-title { font-size: 26px; }
}


/* ── 快速連結區（svc-quicklink-section） ── */
.svc-quicklink-section {
	background: var(--t-paper);
}
.svc-quicklink-header {
	margin-bottom: 44px;
}

/* ── RWD ── */
@media (max-width: 991px) {
	.svc-intro-wrap { grid-template-columns: 1fr; gap: 40px; }
	.svc-cards-grid { grid-template-columns: repeat(2, 1fr); }
	.svc-process-steps { gap: 0; }
	.svc-cta-content { flex-direction: column; align-items: flex-start; gap: 32px; }
	.svc-cta-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 767px) {
	.svc-intro-section { padding: 52px 0 60px; }
	.svc-intro-title { font-size: 26px; }
	.svc-intro-desc { font-size: 15px; }
	.svc-cards-grid { grid-template-columns: 1fr; }
	.svc-cards-section { padding: 60px 0 68px; }
	.svc-section-title { font-size: 25px; }
	.svc-process-section { padding: 60px 0 68px; }
	.svc-process-steps { flex-direction: column; align-items: center; gap: 10px; }
	.svc-process-step { max-width: 100%; width: 100%; flex-direction: row; text-align: left; padding: 18px 20px; gap: 16px; min-width: unset; }
	.svc-process-num { font-size: 30px; min-width: 36px; margin-bottom: 0; opacity: 1; }
	.svc-process-icon { margin-bottom: 0; flex-shrink: 0; width: 46px; height: 46px; }
	.svc-process-arrow { margin-top: 0; transform: rotate(90deg); padding: 4px 0; }
	.svc-cta-section { padding: 56px 0; }
	.svc-cta-title { font-size: 26px; }
	.svc-cta-actions { width: 100%; }
	.btn-svc-cta-primary,
	.btn-svc-cta-outline { width: 100%; }
}

/* ============================================================
   Contact / 聯絡我們  contact.php
   ============================================================ */

/*  主要網格  */
.contact-main-section {
    padding: 40px 0 70px;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/*  區段小標題（左右欄共用） */
.contact-section-heading {
    margin-bottom: 18px;
}
.contact-section-label {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 6px;
}
.contact-section-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0 0 10px;
    line-height: 1.3;
}
.contact-section-line {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent, var(--np-brand));
}

/*  左欄：聯絡資訊  */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg, #fff);
    box-shadow: 0 4px 24px rgba(var(--np-brand-rgb), 0.06);
}
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    background: var(--color-bg, #fff);
    border-bottom: 1px solid var(--color-border, #E5E2DC);
    transition: background 0.2s ease, padding-left 0.25s ease;
}
.contact-info-item:last-child {
    border-bottom: none;
}
.contact-info-item:hover {
    background: linear-gradient(90deg, rgba(var(--np-brand-rgb), 0.05), rgba(var(--np-brand-rgb), 0));
    padding-left: 26px;
}
.contact-info-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.15), rgba(var(--np-brand-rgb), 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent, var(--np-text));
    margin-top: 2px;
    transition: transform 0.25s ease, background 0.25s ease;
}
.contact-info-item:hover .contact-info-icon {
    transform: scale(1.06);
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.25), rgba(var(--np-brand-rgb), 0.1));
}
.contact-info-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
}
.contact-info-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #6B7280);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    text-align: left;
}
.contact-info-value {
    display: block;
    font-size: 15px;
    color: var(--color-text, #1E1E2E);
    font-weight: 500;
    line-height: 1.55;
    text-decoration: none;
    word-break: break-all;
    text-align: left;
}
a.contact-info-value {
    transition: color 0.2s;
}
a.contact-info-value:hover {
    color: var(--color-secondary, var(--np-text));
    text-decoration: none;
}
.contact-tel-link:hover {
    color: var(--color-secondary, var(--np-text));
    text-decoration: underline;
}
.contact-info-sub {
    font-size: 13px;
    color: var(--color-text-muted, #64748B);
    margin-top: 2px;
}

/*  社群按鈕  */
.contact-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.contact-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 24px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.contact-social-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.contact-social-fb   { background: #1877F2; }
.contact-social-line { background: #06C755; }
.contact-social-ig   { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

/*  右欄：地圖  */
.contact-map-col {
    position: sticky;
    top: 100px;
}
.contact-map-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border, #E5E2DC);
    box-shadow: 0 4px 24px rgba(var(--np-brand-rgb), 0.06);
}
.contact-map-iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}
.contact-map-cta {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}
.contact-map-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 24px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary, var(--np-text));
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.contact-map-cta-btn:hover {
    background: var(--color-accent, var(--np-brand));
    border-color: var(--color-accent, var(--np-brand));
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--np-brand-rgb), 0.28);
}
.contact-map-cta-btn svg { flex-shrink: 0; }
.contact-map-placeholder {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--color-bg-alt, var(--t-paper));
    color: var(--color-text-muted, #6B7280);
    font-size: 14px;
    padding: 40px;
}
.contact-map-placeholder svg {
    opacity: 0.35;
}

/*  RWD  */
@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .contact-map-col { position: static; }
}
@media (max-width: 767px) {
    .contact-main-section { padding: 30px 0 50px; }
    .contact-info-item { padding: 16px 18px; gap: 12px; }
    .contact-info-item:hover { padding-left: 22px; }
    .contact-social-btn { font-size: 13px; padding: 8px 14px; }
    .contact-section-title { font-size: 20px; }
    .contact-map-iframe { height: 320px; }
    .contact-map-cta { justify-content: center; }
}

/* ============================================================
   Identity / 身分證明文件  identity.php
   ============================================================ */
.identity-intro-section {
    background: var(--color-bg-alt, #F0F4F8);
    padding: 60px 0;
	padding-bottom: 0px;
}
.identity-intro-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 36px;
}
.identity-intro-text { flex: 1; }
.identity-intro-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0 0 12px 0;
}
.identity-intro-text p {
    font-size: 15px;
    color: var(--color-text-muted, #64748B);
    line-height: 1.8;
    margin: 0;
}
.identity-intro-cta {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    align-items: center;
}
.identity-list-section { padding: 60px 0; }
.identity-quicknav {
    margin-bottom: 36px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.identity-quicknav-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-muted, #64748B);
    white-space: nowrap;
    padding-top: 4px;
}
.identity-quicknav-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.identity-nav-chip {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--color-primary, var(--np-brand));
    color: var(--color-primary, var(--np-text));
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.identity-nav-chip:hover {
    background: var(--color-primary, var(--np-brand));
    color: #fff;
}
.identity-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.identity-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(var(--np-brand-rgb), 0.06);
    scroll-margin-top: 100px;
}
.identity-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 28px;
    background: var(--color-primary, var(--np-brand));
    color: #fff;
}
.identity-card-icon { flex-shrink: 0; opacity: 0.85; }
.identity-card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}
.identity-card-body { padding: 24px 28px; }
.identity-card-content {
    font-size: 14.5px;
    color: var(--color-text, #1E293B);
    line-height: 1.8;
}
.identity-card-content ol, .identity-card-content ul
{
	padding-left: 15px;
}

.identity-card-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid var(--color-caution, #F59E0B);
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    color: var(--color-text, #1E293B);
    line-height: 1.7;
}
.identity-card-note svg { flex-shrink: 0; color: var(--color-caution, #F59E0B); margin-top: 2px; }
@media (max-width: 767px) {
    .identity-intro-wrap { flex-direction: column; gap: 20px; }
    .identity-intro-cta { flex-wrap: wrap; }
    .identity-intro-section { padding: 40px 0; }
    .identity-list-section { padding: 40px 0; }
    .identity-card-header { padding: 16px 20px; }
    .identity-card-body { padding: 18px 20px; }
}

/* ============================================================
   Members / 本所公證人  members.php
   ============================================================ */
.members-section { padding: 70px 0; }
.member-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(var(--np-brand-rgb), 0.07);
    margin-bottom: 40px;
}
.member-card:last-child { margin-bottom: 0; }
.member-card-pic-col {
    background: var(--color-bg-alt, #F0F4F8);
    display: flex;
    align-items: stretch;
    min-height: 320px;
}
.member-card-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.member-card-pic-placeholder {
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-border, #E2E8F0);
}
.member-card-body { padding: 36px 36px 36px 0; }
.member-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-bg-alt, #F0F4F8);
}
.member-card-name {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-primary, var(--np-text));
    margin: 0;
    font-family: 'Noto Sans TC', sans-serif;
}
.member-card-title-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(var(--np-brand-rgb), 0.1);
    color: var(--color-primary, var(--np-text));
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.member-info-block {
    margin-bottom: 20px;
}
.member-info-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-secondary, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px 0;
}
.member-info-content {
    font-size: 14.5px;
    color: var(--color-text, #1E293B);
    line-height: 1.85;
    padding-left: 20px;
}
.member-card-cta { margin-top: 28px; }
@media (max-width: 991px) {
    .member-card { grid-template-columns: 220px 1fr; gap: 28px; }
}
@media (max-width: 767px) {
    .member-card { grid-template-columns: 1fr; }
    .member-card-pic-col { min-height: 240px; max-height: 300px; }
    .member-card-body { padding: 24px 20px; }
    .members-section { padding: 46px 0; }
    .member-card-name { font-size: 22px; }
}

/* ============================================================
   New-Case / 案件預約  new-case.php
   ============================================================ */
.newcase-section { padding: 70px 0; }
.newcase-wrap {
    max-width: 680px;
    margin: 0 auto;
}
.newcase-intro {
    text-align: center;
    margin-bottom: 40px;
}
.newcase-intro-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: rgba(var(--np-brand-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, var(--np-text));
    margin: 0 auto 18px auto;
}
.newcase-intro-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0 0 10px 0;
}
.newcase-intro-desc {
    font-size: 14.5px;
    color: var(--color-text-muted, #64748B);
    line-height: 1.8;
    margin: 0;
}
.newcase-form-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 16px;
    padding: 40px 44px;
    box-shadow: 0 4px 32px rgba(var(--np-brand-rgb), 0.07);
}
.newcase-field { margin-bottom: 24px; }
.newcase-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text, #1E293B);
    margin-bottom: 8px;
}
.newcase-label.required::after {
    content: '*';
    color: #EF4444;
    margin-left: 2px;
}
.newcase-dx-field { width: 100%; }
.newcase-captcha-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: end;
}
.newcase-captcha-img {
    display: block;
    border-radius: 6px;
    border: 1px solid var(--color-border, #E2E8F0);
    height: 42px;
}
.newcase-captcha-img-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.newcase-captcha-refresh {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-secondary, var(--np-text));
    text-decoration: none;
}
.newcase-captcha-refresh:hover { text-decoration: underline; }
.newcase-validation-summary { margin-bottom: 12px; }
.newcase-submit-row { margin-top: 8px; }
.newcase-submit-btn { width: 100%; }
@media (max-width: 767px) {
    .newcase-form-card { padding: 28px 22px; }
    .newcase-section { padding: 46px 0; }
    .newcase-captcha-row { grid-template-columns: 1fr; }
}
/* ============================================================
   cancel-case.php  取消案件預約
   ============================================================ */
.cancelcase-section {
    padding: 60px 0 80px;
    background: var(--color-bg-alt, #F0F4F8);
}
.cancelcase-wrap {
    max-width: 660px;
    margin: 0 auto;
}
.cancelcase-intro {
    text-align: center;
    margin-bottom: 32px;
}
.cancelcase-intro-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-primary, var(--np-brand));
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.cancelcase-intro-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin-bottom: 8px;
}
.cancelcase-intro-desc {
    font-size: 0.97rem;
    color: var(--color-text-muted, #64748B);
}
.cancelcase-form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(var(--np-brand-rgb),0.08);
    padding: 40px 36px;
}
.cancelcase-field {
    margin-bottom: 24px;
}
.cancelcase-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #1E293B);
    margin-bottom: 8px;
}
.cancelcase-required {
    color: #E53E3E;
    margin-right: 3px;
}
.cancelcase-dx-field {
    width: 100%;
}
.cancelcase-captcha-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.cancelcase-captcha-img img {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--color-border, #E2E8F0);
    display: block;
    margin-bottom: 6px;
}
.cancelcase-captcha-refresh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-secondary, var(--np-text));
    text-decoration: none;
}
.cancelcase-captcha-refresh:hover { text-decoration: underline; }
.cancelcase-validation-summary { margin-bottom: 12px; }
.cancelcase-submit-btn { width: 100%; }
.cancelcase-submit-row { margin-top: 8px; }
@media (max-width: 767px) {
    .cancelcase-form-card { padding: 28px 20px; }
    .cancelcase-section { padding: 40px 0; }
    .cancelcase-captcha-row { grid-template-columns: 1fr; }
}

/* ============================================================
   case-amt-cal.php  公認證費用試算機
   ============================================================ */

/* Banner 右側裝飾：計算機浮水印 icon（此頁獨有） */
.feecal-banner .container { position: relative; }
.feecal-banner-deco {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    color: rgba(255, 255, 255, 0.12);
    pointer-events: none;
    display: inline-flex;
}
.feecal-banner-deco svg { width: 100%; height: 100%; }
@media (max-width: 767px) {
    .feecal-banner-deco { width: 96px; height: 96px; right: 16px; opacity: 0.7; }
}


/* ── 試算工作區（左側步驟 + 右側計算機卡） ── */
.feecal-workspace-section {
    padding: 20px 0 70px;
    background: var(--color-bg-alt, var(--t-paper));
}
.feecal-workspace-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: start;
}

/* 左側步驟欄（桌機 sticky 貼上，避免右側主卡捲動時空白太久） */
.feecal-steps-col {
    position: sticky;
    top: 110px;
}

/* 左欄標題區：卡片化 + 金邊左柱設計 */
.feecal-steps-head {
    position: relative;
    padding: 22px 22px 22px 28px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.04), rgba(var(--np-brand-rgb), 0.03));
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 12px;
    overflow: hidden;
}
/* 左側金色裝飾柱 */
.feecal-steps-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-accent, var(--np-brand));
}
/* 右下角大型半透明 Cormorant 數字 */
.feecal-steps-head::after {
    content: '3';
    position: absolute;
    right: 14px;
    bottom: -10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 82px;
    font-weight: 600;
    color: rgba(var(--np-text-rgb), 0.12);
    line-height: 1;
    pointer-events: none;
}
.feecal-steps-en {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}
.feecal-steps-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0 0 10px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}
.feecal-steps-goldline {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent, var(--np-brand));
    position: relative;
    z-index: 1;
}

.feecal-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
/* 步驟之間的金色連接線（裝飾線） */
.feecal-steps-list::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 40px;
    bottom: 40px;
    width: 1px;
    background: repeating-linear-gradient(to bottom, rgba(var(--np-brand-rgb), 0.45) 0, rgba(var(--np-brand-rgb), 0.45) 4px, transparent 4px, transparent 10px);
    pointer-events: none;
    z-index: 0;
}
.feecal-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 10px;
    z-index: 1;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.feecal-step:hover {
    border-color: var(--color-accent, var(--np-brand));
    box-shadow: 0 6px 20px rgba(var(--np-brand-rgb), 0.08);
    transform: translateX(4px);
}
.feecal-step-num {
    flex-shrink: 0;
    width: 30px;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    line-height: 1;
}
.feecal-step-body { min-width: 0; }
.feecal-step-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0 0 4px;
    line-height: 1.3;
}
.feecal-step-desc {
    font-size: 13px;
    color: var(--color-text-muted, #6B7280);
    line-height: 1.6;
    margin: 0;
}

/* 試算機主卡（右欄） */
.feecal-calc-wrap {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(var(--np-brand-rgb), 0.08);
    overflow: hidden;
    position: relative;
}
/* 卡片頂端金色細線 */
.feecal-calc-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--np-brand) 30%, var(--np-brand) 70%, transparent);
}

/* 主卡標題區：左側 icon 徽章 + 中央主標 + 右側 ribbon 英文 */
.feecal-calc-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 32px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FBF8F1 100%);
    border-bottom: 1px solid var(--color-border, #E5E2DC);
    color: var(--color-text, #1E1E2E);
}
/* 底部裝飾金線（replacing 舊的 center gold-line） */
.feecal-calc-header::after {
    content: '';
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--np-brand-rgb), 0.55) 25%, rgba(var(--np-brand-rgb), 0.55) 75%, transparent);
}
/* icon 徽章 */
.feecal-calc-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0;
    flex: 1;
    min-width: 0;
}
.feecal-calc-title svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 10px;
    box-sizing: content-box;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.18), rgba(var(--np-brand-rgb), 0.06));
    color: var(--color-accent, var(--np-text));
}
/* 主標題下方中文 */
.feecal-calc-title > span { line-height: 1.2; }

/* 右側 Cormorant ribbon */
.feecal-calc-ribbon {
    flex-shrink: 0;
    display: inline-block;
    padding: 6px 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.22em;
    border: 1px solid rgba(var(--np-brand-rgb), 0.4);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* 原舊的 .feecal-calc-gold-line 不再顯示（改由 ::after 底線裝飾） */
.feecal-calc-gold-line { display: none; }

.feecal-calc-body {
    padding: 32px 40px 28px;
}
.feecal-field {
    margin-bottom: 22px;
}
.feecal-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #1E1E2E);
    margin-bottom: 10px;
}
.feecal-label-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--np-brand-rgb), 0.12);
    color: var(--color-accent, var(--np-text));
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.feecal-dx-field {
    width: 100%;
}

/* 結果區：金色細框 + 大數字 */
.feecal-result-row {
    position: relative;
    margin-top: 16px;
    padding: 22px 24px 16px;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.06), rgba(var(--np-brand-rgb), 0.02));
    border: 1px solid rgba(var(--np-brand-rgb), 0.35);
    border-radius: 12px;
}
.feecal-result-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}
.feecal-result-en {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.feecal-result-label {
    display: block;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
}
.feecal-result-field {
    margin-bottom: 10px;
}
/* DevExtreme NumberBox 放大數字字級（結果欄位） */
.feecal-result-field .dx-texteditor-input {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 22px !important;
    font-weight: 700;
    color: var(--color-primary, var(--np-text)) !important;
    letter-spacing: 0.02em;
}
.feecal-result-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted, #6B7280);
    margin: 0;
}
.feecal-result-note svg { color: var(--color-accent, var(--np-text)); flex-shrink: 0; }

/* 響應式：平板改單欄（步驟列橫向壓扁），手機再收成 stack */
@media (max-width: 991px) {
    .feecal-workspace-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 720px;
    }
    .feecal-steps-col { position: static; }
    .feecal-steps-head { text-align: center; padding-bottom: 10px; }
    .feecal-steps-goldline { margin: 0 auto; }

    /* 平板版步驟改橫向 3 欄（無連接線） */
    .feecal-steps-list {
        flex-direction: row;
        gap: 10px;
    }
    .feecal-steps-list::before { display: none; }
    .feecal-step {
        flex: 1 1 0;
        min-width: 0;
    }
    .feecal-step:hover { transform: translateY(-2px); }
}
@media (max-width: 767px) {
    .feecal-workspace-section { padding: 10px 0 50px; }
    .feecal-steps-list { flex-direction: column; gap: 10px; }
    .feecal-steps-title { font-size: 19px; }
    .feecal-steps-head { padding: 18px 18px 18px 24px; }
    .feecal-steps-head::after { font-size: 68px; right: 10px; }

    .feecal-calc-header {
        padding: 20px 22px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .feecal-calc-header::after { left: 22px; right: 22px; }
    .feecal-calc-title { font-size: 20px; gap: 10px; }
    .feecal-calc-title svg { padding: 8px; width: 20px; height: 20px; }
    .feecal-calc-ribbon { font-size: 11px; padding: 4px 10px; letter-spacing: 0.18em; }
    .feecal-calc-body { padding: 24px 22px; }
    .feecal-result-field .dx-texteditor-input { font-size: 19px !important; }
}

/* ============================================================
   case-member.php  請求人基本資料
   ============================================================ */
.casemember-section {
    padding: 56px 0 80px;
    background: var(--color-bg-alt, #F0F4F8);
}
.casemember-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--color-secondary, var(--np-text));
}
.casemember-notice i { margin-top: 2px; flex-shrink: 0; }
.casemember-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.btn-casemember-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--color-primary, var(--np-brand));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.btn-casemember-action:hover { background: var(--color-secondary, var(--np-brand)); color: #fff; transform: translateY(-2px); }
.casemember-form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(var(--np-brand-rgb),0.08);
    overflow: hidden;
}
.casemember-form-header {
    background: var(--color-primary, var(--np-brand));
    color: #fff;
    padding: 32px 40px 28px;
    text-align: center;
}
.casemember-form-icon {
    font-size: 2.4rem;
    opacity: 0.9;
    margin-bottom: 12px;
    display: block;
}
.casemember-form-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.casemember-form-desc {
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 0;
    line-height: 1.7;
}
.casemember-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    background: var(--color-bg-alt, #F0F4F8);
    padding: 10px 40px;
    margin: 0 0 2px;
    border-top: 1px solid var(--color-border, #E2E8F0);
}
.casemember-field {
    padding: 14px 40px;
    border-bottom: 1px solid var(--color-border, #E2E8F0);
}
.casemember-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text, #1E293B);
    margin-bottom: 8px;
}
.casemember-required {
    color: #E53E3E;
    margin-right: 3px;
}
.casemember-dx-field { width: 100%; }
.casemember-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.casemember-date-row .dSelect { flex: 1; min-width: 80px; }
.casemember-date-sep {
    font-size: 0.9rem;
    color: var(--color-text-muted, #64748B);
    flex-shrink: 0;
}
.casemember-validation-summary { margin-bottom: 12px; }
.casemember-submit-row {
    padding: 24px 40px 8px;
}
.casemember-submit-btn { width: 100%; }
.casemember-finish-row {
    padding: 16px 40px 32px;
    text-align: center;
}
.btn-casemember-finish {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--color-success, #10B981);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.btn-casemember-finish:hover { background: #059669; transform: translateY(-2px); }
.casemember-finish-note {
    font-size: 0.8rem;
    opacity: 0.85;
}
.casemember-member-list { min-height: 60px; }
.casemember-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border, #E2E8F0);
}
.casemember-member-item:last-child { border-bottom: none; }
.casemember-member-name { font-weight: 600; color: var(--color-text, #1E293B); }
.casemember-member-idno { font-size: 0.85rem; color: var(--color-text-muted, #64748B); }
.casemember-share-block {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.casemember-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.2s;
}
.casemember-share-btn:hover { opacity: 0.85; }
.casemember-share-line img { height: 36px; display: block; }
.casemember-qrcode-block { text-align: center; }
.casemember-qrcode-img {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    border: 2px solid var(--color-border, #E2E8F0);
    display: block;
    margin: 0 auto 10px;
}
.casemember-qrcode-hint {
    font-size: 0.82rem;
    color: var(--color-text-muted, #64748B);
    margin: 0;
}
@media (max-width: 991px) {
    .casemember-group-label,
    .casemember-field { padding-left: 24px; padding-right: 24px; }
    .casemember-form-header { padding: 24px 24px 20px; }
    .casemember-submit-row { padding: 20px 24px 8px; }
    .casemember-finish-row { padding: 12px 24px 28px; }
}
@media (max-width: 767px) {
    .casemember-section { padding: 36px 0 60px; }
    .casemember-action-bar { flex-direction: column; }
    .btn-casemember-action { justify-content: center; }
    .casemember-date-row { gap: 4px; }
    .btn-casemember-finish { width: 100%; justify-content: center; }
}


/* ================================================================
   PHASE 10 — links.php（相關連結）
   ================================================================ */
.links-section { background: var(--color-bg, #fff); }

/* 分組容器（卡片化） */
.links-group {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(var(--np-brand-rgb), 0.04);
}

/* 分組標題 */
.links-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border, #E5E2DC);
    margin: 0 0 10px;
}
.links-group-icon {
    display: inline-flex;
    color: var(--color-accent, var(--np-text));
    flex-shrink: 0;
}
.links-group-count {
    margin-left: auto;
    padding: 3px 10px;
    background: var(--color-bg-alt, var(--t-paper));
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted, #6B7280);
    letter-spacing: 0.03em;
}

/* 清單 */
.links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.links-item {
    border-bottom: 1px dashed var(--color-border, #E5E2DC);
}
.links-item:last-child { border-bottom: none; }

/* 連結項目（列） */
.links-anchor {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 6px;
    color: var(--color-text, #1E1E2E);
    text-decoration: none;
    transition: background 0.2s, padding-left 0.25s;
    border-radius: 6px;
}
.links-anchor:hover {
    background: linear-gradient(90deg, rgba(var(--np-brand-rgb), 0.05), rgba(var(--np-brand-rgb), 0));
    padding-left: 12px;
    text-decoration: none;
}

/* 項目文字區（名稱 + 域名） */
.links-anchor-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.links-anchor-name {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #1E1E2E);
    line-height: 1.4;
    transition: color 0.2s;
}
.links-anchor:hover .links-anchor-name {
    color: var(--color-primary, var(--np-text));
}
.links-anchor-host {
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    font-size: 12px;
    color: var(--color-text-muted, #6B7280);
    letter-spacing: 0.02em;
    word-break: break-all;
}

/* 外部連結 icon */
.links-anchor-external {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-bg-alt, var(--t-paper));
    color: var(--color-text-muted, #9CA3AF);
    transition: background 0.25s, color 0.25s, transform 0.25s;
}
.links-anchor:hover .links-anchor-external {
    background: var(--color-accent, var(--np-brand));
    color: #fff;
    transform: translate(2px, -2px);
}

/* 響應式 */
@media (max-width: 575px) {
    .links-group { padding: 20px 18px; }
    .links-group-title { font-size: 16px; flex-wrap: wrap; }
    .links-group-count { margin-left: 0; }
    .links-anchor { gap: 10px; padding: 14px 4px; }
    .links-anchor:hover { padding-left: 4px; }
    .links-anchor-external { width: 30px; height: 30px; }
}

/* ================================================================
   PHASE 10 — filedownload.php（檔案下載）
   ================================================================ */
.filedownload-section { background: var(--color-bg, #fff); }

/* 分組容器（卡片化） */
.filedownload-group {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 12px;
	padding: 24px 28px;
	margin-bottom: 24px;
	box-shadow: 0 2px 12px rgba(var(--np-brand-rgb), 0.04);
}

/* 分組標題 */
.filedownload-group-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary, var(--np-text));
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-border, #E5E2DC);
	margin: 0 0 8px;
}
.filedownload-group-icon {
	display: inline-flex;
	color: var(--color-accent, var(--np-text));
	flex-shrink: 0;
}
.filedownload-group-count {
	margin-left: auto;
	padding: 3px 10px;
	background: var(--color-bg-alt, var(--t-paper));
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-muted, #6B7280);
	letter-spacing: 0.03em;
}

/* 清單 */
.filedownload-list { list-style: none; padding: 0; margin: 0; }

/* 單筆檔案 */
.filedownload-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 4px;
	border-bottom: 1px dashed var(--color-border, #E5E2DC);
	transition: background 0.2s, padding 0.2s;
}
.filedownload-item:last-child { border-bottom: none; }
.filedownload-item:hover {
	background: linear-gradient(90deg, rgba(var(--np-brand-rgb), 0.05), rgba(var(--np-brand-rgb), 0));
	padding-left: 10px;
}

/* 副檔名徽章 */
.filedownload-ext-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 4px 10px;
	border-radius: 4px;
	font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	flex-shrink: 0;
}
.fdi-pdf   { background: #E53E3E; }
.fdi-word  { background: #2B6CB0; }
.fdi-excel { background: #276749; }
.fdi-ppt   { background: #D97706; }
.fdi-image { background: #805AD5; }
.fdi-zip   { background: #4A5568; }
.fdi-other { background: #718096; }

/* 檔名 */
.filedownload-item-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 15px;
	color: var(--color-text, #1E1E2E);
}

/* 下載按鈕 */
.btn-filedownload {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-primary, var(--np-brand));
	color: #fff;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	flex-shrink: 0;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-filedownload:hover {
	background: var(--color-secondary, var(--np-brand));
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(var(--np-brand-rgb), 0.2);
}

/* 找不到文件？CTA 區 */
.filedownload-cta-block {
	margin-top: 40px;
	background: var(--color-bg-alt, var(--t-paper));
	border: 1px solid var(--color-border, #E5E2DC);
	border-radius: 12px;
	padding: 32px 28px;
	text-align: center;
}
.filedownload-cta-text {
	color: var(--color-text-muted, #6B7280);
	font-size: 15px;
	margin: 0 0 18px;
}
.btn-filedownload-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--color-primary, var(--np-brand));
	color: #fff;
	padding: 12px 28px;
	border-radius: 24px;
	text-decoration: none;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 600;
	font-size: 15px;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-filedownload-cta:hover {
	background: var(--color-accent, var(--np-brand));
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(var(--np-brand-rgb), 0.3);
}

/* 響應式：手機版 */
@media (max-width: 575px) {
	.filedownload-group { padding: 20px 18px; }
	.filedownload-group-title { font-size: 16px; flex-wrap: wrap; }
	.filedownload-group-count { margin-left: 0; }
	.filedownload-item { flex-wrap: wrap; gap: 10px; padding: 14px 4px; }
	.filedownload-item-name { width: 100%; order: 3; white-space: normal; }
	.filedownload-item:hover { padding-left: 4px; }
	.btn-filedownload { margin-left: auto; }
	.filedownload-cta-block { padding: 24px 18px; }
}

/* ═══════════════════════════════════════════════════════
   rent-withholding-calc.php ── 租金扣繳計算機
   ═══════════════════════════════════════════════════════ */

/* Banner 右側裝飾：折線圖 icon（此頁獨有） */
.rwcalc-banner .container { position: relative; }
.rwcalc-banner-deco {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    color: rgba(255, 255, 255, 0.12);
    pointer-events: none;
    display: inline-flex;
}
.rwcalc-banner-deco svg { width: 100%; height: 100%; }
@media (max-width: 767px) {
    .rwcalc-banner-deco { width: 96px; height: 96px; right: 16px; opacity: 0.7; }
}


/* ── 試算工作區（左步驟 + 右主卡） ── */
.rwcalc-workspace-section {
    padding: 20px 0 70px;
    background: var(--color-bg-alt, var(--t-paper));
}
.rwcalc-workspace-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: start;
}

/* 左欄 sticky */
.rwcalc-steps-col {
    position: sticky;
    top: 110px;
}
.rwcalc-steps-head {
    position: relative;
    padding: 22px 22px 22px 28px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.04), rgba(var(--np-brand-rgb), 0.03));
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 12px;
    overflow: hidden;
}
.rwcalc-steps-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-accent, var(--np-brand));
}
.rwcalc-steps-head::after {
    content: '4';
    position: absolute;
    right: 14px;
    bottom: -10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 82px;
    font-weight: 600;
    color: rgba(var(--np-text-rgb), 0.12);
    line-height: 1;
    pointer-events: none;
}
.rwcalc-steps-en {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}
.rwcalc-steps-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0 0 10px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}
.rwcalc-steps-goldline {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent, var(--np-brand));
    position: relative;
    z-index: 1;
}

/* 左欄步驟列表（虛線金色連接線） */
.rwcalc-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.rwcalc-steps-list::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 36px;
    bottom: 36px;
    width: 1px;
    background: repeating-linear-gradient(to bottom, rgba(var(--np-brand-rgb), 0.45) 0, rgba(var(--np-brand-rgb), 0.45) 4px, transparent 4px, transparent 10px);
    pointer-events: none;
    z-index: 0;
}
.rwcalc-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 10px;
    z-index: 1;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.rwcalc-step:hover {
    border-color: var(--color-accent, var(--np-brand));
    box-shadow: 0 6px 20px rgba(var(--np-brand-rgb), 0.08);
    transform: translateX(4px);
}
.rwcalc-step--highlight {
    border-color: rgba(var(--np-brand-rgb), 0.45);
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.06), rgba(var(--np-brand-rgb), 0.02));
}
.rwcalc-step-num {
    flex-shrink: 0;
    width: 30px;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    line-height: 1;
}
.rwcalc-step-body { min-width: 0; }
.rwcalc-step-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0 0 4px;
    line-height: 1.3;
}
.rwcalc-step-desc {
    font-size: 12.5px;
    color: var(--color-text-muted, #6B7280);
    line-height: 1.55;
    margin: 0;
}

/* 主卡 wrap */
.rwcalc-calc-wrap {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(var(--np-brand-rgb), 0.08);
    overflow: hidden;
    position: relative;
}
.rwcalc-calc-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--np-brand) 30%, var(--np-brand) 70%, transparent);
}

/* 主卡標題列 */
.rwcalc-calc-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 32px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FBF8F1 100%);
    border-bottom: 1px solid var(--color-border, #E5E2DC);
    color: var(--color-text, #1E1E2E);
}
.rwcalc-calc-header::after {
    content: '';
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--np-brand-rgb), 0.55) 25%, rgba(var(--np-brand-rgb), 0.55) 75%, transparent);
}
.rwcalc-calc-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0;
    flex: 1;
    min-width: 0;
}
.rwcalc-calc-title svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 10px;
    box-sizing: content-box;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.18), rgba(var(--np-brand-rgb), 0.06));
    color: var(--color-accent, var(--np-text));
}
.rwcalc-calc-title > span { line-height: 1.2; }
.rwcalc-calc-ribbon {
    flex-shrink: 0;
    display: inline-block;
    padding: 6px 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.22em;
    border: 1px solid rgba(var(--np-brand-rgb), 0.4);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* 主卡 body */
.rwcalc-calc-body { padding: 28px 32px; }

/* 欄位群組 */
.rwcalc-field-group { margin-bottom: 18px; }
.rwcalc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #1E1E2E);
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.rwcalc-label-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--np-brand-rgb), 0.12);
    color: var(--color-accent, var(--np-text));
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.rwcalc-form-unit {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text-muted, #6B7280);
    background: var(--color-bg-alt, var(--t-paper));
    border-radius: 4px;
    padding: 2px 7px;
}

/* 租金輸入 */
.rwcalc-rent-row {
    display: flex;
    align-items: center;
    max-width: 320px;
    margin-left: 30px;
}
.rwcalc-rent-row .input-group {
    display: flex;
    width: 100%;
}
.rwcalc-input-prefix {
    background: var(--color-bg-alt, var(--t-paper));
    border: 1px solid var(--color-border, #E5E2DC);
    border-right: none;
    padding: 10px 14px;
    border-radius: 8px 0 0 8px;
    font-size: 16px;
    color: var(--color-accent, var(--np-text));
    font-weight: 700;
    font-family: 'Cormorant Garamond', serif;
}
.rwcalc-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border, #E5E2DC);
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #1E1E2E);
    border-radius: 0 8px 8px 0;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.rwcalc-input:focus {
    border-color: var(--color-accent, var(--np-brand));
    box-shadow: 0 0 0 3px rgba(var(--np-brand-rgb), 0.12);
}

/* 含稅/未含稅切換 */
.rwcalc-tax-mode-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 0 30px;
}
.rwcalc-tax-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-muted, #6B7280);
    cursor: pointer;
    transition: all 0.22s;
    margin: 0;
}
.rwcalc-tax-mode-option:hover {
    border-color: var(--color-accent, var(--np-brand));
    color: var(--color-primary, var(--np-text));
}
.rwcalc-tax-mode-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border, #E5E2DC);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
}
.rwcalc-tax-mode-option input[type="radio"]:checked {
    border-color: var(--color-accent, var(--np-brand));
}
.rwcalc-tax-mode-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-accent, var(--np-brand));
}
.rwcalc-tax-mode-option:has(input:checked) {
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.08), rgba(var(--np-brand-rgb), 0.02));
    border-color: var(--color-accent, var(--np-brand));
    color: var(--color-primary, var(--np-text));
    font-weight: 600;
}

/* 分隔線 */
.rwcalc-form-divider {
    border: none;
    border-top: 1px dashed var(--color-border, #E5E2DC);
    margin: 22px 0;
}

/* 房東列表容器 */
.rwcalc-landlord-container {
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 10px;
    overflow: hidden;
    margin-left: 30px;
}
.rwcalc-landlord-header {
    display: grid;
    grid-template-columns: 0.7fr 1.4fr 1fr auto;
    gap: 12px;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.04), rgba(var(--np-brand-rgb), 0.03));
    padding: 10px 16px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted, #6B7280);
    border-bottom: 1px solid var(--color-border, #E5E2DC);
    letter-spacing: 0.04em;
}
.rwcalc-landlord-row {
    display: grid;
    grid-template-columns: 0.7fr 1.4fr 1fr auto;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border, #E5E2DC);
    align-items: flex-start;
    background: var(--color-bg, #fff);
    transition: background 0.2s;
}
.rwcalc-landlord-row:hover { background: rgba(var(--np-brand-rgb), 0.02); }
.rwcalc-landlord-row:last-of-type { border-bottom: none; }
.rwcalc-landlord-name {
    display: flex;
    align-items: center;
    padding-top: 6px;
}
.rwcalc-landlord-name .nameLabel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(var(--np-brand-rgb), 0.08);
    color: var(--color-primary, var(--np-text));
    font-size: 12.5px;
    font-weight: 700;
}
.rwcalc-landlord-identity .nationalitySelect {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 8px;
    font-size: 14px;
    color: var(--color-text, #1E1E2E);
    outline: none;
    background: var(--color-bg, #fff);
    transition: border-color 0.2s;
    cursor: pointer;
}
.rwcalc-landlord-identity .nationalitySelect:focus {
    border-color: var(--color-accent, var(--np-brand));
    box-shadow: 0 0 0 3px rgba(var(--np-brand-rgb), 0.1);
}
.rwcalc-landlord-equity .input-group {
    display: flex;
}
.rwcalc-landlord-equity .equityNum {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #E5E2DC);
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    text-align: right;
}
.rwcalc-landlord-equity .equityNum:focus {
    border-color: var(--color-accent, var(--np-brand));
    box-shadow: 0 0 0 3px rgba(var(--np-brand-rgb), 0.1);
}
.rwcalc-landlord-equity .input-group-text {
    padding: 8px 12px;
    border: 1px solid var(--color-border, #E5E2DC);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: var(--color-bg-alt, var(--t-paper));
    font-size: 13px;
    color: var(--color-text-muted, #6B7280);
    font-weight: 600;
}
.rwcalc-landlord-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 4px;
}

/* 外籍勾選區 */
.rwcalc-foreign-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.rwcalc-check-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--color-text, #1E1E2E);
    cursor: pointer;
    margin: 0;
    transition: background 0.2s;
}
.rwcalc-check-opt:hover { background: rgba(var(--np-brand-rgb), 0.05); }
.rwcalc-check-opt input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border, #E5E2DC);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
    margin: 0;
}
.rwcalc-check-opt input[type="checkbox"]:checked {
    background: var(--color-accent, var(--np-brand));
    border-color: var(--color-accent, var(--np-brand));
}
.rwcalc-check-opt input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px; left: 4px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.rwcalc-field-label {
    font-size: 12.5px;
    color: var(--color-text-muted, #6B7280);
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

/* 新增 / 刪除按鈕 */
.rwcalc-landlord-footer {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.02), rgba(var(--np-brand-rgb), 0.02));
}
.btn-rwcalc-add-landlord {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px dashed var(--color-accent, var(--np-brand));
    color: var(--color-accent, var(--np-text));
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-rwcalc-add-landlord:hover {
    background: var(--color-accent, var(--np-brand));
    color: #fff;
    border-style: solid;
}
.btn-rwcalc-remove {
    background: transparent;
    border: 1px solid #E5E2DC;
    color: #9CA3AF;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.btn-rwcalc-remove:hover {
    background: #FEF2F2;
    border-color: #E53E3E;
    color: #E53E3E;
}

/* 結果區（金框 + 房東卡列表） */
.rwcalc-result-row {
    position: relative;
    margin-top: 16px;
    padding: 22px 24px 16px;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.08), rgba(var(--np-brand-rgb), 0.02));
    border: 1px solid rgba(var(--np-brand-rgb), 0.4);
    border-radius: 12px;
}
.rwcalc-result-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.rwcalc-result-en {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.rwcalc-result-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
}
.rwcalc-result-label svg { color: var(--color-accent, var(--np-text)); flex-shrink: 0; }
.rwcalc-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rwcalc-result-item {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 10px;
    padding: 16px 18px;
}
.rwcalc-result-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(var(--np-brand-rgb), 0.08);
    color: var(--color-primary, var(--np-text));
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}
.rwcalc-result-detail { list-style: none; padding: 0; margin: 0; }
.rwcalc-result-detail li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 13.5px;
    border-bottom: 1px dashed var(--color-border, #E5E2DC);
    gap: 14px;
}
.rwcalc-result-detail li:last-child { border-bottom: none; }
.rwcalc-result-detail label {
    color: var(--color-text-muted, #6B7280);
    font-weight: 500;
    margin: 0;
    flex: 1;
    min-width: 0;
}
.rwcalc-result-detail > li > div {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    font-size: 14.5px;
    flex-shrink: 0;
}
.rwcalc-result-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted, #6B7280);
    margin: 14px 0 0;
}
.rwcalc-result-note svg { color: var(--color-accent, var(--np-text)); flex-shrink: 0; }


/* ── 計算說明卡 ── */
.rwcalc-note-section { padding: 20px 0 70px; }

.rwcalc-note-head {
    text-align: center;
    margin-bottom: 28px;
}
.rwcalc-note-en {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent, var(--np-text));
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 8px;
}
.rwcalc-note-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary, var(--np-text));
    margin: 0 0 12px;
    line-height: 1.3;
}
.rwcalc-note-goldline {
    width: 44px;
    height: 3px;
    margin: 0 auto 14px;
    border-radius: 2px;
    background: var(--color-accent, var(--np-brand));
}
.rwcalc-note-desc {
    font-size: 14.5px;
    color: var(--color-text-muted, #6B7280);
    margin: 0;
}
.rwcalc-note-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E2DC);
    border-radius: 16px;
    padding: 28px 32px 22px;
    box-shadow: 0 8px 28px rgba(var(--np-brand-rgb), 0.06);
    position: relative;
    overflow: hidden;
}
.rwcalc-note-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--np-brand) 30%, var(--np-brand) 70%, transparent);
}
.rwcalc-note-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rwcalc-note-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--color-text, #1E1E2E);
    line-height: 1.7;
}
.rwcalc-note-list strong {
    color: var(--color-accent, var(--np-text));
    font-weight: 700;
}
.rwcalc-note-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Noto Sans TC', sans-serif;
    flex-shrink: 0;
}
.rwcalc-note-tag--blue   { background: rgba(var(--np-brand-rgb), 0.1);  color: var(--np-text); }
.rwcalc-note-tag--orange { background: rgba(230, 104, 60, 0.12); color: #C2410C; }
.rwcalc-note-tag--green  { background: rgba(22, 163, 74, 0.12); color: #15803D; }
.rwcalc-note-tag--gold   { background: rgba(var(--np-brand-rgb), 0.14); color: #B08437; }
.rwcalc-note-disclaimer {
    font-size: 13px;
    color: var(--color-text-muted, #6B7280);
    border-top: 1px dashed var(--color-border, #E5E2DC);
    padding-top: 14px;
    margin: 0;
    line-height: 1.7;
}


/* ── RWD ── */
@media (max-width: 991px) {
    .rwcalc-workspace-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .rwcalc-steps-col { position: static; }
    .rwcalc-steps-head { text-align: center; padding: 20px 22px; }
    .rwcalc-steps-head::before { display: none; }
    .rwcalc-steps-head::after { font-size: 68px; right: 10px; }
    .rwcalc-steps-goldline { margin: 0 auto; }

    .rwcalc-steps-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .rwcalc-steps-list::before { display: none; }
    .rwcalc-step {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }
    .rwcalc-step:hover { transform: translateY(-2px); }
}
@media (max-width: 767px) {
    .rwcalc-workspace-section { padding: 10px 0 50px; }
    .rwcalc-steps-list { flex-direction: column; }
    .rwcalc-step { flex: 1 1 auto; }
    .rwcalc-steps-title { font-size: 19px; }

    .rwcalc-calc-header {
        padding: 20px 22px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .rwcalc-calc-header::after { left: 22px; right: 22px; }
    .rwcalc-calc-title { font-size: 20px; gap: 10px; }
    .rwcalc-calc-title svg { padding: 8px; width: 20px; height: 20px; }
    .rwcalc-calc-ribbon { font-size: 11px; padding: 4px 10px; letter-spacing: 0.18em; }
    .rwcalc-calc-body { padding: 22px 20px; }

    .rwcalc-rent-row,
    .rwcalc-tax-mode-row,
    .rwcalc-landlord-container { margin-left: 0; }

    /* 房東列改為堆疊 */
    .rwcalc-landlord-header { display: none !important; }
    .rwcalc-landlord-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .rwcalc-landlord-action { justify-content: flex-start; }

    .rwcalc-result-row { padding: 18px 18px 14px; }
    .rwcalc-note-title { font-size: 22px; }
    .rwcalc-note-card { padding: 20px 18px 16px; }
    .rwcalc-note-list li { font-size: 14px; }
}

/* ================================================================
   PHASE 10 — albums.php（活動相簿列表）
   ================================================================ */
.albums-section { padding: 56px 0 80px; }
.albums-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #EFF6FF;
    border-radius: 8px;
    font-size: 0.9rem;
}
.albums-filter-label { font-weight: 600; color: var(--color-primary, var(--np-text)); }
.albums-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-primary, var(--np-brand));
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.83rem;
    text-decoration: none;
    transition: background 0.2s;
}
.albums-filter-tag:hover { background: #E53E3E; color: #fff; }
.albums-grid { margin-bottom: 32px; display: flex; flex-wrap: wrap; }   /* 260720_10:BS3 float 格線致卡片不等高時換行卡住 → 改 flex 使同列等高(.albums-card 本就 height:100%) */
.albums-card-col { margin-bottom: 24px; }
.albums-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border, #E5E2DC);
    box-shadow: 0 4px 20px rgba(var(--np-brand-rgb),0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.albums-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(var(--np-brand-rgb),0.14);
}
.albums-card-img-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--color-bg-alt, var(--t-paper));
}
.albums-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.albums-card:hover .albums-card-img { transform: scale(1.04); }
.albums-card-body {
    padding: 16px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.albums-card-title-link { text-decoration: none; }
.albums-card-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--color-text, #1E1E2E);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.albums-card-title-link:hover .albums-card-title { color: var(--color-active, var(--np-text)); }
.albums-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: auto;
}
.albums-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--color-text-muted, #6B7280);
}
.albums-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--color-text-muted, #6B7280);
}
.albums-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}
.albums-total-count { font-size: 0.88rem; color: var(--color-text-muted, #6B7280); margin: 0; }
@media (max-width: 575px) {
    .albums-pagination-bar { justify-content: center; }
    .albums-total-count { width: 100%; text-align: center; }
}

/* ================================================================
   PHASE 10 — album-detail.php（活動相簿詳細）
   ================================================================ */
.album-detail-section { padding: 56px 0 80px; }
.album-detail-banner-title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}
.album-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #E5E2DC);
}
.album-detail-meta-date,
.album-detail-meta-author,
.album-detail-meta-cat,
.album-detail-meta-count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88rem;
    color: var(--color-text-muted, #6B7280);
}
.album-detail-note {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text, #1E1E2E);
    margin-bottom: 24px;
    padding: 16px 18px;
    background: var(--color-bg-alt, var(--t-paper));
    border-radius: 8px;
}
.album-detail-photos-grid { margin-bottom: 24px; }
.album-detail-photo-col { margin-bottom: 14px; }
.album-detail-photo-link {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1;
    background: var(--color-bg-alt, var(--t-paper));
    border: 1px solid var(--color-border, #E5E2DC);
}
.album-detail-photo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s, opacity 0.2s;
}
.album-detail-photo-link:hover .album-detail-photo-thumb {
    transform: scale(1.06);
    opacity: 0.9;
}
.album-detail-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--color-text-muted, #6B7280);
}
.album-detail-back-row { margin-top: 32px; }
.btn-album-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px solid var(--color-primary, var(--np-brand));
    color: var(--color-primary, var(--np-text));
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.btn-album-back:hover {
    background: var(--color-primary, var(--np-brand));
    color: #fff;
}
.sidebar-recent-item--current .sidebar-recent-thumb { opacity: 0.6; pointer-events: none; }
.sidebar-recent-item--current .sidebar-recent-title { color: var(--color-active, var(--np-text)); font-weight: 700; pointer-events: none; }

/* ================================================================
   PHASE 10 — albumcloud.php（雲端相簿）
   ================================================================ */
.albumcloud-section { padding: 56px 0 80px; }
.albumcloud-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #EFF6FF;
    border-radius: 8px;
    font-size: 0.9rem;
}
.albumcloud-filter-label { font-weight: 600; color: var(--color-primary, var(--np-text)); }
.albumcloud-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-primary, var(--np-brand));
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.83rem;
    text-decoration: none;
    transition: background 0.2s;
}
.albumcloud-filter-tag:hover { background: #E53E3E; color: #fff; }
.albumcloud-grid { margin-bottom: 32px; display: flex; flex-wrap: wrap; }   /* 260720_10:同 .albums-grid */
.albumcloud-card-col { margin-bottom: 24px; }
.albumcloud-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border, #E5E2DC);
    box-shadow: 0 4px 20px rgba(var(--np-brand-rgb),0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.albumcloud-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(var(--np-brand-rgb),0.14);
}
.albumcloud-card-img-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--color-bg-alt, var(--t-paper));
    position: relative;
}
.albumcloud-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.albumcloud-card:hover .albumcloud-card-img { transform: scale(1.04); }
.albumcloud-card-external-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.albumcloud-card-body {
    padding: 16px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.albumcloud-card-title-link { text-decoration: none; }
.albumcloud-card-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--color-text, #1E1E2E);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.albumcloud-card-title-link:hover .albumcloud-card-title { color: var(--color-active, var(--np-text)); }
.albumcloud-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: auto;
}
.albumcloud-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--color-text-muted, #6B7280);
}
.albumcloud-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--color-text-muted, #6B7280);
}
.albumcloud-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}
.albumcloud-total-count { font-size: 0.88rem; color: var(--color-text-muted, #6B7280); margin: 0; }
.sidebar-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.sidebar-tag-item {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--color-bg-alt, var(--t-paper));
    border: 1px solid var(--color-border, #E5E2DC);
    color: var(--color-text, #1E1E2E);
    font-size: 0.83rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sidebar-tag-item:hover {
    background: var(--color-primary, var(--np-brand));
    border-color: var(--color-primary, var(--np-brand));
    color: #fff;
}
@media (max-width: 575px) {
    .albumcloud-pagination-bar { justify-content: center; }
    .albumcloud-total-count { width: 100%; text-align: center; }
}


/* =================================================================
 * notary.php — 公證人詳細介紹頁（2026-04-21）
 *   區塊：Banner 裝飾、Hero（左大圖 + 縮圖切換 / 右資料）
 *         專業背景三卡、執業理念三卡
 * 沿用 design system：沉穩藍 #2B4590 / 亮麗藍 #0077B6 / 精緻金 #C4933F
 * ================================================================= */

/* ---- Banner 右側裝飾 icon（呼應跨頁共用設計元件） ---- */
.notary-banner .container { position: relative; }
.notary-banner-deco {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    color: rgba(255,255,255,0.12);
    pointer-events: none;
    z-index: 1;
}
.notary-banner-deco svg { width: 100%; height: 100%; }
@media (max-width: 767px) {
    .notary-banner-deco { width: 96px; height: 96px; right: 16px; opacity: 0.7; }
}

/* ---- Hero 兩欄版型：左大圖 + 右資料 ---- */
.notary-hero-section { padding-top: 70px; padding-bottom: 70px; }
.notary-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: flex-start;
}
.notary-hero-photo-col {
    position: sticky;
    top: 110px;
}

/* 照片主框 */
.notary-hero-photo-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(var(--np-brand-rgb), 0.18),
                0 4px 14px rgba(var(--np-brand-rgb), 0.08);
    background: linear-gradient(135deg, var(--t-paper) 0%, #FFFFFF 100%);
    aspect-ratio: 3 / 4;
}
.notary-hero-photo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(var(--np-brand-rgb), 0.25);
    border-radius: 16px;
    pointer-events: none;
}
.notary-hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: opacity 0.35s ease;
}

/* 照片右下職銜徽章 */
.notary-hero-photo-badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(var(--np-brand-rgb), 0.92);
    color: #fff;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(var(--np-brand-rgb), 0.35);
}
.notary-hero-photo-badge svg {
    color: var(--np-text);
    flex-shrink: 0;
}

/* 縮圖列 */
.notary-hero-thumbs {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 10px;
}
.notary-hero-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid #E5E2DC;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.notary-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.notary-hero-thumb:hover {
    border-color: var(--np-brand);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(var(--np-brand-rgb), 0.25);
}
.notary-hero-thumb.is-active {
    border-color: var(--np-brand);
    box-shadow: 0 0 0 2px rgba(var(--np-brand-rgb), 0.2);
}
.notary-hero-thumb.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.12), rgba(var(--np-brand-rgb), 0.06));
    pointer-events: none;
}
.notary-hero-thumb:focus-visible {
    outline: 2px solid var(--np-brand);
    outline-offset: 2px;
}

/* 右欄資料 */
.notary-hero-info-col {
    padding-top: 8px;
}
.notary-hero-eyebrow {
    display: inline-block;
    font-family: "Cormorant Garamond", serif;
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--np-text);
    font-weight: 600;
    margin-bottom: 10px;
}
.notary-hero-name {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--np-text);
    line-height: 1.2;
    margin: 0 0 14px 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}
.notary-hero-role {
    font-size: 18px;
    font-weight: 600;
    color: var(--np-text);
    padding: 4px 12px;
    background: rgba(var(--np-brand-rgb), 0.08);
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.notary-hero-gold-line {
    width: 44px;
    height: 3px;
    background: var(--np-brand);
    border-radius: 2px;
    margin: 6px 0 18px 0;
}
.notary-hero-tagline {
    font-size: 17px;
    font-weight: 600;
    color: #1E1E2E;
    line-height: 1.6;
    margin: 0 0 22px 0;
}

/* 三項核心標籤 */
.notary-hero-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}
.notary-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    background: var(--t-paper);
    border: 1px solid #E5E2DC;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--np-text);
    transition: border-color 0.25s, transform 0.25s;
}
.notary-hero-chip:hover {
    border-color: var(--np-brand);
    transform: translateY(-1px);
}
.notary-hero-chip .chip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    font-family: "Cormorant Garamond", serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--np-brand), #B37F32);
    border-radius: 12px;
    letter-spacing: 0;
}

/* 個人簡述 */
.notary-hero-intro {
    font-size: 15.5px;
    line-height: 1.9;
    color: #4A4A5A;
    margin-bottom: 26px;
    padding: 20px 22px;
    background: var(--t-paper);
    border-left: 3px solid var(--np-brand);
    border-radius: 0 8px 8px 0;
}

/* CTA 按鈕列 */
.notary-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.notary-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.25s ease;
    letter-spacing: 0.02em;
}
.notary-hero-cta--primary {
    background: linear-gradient(135deg, var(--np-brand), #B37F32);
    color: #fff;
    box-shadow: 0 8px 20px rgba(var(--np-brand-rgb), 0.28);
}
.notary-hero-cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(var(--np-brand-rgb), 0.4);
    color: #fff;
}
.notary-hero-cta--ghost {
    background: transparent;
    color: var(--np-text);
    border: 1.5px solid var(--np-brand);
}
.notary-hero-cta--ghost:hover {
    background: var(--np-brand);
    color: #fff;
    transform: translateY(-2px);
}

/* ---- 專業背景三卡 ---- */
.notary-resume-section {
    background: var(--t-paper);
    padding-top: 70px;
    padding-bottom: 70px;
}
.notary-gold-line-center {
    margin-left: auto;
    margin-right: auto;
}
.notary-resume-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.notary-resume-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 26px;
    border: 1px solid #E5E2DC;
    box-shadow: 0 2px 14px rgba(var(--np-brand-rgb), 0.04);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s;
    position: relative;
    overflow: hidden;
}
.notary-resume-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--np-brand), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.notary-resume-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(var(--np-brand-rgb), 0.1);
    border-color: rgba(var(--np-brand-rgb), 0.4);
}
.notary-resume-card:hover::before { opacity: 1; }

.notary-resume-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #E5E2DC;
}
.notary-resume-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--np-brand-rgb), 0.14), rgba(var(--np-brand-rgb), 0.08));
    color: var(--np-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notary-resume-card-title { line-height: 1.3; }
.notary-resume-en {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--np-text);
}
.notary-resume-card-title h3 {
    margin: 2px 0 0 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--np-text);
}
.notary-resume-card-body {
    font-size: 15px;
    line-height: 1.85;
    color: #4A4A5A;
}
.notary-resume-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.notary-resume-list li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #EDEBE6;
}
.notary-resume-list li:last-child { border-bottom: none; }
.notary-resume-year {
    flex-shrink: 0;
    min-width: 54px;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2px 8px;
    height: 22px;
    background: var(--np-brand);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-top: 3px;
}
.notary-resume-body {
    flex: 1;
    color: #1E1E2E;
    font-size: 14.5px;
    line-height: 1.7;
}

/* ---- 專業證照（四圖 fancybox 網格） ---- */
.notary-cert-section {
    padding-top: 70px;
    padding-bottom: 70px;
    background: #FAFAF7;
}
.notary-cert-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.notary-cert-card {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.notary-cert-link {
    position: relative;
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid #E5E2DC;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(var(--np-brand-rgb), 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.notary-cert-link:hover,
.notary-cert-link:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(var(--np-brand-rgb), 0.14);
    border-color: var(--np-brand);
}
.notary-cert-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.45s ease;
}
.notary-cert-link:hover .notary-cert-img {
    transform: scale(1.03);
}
.notary-cert-zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--np-brand-rgb), 0.86);
    color: #fff;
    border-radius: 50%;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.notary-cert-link:hover .notary-cert-zoom,
.notary-cert-link:focus-visible .notary-cert-zoom {
    opacity: 1;
    transform: translateY(0);
}
.notary-cert-name {
    margin-top: 12px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--np-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}
@media (max-width: 991px) {
    .notary-cert-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 575px) {
    .notary-cert-grid { grid-template-columns: 1fr; gap: 18px; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ---- 執業理念三卡 ---- */
.notary-philosophy-section {
    padding-top: 70px;
    padding-bottom: 70px;
}
.notary-philosophy-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}
.notary-philosophy-card {
    position: relative;
    background: #fff;
    border: 1px solid #E5E2DC;
    border-radius: 14px;
    padding: 30px 24px 26px;
    transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.notary-philosophy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(var(--np-brand-rgb), 0.1);
    border-color: rgba(var(--np-brand-rgb), 0.35);
}
.notary-philosophy-num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: "Cormorant Garamond", serif;
    font-size: 44px;
    font-weight: 700;
    color: rgba(var(--np-text-rgb), 0.16);
    line-height: 1;
    letter-spacing: -0.02em;
}
.notary-philosophy-h {
    margin: 0 0 10px 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--np-text);
    position: relative;
    padding-left: 12px;
    line-height: 1.4;
}
.notary-philosophy-h::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 18px;
    background: linear-gradient(180deg, var(--np-brand), var(--np-text));
    border-radius: 2px;
}
.notary-philosophy-card p {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.8;
    color: #4A4A5A;
}
.notary-philosophy-card p:last-child { margin-bottom: 0; }

/* 引言段（lead）：粗體、深色、稍大字級 */
.notary-philosophy-card .notary-philosophy-lead {
    font-size: 14.5px;
    font-weight: 600;
    color: #1E1E2E;
    line-height: 1.65;
    margin-bottom: 10px;
}

/* 主段中的 <strong> 使用金色強調（呼應品牌色） */
.notary-philosophy-card p strong {
    color: #B37F32;
    font-weight: 700;
}

/* =================================================================
 * RWD 斷點
 * ================================================================= */
@media (max-width: 1199px) {
    .notary-hero-grid { gap: 40px; }
    .notary-hero-name { font-size: 36px; }
}
@media (max-width: 991px) {
    .notary-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .notary-hero-photo-col {
        position: static;
        max-width: 480px;
        margin: 0 auto;
    }
    .notary-resume-grid,
    .notary-philosophy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .notary-hero-section { padding-top: 40px; padding-bottom: 40px; }
    .notary-hero-name { font-size: 30px; }
    .notary-hero-role { font-size: 15px; }
    .notary-hero-tagline { font-size: 15.5px; }
    .notary-hero-intro { font-size: 14.5px; padding: 16px 18px; }
    .notary-resume-grid,
    .notary-philosophy-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .notary-resume-section,
    .notary-philosophy-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .notary-hero-thumbs { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
    .notary-hero-photo-badge { font-size: 12px; padding: 6px 12px; }
}
@media (max-width: 479px) {
    .notary-hero-name { font-size: 26px; }
    .notary-hero-chip { font-size: 13px; padding: 6px 12px 6px 8px; }
    .notary-hero-chip .chip-num { min-width: 24px; height: 22px; font-size: 14px; }
    .notary-hero-cta { padding: 10px 18px; font-size: 14px; }
}
/* =================================================================
 * /notary.php
 * ================================================================= */

/* ── 相關文章區塊(docs-detail / news-detail 共用;繼承 faq-quicklink 家族) ── */
.related-articles { margin: 40px 0 8px; padding: 0; background: transparent; } /* 覆蓋 master.css section { padding:120px; background:#fff },讓頁面米灰底襯白卡 */
.related-articles-head { display: flex; flex-direction: column; margin-bottom: 22px; }
.related-articles-title { font-family: 'Noto Sans TC', sans-serif; font-size: 22px; font-weight: 700; color: var(--color-primary, var(--np-text)); margin: 0; }
.related-articles-line { width: 44px; height: 3px; border-radius: 2px; background: var(--color-accent, var(--np-brand)); margin-top: 12px; }
.related-articles-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } /* 全寬單欄:標題完整可讀優先(業主 260705 裁定,3 欄標題破碎) */
.related-articles-item { margin: 0; }
.related-articles-card { display: flex; align-items: center; gap: 16px; height: 100%; background: var(--color-bg, #fff); border: 1px solid var(--color-border, #E5E2DC); border-radius: 12px; padding: 18px; text-decoration: none; color: inherit; box-shadow: 0 4px 24px rgba(var(--np-brand-rgb),0.06); transition: transform .28s ease, box-shadow .28s ease, border-color .25s ease; }
.related-articles-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(var(--np-brand-rgb),0.15); border-color: var(--color-secondary, var(--np-brand)); }
.related-articles-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: rgba(var(--np-brand-rgb),0.08); display: block; }
.related-articles-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-articles-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.related-articles-cat { font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-accent, var(--np-text)); }
.related-articles-name { font-size: 15.5px; font-weight: 700; line-height: 1.55; color: var(--color-primary, var(--np-text)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease; } /* 全寬單欄下標題可完整顯示,clamp 2 行僅為超長保險 */
.related-articles-card:hover .related-articles-name { color: var(--color-secondary, var(--np-text)); }
.related-articles-date { font-size: 12px; color: var(--color-text-muted, #6B7280); }
.related-articles-arrow { flex-shrink: 0; color: var(--color-text-muted, #6B7280); opacity: .5; display: flex; align-items: center; transition: opacity .2s ease, transform .2s ease, color .2s ease; }
.related-articles-card:hover .related-articles-arrow { opacity: 1; transform: translateX(3px); color: var(--color-secondary, var(--np-text)); }
@media (max-width: 767px) { .related-articles-card { padding: 14px; gap: 12px; } .related-articles-thumb { width: 56px; height: 56px; } }

/* ══ 文章內嵌彈跳資訊(messageModal)═══════════════════════════════════════
   身分:彈出「補充資訊 / 認證須知」的參考卡。設計語言取自站台(藏藍 #2B4590 +
   金 #C4933F + 米白 var(--t-paper) + Noto Sans TC),簽名元素 = 藏藍頁首 + 金色 eyebrow
   與 hairline + 內文金色圓序號(呼應公證/清單語境)。自足樣式,不依賴 bootstrap modal CSS。 */

/* ── 行內觸發:<button> 重置成文字連結外觀 ── */
.messageModalBtn {
	display: inline; margin: 0; padding: 0; border: 0; background: none;
	font: inherit; line-height: inherit; vertical-align: baseline;
	/* !important:蓋過站台泛用內文連結底線樣式(.news-article-body a 等)。
	   本元件為「彈窗觸發」;沿用站台連結藍 #0077B6,hover 轉藏藍區隔,不用底線。 */
	color: var(--color-secondary, var(--np-text)) !important;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none !important;
	-webkit-appearance: none; appearance: none;
	transition: color .2s ease;
}
.messageModalBtn::after {
	content: "\f05a" !important; /* FA info-circle */
	font-family: "Font Awesome 5 Free" !important; font-weight: 900;
	font-size: .95em;                 /* 視覺接近漢字大小 */
	margin-left: .18em; opacity: .8;
	vertical-align: -.04em;           /* 微調與漢字基線對齊 */
	text-decoration: none !important;
}
/* 不用底線(含 hover);hover 僅以顏色區隔。focus 的鍵盤可見框保留(無障礙) */
.messageModalBtn:hover,
.messageModalBtn:focus { color: var(--color-primary, var(--np-text)) !important; text-decoration: none !important; }
.messageModalBtn:focus-visible { outline: 2px solid var(--color-primary, var(--np-brand)); outline-offset: 2px; border-radius: 2px; }

/* ── Backdrop:柔化為藏藍霧面(取代純黑,更沉穩)── */
.modal-backdrop { background-color: #141b30; }
.modal-backdrop.show { opacity: .55; }

/* ── Modal 容器(自訂定位,提到 body 層後仍穩定置中)── */
#messageModal { position: fixed; inset: 0; z-index: 1090; overflow-y: auto; }
#messageModal .modal-dialog {
	max-width: 620px; margin: 1.75rem auto;
	display: flex; align-items: center; min-height: calc(100% - 3.5rem);
}
#messageModal .modal-content {
	width: 100%; background: #fff; border: 0; border-radius: 14px; overflow: hidden;
	box-shadow: 0 24px 60px rgba(20, 28, 50, .28);
	font-family: 'Noto Sans TC', sans-serif;
}

/* ── 頁首:藏藍底 + 金 eyebrow + 金 hairline ── */
#messageModal .modal-header {
	position: relative; display: block;
	background: var(--color-primary, var(--np-brand)); color: #fff;
	padding: 22px 56px 18px 26px; border: 0;
}
#messageModal .msg-eyebrow {
	display: block; margin-bottom: 6px;
	font-size: 12px; letter-spacing: .14em; font-weight: 600;
	color: var(--color-accent, var(--np-text));
}
#messageModal .modal-title {
	margin: 0; width: 100%; color: #fff;
	font-family: 'Noto Sans TC', sans-serif; font-size: 21px; font-weight: 700; line-height: 1.4;
}
#messageModal .modal-header::after {
	content: ""; position: absolute; left: 26px; bottom: 0;
	width: 44px; height: 3px; background: var(--color-accent, var(--np-brand));
}
#messageModal .btn-close {
	position: absolute; top: 18px; right: 20px; width: 30px; height: 30px;
	padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255, 255, 255, .14); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; line-height: 1; opacity: 1; transition: background .2s;
}
#messageModal .btn-close::before { content: "\00d7"; }
#messageModal .btn-close:hover { background: rgba(255, 255, 255, .30); }
#messageModal .btn-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── 內文 ── */
#messageModal .modal-body {
	padding: 22px 26px 24px; max-height: 62vh; overflow-y: auto;
	color: var(--color-text, #1E1E2E); font-size: 15px; line-height: 1.85;
}
#messageModal .modal-body > *:first-child { margin-top: 0; }
#messageModal .modal-body > *:last-child { margin-bottom: 0; }
#messageModal .modal-body p { margin: 0 0 .85em; }
#messageModal .modal-body a { color: var(--color-primary, var(--np-text)); text-decoration: underline; text-underline-offset: 2px; }
#messageModal .modal-body a:hover { color: var(--color-accent, var(--np-text)); }
#messageModal .modal-body ul { margin: 0 0 .85em; padding-left: 1.4em; }
#messageModal .modal-body ul li { margin-bottom: .4em; }
/* 金色圓序號(簽名元素) */
#messageModal .modal-body ol { list-style: none; counter-reset: msgli; margin: 0 0 .85em; padding-left: 0; }
#messageModal .modal-body ol > li { counter-increment: msgli; position: relative; padding-left: 2.1em; margin-bottom: .5em; }
#messageModal .modal-body ol > li::before {
	content: counter(msgli); position: absolute; left: 0; top: .05em;
	width: 1.5em; height: 1.5em; border-radius: 50%;
	background: rgba(var(--np-brand-rgb), .14); color: var(--color-accent, var(--np-text));
	font-size: .82em; font-weight: 700; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}

/* ── 頁尾:站台 outline 按鈕語言 ── */
#messageModal .modal-footer {
	display: flex; justify-content: flex-end; padding: 14px 26px 20px; border: 0;
	background: var(--color-bg-alt, var(--t-paper));
}
#messageModal .modal-footer .btn-secondary {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent; color: var(--color-primary, var(--np-text));
	border: 1.5px solid var(--color-primary, var(--np-brand)); border-radius: 8px;
	padding: 8px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: background .2s, color .2s;
}
#messageModal .modal-footer .btn-secondary:hover { background: var(--color-primary, var(--np-brand)); color: #fff; }

/* ── 進場微動(尊重 reduced-motion)── */
@media (prefers-reduced-motion: no-preference) {
	#messageModal.show .modal-content { animation: msgModalIn .24s cubic-bezier(.2, .8, .2, 1) both; }
	@keyframes msgModalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
}

/* ── 行動裝置:底部 sheet ── */
@media (max-width: 575px) {
	#messageModal .modal-dialog { margin: 0; min-height: 100%; align-items: flex-end; max-width: 100%; }
	#messageModal .modal-content { border-radius: 16px 16px 0 0; }
	#messageModal .modal-header { padding: 18px 50px 15px 18px; }
	#messageModal .modal-body { padding: 18px; max-height: 70vh; }
	#messageModal .modal-footer { padding: 12px 18px 18px; }
}