/* ── 花蓮分區站版面（src/templates/tb-home.css.tpl；2026-10-29 視覺改版） ──
   字型：Noto Serif TC（標題）＋ Noto Sans TC（內文），由 zone.tpl 自 Google Fonts 載入。
   原則：層級靠樣式差異而不是同一種卡片——比較表是正式表格、怎麼選用色條、名單是細框卡片、常見問題是細線手風琴。 */
.tb-page,.tb-page *{box-sizing:border-box}
.tb-page{--tb-ink:#262522;--tb-deep:#2f5d3a;--tb-accent:#cf9a2b;--tb-muted:#6b665e;--tb-soft:#edf4ea;--tb-line:#cfdfcb;--tb-paper:#fcfbf8;background:var(--tb-paper);color:var(--tb-ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:16px;line-height:1.75}
.tb-page a{color:inherit;text-decoration:none}
.tb-shell{width:min(1180px,calc(100% - 40px));margin:0 auto}
/* 主視覺：標題、答案框、本站照片＋路線帶 */
.tb-hero{padding:44px 0 14px}
.tb-hero h1{margin:0;color:var(--tb-deep);font-family:"Noto Serif TC","PMingLiU",serif;font-size:38px;font-weight:900;line-height:1.3;letter-spacing:.01em;max-width:24em}
.tb-answer{max-width:800px;margin:20px 0 0;padding:2px 0 2px 20px;border-left:3px solid var(--tb-accent);color:#3f3b35;font-size:17px;line-height:1.95;text-align:left}
.tz-hero-photo{position:relative;margin:30px 0 0;border-radius:18px;overflow:hidden;background:var(--tb-soft)}
.tz-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.tz-ribbon{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;padding:36px 22px 16px;background:linear-gradient(180deg,rgba(20,18,14,0),rgba(20,18,14,.74))}
.tz-ribbon-t{margin-right:16px;color:rgba(255,255,255,.82);font-size:13px;font-weight:700;letter-spacing:.06em}
.tz-ribbon ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;list-style:none;margin:0;padding:0}
.tz-ribbon li{display:flex;align-items:center}
.tz-ribbon li+li:before{content:"";width:26px;height:2px;margin:0 6px;background:rgba(255,255,255,.5)}
.tz-ribbon a{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:15px;font-weight:800;line-height:1.3;transition:background .2s}
.tz-ribbon a:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tb-accent);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.tz-ribbon a:hover,.tz-ribbon a:focus-visible{background:var(--tb-accent)}
/* 區塊標題：色條＋襯線字 */
.tb-section{padding:0 0 64px;scroll-margin-top:24px}
.tb-head{margin-bottom:22px}
.tb-kicker{display:none}
.tb-head h2,.tb-about h2{position:relative;margin:0;padding-left:18px;color:var(--tb-deep);font-family:"Noto Serif TC","PMingLiU",serif;font-size:30px;font-weight:900;line-height:1.35}
.tb-head h2:before,.tb-about h2:before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:5px;border-radius:3px;background:var(--tb-accent)}
.tb-head p{margin:10px 0 0 18px;max-width:62em;color:var(--tb-muted);font-size:15px;line-height:1.8}
/* 篩選列 */
.tb-search{margin:0 0 22px;padding:16px 18px;border:1px solid var(--tb-line);border-radius:14px;background:#fff}
.tb-keywords{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;font-size:14px}
.tb-keywords>span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 4px;color:var(--tb-deep);font-weight:900;white-space:nowrap}
.tb-keywords>span i{color:var(--tb-accent)}
.tb-keyword-list{display:flex;flex-wrap:wrap;gap:8px}
.tb-keywords button{min-height:40px;padding:8px 14px;border:1px solid var(--tb-line);border-radius:999px;background:var(--tb-paper);color:var(--tb-ink);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tb-keywords button i{color:var(--tb-accent);margin-right:6px}
.tb-keywords button:hover{border-color:var(--tb-deep)}
.tb-keywords button.is-active{background:var(--tb-deep);color:#fff;border-color:var(--tb-deep)}
.tb-keywords button.is-active i{color:#fff}
.tb-search .tb-keywords+.tb-keywords{margin-top:12px;padding-top:12px;border-top:1px dashed var(--tb-line)}
/* 名單卡片：細框、無陰影，滑過加深框線 */
.tb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tb-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--tb-line);border-radius:12px;background:#fff;transition:border-color .2s,transform .2s}
.tb-card:hover{border-color:var(--tb-deep);transform:translateY(-2px)}
.tb-card>a:first-child{display:block}
.tb-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--tb-soft)}
.tb-card-body{display:flex;flex:1;flex-direction:column;padding:16px 16px 14px}
.tz-town{margin:0 0 4px;color:var(--tb-accent);font-size:13px;font-weight:800;letter-spacing:.04em}
.tb-card h3{margin:0 0 10px;font-family:"Noto Serif TC","PMingLiU",serif;font-size:19px;font-weight:900;line-height:1.4}
.tb-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tb-chip-row span{padding:3px 9px;border-radius:999px;background:var(--tb-soft);color:var(--tb-deep);font-size:12px;font-weight:700}
.tb-desc{margin:0 0 14px;color:var(--tb-muted);font-size:13.5px;line-height:1.7}
.tb-card-foot{display:flex;align-items:center;justify-content:flex-end;margin-top:auto}
.tb-card-foot span{display:flex;justify-content:flex-end;width:100%}
.tb-card-foot a{display:inline-flex;align-items:center;gap:6px;padding:6px 0;border-bottom:2px solid var(--tb-accent);color:var(--tb-deep)!important;font-size:14px;font-weight:800;line-height:1.3;transition:color .15s}
.tb-card-foot a:hover{color:var(--tb-accent)!important}
.tb-detail{display:none!important}
.tb-empty{display:none;margin-bottom:18px;padding:14px 18px;border:1px solid var(--tb-line);border-radius:10px;background:#fff;color:var(--tb-muted)}
.tb-listmore{margin:24px 0 0 18px;color:var(--tb-muted);font-size:14px}
.tb-listmore a{color:var(--tb-deep);font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* 怎麼選：色條清單，不做卡片 */
.tb-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 32px}
.tb-guide{display:flex;gap:16px;padding:6px 0 6px 18px;border-left:3px solid var(--tb-line)}
.tb-guide i{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tb-deep);color:#fff;font-size:17px}
.tb-guide h3{margin:4px 0 8px;font-family:"Noto Serif TC","PMingLiU",serif;font-size:19px;font-weight:900;line-height:1.4}
.tb-guide p{margin:0;color:var(--tb-muted);font-size:15px;line-height:1.8}
/* 關於本區：整幅淡色底 */
.tb-about-wrap{margin:0 0 64px;padding:56px 0;background:var(--tb-soft)}
.tb-about-text{display:block}
.tb-about-panel{max-width:860px;margin:0 auto}
.tb-about-panel p{margin:16px 0 0;color:#3f3b35;font-size:16px;line-height:2}
.tb-l3links{margin:26px 0 0}
.tb-l3links-t{display:block;margin:0 0 10px;color:var(--tb-deep);font-size:14px;font-weight:800;letter-spacing:.04em}
.tb-endnav{display:flex;flex-wrap:wrap;gap:8px}
.tb-endpill{display:inline-block;padding:7px 15px;border:1px solid var(--tb-deep);border-radius:999px;background:#fff;color:var(--tb-deep)!important;font-size:14px;line-height:1.4;text-decoration:none!important;transition:background .18s,color .18s}
.tb-endpill:hover{background:var(--tb-deep);color:#fff!important}
/* 常見問題：細線手風琴 */
.tb-faq details{border-bottom:1px solid var(--tb-line)}
.tb-faq details:first-of-type{border-top:1px solid var(--tb-line)}
.tb-faq summary{position:relative;cursor:pointer;list-style:none;padding:18px 44px 18px 18px;font-size:17px;font-weight:800;line-height:1.5}
.tb-faq summary::-webkit-details-marker{display:none}
.tb-faq summary:after{content:"";position:absolute;right:14px;top:50%;width:12px;height:12px;margin-top:-6px;border-right:2px solid var(--tb-accent);border-bottom:2px solid var(--tb-accent);transform:rotate(45deg);transition:transform .2s}
.tb-faq details[open] summary:after{transform:rotate(-135deg);margin-top:-2px}
.tb-faq p{margin:0;padding:0 18px 20px;max-width:62em;color:var(--tb-muted);line-height:1.85}
.tb-hublink{margin:0 0 64px;padding:0 18px;color:var(--tb-muted);font-size:15px}
.tb-hublink a{color:var(--tb-deep);font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* 廣告區（內容由 ads.php 維護，樣式在那個檔） */
.tb-ads{margin:30px 0 48px;padding:10px 0 26px;background:#fff;border-top:1px solid var(--tb-line);border-bottom:1px solid var(--tb-line);overflow:hidden}
.tb-ads img{max-width:100%}
/* 回頂端 */
#tbGotop{position:fixed;right:22px;bottom:26px;width:48px;height:48px;border-radius:50%;background:#2f5d3a;color:#fff;text-align:center;line-height:48px;font-size:17px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.22);display:none;z-index:2147483000}
#tbGotop.is-show{display:block}
#tbGotop:hover{background:#cf9a2b}
.tb-page a:focus-visible,.tb-keywords button:focus-visible,.tb-faq summary:focus-visible{outline:3px solid var(--tb-accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tb-card,.tb-card:hover{transform:none}}
@media(max-width:991px){.tb-keywords{grid-template-columns:1fr;gap:8px}.tb-grid{grid-template-columns:1fr 1fr}.tb-guide-grid{grid-template-columns:1fr}.tb-hero h1{font-size:32px}}
@media(max-width:640px){.tb-shell{width:min(100% - 28px,1180px)}.tb-hero{padding-top:28px}.tb-hero h1{font-size:26px}.tb-answer{font-size:15.5px;padding-left:14px;margin-top:14px}.tz-hero-photo{margin-top:20px;border-radius:12px}.tz-hero-photo img{aspect-ratio:3/2}.tz-ribbon{padding:30px 12px 10px}.tz-ribbon-t{display:none}.tz-ribbon a{font-size:13px;padding:5px 10px 5px 8px}.tz-ribbon li+li:before{width:12px;margin:0 3px}
.tb-section{padding-bottom:48px}.tb-head h2{font-size:25px;padding-left:14px}.tb-head p{margin-left:14px;font-size:14px}
.tb-search{padding:12px}.tb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tb-card-body{padding:10px}.tb-card h3{font-size:16px;line-height:1.35}.tb-chip-row{gap:4px;margin-bottom:8px}.tb-chip-row span{font-size:11px;padding:3px 6px}.tb-desc{display:none}.tb-card-foot{justify-content:flex-start}.tb-card-foot span{justify-content:flex-start}.tb-card-foot a{font-size:13px}
.tb-guide{padding-left:14px}.tb-about-wrap{padding:40px 0;margin-bottom:48px}.tb-faq summary{font-size:16px;padding:16px 40px 16px 14px}.tb-faq p{padding:0 14px 18px}.tb-hublink{padding:0 14px;margin-bottom:48px}.tb-ads{margin:22px 0 36px}}

/* ── 分區站增補（src/templates/zone-extra.css.tpl；2026-10-29 視覺改版） ── */
.tz-body{margin:0;background:#fcfbf8}
.tb-banner{aspect-ratio:3/1;max-height:440px}
/* 住哪一站比較表：正式表格，深色表頭、鄉鎮欄淡色底 */
.tz-compare-wrap{overflow-x:auto;border:1px solid var(--tb-line);border-radius:14px;background:#fff}
.tz-compare{width:100%;border-collapse:collapse;font-size:15px;line-height:1.75}
.tz-compare th,.tz-compare td{padding:16px 18px;border-bottom:1px solid var(--tb-line);text-align:left;vertical-align:top}
.tz-compare thead th{background:var(--tb-deep);color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;white-space:nowrap;border-bottom:0}
.tz-compare tbody th{background:var(--tb-soft);color:var(--tb-deep);font-family:"Noto Serif TC","PMingLiU",serif;font-size:19px;font-weight:900;line-height:1.4;white-space:nowrap}
.tz-compare tbody tr:last-child th,.tz-compare tbody tr:last-child td{border-bottom:0}
.tz-compare td:last-child{white-space:nowrap}
.tb-page .tz-compare a{display:inline-block;margin:0 0 4px;color:var(--tb-deep);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tb-accent)}
.tb-page .tz-compare a:hover{color:var(--tb-accent)}
/* 換宿建議：淡色底、襯線標題，四格並排 */
.tz-route-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tz-route{padding:22px 22px 20px;border-radius:12px;background:var(--tb-soft)}
.tz-route h3{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08);color:var(--tb-deep);font-family:"Noto Serif TC","PMingLiU",serif;font-size:20px;font-weight:900;line-height:1.4}
.tz-route p{margin:0;color:#3f3b35;font-size:15px;line-height:1.8}
/* 季節：橫向三格，季節名做成標籤 */
.tz-season-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tz-season{padding:22px;border:1px solid var(--tb-line);border-radius:12px;background:#fff}
.tz-season span{display:inline-block;margin-bottom:10px;padding:3px 12px;border-radius:999px;background:var(--tb-deep);color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em}
.tz-season h3{margin:0 0 8px;color:var(--tb-deep);font-family:"Noto Serif TC","PMingLiU",serif;font-size:20px;font-weight:900;line-height:1.4}
.tz-season p{margin:0;color:var(--tb-muted);font-size:15px;line-height:1.8}
@media(max-width:991px){.tz-route-grid{grid-template-columns:1fr 1fr}.tz-season-grid{grid-template-columns:1fr}}
@media(max-width:640px){
	.tz-route-grid{grid-template-columns:1fr}
	.tz-compare-wrap{overflow:visible;border:0;background:none}
	.tz-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.tz-compare,.tz-compare tbody,.tz-compare tr,.tz-compare th,.tz-compare td{display:block;width:100%}
	.tz-compare tr{margin-bottom:14px;border:1px solid var(--tb-line);border-radius:12px;background:#fff;overflow:hidden}
	.tz-compare tbody th{white-space:normal;border-bottom:1px solid var(--tb-line)}
	.tz-compare td{padding:10px 16px;border-bottom:0}
	.tz-compare td:before{content:attr(data-label);display:block;margin-bottom:2px;color:var(--tb-accent);font-size:12px;font-weight:800}
	.tz-compare td:last-child{white-space:normal;padding-bottom:16px}
	.tz-route,.tz-season{padding:16px}
}
/* 主題民宿廣告（B 型站 ads.php 的 .tz-themead）：一段多欄；圖片原尺寸的規則在各站 ads.php */
.tz-themead{width:min(1180px,calc(100% - 40px));margin:26px auto 4px;padding:22px 22px 24px;border:1px solid var(--tb-line);border-radius:14px;background:var(--tb-soft);text-align:center}
.tz-themead-title{margin:0 0 16px;color:var(--tb-deep);font-family:"Noto Serif TC","PMingLiU",serif;font-size:22px;font-weight:900;letter-spacing:.04em;line-height:1.4}
.tz-themead-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;justify-items:stretch}
.tz-themead-cell{padding:12px;border:1px solid var(--tb-line);border-radius:10px;background:#fff}
.tz-themead-name{margin:0 0 8px;color:var(--tb-deep);font-size:16px;font-weight:800;line-height:1.4}
.tz-themead-name small{display:block;color:var(--tb-accent);font-size:11px;font-weight:700;letter-spacing:.1em}
.tz-themead-ad,.tz-themead-ad div{line-height:0}
.tz-themead-ad a{display:block;margin-bottom:8px}
.tz-themead-ad a:last-child{margin-bottom:0}
.tz-themead-ad img{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;border-radius:6px}
@media(max-width:991px){.tz-themead-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tz-themead{width:min(100% - 28px,1180px);padding:14px}.tz-themead-grid{gap:10px}.tz-themead-cell{padding:8px}.tz-themead-name{font-size:14px}.tz-themead-title{font-size:19px}}
/* 依版型產生的廣告區（.tz-ads2，花蓮五站未使用，保留給產生器的 ads_build） */
.tz-ads2{width:min(1180px,calc(100% - 40px));margin:6px auto 0;padding:22px;border:1px solid var(--tb-line);border-radius:14px;background:var(--tb-soft);text-align:center}
.tz-ads2-title{margin:0 0 16px;color:var(--tb-deep);font-family:"Noto Serif TC","PMingLiU",serif;font-size:22px;font-weight:900;line-height:1.4}
.tz-ss{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tz-ss-item{display:block;overflow:hidden;border:1px solid var(--tb-line);border-radius:10px;background:#fff;color:var(--tb-deep)!important;text-decoration:none!important}
.tz-ss-item img{display:block;width:100%;height:auto;aspect-ratio:661/361;object-fit:cover}
.tz-ss-item span{display:block;padding:8px 10px;font-size:14px;font-weight:800;line-height:1.4}
.tz-adfeeds{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:16px;text-align:center}
.tz-adfeed{padding:12px;border:1px solid var(--tb-line);border-radius:10px;background:#fff}
.tz-adfeed-t{margin:0 0 8px;color:var(--tb-deep);font-size:15px;font-weight:800}
.tz-adfeed-in{line-height:0}
.tz-adfeed-in a{display:inline-block;margin:4px;vertical-align:top}
.tz-adfeed-in img{max-width:100%;height:auto;border-radius:6px}
@media(max-width:991px){.tz-ss{grid-template-columns:repeat(3,minmax(0,1fr))}.tz-adfeeds{grid-template-columns:1fr}}
@media(max-width:640px){.tz-ads2{padding:14px}.tz-ss{grid-template-columns:1fr 1fr;gap:10px}}
/* 額外區塊剛好 4 項：桌機一列四格 */
.tb-guide-grid.tz-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:991px){.tb-guide-grid.tz-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tb-guide-grid.tz-grid-4{grid-template-columns:1fr}}