@charset "UTF-8";
/* ==========================================================================
   pcgws 歐博娛樂城 — 前台改版樣式(取代式,不依賴 style.css 與 head.php 的行內樣式)
   只有引用 includes/head_clean.php 的頁面會載到這一支;
   舊頁面繼續走 head.php,一個字都沒動。還原 = 把 include 換回去。
   ========================================================================== */

/* ---------------------------------------------------------------- 設計 token */
:root{
  /* 底層 —— 由深到淺四階,卡片與面板都從這裡取 */
  --bg:        #0A0A0C;
  --bg-2:      #121216;
  --panel:     #17171D;
  --panel-2:   #1E1E26;
  --line:      rgba(227,184,92,.16);
  --line-soft: rgba(255,255,255,.08);

  /* 品牌金 —— 舊站的 #997833 在黑底只有 3.4:1,提亮到 10:1 以上 */
  --gold:      #E3B85C;
  --gold-hi:   #F5D68F;
  --gold-lo:   #C99F4A;   /* 英文副標用,對 --bg 8.3:1(原 #B98F3C 只有 6.7) */
  --gold-grad: linear-gradient(180deg,#F5D68F 0%,#E3B85C 46%,#C29A46 100%);

  /* 文字 —— 三階都拉到 AAA(7:1),數字是對 --panel 實測的合成對比,不是估的 */
  --txt:       #F4F1EA;   /* 主文,15.6:1 */
  --txt-2:     #C4BEB4;   /* 次要,10.1:1 */
  --txt-3:     #A8A29A;   /* 弱化(placeholder、說明小字),7.3:1 */
  --on-gold:   #241A06;   /* 金底上的字,對 --gold 9.6:1 */

  /* 狀態 —— 這三個都坐在自己 16% 半透明的同色底上,底會把對比吃掉,所以要比一般色亮 */
  --ok:        #7EDCA4;
  --warn:      #F5C06A;
  --bad:       #F58F88;

  /* 間距尺度 —— 這站自己一套,全部從這裡取,不逐處手調 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

  /* 區塊上間距(只設上方,下方一律不設 —— 避免相鄰區塊間距疊加)
     手機 32 / 平板 40 / 電腦 56,螢幕愈大留白愈鬆,不共用同一組數值 */
  --sec-gap: 32px;
  --sec-gap-1st: 20px;   /* 首區塊貼頁首的距離另定 */
  --sec-gap-end: 40px;   /* 尾區塊到頁面底的距離另定 */
  /* 內容容器 */
  --wrap: 1200px;
  --pad-x: 16px;

  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 22px;
  --shadow: 0 14px 34px rgba(0,0,0,.46);

  /* 固定件高度 —— 版面留白靠這兩個變數推,不寫死 */
  --head-h: 60px;
  --bnav-h: 62px;
}

/* ---------------------------------------------------------------- 重置 */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;            /* 內文基準,不小於 16px */
  line-height:1.7;
  overflow-x:hidden;         /* 手機不出現橫向捲動 */
  padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
}
@media (min-width:768px){ body{ padding-bottom:0; } }

main{ padding-bottom:var(--sec-gap-end); }   /* 尾區塊到底的距離,不用空 div 撐 */
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-hi); text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:800; line-height:1.35; color:var(--txt); }
p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }

/* 捲動條:深底上不要出現亮色系統捲軸 */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(227,184,92,.28); border-radius:8px; }
*{ scrollbar-width:thin; scrollbar-color:rgba(227,184,92,.28) transparent; }

/* aos 的淡入起始狀態會讓沒捲到的區塊整塊看不見;操作介面不需要淡入 */
[data-aos]{ opacity:1 !important; transform:none !important; }

/* ---------------------------------------------------------------- 版面骨架 */
/* 用長寫不用簡寫 —— `padding:0 var(--pad-x)` 會把 main 的 padding-bottom 一起清掉,
   那些 <main class="wrap"> 的頁面尾端留白就沒了 */
.wrap{
  width:100%; max-width:var(--wrap); margin:0 auto;
  padding-left:var(--pad-x); padding-right:var(--pad-x);
}
.sec{ margin-top:var(--sec-gap); }        /* 區塊只設上間距 */
.sec:first-of-type{ margin-top:var(--sec-gap-1st); }
.sec-full{ width:100%; }                   /* 背景滿版,內容再靠 .wrap 限寬 */

.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); }
.sec-title{ font-size:24px; letter-spacing:.04em; }
.sec-title .en{ display:block; font-size:11px; font-weight:600; letter-spacing:.26em; color:var(--gold-lo); text-transform:uppercase; margin-top:2px; }
.sec-more{
  display:inline-flex; align-items:center; min-height:32px;
  font-size:14px; color:var(--txt-2); white-space:nowrap;
}
.sec-more:hover{ color:var(--gold); }

/* ---------------------------------------------------------------- 頁首 */
.hd{
  position:sticky; top:0; z-index:900;
  height:var(--head-h);
  background:linear-gradient(180deg,#1C1C24 0%,#0C0C11 100%);
  /* 下緣走金色髮絲線 —— 深底配灰線會糊成一片,看起來像沒收邊 */
  border-bottom:1px solid rgba(227,184,92,.20);
  box-shadow:0 6px 20px rgba(0,0,0,.42);
}
@media (min-width:992px){ .hd{ --head-h:68px; } }
.hd-in{ height:100%; display:flex; align-items:center; gap:var(--s3); }
.hd-logo{ display:flex; align-items:center; flex:0 0 auto; }
.hd-logo img{ height:36px; width:auto; display:block; }
@media (min-width:992px){ .hd-logo img{ height:44px; } }

/* 導覽撐開中間並置中。原本靠 margin-left:auto 把選項全擠在 LOGO 右邊,
   1280 寬的中間會空出快 900px —— 頁首看起來空、重量全壓在兩端。 */
.hd-nav{ display:none; }
@media (min-width:992px){
  .hd-nav{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:2px; }
  .hd-nav a{
    position:relative; display:flex; align-items:center; height:44px; padding:0 14px;
    font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--txt-2);
  }
  /* 選取狀態改成底部金線,不用整塊填色 —— 填色塊在深底上會變成一坨,金線比較利落 */
  .hd-nav a::after{
    content:""; position:absolute; left:14px; right:14px; bottom:7px; height:2px;
    border-radius:2px; background:var(--gold-grad);
    opacity:0; transform:scaleX(.35);
    transition:opacity .18s ease, transform .18s ease;
  }
  .hd-nav a:hover{ color:var(--txt); }
  .hd-nav a.on{ color:var(--gold); }
  .hd-nav a:hover::after,.hd-nav a.on::after{ opacity:1; transform:none; }
}
@media (min-width:1200px){ .hd-nav a{ padding:0 18px; } .hd-nav a::after{ left:18px; right:18px; } }
.hd-right{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); flex:0 0 auto; }

