@charset "utf-8";
/* CSS Document */

:root {
  /*------------  Primitive  values -----------*/
  /* Brand colors */
  --color-brand-blue-100: #ebf4fb;
  --color-brand-blue-200: #daebf8;
  --color-brand-blue-400: #b5d7f2;
  --color-brand-blue-500: #298ee0;
  --color-brand-blue-600: #336899;/* CI 輔助藍 */
  --color-brand-blue-800: #01284d;
  --color-brand-blue-900: #004280;/* CI 研華藍 */
  --color-white: #ffffff;
  --color-black: #000000;
  /* Neutral / Grey */
  --color-grey-100: #f2f2f2;
  --color-grey-200: #e0e0e0;
  --color-grey-300: #d1d1d1;
  --color-grey-400: #b5b5b5;
  --color-grey-500: #999999;
  --color-grey-600: #7f7f7f;
  --color-grey-700: #666666;
  --color-grey-800: #4d4d4d;
  --color-grey-900: #333333;
  /* state */
  --color-success: #33805c;
  --color-warning: #f2ce61;
  --color-error: #bf4c58;
  /* glow */
  --color-brand-blue-glow: #c0dafb;
  /* Gradient primitives */
  --color-brand-gradient: linear-gradient(90deg, #004280 0%, #298ee0 80%);
  --color-brand-gradient-inverse: linear-gradient(270deg, #004280 0%, #298ee0 80%);

  /* Secondary 專用設定 */
  --btn-secondary-border-width: 2px;
  /* radius scale */
  --radius-element: 5px;
  --radius-component: 15px;
  --radius-surface: 30px;
  --radius-pill: 999px;
  /* font size */
  --font-size-h1: 60px;
  --font-size-h2: 44px;
  --font-size-h3: 22px;
  --font-size-h4: 18px;
  /* Typography scale */
  --font-size-base: 16px;
  --line-height-base: 1.5;
  --line-height-tight: 1;
  /* Font weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /* Space — primitive scale（4px base，元件 CSS 禁止直接引用，只能透過下面的角色層 / alias 層） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  /*------------ semantic usage -------------*/
  /* color */
  --bg-brand-primary: var(--color-brand-blue-900);
  --bg-brand-secondary: var(--color-brand-blue-600);
  --bg-brand-light: var(--color-brand-blue-200);
  --bg-brand-mid: var(--color-brand-blue-400);
  --bg-brand-deep: var(--color-brand-blue-800);
  --bg-surface: var(--color-white);
  --bg-surface-soft: var(--color-grey-100);
  /* Gradient */
  --bg-brand-glow: var(--color-brand-blue-glow);
  /* Text colors */
  --color-text-default: var(--color-black);
  --color-text-inverse: var(--color-white);
  --color-text-muted: var(--color-grey-700);
  --color-text-disabled: var(--color-grey-400);
  --color-text-primary: var(--color-brand-blue-900);
  --color-text-success: var(--color-success);
  --color-text-warning: var(--color-warning);
  --color-text-error: var(--color-error);
  /* Border */
  --color-border: var(--color-grey-300);

  /* Space — 角色層（INSET/STACK/INLINE，元件只准用這層或下面的第三層 alias） */
  --space-inset-2xs: var(--space-1);
  /* 4px：極小徽章 padding（原 calc(xxs/2) half-step） */
  --space-inset-xs: var(--space-3);
  /* 8px：tag / badge / pill */
  --space-inset-sm: var(--space-4);
  /* 16px：compact 密度（btn、tab、compact 卡） */
  --space-inset-md: var(--space-5);
  /* 20px：標準密度（card content、bento body） */
  --space-inset-lg: var(--space-8);
  /* 32px：面板（bg-* surface、split bg） */
  --space-inset-xl: var(--space-12);
  /* 48px：大容器內距 */

  --space-stack-2xs: var(--space-1);
  /* 4px：極貼近 */
  --space-stack-xs: var(--space-2);
  /* 8px：title↔meta、card content gap */
  --space-stack-sm: var(--space-3);
  /* 12px：元件內元素 */
  --space-stack-md: var(--space-5);
  /* 20px：內容區塊間 */
  --space-stack-lg: var(--space-8);
  /* 32px：群組間 */

  --space-inline-xs: var(--space-1);
  /* 4px：icon↔文字 */
  --space-inline-sm: var(--space-2);
  /* 8px：btn-group、tags、meta */
  --space-inline-md: var(--space-3);
  /* 12px：較鬆的一排 */
  --space-inline-lg: var(--space-5);
  /* 20px：兩欄式內容列（ui-inline 等），套用時發現原本大量橫向 gap 落在 20px，原規劃 INLINE 只到 12px 沒有對應階，補這階避免借用 STACK 語意 */
  --space-inline-xl: var(--space-8);
  /* 32px：list 圖文列（icon/圖片 ↔ 內容欄）的橫向 gap */

  /* Space — 頁面骨架（用途命名，不開放選階） */
  --space-gutter: var(--space-12);
  /* 48px：container-full 邊界 */
  --space-grid: var(--space-8);
  /* 32px：卡片網格溝縫 */
  --space-row: var(--space-12);
  /* 48px：row 縱向主間距 */
  --space-section: var(--space-24);
  /* 96px：section 大區塊 */

  /* Space — 第三層 alias（單一元件專屬，數值跟共用角色階不同才建） */
  --bleed-sm: var(--space-5);
  /* 20px */
  --bleed-md: var(--space-15);
  /* 60px */
  --bleed-lg: calc(var(--space-15) * 2);
  /* 120px */
  --bleed-xl: calc(var(--space-15) * 4);
  /* 240px */
  --bleed-xxl: calc(var(--space-15) * 6);
  /* 360px */
  --bleed-scope-offset: var(--space-18);
  /* 72px：ui-bleed-scope-* 用 */
  --modal-inset-y: var(--space-15);
  /* 60px：modal overlay 上下 padding */
  --kv-banner-inset-top: var(--space-15);
  /* 60px：kv-banner content/functional 上側 padding */
  --kv-banner-inset-bottom: var(--space-18);
  /* 72px */
  --kv-banner-inset-bottom-compact: var(--space-15);
  /* 60px：kv-banner media 768bp 專用 */
  --home-hero-inset-bottom: var(--space-24);
  /* 96px */
  --tabs-layout-gap: var(--space-15);
  /* 60px：.ui-tabs-layout__A/B 橫向 gap */
  /* Scroll Reveal Motion */
  --ui-reveal-duration: 1.2s;
  --ui-reveal-distance: 50px;
  --ui-reveal-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* z-index scale — no magic numbers allowed */
  --z-index-base: 1;
  --z-index-sticky-header: 100;
  --z-index-carousel: 200;
  --z-index-navbar: 1000;
  --z-index-modal: 1050;
  --z-index-overlay: 2000;
  --z-index-fixed: 10001;

  /* KV Banner decorative images */
  --kv-img-square:   url("css-img/kv-square.png");
  --kv-img-square-2: url("css-img/kv-square-2.png");
  --kv-img-square-3: url("css-img/kv-square-3.png");
  --kv-img-square-5: url("css-img/kv-square-5.png");
  --kv-img-mask:     url("css-img/kv-mask.svg");
}

/* ======= 微動畫通用 class ======= */
/* 基本狀態 */
.ui-reveal {
  opacity: 0;
  transition:
    opacity var(--ui-reveal-duration) var(--ui-reveal-easing),
    transform var(--ui-reveal-duration) var(--ui-reveal-easing);
  will-change: opacity, transform;
}

/* 方向 */
.ui-reveal--left {
  transform: translateX(calc(-1 * var(--ui-reveal-distance)));
}

.ui-reveal--right {
  transform: translateX(var(--ui-reveal-distance));
}

.ui-reveal--top {
  transform: translateY(calc(-1 * var(--ui-reveal-distance)));
}

.ui-reveal--bottom {
  transform: translateY(var(--ui-reveal-distance));
}

/* 觸發後 */
.ui-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}


@media (max-width: 1200px) {
  :root {
    --font-size-h1: 44px;
    --font-size-h2: 36px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 26px;
  }
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  max-width: 960px;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  max-width: 960px;
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

p, span {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

a,
a:hover,
a:active,
a:focus {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

h3 a, h3 a:hover{
  font-size: var(--font-size-h3);
}
h4 a, h4 a:hover{
  font-size: var(--font-size-h4);
}
.bg-brand-primary, .bg-brand-secondary, 
.bg-brand-light, .bg-brand-mid, .bg-brand-deep, 
.bg-surface, .bg-surface-soft {
  border-radius: var(--radius-component);
  padding: var(--space-inset-lg);
}
.bg-brand-primary {
  background-color: var(--bg-brand-primary) !important;
}

.bg-brand-secondary {
  background-color: var(--bg-brand-secondary) !important;
}

.bg-brand-light {
  background-color: var(--bg-brand-light) !important;
}

.bg-brand-mid {
  background-color: var(--bg-brand-mid) !important;
}

.bg-brand-deep {
  background-color: var(--bg-brand-deep) !important;
}

.bg-surface {
  background-color: var(--bg-surface) !important;
}

.bg-surface-soft {
  background-color: var(--bg-surface-soft) !important;
}

@media (max-width: 1024px) {
.bg-brand-primary, .bg-brand-secondary, 
.bg-brand-light, .bg-brand-mid, .bg-brand-deep, 
.bg-surface, .bg-surface-soft {
  padding: var(--space-inset-md);
}
}

/* 滿版品牌漸層背景（CTA banner 用） */
.bg-brand-gradient {
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--color-brand-gradient) border-box;
  background-color: var(--bg-brand-deep); /* 漸層載入前 fallback */
  color: var(--color-white);
}

/* 深色底反白：bg-brand-gradient／primary／secondary／deep 底色夠深，
   heading、眉標預設的深色文字對比不足，需要反白。
   （bg-brand-light、bg-brand-mid 本身是淺色調，維持預設文字色即可） */
.bg-brand-gradient .ui-section-title__heading,
.bg-brand-gradient .ui-section-title__eyebrow,
.bg-brand-gradient p,
.bg-brand-primary .ui-section-title__heading,
.bg-brand-primary .ui-section-title__eyebrow,
.bg-brand-secondary .ui-section-title__heading,
.bg-brand-secondary .ui-section-title__eyebrow,
.bg-brand-deep .ui-section-title__heading,
.bg-brand-deep .ui-section-title__eyebrow {
  color: var(--color-text-inverse);
}

/* __highlight 預設用品牌漸層字色（偏深藍），疊在上述深色底上對比同樣不足，
   蓋掉漸層改用純反白 */
.bg-brand-gradient .ui-section-title__highlight,
.bg-brand-primary .ui-section-title__highlight,
.bg-brand-secondary .ui-section-title__highlight,
.bg-brand-deep .ui-section-title__highlight {
  background-image: none;
  color: var(--color-text-inverse);
  -webkit-text-fill-color: var(--color-text-inverse);
}



/* secondary hover 預設轉實心品牌漸層，與漸層背景相同會消失，改為維持白底、文字加深 */
.bg-brand-gradient .ui-btn--secondary:hover,
.bg-brand-gradient .ui-btn--secondary:focus-visible {
  color: var(--color-text-primary);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--color-brand-gradient) border-box;
}



/* 疊加任一背景色（bg-*）時才給內距與圓角 */
.container-limited[class*="bg-"] {
  padding: var(--space-inset-xl);
  border-radius: var(--radius-component);
}

.bg-brand-glow-tl {
  background-image: linear-gradient(135deg, var(--bg-brand-glow), transparent 30%);
}
.bg-brand-glow-tl--md {
  background-image: linear-gradient(135deg, var(--bg-brand-glow), transparent 50%);
}
.bg-brand-glow-tl--lg {
  background-image: linear-gradient(135deg, var(--bg-brand-glow), transparent 80%);
}
.bg-brand-glow-tr {
  background-image: linear-gradient(225deg, var(--bg-brand-glow), transparent 30%);
}
.bg-brand-glow-tr--md {
  background-image: linear-gradient(225deg, var(--bg-brand-glow), transparent 50%);
}
.bg-brand-glow-tr--lg {
  background-image: linear-gradient(225deg, var(--bg-brand-glow), transparent 80%);
}
.bg-brand-glow-bl {
  background-image: linear-gradient(45deg, var(--bg-brand-glow), transparent 30%);
}
.bg-brand-glow-bl {
  background-image: linear-gradient(45deg, var(--bg-brand-glow), transparent 30%);
}
.bg-brand-glow-bl--md {
  background-image: linear-gradient(45deg, var(--bg-brand-glow), transparent 50%);
}
.bg-brand-glow-bl--lg {
  background-image: linear-gradient(45deg, var(--bg-brand-glow), transparent 80%);
}
.bg-brand-glow-br {
  background-image: linear-gradient(350deg, var(--bg-brand-glow), transparent 30%);
}
.bg-brand-glow-br--md {
  background-image: linear-gradient(350deg, var(--bg-brand-glow), transparent 50%);
}
.bg-brand-glow-br--lg {
  background-image: linear-gradient(350deg, var(--bg-brand-glow), transparent 80%);
}

/* 區塊上的裝置漸層光條 */
.ui-accent-bar--top {
    border-top: 4px solid;
    border-image: var(--color-brand-gradient) 1;
}
.ui-accent-bar--bottom {
    border-bottom: 4px solid;
    border-image: var(--color-brand-gradient) 1;
}

/* 漸層流動光條：深藍 → 淺藍 循環流動（參考 resources 頁 .filter-inner-line）
   用 ::after 疊在區塊頂／底，加單一 class 即可，不需改動 HTML markup。 */
.ui-gradient-stream--top,
.ui-gradient-stream--bottom {
    position: relative;
}
.ui-gradient-stream--top::after,
.ui-gradient-stream--bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    /* 一個 tile 為 深→淺→深 對稱漸層，首尾同色；
       tile 寬 = background-size 寬 = 200%，位移剛好一個 tile 才能無縫循環 */
    background-image: linear-gradient(
        to right,
        var(--color-brand-blue-900) 0%,
        var(--color-brand-blue-600) 17%,
        var(--color-brand-blue-500) 33%,
        #6ebeff 50%,
        var(--color-brand-blue-500) 67%,
        var(--color-brand-blue-600) 83%,
        var(--color-brand-blue-900) 100%
    );
    background-size: 200% 100%;
    background-repeat: repeat;
    animation: ui-gradient-stream-flow 3s linear infinite;
    pointer-events: none;
}
.ui-gradient-stream--top::after    { top: 0; }
.ui-gradient-stream--bottom::after { bottom: 0; }
@keyframes ui-gradient-stream-flow {
    from { background-position: 0 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-gradient-stream--top::after,
    .ui-gradient-stream--bottom::after { animation: none; }
}

.item__image {
  width: 100%;
}

.item__image img {
  width: 100%;
  border-radius: var(--radius-component);
  object-fit: cover;
  display: block;
}

/* 父層容器統一控制子項目間距（flex column + gap，取代舊版 margin-top lobotomized owl） */
.ui-flow-xs,
.ui-flow-sm,
.ui-flow-md,
.ui-flow-lg {
  display: flex;
  flex-direction: column;
}

.ui-flow-xs {
  gap: var(--space-stack-xs);
}

.ui-flow-sm {
  gap: var(--space-stack-sm);
}

.ui-flow-md {
  gap: var(--space-stack-md);
}

.ui-flow-lg {
  gap: var(--space-stack-lg);
}

/* ========== 內容列排版（ui-inline） ========== */
/* 通用左右兩欄內容列，bento / card / list 等元件共用：
   子 div 標 ui-inline__item（語意標記），第一個 div 靠左、第二個 div 靠右 */
.ui-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-inline-lg);
  flex-wrap: wrap;
}

/* 垂直對齊 modifier */
.ui-inline--top {
  align-items: flex-start;
}

.ui-inline--bottom {
  align-items: flex-end;
}

/* icon 及 meta 區塊內靠右對齊 */
.item__icon.item__icon--right, .item__meta.item__meta--right {
  float:right;
}

.item__icon__text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-inline-xs);
    white-space: nowrap;
}

