/* ============================================================
   仁才國際 v3 — GMI 版型語言（2026-08-04 整理版）

   設計來源：GMI 集團官網（demo2.withtron.com/gmi-www）＋ Codex 共用閱讀系統
   保留仁才：品牌金棕 #be945a 當強調色、全站文案一字未改、banner 素材沿用

   本次整理：原本三層歷史（v3 主體 → 履歷牆 → Codex 閱讀系統 → 新聞列表追加）
   疊在同一支檔案裡，10 組以上選擇器被定義兩次、後者靠位置取勝。
   已合併為單層：每個選擇器只定義一次，值＝疊加後「實際生效值」，
   畫面不變。區段順序對應階段二 Blade component（見 docs/component-map.md）。

   ⚠️ 整理時不能動的六件事（都是踩過坑換來的）：
   1. .toc[hidden]／.news-row[hidden]／.cv-card[hidden] 的 display:none 不能刪
      （這三個元件靠 JS 設 hidden 隱藏，作者樣式的 display 會蓋掉 hidden 屬性）
   2. 漢堡選單斷點是 991 不是 767
   3. 服務卡圖是固定高度不是固定比例（aspect-ratio 會壞版）
   4. 主視覺容器鎖 aspect-ratio 1024/346＋圖 cover（6 張 banner 比例不一）
   5. 標題區底圖遮罩是中性深色、只壓左側（藍色會讓人臉發青，Dennis 否決過）
   6. 聯絡頁表單淺色、頁尾表單深色，共用 class 但不共用配色
   ============================================================ */

/* ══════════════ 設計 token ══════════════ */
:root {
  /* 主色：GMI 深藍系（專業感來源） */
  --deep:     #00366e;   /* 主視覺底、頁尾、頁首導覽 */
  --deep-2:   #002a56;   /* 更深，用於漸層與 hover */
  --blue:     #0f5fa8;   /* 主要按鈕、連結 */
  --bright:   #2dbcfe;   /* 小標籤、強調線、focus */

  /* 仁才既有品牌色（保留識別，不被 GMI 藍吃掉） */
  --gold:     #be945a;   /* 次要按鈕、標題裝飾線、日期 */
  --gold-dk:  #a67d45;

  /* 中性 */
  --ink:      #1f2933;   /* 標題（元素預設；閱讀系統區用 --reading-ink） */
  --body:     #48525c;
  --muted:    #78838d;   /* 次要文字 */
  --line:     rgba(20, 45, 70, .12);
  --soft:     #f4f8fc;   /* 淺藍底區塊 */
  --paper:    #f7f9fb;   /* 頁面底色 */

  /* 閱讀系統（Codex 2026-08-03）：內文與卡片的字色、暖底、陰影 */
  --reading-ink: #202a35;
  --reading-body: #3f4a55;
  --reading-muted: #687580;
  --reading-warm: #fbf8f3;
  --reading-border: #dfe5e9;
  --reading-shadow: 0 10px 28px rgba(31, 41, 51, .09);
  --reading-shadow-hover: 0 16px 36px rgba(31, 41, 51, .14);

  /* 標題區遮罩：中性深色（近黑藍灰），只壓暗不染色。換成 --deep 就回到藍色版 */
  --band-veil: 14, 26, 38;

  /* 效果 */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --shadow:    0 4px 16px rgba(15, 45, 75, .06);
  --shadow-lg: 0 20px 40px -12px rgba(15, 45, 75, .18);

  --container: 1200px;
  --gutter: 24px;
}

/* ══════════════ 基礎 ══════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Noto Sans TC", "Source Han Sans TC", -apple-system, BlinkMacSystemFont,
    "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--reading-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .18s; }
a:hover { color: var(--deep); }
h1, h2, h3 { color: var(--ink); line-height: 1.35; margin: 0; font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--deep); color: #fff; padding: 10px 18px; z-index: 999;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--bright); outline-offset: 2px; }

/* 視覺隱藏但保留給輔助科技與搜尋引擎（首頁 sr-only h1 用） */
.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;
}

@media (max-width: 767px) {
  :root { --gutter: 20px; }   /* Dennis：手機左右要有邊界 */
  body { font-size: 16px; line-height: 1.75; }
}

/* ══════════════ 元件：頁首（→ site-header）══════════════ */

/* 頂部細條（取自 GMI：把次要資訊收進一條窄帶，主導覽才乾淨） */
.topbar {
  background: var(--deep-2);
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  line-height: 38px;
}
.topbar-inner { display: flex; align-items: center; gap: 22px; }
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: #fff; }
.topbar-hours { margin-left: auto; }
.topbar-sep { color: rgba(255, 255, 255, .3); }

