/* 中性版：不掛任何公司識別。深色科技風，對比全部實算過 WCAG。
   主色青 #22D3EE 對底 10.70:1；紫 #7C5CFF 只有 4.45 故僅用於漸層裝飾，不當一般字色；
   輸入框邊框 #566C90 取 3.31:1，過 UI 元件的 3:1 門檻。 */
:root{
  --bg:#0A0E14; --surface:#131924; --field:#0E141D;
  --text:#E8EDF5; --muted:#9AA7B8; --placeholder:#7E8DA0;
  --line:#232D3D; --border:#566C90;
  --accent:#22D3EE; --accent-ink:#06202A;
  --violet:#7C5CFF; --violet-tx:#A78BFA;
  --ok:#34D399; --err:#FF8A8A;
  --card-bg:#131924;
  --meal-on:rgba(34,211,238,.13); --meal-ring:rgba(34,211,238,.18);
  --radius:14px; --maxw:760px;
  color-scheme:dark;
  --glow1:rgba(124,92,255,.20); --glow2:rgba(34,211,238,.14);
  --accent-line:rgba(34,211,238,.42);
  --ok-bg:rgba(52,211,153,.14); --ok-line:rgba(52,211,153,.5);
  --err-bg:rgba(255,138,138,.12); --err-line:rgba(255,138,138,.5);
}

/* 亮版。對比全部實算過：青 #22D3EE 對白只有 1.86，白底上完全不能當前景色，
   換成 #0B6F86（5.02）；紫 #7C5CFF 對白 4.45 差一點，換 #5B3FD1（7.0）。 */
html[data-mode="light"]{
  --bg:#FFFFFF; --surface:#F5F7FA; --field:#FFFFFF;
  --text:#0F172A; --muted:#4C5B6E; --placeholder:#5C6B7E;
  --line:#DCE3EB; --border:#64748B;
  --accent:#0B6F86; --accent-ink:#FFFFFF;
  --violet:#5B3FD1; --violet-tx:#5B3FD1;
  --ok:#046B4E; --err:#B91C1C;
  --card-bg:#F5F7FA;
  --meal-on:rgba(11,111,134,.10); --meal-ring:rgba(11,111,134,.22);
  --glow1:rgba(91,63,209,.07); --glow2:rgba(11,111,134,.06);
  --accent-line:rgba(11,111,134,.45);
  --ok-bg:rgba(4,107,78,.10); --ok-line:rgba(4,107,78,.45);
  --err-bg:#FDECEC; --err-line:#B91C1C;
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:16px; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 420px at 12% -8%, var(--glow1), transparent 62%),
    radial-gradient(680px 380px at 92% 4%, var(--glow2), transparent 60%);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 20px}

.topbar{position:relative; z-index:1}
.topbar-in{max-width:var(--maxw); margin:0 auto; padding:26px 20px 0}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.brand svg{display:block; flex:none}
.brand b{font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--muted)}
.brand-logo,.brand-sub{display:none}

.hero{padding:34px 0 8px}
.kicker{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  color:var(--accent); border:1px solid var(--accent-line);
  border-radius:999px; padding:5px 13px; margin-bottom:18px;
}
h1{font-size:clamp(30px,7.4vw,50px); font-weight:900; line-height:1.2; letter-spacing:-.01em; margin-bottom:12px}
h1 .sub{
  display:block; font-size:clamp(15px,3.5vw,21px); font-weight:500;
  color:var(--violet-tx); letter-spacing:.02em; margin-top:10px;
}
.lede{font-size:clamp(15px,3.6vw,17.5px); color:var(--muted); max-width:56ch}
.lede strong{color:var(--text); font-weight:700}

.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:26px 0 6px;
}
.fact{background:var(--surface); padding:14px 16px}
.fact dt{font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--muted); margin-bottom:4px}
.fact dd{font-size:16px; font-weight:700; line-height:1.45}
.fact dd small{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:2px}

section{padding:38px 0 0}
h2{font-size:19px; font-weight:900; margin-bottom:6px; display:flex; align-items:center; gap:10px}
h2::before{
  content:""; width:4px; height:18px; border-radius:2px; flex:none;
  background:linear-gradient(180deg,var(--accent),var(--violet));
}
.h2note{font-size:13.5px; color:var(--muted); margin:0 0 18px 14px}

