/* SnowGame 全站共用頁尾 .sgf（css/sg-foot.css）
   owner 11/10 從五版裡選定 F5「圓形圖示格」（實驗室 _tmp/footer-lab-20261110，經 G7 審查修正）。
   以後要改頁尾：改 tools/partials 的範本（sg-foot.zh.html、sg-foot.en.html）與本檔 css/sg-foot.css
   → 跑 python -X utf8 tools/sync-footer.py → 所有頁面一起更新。本檔內容改了，腳本會自動把各頁的 ?v= 加 1
   （版號記在 tools/partials/sg-foot.json）。不要手改各頁 <!-- SG FOOT START --> 與 <!-- SG FOOT END --> 之間的內容，
   下次同步會被範本蓋回去。
   以下是 F5 原本的說明。 */
/* F5 圓形圖示格（footer-lab-20261110；owner 11/10 選定，G7 審查修正版）
   以租借頁「租借小提醒」的圓形淡藍底線條圖示與 kit .ar-tile／.ar-tile__art（css/access-kit.css 193–203）為本：
   「更多資訊」六個連結各配一個圓形線條圖示（白圓＋1.5px #b4d3e3 內框、海軍藍圓頭線、青／黃／粉平塗），排成圖示格；
   「支援」三個用小一號的圓形圖示；付款與社群放進另一張白卡；淡冰藍底帶，頂端細線正中一顆圓形雪花章接住上面的共用結尾區。
   所有選擇器都在 .sgf--f5 底下（只有「頁面沒有共用結尾區」那一條從 body 起算）；Webflow 全站的 h3、a、p、img、ul 樣式
   會繼承或蓋到的屬性全部寫死（做法照 css/sg-end.css 檔頭）。
   斷點照 kit：手機 ≤767、平板 768–1023、桌機 ≥1024、寬 ≥1280。三種排法的由上到下（由左到右）順序都跟 DOM 一樣：
   更多資訊→支援→付款＋社群卡→Logo＋版權（桌機 Logo 在左上，是唯一例外：Tab 最後才到）。
   右下浮動鈕：601px 起左緣照 kit 80px、右緣 92px（kit 80px＋驗收 8px 緩衝＋4px）；手機最底下 244px 的右側 62px 不放連結、文字、白卡。 */
.sgf--f5 {
  --f5-ink: #17375a; --f5-text: #3a5167; --f5-en: #43647c; --f5-blue: #1d6aa8;
  --f5-band: #f3fafd; --f5-line: #d2e4ee; --f5-line-2: #b4d3e3; --f5-cyan-soft: #cdf3f8;
  --f5-shadow: 0 14px 28px -22px rgba(23, 55, 90, .5);
  --f5-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --f5-art: 52px; --f5-art-pad: 6px; --f5-logo: 130px;
  display: block; position: relative; float: none; clear: both; box-sizing: border-box; width: auto; max-width: none; min-height: 0;
  margin: 0; padding: 30px 0 14px; border: 0; border-top: 1px solid var(--f5-line);
  background: var(--f5-band);
  color: var(--f5-text); font-family: var(--f5-sans); font-size: 16px; font-weight: 400; font-style: normal; font-variant: normal;
  line-height: 1.6; letter-spacing: normal; word-spacing: normal; text-align: start; text-indent: 0; text-transform: none;
  text-shadow: none; text-decoration: none; white-space: normal; word-break: normal; overflow-wrap: normal; line-break: auto;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* G7-6：上面不是共用結尾區的頁（退款政策、人才招募中英、404），頁尾上方多留 40px，雪花章才不會貼到內文。
   不支援 :has() 的瀏覽器維持原樣。 */
body:not(:has(.sg-end)) .sgf--f5 { margin-top: 40px; }
/* 頂端細線正中的雪花章（白圓＋1.5px 淡藍內框＋kit .ar-dots 的青色雪花），接住上面白底點點的共用結尾區；畫在淡出帶上面 */
.sgf--f5::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='17.25' fill='%23fff' stroke='%23b4d3e3' stroke-width='1.5'/%3E%3Cpath d='M18 9.5v17M10.6 13.75l14.8 8.5M10.6 22.25l14.8-8.5' fill='none' stroke='%234edce9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 36px 36px no-repeat;
}
/* G7-5：細線上方 14px 白色淡出。上面共用結尾區的點點從頂端往下鋪，最後一列落在哪裡跟著各頁內容高度走（英文頁、教練頁會坐在線上），
   淡出後每頁細線上方都是乾淨的（下面 60%＝約 5px 全白，坐在線上的點點整顆蓋掉）；上面一律是白底（48 頁量過），所以淡出看不出色塊。 */
