/* =====================================================
   Daily Guidance · V4 版式骨架（2026-09-12）
   -----------------------------------------------------
   依據：DailyGuidance/每日指引版式設計-1.jpg（1200×6237 位圖）
   載入順序：daily-guidance-v2.css（元件層）→ 本檔（骨架層）
   配色 token、粒子引擎、生活八庫、趨勢圖、命宮資料全部沿用 v2／v3。

   骨架（自上而下，2026-09-12 第二輪收緊後）：
     S1 主視覺      ．滿幅底圖（1200×550）＋「每日指引」＋流日期行＋檔位字＋今日傾向
                      （原 S0 刊頭整塊併入，不再有獨立的刊頭底圖）
     S2 今日氣流    ．左：欄目名＋那句話│中：粒子帶 700×300│右：氣象小人
     S3 氣運趨勢    ．折線圖（只揭露五檔）＋摘要＋數據源
     S4 今日主題    ．標題＋十神＋主題詞＋那一句（同一行）＋四領域橫排四卡
     S5 三欄        ．今日宜│今日慎│今日有利方位（羅盤）
     S6 中式生活指南．八卡（12 欄格線：飲6／食6／動6／聽9-12／靜5／衣7／境通欄／悟通欄）
     S7 查看今日依據．本命卦／今日主氣／五行關係／你的命宮（折疊，移到底部）
     S8 頁腳        ．細金線＋兩端小字

    卡面底圖：DailyGuidance/<dir>/<dir>_NN.webp（2026-09-12 補 28 接上），
    .v4-slot 只留著當「圖沒出／圖檔掛掉」的佔位底。
   ===================================================== */
:root{
  --page:1200px;
  --gut:32px;          /* 版心左右留白 */
  /* 欄目之間的距離。2026-09-12 使用者指示「每個區塊之間都是緊貼的，用金色線隔開」，
     所以歸零；區塊之間的呼吸以後由各區自己的底圖（美術留邊）決定，不再靠 CSS 留白。
     註：它同時用在 .v4-sec 與 .v4-chart-row（S7 本命四卡那一列）。 */
  --sec-gap:0px;
  /* 每個區塊「內容起點」距上緣（＝金色分隔線）的距離。
     2026-09-12 使用者指示「每個 DecoChineseJie.webp 的頂端都要距上一條金線 20px 左右」：
     飾件是 78 高的實圖，.v4-sec-title 那行只有 56～57 高，
     靠 .v4-orn 的 margin:-11px 0 讓它跨出那行上下各約 10.5px ——
     所以區塊一貼緊金線，飾件頂端就跑到線上、被線穿過。
     30.5 = 10.5（飾件跨出抬頭行的高度）＋ 20（使用者要的淨空），
     算出來飾件頂端剛好落在金線下方 20.0px。
     註：它只加在 .v4-sec（含 #v4-flow），#v4-trend 例外，見下方說明。 */
  --block-pad:30.5px;
  /* 區塊「內容底端」距下緣（＝下一條金色線）的距離。
     2026-09-12 使用者指示「每個區域的底部也應該距離金色線 20px 左右」：
     原本 --sec-gap 歸零之後，各區最後一個元素（主題的四領域卡、宜／慎清單、
     方位那列、本命四卡那一列、中式生活八卡）都是直接貼在下緣、頂著金線，
     所以補上這 20px。 */
  --block-pad-b:20px;
  /* S1 滿幅主視覺的高度不再寫死：底圖是 1200×550 的實圖，
     改用 aspect-ratio 讓它跟著版心等比縮放。 */
}

/* ---------- 骨架：拿掉 v2 的外框盒 ---------- */
.wrap{width:var(--page);margin:0 auto;padding:0 0 0}
.stage{
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  border-radius:0;
}
.stage::before,.stage::after{display:none}
.inner{width:100%}

/* ---------- 頂條：正式版沒有語言切換（語種跟隨主站），
   所以非 dev 模式下這條是空的、不可見；dev 模式才變成一整條示範控制列。 ---------- */
.demo-bar{
  position:fixed;
  top:18px; left:auto; right:20px;
  width:auto; margin:0; padding:0;
  display:flex; align-items:center; gap:10px;
  background:none; border:0;
  z-index:60;
}
.demo-bar .spacer{display:none}
body:not(.dev) .demo-bar{background:none;border-color:transparent;padding:0;margin:0}
body.dev .demo-bar{
  top:0; right:0; left:0;
  padding:8px 16px;
  background:rgba(24,18,11,.94);
  border-bottom:1px solid rgba(205,166,90,.25);
}
body.dev .demo-bar .spacer{display:block;flex:1}

/* ---------- 圖位（背景圖未出，先留空框） ----------
   data-slot 的文字是施工用標記，圖檔補上後整層刪掉即可。 */
.v4-slot{
  position:relative;
  border:1px dashed rgba(205,166,90,.20);
  background:
    repeating-linear-gradient(45deg,rgba(205,166,90,.028) 0 9px,transparent 9px 18px),
    rgba(255,255,255,.012);
}
.v4-slot::after{
  content:attr(data-slot);
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  text-align:center;
  font-size:11px;letter-spacing:.16em;line-height:1.9;
  color:rgba(205,166,90,.38);
  padding:0 14px;
  pointer-events:none;
}
.v4-slot.no-label::after{display:none}

/* ---------- 欄目共同元件 ---------- */
.v4-sec{padding:var(--block-pad) var(--gut) var(--block-pad-b);margin-top:var(--sec-gap)}
/* S2「今日氣流」與 S3「氣運趨勢」依指示向上緊貼上一層的底部：
   #v4-trend 貼今日氣流底緣（其餘欄目照舊吃 --sec-gap）。
   #v4-flow 也貼主視覺底緣（margin-top:0）：兩張底圖直接接在一起、中間不留縫。
   （2026-09-12 補 11 曾在這裡補 20px 當作與主視覺之間的呼吸；
     同日今日氣流出了自己的底圖之後，使用者指示「背景和 Hero 背景之間有空隙，去掉」，
     所以改回 0。下方各欄目與整頁高度也一起往上 20px。） */
#v4-flow{
  /* 整區底圖：DailyGuidance/todayQiFlowBG.webp（1200×350，2026-09-12 使用者出圖）。
     這一區的內容最高是 300（粒子帶 700×300／氣象小人 176×300），
     但左欄那句說明文字在 fr／it／pt 會長到 349.3。所以整區固定成圖的高度 350、
     內容垂直置中：11 種語言共用同一張圖，不會有哪個語言在圖外露白。
     圖用 100% 100% 對到整區 1200×350，版心 1200 時是 1:1、不縮放。
     註：350 是最省的尺寸，fr／it／pt 的內容（349.3）幾乎貼滿整張圖，上下各只剩 0.35px；
         這三個語系要留呼吸的話，得把左欄那句話縮短或再把圖加高。 */
  margin-top:0;
  /* 內容改成靠上排（原本垂直置中）：置中時 --block-pad 有一半會落在上面、
     一半落在下面，飾件就只下移 15px 而不是 30.5px。
     靠上排之後飾件頂端＝金線下方 20px；內容 300 高，30.5+300＝330.5＜350，
     整區仍是 350，底圖維持 1:1 不被拉長。 */
  display:flex;flex-direction:column;justify-content:flex-start;
  min-height:350px;
  background:url("todayQiFlowBG.webp?v=20260914d") center/100% 100% no-repeat;
  /* 底部不補 --block-pad-b：內容 300 高、上方 30.5 之後底端落在 330.5，
     距整區下緣（金線）本來就還有 19.5px。再加 20 會把整區撐成 350.5，
     底圖就被拉長 0.5px —— 為了保住 1:1 的實圖，這裡維持 0。 */
  padding-bottom:0;
}
#v4-trend{
  /* 整區底圖：DailyGuidance/fortuneTrendBG.webp（1200×450，2026-09-12 使用者出圖）。
     實測這區內容是 1200×401.6–404.6（最高的日／韓 404.6），
     但檔案帶大運時摘要會多一行（427.9）、底部小字再折一行（448.6），所以圖出到 450。
     這裡固定 450 高、內容垂直置中：11 語 × 四個區間窗共用同一張圖，
     內容帶落在圖的 y≈23–427，上下各留約 23px 給美術，圖也不會被拉伸。 */
  margin-top:0;
  display:flex;flex-direction:column;justify-content:center;
  min-height:450px;
  background:url("fortuneTrendBG.webp?v=20260914d") center/100% 100% no-repeat;
  /* 2026-09-12 例外：氣運趨勢不套 --block-pad。
     這張底圖是固定的 1200×450，內容已經佔到 426.8（最高語系 427.3），
     再加 30.5 會把整區撐成 457 —— 底圖被縱向拉長 1.4%，而且內容底端
     會正好貼死在區塊下緣（下方那行小字頂到金線）。所以這一區維持原樣：
     飾件頂端在金線下方約 13px，本來就沒有被線穿過。 */
  /* 底部同理不補：內容底端距下緣約 12px，這 12px 是底圖自己的留邊，
     補 20 會讓置中的內容整組往上跳、飾件跟著跑掉。 */
  padding-top:0;padding-bottom:0;
}
.v4-sec-title{display:flex;align-items:center;gap:15px}
/* 補 89 的補償：這一輪把這三處的飾件整顆下移 8px（見 .v4-orn 的 top:8px），
   若不補償，飾件頂端距上一條金線會從 20 變成 28。
   使用者先前定過「每個 DecoChineseJie.webp 的頂端都距上一條金線 20px 左右」，
   所以這三區的內容起點一起上提 8px（30.5 → 22.5），飾件頂端回到金線下方 20.5，
   跟今日氣流那顆一致。（氣運趨勢不吃 --block-pad、內容垂直置中，另有自己的基準，
   不動；三欄以上這幾區的內容也順帶各矮 8px，整頁更緊。） */
#v4-theme,.v4-pair{padding-top:22.5px}
.v4-orn{
  /* 欄目抬頭左邊那顆飾件。
     舊版是純 CSS 畫的 13×40 金柱（上下兩個 radial 亮點＋金色直線漸層）。
     2026-09-12 改成使用者出的實圖：DailyGuidance/DecoChineseJie.webp（13×78 的結繩飾件）。
     圖比標題行高（h2 是 46px / line-height 1.24 ≈ 57px），
     用上下 -11px 負邊距讓它不把那行撐高 —— 飾件只在視覺上比標題多出上下各約 10px，
     各欄目的間距、圖表位置都不動（那是前面好幾輪才調好的）。 */
  flex:none;width:13px;
  /* ★2026-09-14 使用者：「告訴我需要多高的，我馬上改好覆蓋原圖」——
     飾件圖以後會畫成「高度夠長」的版本（線直接畫在圖裡），
     所以這裡改成三件事：
       1. height:var(--orn-h,78px) —— 這一顆飾件「要顯示多長」，
          由 app.js 的 fitOrnTail() 依當下語系量出來（圖不夠長時下面接尾巴補足）。
       2. 背景改成「實圖原尺寸、頂端對齊」（left top/100% auto），
          圖比顯示高度長就由外框裁掉；**不能用 contain**，圖一高就會被縮小。
       3. 讓多出來的高度完全不影響版面：外框固定 56px、上下邊距固定 −11px，
          跟換圖前**一模一樣**（換圖前就是 height:78px;margin:-11px 0、
            外框 78−22＝56）。所以 mb ＝ 56 − H − (−11) ＝ 67 − H：
          h2 比 56 高的那幾列（氣運趨勢／今日主題，h2 57.03）飾件頂端仍落在
          行頂下方 11.5px，h2 較矮的（今日宜／慎／方位 52.08、今日氣流）
          仍是 11px —— 各族距、圖表位置都不動。 */
  height:var(--orn-h,78px);
  margin-top:-11px;
  margin-bottom:calc(67px - var(--orn-h,78px));
  background:url("DecoChineseJie.webp?v=20260915a") left top/100% auto no-repeat;
}
/* 2026-09-14 使用者指示（圖1／圖2／圖3 → 圖4）：
   「装饰线都比底下那行字高了一点。希望可以像图4那样，2行字都处于装饰线以内。」
   → 這三處抬頭的下面還有一行字，飾件要把它一起框進去。
   做法是把飾件往下「接一條尾巴」，不是把飾件圖拉高——拉高會連中間那顆結繩
   一起拉長。尾巴的顏色／寬度／x 位置是照 DecoChineseJie.webp 量的：
   線在 13px 寬裡佔 x=8..10（3px 寬），最底一列的顏色是 rgb(91,64,34)，
   所以尾巴就從同一個顏色起、尾端漸層收掉；接縫在飾件底緣，看不出接點。
   --orn-tail 只開在下面這三處；今日氣流那顆飾件不開（它下面沒有那行字）。 */
.v4-sec-title .v4-orn{position:relative}
/* 尾巴：圖不夠長（現在的圖只有 78 高）時，從圖的底緣往下接一條同色的線補到 --orn-h。
   --orn-img-h ＝實圖高度（app.js 讀 CSS 這張圖的 naturalHeight 寫進來的），
   圖一旦畫得夠長，--orn-tail 自己就變 0，這條線自動消失。
   顏色／位置照 DecoChineseJie.webp 量：線在 13px 寬裡佔 x=8..10，
   中心 #755836、兩側較暗半透明（實圖那條線只有 3px、邊緣是抗鋸齒的）。 */
