/* ============================================================
   匠滑雪 Takumi Riding — 品牌設計變數（三頁共用）
   改品牌色、字體只需改這一個檔案。
   來源：匠滑雪品牌視覺規範 v3
   ============================================================ */
:root{
  /* 主色（湖綠系） */
  --p-dark:   #16525C;
  --p-mid:    #25767E;
  --p-light:  #32AEB0;
  --p-pale:   #9ACACD;
  /* 灰階 */
  --g-dark:   #4E4E4E;
  --g-mid:    #8B8B8B;
  --g-light:  #C7C7C7;
  /* 強調色 */
  --acc-org:  #FB5B08;
  --acc-yel:  #F1BA41;
  /* 基底 */
  --black:    #000;
  --white:    #fff;
  --bg:       #F4F8F9;
  /* 字體 */
  --fn:       'Noto Sans TC',sans-serif;
  --fe:       'Sen',sans-serif;
}

/* ============================================================
   內文照片版位（四個雪場頁共用；2026-08-13 新增）
   .rp-figure 內文配圖；.rp-hero 段首大圖（16:9）
   ============================================================ */
.rp-figure{margin:26px 0;}
.rp-figure img{width:100%;height:auto;display:block;border-radius:4px;}
.rp-figure figcaption{
  margin-top:8px;font-family:var(--fn);font-size:13px;line-height:1.6;
  color:var(--g-mid);letter-spacing:.02em;
}
.rp-figure.rp-hero{margin:0 0 30px;}

/* ============================================================
   浮動 LINE 按鈕＋回到頂部按鈕（2026-08-13 起全站共用）
   原本只有 index.html 有（樣式寫在該頁內嵌 <style>，數值與此處相同、
   內嵌優先，重複無害）；本區塊供其餘 9 頁沿用，故色值寫死不依賴各頁變數。
   手機版避開底部導覽列的位移在下方 media query（已存在）。
   ============================================================ */
