/* =========================================
   基礎 Design System：Color / Typography / Spacing
   ========================================= */

   :root {
    /* === 品牌主視覺色系 === */
    --color-brand: #FF8200;        /* 品牌主色（橘） */
    --color-accent: #4BBDF6;       /* 品牌輔色（藍） */
    --color-accent-beige: #FFF8E9; /* 輔色（淺米） */
  
    /* === 文字／狀態 === */
    --color-tab-inactive: #B2B2B2; /* 未選取的頁籤 */
    --color-text-default: #1a1a1a; /* 主文字色 */
    --color-text-secondary: #707070; /* 次要文字色 */
    --color-text-white: #ffffff;   /* 白色文字 */
    --color-text-link: #007AFF;    /* 連結文字色 */
  
    /* === 背景色 === */
    --color-bg-folder: #F6F6F6;    /* 區塊底色／folder */
    --color-bg-border: #FFD4A8;  /* 邊框（淺橘） */
    --color-bg-note: #FFF8E9;      /* 小區塊底色（淺黃） */
  
    /* =========================================
   顏色類 utility class
   ========================================= */

    .text-secondary {
        color: var(--color-tab-inactive);
    }
    
    /* === 字級系統（以 16px 為 1rem） === */
    --font-h1: 2rem;       /* 32px */
    --font-h2: 1.5rem;     /* 24px */
    --font-h3: 1.25rem;    /* 20px */
    --font-body: 1.125rem;     /* 16px */
    --font-caption: 1rem; /* 14px */
    --font-btn-l: 1.3rem; /* 18px */
    --font-btn-m: 1rem;    /* 16px */
    --font-btn-s: 0.875rem;/* 14px */
  
    /* === 行高系統 === */
    --lh-h1: 2.5rem;       /* 40px */
    --lh-h2: 2rem;         /* 32px */
    --lh-h3: 1.75rem;      /* 28px */
    --lh-body: 1.75rem;   /* 26px */
    --lh-caption: 1.75rem;/* 22px */
    --lh-btn-l: 1.5rem;    /* 24px */
    --lh-btn-m: 1.25rem;   /* 20px */
    --lh-btn-s: 1rem;      /* 16px */
  
    /* === Spacing 單位系統（以 4px 為單位） === */
    --space-0: 0;
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-15: 3.75rem;   /* 60px */
  }
  
  /* =========================================
     字級樣式 Class
     ========================================= */

    html {
    scroll-behavior: smooth;
  }

  p {
    margin-top: 0;
    margin-bottom: 0rem;
  }

  
  .h1 {
    font-size: var(--font-h1);
    line-height: var(--lh-h1);
    font-weight: 600;
    letter-spacing: 1.28px;
    color: var(--color-text-default);
  }
  
  .h2 {
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    font-weight: 700;
  }
  
  .h3 {
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    font-weight: 500;
    letter-spacing: 0.4px;
  }
  
  .body {
    font-size: var(--font-body);
    line-height: var(--lh-body);
    font-weight: 400;
    letter-spacing: 0.34px;
  }
  
  .caption {
    font-size: var(--font-caption);
    line-height: var(--lh-caption);
    font-weight: 400;
    letter-spacing: 0.28px;
  }
  
  .body-strong {
    font-size: var(--font-body);
    line-height: var(--lh-h3);
    font-weight: 700;
    letter-spacing: 0.64px;
  }
  
  .caption-strong {
    font-size: var(--font-caption);
    line-height: var(--lh-caption);
    font-weight: 500;
  }
  
  .btn-text-l {
    font-size: var(--font-btn-l);
    line-height: var(--lh-btn-l);
    font-weight: 800;
    letter-spacing: 1.08px;
  }
  
  .btn-text-m {
    font-size: var(--font-btn-m);
    line-height: var(--lh-btn-m);
    font-weight: 400;
    letter-spacing: 1.2px;
  }
  
  .btn-text-s {
    font-size: var(--font-btn-s);
    line-height: var(--lh-btn-s);
    font-weight: 500;
  }

  .text-gray {
    color: var(--color-text-secondary);
  }
  
  /* =========================================
     間距工具 Class（僅 margin-bottom 為示範）
     ========================================= */
  
  .mb-0  { margin-bottom: var(--space-0); }
  .mb-1  { margin-bottom: var(--space-1); }
  .mb-2  { margin-bottom: var(--space-2); }
  .mb-3  { margin-bottom: var(--space-3); }
  .mb-4  { margin-bottom: var(--space-4); }
  .mb-5  { margin-bottom: var(--space-5); }
  .mb-6  { margin-bottom: var(--space-6); }
  .mb-8  { margin-bottom: var(--space-8); }
  .mb-10 { margin-bottom: var(--space-10); }
  .mb-12 { margin-bottom: var(--space-12); }
  .mb-15 { margin-bottom: var(--space-15); }
  
  .pd-0  { padding: var(--space-0); }
  .pd-4  { padding: var(--space-4); }
  
  #promo-sec-1,
  #promo-sec-2,
  #promo-sec-3,
  #promo-sec-4,
  #promo-sec-5 {
    scroll-margin-top: 40px;
  }

/* =========================================
   ✅ CTA 按鈕樣式（白底橘字＋橘色 SVG 箭頭）
   ========================================= */

   .btn-cta {
    background-color: var(--color-brand);
    color: var(--color-text-white);
    padding: 0.75rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    justify-content: center;
    min-width: 190px;
    width: 25%;
  }
  
  .btn-cta:hover {
    background-color: #d35400; 
    color: #ffffff;
  }
  
  .btn-cta:active {
    background-color: #d35400; /* 深橘色 */
    color: #ffffff; 
    transform: scale(0.98);
  }
  
  .btn-cta .arrow-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease, stroke 0.2s ease;
  }
  
  .btn-cta .arrow-icon svg {
    stroke: var(--color-text-white);
  }
  
  .btn-cta:hover .arrow-icon svg {
    stroke: #ffffff;
  }
  
  .btn-cta:hover .arrow-icon {
    transform: translateX(2px);
  }

  /* 當按鈕的 aria-expanded 為 true 時（collapse 展開） */
  button[aria-expanded="true"] {
    font-weight: bold; 
    border: 2px solid var(--color-bg-border);
    color: var(--color-brand);
  }


  button[aria-expanded="true"] .icon svg {
    transform: rotate(180deg);
    transition: transform 0.3s ease; 
  }

  .noshow{
    color: transparent;
    background-color: transparent;
    border-color: transparent;
  }