.v4-orn::after{
  content:"";position:absolute;left:8px;top:var(--orn-img-h,78px);
  width:3px;height:var(--orn-tail,0px);
  background:linear-gradient(90deg,rgba(97,76,47,.72) 0%,#755836 34%,#755836 66%,rgba(70,50,28,.6) 100%);
  pointer-events:none;
}
/* 這三處抬頭的下面還有一行字，線要框到它 —— 尾端 6px 淡出（裁圖的切口／接的尾巴
   都收在這 6px 裡）。遮罩掛在飾件上、蓋住它的外框，所以尾巴（在外框內）也一起吃。 */
#v4-trend .v4-orn,
#v4-theme .v4-orn,
.v4-pair-col .v4-orn{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 4px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 4px),transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  /* ★2026-09-14（補 89）使用者：「就使用當前的 DecoChineseJie.webp，不改變其高度，
     不拉伸不重複，然後把兩行文字都排進去這個高度以內。現在有很多空隙啊，
     不可能排不進去啊。減少行距應該可以了。如果這都不行，就把標題字的位置升高一點。」
     → 飾件固定 78px（＝實圖原高，不接尾巴、不裁圖），改用兩件事把兩行字收進這 78 裡：
         1) 收緊抬頭與第二行之間的距離（見 .v4-trend-head／.v4-theme-head／
            .v4-pair-col .v4-sec-sub 的 gap 與負 margin-top）；
         2) 飾件整顆往下挪 8px（top 是相對定位，純視覺、不動版面），
            等於「把標題字在飾件裡的位置升高一點」，
            讓 78 的下半段空出來框住第二行。
       兩者相加後，en／zh／ja／ru 四語實測第二行墨跡底都落在飾件底緣上方 4～7px。
       尾巴機制（--orn-tail）留著當保險：萬一某語系第二行還是掉出 78，
       JS 會把顯示高度往上補，線自動接長，不會出現「線只畫到一半」。 */
  top:8px;
}
/* 上面那三條只是「JS 還沒跑到」時的後備高度（en 這種折一行的量出來差不多就是這個值；
   尾巴的後備長度＝高度 − 78）。真正的高度由 fitOrnTail() 量出來寫成行內 --orn-h，
   換語言、fonts.ready、視窗 resize 都會重量一次。 */
#v4-trend .v4-orn,
#v4-theme .v4-orn,
.v4-pair-col .v4-orn{--orn-h:78px}
.v4-sec-title h2{
  margin:0;
  font-size:46px;
  font-weight:400;
  line-height:1.24;
  letter-spacing:.1em;
  color:#eedcb0;
}
.v4-sec-sub{
  margin:9px 0 0 28px;
  font-size:13px;
  letter-spacing:.2em;
  color:var(--dim);
}
.v4-rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin-top:16px}

/* =====================================================
   S1 上半 · 「每日指引」＋流日期行（原 S0 刊頭併入主視覺）
   -----------------------------------------------------
   2026-09-12 使用者指示：「大標題（每日指引）和流日那行移到 Hero 區，
   整個刊頭不要了」。原本獨立的 1200×258 刊頭底圖
   （DailyGuidance/DailyGuidanceBG_Header.png）整塊移除，頁面改由主視覺開場，
   這兩個元素搬進 .v4-hero-txt，排在檔位字之前。
   檔位字後於補 45 改為 B 案（升為封面主角，基礎 150px）——實際級數由
   fitHeroType() 量測後決定（長詞語系會等比再縮，上限綁主視覺高度）。
   ===================================================== */
.v4-hero-title{
  margin:0;
  font-size:78px;
  font-weight:400;
  line-height:1.06;
  letter-spacing:.18em;
  /* ★補 51（2026-09-13）使用者：「將『2026年9月13日·流日…』和『每日指引』左對齊…
     原本就是左對齊的，後來我讓你錯開了一下，現在只需要把錯開去掉。」
     錯開是怎麼來的：補 45 把金色漸層字面從 h1 搬到內層 span（.v4-hero-title-t）
     之後，text-indent 變成套兩次——h1 自己一次，inline-block 的 span 是區塊容器、
     又把 text-indent 繼承進去再縮一次（.18em 在 78px 下＝14.04px ×2）。
     結果「每日指引」的筆跡從 52px 被推到約 85px，而流日那行還在容器的左緣 52px。
     所以這裡改成 0，span 那份也一起歸零（見下一條），主標就回到與流日／檔位字／
     今日傾向同一條左緣。原本那句「補償末字字距」是為了置中標題用的；現在是左對齊，
     末字後面那 14px 空白不影響視覺，反而是它把標題推歪的。 */
  text-indent:0;
  white-space:normal;             /* 長語系的刊名可以折行，不硬撐出去 */
  overflow-wrap:break-word;
}
/* 補 45：金色漸層字面從 h1 搬到內層 span（app.js 的 .v4-hero-title-t）。
   原因：黑色軟底掛在 h1 的 ::before（z-index:-1），而 h1 原本的 filter、
   以及 fitTitleScale() 事後補上的 transform，都會讓 h1 變成 stacking context
   ——軟底就會被畫在 h1 自己 background-clip:text 的金色字面「之上」把標題蓋掉。
   放到 span 之後，金色字面是 inline 內容，一定落在軟底之上。
   陰影同時從 filter:drop-shadow 改成 text-shadow：兩者都是從字形畫出來的，
   但 text-shadow 屬於文字自己的繪製層，不會再另外造出 stacking context。 */
