/* ==========================================================================
   01. Base
   所有 EDM 共用的盒模型、字型、媒體與表單基礎。
   ========================================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 72px);
  font-size: 16px;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.container {
  width: min(var(--content-width, 1180px), calc(100% - 40px));
  margin-inline: auto;
}

/* ==========================================================================
   02. Layout utilities
   ========================================================================== */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.hidden { display: none; }

.gap-2 { gap: .5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }

/* ==========================================================================
   03. Typography utilities
   標題由語意元件設定；額外字級才使用此固定比例尺。
   ========================================================================== */

.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-md { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.25rem; }

.leading-tight { line-height: 1.2; }
.leading-snug { line-height: 1.4; }
.leading-normal { line-height: 1.6; }
.leading-relaxed { line-height: 1.8; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.text-left { text-align: left; }
.text-center { text-align: center; }

/* ==========================================================================
   04. Shared section structure
   ========================================================================== */

section.section-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 88px 0;
}

section.section-host.section-white { background: #fff; }
section.section-host.section-light { background: #f4f8fd; }
section.section-host.section-dark { background: #08111f; color: #fff; }

section.section-host .section-head { margin-bottom: 36px; }
section.section-host .section-kicker { margin: 0 0 8px; font-weight: 900; letter-spacing: .16em; }
section.section-host .section-title { margin: 0; font-size: clamp(1.875rem, 3vw, 3rem); line-height: 1.3; font-weight: 900; }
section.section-host .section-lead { margin: 12px 0 0; font-size: 1.25rem; line-height: 1.7; }
section.section-host .section-head--center { text-align: center; }
section.section-host .section-head--light .section-title { color: #fff; }

.load-error,
.noscript-message {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #c73246;
  border-radius: 10px;
  background: #fff3f5;
  color: #a7192d;
  font-weight: 700;
}

/* ==========================================================================
   05. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 700px) {
  .container { width: min(100% - 28px, var(--content-width, 1180px)); }
  section.section-host { padding: 64px 0; }
  section.section-host .section-head { margin-bottom: 28px; }
  section.section-host .section-title { font-size: 1.875rem; }
  section.section-host .section-lead { font-size: 1.125rem; }
}