/* ============================================================
   游 Sir 百寶箱 — toolkit.css（全站共用設計系統 v1）
   依據：spec-design-v1.md「一、設計系統」
   用法：各頁面 <link rel="stylesheet" href="/css/toolkit.css?v=…"> 後再載入頁面自己的樣式。
   結構：  1 變數  2 基礎  3 容器與網格  4 頂部欄  5 按鈕  6 卡片  7 徽章
           8 表單  9 表格  10 提示條／空狀態  11 頁腳  12 響應式  13 觸控與 hover 規則
   命名：所有組件與變數都帶 tk- 前綴，避免和各頁既有 class 撞名。
   色票只限規格所列；漸層只准 #2563EB → #3B82F6。
   ============================================================ */


/* ------------------------------------------------------------
   1. 設計變數（CSS 變數）
   色票、字體、間距、圓角、陰影的唯一來源，其他組件一律引用這裡。
   ------------------------------------------------------------ */
:root {
  /* 主色 */
  --tk-primary:       #2563EB;
  --tk-primary-light: #3B82F6;
  --tk-primary-dark:  #1D4ED8;
  --tk-gradient:      linear-gradient(135deg, #2563EB, #3B82F6);

  /* 文字 */
  --tk-text:        #1E293B;
  --tk-text-2:      #64748B;
  --tk-text-weak:   #94A3B8;

  /* 面 */
  --tk-bg:          #F8FAFC;
  --tk-surface:     #FFFFFF;
  --tk-border:      #E2E8F0;
  --tk-head-bg:     #F1F5F9;   /* 表頭、中性徽章底 */
  --tk-info-bg:     #EFF6FF;   /* 資訊底、遊戲區淡藍底 */

  /* 狀態色（少量使用） */
  --tk-success:     #16A34A;
  --tk-warn:        #D97706;
  --tk-error:       #DC2626;

  /* 陰影與 focus */
  --tk-shadow:       0 1px 3px rgba(30, 41, 59, .08);
  --tk-shadow-hover: 0 6px 16px rgba(30, 41, 59, .12);
  --tk-focus:        0 0 0 3px rgba(37, 99, 235, .25);

  /* 圓角 */
  --tk-r-card:   12px;
  --tk-r-btn:    8px;
  --tk-r-input:  8px;
  --tk-r-pill:   999px;

  /* 間距尺度 */
  --tk-s1: 4px;  --tk-s2: 8px;  --tk-s3: 12px; --tk-s4: 16px;
  --tk-s5: 24px; --tk-s6: 32px; --tk-s7: 48px;

  /* 尺寸 */
  --tk-topbar-h:  56px;
  --tk-control-h: 44px;
  --tk-tap:       52px;     /* 觸控最小點擊區 */
  --tk-container: 1100px;

  /* 字體 */
  --tk-font: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}


/* ------------------------------------------------------------
   2. 基礎（reset／字體／標題層級／無障礙工具）
   h1 28/700/1.3（手機 24）；h2 20/600/1.4；h3 17/600；正文 16/1.6；輔助 14/1.5
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--tk-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tk-text);
  background: var(--tk-bg);
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1 { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: normal; }
h2 { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: normal; }
h3 { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: normal; }
a  { color: var(--tk-primary); text-decoration: none; }
img, svg, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.tk-small { font-size: 14px; line-height: 1.5; }
.tk-muted { color: var(--tk-text-2); }
.tk-weak  { color: var(--tk-text-weak); }

.tk-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.tk-skip {
  position: absolute; left: var(--tk-s3); top: -80px; z-index: 200;
  padding: var(--tk-s2) var(--tk-s4);
  background: var(--tk-primary); color: #fff; border-radius: var(--tk-r-btn);
}
.tk-skip:focus { top: var(--tk-s2); }

/* 統一的鍵盤 focus 環 */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--tk-focus); }


