@font-face{font-family:"Noto Sans TC";font-style:normal;
  font-weight:100 900;font-display:swap;src:url("fonts/NotoSansTC.woff2") format("woff2-variations");}
@font-face{font-family:"Noto Serif TC";font-style:normal;
  font-weight:100 900;font-display:swap;src:url("fonts/NotoSerifTC.woff2") format("woff2-variations");}
/* 以上為子集字型，只含網站用到的字。改文案後重新 build 會重算。 */
/* 喬禾資訊官網 —— 台灣地方感：呼應 kiau-ho 的台語名，米色紙質、直式標題、印章紅。
   link 2026-09-16 從 B／C 兩版裡挑定這一版；B 版留在 archive/b-clean-light/。 */
:root{
  --bg:#f6f1e7;            /* 米黃紙 */
  --paper:#fffdf8;
  --line:#ded4c1; --line-soft:#e9e1d2;
  --fg:#2b2621; --fg-mid:#5d564c; --fg-dim:#948b7c;
  --seal:#a8352a;          /* 印章紅 */
  --ink:#2f4a3f;           /* 墨綠 */
  --serif:"Noto Serif TC","Songti TC","PMingLiU",Georgia,serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
/* 頁內錨點跳過去時，標題會被 sticky 的頁首蓋掉一截。這行是給每個 section 留出讓位空間。 */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:86px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16.5px;line-height:1.95;font-feature-settings:"palt" 1;
  background-image:radial-gradient(circle at 1px 1px,rgba(43,38,33,.032) 1px,transparent 0);
  background-size:22px 22px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1020px;margin:0 auto;padding:0 clamp(22px,5vw,42px)}

/* 頂部 */
header{border-bottom:2px solid var(--fg);background:var(--bg);position:sticky;top:0;z-index:30}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:74px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:13px}
.seal{width:38px;height:38px;flex:none;background:var(--seal);color:#fff;border-radius:3px;
  font-family:var(--serif);font-size:15px;font-weight:600;display:grid;place-items:center;
  line-height:1.1;letter-spacing:0;padding:3px;text-align:center}
.brand b{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.16em;display:block}
.brand i{font-style:normal;font-size:10px;letter-spacing:.26em;color:var(--fg-dim);
  text-transform:uppercase;display:block;margin-top:1px}
nav ul{list-style:none;display:flex;gap:clamp(14px,3vw,30px);margin:0;padding:0;font-size:14.5px}
nav a{color:var(--fg-mid);padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--fg)}
nav a[aria-current]{color:var(--seal);border-bottom-color:var(--seal)}

/* Hero：直式標題 */
.hero{padding:clamp(60px,11vh,104px) 0 clamp(48px,8vh,80px)}
.hero .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,6vw,64px);align-items:start}
.vtitle{writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);
  font-weight:600;letter-spacing:.22em;line-height:1.5;margin:0;
  border-right:1px solid var(--line);padding:4px 20px 4px 0;max-height:12em}
/* ⚠️ max-height 決定直書幾個字換一欄。2026-09-29 標題從 7 字（諮商所管理系統）變成
   8 字（客製管理系統建置），9.5em 剛好裝不下，「置」掉到左邊自成一欄 ——
   直書版的孤字。字數再加就要再放寬。 */
.vtitle em{font-style:normal;color:var(--seal)}
.hero-body{padding-top:6px}
.eyebrow{font-size:11.5px;letter-spacing:.3em;color:var(--ink);margin:0 0 22px;font-weight:500}
h1.flat{font-family:var(--serif);font-size:clamp(25px,3.6vw,38px);line-height:1.6;
  font-weight:600;margin:0;max-width:18em;letter-spacing:.02em;text-wrap:pretty}
/* 每個標點詞組不可拆——斷行只發生在標點之後，所以不會出現「方。」單獨一行。
   （max-width 原本是 15em，剛好把 16 個字的標題卡在第 15 字，怎麼縮都斷在同一處。）*/
h1.flat .cl{white-space:nowrap}
h1.flat em{font-style:normal;color:var(--seal)}
.lede{margin:26px 0 0;max-width:32em;color:var(--fg-mid);font-size:16px}
.hero-cta{margin:30px 0 0}
.hero-cta a{font-family:var(--serif);font-size:16.5px;letter-spacing:.08em;color:var(--paper);
  background:var(--ink);padding:11px 28px;display:inline-block;transition:background .16s,transform .16s}
