/* ✅ Mobile First（推薦） */
.container {
  padding: 1rem;          /* 手機預設 */
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;        /* 平板增強 */
  }
}

@media (min-width: 1280px) {
  .container {
    padding: 3rem;        /* 桌機增強 */
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ❌ Desktop First（不推薦） */
.container {
  padding: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1279px) {
  .container {
    padding: 2rem;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .container {
    padding: 1rem;
  }
}

<!-- 必須設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 確保不會阻擋行動裝置爬蟲 -->
<!-- robots.txt 中不要阻擋 CSS/JS 資源 -->

<!-- 結構化數據 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "企業管理系統",
  "operatingSystem": "All"
}
</script>

<!-- ✅ 標準 RWD viewport 設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ✅ 完整的企業級設定（含 iPhone 安全區域） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

/* 使用環境變數處理安全區域 */
.app-header {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.app-footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 兩欄式佈局 */
.sidebar {
  width: 25%;        /* 固定比例 */
  min-width: 200px;  /* 最小寬度保護 */
}

.main-content {
  width: 75%;
}

/* ✅ 推薦的 rem 設計系統 */
:root {
  font-size: 16px; /* 1rem = 16px */
}

/* 間距系統（基於 4px 網格） */
.spacing-xs { margin: 0.25rem; }  /* 4px */
.spacing-sm { margin: 0.5rem; }   /* 8px */
.spacing-md { margin: 1rem; }     /* 16px */
.spacing-lg { margin: 1.5rem; }   /* 24px */
.spacing-xl { margin: 2rem; }     /* 32px */

/* 字體系統 */
.text-xs   { font-size: 0.75rem; }   /* 12px */
.text-sm   { font-size: 0.875rem; }  /* 14px */
.text-base { font-size: 1rem; }      /* 16px */
.text-lg   { font-size: 1.125rem; }  /* 18px */
.text-xl   { font-size: 1.25rem; }   /* 20px */
.text-2xl  { font-size: 1.5rem; }    /* 24px */

/* 全屏 Hero 區塊 */
.hero {
  height: 100vh;           /* 佔滿整個螢幕高度 */
  height: 100dvh;          /* ✅ 推薦：動態 viewport 高度（處理手機瀏覽器地址欄） */
}

/* 響應式字體（不建議單獨使用，建議搭配 clamp） */
.hero-title {
  font-size: 5vw;          /* ❌ 過大或過小 */
  font-size: clamp(1.5rem, 4vw, 3rem); /* ✅ 有上下限 */
}

/* 語法：clamp(最小值, 推薦值, 最大值) */

/* ✅ 響應式字體 */
h1 { font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem); }
h2 { font-size: clamp(1.25rem, 2vw + 0.75rem, 2.25rem); }
p  { font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem); }

/* ✅ 響應式間距 */
.section {
  padding: clamp(1rem, 3vw, 3rem);
}

/* ✅ 響應式容器寬度 */
.container {
  width: clamp(320px, 90vw, 1200px);
  margin: 0 auto;
}

/* 語法結構 */
@media <media-type> and (<media-feature>) {
  /* 樣式規則 */
}

/* 常用範例 */
@media screen and (min-width: 768px) {
  .sidebar { display: block; }
}

/* 多條件組合 */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .sidebar { width: 200px; }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  :root { --bg-color: #1a1a1a; }
}

/* 減少動畫（無障礙） */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
}

/* 高解析度螢幕 */
@media (min-resolution: 2dppx) {
  .logo { background-image: url('logo@2x.png'); }
}

/* ✅ 範圍語法（Range Syntax） - 更直覺 */
@media (width >= 768px) {
  .sidebar { display: block; }
}

@media (768px <= width <= 1279px) {
  .sidebar { width: 200px; }
}

/* ✅ Container Queries - 基於容器尺寸 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { flex-direction: row; }
}

@container card (max-width: 399px) {
  .card { flex-direction: column; }
}

/* ✅ 企業標準 Breakpoint 定義（CSS Custom Properties） */
:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ✅ SCSS/SASS Mixin（推薦） */
/*
$breakpoints: (
  'sm':  576px,
  'md':  768px,
  'lg':  1024px,
  'xl':  1280px,
  '2xl': 1536px,
);

@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// 使用方式
.sidebar {
  display: none;
  @include respond-to('lg') {
    display: block;
    width: 280px;
  }
}
*/

.flex-item {
  flex: 1;              /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  flex: 0 0 auto;       /* 不伸展、不收縮、自然寬度 */
  flex: 0 0 300px;      /* 固定 300px */
  flex: 1 1 0%;         /* 等分空間 */
}

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.layout-header {
  flex: none;               /* 固定高度 */
  height: 64px;
}

.layout-body {
  display: flex;
  flex: 1;                  /* 填滿剩餘空間 */
}

.layout-sidebar {
  flex: 0 0 280px;          /* 固定寬度 */
}

.layout-content {
  flex: 1;                  /* 填滿 */
  overflow-y: auto;
}

.layout-footer {
  flex: none;
  height: 48px;
}

/* 手機版 */
@media (width < 1024px) {
  .layout-body {
    flex-direction: column;
  }
  .layout-sidebar {
    flex: none;
    width: 100%;
  }
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 calc(33.333% - 1rem);  /* 三欄 */
  min-width: 280px;                 /* 最小寬度保護 */
}

/* 自動換行：當卡片低於 280px 時自動變為更少欄數 */

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

.grid-container {
  display: grid;
  
  /* 定義欄數與寬度 */
  grid-template-columns: repeat(12, 1fr);  /* 12 欄網格 */
  
  /* 定義行高 */
  grid-template-rows: auto 1fr auto;
  
  /* 間距 */
  gap: 1rem;
  
  /* 命名區域（企業常用） */
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

/* ✅ auto-fit：自動適配，剩餘空間平分給現有項目 */
.auto-fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* auto-fill：保留空欄位位置 */
.auto-fill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* ✅ Subgrid：子網格繼承父網格的軌道（2025+ 全面支援） */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.child-spanning-all {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid; /* 繼承父網格的欄定義 */
}

/* 企業 Dashboard 佈局 */
.dashboard {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  
  /* 桌機：4 欄 */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "kpi1    kpi2    kpi3    kpi4"
    "chart1  chart1  chart2  chart2"
    "table   table   table   table";
}

.kpi-1    { grid-area: kpi1; }
.kpi-2    { grid-area: kpi2; }
.kpi-3    { grid-area: kpi3; }
.kpi-4    { grid-area: kpi4; }
.chart-1  { grid-area: chart1; }
.chart-2  { grid-area: chart2; }
.data-table { grid-area: table; }

/* 平板：2 欄 */
@media (width < 1024px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "kpi1    kpi2"
      "kpi3    kpi4"
      "chart1  chart1"
      "chart2  chart2"
      "table   table";
  }
}

/* 手機：1 欄 */
@media (width < 576px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kpi1"
      "kpi2"
      "kpi3"
      "kpi4"
      "chart1"
      "chart2"
      "table";
  }
}

┌──────────────────────────────────────────────┐
│                 App Shell                     │ ← 最外層容器
│  ┌────────────────────────────────────────┐  │
│  │              Header                    │  │ ← 固定頂部
│  ├────────┬───────────────────────────────┤  │
│  │        │                               │  │
│  │ Side-  │        Content Area           │  │
│  │  bar   │  ┌─────────────────────────┐  │  │
│  │        │  │    Page Container        │  │  │ ← 頁面容器
│  │        │  │  ┌───────────────────┐   │  │  │
│  │        │  │  │  Component Grid    │   │  │  │ ← 元件網格
│  │        │  │  └───────────────────┘   │  │  │
│  │        │  └─────────────────────────┘  │  │
│  ├────────┴───────────────────────────────┤  │
│  │              Footer                    │  │ ← 底部
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘

/* Layer 1: App Shell */
.app-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100dvh;
}

/* Layer 2: Page Container */
.page-container {
  grid-area: content;
  padding: clamp(1rem, 3vw, 2rem);
  overflow-y: auto;
  max-width: 1440px;
}

