/* ══════════════════════════════════════════════════════
   ZIWEI-TW —— 樣式

   兩套主題（星空／宣紙）都靠 CSS 變數切換，SVG 命盤也吃同一組變數，
   所以換主題不必重繪、也不必另外出一張圖。

   ── 顏色從哪裡來 ──
   全部取自品牌設計檔 ZiWei-tw.pen，不是目測配的：
     深紫  #1A0D28 / #221134 / #241238 / #301A47 / #4B2D66
     金色  #F9ECAF #F3DD8C #D9B44A(主色) #8F6B20 #6E5316
     格線  #C9A9E3 低透明度
   改色前先回設計檔核對，不要在這裡自由發揮。

   ── 為什麼星空是預設 ──
   品牌識別（徽章、標準字、背景磚）全是深紫底金色，淺色首屏會跟 Logo 打架。

   ── 主題只定義三個區塊（原本是四個）──
   星空寫在 :root 當預設，只有宣紙需要寫兩次（系統偏好淺色時、使用者手動選淺色時）。
   使用者手動選深色時不必再寫一次 —— :root 的值本來就是深色，而 @media 那條用
   :not([data-theme="dark"]) 把它排除掉了。新增 token 時記得三個地方都要顧到。
   ══════════════════════════════════════════════════════ */

/* ── 星空（品牌預設） ─────────────────────────── */
:root {
  color-scheme: dark;
  --paper: #1A0D28; --paper-2: #221134; --paper-3: #301A47;
  --ink: #EFE4CE; --ink-soft: #A794C0;
  --cinnabar: #E8705A; --cinnabar-soft: rgba(232, 112, 90, 0.18);
  --gold: #D9B44A; --gold-soft: rgba(217, 180, 74, 0.22);
  --gold-bright: #F3DD8C; --gold-deep: #8F6B20;
  --line: #4B2D66; --line-soft: #3A2252;
  --lu: #4FB587; --quan: #E8705A; --ke: #D9B44A; --ji: #9A8CB0;
  --trine-bg: rgba(217, 180, 74, 0.11);
  /* SVG 用的不透明版本（半透明會讓底下的格線透上來） */
  /* 三個宮位底色必須一眼分得出來，否則會被誤讀成排盤出錯：
     命宮偏紅、身宮偏黃、三方四正偏綠，色相各自拉開；
     三個都往紫偏一點，才不會像貼在紫色底上的三塊補丁 */
  --trine-solid: #1A2E24; --origin-solid: #43172E; --body-solid: #332814;
  --focus: #C9A9E3;
  --limit: #C9A9E3;   /* 當前大限：用品牌格線的淺紫，跟金色的身宮拉開 */
  /* 身宮色條專用：盤面格線本身就是 --gold，身宮再用 --gold 就分不出來 */
  --body-bar: #F0B94A;
}

/* ── 宣紙（淺色） ─────────────────────────────── */
/* 同一組值出現兩次是 CSS 的限制（自訂屬性沒有 mixin），改一處就要改另一處 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --paper: #F5EFE2; --paper-2: #EFE7D6; --paper-3: #E3D8BE;
    --ink: #2A1B3D; --ink-soft: #5E4E70;
    --cinnabar: #A8281A; --cinnabar-soft: rgba(168, 40, 26, 0.14);
    --gold: #8F6B20; --gold-soft: rgba(143, 107, 32, 0.20);
    --gold-bright: #C89B35; --gold-deep: #6E5316;
    --line: #B49E63; --line-soft: #CFC197;
    --lu: #1F7A4D; --quan: #A8281A; --ke: #8F6B20; --ji: #4A4155;
    --trine-bg: rgba(143, 107, 32, 0.10);
    --trine-solid: #E2E8D2; --origin-solid: #F8D6C6; --body-solid: #F1E3A8;
    --focus: #6B4FC9;
    --limit: #6B4FC9;
    --body-bar: #C9820D;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #F5EFE2; --paper-2: #EFE7D6; --paper-3: #E3D8BE;
  --ink: #2A1B3D; --ink-soft: #5E4E70;
  --cinnabar: #A8281A; --cinnabar-soft: rgba(168, 40, 26, 0.14);
  --gold: #8F6B20; --gold-soft: rgba(143, 107, 32, 0.20);
  --gold-bright: #C89B35; --gold-deep: #6E5316;
  --line: #B49E63; --line-soft: #CFC197;
  --lu: #1F7A4D; --quan: #A8281A; --ke: #8F6B20; --ji: #4A4155;
  --trine-bg: rgba(143, 107, 32, 0.10);
  --trine-solid: #E2E8D2; --origin-solid: #F8D6C6; --body-solid: #F1E3A8;
  --focus: #6B4FC9;
  --limit: #6B4FC9;
  --body-bar: #C9820D;
}

* { box-sizing: border-box; }
/* hidden 屬性必須贏過自訂的 display（例如 .form-wrap 的 flex），
   否則切到結果頁時表單不會消失 */
