/* 慶旺清潔 —— 設計系統
   來源：kingown-design（慶旺興業品牌規範）。色彩取自制服印製色票
   PANTONE 2228 U #12B6CB（主）與 PANTONE 2008 U #F7C376（輔），
   標準字灰 #7C7D7D 展開為中性階。字體為源泉圓體 GenSenMaruGothicTW。

   本檔是全站樣式的唯一來源。各頁 inline style 大量引用下方的 CSS 變數，
   因此變數名沿用舊有命名（--color-accent-* 等），只把值換成品牌色，
   改這裡即可整站換色。 */

/* ── 字體 ───────────────────────────────────────────────────────────
   子集化的 woff2 由 tools/build-fonts.sh 產生（原始 TTF 每個 14MB）。
   子集只含站內出現過的字，改文案後請重跑該腳本。 */
@font-face{font-family:"GenSenMaruGothicTW";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/GenSenMaruGothicTW-Regular.woff2") format("woff2")}
@font-face{font-family:"GenSenMaruGothicTW";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/GenSenMaruGothicTW-Medium.woff2") format("woff2")}
@font-face{font-family:"GenSenMaruGothicTW";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/GenSenMaruGothicTW-Bold.woff2") format("woff2")}
@font-face{font-family:"GenSenMaruGothicTW";font-style:normal;font-weight:900;font-display:swap;
  src:url("assets/fonts/GenSenMaruGothicTW-Heavy.woff2") format("woff2")}

:root {
  --color-bg: #ffffff;
  --color-surface: #f4f5f5;       /* 沉陷面：分區底色、卡片底 */
  --color-text: #1e1f1f;
  --color-accent: #12b6cb;        /* PANTONE 2228 U */
  --color-accent-2: #f7c376;      /* PANTONE 2008 U —— 全站唯一的強調色，一個畫面最多一處 */
  --color-divider: #e9eaea;

  /* 中性階 —— 以標準字灰 #7C7D7D 為 500 展開 */
  --color-neutral-25: #fafbfb;
  --color-neutral-50: #f4f5f5;
  --color-neutral-100: #e9eaea;
  --color-neutral-200: #d6d7d7;
  --color-neutral-300: #bcbdbd;
  --color-neutral-400: #9c9d9d;
  --color-neutral-500: #7c7d7d;
  --color-neutral-600: #626363;
  --color-neutral-700: #4a4b4b;
  --color-neutral-800: #333434;
  --color-neutral-900: #1e1f1f;

  /* 主色階 —— 青 */
  --color-accent-50:  #e7f8fa;
  --color-accent-100: #e7f8fa;
  --color-accent-200: #c4eff4;
  --color-accent-300: #8ee0ea;
  --color-accent-400: #52cedd;
  --color-accent-500: #12b6cb;
  --color-accent-600: #0e96a8;
  --color-accent-700: #0b7685;
  --color-accent-800: #095b66;
  --color-accent-900: #06424a;

  /* 輔色階 —— 沙 */
  --color-accent-2-100: #fef7eb;
  --color-accent-2-200: #fdecd1;
  --color-accent-2-300: #fbdca9;
  --color-accent-2-400: #f9ce8b;
  --color-accent-2-500: #f7c376;
  --color-accent-2-600: #de9528;
  --color-accent-2-700: #b4761d;
  --color-accent-2-800: #8a5a16;
  --color-accent-2-900: #5e3d0f;

  /* 狀態色 —— 刻意壓抑，不與品牌青搶眼 */
  --color-danger-100: #fbddd8;
  --color-danger-500: #e04e3c;
  --color-danger-700: #a33325;
  --color-success-100: #d6f2e5;
  --color-success-500: #1fa971;
  --color-success-700: #14724d;

  --font-body: "GenSenMaruGothicTW", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-heading: var(--font-body);
  --font-heading-weight: 700;

  /* 中文需要字距才透氣；純英數串用 0 */
  --tracking-cjk: 0.04em;
  --tracking-cjk-tight: 0.02em;
  --tracking-caps: 0.12em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* 標誌是四塊磚，每塊被切掉一個特大四分圓；圓角因此走得寬 */
  --radius-sm: 6px;
  --radius-md: 10px;   /* 控件 */
  --radius-lg: 20px;   /* 卡片 */
  --radius-xl: 28px;   /* 大面板 */
  --radius-pill: 999px;
  --radius-tile-cut: 70px;  /* 那個特大四分圓，一個畫面用一到兩次 */

  /* 陰影一律低對比、純中性、無彩色偏移 */
  --shadow-sm: 0 1px 2px rgba(30, 31, 31, .06);
  --shadow-md: 0 6px 16px -4px rgba(30, 31, 31, .10);
  --shadow-lg: 0 14px 32px -8px rgba(30, 31, 31, .14);
  --shadow-brand: 0 8px 20px -6px rgba(18, 182, 203, .45);  /* 唯一的彩色陰影：主按鈕 hover */
  --ring-brand: 0 0 0 3px rgba(18, 182, 203, .28);
  --ring-danger: 0 0 0 3px rgba(224, 78, 60, .26);

  /* 主要動作色 —— 刻意偏離供稿規範，請見下方說明。
     kingown-design 的 Button 規格是 --action-primary: cyan-500 (#12B6CB) 配白字，
     但白字對 #12B6CB 的對比只有 2.45:1，遠低於 WCAG AA 對 14px 粗體所要求的 4.5:1。
     這裡改用 cyan-700 (#0B7685)，對比 5.36:1，通過 AA，色相仍在品牌青系內。
     若要回到規範原色，把下面三行換成 -500 / -600 / -700 即可（會失去 AA 合規）。 */
  --action-primary: var(--color-accent-700);
  --action-primary-hover: var(--color-accent-800);
  --action-primary-active: var(--color-accent-900);

  /* 動態：短、單向、無彈跳 */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-neutral-700);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: var(--tracking-cjk);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: var(--tracking-cjk-tight);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: 44px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: var(--tracking-caps); text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-accent-800); text-decoration: underline; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 12px; margin-top: var(--space-1); color: var(--color-neutral-500); }
.text-muted { color: var(--color-neutral-500); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring-brand); border-radius: var(--radius-sm); }
::selection { background: var(--color-accent-200); color: var(--color-accent-900); }

/* 品牌造型母題：磚塊被切掉一個特大四分圓 */
.tile-cut-br { border-bottom-right-radius: var(--radius-tile-cut); }
.tile-cut-tr { border-top-right-radius: var(--radius-tile-cut); }

/* — 分隔線 — */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — 圖框 —
   品牌不做濾鏡、不加顆粒、不用網點：照片就是照片，只給圓角與底色。 */
.fig {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
}

/* — 數據 —
   取代原本的 CMYK 分色數字；重量由字重與青色承擔，不靠印刷特效。 */
.stat-num {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-accent-700);
}

/* — 圖示 —
   規範明訂不用 emoji、也不用 unicode 符號（✓ ★ ✕）當圖示。這裡以 CSS mask
   內嵌 Lucide 圖形（2px 圓端圓角描邊，與圓體的圓收筆同調），因此會繼承
   currentColor，尺寸跟著字級走。 */
.icon {
  display: inline-block; width: 1em; height: 1em; flex: none;
  vertical-align: -0.13em; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.i-check {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.i-star {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/></svg>");
}
.i-bell {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 21a2 2 0 0 0 3.4 0'/><path d='M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 21a2 2 0 0 0 3.4 0'/><path d='M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3'/></svg>");
}
/* 未讀圓點 */
.unread {
  display: inline-block; width: 8px; height: 8px; flex: none;
  border-radius: 50%; background: var(--color-accent-2-600); margin-right: 10px;
  vertical-align: 0.1em;
}

/* — 按鈕 —
   Hover 加深一階，主按鈕亮起品牌陰影；Press 下移 1px 再深一階。
   永不縮放：scale 與圓體的柔和收筆相衝。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 14px; line-height: 1.2; letter-spacing: var(--tracking-cjk-tight);
  color: var(--color-neutral-800);
  background: transparent; border: 1.5px solid transparent;
  padding: 11px 20px; min-height: 44px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { display: block; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-neutral-100); color: var(--color-neutral-400);
  border-color: transparent; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn-primary { background: var(--action-primary); color: #fff; border-color: var(--action-primary); }
.btn-primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover);
                     color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:active { background: var(--action-primary-active); border-color: var(--action-primary-active); box-shadow: none; }
/* 次要按鈕依規範是青色髮絲外框，不是中性灰框 */
.btn-secondary { background: #fff; color: var(--color-accent-700); border-color: var(--color-accent-500); }
.btn-secondary:hover { background: var(--color-accent-100); color: var(--color-accent-800); border-color: var(--color-accent-500); }
.btn-secondary:active { background: var(--color-accent-200); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-3); }
.btn-ghost:hover { background: var(--color-neutral-50); color: var(--color-accent-800); }
.btn-ghost:active { background: var(--color-neutral-100); }
.btn-icon { width: 44px; height: 44px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — 表單 — */
.field > label {
  display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px;
  color: var(--color-neutral-800);
}
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit;
  font-size: 15px; letter-spacing: var(--tracking-cjk);
  color: var(--color-neutral-900); caret-color: var(--color-accent-500);
  background: #fff;
  border: 1.5px solid var(--color-neutral-200); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-neutral-400); }
.input:hover { border-color: var(--color-neutral-300); }
.input:focus-visible { border-color: var(--color-accent-500); box-shadow: var(--ring-brand); }
.input[aria-invalid="true"] { border-color: var(--color-danger-500); }
.input[aria-invalid="true"]:focus-visible { box-shadow: var(--ring-danger); }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.65; }
select.input { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-500) 50%),
                    linear-gradient(135deg, var(--color-neutral-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-neutral-300);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.radio:hover .dot { border-color: var(--color-accent-500); }
.radio input:checked + .dot {
  border-color: var(--color-accent-500); background: var(--color-accent-500);
  box-shadow: inset 0 0 0 5px #fff;
}
.radio input:focus-visible + .dot { box-shadow: var(--ring-brand); }

/* 分段控制項 */
.seg {
  display: inline-flex; overflow: hidden;
  border: 1.5px solid var(--color-neutral-200); border-radius: var(--radius-md);
  background: #fff;
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--color-neutral-700);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seg-opt + .seg-opt { border-left: 1.5px solid var(--color-neutral-200); }
.seg-opt:has(input:checked) { background: var(--action-primary); color: #fff; }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-neutral-50); }
.seg-opt:has(input:focus-visible) { box-shadow: inset var(--ring-brand); }

/* — 卡片 — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--color-divider);
}
.card-kicker {
  font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--color-accent-700);
}
.card-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 18px; line-height: 1.3; letter-spacing: var(--tracking-cjk-tight);
  color: var(--color-text);
}
.card-body { margin: 0; font-size: 14px; color: var(--color-neutral-600); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-500); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — 標籤 — */
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
  letter-spacing: var(--tracking-cjk-tight); padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.tag-outline { border: 1.5px solid var(--color-accent-500); color: var(--color-accent-700); }
.tag-danger { background: var(--color-danger-100); color: var(--color-danger-700); }
.tag-success { background: var(--color-success-100); color: var(--color-success-700); }

/* — 導覽 —
   黏性頁首是全站唯一的黏性元素，白色 88% + blur(14px)。
   各頁 nav 帶著 inline 的 max-width:1160px，這裡用 padding 把內容列置中，
   讓底色能滿版出血；因此需要 !important 蓋掉那個 inline 寬度。 */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  position: sticky; top: 0; z-index: 40;
  max-width: none !important;
  padding-inline: max(var(--space-6), calc((100% - 1160px) / 2));
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 20px; letter-spacing: var(--tracking-cjk-tight);
  color: var(--color-text); margin-right: auto;
}
/* 橫式標誌最小使用高度 28px；34px 讓副標的 KING OWN Ltd. 還讀得出來 */
.nav-brand img { height: 34px; width: auto; }
.nav-brand:hover { text-decoration: none; color: var(--color-text); }
.nav a { color: var(--color-neutral-700); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--color-accent-700); text-decoration: none; }
.nav a[aria-current='page'] { color: var(--color-accent-700); }
.nav .btn-primary, .nav .btn-secondary, .nav .btn-ghost { color: unset; }
.nav .btn-primary { color: #fff; }

/* — 表格 — */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-neutral-500);
  padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-neutral-200);
}
.table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--color-neutral-25); }

/* — 對話框 — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: rgba(30, 31, 31, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dialog {
  width: min(480px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-8); border-radius: var(--radius-xl);
  background: #fff; box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 24px;
  letter-spacing: var(--tracking-cjk-tight); color: var(--color-text);
}
.dialog-body { font-size: 15px; color: var(--color-neutral-600); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }