/* 六十甲子籤 靈籤新解 — 專屬樣式（疊在 /assets/site.css 之上）
   底色與深/淺色主題交給 site.css 的 --page-bg 與主題變數；此檔只補籤紙與七主題等元件。
   文字顏色一律用 site.css 主題變數（--ink/--body/--muted/--gold-text/--hair），確保深淺色皆可讀。 */

:root{
  /* 籤紙獨立卡片（象牙宣紙暗字，固定值，深淺色底皆成立） */
  --o-ink:#1c1a17; --o-ink-soft:#4a463f;
  --o-paper:#f4efe2; --o-paper-edge:#e6dcc6;
  --o-cinnabar:#9e3a2f;
  --serif:"Noto Serif TC","Songti TC","PingFang TC",serif;
}

.oracle{max-width:720px;margin:0 auto;padding:clamp(8px,3vw,24px) 0 40px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ① 籤紙：直式・宣紙・浮於底色 */
.qianzhi{display:flex;flex-direction:column;align-items:center;margin:clamp(8px,3vw,20px) 0 clamp(36px,7vw,64px);}
.qianzhi__paper{
  display:flex;flex-direction:row-reverse;justify-content:center;gap:clamp(20px,5vw,44px);
  background:linear-gradient(180deg,var(--o-paper),var(--o-paper-edge));
  color:var(--o-ink);
  padding:clamp(28px,6vw,52px) clamp(24px,5vw,44px);
  border:1px solid rgba(28,26,23,.22);border-radius:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 26px 60px -22px rgba(0,0,0,.55);
  writing-mode:vertical-rl;text-orientation:upright;
  animation:paper-rise 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.qianzhi__col{display:flex;flex-direction:column;align-items:center;}
.qianzhi__col--poem p{font-family:var(--serif);font-weight:700;font-size:clamp(24px,6.4vw,34px);letter-spacing:.32em;margin:0 .18em;}
.qianzhi__col--meta{gap:1.1em;font-family:var(--serif);color:var(--o-ink-soft);}
.qianzhi__seq{font-weight:600;font-size:1.05rem;color:var(--o-cinnabar);}
.qianzhi__ganzhi{font-weight:700;font-size:1.35rem;}
.qianzhi__mark{letter-spacing:.2em;font-size:.9rem;}
.qianzhi__element{font-size:.92rem;letter-spacing:.24em;}
.qianzhi__col--allusion{justify-content:space-between;color:var(--o-ink-soft);}
.qianzhi__seal{writing-mode:horizontal-tb;background:var(--o-cinnabar);color:var(--o-paper);width:1.7em;height:1.7em;display:grid;place-items:center;border-radius:3px;font-family:var(--serif);font-size:.85rem;}
.qianzhi__allusion{font-family:var(--serif);letter-spacing:.22em;font-size:1rem;}
.qianzhi__overall{margin-top:1.3em;color:var(--gold-text);letter-spacing:.4em;font-size:.82rem;font-family:var(--serif);}

/* 區塊通用 */
.section{margin:clamp(32px,6vw,54px) 0;}
.section__eyebrow{font-family:var(--serif);font-weight:600;font-size:.95rem;letter-spacing:.3em;color:var(--gold-text);border-left:2px solid var(--gold2);padding-left:.8em;margin-bottom:1.3em;}

/* ② 逐句語譯 */
.paraphrase__list{margin:0;}
.paraphrase__row{padding:1em 0;border-bottom:1px solid var(--hair-soft);}
.paraphrase__row dt{font-family:var(--serif);font-size:1.2rem;letter-spacing:.12em;color:var(--ink);}
.paraphrase__row dd{margin:.5em 0 0;color:var(--body);}

/* ③ 典故 */
.allusion__body{color:var(--body);font-size:1.02rem;}

/* ④ tabs：七問固定一排、等寬 */
.themes__tabs{display:flex;flex-wrap:nowrap;gap:.4em;margin-bottom:1.5em;}
.themes__tabs button{flex:1 1 0;min-width:0;font-family:var(--serif);font-size:clamp(.8rem,2.7vw,1rem);letter-spacing:.02em;background:var(--glass);color:var(--muted);border:1px solid var(--hair);padding:.6em .2em;border-radius:8px;cursor:pointer;transition:.25s var(--ease);min-height:44px;white-space:nowrap;text-align:center;}
.themes__tabs button:hover{color:var(--ink);border-color:var(--gold2);}
.themes__tabs button[aria-selected="true"]{color:#3a2c05;background:linear-gradient(180deg,var(--gold1),var(--gold2));border-color:var(--gold2);font-weight:700;}
.themes__tabs button:focus-visible{outline:2px solid var(--gold3);outline-offset:2px;}

/* ⑤ 主題文章 */
.theme-panel{animation:o-fade .4s ease both;}
.theme-panel[hidden]{display:none;}
.theme-panel__frame{font-family:var(--serif);color:var(--gold-text);letter-spacing:.12em;font-size:.92rem;margin:0 0 .9em;}
.theme-panel__body{color:var(--body);font-size:1.04rem;}
.theme-panel__body p{margin:0 0 1em;}
.med-notice{font-size:.9rem;color:var(--gold-text);background:rgba(245,197,66,.08);border-left:2px solid var(--gold2);padding:.7em 1em;border-radius:6px;}

/* ⑥ 吉凶批註：等高等寬卡片，題目與斷語上下堆疊、不再擠成兩排 */
.fortune__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-auto-rows:minmax(4.8em,1fr);gap:.6em;margin:0;}
.fortune__grid div{display:flex;flex-direction:column;justify-content:center;gap:.3em;padding:.7em .9em;border:1px solid var(--hair-soft);border-radius:10px;background:var(--glass);}
.fortune__grid dt{color:var(--gold-text);font-family:var(--serif);letter-spacing:.08em;font-size:.86rem;}
.fortune__grid dd{margin:0;color:var(--body);font-size:.98rem;line-height:1.4;}

/* ⑦ 導覽 + 免責 */
.oracle__nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;margin:clamp(30px,6vw,50px) 0 1.4em;}
.oracle__nav a{color:var(--gold-text);text-decoration:none;letter-spacing:.08em;font-size:.95rem;}
.oracle__nav a:hover{text-decoration:underline;}
.oracle__nav a[aria-disabled="true"]{color:var(--faint);pointer-events:none;}
.oracle .disclaimer{font-size:.82rem;color:var(--faint);line-height:1.7;border-top:1px solid var(--hair-soft);padding-top:1.3em;margin-bottom:8px;}

@keyframes paper-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes o-fade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.qianzhi__paper,.theme-panel{animation:none;}}
@media (max-width:520px){.qianzhi__col--poem p{font-size:clamp(22px,7.6vw,30px);}}

/* hub 總表 */
.jiazi-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.3em 1.4em;}
.jiazi-list li{border-bottom:1px dotted var(--hair-soft);}
.jiazi-list a,.jiazi-list span.soon{display:flex;gap:.7em;align-items:baseline;padding:.7em .2em;text-decoration:none;color:var(--body);}
.jiazi-list a:hover{color:var(--gold-text);}
.jiazi-list .n{color:var(--gold-text);font-family:var(--serif);font-size:.9rem;min-width:3.6em;flex:0 0 auto;}
.jiazi-list .gz{color:var(--muted);font-size:.92rem;font-family:var(--serif);flex:0 0 auto;}
.jiazi-list .fl{color:inherit;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jiazi-list span.soon{color:var(--faint);}
.jiazi-list span.soon .n{color:var(--faint);}
.jiazi-intro{color:var(--body);font-size:1.02rem;line-height:1.9;}