/* Base — reset, typography defaults, focus ring, .visually-hidden.
   Loads after tokens.css. Mobile-first; see responsive.css for breakpoint overrides. */

/* Self-hosted 思源黑體 (Noto Sans TC), replacing the Google Fonts CDN link.
   assets/fonts/noto-sans-tc/noto-sans-tc-subset.woff2 is a single variable-font
   resource covering only the Unicode codepoints actually used in index.html,
   privacy.html and terms.html (Google's css2 "text=" subsetting API — see
   demo/README.md-style decision log in README.md for how it was generated).
   Google's own CDN response for this family serves this exact same file for
   the 400/500/700 @font-face blocks below (verified: identical bytes) — the
   file is a variable font and the browser interpolates the requested
   font-weight from it, so reusing one file across all three weights here is
   not a mistake, it mirrors Google's own delivery. If page copy changes to
   include a Traditional Chinese character NOT in this subset, that character
   silently falls back to the next font in --font-sans (system-ui / Microsoft
   JhengHei) rather than failing — regenerate the subset (see README.md) to
   bring it back onto Noto Sans TC. */
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-tc/noto-sans-tc-subset.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto-sans-tc/noto-sans-tc-subset.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-tc/noto-sans-tc-subset.woff2") format("woff2");
}

*, *::before, *::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  text-wrap: pretty;
}

p, figure {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--color-action-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-action-primary-hover);
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
}

/* ---------- Focus ---------- */
/* Never remove focus-visible; visible on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: var(--z-modal);
  padding: 12px 20px;
  background: var(--color-action-primary);
  color: var(--color-action-primary-fg);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-control);
  transition: top var(--duration-fast) var(--easing-standard);
}

.skip-link:focus {
  top: var(--space-4);
}

/* The skip-link's target: focus should move here (for AT), but this is not an
   interactive control, so it shouldn't draw the same ring as a real control. */
#main:focus-visible {
  outline: none;
}

/* ---------- No-JS fallback ---------- */
/* Removed by an inline head script as soon as JS runs; every .no-js rule
   below must keep content and the primary CTA fully usable without JS. */
.no-js [data-js-only] {
  display: none !important;
}

.no-js [data-nav-sheet] {
  position: static !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
}

.no-js [data-nav-backdrop] {
  display: none !important;
}

.no-js [data-accordion-panel] {
  display: block !important;
}

.no-js [data-form-status] {
  display: none !important;
}

/* The submit button ships `disabled` by default (safe if JS never runs —
   see main.js initForm(), which is the only thing that re-enables it) so a
   no-JS visitor can never trigger a native form submission that would put
   personal data in the URL query string. This note is the only thing shown
   in its place; it must never be paired with an invented email/phone/LINE
   contact — see README.md Production Blockers. */
[data-js-required-note] {
  display: none;
}
.no-js [data-js-required-note] {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}