.item__icon__text i, .ui-chat__file i {
    background-image: var(--color-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.item__icon i {
    color: transparent;
    background-image: var(--color-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ========== Button Base ========== */
.ui-btn {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: var(--space-inset-xs) var(--space-inset-lg);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: var(--btn-border-width, 2px) solid transparent;
  background: none;
  transition: color 0.3s ease, background 0.4s ease, box-shadow 0.3s ease;
}

.ui-btn i{
  margin-right: 5px;
}

.ui-btn-group,
.ui-btn-fill,
.ui-btn-stack {
  display: flex;
  gap: var(--space-inline-sm);
  align-items: center;
  flex-wrap: wrap;
}

.ui-btn-stack {
  flex-direction: column;
}

.ui-btn-fill .ui-btn {
  flex: 1 1 0;
}

.ui-btn-stack .ui-btn {
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   Primary Button
   ========================================================= */

.ui-btn--primary, a.ui-btn--primary {
  color: var(--color-text-inverse);
  background: var(--bg-brand-secondary);
  text-decoration: none;
}

.ui-btn--primary:hover,
.ui-btn--primary:focus-visible {
  color: var(--color-text-inverse);
  background: var(--bg-brand-primary);
  text-decoration: none;
}


/* =========================================================
   Secondary Button
   ========================================================= */

.ui-btn--secondary {
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  background: var(--bg-surface);
}

.ui-btn--secondary:hover,
.ui-btn--secondary:focus-visible {
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary);
  background: var(--bg-brand-primary);
  text-decoration: none;
}


/* =========================================================
   Inverse Button
   Use when the button needs to switch to a light/white
   appearance regardless of its parent context.
   ========================================================= */

/* Primary - Inverse
   Home Hero 的深色 Slide（.ui-home-hero__slide--dark）不需要手動加
   ui-btn--inverse：按鈕外觀改由父層主題 class 自動決定，跟底色／文字色／
   漸層遮罩一樣「單一 class 控制全部」，避免忘記手動加致按鈕在深色底上
   對比不足。顏色數值沿用同一組規則，不另外複製一份。 */
.ui-btn--primary.ui-btn--inverse,
.ui-home-hero__slide--dark .ui-home-hero__actions .ui-btn--primary {
  color: var(--color-text-primary);
  background: var(--bg-surface);
}

.ui-btn--primary.ui-btn--inverse:hover,
.ui-btn--primary.ui-btn--inverse:focus-visible,
.ui-home-hero__slide--dark .ui-home-hero__actions .ui-btn--primary:hover,
.ui-home-hero__slide--dark .ui-home-hero__actions .ui-btn--primary:focus-visible {
  color: var(--color-text-inverse);
  background: var(--bg-brand-primary);
  text-decoration: none;
}


/* Secondary - Inverse（同上，Home Hero 深色 Slide 自動套用） */
.ui-btn--secondary.ui-btn--inverse,
.ui-home-hero__slide--dark .ui-home-hero__actions .ui-btn--secondary {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  background: transparent;
}

.ui-btn--secondary.ui-btn--inverse:hover,
.ui-btn--secondary.ui-btn--inverse:focus-visible,
.ui-home-hero__slide--dark .ui-home-hero__actions .ui-btn--secondary:hover,
.ui-home-hero__slide--dark .ui-home-hero__actions .ui-btn--secondary:focus-visible {
  color: var(--color-text-primary);
  border-color: var(--bg-surface);
  background: var(--bg-surface);
  text-decoration: none;
}

.ui-textlink {
  color: var(--color-text-primary);
  padding: 0;
  display: flex;
  align-items: center;
}

.ui-textlink:hover {
  text-decoration: none;
}

.ui-textlink i{
  font-size: 18px;
  font-weight: bold;
  margin:0 var(--space-inline-sm);
  display: inline-block;
  color: transparent;
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

/* -------------------------
   Image mask fade utilities
----------------------------*/

/* 下方淡出 */
.ui-mask-fade-bottom img {
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* 上方淡出 */
.ui-mask-fade-top img {
  -webkit-mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* 左方淡出 */
.ui-mask-fade-left img {
  -webkit-mask-image: linear-gradient(to left,
      rgba(0, 0, 0, 1) 10%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0) 80%);
  mask-image: linear-gradient(to left,
      rgba(0, 0, 0, 1) 10%, 
      rgba(0, 0, 0, 0.3) 50%, 
      rgba(0, 0, 0, 0) 80%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/*-------------------------
ui-card
--------------------------*/
.ui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-component);
  padding: 0;
  background: var(--bg-surface-soft);
  transition: all 0.3s linear;
  min-height: 120px;
}

.ui-card:hover {
  transform: translateY(-3px);
}

.bg-brand-light .ui-card,
.bg-surface-soft .ui-card {
  background: var(--bg-surface);
}

/* 整張卡片可點擊區域 */
.ui-card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index-base);
  width: 100%;
  height: 100%;
  display: block;
}

/* 內容區塊要在 link 上層 */
.ui-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  padding: var(--space-inset-md);
  border-radius: var(--radius-component);
  height: 100%;
}

.ui-card__content .item__title i{
    font-size: 18px;
    font-weight: bold;
    margin: 0 var(--space-inline-sm);
    display: inline-block;
    color: transparent;
    background-image: var(--color-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}
.ui-card__content .item__meta {
  margin-top: auto;
}

.ui-card__actions {
  position: relative;
  display: flex;
  gap: var(--space-inline-sm);
  z-index: calc(var(--z-index-base) + 1);
  margin-top: auto;
  /* 確保按鈕可點擊 */
}

.ui-card__actions>.ui-btn {
  flex: 0 0 auto;
}

/* 只要不是唯一一顆（代表有兩顆以上）→ 平分 */
.ui-card__actions>.ui-btn:not(:only-child) {
  flex: 1 1 0;
}

.ui-card__media {
  position: relative;
}

.ui-card__media img {
  border-radius: var(--radius-component) var(--radius-component) 0 0;
}
.ui-card__media .item__icon{
  margin-bottom: var(--space-stack-xs);
}

.ui-card__media .item__icon img {
    display: block;
    max-width: 50px;
}

.ui-card__media .item__icon i{
    font-size: 40px;
    padding: 0 2px;
}

.ui-card--no-media::before {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  min-height: 50px;
  background-image:url("css-img/card-no-media-bg.png"), linear-gradient(135deg, #b5d7f2 0%, #93c7f2 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center right;
  background-size: contain, cover;
  border-radius: var(--radius-component) var(--radius-component) 0 0;
}

/*--------------------------
  元件共用 info 
----------------------------*/
.item__title{
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item__text {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item__meta {
  font-size: var(--font-size-base);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}
.item__meta .item__type::before {
  content: "|";
  color: var(--color-grey-800);
  margin: 0 10px 0 0;
}
.item__meta .item__type:first-child::before {
  content: "";
  margin: 0;
}

.item__video {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.item__video .play-icon {
  position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.item__video .play-icon::after {
	content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-brand-gradient);
}
.item__video .play-icon i {
	font-size: 60px;
    background: var(--color-white);
    z-index: calc(var(--z-index-base) + 1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.item__video img {
  width: 100%;
  display: block;
}
/* 影片時長徽章（右下角 */
.item__video__duration {
  position: absolute;
  right: var(--space-inset-xs);
  bottom: var(--space-inset-xs);
  z-index: calc(var(--z-index-base) + 1);
  padding: var(--space-inset-2xs) var(--space-inset-xs);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.65);
  color: var(--color-text-inverse);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
}

/*-------------------------
ui-card--list
--------------------------*/
.ui-card.ui-card--list .item__title {
  text-align: center;
}

.ui-card.ui-card--list .item__title::after {
  content: "\f178";
  font-family: "Font Awesome 6 Pro";
  font-size: 18px;
  font-weight: bold;
  margin-left: var(--space-inline-sm);
  display: inline-block;
  color: transparent;
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ========== Group ========== */
.ui-card-group {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-grid);
}
.ui-card-group--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-grid);
}

.ui-card-group--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-grid);
}

.ui-card-group--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-grid);
}


/* ========== Layout ========== */
.container-full {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-section) 0;
  border-radius: 0;
}
.container-full--top-compact {
  padding-top: var(--space-inset-md);
}
.container-full--compact {
  padding-top: var(--space-inset-md);
  padding-bottom: var(--space-inset-md);	
}

.container-limited {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}

.container-narrow {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-direction: column;
  gap: var(--space-row);
  position: relative;
}

.row--compact {
  gap: var(--space-stack-md);
}



/* ========== Bleed Modifiers ========== */
/* 疊加在 container-full 上 */

/*KV用，全滿版*/
.container-full.is-bleed {
  padding: 0 !important;
}

/* fouce用 768以下恢復*/
.container-full.is-bleed-x {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.container-full.is-bleed-y {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*offset用*/
.container-full.is-bleed-right {
  padding-right: 0 !important;
}

.container-full.is-bleed-left {
  padding-left: 0 !important;
}



/* ========== 比例設定 ========== */
.ui-split {
  display: flex;
  flex-direction: row;
  gap: var(--space-row);
}

.ui-split--middle{
    align-items:center;
}


/* 雙欄子項目等高：加在 .ui-split 本身即可，不用改子項目
   前提：primary/secondary 底下各自只有「一個」直接子項目
   （若某欄有多個直接子項目，會一起被撐開、彼此分配剩餘高度） */
.ui-split--equal-height > .ui-split__primary > *,
.ui-split--equal-height > .ui-split__secondary > * {
  flex: 1;
  min-height: 0;
}

.ui-split__primary,
.ui-split__secondary {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ui-split__push {
    margin-top: auto;
    padding-top: var(--space-inset-lg);
}

/* 疊加任一背景色（bg-*）時才給內距與圓角 */
.ui-split__primary[class*="bg-"],
.ui-split__secondary[class*="bg-"] {
  padding: var(--space-inset-lg);
  border-radius: var(--radius-component);
}


/* 比例定義 */
.ui-split--8-2 .ui-split__primary {
  flex: 8;
}
.ui-split--8-2 .ui-split__secondary {
  flex: 2;
}
.ui-split--2-8 .ui-split__primary {
  flex: 2;
}
.ui-split--2-8 .ui-split__secondary {
  flex: 8;
}
.ui-split--7-3 .ui-split__primary {
  flex: 7;
}

.ui-split--7-3 .ui-split__secondary {
  flex: 3;
}
.ui-split--3-7 .ui-split__primary {
  flex: 3;
}

.ui-split--3-7 .ui-split__secondary {
  flex: 7;
}

.ui-split--6-4 .ui-split__primary {
  flex: 6;
}

.ui-split--6-4 .ui-split__secondary {
  flex: 4;
}

.ui-split--4-6 .ui-split__primary {
  flex: 4;
}

.ui-split--4-6 .ui-split__secondary {
  flex: 6;
}

.ui-split--5-5 .ui-split__primary,
.ui-split--5-5 .ui-split__secondary {
  flex: 1;
}

/* ========== section title ========== */
.ui-section-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-xs);
  max-width: 820px;
  text-align: center;
  align-items: center;
  margin: 0 auto;
}

.ui-section-title__heading {
  margin: 0;
}

.ui-section-title__highlight {
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

.ui-split .ui-section-title {
  text-align: left;
  align-items: flex-start;
  margin: inherit;
}




/*-------------------------
  UI effect - bleed element
--------------------------*/
/* bleed direction */
.ui-effect--bleed-top {
  margin-top: calc(var(--bleed-size) * -1);
}

.ui-effect--bleed-bottom {
  margin-bottom: calc(var(--bleed-size) * -1);
}

/* bleed depth */
.ui-effect--bleed-sm {
  --bleed-size: var(--bleed-sm);
}

.ui-effect--bleed-md {
  --bleed-size: var(--bleed-md);
}

.ui-effect--bleed-lg {
  --bleed-size: var(--bleed-lg);
}

.ui-effect--bleed-xl {
  --bleed-size: var(--bleed-xl);
}

.ui-effect--bleed-xxl {
  --bleed-size: var(--bleed-xxl);
}

/* ui-bleed-scope - 補回被吃掉的空間 */
.ui-bleed-scope--sm {
  padding-top: calc(var(--bleed-scope-offset) + var(--bleed-sm));
}

.ui-bleed-scope--md {
  padding-top: calc(var(--bleed-scope-offset) + var(--bleed-md));
}

.ui-bleed-scope--lg {
  padding-top: calc(var(--bleed-scope-offset) + var(--bleed-lg));
}


/*-------------------------
  UI effect - background bleed
--------------------------*/

/* base */
.ui-effect--bg-bleed-top,
.ui-effect--bg-bleed-bottom {
  position: relative;
  z-index: 0;
}

/* direction */
.ui-effect--bg-bleed-top::before,
.ui-effect--bg-bleed-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--bleed-size);
  background-color: var(--bleed-color);
  z-index: -1;
}

.ui-effect--bg-bleed-top::before {
  top: 0;
}

.ui-effect--bg-bleed-bottom::after {
  bottom: calc(var(--bleed-size) * -1);
}

/* background color */
.ui-effect--bg-bleed-surface {
  --bleed-color: var(--bg-surface);
}

.ui-effect--bg-bleed-surface-soft {
  --bleed-color: var(--bg-surface-soft);
}

.ui-effect--bg-bleed-brand-primary {
  --bleed-color: var(--bg-brand-primary);
}

.ui-effect--bg-bleed-brand-secondary {
  --bleed-color: var(--bg-brand-secondary);
}

.ui-effect--bg-bleed-brand-light {
  --bleed-color: var(--bg-brand-light);
}

.ui-effect--bg-bleed-brand-mid {
  --bleed-color: var(--bg-brand-mid);
}

.ui-effect--bg-bleed-brand-deep {
  --bleed-color: var(--bg-brand-deep);
}

/*-------------------------
  ui-cta-contact（滿版漸層 CTA banner）
  掛法：container-full.bg-brand-gradient > container-limited > row.ui-split--4-6
  左欄視覺以 ui-effect--bleed-top ui-effect--bleed-lg 向上破格，
  前一個區塊須為白底
--------------------------*/
/* 左欄合成視覺容器（bleed 掛此層）
   margin 不可用縮寫，避免蓋掉 bleed 的 margin-top */
.ui-cta-contact__visual {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .ui-cta-contact__visual {
    max-width: min(70%, 400px);
  }
}

@media (max-width: 768px) {
  .ui-cta-contact__visual {
    max-width: 360px;
  }
}

@media (max-width: 580px) {
  .ui-cta-contact__visual {
    max-width: 280px;
  }
}

/* ========== RWD (Breakpoint Overrides Only) ========== */
/* < 1200px: slightly tighter section padding */
@media (max-width: 1600px) {
  .container-full {
    padding: var(--space-gutter);
  }
  .container-full--top-compact {
    padding-top: var(--space-inset-md);
  }
  .container-full--compact {
    padding-top: var(--space-inset-md);
	padding-bottom: var(--space-inset-md);  
  }
}

/* < 992px: split layout stacks; card grids drop to 2 columns */
@media (max-width: 1024px) {
  .container-full .row {
    gap: var(--space-stack-lg);
  }

  .ui-split {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-stack-lg);
  }

  .ui-split .ui-section-title {
    text-align: center;
    align-items: center;
    margin: 0 auto;
  }

 

  .ui-card-group--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ui-card-group--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Demo HTML contains an inline fixed width; override it on smaller screens */
  .ui-card-group--4[style] {
    width: auto !important;
    max-width: 100%;
  }

  .ui-effect--bleed-top,
  .ui-effect--bleed-bottom {
    margin-top: inherit;
    margin-bottom: inherit;
  }
}

@media (max-width: 768px) {

  /* fouce用 768以下恢復*/
  .container-full.is-bleed-x {
    padding-left: var(--space-inset-lg) !important;
    padding-right: var(--space-inset-lg) !important;
  }
  .container-full {
    padding: var(--space-inset-lg);
  }
  	
}

/* < 576px: single-column cards with tighter gaps */
@media (max-width: 580px) {
  .container-full {
    padding: var(--space-inset-md);
  }

  .ui-card-group, 
  .ui-card-group--2,
  .ui-card-group--3,
  .ui-card-group--4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}



/*-------------------------------
        Navbar
--------------------------------*/
.is-sticky {
	opacity: .95;
	z-index: var(--z-index-navbar);
	position: sticky;
	top: 0;
}

.ui-navbar.is-sticky.show-siteName .ui-navbar__sitename {
	max-height: 56px;
	width: 100%;
	border-bottom: 1px solid var(--color-grey-300);
	background-color: var(--color-white);
	padding: 1px 0 0 0;
}

.ui-navbar__sitename p {
	margin: 6px 0;
	font-size: 26px;
	font-weight: var(--font-weight-bold);
	color: var(--color-brand-blue-900);
}

html[lang=ko-kr] .ui-navbar__sitename p,
html[lang=ja-jp] .ui-navbar__sitename p,
html[lang=zh-cn] .ui-navbar__sitename p,
html[lang=zh-tw] .ui-navbar__sitename p,
html[lang=vi-vn] .ui-navbar__sitename p {
	font-size: 26px;
}

.ui-navbar.ui-navbar__wrapper {
	background-color: rgba(255, 255, 255, 1);
	border-bottom: 4px solid var(--color-grey-300);
}

.ui-navbar.ui-navbar__wrapper.active {
	border-bottom: 4px solid var(--color-brand-blue-600);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__nav {
	padding: 0;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__list {
	display: flex;
	list-style: none;
	margin-bottom: 0;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__collapse {
	justify-content: space-between;
	display: flex !important;
	flex-basis: auto;
	align-items: center;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item {
	position: relative;
	padding-right: var(--space-inset-md);
	padding-left: var(--space-inset-md);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	font-size: var(--font-size-base);
	line-height: 1.5;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item:nth-of-type(2) {
	padding-left: 0;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item .ui-navbar__link {
	padding: 16px 0;
	display: inline-block;
	color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item i {
	margin-left: 6px;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item:hover .ui-navbar__link {
	text-decoration: none;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item:hover::before {
	content: "";
	position: absolute;
	width: calc(100% - 40px);
	bottom: 0;
	left: 19px;
	bottom: -4px;
	height: 4px;
	background-color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item:nth-of-type(2).active::before,
.ui-navbar.ui-navbar__wrapper .ui-navbar__item:nth-of-type(2):hover::before {
	left: 0px;
	width: calc(100% - 20px);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item::after {
	content: " ";
	position: absolute;
	right: 0;
	top: 13px;
	width: 1px;
	height: 32px;
	border-right: 1px solid var(--color-grey-300);
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item.active .ui-navbar__link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #4c7aa6;
	z-index: var(--z-index-base);
}

.ui-navbar__item.dropdown .dropdown-content {
	display: none;
	position: absolute;
	background-color: rgba(57, 85, 115, 0.9);
	min-width: 150px;
	z-index: var(--z-index-base);
}

.ui-navbar__item.dropdown.active .dropdown-content {
	display: block;
}

.ui-navbar__nav .ui-navbar__cta p {
	margin: 0;
}

.ui-navbar__nav .ui-navbar__cta p a {
	display: block;
	font-size: var(--font-size-base);
	background-color: var(--color-brand-blue-600);
	height: 40px;
	line-height: 40px;
	padding: 2px 28px;
	color: var(--color-white);
}

.ui-navbar__nav .ui-navbar__cta p a:hover {
	background-color: var(--color-brand-blue-900);
}

.ui-navbar .ui-navbar__toggle,
.ui-navbar .ui-navbar__next,
.ui-navbar .ui-navbar__prev {
	display: none;
}

/* Sitename uses max-height collapse instead of display:none.
   display:none causes an instant height jump on the sticky element,
   forcing content reflow and layout thrash. max-height + overflow:hidden
   lets the reveal animate smoothly without a geometry shock. */
.ui-navbar__sitename {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.2s ease;
}

.ui-navbar__mobilebar {
	display: none;
}

/*Secondary Nav*/
.ui-navbar.ui-navbar__secondary-wrapper {
	background-color: var(--color-grey-100);
	border-bottom: 1px solid var(--color-grey-300);
}

.ui-navbar.ui-navbar__secondary-wrapper.is-sticky {
	border-bottom: 4px solid var(--color-grey-300);
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav {
	padding: 0;
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__collapse {
	justify-content: space-between;
	display: flex !important;
	flex-basis: auto;
	align-items: center;
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__list {
	display: flex;
	list-style: none;
	margin-bottom: 0;
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item {
	position: relative;
	margin-right: 30px;
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	font-size: var(--font-size-base);
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item .ui-navbar__link {
	padding: 16px 0;
	display: inline-block;
	font-weight: normal;
	text-decoration: none;
	color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item .ui-navbar__link:hover {
	text-decoration: none;
}

.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item.active::before,
.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item:hover::before {
	content: "";
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	height: 4px;
	background-color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__secondary-wrapper.is-sticky .ui-navbar__item.active::before,
.ui-navbar.ui-navbar__secondary-wrapper.is-sticky .ui-navbar__item:hover::before {
	bottom: -4px;
}

/*Dropdown menu*/
.nav-item.dropdown i {
	margin-left: 6px;
}

.nav-item.dropdown .dropdown-content {
	display: none;
	position: absolute;
	background-color: rgba(57, 85, 115, 0.9);
	min-width: 150px;
	z-index: var(--z-index-base);
	left: 0;
}

.nav-item.dropdown.active .dropdown-content {
	display: block;
}

.nav-item.dropdown.active i.fa-angle-down:before {
	content: "\f106";
}

.dropdown-content ul {
	list-style: none;
	margin-bottom: 0;
}

.dropdown-content ul li a {
	display: block;
	font-size: var(--font-size-base);
	margin: 0 15px;
	padding: 8px 0;
	border-top: 1px solid #7593b1;
	color: var(--color-white);
}

.dropdown-content ul li:first-child a {
	border-top: none;
}

.dropdown-content ul li a:hover {
	text-decoration: underline;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item.dropdown.active .dropdown-content a {
	padding: 8px 0;
}

.ui-navbar.ui-navbar__wrapper .ui-navbar__item.dropdown.active .dropdown-content a:hover {
	text-decoration: underline;
}

.ui-navbar.ui-navbar__wrapper.is-sticky .ui-navbar__item.active .ui-navbar__link::after {
	content: none;
}

.ui-navbar.ui-navbar__wrapper.is-sticky .ui-navbar__item.active::before {
	content: "";
	position: absolute;
	width: calc(100% - 40px);
	left: 19px;
	bottom: -4px;
	height: 4px;
	background-color: var(--color-brand-blue-900);
}

.ui-navbar.ui-navbar__wrapper.is-sticky .ui-navbar__item:nth-of-type(2).active::before,
.ui-navbar.ui-navbar__wrapper.is-sticky .ui-navbar__item:nth-of-type(2):hover::before {
	left: 0px;
	width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {

	/*Navbar*/
	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav.close #navbar.ui-navbar__collapse ul {
		display: none;
	}

	.ui-navbar.ui-navbar__wrapper {
		border-color: var(--color-brand-blue-900);
	}

	.ui-navbar.ui-navbar__wrapper.is-sticky {
		border: none;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item.active::before,
	.ui-navbar.ui-navbar__wrapper .ui-navbar__item:hover::before,
	.ui-navbar.ui-navbar__wrapper .ui-navbar__item::after {
		content: none;
	}

	/* Desktop active-indicator (::before border) is designed for horizontal nav.
	   On mobile vertical-list mode it shows an unexpected bottom border on the active item.
	   Suppress it here; the swipenavigation rules below re-enable it in horizontal swipe mode. */
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item.active::before,
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item:hover::before {
		content: none;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__collapse.swipenavigation .ui-navbar__item::before,
	.advan-nav.secondary-nav-wrapper .navbar-collapse.swipenavigation .navbar-nav li.nav-item::before {
		content: "";
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 4px;
		background-color: #DDD;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__collapse.swipenavigation .ui-navbar__item.active::before,
	.ui-navbar.ui-navbar__wrapper .swipenavigation .ui-navbar__item:hover::before,
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item.active::before,
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item:hover::before,
	.advan-nav.secondary-nav-wrapper .navbar-collapse.swipenavigation .navbar-nav li.nav-item.active::before,
	.advan-nav.secondary-nav-wrapper .swipenavigation .navbar-nav li.nav-item:hover::before {
		content: "";
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 4px;
		background-color: var(--color-brand-blue-900);
	}

	.ui-navbar .ui-navbar__cta {
		display: none;
	}

	.ui-navbar.is-sticky.show-siteName .ui-navbar__sitename p {
		margin-bottom: 0;
		padding: 0 0 1%;
		font-size: var(--font-size-base);
		border-bottom: none;
		font-weight: var(--font-weight-bold);
		color: var(--color-brand-blue-900);
	}

	.ui-navbar .ui-navbar__toggle {
		display: block;
		width: 100%;
		background-color: var(--color-brand-blue-900);
		color: var(--color-white);
		padding: 12px 3%;
		box-sizing: border-box;
	}

	.ui-navbar .ui-navbar__nav.close .ui-navbar__toggle {
		background-color: var(--color-white);
		color: var(--color-brand-blue-900);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav {
		flex-flow: column;
		align-items: flex-start;
	}

	.ui-navbar .ui-navbar__toggle i {
		font-size: 20px;
		vertical-align: middle;
		margin-right: 3px;
	}

	.ui-navbar .ui-navbar__toggle span {
		font-size: var(--font-size-base);
		line-height: 1.5;
		font-weight: var(--font-weight-bold);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.close {
		display: none !important;
	}

	.ui-navbar .ui-navbar__next.show {
		display: block;
		position: absolute;
		right: 0;
		bottom: 12px;
		padding-right: 4px;
		width: 40px;
		text-align: right;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
		cursor: pointer;
	}

	.ui-navbar .ui-navbar__prev.show {
		display: block;
		position: absolute;
		left: 0;
		bottom: 12px;
		padding-left: 4px;
		width: 40px;
		text-align: left;
		background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
		cursor: pointer;
		z-index: calc(var(--z-index-navbar) - 1);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse {
		width: 93%;
		margin-left: 3%;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__list {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
		padding: 0;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item {
		margin: 0;
		padding-left: 0;
		width: 100%;
		border-bottom: 1px solid var(--color-grey-300);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item:nth-last-of-type(2) {
		border-bottom: none;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item .ui-navbar__link {
		padding: 12px;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item:last-child {
		border-bottom: none;
	}

	.ui-navbar.is-swipe .ui-navbar__toggle {
		display: none;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation,
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation {
		width: 100%;
		margin-left: 0;
	}

	.ui-navbar.ui-navbar__wrapper .swipenavigation .ui-navbar__item:nth-child(2) .ui-navbar__link {
		padding-left: 0;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__list,
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__list,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation .navbar-nav {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item,
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation .navbar-nav li.nav-item {
		width: auto;
		padding: 0 3.5%;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item::after,
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item::after,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation .navbar-nav li.nav-item::after {
		content: " ";
		position: absolute;
		right: -1px;
		top: 10px;
		width: 1px;
		height: 26px;
		border-right: 1px solid var(--color-grey-300);
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item:nth-last-of-type(2)::after,
	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__nav .ui-navbar__collapse.swipenavigation .ui-navbar__item:nth-last-of-type(2)::after,
	.advan-nav.secondary-nav-wrapper .navbar-expand-md .navbar-collapse.swipenavigation .navbar-nav li.nav-item:nth-last-of-type(2)::after {
		border-right: none;
	}

	.ui-navbar.ui-navbar__wrapper.is-sticky .ui-navbar__item {
		border-bottom: none;
	}

	.swipenavigation ul {
		width: auto;
		list-style: none;
		margin: 0;
		padding: 0;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mobile-menubar-wrapper {
		display: block;
		position: fixed;
		z-index: calc(var(--z-index-sticky-header) - 1);
		bottom: 0;
		width: 100%;
		background: var(--color-white);
		box-shadow: 0 5px 20px 0 rgba(3, 3, 3, .2);
	}

	.ui-navbar__mobilebar {
		display: block;
		position: fixed;
		z-index: calc(var(--z-index-sticky-header) - 1);
		bottom: 0;
		width: 100%;
		background: var(--color-white);
		box-shadow: 0 5px 20px 0 rgba(3, 3, 3, .2);
	}

	.ui-navbar__mobilebar-inner {
		z-index: var(--z-index-sticky-header);
	}

	.ui-navbar__mobilebar ul {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0;
	}

	.ui-navbar__mobileitem {
		flex: 1 1 25%;
		color: var(--color-grey-700);
		display: block;
		text-align: center;
		padding: 10px 0;
		border-top: var(--color-white) 3px solid;
		line-height: inherit;
	}

	.ui-navbar__mobileitem a {
		color: var(--color-grey-700);
	}

	.ui-navbar__mobileitem span {
		display: block;
	}

	.ui-navbar__mobileitem span i {
		font-size: 20px;
		margin-bottom: 5px;
	}

	/*Secondary*/
	.ui-navbar.ui-navbar__secondary-wrapper.is-sticky {
		border-bottom: none;
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__list {
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item {
		margin-right: 0;
		padding-left: 3%;
		border-bottom: 1px solid var(--color-grey-300);
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__item .ui-navbar__link {
		padding: 12px 0;
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__next.show {
		background: linear-gradient(to right, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 1) 100%);
	}

	.ui-navbar.ui-navbar__secondary-wrapper .ui-navbar__prev.show {
		background: linear-gradient(to left, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 1) 100%);
		cursor: pointer;
	}

	/*Dropdown menu*/
	.ui-navbar__item.dropdown .dropdown-content {
		position: relative;

	}

	.ui-navbar__item.dropdown .dropdown-content ul li {
		display: block;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item {
		padding-left: 0;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item .dropdown-content {
		margin-left: 12px;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item.dropdown.active {
		padding-bottom: 20px;
	}

	.ui-navbar.ui-navbar__wrapper .swipenavigation .ui-navbar__item.dropdown.active .dropdown-content {
		position: fixed;
		top: 48px;
		left: 0;
		width: 100%;
		margin-left: 0;
	}

	.ui-navbar.ui-navbar__wrapper .ui-navbar__item.active .ui-navbar__link::after {
		content: none;
	}

}


/* ==========================
   Horizontal Tab
============================== */
.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
  margin-bottom: var(--space-stack-md);
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--center {
  justify-content: center;
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab {
  background: var(--bg-brand-light);
  padding: var(--space-inset-xs) var(--space-inset-md);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
  white-space: nowrap;
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab i {
  margin-right: var(--space-inline-sm);
  font-size: 18px;
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab.is-active, .ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab:hover {
    color: var(--color-text-inverse);
    background-image: var(--color-brand-gradient);
}

.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab::before,
.ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab::after {
  display: none;
}

.ui-tabs--horizontal > .ui-tabs__body > .ui-tab-panel.is-active {
  padding-top: var(--space-inset-md);
}
.bg-brand-light .ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab, .bg-surface-soft .ui-tabs--horizontal > .ui-tabs__nav.ui-tabs__nav--toggle .ui-tab {
  background-color: var(--color-white);
}

/* --------------------------
    List 
  -------------------------- */
.ui-list {
	display:flex;
	gap:var(--space-inline-xl);
}
.ui-list__media {
	flex: 4;
}
.ui-list__media img {
  width: 100%;
  border-radius: var(--radius-component);
  object-fit: cover;
}
.ui-list__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-xs);
    border-radius: var(--radius-component);
    flex: 6;

}
.ui-list__group {
    display: flex;
    gap: var(--space-stack-md);
    flex-direction: column;
}
.ui-list__group .ui-list {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-inset-md);
}
.ui-list__group .ui-list:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ui-list__meta {
  font-size: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}

/* Horizonta list */
 .ui-list__group--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-grid);
}

/* ========== Card ========== */
/* Horizonta card */
.ui-card.ui-card--horizontal {
  flex-direction: row;
}
.ui-card.ui-card--horizontal .ui-card__media {
  width: 50%;
}
.ui-card.ui-card--horizontal .ui-card__content {
  width: 50%;
}
.ui-card.ui-card--horizontal .ui-card__media img{
  border-radius: var(--radius-component) 0 0 var(--radius-component);
}

/* 深色底（bg-brand-primary / bg-brand-secondary / bg-brand-deep）套用於 ui-card--horizontal 時，文字反白 */
.ui-card.ui-card--horizontal.bg-brand-primary,
.ui-card.ui-card--horizontal.bg-brand-secondary,
.ui-card.ui-card--horizontal.bg-brand-deep {
  color: var(--color-text-inverse);
}

.ui-card.ui-card--horizontal.bg-brand-primary .ui-textlink,
.ui-card.ui-card--horizontal.bg-brand-secondary .ui-textlink,
.ui-card.ui-card--horizontal.bg-brand-deep .ui-textlink {
  color: var(--color-text-inverse);
}

/* Card with border */
.ui-card.ui-card--outlined {
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
}

[class^="bg-"] .ui-card.ui-card--outlined,
[class*=" bg-"] .ui-card.ui-card--outlined {
  border: none;
}
 
/*-------------------------
  ui-card--overlay-top / bottom / left / right
  圖片滿版鋪底，ui-card__content 疊加其上，依方向靠齊對應邊。
  卡片本身不設固定比例——高度交由外層排版決定（例如 ui-card-group 的
  grid 預設 stretch 到同列最高者，或使用端自行加 aspect-ratio），這裡
  只負責疊層與文字靠齊方向，讓同一組類別能套用在不同比例的卡片上。
  min-height 只是沒有外層 stretch／aspect-ratio 時的保底值，避免圖片
  被內容擠壓到看不出滿版效果；有更高的外層高度時會被自然撐開，不受影響。
--------------------------*/
.ui-card.ui-card--overlay-top,
.ui-card.ui-card--overlay-bottom,
.ui-card.ui-card--overlay-left,
.ui-card.ui-card--overlay-right {
  position: relative;
  overflow: hidden;
}

.ui-card--overlay-top .ui-card__media,
.ui-card--overlay-bottom .ui-card__media,
.ui-card--overlay-left .ui-card__media,
.ui-card--overlay-right .ui-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ui-card--overlay-top .ui-card__media .item__image,
.ui-card--overlay-bottom .ui-card__media .item__image,
.ui-card--overlay-left .ui-card__media .item__image,
.ui-card--overlay-right .ui-card__media .item__image {
  width: 100%;
  height: 100%;
}

.ui-card--overlay-top .ui-card__media img,
.ui-card--overlay-bottom .ui-card__media img,
.ui-card--overlay-left .ui-card__media img,
.ui-card--overlay-right .ui-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 圖片鋪滿整張卡，四角都要圓角（非上下疊放卡的上緣圓角而已） */
  border-radius: var(--radius-component);
}

/* 圖片裁切基準點：與文字方向相反，RWD 縮小時優先裁掉文字同側，
   確保畫面重要視覺（相對文字的另一側）永遠不被裁掉 */
.ui-card--overlay-top .ui-card__media img {
  object-position: center bottom;
}
.ui-card--overlay-bottom .ui-card__media img {
  object-position: center top;
}
.ui-card--overlay-left .ui-card__media img {
  object-position: right center;
}
.ui-card--overlay-right .ui-card__media img {
  object-position: left center;
}

.ui-card--overlay-top .ui-card__content,
.ui-card--overlay-bottom .ui-card__content,
.ui-card--overlay-left .ui-card__content,
.ui-card--overlay-right .ui-card__content {
  position: relative;
  z-index: var(--z-index-base);
  /* .ui-card__content 原本的 height:100% 是相對 .ui-card 的百分比高度，
     但 .ui-card 本身高度是 auto（僅靠 min-height 撐底），百分比高度無法
     對 auto 的容器生效，會直接被當成 auto 處理，導致內容永遠只有文字
     本身的高度，justify-content 沒有多餘空間可以靠齊。改用 flex-grow
     撐滿 .ui-card（flex 直向容器）目前的實際高度，靠齊才會真的生效。 */
  height: auto;
  flex: 1 1 auto;
}

/* 靠上：內容整塊置頂，維持左對齊、滿版寬度 */
.ui-card--overlay-top .ui-card__content {
  justify-content: flex-start;
}

/* 靠下：內容整塊置底，維持左對齊、滿版寬度（對應 Mockup 的直式卡） */
.ui-card--overlay-bottom .ui-card__content {
  justify-content: flex-end;
}

/* 靠左：文字與按鈕靠左收縮對齊 */
.ui-card--overlay-left .ui-card__content {
  align-items: flex-start;
  text-align: left;
}

/* 靠右：文字與按鈕靠右收縮對齊 */
.ui-card--overlay-right .ui-card__content {
  align-items: flex-end;
  text-align: right;
}

/* .ui-card__actions / .item__meta 原本的 margin-top:auto 是給一般卡片用的，
   讓按鈕/meta 自己被推到卡片底部；但這個 auto margin 會比 justify-content
   更早吃光可用空間，導致 overlay 系列的 title/text 卡在頂端、只有按鈕被推到
   底部，破壞了 justify-content:flex-end／flex-start 想要的「整塊靠齊」效果。
   overlay 系列統一交回 justify-content 決定位置，這裡歸零即可。 */
.ui-card--overlay-top .ui-card__actions,
.ui-card--overlay-bottom .ui-card__actions,
.ui-card--overlay-left .ui-card__actions,
.ui-card--overlay-right .ui-card__actions,
.ui-card--overlay-top .item__meta,
.ui-card--overlay-bottom .item__meta,
.ui-card--overlay-left .item__meta,
.ui-card--overlay-right .item__meta {
  margin-top: 0;
}

@media (max-width: 768px) {
	.ui-card.ui-card--horizontal {
		flex-direction: column;
	}
    .ui-card.ui-card--horizontal .ui-card__content {
		width: 100%;
		box-sizing: border-box;
	}
	.ui-card.ui-card--horizontal .ui-card__media img {
    	border-radius: var(--radius-component) var(--radius-component) 0 0;
	}
	.ui-card.ui-card--horizontal .ui-card__media {
		width: 100%;
	}
	.ui-list__group--2 {
		grid-template-columns: repeat(1, 1fr);
	}
}
@media (max-width: 580px) {
	.ui-list {
		flex-direction: column;
	}
	.ui-list__media {
		width: 100%;
	}
	.ui-list__content {
		width: 100%;
	}
}

/*ui-card--horizontal-reverse — 反序列式卡（左文右圖）*/
.ui-card.ui-card--horizontal.ui-card--horizontal-reverse {
  --ui-card-hr-media: 325px;  
  align-items: stretch;
  overflow: hidden;   

}

/* 兩欄群組內全部卡片等高 */
.ui-card-group--2:has(> .ui-card.ui-card--horizontal.ui-card--horizontal-reverse) {
  grid-auto-rows: 1fr;
}

.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__content {
  box-sizing: border-box;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__content .item__meta {
  margin-top: 0;
}

/* 媒體面板：固定 325×(16:9) */
.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media {
  position: relative;
  width: min(var(--ui-card-hr-media), 50%); 
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;          
  align-self: stretch;            
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 0 var(--radius-component) var(--radius-component) 0;
  background-color: var(--color-grey-100);  
}

.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media .item__image,
.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media .item__thumbnail,
.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media .item__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media .item__image img,
.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media .item__video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media .item__thumbnail {
  background-color: var(--color-brand-blue-800);
  background-image: url("../images/item-img-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media .item__thumbnail img {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
  border-radius: 0;
}

.ui-card--horizontal-reverse .item__video .play-icon {
  z-index: calc(var(--z-index-base) + 1);
}

/*--------------------------------------------------------------
  狀態③：直式封面
  共用底圖面板 + contain 已能直接容納直式封面（左右留藍邊）。
  本修飾符為可選的「直式面板」（更窄、3:4），供直式素材為主的版面使用。
--------------------------------------------------------------*/
.ui-card.ui-card--horizontal.ui-card--horizontal-reverse.ui-card--media-portrait {
  --ui-card-hr-media: 240px;
}
.ui-card.ui-card--horizontal.ui-card--horizontal-reverse.ui-card--media-portrait .ui-card__media {
  aspect-ratio: 3 / 4;   /* 直式面板基準高 */
}

/*--------------------------------------------------------------
  RWD — 全斷點維持左文右圖（不採 horizontal 的 ≤768 上下堆疊），
        面板寬隨斷點縮小、高度依 16:9 自動推導
--------------------------------------------------------------*/
@media (max-width: 768px) {
  .ui-card.ui-card--horizontal.ui-card--horizontal-reverse {
    flex-direction: row;
    --ui-card-hr-media: 240px;
  }
  .ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__content {
    width: auto;
  }
  .ui-card.ui-card--horizontal.ui-card--horizontal-reverse .ui-card__media {
    width: min(var(--ui-card-hr-media), 50%);
    flex: 0 0 auto;
    border-radius: 0 var(--radius-component) var(--radius-component) 0;
  }
  .ui-card.ui-card--horizontal.ui-card--horizontal-reverse.ui-card--media-portrait {
    --ui-card-hr-media: 200px;
  }
}

@media (max-width: 580px) {
  .ui-card.ui-card--horizontal.ui-card--horizontal-reverse {
    --ui-card-hr-media: 42%;
  }
  .ui-card.ui-card--horizontal.ui-card--horizontal-reverse.ui-card--media-portrait {
    --ui-card-hr-media: 38%;
  }
  .ui-card--horizontal-reverse .item__video .play-icon::after {
    width: 48px;
    height: 48px;
  }
  .ui-card--horizontal-reverse .item__video .play-icon i {
    font-size: 32px;
  }
}


/*----------------------------------
ui-bento
-----------------------------------*/
.ui-bento__grid {
  display: grid;
  gap: var(--space-grid);
}

.ui-bento__grid.ui-bento-layout__A {
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.ui-bento__grid.ui-bento-layout__B {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

/*預設直向*/
.ui-bento-item {
  background-color: var(--bg-surface-soft);
  border-radius: var(--radius-component);
  display: flex;
  flex-direction: column;
  padding: 0;
}

.bg-brand-light .ui-bento-item {
  background-color: var(--bg-surface);
}

.ui-bento-item.bg-brand-deep {
  color: var(--color-text-inverse);
}

.ui-bento-item.bg-brand-deep .ui-textlink {
  color: var(--color-text-inverse);
}

.ui-bento-item__media.ui-media__icon .item__image {
  display: flex;
  justify-content: end;
  margin-top: auto;
}

.ui-bento-item__media.ui-media__icon img {
  max-width: 100px;
  padding-right: var(--space-inset-md);
  padding-bottom: var(--space-inset-md);
}

.ui-bento-item__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-stack-sm);
  padding: var(--space-inset-md);
}

.ui-bento-item .item__meta {
  padding: var(--space-inset-md);
}

.ui-bento-item__content .ui-btn {
  width: fit-content;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-1 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 4;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-2 {
  grid-column: 4 / span 3;
  grid-row: 1 / span 4;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-3 {
  grid-column: 7 / span 2;
  grid-row: 1 / span 2;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-4 {
  grid-column: 9 / span 2;
  grid-row: 1 / span 2;
}

.ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-5 {
  grid-column: 7 / span 4;
  grid-row: 3 / span 2;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-1 {
  grid-area: 1 / 1 / 4 / 4;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-2 {
  grid-area: 1 / 4 / 4 / 6;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-3 {
  grid-area: 4 / 1 / 6 / 3;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-4 {
  grid-area: 4 / 3 / 6 / 6;
}

.ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-5 {
  grid-area: 1 / 6 / 6 / 8;
}

/*可選擇橫向排列*/
.ui-bento-item.ui-bento-item--row {
  flex-direction: row;
}

.ui-bento-item.ui-bento-item--row .ui-bento-item__content {
  justify-content: flex-start;
}

.ui-bento-item.ui-bento-item--row .ui-bento-item__media {
  flex: 0 1 40%;
  display: flex;
}

/*----------------------------------
ui-bento Layout C（16×2 / Stats 數據亮點）
-----------------------------------*/
.ui-bento__grid.ui-bento-layout__C {
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-1 {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
}

.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-2 {
  grid-column: 5 / span 6;
  grid-row: 1 / span 1;
}

.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-3 {
  grid-column: 11 / span 6;
  grid-row: 1 / span 1;
}

.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-4 {
  grid-column: 5 / span 9;
  grid-row: 2 / span 1;
}

.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-5 {
  grid-column: 14 / span 3;
  grid-row: 2 / span 1;
}

/*item-1 圖片比例（僅 Layout C）：圖片填滿文字以外的卡片空間，文字置底*/
.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-1 .ui-bento-item__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
}

.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-1 .ui-bento-item__media .item__image {
  position: absolute;
  inset: 0;
}

.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-1 .ui-bento-item__media .item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-1 .ui-bento-item__content {
  flex: 0 0 auto;
}

/*滿版圖片卡：media 填滿整格，文字疊在底部*/
.ui-bento-item.ui-bento-item--cover {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.ui-bento-item--cover .ui-bento-item__media,
.ui-bento-item--cover > img {
  position: absolute;
  inset: 0;
}

.ui-bento-item--cover .ui-bento-item__media .item__image {
  width: 100%;
  height: 100%;
}

.ui-bento-item--cover .ui-bento-item__media .item__image img,
.ui-bento-item--cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-component);
  display: block;
}

.ui-bento-item--cover .ui-bento-item__content {
  position: relative;
  z-index: var(--z-index-base);
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: var(--space-inset-xl);
  color: var(--color-text-inverse);
  background: linear-gradient(180deg, transparent 0%, rgba(9, 21, 38, 0.8) 60%);
  border-radius: 0 0 var(--radius-component) var(--radius-component);
}

.ui-bento-item--cover .ui-bento-item__content p {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
}

/*數據卡：大數字 + icon 的左右兩欄列（沿用 ui-inline ui-inline--bottom）*/
.ui-bento-item__number {
  display: block; /* 消除 inline baseline 空隙，確保與 icon 底部對齊 */
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/*icon 尺寸：由 media 容器內的 item__icon 控制（img 或 Font Awesome <i> 皆可）*/
.ui-bento-item__media .item__icon img {
  display: block; /* 消除 inline baseline 空隙，維持與數字底部對齊 */
  max-width: 100px;
}
.ui-bento-item__media .item__icon i {
    font-size: 90px;
}
/*----------------------------------
ui-bento Layout D（3×2 / 產品導覽，用於垂直 Tab 右欄 panel）
-----------------------------------*/
.ui-bento__grid.ui-bento-layout__D {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

.ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-2 {
  grid-column: 2 / span 2;
  grid-row: 1 / span 1;
}

.ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-3 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}

.ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-4 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}

.ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-5 {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}

/*產品卡：照片置中 + 置中 textlink*/
.ui-bento-item--product {
  text-align: center;
}

.ui-bento-item--product .ui-bento-item__media {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-inset-md) var(--space-inset-md) 0 var(--space-inset-md);
}

.ui-bento-item--product .ui-bento-item__content {
  flex: 0 0 auto;
  align-items: center;
}

/*情境卡（Layout D 的 item-2）：照片滿版 + 品牌深藍遮罩 + 內容置中
  （與 bg-brand-deep 併用取得白字，圖片可加 ui-mask-fade-left 左緣漸淡）*/
.ui-bento-layout__D .ui-bento-item.item-2 {
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

.ui-bento-layout__D .item-2 .ui-bento-item__media {
  position: absolute;
  inset: 0;
}

.ui-bento-layout__D .item-2 .ui-bento-item__media .item__image {
  width: 100%;
  height: 100%;
}

.ui-bento-layout__D .item-2 .ui-bento-item__media .item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-bento-layout__D .item-2 .ui-bento-item__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-brand-deep);
  opacity: 0.1;
}

.ui-bento-layout__D .item-2 .ui-bento-item__content {
  position: relative;
  z-index: var(--z-index-base);
  justify-content: center;
}

/*-------------------------
ui-bento (RWD overrides)
Only add styles at breakpoints
--------------------------*/
@media (max-width: 1200px) {
  .ui-bento__grid.ui-bento-layout__A {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-1 {
    grid-column: 1 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-2 {
    grid-column: 2 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-3 {
    grid-column: 1 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-4 {
    grid-column: 2 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-1 {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-2 {
    grid-column: 3 / span 2;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-3 {
    grid-column: 5 / span 2;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-4 {
    grid-column: 1 / span 3;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-5 {
    grid-column: 4 / span 3;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.ui-bento-item--row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .ui-bento__grid.ui-bento-layout__B {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-2,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-3 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-4 {
    grid-column: 1 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-5 {
    grid-column: 2 / span 1;
    grid-row: auto;
  }
}

@media (max-width: 580px) {
  .ui-bento__grid.ui-bento-layout__A {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-stack-md);
  }

  .ui-bento__grid.ui-bento-layout__B {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-stack-md);
  }

  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-2,
  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-3,
  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-4,
  .ui-bento__grid.ui-bento-layout__A .ui-bento-item.item-5,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-2,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-3,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-4,
  .ui-bento__grid.ui-bento-layout__B .ui-bento-item.item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento-item.ui-bento-item--row {
    flex-direction: column;
  }

  .ui-bento-item.ui-bento-item--row .ui-bento-item__content {
    flex: 1;
  }

  .ui-bento-item.ui-bento-item--row .ui-bento-item__media {
    flex: 0 0 auto;
  }
  .ui-bento-item.ui-bento-item--row .ui-bento-item__media img.ui-media__icon {
    position: static;
  }
}

/*-------------------------
ui-bento Layout C (RWD overrides)
--------------------------*/
@media (max-width: 1200px) {
  .ui-bento__grid.ui-bento-layout__C {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-1 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-2 {
    grid-column: 1 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-3 {
    grid-column: 2 / span 1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-4 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 220px;
  }

  .ui-bento-item__number {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .ui-bento-item__number {
    font-size: 30px;
  }

  .ui-bento-item__media .item__icon img {
    max-width: 80px;
  }
  .ui-bento-item__media .item__icon i {
    font-size: 80px;
  }
}

@media (max-width: 580px) {
  .ui-bento__grid.ui-bento-layout__C {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-stack-md);
  }

  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-2,
  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-3,
  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-4,
  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento__grid.ui-bento-layout__C .ui-bento-item.item-5 {
    min-height: 180px;
  }
}

/*-------------------------
ui-bento Layout D (RWD overrides)
--------------------------*/
@media (max-width: 768px) {
  .ui-bento__grid.ui-bento-layout__D {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-2 {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-3,
  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-4,
  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-5 {
    grid-column: auto / span 1;
    grid-row: auto;
  }
}

@media (max-width: 580px) {
  .ui-bento__grid.ui-bento-layout__D {
    grid-template-columns: 1fr;
    gap: var(--space-stack-md);
  }

  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-1,
  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-2,
  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-3,
  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-4,
  .ui-bento__grid.ui-bento-layout__D .ui-bento-item.item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ui-bento-layout__D .ui-bento-item.item-2 {
    min-height: 180px;
  }
}

/*-------------------------
  Vertical tabs
--------------------------*/
.ui-tabs {
  width: 100%;
}

.ui-tabs__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-xs);
}

.ui-tabs__nav .ui-tab {
  padding: var(--space-inset-md);
  background: var(--bg-surface-soft);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  text-align: left;

}


.ui-tabs__nav .ui-tab.is-active {
  background: var(--bg-brand-light);
}

.ui-tabs__nav .ui-tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;

  background-color: #53c3fd;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ui-tabs__nav .ui-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  width: 100%;
  background-image: var(--color-brand-gradient);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}

.ui-tabs__nav .ui-tab:hover::before {
  opacity: 1;
}

.ui-tabs__nav .ui-tab:hover::after {
  opacity: 1;
  animation: tab-bar-reveal 0.8s cubic-bezier(.4, 0, .2, 1) forwards;
}

.ui-tabs__nav .ui-tab.is-active::before {
  opacity: 1;
}

.ui-tabs__nav .ui-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
  animation: none;
}

@keyframes tab-bar-reveal {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}



/*--------------------------------------------*/
.bg-brand-light .ui-tabs__nav .ui-tab,
.bg-surface-soft .ui-tabs__nav .ui-tab {
  background: var(--bg-surface);
}



.ui-tab .item__text {
  margin-top: var(--space-stack-xs);
  display: none;
}

.ui-tab.is-active .item__text {
  display: block;
}

.ui-tabs__panels {
  position: relative;
}

.ui-tab-panel {
  display: none;
}

.ui-tab-panel.is-active {
  display: block;
}

@media (max-width: 1440px) {
  .ui-tabs__nav .ui-tab {
    padding: var(--space-inset-xs) var(--space-inset-md);
  }
}

/* --- Tab Layout Variants (Layout A: 4:6 / Layout B: 5:5) --- */
.ui-tabs-layout__A,
.ui-tabs-layout__B {
  display: flex;
  flex-direction: row;
  gap: var(--tabs-layout-gap);
}

.ui-tabs__control,
.ui-tabs__main {
  min-width: 0;
}

.ui-tabs__control {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
}

.ui-tabs-layout__A .ui-tabs__control {
  flex: 4;
}

.ui-tabs-layout__A .ui-tabs__main {
  flex: 6;
}

.ui-tabs-layout__B .ui-tabs__control,
.ui-tabs-layout__B .ui-tabs__main {
  flex: 1;
}
.ui-tabs-layout__A .ui-section-title {
  text-align: left;
  align-items: flex-start;
  margin: inherit;
}



@media (max-width: 1024px) {

  .ui-tabs-layout__A,
  .ui-tabs-layout__B {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-stack-lg);
  }
}

@media (max-width: 580px) {

  .ui-tabs-layout__A,
  .ui-tabs-layout__B {
    gap: var(--space-stack-md);
  }
}

/*-------------------------------
  Accordion
---------------------------------*/
.ui-accordion {
  display: block;
}

.ui-accordion__item {
  background: var(--bg-surface-soft);
  border-radius: var(--radius-component);
  margin-bottom: var(--space-stack-xs);
  position: relative;
  overflow: hidden;
}

.bg-brand-light .ui-accordion__item,
.bg-surface-soft .ui-accordion__item {
  background: var(--bg-surface);
}

.ui-accordion__trigger {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-inline-lg);
  padding: var(--space-inset-md);
  cursor: pointer;
  position: relative;

}

/* Font Awesome icon via ::after */
.ui-accordion__trigger::after {
  content: "\f107";
  font-family: "Font Awesome 6 pro";
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  transition: transform 0.2s ease;
  margin-left: auto;
  /* 讓箭頭靠右 */
}

/* 展開時旋轉 */
.ui-accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Panel 動畫 */
.ui-accordion__panel {
  overflow: hidden;
  height: 0;
  padding: 0;
  transition: height 0.3s ease, padding 0.3s ease;
}

.ui-accordion__content {
  padding: 0 var(--space-inset-md);
  color: var(--color-text-secondary);
}

/* 開啟狀態（只給 class，不寫數值在 JS） */
.ui-accordion__item.is-open .ui-accordion__panel {
  padding-bottom: var(--space-inset-md);
}

.ui-accordion__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;

  background-color: #53c3fd;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ui-accordion__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  width: 100%;
  background-image: var(--color-brand-gradient);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}

.ui-accordion__item:hover::before {
  opacity: 1;
}

.ui-accordion__item:hover::after {
  opacity: 1;
  animation: tab-bar-reveal 0.8s cubic-bezier(.4, 0, .2, 1) forwards;
}

.ui-accordion__item.is-open::after {
  opacity: 1;
  transform: scaleX(1);
  animation: none;
}

.ui-accordion__item.is-open::before {
  opacity: 1;
}




/* -------------------------------
     KV Banner 
----------------------------------- */

.swiper {
  padding-bottom: 0;
}

.ui-kv-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--color-grey-300);
  box-sizing: border-box;
}

.kv-banner__slide {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  display: flex;
  /* 讓子元素可用 stretch 撐滿 */
  align-items: stretch;
}

/* --- KV Banner 變體矮版 compact ----- */
.ui-kv-banner--compact .kv-banner__slide {
  min-height: 300px;
}

.ui-kv-banner--compact .kv-banner__content h1 {
  font-size: var(--font-size-h2);
  -webkit-line-clamp: 2;
}

.ui-kv-banner--compact .kv-banner__media {
  width: 52%;
}

.ui-kv-banner--compact .kv-banner__slide::before {
  right: -130px;
  bottom: -60px;
  width: 330px;
  height: 330px;
}

.ui-kv-banner--compact .kv-banner__slide .kv-banner__media::after {
  bottom: -15px;
  left: -25%;
  width: 85%;
  height: 85%;
}

.ui-kv-banner--compact .kv-banner__media--mask .kv-banner__media-inner {
  mask-position: left 75%;
}

.ui-kv-banner--compact .controls-wrap {
  bottom: 30px;
}

.ui-kv-banner--compact .kv-banner__content {
  gap: var(--space-stack-xs);
  padding-top: var(--space-inset-xl);
}

.ui-kv-banner--compact .ui-textlink {
  font-size: var(--font-size-h4);
}

.ui-kv-banner--compact .ui-textlink::after {
    content: "\f178";
    font-family: "Font Awesome 6 Pro";
    font-size: 18px;
    font-weight: bold;
    margin-left: var(--space-inline-sm);
    display: inline-block;
    color: transparent;
    background-image: var(--color-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}

.ui-kv-banner--compact .kv-banner__slide--dark .ui-textlink {
  color: var(--color-text-inverse);
}

.kv-banner__slide--dark{
  background-color: var(--bg-brand-deep);
}

.kv-banner__slide--dark .kv-banner__content {
  color: var(--color-text-inverse);
}
.kv-banner__slide--dark .ui-btn--primary {
  background-color: var(--color-white);
  color: var(--color-text-primary);
}
.kv-banner__slide--dark .ui-btn--primary:hover, 
.kv-banner__slide--dark .ui-btn--primary:focus-visible {
  background-color: var(--bg-brand-primary);
  color: var(--color-text-inverse);
}

.kv-banner__slide--dark .ui-btn--secondary {
  color: var(--color-text-inverse);
  border: var(--color-white) solid 2px;
  background: transparent;
}

/* Hover → 變成實心漸層 */
.kv-banner__slide--dark .ui-btn--secondary:hover,
.kv-banner__slide--dark .ui-btn--secondary:focus-visible {
  border: var(--color-text-primary) solid 2px;
  background: var(--bg-brand-primary);
}

/* 限寬層：文字內容對齊 1600px */
.kv-banner__inner {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  position: relative;
  z-index: calc(var(--z-index-base) + 1);
  box-sizing: border-box;
}


.kv-banner__slide::before {
  content: '';
  position: absolute;
  right: -260px;
  bottom: -20px;
  width: 530px;
  height: 530px;
  background-image: var(--kv-img-square-2);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  pointer-events: none;
  z-index: calc(var(--z-index-base) + 1);

  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.kv-banner__slide.ui-motion--active::before {
  opacity: 0.85;
  transform: translateX(0);
}

.kv-banner__slide .kv-banner__media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -35%;
  width: 100%;
  height: 100%;
  max-height: 370px;
  aspect-ratio: 78 / 37;
  background-image: var(--kv-img-square);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  pointer-events: none;
  z-index: calc(var(--z-index-base) * -1);

  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.kv-banner__slide .kv-banner__media.ui-motion--active::after {
  opacity: 1;
  transform: translateX(0);
}

.kv-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  padding-top: var(--kv-banner-inset-top);
  width: 48%;
  max-width: 740px;
  position: relative;
  z-index: var(--z-index-base);
}


.kv-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}

/* ===== 整區可點擊（Whole-slide clickable link）=====
   由 UIKVBanner.js 依每張 slide 的 primary 按鈕（標準版 .ui-btn--primary、
   compact 版 .ui-textlink）href 注入覆蓋連結，使整個 KV 區域可點擊並
   連到 primary 目的地。原理：
   - 覆蓋連結蓋滿整張 slide，位於素材與內容之下、按鈕之上。
   - 內容層（.kv-banner__inner）對指標透明，僅按鈕本身重新啟用互動，因此
     Hover / 點擊整區只作用於覆蓋連結（不會誤觸 primary hover），而 primary /
     secondary / textlink 各自的 hover 與連結維持正常。
   - 拖曳輪播由 Swiper 接管，其 preventClicks 會抑制拖曳後的誤觸。 */
.kv-banner__overlay-link {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-index-base) + 1);
}

.ui-kv-banner .kv-banner__inner {
  pointer-events: none;
}

.kv-banner__actions .ui-btn,
.kv-banner__actions .ui-textlink {
  pointer-events: auto;
}

.kv-banner__media {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56%;
  z-index: var(--z-index-base);
}

.kv-banner__media-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.kv-banner__media--image .kv-banner__media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- 影片變體 --- */
.kv-banner__media--video .kv-banner__media-inner video,
.kv-banner__media--video .kv-banner__media-inner iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

/* ========== mask-image 版（修飾 class: kv-banner__media--mask）========== */
.kv-banner__media--mask .kv-banner__media-inner {
  -webkit-mask-image: var(--kv-img-mask);
  mask-image: var(--kv-img-mask);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.controls-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;
  width: 100%;
  max-width: 1600px;
  box-sizing: border-box;
  display: flex;
  gap: var(--space-inline-sm);
  z-index: var(--z-index-carousel);
}

.ui-kv-banner .swiper-button-prev,
.ui-kv-banner .swiper-button-next {
  left: 0 !important;
  bottom: 0 !important;
  position: relative !important;
}

/* ========== RWD ========== */


@media (max-width: 1600px) {

  .kv-banner__content,
  .ui-kv-banner .controls-wrap {
    padding-left: var(--space-inset-xl);
    box-sizing: border-box;
  }

}

@media (max-width: 1440px) {
  .kv-banner__slide .kv-banner__media::after {
    left: -45%;
  }
}

@media (max-width: 1024px) {
  .kv-banner__content {
    padding: var(--space-inset-xl) var(--space-inset-xl) 0 var(--space-inset-xl);
    height: 260px;
    width: 100%;
    max-width: initial;
  }

  .kv-banner__content,
  .ui-kv-banner .controls-wrap {
    bottom: 15px;
  }


  .kv-banner__slide {
    min-height: unset;
    flex-direction: column;
  }

  .kv-banner__inner {
    flex-direction: column;
  }

  .kv-banner__media {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    padding: var(--space-inset-lg) var(--space-inset-xl) var(--kv-banner-inset-bottom) var(--space-inset-xl);
    box-sizing: border-box;
  }

  .ui-kv-banner--compact .kv-banner__content {
    height: 170px;
  }

  .ui-kv-banner--compact .kv-banner__media {
    width: 100%;
    aspect-ratio: 22 / 10;
  }
  .ui-kv-banner--functional .kv-banner__media{
    padding:0;
  }

  .kv-banner__media--mask .kv-banner__media-inner {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .kv-banner__media--mask .kv-banner__media-inner img,
  .kv-banner__media--video .kv-banner__media-inner video,
  .kv-banner__media--video .kv-banner__media-inner iframe {
    border-radius: var(--radius-surface);
  }

  /* ── 偽元素：裝飾 Blob（::before）────────────────────────────
     僅調整尺寸與位置；transform 動畫由 base + ui-motion--active 控制，
     此處絕對不可覆蓋 transform，否則 transition 動畫會失效。
  ──────────────────────────────────────────────────────────── */

  .kv-banner__slide .kv-banner__media::after {
    left: -70px;
    background-image: var(--kv-img-square-3);
  }

  .kv-banner__slide::before {
    width: 45%;
    height: 45%;
    right: -22%;
    top: 28%;
    background-image: var(--kv-img-square-5);
  }

  .ui-kv-banner--compact .kv-banner__slide::before {
    width: 35%;
    height: 35%;
    right: -15%;
    top: 17%;
  }

}

/* ≤ 768px */
@media (max-width: 768px) {
  .kv-banner__content {
    padding: var(--space-inset-xl) var(--space-inset-lg) 0 var(--space-inset-lg);
    height: 240px;
  }

  .ui-kv-banner--compact .kv-banner__content {
    height: 140px;
  }

  .kv-banner__content,
  .ui-kv-banner .controls-wrap {
    bottom: 8px;
    padding-left: var(--space-inset-lg);
  }

  .ui-kv-banner .controls-wrap {
    justify-content: flex-end;
    padding-right: var(--space-inset-lg);
  }

  .kv-banner__media {
    padding: var(--space-inset-lg) var(--space-inset-lg) var(--kv-banner-inset-bottom-compact) var(--space-inset-lg);
  }

}

/* ≤ 580px */
@media (max-width: 580px) {
  .kv-banner__media {
    padding: var(--space-inset-md) var(--space-inset-lg) var(--kv-banner-inset-bottom) var(--space-inset-lg);
    aspect-ratio: 16 / 9;
  }

  .kv-banner__actions {
    width: 100%;
  }

  .kv-banner__actions .ui-btn:only-child {
    width: fit-content;
  }
    .kv-banner__media--mask .kv-banner__media-inner img,
  .kv-banner__media--video .kv-banner__media-inner video,
  .kv-banner__media--video .kv-banner__media-inner iframe {
    border-radius: var(--radius-component);
  }
}

@media (max-width: 480px) {
  .kv-banner__content {
    height: 280px;
  }
}


/* ============================================================
   KV Banner — Functional 變體（支援頁 "How can we help?" 搜尋型）
   僅作用於 .ui-kv-banner--functional，重用既有變數與 KV 基礎樣式，
   不新增獨立 class、不影響標準／compact 版。
   ============================================================ */

.ui-kv-banner--functional {
  border-bottom: none;
  background: var(--bg-brand-deep);
}

/* 素材鋪滿整區當背景，內容單欄置中疊上 */
.ui-kv-banner--functional .kv-banner__inner {
  max-width: none;
  flex-direction: column;
  align-items: center;
  padding: var(--space-section) 0;
  /* 覆寫「整區可點擊」功能對 .kv-banner__inner 設的 pointer-events:none，
     讓 Functional 版的輸入框與連結可正常互動 */
  pointer-events: auto;
}

.ui-kv-banner--functional .kv-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ui-kv-banner--functional .kv-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 內容置中；改 block + text-align 讓行內連結自然排成一列 */
.ui-kv-banner--functional .kv-banner__content {
  display: block;
  width: 100%;
  height: auto;
  max-width: 820px;
  padding-top: 0;
  text-align: center;
  color: var(--color-text-inverse);
  z-index: calc(var(--z-index-base) + 1);
}

.ui-kv-banner--functional .item__title {
  color: var(--color-text-inverse);
  margin-bottom: var(--space-stack-lg);
}

/* AI 對話輸入框：置中並限制寬度，工具列文字靠左對齊 */
.ui-kv-banner--functional .ui-input-panel {
  margin: 0 auto var(--space-stack-md);
  text-align: left;
}
@media (max-width: 1024px){
.ui-kv-banner--functional .kv-banner__inner {
  padding: var(--kv-banner-inset-top) 0;
}
}

@media (max-width: 580px){
.ui-kv-banner--functional .kv-banner__inner {
  padding: var(--space-inset-lg) 0;
}
}



/*-------------------------------
  Swiper - btn Style 
---------------------------------*/

.swiper-button-prev i::before,
.swiper-button-next i::before {
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  font-size: 26px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  text-align: center;
  padding: 0;
  border: 2px solid var(--color-text-primary);
  background:var(--color-white);
}

.swiper-button-prev:hover i::before,
.swiper-button-next:hover i::before {
  color: var(--color-text-inverse);
  border: 2px solid var(--color-text-primary);
  background: var(--bg-brand-primary);
}


.swiper-button-prev i,
.swiper-button-next i {
  font-size: 26px;
}

.swiper-button-prev i.swiper-button-disabled::before,
.swiper-button-next i.swiper-button-disabled::before {
  background: var(--color-text-disabled);
  color: var(--color-white);
}

/* ========== Swiper 元件載入中骨架屏（Skeleton） ==========
   在 Swiper JS 執行 new Swiper() 之前，個別 slide 還沒被指定 Swiper 計算出來的
   實際寬度（例如 Card Carousel 一次顯示 4 張時，每張應該是 25% 寬），此時
   `.swiper-slide.ui-card { width: 100% }` 這條規則會讓每張卡片暫時撐成整個
   容器的寬度，裡面等比例縮放的圖片跟著被拉得極高（實測 Card Carousel 骨架屏
   一度高達 820px）。

   修法：在容器本身（而非 .swiper-wrapper）設定固定 `height` + `overflow:
   hidden`，直接把這個暫時性的異常高度「裁掉」，不需要理解或修正底層 flex
   寬度計算的細節。骨架屏疊加層（::before）蓋在裁切後的區域上；等 Swiper 自己
   在 init() 完成後加上 `.swiper-initialized` class，這條高度限制就解除，交還
   給 Swiper 計算出的正常高度。 */
.ui-carousel-card:not(.swiper-initialized),
.ui-carousel-offset:not(.swiper-initialized),
.ui-carousel-focus:not(.swiper-initialized),
.kv-banner-swiper:not(.swiper-initialized) {
  height: 320px;
  overflow: hidden;
  position: relative; /* 骨架屏疊加層的定位基準；Swiper 自己的 CSS 之後也會設，這裡先確保載入前就有 */
}

.ui-carousel-focus:not(.swiper-initialized) { height: 420px; }
.kv-banner-swiper:not(.swiper-initialized) { height: 650px; }
.ui-kv-banner--compact .kv-banner-swiper:not(.swiper-initialized) { height: 300px; }

/* Card 系列（Card Carousel / Card Offset）骨架屏用圓角呼應卡片本身的圓角觀感；
   KV Banner／Carousel Focus 維持原本的直角，不在此加上圓角。 */
.ui-carousel-card:not(.swiper-initialized),
.ui-carousel-offset:not(.swiper-initialized) {
  border-radius: var(--radius-component);
}

/* Card 系列骨架屏分隔線的「一張卡片寬度＋卡片間距」，對應各自 JS 檔案實際設定
   的 RWD 斷點，讓分隔線數量／間距貼近畫面稍後真正會出現的卡片數，而不是憑感
   覺喬一個好看的比例。之後若調整 slidesPerView / spaceBetween，記得同步這裡。
   - Card Carousel：斷點與數字取自 js/carousel/UICarouselCard.js 的 breakpoints
     （slidesPerView 1 / 2 / 3 / 4，spaceBetween 15 / 20 / 20 / 24）。
   - Card Offset：slidesPerView 是 'auto'，實際卡片寬度由本檔案下方
     `.ui-carousel-offset .swiper-slide.ui-card` 的 75% / 45% / 35% 決定，這裡
     直接沿用同一組數字，斷點也對應 js/carousel/UICarouselOffset.js。 */
.ui-carousel-card:not(.swiper-initialized) {
  --skel-card-w: 100%;
  --skel-gap: 15px;
}
@media (min-width: 768px) {
  .ui-carousel-card:not(.swiper-initialized) { --skel-card-w: 50%; --skel-gap: 20px; }
}
@media (min-width: 960px) {
  .ui-carousel-card:not(.swiper-initialized) { --skel-card-w: 33.3333%; --skel-gap: 20px; }
}
@media (min-width: 1200px) {
  .ui-carousel-card:not(.swiper-initialized) { --skel-card-w: 25%; --skel-gap: 24px; }
}

.ui-carousel-offset:not(.swiper-initialized) {
  --skel-card-w: 75%;
  --skel-gap: 15px;
}
@media (min-width: 768px) {
  .ui-carousel-offset:not(.swiper-initialized) { --skel-card-w: 45%; --skel-gap: 15px; }
}
@media (min-width: 992px) {
  .ui-carousel-offset:not(.swiper-initialized) { --skel-card-w: 35%; --skel-gap: 20px; }
}

.ui-carousel-card:not(.swiper-initialized)::before,
.ui-carousel-offset:not(.swiper-initialized)::before,
.ui-carousel-focus:not(.swiper-initialized)::before,
.kv-banner-swiper:not(.swiper-initialized)::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Must sit above KV Banner's own content stack (.kv-banner__inner /
     .kv-banner__overlay-link both use --z-index-base + 1) or its heading and
     buttons show through the shimmer instead of being covered by it. */
  z-index: calc(var(--z-index-base) + 2);
  background: linear-gradient(100deg, var(--color-grey-100) 30%, var(--color-grey-200) 45%, var(--color-grey-100) 60%);
  background-size: 250% 100%;
  animation: ui-skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Card 系列（Card Carousel / Card Offset）本質上是「一排卡片」，疊加第二層
   固定不動的分隔線圖樣，暗示「這裡即將出現多張卡片」；分隔線本身不參與位移
   動畫，只有最上面那層 shimmer 光澤會滑動過去，避免分隔線跟著亂跑變成一條
   會移動的怪異縫隙。 */
.ui-carousel-card:not(.swiper-initialized)::before,
.ui-carousel-offset:not(.swiper-initialized)::before {
  background-image:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%),
    repeating-linear-gradient(90deg,
      var(--color-grey-200) 0, var(--color-grey-200) var(--skel-card-w),
      var(--color-grey-100) var(--skel-card-w), var(--color-grey-100) calc(var(--skel-card-w) + var(--skel-gap)));
  background-size: 250% 100%, 100% 100%;
  animation: ui-skeleton-shimmer-cards 1.6s ease-in-out infinite;
}

@keyframes ui-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

@keyframes ui-skeleton-shimmer-cards {
  0%   { background-position: 200% 0, 0 0; }
  100% { background-position: -50% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-carousel-card:not(.swiper-initialized)::before,
  .ui-carousel-offset:not(.swiper-initialized)::before,
  .ui-carousel-focus:not(.swiper-initialized)::before,
  .kv-banner-swiper:not(.swiper-initialized)::before {
    animation: none;
  }
}

/* ========== Carousel 共用 ========== */

/* Card Carousel */
  .swiper {
    overflow: hidden;
    width: 100%;
    /*padding-bottom: var(--space-inset-lg);*/
  }

  /* Swiper Wrapper 確保高度自適應 */
  .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  /* Swiper Slide 合併 ui-card 樣式 */
  .swiper-slide.ui-card {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* 確保容器正常流向 */
  .swiper-wrapper .swiper-slide {
    flex-shrink: 0;
  }
  .swiper-button-prev,  .swiper-button-next {
    left: 0 !important;
    bottom: 0 !important;
    position: relative !important;
  }

/* Offset Carousel  */


  /* Swiper 容器允許溢出顯示 */
  .ui-carousel-offset {
    overflow: visible;
    width: 100%;
  }

  /* Swiper Wrapper */
  .ui-carousel-offset .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  /* 卡片適應 Slide - 合併樣式 */
  .ui-carousel-offset .swiper-slide.ui-card {
    width: 35%;
    flex-shrink: 0;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets {
    bottom: var(--swiper-pagination-bottom, 0px);
  }
  /* RWD 斷點 */
  @media (max-width: 991px) {
    .ui-carousel-offset .swiper-slide.ui-card {
      width: 45%;
    }
  }

  @media (max-width: 767px) {
    .ui-carousel-offset .swiper-slide.ui-card {
      width: 75%;
    }
  }

/* buttons top-right */

/* 讓 .row 成為箭頭定位基準 */
.container-limited .row:has(.ui-carousel-card) {
  position: relative;
}

/* 為按鈕預留頂部空間 */
.container-limited .row:has(.ui-carousel-card) .ui-carousel {
  padding-top: 56px;
}

/* 隱藏 ui-carousel-card 的分頁圓點 */
.ui-carousel-card .swiper-pagination {
  display: none;
}

/* ui-carousel-card 取消多餘的 padding-bottom */
.ui-carousel-card {
  padding-bottom: 0 !important;
}

/*  Focus Effect */
.ui-carousel .swiper.ui-carousel-focus {
  width: 100%;
  overflow: hidden;
}

.ui-carousel .ui-carousel-focus .swiper-wrapper {
  align-items: stretch;
}

.ui-carousel .ui-carousel-focus .ui-carousel__item {
  width: 860px;              
  height: auto;
  transition: transform .4s ease, opacity .4s ease;
}
.ui-carousel .ui-carousel-focus .ui-carousel__body {
	display:none;
}
.item__image {
  position: relative;
  overflow: hidden;
}

.ui-carousel .ui-carousel-focus .ui-carousel__item .item__image::after {
  content: '';
  position: absolute;
  inset: 0; 
  background: rgba(0, 0, 0, 0.75); 
  pointer-events: none; 
  border-radius: var(--radius-component);	
}
.ui-carousel .ui-carousel-focus .ui-carousel__inner{
  transform: scale(0.83);
  transform-origin: center;
  transition: transform .4s ease, opacity .4s ease;
  opacity: 1;
}

.ui-carousel .ui-carousel-focus .swiper-slide-active .ui-carousel__inner{
  transform: scale(1);
  opacity: 1;
}
.ui-carousel .ui-carousel-focus .swiper-slide-active .ui-carousel__body {
	display:flex;
	padding: var(--space-inset-md) 0;
	gap: var(--space-inline-lg);
  justify-content: space-between;
}
.ui-carousel__body .ui-carousel__content {
 width: 78%;
}
.ui-carousel .ui-carousel-focus .ui-carousel__item.swiper-slide-active .item__image::after {
  content: none;
}  
	
/* ui-carousel 根容器：定位基準 + overflow 控制 */
.ui-carousel {
  position: relative;
  overflow: hidden;
}


/* 為 offset 按鈕預留頂部空間（.ui-split__secondary.ui-carousel 已是 position:relative） */
.ui-carousel:has(.ui-carousel-offset) {
  padding-top: 56px;
}

/* 隱藏 offset swiper 的分頁圓點 */
.ui-carousel-offset .swiper-pagination {
  display: none;
}

/* offset swiper 取消多餘的 padding-bottom */
.ui-carousel-offset {
  padding-bottom: 0 !important;
}

.ui-carousel .controls-wrap {
  justify-content: flex-end;
  top: 25px;
  bottom: auto;
}

@media (max-width: 820px) {
  .ui-carousel .ui-carousel-focus .ui-carousel__item {
    width: 100%;
  }
  .ui-carousel .ui-carousel-focus .ui-carousel__inner {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
  .ui-carousel .ui-carousel-focus .ui-carousel__item .item__image::after {
    content: none !important;
  }
  .ui-carousel .ui-carousel-focus .ui-carousel__body {
    display: flex !important;
    padding: var(--space-inset-md) 0;
    gap: var(--space-inline-lg);
  }
}

@media (max-width: 768px) {
  .ui-carousel .ui-carousel-focus .ui-carousel__item {
    padding-top: 50px;
  }
  .ui-carousel .controls-wrap {
    top:20px;
  }
  .ui-carousel .ui-carousel-focus .swiper-slide-active .ui-carousel__body {
    flex-direction: column;
  }
}


/* =========================
	 ui-table
============================ */

.ui-table {
  --table-header-bg: var(--color-brand-blue-800);
  --table-header-text: var(--color-text-inverse);
  --table-first-column-bg: var(--color-grey-200);
  --table-parent-row-bg: var(--color-grey-200);
  /* Collapsible trigger row  */
  --table-striped-bg: rgb(from var(--color-grey-200) r g b / 0.2);
  /* Striped */
  --table-hover-bg: var(--color-grey-300);

  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-surface-soft);
  border-radius: var(--radius-component);
}


.bg-brand-light .ui-table,
.bg-surface-soft .ui-table {
  background: var(--bg-surface);
}

/* sticky-header showcase viewport (not part of module) */
.ui-table-viewport {
  height: 360px;
}

.ui-table-viewport>.ui-table {
  height: 100%;
}

.ui-table>table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.ui-table th,
.ui-table td {
  padding: var(--space-inset-xs) var(--space-inset-md);
  line-height: var(--line-height-base);
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid var(--color-grey-300);
  white-space: nowrap;
}

.ui-table thead th {
  font-weight: var(--font-weight-medium);
  background: var(--table-header-bg);
  color: var(--table-header-text);
  border-bottom: 1px solid var(--color-grey-300);
}

.ui-table tbody tr:last-child th,
.ui-table tbody tr:last-child td,
.ui-table tbody tr:first-child th[rowspan] {
  border-bottom: none;
}

.ui-table tbody th[scope="row"] {
  font-weight: var(--font-weight-medium);
}


/* ui-table--striped */

.ui-table--striped tbody tr:nth-child(odd)>th,
.ui-table--striped tbody tr:nth-child(odd)>td {
  background: var(--table-striped-bg);
}

/* ui-table--sticky-header */

.ui-table--sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-index-base) + 1);
}

/* ui-table--sticky-column */

.ui-table--sticky-column th:first-child,
.ui-table--sticky-column td:first-child {
  position: sticky;
  left: 0;
  z-index: var(--z-index-base);
  background: var(--table-first-column-bg) !important;
}

.ui-table--sticky-column thead th:first-child {
  z-index: calc(var(--z-index-base) + 2);
  background: var(--table-header-bg) !important;

}

/* ui-table--collapsible - CSS only via checkbox state */

.ui-table--collapsible {
  position: relative;
}

/* Prevent column reflow when details expand */
.ui-table--collapsible>table {
  width: 100%;
  table-layout: fixed;
}

.ui-table__state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-table--collapsible .ui-table__row--detail>th,
.ui-table--collapsible .ui-table__row--detail>td {
  padding: 0 var(--space-inset-xs);
  font-size: 0;
  line-height: 0;
  color: transparent;
  border-bottom-width: 0;
  border-bottom-color: transparent;
  transition: padding 220ms ease, font-size 220ms ease, line-height 220ms ease, color 180ms ease, border-bottom-color 220ms ease, border-bottom-width 220ms ease;
}

.ui-table--collapsible .ui-table__row--detail>td {
  white-space: normal;
}

/* Expand (scales to any number of groups) */
.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>th,
.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>td {
  padding: var(--space-inset-xs) var(--space-inset-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border-bottom-width: 1px;
  border-bottom-color: var(--color-grey-300);
}

.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>th {
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
}

.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>td {
  color: var(--color-text-default);
}

.ui-table--collapsible .ui-table__row--summary>th,
.ui-table--collapsible .ui-table__row--summary>td {
  background: var(--table-parent-row-bg);
  border-bottom-color: var(--color-grey-400);
}

/* Make the whole summary row clickable */
.ui-table--collapsible .ui-table__row--summary>th,
.ui-table--collapsible .ui-table__row--summary>td {
  padding: 0;
}

/* Prevent column compression on narrow screens; .ui-table's overflow-x: auto handles scroll */
.ui-table--collapsible table {
  min-width: 480px;
}

.ui-table--collapsible .ui-table__row--summary label {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100%;
  padding: var(--space-inset-xs) var(--space-inset-md);
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.ui-table--collapsible .ui-table__summary-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

.ui-table--collapsible .ui-table__summary-inner>.ui-table__toggle {
  flex: 1;
}

.ui-table__toggle-cell {
  gap: 0;
}


.ui-table__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-sm);
  cursor: pointer;
  user-select: none;
}

.ui-table__chevron {
  display: inline-block;
  position: relative;

}

.ui-table__chevron::after {
  content: "\f107";
  font-family: "Font Awesome 6 Pro";
  font-size: 18px;
  font-weight: bold;
  margin-left: var(--space-inline-sm);
  display: inline-block;
  transition: transform 180ms ease;
  transform: rotate(0deg);
}

.ui-table--collapsible .ui-table__group:has(.ui-table__state:checked) .ui-table__chevron::after {
  transform: rotate(-180deg);
}

/* ----------------------------
	 ui-table--collapsible-default-open (optional)
	 - Opt-in behavior: groups are expanded by default
	 - Keeps existing .ui-table--collapsible behavior unchanged
------------------------------- */

.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__row--detail>th,
.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__row--detail>td {
  padding: var(--space-inset-xs) var(--space-inset-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border-bottom-width: 1px;
  border-bottom-color: var(--color-grey-300);
}

.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__row--detail>th {
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
}

.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__row--detail>td {
  color: var(--color-text-default);
}

/* In this variant, checked means collapsed */
.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>th,
.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__group:has(.ui-table__state:checked) .ui-table__row--detail>td {
  padding: 0 var(--space-inset-xs);
  font-size: 0;
  line-height: 0;
  color: transparent;
  border-bottom-width: 0;
  border-bottom-color: transparent;
}

/* Chevron points down when collapsed */
.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__chevron::after {
  transform: rotate(-180deg);
}

.ui-table--collapsible.ui-table--collapsible-default-open .ui-table__group:has(.ui-table__state:checked) .ui-table__chevron::after {
  transform: rotate(0deg);
}


/* =========================
	 ui-modal
============================ */

/* Prevent background scroll when any modal is open.
   --scrollbar-width is set by UIModal.js before adding this class
   to compensate for the scrollbar disappearing and prevent layout shift. */
body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

.ui-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  background-color: rgba(0, 0, 0, 0);
  align-items: flex-start;
  justify-content: center;
  padding: var(--modal-inset-y) var(--space-inset-md);
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  overflow-y: auto;
}

.ui-modal.is-open {
  display: flex;
  background-color: rgba(0, 0, 0, 0.7);
}

.ui-modal__dialog {
  position: relative;
  width: 100%;
  background-color: var(--bg-surface);
  border-radius: var(--radius-component);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ui-modal.is-open .ui-modal__dialog {
  opacity: 1;
  transform: translateY(0);
}

/* 尺寸修飾 class 置於第一層容器 */
.ui-modal--xl .ui-modal__dialog {
  max-width: 1600px;
}

.ui-modal--lg .ui-modal__dialog {
  max-width: 1200px;
}

.ui-modal--md .ui-modal__dialog {
  max-width: 960px;
}

.ui-modal--sm .ui-modal__dialog {
  max-width: 500px;
}

.ui-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-inline-sm);
  padding: var(--space-inset-md);
  background-color: var(--bg-surface-soft);
}


.ui-modal__close {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-modal__close i {
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.2s ease;
}

.ui-modal__body {
  padding: var(--space-inset-md);
}


.ui-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-inline-sm);
  padding: var(--space-inset-md);
}

/* --- Sticky Variant (Header / Footer 固定，對話框主體捲動) --- */
.ui-modal--sticky {
  overflow: hidden; /* 防止外層滾動 */
}

.ui-modal--sticky .ui-modal__dialog {
  max-height: calc(100vh - (var(--modal-inset-y) * 2));
  display: flex;
  flex-direction: column;
}

.ui-modal--sticky .ui-modal__header,
.ui-modal--sticky .ui-modal__footer {
  flex-shrink: 0;
}

.ui-modal--sticky .ui-modal__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* 確保 Flexbox 內可正確滾動 */
}

@media (max-width: 580px) {
  .ui-modal {
    align-items: flex-start;
  }

  .ui-modal__footer {
    flex-direction: column;
  }

  .ui-modal__footer .ui-btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================
	 ui-loading
============================ */
/*
  使用方式：
    區塊用：element.classList.add('is-loading')
    整頁用：document.body.classList.add('is-loading--fullpage')
  JS 會自動在容器內注入 .ui-loading__overlay
*/

/* 區塊用：讓容器成為 overlay 的定位基準 */
.is-loading {
  position: relative;
}

/* 整頁用：防止 body 捲動 */
.is-loading--fullpage {
  overflow: hidden;
}

/* JS 注入的覆蓋層 */
.ui-loading__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-index-sticky-header);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: inherit;
}

/* 整頁版覆蓋層改用 fixed */
.is-loading--fullpage > .ui-loading__overlay {
  position: fixed;
  z-index: var(--z-index-overlay);
  border-radius: 0;
}

.ui-loading__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ui-loading__dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-blue-900);
  animation: ui-loading-bounce 1.4s ease-in-out infinite both;
}

.ui-loading__dot:nth-child(1) { animation-delay: -0.32s; }
.ui-loading__dot:nth-child(2) { animation-delay: -0.16s; }
.ui-loading__dot:nth-child(3) { animation-delay: 0s; }

@keyframes ui-loading-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40%            { transform: scale(1); opacity: 1;   }
}


/* =========================
   Form Elements
============================ */

/* --------- ui-input --------- */
.ui-input {
  display: block;
  width: 100%;
  padding: var(--space-inset-xs);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-default);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-element);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.ui-input::placeholder {
  color: var(--color-text-disabled);
}

.ui-input:focus {
  outline: none;
}

.ui-input:disabled {
  background: var(--bg-surface-soft);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* --------- ui-textarea --------- */
.ui-textarea {
  display: block;
  width: 100%;
  padding: var(--space-inset-xs);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-default);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-element);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
}

.ui-textarea::placeholder {
  color: var(--color-text-disabled);
}

.ui-textarea:focus {
  outline: none;
}

.ui-textarea:disabled {
  background: var(--bg-surface-soft);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  resize: none;
}

/* --------- ui-input-panel（AI 對話輸入框） --------- */
/* 可重用元件：上方沿用 .ui-textarea 當輸入區，下方工具列左側放次要動作
   （新增附件），右側放主要動作（送出）。 */
.ui-input-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-xs);
  width: 100%;
  padding: var(--space-inset-md);
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-component);
  box-sizing: border-box;
}

/* 面板內的 textarea：去邊框、透明底、不可縮放 */
.ui-input-panel .ui-textarea {
  min-height: 60px;
  padding: 0;
  background: transparent;
  border: none;
  resize: none;
}

/* 前置圖示 + textarea 排成一列，讓 placeholder 往後留出 icon 位置 */
.ui-input-panel__field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-inline-sm);
}

.ui-input-panel__field .ui-textarea {
  width: calc(100% - 50px);
  min-width: 0;
}

/* 前置 AI 圖示（品牌漸層） */
.ui-input-panel__lead-icon {
  flex-shrink: 0;
  font-size: 22px;
  color: transparent;
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ui-input-panel__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-inline-sm);
}

/* 圓形圖示按鈕 */
.ui-input-panel__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-default);
  background: var(--bg-surface-soft);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease;
}

.ui-input-panel__action:hover,
.ui-input-panel__action:focus-visible {
  background: var(--color-border);
}

/* 送出：品牌實心 */
.ui-input-panel__action--send {
  color: var(--color-text-inverse);
  background: var(--color-brand-blue-600);
}

.ui-input-panel__action--send:hover,
.ui-input-panel__action--send:focus-visible {
  color: var(--color-text-inverse);
  background: var(--color-brand-blue-900);
}

/* --------- ui-field --------- */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-2xs);
}

.ui-field__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
  line-height: var(--line-height-base);
}

.ui-field.is-disabled .ui-field__label {
  color: var(--color-text-disabled);
}

/* --------- ui-field-group --------- */
.ui-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
}

.ui-field-group.ui-field-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-inline-lg);
}

.ui-field-group.ui-field-group--inline > .ui-field {
  flex: 1;
  min-width: 0;
}

/* === Rating === */

.ui-rating {
    display: flex;
    align-items: center;
    gap : var(--space-inline-sm);
    padding-top: var(--space-inset-xs);
}

.ui-rating__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color:var(--bg-brand-light);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

.ui-rating__item i {
    font-size: 20px ;
    line-height: 1;
}

.ui-rating__item:hover,
.ui-rating__item.is-active {
    color:var(--bg-brand-primary);
}

.ui-rating__item:active {
    transform: scale(.9);
}

.ui-rating__item:focus-visible {
    outline: 2px solid var(--color-brand-blue-500);
    outline-offset: 3px;
    border-radius: 4px;
}

.ui-rating--readonly .ui-rating__item {
    cursor: default;
    pointer-events: none;
}

.ui-rating--disabled {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 768px) {
  .ui-field-group.ui-field-group--inline {
    flex-direction: column;
  }
}

/* --------- ui-input-group --------- */
.ui-input-group {
  display: flex;
  align-items: stretch;
}

.ui-input-group .ui-input {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-element) 0 0 var(--radius-element);
  border-right: none;
}

.ui-input-group__prepend {
  display: flex;
  align-items: center;
  padding: 0 0 0 var(--space-inset-xs);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-element) 0 0 var(--radius-element);
}

.ui-input-group__prepend i {
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ui-input-group__prepend + .ui-input {
  border-radius: 0;
  border-left: none;
}

.ui-input-group__clear {
  display: flex;
  align-items: center;
  padding: 0 var(--space-inset-xs);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-element) var(--radius-element) 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.3s ease;
}

.ui-input-group__clear:hover {
  color: var(--color-text-default);
}

.ui-input-group__toggle {
  display: flex;
  align-items: center;
  padding: 0 var(--space-inset-xs);
  background: var(--bg-surface-soft);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-element) var(--radius-element) 0;
  color: var(--color-text-default);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ui-input-group__toggle:hover {
  background-color: var(--color-border);
}

.ui-input-group__select {
  padding: 0 var(--space-inset-xs);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0 var(--radius-element) var(--radius-element) 0;
  color: var(--color-text-default);
  font-size: var(--font-size-base);
  cursor: pointer;
  outline: none;
}

.ui-input-group__select option {
  background: var(--color-white);
  color: var(--color-text-default);
}

.ui-input-group .ui-input:focus {
  box-shadow: none;
}

/* -- highlight variant -- */
.ui-input-group--highlight {
  
  border-radius: var(--radius-pill);
}

.ui-input-group--highlight .ui-input {
  border: 2px solid var(--bg-brand-secondary);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding-left: var(--space-inset-md);
}

.ui-input-group--highlight .ui-input:focus {
  box-shadow: none;
}

.ui-input-group--highlight .ui-btn {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.ui-input-group--highlight .ui-input-group__prepend {
  border: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.ui-input-group--highlight .ui-input-group__prepend + .ui-input {
  border: none;
  border-radius: 0;
}

.ui-input-group--highlight .ui-input-group__clear {
  border: none;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.ui-input-group--highlight .ui-input-group__select {
  border: none;
  border-left: 1px solid var(--color-border);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.ui-input-group--highlight .ui-input-group__toggle {
  border: none;
  border-left: 1px solid var(--color-border);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* --------- ui-select --------- */
.ui-select {
  display: block;
  width: 100%;
  padding: var(--space-inset-xs);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-default);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-element);
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.ui-select:focus {
  outline: none;
}

.ui-select:disabled {
  background: var(--bg-surface-soft);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* --------- ui-checkbox --------- */
.ui-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-inline-xs);
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}

.ui-checkbox:has(.ui-checkbox__input:disabled) {
  cursor: not-allowed;
}

.ui-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ui-checkbox__box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-element);
  background: var(--bg-surface);
  transition: all 0.2s ease;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
}

.ui-checkbox__box::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900;
  font-size: 12px;
  color: var(--color-white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
  line-height: 1;
}

.ui-checkbox__input:checked + .ui-checkbox__box {
  background: var(--color-brand-gradient);
  border-color: transparent;
  border: none;
}

.ui-checkbox__input:checked + .ui-checkbox__box::after {
  transform: translate(-50%, -50%) scale(1);
}

.ui-checkbox__input:focus-visible + .ui-checkbox__box {
  box-shadow: 0 0 0 3px var(--color-brand-blue-glow);
}

.ui-checkbox__input:disabled + .ui-checkbox__box {
  border-color: var(--color-grey-300);
}

.ui-checkbox__input:checked:disabled + .ui-checkbox__box {
  background: var(--color-brand-gradient);
  border-color: transparent;
  opacity: 0.5;
}

.ui-checkbox__input:disabled ~ .ui-checkbox__label {
  color: var(--color-text-disabled);
}

.ui-checkbox__label {
  color: var(--color-text-default);
}

/* --------- ui-radio --------- */
.ui-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-xs);
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}

.ui-radio:has(.ui-radio__input:disabled) {
  cursor: not-allowed;
}

.ui-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ui-radio__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-surface);
  transition: all 0.2s ease;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
}

.ui-radio__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand-gradient);
  transition: transform 0.15s ease;
}

.ui-radio__input:checked + .ui-radio__dot {
  background: var(--color-brand-gradient);
  border-color: transparent;
  border: none;
}

.ui-radio__input:checked + .ui-radio__dot::after {
  background: var(--color-white);
  transform: translate(-50%, -50%) scale(1);
}

.ui-radio__input:focus-visible + .ui-radio__dot {
  box-shadow: 0 0 0 3px var(--color-brand-blue-glow);
}

.ui-radio__input:disabled + .ui-radio__dot {
  border-color: var(--color-grey-300);
}

.ui-radio__input:checked:disabled + .ui-radio__dot {
  background: var(--color-brand-gradient);
  border-color: transparent;
  opacity: 0.5;
}

.ui-radio__input:disabled ~ .ui-radio__label {
  color: var(--color-text-disabled);
}

.ui-radio__label {
  color: var(--color-text-default);
}

/* --------- ui-tag --------- */
.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-sm);
  padding: 5px var(--space-inset-xs);
  color: var(--color-text-default);
  background: var(--color-white);
  border-radius: var(--radius-element);
  border: 1px solid var(--color-border);
  transition: color 0.3s ease;
  cursor: default;
}

.ui-tag:has(.ui-tag__remove) {
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    var(--color-brand-gradient) border-box;
  border-color: transparent;
}

/* -- clickable tag (a structure) -- */
a.ui-tag {
  cursor: pointer;
  text-decoration: none;
}

a.ui-tag:hover,
a.ui-tag:focus-visible {
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    var(--color-brand-gradient) border-box;
  border-color: transparent;
}

a.ui-tag--soft:hover,
a.ui-tag--soft:focus-visible {
  background:
    linear-gradient(var(--bg-brand-light), var(--bg-brand-light)) padding-box,
    var(--color-brand-gradient) border-box;
}

a.ui-tag--strong:hover,
a.ui-tag--strong:focus-visible {
  background:
    linear-gradient(var(--bg-brand-deep), var(--bg-brand-deep)) padding-box,
    var(--color-brand-gradient) border-box;
}

.ui-tag--soft {
  background: var(--bg-brand-light);
  color: var(--color-text-default);
}

.ui-tag--soft:has(.ui-tag__remove) {
  background:
    linear-gradient(var(--bg-brand-light), var(--bg-brand-light)) padding-box,
    var(--color-brand-gradient) border-box;
}

.ui-tag--strong {
  background: var(--bg-brand-deep);
  color: var(--color-text-inverse);
}

.ui-tag--strong:has(.ui-tag__remove) {
  background:
    linear-gradient(var(--bg-brand-deep), var(--bg-brand-deep)) padding-box,
    var(--color-brand-gradient) border-box;
}

.ui-tag__category {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.ui-tag--soft .ui-tag__category {
  color: var(--color-text-muted);
}

.ui-tag--strong .ui-tag__category {
  color: var(--color-grey-400);
}

.ui-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.ui-tag--soft .ui-tag__remove {
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ui-tag--strong .ui-tag__remove {
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -- ui-tag__text / ui-tag__name -- */
.ui-tag:has(.ui-tag__text) {
  max-width: 100%;
}

.ui-tag__text {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-inline-sm);
  flex: 1;
  min-width: 0;
  align-items: center;
}

.ui-tag__text .ui-tag__category,
.ui-tag__name {
  white-space: nowrap;
}

/* --------- ui-tag-group --------- */
.ui-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}

.ui-tag-group--vertical {
  flex-direction: column;
  align-items: flex-start;
}

/* --------- ui-badge --------- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 var(--space-inset-xs);
  font-size: 14px;
  color: var(--color-text-default);
  background: var(--color-white);
  border-radius: var(--radius-element);
  line-height: 1;
}

.ui-badge--soft {
  background: var(--bg-brand-mid);
  color: var(--color-text-default);
}

.ui-badge--strong {
  background: var(--bg-brand-deep);
  color: var(--color-text-inverse);
}

.ui-badge--success {
  background: var(--color-text-success);
  color: var(--color-text-inverse);
}

.ui-badge--error {
  background: var(--color-text-error);
  color: var(--color-text-inverse);
}

.ui-badge--warning {
  background: var(--color-text-warning);
  color: var(--color-text-default);
}

.ui-badge--muted {
  background: var(--color-text-muted);
  color: var(--color-text-inverse);
}

/*------------------------------
--------------------------------
   Alert
--------------------------------
-------------------------------*/

.ui-alert-group {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  width: min(550px, calc(100vw - var(--space-inset-md)));
}

.ui-alert-group--bottom-left {
  left: 30px;
  bottom: 30px;
}

.ui-alert-group--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-inline-lg);
  padding: var(--space-inset-md);
  border-radius: var(--radius-component);
  background: var(--bg-surface);
  box-shadow:0 1px 5px rgba(0,0,0,.2);
  box-sizing: border-box;
  min-width: 450px;
  animation: ui-alert-fade-in 1.8s var(--ui-reveal-easing) both;
}

@keyframes ui-alert-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Exit transition — UIAlert.js adds this before removing the element on close/auto-close.
   Fades out the same way ui-alert-fade-in fades in — no positional shift.
   animation: none is required — otherwise the still-attached ui-alert-fade-in
   animation (held at opacity:1 via fill-mode: both) keeps overriding opacity
   and this transition never actually runs, so transitionend never fires and
   UIAlert.js's close() never removes the element. */
.ui-alert.is-closing {
  animation: none;
  transition: opacity .3s var(--ui-reveal-easing);
  opacity: 0;
}

.ui-alert__icon {
  flex-shrink: 0;
  line-height: var(--line-height-tight); 
  font-size: 30px;
  color: transparent;
    background-image: var(--color-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}

.ui-alert__content {
  flex: 1;
  min-width: 0;
}

.ui-alert__content .item__title{
    margin-bottom: var(--space-stack-xs);
    font-weight: var(--font-weight-medium);
}

.ui-alert__actions {
  flex-shrink: 0;
  line-height: var(--line-height-base);
}

.ui-alert__close {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-alert__close i{
    color: var(--color-text-primary);
}

/* state */
.ui-alert--success .ui-alert__icon{
    color: var(--color-text-success);
    background-image: none;
}
.ui-alert--error .ui-alert__icon{
    color: var(--color-text-error);
    background-image: none;
}

@media (max-width: 768px) {
  /* 讓 group 以 left + right 撐滿，而非 width: 100% 造成溢出 */
  .ui-alert-group {
    width: auto;
  }

  .ui-alert {
    min-width: auto;
    padding: var(--space-inset-xs) var(--space-inset-md);
  }

  /* 靠下：各自保留 bottom 值，左右改為兩側等距滿版 */
  .ui-alert-group--bottom-left {
    right: var(--space-inset-md);
    left: var(--space-inset-md);
  }

  /* 置中：left/right 取代百分比定位，transform 只保留垂直位移 */
  .ui-alert-group--center {
    left: var(--space-inset-md);
    right: var(--space-inset-md);
    transform: translateY(-50%);
  }
}


/* ==========================
   Home Hero 
=========================== */

.ui-home-hero {
  position: relative;
  overflow: hidden;
}

.ui-home-hero__slide {
  position: relative;
  min-height: 800px;
}

/* Theme — dark（原深色款：品牌深色底 + 反白文字，維持既有樣式） */
.ui-home-hero__slide--dark {
  background: var(--bg-brand-deep);
  color: var(--color-text-inverse);
}

/* Theme — light（淺色款：按鈕與文字沿用 ui-kit 預設值，不另外覆寫） */
.ui-home-hero__slide--light {
  background: var(--bg-surface);
  color: var(--color-text-default);
}

.ui-home-hero__media {
  position: absolute;
  inset: 0;
}

.ui-home-hero__media img,
.ui-home-hero__media video,
.ui-home-hero__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Overlay */

.ui-home-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ui-home-hero__slide--dark .ui-home-hero__media::after {
  background:
    linear-gradient(
      90deg,
      rgba(15,47,85,.95) 0%,
      rgba(15,47,85,.85) 35%,
      rgba(15,47,85,.45) 60%,
      rgba(15,47,85,0) 85%
    );
}

.ui-home-hero__slide--light .ui-home-hero__media::after {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.85) 35%,
      rgba(255,255,255,.45) 60%,
      rgba(255,255,255,0) 85%
    );
}

/* Overlay — 下緣遮罩，讓底部 nav 文字好讀。跟上面左右遮罩分開一個偽元素
   （::before，原本沒用到），單純是關注點分離：高度只需蓋住 nav 所在的
   底部區域，不用跟左右遮罩一樣鋪滿整個 slide。顏色/深淺沿用左右遮罩同一
   組數值，讓兩層視覺上融合、看不出是疊出來的。 */
.ui-home-hero__media::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
}

.ui-home-hero__slide--dark .ui-home-hero__media::before {
  background: linear-gradient(180deg, rgba(15,47,85,0) 0%, rgba(15,47,85,.85) 100%);
}

.ui-home-hero__slide--light .ui-home-hero__media::before {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 100%);
}

/* Decorative — 左上角破格裝飾方塊（per-slide 偽元素，輪播時重播進場動畫，同 kv-banner） */

.ui-home-hero__slide::before,
.ui-home-hero__slide::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 15;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;

  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* 後方較大方塊（square01），破格至左上角外、先進場 */
.ui-home-hero__slide::before {
  top: -80px;
  left: -230px;
  width: 500px;
  height: 500px;
  background-image: url("css-img/home-hero-square01.png");
  transform: translate(-40px, -40px);
}

/* 前方較小方塊（square02），疊在後方方塊之上、稍後進場 */
.ui-home-hero__slide::after {
  top: -100px;
  left: -50px;
  width: 250px;
  height: 300px;
  background-image: url("css-img/home-hero-square02.png");
  transform: translate(-30px, -30px);
}

/* 進場：淡入並從左上角滑入定位；兩層加上時間差（同 kv-banner 的層次進場感） */
.ui-home-hero__slide.ui-motion--active::before {
  opacity: .4;
  transform: translate(0, 0);
}


.ui-home-hero__slide.ui-motion--active::after {
  opacity: 1;
  transform: translate(0, 0);
}

.ui-home-hero__slide.ui-motion--active::before {
  transition-delay: 0s;
}

.ui-home-hero__slide.ui-motion--active::after {
  transition-delay: 0.6s;
}

/* 淺色版：裝飾方塊在白底上過於搶眼，提高透明度（降低 opacity） */
.ui-home-hero__slide--light.ui-motion--active::before {
  opacity: .2;
}

.ui-home-hero__slide--light.ui-motion--active::after {
  opacity: .1;
}

/* Content */

.ui-home-hero__inner {
  position: relative;
  z-index: 20;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding-top: 80px;
}

.ui-home-hero__content {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
}

.ui-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}

/* Navigation */

.ui-home-hero__navigation {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 30;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  gap: var(--space-inline-md);
}

/* 圓形左右按鈕（沒用 ui-kit 全域 controls-wrap 樣式），桌機預設隱藏，
   小於 1200px 才顯示以取代進度導覽。 */
.ui-home-hero .controls-wrap {
  display: none;
}

/* Navigation 是整個 carousel 共用的區塊（在 swiper-wrapper 外層，不屬於任何單一
   slide），需另外加 --dark / --light 在 .ui-home-hero__navigation 容器上
   （非 per-slide）。 */
.ui-home-hero__navigation--dark {
  color: var(--color-text-inverse);
}

/* 淺色版：底部無反白遮罩，文字改用研華藍（--color-text-primary），
   避免白底上文字消失 */
.ui-home-hero__navigation--light {
  color: var(--color-text-primary);
}

.ui-home-hero-nav {
  flex: 1 1 clamp(160px, 20vw, 220px);
  min-width: 140px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.7;
}

.ui-home-hero-nav__progress {
  display: block;
  height: 5px;
  border-radius: 2px;
  overflow: hidden;
}

.ui-home-hero__navigation--dark .ui-home-hero-nav__progress {
  background: rgba(255,255,255,0.15);
}

/* 啟用中（父層 opacity:1）時，未填滿的軌道維持原本的半透明 */
.ui-home-hero__navigation--dark .ui-home-hero-nav.is-active .ui-home-hero-nav__progress {
  background: rgba(255,255,255,0.15);
}

.ui-home-hero__navigation--light .ui-home-hero-nav__progress {
  background: rgba(0,66,128,0.15);
}

.ui-home-hero__navigation--light .ui-home-hero-nav.is-active .ui-home-hero-nav__progress {
  background: rgba(0,66,128,0.08);
}

.ui-home-hero-nav__progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      var(--color-brand-blue-400),
      var(--color-brand-blue-500)
    );
}

.ui-home-hero__navigation--light .ui-home-hero-nav__progress-fill {
  background: var(--color-brand-gradient);
}

.ui-home-hero-nav__title {
  display: block;
  margin: 0;
  font-size: var(--font-size-h4); /* 18px — 改用 <p> 後補上原本 <h3> 的預設字級/字重 */
  font-weight: var(--font-weight-medium);
}



/* ===================================================
   Home Hero – Content Typography
=================================================== */

/* Override ui-kit.css line-clamp so hero titles display in full
   顏色不在此設定，由 .ui-home-hero__slide--dark / --light 的 color 往下繼承 */
.ui-home-hero .item__title {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}

/* ===================================================
   Home Hero – Navigation Typography
=================================================== */

.ui-home-hero-nav.is-active{
  opacity: 1;
}

/* ===================================================
   Home Hero – Progress Countdown
=================================================== */

/* 進度條寬度由 JS 透過 Swiper 的 autoplayTimeLeft 事件即時設定，
   與 autoplay 共用同一個時鐘，確保填滿與切換永遠同步。 */
.ui-home-hero-nav__progress-fill {
  transition: width 0.1s linear;
}

/* ===================================================
   Home Hero – RWD
=================================================== */

@media (max-width: 1600px) {
  .ui-home-hero__inner,
  .ui-home-hero .controls-wrap {
    padding-left: var(--space-inset-xl);
    box-sizing: border-box;
  }

  .ui-home-hero__navigation {
    padding-left: var(--space-inset-xl);
    padding-right: var(--space-inset-xl);
    box-sizing: border-box;
  }
}

@media (max-width: 1600px) {
  .ui-home-hero__slide {
    min-height: calc( 100vh - 100px);
 }
}
/* 小於 1200px：隱藏進度條與預覽文字導覽，改用圓形左右按鈕（同 kv-banner） */
@media (max-width: 1200px) {
  .ui-home-hero__slide {
    min-height: 600px;
  }

  .ui-home-hero__navigation {
    display: none;
  }

  .ui-home-hero .controls-wrap {
    display: flex;
  }
}

/* 小於 1024px：圖片進入流排版並移到下方、取消漸層遮罩，與內容垂直堆疊 */
@media (max-width: 1024px) {

  /* 後台文案長短不一，各 slide 內容量測後的高度不會完全一樣。
     --home-hero-mobile-h 由 JS 動態量測所有 slide 目前實際需要的高度
     （文字區 + 素材區）取最大值寫入，讓每張 slide 都撐到同一高度，
     避免較矮的 slide 露出下方容器底色、造成主題色套用的視覺落差。
     JS 還沒執行完成前 fallback 回 unset，維持原本隨內容變化的高度。 */
  .ui-home-hero__slide {
    min-height: var(--home-hero-mobile-h, unset);
    display: flex;
    flex-direction: column-reverse;
    /* column-reverse 下 flex-end 視覺上等於「靠上」，讓內容較少的 slide
       把留白留在下方，而不是整組（素材＋文字）被推到置中/偏下 */
    justify-content: flex-end;
  }

  /* 圓形切換鍵（.controls-wrap）是相對最外層 .ui-home-hero 定位、不屬於
     任何一張 slide，理論上兩者高度現在已經一致，但仍保留這層底色同步
     做保底（例如某張 slide 意外量測失準時的防呆）。
     直接把主題底色也畫在最外層容器上（由 JS 依目前 active slide 同步
     切換 --dark / --light class），底色跟按鈕永遠在同一個座標系。 */
  .ui-home-hero--dark {
    background: var(--bg-brand-deep);
  }

  .ui-home-hero--light {
    background: var(--bg-surface);
  }
   .ui-home-hero__slide::after{
    width: 200px;
    top: -80px;
   }
   .ui-home-hero__slide::before{
    width: 360px;
    left: -200px;
    top: -80px;
   }
  .ui-home-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 2 / 1;
    padding: var(--space-inset-lg) var(--space-inset-xl) var(--space-inset-md) var(--space-inset-xl);
    box-sizing: border-box;
  }
    .ui-home-hero .controls-wrap {
        bottom: 15px;
    }

  /* 圓角矩形範圍（同 kv-banner，使用 --radius-surface） */
  .ui-home-hero__media img,
  .ui-home-hero__media video,
  .ui-home-hero__media iframe{
    border-radius: var(--radius-surface);
  }

  /* 取消漸層遮罩，讓圖片清晰可見（此時 nav 已隱藏，底部遮罩也一併拿掉） */
  .ui-home-hero__media::after,
  .ui-home-hero__media::before {
    display: none;
  }

  .ui-home-hero__inner {
    padding: var(--space-inset-md) var(--space-inset-xl) var(--home-hero-inset-bottom) var(--space-inset-xl);
  }

  /* 上下排列後文字區全滿，並與圖片左右邊界對齊 */
  .ui-home-hero__content {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .ui-home-hero__content {
    max-width: 100%;
  }

  .ui-home-hero__media {
    aspect-ratio: 4 / 3;
    padding: var(--space-inset-lg) var(--space-inset-lg) var(--space-inset-md) var(--space-inset-lg);
  }
  .ui-home-hero__inner {
    padding: var(--space-inset-lg) var(--space-inset-lg) var(--home-hero-inset-bottom) var(--space-inset-lg);
  }
  .ui-home-hero .controls-wrap {
    justify-content: flex-end;
    padding-right: var(--space-inset-lg);
  }
}

@media (max-width: 580px) {
     .ui-home-hero__slide::after{
    width: 180px;
    top: -60px;
   }
   .ui-home-hero__slide::before{
    width: 310px;
    left: -180px;
    top: -60px;
   }
    .ui-home-hero__media img,
    .ui-home-hero__media video,
    .ui-home-hero__media iframe{
        border-radius: var(--radius-component);
    }

}

@media (max-width: 480px) {
     .ui-home-hero__slide::after{
    width: 150px;
    top: -50px;
   }
   .ui-home-hero__slide::before{
    width: 250px;
    left: -150px;
    top: -50px;
   }

}


/* ============================================================
   Option List — 篩選 / 導覽清單卡片
   ============================================================ */

.ui-option-list__title {
  padding-bottom: var(--space-inset-xs);
  margin-bottom: var(--space-stack-xs);
  color: var(--color-text-default);
  border-bottom: 2px solid transparent;
  border-image: var(--color-brand-gradient) 1;
}
.ui-option-list__toggle-icon{
  display: none;
}

/* Selected-value label — only ever shown <1024px (see media query below);
   at desktop the title always shows the static "Filter By" text instead. */
.ui-option-list__title-selected {
  display: none;
}

.ui-option-list__inner {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-option-list__item a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-inline-lg);
  padding: var(--space-inset-2xs) 0;
  align-items: center;
}

.ui-option-list__item.is-active a {
  font-weight: var(--font-weight-bold);
}

.ui-option-list__count {
  color: var(--color-text-muted);
}

/* < 1024px: title becomes a dropdown toggle; list floats over the page instead of pushing content down */
@media (max-width: 1024px) {
  .ui-option-list {
    position: relative;
  }

  .ui-option-list__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
    color: var(--color-text-primary);
  }

  .ui-option-list__toggle-icon {
    display: inline-block;
    transition: transform .2s ease;
    color: var(--color-text-primary);
  }

  .ui-option-list__title[aria-expanded="true"] .ui-option-list__toggle-icon {
    transform: rotate(180deg);
  }

  .ui-option-list__inner {
    display: none;
    position: absolute;
    top: 90%;
    left: 0;
    right: 0;
    margin-top: var(--space-stack-xs);
    z-index: var(--z-index-sticky-header);
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-component);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    padding: var(--space-inset-md);
  }

  .ui-option-list__title[aria-expanded="true"] + .ui-option-list__inner {
    display: block;
  }

  /* Once an item has been picked, swap the static "Filter By" label for the
     selected item's text — same pattern as a native <select>'s closed state. */
  .ui-option-list__title.has-selection .ui-option-list__title-text {
    display: none;
  }

  .ui-option-list__title.has-selection .ui-option-list__title-selected {
    display: inline;
  }
}

/*Chat panel*/
/*==========================================================
  ui-chat — Conversation Chatbox
==========================================================*/

/*-------------------------
  ui-chat（根容器：對話串 + 回覆區）
--------------------------*/
.ui-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  padding: var(--space-inset-lg);
  background: var(--bg-surface);
  border-radius: var(--radius-component);
  box-sizing: border-box;
}

/* 情境覆寫：卡進手風琴時，卡片外觀交給 ui-accordion__item，ui-chat 本身去殼 */
.ui-accordion__content .ui-chat {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/*-------------------------
  ui-chat__thread（訊息串）
--------------------------*/
.ui-chat__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

/* 超過高度時內部捲動（單獨版預設 380px） */
.ui-chat__thread--scroll {
  max-height: 380px;
  overflow-y: auto;
  padding-right: var(--space-inset-xs);
}

/* 手風琴情境：對話串略縮，避免展開後面板過長（可依需求調整） */
.ui-accordion__content .ui-chat__thread--scroll {
  max-height: 300px;
}

/*-------------------------
  ui-chat__message（單則訊息）
--------------------------*/
.ui-chat__message {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-xs);
}

/* sent：使用者本人，靠右 */
.ui-chat__message--sent {
  align-items: flex-end;
}

/* received：支援方 / AI，靠左 */
.ui-chat__message--received {
  align-items: flex-start;
  gap: 0;	
}

/*-------------------------
  ui-chat__meta（作者 + 時間）
--------------------------*/
.ui-chat__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-inline-sm);
  font-size: calc(var(--font-size-base) - 2px);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);   /* 整條 meta 預設 muted，日期裸 span 直接繼承 */
}

/* 作者：粗體、預設文字色（覆寫 meta 的 muted） */
.ui-chat__author {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-default);
}

/*-------------------------
  ui-chat__bubble（訊息內容）
--------------------------*/
.ui-chat__bubble {
  max-width: 72%;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-default);
  word-break: break-word;
}