/* Layer 3: Component Grid */
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* Layer 4: Component Internal */
.component-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Header 基礎樣式 */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 56px;
  background: var(--header-bg, #ffffff);
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-logo {
  flex: 0 0 auto;
}

.header-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.header-nav-item {
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* 漢堡選單按鈕（手機版） */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.5rem;
}

/* 手機版 Header */
@media (width < 1024px) {
  .header-nav {
    display: none;    /* 隱藏水平導航 */
  }
  .menu-toggle {
    display: block;   /* 顯示漢堡選單 */
  }
}

/* Sidebar 基礎樣式 */
.app-sidebar {
  grid-area: sidebar;
  width: 260px;
  background: var(--sidebar-bg, #f5f5f5);
  border-right: 1px solid var(--border-color, #e0e0e0);
  overflow-y: auto;
  transition: transform 0.3s ease, width 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sidebar-nav {
  padding: 1rem 0;
  flex: 1;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 0 24px 24px 0;
  margin-right: 0.75rem;
}

.sidebar-nav-item:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.sidebar-nav-item.active {
  background: var(--primary-light, #e3f2fd);
  color: var(--primary, #1976d2);
  font-weight: 600;
}

/* 折疊模式（平板） */
@media (768px <= width < 1024px) {
  .app-sidebar {
    width: 64px;           /* 只顯示圖示 */
  }
  .sidebar-nav-item span {
    display: none;         /* 隱藏文字 */
  }
  .app-sidebar:hover {
    width: 260px;
    position: absolute;
    height: 100%;
    z-index: 50;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  }
  .app-sidebar:hover .sidebar-nav-item span {
    display: inline;
  }
}

/* 手機版：Sidebar 變成 Overlay */
@media (width < 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "footer";
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 280px;
    z-index: 200;
    transform: translateX(-100%);   /* 預設隱藏 */
  }
  
  .app-sidebar.is-open {
    transform: translateX(0);       /* 展開 */
  }

  /* 遮罩層 */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  
  .sidebar-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

.app-content {
  grid-area: content;
  overflow-y: auto;
  background: var(--content-bg, #fafafa);
}

.page-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
}

/* 頁面標題列 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (width < 576px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-header-actions {
    width: 100%;
  }
  .page-header-actions .btn {
    width: 100%;        /* 按鈕全寬 */
  }
}

/* Dashboard 統計卡片 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (width < 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width < 576px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* KPI 卡片 */
.kpi-card {
  background: white;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kpi-value {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
}

.kpi-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* 圖表區域 */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

@media (width < 768px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

.chart-card {
  background: white;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 圖表容器需保持比例 */
.chart-container {
  width: 100%;
  aspect-ratio: 16 / 9;     /* ✅ 使用 aspect-ratio 保持比例 */
  min-height: 200px;
}

/* ✅ 基礎表單 Grid 佈局 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
}

/* 單欄模式（手機） */
@media (width < 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* 全寬欄位 */
.form-field--full {
  grid-column: 1 / -1;
}

/* 表單欄位 */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-color, #d0d0d0);
  border-radius: 6px;
  font-size: 1rem;             /* ✅ 至少 16px 避免 iOS 自動放大 */
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--primary, #1976d2);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

/* 表單按鈕列 */
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

@media (width < 576px) {
  .form-actions {
    flex-direction: column-reverse;
  }
  .form-actions .btn {
    width: 100%;
  }
}

/* 桌機：Label 在左側（水平排列） */
@media (width >= 1024px) {
  .form-field--horizontal {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: start;
    gap: 0.75rem;
  }
  .form-field--horizontal label {
    text-align: right;
    padding-top: 0.625rem;
  }
}

/* 平板 & 手機：Label 在上方（垂直排列） */
@media (width < 1024px) {
  .form-field--horizontal {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;       /* iOS 慣性捲動 */
}

.table-responsive table {
  min-width: 800px;                        /* 確保不被壓縮 */
}

/* 捲動提示影子 */
.table-responsive {
  background:
    linear-gradient(to right, white 30%, transparent),
    linear-gradient(to left, white 30%, transparent),
    linear-gradient(to right, rgba(0,0,0,.1), transparent),
    linear-gradient(to left, rgba(0,0,0,.1), transparent);
  background-position: left, right, left, right;
  background-size: 40px 100%, 40px 100%, 15px 100%, 15px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* 桌機：標準表格 */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.data-table th {
  background: var(--table-header-bg, #f5f5f5);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
}

/* ✅ 手機：變為卡片 */
@media (width < 768px) {
  .data-table thead {
    display: none;                   /* 隱藏表頭 */
  }
  
  .data-table tbody tr {
    display: block;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
  }
  
  .data-table td:last-child {
    border-bottom: none;
  }
  
  /* 使用 data-label 屬性顯示欄位名稱 */
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    flex: 0 0 40%;
  }
}

<!-- HTML 需加上 data-label -->
<table class="data-table">
  <thead>
    <tr>
      <th>訂單編號</th>
      <th>客戶名稱</th>
      <th>金額</th>
      <th>狀態</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="訂單編號">ORD-2026-001</td>
      <td data-label="客戶名稱">台灣銀行</td>
      <td data-label="金額">NT$ 1,500,000</td>
      <td data-label="狀態"><span class="badge badge--success">已完成</span></td>
    </tr>
  </tbody>
</table>

/* 非關鍵欄位在手機隱藏 */
@media (width < 768px) {
  .col-priority-low {
    display: none;
  }
}

@media (width < 576px) {
  .col-priority-medium {
    display: none;
  }
}

/* 展開按鈕 */
.expand-btn {
  display: none;
}

@media (width < 768px) {
  .expand-btn {
    display: inline-flex;
  }
  .expand-content {
    display: none;
  }
  .expand-content.is-expanded {
    display: block;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-top: 0.5rem;
  }
}

/* ✅ Modal：桌機居中，手機全屏 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.modal {
  background: white;
  border-radius: 12px;
  width: min(600px, 100%);
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  flex: none;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  flex: none;
}

/* 手機全屏 Modal */
@media (width < 576px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;        /* 從底部彈出 */
  }
  .modal {
    width: 100%;
    max-height: 95dvh;
    border-radius: 16px 16px 0 0;
    animation: modal-slide-up 0.3s ease;
  }
  .modal-footer {
    flex-direction: column-reverse;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .modal-footer .btn {
    width: 100%;
  }
}

@keyframes modal-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ✅ Drawer：桌機從右側滑出，手機全屏 */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(480px, 100%);
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1001;
}

.drawer.is-open {
  transform: translateX(0);
}

/* 手機版 Drawer 全寬 */
@media (width < 576px) {
  .drawer {
    width: 100%;
  }
}

// composables/useBreakpoint.ts
import { ref, onMounted, onUnmounted, computed } from 'vue'

interface Breakpoints {
  sm: number
  md: number
  lg: number
  xl: number
  '2xl': number
}

const DEFAULT_BREAKPOINTS: Breakpoints = {
  sm: 576,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1536,
}

export function useBreakpoint(customBreakpoints?: Partial<Breakpoints>) {
  const breakpoints = { ...DEFAULT_BREAKPOINTS, ...customBreakpoints }
  const windowWidth = ref(0)

  const updateWidth = () => {
    windowWidth.value = window.innerWidth
  }

  onMounted(() => {
    updateWidth()
    window.addEventListener('resize', updateWidth, { passive: true })
  })

  onUnmounted(() => {
    window.removeEventListener('resize', updateWidth)
  })

  const isMobile = computed(() => windowWidth.value < breakpoints.md)
  const isTablet = computed(() => 
    windowWidth.value >= breakpoints.md && windowWidth.value < breakpoints.lg
  )
  const isDesktop = computed(() => windowWidth.value >= breakpoints.lg)
  
  const current = computed(() => {
    if (windowWidth.value >= breakpoints['2xl']) return '2xl'
    if (windowWidth.value >= breakpoints.xl) return 'xl'
    if (windowWidth.value >= breakpoints.lg) return 'lg'
    if (windowWidth.value >= breakpoints.md) return 'md'
    if (windowWidth.value >= breakpoints.sm) return 'sm'
    return 'xs'
  })

  // 比較函式
  const isAbove = (bp: keyof Breakpoints) => windowWidth.value >= breakpoints[bp]
  const isBelow = (bp: keyof Breakpoints) => windowWidth.value < breakpoints[bp]

  return {
    windowWidth,
    isMobile,
    isTablet,
    isDesktop,
    current,
    isAbove,
    isBelow,
  }
}

<!-- layouts/AppLayout.vue -->
<template>
  <div class="app-shell">
    <AppHeader @toggle-sidebar="toggleSidebar" />
    
    <!-- Sidebar Overlay (手機) -->
    <Transition name="fade">
      <div
        v-if="isMobile && sidebarOpen"
        class="sidebar-overlay"
        @click="sidebarOpen = false"
      />
    </Transition>
    
    <!-- Sidebar -->
    <Transition :name="isMobile ? 'slide-left' : undefined">
      <AppSidebar
        v-if="!isMobile || sidebarOpen"
        :collapsed="isTablet && !sidebarHovered"
        @mouseenter="sidebarHovered = true"
        @mouseleave="sidebarHovered = false"
      />
    </Transition>
    
    <!-- Main Content -->
    <main class="app-content">
      <div class="page-wrapper">
        <RouterView />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useBreakpoint } from '@/composables/useBreakpoint'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppSidebar from '@/components/layout/AppSidebar.vue'

const { isMobile, isTablet } = useBreakpoint()

const sidebarOpen = ref(false)
const sidebarHovered = ref(false)

const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value
}
</script>

<style scoped>
.app-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "header header"
    "sidebar content";
  min-height: 100dvh;
}

@media (width < 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content";
  }
}

.app-content {
  grid-area: content;
  overflow-y: auto;
}

/* Transitions */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease;
}
.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}
</style>

<!-- components/ResponsiveTable.vue -->
<template>
  <div>
    <!-- 桌機版：標準表格 -->
    <div v-if="!isMobile" class="table-responsive">
      <table class="data-table">
        <thead>
          <tr>
            <th v-for="col in columns" :key="col.key">
              {{ col.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in data" :key="row.id">
            <td v-for="col in columns" :key="col.key">
              <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
                {{ row[col.key] }}
              </slot>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 手機版：卡片式 -->
    <div v-else class="card-list">
      <div v-for="row in data" :key="row.id" class="card-item">
        <div v-for="col in columns" :key="col.key" class="card-row">
          <span class="card-label">{{ col.label }}</span>
          <span class="card-value">
            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
              {{ row[col.key] }}
            </slot>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBreakpoint } from '@/composables/useBreakpoint'

interface Column {
  key: string
  label: string
}

defineProps<{
  columns: Column[]
  data: Record<string, any>[]
}>()

const { isMobile } = useBreakpoint()
</script>

<!-- ✅ Mobile First 寫法 -->
<div class="
  grid grid-cols-1          /* 手機：1 欄 */
  sm:grid-cols-2           /* sm+：2 欄 */
  lg:grid-cols-3           /* lg+：3 欄 */
  xl:grid-cols-4           /* xl+：4 欄 */
  gap-4
">
  <div class="bg-white p-4 rounded-lg shadow-sm">Card 1</div>
  <div class="bg-white p-4 rounded-lg shadow-sm">Card 2</div>
  <div class="bg-white p-4 rounded-lg shadow-sm">Card 3</div>
  <div class="bg-white p-4 rounded-lg shadow-sm">Card 4</div>
</div>

/* tailwind.css (v4 使用 CSS 定義) */
@import "tailwindcss";

@theme {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

<!-- 企業 Dashboard Header -->
<header class="
  sticky top-0 z-50
  flex items-center justify-between
  h-14 px-4
  bg-white border-b border-gray-200
  dark:bg-gray-900 dark:border-gray-700
">
  <!-- 漢堡選單（手機顯示） -->
  <button class="lg:hidden p-2 rounded-md hover:bg-gray-100">
    <svg class="w-6 h-6"><!-- menu icon --></svg>
  </button>
  
  <!-- Logo -->
  <div class="flex items-center gap-2">
    <img src="/logo.svg" alt="Logo" class="h-8" />
    <span class="hidden sm:inline font-semibold text-lg">企業管理系統</span>
  </div>
  
  <!-- 搜尋列 -->
  <div class="hidden md:flex flex-1 max-w-md mx-4">
    <input
      type="search"
      placeholder="搜尋..."
      class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500"
    />
  </div>
  
  <!-- 使用者選單 -->
  <div class="flex items-center gap-2">
    <button class="md:hidden p-2"><!-- 手機搜尋按鈕 --></button>
    <button class="p-2 relative"><!-- 通知 --></button>
    <div class="flex items-center gap-2">
      <img src="/avatar.jpg" class="w-8 h-8 rounded-full" />
      <span class="hidden lg:inline text-sm">王小明</span>
    </div>
  </div>
</header>

<!-- KPI 卡片區 -->
<section class="p-4 lg:p-6">
  <div class="
    grid
    grid-cols-1
    sm:grid-cols-2
    xl:grid-cols-4
    gap-4
  ">
    <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
      <p class="text-sm text-gray-500">本月營收</p>
      <p class="text-2xl lg:text-3xl font-bold text-gray-900 mt-1">NT$ 12.5M</p>
      <p class="text-sm text-green-600 mt-2">↑ 12.3%</p>
    </div>
    <!-- 更多 KPI 卡片... -->
  </div>
</section>

<!-- Tailwind v4 支援 Container Queries -->
<div class="@container">
  <div class="
    flex flex-col
    @md:flex-row
    gap-4
  ">
    <img src="/product.jpg" class="
      w-full
      @md:w-48
      rounded-lg object-cover
    " />
    <div class="flex-1">
      <h3 class="
        text-base
        @lg:text-xl
        font-semibold
      ">產品名稱</h3>
      <p class="text-sm text-gray-600 mt-1">產品描述...</p>
    </div>
  </div>
</div>

<!-- 基礎 Grid -->
<div class="container">
  <div class="row g-3">
    <!-- 手機全寬，平板半寬，桌機三分之一 -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">Card 1</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">Card 2</div>
    </div>
    <div class="col-12 col-md-12 col-lg-4">
      <div class="card">Card 3</div>
    </div>
  </div>
</div>

<!-- 固定寬度（有 max-width） -->
<div class="container">...</div>

<!-- 全寬 -->
<div class="container-fluid">...</div>

<!-- 在特定 breakpoint 變為全寬 -->
<div class="container-lg">...</div>
<!-- lg 以下全寬，lg 以上有 max-width -->

<!-- 顯示/隱藏 -->
<div class="d-none d-md-block">平板以上才顯示</div>
<div class="d-block d-md-none">只在手機顯示</div>

<!-- Flex 方向 -->
<div class="d-flex flex-column flex-md-row gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- 文字對齊 -->
<p class="text-center text-md-start">手機置中，桌機靠左</p>

<!-- 間距 -->
<div class="p-2 p-md-4 p-lg-5">響應式 padding</div>

// hooks/useMediaQuery.ts
import { useSyncExternalStore, useCallback } from 'react'

/**
 * 響應式 Media Query Hook（React 19 推薦寫法）
 * 使用 useSyncExternalStore 確保 SSR 安全性
 */
export function useMediaQuery(query: string): boolean {
  const subscribe = useCallback(
    (callback: () => void) => {
      const mql = window.matchMedia(query)
      mql.addEventListener('change', callback)
      return () => mql.removeEventListener('change', callback)
    },
    [query]
  )

  const getSnapshot = () => window.matchMedia(query).matches

  // SSR 預設回傳 false（避免 hydration mismatch）
  const getServerSnapshot = () => false

  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
}

// ✅ 使用範例
function ResponsiveNav() {
  const isMobile = useMediaQuery('(max-width: 767px)')
  const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)')
  const isDesktop = useMediaQuery('(min-width: 1024px)')
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')

  if (isMobile) return <MobileNav />
  if (isTablet) return <TabletNav />
  return <DesktopNav animated={!prefersReducedMotion} />
}

// hooks/useBreakpoint.ts
import { useMediaQuery } from './useMediaQuery'

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

const BREAKPOINTS: Record<Breakpoint, string> = {
  xs: '(max-width: 639px)',
  sm: '(min-width: 640px)',
  md: '(min-width: 768px)',
  lg: '(min-width: 1024px)',
  xl: '(min-width: 1280px)',
  '2xl': '(min-width: 1536px)',
}

/**
 * 企業級斷點 Hook
 * @returns 當前斷點狀態與工具方法
 */
export function useBreakpoint() {
  const matches: Record<Breakpoint, boolean> = {
    xs: useMediaQuery(BREAKPOINTS.xs),
    sm: useMediaQuery(BREAKPOINTS.sm),
    md: useMediaQuery(BREAKPOINTS.md),
    lg: useMediaQuery(BREAKPOINTS.lg),
    xl: useMediaQuery(BREAKPOINTS.xl),
    '2xl': useMediaQuery(BREAKPOINTS['2xl']),
  }

  const current: Breakpoint = matches['2xl']
    ? '2xl'
    : matches.xl
    ? 'xl'
    : matches.lg
    ? 'lg'
    : matches.md
    ? 'md'
    : matches.sm
    ? 'sm'
    : 'xs'

  /** 斷點是否 >= 指定值 */
  const gte = (bp: Breakpoint) => matches[bp]

  return { current, matches, gte }
}

// ✅ Server Component — 不含 client-side 響應式邏輯
// app/dashboard/page.tsx (Server Component)
export default async function DashboardPage() {
  const data = await fetchDashboardData()

  return (
    <div className="dashboard-layout">
      {/* 使用 CSS 處理響應式佈局，不依賴 JS */}
      <aside className="sidebar">
        <DashboardSidebar data={data.menu} />
      </aside>
      <main className="main-content">
        {/* 僅需要互動的部分使用 Client Component */}
        <ResponsiveDataGrid data={data.items} />
      </main>
    </div>
  )
}

// ✅ Client Component — 處理響應式互動
// components/ResponsiveDataGrid.tsx
'use client'

import { useBreakpoint } from '@/hooks/useBreakpoint'
import { Suspense, lazy } from 'react'

const DataTable = lazy(() => import('./DataTable'))
const DataCards = lazy(() => import('./DataCards'))

export function ResponsiveDataGrid({ data }: { data: Item[] }) {
  const { gte } = useBreakpoint()
  
  return (
    <Suspense fallback={<DataGridSkeleton />}>
      {gte('md') ? (
        <DataTable data={data} />
      ) : (
        <DataCards data={data} />
      )}
    </Suspense>
  )
}

/* ✅ Server Component 的 RWD 由純 CSS 控制 */
.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .dashboard-layout {
    grid-template-columns: 280px 1fr;
  }
}

.sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}

/* ✅ 原生 CSS Nesting — 無需預處理器 */
.card {
  padding: 1rem;
  background: var(--surface);

  /* 巢狀選擇器 */
  & .card-header {
    font-size: 1.25rem;
    font-weight: 600;
  }

  & .card-body {
    line-height: 1.6;
  }

  /* 巢狀 Media Query */
  @media (min-width: 768px) {
    padding: 2rem;
    display: grid;
    grid-template-columns: 200px 1fr;

    & .card-header {
      font-size: 1.5rem;
    }
  }

  /* 巢狀 Container Query */
  @container card (min-width: 400px) {
    display: flex;
    gap: 1.5rem;
  }
}

/* ✅ 定義層疊順序（先宣告的優先度最低） */
@layer reset, base, layout, components, utilities, overrides;

/* reset 層 — 最低優先度 */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
  }
}