.items{display:grid; gap:12px}
.item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
}
.item.nono{grid-template-columns:1fr}
.item .no{font-size:13px; font-weight:900; color:var(--accent); font-variant-numeric:tabular-nums; padding-top:2px}
.item h3{font-size:16px; font-weight:700; margin-bottom:3px}
.item p{font-size:14.5px; color:var(--muted); line-height:1.7}

.who{display:grid; gap:10px; margin-top:4px}
.who li{list-style:none; font-size:15px; padding-left:26px; position:relative; color:var(--text)}
.who li::before{
  content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px;
  border-radius:2px; background:var(--accent);
}
.who li small{display:block; color:var(--muted); font-size:13.5px}

.formcard{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 20px; margin-top:18px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.f{margin-bottom:16px}
label.lb{display:block; font-size:14px; font-weight:700; margin-bottom:7px}
label.lb .req{color:var(--err); margin-left:3px}
label.lb .hint{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:2px}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%; background:var(--field); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:12px 13px; font-size:16px; font-family:inherit; line-height:1.5;
  transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:104px; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--meal-ring)}
select{
  appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA7B8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.opts{display:flex; flex-wrap:wrap; gap:9px}
.opt{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--field); border:1px solid var(--border); border-radius:999px;
  padding:9px 15px; font-size:14.5px; transition:.15s; user-select:none;
}
.opt input{accent-color:var(--accent); width:16px; height:16px; margin:0; cursor:pointer; flex:none}
.opt:hover{border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent); background:var(--meal-on); font-weight:700}
.opt:focus-within{box-shadow:0 0 0 3px var(--meal-ring)}
.err{display:none; color:var(--err); font-size:13px; margin-top:6px; font-weight:500}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--err)}
.f.bad .err{display:block}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.submit{
  width:100%; background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:12px; padding:16px;
  font-size:17px; font-weight:900; font-family:inherit; letter-spacing:.02em;
  cursor:pointer; transition:.15s; margin-top:6px;
}
.submit:hover:not(:disabled){filter:brightness(1.1)}
.submit:disabled{opacity:.55; cursor:not-allowed}
.submit:focus-visible{outline:3px solid var(--violet-tx); outline-offset:2px}
.formnote{font-size:12.5px; color:var(--muted); text-align:center; margin-top:14px; line-height:1.7}
.banner{display:none; border-radius:10px; padding:12px 14px; font-size:14.5px; margin-bottom:16px; font-weight:500}
.banner.show{display:block}
.banner.bad{background:var(--err-bg); border:1px solid var(--err-line); color:var(--err)}
.cf-turnstile{margin:4px 0 14px}

.closed{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:34px 24px; margin-top:18px; text-align:center;
}
.closed h3{font-size:19px; font-weight:900; margin-bottom:8px}
.closed p{color:var(--muted); font-size:15px}

#done{display:none; padding:52px 0 0; text-align:center}
#done.show{display:block}
.tick{
  width:66px; height:66px; border-radius:50%; margin:0 auto 20px;
  display:grid; place-items:center; background:var(--ok-bg); border:1px solid var(--ok-line);
}
#done h2{justify-content:center; font-size:26px; margin-bottom:10px}
#done h2::before{display:none}
#done .p{color:var(--muted); font-size:15.5px; margin-bottom:22px}
.codebox{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:inline-block; min-width:230px}
.codebox dt{font-size:11.5px; letter-spacing:.1em; color:var(--muted); font-weight:700}
.codebox dd{font-size:30px; font-weight:900; letter-spacing:.1em; color:var(--accent); font-variant-numeric:tabular-nums; margin-top:6px}
.nextsteps{text-align:left; max-width:460px; margin:26px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.nextsteps h3{font-size:14.5px; font-weight:700; margin-bottom:10px}
.nextsteps li{font-size:14px; color:var(--muted); margin-left:18px; line-height:1.85}

footer{padding:46px 0 40px; margin-top:44px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); line-height:1.8}
footer .legal{display:none}

