@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   layout.css — 版面骨架

   負責：重設、版心、Section 外框、頁首、頁尾。
   不負責任何單一 Section 的內容樣式。
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--c-white);
  color:var(--c-ink);
  font-family:var(--f-tc);
  font-size:var(--fs-body);
  line-height:var(--lh-base);
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

/* 固定底部 CTA 的讓位空間
   ─────────────────────────────────────────────────────────
   不放在 body，因為 Hero 要求滿版 100vh，
   body 若有 72px 底部留白，整頁就會多出 72px 的捲動空間，
   使用者會看到「還有東西」的假象。

   浮動按鈕是固定浮層，只會蓋住「頁面最下面」的內容，
   所以把讓位空間放在頁尾就好。
   中間的 Section 被短暫蓋住不影響閱讀，捲動就會過去。 */
body:has(.floating-cta) .site-footer{
  padding-bottom:calc(var(--s-5) + var(--floating-h));
}

img,video,svg,picture{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4,p,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:2px solid var(--c-navy); outline-offset:3px; border-radius:4px }

/* ── 版心 ── */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── Section 外框 ──
   每個 Section 都套 .section，上下留白統一由這裡控制。
   Section 之間互不影響，可自由排序與增刪。 */
.section{
  position:relative;
  padding-block:var(--section-y);
}
.section--flush{ padding-block:0 }
.section--pink { background:var(--c-pink)   }
.section--blue { background:var(--c-blue)   }
.section--gray { background:var(--c-gray-1) }

/* ── 頁首 ── */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  height:var(--header-h);
  display:flex; align-items:center;
  background:var(--c-white);
  border-bottom:1px solid var(--c-line);
}
.site-header__in{
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
}
.site-header__logo img{ height:28px; width:auto }

.site-nav{ display:flex; gap:var(--s-3) }
.site-nav a{
  font-size:var(--fs-note);
  padding-block:var(--s-1);
  transition:color var(--t-hover) var(--ease);
}
.site-nav a:hover{ color:var(--c-navy) }

.nav-toggle{ display:none; width:44px; height:44px; place-items:center; border-radius:var(--r-btn) }
.nav-toggle:hover{ background:var(--c-gray-1) }
.nav-toggle i{ display:block; width:22px; height:12px; position:relative }
.nav-toggle i::before,.nav-toggle i::after{
  content:""; position:absolute; left:0; width:100%; height:2px; background:currentColor;
}
.nav-toggle i::before{ top:0 }
.nav-toggle i::after { bottom:0 }

/* ── 頁尾 ── */
.site-footer{
  border-top:1px solid var(--c-line);
  padding-block:var(--s-5);
}
.site-footer__in{
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
}
.site-footer__text{ font-size:var(--fs-note); color:var(--c-gray-2) }
.site-footer__links,
.site-footer__social{ display:flex; flex-wrap:wrap; gap:var(--s-3) }
.site-footer__links a,
.site-footer__social a{
  font-size:var(--fs-note); color:var(--c-gray-2);
  transition:color var(--t-hover) var(--ease);
}
.site-footer__links a:hover,
.site-footer__social a:hover{ color:var(--c-navy) }
.site-footer__copy{ margin-top:var(--s-4); font-size:var(--fs-note); color:var(--c-gray-2) }

/* ── 手機 ── */
@media (max-width:768px){
  .site-nav{
    position:absolute; top:var(--header-h); left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--c-white);
    border-bottom:1px solid var(--c-line);
    padding:var(--s-2) var(--gutter);
    display:none;
  }
  .site-nav.is-open{ display:flex }
  .site-nav a{ padding-block:var(--s-2); border-bottom:1px solid var(--c-line) }
  .nav-toggle{ display:grid }
}