/* 新思惟校長課 — 視覺語言 v2（2026-08-11 IC 指示重設計）
   參考來源：官網 www.innovarad.tw v3（區塊劃界：橘紅粗線＋編號眉題＋serif 大標＋背景帶交替）
             blog.ichentsai.tw（深色收框＋紙面邊界）
   三個硬需求：
   1) 有邊界、有視覺引導 —— 每個大區塊頂部一條橘紅粗線劃界，卡片一律有明確邊框，footer 深色收口
   2) 學生 30-50 歲、半數老花 —— 基準字級 18px，全站消滅 <13px 的小字，子標題明顯放大
   3) 看起來可信有效 —— serif 大標定調權威、mono 數字定調精確、克制不花俏 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&family=Noto+Sans+TC:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap');

:root{
  /* 紙面與外框：頁面最底(frame)比紙面(paper)深一階，讓內容像紙浮在桌面上（借 blog 的深色收框概念，淺色版用暖灰） */
  --frame:#e9e3d5; --paper:#ffffff; --paper-2:#f7f3ea; --paper-3:#efe9db; --card:#ffffff;
  /* 文字：對比拉高，主文近黑、次要冷灰仍 >4.5:1，老花看得清 */
  --ink:#191b20; --ink-soft:#3d414a; --muted:#6b6c74;
  --line:#ddd6c6; --line-strong:#c5bda9; --rule:#191b20;
  /* 品牌：沉穩磚紅（對齊官網 #e8412a 的沉穩同色系，IC 2026-07-03 定），tint 給重要卡片淡底 */
  --brand:#a53c2c; --brand-2:#832e21; --brand-tint:#fbeee9; --brand-tint-2:#f6ddd4;
  --accent:#b0642a; --ok:#2f7d5b; --danger:#b3263a;
  /* footer 深色收框 */
  --dark:#1b1712; --dark-2:#241f18; --dark-line:#3a3227; --dark-ink:#efe9dd; --dark-ink-2:#b8b0a0;
  --serif:"Noto Serif TC",Georgia,serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,monospace;
  --maxw:1080px; --read:680px;
}
*{box-sizing:border-box}
h1,h2,h3,h4,h5{text-wrap:balance}
p,li,.sub,.desc,.hint,.caption,.form-note,.expire,.lead{text-wrap:pretty}
/* 基準 18px 設在 root：讓全站 rem 都以 18 起算（老花友善的地基），
   1rem=18px，各元件的 .82rem 等於 ~15px，封面角標等最小字也守在 13px 以上 */
html{font-size:18px;scroll-padding-top:80px}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--frame);
  line-height:1.85;font-size:1rem;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand)}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.read{max-width:var(--read);margin-left:auto;margin-right:auto}

/* mono 眉題/圖說：全站識別語彙。字級守 13px 下限（老花），不再有 11px */
.kicker{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;
  color:var(--brand);font-weight:500;display:inline-flex;align-items:center;gap:10px;margin:0 0 14px}
.kicker::before{content:"";width:26px;height:2px;background:var(--brand)}
.caption{font-family:var(--mono);font-size:.85rem;color:var(--muted);letter-spacing:.01em}

/* ── nav：紙面、細線收邊、對齊內容寬度 ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-strong)}
.nav-in{display:flex;align-items:center;gap:22px;height:66px;max-width:var(--maxw);margin:0 auto;padding:0 26px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:900;color:var(--ink);text-decoration:none;font-size:1.18rem;letter-spacing:.01em}
.brand-ic{width:28px;height:28px;border-radius:7px;display:block;flex:0 0 auto}
.brand small{display:block;font-family:var(--mono);font-weight:400;color:var(--muted);font-size:.74rem;letter-spacing:.22em;margin-top:2px}
.nav-sp{flex:1}
.nav a.link{color:var(--ink-soft);text-decoration:none;font-size:1rem;font-weight:500;letter-spacing:.01em}
.nav a.link:hover{color:var(--brand)}

/* ── 按鈕：方正、實色、克制、夠大好按（觸控與老花） ── */
.btn{display:inline-block;border:1px solid transparent;border-radius:7px;padding:13px 26px;
  font-size:1.02rem;font-weight:700;font-family:var(--sans);cursor:pointer;text-decoration:none;transition:.16s;letter-spacing:.01em}
.theme-btn{order:9}
.nav .btn,#logout,#navLogout{order:10}
.nav .btn{font-size:1.04rem;padding:11px 22px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);color:var(--brand)}
.btn-block{display:block;width:100%;text-align:center}
.btn-lg{padding:16px 34px;font-size:1.08rem}
.nav a.link+.btn{margin-left:6px}

/* ── hero：紙面、大襯線標題、可信 fact-line ── */
.hero{background:var(--paper);border-bottom:1px solid var(--line-strong);position:relative}
.hero-in{padding-top:82px;padding-bottom:74px;max-width:840px}
.hero .status{font-family:var(--mono);font-size:.85rem;letter-spacing:.12em;
  color:var(--accent);margin:0 0 22px;display:inline-flex;align-items:center;gap:8px}
.hero .status::before{content:"●";font-size:.62rem}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.24;
  margin:0 0 24px;letter-spacing:.01em;color:var(--ink)}
.hero .fig-cap{border-left:3px solid var(--brand);padding-left:20px;margin:0 0 30px}
.hero .fig-cap p{font-size:1.18rem;line-height:1.8;color:var(--ink-soft);margin:0;max-width:620px}
/* hero 底部的可信事實列（mono、細線分隔），給人「這是真的、有憑有據」的定調 */
.hero .fact-line{font-family:var(--mono);font-size:.88rem;color:var(--muted);letter-spacing:.01em;
  margin:0 0 30px;padding-top:16px;border-top:1px solid var(--line);line-height:1.9}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .signoff{font-family:var(--mono);font-size:.88rem;color:var(--muted);margin-top:28px;letter-spacing:.01em}
.pill{display:none}

/* ── sections：背景帶交替 + 區塊劃界（橘紅粗線 + 編號 + serif 大標） ── */
section{padding:76px 0;position:relative}
.section-soft{background:var(--paper-2)}
/* 劃界裝置：官網 v3 手法。每個大區塊頂部一條 4px 橘紅粗線，最強的視覺引導 */
/* 區塊標頭：橘紅粗線劃界 + serif 大標。編號眉題已移除（IC 2026-08-11：字太小、也不需要） */
.sec-head{border-top:4px solid var(--brand);padding-top:20px;margin:0 0 42px;max-width:680px}
.sec-head .kicker{font-family:var(--mono);font-size:.85rem;font-weight:500;color:var(--muted);
  letter-spacing:.1em;margin:0;padding:0;display:block}
.sec-head .kicker::before{content:none}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.25rem);
  margin:0;letter-spacing:.01em;line-height:1.3;color:var(--ink)}
.sec-head .sub,.sec-head .lead{color:var(--ink-soft);margin:14px 0 0;font-size:1.11rem;line-height:1.8}