.sgf--f5::after {
  content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 14px; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 60%);
}
.sgf--f5 *, .sgf--f5 *::before, .sgf--f5 *::after { box-sizing: border-box; }
.sgf--f5 .sgf__in { width: auto; max-width: none; margin: 0 20px; padding: 0; }
.sgf--f5 ul, .sgf--f5 li { margin: 0; padding: 0; list-style: none; }
.sgf--f5 img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; }
.sgf--f5 svg { display: block; flex-shrink: 0; overflow: visible; }
/* G7-14：鍵盤 Tab 捲動時，焦點停在頁首（約 120px）下面、浮動鈕上面，焦點框（3px＋3px）不被視窗切掉。只影響捲動位置，不影響版面。
   視窗很矮（瀏覽器放大 250% 以上）時上下距跟著視窗高縮，至少留 60px 給焦點本身。 */
.sgf--f5 a { color: var(--f5-ink); text-decoration: none; background: transparent; scroll-margin: min(130px, calc(100vh - 60px)) 0 12px; }
/* 鍵盤焦點：kit 的 3px 海軍藍外框。opt.css 第 8 行全站 *:focus-visible 是 !important 藍框，這裡照 rental.css 第 32 行的做法用 !important 蓋回 kit 樣式。
   G7-15：焦點框畫在標題青色刷底（z-index 0）上面。 */
.sgf--f5 a:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--f5-ink) !important; outline-offset: 3px !important; }
.sgf--f5 a:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------- 段落標題組（縮小版）：海軍藍中文＋青色刷底，中文頁旁邊 Kalam 小字 */
.sgf--f5 .sgf__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0 0 10px; padding: 0; }
.sgf--f5 .sgf__h {
  position: relative; z-index: 0; display: inline-block; margin: 0; padding: 0; color: var(--f5-ink);
  font-family: var(--f5-sans); font-size: 17px; font-weight: 700; font-style: normal; line-height: 1.4; letter-spacing: .02em;
  text-transform: none; text-shadow: none; white-space: nowrap;
}
.sgf--f5 .sgf__h::after {
  content: ""; position: absolute; z-index: -1; left: -.2em; right: -.2em; top: 68%; height: 30%;
  border-radius: .3em .5em .4em .45em; background: rgba(78, 220, 233, .55); transform: rotate(-1deg); transform-origin: left center;
}
.sgf--f5 .sgf__en {
  display: inline-block; margin: 0; padding: 0; color: var(--f5-en); font-family: Kalam, Arial, sans-serif; font-size: 16px;
  font-weight: 700; font-style: normal; line-height: 1; letter-spacing: 0; white-space: nowrap;
}

