/* ── 清醒指南 · 工具站視覺系統 ─────────────────────────────────────
   原則：紙是底、墨是骨、朱砂只給答案。
   一頁只有一個東西該最搶眼 —— 那個東西是「答案」。 */
:root{
  --paper:#efe7d5;          /* 底：宣紙 */
  --paper-hi:#faf5e9;       /* 卡片：比底亮一階（原本三種米色太接近，全部收斂成兩種）*/
  --ink:#1c1814;            /* 墨：標題、答案區底 */
  --ink-2:#3a332a;
  --sub:#7b7059;            /* 次要文字 */
  --line:rgba(28,24,20,.13);
  --hair:rgba(28,24,20,.08);
  --zhu:#c4382a;            /* 朱砂：只給答案與強調 */
  --zhu-lite:#e2604f;       /* 深底上的朱砂 */
  --gold:#9a7b2e;
  --cream:#f5ecd8;
  --ok:#4a7c48;
  --gut:20px;            /* 頁面左右內距：導列的負邊距要跟它綁在一起，不能寫死 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Serif TC","Songti TC","Songti SC",Georgia,serif;
  font-size:16.5px;line-height:1.75;
  font-feature-settings:"tnum" 1;
  background-image:radial-gradient(1100px 520px at 8% -6%,rgba(255,252,244,.85),transparent 60%);
  background-attachment:fixed}
.wrap{max-width:880px;margin:0 auto;padding:0 var(--gut) 96px}
a{color:var(--zhu);text-decoration-thickness:1px;text-underline-offset:2px}
.sans{font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif}

/* ── 報頭 ───────────────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:14px;padding:18px 0 14px;
  border-bottom:1px solid var(--line);margin-bottom:26px}
.home{color:var(--sub);font-size:13px;text-decoration:none;
  font-family:system-ui,sans-serif;letter-spacing:.02em}
.home:hover{color:var(--zhu)}
.langbar{margin-left:auto;display:flex;gap:2px;background:rgba(28,24,20,.05);
  border-radius:8px;padding:3px}
.langbar button{border:0;background:transparent;color:var(--sub);border-radius:6px;
  padding:5px 12px;cursor:pointer;font-size:13px;font-family:system-ui,sans-serif;
  transition:.15s}
.langbar button:hover{color:var(--ink)}
.langbar button.on{background:var(--ink);color:var(--cream)}
.seal{width:42px;height:42px;background:var(--zhu);border-radius:4px;color:#fdf6e8;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:12px;line-height:1.1;font-weight:700;letter-spacing:.04em;
  box-shadow:0 2px 8px rgba(196,56,42,.28)}

h1{font-size:clamp(29px,4.4vw,42px);margin:0 0 10px;font-weight:700;
  letter-spacing:-.015em;line-height:1.2}
.sub{color:var(--sub);font-size:16px;margin:0;max-width:64ch;line-height:1.7}
.rule{display:none}

/* ── 步驟導列（八個工具是有順序的，就該長得像步驟）───────────────── */
/* 導列橫向捲動；右邊給一道漸層，讓人知道還有東西 */
.navwrap{position:relative;margin:28px calc(var(--gut) * -1) 8px;max-width:100vw}
.navwrap::after{content:"";position:absolute;right:0;top:0;bottom:10px;width:44px;
  background:linear-gradient(90deg,rgba(239,231,213,0),var(--paper));pointer-events:none}
.nav{display:flex;gap:0;padding:0 var(--gut) 10px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;flex:0 0 auto;text-decoration:none;color:var(--sub);
  font-family:system-ui,sans-serif;font-size:12.5px;line-height:1.2;
  padding:0 15px 0 0;margin-right:4px;display:flex;align-items:center;gap:7px;
  white-space:nowrap;transition:.15s}
.nav a:hover{color:var(--ink)}
.nav a .n{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;
  border:1.5px solid var(--line);color:var(--sub);background:transparent;flex:0 0 auto}
.nav a.on{color:var(--ink);font-weight:600}
.nav a.on .n{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.nav a:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;
  width:11px;height:1px;background:var(--line)}

/* ── 答案：整頁唯一的深色塊，不可能看漏 ──────────────────────────── */
.answer{background:var(--ink);color:var(--cream);border-radius:12px;
  padding:26px 30px 28px;margin:26px 0;
  box-shadow:0 10px 30px rgba(28,24,20,.16)}
.answer .q{font-size:12.5px;color:var(--zhu-lite);font-family:system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.answer .a{font-size:clamp(34px,6vw,54px);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:#fff8ea;margin-bottom:14px;
  font-family:"Noto Serif TC",Georgia,serif}
.answer .a b{color:#f2c463;font-weight:800}
.answer .why{font-size:15.5px;line-height:1.72;color:#cfc3aa}
.answer .why b{color:var(--cream)}
.answer .why a{color:#f2c463}
.answer table{margin:10px 0 2px}
.answer th,.answer td{border-bottom-color:rgba(245,236,216,.16);color:#cfc3aa;padding:8px 8px}
.answer tr.hi td{background:rgba(242,196,99,.1);color:#fff8ea}
.answer .note{color:#a89b83}
/* 次要答案（例如追平年齡）留在紙上，不跟主答案搶 */
.answer.soft{background:var(--paper-hi);color:var(--ink);border:1px solid var(--line);
  border-left:5px solid var(--gold);box-shadow:none}
.answer.soft .q{color:var(--sub);text-transform:none;letter-spacing:.04em}
.answer.soft .a{color:var(--gold)}
.answer.soft .why{color:var(--ink-2)}
.answer.soft .why b{color:var(--ink)}

/* 答案下方的顯示口徑：它是【輸出怎麼呈現】，不是輸入的假設 */
.unitbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-12px 0 16px;padding:0 4px}
.unitbar>span{font-size:12.5px;color:var(--sub);font-family:system-ui,sans-serif;
  letter-spacing:.03em;flex:0 0 auto}
.unitbar .seg{width:auto;flex:1;min-width:260px;max-width:440px}
.unitbar .seg button{font-size:13.5px;padding:7px 10px}
#infWrap{margin:-4px 0 16px;padding:0 4px}

/* ── 卡片：拿掉四邊框，改用一點點陰影，不要滿頁都是盒子 ──────────── */
.card{background:var(--paper-hi);border-radius:10px;padding:20px 22px 18px;margin:20px 0;
  box-shadow:0 1px 2px rgba(28,24,20,.05),0 6px 18px rgba(28,24,20,.05)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:6px;
  font-family:system-ui,sans-serif;letter-spacing:.02em}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fffdf7;color:var(--ink);font-size:16px;
  font-family:system-ui,sans-serif;transition:.15s}
textarea{font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.5;min-height:150px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--zhu);
  box-shadow:0 0 0 3px rgba(196,56,42,.13)}
.seg{display:inline-flex;background:rgba(28,24,20,.06);border-radius:8px;padding:3px;width:100%}
.seg button{flex:1;padding:8px 6px;border:0;background:transparent;color:var(--sub);
  cursor:pointer;font-size:14.5px;font-family:system-ui,sans-serif;border-radius:6px;transition:.15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--zhu);color:#fff8ee;box-shadow:0 1px 3px rgba(196,56,42,.3)}

/* ── 滑桿 ───────────────────────────────────────────────────── */
.sldrow{display:flex;gap:12px;align-items:center}
.sldrow input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:5px;padding:0;
  background:linear-gradient(90deg,var(--zhu),var(--gold));border-radius:99px;border:0;cursor:pointer}
.sldrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:#fffdf7;border:2.5px solid var(--zhu);cursor:grab;
  box-shadow:0 2px 6px rgba(28,24,20,.22)}
.sldrow input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.08)}
.sldrow input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:#fffdf7;border:2.5px solid var(--zhu);cursor:grab}
.sldrow input[type=number]{width:118px;flex:0 0 auto;text-align:right;font-weight:600}
.sldout{font-size:12.5px;color:var(--sub);font-family:system-ui,sans-serif;
  margin-top:5px;min-height:18px}

/* ── 章節標題 ───────────────────────────────────────────────── */
h2{font-size:23px;margin:46px 0 4px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:11px}
h2 .n{color:var(--zhu);font-family:system-ui,sans-serif;font-size:15px;font-weight:700;
  flex:0 0 auto}

/* ── 表格 ───────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{padding:11px 10px;border-bottom:1px solid var(--hair);text-align:right}
th:first-child,td:first-child{text-align:left}
th{color:var(--sub);font-weight:600;font-size:12px;font-family:system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;border-bottom-color:var(--line)}
tr:last-child td{border-bottom:0}
tr.hi td{background:rgba(196,56,42,.06);font-weight:700}
tr.mute td{color:var(--sub)}
.tblwrap{overflow-x:auto;margin:12px 0}

/* ── 數字與量表 ─────────────────────────────────────────────── */
.big{font-size:clamp(30px,4.6vw,42px);font-weight:800;color:var(--zhu);
  font-family:system-ui,sans-serif;line-height:1.1;letter-spacing:-.02em}
.big.dim{color:var(--gold)}.big.ok{color:var(--ok)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:4px 0}
.kpi .lb{font-size:12.5px;color:var(--sub);font-family:system-ui,sans-serif;
  letter-spacing:.03em;margin-bottom:2px}
.bar{height:9px;background:rgba(28,24,20,.08);border-radius:99px;overflow:hidden;margin:6px 0 2px}
.bar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .25s}
.bar.f i{background:var(--zhu)}