/* sent：灰底泡泡 */
.ui-chat__message--sent .ui-chat__bubble {
  padding: var(--space-inset-xs) var(--space-inset-md);
  background: var(--color-white);
  border-radius:var(--radius-component) var(--radius-component) 0 var(--radius-component);
}
.bg-surface-soft .ui-chat__message--sent .ui-chat__bubble {
  background: var(--bg-surface-soft);
}


/* received：無底純文字，左緣貼齊 */
.ui-chat__message--received .ui-chat__bubble {
  padding: var(--space-inset-xs) 0;
}

/*-------------------------
  ui-chat__attachments（附件卡片群）
--------------------------*/
.ui-chat__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
  max-width: 72%;
}

.ui-chat__message--sent .ui-chat__attachments {
  justify-content: flex-end;
}

/*-------------------------
  ui-chat__file（單張附件 / 下載卡）
--------------------------*/
.ui-chat__file {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 左：icon+body 群組；右：開新視窗 icon */
  gap: var(--space-inline-lg);      /* 與右側 icon 的間距，大於群組內 icon↔body 的間距 */
  min-width: 210px;
  padding: var(--space-inset-xs);
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-component);
  text-decoration: none;
  color: var(--color-text-default);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
  	
}

.ui-chat__file:hover, .ui-chat__file:focus-visible, .ui-chat__file:focus, .ui-chat__file:active {
  border-color: var(--color-brand-blue-600);
  text-decoration: none;   /* 覆寫全站 a:hover 的底線 */
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--color-brand-gradient) border-box;
    border-color: transparent;	
}

