/* ============================================================
   智行股份有限公司 Smartway Solutions Inc.
   全站設計系統 style.css
   ============================================================ */

/* ---------- 設計變數(嚴格依照設計系統,不得更動) ---------- */
:root {
  --sw-orange: #E87722;      /* 主色橘:按鈕、Logo、強調文字、底線裝飾 */
  --sw-navy: #1B2A4A;        /* 深藍標題 */
  --sw-bg: #FAF8F4;          /* 背景米白 */
  --sw-card-border: #B8D4E8; /* 卡片淡藍色描邊 */
  --sw-text: #4A4A4A;        /* 內文灰 */
  --sw-white: #FFFFFF;

  /* 水彩裝飾色(僅供潑墨/圓形色塊使用) */
  --wc-orange: 232, 119, 34;
  --wc-blue: 91, 141, 190;
  --wc-green: 122, 168, 116;

  --sw-radius: 12px;
  --sw-font-tc: 'Noto Sans TC', sans-serif;
  --sw-font-en: 'Inter', sans-serif;
  --sw-navbar-h: 76px;
}

/* ---------- 基礎 ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--sw-font-tc);
  font-weight: 400;
  color: var(--sw-text);
  background-color: var(--sw-bg);
  overflow-x: hidden;
  /* Navbar 不再固定(隨頁面捲動),故不需 padding-top 補償 */
}

/* 全頁水彩底圖:引用 images/backgrounds/bg-watercolor.jpg
   (為原檔 １.png 的壓縮版,1.4MB→152KB,內容/顏色/尺寸完全相同)
   顏色、位置、透明度不得自行調整(原圖直接鋪滿,無濾鏡) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sw-bg) url("../images/backgrounds/bg-watercolor.jpg") center / cover no-repeat;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sw-font-tc);
  font-weight: 700;
  color: var(--sw-navy);
}

a { text-decoration: none; }

.font-en { font-family: var(--sw-font-en); }

/* 版面區塊共用 */
.sw-section { position: relative; padding: 64px 0; }
.wc-host { position: relative; }
.wc-content { position: relative; z-index: 1; }

/* ============================================================
   Logo(文字 + 橘色色塊示意)
   ============================================================ */
.sw-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sw-logo .sw-logo-mark { flex-shrink: 0; }
.sw-logo .sw-logo-zh {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--sw-orange);
  line-height: 1.2;
  letter-spacing: 1px;
}
.sw-logo .sw-logo-en {
  font-family: var(--sw-font-en);
  font-weight: 300;
  font-size: 0.72rem;
  color: var(--sw-orange);
  letter-spacing: 2px;
}

/* Logo 後台上傳佔位框(Navbar / Footer 共用) */
.logo-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 48px;
  background-color: #E5E2DC;
  color: #8A8A8A;
  font-size: 0.82rem;
  font-weight: 400;
  border-radius: 6px;
  white-space: nowrap;
}

/* ============================================================
   導覽列 Navbar
   ============================================================ */
/* Navbar 本體:隨頁面捲動(非固定);僅漢堡按鈕固定右上角 */
.sw-navbar {
  background-color: var(--sw-bg);
  min-height: var(--sw-navbar-h);
  border-bottom: 1px solid rgba(27, 42, 74, 0.06);
  position: relative;
}
.sw-navbar .nav-link {
  font-weight: 700;
  font-size: 1rem;
  color: var(--sw-navy);
  padding: 8px 20px;
  white-space: nowrap;
}
.sw-navbar .nav-link:hover,
.sw-navbar .nav-link.active {
  color: var(--sw-orange);
}

/* 桌面行內選單(顯示用,隨頁面捲走) */
.sw-nav-inline {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0 60px 0 auto;
  padding: 0;
}
.sw-nav-inline li { position: relative; }
.sw-nav-inline li + li::before {
  content: "|";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sw-navy);
  opacity: 0.5;
  font-weight: 300;
}
/* 行內選單:字級略大、左右間距加寬(僅影響頂端桌面選單,不影響漢堡面板) */
.sw-nav-inline .nav-link {
  font-size: 1.1rem;
  padding: 8px 30px;
}

/* 漢堡按鈕:固定在頁面右上角,任何捲動位置皆可見 */
.sw-navbar .sw-burger {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1080;
  border: none;
  padding: 8px 10px;
  background-color: rgba(250, 248, 244, 0.92);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(27, 42, 74, 0.14);
}
.sw-navbar .sw-burger:focus { box-shadow: 0 2px 10px rgba(27, 42, 74, 0.14); }
.sw-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231B2A4A' stroke-linecap='round' stroke-width='2.5' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* 漢堡展開的固定面板(桌機/手機共用):白底、每項一行、橘色 active */
.sw-drawer {
  position: fixed;
  top: 60px;
  right: 18px;
  z-index: 1079;
  width: 240px;
  background-color: var(--sw-white);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(27, 42, 74, 0.18);
  overflow: hidden;
}
.sw-drawer .navbar-nav { padding: 6px 0; margin: 0; }
.sw-drawer .nav-link {
  display: block;
  padding: 13px 22px;
  border-bottom: 1px solid rgba(27, 42, 74, 0.06);
}
.sw-drawer .nav-item:last-child .nav-link { border-bottom: none; }
@media (max-width: 575.98px) {
  .sw-drawer { left: 12px; right: 12px; width: auto; }
}

/* ============================================================
   麵包屑
   ============================================================ */
.sw-breadcrumb {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sw-navy);
  margin-bottom: 24px;
}
/* 父層(可點連結):底線 hover 提示可點,滑鼠為 pointer */
.sw-breadcrumb a { color: var(--sw-navy); text-decoration: none; }
.sw-breadcrumb a:hover { color: var(--sw-orange); text-decoration: underline; text-underline-offset: 3px; }
.sw-breadcrumb .sep { margin: 0 8px; opacity: 0.6; font-weight: 400; }
/* 當前頁(非連結):淡化為灰色、細體,與可點的父層做出區別 */
.sw-breadcrumb .crumb-current { color: var(--sw-text); font-weight: 400; }

/* ============================================================
   標題樣式
   ============================================================ */
