/* ══════════════════════════════════════════════════════════════════
   DrillNow 全站設計系統 ds.css（2026-09-15 美學施工 批 1）
   規格正本＝策略 repo businesses/drillnow/docs/ux/2026-09-15_全旅程美學診斷/MASTER_FINDINGS.md §4
   拍板紀錄＝同資料夾 50_Von拍板_2026-09-15.md（V-01 拿掉主鈕厚底、按下＝scale(.98)）

   【為什麼有這支檔】五個頁面各自定義顏色、字級、按鈕，拼起來像五家公司做的（手機全旅程 31 種字級、
   12 種圓角、9 種陰影、主按鈕五種長相；9/15 DOM 量測）。這支檔是唯一的來源：每頁 <head> 第一個載入，
   各頁舊變數改成指向這裡的 token（相容層），元件一律用 ds- 開頭的 class。
   【不會誤傷既有畫面】基礎規則全部包在 :where() 裡＝權重 0，各頁自己的規則永遠贏；
   元件只作用在明確掛了 ds- class 的元素上。不對所有 button 下樣式（進度條每一格是 <button class="seg">，
   2026-09-01 教訓：對所有 button 下陰影＝進度條下面多一排淺色弧）。

   用色紀律（凍結色票內分派，不換色）：
   · 實心珊瑚只給 Primary、字標 Now、進度填色、收音圓點。
   · 珊瑚家族的字只准 #A93622 配 #FBE3DA（對比 5.28）。珊瑚字不准直接放米底（4.37，不及格）。
   · 錯誤一律 #B93838，不用品牌色。
   · 每頁最多 2 種圓角（16＋999）、2 種陰影（sh-1＋sh-2）、1 種邊框寬（1px）、1 顆 Primary。
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* 顏色角色（§4.1） */
  --c-bg:#FAF5EC; --c-surface:#FFFDF8; --c-field:#FFFFFF;
  --c-ink:#221F1B; --c-ink-2:#756B61;
  --c-line:#E7D8C4; --c-line-strong:#D9C7AF;
  --c-brand:#C64A2E; --c-brand-hover:#B84028; --c-brand-pressed:#A93622; --c-brand-tint:#FBE3DA;
  --c-ok:#2E7D32; --c-ok-tint:#E9F3E9; --c-fix-tint:#FBF2DF;
  --c-err:#B93838; --c-err-tint:#FBE7E4;
  --c-neutral-tint:#EFE6D6;
  --c-amber:#B8860B;   /* 不做文字 */
  --c-gold:#C98A2D;    /* 只准非文字裝飾或 24px 以上字 */
  --c-scrim:rgba(34,31,27,.42);

  /* 字型（§4.2）：沒載入的 Inter 拿掉；Segoe UI 給 Windows 英文 */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --font-ko:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;

  /* 字級七檔（手機；桌機 ≥1024 見下）。中文句子不准用 Label */
  --fs-display:32px; --fs-drill:32px; --fs-h1:24px; --fs-h2:18px; --fs-body:16px; --fs-meta:14px; --fs-label:12px;
  --fs-tool:15px;      /* 例外：只給練習頁手機底部四鈕 */
  --fs-roman:16px;     /* 韓文句下的羅馬拼音（改前是行內 .5em，跟著韓文字級變成小數）*/
  --fs-drill-sm:32px;  /* 官網示意卡的韓文句：手機與練習頁同值；桌機卡窄，用 40 */
  --lh-display:1.25; --lh-drill:1.3; --lh-h1:1.4; --lh-h2:1.5; --lh-body:1.7; --lh-meta:1.6; --lh-label:1.4; --lh-btn:1.25;

  /* 間距（§4.3）：0/4/8/12/16/24/32/40/48/64，20 不准用 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --gutter:24px;

  /* 寬度（§4.4） */
  --w-app:1040px; --w-practice:1132px; --w-read:680px; --w-landing:1040px; --w-overlay:400px; --w-sheet:560px;

  /* 圓角、陰影、邊框、焦點、動效（§4.5） */
  --r-box:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(34,31,27,.05), 0 8px 20px rgba(34,31,27,.04);
  --sh-2:0 8px 40px rgba(34,31,27,.16);
  --bw:1px;
  --focus-ring:0 0 0 3px rgba(198,74,46,.24);
  --t-press:120ms; --t-ui:200ms; --t-sheet:260ms;
  --btn-h:52px;

  color-scheme: light;
}
@media (min-width:1024px) {
  :root { --fs-display:48px; --fs-drill:48px; --fs-drill-sm:40px; --fs-roman:20px; --fs-h1:32px; --fs-h2:20px; --fs-tool:16px; --btn-h:48px; }
  /* 2026-09-17 批 5：桌機字級只留 12／14／16／20／32／40／48 七檔（display 44→48、韓文句由 vw 式子改定值）*/
}
@media (prefers-reduced-motion:reduce) {
  :root { --t-press:0ms; --t-ui:0ms; --t-sheet:0ms; }
}

