/*! © 2026 Skyfaring（Shot Ledger）. All rights reserved. 未經書面同意不得重製、改作或用於其他產品。https://shot-ledger.skyfaring.net/terms/ */
/* css/story.css — 射手檔案（/stories/）專用樣式。
 *
 * 這幾頁是**獨立的靜態 HTML**，不是 SPA 的一部分（比稿定案 A 案「刊號檔案」）。
 * 為什麼不做成 #/story/xxx：hash 對搜尋引擎是同一個網址，做了也不會被當成獨立頁面
 * 索引，等於白做——而這幾頁存在的理由有一半就是自然搜尋流量（SPEC_M17 §1）。
 *
 * 色彩／字級／間距一律吃 css/tokens.css，本檔不自己定義任何顏色值。
 * 深色模式：靜態頁沒有 app.js，改由每頁 <head> 的三行 inline script 設定
 * <html data-theme>（先讀 App 存的偏好，沒有就跟系統），tokens.css 的深色區塊照樣生效。
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
.nowrap { white-space: nowrap; }

.story {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-8);
}

/* 回上層：每頁都要有（單頁落地的訪客需要出口）。SPEC_M36（R6 #46）：這是這幾頁唯一的「回去」，
   原本 12 px 灰字、觸控 16 px。改成 App 按鈕系統的 link（橘字 14 px、44 px 熱區、按下淡橘底）——
   靜態頁不載 app.css，樣式寫在這裡、值吃 tokens.css 的 --btn-* */
.story__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h);
  margin: var(--space-4) 0 0;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--btn-font-sm);
  font-weight: var(--btn-weight);
  color: var(--btn-link-fg);
  /* v120：原本「← Shot Ledger」，拿掉箭頭改成「Shot Ledger 首頁」＋底線（跟頁內 .of__nm 同一種連結標記）。
     不寫「回 Shot Ledger」：「回」字單獨放在英文前面，粗體橘字看起來像一個方框圖示 */
  text-decoration: none;
}

.story__back:active { background: var(--btn-link-press); }
.story__back:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* 刊頭：關卡序號當浮水印（呼應 App 內 hero 卡與徽章數字盤的同一套語彙）      */
/* ---------------------------------------------------------------------- */

.masthead {
  position: relative;
  padding: var(--space-6) 0 var(--space-5);
  overflow: hidden; /* 刊號浮水印刻意超出右邊界，這裡切掉才不會造成水平溢出 */
}

.masthead__bignum {
  position: absolute;
  top: 4px;
  right: -6px;
  font-size: 132px;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--color-border);
  user-select: none;
  z-index: 0;
}

.masthead__kicker,
.masthead__name,
.masthead__meta { position: relative; z-index: 1; }

/* 小字一律用 accent-dark：實測 accent 在淺色底只有 3.4:1（AA 小字要 4.5），
   accent-dark 是 5.19:1；深色模式下 accent-dark 是 #E8590C，同樣過關。 */
.masthead__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--color-accent-text);
}

.masthead__name {
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--leading-tight);
}

.masthead__meta {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.masthead__rule {
  position: relative;
  z-index: 1;
  height: 2px;
  background: var(--color-text);
  margin-top: var(--space-5);
}

/* ---------------------------------------------------------------------- */
/* 生涯數據帶：沿用 App 內 hero 卡的夜幕深藍面板                            */
/* ---------------------------------------------------------------------- */

.statband {
  margin-top: var(--space-5);
  background: var(--color-night);
  color: var(--color-on-night);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.statband__num {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.statband__num small { font-size: .6em; font-weight: 700; }

.statband__lab {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--color-on-night-muted);
  text-align: center;
}

.statband__src {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-night-line);
  font-size: 10px;
  line-height: var(--leading-normal);
  color: var(--color-on-night-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* 正文                                                                    */
/* ---------------------------------------------------------------------- */

.prose { margin-top: var(--space-6); }

.prose h2 {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

.prose h2 + p { margin-top: 0; }
.prose p {
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-text);
}
.prose p + p { margin-top: var(--space-4); }
.prose section + section { margin-top: var(--space-6); }

/* 重點句：底線式螢光，不是整段變色（整段變色在長文裡很吵） */
.prose em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--color-accent-tint) 62%);
}

.pull {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.pull__who {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* 菜單區：輪次序列                                                        */
/* ---------------------------------------------------------------------- */

.menu {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.menu__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.menu__title { font-size: var(--text-sm); font-weight: 800; }
.menu__sub { font-size: var(--text-xs); color: var(--color-text-muted); }

.menu__rounds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-3);
}

.rd {
  width: 36px;
  height: 38px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 10px;
  font-weight: 700;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  /* 10px 的格內小字用 muted 在深色模式只有 4.06:1（AA 小字要 4.5），直接用 text */
  color: var(--color-text);
}

.rd b { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-text); }

/* 三分輪染 accent-tint：一眼看得出這份菜單的距離結構。
   文字色刻意不跟著改成 accent-dark——accent-dark 壓在深色模式的 accent-tint 上只有
   4.06:1，10px 小字不及格；而且距離本來就有文字寫在格子裡，顏色只是輔助訊號。 */