/* ------------------------------------------------------------
   3. 容器與網格
   .tk-container  內容容器：桌面 max-width 1100px 置中
   .tk-grid       平板／桌面彈性網格 repeat(auto-fill,minmax(260px,1fr))；手機單欄
   ------------------------------------------------------------ */
.tk-container {
  width: 100%;
  max-width: var(--tk-container);
  margin: 0 auto;
  padding: 0 var(--tk-s4);
}
.tk-grid {
  display: grid;
  gap: var(--tk-s4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tk-stack > * + * { margin-top: var(--tk-s4); }


/* ------------------------------------------------------------
   4. 頂部欄 .tk-topbar
   白底、底部 1px 分隔線、高 56px；左＝標題（17px/600），右＝文字鏈（主色）。
   結構：<header class="tk-topbar"><div class="tk-topbar-inner">
           <h1 class="tk-topbar-title">…</h1><a class="tk-topbar-link">返回百寶箱</a>
         </div></header>
   ------------------------------------------------------------ */
.tk-topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--tk-topbar-h);
  background: var(--tk-surface);
  border-bottom: 1px solid var(--tk-border);
}
.tk-topbar-inner {
  height: 100%;
  width: 100%;
  max-width: var(--tk-container);
  margin: 0 auto;
  padding: 0 var(--tk-s4);
  display: flex; align-items: center; gap: var(--tk-s3);
}
.tk-topbar-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--tk-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-topbar-link {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--tk-s2);
  font-size: 15px; font-weight: 500; color: var(--tk-primary);
  border-radius: var(--tk-r-btn);
  white-space: nowrap;
}


/* ------------------------------------------------------------
   5. 按鈕三型 .tk-btn
   主要 .tk-btn-primary（#2563EB 底白字，hover #1D4ED8）
   次要 .tk-btn-secondary（白底 #E2E8F0 邊）
   文字型 .tk-btn-text（無框、主色）
   修飾：.tk-btn-block 全寬　.tk-btn-sm 小型（桌面用，觸控裝置仍是 52px）
   ------------------------------------------------------------ */
.tk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tk-s2);
  min-height: var(--tk-control-h);
  padding: 0 var(--tk-s5);
  border: 1px solid transparent;
  border-radius: var(--tk-r-btn);
  font-size: 16px; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.tk-btn:active { transform: scale(.98); }
.tk-btn:disabled, .tk-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.tk-btn-primary   { background: var(--tk-primary); color: #fff; }
.tk-btn-secondary { background: var(--tk-surface); color: var(--tk-text); border-color: var(--tk-border); }
.tk-btn-text      { background: transparent; color: var(--tk-primary); padding: 0 var(--tk-s3); }

.tk-btn-block { display: flex; width: 100%; }
.tk-btn-sm    { min-height: 36px; padding: 0 var(--tk-s4); font-size: 14px; }


/* ------------------------------------------------------------
   6. 卡片 .tk-card
   白底、1px 邊框、12px 圓角、輕陰影；內距 20–24px。
   .tk-card-flush 無內距　.tk-card-tint 淡藍底（遊戲區）
   .tk-card-link 可點擊卡片（hover 微升，hover 效果在第 13 節，只限滑鼠裝置）
   ------------------------------------------------------------ */
.tk-card {
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-r-card);
  box-shadow: var(--tk-shadow);
  padding: var(--tk-s5);
}
.tk-card-flush { padding: 0; }
.tk-card-tint  { background: var(--tk-info-bg); }
.tk-card-link  { display: block; color: inherit; transition: transform .15s, box-shadow .15s; }


/* ------------------------------------------------------------
   7. 徽章 .tk-badge
   圓角 999px 小標籤。預設＝中性；-primary 實心藍；-soft 淡藍。
   ------------------------------------------------------------ */
.tk-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--tk-s3);
  border-radius: var(--tk-r-pill);
  background: var(--tk-head-bg); color: var(--tk-text-2);
  font-size: 12px; font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}
