@charset "UTF-8";
/* ==========================================================================
   花蓮包棟民宿網（https://bd.netete.com/）— 攻略頁視覺系統
   檔名：mob/css/hl-guide.css
   建立：2026-09-17
   來源：移植自宜蘭包棟網 mob/css/guide.css 的 .gv-* 系統，色票全數換成花蓮品牌色

   【用途】
   攻略／指南類長文頁專用的版面元件庫：hero 標頭、重點指標列、泳道對照表、
   區域卡、行前檢查清單、季節條、時程軸、FAQ、鄉鎮導流按鈕、延伸查找區塊。
   全檔自我作用域 —— 每一條選擇器不是包在 .hlg 容器內，就是以 .hlg- 開頭，
   不會外溢到首頁、13 個鄉鎮頁或 ad 系列頁。

   【命名規則】
   前綴一律 .hlg-（hualien guide）。刻意不用 .hl-，是為了與頁框樣式表
   hl-system.css 的 .hl-* 元件庫區隔；兩份樣式表可以同頁併存互不干擾。

   【掛載順序】必須排在所有舊樣式表之後（本檔最後一個載入）：
     mob/css/main.css
     header/css/*.css
     mob/css/hl-system.css      ← 批次 6 建立，尚未存在時可略過
     mob/css/hl-guide.css       ← 本檔
   本檔第 11 節是「防禦區」，專門覆寫 main.css 的 a{display:block}（第 23 行）
   與 .township2 的 5rem 上邊距／7rem 下內距（第 2689 行）。這兩條是類別選擇器
   或元素選擇器，本檔靠「同等權重＋後載入」取勝，排在 main.css 之前會失效。

   【頁面骨架】
     <div class="township2 hlg"> … </div>
   .township2 沿用舊版頁框讓站頭站尾對齊，.hlg 負責把它的間距重設掉。

   【回退方式】
   1. 頁面 <link> 移除這一行即可 —— 本檔與站上任何既有選擇器零重疊，
      移除後該頁退回瀏覽器預設的段落流，不會破版，其他頁面完全不受影響。
   2. 本檔是純新增檔，沒有修改 main.css 或任何既有樣式表；刪檔即 100% 還原。
   3. 只想停用單一元件時，在 HTML 上拿掉該元件的 class 就好，不必改 CSS。

   【色票】沿用宜蘭的 9 個角色結構，值全部換成花蓮品牌色（第 1 節）：
     珊瑚紅 #eb6877 = 裝飾主色（線條、邊框、色塊、漸層、hover）
     藍綠   #0b7285 = 文字型次強調（小標、連結、重點字、focus 外框、高亮點）
   這個分工沿用花蓮既有鄉鎮頁的慣例（h2 左側條 #eb6877、內文連結 #0b7285），
   所以本檔與舊頁同頁併存時不會出現「一半宜蘭綠一半花蓮紅」的兩截色。
   要整體換色只需改第 1 節的 11 個變數，其餘規則不必動。

   【行動裝置】
   已在 390px 寬度下檢查：容器側邊距 16px、所有格線都用 minmax(0,1fr)、
   可能過長的文字節點都給了 min-width:0 或 ellipsis，不會產生水平溢出。
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap");

/* --- 1. 容器、色票、基礎排版 ------------------------------------------- */
.hlg{
  --coral:#eb6877;       /* 主裝飾色：線條／邊框／色塊／hover（宜蘭原 --pool） */
  --coral-deep:#c2405a;  /* 深珊瑚：重點字、勾選符號、漸層尾（原 --pool-deep） */
  --coral-soft:#f8c3cb;  /* 中淡珊瑚：波浪、卡片上緣、底線漸層（原 --water） */
  --mist:#fdf0f2;        /* 極淡珊瑚底（原 --mist） */
  --teal:#0b7285;        /* 次強調：小標、連結、高亮點、focus（原 --sun 的角色） */
  --teal-deep:#08596a;   /* 深藍綠：hover 與漸層 */
  --deck:#e9f3f5;        /* 第二底色：藍綠淡底（原 --deck 的暖米色） */
  --ink:#2b2126;         /* 主文字 */
  --body:#4a3a3f;        /* 內文次色（宜蘭原本是硬寫死的灰綠，這裡收成變數） */
  --muted:#7b686e;       /* 弱文字：註解、日期、補充 */
  --line:#f2dee2;        /* 邊線 */
  max-width:1160px;margin:0 auto;padding:0 22px 10px;
  color:var(--ink);font-size:16px;line-height:1.95;text-align:left;
  overflow-wrap:break-word
}
/* 站上 box-sizing 來源不一（main.css 沒設、bootstrap 有設），在此鎖死，
   確保 padding 不會在窄螢幕把元件撐出容器外 */
.hlg,.hlg *,.hlg *:before,.hlg *:after{box-sizing:border-box}
.hlg img,.hlg svg{max-width:100%;height:auto}
.hlg h1,.hlg h2,.hlg h3,.hlg .hlg-pull{font-family:"Noto Serif TC","Noto Serif CJK TC","PMingLiU",serif}
.hlg a:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}

/* --- 2. 麵包屑 ---------------------------------------------------------- */
/* 同時支援 <nav class="hlg-crumb"><a>…</a></nav> 與 <ul class="hlg-crumb"><li> */
.hlg-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;justify-content:flex-start;
  max-width:none;margin:0 0 10px;padding:0;list-style:none;font-size:13px;line-height:1.7;color:var(--muted)}
.hlg-crumb li{display:inline-flex;align-items:center;gap:8px}
.hlg-crumb li+li:before{content:"\203A";color:var(--coral);font-weight:700}
.hlg-crumb a{color:var(--teal);text-decoration:none}
.hlg-crumb a:hover{color:var(--teal-deep);text-decoration:underline}

/* --- 3. hero 標頭 ------------------------------------------------------- */
.hlg-hero{position:relative;max-width:100%;margin:6px 0 26px;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--mist) 0%,var(--mist) 64%,var(--coral-soft) 64%,#f4a7b2 100%)}
.hlg-hero-in{position:relative;z-index:2;padding:44px 40px 32px;max-width:none}
.hlg-eyebrow{font-size:12px;letter-spacing:4px;color:var(--coral-deep);font-weight:700;margin:0 0 10px}
.hlg-hero h1{font-size:42px;line-height:1.25;letter-spacing:2px;margin:0 0 14px;color:var(--ink);font-weight:700}
.hlg-dek{font-size:17px;line-height:1.9;color:var(--body);margin:0 0 10px;max-width:none}
.hlg-date{font-size:12.5px;color:var(--muted);margin:0;letter-spacing:.5px}
/* 波浪 SVG：貼在 hero 的色帶交界處，超出部分由 .hlg-hero 的 overflow:hidden 切掉 */
.hlg-wave{position:absolute;left:-2%;width:104%;height:46px;top:calc(64% - 23px);z-index:1;fill:var(--coral-soft)}
.hlg-wave path{animation:hlg-drift 9s ease-in-out infinite alternate}
@keyframes hlg-drift{from{transform:translateX(0)}to{transform:translateX(-200px)}}
@media (prefers-reduced-motion:reduce){.hlg-wave path{animation:none}}
/* hero 變體 */
.hlg-hero--plain{background:linear-gradient(160deg,var(--mist) 0%,#fbe3e7 60%,var(--coral-soft) 100%)}
.hlg-hero--plain .hlg-wave{display:none}
.hlg-hero--teal{background:linear-gradient(160deg,#f5fafb 0%,var(--deck) 55%,#cfe6ea 100%)}
.hlg-hero--teal .hlg-wave{display:none}
.hlg-hero--teal .hlg-eyebrow{color:var(--teal)}
.hlg-hero--teal .hlg-gauge li{border-left-color:var(--teal)}
.hlg-hero--teal .hlg-gauge li:first-child{border-left-color:var(--coral)}

/* --- 4. 重點指標列（hero 內） ------------------------------------------ */
.hlg-gauge{position:relative;z-index:2;list-style:none;margin:0;padding:18px 34px 26px;display:flex;gap:26px;flex-wrap:wrap}
.hlg-gauge li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:3px solid var(--coral);
  min-width:150px;max-width:100%}
.hlg-gauge li:first-child{border-left-color:var(--teal)}
.hlg-gauge b{font-size:16px;color:var(--ink);letter-spacing:1px}
.hlg-gauge span{font-size:13px;color:var(--body)}

/* --- 5. 章節與內文 ------------------------------------------------------ */
.hlg-body{max-width:none;margin:0 auto}
.hlg-sec{margin:0 0 34px}
.hlg h2{font-size:26px;line-height:1.45;letter-spacing:1px;margin:0 0 14px;padding-bottom:10px;position:relative;color:var(--ink)}
.hlg h2:after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--coral),var(--coral-soft))}
.hlg h3{font-size:18px;line-height:1.6;margin:0 0 6px;color:var(--teal)}
.hlg p{margin:0 0 12px}
.hlg-meta{font-size:12.5px;color:var(--muted);margin:0 0 6px;letter-spacing:.5px}
.hlg-lead{font-size:17px;line-height:1.9;color:var(--body);margin:0 0 10px;max-width:680px}
.hlg-note{font-size:14px;color:var(--muted);margin-top:10px}
.hlg-links{font-size:14px;color:var(--muted);margin:0 0 34px}
.hlg-pull{margin:16px 0 0;padding:14px 18px;border-left:3px solid var(--coral);background:var(--mist);
  font-size:17px;line-height:1.7;color:var(--ink)}