/* 登入後:頁首餘額點數 */
.hd-bal{
  display:flex; align-items:center; gap:var(--s2);
  height:38px; padding:0 var(--s3);
  border:1px solid var(--line); border-radius:999px;
  background:rgba(227,184,92,.07);
}
.hd-bal .k{ font-size:11px; color:var(--txt-2); letter-spacing:.08em; }
.hd-bal .v{ font-size:16px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
/* 底色不用金色的半透明 —— 金字坐在淡金底上對比只有 6.7,換成壓深的底拉到 10 以上 */
.hd-bal .rf{
  position:relative;
  width:30px; height:30px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.34); color:var(--gold); font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.hd-bal .rf:hover{ background:rgba(0,0,0,.5); color:var(--gold-hi); }
/* 視覺是小圓,但點擊區要撐到 44 —— 不然拇指按不準 */
.hd-bal .rf::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
                    width:44px; height:44px; }
@media (max-width:420px){
  .hd-bal{ padding:0 10px; gap:6px; }
  .hd-bal .k{ display:none; }
}

/* ---------------------------------------------------------------- 按鈕 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 var(--s5);
  border:1px solid transparent; border-radius:var(--r2);
  font-size:16px; font-weight:700; line-height:1; cursor:pointer;
  transition:filter .18s ease, background-color .18s ease, border-color .18s ease;
  text-align:center;
}
.btn-primary,.btn.primary{
  background:var(--gold-grad); color:var(--on-gold); border-color:rgba(255,255,255,.14);
  box-shadow:0 6px 16px rgba(227,184,92,.18);
}
.btn-primary:hover,.btn.primary:hover{ filter:brightness(1.07); color:var(--on-gold); }
.btn.ghost{ background:rgba(255,255,255,.05); color:var(--txt); border-color:var(--line); }
.btn.ghost:hover{ background:rgba(227,184,92,.12); color:var(--gold-hi); border-color:var(--gold-lo); }
.btn.sm{ min-height:44px; padding:0 var(--s4); font-size:14px; border-radius:var(--r1); }
.btn.block{ width:100%; }
.btn[disabled],.btn.is-off{ opacity:.5; pointer-events:none; }

/* 成對按鈕:同一行,左右各一 */
.btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.btn-row .btn{ width:100%; }

/* ---------------------------------------------------------------- 卡片 */
.card{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r3);
  padding:var(--s5);
}
.card + .card{ margin-top:var(--s4); }
.card-t{ font-size:18px; font-weight:800; margin-bottom:var(--s4); display:flex; align-items:center; gap:var(--s2); }
.card-t::before{ content:""; width:3px; height:18px; border-radius:2px; background:var(--gold-grad); }
.card-note{ font-size:16px; color:var(--txt-2); margin-top:calc(var(--s2) * -1); margin-bottom:var(--s4); max-width:40em; }