/* 檔案 icon：沿用共用 item__icon 容器，這裡只補 chat 專屬外觀 */
.ui-chat__file .item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-element);
  color: var(--color-brand-blue-600);
}

/* icon + body 群組：靠左並排，群組內間距較小 */
.ui-chat__file-main {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ui-chat__file-main .item__icon {
  font-size: 24px;
}

.ui-chat__file-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 220px;   /* 長檔名以 ellipsis 截斷，不折行 */
  line-height: 1.35;
}

.ui-chat__file-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-chat__file-size {
  font-size: calc(var(--font-size-base) - 2px);
  color: var(--color-text-muted);
}

/* 開新視窗 icon */
.ui-chat__file > i {
  flex-shrink: 0;
  font-size: var(--font-size-base);
}

/*-------------------------
  ui-chat__reply（回覆區：標題 + 沿用的 chat bar）
--------------------------*/
.ui-chat__reply {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-xs);
}


/*-------------------------
  ui-chat__trigger（手風琴加料版標題列）
  基底沿用 .ui-accordion__trigger（含 ::after 箭頭與旋轉）
--------------------------*/
.ui-chat__trigger {
  gap: var(--space-inline-sm);
}

/* 標題列：h3 內含頭像 icon + 文字，並把 label + 箭頭推到最右 */
.ui-chat__trigger-title {
  display: flex;
  align-items: center;
  gap: var(--space-inline-sm);
  margin: 0;
  margin-right: auto;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-blue-900);
  line-height: 1.3;
}