.tk-badge-primary { background: var(--tk-primary); color: #fff; }
.tk-badge-soft    { background: var(--tk-info-bg); color: var(--tk-primary-dark); }


/* ------------------------------------------------------------
   8. 表單控件
   .tk-field 欄位容器（label＋控件＋提示）　.tk-label 標籤
   .tk-input / .tk-select / .tk-textarea：高 44px（觸控 52px）、圓角 8px、1px 邊、focus 主色環
   .tk-hint 輔助說明　.tk-error-text 錯誤訊息　.tk-check 核取／單選列
   ------------------------------------------------------------ */
.tk-field { display: block; }
.tk-field + .tk-field { margin-top: var(--tk-s4); }
.tk-label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 600; color: var(--tk-text);
}
.tk-input, .tk-select, .tk-textarea {
  display: block; width: 100%;
  min-height: var(--tk-control-h);
  padding: 0 var(--tk-s3);
  background: var(--tk-surface); color: var(--tk-text);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-r-input);
  font-size: 16px;            /* 16px 以防 iOS 聚焦時自動放大 */
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.tk-textarea { min-height: 96px; padding: var(--tk-s3); resize: vertical; line-height: 1.6; }
.tk-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.tk-input::placeholder, .tk-textarea::placeholder { color: var(--tk-text-weak); }
.tk-input:focus, .tk-select:focus, .tk-textarea:focus {
  outline: none; border-color: var(--tk-primary); box-shadow: var(--tk-focus);
}
.tk-input:disabled, .tk-select:disabled, .tk-textarea:disabled { background: var(--tk-head-bg); color: var(--tk-text-weak); cursor: not-allowed; }
.tk-input[aria-invalid="true"], .tk-field.is-error .tk-input { border-color: var(--tk-error); }
.tk-hint       { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--tk-text-2); }
.tk-error-text { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--tk-error); }
.tk-check {
  display: flex; align-items: center; gap: var(--tk-s2);
  min-height: var(--tk-control-h); cursor: pointer;
}
.tk-check input { width: 18px; height: 18px; accent-color: var(--tk-primary); flex: none; }


/* ------------------------------------------------------------
   9. 表格 .tk-table
   表頭 #F1F5F9 底、行分隔 #E2E8F0。手機兩種做法（二選一）：
   A. 橫向捲動：外面包 <div class="tk-table-wrap">
   B. 卡片式：<table class="tk-table tk-table-cards">，每個 <td data-label="欄名">，<640px 變直列卡片
   ------------------------------------------------------------ */
.tk-table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border); border-radius: var(--tk-r-card);
}
.tk-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tk-table th {
  padding: var(--tk-s3) var(--tk-s4);
  background: var(--tk-head-bg); color: var(--tk-text-2);
  font-size: 14px; font-weight: 600; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--tk-border);
}
.tk-table td { padding: var(--tk-s3) var(--tk-s4); border-bottom: 1px solid var(--tk-border); }
.tk-table tbody tr:last-child td { border-bottom: 0; }
.tk-table .tk-num { text-align: right; font-variant-numeric: tabular-nums; }


/* ------------------------------------------------------------
   10. 提示條／空狀態
   .tk-alert：#EFF6FF 底、#1E293B 字、左側 3px 主色邊。
   變體：-success / -warn / -error 只換左邊線顏色（底色維持規格）。
   .tk-empty：置中的空狀態區塊。
   ------------------------------------------------------------ */
.tk-alert {
  padding: var(--tk-s3) var(--tk-s4);
  background: var(--tk-info-bg); color: var(--tk-text);
  border-left: 3px solid var(--tk-primary);
  border-radius: 0 var(--tk-r-btn) var(--tk-r-btn) 0;
  font-size: 15px; line-height: 1.6;
}
.tk-alert-success { border-left-color: var(--tk-success); }
.tk-alert-warn    { border-left-color: var(--tk-warn); }
.tk-alert-error   { border-left-color: var(--tk-error); }