[hidden] { display: none !important; }
html { font-size: 16px; }
html, body { margin: 0; padding: 0; }
/* 手機的回彈（rubber-band）區與瀏覽器上下列後方吃的是 html 的背景色，
   只把漸層設在 body 上，捲過頭時會露出白色 */
html { background-color: var(--paper); }
/* 背景是「品牌格線磚 + 徑向漸層」兩層疊起來：
   磚在上（它本身幾乎全透明，只有 6% 的淺紫格線），漸層在下負責明暗。
   磚的原始尺寸是 400×400，匯出時放大兩倍求銳利，所以要用 background-size
   把它縮回 400px，否則格線間距會變成設計稿的兩倍。
   淺色主題不鋪格線 —— 那組格線是為深紫底設計的，鋪在米色紙上只會顯髒。 */
body {
  background:
    url("img/bg-tile.webp?v=3978329105") repeat top left / 400px 400px,
    radial-gradient(ellipse at top, var(--paper-2), var(--paper) 60%);
  background-attachment: fixed, fixed;
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  min-height: 100vh;
  padding: 1.5rem 1.25rem 4rem;
  line-height: 1.6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body {
    background: radial-gradient(ellipse at top, var(--paper-2), var(--paper) 60%) fixed;
  }
}
:root[data-theme="light"] body {
  background: radial-gradient(ellipse at top, var(--paper-2), var(--paper) 60%) fixed;
}
h1, h2, h3 { font-family: "Noto Serif TC", "Songti TC", "PMingLiU", "STSong", serif; }
a { color: var(--cinnabar); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.page { max-width: 1080px; margin: 0 auto; }

/* ── 工具列 ─────────────────────────────────── */
.toolbar {
  display: flex; justify-content: flex-end; gap: 0.75rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.switch {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; background: var(--paper-2);
}
.switch button {
  appearance: none; border: 0; background: transparent; color: var(--ink-soft);
  font-family: inherit; font-size: 0.82rem; padding: 0.35rem 0.85rem;
  cursor: pointer; line-height: 1.5;
}
.switch button:hover { color: var(--ink); }
.switch button[aria-pressed="true"] {
  background: var(--gold); color: var(--paper); font-weight: 700;
}

header { text-align: center; margin-bottom: 1.75rem; }

/* ── 品牌標誌 ────────────────────────────────────
   兩張圖只會顯示一張：首頁用完整 lockup（徽章＋標準字＋slogan），
   排完盤後 app.js 把 .is-compact 掛上來，換成小徽章把版面讓給命盤。
   兩張都寫死 width/height 屬性避免載入時版面跳動（CLS）。 */
.brand { margin: 0 auto 0.75rem; }
.brand-logo {
  display: block; margin: 0 auto;
  width: auto; height: clamp(130px, 24vw, 190px);
  max-width: 100%;
}
.brand-mark { display: none; width: 44px; height: 44px; margin: 0 auto; }
.brand.is-compact .brand-logo { display: none; }
.brand.is-compact .brand-mark { display: block; }

/* slogan —— 只在首頁出現，排完盤後收起來把版面讓給命盤 */
.tagline {
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  color: var(--gold);
  letter-spacing: 0.3em;
  /* letter-spacing 會在最後一個字的右邊也加上間距，害整行看起來偏左，
     補一個等量的左內距把它推回視覺中心 */
  padding-left: 0.3em;
  margin: 0 0 0.7rem;
  font-weight: 500;
}
.brand.is-compact ~ .tagline { display: none; }

h1 {
  font-size: clamp(1.55rem, 4.4vw, 2.15rem); font-weight: 700;
  margin: 0 0 0.4rem; text-wrap: balance; letter-spacing: 0.12em;
}
.sub { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ── 表單 ───────────────────────────────────── */
.form-wrap { display: flex; justify-content: center; }
.form {
  width: 100%; max-width: 520px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.15rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field > label, .field .label {
  font-size: 0.92rem; font-weight: 700; color: var(--gold); letter-spacing: 0.08em;
}
/* 列出每一種 type，漏掉哪一個那個欄位就會掉回瀏覽器預設樣式，
   在同一張表單裡看起來會像壞掉（後台的密碼欄就踩過這個坑） */
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="number"],
.form select,
.form textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.55rem 0.7rem; width: 100%;
}
.form input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.form select { cursor: pointer; }

.radios { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.radios label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 0.45rem 1rem; cursor: pointer; background: var(--paper);
  font-size: 0.95rem;
}
.radios input { accent-color: var(--cinnabar); margin: 0; }
.radios label:has(input:checked) {
  border-color: var(--cinnabar); background: var(--cinnabar-soft); font-weight: 700;
}

/* 紀年切換 */
.era { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.era .switch button { padding: 0.28rem 0.8rem; font-size: 0.8rem; }
.era-note { font-size: 0.8rem; color: var(--lu); font-weight: 700; }

/* 原生日期欄在 iOS Safari 上會照「內容的內建寬度」撐開，光給 width:100%
   壓不下去，窄螢幕會整個超出表單右邊。壓得住的是這兩件事：
     1. 外層用 flex，讓 input 變成 flex item
     2. min-width: 0 —— flex item 預設是 min-width:auto，會被內容頂開
   ⚠ 千萬**不要**加 -webkit-appearance: none。實測在 iOS Safari 上它會讓整個
   日期欄變成一個空白框：值不見、yyyy/mm/dd 提示不見、日曆圖示也不見，
   而且對寬度一點幫助都沒有。 */
#dateNative { display: flex; min-width: 0; }

.form input[type="date"] {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.5rem 0.7rem;
  flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%;
  box-sizing: border-box; text-align: left;
}
/* iOS 預設把日期值置中，跟其他欄位的左對齊不一致 */
.form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* 瀏覽器內建的日曆圖示是寫死的深灰色，在深紫底上幾乎看不見。
   舊做法是 filter: invert(1) 把它反白，但那只能得到白色 —— 在一個金色系的
   介面裡，一個白色圖示看起來像沒設計過。改成直接餵自己的 SVG：
   在 Chromium 上，對 ::-webkit-calendar-picker-indicator 設 background-image
   會整個取代預設圖形，於是顏色就完全由我們決定。
   ⚠ data URI 裡的 # 必須寫成 %23，否則會被當成片段識別字而整個 url() 失效。 */
.form input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B44A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.15rem; height: 1.15rem;
  opacity: 1;
  cursor: pointer;
  filter: none;
}
.form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.75; }
/* 宣紙主題的金色比較深，圖示要跟著換，否則淺底上的亮金看不清楚 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .form input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F6B20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  }
}
:root[data-theme="light"] .form input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F6B20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}

.date-row { display: flex; align-items: center; gap: 0.4rem; }
.date-row input { text-align: center; }
.date-row #f-year { flex: 2; }
.date-row #f-month, .date-row #f-day { flex: 1; }
.date-row .unit { color: var(--ink-soft); font-size: 0.9rem; flex-shrink: 0; }

.hint { font-size: 0.8rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }
/* 夏令時間提醒。這是「你可能選錯時辰」等級的警告，不能長得跟一般說明一樣，
   否則會被當成背景文字略過 —— 用硃砂色與左側色條把它從 hint 群裡拉出來。 */
.hint.dst-warn {
  color: var(--ink);
  background: var(--cinnabar-soft);
  border-left: 3px solid var(--cinnabar);
  border-radius: 0 6px 6px 0;
  padding: 0.6rem 0.75rem;
  margin-top: 0.15rem;
}
.hint.privacy { border-top: 1px solid var(--line-soft); padding-top: 0.9rem; margin-top: 0.2rem; }

.form-error {
  margin: 0; font-size: 0.88rem; font-weight: 700;
  color: var(--cinnabar); background: var(--cinnabar-soft);
  border-radius: 6px; padding: 0.55rem 0.7rem;
}

.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn {
  font-family: inherit; font-size: 0.95rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); color: var(--ink);
  padding: 0.6rem 1.3rem; line-height: 1.5;
}
.btn:hover { border-color: var(--gold); }
/* 主要行動用金色，不用硃砂紅。
   硃砂在盤面上有語意（命宮、權星），拿來當按鈕會讓「重要」這件事失焦；
   而且深紫底配珊瑚紅會跟金色標誌打架。金色同時呼應工具列選中態，全站一致。 */
