/* ==================== 權重通則 ====================
   tailwind.css 載入在本檔之後（見 inc/layout/head.html，刻意為之以覆蓋 daisyui），
   故同權重時 utility 勝出。要壓過 HTML 上的 Tailwind class，
   本檔規則需加前綴把權重提到 0,2,0 以上。
   以下各處只註明「被哪個 utility 壓制」，不再重複本段。 */

/* ==================== 字體系統 ==================== */
/*
 * 字體堆疊策略：
 * - 英文/數字：Archivo（自託管）
 * - 中文：Mac 優先 PingFang TC，Windows fallback Noto Sans TC
 */

body {
  color: var(--gray-950);
  font-family: "Archivo", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Archivo", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}

/* 符號分隔線（｜、/、-）使用極細字重 */
.separator {
  font-weight: var(--fw-thin);
}

/* ==================== 字重覆蓋 ==================== */
/*
 * 覆蓋 global.css 和 navigation.css 中使用 --fw-medium 的元素：
 * 英文大標改 bold、中文標題與內文改 semibold、符號改 thin
 */

/* 表單輸入框：維持 regular，不套用下方的 semibold 覆蓋 */
input,
textarea,
select,
.input,
.textarea,
.select {
  font-weight: var(--fw-regular);
}

/* ==================== 頁面英文大標 ==================== */
/* 適用：首頁區塊英文標題、內頁英文大標 */
.comfort-title,
.rental-title,
.partners-title .font-en,
.page-subtitle {
  font-weight: var(--fw-bold);
}

/* ==================== 中標/內文 ==================== */

/* 導覽列 */
.nav-multi-title,
.nav-single-link,
.mobile-panel-title,
.mobile-footer-btn,
.nav-navigation-link {
  font-weight: var(--fw-semibold);
}

/* 按鈕 */
.skip-link,
.search-button,
.category-nav-button,
.product-description-button {
  font-weight: var(--fw-semibold);
}

/* 標題顏色（此塊不設字重） */
.page-title,
.sidebar-title,
.accordion-title,
.hero-banner-title,
.hero-banner-subtitle,
.feature-label,
.feature-title,
.info-card-title,
.brand-icon-title,
.product-card-title {
  color: var(--gray-950);
}

.product-card-title,
.product-card-subtitle,
.product-list-title,
.product-info-title,
.product-info-subtitle,
.product-grid-title-zh,
.product-grid-title-en,
.article-card-title,
.article-simple-card-title,
.article-detail-title,
.article-zone-item-title,
.application-card-title,
.category-card-title,
.category-card-subtitle,
.contact-office-title,
.media-card-title,
.no-results-title,
.download-title {
  font-weight: var(--fw-semibold);
}

/* 首頁區塊 */
.comfort-card-title,
.comfort-card-subtitle,
.rental-item-desc {
  font-weight: var(--fw-semibold);
}

/* 日期 */
.article-zone-item-date,
.application-card-date {
  font-weight: var(--fw-semibold);
}

/* 頁尾 */
.footer-base-info-title,
.footer-form-title {
  font-weight: var(--fw-semibold);
}

.product-description-tabs .tab {
  font-weight: var(--fw-semibold);
}

/* 搜尋 */
.search-keyword,
.search-count {
  font-weight: var(--fw-semibold);
}

.contact-info-row dt {
  font-weight: var(--fw-semibold);
}

.site-btn {
  font-weight: var(--fw-regular);
}
/* ==================== 漸層文字 ==================== */

/* 白 → 標準色交錯的漸層文字，左上到右下傾斜 60 度。
   CSS 角度自正上方順時針起算，往右下 = 90 + 傾斜角，故為 150deg。
   深底頁面使用（本站 body 為 bg-black）。
   fallback 為白色：background-clip 失效時文字仍可讀，
   若留 transparent 會整段消失 */
.text-gradient-brand {
  color: var(--white);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient-brand {
    background-image: linear-gradient(150deg, var(--white) 0%, var(--brand-primary) 33.33%, var(--white) 66.66%, var(--brand-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* 手機改為品牌主色純色：小字級下漸層辨識度不足。
   文字本身為 transparent、靠 background-clip 顯色，
   只設 color 蓋不掉，須連背景一併還原。
   須置於上方 @supports 之後，同特異度靠順序勝出 */
@media (max-width: 767.98px) {
  .text-gradient-brand {
    background-image: none;
    color: var(--brand-primary);
  }
}

/* 白 → 灰 → 白 → 標準色 → 白，五色停，同為傾斜 60 度（150deg） */
.text-gradient-brand-gray {
  color: var(--white);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient-brand-gray {
    background-image: linear-gradient(150deg, var(--white) 0%, #7b7b7b 25%, var(--white) 50%, var(--brand-primary) 75%, var(--white) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* 同上，手機改品牌主色純色 */
@media (max-width: 767.98px) {
  .text-gradient-brand-gray {
    background-image: none;
    color: var(--brand-primary);
  }
}

/* ==================== 主選單：上 Logo 列 / 下導航列 ==================== */

.nav-logo-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 var(--space-base);
  position: relative;
  z-index: 3;
}

/* 手機版漢堡按鈕定位（絕對定位在右側） */
.nav-logo-bar .mobile-menu-toggle {
  position: absolute;
  right: 0;
}

/* 手機版漢堡按鈕樣式：外框線 + 微圓角 + 無底色 + 淺灰色 */
.mobile-menu-toggle {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  background-color: var(--gray-300);
}

.nav-menu-bar {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
}

/* ----- 覆蓋 navigation.css 既有 class ----- */

.navbar-brand .brand {
  height: 36px;
}

/* 預設（首頁與一般頁）：深色 logo，白 logo 隱藏 */
.navbar-brand .brand-light {
  display: none;
}

@media (max-width: 1199.98px) {
  .navbar-brand .brand {
    height: 32px;
  }
}

/* 導航連結高度：與手機版漢堡按鈕等高 */
.nav-menu-bar .nav-navigation-link {
  height: 40px;
}

.nav-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  gap: 4px;
}

.nav-search-btn .material-symbols-outlined {
  font-size: 20px;
}

/* ----- RWD ----- */

@media (max-width: 1199.98px) {
  .nav-menu-bar {
    display: none !important;
  }

  /* 手機下方選單已隱藏，移除 Logo 下方多餘間隔 */
  .nav-logo-bar {
    padding-bottom: 0;
  }
}

/* ==================== 主選單樣式覆蓋 ==================== */

.main-navigation {
  background-color: var(--white);
  padding: var(--space-base) 0 var(--space-base);
}

@media (max-width: 1199.98px) {
  .main-navigation {
    padding: 12px;
  }
}

/* 移除下滑時的漸層效果 */
.main-bg-gradient.is-solid-bg {
  background-image: none;
  opacity: 0;
}

/* 主選單浮貼於深色 hero 上，不淡入白底 */
body.page-tent-intro .main-navigation {
  background-color: transparent;
  /* 解除 fixed：選單不再跟著捲動，留在頁面頂端隨內容捲走 */
  position: absolute;
}

body.page-tent-intro .navbar-brand .brand-dark {
  display: none;
}

body.page-tent-intro .navbar-brand .brand-light {
  display: block;
}

body.page-tent-intro .nav-navigation-link {
  color: var(--white);
}

/* hover 與當前頁不用白底遮罩，改用白色外框線（outline 不佔空間、不撐開版面） */
body.page-tent-intro .nav-navigation-link:hover,
body.page-tent-intro .nav-navigation-link.active,
body.page-tent-intro .is-dropdown-open .nav-navigation-link {
  color: var(--white);
  background-color: transparent;
  outline: 1px solid var(--white);
  outline-offset: -1px;
}

/* 導覽連結文字改黑色。左右 padding 同時是文字留白與 hover 視覺效果
   （灰底，帳篷頁為外框線）的範圍；項目之間不另留間距，內容置中 */
.nav-navigation-link {
  color: var(--gray-950);
  padding: 0 var(--space-half);
  justify-content: center;
}

/* ≥1400px 才套等寬 154px（含左右 padding）：9 個項目在更窄的版面放不下，
   低於此斷點退回內容自適應寬度 */
@media (min-width: 1400px) {
  .nav-list > li {
    flex-shrink: 0;
  }

  .nav-navigation-link {
    width: 154px;
  }
}

.nav-navigation-link:hover,
.nav-navigation-link.active,
.is-dropdown-open .nav-navigation-link {
  color: var(--gray-950);
  background-color: var(--gray-100);
}

.nav-link-en {
  margin-left: 6px;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  color: inherit;
}

/* 蓬房介紹按鈕：文字壓在深色材質圖上，故用白色 */
.nav-link-tent {
  background-image: url("/images/shared/nav-link-tent-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
}

/* hover / 當前頁：保留背景圖，改用外框線表示狀態（不讓灰底蓋掉圖） */
.nav-link-tent:hover,
.nav-link-tent.active {
  color: var(--white);
  background-color: transparent;
  outline: 1px solid var(--white);
  outline-offset: -1px;
}

/* 蓬房介紹頁：選單已透明浮貼於深色 hero，關閉材質背景圖避免視覺打架 */
body.page-tent-intro .nav-link-tent {
  background-image: none;
}

/* ≤1199.98px 還原一般頁面選單：白底、深色 logo、固定頂端。
   此斷點不套整頁式（見「整頁式簡報」章節），橫幅高度僅影片自然高度，
   選單佔比過大時透明白字不易辨識 */
@media (max-width: 1199.98px) {
  body.page-tent-intro .main-navigation {
    position: fixed;
    background-color: var(--white);
  }

  body.page-tent-intro .navbar-brand .brand-dark {
    display: block;
  }

  body.page-tent-intro .navbar-brand .brand-light {
    display: none;
  }
}

/* ----- 透明疊圖選單（.nav-overlay）-----
   選單透明疊在頁面頂端的橫幅圖上，捲動超過門檻後由 navigation.js
   移除 .is-transparent，落回 .main-navigation 既有的白底樣式。
   手機版導航列本就隱藏、漢堡為淺色系，故整組僅在桌機斷點生效。
   沒有有效橫幅圖時，page_banner.html 會移除 body 的 .nav-overlay，
   選單即為一般白底。 */
@media (min-width: 1200px) {
  /* 橫幅頂到視窗最上緣，選單才有圖可疊 */
  body.nav-overlay .page-section {
    margin-top: 0;
  }

  body.nav-overlay .main-navigation {
    transition: background-color 0.3s;
  }

  body.nav-overlay .main-navigation.is-transparent {
    background-color: transparent;
  }

  /* 兩顆 logo 疊在同一位置，改以 opacity 交叉淡化
     （display 不是可動畫屬性，無法做淡入淡出） */
  body.nav-overlay .navbar-brand {
    position: relative;
  }

  body.nav-overlay .navbar-brand .brand-light {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  body.nav-overlay .navbar-brand .brand-dark,
  body.nav-overlay .navbar-brand .brand-light {
    transition: opacity 0.3s;
  }

  /* 白底時：深色 logo 可見 */
  body.nav-overlay .navbar-brand .brand-dark {
    opacity: 1;
  }

  body.nav-overlay .navbar-brand .brand-light {
    opacity: 0;
  }

  body.nav-overlay .main-navigation.is-transparent .navbar-brand .brand-dark {
    opacity: 0;
  }

  body.nav-overlay .main-navigation.is-transparent .navbar-brand .brand-light {
    opacity: 1;
  }

  /* 先鋪一層透明外框，讓 hover 的白框能以 outline-color 過渡而非瞬間出現。
     .nav-link-tent 的 hover 外框（權重 0,2,0）會被此處 0,2,1 蓋過，
     故其 hover 狀態於下方一併補回 */
  body.nav-overlay .nav-navigation-link {
    transition:
      color 0.3s,
      background-color 0.3s,
      outline-color 0.3s;
    outline: 1px solid transparent;
    outline-offset: -1px;
  }

  body.nav-overlay .nav-link-tent:hover,
  body.nav-overlay .nav-link-tent.active {
    outline-color: var(--white);
  }

  body.nav-overlay .main-navigation.is-transparent .nav-navigation-link {
    color: var(--white);
  }

  /* hover 與當前頁不用白底遮罩，改用白色外框線（outline 不佔空間、不撐開版面） */
  body.nav-overlay .main-navigation.is-transparent .nav-navigation-link:hover,
  body.nav-overlay .main-navigation.is-transparent .nav-navigation-link.active,
  body.nav-overlay .main-navigation.is-transparent .is-dropdown-open .nav-navigation-link {
    color: var(--white);
    background-color: transparent;
    outline-color: var(--white);
  }

  /* 關閉材質背景圖，避免與底下的橫幅圖視覺打架 */
  body.nav-overlay .main-navigation.is-transparent .nav-link-tent {
    background-image: none;
  }
}

/* 桌面版導航：隱藏子選單下拉箭頭 */
.nav-menu-bar .nav-arrow {
  display: none;
}

/* 單層下拉選單文字顏色：對齊多層選單標題 */
.nav-single-link {
  color: var(--gray-900);
}

/* 多層選單容器：取消最小高度，改由內容撐開 */
.nav-multi-container {
  min-height: unset;
}

/* 下拉選單橋接區域：填補選單項目到下拉面板之間的 padding 空白 */
.nav-menu-bar [data-dropdown] {
  position: relative;
}

.nav-menu-bar [data-dropdown]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 44px;
  pointer-events: auto;
}

/* ==================== 首頁滿版輪播 ==================== */

.hero-banner-fullwidth .swiper-slide {
  display: block;
}

.hero-banner-fullwidth .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-banner-swiper .hero-banner-pagination {
  display: flex;
  justify-content: center;
}

/* ==================== 內頁間距調整 ==================== */

/* 內頁 padding-bottom 覆蓋（margin-top 已由 global.css 使用 var(--nav-height)） */
.page-section {
  padding-bottom: 0;
}

.content-layout {
  margin-top: var(--space-4x);
  margin-bottom: var(--space-4x);
}

@media (max-width: 991.98px) {
  .content-layout {
    margin-top: var(--space-base);
  }
}

/* 手機：下方外距再縮一級（上方沿用平板的 1x） */
@media (max-width: 767.98px) {
  .content-layout {
    margin-bottom: var(--space-2x);
  }
}

/* 文章型詳細頁（article／application／case_studies／solutions_dt）與搜尋頁：
   桌機上方外距縮至 2x。
   限定 min-width：此選擇器權重（0,2,1）高於上方 max-width 斷點內的 .content-layout（0,1,0），
   不限定斷點會連平板與手機的 1x 一併蓋掉 */
@media (min-width: 992px) {
  body.page-article-dt .content-layout,
  body.page-search .content-layout {
    margin-top: var(--space-2x);
  }
}

/* 產品詳情頁：桌機麵包屑與主內容間距縮至 1x（限定 min-width 的理由同上） */
@media (min-width: 992px) {
  body.page-product-dt .content-layout {
    margin-top: var(--space-base);
  }
}

/* ==================== 首頁區塊通用間距 ==================== */

.home-section {
  padding: var(--space-4x) 0;
}

@media (max-width: 767.98px) {
  .home-section {
    padding: 30px 0;
  }
}

/* ==================== 服務流程區塊 ==================== */

/* 內容容器：標題 + icon 列共用，最大寬 1480、置中、左右內距
   （需求寬度 1480 大於 container 1140，故不用 .container） */
.service-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* 標題容器與中文副標樣式由 .partners-title 群組與 .section-header-subtitle 共用管理 */

.service-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-step {
  flex: 1 1 0;
  min-width: 120px;
  text-align: center;
}

.service-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  margin-bottom: 40px;
}

.service-step-icon img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.service-step-text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  line-height: 1.4;
}

.service-step-no {
  font-size: var(--fs-xl);
  color: var(--brand-primary);
  line-height: 1.4;
}

.service-step-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--gray-950);
  text-align: left;
}

/* 步驟間箭頭（真實 flex item）：自動對齊整個 step 垂直中心，不寫死值。
   .service-steps 是 align-items:flex-start，故箭頭需 align-self:stretch 撐到 step 高度，
   內部再 center，使箭頭落在整個 step（icon+文字）的垂直中心。 */
.service-step-arrow {
  flex: 0 0 32px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.service-step-arrow img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 桌機（≥992）：step 與箭頭交錯橫排，由基礎樣式即達成，此處無需覆蓋 */

@media (min-width: 768px) and (max-width: 991.98px) {
  /* step 寬 = (100% - 2 個箭頭寬) / 3，使每列剛好 3 step + 2 arrow = 100% */
  .service-step {
    flex: 0 0 calc((100% - 2 * 32px) / 3);
    max-width: calc((100% - 2 * 32px) / 3);
  }

  /* 隱藏換行邊界的箭頭 arrow3 = DOM 第 6 個 li
     （step/arrow 同為 li，須用 nth-child 不可用 nth-of-type） */
  .service-steps > li:nth-child(6) {
    display: none;
  }
}

/* 手機（<768）：單欄直排，箭頭各佔一列、向下 */
@media (max-width: 767.98px) {
  .service-step {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .service-step-arrow {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .service-step-arrow img {
    transform: rotate(90deg);
  }

  .service-step-icon {
    height: 64px;
    margin-bottom: 24px; /* 手機 icon 縮小後下距也縮 */
  }
}

/* ==================== 服務流程詳細輪播 ==================== */

/* section 滿版並裁掉兩側溢出，避免水平捲軸 */
.service-slider-section {
  overflow: hidden;
}

/* swiper 容器：相對定位，作為箭頭絕對定位基準 */
.service-slider-swiper {
  position: relative;
}

/* slide 寬度對齊 Tailwind container（編譯後斷點 540/720/960/1140，非 theme 576/768/992/1200，
   故本段刻意用 container 的 min-width 斷點，與專案其他 max-width RWD 慣例不同）。
   固定 px 寬供 slidesPerView:"auto" 精準量測；max-width:calc(100% - 2rem) 對應 container 左右 1rem padding，
   視窗 < slide 寬時退回滿版減 padding（<540px 即此情況，兩側幾乎不露出）。 */
.service-slider-slide {
  width: 540px; /* 預設 / <540px 由 max-width 退化為 100%-2rem */
  max-width: calc(100% - 2rem);

  /* 高度由寬度換算，各斷點一律 2.85 比例（即 ≥1200px 的 1140×400）。
     素材 855×480，此比例上下各裁去 18.5%。 */
  aspect-ratio: 2.85;
  box-sizing: border-box;

  /* 錯位動畫：JS 已開 virtualTranslate，wrapper 不位移，每張的 transform
     就是它自己的定位（由 applyTranslate 逐張寫入）。三張各自走完整段距離、
     只差起跑時間，接力感才看得出來。
     duration 與 delay 一律由 JS 寫 inline（三張各異），此處只定調屬性與曲線。 */
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;

  /* z-index 的生效前提；同時作為左右兩側與畫面外 slide 的共同層級 */
  position: relative;
  z-index: 1;
}

/* 中央圖的 z-index 由 JS 的 applyDepth() 寫 inline，此處不設規則
   （不能用 .swiper-slide-active：它在切換一開始就跳到新的一張，與眼睛看到的中央不符） */

.service-slider-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 箭頭：白色實心三角（Font Awesome caret），壓在中央圖左右、垂直置中 */
.service-slider-prev,
.service-slider-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--white);
  cursor: pointer;
}

/* icon 尺寸與 hover 轉色的過渡（hover 顏色見下一條規則） */
.service-slider-prev i,
.service-slider-next i {
  font-size: 72px;
  transition: color 0.2s ease;
}

.service-slider-prev:hover i,
.service-slider-next:hover i {
  color: var(--brand-primary);
}

/* 箭頭壓在中央圖左右邊緣內側、垂直置中。base（<540px）貼齊 1rem padding 內緣 */
.service-slider-prev {
  left: 1rem;
}

.service-slider-next {
  right: 1rem;
}

/* 下方連動文字：寬度/水平 padding 由 .container 提供（HTML 已加 container class），
   此處只負責上方間距與文字置中 */
.service-slider-caption {
  margin-top: var(--space-base);
  text-align: center;
}

/* 限制文案寬度 480px，避免長行難讀。
   transition-duration 不寫死：淡出/淡入時長要跟圖片接力動畫總時長同步，
   由 custom.js 的 updateCaption() 動態寫 inline transitionDuration。 */
.service-slider-caption-inner {
  max-width: 480px;
  margin: 0 auto;
  transition-property: opacity;
  transition-timing-function: ease;
}

/* 切換瞬間淡出，JS 換完字後移除此 class 淡入 */
.service-slider-caption-inner.is-fading {
  opacity: 0;
}

.service-slider-caption-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--space-base);
}

.service-slider-caption-no,
.service-slider-caption-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  color: var(--brand-primary);
}

.service-slider-caption-desc {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--gray-950);
  line-height: 2;
}

