/* happydo-global.css — Happydo Premium PropTech System v3
   Brand preserved: espresso / gold / cream. No patch CSS required. */
:root{
  --espresso-950:#1f1512;--espresso-900:#2B1A16;--espresso-850:#34231f;--espresso-800:#3E2723;--espresso-700:#5D4037;
  --gold-650:#C99445;--gold-600:#D6A354;--gold-500:#E9C46A;--copper:#C87932;--brick:#A63A2A;--red:#B42318;
  --cream:#FBF7EF;--cream-2:#F7EFE3;--paper:#fffdf8;--white:#fff;--line:#E6D7C7;--line-2:#D3BEA9;
  --ink:#211815;--text:#3f2f2a;--muted:#6e5c53;--soft:#907c72;--green:#A63A2A;--line-green:#008938;
  --ink-200:#E7DCD2; --ink-800:#3E2723;
  --max:1180px;--r:18px;--r-lg:28px;--r-xl:34px;
  --shadow-xs:0 6px 18px rgba(31,21,18,.06);--shadow:0 18px 46px rgba(31,21,18,.10);--shadow-lg:0 28px 70px rgba(31,21,18,.18);
  --gold:var(--gold-500);
  --light-gold:var(--gold-500);
  --coffee-800:var(--espresso-800);
  --coffee-900:var(--espresso-900);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 12% -10%,rgba(214,163,84,.16),transparent 28%),linear-gradient(180deg,var(--cream),#fff 42%,var(--cream-2));color:var(--text);font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',Arial,sans-serif;line-height:1.76;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}button,input,select,textarea{font:inherit}h1,h2,h3,h4,p{margin:0}p{letter-spacing:.01em}.container{max-width:var(--max);margin:0 auto;padding:0 24px}.ub{background:var(--espresso-950);color:rgba(255,255,255,.76);font-size:12px;text-align:center;padding:8px 16px;letter-spacing:.04em}.site-nav,nav{position:sticky;top:0;z-index:60;background:rgba(251,247,239,.92);border-bottom:1px solid rgba(211,190,169,.7);backdrop-filter:blur(16px)}.nav-in{max-width:var(--max);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand img,.nav-in .brand img,footer .fb img,.site-footer img{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;object-fit:cover!important;flex:0 0 auto!important;border-radius:50%!important;border:1px solid var(--line)!important}.brand .zh{font-size:17px;font-weight:950;color:var(--ink);line-height:1}.brand .en{font-size:10px;font-weight:800;color:var(--soft);letter-spacing:.22em;margin-top:4px}.nav-links{display:flex;align-items:center;gap:18px}.nav-links a{font-size:14px;font-weight:850;color:var(--espresso-700);white-space:nowrap}.nav-links a:hover{color:var(--brick)}.nav-cta{background:var(--espresso-900)!important;color:var(--gold-500)!important;border-radius:999px;padding:9px 15px;box-shadow:0 8px 20px rgba(43,26,22,.12)}.hb{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;gap:5px;flex-direction:column}.hb span{width:21px;height:2px;background:var(--ink);border-radius:3px;display:block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;padding:13px 21px;font-size:14px;font-weight:950;cursor:pointer;transition:.2s;text-decoration:none}.btn.primary{background:var(--brick);color:#fff!important;box-shadow:0 12px 24px rgba(166,58,42,.18)}.btn.primary:hover{background:#8f3023;transform:translateY(-1px)}.btn.dark{background:var(--espresso-900);color:var(--gold-500)!important}.btn.ghost{background:#fff;color:var(--espresso-900)!important;border:1px solid var(--line)}.btn.line{background:var(--line-green);color:#fff!important}.btn.small{padding:9px 13px;font-size:12.5px}.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(214,163,84,.36);background:#fff7ea;color:var(--brick);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.site-footer,footer{background:var(--espresso-950);color:rgba(255,255,255,.78);padding:52px 24px 96px}.fin{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}.fb .zh{font-size:16px;font-weight:950;color:#fff;margin-top:10px}.fb p{font-size:13px;color:rgba(255,255,255,.62);line-height:1.75;max-width:340px;margin-top:8px}.footer-heading{font-size:11px;font-weight:950;letter-spacing:.18em;color:rgba(233,196,106,.72);margin-bottom:12px}.fin a{display:block;color:rgba(255,255,255,.76);font-size:13px;margin:7px 0}.fin a:hover{color:var(--gold-500)}.disclaim{max-width:var(--max);margin:34px auto 0;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:12px;color:rgba(255,255,255,.52);line-height:1.75}.fbb{max-width:var(--max);margin:14px auto 0;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.38)}#lf{position:fixed;right:18px;bottom:18px;z-index:80;background:var(--line-green);color:#fff;border-radius:999px;padding:12px 16px;font-size:14px;font-weight:950;box-shadow:0 10px 28px rgba(6,199,85,.32);text-decoration:none}.hd-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.hd-table th{background:var(--espresso-900);color:var(--gold-500);font-size:12px;letter-spacing:.08em;text-align:left;padding:12px 14px}.hd-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text);font-size:14px}.hd-table tr:last-child td{border-bottom:0}main img:not(.brand img):not(.logo){max-width:100%;height:auto}@media(max-width:860px){.nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);padding:12px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{padding:10px 0}.hb{display:flex}.fin{grid-template-columns:1fr 1fr}.container{padding:0 18px}}@media(max-width:560px){.fin{grid-template-columns:1fr}.ub{font-size:11px}.brand .zh{font-size:15px}.brand img,.nav-in .brand img{width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important}.site-footer,footer{padding-bottom:86px}#lf{right:12px;bottom:12px;padding:10px 13px;font-size:13px}}
  .hd-navlinks{display:none!important;}
  header nav img,
  nav a[href="/"] img[src*="logo"],
  header a[href="/"] img[src*="logo"]{
    width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important;min-width:42px!important;min-height:42px!important;flex-basis:42px!important;
  }
}

