@charset "utf-8";
/* issue #709：選擇器同步——blade 的 container-fluid 已改語意 class（header-navbar-inner／footer-shell），本檔 hook 已同步、值不變 */
/* ============================================================================
 * themes/custom-3ffood/footer.css — 3ffood 主題 footer 版面重排（issue #695 / #721）
 * ============================================================================
 *
 * 用途：
 *   共用 footer HTML（resources/views/sites/default/footer.blade.php）已「真．
 *   最大彈性打平」：每一個內容片段（店名、logo、聯絡各欄位、服務時間、社群每顆
 *   圖示、LINE ID、QR、地圖、版權句/Powered by/每個連結）都是
 *   .footer-default-inner 的**直接子元素**，不再有 header/row/col/block/ul 包裝。
 *   本檔比照 themes/custom-kgtwbeef/footer.css 的技術「自足、完整覆寫 common」：
 *   .footer-default-inner 設 60 欄細顆粒度 grid，每個 footer-piece--* 用
 *   grid-column / grid-row 直接指定落點，重現 3ffood 原視覺（扁平化前
 *   commit 2489b89aa 的樣貌）。
 *
 * 版面（桌機 ≥1200px）：
 *   列 1：logo + 店名並排在頂（左）
 *   列 2：::after 產生的分隔線（滿欄）
 *   列 3~12：三欄（聯絡我們｜服務時間｜社群連結+LINE ID+QR）+ 右側真實地圖
 *     （高片段用「跨列 span」分散高度，避免單列被撐高、其他欄位出現大空隙——
 *      60 欄 grid 同一組列高共用是本技法的已知限制，同 kgtwbeef 檔內註記）
 *   列 13：::before 產生的分隔線（滿欄）
 *   列 14：版權句｜Powered by＋5 連結（相鄰欄 + justify-self 逼近置中群組）
 *
 * 品牌視覺（沿用舊 3ffood.css 7906-8274 的值）：
 *   深棕底 #280300、奶白字 #fff7ef / rgba(255,244,236,.88)、社群白圓鈕 44px
 *   （mono 圖示染深酒紅）、QR 白底圓角框、地圖白框圓角 8px、版權 11px 淡字。
 *
 * 對應 blade：resources/views/sites/default/footer.blade.php（共用，不可改）
 * 對應 common：public/web/css/common/footer.css（default 專屬版面已全數以
 *              body[data-theme="shinvo-standard"] 隔離，不會滲入本主題；本檔僅需
 *              覆寫「跨主題共用基底」：社群圖示尺寸、片段隱藏規則等）
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：issue #695 / #721（3ffood footer 接扁平 HTML；取代舊
 *   footer-default-header/row/col 選擇器版本，該版於扁平 HTML 下全數失配）
 * ============================================================================
 */

/* ============================================================================
 * 區段 1：.function-btns-block 浮動功能按鈕 + 購物車品牌色（沿用，未變動）
 * ============================================================================ */

.function-btns-block .btn-Fb {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #6a1d15;
  border: 1px solid rgba(216, 185, 143, 0.8);
  z-index: 10;
  border-radius: 99rem;
  transition: all 0.3s ease 0s;
}

.function-btns-block .btn-Fb:hover {
  background: #5b170f;
}

