/* ═══════════════════════════════════════════════════════════════
   修心之道・靜界 設計系統 v1（zen.css）
   五頁共用：色彩 token / 字體 / 宣紙質感 / 元件 / 動效
   搭配 Tailwind CDN（僅用其排版 utility，顏色一律走本檔 token）
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── 色彩 token ── */
  --paper:      #F7F4EE;  /* 宣紙白（頁面底色） */
  --paper-warm: #EFEAE0;  /* 淡茶（區塊交替底） */
  --ink:        #2B2B28;  /* 墨黑文字 */
  --ink-soft:   #6B675E;  /* 次要文字 */
  --pine:       #2F5D50;  /* 松綠主色 */
  --pine-deep:  #24483E;  /* hover */
  --pine-mist:  #E3EBE7;  /* 松綠淡底 */
  --gold:       #A9713B;  /* 茶金輔色（點綴） */
  --gold-ink:   #8A5A2C;  /* 衍生：茶金的小字版（對比 ≥4.5:1） */
  --line:       #E4DDD0;  /* 細線/邊框 */
  --shadow:     0 8px 32px rgba(43,43,40,.06);
  --shadow-lift:0 16px 44px rgba(43,43,40,.10);
  /* ── 版面 token ── */
  --page-max:   clamp(1180px,96vw,1600px);  /* 頁面級容器滿版寬（SPEC-LW 2026-09-01）；元件級窄寬不吃這個 */
}

html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans TC',sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

/* ── 宣紙紋理：極淡 SVG noise 疊在最上層（不擋互動） ── */
body::after{
  content:'';
  position:fixed; inset:0; z-index:80;
  pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 字體 ── */
.serif{font-family:'Noto Serif TC',serif;letter-spacing:.05em;line-height:1.3}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.45em;
  text-transform:uppercase;color:var(--gold-ink);
}
.text-soft{color:var(--ink-soft)}

/* ── emoji 固定寬（義和 style.css:34 同款）──
 * 側欄/清單前綴 emoji 寬度不一（🏠 vs 📋 vs ✅）會讓後面的文字起點參差；
 * 鎖 1.5em＋置中＝文字起點一直線。flex:none 防 flex 容器內被壓縮。 */
.ico{display:inline-block;width:1.5em;text-align:center;flex:none}

/* ── 帳號大頭照（app 頂列，2026-08-29 UI 同步輪）──
 * 右上不再放文字徽章（名字·方案·期限），改 32px 圓框大頭照；
 * 方案資訊收進 hover title（沿用 acctBadge getter）。無照片＝首字母底徽。 */
.acct-av{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:999px;overflow:hidden;background:var(--paper-warm);border:1px solid var(--line);
  color:var(--gold-ink);font-size:.8rem;font-weight:800;cursor:default;user-select:none;flex:none}
.acct-av img{width:100%;height:100%;object-fit:cover;display:block}

/* ── 連結 ── */
.z-link{color:var(--pine);font-weight:700;text-decoration:none}
.z-link:hover{color:var(--pine-deep);text-decoration:underline}