.btn.primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-deep);
  color: #2A1B0A; font-weight: 700; flex: 1;
  letter-spacing: 0.12em;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ── 結果列 ─────────────────────────────────── */
.result-bar {
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1rem;
}
/* 按鈕標籤絕不從中間斷開。寬度不夠時整顆換到下一列，
   而不是把「重新排盤」拆成「重新／排盤」。 */
.result-bar .btn { white-space: nowrap; }
.toast { font-size: 0.85rem; color: var(--lu); font-weight: 700; }
.md-tip {
  margin: -0.4rem 0 1.1rem;
  border-left: 3px solid var(--gold); padding-left: 0.8rem;
}

/* ── 可左右滑的區塊 ─────────────────────────── */
/*
 * 捲軸上色 + 文字提示是兩層保險：
 *   桌機／Android 看得到金色捲軸，一眼知道能滑；
 *   iOS Safari 不吃 ::-webkit-scrollbar 也不吃 scrollbar-color（它的捲軸是
 *   疊在內容上、不捲就不畫），所以那邊完全靠文字提示。
 * 提示由 app.js 的 updateScrollHints() 依實際 scrollWidth 決定要不要出現。
 */
.board-scroll, .table-scroll, .t-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--paper-3);
}
.board-scroll::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.t-wrap::-webkit-scrollbar { height: 10px; }
.board-scroll::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.t-wrap::-webkit-scrollbar-track {
  background: var(--paper-3); border-radius: 999px;
}
.board-scroll::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.t-wrap::-webkit-scrollbar-thumb {
  background: var(--gold); border-radius: 999px;
  border: 2px solid var(--paper-3);
}
.board-scroll::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.t-wrap::-webkit-scrollbar-thumb:hover { background: var(--cinnabar); }

