/* 問問另一邊：樣式複製自六都問市長（2026-10-09），之後各改各的。 */
:root {
  --dcard: #006aa6; --sky: #006aa6; --sky-deep: #00507d; --sky-soft: #e6f0f7;
  --orange: #f06a1c; --sun: #ffc22e; --paper: #fffaf3; --ink: #1b1d2e; --muted: #555a73;
  --ok: #0b5a8a; --err: #b42318;
  --display: "Huninn", "Noto Sans TC", system-ui, sans-serif;
  --body: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --wrap: 1000px; /* 內容最大寬度：KV 與各區塊統一，改這一顆即可 */
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-anchor: none; }   /* 關掉瀏覽器自動錨定（iOS Safari 沒有），問答牆變高度時由 app.js 自己補捲動，各瀏覽器一致 */
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.65; padding-bottom: env(safe-area-inset-bottom, 0px); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }

/* hidden 屬性一律生效：.btn 等 class 自帶 display 會蓋過瀏覽器預設的 [hidden]{display:none}（圖卡視窗的「分享圖卡」因此在所有平台都看得到） */
[hidden] { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--orange); color: var(--ink); font-family: var(--display); font-size: 19px; padding: 8px 20px; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; text-decoration: none; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { background: #d8d8de; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--ink); }
.btn.ghost { background: #fff; }
.btn.small { font-size: 15px; padding: 4px 14px; box-shadow: 4px 4px 0 var(--ink); }
.btn.wide { width: 100%; }

.stage { background: var(--sky); color: #fff; border-bottom: 2px solid var(--ink); overflow: hidden; padding-top: env(safe-area-inset-top, 0px); }
.stage .wrap { padding-block: 20px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 18px; }
.brand .dlogo { height: 24px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.kicker { display: inline-block; margin-top: 16px; background: var(--sun); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 0 12px; font-weight: 900; font-size: 13px; letter-spacing: .04em; }
.hero-title { font-size: clamp(38px, 11vw, 64px); line-height: 1.1; margin-top: 10px; color: #fff; text-shadow: 3px 3px 0 var(--ink); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.hero-title em { font-style: normal; color: var(--sun); }
.lead { margin: 12px 0 0; font-weight: 500; font-size: 15px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.btn.hero-amb { background: var(--sun); }
.cta-row .short { display: none; }
.cta-row .btn { gap: 0; }
/* 手機：三顆按鈕擠在同一行，文字縮短 */
@media (max-width: 480px) {
  .cta-row { flex-wrap: nowrap; gap: 8px; }
  .cta-row .btn { flex: 1 1 auto; font-size: 17px; padding: 8px 10px; white-space: nowrap; }
  .cta-row .long { display: none; }
  .cta-row .short { display: inline; }
}
#street { display: block; width: 100%; height: 230px; margin-top: 4px; }

.cities { background: var(--sun); border-bottom: 2px solid var(--ink); }   /* 先不吸頂，跟著頁面捲走 */
.cities .wrap { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; align-items: center; }
@media (min-width: 900px) { .cities .wrap { justify-content: center; } } /* 網頁：整組置中 */
.city-row { display: contents; } /* 網頁：chips 跟標題同一排 */
@media (max-width: 899px) { /* 手機：標題獨立一行，chips 一行可橫滑 */
  .cities .wrap { flex-direction: column; align-items: flex-start; overflow-x: visible; padding-block: 12px; }
  .city-row { display: flex; gap: 8px; box-sizing: border-box; width: calc(100% + 40px); margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; } /* 滑動範圍延伸到螢幕邊緣，起點仍對齊 20 邊距 */
  .city-row::-webkit-scrollbar { display: none; }
  /* 「我來回答」候選人 chips 也跟都市一樣：一行橫滑、延伸到螢幕邊緣 */
  #toBar { flex-wrap: nowrap; width: calc(100% + 40px); margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
  #toBar::-webkit-scrollbar { display: none; }
  #toBar .tag { flex: 0 0 auto; white-space: nowrap; }
  /* 手機：都市、候選人 chips 統一高 36（含框線） */
  .city-btn, #toBar .tag { height: 36px; display: inline-flex; align-items: center; padding-block: 0; }
}
.ask-where { flex: 0 0 auto; font-weight: 900; font-size: 13px; }
.city-btn { flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 999px; background: #fff; padding: 2px 14px; font-family: var(--display); font-size: 17px; cursor: pointer; }
.city-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

.block { padding-block: 64px; scroll-margin-top: 60px; }
/* 段落分界：一條細黑線（每個交界只有一條，不會疊成粗線） */
.block + .block { border-top: 1px solid var(--ink); }
@media (max-width: 640px) { .block { padding-block: 48px; } }
.block.alt { background: var(--sky-soft); }
.block.ask { background: var(--orange); }
.sec-h { display: inline-block; color: var(--ink); }
.sec-kicker { margin: 0 0 2px; font-family: var(--display); font-size: 18px; color: #f06a1c; }
.sec-p { color: var(--muted); margin: 10px 0 16px; font-size: 14px; }
.fine { font-size: 13px; color: var(--muted); }

.bubbles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag { border: 2px solid var(--ink); border-radius: 999px; background: #fff; padding: 0 10px; cursor: pointer; font-weight: 700; font-size: 13px; }
.tag[aria-pressed="true"] { background: var(--ink); color: #fff; }
.qlist { display: grid; gap: 16px; }
.q { display: block; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.q .meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 700; }
.q .meta span { border-radius: 6px; padding: 0 8px; background: var(--sky-soft); }
.q .meta .tg { background: var(--sky); color: #fff; }
.q p { margin: 6px 0 0; overflow-wrap: anywhere; }
.q .foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 8px; }
.empty { border: 2px dashed var(--ink); border-radius: 12px; padding: 24px 16px; text-align: center; background: #fff; }
.empty p { color: var(--muted); margin: 6px 0 14px; }

.cand { background: #fff; border: 2px solid var(--ink); border-radius: 12px; }
.cand header { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); border-radius: 10px 10px 0 0; }
.avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: 19px; background: #fff; }
.cand h3 { font-size: 21px; line-height: 1.2; }
.cand .sub { font-size: 12px; color: var(--muted); }
.pill { display: inline-block; font-size: 12px; font-weight: 700; border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 8px; margin-right: 4px; background: #fff; }
.cand ul { list-style: none; margin: 0; padding: 10px 14px; display: grid; gap: 6px; }
.cand li { display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 14px; }
.cand li a.src { font-size: 12px; color: var(--sky-deep); font-weight: 700; white-space: nowrap; }
.cand .none { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--muted); }

.card { background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); padding: 20px; position: relative; }
/* 發問卡左上凸出的資料夾頁籤（＃我想問／對其他的支持者提問） */
/* 發問卡標頭（Figma 29407-28828）：取代原本凸出的文件夾頁籤，直接放在卡片裡 */
.ask-head { display: grid; gap: 4px; padding-bottom: 24px; }
.ask-head .ask-kicker { font-family: var(--display); font-size: 18px; line-height: 1.2; color: #2f9e67; }
.ask-head .ask-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 6vw, 32px); line-height: 1.18; color: var(--ink); }
.card h2 { font-size: 30px; }
.card .lead2 { color: var(--muted); margin: 4px 0 14px; font-size: 15px; }
.steps { display: flex; gap: 4px; margin-bottom: 14px; }
.steps i { flex: 1; height: 6px; border-radius: 3px; background: #0001; border: 1px solid var(--ink); }
.steps i.on { background: var(--ink); }
.card .ask-step { font-size: 18px; } /* 要蓋過 .card h2 的 30px */
.card .flow-h { font-size: 28px; } /* 網頁版／擋下／結束時的「首投族在等你的答案」 */
#flow { padding: 16px; } /* 發問卡內距 16（其他 .card 維持 20） */
.gate { display: flex; gap: 10px; border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; background: var(--sky-soft); margin-bottom: 14px; font-size: 14px; }
.gate b { display: block; font-size: 15px; }
.gate.ok { background: #eaf6ee; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
label { font-weight: 700; font-size: 14px; }
select, textarea, input[type="tel"], input[type="text"] { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; background: var(--paper); width: 100%; }
/* 下拉選單：拿掉系統箭頭（會貼著右框），改自己畫的 ∨，離右邊 16 */
select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231b1d2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 8px; }
textarea { min-height: 96px; resize: vertical; font-size: 17px; }
textarea.one { min-height: 0; height: auto; resize: none; field-sizing: content; max-height: 120px; }
textarea.tall { min-height: 132px; }
.hint { margin: 2px 0 0; text-align: right; }
.hint.over { color: #d0341f; }
#pvBody { margin-top: 4px; }
.count { font-size: 12px; color: var(--muted); text-align: right; }
.count.over { color: var(--err); font-weight: 700; }
.preview { border: 2px dashed var(--ink); border-radius: 12px; padding: 12px; background: var(--paper); margin-bottom: 14px; font-size: 14px; }
.preview .pv-title { font-weight: 700; font-size: 16px; margin-top: 4px; overflow-wrap: anywhere; }
.preview .pv-title.is-empty { color: #a0a3b1; }   /* 預覽還沒輸入問題：灰字（接近輸入框 placeholder） */
.preview .pv-topics { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.preview .pv-topics span { font-size: 12px; font-weight: 700; background: var(--sky-soft); border-radius: 999px; padding: 0 8px; }
.preview .pv-body { margin: 0; font-family: var(--body); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.preview .who { font-size: 12px; font-weight: 700; color: var(--muted); }
.msg { min-height: 1.4em; color: var(--err); font-weight: 700; font-size: 14px; margin: 8px 0 0; }
.choices { display: grid; gap: 8px; margin-bottom: 14px; }
.choice { display: flex; gap: 10px; align-items: center; border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; }
.choice:has(input:checked) { background: var(--sun); }
.choice input { accent-color: var(--ink); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.ticket { border: 3px dashed var(--ink); border-radius: 14px; padding: 14px; background: var(--sun); margin-bottom: 14px; }
.ticket .tno { font-family: var(--display); font-size: 30px; }

/* 對話大使：三層字級 — 段落標題 28 / 步驟 16 粗 / 說明 13 */
.amb-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.amb-head p { margin: 0; font-family: var(--display); font-size: 22px; }
.amb-head mark { background: var(--sun); color: var(--ink); padding: 0 6px; border-radius: 6px; }
.amb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 18px; margin-bottom: 20px; font-size: 15px; font-weight: 700; width: fit-content; max-width: 100%; }
.amb-bar .d { color: var(--sun); }
.amb-bar .st { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; color: #c9cde6; }
.amb-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa0b8; }
.amb-bar .dot-signup, .amb-bar .dot-live { background: #4ade80; }
.amb-side { display: grid; gap: 18px; align-content: start; }
.amb-crowd { width: 100%; max-width: 420px; height: auto; }
.amb-steps2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.amb-steps2 li { display: flex; gap: 12px; align-items: center; }
.amb-steps2 .ic { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); display: grid; place-items: center; }
.amb-steps2 .ic svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.amb-steps2 b { display: block; font-size: 16px; }
.amb-steps2 small { font-size: 13px; color: var(--muted); }
.amb-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.amb-pills li { font-size: 12px; font-weight: 700; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; }
.amb-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 22px; }
@media (max-width: 640px) { .amb-grid { grid-template-columns: 1fr; } }
.chat { margin: 0; background: #fff; border: 3px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 6px 6px 0 var(--ink); max-width: 320px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; background: var(--dcard); color: #fff; padding: 10px 14px; font-size: 14px; }
.chat-timer { background: var(--sun); color: var(--ink); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.chat-body { padding: 12px; display: grid; gap: 10px; background: var(--paper); }
.chat-sys { margin: 0; justify-self: center; text-align: center; font-size: 12px; font-weight: 700; background: var(--sky-soft); border-radius: 10px; padding: 6px 10px; }
/* 配對成功時聊天室最上方的活動卡片（系統不代發訊息，第一句由用戶自己說） */
.chat-card { display: grid; gap: 4px; justify-items: center; text-align: center; background: var(--sun); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 10px; font-size: 12px; }
.chat-card b { font-size: 13px; }
.chat-card span { background: #fff; border: 1px solid var(--ink); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.msg-l, .msg-r { display: grid; gap: 2px; max-width: 80%; }
.msg-r { justify-self: end; text-align: right; }
.msg-l small, .msg-r small { font-size: 11px; color: var(--muted); font-weight: 700; }
.msg-l p, .msg-r p { margin: 0; padding: 8px 12px; border-radius: 14px; font-size: 14px; text-align: left; border: 2px solid var(--ink); }
.msg-l p { background: #fff; border-top-left-radius: 4px; }
.msg-r p { background: var(--ink); color: #fff; border-top-right-radius: 4px; }
.chat figcaption { font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0 8px; background: var(--paper); }
.amb-h3 { font-size: 20px; margin-bottom: 10px; }
#ambassadors .btn { margin-top: 6px; }
.amb { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .amb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.amb div { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; display: grid; }
.amb small { white-space: nowrap; }
.amb b { display: block; font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; }
.amb small { color: var(--muted); }

/* 頁尾（Figma 29407-29002）：淺灰底黑字，上下 72；標題 Huninn，說明行 80% 不透明 */
.site-foot { background: #efefef; color: #000; font-size: 13px; padding-block: 72px; }
.site-foot p { margin: 0 0 8px; }
.site-foot .foot-note { opacity: .8; }
.foot-h { margin: 0 0 8px; font-family: var(--display); font-size: inherit; font-weight: 400; }
.foot-rules { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.foot-rules a { color: inherit; }
.foot-sub { margin: 14px 0 4px; font-family: var(--display); font-size: var(--fs-small); font-weight: 400; line-height: 1.65; }
.foot-p { margin: 0; }
.foot-note { opacity: .8; }
/* App 內自製關閉鈕：原生叉叉顏色固定，疊在深藍 KV、插畫或彈窗上會看不清，所以請 bridge 藏掉原生鈕，自己畫一顆白底黑框黑影的圓鈕，任何底色都看得到。
   位置對齊原生鈕（左上、狀態列下，置中在 44px app bar 內）；z-index 高於彈窗（50），跟原生鈕一樣永遠按得到 */
.app-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 12px; z-index: 60; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.app-close:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 700; z-index: 50; width: max-content; max-width: calc(100% - 32px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.nb { display: inline-block; }

/* 候選人：精簡版 */
.nm { display: grid; line-height: 1.25; }
.nm b { font-size: 17px; }
.nm small { font-size: 12px; color: var(--muted); }
.cnt { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--sky-deep); }
.src { font-size: 12px; color: var(--sky-deep); font-weight: 700; white-space: nowrap; }
.avatar { flex: 0 0 34px; height: 34px; font-size: 16px; }

/* 線上集合時間：放在小人插圖上方，像他們頭上的對話框 */
.amb-cta { justify-self: start; }
/* 「來破圈吧」：按鈕不動，只有文字前的箭頭每隔幾秒往右推，提示可以點 */
.amb-cta::before { content: "→"; margin-right: 8px; display: inline-block; animation: ctaArrow 2.4s ease-in-out infinite; }
.amb-cta:hover::before, .amb-cta:focus-visible::before { animation: none; transform: translateX(4px); }
@keyframes ctaArrow { 0%, 55%, 100% { transform: none; } 65% { transform: translateX(6px); } 75% { transform: none; } 85% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .amb-cta::before { animation: none; } }

/* 重要段落的交界：用一排站在邊上的小人取代黑線（換你問了＝舉手；來破圈＝兩兩聊天） */
#ask, #ambassadors { position: relative; border-top: 0; }
.edge-crowd { position: absolute; left: 0; right: 0; top: -50px; width: 100%; height: 68px; pointer-events: none; overflow: visible; }
.edge-crowd .pop { animation: edgePop 2.6s ease-in-out infinite; }
@keyframes edgePop { 0%, 55%, 100% { transform: translateY(0); } 70% { transform: translateY(-5px); } 82% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .edge-crowd .pop { animation: none; } }

/* 換你問了的手從提問牆底部伸出來：留出手的高度，別蓋到上面的卡片 */
#wall { padding-bottom: 88px; }

/* 來破圈：滿版黃色橫幅當段落開頭（色塊撐滿畫面寬、文字對齊內容欄；上下粗黑線、底部橘色帶） */
main { overflow-x: clip; }
#ambassadors { padding-top: 0; }
.banner { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); border: 3px solid var(--ink); border-width: 3px 0; padding-block: 28px 38px; margin-bottom: 26px; }
.banner .tag { display: inline-block; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 1px 10px; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.banner h2 { margin-top: 10px; font-size: clamp(32px, 6vw, 56px); line-height: 1.15; color: var(--ink); text-shadow: 3px 3px 0 #fff; }
.b-sun { background: var(--sun); box-shadow: inset 0 -10px 0 var(--orange); }
@media (max-width: 640px) { .banner { padding-block: 22px 32px; } }
/* 示意提問：跟真提問同一張卡，只多一個「示意」小標、不能點 */
.q .meta .ex { background: var(--sun); }
.demo-note { margin: 0 0 4px; }

/* 揪朋友來破圈 */
.share-card { margin-top: 28px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; padding: 18px; box-shadow: 4px 4px 0 var(--ink); }
.share-card p { margin: 6px 0 14px; color: var(--muted); }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btns .btn { font-size: 16px; padding: 6px 14px; }
.share-line { background: #06c755; color: #fff; }
.story-modal { position: fixed; inset: 0; z-index: 50; background: rgba(27, 29, 46, .72); display: grid; place-items: center; padding: 16px; }
.story-box { background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 14px; max-width: 360px; width: 100%; display: grid; gap: 10px; justify-items: center; }
.story-box img { width: 100%; max-height: 64vh; object-fit: contain; border-radius: 10px; border: 2px solid var(--ink); }
.story-modal[hidden] { display: none; }
/* 揪朋友：左邊（手機在上）放圖卡預覽，像一張手機限動 */
.share-card { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
.share-body { min-width: 0; }
.share-preview { padding: 0; border: 0; background: none; cursor: zoom-in; justify-self: center; }
.share-preview img { display: block; width: 200px; aspect-ratio: 9 / 16; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-3deg); background: var(--sun); }
@media (max-width: 640px) {
  .share-card { grid-template-columns: 1fr; text-align: center; }
  .share-preview img { width: 168px; }
  .share-btns { justify-content: center; }
}
/* 測試站專用：網頁版／App 版切換 */
.view-toggle { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: #fff; }
.view-toggle button { border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); padding: 2px 12px; font-weight: 700; cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* 分享卡留白：圖卡和文字之間拉開、卡片內距加大、文字欄限寬 */
.share-card { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding: 36px 44px; }
.share-preview img { width: 220px; }
.share-body { max-width: 440px; display: grid; gap: 14px; }
.share-body .amb-h3 { font-size: 26px; margin: 0; }
.share-body p { margin: 0; line-height: 1.8; }
.share-btns { gap: 12px; margin-top: 8px; }
@media (max-width: 640px) {
  .share-card { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; }
  .share-preview img { width: 180px; }
  .share-body { max-width: none; justify-items: center; }
}
/* 破圈對話登記視窗 */
.dlg-box { position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; padding: 22px 20px; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 6px 6px 0 var(--ink); }
.dlg-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink); }
/* 關閉鈕佔右上 40×30：第一列內容（步驟條、標題、提示）右側讓開，不然步驟條第二段會穿過叉叉（ClickUp z8udzkn7kw） */
#dlgFlow > :first-child { margin-right: 40px; }
.dlg-box .view-toggle { color: var(--ink); }
.dlg-box h2 { font-size: 26px; margin-bottom: 6px; }

/* ===== 問問另一邊 ===== */
#how { padding-block: 60px 84px; border-bottom: 2px solid var(--ink); }
@media (max-width: 640px) { #how { padding-block: 40px 64px; } }
.how { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .how { grid-template-columns: 1fr; } }
.how li { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px 16px; }
.how .htxt { flex: 1; }
.how strong { display: block; font-size: 18px; }
.how small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.how .btn { margin-top: 4px; font-size: 17px; padding: 8px 18px; }
@media (max-width: 640px) { /* 手機：文字在左、按鈕在右 */
  .how li { flex-direction: row; align-items: center; gap: 12px; padding: 16px; }
  .how .htxt { min-width: 0; }
  .how .btn { flex: 0 0 auto; margin-top: 0; white-space: nowrap; font-size: 15px; padding: 6px 12px; }
}
.btn.green { background: #69ca9a; }
.btn.sun { background: var(--sun); }
/* 外緣量（含 2px 框）：上 18、左右 16、下 22 → padding 各扣 2；列距 8、標題→內文 4（.qa-text） */
.qa { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 16px 14px 20px; display: grid; gap: 8px; }
/* 卡片（Figma 29407-28815）：右上 Dcard icon；標題下接灰色內文（內文資料待接，先用標題佔位） */
.qa-logo { margin-left: auto; width: 21px; height: auto; flex: none; }
.qa-verb { font-style: normal; font-size: 12px; font-weight: 600; }
.qa-text { display: grid; gap: 4px; margin-bottom: 4px; } /* 內文→按鈕 = 列距 8 + 4 = 12 */
.qa-ex { margin: 0; font-size: 13px; line-height: 1.65; color: #555a73; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.qa-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.qa-route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.qa-route span { border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 8px; background: var(--sky-soft); }
.qa-route .to { background: #ffe88d; }
.qa-route i { font-style: normal; }
.qa-q { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.qa-a { border-left: 4px solid var(--sun); padding: 2px 0 2px 10px; }
.qa-a small { font-size: 11px; font-weight: 700; color: var(--muted); }
.qa-a p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.qa-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sky-deep); }
.qa-more .qa-a { margin-top: 8px; }
.qa-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.preview .qa-route { margin-top: 6px; }
.dlg-modal[hidden] { display: none; }

/* 登記人數：按鈕正下方一行社群證明（2026-10-12） */
.amb-proof { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; font-size: 14px; color: var(--muted); }
.amb-proof svg { flex: none; }
.amb-proof b { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.amb-proof .ex { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); border: 1.5px dashed var(--ink); border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: 2px; }
/* 人數併進「找你勇敢的朋友來吧」分享卡，當卡片開頭（2026-10-12） */
.amb-proof.big { margin: 0 0 12px; flex-wrap: wrap; gap: 6px 12px; font-size: 16px; color: var(--ink); }
.amb-proof.big svg { width: 104px; height: auto; }
.amb-proof.big b { font-size: 40px; line-height: 1; margin: 0 2px; }
.amb-proof .ex { white-space: nowrap; }
.amb-proof.big span { min-width: 0; }
@media (max-width: 640px) { .amb-proof.big { justify-content: center; text-align: center; } }
.amb-proof.big span { flex-basis: 100%; }
@media (max-width: 640px) { .amb-proof.big span { flex-basis: auto; } }

/* 首投族版：主標下的一句數據 */
.hero-stat { display: inline-block; margin: 10px 0 0; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 13px; font-weight: 700; }

/* 等你回答的題目清單（首投族版） */
.wait { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.wait li { border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 10px 12px; display: grid; gap: 6px; }
.wait .who { justify-self: start; font-size: 12px; font-weight: 700; border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 8px; background: var(--sky-soft); }
.wait .who.fv { background: var(--sun); font-weight: 900; }
.wait p { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.wait .btn { justify-self: end; }
.sep { border: 0; border-top: 2px dashed var(--line, #c9d4de); margin: 18px 0; }
.ask-h { margin: 0; }

.hero-en { margin: 8px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.85); }
/* 首投族版主視覺：三排人群＋多行對話框，畫布加高 */
#street { height: 250px; margin-top: 0; }
.stage .cta-row { margin-bottom: 4px; }
.chip-rule { margin: 0; }
#toRules { margin: -6px 0 14px; }   /* chips 下 8px（跟原本在列內一樣），下面接問答 14px */

/* ===== 本機 KV 版：依出圖大師主視覺重構首屏（字是真實文字，人群是無字插畫）；首屏高度對齊原版 ===== */
.stage.kv { background: #2485de; padding-bottom: 0; position: relative; }
/* 右上角放大的 Dcard 品牌（白色） */
.kv-logo { height: 24px; width: auto; }
@media (min-width: 900px) { .kv-logo { position: absolute; height: 96px; top: 65px; right: calc(var(--crowdRight) + var(--crowdW) / 2 - 113px); z-index: 0; } }
.kv .wrap.kv-grid { padding-bottom: 0; position: relative; }
.kv .kicker { margin-top: 8px; }
/* #第一票的力量 傾斜對齊下方的「首投族」黃標，擺在它正上方 */
.kv .brand { width: fit-content; }
/* 標語做成黃底標籤（原本 年輕人 的標籤樣式移到這裡） */
.kv .brand span { background: var(--sun); color: var(--ink); font-family: "Noto Sans TC", sans-serif; font-weight: 750; font-size: 24px; line-height: 1.2; padding: 1px 10px 3px; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); }
.kv-title { margin: 2px 0 0; display: grid; gap: 4px; justify-items: start; font-family: "Noto Sans TC", sans-serif; font-weight: 750; line-height: 1.05; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; filter: drop-shadow(2px 2px 0 var(--ink)); }   /* 外框 1px（stroke 一半壓在字底下）＋ 2px 硬陰影；text-shadow 遇到 stroke 會變空心，改用 drop-shadow 投整個字形 */
.kv-l1 { font-size: clamp(28px, 8vw, 49px); letter-spacing: .02em; }   /* 桌機 49 */
.kv-l2 { font-size: clamp(44px, 12.5vw, 74px); letter-spacing: .02em; }
.kv-l2 em { font-style: normal; color: var(--sun); }
.kv-tag { display: inline-block; background: var(--sun); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; padding: .02em .2em .06em; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-4deg); }
.kv .lead { margin-top: 12px; font-family: var(--display); }
.kv .cta-row { margin-top: 14px; }
.kv-crowd { position: relative; height: 160px; margin: 6px -20px 0; background: url("./header-crowd.png") center bottom / contain no-repeat; }
.kv-bubble { position: absolute; max-width: min(80%, 340px); padding: 6px 11px; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
  font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.kv-bubble b { display: block; font-size: 11px; font-weight: 900; color: var(--muted); }
.kv-bubble.on { opacity: 1; transform: none; }
.kv-bubble.q { background: #fff; left: 16px; top: 0; }
.kv-bubble.a { background: var(--sun); right: 16px; top: 46px; }
.kv-bubble.q b { color: var(--sky-deep); }
/* ===== 手機版首屏（依 Figma node 29520-24069）：logo＋#標語置左一行、大標／副標靠左、人群滿版、泡泡放右上角 ===== */
@media (max-width: 899px) {
  .kv .wrap.kv-grid { display: flex; flex-direction: column; align-items: stretch; }
  /* App 內頂端固定一條 44px 白色 app bar（接原生白色狀態列，下緣 2px 黑線），原生黑叉叉一直浮在上面，捲動時內容從 bar 底下過，不會跟叉叉疊在一起 */
  .in-app { --appBar: calc(env(safe-area-inset-top, 0px) + 44px); scroll-padding-top: var(--appBar); }
  .in-app body::before { content: "D一票的力量"; position: fixed; top: 0; left: 0; right: 0; box-sizing: border-box; height: var(--appBar); padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 2px solid var(--ink); z-index: 40;
    color: var(--ink); font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: 17px; line-height: 1; }   /* app bar 置中標題 */
  .in-app .stage.kv { padding-top: var(--appBar); }
  .in-app .story-modal { padding-top: calc(var(--appBar) + 16px); }
  .kv-topbar { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 13px; }
  .brand-m { box-sizing: border-box; height: 20px; display: inline-flex; align-items: center; padding: 0 5px; background: var(--sun); color: var(--ink); font-family: "Noto Sans TC", sans-serif; font-weight: 750; font-size: 12px; line-height: 1; border: 1.5px solid var(--ink); border-radius: 5px; box-shadow: 2px 2px 0 var(--ink); transform: translateY(1px); } /* 黃標籤，高 20，比和 logo（24）置中再低 1 */
  .kv-logo { display: block; filter: brightness(0) invert(1); }   /* 手機 logo 純白（桌機維持 #CDE7FF） */
  .kv .brand { display: none; }                 /* 桌機傾斜標語在手機隱藏，改用 .brand-m */
  .kv .lead { font-size: 14px; }
  .kv-l1 { font-size: clamp(29px, calc(8vw + 1px), 51px); }   /* 手機第一行比原本 +1 */
  /* 人群圖置中，超出螢幕的左右兩側由 header 裁掉（不產生橫向捲動） */
  .stage.kv { overflow-x: clip; }
  /* 寬度跟螢幕等比例：375 寬時 400（= 106.67vw），螢幕變寬人群跟著變大；高度照圖片比例 */
  .kv-crowd { position: static; align-self: center; flex-shrink: 0; width: 106.67vw; max-width: none; height: auto; aspect-ratio: 400 / 154; margin: 10px 0 0; background-size: 100% auto; background-position: center bottom; }
  .kv-bubble { display: none; }                 /* 手機版泡泡拿掉 */
}
/* 電腦版：左文字、右插畫並排，首屏不再往下長 */
@media (min-width: 900px) {
  /* 文字留左半；人群貼齊 Figma：右半、腰部以上的大圖，腿部被 header 下緣裁掉 */
  /* 右側群組共用幾何：人群、logo、泡泡都從這組變數算（改一處全部一起動） */
  /* --crowdRight：寬螢幕人群往內容區右緣外凸 125px；螢幕變窄時整組往左收，右緣永遠離視窗邊 ≥ 約 20px，不被裁切
     （50% − 50vw = 內容區到視窗邊的距離；+28px = 20px 留邊 + 8px 抵捲軸） */
  .stage.kv { --crowdW: min(60vw, 700px); --crowdRight: calc(max(-125px, calc(50% - 50vw + 28px)) + 50px); }   /* 整組（人群、logo、泡泡）往左 50 */
  /* 桌機：topbar 消隱，logo 恢復絕對定位壓在人群上；手機置中標語隱藏 */
  .kv-topbar { display: contents; }
  .brand-m { display: none; }
  .kv-title { margin-top: 16px; }   /* 黃標籤下到標題 */
  /* 內容整組貼底：標題與人群同為「貼底」基準，改 min-height 時整組一起升降、相對位置不變 */
  .kv .wrap.kv-grid { max-width: var(--wrap); display: flex; align-items: flex-end; min-height: 373px; padding-block: 0; }
  .kv-text { max-width: 400px; padding: 20px 0 0; position: relative; z-index: 2; align-self: center; }
  /* 副標不壓到人群：右緣停在人群最左邊的人（圖寬 5.3% 處）前 16px。
     --gw 估內容區寬（扣 15px 捲軸）、--crR 同 --crowdRight 的算法；36px = 內距 20 + 間距 16 */
  .kv .lead { --gw: min(calc(100vw - 15px), 1000px); --crR: calc(max(-125px, calc(var(--gw) / 2 - 50vw + 28px)) + 50px);
    max-width: min(100%, calc(var(--gw) - var(--crR) - var(--crowdW) * 0.947 - 36px)); }
  .kv-crowd { position: absolute; right: var(--crowdRight); bottom: 0; left: auto; top: auto; width: var(--crowdW); height: 92%; margin: 0; background: url("./header-crowd.png") right bottom / contain no-repeat; z-index: 1; }
  .kv-crowd::before { content: none; }
  .kv-bubble { z-index: 3; max-width: min(42%, 240px); }
  /* 泡泡以 logo 為基準：logo 中心在人群中心偏左 15px、寬 256px（半寬 128）。
     左泡泡右緣 = logo 左緣 − 23px（往左長）；右泡泡左緣 = logo 右緣 − 2px（往右長）。數值沿用 1358 定稿畫面 */
  .kv-bubble.q { left: auto; right: calc(50% + 15px + 128px + 23px); top: 69px; }
  .kv-bubble.a { right: auto; left: calc(50% - 15px + 128px - 2px); top: 69px; }
}
@media (prefers-reduced-motion: reduce) { .kv-bubble { transition: none; } }
/* KV 版：其他段落的小人也換成同一張人群插畫 */
.faces { display: inline-flex; flex-direction: row-reverse; }
.face { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); margin-left: -8px; background: #0557a1 url("./crowd.jpg") no-repeat; background-size: 600px auto; }
.f1 { background-position: -60px -187px; } .f2 { background-position: -128px -198px; } .f3 { background-position: -188px -187px; } .f4 { background-position: -329px -177px; }
.amb-proof.big .faces .face { width: 48px; height: 48px; background-size: 960px auto; margin-left: -12px; }
.amb-proof.big .f1 { background-position: -96px -300px; } .amb-proof.big .f2 { background-position: -205px -318px; } .amb-proof.big .f3 { background-position: -300px -300px; } .amb-proof.big .f4 { background-position: -526px -284px; }
.amb-crowd-img { width: 100%; max-width: 460px; aspect-ratio: 16 / 9; border-radius: 14px; background: #fefbf5 url("./chat.jpg?v=2") center / cover no-repeat; }
.block.ask { padding-top: 0; }
.block.ask { background: #ea6621; } /* 跟橘底人群插畫同色，插畫直接長在橘底上 */
/* 發問區人群（Figma 29449-12341）：去背、腰部以上，820 寬置中，下緣直接貼卡片（無間距） */
.edge-kv { width: min(calc(100% - 40px), 820px); aspect-ratio: 10 / 3; margin: 0 auto; background: url("./ask-crowd.png?v=20261022cd") center bottom / contain no-repeat; }
.block.ask > .view-toggle { max-width: var(--wrap); margin: 0 auto; padding: 18px 20px 0; box-sizing: border-box; }
.block.ask > .view-toggle + .edge-kv { margin-top: 0; }

/* 發問：選要問誰的支持者（跟支持標籤的大卡片區隔，用小標籤） */
.ask-to { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ask-to .tag { font-size: 15px; padding: 6px 12px; }
/* 第 1 步：小標題、行內城市選單、支持對象兩欄標籤 */
.w-lab { font-weight: 700; font-size: var(--fs-small); margin: 14px 0 8px; }
.ask-to.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
/* 發問卡 chips 統一規則（城市下拉／支持誰／用哪個身分）：
   1. 單行 chip 一律同高（--chipH，跟兩行的支持者 chip 一樣）
   2. 文字一律置中，左右內距一致（各 12）
   3. 兩欄、欄距 8 */
#flow { --chipH: 59px; }
#flow .ask-to { display: grid; grid-template-columns: 1fr 1fr; } /* 發問卡所有 chip 群組都兩欄（第一頁支持誰／身分、第二頁想問誰） */
#flow .ask-to .tag { display: grid; justify-items: center; align-content: center; text-align: center; min-height: var(--chipH); padding: 6px 12px; }
/* 你關注：城市下拉同 chip 規則。「臺北市 ⌄」跟「＋ 我是首投族」一樣：文字＋圖示一組、整組置中；
   真正的 select 透明蓋在上面，點了照樣開系統選單 */
.sel-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(50% - 4px); height: var(--chipH); margin-bottom: 14px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.sel-pill select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.sel-pill:focus-within { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.ask-to .tag i { display: block; font-style: normal; font-weight: 400; font-size: 11px; opacity: .7; }
.done-links { margin: 14px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.done-links a, .linkish { color: var(--ink); font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ===== 字級層級（10/14 設計檢視）=====
   主標（Banner 標題）> 區塊標題 > 導言 > 內文 > 輔助說明，相鄰兩層至少差 2px，導言不能比區塊標題還搶眼 */
:root { --fs-h2: 24px; --fs-lead: 17px; --fs-body: 15px; --fs-small: 13px; }
@media (min-width: 768px) { :root { --fs-h2: 32px; --fs-lead: 18px; --fs-body: 16px; } }
h2, .sec-h { font-size: var(--fs-h2); line-height: 1.35; }
.amb-head p { font-family: inherit; font-size: var(--fs-lead); font-weight: 500; line-height: 1.7; color: var(--muted); max-width: 36em; }
.amb-head mark { color: var(--ink); font-weight: 700; padding: 0 4px; }
.lead2 { font-size: var(--fs-body); line-height: 1.7; }
.sec-p, .fine, .site-foot p, .site-foot .foot-h, .foot-rules li, .amb-steps2 small { font-size: var(--fs-small); line-height: 1.65; }
.qa-q { font-size: 20px; line-height: 1.4; }
.btn { font-size: 17px; }
.city-btn { font-size: 15px; }
/* 問答牆篩選 chips：大小、字體跟上方都市按鈕一致；離標題 +20 */
#toBar { margin-top: 20px; }
#toBar .tag { font-family: var(--display); font-size: 15px; font-weight: 400; padding: 2px 14px; }

/* ===== 破圈（新版：來破圈／1對1真實聊天）===== */
#ambassadors { background: var(--paper); padding-block: 80px; border-top: 0; } /* 上下底色不同，不用分隔線 */
@media (max-width: 640px) { #ambassadors { padding-block: 60px; } }
.amb-kicker { margin: 0; font-family: var(--display); font-size: 18px; color: #ed9614; }
.amb-title2 { display: block; margin: 2px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 5vw, 32px); line-height: 1.2; color: var(--ink); }
.amb-desc { margin: 10px 0 0; max-width: 34em; font-size: var(--fs-lead); line-height: 1.7; color: var(--muted); }

.amb-stage { position: relative; margin-top: 24px; }
.amb-card { position: relative; z-index: 2; max-width: 502px; margin: 0 auto; background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); padding: 28px 32px; }
.amb-card h3 { font-size: 30px; margin: 0 0 18px; }
.amb-steps3 { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.amb-steps3 li { display: flex; gap: 12px; align-items: center; }
.amb-steps3 .ic { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); display: grid; place-items: center; }
.amb-steps3 .ic svg { width: 22px; height: 22px; display: block; fill: var(--ink); }
.amb-steps3 b { display: block; font-size: 16px; }
.amb-steps3 small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.amb-card .btn { background: var(--orange); }

/* 手機聊天框：設計提供的 3 倍 PNG（amb-phone.png），樣式見桌機 media */
.amb-phone { display: block; }

/* 手機版（預設）：堆疊，兩個人並排置頂、手機框置於卡片下 */
.amb-people3 { display: flex; justify-content: center; align-items: flex-end; max-width: 440px; margin: 0 auto -1px; } /* 人物下緣壓進卡片 1（卡片在上層） */
.amb-p { display: block; width: 50%; height: auto; }
.amb-p.r { transform: translateY(1.48%); } /* 右人圖底有 11px 透明邊（744 高的 1.48%），往下抵掉才會貼齊卡片 */
@media (max-width: 899px) { .amb-phone { display: none; } } /* 手機版拿掉聊天手機框，網頁版保留 */

/* 桌機（Figma 29407-28898，1600 寬畫框、中線 800）：所有位置都從中線算。
   人物寬度與左右位置以 1280 寬為基準按比例縮放（窄桌機不裁切）；卡片、手機框固定尺寸；
   人物底部對齊卡片底（左人高 48、右人高 13.5）。整組上緣比說明文字底再往上 93（手機框跟標題同高） */
@media (min-width: 900px) {
  .amb-stage { --stageW: min(1280px, calc(100vw - 32px)); width: var(--stageW); margin: -93px 0 0 calc((100% - var(--stageW)) / 2); padding-top: 191px; }
  .amb-people3 { display: contents; }
  .amb-p { position: absolute; }
  /* 人物貼著卡片邊緣定位（間距以看得到的人物邊緣算，扣掉圖片兩側的透明邊）
     左人：手機邊緣跟卡片左緣重疊 8；右人：手機邊緣跟卡片右緣重疊 8。卡片左緣 = 50% − 226，右緣 = 50% + 224
     疊放順序（上→下）：右人 8 ＞ 手機框 7 ＞ 卡片 6 ＞ 左人 1 */
  .amb-p.l { width: 27.249%; right: calc(50% + 218px - 1.359%); bottom: 48px; z-index: 1; }   /* 看得到的人物寬 300（1280 基準，圖框 348.8）；圖右透明邊 17.4 */
  .amb-p.r { width: 30.278%; left: calc(50% + 216px - 1.794%); bottom: 13.5px; z-index: 8; transform: none; } /* 看得到的人物寬 300（圖框 387.6）；圖左透明邊 23 */
  .amb-card { width: 450px; max-width: none; margin: 0 0 0 calc(50% - 226px); z-index: 6; } /* 卡片在最上層 */ /* 450 寬，中心維持在原位（Figma 502 寬時左緣 −252） */
  /* 手機框：設計提供的 3 倍 PNG（654×1212，原尺寸 218×404），寬 200、左緣在中線右 161、以中心順時針傾斜 2°（高解析度圖轉了也不糊） */
  .amb-phone { position: absolute; top: 0; left: calc(50% + 161px); width: 200px; height: auto; margin: 0; z-index: 7; transform: rotate(2deg); }
}

/* ===== 揪朋友分享區（獨立黃底）===== */
#share { background: #ffcd68; border-top: 0; }
#share .wrap { position: relative; }
#share .share-card { margin-top: 0; }
.wall-more { margin-top: 18px; }
/* 「到 App 看更多」：純文字按鈕（無框、無底、無陰影），跟上面「展開更多問題」一樣整行置中 */
.btn.wall-more { display: flex; width: 100%; background: none; border: 0; box-shadow: none; font-size: 15px; }   /* 字級同「展開更多問題」（.btn.small） */
.btn.wall-more:active { transform: none; opacity: .6; }
#qlist:has([data-wall-more]) + .wall-more { margin-top: 8px; }   /* 上面有「展開更多問題」時，兩顆間距 8 */
/* 分享卡（Figma 29473-12721，1600 畫框）：卡片 1099×345；左邊限動圖卡、虛線、紙飛機都相對卡片定位，凸出卡片上下 */
/* 虛線＋紙飛機放在圖卡正後方，位置都從圖卡算：--imgw 圖卡寬、--dk 裝飾縮放、--doff 整組相對圖卡中線的偏移
   （桌機照 Figma：虛線左緣在圖卡左緣外 125、上緣低 18；紙飛機在虛線左緣右 491、圖卡上緣上 42） */
.share-preview { position: relative; --imgw: 180px; --dk: .5; --doff: 0px; --dy: 30px; } /* 手機縮到 50%、整組往下 30 */
.share-preview img { position: relative; z-index: 1; }
.share-dash, .share-plane { position: absolute; z-index: 0; pointer-events: none; height: auto; }
.share-dash { left: calc(var(--imgw) / 2 - (273.5px - var(--doff)) * var(--dk)); top: calc(18px * var(--dk) + var(--dy)); width: calc(476px * var(--dk)); }
.share-plane { left: calc(var(--imgw) / 2 - (273.5px - var(--doff) - 491px) * var(--dk)); top: calc(-42px * var(--dk) + var(--dy)); width: calc(56px * var(--dk)); transform: rotate(10.43deg); }
@media (min-width: 641px) and (max-width: 899px) { .share-preview { --imgw: 220px; } }
@media (min-width: 900px) { .share-preview { --imgw: 250px; --dk: 1; --doff: 23.5px; --dy: 0px; } }
.btn.share-img { background: #97cdff; }
.share-btns .btn { font-family: var(--display); font-size: 16px; line-height: 26.4px; padding: 6px 14px; border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
.share-line { color: #fff; }
.share-body .amb-proof.big { margin: 0; gap: 0; font-size: 16px; color: var(--ink); }
.share-body .amb-proof.big span { flex-basis: auto; }
.share-body .amb-proof.big b { font-size: 40px; line-height: 40px; margin: 0 4px; }
/* 手機版：順序改成 標題 → 報名人數 → 說明 → 限動圖卡 → 按鈕（share-body 攤平，才能把圖卡插到說明和按鈕中間） */
@media (max-width: 899px) {
  #share .share-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
  #share .share-body { display: contents; }
  #share .share-body .amb-h3 { order: 1; }
  #share .share-body .amb-proof { order: 2; margin-top: 14px; justify-content: center; }
  #share .share-body > p:not(.amb-proof):not(.fine) { order: 3; margin-top: 14px; }
  #share .share-preview { order: 4; margin-top: 24px; }
  #share .share-btns { order: 5; margin-top: 36px; flex-direction: column; align-self: stretch; } /* 一排一顆、滿版 */
  #share .share-body .fine { order: 6; }
}
@media (min-width: 900px) {
  /* 上下：紙飛機在卡片上方 89、虛線在卡片下方 75；Figma 區塊上下各留 165 */
  #share { padding-block: 165px; }
  #share .share-card { position: relative; display: block; width: min(1099px, calc(100vw - 40px)); margin: 89px 0 75px calc(50% - min(1099px, calc(100vw - 40px)) / 2 + 13.5px);
    min-height: 345px; padding: 43px 40px 59px 561px; box-sizing: border-box; }
  #share .share-preview { position: absolute; left: 132px; top: -47px; z-index: 2; }
  #share .share-preview img { width: 250px; border-width: 3.4px; border-radius: 20.5px; box-shadow: 6.8px 6.8px 0 var(--ink); }
  #share .share-body { max-width: 440px; gap: 0; }
  #share .share-body .amb-h3 { font-size: 32px; line-height: 37.8px; }
  #share .share-body .amb-proof.big { margin-top: 20px; }
  #share .share-body > p:not(.amb-proof):not(.fine) { margin-top: 10px; font-size: 16px; line-height: 28.8px; color: #1d1d1d; }
  #share .share-btns { margin-top: 30px; gap: 12px; }
}

/* Cloudflare 安全驗證層：預設透明且不攔點擊（Turnstile interaction-only 多半無感）；.interactive 才變遮罩並鎖捲動 */
.cf-challenge { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; background: transparent; pointer-events: none; }
.cf-challenge.interactive { background: rgba(27, 29, 46, .72); pointer-events: auto; }
.cf-challenge .cf-box { position: relative; }
.cf-challenge:not(.interactive) .cf-hint, .cf-challenge:not(.interactive) .dlg-x { display: none; }
.cf-challenge.interactive .cf-box { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 44px 16px 16px; min-width: 320px; max-width: 94vw; box-shadow: 6px 6px 0 var(--ink); }
.cf-challenge .cf-hint { margin: 0 0 10px; font-size: 15px; text-align: center; }
.cf-challenge .cf-frame { display: block; width: min(94vw, 480px); height: min(80vh, 640px); border: 0; background: #fff; border-radius: 8px; }