.v4-hero-title-t{
  display:inline-block;max-width:100%;
  text-indent:0;                  /* ★補 51：擋掉從 h1 繼承下來的第二份縮排（見上） */
  background:linear-gradient(180deg,#f9f0cd 0%,#e6ca86 44%,#b98f43 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 8px 26px rgba(0,0,0,.72);
}
/* 拉丁／斯拉夫語系的刊名（DAILY GUIDANCE / ЕЖЕДНЕВНОЕ РУКОВОДСТВО…）
   是長詞，基礎級數降一階，再由 fitHeroType() 量測收尾。 */
html:not(:is([lang="zh-Hant"],[lang="zh"],[lang="ja"],[lang="ko"])) .v4-hero-title{
  font-size:56px;letter-spacing:.10em;text-indent:0;   /* ★補 51：同 CJK，不再縮排 */
}
.v4-hero-date{
  /* ★補 51：使用者「將流日那行向上移動 15 像素」→ 14 − 15 ＝ −1px。
     這個 margin-top 是「主標盒底 → 流日那行盒頂」的距離（實測 146.2 → 131.2）。 */
  margin-top:-1px;
  font-size:15px;
  letter-spacing:.14em;
  color:rgba(233,224,203,.86);
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.v4-hero-date b{font-weight:400;color:var(--gold2)}
.v4-hero-date-sep{margin:0 10px;color:var(--dim)}

/* =====================================================
   S1 · 主視覺（滿幅）
   ===================================================== */
.v4-hero{
  position:relative;
  /* 版心同寬 1200。2026-09-12：刊頭整塊移除、大標題搬進來之後，
     主視覺就是整頁的第一屏。它與下方今日氣流之間改用 .v4-goldline 分隔，
     所以不再自己畫 border-bottom（否則會變成一深一金兩條線）。 */
  margin:0;
  aspect-ratio:1200/550;          /* 底圖原始比例：寬度縮就等比跟著縮，圖不變形 */
  height:auto;
  overflow:hidden;
}
.v4-hero-art{
  position:absolute;inset:0;
  background-color:#0a0908;
  /* 滿幅主視覺底圖：DailyGuidance/DailyGuidanceBG_Hero_{female|male}.png（1200×550）。
     這裡放的是女版預設；實際載入哪一版由 app.js 依命宮性別指定，
     對應性別的圖還沒出時會自動退回女版，不會開天窗。 */
  background-image:url("DailyGuidanceBG_Hero_female.webp?v=20260914d");
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
/* （原本這裡有一層 .v4-hero-scrim 壓暗漸層。底圖本身左半邊已經夠暗，
   使用者看過實圖後指定「去掉」→ 整層移除，主視覺直接見圖，
   檔位字靠自身的 text-shadow 站住。） */
/* 檔位字＋今日傾向：人物在右，字走左半邊。
   補 45（2026-09-13）使用者選定 B 案（檔位字升為封面主角）之後：
   上方兩行（主標／流日期）往上收（13% → 9%），
   檔位字與今日傾向再一起往下 50px（見 .v4-hero-word 的 margin-top；
   2026-09-13 當天先試 100px，看過實圖後依指示收回 50px），
   讓「費力／Stabile」落在左半邊的中下帶。
   top 是相對高度，窄畫面主視覺變矮時會自己跟著上移。 */
.v4-hero-txt{
  position:absolute;z-index:3;
  left:var(--gut);top:9%;
  right:var(--gut);max-width:660px;   /* 窄畫面不會頂出視窗 */
}
/* 檔位字（費力／Stabile…）。2026-09-12 曾依指示縮到 60px（＜「每日指引」的 78%）；
   2026-09-13（補 45）使用者改選 B 案：檔位字升為封面主角，
   基礎級數 60 → 150px、字距 .06em → .02em（大字配寬字距會散），
   並與上方兩行拉開 50px（margin-top 22 → 72）。
   fitHeroType() 仍會量寬度收尾：長詞語系超出版心時等比縮，
   但上限改綁主視覺高度（150px ＝ 550 高的 27%），不再綁主標級數。 */
.v4-hero-word{
  /* inline-block：寬度才等於文字本身，fitHeroType() 才量得到溢出 */
  display:inline-block;
  margin-top:72px;
  font-size:150px;
  line-height:1.05;
  letter-spacing:.02em;
  color:#f8f0dd;
  white-space:nowrap;
  text-shadow:0 8px 34px rgba(0,0,0,.72);
}
.v4-hero-line{
  /* margin-top 只是「還沒量到」時的墊底值：實際上由 app.js 的 fitHeroLineGap()
     量出檔位字的墨跡底與這行墨跡頂，改成貼到 HERO_LINE_GAP（5px），
     每個語系、每個級數都會不一樣（CJK 是方塊字、拉丁有下伸部）。 */
  margin-top:12px;
  font-size:16px;
  /* ★補 50（2026-09-13）使用者：「再將今日傾向下面那行字向上移動大概 20 像素
     （當前他們的行距太大）」。
     這兩行是「金色標籤＋句子」的一組（.v4-hero-line b 是 block，自己佔一行），
     原本 1.72 的行高在 16px 字級下太鬆——實測標籤墨跡底 ↔ 句子墨跡頂
     ＝11.5～13.5px（_codex_probe/_v4hero51f.mjs，11 語）。
     收成 1.2（行盒 27.52 → 19.2px）之後＝3.2～5.2px，跟上方
     「檔位字 ↔ 標籤」的 HERO_LINE_GAP＝5px 同一個節奏。
     ★收不到 20px：兩行都是 16px 的字，行盒再怎麼收，墨跡最多靠到 0
     （zh-Hant 收 15px、ja／ko 收 16px 就會碰到），所以 20px 沒有空間；
     1.2 是「看起來同一組、又不會黏住」的值。要更貼就改這一個數字。 */
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--ivory);
  max-width:600px;
}
/* 標籤「今日傾向：」自己佔一行（v4SplitLabel 已把「標籤：」和句子切成兩個節點，
   所以 display:block 就是「標籤一行、句子從下一行起」。11 語都走同一條路）。
   unicode-bidi:plaintext 是為了阿拉伯語：那顆 b 變成 block 之後就不再繼承外層
   的 plaintext，若不補，標籤會貼左、下一行的阿拉伯文句子卻貼右。 */
.v4-hero-line b{display:block;unicode-bidi:plaintext;font-weight:400;color:var(--gold2)}
/* ------------------------------------------------------------------
   【補 404】2026-09-23 使用者指示：封面「今日傾向」下方要列出這一頁實際用到的
   出生資料（「基於你的生日和命宮資料：」＋出生日期／性別／時辰＋四柱八字）。
   使用者原話：「这样做可信度高，并且方便我们开发者校对。」
   排版沿用上面幾行同一套：金色標籤自己一行、內容象牙白，各自帶軟黑底；
   字級比今日傾向小一階（16 → 14），才不會搶過檔位字。
   ------------------------------------------------------------------ */
.v4-hero-basis{
  margin-top:14px;
  font-size:14px;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--ivory);
  max-width:600px;
}
.v4-hero-basis b{display:block;unicode-bidi:plaintext;font-weight:400;color:var(--gold2)}
.v4-hero-basis em{display:block;font-style:normal;unicode-bidi:plaintext}
.v4-hero-basis em.v4-pillars{letter-spacing:.12em}
/* ------------------------------------------------------------------
   封面這幾行各自的黑色軟底（補 45）
   ★統一叫法：這個東西全站一律叫「軟黑底」（soft-ink）。
     本檔舊註解裡的「黑色軟底／黑色襯底／軟底」都是同一個東西，
     定義見全站結構開發記錄【補 181】；往後新寫的註解與對話都用「軟黑底」。
   2026-09-13 使用者指示：「每一行都要加上 8 事卡那種黑色漸隱 + 模糊邊緣的
   黑色襯底」。做法完全比照 .v4-card-name／.v4-card-lead（補 32／33）：
     1) 襯底做在元素自己的 ::before —— 元素搬到哪、字有多長，襯底就跟到哪；
     2) 元素加 width:fit-content，盒寬黏著文字
        （fitTitleScale() 本來也會把封面主標／日期／檔位字的盒寬鎖成文字寬，
          這裡是給還沒量到的情況墊底；.v4-hero-line 用它把整段收成一條）；
     3) 兩端淡出固定 30px、上下各外擴 11px，再用 9px 的垂直遮罩吃掉上下硬邊。
   註 1：主標的金色漸層字面在內層 span 上（見上），軟底才會落在字面之後。
   註 2：開「框出區域」時，除錯框用的是同一個 ::before，會蓋掉軟底；
        關掉就回來（除錯模式本來就是看框線，不影響正式畫面）。
   ------------------------------------------------------------------ */
.v4-hero-title, .v4-hero-date, .v4-hero-word{
  max-width:100%;
}
.v4-hero-title, .v4-hero-date, .v4-hero-word, .v4-hero-line, .v4-hero-basis{
  position:relative;width:fit-content;
}
.v4-hero-title::before, .v4-hero-date::before,
.v4-hero-word::before, .v4-hero-line::before, .v4-hero-basis::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-18px;right:-18px;top:-11px;bottom:-11px;
  background:linear-gradient(90deg,
    rgba(6,5,4,0) 0,
    rgba(6,5,4,.50) 30px,
    rgba(6,5,4,.50) calc(100% - 30px),
    rgba(6,5,4,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0, #000 9px, #000 calc(100% - 9px), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0, #000 9px, #000 calc(100% - 9px), rgba(0,0,0,0) 100%);
}
/* 阿拉伯語（RTL）：日期行與今日傾向本來靠 unicode-bidi:plaintext 貼右；
   今日傾向的盒寬改成黏文字之後，用 auto 左外距把它推回右緣，維持原本的貼右。
   （日期行的盒寬是 fitTitleScale() 寫的行內 style，這裡不動它。） */
html[dir="rtl"] .v4-hero-line{margin-left:auto;margin-right:0}
/* 檔位字不跟著貼右：阿拉伯語整頁的骨架都是靠左（見上面的 RTL 段與各區塊實測），
   主標／日期／檔位字都在左緣，只有 .v4-hero-line 那段是 right（unicode-bidi
   :plaintext）。檔位字放大成主角之後若單獨貼右，會跟主標拆成兩邊。 */
/* （原 .v4-hero-note「ART SLOT · 待出圖」的圖位說明已移除：底圖已出。） */

/* =====================================================
   S2 · 今日氣流
   ===================================================== */
.v4-flow-row{
  display:grid;
  /* 2026-09-14：右側那個 176px 的獨立小人圖位刪掉了（小人改住命宮圓心），
     空出來的 176＋18＝194px 回收給粒子帶：700 → 880。
     同日使用者再看：「整個粒子區向右移動一點，距離左側今日氣流太擠」
     → 把間距從 18 放大到 60（＋42），畫布縮回 852 讓右緣貼齊版心：
     224＋60＋852＝1136，剛好是版心寬。
     粒子帶高度仍是 300、整區仍是 350（todayQiFlowBG.webp 的 1:1），
     所以底圖不用重出；daily-flow.js 的 W 是照畫布標籤走的（見該檔），
     圓心＝W×460/700，縮寬不會動到圓環大小與構圖比例。 */
  /* 2026-09-14 使用者：「跑道還可以向右移動一點，然後命宮右側的區域可以留少一點。」
     → 兩件事一起做：
     (1) 跑道本身右移：間距 60 → 88（＋28），畫布 852 → 824 補回那 28，
         右緣仍然貼齊版心（224＋88＋824＝1136）＝畫布左緣從 x328.5 移到 x356.5。
     (2) 命宮在畫布裡再靠右：圓心比例 460/700 → 0.70（daily-flow.js 的
         opts.sphereRatio，只有 v4 傳），圓心 x560 → x577，圓環右緣 678 → 695，
         右側留白 174 → 129。命宮整體（含方位字）比改動前右移 45px。
     圓環大小、方位字、粒子速度密度都沒動；W 仍是照畫布標籤走的。 */
  /* 2026-09-14 使用者：「現在左側這個區域寬鬆點了，文字區域可以橫向加大一些了。」
     → 左欄 224 → 272（＋48），間距 88 → 40（−48）：總寬不變（272＋40＋824＝1136），
     所以畫布與命宮一個 px 都沒動（畫布左緣仍是 x356.5、圓心仍是 x577）。
     只有「可以被文字使用的橫向空間」變寬：正文可用寬 196 → 244，
     標題（#v4-flow .v4-sec-title h2）的區域也跟著變寬，scaleX 自然不會壓那麼扁。 */
  grid-template-columns:272px 824px;
  gap:40px;
  align-items:start;
  margin-top:0;          /* 依指示緊貼主視覺底緣（原本留 4px） */
}
.v4-flow-left .v4-sec-title h2{font-size:40px}
.v4-flow-desc{
  /* ★補 52（2026-09-13）使用者：「图1这段正文对齐方式有点问题，左边界对到那个装饰图了…
     使正文不要对着装饰竖线。」
     原因：抬頭列是 flex（.v4-orn 寬 13 ＋ gap 15），所以 h2 的實際左緣在 28px；
     這段正文是普通區塊，貼在欄的左緣 0 → 正好跟飾件那條豎線同一條。
     縮排 28px 之後跟 .v4-sec-sub 的 28px 同一個基準：飾件／抬頭／小字／正文
     變成「飾件在最左，其餘四行同一條左緣」。 */
  margin:16px 0 0 28px;
  font-size:15px;
  /* 行距：原本 2.05，2026-09-12 使用者指示「行距太大了，改為 1.15 就夠了」。
     這條是「根據中國古代智慧…」那句話（11 語共用），拉緊之後左欄也從
     最高 349.3（fr／it／pt）降到約 200，整區 350 的高就不再被撐到貼邊。 */
  line-height:1.15;
  letter-spacing:.02em;
  color:var(--muted);
  user-select:text;
  cursor:text;
}
.v4-flow-stage{align-self:center}
.v4-flow-stage .fc-sentence{display:none}   /* 那句話搬到左欄了，畫布底下不再重複 */
/* 2026-09-14：右側那個獨立的小人圖位（.v4-qifig，176×300）整格刪除。
   小人改成「只住在命宮圓心」（見下方 .fc-qi-core），所以原本的第三欄
   176px ＋ 它的 18px 間距都回收給粒子帶（700 → 880，見 .v4-flow-row）。 */

/* 命宮中心的小人壓在粒子帶圓心（2026-09-14）
   ------------------------------------------------------
   定位點＝畫布座標 (560,150)／畫布 852×300 → left 65.714% · top 50%。
   圓心比例從頭到尾沒變過（daily-flow.js 的 SPHERE_X＝畫布寬 × 460/700），
   所以這兩個百分比從 700 版一路沿用，一個字都不用改。
   這一格現在是全頁唯一的小人圖位（右側 .v4-qifig 已刪）。
   這裡只鎖高度、寬度照比例，所以換尺寸改 --qicore-h 一個值就好。
   載不到檔案時 qiCoreSet() 會掛 .is-missing，這裡直接整格 display:none。 */
.fc-qi-core{
  position:absolute;
  /* 圓心比例＝daily-flow.js 的 opts.sphereRatio（v4 傳 0.70），
     與畫布 824 相乘＝577，就是下面這個 70%。兩邊要一起改。 */
  left:70%; top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  /* z-index:0 ＋ 下面把畫布提到 1 ＝ 小人壓在粒子下層，粒子流從它前面走過。
     兩者都在 .fc-stage 這個 position:relative 的框裡比序，不必動 DOM 順序；
     .fc-tag-disk／.fc-legend 仍是 2，標籤永遠在最上層。
     ★不要寫成 z-index:-1：那會退到 #v4-flow 的底圖後面（整個被蓋掉）。 */
  z-index:0;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  /* 2026-09-14 使用者指示：命宮上的氣象小人縮為原本約 80%（208 → 166）。
     命宮外圈（畫布半徑 118，直徑 236）內縮一點，留出粒子環。 */
  --qicore-h:166px;
}
.flow-canvas .fc-stage>canvas{position:relative;z-index:1}
.fc-qi-core img{
  display:block;
  height:var(--qicore-h);
  width:auto;
}
.fc-qi-core.is-missing{display:none}

/* 「命宮／YOUR LIFE PALACE」小標：小人住進圓心之後，它原本坐的位置（圓心）
   正好被圖壓住，字疊在人身上讀不清。改坐到圓環下緣之外的那條留白
   （圓環下緣 y≈268，小標落在 285），上不碰「南」字（基線 266）、
   下不出畫布（300）。
   ★只作用在 v4；daily-guidance-v2.css 那條 left:65.7%/top:52% 是
     v1／v2 備份頁在用的，不動。 */
#v4-flow .fc-tag-disk{left:70%;top:95%}

/* 今日氣流／氣運趨勢之間的金色分隔線：中央實、兩端漸層淡出（純 CSS） */
/* 區塊之間的金色分隔線（中央實、兩端漸層淡出，純 CSS）。
   2026-09-12 使用者指示「每個區塊之間都是緊貼的，用金色線隔開」：
   原本是 margin:26px 0 24px（前後各留一段白），現在上下歸零 ——
   線正好落在兩個區塊的接縫上，上下兩張底圖直接相接、不夾一條深色縫。
   左右仍留 --gut（32px），所以線是版心內 1136px 寬。 */
.v4-goldline{
  height:1px;
  margin:0 var(--gut);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(205,166,90,.30) 16%,
    rgba(226,197,131,.72) 50%,
    rgba(205,166,90,.30) 84%,
    transparent 100%);
}

/* =====================================================
   S3 · 氣運趨勢
   ===================================================== */
/* 抬頭列：標題在左、區間頁籤（7天／本月／本季／本年／十年）在右，同一行；
   副標自己佔一行。頁籤節點由 v4MoveTrendTabs() 從圖表上方搬過來。
   flex-wrap 讓窄畫面時頁籤自動掉到第二行，不必另外寫 media query。 */
.v4-trend-head{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px}
.v4-trend-head .v4-sec-title{order:1}
.v4-trend-head .nx-tabs{order:2;margin:0 0 0 auto;gap:8px}
/* flex-basis:100% 讓副標自己佔一行；要能縮（shrink:1），
   否則它自己的 margin-left:28px 會把版面撐出 28px 的橫向溢出。 */
.v4-trend-head .v4-sec-sub{order:3;flex:1 1 100%;min-width:0;margin-top:-1px}
#v4-trend .nx-tab{font-size:12.5px;padding:5px 13px;border-radius:2px}
/* 臨時鈕（2026-09-13／2026-09-14 收進 dev）：刻意長得和區間頁籤不一樣——
   虛線框、字亮一點，一眼看出它不是正式功能。
   2026-09-14（補 64）：正式版不再出現。JS 那邊已經用 IS_DEV 決定要不要產生，
   這裡再補一條保險（就算 JS 漏了，不是 dev 也看不到）。
   要徹底刪掉這顆，連同 JS 的 nxLifeFollowLabel()／nxToggleLifeFollow() 一起。 */
body:not(.dev) #v4-trend .nx-tab-temp{display:none}
#v4-trend .nx-tab-temp{
  border-style:dashed;
  border-color:rgba(205,166,90,.55);
  color:var(--gold2);
}
#v4-trend .nx-tab-temp.active{
  border-style:dashed;
  background:rgba(205,166,90,.10);
  color:var(--gold2);
}
/* 圖表與頁籤之間原本有一條橫線（.nx-wrap 的 border-top），依指示取消；
   下面幾行是「底部那兩行」往上靠的距離。
   margin-top 由 12px 歸零：圖面上緣的空白已改由 SVG 的 viewBox 裁掉
   （見 daily-guidance-v4-app.js 的 VTOP），這裡再留 margin 就是多餘的空氣，
   會讓「把握節奏 · 順勢而行」那行小字與圖面之間又拉開十幾 px。 */
.v4-trendbox{margin-top:0}
.v4-trendbox .nx-wrap{border:0;background:none;padding:0;margin-top:0}
.v4-trendbox .nx-read{margin-top:6px;min-height:0;font-size:12.5px;color:var(--gold2);text-align:center}
.v4-trendbox .nx-summary{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line-soft);
  font-size:13.5px;
  letter-spacing:.02em;
  color:var(--muted);
  text-align:center;
}

/* =====================================================
   S4 · 今日主題 ＋ 四領域
   ===================================================== */
/* ★補 428（2026-09-24 使用者指示）：「theme 段加上這個背景」，
   底圖＝DailyGuidance/DailyGuidanceBG_Theme.webp（1200×374，使用者出圖，與補 427 同批）。
   畫面：右上角一面裁掉上緣與右緣的大羅盤、中上裊裊香煙、右下角一塊越過下緣的玉珮／蓮瓣，
   左上角壓印「天時有序／順勢而行」兩行小字＋一方朱印。全圖最亮處 R=122，是暗場底圖。
   ★貼在整個 #v4-theme（標題列＋四領域那一整區），不是只貼四張卡：
     羅盤與玉珮都是「刻意畫到出血」——玉珮的墨跡一直畫到 y=373＝圖的最後一列，
     所以整張圖必須正好鋪滿區塊（上緣貼金線、下緣壓在區塊底），
     不然羅盤／玉珮會被切出一條直邊。試過「100% auto 靠上」那版：ru 的玉珮被水平切一半、
     切口與下方留白之間還看得到一條色階，直接淘汰。
   ★高度：實測 11 語 × 21 天是 321.9（ar）～417.5（ru 第 20 天），
     這 95.6px 的差額全部來自四領域四張卡的說明文字長短（卡片區 178～273 高）。
     所以用 min-height:374px（＝圖的原始高）把短的頂到 374：
       · 內容 ≤374 的語言（ar 321.9／zh 323.9–350.8／ja・ko 356.8／de・fr・es・pt・it・en
         的短日子 348.8）＝整區正好 374，圖 1:1 不失真。
         · 內容超過 374 的日子（fr 402.5、ru 416.5／417.5…）＝圖被縱向拉長，最多 +11.6%。
           代價是羅盤那圈弧線略成橢圓；把 1:1 與 +11.6% 兩版放大並排比對過，看不出差別，
           換來的是羅盤與玉珮的出血邊永遠對得上區塊邊緣。
         ★同日稍後（補 429）把抬頭底下那條分數橫條刪掉、四張卡改成圓角框之後，
           整區高度重掃一次：11 語 × 21 天＝374～401.5（ru），拉長上限從 +11.6% 降到 +7.4%。
   ★左上角那組壓印小字（墨跡 x40–107、y56–85；朱印 x38–71、y98–120）會壓在標題列上：
     標題從 x=60 起、行框 y23–80，11 語都比對過（重疊約 46×12px），
     實際看是躲在「今日主題／Theme」後面的一層鬼影。這是圖自己的構圖、不是 CSS 造成的，
     要收掉有兩條路（留給使用者決定）：① 圖上那組小字搬到左下或右下（像 Best_Care 那張）；
     ② 在 CSS 疊一小塊柔邊暗色遮罩壓掉那一小角（不動圖檔）。
   ★這張圖 alpha 228–255（與補 427 的 Best_Care 同級），不留白邊、直接 100% 100% 撐滿；
     窄畫面（見檔尾 media query）改 cover。 */
#v4-theme{
  min-height:374px;
  background:url("DailyGuidanceBG_Theme.webp?v=20260924d") center/100% 100% no-repeat;
}
/* 2026-09-12 使用者指示：「正財 現實事務、穩定收入、資源管理、執行」與
   「先處理必要事項…」都跟到「今日主題」標題後面，不要各佔一整行。
   標題列改成 flex：標題 → 十神＋主題詞 → 那一句，超出寬度就自然換行，
   整個區塊因此矮掉一截（原本是標題列／主題列／說明三段疊起來）。 */
.v4-theme-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 26px}
/* 2026-09-14：飾件要往下框住第二行（見 .v4-orn 的尾巴），但這區的第二行
   （十神＋主題詞＋那一句）原本貼在欄的左緣 x=0，豎線會從字上穿過去。
   依使用者先前那條「正文不要對著裝飾豎線」的原則：把抬頭以外的整塊縮排 28px
   （跟標題、跟其他區那行小字同一條左緣），抬頭列再用負邊距拉回最左，
   讓飾件停在最左邊。padding 不動 border box，所以標題的區域量測不受影響。 */