.function-btns-block .btn-Line {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #6a1d15;
  border: 1px solid rgba(216, 185, 143, 0.8);
  border-radius: 99rem;
  z-index: 10;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

.function-btns-block .btn-Line:hover {
  background: #5b170f;
}

.function-btns-block .btn-Phone {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #6a1d15;
  border: 1px solid rgba(216, 185, 143, 0.8);
  border-radius: 99rem;
  z-index: 10;
  transition: all 0.3s ease 0s;
}

.function-btns-block .btn-Phone:hover {
  background: #5b170f;
}

.function-btns-block .btn-Expand {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  background-image: url('../../../img/3ffood/open.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 0;
  padding: 0 0 24px 0;
  z-index: 10;
  transition: all 0.3s ease 0s;
}

.function-btns-block .btn-Expand:hover {
  filter: brightness(0.95);
  /* common 的 .btn-Expand:hover 用 background 簡寫，會把 background-image/size/position/repeat 全部重設；
     此處以同樣 background 簡寫完整補回自身 open.png（含 center / 100% 100% / no-repeat），
     避免 hover 時圖被清掉或變成自然尺寸平鋪而變形 */
  background: transparent url('../../../img/3ffood/open.png') center / 100% 100% no-repeat;
}

/* 購物車懸浮鈕：品牌深酒紅（結構沿用 common，僅覆寫品牌色） */
.function-btns-block .btn-Cart {
  background: #6a1d15;
}

.function-btns-block .btn-Cart:hover {
  background: #5b170f;
}

.function-btns-block {
  position: fixed;
  right: 20px;
  bottom: -50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1000;
}

/* ============================================================================
 * 區段 2：footer 外框——深棕底 + 上緣細線 + 兩側留白
 * ============================================================================ */

#footer.footer-area,
#footer.footer-area.gray-bg {
  background-color: #280300;
  color: #f6ece4;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#footer .footer-shell.plr-185 {
  padding-left: 150px;
  padding-right: 150px;
}

/* ============================================================================
 * 區段 3：主 grid——60 欄細顆粒度
 *   欄位地圖（桌機）：聯絡 1~16｜服務 18~29｜社群 31~43｜地圖 43~61
 * ============================================================================ */

#footer .footer-default-inner {
  display: grid;
  grid-template-columns: repeat(60, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  align-items: start;
  padding: 42px 0 20px;
  /* text-align 是繼承屬性，統一釘回 left，行動版另行置中 */
  text-align: left;
}

/* --- 列 1：logo + 店名並排在頂 --- */

#footer .footer-piece--logo {
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: center;
}

#footer .footer-default-logo {
  width: 112px;
  height: auto;
}

#footer .footer-default-logo img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 112px;
  object-fit: contain;
}

#footer .footer-default-title.footer-piece--name {
  grid-column: 7 / 45;
  grid-row: 1;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff7ef;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* --- 列 2：頂部分隔線（::after 為 grid item，滿欄細線） --- */

#footer .footer-default-inner::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  margin: 26px 0 30px;
}

/* --- 列 3：三個區塊標題 --- */

#footer .footer-piece--contact-title { grid-column: 1 / 17;  grid-row: 3; }
#footer .footer-piece--service-title { grid-column: 18 / 30; grid-row: 3; }
#footer .footer-piece--social-title  { grid-column: 31 / 43; grid-row: 3; }

/* --- 聯絡我們欄（欄 1~16，列 4~8 各佔一列） --- */

#footer .footer-piece--tel     { grid-column: 1 / 17; grid-row: 4; }
#footer .footer-piece--fax     { grid-column: 1 / 17; grid-row: 5; }
#footer .footer-piece--address { grid-column: 1 / 17; grid-row: 6; }
#footer .footer-piece--email   { grid-column: 1 / 17; grid-row: 7; }
#footer .footer-piece--tax     { grid-column: 1 / 17; grid-row: 8; margin-bottom: 24px; }

/* --- 服務時間欄（欄 18~29） --- */

#footer .footer-piece--hours  { grid-column: 18 / 30; grid-row: 4; }
#footer .footer-piece--break  { grid-column: 18 / 30; grid-row: 5; }
#footer .footer-piece--closed { grid-column: 18 / 30; grid-row: 6; }

/* --- 社群欄（欄 31~43）：4 顆圖示一列（各 3 欄），LINE ID、QR 依序在下。
   圖示（44px）與 QR（約 94px）比單行文字高，跨列 span 把高度分散到多列，
   避免與聯絡欄共用的列被撐高、憑空多出大段留白 --- */