/* 可滑動時左右各壓一道漸層，暗示內容還有後續 */
.is-scrollable {
  background-image:
    linear-gradient(to right, var(--gold-soft), transparent 12px),
    linear-gradient(to left, var(--gold-soft), transparent 12px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: local, local;
}

.scroll-hint {
  margin: 0.45rem 0 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--gold); text-align: center;
}

/* ── SVG 命盤 ───────────────────────────────── */
.board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.board-scroll svg { display: block; width: 100%; height: auto; min-width: 760px; }

/* ── 文字版命盤 ─────────────────────────────── */
.card-board { display: flex; flex-direction: column; gap: 0.6rem; }
.card-board .cell {
  background-color: var(--paper-2);
  border: 1px solid var(--line); border-left: 6px solid transparent;
  border-radius: 6px; padding: 0.7rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.card-board .cell.trine {
  background-color: var(--trine-solid); border-left-color: var(--lu);
}
.card-board .cell.current { outline: 2.5px dashed var(--limit); outline-offset: -5px; }
.cell-top .limit-now { color: var(--limit); font-weight: 700; }
.card-board .cell.origin {
  background-color: var(--origin-solid); border-left-color: var(--cinnabar);
}
.card-board .cell.body {
  background-color: var(--body-solid); border-left-color: var(--body-bar);
}
.card-board .center {
  background-color: var(--paper-3); border: 2px solid var(--gold);
  align-items: center; text-align: center; gap: 0.55rem; padding: 1rem;
}
.cell-top {
  display: flex; justify-content: space-between; gap: 0.4rem;
  font-size: 0.76rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.ganzhi { letter-spacing: 0.05em; font-weight: 600; }
.palace-name-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.palace-name { font-size: 1.22rem; font-weight: 700; letter-spacing: 0.06em; }
.palace-name.soul { color: var(--cinnabar); }

/**
 * 身分標籤。
 * 一律寫完整詞（身宮／來因／三方四正／流年命宮…）而不是單字加顏色 ——
 * 單字要靠顏色分辨，色相一接近就會被誤讀成排盤出錯。
 */
.tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.1rem 0.42rem; border-radius: 4px;
  color: var(--paper); background: var(--ink-soft);
  white-space: nowrap; flex-shrink: 0;
}
.tag.soul { background: var(--cinnabar); }
.tag.body { background: var(--body-bar); }
.tag.origin { background: var(--ink-soft); }
.tag.trine { background: var(--lu); }
.tag.limit { background: var(--limit); }
.tag.flow { background: var(--cinnabar); }
.tag.now { background: var(--limit); }
.seal {
  width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--cinnabar);
  color: var(--cinnabar); font-family: "Noto Serif TC", serif;
  font-size: 0.8rem; font-weight: 700;
  /* inline-flex 而非 flex：印記也會被放在表格儲存格與圖例的文字流裡，
     用區塊級的 flex 會自己獨佔一行。在 flex 容器（.palace-name-row）內
     它一樣會被 blockify 成 flex item，卡片版盤面的排版不受影響。 */
  display: inline-flex; vertical-align: middle;
  align-items: center; justify-content: center;
  border-radius: 2px; flex-shrink: 0;
}
.seal.gold { border-color: var(--gold); color: var(--gold); }
.seal.dim { border-color: var(--line); color: var(--ink-soft); }
.stars { display: flex; flex-direction: column; gap: 0.25rem; }
.star-row { display: flex; flex-wrap: wrap; gap: 0.32rem; align-items: baseline; }
.star { font-size: 1.02rem; font-weight: 600; }
.star.minor { font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); }
.bright { font-size: 0.74rem; color: var(--ink-soft); }
.ages {
  font-size: 0.72rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; line-height: 1.45;
}
.card-board .fe { font-size: 0.76rem; letter-spacing: 0.24em; color: var(--gold); margin: 0; }
.card-board .stamp {
  width: 3.6rem; height: 3.6rem; border: 2px solid var(--cinnabar);
  border-radius: 4px; color: var(--cinnabar);
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Serif TC", serif; font-size: 1.05rem;
  font-weight: 700; letter-spacing: 0.1em; writing-mode: vertical-rl;
}
.card-board .person {
  font-family: "Noto Serif TC", serif; font-size: 1.15rem;
  font-weight: 700; letter-spacing: 0.25em; margin: 0;
}
.card-board .bazi { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.15em; margin: 0; }
.card-board dl {
  display: grid; grid-template-columns: auto auto auto auto;
  gap: 0.2rem 0.7rem; font-size: 0.86rem; margin: 0; text-align: left;
}
.card-board dt { color: var(--ink-soft); }
.card-board dd { margin: 0; font-weight: 600; }

