/* ============================================================
   靜巷19號民宿 19 Inn Taitung — styles.css
   說明：全站樣式表。含 Design Tokens、Header/Nav、Hero、
   AEO 摘要區、房型卡片、評論走馬燈、地圖與頁尾等所有樣式。
   ============================================================ */

/* ===================== Design Tokens ===================== */
:root{
  --c-white:#FFFFFF;
  --c-ink:#333333;
  --c-ink-soft:#2b2622;
  --c-sand:#F5F2EB;
  --c-cream:#FBF8F2;
  --c-clay:#A9744F;
  --c-clay-dark:#8C5C3C;
  --c-line:#E6E0D2;
  --c-line-strong:#D8CFBB;

  --f-display:'Cormorant Garamond','Noto Serif TC',serif;
  --f-serif-zh:'Noto Serif TC',serif;
  --f-body:'Noto Sans TC',-apple-system,BlinkMacSystemFont,sans-serif;

  --container:1180px;
  --radius-s:4px;
  --radius-m:10px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- 數字統一字級：大型展示數字（統計/步驟/人數）與
     小型行內數字（標籤/日期/電話等）分兩級，維持階層但彼此內部一致 ---- */
  --num-lg:28px;
  --num-sm:13.5px;
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--c-cream);
  color:var(--c-ink);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-weight:500;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 28px;}
::selection{background:var(--c-clay);color:var(--c-white);}
:focus-visible{outline:2px solid var(--c-clay);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

.eyebrow{
  font-family:var(--f-body);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-clay-dark);
  font-weight:600;
}
.section-title{
  font-family:var(--f-serif-zh);
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.4;
  margin:10px 0 0;
  color:var(--c-ink);
}
.section-lede{
  max-width:620px;
  color:#5c5650;
  font-size:15.5px;
  margin-top:14px;
}
.section-head{margin-bottom:52px;}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.section-head.center .section-lede{margin-left:auto;margin-right:auto;}

/* ===================== Reveal-on-scroll ===================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.reveal-left{transform:translateX(-36px);}
.reveal.reveal-right{transform:translateX(36px);}
.reveal.is-visible{opacity:1;transform:translate(0,0);}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;
  font-family:var(--f-body);
  font-size:14px;letter-spacing:.05em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--c-ink);color:var(--c-white);}
.btn-primary:hover{background:var(--c-clay);transform:translateY(-2px) scale(1.035);box-shadow:0 14px 26px -12px rgba(169,116,79,.55);}
.btn-outline{background:transparent;color:var(--c-white);border-color:rgba(255,255,255,.6);}
.btn-outline:hover{background:var(--c-white);color:var(--c-ink);transform:translateY(-2px) scale(1.035);}
.btn-ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line-strong);}
.btn-ghost:hover{border-color:var(--c-clay);color:var(--c-clay-dark);transform:translateY(-2px);}
/* ---- Header 內的 CTA 按鈕（立即預約 / LINE 訂房）：header 背景為 #333333 深色，
   文字改白色以確保可讀，hover 時反轉為白底深字 ---- */
.site-header #headerCta{
  color:var(--c-white);
  border-color:rgba(255,255,255,.55);
}
.site-header #headerCta:hover{
  background:var(--c-white);
  color:#333333;
  border-color:var(--c-white);
}

/* ===================== Header ===================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:22px 0;
  background:#333333;
  transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;}
.site-header.is-scrolled{
  padding:12px 0;
  background:#333333;
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.logo{display:flex;align-items:baseline;gap:9px;font-family:var(--f-serif-zh);overflow:hidden;}
.logo .num{
  font-family:var(--f-display);
  font-size:26px;font-style:italic;color:#e7c9ad;
}
.logo .cn{font-size:19px;letter-spacing:.06em;color:var(--c-white);}
.logo .en{font-size:10px;letter-spacing:.2em;color:#c9c5be;text-transform:uppercase;display:block;margin-top:1px;}

/* ---- Logo Image（正式 Logo 圖檔，請將檔案放到 image/logo/logo.webp）
   尺寸加大以提升可見度；使用 object-fit:contain 保持長寬比，
   header 仍以 flex align-items:center 自動垂直置中，
   不影響 sticky header 或導覽列的點擊互動 ---- */
.logo-img{
  height:100px;width:auto;max-width:320px;
  object-fit:contain;display:block;
  transition:height .4s var(--ease),opacity .2s linear;
}
.site-header.is-scrolled .logo-img{height:56px;}
.drawer-head .logo-img{height:40px;}
.footer-brand .logo-img{height:80px;}

/* ---- 首頁專屬：Logo 進場滑入動畫（由右至左）+ 滾動漸層淡出 ----
   僅 index.html 的 <body> 沒有 .subpage class，藉此區分首頁與其他子頁，
   讓其餘頁面的 Logo 完全維持原本樣式（僅有 sticky header 縮小效果）。
   實際依滾動距離連續淡出的邏輯在 script.js 中，僅針對首頁 header 執行。 ---- */
body:not(.subpage) .logo-img{
  animation:logoSlideInLTR .9s var(--ease) both;
}
@keyframes logoSlideInLTR{
  from{opacity:0;transform:translateX(-120px);}
  to{opacity:1;transform:translateX(0);}
}

.main-nav{display:flex;align-items:center;gap:34px;}
.main-nav a{
  font-size:14px;letter-spacing:.03em;
  position:relative;padding:4px 0;
  color:var(--c-white);
  transition:color .3s;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--c-clay);
  transition:width .35s var(--ease);
}
.main-nav a:hover{color:#f0d9c2;}
.main-nav a:hover::after{width:100%;}

/* ---- 主導覽下拉選單（房型 Rooms） ---- */
.nav-item{position:relative;}
.nav-item>a{display:flex;align-items:center;gap:5px;}
.nav-item>a::before{
  content:'';width:5px;height:5px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:rotate(45deg) translateY(-2px);order:2;transition:transform .3s var(--ease);
}
.nav-item:hover>a::before,.nav-item:focus-within>a::before{transform:rotate(225deg) translateY(1px);}
/* 無形的滑鼠橋接區：填補連結與下拉選單之間的視覺間距，
   避免滑鼠移動經過該間距時中斷 hover 狀態、導致選單提前關閉、點不到選項 */
.nav-item::after{
  content:'';position:absolute;left:50%;top:100%;
  width:220px;height:22px;transform:translateX(-50%);
}
.nav-dropdown{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  min-width:190px;padding:8px 0;margin-top:14px;
  background:#333333;border-radius:0 0 10px 10px;
  box-shadow:0 20px 34px -16px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.nav-dropdown a{
  display:block;padding:11px 22px;font-size:13px;color:var(--c-white);white-space:nowrap;
  transition:background .25s,color .25s;
}
.nav-dropdown a:hover{background:rgba(255,255,255,.06);color:#f0d9c2;}

.header-actions{display:flex;align-items:center;gap:14px;}
.link-note{
  font-size:13px;color:var(--c-white);border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:2px;transition:color .3s,border-color .3s;
}
.link-note:hover{color:var(--c-clay);border-color:var(--c-clay);}

.nav-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  cursor:pointer;
  align-items:center;justify-content:center;
  padding:0;
}
.nav-toggle span{
  display:block;width:18px;height:1.4px;background:var(--c-white);
  position:relative;
  transition:transform .3s var(--ease),opacity .3s var(--ease),background .3s;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:18px;height:1.4px;background:var(--c-white);
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle.is-active span{background:transparent;}
.nav-toggle.is-active span::before{top:0;transform:rotate(45deg);}
.nav-toggle.is-active span::after{top:0;transform:rotate(-45deg);}

/* ---- Mobile Drawer (右側滑出選單) ---- */
.nav-overlay{
  position:fixed;inset:0;z-index:2050;
  background:rgba(15,17,15,.5);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s var(--ease);
}
.nav-overlay.is-open{opacity:1;visibility:visible;}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:2100;
  width:min(84vw,340px);
  background:var(--c-cream);
  box-shadow:-20px 0 44px rgba(15,17,15,.28);
  transform:translateX(100%);
  transition:transform .48s var(--ease);
  display:flex;flex-direction:column;
  padding:22px 26px 26px;
}
.nav-drawer.is-open{transform:translateX(0);}
/* ---- Drawer Head：Logo 列，背景改為與 Header 相同的 #333333，
   全站每一頁皆一致 ---- */
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:-22px -26px 14px;
  padding:20px 26px 16px;
  background:#333333;
}
.drawer-close{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:transparent;cursor:pointer;font-size:15px;color:var(--c-white);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,color .3s,transform .3s;
}
.drawer-close:hover{background:var(--c-white);color:#333333;transform:rotate(90deg);}
.drawer-nav{
  margin-top:18px;
  display:flex;flex-direction:column;
  border-top:1px solid var(--c-line);
}
.drawer-nav a{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:17px 2px;
  border-bottom:1px solid var(--c-line);
  font-family:var(--f-serif-zh);
  font-size:17px;color:var(--c-ink);
}
.drawer-nav a span{
  font-family:var(--f-display);font-style:italic;font-size:12px;color:#9a8f7b;letter-spacing:.03em;
}
.drawer-nav a:active{color:var(--c-clay-dark);}

/* ---- 行動選單「房型」手風琴子選單 ---- */
.has-drawer-dropdown{border-bottom:1px solid var(--c-line);}
.drawer-dropdown-toggle{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:17px 2px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--f-serif-zh);font-size:17px;color:var(--c-ink);
}
.drawer-dropdown-toggle span:first-of-type{
  font-family:var(--f-display);font-style:italic;font-size:12px;color:#9a8f7b;letter-spacing:.03em;
}
.drawer-dropdown-toggle .drawer-caret{
  width:8px;height:8px;flex:0 0 auto;margin-left:auto;
  border-right:1.4px solid #9a8f7b;border-bottom:1.4px solid #9a8f7b;
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.has-drawer-dropdown.is-open .drawer-dropdown-toggle .drawer-caret{transform:rotate(225deg);}
.drawer-dropdown{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.has-drawer-dropdown.is-open .drawer-dropdown{max-height:240px;}
.drawer-dropdown a{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:13px 2px 13px 16px;font-family:var(--f-serif-zh);font-size:15px;color:#5c5650;
  border-top:1px solid var(--c-line);
}
.drawer-dropdown a span{font-family:var(--f-display);font-style:italic;font-size:11px;color:#9a8f7b;}
.drawer-foot{
  margin-top:auto;padding-top:22px;
  display:flex;flex-direction:column;gap:16px;
}
.drawer-cta{width:100%;padding:16px 20px;font-size:14.5px;}
.drawer-social{display:flex;align-items:center;justify-content:space-between;}
.drawer-social-icons{display:flex;gap:10px;}
.drawer-social-icons a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--c-line-strong);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s;
}
.drawer-social-icons a:active{background:var(--c-clay);border-color:var(--c-clay);}
.drawer-social-icons svg{width:15px;height:15px;}
.drawer-tel{font-family:var(--f-body);font-style:normal;font-weight:700;font-size:var(--num-sm);color:var(--c-ink-soft);}
@media(min-width:761px){
  .nav-overlay,.nav-drawer{display:none;}
}

/* ===================== Hero ===================== */
.hero{
  position:relative;
  height:100svh;min-height:560px;
  display:flex;align-items:flex-end;
  overflow:hidden;
  color:var(--c-white);
}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--c-ink);}