.hlg-pull em{font-style:normal;color:var(--coral-deep);font-weight:700}

/* --- 6. 泳道對照表 ------------------------------------------------------ */
.hlg-lanes{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.hlg-lanes li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;
  background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(235,104,119,.055) 46px 48px)}
.hlg-lanes li+li{border-top:2px dashed var(--line)}
.hlg-lane-k{font-weight:700;color:var(--teal);letter-spacing:1px}
.hlg-lane-v{font-size:16px;font-weight:700;color:var(--ink)}
.hlg-lane-n{font-size:13px;color:var(--muted)}

/* --- 7. 區域卡 / 檢查清單 / 季節條 / 時程軸 ---------------------------- */
.hlg-regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hlg-region{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 18px;border:1px solid var(--line);
  border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hlg-region b{font-size:19px;font-family:"Noto Serif TC","Noto Serif CJK TC",serif;color:var(--teal)}
.hlg-region span{font-size:14px;line-height:1.8;color:var(--body)}
.hlg-region:hover,.hlg-region:focus{border-color:var(--coral);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(194,64,90,.14);color:var(--ink);text-decoration:none}

.hlg-check{list-style:none;margin:0;padding:18px 20px;background:var(--deck);border-radius:14px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.hlg-check li{position:relative;padding-left:28px;font-size:15px;line-height:1.7}
.hlg-check li:before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;
  border:2px solid var(--coral);border-radius:4px;background:#fff}
.hlg-check li:after{content:"";position:absolute;left:5px;top:7px;width:5px;height:9px;
  border:solid var(--coral-deep);border-width:0 2px 2px 0;transform:rotate(45deg)}
.hlg-check li:first-child:before,.hlg-check li:first-child:after{border-color:var(--teal)}

.hlg-season{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,5fr);gap:8px}
.hlg-season li{padding:14px 14px 12px;border-radius:12px;background:var(--mist);border-top:4px solid var(--coral-soft)}
.hlg-season li.is-peak{border-top-color:var(--coral)}
.hlg-season li.is-warm{border-top-color:var(--teal);background:var(--deck)}
.hlg-season b{display:block;font-size:15px;letter-spacing:1px;margin-bottom:4px;color:var(--ink)}
.hlg-season span{font-size:13.5px;line-height:1.7;color:var(--body)}

.hlg-timeline{list-style:none;margin:0;padding:0;position:relative}
.hlg-timeline:before{content:"";position:absolute;left:78px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--coral-soft),var(--coral))}
.hlg-timeline li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:26px;padding:0 0 18px;position:relative}
.hlg-timeline li:last-child{padding-bottom:0}
.hlg-timeline b{font-family:"Noto Serif TC","Noto Serif CJK TC",serif;font-size:15px;color:var(--teal);text-align:right;line-height:1.5}
.hlg-timeline li:after{content:"";position:absolute;left:72px;top:6px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--coral)}
.hlg-timeline li.is-now:after{border-color:var(--teal);background:var(--teal)}
.hlg-timeline span{font-size:15px;line-height:1.8;color:var(--body)}

/* --- 8. FAQ ------------------------------------------------------------- */
.hlg-faq div{padding:14px 0;border-top:1px solid var(--line);margin:0}
.hlg-faq div:last-of-type{border-bottom:1px solid var(--line)}
.hlg-faq h3{font-size:17px;margin:0 0 6px;color:var(--teal);font-family:"Noto Serif TC","Noto Serif CJK TC",serif}
.hlg-faq p{margin:0;font-size:15.5px;color:var(--body)}