.hero-cta a:hover{background:var(--seal);transform:translateY(-1px)}

/* 區塊 */
section{padding:clamp(56px,8vh,88px) 0}
section+section{border-top:1px solid var(--line-soft)}
.sec-head{display:flex;align-items:center;gap:15px;margin:0 0 44px}
.sec-head h2{font-family:var(--serif);font-size:23px;font-weight:600;margin:0;letter-spacing:.14em;
  white-space:nowrap}
.sec-head .rule{flex:1;height:1px;background:var(--line)}
.sec-head .cnt{font-size:11.5px;letter-spacing:.14em;color:var(--fg-dim);white-space:nowrap}

/* 服務：紙卡 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:18px}
.card{background:var(--paper);border:1px solid var(--line);padding:28px 26px 32px;
  position:relative;transition:transform .18s,box-shadow .18s}
.card::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-soft);
  pointer-events:none}
.card:hover{transform:translateY(-3px);box-shadow:3px 5px 0 rgba(168,53,42,.09)}
.card .num{font-family:var(--serif);font-size:13px;color:var(--seal);display:block;
  margin-bottom:15px;letter-spacing:.14em}
.card h3{font-family:var(--serif);font-size:20px;margin:0 0 5px;font-weight:600;letter-spacing:.07em}
.card .sub{color:var(--fg-dim);font-size:12.5px;margin:0 0 15px}
.card p{margin:0;font-size:14.5px;color:var(--fg-mid);line-height:1.92}

/* 作品 */
.work{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ink);
  padding:28px 30px;margin-bottom:16px;display:grid;grid-template-columns:1fr auto;
  gap:20px;align-items:start}
.work.product{border-left-color:var(--seal)}
.work h3{font-family:var(--serif);font-size:21px;margin:0 0 5px;font-weight:600;letter-spacing:.06em}
.work .who{color:var(--ink);font-size:13px;margin:0 0 14px;letter-spacing:.07em}
/* 同上：框是滿版的（裡面要放整張截圖），所以這裡不另外卡行寬，
   讓說明文字跟框的右緣對齊，不要在框裡憑空斷一行。 */
.work p{margin:0 0 16px;color:var(--fg-mid);font-size:15px}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:11.5px;letter-spacing:.05em;color:var(--fg-mid);border:1px solid var(--line);
  background:var(--bg);padding:3px 11px}
.state{font-family:var(--serif);font-size:12.5px;letter-spacing:.1em;white-space:nowrap;
  color:#fff;background:var(--ink);padding:5px 13px}
.state.trial{background:var(--seal)}

.prose{max-width:39em;color:var(--fg-mid);font-size:16px}
.prose strong{color:var(--fg);font-weight:600}

/* 聯絡管道：表單與 LINE 並排，各自一顆按鈕 ＋ 一張 QR */
.channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.channel{background:var(--paper);border:1px solid var(--line);padding:clamp(26px,4vw,38px) 26px 32px;
  text-align:center;position:relative;display:flex;flex-direction:column;align-items:center}
.channel::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-soft);
  pointer-events:none}
.channel h3{font-family:var(--serif);font-size:20px;margin:0 0 10px;font-weight:600;letter-spacing:.09em}
.ch-hint{color:var(--fg-mid);font-size:14.5px;margin:0 0 24px;max-width:24em;line-height:1.9}
/* 還沒有網址的管道：講清楚在等什麼，不要生一顆點了沒反應的按鈕 */
.ch-pending{color:var(--fg-dim);font-size:13.5px;margin:0;max-width:24em;line-height:1.85;
  border-top:1px solid var(--line-soft);padding-top:18px;width:100%}
@media(max-width:700px){.channels{grid-template-columns:1fr}}

footer{border-top:2px solid var(--fg);padding:28px 0 46px;color:var(--fg-dim);font-size:12.5px;letter-spacing:.05em}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media(max-width:760px){
  .hero .wrap{grid-template-columns:1fr}
  .vtitle{writing-mode:horizontal-tb;border-right:0;border-bottom:1px solid var(--line);
    padding:0 0 14px;max-height:none;letter-spacing:.1em}
  .work{grid-template-columns:1fr}
}

.scope{margin:30px 0 0;font-size:13.5px;color:var(--fg-dim);letter-spacing:.04em;text-align:center}
.pending{color:var(--fg-mid);font-size:16px;margin:0}

