/* 凱羅形象站共用紙、墨與元件。數值自首頁搬出；情境測驗只取紙與框，不鋪首頁墨。 */
:root {
  /* Zeal 2026-10-05：全站只有米白紙底，系統深色設定不改品牌紙色。 */
  color-scheme: light;
  --kairos-indigo: #181737;
  --kairos-gold: #B8923A;
  --kairos-parchment: #F7F5F0;
  --kairos-teal: #2A7A6E;
  --kairos-ember: #C4502A;
  --kairos-ink: #27231F;
  --kairos-warm-stone: #CFC7B8;
  --kairos-mist: #E8E1D6;
  --kairos-snow: #FDFCFA;
  --color-bg: var(--kairos-parchment);
  --color-bg-elevated: var(--kairos-snow);
  --color-bg-subtle: var(--kairos-mist);
  --color-bg-inverse: var(--kairos-indigo);
  --color-fg: var(--kairos-ink);
  --color-fg-strong: var(--kairos-indigo);
  --color-fg-inverse: var(--kairos-parchment);
  --color-primary: var(--kairos-indigo);
  --color-accent: var(--kairos-gold);
  --color-border-decorative: var(--kairos-warm-stone);
  --color-border-control: var(--kairos-indigo);
  --color-focus: var(--kairos-indigo);
  --color-focus-gap: var(--kairos-parchment);
  --font-display-en: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-serif: "Noto Serif TC", "Noto Serif", serif;
  --font-sans: "Noto Sans TC", "Noto Sans", system-ui, sans-serif;
  --content-max: 75rem;
  --measure: 34rem;
  --page-gutter: 2rem;
  --grid-gap: 1.5rem;
  --watercolor-safe: max(45px, 2.75rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --radius-control: 0.25rem;
  --radius-card: 0.5rem;
  --line-hairline: 1px;
  --line-focus: 3px;
  --control-min-height: 3rem;
  --target-min: 2.75rem;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 1023px) {
  :root { --page-gutter: 2rem; --grid-gap: 1.25rem; }
}
@media (max-width: 639px) {
  :root { --page-gutter: 1.25rem; --grid-gap: 0.75rem; }
}
@media print {
  :root {
    color-scheme: light;
    --color-bg: var(--kairos-parchment);
    --color-bg-elevated: var(--kairos-snow);
    --color-fg: var(--kairos-ink);
    --color-fg-strong: var(--kairos-indigo);
  }
}
*, *::before, *::after { box-sizing: border-box; }
img { display: block; }
html { font-size: 100%; background: var(--color-bg); }
body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--color-fg);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 639px) {
  body { font-size: 1rem; line-height: 1.80; }
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .kairos-btn:hover { transform: none !important; }
}
.kairos-container {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max));
  margin-inline: auto;
}
.kairos-measure { max-width: var(--measure); }
/* 五級型階；標題只有 600，避免 Noto Serif TC 未載的假粗。 */
.kairos-h1 {
  font-family: var(--font-serif); font-size: 3.25rem; line-height: 1.18;
  letter-spacing: 0.18em; font-weight: 600; margin: 0;
}
.kairos-h2, .quiz-menu h1, .not-found h1 {
  font-family: var(--font-serif); font-size: 1.625rem; line-height: 1.4;
  letter-spacing: 0.06em; font-weight: 600; margin: 0;
}
.kairos-h4, .kairos-h5, .quiz-menu .card h2 {
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.6;
  letter-spacing: 0.04em; font-weight: 600; margin: 0;
}
@media (max-width: 639px) {
  .kairos-h1 { font-size: 2.375rem; }
  .kairos-h2, .quiz-menu h1, .not-found h1 { font-size: 1.5rem; }
  .kairos-h4, .kairos-h5, .quiz-menu .card h2 { font-size: 1rem; }
}
.kairos-small {
  font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.65;
  letter-spacing: 0.03em; font-weight: 400;
}
@media (max-width: 639px) {
  .kairos-small { font-size: 0.8125rem; }
}
.kairos-section { padding-block: var(--space-32); }
.kairos-section--hero { padding-block: var(--space-16) var(--space-32); }
@media (max-width: 1023px) {
  .kairos-section { padding-block: var(--space-24); }
  .kairos-section--hero { padding-block: var(--space-12) var(--space-24); }
}
@media (max-width: 639px) {
  .kairos-section { padding-block: var(--space-20); }
  .kairos-section--hero { padding-block: var(--space-10) var(--space-20); }
}
.kairos-body {
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.85;
  letter-spacing: 0.02em; font-weight: 400; margin: 0;
}
.quiz-mood h1, .quiz-mood h2, .quiz-mood h3,
.quiz-mood b, .quiz-mood strong { font-weight: 600; }
@media (max-width: 639px) {
  .kairos-body { font-size: 1rem; line-height: 1.80; }
}
.kairos-btn, .quiz-menu .status--open, .quiz-menu .back, .not-found .back,
.quiz-mood .primary, .quiz-mood .prev, .quiz-mood .secondary, .quiz-mood .q-btn--primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 136px; padding: 0 24px;
  border-radius: var(--radius-control);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
  letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.kairos-btn--primary {
  background: var(--kairos-indigo); color: var(--kairos-parchment);
  border: 1px solid var(--kairos-indigo);
}
.kairos-btn--primary:hover { transform: translateY(-1px); }
/* 外框控件自帶 84% 紙色，框與字在墨上保持可讀。 */
.kairos-btn--secondary, .quiz-menu .back, .not-found .back,
.quiz-mood .prev, .quiz-mood .secondary {
  background: color-mix(in srgb, var(--kairos-parchment) 84%, transparent);
  color: var(--kairos-indigo); border: 1px solid var(--kairos-indigo);
}
.kairos-btn--secondary:hover { background: var(--kairos-mist); }
.kairos-btn--accent, .quiz-menu .status--open,
.quiz-mood .primary, .quiz-mood .q-btn--primary {
  background: var(--kairos-gold); color: var(--kairos-indigo);
  border: 1px solid var(--kairos-gold);
}
.kairos-btn--accent:hover { text-decoration: underline; }
.kairos-quiz-card, .quiz-menu .card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--kairos-parchment) 84%, transparent);
  border-radius: 2px;
}
.kairos-quiz-card .kairos-domain {
  margin: 0 0 var(--space-2); font-family: var(--font-sans);
  font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.12em;
  font-weight: 600; color: var(--kairos-teal);
}
.kairos-quiz-card .kairos-btn-row { margin-top: auto; padding-top: var(--space-6); }
@media (max-width: 639px) {
  .kairos-quiz-card { padding: var(--space-5); }
}
.kairos-header { padding-block: var(--space-5); background: transparent; }
.kairos-header .kairos-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); min-height: 72px; flex-wrap: wrap;
}
.kairos-header nav { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.kairos-header nav a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--color-fg-strong); text-decoration: none;
}
.kairos-header nav a:hover { text-decoration: underline; }
@media (max-width: 639px) {
  .kairos-header .kairos-container { min-height: 64px; }
  .kairos-header nav { gap: var(--space-4); }
}
.kairos-brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  text-decoration: none;
}
.kairos-brand img { height: auto; }
.kairos-brand img.kairos-paint { width: 32px; }
.kairos-brand__name {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-weight: 600; color: var(--kairos-indigo); white-space: nowrap;
}
.kairos-brand__en {
  font-family: var(--font-display-en); font-size: 1.25rem; letter-spacing: 0.22em;
}
.kairos-brand__zh {
  font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0.08em;
}
@media (max-width: 639px) {
  .kairos-brand img.kairos-paint { width: 26px; }
  .kairos-brand__name { gap: 0.4em; }
  .kairos-brand__en { font-size: 1.0625rem; letter-spacing: 0.16em; }
  .kairos-brand__zh { font-size: 0.875rem; }
}
/* iOS Safari 的 background-attachment:fixed 不穩，固定偽元素承載真正水墨點陣圖。 */
body.kairos-ink { background: transparent; }
body.kairos-ink::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--color-bg);
  background-image: url("/assets/brand/kairos-bg-light.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* 紙色柔光疊三次；不在已有紙底的卡與按鈕上再疊。 */
body.kairos-ink {
  --halo:
    0 0 3px var(--color-bg),
    0 0 9px color-mix(in srgb, var(--color-bg) 94%, transparent),
    0 0 20px color-mix(in srgb, var(--color-bg) 82%, transparent),
    0 0 38px color-mix(in srgb, var(--color-bg) 64%, transparent);
  text-shadow: var(--halo), var(--halo), var(--halo);
}
.kairos-btn, .kairos-quiz-card, .quiz-menu .card { text-shadow: none; }
/* 右下門徽與四角星芒同屬首頁金印語彙。 */
.kairos-watermark {
  position: fixed; right: 34px; bottom: 34px; z-index: 55;
  width: 64px; height: auto; opacity: 0.78; pointer-events: none;
  filter:
    drop-shadow(0 0 2px var(--color-bg))
    drop-shadow(0 0 6px color-mix(in srgb, var(--color-bg) 88%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--color-bg) 70%, transparent));
}
.kairos-frame {
  position: fixed; inset: 14px; z-index: 60; pointer-events: none;
  border: 1px solid rgb(184 146 58 / .42);
}
.kairos-frame::before {
  content: ""; position: absolute; inset: -5px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0 7 4 11 5.5 7 7 5.5 11 4 7 0 5.5 4 4Z' fill='%23B8923A' fill-opacity='.62'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0 7 4 11 5.5 7 7 5.5 11 4 7 0 5.5 4 4Z' fill='%23B8923A' fill-opacity='.62'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0 7 4 11 5.5 7 7 5.5 11 4 7 0 5.5 4 4Z' fill='%23B8923A' fill-opacity='.62'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0 7 4 11 5.5 7 7 5.5 11 4 7 0 5.5 4 4Z' fill='%23B8923A' fill-opacity='.62'/%3E%3C/svg%3E");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat; background-size: 11px 11px;
}
@media (max-width: 639px) {
  .kairos-frame { inset: 8px; }
  /* D-92（Zeal 2026-10-15）：首頁實測 worstLuma 121 會洗字，全站手機門徽統一用《三個晚上》10/7 的改法。 */
  .kairos-watermark { right: 20px; bottom: 20px; width: 32px; opacity: 0.35; filter: none; }
}
@media print {
  .kairos-frame, .kairos-watermark { display: none; }
  body.kairos-ink::before { display: none; }
}

