/* 知識+ 問答區（/qa/）：骨架仿 Yahoo 知識+（發問卡／最佳解答／其他回答／相關問題），衣服穿本站的。
   這一頁疊在 /style.css 後面，色票、字體、.pill 括號鈕、.frame 呼吸角標框、.sticker 貼紙、.sg-slice 切葡萄柚 全部沿用；
   只蓋掉兩件事：不整頁吸附（讀者要一邊看一邊貼指令）、文字可以選取。 */
html{scroll-snap-type:none}
body{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.qa-shell{min-height:100svh;display:flex;flex-direction:column;will-change:auto}
.qa-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gut)}
.qa-top .crumbs{display:flex;align-items:baseline;gap:.7em;min-width:0;font:italic 600 18px/1 var(--latin);letter-spacing:.01em}
.qa-top .crumbs a{text-decoration:none;color:var(--ink);white-space:nowrap}
.qa-top .crumbs i{font-style:normal;color:var(--muted)}
.qa-top .crumbs .here{font:600 17px/1 var(--serif);letter-spacing:.06em;color:var(--pink)}
.qa-wrap{width:100%;max-width:780px;margin:0 auto;padding:8px var(--gut) 72px;flex:1}
.qa-h1{font:600 clamp(24px,3.6vw,34px)/1.4 var(--serif);letter-spacing:.03em;margin:14px 0 10px}
.qa-emo{font-family:"PingFang TC","Microsoft JhengHei","Segoe UI Symbol",sans-serif}   /* 顏文字／表情：lang="und" ＋安全字型，不用 -apple-system（Chrome 疊附加符號會變黑塊） */

/* 小圓章：頭像用文字 */
.stamp{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font:600 20px/1 var(--serif);color:var(--on-pink);background:var(--pink);border:2px solid var(--card);box-shadow:0 0 0 1px var(--line-strong)}
.stamp.ai{background:var(--fruit);color:var(--ink)}
.stamp.p1{background:var(--rind);color:var(--ink)}
.stamp.p2{background:var(--forest);color:var(--on-pink)}
.stamp.p3{background:var(--gold);color:var(--ink)}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who b{display:block;font:600 16px/1.3 var(--serif);letter-spacing:.03em}
.who small{display:block;font:italic 400 13px/1.3 var(--latin);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.tag{display:inline-flex;align-items:center;padding:2px 10px;border:1px solid var(--line-strong);border-radius:999px;font:500 13px/1.6 var(--sans);color:var(--muted);letter-spacing:.04em}
.tag.bounty{color:var(--pink);border-color:var(--pink);background:var(--pink-soft);font-weight:700}
.tag.best{background:var(--pink);border-color:var(--pink);color:var(--on-pink);font-weight:700;letter-spacing:.12em}   /* 最佳解答徽章：葡萄柚粉 */

/* 發問卡 */
.qa-q{padding:22px clamp(16px,3vw,28px);border:1px solid var(--line);background:var(--card);margin-top:6px}
.qa-q .qa-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.qa-q h1{font:900 clamp(21px,3.2vw,30px)/1.45 var(--serif);letter-spacing:.02em;margin:16px 0 4px}
.qa-q .when{font:italic 400 13.5px/1.6 var(--latin);color:var(--muted);letter-spacing:.02em}
.qa-q .body{margin-top:12px}
.qa-q .body p,.qa-ans p{margin:0 0 .25em}

/* 最佳解答：#21 呼吸角標框（.frame）；上面一條徽章列 */
.qa-best{margin-top:30px;padding:22px clamp(16px,3vw,28px) 26px;background:var(--card);--fc:var(--pink)}
.qa-best .qa-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.qa-best .who{flex-wrap:wrap}
.qa-ans h3{font:600 clamp(18px,2.4vw,21px)/1.5 var(--serif);letter-spacing:.04em;margin:26px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.qa-ans h3.know{color:var(--pink)}
.qa-ans ol,.qa-ans ul{margin:0;padding:0;list-style:none}
.qa-ans ol{counter-reset:n}
.qa-ans ol>li{counter-increment:n;position:relative;padding:3px 0 3px 2.1em}
.qa-ans ol>li::before{content:counter(n) ".";position:absolute;left:0;top:3px;width:1.8em;text-align:right;font:italic 600 15px/1.8 var(--latin);color:var(--pink)}
.qa-ans ol.paren>li{padding-left:2.9em}
.qa-ans ol.paren>li::before{content:"（" counter(n) "）";width:2.6em;text-align:left;font:600 15px/1.8 var(--sans);color:var(--pink)}
.qa-aside{color:var(--muted);font-size:.94em}
.qa-ans code.qa-cmd{white-space:nowrap;overflow-wrap:normal}
.qa-ans code{font:500 .9em/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;padding:.08em .45em;border-radius:5px;background:var(--bg2);border:1px solid var(--line);overflow-wrap:anywhere}
.qa-ans pre code{padding:0;border:0;background:none;border-radius:0;font-size:13.5px;overflow-wrap:normal}
.qa-code{margin:8px 0 8px;border:1px solid var(--line-strong);background:var(--bg2);border-radius:6px;overflow:hidden}
.qa-codebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 12px 2px 14px;border-bottom:1px solid var(--line);font:italic 400 13px/1 var(--latin);color:var(--muted)}
.qa-code pre{margin:0;padding:12px 14px;overflow-x:auto;tab-size:2;-webkit-overflow-scrolling:touch}
.qa-wait{margin:22px 0 6px;padding:14px 16px;border-left:3px solid var(--pink);background:var(--pink-soft)}
.qa-wait p{margin:0}
.qa-wait-big{font:900 clamp(20px,3vw,26px)/1.4 var(--serif);letter-spacing:.04em;color:var(--pink)}

/* 複製鍵：#22 括號展開鈕（沿用 .pill）。按下去文字變「已複製」，括號停在兩邊 */
.qa-copy.pill{min-height:30px;padding:0 1em;margin:0 -.2em 0 .2em;font-size:12.5px;vertical-align:middle;align-self:auto;color:var(--pink);font-weight:700}
.qa-codebar .qa-copy.pill{margin:0 -.9em 0 0}
.qa-copy.done::before{left:.28em;opacity:1}
.qa-copy.done::after{left:calc(100% - .28em);opacity:1}

/* 推 */
.push-row{display:flex;justify-content:flex-end;margin-top:12px}
.qa-push.pill{min-height:34px;font-size:14px;gap:.5em;align-self:auto;margin:0 -.8em 0 0}
.qa-push b{font:italic 600 15px/1 var(--latin);color:var(--pink);min-width:1ch;text-align:left}
.qa-push.bump b{animation:qa-bump .38s var(--ease)}
@keyframes qa-bump{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-5px) scale(1.35)}100%{transform:translateY(0) scale(1)}}