/* ── 提示 ───────────────────────────────────────────────────── */
.warn,.good{padding:15px 18px;margin:18px 0;font-size:15.5px;border-radius:10px;line-height:1.72}
.warn{background:rgba(196,56,42,.055);border-left:4px solid var(--zhu)}
.good{background:rgba(74,124,72,.07);border-left:4px solid var(--ok)}
.note{font-size:13.5px;color:var(--sub);font-family:system-ui,sans-serif;
  margin-top:8px;line-height:1.68}

/* ── 圖表：不要再包一層盒子，讓它自己呼吸 ────────────────────────── */
.cht{width:100%;height:auto;display:block;margin:10px 0 2px;
  font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif}
.cht.dots{max-width:520px}
.chtwrap{background:transparent;border:0;border-top:1px solid var(--line);
  padding:22px 0 6px;margin:34px 0 8px}
.chttitle{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.chtsub{font-size:13.5px;color:var(--sub);font-family:system-ui,sans-serif;
  margin-bottom:14px;line-height:1.6;max-width:62ch}

/* ── 三步驟走查：用使用者自己的數字，一步一步把算式走一遍 ────────
   圖是插圖，不是說明。先給一句白話 + 他的數字，再給圖。 */
.steps{margin:18px 0 8px;counter-reset:stp}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:0 0 8px;position:relative}
.step:not(:last-child)::before{content:"";position:absolute;left:21px;top:46px;bottom:-6px;
  width:2px;background:linear-gradient(180deg,var(--line),rgba(28,24,20,.04))}
