/* KanPan 基底樣式 —— 技術參考手冊質感
   取代原本的 React 模板樣式表(21KB,其中 46 個 class 全站沒用到)。
   視覺方向參考:makingsoftware.com(紙感底 + 等寬標註 + 方格紙圖版),
   本站在此基礎上改成中文長文閱讀用的襯線排版。 */

@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/ibm-plex-mono-latin-ext-400-normal-BmRBH3aV.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* 紙與墨:暖白底、冷黑字,刻意避開純白(#fff)與深色終端機配色 */
  --paper:#f6f4ee;
  --paper-2:#fbfaf6;
  --paper-sunk:#ece9dd;
  --ink:#1b1d21;
  --ink-soft:#33363c;
  --ink-muted:#6d727c;
  --rule:#ddd8ca;
  --rule-strong:#b4ae9d;

  /* 單一強調色:製圖藍。同帳號其他站分別是深色+橘、白底+灰綠,藍色不撞 */
  --accent:#1c3fd6;
  --accent-soft:#e6eafb;
  --accent-ink:#ffffff;

  /* 圖表語意色(只用在 K 線圖版裡) */
  --up:#1a7a4c;
  --down:#b4402a;

  /* 方格紙 */
  --grid:rgba(28,63,214,.07);

  /* 相容舊 token 名,site.css 大量沿用,不必逐條改寫 */
  --color-bg:var(--paper);
  --color-surface:var(--paper-2);
  --color-surface-raised:var(--paper-2);
  --color-text:var(--ink);
  --color-muted:var(--ink-muted);
  --color-line:var(--rule);
  --color-line-strong:var(--rule-strong);
  --color-accent:var(--accent);
  --color-accent-ink:var(--accent-ink);

  --font-display:"Noto Serif TC","Songti TC","Source Han Serif TC","Source Han Serif TW",PMingLiU,Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --radius-sm:3px;
  --radius-md:4px;
  --radius-lg:6px;

  --max-width:1180px;
  --page-pad:clamp(22px,3.6vw,54px);
}

*{box-sizing:border-box}

html{background:var(--paper);color-scheme:light}

body{
  margin:0;min-width:320px;min-height:100vh;
  background:var(--paper);color:var(--ink-soft);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  /* 頁面本身鋪一層極淡方格,像製圖紙 */
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  background-attachment:fixed;
}

button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

h1,h2,h3,h4{
  color:var(--ink);font-family:var(--font-display);
  font-weight:700;letter-spacing:0;
}

.app-shell{
  width:min(100%,var(--max-width));margin:0 auto;
  padding-inline:var(--page-pad);
}

/* ── 頁首:左品牌、中導航、右語言,底下一條實心細線像手冊的天頭 ── */
.site-header{
  min-height:76px;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:32px;
  border-bottom:1px solid var(--ink);
}

.brand{
  font-family:var(--font-mono);
  font-size:17px;font-weight:400;letter-spacing:.16em;
  color:var(--ink);
}

.main-nav{display:flex;align-items:center;gap:30px;justify-self:start}
.main-nav a{
  position:relative;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-muted);
}
.main-nav a:hover{color:var(--accent)}
.main-nav a.active{color:var(--ink)}
.main-nav a.active:after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:2px;background:var(--accent);
}

/* ── 小標籤:手冊裡的欄位編號感 ── */
.eyebrow{
  margin:0;color:var(--accent);
  font-family:var(--font-mono);font-size:10.5px;
  line-height:1.4;letter-spacing:.14em;text-transform:uppercase;
}

/* ── 主按鈕:實心方角,不用圓角膠囊(圓角膠囊是模板站標配) ── */
.primary-button{
  min-height:46px;width:max-content;
  display:inline-flex;align-items:center;justify-content:center;gap:18px;
  padding:0 22px;
  border:1px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
  transition:background-color .14s ease,border-color .14s ease;
}
.primary-button:hover{background:var(--accent);border-color:var(--accent)}

.section-heading{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid var(--ink);
}
.section-heading h2{margin:0;font-size:19px}
.section-heading a{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--ink-muted);white-space:nowrap;
}
.section-heading a:hover{color:var(--accent)}

.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;
}