/* 評價＋回覆 */
.qa-review{margin-top:22px;padding:14px 16px;border:1px dashed var(--line-strong);background:var(--bg2)}
.qa-review .row+.row{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.qa-review .lab{font:600 14px/1.6 var(--serif);letter-spacing:.06em;color:var(--muted);margin-right:.5em}
.stars{color:var(--pink);letter-spacing:.12em;font-size:17px}

/* 其他回答／相關問題 */
.qa-sec{font:600 clamp(18px,2.6vw,22px)/1.4 var(--serif);letter-spacing:.05em;margin:38px 0 10px;display:flex;align-items:baseline;gap:.6em}
.qa-sec em{font:italic 400 14px/1 var(--latin);color:var(--muted);letter-spacing:.02em}
.qa-others{list-style:none;margin:0;padding:0}
.qa-others>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:16px 0;border-top:1px solid var(--line)}
.qa-others>li:last-child{border-bottom:1px solid var(--line)}
.qa-others .name{font:600 15px/1.5 var(--serif);letter-spacing:.03em}
.qa-others .text{margin:2px 0 0}
.qa-others .push-row{margin-top:2px}
.qa-related{list-style:none;margin:0;padding:0}
.qa-related li{padding:11px 0 11px 1.6em;position:relative;border-top:1px solid var(--line);font:500 16px/1.6 var(--sans)}
.qa-related li:last-child{border-bottom:1px solid var(--line)}
.qa-related li::before{content:"Q";position:absolute;left:0;top:11px;font:italic 800 16px/1.6 var(--latin);color:var(--pink)}
.qa-note{margin:42px 0 0;text-align:center;font-size:12.5px;color:var(--muted);letter-spacing:.06em}