/* ── 按鈕 ── */
.z-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 2rem;border-radius:14px;font-weight:700;
  background:var(--pine);color:#fff;border:1px solid var(--pine);
  box-shadow:var(--shadow);text-decoration:none;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.z-btn:hover{background:var(--pine-deep);border-color:var(--pine-deep);transform:translateY(-2px);box-shadow:var(--shadow-lift);color:#fff}
.z-btn--ghost{background:transparent;color:var(--pine);border:1px solid var(--pine);box-shadow:none}
.z-btn--ghost:hover{background:var(--pine-mist);color:var(--pine-deep)}
.z-btn--paper{background:#fff;color:var(--ink);border:1px solid var(--line)}
.z-btn--paper:hover{background:var(--paper);color:var(--ink)}
.z-btn--inverse{background:var(--paper);color:var(--pine-deep);border-color:var(--paper)}
.z-btn--inverse:hover{background:#fff;color:var(--pine-deep)}
.z-btn--outline-light{background:transparent;color:#fff;border:1px solid rgba(247,244,238,.55);box-shadow:none}
.z-btn--outline-light:hover{background:rgba(247,244,238,.12);color:#fff}
.z-btn--sm{padding:.5rem 1.15rem;border-radius:11px;font-size:.875rem}

/* ── 頁面級容器：全站滿版寬（新頁面掛這個，不要再抄字面值）── */
.z-page{max-width:var(--page-max);margin-inline:auto}

/* ── 卡片 ── */
.z-card{
  background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);
  transition:transform .3s ease,box-shadow .3s ease;
}
.z-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.z-card--static:hover{transform:none;box-shadow:var(--shadow)}
.z-card--ghost{background:rgba(255,255,255,.55);border:1px dashed #D6CEBF;box-shadow:none}
.z-card--ghost:hover{transform:none;box-shadow:none}

/* ── 徽章 chip ── */
.z-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .95rem;border-radius:999px;
  background:var(--pine-mist);color:var(--pine-deep);
  font-size:.75rem;font-weight:700;letter-spacing:.06em;
}
.z-chip--warm{background:#F1E6D8;color:var(--gold-ink)}
.z-chip--muted{background:var(--paper-warm);color:var(--ink-soft)}

/* ── 小圖示座 ── */
.z-icon{
  width:46px;height:46px;border-radius:13px;flex:none;
  background:var(--pine-mist);color:var(--pine);
  display:flex;align-items:center;justify-content:center;
}
.z-icon svg{width:22px;height:22px}
.z-icon--warm{background:#F1E6D8;color:var(--gold-ink)}

/* ── 分隔線：細線＋中央小菱形 ── */
.z-divider{
  display:flex;align-items:center;gap:1.1rem;
  color:var(--gold);font-size:.72rem;line-height:1;
}
.z-divider::before,.z-divider::after{content:'';height:1px;flex:1;background:var(--line)}

/* ── 導覽 ── */
.z-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(247,244,238,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-item{color:var(--ink-soft);text-decoration:none;transition:color .2s ease}
.nav-item:hover{color:var(--pine)}
.nav-item.is-active{color:var(--pine);font-weight:700}

/* ── 頁尾（深墨底、宣紙字） ── */
.z-footer{background:var(--ink);color:rgba(247,244,238,.66)}
.z-footer a{color:rgba(247,244,238,.66);text-decoration:none;transition:color .2s ease}
.z-footer a:hover{color:var(--paper)}
.z-footer .ft-title{color:var(--paper);font-weight:700}

/* ═══ 大 footer（華航式；與義和官網 V12 §1.5 同原則，13 個對外頁共用）═══
 * 期望結構（WF 置換用）：
 *   <footer class="z-footer z-footer--big">
 *     <div class="ft-in">                     ← 1180 容器＋左右 padding（等同 max-w-[clamp(1180px,96vw,1600px)] mx-auto px-5）
 *       <div class="ft-top"> <a class="ft-brand">…</a> <button class="ft-up">↑ 回頂端</button> </div>
 *       <div class="ft-cols"> <div class="ft-col"><h4>…</h4><ul><li><a>…</a></li></ul></div> ×4 </div>
 *       <div class="ft-bot">© 2026 …</div>
 *     </div>
 *   </footer>
 * 配色一律沿用既有 token，未新增 :root 色票：
 *   底＝--ink｜正文/品牌＝--paper（80%／100%）｜欄題＝--gold 提亮｜分隔線＝--paper 14%。
 * 對比（對 --ink #2B2B28 底）：正文 80% ≈ 8.8:1、次要 62% ≈ 6.0:1、欄題 ≈ 5.2:1 → 全數過 WCAG AA。
 * ⚠ .z-footer 基底規則刻意不動：scan/fee/s/o 四支殼頁共用同一個 class 但走「一行式」頁尾，
 *   大 footer 的圓角/padding 只掛在 --big 修飾子上，不會波及它們。 */
.z-footer--big{
  margin-top:64px;
  border-radius:28px 28px 0 0;
  padding:56px 0 48px;
  font-size:14px;
  color:rgba(247,244,238,.80);
}
/* 保險絲：WF 若漏加 --big，內含 .ft-cols 的 footer 自動吃同一組 chrome。
 * 單獨成條＝舊瀏覽器不吃 :has() 時只丟這一條，上面那條照常生效。 */
.z-footer:has(.ft-cols){
  margin-top:64px;
  border-radius:28px 28px 0 0;
  padding:56px 0 48px;
  font-size:14px;
  color:rgba(247,244,238,.80);
}
/* 內容容器（WF 若直接用 Tailwind max-w-[clamp(1180px,96vw,1600px)] mx-auto px-5 亦可，以下版型不依賴它） */
.ft-in{max-width:var(--page-max);margin:0 auto;padding:0 1.25rem}

/* 頂列：左品牌｜右回頂端 */
.ft-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.1rem;padding-bottom:1.9rem;border-bottom:1px solid rgba(247,244,238,.14);
}
.ft-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.z-footer .ft-brand,.z-footer .ft-brand:hover{color:var(--paper)}
.ft-brand b{
  display:block;font-family:'Noto Serif TC',serif;
  font-size:1.2rem;font-weight:700;letter-spacing:.05em;line-height:1.35;
}
.ft-brand small{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.3em;line-height:1.6;
  color:rgba(247,244,238,.62);
}
.ft-tagline{margin-top:.55rem;font-size:.85rem;line-height:1.9;color:rgba(247,244,238,.72)}

/* 回頂端圓鈕（button 或 a 皆可；.z-footer 前綴用來壓過 .z-footer a 的預設灰） */
.ft-up{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  padding:.7rem 1.35rem;border-radius:999px;
  background:transparent;border:1.5px solid rgba(247,244,238,.45);
  font-family:inherit;font-size:.85rem;font-weight:700;letter-spacing:.05em;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.z-footer .ft-up,.z-footer .ft-up:hover{color:var(--paper)}
.ft-up:hover{background:rgba(247,244,238,.14);border-color:var(--paper);transform:translateY(-2px)}
.ft-up:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.ft-up .ft-up-i{font-size:1rem;line-height:1}

/* 中段四欄：≥170px 才擠得下一欄，手機自動疊成 1～2 欄 */
.ft-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1.9rem 1.6rem;padding:2rem 0 2.25rem;
}
.ft-col h4,.ft-col .ft-title{
  font-size:.875rem;font-weight:700;letter-spacing:.08em;margin-bottom:.85rem;
  color:#BF966D;                                          /* 後備值＝下一行 color-mix 的落地色 */
  color:color-mix(in srgb,var(--gold) 72%,var(--paper));  /* --gold 對 --ink 只有 3.5:1，提亮到 ≈5.2:1 才過 AA */
}
.ft-col ul{list-style:none;display:grid;gap:.65rem;margin:0;padding:0}
.ft-col li{margin:0}
.ft-col a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.875rem;line-height:1.65;text-decoration:none;
  color:rgba(247,244,238,.80);
}
.ft-col a:hover,.ft-col a:focus-visible{color:#fff}
.ft-col p{font-size:.85rem;line-height:1.9;color:rgba(247,244,238,.72)}

/* 底列：細分隔線＋版權 */
.ft-bot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.4rem 1.1rem;padding-top:1.25rem;
  border-top:1px solid rgba(247,244,238,.14);
  font-size:.8rem;color:rgba(247,244,238,.62);
}
.ft-bot a{color:rgba(247,244,238,.72);text-decoration:underline;text-underline-offset:3px}
.ft-bot a:hover{color:#fff}

@media (max-width:640px){
  .z-footer--big{margin-top:48px;padding:44px 0 32px;border-radius:24px 24px 0 0}
  .z-footer:has(.ft-cols){margin-top:48px;padding:44px 0 32px;border-radius:24px 24px 0 0}
  .ft-top{gap:.9rem;padding-bottom:1.5rem}
  .ft-cols{gap:1.6rem 1.25rem;padding:1.75rem 0 1.9rem}
  .ft-bot{justify-content:flex-start}
}

/* ── Hero 水墨暈染（低調） ── */
.hero-wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 420px at 82% -8%, rgba(47,93,80,.10), transparent 70%),
    radial-gradient(520px 380px at 4% 34%, rgba(169,113,59,.07), transparent 70%);
}
.ink-blob{position:absolute;pointer-events:none;filter:blur(56px);opacity:.5}

/* ── 山徑步進（report 流程用） ── */
.trail{position:relative;padding-left:3.6rem}
.trail::before{
  content:'';position:absolute;left:21px;top:10px;bottom:10px;width:1px;
  background:var(--line);
}
.trail-step{position:relative;padding-bottom:2.6rem}
.trail-step:last-child{padding-bottom:0}
.trail-num{
  position:absolute;left:-3.6rem;top:0;
  width:44px;height:44px;border-radius:50%;
  background:var(--paper);border:1px solid var(--pine);color:var(--pine);
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Serif TC',serif;font-weight:700;font-size:1.05rem;
}

/* ── 進場動效：緩慢升起淡入 ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease-out,transform .8s ease-out}
.reveal.in{opacity:1;transform:none}

/* ── 呼吸（圓相／禪音按鈕） ── */
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.enso-breathe{animation:breathe 4s ease-in-out infinite;transform-origin:center}

/* ── 禪音按鈕（zen-sound.js 動態插入） ── */
.z-sound-btn{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;
  width:52px;height:52px;border-radius:50%;
  background:rgba(247,244,238,.92);border:1px solid var(--line);
  color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:color .3s ease,border-color .3s ease,transform .2s ease;
}
.z-sound-btn:hover{color:var(--pine);transform:translateY(-2px)}
.z-sound-btn.on{color:var(--pine);border-color:var(--pine);animation:breathe 4s ease-in-out infinite}
.z-sound-btn svg{width:26px;height:26px}

/* ── 文件頁（privacy / terms） ── */
/* 內文不再鎖 42rem（≈672px）窄欄，改跟全站容器同寬 1180px：
 * privacy/terms 的 <main class="z-doc"> 是頁面最外層容器（外面沒有 max-w-[clamp(1180px,96vw,1600px)] 包），
 * 所以寬度得由本規則自己給；寫 max-width:none 會整段貼齊視窗（寬螢幕行長失控）。
 * 行高／字級維持原值，只放寬版面。 */
.z-doc{max-width:var(--page-max);margin:0 auto;font-size:1.02rem}
.z-doc h2{
  font-family:'Noto Serif TC',serif;letter-spacing:.05em;line-height:1.3;
  font-size:1.35rem;font-weight:700;color:var(--ink);
  margin:2.8rem 0 .9rem;scroll-margin-top:5rem;
}
.z-doc h3{font-weight:700;margin:1.6rem 0 .5rem}
.z-doc p{margin:.7rem 0}
.z-doc ul{list-style:disc;padding-left:1.4rem;margin:.7rem 0}
.z-doc li{margin:.4rem 0}
.z-doc a{color:var(--pine);font-weight:700;text-decoration:none}
.z-doc a:hover{color:var(--pine-deep);text-decoration:underline}
.z-doc .callout{
  background:var(--pine-mist);border:1px solid #D3E0DA;border-radius:14px;
  padding:1.3rem 1.5rem;margin:1.5rem 0;
}
.z-doc .callout--warm{background:var(--paper-warm);border-color:var(--line)}

/* ── Toast（全站共用；回饋11批⑯：改畫面正中央——頂端/底部小字用戶看不到就胡亂按確認） ── */
.z-toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,calc(-50% + 10px));
  padding:.85rem 1.6rem;border-radius:14px;max-width:min(90vw,26rem);text-align:center;
  background:var(--ink);color:var(--paper);
  font-size:.95rem;font-weight:700;box-shadow:var(--shadow-lift);
  opacity:0;pointer-events:none;z-index:120;
  transition:opacity .3s ease,transform .3s ease;
}
.z-toast.show{opacity:1;transform:translate(-50%,-50%)}

/* ═══ ADMIN V2（2026-08-29，SPEC-ADMIN-V2 §1）：後台浮水印 footer ═══
 * 後台不需要對外頁的四欄大 footer，只要「深墨底＋一行版權」的浮水印帶。
 * 沿用 .z-footer（底＝--ink）＋ .ft-in（1180 容器）＋ .ft-bot（底列 flex），
 * 這裡只調 chrome：窄 padding、去掉 .ft-bot 的上分隔線（slim 版沒有上半部可分隔）。
 * 對比：版權字 rgba(247,244,238,.62) 對 --ink ≈ 6.0:1、連結 .72 ≈ 7.4:1 → 過 WCAG AA。
 * ⚠ 只掛在 --slim 修飾子上，不波及 .z-footer 基底與 --big。 */
.z-footer--slim{
  margin-top:56px;
  border-radius:24px 24px 0 0;
  padding:20px 0;
  font-size:14px;
  color:rgba(247,244,238,.80);
}
.z-footer--slim .ft-bot{border-top:none;padding-top:0}
@media (max-width:640px){
  .z-footer--slim{margin-top:40px;padding:18px 0;border-radius:20px 20px 0 0}
}

/* ── prefers-reduced-motion：全停 ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .enso-breathe,.z-sound-btn.on{animation:none}
  .z-btn,.z-card,.z-sound-btn,.z-toast,.nav-item{transition:none}
  .z-btn:hover,.z-card:hover,.z-sound-btn:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   【WB2 檔尾區塊】SPEC-CT-V3 §4-2／§4-5：後台純 SVG 圖表 ＋ §5 按鈕溢出體檢
   ⚠ 只新增 .ct-* 前綴 class 與 --ct-* 圖表色（不覆寫任何既有 token／既有 class）。
   ⚠ 只服務 admin/index.html；member.html 的檔尾區塊由 WM 另開，請勿混寫。
   ═══════════════════════════════════════════════════════════════ */

/* ── 圖表色階（由既有 --pine／--gold 衍生，不動原 token）──
 * 五方案由淺到深＋貴賓走茶金；每一階對白底 ≥3:1（非文字用色 AA 標準）。 */
:root{
  --ct-trial:    #C7D6CF;
  --ct-basic:    #93B3A6;
  --ct-pro:      #5E8B7A;
  --ct-advanced: #2F5D50;   /* = --pine */
  --ct-vip:      #A9713B;   /* = --gold */
  --ct-none:     #CFC8BA;
  --ct-new:      #8A5A2C;   /* 新增數折線 = --gold-ink */
  --ct-income:   #2F5D50;
  --ct-expense:  #A4463B;
  --ct-net:      #8A5A2C;
  --ct-grid:     #E4DDD0;   /* = --line */
}

/* 圖表卡：SVG 一律 width:100% + viewBox 等比縮放；窄螢幕靠自己的 overflow-x 捲，
 * 不讓外層版面出現橫向捲軸（admin-layout 已用 minmax(0,1fr) 收邊）。 */
.ct-chart{width:100%;overflow-x:auto;overflow-y:hidden}
.ct-chart svg{display:block;width:100%;height:auto;min-width:520px;font-family:inherit}
/* 圓環圖：單欄版面（≤lg）時外框會被拉到整頁寬 → 直徑爆大，這裡封頂並置中 */
.ct-chart--sm{max-width:230px;margin:0 auto;overflow:visible}
.ct-chart--sm svg{min-width:0}
.ct-chart text{fill:var(--ink-soft);font-size:11px}
.ct-chart .ct-axis{stroke:var(--ct-grid);stroke-width:1}
.ct-chart .ct-vlab{fill:var(--ink-soft);font-size:10px}
.ct-chart .ct-val{fill:var(--ink);font-size:10px;font-weight:700}
.ct-chart .ct-bar{transition:opacity .18s ease}
.ct-chart .ct-bar:hover{opacity:.78}
.ct-chart .ct-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-chart .ct-dot{stroke:#fff;stroke-width:1.5}

/* 圖例（chip 一律 nowrap，避免 §5 的截字） */
.ct-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:.6rem}
.ct-legend span{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;
  color:var(--ink-soft);white-space:nowrap;flex:none}
.ct-legend i{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block}
.ct-legend i.ct-i-line{height:3px;border-radius:2px;width:16px}

/* 輪廓分析：水平條 */
.ct-hbar{display:flex;align-items:center;gap:9px;font-size:.8rem;margin:.32rem 0}
.ct-hbar .ct-hk{flex:none;width:5.2rem;color:var(--ink-soft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ct-hbar .ct-ht{flex:1;min-width:0;height:11px;border-radius:999px;background:var(--paper-warm)}
.ct-hbar .ct-hf{display:block;height:11px;border-radius:999px;background:var(--pine)}
.ct-hbar .ct-hn{flex:none;width:4.6rem;text-align:right;font-size:.72rem;
  color:var(--ink-soft);white-space:nowrap;
  font-family:ui-monospace,Consolas,monospace}

/* 分段切換（月／季／年） */
.ct-seg{display:inline-flex;gap:3px;background:var(--paper-warm);border:1px solid var(--line);
  border-radius:999px;padding:3px;flex:none}
.ct-seg button{font-family:inherit;font-size:.76rem;font-weight:700;color:var(--ink-soft);
  background:transparent;border:none;border-radius:999px;padding:.24rem .8rem;cursor:pointer;
  white-space:nowrap;transition:background .18s ease,color .18s ease}
.ct-seg button:hover{color:var(--pine)}
.ct-seg button.on{background:var(--pine);color:#fff}

/* 發信中心：逐封預覽 */
.ct-step{display:flex;align-items:center;gap:8px;margin:0 0 .55rem}
.ct-step .ct-no{flex:none;width:22px;height:22px;border-radius:999px;background:var(--pine);
  color:#fff;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.ct-step .ct-tt{font-weight:700;font-size:.9rem;color:var(--ink)}
.ct-mailbox{background:var(--paper-warm);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem}
.ct-mailbox .ct-mb-sub{font-weight:700;color:var(--ink);margin-bottom:.5rem;white-space:normal;word-break:break-word}
.ct-mailbox .ct-mb-body{font-size:.85rem;line-height:1.85;white-space:pre-wrap;word-break:break-word;
  background:#fff;border-radius:11px;padding:.8rem .95rem;border:1px solid var(--line)}

/* 回饋對話串（官方／會員雙向） */
.ct-thread{display:flex;flex-direction:column;gap:8px}
.ct-msg{max-width:88%;border-radius:14px;padding:.6rem .85rem;font-size:.85rem;line-height:1.75;
  white-space:pre-wrap;word-break:break-word}
.ct-msg .ct-msg-h{font-size:.68rem;font-weight:700;letter-spacing:.04em;margin-bottom:.2rem;opacity:.8}
.ct-msg--m{align-self:flex-start;background:var(--paper-warm);color:var(--ink)}
.ct-msg--o{align-self:flex-end;background:var(--pine-mist);color:var(--pine-deep)}

/* §5 的表格／按鈕溢出修正刻意「不」放在這裡：
 * .tbl / .st / .pg 是 app/report・flow・score 三支也在用的 class，
 * 寫進共用檔會連帶改到別條線的頁面（例如 .tbl .z-btn--sm 的 padding）。
 * → 那組規則收在 admin/index.html 自己的 <style> 內，只影響後台。
 * 這裡只留 .ct-* 圖表 class（前綴專用，與 WM 的 .mc-* 零交集）。 */
.ct-seg button{min-width:max-content}

/* ═══════════════════════════════════════════════════════════════
   SPEC-CT-V4 §3（WB3）新增：產品線 chips／表頭排序／收件者選取器／
   模擬產品卡／星等／四新分頁 — 一律 .ct-* 前綴，不覆寫任何既有 class。
   ═══════════════════════════════════════════════════════════════ */

/* ── 產品線切換 chips（總覽／會員管理／記帳 三處同一套外觀）──
 * 與 .ct-seg 的差別：chips 會換行（產品線最多可到 5+ 條），seg 是三格固定不換行。 */
.ct-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ct-chips button{
  font-family:inherit;font-size:.78rem;font-weight:700;color:var(--ink-soft);
  background:var(--paper-warm);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .85rem;cursor:pointer;white-space:nowrap;flex:none;min-width:max-content;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ct-chips button:hover{color:var(--pine);border-color:var(--pine)}
.ct-chips button.on{background:var(--pine);border-color:var(--pine);color:#fff}
.ct-chips button.on:hover{color:#fff}

/* ── 表頭雙向排序（會員管理／用戶回饋）──
 * th 內放一顆透明 button＝鍵盤可 tab 到、螢幕閱讀器唸得到；箭頭固定寬避免點一下整欄跳動。 */
.ct-sort{
  display:inline-flex;align-items:center;gap:.28rem;font:inherit;font-size:inherit;
  font-weight:700;letter-spacing:inherit;color:inherit;background:transparent;border:none;
  padding:0;margin:0;cursor:pointer;white-space:nowrap;
}
.ct-sort:hover{color:var(--pine)}
.ct-sort .ct-ar{flex:none;width:.85em;text-align:center;font-size:.85em;opacity:.4}
.ct-sort.on{color:var(--pine)}
.ct-sort.on .ct-ar{opacity:1}

/* ── 收件者選取器（彈跳視窗）── */
.ct-picker{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.ct-picker .ct-pk-list{max-height:44vh;overflow-y:auto}
.ct-picker .ct-pk-row{
  display:flex;align-items:center;gap:.7rem;padding:.5rem .85rem;font-size:.85rem;
  border-bottom:1px solid var(--line);cursor:pointer;
}
.ct-picker .ct-pk-row:last-child{border-bottom:none}
.ct-picker .ct-pk-row:hover{background:var(--pine-mist)}
.ct-picker .ct-pk-n{flex:1;min-width:0}
.ct-picker .ct-pk-n b{display:block;font-weight:700;color:var(--ink);word-break:break-word}
.ct-picker .ct-pk-n span{display:block;font-size:.72rem;color:var(--ink-soft);word-break:break-all}
.ct-picker .ct-pk-empty{padding:2.2rem 1rem;text-align:center;font-size:.85rem;color:var(--ink-soft)}

/* ── 星等（好評回饋）── */
.ct-star{font-size:.86rem;letter-spacing:.06em;color:var(--gold-ink);white-space:nowrap;flex:none}
.ct-star--low{color:#8E3327}

/* ── SPEC-CT-V6 §5 單行省略（後台回饋主旨/內容・公告內容/建立者）──
 * 表格欄寬鎖定後，長文字一律靠這支收住：單行、超出打 …，全文掛 title（hover 可讀），
 * 完整內容在詳情 modal。min-width:0 是 flex/grid 容器內的保底（否則 min-content 會撐開父層）。
 * 最大寬度由使用端 inline style 給（各欄不同），這裡不寫死。 */
.ct-ell{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 模擬產品卡（記帳／戰情：殼・未上線）──
 * 虛線框＋無陰影＝一眼看出「不是真設定」，與真卡（報點）站在同一排也不會被誤點。 */
.ct-sim{border-style:dashed;background:rgba(255,255,255,.6);box-shadow:none}
.ct-simtag{
  display:inline-flex;align-items:center;padding:.14rem .62rem;border-radius:999px;
  font-size:.68rem;font-weight:700;white-space:nowrap;flex:none;
  background:#F1E6D8;color:var(--gold-ink);
}
.ct-price{width:100%;border-collapse:collapse;font-size:.83rem}
.ct-price th,.ct-price td{padding:.34rem .5rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.ct-price th{font-size:.7rem;font-weight:700;color:var(--ink-soft);letter-spacing:.05em}
.ct-price td.num{text-align:right;font-family:ui-monospace,Consolas,monospace}
.ct-price tr:last-child td{border-bottom:none}

/* ── 公告條（後台頂部；等級 info／warn 兩色，均對底 ≥4.5:1）── */
.ct-ann{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem .8rem;
  border-radius:14px;padding:.75rem 1.05rem;margin-bottom:.65rem;
  font-size:.86rem;line-height:1.7;
}
.ct-ann .ct-ann-i{flex:none}
.ct-ann .ct-ann-t{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.ct-ann--info{background:var(--pine-mist);color:var(--pine-deep);border:1px solid #D3E0DA}
.ct-ann--warn{background:#F7E9CF;color:#7A5411;border:1px solid #E7D3A8}

/* ── DEMO footer 增項（§3.7：模擬產品連結，外觀貼齊 .ft-bot a）── */
.z-footer .ct-ftdemo{
  font-family:inherit;font-size:inherit;background:transparent;border:none;padding:0;
  cursor:pointer;color:rgba(247,244,238,.72);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;
}
.z-footer .ct-ftdemo:hover{color:#fff}

/* ═══════════════════════════════════════════════════════════════
   【WM 檔尾區塊】SPEC-CT-V3 §1：會員中心 member.html v2（活動平台式版型）
   ⚠ 只新增 .mc-* 前綴 class（member center）＋搬入 .nt-sw；不覆寫任何既有 token／class。
   ⚠ 只服務 member.html；後台的 .ct-* / .admin-* / .demo-flag 由 WB2 管，兩區塊零交集
     （命名前綴不同、選擇器不重疊；Tailwind 也沒有 mc- 前綴的 utility）。
   色彩全部沿用既有 token，未新增 :root 色票。
   ═══════════════════════════════════════════════════════════════ */

/* ── 版型：左側 sticky 側欄 206px ＋ 右側 pane ──
 * ⚠ 祖先不得有 overflow:hidden，否則 position:sticky 會失效（member.html 的 <main>
 *   已為此拿掉 overflow-hidden）。 */
.mc-layout{display:grid;grid-template-columns:206px minmax(0,1fr);gap:20px;align-items:start}
.mc-pane{min-width:0}
.mc-nav{
  position:sticky;top:76px;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;
  box-shadow:var(--shadow);--icow:21px;
}
/* 側欄共用一條 icon 欄（--icow 21px＝14px 字的 1.5em）＝四顆分頁鈕文字起點同一個 x */
.mc-nav .ico{width:var(--icow)}
.mc-nav button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-family:inherit;
  font-size:14px;font-weight:800;color:var(--ink);background:transparent;
  border:1px solid transparent;border-radius:10px;padding:9px 12px;cursor:pointer;
  white-space:nowrap;transition:background .18s ease,color .18s ease;
}
.mc-nav button:hover{background:var(--pine-mist);color:var(--pine)}
.mc-nav button.on{background:var(--pine);border-color:var(--pine);color:#fff}
.mc-nav .mc-who{
  display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--ink-soft);line-height:1.75;
  padding:2px 12px 10px;border-bottom:1px dashed var(--line);margin-bottom:6px;
}
.mc-nav .mc-who .mc-who-t{min-width:0;word-break:break-all}
@media(max-width:900px){
  /* ⚠ 必須 minmax(0,1fr)：純 1fr＝minmax(auto,1fr)，min-content 下限會被長內容撐開 → 整頁橫捲。 */
  .mc-layout{grid-template-columns:minmax(0,1fr)}
  .mc-nav{position:static!important;flex-direction:row;overflow-x:auto;gap:8px;padding:10px}
  .mc-nav .mc-who{display:none}
  .mc-nav button{width:auto;flex:none}
}

/* ── §1-5 DEMO 會員視角橫幅（深紅；#fff on #7C2D33 ≈ 8.9:1 過 AA）──
 * 與後台 .demo-flag 同一個視覺語言，但獨立命名，兩檔互不覆蓋。 */
.mc-flag{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  background:#7C2D33;color:#fff;border-radius:14px;padding:12px 16px;
  font-size:.9rem;font-weight:700;box-shadow:var(--shadow);
}
.mc-flag .mf-sub{font-weight:400;font-size:.8rem;color:rgba(255,255,255,.86);flex:1 1 240px;min-width:0}
.mc-flag label{font-size:.78rem;font-weight:400;color:rgba(255,255,255,.86);white-space:nowrap;flex:none}
.mc-flag select{
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55);
  border-radius:9px;padding:.3rem .55rem;margin-left:.3rem;
  font-size:.8rem;font-weight:700;font-family:inherit;
}
.mc-flag select option{color:var(--ink);background:#fff}
.mc-flag .mf-x{
  display:inline-flex;align-items:center;background:transparent;
  border:1.5px solid rgba(255,255,255,.6);border-radius:999px;
  padding:.3rem .9rem;font-size:.8rem;font-weight:700;font-family:inherit;
  text-decoration:none;cursor:pointer;flex:none;white-space:nowrap;
}
.mc-flag .mf-x,.mc-flag .mf-x:hover{color:#fff}
.mc-flag .mf-x:hover{background:rgba(255,255,255,.16)}

/* ── 表單欄位（個人資訊／onboarding 補資料卡／回饋表單共用）── */
.mc-lb{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft);margin-bottom:.3rem}
.mc-in,.mc-sel,.mc-ta{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:.55rem .75rem;font-family:inherit;font-size:.9rem;color:var(--ink);
}
.mc-ta{min-height:7rem;line-height:1.75;resize:vertical}
.mc-in:focus,.mc-sel:focus,.mc-ta:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-mist)}
.mc-ro{
  font-family:ui-monospace,Consolas,monospace;font-size:.86rem;
  background:var(--paper-warm);border-radius:12px;padding:.55rem .75rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── 鍵值列（訂閱摘要／歷史訂閱列）── */
.mc-kv{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px dashed var(--line);font-size:.88rem;color:var(--ink-soft)}
.mc-kv:last-child{border-bottom:none}
.mc-kv b{color:var(--ink);font-weight:700;text-align:right;min-width:0;word-break:break-word}

/* ── §1-2 延伸模組縮牌（只有名稱＋進入鈕，不放方案資訊）── */
.mc-tile{
  display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:.9rem 1.1rem;box-shadow:var(--shadow);
}
.mc-tile .mt-e{font-size:1.35rem;line-height:1;flex:none}
.mc-tile .mt-n{flex:1;min-width:0;font-family:'Noto Serif TC',serif;font-weight:700;font-size:1rem}
.mc-tile .z-btn{flex:none;min-width:max-content;white-space:nowrap}
.mc-tile--off{background:rgba(255,255,255,.55);border-style:dashed;border-color:#D6CEBF;box-shadow:none}
.mc-tile--off .mt-n{color:var(--ink-soft)}

/* ── §1-2 我的回饋討論串（含官方回覆）── */
.mc-th{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.15rem;box-shadow:var(--shadow)}
.mc-th + .mc-th{margin-top:.75rem}
.mc-th .mh{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem}
.mc-th .mh .mh-t{font-weight:700;font-size:.95rem;min-width:0;word-break:break-word}
.mc-th .mb{font-size:.88rem;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.mc-re{margin-top:.7rem;border-left:3px solid var(--pine);background:var(--pine-mist);
  border-radius:0 12px 12px 0;padding:.6rem .9rem;font-size:.85rem;line-height:1.8;
  white-space:pre-wrap;word-break:break-word}
.mc-re--me{border-left-color:var(--gold);background:var(--paper-warm)}
.mc-re .mr-w{display:block;font-size:.7rem;font-weight:700;color:var(--ink-soft);margin-bottom:.15rem}

/* ── 通知開關（原內嵌於 member.html 頁內 <style>，改收本檔以便 WX3 一處查）── */
.nt-sw{position:relative;width:38px;height:22px;border-radius:999px;background:var(--line);
  cursor:pointer;flex:none;border:none;padding:0;transition:background .2s ease}
.nt-sw::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.nt-sw.on{background:var(--pine)}
.nt-sw.on::after{transform:translateX(16px)}

/* ── §5 member 側按鈕不截字（與 WB2 的 .tbl 體檢同原則，範圍只在 .mc-*）── */
.mc-pane .z-btn{min-width:max-content;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   SPEC-CT-V4 §4：會員中心 v3 追加（沿用同一個 .mc-* 前綴與既有色 token，
   未新增 :root 色票、未覆寫任何既有 class；與 WB3 的 .ct-* 區塊零交集）
   ═══════════════════════════════════════════════════════════════ */

/* ── §4-1 必填標記與缺欄紅框 ── */
.mc-req{
  display:inline-block;margin-left:.35rem;font-style:normal;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;
  color:#A4463B;background:rgba(164,70,59,.10);
  border-radius:999px;padding:.05rem .38rem;vertical-align:.06em;
}
.mc-in.mc-bad,.mc-sel.mc-bad,.mc-ta.mc-bad{border-color:#A4463B;background:rgba(164,70,59,.05)}
.mc-in.mc-bad:focus,.mc-sel.mc-bad:focus,.mc-ta.mc-bad:focus{
  border-color:#A4463B;box-shadow:0 0 0 3px rgba(164,70,59,.16)
}

/* ── §4-4 頂部提醒區（公告在上、到期提醒在下；兩者皆空＝不佔任何高度）── */
.mc-notices{display:flex;flex-direction:column;gap:.6rem}
.mc-notices:not(:empty){margin-bottom:1.5rem}
.mc-notices>div{display:flex;flex-direction:column;gap:.6rem}
.mc-notices>div:empty{display:none}
.mc-note{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;
  border-radius:14px;padding:.8rem 1.1rem;font-size:.9rem;line-height:1.7;
  border:1px solid transparent;
}
.mc-note .mc-note-i{font-size:1.05rem;line-height:1;flex:none}
.mc-note .mc-note-t{flex:1 1 16rem;min-width:0;font-weight:700;word-break:break-word}
.mc-note .mc-note-b{
  flex:none;white-space:nowrap;cursor:pointer;font-family:inherit;
  font-size:.78rem;font-weight:700;border-radius:999px;padding:.32rem .85rem;
  background:transparent;border:1.5px solid currentColor;color:inherit;
  transition:background .18s ease;
}
.mc-note .mc-note-b:hover{background:rgba(255,255,255,.5)}
/* 四階：一般公告(info)＜到期在即(soon)＜重要公告(warn)＝已到期(due)
   對比：pine-deep on pine-mist ≈ 8.6:1／gold-ink on paper-warm ≈ 5.1:1／#A4463B on 紅淡底 ≈ 5.3:1（皆過 AA） */
.mc-note--info{background:var(--pine-mist);border-color:#CBDAD2;color:var(--pine-deep)}
.mc-note--soon{background:var(--paper-warm);border-color:#DCCFB6;color:var(--gold-ink)}
.mc-note--warn,
.mc-note--due {background:rgba(164,70,59,.08);border-color:rgba(164,70,59,.28);color:#A4463B}

/* 提醒條的「查看產品清單 →」落點：閃兩下金框把該張卡指出來 */
.mc-hl{animation:mcHl 2.4s ease-out 1}
@keyframes mcHl{
  0%,100%{box-shadow:var(--shadow)}
  12%,62%{box-shadow:0 0 0 3px var(--gold),var(--shadow-lift)}
  37%    {box-shadow:0 0 0 1px var(--gold),var(--shadow)}
}

/* ── §4-2 好評星等 ── */
.mc-stars{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.mc-star{
  background:transparent;border:none;padding:0 .1rem;cursor:pointer;
  font-size:1.7rem;line-height:1.15;color:#CFC7B6;
  transition:color .15s ease,transform .15s ease;
}
.mc-star:hover{transform:translateY(-1px)}
.mc-star.on{color:var(--gold)}
.mc-star:focus-visible{outline:2px solid var(--pine);outline-offset:2px;border-radius:6px}
.mc-stars .mc-star-t{margin-left:.5rem;font-size:.78rem;font-weight:700;color:var(--ink-soft)}

/* ── §4-2 回饋兩類標示（🌟好評／🛠問題）── */
.mc-tag{
  display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  border-radius:999px;padding:.16rem .6rem;white-space:nowrap;flex:none;
}
.mc-tag--praise{background:rgba(169,113,59,.14);color:var(--gold-ink)}
.mc-tag--issue {background:var(--pine-mist);color:var(--pine-deep)}
.mc-tag .mc-tag-s{letter-spacing:.02em;color:var(--gold)}

/* ── §4-2 同串追問輸入列 ── */
.mc-rebox{display:flex;align-items:center;gap:.5rem;margin-top:.75rem}
.mc-rebox .mc-in{flex:1;min-width:0;font-size:.85rem;padding:.45rem .7rem}
.mc-rebox .z-btn{flex:none}
@media(max-width:520px){
  .mc-rebox{flex-wrap:wrap}
  .mc-rebox .mc-in{flex:1 1 100%}
}

/* ── §4-3 其他產品線卡（記帳／戰情）：殼卡＝虛線邊，與已訂閱卡一眼分得出來 ── */
.mc-line .mc-line-e{font-size:1.5rem;line-height:1;flex:none}
.mc-line--soon{background:rgba(255,255,255,.55);border-style:dashed;border-color:#D6CEBF;box-shadow:none}

/* ═══════════════════════════════════════════════════════════════
   SPEC-CT-V6 §3／§4：會員中心（訂閱分系統區段＋我的回饋篩選 chips）
   同樣只新增 .mc-* 前綴 class，未覆寫任何既有 token／class
   ═══════════════════════════════════════════════════════════════ */

/* ── §3 訂閱紀錄：每條產品線一段（標題列＋目前方案卡＋該線歷史）── */
.mc-subsec{margin-top:1.75rem}
.mc-subsec:first-child{margin-top:1.5rem}
.mc-subhd{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin-bottom:.75rem}
.mc-subhd h3{min-width:0;word-break:break-word}
.mc-subhd .mc-sube{font-size:1.35rem;line-height:1;flex:none}
.mc-subh4{
  font-family:'Noto Serif TC',serif;font-weight:700;font-size:.95rem;
  display:flex;align-items:baseline;gap:.5rem;margin:1.1rem 0 .7rem;
}
.mc-subh4 .mc-subn{font-family:inherit;font-size:.72rem;font-weight:700;color:var(--ink-soft)}

/* ── §4 我的回饋篩選 chips（兩排：型別／產品，各帶筆數）── */
.mc-fbf{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.9rem}
.mc-fbr{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.mc-fbl{
  flex:none;font-size:.72rem;font-weight:700;color:var(--ink-soft);
  min-width:2.6rem;letter-spacing:.06em;
}
.mc-fbc{
  display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:700;line-height:1.4;
  border-radius:999px;padding:.3rem .75rem;white-space:nowrap;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.mc-fbc:hover{background:var(--pine-mist);border-color:#CBDAD2;color:var(--pine-deep)}
.mc-fbc i{
  font-style:normal;font-size:.68rem;font-weight:700;
  border-radius:999px;padding:.02rem .38rem;
  background:var(--paper-warm);color:var(--ink-soft);
}
.mc-fbc.on{background:var(--pine);border-color:var(--pine);color:#fff}
.mc-fbc.on i{background:rgba(255,255,255,.22);color:#fff}
.mc-fbc:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
/* 0 筆＝淡化但仍可按（按下去看到的是空結果提示，不是壞掉的畫面） */
.mc-fbc--0:not(.on){opacity:.5}
@media(max-width:520px){
  .mc-fbf{gap:.4rem}
  .mc-fbl{min-width:100%}
}

/* ── V6.1 產品線切換卡（訂閱紀錄／產品清單共用）：點哪條線就只顯示哪條 ── */
.mc-lsw{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.25rem 0 1.4rem}
#subLsw{margin-bottom:0}                    /* 訂閱紀錄：切換卡貼著下方線區段的上緣間距 */
.mc-lsw-b{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:'Noto Serif TC',serif;font-size:.9rem;font-weight:700;line-height:1.3;
  border-radius:.9rem;padding:.65rem 1.05rem;
  background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);
  box-shadow:0 1px 3px rgba(43,58,51,.06);
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.mc-lsw-b .mc-lsw-e{font-size:1.2rem;line-height:1;flex:none}
.mc-lsw-b:hover{background:var(--pine-mist);border-color:#CBDAD2;color:var(--pine-deep)}
.mc-lsw-b.on{background:var(--pine);border-color:var(--pine);color:#fff;box-shadow:0 3px 10px rgba(43,58,51,.18)}
.mc-lsw-b:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
/* 卡上小標：未開通／已到期／即將推出 */
.mc-lsw-b i{
  font-style:normal;font-family:'Noto Sans TC',sans-serif;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;
  border-radius:999px;padding:.06rem .45rem;
  background:var(--paper-warm);color:var(--ink-soft);
}
.mc-lsw-b.on i{background:rgba(255,255,255,.22);color:#fff}
@media(max-width:520px){
  .mc-lsw{gap:.45rem}
  .mc-lsw-b{padding:.55rem .8rem;font-size:.84rem}
}

@media (prefers-reduced-motion:reduce){
  .mc-nav button,.mc-tile,.nt-sw,.nt-sw::after,.mc-star,.mc-note .mc-note-b,.mc-fbc,.mc-lsw-b{transition:none}
  .mc-hl{animation:none;box-shadow:0 0 0 3px var(--gold),var(--shadow-lift)}
}