/* 關於我們：原則列表 */
.plist{max-width:46em}
.p{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line-soft)}
.p:last-child{border-bottom:0}
.pn{font-family:var(--serif);font-size:14px;color:var(--seal);letter-spacing:.14em;padding-top:5px;white-space:nowrap}
.p h3{font-family:var(--serif);font-size:19.5px;margin:0 0 8px;font-weight:600;letter-spacing:.06em}
.p p{margin:0;color:var(--fg-mid);font-size:15px;line-height:1.92}
/* 「看更多」 */
.more{margin:38px 0 0}
.more a{color:var(--seal);font-size:14.5px;border-bottom:1px solid rgba(168,53,42,.3);padding-bottom:2px}
.more a:hover{border-bottom-color:var(--seal)}
@media(max-width:600px){.p{grid-template-columns:1fr;gap:6px}.pn{padding-top:0}}

/* 管道裡的按鈕與 QR */
.line-btn{display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:.1em;
  padding:12px 34px;transition:background .16s,transform .16s}
.line-btn:hover{background:var(--seal);transform:translateY(-1px)}
.qr{margin:26px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.qr img{display:block;background:#fff;padding:5px;border:1px solid var(--line);max-width:100%;
  height:auto}   /* 寬高由 render.js 依 QR 的模組數決定，密的畫大一點 */
.qr figcaption{font-size:13px;color:var(--fg-dim);letter-spacing:.03em}

/* 系統畫面最上面的假資料聲明：位置在圖之前，所以比頁尾那句重一點，
   讓人在看到姓名電話之前就先知道那是假的。 */
.shot-note.top{margin:26px 0 30px;padding:12px 16px;border-left:3px solid var(--seal);
  background:var(--paper);color:var(--fg-mid);font-size:13.5px;line-height:1.85}

/* 試用流程：填表單 → 加 LINE。兩張卡是先後順序，不是二選一。 */
.flow{margin:26px 0 0;font-family:var(--serif);font-size:15.5px;letter-spacing:.06em;
  color:var(--fg-mid)}
.ch-step{display:inline-block;font-size:11.5px;letter-spacing:.2em;color:var(--seal);
  border:1px solid var(--seal);padding:3px 10px;margin:0 0 14px;font-weight:600}

/* ── 諮商所系統（ccinfo.html）────────────────────────────────── */

/* hero 底下那句「不用安裝，開瀏覽器就能用。」 */
.note{margin:16px 0 0;color:var(--fg-dim);font-size:13.5px;letter-spacing:.05em}

/* 痛點：不用打勾符號——那是「還沒解決的事」，打勾會讀成「我們有這個功能」。 */
.pain{list-style:none;max-width:38em;margin:0;padding:0}
.pain li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line-soft);
  color:var(--fg-mid);font-size:15.5px}
.pain li:last-child{border-bottom:0}
.pain li::before{content:"";position:absolute;left:3px;top:26px;width:6px;height:6px;
  background:var(--seal);opacity:.75}
.pain-close{max-width:38em;margin:30px 0 0;font-family:var(--serif);font-size:19px;
  color:var(--fg);letter-spacing:.06em;border-left:3px solid var(--seal);padding-left:16px}

/* 系統畫面 */
.shot{margin:0 0 40px;background:var(--paper);border:1px solid var(--line);position:relative}
.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.shot figcaption{padding:18px 24px 22px;font-size:14.5px;color:var(--fg-mid);line-height:1.9}
.shot figcaption b{display:block;font-family:var(--serif);font-size:18px;color:var(--fg);
  font-weight:600;letter-spacing:.09em;margin-bottom:4px}
.shot-note{margin:0;color:var(--fg-dim);font-size:13px;line-height:1.85;max-width:34em}

/* 功能卡裡的條列（資安那張） */
.bul{margin:0;padding:0 0 0 16px;font-size:14.5px;color:var(--fg-mid);line-height:1.9}
.bul li{margin:0 0 6px}
.bul li:last-child{margin-bottom:0}
.bul li::marker{color:var(--seal)}

/* 四張一組的卡片排 2×2。四張擠成一排會太窄，3+1 又會落單一張。 */
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.cards.two{grid-template-columns:1fr}}

/* 窄螢幕的區塊標題：h2 與右側小字本來都是 nowrap，長標題會把整頁撐寬
   （手機上變成可以左右拉，讀起來很糟）。窄的時候讓它們換行。
   ⚠️ 這條也修掉 services.html 原本就有的爆版（390px 下 scrollWidth 437）。 */