/* base 層 — 基礎排版 */
@layer base {
  :root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
  }
  
  body {
    font-family: system-ui, sans-serif;
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    line-height: 1.6;
  }
}

/* layout 層 — 響應式佈局 */
@layer layout {
  .container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
  }

  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
  }
}

/* components 層 — 元件樣式 */
@layer components {
  .btn {
    padding: 0.75rem 1.5rem;
    min-height: 44px; /* 觸控友善 */
  }
}

/* utilities 層 — 工具類（高優先度） */
@layer utilities {
  .hidden-mobile {
    @media (max-width: 767px) { display: none !important; }
  }
  .hidden-desktop {
    @media (min-width: 1024px) { display: none !important; }
  }
}

/* ✅ @scope — 限定樣式作用範圍 */
@scope (.dashboard-widget) to (.widget-footer) {
  /* 只影響 .dashboard-widget 內、.widget-footer 之前的元素 */
  h3 {
    font-size: clamp(1rem, 2.5cqi, 1.5rem);
    margin-bottom: 0.5rem;
  }
  
  p {
    color: var(--text-secondary);
    line-height: 1.6;
  }

  /* 搭配 Container Query */
  @container (min-width: 500px) {
    .content-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* ✅ 與 @layer 搭配使用 */
@layer components {
  @scope (.sidebar-nav) {
    a {
      display: block;
      padding: 0.75rem 1rem;
      min-height: 44px;
    }

    @media (max-width: 1023px) {
      :scope {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
      }
      :scope.open {
        transform: translateX(0);
      }
    }
  }
}

/* ✅ 對話框進場動畫（純 CSS，無需 JS） */
dialog[open] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;

  @starting-style {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* ✅ 響應式進場動畫 — 搭配 prefers-reduced-motion */
.fade-in-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;

  @starting-style {
    opacity: 0;
    transform: translateY(30px);
  }

  /* 減少動態偏好 */
  @media (prefers-reduced-motion: reduce) {
    transition: none;

    @starting-style {
      opacity: 1;
      transform: none;
    }
  }
}

/* ✅ CSS Anchor Positioning — 純 CSS Tooltip */
.tooltip-trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: fixed;
  position-anchor: --my-trigger;

  /* 預設定位在上方 */
  inset-area: top;
  margin-bottom: 8px;
  
  /* 空間不足時自動翻轉到下方 */
  position-try-fallbacks: flip-block;

  /* 樣式 */
  background: var(--tooltip-bg, #333);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  max-width: min(300px, 90vw);
  width: max-content;
}

/* ✅ 響應式調整 — 手機改為底部 Sheet */
@media (max-width: 767px) {
  .tooltip {
    position: fixed;
    position-anchor: auto;
    inset: auto 0 0 0;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    padding: 1rem;
  }
}

/* ✅ 使用 @supports 漸進增強 */
@supports (anchor-name: --test) {
  .tooltip {
    position: fixed;
    position-anchor: --trigger;
    inset-area: top;
  }
}

@supports not (anchor-name: --test) {
  /* Fallback：使用 JS 定位 */
  .tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
  }
}

// services/responsive.service.ts
import { Injectable, Signal, computed, signal } from '@angular/core'
import { toSignal } from '@angular/core/rxjs-interop'
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
import { map } from 'rxjs/operators'

/**
 * 企業級響應式服務（Angular 19 Signals 版）
 * 集中管理所有斷點狀態
 */
@Injectable({ providedIn: 'root' })
export class ResponsiveService {
  /** 自定義斷點（與 Tailwind / 企業標準統一） */
  private readonly BREAKPOINTS = {
    mobile: '(max-width: 767px)',
    tablet: '(min-width: 768px) and (max-width: 1023px)',
    desktop: '(min-width: 1024px)',
    wide: '(min-width: 1440px)',
  } as const

  /** Signal-based 斷點狀態（Angular 19 推薦） */
  readonly isMobile: Signal<boolean>
  readonly isTablet: Signal<boolean>
  readonly isDesktop: Signal<boolean>
  readonly isWide: Signal<boolean>

  /** 計算屬性 */
  readonly currentBreakpoint: Signal<string>
  readonly isMobileOrTablet: Signal<boolean>

  constructor(private breakpointObserver: BreakpointObserver) {
    this.isMobile = toSignal(
      this.breakpointObserver
        .observe(this.BREAKPOINTS.mobile)
        .pipe(map(result => result.matches)),
      { initialValue: false }
    )

    this.isTablet = toSignal(
      this.breakpointObserver
        .observe(this.BREAKPOINTS.tablet)
        .pipe(map(result => result.matches)),
      { initialValue: false }
    )

    this.isDesktop = toSignal(
      this.breakpointObserver
        .observe(this.BREAKPOINTS.desktop)
        .pipe(map(result => result.matches)),
      { initialValue: true }
    )

    this.isWide = toSignal(
      this.breakpointObserver
        .observe(this.BREAKPOINTS.wide)
        .pipe(map(result => result.matches)),
      { initialValue: false }
    )

    this.currentBreakpoint = computed(() => {
      if (this.isWide()) return 'wide'
      if (this.isDesktop()) return 'desktop'
      if (this.isTablet()) return 'tablet'
      return 'mobile'
    })

    this.isMobileOrTablet = computed(
      () => this.isMobile() || this.isTablet()
    )
  }

  /** 預設 Material Breakpoints（可搭配 Angular Material 使用） */
  readonly isHandset = toSignal(
    this.breakpointObserver
      .observe(Breakpoints.Handset)
      .pipe(map(r => r.matches)),
    { initialValue: false }
  )
}

// components/responsive-nav.component.ts
import { Component, inject } from '@angular/core'
import { NgTemplateOutlet } from '@angular/common'
import { RouterLink, RouterLinkActive } from '@angular/router'
import { ResponsiveService } from '../services/responsive.service'

@Component({
  selector: 'app-responsive-nav',
  standalone: true,
  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive],
  template: `
    @if (responsive.isMobile()) {
      <!-- 手機：漢堡選單 -->
      <nav class="mobile-nav">
        <button
          class="hamburger-btn"
          (click)="menuOpen = !menuOpen"
          [attr.aria-expanded]="menuOpen"
          aria-label="開啟導航選單"
        >
          <span class="hamburger-icon"></span>
        </button>

        @if (menuOpen) {
          <div class="mobile-menu-overlay" (click)="menuOpen = false">
            <div class="mobile-menu" (click)="$event.stopPropagation()">
              <ng-container *ngTemplateOutlet="navLinks" />
            </div>
          </div>
        }
      </nav>
    } @else {
      <!-- 平板 / 桌機：水平導航 -->
      <nav class="desktop-nav">
        <ng-container *ngTemplateOutlet="navLinks" />
      </nav>
    }

    <ng-template #navLinks>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/reports" routerLinkActive="active">報表</a>
      <a routerLink="/settings" routerLinkActive="active">設定</a>
    </ng-template>
  `,
  styles: [`
    .mobile-nav {
      position: relative;
    }

    .hamburger-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
    }

    .mobile-menu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 100;
    }

    .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: min(280px, 80vw);
      background: var(--surface, #fff);
      padding: 1rem;
      overflow-y: auto;
      animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
      from { transform: translateX(-100%); }
      to { transform: translateX(0); }
    }

    .desktop-nav {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .desktop-nav a,
    .mobile-menu a {
      padding: 0.75rem 1rem;
      text-decoration: none;
      color: var(--text, #333);
      border-radius: 6px;
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .desktop-nav a:hover {
      background: var(--hover, #f0f0f0);
    }

    a.active {
      color: var(--primary, #1976d2);
      font-weight: 600;
    }
  `],
})
export class ResponsiveNavComponent {
  readonly responsive = inject(ResponsiveService)
  menuOpen = false
}