/* ---------------------------------------------------------------- 更多資訊：圓形圖示格（kit .ar-tile＋.ar-tile__art） */
.sgf--f5 .sgf__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px 6px; }
.sgf--f5 .sgf__tiles > li { grid-column: span 2; min-width: 0; }
/* 英文頁只有五個：手機 3＋2，第二列兩個置中 */
.sgf--f5 .sgf__tiles > li:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
/* G7-11：上內距照 kit 6px（access-kit.css 194），滑過時圓圈上移 2px 也不會頂到白色底板 */
.sgf--f5 .sgf__tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 44px; margin: 0; padding: 6px 2px;
  border-radius: 16px; color: var(--f5-ink); font-family: var(--f5-sans); font-size: 15px; font-weight: 400; line-height: 1.35;
  letter-spacing: .02em; text-align: center; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere;
}
.sgf--f5 .sgf__art {
  display: grid; place-items: center; flex: none; width: var(--f5-art); height: var(--f5-art); padding: var(--f5-art-pad); border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--f5-line-2);
}
.sgf--f5 .sgf__art svg, .sgf--f5 .sgf__dot svg {
  width: 100%; height: 100%; fill: none; stroke: var(--f5-ink); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round;
}
/* 線寬不隨圖示大小縮放：大圖示一律 2px、小圖示 1.8px（同一套筆畫） */
.sgf--f5 .sgf__art svg *, .sgf--f5 .sgf__dot svg * { vector-effect: non-scaling-stroke; }
.sgf--f5 .sgf__name { display: block; }
/* G7-16：滑鼠 hover 與鍵盤焦點同一套回饋（白底、圓變淡青、字加底線）；上移只留給 hover */
.sgf--f5 .sgf__tile:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .8); }
.sgf--f5 .sgf__tile:is(:hover, :focus-visible) .sgf__art { background: var(--f5-cyan-soft); }
.sgf--f5 .sgf__tile:is(:hover, :focus-visible) .sgf__name, .sgf--f5 .sgf__link:is(:hover, :focus-visible) {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}

/* ---------------------------------------------------------------- 支援：小一號的圓形圖示＋文字 */
.sgf--f5 .sgf__sup { margin: 10px 0 0; }
.sgf--f5 .sgf__sup .sgf__hd { margin-bottom: 4px; }
.sgf--f5 .sgf__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; }
/* G7-2：圓圖示不縮（flex: none）；一列放不下（放大字、加字距）時字自動換到圖示下面，不靠壓圖示 */
.sgf--f5 .sgf__link {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; min-height: 42px; margin: 0; padding: 4px 2px;
  border-radius: 16px; color: var(--f5-ink); font-family: var(--f5-sans); font-size: 15px; font-weight: 400; line-height: 1.3;
  letter-spacing: .02em; text-align: center; text-decoration: none; white-space: nowrap;
}
.sgf--f5 .sgf__dot {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--f5-line-2);
}
.sgf--f5 .sgf__dot svg { stroke-width: 1.8px; }

/* ---------------------------------------------------------------- 付款＋社群：另一張白卡（kit 卡片：白底、1px 細框、圓角、陰影） */
/* G7-1：手機白卡只包內容（fit-content），右緣停在浮動鈕那一欄左邊至少 8px；「聯繫我們」在社群鈕上一列，社群鈕間距 12px */
.sgf--f5 .sgf__card {
  width: fit-content; max-width: calc(100% - 42px); margin: 16px 0 0; padding: 12px;
  border: 1px solid var(--f5-line); border-radius: 18px; background: #fff; box-shadow: var(--f5-shadow);
}
.sgf--f5 .sgf__cap {
  margin: 0; padding: 0; color: var(--f5-text); font-family: var(--f5-sans); font-size: 14px; font-weight: 700; font-style: normal;
  line-height: 1.5; letter-spacing: 0; text-transform: none; text-shadow: none; white-space: normal; min-width: 0;
}
/* G7-3：放不下時 Square 換到說明下面（flex 先換行再壓縮，所以說明平常照原本的 <br> 斷成兩行；
   只有說明自己就比白卡寬時，例如 320 寬＋最小字型 20px，才在卡內多折一行，不會擠出白卡） */
.sgf--f5 .sgf__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sgf--f5 .sgf__square { width: 92px; height: auto; margin: 0; }
.sgf--f5 .sgf__social { display: grid; justify-items: start; gap: 6px; margin: 9px 0 0; padding: 9px 0 0; border-top: 1px solid var(--f5-line); }
.sgf--f5 .sgf__social .sgf__hd { margin: 0; }
.sgf--f5 .sgf__sns { display: flex; gap: 12px; }
.sgf--f5 .sgf__sn { display: block; width: 40px; height: 40px; border-radius: 10px; }
.sgf--f5 .sgf__sn img { width: 40px; height: 40px; }