/* ================================
   HappyDo Color Contrast Hotfix
   Version: 2026-05-13
   Scope:
   - Only color contrast fixes.
   - aria-label is intentionally untouched.
   - No layout, spacing, formula, JavaScript, or calculator logic changes.
   ================================ */

/* 1. LINE buttons
   #06C755 + white text does not pass WCAG AA contrast.
   Use deeper green #008938.
*/
#lf,
.line-float,
.line-btn,
.btn.line,
.socbtn-ln,
.soc-line,
a[href*="line.me"] {
  background-color: #008938 !important;
  color: #ffffff !important;
  border-color: #008938 !important;
}

/* Keep floating LINE button shadow visually consistent after green darkening. */
#lf,
.line-float {
  box-shadow: 0 10px 28px rgba(0, 137, 56, .28) !important;
}

/* 2. Main CTA buttons
   Improve contrast for legacy CTA buttons such as "立即試算" / "加入 LINE".
*/
  background-color: #5e3900 !important;
  color: #ffffff !important;
  border-color: #5e3900 !important;
}

/* 3. Orange CTA
   Darken orange CTA background for white text contrast.
*/
:root {
  --orange-500: #b1621b;
}

/* 4. Social buttons
   Improve contrast for Facebook / Instagram text links.
*/
.socbtn-fb,
.soc-fb,
.fb {
  color: #003d8c !important;
}

.socbtn-ig,
.soc-ig,
.ig {
  color: #303030 !important;
}

/* LINE social buttons should remain filled buttons with readable white text. */
.socbtn-ln,
.soc-line {
  background-color: #008938 !important;
  color: #ffffff !important;
  border-color: #008938 !important;
}

/* 5. About page principle/value cards
   Improve contrast for "不灌迷湯 / 不製造恐慌 / 不取代專業" blocks.
*/
.about-card b,
.principle-card b,
.value-card b {
  color: #330800 !important;
}

.about-card span,
.principle-card span,
.value-card span {
  color: #27120a !important;
}

/* 6. Start-here and onboarding helper text
   Make secondary descriptions easier to read without changing layout.
*/
.q-sub,
.opt-desc {
  color: #6f5a50 !important;
}

.flow-what {
  color: #3f2a1f !important;
}

/* 7. Table small notes
   Avoid contrast being too close to WCAG AA threshold.
*/
table small {
  color: #475569 !important;
}

/* 8. Inline LINE style fallback
   Some older pages use inline style="background:#06C755".
   This safely overrides only color-related properties.
*/
a[style*="#06C755"],
a[style*="rgb(6, 199, 85)"] {
  background-color: #008938 !important;
  color: #ffffff !important;
  border-color: #008938 !important;
}

/* =========================================================
   v20 Brand Functional Release — Global Layer
   用途：
   - 保留原 Logo 與咖啡金主色。
   - 用舊版較有品牌記憶點的底層 CSS，結合新版工具串接。
   - 提升字色清楚度、按鈕層級、手機可讀性。
   - 不新增假數據、不新增假圖表、不修改 calculator 公式。
   ========================================================= */

:root{
  --hd-text-strong:#211815;
  --hd-text:#3f2f2a;
  --hd-text-soft:#5f4e46;
  --hd-text-muted:#475569;
  --hd-surface:#fffdf8;
  --hd-surface-soft:#fbf5eb;
  --hd-line:rgba(211,190,169,.78);
  --hd-shadow-sm:0 8px 22px rgba(31,21,18,.06);
  --hd-shadow-md:0 18px 44px rgba(31,21,18,.09);
  --hd-shadow-lg:0 28px 76px rgba(31,21,18,.14);
  --hd-focus:0 0 0 4px rgba(214,163,84,.18);
}

html{overflow-x:hidden;scroll-behavior:smooth;}

