/* ═══════════════════════════════════════════════════════════════
   威の式 · THE WAY — Identity V2.0 · Web adaptation
   來源：08_808/brand/威の式-brand-kit.md（2026-08-18 定案）
   元件詞彙沿用 91_威の式/v2/威の式-V2-Deck-Template.html
   簡報用 vw/vh 鎖 1600×900；本檔改為 clamp() 網頁流動尺標，
   但層級遞減與行高下限（body 1.82 / desc 1.7 / min 1.6）不變。
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Color — Charcoal is the bone, white is the breath, blue is the seal */
  --ink:#25282A;          /* Charcoal · primary · 70% */
  --paper:#FFFFFF;        /* White · base · 25% */
  --paper2:#F7F8F9;       /* Mist · secondary surface */
  --seal:#0067B9;         /* Signal Blue · accent · ≤5% — seal / eyebrow / one keyword */
  --ice:#9BCBEB;          /* Ice Blue · accent on Charcoal grounds ONLY */
  --g1:#595E62; --g2:#888B8D; --g3:#B9BCBE;
  --line:rgba(136,139,141,.30);
  --line2:rgba(136,139,141,.52);

  --cjk:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --latin:"Myriad Pro",Calibri,Arial,sans-serif;
  --caps:"Myriad Pro",Calibri,Arial,sans-serif;

  /* Web type scale — 2026-08-19 調整
     內文整體放大約一級（body 19→20 上限、下限 16→17），並把標題壓小，
     縮小標題與內文的落差：簡報靠大標撐版面，網頁靠內文密度撐。
     層級遞減與 brand-kit §8.1 的行高下限不變。 */
  --display:clamp(38px,6vw,76px);
  --display-sm:clamp(27px,3.6vw,46px);
  --h2:clamp(23px,2.5vw,33px);
  --h3:clamp(19px,1.62vw,24px);
  --body:clamp(17px,1.28vw,20px);
  --desc:clamp(16px,1.14vw,18.5px);
  --kick:clamp(12px,.9vw,14px);
  --eg:clamp(14px,.98vw,16px);

  --gut:clamp(20px,4.2vw,72px);    /* 頁面左右留白 */
  --sect:clamp(52px,6vw,92px);     /* 章節間距（原 76–164，簡報式的大留白） */
  --maxw:1120px;
  --measure:40em;                  /* 內文行寬上限，避免長行橫跨整個版面 */

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--cjk);
  font-weight:400;
  font-size:var(--body);
  line-height:1.82;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

::selection{background:rgba(0,103,185,.14);color:var(--ink)}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--g3)}

/* ── Layout helpers ───────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.section{padding:var(--sect) 0}
.hair{border:0;border-top:1px solid var(--line)}

/* ── 標記 · lockup ────────────────────────────────────────────────
   全系統唯一的襯線例外。frame 是 hairline，nowrap 不可拿掉。 */
.lockup{display:inline-flex;flex-direction:column;align-items:center;line-height:1;--fs:clamp(17px,1.5vw,21px)}
.lockup-frame{border:1.5px solid currentColor;padding:.42em .7em .55em;white-space:nowrap}
.twc{font-family:"Noto Serif TC",serif;font-weight:700;font-size:var(--fs);letter-spacing:.06em;display:inline-flex;align-items:flex-end}
.twc span{font-weight:500}
.twc b{font-weight:700;position:relative}
/* 圓相：mask 疊在 background 上，.reverse 換色只要改 background 一條。
   data-URI 內用單引號、外層 url("…") 用雙引號——反過來整條 mask 會靜默失效。 */