/* 頁面大標題(深藍粗體) */
.page-title {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--sw-navy);
  margin-bottom: 8px;
}
/* 標題下方的藍色水彩筆刷底線 */
.brush-line {
  position: relative;
  display: block;
  width: 220px;
  height: 12px;
  margin: 8px 0 24px;
  border-radius: 6px;
  background:
    linear-gradient(100deg, rgba(43, 90, 158, 0.85) 0%, rgba(43, 90, 158, 0.55) 55%, rgba(43, 90, 158, 0.15) 100%);
  transform: skewX(-12deg);
}
.brush-line::after {
  content: "";
  position: absolute;
  left: 8%;
  top: -5px;
  width: 70%;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(100deg, rgba(43, 90, 158, 0.45), rgba(43, 90, 158, 0.05));
}
/* 區塊標題(如「核心技術」「產品簡介」) */
.sec-title {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--sw-navy);
  margin-bottom: 6px;
}
/* 橘色短橫線底線裝飾(寬約40px、高3px) */
.u-orange {
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--sw-orange);
  border-radius: 2px;
  margin: 10px 0 20px;
}
.u-orange.mx-auto { margin-left: auto; margin-right: auto; }
/* 橘色強調文字 */
.text-orange { color: var(--sw-orange) !important; }
.text-navy { color: var(--sw-navy) !important; }

/* ============================================================
   按鈕
   ============================================================ */
/* 主要按鈕:橘底白字 */
.btn-sw-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--sw-orange);
  color: var(--sw-white);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 24px;
  border: 2px solid var(--sw-orange);
  border-radius: 8px;
  transition: opacity 0.2s ease;
}
.btn-sw-primary:hover { color: var(--sw-white); opacity: 0.88; }

/* 次要按鈕:白底橘框橘字 */
.btn-sw-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--sw-white);
  color: var(--sw-orange);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 24px;
  border: 2px solid var(--sw-orange);
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.btn-sw-outline:hover { color: var(--sw-orange); background-color: rgba(232, 119, 34, 0.06); }

/* 深藍按鈕(職缺頁 CTA 用) */
.btn-sw-navy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--sw-navy);
  color: var(--sw-white);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 24px;
  border: 2px solid var(--sw-navy);
  border-radius: 8px;
  transition: opacity 0.2s ease;
}
.btn-sw-navy:hover { color: var(--sw-white); opacity: 0.88; }

.btn-arrow { font-family: var(--sw-font-en); font-weight: 400; }

/* ============================================================
   卡片
   ============================================================ */
.sw-card {
  background-color: var(--sw-white);
  border: 1px solid var(--sw-card-border);
  border-radius: var(--sw-radius);
  position: relative;
  overflow: hidden;
}
.sw-card .wc-content { position: relative; z-index: 1; }

/* 橘色類別小標籤(圓角) */
.sw-tag {
  display: inline-block;
  background-color: var(--sw-orange);
  color: var(--sw-white);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
}

/* ============================================================
   圖片 Placeholder(待 CMS 帶入)
   ============================================================ */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E5E2DC;
  color: #8A8A8A;
  font-size: 0.95rem;
  font-weight: 400;
  border-radius: var(--sw-radius);
  min-height: 200px;
  text-align: center;
  padding: 16px;
}

/* ============================================================
   圓形水彩 icon 色塊(內置白色線條 SVG icon)
   ============================================================ */
.icon-wc {
  --wc: var(--wc-orange);
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 32% 30%, rgba(var(--wc), 0.95), rgba(var(--wc), 0.75) 55%, rgba(var(--wc), 0.5) 78%, rgba(var(--wc), 0.25) 100%);
}
/* 邊緣斑點紋理,模擬水彩暈染 */
.icon-wc::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background-image: radial-gradient(rgba(var(--wc), 0.55) 2.5px, transparent 3.5px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle, transparent 55%, #000 62%, transparent 78%);
  mask-image: radial-gradient(circle, transparent 55%, #000 62%, transparent 78%);
  pointer-events: none;
}
.icon-wc svg { width: 52%; height: 52%; position: relative; z-index: 1; }
.icon-wc-orange { --wc: var(--wc-orange); }
.icon-wc-blue { --wc: var(--wc-blue); }
.icon-wc-green { --wc: var(--wc-green); }
.icon-wc-sm { width: 96px; height: 96px; }
.icon-wc-lg { width: 180px; height: 180px; }

/* ============================================================
   水彩潑墨點綴(CSS 模擬)
   ※ 頁面級底圖已改用 images/backgrounds/１.png 直接引用,
     以下 class 僅供「卡片內部角落」的小型點綴使用
     (如人才招募部門卡片的角落水彩),透明度 0.4~0.6
   ============================================================ */
.wc-blob {
  --wc: var(--wc-orange);
  position: absolute;
  width: 420px;
  height: 380px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
/* 底層柔和暈染 */
.wc-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 55% 45%, rgba(var(--wc), 0.55), rgba(var(--wc), 0.25) 55%, transparent 75%),
    radial-gradient(closest-side at 30% 65%, rgba(var(--wc), 0.35), transparent 65%),
    radial-gradient(closest-side at 75% 70%, rgba(var(--wc), 0.3), transparent 60%);
}
/* 上層斑點馬賽克,模擬潑墨顆粒 */
.wc-blob::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(var(--wc), 0.8) 3px, transparent 4.5px),
    radial-gradient(rgba(var(--wc), 0.5) 2px, transparent 3px);
  background-size: 22px 22px, 13px 13px;
  background-position: 0 0, 7px 9px;
  -webkit-mask-image: radial-gradient(closest-side at 55% 45%, #000 30%, rgba(0,0,0,0.55) 55%, transparent 78%);
  mask-image: radial-gradient(closest-side at 55% 45%, #000 30%, rgba(0,0,0,0.55) 55%, transparent 78%);
}
/* 顏色 */
.wc-orange { --wc: var(--wc-orange); }
.wc-blue { --wc: var(--wc-blue); }
.wc-green { --wc: var(--wc-green); }
/* 位置(固定角落) */
.wc-tr { top: -70px; right: -70px; }
.wc-tl { top: -70px; left: -70px; }
.wc-bl { bottom: -70px; left: -70px; }
.wc-br { bottom: -70px; right: -70px; }
/* 尺寸 */
.wc-sm { width: 240px; height: 220px; }
.wc-lg { width: 560px; height: 500px; }

@media (max-width: 767.98px) {
  .wc-blob { width: 260px; height: 240px; }
  .wc-lg { width: 320px; height: 300px; }
}

/* ============================================================
   頁尾 Footer
   ============================================================ */
.sw-footer {
  background-color: var(--sw-bg);
  border-top: 1px solid rgba(27, 42, 74, 0.12);
  padding: 48px 0 24px;
}
.sw-footer .footer-info {
  font-size: 0.95rem;
  color: var(--sw-navy);
  line-height: 1.7;
}
.sw-footer .footer-info .info-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.sw-footer .footer-info .info-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
.sw-footer .footer-social {
  display: flex;
  gap: 40px;
}
.sw-footer .social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--sw-navy);
  font-size: 0.9rem;
}
.sw-footer .social-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--sw-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-footer .social-circle svg { width: 26px; height: 26px; }
.sw-footer .footer-divider {
  border-left: 1px solid rgba(27, 42, 74, 0.2);
  height: 100%;
  min-height: 90px;
}
.sw-footer .copyright {
  text-align: center;
  font-size: 0.9rem;
  color: var(--sw-text);
  margin-top: 36px;
}