body{
  color:var(--hd-text);
  background:
    radial-gradient(circle at 8% -10%,rgba(214,163,84,.15),transparent 30%),
    radial-gradient(circle at 90% 0%,rgba(166,58,42,.06),transparent 30%),
    linear-gradient(180deg,var(--cream),#fff 45%,var(--cream-2));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  color:var(--hd-text-strong);
  letter-spacing:-.025em;
  text-wrap:balance;
}

p,li{line-height:1.78;text-wrap:pretty;}

small,.muted,.note,.help,.helper,.sub,.desc,.hint,.calc-hint{
  color:var(--hd-text-soft)!important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none!important;
  box-shadow:var(--hd-focus)!important;
}

button,.btn,.pill,.nav-cta{
  min-height:44px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

@media(hover:hover){
  .btn:hover,.pill:hover,.nav-cta:hover:hover:hover{
    transform:translateY(-1px);
  }
}

.btn.primary,.nav-cta{
  background:var(--brick)!important;
  color:#fff!important;
  border-color:var(--brick)!important;
}

.btn.ghost{
  background:#fff!important;
  color:var(--espresso-900)!important;
  border:1px solid var(--line)!important;
}

.btn.line,#lf,.line-float,.line-btn,.socbtn-ln,.soc-line,a[href*="line.me"]{
  background:#008938!important;
  color:#fff!important;
  border-color:#008938!important;
}

.card,.metric-card,.tools-card,.form-panel,.chart-card,.timeline-body,.next-band,
.principle-box,.hd-enhance-box,.hd-mini-card,.callout,.summary,.cta-box{
  box-shadow:var(--hd-shadow-sm);
}

.num,.metric-card b,.hd-calc-metric strong,.calc-result-value,.fx-score b,.fx-mini-stat b,
.scenario-rate,.scenario-meta b,.bar-val{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* Release mobile guard */
@media(max-width:760px){
  body{background:linear-gradient(180deg,var(--cream),#fff 45%,var(--cream-2));}
  .container{padding-left:18px;padding-right:18px;}
  .btn,.pill,button,input,select,textarea{min-height:44px;}
  .btn:hover,.pill:hover,.card:hover,.tools-card:hover{transform:none!important;}
  .card,.metric-card,.tools-card,.form-panel,.chart-card,.timeline-body,.next-band,
  .principle-box,.hd-enhance-box,.hd-mini-card,.callout,.summary,.cta-box{
    box-shadow:0 9px 24px rgba(31,21,18,.07)!important;
  }
}

/* =========================================================
   v21 Final Page QA — Global Micro Polish
   逐頁收尾用：
   - 不改品牌主色、不改 Logo。
   - 不改計算公式、不改 JS。
   - 修正小字、按鈕、手機閱讀與基本對比。
   ========================================================= */

:root{
  --qa-text:#211815;
  --qa-body:#3f2f2a;
  --qa-muted:#5f4e46;
  --qa-soft:#6b5a52;
  --qa-line:rgba(211,190,169,.80);
  --qa-card:#fffdf8;
  --qa-card-2:#fff8ec;
}

/* Consistent reading color. */
body,
p,
li,
td,
dd{
  color:var(--qa-body);
}

/* Avoid overly pale helper text. */
small,
.muted,
.note,
.help,
.helper,
.sub,
.desc,
.hint,
.kicker,
.card small,
.tools-card small,
.calc-hint{
  color:var(--qa-muted)!important;
}

/* Better default link clarity inside content areas. */
article a:not(.btn),
.section a:not(.btn),
.card a:not(.btn),
.callout a:not(.btn),
.summary a:not(.btn){
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* Buttons should not look cramped on mobile. */
.btn,
button,
.pill,
.nav-cta,
  line-height:1.35;
}

/* Avoid accidental icon/text collision from inline elements. */
.btn > *,
.pill > *,
.nav-links a > *,
.tools-card a > *{
  margin-inline-end:.25em;
}

@media(max-width:760px){
  h1{letter-spacing:-.03em;}
  h2,h3{letter-spacing:-.02em;}
  p,li{line-height:1.72;}
  .btn,.pill,button{
    width:auto;
    max-width:100%;
  }
}

/* Global UI consistency baseline */
main,
article,
section{
  color:var(--qa-body,var(--text));
}

.dark,
.section.dark,
.hero,
.page-hero,
.home-hero,
.hd-redesign-hero,
.cta-box,
.tool-nextstep,
.hd-cta-strip,
.site-footer,
footer{
  color:#fff8ea;
}

.dark h1,
.dark h2,
.dark h3,
.section.dark h1,
.section.dark h2,
.section.dark h3,
.hero h1,
.hero h2,
.hero h3,
.page-hero h1,
.page-hero h2,
.page-hero h3,
.home-hero h1,
.home-hero h2,
.home-hero h3,
.hd-redesign-hero h1,
.hd-redesign-hero h2,
.hd-redesign-hero h3,
.cta-box h1,
.cta-box h2,
.cta-box h3,
.tool-nextstep h1,
.tool-nextstep h2,
.tool-nextstep h3,
.hd-cta-strip h1,
.hd-cta-strip h2,
.hd-cta-strip h3{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}

.dark p,
.dark li,
.section.dark p,
.section.dark li,
.hero p,
.hero li,
.page-hero p,
.page-hero li,
.home-hero p,
.home-hero li,
.hd-redesign-hero p,
.hd-redesign-hero li,
.cta-box p,
.cta-box li,
.tool-nextstep p,
.tool-nextstep li,
.hd-cta-strip p,
.hd-cta-strip li{
  color:rgba(255,248,234,.9);
  text-shadow:none;
}

.dark a:not(.btn),
.section.dark a:not(.btn),
.hero a:not(.btn),
.page-hero a:not(.btn),
.home-hero a:not(.btn),
.cta-box a:not(.btn),
.tool-nextstep a:not(.btn),
.hd-cta-strip a:not(.btn){
  color:var(--gold-500);
}

.card:not(.dark),
.notice-box,
.guide-box,
.query-box,
.pro-tips,
.tip-item,
.summary-box,
.method-card,
.benefit,
.misconception,
.fit-card,
.stat,
.qa,
.callout:not(.dark),
.form-panel,
.table-wrap{
  background:#fff;
  color:var(--qa-body,var(--text));
}

.card:not(.dark) h1,
.card:not(.dark) h2,
.card:not(.dark) h3,
.notice-box h1,
.notice-box h2,
.notice-box h3,
.guide-box h1,
.guide-box h2,
.guide-box h3,
.query-box h1,
.query-box h2,
.query-box h3,
.pro-tips h1,
.pro-tips h2,
.pro-tips h3,
.tip-item h1,
.tip-item h2,
.tip-item h3,
.summary-box h1,
.summary-box h2,
.summary-box h3,
.method-card h1,
.method-card h2,
.method-card h3,
.benefit h1,
.benefit h2,
.benefit h3,
.misconception h1,
.misconception h2,
.misconception h3,
.fit-card h1,
.fit-card h2,
.fit-card h3,
.stat h1,
.stat h2,
.stat h3,
.qa h1,
.qa h2,
.qa h3,
.callout:not(.dark) h1,
.callout:not(.dark) h2,
.callout:not(.dark) h3,
.form-panel h1,
.form-panel h2,
.form-panel h3{
  color:var(--qa-text,var(--ink));
  text-shadow:none;
}

.card:not(.dark) p,
.card:not(.dark) li,
.notice-box p,
.notice-box li,
.guide-box p,
.guide-box li,
.query-box p,
.query-box li,
.pro-tips p,
.pro-tips li,
.tip-item p,
.tip-item li,
.summary-box p,
.summary-box li,
.method-card p,
.method-card li,
.benefit p,
.benefit li,
.misconception p,
.misconception li,
.fit-card p,
.fit-card li,
.stat p,
.stat li,
.qa p,
.qa li,
.callout:not(.dark) p,
.callout:not(.dark) li,
.form-panel p,
.form-panel li{
  color:var(--qa-body,var(--text));
  text-shadow:none;
}

.btn,
.btn-primary,
.btn-o,
.nav-cta,
.nav-links .cta{
  font-weight:950;
}

.btn-primary,
.btn-o,
.nav-links .cta{
  background:var(--brick);
  color:#fff;
  border-color:var(--brick);
}

.btn-white,
.btn-w,
.btn.ghost{
  background:#fff;
  color:var(--espresso-900);
  border:1px solid var(--line);
}

.btn-line,
a[href*="line.me"].btn{
  background:var(--line-green);
  color:#fff;
  border-color:var(--line-green);
}

.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:18px;
}

table{
  width:100%;
}

thead th{
  background:var(--espresso-900);
  color:var(--gold-500);
}

tbody td{
  color:var(--qa-body,var(--text));
  background:#fff;
}

/* Global typography baseline */
:root{
  --type-body:16px;
  --type-body-mobile:15.5px;
  --type-article-h1:clamp(28px,4.5vw,40px);
  --type-article-h2:clamp(22px,3vw,30px);
  --type-article-h3:clamp(18px,2.2vw,20px);
  --type-content:16px;
  --type-card-body:15px;
  --type-button:15px;
  --type-nav-cta:14px;
  --type-note:13px;
  --type-footer:13px;
}

body{
  font-size:var(--type-body);
}

main,
article{
  font-size:var(--type-content);
  line-height:1.78;
}

article h1{
  font-size:var(--type-article-h1);
  line-height:1.25;
}

article h2{
  font-size:var(--type-article-h2);
  line-height:1.35;
}

article h3{
  font-size:var(--type-article-h3);
  line-height:1.45;
}

article p,
article li{
  font-size:var(--type-content);
  line-height:1.82;
}

.btn,
button,
.nav-cta,
  font-size:var(--type-button);
  line-height:1.38;
}

.nav-cta,
  font-size:var(--type-nav-cta);
}

.card h2,
.ns-card h2,
.reltool-card h2,
.site-card h2{
  font-size:clamp(20px,2.6vw,24px);
  line-height:1.35;
}

.card h3,
.ns-card h3,
.reltool-card h3,
.site-card h3{
  font-size:clamp(18px,2.2vw,20px);
  line-height:1.42;
}

.card p,
.card li,
.ns-card p,
.ns-card li,
.reltool-card p,
.reltool-card li,
.site-card p,
.site-card li{
  font-size:var(--type-card-body);
  line-height:1.76;
}

.note,
.source,
.source-note,
.disclaimer,
small,
.meta{
  font-size:var(--type-note);
  line-height:1.68;
}

.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
footer.site-footer,
footer.site-footer p,
footer.site-footer li,
footer.site-footer a{
  font-size:var(--type-footer);
  line-height:1.78;
}

.site-footer h2,
.site-footer h3,
footer.site-footer h2,
footer.site-footer h3{
  font-size:clamp(16px,2vw,18px);
  line-height:1.45;
}

.site-footer small,
footer.site-footer small{
  font-size:12px;
  line-height:1.65;
}

@media(max-width:760px){
  body{
    font-size:var(--type-body-mobile);
  }

  main,
  article{
    font-size:var(--type-body-mobile);
    line-height:1.74;
  }

  article h1{
    font-size:clamp(26px,8vw,34px);
    line-height:1.25;
  }

  article h2{
    font-size:clamp(21px,6vw,27px);
    line-height:1.35;
  }

  article h3{
    font-size:18px;
    line-height:1.42;
  }

  article p,
  article li{
    font-size:var(--type-body-mobile);
    line-height:1.78;
  }

  .btn,
  button,
  .nav-cta,
    font-size:14px;
  }

  .card p,
  .card li,
  .ns-card p,
  .ns-card li,
  .reltool-card p,
  .reltool-card li,
  .site-card p,
  .site-card li{
    font-size:15px;
    line-height:1.72;
  }
}

