/* 使用說明頁的共用樣式（2026-09-16 從 guide.html 的 inline <style> 抽出來）
   🔴 抽出來的理由：使用說明拆成三頁（如何報名 / UTR 串接 / 補交審核影片），
      三份一模一樣的 inline CSS 一定會漂移，而且漂移不會報錯，只會「其中一頁長得有點不一樣」。
   ⚠️ 這支只給那三頁用，🚫 不要把全站共用的東西加進來（那些歸 pincheng.css）。 */
/* ===== 使用說明頁專屬樣式（只作用於本頁，不動 pincheng.css）===== */
.guide-page { background: var(--bg); }

/* Hero（深色）—— 階段 3-B：改用與 terms／privacy／gallery 同一套 hero 語彙
   （大標＋黃綠短線＋灰副標），讓全站 hero 是同一個系統。
   ⚠️ .gh-inner 的 max-width/padding 刻意與下方 .guide-steps 完全一致（820 / 0 1rem），
      hero 文字才會與步驟卡片切齊同一條左緣。 */
.guide-hero { background: var(--dark, #0a0a0a); color: #fff; padding: var(--s-6) 0 var(--s-5); border-bottom: 1px solid var(--dark-line); }
.gh-inner { max-width: 820px; margin: 0 auto; padding: 0 1rem; }
.guide-hero .eyebrow { display: inline-block; margin-bottom: .55rem; }
.guide-hero .hero-title { font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.08; margin: 0; }
.guide-hero .hero-title::after { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 1.1rem; }
.guide-hero-sub { color: #9a9a9a; font-weight: 500; font-size: clamp(.98rem, 2.4vw, 1.08rem); line-height: 1.75; margin: 1rem 0 0; max-width: 42em; }

/* 領抵免券帶（黃綠底黑字：刻意大面積當警示重點） */
.voucher-band { background: var(--accent); color: #000; }
.vb-inner { max-width: 960px; margin: 0 auto; padding: 1.9rem 1.25rem 2.1rem; }
.vb-tag { display: inline-block; background: #000; color: var(--accent); font-weight: 800; font-size: .8rem; letter-spacing: .04em; padding: .3rem .75rem; border-radius: var(--radius-pill, 999px); }
.vb-title { font-size: clamp(1.3rem, 4.5vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; margin: .8rem 0 .5rem; }
.vb-text { font-size: 1rem; line-height: 1.75; margin: 0 0 1.1rem; max-width: 46em; }
.vb-sub { font-weight: 800; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .5rem; }
.vb-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.vb-list li { background: rgba(0,0,0,.06); border-left: 3px solid #000; padding: .55rem .8rem; border-radius: 8px; font-weight: 600; font-size: .95rem; }
.vb-list li b { font-weight: 800; }
.voucher-band .btn { text-decoration: none; }

/* 快速跳轉列（黏頂，捲動時好用） */
/* ⚠️ 左右內距用 max()：寬螢幕時第一顆 pill 會對齊 820px 內容欄的左緣（與 hero／卡片同一條線），
   窄螢幕自動退回 1rem。不直接包一層 max-width 容器，是因為這排要能水平捲動，
   限寬會讓桌機也提早出現捲動條。 */
.guide-jump { position: sticky; top: 0; z-index: 10; background: #000; display: flex; gap: .4rem; overflow-x: auto; padding: .6rem max(1rem, calc((100vw - 820px) / 2 + 1rem)); -webkit-overflow-scrolling: touch; }
.guide-jump a { flex: 0 0 auto; color: #fff; font-weight: 700; font-size: .82rem; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; white-space: nowrap; }
.guide-jump a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.guide-jump a.jump-voucher { background: var(--accent); color: #000; border-color: var(--accent); }

/* 步驟區 */
.guide-steps { max-width: 820px; margin: 2rem auto 2.5rem; padding: 0 1rem; display: grid; gap: 1.4rem; }
.guide-intro { color: var(--muted, #555); font-size: .95rem; margin: 0 0 -.4rem; }
.step { scroll-margin-top: 68px; padding: 1.6rem 1.5rem 1.7rem; }
/* 步驟標頭：大編號（幾何、等寬數字）＋ 標籤。編號獨立出來，滑動時一眼就能定位到第幾步。
   ⚠️ 編號在白卡上，不可以用 var(--accent)（白底 1.49:1）⇒ 用 --accent-on-light（灰底 4.99:1）。
   ⚠️ 標籤仍保留 .eyebrow class，讓 pincheng.css 的 `.card .eyebrow{color:var(--accent-on-light)}`
      繼續生效 —— 全站 eyebrow 已改白，這 7 個在白卡上就是靠那條覆寫才不會變成白字白底。 */
.step-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.step-num { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--accent-on-light); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.step-no { display: inline-block; font-size: .8rem; margin: 0; }
.step-lead { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.55; margin: 0 0 1.1rem; }
.step ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.step ol li { line-height: 1.75; }
.step ol li::marker { color: var(--accent-on-light); font-weight: 700; }
/* ⚠️ 底色原本是 #f6f7e6 —— 那是「舊主色 #dce600」調出來的淡黃綠，換色時 grep 抓不到。
   改用中性 --surface：品牌規範說「需要階層時用黑白灰的明度變化，不自行引入其他顏色」，
   左側那條黃綠已經足夠標示這是提醒。與 .consent-foot-note（階段 1）同一個處理方式。 */
.step-note { margin: 1.2rem 0 0; padding: .8rem 1rem; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .92rem; line-height: 1.7; color: #333; }
.step-note b { font-weight: 800; }

/* 截圖框位 */
.step-shot { margin: 0 0 1rem; }
.step-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line, #e5e5e5); background: #fafafa; }
.step-shot figcaption { font-size: .8rem; color: #999; margin-top: .4rem; text-align: center; }
.step-shot.shot-lg img { min-height: 220px; }

/* 無截圖步驟的品牌風格圖示（信封 / QR） */
.step-icon { display: flex; justify-content: center; margin: .3rem 0 1.1rem; }
.step-icon svg { width: 96px; height: 96px; }

@media (max-width: 640px) {
  /* ⚠️ 只調上下：水平內距現在歸 .gh-inner 管（與 .guide-steps 對齊）。
     這裡若再寫水平 padding，手機上 hero 會比步驟卡多縮排一層、左緣對不齊。 */
  .guide-hero { padding-top: 2.4rem; padding-bottom: 2.4rem; }
  .step { padding: 1.3rem 1.1rem; }
  .step-icon svg { width: 78px; height: 78px; }
}

/* ── 三份說明之間的切換列（2026-09-16）──
   🔴 2026-09-16 Paul：「現在說明是很多步驟，我要改成 3 個不同說明」
      ⇒ 原本九步一頁拆成三頁：如何報名 / UTR 串接 / 補交審核影片。
   ⚠️ 目前這一頁那格用 aria-current="page" 標，🚫 不要只靠顏色 ——
      只有顏色的話，看不出顏色差別的人不知道自己在哪一頁。 */
.guide-switch { max-width: 820px; margin: 1.6rem auto 0; padding: 0 1rem;
  display: flex; flex-wrap: wrap; gap: .5rem; }
.guide-switch a {
  flex: 1 1 200px; display: block; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--bg); color: var(--ink); font-weight: 800; font-size: .95rem;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.guide-switch a:hover { text-decoration: none; border-color: var(--ink); transform: translateY(-2px); }
.guide-switch a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.guide-switch .gs-sub { display: block; font-weight: 500; font-size: .8rem; color: var(--muted); margin-top: .18rem; }
.guide-switch a[aria-current="page"] .gs-sub { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .guide-switch a:hover { transform: none; } }

/* ══ 步驟卡扇形（2026-09-16）══════════════════════════════════════════
   參考對象：Paul 給的 aardvarkbookclub.com「How it works」——傾斜卡片、一張一個色塊、
   捲到的時候從疊在一起攤開。只參考【手法】，🚫 不抄配色：
   那邊是青／洋紅／黃／紫四個色，我們的品牌只有黑、白、黃綠 ⇒ 三種卡面輪流。

   ⚠️🔴 進場動畫的紀律（與全站 reveal 同一套）：
      初始的「疊在一起」只在 html.js-reveal 之下生效，而那個 class 是 reveal.js
      【確認可用之後】才加的 ⇒ JS 沒跑＝卡片就是攤開的最終樣子，不會是一疊看不懂的東西。
      🚫 不可以把初始狀態寫在沒有 html.js-reveal 前綴的規則上。
   ⚠️🔴 這一區是【目錄】不是內容：詳細步驟仍然在下面的 .step 卡片裡。
      🚫 不要把操作步驟搬進扇形卡 —— 那裡一張只放得下兩行字，
         而使用說明的價值就在「每一步要按哪裡」講得完整。 */
.gf { max-width: 1120px; margin: var(--s-5) auto 0; padding: 0 1rem; }
.gf-head { margin: 0 0 var(--s-3); }
.gf-head h2 { font-size: clamp(1.3rem, 3.6vw, 1.9rem); font-weight: 900; letter-spacing: -.03em; margin: 0; }
.gf-head p { margin: .35rem 0 0; color: var(--muted); font-size: .92rem; }

/* ⚠️ overflow-x 是 auto：步驟多的那一頁（如何報名有七步）一排放不下，要能用手滑。
   ⚠️ 上下留內距：卡片是傾斜的，轉角會超出原本的方框，padding 不夠會被裁掉。 */
.gf-track {
  display: flex; gap: 0; align-items: stretch; justify-content: flex-start;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: var(--s-4) var(--s-2) var(--s-5); margin: 0 calc(var(--s-2) * -1);
  scrollbar-width: none;
}
.gf-track::-webkit-scrollbar { display: none; }

/* ⚠️ 卡片刻意互相疊一點（負的 margin-left）：不疊的話是「幾個方塊並排」，不是扇形。
   ⚠️🔴 疊的量刻意只有 9px，而且文字右邊再留一點內距 ——
      實測 18px 時下一張會蓋掉上一張最後兩三個字（傾斜之後更嚴重），
      🚫 不要為了扇形更明顯而加大，那是拿「看得懂」換「好看」。 */
.gf-card + .gf-card { margin-left: -9px; }
.gf-card .gf-title, .gf-card .gf-text { padding-right: .5rem; }
.gf-card {
  /* 🔴 位移、抬起、縮放、旋轉全部走【變數】，整張卡只有這裡一條 transform。
     原因：進場動畫與 hover 讓位若各寫一條 transform，特異性低的那條會被壓掉，
     而且畫面上看不出原因。改成變數之後就是單純的「誰後面誰贏」。 */
  --shift: 0px; --lift: 0px; --scale: 1; --spin: var(--rot, 0deg);
  flex: 0 0 clamp(198px, 21vw, 246px); scroll-snap-align: center;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  border-radius: 22px; padding: 1.1rem 1.15rem 1.25rem; color: inherit;
  background: var(--bg); border: 1px solid var(--line);
  transform: translateX(var(--shift)) translateY(var(--lift)) rotate(var(--spin)) scale(var(--scale));
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              opacity var(--t-slow) var(--ease-out);
}
/* 三種卡面輪流。⚠️ 黃綠底一律黑字 --accent-ink（白字在黃綠上只有 1.37:1，等同隱形）。 */
.gf-card:nth-child(3n+1) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gf-card:nth-child(3n+2) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ── 滑到一張，旁邊的讓位（2026-09-16）──
   🔴 Paul：「放上去其他卡片會退讓，留出空間給 hover 上的，然後有點放大卡片的感覺」。
   ⚠️ 讓位的量刻意只有 26px：再多會把最外側那張推出可視範圍，
      使用者滑一下就看到卡片「跑掉了」。 */
.gf-card:hover, .gf-card:focus-visible {
  text-decoration: none; z-index: 5;
  --spin: 0deg; --lift: -12px; --scale: 1.07;
  box-shadow: var(--shadow-hover);
}
/* 後面的兄弟往右讓 */
.gf-card:hover ~ .gf-card, .gf-card:focus-visible ~ .gf-card { --shift: 26px; --scale: .97; }
/* ⚠️🔴 前面的兄弟只能靠 :has()（CSS 沒有「前一個兄弟」選擇器）。
   舊瀏覽器不支援 :has() 時整條被忽略 ⇒ 只有右邊讓、左邊不動。
   那是【效果少一半】不是壞掉，所以可以接受，🚫 不要為了它去載 polyfill（GOALS：零 build step）。 */
.gf-card:has(~ .gf-card:hover), .gf-card:has(~ .gf-card:focus-visible) { --shift: -26px; --scale: .97; }
.gf-step { font-size: .76rem; font-weight: 800; letter-spacing: .12em; opacity: .72; }
/* ⚠️ 這裡原本有一個襯底的巨大描邊編號（沿用服務頁 .sv-ghost 的做法），
   實測在卡片這種尺寸裡量不到、看不出來，兩輪調整都沒改善 ⇒ 拿掉。
   🚫 不要再加回來「試試看」：卡片左上角的 STEP N 已經在做同一件事，
      多一層看不見的裝飾只是讓這支檔案更難讀。
   ⚠️ 如果之後要放插畫（參考對象 aardvarkbookclub 每張卡都有一張線稿），
      那要的是【素材】不是 CSS —— 先跟 Paul 要圖。 */
.gf-title { position: relative; margin: 1.9rem 0 .35rem; font-size: 1.02rem; font-weight: 900;
  letter-spacing: -.02em; line-height: 1.3; }
.gf-text { position: relative; margin: 0 0 .9rem; font-size: .84rem; line-height: 1.6; opacity: .82; }
.gf-go { position: relative; margin-top: auto; padding-top: 1.4rem; font-size: .82rem; font-weight: 800; }
.gf-go::after { content: " →"; }

/* ── 捲到才攤開 ──
   ⚠️🔴 前綴 html.js-reveal 不可拿掉：沒有它，JS 沒跑的人會看到一疊全部壓在一起的卡片。
   ⚠️ --pull 由 HTML 端逐張給（往中間收多少），攤開後一律歸零，
      🚫 不可以留著，那會讓版面永遠偏一點。 */
/* ⚠️🔴 用 :not(.is-visible)，🚫 不要寫成「攤開後再設一次 transform」：
   後者特異性比 hover 那幾條高，會把讓位與放大整個吃掉 —— 滑上去完全沒反應，
   而且畫面上看不出原因。用 :not 之後，攤開完這條就不再命中。 */
html.js-reveal .gf[data-reveal]:not(.is-visible) .gf-card {
  opacity: 0;
  --shift: var(--pull, 0px); --spin: calc(var(--rot, 0deg) * 2.2); --scale: .94;
}
/* 依序攤開（CSS 延遲，🚫 不用 JS 逐張排程 —— JS 排程在快速捲動時會排到一半就看不見）。 */
html.js-reveal .gf[data-reveal].is-visible .gf-card { transition-delay: calc(var(--i, 0) * .07s); }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .gf[data-reveal]:not(.is-visible) .gf-card,
  html.js-reveal .gf[data-reveal].is-visible .gf-card {
    opacity: 1; --shift: 0px; --spin: var(--rot, 0deg); --scale: 1;
    transition: none; transition-delay: 0s;
  }
  /* ⚠️ 傾斜保留（那是靜態版面），清掉的是抬起、放大與讓位那些會動的部分。 */
  .gf-card:hover, .gf-card:focus-visible { --lift: 0px; --scale: 1; --spin: var(--rot, 0deg); }
  .gf-card:hover ~ .gf-card, .gf-card:focus-visible ~ .gf-card,
  .gf-card:has(~ .gf-card:hover), .gf-card:has(~ .gf-card:focus-visible) { --shift: 0px; --scale: 1; }
}
@media (max-width: 640px) {
  .gf-card { flex-basis: clamp(180px, 62vw, 220px); }
  }

/* ── 扇形卡上的截圖縮圖（2026-09-16）──
   🔴 Paul：「可不可以 C 但是截圖可以放大？就卡點開可以放大」
   ⇒ 卡片用現成的操作截圖當圖，點卡片就用共用燈箱（/js/lightbox.js）開大圖。
   ⚠️ 縮到卡片大小一定看不清楚，這裡它的工作是【讓人認出是哪一個畫面】，不是讓人讀，
      所以用 object-fit: cover 只取上緣一塊，🚫 不要整張塞進去（那會變成一團灰）。
   ⚠️ 沒有截圖的步驟就不長這一塊（例如「賽事當天報到」），🚫 不要放一張假圖佔位。 */
.gf-art {
  position: relative; display: block; margin: .75rem 0 .1rem;
  border-radius: 12px; overflow: hidden; background: var(--surface);
  aspect-ratio: 16 / 10;
}
.gf-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* ⚠️ 白色卡面上縮圖幾乎沒有邊界（截圖本身多半也是白底）⇒ 補一圈細框。 */
.gf-card:nth-child(3n) .gf-art { box-shadow: inset 0 0 0 1px var(--line); }

/* ══ 步驟彈窗（2026-09-16）══
   🔴 Paul：「點開圖片會出現這個啦，就有 Instruction 還有截圖，現在完全只跳出截圖很奇怪」
   ⇒ 點扇形卡開的是【整張步驟卡】，裡面的截圖再點才進燈箱。
   ⚠️🔴 z-index 要比燈箱低（燈箱 9999）：兩層疊著時燈箱必須在上面。
   ⚠️ 面板自己可以捲：步驟內容有截圖加清單，手機上一定超過一屏。 */
.sm { position: fixed; inset: 0; z-index: 9000; display: none;
  background: rgba(var(--ink-rgb), .72); padding: 2rem 1rem; overflow: auto; }
.sm.is-on { display: block; }
.sm-panel { position: relative; max-width: 720px; margin: 0 auto;
  background: var(--bg); color: var(--ink); border-radius: var(--radius-card);
  padding: 1.6rem 1.5rem 1.2rem; box-shadow: var(--shadow-hover); }
.sm-x { position: absolute; top: .7rem; right: .7rem; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 1rem; line-height: 1; cursor: pointer; z-index: 1; }
/* ⚠️🔴 複製進來的節點【保留 .card】（拿掉會讓步驟標題變白字白底，見 step-modal.js 的註解），
   所以外框與陰影在這裡壓掉，版面才不會多一層卡片。 */
.sm-body .step, .sm-body .card { padding: 0; box-shadow: none; border: 0; background: none; }
.sm-foot { display: flex; gap: .6rem; justify-content: space-between; margin-top: 1.2rem;
  padding-top: 1rem; border-top: 1px solid var(--line); }
.sm-foot button { flex: 0 0 auto; }
@media (max-width: 640px) {
  .sm { padding: 1rem .7rem; }
  .sm-panel { padding: 1.3rem 1.1rem 1rem; }
}