/* 貼紙池（等一下那行之後才打開）。貼紙樣式沿用 /style.css 的 .sticker／.st-*；位置跟角度交給 qa.js 的物理 */
.qa-pit{position:relative;height:0;margin:0 calc(var(--gut) * -1);overflow:visible}
.qa-pit.open{height:clamp(260px,72vw,330px);margin-top:10px;margin-bottom:10px}
.qa-pit .sticker{cursor:grab}
.qa-st .st-in{padding:0 9%}
.qa-st .st-in b{font:900 calc(var(--sz,160px) * .125)/1.15 var(--serif);letter-spacing:.01em;white-space:nowrap}
.qa-st .st-in small{font:600 calc(var(--sz,160px) * .08)/1.3 var(--latin);opacity:.9}
.s-ceo{--c:#3b2350;--fg:#ffd9a8}
.s-knight{--c:#8fb4ff;--fg:#1d2a55}
.s-vamp{--c:#8c1d3f;--fg:#ffe6ee}
.qa-st .st-ring{font-size:6px}

/* /qa/ 首頁的列表 */
.qa-list{list-style:none;margin:0;padding:0}
.qa-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:18px 0;border-top:1px solid var(--line)}
.qa-list li:last-child{border-bottom:1px solid var(--line)}
.qa-list a.t{font:600 clamp(17px,2.4vw,20px)/1.5 var(--serif);letter-spacing:.03em;text-decoration:none;
  background:linear-gradient(var(--pink),var(--pink)) 50% 100% / 0% 1.5px no-repeat;transition:background-size .45s var(--ease)}
.qa-list a.t:hover,.qa-list a.t:focus-visible{background-size:100% 1.5px;outline:none}
.qa-list .meta{margin-top:6px}
.qa-list .snip{margin:4px 0 0;color:var(--muted);font-size:14.5px}

@media (max-width:719px){
  .stamp{width:38px;height:38px;font-size:17px}
  .qa-others>li{grid-template-columns:38px minmax(0,1fr);gap:4px 10px}
  .qa-list li{grid-template-columns:38px minmax(0,1fr);gap:4px 10px}
  .qa-ans ol>li{padding-left:1.9em}
}
@media (prefers-reduced-motion:reduce){
  .qa-push.bump b{animation:none}
  .qa-list a.t{transition:none}
}

/* ---------- 名條（可重用：排行榜之後也用）----------
   .nm 把名條跟等級排成一行；.tag-name 是名條本體；顏色／效果用 .tag-rainbow／.tag-moon／.tag-forest／.tag-gold／.tag-fruit；等級章用 .tag-lv + .tag-lv1／2／3。
   日夜主題各一組色（深淺底都要看得清楚）；減少動態時漸層停在靜態那一格。 */
.nm{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;vertical-align:middle}
.who .nm b{display:inline}
.tag-name{display:inline-block;padding:0 .7em;border:1px solid var(--line-strong);border-radius:999px;font:700 14px/1.75 var(--sans);letter-spacing:.06em;white-space:nowrap;vertical-align:middle}
.who b.tag-name{display:inline-block;font:700 15px/1.75 var(--sans)}
/* 彩虹：漸層文字，每 7 秒平移一整個色循環（Discord 漸層名條那種） */
.tag-rainbow{--rb1:oklch(60% .22 20);--rb2:oklch(66% .17 55);--rb3:oklch(66% .15 100);--rb4:oklch(60% .17 150);--rb5:oklch(58% .17 235);--rb6:oklch(55% .21 300);
  color:transparent;-webkit-text-fill-color:transparent;border-color:color-mix(in oklch,var(--rb5) 40%,transparent);
  background:linear-gradient(90deg,var(--rb1),var(--rb2),var(--rb3),var(--rb4),var(--rb5),var(--rb6),var(--rb1)) 0 0 / 200px 100% repeat-x;
  -webkit-background-clip:text;background-clip:text;animation:tag-flow 7s linear infinite}
[data-theme="night"] .tag-rainbow{--rb1:oklch(76% .17 20);--rb2:oklch(82% .13 60);--rb3:oklch(88% .15 105);--rb4:oklch(80% .17 150);--rb5:oklch(78% .13 235);--rb6:oklch(76% .16 300)}
@keyframes tag-flow{to{background-position:200px 0}}
/* 月光：深夜底板上，銀白漸到淡紫，慢慢流動（板子日夜都是深色，字才看得清楚） */
.tag-moon{color:transparent;-webkit-text-fill-color:transparent;border-color:oklch(72% .08 300 / .6);
  background:linear-gradient(90deg,oklch(97% .008 260),oklch(86% .06 290),oklch(78% .12 305),oklch(86% .06 290),oklch(97% .008 260)) 0 0 / 120px 100% repeat-x,
    oklch(26% .05 290);
  -webkit-background-clip:text,padding-box;background-clip:text,padding-box;animation:tag-flow-moon 9s linear infinite}
@keyframes tag-flow-moon{to{background-position:120px 0,0 0}}
/* 單色名條：從本站色票挑（葉綠、金、果肉橘），字色往墨色靠一點，淺色底也讀得到 */
.tag-forest,.tag-gold,.tag-fruit{color:color-mix(in oklch,var(--c) 52%,var(--ink));background:color-mix(in oklch,var(--c) 15%,transparent);border-color:color-mix(in oklch,var(--c) 50%,transparent)}
.tag-forest{--c:var(--forest)}
.tag-gold{--c:var(--gold)}
.tag-fruit{--c:var(--fruit)}
/* 等級章：小方塊，等級越高越亮 */
.tag-lv{display:inline-block;padding:0 .55em;border:1px solid currentColor;font:700 12px/1.7 var(--sans);letter-spacing:.08em;white-space:nowrap;vertical-align:middle}
.tag-lv1{color:var(--muted)}
.tag-lv2{color:color-mix(in oklch,var(--forest) 60%,var(--ink))}
.tag-lv3{color:var(--pink);background:var(--pink-soft)}
.qa-others .name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}

/* 補充｜踩過的坑 */
.qa-extra{margin-top:30px;padding:16px 18px 14px;border:1px dashed var(--line-strong);background:var(--bg2)}
.qa-ans .qa-extra-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:6px}
.qa-ans .qa-extra h3{margin:0;padding:0;border:0;color:var(--pink)}
.qa-extra .stamp{width:30px;height:30px;font-size:14px}
.qa-extra .who b{display:inline;font-size:15px}