@media(max-width:620px){
  .sec-head{flex-wrap:wrap;gap:8px 12px;margin-bottom:34px}
  .sec-head h2{white-space:normal;letter-spacing:.1em;line-height:1.55}
  .sec-head .cnt{white-space:normal}
  .sec-head .rule{min-width:22px}
}

/* ══════════════════════════════════════════════════════════════════
   2026-09-29 改版：公司官網（九區）。
   舊的一頁式樣式在上面，還有用到的：.sec-head .card .pain .shot .channel .qr .line-btn
   ══════════════════════════════════════════════════════════════════ */

/* 改版前的錨點（#shots／#try／#features／#who）掛在這上面，看不見但跳得到。 */
.legacy{display:block;height:0;scroll-margin-top:86px}

/* 常駐 CTA：桌機掛在右緣，直書——跟 hero 的直式標題同一個語彙。 */
.sticky-cta{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:25;
  writing-mode:vertical-rl;background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-size:15px;letter-spacing:.18em;font-weight:600;
  padding:22px 11px;border-radius:4px 0 0 4px;box-shadow:-2px 2px 0 rgba(43,38,33,.12);
  transition:background .16s,padding .16s}
.sticky-cta:hover{background:var(--seal);padding-right:15px}

/* hero 的三個標籤 */
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:24px 0 0;padding:0}
.badges li{font-size:12.5px;letter-spacing:.06em;color:var(--fg-mid);
  border:1px solid var(--line);background:var(--paper);padding:5px 13px;border-radius:2px}
/* 第二顆按鈕：同樣大小但只有框線，不跟主要動作搶 */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-cta a.ghost{background:none;color:var(--ink);border:1px solid var(--ink);padding:10px 24px}
.hero-cta a.ghost:hover{background:var(--ink);color:var(--paper)}

/* 區塊之間的 CTA：一顆按鈕，字就是那句話（五個位置的文案各不相同） */
.cta-bar{margin:44px 0 0;padding-top:30px;border-top:1px solid var(--line-soft);text-align:center}
.cta-bar a{display:inline-block;font-family:var(--serif);font-size:16.5px;letter-spacing:.08em;
  color:var(--paper);background:var(--ink);padding:11px 30px;
  transition:background .16s,transform .16s}
.cta-bar a:hover{background:var(--seal);transform:translateY(-1px)}

.lead-line{margin:0 0 32px;font-family:var(--serif);font-size:17.5px;color:var(--fg);
  letter-spacing:.04em;max-width:34em}

/* 三種院所：桌機三欄，手機直排 */
.clinics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.clinic{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--ink);
  padding:26px 24px 28px}
.clinic h3{font-family:var(--serif);font-size:20px;margin:0 0 16px;font-weight:600;letter-spacing:.1em}
.clinic ul{list-style:none;margin:0;padding:0}
.clinic li{position:relative;padding:8px 0 8px 18px;font-size:14.5px;color:var(--fg-mid);
  line-height:1.8;border-bottom:1px solid var(--line-soft)}
.clinic li:last-child{border-bottom:0}
.clinic li::before{content:"";position:absolute;left:0;top:18px;width:5px;height:5px;
  background:var(--seal);opacity:.7}
.clinic-close{margin:30px 0 0;max-width:42em}

/* 合作流程：五步 */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:0}
.step .sn{font-family:var(--serif);font-size:17px;color:var(--paper);background:var(--ink);
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;flex:none}
.step h3{font-family:var(--serif);font-size:18.5px;margin:2px 0 4px;font-weight:600;letter-spacing:.1em}
.step p{margin:0;color:var(--fg-mid);font-size:15px}

/* 實績 */
.demo-note{margin:0 0 30px;padding:12px 16px;border-left:3px solid var(--seal);
  background:var(--paper);color:var(--fg-mid);font-size:13.5px;line-height:1.85;max-width:46em}
.work{display:block;padding:30px 30px 34px;margin-bottom:22px}
.work-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.work-head h3{margin:0}
.work .who{margin:0}
.work-cta{margin:0 0 4px}
.work-cta a{display:inline-block;font-family:var(--serif);font-size:15.5px;letter-spacing:.08em;
  color:var(--paper);background:var(--seal);padding:9px 24px;transition:transform .16s,background .16s}
