/* =====================================================
 *  股海識貝 · 全站共享樣式
 *  設計系統：延續漂流瓶頁的宣紙/硃砂/金/玉 配色
 * ===================================================== */

:root {
  --paper:#f5ecd6;
  --paper-deep:#ebdfc1;
  --paper-card:#fbf6e6;
  --paper-rgb:255,250,235; --card-grad:var(--card-grad);
  --ink:#1d1d1f;
  --ink-soft:#4a4a4a;
  --cinnabar:#a8323a;
  --cinnabar-deep:#7a2026;
  --jade:#4f7a52;
  --gold:#b58b3d;
  --gold-deep:#8f6b2c;
  --line:rgba(29,29,31,0.12);
  --line-soft:rgba(29,29,31,0.06);
  --shadow:0 6px 20px rgba(0,0,0,0.10);
  --shadow-lg:0 14px 36px rgba(0,0,0,0.16);
  --serif:"Noto Serif TC","Noto Serif HK","Songti TC","Songti SC","STSong","SimSun",serif;
  --kai:"LXGW WenKai TC","Kaiti TC","Kaiti SC","STKaiti","KaiTi",serif;
  --maxw:880px;
  --header-h:60px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin:0; padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.75;
  min-height:100vh;
}
body {
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(181,139,61,0.09), transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(168,50,58,0.06), transparent 60%),
    radial-gradient(900px 620px at -6% -12%, rgba(45,40,32,0.05), transparent 60%),
    radial-gradient(1100px 700px at 106% 112%, rgba(45,40,32,0.06), transparent 62%),
    radial-gradient(130% 70% at 50% 112%, rgba(45,40,32,0.07), transparent 60%),
    var(--paper);
}
/* 宣紙顆粒：feTurbulence 噪點蓋全頁，消除純色感（低透明度，勿再調高） */
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:1200;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

a { color:var(--cinnabar); text-decoration:none; transition:color .15s ease; }
a:hover { color:var(--cinnabar-deep); }