/* Typography consistency refinements */
.hd-page .section p,
.hd-system .section p,
.functional-page .section p,
.hd-page main p,
.hd-system main p{
  font-size:var(--type-content);
  line-height:1.82;
}

.hd-page .section li,
.hd-system .section li,
.functional-page .section li,
.hd-page main li,
.hd-system main li{
  font-size:var(--type-content);
  line-height:1.78;
}

.hd-page .sec-head p,
.hd-system .sec-head p,
.functional-page .sec-head p,
.hd-page .hero-sub,
.hd-system .hero-sub{
  font-size:clamp(15.5px,1.45vw,17px);
  line-height:1.84;
}

.hd-page .eyebrow,
.hd-system .eyebrow,
.functional-page .eyebrow,
.hd-page .hero-kicker,
.hd-system .hero-kicker,
.kicker{
  font-size:12px;
  line-height:1.35;
}

.hd-page .next-band p,
.hd-system .next-band p,
.functional-page .next-band p{
  font-size:15px;
  line-height:1.76;
}

.hd-page .data-table,
.hd-system .data-table,
.functional-page .data-table,
.hd-page table,
.hd-system table{
  font-size:15px;
}

.hd-page .data-table td,
.hd-system .data-table td,
.functional-page .data-table td,
.hd-page .data-table th,
.hd-system .data-table th,
.functional-page .data-table th{
  font-size:15px;
  line-height:1.68;
}

