/* 肖運堂：新中式淺色大字版（docs/spec.md 第 5 節）。手機優先；區塊只管自己直屬元素，元件樣式由元件 class 決定 */
:root {
  --paper: #F2F1EC; --card: #FFFEFA; --line: #CFD3CC; --line-soft: #E3E5DE;
  --ink: #1A1814; --ink-2: #3E3A33; --ink-3: #5A554B;
  /* 主色黛青；朱砂只留給印章、日期數字、大吉（D32）*/
  --main: #2F4A4F; --main-dark: #1F3438; --zhu: #A33224; --zhu-dark: #8A2A1E; --teal: #2F4A4F; --gold: #8C6E2E;
  --radius: 12px; --gap: 16px;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  font-size: 100%;
}
html[data-size="xl"] { font-size: 112.5%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.1875rem; line-height: 1.75; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--main); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.35; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: 2.125rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 .75em; }
strong { color: var(--ink); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 16px; z-index: 50; }
.skip:focus { left: 8px; }

/* 按鈕 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 24px; border-radius: 10px; border: 2px solid transparent; font: 700 1.125rem/1.3 var(--sans); text-decoration: none; cursor: pointer; text-align: center; }
.btn-primary { background: var(--main); color: #fff; }
.btn-primary:hover { background: var(--main-dark); color: #fff; }
.btn-line { background: var(--card); border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: #fff; color: var(--main); border-color: var(--main); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #22383c; color: #fff; }
.btn-ghost-light { background: transparent; border-color: #F2ECDF; color: #F2ECDF; min-height: 52px; }
.btn-block { display: flex; width: 100%; }

/* 頁首 */
.site-head { background: var(--paper); border-bottom: 1.5px solid var(--line); position: sticky; top: 0; z-index: 20; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 72px; }
.nav-wide { display: none; }
.head-tools { display: flex; gap: 6px; align-items: center; }
.btn-size { min-height: 52px; min-width: 60px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink); font: 700 1.0625rem/1 var(--sans); cursor: pointer; }
.btn-size[aria-pressed="true"] { background: var(--ink); color: #fff; }
.menu { position: relative; }
.btn-menu { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 12px; border-radius: 8px; background: var(--ink); color: #fff; font: 700 1.0625rem/1 var(--sans); cursor: pointer; }
.btn-menu::-webkit-details-marker { display: none; }
/* 「選單・設定」面板：上方閱讀設定、下方頁面連結；太長時面板內自己捲 */
.menu-panel { position: absolute; right: 16px; top: calc(100% + 8px); z-index: 30; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(26, 24, 20, .15); }
.menu-nav { display: flex; flex-direction: column; padding: 8px; }
.menu-nav > a { display: flex; align-items: center; min-height: 54px; padding: 0 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 1.1875rem; font-weight: 500; }
.menu-nav > a:hover { background: var(--line-soft); }
.menu-group { margin: 10px 14px 2px; font-size: .9375rem; font-weight: 700; color: var(--ink-3); letter-spacing: 2px; }
.menu-group:first-child { margin-top: 4px; }
.menu-nav > a[aria-current] { color: var(--main); font-weight: 700; background: var(--line-soft); }

/* 國曆／農曆切換：兩種都輸出，依 html[data-cal] 顯示一種 */
.cal-l { display: none; }
html[data-cal="lunar"] .cal-s { display: none; }
html[data-cal="lunar"] .cal-l { display: inline; }
.cal-hint { font-size: 1rem; color: var(--ink-3); }
@media (max-width: 400px) {
  .btn-size { min-width: 52px; padding: 0 8px; }
  .btn-menu { padding: 0 10px; }
}
/* 窄螢幕：按鈕縮成「選單」，保留站名文字（D58） */
@media (max-width: 400px) { .menu-set { display: none; } }

/* 麵包屑 */
.crumb { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 0; font-size: 1rem; color: var(--ink-3); }
.crumb a { color: var(--ink-2); }

/* 共用區塊 */
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 0 0 var(--gap); }
.card > h2 { font-size: 1.375rem; }
.sec { margin: 40px 0 0; }
.sec > h2 { font-size: 1.625rem; }
.sec-lead { color: var(--ink-2); }
.mt { margin-top: 32px; }
.kicker { color: var(--main); font-weight: 700; letter-spacing: 1px; margin: 0 0 6px; font-size: 1.0625rem; }
.lead { font-size: 1.1875rem; color: var(--ink-2); line-height: 1.8; }
.page-head { padding: 24px 0 8px; }
/* 青綠山水（Codex 產，肖運堂專用）：頁首標題區底部淡淡一條、頁尾上方一排遠山；白色以 multiply 融進底色，左右淡出 */
.page-head { position: relative; padding-bottom: clamp(56px, 11vw, 132px); }
.page-head::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 4px; height: clamp(48px, 10vw, 124px); background: url(../img/ink/band-v1.webp) center bottom / cover no-repeat; opacity: .5; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); pointer-events: none; }
.page-head > h1 { margin-bottom: .35em; }
.more-link { display: inline-flex; align-items: center; min-height: 52px; font-weight: 700; color: var(--teal); }
.more-link a { color: var(--teal); }
.demo-note { background: #FFF6E0; border: 1.5px dashed #C9A55A; border-radius: 10px; padding: 10px 14px; font-size: 1rem; color: #5C4410; }
.alert { background: #FBEAE7; border: 2px solid var(--zhu); border-radius: 10px; padding: 12px 16px; color: var(--zhu-dark); font-weight: 700; }
.note { color: var(--ink-2); } /* D81：註解不加框，金色左邊線只留給古書引文（.bz-quote） */
.warn { color: var(--main); }

/* 等級標籤 */
.lv { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 10px; border-radius: 6px; font: 700 1rem/1.3 var(--sans); white-space: nowrap; vertical-align: middle; }
/* 等級配色：好運實心（大吉朱紅、吉金褐），平淺灰、宜謹慎藍灰；犯太歲標籤用深青，和等級分開 */
.lv-4 { background: var(--zhu); color: #fff; }
.lv-3 { background: #2E6A3E; color: #fff; }
.lv-2 { background: #ECEBE7; color: #4A4A48; border: 1.5px solid #C6C4BD; }
.lv-1 { background: #E4EAF0; color: #34495C; border: 1.5px solid #9FB1C2; }
.tag { display: inline-block; padding: 1px 10px; border-radius: 6px; background: var(--main); color: #fff; font-size: 1rem; font-weight: 700; }
.tag-sub { background: transparent; color: var(--main); border: 1.5px solid var(--main); }

.hero-me { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; font-weight: 700; font-size: 1.1875rem; }
.hero-me > a { font-weight: 500; font-size: 1rem; }
/* 首頁回訪者（記住生肖）：表單收成按鈕、今日提醒放在今日日曆上面 */
.hero-change { min-height: 48px; padding: 0 16px; margin-left: 4px; border: 1.5px solid var(--main); border-radius: 999px; background: var(--card); color: var(--main); font: 700 1.0625rem/1.2 var(--sans); cursor: pointer; }
.hero-change:hover, .hero-change[aria-expanded="true"] { background: var(--main); color: #fff; }
.hero.is-known > .hero-cal { display: flex; flex-direction: column; }
.hero.is-known .hero-cal > .daily { order: -1; margin-top: 0; }
.hero.is-known .hero-cal > .lcal { margin-top: 24px; }
.hero-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.split { display: grid; gap: 12px; }

/* 年節祭祀 */
.bb-next { border-color: var(--main); }
.bb-next > p { margin: 0; }
.bb-next > .bb-next-k { color: var(--main); font-weight: 700; font-size: 1rem; }
.bb-next > .bb-next-name { font: 700 1.625rem/1.4 var(--serif); }
.bb-next > .bb-next-date { font-weight: 700; margin-bottom: 6px; }
.bb-next > .bb-next-note { color: var(--ink-2); }
.bb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.bb-month { margin: 28px 0 0; }
.bb-month > h2 { font-size: 1.5rem; padding-bottom: 6px; border-bottom: 1.5px solid var(--line); margin-bottom: 0; }
.bblist { list-style: none; margin: 0; padding: 0; }
.bblist > li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
.bblist > li[hidden] { display: none; }
.bblist .bb-date { flex: 0 0 64px; display: grid; text-align: center; line-height: 1.3; padding-top: 2px; }
.bblist .bb-date > b { font: 700 1.375rem/1.2 var(--serif); }
.bblist .bb-date > span { font-size: 1rem; color: var(--ink-3); }
.bblist .bb-body { flex: 1 1 auto; min-width: 0; }
.bblist .bb-body > p { margin: 0; }
.bblist .bb-name { font-weight: 700; font-size: 1.1875rem; }
.bblist .bb-lunar { font-size: 1rem; color: var(--ink-3); }
.bblist .bb-note { color: var(--ink-2); margin-top: 4px; }
.bblist > .bb-fest .bb-name { font-family: var(--serif); font-size: 1.3125rem; color: var(--main-dark); }
.bblist > .bb-today { background: #FFF6E6; margin: 0 -12px; padding: 12px; border-radius: 8px; }
.bb-howto { margin-top: 32px; }

/* 國定假日與連假（D62） */
.hd-years { margin: 20px 0 0; }
.hd-years > a > small { margin-left: 4px; font-size: .8125rem; font-weight: 400; }
.hd-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.hd-jump > a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; }
.hd-list .bb-lunar > a { white-space: nowrap; }
.bblist > .hd-makeup .bb-name { color: var(--ink-2); }
.hd-plain { padding-left: 1.2em; }
.hd-plain > li { margin: 6px 0; }
.hd-break { padding: 0; margin: 12px 0 0; }
.hd-break > summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; min-height: 64px; padding: 12px 18px; cursor: pointer; }
.hd-break-d { font: 700 1.1875rem/1.4 var(--serif); }
.hd-break-n { grid-row: span 2; align-self: center; color: var(--main-dark); white-space: nowrap; }
.hd-break-n > b { font: 700 1.75rem/1 var(--serif); }
.hd-break-w { font-size: 1rem; color: var(--ink-3); }
.hd-days { list-style: none; margin: 0; padding: 0 18px 8px; border-top: 1px solid var(--line-soft); }
.hd-days > li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.hd-days > li:last-child { border-bottom: 0; }
.hd-days p { margin: 0; }
.hd-day-h { font-size: 1.0625rem; }
.hd-day-yi { color: var(--ink-2); margin-top: 4px !important; }
.hd-months { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.hd-month { margin: 0; }
.hd-month > h3 { margin: 0 0 4px; font-size: 1.3125rem; }
.hd-month > p { margin: 0; }
.hd-month-n { color: var(--ink-3); font-size: 1rem; }
.hd-month-n > b { color: var(--main-dark); font-size: 1.1875rem; }
.hd-month-d { font-size: 1.0625rem; margin-top: 4px !important; }
.hd-ics .hd-feed-k { display: block; font-weight: 700; margin-top: 12px; }
.hd-ics .hd-feed { width: 100%; min-height: 52px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; font: 1rem/1.4 var(--sans); background: var(--paper); }
.hd-how { margin: 12px 0; }
.hd-how > summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; }
.hd-src { margin-top: 24px; font-size: 1rem; color: var(--ink-3); }

/* 每日農民曆 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.day-head > h1 { margin-bottom: .2em; }
.day-head .day-week { display: block; font: 700 1.25rem/1.4 var(--sans); color: var(--ink-2); }
.day-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "prev next" "pick pick" "today today"; gap: 10px; margin: 8px 0 20px; }
.day-nav > .day-prev { grid-area: prev; }
.day-nav > .day-next { grid-area: next; }
.day-nav > .day-pick { grid-area: pick; }
.day-nav > .day-today { grid-area: today; }
.day-nav > .btn { min-height: 52px; padding: 0 16px; }
.day-pick { display: flex; gap: 8px; }
.day-pick > input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 12px; border: 2px solid #8C8273; border-radius: 10px; background: #fff; font: 1.125rem var(--sans); color: var(--ink); }
.day-pick > .btn { min-height: 52px; padding: 0 16px; }
.day-today { font-weight: 700; }
.day-bb { display: grid; gap: 2px; border-color: var(--main); color: var(--ink); text-decoration: none; }
.day-bb > strong { font: 700 1.25rem/1.4 var(--serif); color: var(--main); }
.day-bb > .day-bb-more { color: var(--teal); font-size: 1rem; text-align: right; }
.yiji { display: grid; gap: 12px; }
.yiji-box > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.yiji-box .yiji-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: #fff; font: 700 1.5rem/1 var(--serif); }
.yiji-yi { border-color: var(--main); }
.yiji-yi .yiji-mark { background: var(--main); }
.yiji-ji .yiji-mark { background: var(--ink-3); }
.yiji-list { display: grid; gap: 0; margin: 0; }
.yiji-list > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.yiji-list dt { font: 700 1.25rem/1.5 var(--serif); }
.yiji-list dd { margin: 0; color: var(--ink-2); line-height: 1.6; padding-top: 2px; }
.day-grid { display: grid; gap: 12px; margin-top: 4px; }
.day-grid > .card > h2 { font-size: 1.25rem; }
.day-chong-row { display: flex; gap: 12px; align-items: flex-start; }
.day-chong-row > img { flex: 0 0 auto; width: 72px; height: 72px; }
.day-chong-row p { margin: 0 0 6px; }
.day-chong-row .day-age { font-weight: 700; color: var(--main-dark); }
.day-big { font: 700 1.375rem/1.4 var(--serif); }
.day-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; text-align: center; }
.day-kv > div { background: var(--paper); border-radius: 8px; padding: 8px 4px; }
.day-kv dt { font-size: 1rem; color: var(--ink-3); }
.day-kv dd { margin: 0; font: 700 1.375rem/1.4 var(--serif); }
.day-note { font-size: 1rem; color: var(--ink-3); margin: 0; }
.hours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hours > li { display: grid; text-align: center; padding: 10px 4px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); margin: 0; line-height: 1.4; }
.hours b { font: 700 1.25rem/1.3 var(--serif); }
.hours span { font-size: 1rem; color: var(--ink-3); }
.hours em { font-style: normal; font-weight: 700; font-size: 1rem; }
.hours > .h-good { border-color: var(--main); }
.hours > .h-good em { color: var(--main); }
.hours > .h-bad { background: var(--paper); }
.hours > .h-bad em { color: var(--ink-3); }
.pengzu { font: 700 1.25rem/1.8 var(--serif); }
.day-src { font-size: 1rem; color: var(--ink-3); margin-top: 16px; }

/* 查生肖表單 */
.more { margin-top: 12px; }
.more > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--teal); font-weight: 700; }
/* 月日：標籤在上、兩欄等寬，下拉和年份輸入框同高同框線；自畫箭頭取代各瀏覽器不一致的原生樣式 */
.md-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 16px; }
.md-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.md-row select { -webkit-appearance: none; appearance: none; width: 100%; height: 58px; padding: 0 44px 0 16px; border: 2px solid #8C8273; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232F4A4F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; font: 1.25rem var(--sans); color: var(--ink); cursor: pointer; }
.md-row select:hover { border-color: var(--teal); }
.md-row select:has(option[value=""]:checked) { color: var(--ink-3); }
.md-row select option { color: var(--ink); }
.basis { border: 0; padding: 0; margin: 8px 0 0; }
.basis legend { font-size: 1.0625rem; color: var(--ink-2); margin-bottom: 4px; }
.basis label { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 1.125rem; }
.basis input { width: 24px; height: 24px; accent-color: var(--main); }

/* 查詢結果 */
.result { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; border-color: var(--main); border-width: 2px; }
.result > img { width: 140px; height: auto; margin: 0 auto; }
.result > div { flex: 1 1 min(300px, 100%); }
.result-year { color: var(--ink-2); margin: 0; }
.result-main { font: 700 2rem/1.4 var(--serif); margin: 0 0 8px; }
.result-main strong { color: var(--main); }

/* 閏月勾選、國農曆換算 */
.md-row .leap { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 14px; border: 2px solid var(--line); border-radius: 10px; background: #fff; font-size: 1.125rem; color: var(--ink); cursor: pointer; }
.md-row .leap:has(input:checked) { border-color: var(--main); background: #FFF5EC; font-weight: 700; }
.md-row .leap input { width: 24px; height: 24px; margin: 0; accent-color: var(--main); }
/* 年份輸入防呆提示（app.js 產生） */
.field-msg { margin: 6px 0 0; font-size: 1rem; font-weight: 700; color: var(--zhu-dark); }
.lookup input.is-invalid { border-color: var(--zhu); background: #FFF6F4; }
/* 自製月日選單（app.js 把 .md-f > select 換成按鈕＋選項格；沒有 JS 時維持上面的原生下拉） */
.md-f { position: relative; }
.md-f > label { font-size: 1.0625rem; color: var(--ink-2); }
.md-f > .pick-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 58px; opacity: 0; pointer-events: none; }
.pick-btn { display: flex; align-items: center; width: 100%; height: 58px; padding: 0 44px 0 16px; border: 2px solid #8C8273; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232F4A4F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; font: 700 1.25rem var(--sans); color: var(--ink); text-align: left; cursor: pointer; }
.pick-btn.is-empty { font-weight: 400; color: var(--ink-3); }
.pick-btn:hover, .md-f.is-open > .pick-btn { border-color: var(--teal); }
.md-f.is-open > .pick-btn { box-shadow: 0 0 0 3px rgba(47, 74, 79, .18); }
.md-f.is-invalid > .pick-btn { border-color: var(--zhu); background-color: #FFF6F4; }
.md-f.is-invalid::after { content: "還沒選"; font-size: 1rem; font-weight: 700; color: var(--zhu-dark); }
.pick-panel { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: max-content; max-width: min(440px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 12px 32px rgba(26, 24, 20, .18); }
.md-f:nth-child(2) > .pick-panel { left: auto; right: 0; }
.pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px 4px; }
.pick-head > p { margin: 0; font: 700 1.125rem/1.3 var(--serif); color: var(--main); }
.pick-x { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: 700 1rem var(--sans); color: var(--teal); cursor: pointer; }
.pick-x:hover { background: #EFE8D8; }
.pick-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(54px, 1fr)); gap: 6px; }
.pick-opt { min-height: 52px; padding: 0 6px; border: 1.5px solid var(--line-soft); border-radius: 10px; background: #fff; font: 1.1875rem/1 var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.pick-opt:hover { border-color: var(--teal); background: #F4F7F6; }
.pick-opt[aria-selected="true"] { border-color: var(--main); background: var(--main); color: #fff; font-weight: 700; }
.pick-opt:focus-visible { outline: 3px solid var(--zhu); outline-offset: 1px; }
/* 手機：從底部滑出的面板，背後蓋一層暗色 */
@media (max-width: 639px) {
  .pick-panel { position: fixed; top: auto !important; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 75vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 0 0 100vmax rgba(26, 24, 20, .45); animation: pick-up .18s ease-out; }
  .md-f:nth-child(2) > .pick-panel { left: 0; right: 0; }
  .pick-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .pick-grid.is-days { --cols: 6 !important; }
  .pick-opt { min-height: 54px; padding: 0 2px; }
}
@keyframes pick-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pick-panel { animation: none; } }
.conv-forms { display: grid; gap: var(--gap); }
.conv-forms .lookup > h2 { font-size: 1.375rem; }
.conv-line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 1.25rem; margin-bottom: 10px; }
.conv-k { display: inline-grid; place-items: center; min-width: 3.2em; padding: 0 8px; border-radius: 6px; background: var(--teal); color: #fff; font-size: 1rem; font-weight: 700; }
.conv-result .btn { margin-top: 8px; }
@media (min-width: 900px) { .conv-forms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 12 生肖格 */

/* 犯太歲名單 */
.taisui { list-style: none; margin: 0 0 8px; padding: 0; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.taisui li + li { border-top: 1.5px solid var(--line-soft); }
.taisui a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.taisui a:hover { background: #fff; }
.taisui .zodiac-img { width: 64px; height: 64px; flex: none; }
.ts-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.ts-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ts-name { font: 700 1.5rem/1.2 var(--serif); }
.ts-years { color: var(--ink-2); font-size: 1.0625rem; }

/* 文章卡 */
.alist { display: grid; gap: 14px; }
.acard { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px; }
.acard:hover { border-color: var(--main); color: var(--ink); }
.acover { flex: none; width: 92px; height: 92px; border-radius: 10px; background: var(--line-soft); display: grid; place-items: center; overflow: hidden; }
.acover > img { width: 88px; height: 88px; object-fit: contain; }
.abody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.atitle { font: 700 1.1875rem/1.45 var(--serif); }
.asum { font-size: 1rem; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 安裝卡 */
.install-card { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 40px; }
.install-card > img { margin: 0 auto; }
.install-card > div { flex: 1 1 min(320px, 100%); }

/* 流年個別頁 */
.legend-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.legend-list .lv { margin-right: 6px; }

/* 壽伯小叮嚀 */

/* 每月運勢 */
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mlist > li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.mlist .zodiac-img { width: 72px; height: 72px; }
.ml-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.ml-name { font: 700 1.3125rem/1.3 var(--serif); }
.mlist p:last-child { margin: 0; }

/* 分頁 */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 28px 0 0; flex-wrap: wrap; }
.pager a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; }

/* 犯太歲名詞與 FAQ */
.terms { display: grid; gap: 10px; margin: 0; }
.terms dt { font: 700 1.1875rem/1.3 var(--serif); color: var(--main); }
.terms dd { margin: 0; }
.faq > details { padding: 0; }
.faq summary { min-height: 58px; display: flex; align-items: center; padding: 8px 18px; cursor: pointer; font-weight: 700; font-size: 1.1875rem; }
.faq details > p { padding: 0 18px 16px; margin: 0; }

/* 年份對照表 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.chips a { display: inline-grid; place-items: center; min-width: 52px; min-height: 52px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; font: 700 1.25rem/1 var(--serif); }
.table-box { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ytable { width: 100%; border-collapse: collapse; font-size: 1.125rem; }
.ytable th, .ytable td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.ytable thead th { background: #EFE8D8; font-size: 1.0625rem; position: sticky; top: 0; }
.ytable tr[id] { scroll-margin-top: 90px; }
.ytable tr:target { background: #FFF1D2; }
/* 查生肖頁年份表（D44）：查到的那一年標底色；更早的年份收在「看更多」 */
.ytable tr.is-me { background: #FDEBD3; }
.me-tag { display: block; font: 700 .8125rem/1.3 var(--sans); color: var(--zhu-dark); }
.yt-more { margin-top: 16px; }
.yt-more > summary { list-style: none; width: min(360px, 100%); }
.yt-more > summary::-webkit-details-marker { display: none; }
.yt-more[open] > summary { margin-bottom: 12px; }
.yz { font: 700 1.3125rem/1 var(--serif); color: var(--main); }

/* 文章內文 */
.byline { color: var(--ink-3); font-size: 1rem; }
.prose { font-size: 1.1875rem; line-height: 1.9; }
.post-fig { margin: 4px 0 18px; text-align: center; }
.post-fig > img { display: inline-block; width: auto; max-width: 100%; height: min(240px, 56vw); }
.prose > h2 { font-size: 1.5rem; margin-top: 1.4em; }
.prose > ul, .prose > ol { padding-left: 1.4em; }
.prose li { margin-bottom: .4em; }

/* 404 */
.notfound { text-align: center; padding: 40px 0; }
.notfound .hero-btns { align-items: center; }

/* 頁尾 */
.site-foot { margin-top: clamp(72px, 9vw, 128px); background: var(--ink); color: #E9E1D0; padding: 32px 0 20px; position: relative; }
/* 頁尾上方遠山：和頁首那條一樣只到內容寬度、四邊淡出、離頁尾一點距離，不撞深色邊 */
.site-foot::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: min(1120px, calc(100% - 32px)); bottom: calc(100% + 14px); height: clamp(48px, 7vw, 104px); background: url(../img/ink/far-v1.webp) center bottom / cover no-repeat; opacity: .45; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 30%, #000 72%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 30%, #000 72%, transparent); mask-composite: intersect; pointer-events: none; }
.site-foot a { color: #F2ECDF; }
.foot-grid { display: grid; gap: 24px; }
.foot-name { font: 700 1.375rem/1.2 var(--serif); color: #fff; margin-bottom: 4px; }
.foot-sister { margin: 0; font-size: 1.0625rem; }
.foot-sister a { display: inline-flex; align-items: center; min-height: 48px; }
.foot-note { font-size: 1rem; color: #CFC6B4; margin-top: 24px; padding-top: 16px; border-top: 1px solid #3a3730; }

/* 安裝說明 */
.install-dialog { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 24px; background: var(--card); color: var(--ink); }
.install-dialog::backdrop { background: rgba(26, 24, 20, .55); }
.install-steps { padding-left: 1.3em; display: grid; gap: 10px; }
.key { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ink-3); border-radius: 6px; font-size: 1rem; }

/* 預留廣告版位（未接廣告前不顯示） */
.ad-slot:empty { display: none; }

/* 平板以上 */
@media (min-width: 640px) {
  .hero-btns { flex-direction: row; flex-wrap: wrap; }
  .yiji, .day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .day-nav { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev pick next" ". today ."; }
  .day-head .day-week { display: inline; margin-left: 8px; }
  .mlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
/* 電腦 */
@media (min-width: 1024px) {
  body { font-size: 1.25rem; }
  .wrap { padding: 0 40px; }
  h1 { font-size: 2.75rem; }
  .sec > h2 { font-size: 2rem; }
  .nav-wide { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
  .nav-wide a { display: flex; align-items: center; min-height: 56px; padding: 0 14px; color: var(--ink); text-decoration: none; font-size: 1.1875rem; font-weight: 500; border-bottom: 3px solid transparent; }
  .nav-wide a[aria-current] { color: var(--main); border-bottom-color: var(--main); font-weight: 700; }
  /* 電腦版：主選單已在頁首，「選單」只留主選單放不下的頁面 */
  .menu-main { display: none !important; }
  .split { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .alist-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result > img { width: 160px; }
  .post { max-width: 820px; }
}

/* ══════════ 2026-11 改版：肖運堂生活曆（D34） ══════════
 * 規則：米白讀底、深青＝操作與識別、朱砂＝日期／印章／少量重點；標題用明體、正文用黑體
 * 區塊分三種：資訊卡（.card，白底細框）、段落區（.sec，不加框，靠標題與分隔線）、壽伯小叮嚀（.shoubo-tip，淡米色區塊）
 */
:root { --r-sm: 8px; --tint: #E6ECE8; --tint-line: #C5D1CB; }
.tag-zhu { background: var(--zhu); }
.readable { max-width: 44em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* 頁首品牌：壽伯圖章＋站名 */
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-height: 52px; }
.brand-logo { width: 50px; height: 48px; flex: none; }
.brand-name { display: flex; flex-direction: column; font: 700 1.375rem/1.1 var(--serif); letter-spacing: 1px; }
.brand-name > small { font: 500 .8125rem/1.3 var(--sans); letter-spacing: 2px; color: var(--ink-3); }
@media (max-width: 400px) { .brand-logo { width: 42px; height: 40px; } .brand-name { font-size: 1.1875rem; } .brand-name > small { display: none; } }
html[data-size="xl"] .brand-name > small { display: none; }

/* 生肖圓章（首頁格、內頁頁首、犯太歲名單共用） */
.medal { position: relative; display: inline-grid; place-items: center; width: var(--medal); height: var(--medal); flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #F6F8F4 0 55%, var(--tint) 100%); box-shadow: inset 0 0 0 1px var(--tint-line); }
.medal > .medal-img { width: 100%; height: 100%; object-fit: contain; }
.medal > .medal-seal { position: absolute; left: 2%; top: 2%; display: grid; place-items: center; width: max(22px, calc(var(--medal) * .24)); aspect-ratio: 1; border-radius: 5px; background: var(--zhu); color: #fff; font: 700 max(.8125rem, calc(var(--medal) * .13))/1 var(--serif); box-shadow: 0 0 0 2px var(--paper); }

/* 12 生肖名牌格 */
.zgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.zcell { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 12px 4px 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.zcell:hover { border-color: var(--main); color: var(--ink); }
.zcell > .medal { --medal: 84px !important; }
.zname { font: 700 1.1875rem/1.3 var(--serif); padding: 0 10px; border-bottom: 2px solid var(--line); }

/* 首頁首屏：肖運堂生活曆 */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "find" "cal" "outfit"; gap: 16px; padding: 20px 0 8px; }
.hero > .hero-intro { grid-area: intro; }
.hero > .hero-find { grid-area: find; scroll-margin-top: 90px; }
.hero > .hero-cal { grid-area: cal; }
.hero > .hero-outfit { grid-area: outfit; }
.hero-outfit > .lcal-outfit { margin-top: 0; }
/* 首頁首屏山水：手機在首屏最下方一條；電腦放進左欄查生肖下方的空格 */
.hero::after { content: ""; height: clamp(64px, 18vw, 120px); background: url(../img/ink/band-v1.webp) center bottom / cover no-repeat; opacity: .5; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); pointer-events: none; }
.hero-intro > h1 { font-size: 2.25rem; line-height: 1.25; margin: 0 0 12px; }
.flow { border-left: 4px solid var(--main); padding: 2px 0 2px 14px; }
.flow > p { margin: 0; }
.flow-tag { display: inline-block; padding: 0 10px; border-radius: 6px; background: var(--main); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.8; }
.flow-title { font: 700 1.625rem/1.4 var(--serif); margin-top: 4px !important; }
.flow-sub { color: var(--ink-2); font-size: 1.0625rem; }
.hero-me { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-weight: 700; font-size: 1.1875rem; }
.hero-me > a { font-weight: 500; font-size: 1rem; }

/* 查生肖表單（獨立卡片與首屏精簡版共用） */
.lookup > label { display: block; font-size: 1.0625rem; color: var(--ink-2); margin-bottom: 6px; }
.lookup input[type="text"] { width: 100%; min-width: 0; height: 58px; padding: 0 16px; border: 2px solid #8C8273; border-radius: 10px; background: #fff; font: 1.25rem var(--sans); color: var(--ink); }
.lk-row { display: flex; gap: 8px; }
.lk-row > input { flex: 1 1 auto; }
.lk-row > .btn { flex: none; padding: 0 22px; }
.lookup .more .btn { margin-top: 12px; }
.lookup-hero { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.lookup-hero > .lk-title { font: 700 1.25rem/1.4 var(--serif); color: var(--ink); margin-bottom: 8px; }
.lookup-hero > .lk-title > span { display: block; font: 400 1rem/1.5 var(--sans); color: var(--ink-3); }
.guide { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 8px; padding: 10px 12px; background: #FBF6E6; border-radius: var(--r-sm); font-size: 1.0625rem; line-height: 1.7; }
.guide > .shoubo-img { flex: none; width: auto; height: 56px; }

/* 今日曆頁（掛釘撕頁） */
.lcal { position: relative; max-width: 440px; margin: 10px 0 0; }
.lcal-page { position: relative; display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; box-shadow: 0 3px 0 -1px var(--card), 0 3px 0 0 var(--line-soft), 0 7px 0 -1px var(--card), 0 7px 0 0 var(--line-soft); }
.lcal-page::before, .lcal-page::after { content: ""; position: absolute; top: -7px; width: 10px; height: 16px; border-radius: 5px; background: var(--ink-3); z-index: 1; }
.lcal-page::before { left: 22%; }
.lcal-page::after { right: 22%; }
.lcal-page:hover { color: var(--ink); border-color: var(--main); }
.lcal-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 9px 9px 0 0; background: var(--zhu); color: #fff; font-size: 1rem; letter-spacing: .06em; }
.lcal-top > b { font: 700 1.0625rem/1 var(--serif); letter-spacing: .3em; }
.lcal-main { display: flex; align-items: center; gap: 16px; padding: 10px 16px 6px; padding-right: 120px; }
.lcal-day { font: 700 4rem/1 var(--serif); color: var(--zhu); min-width: 1.2em; text-align: center; }
.lcal-side { display: grid; line-height: 1.5; color: var(--ink-2); font-size: 1rem; }
.lcal-week { font-weight: 700; color: var(--ink); }
.lcal-lunar { font: 700 1.25rem/1.45 var(--serif); color: var(--ink); }
.lcal-rows { display: grid; gap: 4px; margin: 4px 16px 0; padding: 10px 0 4px; border-top: 1px dashed var(--line); font-size: 1.0625rem; line-height: 1.5; }
.lcal-row { display: flex; gap: 10px; align-items: baseline; }
.lcal-k { flex: none; min-width: 2.6em; font-size: 1rem; color: var(--ink-3); }
.lcal-k.lcal-yi, .lcal-k.lcal-ji { display: inline-grid; place-items: center; min-width: 0; width: 1.6em; height: 1.6em; border-radius: 4px; color: #fff; font-family: var(--serif); }
.lcal-yi { background: var(--main); }
.lcal-ji { background: var(--ink-3); }
.lcal-more { display: flex; justify-content: flex-end; align-items: center; min-height: 48px; padding: 0 16px; color: var(--teal); font-weight: 700; font-size: 1rem; }
.lcal-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin-top: 10px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--teal); font-weight: 700; text-decoration: none; }
.lcal-hint > b { color: var(--ink); white-space: nowrap; }
.lcal-hint > span { text-align: right; }
.lcal-hint.is-on { border-style: solid; border-color: var(--zhu); color: var(--zhu-dark); background: #FBEFEC; }
/* 今日穿衣：五個色塊（D51），色塊用五行代表色，兩種顏色的五行左右各半 */
.lcal-outfit { display: block; margin-top: 10px; padding: 10px 12px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.lcal-outfit:hover { border-color: var(--main); }
.lof-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.lof-head > span { font-size: 1rem; color: var(--ink-3); }
.lof-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.lof-it { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; }
.lof-it > b { font-size: 1.0625rem; line-height: 1.2; }
.lof-it > small { font-size: 1rem; line-height: 1.25; color: var(--ink-2); }
/* 色塊＝一件馬褂：衣身主色；立領、對襟、下擺滾邊與盤扣用第二色（單色五行用同色系深色） */
.lof-sw { width: 38px; height: 38px; }
.lof-body { fill: var(--c1); stroke: #3E3A33; stroke-width: 1.1; stroke-linejoin: round; }
.lof-trim, .lof-knot { fill: var(--c2); }
.lof-sw-木 { --c1: #3F8A55; --c2: #24573A; }
.lof-sw-火 { --c1: #C23A2B; --c2: #7E2016; }
.lof-sw-土 { --c1: #D8B23A; --c2: #7A5232; }
.lof-sw-金 { --c1: #FFFFFF; --c2: #C9A227; }
.lof-sw-水 { --c1: #2F5F95; --c2: #1E1E1E; }
.lof-it:first-child > b { color: var(--zhu-dark); }
.lof-it:last-child { opacity: .75; }
.lcal-zodiac { position: absolute; right: -6px; top: 34px; width: 128px; margin: 0; text-align: center; pointer-events: none; z-index: 2; }
.lcal-zodiac > .lcal-img { width: 100%; height: auto; display: block; }
.lcal-zodiac > figcaption { margin-top: -8px; font: 700 1rem/1.3 var(--serif); color: #6B5420; }

/* 生肖內頁 */
.zhead { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.zhead > .medal { --medal: 150px !important; }
.zhead-text { flex: 1 1 min(300px, 100%); }
.zhead-text > h1 { margin-bottom: .25em; }
.zhead-text > p { margin: 0 0 6px; }
.zhead-level { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1875rem; }
.zhead-range { color: var(--ink-3); font-size: 1rem; }
/* 生肖內頁頁首：山水帶縮短、手機圓章縮小，讓重點內容早一點出現在首屏 */
.page-head.zhead { padding-bottom: clamp(36px, 6vw, 80px); }
.page-head.zhead::after { height: clamp(32px, 6vw, 76px); }
@media (max-width: 599px) {
  .zhead { flex-wrap: nowrap; gap: 14px; } .zhead > .medal { --medal: 88px !important; } .zhead-text { flex: 1 1 0; min-width: 0; }
  .page-head.zhead { padding: 14px 0 6px; } .page-head.zhead::after { display: none; }
  .zhead-text > h1 { font-size: 1.75rem; } .zhead-text .kicker { font-size: 1rem; margin-bottom: 2px; }
  .zhead + .ztabs { margin-bottom: 12px; }
}
/* 年度頁：頁內捷徑＋你的年次摘要 */
.yr-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
.yr-jump > a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 6px; border-radius: 8px; background: var(--line-soft); color: var(--ink); font: 700 1.0625rem/1.2 var(--sans); text-decoration: none; text-align: center; }
.yr-jump > a:hover { background: var(--main); color: #fff; }
.yr-mine { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--main); border-radius: 0 8px 8px 0; background: var(--card); font-size: 1.0625rem; line-height: 1.7; }
.yr-mine > b { color: var(--main); }
.yr-summary { margin: 24px 0 0; }
.yr-summary > h2 { font-size: 1.25rem; color: var(--ink-3); font-family: var(--sans); letter-spacing: 2px; }
.yr-quote { font: 700 1.3125rem/1.6 var(--serif); color: var(--ink); padding: 4px 0 4px 16px; border-left: 4px solid var(--zhu); margin-bottom: 12px !important; }
.yr-summary > p { line-height: 1.9; }
.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.area { padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; }
.area > p { margin: 0; line-height: 1.85; }
.area > .area-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.area-head > b { font: 700 1.375rem/1.3 var(--serif); }
.area-icon { color: var(--main); flex: none; }
.mline { list-style: none; margin: 0; padding: 0; }
.mline > li { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 18px; padding: 0 0 20px; margin: 0; }
.mline > li::before { content: ""; position: absolute; left: 100px; top: 10px; bottom: -6px; width: 2px; background: var(--line); }
.mline > li:last-child::before { display: none; }
.mline > li::after { content: ""; position: absolute; left: 95px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--main); }
.mline > li.is-now::after { background: var(--zhu); border-color: var(--zhu); box-shadow: 0 0 0 4px #F6DCD6; }
.mline-date { display: grid; text-align: right; line-height: 1.35; }
.mline-date > b { font: 700 1.1875rem/1.35 var(--serif); }
.mline-date > span { font-size: 1rem; color: var(--ink-3); }
.mline-body { padding-left: 18px; }
.mline-body > p { margin: 0; }
.mline-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px !important; }
.mline-head > a { font: 700 1.25rem/1.4 var(--serif); }
.mline-range { font-size: 1rem; color: var(--ink-3); }
.mline > li.is-now .mline-body { background: #FBF3F1; border-radius: var(--r-sm); padding: 8px 12px 10px 18px; margin-top: -8px; }
.age-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.age-index > a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.0625rem; }
.age-index > a:hover { border-color: var(--main); color: var(--main); }
.age-index > a.is-mine { border-color: var(--main); background: var(--main); color: #fff; }
.ages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ages > li { display: grid; gap: 2px; padding: 14px 4px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.ages > li:target, .ages > li.is-mine { background: #EEF3F0; box-shadow: inset 4px 0 0 var(--main); padding-left: 16px; }
.age-y { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 1.25rem/1.4 var(--serif); }
.age-meta { color: var(--ink-3); font-size: 1rem; }
.age-t { line-height: 1.8; }
.lucky dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.lucky dl > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; text-align: center; }
.lucky dt { font-size: 1rem; color: var(--ink-3); }
.lucky dd { margin: 0; font: 700 1.1875rem/1.5 var(--serif); }

/* 壽伯小叮嚀：淡米色單純區塊，和一般資訊區分開 */
.shoubo-tip { position: relative; display: flex; gap: 14px; align-items: flex-end; margin: 36px 0 var(--gap); padding: 18px 18px 0; background: #FBF6E6; border: 1px solid #E6DAB5; border-radius: 12px; }
.shoubo-tip > .shoubo-img { flex: none; width: auto; height: 110px; }
.shoubo-tip > div { padding-bottom: 16px; }
.tip-title { font: 700 1.125rem/1.3 var(--serif); color: var(--main); margin-bottom: 4px; }
.shoubo-tip p { margin-bottom: 0; line-height: 1.8; }

/* 犯太歲名單的圓章 */
.taisui .medal { --medal: 64px !important; }

/* 大字模式（預設）：手機、平板上曆頁與查詢列不擠壓；電腦版空間夠，保留生肖插圖 */
@media (max-width: 1023px) {
  html[data-size="xl"] .lcal-main { padding-right: 16px; }
  html[data-size="xl"] .lcal-zodiac { display: none; }
  html[data-size="xl"] .lk-row { flex-wrap: wrap; }
  html[data-size="xl"] .lk-row > .btn { flex: 1 1 100%; }
}

@media (min-width: 640px) {
  .zgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .lcal-main { padding-right: 150px; }
  .lcal-zodiac { width: 156px; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "intro cal" "find cal" "outfit cal" "ink cal"; grid-template-rows: auto auto auto 1fr; gap: 18px 48px; align-items: start; padding: 32px 0 16px; }
  .hero::after { grid-area: ink; align-self: start; height: auto; aspect-ratio: 1600 / 434; background-size: 100% auto; }
  .hero-intro > h1 { font-size: 3.25rem; }
  .flow-title { font-size: 1.875rem; }
  .yr-quote { font-size: 1.5rem; }
  .lcal { margin-top: 12px; }
  .lcal-day { font-size: 5.25rem; }
  .lcal-main { padding: 16px 20px 8px; padding-right: 168px; }
  .lcal-zodiac { width: 176px; right: -18px; top: 30px; }
  .zgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .zcell > .medal { --medal: 104px !important; }
  .zhead > .medal { --medal: 200px !important; }
  .mline > li { grid-template-columns: 110px minmax(0, 1fr); }
  .mline > li::before { left: 122px; }
  .mline > li::after { left: 117px; }
}

/* 窄手機：頁首不換行、曆頁插畫縮小 */
.brand-name, .btn-size, .btn-menu { white-space: nowrap; }
.head-tools { flex: none; }
.brand { min-width: 0; }
@media (max-width: 400px) {
  .lcal-main { gap: 10px; padding-right: 92px; }
  .lcal-day { font-size: 3.5rem; }
  .lcal-zodiac { width: 96px; top: 40px; }
}

/* 生肖運勢切換鈕（流年頁、每月頁）：每顆都是獨立網址，目前頁面朱砂底 */
.ztabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.ztabs > a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--main); border-radius: 999px; background: var(--card); color: var(--main); font: 700 1.0625rem/1.2 var(--sans); text-decoration: none; white-space: nowrap; }
.ztabs > a:hover { background: var(--paper); }
.ztabs > a[aria-current="page"] { background: var(--zhu); border-color: var(--zhu); color: #fff; }
/* 每月頁四項：只有等級，排成小卡 */
.areas.areas-grid { border-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.areas-grid > .area { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); padding: 14px 12px; }
.areas-grid .area-head { flex-wrap: wrap; margin: 0; }
@media (min-width: 1024px) { .areas.areas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 400px) { .ztabs { gap: 6px; } .ztabs > a { padding: 0 12px; } }

/* 首頁：本月 12 生肖等級（點了到單一生肖每月頁） */
.mchips { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mchips a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 48px; padding: 10px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); text-decoration: none; }
.mchips a:hover { border-color: var(--main); }
.mchips a > span:first-child { font: 700 1.125rem/1.2 var(--serif); }
@media (min-width: 640px) { .mchips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 生肖格的出生年次 */
.zyears { color: var(--ink-2); font-size: .9375rem; line-height: 1.3; text-align: center; }
.zyears > small { display: none; font-size: inherit; margin-left: 2px; }
@media (min-width: 640px) { .zyears > small { display: inline; } }
/* 一段文字不斷行（年次清單逐項包起來，只在項目之間換行） */
.nw { white-space: nowrap; }
/* 首頁最新文章：電腦版三欄 */
@media (min-width: 1024px) { .alist-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 首頁今日生肖提醒（曆頁下方） */
.daily { margin-top: 14px; padding: 16px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); }
.daily > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 1.375rem; }
.daily > h2 > small { font: 700 1rem/1 var(--sans); color: var(--ink-3); }
.daily-adj { margin-top: 4px; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.daily-adj > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; cursor: pointer; list-style: none; }
.daily-adj > summary::-webkit-details-marker { display: none; }
.daily-adj > summary > u { color: var(--main); font-weight: 700; text-underline-offset: 3px; }
.daily-adj > p { margin: 2px 0 0; }
.daily-pick > p { margin: 0 0 8px; color: var(--ink-2); font-size: 1.0625rem; }
.daily-btns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.daily-btns > button { min-height: 48px; border: 1.5px solid var(--main); border-radius: 8px; background: var(--paper); color: var(--main); font: 700 1.1875rem/1 var(--serif); cursor: pointer; }
.daily-btns > button:hover { background: #fff; }
.daily-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.daily-list > li { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.daily-list > li:last-child { border-bottom: 0; }
.daily-list > li:focus { outline: none; }
.daily-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.daily-head > b { font: 700 1.25rem/1.3 var(--serif); }
.daily-line { font-size: 1.125rem; line-height: 1.7; }
.daily-luck { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--teal); text-decoration: none; }
.daily-luck > b { color: var(--ink); }
.lk-sub { margin: -4px 0 10px; color: var(--ink-2); }
#lk-form, #home-form { scroll-margin-top: 90px; }
.daily-yiji { display: grid; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 1.0625rem; }
.daily-yiji > span { display: flex; align-items: center; gap: 8px; }
.daily-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; }
.daily-foot > a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--teal); }
.daily-change { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: 700 1rem/1 var(--sans); cursor: pointer; }
@media (max-width: 400px) { .daily-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 分享列：LINE 綠（比官方綠深，白字對比約 4.6:1）＋複製連結 */
.share { margin: 28px 0 8px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card); }
.share-title { margin: 0 0 10px; font: 700 1.1875rem/1.3 var(--serif); }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.share-row > .btn { flex: 1 1 min(200px, 100%); }
.share-line { background: #00873C; color: #fff; }
.share-line:hover { background: #006F31; color: #fff; }
.share-msg { margin: 8px 0 0; min-height: 1.5em; color: var(--teal); font-weight: 700; font-size: 1rem; }
.share-msg:empty { min-height: 0; margin: 0; }

/* 唸給我聽 */
.btn-read { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 0 16px; padding: 0 18px; border: 1.5px solid var(--main); border-radius: 999px; background: var(--card); color: var(--main); font: 700 1.0625rem/1.2 var(--sans); cursor: pointer; }
.btn-read:hover { background: #fff; }
.btn-read[aria-pressed="true"] { background: var(--main); color: #fff; }
.daily-foot > .btn-read { margin: 0; min-height: 44px; }
.prose ~ .btn-read, .post > .btn-read { margin-top: 4px; }

/* 出處與說法差異 */
.sources { margin: 28px 0 0; padding: 18px 16px; border-top: 2px solid var(--ink); }
.sources > h2 { margin: 0 0 10px; font-size: 1.375rem; }
.sources dl { margin: 0; display: grid; gap: 12px; }
.sources dt { font-weight: 700; font-size: 1.0625rem; }
.sources dd { margin: 2px 0 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.8; }

/* 安太歲倒數 */
.countdown > h2 { margin: 0 0 10px; }
.cd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cd-list > li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cd-list > li:last-child { border-bottom: 0; }
.cd-date { display: flex; flex-direction: column; font-size: 1rem; color: var(--ink-2); }
.cd-date > b { font: 700 1.375rem/1.2 var(--serif); color: var(--zhu-dark); }
.cd-date > small { font-size: .9375rem; color: var(--ink-3); }
.cd-main { display: grid; gap: 2px; }
.cd-main > b { font-size: 1.1875rem; }
.cd-main > span { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.cd-left { grid-column: 2; justify-self: start; padding: 2px 10px; border-radius: 6px; background: #FBEFEC; color: var(--zhu-dark); font-weight: 700; font-size: 1rem; }
@media (min-width: 640px) { .cd-list > li { grid-template-columns: 6em minmax(0, 1fr) auto; align-items: center; } .cd-left { grid-column: auto; justify-self: end; } }
.cd-home { margin: 4px 0 0; font-size: 1.0625rem; color: var(--ink-2); }
.cd-home > b { color: var(--zhu-dark); }
.flow > .cd-home { margin-top: 6px; }
/* 首頁價值主張（需求紀錄 017） */
.hero-promise { margin: -4px 0 12px; font-weight: 700; font-size: 1.125rem; color: var(--teal); }
.hero-promise > span { display: inline-block; } /* 手機斷行時整句換行，不留單字在下一行 */
.cd-home > b { white-space: nowrap; }
/* 首頁本月、流年：記住生肖時只顯示自己那一格（需求紀錄 017） */
.is-solo > li.is-mine { grid-column: 1 / -1; justify-self: start; width: min(240px, 100%); }
/* 本月只剩一格時改成橫向大卡，電腦版和左邊犯太歲名單比較平衡 */
.mchips.is-solo > li.is-mine { width: min(360px, 100%); }
.mchips.is-solo > li.is-mine > a { flex-direction: row; justify-content: center; gap: 14px; min-height: 88px; padding: 14px 20px; }
.mchips.is-solo > li.is-mine > a > span:first-child { font-size: 1.75rem; }
.mchips.is-solo > li.is-mine > a > .lv { font-size: 1.25rem; padding: 4px 14px; }
.zgrid.is-solo { margin-bottom: 4px; }
li.is-mine > a { border-color: var(--main); border-width: 2px; }
.mine-toggle { display: inline-flex; align-items: center; min-height: 48px; margin: 4px 0 8px; padding: 0 18px; border: 1.5px solid var(--teal); border-radius: 999px; background: var(--card); color: var(--teal); font: 700 1.0625rem/1.2 var(--sans); cursor: pointer; }
.mine-toggle:hover { background: var(--teal); color: #fff; }
.cd-home > a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--teal); }

/* 段落中的等級標籤與前後文字留空；12 生肖格與下一個區塊拉開 */
.lead .lv { margin: 0 .4em; }
.zgrid { margin-bottom: 28px; }
.legend-list li { padding: 4px 0; }
.legend-list .lv { margin-right: 12px; }

/* 生肖今日運勢：宜忌吉時 */
.td-kv { margin: 0; display: grid; gap: 10px; }
.td-kv > div { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.td-kv dt { font-weight: 700; color: var(--ink-2); }
.td-kv dd { margin: 0; font-size: 1.125rem; line-height: 1.7; }
.daily-head > a { font: 700 1.25rem/1.3 var(--serif); color: var(--ink); }

/* 閱讀設定（字體大小、日期顯示、語言）：放在「選單・設定」面板下方，預設收起，頁面連結優先 */
.set-panel { border-top: 1.5px solid var(--line); }
.set-panel[open] { display: grid; gap: 14px; padding-bottom: 16px; }
.set-panel > :not(summary) { margin-inline: 16px; }
.set-title { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 22px; cursor: pointer; list-style: none; font: 700 1.1875rem/1.3 var(--serif); color: var(--ink); }
.set-title::-webkit-details-marker { display: none; }
.set-title small { font: 500 .9375rem/1.3 var(--sans); color: var(--ink-3); }
.set-title::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2.2px solid var(--ink-3); border-bottom: 2.2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); }
.set-panel[open] > .set-title::after { transform: rotate(-135deg) translate(-2px, -1px); }
.set-title:hover { background: var(--line-soft); }
.set-row { display: grid; gap: 6px; }
.set-k { margin: 0; font-weight: 700; font-size: 1rem; color: var(--ink-2); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; gap: 4px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.seg > button, .seg > a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 700 1.0625rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }
/* 未選中：滑過變白底；已選中：深青底白字＋打勾，滑過也不變（避免白底白字看不見），不只靠顏色分辨 */
.seg > :not([aria-pressed="true"]):not([aria-current="true"]):hover { background: #fff; color: var(--main); }
.seg > [aria-pressed="true"], .seg > [aria-current="true"], .seg > [aria-pressed="true"]:hover, .seg > [aria-current="true"]:hover { background: var(--main); color: #fff; box-shadow: 0 1px 3px rgba(26, 24, 20, .25); }
.seg > [aria-pressed="true"]::before, .seg > [aria-current="true"]::before { content: "✓"; margin-right: 6px; font-weight: 700; }
.seg > .seg-xl { font-size: 1.3125rem; }
.set-note { margin: 0; font-size: .9375rem; color: var(--ink-3); }
/* 面板對齊頁首右緣 */
.head-row { position: relative; }
.menu { position: static; }
@media (min-width: 1024px) { .menu-panel { right: 40px; } }
/* 電腦版大字：曆頁插圖縮小一點，農曆、干支不斷行 */
@media (min-width: 1024px) {
  html[data-size="xl"] .lcal-main { padding-right: 138px; }
  html[data-size="xl"] .lcal-zodiac { width: 146px; right: -12px; top: 34px; }
  html[data-size="xl"] .lcal-side > span { white-space: nowrap; }
}

/* 納音五行對照表 */
.ny-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ny-jump > a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 1.0625rem; }
.ny-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ny-list > li { padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 90px; }
.ny-list > li:target { border-color: var(--zhu); box-shadow: 0 0 0 2px #FBEFEC; }
.ny-name { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.ny-name > b { font: 700 1.375rem/1.3 var(--serif); }
.ny-row { display: grid; gap: 2px; margin: 4px 0 0; }
.ny-gz { font-weight: 700; }
.ny-mean { margin: 0 0 8px; color: var(--ink-2); }
/* 查過生肖的人：上方「你的納音」卡＋表上那一格加框 */
.ny-me { margin: 0 0 20px; padding: 18px 20px; border: 2px solid var(--main); }
.ny-me > p { margin: 0 0 6px; }
.ny-me-k { color: var(--ink-2); }
.ny-me .ny-name > b { font-size: 1.625rem; }
.ny-me-go { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 0 !important; }
.ny-me-go > a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.ny-list > li.is-me { border: 2px solid var(--main); }
.ny-row.is-me .ny-gz { color: var(--main); }
.ny-uses { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }

/* 生肖配對（/match，D53）；首頁六合六組 */
.pairs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.pairs a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.pairs a:hover { border-color: var(--main); }
.pairs b { font: 700 1.375rem/1 var(--serif); }
.pairs span { font-size: .9375rem; color: var(--main); font-weight: 700; }
.pairs-all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pairs-all a { flex-direction: column; gap: 2px; min-height: 64px; }
@media (max-width: 400px) { .pairs-all { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mt-pick { margin: 20px 0; max-width: 640px; }
.mt-pick > h2 { margin: 0 0 12px; font-size: 1.375rem; }
.mt-pick > .btn { margin-top: 14px; }
.mt-pair-imgs { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mt-pair-imgs > span { font: 700 2rem/1 var(--sans); color: var(--ink-3); }
.mt-result { max-width: 760px; margin: 16px 0; }
.mt-result.is-good { border: 2px solid var(--main); }
.mt-sec { max-width: 760px; }
.mt-sec > p { line-height: 1.8; }
.mt-quote { margin: 0 0 12px; padding: 12px 18px; border-left: 4px solid var(--zhu); background: var(--card); font: 700 1.5rem/1.4 var(--serif); }
.td-kv.mt-tips > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.mt-tips dt { color: var(--main); }
.mt-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 1.5rem/1.3 var(--serif); margin: 0 0 8px; }
.mt-wrap { overflow-x: auto; max-width: 640px; }
.mt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mt-card { display: flex; gap: 14px; align-items: flex-start; }
.mt-card > a { flex: none; }
.mt-card .zodiac-img { width: 88px; height: 88px; object-fit: contain; }
.mt-card p { margin: 0 0 4px; }
.mt-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-name > a { font: 700 1.375rem/1.3 var(--serif); color: var(--ink); }
@media (min-width: 640px) { .mt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 八字排盤（查生肖結果下方，D50）：四柱並排，天干在上、地支在下；日柱（日主）加框 */
/* 今日五行穿衣（/today）與今日開運（/today/{生肖}），D51 */
#outfit { scroll-margin-top: 90px; }
.outfit { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.outfit > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.of-tier { min-width: 2.6em; }
.of-color { font-weight: 700; }
.outfit > li > small, .luck-kv small { color: var(--ink-3); font-size: 1rem; }
.luck-kv small { display: block; margin-top: 2px; }
.bazi { scroll-margin-top: 90px; }
.bazi .sec-lead { margin-bottom: 14px; }
.bz-hint { flex-basis: 100%; margin: 0; font-size: 1rem; color: var(--ink-3); }
.bz-cols { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.bz-cols > li { padding: 12px 4px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.bz-cols > li.is-master { border: 2px solid var(--main); }
.bz-k { margin: 0 0 8px; font-weight: 700; color: var(--ink-2); }
.bz-gz { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 8px; }
.bz-c { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: min(60px, 100%); padding: 6px 0 4px; border-radius: 10px; border: 1.5px solid transparent; font: 700 2rem/1 var(--serif); }
.bz-c > small { margin-top: 4px; font: 700 .875rem/1 var(--sans); }
.bz-none .bz-c { background: var(--paper); border: 1.5px dashed var(--line); color: var(--ink-3); }
.bz-sub { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--ink-2); }
.bz-master { margin: 0 0 14px; }
.bz-count, .bz-boost { margin-top: 20px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); max-width: 760px; }
.bz-count > h3, .bz-boost > h3 { margin: 0 0 8px; font: 700 1.25rem/1.3 var(--serif); }
.bz-wx { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.bz-wx > li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.bz-wx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.bz-wx-head > b { font-size: 1.125rem; min-width: 3em; }
.bz-dots { color: var(--main); letter-spacing: 2px; }
.bz-wx-head > small, .bz-boost-kv small { color: var(--ink-3); font-size: 1rem; }
.bz-boost-kv small { display: block; margin-top: 2px; }
.bz-wx-sym { margin: 4px 0 0; color: var(--ink-2); }
.bz-boost-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bazi .note { max-width: 760px; }
.bz-boost-kv { margin: 0 0 12px; }
.bz-boost-h { margin: 14px 0 6px; font-weight: 700; }
.bz-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 18px; }
.bz-form > .md-f { flex: 1 1 260px; max-width: 360px; }
.bz-form > .btn { min-height: 58px; }
/* 八字排盤獨立頁（D64） */
.bz-who { font-weight: 700; margin: 0 0 8px; }
.bz-god { margin: 0 0 4px; min-height: 1.4em; font: 700 1rem/1.4 var(--sans); color: var(--main-dark); }
.bz-cols > li.is-master .bz-god { color: var(--zhu-dark); }
.bz-adv { max-width: 760px; margin: 16px 0 0; padding: 0; }
.bz-adv > summary { min-height: 58px; display: flex; align-items: center; padding: 8px 18px; cursor: pointer; font-weight: 700; color: var(--teal); }
.bz-adv > :not(summary) { margin-left: 18px; margin-right: 18px; }
.bz-adv > :last-child { margin-bottom: 16px; }
.bz-hide { max-width: none; }
.bz-hide > li { padding: 10px 4px; }
.bz-hd { display: flex; flex-direction: column; align-items: center; margin: 0 0 6px; font: 700 1.375rem/1.2 var(--serif); }
.bz-hd > small { font: 700 1rem/1.3 var(--sans); color: var(--ink-2); }
.bz-hd.bz-none { color: var(--ink-3); }
.bz-godlist { margin: 0 0 12px; }
.bz-godlist > div { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.bz-godlist dt { font-weight: 700; }
.bz-godlist dd { margin: 2px 0 0; color: var(--ink-2); }
.bz-zi > p { margin: 0 0 6px; }
.bz-zi > p:last-child { margin: 0; }
.bz-more { margin: 18px 0 0; font-weight: 700; }
.bz-input { max-width: 760px; margin-top: 32px; scroll-margin-top: 90px; }
.bz-input > h2 { margin-top: 0; }
.bz-input .bz-hr-row { grid-template-columns: minmax(0, 1fr); margin-bottom: 6px; }
.bz-input .bz-hint { margin: 0 0 16px; }
.bz-entry { max-width: 760px; }
.bz-entry > p { margin: 0 0 12px; }
.bz-guide { max-width: 760px; }
.bz-stems { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.bz-stems > li { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin: 0; line-height: 1.5; }
.bz-stem { grid-row: span 3; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; font: 700 1.75rem/1 var(--serif); }
.bz-stems small { color: var(--ink-3); font-size: .9375rem; }
.bz-stems li > span:last-child { font-size: 1.0625rem; }
/* 十天干日主（需求紀錄 015）：天干清單整格可點 */
.rz-stems > li { padding: 0; }
.rz-stems > li > a { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; min-height: 56px; padding: 10px 12px; color: inherit; text-decoration: none; border-radius: 10px; }
.rz-stems > li > a:hover, .rz-stems > li > a:focus-visible { background: var(--paper); }
.rz-stems > li > a > b { color: var(--main); text-decoration: underline; text-underline-offset: 3px; }
.rz-stems > li > a > span:last-child { font-size: 1.0625rem; }
.rz-head h1 { display: flex; align-items: center; gap: 12px; }
.rz-head h1 > .bz-stem { grid-row: auto; flex: none; }
.rz-dt { margin-top: 16px; }
.rz-dt-t { margin: 4px 0 0; }
.rz-pillars dt { font-size: 1.125rem; }
.rz-gz { font: 700 1.375rem/1.2 var(--serif); color: var(--main); margin-right: 4px; }
/* 五行對照表（/bazi#wuxing，需求紀錄 015）：手機一欄、電腦自動排兩到三欄，不用左右捲 */
.wx-table { list-style: none; padding: 0 !important; margin: 8px 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.wx-table > li { margin: 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.wx-table .wx-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1rem; color: var(--ink-2); line-height: 1.5; }
.wx-table .wx-h > .ny-el { flex: none; }
.wx-table dl { margin: 0; }
.wx-table dl > div { display: grid; grid-template-columns: 3em 1fr; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.wx-table dt { font-weight: 700; }
.wx-table dd { margin: 0; }
.ny-years { color: var(--ink-2); }
/* 五行色：都用淺底深字，對比足夠，不靠顏色判斷（旁邊有字） */
.ny-el { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 6px; font-weight: 700; font-size: 1rem; border: 1.5px solid transparent; }
.ny-el-金 { background: #F4EEDC; color: #6B5313; border-color: #CDB878; }
.ny-el-木 { background: #E6F0E4; color: #2F5A2B; border-color: #9DBB97; }
.ny-el-水 { background: #E3ECF3; color: #24486A; border-color: #96B0C8; }
.ny-el-火 { background: #FBE9E5; color: #8A2A1C; border-color: #DDA196; }
.ny-el-土 { background: #F1E8DD; color: #6A4A2A; border-color: #C8AE8E; }
@media (min-width: 640px) { .ny-row { grid-template-columns: 9em minmax(0, 1fr); } .ny-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 年份對照表的納音、查生肖結果的納音 */
.yn { display: block; color: var(--ink-3); font-size: .9375rem; }
.result-nayin { margin: 4px 0 8px; font-size: 1.125rem; }
.result-nayin a { margin-left: 4px; font-weight: 700; color: var(--teal); }
/* 年份對照表：手機（尤其大字預設）不必左右滑 */
@media (max-width: 639px) {
  .ytable { font-size: 1rem; }
  .ytable th, .ytable td { padding: 10px 3px; }
  .ytable thead th { white-space: normal; }
  .ytable thead .cal-hint { display: block; font-size: .8125rem; }
  .ytable .yz { font-size: 1.1875rem; }
}

/* 查生肖只填年份：結論旁標條件（年初出生需補月日確認） */
.result-cond { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 6px; background: #FBEFE3; border: 1px solid #E2B48C; color: #7A3A12; font: 700 1rem/1.5 var(--sans); vertical-align: middle; }
.result-warn { border-left: 4px solid #C77A3A; }
[id^="yr-"] { scroll-margin-top: 90px; }

/* 每日早安圖（D59）：日期切換、版本選擇、圖片與按鈕 */
.mc-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mc-days > a { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--main); border-radius: 999px; background: var(--card); color: var(--main); font: 700 1.0625rem/1.2 var(--sans); text-decoration: none; }
.mc-days > a[aria-current] { background: var(--main); color: #fff; }
.mc { display: grid; gap: 14px; max-width: 560px; margin: 0 0 24px; }
.mc-pick-k { margin: 0 0 6px; font-weight: 700; color: var(--ink-2); }
.mc-pick-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(84px, 100%), 1fr)); gap: 6px; }
.mc-pick-btns > button { min-height: 48px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: 700 1.0625rem/1.2 var(--sans); cursor: pointer; }
.mc-pick-btns > button:first-child { grid-column: span 2; }
.mc-pick-btns > button[aria-pressed="true"] { background: var(--main); border-color: var(--main); color: #fff; }
.mc-fig { margin: 0; }
.mc-img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(26, 24, 20, .12); background: var(--card); }
.mc[aria-busy="true"] .mc-img { opacity: .55; }
.mc-text { padding: 20px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; }
.mc-text > p { margin: 0 0 8px; }
.mc-hi { font: 700 3rem/1.2 var(--serif); }
.mc-hi > small { margin-left: 12px; padding: 2px 10px; border-radius: 8px; background: var(--zhu); color: #fff; font-size: 1.25rem; vertical-align: middle; }
.mc-line { font: 700 1.375rem/1.6 var(--serif); }
.mc-cap { margin-top: 8px; font-size: 1rem; color: var(--ink-3); }
.mc-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.mc-btns > .btn { min-height: 56px; font-size: 1.1875rem; }/* 電腦版：圖在左，選版本與按鈕在右 */
@media (min-width: 900px) {
  .mc { max-width: none; grid-template-columns: 460px minmax(0, 1fr); grid-template-areas: "fig pick" "fig btns" "fig note"; grid-template-rows: auto auto 1fr; gap: 16px 40px; align-items: start; }
  .mc > .mc-fig { grid-area: fig; } .mc > .mc-pick { grid-area: pick; } .mc > .mc-btns { grid-area: btns; } .mc > .mc-inapp { grid-area: note; }
}
/* 首頁今日生肖提醒裡的早安圖入口 */
/* 早安圖入口：像一張小早安卡——晨光暖底、當季山水、壽伯問好、當天的問候句（D59） */
.daily-morning { position: relative; display: flex; align-items: flex-end; gap: 10px; margin: 12px 0 0; padding: 14px 14px 0 8px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at calc(100% - 26px) 22px, #FFD9A8 0 16px, rgba(255, 217, 168, .35) 17px 26px, transparent 27px), linear-gradient(180deg, #FFF3E0 0%, #FBF6EE 70%); border: 1px solid #EBCFA6; color: var(--ink); text-decoration: none; }
.daily-morning::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: var(--dm-bg) center bottom / cover no-repeat; opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
.daily-morning:hover { border-color: var(--zhu); color: var(--ink); }
.daily-morning > .shoubo-img { position: relative; z-index: 1; flex: none; width: auto; height: 96px; }
.dm-text { position: relative; z-index: 1; display: grid; gap: 4px; padding-bottom: 14px; min-width: 0; }
.dm-hi { font: 700 1.25rem/1.35 var(--serif); }
.dm-hi > b { color: var(--zhu); }
.dm-line { font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.dm-go { justify-self: start; margin-top: 4px; padding: 6px 14px; border-radius: 999px; background: var(--zhu); color: #fff; font-weight: 700; font-size: 1rem; }
/* 早安圖「自己做」（D60） */
.mc-pick-btns > .mc-diy { grid-column: span 2; border-color: var(--zhu); color: var(--zhu); }
.mc-pick-btns > .mc-diy[aria-pressed="true"] { background: var(--zhu); border-color: var(--zhu); color: #fff; }
.mc-diy-panel { display: grid; gap: 12px; padding: 12px; background: var(--card); border: 1.5px solid #E8C9B5; border-radius: 12px; }
/* 分頁：署名／問候語／背景／字的顏色，一次只展開一項；小字顯示目前的選擇 */
.mc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mc-tabs > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: 4px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: 700 1.0625rem/1.2 var(--sans); cursor: pointer; }
.mc-tabs > button[aria-selected="true"] { background: var(--zhu); border-color: var(--zhu); color: #fff; }
.mc-tabs > button:focus-visible { outline: 3px solid var(--main); outline-offset: 2px; }
.mc-tabs small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: .875rem; opacity: .85; }
.mc-tabs small:empty { display: none; }
.mc-tp { display: grid; gap: 8px; }
.mc-tp[hidden] { display: none; }
.mc-tp-k { font-size: 1rem; color: var(--ink-3); }
.mc-tp input[type="text"] { width: 100%; min-height: 54px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: 500 1.1875rem/1.4 var(--sans); color: var(--ink); box-sizing: border-box; }
.mc-tp input[type="text"]:focus { outline: 3px solid var(--main); outline-offset: 1px; }
.mc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(76px, 100%), 1fr)); gap: 6px; }
.mc-chips > button, .mc-colors > button { min-height: 48px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 1.0625rem/1.2 var(--sans); cursor: pointer; }
.mc-chips > button:last-child { color: var(--ink-3); }
.mc-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 8px; }
.mc-colors > button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 10px; }
.mc-colors > button[aria-pressed="true"] { border-color: var(--main); box-shadow: inset 0 0 0 2px var(--main); background: var(--line-soft); }
.mc-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid rgba(26, 24, 20, .25); }
.mc-dot-ink { background: #1A1814; } .mc-dot-zhu { background: #A33224; } .mc-dot-green { background: #2F5D45; } .mc-dot-blue { background: #24406B; }
.mc-dot-white { background: #fff; border-color: #1A1814; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px #1A1814; }
.mc-diy-panel[hidden] { display: none; }
.mc-opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 1.0625rem; line-height: 1.5; cursor: pointer; }
.mc-opt > input { width: 22px; height: 22px; flex: none; accent-color: var(--main); }
.mc-opt:has(input:checked) { border-color: var(--main); background: var(--line-soft); }
.mc-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); gap: 8px; }
.mc-bgs > button, .mc-photo { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: 700 1.0625rem/1.2 var(--sans); text-align: center; cursor: pointer; }
.mc-bgs > button[aria-pressed="true"], .mc-photo.is-on { background: var(--main); border-color: var(--main); color: #fff; }
.mc-photo { grid-column: 1 / -1; position: relative; }
.mc-photo > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mc-photo:focus-within { outline: 3px solid var(--main); outline-offset: 1px; }
.mc-hint { margin: 0; font-size: 1rem; color: var(--ink-3); }
@media (min-width: 900px) { .mc { grid-template-areas: "fig pick" "fig diy" "fig btns" "fig note"; grid-template-rows: auto auto auto 1fr; } .mc > .mc-diy-panel { grid-area: diy; } }
/* 早安圖自己做：照片露出位置、去除 logo 開關（D60 補充） */
.mc-pos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mc-pos[hidden] { display: none; }
.mc-pos > span { font-weight: 700; color: var(--ink-2); }
.mc-pos > button { min-width: 64px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 1.0625rem/1.2 var(--sans); cursor: pointer; }
.mc-pos > button[aria-pressed="true"] { background: var(--main); border-color: var(--main); color: #fff; }
.mc-nologo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: 700 1.0625rem/1.4 var(--sans); text-align: left; cursor: pointer; }
.mc-nologo > i { position: relative; width: 24px; height: 24px; flex: none; border: 2px solid var(--ink-3); border-radius: 6px; background: #fff; }
.mc-nologo[aria-pressed="true"] { border-color: var(--main); background: var(--line-soft); }
.mc-nologo[aria-pressed="true"] > i { border-color: var(--main); background: var(--main); }
.mc-nologo[aria-pressed="true"] > i::after { content: ""; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
/* 早安圖自己做・手機：預覽圖改放在選項上方並黏在畫面頂端（縮成 4 成高），往下改選項時圖一直看得到，不必上下滑 */
@media (max-width: 899px) {
  .mc.is-diy > .mc-pick { order: 1; }
  .mc.is-diy > .mc-fig { order: 2; position: sticky; top: var(--mc-top, 64px); z-index: 5; margin: 0 -16px; padding: 8px 16px; background: var(--paper); box-shadow: 0 6px 10px -8px rgba(26, 24, 20, .35); }
  .mc.is-diy > .mc-diy-panel { order: 3; }
  .mc.is-diy > .mc-btns { order: 4; }
  .mc.is-diy > .mc-inapp { order: 5; }
  .mc.is-diy .mc-img { width: auto; max-width: 100%; max-height: 40vh; margin: 0 auto; }
  .mc.is-diy .mc-cap { display: none; }
}
/* 首頁壽伯推薦讀：依時節挑 2 篇（Content::recommend） */
.home-reco { margin-top: 28px; }
.reco-head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.reco-head > .shoubo-img { flex: none; width: auto; height: 72px; }
.reco-head > h2 { margin: 0 0 6px; font-size: 1.5rem; }
.reco-list { display: grid; gap: 10px; }
@media (min-width: 640px) { .reco-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reco-list > .reco:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* 單數篇時最後一篇佔滿一列，不留空格 */
.reco { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--card); border: 1.5px solid var(--line); border-left: 5px solid var(--teal); border-radius: 12px; color: var(--ink); text-decoration: none; }
.reco:hover { border-color: var(--teal); color: var(--ink); }
.reco-why { justify-self: start; padding: 1px 10px; border-radius: 999px; background: #E6EFEC; color: var(--teal); font: 700 .9375rem/1.6 var(--sans); }
.reco-t { font: 700 1.25rem/1.45 var(--serif); }
.reco-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }

/* 八字：十二長生、空亡、干支關係、大運流年流月（D65） */
.bz-mini { margin: 8px 0 0; font-size: 1rem; }
.bz-mini > div { display: flex; justify-content: center; gap: 6px; }
.bz-mini dt { color: var(--ink-3); }
.bz-mini dd { margin: 0; font-weight: 700; }
.bz-void { margin: 6px 0 0; display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: .9375rem; }
.bz-rel-list { list-style: none; margin: 0 0 12px; padding: 0; }
.bz-rel-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.bz-rel-list b { font: 700 1.1875rem/1.4 var(--serif); }
.bz-rel-list small { color: var(--ink-3); font-size: 1rem; }
.bz-rel-list span { flex-basis: 100%; color: var(--ink-2); }
.bz-luck { margin-top: 24px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 90px; }
.bz-luck > h3 { margin: 0 0 8px; font: 700 1.25rem/1.3 var(--serif); }
.bz-luck > h4 { margin: 20px 0 8px; font-size: 1.125rem; }
.bz-gender { display: flex; gap: 10px; }
.bz-gender > .btn { min-width: 96px; }
.bz-run { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.bz-run > li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin: 0; }
.bz-run > li.is-now { border: 2px solid var(--main); background: #FFF6E6; }
.bz-run p { margin: 0; }
.bz-run-y { font-weight: 700; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.bz-run-y > small { color: var(--ink-3); font-weight: 400; font-size: .9375rem; }
.bz-run-gz { font: 700 1.625rem/1.3 var(--serif); margin: 2px 0 !important; }
.bz-run-god { font-size: 1rem; color: var(--main-dark); font-weight: 700; }
.bz-run-x { font-size: .9375rem; color: var(--ink-2); margin-top: 4px !important; line-height: 1.5; }
/* 八字流年流月等級（D66） */
.bz-now { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin: 12px 0; }
.bz-now-card { padding: 12px 14px; border: 2px solid var(--main); border-radius: 10px; background: #FFF6E6; }
.bz-now-card > p { margin: 0 0 6px; }
.bz-now-card > p:last-child { margin: 0; }
.bz-now-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bz-now-h > b { font: 700 1.25rem/1.3 var(--serif); }
.bz-now-h > span { color: var(--ink-2); }
.bz-now-why { font-weight: 700; color: var(--main-dark); }
.bz-now-tip { color: var(--ink-2); }
.bz-how { margin: 8px 0 4px; }
.bz-how > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--teal); }
.bz-how > p { margin: 8px 0; }
.bz-how-t { width: 100%; border-collapse: collapse; font-size: 1rem; }
.bz-how-t th, .bz-how-t td { padding: 8px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.bz-how-t thead th { color: var(--ink-3); font-weight: 700; }
.bz-how-t td:nth-child(2) { white-space: nowrap; }
.bz-run-lv { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 4px 0 !important; }
.bz-run-lv > small { color: var(--ink-2); font-size: .9375rem; }
/* 八字大運流年流月可展開列表（D67） */
.bz-explain { margin: 0 0 12px; }
.bz-explain > p { margin: 0 0 6px; }
.bz-explain > p:last-child { margin: 0; }
.bz-acc { display: grid; gap: 8px; }
.bz-acc > details { border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.bz-acc > details.is-now { border: 2px solid var(--main); }
.bz-acc summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 58px; padding: 8px 14px; cursor: pointer; }
.bz-acc-y { display: grid; min-width: 6.5em; font-weight: 700; line-height: 1.3; }
.bz-acc-y > small { color: var(--ink-3); font-weight: 400; font-size: .9375rem; }
.bz-acc-gz { font: 700 1.5rem/1.2 var(--serif); }
.bz-acc-god { color: var(--main-dark); font-weight: 700; font-size: 1rem; }
.bz-acc-why { color: var(--ink-2); font-size: 1rem; }
.bz-acc-body { padding: 4px 14px 14px; border-top: 1px solid var(--line-soft); }
.bz-acc-body > p { margin: 8px 0 0; }
.bz-acc-k { font-weight: 700; }
.bz-acc-tip { color: var(--ink-2); }
.bz-acc-rel { margin: 4px 0 0; padding-left: 1.2em; }
.bz-acc-rel > li { margin: 2px 0; }
.bz-areas { margin: 10px 0 0; display: grid; gap: 6px; }
.bz-areas > div { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.bz-areas dt { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.bz-areas dt svg { width: 22px; height: 22px; }
.bz-areas dd { margin: 4px 0 0; color: var(--ink-2); }
/* 八字白話導讀、名詞小字典（D67） */
.bz-intro { max-width: 760px; margin: 12px 0 20px; border: 2px solid var(--main); }
.bz-intro > h3 { margin: 0 0 8px; font: 700 1.3125rem/1.4 var(--serif); }
.bz-intro > ol { margin: 0 0 10px; padding-left: 1.4em; }
.bz-intro > ol > li { margin: 0 0 10px; line-height: 1.8; }
.bz-h { margin: 8px 0 6px; font: 700 1.25rem/1.3 var(--serif); }
.bz-legend { max-width: 760px; margin: 0 0 12px; color: var(--ink-2); }
.bz-dict { max-width: 760px; margin: 20px 0 0; padding: 0; scroll-margin-top: 90px; }
.bz-dict > summary { min-height: 58px; display: flex; align-items: center; padding: 8px 18px; cursor: pointer; font-weight: 700; color: var(--teal); }
.bz-dict > dl { margin: 0 18px 16px; }
/* 八字記住我（D67） */
.bz-saved { max-width: 760px; border: 2px solid var(--main); }
.bz-saved > p { margin: 0 0 10px; }
.bz-saved-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.bz-remember { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0 0 12px; font-size: 1.0625rem; }
.bz-remember input { width: 24px; height: 24px; accent-color: var(--main); flex: none; }

/* 八字：日主白話、進階比喻（D68） */
.bz-me { max-width: 760px; margin: 12px 0 20px; }
.bz-me > h3 { margin: 0 0 8px; font: 700 1.3125rem/1.4 var(--serif); }
.bz-me > h4, .bz-adv h4 { margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); font: 700 1.25rem/1.4 var(--serif); color: var(--main); }
.bz-me-img { font-size: 1.125rem; font-weight: 700; }
.bz-quote { margin: 8px 0; padding: 8px 14px; background: var(--paper); border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; }
.bz-quote > p { margin: 0; font: 700 1.25rem/1.5 var(--serif); }
.bz-quote > footer { color: var(--ink-3); font-size: 1rem; }
.bz-aspects, .bz-palace, .bz-stages { margin: 0 0 10px; }
.bz-aspects > div, .bz-palace > div, .bz-stages > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.bz-aspects dt, .bz-palace dt, .bz-stages dt { font-weight: 700; }
.bz-palace dt > span { display: block; font: 700 1.25rem/1.3 var(--serif); color: var(--main); }
.bz-aspects dd, .bz-palace dd, .bz-stages dd { margin: 0; }
.bz-palace small, .bz-stages small { display: block; color: var(--ink-3); font-size: 1rem; }
.bz-season { padding: 10px 14px; background: var(--paper); border-radius: 8px; }
.bz-season-tag { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; margin-right: 8px; border-radius: 50%; background: var(--main); color: #fff; font: 700 1.125rem/1 var(--serif); vertical-align: middle; }
.bz-spread { list-style: none; margin: 0 0 10px; padding: 0; }
.bz-spread > li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.bz-spread > li > p { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.bz-spread > li > p > em { font-style: normal; color: var(--ink-2); }
.bz-spread > li > small { display: block; color: var(--ink-2); font-size: 1rem; }
.bz-spread > li.is-zero { color: var(--ink-3); }
.bz-adv-list { margin: 0 0 10px; padding-left: 1.2em; }
.bz-adv-list > li { margin: 0 0 8px; line-height: 1.8; }
.bz-adv-list small { display: block; color: var(--ink-3); font-size: 1rem; }
.bz-mini-row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; }
@media (max-width: 480px) {
  .bz-aspects > div, .bz-palace > div, .bz-stages > div { grid-template-columns: 1fr; gap: 2px; }
}

/* 八字合盤（D70） */
.bzp-tag { font-size: 1.125rem; }
.bzp-two { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.bzp-two > li { padding: 12px 14px; background: var(--paper); border-radius: 10px; }
.bzp-gz { display: flex; gap: 6px; margin: 6px 0; font: 700 1.375rem/1.2 var(--serif); }
.bzp-gz > span { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 6px 0; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }
.bzp-gz > span.is-master { border: 2px solid var(--main); }
.bzp-gz small { font: 400 .9375rem/1.3 var(--sans); color: var(--ink-3); }
.bzp-who { margin: 0; color: var(--ink-2); }
.bzp-item { max-width: 760px; margin: 0 0 16px; }
.bzp-item > h3 { margin: 0 0 8px; font: 700 1.25rem/1.4 var(--serif); }
.bzp-what { color: var(--ink-2); }
.bzp-pair { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 1.125rem; }
.bzp-pair b { font: 700 1.375rem/1.2 var(--serif); color: var(--main); }
.bzp-tip { padding: 10px 14px; border: 2px solid var(--main); border-radius: 8px; }
.bzp-wx { border-collapse: collapse; margin: 0 0 10px; }
.bzp-wx th, .bzp-wx td { padding: 6px 16px; border-bottom: 1px solid var(--line-soft); text-align: center; }
.bzp-person { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; }
.bzp-person > legend { padding: 0 6px; font: 700 1.25rem/1.4 var(--serif); }
.bzp-types label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bzp-types small { color: var(--ink-3); font-size: 1rem; }
.bz-more .btn { margin: 4px 6px 4px 0; }

/* 納音：白話說明與名字由來（D73） */
.ny-what { max-width: 760px; margin: 0 0 20px; }
.ny-what > h2 { margin: 0 0 8px; font: 700 1.375rem/1.4 var(--serif); }
.ny-what .bz-aspects > div { grid-template-columns: 8.5em 1fr; }
@media (max-width: 480px) { .ny-what .bz-aspects > div { grid-template-columns: 1fr; } }
.ny-origin { margin: 6px 0 8px; }
.ny-origin > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--main); font-weight: 700; }
.ny-origin > p { margin: 4px 0 0; padding: 8px 12px; background: var(--paper); border-radius: 8px; color: var(--ink-2); }
.ny-origin > summary { list-style: none; gap: 6px; }
.ny-origin > summary::-webkit-details-marker { display: none; }
.ny-origin > summary::before { content: '＋'; display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; border: 2px solid currentColor; border-radius: 50%; font-size: .875em; line-height: 1; }
.ny-origin[open] > summary::before { content: '－'; }
.bzp-pair > span { display: flex; flex-direction: column; }
.bzp-pair small { font-size: 1rem; color: var(--ink-3); }

/* 回到上面（D77）：右下角壽伯舉雙手；捲到下面才出現（.is-on），不擋選單與自製下拉（z-index 低於頁首 20） */
.to-top { position: fixed; z-index: 15; right: max(12px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.2; text-decoration: none; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top-fig { position: relative; z-index: 1; display: block; width: 69px; height: 100px; margin-bottom: -10px; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 3px 6px rgba(26, 24, 20, .35)); transition: transform .2s; }
.to-top-img { display: block; width: 69px; height: 100px; }
.to-top-label { padding: 7px 14px; border: 2px solid #fff; border-radius: 999px; background: var(--main); white-space: nowrap; box-shadow: 0 4px 12px rgba(26, 24, 20, .28); }
.to-top:hover .to-top-fig, .to-top:focus-visible .to-top-fig { transform: translateY(-4px); }
.to-top:hover .to-top-label, .to-top:focus-visible .to-top-label { background: var(--main-dark); }
.to-top:focus-visible { outline: none; }
.to-top:focus-visible .to-top-label { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none !important; } }

/* 天赦日總表（需求紀錄 018） */
.ts-next { display: grid; gap: 8px; border-color: var(--zhu); }
.ts-next > h2 { margin: 0; font-size: 1.375rem; color: var(--zhu-dark); }
.ts-next-date { margin: 0; font-size: 1.125rem; }
.ts-next-date > b { font: 700 1.75rem/1.3 var(--serif); color: var(--ink); }
.ts-cd { display: inline-block; margin-left: 8px; color: var(--zhu-dark); font-weight: 700; white-space: nowrap; }
.ts-next > .btn { justify-self: start; }
.ts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ts-day { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start; margin: 0; }
.ts-day.is-past { opacity: .72; }
.ts-day.is-today, .ts-day:not(.is-past):first-child { border-color: var(--zhu); }
.ts-date { display: grid; justify-items: center; min-width: 4.5em; padding: 8px 6px; border-radius: 10px; background: #FBEFEC; color: var(--zhu-dark); text-decoration: none; }
.ts-date > b { font: 700 1.75rem/1.1 var(--serif); }
.ts-date > span { font-size: 1rem; }
.ts-body > p { margin: 0 0 4px; line-height: 1.6; }
.ts-meta { color: var(--ink-3); font-size: 1rem; }
.ts-chong > b { color: var(--zhu-dark); }
.ts-state { grid-column: 2; justify-self: start; padding: 1px 10px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); font-weight: 700; font-size: 1rem; }
.ts-day:not(.is-past) > .ts-state { background: #FBEFEC; color: var(--zhu-dark); }
.ts-hours { display: grid; gap: 8px; margin: 0 0 14px; }
.ts-hours > div { padding: 10px 14px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--line); }
.ts-hours dt { font-weight: 700; color: var(--ink); }
.ts-hours dd { margin: 2px 0 0; line-height: 1.6; color: var(--ink-2); }
.ts-rule { margin: 8px 0; padding-left: 1.2em; line-height: 1.8; }
.ts-steps .steps { margin: 0 0 16px; padding-left: 1.6em; display: grid; gap: 12px; }
.ts-steps .steps > li { line-height: 1.7; }
.ts-steps .steps > li > b { display: block; font: 700 1.1875rem/1.5 var(--serif); }
.ts-home > h3 { margin: 0 0 6px; font-size: 1.1875rem; }
.ts-home > p { margin: 0; }
.ts-letter { margin: 0; padding: 14px 18px; border-left: 5px solid var(--zhu); border-radius: 8px; background: #FBF7EE; font-family: var(--serif); line-height: 1.9; }
.ts-letter > p { margin: 0 0 8px; }
.ts-letter > p:last-child { margin: 0; text-align: right; }