/* Show / Hide 文字：純 CSS 靠 aria-expanded 切換 */
.ui-chat__toggle-label {
  color: var(--color-brand-blue-600);
  font-weight: var(--font-weight-medium);
}

.ui-chat__toggle-label--hide {
  display: none;
}

.ui-chat__trigger[aria-expanded="true"] .ui-chat__toggle-label--show {
  display: none;
}

.ui-chat__trigger[aria-expanded="true"] .ui-chat__toggle-label--hide {
  display: inline;
}

/* 箭頭改成品牌藍，並與 label 之間留小間距（覆寫預設 margin-left:auto） */
.ui-chat__trigger::after {
  margin-left: var(--space-inline-sm);
  color: var(--color-brand-blue-600);
}

/*==========================================================
  RWD（desktop-first）
==========================================================*/
@media (max-width: 1024px) {
  .ui-chat {
    padding: var(--space-inset-md);
  }
  .ui-chat__bubble,
  .ui-chat__attachments {
    max-width: 85%;
  }
}

@media (max-width: 768px) {
  .ui-chat__thread {
    gap: var(--space-stack-md);
  }
  .ui-chat__bubble,
  .ui-chat__attachments {
    max-width: 100%;
  }
  /* 附件卡改滿版堆疊 */
  .ui-chat__attachments {
    width: 100%;
  }
  .ui-chat__file {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 580px) {
  .ui-chat {
    padding: var(--space-inset-xs);
  }
  .ui-chat__avatar {
    width: 34px;
    height: 34px;
  }
  .ui-chat__trigger-title {
    font-size: var(--font-size-base);
  }
  /* 小螢幕標題列只留箭頭，隱藏 Show/Hide 文字 */
  .ui-chat__toggle-label {
    display: none;
  }
}

/*==========================================================
  ui-chat 於 ui-split 版面：對話卡與側欄卡等高（內容驅動）
  僅作用於 ui-split 內的 chat，不影響單獨使用 chat 的頁面
==========================================================*/

/* 對話卡撐滿欄高（欄高由 .ui-split 的 align-items:stretch 決定） */
.ui-split__primary > .ui-chat {
  flex: 1;
  min-height: 0;
}

/* 對話串改為填滿卡片剩餘高度、超出才捲動（覆寫預設 max-height:380px） */
.ui-split__primary > .ui-chat .ui-chat__thread--scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
}

