:root {
  --sm-ink: #252942;
  --sm-muted: #505969;
  --sm-teal: #16655f;
  --sm-orange: #a54017;
  --sm-bg: #f3f1ea;
  --sm-line: #dce2dd;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 140px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sm-bg);
  color: var(--sm-ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img, video { max-width: 100%; }
.sm-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .6em 1em; background: #fff; color: var(--sm-teal); }
.sm-skip:focus { left: 1em; }

.sm-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--sm-line); box-shadow: 0 2px 12px #2529420d; }
.sm-bar { max-width: 1200px; margin: 0 auto; padding: .55em 16px; display: flex; align-items: center; justify-content: space-between; gap: .8em; flex-wrap: wrap; }
.sm-brand { display: flex; align-items: center; gap: .55em; color: var(--sm-ink); text-decoration: none; font-weight: 900; font-size: 1.15em; line-height: 1.15; }
.sm-brand small { display: block; font-weight: 500; font-size: .62em; letter-spacing: .08em; color: var(--sm-muted); }
.sm-logo { width: auto; height: 2.4em; flex: none; background: none; border-radius: 0; }
.sm-nav { display: flex; align-items: center; gap: .3em; flex-wrap: wrap; }
.sm-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75em; border-radius: 2em; color: var(--sm-ink); text-decoration: none; font-weight: 700; font-size: .95em; }
.sm-nav a:hover { background: #edf5f0; }
.sm-nav .sm-cta { background: var(--sm-orange); color: #fff; }
.sm-nav .sm-cta:hover { background: #85320f; }
.sm-notice { margin: 0; padding: .4em 16px; background: #fff6e6; color: #6b3a12; font-size: .88em; text-align: center; border-top: 1px solid #f1dfbf; }
.sm-crumbs { max-width: 1200px; margin: 1em auto 0; padding: 0 16px; display: flex; gap: .5em; flex-wrap: wrap; font-size: .9em; color: var(--sm-muted); }
.sm-crumbs a { color: var(--sm-teal); }

.sm-main { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.sm-course { background: #fff; border-radius: 1.2em; margin: 1em 0 2em; padding: 1em 0; overflow: hidden; }

.sm-footer { margin-top: 2em; padding: 2em 16px; background: #1f3b38; color: #e7f0ec; display: flex; justify-content: center; gap: 1em 3em; flex-wrap: wrap; font-size: .95em; }
.sm-footer p { margin: .3em 0 0; }
.sm-footer a { color: #fff; }
.sm-footer-links { display: flex; flex-direction: column; gap: .4em; }

@media (max-width: 640px) {
  html { scroll-padding-top: 170px; }
  .sm-bar { justify-content: center; }
  .sm-nav { justify-content: center; }
  .sm-nav a { padding: 0 .6em; font-size: .9em; }
  .sm-main { padding: 0 8px; }
}
@media print { .sm-header, .sm-footer { display: none; } }