.stepno{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;
  font-family:system-ui,sans-serif;flex:0 0 auto;z-index:1;
  box-shadow:0 3px 10px rgba(28,24,20,.2)}
.stepbody{padding-bottom:30px;min-width:0}
.stepbody h3{font-size:19px;margin:8px 0 6px;font-weight:700;letter-spacing:-.01em;line-height:1.45}
.stepbody p{margin:0 0 10px;font-size:16px;line-height:1.75}
.stepbody .eq{font-family:system-ui,sans-serif;font-size:15.5px;background:rgba(28,24,20,.045);
  border-radius:8px;padding:12px 16px;margin:12px 0;line-height:2}
.stepbody .eq b{color:var(--zhu);font-weight:700}
.stepbody .cht{margin-top:6px}
.stepbody .note{margin-top:10px}
@media(max-width:600px){
  .step{grid-template-columns:34px 1fr;gap:12px}
  .step:not(:last-child)::before{left:16px;top:36px}
  .stepno{width:34px;height:34px;font-size:16px}
  .stepbody h3{font-size:17px}
}

/* ── 收合區 ─────────────────────────────────────────────────── */
details.fold{border:1px solid var(--line);border-radius:10px;background:rgba(255,253,247,.7);
  margin:14px 0;overflow:hidden;transition:.15s}