.hd-page .muted,
.hd-system .muted,
.functional-page .muted,
.hd-page .small-warn,
.hd-system .small-warn,
.functional-page .small-warn,
.hd-page .data-note,
.hd-system .data-note,
.functional-page .data-note{
  font-size:var(--type-note);
  line-height:1.7;
}

@media(max-width:760px){
  .hd-page .section p,
  .hd-system .section p,
  .functional-page .section p,
  .hd-page .section li,
  .hd-system .section li,
  .functional-page .section li{
    font-size:var(--type-body-mobile);
    line-height:1.78;
  }

  .hd-page .next-band p,
  .hd-system .next-band p,
  .functional-page .next-band p{
    font-size:15px;
  }
}



/* ================================================================
   Typography refinements v2026-05 (Batch 1)
   - Adds home/page hero tokens and eyebrow / table / disclaimer tokens
   - Strengthens small-text minimums (note / source / disclaimer >= 13px)
   - Mobile guard: body text never below 15.5px on small screens
   - No new !important; conflicts on home page handled in dashboard.css home block
   ================================================================ */
:root{
  --type-home-h1:clamp(34px,4.6vw,54px);
  --type-home-h1-mobile:clamp(30px,8.5vw,38px);
  --type-page-h1:clamp(30px,4.4vw,44px);
  --type-page-h1-mobile:clamp(26px,7.5vw,32px);
  --type-eyebrow:12px;
  --type-hero-sub:clamp(15.5px,1.55vw,17px);
  --type-table-th:13px;
  --type-table-td:14.5px;
  --type-disclaimer:13px;
  --type-micro:12px;
}

/* page-hero baseline (any page using <section class="page-hero">) */
.page-hero h1{
  font-size:var(--type-page-h1);
  line-height:1.2;
  letter-spacing:-.02em;
}
.page-hero .hero-sub,
.page-hero p.lede,
.page-hero p.subtitle,
.page-hero .hd-lede{
  font-size:var(--type-hero-sub);
  line-height:1.85;
}

/* eyebrow / kicker — unify to one size, do not let them shrink to 10–11px */
.page-hero .hero-kicker,
.page-hero .eyebrow,
.hero-kicker,
.eyebrow,
.kicker,
.sec-head .eyebrow{
  font-size:var(--type-eyebrow);
  line-height:1.4;
  letter-spacing:.18em;
  font-weight:800;
}

/* article-hero (when class also present) — normalize sub */
.article-hero p.subtitle,
.article-hero .hero-sub,
.article-hero .hd-lede{
  font-size:var(--type-hero-sub);
  line-height:1.85;
}

/* small text minimum protection */
.note,
.source,
.source-note,
.disclaimer,
.helper,
.hint,
.muted{
  font-size:var(--type-note);
  line-height:1.7;
}

/* footer micro line */
.site-footer .fbb,
footer.site-footer .fbb{
  font-size:var(--type-micro);
}

/* footer policy links */
.site-footer .fbb-policy,
footer.site-footer .fbb-policy{
  max-width:var(--max);
  margin:10px auto 0;
  font-size:var(--type-micro);
  color:rgba(255,255,255,.38);
}
.site-footer .fbb-policy a,
footer.site-footer .fbb-policy a{
  color:rgba(255,255,255,.52);
}
.site-footer .fbb-policy a:hover,
footer.site-footer .fbb-policy a:hover{
  color:var(--gold-500);
}

/* table baseline — th smaller / td readable */
.hd-table th,
.data-table th,
.table-wrap th{
  font-size:var(--type-table-th);
  letter-spacing:.06em;
}
.hd-table td,
.data-table td,
.table-wrap td{
  font-size:var(--type-table-td);
  line-height:1.6;
}

/* mobile guard — final safety net so text doesn't shrink below readable thresholds */
@media(max-width:560px){
  body,
  main p,
  main li,
  article p,
  article li,
  .hd-page .section p,
  .hd-page .section li,
  .hd-system .section p,
  .hd-system .section li,
  .functional-page .section p,
  .functional-page .section li{
    font-size:var(--type-body-mobile);
    line-height:1.78;
  }
  .page-hero h1{
    font-size:var(--type-page-h1-mobile);
    line-height:1.22;
  }
  .note,
  .source,
  .source-note,
  .disclaimer,
  .helper,
  .hint{
    font-size:13px;
  }
  .hd-table td,
  .data-table td,
  .table-wrap td{
    font-size:14px;
  }
}


/* =================================================================
   v28 Round-1 consistency pass — 2026-05-22
   只做：手機爆版、卡片比例不一致、表格不好讀、明顯排版錯位的收尾。
   不改：內容、JS、URL、Logo、品牌主色、Schema、tracking、LINE 浮動按鈕。
   不新增 patch CSS 檔；本區塊直接附在 happydo-global.css 末尾。
   ================================================================= */

/* 1. 全站手機爆版保險網 ------------------------------------------- */
html,body{
  overflow-x:hidden;
  max-width:100%;
}

main,article,section,.container,.section,
.card,.callout,.summary,.cta-box,
.tools-card,.situation-card,
.ns-card,.reltool-card,
.hero-panel,.fx-hero-panel,.brand-dashboard{
  min-width:0;
}

/* 中英混排 / 長 URL / 長條款 不會橫向撐破容器 */
p,li,dd,blockquote,summary,
td,th,.note,.source,.source-note,.disclaimer,.helper{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 標題改用較柔和的 break-word，避免英文單字硬切 */
h1,h2,h3,h4{
  overflow-wrap:break-word;
}

/* 圖片 / iframe / video 永遠不撐爆容器 */
img,svg,video,iframe,embed,object{
  max-width:100%;
  height:auto;
}

/* 2. 360px ~ 480px 收緊 .container 內距，卡片不再貼邊 -------------- */
@media(max-width:480px){
  .container{padding-left:14px;padding-right:14px;}
}
@media(max-width:380px){
  .container{padding-left:12px;padding-right:12px;}
  .nav-in{padding-left:14px;padding-right:14px;gap:10px;}
  .ub{padding:7px 12px;font-size:11.5px;}
}

/* 3. 表格在窄畫面橫向滑動（不必逐頁包 .table-wrap） ---------------- */
/* 桌機維持原狀；手機讓未包裝的 <table> 自動成為可橫滑區塊 */
@media(max-width:760px){
  .section table,
  main article table,
  main .container > table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-collapse:collapse;
  }

  .section table thead,
  .section table tbody,
  main article table thead,
  main article table tbody{
    display:table;
    width:100%;
    table-layout:auto;
  }

  /* 表格周圍多一點空間，視覺上看得出來可橫滑 */
  .section table,
  main article table{
    margin-left:-2px;
    margin-right:-2px;
    padding-bottom:2px;
  }
}

/* 4. Hero / Btn-row 排列統一，避免按鈕擠壓 ------------------------- */
.hero-actions,
.btn-row,
.brand-hero-copy .hero-actions,
.brand-hero .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:24px;
}

.hero-actions .btn,
.btn-row .btn{
  flex:0 1 auto;
  min-width:0;
}

@media(max-width:560px){
  .hero-actions,
  .btn-row{gap:10px;}
  .hero-actions .btn,
  .btn-row .btn{
    width:100%;
    justify-content:center;
  }
}

/* 5. 共用 utility class（不強迫使用，但有就生效） ------------------ */
.is-stack{display:flex;flex-direction:column;gap:12px;}
.is-stretch{align-items:stretch;}
.is-fill{height:100%;}
.is-bottom{margin-top:auto;}

/* 6. 列印基本守則：工具頁可列印清單時不要把整個深色 hero 印出來 ----- */
@media print{
  .site-nav,
  nav.site-nav,
  .ub,
  #lf,
  .nav-cta,
  .home-hero,
  .page-hero,
  .brand-hero,
  .hd-redesign-hero,
  .rvd-hero{
    background:#fff!important;
    color:#000!important;
    box-shadow:none!important;
  }

  body{
    background:#fff!important;
  }
}


/* v32 Hero —

/* v32 Hero: 文字選取色 */
::selection { background: rgba(214,163,84,.42); color: #2B1A16; }
::-moz-selection { background: rgba(214,163,84,.42); color: #2B1A16; }

/* Repaired shared helper controls - 20260526 */
.hd-wave8-read-mark,
button.hd-wave8-read-mark {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 8px 0 18px;
  padding: 8px 14px;
  border: 1px solid rgba(139, 94, 52, 0.28);
  border-radius: 999px;
  background: #fff7ea;
  color: #8b3d20;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(58, 40, 24, 0.06);
}

.hd-wave8-read-mark:hover,
button.hd-wave8-read-mark:hover {
  border-color: rgba(214, 163, 84, 0.75);
  background: #fffaf2;
}

.hd-wave8-read-mark.is-read,
button.hd-wave8-read-mark.is-read {
  border-color: #d6a354;
  background: #d6a354;
  color: #1a1a1a;
}

.hd-wave8-read-section.is-read {
  position: relative;
}

.hd-wave8-read-section.is-read::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -10px;
  width: 4px;
  border-radius: 999px;
  background: #d6a354;
}

.hd-wave8-chip,
button.hd-wave8-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(139, 94, 52, 0.28);
  border-radius: 999px;
  background: #ffffff;
  color: #3a2418;
  padding: 8px 13px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(58, 40, 24, 0.06);
}

.hd-wave8-chip:hover,
button.hd-wave8-chip:hover {
  border-color: rgba(214, 163, 84, 0.75);
  background: #fffaf2;
}

.hd-wave8-chip.is-active,
button.hd-wave8-chip.is-active {
  border-color: #d6a354;
  background: #d6a354;
  color: #1a1a1a;
}

.hd-wave8-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.hd-wave8-progress {
  width: 100%;
  height: 10px;
  margin: 10px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #f2e4cf;
}

.hd-wave8-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d6a354, #8b5e34);
  transition: width 0.2s ease;
}

.hd-wave8-status {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #5f5148;
  line-height: 1.7;
}

.hd-wave8-assist {
  margin: 24px 0 32px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(214, 163, 84, 0.36);
  border-radius: 24px;
  background: linear-gradient(135deg, #fffaf2 0%, #ffffff 72%);
  box-shadow: 0 18px 50px rgba(58, 40, 24, 0.08);
  color: #2b160d;
}

.hd-wave8-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(214, 163, 84, 0.35);
  border-radius: 999px;
  background: #fff7ea;
  color: #8b3d20;
  font-size: 0.9rem;
  font-weight: 800;
}

.hd-wave8-assist h3 {
  margin: 0 0 10px;
  color: #1f120b;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.35;
}

.hd-wave8-assist p {
  margin: 0 0 14px;
  color: #5f5148;
  line-height: 1.8;
}