/* ── 課程卡：有封面色磚的商品卡，明確邊框 ── */
.ccard{display:grid;grid-template-columns:158px 1fr auto;gap:28px;align-items:center;
  background:var(--card);border:1px solid var(--line-strong);border-radius:12px;padding:24px 28px;margin-bottom:20px;
  box-shadow:0 1px 3px rgba(24,26,31,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.ccard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(165,60,44,.14);border-color:var(--brand)}
.ccover{width:158px;height:118px;border-radius:9px;display:grid;place-items:center;position:relative;overflow:hidden}
.ccover.series{background:linear-gradient(135deg,#a8402d,#6e2416)}
.ccover.talk{background:linear-gradient(135deg,#a8752c,#745018)}
.ccover.soon{filter:grayscale(.55);opacity:.75}
.ccover::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 12px,transparent 12px 24px)}
.ccover svg{width:48px;height:48px;position:relative;z-index:1}
.ccover .cnt{position:absolute;bottom:9px;right:11px;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;
  color:#fff;background:rgba(0,0,0,.34);padding:2px 10px;border-radius:99px;z-index:1}
.ccard .main .tag{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--brand);font-weight:500}
.ccard h3{font-family:var(--serif);font-weight:700;font-size:1.5rem;margin:5px 0 8px;line-height:1.35}
.ccard .desc{color:var(--ink-soft);font-size:1.04rem;line-height:1.7;margin:0;max-width:540px}
.chip{display:inline-block;font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;color:var(--brand);
  border:1px solid var(--line-strong);border-radius:99px;padding:4px 13px;margin:12px 8px 0 0}
.ccard .side{text-align:right;white-space:nowrap}
.ccard .price{font-family:var(--mono);font-size:1.7rem;font-weight:500;color:var(--ink)}
.ccard .price small{display:block;font-size:.82rem;color:var(--muted);letter-spacing:.03em;margin:4px 0 16px}
.btn-buy{background:var(--brand);color:#fff;padding:14px 36px;font-size:1.06rem;box-shadow:0 3px 10px rgba(165,60,44,.28)}
.btn-buy:hover{background:var(--brand-2);color:#fff}
body.theme-dark .ccard:hover{box-shadow:0 16px 36px rgba(0,0,0,.5)}
body.theme-dark .btn-buy{color:#15171b;box-shadow:0 3px 10px rgba(0,0,0,.4)}
/* 課程群組眉題（catalog JS 產生）：次於 sec-head，用細橘線分隔 */
.cgroup{margin:0 0 16px}
.cgroup:not(:first-child){margin-top:40px}
.cgroup .gname{font-family:var(--mono);font-size:.85rem;font-weight:500;color:var(--brand);letter-spacing:.06em;
  padding-top:12px;border-top:2px solid var(--brand);display:inline-block}
.cgroup .gtag{color:var(--ink-soft);font-size:1.04rem;margin:8px 0 0}

/* ── 怎麼上課：有邊界的卡片格（不再是無盒清單，回應 IC「要邊界」） ── */
.howgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(304px,1fr));gap:18px}
.howcard{background:var(--card);border:1px solid var(--line-strong);border-radius:12px;
  border-top:3px solid var(--brand);padding:24px 26px}
/* 編號併進標題（IC 2026-08-11：獨立的 01 太小，合併成「1. 用你的步調學」），
   序號用橘紅色與標題同一級字，不再是另一行小字 */
.howcard h4{font-family:var(--serif);font-weight:700;font-size:1.34rem;margin:0 0 8px;line-height:1.4}
.howcard h4 .n{color:var(--brand);margin-right:2px}
.howcard p{margin:0;color:var(--ink-soft);font-size:1.04rem;line-height:1.75}

/* 舊 numlist 保留（其他頁若引用）：升級字級 */
.numlist{border-top:1px solid var(--line)}
.numlist .row{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.numlist .n{font-family:var(--mono);font-size:1.1rem;color:var(--brand);font-weight:500}
.numlist h4{font-family:var(--serif);font-weight:700;font-size:1.3rem;margin:0 0 6px}
.numlist p{margin:0;color:var(--ink-soft);font-size:1.04rem;max-width:580px}

/* 舊編輯型目錄列（其他頁備用） */
.catalog{border-top:1px solid var(--line-strong)}
.entry{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--line)}
.entry .idx{font-family:var(--mono);font-size:.9rem;color:var(--muted);padding-top:6px;letter-spacing:.03em}
.entry .main .tag{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--brand);display:block;margin:0 0 8px}
.entry .main .tag.free{color:var(--accent)}
.entry h3{font-family:var(--serif);font-weight:700;font-size:1.5rem;margin:0 0 6px;line-height:1.35}
.entry .desc{color:var(--ink-soft);font-size:1.04rem;margin:8px 0 0;max-width:580px}
.entry .side{text-align:right;white-space:nowrap;padding-top:4px}
.entry .price{font-family:var(--mono);font-size:1.4rem;font-weight:500;color:var(--ink)}
.entry .price small{display:block;font-size:.82rem;color:var(--muted);letter-spacing:.03em;margin-bottom:12px}
.entry .side .btn{margin-top:6px}
.entry .dur{font-family:var(--mono);font-size:.85rem;color:var(--muted);margin-top:10px}

/* ── 我的課程：進度環 + 目錄式列 ── */
.mycourse{background:var(--card);border:1px solid var(--line-strong);border-radius:12px;
  border-top:3px solid var(--brand);padding:28px;margin-bottom:24px}
.mc-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.ring-wrap{position:relative;width:88px;height:88px;flex:0 0 auto}
.ring{width:88px;height:88px;border-radius:50%;
  background:conic-gradient(var(--brand) calc(var(--p,0)*1%),#e6e0d3 0)}
.ring::before{content:"";position:absolute;top:11px;left:11px;width:66px;height:66px;background:var(--card);border-radius:50%}
.ring-wrap b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:1.08rem;color:var(--brand);font-weight:500}
.mc-head h3{font-family:var(--serif);font-weight:700;margin:0 0 4px;font-size:1.4rem}
.mc-head .expire{font-family:var(--mono);font-size:.98rem;color:var(--muted);letter-spacing:.01em}
.mc-head .expire.soon{color:var(--accent);font-weight:500}
.mc-list{margin-top:20px;border-top:1px solid var(--line)}
.vrow{display:flex;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid var(--line)}
.vrow .chk{width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:.9rem;color:#fff}
.vrow .chk.done{background:var(--ok);border-color:var(--ok)}
.vrow .vt{flex:1;font-size:1.14rem;font-weight:500}
.vrow .vt small{display:block;color:var(--muted);font-family:var(--mono);font-size:.95rem;margin-top:4px;font-weight:400}
.bar{height:8px;background:#e6e0d3;border-radius:99px;overflow:hidden;margin-top:8px;max-width:340px}
.bar i{display:block;height:100%;background:var(--brand)}
.vrow a.play{font-size:1.04rem;white-space:nowrap;font-weight:700}
.vrow a.v-reset{font-size:.95rem;color:var(--muted);white-space:nowrap;margin-left:14px}
.vrow a.v-reset:hover{color:var(--danger)}
.banner-soon{background:#fbf1e4;border:1px solid #ecd7b8;color:#8a531c;border-radius:8px;
  padding:12px 17px;font-family:var(--mono);font-size:.92rem;margin-bottom:20px;letter-spacing:.01em}

/* 按鈕忙碌狀態 */
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn[disabled]{opacity:.75;cursor:default}

/* ── 表單：紙感、細框、方正、字級加大 ── */
.card{background:var(--card);border:1px solid var(--line-strong);border-radius:12px;
  border-top:3px solid var(--brand);padding:40px;max-width:490px;margin:0 auto}
.card h1{font-family:var(--serif);font-weight:900;font-size:1.8rem;margin:0 0 6px}
.card p.hint{color:var(--ink-soft);font-size:1.02rem;margin:0 0 26px;line-height:1.7}
label{display:block;font-weight:700;font-size:.98rem;margin:18px 0 8px;letter-spacing:.01em}
input[type=text],input[type=tel],input[type=email]{width:100%;padding:14px 16px;border:1px solid var(--line-strong);
  border-radius:7px;font-size:1.06rem;font-family:inherit;background:var(--paper)}
input,textarea,select{color:var(--ink)}
::placeholder{color:var(--muted);opacity:1}
input:focus{outline:none;border-color:var(--brand);background:#fff}
body.theme-dark input:focus,body.theme-dark textarea:focus{background:#101216}
.checkline{display:flex;gap:12px;align-items:flex-start;margin:20px 0;font-size:1rem;color:var(--ink-soft);line-height:1.7}
.checkline input{margin-top:5px;width:18px;height:18px;flex:0 0 auto}
.form-note{font-size:.9rem;color:var(--muted);margin-top:15px;line-height:1.75;font-family:var(--mono);letter-spacing:.01em}
.otp-row{display:flex;gap:10px}
.otp-row input{letter-spacing:8px;text-align:center;font-size:1.5rem;font-family:var(--mono)}

/* 價格卡（結帳） */
.buybox{background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:10px;padding:20px;margin:8px 0}
.buybox strong{font-family:var(--serif);font-size:1.24rem;font-weight:700}
.buybox .price{font-family:var(--mono);font-size:1.7rem;margin-top:8px;color:var(--ink)}

/* player */
.player-wrap{background:#111;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;color:#fff}
.player-ph{text-align:center;color:#a9a196;padding:40px;font-family:var(--mono);font-size:.98rem;line-height:1.9}
.wm{position:absolute;color:rgba(255,255,255,.5);font-family:var(--mono);font-size:.9rem;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* ── footer：深色收框（借 blog 深色底），給頁面一個「收口」的邊界 ── */
.foot-site{border-top:4px solid var(--brand);background:var(--dark);padding:52px 0 44px;margin-top:0;
  color:var(--dark-ink-2);font-size:.98rem}
.foot-site a{color:var(--dark-ink-2);text-decoration:none}
.foot-site a:hover{color:#fff}
.foot-site .cols{display:flex;gap:60px;flex-wrap:wrap;margin-bottom:30px}
.foot-site h5{font-family:var(--mono);color:var(--dark-ink);margin:0 0 14px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.foot-site ul{list-style:none;padding:0;margin:0}
.foot-site li{margin:9px 0}
.foot-site .copy{font-family:var(--mono);font-size:.85rem;letter-spacing:.02em;color:var(--dark-ink-2);
  border-top:1px solid var(--dark-line);padding-top:22px}

/* ── 私訊：進行中課程 chip ── */
.subsrow{margin:0 0 22px}
.subsrow .lbl{color:var(--muted);font-size:1.02rem;margin-right:8px}
.subchip{display:inline-block;border:1px solid var(--line-strong);border-radius:999px;
  padding:4px 15px;margin:0 8px 8px 0;font-size:1.02rem;color:var(--ink);background:var(--card)}
/* 私訊：Messenger 式全高對話版面 */
body.chatmode{overflow:hidden}
body.chatmode #pagewrap,body.chatmode .foot-site{display:none}
.chat{position:fixed;left:0;right:0;top:var(--navh,66px);bottom:0;display:flex;justify-content:center;background:var(--paper-2)}
/* Messenger 桌面版雙欄（IC 2026-08-11：訊息可視範圍太小、不想一直來回切）：
   左＝學員列表常駐，右＝對話鋪滿。整體加寬到 1400px，對話區比原本的 900px 單欄大得多 */
.chat-wrap{display:flex;width:100%;max-width:1400px;background:var(--paper);
  border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong);box-shadow:0 0 44px rgba(0,0,0,.06)}
.chat-inner{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;background:var(--paper)}

/* 左欄：學員列表（只有講師有，靠 body.has-side 開啟） */
.chat-side{display:none;flex:0 0 336px;flex-direction:column;min-height:0;
  background:var(--card);border-right:1px solid var(--line-strong)}
body.has-side .chat-side{display:flex}
.chat-side-head{flex:0 0 auto;padding:16px 18px 13px;border-bottom:1px solid var(--line-strong)}
.chat-side-head h2{font-family:var(--serif);font-weight:700;font-size:1.24rem;margin:0 0 11px;line-height:1.3}
.chat-side-head input[type=search]{width:100%;padding:10px 14px;border:1px solid var(--line-strong);
  border-radius:999px;font-size:1rem;font-family:inherit;background:var(--paper);color:var(--ink)}
.chat-side-head input[type=search]:focus{outline:none;border-color:var(--brand)}
.chat-side .tlist{flex:1 1 auto;overflow-y:auto;border-top:none;padding:6px 0}

/* 列表項目：Messenger 式（頭像＋姓名＋最後一句＋時間＋未讀點） */
.chat-side .trow{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  gap:2px 13px;align-items:center;padding:11px 16px;border-bottom:none;border-radius:0;text-decoration:none}
.chat-side .trow:hover{background:var(--paper-2)}
.chat-side .trow.active{background:var(--brand-tint)}
.chat-side .trow .tav{grid-row:1/3;width:48px;height:48px;border-radius:50%;background:var(--paper-2);
  border:1px solid var(--line-strong);display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;color:var(--brand);font-size:1.24rem}
.chat-side .trow.active .tav{border-color:var(--brand)}
.chat-side .trow .tname{grid-column:2;font-weight:700;font-size:1.04rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.chat-side .trow .ttime{grid-column:3;grid-row:1;font-family:var(--mono);font-size:.82rem;color:var(--muted);white-space:nowrap}
.chat-side .trow .tlast{grid-column:2;grid-row:2;color:var(--muted);font-size:.95rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chat-side .trow.unread .tname,.chat-side .trow.unread .tlast{color:var(--ink);font-weight:700}
.chat-side .trow .ubadge{grid-column:3;grid-row:2;justify-self:end;align-self:center}

/* 右欄空狀態：還沒選人時（桌機才出現） */
.chat-empty{display:none;flex:1 1 auto;place-items:center;text-align:center;padding:40px;color:var(--muted)}
.chat-empty .big{font-family:var(--serif);font-weight:700;font-size:1.4rem;color:var(--ink);margin:0 0 8px}
.chat-empty p{margin:0;font-size:1.04rem}
body.side-mode .chat-empty{display:grid}
body.side-mode #chatMain{display:none}

/* 訊息的日期分隔線（Messenger 有，長對話才不會迷路） */
.msg-day{display:flex;align-items:center;gap:14px;margin:20px 0 14px;color:var(--muted);
  font-family:var(--mono);font-size:.85rem}
.msg-day::before,.msg-day::after{content:"";flex:1;height:1px;background:var(--line)}
/* 資訊頭壓薄：訊息區才是主角（IC：可視範圍太小）。頭像縮小、內距收斂、課程列併成一行 */
.chat-head{flex:0 0 auto;background:var(--card);border-bottom:1px solid var(--line-strong);padding:10px 20px}
.chat-head-row{display:flex;align-items:center;gap:12px}
.chat-back{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;font-size:1.2rem;line-height:1}
.chat-back:hover{border-color:var(--brand);color:var(--brand)}
.chat-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--paper-2);
  border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:var(--brand);font-size:1.16rem}
.chat-id{flex:1 1 auto;min-width:0}
.chat-id h1{font-family:var(--serif);font-weight:700;font-size:1.34rem;margin:0;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{margin:2px 0 0;color:var(--muted);font-size:.95rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* 輸入列的按鈕收斂：省下來的高度都給訊息區 */
.chat-foot .btn{padding:10px 22px;font-size:1rem}
.chat-tools{flex:0 0 auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.chat-tools a{font-family:var(--mono);font-size:.85rem;color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--line-strong);border-radius:99px;padding:6px 13px;white-space:nowrap}
.chat-tools a:hover{border-color:var(--brand);color:var(--brand)}
/* 進行中課程：壓成單行（校長判斷提問方向要看，但不該吃掉兩行高度） */
.chat-head .subsrow{margin:7px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .subsrow .lbl{font-size:.95rem}
.chat-head .subchip{font-size:.95rem;padding:2px 12px;margin:0 6px 0 0}
.chat-body{flex:1 1 auto;overflow-y:auto;min-height:0;padding:18px 22px}
.chat .msg-list{max-height:none;overflow:visible;padding:0}
/* 輸入列壓薄：textarea 起始一行、隨打字長高（JS 控制，上限 160px） */
.chat-foot{flex:0 0 auto;background:var(--card);border-top:1px solid var(--line-strong);padding:10px 20px}
.chat-foot .composer{margin-top:0}
.chat-foot .composer textarea{min-height:46px;padding:11px 15px}
.composer-bar{display:flex;align-items:center;gap:11px;margin-top:8px;flex-wrap:wrap}
.composer-bar .caption{font-size:.85rem}
/* 桌機有左欄時不需要返回箭頭（列表就在旁邊，箭頭只是雜訊） */
@media(min-width:901px){ body.has-side .chat-back{display:none !important} }
/* 窄螢幕（<900px）：回到單欄切換，列表與對話二選一（手機原本就是這樣用） */
@media(max-width:900px){
  .chat-wrap{max-width:none;border-left:none;border-right:none;box-shadow:none}
  body.has-side .chat-side{flex:1 1 100%;border-right:none}
  body.has-side:not(.side-mode) .chat-side{display:none}
  body.side-mode .chat-empty{display:none}
}
@media(max-width:640px){
  .chat-head{padding:11px 15px}
  .chat-head-row{flex-wrap:wrap;gap:11px}
  .chat-back{width:36px;height:36px}
  .chat-avatar{width:40px;height:40px;font-size:1.15rem}
  .chat-id h1{font-size:1.16rem}
  .chat-sub{font-size:.88rem;-webkit-line-clamp:1}
  .chat-tools{flex:1 1 100%;justify-content:flex-start;margin-top:8px;gap:6px}
  .chat-tools a{font-size:.82rem;padding:5px 11px}
  .chat-head .subsrow{margin:8px 0 0}
  .chat-head .subsrow .lbl{font-size:.95rem}
  .chat-head .subchip{font-size:.95rem;padding:3px 12px;margin:0 6px 4px 0}
  .chat-body{padding:15px}
  .chat-foot{padding:10px 15px}
}

/* ── 私訊：氣泡式對話 ── */
.msg-list{max-height:60vh;overflow-y:auto;padding:8px 4px;display:flex;flex-direction:column}
.msg{display:flex;gap:10px;margin:10px 0;align-items:flex-end;border:none;padding:0}
.msg .avatar{width:38px;height:38px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line-strong);
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:var(--brand);flex:0 0 auto;font-size:1.04rem}
.msg .stack{max-width:72%;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.msg .who{font-size:.9rem;color:var(--muted);margin:0 0 0 6px}
.msg .bubble{background:var(--card);border:1px solid var(--line-strong);border-radius:16px 16px 16px 5px;
  padding:11px 17px;font-size:1.06rem;line-height:1.75;white-space:pre-wrap;color:var(--ink)}
.msg .time{font-family:var(--mono);font-size:.82rem;color:var(--muted);margin:1px 6px 0}
.msg .time a{color:var(--brand);text-decoration:none}
.msg .time a:hover{text-decoration:underline}
.mi-del{position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:.85rem;text-decoration:none;line-height:1}
.mi-del:hover{background:var(--danger)}
.edit-box{min-width:min(420px,66vw)}
.edit-box textarea{width:100%;padding:11px 14px;border:1px solid var(--brand);border-radius:10px;
  font-size:1.04rem;font-family:inherit;background:var(--paper);color:var(--ink);line-height:1.7;resize:vertical}
.edit-box textarea:focus{outline:none}
.edit-bar{display:flex;gap:10px;margin-top:8px}
.btn-sm{padding:8px 20px;font-size:.98rem}
.msg.mine{flex-direction:row-reverse}
.msg.mine .stack{align-items:flex-end}
.msg.mine .bubble{background:var(--brand);color:#fff;border:none;border-radius:16px 16px 5px 16px}
body.theme-dark .msg.mine .bubble{color:#15171b}
.msg .msg-img{margin-top:0;border-radius:12px}
.file-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:10px;
  padding:10px 15px;text-decoration:none;color:var(--ink);background:var(--card);font-size:1.02rem;max-width:320px}
.file-chip .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip:hover{border-color:var(--brand);color:var(--brand)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;
  margin:0 0 20px;padding:14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card)}
.media-it{position:relative;display:block;text-decoration:none;color:var(--ink)}
.media-it img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.media-it:hover img{border-color:var(--brand)}
.media-it .mt{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;
  font-family:var(--mono);font-size:.76rem;padding:2px 8px;border-radius:99px;pointer-events:none}
.media-it.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  aspect-ratio:1;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);padding:8px;text-align:center}
.media-it.file .fi{font-size:1.6rem;line-height:1}
.media-it.file .fn{font-size:.95rem;line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all}
.media-it.file .mt{position:static;background:none;color:var(--muted);padding:0}
.media-it.file:hover{border-color:var(--brand);color:var(--brand)}
@keyframes msgflash{0%{background:rgba(165,60,44,.18)}100%{background:transparent}}
.msg.flash{animation:msgflash 1.7s ease-out;border-radius:12px}
.composer{margin-top:22px}
.msg-img{max-width:280px;max-height:280px;border:1px solid var(--line);border-radius:8px;margin-top:8px;cursor:zoom-in;display:block}
body.theme-dark .msg-img{border-color:#3a3e46}
.composer textarea{width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:7px;
  font-size:1.04rem;font-family:inherit;background:var(--paper);line-height:1.7;resize:vertical}
.composer textarea:focus{outline:none;border-color:var(--brand);background:#fff}
#notebox textarea{width:100%;padding:13px 15px;border:1px solid var(--line-strong);border-radius:7px;
  font-size:1.04rem;font-family:inherit;background:var(--paper);color:var(--ink);line-height:1.7;resize:vertical}
#notebox textarea:focus{outline:none;border-color:var(--brand)}
.tlist{border-top:1px solid var(--line-strong)}
.trow{display:flex;align-items:baseline;gap:14px;padding:18px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.trow:hover{background:rgba(165,60,44,.04)}
.trow .tname{font-weight:700;white-space:nowrap;font-size:1.06rem}
.trow .tlast{flex:1;color:var(--muted);font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .ttime{white-space:nowrap;font-family:var(--mono);font-size:.88rem;color:var(--muted)}
.ubadge{font-family:var(--mono);font-size:.82rem;background:var(--brand);color:#fff;border-radius:99px;padding:2px 10px;align-self:center}

/* 主題切換圖示鈕 */
.theme-btn{width:38px;height:38px;border:1px solid transparent;border-radius:50%;background:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);flex:0 0 auto;padding:0}
.theme-btn svg{width:19px;height:19px}
.theme-btn:hover{color:var(--brand);border-color:var(--line-strong)}
.theme-btn .i-sun{display:none}
body.theme-dark .theme-btn .i-moon{display:none}
body.theme-dark .theme-btn .i-sun{display:block}

/* ── 深色版面（播放頁預設；一般頁可切換） ── */
body.theme-dark{
  --frame:#0f1113; --paper:#15171b; --paper-2:#191c21; --paper-3:#1e2126; --card:#1e2126;
  --ink:#eae7e0; --ink-soft:#c8c5bc; --muted:#9a978e;
  --line:#282b32; --line-strong:#3c414a; --rule:#eae7e0;
  --brand:#e6a389; --brand-2:#eeb8a4; --brand-tint:#2a201b; --brand-tint-2:#3a2c24;
  --accent:#dc9560; --ok:#5fbf8f; --danger:#e06e83;
  --dark:#0c0d0f; --dark-2:#121316; --dark-line:#2a2d33; --dark-ink:#eae7e0; --dark-ink-2:#a8a59c;
  background:var(--frame);color:var(--ink);
}
body.theme-dark .nav{background:rgba(21,23,27,.92)}
body.theme-dark .ring{background:conic-gradient(var(--brand) calc(var(--p,0)*1%),#2c2f35 0)}
body.theme-dark .bar{background:#2c2f35}
body.theme-dark .banner-soon{background:#2a2317;border-color:#4a3b20;color:#d9b06c}
body.theme-dark .btn-primary{background:var(--brand);color:#15171b}
body.theme-dark .btn-primary:hover{background:var(--brand-2);color:#15171b}
body.theme-dark .btn-buy{background:var(--brand)}

/* ── legal / 內文型頁面 ── */
.legal{max-width:var(--read);margin:0 auto;padding:52px 0}
.legal h1{font-family:var(--serif);font-weight:900;font-size:2rem}
.legal h2{font-family:var(--serif);font-weight:700;font-size:1.34rem;margin-top:36px}
.legal p,.legal li{color:var(--ink-soft);font-size:1.06rem;line-height:1.85}

/* ── 響應式 ── */
@media(max-width:640px){
  html{font-size:16.5px} /* 手機整體按比例略收，rem 一起縮，仍守老花底線（最小字 ~13px） */
  .hero-in{padding-top:56px;padding-bottom:52px}
  .hero .fig-cap p{font-size:1.1rem}
  section{padding:56px 0}
  .sec-head{margin-bottom:32px}
  .ccard{grid-template-columns:1fr;gap:16px}
  .ccover{width:100%;height:130px}
  .ccard .side{text-align:left}
  .ccard .price{font-size:1.55rem}
  .howgrid{grid-template-columns:1fr}
  .entry{grid-template-columns:1fr;gap:10px}.entry .idx{display:none}
  .entry .side{text-align:left}.entry .side .btn{margin-top:12px}
  /* 手機導覽：第一行品牌+主題鈕+登入鈕；第二行功能連結。不藏連結、觸控夠大 */
  .nav-in{flex-wrap:wrap;height:auto;padding:8px 16px;gap:0 12px;row-gap:0}
  .brand{order:0;flex:1 1 auto;padding:6px 0;font-size:1.08rem}
  .brand small{display:none}
  .theme-btn{order:1;margin:0}
  .nav .btn{order:2;padding:10px 18px;font-size:1.02rem;margin:4px 0}
  .nav-sp{order:3;flex:0 0 100%;height:0}
  .nav a.link,#logout,#navLogout{order:4;display:inline-block;font-size:.95rem;padding:8px 2px}
  .nav a.link[href="#courses"],.nav a.link[href="#how"]{display:none}
  .numlist .row{grid-template-columns:40px 1fr;gap:14px}
  .vrow a.play,.vrow a.v-reset{padding:8px 6px;margin:-8px -6px}
  .foot-site .cols{gap:32px}
  .foot-site a{display:inline-block;padding:5px 0}
  .card{margin-left:16px;margin-right:16px;padding:28px 22px}
}

/* ── 首頁深色外殼：內容紙面浮在深色底上（IC 2026-08-11「寬度之外的背景塗深色」，借 blog）
   用 body:has(.hero) 精準命中 landing，不改 HTML、不波及其他頁；舊瀏覽器不支援 :has 就退回原本淺色 ──
   結構：nav 深色滿版（頂）→ 深色底中一條限寬紙柱（hero＋各 section 紧貼，兩側露深色）→ footer 深色滿版（底） */
/* 明度四層（IC 2026-08-11 二修：nav 深色後跟外框糊在一起，要有區別）：
   ① nav 淺紙（最亮，頂部）② 兩側外框最深 #15100a ③ 紙柱白（浮起、帶陰影）
   ④ footer #241c12 比外框亮一階且偏暖，加橘紅線分界 —— 四層各自分明，不互相糊掉 */
body:has(.hero){background:#15100a}
/* nav 維持淺紙：與深外框形成最大對比，也是全站一致的識別 */
/* 紙柱：hero＋所有 section 限寬置中、紙背景、左右細邊，紧貼成連續紙面，兩側露深色 */
body:has(.hero) .hero,
body:has(.hero) section{max-width:1148px;margin-left:auto;margin-right:auto;
  background:var(--paper);border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong)}
body:has(.hero) section.section-soft{background:var(--paper-2)}
/* 紙柱浮起：左右投影讓紙面明顯疊在深框之上，不是被挖出來的洞 */
body:has(.hero) .hero{border-top:none;box-shadow:0 0 40px rgba(0,0,0,.45)}
body:has(.hero) section{box-shadow:0 0 40px rgba(0,0,0,.45)}
/* footer 比外框亮一階且偏暖，頂部橘紅線分界 —— 與兩側深框明顯區隔（IC 二修） */
body:has(.hero) .foot-site{background:#241c12;border-top:4px solid var(--brand)}
@media(max-width:640px){
  /* 手機：紙面滿版靠邊，不留深色側欄（省寬度），只在上下 nav/footer 露深色 */
  body:has(.hero) .hero,
  body:has(.hero) section{max-width:none;border-left:none;border-right:none;box-shadow:none}
}

/* 向後相容別名（各頁 inline/JS 舊變數名仍可用） */
:root{--bg:var(--paper);--bg-soft:var(--paper-2);--warn:var(--accent);--brand-soft:var(--paper-2);--brand-dark:var(--brand-2)}
.sub{color:var(--muted)}

/* 語言切換鈕與預覽橫幅（2026-10-01，PRD 5.19） */
.lang-btn{order:8;height:38px;min-width:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:inherit;font:inherit;font-weight:700;font-size:.98rem;cursor:pointer;letter-spacing:.02em}
.lang-btn:hover{color:var(--brand);border-color:var(--brand)}
.preview-banner{background:#7a4b00;color:#fff;text-align:center;padding:10px 16px;font-size:1rem;line-height:1.4;font-weight:600;border-bottom:2px solid #f2b84b}
.preview-banner .dl{display:block;font-weight:500;font-size:.95rem}
.preview-banner span+.dl{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.4)}
@media (max-width:760px){.lang-btn{order:1;margin:0}}

/* 研究標記（私訊頁）：里程碑徽章、協助類型徽章、講師改標下拉 */
.tagrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.tagrow label{margin:0 10px 0 0;display:inline-block;font-weight:600;color:var(--ink-soft)}
.tagrow select{padding:9px 12px;border:1px solid var(--line-strong);border-radius:7px;background:var(--paper);font:inherit;font-size:1rem;max-width:100%}
.tagchip-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.msg.mine .tagchip-row{justify-content:flex-end}
.tagchip{display:inline-block;padding:2px 10px;border:1px solid var(--brand);background:var(--brand-tint);color:var(--brand-2);font-size:.9rem;font-weight:600;line-height:1.55;border-radius:4px}
.tagchip.help{border-color:var(--ok);background:#e3f1ea;color:var(--ok)}
.tagnote{font-size:.88rem;color:var(--muted)}
select.rt{padding:4px 8px;font-size:.88rem;border:1px dashed var(--line-strong);border-radius:5px;background:transparent;color:var(--muted);max-width:180px;font-family:inherit}
/* 日期、下拉、數字欄位與文字欄位同一個外觀（進度頁投稿表單） */
.pg-card input[type=date],.pg-card input[type=number],.pg-card select,.sub-form input,.sub-form select{width:100%;padding:13px 14px;border:1px solid var(--line-strong);border-radius:7px;font-size:1.02rem;font-family:inherit;background:var(--paper)}


/* ═══════════════════════════════════════════════════════════════════════
   設計系統 v3（2026-10-01，IC 指示三輪設計打磨；規範全文見 DESIGN.md）
   原則：① 磚紅只留給品牌與「一頁一個」主要動作 ② mono 只放數字、日期、代號，不放句子
         ③ 狀態（已確認／已送出／尚未）全站同一套編碼，不單靠顏色 ④ 頁面樣式不寫死色碼，淺深色都吃 token
         ⑤ 手機 390px 不橫向捲動；可點的東西至少 44px、有看得見的焦點框
   這一段放在 style.css 最後，刻意覆蓋前面的同名規則；前面的舊規則不刪，避免動到既有頁面的細節。
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* 對比修正（量過：在 --frame 底上都 ≥ 4.5:1） */
  --muted:#5c5d64; --accent:#94501c; --ok:#276b4d; --field:#857c68;
  /* 狀態色：成功／待處理／危險，各有底色、邊線、字色 */
  --success:#2c7a57; --success-tint:#e7f3ec; --success-line:#b6d9c5; --success-ink:#1f5c40;
  --warning:#a4650a; --warning-tint:#fbf2e2; --warning-line:#ecd3a6; --warning-ink:#6f4405;
  --danger-tint:#fcebed; --danger-line:#efbcc4; --danger-ink:#8c1c2d;
  --info:#2f5d8a; --focus:#2f6db3; --chart-track:#ebe6db;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px;
  --sh-1:0 1px 2px rgba(26,22,15,.06); --sh-2:0 4px 12px rgba(26,22,15,.08);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gutter:clamp(16px,4vw,26px); --nav-h:60px;
  --mono:"Roboto Mono",Menlo,Consolas,"Noto Sans TC","Microsoft JhengHei",monospace;
}
body.theme-dark{
  --muted:#a4a19a; --accent:#e0a866; --ok:#6cc59a; --field:#6a707a;
  --success:#6cc59a; --success-tint:#17281f; --success-line:#2f5a44; --success-ink:#9fdcbd;
  --warning:#e0a650; --warning-tint:#2a2214; --warning-line:#5c4722; --warning-ink:#f0c989;
  --danger-tint:#2e1a1e; --danger-line:#6a3039; --danger-ink:#f5b3be;
  --info:#86b2e0; --focus:#7fb0e8; --chart-track:#2a2e35;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.45);
}

/* ── 焦點：所有可操作元件都有看得見的框（鍵盤使用者） ── */
:where(a,button,select,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
body input:focus,
body textarea:focus,
body select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 24%,transparent)}

/* ── 導覽：不折行、一列；手機變成可橫向滑動的一條 ── */
body .nav-in{height:auto;min-height:var(--nav-h);gap:18px;padding-left:var(--gutter);padding-right:var(--gutter)}
body .brand,
body .nav a.link,
body .lang-btn,
body #logout,
body #navLogout{white-space:nowrap;flex:0 0 auto}
body .nav a.link[aria-current=page]{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
body .nav-links{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
body .nav-links::-webkit-scrollbar{display:none}
body .nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
body:has(.ra-wrap) .nav-in,
body.chatmode .nav-in{max-width:1420px}
@media (max-width:1200px){body .nav-in{gap:14px}body .brand small{display:none}}
@media (max-width:760px){
  body .nav-in{flex-wrap:wrap;row-gap:0;padding-top:8px;padding-bottom:0}
  body .nav-sp{display:none}
  body .nav-links{order:5;flex:0 0 100%;overflow-x:auto;white-space:nowrap;gap:20px;padding:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 92%,transparent)}
  body .nav-links::-webkit-scrollbar{display:none}
  body .nav-links a.link{padding:12px 0}
  body .nav-right{margin-left:auto}
  body:not(:has(.hero)) .brand>span small{display:none}
}

/* ── 預覽橫幅：安靜的提示條，不是警報 ── */
body .preview-banner{background:var(--warning-tint);color:var(--warning-ink);border-bottom:1px solid var(--warning-line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;padding:7px var(--gutter);font-size:.86rem;font-weight:600;line-height:1.4}
body .preview-banner .dl{display:inline;font-weight:500;font-size:inherit}
body .preview-banner span+.dl{margin:0;padding:0 0 0 14px;border:0;border-left:1px solid var(--warning-line)}
@media (max-width:640px){body .preview-banner span+.dl{border-left:0;padding-left:0}}

/* ── 按鈕：一頁只有一個主要按鈕；其餘用 secondary／ghost ── */
body .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:var(--r-md)}
body .btn-sm{min-height:36px;padding:6px 14px;font-size:.92rem}
body .btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--sh-1)}
body .btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
body .btn-danger{background:transparent;color:var(--danger-ink);border-color:var(--danger-line)}
body .btn-danger:hover{background:var(--danger-tint);border-color:var(--danger)}
body .btn-ghost:hover{background:var(--paper-3)}

/* ── 表單控制項：全站同一個外觀 ── */
body select,
body input[type=date],
body input[type=time],
body input[type=number],
body input[type=search],
body input[type=text],
body input[type=email],
body input[type=tel],
body textarea{
  border:1px solid var(--field);border-radius:var(--r-md);background:var(--paper);color:var(--ink);font:inherit;max-width:100%}
body select,
body input[type=date],
body input[type=time],
body input[type=number]{min-height:46px;padding:10px 14px}
body select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23857c68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
body .form-note,
body .caption,
body .pg-card>p,
body .fq-meta{font-family:var(--sans);letter-spacing:0}
body .form-note{font-size:.92rem;line-height:1.65}

/* ── 卡片：細框、圓角、輕陰影；只有「主角卡」才有粗的頂線 ── */
body .pg-card,
body .cs-card,
body .mt-up,
body .cn-act,
body .pr-manage,
body .bf,
body .ra-bar,
body .card{border-top:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
body .rp{border-radius:var(--r-lg);box-shadow:var(--sh-2)}
body .kpi,
body .tm,
body .pr-chip,
body .mt-type{border-radius:var(--r-md)}
body .oc,
body .tagb,
body .tagchip,
body .cb,
body .cell,
body .sq i,
body .pg-dots i{border-radius:var(--r-xs)}

/* ── 狀態：三種編碼全站統一（實心＝已確認、斜線＝已送出待確認、空白＝尚未） ── */
body .pg-dots i.sub,
body .sq i.sub{background:repeating-linear-gradient(45deg,var(--warning-tint) 0 3px,var(--card) 3px 6px);border-color:var(--warning)}
body .pg-dots i.ok,
body .sq i.ok{background:var(--success);border-color:var(--success)}
body .ms-row .st.ok{color:var(--success-ink)}
body .ms-row .st.sub{color:var(--warning-ink)}
body .ms-n{color:var(--ink)}
body .oc.accepted,
body .cb.yes,
body .tagchip.help{background:var(--success-tint);border-color:var(--success-line);color:var(--success-ink)}
body .oc.revise,
body .cb.no{background:var(--warning-tint);border-color:var(--warning-line);color:var(--warning-ink)}
body .oc.rejected{background:var(--danger-tint);border-color:var(--danger-line);color:var(--danger-ink)}
body .cell.ok{background:var(--success);border-color:var(--success);color:#fff}
body .cell.sub{background:repeating-linear-gradient(45deg,var(--warning-tint) 0 4px,var(--card) 4px 8px);border-color:var(--warning);color:var(--warning-ink)}
body .cell,
body .tcons{color:var(--muted)}
body .bm .bar{height:10px;border:0;border-radius:99px;overflow:hidden;background:var(--chart-track);max-width:none}
body .bm .bar i{background:var(--warning-line)}
body .bm .bar b{background:var(--success)}

/* ── 訊息：我的氣泡用淡底，不用整塊磚紅 ── */
body .msg.mine .bubble{background:var(--brand-tint);color:var(--ink);border:1px solid var(--brand-line,var(--brand-tint-2))}
body.theme-dark .msg.mine .bubble{color:var(--ink)}
body .msg .stack{max-width:min(72%,64ch)}

/* ── 表格 ── */
body .ra-tbl th,
body .rt th,
body .sub-table th,
body .cn-tbl th{background:var(--paper-3)}
body .ra-tbl td,
body .rt td,
body .sub-table td{font-variant-numeric:tabular-nums}
body .ra-who span{display:block;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;font-family:var(--sans);font-size:.8rem}
body .tbl-wrap{overflow-x:auto;overscroll-behavior-x:contain}

/* ── 訓練計畫報告 ── */
body .kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr))}
body .kpi{background:var(--paper-2);border-color:var(--line)}
body .kpi b{font-family:var(--sans);font-weight:700;font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
body .kpi span{font-size:.88rem;line-height:1.4;color:var(--muted)}
body .bm{grid-template-columns:minmax(10rem,14rem) 1fr max-content}
body .bm>div:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
body .pr-manage select{width:100%}
body .pr-chip button{min-width:44px;min-height:44px;margin:-8px -6px -8px 0;color:var(--danger-ink)}
body .pr-danger{margin-top:18px;padding-top:12px;border-top:1px dashed var(--line-strong);text-align:right}
/* 報告是「白紙」，不跟深色主題走：用固定色，列印才不會變粉彩 */
body.theme-dark .rp{--ink:#1a1a1a;--ink-soft:#3f434c;--muted:#5c5d64;--card:#fff;--paper:#fff;--paper-2:#faf8f3;--paper-3:#f1ece2;--line:#e4ded2;--line-strong:#cfc7b6;
  --brand:#a53c2c;--success:#2c7a57;--success-ink:#1f5c40;--warning:#a4650a;--warning-tint:#fbf2e2;--warning-ink:#6f4405;--chart-track:#ebe6db;--warning-line:#ecd3a6;background:#fff;color:#1a1a1a}

/* ── 機構後台與教材：密度與按鈕 ── */
body .dmr button{min-width:11rem;white-space:nowrap}
body .mt-row .btn{min-width:8.5rem}
body .sub-form{gap:12px}
@media (max-width:640px){body .sub-form{grid-template-columns:1fr 1fr}body .sub-form>:first-child,
body .sub-form>:last-child{grid-column:1/-1}body .sub-form .btn{width:100%}}

/* ── 手機：研究總表變成卡片；聊天頁把版面還給訊息 ── */
@media (max-width:900px){
  body .ra-tbl,
body .ra-tbl tbody,
body .ra-tbl tr,
body .ra-tbl td{display:block;width:100%}
  body .ra-tbl thead{display:none}
  body .ra-tbl tr.prow{display:grid;grid-template-columns:1fr auto;gap:4px var(--s3);padding:var(--s4);border-bottom:1px solid var(--line-strong)}
  body .ra-tbl tr.prow td{padding:0;border:0}
  body .ra-tbl td:first-child{grid-column:1/-1}
  body .ra-tbl td[data-l]::before{content:attr(data-l) " ";font-family:var(--mono);font-size:.76rem;color:var(--muted)}
  body .ra-tbl tr.dt td{padding:0}
  body .dmr{grid-template-columns:28px 1fr;row-gap:6px}body .dmr>:nth-child(n+3){grid-column:2}body .dmr button{justify-self:start}
  body .ra-bar>*{min-width:0}body .ra-bar .csv{flex:1 1 100%;overflow-wrap:anywhere}
}
@media (max-width:640px){
  body.chatmode .chat-head .chat-sub,
body.chatmode .chat-head .subsrow{display:none}
  body.chatmode .chat-head-row{flex-wrap:nowrap}
  body.chatmode .chat-tools{flex:0 0 auto;margin:0}
  body.chatmode .tagrow{flex-wrap:nowrap;gap:8px}
  body.chatmode .tagrow label{white-space:nowrap;font-size:.9rem}
  body.chatmode .composer-bar .caption{display:none}
}

/* ── 視訊諮詢 ── */
body .tm{border-radius:var(--r-md);min-height:64px}
body .tm small{color:var(--muted)}
body .tm:hover small,
body .tm[aria-pressed=true] small{color:#f3dcd4}
body .tm-x{min-width:44px;min-height:44px}

/* ── 共用：頁首、留白 ── */
body .page-head{margin:0 0 var(--s6)}
@media print{
  @page{margin:14mm 12mm 16mm}
  html{font-size:10.5pt}
  body .rp,
body .rp *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body .rp{border-top:2pt solid #000;box-shadow:none}
  body .tbl-wrap{overflow:visible}body .rt{table-layout:fixed}
  body .rt thead{display:table-header-group}
  body .rt tr,
body .bm,
body .kpis,
body .kpi{break-inside:avoid}
  body .rp h3{break-after:avoid}
  body .kpis{grid-template-columns:repeat(5,1fr)}
  body .cell{min-width:0;width:100%;font-size:8pt;padding:2pt}
  body .cell.ok{background:#fff!important;color:#000!important;border:1.5pt solid #000}
  body .cell.ok::before{content:"\2713  "}
  body .cell.sub{background:repeating-linear-gradient(45deg,#000 0 .6pt,#fff .6pt 3pt)!important;color:#000;font-weight:700}
  body .cell.sub::before{content:"\25D0  "}
  body .bm .bar{border:1pt solid #000}
  body .bm .bar b{background:#000!important}body .bm .bar i{background:repeating-linear-gradient(45deg,#666 0 .8pt,#fff .8pt 3pt)!important}
}

body .nav-in:has(.nav-links) .nav-sp{display:none}
@media (max-width:760px){body .nav-in>.lang-btn{margin-left:auto}}

/* v3b：導覽寬度與手機微調 */
body .nav-in{gap:14px}
body .nav-links{gap:14px}
body .lang-btn{padding:4px 12px}
body .nav-links .m-only{display:none}
@media (max-width:760px){
  body .nav-links .m-only{display:inline}
  body .nav-in>#navNick,body .nav-in>#navLogout{display:none}
  body .nav-in{padding-top:6px}
  body.chatmode .chat-head .chat-sub,body.chatmode .chat-head #subsrow,body.chatmode .chat-head .subsrow{display:none!important}
  body.chatmode .chat-id h1{font-size:1.1rem}
  body.chatmode .chat-head{padding:8px 14px}
  body.chatmode .tagrow{flex-wrap:nowrap}
  body.chatmode .tagrow select{flex:1 1 auto;min-width:0}
  body.chatmode .tagrow label{font-size:.78rem;margin:0 6px 0 0}
  body.chatmode .chat-foot{padding:8px 14px}
  body.chatmode .chat-foot .composer textarea{min-height:40px}
}

/* v3c：英文首頁 hero 右側的里程碑路徑插圖（純 SVG，吃 token，淺深色都行） */
body .hero-split .hero-in{max-width:none;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:56px;align-items:center}
body .hero-art svg{width:100%;height:auto;max-width:400px;display:block;margin-left:auto}
@media (max-width:900px){body .hero-split .hero-in{grid-template-columns:1fr}body .hero-art{display:none}}

/* v3d：第二輪 UX 修正 */
@media (min-width:761px){
  body .nav-links{flex:0 0 auto;overflow:visible}
  body #navNick{margin-left:auto;flex:0 1 auto;min-width:0;max-width:14ch;overflow:hidden;text-overflow:ellipsis}
}
body .nav a.btn{white-space:nowrap;flex:0 0 auto}
@media (max-width:760px){body .bm{grid-template-columns:1fr auto}body .bm .bar{grid-column:1/-1}}
@media (max-width:640px){
  body.chatmode .chat-head-row{flex-wrap:wrap}
  body.chatmode .chat-id{flex:1 1 0;min-width:0}
  body.chatmode .chat-id h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.chatmode .chat-tools{flex:0 0 100%;display:flex;gap:8px;overflow-x:auto;margin-top:6px}
  body .sub-form>*{grid-column:1/-1}
}
body .bk .tagb{background:var(--success-tint);border-color:var(--success-line);color:var(--success-ink)}
body .chat-tools a,body .stu .meta,body .prow a,body .rs-tag,body .fact-line,body .ra-bar .csv{font-family:var(--sans);letter-spacing:0}
body .ra-bar .csv a{overflow-wrap:normal;white-space:nowrap}
body .ra-bar .csv{display:flex;flex-wrap:wrap;gap:4px 12px}

/* v3e：第二輪視覺修正（狀態編碼、字型、去紅、標題行高、深色對比） */
html[lang=en]{--sans:"Source Sans 3","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
body :is(h1,h2,h3,h4){line-height:1.25}
body .page-head h1{line-height:1.18}
/* mono 只放數字、日期、代號、Email；標籤、表頭、句子一律 sans */
body .kicker,body .hero .status,body .hero .fact-line,body .hero .signoff,body .sec-head .kicker,body .fq-cat,body .day,
body .ra-tbl th,body .rt th,body .sub-table th,body .cn-tbl th,body .mt-meta,body .rs-meta{font-family:var(--sans);font-weight:600}
html[lang=en] body .kicker,html[lang=en] body .fq-cat,html[lang=en] body .day{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
body .cell,body .cd,body .rs-meta{font-variant-numeric:tabular-nums;white-space:nowrap}
/* 狀態：報告進度條、里程碑編號、空框線 */
body .bm .bar i{background:repeating-linear-gradient(45deg,var(--warning) 0 2px,var(--warning-tint) 2px 5px)}
body .pg-dots i,body .sq i{border-color:var(--field)}
body .ms-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:600 1rem var(--sans);color:var(--muted);border:2px solid var(--field);margin:auto;background:var(--card)}
body .ms-row:has(.st.ok) .ms-n{background:var(--success);border-color:var(--success);color:#fff}
body .ms-row:has(.st.sub) .ms-n{background:repeating-linear-gradient(45deg,var(--warning-tint) 0 3px,var(--card) 3px 6px);border-color:var(--warning);color:var(--warning-ink)}
/* 去紅：磚紅只給品牌、段落線、目前導覽與每頁一個主要按鈕 */
body .fq-chip,body .rs-chip{border-radius:99px}
body .fq-chip[aria-pressed=true],body .rs-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
body .rs-tag,body .tagb.plain{border-color:var(--line-strong);background:var(--paper-2);color:var(--ink-soft)}
body .tm{border-color:var(--line-strong);color:var(--ink)}
body .tm:hover,body .tm[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
body .tm:hover small,body .tm[aria-pressed=true] small{color:var(--paper-3)}
body .cn-sec h2{color:var(--ink)}
body .ra-tbl tr.prow.open{background:var(--paper-3)}
body .ra-tbl tr.prow:hover td{background:var(--paper-2)}
/* 報告：KPI 標籤行高、姓名不折、日期不斷 */
body .kpi span{display:block}
body .rt td:first-child{min-width:9.5rem}
/* 文章頁：有紙面，草稿提示用警示淡色 */
body .ar{background:var(--paper);padding:var(--s6) clamp(16px,4vw,48px);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
body .ar .rs-note{background:var(--warning-tint);border-color:var(--warning-line);color:var(--warning-ink)}
/* 首頁 hero */
body .hero-split .hero-in{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);align-items:start}
body .hero-split h1{font-size:clamp(2.1rem,4.4vw,3.1rem)}
body .hero-art{padding-top:3.2rem}
/* 深色：實心品牌底上的字用近黑 */
body.theme-dark :is(.ubadge){color:#15171b}

/* v3f：第二輪版面修正（頁面外框統一、手機表格、導覽寬度、橫幅） */
body:has(#navLinks):not(:has(.hero)){--maxw:1180px}
@media (min-width:761px){body .nav-links{mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}}
body .container{padding-left:var(--gutter);padding-right:var(--gutter)}
body .container.cn-wrap,body .container.fq-wrap,body .container.rs-wrap,body .container.cs-wrap,body .container.pr-wrap,
body .container[style*="max-width"]{max-width:var(--maxw)!important}
body .cn-wrap>*,body .fq-wrap>*,body .rs-wrap>*{max-width:760px}
body .cs-wrap>*{max-width:960px}
body .container[style*="max-width:860px"]>*{max-width:860px}
body .hero-split .hero-in{max-width:var(--maxw)}
body .hero-art svg{overflow:visible}
body .nav .btn{white-space:nowrap}
@media screen and (max-width:640px){
  body .bm{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  body .bm>div:first-child{grid-column:1/-1}
  body .bm>div:last-child{white-space:normal;font-size:.88rem;color:var(--muted)}
  body .sub-table thead{display:none}
  body .sub-table,body .sub-table tbody{display:block}
  body .sub-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  body .sub-table td{padding:0;border:0}
  body .sub-table td:first-child,body .sub-table td:last-child{grid-column:1/-1;text-align:left!important}
  body .sub-table td:nth-child(3){grid-column:2;grid-row:2}
  body .sub-table td:nth-child(4)::before{content:"\21BB  ";color:var(--muted)}
  body .sub-table .lnk{min-height:44px;padding-right:14px}
  body .sub-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.chatmode .tagrow label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.chatmode .nav-in{padding-top:2px}
  body.chatmode .chat-tools{overflow-x:auto;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  body .preview-banner:has(.dl)>span:not(.dl){display:none}
  body .preview-banner{font-size:.8rem;padding:5px var(--gutter)}
}
@media screen and (max-width:900px){
  body .ra-tbl td[data-l]::before{display:block}
  body .ra-bar .csv{overflow-wrap:normal}
  body .ra-bar .csv a{display:inline-block;padding:10px 4px}
}
body .rt th:first-child,body .rt td:first-child{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--line-strong)}
body .rt thead th:first-child{background:var(--paper-3);z-index:2}
@media print{
  body .rt th:first-child,body .rt td:first-child{position:static;box-shadow:none;width:17%}
  body .cell.sub{background:repeating-linear-gradient(45deg,#999 0 .6pt,#fff .6pt 3pt)!important}
}

/* v3g：首頁 hero 標題縮到 3 行、插圖放大 */
body .hero-split h1{font-size:clamp(1.9rem,3.3vw,2.7rem)}
body .hero-split .hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
body .hero-art svg{max-width:440px}

/* v3h：第三輪修正 */
@media (min-width:761px){body .nav-links{mask-image:none}}
@media screen and (max-width:640px){
  body .rp .tbl-wrap{mask-image:linear-gradient(90deg,#000 88%,transparent)}
  body .rp .tbl-wrap:has(.rt-subs){mask-image:none}
  body .rt-subs th:first-child,body .rt-subs td:first-child{position:static;box-shadow:none}
  body .rt-subs thead{display:none}
  body .rt-subs,body .rt-subs tbody{display:block}
  body .rt-subs tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
  body .rt-subs td{padding:0;border:0}
  body .rt-subs td:nth-child(1){font-weight:600}
  body .rt-subs td:nth-child(2){grid-column:1/-1}
  body .rt-subs td:nth-child(5)::before{content:"\21BB  ";color:var(--muted)}
}

/* v3i：第三輪視覺修正 */
@media (max-width:900px){body .hero-split .hero-in{grid-template-columns:1fr;gap:0}body .hero-art{padding-top:0}}
body.theme-dark .ms-row:has(.st.ok) .ms-n{color:#15171b}
body .ra-tbl td[data-l]::before,body .ra-bar .csv a,body .rp .by,body .foot-site h5,body .foot-site .copy{font-family:var(--sans);letter-spacing:.02em}
body .ra-bar .csv a{margin:0;font-size:.95rem}
body .ra-tbl tr.prow:hover td{background:var(--paper-2)}
body .ra-tbl tr.open td,body .ra-tbl tr.prow.open td{background:var(--paper-3)}
body .chat-back{width:44px;height:44px;font:400 1.3rem/1 system-ui,sans-serif;padding-bottom:2px}
body .msg .bubble{line-height:1.55}

/* v3j：第三輪版面修正 */
@media (min-width:761px){body .nav-in:not(:has(#navNick))>.nav-links{margin-right:auto}}
@media (max-width:760px){
  html[lang=en] body .nav-in:not(:has(#navNick))>.brand{flex:0 0 100%}
  html[lang=en] body .nav-in:not(:has(#navNick))>.nav-links{order:0;flex:1 1 0;min-width:0}
  html[lang=en] body .nav-in:not(:has(#navNick))>:not(.brand):not(.nav-links){order:6}
}
@media screen and (max-width:640px){
  body .preview-banner .dl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.chatmode .chat-tools{flex-wrap:nowrap}
  body.chatmode .chat-tools>*{flex:0 0 auto}
  body .rt-subs td:nth-child(3){white-space:nowrap}
  body .rt td:first-child{min-width:7rem}
  body .rt:not(.rt-subs) td:nth-child(2){font-size:.85rem;min-width:5.5rem}
}

/* v3k：導師核對自動標記 */
body .clsrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 2px}
body .clschip{border:1px dashed var(--info);background:var(--paper-2);color:var(--ink-soft);padding:2px 10px;border-radius:var(--r-xs);font-size:.88rem}
body .clschk{background:var(--success-tint);border:1px solid var(--success-line);color:var(--success-ink);padding:2px 10px;border-radius:var(--r-xs);font-size:.88rem;font-weight:600}
body .clschange{gap:8px;align-items:center;flex-wrap:wrap}

/* ── mentor.ichentsai.tw 第一階段（us-public）：導覽列的「即將開放報名」連到首頁的通知表單（#notify） ── */
.nav .nav-soon{white-space:nowrap;flex:0 0 auto}
.foot-site .copy .sep{margin:0 .35em}
.enroll-note{margin:28px 0 0;color:var(--muted)}
/* 手機導覽列寬度不夠（連結列會被擠到只剩一個），「即將開放報名」只在桌機顯示；手機首頁的狀態列與通知表單已經寫了 */
@media (max-width:760px){body .nav .nav-soon{display:none}}