/* 首頁搬移前的設計理由原文保留在這裡；規則本身以上方共用選擇器為準。 */
/* 🔴🔴 2026-10-05 Zeal：「kairos.muse-on.biz 不需要有深色底背景的版本，
         一律都是米白色底的，比較符合 CIS 規範。」
         ⇒ 全站只有一種外觀。這裡宣告 light 之後，瀏覽器不會再把表單等原生元件
         翻成深色，訪客的系統設定也不會改變這一頁。
         🔴 整份樣式表不准再出現 prefers-color-scheme: dark 或 [data-theme="dark"]，
         有 test_site_is_light_only 守著。 */
/* 🔴 圖片的 display 只有兩個地方可以決定：這一行（預設）與樣式表最後那個淺深開關。
       元件自己不准再寫 `display`——同一個病已經犯四次。 */
/* 型階 */
/* 🔴 型階五級到頂：3.25（h1）／1.625（h2）／1.3125（引言）／1.0625（正文與項目標題）／0.875（小字）。
       原本實際用到八級，層次反而糊掉。h1 獨大，其餘一律安靜。不准再開第六級。 */
/* 區塊垂直外距 */
/* 🔴 2026-10-04 版面方向書 W2「間（留白）是結構，不是剩下的」：
       區塊之間要大到「前一個在視線裡消失之後，下一個才出現」。
       🔴 改完會覺得太空——**那個空就是這一輪要做出來的東西**，不要再把它填回去。
       要動只有一個方向：還覺得擠就再刪，不是把間距縮回來、不是補插圖。 */