/* 側欄卡片（Ticket details）同步撐滿欄高，與對話卡等高 */
.ui-split__secondary > .ui-list__group {
  flex: 1;
}

/* ============================================================
   Pagination — 分頁
   結構：.ui-pagination > [.ui-pagination__summary]（可選）+ .ui-pagination__controls
   沒有 summary 時，controls 是唯一的 flex 子項，靠 space-between 自動貼左，
   不需要額外的 modifier class 或外層 .ui-inline 包裝。
   ============================================================ */

.ui-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-inline-lg);
  padding: var(--space-inset-md) 0;
}

.ui-pagination__summary {
  margin: 0;
  white-space: nowrap;
}

.ui-pagination__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-inline-sm);
}
.ui-pagination:not(:has(> :nth-child(2))) {
  justify-content: center;
}
.ui-pagination__list {
  display: flex;
  align-items: center;
  list-style: none;
}

.ui-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--space-inset-xs);
  border-radius: var(--radius-pill);
}

.ui-pagination__link:hover {
  background: var(--bg-brand-light);
  text-decoration: none;
}

.ui-pagination__link.is-active {
  background: var(--bg-brand-secondary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  cursor: default;
}

.ui-pagination__link.is-disabled {
  color: var(--color-text-muted);
  pointer-events: none;
}

.ui-pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: var(--color-text-muted);
}