@media (max-width: 991.98px) {
  .sw-footer .footer-divider { display: none; }
  .sw-footer .footer-social { justify-content: center; margin-top: 24px; }
}

/* ============================================================
   首頁 index.html
   ============================================================ */
/* 純圖片 Section 容器(整段設計都在圖片內,前台無任何程式生成內容)
   桌機版與手機版各一張,依斷點切換 */
.section-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background-color: #E5E2DC;
  color: #8A8A8A;
  text-align: center;
  padding: 16px;
}
.section-img.section-img-desktop { min-height: 460px; }
.section-img.section-img-mobile { min-height: 560px; }

/* 首頁 Hero 專用:滿版寬度 + 高度佔滿使用者進站時的可視畫面
   (扣除 Navbar 高度,讓「Navbar + Hero」剛好填滿一個螢幕高度)
   僅限首頁 Hero 使用,其餘頁面 Hero 維持固定高度,不套用此 class */
.section-img.section-img-desktop.section-img-fullscreen,
.section-img.section-img-mobile.section-img-fullscreen {
  min-height: calc(100vh - var(--sw-navbar-h));
  min-height: calc(100dvh - var(--sw-navbar-h));
}

/* 首頁 Hero 進站淡入:整張圖由透明平順浮現(約 1 秒)。
   綁在 section-img-fullscreen(此 class 僅首頁使用),故只影響首頁 Hero;
   未來後台換成真圖時效果自動沿用。 */
@keyframes swHeroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.section-img-fullscreen {
  animation: swHeroFadeIn 1.8s ease both;
}
/* 尊重使用者「減少動態」偏好:關閉淡入,直接顯示 */
@media (prefers-reduced-motion: reduce) {
  .section-img-fullscreen { animation: none; }
}

/* 首頁段落捲動淡入(scroll reveal):往下捲到哪,該段才慢慢浮現。
   僅在 JS 啟用時(html.sw-js)才預先隱藏,避免 JS 失效時整段看不到;
   由 js/main.js 用 IntersectionObserver 進入視窗時加 .is-visible 觸發。 */
.sw-js .sw-reveal {
  opacity: 0; /* 初始隱藏:無過場,避免載入時「先淡出」的閃爍 */
}
.sw-js .sw-reveal.is-visible {
  opacity: 1;
  transition: opacity 1.2s ease; /* 過場只掛在淡入這一步 */
}
@media (prefers-reduced-motion: reduce) {
  .sw-js .sw-reveal { opacity: 1; }
  .sw-js .sw-reveal.is-visible { transition: none; }
}

/* Hero 大標題:三行,× 為橘色 */
.hero-title {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 5px;
  line-height: 1.4;
  color: var(--sw-navy);
  margin-bottom: 24px;
}
.hero-title .x-mark {
  color: var(--sw-orange);
  font-weight: 700;
  margin-left: 10px;
}
.hero-desc {
  font-size: 1.05rem;
  line-height: 2;
  color: var(--sw-text);
  margin-bottom: 32px;
}
/* Hero 下方置中箭頭 */
.hero-chevron {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

/* 核心技術項目 */
.tech-item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(27, 42, 74, 0.15);
}
.tech-item:last-child { border-bottom: none; }
.tech-item .tech-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
}
.tech-item h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sw-orange);
  margin-bottom: 8px;
}
.tech-item ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--sw-text);
}

/* 年度里程碑:階梯式水平時間軸(桌面) */
.milestone-track { display: flex; align-items: flex-start; }
.milestone {
  flex: 1;
  position: relative;
  border-top: 2px solid rgba(27, 42, 74, 0.75);
  margin-top: calc(var(--step) * 36px);
  padding: 10px 12px 0 10px;
  min-height: 150px;
}
/* 階梯垂直連接線(每階右端向上連到下一階) */
.milestone:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -36px;
  right: -1px;
  width: 2px;
  height: 36px;
  background-color: rgba(27, 42, 74, 0.75);
}
.milestone .m-year {
  position: absolute;
  bottom: 100%;
  left: 10px;
  padding-bottom: 6px;
  white-space: nowrap;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--sw-navy);
}
.milestone .m-year small {
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 2px;
}
.milestone .m-text {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--sw-text);
}
/* 手機/平板:改為垂直時間軸 */
@media (max-width: 991.98px) {
  .milestone-track { display: block; }
  .milestone {
    margin-top: 0;
    min-height: 0;
    border-top: none;
    border-left: 2px solid rgba(27, 42, 74, 0.75);
    padding: 4px 0 24px 20px;
  }
  .milestone:not(:last-child)::after { display: none; }
  .milestone .m-year {
    position: static;
    display: block;
    padding-bottom: 4px;
  }
}

/* ============================================================
   關於智行 about.html
   ============================================================ */
/* 願景:4 個圖示 + 符號連接的圓角框 */
.vision-box {
  background-color: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--sw-card-border);
  border-radius: var(--sw-radius);
  padding: 40px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.vision-icon {
  width: 78px;
  height: 78px;
  border: 1.5px solid rgba(27, 42, 74, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vision-icon svg { width: 52%; height: 52%; }
.vision-plus {
  font-size: 1.5rem;
  font-weight: 300;
  color: rgba(27, 42, 74, 0.6);
}

/* 專業證照輪播(Bootstrap carousel 客製外觀) */
.cert-carousel { position: relative; max-width: 860px; margin: 0 auto; padding: 0 64px; }
.cert-carousel .cert-frame {
  background-color: var(--sw-white);
  border: 1px solid var(--sw-card-border);
  border-radius: 8px;
  padding: 16px;
}
.cert-carousel .cert-caption {
  text-align: center;
  font-size: 0.95rem;
  color: var(--sw-text);
  margin-top: 12px;
}
/* 固定證照圖片區，並讓所有圖說共用最高一張的高度，切換時不推動頁面。 */
#certCarousel { max-width: 760px; }
#certCarousel .img-ph { min-height: 0 !important; }
#certCarousel .cert-frame img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: contain;
}
#certCarousel .carousel-inner { display: grid; }
#certCarousel .carousel-item {
  display: block;
  grid-area: 1 / 1;
  margin-right: 0;
  visibility: hidden;
}
#certCarousel .carousel-item.active,
#certCarousel .carousel-item-next,
#certCarousel .carousel-item-prev { visibility: visible; }
@media (max-width: 767.98px) {
  #certCarousel .cert-frame img { height: 280px; }
}
.cert-carousel .carousel-control-prev,
.cert-carousel .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--sw-navy);
  opacity: 1;
}
.cert-carousel .carousel-control-prev { left: 0; }
.cert-carousel .carousel-control-next { right: 0; }
.cert-carousel .carousel-control-prev-icon,
.cert-carousel .carousel-control-next-icon { width: 18px; height: 18px; }
.cert-carousel .carousel-indicators { position: static; margin-top: 24px; margin-bottom: 0; }
.cert-carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  margin: 0 6px;
  background-color: rgba(27, 42, 74, 0.3);
  opacity: 1;
}
.cert-carousel .carousel-indicators .active { background-color: var(--sw-navy); }

@media (max-width: 767.98px) {
  .cert-carousel { padding: 0 52px; }
  .vision-box { gap: 10px; padding: 28px 16px; }
  .vision-icon { width: 60px; height: 60px; }
}

/* ============================================================
   服務實績 achievements.html
   ============================================================ */
/* 統計卡片 */
.stat-card {
  background-color: var(--sw-white);
  border: 1px solid var(--sw-card-border);
  border-radius: var(--sw-radius);
  text-align: center;
  padding: 24px 16px 20px;
  height: 100%;
}
.stat-card .icon-wc { margin: 0 auto 14px; }
.stat-card .stat-label {
  font-weight: 700;
  color: var(--sw-navy);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.stat-card .stat-num {
  font-family: var(--sw-font-en);
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--sw-navy);
  line-height: 1.2;
}
.stat-card .u-orange { margin: 12px auto 0; }

/* 服務類別卡片(整格可點擊) */
.ach-card {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 40px 36px;
  height: 100%;
  color: inherit;
}
.ach-card .ach-body h3 {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--sw-navy);
  margin-bottom: 4px;
}
.ach-card .ach-sub {
  font-weight: 700;
  color: var(--sw-navy);
  margin-bottom: 8px;
}
.ach-card ul {
  padding-left: 1.2em;
  margin: 0;
  line-height: 2.1;
  color: var(--sw-text);
  font-size: 0.98rem;
}
/* 小尺寸筆刷底線(卡片標題用) */
.brush-sm { width: 130px; height: 8px; margin: 6px 0 16px; }

@media (max-width: 767.98px) {
  .ach-card { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; }
  .ach-card .icon-wc { margin: 0 auto; }
}

/* ============================================================
   服務實績 achievements.html
   ============================================================ */
/* 統計數字卡片 */
.stat-card {
  text-align: center;
  padding: 28px 12px 22px;
  height: 100%;
}
.stat-card .icon-wc { width: 64px; height: 64px; margin: 0 auto; }
.stat-card .stat-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sw-navy);
  margin-top: 14px;
}
.stat-card .stat-num {
  font-family: var(--sw-font-en);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--sw-navy);
  line-height: 1.3;
}
.stat-card .u-orange { margin: 10px auto 0; }

/* 統計數字列(獨立區塊,置於 Hero 圖片下方、服務類別卡片上方) */
.stats-row .stat-card { height: 100%; }

/* 服務類別卡片(2×2) */
.cat-card {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  padding: 48px 40px;
  height: 100%;
  color: var(--sw-text);
}
.cat-card .icon-wc { flex-shrink: 0; }
.cat-card .cat-title {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--sw-navy);
  margin-bottom: 2px;
}
.brush-line-sm { width: 150px; height: 9px; margin: 6px 0 18px; }
.cat-card .cat-sub {
  font-weight: 700;
  color: var(--sw-navy);
  margin: 0 0 6px;
}
.cat-card ul {
  margin: 0;
  padding-left: 1.2em;
  line-height: 2.1;
}
@media (max-width: 767.98px) {
  .cat-card {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 24px;
  }
  .cat-card .icon-wc { width: 120px; height: 120px; }
}

/* ============================================================
   服務實績 detail achievements-detail.html
   ============================================================ */
.achievement-project-group { scroll-margin-top: 32px; }
.achievement-project-heading { margin-bottom: 0; }
.case-title {
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.7;
  color: var(--sw-navy);
  margin: 16px 0 12px;
}
.case-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sw-font-en);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sw-navy);
  margin-bottom: 10px;
}
.case-partner {
  font-weight: 700;
  color: var(--sw-navy);
  margin-bottom: 16px;
}
.case-desc { line-height: 2.1; margin-bottom: 16px; }
.case-points { margin: 0; padding-left: 1.2em; line-height: 2.2; }

/* 專案列表：桌面版統一左圖右文；手機版圖在上、文在下。 */
@media (max-width: 991.98px) {
  .case-row { --bs-gutter-x: 1.5rem; }
}
.case-item + .case-item { margin-top: 56px; }
/* 專案之間自動插入筆刷分隔線 */
.case-item + .case-item::before {
  content: "";
  display: block;
  width: 180px;
  height: 10px;
  margin: 0 auto 56px;
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(43, 90, 158, 0.85) 0%, rgba(43, 90, 158, 0.55) 55%, rgba(43, 90, 158, 0.15) 100%);
  transform: skewX(-12deg);
}
.achievement-pagination-wrap { margin-top: 56px; }
.achievement-pagination { gap: 8px; margin-bottom: 0; }
.achievement-pagination .page-link {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(27, 42, 74, 0.24);
  border-radius: 999px !important;
  color: var(--sw-navy);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(27, 42, 74, 0.08);
}
.achievement-pagination .page-link:hover,
.achievement-pagination .page-item.active .page-link {
  color: #fff;
  border-color: var(--sw-orange);
  background: var(--sw-orange);
}
.achievement-pagination .page-item.disabled .page-link {
  color: rgba(27, 42, 74, 0.38);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: none;
}

/* ============================================================
   服務產品 products.html
   ============================================================ */
.product-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  height: 100%;
}
.product-card .p-img { min-height: 220px; margin-bottom: 24px; }
.product-card .p-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--sw-navy);
  text-align: center;
  margin-bottom: 4px;
}
.product-card .u-orange { margin: 8px auto 18px; }
.product-card .p-sub {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sw-orange);
  text-align: center;
  line-height: 1.9;
  margin-bottom: 14px;
}
.product-card .p-desc { line-height: 2; margin-bottom: 20px; }
.product-card .p-action { margin-top: auto; text-align: center; }
/* 卡片內容浮在水彩之上(wc-wash 為絕對定位裝飾層) */
.product-card > :not(.wc-wash) { position: relative; z-index: 1; }