.sticky-line{
  position:fixed; bottom:30px; right:30px; z-index:9999;
  width:65px; height:65px; background:#06C755; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  box-shadow:0 4px 15px rgba(0,0,0,.2); transition:transform .35s cubic-bezier(.16,1,.3,1), background .35s ease-out;
}
.sticky-line:hover{transform:scale(1.06); background:#05b04b}
.sticky-line svg{width:40px; height:40px; fill:#fff}
/* 匠編頭像徽章：白色圓墊避免深色線稿糊在綠底上 */
.sticky-line .sl-avatar{
  position:absolute; top:-6px; left:-6px; width:30px; height:30px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sticky-line .sl-avatar img{height:24px; width:auto; display:block}
/* 呼吸光圈 */
.sticky-line::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #06C755;animation:linePulse 2.6s ease-out infinite;pointer-events:none}
@keyframes linePulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
/* 回到頂部 */
#toTop{position:fixed;bottom:168px;right:34px;width:46px;height:46px;border:1px solid rgba(22,82,92,.25);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:#16525C;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s,background .3s,color .3s,transform .3s;z-index:9997;cursor:pointer;border-radius:50%}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{background:#16525C;color:#fff;transform:translateY(-3px)}
#toTop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
/* 浮動「立即預約」鍵（2026-08-15 新增）：接 Rezio 前台，桌機才出現——
   手機底部導覽列已有橘色「立即預約」，重複會擋畫面。 */
.sticky-book{
  position:fixed; bottom:107px; right:38px; z-index:9998;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.94); text-decoration:none;
  border:2px solid #F1BA41; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.10);
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .35s ease-out, box-shadow .35s ease-out;
}
.sticky-book svg{width:20px;height:20px;fill:none;stroke:#16525C;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sticky-book:hover{background:#F1BA41;box-shadow:0 6px 16px rgba(241,186,65,.45)}
.sticky-book:hover svg{stroke:#fff}
.sticky-book:hover{transform:scale(1.06)}

/* 兩顆浮動鍵的提示字（2026-08-15）：瀏覽器內建 title 提示固定要等 1～2 秒才跳出，
   延遲時間改不了，所以改成自繪提示，滑上去就顯示。文字寫在 data-tip 屬性。
   （scale(.943) 是抵銷按鈕 hover 時的 scale(1.06)，讓提示字維持原尺寸；
   2026-08-15 老闆回饋 hover 觸感突兀，改用更柔和的收尾曲線＋放慢淡入節奏） */
/* 2026-08-15 老闆回饋（二版）：兩框文字置中、要「跟字差不多大」——一版設 96px 撐成大方塊。 */
/* 2026-08-15 四版（老闆第三次回饋「過大、上下沒置中」）：前三版都憑目視猜數字，
   這版改用 canvas measureText 量 Noto Sans TC 700 12px 的實際數據再回推——
   字型格 ascent 14／descent 3（line-height:normal ＝ 17px，光這裡就多佔 5px），
   而中文字墨只落在基線上方 10.3px 至下方 1.1px（實高 11.4px）。
   改法兩件：(1) line-height 鎖 1，砍掉字型格多出來的 5px；
   (2) 字墨在格內天生偏下 0.9px，故 padding 必須「下比上多」1.8px 才視覺置中——
   前三版寫成上多下少，方向相反，越調越偏。結果：高 26.5px→21.8px，字墨上下留白同為 5.2px。 */
/* 2026-08-15 五版：二版的「兩框等大」由老闆改判為「貼字」——等大是拿最長的
   「立即預約」去撐「找匠編」，害三個字的框多空 12px，正是它看起來大的主因；
   且兩框永不同時出現（滑到哪顆才跳哪個），等大在畫面上看不出來。故拿掉 min-width，
   各自貼著自己的字。結果：找匠編本體 62→51px，立即預約 64px 不變（本來就貼字）。 */
.sticky-line::before,.sticky-book::before{
  content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) scale(.943) translateX(6px);transform-origin:right center;
  white-space:nowrap;background:var(--acc-org);color:#fff;
  font-family:var(--fn);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1;
  box-sizing:border-box;width:auto;height:auto;padding:4px 7px 5.8px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;box-shadow:0 6px 18px rgba(251,91,8,.35);
  opacity:0;pointer-events:none;transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1);
}
.sticky-line:hover::before,.sticky-book:hover::before{
  opacity:1;transform:translateY(-50%) scale(.943) translateX(0);transition-delay:.06s;
}
/* 「找匠編」提示框做成從左上角匠編頭像講出來的漫畫對話泡泡（2026-08-15，
   依老闆補充參考圖調整：圓角矩形本體＋明確三角形尖角尾巴，尖角指向頭像）：
   定位錨點從按鈕垂直正中央（top:50%）改對齊頭像高度（頭像 top:-6px、
   直徑30px，中心約在 9px 處），border-radius 加大讓本體更接近泡泡感，
   並用 clip-path 在右側切出一個較明顯的三角形尖角指向頭像；clip-path 會
   連 box-shadow 一起吃掉，陰影改用 filter:drop-shadow。 */
.sticky-line::before{
  top:9px;
  right:calc(100% + 2px);
  padding-right:19px;
  border-radius:10px;
  box-shadow:none;
  filter:drop-shadow(0 6px 14px rgba(251,91,8,.4));
  /* 尖角要有真的畫布可畫：先用 padding-right 多留 12px 空間，
     clip-path 的矩形本體只切到 calc(100% - 12px)，尖角頂點落在真正的 100%，
     這樣尖角才會實際「長」在按鈕外面，不會被自己的邊界吃掉 */
  /* 2026-08-15：clip-path 的直線邊界會把 border-radius 裁成稜角，右上／右下各補
     三個點近似 6px 圓弧，尖角維持指向頭像。 */
  clip-path:polygon(0% 0%,calc(100% - 18px) 0%,calc(100% - 14px) 1px,calc(100% - 12px) 5px,calc(100% - 12px) 32%,100% 50%,calc(100% - 12px) 68%,calc(100% - 12px) calc(100% - 5px),calc(100% - 14px) calc(100% - 1px),calc(100% - 18px) 100%,0% 100%);
}
@media(max-width:900px){
  .sticky-line::before,.sticky-book::before{display:none}
  .sticky-book{display:none}
  .sticky-line{right:20px;width:55px;height:55px}
  .sticky-line svg{width:32px;height:32px}
  #toTop{right:24px;width:42px;height:42px}
}

/* ============================================================
   手機版底部固定導覽列（10 個正式頁共用；2026-08-11 新增）
   ============================================================ */
.mobile-bottom-nav{display:none}
@media(max-width:900px){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom));}
  .mobile-bottom-nav{
    display:flex;position:fixed;left:0;right:0;top:auto;bottom:0;height:auto;z-index:200;
    background:var(--p-dark);
    box-shadow:0 -2px 10px rgba(0,0,0,.18);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bottom-nav a{
    /* min-width:0 是關鍵：flex-basis:0 只保證「理想」等寬，瀏覽器仍會用內容的
       min-content 當下限，Safari 對這點比 Chrome 嚴格，四格內容長度不同時
       就會被撐開成不等寬（2026-08-15 老闆真機截圖回報）。 */
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:48px;padding:8px 4px;
    color:var(--white);text-decoration:none;font-family:var(--fn);font-size:11px;
    -webkit-tap-highlight-color:transparent;
  }
  /* LINE 諮詢鍵的匠編頭像（2026-08-11）：頭像本身是白底深線稿，深色列上可直接辨識，不另加白墊 */
  .mobile-bottom-nav a .mbn-avatar{height:18px;width:auto;display:block;flex:0 0 auto}
  /* LINE 諮詢鍵頭像與文字並排（2026-08-12，老闆指示）；line-height:1 消除中文字型預設行高造成文字比圖示偏低約 8px 的視覺落差 */
  .mobile-bottom-nav a.mbn-line{flex-direction:row;gap:5px;line-height:1}
  .mobile-bottom-nav a.mbn-active{color:var(--acc-yel);font-weight:700}
  .mobile-bottom-nav a.mbn-book{background:var(--acc-org);color:var(--white);font-weight:700}
  /* 底部導覽列已有「LINE 諮詢」入口（同一個 lin.ee 連結），手機不再重複顯示懸浮 LINE 鍵 */
  .sticky-line{display:none !important;}
  #toTop{bottom:calc(76px + env(safe-area-inset-bottom)) !important;}
}