/* ===== slide 寬度與箭頭定位對齊 container 的 540/720/960/1140 斷點 =====
   箭頭以 calc(50% - 寬/2) 對到中央圖邊緣，再 +1.5rem 內縮讓三角落在圖內側
   （50% = swiper 中線 = slide 置中線） */
@media (min-width: 540px) {
  .service-slider-slide {
    width: calc(540px - 2rem);
  }
  .service-slider-prev {
    left: calc(50% - (540px - 2rem) / 2 + 1.5rem);
  }
  .service-slider-next {
    right: calc(50% - (540px - 2rem) / 2 + 1.5rem);
  }
}

@media (min-width: 720px) {
  .service-slider-slide {
    width: calc(720px - 2rem);
  }
  .service-slider-prev {
    left: calc(50% - (720px - 2rem) / 2 + 1.5rem);
  }
  .service-slider-next {
    right: calc(50% - (720px - 2rem) / 2 + 1.5rem);
  }
}

@media (min-width: 960px) {
  .service-slider-slide {
    width: calc(960px - 2rem);
  }
  .service-slider-prev {
    left: calc(50% - (960px - 2rem) / 2 + 1.5rem);
  }
  .service-slider-next {
    right: calc(50% - (960px - 2rem) / 2 + 1.5rem);
  }
}

@media (min-width: 1140px) {
  .service-slider-slide {
    width: calc(1140px - 2rem);
  }
  .service-slider-prev {
    left: calc(50% - (1140px - 2rem) / 2 + 1.5rem);
  }
  .service-slider-next {
    right: calc(50% - (1140px - 2rem) / 2 + 1.5rem);
  }
}

/* ≥1200px：.container 的直接子層加了 xl:-mx-4，抵銷左右 padding 撐滿到 1140px，
   故此斷點的 slide 寬度不再扣 2rem，改與撐寬後的文字說明外層邊界對齊 */
@media (min-width: 1200px) {
  .service-slider-slide {
    width: 1140px;
  }
  .service-slider-prev {
    left: calc(50% - 1140px / 2 + 1.5rem);
  }
  .service-slider-next {
    right: calc(50% - 1140px / 2 + 1.5rem);
  }
}

/* 小螢幕：縮小箭頭 icon 與 caption 上下間距（與 container 對齊無關，沿用專案 max-width 慣例）。
   此斷點 slide 高度介於 120–241px，icon 取 32px */
@media (max-width: 767.98px) {
  .service-slider-prev i,
  .service-slider-next i {
    font-size: 32px;
  }

  .service-slider-caption {
    margin-top: 24px;
  }

  .service-slider-caption-head {
    margin-bottom: var(--space-half);
  }
}

/* ==================== 首頁區塊標題 - 共用樣式 ==================== */

.section-header {
  text-align: center;
  margin-bottom: var(--space-base);
}

@media (max-width: 767.98px) {
  .section-header {
    margin-bottom: var(--space-half);
  }
}

.section-header-title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  color: var(--gray-950);
}

/* 區塊標題的英文（.font-en）使用品牌主色 */
.section-header-title .font-en {
  color: var(--brand-primary);
  line-height: 1; /* 壓低英文標題行框，覆蓋核心繼承的 1.5 */
}

.section-header-subtitle {
  margin-top: var(--space-base);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--gray-950);
}

/* ==================== 舒適製造區塊 ==================== */

.comfort-subtitle {
  color: var(--gray-950);
  margin: 50px 0;
  line-height: 1.8;
}

.comfort-card {
  display: block;
  background-color: var(--white);
  text-decoration: none;
}

.comfort-card-image {
  overflow: hidden;
}

.comfort-card-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.comfort-card:hover .comfort-card-image img {
  transform: scale(1.1);
}

.comfort-card-body {
  padding: 20px;
  text-align: center;
}

.comfort-card-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--gray-950);
  margin-bottom: 8px;
}

.comfort-card-subtitle {
  font-size: var(--fs-xs);
  color: var(--gray-950);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.comfort-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.comfort-cards-row {
  display: contents;
}

@media (max-width: 767.98px) {
  .comfort-cards {
    display: block;
  }

  .comfort-card-featured {
    display: flex;
    flex-direction: row;
  }

  .comfort-card-featured .comfort-card-image {
    width: 50%;
    flex-shrink: 0;
  }

  .comfort-card-featured .comfort-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
  }

  /* 上方外距是與 featured 卡片（見上）的間隔 */
  .comfort-cards-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 8px;
  }
}

/* ==================== 國際租賃區塊 ==================== */

.rental-section {
  background-color: var(--white);
}

.rental-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rental-item-desc {
  font-size: var(--fs-base);
  color: var(--gray-950);
  line-height: 2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 圖文佈局：手機單欄、桌面雙欄各半，全程用 Grid（不與 flex 混用）
   單欄時上下間距 24px；雙欄各半，分割線恆在容器正中，padding/margin 不污染欄寬 */
.rental-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px; /* 手機版上下間距 */
}

/* 桌面版圖文左右各半（斷點 1024 對齊 Tailwind lg:，圖片在左、文字在右）
   兩欄精確各 50%、無 gap，故 50/50 分割線恆在容器正中。
   圖片靠右貼分割線；文字以 padding-left 往內縮（border-box：padding 含在 50% 內，不推移分割線） */
@media (min-width: 1024px) {
  .rental-row {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  /* 圖片內層：限寬 570px 並靠右，貼齊容器正中（50/50 分割線） */
  .rental-figure-inner {
    max-width: 570px;
    margin-left: auto;
  }

  /* 文字區塊：左側加間距讓文字往內縮（padding 含在 50% 欄內，不影響分割線）
     並改為 flex 直排撐滿欄高，讓按鈕得以貼齊欄底 */
  .rental-text {
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 文字區塊標題靠左（覆寫共用 .section-header 的置中），並縮小與說明的間距 */
  .rental-header {
    text-align: left;
    margin-bottom: 20px;
  }

  /* 內容區撐滿剩餘高度，按鈕才能用 margin-top:auto 貼到最下方 */
  .rental-content {
    flex: 1;
  }

  .rental-action {
    margin-top: auto;
  }
}

/* 手機版：圖片排在文字前（上圖下文） */
@media (max-width: 1023.98px) {
  .rental-figure {
    order: -1;
  }
}

.site-btn-sm {
  padding: 6px 12px;
  font-size: var(--fs-2xs);
  line-height: initial;
}

/* 矩形按鈕基礎樣式（左下直角、其他三角倒角） */
.site-btn-rect {
  border: 1px solid var(--gray-950);
  border-radius: 8px 8px 8px 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.site-btn-rect.is-dark {
  background-color: var(--gray-950);
  color: var(--white);
}

.site-btn-rect.is-dark:hover {
  background-color: var(--white);
  color: var(--gray-950);
}

.site-btn-rect.is-light {
  background-color: var(--white);
  color: var(--gray-950);
}

.site-btn-rect.is-light:hover {
  background-color: var(--gray-950);
  color: var(--white);
}

/* 文章卡「繼續閱讀」：四角圓角 8px、外框淺灰，文字在 is-light 下為淺灰 */
.site-btn-rect.is-news-readmore {
  border-radius: 8px;
  border-color: var(--gray-200);
}
.site-btn-rect.is-light.is-news-readmore {
  color: var(--gray-200);
}

/* 「繼續閱讀」按鈕：hover 改為主色底 + 主色框 + 白字 */
.site-btn-rect.is-light.is-readmore:hover {
  background-color: var(--brand-primary);
  color: var(--white);
  border-color: var(--brand-primary);
}

/* 「我要諮詢」按鈕：hover 改為主色底 + 主色框 + 白字（僅此按鈕，不影響其他 is-light 按鈕） */
.site-btn-rect.is-light.is-inquiry:hover {
  background-color: var(--brand-primary);
  color: var(--white);
  border-color: var(--brand-primary);
}

.site-btn.is-square {
  border-radius: 0;
}

.product-info-active {
  justify-content: flex-end;
}

/* 手機：「我要諮詢」按鈕改靠左 */
@media (max-width: 767.98px) {
  .product-info-active {
    justify-content: flex-start;
  }
}

/* 相容舊 class */
.site-btn-black {
  background-color: var(--gray-950);
  border: 1px solid var(--gray-950);
  border-radius: 0;
  color: var(--white);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.site-btn-black:hover {
  background-color: var(--white);
  color: var(--gray-950);
}

/* 國際租賃 - 滿版 CTA 按鈕：撐滿文字欄寬，左中文右英文兩端對齊 */
.rental-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 12px;
  font-size: var(--fs-base);
}

/* 實績案例按鈕：預設沿用共用黑底白字，hover 時才換成主色底 */
.rental-cta.site-btn-black:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--white);
}

/* 搜尋結果「檢視更多」：hover 換成主色底白字 */
.search-result-section .site-btn-black:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--white);
}

/* ==================== 文章專區區塊 ==================== */

.article-zone-section {
  background-color: var(--white);
}

.article-zone-image {
  overflow: hidden;
}

.article-zone-image img {
  transition: transform 0.5s ease;
}

.article-zone-image:hover img {
  transform: scale(1.1);
}

.article-zone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.article-zone-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.article-zone-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.article-zone-item-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-zone-item-date {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--gray-950);
}

.article-zone-item-desc {
  margin-top: var(--space-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--gray-950);
  line-height: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 桌面版：上圖、下文章列表（上下堆疊） */
@media (min-width: 992px) {
  .article-zone-list {
    min-width: 0;
    padding-top: var(--space-base);
  }

  /* 桌面版：item 不均分，間距由內距控制 */
  .article-zone-item {
    flex: initial;
  }
}

@media (max-width: 991.98px) {
  .article-zone-item {
    padding: 20px 0;
  }
}

/* 手機：只留第一筆文章，並縮短標題列與說明文字的距離 */
@media (max-width: 767.98px) {
  .article-zone-item:not(:first-child) {
    display: none;
  }

  .article-zone-item-desc {
    margin-top: var(--space-half);
  }
}

/* ==================== 頁尾區塊（淺灰底深色字） ==================== */

.footer-section {
  background-color: #f3f3f3;
  color: var(--gray-950);
  padding-top: 50px;
}

/* 頁尾品牌 logo（橫跨全寬，置於主內容區上方）— 桌機基底，手機於下方 media 覆蓋 */
.footer-brand {
  padding-top: 60px;
  margin-bottom: 40px;
}

@media (max-width: 767.98px) {
  .footer-section {
    padding-top: 30px;
  }

  /* 頁尾品牌 logo 區：手機縮小上下間距（桌機值保留） */
  .footer-brand {
    padding-top: 0;
    margin-bottom: 24px;
  }
}

.footer-section[data-theme="dark"] {
  color-scheme: light;
}

/* 頁尾不使用核心的 navbar 佈局，改用 .footer-main */
.footer-navbar {
  display: none;
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
}

.footer-info {
  min-width: 300px;
}

/* 桌機左右並排：各佔一半、無間距 */
@media (min-width: 992px) {
  .footer-info,
  .footer-form-wrapper {
    width: 50%;
  }
}

/* 頁底 logo 尺寸對齊主選單（.navbar-brand .brand）：
   以 height 控制，並覆蓋 core/global.css 的 width:100% / max-width:150px */
.footer-brand .footer-logo {
  width: auto;
  height: 36px;
  max-width: 100%;
}

@media (max-width: 1199.98px) {
  .footer-brand .footer-logo {
    height: 32px;
  }
}

.footer-contact-item {
  display: flex;
  align-items: baseline;
  font-size: var(--fs-sm);
  color: var(--gray-700);
  margin-bottom: 32px;
}

@media (max-width: 767.98px) {
  .footer-contact-item {
    margin-bottom: 16px;
  }
}

.footer-contact-label {
  flex-shrink: 0;
  text-align: justify;
  text-align-last: justify;
}

.footer-contact-label::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 8px;
  background-color: var(--gray-400);
  vertical-align: -0.2em;
}

.footer-form {
  padding-top: 0;
}

.footer-section .checkbox,
.footer-section .radio {
  border-color: var(--gray-400);
}

.footer-section .label {
  color: var(--gray-700);
}

.footer-section .site-btn-arrow {
  background-color: var(--white);
  border: 1px solid var(--gray-300);
}

.footer-section .site-btn-arrow .text-block {
  color: var(--gray-950);
}

.footer-section .site-btn-arrow .site-btn-arrow-icon {
  background-color: var(--gray-950);
  color: var(--white);
}

.footer-section .site-btn-arrow:hover {
  border-color: var(--gray-950);
}

.footer-section .divider-h {
  border-color: var(--gray-200);
}

.footer-section .footer-copyright {
  margin-top: 40px;
  justify-content: center;
}

.footer-section .copyright {
  color: var(--gray-600);
  text-align: center;
}

.footer-section .copyright a {
  color: var(--gray-600);
  text-decoration: none;
}

.footer-section .copyright a:hover {
  color: var(--gray-950);
}

.footer-section .social a {
  color: var(--gray-500);
}

.footer-section .social a:hover {
  color: var(--gray-950);
}

.footer-section .social span {
  color: var(--gray-300);
}

@media (max-width: 991.98px) {
  .footer-main {
    flex-direction: column;
    gap: 32px;
  }

  .footer-form-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .footer-form-wrapper {
    min-width: 100%;
  }
}

/* 區塊標題容器：英文大標 + 中文副標上下置中排列（service / partners 共用） */
.service-title,
.partners-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 合作客戶區塊：關閉上方內距（覆蓋 .home-section 的 padding-top） */
.partners-section {
  padding-top: 0;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
}

.partners-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 100px;
}

.partners-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .partners-item {
    width: auto;
    height: auto;
  }

  .partners-item img {
    max-height: 60px;
  }
}

/* ==================== 內頁橫幅 ==================== */

.banner-image {
  height: unset;
  overflow: unset;
}

/* ==================== 聯絡我們頁面 ==================== */

/* 麵包屑和標題上下排列且置中（用於詳細頁） */
.header-layout-center {
  align-items: center;
  text-align: center;
}

/* 麵包屑和標題左右分邊（覆蓋 .header-layout 的 flex-flow: column） */
.header-layout-row {
  flex-flow: row;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-2x);
}

.header-layout-product {
  margin-top: var(--space-base);
}

/* 平板：麵包屑上方間距縮一級 */
@media (max-width: 991.98px) {
  .header-layout-product {
    margin-top: 32px;
  }
}

/* 手機：再縮一級 */
@media (max-width: 767.98px) {
  .header-layout-product {
    margin-top: var(--space-half);
  }
}

/* 產品詳情頁麵包屑靠左（覆蓋全站 .bread-crumbs 的置中） */
.header-layout-product .bread-crumbs {
  justify-content: flex-start;
}

/* 麵包屑區塊與標題區塊左右各佔一半 */
.header-layout-row .breadcrumb-wrapper,
.header-layout-row .page-header {
  width: 50%;
}

/* 麵包屑佔半後文字靠左（覆蓋全站置中） */
.header-layout-row .bread-crumbs {
  justify-content: flex-start;
}

/* 標題區塊：中文靠左、英文靠右，黑色底包覆 */
.header-layout-row .page-header {
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  background-color: var(--black);
  padding: 8px 16px;
}

.header-layout-row .page-title {
  order: 0;
  color: var(--white);
}

.header-layout-row .page-subtitle {
  order: 1;
  color: var(--white);
}

/* 黑底白字標題條（中文靠左、英文靠右），可獨立套用於 page-header */
.page-header-bar {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  background-color: var(--black);
  padding: 8px 16px;
  margin-bottom: var(--space-base);
}

/* 平板：標題條下方間距縮一級 */
@media (max-width: 991.98px) {
  .page-header-bar {
    margin-bottom: 32px;
  }
}

/* 手機：再縮一級 */
@media (max-width: 767.98px) {
  .page-header-bar {
    margin-bottom: 24px;
  }
}

.page-header-bar .page-title {
  order: 0;
  color: var(--white);
  font-size: var(--fs-base);
}

.page-header-bar .page-subtitle {
  order: 1;
  color: var(--white);
  font-size: var(--fs-base);
}

/* 黑底標題條內文字降為內文字級 */
.header-layout-row .page-title,
.header-layout-row .page-subtitle {
  font-size: var(--fs-base);
}

@media (max-width: 767.98px) {
  .header-layout-row {
    margin-top: var(--space-half);
  }
}

/* 手機版：標題列改上下堆疊，麵包屑與標題條各佔滿寬且內容置中 */
@media (max-width: 575.98px) {
  .header-layout-row,
  .header-layout-center {
    gap: 12px;
  }
  .header-layout-row {
    flex-flow: column;
    align-items: center;
  }

  /* 堆疊後兩區塊撐滿寬度（覆蓋桌機版的各佔一半） */
  .header-layout-row .breadcrumb-wrapper,
  .header-layout-row .page-header {
    width: 100%;
  }

  /* 麵包屑文字置中（覆蓋桌機版 row 與 product 版型的靠左） */
  .header-layout .bread-crumbs {
    justify-content: center;
  }

  .header-layout-row .page-header {
    text-align: center;
    gap: 4px;
  }
}

/* 聯絡我們：左右分欄（左資訊 / 右表單） */
.contact-main {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  .contact-info {
    width: 50%;
  }

  .contact-form-col {
    width: 50%;
  }
}

@media (max-width: 991.98px) {
  .contact-main {
    flex-direction: column;
    gap: 32px;
  }

  .contact-form-col {
    max-width: 100%;
  }

  .contact-block-title {
    margin-bottom: 32px;
  }

  .contact-detail-item {
    margin-bottom: 24px;
  }

  .contact-form {
    gap: 32px 24px;
  }
}

@media (max-width: 767.98px) {
  .contact-form-col {
    min-width: 100%;
  }
}

.contact-block-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--brand-primary);
  margin-bottom: var(--space-base);
}

.contact-detail-item {
  display: flex;
  align-items: baseline;
  font-size: var(--fs-sm);
  color: var(--gray-700);
  margin-bottom: 32px;
}

.contact-detail-label {
  flex-shrink: 0;
  text-align: justify;
  text-align-last: justify;
}

.contact-detail-label::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 8px;
  background-color: var(--gray-400);
  vertical-align: -0.2em;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-base) 24px; /* 第一值為列距（輸入框之間） */
}

.contact-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-form-row label {
  flex-shrink: 0;
  min-width: 80px;
  font-size: var(--fs-sm);
  color: var(--gray-700);
}

.contact-form-row input,
.contact-form-row textarea {
  flex: 1;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  padding: 10px 14px;
  background-color: var(--white);
  font-size: var(--fs-sm);
}

.contact-form-row input:focus,
.contact-form-row textarea:focus {
  outline: none;
  border-color: var(--gray-500);
}

.contact-form-row.textarea-row {
  align-items: flex-start;
}

.contact-form-row.textarea-row label {
  padding-top: 10px;
}

.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
}

.contact-submit-btn {
  padding: 10px 28px;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--brand-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.contact-submit-btn:hover {
  background-color: var(--brand-primary);
  color: var(--white);
}

@media (max-width: 767.98px) {
  .contact-form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .contact-form-row label {
    text-align: left;
  }

  .contact-form-row input,
  .contact-form-row textarea {
    width: 100%;
  }

  .contact-form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 12px;
  }

  .contact-submit-btn {
    width: 100%;
  }

  .contact-main {
    gap: 24px;
  }

  .contact-block-title {
    margin-bottom: 20px;
  }

  .contact-detail-item {
    margin-bottom: 20px;
  }

  .contact-form {
    gap: 24px 24px;
  }

  .textarea-row label {
    padding-top: 0;
  }
}

/* ==================== 頁尾表單 ==================== */

.footer-contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
}

.footer-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-form-row.full-width {
  grid-column: span 1;
}

.footer-form-row label {
  flex-shrink: 0;
  min-width: 80px;
  font-size: var(--fs-sm);
  color: var(--gray-700);
}

.footer-form-row input,
.footer-form-row textarea {
  flex: 1;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  padding: 10px 14px;
  background-color: transparent;
  font-size: var(--fs-sm);
}

.footer-form-row input:focus,
.footer-form-row textarea:focus {
  outline: none;
  border-color: var(--gray-500);
}

.footer-form-row.textarea-row {
  align-items: flex-start;
}

.footer-form-row.textarea-row label {
  padding-top: 10px;
}

.footer-form-footer {
  grid-column: span 1;
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

.footer-submit-btn {
  padding: 10px 28px;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  background-color: transparent;
  color: var(--brand-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.footer-submit-btn:hover {
  background-color: var(--brand-primary);
  color: var(--white);
}

/* RWD：手機版 label 與輸入框改為上下堆疊 */
@media (max-width: 767.98px) {
  .footer-form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .footer-form-row label {
    text-align: left;
  }

  .footer-form-row input,
  .footer-form-row textarea {
    width: 100%;
  }

  .footer-submit-btn {
    width: 100%;
  }
}

/* ==================== 產品目錄九宮格 ==================== */

.product-grid-item {
  position: relative;
  display: block;
  overflow: hidden;
}

.product-grid-item > img {
  transition: transform 0.5s ease;
}

.product-grid-item:hover > img {
  transform: scale(1.1);
}

/* 外層：只負責定位，貼圖底向上移一個基礎距離、置中內層黑條 */
.product-grid-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-base);
  display: flex;
  justify-content: center;
  padding-inline: 16px;
}

/* 內層：黑底白字條，樣式同 case-study-card-head */
.product-grid-titlebar {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 490px;
  padding: 8px 16px;
  background-color: var(--black);
  transition: background-color 0.3s ease;
}

.product-grid-item:hover .product-grid-titlebar {
  background-color: var(--brand-primary);
}

.product-grid-title-zh {
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--white);
}

.product-grid-title-en {
  flex-shrink: 0;
  font-size: var(--fs-base);
  color: var(--white);
}

@media (max-width: 767.98px) {
  .product-grid-titlebar {
    flex-flow: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

/* ==================== Application 應用分享頁面 ==================== */

.application-list-wrapper {
  display: flex;
  flex-direction: column;
}

.application-card {
  display: flex;
  margin-bottom: var(--space-2x);
  text-decoration: none;
  color: inherit;
}

.application-card:last-child {
  margin-bottom: 0;
}

.application-card-image {
  flex-shrink: 0;
  width: 50%;
  overflow: hidden;
}

.application-card-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.application-card-image:hover img {
  transform: scale(1.1);
}

/* 整卡可點擊的列表（最新消息、解決方案）：滑鼠移到卡片任一處，圖片與按鈕 hover 一併觸發 */
a.application-card:hover .application-card-image img {
  transform: scale(1.1);
}

a.application-card:hover .site-btn-rect.is-light.is-readmore {
  background-color: var(--brand-primary);
  color: var(--white);
  border-color: var(--brand-primary);
}

.application-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 40px;
}

.application-card-content {
  flex: 1;
}

.application-card-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  margin-bottom: var(--space-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.application-card-summary {
  font-size: var(--fs-base);
  color: var(--gray-950);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.application-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.application-card-date {
  font-size: var(--fs-sm);
  color: var(--gray-950);
}

/* 搜尋頁文章結果不顯示封面圖，內文靠左與分類標題對齊 */
body.page-search .article-item .application-card-body {
  padding-left: 0;
  padding-top: 0;
}

@media (max-width: 991.98px) {
  .application-card {
    flex-direction: column;
    margin-bottom: var(--space-base);
  }

  .application-card-image {
    width: 100%;
    max-width: none;
  }

  .application-card-body {
    padding-left: 0;
    padding-top: 24px;
  }

  /* 實績案例卡片：平板間距縮小（桌機值保留） */
  .case-study-list {
    gap: 80px;
  }

  .case-study-card-body {
    padding-top: 32px;
  }

  .case-study-card-summary {
    margin-top: 32px;
  }
}

@media (max-width: 767.98px) {
  .application-card-title {
    margin-bottom: var(--space-half);
  }
}

/* ==================== 實績案例卡片（上圖下文、滿版） ==================== */
.case-study-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3x);
}

.case-study-card {
  display: block;
  text-decoration: none;
}

.case-study-card-image {
  width: 100%;
  overflow: hidden;
}

.case-study-card-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.case-study-card:hover .case-study-card-image img {
  transform: scale(1.1);
}

.case-study-card-body {
  padding-top: var(--space-base);
}

/* 標題＋日期同一列：黑底白字，模仿 page-header */
.case-study-card-head {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 490px;
  margin-inline: auto;
  background-color: var(--black);
  transition: background-color 0.3s ease;
  padding: 8px 16px;
}

.case-study-card:hover .case-study-card-head {
  background-color: var(--brand-primary);
}

.case-study-card-title {
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--white);
}