/* 固定節距錨定(#721 devweb 行為):圖示同起欄跨列靠頂,transform 疊 57px 節距
   (44 圓鈕+13 間隙,devweb 實測間隙);transform 不參與軌道計算,零回饋、
   不隨視窗寬度縮放 */
#footer .footer-piece--social-fb,
#footer .footer-piece--social-ig,
#footer .footer-piece--social-line,
#footer .footer-piece--social-messenger {
  grid-column: 31 / 61;
  grid-row: 4 / 12;
  align-self: start;
  justify-self: start;
}

#footer .footer-piece--social-ig        { transform: translateX(57px); }
#footer .footer-piece--social-line      { transform: translateX(114px); }
#footer .footer-piece--social-messenger { transform: translateX(171px); }

/* LINE ID/QR:1200-1399 維持入流下疊(列高恰吸收);>=1400 由下方 media 併排 */
#footer .footer-piece--line-info        { grid-column: 31 / 43; grid-row: 6 / 8; }
#footer .footer-piece--qr               { grid-column: 31 / 38; grid-row: 8 / 12; }

/* --- 地圖（欄 43~61，跨列 3~12；真實地圖，headless 截圖常空白屬已知現象） --- */

#footer .footer-piece--map {
  grid-column: 43 / 61;
  grid-row: 3 / 12;
  align-self: start;
  justify-self: end;
}

/* ============================================================================
 * 區段 4：各片段外觀（沿用舊 3ffood 視覺值）
 * ============================================================================ */

#footer .footer-default-block-title {
  margin-bottom: 14px;
  padding-left: 0;
  color: #fff7ef;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

#footer .footer-default-block-title::before {
  content: none;
}

#footer .footer-default-item {
  gap: 8px;
  margin-bottom: 6px;
  color: rgba(255, 244, 236, 0.88);
}

#footer .footer-default-item p {
  color: rgba(255, 244, 236, 0.88);
  font-size: 13px;
  line-height: 1.7;
}

#footer .footer-default-icon {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 16px;
}

/* 社群白圓鈕：mono 圖示染深酒紅、hover 淡奶油底（尺寸基底來自 common，
   此處覆寫外觀與 44px 尺寸） */
#footer .footer-social-link {
  width: 44px;
  height: 44px;
  justify-self: start;
  /* 跨列 span 區域內貼齊頂部（與電話列同高），避免在 span 區內垂直置中
     造成標題與圖示之間、圖示與 LINE ID 之間出現不均等留白 */
  align-self: start;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#footer .footer-social-link:hover {
  border-color: #f8ede2;
  background: #f8ede2;
  transform: translateY(-1px);
}

#footer .footer-social-icon {
  width: 22px;
  height: 22px;
}

#footer .footer-social-icon-img--color {
  opacity: 0;
}

#footer .footer-social-icon-img--mono,
#footer .footer-social-link:hover .footer-social-icon-img--mono {
  opacity: 1;
  /* 黑白圖染成品牌深酒紅（CSS filter 著色法，瀏覽器間有些微色差屬已知限制） */
  filter: brightness(0) saturate(100%) invert(7%) sepia(76%) saturate(3605%) hue-rotate(355deg) brightness(64%) contrast(131%);
}

#footer .footer-social-link:hover .footer-social-icon-img--color {
  opacity: 0;
}

/* LINE ID */
#footer .footer-default-line-info {
  margin-top: 6px;
}

#footer .footer-default-line-label {
  color: rgba(255, 236, 220, 0.72);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#footer .footer-default-line-id {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* QR：白底圓角小框 */
#footer .footer-default-line-qr {
  margin-top: 10px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
  justify-self: start;
  text-align: center;
}

#footer .footer-default-line-qr img {
  width: 82px;
  height: 82px;
}

/* 地圖：白框圓角。公司未設定 map_iframe 時 blade 仍輸出容器（僅 iframe 條件輸出），
   避免顯示空的裝飾框 */
#footer .footer-default-map:not(:has(iframe)) {
  display: none;
}