/* ---------------------------------------------------------------- Logo＋版權（手機靠左放在最底下，右側讓給浮動鈕） */
.sgf--f5 .sgf__logo { display: block; width: var(--f5-logo); margin: 12px 0 0; border-radius: 8px; }
/* G7-9：校名「SnowGame SnowSport School.」與「All rights reserved.」各包成不換行的一段（文字不變）＋平均分行。
   手機 12px：375 以上兩行「Copyright© 2023-2026／SnowGame SnowSport School. All rights reserved.」，374 以下三行（每段都不拆）。
   G7-17：中文頁標 lang="en"。 */
.sgf--f5 .sgf__copy {
  margin: 8px 0 0; padding: 0 42px 0 0; color: var(--f5-en); font-family: var(--f5-sans); font-size: 12px; font-weight: 400;
  font-style: normal; line-height: 1.5; letter-spacing: normal; text-align: left; text-transform: none; text-shadow: none; text-wrap: balance;
}
.sgf--f5 .sgf__nb { white-space: nowrap; }

/* ---------------------------------------------------------------- 窄手機 */
/* 360／375 寬：付款說明＋Square 一列要停在浮動鈕左邊，Square 縮一點 */
@media (max-width: 374px) {
  .sgf--f5 .sgf__pay { column-gap: 8px; }
  .sgf--f5 .sgf__square { width: 80px; }
}
/* G7-2：359px 以下（放大顯示、320 寬）支援改成圖示在上、字在下，三欄都一樣 */
@media (max-width: 359px) {
  .sgf--f5 .sgf__link { flex-direction: column; gap: 2px; padding: 4px 2px 6px; }
}
/* G7-14：手機往下 Tab 時，焦點停在浮動鈕（約 240px）上面 */
@media (max-width: 600px) {
  .sgf--f5 a { scroll-margin-bottom: max(12px, min(250px, calc(100vh - 190px))); }
}
/* G7-8：601px 起左緣照 kit 80px、右緣 92px（右下浮動鈕＋驗收 8px 緩衝）；1304px 起兩邊相等、內容 1120px 置中 */
@media (min-width: 601px) {
  .sgf--f5 { container-type: inline-size; }
  .sgf--f5 .sgf__in { margin-left: max(80px, calc((100% - 1120px) / 2)); margin-right: max(92px, calc((100% - 1120px) / 2)); }
}

/* ---------------------------------------------------------------- 平板 768–1023：由上到下照 DOM 順序 */
/* G7-4：更多資訊（一列，每格最寬 104px、靠左，不再隨寬度鬆開）→ 支援（一列）→ 白卡（只包內容，付款｜社群用細線分開）→ Logo＋版權 */
@media (min-width: 768px) {
  .sgf--f5 { --f5-art: 56px; --f5-art-pad: 7px; --f5-logo: 150px; padding: 40px 0 22px; }
  .sgf--f5 .sgf__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "more more" "sup sup" "card card" "logo copy"; align-items: start; }
  .sgf--f5 .sgf__more { grid-area: more; }
  .sgf--f5 .sgf__tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 104px); justify-content: start; gap: 4px; }
  .sgf--f5 .sgf__tiles > li, .sgf--f5 .sgf__tiles > li:nth-child(4):nth-last-child(2) { grid-column: auto; }
  .sgf--f5 .sgf__tile { gap: 6px; padding: 6px 2px 8px; font-size: 16px; }
  .sgf--f5 .sgf__sup { grid-area: sup; margin: 20px 0 0; }
  .sgf--f5 .sgf__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
  .sgf--f5 .sgf__link { justify-content: flex-start; min-height: 40px; padding: 2px 8px 2px 0; }
  .sgf--f5 .sgf__card { grid-area: card; justify-self: start; display: flex; align-items: center; gap: 16px 24px; max-width: 100%; margin: 22px 0 0; padding: 14px 24px; }
  .sgf--f5 .sgf__pay { column-gap: 16px; }
  .sgf--f5 .sgf__square { width: 104px; }
  .sgf--f5 .sgf__social { gap: 4px; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--f5-line); }
  .sgf--f5 .sgf__sns { gap: 10px; }
  .sgf--f5 .sgf__logo { grid-area: logo; align-self: center; margin: 22px 0 0; }
  .sgf--f5 .sgf__copy { grid-area: copy; align-self: center; margin: 22px 0 0; padding: 0 0 0 24px; font-size: 13px; line-height: 1.6; }
}