.hd-wave8-risk-advice {
  margin: 22px 0 0;
  padding: 20px 22px;
  border: 1px solid rgba(214, 163, 84, 0.34);
  border-radius: 22px;
  background: linear-gradient(135deg, #fffaf2, #ffffff);
  box-shadow: 0 14px 40px rgba(58, 40, 24, 0.07);
  color: #3a2418;
}

.hd-wave8-risk-advice b {
  display: block;
  margin-bottom: 10px;
  color: #1f120b;
  font-size: 1.1rem;
}

.hd-wave8-risk-advice ul {
  margin: 0;
  padding-left: 1.25rem;
}

.hd-wave8-risk-advice li {
  margin: 7px 0;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .hd-wave8-assist,
  .hd-wave8-risk-advice {
    border-radius: 18px;
    padding: 18px;
  }

  .hd-wave8-chip,
  button.hd-wave8-chip,
  .hd-wave8-read-mark,
  button.hd-wave8-read-mark {
    font-size: 0.9rem;
  }
}


/* Phase 7C-6 Global: elder-friendly mobile wide table scroll - 20260530
   Purpose: make wide data tables naturally scrollable on mobile.
   Audience: older landowners; avoid sticky columns, snap, smooth auto-scroll, or hidden actions.
   Scope: table wrappers only. No color/layout/tool-logic changes. */
@media(max-width:760px){
  :where(.table-wrap,.rpg-table-wrap,.hd-table-wrap,.data-table-wrap,.table-scroll,.ct-table-wrap,.zoning-table-wrap){
    width:100%;
    max-width:100%;
    overflow-x:auto!important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:auto;
  }

  :where(.table-wrap,.rpg-table-wrap,.hd-table-wrap,.data-table-wrap,.table-scroll,.ct-table-wrap,.zoning-table-wrap) > table{
    min-width:760px;
    width:max-content;
    max-width:none;
    table-layout:auto;
  }

  :where(.table-wrap,.rpg-table-wrap,.hd-table-wrap,.data-table-wrap,.table-scroll,.ct-table-wrap,.zoning-table-wrap) th{
    white-space:nowrap;
  }

  :where(.table-wrap,.rpg-table-wrap,.hd-table-wrap,.data-table-wrap,.table-scroll,.ct-table-wrap,.zoning-table-wrap) a,
  :where(.table-wrap,.rpg-table-wrap,.hd-table-wrap,.data-table-wrap,.table-scroll,.ct-table-wrap,.zoning-table-wrap) button,
  :where(.table-wrap,.rpg-table-wrap,.hd-table-wrap,.data-table-wrap,.table-scroll,.ct-table-wrap,.zoning-table-wrap) .rpg-table-actions,
  :where(.table-wrap,.rpg-table-wrap,.hd-table-wrap,.data-table-wrap,.table-scroll,.ct-table-wrap,.zoning-table-wrap) .actions{
    white-space:nowrap;
    flex:0 0 auto;
  }
}

/* Phase 7C-7: mobile article visual overflow guard - 20260530
   Purpose: keep infographic images inside article/card width on mobile.
   Scope: article visual images only. Does not affect logo, favicon, OG image, or tool logic. */
.hd-article-visual,
.article-visual,
.infographic-visual,
figure.hd-article-visual {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.hd-article-visual picture,
.article-visual picture,
.infographic-visual picture,
.hd-article-visual-img {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.hd-article-visual-img {
  height: auto;
  object-fit: contain;
}

@media(max-width:760px){
  .hd-article-visual,
  .article-visual,
  .infographic-visual,
  figure.hd-article-visual {
    margin-left: 0;
    margin-right: 0;
  }

  .hd-article-visual-img {
    width: 100%;
    max-width: 100%;
  }
}

/* Phase 7D-2b: robust mobile nav open state - 20260530 */
@media (max-width: 860px) {
  .nav-links.open,
  .nav-links.is-open,
  body.hd-menu-open .nav-links.open,
  body.hd-menu-open .nav-links.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 120 !important;
  }

  .site-nav,
  nav {
    z-index: 110 !important;
  }
}

/* Phase 7D-6: global typography baseline - 20260530 */
:root {
  --hd-font-sans: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hd-text-size: 16px;
  --hd-text-line: 1.75;
  --hd-small-size: 14px;
  --hd-mobile-text-size: 16px;
  --hd-mobile-small-size: 15px;
}

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

body {
  font-family: var(--hd-font-sans);
  font-size: var(--hd-text-size);
  line-height: var(--hd-text-line);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

p,
li,
dd,
td,
th,
label,
summary {
  line-height: 1.75;
}

small,
.muted,
.hint,
.note,
.helper,
.caption,
.fine-print {
  line-height: 1.65;
}

.btn,
button,
input,
select,
textarea {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  body {
    font-size: var(--hd-mobile-text-size);
    line-height: 1.78;
  }

  p,
  li,
  dd,
  td,
  th,
  label,
  summary {
    line-height: 1.78;
  }

  small,
  .muted,
  .hint,
  .note,
  .helper,
  .caption,
  .fine-print {
    font-size: var(--hd-mobile-small-size);
    line-height: 1.7;
  }

  .btn,
  button,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}
/* Global accessibility skip link - 20260603 */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 9999;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 999px;
  background: #211815;
  color: #F7EFE3;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(33, 24, 21, .24);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}