/* ── 基礎（權重 0，各頁規則永遠贏）── */
[hidden] { display:none !important; }   /* hidden 屬性一律真的藏（元件的 display:flex 不准把它打開） */
:where(html) { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
:where(body) { font-family:var(--font); color:var(--c-ink); background:var(--c-bg);
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none; }
:where(button, input, select, textarea) { font:inherit; letter-spacing:inherit; }   /* 按鈕、輸入框不再掉回 Arial */
:lang(ko) { font-family:var(--font-ko); word-break:keep-all; }                       /* keep-all 只准用在韓文 */
.tnum { font-variant-numeric:tabular-nums; }
.nowrap { white-space:nowrap; }
.ds-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── 字級工具 ── */
.ds-display { font-size:var(--fs-display); line-height:var(--lh-display); font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
.ds-h1 { font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:700; letter-spacing:0; text-wrap:balance; }
.ds-h2 { font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:700; letter-spacing:0; text-wrap:balance; }
.ds-body { font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; text-wrap:pretty; }
.ds-meta { font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:400; }
.ds-label { font-size:var(--fs-label); line-height:var(--lh-label); font-weight:700; letter-spacing:.02em; }
.ds-muted { color:var(--c-ink-2); }

/* ── 按鈕家族（§4.6）── */
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--btn-h); padding:0 var(--sp-6); border:var(--bw) solid transparent; border-radius:var(--r-pill);
  font-size:var(--fs-body); line-height:var(--lh-btn); font-weight:700; letter-spacing:0; text-align:center;
  text-decoration:none; cursor:pointer; box-shadow:none; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-press) ease, border-color var(--t-press) ease, color var(--t-press) ease, transform var(--t-press) ease; }
.ds-btn:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.98); }
.ds-btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity:.5; cursor:default; }
.ds-primary { background:var(--c-brand); color:#fff; border-color:var(--c-brand); }
.ds-primary:hover:not(:disabled) { background:var(--c-brand-hover); border-color:var(--c-brand-hover); }
.ds-primary:active:not(:disabled) { background:var(--c-brand-pressed); border-color:var(--c-brand-pressed); }
.ds-secondary { background:var(--c-surface); color:var(--c-ink); border-color:var(--c-line-strong); }
.ds-secondary:hover:not(:disabled) { background:var(--c-bg); }
.ds-secondary:active:not(:disabled) { background:var(--c-neutral-tint); }
.ds-danger { background:var(--c-surface); color:var(--c-err); border-color:var(--c-err); }
.ds-danger:hover:not(:disabled) { background:var(--c-err-tint); }
.ds-compact { min-height:44px; padding:0 var(--sp-4); }
.ds-block { display:flex; width:100%; }
/* loading：保持實心，左側 16px 白色轉圈（aria-busy） */
.ds-btn[aria-busy="true"]::before { content:""; width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:dsSpin .8s linear infinite; }
@keyframes dsSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .ds-btn[aria-busy="true"]::before { animation-duration:2.4s; } }

/* Text link：熱區 ≥44、Meta 14/500、次字、底線距 4px；行內連結繼承周圍字級（.ds-link-inline） */
.ds-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 8px;
  background:none; border:0; border-radius:var(--r-pill); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:500;
  color:var(--c-ink-2); text-decoration:underline; text-underline-offset:4px; cursor:pointer; box-shadow:none; }
.ds-link:hover { color:var(--c-ink); }
.ds-link:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.ds-link-inline { color:inherit; font-size:inherit; font-weight:500; text-decoration:underline; text-underline-offset:4px; }

/* 返回「‹」＝Tool-quiet 44 */
.ds-back { display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; margin-left:-10px;
  border:0; border-radius:var(--r-pill); background:transparent; color:var(--c-ink); text-decoration:none; cursor:pointer; }
.ds-back:hover { background:var(--c-neutral-tint); }
.ds-back:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.ds-back svg, .ds-ico { display:block; flex:none; }