.ui-pagination__jump {
  display: flex;
  align-items: center;
  gap: var(--space-inline-sm);
}

.ui-pagination__jump-input {
  width: 32px;
  height: 32px;
  padding: 0 var(--space-inset-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-element);
  text-align: center;
}

.ui-pagination__jump-btn {
  height: 32px;
  border: none;
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
}

.ui-pagination__jump-btn:hover {
  text-decoration: underline;
}

/* < 580px: summary + controls center and stack instead of sitting side by side */
@media (max-width: 580px) {
  .ui-pagination {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .ui-pagination__summary {
    text-align: center;
  }

  .ui-pagination__controls {
    justify-content: center;
  }
}

/* ============================================================
   ui-toc — 目錄 / 錨點導覽元件（Outline）
   ‧ 桌機：右欄 sticky 目錄（左側 track + active/hover 漸層條）
   ‧ ≤1024：移到內文上方、單欄
   ‧ <768：收合下拉卡（toggle header + chevron），預設打開
   ============================================================ */
.ui-toc {
  grid-column: 3;
  position: sticky;
  top: var(--space-inline-xl);
  padding-left: var(--space-inline-xl);
}
.ui-toc__inner {
  background: var(--bg-surface);
  border-radius: var(--radius-component);
  padding: 0 0 var(--space-inset-lg) 0;
}

/* 手機版收合 header（桌機隱藏，僅 <768px 顯示） */
.ui-toc__toggle { display: none; }
.ui-toc__chevron {
  flex: 0 0 auto;
  font-size: var(--font-size-base);
  background: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: transform 0.2s ease;
}
.ui-toc__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-inset-sm);
  margin-top: var(--space-inset-sm);
  border-left: 2px solid var(--color-border);
}
.ui-toc__link {
  position: relative;
  display: block;
  padding-left: var(--space-inset-sm);
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--color-grey-800);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ui-toc__link.is-active,
a.ui-toc__link:hover {
  color: var(--color-brand-blue-900);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.ui-toc__link.is-active::before,
.ui-toc__link:hover::before {
  content: "";
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-brand-gradient);
}