/* ---- 背景照片輪播：以 JS 預先載入第一張圖片後才淡入顯示，其餘照片
   則同步在背景預先下載（見 script.js），確保輪播切換時圖片都已就緒，
   不會在切換的瞬間才臨時抓取造成卡頓；
   .hero-media 本身的深色底色會在照片淡入前先撐住畫面。
   每張照片顯示 5 秒（見 script.js 的 HERO_SLIDE_INTERVAL），時間到後
   以淡入淡出（crossfade）切換下一張、依序循環播放；同時每張照片會
   持續進行緩慢的 Ken Burns 縮放效果（見下方 .hero-slide 動畫）。
   透明度設定為 .5，讓照片可見但不影響文字閱讀，可依實際照片微調 ---- */
.hero-slideshow{position:absolute;inset:0;}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1);
  transition:opacity 1.6s ease;
  /* ---- 背景照片持續、獨立地緩慢縮放（Ken Burns 效果），
     跟切換哪張圖顯示（靠 opacity 做淡入淡出）完全脫鉤，
     這樣切換時才不會因為 animation 被移除、transform
     瞬間跳回 scale(1) 而產生卡頓感 ---- */
  animation:heroSlowZoom 20s ease-in-out infinite alternate;
}
.hero-slide.is-active{
  opacity:.5;
}
@keyframes heroSlowZoom{
  from{transform:scale(1);}
  to{transform:scale(1.09);}
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{animation:none;}
}