/* ── 卡片（§4.7）── */
.ds-card { background:var(--c-surface); border:var(--bw) solid var(--c-line); border-radius:var(--r-box); padding:var(--sp-6); box-shadow:var(--sh-1); }
.ds-card-flat { background:var(--c-surface); border:var(--bw) solid var(--c-line); border-radius:var(--r-box); padding:var(--sp-4); box-shadow:none; }
@media (min-width:1024px) { .ds-card { padding:var(--sp-8); } }
.ds-card > * + * { margin-top:var(--sp-4); }
.ds-card-int { cursor:pointer; transition:border-color var(--t-press) ease, background-color var(--t-press) ease; }
.ds-card-int:hover { border-color:var(--c-line-strong); }
.ds-card-int:active { background:var(--c-brand-tint); border-color:var(--c-brand); }
.ds-card-int:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.ds-card-int[aria-busy="true"] { opacity:.6; pointer-events:none; }
.ds-callout { background:var(--c-neutral-tint); border-radius:var(--r-box); padding:var(--sp-4); }
.ds-callout-h { font-size:var(--fs-body); font-weight:700; color:var(--c-brand-pressed); }

/* ── Tag（§4.9）── */
.ds-tag { display:inline-flex; align-items:center; height:28px; padding:0 var(--sp-3); border-radius:var(--r-pill);
  font-size:var(--fs-label); line-height:1; font-weight:700; letter-spacing:.02em; color:var(--c-ink); background:var(--c-neutral-tint); white-space:nowrap; }
.ds-tag-brand { color:var(--c-brand-pressed); background:var(--c-brand-tint); }

/* ── 欄位（§4.10）── */
.ds-field { display:block; width:100%; height:52px; padding:0 var(--sp-4); border:var(--bw) solid var(--c-line-strong); border-radius:var(--r-box);
  background:var(--c-field); color:var(--c-ink); font-size:16px; line-height:24px; text-align:left; box-shadow:none; appearance:none; -webkit-appearance:none; }
.ds-field::placeholder { color:var(--c-ink-2); opacity:1; }
.ds-field:focus { outline:none; border-color:var(--c-brand); box-shadow:var(--focus-ring); }
.ds-field[aria-invalid="true"] { border-color:var(--c-err); }
.ds-field:disabled { background:var(--c-neutral-tint); }
.ds-code { text-align:center; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.ds-code:not(:placeholder-shown) { letter-spacing:.3em; }
.ds-code::placeholder { font-size:16px; font-weight:400; letter-spacing:0; }
textarea.ds-field { height:auto; min-height:120px; padding:var(--sp-3) var(--sp-4); resize:vertical; }
select.ds-field { padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23756B61' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }
.ds-check { width:22px; height:22px; flex:none; margin:0; accent-color:var(--c-brand); cursor:pointer; }
.ds-check:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:4px; }
.ds-field-err { margin-top:var(--sp-2); font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--c-err); }

/* ── Disclosure row（§4.11）── */
.ds-disclosure { display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:52px; padding:0 var(--sp-4);
  background:var(--c-surface); border:var(--bw) solid var(--c-line); border-radius:var(--r-box); box-shadow:none;
  color:var(--c-ink); text-align:left; cursor:pointer; font-size:var(--fs-body); line-height:var(--lh-btn); }
.ds-disclosure .dl-k { flex:none; font-weight:700; }
.ds-disclosure .dl-v { flex:1; min-width:0; font-size:var(--fs-meta); font-weight:400; color:var(--c-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-disclosure .dl-ch { flex:none; color:var(--c-ink-2); transition:transform var(--t-ui) ease; }
.ds-disclosure[aria-expanded="true"] .dl-ch, details[open] > .ds-disclosure .dl-ch { transform:rotate(180deg); }
.ds-disclosure:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* ── Notice banner（§4.12）── */
.ds-notice { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  background:var(--c-surface); border:var(--bw) solid var(--c-line); border-radius:var(--r-box);
  font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:500; color:var(--c-ink);
  animation:dsNoticeIn var(--t-ui) ease-out both; }
.ds-notice.is-err { border-color:var(--c-err); }
.ds-notice.is-float { box-shadow:var(--sh-2); }
.ds-notice .nt-mark { flex:none; font-weight:700; }
.ds-notice.is-ok .nt-mark { color:var(--c-ok); }
.ds-notice.is-err .nt-mark { color:var(--c-err); }
.ds-notice .nt-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--c-ink-2); }
.ds-notice .nt-text { flex:1; min-width:0; }
.ds-notice .nt-act { flex:none; }
.ds-notice .nt-close { flex:none; width:44px; height:44px; margin:-12px -12px -12px 0; border:0; background:none; color:var(--c-ink-2); cursor:pointer; border-radius:var(--r-pill); }
@keyframes dsNoticeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .ds-notice { animation:none; } }

