/* ============================================================
   Design System — Global Base Styles  v2.0
   ============================================================
   ⚠  此檔為全站唯一的 Design Token 來源。
      各 app CSS 不應複製此檔內容，直接繼承即可。
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* 品牌主色（深企業藍，TSMC 風格） */
  --color-primary: #0c2340;
  --color-primary-light: #1a4480;
  --color-primary-dark: #071628;

  /* 強調色（企業亮藍） */
  --color-accent: #1d8fe0;
  --color-accent-light: #4aacf0;
  --color-accent-dark: #0d6fbb;

  /* 淺色底系（Header 下面、主頁淺色版面） */
  --color-bg: #ffffff;
  --color-bg-soft: #f4f6f9;
  --color-text: #0c2340;
  --color-text-muted: #5a6b7e;
  --color-border: #dce3ed;
  --color-border-table: #8ea8c4;

  /* 輔助色 */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-light: #fafafa;
  --color-overlay: rgba(255, 255, 255, 0.2);

  /* 字型（中文預設）*/
  --font-family: 'Roboto', 'Noto Sans TC', sans-serif;

  /* 排版（中文預設）*/
  --fs-base: 1.125rem;
  /* 18px */
  --line-height-base: 2rem;
  --letter-spacing-base: 0.09rem;
  --text-align-base: justify;

  /* 間距 */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-last: 3.75rem;

  /* 動畫 */
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 英文版覆寫 ──────────────────────────────────────────── */
html[lang="en"] {
  --font-family: 'Roboto', 'Noto Sans TC', sans-serif;
  --fs-base: 1rem;
  /* 16px */
  --letter-spacing-base: 0.02rem;
  --text-align-base: left;
}

/* ── 全域重置與滾動條 ─────────────────────────────────────── */
html,
body {
  /* 隱藏瀏覽器滾動條（保留滑鼠滾動與觸控滑動） */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE / 舊版 Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Chrome, Edge, Safari */
  width: 0;
  height: 0;
}

* {
  font-family: var(--font-family);
  text-align: var(--text-align-base);
}

html[lang="zh-Hant"] * {
  text-justify: distribute;
}

/* ── 標題 ─────────────────────────────────────────────────── */
h1 {
  font-size: 2.125rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.625rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.375rem;
}

/* ── 段落 ─────────────────────────────────────────────────── */
p {
  font-size: var(--fs-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-base);
  margin: 0.3125rem 0rem 0.9375rem 0rem;
}

/* ── 清單 ─────────────────────────────────────────────────── */
li {
  font-size: var(--fs-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-base);
  margin: 0.3125rem 0rem;
}

/* ── 連結 ─────────────────────────────────────────────────── */
a:hover,
a:visited,
a:link,
a:active {
  color: var(--color-primary);
  text-decoration: none;
  outline: none;
}

/* ── 標題樣式工具類 ────────────────────────────────────────── */
.set-h1,
.set-h2,
.set-h3,
.set-h4,
.set-h5,
.set-h6 {
  color: var(--color-primary);
  font-weight: bold;
  text-shadow: none;
  padding: 30px 0px 5px 0px;
}

.set-h1-w,
.set-h2-w,
.set-h3-w,
.set-h4-w,
.set-h5-w,
.set-h6-w {
  color: var(--color-primary);
  font-weight: bold;
  text-shadow: none;
  padding: 30px 0px 5px 0px;
}

/* ── 標題裝飾底線工具類 ────────────────────────────────────── */
.set-title-underline {
  position: relative;
  display: block;
  border-bottom: 2px solid rgba(12, 35, 64, 0.08);
  padding-bottom: 0.75rem !important;
  margin-bottom: 1.5rem;
}

.set-title-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--color-accent, #1d8fe0);
}

/* ── 次標題裝飾底線工具類 ─────────────────────────────────── */
.set-subtitle-underline {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(12, 35, 64, 0.08);
  padding-bottom: 0.5rem !important;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.set-subtitle-underline::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--color-accent, #1d8fe0);
}

/* ── 背景 ─────────────────────────────────────────────────── */
.background-color-primary {
  background-color: var(--color-bg-soft);
}

.background-color-primary-dark {
  background-color: var(--color-bg-soft);
}

.background-main-pic {
  /* 舊式斜線圖片背景已停用，改為淺色主題 */
  background-image: none;
}


/* ── 圖片 ─────────────────────────────────────────────────── */
.img-border-radius {
  border-radius: 1rem;
}

/* SVG icon：白色 → hover 變金色 */
.set-icon-img a {
  -webkit-filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(217deg) brightness(105%) contrast(101%);
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(217deg) brightness(105%) contrast(101%);
}

.set-icon-img a:hover {
  -webkit-filter: invert(95%) sepia(54%) saturate(2186%) hue-rotate(317deg) brightness(97%) contrast(90%);
  filter: invert(95%) sepia(54%) saturate(2186%) hue-rotate(317deg) brightness(97%) contrast(90%);
}

/* ── 排版工具類 ─────────────────────────────────────────────── */
.set-list-indent {
  margin-left: 1.5rem;
  list-style: decimal;
  line-height: var(--line-height-base);
}

.set-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* ── 間距工具類 ─────────────────────────────────────────────── */
.set-margin-s {
  margin: var(--space-s);
}

.set-margin-top-s {
  margin-top: var(--space-s);
}

.set-margin-xs {
  margin: var(--space-xs);
}

.set-padding-s {
  padding: var(--space-s);
}

.set-last-bottom {
  padding-bottom: var(--space-last);
  margin-bottom: 0;
}

/* ── 表格 ─────────────────────────────────────────────────── */
table {
  margin: 0.5rem 0rem;
  width: 100%;
  border-collapse: collapse;
}

table th,
table td,
th,
td {
  padding: var(--space-s);
  border: 1px var(--color-border-table, #8ea8c4) solid;
  color: var(--color-text);
}

.set-table-head {
  background-color: var(--color-accent-dark);
  color: var(--color-white);
}

.set-table-head td,
.set-table-head th,
td.set-table-head,
th.set-table-head {
  color: var(--color-white);
}

.set-text-center {
  text-align: center;
}

.set-table-w1 {
  width: 8.333%;
}

.set-table-w2 {
  width: 16.666%;
}

.set-table-w3 {
  width: 25%;
}

.set-table-w4 {
  width: 33.333%;
}

.set-tr-boder-bottom {
  border: 0px;
  border-bottom: 1px solid var(--color-accent);
}