.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,20,18,.22) 0%,rgba(15,20,18,.08) 32%,rgba(12,16,14,.62) 100%);
}
.hero-content{position:relative;z-index:2;width:100%;padding-bottom:9vh;}
.hero-content .wrap{max-width:820px;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;
  color:#f0e2cd;margin-bottom:22px;
}
.hero-eyebrow::before{content:'';width:30px;height:1px;background:#f0e2cd;}
.hero h1{
  font-family:var(--f-serif-zh);
  font-size:clamp(30px,5vw,58px);
  line-height:1.42;
  font-weight:500;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hero h1 em{font-style:normal;color:#f3d9b8;}
.hero-sub{
  margin-top:20px;max-width:480px;
  font-size:15.5px;color:#eee7db;font-weight:300;
}
.hero-cta{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;}

.scroll-hint{
  position:absolute;right:28px;bottom:26px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#e8dfce;font-size:11px;letter-spacing:.2em;
}
.scroll-hint .line{width:1px;height:46px;background:linear-gradient(180deg,#e8dfce,transparent);animation:scrollLine 2.2s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:scaleY(.2);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(.2);transform-origin:bottom;}}

/* ===================== AEO Summary Band ===================== */
.aeo-band{
  background:var(--c-ink);
  color:var(--c-sand);
  padding:56px 0;
  position:relative;
}
.aeo-band .wrap{
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start;
}
.aeo-mark{
  font-family:var(--f-display);font-style:italic;font-size:64px;line-height:1;color:var(--c-clay);
  opacity:.9;
}
.aeo-text{
  font-family:var(--f-serif-zh);
  font-size:clamp(17px,2vw,21px);
  line-height:1.95;
  max-width:760px;
  color:#f2ede2;
  word-break:normal;
  overflow-wrap:break-word;
}
.aeo-tags{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;}
.aeo-tags span{
  font-size:11.5px;letter-spacing:.05em;color:#cfc6b3;
  border:1px solid rgba(245,242,235,.22);padding:5px 12px;border-radius:999px;
}

/* ===================== Highlights ===================== */
.highlights{padding:110px 0;background:var(--c-cream);}
.highlight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line);}
/* ---- 底圖卡片：每格背景為照片（inline style 指定 image/highlights/*.webp，
   尚未放入照片前會顯示深色底色 fallback，不會露白或破版）。
   ::before 疊加半透明深色遮罩，確保文字在任何照片上都維持可讀對比；
   卡片內文字與 icon 一併改為淺色，呼應深色遮罩。 ---- */
.highlight-card{
  position:relative;overflow:hidden;
  background-color:var(--c-ink-soft);
  background-size:cover;background-position:center;
  padding:40px 30px;
  /* ---- 注意：這裡的 transition 需要同時列出 background-color、
     opacity、transform 三者。因為此元素同時掛了 .reveal class
     （進場淡入 + 上滑動畫用的是 opacity / transform transition），
     若這裡只寫 background-color，會整個覆蓋掉 .reveal 設定的
     transition，導致進場動畫消失、卡片變成瞬間直接出現 ---- */
  transition:background-color .4s var(--ease), opacity .9s var(--ease), transform .9s var(--ease);
}
.highlight-card::before{
  content:'';position:absolute;inset:0;
  background:rgba(22,19,17,.6);
  transition:background .4s var(--ease);
  z-index:0;
}
.highlight-card:hover::before{background:rgba(22,19,17,.45);}
.highlight-card>*{position:relative;z-index:1;}
.highlight-num{font-family:var(--f-display);font-style:italic;font-size:15px;color:#f0d9c2;letter-spacing:.05em;}
.highlight-card h3{font-family:var(--f-serif-zh);font-size:19px;margin:18px 0 12px;color:var(--c-white);}
.highlight-card p{font-size:13.8px;color:rgba(245,242,235,.82);margin:0;}
.highlight-icon{width:38px;height:38px;margin-bottom:22px;}

/* ===================== Rooms ===================== */
.rooms{padding:110px 0;background:var(--c-white);}
.room-scroller{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
  gap:22px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity;
  margin:0 -28px;padding-left:28px;padding-right:28px;
}
.room-scroller::-webkit-scrollbar{height:5px;}
.room-scroller::-webkit-scrollbar-thumb{background:var(--c-line-strong);border-radius:10px;}
/* ---- 桌機版（>760px）：改成固定 3 欄網格，不出現橫向滑動；
   橫向滑動效果只保留給手機版（見 max-width:760px 那段） ---- */
@media(min-width:761px){
  .room-scroller{
    display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);
    overflow-x:visible;scroll-snap-type:none;
    margin:0;padding:0;
  }
}
.room-card{
  scroll-snap-align:start;
  display:block;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--c-cream);
  border:1px solid var(--c-line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .9s var(--ease);
}
.room-card:hover{transform:translateY(-6px);box-shadow:0 26px 42px -26px rgba(22,19,17,.28);}
.room-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,#eadfca,#c7a679);}
.room-media .room-illust{position:absolute;inset:0;width:100%;height:100%;transition:transform .8s var(--ease);}
/* ---- 首頁房型卡片：以真實照片取代 SVG 插畫時，需 object-fit:cover
   避免照片被拉伸變形（SVG 本身靠 viewBox 縮放，不受此規則影響） ---- */
.room-media .room-illust-photo{object-fit:cover;}
.room-card:hover .room-illust{transform:scale(1.08);}
.room-media .room-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--f-body);font-style:normal;font-weight:700;font-size:var(--num-sm);
  background:rgba(22,19,17,.72);color:var(--c-sand);
  padding:4px 11px;border-radius:999px;letter-spacing:.04em;
}
.room-body{padding:20px 20px 24px;}
.room-body .eyebrow{font-size:10.5px;}
.room-body h3{font-family:var(--f-serif-zh);font-size:19px;margin:8px 0 6px;}
.room-body .en{font-family:var(--f-display);font-style:italic;color:#9a8f7b;font-size:13.5px;display:block;margin-bottom:10px;}
.room-body p{font-size:13.2px;color:#6b6459;margin:0 0 14px;}
.room-body .room-link{font-size:12.5px;color:var(--c-clay-dark);display:inline-flex;align-items:center;gap:6px;}
.room-body .room-link::after{content:'→';transition:transform .3s;}
.room-card:hover .room-link::after{transform:translateX(4px);}

/* ===================== Reviews (Google Reviews Widget) ===================== */
.reviews{padding:90px 0 60px;background:var(--c-white);}
.reviews .section-head{padding:0 28px;}
.reviews-embed-panel{
  position:relative;
  background:var(--c-white);
  border:1px solid var(--c-line-strong);
  border-radius:var(--radius-m);
  padding:8px clamp(16px,3vw,32px) 24px;
  overflow:hidden;
  min-height:220px;
  box-shadow:0 24px 50px -30px rgba(22,19,17,.22);
}
.reviews-embed-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c-clay),#dcc8a3,var(--c-clay));
}
.reviews-iframe{
  display:block;
  width:100%;
  border:0;
  height:640px;
}
@media (max-width:900px){
  .reviews-iframe{height:860px;}
}
@media (max-width:520px){
  .reviews-iframe{height:1080px;}
}

/* ===================== Explore Taitung ===================== */
.explore{padding:110px 0;background:var(--c-white);}
.explore-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:52px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.blog-card{border:1px solid var(--c-line);border-radius:var(--radius-m);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .9s var(--ease);}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 22px 36px -24px rgba(22,19,17,.25);}
.blog-media{aspect-ratio:16/10;background:linear-gradient(135deg,#dcd0b3,#a9744f);position:relative;overflow:hidden;}
.blog-media svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .7s var(--ease);}
.blog-card:hover .blog-media svg{transform:scale(1.06);}
.blog-body{padding:20px 22px 24px;}
.blog-body .eyebrow{font-size:10.5px;}
.blog-body h3{font-family:var(--f-serif-zh);font-size:17px;line-height:1.5;margin:10px 0 12px;}
.blog-body .room-link{font-size:12.5px;color:var(--c-clay-dark);}

/* ===================== Map / Neighborhood ===================== */
.map-section{padding:110px 0;background:var(--c-sand);}
.map-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--c-line-strong);border-radius:var(--radius-m);overflow:hidden;}
.map-embed{min-height:440px;}
.map-embed iframe{width:100%;height:100%;min-height:440px;border:0;filter:grayscale(12%) contrast(1.02);}
.map-info{background:var(--c-white);padding:48px 42px;display:flex;flex-direction:column;justify-content:center;}
.map-info h3{font-family:var(--f-serif-zh);font-size:24px;margin:8px 0 6px;}
.map-info>p{color:#6b6459;font-size:14px;margin-bottom:26px;}
.neigh-list{display:flex;flex-direction:column;gap:0;}
.neigh-list li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--c-line);
  font-size:14px;
}
.neigh-list li:last-child{border-bottom:none;}
.neigh-list .place{color:var(--c-ink);}
.neigh-list .time{color:var(--c-clay-dark);font-family:var(--f-body);font-style:normal;font-weight:700;font-size:var(--num-sm);white-space:nowrap;margin-left:14px;}
.map-info .btn{margin-top:28px;align-self:flex-start;}