/* ── Interrupt card（§4.13）── */
.ds-interrupt { display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; max-width:var(--w-overlay); margin:0 auto; }
.ds-interrupt .ic-title { font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:700; margin:0; text-wrap:balance; }
.ds-interrupt .ic-body { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--c-ink-2); max-width:360px; margin:var(--sp-3) 0 0; text-wrap:pretty; }
.ds-interrupt .ic-act { width:100%; max-width:360px; margin-top:var(--sp-8); }
.ds-interrupt .ic-act + .ds-link, .ds-interrupt .ic-act + .ic-act { margin-top:var(--sp-2); }

/* ── Sheet（§4.14）── */
.ds-sheet { background:var(--c-surface); border-radius:var(--r-box) var(--r-box) 0 0; padding:var(--sp-6) var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom));
  width:100%; max-width:var(--w-sheet); margin:0 auto; box-shadow:var(--sh-2); }
.ds-sheet-group { font-size:var(--fs-label); font-weight:700; letter-spacing:.02em; color:var(--c-ink-2); margin:var(--sp-6) 0 var(--sp-2); }

/* ── Segmented（§4.15）── */
.ds-seg { display:flex; gap:0; height:54px; padding:4px; border:var(--bw) solid var(--c-line-strong); border-radius:var(--r-pill); background:var(--c-surface); }
.ds-seg > button, .ds-seg > [role="tab"] { position:relative; flex:1 1 0; min-width:0; min-height:0; height:100%; padding:0 var(--sp-3); border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--c-ink-2); font-size:var(--fs-body); font-weight:700; line-height:1; box-shadow:none; cursor:pointer; }
.ds-seg > button::before, .ds-seg > [role="tab"]::before { content:""; position:absolute; inset:-5px 0; }   /* 2026-09-17 批 5：軌道 48→54，選項實高 38→44（觸控底線）；::before 延伸保留 */
.ds-seg > .active, .ds-seg > [aria-selected="true"] { background:var(--c-brand-tint); color:var(--c-brand-pressed); }
.ds-seg > button:focus-visible, .ds-seg > [role="tab"]:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* ── App bar 與 Wordmark（§4.16）── */
.ds-appbar { border-bottom:var(--bw) solid var(--c-line); }
.ds-appbar-in { display:flex; align-items:center; gap:var(--sp-2); min-height:56px; width:100%; max-width:var(--w-app); margin:0 auto; padding:0 var(--gutter); }
.ds-appbar-end { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }
.ds-wordmark { display:inline-block; font-size:18px; line-height:1.25; font-weight:800; letter-spacing:-.01em; color:var(--c-ink); text-decoration:none; white-space:nowrap; }
.ds-wordmark .now { color:var(--c-brand); }
.ds-wordmark .wm-sub { margin-left:var(--sp-2); font-size:var(--fs-meta); font-weight:500; letter-spacing:0; color:var(--c-ink-2); }
a.ds-wordmark { padding:11px 0; }   /* inline-block＋上下 11px＝熱區 ≥44（inline-flex 會讓 innerText 把 Drill／Now 拆成兩行） */
@media (min-width:1024px) { .ds-wordmark { font-size:20px; } }

/* ── Table（§4.17）── */
.ds-table { overflow-x:auto; background:var(--c-surface); border:var(--bw) solid var(--c-line); border-radius:var(--r-box); -webkit-overflow-scrolling:touch; }
.ds-table table { width:100%; border-collapse:collapse; font-size:var(--fs-meta); line-height:var(--lh-meta); }
.ds-table th, .ds-table td { text-align:left; vertical-align:top; padding:var(--sp-3) var(--sp-4); }
.ds-table th { background:var(--c-neutral-tint); color:var(--c-ink); font-weight:700; }
.ds-table td { color:var(--c-ink); border-top:var(--bw) solid var(--c-line); }
.ds-table tr:first-child td { border-top:0; }
.ds-table th + th, .ds-table td + td { }
