/* 你是什麼品種的舔狗 — design tokens
   主題：戀愛犬化圖鑑。紙卡質感、收藏感，不是 SaaS dashboard。
   間距一律走 8pt grid（--s-1 到 --s-8），不要每一區各自發明數字。 */
:root {
  --canvas: #FFF9F3;
  --surface: #FFFEFC;
  --ink: #40342F;
  --ink-2: #756761;
  --ink-3: #A2938B;
  --accent: #E98978;
  --accent-deep: #D46A57;
  --pink: #F7DDD8;
  --line: #E9DDD4;
  --green: #ADC4A5;
  --gold: #EAB869;

  --breed: var(--accent);          /* 結果頁會被犬種色覆蓋 */
  --breed-soft: var(--pink);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-full: 999px;
  --sh-1: 0 2px 8px rgba(64, 52, 47, .04);
  --sh-2: 0 6px 24px rgba(64, 52, 47, .06);
  --sh-3: 0 18px 44px -12px rgba(64, 52, 47, .16);

  --wrap: 720px;
  --card: 520px;
}

* { box-sizing: border-box; }

html {
  /* iOS Safari 在某些版面下會自己把字放大（text autosizing），字一放大就會提早換行，
     而且是整站都受影響。鎖成 100% 才不會被它動。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0; padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 只在真的沒地方斷的時候才硬斷長字（網址、英文），中文本來就每個字都能斷。
     用 break-word 的話 Safari 會在還有空間時就把英文詞拆開。 */
  overflow-wrap: anywhere;
  word-break: normal;
}
body { overflow-x: hidden; }
/* 內文不要用 text-wrap: pretty／balance：Safari 會重排整段，實機上每行只用到約三分之二寬度。 */