/* 產品卡底部水彩橫向暈染:沿底邊連續一整條,左右下角較濃、中間淡、向上柔和淡出,帶潑墨顆粒 */
.wc-wash {
  --wc: var(--wc-orange);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  pointer-events: none;
  z-index: 0;
}
/* 柔和底色:左下、右下兩角較濃 + 整體由下往上淡出 */
.wc-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 92% at 0% 100%, rgba(var(--wc), 0.42), transparent 66%),
    radial-gradient(52% 92% at 100% 100%, rgba(var(--wc), 0.42), transparent 66%),
    linear-gradient(to top, rgba(var(--wc), 0.10), transparent 68%);
}
/* 潑墨顆粒:遮罩集中在左右兩下角,中間大片透氣淡出、向上淡出 */
.wc-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(var(--wc), 0.72) 3px, transparent 4.5px),
    radial-gradient(rgba(var(--wc), 0.42) 2px, transparent 3px);
  background-size: 22px 22px, 13px 13px;
  background-position: 0 0, 7px 9px;
  -webkit-mask-image:
    radial-gradient(46% 100% at 0% 100%, #000 8%, transparent 66%),
    radial-gradient(46% 100% at 100% 100%, #000 8%, transparent 66%);
  mask-image:
    radial-gradient(46% 100% at 0% 100%, #000 8%, transparent 66%),
    radial-gradient(46% 100% at 100% 100%, #000 8%, transparent 66%);
}

/* 依卡片順序循環配色:1藍 2綠 3橘,第 4 張起自動接回藍(循環),不需後台指定 */
.col-lg-4:nth-child(3n+1) .product-card .wc-wash { --wc: var(--wc-blue); }
.col-lg-4:nth-child(3n+2) .product-card .wc-wash { --wc: var(--wc-green); }
.col-lg-4:nth-child(3n)   .product-card .wc-wash { --wc: var(--wc-orange); }
/* 人才招募組別卡(col-lg-6,一列兩張):同樣的底部水彩,依卡片順序循環配色 */
.col-lg-6:nth-child(3n+1) .dept-card .wc-wash { --wc: var(--wc-blue); }
.col-lg-6:nth-child(3n+2) .dept-card .wc-wash { --wc: var(--wc-green); }
.col-lg-6:nth-child(3n)   .dept-card .wc-wash { --wc: var(--wc-orange); }

/* ============================================================
   服務產品 detail products-detail.html
   ============================================================ */
.product-intro-markdown.article-body {
  max-width: none;
  margin: 0;
}
.product-intro-markdown.article-body > :first-child { margin-top: 0; }
.product-intro-markdown.article-body > :last-child { margin-bottom: 0; }
.product-detail-sections .product-image-section { padding-top: 24px; }
.product-detail-sections .product-image-section + .product-image-section {
  padding-top: 12px;
}
.product-section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 28px;
}
.product-section-heading .sec-title { margin-bottom: 8px; }
.product-section-divider {
  display: block;
  width: 170px;
  max-width: 44vw;
  height: 10px;
  object-fit: cover;
}
.product-detail-image-card {
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(27, 42, 74, 0.09);
}
.product-detail-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.product-image-section-feature .product-detail-image-card,
.product-image-section-content .product-detail-image-card {
  aspect-ratio: 0.82;
}
/* 產品內容保留白底與原有比例，移除外框效果。 */
.product-image-section-content .product-detail-image-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.product-image-section-application .product-detail-image-card {
  aspect-ratio: 1.04;
}
[data-product-slug="parkey"] .product-image-section-application .product-detail-image-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* 有說明的產品圖片依內容排列，保留圖面比例。 */
.product-detail-sections .product-detail-image-card.has-copy {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
}
.product-detail-image-card.has-copy img {
  height: 250px;
  padding: 16px;
  flex-shrink: 0;
}
.product-detail-image-card.has-copy figcaption { padding: 8px 24px 24px; }
.product-detail-image-card.has-copy h3 { font-size: 1.15rem; color: var(--sw-navy); line-height: 1.6; }
.product-detail-image-card.has-copy p { margin: 0; line-height: 1.9; overflow-wrap: anywhere; }
.product-intro-section .split-photo { width: auto; max-width: 100%; margin-inline: auto; }
@media (max-width: 575.98px) {
  .product-detail-sections .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
}
/* 核心亮點卡片 */
.hl-card { padding: 20px; height: 100%; }
.hl-card .hl-img { min-height: 140px; margin-bottom: 14px; }
.hl-card .hl-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sw-orange);
  text-align: center;
  margin-bottom: 8px;
}
.hl-card .hl-desc { font-size: 0.9rem; line-height: 1.9; margin: 0; }

/* 產品內容卡片 */
.fc-card { padding: 20px; height: 100%; }
.fc-card .fc-img { min-height: 140px; margin-bottom: 14px; }
.fc-card .fc-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sw-navy);
  text-align: center;
  margin-bottom: 8px;
}
.fc-card ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
  line-height: 2;
}

/* 適用情境卡片 */
.scene-card { padding: 14px; height: 100%; }
.scene-card .scene-img { min-height: 110px; }
.scene-card .scene-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sw-navy);
  text-align: center;
  margin: 10px 0 0;
}

/* 聯絡我們 CTA 區塊 */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 44px 48px;
}
.cta-band .cta-title {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--sw-navy);
  margin-bottom: 12px;
}
.cta-band .cta-desc { margin-bottom: 24px; }
@media (max-width: 767.98px) {
  .cta-band { padding: 32px 24px; }
}

/* ============================================================
   新聞 detail news-detail.html
   ============================================================ */
/* 標題區塊 */
.article-head { max-width: 820px; margin: 0 auto; }
.article-head .article-title {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.5;
  color: var(--sw-navy);
  margin-bottom: 10px;
}
.article-head .article-sub {
  font-size: 1.1rem;
  color: var(--sw-text);
  margin-bottom: 12px;
}
.article-head .article-date {
  font-family: var(--sw-font-en);
  font-weight: 700;
  color: var(--sw-orange);
  font-size: 0.95rem;
}

/* 內文(後台富文本輸出區) */
.article-body {
  max-width: 820px;
  margin: 0 auto;
  color: var(--sw-text);
  line-height: 2.05;
  font-size: 1.02rem;
}
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--sw-navy);
  margin: 36px 0 14px;
}
.article-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sw-orange);
  margin: 28px 0 10px;
}
.article-body p { margin: 0 0 18px; }
.article-body img,
.article-body .img-ph {
  display: block;
  width: 100%;
  border-radius: var(--sw-radius);
  margin: 24px 0;
}
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 1.4em; line-height: 2.1; }
/* 內嵌影片:16:9 響應式容器,後台富文本插入 iframe(YouTube/Vimeo 等嵌入碼)或上傳影片皆適用 */
.article-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 24px 0;
  border-radius: var(--sw-radius);
  overflow: hidden;
  background-color: #E5E2DC;
}
.article-video iframe,
.article-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.article-video .img-ph { position: absolute; inset: 0; margin: 0; border-radius: 0; }
.article-body blockquote {
  margin: 24px 0;
  padding: 4px 20px;
  border-left: 3px solid var(--sw-orange);
  color: var(--sw-navy);
}

