/* ============================================================
   算清楚 — 共用品牌外殼
   ------------------------------------------------------------
   為什麼要有這一份：
     三個工具原本各自一套配色（藍／青／橘），看起來像三個
     不同的下載檔。共用外殼讓它們變成「同一個站的產品」。

   設計原則：
     外殼用中性色（不搶戲），主色交給各工具自己。
     所以青安是藍的、勞退是青的、修繕是橘的，但導覽列一樣。
   ============================================================ */

:root {
  /* 外殼中性色（刻意不用暖色系，避免跟修繕的橘色打架） */
  --s-ink:      #1C1917;
  --s-ink2:     #44403C;
  --s-muted:    #78716C;
  --s-line:     #E7E5E4;
  --s-line2:    #F5F5F4;
  --s-bg:       #FAFAF9;
  --s-card:     #FFFFFF;
  --s-accent:   #0F766E;   /* 站徽色 */
  --s-accentL:  #CCFBF1;

  --s-font: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
            system-ui, -apple-system, sans-serif;
  --s-mono: ui-monospace, "SFMono-Regular", Consolas,
            "PingFang TC", monospace;

  --s-radius:   14px;
  --s-shadow:   0 1px 2px rgba(28,25,23,.05), 0 8px 24px rgba(28,25,23,.06);
}

/* ── 頂部導覽列 ─────────────────────────────────────────── */
.s-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,249,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--s-line);
}
.s-nav-in {
  max-width: 1100px; margin: 0 auto;
  padding: 11px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

/* 站徽
   觸控目標補到 44px：用負 margin 撐開可點範圍，
   視覺尺寸不變，所以不會看起來變大，點擊範圍卻變大。 */
.s-logo {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--s-ink);
  flex-shrink: 0;
  margin: -8px; padding: 8px;
}
.s-logo-mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--s-ink); color: #fff;
  font-weight: 800; font-size: 15px; letter-spacing: -.5px;
}
/* 站名與副標直排。桌面用 flex 讓兩者同一行（横排），
   手機只留站名，副標藏起來（見下方媒體查詢）。 */