details.fold:hover{border-color:rgba(28,24,20,.2)}
details.fold>summary{cursor:pointer;padding:14px 18px;font-size:14.5px;
  font-family:system-ui,sans-serif;color:var(--sub);list-style:none;
  display:flex;align-items:center;gap:9px;user-select:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"";width:6px;height:6px;flex:0 0 auto;
  border-right:1.6px solid var(--zhu);border-bottom:1.6px solid var(--zhu);
  transform:rotate(-45deg);transition:transform .18s;margin-left:2px}
details.fold[open]>summary::before{transform:rotate(45deg)}
details.fold>summary:hover{color:var(--ink)}
details.fold[open]>summary{border-bottom:1px solid var(--hair);background:rgba(28,24,20,.02)}
details.fold .inner{padding:16px 18px 20px}

/* ── 卡片式連結（hub 的八個入口 ＋ 頁尾的「下一步」）───────────── */
.nextcard{display:block;text-decoration:none;color:inherit;position:relative;
  background:var(--paper-hi);border-radius:10px;padding:20px 24px;margin:12px 0;
  box-shadow:0 1px 2px rgba(28,24,20,.05),0 6px 18px rgba(28,24,20,.05);
  transition:.18s}
.nextcard:hover{transform:translateY(-2px);
  box-shadow:0 3px 6px rgba(28,24,20,.07),0 14px 30px rgba(28,24,20,.11)}
.nextcard:hover .q{color:var(--zhu)}
.nextcard .k{font-size:12px;color:var(--sub);font-family:system-ui,sans-serif;
  letter-spacing:.09em;margin-bottom:4px}
.nextcard .q{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.4;
  transition:color .15s;padding-right:26px}
.nextcard .note{margin-top:6px;max-width:60ch}
.nextcard::after{content:"→";position:absolute;right:22px;top:20px;color:var(--line);
  font-size:20px;transition:.18s}
.nextcard:hover::after{color:var(--zhu);transform:translateX(3px)}
/* 頁尾那張「下一個問題」：加點分量，跟 hub 的入口卡區隔 */
.nextcard.row{margin:38px 0 0;border-left:4px solid var(--gold);padding-left:22px}

/* ── 影片與頁尾 ─────────────────────────────────────────────── */
.vid{display:flex;align-items:center;gap:14px;margin:38px 0 0;padding:18px 22px;
  background:var(--ink);color:var(--cream);border-radius:10px;text-decoration:none;
  font-size:15.5px;transition:.18s}
.vid:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(28,24,20,.2)}
.vid b{color:#f2c463;display:block;margin-bottom:2px}
.vid span{color:#a89b83;font-size:13.5px}
.foot{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--sub);font-family:system-ui,sans-serif;line-height:1.7}
.foot .gov{font-weight:600;color:var(--ink-2)}
.foot p{margin:10px 0}

@media(max-width:600px){
  :root{--gut:16px}
  body{font-size:16px}
  .wrap{padding:0 var(--gut) 64px}
  /* 表格與圖表在窄螢幕自己捲，不要把整頁撐開 */
  table{font-size:14.5px}
  th,td{padding:9px 7px}
  .answer{padding:20px 20px 22px;border-radius:10px}
  .card{padding:16px 16px 14px}
  h2{margin:36px 0 4px;font-size:20px}
  .sldrow input[type=number]{width:96px}
}