/* 檔案下載：與文章欄寬對齊，長檔名不撐破 container */
.article-download {
  max-width: 820px;
  margin: 0 auto;
}
.article-download-list li { min-width: 0; }
.article-download-list .item-title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.article-download-list .arrow { flex-shrink: 0; }

/* 上一篇 / 下一篇 / 返回 導覽 */
.post-nav { max-width: 980px; margin: 8px auto 0; }
.post-nav .post-link {
  display: block;
  padding: 18px 22px;
  height: 100%;
}
.post-nav .post-link .pn-label {
  font-family: var(--sw-font-en);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--sw-orange);
  margin-bottom: 6px;
}
.post-nav .post-link.next { text-align: right; }
.post-nav .post-link .pn-title {
  font-weight: 700;
  color: var(--sw-navy);
  line-height: 1.6;
}
.post-nav .post-link:hover .pn-title { color: var(--sw-orange); }
.post-nav .post-back { display: flex; align-items: center; justify-content: center; }
@media (max-width: 767.98px) {
  .post-nav .post-link.next { text-align: left; }
  .post-nav .post-back { margin: 4px 0; }
}

/* ============================================================
   媒體報導 media.html
   ============================================================ */
.news-date {
  font-family: var(--sw-font-en);
  font-weight: 700;
  color: var(--sw-orange);
  font-size: 0.95rem;
}
.read-more {
  display: inline-block;
  font-weight: 700;
  color: var(--sw-orange);
  font-size: 0.95rem;
}
.read-more:hover { color: var(--sw-orange); text-decoration: underline; }

/* 精選報導大卡 */
.featured-card { padding: 24px; }
.featured-card .news-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--sw-navy);
  margin: 10px 0 14px;
}
.featured-card .news-title a { color: var(--sw-navy); }
.featured-card .news-desc { line-height: 2; margin-bottom: 16px; }

/* 次要報導卡片 */
.news-card { padding: 16px; height: 100%; display: flex; flex-direction: column; }
.news-card .news-img { min-height: 150px; margin-bottom: 14px; }
.news-card .news-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sw-navy);
  margin: 8px 0;
}
.news-card .news-title a { color: var(--sw-navy); }
.news-card .news-desc { font-size: 0.88rem; line-height: 1.9; margin-bottom: 12px; }
.news-card .read-more { margin-top: auto; }

/* 下方兩欄列表 */
.news-list-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--sw-navy);
  margin-bottom: 6px;
}
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(27, 42, 74, 0.12);
}
.news-list .news-date { flex-shrink: 0; }
.news-list a.item-title {
  color: var(--sw-text);
  font-size: 0.95rem;
}
.news-list a.item-title:hover { color: var(--sw-orange); }
.news-list .arrow {
  margin-left: auto;
  color: var(--sw-orange);
  font-family: var(--sw-font-en);
  font-weight: 700;
}

/* ============================================================
   人才招募 careers.html
   ============================================================ */
.dept-card {
  padding: 48px 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dept-card .icon-wc { margin: 0 auto 28px; }
.dept-card .dept-title {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--sw-navy);
  text-align: center;
  margin-bottom: 2px;
}
.dept-card .brush-line-sm { margin-left: auto; margin-right: auto; }
.dept-card .dept-desc {
  text-align: center;
  line-height: 2.1;
  margin-bottom: 24px;
}
.dept-card .dept-find {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sw-orange);
  margin-bottom: 10px;
}
.dept-card .dept-find.article-body {
  max-width: none;
  margin: 0 0 28px;
  font-size: 1rem;
  line-height: 2.1;
}
.dept-card .dept-find.article-body h3 {
  color: var(--sw-orange);
  font-size: 1.05rem;
  letter-spacing: 0;
  margin: 0 0 10px;
}
.dept-card .dept-find.article-body ul { margin-bottom: 0; }
.dept-card ul {
  margin: 0 0 28px;
  padding-left: 1.3em;
  line-height: 2.2;
}
.dept-card .dept-action { margin-top: auto; text-align: center; }
@media (max-width: 767.98px) {
  .dept-card { padding: 32px 24px; }
}

/* ============================================================
   人才招募組別 detail careers-detail.html
   ============================================================ */
/* Hero 上方組別標籤(淡橘底 + 小 icon + 橘字) */
.dept-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(232, 119, 34, 0.12);
  color: var(--sw-orange);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.dept-pill svg { width: 18px; height: 18px; }

/* 區塊卡片(我們在做什麼 / 適合這樣的你) */
.cd-card { padding: 36px 40px; }
.cd-card .cd-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.cd-card .cd-heading .icon-wc { width: 52px; height: 52px; }
.cd-card .cd-heading h2 {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--sw-navy);
  margin: 0;
}
.cd-card .cd-desc { line-height: 2; margin-bottom: 24px; }
.cd-card ul.cd-list { margin: 0; padding-left: 1.3em; line-height: 2.4; }

.recruitment-feature-card {
  padding: 0;
  overflow: hidden;
}
.recruitment-fixed-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}
.recruitment-feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
  padding: 42px 46px;
}
.recruitment-feature-content .cd-heading,
.recruitment-jobs-section .cd-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.recruitment-feature-content .cd-heading { margin-bottom: 8px; }
.recruitment-feature-content .cd-heading .icon-wc,
.recruitment-jobs-section .cd-heading .icon-wc {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}
.recruitment-feature-content .cd-heading h2,
.recruitment-jobs-section .cd-heading h2 {
  color: var(--sw-navy);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 0;
}
.recruitment-heading-line {
  display: block;
  width: 170px;
  height: 10px;
  margin: 0 0 20px 66px;
  object-fit: cover;
}
.recruitment-feature-content .cd-desc {
  line-height: 2;
  margin-bottom: 20px;
}
.recruitment-feature-content .cd-list {
  margin: 0;
  padding-left: 1.3em;
  line-height: 2.35;
}
.recruitment-feature-content .cd-list li::marker { color: #3c9b83; }
@media (max-width: 991.98px) {
  .recruitment-feature-content {
    min-height: 0;
    padding: 32px 26px;
  }
  .recruitment-fixed-photo { min-height: 260px; }
  .recruitment-heading-line { margin-left: 0; }
}

/* 「我們在做什麼」6 個服務 icon(2 欄 3 列) */
.service-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.service-item .svc-ic {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}
.service-item span {
  font-weight: 700;
  color: var(--sw-navy);
  font-size: 1.02rem;
}

/* 目前開放職缺卡片 */
.job-card { padding: 28px 26px; height: 100%; display: flex; flex-direction: column; color: var(--sw-text); }
/* 整張職缺卡為連結時的 hover(前往 104) */
a.job-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.job-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(27, 42, 74, 0.1); }
a.job-card:hover .job-title { color: var(--sw-orange); }
a.job-card:hover .read-more { text-decoration: underline; }
.job-card .job-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.job-card .job-ic { flex-shrink: 0; width: 54px; height: 54px; }
.job-card .job-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--sw-navy);
  margin: 0;
}
.job-type-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.job-type {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sw-navy);
  background-color: rgba(184, 212, 232, 0.35);
  border: 1px solid var(--sw-card-border);
  padding: 3px 14px;
  border-radius: 999px;
}
.job-card .job-desc { line-height: 1.9; font-size: 0.95rem; margin-bottom: 18px; }
.job-card .job-action { margin-top: auto; }
.job-card.job-empty { align-items: center; text-align: center; justify-content: center; }
.job-card.job-empty .job-title { font-size: 1.15rem; margin-bottom: 10px; }
.job-card.job-empty .job-desc { margin-bottom: 22px; }

/* 加入智行,你會獲得(4 格,橘色 icon) */
.benefit-item { padding: 8px 4px; }
.benefit-item .benefit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.benefit-item .benefit-ic { flex-shrink: 0; width: 40px; height: 40px; }
.benefit-item .benefit-ic svg { width: 100%; height: 100%; }
.benefit-item h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--sw-orange);
  margin: 0;
}
.benefit-item p { line-height: 1.9; font-size: 0.95rem; margin: 0; }

@media (max-width: 767.98px) {
  .cd-card { padding: 28px 22px; }
  .job-card { padding: 24px 20px; }
}

/* ============================================================
   左圖右文 內容區塊(核心技術/公司介紹/願景/產品簡介)
   圖片=後台上傳、文字=寫死 HTML(對齊 2026-06-25 規格會議記錄)
   ============================================================ */
.split-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sw-radius);
}
/* 特色項目(核心技術):小圖示 + 標題 + 條列 */
.feature-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
}
.feature-item + .feature-item { border-top: 1px solid rgba(27, 42, 74, 0.12); }
.feature-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.feature-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2E6E73; /* 依設計稿的藍綠色標題 */
  margin-bottom: 6px;
}
.feature-item ul { margin: 0; padding-left: 1.2em; }
.feature-item li { line-height: 1.9; }
/* 產品簡介(products-detail) */
.pd-intro-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--sw-navy);
}
@media (max-width: 991.98px) {
  .split-row .split-photo { margin-bottom: 8px; }
  .vision-panel { margin-top: 8px; }
}

/* ============================================================
   Hero(上傳背景圖 + HTML 標題文字;對齊 2026-06-25 規格)
   ============================================================ */
.hero-wrap {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 400px;
}
.hero-wrap .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* 插圖多在右側,優先保留 */
  z-index: 0;
}
/* 桌機遮罩:左側米色→中段淡出(文字都在左半),不蓋右側插圖;
   保證後台上傳任何圖,標題文字都讀得清楚 */
.hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 高於背景圖(0);文字容器同為 1 但 DOM 在後,仍壓在遮罩上 */
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(250, 248, 244, 0.92) 0%,
      rgba(250, 248, 244, 0.8) 32%,
      rgba(250, 248, 244, 0.35) 50%,
      rgba(250, 248, 244, 0) 64%);
}
.hero-plain::before { display: none; }
.hero-wrap .container { position: relative; z-index: 1; }
.hero-h {
  font-size: 2.7rem;
  font-weight: 900;
  color: var(--sw-navy);
  letter-spacing: 5px;
  margin-bottom: 6px;
}
.hero-h .dot { color: var(--sw-orange); }
.hero-sub2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sw-navy);
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.hero-p { line-height: 2; max-width: 430px; margin-bottom: 0; }
/* 首頁 Hero:滿版高(沿用淡入動畫 via section-img-fullscreen 名稱改掛在 wrap) */
.hero-fullscreen {
  min-height: calc(100vh - var(--sw-navbar-h));
  min-height: calc(100dvh - var(--sw-navbar-h));
  animation: swHeroFadeIn 1.8s ease both;
}
@media (prefers-reduced-motion: reduce) { .hero-fullscreen { animation: none; } }
/* 無圖 Hero(服務實績/人才招募):水彩頁底+純文字 */
.hero-plain { min-height: 0; padding: 72px 0 8px; }
/* RWD 規則(2026-07-17,業界主流「疊字+遮罩」式):手機/平板 Hero =
   矮橫帶背景圖(cover 裁切)+ 文字疊左側 + 米色→透明漸層遮罩墊在文字後,
   確保後台不管上傳什麼圖,標題文字都讀得清楚 */
@media (max-width: 991.98px) {
  .hero-wrap { min-height: 300px; }
  /* 遮罩:壓在背景圖(z0)之上、文字(z1)之下 */
  .hero-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1; /* 高於背景圖(0);文字容器同為 1 但 DOM 在後,仍壓在遮罩上 */
    background:
      linear-gradient(to right,
        rgba(250, 248, 244, 0.95) 0%,
        rgba(250, 248, 244, 0.88) 50%,
        rgba(250, 248, 244, 0.6) 80%,
        rgba(250, 248, 244, 0.35) 100%);
  }
  .hero-wrap .container { padding-top: 26px; padding-bottom: 30px; }
  .hero-fullscreen { min-height: 340px; }
  .hero-plain { padding: 56px 0 8px; }
  .hero-plain::before { display: none; }
  .hero-plain .container { padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 767.98px) {
  .hero-h { font-size: 1.9rem; letter-spacing: 3px; }
  .hero-p { max-width: 100%; }
}
/* 媒體頁桌機保留橫幅比例；首頁與媒體頁在窄螢幕上方放文字、下方裁切街景。 */
.media-hero { aspect-ratio: 2078 / 757; }
@media (max-width: 991.98px) {
  .home-hero, .media-hero {
    --responsive-hero-image-height: clamp(220px, 56vw, 360px);
    aspect-ratio: auto;
    min-height: 0;
    align-items: flex-start;
    padding-top: 28px;
    padding-bottom: var(--responsive-hero-image-height);
    background: #faf8f4;
  }
  .home-hero .hero-bg-img, .media-hero .hero-bg-img {
    inset: auto 0 0;
    height: var(--responsive-hero-image-height);
    object-position: right center;
  }
  .home-hero::before, .media-hero::before {
    inset: auto 0 0;
    height: var(--responsive-hero-image-height);
    background: linear-gradient(to bottom, #faf8f4 0%, rgba(250, 248, 244, 0) 28%);
  }
  .home-hero .container, .media-hero .container { padding-top: 0; padding-bottom: 24px; }
  /* 媒體清單的水平 gutter 與 container 留白一致，避免手機超出視窗。 */
  .media-hero ~ .sw-section .row.g-5 { --bs-gutter-x: 1.5rem; }
}
/* 類別卡/組別卡 icon:改後台上傳圖片(圓形裁切,彩色圓底維持風格) */
.icon-wc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ============================================================
   年度里程碑:直式時間軸(靠左直線+圓點;純文字寫死,無圖片)
   ============================================================ */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 8px;
  list-style: none;
}
/* 垂直線 */
.timeline::before {
  content: "";
  position: absolute;
  left: 130px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-color: rgba(27, 42, 74, 0.18);
}
.tl-item {
  position: relative;
  display: flex;
  gap: 34px;
  padding: 14px 0;
}
/* 年份(線左側) */
.tl-year {
  flex: 0 0 105px;
  text-align: right;
  font-weight: 900;
  color: var(--sw-navy);
  font-size: 1.15rem;
  line-height: 1.6;
  font-family: var(--sw-font-en);
}
.tl-year .roc { font-size: 0.85rem; font-weight: 400; opacity: 0.65; margin-left: 4px; }
/* 圓點(壓在線上) */
.tl-item::before {
  content: "";
  position: absolute;
  left: 125px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--sw-orange);
  border: 2.5px solid var(--sw-bg);
  box-shadow: 0 0 0 2px rgba(232, 119, 34, 0.35);
  z-index: 1;
}
/* 事件文字(線右側) */
.tl-text { line-height: 2; padding-top: 2px; }
@media (max-width: 767.98px) {
  .timeline::before { left: 86px; }
  .tl-item { gap: 24px; }
  .tl-item::before { left: 81px; top: 22px; }
  .tl-year { flex: 0 0 68px; font-size: 1.02rem; }
  .tl-year .roc { display: block; margin-left: 0; }
}