.tk-empty {
  padding: var(--tk-s6) var(--tk-s4);
  text-align: center; color: var(--tk-text-2);
  background: var(--tk-info-bg);
  border-left: 3px solid var(--tk-primary);
  border-radius: 0 var(--tk-r-card) var(--tk-r-card) 0;
}
.tk-empty-ico { font-size: 32px; line-height: 1; margin-bottom: var(--tk-s2); }
.tk-empty p + .tk-btn { margin-top: var(--tk-s4); }


/* ------------------------------------------------------------
   11. 頁腳 .tk-footer（極簡一行）
   ------------------------------------------------------------ */
.tk-footer {
  padding: var(--tk-s4);
  text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--tk-text-weak);
}


/* ------------------------------------------------------------
   12. 響應式
   手機 <640：單欄、h1 24px、.tk-btn-block-sm 全寬
   平板 640–1024：彈性網格；桌面 >1024：容器 1100px 置中（已由 .tk-container 負責）
   ------------------------------------------------------------ */
@media (max-width: 639px) {
  h1 { font-size: 24px; }
  .tk-grid { grid-template-columns: 1fr; }
  .tk-btn-block-sm { display: flex; width: 100%; }

  /* 表格卡片式 */
  .tk-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tk-table-cards, .tk-table-cards tbody, .tk-table-cards tr, .tk-table-cards td { display: block; width: 100%; }
  .tk-table-cards tr {
    margin-bottom: var(--tk-s3); padding: var(--tk-s2) var(--tk-s4);
    background: var(--tk-surface);
    border: 1px solid var(--tk-border); border-radius: var(--tk-r-card);
    box-shadow: var(--tk-shadow);
  }
  .tk-table-cards td {
    display: flex; justify-content: space-between; gap: var(--tk-s4);
    padding: var(--tk-s2) 0; text-align: right;
    border-bottom: 1px solid var(--tk-border);
  }
  .tk-table-cards td:last-child { border-bottom: 0; }
  .tk-table-cards td::before {
    content: attr(data-label); flex: none;
    color: var(--tk-text-2); font-size: 14px; font-weight: 600; text-align: left;
  }
}
@media (min-width: 640px) {
  .tk-container, .tk-topbar-inner { padding-left: var(--tk-s5); padding-right: var(--tk-s5); }
}


/* ------------------------------------------------------------
   13. 觸控與 hover 規則
   觸控裝置（pointer: coarse）：按鈕／表單控件／頂欄連結最小 52px。
   hover 效果只加在 (hover: hover) 裝置，避免觸控裝置「黏住 hover」。
   ------------------------------------------------------------ */
@media (pointer: coarse) {
  .tk-btn, .tk-btn-sm { min-height: var(--tk-tap); min-width: var(--tk-tap); }
  .tk-input, .tk-select { min-height: var(--tk-tap); }
  .tk-check { min-height: var(--tk-tap); }
  .tk-topbar-link { min-height: var(--tk-tap); padding: 0 var(--tk-s3); }
}
@media (hover: hover) {
  .tk-btn-primary:hover:not(:disabled)   { background: var(--tk-primary-dark); }
  .tk-btn-secondary:hover:not(:disabled) { border-color: var(--tk-primary-light); color: var(--tk-primary-dark); }
  .tk-btn-text:hover:not(:disabled)      { background: var(--tk-info-bg); }
  .tk-topbar-link:hover                  { background: var(--tk-info-bg); }
  .tk-card-link:hover { transform: translateY(-2px); box-shadow: var(--tk-shadow-hover); }
  .tk-input:hover:not(:focus):not(:disabled), .tk-select:hover:not(:focus):not(:disabled), .tk-textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--tk-text-weak);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk-btn, .tk-card-link, .tk-input, .tk-select, .tk-textarea { transition: none; }
  .tk-btn:active { transform: none; }
}