.case-study-card-date {
  flex-shrink: 0;
  font-size: var(--fs-base);
  color: var(--white);
}

.case-study-card-summary {
  margin-top: var(--space-base);
  font-size: var(--fs-base);
  color: var(--gray-950);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 實績案例卡片：手機間距再縮 + 標題列改上下堆疊，避免長標題被日期擠壓 */
@media (max-width: 767.98px) {
  .case-study-list {
    gap: 56px;
  }

  .case-study-card-body {
    padding-top: 20px;
  }

  .case-study-card-summary {
    margin-top: 20px;
  }

  .case-study-card-head {
    flex-flow: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

/* 應用分享頁面 - 分頁樣式覆寫 */
.page-number-btn {
  border: none;
  border-radius: 0;
}

.page-number-btn.active {
  border: 1px solid var(--brand-primary);
  border-radius: 0;
  background-color: transparent;
  color: var(--brand-primary);
}

.page-number-btn:hover {
  border: 1px solid var(--brand-primary);
  background-color: transparent;
  color: var(--brand-primary);
}

/* 分頁箭頭樣式 */
.pagination-prev-btn,
.pagination-next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--gray-900);
}

.pagination-prev-btn:hover,
.pagination-next-btn:hover {
  color: var(--brand-primary);
}

.page-number-btn:focus-visible {
  outline: 2px solid var(--brand-blue-500);
}

.pagination-prev-btn:focus-visible,
.pagination-next-btn:focus-visible {
  outline: 2px solid var(--brand-blue-500);
}

/* ==================== 分頁導航覆蓋樣式 ==================== */

/* 隱藏分頁區上方分隔線（覆蓋 global.css 的虛線 border-top）
   分隔線移除後 padding-top 失去意義，上方間距統一用 margin-top 2X */
.pagination-content {
  margin-top: var(--space-2x);
  padding-top: 0;
  border-top: none;
}

@media (max-width: 767.98px) {
  .pagination-content {
    margin-top: var(--space-base);
  }
}

/* ==================== 麵包屑覆蓋樣式 ==================== */

.bread-crumbs {
  font-weight: bold;
  color: var(--gray-950);
  font-size: var(--fs-base);
}

.bread-crumbs a {
  color: var(--gray-950);
}

.bread-crumbs a:hover {
  color: var(--brand-blue-500);
}

/* ==================== 產品列表頁標籤樣式 ==================== */

.product-list-tags {
  margin-top: 5rem;
  margin-bottom: 2rem;
}

@media (max-width: 767.98px) {
  .product-list-tags {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }
}

.tag-group-list {
  gap: 0.75rem;
}

.product-list-tags .tag-group-list a {
  background-color: transparent;
  border: 1px solid var(--gray-400);
  border-radius: 0.25rem 0.25rem 0 0.25rem;
  padding: 6px;
  font-size: var(--fs-xs);
  color: var(--gray-500);
  min-width: 110px;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* hover 時外框和文字變深色，不變底色 */
.product-list-tags .tag-group-list a:hover {
  border-color: var(--gray-950);
  color: var(--gray-950);
}

.product-list-tags .tag-group-list a.active {
  background-color: var(--gray-950);
  border-color: var(--gray-950);
  color: var(--white);
}

/* ==================== 產品卡片：簡約風格覆蓋 ==================== */

.product-card-active {
  padding-top: 10px;
}

/* 產品卡片/列表按鈕：參考標籤樣式 */
.product-card-active .site-btn,
.product-list-active .site-btn {
  background-color: transparent;
  border: 1px solid var(--gray-400);
  border-radius: 0.25rem 0.25rem 0 0.25rem;
  padding: 6px;
  font-size: var(--fs-xs);
  color: var(--gray-500);
  min-width: 110px;
  line-height: normal;
}

.product-card-active .site-btn:hover,
.product-list-active .site-btn:hover {
  border-color: var(--gray-950);
  color: var(--gray-950);
}

/* 產品卡片無邊框（覆蓋核心） */
.product-card {
  border: none;
}

.product-card-image {
  padding: 0;
  overflow: hidden;
}

.product-card-img {
  transition: transform 0.5s ease;
}

.product-card:hover .product-card-img {
  transform: scale(1.1);
}

.product-card-img {
  object-fit: cover;
  border-radius: 0;
}

.product-card {
  border-radius: 0;
}

.product-card-body {
  padding: 16px 10px 0 10px;
  text-align: center;
}

.product-card-subtitle {
  font-size: var(--fs-xs);
  color: var(--gray-950);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 產品列表：標題區改主色白字條，中文靠左、英文靠右 */
.product-list-grid .product-card-body {
  margin-top: var(--space-base);
  margin-inline: 30px;
  padding: 8px 16px;
  background-color: var(--black);
  transition: background-color 0.3s ease;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

.product-list-grid .product-card:hover .product-card-body {
  background-color: var(--brand-primary);
}

.product-list-grid .product-card-title {
  min-width: 0;
  color: var(--white);
}

.product-list-grid .product-card-subtitle {
  flex-shrink: 0;
  color: var(--white);
}

@media (max-width: 767.98px) {
  .product-list-grid .product-card-body {
    flex-flow: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-top: var(--space-half);
  }
}

.product-card-meta {
  display: none;
}

.product-info-title-wrap {
  border-bottom: 0;
  padding-bottom: 0;
}

.product-info-title {
  font-size: var(--fs-2xl);
  color: var(--brand-primary);
}

/* ==================== 產品詳情圖片輪播：上下佈局 ==================== */

/* 套用與手機版相同的佈局（大圖在上、縮圖在下） */
.product-gallery {
  flex-direction: column;
  gap: var(--space-base); /* 大圖與小圖間距，覆蓋 global.css 較小的預設 gap */
}

/* 平板：大圖與縮圖列間距縮一級 */
@media (max-width: 991.98px) {
  .product-gallery {
    gap: 32px;
  }
}

/* 手機：再縮一級 */
@media (max-width: 767.98px) {
  .product-gallery {
    gap: var(--space-half);
  }
}

.product-gallery-main {
  order: 1;
}

.product-gallery-thumbs {
  display: flex;
  order: 2;
  flex-direction: row;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.product-gallery-nav {
  flex-shrink: 0;
}
.product-gallery-nav:hover {
  color: var(--brand-blue);
}
/* 縮圖列在所有斷點皆為水平排列，故取消 global.css 手機版的旋轉 */
.product-gallery-nav-prev .material-symbols-outlined,
.product-gallery-nav-next .material-symbols-outlined {
  transform: none;
}

#product-thumb-swiper {
  flex: 1;
  height: auto !important;
  min-width: 0;
}

/* 縮圖樣式：三等分顯示（覆蓋 global.css 的固定寬度） */
#product-thumb-swiper .swiper-slide {
  width: calc(100% / 3) !important; /* 三等分、無間距 */
  height: auto !important;
  aspect-ratio: 1 / 1;
  position: relative; /* 作為內框偽元素的定位容器 */
  opacity: 1; /* 移除 global.css 的變淡效果，選取區分改用內框 */
  border: none; /* 關閉 global.css 的透明外框，選取標示改用 ::after 內框 */
}

#product-thumb-swiper .swiper-wrapper {
  gap: 0;
}

/* 內框偽元素：疊在圖片上方，四周內縮畫方框 */
#product-thumb-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 10px; /* 距四邊留白，做出圖內縮排 */
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease;
}

/* 縮圖 hover：淡灰內縮框回饋（覆蓋 global.css 的變淡與貼邊灰框） */
#product-thumb-swiper .swiper-slide:hover {
  opacity: 1;
  border-color: transparent;
}

#product-thumb-swiper .swiper-slide:hover::after {
  border-color: var(--gray-400);
}

/* 縮圖選中狀態：圖內縮排的品牌色方框 */
#product-thumb-swiper .swiper-slide-thumb-active {
  border-color: transparent;
}

#product-thumb-swiper .swiper-slide-thumb-active::after {
  border-color: var(--white);
}

#product-main-swiper {
  background-color: var(--white);
  border-radius: 0;
}

/* ==================== 產品詳情 Tab 樣式 ==================== */

/* 修復 DaisyUI tabs-lift grid-span: 9999 造成的寬度溢出問題 */
/* 參考：https://github.com/saadeghi/daisyui/issues/2988 */
.product-description-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px; /* 只要左右間距，垂直不留 */
  margin-top: var(--space-base); /* 與上方產品主內容的間距 */
}

.product-description-tabs .tab {
  order: 0;
}

/* 按鈕列左緣對齊 tab-content 內的 .container 內緣：
   按鈕列掛在 .content-layout 下、未包 .container，故以 margin-left 模擬。
   斷點採 container 編譯值 540/720/960/1140（非 theme 的 576/768/992/1200），
   與 .service-slider-slide 同一套處理方式。
   只推按鈕、不碰 tab-content（內容維持滿寬）。
   右界未約束：按鈕列若寬到超過 container 右緣會溢出，屆時需補 margin-right 對稱處理。 */
.product-description-tabs .tab:first-of-type {
  margin-left: 1rem;
}

@media (min-width: 540px) {
  .product-description-tabs .tab:first-of-type {
    margin-left: calc((100% - 540px) / 2 + 1rem);
  }
}

@media (min-width: 720px) {
  .product-description-tabs .tab:first-of-type {
    margin-left: calc((100% - 720px) / 2 + 1rem);
  }
}

@media (min-width: 960px) {
  .product-description-tabs .tab:first-of-type {
    margin-left: calc((100% - 960px) / 2 + 1rem);
  }
}

@media (min-width: 1140px) {
  .product-description-tabs .tab:first-of-type {
    margin-left: calc((100% - 1140px) / 2 + 1rem);
  }
}

/* ≥1200px：內容層的 xl:-mx-4 抵銷 container 左右 padding，故不再加 1rem */
@media (min-width: 1200px) {
  .product-description-tabs .tab:first-of-type {
    margin-left: calc((100% - 1140px) / 2);
  }
}

/* Tab 標籤基本樣式（未點擊狀態：只有外框線） */
.product-description-tabs .tab {
  background-color: transparent;
  color: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 0; /* 無倒角 */
  padding: 6px 16px;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  height: auto;
  line-height: 1.8;
  min-height: initial;
}

/* 移除 tabs-lift 的指示線效果（只移除 tab-content 的偽元素，保留 tab 按鈕文字） */
.product-description-tabs .tab-content::before {
  display: none !important;
}

/* Tab 標籤選中狀態 */
.product-description-tabs .tab:checked,
.product-description-tabs .tab[aria-selected="true"],
.product-description-tabs .tab:is(:checked),
.product-description-tabs .tab:is([aria-selected="true"]) {
  background-color: var(--brand-primary);
  color: var(--white);
  border: 1px solid var(--brand-primary) !important; /* 保持邊框寬度一致，避免高度變化 */
  border-radius: 0;
}

/* Tab 內容區：修復寬度溢出 */
.product-description-tabs .tab-content {
  order: 1;
  width: 100%;
  border: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  margin-top: var(--space-2x); /* 與上方 tab 列的間距 */
}

/* 平板：tab 列與內容區上方間距各縮一級 */
@media (max-width: 991.98px) {
  .product-description-tabs {
    margin-top: 32px;
  }

  .product-description-tabs .tab-content {
    margin-top: var(--space-base);
  }
}

/* 手機：再縮一級 */
@media (max-width: 767.98px) {
  .product-description-tabs {
    margin-top: var(--space-half);
  }

  .product-description-tabs .tab-content {
    margin-top: 32px;
  }
}

/* ==================== 搜尋結果頁面樣式覆蓋 ==================== */

.search-keyword {
  color: var(--brand-blue-500);
}

.search-count {
  color: var(--brand-blue-500);
}

.search-category-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--gray-950);
  margin-bottom: 16px;
}

.search-result-section {
  margin-bottom: 60px;
}

.search-result-section:last-child {
  margin-bottom: 0;
}

/* ==================== 產品分類導航列表 ==================== */

.product-category-nav {
  display: flex;
  width: fit-content;
  margin-top: 3.5rem;
  margin-inline: auto;
  padding: 1rem;
  font-weight: var(--fw-semibold);
  border: 1px solid var(--gray-600);
}

.product-category-nav a {
  display: block;
}

.product-category-nav a:hover {
  color: var(--gray-950);
}

.product-category-nav li[aria-hidden="true"] {
  font-weight: var(--fw-thin);
  color: var(--gray-950);
}

.product-category-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  font-size: 1rem;
  color: var(--gray-950);
}

/* ==================== 手機版主選單白底覆蓋 ==================== */

/* 面板容器白底（覆蓋 navigation.css 的漸層） */
.mobile-menu-panels {
  background: var(--white);
}

.mobile-panel {
  background: var(--white);
}

.mobile-panel-title {
  color: var(--gray-950);
}

.mobile-back-btn {
  color: var(--gray-950);
}

/* 關閉按鈕改灰色系（覆蓋 navigation.css 預設色） */
.mobile-close-btn {
  background-color: var(--gray-200);
  color: var(--gray-950);
}

.mobile-nav-link {
  color: var(--gray-950);
}

.mobile-nav-link:hover {
  color: var(--gray-950);
  background-color: var(--gray-100);
}

.mobile-nav-link.active {
  color: var(--gray-950);
  background-color: var(--gray-100);
}

.mobile-nav-item:hover {
  background-color: var(--gray-100);
}

.mobile-nav-arrow {
  color: var(--gray-600);
}

.mobile-social a {
  color: var(--gray-700);
}

.mobile-social a:hover {
  color: var(--gray-950);
}

.mobile-footer-btn {
  color: var(--gray-950);
}

.mobile-footer-divider {
  background-color: var(--gray-300);
}

/* ==================== 頁面介紹區塊文字控制 ==================== */
/* 修飾 class：.page-intro-detail 使簡述、內容、說明降為 --fs-sm */

.page-intro.page-intro-detail .page-intro-summary,
.page-intro.page-intro-detail .page-intro-passage,
.page-intro.page-intro-detail .page-intro-description {
  font-size: var(--fs-sm);
}

/* 產品詳情頁：介紹區塊無底部虛線與內距 */
.product-introduce .page-intro-wrapper {
  border-bottom: 0;
  padding-bottom: 0;
  line-height: 2;
}

/* 產品詳情頁：隱藏大圖輪播箭頭 */
.product-main-nav {
  display: none;
}

/* ==================== 文章卡片網格容器 ==================== */

.article-card-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 56px;
  column-gap: 1rem;
}

@media (min-width: 992px) {
  .article-card-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .article-card-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 產品列表：一排 2 個，手機（<768px）改單欄；左右間距 1X、上下間距 2X */
.article-card-wrapper.product-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-base);
  row-gap: var(--space-2x);
}

@media (max-width: 767.98px) {
  .article-card-wrapper.product-list-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-base);
  }
}