/* ============================================================
   404 錯誤頁
   ============================================================ */
.err-page {
  min-height: calc(100vh - var(--sw-navbar-h) - 260px);
  display: flex;
  align-items: center;
}
.err-code {
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  color: var(--sw-orange);
  letter-spacing: 4px;
}
.err-page .brush-line { margin: 20px auto 28px; }
.err-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--sw-navy);
  margin-bottom: 16px;
}
.err-desc { line-height: 1.9; margin-bottom: 32px; }

/* ============================================================
   回到頂部按鈕(由 js/main.js 動態插入,全站共用)
   ============================================================ */
.sw-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: var(--sw-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1030;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(27, 42, 74, 0.28);
}
.sw-totop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.sw-totop:hover { background-color: var(--sw-orange); }
.sw-totop svg { width: 22px; height: 22px; }
@media (max-width: 767.98px) {
  .sw-totop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ============================================================
   圖片防跳版:未來後台以真 <img> 取代灰底佔位框時,
   讓圖片填滿已保留尺寸的容器(min-height 已定),避免 layout shift。
   後台輸出 <img> 時建議加上 loading="lazy"。
   ============================================================ */
/* 一般區塊圖:自然流動,寬滿版、高度依圖片比例(設計完稿不裁切) */
.section-img img,
.img-ph img,
.news-img img,
.p-img img {
  display: block;
  width: 100%;
  height: auto;
}
/* 有真圖時,佔位框不再撐固定高度、改由圖片比例決定 */
.section-img:has(img),
.img-ph:has(img) { min-height: 0; background-color: transparent; }
/* 首頁滿版 Hero:圖片絕對定位鋪滿容器(維持精準一個螢幕高),超出部分裁切 */
.section-img-fullscreen { position: relative; overflow: hidden; }
.section-img-fullscreen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 品牌 Logo(navbar / footer) */
.logo-img { display: block; height: 48px; width: auto; }
.sw-footer .logo-img { height: 52px; }
/* 文章內文圖(後台富文本插入) */
.article-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sw-radius);
  margin: 24px 0;
}

/* ============================================================
   媒體報導:精選自動輪播(carousel)+ 清單空狀態
   ============================================================ */
/* 指示點移到卡片下方,改用品牌色 */
.featured-carousel .carousel-indicators {
  position: static;
  margin: 22px 0 0;
}
.featured-carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  border: none;
  background-color: var(--sw-card-border);
  opacity: 1;
  transition: background-color 0.2s ease;
}
.featured-carousel .carousel-indicators .active {
  background-color: var(--sw-orange);
}
/* 左右箭頭:深藍圓底才看得見白色箭頭,hover 轉橘 */
.featured-carousel .carousel-control-prev,
.featured-carousel .carousel-control-next {
  width: 6%;
  opacity: 1;
}
.featured-carousel .carousel-control-prev-icon,
.featured-carousel .carousel-control-next-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--sw-navy);
  background-size: 42% 42%;
  transition: background-color 0.2s ease;
}
.featured-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.featured-carousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--sw-orange);
}
/* 清單空狀態訊息(後台某分類 0 篇時顯示) */
.news-empty {
  color: #8A8A8A;
  font-size: 0.95rem;
  padding: 22px 0;
  margin: 0;
}

/* ============================================================
   RWD 細節
   ============================================================ */
@media (max-width: 767.98px) {
  .page-title { font-size: 2.1rem; letter-spacing: 3px; }
  .sec-title { font-size: 1.4rem; }
  .sw-section { padding: 44px 0; }
  .err-code { font-size: 5.5rem; }
  .err-title { font-size: 1.4rem; }
  /* 統計卡三張並排時,窄螢幕縮小字級與圓 icon 以免爆卡 */
  .stats-row .stat-num { font-size: 1.3rem; }
  .stats-row .stat-label { font-size: 0.78rem; }
  .stats-row .icon-wc { width: 44px; height: 44px; }
  .stats-row .icon-wc svg { width: 26px; height: 26px; }
}

/* 招募福利圖：手機將 2191 × 718 原圖的四張卡片分別裁出並直排。 */
@media (max-width: 991.98px) {
  .join-benefits-mobile {
    display: grid;
    gap: 16px;
    max-width: 510px;
    margin: 24px auto 40px;
  }
  .join-benefits-mobile h2 {
    margin: 0 0 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sw-orange);
    font-size: clamp(22px, 5.5vw, 28px);
    color: var(--sw-navy);
  }
  .join-benefit-crop {
    position: relative;
    overflow: hidden;
    aspect-ratio: 510 / 245;
    border-radius: 14px;
  }
  .join-benefit-crop img {
    position: absolute;
    width: 429.608%;
    max-width: none;
    height: auto;
    left: calc(var(--join-card-x) * -100% / 510);
    top: -124.082%;
  }
}

/* Case images stay together in the left column, with text in the right column. */
.case-media > img, .case-media figure img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 12px; }
.case-media figure { margin: 1.5rem 0 0; }
.case-media figcaption { margin-top: .75rem; color: #56606b; line-height: 1.7; font-size: .9rem; }