/* ---------------------------------------------------------------- 遊戲小卡 */
/* 一列的欄數靠 auto-fill 跟著寬度長,不會留落單尾巴 */
.g-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3);
}
@media (min-width:600px){ .g-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); } }
@media (min-width:992px){ .g-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); } }
/* 欄數配合實際張數,不留落單尾巴:6 張走 3 欄(3+3),不要 4 欄的 4+2 */
@media (min-width:992px){ .g-grid.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.g-card{
  display:flex; flex-direction:column;     /* 標題長短不一時,按鈕仍對齊在同一條線上 */
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r3);
  overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.g-card:hover{ border-color:var(--gold-lo); transform:translateY(-2px); }
.g-card .pic{
  position:relative;
  /* 站上的桌台圖是 645x628,用 1:1 顯示完整不裁切;
     裁成 4:3 會把人物頭部切掉,或把圖上的遊戲名切成殘字,兩種都難看。 */
  aspect-ratio:1 / 1;
  background:linear-gradient(145deg,#23232C,#14141A);
  overflow:hidden;
}
.g-card .pic img{ width:100%; height:100%; object-fit:cover; object-position:center center; }
/* 沒有圖的入口:用漸層底 + 線條圖示佔位,不放會 404 的圖檔 */
.g-card .pic.ph{ display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#2A2415 0%,#16161C 62%); }
.g-card .pic.ph svg{ width:46%; height:46%; fill:none; stroke:var(--gold); stroke-width:1.2; opacity:.85; stroke-linecap:round; stroke-linejoin:round; }
/* 活動卡:圖是 2000x600 的橫幅,整張圖就是卡片本身。
   原本塞進 1:1 的方框,等於只留中間三成,活動文案(在圖的中右側)整段被裁掉。
   現在照原生比例 10:3 鋪滿到卡片邊緣,收成兩欄讓每張都夠大;
   不再另外掛標題列 —— 活動名稱本來就印在圖上,再印一次是重複。 */
.g-grid.g-wide{ grid-template-columns:1fr; gap:var(--s3); }
@media (min-width:768px){ .g-grid.g-wide{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); } }
.g-card.wide .pic{ aspect-ratio:10 / 3; background:none; }
/* 線上活動是 3 筆,兩欄會剩一張落單在下一列(天條 55)。
   奇數筆時把最後一張拉滿整列 —— 尾巴不落單,那張還更大。 */
@media (min-width:768px){
  .g-grid.g-wide > :last-child:nth-child(odd){ grid-column:1 / -1; }
}
.g-card.wide .pic img{ object-fit:cover; }
.g-card .bd{ padding:var(--s3) var(--s3) var(--s4); flex:1 1 auto; display:flex; flex-direction:column; }
.g-card .nm{ font-size:15px; font-weight:700; color:var(--txt); line-height:1.4; margin-bottom:var(--s3); }
/* sub 用負上距把與 nm 的距離收回 2px,自己再留 12px 給按鈕 —— 有沒有 sub 都有間距,
   按鈕再靠 margin-top:auto 貼底,標題一行或兩行時按鈕都對齊在同一條線。 */
.g-card .sub{ font-size:12px; color:var(--txt-2); margin-top:calc(2px - var(--s3)); margin-bottom:var(--s3); }
/* 桌台卡的遊戲名稱已經印在卡面圖上,底下不再重複印一次;
   只留一行說明,箭頭改掛在它身上當可點提示。 */
.g-card .bd > .sub:only-child{
  margin-top:0; margin-bottom:0;
  font-size:14px; color:var(--txt-2);
  position:relative; padding-right:18px;
}
.g-card .bd > .sub:only-child::after{
  content:"›"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:18px; line-height:1; opacity:.7;
  transition:opacity .18s ease, transform .18s ease;
}
.g-card:hover .bd > .sub:only-child::after{ opacity:1; transform:translate(2px,-50%); }
.g-card .go{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center;
  min-height:36px; border-radius:var(--r1);
  background:rgba(227,184,92,.12); border:1px solid var(--line);
  font-size:14px; font-weight:700; color:var(--gold);
}
.g-card:hover .go{ background:var(--gold-grad); color:var(--on-gold); border-color:transparent; }

/* 主打入口(大卡,兩張並排) */
.f-grid{ display:grid; grid-template-columns:1fr; gap:var(--s4); }
@media (min-width:768px){ .f-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.f-card{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r4);
  background:var(--panel-2);
  min-height:160px;
}
.f-card .pic{ position:absolute; inset:0; }
.f-card .pic img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; opacity:.42; }
/* 沒有圖的大卡:右側放一枚線條圖示,不留空 */
.f-card .mk{ position:absolute; right:18px; top:50%; transform:translateY(-50%); width:120px; height:120px; opacity:.22; }
.f-card .mk svg{ width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:520px){ .f-card .mk{ width:88px; height:88px; right:12px; } }
/* 手機的大卡是直式,90deg 漸層遮不住右半邊的圖 —— 換成整片壓暗 */
@media (max-width:640px){
  .f-card .bd{ background:linear-gradient(180deg,rgba(10,10,12,.72) 0%,rgba(10,10,12,.93) 62%); }
  .f-card .pic img{ opacity:.34; }
}
.f-card .bd{
  position:relative; padding:var(--s6);
  background:linear-gradient(90deg,rgba(10,10,12,.95) 46%,rgba(10,10,12,.35) 100%);
  min-height:160px; display:flex; flex-direction:column; justify-content:center;
}
.f-card .nm{ font-size:20px; font-weight:800; color:var(--txt); }
.f-card .en{ font-size:11px; letter-spacing:.24em; color:var(--gold); font-weight:700; text-transform:uppercase; }
.f-card .ds{ font-size:16px; color:var(--txt-2); margin-top:var(--s2); max-width:38em; }
.f-card .go{ margin-top:var(--s4); align-self:flex-start; }
/* 只有一個大廳入口時用滿寬橫幅,不要一張卡孤零零佔半排 */
.f-wide{ min-height:190px; }
.f-wide .bd{ min-height:190px; max-width:640px; }
.f-wide .pic img{ object-position:62% center; opacity:.62; }
@media (min-width:768px){ .f-wide{ min-height:220px; } .f-wide .bd{ min-height:220px; padding:var(--s7); } .f-wide .nm{ font-size:24px; } }

/* 小卡整張就是連結,不再各掛一顆按鈕;用箭頭與 hover 表示可點 */
.g-card .nm{ position:relative; padding-right:16px; }
.g-card .nm::after{
  content:"›"; position:absolute; right:0; top:-1px;
  color:var(--gold); font-size:18px; font-weight:400; line-height:1.4; opacity:.7;
}
.g-card:hover .nm::after{ opacity:1; transform:translateX(2px); }

/* ---------------------------------------------------------------- 純文字連結列 */
/* 用在首頁底部的內鏈區:保住 Blog 文章的入口,但不做成文章卡,免得整頁變部落格。 */
.link-row{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:768px){ .link-row{ grid-template-columns:1fr 1fr; column-gap:var(--s6); } }
.link-row li{ border-top:1px solid var(--line-soft); }
.link-row li:first-child{ border-top:0; }
@media (min-width:768px){ .link-row li:nth-child(2){ border-top:0; } }
.link-row a{
  display:flex; align-items:center; gap:var(--s2);
  min-height:44px; padding:8px 0;
  font-size:16px; color:var(--txt-2); line-height:1.6;
}
.link-row a::before{ content:"·"; color:var(--gold); flex:0 0 auto; }
.link-row a:hover{ color:var(--gold); }
/* 文章分類入口:分類頁也在 sitemap 裡,要有連結進得去 */
.kind-row{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.kind-row a{
  display:inline-flex; align-items:center; min-height:32px; padding:0 var(--s3);
  border:1px solid var(--line-soft); border-radius:999px;
  font-size:13px; color:var(--txt-2);
}
.kind-row a:hover{ color:var(--gold); border-color:var(--gold-lo); }

/* ---------------------------------------------------------------- 客服卡 */
.cs-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2);
  padding:var(--s6);
  border:1px solid var(--line); border-radius:var(--r4);
  background:linear-gradient(150deg,#201B10 0%,#16161C 64%);
}
.cs-card:hover{ border-color:var(--gold); }
.cs-card .ic{ width:44px; height:44px; color:var(--gold); }
.cs-card .ic svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.cs-card .nm{ font-size:20px; font-weight:800; color:var(--txt); }
.cs-card .ds{ font-size:16px; color:var(--txt-2); line-height:1.8; max-width:36em; }
.cs-card .go{ margin-top:var(--s3); }

/* ---------------------------------------------------------------- 主視覺 */
.hero{
  position:relative;
  background:radial-gradient(120% 90% at 50% 0%,#241C0C 0%,#0F0F13 58%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-in{ padding:var(--s7) var(--pad-x) var(--s8); text-align:center; max-width:var(--wrap); margin:0 auto; }
.hero h1{ font-size:26px; line-height:1.4; letter-spacing:.02em; }
.hero h1 .gd{ color:var(--gold); }
.hero .lead{ margin-top:var(--s3); font-size:16px; color:var(--txt-2); }
.hero .acts{ margin-top:var(--s5); display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); max-width:420px; margin-left:auto; margin-right:auto; }
@media (min-width:768px){
  .hero-in{ padding:var(--s9) var(--pad-x) var(--s9); }
  .hero h1{ font-size:36px; }
}
/* 三個數據 */
.hero-kpi{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.hero-kpi div{ padding:var(--s3) var(--s2); border:1px solid var(--line-soft); border-radius:var(--r2); background:rgba(255,255,255,.03); }
.hero-kpi b{ display:block; font-size:18px; color:var(--gold); font-variant-numeric:tabular-nums; }
.hero-kpi span{ font-size:12px; color:var(--txt-2); }

/* 主視覺輪播 —— 用 scroll-snap,沒有 JS 也能滑;JS 只負責自動播與圓點 */
.hero-bn{ position:relative; background:#08080A; }
.bn-rail{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.bn-rail::-webkit-scrollbar{ display:none; }
.bn-item{ flex:0 0 100%; scroll-snap-align:center; }
.bn-item img{
  width:100%; height:auto; display:block;
  /* 輪播圖是 2000x600。原本手機給 16:7、電腦給 1920:540,兩邊都不是原生比例,
     手機那組等於把橫幅裁掉三成寬,標語直接被切斷。統一用原生 10:3,零裁切。 */
  aspect-ratio:10 / 3; object-fit:cover;
}
.bn-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:8px;
}
.bn-dots button{
  position:relative;
  width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.36);
}
.bn-dots button::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
                        width:44px; height:44px; }
.bn-dots button.on{ background:var(--gold); width:20px; border-radius:999px; }

/* 三步開始 */
.steps{ display:grid; grid-template-columns:1fr; gap:var(--s3); counter-reset:none; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); gap:var(--s4); } }
.steps li{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto;
  column-gap:var(--s3); row-gap:2px; align-items:start;
  padding:var(--s5); border:1px solid var(--line-soft); border-radius:var(--r3);
  background:var(--panel);
}
.steps .n{
  grid-row:1 / span 3;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-grad); color:var(--on-gold);
  font-size:16px; font-weight:800; line-height:1;
}
.steps b{ font-size:16px; color:var(--txt); }
.steps .d{ font-size:13px; color:var(--txt-2); line-height:1.75; }
.steps .s-go{ font-size:13px; font-weight:700; color:var(--gold); margin-top:var(--s2); }