#v4-theme .v4-theme-head{padding-left:28px}
#v4-theme .v4-theme-head>.v4-sec-title{margin-left:-28px}
/* 補 89：同一件事——十神＋主題詞、以及那一句，再往標題收 6px
   （原本只靠 head 的 row-gap 10px，收成 0 之後這裡再收 6）。
   這兩行是「同一列」的兩個節點（窄畫面才各自換行），所以要一起收。 */
#v4-theme .v4-theme-inline,#v4-theme .v4-theme-note{margin-top:-6px}
.v4-theme-inline{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  font-size:17px;letter-spacing:.04em;color:var(--gold2);
}
.v4-theme-inline b{font-weight:400;color:#eedcb0}
.v4-theme-inline em{font-style:normal;font-size:14.5px;letter-spacing:.02em;color:var(--muted)}
.v4-theme-note{
  font-size:14.5px;line-height:1.7;letter-spacing:.02em;color:var(--ivory);
  max-width:720px;
}
.v4-theme-basis{margin:18px 0 0}
.v4-dom-grid{
  display:grid;
  /* ★補 429：四欄由 1fr 改成 minmax(0,1fr)＝四張卡「等寬」。
     1fr 是 minmax(auto,1fr)，auto 下限會被卡片的最小內容寬撐開：
     改成圓角框之後，四張不等寬的框會很明顯（實測 en 260／260／313.5／260、
     ru 298.8／228.6／338.7／258.2），所以改用 minmax(0,1fr) 把四欄鎖成等寬
     （1136 − 3×14）÷4 ＝ 273.5。 */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
  /* ★補 429（2026-09-24 使用者指示）：「將 Theme 這裡的所有線條去掉，
     重新用四個圓角框框起來，類似（附圖）的效果」。
     ⇒ 四領域卡由「線框」改成「圓角框」：
        · 刪掉：整塊左右兩條外緣豎線（原 .v4-dom-grid::before／::after）、
          欄與欄之間那條帶端點的豎線（原 .v4-dom + .v4-dom::before）、
          每張卡上緣那條漸變金線（原 .v4-dom 的 background-image）、
          抬頭底下那條分數橫條（原 .v4-dom-bar，連 app.js 裡的節點一起刪）。
        · 改成：每張卡自己一個 1px 金的圓角框（border-radius:16px）＋一層很淡的暖色底，
          詳見下面 .v4-dom 的說明。
        · 不動：「領域側重」上面那條細線（.v4-dom-focus::before）——
          使用者附的參考圖上也有這一條，所以留著；要一起去掉再改一行即可。
     歷史：上面那套三種線框的寫法出自補 90／補 91，這一輪整組退場。 */
  position:relative;
}
.v4-dom{
  position:relative;
  padding:19px 20px 17px;
  /* ★補 429：一張卡＝一個圓角框（使用者附圖的規格）。
     · 框線：border 1px，金 205,166,90 在 .30（實測附圖框線左緣 rgb(68,52,36)、
       右緣 rgb(35,25,17)，換算就是這支金 .30 → .13；這裡取中上值走單一色，
       圓角與那圈細線才是視覺主角）。
     · 圓角半徑 16px（附圖卡寬約 280、圓角約 16，量出來的）。
     · 卡面底色：附圖卡內 rgb(15,14,10)、卡外 rgb(8,8,6)，差額就是「這支金 4～5%」；
       但本站卡片底下壓的是 Theme 底圖（羅盤、香煙都在卡片後面），
       所以再墊一層很淡的暗底 rgba(10,8,6,.42) 把底圖壓住，保住正文對比；
       兩層合起來＝「暗底＋一點暖色提亮」，與附圖的明暗關係一致。
     · 底色是漸層（上緣略亮、下緣略暗），讓框內有厚度，不像貼紙。 */
  border:1px solid rgba(205,166,90,.30);
  border-radius:16px;
  background-color:rgba(10,8,6,.42);
  background-image:linear-gradient(180deg,rgba(205,166,90,.055),rgba(205,166,90,.022) 46%,rgba(0,0,0,.10));
}
/* ★補 430（2026-09-24 使用者指示）：「呃，不要分 2 行啊，直接縮小字級吧」。
   等寬四欄之後，第三張卡的「名稱＋狀態數字」在 6 個語系放不進 273.5px
   （實測 ru 的 Отношения 66 Благоприятно 在基準級數要 296.2px、可用只有 231.5px）。
   補 429 先用換行擋著，這裡改成：一律一行，塞不下就整組降字級
   （由 app.js 的 fitDomHeads() 量完把 --dom-name／--dom-num／--dom-em 寫在 .v4-dom-grid 上，
   四張卡永遠同一級數；三支變數放在 CSS 變數、不是行內樣式，窄畫面媒體查詢才蓋得動）。
   所以 nowrap 是必要的：fitDomHeads() 就是靠「量 nowrap 整串需要多寬」來算倍率。 */
.v4-dom-head{display:flex;align-items:center;gap:10px}
.v4-dom-ico{
  flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(205,166,90,.45);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--gold);
}
/* ★補 430：級數改吃 CSS 變數（預設＝原定稿的 17／15／20）。
   字距用 em，所以跟著字級一起縮，比例不變。 */
.v4-dom-name{font-size:var(--dom-name,17px);letter-spacing:.1em;color:var(--ivory)}
.v4-dom-num{margin-left:auto;font-size:var(--dom-num,15px);letter-spacing:.06em;color:var(--gold2);white-space:nowrap}
.v4-dom-num em{font-style:normal;font-size:var(--dom-em,20px);margin-left:6px}
.v4-dom-note{margin:14px 0 0;font-size:14px;line-height:1.92;color:var(--muted)}
/* ★補 429：分數橫條（.v4-dom-bar）已依指示整個刪除（連 app.js 的節點），
   分數現在只以右側的「狀態＋數字」呈現——與使用者附圖一致。 */
/* ★補 90 標注3：DOMAIN FOCUS 那行上面再補一條漸變金線（兩端淡出）。
   原本 note → focus 是 12px，現在拆成「7px → 線 → 8px」。 */
.v4-dom-focus{margin:7px 0 0;font-size:12.5px;letter-spacing:.04em;color:var(--dim)}
.v4-dom-focus::before{
  content:"";display:block;height:1px;margin:0 0 8px;
  background:linear-gradient(90deg,transparent 0,rgba(205,166,90,.5) 14%,rgba(205,166,90,.5) 86%,transparent 100%);
}
.v4-dom-focus b{font-weight:400;color:var(--gold)}

/* =====================================================
   S5 · 今日宜／慎 ＋ 今日有利方位（三欄）
   -----------------------------------------------------
   2026-09-12 使用者指示：「今日有利方位放上去今日宜／慎右邊，這一區改成三欄」。
   原本「今日宜／慎」與「今日有利方位」是三個獨立區塊（方位自己一條、
   前面再加一條金線），中間還夾一塊水墨留位框（.v4-pair-art，本來就沒圖）。
   現在：留位框移除，方位併進來當第三欄；第三欄要放羅盤，所以給固定 296px，
   另外兩欄平分剩下的寬度。
   同時依指示拿掉兩側的直式裝飾小字（積小而成大／知止而後安／向陽有光…），
   那些是參考圖（AI 出圖）上的裝飾，不是庫內容。
   ===================================================== */
.v4-pair{
  display:grid;
  /* 2026-09-12 使用者指示：
     「今日宜和今日慎，需要佔據那麼多橫向空間嗎？是不是可以多留一點給今日有利方向？
      使今日有利方向的標題字號能夠和今日宜一樣，而有利方向如果能夠佔據更多橫向空間，
      那麼羅盤下方的文字區也有更多空間，行數可以減少。」
     所以第三欄由 360px 改成「吃掉剩下的全部」（版心 1136 − 330×2 − 間距 68 ＝ 408px），
     宜／慎各讓到 330px（本來 354，各讓 24px）。內容都是短句清單，窄一點不會擠；
     羅盤下方說明寬 330 → 378px，長句少折 1 行以上（ru／en／fr 4 行 → 3 行）。
     ★宜／慎的抬頭在 de／es／pt／ru 是長句（42px 就要 326px），欄一窄就會撞到結繩飾件，
       所以抬頭級數改由 app.js 的 fitPairTitles() 統一算（三欄永遠同一級數）。 */
  grid-template-columns:minmax(0,330px) minmax(0,330px) minmax(0,1fr);
  gap:34px;
  margin-top:0;      /* 原本 4px：依「區塊之間緊貼」歸零 */
  position:relative;
  /* ★補 427（2026-09-24 使用者指示）：「best for you 段補充背景」，
     底圖＝DailyGuidance/DailyGuidanceBG_Best_Care.webp（1200×317，使用者出圖）。
     一整條 1200 寬的暗場底（左上香爐起煙、右緣金枝、左下／右下各一行壓印小字），
     所以貼在整個 S5 三欄區（不是只貼今日宜那一欄）——版心 1200 時與圖 1:1。
     高度：實測 11 語 × 21 天是 285.1（ar／zh 短）～324.2（en 那句折 4 行），
     差額只有 39px，所以用 min-height 頂到圖的原始高 317：
        · 內容 ≤317 的十語（含 en 折 3 行的日子）＝整區正好 317，圖 1:1 不失真，
         左下那行壓印小字（順天時…，墨跡 y282–291）落在今日宜清單下方 34px；
         右下那行（東方生發…，墨跡 y279–294）與第三欄那句話的距離則依語言而定：
         ja／ko／ar／zh 的正文較短（≤268）留 11～14px，拉丁語系正文到 285，
         壓印小字就貼在最後一行正下方 3～5px（231 組比對中沒有字形疊字，詳見補 427）。
        · 只有 en 折到 4 行時整區 324.2，圖被縱向拉長 2.3%（7px）——可忽略；
          若日後要連這 7px 都免，只能把圖重出成 1200×325。
     這張圖 alpha 228–255（和 todayQiFlowBG／fortuneTrendBG 一樣近乎全幅不透明，
     沒有軟邊），所以不留白邊、不用重複，直接 100% 100% 撐滿整區；
     窄畫面（見檔尾 media query）改 cover，免得塌成單欄時被拉長。 */
  min-height:317px;
  background:url("DailyGuidanceBG_Best_Care.webp?v=20260924d") center/100% 100% no-repeat;
}
.v4-pair-col{position:relative;z-index:2}
/* 三欄抬頭同一級數（2026-09-12 使用者指示）。級數由 fitPairTitles() 寫進 --s5-title；
   沒量到（例如 JS 還沒跑）就退回 42px。nowrap 是為了讓 fitPairTitles() 量得到
   「整串一行需要多寬」——不然標題會先自己折行，量出來永遠是欄寬。 */
/* letter-spacing 由 .1em 收到 .04em：42px 的 .1em 是每字 4.2px，像
   "Dafür spricht heute"（19 字）光字距就吃掉 80px，欄一窄就只好縮級數。
   收到 .04em 之後，11 語的三個抬頭在 330px 的欄裡都能維持 42px。
   （其他區塊的抬頭是 46px，字距不變，只有 S5 這三欄收窄。） */
.v4-pair-col .v4-sec-title h2{font-size:var(--s5-title,42px);letter-spacing:.04em;white-space:nowrap}
/* ★補 90 標注4／5（2026-09-14 使用者）：「在兩個欄目之間加漸變金色線分隔。
   當前 Take care with 和 Today's Direction 之間已經有一條分隔線，可以刪除。」
   → 把 .dir 那條 border-left 實線刪掉（padding-left:30px 不動，那是內容左緣），
     兩條分隔線都改由下面的 ::before 產生，位置落在 34px 欄距的正中央。 */
.v4-pair-col.dir{border-left:0;padding-left:30px}
/* ★補 92（2026-09-14 使用者指示）：「乾脆刪除這 2 條豎線吧，懶得慢慢改了」
   ⇒ 兩條欄間分隔線整個拿掉（補 90 的 .v4-pair-col + .v4-pair-col::before 刪除）。
   三欄之間不再有任何直線，靠欄距與各自的結繩飾件分辨欄界。 */
/* S5 三欄那行小字（.v4-sec-sub）原本是 13px／字距 .2em，欄窄了之後
   en／fr／es／pt／it／ru 會折成 2 行（本來 1 行）。這裡只收窄字距到 .14em，
   把那一行救回單行——不影響其他區塊的抬頭小字。 */
.v4-pair-col .v4-sec-sub{letter-spacing:.14em;margin-top:-.5px}
/* 第三欄的抬頭以前比別人小一級，所以飾件也跟著縮（11×62）。
   現在三欄同級，飾件就一起回到 13×78 的預設值。 */
/* 2026-09-12 使用者指示「今日宜／慎行距縮小」：上下內距 7→4、行高 1.7→1.5。 */
/* ★補 52：清單原本也貼欄的左緣（圓點在 2px），也就是跟飾件豎線同一條；
   使用者「那幾個點以及正文應該向右移動一點，使點對上標題，而不是對齊那條裝飾豎線」。
   縮排 26px → 圓點左緣 2＋26＝28 ＝ 抬頭左緣（13＋15）；文字跟著到 48px，
   點與文字的間距（20px）完全不動。 */
.v4-list{margin:18px 0 0 26px;padding:0;list-style:none}
.v4-list li{
  position:relative;
  padding:4px 0 4px 22px;
  font-size:17px;
  line-height:1.5;
  color:var(--ivory);
}
.v4-list li::before{
  content:"";
  position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);
}
.v4-pair-col.care .v4-list li::before{background:var(--red)}
/* ---------- 今日有利方位（S5 第三欄；原本是獨立的 S6 區塊） ---------- */
.v4-dir-body{
  margin-top:10px;
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
}
/* 羅盤那一列。2026-09-12（第三版）：使用者指示「五行直接標在羅盤上，就不用那串字了」，
   所以這一列現在只剩羅盤一個節點，justify-content:center 讓它落在欄的正中央
   （欄寬 360；羅盤＋說明的高度本來就決定這一欄多高，與今日宜／慎大致齊平）。 */