.tws{position:absolute;right:-.10em;bottom:-.10em;width:.62em;height:.62em;background:var(--seal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%20110'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='11'%20stroke-linecap='round'%20d='M95.6%2044.1A42.0%2042.0%200%201%201%2034.0%2018.6'/%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='6'%20stroke-linecap='round'%20d='M34.0%2018.6A42.0%2042.0%200%200%201%2065.9%2014.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%20110'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='11'%20stroke-linecap='round'%20d='M95.6%2044.1A42.0%2042.0%200%201%201%2034.0%2018.6'/%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='6'%20stroke-linecap='round'%20d='M34.0%2018.6A42.0%2042.0%200%200%201%2065.9%2014.4'/%3E%3C/svg%3E") center/contain no-repeat}
.twe{font-family:"Cinzel",serif;font-weight:600;text-transform:uppercase;letter-spacing:.4em;
  font-size:calc(var(--fs)*.24);margin-top:.6em;padding-left:1.15em}
.reverse .tws{background:var(--ice)}

/* 圓相單獨使用：章節收尾記號 / icon */
.seal{display:inline-block;width:1em;height:1em;background:var(--seal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%20110'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='11'%20stroke-linecap='round'%20d='M95.6%2044.1A42.0%2042.0%200%201%201%2034.0%2018.6'/%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='6'%20stroke-linecap='round'%20d='M34.0%2018.6A42.0%2042.0%200%200%201%2065.9%2014.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%20110'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='11'%20stroke-linecap='round'%20d='M95.6%2044.1A42.0%2042.0%200%201%201%2034.0%2018.6'/%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='6'%20stroke-linecap='round'%20d='M34.0%2018.6A42.0%2042.0%200%200%201%2065.9%2014.4'/%3E%3C/svg%3E") center/contain no-repeat}
.reverse .seal{background:var(--ice)}

/* ── 眉標 · caps ─────────────────────────────────────────────── */
.caps{font-family:var(--caps);letter-spacing:.2em;text-transform:uppercase;font-size:var(--kick);
  font-weight:600;color:var(--seal);display:block;line-height:1.4}
.reverse .caps{color:var(--ice)}

/* ── 標題 ────────────────────────────────────────────────────── */
/* ⚠️ 與簡報範本的一處刻意差異：deck 用 `word-break:keep-all`（靠手動 <br> 斷行），
   網頁是流動寬度，keep-all 會讓長中文標題在窄視窗直接撐破版面
   （實測 390px：h1 需要 525px）。改用 line-break:strict 走正規中文斷行規則，
   要綁住的尾段一律用 brand-kit §9.3 的 `.nb`。 */
h1,h2,h3{font-family:var(--cjk);font-weight:700;line-break:strict;overflow-wrap:break-word;line-height:1.24}
h1{font-size:var(--display-sm)}
h2{font-size:var(--h2);line-height:1.28}
h3{font-size:var(--h3);line-height:1.45}
.red{color:var(--seal)}
.reverse .red{color:var(--ice)}
.nb{white-space:nowrap}

p{line-height:1.82}
.d{font-size:var(--desc);line-height:1.7;color:var(--g1)}
.reverse p,.reverse .d{color:rgba(255,255,255,.86)}
.eg{font-size:var(--eg);line-height:1.65;color:var(--g2)}

/* ── 深底 · reverse ──────────────────────────────────────────── */
.reverse{background:var(--ink);color:#FFFFFF}
.reverse .hair{border-top-color:rgba(255,255,255,.18)}

/* ── 收尾框 · punch ──────────────────────────────────────────── */
.punch{border-top:2px solid currentColor;padding-top:clamp(16px,1.8vw,24px);
  font-size:clamp(19px,2vw,30px);font-weight:700;line-height:1.45}
.punch small{display:block;font-weight:400;font-size:var(--desc);color:var(--g1);
  margin-top:.5em;line-height:1.7}
.reverse .punch small{color:rgba(255,255,255,.72)}

/* ── 編號條列 · rows ─────────────────────────────────────────── */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:clamp(40px,4vw,58px) 1fr;gap:clamp(16px,1.8vw,30px);
  align-items:start;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .n{font-family:var(--latin);font-size:clamp(24px,2.6vw,38px);color:var(--seal);line-height:1;font-weight:400}
.reverse .row .n{color:var(--ice)}
.row h3{margin-bottom:.35em}
.row p{font-size:var(--desc);color:var(--g1);line-height:1.7}
.reverse .row{border-bottom-color:rgba(255,255,255,.18)}
.reverse .row p{color:rgba(255,255,255,.8)}

/* ── 卡片 · card ─────────────────────────────────────────────── */
.card{border:1px solid var(--line2);background:rgba(255,255,255,.4);
  padding:clamp(24px,2.6vw,38px) clamp(20px,2vw,32px);display:flex;flex-direction:column;
  gap:clamp(8px,.8vw,12px);transition:border-color .5s var(--ease),background .5s var(--ease)}
.reverse .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26)}
a.card:hover{border-color:var(--seal);background:rgba(0,103,185,.04)}
.tag{font-family:var(--cjk);letter-spacing:.1em;font-size:var(--eg);font-weight:600;color:var(--seal)}
.reverse .tag{color:var(--ice)}

/* ── 分欄 ────────────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,40px)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,32px)}

/* ── 巨數 · bignum ───────────────────────────────────────────── */
.bignum{font-family:var(--latin);font-weight:600;font-size:clamp(44px,7vw,96px);
  line-height:.9;color:var(--seal);letter-spacing:-.01em}
.reverse .bignum{color:var(--ice)}

/* ── 矩陣 · mx ───────────────────────────────────────────────── */
.mx{display:grid;border:1px solid var(--line2)}
.mx>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(14px,1.4vw,20px) clamp(12px,1.1vw,18px);display:flex;flex-direction:column;justify-content:center}
.mx .hd{font-weight:700;font-size:var(--eg);background:var(--paper2);line-height:1.45}
.mx .c{font-size:var(--desc);line-height:1.62;color:var(--g1)}
.mx .c b{color:var(--ink);display:block;margin-bottom:.25em}

/* ── CTA 按鈕 ─────────────────────────────────────────────────
   §10：唯一允許的藍色填色，且必須維持小面積。 */
.btn{display:inline-flex;align-items:center;gap:.7em;background:var(--seal);color:#FFFFFF;
  font-family:var(--cjk);font-weight:600;font-size:var(--desc);letter-spacing:.06em;
  padding:.85em 1.7em;border:1.5px solid var(--seal);
  transition:background .45s var(--ease),color .45s var(--ease)}
.btn:hover{background:transparent;color:var(--seal)}
.reverse .btn{background:var(--ice);border-color:var(--ice);color:var(--ink)}
.reverse .btn:hover{background:transparent;color:var(--ice)}
.btn-ghost{display:inline-flex;align-items:center;gap:.7em;background:transparent;color:var(--ink);
  font-weight:600;font-size:var(--desc);letter-spacing:.06em;padding:.85em 1.7em;
  border:1px solid var(--line2);transition:border-color .45s var(--ease),color .45s var(--ease)}
.btn-ghost:hover{border-color:var(--ink)}
.reverse .btn-ghost{color:#FFFFFF;border-color:rgba(255,255,255,.34)}
.reverse .btn-ghost:hover{border-color:#FFFFFF}

/* ── 進場 ────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-1{transition-delay:.08s}
.reveal-2{transition-delay:.16s}
.reveal-3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── 手機 ────────────────────────────────────────────────────── */
@media (max-width:760px){
  .cols,.cols3{grid-template-columns:1fr}
  .row{grid-template-columns:34px 1fr;gap:14px}
}

/* ── 顧問申請 · inquiry ──────────────────────────────────────
   QR 模組色是 Charcoal #25282A，在 .reverse 深底上等於隱形——
   深底一律用白色底板墊起來，否則掃不到。 */
.inquiry{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3.4vw,60px);
  align-items:center;border-top:1px solid var(--line2);
  padding-top:clamp(28px,3.2vw,44px);margin-top:clamp(34px,4vw,56px)}
.reverse .inquiry{border-top-color:rgba(255,255,255,.22)}
.inquiry h3{margin:.45em 0 .5em}
.inquiry .btnrow{margin-top:clamp(22px,2.4vw,32px);display:flex;flex-wrap:wrap;gap:12px}

.qr{display:flex;flex-direction:column;align-items:center;gap:.9em;text-align:center}
.qr img{display:block;width:clamp(112px,11vw,152px);height:auto;
  background:#FFFFFF;border:1px solid var(--line2);padding:10px}
.reverse .qr img{border-color:rgba(255,255,255,.26)}
.qr figcaption{font-size:var(--eg);color:var(--g1);line-height:1.6;letter-spacing:.02em}
.qr figcaption span{display:block;font-family:var(--latin);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--g3);margin-top:.35em}
.reverse .qr figcaption{color:rgba(255,255,255,.78)}
.reverse .qr figcaption span{color:rgba(255,255,255,.45)}

@media (max-width:720px){
  .inquiry{grid-template-columns:1fr;justify-items:start}
  .qr{align-items:flex-start;text-align:left}
}

/* ═══════════════════════════════════════════════════════════════
   2026-08-19 · 網頁化調整
   問題：第一版把簡報的版式語言直接搬過來（滿版 hero、超大章節留白、
   01/02/03 頁碼、SCROLL 提示），結果讀起來像投影片而不是網頁。
   這一段負責：內文行寬、行動版導覽、表格橫向捲動、觸控目標。
   ═══════════════════════════════════════════════════════════════ */

/* ── 內文行寬 ────────────────────────────────────────────────
   全形中文一行超過 40em 眼睛會找不到下一行的開頭。 */
.measure{max-width:var(--measure)}
.section p:not([class]),.section .d:not(.nolimit){max-width:var(--measure)}

/* ── 行動版導覽 ──────────────────────────────────────────────
   舊版在 720px 以下直接把 .navlinks 隱藏、不給任何替代入口，
   等於手機使用者沒有導覽。改成漢堡選單。 */
.navtoggle{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;background:transparent;border:0;
  cursor:pointer;color:var(--ink)}
.navtoggle span{display:block;position:relative;width:20px;height:1.5px;background:currentColor;
  transition:background .2s var(--ease)}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;
  width:20px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.navtoggle span::before{top:-6px}
.navtoggle span::after{top:6px}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .navtoggle{display:flex}
  .navlinks{position:fixed;top:var(--navh,58px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line2);
    padding:6px var(--gut) 14px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease)}
  .navlinks.open{transform:none;opacity:1;pointer-events:auto}
  .navlinks a{display:flex;align-items:center;min-height:48px;
    font-size:var(--desc);color:var(--ink);border-bottom:1px solid var(--line)}
  .navlinks a:last-child{border-bottom:0}
  .navlinks .btn{justify-content:center;margin-top:12px;min-height:48px;border-bottom:0}
}

/* ── 表格：窄螢幕改橫向捲動，不壓爛欄位 ───────────────────── */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scrollx > table,.scrollx > .mx{min-width:560px}

/* ── 觸控目標 ────────────────────────────────────────────────
   指標裝置以外（手指）一律至少 44px 高。 */
@media (pointer:coarse){
  .btn,.btn-ghost,.teach-btn,.copy-btn{min-height:46px}
  .clist a,.links a{min-height:52px}
}

/* ── 斷點補齊 ────────────────────────────────────────────────
   舊版只有 760/720/900 三個點，平板尺寸沒人管。 */
@media (max-width:1024px){
  .cols3{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .cols3{grid-template-columns:1fr}
  .punch{font-size:clamp(18px,5vw,22px)}
  .bignum{font-size:clamp(38px,11vw,56px)}
}

/* ── 小字下限 ────────────────────────────────────────────────
   2026-08-19：稽核發現地圖頁有 285 個元素落在 11px 以下（表頭、徽章、
   back-link），手機上等於讀不到。標記 .twe 是字標的一部分，不在此列。 */
.badge{font-size:12.5px}
.back-link{font-size:12.5px}
.tool-compare th{font-size:var(--eg)}
code,.mono{font-size:.92em}

/* ── 工作表在手機改成卡片式 ───────────────────────────────────
   三欄表格在 360px 以下一定爆版（實測溢出 19–59px）。
   改成一列一張卡，欄位名用 ::before 補回來。 */
@media (max-width:560px){
  .work-table,.work-table tbody,.work-table tr,.work-table td{display:block;width:auto}
  .work-table thead{display:none}
  .work-table{border:0}
  .work-table tr{border:1px solid var(--line2);margin-bottom:14px;padding:4px 0}
  .work-table td{border-bottom:0;padding:.55rem 1rem}
  .work-table td.work-name{padding-top:1rem;font-size:var(--desc)}
  .work-table td.work-pain::before,.work-table td.work-tool::before{
    display:block;font-family:var(--caps);font-size:11.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--g3);margin-bottom:.35em}
  .work-table td.work-pain::before{content:"痛點"}
  .work-table td.work-tool::before{content:"建議做法"}
  .tool-compare{display:block;overflow-x:auto}
  .mx{display:block}
  .mx>div{border-right:0}
}

/* ── 區塊跳躍的落點校正 ──────────────────────────────────────
   固定導覽列會蓋住區塊標題，錨點連結與空白鍵跳躍都要留出高度。
   --navh 由頁面 JS 量測後寫進 :root。 */
header[id],section[id],footer{scroll-margin-top:calc(var(--navh,58px) + 8px)}