// components/dashboard.component.ts
import { Component, inject } from '@angular/core'
import { ResponsiveService } from '../services/responsive.service'

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `
    <div class="dashboard-layout" [class.is-mobile]="responsive.isMobile()">

      <!-- Sidebar：桌機直接顯示，手機延遲載入 -->
      @if (responsive.isDesktop()) {
        <aside class="sidebar">
          <app-sidebar-menu />
        </aside>
      } @else {
        @defer (on interaction) {
          <app-mobile-drawer />
        } @placeholder {
          <button class="sidebar-toggle" aria-label="開啟側邊欄">
            ☰
          </button>
        }
      }

      <main class="main-content">
        <!-- 資料表格：桌機用表格，手機用卡片 -->
        @if (responsive.isDesktop()) {
          @defer (on viewport) {
            <app-data-table [data]="tableData" />
          } @loading (minimum 200ms) {
            <app-table-skeleton />
          }
        } @else {
          @defer (on viewport) {
            <app-data-cards [data]="tableData" />
          } @loading (minimum 200ms) {
            <app-card-skeleton />
          }
        }

        <!-- 圖表：只在桌機載入完整圖表庫 -->
        @defer (when responsive.isDesktop(); on viewport) {
          <app-chart-panel [data]="chartData" />
        } @placeholder {
          <div class="chart-placeholder">
            <p>📊 展開桌機版查看完整圖表</p>
          </div>
        }
      </main>
    </div>
  `,
  styles: [`
    .dashboard-layout {
      display: grid;
      grid-template-columns: 280px 1fr;
      min-height: 100dvh;
    }

    .dashboard-layout.is-mobile {
      grid-template-columns: 1fr;
    }

    .sidebar {
      border-right: 1px solid var(--border, #e0e0e0);
      padding: 1rem;
    }

    .main-content {
      padding: clamp(1rem, 3vw, 2rem);
      overflow-y: auto;
    }

    .chart-placeholder {
      padding: 2rem;
      text-align: center;
      background: var(--surface-variant, #f5f5f5);
      border-radius: 8px;
    }
  `],
})
export class DashboardComponent {
  readonly responsive = inject(ResponsiveService)
  tableData: any[] = []
  chartData: any[] = []
}

// directives/responsive-if.directive.ts
import {
  Directive,
  Input,
  TemplateRef,
  ViewContainerRef,
  inject,
  effect,
} from '@angular/core'
import { ResponsiveService } from '../services/responsive.service'

type BreakpointKey = 'mobile' | 'tablet' | 'desktop' | 'wide'

/**
 * 結構指令：依斷點條件渲染模板
 *
 * @example
 * <div *responsiveIf="'desktop'">桌機專屬內容</div>
 * <div *responsiveIf="'mobile'">手機專屬內容</div>
 */
@Directive({
  selector: '[responsiveIf]',
  standalone: true,
})
export class ResponsiveIfDirective {
  private readonly responsive = inject(ResponsiveService)
  private readonly templateRef = inject(TemplateRef)
  private readonly viewContainer = inject(ViewContainerRef)
  private hasView = false

  @Input()
  set responsiveIf(breakpoint: BreakpointKey) {
    effect(() => {
      const shouldShow = this.checkBreakpoint(breakpoint)

      if (shouldShow && !this.hasView) {
        this.viewContainer.createEmbeddedView(this.templateRef)
        this.hasView = true
      } else if (!shouldShow && this.hasView) {
        this.viewContainer.clear()
        this.hasView = false
      }
    })
  }