/* ============ 頂部導航 ============ */
.site-header {
  position:sticky; top:0; z-index:200;
  height:var(--header-h);
  background:rgba(var(--paper-rgb),0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header-inner { position:relative;
  max-width:var(--maxw);
  height:100%;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  flex-shrink:0;
}
.brand:hover { color:var(--ink); }
.brand-seal {
  display:inline-block;
  /* HK 慣例：綠 = 漲。印章改綠底白字 */
  background:linear-gradient(160deg, #67996c -12%, var(--jade) 42%, #35513a 105%);
  color:#f6faf5;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.3em;
  padding:4px 10px;
  transform:rotate(-2deg);
  box-shadow:
    inset 0 0 0 1px rgba(235,250,238,0.32),
    inset 0 0 7px rgba(200,240,210,0.22),
    0 2px 3px rgba(45,40,32,0.22),
    var(--shadow);
}
.brand-name {
  font-family:var(--kai);
  font-weight:500;
  font-size:18px;
  letter-spacing:.08em;
}
.site-nav {
  display:flex; gap:4px;
  flex:1; justify-content:center;
  flex-wrap:wrap;
}
.site-nav a {
  display:inline-block;
  padding:6px 14px;
  font-size:14px;
  color:var(--ink-soft);
  letter-spacing:.1em;
  border-radius:4px;
  transition:background .15s ease, color .15s ease;
}
.site-nav a:hover { background:rgba(168,50,58,0.07); color:var(--cinnabar); }
.site-nav a.active {
  background:var(--ink);
  color:var(--paper);
}
.site-nav a.active:hover { background:var(--cinnabar); color:var(--paper); }

.nav-toggle {
  display:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  width:38px; height:38px;
  border-radius:4px;
  cursor:pointer;
  font-size:18px;
  align-items:center; justify-content:center;
}

/* ============ 主體與頁腳 ============ */
.site-main {
  flex:1;
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  padding:38px 24px 72px;
}
.site-footer {
  position:relative;
  background:rgba(235,229,193,0.5);
  margin-top:auto;
}
/* 金箔分隔線 */
.site-footer::before {
  content:"";
  position:absolute;
  top:0; left:8%; right:8%;
  height:1px;
  background:linear-gradient(90deg, rgba(181,139,61,0), var(--gold) 22%, var(--gold-deep) 50%, var(--gold) 78%, rgba(181,139,61,0));
}
.footer-inner {
  max-width:var(--maxw);
  margin:0 auto;
  padding:36px 24px 44px;
  text-align:center;
}
.footer-inner .brand-seal { font-size:11px; padding:3px 8px; }
.footer-disclaimer {
  font-size:11.5px;
  color:var(--ink-soft);
  letter-spacing:.05em;
  margin-top:8px;
  line-height:1.7;
}
.footer-links {
  display:flex; justify-content:center; gap:18px;
  margin-top:10px; flex-wrap:wrap;
}
.footer-links a { font-size:12.5px; color:var(--ink-soft); letter-spacing:.1em; }
.footer-links a:hover { color:var(--cinnabar); }

/* ============ 排版 / 通用組件 ============ */
.page-header { text-align:center; padding:6px 0 36px; }
/* 內容頁進場 reveal（B1 §D）：僅 html.js 時套用隱藏基態，無 JS / reduced-motion 直接呈現 */
html.js .site-main .section, html.js .site-main .card, html.js .site-main .note-box,
html.js .site-main .pullquote, html.js .site-main .hex-row, html.js .site-main .back-to-sea {
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
html.js .site-main .in {
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .site-main .section, html.js .site-main .card, html.js .site-main .note-box,
  html.js .site-main .pullquote, html.js .site-main .hex-row, html.js .site-main .back-to-sea {
    opacity:1; transform:none; transition:none;
  }
}
.page-kicker {
  display:inline-block;
  font-family:var(--kai);
  font-size:16px;
  letter-spacing:.4em;
  color:var(--cinnabar);
  margin-bottom:12px;
}
.page-title {
  font-family:var(--kai);
  font-weight:500;
  font-size:32px;
  letter-spacing:.12em;
  margin:0 0 6px;
}
/* 標題下金箔分隔 */
.page-title::after {
  content:"";
  display:block;
  width:88px;
  height:2px;
  margin:12px auto 0;
  border-radius:1px;
  background:linear-gradient(90deg, rgba(181,139,61,0), var(--gold) 28%, var(--gold-deep) 50%, var(--gold) 72%, rgba(181,139,61,0));
}
.page-sub {
  font-size:12.5px;
  color:var(--ink-soft);
  letter-spacing:.25em;
  margin-bottom:14px;
}
.page-intro {
  max-width:600px;
  margin:8px auto 0;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.85;
}

.section { margin-top:44px; }
.section-label {
  display:inline-block;
  font-family:var(--kai);
  font-size:15px;
  letter-spacing:.35em;
  color:var(--cinnabar);
  padding-left:.5em;
  margin-bottom:6px;
}
.section-title {
  font-family:var(--kai);
  font-size:24px;
  letter-spacing:.12em;
  margin:0 0 18px;
  font-weight:500;
}
/* B2 §A：豎排小節標籤（內容頁 body.v-label；<720px 回退橫排） */
.v-label .section { position:relative; padding-left:46px; }
.v-label .section-label {
  position:absolute; left:0; top:4px;
  writing-mode:vertical-rl;
  color:var(--gold-deep);
  padding-left:0;
  margin-bottom:0;
  padding-bottom:58px;
  background:linear-gradient(180deg, var(--gold), rgba(181,139,61,0)) no-repeat bottom center / 1px 46px;
}
@media (max-width:719px) {
  .v-label .section { padding-left:0; }
  .v-label .section-label { position:static; writing-mode:horizontal-tb; padding-bottom:0; background:none; margin-bottom:6px; color:var(--cinnabar); }
}
/* 橫排 section-label（卦詳情頁等）：左側短金線前置 */
.section-label::before { content:""; display:inline-block; width:10px; height:2px; background:var(--gold); vertical-align:middle; margin-right:8px; }
.v-label .section-label::before { display:none; }

/* B2 §B：得卦落款印章（硃砂方印 2×2 田格，右下角蓋章） */
.oracle-seal {
  position:absolute; right:18px; bottom:12px;
  width:64px; height:64px;
  background:var(--cinnabar);
  border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(246,250,245,0.5);
  display:grid; grid-template-columns:1fr 1fr; place-items:center;
  padding:5px; box-sizing:border-box;
  font-family:var(--kai); color:#f6faf5; font-size:21px; line-height:1;
  transform:rotate(-3deg);
  opacity:0.92; mix-blend-mode:multiply;
  pointer-events:none;
  animation:stampIn 0.5s cubic-bezier(.2,1.6,.4,1) 0.2s backwards;
  transition:transform .2s ease, filter .2s ease;
}
/* B4 §E2：hover 輕微放大提亮 */
.oracle-seal:hover { transform:rotate(-3deg) scale(1.06); filter:brightness(1.08); }
@keyframes stampIn {
  0% { opacity:0; transform:rotate(-3deg) scale(1.6); filter:blur(2px); }
  60% { opacity:0.92; transform:rotate(-3deg) scale(0.96); }
  100% { opacity:0.92; transform:rotate(-3deg) scale(1); filter:blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .oracle-seal { animation:none; opacity:0.92; }
}
@media (max-width:640px) { .oracle-seal { width:52px; height:52px; font-size:17px; right:12px; bottom:10px; } }

/* 小節標題金箔落款 */
.section-title::after {
  content:"";
  display:block;
  width:56px;
  height:2px;
  margin-top:10px;
  border-radius:1px;
  background:linear-gradient(90deg, var(--gold), rgba(181,139,61,0));
}
.section-title .cn { }
.section-title .en {
  display:block;
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.3em;
  color:var(--ink-soft);
  margin-top:4px;
}

/* 卡片（磨砂宣紙：暖漸變 + 內發光 + 淡金內描 + 四角角花，紙紋由全頁噪點層提供） */
.card {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M13 1H3M13 1v10' stroke='rgba(181,139,61,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat top 8px right 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1 13h10M1 13V3' stroke='rgba(181,139,61,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat bottom 8px left 8px,
    var(--card-grad);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:
    inset 0 0 0 1px rgba(181,139,61,0.16),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 0 46px rgba(181,139,61,0.07),
    var(--shadow);
  padding:22px 26px;
}
.card + .card { margin-top:16px; }
.steps li,
.feature-card {
  background:linear-gradient(160deg, #fdf8ea, #f8f0db 55%, #f3e9cf);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 34px rgba(181,139,61,0.06);
}

.divider {
  border:none;
  border-top:1px dashed var(--line);
  margin:36px 0;
}

/* 引用塊 */
.pullquote {
  font-family:var(--kai);
  font-size:17px;
  color:var(--cinnabar);
  letter-spacing:.04em;
  border-left:3px solid var(--cinnabar);
  background:rgba(168,50,58,0.035);
  padding:10px 16px 10px 18px;
  margin:18px 0;
  line-height:1.7;
}
/* B2 §D：首字放大（drop cap） */
.pullquote::first-letter {
  font-size:2.1em;
  line-height:1;
  float:left;
  padding:4px 10px 0 0;
}
.pullquote .attr {
  display:block;
  font-family:var(--serif);
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:.2em;
  margin-top:6px;
}

/* 步驟列表 */
.steps { list-style:none; padding:0; margin:0; counter-reset:step; }
.steps li {
  position:relative;
  counter-increment:step;
  padding:14px 16px 16px 60px;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:6px;
  margin-bottom:12px;
  min-height:54px;
}
.steps li::before {
  content:counter(step);
  position:absolute;
  left:16px; top:14px;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--cinnabar);
  color:var(--paper);
  font-family:var(--kai);
  font-size:16px;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.steps .step-title {
  font-family:var(--kai);
  font-size:15.5px;
  color:var(--ink);
  letter-spacing:.05em;
  margin-bottom:2px;
}
.steps .step-body { font-size:13.5px; color:var(--ink-soft); line-height:1.7; }

/* 特性網格 */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:14px;
}
.feature-card {
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 20px;
  text-align:left;
}
.feature-card.up { border-top:3px solid var(--cinnabar); }
.feature-card.flat { border-top:3px solid var(--gold); }
.feature-card.down { border-top:3px solid var(--jade); }
.feature-card .feat-icon {
  font-size:24px;
  margin-bottom:6px;
}
.feature-card.up .feat-icon { color:var(--jade); }
.feature-card.flat .feat-icon { color:var(--gold); }
.feature-card.down .feat-icon { color:var(--cinnabar); }
.feature-card .feat-title {
  font-family:var(--kai);
  font-size:15px;
  letter-spacing:.08em;
  margin-bottom:4px;
}
.feature-card .feat-body { font-size:12.8px; color:var(--ink-soft); line-height:1.7; }

/* 六角/小八卦裝飾塊 */
.hex-row {
  display:flex; gap:14px; flex-wrap:wrap;
  margin:16px 0; justify-content:center;
}
.hex-mini {
  width:56px; text-align:center;
  font-family:var(--kai);
}
.hex-mini .trigram {
  display:block;
  font-size:15px;
  color:var(--cinnabar);
  letter-spacing:.05em;
}
.hex-mini .name {
  display:block;
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:.1em;
}

/* 提示框 */
.note-box {
  background:rgba(181,139,61,0.08);
  border-left:3px solid var(--gold);
  border-radius:0 6px 6px 0;
  box-shadow:inset 0 0 0 1px rgba(181,139,61,0.12);
  padding:14px 18px;
  margin:18px 0;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.75;
}
.note-box strong { color:var(--gold-deep); }

.warn-box {
  background:rgba(168,50,58,0.06);
  border-left:3px solid var(--cinnabar);
  border-radius:0 6px 6px 0;
  padding:14px 18px;
  margin:18px 0;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.75;
}

/* 段落正文 */
.prose { font-size:14.5px; color:var(--ink); line-height:1.9; }
.prose p { margin:0 0 14px; }
.prose h3 {
  font-family:var(--kai);
  font-size:18px;
  letter-spacing:.08em;
  font-weight:500;
  margin:32px 0 12px;
  padding-left:10px;
  border-left:3px solid var(--gold);
}

/* 返回按鈕 */
.back-to-sea {
  display:inline-block;
  margin-top:28px;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.25em;
  padding:8px 20px;
  background:var(--ink);
  color:var(--paper);
  border-radius:4px;
  transition:background .15s ease;
}
.back-to-sea:hover { background:var(--cinnabar); color:var(--paper); }

/* ============ 漂流瓶頁用的內嵌 header（與 sea 共存） ============ */
.hero-compact .site-header { position:relative; }
/* 眉題上邊距與其他頁統一（由 .site-main 的 38px 提供） */

/* ============ 響應式 ============ */
@media (max-width: 720px) {
  .site-nav {
    display:none;
    position:absolute;
    top:var(--header-h); left:0; right:0;
    flex-direction:column;
    gap:0;
    background:rgba(245,236,214,0.98);
    border-bottom:1px solid var(--line);
    padding:8px 0;
  }
  .site-nav.open { display:flex; }
  .site-nav a {
    padding:12px 24px;
    border-radius:0;
  }
  .nav-toggle { display:flex; }
  .page-title { font-size:26px; }
  .section-title { font-size:20px; }
  .card { padding:18px 18px; }
}

/* ============ B3 §A：夜海模式（html[data-theme=night]）============
   只覆蓋同名 token 與少量硬編碼色；存圖/og 分享圖恆為日間宣紙 */
html[data-theme="night"] {
  --paper:#171d24; --paper-deep:#12171d; --paper-card:#202731;
  --ink:#e6e0cf; --ink-soft:#a9a496;
  --cinnabar:#c34a52; --cinnabar-deep:#93343a;
  --jade:#6ea172; --gold:#c9a25a; --gold-deep:#a8853f;
  --line:rgba(230,224,207,.14); --line-soft:rgba(230,224,207,.07);
  --shadow:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 14px 36px rgba(0,0,0,.55);
  --paper-rgb:34,41,52;
  --card-grad:linear-gradient(160deg,#242d38,#1f2631 55%,#1b2129);
}
html[data-theme="night"] body {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(201,162,90,0.06), transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(195,74,82,0.05), transparent 60%),
    radial-gradient(900px 620px at -6% -12%, rgba(8,14,22,0.5), transparent 60%),
    radial-gradient(1100px 700px at 106% 112%, rgba(8,14,22,0.55), transparent 62%),
    var(--paper);
}
html[data-theme="night"] body::after { mix-blend-mode:screen; opacity:0.05; }
html[data-theme="night"] .oracle-seal { mix-blend-mode:normal; }
html[data-theme="night"] .overlay-oracle { background:rgba(10,15,22,0.93); }
html[data-theme="night"] .gate-overlay { background:rgba(10,15,22,0.78); }
html[data-theme="night"] .site-footer { background:rgba(18,23,29,0.6); }
html[data-theme="night"] .site-header { background:rgba(18,23,29,0.85); }
html[data-theme="night"] .sea-surface { background:linear-gradient(to bottom, rgba(30,80,110,0.35) 0%, rgba(20,60,90,0.45) 50%, rgba(12,42,66,0.55) 100%); }
/* 主題切換鈕 */
.theme-toggle { position:absolute; right:52px; top:50%; transform:translateY(-50%); width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%;
  background:transparent; color:var(--ink-soft); cursor:pointer; font-size:14px; line-height:1; transition:color .2s ease, border-color .2s ease; }
.theme-toggle:hover { color:var(--gold); border-color:var(--gold); }
.theme-toggle .icon-sun { display:none; }
html[data-theme="night"] .theme-toggle .icon-sun { display:block; }
html[data-theme="night"] .theme-toggle .icon-moon { display:none; }
@media (max-width:720px) { .theme-toggle { position:static; transform:none; margin-right:10px; } }

/* ============ B3 §B：自繪爻線 ============ */
.gua-lines { display:inline-flex; flex-direction:column; gap:4px; }
.gua-lines i { display:block; width:40px; height:6px; border-radius:3px;
  transform:scaleX(0); animation:lineIn .3s ease forwards; }
.gua-lines i.yang { background:var(--ink); }
.gua-lines i.yin { background:linear-gradient(90deg, var(--ink) 0 16px, transparent 16px 24px, var(--ink) 24px 40px); }
.gua-lines i:nth-child(2) { animation-delay:.08s; } .gua-lines i:nth-child(3) { animation-delay:.16s; }
.gua-lines i:nth-child(4) { animation-delay:.24s; } .gua-lines i:nth-child(5) { animation-delay:.32s; }
.gua-lines i:nth-child(6) { animation-delay:.4s; }
@keyframes lineIn { to { transform:scaleX(1); } }
.gua-lines.big { display:flex; flex-direction:column; align-items:center; gap:8px; margin:4px 0 10px; }
.gua-lines.big i { width:92px; height:10px; border-radius:5px; }
.gua-lines.big i.yin { background:linear-gradient(90deg, var(--ink) 0 38px, transparent 38px 54px, var(--ink) 54px 92px); }
.gua-tile:hover .gua-lines { filter:drop-shadow(0 0 6px rgba(201,162,90,0.6)); }

/* ============ 減少動效：全部退化為最終狀態 ============
   開發/QA 預覽：localStorage 設 motionOverride=1 可強制播放動效（覆蓋系統設置） */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-force) *,
  html:not(.motion-force) *::before,
  html:not(.motion-force) *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html:not(.motion-force) { scroll-behavior:auto; }
}

/* ============ 六十四卦詳情頁 / 目錄頁 ============ */
.gua-symbol { font-size:58px; line-height:1.15; color:var(--ink); }
.lines-wrap { display:flex; flex-direction:column; gap:12px; }
.line-card .line-head { display:flex; gap:12px; align-items:baseline; margin-bottom:6px; }
.line-pos { font-family:var(--kai); color:var(--cinnabar); font-weight:600; min-width:44px; }
.line-original { font-family:var(--kai); font-size:16.5px; letter-spacing:.05em; color:var(--ink); }
.line-modern { font-size:13.5px; color:var(--ink); line-height:1.8; }
.line-modern b, .line-scenario b { color:var(--gold-deep); font-weight:600; }
.line-scenario { font-size:12.8px; color:var(--ink-soft); line-height:1.75; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line-soft); }
.lines-pending p { color:var(--ink-soft); font-size:13.5px; margin:0; }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:12px; }
.rel-card { display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card-grad); color:var(--ink); transition:transform .15s ease, box-shadow .15s ease; }
.rel-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); color:var(--ink); }
.rel-label { font-size:11px; letter-spacing:.3em; color:var(--cinnabar); padding-left:.3em; }
.rel-symbol { font-size:34px; line-height:1.3; }
.rel-name { font-family:var(--kai); font-size:16px; }
.rel-struct { font-size:11.5px; color:var(--ink-soft); }
.rel-note { font-size:12.5px; color:var(--ink-soft); }
.invest-note { font-size:11.5px; color:var(--ink-soft); margin-top:8px; }
.hex-pager { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:40px; flex-wrap:wrap; }
.hex-pager-link { font-family:var(--kai); font-size:14px; color:var(--ink-soft); letter-spacing:.1em; padding:8px 14px; border:1px solid var(--line); border-radius:4px; }
.hex-pager-link:hover { color:var(--cinnabar); border-color:var(--cinnabar); }
.hex-pager .back-to-sea { margin-top:0; }
.gua-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.gua-tile { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border:1px solid var(--line); border-radius:6px; background:rgba(255,250,235,0.6); color:var(--ink); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.gua-tile:hover { transform:translateY(-2px); border-color:var(--gold); box-shadow:var(--shadow); color:var(--ink); }
.gua-tile-symbol { font-size:30px; line-height:1.3; }
.gua-tile-name { font-family:var(--kai); font-size:15px; }
.gua-tile-struct { font-size:10.5px; color:var(--ink-soft); }
/* 起卦卡片的詳解鏈接 */
.result-detail-link { text-align:center; margin:10px 0 4px; }
.detail-link { display:inline-block; font-family:var(--kai); font-size:13px; letter-spacing:.15em; color:var(--cinnabar); border-bottom:1px dashed var(--cinnabar); padding-bottom:1px; }
.detail-link:hover { color:var(--cinnabar-deep); }

/* ============ 會員 / 任務（step5） ============ */
.site-nav a { position:relative; }
.nav-dot { position:absolute; top:4px; right:6px; width:7px; height:7px; background:var(--cinnabar); border-radius:50%; box-shadow:0 0 0 2px rgba(245,236,214,0.9); }
.result-actions { display:flex; justify-content:center; gap:14px; margin:12px 0 4px; }
.res-btn { font-family:var(--kai); font-size:13px; letter-spacing:.12em; padding:7px 18px; background:transparent; border:1px solid var(--gold); color:var(--gold-deep); border-radius:4px; cursor:pointer; transition:background .15s ease; }
.res-btn:hover { background:rgba(181,139,61,0.1); }

/* ============ 卦象存圖彈窗（step4） ============ */
.ce-overlay { position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(45,40,32,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:fadeIn .2s ease both; }
.ce-modal { position:relative; max-width:560px; width:100%; max-height:92vh; overflow-y:auto; background:rgba(255,250,235,0.98); border:1px solid var(--line); border-radius:8px; box-shadow:0 24px 60px rgba(0,0,0,0.3); padding:22px 22px 18px; text-align:center; }
.ce-cap { font-family:var(--kai); font-size:16px; letter-spacing:.4em; padding-left:.4em; color:var(--cinnabar); margin-bottom:14px; }
.ce-img { width:100%; border:1px solid var(--line); border-radius:6px; display:block; }
.ce-row { margin-top:14px; }
.ce-btn { display:inline-block; font-family:var(--kai); font-size:14px; letter-spacing:.15em; padding:9px 22px; background:var(--ink); color:var(--paper); border-radius:4px; text-decoration:none; transition:background .15s ease; }
.ce-btn:hover { background:var(--cinnabar); color:var(--paper); }
.ce-share-row { display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.ce-share-row button { font-family:var(--kai); font-size:13px; padding:7px 14px; border:1px solid var(--line); border-radius:4px; background:rgba(255,250,235,0.7); color:var(--ink-soft); cursor:pointer; transition:all .15s ease; }
.ce-share-row button:hover { color:var(--cinnabar); border-color:var(--cinnabar); }
.ce-close { position:absolute; top:8px; right:12px; background:transparent; border:none; font-size:18px; color:var(--ink-soft); cursor:pointer; }
.ce-close:hover { color:var(--cinnabar); }

/* ============ 主題擴充（2026-09-06）：硃砂帖（暖紅宣紙，light）============ */
html[data-theme="zhusha"] {
  --paper:#f7e8df; --paper-deep:#f1d9cd; --paper-card:#fbf0e7;
  --ink:#3f2228; --ink-soft:#8a5f66;
  --cinnabar:#b23a30; --cinnabar-deep:#8a2620;
  --jade:#557f52; --gold:#c69a4e; --gold-deep:#9e7a36;
  --line:rgba(105,45,50,.18); --line-soft:rgba(105,45,50,.08);
  --shadow:0 6px 20px rgba(90,35,40,.12); --shadow-lg:0 14px 36px rgba(90,35,40,.20);
  --paper-rgb:247,232,223;
  --card-grad:linear-gradient(160deg,#fdf1e8,#f8e7da 55%,#f3ddcd);
}
html[data-theme="zhusha"] body {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(198,154,78,0.12), transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(178,58,48,0.08), transparent 60%),
    radial-gradient(900px 620px at -6% -12%, rgba(120,60,55,0.05), transparent 60%),
    radial-gradient(1100px 700px at 106% 112%, rgba(120,60,55,0.06), transparent 62%),
    radial-gradient(130% 70% at 50% 112%, rgba(120,60,55,0.07), transparent 60%),
    var(--paper);
}
html[data-theme="zhusha"] .site-header { background:rgba(247,232,223,0.9); }
html[data-theme="zhusha"] .site-footer { background:rgba(241,217,205,0.55); }
html[data-theme="zhusha"] .gua-tile { background:rgba(253,241,232,0.7); }
html[data-theme="zhusha"] .ce-modal { background:rgba(253,241,232,0.98); }
html[data-theme="zhusha"] .ce-share-row button { background:rgba(253,241,232,0.8); }
html[data-theme="zhusha"] .oracle { background:rgba(253,243,232,0.95); }
html[data-theme="zhusha"] .note { background:rgba(253,243,232,0.97); }
html[data-theme="zhusha"] .note::after { background:rgba(253,243,232,0.97); }

/* ============ 主題擴充（2026-09-06）：青銅（青銅銘文，dark）============ */
html[data-theme="bronze"] {
  --paper:#1f241d; --paper-deep:#191e17; --paper-card:#283022;
  --ink:#e5dfc6; --ink-soft:#a9a48a;
  --cinnabar:#d08a54; --cinnabar-deep:#a86a3e;
  --jade:#82b18c; --gold:#d4b46c; --gold-deep:#b2924c;
  --line:rgba(229,223,198,.15); --line-soft:rgba(229,223,198,.07);
  --shadow:0 6px 20px rgba(0,0,0,.5); --shadow-lg:0 14px 36px rgba(0,0,0,.6);
  --paper-rgb:31,36,29;
  --card-grad:linear-gradient(160deg,#2b3226,#242b1f 55%,#1f251b);
}
html[data-theme="bronze"] body {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(212,180,108,0.07), transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(130,177,140,0.06), transparent 60%),
    radial-gradient(900px 620px at -6% -12%, rgba(8,10,6,0.5), transparent 60%),
    radial-gradient(1100px 700px at 106% 112%, rgba(8,10,6,0.55), transparent 62%),
    var(--paper);
}
html[data-theme="bronze"] body::after { mix-blend-mode:screen; opacity:0.05; }
html[data-theme="bronze"] .site-header { background:rgba(25,30,23,0.85); }
html[data-theme="bronze"] .site-footer { background:rgba(25,30,23,0.6); }
html[data-theme="bronze"] .sea-surface { background:linear-gradient(to bottom, rgba(38,84,70,0.35) 0%, rgba(26,62,54,0.45) 50%, rgba(14,42,38,0.55) 100%); }
html[data-theme="bronze"] .gua-tile { background:rgba(43,50,38,0.85); }
html[data-theme="bronze"] .ce-modal { background:rgba(40,48,34,0.97); }
html[data-theme="bronze"] .ce-share-row button { background:rgba(43,50,38,0.9); color:var(--ink); }
html[data-theme="bronze"] .oracle { background:rgba(43,50,38,0.94); }
html[data-theme="bronze"] .note { background:rgba(43,50,38,0.96); }
html[data-theme="bronze"] .note::after { background:rgba(43,50,38,0.96); }