.work-cta a:hover{background:var(--ink);transform:translateY(-1px)}
.shots-row{margin:24px 0 0}
.shots-row .shot{margin:0 0 22px}
.shots-row .shot:last-child{margin-bottom:0}
.shot figcaption .demo{display:inline-block;margin-left:10px;font-size:11px;letter-spacing:.14em;
  color:var(--seal);border:1px solid var(--seal);padding:1px 8px;vertical-align:2px;white-space:nowrap}
.swipe-hint{display:none}
.works-close{margin:26px 0 0;max-width:42em}

/* 創辦人 */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.founder{background:var(--paper);border:1px solid var(--line);padding:28px 26px 30px;position:relative}
.founder::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-soft);
  pointer-events:none}
.founder h3{font-family:var(--serif);font-size:20px;margin:0;font-weight:600;letter-spacing:.06em}
.founder h3 .zh{font-size:15px;color:var(--fg-mid);margin-left:10px;letter-spacing:.1em}
.founder .role{margin:4px 0 16px;font-size:12.5px;letter-spacing:.14em;color:var(--seal)}
.founder .bio p{margin:0;font-size:14.5px;color:var(--fg-mid);line-height:1.9}
/* 一句一段：段落之間留一個明顯但不鬆散的間隔，讓每一句自己是一塊。
   ⚠️ 不要改回 <p> 一整段——中文沒有詞距，整段會折成一堵牆（見 render.js 的說明）。 */
.founder .bio p+p{margin-top:11px}
.founders-body{margin:30px 0 0;max-width:42em}
.founders-body p{margin:0}
.founders-body p+p{margin-top:11px}

/* POC 邀請：整段做成一張紙，這是現在最重要的邀請。
   ⚠️ **行寬要卡在框上，不要卡在段落上**（link 2026-09-29：「字為何都掉下一行？」）。
   原本框是滿版、段落另外 max-width:44em（＝682px），框裡卻有 732px ——
   右邊白空 50px，字卻已經被逼到下一行，看起來像壞掉。
   現在改成框自己有上限、段落填滿框，兩條邊永遠對齊，不管螢幕多寬。 */
.poc{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--seal);
  padding:30px 32px;max-width:48em}
.poc p{margin:0 0 16px;color:var(--fg-mid);font-size:15.5px}
.poc p:last-child{margin-bottom:0}

/* 聯絡：三個入口 */
.channels.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.channels.three .channel{padding:30px 22px 32px}
.channels.three .ch-hint{margin-bottom:20px}
/* 沒有 QR 的那張（線上導覽）按鈕就是最後一個元素，補一點下緣讓三張看起來齊 */
.channels.three .channel .line-btn:last-child{margin-bottom:10px}
/* 三張並排時每張只剩 ~210px 可用：標題與按鈕照原尺寸會各斷成兩行
   （「…線上導／覽」「用 LINE 預／約」），縮一級就都排得下。 */
.channels.three .channel h3{font-size:17px;letter-spacing:.04em}
.channels.three .line-btn{font-size:15px;letter-spacing:.06em;padding:11px 22px;white-space:nowrap}

footer .fbits{color:var(--fg-mid)}
footer .fbits a{border-bottom:1px solid var(--line)}

/* ⚠️ 斷點放在 760（跟站上其他地方同一個），不要用 900 ——
   880 是桌機寬度，那裡就該看到三欄並排；用 900 的話連桌機都變成直排。 */
@media(max-width:760px){
  .clinics{grid-template-columns:1fr}
  .channels.three{grid-template-columns:1fr}
  .founders{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* 常駐按鈕在手機上改成右下角的橫式，直書在小螢幕上太高 */
  .sticky-cta{writing-mode:horizontal-tb;top:auto;bottom:14px;right:14px;
    padding:11px 20px;border-radius:3px;font-size:14.5px;letter-spacing:.1em;
    box-shadow:0 2px 6px rgba(43,38,33,.2)}
  /* 免得它蓋住頁尾最後一行 */
  footer{padding-bottom:78px}
  /* 三張系統截圖在手機上左右滑，不要縮到看不清楚 */
  .shots-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:6px}
  .shots-row .shot{flex:0 0 86%;scroll-snap-align:start;margin:0}
  .swipe-hint{display:block;margin:10px 0 0;font-size:12.5px;color:var(--fg-dim);letter-spacing:.04em}
  .work{padding:24px 20px 28px}
  .poc{padding:24px 20px}
}