（SC 4.1.2）：不需要 hover / focus-visible 規則 */
.nav-group-label {
font-size: 1rem;
font-weight: 700;
color: var(--c-ink-soft);
letter-spacing: .06em;
padding: .3rem .25rem;
margin: .45rem 1rem .1rem;
border: none;
border-bottom: 2px solid var(--c-border-strong);
display: block;
line-height: inherit;
}
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { margin: 0; padding: 0; }
.sidebar-nav a {
display: block;
padding: .5rem 1.25rem .5rem 1.5rem;
font-size: 1rem;
color: var(--c-ink);
text-decoration: none;
border-left: 3px solid transparent;
transition: background .15s, border-color .15s;
}
.sidebar-nav a:hover { background: var(--c-green-bg); color: var(--c-green-dark); text-decoration: underline; }
.sidebar-nav a:focus-visible { background: var(--c-green-bg); color: var(--c-green-dark); outline: 3px solid var(--c-orange); outline-offset: 2px; position: relative; z-index: 1; box-shadow: 0 0 0 2px #fff; /* SC 1.4.3：白色內框確保橙色焦點環在任何背景色下均維持充裕對比 */ }
.sidebar-nav a.active { border-left-color: var(--c-green-dark); background: var(--c-green-bg); color: var(--c-green-dark); font-weight: 600; }
/* SC 1.3.1：HTML 中所有
與 均標記 aria-hidden="true"，純屬視覺裝飾，
CSS 隱藏不影響輔助技術讀取；連結可讀文字由後方文字節點提供，合規。 */
.sidebar-nav a i, .sidebar-nav a .menu-ico { display: none; }
.menu-ico { width: 1.6em; height: 1.6em; vertical-align: middle; flex-shrink: 0; }
/* Main content */
.main-content {
margin-left: 14.375rem;
min-width: 0;
padding: .75rem 2.5rem 4rem;
max-width: 1400px;
}
.main-content a { color: var(--c-green-dark); }
.main-content a:hover { color: var(--c-orange); }
code { color: var(--c-orange); }
/* ── Header ── */
.manual-header {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
color: var(--c-ink);
border-radius: 16px;
padding: 1.25rem 2rem;
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.manual-header-title { font-size: 1.6rem; font-weight: 700; margin: 0; align-self: center; line-height: 1; }
.manual-header p { margin: 0; font-size: 1rem; }
.manual-header .badge-wrap { margin-top: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex-shrink: 0; }
/* ── header brand：icon＋標題 ＋ 分隔線 ＋ LOGO ── */
.header-brand {
display: flex;
align-items: center;
gap: .75rem;
flex-shrink: 0;
}
.header-manual-label {
display: flex;
align-items: center;
gap: .4rem;
color: var(--c-green-dark);
}
.header-manual-label i { font-size: 1.5rem; }
.header-brand-divider {
width: 1.5px;
height: 2.2rem;
background: rgba(73,80,87,.5);
flex-shrink: 0;
align-self: center;
}
.header-logo {
max-height: 88px;
display: block;
flex-shrink: 0;
}
@media (min-width: 1025px) {
.header-logo { max-height: 2.8rem; }
}
@media (max-width: 1024px) {
.header-logo { max-height: clamp(1.25rem, 4vw, 2rem); }
}
@media (max-width: 575px) {
.header-brand { flex-direction: column; align-items: center; gap: .3rem; }
.header-brand-divider { display: none; }
}
/* ── 字級按鈕 ── */
.fs-group {
display: inline-flex;
align-items: center;
gap: .5rem; /* SC 2.5.8：由 .25rem(4px) 改為 .5rem(8px)，增加相鄰按鈕間距，降低誤觸風險 */
background: #fff;
border-radius: 20px;
padding: .2rem .6rem .2rem .75rem;
}
.fs-group-label {
color: var(--c-green-dark);
font-size: .9rem;
margin-right: .1rem;
white-space: nowrap;
font-weight: 600;
}
.fs-btn {
background: #fff;
border: 2px solid var(--c-green-dark);
border-radius: 50%;
color: var(--c-green-dark);
font-size: 1rem;
width: 2.125rem;
height: 2.125rem;
padding: 0;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
font-family: inherit;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fs-btn:hover { background: var(--c-green-bg); }
.fs-btn.active { background: var(--c-green-dark); color: #fff; border-color: var(--c-green-dark); text-decoration: none; }
.fs-btn:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c-green-dark); }
/* 手機版（768px 以下）隱藏字級調整按鈕 */
@media (max-width: 768px) {
.fs-group { display: none; }
}
/* ── 網站導覽切換按鈕 ── */
.sitemap-toggle-btn {
display: inline-flex;
align-items: center;
gap: .3rem;
background: #fff;
border: none;
color: var(--c-green-dark);
border-radius: 20px;
padding: .4rem .75rem;
min-height: 44px;
min-width: 44px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: background .15s;
}
.sitemap-toggle-btn:hover { background: var(--c-green-light); }
.sitemap-toggle-btn:focus-visible { outline: 3px solid var(--c-orange-dark); outline-offset: 2px; }
.sitemap-arrow { transition: transform .2s; display: inline-block; }
.sitemap-toggle-btn[aria-expanded="true"] .sitemap-arrow { transform: rotate(180deg); }
/* ── 網站導覽展開面板 ── */
.sitemap-panel {
background: #fff;
border: 1.5px solid var(--c-green-dark);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
padding: 1.1rem 1.5rem 1.2rem;
margin-bottom: 2rem;
animation: sitemapSlide .18s ease;
position: relative;
z-index: 200;
}
@keyframes sitemapSlide {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.sitemap-panel h2 {
font-size: 1.05rem;
font-weight: 700;
color: var(--c-green-dark);
margin: 0 0 .65rem;
display: flex;
align-items: center;
gap: .4rem;
}
.sitemap-panel p { margin: 0 0 .5rem; font-size: 1rem; }
.sitemap-panel ul { margin: .3rem 0 .6rem; padding-left: 1.4rem; font-size: 1rem; }
.sitemap-panel li { margin-bottom: .75rem; }
.sitemap-panel a { color: var(--c-green-dark); }
.sitemap-panel.is-hidden { display: none; }
/* ── Section titles ── */
.guide-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--c-green-dark);
border-bottom: 2.5px solid var(--c-green-dark);
padding-bottom: .45rem;
margin: 2.5rem 0 1.25rem;
display: flex;
align-items: center;
gap: .5rem;
}
.guide-title i { font-size: 1.1rem; }
.sub-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--c-orange-dark);
margin: 1.8rem 0 .75rem;
display: flex;
align-items: center;
gap: .4rem;
}
.sub-title i { font-size: 1rem; }
/* ── Cards ── */
.info-card {
background: #fff;
border: 1px solid var(--c-border-strong);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
}
.info-card.green { border-left: 4px solid var(--c-green-dark); background: var(--c-green-bg); }
.info-card.orange { border-left: 4px solid var(--c-orange); background: var(--c-orange-bg); }
.info-card.feature-card { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.09); }
.feature-card-title { margin: 0 0 .5rem; font-size: 1.2rem; }
.feature-card-desc { margin: 0; font-size: 1rem; }
/* 四大查詢分類色彩工具類（首頁概覽卡、章節標題、表格分類欄位等重複套用） */
.cat-sale { color: var(--c-sale); }
.cat-rent { color: var(--c-rent); }
.cat-presale { color: var(--c-presale); }
.cat-case { color: var(--c-case); }
.border-sale { border-left: 4px solid var(--c-sale); }
.border-rent { border-left: 4px solid var(--c-rent); }
.border-presale { border-left: 4px solid var(--c-presale); }
.border-case { border-left: 4px solid var(--c-case); }
.section-title.cat-sale,
.section-title.cat-rent,
.section-title.cat-presale,
.section-title.cat-case { border-bottom-color: currentColor; }
.feature-card-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
@media (min-width: 1400px) {
.feature-card-row {
grid-template-columns: repeat(4, 1fr);
}
}
.info-card.tip { border-left: 4px solid var(--c-orange); background: var(--c-orange-bg); }
/* ── Steps ── */
.step-list { list-style: none; padding: 0; margin: 0; }
.step-list li {
display: flex;
gap: .85rem;
margin-bottom: .9rem;
align-items: flex-start;
}
.step-num {
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--c-green-dark);
color: #fff;
font-size: 1rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.step-list li .step-body { flex: 1; min-width: 0; }
.step-list li strong { color: var(--c-green-dark); }
/* ── Feature table ── */
.feat-table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.feat-table thead th {
background: var(--c-green-dark);
color: #fff;
padding: .6rem 1rem;
font-size: 1rem;
text-align: left;
font-weight: 600;
}
.feat-table td {
padding: .55rem 1rem;
font-size: 1rem;
border-bottom: 1px solid var(--c-border-strong);
vertical-align: top;
}
.feat-table tr:hover td,
.feat-table tr:hover th[scope="row"] { background: var(--c-green-bg); }
.feat-table th[scope="row"] {
padding: .55rem 1rem;
font-size: 1rem;
border-bottom: 1px solid var(--c-border-strong);
vertical-align: top;
font-weight: 600;
white-space: nowrap;
color: var(--c-green-dark);
text-align: left;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 768px 以下：表格改成卡片式編排，原左欄（th[scope=row]）當標題排在上，
原右欄（td）說明文字排在下 */
@media (max-width: 768px) {
.feat-table, .feat-table tbody, .feat-table tr, .feat-table th, .feat-table td {
display: block;
width: 100%;
}
.feat-table thead {
display: none;
}
.feat-table tbody tr {
border: 1px solid var(--c-border-strong);
border-radius: var(--radius);
margin-bottom: .75rem;
padding: .75rem 1rem;
background: #fff;
}
.feat-table tbody tr:last-child {
margin-bottom: 0;
}
.feat-table th[scope="row"] {
padding: 0 0 .35rem;
border-bottom: none;
white-space: normal;
}
.feat-table td {
padding: 0;
border-bottom: none;
}
.feature-card-row {
grid-template-columns: 1fr;
}
}
/* ── 表格欄寬工具類 ── */
.col-w-110 { width: 110px; }
.col-w-130 { width: 130px; }
.col-w-150 { width: 150px; }
.col-w-170 { width: 170px; }
.col-w-180 { width: 180px; }
/* ── 必填欄位星號 ── */
.required-mark { color: #c62828; }
/* ── 下拉選單箭頭圖示尺寸 ── */
.dropdown-chevron { font-size: 1rem; }
/* ── Kbd ── */
kbd {
background: #eee;
border: 1px solid #767676;
border-bottom-width: 2px;
border-radius: 4px;
padding: .1rem .45rem;
font-size: 1rem;
font-family: monospace;
color: #333;
}
/* ── Tag/badge ── */
.tag-demo, .tag-map-demo {
display: inline-flex;
align-items: center;
gap: .3rem;
background: var(--c-green-bg);
border: 1px solid var(--c-green-dark);
color: var(--c-green-dark);
border-radius: 20px;
padding: .25rem .75rem;
min-height: 32px;
font-size: 1rem;
font-weight: 600;
}
/* ── Layout diagram ── */
.layout-top {
background: #fff;
border: 2px dotted var(--c-orange);
border-radius: var(--radius-sm);
padding: .5rem .75rem;
font-size: 1rem;
color: var(--c-orange-dark);
margin-bottom: .75rem;
text-align: center;
}
.layout-left {
flex: 0 1 60%;
min-width: 0;
overflow-wrap: break-word;
background: #fff;
border: 2px dotted var(--c-orange);
border-radius: var(--radius-sm);
padding: .75rem;
font-size: 1rem;
}
.layout-right {
flex: 0 1 40%;
min-width: 0;
overflow-wrap: break-word;
background: #fff;
border: 2px dotted var(--c-orange);
border-radius: var(--radius-sm);
padding: .75rem;
font-size: 1rem;
}
.layout-box-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--c-orange-dark);
margin-bottom: .5rem;
display: flex;
align-items: center;
gap: .3rem;
}
.layout-row { display: flex; gap: .75rem; }
.layout-right-full { width: 100%; }
.layout-diagram-box {
background: #fff;
border: 1.5px solid #333;
border-radius: var(--radius);
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.layout-diagram-list {
color: var(--c-ink-soft);
font-size: 1rem;
line-height: 1.7;
margin: 0 0 .4rem;
padding-left: 1.2rem;
}
.layout-diagram-note { font-size: 1rem; color: var(--c-ink-soft); }
/* ═══ 圖片佔位框 ═══ */
.img-placeholder {
border: 2px dashed #b0bec5;
border-radius: var(--radius);
background: #fafbfc;
margin: 1.1rem 0 1.6rem;
overflow: hidden;
}
.img-placeholder.has-image {
border-style: solid;
border-color: var(--c-border-strong);
background: #fff;
}
.img-placeholder.has-image img {
display: block;
width: 100%;
height: auto;
}
.img-placeholder-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 12rem;
gap: .5rem;
padding: 1.5rem;
}
.img-placeholder-inner .ph-icon {
font-size: 2.8rem;
color: #767676;
line-height: 1;
}
.img-placeholder-inner .ph-title {
font-size: 1rem;
font-weight: 700;
color: #546e7a;
text-align: center;
}
.img-placeholder-inner .ph-sub {
font-size: 1rem;
color: #4d4d4d;
text-align: center;
}
.img-placeholder figcaption {
background: #f0f4f7;
border-top: 1px dashed #607d8b;
padding: .4rem 1rem;
font-size: 1rem;
color: var(--c-ink-soft);
text-align: center;
font-style: italic;
}
/* ── Mobile ── */
@media (max-width: 1024px) {
.sidebar-nav { display: none; }
.main-content { margin-left: 0; padding: 3.9rem 1.25rem 3rem; }
.site-footer { margin-left: 0; }
.manual-header { padding: 1rem 1.25rem; }
.manual-header-title { font-size: 1.3rem; }
.layout-row { flex-direction: column; }
.layout-left { flex: 0 0 100%; }
.sitemap-toggle-btn { display: none; }
[id] { scroll-margin-top: 4rem; }
}
@media (max-width: 575px) {
.manual-header { padding: .6rem 1.25rem; gap: .4rem; flex-direction: column; align-items: center; text-align: center; }
}
/* 768px 以下移除標題區的圓角白底與陰影 */
@media (max-width: 768px) {
.manual-header {
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
}
}
/* ── 行動版側欄切換 ── */
.mobile-nav-bar { display: none; }
@media (max-width: 1024px) {
.mobile-nav-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 200;
}
.mobile-nav-bar {
display: flex;
align-items: stretch;
background: var(--c-green-dark);
}
.mobile-nav-toggle {
-webkit-appearance: none;
appearance: none;
flex: 1;
align-self: stretch;
display: flex;
align-items: center;
gap: .5rem;
padding: .75rem 1.25rem;
background: var(--c-green-dark);
border: none;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: #fff;
cursor: pointer;
line-height: 1.4;
}
.mobile-nav-toggle:hover { background: var(--c-green); }
.mobile-nav-toggle:focus-visible { outline: 3px solid var(--c-orange-dark); outline-offset: 2px; }
.mobile-nav-arrow { transition: transform .2s; margin-left: auto; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-arrow { transform: rotate(180deg); }
.mobile-sitemap-btn {
display: flex;
align-items: center;
gap: .4rem;
padding: .75rem 1rem;
background: transparent;
border: none;
border-left: 1px solid rgba(255,255,255,.6);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
color: #fff;
cursor: pointer;
white-space: nowrap;
}
.mobile-sitemap-btn:hover { background: rgba(255,255,255,.1); }
.mobile-sitemap-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mobile-sitemap-btn[aria-expanded="true"] .sitemap-arrow { transform: rotate(180deg); }
.sidebar-nav {
display: none !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
height: auto;
max-height: 70vh;
overflow-y: auto;
border-right: none;
border-top: 2px solid var(--c-green-dark);
box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.sidebar-nav.mobile-open { display: block !important; }
.sidebar-nav .sidebar-nav-logo { display: none; }
}
/* ── 頁尾 ── */
.footer-hr { margin: 3rem 0 1.5rem; border-color: var(--c-border); }
.footer-text { font-size: 1rem; color: var(--c-ink-soft); text-align: center; }
/* ── Print ── */
@media print {
.sidebar-nav { display: none; }
.main-content { padding: 0; max-width: 100%; }
.img-placeholder { break-inside: avoid; }
}
[id] { scroll-margin-top: 1.5rem; }
/* ── 桌機版：header sticky 置頂（SC 1.4.10：改用 sticky 讓縮放時內容往下推而非被遮蔽） ── */
@media (min-width: 1025px) {
.manual-header {
position: sticky;
top: 0;
z-index: 99;
border-radius: 0;
padding: .4rem 2rem;
margin: -.75rem 0 0 -2.5rem;
width: calc(100vw - 14.375rem);
justify-content: flex-start;
gap: 1.25rem;
}
/* SC 2.4.11：scroll-padding/margin 讓錨點捲動自動避開 sticky 標頭
--header-h 由 JS 同步 header.offsetHeight；無 JS 時使用 :root 4.5rem 兜底 */
html { scroll-padding-top: calc(var(--header-h) + 0.5rem); }
[id] { scroll-margin-top: calc(var(--header-h) + 0.5rem); }
a, button, input, select, textarea, [tabindex] {
scroll-margin-top: calc(var(--header-h) + 0.5rem);
}
/* sidebar logo 固定置頂：脫離 sidebar 捲動流，sidebar scroll 時 logo 不移動 */
.sidebar-nav { padding-top: var(--header-h); }
.sidebar-nav-logo { position: fixed; top: 0; left: 0; width: 14.375rem; z-index: 101; }
}
/* ── 台灣無障礙：跳轉連結 ── */
.skip-link {
position: fixed; top: -80px; left: 12px; z-index: 10000;
display: inline-block; background: var(--c-orange); color: #fff;
padding: 5px 14px; font-weight: 700; font-size: 1rem;
text-decoration: none; white-space: nowrap; border-radius: 5px;
border: 3px solid #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.45);
transition: top .18s ease;
}
.skip-link:focus {
top: 12px;
outline: 3px solid var(--c-orange-dark) !important; outline-offset: 3px !important;
}
/* ── 台灣無障礙：導盲磚定位點 ── */
/* 特有項：.tw-anchor 為台灣標章要求之導盲磚錨點，hidden→focus-visible 雙態設計（sronly+focusable 模式） */
.tw-anchor {
position: absolute;
left: -10000px;
top: 4px;
width: 32px; height: 32px;
overflow: hidden;
background: #fff;
border: 1px solid #7B1A2A;
border-radius: 3px;
z-index: 9999;
text-decoration: none; /* 防止 預設底線在非焦點狀態下意外顯示 */
}
/* 特有項：導盲磚 ::: 符號於焦點時的視覺強調樣式 */
.tw-anchor span {
font-weight: 700;
letter-spacing: .12em; /* 三點並排視覺拉距，強化辨識 */
color: #7B1A2A; /* 與邊框同色，形成統一的導盲磚識別色 */
flex-shrink: 0;
}
.tw-anchor:focus {
position: fixed;
left: 4px;
top: calc(var(--header-h) + 4px);
width: auto; min-width: 80px; max-width: 220px;
height: auto; min-height: 28px;
overflow: visible;
padding: 3px 8px;
background: #fff;
border: 2px solid #7B1A2A;
display: inline-flex; flex-direction: row; align-items: center; gap: .3rem;
color: #7B1A2A; font-size: 1rem; font-weight: 700;
white-space: nowrap; text-decoration: none;
outline: 3px solid var(--c-orange) !important;
outline-offset: 2px;
}
.tw-anchor:focus::before,
.tw-anchor:focus::after { content: none; }
/* sidebar 內的 tw-anchor：fixed 脫離 sidebar scroll context；scroll-margin: 0 防止 scroll-into-view 用 scroll-margin 值捲動 sidebar */
.sidebar-nav .tw-anchor { position: fixed; scroll-margin: 0; }
/* sidebar tw-anchor focus 時顯示在固定 logo 下方，z-index 9999 確保可見（SC 2.1.1） */
/* SC 2.4.7：深色 logo 背景上改用白色焦點環，確保 3:1 對比 */
.sidebar-nav .tw-anchor:focus { top: calc(var(--header-h) + 4px); outline-color: #fff !important; }
/* ── 無障礙隱藏文字 ── */
.sr-only {
position: absolute !important; width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important;
clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important;
white-space: nowrap !important; border: 0 !important;
}
/* 含有 tw-anchor 的區塊需要 position:relative */
.page-wrap, .main-content, .site-footer { position: relative; }
/* ── 回頂端按鈕 ── */
.go-top-btn {
position: fixed;
bottom: 1.75rem;
right: 10px;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--c-orange-dark);
color: #fff;
border: 2px solid rgba(255,255,255,.25);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
z-index: 500;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s, visibility .18s, background .15s;
box-shadow: 0 3px 10px rgba(0,0,0,.28);
}
.go-top-btn.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.go-top-btn:hover { background: var(--c-orange); }
.go-top-btn:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(0,0,0,.28); }
@media print { .go-top-btn { display: none; } }