.rd--three {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-tint);
}
.rd--ft { background: var(--color-surface); }

.menu__gate {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.menu__gate strong { font-weight: 800; }

.menu__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* CTA ／ 頁尾 ／ 其他檔案                                                  */
/* ---------------------------------------------------------------------- */

.cta {
  display: block;
  margin-top: var(--space-6);
  min-height: var(--touch-min);
  line-height: var(--touch-min);
  text-align: center;
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--color-on-fill);
  background: var(--color-fill-accent);
  border-radius: var(--radius-md);
}

/* CTA 下方的誠實補充：階梯不給跳關，先講清楚點下去會發生什麼（SPEC_M19 §1） */
.cta-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  text-align: center;
}

/* v112：全站不用描邊鈕——次要 CTA 改淡底無框（同 app 的 .btn-tonal） */
.cta--ghost {
  margin-top: var(--space-3);
  color: var(--color-text);
  background: var(--color-surface-sunken);
}

.foot {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  font-size: 11px;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* 出處連結（R6 #47）：14 px、底線、44 px 熱區（行內撐高，不另起一行） */
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h);
  font-size: var(--btn-font-sm);
  color: var(--btn-link-fg);
  text-decoration: none;
}
.foot p + p { margin-top: var(--space-2); }

.others { margin-top: var(--space-7); }

/* text-faint 在淺色底只有 3.26:1，凡是承載內容的文字一律用 muted（5.83:1）；
   faint 只留給純裝飾（例如刊號浮水印）。 */
.others__title {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--color-text-muted);
}

.others__list { margin-top: var(--space-3); }

.of {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}

.of__n {
  width: 24px;
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* 可點的訊號用底線，不用右箭頭：一整排「→」是最沒有個性的 CTA 語彙，而底線是
   印刷與網頁一直以來就在用的連結標記，跟這幾頁的雜誌調性也合。 */
.of__nm {
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.of__fc { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-muted); }

/* ---------------------------------------------------------------------- */
/* 索引頁（/stories/）                                                     */
/* ---------------------------------------------------------------------- */

.index-head { padding: var(--space-7) 0 var(--space-5); }

.index-head__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--color-accent-text);
}

.index-head__h1 {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  text-wrap: balance; /* v156：長標題手機上不留一個字掉到第三行（出處頁「研究」→「研／究」） */
}

.index-head__lead {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.index-note {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* 頁尾著作權與條款連結（v102）：所有靜態頁同一行 */
.site-legal { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.site-legal a { color: inherit; }

/* v107（SEO 稽核第 6 面向）：內文、註腳、頁尾的文字連結熱區撐到 44 px。
   上下內距撐高、同樣大小的負外距抵掉，行距與版面不變。
   v179（SPEC_M97 #29）：左右也一樣——內距 10、負外距 10（可點寬＝字寬＋20，兩個字的連結也有 44 寬），字的位置不動。
   以前用 min-width: 44px 讓短字置中，「關於」「Kima」前後就多出一塊空白 */
.prose p a, .prose li a, .prose dd a, .qa p a, .qa li a, .refs li a, .index-note a, .site-legal a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
  padding-inline: 10px;
  margin-inline: -10px;
}

/* v179（SPEC_M97 #31）：上面那條沒涵蓋到的行內連結（頁首導言、已知問題頁「怎麼回報」與詳細、更新紀錄的條目）高只有 21——
   同一個做法撐到 44，行距與字的位置不動 */
.index-head__lead a:not([class]), .ki-how a:not([class]), .ki-facts dd a:not([class]), .story section > ul > li a:not([class]) {
  display: inline-block;
  padding: 14px 10px;
  margin: -14px -10px;
}

/* v128（SPEC_M62 A）：同步圖解（說明頁 #pair、FAQ 同步那題）——上下排那一張，淺色／深色照 <html data-theme> 換 */
.sync-fig.sync-fig--tall {
  max-width: 420px;
  margin: var(--space-4) auto 0;
}

.sync-fig.sync-fig--faq {
  max-width: 320px;
}

.sync-fig .sync-fig__pic {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.sync-fig .sync-fig__pic--dark,
:root[data-theme='dark'] .sync-fig .sync-fig__pic--light {
  display: none;
}

:root[data-theme='dark'] .sync-fig .sync-fig__pic--dark {
  display: block;
}

/* ---------------------------------------------------------------------- */
/* v133（SPEC_M65 §10，使用者：底線很醜）：全站鏈結不畫底線。                */
/* 文內鏈結＝accent 字＋600，hover 加深；頁尾、小字＝墨色 70%，hover 墨色 100%；鍵盤焦點留外框。 */
/* ---------------------------------------------------------------------- */
a:not([class]) { color: var(--btn-link-fg); font-weight: 600; }
a:not([class]):hover { color: var(--color-accent-strong); }
.story__back:hover { color: var(--color-accent-strong); }
.of:hover .of__nm,
.of:active .of__nm { color: var(--color-accent-text); }
.foot a,
.site-legal a { color: var(--color-link-quiet); font-weight: 600; } /* v179：不再用 min-width 撐寬，不用置中 */
.foot a:hover,
.site-legal a:hover { color: var(--color-text); }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }