/* 問天 · 站點共享樣式（落地頁與法務頁） */
:root{
  --paper:#efe7d6; --paper2:#e5dcc7; --ink:#1c1a17; --ink2:#4a4238;
  --cinnabar:#9e2b25; --zhu:#9e2b25; --gold:#a8873f; --dim:#7d7364; --line:rgba(28,26,23,.16);
  --serif-zh:"Songti TC","Noto Serif TC","PingFang TC","LiSong Pro","STSong",serif;
  --serif-en:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  /* 紙纖維：細密不規則噪點，比純色底更像宣紙 */
  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); line-height:1.9;
  font-family:var(--serif-zh);
  background:
    radial-gradient(900px 500px at 50% -12%, rgba(168,135,63,.10), transparent 60%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(168,135,63,.03) 0deg 6deg, transparent 6deg 12deg),
    radial-gradient(1200px 700px at 50% 0%, #2c2820, #131110 72%) #131110;
  background-attachment:fixed;
  padding:0 0 60px;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  padding-bottom:calc(60px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  max-width:100vw; overflow-x:hidden;
}
.wrap{max-width:860px;margin:0 auto;padding:0 16px;width:100%}
header.site{padding:28px 0 20px;text-align:center}
header.site .brand{display:inline-block;font-size:34px;letter-spacing:.5em;text-indent:.5em;
  color:#e8d9b0;text-decoration:none}
header.site .brand:hover{color:#f2e7cd}
header.site .brandEn{font-family:var(--serif-en);font-size:13px;letter-spacing:.34em;color:#9a927f;margin-top:6px;text-transform:uppercase}
/* 廣告語：第一眼就該看到。金黃色、比其他字大兩號 */
header.site .slogan{margin-top:14px;font-size:19px;letter-spacing:.44em;text-indent:.44em;
  color:#d8b45a;text-shadow:0 0 14px rgba(216,180,90,.30),0 1px 0 rgba(0,0,0,.5)}
header.site .slogan::before,header.site .slogan::after{content:"·";color:rgba(216,180,90,.5);margin:0 10px}
/* 心靈雞湯：每次刷新換一句 */
.q-line.soup{font-style:normal;color:var(--ink);min-height:2.6em}
/* 二維碼區的雙語標語 */
.qr-slogan{margin-top:14px;font-size:17px;letter-spacing:.36em;text-indent:.36em;color:var(--cinnabar)}
.qr-slogan-en{font-family:var(--serif-en);font-size:12px;letter-spacing:.16em;color:var(--dim);margin-top:5px}
.paper{
  position:relative;
  background-color:var(--paper);
  /* 三層：紙纖維噪點 + 極淡的橫向簾紋 + 由中心向外的微暈（模擬燈下宣紙） */
  background-image:
    var(--paper-grain),
    repeating-linear-gradient(0deg, rgba(120,100,70,.020) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% 0%, rgba(255,252,244,.55), rgba(214,203,178,.30) 78%);
  background-size:140px 140px, auto, auto;
  background-blend-mode:multiply, normal, normal;
  border:1px solid rgba(0,0,0,.30); border-radius:1px; padding:30px 32px;
  box-shadow:0 2px 4px rgba(0,0,0,.10), 0 14px 40px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.10) inset;
  margin-bottom:16px;
}
/* 古書的魚尾／界行：兩側細豎線，中式書頁的特徵 */
.paper::before,.paper::after{content:"";position:absolute;top:14px;bottom:14px;width:1px;background:rgba(120,100,70,.22)}
.paper::before{left:11px}
.paper::after{right:11px}
h1{font-size:30px;letter-spacing:.2em;margin:0 0 6px;font-weight:400}
h1 .en{display:block;font-family:var(--serif-en);font-size:13px;letter-spacing:.18em;color:var(--dim);margin-top:8px;text-transform:uppercase}
h2{font-size:19px;letter-spacing:.14em;margin:26px 0 8px;font-weight:400;color:var(--ink)}
h2 .en{font-family:var(--serif-en);font-size:12.5px;color:var(--dim);letter-spacing:.06em;margin-left:8px;text-transform:none}
h3{font-size:15.5px;margin:18px 0 6px;font-weight:400;color:var(--gold);letter-spacing:.1em}
p{margin:10px 0;font-size:15.5px}
p.en,li.en,.en{font-family:var(--serif-en);font-size:13.5px;color:#6b6355;font-style:italic;line-height:1.7}
ul,ol{padding-left:22px}
li{margin:6px 0;font-size:15px}
.lead{font-size:17px;color:var(--ink)}
.dim{color:var(--dim);font-size:13px}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:22px 0}
.btn{display:inline-block;font-family:inherit;cursor:pointer;border:none;border-radius:3px;
  font-size:16px;letter-spacing:.22em;padding:15px 32px;min-height:48px;color:#f7f1e2;text-decoration:none;
  background:linear-gradient(180deg,#8f2a22,#6b1d17);box-shadow:0 3px 0 #45120e;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #45120e}
.btn.gold{background:linear-gradient(180deg,#c3a15c,#9d7c34);color:#2a2114;box-shadow:0 3px 0 #6d5522}
.btn.ghost{background:none;color:var(--ink2);border:1px solid var(--line);box-shadow:none;font-size:14px}
.center{text-align:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0}
.tile{border:1px solid var(--line);border-radius:4px;padding:16px 18px;background:rgba(255,255,255,.4)}
.tile h3{margin-top:0}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
th{background:rgba(168,135,63,.10);font-weight:400;letter-spacing:.08em}
.warn{border-left:3px solid var(--cinnabar);background:rgba(156,47,38,.05);padding:12px 14px;border-radius:0 3px 3px 0;font-size:13.5px;margin:16px 0}
.seal{position:absolute;right:22px;bottom:20px;width:56px;height:56px;border:2px solid rgba(156,47,38,.5);
  color:rgba(156,47,38,.62);border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1.15;text-align:center;letter-spacing:.04em}
footer.site{margin-top:26px;text-align:center;color:#8d8474;font-size:12px;line-height:2}
footer.site a{color:#b9ad92;text-decoration:none;border-bottom:1px solid rgba(168,135,63,.4)}
footer.site a:hover{color:#e8d9b0}
.langbar{position:fixed;right:14px;top:14px;z-index:20}
.langbar button{font-family:inherit;background:rgba(19,17,16,.7);border:1px solid rgba(168,135,63,.5);
  color:var(--gold);font-size:13px;letter-spacing:.1em;padding:10px 16px;min-height:44px;border-radius:2px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
[data-lang]{display:none}
[data-lang].on{display:block}
span[data-lang].on,strong[data-lang].on,a[data-lang].on{display:inline}
/* 真跡照片已撤下，改用自己畫的中國元素（太極／八卦／祥雲／飛檐／塔）。
 * 好處：體積小（SVG 幾 KB）、與水墨版面同一套語言、無授權顧慮。 */
.cloud-band{margin:6px 0;opacity:.75}
.pagoda-band{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:2px 0 10px;opacity:.55}
/* ── 功德箱 ────────────────────────────────────────────── */
.dana{text-align:center}
.dana-title{font-size:21px;letter-spacing:.34em;text-indent:.34em;color:var(--cinnabar);margin:0 0 6px}
.dana-sub{font-size:13.5px;color:var(--dim);line-height:1.9;margin:0 auto 20px;max-width:26em}
.dana-grid{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.dana-slot{flex:0 0 auto;width:210px;border:1px solid var(--line);border-radius:2px;padding:13px;
  background:rgba(255,255,255,.42)}
.dana-slot .lab{font-size:13px;letter-spacing:.14em;color:var(--ink);margin-bottom:9px}
.dana-slot .qr{width:168px;height:168px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:2px}
/* 只有「待補」時才畫虛線框；有真二維碼時不畫，免得像個殘留的佔位框 */
.dana-slot .qr:has(.ph){border:1px dashed rgba(120,100,70,.42);background:rgba(255,255,255,.55)}
.dana-slot .qr img{width:100%;height:100%;object-fit:contain;display:block;
  border:1px solid rgba(120,100,70,.28);border-radius:2px;background:#fff}
.dana-slot .qr .ph{font-size:12px;color:var(--dim);line-height:1.7;padding:0 10px}
.dana-slot .val{font-family:var(--serif-en);font-size:13.5px;color:var(--ink2);margin-top:9px;
  word-break:break-all;line-height:1.7}
.dana-note{font-size:11.5px;color:var(--dim);line-height:1.85;max-width:30em;margin:0 auto}
.dana-rule{border:0;border-top:1px solid var(--line);margin:18px auto;max-width:16em}
@media (max-width: 640px) {
  .dana-slot{width:100%;max-width:260px}
  .pagoda-band svg:nth-child(3){display:none}
}

/* 功德箱入口：固定在頁面最左上角。
 * 用戶指定：不要外面的正方形方框 —— 只留功德箱本身的形狀。
 * 首頁頭部是深色底，故用金色描邊 + 投影保持可辨識。 */
.dana-entry{position:fixed;left:max(10px,env(safe-area-inset-left));
  top:calc(10px + env(safe-area-inset-top));z-index:60;width:54px;height:54px;
  color:#d8b45a;display:flex;align-items:center;justify-content:center;
  text-decoration:none;background:none;border:none;padding:0;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.6));
  transition:transform .12s,color .18s}
.dana-entry svg{display:block;width:100%;height:100%}
.dana-entry:active{transform:scale(.9)}
.dana-entry:hover{color:#f0d68c}
@media (max-width: 640px) {
  .dana-entry{width:48px;height:48px}
}
/* ── 中國古代圖案的位置安排 ─────────────────────────────────
 * 八卦作極淡的背景水印；太極落在卦象旁；頁腳用祥雲帶 + 飛檐 + 塔收束。 */
.hero-motif{position:absolute;right:-40px;top:-30px;width:300px;height:300px;
  pointer-events:none;z-index:0}
.hero .scroll{position:relative;z-index:1}
/* 太極與印章在右下成一組（先前浮在左側空白處像誤放的圓點） */
.taiji-mark{position:absolute;right:44px;bottom:92px;width:34px;height:34px;opacity:.9}
.cloud-divider{margin:6px 0 0;opacity:.85}
.roof-divider{margin:-6px 0 0}
.temple-row{display:flex;justify-content:center;align-items:flex-end;gap:6px;margin:-4px 0 16px}
.temple-row svg{display:block}
@media (max-width: 640px) {
  .hero-motif{width:200px;height:200px;right:-50px;top:-24px}
  /* 手機上空間緊，太極會撞到卦象，直接隱去（裝飾不該搶戲） */
  .taiji-mark{display:none}
  .temple-row svg:nth-child(3){display:none}
}

/* ── 首頁：豎排構字 ─────────────────────────────────────────
 * 用 flex + row（DOM 順序即右起）＋ align-items:flex-start 讓所有字列
 * 頂部對齊；先前用 absolute + right 定位，各列字號不同就會錯位。 */
.hero{padding:36px 38px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.scroll{display:flex;flex-direction:row;justify-content:flex-end;align-items:flex-start;
  gap:36px;min-height:250px;padding-bottom:8px}
.col{display:flex;flex-direction:column;align-items:center}
/* 字列：頂部對齊是關鍵，行高不影響起筆位置 */
.vt{writing-mode:vertical-rl;text-orientation:upright;font-size:58px;letter-spacing:.16em;
  color:var(--ink);line-height:1;font-weight:400}
.vt-en{writing-mode:vertical-rl;font-family:var(--serif-en);font-size:24px;letter-spacing:.14em;color:var(--ink);line-height:1}
.vt-sub{writing-mode:vertical-rl;text-orientation:upright;font-size:17px;letter-spacing:.26em;color:var(--ink2);line-height:1}
.vt-sub-en{writing-mode:vertical-rl;font-family:var(--serif-en);font-size:13px;letter-spacing:.08em;color:var(--dim);line-height:1.6}
.vt-q{writing-mode:vertical-rl;text-orientation:upright;font-size:21px;letter-spacing:.3em;color:var(--cinnabar);line-height:1}
.vt-q-en{writing-mode:vertical-rl;font-family:var(--serif-en);font-size:13px;letter-spacing:.06em;color:var(--cinnabar);line-height:1.6}
/* 卦象：足夠大、六爻可辨；與字列同一橫線起步 */
.gua-seal{display:flex;flex-direction:column;align-items:flex-start;margin-top:6px}
.gua-seal-inner{width:232px;aspect-ratio:300/236}
.gua-seal-inner svg{display:block;width:100%;height:100%}
.gua-seal-name{margin-top:12px;font-size:26px;letter-spacing:.22em;color:var(--ink)}
.gua-seal-en{font-family:var(--serif-en);font-size:13px;font-style:italic;color:var(--dim);letter-spacing:.04em;margin-top:2px}
/* 印：落在右下，作為構圖的收束 */
.seal-mark{position:absolute;right:38px;bottom:28px;width:54px;height:54px;border:2.5px solid var(--cinnabar);
  border-radius:2px;color:var(--cinnabar);display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1.2;text-align:center;letter-spacing:.06em;opacity:.9}
.hero-tail{margin-top:26px;padding-top:20px;border-top:1px solid rgba(120,100,70,.22);max-width:46em}
.q-line{font-size:19px;line-height:1.9;color:var(--ink);margin:0 0 18px;
  border-left:3px solid var(--cinnabar);padding-left:16px}
.hero-cta{margin:0 0 10px;display:flex;gap:10px;flex-wrap:wrap}
/* 第二顆按鈕：描邊樣式，與主按鈕區分 */
.btn.btn-alt{background:rgba(255,255,255,.5);color:var(--cinnabar);border:1px solid var(--cinnabar);
  box-shadow:0 2px 0 rgba(158,43,37,.25)}
@media (max-width: 420px) { .hero-cta{flex-direction:column} .hero-cta .btn{width:100%;text-align:center} }
/* 八字與算卦的分野：常被混稱「算命」，故給最短的選擇依據。
   入口已合併成一個，但這段說明保留（使用者指定其他說明不動）。 */
.two-ways{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0;text-align:left}
.way{background:rgba(255,255,255,.42);border:1px solid rgba(28,26,23,.12);
  border-radius:2px;padding:11px 12px}
.way-h{font-size:12.5px;letter-spacing:.1em;color:var(--cinnabar);margin-bottom:7px}
.way ul{margin:0;padding-left:1.05em}
.way li{font-size:11.5px;line-height:1.75;color:var(--ink);margin:3px 0}
.way li b{color:var(--cinnabar)}
.two-ways-note{font-size:11px;line-height:1.7;color:var(--dim);margin:10px 0 0;text-align:left}
@media (max-width: 560px) {
  .two-ways{grid-template-columns:1fr}
}
/* 「完全免費」的聲明：放在頁尾細則之上，用朱砂色以示這是承諾而非附註 */
.hero-free{margin:14px 0 4px;font-size:13.5px;letter-spacing:.06em;color:var(--cinnabar);
  text-align:center}
.hero-free .en{color:var(--dim);font-style:italic}
.hero-fine{font-size:11.5px;color:var(--dim);margin:0}
.qr-panel{padding:20px 24px}
@media (max-width: 640px) {
  .hero{padding:26px 20px 22px}
  /* 手機上四列放不下（實測 460px > 350px，最左邊的標題會被 overflow 裁掉），
     所以省掉副題，只留「問天」＋「今日一問」＋卦象 */
  .scroll{gap:16px;min-height:0;align-items:flex-start}
  .col-sub{display:none}
  .vt{font-size:40px;letter-spacing:.12em}
  .vt-en{font-size:17px}
  .vt-q{font-size:16px;letter-spacing:.18em}
  .vt-q-en{font-size:12px}
  .gua-seal-inner{width:132px}
  .gua-seal-name{font-size:19px;margin-top:8px;letter-spacing:.16em}
  .gua-seal-en{font-size:11.5px}
  .seal-mark{right:20px;bottom:22px;width:44px;height:44px;font-size:11px}
  .q-line{font-size:17px}
  .hero-tail{margin-top:20px;padding-top:16px}
}

/* ── 手機優先 ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  header.site{padding:20px 0 14px}
  header.site .brand{font-size:28px;letter-spacing:.4em}
  header.site nav{gap:12px}
  header.site nav a{font-size:13.5px;padding:8px 0}
  .paper{padding:22px 18px;margin-bottom:12px}
  h1{font-size:24px;letter-spacing:.14em}
  h2{font-size:17px;margin:20px 0 6px}
  p,li{font-size:15.5px}
  table{font-size:13.5px}
  th,td{padding:8px 9px}
  .grid3{grid-template-columns:1fr;gap:10px}
  .tile{padding:14px 15px}
  .langbar{right:10px;top:10px}
  .langbar button{padding:9px 14px;font-size:12.5px}
}
/* 只在真有 hover 的裝置上套用懸停 */
@media (hover: hover) {
  .btn:hover{filter:brightness(1.06)}
  .tile:hover{border-color:rgba(168,135,63,.5)}
}
/* 橫向螢幕：壓縮垂直留白 */
@media (max-height: 520px) and (orientation: landscape) {
  header.site{padding:12px 0 8px}
  .paper{padding:16px 18px}
}