/* ══ 全站頁首＋頁尾＋內頁共通細節（2026-09-30 得獎等級檢查後新增）══
 *
 * 🔴 為什麼有這個檔：內頁（故事、指南、價格、交通、品種、親子、禮盒、購物須知、政策頁、404）原本
 *    【沒有頁首、沒有頁尾】—— 只有一行「首頁 › …」的小字。從 Google 直接點進來的人看不出是哪一家、
 *    也逛不到其他頁；網站最後一眼停在一段文字上。
 *    外觀照首頁「捲下去之後」的那一條（米白底、深色字、細線），讓每一頁看起來是同一個網站。
 * 頁首／頁尾的 HTML 在 tools/chrome/header.inc、footer.inc，用 tools/site_chrome.py 同步進各頁 ——
 * 要改請改那兩個檔再跑同步，不要在個別頁面手改（下次同步會被蓋掉）。
 * 首頁有自己的頁首（透明浮在主視覺上、還有訂購按鈕），不用這一份。
 */
:root{--sh-shell:1080px;
  /* 日記文章頁沒有定義這幾個字型變數（它們寫死字型），這裡帶備用值，頁首頁尾才會跟其他頁同一種字 */
  --sc-display:var(--font-display,"Palatino Linotype",Palatino,"Songti TC","Noto Serif TC","Microsoft JhengHei","PingFang TC",serif);
  --sc-body:var(--font-body,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Helvetica Neue",sans-serif);
  --sc-mono:var(--font-mono,"SFMono-Regular",ui-monospace,"Cascadia Code","Consolas",monospace)}
@media (min-width:1280px){:root{--sh-shell:1200px}}
@media (min-width:1680px){:root{--sh-shell:1340px}}

/* ── 瀏覽器自己畫的部分也要有設計（反白、游標、捲到錨點時不要被頂條蓋住）── */
::selection{background:rgba(190,42,62,.16);color:inherit}
html{caret-color:var(--berry,#BE2A3E);scroll-padding-top:88px}

/* ── 頁首 ── */
.sh{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;
  padding:12px max(28px,calc((100% - var(--sh-shell)) / 2 + 28px));
  background:rgba(251,245,241,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line,#E7D8D2)}
.sh-mark{margin-right:auto;font-family:var(--sc-display);font-size:1.15rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink,#2B181A);text-decoration:none;line-height:1.3}
.sh-mark small{display:block;margin-top:2px;font-family:var(--sc-mono);font-size:.7rem;font-weight:400;letter-spacing:.2em;color:var(--soft,#6E5457)}
.sh-nav{display:flex;align-items:center;gap:10px}
.sh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  font-family:var(--sc-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--ink,#2B181A);background:none;border:1px solid #D9C4BD;border-radius:2px;text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
@media (hover:hover) and (pointer:fine){.sh-btn:hover{background:var(--ink,#2B181A);color:#fff;border-color:var(--ink,#2B181A)}}
.sh-btn[aria-current="page"]{border-color:var(--ink,#2B181A)}
/* 2026-10-01 拿掉下拉選單（園主：「既然下面有了，那這下拉的功能整個都可以拿掉」）——
   頁尾已經有全部的連結；頂條只留「開園狀態」「加入 LINE 預約」，手機上兩顆都顯示。 */
/* LINE 按鈕手機用短字（2026-10-01 園主：「手機板的(加入LINE預約)縮成(LINE預約)」，跟首頁一致） */
.sh-sm{display:none}
@media (max-width:480px){
  .sh-lg{display:none}.sh-sm{display:inline}
  .sh{padding-left:20px;padding-right:20px}
  .sh-mark small{display:none}
  .sh-btn{padding:0 12px;letter-spacing:.06em}
}

/* ── 頁尾：深色收尾（跟首頁評論牆同一個深莓色），一眼知道「這頁結束了、還可以去哪」── */
.sf{margin-top:0;background:#211214;color:rgba(243,228,224,.74);font-size:.92rem;line-height:1.75}
.sf a{color:#F3E4E0;text-decoration:none}
@media (hover:hover) and (pointer:fine){.sf a:hover{color:#F2A7B0}}
.sf :focus-visible{outline-color:#F2A7B0}
.sf-in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px 40px;
  max-width:var(--sh-shell);margin:0 auto;padding:64px 28px 44px}
.sf-mark{font-family:var(--sc-display);font-size:1.45rem;font-weight:600;letter-spacing:.04em;color:#fff !important}
.sf-brand p{margin:12px 0 0;max-width:30em}
.sf-addr{font-size:.86rem;color:rgba(243,228,224,.62)}
.sf-addr a{font-variant-numeric:tabular-nums}
.sf-col{display:flex;flex-direction:column}
.sf-t{margin:4px 0 8px;font-family:var(--sc-mono);font-size:.72rem;letter-spacing:.2em;color:#F2A7B0}
.sf-col a{padding:6px 0}
.sf-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;max-width:var(--sh-shell);margin:0 auto;
  padding:18px 28px 28px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:rgba(243,228,224,.62)}
.sf-social{display:flex;gap:20px}
.sf-social a{font-family:var(--sc-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 0}
@media (max-width:760px){
  .sf-in{grid-template-columns:repeat(2,minmax(0,1fr));padding:52px 20px 36px}
  .sf-brand{grid-column:1 / -1}
  .sf-base{padding:16px 20px 26px}
}

/* ── 內頁內文 ── */
/* 文字裡的連結要有底線（無障礙：只靠顏色分不出來 —— Lighthouse 在 9 頁抓到 link-in-text-block）。
   按鈕樣式的（.cta-btn、延伸閱讀、麵包屑、返回）不在這裡。 */
:is(.container,.post-body) :is(p,li,td,.info-box,.muted) a:not(.cta-btn):not(.back-btn){text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(124,21,38,.45)}
@media (hover:hover) and (pointer:fine){:is(.container,.post-body) :is(p,li,td,.info-box,.muted) a:not(.cta-btn):not(.back-btn):hover{text-decoration-color:currentColor}}
/* 表格：數字對齊（價格、公分、時間） */
.container table{font-variant-numeric:tabular-nums}
@media (max-width:600px){
  /* 🔴 手機上第一欄被擠成一個字寬（價格頁「入園費」變成直排三個字）：第一欄不換行，其他欄照常換行 */
  .container th:first-child,.container td:first-child{white-space:nowrap}
  /* 四欄以上的表（交通方式）手機裝不下：整張表左右滑，不要把每一欄擠成兩個字 */
  .container table:has(tr>:nth-child(4)){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .container table:has(tr>:nth-child(4)) :is(th,td){min-width:7.5em}
}
/* 麵包屑的「首頁」也要有底線（Lighthouse link-in-text-block：跟旁邊的字只差顏色） */
.crumb a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(190,42,62,.45)}

/* 手機頂條不放 LINE（2026-10-01）：內頁手機版頂條只留「價格・開園」；LINE 在內文的按鈕與頁尾最底下那一條。
   （首頁另外有右下角的小圓鈕，樣式在首頁自己的 <style>） */
@media (max-width:640px){.sh-line{display:none}}