/* 主列：logo ＋ 導覽 ＋ 行動按鈕 */
.site-header { position: relative; z-index: 40; background: #fff; }
.header-main { border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex; align-items: center; gap: 28px;
  height: 84px;
}
.header-logo img { width: 210px; height: auto; }

.nav-list { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: block;
  padding: 10px 15px;
  font-size: 16px; font-weight: 600;
  color: var(--ink);
  border-radius: var(--r-sm);
}
.nav-list > li > a:hover,
.nav-list > li > a.is-current {
  color: var(--deep);
  background: var(--soft);
}

/* 下拉（外勞申請） */
.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px; margin-left: 7px; vertical-align: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.sub-list {
  position: absolute; left: 0; top: 100%;
  min-width: 208px; padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.has-sub:hover .sub-list,
.has-sub:focus-within .sub-list { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-list a {
  display: block; padding: 9px 12px;
  font-size: 15px; color: var(--body); border-radius: var(--r-sm);
}
.sub-list a:hover { background: var(--soft); color: var(--deep); }

/* 頁首行動按鈕（取自 GMI 右上「聯絡我們」） */
.header-cta {
  padding: 11px 22px;
  background: var(--blue); color: #fff;
  font-size: 15.5px; font-weight: 700;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .18s;
}
.header-cta:hover { background: var(--deep); color: #fff; }

/* 漢堡（<992 才出現，斷點沿用已驗證的 991） */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; margin: 5px 0;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .header-inner { height: 70px; }
  .header-logo img { width: 180px; }

  .nav-list {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0;
    padding: 8px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav-list.is-open { display: flex; }
  .nav-list > li > a { padding: 13px 14px; }
  .sub-list {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--soft);
    border-radius: 0; margin: 0 0 4px 14px; padding: 0 0 0 8px;
  }
}

@media (max-width: 767px) {
  .topbar { font-size: 12.5px; line-height: 34px; }
  .topbar-hours { display: none; }
}

/* ══════════════ 元件：主視覺輪播（→ hero）══════════════
   ⚠️ 桌機 6 張 banner 比例不一致（1024×346／339／338、1600×533）。
   flex 容器高度取最高那張 → 較矮的圖下方會露出 .hero 的深藍底，形成一條色帶。
   解法：容器鎖成最高那張的比例，圖一律 cover。最大裁切量 2.4%，肉眼看不出來。 */
.hero { position: relative; overflow: hidden; background: var(--deep); }
.hero-desktop { aspect-ratio: 1024 / 346; }
.hero-mobile  { aspect-ratio: 1 / 1; }   /* 手機 7 張皆 1024×1024 */
.hero-track { display: flex; height: 100%; transition: transform .5s ease; }
.hero-slide { min-width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: var(--deep);
  background: rgba(255, 255, 255, .9);
  border: 0; border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer; opacity: 0; transition: opacity .2s, background .2s;
}
.hero:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: #fff; }
.hero-prev { left: 20px; }
.hero-next { right: 20px; }

.hero-mobile { display: none; }

@media (max-width: 767px) {
  .hero-desktop { display: none; }
  .hero-mobile { display: block; }
  .hero-arrow { display: none; }
}

/* ══════════════ 元件：特色卡（→ highlight-cards）══════════════
   GMI 深色底圖卡：照片＋由下往上的深色漸層＋內容壓在底部。
   ⚠️ 不做 GMI 那種 -56px 上浮：仁才 banner 是完整行銷圖、諮詢電話燒在圖裡，
      卡片壓上去會蓋掉電話（第一版就是這樣，Dennis 說「很怪」）。 */
.highlight-section { padding: 54px 0 0; }
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.highlight-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.highlight-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.highlight-card:hover img { transform: scale(1.05); }
/* 遮罩：GMI 原值配他的深色電路板底圖；仁才是明亮居家照片，照抄會讓小標籤看不見，
   加厚到 .74 又把人物壓成剪影 → 遮罩維持中等，可讀性交給文字陰影。 */
.highlight-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0, 20, 48, .92) 0%,
    rgba(0, 20, 48, .60) 42%,
    rgba(0, 20, 48, .22) 72%,
    rgba(0, 20, 48, .02) 100%);
}
.highlight-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 24px;
  text-shadow: 0 1px 4px rgba(0, 14, 34, .55);
}
/* 卡片整張是 <a>，內層用 span 才不會產生非法巢狀 → 需自行轉 block */
.highlight-tag, .highlight-title, .highlight-desc, .highlight-link { display: block; }

.highlight-tag {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.9px;
  color: var(--bright);
  margin: 0 0 6px;
}
.highlight-title {
  font-size: 21px; font-weight: 700; color: #fff;
  line-height: 1.4; margin: 0 0 7px;
}
.highlight-desc {
  font-size: 14.5px; line-height: 1.65;
  color: rgba(226, 235, 245, .9);
  margin: 0 0 9px;
}
.highlight-link {
  font-size: 14.5px; font-weight: 600;
  color: var(--bright);
}
.highlight-link::after {
  content: " →";
  display: inline-block;
  transition: transform .2s;
}
.highlight-card:hover .highlight-link::after { transform: translateX(3px); }

/* 992～1199：3 欄時每張只有 296～365 寬，文字要 171 → 圖只剩 51px 露出。縮字級。 */
@media (min-width: 992px) and (max-width: 1199px) {
  .highlight-body { padding: 18px; }
  .highlight-title { font-size: 18px; margin-bottom: 5px; }
  .highlight-desc  { font-size: 13px; margin-bottom: 7px; }
  .highlight-link  { font-size: 13.5px; }
  .highlight-tag   { font-size: 11.5px; margin-bottom: 4px; }
}

/* ⚠️ 768～991 若維持 3 欄，每張只剩約 236 寬、4:3 高 177，內容要 130 以上 → 擠爆。改單欄扁卡。 */
@media (max-width: 991px) {
  .highlight-section { padding: 40px 0 0; }
  .highlight-grid { grid-template-columns: 1fr; gap: 16px; }
  .highlight-card { aspect-ratio: 16 / 9; }
  .highlight-body { padding: 18px; }
  .highlight-title { font-size: 19px; }
  .highlight-desc { font-size: 13.5px; margin-bottom: 7px; }
}

@media (max-width: 767px) {
  .highlight-section { padding: 32px 0 0; }
  .highlight-grid { grid-template-columns: 1fr; gap: 14px; }
  .highlight-card { aspect-ratio: 16 / 9; }
  .highlight-title { font-size: 19px; }
}