.s-logo-tx { display: flex; align-items: baseline; gap: 8px; }
.s-logo-text { font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.s-logo-sub {
  font-size: 12px; color: var(--s-muted); font-weight: 400;
  letter-spacing: 0; white-space: nowrap;
}

/* 導覽項目
   每個項目 = 線條圖示 + 文字。圖示繼承 currentColor，
   所以「目前頁面」換色時圖示會跟著換，不用另外指定。

   box-sizing: border-box 不能漏。
   這支全站沒有 * { box-sizing: border-box } 重置（不故意加全域重置：
   那會改動四個工具頁既有版面）。沒有它的話 min-height: 44px 只算內容盒，
   上下 padding 再加 16px，實際會變成 60px —— 設定值和量到的值對不上，
   這種 bug 看畫面看不出來，只能量。 */
.s-links {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; flex-wrap: wrap;
}
.s-link {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;               /* 觸控目標標準 */
  padding: 8px 13px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500;
  color: var(--s-ink2); text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.s-ic {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: .72;
  transition: opacity .18s ease;
}
.s-link-lb { line-height: 1; }
.s-link:hover { background: var(--s-line2); color: var(--s-ink); }
.s-link:hover .s-ic { opacity: 1; }

/* 目前所在頁：用各頁自己的主色 */
.s-link[aria-current="page"] {
  background: var(--pageAccentL, var(--s-accentL));
  color: var(--pageAccent, var(--s-accent));
  font-weight: 700;
}
.s-link[aria-current="page"] .s-ic { opacity: 1; }

/* 手機版：四等分固定排列。
   原本這裡是 overflow-x:auto + 隱藏捲軸，實測在 375px 下
   「修繕溝通」被切到畫面外，而且沒有任何線索顯示還有東西 ——
   使用者根本不會知道那個工具存在。改成等分排列後四個全部可見，
   不需要捲動，也就不會有看不見的入口。 */
@media (max-width: 640px) {
  .s-nav-in {
    padding: 7px 12px; gap: 8px;
    flex-wrap: nowrap;
  }
  .s-logo-sub { display: none; }
  .s-logo-mark { width: 26px; height: 26px; font-size: 14px; }

  .s-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .s-link {
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px;
    font-size: 12px;
    min-height: 46px;
    justify-content: center;
    text-align: center;
  }
  .s-ic { width: 19px; height: 19px; }
}

/* 極窄螢幕（320px 以下）：站名會佔掉太多空間，只留標記 */
@media (max-width: 359px) {
  .s-logo-text { display: none; }
  .s-link { font-size: 11.5px; }
}

/* ── 內容容器 ───────────────────────────────────────────── */
.s-wrap {
  max-width: 1100px; margin: 0 auto;
  padding-left: 20px; padding-right: 20px;
  text-align: left;   /* 工具頁的 body 有些是置中排版，容器一律靠左 */
}
@media (max-width: 640px) {
  .s-wrap { padding-left: 14px; padding-right: 14px; }
}

/* ── 頁尾 ───────────────────────────────────────────────── */
.s-foot {
  margin-top: 48px;
  border-top: 1px solid var(--s-line);
  background: var(--s-line2);
}
.s-foot-in {
  max-width: 1100px; margin: 0 auto;
  padding: 30px 20px 40px;
  font-size: 13.5px; line-height: 1.85; color: var(--s-muted);
  /* 置中的頁尾讀起來像廣告，一定要強制靠左 */
  text-align: left;
}
.s-foot h3 {
  font-size: 13px; font-weight: 700; color: var(--s-ink);
  margin: 0 0 8px; letter-spacing: .3px;
}
.s-foot h3:not(:first-child) { margin-top: 22px; }
.s-foot a { color: var(--s-ink2); text-decoration: underline; text-underline-offset: 2px; }
.s-foot a:hover { color: var(--s-ink); }
.s-foot ul { margin: 6px 0 0; padding-left: 20px; }
.s-foot li { margin: 3px 0; }
.s-foot-src {
  background: var(--s-card); border: 1px solid var(--s-line);
  border-radius: 10px; padding: 13px 16px;
}
.s-foot-src b { color: var(--s-ink); }
.s-foot-note {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--s-line);
  font-size: 12.5px;
}

/* ── 首頁專用 ───────────────────────────────────────────── */
.h-hero { padding: 54px 0 30px; }
.h-kicker {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.4px; color: var(--s-accent);
  background: var(--s-accentL); padding: 5px 12px;
  border-radius: 100px; margin-bottom: 20px;
}
.h-title {
  font-size: clamp(32px, 6vw, 54px);
  font-weight: 800; line-height: 1.14;
  letter-spacing: -1.4px; margin: 0 0 18px;
  color: var(--s-ink);
}
.h-title em {
  font-style: normal;
  /* 螞蟻雄兵底線 */
  background: linear-gradient(transparent 62%, var(--s-accentL) 62%);
  padding: 0 2px;
}
.h-lead {
  font-size: clamp(16px, 2.2vw, 19px); line-height: 1.8;
  color: var(--s-ink2); max-width: 700px; margin: 0 0 14px;
}
.h-lead2 {
  font-size: 15px; line-height: 1.8; color: var(--s-muted);
  max-width: 700px; margin: 0;
}

/* ── 首頁的顯眼工具按鈕 ────────────────────────────────────
   放在 hero 裡面，因為落地頁第一眼就要有東西可以點。
   原本 hero 只有文字，手機使用者要捲到第二段才看得到第一張卡片。

   每個按鈕是一整個 <a>，不是「圖示 + 旁邊一個小連結」——
   整塊都是點擊範圍，長輩不用瞄準小目標。
   四個按鈕用四個主色，跟導覽列高亮、下方卡片一致。 */
.h-cta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 26px 0 0;
}
.h-cta-b {
  box-sizing: border-box;                 /* 沒有這行的話 min-height 只算內容盒 */
  display: flex; flex-direction: column;
  gap: 5px;
  min-height: 104px;
  padding: 14px 15px 13px;
  border-radius: var(--s-radius);
  background: var(--s-card);
  border: 1.5px solid var(--s-line);
  /* 左側一條主色：不用整個外框染色，長輩看起來比較清楚（對比更高） */
  box-shadow: inset 3px 0 0 var(--c, var(--s-accent));
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.h-cta-ic {
  width: 22px; height: 22px;
  fill: none; stroke: var(--c, var(--s-accent));
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.h-cta-t {
  font-size: 17px; font-weight: 800; letter-spacing: -.3px;
  color: var(--s-ink);
}
.h-cta-s {
  font-size: 13px; line-height: 1.55; color: var(--s-muted);
}
.h-cta-go {
  margin-top: auto; padding-top: 6px;
  font-size: 13.5px; font-weight: 700;
  color: var(--c, var(--s-accent));
}
/* hover：顏色變化要看得見。同一個色相加濃有時看不出來，
   所以同時加邊框顏色、陰影與位移三個訊號。 */
.h-cta-b:hover {
  border-color: var(--c, var(--s-accent));
  box-shadow: inset 3px 0 0 var(--c, var(--s-accent)),
              var(--s-shadow);
  transform: translateY(-2px);
}
/* 鍵盤操作時的焦點框不能拿掉 —— 這是無障礙必要項 */
.h-cta-b:focus-visible {
  outline: 2.5px solid var(--c, var(--s-accent));
  outline-offset: 2px;
}

@media (max-width: 900px) {
  /* 平板以下改 2×2。四個橫排在 768px 每個只剩約 170px，
     說明文字會擠成兩行，整顆看起來就只是一塊色塊。 */
  .h-cta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .h-cta { gap: 8px; }
  .h-cta-b { min-height: 96px; padding: 12px 12px 11px; }
  .h-cta-t { font-size: 16px; }
  .h-cta-s { font-size: 12.5px; }
}

.h-sec { padding: 40px 0; }
.h-sec-h {
  font-size: clamp(22px, 3.4vw, 30px); font-weight: 800;
  letter-spacing: -.6px; margin: 0 0 8px; color: var(--s-ink);
}
.h-sec-p {
  font-size: 15px; line-height: 1.8; color: var(--s-muted);
  max-width: 660px; margin: 0 0 26px;
}

/* 工具卡片
   刻意不用 auto-fit：三張卡在 auto-fit 下會變成 2+1，很不平衡。
   斷點抓 760px：半螢幕視窗（約 800px）也要能三欄並排，
   只有真的窄（平板直式、手機）才疊成單欄。 */
.h-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .h-grid { grid-template-columns: repeat(3, 1fr); }
}
.h-card {
  display: flex; flex-direction: column;
  background: var(--s-card);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  padding: 24px 24px 22px;
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.h-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c); opacity: .9;
}
.h-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--s-shadow);
  border-color: var(--c);
}
.h-card-ic { font-size: 26px; line-height: 1; margin-bottom: 12px; }
.h-card-h {
  font-size: 18.5px; font-weight: 800; letter-spacing: -.4px;
  margin: 0 0 8px; color: var(--s-ink);
}
.h-card-p {
  font-size: 14.5px; line-height: 1.75; color: var(--s-ink2);
  margin: 0 0 16px; flex: 1;
}
.h-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.h-tag {
  font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 100px;
  background: var(--s-line2); color: var(--s-muted);
}
.h-card-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--c);
}
.h-card-go::after { content: "→"; transition: transform .2s ease; }
.h-card:hover .h-card-go::after { transform: translateX(3px); }

/* 「為什麼可以相信」 */
.h-why {
  background: var(--s-card); border: 1px solid var(--s-line);
  border-radius: var(--s-radius); padding: 30px 28px;
}
.h-why-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.h-why-h {
  font-size: 16px; font-weight: 800; margin: 0 0 8px;
  color: var(--s-ink);
  display: flex; align-items: center; gap: 8px;
}
.h-why-h span {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--s-accentL); color: var(--s-accent);
  font-size: 13px; font-weight: 800; flex-shrink: 0;
}
.h-why-p { font-size: 14px; line-height: 1.8; color: var(--s-ink2); margin: 0; }

/* 下一步提醒 */
.h-next {
  background: var(--s-ink); color: #E7E5E4;
  border-radius: var(--s-radius); padding: 26px 28px;
}
.h-next-h { font-size: 17px; font-weight: 800; margin: 0 0 10px; color: #fff; }
.h-next-p { font-size: 14.5px; line-height: 1.85; margin: 0 0 14px; color: #D6D3D1; }
.h-next-list { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.9; }