.v4-dir-top{display:flex;align-items:center;justify-content:center;gap:16px}
/* 羅盤：同心圓 ＋ 四向 ＋ 指針。方位角由 app.js 以 --ang 傳入。
   2026-09-12 從獨立區塊的 250px 縮成 190px，才塞得進第三欄；
   同日再依使用者指示「羅盤縮小，讓這一欄盡量和今日宜／慎差不多高」縮到 124px。
   內圈 inset、方位字級、指針箭頭與軸心全部等比跟著縮，否則圈會擠成一團。 */
/* ★補 431（2026-09-24 使用者指示）：「再將這頁的 Today's Direction 的那個代碼繪畫的雷達圖，
   換成 webp 圖（DailyGuidance/DailyGuidance_luopan.webp）。webp 圖沒有任何文字、透明背景。
   你直接按照代碼繪畫的雷達圖的大小和位置換進去即可。」
   ⇒ 盤面本身（外框圓、放射刻度、兩圈細環、中央土環）整組由 CSS 繪製改成實圖：
      · .v4-compass 的 border ／ repeating-conic 刻度 ／ radial 底 全部拿掉，
        改成 100% 100% 的底圖（圖是 256×256、透明背景，盤面四支方位箭飾剛好畫到畫布邊緣，
        所以 1:1 鋪滿 112×112 就是「原來那個圓」的大小）；
      · ::before（inset 12px）／::after（inset 28px）兩圈細環刪除；
      · .v4-cp-hub（中央土環 32px）刪除，節點也從 app.js 拿掉——
        圖上自己有一個中央盤面，指針本來就在半徑 14.4px 以內淡成透明，
        不會出現「指針從土字身上射出來」的老問題。
   大小與位置完全不動：容器仍是 112×112、擺在第三欄正中央；
   方位字（北東南西）、五行字（水木火金＋中土）、指針與向內箭頭全部留在原位、字級不動。
   圖檔沒有文字，所以文字仍然是 DOM 畫的（見下面 .v4-cp-t／-el／-center）。
   ★這三組字現在壓在滿是金線的實圖上，所以各補一道暗色光暈（text-shadow）保住可讀性——
   這是補 431 唯一多做的調整；要拿掉就刪那三條 text-shadow。 */
.v4-compass{
  --ang:180deg;
  /* ★補 432（2026-09-24 使用者指示）：「羅盤大概放大 10%–15% 才夠」。
     盤面直徑由 112 → 126px（+12.5%，取使用者給的 10–15% 中間值）。
     為了讓「放大」以後只改一個數字，這一輪把整個羅盤的幾何全部改成跟著 --cp 走
     （下面所有 calc 的係數都是原本 112px 的比例）：
       · 容器直徑            --cp
       · 指針長度（含箭頭 6px）48/112 → --cp×.4286（箭頭尖端＝--cp×.5357，盤緣約 .53）
       · 五行字所在環半徑      40/112
       · 方位字外移           7/112（南北）、10/112（東西）
       · 東西五行字的橫向位置  17/112（＝圓心到字心 39/112）
       · 土日向內箭頭半徑      20/112（app.js 那行改成 calc(var(--cp)*-.1786)）
     ★字級刻意不動（10／9／10px）：那是使用者先前逐語調過的值，放大的是盤面不是字。 */
  --cp:126px;
  position:relative;
  width:var(--cp);height:var(--cp);
  background:url("DailyGuidance_luopan.webp?v=20260924d") center/100% 100% no-repeat;
  flex:none;
}
.v4-cp-t{
  position:absolute;font-size:10px;letter-spacing:.08em;
  color:var(--gold);z-index:3;
  /* 補 431：字壓在實圖的方位箭飾上，補一道暗色光暈 */
  text-shadow:0 0 5px rgba(0,0,0,.92),0 0 12px rgba(0,0,0,.7);
}
.v4-cp-n{left:50%;top:calc(var(--cp) * -.0625);transform:translateX(-50%)}
.v4-cp-s{left:50%;bottom:calc(var(--cp) * -.0625);transform:translateX(-50%)}
/* 東西這兩個方位字改成「整顆在圈外」（東南西北四字裡只有東西會橫向撞到圈內的五行名：
   ru 的 Восток 35px、de 的 Westen 34px，壓在圈上會伸進來 27px，正好蓋住 Дерево／Metall。
   南北是直向排，圈的上下還有空間，維持原本「壓在圈邊」的畫法。
   2026-09-12 第三版補：東西兩組「方位字在上、五行字在下」各錯開 10px，
   橫軸整條讓給指針——使用者：「只要把90度和270度的文字上下错开10PX左右，留出空位给指针
   就行啦，指针就可以用回原来的固定长度」、「例如西金，西在上，金在下，一上一下」。 */
.v4-cp-w{right:calc(100% + var(--cp) * .0893);top:calc(50% - var(--cp) * .0893);transform:translateY(-50%)}
.v4-cp-e{left:calc(100% + var(--cp) * .0893);top:calc(50% - var(--cp) * .0893);transform:translateY(-50%)}
/* 中央的「土環」（.v4-cp-hub）：2026-09-12 使用者指示「要在中間土字上加個圓，
   指針要從圓的邊緣上發出，不要從羅盤中心發出」時補的那一圈；
   ★補 431 盤面換成實圖之後整個刪除（含 app.js 的節點）——圖上自己有一個中央盤面，
   半徑約 17px，正好接著指針「半徑 14.4px 以內淡成透明」的起點。 */
/* 指針：一條線＋箭頭，整支用 --ang 旋轉（0=北、90=東、180=南、270=西）。
   長度固定 48px，箭頭再往外伸 6px → 尖端落在半徑 54px，也就是外圓邊
   （補 431 之後外圓是實圖的盤緣，半徑約 53～56px，尖端剛好停在盤緣上）。
   使用者：「指針要指到外圓邊緣才好看」、「长文字压到土环也没问题」，
   所以長度不再依語系量，改成把東西兩個字上下錯開 10px 讓出橫軸（見 .v4-cp-el-e／-w）。 */
.v4-cp-needle{
  position:absolute;left:50%;top:50%;
  width:2px;
  height:calc(var(--cp) * .4286);margin-left:-1px;margin-top:calc(var(--cp) * -.4286);
  transform-origin:50% 100%;
  transform:rotate(var(--ang));
  /* 底部（＝圓心那頭）在前面 70% 就淡到全透明：半徑 48×30%＝14.4px 以內看不見，
     所以指針是從中央盤面邊緣（補 431 之後＝實圖那個半徑約 17px 的中央盤）才開始看得見，
     不會像從土字身上射出來。 */
  background:linear-gradient(180deg,
    rgba(224,112,80,.98) 0%,
    rgba(224,112,80,.90) 52%,
    rgba(224,112,80,0) 70%);
  z-index:4;
}
.v4-cp-needle::before{
  content:"";position:absolute;left:50%;top:calc(var(--cp) * -.0536);transform:translateX(-50%);
  width:0;height:0;
  border-left:calc(var(--cp) * .0357) solid transparent;
  border-right:calc(var(--cp) * .0357) solid transparent;
  border-bottom:calc(var(--cp) * .0625) solid #e07050;
}
/* ---------- 羅盤上的五行（2026-09-12 使用者指示） ----------
   以前的作法是羅盤右邊寫一串「中央 / 四隅 · 土」，使用者問「中央跟四隅到底是什麼？
   幹嘛寫兩個？」，最後結論是：直接把五行標在盤上——東木、南火、西金、北水、中土，
   今天是哪一行就亮哪個字、指針指過去，右邊那串字整個不必寫。
   五行名走 tv("elems")：中日韓是一個漢字，其他語系是一個單詞（跟粒子圖的圖例同一套詞），
   顏色沿用粒子圖那一組五色。 */
.v4-cp-el{
  position:absolute;font-size:9px;line-height:1;letter-spacing:.02em;
  color:#b9a473;opacity:.6;white-space:nowrap;z-index:5;
}
/* 補 431：五行字壓在實圖的環帶上，暗色光暈與五色光暈一起給（暗的先、色的後）。 */
.v4-cp-el.on{font-size:10px;opacity:1;color:var(--c);text-shadow:0 0 5px rgba(0,0,0,.92),0 0 9px var(--c)}
/* 五個字都擺在「半徑 40px」那一圈上——正好落在內圈（28px）與外圈（44px）之間的盤面帶裡。
   2026-09-12 第三版補：原本擺在半徑 33px，直的兩字沒問題，橫的兩字出事——
   ru 的 Металл 30px、es 的 Madera 29px 一擺上去就往圓心長，內緣只剩半徑 18px，
   既貼到中央的土，木日／金日時指針（原本 42px）整個插進字裡（見 ru 09-13 截圖）。
   所以五個字一起外移到半徑 40px，指針縮到 21%（約 23px）停在家圈內，彼此不再打架。 */
.v4-cp-el-n{left:50%;top:calc(var(--cp) * .0982);transform:translateX(-50%)}
.v4-cp-el-s{left:50%;bottom:calc(var(--cp) * .0982);transform:translateX(-50%)}
/* 東西兩個字是橫排的：right/left 值 = 56 - 半徑，17px 即離圓心 39px。
   並且整個下移 10px（＝方位字在上、五行字在下）：橫軸整條讓給指針，長字也不會被針穿過。 */
.v4-cp-el-w{left:calc(var(--cp) * .1518);top:calc(50% + var(--cp) * .0893);transform:translate(-50%,-50%)}
.v4-cp-el-e{right:calc(var(--cp) * .1518);top:calc(50% + var(--cp) * .0893);transform:translate(50%,-50%)}
/* 中土：擺在正中央，取代原本的軸心圓點（指針本來就從圓心出發，軸心不必再畫） */
.v4-cp-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:10px;line-height:1;letter-spacing:.02em;white-space:nowrap;
  color:#b9a473;opacity:.85;z-index:6;
  /* 補 431：中土壓在實圖的中央盤面（偏亮）上，補一道暗色光暈才讀得出來 */
  text-shadow:0 0 5px rgba(0,0,0,.92),0 0 12px rgba(0,0,0,.7);
}
.v4-cp-center.on{font-size:11px;opacity:1;color:var(--c);text-shadow:0 0 5px rgba(0,0,0,.92),0 0 10px var(--c)}
/* 土日：engine 給的方位是「中」，沒有方角可指——不畫指針，改成一圈向內的箭頭，
   表示「氣聚中央」。8 支箭頭的 rotate/translate 由 app.js 行內給。 */
.v4-cp-inward{position:absolute;inset:0;display:none;z-index:4}
.v4-compass.center .v4-cp-inward{display:block}
.v4-compass.center .v4-cp-needle{display:none}
.v4-cp-inward b{
  position:absolute;left:50%;top:50%;margin:-3px 0 0 -3px;
  width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;
  border-top:6px solid var(--c);opacity:.9;
  filter:drop-shadow(0 0 3px var(--c));
}
/* 方位大字：★目前沒有節點在用★（2026-09-12 第三版）。
   沿革：52px → 27px → 20px 移到羅盤右側（補 20）→ 壓成窄欄折 3 行（補 21）
   → 使用者問「中央 / 四隅 到底是什麼、幹嘛寫兩個？」→ 改成把五行標在羅盤上，
   這串字整個不寫了（補 22）。規則留著是為了還原：在 .v4-dir-top 裡放回
   <div class="v4-dir-big"><span class="v4-db-l">…</span> <span class="v4-db-t">· 土</span></div>
   即可，版面會回到「羅盤＋右側那串字」的排法。 */
.v4-dir-big{
  margin-top:0;
  font-size:20px;
  line-height:1.35;
  letter-spacing:.04em;
  color:#eedcb0;
  overflow-wrap:anywhere;
  flex:0 1 auto;
  max-width:150px;
  text-align:center;
}
.v4-dir-big .v4-db-t{white-space:nowrap}
/* 中日韓：斷行由 app.js 的 <br> 決定，這裡放開寬度上限；
   3 行各約 40～56px 寬，羅盤離欄緣約 59px，落在欄的中段。 */
html:is([lang="zh-Hant"],[lang="zh-Hans"],[lang="ja"],[lang="ko"]) .v4-dir-big{max-width:none}
.v4-dir-use{
  /* ★補 52：第三欄同一條規則——這段的左緣原本也對到飾件豎線（欄有 padding-left:30，
     飾件就在 30），往右縮到抬頭那條線。 */
  margin:10px 0 0 28px;
  font-size:11.5px;
  line-height:1.7;
  color:var(--muted);
}

/* =====================================================
   S7 · 查看今日依據（四格，折疊，移到底部）
   -----------------------------------------------------
   2026-09-12 使用者指示：本命卦／今日主氣／五行關係／你的命宮這四格
   「老外也看不懂，但直接刪掉也不好」→ 收成 v2 版那樣的「查看今日依據」，
   移到生活八卡之後、頁腳之前，預設收合。
   四格內容原封不動，只是從主線版面搬到附錄位置（.v2-fold 是 v2 元件層的
   details/summary，v4 這裡直接沿用，不自畫一套）。
   ===================================================== */
.v4-basis{margin-top:0}
.v4-basis .v2-fold{margin-top:0;border-top:0}
.v4-basis .v2-fold>summary{
  padding:2px 0 16px;
  font-size:15px;
  letter-spacing:.18em;
  color:var(--gold2);
}
.v4-basis .v4-chart-row{margin-top:2px}
.v4-chart-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:var(--sec-gap);
  border:1px solid var(--line-soft);
  background:rgba(0,0,0,.16);
}
.v4-cell{padding:22px 24px 20px;border-left:1px solid var(--line-soft);min-height:118px}
.v4-cell:first-child{border-left:0}
.v4-cell-k{font-size:12px;letter-spacing:.16em;color:var(--dim)}
.v4-cell-v{margin-top:11px;font-size:20px;letter-spacing:.04em;color:var(--gold2)}
.v4-cell-note{margin-top:10px;font-size:12.5px;line-height:1.85;color:var(--muted)}
.v4-note-k{color:var(--dim);margin-right:7px}
.v4-note-sep{color:var(--dim);margin:0 6px}

/* =====================================================
   S8 · 中式生活指南（八卡）
   ===================================================== */