/* 深色段 */
/* 按鈕 */
/* 🔴 2026-10-04 截圖實測：這顆按鈕原本 background: transparent，字與細框
       直接壓在墨雲上，靛藍字對按鈕內底色只有 4.37～4.68（門檻 4.5），框線更糊。
       柔光救不了它（柔光只加在字上，救不到 1px 框線）⇒ 這一類「只有框、沒有底」
       的元件一律自帶半透明底色。底圖本身完全不動。
       下次新增任何透明底的控件，先量它內部底色，不要只量卡片裡的字。 */
/* 頁首 */
/* 🔴 關掉動畫：設計正本 §8.4。
       原本的樣式在這一段之前就斷了，由主控補上。 */
/* 頁首／頁尾標誌：原比例，淺深各一版 */
/* 🔴 2026-10-04 Zeal：「左上角 kairos 的小圖示 也要是水彩圖畫的風格」
       ⇒ 原本的向量 lockup（圖＋英文字燒在同一個 SVG 裡）換成
       手繪標誌圖 ＋ 真的文字。文字獨立出來的好處：縮放不糊、讀得出來、
       深淺模式各自換色，不必為了換色再做一張圖。
       兩個主題用**同一個尺寸**，不要像舊版那樣淺色 216px／深色 64px —— 那會在
       切換主題時整個頁首跳動。 */
/* 2026-10-04 Zeal：「左上角 英文 加中文 / KAIROS 凱羅九宮盤」
       英文走 Cormorant（展示用襯線），中文走 Noto Serif TC，兩套字各自調字距，
       不要硬塞同一組參數——英文需要寬字距才有份量，中文寬了會散。 */
/* 🔴 2026-10-04 第二版：半透明還不夠，72% 的底仍然在墨上留下一塊方形。
       直接全透明，頁首的字跟正文一樣靠柔光讀。
       🔴 深／淺兩套的翻轉規則（下方 :root[data-theme] 那兩條）也要一起改成透明，
       否則它們優先權較高會把這一條蓋回去——**三條一定要一起改**，這個坑踩過一次。 */
/* ====================================================================
       水墨潑彩底圖與金線框（2026-10-04 Zeal 明令）

       原話：「每一個畫面都要出現 紅藍 潑墨漸變質感的底圖效果。跟我給你看的圖是一樣的
       氛圍，可以字在地圖上面捲動沒關係」「整個一頁式網站沒有 kairos 的整體氛圍質感，
       你只用到了 CIS 的配色，但那種水彩潑墨底圖、整體畫面質感的味道你沒有抓到」。

       🔴 判準：**色票 ≠ 質感。** 之前整頁只有六個品牌色在用，沒有任何一處有紙、墨、
       顆粒、暈染。這一段補的就是那一層，正本是品牌正稿（深靛藍墨雲 × 赤陶橘墨雲
       互相滲透、噴濺顆粒、紙纖維、外加一圈金色細線框與角落紋飾）。

       🔴 為什麼用 `position: fixed` 的偽元素，不用 `background-attachment: fixed`：
       後者在 iOS Safari 上會失效或卡頓，而 Zeal 主要用 iPhone 看。
       ==================================================================== */
/* 永遠先有一層實心底色；底圖載不到或還沒載完時，頁面不會是透明的 */
/* 🔴🔴 2026-10-05 Zeal 訂正：「紗整個拿掉。」
       10-04 他選的「紙色紗」是一層 46% 暖紙白罩住整張底圖；10-05 他看到成品後說明
       當初理解的是「字周圍的柔光」，不是罩住整張圖的那一層 ⇒ **整層刪除**。
       🔴 教訓：選項的名字要用「它蓋在哪裡」描述，不要用材質比喻。
       「紙色紗」聽起來像貼著字，實際是蓋滿整個視窗。

       代價是真的：拿掉紗之後，左側文字欄壓在最濃的靛藍墨團上，對比掉回 3.2 一帶。
       補法只能走**不產生面**的那一條 ⇒ 下面那組柔光加厚（見 text-shadow 那段）。 */
/* 🔴 body 自己不准再上實心底色，否則會把上面那層蓋掉。
       底色改由 html 提供，墨色由 body::before 提供。 */
/* 🔴 2026-10-04 收束：全頁現在一個「面」都沒有了。
       半透明＋毛玻璃是上一版的折衷（比實心好、但還是看得出一塊方形），
       這一版連折衷都拿掉——卡片、頁首、頁尾全部透明，字直接落在墨上靠柔光讀。
       🔴 判準：**任何壓在底圖上的色面都會被看見，不管多透。**
       要層次就用字級與留白，不要用面。 */
/* 🔴 2026-10-04 Zeal 選的解法：「只加柔光，底圖完全不動」。

       問題：淺色模式的內文是深色，而底圖的靛藍墨團也是深色 ⇒ **深壓深**。
       實測（量底圖的真實像素，不是量 CSS 設定值）：文字欄範圍內有 **24.1%** 的面積
       對比低於 4.5，最糟的地方是 **1.00**（完全看不見）。深色模式是淺字壓深墨，
       同樣的量法只有 0.1%，所以這一條主要在救淺色模式，但兩套都套用才不會分叉。

       🔴 我前一輪回報「對比 0 處問題」是**量錯東西**——那支腳本量的是文字對
       「CSS 宣告的背景色」，而真正壓在字後面的是**背景圖的像素**，那一層它量不到。
       判準：**斷言要貼著被測的那一個東西**；背景是圖，就要去量圖。

       做法：用多層 text-shadow 當柔光。它沒有硬邊（不像加底色方塊），
       顏色取 `--color-bg` 所以淺深模式自動跟著走。
       🔴 卡片、按鈕、深色方塊裡的字本來就有實心底，要關掉，否則會糊。 */
/* 🔴 2026-10-05 紙紗拿掉之後這組是**唯一**的救生索。
       Zeal 當場比了兩個方向，親自裁「濃度 300%」：

       **厚度（blur 半徑）加大反而更糟，而且越厚越糟。** 實測同一段字
       100%→6.91、150%→6.68、200%→6.54、300%→6.53。原因是 text-shadow 的光量固定，
       暈得越寬每一點就越薄。三個版本的像素差異都對過（隨厚度遞增），不是量錯。
       🔴 判準：**這條旋鈕的名字叫「厚度」，但它其實在稀釋。**

       **濃度（同半徑、整組疊三次）才是有效的那一個。** 實測
       100%→6.91／2.71／1.48，300%→8.70／3.73／1.80（內文／小標行／步驟區）。
       🔴 誠實標示：最糟那一塊只從 1.48 到 1.80，**離 4.5 還很遠**。
       浮光推得動字旁邊，推不動更外面那整片墨。
       再往上加會開始出現白霧（＝把拆掉的盒子換成毛邊的盒子），所以停在 300%。

       真正的解仍是換一張為文字畫的底圖（墨只留最外緣），那件事尚未施工。 */
/* 🔴🔴 名單裡現在只剩按鈕——它是全頁唯一還有實心底的東西。
       卡片與門檻板都拆成純文字了，它們**必須**留在柔光底下。
       這一行與上面拆底色的改動是綁在一起的：只拆底色而忘了改這份名單，
       淺色模式會出現深字壓深墨，而且只在墨團厚的位置看得出來。 */
/* 右下角固定的金色門徽（印章語彙）。跟著外框的 14px 內縮走，所以兩者對齊。 */
/* 🔴 它壓在右下角那片橘墨上，金對橘幾乎看不見。
         用跟文字同一招：貼著輪廓的紙色光暈，疊三層＝同樣的「濃度」做法。
         drop-shadow 吃的是去背後的形狀，所以不會變成一個方塊。 */
/* 金色細線框＋四角紋飾（品牌正稿的外框語彙） */