@media (min-width: 992px) {
  .article-card-wrapper.product-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .article-card-wrapper.product-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==================== 常見問題 FAQ 列表 ==================== */

.faq-item {
  margin-bottom: var(--space-2x);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-question {
  display: flex;
  align-items: baseline;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
  margin-bottom: var(--space-base);
}

.faq-no {
  flex-shrink: 0;
}

.faq-question-text {
  flex: 1;
}

.faq-answer {
  display: flex;
  align-items: baseline;
  font-size: var(--fs-base);
  color: var(--gray-950);
  line-height: 1.8;
}

.faq-label {
  flex-shrink: 0;
}

.faq-answer-text {
  flex: 1;
}

.faq-sep {
  flex-shrink: 0;
  margin: 0 6px;
  font-weight: var(--fw-thin);
}

.faq-question .faq-sep {
  color: var(--brand-primary);
}

.faq-answer .faq-sep {
  color: var(--gray-200);
}

/* 平板：項目間距與 Q/A 間距各縮一級 */
@media (max-width: 991.98px) {
  .faq-item {
    margin-bottom: var(--space-base);
  }

  .faq-question {
    margin-bottom: 32px;
  }
}

/* 手機：再縮一級 */
@media (max-width: 767.98px) {
  .faq-item {
    margin-bottom: 32px;
  }

  .faq-question {
    margin-bottom: var(--space-half);
  }
}

/* ==================== 浮動選單（桌機版改從底部定位） ==================== */

/* 桌機版：關閉頂部置中，改從底部算起 */
@media (min-width: 768px) {
  .float-menu-container {
    top: auto;
    bottom: 30px;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
  }
}

/* ==================== 全頁字重（蓬房介紹頁） ==================== */

/* 主內容區全部文字統一 600。範圍限 #main-content，選單與頁尾維持各自字重。
   特異性 (1,1,1) 高於各元件的單一 class 規則，故一條即可蓋掉頁內既有字重，
   不需逐條覆寫。HTML 上 Tailwind 的 font-semibold 同為 600，兩者一致不衝突。 */
body.page-tent-intro #main-content,
body.page-tent-intro #main-content * {
  font-weight: var(--fw-semibold);
}

/* ==================== 橫向溢出處理（蓬房介紹頁） ==================== */

/* 擋橫捲：桌機 [data-section] 為 width:100vw，結構圖另有 translateX(100%)。
   用 clip 而非核心 global.css 的 overflow-x: hidden——hidden 會隱含使 overflow-y
   變 auto、讓 html/body 成為捲動容器，clip 不建立捲動容器。僅限本頁，不動核心檔 */
html:has(body.page-tent-intro),
body.page-tent-intro {
  overflow-x: clip;
}

/* 頁面底色須與各 [data-section] 同為黑：視差式離場頁縮小後四周露出的就是 body，
   預設白底在全黑版面上會穿幫。
   不併入上方規則：那條為 html 與 body 共用，語意不同 */
body.page-tent-intro {
  background-color: var(--black);
}

/* ===== 平板與手機（≤1199.98px）：一般的由上往下捲動 =====
   整頁式簡報只在 ≥1200px 啟用。
   區塊的 relative 定位改由 HTML 的 lt-xl:relative 提供（見 tent_intro.html 帆布倉庫段註解） */
@media (max-width: 1199.98px) {
  /* 此斷點不需要 .content-layout 的上外距（custom.css 上方設為 --space-4x），
     否則橫幅上方會多出一段留白。加頁面前綴避免影響其他頁 */
  body.page-tent-intro .content-layout {
    margin-top: 0;
  }
}

/* ==================== 整頁式簡報（蓬房介紹頁，僅 ≥1200px） ==================== */

/* 桌機一屏一頁、滾輪換頁；≤1199.98px 為原生捲動。
   斷點用 min-width 不用 (hover: hover)——iPad 配妙控鍵盤會判 true，
   且須與 tent_intro.html 的 FULLPAGE_MQ 一致。
   各頁一律 fixed：分屬 <main> 與 footer 兩處，以視窗為基準才不必動 DOM 層級 */
@media (min-width: 1200px) {
  /* 整條覆寫上方的 overflow-x: clip——clip 與 hidden 混用時 Safari 與 Chrome
     行為不一致，不可只疊加 overflow-y */
  html:has(body.page-tent-intro),
  body.page-tent-intro {
    overflow: hidden;
    height: 100%;
  }

  /* 位移／透明度／過渡由 JS 從橫幅複製（見 tent_intro.html 的 syncNavToHero），
     故此處不設 transition，寫了會打架。選單推出視窗後仍在文件中，需擋滑鼠。
     用 pointer-events 而非 display: none——navigation.js 的 ResizeObserver
     會把選單高度寫入 --nav-height。 */
  body.page-tent-intro .main-navigation.is-page-hidden {
    pointer-events: none;
  }

  body.page-tent-intro .content-layout,
  body.page-tent-intro .editor-content {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* 各頁一律 fixed。本條命中全部 [data-section]，含不在 .editor-content 下的
     footer 那頁（見 <main> 之後的外層包裝）。
     body 前綴不可省：[data-section] 僅 0,1,0，與結構圖 HTML 上 Tailwind 的
     .overflow-hidden 同權重，而 tailwind.css 載入在後（見 head.html）會勝出，
     使下方的 overflow-y: auto 失效、外層捲動連同 JS 的 scrollTop 判斷一起壞掉 */
  body.page-tent-intro [data-section] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--black);
    /* 換頁動畫：JS 只改值，過場交給這條。時長須與 JS 的 slideDuration 同步。
       進出場共用，離場頁走 30%、進場頁走 100%，速度差即景深感來源。
       opacity 延後 0.3s：同步淡出會使離場頁走不到一半就看不見，視差白做。
       0.7s + 0.3s = 1s，與位移同時結束。 */
    transition:
      transform 1s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.7s linear 0.3s;
    /* 預先建層，避免十餘個滿版 fixed 層（含 <video> 與大圖）在換頁瞬間即時建層而卡第一幀。
       用 will-change 而非 translateZ(0)——後者會被 JS 寫的 inline transform 覆蓋。
       backface-visibility 為防禦性：多層合成下部分 Safari 版本會閃爍 */
    will-change: transform, opacity;
    backface-visibility: hidden;
    z-index: auto; /* 層級由 JS 寫 inline */
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* 換頁由 JS 接管，須停用原生手勢。用 CSS 而非只靠 preventDefault：Chrome 56 起
       window／document／body 的 touchmove 強制 passive；iOS Safari 另有 WebKit Bug 163207。
       內層仍需捲動者另行放行（見 tent_intro.html 頁內 <style> 的 .structural-scroll-inner）。 */
    touch-action: none;
  }
  [data-section]::-webkit-scrollbar {
    display: none;
  }

  /* 非當前頁擋滑鼠：十餘頁全為 fixed 疊在同一位置，不擋會點到看不見的頁。
     離場頁不擋——它只走 30%、整段留在畫面內，擋掉會使點連結沒反應。
     兩個 class 互斥，由 tent_intro.html 的 goToSection 與結尾校正 timer 維護。 */
  [data-section]:not(.active):not(.is-page-leaving) {
    pointer-events: none;
  }

  /* footer 頁內容貼齊底部：footer 高度固定而本頁為 100vh，留白該在上方。
     不套用其餘區塊的內層置中規則——footer 第一個子元素是浮動按鈕 <aside> 而非
     內容主體，故改以 :has(> .footer-section) 指向外層並用 flex-end。
     （浮動按鈕會被 JS 搬到 body 底下，此選擇器不受影響。） */
  [data-section]:has(> .footer-section) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

/* ==================== 區塊導航軸線（蓬房介紹頁整頁式） ==================== */

/* 右側細軸線，一條短線對應一個 [data-section]，目前所在頁的線段變長變品牌色。
   純狀態驅動、不讀捲動位置：由 goToSection() 更新 currentIndex 後呼叫 updateDots()。
   整頁式下 transform 不改變文件流位置，AOS／IntersectionObserver 皆會失效。 */

/* 未初始化時隱藏：線段由 JS 產生，區塊數不足兩頁時不建立，
   故由 JS 在建立成功後加上 .is-ready */
.scroll-indicator-axis:not(.is-ready) {
  display: none;
}

.scroll-indicator-axis {
  position: fixed;
  /* 與浮動按鈕（core/global.css）對齊同一條垂直線：
     按鈕 right:15px、寬 44px → 中心距右 37px；本元件寬 16px，故 37 − 8 = 29px */
  right: 29px;
  /* 避開浮動按鈕，故不垂直置中。
     294 = 30 + 4×44 + 3×16 + 40（按鈕數量或尺寸變動需重算） */
  bottom: 294px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

.scroll-indicator-axis:hover {
  opacity: 1;
}

/* 上下箭頭：純 CSS V 形（只畫兩條 border 再旋轉），不用 icon font */
.axis-arrow {
  /* button 預設樣式重設。border 需先歸零再宣告 V 形的兩條邊，
     順序顛倒會使 border:0 把 V 形清掉 */
  background: none;
  padding: 0;
  font: inherit;
  border: 0;
  /* 中灰而非白：背景不是恆黑（footer 頁 #f3f3f3、hero 頁影片、結構圖為照片），
     白色遇淺底會隱形。不自動判色：整頁式下 [data-section] 底色一律被寫成
     var(--black)，淺灰在子層，getComputedStyle 讀不到 */
  border-top: 2px solid #8c8c8c;
  border-right: 2px solid #8c8c8c;
  width: 12px;
  height: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.axis-arrow:hover {
  border-color: var(--brand-primary);
  transform: scale(1.2);
}

.axis-arrow.up {
  transform: rotate(-45deg);
  margin-bottom: 10px;
}

.axis-arrow.up:hover {
  transform: rotate(-45deg) scale(1.2);
}

.axis-arrow.down {
  transform: rotate(135deg);
  margin-top: 10px;
}

.axis-arrow.down:hover {
  transform: rotate(135deg) scale(1.2);
}

.dots-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.section-dot {
  /* 三態配色（背景不恆黑，改中灰的理由見 .axis-arrow）：
       未選 #969696 → hover #787878 → active 品牌色 + 長線段。
     未選較箭頭再淡一階，維持「箭頭實、線段虛」的主從關係。
     淺底對比度下限 2.4，再淺一階即低於此值 */
  background: #969696;
  padding: 0;
  border: 0;
  font: inherit;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-dot:hover {
  background: #787878;
  transform: scale(1.5);
}

/* 目前所在區塊：長線段本身已是最醒目狀態，hover 時不再額外放大，
   避免疊加 .section-dot:hover 的 scale(1.5) 把線段拉伸變形 */
.section-dot.active,
.section-dot.active:hover {
  width: 2px;
  height: 68px;
  background: var(--brand-primary);
  box-shadow: 0 0 8px rgba(49, 138, 140, 0.9);
  border-radius: 1px;
  transform: none;
}

@media (max-width: 767.98px) {
  .scroll-indicator-axis {
    display: none;
  }
}