/* 我要發問（頂列）*/
.qa-top .qa-ask{margin:0 -.2em 0 auto;color:var(--pink);font-weight:700;align-self:center}
.qa-top .icon-btn{flex:none}

/* 留言（giscus）：外框用 .frame（呼吸角標框）；iframe 本身 giscus 管 */
.qa-comments{margin-top:38px;padding:4px clamp(14px,3vw,24px) 20px;--fc:var(--pink);background:var(--card)}
.qa-comments .qa-sec{margin-top:18px;margin-bottom:2px}
.qa-cm-note{margin:0 0 12px;font-size:13.5px;color:var(--muted);letter-spacing:.04em}
.qa-comments .giscus,.qa-comments .giscus-frame{width:100%;min-height:120px}


/* ---------- 名條顏色（機器人 qa-bot 的 COLORS 一一對應：tag-<id>）----------
   單色（1–2 級）：pink 葡萄柚粉、fruit 果肉橘、gold 蜜金（上面那組）、mint 薄荷綠、sky 天空藍
   兩色漸層（3–5 級）：sunset 日落、meadow 草地、sea 海汐、lilac 丁香
   流動彩條（6 級以上）：candy 糖漿、aurora 極光、soda 汽水
   保留：rainbow 彩虹（太空葡萄柚）、moon 月光（知識長）。 */
:root{--np-pink:oklch(56% .2 355);--np-fruit:oklch(64% .14 45);--np-gold:oklch(62% .12 82);--np-mint:oklch(56% .12 155);--np-sky:oklch(56% .13 240);--np-violet:oklch(54% .17 300);--np-teal:oklch(58% .1 195);--np-lime:oklch(66% .14 118)}
[data-theme="night"]{--np-pink:oklch(76% .15 352);--np-fruit:oklch(78% .12 50);--np-gold:oklch(82% .12 88);--np-mint:oklch(80% .14 155);--np-sky:oklch(78% .11 240);--np-violet:oklch(76% .15 300);--np-teal:oklch(80% .1 195);--np-lime:oklch(88% .15 118)}
.tag-pink,.tag-mint,.tag-sky{color:color-mix(in oklch,var(--c) 52%,var(--ink));background:color-mix(in oklch,var(--c) 15%,transparent);border-color:color-mix(in oklch,var(--c) 50%,transparent)}
.tag-fruit{--c:var(--np-fruit)}.tag-gold{--c:var(--np-gold)}
.tag-pink{--c:var(--np-pink)}.tag-mint{--c:var(--np-mint)}.tag-sky{--c:var(--np-sky)}
/* 漸層／流動：文字漸層＋淡底；流動的那排每 7 秒平移一個色循環 */
.tag-sunset,.tag-meadow,.tag-sea,.tag-lilac,.tag-candy,.tag-aurora,.tag-soda{color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  border-color:color-mix(in oklch,var(--g2) 45%,transparent)}
.tag-sunset{--g1:var(--np-fruit);--g2:var(--np-pink)}
.tag-meadow{--g1:var(--np-mint);--g2:var(--np-gold)}
.tag-sea{--g1:var(--np-sky);--g2:var(--np-mint)}
.tag-lilac{--g1:var(--np-pink);--g2:var(--np-violet)}
.tag-sunset,.tag-meadow,.tag-sea,.tag-lilac{background-image:linear-gradient(90deg,var(--g1),var(--g2))}
.tag-candy{--g1:var(--np-pink);--g2:var(--np-fruit);--g3:var(--np-gold)}
.tag-aurora{--g1:var(--np-mint);--g2:var(--np-sky);--g3:var(--np-violet)}
.tag-soda{--g1:var(--np-sky);--g2:var(--np-teal);--g3:var(--np-lime)}
.tag-candy,.tag-aurora,.tag-soda{background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g1));background-size:200px 100%;background-repeat:repeat-x;animation:tag-flow 7s linear infinite}