/* 平台特點 */
.why-grid{ display:grid; grid-template-columns:1fr; gap:var(--s3); }
@media (min-width:600px){ .why-grid{ grid-template-columns:1fr 1fr; gap:var(--s4); } }
@media (min-width:992px){ .why-grid{ grid-template-columns:repeat(4,1fr); } }
.why{
  padding:var(--s5); border:1px solid var(--line-soft); border-radius:var(--r3);
  background:var(--panel);
}
.why .ic{ display:block; width:34px; height:34px; color:var(--gold); margin-bottom:var(--s3); }
.why .ic svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.why b{ display:block; font-size:16px; color:var(--txt); margin-bottom:4px; }
.why .d{ font-size:13px; color:var(--txt-2); line-height:1.8; }

/* 客服橫幅 */
.cs-band{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  padding:var(--s6);
  border:1px solid var(--line); border-radius:var(--r4);
  background:linear-gradient(120deg,#211B0F 0%,#15151B 62%);
}
.cs-band .t{ flex:1 1 240px; min-width:0; }
.cs-band .t b{ display:block; font-size:19px; color:var(--txt); }
.cs-band .t span{ font-size:14px; color:var(--txt-2); }
.cs-band .btn-row{ flex:0 0 auto; grid-template-columns:1fr 1fr; min-width:260px; }

/* 跑馬燈 */
.ticker{
  display:flex; align-items:center; gap:var(--s3);
  height:38px; padding:0 var(--pad-x);
  background:var(--bg-2); border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.ticker .lb{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--gold); letter-spacing:.08em; }
.ticker .rail{ flex:1 1 auto; overflow:hidden; white-space:nowrap; }
.ticker .rail span{ display:inline-block; padding-right:48px; font-size:14px; color:var(--txt-2); animation:tk 26s linear infinite; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- 底部固定選單(手機) */
.bnav{
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  display:flex;
  height:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:linear-gradient(180deg,#16161C 0%,#0B0B0F 100%);
  border-top:1px solid var(--line);
}
.bnav a{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:44px;
  font-size:12px; font-weight:600; color:var(--txt-2);
}
.bnav a .ic{ width:22px; height:22px; display:block; }
.bnav a .ic svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bnav a.on,.bnav a:hover{ color:var(--gold); }
.bnav a.hi{ color:var(--gold); }
@media (min-width:768px){ .bnav{ display:none; } }

/* ---------------------------------------------------------------- 漂浮客服 */
/* 舊站是右側常駐的 .qqserver 面板;這裡改成收合式,平常只有一顆按鈕,
   手機上停在底部固定選單上方,不擋內容也不壓到操作區。 */
.csf{
  position:fixed; right:12px; z-index:940;
  bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 12px);
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2);
}
@media (min-width:768px){ .csf{ right:20px; bottom:20px; } }

.csf-btn{
  display:flex; align-items:center; gap:8px;
  min-height:48px; padding:0 var(--s4);
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:var(--gold-grad); color:var(--on-gold);
  font-size:15px; font-weight:800; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.csf-btn .ic{ width:22px; height:22px; }
.csf-btn .ic svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.csf-btn:hover{ filter:brightness(1.06); }
.csf-btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; }

.csf-panel{
  width:min(76vw,236px);
  padding:var(--s2);
  border:1px solid var(--line); border-radius:var(--r3);
  background:var(--panel-2); box-shadow:var(--shadow);
}
.csf-item{
  display:flex; align-items:center; gap:var(--s3);
  min-height:52px; padding:var(--s2) var(--s3); border-radius:var(--r2);
  color:var(--txt);
}
.csf-item + .csf-item{ margin-top:4px; }
.csf-item:hover{ background:rgba(227,184,92,.12); color:var(--txt); }
.csf-item .ic{ width:26px; height:26px; flex:0 0 auto; color:var(--gold); }
.csf-item .ic svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.csf-item .tx{ min-width:0; }
.csf-item .tx b{ display:block; font-size:14px; font-weight:700; line-height:1.4; }
.csf-item .tx i{ display:block; font-size:11px; font-style:normal; color:var(--txt-2); }

/* ---------------------------------------------------------------- 會員分頁 */
.mnav{
  display:flex; gap:var(--s2); overflow-x:auto; padding-bottom:var(--s2);
  -webkit-overflow-scrolling:touch;
}
.mnav::-webkit-scrollbar{ height:0; }
.mnav a{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 var(--s4);
  border:1px solid var(--line-soft); border-radius:999px;
  background:rgba(255,255,255,.03);
  font-size:14px; font-weight:600; color:var(--txt-2); white-space:nowrap;
}
.mnav a.on{ background:var(--gold-grad); border-color:transparent; color:var(--on-gold); }
.mnav a:hover{ color:var(--gold); border-color:var(--gold-lo); }
.mnav a.on:hover{ color:var(--on-gold); }

/* 會員頁上方摘要 */
.m-top{
  background:linear-gradient(135deg,#1F1A10 0%,#14141A 62%);
  border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s5);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
}
.m-top .who{ min-width:0; }
.m-top .who .id{ font-size:18px; font-weight:800; }
.m-top .who .lv{ font-size:12px; color:var(--gold); letter-spacing:.06em; }
.m-top .bal{ margin-left:auto; text-align:right; }
.m-top .bal .k{ font-size:12px; color:var(--txt-2); }
.m-top .bal .v{ font-size:28px; font-weight:800; color:var(--gold); line-height:1.2; font-variant-numeric:tabular-nums; }
.m-top .acts{ flex:1 1 100%; display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media (min-width:768px){ .m-top .acts{ flex:0 0 auto; grid-template-columns:repeat(2,140px); } }

/* ---------------------------------------------------------------- 摺疊卡(帳戶管理) */
/* 帳戶管理有六組設定,全部攤開會讓會員頁長到四千多 px。
   用原生 details,不必額外 JS;表單仍在 DOM 裡,送出流程不受影響。 */
.fold{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r3);
  overflow:hidden;
}
.fold + .fold{ margin-top:var(--s4); }
.fold > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:var(--s3);
  min-height:56px; padding:var(--s3) var(--s5);
  font-size:16px; font-weight:700; color:var(--txt);
}
.fold > summary::-webkit-details-marker{ display:none; }
.fold > summary::before{ content:""; width:3px; height:18px; border-radius:2px; background:var(--gold-grad); flex:0 0 auto; }
.fold > summary::after{
  content:"＋"; margin-left:auto; flex:0 0 auto;
  color:var(--gold); font-size:18px; line-height:1;
}
.fold[open] > summary::after{ content:"－"; }
.fold[open] > summary{ border-bottom:1px solid var(--line-soft); }
.fold > summary:hover{ background:rgba(227,184,92,.06); }
.fold .fold-bd{ padding:var(--s5); }
.fold .tag-ok{
  margin-left:var(--s2); padding:2px 10px; border-radius:999px;
  background:rgba(99,212,146,.14); color:var(--ok); font-size:12px; font-weight:700;
}
.fold .tag-todo{
  margin-left:var(--s2); padding:2px 10px; border-radius:999px;
  background:rgba(240,178,75,.16); color:var(--warn); font-size:12px; font-weight:700;
}
/* 摺疊卡在兩欄網格裡各自獨立,展開時不會把隔壁撐高 */
.fold-grid{ display:grid; grid-template-columns:1fr; gap:var(--s4); align-items:start; }
@media (min-width:768px){ .fold-grid{ grid-template-columns:1fr 1fr; } }
.fold-grid .fold + .fold{ margin-top:0; }

/* ---------------------------------------------------------------- 表單 */
.fld{ margin-top:var(--s4); }
.fld:first-child{ margin-top:0; }
.fld > label,.fld .lb{
  display:block; font-size:13px; font-weight:600; color:var(--txt-2); margin-bottom:6px;
}
.fld .req{ color:var(--bad); }
.inp,
:is(.card,.fold) input[type="text"],:is(.card,.fold) input[type="password"],:is(.card,.fold) input[type="tel"],
:is(.card,.fold) input[type="number"],:is(.card,.fold) input[type="email"],:is(.card,.fold) input:not([type]),
:is(.card,.fold) select,:is(.card,.fold) textarea{
  width:100%; min-height:46px; padding:10px var(--s3);
  background:#0F0F14; color:var(--txt);
  border:1px solid var(--line-soft); border-radius:var(--r1);
  font-size:16px;                      /* iOS 聚焦不會自動放大 */
  outline:none;
}
:is(.card,.fold) select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px; }
:is(.card,.fold) input:focus,:is(.card,.fold) select:focus,:is(.card,.fold) textarea:focus,.inp:focus{ border-color:var(--gold-lo); box-shadow:0 0 0 3px rgba(227,184,92,.14); }
:is(.card,.fold) input::placeholder,.inp::placeholder{ color:var(--txt-3); }
/* 唯讀顯示欄用底色區分,不用 disabled 的 opacity —— 那會把整欄壓暗 */
:is(.card,.fold) input[disabled],:is(.card,.fold) input[readonly],.inp[disabled]{
  background:#14141A; color:var(--txt-2); opacity:1;
  -webkit-text-fill-color:var(--txt-2);   /* iOS Safari 會自己把 disabled 文字打灰 */
  border-style:dashed;
}
:is(.card,.fold) input[type="file"]{ padding:10px var(--s3); font-size:14px; }
.fld .hint{ font-size:12px; color:var(--txt-3); margin-top:6px; }
.form-2{ display:grid; grid-template-columns:1fr; gap:var(--s4); }
@media (min-width:768px){ .form-2{ grid-template-columns:1fr 1fr; } }
.form-acts{ margin-top:var(--s5); }
/* 註冊頁:窄容器,表單不要拉到 1200px 那麼寬 */
.wrap.narrow{ max-width:560px; }
.sms-row{ display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:start; }
.sms-row .btn{ white-space:nowrap; }
/* 勾選框被 label 包住,整個 label 就是點擊區 —— 要撐到 44 高 */
.agree{
  display:flex; align-items:center; gap:var(--s2);
  min-height:44px; padding:var(--s2) 0;
  margin-top:var(--s5); font-size:16px; color:var(--txt-2); line-height:1.7; cursor:pointer;
}
.agree input{ width:24px; height:24px; margin-top:2px; flex:0 0 auto; accent-color:var(--gold); }
/* 一進頁面就把「請輸入此欄位」全部攤開太吵,改成使用者動過才提示 */
.was-validated .form-control:invalid,.was-validated .form-control:valid{ background-image:none; }
.invalid-feedback,.valid-feedback{ display:none; }
input:user-invalid ~ .invalid-feedback{ display:block; color:var(--bad); font-size:12px; margin-top:4px; }

/* 已綁定的唯讀值 */
.val-ro{
  min-height:46px; padding:10px var(--s3);
  background:#14141A; border:1px dashed var(--line-soft); border-radius:var(--r1);
  color:var(--txt-2); font-size:16px; word-break:break-all;
}

/* ---------------------------------------------------------------- 儲值:付款方式選擇 */
.pay-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3);
}
@media (min-width:600px){ .pay-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:992px){ .pay-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pay-grid + .pay-grid{ margin-top:var(--s3); }

.pay-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2);
  min-height:96px; padding:var(--s3);
  border:1px solid var(--line-soft); border-radius:var(--r2);
  background:rgba(255,255,255,.03); cursor:pointer; text-align:center;
  transition:border-color .16s ease, background-color .16s ease;
}
.pay-item:hover{ border-color:var(--gold-lo); background:rgba(227,184,92,.07); }
.pay-item .ic{ width:34px; height:34px; }
.pay-item .ic svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.pay-item .nm{ font-size:14px; font-weight:700; color:var(--txt); line-height:1.3; }
.pay-item .sub{ font-size:11px; color:var(--txt-3); }
/* 選中:金色描邊 + 右上打勾,不用整塊填色,免得和主按鈕搶視覺 */
.pay-item.on{ border-color:var(--gold); background:rgba(227,184,92,.12); position:relative; }
.pay-item.on::after{
  content:"✓"; position:absolute; right:8px; top:6px;
  color:var(--gold); font-size:13px; font-weight:800;
}
.pay-item.on .nm{ color:var(--gold-hi); }
.pay-item.sm{ min-height:66px; }
.sub-grid .pay-item{ background:rgba(255,255,255,.02); }

