/* suite 主題・navy 色盤：深藍 × 炭灰 × 橘，膠囊按鈕
   由設計系統 tokens.json 產生；要改顏色改設計系統再重新產生，不要直接改這裡。 */
:root {
  --brand: #26355f;
  --brand-strong: #1b2645;
  --brand-tint: #dfeaf4;
  --brand-soft: #8a95ad;
  --on-brand: #ffffff;
  --accent: #3f3f3f;
  --accent-strong: #231815;
  --on-accent: #ffffff;
  --mark-1: #e47d42;
  --mark-2: #3f3f3f;
  --surface-page: #f4f7fb;
  --surface: #ffffff;
  --surface-sunken: #f7f9fc;
  --border: #e1e1e1;
  --border-control: #8a95ad;
  --ink: #3f3f3f;
  --ink-strong: #231815;
  --ink-muted: #59606e;
  --success: #1e5b3a;
  --success-bg: #ddf2e6;
  --warning: #8a6a00;
  --warning-bg: #fff4c2;
  --danger: #9b1c1c;
  --danger-bg: #fbe2e2;
  --info: #2b6e92;
  --info-bg: #e3f2fb;
  --focus: var(--brand);
  --shadow-card: 0 1px 2px rgba(31, 33, 87, 0.06);
  --shadow-pop: 0 12px 32px rgba(31, 33, 87, 0.16);
  --shadow-cta: 0 6px 16px rgba(35, 24, 21, 0.18);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-button: 100px;
  --sidebar-width: 248px;
  --content-max: 1200px;
  --control-min: 44px;
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* ---------- navy 色盤的元件細節：膠囊按鈕、斜角區塊記號、加寬字距 ---------- */
/* 大按鈕：炭灰全圓角膠囊、15px、加寬字距。
   滑過：底色加深到 accent-strong、浮起 1px、陰影變深；按下時回到原位。不加箭頭或其他符號。 */
.cc-btn--cta { padding: 12px 32px; font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.cc-btn--cta:not(:disabled):hover { background: var(--accent-strong); transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(35, 24, 21, 0.26); }
.cc-btn--cta:not(:disabled):active { transform: none; box-shadow: var(--shadow-cta); }
@media (prefers-reduced-motion: reduce) { .cc-btn--cta { transition: none; } .cc-btn--cta:not(:disabled):hover { transform: none; } }
.cc-btn { letter-spacing: 0.06em; }
/* 區塊標題：橘色斜角色塊 */
.cc-sechead { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; line-height: 32px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.cc-sechead::before { content: ""; flex: 0 0 auto; width: 14px; height: 32px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAACNCAMAAADRqpnXAAAAM1BMVEVMaXHkfULkfULkfULkfULkfULkfULkfULkfULkfULkfULkfULkfULkfULkfULkfULkfUKxeUBDAAAAEHRSTlMA8GCAEOCgwEAgsFCQMHDQtMlw6QAAAAlwSFlzAAAhNwAAITcBM1ifegAAALpJREFUaIHt1MkOwjAMRdGWqTN9//+1OEiIlg6JvUTX+yPlKpar4VZFp6kfXZRK6tswleZLmEr3qzv6Q2280QsqNa7oFbV3O6J/qFQXR29oip7C1KKHME3R2Xcf0RSd+axjmo0+pefRGWrRz6PoLLXocT+6gKbovQ0toxa93dBSuhNdTjfRHqr1LXLS5S1y0+8tClCLft+iELXpuzBVC4VCoVAoFAqFQqFQKBQKhUKhUCgUCv1fOjbBmV4JoMTOE4jy7QAAAABJRU5ErkJggg==") center / contain no-repeat; }
.cc-pagehead h1 { letter-spacing: 0.04em; color: var(--ink); }
.cc-card__title { letter-spacing: 0.08em; }
/* 導覽：加寬字距 */
.cc-nav__item { font-weight: 500; letter-spacing: 0.1em; }
.cc-btn--sm { border-radius: var(--radius-button); }