/* 四化色點（兩種盤面共用） */
.mutagen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--ink-soft); color: var(--paper);
  font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.mutagen.lu { background: var(--lu); }
.mutagen.quan { background: var(--quan); }
.mutagen.ke { background: var(--ke); }
.mutagen.ji { background: var(--ji); }

/* ── 圖例 ───────────────────────────────────── */
.legend {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  margin-top: 0.75rem; font-size: 0.8rem; color: var(--ink-soft);
}
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i {
  width: 1.05rem; height: 1.05rem; border-radius: 2px;
  border: 1px solid var(--line); background-color: var(--paper-2); flex-shrink: 0;
}
/* 圖例的色塊必須跟盤面用完全同一組變數，否則對照不起來 */
.legend i.origin { background-color: var(--origin-solid); border-left: 4px solid var(--cinnabar); }
.legend i.body { background-color: var(--body-solid); border-left: 4px solid var(--body-bar); }
.legend i.trine { background-color: var(--trine-solid); border-left: 4px solid var(--lu); }
.legend i.current { border: 2px dashed var(--limit); background: transparent; }
.legend b { font-weight: 700; }
.legend b.c-soul { color: var(--cinnabar); }
.legend i.mutagen {
  width: 1.25rem; height: 1.25rem; border: 0; border-radius: 50%;
  font-style: normal; font-size: 0.72rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── 簡易解析 ───────────────────────────────── */
.analysis { margin-top: 2.5rem; }
.analysis-head {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.5rem; margin-bottom: 0.6rem;
}
.analysis-head h2 { font-size: 1.35rem; margin: 0; letter-spacing: 0.1em; }
.disclaimer { font-size: 0.78rem; color: var(--ink-soft); margin: 0 0 1.25rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1rem 1.1rem;
}
.card.wide { grid-column: 1 / -1; }
.card h3 { font-size: 1.02rem; margin: 0 0 0.7rem; color: var(--gold); letter-spacing: 0.12em; }
.card p { margin: 0 0 0.55rem; font-size: 0.92rem; }
.card p:last-child { margin-bottom: 0; }
.card p.note { color: var(--ink-soft); font-size: 0.85rem; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; font-size: 0.9rem; }
.kv dt { color: var(--gold); font-weight: 700; white-space: nowrap; }
.kv dd { margin: 0; }
.kv .val { font-weight: 700; margin-right: 0.4rem; }
.kv .note { color: var(--ink-soft); font-size: 0.85rem; }

.mu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.7rem; }
.mu {
  border: 1px solid var(--line-soft); border-left: 4px solid var(--ink-soft);
  border-radius: 4px; padding: 0.6rem 0.75rem;
}
.mu.lu { border-left-color: var(--lu); }
.mu.quan { border-left-color: var(--quan); }
.mu.ke { border-left-color: var(--ke); }
.mu.ji { border-left-color: var(--ji); }
.mu-title { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; }
.mu-title strong { font-size: 1rem; }
.mu p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