/* ---- 無地圖版本（台東小旅行指南頁「巷口出發，步行可達」）：
   拿掉 Google 地圖嵌入後，原本的格線外框＋白色卡片會變成
   多餘的雙重框線，這裡改成無外框、直接融入區塊背景的簡潔排版，
   並限制內文最大寬度以維持良好的閱讀行寬 ---- */
.map-grid--no-embed{
  grid-template-columns:1fr;
  border:none;border-radius:0;overflow:visible;background:transparent;
}
.map-grid--no-embed .map-info{
  background:transparent;padding:0;max-width:640px;margin:0 auto;
}
.map-grid--no-embed .neigh-list{
  max-width:100%;margin-top:8px;border-top:1px solid var(--c-line-strong);
}

/* ---- 步行/車程清單：手機版改為兩行排列（地點+時間一行、導航按鈕另起一行），
   避免三個元素擠在同一行造成換行錯位 ---- */
@media(max-width:600px){
  .neigh-list li{flex-direction:column;align-items:stretch;gap:10px;}
  .neigh-list .neigh-info{display:flex;justify-content:space-between;align-items:baseline;width:100%;}
  .neigh-list li .nav-btn{align-self:flex-end;}
}

/* ===================== Footer ===================== */
.site-footer{background:var(--c-ink);color:#d8d2c4;padding:80px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:50px;padding-bottom:56px;border-bottom:1px solid rgba(216,210,196,.14);}
.footer-brand .logo .cn,.footer-brand .logo .en{color:#f2ede2;}
.footer-brand p{font-size:13.5px;color:#a9a294;margin:18px 0 22px;max-width:270px;}
.footer-social{display:flex;gap:12px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(216,210,196,.28);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,transform .3s;
}
.footer-social a:hover{background:var(--c-clay);border-color:var(--c-clay);transform:translateY(-3px);}
.footer-social svg{width:16px;height:16px;}
.footer-col h4{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#efe9dc;margin-bottom:20px;}
.footer-col ul li{margin-bottom:12px;font-size:13.8px;}
.footer-col ul li a:hover{color:var(--c-clay);}
.footer-col address{font-style:normal;font-size:13.8px;line-height:2;color:#c5bfaf;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding-top:26px;font-size:12px;color:#8b8474;
}
.footer-bottom a:hover{color:var(--c-clay);}

/* ===================== Responsive ===================== */
@media(max-width:980px){
  .highlight-grid{grid-template-columns:repeat(2,1fr);}
  .explore-top{grid-template-columns:1fr;gap:22px;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .map-grid{grid-template-columns:1fr;}
  .map-embed{min-height:320px;}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:40px;}
}
@media(max-width:760px){
  .main-nav{display:none;}
  .header-actions{display:none;}
  .nav-toggle{display:flex;}
  /* ---- 手機版 Logo 縮小，避免在窄螢幕上比例過大 ---- */
  .logo-img{height:80px;}
  .site-header.is-scrolled .logo-img{height:60px;}
  .drawer-head .logo-img{height:80px;}
  .highlight-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .aeo-band{padding:44px 0;}
  .aeo-band .wrap{grid-template-columns:1fr;gap:14px;}
  .aeo-mark{font-size:34px;line-height:1;}
  .aeo-text{font-size:15.5px;line-height:1.85;}
  .aeo-tags{margin-top:16px;}
  .aeo-tags span{font-size:11px;padding:4px 10px;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-cta{flex-direction:column;align-items:flex-start;}
  .hero-cta .btn{width:100%;}

  .section-title{font-size:24px;}
  .section-lede{font-size:14px;}
  .highlight-card h3,.room-body h3{font-size:17px;}
  .highlight-card p,.room-body p{font-size:13px;}
  .blog-body h3{font-size:16px;}
  .map-info h3{font-size:20px;}
  .highlights,.rooms,.reviews,.explore,.map-section{padding:70px 0;}

  .hero{height:auto;min-height:0;padding-top:140px;}
  .hero-content{padding-bottom:56px;}
  .hero-eyebrow{display:inline-flex;}
  .hero h1{font-size:clamp(26px,7vw,34px);line-height:1.5;}
  .hero-sub{font-size:14.5px;margin-top:14px;}
  .hero-cta{margin-top:26px;gap:12px;}
  .scroll-hint{display:none;}
}

/* ============================================================
   子頁共用：Rooms Page 等內頁樣式
   說明：以下規則僅新增，不覆寫／修改上方任何既有樣式，
   確保首頁（index.html）視覺與行為完全不受影響。
   ============================================================ */

/* ---- 子頁 Header：與首頁採用同一組 #333333 深色 Header，
   確保全站 Logo／導覽列配色一致 ---- */
body.subpage{padding-top:0;}

/* ---- Page Intro（子頁小標題區） ---- */
.page-intro{
  padding:164px 0 70px;
  background:var(--c-sand);
  border-bottom:1px solid var(--c-line);
}
.page-intro .section-head{margin-bottom:0;}
.page-stats{
  display:flex;flex-wrap:wrap;gap:34px;
  margin-top:36px;padding-top:30px;border-top:1px solid var(--c-line-strong);
}
.page-stats .stat{text-align:center;}
.page-stats .stat b{
  display:block;font-family:var(--f-body);font-style:normal;font-weight:700;font-size:var(--num-lg);color:var(--c-clay-dark);
}
.page-stats .stat span{font-size:12.5px;color:#6b6459;letter-spacing:.03em;}

/* ---- Room Detail（房型詳細介紹，交錯圖文排版） ---- */
.room-detail-list{background:var(--c-white);}
.blog-list-section{padding:8px 0 16px;background:var(--c-white);}
.blog-list-section .blog-empty{grid-column:1/-1;}
.room-detail{
  padding:90px 0;
  border-bottom:1px solid var(--c-line);
}
.room-detail:last-child{border-bottom:none;}
.room-detail:nth-child(even){background:var(--c-cream);}
.room-detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.room-detail:nth-child(even) .room-detail-grid{direction:rtl;}
.room-detail:nth-child(even) .room-detail-grid>*{direction:ltr;}

.room-detail-media{position:relative;border-radius:var(--radius-m);overflow:hidden;aspect-ratio:6/5;}
.room-detail-media .room-illust{position:absolute;inset:0;display:block;width:100%;height:100%;transition:transform .8s var(--ease);}
.room-detail-media:hover .room-illust{transform:scale(1.045);}
.room-detail-media .room-tag{
  position:absolute;top:18px;left:18px;z-index:2;
  font-family:var(--f-body);font-style:normal;font-weight:700;font-size:var(--num-sm);
  background:rgba(22,19,17,.72);color:var(--c-sand);
  padding:5px 13px;border-radius:999px;letter-spacing:.04em;
}

/* ---- 房型照片輪播（Carousel）----
   新增照片：直接在該房型頁 HTML 的 .carousel-track 裡加一個
   .carousel-slide > img 即可，script.js 只負責輪播行為（自動播放、
   左右箭頭、圓點、滑動手勢）；未提供照片的房型會維持顯示原本 SVG 插畫。 */
.carousel{position:absolute;inset:0;}
.carousel-fallback{position:absolute;inset:0;width:100%;height:100%;}
.carousel-track{
  display:flex;width:100%;height:100%;
  transition:transform .55s var(--ease);
  cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.carousel-track:active{cursor:grabbing;}
.carousel-slide{flex:0 0 100%;height:100%;}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(22,19,17,.55);color:var(--c-sand);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;cursor:pointer;
  transition:background .3s,opacity .3s;
  opacity:0;
}
.room-detail-media:hover .carousel-arrow{opacity:1;}
.carousel-arrow:hover{background:var(--c-clay);}
.carousel-arrow.prev{left:14px;}
.carousel-arrow.next{right:14px;}
.carousel-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:7px;
}
.carousel-dot{
  width:7px;height:7px;border-radius:50%;border:none;padding:0;
  background:rgba(245,242,235,.55);cursor:pointer;
  transition:background .3s,transform .3s;
}
.carousel-dot.is-active{background:var(--c-sand);transform:scale(1.25);}
@media(max-width:760px){
  .carousel-arrow{opacity:1;width:30px;height:30px;font-size:16px;}
}

.room-detail-body h3{font-family:var(--f-serif-zh);font-size:clamp(24px,2.6vw,32px);margin:10px 0 4px;}
.room-detail-body .en{font-family:var(--f-display);font-style:italic;color:#9a8f7b;font-size:15px;display:block;margin-bottom:20px;}
.room-detail-body>p.desc{font-size:14.5px;color:#5c5650;margin:0 0 26px;max-width:480px;}

.spec-row{display:flex;flex-wrap:wrap;gap:28px;margin-bottom:28px;}
.spec-item{display:flex;flex-direction:column;gap:4px;}
.spec-item .spec-icon{width:22px;height:22px;margin-bottom:2px;}
.spec-item b{font-family:var(--f-body);font-style:normal;font-weight:700;font-size:var(--num-sm);color:var(--c-ink);}
.spec-item span{font-size:11.5px;color:#8a8378;letter-spacing:.03em;}

.feature-list{display:flex;flex-direction:column;gap:12px;margin-bottom:30px;}
.feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.6px;color:#4a453e;}
.feature-list li .dot{
  flex:0 0 auto;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--c-clay);
}

.room-detail-note{
  background:var(--c-ink);color:var(--c-sand);padding:26px 28px;
  font-size:12.5px;line-height:1.9;
}
.room-detail-note b{color:#f0d9c2;}

/* ---- Responsive：房型頁 ---- */
@media(max-width:980px){
  .room-detail-grid{grid-template-columns:1fr;gap:30px;}
  .room-detail:nth-child(even) .room-detail-grid{direction:ltr;}
}
@media(max-width:760px){
  .page-intro{padding:140px 0 50px;}
  .page-stats{gap:22px;}
  .room-detail{padding:60px 0;}
  .room-detail-body>p.desc{max-width:100%;}
  .spec-row{gap:20px;}
}

/* ============================================================
   Availability Page（訂房日曆頁）專屬樣式
   說明：以下規則僅新增，不影響首頁／房型頁既有樣式。
   ============================================================ */

/* ---- 即時房況嵌入區 ---- */
.availability-section{padding:70px 0 30px;background:var(--c-white);}
.availability-panel{
  border:1px solid var(--c-line-strong);border-radius:var(--radius-m);
  overflow:hidden;background:var(--c-cream);
}
.availability-panel-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:18px 24px;border-bottom:1px solid var(--c-line);background:var(--c-white);
}
.availability-panel-head .live-dot{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#6b6459;letter-spacing:.03em;
}
.availability-panel-head .live-dot i{
  width:7px;height:7px;border-radius:50%;background:#5f9e77;display:inline-block;
  animation:pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
.availability-panel-head a{font-size:12.5px;color:var(--c-clay-dark);}
.iframe-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--c-white);}
.iframe-scroll iframe{
  display:block;width:100%;min-width:960px;height:480px;border:0;
}
.availability-hint{
  padding:14px 24px 20px;font-size:12px;color:#8a8378;background:var(--c-white);
}

/* ---- LINE 訂房優惠 Banner ---- */
.line-promo{
  margin-top:56px;
  background:linear-gradient(135deg,#1c2b26,#161311);
  color:var(--c-sand);
  border-radius:var(--radius-m);
  padding:52px 48px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
}
.promo-badge{
  display:inline-flex;align-items:baseline;gap:6px;
  background:var(--c-clay);color:var(--c-white);
  padding:5px 14px;border-radius:999px;
  font-family:var(--f-display);font-style:italic;font-size:14px;
  margin-bottom:16px;
}
.line-promo h3{font-family:var(--f-serif-zh);font-size:clamp(22px,2.6vw,30px);margin:0 0 12px;}
.line-promo p{font-size:14px;color:#cfc6b3;max-width:480px;margin:0;}
.line-promo-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
/* ---- 加入 LINE 好友訂房 按鈕：按下／hover 時改為 LINE 品牌綠 #06C755 ---- */
.line-promo-actions .btn-primary:hover,
.line-promo-actions .btn-primary:focus-visible,
.line-promo-actions .btn-primary:active{
  background:#06C755;
  color:var(--c-white);
  box-shadow:0 14px 26px -12px rgba(6,199,85,.55);
}
.line-id-row{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-style:normal;font-weight:700;font-size:var(--num-sm);color:#e7dfcd;
}
.copy-btn{
  border:1px solid rgba(245,242,235,.3);background:transparent;color:#e7dfcd;
  font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;
  transition:background .3s,border-color .3s;
}
.copy-btn:hover{border-color:var(--c-clay);}
.copy-btn.is-copied{background:var(--c-clay);border-color:var(--c-clay);color:var(--c-white);}

/* ---- 訂房流程 Steps ---- */
.booking-steps{padding:90px 0;background:var(--c-sand);}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line);}
.step-card{background:var(--c-sand);padding:34px 28px;position:relative;transition:background .4s var(--ease),opacity .9s var(--ease),transform .9s var(--ease);}
.step-card:hover{background:var(--c-white);}
.step-card .step-no{
  font-family:var(--f-body);font-style:normal;font-weight:700;font-size:var(--num-lg);color:var(--c-clay);
  opacity:.85;margin-bottom:16px;display:block;
}
.step-card h4{font-family:var(--f-serif-zh);font-size:16.5px;margin:0 0 8px;}
.step-card p{font-size:12.8px;color:#6b6459;margin:0;}

/* ---- 依人數快速挑房 ---- */
.quick-rooms{padding:90px 0;background:var(--c-white);}
.quick-rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:640px;margin:0 auto;}
.quick-room-card{
  display:block;text-align:center;padding:26px 12px;
  border:1px solid var(--c-line);border-radius:var(--radius-m);
  transition:border-color .3s,transform .3s,box-shadow .3s,opacity .9s var(--ease);
}
.quick-room-card:hover{border-color:var(--c-clay);transform:translateY(-4px);box-shadow:0 18px 30px -22px rgba(22,19,17,.25);}
.quick-room-card .qty{
  font-family:var(--f-body);font-style:normal;font-weight:700;font-size:17px;color:var(--c-clay-dark);display:block;letter-spacing:.01em;
}
.quick-room-card .qty-label{font-size:10.5px;color:#8a8378;letter-spacing:.05em;margin-bottom:14px;display:block;}
.quick-room-card b{font-family:var(--f-serif-zh);font-size:14.5px;display:block;color:var(--c-ink);}

/* ---- FAQ（原生 details/summary，無需 JS） ---- */
.faq-section{padding:90px 0 110px;background:var(--c-sand);}
.faq-list{border-top:1px solid var(--c-line-strong);max-width:760px;}
.faq-item{border-bottom:1px solid var(--c-line-strong);}
.faq-item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;font-family:var(--f-serif-zh);font-size:16px;color:var(--c-ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';font-family:var(--f-display);font-size:22px;color:var(--c-clay);
  transition:transform .3s var(--ease);flex:0 0 auto;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin:0 4px 22px;font-size:13.6px;color:#5c5650;max-width:640px;}

/* ---- Responsive：Availability 頁 ---- */
@media(max-width:980px){
  .line-promo{grid-template-columns:1fr;text-align:left;}
  .line-promo-actions{align-items:flex-start;}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .quick-rooms-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:760px){
  .availability-section{padding:56px 0 10px;}
  .availability-panel-head{padding:14px 16px;}
  .iframe-scroll iframe{height:420px;}
  .line-promo{padding:34px 24px;margin-top:40px;}
  .booking-steps,.quick-rooms,.faq-section{padding:60px 0;}
  .steps-grid{grid-template-columns:1fr 1fr;}
  .quick-rooms-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .quick-room-card{padding:18px 6px;}
  .quick-room-card .qty{font-size:14px;}
}

/* ============================================================
   Blog Article（部落格文章）專屬樣式
   說明：文章區塊重用房型頁既有的 .room-detail 交錯圖文版型，
   這裡只新增文章特有的 meta 列與段落排版，不影響既有規則。
   ============================================================ */
.article-meta{display:flex;align-items:center;gap:14px;margin-top:2px;}
.article-date{font-family:var(--f-body);font-style:normal;font-weight:700;color:#9a8f7b;font-size:var(--num-sm);}
.room-detail-body.article-copy h3{margin-top:8px;}
.room-detail-body.article-copy p{
  font-size:14.5px;color:#4a453e;line-height:1.95;margin:0 0 18px;max-width:560px;
}
.room-detail-body.article-copy p:last-child{margin-bottom:0;}

/* ============================================================
   導航按鈕 .nav-btn
   說明：小型圓角按鈕，點擊後在新分頁開啟 Google 地圖導航／地點連結，
   用於 taitung-guide.html 的巷口地圖清單、探索卡片，
   以及部落格文章中的地點清單（例如早餐店推薦）。
   ============================================================ */
.nav-btn{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:8px 15px;
  font-size:12px;letter-spacing:.03em;white-space:nowrap;
  border:1px solid var(--c-line-strong);border-radius:999px;
  color:var(--c-clay-dark);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.nav-btn:hover{background:var(--c-clay);border-color:var(--c-clay);color:var(--c-white);transform:translateY(-1px);}

/* ---- 部落格文章內的地點清單（例如：台東早餐推薦） ---- */
.place-list{
  margin-top:6px;max-width:560px;
  border-top:1px solid var(--c-line);
}
.place-list li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--c-line);
}
.place-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
.place-name{font-family:var(--f-serif-zh);font-size:14.5px;color:var(--c-ink);}
.place-note{font-size:12px;color:#8a8378;line-height:1.6;}
@media(max-width:760px){
  .place-list li{align-items:flex-start;}
  .place-note{max-width:220px;}
}

/* ============================================================
   Blog 分類標籤 Tag Pill
   說明：用於部落格教師卡片（.blog-media 右上角）與完整文章
   （.article-meta 內），三種標籤各自配色，方便一眼辨識分類。
   ============================================================ */
.tag-pill{
  display:inline-flex;align-items:center;
  font-size:11px;letter-spacing:.05em;font-weight:600;
  padding:5px 12px;border-radius:999px;
  white-space:nowrap;
}
.blog-media .tag-pill{
  position:absolute;top:14px;right:14px;z-index:2;
  background:rgba(22,19,17,.72);color:var(--c-sand);
  backdrop-filter:blur(2px);
}
.article-meta .tag-pill{
  color:var(--c-white);
}
.tag-pill.tag-travel{background:#5C7F70;}
.tag-pill.tag-food{background:var(--c-clay);}
.tag-pill.tag-event{background:#8C5C3C;}
.blog-media .tag-pill.tag-travel,
.blog-media .tag-pill.tag-food,
.blog-media .tag-pill.tag-event{background:rgba(22,19,17,.72);}

/* ============================================================
   Blog 分類篩選 Filter Pills（旅遊／美食／活動／全部）
   ============================================================ */
.blog-toolbar{padding:70px 0 0;background:var(--c-white);}
.blog-filter{
  display:flex;flex-wrap:wrap;gap:10px;
  padding-bottom:36px;border-bottom:1px solid var(--c-line);
}
.filter-pill{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:11px 20px;
  border:1px solid var(--c-line-strong);border-radius:999px;
  background:transparent;cursor:pointer;
  font-family:var(--f-serif-zh);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.filter-pill:hover{border-color:var(--c-clay);color:var(--c-clay-dark);transform:translateY(-1px);}
.filter-pill-zh{font-size:14.5px;color:var(--c-ink);}
.filter-pill-en{
  font-family:var(--f-display);font-style:italic;font-size:11px;
  color:#9a8f7b;letter-spacing:.03em;text-transform:uppercase;
}
.filter-pill:hover .filter-pill-zh{color:var(--c-clay-dark);}
.filter-pill.is-active{
  background:var(--c-ink);border-color:var(--c-ink);
}
.filter-pill.is-active .filter-pill-zh{color:var(--c-white);}
.filter-pill.is-active .filter-pill-en{color:#d8cdb8;}
.filter-pill.is-active:hover{transform:none;}

/* ---- 篩選後無符合文章時的提示 ---- */
.blog-empty{padding:80px 0;text-align:center;color:#8a8378;font-size:14.5px;background:var(--c-white);}

/* ============================================================
   Blog 分頁 Pagination
   ============================================================ */
.blog-pagination-section{padding:0 0 100px;background:var(--c-white);}
.blog-pagination{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding-top:50px;
}
.page-btn{
  min-width:40px;height:40px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--c-line-strong);border-radius:999px;
  background:transparent;color:var(--c-ink);
  font-family:var(--f-body);font-size:13.5px;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.page-btn:hover:not(:disabled){border-color:var(--c-clay);color:var(--c-clay-dark);transform:translateY(-1px);}
.page-btn.is-active{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-white);}
.page-btn.is-active:hover{transform:none;}
.page-btn-arrow{font-size:16px;}
.page-btn:disabled{opacity:.32;cursor:default;}
.page-btn:disabled:hover{border-color:var(--c-line-strong);color:var(--c-ink);transform:none;}

/* ---- 深連結：從首頁／台東指南頁精選卡片點進特定文章時的短暫高亮 ---- */
.room-detail.is-target{animation:articleHighlight 2.4s var(--ease);}
@keyframes articleHighlight{
  0%{background:#f0e2cd;}
  100%{background:transparent;}
}
.room-detail:nth-child(even).is-target{animation-name:articleHighlightAlt;}
@keyframes articleHighlightAlt{
  0%{background:#f0e2cd;}
  100%{background:var(--c-cream);}
}

@media(max-width:760px){
  .blog-toolbar{padding:44px 0 0;}
  .blog-filter{gap:8px;padding-bottom:26px;}
  .filter-pill{padding:9px 15px;}
  .blog-pagination-section{padding:0 0 60px;}
  .blog-pagination{padding-top:34px;gap:6px;}
  .page-btn{min-width:36px;height:36px;font-size:13px;}
}