/* ============================================================================
   泓鼎彩報站 · style.css · v1.0.6 重整版
   ----------------------------------------------------------------------------
   章節:
     §1  基底       :root / Reset / body / page 紙背景
     §2  共用元件   .sr-only / .btn / .card / .card>h2 / .section-head
     §3  站頭
         §3.1  utility-bar
         §3.2  brand-banner
         §3.3  main-nav
     §4  內容區
         §4.1  layout grid
         §4.2  今日方向 today-card
         §4.3  彩報專區 report-card(目前用 image-content,舊版文字+插圖規則已刪)
         §4.4  版路分享/論壇 forum-card
         §4.5  會員/新手 mini-grid + mini-card
     §5  站尾 site-footer(三欄)
     §6  手機底部 bottom-tab-bar
     §7  a11y :focus-visible
     §8  RWD media queries(集中於檔尾)
     §9  示意圖暫覆寫(⚠ 正式圖上線後刪除)
   ============================================================================ */


/* ============================================================================
   §1 基底
   ============================================================================ */

:root{
  /* 主色族 */
  --red:    #9e2118;
  --red2:   #71150f;
  --green:  #175d2c;
  --gold:   #d6a64d;
  --paper:  #f6e6c4;
  --paper2: #fff5dc;
  --ink:    #28180c;
  --blue:   #102b63;
  --line:   #b98643;

  /* 字族 */
  --font-hei:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;        /* 黑體 — 數字 / 電話 / 按鈕 */
  --font-song: "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;              /* 宋體 — 內文 */
  --font-kai:  "Ma Shan Zheng", "DFKai-SB", "BiauKai", "Kaiti TC", "Kaiti SC", cursive;/* 楷體 / 毛筆 — 裝飾 */

  /* 共用陰影 */
  --shadow: 0 3px 0 rgba(122,75,24,.18), inset 0 0 0 1px rgba(255,255,255,.38);
}

*{ box-sizing:border-box }
html{ font-size:16px }

/* ============================================================================
   自訂全站滾輪 — 取代瀏覽器預設,配合紅木米黃風格
   ============================================================================ */

/* Firefox */
*{
  scrollbar-width:thin;
  scrollbar-color:#a42318 #f6e8c9;
}

/* WebKit / Blink(Chrome / Edge / Safari) */
::-webkit-scrollbar{
  width:12px;
  height:12px;
}
::-webkit-scrollbar-track{
  background:
    repeating-linear-gradient(0deg, rgba(90,55,20,.06) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f6e8c9, #ead4a4);
  border-left:1px solid rgba(116,33,23,.35);
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #b83225 0%, #86170f 100%);
  border:2px solid #f6e8c9;
  border-radius:8px;
  min-height:30px;
  box-shadow:inset 0 1px rgba(255,229,150,.25);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #cf3d2b 0%, #951d12 100%);
}
::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg, #951d12 0%, #6e120a 100%);
}
::-webkit-scrollbar-corner{
  background:#ead4a4;
}

/* 細版滾輪(用於小區塊例如 chip 橫滾 / 表格橫滾) */
.lottery-tabs::-webkit-scrollbar,
.orders-table-wrap::-webkit-scrollbar{
  height:8px;
  width:8px;
}
.lottery-tabs::-webkit-scrollbar-thumb,
.orders-table-wrap::-webkit-scrollbar-thumb{
  border-width:1px;
  border-radius:6px;
}