.v4-life-title{
  margin:0;
  font-size:68px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.08em;
  background:linear-gradient(180deg,#f7ecc6 0%,#e0c07a 52%,#b98f43 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.68));
}
.v4-life-head{
  display:flex;align-items:flex-end;gap:26px;
  margin-top:0;padding-bottom:14px;   /* 原本 6px：依「區塊之間緊貼」歸零 */
  border-bottom:1px solid var(--line-soft);
}
.v4-life-en{
  margin-left:auto;
  text-align:right;
  font-size:11px;line-height:1.95;letter-spacing:.28em;
  color:rgba(205,166,90,.5);
  padding-bottom:8px;
}
.v4-life-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px;
  margin-top:26px;
  align-items:start;
}
/* 八卡格線（2026-09-12 補 28）：照《每日指引版式設計-1.jpg》改成 12 欄。
   每張卡自己決定「跨幾欄」與「卡面多高」（--art-h），所以每一列的寬窄與高低
   都不一樣 —— 這正是參考圖的排法：
     列1  飲 6 欄 ／ 食 6 欄（食下移 64）
     列2  動 6 欄 ／ 聽 第 9–12 欄（高瘦，下移 30；第 7–8 欄刻意留空當呼吸）
     列3  靜 5 欄 ／ 衣 7 欄
     列4  境 通欄（12）
     列5  悟 通欄（12）
   卡面高度全部寫死在這裡（不靠圖檔比例撐），圖檔比例略有出入也只會被
   object-fit:cover 裁掉一點，不會把版面撐歪。
   ⚠ 這裡的 --art-h 要和 DailyGuidance/_tools/build_card_webp.py 的 BOX 一致。 */
.v4-life-grid>.v4-card{grid-column:span 6}
.v4-life-grid>.v4-card.wide{grid-column:1 / -1;margin-top:0}
/* 境卡（使用者指示：要和悟卡一樣寬）—— 內容排版仍走一般卡片，只有跨欄變通欄 */
.v4-life-grid>[data-k="境"]{grid-column:1 / -1}
.v4-life-grid>[data-k="食"]{margin-top:64px}
/* ★補 53（2026-09-13）使用者：「再把这个听卡向左移动，对齐上方的食卡」。
   原本是 9 / span 4（12 欄的第 9～12 欄＝右對齊），結果 動（1～6）與 聽 之間
   空掉第 7～8 欄，畫面中間出現一個約 190px 的黑洞；而上面的食卡是 7～12 欄，
   所以聽卡不但偏右、左緣也跟食卡差了兩欄（實測 1240 視窗：食左緣 569、聽左緣 759）。
   改成 7 / span 4：左緣＝食卡左緣，寬度（4 欄＝高瘦）與 --art-h 都不動，
   空出來的兩欄移到整列的最右邊 —— 這正是參考圖「每日指引版式設計-1.jpg」的擺法
   （實測參考圖：動 31～619、聽 636～979、右邊 979～1172 留給背景圖）。 */
.v4-life-grid>[data-k="聽"]{grid-column:7 / span 4;margin-top:30px}
.v4-life-grid>[data-k="靜"]{grid-column:span 5}
.v4-life-grid>[data-k="衣"]{grid-column:span 7}
.v4-life-grid>[data-k="茶"]{--art-h:504px}
.v4-life-grid>[data-k="食"]{--art-h:458px}
.v4-life-grid>[data-k="動"]{--art-h:750px}
.v4-life-grid>[data-k="聽"]{--art-h:755px}
.v4-life-grid>[data-k="靜"]{--art-h:826px}
.v4-life-grid>[data-k="衣"]{--art-h:826px}
.v4-life-grid>[data-k="境"]{--art-h:528px}
.v4-life-grid>[data-k="悟"]{--art-h:500px}

.v4-card{
  position:relative;
  display:flex;
  flex-direction:column;
  /* 2026-09-13 使用者指示：八卡的金色框「有點太弱」，加粗加深。
     原本是 var(--line-soft)（rgba(205,166,90,.12)），幾乎看不見；
     改成 1px 實金線 + 內側再一道極淡的金，讓框在暗底照片上仍然清楚。 */
  border:1px solid rgba(205,166,90,.58);
  box-shadow:inset 0 0 0 1px rgba(205,166,90,.16);
  background:rgba(0,0,0,.20);
  overflow:hidden;
}
.v4-life-grid>.v4-card.wide{grid-column:1 / -1}
/* 卡面：高度由各卡自己的 --art-h 決定（見上面 12 欄格線那一段），
   底圖用 object-fit:cover 鋪滿，文字全部壓在圖上 */
.v4-card-art{
  position:relative;
  height:var(--art-h,380px);
  overflow:hidden;
}
/* 卡面底圖（實圖）：鋪滿卡面、超出部分裁掉。
   z-index 0＝在 .v4-slot 佔位框之上、在漸層／大字／文字之下。 */
.v4-card-img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  display:block;
}
.v4-card-art .v4-slot{position:absolute;inset:0;border:0}
/* （原本這裡有一層 .v4-card-scrim：兩道 rgba(8,7,6,…) 漸層，
   豎的 80/30/34/88%、橫的 72/10/0%，用來壓暗卡面底圖、托住左上大字與左下文字。
   2026-09-13 使用者指示「两个渐变直接删除吧，不用这个方式做」→ 連元素一起拿掉。
   日後若要壓暗，改成在位圖上處理（或改圖片本身的調子），不要再加回這一層。 */
/* 巨大單字（飲／食／動／聽／靜／衣／境／悟） */
.v4-card-glyph{
  position:absolute;left:22px;top:12px;z-index:3;
  font-size:104px;
  line-height:1;
  color:#f2e4c2;
  text-shadow:0 6px 26px rgba(0,0,0,.78);
  pointer-events:none;
}
.v4-card-body{
  position:absolute;left:24px;right:26px;bottom:74px;z-index:3;
}
.v4-card-name{
  margin:0;
  font-size:26px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.03em;
  color:#f6efdd;
  text-shadow:0 3px 16px rgba(0,0,0,.85);
}
.v4-card-attr{
  margin-top:8px;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--gold);
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.v4-card-rule{width:44px;height:1px;background:rgba(205,166,90,.6);margin:13px 0}
.v4-card-lead{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:rgba(240,234,220,.94);
  max-width:430px;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
/* ------------------------------------------------------------------
   名稱（太極·雲手那行）與說明（今天這一動…那行）各自的黑色襯底
   ★統一叫法：＝「軟黑底」（soft-ink），與封面那幾行、八卡名稱／說明同一套。
   2026-09-13 使用者指示（補 32）：
     「在『太極·雲手』和『今天這一動想體驗太極又怕學全套…』分別加一條黑背景，
      兩邊快速漸變到透明，中間帶一點透明度不要全黑。這個黑色襯底要跟隨這兩行字的
      位置和長度。因為有可能移動這兩行字的位置。」
   做法：
     1) 襯底做在元素自己的 ::before —— 元素搬到哪、字有多長，襯底就跟到哪，
        不必在 JS 裡量文字寬度（換語言、改字級、改斷行都不會走鐘）。
     2) 這兩個元素加 width:fit-content，讓盒寬黏著文字（原本 <p> 是區塊，
        盒寬會撐到 max-width:430px，短句也會拖出一條長長的底色）。
     3) z-index：這兩個元素自己開一層（position:relative;z-index:0），
        ::before 用 -1 落在「底圖之上、這一層的文字之下」；父層 .v4-card-body
        本來就是 z-index:3，所以整組仍在卡面底圖之上。
     4) 兩端淡出用固定 30px（不是百分比），長句短句的收尾速度才會一致；
        左右各外擴 18px，讓全黑段剛好從字緣外一點點開始。
   ★這不是補 31 被拿掉的 .v4-card-scrim（那層壓暗整張底圖）；
     這裡只在文字後面鋪一條軟黑帶，底圖本身完全不動。
   ------------------------------------------------------------------ */
.v4-card-name,
.v4-card-lead{
  position:relative;z-index:0;
  width:fit-content;max-width:100%;
}
.v4-card-name::before,
.v4-card-lead::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-18px;right:-18px;top:-11px;bottom:-11px;
  background:linear-gradient(90deg,
    rgba(6,5,4,0) 0,
    rgba(6,5,4,.50) 30px,
    rgba(6,5,4,.50) calc(100% - 30px),
    rgba(6,5,4,0) 100%);
  /* 上下也羽化（補 33）：橫向的淡出已經做在 background 的 alpha 裡，
     這裡只需要一條垂直的遮罩把上下邊緣吃掉，硬邊就不見了。 */
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0, #000 9px, #000 calc(100% - 9px), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0, #000 9px, #000 calc(100% - 9px), rgba(0,0,0,0) 100%);
}
/* 空的說明（例如衣卡沒有 base 句）不要留一條空底色出來 */
.v4-card-lead:empty::before{display:none}
/* ⊕：點開該卡的詳情 */
.v4-card-plus{
  position:absolute;left:24px;bottom:22px;z-index:4;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(205,166,90,.55);
  background:rgba(0,0,0,.35);
  color:var(--gold2);
  font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.v4-card-plus:hover{background:rgba(205,166,90,.16)}
.v4-card-plus[aria-expanded="true"]{background:rgba(205,166,90,.2)}
.v4-card-body.has-plus{padding-left:50px}
/* 2026-09-12 使用者指示：卡面右緣那條直式小字、以及右下角那顆紅色小方章
   都拿掉 —— 它們是參考圖（AI 出圖）上的裝飾，網頁端不需要再疊一層。
   註：那條直式小字其實是庫裡的欄位「象」，不是純裝飾，所以沒有丟掉，
       改放到該卡的詳情（⊕）裡。（紅框同理：.v4-card-seal 移除。） */
/* 卡下薄列：換一味／更多 */
.v4-card-foot{
  display:flex;align-items:center;gap:16px;
  padding:11px 20px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px;
  letter-spacing:.04em;
}
.v4-card-foot .v4-card-swaplink{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--gold);font:inherit;font-size:12.5px;
  text-align:left;
}
.v4-card-foot .v4-card-swaplink b{font-weight:400;color:var(--gold2)}
.v4-card-foot .v4-card-num{margin-left:auto;color:var(--dim);letter-spacing:.2em;font-size:11px}
/* 詳情：預設收起，⊕ 或 summary 都能開 */
/* 詳情：預設收起，只有左下那顆 ⊕ 會開（不用 details，省掉藏起來的 summary） */
.v4-card-more{border-top:1px solid var(--line-soft)}
.v4-card-more[hidden]{display:none}
.v4-card-more-body{padding:14px 20px 18px;font-size:14px;line-height:1.9}
.v4-card-more-body>.lg-chips:first-child{margin-top:0}
.v4-card-more .lg-chips{margin-top:2px}
.v4-card-more .lg-p{margin:9px 0 0;font-size:14px;line-height:1.9;color:var(--muted)}
.v4-card-more .lg-k{color:var(--gold);margin-right:8px}
.v4-card-more .lg-why{margin:9px 0 0;font-size:13.5px;line-height:1.9;color:var(--dim)}
.v4-card-more .lg-eff{margin:9px 0 0;font-size:14px;line-height:1.9;color:var(--muted)}
.v4-card-more .lg-hint{margin:9px 0 0;font-size:12.5px;color:var(--dim)}
.v4-card-more .lg-wear-rec{margin:9px 0 0;font-size:14px;line-height:1.9;color:var(--muted)}
.v4-card-more .lg-wear-rec b{font-weight:400;color:var(--gold2)}
.v4-card-more .lg-motto{margin:9px 0 0;font-size:14px;line-height:1.9;color:var(--gold2)}
.v4-card-more .lg-dim{color:var(--dim)}
/* 「象」從卡面右緣那條直式小字搬進詳情之後，讀起來像小註，所以壓暗一階 */
.v4-card-more .lg-xiang{color:var(--dim)}

/* 悟卡（與境卡）：整幅寬，句子放大。
   卡面高度不再寫死比例，改由 .v4-life-grid>[data-k="悟"] 的 --art-h 決定
   （2026-09-12 補 28：兩張通欄卡的高度不一樣，境 528／悟 385）。
   ★補 55（2026-09-13）使用者指示：「这个悟字也做成和其他卡一样的字号」。
   原本這裡有一條 .v4-card.wide .v4-card-glyph{font-size:34px;left:26px;top:22px;
   letter-spacing:.2em}，把通欄卡（只有悟卡用 .wide）的左上大字壓成 34px，
   其餘七卡是 .v4-card-glyph 的 104px／left:22／top:12，所以悟字明顯比別人小、
   左緣與上緣也和正上方的境卡差 4px／10px。那條整條拿掉，悟卡直接沿用
   104px 的標準尺寸與 22/12 的位置 —— 八卡的巨大單字從此同一個規格。
   （境卡本來就沒帶 .wide，一直都是 104px，所以這次只影響悟卡。） */
/* bottom 96：留給左下那顆 ⊕（bottom:44＋34 高）18px 淨空，
   其餘往上讓給句子 —— 悟卡是 1136×500 的橫帶，但句子在部分語系會到 3 行。 */