  private checkBreakpoint(bp: BreakpointKey): boolean {
    switch (bp) {
      case 'mobile': return this.responsive.isMobile()
      case 'tablet': return this.responsive.isTablet()
      case 'desktop': return this.responsive.isDesktop()
      case 'wide': return this.responsive.isWide()
    }
  }
}

<!-- 使用範例 -->
<app-data-table *responsiveIf="'desktop'" [data]="items" />
<app-data-cards *responsiveIf="'mobile'" [data]="items" />

<!-- 搭配 @defer 進一步優化 -->
<ng-container *responsiveIf="'desktop'">
  @defer (on viewport) {
    <app-advanced-chart [config]="chartConfig" />
  } @placeholder {
    <app-chart-skeleton />
  }
</ng-container>

// ✅ SSR-safe 響應式判斷
import { isPlatformBrowser } from '@angular/common'
import {
  Injectable,
  PLATFORM_ID,
  Signal,
  computed,
  inject,
  signal,
} from '@angular/core'

@Injectable({ providedIn: 'root' })
export class SsrResponsiveService {
  private readonly platformId = inject(PLATFORM_ID)
  private readonly isBrowser = isPlatformBrowser(this.platformId)

  /** SSR 預設桌機寬度（避免 hydration mismatch） */
  private readonly ssrWidth = signal(1280)

  /** 當前視窗寬度 */
  readonly viewportWidth: Signal<number> = computed(() => {
    if (!this.isBrowser) return this.ssrWidth()
    return window.innerWidth
  })

  /** SSR 安全的斷點判斷 */
  readonly isMobile = computed(
    () => this.isBrowser
      ? window.matchMedia('(max-width: 767px)').matches
      : false
  )

  readonly isDesktop = computed(
    () => this.isBrowser
      ? window.matchMedia('(min-width: 1024px)').matches
      : true  // SSR 預設桌機
  )
}

<!-- ✅ 根據螢幕寬度選擇最佳圖片 -->
<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg   400w,
    hero-800.jpg   800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w,
    hero-2400.jpg 2400w
  "
  sizes="
    (max-width: 576px) 100vw,
    (max-width: 1024px) 80vw,
    60vw
  "
  alt="Hero Banner"
  width="1600"
  height="900"
  loading="lazy"
  decoding="async"
/>

<!-- 針對高 DPI 螢幕（Retina） -->
<img
  src="logo.png"
  srcset="
    logo.png    1x,
    logo@2x.png 2x,
    logo@3x.png 3x
  "
  alt="Company Logo"
  width="200"
  height="60"
/>

<!-- ✅ Art Direction：不同裝置使用不同裁切 -->
<picture>
  <!-- 手機：正方形裁切 -->
  <source
    media="(max-width: 576px)"
    srcset="banner-mobile.avif"
    type="image/avif"
  />
  <source
    media="(max-width: 576px)"
    srcset="banner-mobile.webp"
    type="image/webp"
  />
  
  <!-- 平板：16:9 裁切 -->
  <source
    media="(max-width: 1024px)"
    srcset="banner-tablet.avif"
    type="image/avif"
  />
  <source
    media="(max-width: 1024px)"
    srcset="banner-tablet.webp"
    type="image/webp"
  />
  
  <!-- 桌機：超寬裁切 -->
  <source
    srcset="banner-desktop.avif"
    type="image/avif"
  />
  <source
    srcset="banner-desktop.webp"
    type="image/webp"
  />
  
  <!-- Fallback -->
  <img
    src="banner-desktop.jpg"
    alt="企業活動 Banner"
    width="1920"
    height="600"
    loading="lazy"
  />
</picture>

// 使用 sharp 批次產生多格式圖片（Node.js 建置腳本）
import sharp from 'sharp'

const sizes = [400, 800, 1200, 1600, 2400]
const formats = ['avif', 'webp', 'jpeg']

async function generateResponsiveImages(inputPath, outputDir) {
  for (const size of sizes) {
    for (const format of formats) {
      await sharp(inputPath)
        .resize(size)
        .toFormat(format, {
          quality: format === 'avif' ? 50 : format === 'webp' ? 75 : 80,
        })
        .toFile(`${outputDir}/image-${size}.${format}`)
    }
  }
}

<!-- ✅ 原生 lazy loading（推薦） -->
<img src="photo.jpg" loading="lazy" alt="..." width="800" height="600" />

<!-- ❌ 首屏圖片不要 lazy loading -->
<img src="hero.jpg" loading="eager" alt="..." width="1200" height="400" fetchpriority="high" />

// 進階 Lazy Loading with Intersection Observer
class LazyLoader {
  constructor(options = {}) {
    this.observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            this.loadImage(entry.target)
            this.observer.unobserve(entry.target)
          }
        })
      },
      {
        rootMargin: options.rootMargin || '200px 0px', // 提前 200px 開始載入
        threshold: options.threshold || 0,
      }
    )
  }

  observe(selector) {
    document.querySelectorAll(selector).forEach((el) => {
      this.observer.observe(el)
    })
  }

  loadImage(el) {
    if (el.dataset.src) {
      el.src = el.dataset.src
    }
    if (el.dataset.srcset) {
      el.srcset = el.dataset.srcset
    }
    el.classList.add('loaded')
  }
}

// 使用
const lazyLoader = new LazyLoader({ rootMargin: '300px 0px' })
lazyLoader.observe('img[data-src]')

<!-- ✅ 基本響應式影片 -->
<video
  controls
  preload="metadata"
  width="1920"
  height="1080"
  poster="/images/video-poster.webp"
  style="width: 100%; height: auto; aspect-ratio: 16 / 9;"
>
  <source src="/videos/demo.webm" type="video/webm" />
  <source src="/videos/demo.mp4" type="video/mp4" />
  <track
    kind="subtitles"
    src="/videos/demo-zh.vtt"
    srclang="zh-Hant"
    label="繁體中文"
    default
  />
  您的瀏覽器不支援 HTML5 影片。
</video>

/* ✅ 響應式影片 CSS */
video {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

/* ✅ 手機版調整 */
@media (max-width: 767px) {
  video {
    border-radius: 0;
    /* 手機全寬 */
    margin-inline: -1rem;
    width: calc(100% + 2rem);
    max-width: none;
  }
}

<!-- ✅ 現代做法：使用 aspect-ratio -->
<div class="video-embed">
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="教學影片標題"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>

/* ✅ 現代寫法 — 使用 aspect-ratio（推薦） */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

.video-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 8px;
}

/* ✅ Fallback — 傳統 padding-bottom 技巧（較舊瀏覽器） */
@supports not (aspect-ratio: 16 / 9) {
  .video-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
    height: 0;
    overflow: hidden;
  }

  .video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

<!-- ✅ Lite YouTube Embed — 點擊才載入 iframe -->
<div class="youtube-lite" data-video-id="VIDEO_ID">
  <picture>
    <source
      type="image/webp"
      srcset="https://i.ytimg.com/vi_webp/VIDEO_ID/maxresdefault.webp"
    />
    <img
      src="https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg"
      alt="影片標題"
      loading="lazy"
    />
  </picture>
  <button class="play-btn" aria-label="播放影片">
    <svg viewBox="0 0 68 48" width="68" height="48">
      <path d="M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.6c-3 .7-4.6 3.2-5.4 6.1C.1 13 0 24 0 24s.1 11 1.5 16.3c.8 2.9 2.5 5.4 5.4 6.2C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.6c3-.7 4.6-3.2 5.4-6.1C67.9 35 68 24 68 24s-.1-11-1.5-16.3z" fill="red"/>
      <path d="M45 24 27 14v20z" fill="white"/>
    </svg>
  </button>
</div>