@media(max-width:560px){
  .grid2{grid-template-columns:1fr}
  .formcard{padding:20px 16px}
  .item{grid-template-columns:1fr; gap:6px}
  .item .no{padding-top:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ── 怎麼到現場：地圖／停車／出入口指引照片 ──
   場地不在馬路邊時光給地址找不到，這區塊每一塊都可留空，有填才長出來。 */
.mapwrap{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--card-bg); margin-bottom:12px;
}
.map{display:block; width:100%; height:340px; border:0}
.mapbtns{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px}
.mapbtn{
  flex:1 1 210px; text-align:center; padding:13px 16px; border-radius:10px;
  text-decoration:none; font-weight:700; font-size:14.5px;
  border:1px solid var(--border); color:var(--text); background:var(--card-bg);
}
.mapbtn:hover{border-color:var(--accent)}
.mapbtn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.mapbtn.primary:hover{filter:brightness(1.08)}

/* 從外縣市來：一種一列，多列時彼此對齊 */
.trans{margin-bottom:12px}
.tlist{list-style:none; display:grid; gap:10px}
.tlist li{display:grid; grid-template-columns:5.5em 1fr; gap:12px; font-size:14.5px; line-height:1.65}
.tlist b{font-weight:700; color:var(--text)}
.tlist span{color:var(--muted)}
@media(max-width:480px){ .tlist li{grid-template-columns:1fr; gap:2px} }
.vgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px}
.vgrid.one{grid-template-columns:1fr}   /* 只有一欄有東西時撐滿，不要留半版空白 */
/* 撐滿之後裡面的項目改左右並排（停車場通常兩三個，一個一列太浪費）。
   240px 是「標題＋一行說明＋地圖連結」不會擠的下限，窄螢幕自己掉回一欄。 */
.vgrid.one .vlist{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 22px}
.vcol{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.vh{font-size:15px; font-weight:800; color:var(--text); margin-bottom:11px}
.vlist{list-style:none; display:grid; gap:10px}
.vlist li{font-size:14.5px; padding-left:19px; position:relative; line-height:1.65}
.vlist li::before{
  content:""; position:absolute; left:2px; top:.6em;
  width:7px; height:7px; border-radius:2px; background:var(--accent);
}
.vlist b{display:block; font-weight:700; color:var(--text)}
.vlist span{display:block; color:var(--muted); font-size:13.5px; margin-top:1px}

.shots{margin-bottom:6px}
/* 指引照片（上面畫著箭頭與說明字）縮成小縮圖等於沒放：一律單欄大圖、不裁切 */
.shotgrid{display:grid; grid-template-columns:1fr; gap:16px; max-width:640px; margin-inline:auto}
.shot{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.shotbtn{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in}
.shotbtn:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}
.shotbtn img{display:block; width:100%; height:auto}
.shot figcaption{padding:10px 12px; font-size:13.5px; color:var(--muted); line-height:1.6}

/* 🔴 上面的 *{margin:0} 會把 dialog 預設的 margin:auto 洗掉讓它黏在左上角，要補回來。
   也刻意不設 display——設了會蓋掉未開啟時的 display:none，變成關不掉。 */
#lightbox{
  margin:auto; border:0; padding:0; background:transparent; overflow:visible;
  max-width:min(94vw,1100px); max-height:94vh;
}
#lightbox::backdrop{background:rgba(0,0,0,.86)}
#lb-img{display:block; max-width:100%; max-height:80vh; object-fit:contain; border-radius:10px; margin:0 auto}
#lb-cap{color:#fff; text-align:center; padding:12px 8px 0; font-size:14.5px; line-height:1.6}
#lb-cap:empty{display:none}
.lb-x{
  position:absolute; top:-42px; right:0; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff;
  font-size:22px; line-height:1; cursor:pointer; font-family:inherit;
}
.lb-x:hover{background:rgba(255,255,255,.3)}

@media(max-width:640px){
  .vgrid{grid-template-columns:1fr}
  .map{height:260px}
  .lb-x{top:-40px}
}
@media(max-width:400px){
}

/* ── 點餐：一項一列，價格靠右對齊好比較 ── */
/* 便當與飲料上下兩區分開（小白 2026-08-18 定案：並排時兩邊的清單長度不一樣，
   看起來像同一組；分上下才看得出來是兩件事要各點一個）。
   一區之內的選項本身仍是多欄，不然一頁拉不完。 */