/* --- 9. 導流元件 -------------------------------------------------------- */
/* 9-1 入口卡片格（宜蘭原 .gv-people）。本檔只管版型，卡片上的文案由頁面決定 */
.hlg-people{margin:0 0 38px;padding:26px 26px 24px;border-radius:14px;
  background:linear-gradient(135deg,var(--mist),#fff);border:1px solid var(--line)}
.hlg-people-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.hlg-people-head h2{margin:0;padding:0}
.hlg-people-head h2:after{display:none}
.hlg-people-head p{margin:0;font-size:14px;color:var(--muted);line-height:1.7}
.hlg-people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hlg-people-link{display:flex;min-height:150px;min-width:0;flex-direction:column;justify-content:space-between;gap:14px;
  padding:18px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;
  box-shadow:0 10px 24px rgba(194,64,90,.07);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hlg-people-link:hover,.hlg-people-link:focus{transform:translateY(-3px);box-shadow:0 18px 34px rgba(194,64,90,.14);
  border-color:var(--coral);color:var(--ink);text-decoration:none}
.hlg-people-link i{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--mist);color:var(--coral-deep);font-size:15px;font-style:normal;margin-bottom:10px}
.hlg-people-link strong{display:block;font-size:16px;line-height:1.4;margin-bottom:4px;color:var(--ink)}
.hlg-people-link span{display:block;font-size:13px;line-height:1.6;color:var(--muted)}
.hlg-people-link em{font-style:normal;font-weight:700;font-size:13px;color:var(--teal);letter-spacing:.3px}

/* 9-2 加碼筆記區塊 */
.hlg-extra{padding:22px 26px 20px;border-radius:14px;background:var(--mist);border-left:4px solid var(--coral);margin:0 0 38px}
.hlg-extra h2{font-size:22px;margin-bottom:10px}
.hlg-extra h2:after{display:none}
.hlg-extra p{font-size:15px;color:var(--body);margin:0 0 10px}
/* 用兩層類別取得 0,2,0 權重壓過上面的 .hlg-extra p，不必動用 !important */
.hlg-extra .hlg-extra-links{margin:6px 0 0;font-size:14px;color:var(--muted)}
.hlg-extra-links a{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;margin:4px 6px 0 0;color:var(--teal);text-decoration:none;font-weight:700;
  transition:background .2s,border-color .2s,color .2s}
.hlg-extra-links a:hover{background:var(--coral);border-color:var(--coral);color:#fff;text-decoration:none}

/* 9-3 選房建議：左說明文、右鄉鎮磁磚 */
.hlg-advice{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;
  padding:26px 30px;border-radius:16px;background:linear-gradient(135deg,var(--mist),#fff 70%);
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(194,64,90,.06)}
.hlg-advice .hlg-eyebrow{margin:0 0 4px}
.hlg-advice h2{font-size:24px;margin:0 0 12px}
.hlg-advice-txt p:last-child{margin:0;font-size:15.5px;line-height:1.95;color:var(--body)}
.hlg-advice-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hlg-advice-tiles a{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 14px;background:#fff;
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);
  box-shadow:0 6px 16px rgba(194,64,90,.06);transition:transform .2s,box-shadow .2s,border-color .2s}
.hlg-advice-tiles a:hover{border-color:var(--coral);transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(194,64,90,.14);color:var(--ink);text-decoration:none}
.hlg-advice-tiles b{font-family:"Noto Serif TC","Noto Serif CJK TC",serif;font-size:16px;color:var(--teal);letter-spacing:1px}
.hlg-advice-tiles span{font-size:12px;color:var(--muted)}
.hlg-advice-tiles a.is-all{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,var(--coral),var(--coral-deep));border-color:transparent}
.hlg-advice-tiles a.is-all b,.hlg-advice-tiles a.is-all span{color:#fff}
.hlg-advice-tiles a.is-all:after{content:"\2192";color:#fff;font-weight:700}

/* 9-4 鄉鎮導流按鈕（13 鄉鎮；不顯示家數） */
.hlg-townbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin:14px 0 0}
.hlg-townbtns a{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 40px 12px 16px;
  background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);
  box-shadow:0 6px 16px rgba(194,64,90,.06);transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
.hlg-townbtns a b{font-family:"Noto Serif TC","Noto Serif CJK TC",serif;font-size:18px;color:var(--teal);letter-spacing:1px;
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlg-townbtns a span{font-size:12px;color:var(--muted);letter-spacing:.5px}
.hlg-townbtns a i{position:absolute;right:14px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  border:1px solid var(--line);background:var(--mist);color:var(--coral-deep);font-style:normal;font-size:13px;
  line-height:22px;text-align:center;transition:.2s}
.hlg-townbtns a:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:0 12px 24px rgba(194,64,90,.14);
  text-decoration:none;color:var(--ink)}
.hlg-townbtns a:hover i{background:var(--coral);border-color:var(--coral);color:#fff;transform:translateX(3px)}

/* 9-5 攻略互連卡 */
.hlg-guides{background:var(--mist);border:0;border-radius:14px;padding:22px 24px 18px;box-shadow:none;margin:0 0 38px}
.hlg-guides h2{font-size:20px}
.hlg-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0 0}
.hlg-guide{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;background:#fff;
  border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;transition:border-color .2s}
.hlg-guide:hover{border-color:var(--coral);color:var(--ink);text-decoration:none}
.hlg-guide b{font-size:15px;color:var(--teal);line-height:1.5}
.hlg-guide span{font-size:12.5px;color:var(--muted);line-height:1.6}

/* 9-6 工具膠囊 */
.hlg-tool{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--line);color:var(--teal);font-size:13.5px;font-weight:700;text-decoration:none;transition:.2s}
.hlg-tool:hover{background:var(--teal);border-color:var(--teal);color:#fff;text-decoration:none}

/* 9-7 延伸查找區塊：小標＋鄉鎮按鈕格＋工具膠囊列 */
.hlg-rel{padding:26px 28px 22px;border-radius:14px;background:var(--mist);border-left:4px solid var(--coral);margin:0 0 38px}
.hlg-rel h2{margin:0 0 6px;padding:0}
.hlg-rel h2:after{display:none}
.hlg-rel-t{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:12px;font-weight:700;letter-spacing:3px;color:var(--teal)}
.hlg-rel-t i{display:inline-block;width:22px;height:2px;background:var(--coral);font-style:normal}
.hlg-rel .hlg-townbtns{margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.hlg-rel-tools{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding-top:16px;border-top:1px dashed var(--line)}

/* --- 10. 響應式 --------------------------------------------------------- */
@media (max-width:991px){
  .hlg-people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hlg-people-head{display:block}
  .hlg-people-head h2{margin-bottom:6px}
}
@media (max-width:768px){
  .hlg-hero h1{font-size:30px}
  .hlg-hero-in{padding:26px 20px 18px}
  .hlg-gauge{padding:14px 20px 22px;gap:14px}
  .hlg-lanes li{grid-template-columns:minmax(0,1fr);gap:2px}
  .hlg-regions,.hlg-check,.hlg-season{grid-template-columns:minmax(0,1fr)}
  .hlg-advice{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 18px}
  .hlg-advice-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hlg-people-grid{grid-template-columns:minmax(0,1fr)}
  .hlg-people{padding:20px 16px}
  .hlg-timeline:before{left:10px}
  .hlg-timeline li{grid-template-columns:minmax(0,1fr);gap:4px;padding-left:30px}
  .hlg-timeline b{text-align:left}
  .hlg-timeline li:after{left:4px}
  .hlg-townbtns{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hlg-townbtns a{padding:10px 34px 10px 12px}
  .hlg-townbtns a b{font-size:16px}
  .hlg-rel{padding:20px 16px 16px}
  .hlg-rel .hlg-townbtns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 390px 級距：把側邊距收到 16px，留給兩欄按鈕格足夠寬度 */
@media (max-width:480px){
  .hlg,.township2.hlg{padding:0 16px 10px}
  .hlg-hero{border-radius:14px}
  .hlg-extra{padding:18px 16px 14px}
  .hlg-guides{padding:18px 16px 14px}
  .hlg-advice-tiles{gap:8px}
}

/* ==========================================================================
   11. 防禦區 —— 對抗舊版全域 CSS
   花蓮與宜蘭的舊底同源（同一套 main.css 血統），宜蘭遇到的兩顆地雷這裡一樣有，
   所以整段照移。刪掉任何一條都會在攻略頁看到破版。
   ========================================================================== */

/* 11-1 main.css 第 23 行 a{display:block}：會把每個內文連結撐成整行。
        先在 .hlg 範圍內全部壓回行內，再把真正需要區塊／彈性排版的連結還原。 */
.hlg a{display:inline}
.hlg p a{display:inline !important;white-space:normal}
.hlg .hlg-region,.hlg .hlg-people-link,.hlg .hlg-guide,
.hlg .hlg-advice-tiles a,.hlg .hlg-townbtns a{display:flex}
.hlg .hlg-extra-links a,.hlg .hlg-tool{display:inline-flex}
/* 逃生門：日後若把 hl-system.css 的卡片元件嵌進 .hlg 裡，它的 <a> 會被上面
   那條 .hlg a{display:inline} 壓成行內。兩種解法擇一：
   (a) 把該元件的選擇器補進上面的還原清單；(b) 在該 <a> 上加 .hlg-keep。 */
.hlg .hlg-keep{display:flex}
.hlg .hlg-keep-inline{display:inline-flex}

/* 11-2 區域卡結構固定：舊全域規則可能讓 b／span 浮動或被撐寬 */
.hlg-regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hlg-region{display:flex !important;flex-direction:column;gap:6px;white-space:normal}
.hlg-region b,.hlg-region span{display:block;width:auto;float:none}
@media (max-width:768px){.hlg-regions{grid-template-columns:minmax(0,1fr)}}

/* 11-3 main.css 第 2689 行 .township2{width:1200px;margin:5rem auto 0;padding:0 0 7rem}
        與其 450px 斷點。攻略頁沿用 .township2 當外框，這裡把間距重設掉。 */
.township2.hlg{width:auto;max-width:1160px;margin:0 auto;padding:0 22px 10px;min-height:0}
/* 上面這條權重 0,2,0 會壓過第 10 節 480px 斷點裡的側邊距，所以窄螢幕的覆寫
   必須寫在它後面（媒體查詢本身不增加權重，靠的是載入順序） */
@media (max-width:480px){.township2.hlg{padding:0 16px 10px}}

/* 11-4 ul 預設：main.css 的 *{padding:0;margin:0} 與 ul{list-style:none} 已經
        把清單樣式清空，本檔各元件都自帶 padding/margin，不再依賴瀏覽器預設。
        這裡只補回內文清單（不帶 .hlg- 類別的 ul/ol）該有的縮排與項目符號。 */
.hlg-body ul:not([class]),.hlg-body ol:not([class]){margin:0 0 12px;padding-left:1.6em}
.hlg-body ul:not([class]){list-style:disc}
.hlg-body ol:not([class]){list-style:decimal}
.hlg-body ul:not([class]) li,.hlg-body ol:not([class]) li{margin:0 0 4px}

/* ==========================================================================
   12. 頁框整合（2026-09-22 批次 7）
   攻略頁改掛在 inc/hl_head.php 的 .gyp 頁框內（<div class="gyp hlg">），不再用 .township2。
   頁框的內嵌樣式排在所有 <link> 之後，.gyp 與 .hlg 同權重時頁框會贏，所以字級與行高用 .gyp.hlg（0,2,0）拿回來。
   另外三個元件依本站內容調整欄寬：對照表第三欄放得下整句備註、季節條三欄等寬、時程軸標籤欄放得下四個字。
   窄螢幕的覆寫必須寫在這一節的桌機規則之後（媒體查詢不增加權重，靠順序取勝）。
   ========================================================================== */
.gyp.hlg{padding:0 22px 10px;font-size:16px;line-height:1.95;color:var(--ink)}
.gyp.hlg .gy-crumb{margin-bottom:8px}
.hlg h2{border-left:0;padding-left:0}   /* 頁框的 h2 左側色條與本檔的底線二選一：攻略頁用底線 */
.hlg-hero{margin-top:8px}
.hlg-lanes li{grid-template-columns:130px minmax(0,1.1fr) minmax(0,1fr)}
.hlg-lane-n{font-size:13.5px;line-height:1.7}
.hlg-season{grid-template-columns:repeat(3,minmax(0,1fr))}
.hlg-timeline:before{left:110px}
.hlg-timeline li{grid-template-columns:96px minmax(0,1fr)}
.hlg-timeline li:after{left:104px}
.hlg-guide-tag{display:inline-block;font-size:12px;letter-spacing:3px;color:var(--coral-deep);font-weight:700}
.hlg-guide--all{background:var(--deck);border-color:transparent}
.hlg-guide--all b{color:var(--teal-deep)}
.hlg-rel .hlg-rel-tools+.hlg-rel-t{margin-top:22px}
@media (max-width:768px){.hlg-lanes li{grid-template-columns:minmax(0,1fr);gap:2px}.hlg-season{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.hlg-timeline:before{left:10px}.hlg-timeline li{grid-template-columns:minmax(0,1fr);gap:4px;padding-left:30px}.hlg-timeline b{text-align:left}.hlg-timeline li:after{left:4px}}
@media (max-width:480px){.gyp.hlg{padding:0 16px 10px}}