// ✅ Lite YouTube Embed — JavaScript
document.querySelectorAll('.youtube-lite').forEach(container => {
  container.addEventListener('click', function() {
    const videoId = this.dataset.videoId
    const iframe = document.createElement('iframe')
    iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`
    iframe.title = this.querySelector('img')?.alt || '影片'
    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
    iframe.allowFullscreen = true
    iframe.style.cssText = 'width:100%; aspect-ratio:16/9; border:none; border-radius:8px;'
    this.replaceWith(iframe)
  })
})

/* ✅ Lite Embed 樣式 */
.youtube-lite {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.youtube-lite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}

.youtube-lite:hover img {
  opacity: 0.85;
}

.youtube-lite .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  transition: transform 0.2s;
}

.youtube-lite:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}

/* ✅ 響應式 iframe（Google Maps 等） */
.map-embed {
  width: 100%;
  max-width: 100%;
}

.map-embed iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: none;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .map-embed iframe {
    aspect-ratio: 1 / 1; /* 手機正方形較適合 */
    border-radius: 0;
  }
}

@media (min-width: 1024px) {
  .map-embed iframe {
    aspect-ratio: 21 / 9; /* 桌機寬螢幕比例 */
  }
}

// ❌ 頻繁觸發重排
for (let i = 0; i < items.length; i++) {
  element.style.width = items[i].width + 'px'   // 重排
  element.style.height = items[i].height + 'px'  // 重排
  const rect = element.getBoundingClientRect()    // 強制重排
}

// ✅ 批次操作，減少重排
const fragment = document.createDocumentFragment()
items.forEach(item => {
  const el = document.createElement('div')
  el.className = 'item'
  el.textContent = item.text
  fragment.appendChild(el)
})
container.appendChild(fragment)  // 只重排一次

// ❌ Layout Thrashing（讀寫交替）
elements.forEach(el => {
  const height = el.offsetHeight        // 讀（觸發佈局計算）
  el.style.height = height * 2 + 'px'  // 寫（使佈局無效）
})

// ✅ 先批次讀取，再批次寫入
const heights = elements.map(el => el.offsetHeight) // 批次讀
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2 + 'px'          // 批次寫
})

// ✅ 或使用 requestAnimationFrame
function batchUpdate() {
  requestAnimationFrame(() => {
    elements.forEach(el => {
      el.style.transform = `translateY(${calculateOffset(el)}px)`
    })
  })
}

/* ✅ 使用 transform 代替改變位置屬性 */
.sidebar {
  /* ❌ */
  /* left: -280px; */
  /* ✅ */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.sidebar.is-open {
  transform: translateX(0);
}

/* ✅ 預留空間避免 CLS */
img, video {
  aspect-ratio: 16 / 9;     /* 預設比例 */
  width: 100%;
  height: auto;
}

/* ✅ 使用 contain 限制重排範圍 */
.card {
  contain: layout style;     /* 告訴瀏覽器此元素不會影響外部佈局 */
}

/* ✅ 使用 content-visibility 跳過非可視區域的渲染 */
.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;  /* 預估高度 */
}

/* ✅ 觸發 GPU 加速的屬性（只觸發合成，不觸發重排重繪） */
.animated-element {
  /* 以下屬性不觸發 Layout 或 Paint */
  transform: translateX(100px);
  opacity: 0.5;
  filter: blur(2px);
}

/* ❌ 觸發重繪的屬性 */
.animated-element {
  /* 以下屬性會觸發 Paint */
  background-color: red;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border-radius: 8px;
}

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <!-- ✅ Critical CSS：內嵌到 <head> -->
  <style>
    /* 只包含首屏需要的樣式 */
    *,*::before,*::after{box-sizing:border-box;margin:0}
    body{font-family:system-ui,sans-serif;line-height:1.5}
    .app-shell{display:grid;grid-template-rows:56px 1fr;min-height:100dvh}
    .app-header{display:flex;align-items:center;padding:0 1rem;background:#fff;border-bottom:1px solid #e0e0e0}
    .app-content{padding:1rem}
    .hero{padding:3rem 1rem;text-align:center}
    .hero h1{font-size:clamp(1.5rem,4vw,3rem)}
  </style>
  
  <!-- ✅ 非首屏 CSS：異步載入 -->
  <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/main.css"></noscript>
</head>

// 使用 critical 套件（建置時提取）
import critical from 'critical'

await critical.generate({
  base: 'dist/',
  src: 'index.html',
  target: {
    html: 'index-critical.html',
    css: 'critical.css',
  },
  width: 1300,
  height: 900,
  dimensions: [
    { width: 375, height: 812 },    // iPhone
    { width: 768, height: 1024 },   // iPad
    { width: 1440, height: 900 },   // Desktop
  ],
  inline: true,
})

/* ❌ 過多冗餘的 Media Query */
.card { padding: 1rem; }
@media (min-width: 576px) { .card { padding: 1.1rem; } }
@media (min-width: 768px) { .card { padding: 1.2rem; } }
@media (min-width: 1024px) { .card { padding: 1.3rem; } }
@media (min-width: 1280px) { .card { padding: 1.5rem; } }

/* ✅ 使用 clamp() 一行搞定 */
.card { padding: clamp(1rem, 2vw, 1.5rem); }

/* ❌ 每個 breakpoint 寫一次佈局 */
.grid { display: flex; flex-wrap: wrap; }
.grid-item { width: 100%; }
@media (min-width: 576px) { .grid-item { width: 50%; } }
@media (min-width: 768px) { .grid-item { width: 33.333%; } }
@media (min-width: 1024px) { .grid-item { width: 25%; } }

/* ✅ 使用 CSS Grid auto-fit 自動適配 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* 問題 1：圖片載入後版面跳動 */
/* ❌ */
img { width: 100%; }

/* ✅ 預設比例 */
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;     /* 預留比例空間 */
}

/* 問題 2：Web Font 載入造成 FOUT */
/* ✅ 設定 font-display */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;        /* 先顯示系統字體，字體載入後切換 */
}

/* ✅ 使用 size-adjust 減少切換時的版面偏移 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
}

/* 問題 3：動態內容插入造成跳動 */
/* ✅ 預留空間 */
.ad-slot {
  min-height: 250px;     /* 預留廣告位高度 */
  contain: layout;
}

.skeleton-loader {
  min-height: 200px;     /* 骨架屏預留高度 */
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* ❌ 反模式：固定寬度 */
.container {
  width: 1200px;     /* 小螢幕出現水平捲動 */
}

.card {
  width: 350px;      /* 手機無法完整顯示 */
}

/* ✅ 正確做法 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.card {
  width: 100%;
  max-width: 350px;
}

/* ❌ 全部用 px */
.content {
  font-size: 14px;
  padding: 20px;
  margin-bottom: 30px;
  line-height: 22px;
}

/* ✅ 混合使用適當單位 */
.content {
  font-size: 0.875rem;           /* 相對字體大小 */
  padding: clamp(1rem, 2vw, 1.5rem); /* 響應式間距 */
  margin-bottom: 1.5rem;         /* 相對間距 */
  line-height: 1.6;              /* 無單位行高 */
}

/* ❌ 點擊區域太小 */
.nav-link {
  font-size: 12px;
  padding: 2px 4px;     /* 實際可點擊區域很小 */
}

/* ✅ 確保足夠的觸控面積 */
.nav-link {
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  min-height: 44px;       /* Apple HIG 標準 */
  display: inline-flex;
  align-items: center;
}

/* ✅ 小元素擴大點擊區域 */
.icon-button {
  position: relative;
  width: 24px;
  height: 24px;
}
.icon-button::before {
  content: '';
  position: absolute;
  inset: -10px;          /* 向外擴展 10px */
}

/* ❌ 只考慮 hover */
.btn:hover {
  background: var(--primary-dark);
}

/* ✅ 區分 hover 與 touch 裝置 */
@media (hover: hover) {
  .btn:hover {
    background: var(--primary-dark);
  }
}

@media (hover: none) {
  .btn:active {
    background: var(--primary-dark);
  }
}

/* ✅ 混合使用 */
.btn {
  transition: background 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  /* 桌機：有 hover + 精確指標 */
  .btn:hover { background: var(--primary-light); }
}

@media (pointer: coarse) {
  /* 觸控裝置：加大點擊區域 */
  .btn { min-height: 48px; min-width: 48px; }
}

/* ❌ 表格在手機上直接溢出 */
table {
  width: 100%;
  /* 沒有任何手機處理 */
}

/* ✅ 至少加上水平捲動 */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ✅ 或使用前面第 3.5 節的卡片式變換 */

/* ❌ 字體太小 */
body { font-size: 12px; }
.small-text { font-size: 10px; }

/* ✅ 最小 16px，且使用相對單位 */
body { font-size: 1rem; }         /* 16px */
.small-text { font-size: 0.875rem; } /* 14px，這是最小建議值 */

/* ✅ 使用 clamp 讓字體在不同裝置流暢變化 */
body {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

/* ========================================
 * 企業 Breakpoint 標準（CSS Custom Properties）
 * ======================================== */
:root {
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}

// SCSS 版本
$breakpoints: (
  'sm':  576px,
  'md':  768px,
  'lg':  1024px,
  'xl':  1280px,
  '2xl': 1536px,
) !default;

@mixin respond-to($bp) {
  @media (min-width: map-get($breakpoints, $bp)) {
    @content;
  }
}

@mixin respond-below($bp) {
  @media (max-width: #{map-get($breakpoints, $bp) - 0.02px}) {
    @content;
  }
}

@mixin respond-between($lower, $upper) {
  @media (min-width: map-get($breakpoints, $lower)) and (max-width: #{map-get($breakpoints, $upper) - 0.02px}) {
    @content;
  }
}

/* BEM 命名 + 響應式修飾詞 */
.card {}                          /* Block */
.card__header {}                  /* Element */
.card__body {}
.card__footer {}
.card--featured {}                /* Modifier */
.card--compact {}

/* 響應式工具類命名規範 */
.d-none {}                        /* display: none */
.d-block {}
.d-flex {}
.md\:d-none {}                    /* md 以上隱藏 */
.md\:d-flex {}                    /* md 以上使用 flex */

/* 間距工具類 */
.p-{size} {}                      /* padding */
.m-{size} {}                      /* margin */
.gap-{size} {}                    /* gap */

styles/
├── _variables.css          /* 變數（含 breakpoint） */
├── _reset.css              /* CSS Reset / Normalize */
├── _typography.css         /* 字體系統 */
├── _utilities.css          /* 工具類 */
├── layout/
│   ├── _app-shell.css      /* 應用外殼 */
│   ├── _header.css         /* 頂部 */
│   ├── _sidebar.css        /* 側邊欄 */
│   └── _footer.css         /* 底部 */
├── components/
│   ├── _button.css         /* 按鈕 */
│   ├── _card.css           /* 卡片 */
│   ├── _form.css           /* 表單 */
│   ├── _modal.css          /* Modal */
│   ├── _table.css          /* 表格 */
│   └── _nav.css            /* 導航 */
└── pages/
    ├── _dashboard.css      /* Dashboard 頁面 */
    └── _login.css          /* 登入頁面 */

規則 1：App Shell 使用 CSS Grid
規則 2：頁面內容區使用 CSS Grid 或 Flexbox
規則 3：元件內部使用 Flexbox
規則 4：不允許使用 float 進行佈局
規則 5：不允許使用 table 元素進行佈局
規則 6：z-index 統一管理

:root {
  --z-dropdown:    1000;
  --z-sticky:      1020;
  --z-fixed:       1030;
  --z-sidebar:     1040;
  --z-modal-bg:    1050;
  --z-modal:       1060;
  --z-popover:     1070;
  --z-tooltip:     1080;
  --z-toast:       1090;
}

// tests/responsive.spec.ts
import { test, expect } from '@playwright/test'

const viewports = [
  { name: 'mobile', width: 375, height: 812 },
  { name: 'tablet', width: 768, height: 1024 },
  { name: 'desktop', width: 1280, height: 800 },
  { name: 'wide', width: 1920, height: 1080 },
]

for (const viewport of viewports) {
  test.describe(`${viewport.name} (${viewport.width}x${viewport.height})`, () => {
    test.beforeEach(async ({ page }) => {
      await page.setViewportSize({ 
        width: viewport.width, 
        height: viewport.height 
      })
    })

    test('no horizontal scrollbar', async ({ page }) => {
      await page.goto('/')
      const scrollWidth = await page.evaluate(
        () => document.documentElement.scrollWidth
      )
      const clientWidth = await page.evaluate(
        () => document.documentElement.clientWidth
      )
      expect(scrollWidth).toBeLessThanOrEqual(clientWidth)
    })

    test('navigation is accessible', async ({ page }) => {
      await page.goto('/')
      if (viewport.width < 1024) {
        // 手機/平板：漢堡選單應該存在
        const menuBtn = page.locator('[data-testid="menu-toggle"]')
        await expect(menuBtn).toBeVisible()
        
        // 點擊後側邊欄展開
        await menuBtn.click()
        const sidebar = page.locator('[data-testid="sidebar"]')
        await expect(sidebar).toBeVisible()
      } else {
        // 桌機：側邊欄永遠可見
        const sidebar = page.locator('[data-testid="sidebar"]')
        await expect(sidebar).toBeVisible()
      }
    })

    test('touch targets are large enough', async ({ page }) => {
      await page.goto('/')
      const buttons = await page.locator('button, a, [role="button"]').all()
      
      for (const button of buttons) {
        if (await button.isVisible()) {
          const box = await button.boundingBox()
          if (box) {
            expect(box.width).toBeGreaterThanOrEqual(44)
            expect(box.height).toBeGreaterThanOrEqual(44)
          }
        }
      }
    })

    test('text is readable', async ({ page }) => {
      await page.goto('/')
      const bodyFontSize = await page.evaluate(() => {
        return parseFloat(
          window.getComputedStyle(document.body).fontSize
        )
      })
      expect(bodyFontSize).toBeGreaterThanOrEqual(16)
    })

    test('screenshot comparison', async ({ page }) => {
      await page.goto('/')
      await expect(page).toHaveScreenshot(
        `homepage-${viewport.name}.png`,
        { fullPage: true }
      )
    })
  })
}

// cypress/e2e/responsive.cy.ts
const viewports: Cypress.ViewportPreset[] = [
  'iphone-x',
  'ipad-2',
  'macbook-15',
]

viewports.forEach((viewport) => {
  describe(`Responsive (${viewport})`, () => {
    beforeEach(() => {
      cy.viewport(viewport)
      cy.visit('/')
    })

    it('should not have horizontal overflow', () => {
      cy.document().then((doc) => {
        expect(doc.documentElement.scrollWidth)
          .to.be.at.most(doc.documentElement.clientWidth)
      })
    })

    it('should display navigation correctly', () => {
      if (viewport === 'iphone-x') {
        cy.get('[data-testid="menu-toggle"]').should('be.visible')
        cy.get('[data-testid="desktop-nav"]').should('not.be.visible')
      } else if (viewport === 'macbook-15') {
        cy.get('[data-testid="menu-toggle"]').should('not.be.visible')
        cy.get('[data-testid="desktop-nav"]').should('be.visible')
      }
    })
  })
})

{
  "id": "enterprise-app",
  "viewports": [
    { "label": "phone", "width": 375, "height": 812 },
    { "label": "tablet", "width": 768, "height": 1024 },
    { "label": "desktop", "width": 1280, "height": 800 }
  ],
  "scenarios": [
    {
      "label": "Homepage",
      "url": "http://localhost:3000",
      "delay": 1000,
      "misMatchThreshold": 0.1
    },
    {
      "label": "Dashboard",
      "url": "http://localhost:3000/dashboard",
      "delay": 2000,
      "misMatchThreshold": 0.1
    },
    {
      "label": "Login Form",
      "url": "http://localhost:3000/login",
      "delay": 500,
      "misMatchThreshold": 0.05
    },
    {
      "label": "Mobile Menu Open",
      "url": "http://localhost:3000",
      "viewports": [{ "label": "phone", "width": 375, "height": 812 }],
      "clickSelector": "[data-testid='menu-toggle']",
      "postInteractionWait": 500,
      "misMatchThreshold": 0.1
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "html_report": "backstop_data/html_report"
  },
  "engine": "playwright",
  "engineOptions": {
    "browser": "chromium"
  },
  "report": ["browser"]
}

# 建立基準截圖
npx backstop reference

# 執行視覺比對
npx backstop test

# 若新截圖正確，更新基準
npx backstop approve

# .github/workflows/visual-regression.yml
name: Visual Regression Test

on:
  pull_request:
    paths:
      - 'src/**/*.css'
      - 'src/**/*.scss'
      - 'src/**/*.vue'
      - 'src/**/*.tsx'

jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build application
        run: npm run build
      
      - name: Start preview server
        run: npx serve dist -l 3000 &
      
      - name: Wait for server
        run: npx wait-on http://localhost:3000
      
      - name: Run BackstopJS
        run: npx backstop test
      
      - name: Upload report
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: backstop-report
          path: backstop_data/html_report

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>企業管理系統 - Dashboard</title>
  <style>
    /* =============================================
     * CSS Reset & Variables
     * ============================================= */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      /* Colors */
      --primary: #1976d2;
      --primary-light: #e3f2fd;
      --primary-dark: #1565c0;
      --success: #2e7d32;
      --warning: #f57f17;
      --danger: #c62828;
      --text-primary: #212121;
      --text-secondary: #757575;
      --bg-primary: #ffffff;
      --bg-secondary: #f5f5f5;
      --bg-page: #fafafa;
      --border-color: #e0e0e0;
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
      
      /* Layout */
      --header-height: 56px;
      --sidebar-width: 260px;
      --sidebar-collapsed-width: 64px;
      
      /* Typography */
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                   "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: var(--text-primary);
    }

    /* =============================================
     * App Shell (CSS Grid)
     * ============================================= */
    .app-shell {
      display: grid;
      grid-template-rows: var(--header-height) 1fr;
      grid-template-columns: var(--sidebar-width) 1fr;
      grid-template-areas:
        "header  header"
        "sidebar content";
      min-height: 100dvh;
    }

    /* 平板：Sidebar 折疊 */
    @media (768px <= width < 1024px) {
      .app-shell {
        grid-template-columns: var(--sidebar-collapsed-width) 1fr;
      }
    }

    /* 手機：單欄 */
    @media (width < 768px) {
      .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "content";
      }
    }

    /* =============================================
     * Header
     * ============================================= */
    .header {
      grid-area: header;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      background: var(--bg-primary);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .menu-toggle {
      display: none;
      background: none;
      border: none;
      padding: 0.5rem;
      cursor: pointer;
      font-size: 1.5rem;
      color: var(--text-primary);
      border-radius: 4px;
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }

    @media (width < 768px) {
      .menu-toggle {
        display: inline-flex;
      }
    }

    .header-logo {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--primary);
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .header-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--primary-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.875rem;
    }

    .header-user-name {
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    @media (width < 576px) {
      .header-user-name {
        display: none;
      }
    }

    /* =============================================
     * Sidebar
     * ============================================= */
    .sidebar {
      grid-area: sidebar;
      background: var(--bg-primary);
      border-right: 1px solid var(--border-color);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      transition: width 0.3s ease;
    }

    .sidebar-nav {
      padding: 0.75rem 0;
      list-style: none;
      flex: 1;
    }

    .sidebar-nav-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1.25rem;
      color: var(--text-primary);
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: all 0.2s;
      min-height: 44px;
    }

    .sidebar-nav-item:hover {
      background: var(--bg-secondary);
    }

    .sidebar-nav-item.active {
      background: var(--primary-light);
      border-left-color: var(--primary);
      color: var(--primary);
      font-weight: 600;
    }

    .sidebar-nav-item .icon {
      width: 20px;
      text-align: center;
      flex-shrink: 0;
    }

    .sidebar-nav-item .label {
      white-space: nowrap;
      overflow: hidden;
    }

    /* 平板：折疊 Sidebar */
    @media (768px <= width < 1024px) {
      .sidebar {
        width: var(--sidebar-collapsed-width);
        overflow: visible;
      }
      .sidebar-nav-item .label {
        display: none;
      }
      .sidebar-nav-item {
        justify-content: center;
        padding: 0.75rem;
      }
      .sidebar:hover {
        width: var(--sidebar-width);
        position: absolute;
        height: calc(100dvh - var(--header-height));
        top: var(--header-height);
        z-index: 50;
        box-shadow: var(--shadow-md);
      }
      .sidebar:hover .sidebar-nav-item .label {
        display: inline;
      }
      .sidebar:hover .sidebar-nav-item {
        justify-content: flex-start;
        padding: 0.75rem 1.25rem;
      }
    }

    /* 手機：Overlay Sidebar */
    @media (width < 768px) {
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100dvh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: var(--shadow-md);
      }
      .sidebar.is-open {
        transform: translateX(0);
      }
    }

    .sidebar-overlay {
      display: none;
    }

    @media (width < 768px) {
      .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
      }
      .sidebar-overlay.is-visible {
        opacity: 1;
        pointer-events: auto;
      }
    }

    /* =============================================
     * Content Area
     * ============================================= */
    .content {
      grid-area: content;
      background: var(--bg-page);
      overflow-y: auto;
      padding: clamp(1rem, 3vw, 2rem);
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .page-title {
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 700;
      color: var(--text-primary);
    }

    @media (width < 576px) {
      .page-header {
        flex-direction: column;
        align-items: stretch;
      }
    }

    /* =============================================
     * KPI Cards
     * ============================================= */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    @media (width < 1024px) {
      .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (width < 576px) {
      .kpi-grid {
        grid-template-columns: 1fr;
      }
    }

    .kpi-card {
      background: var(--bg-primary);
      border-radius: 8px;
      padding: 1.25rem;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .kpi-label {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .kpi-value {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
    }

    .kpi-change {
      font-size: 0.8125rem;
      font-weight: 500;
    }

    .kpi-change.positive { color: var(--success); }
    .kpi-change.negative { color: var(--danger); }

    /* =============================================
     * Chart Grid
     * ============================================= */
    .chart-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    @media (width < 768px) {
      .chart-grid {
        grid-template-columns: 1fr;
      }
    }

    .chart-card {
      background: var(--bg-primary);
      border-radius: 8px;
      padding: 1.25rem;
      box-shadow: var(--shadow-sm);
    }

    .chart-card h3 {
      font-size: 1rem;
      margin-bottom: 1rem;
      color: var(--text-primary);
    }

    .chart-placeholder {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, var(--primary-light) 0%, #f3e5f5 100%);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      font-size: 0.875rem;
    }

    /* =============================================
     * Data Table (Responsive)
     * ============================================= */
    .table-section {
      background: var(--bg-primary);
      border-radius: 8px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .table-header h3 {
      font-size: 1rem;
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
    }

    .data-table th,
    .data-table td {
      padding: 0.75rem 1.25rem;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }

    .data-table th {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-secondary);
      background: var(--bg-secondary);
      white-space: nowrap;
    }

    .data-table td {
      font-size: 0.875rem;
    }

    .data-table tbody tr:hover {
      background: var(--bg-secondary);
    }

    /* 狀態標籤 */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.625rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .badge--success {
      background: #e8f5e9;
      color: var(--success);
    }

    .badge--warning {
      background: #fff8e1;
      color: var(--warning);
    }

    .badge--danger {
      background: #ffebee;
      color: var(--danger);
    }

    .badge--info {
      background: var(--primary-light);
      color: var(--primary);
    }

    /* ✅ 手機：表格 → 卡片 */
    @media (width < 768px) {
      .data-table thead {
        display: none;
      }
      .data-table tbody tr {
        display: block;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
      }
      .data-table tbody tr:last-child {
        border-bottom: none;
      }
      .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
        border: none;
        font-size: 0.875rem;
      }
      .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8125rem;
        color: var(--text-secondary);
        flex: 0 0 40%;
      }
    }

    /* =============================================
     * Buttons
     * ============================================= */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.625rem 1.25rem;
      border: none;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      min-height: 44px;
      text-decoration: none;
      white-space: nowrap;
    }

    .btn--primary {
      background: var(--primary);
      color: white;
    }

    @media (hover: hover) {
      .btn--primary:hover {
        background: var(--primary-dark);
      }
    }

    .btn--outline {
      background: transparent;
      color: var(--primary);
      border: 1px solid var(--primary);
    }

    @media (width < 576px) {
      .btn {
        width: 100%;
      }
    }

    /* =============================================
     * Utilities
     * ============================================= */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  </style>
</head>
<body>
  <div class="app-shell">
    <!-- ===== Header ===== -->
    <header class="header">
      <div class="header-left">
        <button class="menu-toggle" id="menuToggle" aria-label="展開選單">☰</button>
        <span class="header-logo">📊 企業管理系統</span>
      </div>
      <div class="header-right">
        <span class="header-user-name">王小明</span>
        <div class="header-avatar">王</div>
      </div>
    </header>

    <!-- ===== Sidebar Overlay ===== -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- ===== Sidebar ===== -->
    <nav class="sidebar" id="sidebar">
      <ul class="sidebar-nav">
        <li>
          <a href="#" class="sidebar-nav-item active">
            <span class="icon">📊</span>
            <span class="label">儀表板</span>
          </a>
        </li>
        <li>
          <a href="#" class="sidebar-nav-item">
            <span class="icon">📋</span>
            <span class="label">訂單管理</span>
          </a>
        </li>
        <li>
          <a href="#" class="sidebar-nav-item">
            <span class="icon">👥</span>
            <span class="label">客戶管理</span>
          </a>
        </li>
        <li>
          <a href="#" class="sidebar-nav-item">
            <span class="icon">📦</span>
            <span class="label">庫存管理</span>
          </a>
        </li>
        <li>
          <a href="#" class="sidebar-nav-item">
            <span class="icon">📈</span>
            <span class="label">報表分析</span>
          </a>
        </li>
        <li>
          <a href="#" class="sidebar-nav-item">
            <span class="icon">⚙️</span>
            <span class="label">系統設定</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- ===== Main Content ===== -->
    <main class="content">
      <!-- Page Header -->
      <div class="page-header">
        <h1 class="page-title">儀表板</h1>
        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
          <button class="btn btn--outline">匯出報表</button>
          <button class="btn btn--primary">+ 新增訂單</button>
        </div>
      </div>

      <!-- KPI Cards -->
      <section class="kpi-grid">
        <div class="kpi-card">
          <span class="kpi-label">本月營收</span>
          <span class="kpi-value">NT$ 12.5M</span>
          <span class="kpi-change positive">↑ 12.3% vs 上月</span>
        </div>
        <div class="kpi-card">
          <span class="kpi-label">訂單數量</span>
          <span class="kpi-value">1,284</span>
          <span class="kpi-change positive">↑ 8.7% vs 上月</span>
        </div>
        <div class="kpi-card">
          <span class="kpi-label">客戶數</span>
          <span class="kpi-value">3,456</span>
          <span class="kpi-change positive">↑ 5.2% vs 上月</span>
        </div>
        <div class="kpi-card">
          <span class="kpi-label">退貨率</span>
          <span class="kpi-value">2.1%</span>
          <span class="kpi-change negative">↑ 0.3% vs 上月</span>
        </div>
      </section>

      <!-- Charts -->
      <section class="chart-grid">
        <div class="chart-card">
          <h3>每月營收趨勢</h3>
          <div class="chart-placeholder">📊 營收折線圖</div>
        </div>
        <div class="chart-card">
          <h3>產品類別分佈</h3>
          <div class="chart-placeholder">🥧 產品圓餅圖</div>
        </div>
      </section>

      <!-- Data Table -->
      <section class="table-section">
        <div class="table-header">
          <h3>近期訂單</h3>
          <button class="btn btn--outline" style="width: auto; min-height: 36px; padding: 0.375rem 0.75rem;">
            查看全部 →
          </button>
        </div>
        <table class="data-table">
          <thead>
            <tr>
              <th>訂單編號</th>
              <th>客戶名稱</th>
              <th>金額</th>
              <th>日期</th>
              <th>狀態</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="訂單編號">ORD-2026-0142</td>
              <td data-label="客戶名稱">台灣銀行</td>
              <td data-label="金額">NT$ 1,500,000</td>
              <td data-label="日期">2026/02/14</td>
              <td data-label="狀態"><span class="badge badge--success">已完成</span></td>
            </tr>
            <tr>
              <td data-label="訂單編號">ORD-2026-0141</td>
              <td data-label="客戶名稱">中華電信</td>
              <td data-label="金額">NT$ 890,000</td>
              <td data-label="日期">2026/02/13</td>
              <td data-label="狀態"><span class="badge badge--info">處理中</span></td>
            </tr>
            <tr>
              <td data-label="訂單編號">ORD-2026-0140</td>
              <td data-label="客戶名稱">台積電</td>
              <td data-label="金額">NT$ 3,200,000</td>
              <td data-label="日期">2026/02/12</td>
              <td data-label="狀態"><span class="badge badge--success">已完成</span></td>
            </tr>
            <tr>
              <td data-label="訂單編號">ORD-2026-0139</td>
              <td data-label="客戶名稱">鴻海精密</td>
              <td data-label="金額">NT$ 2,100,000</td>
              <td data-label="日期">2026/02/11</td>
              <td data-label="狀態"><span class="badge badge--warning">待確認</span></td>
            </tr>
            <tr>
              <td data-label="訂單編號">ORD-2026-0138</td>
              <td data-label="客戶名稱">統一企業</td>
              <td data-label="金額">NT$ 750,000</td>
              <td data-label="日期">2026/02/10</td>
              <td data-label="狀態"><span class="badge badge--danger">已取消</span></td>
            </tr>
          </tbody>
        </table>
      </section>
    </main>
  </div>

  <script>
    // =============================================
    // Sidebar Toggle (手機版)
    // =============================================
    const menuToggle = document.getElementById('menuToggle')
    const sidebar = document.getElementById('sidebar')
    const overlay = document.getElementById('sidebarOverlay')

    function openSidebar() {
      sidebar.classList.add('is-open')
      overlay.classList.add('is-visible')
      document.body.style.overflow = 'hidden'
    }

    function closeSidebar() {
      sidebar.classList.remove('is-open')
      overlay.classList.remove('is-visible')
      document.body.style.overflow = ''
    }

    menuToggle.addEventListener('click', () => {
      if (sidebar.classList.contains('is-open')) {
        closeSidebar()
      } else {
        openSidebar()
      }
    })

    overlay.addEventListener('click', closeSidebar)

    // 視窗大小變化時自動關閉手機 Sidebar
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 768) {
        closeSidebar()
      }
    })

    // ESC 鍵關閉
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        closeSidebar()
      }
    })
  </script>
</body>
</html>