.amt-quick{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s2); margin-top:var(--s3); }
@media (min-width:600px){ .amt-quick{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.quick-btn{
  min-height:44px; padding:0 var(--s2);
  border:1px solid var(--line-soft); border-radius:var(--r1);
  background:rgba(255,255,255,.04); color:var(--txt-2);
  font-size:14px; font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums;
}
.quick-btn:hover{ border-color:var(--gold-lo); color:var(--gold); }

.info-box{
  padding:var(--s3) var(--s4); border:1px solid var(--line); border-radius:var(--r2);
  background:rgba(227,184,92,.06); font-size:14px; color:var(--txt-2);
}
.note-list li{ position:relative; padding-left:16px; font-size:16px; color:var(--txt-2); line-height:1.9; max-width:40em; }
.note-list li::before{ content:"·"; position:absolute; left:2px; color:var(--gold); }

/* ---------------------------------------------------------------- 轉點:兩側錢包 */
.xfer{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s3); }
.xfer-side{
  padding:var(--s4); border:1px solid var(--line-soft); border-radius:var(--r2);
  background:rgba(255,255,255,.03); text-align:center; min-width:0;
}
.xfer-side .k{ font-size:12px; color:var(--txt-2); }
.xfer-side .v{ font-size:22px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; line-height:1.3; }
.xfer-mid{ width:40px; color:var(--gold-lo); }
.xfer-mid svg{ width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------------------------------------------------------- 表格(所有紀錄) */
.tw{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tb{ width:100%; min-width:520px; font-size:14px; }
.tb thead th{
  position:sticky; top:0; z-index:1;
  background:#1B1B22; color:var(--gold);
  font-size:12px; font-weight:700; letter-spacing:.06em; text-align:left;
  padding:10px var(--s3); border-bottom:1px solid var(--line); white-space:nowrap;
}
.tb tbody td{ padding:12px var(--s3); border-bottom:1px solid var(--line-soft); color:var(--txt); vertical-align:middle; }
.tb tbody tr:nth-child(even) td{ background:rgba(255,255,255,.022); }
.tb tbody tr:hover td{ background:rgba(227,184,92,.05); }
.tb .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tb .ta-r{ text-align:right; }
.tb .plus{ color:var(--ok); font-weight:700; }
.st{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.st-ok{ background:rgba(99,212,146,.14); color:var(--ok); }
.st-wait{ background:rgba(240,178,75,.16); color:var(--warn); }
.st-no{ background:rgba(240,115,107,.14); color:var(--bad); }
.tb-empty{ padding:var(--s8) var(--s4); text-align:center; color:var(--txt-2); font-size:14px; }
/* 摘要列 */
.rec-sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-bottom:var(--s4); }
.rec-sum div{ padding:var(--s3); border:1px solid var(--line-soft); border-radius:var(--r2); background:rgba(255,255,255,.03); text-align:center; }
.rec-sum span{ display:block; font-size:12px; color:var(--txt-2); }
.rec-sum b{ font-size:18px; color:var(--gold); font-variant-numeric:tabular-nums; }
.more-wrap{ margin-top:var(--s4); text-align:center; }

/* ---------------------------------------------------------------- 優惠活動 */
.act-list{ display:grid; grid-template-columns:1fr; gap:var(--s4); }
.act{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r3); overflow:hidden;
}
.act.open{ border-color:var(--gold-lo); }
.act-hd{
  /* 同一批 2000x600 的橫幅。原本塞進 16:9 的小縮圖,裁掉快五成寬,
     活動文案(在圖的中右側)整段被切掉 —— 縮圖上只看得到半截字。
     改成整張橫幅鋪在上方,標題與展開鈕收成下面一列。 */
  display:block; padding:0;
}
.act-pic{
  aspect-ratio:10 / 3; overflow:hidden;
  background:linear-gradient(145deg,#23232C,#14141A);
}
.act-pic img{ width:100%; height:100%; object-fit:cover; }
.act-tr{
  display:flex; align-items:center; gap:var(--s3);
  min-height:56px; padding:var(--s3) var(--s5);
}
.act-t{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:700; color:var(--txt); line-height:1.45; }
@media (min-width:768px){ .act-t{ font-size:18px; } }
.act-hd:hover .act-t{ color:var(--gold-hi); }
.act-x{ flex:0 0 auto; color:var(--gold); font-size:16px; }
.act-bd{ padding:0 var(--s5) var(--s5); border-top:1px solid var(--line-soft); margin-top:var(--s2); padding-top:var(--s4); }
.act-word{ font-size:15px; color:var(--txt-2); line-height:1.9; }
.act-word img{ border-radius:var(--r2); margin:var(--s3) 0; }
.act-word table{ display:block; overflow-x:auto; }

/* ---------------------------------------------------------------- 常見問題 */
.faq-g{
  font-size:15px; font-weight:700; color:var(--gold);
  letter-spacing:.06em; margin-bottom:var(--s3);
  padding-left:11px; position:relative;
}
.faq-g::before{
  content:""; position:absolute; left:0; top:4px;
  width:3px; height:15px; border-radius:2px; background:var(--gold-grad);
}
.faq-g + .fold{ margin-top:0; }
/* 問題分組:比區塊間距小一階,同一頁裡的分組之間不需要那麼鬆 */
.faq-group + .faq-group{ margin-top:var(--s7); }
.faq-lead{ font-size:16px; color:var(--txt-2); margin-bottom:var(--s5); max-width:40em; }
.faq-a{ font-size:16px; color:var(--txt-2); line-height:1.95; max-width:40em; }

/* ---------------------------------------------------------------- 文章(Blog) */
.post-list{ display:grid; grid-template-columns:1fr; gap:var(--s3); }
@media (min-width:768px){ .post-list{ grid-template-columns:1fr 1fr; gap:var(--s4); } }
.post{
  /* 線上 23 張文章圖實測是 1.22~1.78 不等,中位 1.62 —— 沒有一個比例能全中。
     容器取 8:5(1.60)裁得最少:只有 4 張超過一成;
     用 16:9 會有 9 張、用 1:1 是整批裁掉四成。 */
  display:grid; grid-template-columns:116px 1fr; gap:var(--s3);
  padding:var(--s3); border:1px solid var(--line-soft); border-radius:var(--r3);
  background:var(--panel);
}
@media (min-width:768px){ .post{ grid-template-columns:150px 1fr; } }
.post:hover{ border-color:var(--gold-lo); }
.post-pic{
  aspect-ratio:8 / 5; align-self:center; border-radius:var(--r2); overflow:hidden;
  background:linear-gradient(145deg,#23232C,#14141A);
}
.post-pic img{ width:100%; height:100%; object-fit:cover; }
.post-bd{ min-width:0; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.post-kind{ font-size:11px; color:var(--gold); letter-spacing:.06em; }
/* 標題與摘要各自固定行數 —— 標題長短不一時,卡片高度才會一致 */
.post-t{
  font-size:16px; font-weight:700; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-t a{ color:var(--txt); }
.post-t a:hover{ color:var(--gold-hi); }
.post-ex{
  font-size:16px; color:var(--txt-3); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.crumb{ display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--txt-2); margin-bottom:var(--s3); }
.crumb a{ color:var(--txt-2); }
.crumb a:hover{ color:var(--gold); }
.crumb span{ color:var(--txt-3); }
.post-h1{ font-size:24px; line-height:1.45; }
@media (min-width:768px){ .post-h1{ font-size:28px; } }
.post-meta{ margin-top:var(--s2); font-size:12px; color:var(--txt-3); }
.post-hero{ width:100%; border-radius:var(--r3); margin-top:var(--s5); }
.post-word{ margin-top:var(--s5); }

/* ---------------------------------------------------------------- 舊內容區的相容層 */
/* about / services / guide / user_contract 的文字是從舊樣板原封搬過來的,
   markup 帶著 bootstrap 的 row/col 與舊主題的裝飾 class。
   這一段負責讓那些原文在新版面下讀得下去,不必重打任何一個字。 */
.legacy{ font-size:16px; line-height:1.95; color:var(--txt-2); }
.legacy h1,.legacy h2{ font-size:22px; color:var(--txt); margin:var(--s6) 0 var(--s3); }
.legacy h3{ font-size:19px; color:var(--txt); margin:var(--s5) 0 var(--s2); }
.legacy h4,.legacy h5,.legacy h6{ font-size:16px; color:var(--gold); margin:var(--s4) 0 var(--s2); font-weight:700; }
.legacy > :first-child,.legacy h2:first-child,.legacy h3:first-child{ margin-top:0; }
.legacy p{ margin:0 0 var(--s3); }
.legacy p:last-child{ margin-bottom:0; }
.legacy ul,.legacy ol{ margin:0 0 var(--s3); padding-left:0; }
.legacy li{ position:relative; padding-left:18px; margin-bottom:6px; }
.legacy ul > li::before{ content:"·"; position:absolute; left:4px; color:var(--gold); }
.legacy ol{ counter-reset:lg; }
.legacy ol > li{ counter-increment:lg; }
.legacy ol > li::before{ content:counter(lg) "."; position:absolute; left:0; color:var(--gold); font-size:13px; }
.legacy a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.legacy img{ border-radius:var(--r2); margin:var(--s3) 0; }
.legacy strong,.legacy b{ color:var(--txt); }
.legacy hr{ border:0; border-top:1px solid var(--line-soft); margin:var(--s5) 0; }
/* 表格:寬的自己捲,不要把頁面撐出橫向捲動 */
.legacy table{ width:100%; margin:var(--s3) 0; display:block; overflow-x:auto; }
.legacy table th,.legacy table td{
  padding:10px var(--s3); border-bottom:1px solid var(--line-soft);
  text-align:left; white-space:nowrap;
}
.legacy table th{ color:var(--gold); font-size:13px; font-weight:700; background:#1B1B22; }
/* 中和 bootstrap 的欄位與舊主題的裝飾 */
.legacy [class*="col-"]{ width:auto; max-width:none; float:none; padding:0; }
.legacy .row{ display:block; margin:0; }
.legacy .tab-pane{ display:block; }
.legacy [class^="g"][class$=""]:empty,
.legacy i:empty,.legacy span:empty{ display:none; }
.legacy .w2{ display:block; font-size:19px; font-weight:800; color:var(--txt); margin-bottom:var(--s3); }
/* 摺疊版的內容(新手教學那五段) */
.legacy-fold + .legacy-fold{ margin-top:var(--s3); }
.legacy-fold .fold-bd{ padding-top:var(--s4); }

/* ---------------------------------------------------------------- 彈出視窗 */
/* bootstrap 的 modal('show') 是用 inline style 設 display:block,樣式表寫 grid 蓋不過去,
   置中改用 margin 處理。視窗高度佔 7.5 成螢幕。 */
/* display:none 是必要的,不能只靠 opacity —— 少了它,彈窗雖然看不見卻鋪滿整個視窗,
   把底下所有連結與按鈕的點擊全部吃掉。bootstrap 的 modal('show') 會設 inline
   display:block,所以這裡維持 none,由它或 .show 打開。 */
.modal{ display:none; position:fixed; inset:0; z-index:1050; overflow:auto; background:rgba(0,0,0,.72); }
.modal.fade{ opacity:0; transition:opacity .18s linear; }
.modal.show,.modal.in{ display:block; opacity:1; }
.modal-dialog{ width:min(92vw,460px); margin:9vh auto; }
.modal-content{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r3);
  box-shadow:var(--shadow); overflow:hidden;
  max-height:75vh; display:flex; flex-direction:column;
}
.modal-header{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#1E1E26,#17171D);
}
.modal-title,.modal-header h4{ font-size:18px; font-weight:800; color:var(--gold); margin:0; }
.modal-header .close{
  margin-left:auto; width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--txt); font-size:20px; line-height:1; cursor:pointer;
}
.modal-header .close:hover{ background:rgba(240,115,107,.2); color:#fff; }
.modal-body{ padding:var(--s5); overflow:auto; color:var(--txt); }
.modal-footer{ padding:var(--s4) var(--s5); border-top:1px solid var(--line-soft); }
.modal-backdrop{ display:none; }   /* 背景遮罩用 .modal 自己的底色,避免疊兩層變全黑 */
@media (min-width:768px){
  .modal-dialog{ width:min(75vw,560px); margin:8vh auto; }
}
/* 舊樣板的欄位在彈窗裡用的是 bootstrap class,這裡接住,不然會變成瀏覽器預設的白底 */
.modal .form-control{
  width:100%; min-height:46px; padding:10px var(--s3);
  background:#0F0F14; color:var(--txt); border:1px solid var(--line-soft); border-radius:var(--r1); font-size:16px;
}
.modal .form-control:focus{ border-color:var(--gold-lo); outline:none; box-shadow:0 0 0 3px rgba(227,184,92,.14); }
.modal .form-group{ margin-bottom:var(--s4); }
.modal .form-group > label{ display:block; font-size:13px; color:var(--txt-2); margin-bottom:6px; }
.modal .btn-primary{
  min-height:46px; padding:0 var(--s6); border-radius:var(--r2); border:0;
  background:var(--gold-grad); color:var(--on-gold); font-weight:700; font-size:16px; cursor:pointer;
}
.modal .text-center{ text-align:center; }

/* ---------------------------------------------------------------- 小工具 */
.muted{ color:var(--txt-2); }
.tiny{ font-size:12px; }
.mt2{ margin-top:var(--s2); } .mt3{ margin-top:var(--s3); } .mt4{ margin-top:var(--s4); }
.mt5{ margin-top:var(--s5); } .mt6{ margin-top:var(--s6); }
.ta-c{ text-align:center; }
.nowrap{ white-space:nowrap; }
.hide{ display:none !important; }
@media (max-width:767px){ .pc-only{ display:none !important; } }
@media (min-width:768px){ .mb-only{ display:none !important; } }

/* 平板 768–1024:兩欄容易撐開,收一階間距 */
@media (min-width:768px) and (max-width:1024px){
  :root{ --sec-gap:40px; --sec-gap-1st:24px; --sec-gap-end:56px; --pad-x:20px; }
  .hero h1{ font-size:30px; }
}
@media (min-width:1025px){
  :root{ --sec-gap:56px; --sec-gap-1st:32px; --sec-gap-end:72px; --pad-x:24px; }
}

/* ---------------------------------------------------------------- 觸控補償 */
/* 內文裡的行內連結被行高限制,拉高會把段落撐開。
   改成用 padding 擴大點擊區、再用等量負 margin 抵銷,版面不變但按得到。 */
.card a:not(.btn):not(.sec-more),
.fold-bd a:not(.btn),
.legacy a,
.agree a,
.act-word a,
.crumb a,
.post-kind,
.post-t a,
main p a:not(.btn),
.muted a:not(.btn),
.ta-c a:not(.btn){
  padding:8px 3px; margin:-8px -3px;
}
/* 分頁的頁碼(CI 產生的 markup,只能從外面套) */
.more-wrap a,
.more-wrap .pagination a,
.more-wrap .pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 10px;
  border:1px solid var(--line-soft); border-radius:var(--r1);
  color:var(--txt-2); font-size:15px;
}
.more-wrap .pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.more-wrap a:hover{ border-color:var(--gold-lo); color:var(--gold); }
/* 表格裡的長文字要能讀 */
.tb tbody td{ font-size:16px; }
.tb .tiny{ font-size:14px; }

/* 舊內容區在電腦版一行會排到 70 幾個中文字,讀起來很累 —— 段落限寬,表格不限 */
.legacy p,
.legacy li,
.legacy > div:not(:has(table)){
  max-width:40em;
}