/* ==========================================================================
   知命 Kairo 共用樣式（E 白紫金）— 全站唯一的「外皮」設定檔
   載入方式：shell.js（所有內頁）與 index.html（首頁）都會載入，放在 shell.css、zmui.css 之後。
   想改全站顏色、字體、按鍵、寬度，只改這個檔案（以及下面的 --zk-* 變數）。
   ① 顏色變數  ② 字體  ③ 版面寬度規則  ④ 按鍵（立體實體按鍵）  ⑤ 表頭／頁面底色
   版寬規則：列表／工具／總覽頁 ＝ 1180px（預設）；閱讀頁（文章內文、條款、關於…）＝ 900px（頁面載入 shell.js 時加 data-read="1"）。
   ========================================================================== */

/* ① 顏色變數 */
:root{
  --zk-bg:#FFFFFF; --zk-bg-tint:#F6F0FD;            /* 頁面底：白，頂端淡薰衣草 */
  --zk-ink:#241A38; --zk-ink-2:#5F5478; --zk-ink-3:#7B6E97;
  --zk-violet:#6A1FB0; --zk-violet-deep:#5A1B99; --zk-violet-soft:#F1E7FB; --zk-line:#E6DAF4;
  --zk-gold:#D8B25F; --zk-gold-deep:#8A6420; --zk-gold-soft:#F3E6C2;
  --zk-rose:#D8397B; --zk-rose-deep:#A8265C; --zk-rose-soft:#FFF1F6;
  --zk-line-green:#06C755; --zk-line-ink:#04301A;
  --zk-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,system-ui,sans-serif;
  --zk-serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --zs-pink:#5A1B99; /* shell.css 的強調色（目前頁籤、頁尾連結 hover）改為品牌紫 */
}

/* ② 字體：內文＝黑體，標題＝襯線體（全站一致） */
body{font-family:var(--zk-sans)}
.zs-nav,.zs-foot{font-family:var(--zk-sans)}
.zs-shell .wrap h1,.zs-shell .wrap h2{font-family:var(--zk-serif);color:var(--zk-ink)}
.zs-shell .wrap h1{font-weight:900;letter-spacing:.01em}
.zs-shell .wrap h2{font-weight:800}

/* ⑤ 內頁底色與表頭（首頁有自己的背景，不動） */
html.zs-shell body{background:#fff linear-gradient(180deg,var(--zk-bg-tint) 0,#fff 460px) no-repeat}
.zs-nav{border-bottom:1px solid var(--zk-line)}
.zs-links a.on,.nav-links a.active{color:var(--zk-violet-deep);border-color:var(--zk-gold);background:var(--zk-bg-tint)}
.zs-login{border-color:var(--zk-gold);color:var(--zk-violet-deep)}
.wallet{border-color:var(--zk-gold);color:var(--zk-gold-deep)}

/* ④ 按鍵：像實體按鍵，有立體底邊，按下會下沉。皮膚四種：v 主要（紫金）、g LINE 綠、p 祝福卡玫瑰、w 次要白 */
.zk-v,.zk-g,.zk-p,.zk-w,body .btn.gold,body .btn.violet,body .btn.ghost,body .btn.line-key,body a.cta,body button.cta{transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}
.zk-v,body .btn.gold,body .btn.violet,body a.cta,body button.cta{background:linear-gradient(180deg,#A64FE3 0%,#6A1FB0 100%);color:#FFF8E6!important;border:1px solid var(--zk-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #3B0F6E,0 8px 16px rgba(74,21,133,.22)}
.zk-v:hover,body .btn.gold:hover,body .btn.violet:hover,body a.cta:hover,body button.cta:hover{filter:brightness(1.07);transform:none}
.zk-v:active,body .btn.gold:active,body .btn.violet:active,body a.cta:active,body button.cta:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(0,0,0,.3),0 1px 0 #3B0F6E}
.zk-w,body .btn.ghost,body a.cta.ghost,body button.cta.ghost{background:linear-gradient(180deg,#fff,#F7F2FD);color:var(--zk-violet-deep)!important;border:1px solid #D9CBEC;box-shadow:inset 0 1px 0 #fff,0 4px 0 #CDBCE4}
.zk-w:hover,body .btn.ghost:hover,body a.cta.ghost:hover,body button.cta.ghost:hover{filter:brightness(.98);transform:none}
.zk-w:active,body .btn.ghost:active,body a.cta.ghost:active,body button.cta.ghost:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(90,27,153,.15),0 1px 0 #CDBCE4}
.zk-g,body .btn.line-key,body a.cta.line,body button.cta.line{background:linear-gradient(180deg,#2EDC7C 0%,#06C755 100%);color:var(--zk-line-ink)!important;border:1px solid #05A546;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 #058A3C,0 8px 16px rgba(6,199,85,.22)}
.zk-g:hover,body .btn.line-key:hover,body a.cta.line:hover{filter:brightness(1.05);transform:none}
.zk-g:active,body .btn.line-key:active,body a.cta.line:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(0,0,0,.2),0 1px 0 #058A3C}
.zk-p,body a.cta.greet,body button.cta.greet{background:linear-gradient(180deg,#FFF8FB 0%,#FFE3EE 100%);color:var(--zk-rose-deep)!important;border:1px solid var(--zk-rose);box-shadow:inset 0 1px 0 #fff,0 4px 0 #B23B73,0 8px 16px rgba(216,57,123,.18)}
.zk-p:hover,body a.cta.greet:hover{filter:brightness(.99);transform:none}
.zk-p:active,body a.cta.greet:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(120,20,60,.2),0 1px 0 #B23B73}

/* ⑥ 頁尾推廣條（所有內頁共用，取代原本的左下角浮動按鈕） */
.zs-promo{width:calc(100% - 64px);max-width:1116px;margin:48px auto 0;padding:20px 24px;border-radius:20px;background:linear-gradient(120deg,var(--zk-bg-tint),var(--zk-rose-soft));border:1px solid var(--zk-line);box-shadow:0 10px 26px rgba(90,27,153,.08);display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-family:var(--zk-sans)}
.zs-promo b{display:block;font-size:17px;color:var(--zk-ink);font-family:var(--zk-serif)}.zs-promo span{display:block;font-size:13.5px;color:var(--zk-ink-2);margin-top:4px}
.zs-pa{display:flex;gap:12px;flex-wrap:wrap}.zs-pa a{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none}
.zs-promo+.zs-foot{margin-top:24px}
@media(max-width:960px){.zs-promo{width:calc(100% - 36px);padding:16px}}

/* ⑦ 版寬統一：所有頁面外框都是 1180px，和表頭、表尾、推廣條左右對齊。
   閱讀頁（data-read="1"）只限制「文字行寬」不超過 880px，卡片、圖片、表格仍然撐滿外框。 */
body.zs-read .wrap{max-width:1180px!important}
body.zs-read .wrap p,body.zs-read .wrap li{max-width:880px}
body.zs-read .wrap .box p,body.zs-read .wrap .box li,body.zs-read .wrap .sc p,body.zs-read .wrap .sc li{max-width:none}
/* 頁面大標題統一大小（文章頁封面標題不受影響） */
.zs-shell .wrap h1:not(.hero-txt h1):not(.bcard h1){font-size:30px;line-height:1.35;margin:0 0 10px}
@media(max-width:600px){.zs-shell .wrap h1:not(.hero-txt h1):not(.bcard h1){font-size:25px}}

/* 讓 .btn 搭配 .zk-* 皮膚時，優先於頁內 .btn 規則 */
body .btn.zk-v,body .btn.zk-g,body .btn.zk-p,body .btn.zk-w{border-radius:999px}
body .btn.zk-g:hover,body .btn.zk-p:hover,body .btn.zk-v:hover,body .btn.zk-w:hover{transform:none}
body .btn.zk-g:active,body .btn.zk-p:active{transform:translateY(3px)}
body .btn.zk-g{background:linear-gradient(180deg,#2EDC7C 0%,#06C755 100%);color:var(--zk-line-ink)!important;border:1px solid #05A546;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 #058A3C,0 8px 16px rgba(6,199,85,.22)}
body .btn.zk-p{background:linear-gradient(180deg,#FFF8FB 0%,#FFE3EE 100%);color:var(--zk-rose-deep)!important;border:1px solid var(--zk-rose);box-shadow:inset 0 1px 0 #fff,0 4px 0 #B23B73,0 8px 16px rgba(216,57,123,.18)}

/* ⑧ 獨立頁（預約賞屋、合作方後台、導流元件總覽、電子報確認/退訂、案場專線）
   這些頁面不套共用外框，只在 <html> 加 class="zk-lite"（有立體按鍵者再加 zk-key），並載入本檔。 */
html.zk-lite{--bg:#fff;--pu:#6A1FB0;--pk:#D8397B;--violet:#6A1FB0;--violet-light:#A64FE3;--gold-pale:#6A1FB0;--gold:#D8B25F;--t1:#241A38;--t2:#5F5478;--t3:#7B6E97;--line:#E6DAF4;--zr-line:#E6DAF4}
html.zk-lite body{min-height:100vh;background:#fff linear-gradient(180deg,#F6F0FD 0,#fff 460px) no-repeat;font-family:var(--zk-sans);color:var(--zk-ink)}
html.zk-lite h1,html.zk-lite h2{font-family:var(--zk-serif);color:var(--zk-ink)}
html.zk-lite a{color:var(--zk-violet)}
html.zk-key body .btn{background:linear-gradient(180deg,#A64FE3 0%,#6A1FB0 100%);color:#FFF8E6;border:1px solid var(--zk-gold);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #3B0F6E,0 8px 16px rgba(74,21,133,.2);transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}
html.zk-key body .btn:hover{filter:brightness(1.06)}
html.zk-key body .btn:active{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(0,0,0,.3),0 1px 0 #3B0F6E}
html.zk-key body .btn.alt,html.zk-key body .btn.w,html.zk-key body .btn.ghost{background:linear-gradient(180deg,#fff,#F7F2FD);color:var(--zk-violet-deep);border:1px solid #D9CBEC;box-shadow:inset 0 1px 0 #fff,0 4px 0 #CDBCE4}
html.zk-key body .btn.alt:active,html.zk-key body .btn.w:active,html.zk-key body .btn.ghost:active{box-shadow:0 1px 0 #CDBCE4}
html.zk-key body .btn.line,html.zk-key body .btn.g{background:linear-gradient(180deg,#2EDC7C,#06C755);color:var(--zk-line-ink);border:1px solid #05A546;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 #058A3C}
html.zk-key body .btn.line:active,html.zk-key body .btn.g:active{box-shadow:0 1px 0 #058A3C}
html.zk-key body .btn.d{background:#fff;color:#B03A48;border:1px solid #B03A48;box-shadow:0 4px 0 #EBC3C8}
html.zk-key body .btn:disabled{opacity:.55;transform:none}

/* ⑨ 可讀性（2026-10）：字級下限、對比、行距。
   參考台灣主流入口／新聞網站的慣例：內文 15–17px、行高 1.7–1.9、輔助說明不低於 12–13px、灰字對比 ≥ 4.5:1。
   想整體調整，改這一段即可。 */
:root:root{--t2:#4F4468;--t3:#64587D;--zs-t3:#64587D}
/* 內文：沒有自訂 class 的段落／清單 */
body .wrap p:not([class]),body .wrap li:not([class]){font-size:15px;line-height:1.85}
body.zs-read .wrap p:not([class]),body.zs-read .wrap li:not([class]){font-size:16.5px;line-height:1.95}
body .wrap ul:not([class]) li+li,body .wrap ol:not([class]) li+li{margin-top:.35em}
body .wrap h2{line-height:1.45;margin-top:1.6em}
body .wrap h3{line-height:1.5}
/* 輔助文字：不低於 13px */
body small,body .zdt,body .ln,body .code,body .rk-sub,body .zb-tag,body .cc-chip,body .chip,body .tag,body .disc,body .hc-btn,body .pray-btn,body .text-link,body .zs-foot small,body .zs-foot a{font-size:13px!important;line-height:1.6}
/* 極小標籤：不低於 12px */
body .rk-tag,body .badge-free,body .hc-count,body .lantern-count,body .eyebrow,body .zp-badge{font-size:12px!important}
/* 行內寫死的小字級一併拉到 13px */
body [style*="font-size:10px"],body [style*="font-size:10.5px"],body [style*="font-size:11px"],body [style*="font-size:11.5px"],body [style*="font-size:12px"],body [style*="font-size:12.5px"]{font-size:13px!important}
/* 淺紫色文字（#C029FF 在白底只有 4.2:1）加深 */
body .sym,body .trio-tag,body span.tag,body a.home,body .rk-arrow,body .cc-chip{color:#8E1FC9!important}
body footer,body .zs-foot{color:#5F5478}

/* 各館頁（首頁 SPA 的館別畫面）固定顯示：加入官方 LINE ＋ 個人化祝福卡 */
.ch-fan{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin:14px 0 6px;padding:16px 20px;border-radius:18px;background:linear-gradient(120deg,var(--zk-bg-tint),var(--zk-rose-soft));border:1px solid var(--zk-line);box-shadow:0 10px 26px rgba(90,27,153,.08)}
.ch-fan-t b{display:block;font-family:var(--zk-serif);font-size:17px;color:var(--zk-ink)}
.ch-fan-t span{display:block;font-size:14px;color:var(--zk-ink-2);margin-top:3px}
.ch-fan-a{display:flex;gap:12px;flex-wrap:wrap}
.ch-fan-a .btn{padding:11px 22px;font-size:15px}
body .cc-cta,body .cta-hint{color:#8E1FC9!important}
body .cal2-c.we b,body .cal2-wk .we{color:#C42368}

/* ⑩ 手機版首頁瘦身：長列表改橫向滑動、清單只顯示前 5 筆，整頁約縮短三分之一 */
@media(max-width:560px){
  .intent-card{min-height:150px}
  .zod-grid{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:38%;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .zod-grid>*{scroll-snap-align:start}
  .toolbox{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:8px}
  .toolbox>*{flex:0 0 74%;scroll-snap-align:start}
  .trio-rank-list .trio-rank-row:nth-child(n+6){display:none}
}

/* ⑪ 花邊只留給「主角卡」：清單、資料、常見問題等改成簡潔淡邊框（加 class="plain"；details 一律簡潔） */
body .wrap .box.plain,body .wrap details{background:#fff!important;border:1px solid var(--zk-line)!important;border-radius:14px;box-shadow:none}
body .wrap details{padding:12px 18px}
body .wrap details[open]{background:#FBF8FF!important}
body .wrap .box.plain{padding:16px 20px}
body .wrap .box.plain ul{margin:6px 0 0}
body .wrap .box.plain ul:not(.yi ul):not(.ji ul){column-width:240px;column-gap:28px}

/* ⑫ 工具結果下方的「下一步」卡 */
.nx-card{margin:16px 0 8px;padding:18px 20px;border-radius:18px;background:linear-gradient(120deg,var(--zk-bg-tint),var(--zk-rose-soft));border:1px solid var(--zk-line);box-shadow:0 10px 26px rgba(90,27,153,.08)}
.nx-t b{display:block;font-family:var(--zk-serif);font-size:17px;color:var(--zk-ink)}
.nx-t span{display:block;font-size:14px;color:var(--zk-ink-2);margin:3px 0 12px}
.nx-a{display:flex;gap:10px;flex-wrap:wrap}.nx-a .btn{padding:10px 18px;font-size:14.5px}

/* ⑬ 水彩風格（2026-10 定案）：小圖示＝水彩暈染底＋墨色字；頁面頂部水彩橫幅（圖片就緒才顯示） */
.zi{color:#2E1F4D!important;font-weight:800;
  background:
   radial-gradient(circle at 28% 30%,hsl(var(--h) 80% 82% / .95) 0,hsl(var(--h) 80% 82% / 0) 62%),
   radial-gradient(circle at 74% 72%,hsl(calc(var(--h) + 45) 75% 78% / .9) 0,hsl(calc(var(--h) + 45) 75% 78% / 0) 66%),
   radial-gradient(circle at 60% 40%,hsl(calc(var(--h) + 20) 85% 90% / .9),hsl(var(--h) 60% 80%))!important;
  box-shadow:0 0 0 1.5px hsl(var(--h) 55% 62% / .55),inset 0 0 6px hsl(var(--h) 60% 55% / .35),0 5px 10px -6px hsl(var(--h) 60% 40% / .5)!important;
  text-shadow:0 0 3px rgba(255,255,255,.85)}
.zk-wcbar{position:relative;height:clamp(110px,16vw,170px);border-radius:20px;overflow:hidden;margin:0 0 18px;border:1px solid var(--zk-line);background:#FFFEFB}
.zk-wcbar img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.zk-wcbar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.55));pointer-events:none}

/* ⑭ 水彩背景：頁面頂部一層淡淡的水彩暈染（紫、粉、金、藍、青），往下淡出；不影響文字對比 */
html body{position:relative}
html body::before{content:"";position:absolute;left:0;right:0;top:0;height:1100px;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221600%22 height=%221100%22 viewBox=%220 0 1600 1100%22%3E%3Cdefs%3E%0A%3Cfilter id=%22w%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.006%22 numOctaves=%223%22 seed=%229%22 result=%22n%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%22140%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22 result=%22d%22/%3E%3CfeGaussianBlur in=%22d%22 stdDeviation=%2226%22/%3E%3C/filter%3E%0A%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%221%22 stop-color=%22%23000%22/%3E%3C/linearGradient%3E%3Cmask id=%22m%22%3E%3Crect width=%221600%22 height=%221100%22 fill=%22url%28%23f%29%22/%3E%3C/mask%3E%3C/defs%3E%0A%3Cg mask=%22url%28%23m%29%22%3E%3Cg filter=%22url%28%23w%29%22%3E%0A%3Cellipse cx=%22260%22 cy=%22170%22 rx=%22420%22 ry=%22190%22 fill=%22%23B79AE6%22 opacity=%22.5%22/%3E%0A%3Cellipse cx=%221350%22 cy=%22130%22 rx=%22420%22 ry=%22170%22 fill=%22%23F2A9C4%22 opacity=%22.45%22/%3E%0A%3Cellipse cx=%22820%22 cy=%2260%22 rx=%22300%22 ry=%22110%22 fill=%22%23F0D08A%22 opacity=%22.4%22/%3E%0A%3Cellipse cx=%221500%22 cy=%22520%22 rx=%22260%22 ry=%22200%22 fill=%22%238FB8E8%22 opacity=%22.3%22/%3E%0A%3Cellipse cx=%2290%22 cy=%22560%22 rx=%22240%22 ry=%22190%22 fill=%22%239ED6C8%22 opacity=%22.28%22/%3E%0A%3C/g%3E%3C/g%3E%3C/svg%3E") center top/100% 1100px no-repeat}
@media(max-width:700px){html body::before{height:760px;background-size:cover}}

/* ⑮ 首頁區塊標題旁的水彩小插圖（圓形羽化，放在標題左側） */
.section-head>.has-wc{position:relative;padding-left:92px;min-height:80px;display:flex;flex-direction:column;justify-content:center}
.wc-sec{position:absolute;left:0;top:50%;transform:translateY(-50%);width:80px;height:80px;object-fit:cover;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%)}
@media(max-width:700px){.section-head>.has-wc{padding-left:66px;min-height:58px}.wc-sec{width:58px;height:58px}}
/* ⑯ 圖片載入前的水彩占位底色（不再是一片白） */
img[loading=lazy]{background:linear-gradient(135deg,#F1E7FB,#FDE7EF 55%,#FBF1D6)}
@media(max-width:420px){.hs-tab{font-size:13px;padding-left:2px;padding-right:2px;white-space:nowrap}}