.trine-list {
  display: flex; flex-direction: column; gap: 0.55rem;
  margin: 0.8rem 0 0; padding: 0; list-style: none;
}
.trine-list li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.9rem; flex-wrap: wrap; }
.role {
  font-size: 0.72rem; color: var(--paper); background: var(--gold);
  border-radius: 3px; padding: 0.1rem 0.4rem; flex-shrink: 0;
}
.trine-list .pname { font-weight: 700; }
.trine-list .pstars { color: var(--ink-soft); }

.decadal-now { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.decadal-now .hl { color: var(--cinnabar); }

/* ── 流年流月疊盤 ───────────────────────────── */
.horo-layer h3 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.horo-meta {
  font-size: 0.8rem; letter-spacing: 0.06em; font-weight: 600;
  color: var(--ink-soft);
}
.horo-palace { font-size: 1rem; font-weight: 700; }
.horo-palace .hl { color: var(--cinnabar); }
.horo-layer .kv { margin: 0.7rem 0; }

.mu-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mu-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.18rem 0.6rem 0.18rem 0.22rem;
  background: var(--paper);
}

.horo-sub {
  font-size: 1rem; color: var(--gold); letter-spacing: 0.12em;
  margin: 1.6rem 0 0.7rem;
}

/* 表格比卡片更容易超出視窗，一律讓它自己橫向捲，別去推整個頁面 */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper-2);
}
.horo-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.88rem; white-space: nowrap;
}
.horo-table.months { min-width: 720px; }
.horo-table th, .horo-table td {
  padding: 0.45rem 0.7rem; text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.horo-table th {
  font-size: 0.76rem; letter-spacing: 0.1em; font-weight: 700;
  color: var(--gold); background: var(--paper-3);
  position: sticky; top: 0;
}
.horo-table tbody tr:last-child td { border-bottom: 0; }
.horo-table td.branch { font-weight: 700; letter-spacing: 0.08em; }
.horo-table td.flow { font-weight: 700; }
.horo-table td.dim { color: var(--ink-soft); }
.horo-table .seal { margin-left: 0.35rem; vertical-align: middle; }
.horo-table tr.is-natal { background-image: linear-gradient(var(--cinnabar-soft), var(--cinnabar-soft)); }
.horo-table tr.is-flow, .horo-table tr.is-now {
  background-image: linear-gradient(var(--gold-soft), var(--gold-soft));
}
.horo-table tr.is-flow td.flow, .horo-table tr.is-now td:first-child { color: var(--cinnabar); }

#horoMonths {
  margin-top: 1.6rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper-2); padding: 0 1rem;
}
#horoMonths[open] { padding-bottom: 1rem; }
#horoMonths summary {
  cursor: pointer; padding: 0.8rem 0; font-weight: 700;
  color: var(--gold); letter-spacing: 0.1em; font-size: 0.95rem;
}
#horoMonths summary:hover { color: var(--ink); }
#horoMonths .hint { margin-bottom: 0.7rem; }