/* ---------- 知識+ 排行榜（/qa/）與本題熱心解答者 ---------- */
.qa-lb{margin-top:28px}
.lb-list{list-style:none;margin:0;padding:0;counter-reset:lb}
.lb-list li{display:grid;grid-template-columns:2em 32px minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 2px;border-top:1px solid var(--line)}
.lb-list li:last-child{border-bottom:1px solid var(--line)}
.lb-rank{font:italic 800 18px/1 var(--latin);color:var(--muted);text-align:center}
.lb-list li:nth-child(1) .lb-rank{color:var(--pink)}
.lb-av{width:32px;height:32px;border-radius:50%;background:var(--bg2);object-fit:cover;border:1px solid var(--line-strong)}
.lb-who{min-width:0}
.lb-who .tag-name{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lb-cnt{font:600 13.5px/1.5 var(--sans);color:var(--muted);letter-spacing:.04em;text-align:right;white-space:nowrap}
.lb-cnt b{font:italic 800 17px/1 var(--latin);color:var(--ink);margin-right:.2em}
li.lb-empty{display:block;padding:18px 4px;color:var(--muted);letter-spacing:.04em;text-align:center;border-top:1px dashed var(--line-strong);border-bottom:1px dashed var(--line-strong)}
.lb-howto{margin:12px 0 0;font-size:14px;color:var(--muted);letter-spacing:.04em}
.lb-howto code{font-size:.92em;padding:.1em .5em;background:var(--pink-soft);color:var(--ink);white-space:nowrap}
.lb-howto a{color:var(--pink);font-weight:600}
.lb-tiers{margin:14px 0 0;padding:12px 14px;border:1px dashed var(--line-strong);background:var(--bg2);display:grid;gap:10px}
.lb-tiers dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center}
.lb-tiers dt{font:700 12.5px/1.7 var(--sans);letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.lb-tiers dd{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.lb-tiers .tag-name{font-size:13px;line-height:1.6}
.lb-tiers small{grid-column:1/-1;color:var(--muted);font-size:12.5px;letter-spacing:.04em}
.qa-helpers{margin:14px 0 4px;padding:8px 0 10px;border-bottom:1px dashed var(--line-strong);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.qa-helpers[hidden]{display:none}
.qa-helpers .lbl{font:700 13px/1.7 var(--sans);letter-spacing:.08em;color:var(--pink)}
.qa-helpers ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.qa-helpers li{display:inline-flex;align-items:center;gap:6px}
.qa-helpers .lb-av{width:24px;height:24px}
@media (max-width:719px){
  .lb-list li{grid-template-columns:1.6em 28px minmax(0,1fr);gap:2px 8px}
  .lb-av{width:28px;height:28px}
  .lb-cnt{grid-column:3;text-align:left}
  .lb-tiers dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tag-rainbow,.tag-moon,.tag-candy,.tag-aurora,.tag-soda{animation:none}
}

/* 排行榜／熱心解答者用像素動物當頭像（無外框線、淡色圓底） */
.av.lb-av{border:0;background:var(--av-bg,var(--bg2));display:inline-grid;place-items:center;overflow:hidden}
.av.lb-av svg{display:block;width:100%;height:100%;image-rendering:pixelated}