/* ---------------------------------------------------------------- 桌機 ≥1024：Logo｜圖示格｜支援，白卡在下面，版權在頁面中線 */
@media (min-width: 1024px) {
  .sgf--f5 { --f5-art: 60px; --f5-art-pad: 8px; padding: 32px 0 18px; }
  .sgf--f5 .sgf__grid { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo more sup" "card card card" "copy copy copy"; column-gap: 36px; }
  /* G7-7：Logo 垂直中心＝圖示圓心（標題列 17px×1.4＋下距 10px＋圖示格上內距 6px＋半個圓，減去半個 Logo 高；Logo 寬高比 5:2） */
  .sgf--f5 .sgf__logo { align-self: start; margin: calc(17px * 1.4 + 10px + 6px + var(--f5-art) / 2 - var(--f5-logo) * .2) 0 0; }
  .sgf--f5 .sgf__more { margin: 0; }
  .sgf--f5 .sgf__tiles { grid-auto-columns: minmax(0, 1fr); gap: 2px; }
  /* 支援：列高 30＋間距 6（焦點框不壓到相鄰小圓），末行基線跟圖示下的字對齊 */
  .sgf--f5 .sgf__sup { justify-self: start; margin: 0; }
  .sgf--f5 .sgf__sup .sgf__hd { margin: 0 0 10px; }
  .sgf--f5 .sgf__links { display: grid; grid-template-columns: max-content; gap: 6px; }
  .sgf--f5 .sgf__link { min-height: 30px; padding: 0 8px 0 0; }
  .sgf--f5 .sgf__card { justify-self: stretch; justify-content: space-between; width: auto; max-width: none; margin: 16px 0 0; padding: 12px 24px; }
  .sgf--f5 .sgf__social { display: flex; align-items: center; gap: 14px; padding: 0; border-left: 0; }
  .sgf--f5 .sgf__sns { gap: 8px; }
  /* G7-10、G7-12：版權跨滿、置中在頁面中線（把右邊多讓給浮動鈕的 0–12px 還回來），離白卡 14px */
  .sgf--f5 .sgf__copy {
    align-self: auto; margin: 14px 0 0; padding: 0; text-align: center;
    margin-right: -12px; margin-right: calc(max(80px, (100cqw - 1120px) / 2) - max(92px, (100cqw - 1120px) / 2));
  }
}
@media (min-width: 1280px) {
  .sgf--f5 { --f5-art: 64px; --f5-logo: 196px; }
  .sgf--f5 .sgf__grid { grid-template-areas: "logo more sup" ". card card" "copy copy copy"; column-gap: 56px; }
  /* 圓大 4px、圖示下的字低 4px：支援標題下距＋1、列距 8，末行基線再對齊 */
  .sgf--f5 .sgf__sup .sgf__hd { margin-bottom: 11px; }
  .sgf--f5 .sgf__links { gap: 8px; }
}

/* ---------------------------------------------------------------- 動態：只在沒有要求減少動態時，hover 0.3 秒 */
@media (prefers-reduced-motion: no-preference) {
  .sgf--f5 .sgf__tile { transition: background-color .3s; }
  .sgf--f5 .sgf__art { transition: background-color .3s, transform .3s cubic-bezier(.22, 1, .36, 1); }
  .sgf--f5 .sgf__tile:hover .sgf__art { transform: translateY(-2px); }
  .sgf--f5 .sgf__sn { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  .sgf--f5 .sgf__sn:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .sgf--f5, .sgf--f5 *, .sgf--f5 *::before, .sgf--f5 *::after { transition: none !important; animation: none !important; }
}