footer {
  max-width: 1080px; margin: 2.5rem auto 0;
  font-size: 0.86rem; line-height: 1.75; color: var(--ink-soft);
  border-top: 1px solid var(--line-soft); padding-top: 1rem;
}
footer strong { color: var(--ink); }

/* 性質提醒。置中，寬度就吃 footer 的 1080px，不另外限縮 ——
   HTML 裡的 <br> 已經把它切成語意完整的兩行（「排盤是精確的」／
   「解析不是預測」，那是這段話唯一要讓人記住的區別），
   再加 max-width 只會在句子中間擠出第三個難看的斷點。

   ⚠ 別再用 ch 當中文的寬度單位。ch 是數字「0」的字寬，中文字寬得多，
     實測 64ch 只放得下約 26 個中文字，把「精算」從中間切開。 */
.notice {
  margin: 0 auto; text-align: center; text-wrap: pretty;
}
/* 手機同樣置中。只把 <br> 收起來 —— 窄螢幕上兩段各自都會再折成好幾行，
   這時多一個硬斷點常常會擠出一行只有兩三個字的孤行，比不斷還難看。
   拿掉 br 之後整段自然折行，置中的塊面也比較完整。 */
@media (max-width: 720px) {
  .notice br { display: none; }
}
.notice a { color: var(--gold); text-underline-offset: 3px; }
.notice a:hover { color: var(--gold-bright); }

/* ── 版權與聯絡 ─────────────────────────────── */
.credit {
  display: flex; justify-content: center; align-items: center;
  gap: 0.8rem; flex-wrap: wrap; margin: 0 0 1.2rem;
}
.credit-btn {
  appearance: none; background: transparent; border: 0;
  font: inherit; font-weight: 700; letter-spacing: 0.08em;
  color: var(--gold); cursor: pointer;
  padding: 0.3rem 0.5rem; border-radius: 6px;
}
.credit-btn:hover { color: var(--ink); background: var(--gold-soft); }
.contact-btn { padding: 0.4rem 1rem; font-size: 0.88rem; }

/* ── 對話框 ─────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px);
}
.modal-box {
  position: relative; margin: auto; width: min(560px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem 0;
}
.modal-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: 0.08em; }
.modal-x {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--ink-soft); padding: 0 0.3rem;
}
.modal-x:hover { color: var(--cinnabar); }
.contact-form { background: transparent; border: 0; max-width: none; padding: 1rem 1.2rem 1.4rem; }
.contact-form textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.55rem 0.7rem; width: 100%; resize: vertical;
}
.contact-ok {
  margin: 0; font-size: 0.9rem; font-weight: 700;
  color: var(--lu); background: rgba(31, 122, 77, 0.12);
  border-radius: 6px; padding: 0.6rem 0.7rem;
}
.captcha-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.captcha-row img {
  border: 1px solid var(--line); border-radius: 6px; display: block;
  background: #F4EDDC; max-width: 100%; height: auto;
}
/* 蜜罐欄位：不能用 display:none，有些機器人會跳過看不見的欄位 */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* ── 窄螢幕 ─────────────────────────────────── */
@media (max-width: 720px) {
  body { padding: 1rem 0.9rem 3rem; }
  .toolbar { justify-content: center; gap: 0.5rem; }
  .switch button { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
  .cards { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
  .form { padding: 1.2rem 1.1rem; }
  /* flex:1 的 basis 是 0，會逼四顆按鈕等寬而把文字擠到斷行；
     改成 auto 讓它們照文字長度排，放不下就整顆換列 */
  .result-bar .btn { flex: 1 1 auto; }
  .horo-table { font-size: 0.82rem; }
  .horo-table th, .horo-table td { padding: 0.4rem 0.55rem; }
  #horoMonths { padding: 0 0.7rem; }
}