.v4-card.wide .v4-card-body{bottom:96px;left:44px;right:44px}
.v4-card-src{
  margin:0 0 8px;
  font-size:12.5px;letter-spacing:.14em;
  color:var(--gold);
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.v4-card.wide .v4-card-quote{
  margin:0;
  /* 52px：參考圖的「吃茶去」只有三個字、可以放到 90px；這裡是整句名言，
     英／德／俄常要 3 行，60px 會頂到卡面上緣的「悟」字，故收到 52px。 */
  font-size:52px;
  font-weight:400;
  /* ★補 43：寬度 770px（使用者指定）。
     這裡只是「沒有校正值時」的自然寬來源——fitxApply() 的折行分支會用
     inline width／max-width 把盒寬鎖成區域寬，所以 770 是預設值、
     面板校正過的區域才是權威。原本沒有 max-width，盒寬被 .v4-card-body 撐到
     1047px，俄／德文的第二行常常只剩一兩個字、甚至湊不滿兩行；
     收到 770 之後 11 語才都是「兩行、長度接近」的同一種節奏。 */
  width:770px;max-width:770px;
  line-height:1.25;
  letter-spacing:.06em;
  color:#f7eedb;
  text-shadow:0 8px 30px rgba(0,0,0,.8);
}
.v4-card.wide .v4-card-quote-src{margin-top:10px;font-size:14px;letter-spacing:.08em;color:var(--gold)}
.v4-card.wide .v4-card-lead{margin-top:16px;font-size:19px;max-width:640px}
.v4-card.wide .v4-card-plus{left:44px;bottom:44px}
.v4-card.wide .v4-card-body.with-plus{padding-left:0}

/* 補 41／42（2026-09-13）——八卡「折行」那兩欄的行距
   --------------------------------------------------------------------------
   補 41：使用者「折行的行距改为1.2倍」
          → 卡語（.v4-card-lead，含悟卡 19px 那條）1.85→1.2、
            悟·原文（.v4-card.wide .v4-card-quote）1.25→1.2。
   補 42：使用者「你确定这里的行距是1.2？…还是很疏」
          截圖實測：基線間距 63／62px＝52×1.2，1.2 確實生效了。
          但 52px 的大字配 1.2 本來就鬆（兩行墨跡之間還空 ~29px），
          而且 1.25→1.2 只差 2.6px，肉眼看不出來。
          → 大字再收到 1.1（52→57.2px／行）；小字的卡語維持 1.2
            （15px→18px 已經很緊，中文楷體再收會擠到字腔）。
   · 兩欄都可以在「區域微調」面板逐列覆寫行距（0.8～2.2 倍，存 dgV4FitxBox）。
   · 只在 v4 這一支覆寫（v2／v3 不動）；卡名 1.3、出處／引註等非折行的行也不動。
   · 高度會變：.v4-card-body 是 bottom 定位（bottom:74px／wide 96px），
     所以是整疊文字往下收，卡面其他元素不會被推走；
     區域除錯框的高度是量出來的，會跟著變。 */
.v4-card-lead{line-height:1.2}
/* ★補 43（2026-09-13）使用者：「悟的原文部分，行距设为1」
   52px 的大字再從 1.1 收到 1（57.2→52px／行）：兩行墨跡之間幾乎不留白，
   整個句子才像「一句話」而不是兩行散字。卡語（小字）維持 1.2。
   配合「最多 2 行」的自動收縮（fitxFitLines）：先收字距（地板 −0.02em），
   還塞不下才降字級（一次約 3%，地板＝基準的 55%／不小於 14px）。 */
.v4-card.wide .v4-card-quote{line-height:1}

/* =====================================================
   S9 · 頁腳
   ===================================================== */
.v4-foot{
  /* 寬度跟刊頭底圖、主視覺對齊（同一個 1200 版心） */
  margin:78px 0 0;
  padding:22px 0 46px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:26px;
  font-size:11.5px;
  letter-spacing:.24em;
  color:var(--dim);
}
.v4-foot span{white-space:nowrap}
.v4-foot .v4-foot-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-soft),transparent)}
.v4-foot .r{margin-left:auto}

/* =====================================================
   中文標題字族 · 楷體（沿用 v2／v3 的作法：只接管標題層級）
   ===================================================== */
html:is([lang="zh-Hant"],[lang="zh-Hans"]) :is(
  .v4-hero-title,
  .v4-hero-date,
  .v4-sec-title h2,
  .v4-hero-word,
  .v4-dom-name,
  .v4-dir-big,
  .v4-life-title,
  .v4-theme-inline,
  .v4-cell-v,
  .v4-card-glyph,
  .v4-card-name,
  .v4-card.wide .v4-card-quote,
  .fc-title
){
  font-family:"KaiTi","STKaiti","Kaiti SC","楷体","ReportKaiTi","FixedKaiTi",serif;
}

/* =====================================================
   阿拉伯語（RTL）：拉丁段落與數字走 LTR，中文那幾行永遠 LTR
   ===================================================== */
html[dir="rtl"],
html[dir="rtl"] body{direction:ltr}
html[dir="rtl"] .v4-flow-desc,
html[dir="rtl"] .v4-theme-note,
html[dir="rtl"] .v4-dom-note,
html[dir="rtl"] .v4-dom-focus,
html[dir="rtl"] .v4-list li,
html[dir="rtl"] .v4-dir-use,
html[dir="rtl"] .v4-cell-note,
html[dir="rtl"] .v4-card-lead,
html[dir="rtl"] .v4-card-more .v2-fold-body,
html[dir="rtl"] .nx-summary,
html[dir="rtl"] .nx-read{
  direction:rtl;
  text-align:right;
}
html[dir="rtl"] .v4-hero-date,
html[dir="rtl"] .v4-hero-line{
  unicode-bidi:plaintext;
}
/* 2026-09-13 使用者指示：「再把这 2 行字居中」（附圖是德語版趨勢圖）。
   阿拉伯語的趨勢圖讀數本來跟其他段落一起靠右，這裡跟著一起居中；
   direction:rtl 保留不動（那只影響雙向文字的排列順序）。
   其實不寫這條也已經居中——`.v4-trendbox .nx-read/.nx-summary`（0,2,0）
   的優先度高於上面的 `html[dir="rtl"] .nx-read`（0,1,2）；寫出來是防止
   以後有人只改上面那兩條選擇器時，阿拉伯語默默又跑回靠右。 */
html[dir="rtl"] .v4-trendbox .nx-read,
html[dir="rtl"] .v4-trendbox .nx-summary{
  text-align:center;
}
/* 宜／慎的清單在阿拉伯語是「文字靠右、圓點靠左」，兩邊拉開會像斷開的兩段；
   所以圓點跟著換到右緣，緊貼文字。 */
html[dir="rtl"] .v4-list li{padding-left:0;padding-right:22px}
html[dir="rtl"] .v4-list li::before{left:auto;right:2px}

/* =====================================================
   窄畫面：只做到「不壞掉」，正式目標是 1200 版心
   ===================================================== */
@media(max-width:1215px){
  :root{--gut:26px}
  .wrap{width:100%}
  /* 「每日指引」與流日期行現在長在主視覺裡（刊頭已移除），窄畫面照樣用 vw
     級數收斂。拉丁／斯拉夫語系的刊名是一個長詞，另外給更小的一級。 */
  .v4-hero-title{font-size:min(64px,11vw)}
  html:not(:is([lang="zh-Hant"],[lang="zh"],[lang="ja"],[lang="ko"])) .v4-hero-title{
    font-size:min(46px,5.6vw);letter-spacing:.08em;text-indent:0;   /* ★補 51 */
  }
  .v4-hero-date{font-size:12.5px;letter-spacing:.04em;margin-top:10px;line-height:1.7}
  /* 主視覺底圖是 1200×550 的實圖：窄畫面一樣改成裁切（cover）＋
     隨視窗縮放的高度，免得人物被壓扁。 */
  .v4-hero{aspect-ratio:auto;height:clamp(230px,45vw,550px)}
  .v4-hero-art{background-size:cover}
  /* 補 45：窄畫面檔位字跟著視窗縮（150px 是給 1200 版心的），
     與上方兩行的間隔一起收，免得整組溢出主視覺。 */
  .v4-hero-word{font-size:min(110px,12.5vw);margin-top:min(72px,8vw)}
  .v4-flow-row{grid-template-columns:1fr;gap:26px}
  .v4-flow-stage{width:min(880px,100%)}
  /* 粒子帶的畫布是固定點陣（880×300，寫在 width/height 標籤），
     窄畫面容器比它窄時讓它跟著容器等比縮小，不要橫向溢出。
     圓心、方位、粒子比例都在畫布內部，等比縮不影響構圖；
     .fc-qi-core 的百分比錨點是相對 .fc-stage，會跟著一起縮。
     （這條是 2026-09-14 加寬之後補的；以前 700 版在更窄的視窗也會溢出。） */
  #v4-flow .fc-stage>canvas{max-width:100%;height:auto}
  /* 今日氣流底圖是 1200×383 的實圖：窄畫面塌成單欄後，區塊會被內容撐得比圖高，
     所以取消固定高度、改成和刊頭／主視覺一樣的裁切（cover）。
     這張圖幾乎全幅不透明（alpha 227–255、沒有軟邊），用「寬度撐滿、高度照比例」
      會在圖的下緣留下一道硬切口，所以窄畫面一律用 cover 鋪滿、不讓圖被拉長變形。 */
  #v4-flow{min-height:0;background-size:cover}
  /* S4 底圖（DailyGuidanceBG_Theme.webp，1200×374）：四領域四張卡在窄畫面塌成兩欄、
     整區被內容撐得比圖高，所以一樣取消 min-height、改 cover 裁切，不把圖壓扁。
     裁掉的是左右兩端（左邊那組壓印小字、右邊羅盤的外緣），中間的香煙與織紋留給正文。 */
  #v4-theme{min-height:0;background-size:cover}
  /* 氣運趨勢底圖是 1200×450 的實圖：窄畫面圖表 SVG 會跟著變矮，區塊比圖矮，
     所以一樣取消固定高度、改成 cover 裁切（不把圖壓扁）。 */
  #v4-trend{min-height:0;background-size:cover}
  .v4-dom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 四領域抬頭：俄語的「72 Благоприятно」這種長字，兩欄排版會頂出卡片
     （.v4-dom-num 原本 white-space:nowrap）。窄畫面改成可換行。 */
  .v4-dom-head{flex-wrap:wrap}
  .v4-dom-num{white-space:normal;overflow-wrap:anywhere}
  /* 三欄塌成單欄：方位那一欄用上緣細線分隔。
     ★補 92：桌機版那兩條縱向分隔線已依使用者指示整個刪除，這裡不必再「收掉」；
     方位這條上緣線仍在（單欄疊起來時它才是欄界的唯一提示）。 */
  .v4-pair{grid-template-columns:1fr;gap:34px}
  /* S5 底圖（DailyGuidanceBG_Best_Care.webp，1200×317）比照上面前兩張：窄畫面
     三欄塌成單欄、整區被內容撐到比圖高很多，所以取消 min-height、改成 cover 裁切，
     不把 317 的圖縱向拉長。裁掉的是左右兩端的香爐與金枝，中間留給正文的是
     那塊近乎全黑的織紋（實測整張圖最亮處只有 R=105，壓字不會影響閱讀）。 */
  .v4-pair{min-height:0;background-size:cover}
  .v4-pair-col.dir{
    border-left:0;padding-left:0;
    padding-top:26px;
    background-image:linear-gradient(90deg,transparent 0,rgba(205,166,90,.5) 8%,rgba(205,166,90,.5) 92%,transparent 100%);
    background-repeat:no-repeat;background-size:100% 1px;background-position:left top;
  }
  /* 單欄時三欄疊起來、寬度都很寬，抬頭不必再分大小；
     級數仍走 --s5-title（fitPairTitles() 量的），所以這裡不另外寫死。 */
  .v4-chart-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-cell{border-left:0;border-top:1px solid var(--line-soft)}
  /* 八卡塌成單欄：12 欄的跨欄與錯落全部取消；卡面高度照 0.62 等比縮
     （單欄寬度大約是原本兩欄寬度的 0.62，比例才不會跑掉）。
     這條要壓過上面的 [data-k="聽"]{grid-column:9 / span 4}，
     所以選擇器寫成 .v4-card[data-k]（同權重、但在檔案後面）。 */
  .v4-life-grid{grid-template-columns:1fr}
  .v4-life-grid>.v4-card[data-k]{grid-column:1 / -1;margin-top:0}
  .v4-card-art{height:calc(var(--art-h,380px) * .62)}
  .v4-life-title{font-size:min(46px,9vw)}
  /* 窄畫面的欄目抬頭：非中文語系的標題常是長複合詞（例如德語），
     撐不進版心就會把旁邊那行裝飾小字推出畫面、長出橫向捲軸。
     這裡讓抬頭可換行、標題可斷字，並收掉純裝飾的拉丁小字。 */
  .v4-life-head{flex-wrap:wrap;gap:10px}
  .v4-life-title{overflow-wrap:anywhere}
  .v4-life-en{display:none}
  .v4-card.wide .v4-card-quote{font-size:min(38px,7vw)}
  .v4-foot{flex-wrap:wrap;gap:14px}
}

/* =====================================================
   除錯輔助：框出「區域」＋區域微調面板（2026-09-13 使用者指示）
   -----------------------------------------------------
   html.fitx-on／html.fitx-panel-on 由右下角那兩顆除錯鈕切換
   （app.js 的 v4ToggleFitx／v4ToggleFitxPanel）。
   · 每個量過的標題都畫一個「區域」＝這行字被允許書寫的左右界
     （左右兩條實線，框線就是區域本身；文字已經 scaleX 塞在裡面）。
     ★框線不用 outline：元素自己帶著 scaleX，outline 會跟著被壓扁（176px 的框
     在螢幕上只剩 88px，看起來比文字還窄）。框線另外畫一層，乘 --fitx-inv＝1/sx
     把那層抵掉，螢幕上量到的才是真正的區域寬，11 語／10 個標題才能互相比。
   · 藍＝沒動手；橘＝有壓縮／降字級／被平移過。
   · 框左上一個小標籤：「區域 Npx」＋「校正」（有覆寫時）＋降字級／壓縮的補充。
     標籤同樣反向縮放，免得跟著標題一起被壓扁。
   · 面板（.v4-fitx-panel）＝起點／終點可改，改完立刻重排。
   ★ 這一整段是開發輔助，上線前連 app.js 的除錯鈕一起刪掉。
   ===================================================== */
