:root {
  /* =========================================
       1. 核心色彩系統
       ========================================= */
  --primary-color: #ffffff;
  --secondary-color-1: #2f3e46;
  --secondary-color-2: #eaf4f8;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-border: #333333;
  --color-header: #343a40;
  --color-red: #ad2d24;
  --color-green: #3b813d;
  --color-light: #666666;

  /* =========================================
       2. 字體系統
       ========================================= */
  --font-family-base:
    "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --fw-bold: 700;
  --fw-regular: 400;
  --fw-semilight: 300;

  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-h4: 1.125rem;
  --fs-body-focus: 1.125rem;
  --fs-body-base: 1rem;
  --fs-body-md: 0.875rem;
  --fs-body-sm: 0.75rem;
  --fs-body-xs: 0.675rem;

  /* =========================================
       3. 導覽列設定
       ========================================= */
  --nav-height-desktop: 80px;
  --nav-height-tablet: 56px;
  --nav-height-mobile: 46px;
  --login-btn-height-desktop: 100px;
  --nav-desktop-padding-x: 10%;
  --nav-bg: var(--primary-color);
  --nav-text: var(--color-white);
  --login-btn-bg: var(--secondary-color-1);
  --login-btn-text: var(--color-white);
  --login-btn-width-desktop: 130px;
  --z-nav: 1030;
  --z-modal-backdrop: 1040;
  --z-modal-content: 1050;

  /* =========================================
       4. 版面容器設定 (Fluid Grid System)
       這裡設定 "預設" (Desktop > 1024px) 的比例
       算法: 1200 / 1920 = 0.625 (62.5vw)
       ========================================= */
  --container-fluid-width: 62.5vw;
}

/* 平板斷點 (<= 1024px) */
/* 算法: 656 / 768 = 0.854 (85.4vw) */
@media (max-width: 1024px) {
  :root {
    --container-fluid-width: 85.4vw;
  }
}

/* 手機斷點 (<= 576px) */
/* 算法: 361 / 393 = 0.918 (91.8vw) */
@media (max-width: 576px) {
  :root {
    --container-fluid-width: 91.8vw;
  }
}

:root {
  /* 定義預設值，當 API 沒資料時顯示這個 */
  --bg-pattern: url("../../img/placeholders/background-all-50x50.png");
  --body-bg-color: #f4f0ee;
}

body {
  /* 🔥 關鍵：改成讀取變數 var(...) */
  background-color: var(--body-bg-color);
  background-image: var(--bg-pattern);

  /* 注意：如果 API 回傳的是大張背景圖，可能需要調整 repeat 與 size */
  background-repeat: repeat;
  /* 建議：如果是 Pattern 用 repeat，如果是大圖可能要改成 cover，視設計規範而定 */
  background-size: auto;
}

/* ==========================================================
   全域骨架屏 (Skeleton Loading) 防閃爍特效
   ========================================================== */

/* 定義骨架的灰色閃爍動畫 */
@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 賦予骨架外觀 */
.skeleton-box {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s infinite linear;
  color: transparent !important; /* 隱藏裡面的文字 */
  border-radius: 6px;
  pointer-events: none; /* 載入中禁止點擊 */
}

/* 針對文字的骨架 (強制給定最小高度) */
.skeleton-text {
  min-height: 1.5em;
  width: 100%;
  display: inline-block;
}

/* 針對標題稍微加粗高度 */
.skeleton-title {
  min-height: 2.5em;
  width: 60%;
}

/* 針對圖片的骨架 (使用 aspect-ratio 撐開高度，避免排版崩塌) */
.skeleton-img {
  aspect-ratio: 16 / 9; /* 您可以依據圖片比例調整，例如 4/3 或 1/1 */
  width: 100%;
  display: block;
}