/* ══════════════ 元件：區塊外殼（→ section 共用）══════════════ */
.section { padding: 58px 0; }
.section-soft { background: var(--paper); }

/* 小標籤（取自 GMI：藍色小字 + 大字距，壓在大標題上方） */
.eyebrow {
  font-size: 13.5px; font-weight: 700;
  letter-spacing: 2.8px; text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 10px;
}
.section-title {
  font-size: clamp(25px, 2.5vw, 32px);
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--reading-ink);
  margin: 0 0 14px;
}
/* 標題下的金棕短線：保留仁才品牌色，取代原站的置中金棕標題 */
.section-title::after {
  content: "";
  display: block;
  width: 52px; height: 3px; margin-top: 14px;
  background: var(--gold);
  border-radius: 2px;
}
.section-head { margin-bottom: 38px; max-width: 760px; }
.section-desc { font-size: 18px; line-height: 1.8; color: var(--reading-muted); margin: 0; }

@media (max-width: 991px) {
  .section { padding: 58px 0; }
}
@media (max-width: 767px) {
  .section { padding: 42px 0; }
  .section-title { font-size: 25px; }
  .eyebrow { font-size: 12.5px; letter-spacing: 2.2px; }
  .section-desc { font-size: 17px; }
}

/* ══════════════ 元件：服務卡（→ service-card）══════════════ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.service-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--reading-border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--reading-shadow);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(190, 148, 90, .35);
  box-shadow: var(--reading-shadow-hover);
}
/* ⚠️ 圖固定高（原站是固定高不是固定比例，用 aspect-ratio 會壞版） */
.card-photo { display: block; height: 210px; overflow: hidden; background: var(--soft); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.service-card:hover .card-photo img { transform: scale(1.04); }
.card-body { padding: 17px 20px 19px; }
.card-title {
  display: block;
  font-size: 18px; font-weight: 700; color: var(--ink);
  line-height: 1.55;
  margin-bottom: 3px;
}
.card-more {
  font-size: 14px; color: var(--blue); font-weight: 600;
}
.card-more::after { content: " →"; }

@media (max-width: 991px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .card-photo { height: 190px; }
}
@media (max-width: 767px) {
  .service-grid { gap: 16px; }
  .card-photo { height: 150px; }
  .card-title { font-size: 16.5px; }
}

/* ══════════════ 元件：申請資格說明（→ qualify）══════════════ */
.qualify-row {
  display: grid;
  /* 右欄不用固定 400：標題會被擠到「嗎?」單獨一行 */
  grid-template-columns: 1.25fr 1fr;
  gap: 54px;
  align-items: center;
}
.qualify-chart {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.qualify-desc { font-size: 17px; margin: 0 0 26px; }

@media (max-width: 991px) {
  .qualify-row { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .qualify-row { grid-template-columns: 1fr; }
  .qualify-desc { font-size: 16px; }
}

/* ══════════════ 元件：按鈕（→ buttons 共用）══════════════ */
.btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 16px; font-weight: 700;
  border-radius: var(--r-sm);
  transition: background .18s, color .18s, border-color .18s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--deep); color: #fff; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dk); color: #fff; }
.btn-outline { border: 1.5px solid var(--gold); color: var(--gold-dk); }
.btn-outline:hover { background: var(--gold); color: #fff; }

/* ══════════════ 元件：首頁消息三欄（→ home-news-columns）══════════════
   ⚠️「觀看更多」在欄標題同一行右側（GMI 做法）；條目「日期在左、標題在右」；
   卡片 align-self:start 不強制等高，避免短欄底部補一大片空白。 */
.news-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-col {
  padding: 26px 26px 10px;
  background: #fff;
  border: 1px solid var(--reading-border);
  border-radius: var(--r);
  align-self: start;
  box-shadow: var(--reading-shadow);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.news-col:hover {
  transform: translateY(-3px);
  border-color: rgba(190, 148, 90, .35);
  box-shadow: var(--reading-shadow-hover);
}
.news-col-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--deep);
}
.news-col-title { font-size: 19px; }
.btn-more {
  flex: none;
  font-size: 14px; font-weight: 600; color: var(--gold-dk);
}
.btn-more::after { content: " →"; }

.news-list li { border-bottom: 1px solid var(--line); }
.news-list li:last-child { border-bottom: 0; }
.news-list a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0;
  font-size: 15.5px; line-height: 1.65; color: var(--ink); font-weight: 500;
}
.news-list a:hover { color: var(--blue); }
.news-list time {
  flex: none; width: 74px;
  font-size: 13px; color: var(--muted); font-weight: 400;
}

@media (max-width: 991px) {
  .news-columns { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .news-col { padding: 22px 20px 20px; }
}

/* ══════════════ 元件：政府單位連結（→ gov-links）══════════════ */
.gov-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.gov-link {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.gov-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

@media (max-width: 991px) {
  .gov-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .gov-grid { grid-template-columns: 1fr; }
}

/* ══════════════ 元件：頁尾＋詢問表單（→ site-footer / inquiry-form）══════════════
   ⚠️ 頁尾表單是「深色版」配色；聯絡頁重用同一段表單但走「淺色版」（見聯絡頁區段）。 */
.site-footer {
  background: var(--deep);
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
}
.footer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 60px 0 48px;
}
.footer-logo {
  width: 260px; margin-bottom: 20px;
  /* logo 是深色字版，放深底要轉白 */
  filter: brightness(0) invert(1);
}
.footer-services { font-size: 15px; color: rgba(255, 255, 255, .62); margin: 0 0 18px; }
.footer-contact { margin: 0; line-height: 2; }
.footer-contact a { color: #fff; font-weight: 600; }
.footer-contact a:hover { color: var(--bright); }

.form-title { color: #fff; font-size: 22px; margin-bottom: 20px; }
.inquiry-form input { font: inherit; border-radius: 4px; transition: border-color .18s ease, box-shadow .18s ease; }
.inquiry-form input[type="text"],
.inquiry-form input[type="tel"] {
  width: 100%;
  height: 46px; padding: 0 14px;
  font: inherit; font-size: 16px; color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-sm);
}
.inquiry-form input::placeholder { color: rgba(255, 255, 255, .5); }
.inquiry-form input:focus {
  outline: 0;
  border-color: var(--blue);
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 0 0 3px rgba(15, 95, 168, .12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.field { position: relative; display: block; }
/* 星號放輸入框「內」右側：放外側時第二欄會貼到容器邊緣 */
.field .req {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #ff9a9a; font-size: 15px; pointer-events: none;
}
.field input { padding-right: 28px; }

.choice-group { border: 0; padding: 0; margin: 0 0 18px; }
.choice-group legend { font-size: 15px; color: rgba(255, 255, 255, .8); margin-bottom: 9px; padding: 0; }
/* legend 裡的星號是行內文字，不能沿用 .field 的絕對定位（會飛走） */
.choice-group legend .req { position: static; transform: none; color: #ff9a9a; }
.choice {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px 8px 0;
  font-size: 15px; cursor: pointer;
}
.choice input { accent-color: var(--bright); width: 16px; height: 16px; }

/* 蜜罐欄位：移出視野外（不能 display:none——部分機器人會跳過隱藏欄位） */
.hp-field {
  position: absolute;
  left: -9999px; top: 0;
  width: 1px; height: 1px;
  overflow: hidden;
}

.btn-submit {
  padding: 12px 34px;
  font: inherit; font-size: 16px; font-weight: 700; color: #fff;
  background: var(--gold);
  border: 0; border-radius: var(--r-sm);
  cursor: pointer; transition: background .18s;
}
.btn-submit:hover { background: var(--gold-dk); }
.form-notice { margin: 12px 0 0; font-size: 14px; color: var(--bright); }

.copyright {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 0;
  font-size: 14px; color: rgba(255, 255, 255, .55);
}

@media (max-width: 991px) {
  .footer-row { grid-template-columns: 1fr; gap: 40px; padding: 46px 0 36px; }
}
@media (max-width: 767px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ══════════════ 元件：浮動聯絡＋來電條（→ float-actions / call-bar）══════════════ */
.float-actions {
  position: fixed; right: 16px; bottom: 78px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
}
.float-btn {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .18s;
}
.float-btn:hover { transform: scale(1.06); }
.float-btn img { width: 50px; height: 50px; border-radius: 50%; }

/* ⚠️ 電話與 LINE 是 <a>，圖示已是完整彩色圓形 PNG；白底＋邊框會多一道白框。
   只有「回到頂端」是 <button>、內容是文字箭頭，才需要白底把自己撐出來。 */
a.float-btn { background: none; border: 0; }
button.float-btn {
  background: #fff;
  border: 1px solid var(--line);
}
.to-top { color: var(--deep); font-size: 14px; }

.call-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: 52px;
  align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); color: #fff;
  font-size: 17px; font-weight: 700;
}

@media (max-width: 767px) {
  .call-bar { display: flex; }
  .float-actions { bottom: 66px; right: 12px; }
  .float-btn, .float-btn img { width: 44px; height: 44px; }
}

/* ══════════════ 元件：內頁標題區（→ page-band）══════════════
   深藍底＋底圖＋左→右漸層，麵包屑收在區塊「內部」（GMI 內頁語言）。
   ⚠️ 底圖只壓左邊，右邊完全不碰（Dennis 否決過整片染藍——人臉會發青）：
   ① 顏色用中性深色（--band-veil），只壓暗、不改色相
   ② 漸層在 40% 前就要收掉、60% 全透明；照片本身 opacity 1，右半完全原色
   手機版標題區會變成純深藍（漸層整個寬度落在深色端）——刻意保留，保障可讀性。 */
.page-band {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: #fff;
}
.page-band-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
}
.page-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(var(--band-veil), .96) 0%,
    rgba(var(--band-veil), .93) 26%,
    rgba(var(--band-veil), .62) 41%,
    rgba(var(--band-veil), .18) 52%,
    transparent 60%);
}
.page-band .container { position: relative; z-index: 2; padding-top: 52px; padding-bottom: 54px; }

/* 純色標題區：沒有對應底圖素材的頁面用這個（如新聞列表——原站就沒有 banner，不硬湊）。
   ⚠️ 必須關掉 ::after，否則漸層右側透明會露出 .page-band 的深藍底，變成左中性右深藍的色差。 */
.page-band-plain { background: rgb(var(--band-veil)); }
.page-band-plain::after { display: none; }

.breadcrumb {
  font-size: 14px;
  color: rgba(203, 218, 232, .9);
  margin-bottom: 15px;
}
.breadcrumb a { color: rgba(203, 218, 232, .9); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { margin: 0 8px; color: rgba(203, 218, 232, .5); }
.breadcrumb .is-current { color: #fff; }

.page-band-eyebrow {
  font-size: 13.5px; font-weight: 700;
  letter-spacing: 2.8px;
  color: var(--bright);
  margin: 0 0 11px;
}
.page-band-title {
  font-size: 36px; font-weight: 700; color: #fff;
  line-height: 1.3;
  margin: 0 0 14px;
}
.page-band-sub {
  font-size: 16.5px; line-height: 1.75;
  color: rgba(216, 228, 240, .92);
  max-width: 760px;
  margin: 0 0 5px;
}
.page-band-sub:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .page-band .container { padding-top: 38px; padding-bottom: 40px; }
  .page-band-title { font-size: 29px; }
}
@media (max-width: 767px) {
  .page-band-title { font-size: 25px; }
  .page-band-sub { font-size: 15.5px; }
  .page-band-eyebrow { font-size: 12.5px; letter-spacing: 2.2px; }
}

/* ══════════════ 元件：內頁主體外殼＋導言＋目錄（→ page-body / lead-box / toc）══════════════ */
.page-body { padding: 56px 0 64px; }

/* 導言框：原站是米色框，改成 GMI 的淺藍卡＋左側主色線 */
.lead-box {
  padding: 22px 26px;
  margin-bottom: 34px;
  background: var(--soft);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--r) var(--r) 0;
}
.lead-box p { margin: 0; font-size: 17px; line-height: 1.85; color: var(--ink); }

/* 重點整理目錄
   ⚠️ 這行不能省：目錄是 JS 掃到 h2 才顯示的，沒 h2 的頁面靠 hidden 屬性藏起來。
      只要作者樣式給 .toc 設了任何 display，就會蓋掉 hidden，那些頁面會出現一個空框。 */
.toc[hidden] { display: none; }
.toc {
  padding: 20px 24px;
  margin-bottom: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.toc-head {
  font-size: 15px; font-weight: 700; color: var(--deep);
  letter-spacing: .5px;
}
.toc-toggle {
  margin-left: 10px;
  padding: 0;
  font: inherit; font-size: 13.5px; color: var(--blue);
  background: none; border: 0; cursor: pointer;
}
.toc ol { margin: 12px 0 0; padding-left: 20px; list-style: decimal; }
.toc li { margin-bottom: 6px; font-size: 15.5px; }
.toc.is-collapsed ol { display: none; }

@media (max-width: 991px) {
  .page-body { padding: 42px 0 48px; }
}
@media (max-width: 767px) {
  .lead-box { padding: 18px 20px; }
  .lead-box p { font-size: 16px; }
}

/* ══════════════ 元件：內文閱讀系統（→ article / post-body 共用）══════════════
   工種頁 .article 與文章內頁 .post-body 共用同一套階層（Dennis：「樣式要統一清楚」）。
   字級與「上方留白」同步遞減；h2 實心藍左線、h3 金棕小方塊、h4 純粗體變色。
   帶 .heading-bar（原站 post-title-style1）的標題改吃米底金線框（Codex 閱讀系統），
   ⚠️ .heading-bar 會出現在任何 h 層級（skilled-worker 把 4 個 h1 當段落標題用）。 */
.article, .post-body {
  font-size: 18px;
  line-height: 1.85;
  color: var(--reading-body);
}
.article > *:first-child, .post-body > *:first-child { margin-top: 0; }

.article p, .post-body p {
  margin: 0 0 20px;
  color: var(--reading-body);
  font-size: 18px;
  line-height: 1.85;
  letter-spacing: .018em;
}
.article a, .post-body a { text-decoration: underline; text-underline-offset: 3px; }

/* 一級標題（h1／h2／.heading-bar 一律同階）：非 bar 的吃藍左線 */
.article h1, .post-body h1,
.article h2, .post-body h2,
.article .heading-bar, .post-body .heading-bar {
  font-weight: 700;
  color: var(--reading-ink);
  padding: 2px 0 2px 15px;
  border-left: 4px solid var(--blue);
  background: none;
}
.article h1, .post-body h1,
.article h2, .post-body h2 {
  margin: 48px 0 20px;
  font-size: clamp(25px, 2.6vw, 32px);
  line-height: 1.45;
  letter-spacing: .02em;
}
/* 帶 bar 標記的改吃米底金線框（放在非 bar 規則之後才蓋得掉） */
.article h1.heading-bar, .article h2.heading-bar,
.post-body h1.heading-bar, .post-body h2.heading-bar,
.article .heading-bar, .post-body .heading-bar {
  margin: 42px 0 20px;
  padding: 8px 16px;
  border-top: 1px solid rgba(190, 148, 90, .24);
  border-right: 1px solid rgba(190, 148, 90, .24);
  border-bottom: 1px solid rgba(190, 148, 90, .24);
  border-left: 4px solid var(--gold);
  border-radius: 0 4px 4px 0;
  background: var(--reading-warm);
  color: var(--reading-ink);
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.45;
}

/* h3 二級：金棕小方塊，比左線輕 */
.article h3, .post-body h3 {
  font-size: 22px; font-weight: 700; line-height: 1.5;
  color: var(--reading-ink);
  margin: 36px 0 15px;
}
.article h3::before, .post-body h3::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; margin-right: 9px; vertical-align: 2px;
  background: var(--gold); border-radius: 2px;
}
/* h3 若同時帶 heading-bar（吃米底金線框），不要再加小方塊，否則兩種標記疊在一起 */
.article h3.heading-bar::before, .post-body h3.heading-bar::before { content: none; }

/* h4 三級：純粗體＋主色 */
.article h4, .post-body h4 {
  font-size: 18px; font-weight: 700; line-height: 1.55;
  color: var(--deep);
  margin: 28px 0 12px;
}

/* 清單 */
.article ul, .post-body ul,
.article ol, .post-body ol { margin: 0 0 24px; padding-left: 1.6em; }
.article ul, .post-body ul { list-style: disc; }
.article ol, .post-body ol { list-style: decimal; }
.article li, .post-body li {
  margin: .32em 0;
  padding-left: .12em;
  font-size: 18px;
  line-height: 1.75;
}
.article li:last-child, .post-body li:last-child { margin-bottom: 0; }
.article li::marker, .post-body li::marker { color: var(--gold-dk); }

/* 圖片：原站素材 250×167～1920×960 都有；小圖不強制放大（會糊）但一律置中，大圖收在 880 內 */
.article img, .post-body img {
  display: block;
  margin: 28px auto;
  max-width: min(100%, 880px);
  height: auto;
  border-radius: 4px;
  background: var(--paper);      /* 延後載入時是淺灰底，不是一片刺眼的白 */
}

/* 表格：原站固定 800 寬、手機會橫向溢出 → 外層可捲，桌機視覺不變 */
.table-wrap {
  overflow-x: auto;
  margin: 28px auto;
  border: 1px solid var(--reading-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--reading-shadow);
}
.table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 17px;
  line-height: 1.65;
}
.table-wrap th, .table-wrap td {
  padding: 12px 14px;
  border: 1px solid var(--reading-border);
  line-height: 1.7;
  vertical-align: top;
}
.table-wrap th {
  background: var(--reading-warm);
  color: var(--reading-ink);
  font-weight: 700;
  text-align: left;
}
.table-wrap tr:nth-child(even) td { background: #fcfdfe; }

/* 常見問題：原生 details，不需 JS */
.faq-item {
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.faq-item summary {
  position: relative;
  padding: 17px 52px 17px 22px;
  font-size: 17px; font-weight: 600; color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item[open] summary { background: var(--soft); }
.faq-body { padding: 18px 22px 4px; border-top: 1px solid var(--line); }
/* faq-body 內的 p/ul 不另設邊距：faq-item 一律在 .article 內，
   舊檔的 .faq-body p/ul 邊距被更後面的 .article p/ul 規則蓋掉（死碼），整理時已移除 */

/* 內文行動鈕（href=#form 錨點在頁尾表單容器上，少了它全站 4 個按鈕都不會動） */
.cta-line { margin: 30px 0; }
.btn-cta {
  display: inline-block;
  padding: 13px 30px;
  font-size: 16.5px; font-weight: 700;
  color: #fff; background: var(--blue);
  border-radius: var(--r-sm);
  text-decoration: none !important;
  transition: background .18s;
}
.btn-cta:hover { background: var(--deep); color: #fff; }

@media (max-width: 767px) {
  .article, .post-body { font-size: 17px; line-height: 1.8; }
  .article p, .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 18px; }
  .article h1, .post-body h1,
  .article h2, .post-body h2 {
    font-size: 24px;
    margin: 36px 0 20px;
    padding-left: 12px;
    border-left-width: 3px;
  }
  .article h1.heading-bar, .article h2.heading-bar,
  .post-body h1.heading-bar, .post-body h2.heading-bar,
  .article .heading-bar, .post-body .heading-bar {
    margin: 32px 0 20px;
    padding: 7px 12px;
    font-size: 20px;
    border-left-width: 4px;
  }
  .article h3, .post-body h3 { font-size: 20px; margin: 28px 0 15px; }
  .article h4, .post-body h4 { font-size: 17px; }
  .article li, .post-body li { font-size: 17px; }
  .table-wrap { margin: 22px 0; overflow-x: auto; }
  .table-wrap table { min-width: 680px; font-size: 15px; }
  .table-wrap th, .table-wrap td { padding: 10px 11px; }
  .faq-item summary { font-size: 16px; padding: 15px 46px 15px 18px; }
}

/* ══════════════ 元件：聯絡頁（→ contact-page）══════════════
   原站主體是空的，這是刻意補的（脫離 1:1，可退回）。
   ⚠️ 聯絡頁的表單在淺色內容區，頁尾那份在深藍底 → 兩者不能共用同一組配色。
   這裡把頁尾那組深底輸入框樣式逐項蓋掉。 */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  margin-top: 8px;
}
.contact-info h2 { font-size: 24px; margin: 0 0 20px; }
.contact-info dl { margin: 0 0 22px; }
.contact-info dt {
  font-size: 13.5px; font-weight: 700; color: var(--blue);
  letter-spacing: 1.2px;
  margin-bottom: 3px;
}
.contact-info dd { margin: 0 0 15px; font-size: 16.5px; color: var(--ink); }
.contact-hint {
  padding: 16px 18px; margin: 0 0 20px;
  background: var(--soft);
  border-radius: var(--r-sm);
  font-size: 15.5px; line-height: 1.75;
}
.contact-form {
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.contact-form .form-title {
  color: var(--ink);
  font-size: 21px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--deep);
}
.contact-form .inquiry-form input[type="text"],
.contact-form .inquiry-form input[type="tel"] {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}
.contact-form .inquiry-form input::placeholder { color: var(--muted); }
.contact-form .inquiry-form input:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 95, 168, .12);
}
.contact-form .choice-group legend { color: var(--ink); font-weight: 600; }
.contact-form .choice { color: var(--body); }
.contact-form .field .req { color: #d64545; }
.contact-form .btn-submit { background: var(--blue); }
.contact-form .btn-submit:hover { background: var(--deep); }
.contact-form .form-notice { color: var(--blue); }

@media (max-width: 991px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ══════════════ 元件：最新消息列表（→ news-board）══════════════ */
/* ── 分類篩選鈕（藥丸形，含各分類篇數） ── */
.news-cats {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-bottom: 26px;
}
.news-cat {
  padding: 8px 17px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--body);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color .16s, background .16s, border-color .16s;
}
.news-cat:hover { color: var(--blue); border-color: var(--blue); }
.news-cat.is-active { color: #fff; background: var(--blue); border-color: var(--blue); }
.news-cat em {
  font-style: normal;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(20, 45, 70, .08);
  color: var(--muted);
}
.news-cat.is-active em { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── 列表 ──
   ⚠️ 不要在 .news-board 加 border-top：分類篩選鈕在這個容器裡，線會跑到按鈕上方。
   也不要掛在 .news-row:first-of-type——篩選時第一列可能是 hidden 的，線會整條消失。
   → 列表上緣線掛在「共 N 篇」（.news-count）下方：位置固定、永遠存在。 */
.news-board { margin-bottom: 34px; }
.news-count {
  margin: 0;
  padding-bottom: 12px;
  font-size: 15px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.news-count strong { color: var(--deep); font-size: 17px; }

/* ⚠️ 跟 .toc 同一個陷阱：分類篩選用 row.hidden 隱藏，作者 display 會蓋掉它 → 這行不能省 */
.news-row[hidden] { display: none; }
.news-row {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.news-row-main { flex: 1; min-width: 0; }
.news-row h2 {
  font-size: 17.5px; font-weight: 600; line-height: 1.6;
  margin: 0 0 6px;
}
.news-row h2 a { color: var(--ink); }
.news-row h2 a:hover { color: var(--blue); }
.news-row time { font-size: 13.5px; color: var(--muted); }
.btn-view {
  flex: none;
  padding: 8px 20px;
  font-size: 14.5px; font-weight: 600;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color .16s, background .16s, border-color .16s;
}
.btn-view:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.news-empty { padding: 40px 0; text-align: center; color: var(--muted); }

/* ── 分頁（新聞列表與履歷牆共用） ── */
.pager { display: flex; justify-content: center; gap: 8px; }
.pager a, .pager span {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  font-size: 15.5px; font-weight: 600;
  border-radius: var(--r-sm);
}
.pager a { color: var(--body); border: 1px solid var(--line); }
.pager a:hover { color: var(--blue); border-color: var(--blue); }
.pager .is-active { color: #fff; background: var(--blue); }
.pager-gap {
  min-width: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
}

@media (max-width: 767px) {
  .news-row { flex-wrap: wrap; gap: 10px; padding: 16px 2px; }
  .news-row h2 { font-size: 16.5px; }
  .btn-view { padding: 6px 16px; font-size: 13.5px; }
  .news-cat { padding: 7px 14px; font-size: 14px; }
}

/* ══════════════ 元件：文章內頁版面（→ article-layout / side-cards）══════════════ */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  align-items: start;
}
.post-meta {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: 14px; color: var(--muted);
}
/* 分類藥丸：GMI news-detail 的 bg-soft/text-blue/rounded-full */
.post-cat {
  padding: 4px 13px;
  font-size: 13.5px; font-weight: 600;
  color: var(--blue); background: var(--soft);
  border-radius: 999px;
}
.post-title {
  font-size: 29px; line-height: 1.45;
  margin: 0 0 26px;
}
/* ── 側欄（6 張服務卡） ── */
.article-side { position: sticky; top: 24px; }
.side-title {
  font-size: 17px;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 2px solid var(--deep);
}
.side-card {
  position: relative;
  display: block;
  margin-bottom: 12px;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.side-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.side-card:hover img { transform: scale(1.05); }
.side-card span {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 12px 14px;
  font-size: 15.5px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 14, 34, .6);
  background: linear-gradient(to top, rgba(0, 20, 48, .88) 0%, rgba(0, 20, 48, .3) 60%, transparent 100%);
}

@media (max-width: 991px) {
  .article-layout { grid-template-columns: 1fr; gap: 36px; }
  .article-side { position: static; }
  .post-title { font-size: 25px; }
}
@media (max-width: 767px) {
  .post-title { font-size: 22px; }
}

/* ══════════════ 元件：外勞履歷牆（→ cv-board）══════════════
   側邊欄篩選是購物網站式：組間 AND、組內 OR。 */

/* 示範提示條：資料非真人，必須明顯 */
.cv-note {
  padding: 13px 18px;
  margin: 0 0 26px;
  background: #fdf6e3;
  border: 1px solid #e8d9b0;
  border-radius: var(--r-sm);
  font-size: 15px; color: #7a5c1e;
}

.cv-layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

/* ── 側邊欄篩選 ── */
.cv-aside {
  position: sticky; top: 24px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cv-aside-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 13px; margin-bottom: 4px;
  border-bottom: 2px solid var(--deep);
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.facet-clear {
  padding: 0; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--blue); background: none; border: 0; cursor: pointer;
}
.facet { padding: 16px 0 4px; border-bottom: 1px solid var(--line); }
.facet:last-child { border-bottom: 0; }
.facet-title { font-size: 14.5px; color: var(--ink); margin: 0 0 9px; }
.facet-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  font-size: 14.5px; color: var(--body);
  cursor: pointer;
}
.facet-item input { accent-color: var(--blue); width: 15px; height: 15px; flex: none; }
.facet-item span { flex: 1; min-width: 0; }
.facet-item em { font-style: normal; font-size: 13px; color: var(--muted); }
/* 選了會變 0 筆的條件淡出（但仍可點，跟購物網站一致） */
.facet-item.is-off { opacity: .42; }

/* ── 工具列（筆數 ＋ 已選條件標籤）── */
.cv-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 20px;
}
.cv-count { font-size: 15.5px; color: var(--muted); }
.cv-count strong { color: var(--deep); font-size: 18px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 13px;
  font-size: 13.5px; color: var(--blue);
  background: var(--soft);
  border-radius: 999px;
}
.cv-chip button {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font: inherit; font-size: 15px; line-height: 1;
  color: var(--blue); background: rgba(15, 95, 168, .12);
  border: 0; border-radius: 50%; cursor: pointer;
}
.cv-chip button:hover { color: #fff; background: var(--blue); }

/* ── 履歷卡 ── */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}
/* ⚠️ 篩選與分頁是設 card.hidden，作者樣式的 display 會蓋掉它 → 這行不能省 */
.cv-card[hidden] { display: none; }
.cv-card {
  background: #fff;
  border: 1px solid var(--reading-border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--reading-shadow);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.cv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(190, 148, 90, .35);
  box-shadow: var(--reading-shadow-hover);
}
.cv-link { display: flex; flex-direction: column; height: 100%; }
.cv-photo { position: relative; display: block; background: var(--soft); }
.cv-photo img { width: 100%; height: auto; display: block; }
.cv-no, .cv-job {
  position: absolute; z-index: 2;
  padding: 3px 10px;
  font-size: 12.5px; font-weight: 600;
  border-radius: 999px;
}
.cv-no { top: 10px; left: 10px; color: var(--deep); background: rgba(255, 255, 255, .92); }
.cv-job { bottom: 10px; left: 10px; color: #fff; background: rgba(0, 54, 110, .88); }
.cv-body { display: block; padding: 14px 15px 16px; }
.cv-name { display: block; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.55; margin-bottom: 5px; }
.cv-meta { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 3px; }
.cv-religion { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }

.skill-row { display: flex; flex-wrap: wrap; gap: 5px; }
.skill {
  padding: 3px 9px;
  font-size: 12.5px; color: var(--blue);
  background: var(--soft);
  border-radius: 999px;
}
.skill-more { color: var(--muted); background: #f1f3f5; }

.cv-empty {
  padding: 56px 20px; text-align: center;
  color: var(--muted); font-size: 16px;
}

/* ── 履歷內頁 ── */
.detail {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin-bottom: 56px;
}
.detail-photo { position: relative; border-radius: var(--r); overflow: hidden; }
.detail-photo img { width: 100%; height: auto; }
.detail-name { font-size: 30px; margin: 0 0 6px; }
.detail-job {
  display: inline-block;
  padding: 4px 13px; margin: 0 0 22px;
  font-size: 14px; font-weight: 600;
  color: var(--blue); background: var(--soft);
  border-radius: 999px;
}
.detail-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 0 18px;
  margin: 0 0 28px;
  padding: 18px 20px;
  background: var(--paper);
  border-radius: var(--r);
}
.detail-facts dt {
  font-size: 14px; color: var(--muted);
  padding: 7px 0;
}
.detail-facts dd {
  margin: 0; padding: 7px 0;
  font-size: 16px; color: var(--ink); font-weight: 600;
}
.detail-block { margin-bottom: 26px; }
.detail-block h2 {
  font-size: 17px;
  padding-left: 12px; margin: 0 0 11px;
  border-left: 4px solid var(--blue);
}
.detail-block p { margin: 0; font-size: 16.5px; line-height: 1.85; }

.detail-cta {
  padding: 22px 24px;
  background: var(--soft);
  border-radius: var(--r);
}
.detail-cta-text { margin: 0 0 16px; font-size: 15.5px; line-height: 1.75; }
.detail-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-cta-btns a {
  padding: 11px 20px;
  font-size: 15px; font-weight: 700;
  border-radius: var(--r-sm);
  transition: background .18s, color .18s;
}
.detail-cta-btns .btn-primary { color: #fff; background: var(--blue); }
.detail-cta-btns .btn-primary:hover { background: var(--deep); color: #fff; }
.btn-line { color: #fff; background: #06c755; }
.btn-line:hover { background: #05a648; color: #fff; }
.btn-ghost { color: var(--body); background: #fff; border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--blue); border-color: var(--blue); }

/* ── 同類人員推薦 ── */
.related { padding-top: 40px; border-top: 1px solid var(--line); }
.related-title { font-size: 21px; margin: 0 0 22px; }
.related-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-bottom: 26px;
}
.rel-card {
  display: block;
  background: #fff;
  border: 1px solid var(--reading-border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--reading-shadow);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.rel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(190, 148, 90, .35);
  box-shadow: var(--reading-shadow-hover);
}
.rel-card img { width: 100%; height: auto; }
.rel-name { display: block; padding: 11px 13px 2px; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.55; }
.rel-meta { display: block; padding: 0 13px 13px; font-size: 13px; color: var(--muted); }
.related-back { display: inline-block; }

@media (max-width: 1199px) {
  .cv-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .cv-layout { grid-template-columns: 1fr; gap: 24px; }
  .cv-aside { position: static; }
  .cv-grid { grid-template-columns: repeat(3, 1fr); }
  .detail { grid-template-columns: 260px minmax(0, 1fr); gap: 30px; }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .cv-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cv-body { padding: 11px 12px 13px; }
  .cv-name { font-size: 15.5px; }
  .cv-meta, .cv-religion { font-size: 12.5px; }
  .detail { grid-template-columns: 1fr; gap: 24px; }
  .detail-photo { max-width: 280px; }
  .detail-name { font-size: 25px; }
  .detail-cta-btns a { width: 100%; text-align: center; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════ 行為：捲動淡入與減少動態（→ script.js 的 initScrollReveal）══════════════ */
@media (prefers-reduced-motion: no-preference) {
  .has-motion .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .has-motion .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}