body{
  margin:0;
  color:var(--ink);
  /* 預設全站用標楷體(傳統文化感,筆畫工整易讀)。
     數字 / 電話 / 按鈕等不適合楷體之處,個別用 var(--font-hei) 覆蓋。 */
  font-family:"DFKai-SB","BiauKai","標楷體","Kaiti TC","Kaiti SC","Kaiti",
              "Noto Serif TC","Source Han Serif TC","PMingLiU",serif;
  /* 米黃紙底色 + 四角對稱暗暈(X 軸鏡像,避免左右色調差異) */
  background:
    radial-gradient(circle at 18% 12%, rgba(140, 72, 27, .11) 0 8rem, transparent 18rem),
    radial-gradient(circle at 82% 12%, rgba(140, 72, 27, .11) 0 8rem, transparent 18rem),
    radial-gradient(circle at 30% 88%, rgba(90, 45, 16, .08) 0 8rem, transparent 20rem),
    radial-gradient(circle at 70% 88%, rgba(90, 45, 16, .08) 0 8rem, transparent 20rem),
    linear-gradient(180deg,#ead4a4 0%,#f6e8c9 34%,#e7c58b 100%);
}

/* 紙纖維橫直紋 + 四角微暈(疊在 body bg 上) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(88,56,20,.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 12% 18%, rgba(78,42,13,.09), transparent 8rem),
    radial-gradient(circle at 88% 18%, rgba(78,42,13,.09), transparent 8rem),
    radial-gradient(circle at 10% 78%, rgba(78,42,13,.08), transparent 10rem),
    radial-gradient(circle at 90% 78%, rgba(78,42,13,.08), transparent 10rem);
  mix-blend-mode:multiply;
  opacity:.85;
}

/* 上下淡光 + 左右邊暗化 */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(91,39,15,.16), transparent 9%, transparent 91%, rgba(91,39,15,.16)),
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 14%, transparent 88%, rgba(90,48,16,.13));
}

a{ text-decoration:none; color:inherit }
img{ max-width:100%; display:block }

/* 整站容器(最大 1536,自動置中,左右暗紅邊框) */
.page{
  width:min(1536px,100%);
  margin:auto;
  min-height:100vh;
  position:relative;
  background:
    radial-gradient(circle at 8% 22%, rgba(108,57,20,.09), transparent 11rem),
    radial-gradient(circle at 92% 22%, rgba(108,57,20,.09), transparent 11rem),
    linear-gradient(180deg, rgba(255,247,220,.96), rgba(236,207,148,.94));
  border-left:2px solid rgba(116,33,23,.68);
  border-right:2px solid rgba(116,33,23,.68);
  box-shadow:0 0 38px rgba(80,35,10,.18);
}

/* page 內紙紋(細格線疊加) */
.page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(78,50,23,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(78,50,23,.035) 0 1px, transparent 1px 6px);
  opacity:.72;
  mix-blend-mode:multiply;
}

/* 三大區塊提升 z-index 以蓋過 page::before 紙紋 */
.site-header,
.layout,
.site-footer{ position:relative; z-index:1 }


/* ============================================================================
   §2 共用元件
   ============================================================================ */

/* 視覺隱藏(SEO / 螢幕閱讀器專用) */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/* 卡片基礎:米黃紙底 + 暗紅邊框 + 立體陰影 */
.card{
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(120,70,25,.07), transparent 7rem),
    linear-gradient(180deg, rgba(255,249,226,.96), rgba(238,213,160,.96));
  border:2px solid rgba(155,92,34,.86);
  border-radius:4px;
  box-shadow:
    0 3px 0 rgba(122,75,24,.22),
    0 1px 6px rgba(80,35,10,.08),
    inset 0 0 0 1px rgba(255,255,255,.38);
}
.card>*{ position:relative; z-index:1 }

/* 卡片右上角的紙紋暈(疊一層 multiply) */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(60,35,10,.035) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 86% 12%, rgba(120,55,20,.06), transparent 5rem);
  mix-blend-mode:multiply;
}

/* 卡片標題(紅底油墨紋 + 浮雕邊) — 同時用於 section-head 通用 */
.card>h2,
.section-head{
  margin:0;
  color:#fff6d7;
  text-align:center;
  font-size:29px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.15em;
  text-shadow:0 2px rgba(0,0,0,.25);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(70,8,4,.30), transparent 75%),
    linear-gradient(180deg,#c93b29 0%,#b22b1d 40%,#8e1b11 75%,#6e120a 100%);
  background-size:220px 80px,auto,auto;
}
.card>h2{
  padding:13px 12px;
  border-bottom:1px solid rgba(93,49,18,.22);
  box-shadow:
    inset 0 1px rgba(255,215,130,.22),
    inset 0 -1px rgba(50,12,6,.35);
}

/* 按鈕(紅 / 綠) */
.btn{
  display:block;
  width:76%;
  margin:10px auto 18px;
  padding:13px 10px;
  text-align:center;
  border-radius:5px;
  color:#fff7d6;
  font-size:19px;
  font-weight:900;
  box-shadow:
    inset 0 1px rgba(255,255,255,.25),
    0 4px 8px rgba(70,20,5,.2);
}
.btn.red{   background:linear-gradient(#b83225,#86170f) }
.btn.green{ background:linear-gradient(#23783f,#145629) }


/* ============================================================================
   §3 站頭
   ============================================================================ */

/* ---------- §3.1 utility-bar(頂部 slogan / 客服 / 登入按鈕) ---------- */
.utility-bar{
  min-height:38px;
  padding:7px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#f5d889;
  background:linear-gradient(#7b160f,#55100b);
  border-bottom:1px solid #c79846;
  font-weight:800;
  letter-spacing:.06em;
  font-family:var(--font-hei);    /* 含電話號碼,改用黑體 */
}
.utility-contact{ white-space:nowrap }
.utility-actions{
  display:flex;
  gap:8px;
  white-space:nowrap;
}
.utility-actions a{
  padding:6px 14px;
  border:1px solid #d8ad5a;
  border-radius:5px;
  background:#7d1a12;
  color:#fff3c8;
  box-shadow:inset 0 1px rgba(255,255,255,.15);
}
.utility-actions a.gold{
  background:linear-gradient(#f6d88e,#cb8b25);
  color:#3d1808;
}

/* ---------- §3.2 brand-banner(整塊一張圖,雙端切換 picture) ---------- */
.brand-banner{
  display:block;
  height:auto;
  padding:0;
  background:none;
  border-bottom:2px solid #bd8c3e;
  position:relative;
  overflow:hidden;
}
.brand-banner picture,
.brand-banner picture img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- §3.3 main-nav(桌面 7 等分,紅油墨底 + 底部金線) ---------- */
.main-nav{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  position:relative;
  border-top:1px solid #d5a455;
  border-bottom:3px solid #9d6b30;
  background:
    /* (1) SVG 分形雜訊 — 不規則墨點 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    /* (2) 暗霧用深紅(避免黑色),壓在底部 */
    radial-gradient(ellipse 580px 80px at 22% 100%, rgba(70, 8, 4, .25), transparent 70%),
    radial-gradient(ellipse 560px 85px at 78% 100%, rgba(70, 8, 4, .25), transparent 70%),
    /* (3) 純紅色族漸層底:亮紅 → 暗紅 */
    linear-gradient(180deg, #c93b29 0%, #b22b1d 35%, #931c12 70%, #6e120a 100%);
  background-size: 320px 180px, auto, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,229,150,.42),
    inset 0 -2px 0 rgba(80,12,6,.70);
}

/* 底部金線(老書封面感) */
.main-nav::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-3px;
  height:3px;
  background:linear-gradient(90deg,
    #7d501e 0%, #b08334 12%, #d5a455 50%, #b08334 88%, #7d501e 100%);
  pointer-events:none;
}

.main-nav a{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-right:1px solid rgba(255,220,150,.30);
  color:#fff4d0;
  font-size:25px;
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 2px 0 rgba(0,0,0,.30);
  transition: background .15s ease, color .15s ease;
}
.main-nav a:last-child{ border-right:0 }

.main-nav a:hover,
.main-nav a.active{
  background:linear-gradient(180deg, #cf3d2b 0%, #951d12 100%);
  color:#ffe79d;
  box-shadow:
    inset 0 1px 0 rgba(255,240,180,.35),
    inset 0 -2px 0 rgba(40,5,0,.35);
}

/* 桌面預設:手機才會用到的 icon 與 hide-on-mobile 修飾,先隱藏 */
.main-nav .nav-ico{ display:none }
.main-nav a>span{ display:inline }


/* ============================================================================
   §4 內容區
   ============================================================================ */

/* ---------- §4.1 layout grid(桌面 3 欄) ---------- */
.layout{
  display:grid;
  grid-template-columns:27fr 36fr 37fr;
  gap:14px;
  padding:14px 16px 12px;
}

/* ---------- §4.2 今日方向 today-card ---------- */
.today-card{
  display:flex;
  flex-direction:column;
}
.today-card>h2{ flex:0 0 auto }

.today-square-stack{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
}
.today-square-stack .today-square-item{
  flex:1 1 0;
  min-height:0;
  position:relative;
  overflow:hidden;
  border:2px solid rgba(128,80,32,0.85);
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(120,86,40,.10)),
    #d8c8a4;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 2px 0 rgba(80,45,18,.18);
}
.today-square-stack .today-square-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ---------- §4.3 彩報專區 report-card(目前用整張圖) ---------- */
.report-card{
  display:flex;
  flex-direction:column;
}
.report-card>h2{
  flex:0 0 auto;
  color:#fff6d7;
  text-shadow:0 2px rgba(0,0,0,.25);
  font-size:29px;
  padding:13px 12px;
  border-bottom:1px solid rgba(93,49,18,.22);
  /* background 共用 .card>h2 規則 */
}

.report-image-content{
  flex:1 1 auto;
  min-height:0;
  padding:12px;
  display:flex;
  align-items:flex-start;     /* 不把圖往欄高拉伸 */
  justify-content:center;
}
.report-image-content img{
  width:100%;
  height:auto;
  aspect-ratio:5 / 6;         /* 鎖彩報直式比例,欄高再高也不會被裁成細長 */
  object-fit:contain;         /* 整張完整顯示,不變形不裁切(供圖標準化 1000×1200) */
}

/* ---------- §4.4 版路分享 / 論壇 forum-card ---------- */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
}
/* 綠色變體(版路分享用) */
.section-head.green{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(5,40,18,.32), transparent 75%),
    linear-gradient(180deg, #2c8045 0%, #1e6635 40%, #144d27 75%, #0c3a1c 100%);
  background-size:220px 80px,auto,auto;
}
.section-head h2{
  font-size:28px;
  margin:0;
  padding:12px 0;
}
.section-head a{
  font-size:15px;
  border:1px solid #d7ad55;
  color:#ffe5a2;
  padding:6px 12px;
  border-radius:5px;
}

.forum-table{ padding:8px 16px 13px }
.forum-row{
  display:grid;
  grid-template-columns:1fr 70px 92px;
  gap:8px;
  align-items:center;
  min-height:42px;
  border-bottom:1px solid #cab183;
  font-size:17px;
}
.forum-row span:nth-child(1){
  color:var(--blue);
  font-weight:900;
}
.forum-row span:nth-child(2),
.forum-row span:nth-child(3){
  text-align:right;
}
.forum-title{
  min-height:32px;
  color:#2f210e;
  font-weight:900;
}
.forum-title span:nth-child(1){ color:#2f210e }

/* ---------- §4.5 會員 / 新手 mini-grid ---------- */
.mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.mini-card h2{
  font-size:25px;
  padding:12px;
}
/* 新手教學:綠標題變體(覆蓋紅色預設) */
.mini-card.guide h2{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(5,40,18,.32), transparent 75%),
    linear-gradient(180deg, #2c8045 0%, #1e6635 40%, #144d27 75%, #0c3a1c 100%);
  background-size:220px 80px,auto,auto;
}
.mini-card ul{
  margin:0;
  padding:18px 18px 4px 38px;
  color:var(--blue);
  font-size:18px;
  line-height:1.9;
  font-weight:900;
}
.mini-card li::marker{ color:#9e2118 }


/* ============================================================================
   §5 站尾 site-footer(桌面三欄式 / 平板雙列 / 手機單欄)
   ============================================================================ */

.site-footer{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:30px;
  align-items:center;
  padding:26px 32px 22px;
  border-top:3px double #b1834a;
  background:
    repeating-linear-gradient(0deg, rgba(90,55,20,.04) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f4e0bc 0%, #ead0a0 100%);
  font-size:18px;
}

/* 頂部金線(細暈,雙線中的內細線) */
.site-footer::before{
  content:"";
  position:absolute;
  left:24px; right:24px;
  top:-3px;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,165,89,.85) 12%,
    rgba(212,165,89,.85) 88%,
    transparent 100%);
  pointer-events:none;
}

/* 左:客服資訊(兩行,黑體) */
.site-footer .service{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  line-height:1.6;
  font-family:var(--font-hei);
  font-size:16px;
  font-weight:500;
  color:#4a2f12;
}
.site-footer .service>div{ white-space:nowrap }

/* 中:祈福語(毛筆楷,大字,上下短橫線) */
.site-footer strong{
  position:relative;
  font-family:var(--font-kai);
  font-weight:400;
  font-size:38px;
  letter-spacing:.22em;
  color:#a42318;
  white-space:nowrap;
  text-shadow:
    0 2px 0 rgba(255,245,215,.65),
    0 0 14px rgba(164,35,24,.15);
}
.site-footer strong::before,
.site-footer strong::after{
  content:"";
  position:absolute;
  left:50%;
  width:60%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(164,35,24,.5), transparent);
  transform:translateX(-50%);
}
.site-footer strong::before{ top:-10px }
.site-footer strong::after{  bottom:-10px }

/* 右:免責聲明(兩行,黑體,字級對齊左邊) */
.site-footer small{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
  text-align:right;
  font-family:var(--font-hei);
  font-style:normal;
  font-size:16px;
  font-weight:500;
  line-height:1.6;
  color:#4a2f12;
}
.site-footer small>div{ white-space:nowrap }


/* ============================================================================
   §6 手機底部 bottom-tab-bar(桌面隱藏,手機 sticky-fixed)
   ============================================================================ */

.bottom-tab-bar{ display:none }    /* 桌面預設隱藏,手機 @media 才開啟 */


/* ============================================================================
   §7 a11y :focus-visible(鍵盤 Tab 才出現金黃 outline)
   ============================================================================ */

.main-nav a:focus-visible,
.bottom-tab-bar a:focus-visible,
.utility-actions a:focus-visible,
.btn:focus-visible{
  outline:2px solid #ffe79d;
  outline-offset:-3px;
}


/* ============================================================================
   §8 RWD media queries
   ----------------------------------------------------------------------------
   桌面預設:1180px 以上完整三欄 + 七項 nav
   1180 以下(平板橫):layout 2 欄 / footer 雙列 / utility 縮字
   1024 以下(平板直):utility slogan 隱藏
   760  以下(手機):  utility 全隱 / nav 5 等分 icon / 顯示底部 tab bar / footer 單欄
   ============================================================================ */

/* -------- 平板橫向 ≤1180 -------- */
@media (max-width:1180px){
  /* 主版 layout 折成 2 欄(右欄整列) */
  .layout{ grid-template-columns:1fr 1fr }
  .right-column{ grid-column:1 / -1 }

  /* main-nav 文字縮一點 */
  .main-nav a{ font-size:20px }

  /* utility-bar:slogan 字縮、客服字縮 */
  .utility-slogan{ font-size:13px; white-space:nowrap }
  .utility-contact{ font-size:13px }

  /* footer 雙列:祈福獨佔上排,客服 / 免責 下方左右分 */
  .site-footer{
    grid-template-columns:1fr 1fr;
    gap:16px 30px;
    padding:20px 24px 16px;
  }
  .site-footer strong{
    grid-column:1 / -1;
    text-align:center;
    order:-1;
    font-size:32px;
    margin-bottom:6px;
  }
  .site-footer .service{ align-items:flex-start }
  .site-footer small{    align-items:flex-end }
  .site-footer small>div{ white-space:normal }   /* narrow 時允許換行 */
}

/* -------- 平板直立 ≤1024 -------- */
@media (max-width:1024px){
  .utility-slogan{ display:none }
}

/* -------- 手機 ≤760 -------- */
@media (max-width:760px){
  /* 容器邊框移除 */
  .page{ border:0 }

  /* 紙底紋減淡(細節在小螢幕容易雜亂) */
  body::before{ opacity:.62 }
  .page::before{ opacity:.55 }

  /* utility-bar 完全隱藏(常用入口由底部 tab bar 取代) */
  .utility-bar{ display:none }

  /* main-nav 改 5 等分 grid + icon 在上 / 文字在下;隱藏論壇、新手兩項 */
  .main-nav{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    overflow:visible;
    position:static;
  }
  .main-nav a.hide-on-mobile{ display:none }
  .main-nav a{
    flex-direction:column;
    min-width:0;
    height:auto;
    padding:9px 2px 8px;
    gap:3px;
    align-items:center;
    justify-content:center;
    font-size:13.5px;
    letter-spacing:.02em;
    line-height:1.1;
  }
  .main-nav .nav-ico{
    display:block;
    width:22px;
    height:22px;
    fill:currentColor;
  }
  .main-nav a>span{ white-space:nowrap }

  /* layout 折成單欄 */
  .layout{
    display:block;
    padding:10px;
  }
  .card{
    margin-bottom:10px;
    border-radius:3px;
  }
  .card>h2{
    font-size:23px;
    padding:10px;
  }
  .report-card>h2{ font-size:25px }

  /* 今日方向 / 彩報專區 在 mobile 還原 block(避免 flex 拉伸) */
  .today-card,
  .report-card{ display:block }
  .today-square-stack .today-square-item{
    flex:0 0 auto;
    min-height:0;
    aspect-ratio:367 / 293;   /* 跟桌面 slot 比例一致 */
  }
  .today-square-stack .today-square-item img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .report-image-content{
    display:block;
    padding:10px;
  }
  .report-image-content img{
    height:auto;
    width:100%;
    object-fit:cover;
  }

  /* forum 欄寬縮 + 字縮 */
  .section-head h2{ font-size:22px }
  .forum-table{ padding:6px 12px 10px }
  .forum-row{
    grid-template-columns:1fr 52px 74px;
    font-size:14px;
    min-height:38px;
  }

  /* mini-grid 改單欄 */
  .mini-grid{
    grid-template-columns:1fr;
    margin-top:0;
  }

  /* footer 折成單欄置中 */
  .site-footer{
    display:block;
    text-align:center;
    padding:18px 14px;
    /* 給底部 tab bar 預留空間(避免最後內容被遮) */
    padding-bottom:calc(18px + 58px + env(safe-area-inset-bottom, 0));
  }
  .site-footer .service{
    align-items:center;
    margin-bottom:14px;
  }
  .site-footer strong{
    display:block;
    font-size:30px;
    margin:16px 0;
    letter-spacing:.18em;
  }
  .site-footer strong::before,
  .site-footer strong::after{ width:40% }
  .site-footer small{
    align-items:center;
    text-align:center;
    margin-top:14px;
  }

  /* 底部 sticky tab bar 啟動(5 等分 icon + 文字) */
  .bottom-tab-bar{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(180deg, #f6e3b8 0%, #e6c98a 100%);
    border-top:2px solid #b1834a;
    box-shadow:0 -2px 8px rgba(80,35,10,.18);
    z-index:30;
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .bottom-tab-bar a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:7px 2px 8px;
    color:#6a3a14;
    font-size:12.5px;
    font-weight:700;
    line-height:1.1;
    border-right:1px solid rgba(155,110,50,.35);
  }
  .bottom-tab-bar a:last-child{ border-right:0 }
  .bottom-tab-bar a svg{
    width:22px;
    height:22px;
    fill:currentColor;
  }
  .bottom-tab-bar a.active{
    color:#a42318;
    background:linear-gradient(180deg, rgba(255,235,180,.6), rgba(255,210,130,.45));
  }
  .bottom-tab-bar a span{ white-space:nowrap }
}


/* ============================================================================
   §9 示意圖暫覆寫
   ⚠️ 正式圖上線後刪除整個 §9,讓圖片回到 object-fit: cover
      (specificity 要高於 §4.2 / §4.3 的 cover 規則)
   ============================================================================ */

/* 彩報已換正比例真圖(1000×1200)→ 移出暫覆寫,回到 cover 填滿(無框線) */
.today-square-stack .today-square-item img{
  object-fit:contain;
  background:#fbf3d6;
}