@charset "UTF-8";
/* ==========================================================================
hl-system.css — 花蓮包棟民宿網（https://bd.netete.com/）共用元件庫
--------------------------------------------------------------------------
【掛載方式】
本檔必須掛在 mob/css/main.css **之後**，建議放在 所有 CSS 的最後一行：
...（其餘既有 CSS）...
【設計原則】只新增、不覆寫
本檔所有規則都收斂在 .hl- 前綴的類別底下，不改動 main.css 既有的任何選擇器，
也不對站上既有的 id 與 class（頁首、回頂端按鈕、廣告區塊等）做全域覆寫。
唯一的例外是「作用域內的元素重置」——因為 main.css 有兩條全域規則會破壞新元件：
1. a { display:block } → .hl- 區塊內的文字連結必須重新宣告 display:inline
2. h2 { position:absolute; opacity:0; bottom:-35px } → 裸 h2 在本站是隱形的
這兩項重置一律寫成 `.hl-xxx h2 { ... }` 這種「類別 + 元素」的形式，
只在本檔的元件內生效，頁面上其他既有的 h2／a 完全不受影響。
【回退方式】
出問題時，把該頁 裡這一行 移除即可，
版面立刻回到掛載前的狀態。本檔不需要、也不應該去改 main.css。
【網頁字型】
花蓮站原本沒有載任何網頁字型，襯線標題會退成 PMingLiU（新細明體）。
下方 @import 會補上 Noto Sans TC 400/700 與 Noto Serif TC 700。
若要改善載入效能（避免 CSS 內 @import 造成的串接等待），可改成在
最前面直接放下列 ，並把下面那行 @import 刪掉：
【編碼】UTF-8（無 BOM）／CRLF 行尾
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=Noto+Serif+TC:wght@700&display=swap");
/* ==========================================================================
1. 設計 token
品牌色沿用花蓮現有配色：珊瑚紅 #eb6877（強調）、藍綠 #0b7285（連結與次強調）。
珊瑚紅 --hl-accent 對比度僅約 3.1:1，只用於裝飾（底線色條、大型數字、圓點）；
需要承載文字的珊瑚紅色塊一律用 --hl-accent-strong（白字對比 5.46:1，通過 AA）。
========================================================================== */
:root {
/* 底色與紙面 */
--hl-paper: #f4f9fa;
--hl-paper-2: #e9f2f4;
--hl-surface: #ffffff;
/* 文字 */
--hl-ink: #1f2d33; /* 主要文字 14.18:1 */
--hl-ink-2: #3d525a; /* 次要文字 8.23:1 */
--hl-muted: #5d727b; /* 輔助說明 5.05:1 */
/* 線條 */
--hl-rule: #d8e4e8;
--hl-rule-2: #a9c6cf;
/* 品牌 — 藍綠（連結、次強調） */
--hl-brand: #0b7285; /* 白底 5.59:1 */
--hl-brand-strong: #075463; /* 白底 8.55:1；反白 8.55:1 */
--hl-brand-soft: #e4f0f3;
/* 品牌 — 珊瑚紅（強調） */
--hl-accent: #eb6877; /* 裝飾用 */
--hl-accent-strong: #b0455a; /* 需要承載文字時用這個 */
--hl-accent-soft: #fdeef0;
/* 反白字與焦點 */
--hl-on-brand: #ffffff;
--hl-focus: #b0455a;
/* 字型 */
--hl-font-body: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
--hl-font-display: "Noto Serif TC", "Noto Serif CJK TC", ui-serif, serif;
/* 字級（main.css 的 body 用固定 px，這裡也用 px，避免被既有設定牽動） */
--hl-text-2xs: 11px;
--hl-text-xs: 12px;
--hl-text-sm: 14px;
--hl-text-base: 16px;
--hl-text-md: 18px;
--hl-text-lg: 22px;
--hl-text-xl: 28px;
--hl-text-2xl: 34px;
/* 行高（重要：main.css 的 body 是 line-height:30px，元件內一律自行宣告） */
--hl-leading-tight: 1.4;
--hl-leading-snug: 1.55;
--hl-leading-normal: 1.8;
--hl-leading-loose: 1.9;
/* 間距 */
--hl-space-3xs: 4px;
--hl-space-2xs: 8px;
--hl-space-xs: 12px;
--hl-space-sm: 16px;
--hl-space-md: 24px;
--hl-space-lg: 32px;
--hl-space-xl: 48px;
--hl-space-2xl: 72px;
/* 圓角 */
--hl-radius-sm: 8px;
--hl-radius: 12px;
--hl-radius-lg: 16px;
--hl-radius-pill: 999px;
/* 陰影 */
--hl-shadow-xs: 0 3px 10px rgba(31, 45, 51, .05);
--hl-shadow-sm: 0 6px 16px rgba(31, 45, 51, .07);
--hl-shadow-md: 0 10px 24px rgba(31, 45, 51, .10);
--hl-shadow-lg: 0 16px 34px rgba(31, 45, 51, .14);
--hl-shadow-focus: 0 0 0 3px rgba(176, 69, 90, .32);
/* 動態 */
--hl-ease: cubic-bezier(.16, 1, .3, 1);
--hl-dur: .22s;
/* 版面寬度與左右留白 */
--hl-max: 1180px;
--hl-gutter: 24px;
}
/* ==========================================================================
2. 區段容器與基礎排版
========================================================================== */
.hl-section {
box-sizing: border-box;
width: 100%;
max-width: var(--hl-max);
margin: var(--hl-space-lg) auto 0;
padding: 0 var(--hl-gutter);
color: var(--hl-ink);
font-family: var(--hl-font-body);
font-size: var(--hl-text-base);
font-weight: 400;
line-height: var(--hl-leading-normal);
letter-spacing: 0;
text-align: left;
}
.hl-section--narrow { max-width: 880px; }
.hl-section--flush { margin-top: 0; }
.hl-section * { box-sizing: border-box; }
.hl-section img { max-width: 100%; height: auto; }
/* 有底色的面板型區段 */
.hl-panel {
box-sizing: border-box;
margin: var(--hl-space-lg) 0 var(--hl-space-2xs);
padding: 26px 26px 22px;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius-lg);
background: linear-gradient(135deg, var(--hl-paper-2), var(--hl-surface));
color: var(--hl-ink);
font-family: var(--hl-font-body);
line-height: var(--hl-leading-normal);
letter-spacing: 0;
text-align: left;
}
/* 抵銷 main.css 全域 a{display:block}，讓內文連結維持行內。
兩個刻意的限制：
1. 只挑「沒有 hl- 類別」的連結——本檔的元件（.hl-tool、.hl-pill、.hl-card…）
自己會宣告 flex／inline-flex，不能被這條規則蓋掉。
2. 清單與表格只在 .hl-prose 內處理；.hl-town-grid、.hl-quick-grid、.hl-table 等
元件的 li／td 連結，由元件自己的規則決定排版。
純文字的清單或表格，請在外層加上 .hl-prose。 */
.hl-section p a:not([class*="hl-"]),
.hl-section h1 a:not([class*="hl-"]),
.hl-section h2 a:not([class*="hl-"]),
.hl-section h3 a:not([class*="hl-"]),
.hl-section h4 a:not([class*="hl-"]),
.hl-panel p a:not([class*="hl-"]),
.hl-prose a:not([class*="hl-"]),
.hl-prose li a:not([class*="hl-"]),
.hl-prose td a:not([class*="hl-"]) {
display: inline;
}
.hl-prose {
color: var(--hl-ink-2);
font-size: var(--hl-text-base);
line-height: var(--hl-leading-normal);
}
.hl-prose a:not([class*="hl-"]) {
color: var(--hl-brand);
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid var(--hl-rule-2);
transition: color var(--hl-dur) ease, border-color var(--hl-dur) ease;
}
.hl-prose a:not([class*="hl-"]):hover { color: var(--hl-brand-strong); border-bottom-color: var(--hl-accent); }
.hl-prose p { margin: 0 0 var(--hl-space-xs); line-height: var(--hl-leading-normal); }
.hl-prose p:last-child { margin-bottom: 0; }
/* 全元件共用的鍵盤焦點樣式 */
.hl-pill:focus-visible,
.hl-tool:focus-visible,
.hl-card:focus-visible,
.hl-cta:focus-visible,
.hl-guide:focus-visible,
.hl-town-grid a:focus-visible,
.hl-anchor-nav a:focus-visible,
.hl-quick-grid a:focus-visible,
.hl-crumb a:focus-visible,
.hl-faq-item > summary:focus-visible {
outline: 3px solid var(--hl-focus);
outline-offset: 3px;
}
/* 只給輔助技術讀的文字 */
.hl-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
3. eyebrow 小標與區段標題
註：main.css 有全域 h2{position:absolute;opacity:0;bottom:-35px}，
以下「類別 + 元素」的重置只在 .hl- 元件內生效。
========================================================================== */
.hl-eyebrow {
display: block;
margin: 0 0 var(--hl-space-2xs);
color: var(--hl-brand-strong);
font-family: var(--hl-font-body);
font-size: var(--hl-text-xs);
font-weight: 700;
line-height: var(--hl-leading-tight);
letter-spacing: 4px;
text-indent: 4px;
}
.hl-eyebrow--accent { color: var(--hl-accent-strong); }
.hl-head { margin: 0 0 22px; text-align: center; }
.hl-head--left { text-align: left; }
.hl-head h2,
.hl-head h3,
h2.hl-title,
h3.hl-title {
position: static;
bottom: auto;
left: auto;
right: auto;
width: auto;
opacity: 1;
overflow: visible;
margin: 0;
padding: 0 0 14px;
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: var(--hl-text-xl);
font-weight: 700;
line-height: 1.35;
letter-spacing: 1px;
transform: none;
transition: none;
}
.hl-head h2,
.hl-head h3 { position: relative; display: inline-block; }
.hl-head h2::after,
.hl-head h3::after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 0;
width: 56px;
height: 3px;
margin-left: -28px;
border-radius: 2px;
background: var(--hl-accent);
opacity: 1;
}
.hl-head--left h2::after,
.hl-head--left h3::after { left: 0; margin-left: 0; }
.hl-head h3 { font-size: var(--hl-text-lg); }
.hl-head p {
margin: 10px 0 0;
color: var(--hl-muted);
font-size: var(--hl-text-sm);
line-height: var(--hl-leading-normal);
letter-spacing: 0;
}
/* 導言：eyebrow + 襯線 H1 + 導言段落 */
.hl-intro { text-align: left; }
.hl-intro h1 {
position: relative;
margin: 0 0 14px;
padding: 0 0 14px;
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: var(--hl-text-2xl);
font-weight: 700;
line-height: 1.35;
letter-spacing: 1px;
opacity: 1;
}
.hl-intro h1::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--hl-accent);
}
.hl-lead {
max-width: 900px;
margin: 0 0 22px;
color: var(--hl-ink-2);
font-size: var(--hl-text-base);
line-height: var(--hl-leading-loose);
letter-spacing: 0;
overflow-wrap: break-word;
}
.hl-lead:last-child { margin-bottom: 0; }
/* ==========================================================================
4. 膠囊按鈕
========================================================================== */
.hl-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
padding: 7px 18px;
border: 1px solid var(--hl-rule-2);
border-radius: var(--hl-radius-pill);
background: var(--hl-surface);
color: var(--hl-brand-strong);
font-family: var(--hl-font-body);
font-size: var(--hl-text-sm);
font-weight: 700;
line-height: var(--hl-leading-tight);
letter-spacing: 0;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: var(--hl-shadow-xs);
transition: background-color var(--hl-dur) ease, border-color var(--hl-dur) ease,
color var(--hl-dur) ease, transform var(--hl-dur) ease, box-shadow var(--hl-dur) ease;
-webkit-appearance: none;
appearance: none;
}
.hl-pill:hover {
background: var(--hl-brand);
border-color: var(--hl-brand);
color: var(--hl-on-brand);
text-decoration: none;
transform: translateY(-1px);
box-shadow: var(--hl-shadow-sm);
}
.hl-pill--primary {
background: var(--hl-brand-strong);
border-color: var(--hl-brand-strong);
color: var(--hl-on-brand);
}
.hl-pill--primary:hover { background: var(--hl-brand); border-color: var(--hl-brand); }
.hl-pill--accent {
background: var(--hl-accent-strong);
border-color: var(--hl-accent-strong);
color: var(--hl-on-brand);
}
.hl-pill--accent:hover { background: #963a4c; border-color: #963a4c; color: var(--hl-on-brand); }
.hl-pill--sm { min-height: 32px; padding: 4px 13px; font-size: var(--hl-text-xs); }
.hl-pill--block { display: flex; width: 100%; }
.hl-pill-row {
display: flex;
flex-wrap: wrap;
gap: var(--hl-space-2xs);
margin: 0;
padding: 0;
list-style: none;
}
.hl-pill-row li { min-width: 0; margin: 0; padding: 0; list-style: none; }
/* 內文工具連結膠囊（行內，字級跟著上下文） */
.hl-tool {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 3px;
padding: 3px 12px 3px 10px;
border: 1px solid var(--hl-rule-2);
border-radius: var(--hl-radius-pill);
background: var(--hl-surface);
color: var(--hl-brand-strong);
font-size: .92em;
font-weight: 700;
line-height: var(--hl-leading-snug);
letter-spacing: 0;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
box-shadow: var(--hl-shadow-xs);
transition: background-color var(--hl-dur) ease, border-color var(--hl-dur) ease,
color var(--hl-dur) ease, transform var(--hl-dur) ease, box-shadow var(--hl-dur) ease;
}
.hl-tool::before {
content: "";
flex: 0 0 auto;
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: var(--hl-tool-icon) no-repeat center / contain;
mask: var(--hl-tool-icon) no-repeat center / contain;
}
.hl-tool--find { --hl-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); }
.hl-tool--list { --hl-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E"); }
.hl-tool--map { --hl-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.hl-tool:hover {
background: var(--hl-brand);
border-color: var(--hl-brand);
color: var(--hl-on-brand);
text-decoration: none;
transform: translateY(-1px);
box-shadow: var(--hl-shadow-sm);
}
/* ==========================================================================
5. 麵包屑
========================================================================== */
.hl-crumb {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--hl-space-2xs);
box-sizing: border-box;
max-width: 900px;
margin: 0 auto 2px;
padding: 18px var(--hl-space-sm) 0;
color: var(--hl-muted);
font-family: var(--hl-font-body);
font-size: var(--hl-text-sm);
font-weight: 700;
line-height: var(--hl-leading-snug);
letter-spacing: 0;
word-break: keep-all;
}
.hl-crumb a {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius-pill);
background: var(--hl-surface);
color: var(--hl-ink-2);
text-decoration: none;
box-shadow: var(--hl-shadow-xs);
transition: background-color var(--hl-dur) ease, border-color var(--hl-dur) ease, color var(--hl-dur) ease;
}
.hl-crumb a:hover {
background: var(--hl-brand);
border-color: var(--hl-brand);
color: var(--hl-on-brand);
text-decoration: none;
}
.hl-crumb span { color: var(--hl-ink); }
/* ==========================================================================
6. 頁內導覽（章節錨點）
========================================================================== */
.hl-anchor-nav {
display: flex;
flex-wrap: wrap;
gap: var(--hl-space-2xs);
margin: 0 0 var(--hl-space-md);
padding: 0;
list-style: none;
}
.hl-anchor-nav li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.hl-anchor-nav a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 5px 15px;
border: 1.5px solid var(--hl-rule-2);
border-radius: var(--hl-radius-pill);
background: var(--hl-surface);
color: var(--hl-brand-strong);
font-family: var(--hl-font-body);
font-size: var(--hl-text-sm);
font-weight: 700;
line-height: var(--hl-leading-tight);
letter-spacing: 0;
text-decoration: none;
box-shadow: var(--hl-shadow-xs);
transition: background-color var(--hl-dur) ease, border-color var(--hl-dur) ease,
color var(--hl-dur) ease, transform var(--hl-dur) ease;
}
.hl-anchor-nav a::before {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--hl-accent);
transition: background-color var(--hl-dur) ease;
}
.hl-anchor-nav a:hover {
background: var(--hl-brand);
border-color: var(--hl-brand);
color: var(--hl-on-brand);
text-decoration: none;
transform: translateY(-1px);
}
.hl-anchor-nav a:hover::before { background: var(--hl-on-brand); }
.hl-anchor-nav a[aria-current="true"] { background: var(--hl-brand-soft); border-color: var(--hl-brand); }
/* 錨點目標：避開固定頁首遮擋 */
.hl-anchor { scroll-margin-top: 100px; }
/* ==========================================================================
7. 卡片格
========================================================================== */
.hl-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--hl-space-sm);
margin-top: 6px;
}
.hl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius);
background: var(--hl-surface);
color: var(--hl-ink);
font-family: var(--hl-font-body);
line-height: var(--hl-leading-snug);
letter-spacing: 0;
text-decoration: none;
box-shadow: var(--hl-shadow-sm);
transition: transform var(--hl-dur) var(--hl-ease), box-shadow var(--hl-dur) var(--hl-ease),
border-color var(--hl-dur) ease;
}
.hl-card:hover {
transform: translateY(-3px);
border-color: var(--hl-rule-2);
color: var(--hl-ink);
text-decoration: none;
box-shadow: var(--hl-shadow-md);
}
.hl-card-img {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--hl-paper-2);
}
.hl-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-card-body {
box-sizing: border-box;
position: relative;
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
gap: 6px;
padding: 14px 15px 52px;
}
.hl-card-body--plain { padding-bottom: 14px; }
.hl-card-name {
display: block;
min-width: 0;
margin: 0;
overflow: hidden;
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: var(--hl-text-md);
font-weight: 700;
line-height: 1.45;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.hl-card-meta {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0;
color: var(--hl-muted);
font-size: var(--hl-text-sm);
line-height: var(--hl-leading-snug);
}
.hl-card-meta span + span::before { content: "\00B7"; margin-right: 4px; color: var(--hl-rule-2); }
.hl-card-note {
margin: 0;
color: var(--hl-ink-2);
font-size: var(--hl-text-sm);
line-height: 1.7;
overflow-wrap: break-word;
}
.hl-card-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 2px 0 0;
padding: 0;
list-style: none;
}
.hl-card-tags i,
.hl-card-tags li {
padding: 2px 9px;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius-pill);
background: var(--hl-paper);
color: var(--hl-brand-strong);
font-style: normal;
font-size: var(--hl-text-xs);
line-height: var(--hl-leading-snug);
list-style: none;
}
.hl-card-cta {
position: absolute;
right: 15px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
padding: 5px 12px;
border: 1px solid var(--hl-rule-2);
border-radius: var(--hl-radius-pill);
background: var(--hl-paper);
color: var(--hl-brand-strong);
font-size: var(--hl-text-sm);
font-weight: 700;
line-height: var(--hl-leading-tight);
white-space: nowrap;
transition: background-color var(--hl-dur) ease, border-color var(--hl-dur) ease, color var(--hl-dur) ease;
}
.hl-card-cta::after { content: "\2192"; display: inline-block; }
.hl-card:hover .hl-card-cta {
border-color: var(--hl-brand-strong);
background: var(--hl-brand-strong);
color: var(--hl-on-brand);
}
/* ==========================================================================
8. 大型入口卡（工具列／主要行動）
========================================================================== */
.hl-cta-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--hl-space-xs);
margin-top: var(--hl-space-lg);
padding-top: 26px;
border-top: 1px solid var(--hl-rule);
}
.hl-cta-grid--flush { margin-top: 0; padding-top: 0; border-top: 0; }
.hl-cta-grid--wide-first { grid-template-columns: 1.25fr 1fr 1fr; }
.hl-cta {
position: relative;
display: flex;
min-width: 0;
min-height: 120px;
flex-direction: column;
justify-content: center;
padding: 18px 52px 18px 20px;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius);
background: var(--hl-paper);
color: var(--hl-ink);
font-family: var(--hl-font-body);
letter-spacing: 0;
text-decoration: none;
transition: transform var(--hl-dur) var(--hl-ease), background-color var(--hl-dur) ease,
box-shadow var(--hl-dur) ease;
}
.hl-cta:hover {
transform: translateY(-2px);
background: var(--hl-surface);
color: var(--hl-ink);
text-decoration: none;
box-shadow: var(--hl-shadow-md);
}
.hl-cta.is-primary {
border-color: var(--hl-brand-strong);
background: var(--hl-brand-strong);
color: var(--hl-on-brand);
}
.hl-cta.is-primary:hover { background: var(--hl-brand); color: var(--hl-on-brand); }
.hl-cta-kicker {
display: block;
margin-bottom: 5px;
color: var(--hl-muted);
font-size: var(--hl-text-xs);
font-weight: 700;
line-height: var(--hl-leading-tight);
letter-spacing: 1px;
}
.hl-cta.is-primary .hl-cta-kicker { color: rgba(255, 255, 255, .82); }
.hl-cta strong,
.hl-cta b {
display: block;
font-family: var(--hl-font-display);
font-size: var(--hl-text-lg);
font-weight: 700;
line-height: var(--hl-leading-tight);
}
.hl-cta-desc {
display: block;
margin-top: 4px;
color: var(--hl-muted);
font-size: var(--hl-text-sm);
line-height: var(--hl-leading-snug);
}
.hl-cta.is-primary .hl-cta-desc { color: rgba(255, 255, 255, .9); }
.hl-cta-arrow {
position: absolute;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
gap: 6px;
font-size: var(--hl-text-md);
line-height: 1;
}
.hl-cta-arrow::after {
content: "";
display: inline-block;
width: 22px;
height: 1px;
background: currentColor;
transition: width var(--hl-dur) ease;
}
.hl-cta:hover .hl-cta-arrow::after { width: 32px; }
/* ==========================================================================
9. 鄉鎮索引（13 鄉鎮，auto-fill 讓最後一列不會被拉寬）
========================================================================== */
.hl-town-index {
display: grid;
grid-template-columns: minmax(200px, .7fr) minmax(0, 1.6fr);
gap: 28px;
align-items: start;
margin-top: 26px;
padding: 26px 0 8px;
border-top: 1px solid var(--hl-rule);
}
.hl-town-index--flush { margin-top: 0; padding-top: 0; border-top: 0; }
.hl-town-index-head h2,
.hl-town-index-head h3 {
position: static;
bottom: auto;
width: auto;
opacity: 1;
margin: 0;
padding: 0;
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: var(--hl-text-lg);
font-weight: 700;
line-height: var(--hl-leading-snug);
letter-spacing: 1px;
}
.hl-town-index-head p {
margin: 6px 0 0;
color: var(--hl-muted);
font-size: var(--hl-text-sm);
line-height: 1.7;
letter-spacing: 0;
}
.hl-town-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.hl-town-grid li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.hl-town-grid a {
display: flex;
min-width: 0;
min-height: 42px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 14px;
border: 1.5px solid var(--hl-rule-2);
border-radius: var(--hl-radius-pill);
background: var(--hl-surface);
color: var(--hl-ink);
font-family: var(--hl-font-body);
font-size: 15px;
font-weight: 700;
line-height: var(--hl-leading-tight);
letter-spacing: 0;
text-align: center;
text-decoration: none;
box-shadow: var(--hl-shadow-xs);
transition: background-color var(--hl-dur) ease, border-color var(--hl-dur) ease,
color var(--hl-dur) ease, transform var(--hl-dur) ease, box-shadow var(--hl-dur) ease;
}
.hl-town-grid a:hover {
background: var(--hl-brand);
border-color: var(--hl-brand);
color: var(--hl-on-brand);
text-decoration: none;
transform: translateY(-2px);
box-shadow: var(--hl-shadow-sm);
}
.hl-town-arrow {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
color: inherit;
font-size: 13px;
opacity: .7;
transition: transform var(--hl-dur) ease, opacity var(--hl-dur) ease;
}
.hl-town-grid a:hover .hl-town-arrow { opacity: 1; transform: translateX(3px); }
/* ==========================================================================
10. 快速導覽（圖示格）
========================================================================== */
.hl-quick {
box-sizing: border-box;
margin: var(--hl-space-lg) 0 var(--hl-space-2xs);
padding: 22px 24px 20px;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius-lg);
background: linear-gradient(135deg, var(--hl-paper-2), var(--hl-surface));
font-family: var(--hl-font-body);
letter-spacing: 0;
}
.hl-quick-t {
margin: 0 0 14px;
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: var(--hl-text-md);
font-weight: 700;
line-height: var(--hl-leading-snug);
letter-spacing: 2px;
text-align: center;
}
.hl-quick-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.hl-quick-grid li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.hl-quick-grid a {
display: flex;
min-width: 0;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 10px 12px;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius);
background: var(--hl-surface);
color: var(--hl-ink);
text-align: center;
text-decoration: none;
box-shadow: var(--hl-shadow-xs);
transition: transform var(--hl-dur) ease, border-color var(--hl-dur) ease, box-shadow var(--hl-dur) ease;
}
.hl-quick-grid a:hover {
transform: translateY(-3px);
border-color: var(--hl-brand);
color: var(--hl-ink);
text-decoration: none;
box-shadow: var(--hl-shadow-md);
}
.hl-quick-grid svg {
width: 26px;
height: 26px;
margin-bottom: 2px;
fill: none;
stroke: var(--hl-brand);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.hl-quick-grid b { font-size: var(--hl-text-sm); font-weight: 700; line-height: 1.35; }
.hl-quick-grid span { color: var(--hl-muted); font-size: var(--hl-text-2xs); line-height: 1.4; }
/* ==========================================================================
11. 攻略卡
========================================================================== */
.hl-guides-head { margin-bottom: var(--hl-space-sm); }
.hl-guides-head h2,
.hl-guides-head h3 {
position: static;
bottom: auto;
width: auto;
opacity: 1;
margin: 0 0 6px;
padding: 0;
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: var(--hl-text-lg);
font-weight: 700;
line-height: var(--hl-leading-snug);
letter-spacing: 2px;
}
.hl-guides-head h2::after,
.hl-guides-head h3::after { display: none; }
.hl-guides-head p {
margin: 0;
color: var(--hl-muted);
font-size: var(--hl-text-sm);
line-height: 1.7;
letter-spacing: 0;
}
.hl-guides-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--hl-space-xs);
margin: 0;
padding: 0;
list-style: none;
}
.hl-guides-grid li { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hl-guide {
display: flex;
min-width: 0;
min-height: 126px;
width: 100%;
flex-direction: column;
gap: 6px;
padding: 16px 18px 14px;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius);
background: var(--hl-surface);
color: var(--hl-ink);
font-family: var(--hl-font-body);
letter-spacing: 0;
text-decoration: none;
box-shadow: var(--hl-shadow-xs);
transition: transform var(--hl-dur) ease, border-color var(--hl-dur) ease, box-shadow var(--hl-dur) ease;
}
.hl-guide:hover {
transform: translateY(-3px);
border-color: var(--hl-brand);
color: var(--hl-ink);
text-decoration: none;
box-shadow: var(--hl-shadow-md);
}
.hl-guide-tag {
align-self: flex-start;
padding: 2px 10px;
border-radius: var(--hl-radius-pill);
background: var(--hl-brand-soft);
color: var(--hl-brand-strong);
font-size: var(--hl-text-2xs);
font-weight: 700;
line-height: var(--hl-leading-snug);
letter-spacing: 2px;
}
.hl-guide b {
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: var(--hl-text-base);
font-weight: 700;
line-height: var(--hl-leading-tight);
}
.hl-guide-desc {
flex: 1;
color: var(--hl-muted);
font-size: 13px;
line-height: 1.65;
overflow-wrap: break-word;
}
.hl-guide-more {
color: var(--hl-brand);
font-size: var(--hl-text-xs);
font-weight: 700;
line-height: var(--hl-leading-tight);
letter-spacing: 1px;
}
/* ==========================================================================
12. 筆記卡（重點說明／編號卡）
========================================================================== */
.hl-notes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--hl-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.hl-notes--1 { grid-template-columns: minmax(0, 1fr); }
.hl-notes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl-note {
position: relative;
box-sizing: border-box;
min-width: 0;
margin: 0;
padding: 22px 24px 20px;
border: 1px solid var(--hl-rule);
border-top: 4px solid var(--hl-brand);
border-radius: var(--hl-radius);
background: var(--hl-paper);
color: var(--hl-ink-2);
font-family: var(--hl-font-body);
letter-spacing: 0;
list-style: none;
transition: transform var(--hl-dur) ease, box-shadow var(--hl-dur) ease, border-color var(--hl-dur) ease;
}
.hl-note--accent { border-top-color: var(--hl-accent); }
.hl-note:hover { transform: translateY(-3px); box-shadow: var(--hl-shadow-md); }
.hl-note-num {
position: absolute;
right: 18px;
top: 8px;
color: var(--hl-accent);
font-family: var(--hl-font-display);
font-size: 42px;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
opacity: .5;
pointer-events: none;
}
.hl-note h3,
.hl-note h4,
.hl-note-t {
position: static;
bottom: auto;
width: auto;
opacity: 1;
margin: 0 0 8px;
padding-right: 56px;
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: var(--hl-text-lg);
font-weight: 700;
line-height: var(--hl-leading-tight);
letter-spacing: 1px;
}
.hl-note p {
margin: 0 0 10px;
color: var(--hl-ink-2);
font-size: 15px;
line-height: var(--hl-leading-loose);
overflow-wrap: break-word;
}
.hl-note p:last-child { margin-bottom: 0; }
.hl-note a {
display: inline;
color: var(--hl-brand);
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid var(--hl-rule-2);
transition: color var(--hl-dur) ease, border-color var(--hl-dur) ease;
}
.hl-note a:hover { color: var(--hl-brand-strong); border-bottom-color: var(--hl-accent); }
.hl-note ul,
.hl-note ol { margin: 0 0 10px; padding-left: 1.3em; }
.hl-note ul { list-style: disc; }
.hl-note ol { list-style: decimal; }
.hl-note li { margin: 0 0 4px; font-size: 15px; line-height: 1.8; list-style: inherit; }
/* ==========================================================================
13. 表格（含橫向捲動殼，窄螢幕不撐版）
========================================================================== */
.hl-table-scroll {
max-width: 100%;
overflow-x: auto;
border: 1px solid var(--hl-rule);
border-radius: 14px;
background: var(--hl-surface);
box-shadow: var(--hl-shadow-sm);
-webkit-overflow-scrolling: touch;
}
.hl-table {
width: 100%;
min-width: 680px;
border-collapse: separate;
border-spacing: 0;
color: var(--hl-ink-2);
font-family: var(--hl-font-body);
font-size: 14.5px;
letter-spacing: 0;
}
.hl-table caption {
padding: 12px 16px;
color: var(--hl-muted);
font-size: var(--hl-text-sm);
line-height: var(--hl-leading-snug);
text-align: left;
}
.hl-table th {
padding: 13px 16px;
border: 0;
background: var(--hl-brand-strong);
color: var(--hl-on-brand);
font-weight: 700;
line-height: var(--hl-leading-snug);
letter-spacing: 1px;
text-align: left;
vertical-align: middle;
white-space: nowrap;
}
.hl-table thead th:first-child { border-top-left-radius: 13px; }
.hl-table thead th:last-child { border-top-right-radius: 13px; }
.hl-table td {
padding: 13px 16px;
border: 0;
border-top: 1px solid var(--hl-rule);
line-height: 1.65;
vertical-align: middle;
}
.hl-table tbody tr:nth-child(even) td { background: var(--hl-paper); }
.hl-table tbody tr:hover td { background: var(--hl-brand-soft); }
.hl-table td a {
display: inline;
color: var(--hl-brand);
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid var(--hl-rule-2);
}
.hl-table td a:hover { color: var(--hl-brand-strong); border-bottom-color: var(--hl-brand-strong); }
.hl-table td:first-child a {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius-pill);
background: var(--hl-brand-soft);
color: var(--hl-brand-strong);
white-space: nowrap;
transition: background-color var(--hl-dur) ease, border-color var(--hl-dur) ease, color var(--hl-dur) ease;
}
.hl-table td:first-child a:hover {
background: var(--hl-brand);
border-color: var(--hl-brand);
color: var(--hl-on-brand);
}
.hl-table-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin: 14px 0 0;
color: var(--hl-muted);
font-size: 13.5px;
line-height: var(--hl-leading-snug);
}
/* ==========================================================================
14. FAQ 手風琴（原生 details/summary，不需 JS）
========================================================================== */
.hl-faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--hl-space-sm);
align-items: start;
margin: 0;
padding: 0;
list-style: none;
}
.hl-faq-grid--1 { grid-template-columns: minmax(0, 1fr); }
.hl-faq-item {
position: relative;
box-sizing: border-box;
min-width: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--hl-rule);
border-radius: var(--hl-radius);
background: var(--hl-paper);
color: var(--hl-ink-2);
font-family: var(--hl-font-body);
letter-spacing: 0;
list-style: none;
transition: border-color var(--hl-dur) ease, box-shadow var(--hl-dur) ease;
}
.hl-faq-item:hover { border-color: var(--hl-rule-2); box-shadow: var(--hl-shadow-sm); }
.hl-faq-item > summary {
position: relative;
display: block;
padding: 16px 54px 16px 60px;
list-style: none;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.hl-faq-item > summary::-webkit-details-marker { display: none; }
.hl-faq-item > summary::marker { content: ""; }
.hl-faq-item > summary::before {
content: "Q";
position: absolute;
left: 18px;
top: 16px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--hl-accent-strong);
color: var(--hl-on-brand);
font-family: var(--hl-font-display);
font-size: var(--hl-text-base);
font-weight: 700;
line-height: 30px;
letter-spacing: 0;
text-align: center;
}
.hl-faq-item > summary::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
width: 26px;
height: 26px;
margin-top: -13px;
border: 1.5px solid var(--hl-rule-2);
border-radius: 50%;
background: var(--hl-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075463' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
transition: transform var(--hl-dur) ease, background-color var(--hl-dur) ease;
}
.hl-faq-item[open] > summary::after { transform: rotate(45deg); background-color: var(--hl-brand-soft); }
.hl-faq-item summary h3,
.hl-faq-item summary h4,
.hl-faq-q {
position: static;
bottom: auto;
width: auto;
opacity: 1;
margin: 0;
padding: 0;
color: var(--hl-ink);
font-family: var(--hl-font-display);
font-size: 17px;
font-weight: 700;
line-height: var(--hl-leading-snug);
letter-spacing: 0;
overflow-wrap: break-word;
}
.hl-faq-item[open] summary h3,
.hl-faq-item[open] summary h4,
.hl-faq-item[open] .hl-faq-q { color: var(--hl-brand-strong); }
.hl-faq-item > div,
.hl-faq-item > p {
margin: 0;
padding: 0 22px 16px 60px;
color: var(--hl-ink-2);
font-size: 15px;
line-height: var(--hl-leading-loose);
overflow-wrap: break-word;
animation: hl-faq-in .25s ease;
}
.hl-faq-item > div p { margin: 0 0 8px; line-height: var(--hl-leading-loose); }
.hl-faq-item > div p:last-child { margin-bottom: 0; }
.hl-faq-item a {
display: inline;
color: var(--hl-brand);
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid var(--hl-rule-2);
}
.hl-faq-item a:hover { color: var(--hl-brand-strong); border-bottom-color: var(--hl-accent); }
@keyframes hl-faq-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
15. 響應式
主要斷點 900px／520px，另補 760px 讓兩欄版面先降級。
最窄檢查點為 390px（iPhone 12/13/14 寬度）：左右留白 16px，不得出現水平溢出。
========================================================================== */
@media (max-width: 900px) {
:root { --hl-gutter: 18px; }
.hl-panel { padding: 22px 20px 18px; }
.hl-head h2, h2.hl-title { font-size: 26px; }
.hl-intro h1 { font-size: 30px; }
.hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-cta-grid,
.hl-cta-grid--wide-first { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-town-index { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.hl-town-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.hl-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-notes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.hl-cta-grid,
.hl-cta-grid--wide-first { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hl-cta { min-height: 104px; }
.hl-notes,
.hl-notes--3 { grid-template-columns: minmax(0, 1fr); }
.hl-faq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
:root { --hl-gutter: 16px; }
.hl-section { margin-top: 26px; }
.hl-panel,
.hl-quick { margin-top: 26px; padding: 20px 16px 16px; }
.hl-eyebrow { letter-spacing: 3px; text-indent: 3px; }
.hl-head { margin-bottom: 18px; }
.hl-head h2, h2.hl-title { font-size: 23px; }
.hl-head h3, h3.hl-title { font-size: var(--hl-text-md); }
.hl-intro h1 { font-size: 24px; }
.hl-lead { font-size: 15.5px; }
.hl-grid,
.hl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hl-card-img { aspect-ratio: 16 / 9; }
.hl-card-body { gap: 5px; padding: 12px 11px 44px; }
.hl-card-name { font-size: 15px; line-height: var(--hl-leading-tight); }
.hl-card-meta,
.hl-card-note { font-size: 13px; }
.hl-card-cta { right: 11px; bottom: 11px; padding: 4px 10px; font-size: 13px; }
.hl-cta { min-height: 88px; padding: 14px 44px 14px 16px; }
.hl-cta strong, .hl-cta b { font-size: var(--hl-text-md); }
.hl-cta-desc { font-size: 13px; }
.hl-cta-arrow { right: 14px; bottom: 14px; }
.hl-town-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hl-town-grid a { min-height: 40px; padding: 0 10px; font-size: var(--hl-text-sm); }
.hl-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-guides-grid { grid-template-columns: minmax(0, 1fr); }
.hl-guide { min-height: 0; }
.hl-note { padding: 18px 16px 16px; }
.hl-note h3, .hl-note h4, .hl-note-t { padding-right: 46px; font-size: var(--hl-text-md); }
.hl-note-num { right: 14px; font-size: 32px; }
.hl-table { font-size: 13.5px; }
.hl-table th, .hl-table td { padding: 10px 12px; }
.hl-faq-item > summary { padding: 14px 46px 14px 52px; }
.hl-faq-item > summary::before { left: 13px; top: 15px; width: 27px; height: 27px; font-size: 15px; line-height: 27px; }
.hl-faq-item > summary::after { right: 12px; }
.hl-faq-item summary h3, .hl-faq-item summary h4, .hl-faq-q { font-size: var(--hl-text-base); }
.hl-faq-item > div,
.hl-faq-item > p { padding: 0 16px 14px 52px; }
.hl-crumb { justify-content: flex-start; padding-top: 14px; font-size: 13px; }
.hl-anchor-nav a { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.hl-anchor { scroll-margin-top: 76px; }
}
/* 390px 安全網：任何寬度都不得出現水平捲軸 */
@media (max-width: 400px) {
.hl-section,
.hl-panel,
.hl-quick,
.hl-crumb,
.hl-notes,
.hl-grid,
.hl-cta-grid,
.hl-town-grid,
.hl-quick-grid,
.hl-guides-grid,
.hl-faq-grid,
.hl-table-scroll { max-width: 100%; }
.hl-section,
.hl-panel,
.hl-quick,
.hl-card,
.hl-cta,
.hl-note,
.hl-guide,
.hl-faq-item { overflow-wrap: break-word; word-break: normal; }
.hl-card-name { white-space: normal; }
.hl-town-grid a,
.hl-anchor-nav a,
.hl-pill { white-space: normal; }
.hl-quick-grid span { font-size: 10.5px; }
}
/* ==========================================================================
16. 降低動態偏好
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.hl-pill,
.hl-tool,
.hl-card,
.hl-card-cta,
.hl-cta,
.hl-cta-arrow::after,
.hl-crumb a,
.hl-anchor-nav a,
.hl-anchor-nav a::before,
.hl-town-grid a,
.hl-town-arrow,
.hl-quick-grid a,
.hl-guide,
.hl-note,
.hl-faq-item,
.hl-faq-item > summary::after,
.hl-table td:first-child a {
transition: none;
}
.hl-faq-item > div,
.hl-faq-item > p { animation: none; }
.hl-card:hover,
.hl-cta:hover,
.hl-guide:hover,
.hl-note:hover,
.hl-quick-grid a:hover,
.hl-town-grid a:hover,
.hl-pill:hover,
.hl-tool:hover { transform: none; }
}
/* ===== hl-system.css 結束 ===== */