/* ============================================================
   全站統一 footer（2026-08-15，老闆指示：每頁 footer 同首頁樣式）
   標記結構複製自 index.html <footer>；index 自帶同值內嵌規則，重複無害。
   各分頁原本的 footer{}/.fcopy{} 舊規則已自頁內移除，統一吃這裡。
   ============================================================ */
footer{background:var(--p-dark);padding:60px 60px 44px;display:flex;justify-content:space-between;align-items:flex-start;gap:60px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.06)}
.foot-brand{display:flex;flex-direction:column;gap:20px;max-width:620px}
.foot-stmt{font-family:var(--fn);font-size:13px;font-weight:300;color:var(--p-pale);line-height:1.9;padding-left:16px;border-left:2px solid var(--acc-yel)}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.soc-btn{font-family:var(--fn);font-size:12px;letter-spacing:.1em;padding:12px 22px;border:1px solid var(--g-light);color:var(--g-dark);text-decoration:none;transition:all .3s,transform .25s;display:inline-flex;align-items:center;gap:10px;font-weight:500}
.soc-btn:hover{border-color:var(--p-light);color:var(--white);background:var(--p-light);transform:translateY(-2px)}
.soc-btn svg{width:18px;height:18px;fill:currentColor}
.soc-btn .soc-avatar{width:22px;height:22px;border-radius:50%;background:var(--white);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.soc-btn .soc-avatar img{height:18px;width:auto;display:block}
.soc-btn.btn-line:hover{border-color:#06C755;background:#06C755;color:var(--white)}
.soc-btn.btn-instagram:hover{border-color:transparent;background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:var(--white)}
.soc-btn.btn-facebook:hover{border-color:#1877F2;background:#1877F2;color:var(--white)}
/* 桌機版四顆按鈕原本用 inline-flex 純靠文字長度撐寬，「Email」字最短只有 112px、
   其餘 138–142px（2026-08-15 老闆截圖回報）；改成 4 欄等寬 grid＋內容置中對齊。
   手機版的 2 欄等寬 grid 在下方 max-width:900px 區塊覆蓋。 */
.foot-socials{display:grid;grid-template-columns:repeat(4,1fr)}
/* 手機版 2x2 時第一排（svg 18px）會比第二排（LINE 頭像 22px）矮 4px，一併鎖 48px */
.foot-socials .soc-btn{justify-content:center;min-height:48px}
.foot-socials .soc-btn{border-color:rgba(154,202,205,.25);color:var(--p-pale)}
.foot-socials .soc-btn:hover{border-color:var(--p-light);color:var(--white);background:rgba(154,202,205,.12)}
.foot-socials .soc-btn.btn-line:hover{border-color:#06C755;background:#06C755;color:var(--white)}
.foot-socials .soc-btn.btn-instagram:hover{border-color:transparent;background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:var(--white)}
.foot-socials .soc-btn.btn-facebook:hover{border-color:#1877F2;background:#1877F2;color:var(--white)}
.fcopy{font-family:var(--fe);font-size:11px;letter-spacing:.14em;color:rgba(154,202,205,.5);text-align:right;line-height:1.9;align-self:flex-end;margin-left:auto;padding-right:70px}
@media(max-width:900px){
  footer{flex-direction:column;gap:32px;padding:40px 20px 32px;text-align:center}
  .fcopy{text-align:center;align-self:center;margin-left:0;padding-right:0}
  .foot-brand{align-items:center;max-width:none}
  /* Instagram/Facebook/官方LINE/Email 四顆按鈕原本用 inline-flex 純靠文字長度撐寬，
     手機版換行成 2x2 後四格大小不一（2026-08-15 老闆截圖回報，誤認是底部導覽列）；
     改成 2 欄等寬 grid，按鈕內容再置中，讓四格對齊。 */
  .foot-socials{display:grid;grid-template-columns:1fr 1fr}
  .foot-socials .soc-btn{justify-content:center}
  /* 「隱私政策」是 .fcopy 最後一個連結，換行時「隱」字常被固定在右下角的 #toTop
     圓鈕壓住（2026-08-15 老闆截圖回報）；禁止斷行讓它整組移到獨立一行，
     水平上就避開了置右的 #toTop。 */
  .fcopy a:last-child{white-space:nowrap}
}