/* 薪好算 ShiftPay 官網 —— 唯一樣式表。
   色值逐項取自 docs/design/tokens.md(§1 背景、§2 玻璃、§3 文字、§4 班別、§7 貓班長)。
   規則:零外部字型、零 @import;CJK 字重 ≤700;每頁 backdrop-filter ≤2 處(.top header 與
   hero 的 .glass 示意卡),其餘卡片是半透明實色 + 玻璃邊框(tokens §2 性能規則同精神)。 */

:root {
  color-scheme: light dark;
  /* §1 背景 */
  --bg: #E9F1FA;
  --aurora: radial-gradient(120% 55% at 50% -12%, rgba(255,255,255,.90) 0%, rgba(255,255,255,0) 60%),
            linear-gradient(165deg, #CFE0F7 0%, #E6EDFB 48%, #EFEBFA 100%);
  /* §2 玻璃 */
  --glass: rgba(255,255,255,.44);
  --glass-line: rgba(255,255,255,.70);
  --spec: rgba(255,255,255,.85);
  --shadow: 0 8px 24px rgba(31,58,110,.14);
  /* 非玻璃卡:半透明實色 */
  --card: rgba(255,255,255,.58);
  /* §3 文字與強調 */
  --ink: #16233B;
  --sub: #5D6B85;
  --accent: #2E7CF6;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(46,124,246,.14);
  --money: #16233B;
  --holiday: #D23557;
  /* §7 貓班長 */
  --stkr: #FFFFFF;
  --catsh: rgba(31,58,110,.20);
  /* §4 班別色 */
  --am-bg: rgba(23,150,95,.15);  --am-tx: #116B45;
  --pm-bg: rgba(37,99,235,.14);  --pm-tx: #1D55C8;
  --ni-bg: rgba(112,74,222,.15); --ni-tx: #5636BE;
  --of-bg: rgba(255,255,255,.40); --of-tx: #77829A;
  --sp-bg: rgba(232,136,12,.16); --sp-tx: #A05E08;
  --hw-bg: rgba(210,53,87,.15);  --hw-tx: #B72B4B;
  /* 提示框(免責 / 家事移工)——沿用舊頁的琥珀色系,不借 holiday */
  --notice-bg: rgba(255,247,230,.85);
  --notice-line: #E8D9B5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A101F;
    --aurora: radial-gradient(120% 50% at 50% -12%, rgba(122,162,255,.16) 0%, rgba(122,162,255,0) 60%),
              linear-gradient(165deg, #12203E 0%, #0B1226 52%, #170F2E 100%);
    --glass: rgba(255,255,255,.09);
    --glass-line: rgba(255,255,255,.18);
    --spec: rgba(255,255,255,.20);
    --shadow: 0 8px 24px rgba(0,0,0,.35);
    --card: rgba(255,255,255,.07);
    --ink: #EDF2FB;
    --sub: #93A0BC;
    --accent: #6FA8FF;
    --on-accent: #0A101F;
    --accent-soft: rgba(111,168,255,.18);
    --money: #FFFFFF;
    --holiday: #FF7E9B;
    --stkr: rgba(255,255,255,.38);
    --catsh: rgba(0,0,0,.40);
    --am-bg: rgba(94,234,176,.14);  --am-tx: #7BE9BC;
    --pm-bg: rgba(111,168,255,.15); --pm-tx: #9CC2FF;
    --ni-bg: rgba(156,125,255,.17); --ni-tx: #C4B2FF;
    --of-bg: rgba(255,255,255,.08); --of-tx: #95A0BB;
    --sp-bg: rgba(255,196,107,.15); --sp-tx: #FFC46B;
    --hw-bg: rgba(255,126,155,.15); --hw-tx: #FF9DB4;
    --notice-bg: rgba(255,196,107,.10);
    --notice-line: rgba(255,196,107,.30);
  }
}

/* ── 基底 ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--bg);
  background-image: var(--aurora);
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 700; line-height: 1.3; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.45rem; margin-top: 2.4em; }
h3 { font-size: 1.1rem; margin-top: 1.4em; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
code { font-size: .9em; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.money { color: var(--money); font-weight: 700; font-variant-numeric: tabular-nums; }
.sub { color: var(--sub); }
.eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sub); margin-bottom: .4em;
}

/* ── Header(玻璃 #1)───────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--spec);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--sub); font-weight: 600; margin-left: .25em; }
.brand .cat svg { width: 40px; height: 30px; }
.top nav { display: flex; gap: 22px; font-size: .95rem; }
.top nav a { color: var(--ink); }

/* ── 貓班長 ─────────────────────────────────────── */
.cat svg { display: block; filter: drop-shadow(0 3px 6px var(--catsh)); }
.cat .sticker { stroke: var(--stkr); }

/* ── Hero ───────────────────────────────────────── */
.hero { padding: 64px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: .3em; }
.hero h1 em { font-style: normal; color: var(--sub); font-weight: 600; }
.hero .tagline { font-size: 1.35rem; font-weight: 700; margin-bottom: .6em; }
.hero .lead { color: var(--sub); font-size: 1.05rem; max-width: 34em; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .95rem;
  border: 1px solid var(--glass-line);
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); }