h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0; }
a { color: var(--accent-deep); }
button { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { max-width: 100%; }

.wrap {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  /* viewport-fit=cover 會讓內容延伸到瀏海底下，橫放時左右會被切掉。
     env() 在不支援的瀏覽器回退成第二個參數，所以直接寫沒問題。 */
  padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
}
.narrow { max-width: var(--card); margin-left: auto; margin-right: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 品牌列 ────────────────────────────────── */
.brand {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 18px 20px 0; max-width: var(--wrap); margin: 0 auto;
}
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-name { font-size: 14.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }

/* ── 畫面切換 ──────────────────────────────── */
.screen { display: none; }
.screen.is-active { display: block; animation: fade .3s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── 按鈕 ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; padding: 0 var(--s-6);
  background: var(--accent); color: #fff;
  border: 0; border-radius: var(--r-full);
  font-size: 17px; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; box-shadow: var(--sh-2); text-decoration: none;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-block { display: flex; width: 100%; }
.btn-ghost {
  background: transparent; color: var(--ink-2); box-shadow: none;
  border: 1.5px solid var(--line); min-height: 48px; font-size: 15.5px; font-weight: 600;
}
.btn-sm { min-height: 44px; padding: 0 var(--s-5); font-size: 15px; }

/* ── 卡片 ──────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-2);
}
/* 間距一律用 margin-bottom，而且**不要**加 :last-child 之類的結構選擇器。
   結果頁有好幾張卡被包在 #r-match / #r-insight / #r-blend 這種容器裡：
   - .card + .card 只認「同一層的下一個兄弟」，一被包起來相鄰關係就斷
   - .card:last-child 是相對「父層」的，被包起來的那張永遠是最後一個
   兩種寫法都會讓那幾個接縫黏在一起（兩次都真的發生過）。
   多出來的那一段尾巴間距無害，換來的是不管怎麼包都不會壞。 */
/* 卡片之間 24px，跟卡片內距一樣。
   之前是 16px，比內容到卡片邊緣的距離還小，看起來會像卡片黏在一起。 */
.card { margin-bottom: var(--s-5); }
.card-title {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--breed); text-transform: none; margin-bottom: var(--s-4);
}

/* 小標到內文的統一間距。之前散在各處（inline 的 6px、2px、4px 都有），
   同一頁上看起來就是「有些地方特別擠」。凡是「一行粗體 + 一段說明」都用這個。 */
.lead-pair > :first-child { margin-bottom: 8px; }

/* ── 首頁 ──────────────────────────────────── */
.hero { padding: var(--s-6) 0 var(--s-5); text-align: center; }
.hero-art { margin: 0 auto var(--s-4); max-width: 330px; }
.hero-dog { display: block; }
.hero-dog img, .hero-dog svg { display: block; width: 100%; border-radius: var(--r-lg); }
/* 手繪主圖與退回的 SVG 共用同一組尺寸，換圖時版面不會跳 */
/* aspect-ratio 是第二道保險：即使哪裡忘了給 width/height，
   圖載入前也會先佔住一塊方形，不會讓整頁塌下去再跳回來。 */
.dog-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
img.dog-img { object-fit: contain; }
.hero-dog .dog-img, .cell-art .dog-img, .teaser-art .dog-img,
.b-art .dog-img, .result-art .dog-img { aspect-ratio: 1 / 1; }

/* 主標一定要排成一行。字級跟著視窗寬度縮，不要用 <br> 硬斷——
   斷成「你是什麼品種的／舔狗？」使用者明講不要。
   算式：可用寬度是 100vw 減掉 .wrap 左右各 20px，十個全形字約 9.9em，
   取 10.6em 當預算留約 7% 餘裕 → (100vw - 40px) / 10.6 ≈ 9.4vw - 3.8px。
   nowrap 是保險絲：真的算錯就會變成橫向溢出，掃描器抓得到，
   不會靜靜地又折成兩行。改字數或字重之後要重跑一次寬度掃描。 */
.hero h1 {
  font-size: clamp(21px, calc(9.4vw - 3.8px), 44px);
  white-space: nowrap;
  margin-bottom: var(--s-3);
}
.hero-sub { color: var(--ink-2); font-size: 16.5px; margin-bottom: var(--s-5); }
.hero-meta { color: var(--ink-3); font-size: 13.5px; margin-top: var(--s-3); }
.hero .btn { min-width: 220px; }

.pitch { margin-top: var(--s-7); }
.pitch h2 { font-size: 22px; margin-bottom: var(--s-3); }
.story { color: var(--ink-2); font-size: 15.5px; }

/* 小卡群用 margin-bottom，**不要用 margin-top**。
   原本寫 margin-top 的後果：上面那個接縫靠 .card 的 margin-bottom 撐著（24px 沒問題），
   但群組下面沒有任何人給間距，最後一張小卡就跟下一張卡貼在一起——
   實測節奏是 24 / 12 / 12 / **0**，使用者回報「框框之間的距離很怪」。
   （檔案上方那條「間距一律用 margin-bottom」的規則就是為了這個，這裡是漏網的一個。）
   現在是 24 / 12 / 12 / 24：群組內部緊、對外用全站標準間距。 */
.breed-teaser { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
/* 小卡現在是 <a>（首頁唯一連到犬種頁的路），要把連結的預設樣式收乾淨 */
.teaser {
  color: inherit; text-decoration: none;
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
}
.teaser-art { width: 68px; flex: none; border-radius: 14px; overflow: hidden; }
.teaser-art svg { display: block; }
.teaser b { display: block; font-size: 16px; margin-bottom: 4px; }
.teaser span { display: block; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

.dims { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
/* 維度名稱是一個詞，不可以被折斷（實測 320px 寬時「戀愛界線感」會被切成
   「戀愛界線／感」——中文每個字都能斷，flex 又會把兩欄一起壓扁）。
   做法：名稱 flex:none 永不縮，問題句放同一個可換行的容器裡，
   擠不下時整句掉到第二行、而且對齊名稱，不會出現孤字。 */
.dim-line { display: flex; align-items: baseline; gap: var(--s-3); font-size: 15px; }
.dim-dot { width: 12px; height: 12px; border-radius: var(--r-full); flex: none; transform: translateY(1px); }
.dim-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); min-width: 0; }
.dim-line b { font-weight: 700; flex: none; }
.dim-line span { color: var(--ink-2); font-size: 14px; }

.cta-strip {
  margin: var(--s-7) 0 var(--s-6); text-align: center;
  background: var(--pink); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
}
.cta-strip p { font-size: 18px; font-weight: 700; margin-bottom: var(--s-4); }

.disclaimer { color: var(--ink-3); font-size: 13px; line-height: 1.7; margin: var(--s-5) 0 var(--s-6); }

.last-teaser { margin-top: var(--s-4); background: var(--pink); border-color: #F0CFC7; }
.resume {
  margin-top: var(--s-5); background: #FFF4E7; border: 1px solid #F0DCC2;
  border-radius: var(--r-md); padding: var(--s-4);
}
.resume p { font-size: 15px; margin-bottom: var(--s-3); }
.resume-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ── 題目頁 ────────────────────────────────── */
.quiz-top {
  position: sticky; top: 0; z-index: 10;
  background: var(--canvas); padding: var(--s-3) 0 var(--s-3);
}
.quiz-bar { display: flex; align-items: center; gap: var(--s-3); }
.back-btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-full); cursor: pointer; color: var(--ink-2);
}
.back-btn[disabled] { opacity: .3; cursor: default; }
.progress-count { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; }
.progress-track { flex: 1; height: 10px; background: #F1E6DC; border-radius: var(--r-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width .3s ease; }

/* sticky 的進度列會蓋住題型標籤，所以捲動定位時要留出它的高度 */
.q-card { margin-top: var(--s-5); scroll-margin-top: 76px; }
.q-kind {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent-deep); background: var(--pink);
  padding: 4px 12px; border-radius: var(--r-full); margin-bottom: var(--s-3);
}
.q-text { font-size: 21px; font-weight: 700; line-height: 1.55; }
.q-hint { color: var(--ink-2); font-size: 14.5px; margin-top: var(--s-2); }

.options { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.opt {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  min-height: 56px; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  text-align: left; font-size: 16px; line-height: 1.5; cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.opt:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.opt.is-picked { border-color: var(--accent); background: var(--pink); }
.opt-paw { width: 22px; height: 22px; flex: none; color: var(--ink-3); }
.opt.is-picked .opt-paw { color: var(--accent-deep); }
.opt-scenario { align-items: flex-start; }
.opt-scenario .opt-paw { margin-top: 3px; }

.q-nudge {
  margin-top: var(--s-5); text-align: center;
  color: var(--ink-3); font-size: 14px;
}

/* ── 計算中 ────────────────────────────────── */
.loading { text-align: center; padding: var(--s-8) 0; }
.loading-art { width: 170px; margin: 0 auto var(--s-5); }
.loading-art svg { display: block; }
.sniff { animation: sniff 1.1s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes sniff { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.loading-line { font-size: 18px; font-weight: 700; min-height: 2em; }
.loading-dots { color: var(--ink-3); font-size: 14px; margin-top: var(--s-2); }

/* ── 結果頁 ────────────────────────────────── */
.result-hero {
  text-align: center; padding: var(--s-5) 0 var(--s-4);
}
.result-art { width: 250px; margin: 0 auto var(--s-3); border-radius: var(--r-lg); overflow: hidden; }
.result-art svg { display: block; }
.result-eyebrow { color: var(--ink-2); font-size: 14.5px; }
.result-name {
  font-size: 40px; font-weight: 800; letter-spacing: -.02em;
  color: var(--breed); margin: var(--s-1) 0 var(--s-2);
}
.result-title { font-size: 18px; font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-4); }
.tag {
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: 5px 14px; border-radius: var(--r-full);
}
.similarity {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: var(--s-4); padding: 8px 18px;
  background: var(--breed-soft); border-radius: var(--r-full);
  font-size: 14.5px; color: var(--ink);
}
.similarity b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

.lede { font-size: 17.5px; font-weight: 700; line-height: 1.65; }
.body-p { color: var(--ink-2); font-size: 15.5px; }
.body-p + .body-p { margin-top: var(--s-3); }

/* 六維 */
.radar-box { display: grid; place-items: center; padding: var(--s-2) 0 var(--s-4); }
.radar { width: 100%; max-width: 340px; }
.dim-list { display: grid; gap: var(--s-4); }
.dim-item { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.dim-item:first-child { border-top: 0; padding-top: 0; }
/* 名稱與分數一行、問題自己一行。三個東西擠一行的話，窄螢幕會先把
   名稱折斷（「戀愛界線／感」），而且六列的折法各不相同，看起來像跑版。 */
.dim-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.dim-head b { font-size: 16px; flex: none; }
.dim-head .dim-score { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.dim-item .dim-q { color: var(--ink-3); font-size: 13px; }
.dim-meter { height: 9px; background: #F1E6DC; border-radius: var(--r-full); margin: var(--s-2) 0; overflow: hidden; }
.dim-meter i { display: block; height: 100%; border-radius: var(--r-full); }
.dim-item p { color: var(--ink-2); font-size: 14.8px; }

/* SOP */
.sop { display: grid; gap: var(--s-2); counter-reset: sop; }
.sop-step {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: 15.5px; color: var(--ink-2);
}
.sop-step::before {
  counter-increment: sop; content: counter(sop);
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  background: var(--breed-soft); color: var(--ink); border-radius: var(--r-full);
  font-size: 13px; font-weight: 800; margin-top: 2px;
}
.bullets { display: grid; gap: var(--s-2); }
.bullet { display: flex; gap: var(--s-3); font-size: 15.5px; color: var(--ink-2); }
.bullet::before { content: ''; width: 7px; height: 7px; flex: none; margin-top: 11px; border-radius: 50%; background: var(--breed); }

.strengths { display: grid; gap: var(--s-4); }
.strength b { display: block; font-size: 16px; margin-bottom: 6px; }
.strength span { color: var(--ink-2); font-size: 15px; }

.weak { background: #FFF4E7; border-color: #F0DCC2; }
.weak .card-title { color: #B5762B; }

.scen { display: grid; gap: var(--s-3); }
/* 左欄用 max-content 而不是寫死 96px：最長的標籤「他突然說想見你」在 14.5px 下
   是 101px，寫死 96 的話它在任何寬度都會被折成兩行（實測就是這樣壞的）。
   max-content 會取四列裡最寬的那個，所以四列仍然對齊。 */
.scen-row { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-3); align-items: start; }
.scen-row b { font-size: 14.5px; color: var(--ink); padding-top: 1px; }
.scen-row span { color: var(--ink-2); font-size: 15px; }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill {
  font-size: 14.5px; color: var(--ink); background: #F4F7F1;
  border: 1px solid #DCE6D6; padding: 6px 14px; border-radius: var(--r-full);
}

/* ── 全台分布頁 ───────────────────────────── */
.stat-hero { text-align: center; }
.stat-big { display: flex; align-items: baseline; justify-content: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.stat-big b { font-size: 52px; font-weight: 800; line-height: 1; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.stat-big span { font-size: 17px; color: var(--ink-2); }
.stat-since { margin-top: var(--s-3); color: var(--ink-3); font-size: 13px; }

.dist-list { display: grid; gap: var(--s-2); }
.dist-row {
  display: grid; grid-template-columns: 42px 88px 1fr 52px;
  align-items: center; gap: var(--s-2);
  padding: 6px 4px; border-radius: var(--r-sm); text-decoration: none; color: inherit;
}
.dist-art { width: 42px; border-radius: 10px; overflow: hidden; }
.dist-name { font-size: 14.5px; font-weight: 700; }
.dist-bar { height: 12px; background: #F1E6DC; border-radius: var(--r-full); overflow: hidden; }
.dist-bar i { display: block; height: 100%; border-radius: var(--r-full); }
.dist-pct { text-align: right; font-size: 13.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.hist { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin-top: var(--s-4); }
.hist .hbar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.hist .hbar i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.hist-axis { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; margin-top: 6px; }

/* ── 狗狗指數 ─────────────────────────────── */
.index-card { background: linear-gradient(180deg, var(--breed-soft), var(--surface) 62%); }
.index-head { display: flex; align-items: baseline; gap: var(--s-3); }
.index-num { font-size: 62px; font-weight: 800; line-height: 1; color: var(--breed); font-variant-numeric: tabular-nums; }
.index-meta { display: flex; flex-direction: column; gap: 2px; }
.index-level { font-size: 19px; font-weight: 800; }
.index-of { font-size: 13px; color: var(--ink-3); }
.index-gauge { position: relative; margin: var(--s-5) 0 6px; }
.index-track { display: flex; height: 14px; border-radius: var(--r-full); overflow: hidden; }
.index-track i { display: block; }
.index-track .z0 { background: #DDE6EF; } .index-track .z1 { background: #DCE8D6; }
.index-track .z2 { background: #F6E4C4; } .index-track .z3 { background: #F5D3C4; }
.index-track .z4 { background: #EBAF9E; }
.index-pin {
  position: absolute; top: -6px; width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%; background: var(--surface); border: 4px solid var(--breed);
  box-shadow: var(--sh-2);
}
.index-scale { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12.5px; }
.index-note { margin-top: var(--s-4); }
.index-pr { margin-top: var(--s-3); font-size: 15.5px; color: var(--ink); }
.index-pr b { color: var(--breed); font-size: 18px; }
.index-pr-wait { color: var(--ink-3); font-size: 14px; }
.index-caveat { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 13px; line-height: 1.7; }

.match-list { display: grid; gap: var(--s-4); }
.match-row { display: flex; gap: var(--s-4); align-items: flex-start; }
.match-art { width: 74px; flex: none; border-radius: 14px; overflow: hidden; }
.match-body b { display: block; font-size: 16.5px; margin-bottom: 6px; }
.match-body p { color: var(--ink-2); font-size: 15px; }
.match-row.is-watch .match-art { opacity: .8; }
/* 整列可點（犬種頁的配對）。只讓名字可點的話實際高度只有 23px，手機點不到。 */
a.match-row.is-link { color: inherit; text-decoration: none; }
a.match-row.is-link .match-body b { text-decoration: underline; text-underline-offset: 3px; }

.insight-list { display: grid; gap: var(--s-4); }
.insight-row b { display: block; font-size: 15px; color: var(--breed); letter-spacing: .02em; margin-bottom: 8px; }
.insight-row p { color: var(--ink-2); font-size: 15.5px; }
.insight-rarity { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 14px; }

.blend { background: linear-gradient(180deg, var(--breed-soft), var(--surface) 70%); }
.blend-line { font-size: 19px; font-weight: 800; line-height: 1.5; }
.blend-pair { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; }
.blend-pair .b-art { width: 76px; flex: none; border-radius: 14px; overflow: hidden; }
.blend-pair .b-meta b { display: block; font-size: 16px; }
.blend-pair .b-meta span { color: var(--ink-2); font-size: 13.5px; }

.advice-card { background: var(--ink); color: #FFF6EE; border-color: var(--ink); }
.advice-card .card-title { color: var(--gold); }
.advice-card p { color: #FFF6EE; font-size: 16.5px; font-weight: 600; line-height: 1.7; }

/* ── Email 閘門 ────────────────────────────── */
.gate {
  position: relative; margin-top: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-6) var(--s-5); box-shadow: var(--sh-2);
}
.gate-peek {
  position: absolute; left: 0; right: 0; top: -110px; height: 110px;
  background: linear-gradient(180deg, rgba(255,249,243,0) 0%, var(--canvas) 88%);
  pointer-events: none;
}
.gate h3 { font-size: 21px; margin-bottom: var(--s-2); }
.gate > p { color: var(--ink-2); font-size: 15.5px; }
.gate-list { display: grid; gap: 6px; margin: var(--s-4) 0; }
.gate-item { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.gate-item svg { margin-top: 7px; }
.gate-item svg { width: 16px; height: 16px; flex: none; color: var(--green); }
.gate-form { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.gate-form input {
  width: 100%; min-height: 54px; padding: 0 var(--s-4);
  font-size: 16px; font-family: inherit; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.gate-form input:focus { outline: none; border-color: var(--accent); }
.gate-note { color: var(--ink-3); font-size: 13px; line-height: 1.65; }
.gate-note a { color: var(--ink-2); }
.gate-msg { font-size: 14.5px; min-height: 1.6em; }
.gate-msg.is-error { color: var(--accent-deep); }
.locked { display: none; }

/* ── 分享 ──────────────────────────────────── */
.share-actions { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.share-preview {
  margin-top: var(--s-4); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: #fff;
}
.share-preview img { display: block; width: 100%; }

.cross { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.cross-card {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-4); text-decoration: none; color: inherit;
  transition: border-color .14s ease, transform .14s ease;
}
.cross-card b { display: block; font-size: 16.5px; margin-bottom: 4px; }
.cross-card span { display: block; color: var(--ink-2); font-size: 14px; }
.cross-arrow { margin-left: auto; color: var(--ink-3); flex: none; }

/* ── 頁尾 ──────────────────────────────────── */
footer {
  margin-top: var(--s-8); padding: var(--s-6) 0 var(--s-7);
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px;
}
/* 頁尾連結要點得到：純文字的行高只有 23px，手機上很難命中。
   用 padding 把可點區域撐到 44px，負的 margin 抵銷掉多出來的視覺間距，
   所以看起來跟以前一樣，只是好按很多。 */
footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin: -10px 0 var(--s-3); }
footer a { color: var(--ink-2); text-decoration: none; }
footer nav a { display: inline-block; padding: 11px 0; }
/* 左上角的品牌字也是回首頁的連結，同樣撐開可點區域 */
a.brand-name { display: inline-block; padding: 10px 6px; margin: -10px -6px; }

/* 犬種頁底部那條「看完整 12 種圖鑑」同理 */
.breed-nav p a { display: inline-block; padding: 11px 8px; }

/* ── 小回饋 ────────────────────────────────── */
.fb { margin-top: var(--s-7); }
.fb .field { margin-top: var(--s-3); }
.fb label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.fb input, .fb textarea {
  width: 100%; padding: 12px var(--s-4); font-size: 16px; font-family: inherit; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.fb textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.fb input:focus, .fb textarea:focus { outline: none; border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 44px; padding: 0 var(--s-4); background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--r-full);
  font-size: 14.5px; cursor: pointer;
}
.chip.is-on { border-color: var(--accent); background: var(--pink); font-weight: 700; }
.fb-msg { font-size: 14px; color: var(--ink-2); min-height: 1.5em; margin-top: var(--s-2); }

/* ── 內容頁（圖鑑／法務）──────────────────── */
/* 只動上下：.page 常常跟 .wrap 一起用，寫 padding 簡寫會把 .wrap 的左右留白蓋掉，
   內容就會貼著螢幕邊緣。 */
.page { padding-top: var(--s-6); padding-bottom: var(--s-7); }
.page h1 { margin-bottom: var(--s-3); }
.page h2 { font-size: 21px; margin: var(--s-6) 0 var(--s-3); }
.page h3 { font-size: 17px; margin: var(--s-5) 0 var(--s-2); }
.page p, .page li { color: var(--ink-2); font-size: 15.5px; }
.page p + p, .page ul { margin-top: var(--s-3); }
.page ul { padding-left: 22px; }
.page li + li { margin-top: 6px; }
.page .lead { color: var(--ink); font-size: 17px; }

.breed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.breed-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3) var(--s-4); text-align: center; text-decoration: none; color: inherit;
  display: block; transition: transform .14s ease, border-color .14s ease;
}
.breed-cell .cell-art { width: 116px; margin: 0 auto var(--s-2); border-radius: 16px; overflow: hidden; }
.breed-cell b { display: block; font-size: 17px; }
.breed-cell span { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; margin-top: 4px; }
.breed-cell .cell-quote { color: var(--ink-3); font-size: 13px; margin-top: var(--s-2); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #FFF6EE; padding: 12px 22px; border-radius: var(--r-full);
  font-size: 14.5px; box-shadow: var(--sh-3); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 50;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 桌機 ──────────────────────────────────── */
@media (min-width: 720px) {
  .hero-art { max-width: 380px; }
  /* PRD 寫桌機主內容 720px，但 720 的中文一行約 40 字太長；
     測驗與結果頁用 580 比較好讀，圖鑑那種格狀內容才放到 720（.wrap 本來就是）。 */
  .narrow { max-width: 580px; }
  .breed-grid { grid-template-columns: repeat(3, 1fr); }
  .q-text { font-size: 24px; }
  .result-name { font-size: 48px; }
}

/* ── 滑鼠才有的樣式 ─────────────────────────
   iOS Safari 的 :hover 會「黏住」：手指點過的位置，hover 樣式會一直留著，
   直到你點別的地方。答題頁是一題一頁重畫選項的，所以換到下一題時，
   同一個位置的新選項會接手那個 hover 邊框——看起來就像上一題的答案還留著。
   全部關進 (hover: hover) 裡，觸控裝置就不會拿到這些樣式。 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-deep); }
  .btn-ghost:hover { background: #fff; color: var(--ink); border-color: var(--ink-3); }
  .back-btn:hover { background: #fff; }
  .opt:hover { border-color: var(--accent); }
  .cross-card:hover { border-color: var(--accent); transform: translateY(-1px); }
  footer a:hover { text-decoration: underline; }
  .breed-cell:hover { transform: translateY(-2px); border-color: var(--accent); }
  .teaser:hover { border-color: var(--accent); }
  .breed-nav-list a:hover { border-color: var(--accent); }
}

/* 觸控裝置改用「按下去的當下」給回饋，放開就消失，不會留著 */
@media (hover: none) {
  .opt:active { border-color: var(--accent); background: var(--pink); }
  .btn:active { background: var(--accent-deep); }
  .teaser:active { border-color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ── 法務頁 ────────────────────────────────── */
.updated { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; }
.back-link { display: inline-block; margin-top: var(--s-6); font-size: 15px; }
.page ul { color: var(--ink-2); }

/* 首頁人數：社會證明。樣本少的時候 app.js 會整行不畫（見 COUNT_MIN） */
.hero-count { color: var(--ink-3); font-size: 13.5px; margin-top: 6px; }
.hero-count b { color: var(--ink-2); font-weight: 700; }
.hero-count a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* 指數卡底部的分布連結：看完自己的 PR，下一個問題就是「別人呢」 */
/* 可點區域要撐開：純文字連結的行高只有 25px（跟頁尾、品牌名同一類問題） */
.index-link {
  display: inline-block; margin-top: 6px; padding: 10px 0;
  font-size: 14.5px; font-weight: 600; color: var(--accent-deep);
  text-decoration: underline; text-underline-offset: 4px;
  white-space: nowrap;
}

/* ── 窄螢幕（≤360px）─────────────────────────
   iPhone 開「顯示與亮度 → 放大」的話，6.1 吋機器回報的寬度就是 320px，
   不是 390px——實測 320 的時候標題會掉出孤字（「…不是罵／人」）、
   側欄文字也會被擠成兩行。這裡把左右留白、卡片內距與標題級數各縮一號，
   把寬度還給文字，而不是靠改文案去閃。 */
@media (max-width: 360px) {
  .wrap { padding: 0 max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right)); }
  .card { padding: 18px; }
  h1 { font-size: 28px; }
  h2 { font-size: 21px; }
  .pitch h2 { font-size: 20px; }
  .teaser { gap: var(--s-3); padding: var(--s-3); }
  .teaser-art { width: 58px; }
  .teaser span { font-size: 14px; }
  /* 兩欄擠不下就改成上下排，不要讓句子只剩十幾 px 可用 */
  .scen-row { grid-template-columns: 1fr; gap: 2px; }
  /* 兩欄圖鑑在 320px 只剩 ~120px 可讀，每格都會折出孤字。改一欄，
     圖小一點、字排得開，反而比擠成兩欄好看。 */
  .breed-grid { grid-template-columns: 1fr; }
  .breed-cell {
    display: grid; text-align: left;
    /* 76px 是量出來的：13 個字的副標在 13.5px 下量出來要 179px，
       70px 剛好讓文字欄有 184px；圖再大就會折出一個孤字（84px 與 76px 都試過）。 */
    grid-template-columns: 70px 1fr;
    grid-template-areas: "art name" "art desc" "quote quote";
    column-gap: var(--s-3); row-gap: 0;
  }
  .breed-cell .cell-art { grid-area: art; width: 70px; margin: 0; align-self: center; }
  .breed-cell b { grid-area: name; align-self: end; }
  .breed-cell span { grid-area: desc; align-self: start; }
  .breed-cell .cell-quote { grid-area: quote; margin-top: var(--s-3); }
}

/* 全台分布頁的頭條數字。名字與百分比分兩行：擠在同一句時，
   窄螢幕會把「18.8%。」甩到第二行變成孤行。 */
.stat-top { font-size: 17px; color: var(--ink-2); }
.stat-top strong { font-weight: 800; }
.stat-topsub { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }

/* ── 換行：一律讓行填滿，不要用 text-wrap 修 ──────────
   踩過的坑（2026-09-07，同一天被退兩次）：
   1. 中文可以在任何兩個字之間斷，所以句子比一行長一點點就會留下孤行
      （「…假裝不存／在。」）。看起來像跑版。
   2. 拿 `text-wrap: balance` 去修，孤行是沒了，但它是把**每一行**都拉短：
      實測題目只用到欄寬的 66%、首頁小卡只有 57%，靠左的文字右邊開一大塊，
      使用者的原話是「題目都會很早換行，偏左」。**比孤行更糟，已全部移除。**
   3. `text-wrap: pretty` 對中文完全無效——它避免的是「單字」孤行，
      整段中文在瀏覽器眼裡是一個字（實測 222/44 完全沒變）。
   結論：預設就是自然換行（行會填滿）。孤行只有在「最後一行剩一兩個字」時才算問題，
   而且要用**結構**去修——把欄位放寬、或把句子改短一點讓它少一行——不要動 text-wrap。
   驗證用 tools/orphan-probe.js，它同時看孤行與行寬利用率。 */

/* 版權那行是三段獨立的資訊，斷在段落之間可以，斷在段落中間（「感情實驗室系／列」）不行 */
.foot-copy span { white-space: nowrap; }

/* 句尾綁定（typeset.js 產生的）：讓最後一行至少 3 個字。
   前面幾行照樣填滿——這是它跟 text-wrap: balance 最大的差別。

   `display: inline` 是必要的，不是保險：站上有三條
   `.teaser span` / `.cross-card span` / `.breed-cell span { display: block }`
   這種後代選擇器，會連我們插進去的這顆 span 一起變成區塊，
   句尾就被硬推到自己一行——首頁小卡實測被拆成三行，中間那行只剩四個字，
   比原本的孤行更糟。這條要贏過那些選擇器，所以寫成 span.tw-tail 並放在檔尾。 */
span.tw-tail { display: inline; white-space: nowrap; }

/* typeset.js 在 flex／grid 容器裡加的文字包裝層。
   沒有它的話句尾那顆 span 會變成獨立的 flex item 被推到自己一行。
   這顆就是原本那個匿名 flex item，所以不需要任何其他樣式。 */
span.tw-flow { display: block; }

/* 犬種頁底部的「其他 11 種狗格」：每一頁都連出去，爬蟲一跳就能走完 12 頁。
   之前每個犬種頁只有 /breeds 一個出口，彼此 0 條互連。 */
.breed-nav { margin: var(--s-6) 0 var(--s-5); text-align: center; }
.breed-nav-title { font-size: 14px; font-weight: 700; color: var(--ink-3); margin-bottom: var(--s-3); }
.breed-nav-list { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.breed-nav-list a {
  display: inline-block; padding: 10px 14px; min-height: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  color: var(--breed, var(--ink-2)); font-size: 14.5px; font-weight: 600; text-decoration: none;
}

/* 首頁的常見問題。刻意不做成收合面板：這五題都是使用者真的會問的，
   收起來等於要人多點一下才看得到，也讓爬蟲拿到的是預設隱藏的內容。 */
.faq-list { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
.faq-item h3 { font-size: 16.5px; margin-bottom: 6px; }