/* Global warm institution design system */
:root {
  color-scheme: light;
  --color-primary: #5f7f62;
  --color-primary-variant1: #4a6a4e;
  --color-primary-variant2: #7a9873;
  --color-primary-variant3: #3e5a48;
  --color-primary-dark: #2f4f3a;
  --color-primary-darkblue: #2f4b4f;
  --color-primary-light: #eaf1e7;
  --color-primary-light2: #dcebd3;
  --color-primary-accent: #a3b897;
  --color-orange-light: #fff7d7;
  --color-bg: #f7f2e8;
  --color-bg-soft: #fbf7ef;
  --color-bg-softd: linear-gradient(135deg, rgba(247, 242, 232, 0.4) 0%, rgba(236, 226, 209, 0.35) 100%);
  --color-card: #fffdf8;
  --color-brown: #7a5a3a;
  --color-text: #333333;
  --color-text-soft: #666666;
  --color-muted: #8a8a8a;
  --color-line: #e2d8c8;
  --color-danger: #b85c38;
  --color-white: #ffffff;
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-soft);
  --text-tertiary: var(--color-muted);
  --text-muted: var(--color-muted);
  --bg-base: var(--color-bg-soft);
  --bg-surface: var(--color-card);
  --bg-elevated: var(--color-white);
  --bg-highlight: var(--color-primary-light);
  --bg-inset: var(--color-bg);
  --border: var(--color-line);
  --font-body: "Noto Sans TC", "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "Microsoft JhengHei", system-ui, sans-serif;
  --font-display: "Noto Serif TC", "Source Han Serif TC", "Noto Sans TC", serif;
  --container-max: 1120px;
  --container-wide: 1280px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 14px 38px rgba(47, 79, 58, 0.08);
  --shadow-hover: 0 18px 44px rgba(47, 79, 58, 0.12);
  --focus-ring: 0 0 0 4px rgba(95, 127, 98, 0.2);
  --space-section: clamp(1rem, 8vw, 3rem);
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --motion-interaction: 1.5s;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg-soft); }
body { margin: 0; color: var(--color-text); background: var(--color-bg-soft); font-family: var(--font-body); font-size: 16px; line-height: 1.9; letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, .display-title, .section-title { color: var(--color-primary-dark); font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
h1, .display-title { font-size: clamp(34px, 5.4vw, 68px); line-height: 1.25; }
h2, .section-title { font-size: clamp(26px, 3vw, 42px); line-height: 1.42; }
h3 { color: var(--color-primary-dark); font-size: clamp(20px, 2vw, 28px); line-height: 1.45; font-weight: 700; }
p { color: var(--color-text-soft); }
input, select, textarea { width: 100%; border: 1px solid var(--color-line); border-radius: 14px; padding: 13px 15px; color: var(--color-text); background: var(--color-card); }
input:focus, select:focus, textarea:focus { border-color: var(--color-primary-variant2); box-shadow: var(--focus-ring); }
::placeholder { color: var(--color-muted); }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1000ms; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 800ms; } }