/* ====================================================================
   十二星座大全 /zodiac、/zodiac/{slug}(2026-10-28)
   兩種外觀:
     - 星座宇宙夜空(html.theme-astro,App\Support\AstroTheme::PAGES 收 library.zodiac*):深靛 + 星光金 + 極光青
     - 宣紙版(astrology.theme=classic):沿用全站紙色、墨色、金色
   顏色一律走下面的 --zl-* 變數,夜空版只覆寫變數。元素色:火 / 土 / 風 / 水。
   靜態檔(免 build);頁面用 filemtime 當 ?v=。
   ==================================================================== */

.zl {
  --zl-gold: #8A6A2E;
  --zl-gold-soft: rgb(150 112 44 / .14);
  --zl-line: rgb(150 112 44 / .26);
  --zl-line-2: rgb(150 112 44 / .42);
  --zl-panel: rgb(255 252 244 / .72);
  --zl-panel-2: rgb(247 241 226 / .9);
  --zl-ink: var(--color-ink-900, #1C1913);
  --zl-ink-2: var(--color-ink-700, #3E372B);
  --zl-ink-3: var(--color-ink-500, #6F6450);
  --zl-accent: #A33A2E;
  --zl-el: #8A6A2E;
}
.zl .zl-el-fire, .zl.zl-el-fire, .zl-article.zl-el-fire { --zl-el: #B4532A; }
.zl .zl-el-earth, .zl-article.zl-el-earth { --zl-el: #87672A; }
.zl .zl-el-air, .zl-article.zl-el-air { --zl-el: #4E5F9A; }
.zl .zl-el-water, .zl-article.zl-el-water { --zl-el: #2F62A8; }

html.theme-astro .zl {
  --zl-gold: #e9c77b;
  --zl-gold-soft: rgba(233, 199, 123, .1);
  --zl-line: rgba(233, 199, 123, .2);
  --zl-line-2: rgba(233, 199, 123, .38);
  --zl-panel: rgba(21, 28, 69, .66);
  --zl-panel-2: rgba(27, 36, 84, .72);
  --zl-ink: #ecebf4;
  --zl-ink-2: #d3d6e8;
  --zl-ink-3: #aeb6da;
  --zl-accent: #5ed6c4;
}
html.theme-astro .zl .zl-el-fire, html.theme-astro .zl-article.zl-el-fire { --zl-el: #F0906A; }
html.theme-astro .zl .zl-el-earth, html.theme-astro .zl-article.zl-el-earth { --zl-el: #D9BC7E; }
html.theme-astro .zl .zl-el-air, html.theme-astro .zl-article.zl-el-air { --zl-el: #BCC8F0; }
html.theme-astro .zl .zl-el-water, html.theme-astro .zl-article.zl-el-water { --zl-el: #6FA0F0; }

/* ---- layout ---- */
.zl-article { max-width: 46rem; }
.zl-index { max-width: 64rem; }
.zl-article-hub { max-width: 46rem; margin: 0 auto; }
.zl [data-toc] { scroll-margin-top: 6.5rem; }
.zl img { max-width: 100%; height: auto; }
.zl-glyph, .zl-mini { display: inline-block; flex: none; }
.zl-nb { display: inline-block; }
.zl-mini { width: 1.15em; height: 1.15em; vertical-align: -.2em; }

.zl-kicker { margin: 0 0 .6rem; font-size: .8125rem; letter-spacing: .2em; color: var(--zl-gold); }
.zl-el-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--zl-el); margin-right: .4rem; vertical-align: .1em; box-shadow: 0 0 0 3px color-mix(in srgb, var(--zl-el) 22%, transparent); }

/* ---- sign hero ---- */
.zl-hero { display: flex; flex-direction: column-reverse; align-items: center; gap: 1.25rem; text-align: center; margin-bottom: 1.5rem; }
.zl-hero h1 { margin: 0; font-size: clamp(1.6rem, 6.4vw, 2.4rem); line-height: 1.3; color: var(--zl-ink); letter-spacing: .04em; }
.zl-hero-en { margin: .7rem 0 0; font-size: .9rem; letter-spacing: .14em; color: var(--zl-ink-3); }
.zl-hero-en span { margin-left: .9rem; letter-spacing: .06em; }
.zl-medal { position: relative; flex: none; width: 168px; height: 168px; border-radius: 9999px; display: grid; place-items: center;
  color: var(--zl-el);
  background:
    radial-gradient(circle at 50% 50%, transparent 58%, var(--zl-line) 58.5%, transparent 59.5%),
    radial-gradient(circle at 50% 50%, var(--zl-gold-soft), transparent 70%);
  border: 1px solid var(--zl-line-2);
  box-shadow: inset 0 0 0 6px transparent, inset 0 0 0 7px var(--zl-line);
}
.zl-medal::before { content: ""; position: absolute; inset: -9px; border-radius: inherit; border: 1px dashed var(--zl-line); }
.zl-medal .zl-glyph { width: 74px; height: 74px; }
.zl-medal.has-img { width: 188px; height: 188px; overflow: visible; }
.zl-medal.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.zl-medal.has-img .zl-medal-glyph { position: absolute; right: -4px; bottom: 4px; width: 50px; height: 50px; border-radius: 9999px; display: grid; place-items: center;
  background: var(--color-paper-50, #FBF8F1); border: 1px solid var(--zl-line-2); }
.zl-medal.has-img .zl-glyph { width: 28px; height: 28px; }
html.theme-astro .zl-medal.has-img .zl-medal-glyph { background: #101633; }
html.theme-astro .zl-medal { box-shadow: 0 0 40px -6px color-mix(in srgb, var(--zl-el) 35%, transparent), inset 0 0 0 7px rgba(233, 199, 123, .14); }

@media (min-width: 768px) {
  .zl-hero { flex-direction: row; justify-content: space-between; text-align: left; gap: 2rem; }
  .zl-medal { width: 196px; height: 196px; }
  .zl-medal.has-img { width: 220px; height: 220px; }
  .zl-medal .zl-glyph { width: 86px; height: 86px; }
}

/* ---- facts ---- */
.zl-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--zl-line); border-radius: 1rem; overflow: hidden; background: var(--zl-panel); }
.zl-facts > div { padding: .75rem 1rem; border-bottom: 1px solid var(--zl-line); min-width: 0; }
.zl-facts > div:nth-child(odd) { border-right: 1px solid var(--zl-line); }
.zl-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.zl-facts dt { font-size: .75rem; letter-spacing: .16em; color: var(--zl-gold); }
.zl-facts dd { margin: .2rem 0 0; font-size: 15px; line-height: 1.5; color: var(--zl-ink); }
.zl-facts dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--zl-line-2); text-underline-offset: 3px; }
@media (min-width: 768px) {
  .zl-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zl-facts > div { border-right: 1px solid var(--zl-line); border-bottom: 1px solid var(--zl-line); }
  .zl-facts > div:nth-child(3n) { border-right: 0; }
  .zl-facts > div:nth-last-child(-n+3) { border-bottom: 0; }
}
.zl-date-note { margin: .65rem .25rem 0; font-size: .8125rem; line-height: 1.7; color: var(--zl-ink-3); }
.zl-date-note .zl-more { display: inline; white-space: normal; } /* 這裡是一整句連結,不換行的話手機會超出畫面 */

/* ---- key summary ---- */
.zl-key { margin-top: 2rem; padding: 1rem 1.15rem; border-radius: 1rem; border: 1px solid var(--zl-line); background: var(--zl-panel-2); }
.zl-key-label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .18em; color: var(--zl-gold); }
.zl-key-label svg, .zl-key-label i { width: .9rem; height: .9rem; }
.zl-key > p:not(.zl-key-label) { margin: 0; font-size: 16px; line-height: 1.85; color: var(--zl-ink); }
.zl-tags { list-style: none; margin: .85rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.zl-tags li { font-size: .8125rem; padding: .2rem .7rem; border-radius: 9999px; border: 1px solid var(--zl-line-2); color: var(--zl-ink-2); }
@media (min-width: 768px) { .zl-key { padding: 1.25rem 1.5rem; } }

/* ---- toc ---- */
.zl-toc { margin-top: 1.75rem; border: 1px solid var(--zl-line); border-radius: 1rem; padding: .85rem 1.15rem; }
.zl-toc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .875rem; letter-spacing: .14em; color: var(--zl-gold); }
.zl-toc > summary::-webkit-details-marker { display: none; }
.zl-toc > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.zl-toc[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.zl-toc ol { margin: .75rem 0 .15rem; padding-left: 1.4rem; list-style: decimal; font-size: .9rem; line-height: 1.85; color: var(--zl-ink-2); }
.zl-toc a { color: inherit; text-decoration: none; }
.zl-toc a:hover { color: var(--zl-gold); text-decoration: underline; }
.zl-toc ol li::marker { color: var(--zl-gold); font-size: .8em; }

/* ---- prose ---- */
.zl-sec { margin-top: 2.5rem; }
.zl-prose > h2 { position: relative; }
.zl .zl-prose { max-width: none; margin-inline: 0; font-size: 16px; line-height: 1.95; }
@media (min-width: 768px) { .zl .zl-prose { font-size: 17px; } }
.zl .prose-xuandeng > p:first-of-type { font-size: inherit; line-height: inherit; color: inherit; padding: 0; border: 0; font-weight: inherit; margin: 0 0 1.15rem; }
html.theme-astro .zl .prose-xuandeng { color: var(--zl-ink-2); }
html.theme-astro .zl .prose-xuandeng h2 { color: var(--zl-ink); }

/* 太陽 / 月亮 / 上升 三張卡 */
.zl-subs { display: grid; gap: .9rem; margin-top: 1.25rem; }
.zl-sub { border: 1px solid var(--zl-line); border-radius: 1rem; padding: 1rem 1.1rem; background: var(--zl-panel); }
.zl-sub h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-size: 1.1rem; line-height: 1.45; color: var(--zl-ink); }
.zl-sub-icon { flex: none; width: 2rem; height: 2rem; border-radius: 9999px; display: grid; place-items: center; color: var(--zl-gold); border: 1px solid var(--zl-line-2); }
.zl-sub-moon .zl-sub-icon { color: var(--zl-ink-2); }
.zl-sub-rising .zl-sub-icon { color: var(--zl-accent); }
.zl-sub p { margin: 0 0 .75rem; font-size: 15.5px; line-height: 1.9; color: var(--zl-ink-2); }
.zl-sub p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .zl-sub { padding: 1.2rem 1.4rem; } }

/* 相處:同元素 / 對宮 / 感情服務 */
.zl-compat { margin-top: 1.1rem; border-top: 1px solid var(--zl-line); }
.zl-compat-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; padding: .7rem 0; border-bottom: 1px solid var(--zl-line); }
.zl-compat-k { flex: none; width: 5.5rem; font-size: .8125rem; letter-spacing: .12em; color: var(--zl-gold); }
.zl-compat-v { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.zl-compat-v a { font-size: .875rem; padding: .2rem .75rem; border-radius: 9999px; border: 1px solid var(--zl-line-2); color: var(--zl-ink); text-decoration: none; }
.zl-compat-v a:hover { border-color: var(--zl-gold); color: var(--zl-gold); }

/* ---- prev / next + others ---- */
.zl-pn { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--zl-line); }
.zl-pn a { display: inline-flex; align-items: center; gap: .6rem; color: var(--zl-ink); text-decoration: none; min-width: 0; }
.zl-pn a .zl-mini { width: 1.6rem; height: 1.6rem; color: var(--zl-gold); }
.zl-pn small { display: block; font-size: .75rem; color: var(--zl-ink-3); letter-spacing: .1em; }
.zl-pn .is-next { text-align: right; }
.zl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.zl-sec-head h2 { margin: 0; }
.zl-more { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; color: var(--zl-gold); text-decoration: none; white-space: nowrap; }
.zl-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.zl-mini-grid a { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .25rem; border-radius: .85rem; border: 1px solid var(--zl-line); color: var(--zl-ink-2); text-decoration: none; font-size: .8125rem; background: var(--zl-panel); transition: border-color .2s, transform .2s; }
.zl-mini-grid a .zl-mini { width: 1.6rem; height: 1.6rem; color: var(--zl-el); }
.zl-mini-grid a:hover { border-color: var(--zl-gold); transform: translateY(-2px); }
.zl-mini-grid a.is-rel { border-color: var(--zl-line-2); }
@media (min-width: 640px) { .zl-mini-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- sources ---- */
.zl-src ul { margin: 0 0 1rem; padding-left: 1.2rem; list-style: disc; font-size: .875rem; line-height: 1.85; color: var(--zl-ink-2); }
.zl-note { font-size: .8125rem; line-height: 1.8; color: var(--zl-ink-3); margin: 0; }

/* ---- index ---- */
.zl-index-head { text-align: center; margin-bottom: 1.75rem; }
.zl-index-head h1 { margin: 0; font-size: clamp(1.75rem, 7vw, 2.6rem); line-height: 1.3; color: var(--zl-ink); letter-spacing: .06em; }
.zl-lead { max-width: 40rem; margin: 1rem auto 0; font-size: 16px; line-height: 1.9; color: var(--zl-ink-2); text-align: left; }
.zl-cover { margin: 1.5rem 0 0; border-radius: 1rem; overflow: hidden; border: 1px solid var(--zl-line); }
.zl-cover img { display: block; width: 100%; aspect-ratio: 12 / 5; object-fit: cover; }
html.theme-astro .zl-cover { box-shadow: 0 24px 50px -30px rgba(2, 4, 16, .9); }
html.theme-astro .zl-cover img { filter: saturate(.9) brightness(.92); }
@media (min-width: 768px) { .zl-lead { text-align: center; } }

.zl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 2rem; }
.zl-cell { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: .85rem .3rem .75rem; border-radius: 1rem;
  border: 1px solid var(--zl-line); background: var(--zl-panel); color: var(--zl-ink); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; min-width: 0; }
.zl-cell .zl-glyph { width: 2.1rem; height: 2.1rem; color: var(--zl-el); margin-bottom: .25rem; }
.zl-cell strong { font-size: .95rem; font-weight: 700; letter-spacing: .04em; }
.zl-cell small { font-size: .75rem; color: var(--zl-ink-3); letter-spacing: .02em; }
.zl-cell em { font-style: normal; font-size: .6875rem; color: var(--zl-ink-3); margin-top: .1rem; display: none; }
a.zl-cell:hover { border-color: var(--zl-gold); transform: translateY(-2px); box-shadow: 0 14px 26px -18px color-mix(in srgb, var(--zl-el) 70%, transparent); }
.zl-cell.is-off { opacity: .55; }
@media (min-width: 640px) { .zl-cell em { display: block; } }
@media (min-width: 768px) { .zl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .zl-cell .zl-glyph { width: 2.5rem; height: 2.5rem; } }
@media (min-width: 1024px) { .zl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.zl-table-wrap { margin-top: 1.1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--zl-line); border-radius: 1rem; background: var(--zl-panel); }
.zl-table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.5; color: var(--zl-ink-2); }
.zl-table caption { caption-side: top; text-align: left; padding: .75rem 1rem .25rem; font-size: .75rem; letter-spacing: .14em; color: var(--zl-gold); }
.zl-table th, .zl-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--zl-line); text-align: left; white-space: nowrap; }
.zl-table thead th { font-size: .75rem; letter-spacing: .1em; color: var(--zl-ink-3); font-weight: 600; }
.zl-table tbody tr:last-child > * { border-bottom: 0; }
.zl-table tbody th { font-weight: 700; color: var(--zl-ink); }
.zl-table tbody th a { color: inherit; text-decoration: none; }
.zl-table tbody th a:hover { color: var(--zl-gold); }
.zl-table tbody th .zl-mini { color: var(--zl-el); margin-right: .35rem; }
@media (max-width: 420px) { .zl-table th, .zl-table td { padding: .55rem .5rem; font-size: .8125rem; } .zl-table td:last-child { white-space: normal; } }

.zl-cards { display: grid; gap: .75rem; margin-top: 1.1rem; }
.zl-card { border: 1px solid var(--zl-line); border-radius: 1rem; padding: 1rem 1.1rem; background: var(--zl-panel); }
.zl-card-k { margin: 0; font-weight: 700; font-size: 1rem; color: var(--zl-ink); }
.zl-card-gist { margin: .35rem 0 .6rem; font-size: .875rem; line-height: 1.7; color: var(--zl-ink-3); }
.zl-card-links { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.zl-card-links a { font-size: .875rem; padding: .15rem .7rem; border-radius: 9999px; border: 1px solid var(--zl-line-2); color: var(--zl-ink); text-decoration: none; }
.zl-card-links a:hover { border-color: var(--zl-gold); color: var(--zl-gold); }
@media (min-width: 640px) { .zl-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zl-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* CTA 卡在夜空版:深靛面板 + 金框 */
html.theme-astro .zl aside.card-paper { background: linear-gradient(180deg, rgba(24, 33, 78, .92), rgba(14, 19, 50, .94)); border-color: rgba(233, 199, 123, .32); box-shadow: inset 0 0 0 1px rgba(233, 199, 123, .14), 0 26px 50px -32px rgba(2, 4, 16, .95); }
html.theme-astro .zl aside.card-paper .bg-cinnabar\/10 { background: rgba(94, 214, 196, .12); }
html.theme-astro .zl aside.card-paper .text-cinnabar { color: #5ed6c4; }

/* 浮動鈕在夜空版:靛藍膠囊 + 極光青印 */
html.theme-astro #xd-start-fab a { color: #ecebf4; background: linear-gradient(135deg, #1f2c63 0%, #141b45 55%, #0c1130 100%); border-color: rgba(233, 199, 123, .6); }
html.theme-astro #xd-start-fab .xsf-seal { color: #0b1030; background: linear-gradient(135deg, #7fe6d6 0%, #5ed6c4 55%, #34a99a 100%); }
html.theme-astro #xd-start-fab .xsf-kicker { color: #e9c77b; }

/* ---- 寬螢幕(≥1280):wide-layout.css 把參考資料頁容器放寬;長文維持好讀的行長,左邊留給 wide-toc.js 的目錄 ---- */
@media (min-width: 1280px) {
  body[data-page^="library."] .w-full.min-w-0.mx-auto.zl-article { max-width: 48rem; margin-left: max(18rem, calc(50% - 16.5rem)); margin-right: auto; }
  body[data-page^="library."] .w-full.min-w-0.mx-auto.zl-index { max-width: 76rem; }
  .zl-index .zl-article-hub { max-width: 48rem; margin-left: max(17rem, calc(50% - 16.5rem)); margin-right: auto; }
  .xd-toc-on .zl-toc { display: none; }
}