#footer .footer-default-map {
  max-width: 390px;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

#footer .footer-default-map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
}

/* ============================================================================
 * 區段 5：版權列——::before 分隔線（列 13）+ 版權句/Powered by/5 連結（列 14）
 *   「相鄰欄 + 依文字長度給不等寬欄 + justify-self」逼近置中群組（60 欄顆粒度
 *   限制，間距非像素精確，同 kgtwbeef 檔內註記）
 * ============================================================================ */

#footer .footer-default-inner::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 13;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin-top: 30px;
}

#footer .footer-piece--copyright,
#footer .footer-piece--powered,
#footer .footer-piece--link-privacy,
#footer .footer-piece--link-terms,
#footer .footer-piece--link-shipping,
#footer .footer-piece--link-payreturn,
#footer .footer-piece--link-member {
  grid-row: 14;
  align-self: center;
  padding: 14px 0 4px;
  color: rgba(255, 238, 225, 0.68);
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  /* 60 欄顆粒度下欄寬與文字寬僅差 1~2px，禁止折行避免 992~1399 內容寬縮小時
     連結被壓成兩行（行動版另改直列堆疊、於該區塊解除） */
  white-space: nowrap;
}

#footer .footer-piece--copyright {
  grid-column: 1 / 26;
  justify-self: end;
  white-space: nowrap;
}

#footer .footer-piece--copyright::after {
  content: "｜";
  margin: 0 6px;
  color: rgba(255, 238, 225, 0.45);
}

/* 錨=col26:Powered 左貼錨,五連結固定 margin-left 鏈式排開(文案為固定語系字串,
   間距不隨視窗縮放;devweb 行為) */
#footer .footer-piece--powered          { grid-column: 26 / 61; justify-self: start; }
#footer .footer-piece--link-privacy     { grid-column: 26 / 61; justify-self: start; margin-left: 145px; }
#footer .footer-piece--link-terms       { grid-column: 26 / 61; justify-self: start; margin-left: 209px; }
#footer .footer-piece--link-shipping    { grid-column: 26 / 61; justify-self: start; margin-left: 273px; }
#footer .footer-piece--link-payreturn   { grid-column: 26 / 61; justify-self: start; margin-left: 337px; }
#footer .footer-piece--link-member      { grid-column: 26 / 61; justify-self: start; margin-left: 412px; }

/* 5 個頁尾連結與 hover（.copy-link--light（Powered by）由 common 固定反白，
   與原視覺一致，不另覆寫） */
#footer .footer-copy-link {
  color: rgba(255, 238, 225, 0.78);
}

#footer .footer-copy-link:hover {
  color: #ffffff;
}

/* >=1400:LINE ID 與 QR 併排(devweb 寬幕排法;窄幕維持入流下疊) */
@media (min-width: 1400px) {
  #footer .footer-piece--line-info {
    grid-column: 31 / 61;
    grid-row: 4 / 12;
    align-self: start;
    justify-self: start;
    margin-top: 0;
    transform: translateY(71px); /* 44 圓鈕 + 13 + 14 */
  }

  #footer .footer-piece--qr {
    grid-column: 31 / 61;
    grid-row: 4 / 12;
    align-self: start;
    justify-self: start;
    margin-top: 0;
    transform: translateY(71px);
  }

  #footer .footer-piece--line-info ~ .footer-piece--qr {
    transform: translate(120px, 71px);
  }
}

/* ============================================================================
 * 區段 6：RWD——斷點統一 480 / 576 / 768 / 992 / 1200 / 1400
 * ============================================================================ */

/* 平板橫向 992~1199：兩側留白收斂，地圖欄縮小。
   地圖為右錨定（justify-self:end），此區間右留白僅 44px，會與浮動客服/購物車鈕
   （fixed right:20px、寬 60px，佔視窗右緣 20~80px）重疊，比照 default 主題補右側
   緩衝讓出安全距離 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #footer .footer-shell.plr-185 {
    padding-left: 44px;
    padding-right: 44px;
  }

  #footer .footer-default-inner {
    padding-right: 60px;
  }

  #footer .footer-default-map iframe {
    height: 200px;
  }
}

/* 992~1399：內容寬縮小後社群圖示欄（3 欄/顆）恰好等於圖示 44px、間距歸零，
   縮小圓鈕留出呼吸空間；版權列欄寬同步放寬（nowrap 下窄欄會讓連結黏在一起） */
@media (min-width: 992px) and (max-width: 1399.98px) {
  #footer .footer-social-link {
    width: 40px;
    height: 40px;
  }

  /* 版權欄位配置沿用基準(右錨+固定 margin 鏈,與視窗寬度無關),無需逐帶覆寫 */
}

/* ≤991.98：單欄堆疊置中（logo、店名、三區塊、地圖滿寬、版權直列） */
@media (max-width: 991.98px) {
  #footer .footer-shell.plr-185 {
    padding-left: 44px;
    padding-right: 44px;
  }

  /* #1027：手機版 footer 由置中改為靠左（使用者指定）。文字對齊在容器層一次切換，
     各片段的 justify-self 與社群圖示的水平位移另見下方。 */
  #footer .footer-default-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: left;
    padding: 32px 0 18px;
  }

  #footer .footer-piece--name,
  #footer .footer-piece--logo,
  #footer .footer-piece--contact-title,
  #footer .footer-piece--tel,
  #footer .footer-piece--fax,
  #footer .footer-piece--address,
  #footer .footer-piece--email,
  #footer .footer-piece--tax,
  #footer .footer-piece--service-title,
  #footer .footer-piece--hours,
  #footer .footer-piece--break,
  #footer .footer-piece--closed,
  #footer .footer-piece--social-title,
  #footer .footer-piece--line-info,
  #footer .footer-piece--qr,
  #footer .footer-piece--map,
  #footer .footer-piece--copyright,
  #footer .footer-piece--powered,
  #footer .footer-piece--link-privacy,
  #footer .footer-piece--link-terms,
  #footer .footer-piece--link-shipping,
  #footer .footer-piece--link-payreturn,
  #footer .footer-piece--link-member {
    grid-column: 1 / 5;
    /* #1027：改靠左（原 center）。片段多為 width:max-content，位置由 justify-self
       決定，僅改 text-align 不足以移動它們。 */
    justify-self: start;
  }

  #footer .footer-piece--logo          { grid-row: 1; }
  #footer .footer-piece--name          { grid-row: 2; margin-top: 12px; }

  /* #1027：name 雖已列在上方的單欄堆疊清單,但桌機那條
     #footer .footer-default-title.footer-piece--name(兩個 class,特異性較高)會壓過它,
     grid-column 實際仍是 7/45;在 4 欄 grid 下撐出 40 餘個隱式欄,整列可用寬度被壓成
     左側約 225px,同列以 1/5 置中的片段(LINE ID／QR／社群圖示)因而整組偏左約 55px。
     以同特異性覆寫收回 1/5。同型問題 default 主題已於 #721 修過。 */
  #footer .footer-default-title.footer-piece--name {
    grid-column: 1 / 5;
    justify-self: start;
  }
  #footer .footer-piece--contact-title { grid-row: 4; }
  #footer .footer-piece--tel           { grid-row: 5; }
  #footer .footer-piece--fax           { grid-row: 6; }
  #footer .footer-piece--address       { grid-row: 7; }
  #footer .footer-piece--email         { grid-row: 8; }
  #footer .footer-piece--tax           { grid-row: 9; }
  #footer .footer-piece--service-title { grid-row: 10; margin-top: 18px; }
  #footer .footer-piece--hours         { grid-row: 11; }
  #footer .footer-piece--break         { grid-row: 12; }
  #footer .footer-piece--closed        { grid-row: 13; }
  #footer .footer-piece--social-title  { grid-row: 14; margin-top: 18px; }
  #footer .footer-piece--line-info     { grid-row: 16; }
  #footer .footer-piece--qr            { grid-row: 17; }
  #footer .footer-piece--map           { grid-row: 18; }

  /* 頂部分隔線移到 logo+店名之下 */
  #footer .footer-default-inner::after {
    grid-row: 3;
    margin: 22px 0 24px;
  }

  /* #1027：社群圖示原本每顆釘死一欄(fb=1／ig=2／line=3／messenger=4),欄位固定、
     與實際輸出幾顆無關;blade 僅在後台有填該欄位時才輸出,實際常是 2 顆(FB+LINE),
     此時 FB 落欄 1、LINE 落欄 3,兩者之間憑空空出一欄。改為全部共用整列滿欄的
     同一格 + justify-self:start 對齊左緣,再依「第幾顆」以固定節距往右排開。

     #1035：節距由 58px 修正為 57px。58px 是 #1027 當時直接沿用 default 主題的值,
     但 default 的圖示是 45px(45+13=58),本主題是 44px,節距應為 44+13=57px——
     與本檔桌機那組 translateX(57/114/171px) 同一個值,兩者本來就該一致。
     差 1px 不影響版面,純粹是讓手機與桌機的視覺間隙對齊。
     註:本檔另有一處 .footer-social-link 設 40px,那是 992~1399.98 桌機窄幕的覆寫,
     不是手機版——手機版沿用基準的 44px(實測 375 寬為 44px)。 */
  #footer .footer-default-inner {
    --footer-social-pitch: 57px;
  }

  #footer .footer-piece--social-pos-1 { --footer-social-index: 1; }
  #footer .footer-piece--social-pos-2 { --footer-social-index: 2; }
  #footer .footer-piece--social-pos-3 { --footer-social-index: 3; }
  #footer .footer-piece--social-pos-4 { --footer-social-index: 4; }

  #footer .footer-piece--social-fb,
  #footer .footer-piece--social-ig,
  #footer .footer-piece--social-line,
  #footer .footer-piece--social-messenger {
    grid-row: 15;
    grid-column: 1 / 5;
    justify-self: start;
    margin-top: 12px;
    /* 桌機那組 translateX(57/114/171px) 是全域規則,手機版 MUST 歸零。 */
    transform: none;
    /* #1035：位移改用 margin-left,完整理由見 common/footer.css 同區段註解——
       簡述:站台 custom.css 覆寫欄位時會連 margin 一起釘死,位移因而正確失效;
       transform 不在任何覆寫清單裡,留著會與自訂欄位相加把圖示推出畫面。 */
    margin-left: calc(
      (var(--footer-social-index) - 1) * var(--footer-social-pitch)
    );
  }

  /* #1027／#1035：社群四顆不在本清單,但**同樣要歸零**桌機的 transform——它們改在
     上方的社群圖示區段內自行 transform:none,與該處的 margin-left 位移寫在一起。 */
  #footer .footer-piece--line-info,
  #footer .footer-piece--qr,
  #footer .footer-piece--line-info ~ .footer-piece--qr,
  #footer .footer-piece--link-privacy,
  #footer .footer-piece--link-terms,
  #footer .footer-piece--link-shipping,
  #footer .footer-piece--link-payreturn,
  #footer .footer-piece--link-member {
    transform: none;
    margin-left: 0;
  }

  /* #1035：原本這裡有一條 social-ig／line／messenger 的 margin-left:0。
     它定義在上方社群圖示區段之後、特異性相同,會把改用 margin-left 承載的位移
     壓成 0(四顆全部疊在左緣)。而它原本要清的是「桌機的 margin-left」——實查
     桌機社群只有 transform:translateX、從未設過 margin-left,該條並無實際作用,
     故移除而非調整。桌機 transform 的歸零已由上方區段的 transform:none 負責。 */

  #footer .footer-piece--line-info {
    margin-top: 14px;
  }

  #footer .footer-piece--qr {
    margin-top: 10px;
    justify-self: start;
  }

  /* 地圖本身即 width:100%，justify-self 對它沒有實質作用，改 start 僅為與其餘片段一致 */
  #footer .footer-piece--map {
    width: 100%;
    margin-top: 20px;
    justify-self: start;
  }

  #footer .footer-default-map,
  #footer .footer-default-map iframe {
    max-width: 100%;
    height: 220px;
  }

  /* 版權區直列置中 */
  #footer .footer-default-inner::before {
    grid-row: 19;
    margin-top: 26px;
  }

  #footer .footer-piece--copyright {
    grid-row: 20;
    white-space: normal;
  }

  #footer .footer-piece--copyright::after {
    content: none;
  }

  #footer .footer-piece--powered        { grid-row: 21; }

  /* #1027：版權連結原本每個獨佔一列（22~26），手機版多吃 4~5 行、約 156px，而每個
     連結文字僅約 60px 寬、右側大片空白閒置。改為同一列、依實際輸出序號各佔一欄
     （4 欄 grid 排 4 個，第 5 個換下一列）。用 --copy-link-pos-N 而非 link-* 定位：
     blade 只在後台有開該連結時才輸出，pos 是實際輸出的連號，不論開幾個都緊密相鄰。
     以 4 個連結計由 4 行壓成 1 行。作法同 common/footer.css 的 default 主題。 */
  #footer .footer-piece--copy-link-pos-1,
  #footer .footer-piece--copy-link-pos-2,
  #footer .footer-piece--copy-link-pos-3,
  #footer .footer-piece--copy-link-pos-4 {
    grid-row: 22;
  }

  #footer .footer-piece--copy-link-pos-1 { grid-column: 1; }
  #footer .footer-piece--copy-link-pos-2 { grid-column: 2; }
  #footer .footer-piece--copy-link-pos-3 { grid-column: 3; }
  #footer .footer-piece--copy-link-pos-4 { grid-column: 4; }

  #footer .footer-piece--copy-link-pos-5 {
    grid-row: 23;
    grid-column: 1;
  }

  /* #1027：同 common/footer.css 的 default 主題——橫排後欄寬僅約 83px,而桌機基準
     對這幾個連結設了 white-space:nowrap,長語系文案(en／jp／kr 皆已有)會跨欄重疊。 */
  #footer .footer-piece--copy-link-pos-1,
  #footer .footer-piece--copy-link-pos-2,
  #footer .footer-piece--copy-link-pos-3,
  #footer .footer-piece--copy-link-pos-4,
  #footer .footer-piece--copy-link-pos-5 {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  #footer .footer-piece--copyright,
  #footer .footer-piece--powered,
  #footer .footer-piece--link-privacy,
  #footer .footer-piece--link-terms,
  #footer .footer-piece--link-shipping,
  #footer .footer-piece--link-payreturn,
  #footer .footer-piece--link-member {
    padding: 4px 0;
  }
}

@media (max-width: 575.98px) {
  #footer .footer-shell.plr-185 {
    padding-left: 26px;
    padding-right: 26px;
  }

  #footer .footer-default-inner {
    padding: 26px 0 16px;
  }

  #footer .footer-default-logo {
    width: 92px;
  }

  #footer .footer-default-title.footer-piece--name {
    font-size: 18px;
  }

  #footer .footer-default-block-title {
    font-size: 18px;
  }

  #footer .footer-default-map iframe {
    height: 220px;
  }
}

@media (max-width: 479.98px) {
  #footer .footer-shell.plr-185 {
    padding-left: 20px;
    padding-right: 20px;
  }

  #footer .footer-default-title.footer-piece--name,
  #footer .footer-default-block-title {
    font-size: 16px;
    line-height: 1.4;
  }

  /* 容器高度同步縮為 200，避免只縮 iframe 造成地圖比外框矮、底部露出空隙 */
  #footer .footer-default-map,
  #footer .footer-default-map iframe {
    height: 200px;
  }
}