/* =====================================================================
   台東包棟民宿網｜內容區共用樣式
   2026-09-22 建立，取代 28 個頁面共 885 處的 inline style。
   2026-09-23 精修：對比、行長、瀏覽器預設樣式、觸控目標，並把 6 個支柱頁
              各自內嵌的 .pillar 樣式收進這裡（原本內嵌權重壓過本檔，
              那 6 頁一直停在舊色票 #444／#337ab7）。

   色票（與站尾 inc/bd_footer.php 同一套）
     墨    #1f2a30   標題
     海    #1b6b82   連結、標題左側短線（東海岸的海）
     稻穗  #c9973b   小標題底下的短金線（縱谷）— 只用在這裡，不四處點綴
     內文  #3d4a4f
     次要  #6b787d   對白底 4.56:1
     線    #dfe5e3

   本站 mob/css/main.css 有全域 a{display:block}、*{margin:0}，
   所有需要行內顯示的連結都由 .bd-a 或 .pillar a 明確宣告 display:inline。
   ===================================================================== */

/* ---------- 瀏覽器預設樣式：選字、焦點框、捲軸都從色票取色 ---------- */
::selection{background:#1b6b82;color:#fff}
::-moz-selection{background:#1b6b82;color:#fff}
html{scrollbar-color:#b6c2c0 #eef2f1}
/* 全站鍵盤焦點框。原本只有 .bd-a 與站尾有，導覽列與其他連結按 Tab 時看不出位置 */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #1b6b82;outline-offset:2px;border-radius:2px}

/* ---------- 連結 ---------- */
a.bd-a{display:inline;color:#1b6b82;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
a.bd-a:hover,a.bd-a:focus{color:#14556a;border-bottom-color:#1b6b82;text-decoration:none}
a.bd-a:focus-visible{outline:2px solid #c9973b;outline-offset:2px}
a.bd-a.bd-a--strong{font-weight:700}

/* ---------- 麵包屑 ---------- */
.bd-crumb{max-width:1000px;margin:14px auto 0;padding:0 15px;font-size:13px;color:#6b787d;line-height:1.8;text-align:left;letter-spacing:0}
.bd-crumb a{display:inline;color:#1b6b82;text-decoration:none}
.bd-crumb a:hover{text-decoration:underline}
.bd-crumb .bd-sep{margin:0 7px;color:#8b969a}
.bd-crumb .bd-cur{color:#5c6a70}
.pillar .bd-crumb{max-width:none;margin:0 0 10px;padding:0}

/* ---------- 頁面主題標題（21 個列表／鄉鎮頁） ---------- */
.pagetitle{max-width:1000px;margin:20px auto 0;padding:0 15px;text-align:center}
.pagetitle h1{font-size:26px;font-weight:700;color:#1f2a30;margin:0 0 10px;line-height:1.4;letter-spacing:1px;transition:none}
/* 導言置中時行長不超過約 46 個中文字，避免 1000px 寬一行塞 60 多字難讀 */
.pagetitle p{font-size:15px;line-height:1.85;color:#5c6a70;margin:0 auto;max-width:46em}

/* ---------- 支柱頁版心（villa／season／bbq／newyear／booking／hotspring） ----------
   中文一行以 45～50 字最好讀；原本 900px ÷ 15px＝60 字，偏長。
   改為 780px ÷ 16px＝約 48 字，字也大一級。 */
.pillar{max-width:780px;margin:0 auto;padding:0 15px;text-align:left}
.pillar h1{font-size:27px;font-weight:700;color:#1f2a30;margin:0 0 12px;line-height:1.4;letter-spacing:1px;transition:none}
.pillar p,.pillar li{font-size:16px;line-height:1.95;color:#3d4a4f}
.pillar h2{font-size:20px;font-weight:700;color:#1f2a30;margin:30px 0 12px;padding-bottom:8px;line-height:1.5;position:relative}
.pillar h2:after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:#c9973b}
.pillar a{display:inline;color:#1b6b82;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.pillar a:hover{color:#14556a;border-bottom-color:#1b6b82}
.pillar ul{padding-left:22px;margin:10px 0}
.pillar li{margin-bottom:6px}
.pillar .faqitem{margin-bottom:14px;border-bottom:1px solid #dfe5e3;padding-bottom:10px}
.pillar .faqitem h3{font-size:17px;font-weight:700;color:#1f2a30;margin:0 0 6px;line-height:1.5}

/* ---------- 在地指南／常見問題區塊 ---------- */
.bd-guide{max-width:780px;margin:26px auto 0;padding:0 15px;text-align:left}
.bd-guide--faq{margin-top:30px}
.bd-h2{font-size:20px;font-weight:700;color:#1f2a30;margin:0 0 12px;padding-bottom:8px;line-height:1.5;letter-spacing:.5px;position:relative}
.bd-h2:after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:#c9973b}
.bd-h2--gap{margin-top:26px}
.bd-text{font-size:16px;line-height:1.95;color:#3d4a4f;margin:0 0 10px}
/* 首頁的 FAQ 放在 80% 寬的表格裡，一行會到 63 字；這裡把可讀文字收在 46 字以內，
   分隔線仍維持整欄寬度，不會變成一條短線。 */
.bd-faq{margin-bottom:12px;border-bottom:1px solid #dfe5e3;padding-bottom:10px}
.bd-faq h3,.bd-faq p{max-width:46em}
.bd-faq h3{font-size:17px;font-weight:700;color:#1f2a30;margin:0 0 6px;line-height:1.5}
.bd-faq p{font-size:16px;line-height:1.9;color:#3d4a4f;margin:0}
.bd-note{color:#6b787d;font-size:13px}

/* 站內連結列（依人數找包棟／專題整理／鄰近鄉鎮） */
.bd-links{font-size:15px;line-height:2.1;margin-top:18px;color:#5c6a70}
.bd-links a.bd-a{margin:0 1px}

/* 外抓失敗時的備援區塊 */
.bd-fallback{padding:10px 15px;text-align:left}
.bd-fallback p{line-height:2;margin:0}

/* ---------- 首頁比較表 ---------- */
.bd-table-wrap{overflow-x:auto}
.bd-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7;background:#fff}
.bd-table th,.bd-table td{border:1px solid #dfe5e3;padding:10px;text-align:center;vertical-align:top}
.bd-table thead tr{background:#eef3f2}
.bd-table th{color:#1f2a30;font-weight:700}

@media (max-width:600px){
  .pagetitle h1{font-size:22px}
  .pillar h1{font-size:23px}
  .bd-h2,.pillar h2{font-size:18px}
  .pillar p,.pillar li,.bd-text,.bd-faq p{font-size:15.5px}
  /* 手機上這幾列是導覽用的連結，加大可點範圍 */
  .bd-links{line-height:2.4}
  .bd-links a,.pillar .bd-links a{display:inline-block;padding:5px 0}
}

@media (prefers-reduced-motion:reduce){
  a.bd-a,.pillar a{transition:none}
}

/* 2026-09-23 共用包棟資料元件 */
.gy-tool-main,.gy-detail-main{max-width:1180px;margin:0 auto;padding:34px 18px 56px;color:#28363b;font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;line-height:1.75;letter-spacing:0}
.gy-tool-head{padding:28px 0 24px;border-bottom:1px solid #d9e1df;margin-bottom:28px}
.gy-tool-head h1,.gy-detail-copy h1{font-family:"Noto Serif TC","PMingLiU",serif;font-size:38px;line-height:1.3;margin:4px 0 12px;color:#18272c;letter-spacing:0}
.gy-tool-head>p:last-child{max-width:760px;margin:0;color:#53636a;font-size:16px}
.gy-eyebrow{margin:0;color:#9b6c28;font-size:12px;font-weight:700;letter-spacing:2px}
.gy-section-head{margin-bottom:18px}
.gy-section-head h2,.gy-detail-section h2,.gy-route-section h2,.gy-sitemap-grid h2{margin:2px 0 8px;font-size:25px;color:#1f3036;letter-spacing:0}
.gy-section-head>p:last-child{max-width:780px;margin:0;color:#5a686e}
.gy-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 auto}
.gy-card{margin:0;background:#fff;border:1px solid #dce3e1;border-radius:6px;overflow:hidden;min-width:0;box-shadow:0 4px 18px rgba(28,49,55,.06)}
.gy-card a.gy-card-link{display:flex;flex-direction:column;height:100%;color:#26363c;text-decoration:none}
.gy-card a.gy-card-link:hover,.gy-card a.gy-card-link:focus{text-decoration:none;border-color:#1b6b82}
.gy-card-img{display:block;width:100%;height:210px;object-fit:cover;background:#e8eeec}
.gy-card-body{display:flex;flex:1;flex-direction:column;padding:16px}
.gy-card-place{color:#95651f;font-size:12px;font-weight:700;letter-spacing:1px}
.gy-card h3{font-size:20px;line-height:1.35;margin:4px 0 6px;color:#1d2d32;letter-spacing:0}
.gy-card p{margin:0 0 10px;color:#5b686d;font-size:14px}
.gy-card-more{display:inline-block;margin-top:auto;padding-top:12px;color:#1b6b82;font-weight:700;font-size:14px}
.gy-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.gy-tags li{display:inline-block;border:1px solid #cbd8d5;border-radius:3px;padding:2px 7px;background:#f4f7f6;color:#43545a;font-size:12px;line-height:1.5}
.gy-town-list{max-width:1180px;margin:38px auto;padding:28px 18px;border-top:1px solid #d9e1df}
.gy-empty-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.gy-empty-actions a,.gy-button{display:inline-block;padding:10px 16px;border:1px solid #1b6b82;border-radius:4px;background:#1b6b82;color:#fff;text-decoration:none;font-weight:700}
.gy-empty-actions a+ a,.gy-button-quiet{background:#fff;color:#1b6b82}
.gy-filter{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:18px;background:#f1f5f4;border:1px solid #d9e1df;border-radius:6px}
.gy-filter label{display:flex;flex-direction:column;gap:5px;min-width:220px;font-weight:700;color:#36474d}
.gy-filter select{height:42px;padding:0 34px 0 10px;border:1px solid #aebdba;border-radius:4px;background:#fff;color:#26363c}
.gy-filter button{height:42px;padding:0 18px;border:0;border-radius:4px;background:#1b6b82;color:#fff;font-weight:700}
.gy-filter>a{display:inline-block;padding:8px 6px;color:#1b6b82}
.gy-result-count{margin:0 0 18px;color:#5c696e}
.gy-home-entry{max-width:1120px;margin:34px auto;padding:26px 18px;border-top:1px solid #d9e1df;border-bottom:1px solid #d9e1df;text-align:left}
.gy-home-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gy-home-links>a{display:flex;flex-direction:column;padding:16px;border:1px solid #d9e1df;border-radius:4px;background:#fff;color:#26363c;text-decoration:none}
.gy-home-links strong{font-size:18px;color:#1b6b82}.gy-home-links span{font-size:13px;color:#607077;margin-top:3px}
.gy-empty{padding:34px;border:1px solid #d9e1df;background:#f7f9f8;text-align:center}
.gy-route-section{padding:8px 0 30px}
.gy-town-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gy-town-grid>a{display:flex;flex-direction:column;padding:16px;border:1px solid #d9e1df;border-left:3px solid #c9973b;border-radius:4px;color:#26363c;text-decoration:none;background:#fff}
.gy-town-grid strong{font-size:18px}.gy-town-grid span{margin-top:4px;color:#607077;font-size:13px}
.gy-sitemap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 42px}
.gy-sitemap-grid section{border-top:2px solid #1b6b82;padding-top:13px}
.gy-sitemap-grid ul{columns:2;list-style:none;margin:0;padding:0}
.gy-sitemap-grid li{break-inside:avoid;margin:0 0 7px}
.gy-sitemap-grid a{display:inline;color:#31525d;text-decoration:none}
.gy-sitemap-packages{grid-column:1/-1}
.gy-sitemap-packages ul{columns:3}
.gy-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;color:#66757a;font-size:13px}
.gy-breadcrumb a{display:inline;color:#1b6b82}
.gy-detail-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:34px;align-items:start;padding-bottom:36px;border-bottom:1px solid #d9e1df}
.gy-detail-photo{aspect-ratio:16/11;background:#e8eeec;overflow:hidden}
.gy-detail-photo img{display:block;width:100%;height:100%;object-fit:cover}
.gy-detail-copy{padding-top:8px}
.gy-lead{font-size:16px;color:#4d5d63}
.gy-facts{margin:22px 0;border-top:1px solid #d9e1df}
.gy-facts>div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #d9e1df}
.gy-facts dt{color:#68777c}.gy-facts dd{margin:0;font-weight:700;color:#27383e}
.gy-detail-tags{margin:16px 0}.gy-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.gy-actions a:hover,.gy-actions a:focus{color:#fff;text-decoration:none}.gy-actions .gy-button-quiet:hover,.gy-actions .gy-button-quiet:focus{color:#1b6b82}
.gy-detail-section{padding:34px 0;border-bottom:1px solid #d9e1df}
.gy-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.gy-check-grid p{margin:0;padding:14px 0;border-top:1px solid #dfe5e3}.gy-check-grid strong{display:block;color:#1b6b82}
.gy-related-links p{display:flex;gap:10px 20px;flex-wrap:wrap}.gy-related-links a{display:inline;color:#1b6b82}
@media(max-width:820px){.gy-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gy-detail-hero{grid-template-columns:1fr}.gy-town-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gy-sitemap-packages ul{columns:2}}
@media(max-width:540px){.gy-tool-main,.gy-detail-main{padding:22px 14px 40px}.gy-tool-head h1,.gy-detail-copy h1{font-size:30px}.gy-card-grid,.gy-town-grid,.gy-check-grid,.gy-sitemap-grid,.gy-home-links{grid-template-columns:1fr}.gy-card-img{height:190px}.gy-filter label{min-width:100%;width:100%}.gy-sitemap-grid ul,.gy-sitemap-packages ul{columns:1}.gy-sitemap-packages{grid-column:auto}.gy-town-list{padding:24px 14px}.gy-detail-hero{gap:20px}}

/* 2026-09-23 新頁框（inc/gy_page_top.php）的固定導覽列讓位
   township／baodong-finder／site-map 與 54 個方案頁的導覽列是 position:fixed，
   但頁框沒有為它保留空間，實測內容最上面 31～33px 被蓋住（導言整行看不到）。
   gy_page_top.php 有一小段 script 量實際高度寫入 --gy-nav-h；下面是未執行 JS 時的後備值。 */
/* 其餘頁面的 top:0 來自 mob/css/main.css／overwrite.css，新頁框沒有載入它們，
   導覽列因此是 position:fixed 但 top:auto——會停在「靜態位置」，跟著 body padding 一起往下掉。 */
body.gy-page nav.navbar.bootsnav,body.gy-detail-page nav.navbar.bootsnav{top:0}
body.gy-page,body.gy-detail-page{padding-top:93px;padding-top:var(--gy-nav-h,93px)}
@media (max-width:1024px){body.gy-page,body.gy-detail-page{padding-top:83px;padding-top:var(--gy-nav-h,83px)}}