/* ≤1024：目錄移到內文上方、單欄 */
@media (max-width: 1024px) {
  .ui-toc { grid-column: auto; order: -1; position: static; }
  .ui-toc__inner { padding-left: 0; }
  .ui-toc { position: static; margin: 0; padding: 0;}
  .ui-toc__inner {
    padding: var(--space-inset-md);
	margin-bottom: var(--space-inset-md);  
    background: var(--bg-surface);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-component);
  }
  .ui-toc__title { display: none; }              /* 改用可點擊的 toggle 當標題 */
  .ui-toc__toggle {
    display: flex; align-items: center; justify-content: space-between;   /* 標題左、箭頭靠右 */
    width: 100%; gap: var(--space-inset-xs); padding: 0;
    background: transparent; border: 0; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
  }
  .ui-toc__toggle-title { font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); color: var(--color-text-default); }
  .ui-toc__toggle[aria-expanded="true"] .ui-toc__chevron { transform: rotate(180deg); }
  .ui-toc__toggle[aria-expanded="false"] ~ .ui-toc__list { display: none; }
  .ui-toc__list {
    flex-direction: column; gap: var(--space-inset-sm);
    margin: var(--space-inset-sm) 0 0; padding: 0;
    border-left: none;
  }
  .ui-toc__link {
    padding-left: 0; border-radius: 0; background: transparent;
    color: var(--color-text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-regular);
  }
  .ui-toc__link.is-active { color: var(--color-text-primary); font-weight: var(--font-weight-regular); }
  .ui-toc__link.is-active::before { display: none; }
  .ui-toc .ui-article__download { width: 100%; box-sizing: border-box; justify-content: center; }
	
}