.picks{display:grid; grid-template-columns:1fr; gap:4px}
.pickcol{margin-bottom:0}
.menulink{display:flex; align-items:center; gap:8px; margin:-4px 0 9px; font-size:13.5px}
.menulink a{color:var(--accent); font-weight:700; text-decoration:none; border-bottom:1px solid currentColor}
.meals{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.meal{
  display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; cursor:pointer;
  background:var(--field); border:1px solid var(--border); border-radius:10px;
  padding:11px 14px; font-size:15px; user-select:none; transition:.15s;
}
.meal input{accent-color:var(--accent); width:17px; height:17px; margin:0; cursor:pointer; flex:none}
.meal:hover{border-color:var(--accent)}
.meal:has(input:checked){border-color:var(--accent); background:var(--meal-on); font-weight:700}
.meal:focus-within{box-shadow:0 0 0 3px var(--meal-ring)}
.mname{display:block; min-width:0}
.mname small{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:1px}
.mprice{
  font-variant-numeric:tabular-nums; font-weight:700; color:var(--text);
  white-space:nowrap; font-size:14.5px;
}

/* ── 費用與匯款 ── */
.paycard{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:12px;
}
.paylist{display:grid; gap:9px}
.payrow{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:baseline}
.payrow dt{font-size:13px; color:var(--muted); font-weight:700}
.payrow dd{font-size:15px; color:var(--text); word-break:break-all}
.paycopy{display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap}
.payval{font-weight:700; letter-spacing:.03em; font-variant-numeric:tabular-nums}
.paynote{
  font-size:13.5px; color:var(--muted); line-height:1.7;
  margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
}
.cpbtn{
  background:transparent; border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:4px 11px; font-size:12.5px; font-family:inherit; cursor:pointer; flex:none;
}
.cpbtn:hover{border-color:var(--accent)}

.hp-file{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.upwrap{display:flex; flex-wrap:wrap; gap:11px; align-items:center}
.upbtn{
  background:var(--card-bg); color:var(--text); border:1px dashed var(--border);
  border-radius:10px; padding:12px 18px; font-size:14.5px; font-family:inherit; cursor:pointer;
}
.upbtn:hover{border-color:var(--accent); border-style:solid}
.upstatus{font-size:13.5px; color:var(--muted)}
.upstatus.ok{color:var(--ok); font-weight:700}
.upstatus.bad{color:var(--err); font-weight:700}
.upprev{flex-basis:100%}
.upprev img{
  max-width:200px; max-height:150px; border-radius:9px;
  border:1px solid var(--line); display:block; margin-top:4px;
}

/* ── 報名完成後的資訊卡：當天要用的東西都在這，這是他會截圖存起來的畫面 ── */
.donecard{
  text-align:left; max-width:460px; margin:24px auto 0;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; display:grid; gap:16px;
}
.dinfo{display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start}
.dinfo dt{font-size:13px; font-weight:700; color:var(--muted); padding-top:2px}
.dinfo dd{font-size:15px; line-height:1.65; min-width:0}
.dinfo dd b{display:block; font-weight:700; color:var(--text)}
.dinfo dd > span{display:block; font-size:13.5px; color:var(--muted); margin-top:1px}
.dpark{padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line)}
.dpark:last-child{padding-bottom:0; margin-bottom:0; border-bottom:none}
.dpark span{display:block; font-size:13.5px; color:var(--muted); margin-top:1px}
.dmap{
  display:inline-block; margin-top:6px; font-size:13.5px; font-weight:700;
  color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor;
}
.dmap:hover{opacity:.85}
/* 完成畫面的行事曆入口。選擇器要比 .dinfo dd > span 更精確，不然會被它的 display:block 蓋掉 */
.dinfo dd > span.dcal{display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:2px}
/* 「怎麼到現場」裡每個停車場的地圖連結 */
.vmap{
  display:inline-block; margin-top:4px; font-size:13px; font-weight:700;
  color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor;
}
@media(max-width:420px){
  .dinfo{grid-template-columns:1fr; gap:4px}
  .dinfo dt{padding-top:0}
}