/* ── 玻璃卡(玻璃 #2:只給 hero 示意卡)──────────── */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--spec);
}
.mock { padding: 22px 22px 18px; position: relative; }
.mock .label { position: absolute; top: 12px; right: 16px; font-size: .7rem; color: var(--sub); letter-spacing: .1em; }
.mock .head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.mock .head .k { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--sub); }
.mock .head .money { font-size: 1.9rem; }
.mock .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 7px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--glass-line);
}
.chip.am { background: var(--am-bg); color: var(--am-tx); }
.chip.pm { background: var(--pm-bg); color: var(--pm-tx); }
.chip.ni { background: var(--ni-bg); color: var(--ni-tx); }
.chip.of { background: var(--of-bg); color: var(--of-tx); }
.chip.sp { background: var(--sp-bg); color: var(--sp-tx); }
.chip.hw { background: var(--hw-bg); color: var(--hw-tx); }
.mock .rows { border-top: 1px solid var(--glass-line); padding-top: 10px; font-size: .9rem; }
.mock .rows div { display: flex; justify-content: space-between; padding: 4px 0; }
.mock .rows .law { color: var(--sub); font-size: .78rem; }
.mock .catline { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--sub); font-size: .9rem; }
.mock .catline .cat svg { width: 56px; height: 42px; }

/* ── 區塊與卡片 ─────────────────────────────────── */
.section { padding: 28px 0; }
.section > .wrap > h2 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--card);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: inset 0 1px 0 var(--spec);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card .num { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--money); line-height: 1.1; }
.card .unit { color: var(--sub); font-size: .85rem; }
.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-line);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: .95rem;
}
ul.plain { padding-left: 1.2em; }

/* ── 內文頁(支援 / 隱私)─────────────────────────── */
.doc { padding: 40px 0 60px; }
.doc h1 { font-size: 1.7rem; }
.doc h2 { font-size: 1.2rem; border-bottom: 1px solid var(--glass-line); padding-bottom: .3em; }
.updated { color: var(--sub); font-size: .9rem; margin-bottom: 2em; }
.faq dt { font-weight: 700; margin-top: 1.4em; }
.faq dd { margin: .3em 0 0; color: var(--ink); }
.quote {
  background: var(--card); border-left: 3px solid var(--sub); border-radius: 6px;
  padding: 10px 14px; font-size: .92rem; margin: .6em 0;
}
.quote cite { display: block; margin-top: .5em; font-size: .85rem; color: var(--sub); overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; margin: .8em 0; }
th, td { border: 1px solid var(--glass-line); padding: 8px 10px; text-align: left; vertical-align: top; font-size: .92rem; }
th { background: var(--card); }
.disclaimer {
  background: var(--notice-bg); border: 1px solid var(--notice-line); border-radius: 8px;
  padding: 14px 16px; font-size: .95rem;
}
.crumbs { font-size: .85rem; color: var(--sub); margin-bottom: 1.5em; }
.crumbs a { color: var(--sub); }

/* ── Footer ─────────────────────────────────────── */
/* 2026-09-08 上線後實機回報:頁尾沒有底色或分隔線,文字直接浮在漸層上。
   加玻璃邊框 + 半透明實色底(不加 blur,守住每頁 backdrop-filter ≤2)。 */
.foot {
  margin-top: 48px;
  padding: 40px 0 56px;
  color: var(--sub);
  font-size: .9rem;
  background: var(--card);
  border-top: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--spec);
}
.foot .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.foot .links { display: flex; gap: 18px; margin-bottom: 10px; }
.foot .links a { color: var(--ink); }
.foot .cat svg { width: 64px; height: 48px; }
.foot .disclaimer { margin: 12px 0; }

/* ── RWD ─────────────────────────────────────────── */
@media (max-width: 720px) {
  h1 { font-size: 1.7rem; }
  .hero { padding: 40px 0 24px; }
  .hero .wrap, .foot .wrap { grid-template-columns: 1fr; }
  .grid, .grid.two { grid-template-columns: 1fr; }
  .top nav { gap: 14px; font-size: .9rem; }
  body { background-attachment: scroll; }
}