.v4-fitx-btns{
  position:fixed;right:14px;bottom:14px;z-index:92;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.v4-fitx-btn{
  font-family:inherit;font-size:12px;letter-spacing:.08em;
  padding:7px 13px;border-radius:2px;cursor:pointer;
  color:var(--gold2);background:rgba(12,10,8,.82);
  border:1px dashed rgba(205,166,90,.55);
}
/* 除錯時量出來的數字必須跟正式環境一樣，所以不許出現橫向捲軸
   （橫向捲軸一出現，版面寬就少 15px）。框本身不會超出區域，但標籤是絕對定位、
   語系一長就往右伸，這裡先擋一層。overflow-x:clip 只裁掉、不產生捲動容器；
   先寫 hidden 當舊瀏覽器的後備。豎向照常捲。 */
html.fitx-on{overflow-x:hidden;overflow-x:clip}
.v4-fitx-btn:hover{border-color:rgba(205,166,90,.9)}
.v4-fitx-btn.active{background:rgba(205,166,90,.16);color:#ffe6ad}
/* 開著的時候，按鈕上方掛一行圖例（字串由 app.js 依語系塞進去）。 */
.v4-fitx-legend{
  display:none;max-width:620px;text-align:right;
  font-size:11px;line-height:1.5;letter-spacing:.06em;
  color:rgba(233,224,203,.82);background:rgba(12,10,8,.84);
  border:1px solid rgba(205,166,90,.35);border-radius:2px;padding:4px 8px;
  pointer-events:none;
}
html.fitx-on .v4-fitx-legend{display:block}
html.fitx-on [data-fitx]{position:relative}
/* 區域框：寬度＝區域寬，再乘 --fitx-inv 抵掉標題自己的 scaleX（框線粗細也順便
   回到原本的 px）。左右兩條畫實線＝區域的左右界。RTL 另外在下面改貼右邊。 */
html.fitx-on [data-fitx]::before{
  content:"";
  position:absolute;left:0;top:0;height:100%;z-index:4;
  width:var(--fitx-boxw,100%);
  transform:scaleX(var(--fitx-inv,1));
  transform-origin:left center;
  border:1px dashed rgba(120,196,255,.5);
  border-left:2px solid rgba(120,196,255,.95);
  border-right:2px solid rgba(120,196,255,.95);
  pointer-events:none;
}
html.fitx-on [data-fitx].v4-fitx-hit::before{
  border-style:solid;
  border-color:#ff9c3a;
}
html.fitx-on [data-fitx]::after{
  content:"區域 " attr(data-fitx-w) "px" attr(data-fitx-note);
  position:absolute;left:0;bottom:100%;z-index:6;
  white-space:nowrap;padding:1px 5px;
  font-family:Consolas,Menlo,monospace;font-size:11px;line-height:1.35;letter-spacing:.02em;
  color:#cfe6ff;
  -webkit-text-fill-color:#cfe6ff;          /* 標題有 background-clip:text，這裡要還原 */
  background:rgba(8,14,20,.92);
  background-clip:border-box;-webkit-background-clip:border-box;
  border:1px solid rgba(120,196,255,.6);
  transform:scaleX(var(--fitx-inv,1));
  transform-origin:left bottom;
}
html.fitx-on [data-fitx].v4-fitx-hit::after{
  color:#ffd9a0;
  -webkit-text-fill-color:#ffd9a0;
  border-color:rgba(255,156,58,.7);
  background:rgba(20,12,4,.92);
}
/* 面板滑到哪一列，那一格的區域框加粗亮起來（面板／框的對應關係）。 */
html.fitx-on [data-fitx].v4-fitx-flash::before{
  border-color:#7ef0c0;
  border-width:2px;
  border-style:solid;
  box-shadow:0 0 0 1px rgba(126,240,192,.55);
}
/* 真的遇到 RTL 版面時（transform-origin 靠右）：框線與標籤改貼右邊。
   ★不能用 html[dir="rtl"] 判斷：v4 的骨架一律 LTR（html[dir=rtl] 只把文字
   方向改掉、版面沒有鏡射），所以由 app.js 依實際判斷結果掛 data-fitx-rtl。 */
html.fitx-on [data-fitx][data-fitx-rtl]::before{
  left:auto;right:0;transform-origin:right center;
}
html.fitx-on [data-fitx][data-fitx-rtl]::after{
  left:auto;right:0;transform-origin:right bottom;
}
/* --- 區域微調面板 ------------------------------------------------------- */
.v4-fitx-panel{
  /* 寬度（補 43）：八卡那一列多了「行數」欄，346px 會爆行；放寬到 400px。 */
  display:none;position:fixed;right:14px;top:14px;bottom:64px;width:400px;z-index:93;
  flex-direction:column;gap:8px;padding:10px 12px;
  font-family:system-ui,"Segoe UI",sans-serif;font-size:12px;line-height:1.45;
  letter-spacing:.02em;color:#e9e0cb;
  background:rgba(10,9,7,.95);border:1px solid rgba(205,166,90,.45);border-radius:3px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
html.fitx-panel-on .v4-fitx-panel{display:flex}
.v4-fitx-phead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;letter-spacing:.1em;color:#ffe6ad}
.v4-fitx-x{cursor:pointer;background:none;border:1px solid rgba(205,166,90,.4);color:var(--gold2);
  border-radius:2px;font-size:11px;line-height:1;padding:3px 6px}
.v4-fitx-pnote{font-size:11px;color:rgba(233,224,203,.7)}
.v4-fitx-plist{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:2px}
.v4-fitx-row{border:1px solid rgba(205,166,90,.25);border-radius:2px;padding:5px 7px}
.v4-fitx-row:hover{border-color:rgba(126,240,192,.6)}
.v4-fitx-rhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.v4-fitx-name{font-size:12px;color:#ffe6ad}
.v4-fitx-num{font-family:Consolas,Menlo,monospace;font-size:10.5px;color:rgba(233,224,203,.7)}
.v4-fitx-rbody{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:4px}
.v4-fitx-lab{display:flex;align-items:center;gap:4px;font-size:11px;color:rgba(233,224,203,.8)}
.v4-fitx-in{width:46px;padding:2px 4px;font-family:Consolas,Menlo,monospace;font-size:12px;
  color:#ffe6ad;background:rgba(0,0,0,.5);border:1px solid rgba(205,166,90,.4);border-radius:2px}
.v4-fitx-auto{margin-left:auto;cursor:pointer;font-size:11px;padding:2px 7px;border-radius:2px;
  color:var(--gold2);background:rgba(12,10,8,.82);border:1px dashed rgba(205,166,90,.5)}
.v4-fitx-auto:hover{border-color:rgba(205,166,90,.95)}
.v4-fitx-pfoot{display:flex;gap:8px}
.v4-fitx-btn2{flex:1;cursor:pointer;font-size:12px;letter-spacing:.06em;padding:6px 8px;border-radius:2px;
  color:var(--gold2);background:rgba(12,10,8,.82);border:1px dashed rgba(205,166,90,.55)}
.v4-fitx-btn2:hover{border-color:rgba(205,166,90,.9)}
/* --- 八卡文字行的區域框（補 40） ---------------------------------------
   為什麼不跟標題共用 [data-fitx] 的 ::before／::after：
   .v4-card-name／.v4-card-lead 的 ::before 已經被「黑色軟底」（補 32）用掉了，
   借用會把軟底整個蓋掉。所以八卡改成畫一個真的覆蓋元素（.v4-fitx-cbox），
   掛在 .v4-card-body（position:absolute）底下——它是獨立的一層，
   不會被文字自己的 scaleX 影響，螢幕上量到的就是實際區域寬。
   藍＝沒動手；橘＝有校正／壓縮／降字級／被平移；滑到面板那一列會變綠。 */
.v4-fitx-cbox{display:none}
html.fitx-on .v4-fitx-cbox{
  display:block;position:absolute;z-index:5;pointer-events:none;
  border:1px dashed rgba(120,196,255,.5);
  border-left:2px solid rgba(120,196,255,.95);
  border-right:2px solid rgba(120,196,255,.95);
}
html.fitx-on .v4-fitx-cbox.v4-fitx-hit{border-style:solid;border-color:#ff9c3a}
.v4-fitx-cbox>i{
  position:absolute;left:0;bottom:100%;
  white-space:nowrap;padding:1px 5px;
  font-family:Consolas,Menlo,monospace;font-style:normal;
  font-size:11px;line-height:1.35;letter-spacing:.02em;color:#cfe6ff;
  background:rgba(8,14,20,.92);border:1px solid rgba(120,196,255,.6);
}
html.fitx-on .v4-fitx-cbox.v4-fitx-hit>i{color:#ffd9a0;border-color:rgba(255,156,58,.7);background:rgba(20,12,4,.92)}
html.fitx-on .v4-fitx-cbox.v4-fitx-flash{
  border-color:#7ef0c0;border-width:2px;border-style:solid;
  box-shadow:0 0 0 1px rgba(126,240,192,.55);
}
/* 面板裡「中式生活八卡」那一段的段標 */
.v4-fitx-group{
  margin-top:4px;padding:3px 0 1px;
  font-size:11px;letter-spacing:.14em;color:#cfe6ff;
  border-top:1px dashed rgba(120,196,255,.45);
}
/* 一列右邊那組按鈕（八卡多了「折行／單行」一顆）：整組靠右，裡面不要各自推開 */
.v4-fitx-btns2{margin-left:auto;display:flex;align-items:center;gap:6px}
.v4-fitx-btns2 .v4-fitx-auto{margin-left:0}
/* --- 命宮參數面板（除錯用；上線前連 app.js 的那顆按鈕一起刪） -------------
   2026-09-14 使用者：「把命盘的调试面板弄回来，我想微调一下参数」
   照 .v4-fitx-panel 那一套視覺語言，但站左下角（右上角已經被「區域微調」
   的 400px 面板佔住），寬度只夠放一個數字欄＋一顆「預設」。
   ★這一整段是開發輔助，上線前刪掉。 */
.v4-flp-panel{
  display:none;position:fixed;left:14px;bottom:64px;width:300px;max-height:72vh;z-index:93;
  flex-direction:column;gap:8px;padding:10px 12px;
  font-family:system-ui,"Segoe UI",sans-serif;font-size:12px;line-height:1.45;
  letter-spacing:.02em;color:#e9e0cb;
  background:rgba(10,9,7,.95);border:1px solid rgba(205,166,90,.45);border-radius:3px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
html.flow-panel-on .v4-flp-panel{display:flex}
.v4-flp-phead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;letter-spacing:.1em;color:#ffe6ad}
.v4-flp-pnote{font-size:11px;color:rgba(233,224,203,.7)}
.v4-flp-plist{flex:1;overflow:auto;display:flex;flex-direction:column;gap:5px;padding-right:2px}
.v4-flp-row{border:1px solid rgba(205,166,90,.25);border-radius:2px;padding:4px 7px}
.v4-flp-row:hover{border-color:rgba(205,166,90,.6)}
.v4-flp-rhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.v4-flp-name{font-size:12px;color:#ffe6ad}
.v4-flp-num{font-family:Consolas,Menlo,monospace;font-size:10.5px;color:rgba(233,224,203,.72)}
.v4-flp-rbody{display:flex;align-items:center;gap:6px;margin-top:4px}
.v4-flp-rbody .v4-fitx-in{width:80px}
.v4-flp-sel{font-family:inherit;font-size:11.5px;padding:2px 4px;border-radius:2px;
  color:#ffe6ad;background:rgba(0,0,0,.5);border:1px solid rgba(205,166,90,.4)}
.v4-flp-toggle{cursor:pointer;font-size:11px;padding:2px 10px;border-radius:2px;
  color:var(--gold2);background:rgba(12,10,8,.82);border:1px dashed rgba(205,166,90,.5)}
.v4-flp-toggle.on{background:rgba(205,166,90,.22);color:#ffe6ad;border-style:solid}
.v4-flp-rbody .v4-fitx-auto{margin-left:auto}
.v4-flp-pfoot{display:flex;flex-direction:column;gap:6px}
.v4-flp-frow{display:flex;gap:6px}
.v4-flp-frow .v4-fitx-btn2{flex:1}
/* 檔位籤（補 80）：亮＝現在正在調的那一檔；＊＝這一檔已經有覆寫。
   籤本身不可點 —— 換檔位是去上面的氣運趨勢圖點那一天。 */
.v4-flp-modes{display:flex;gap:4px;flex-wrap:wrap}
.v4-flp-chip{font-size:11px;line-height:1;padding:3px 6px;border-radius:2px;letter-spacing:.06em;
  color:rgba(233,224,203,.55);background:rgba(0,0,0,.35);border:1px solid rgba(205,166,90,.22)}
.v4-flp-chip.has{color:#ffd9a0;border-color:rgba(255,156,58,.6)}
.v4-flp-chip.on{color:#ffe6ad;background:rgba(205,166,90,.22);border-color:rgba(205,166,90,.85)}
#v4FlowRebuild.is-dirty{background:rgba(255,156,58,.22);border-color:rgba(255,156,58,.85);color:#ffd9a0}

/* =====================================================
   【補 382】示例命宮的浮水印（2026-09-22 使用者指示）
   -----------------------------------------------------
   使用者：「需要提示一下，要先有相關數據，所以要先引導去命宮儀式。另外還需要在
   dailyguidance 的 demo 頁，正中懸浮一個半透明的 DEMO 字樣，加上必要的數據，
   例如 x 年 x 月 x 日。要不要 x 時？這樣使用者和開發者才知道到底這個報告需要什麼資料。」
   所以這顆同時做三件事：①浮水印 ②列出這份報告要哪些資料、現在有沒有 ③引導去跑儀式。
   只有示例命宮（sourceLabel !== "real"）才顯示；真實命宮整顆 display:none。
   容器 pointer-events:none（不擋版面操作），只有 CTA 那顆按鈕 pointer-events:auto。
   ?nomark=1 可以臨時關掉（跟本站 ?nogift=1 同一個套路）。
   層級 3000：在內容之上、lang-dock（8000）之下。
   ===================================================== */
/* 【補 494】2026-09-25 使用者指示：這一顆原本是 420px 的面板，擋住太多畫面。
   縮成貼著內容長的小窗（實測約 186×90，最小 180px），只留「大的 DEMO 字 ＋
   一行生日」。字沒有變小：DEMO 仍是 46px（只把字距從 .34em 收到 .10em 才塞得下），
   生日那行 13px（比原本的明細列 12.5px 還大一點）。
   容器 pointer-events:none（不擋版面操作），現在整顆沒有可點元素。 */
.dg-demomark{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3000;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:auto;min-width:180px;padding:13px 20px 12px;text-align:center;
  background:rgba(8,7,6,.55);
  border:1px solid rgba(205,166,90,.30);
  box-shadow:0 14px 44px rgba(0,0,0,.5);
  color:var(--ivory);
}
.dg-demomark .dgm-word{
  font-size:46px;line-height:1;letter-spacing:.10em;text-indent:.10em;
  color:rgba(233,201,121,.32);margin:0;
}
.dg-demomark .dgm-line{
  margin:7px 0 0;font-size:13px;line-height:1.2;letter-spacing:.04em;
  color:rgba(233,224,203,.76);font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (max-width:760px){
  .dg-demomark{min-width:160px;padding:11px 16px 10px}
  .dg-demomark .dgm-word{font-size:34px}
  .dg-demomark .dgm-line{font-size:12.5px}
}