:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Noto Sans TC", sans-serif;
  --green: #143c2d;
  --green-soft: #235541;
  --orange: #da8134;
  --orange-dark: #a95720;
  --white: #ffffff;
  --paper: #f7f3e9;
  --paper-deep: #ece5d5;
  --gold-light: #fff5c9;
  --gold: #e4bd5d;
  --text: #284438;
  --muted: #53685e;
  --line: rgb(20 60 45 / 16%);
  --tap: 52px;
  background: var(--paper);
  color: var(--green);
  font-size: 18px;
}

.dynamicArticleCover {
  margin: 28px 0 0;
  overflow: hidden;
  border: 1px solid rgba(245, 220, 146, 0.56);
  border-radius: 18px;
  background: #143c2d;
  box-shadow: 0 16px 38px rgba(20, 60, 45, 0.18);
}

.dynamicArticleCover img {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
}

.articleBody blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 5px solid #da8134;
  border-radius: 0 12px 12px 0;
  background: #fbf4e4;
}

.articleBody blockquote p { margin: 0; }
.articleBody code { padding: 2px 6px; border-radius: 6px; background: #edf2ef; }
.articleBody hr { margin: 34px 0; border: 0; border-top: 1px solid rgba(20, 60, 45, 0.25); }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  background:
    radial-gradient(circle at 10% 2%, rgb(255 255 255 / 82%), transparent 26rem),
    linear-gradient(180deg, var(--paper), #f1ecdf);
  margin: 0;
  min-height: 100vh;
}

a {
  color: var(--orange-dark);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

a:focus-visible {
  border-radius: 8px;
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}

.articleShell {
  margin: 0 auto;
  max-width: 1080px;
  padding: 34px 22px 80px;
}

.breadcrumbs {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.96rem;
  gap: 8px;
  margin: 0 0 16px;
}

.breadcrumbs a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

.articleHero {
  background: linear-gradient(135deg, var(--green), var(--green-soft) 70%, var(--green));
  border: 1px solid rgb(228 189 93 / 58%);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgb(20 60 45 / 15%);
  color: var(--white);
  overflow: hidden;
  padding: clamp(32px, 5vw, 58px);
  position: relative;
}

.articleHero::after {
  background: radial-gradient(circle, rgb(255 240 174 / 44%), transparent 70%);
  content: "";
  height: 300px;
  pointer-events: none;
  position: absolute;
  right: -110px;
  top: -120px;
  width: 300px;
}

.articleEyebrow,
.sectionLabel {
  color: #f0d382;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  margin: 0 0 10px;
}

h1,
h2,
h3 {
  font-family: "Songti TC", "Noto Serif TC", serif;
}

h1 {
  font-size: clamp(2.35rem, 6vw, 4.15rem);
  line-height: 1.1;
  margin: 0;
  max-width: 900px;
  position: relative;
  z-index: 1;
}

.articleLead {
  color: #f8f5ec;
  font-size: clamp(1.08rem, 2.2vw, 1.3rem);
  line-height: 1.72;
  margin: 20px 0 0;
  max-width: 850px;
  position: relative;
  z-index: 1;
}

.articleMeta {
  align-items: center;
  color: #e2d8bf;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.98rem;
  gap: 8px 18px;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}

.articleMeta a {
  color: #ffe9a2;
}

.articleBody {
  margin: 34px auto 0;
  max-width: 820px;
}

.articleBody > section,
.aboutSection {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 14px 42px rgb(20 60 45 / 7%);
  margin-top: 18px;
  padding: clamp(22px, 4vw, 34px);
}

.articleBody h2 {
  color: var(--green);
  font-size: clamp(1.65rem, 4.5vw, 2.3rem);
  line-height: 1.22;
  margin: 0 0 14px;
}

.articleBody h3 {
  color: var(--green);
  font-size: 1.3rem;
  line-height: 1.35;
  margin: 26px 0 8px;
}

.articleBody p,
.articleBody li,
.aboutSection p,
.aboutSection li {
  color: var(--text);
  font-size: clamp(1.12rem, 2vw, 1.18rem);
  line-height: 1.86;
}

.articleBody p,
.aboutSection p {
  margin: 0;
}

.articleBody p + p,
.aboutSection p + p {
  margin-top: 15px;
}

.articleBody ul,
.articleBody ol,
.aboutSection ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 1.35rem;
}

.quickAnswer {
  background: linear-gradient(145deg, #fffdf6, var(--gold-light));
  border: 1px solid #d4ad50;
  border-left: 6px solid var(--orange);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgb(169 87 32 / 8%);
  margin-top: 20px;
  padding: 24px;
}

.quickAnswer strong {
  color: var(--green);
  display: block;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.35rem;
  margin-bottom: 7px;
}

.exampleGrid,
.aboutGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.exampleCard,
.aboutGrid article {
  background: #faf8f1;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}

.exampleCard span {
  color: var(--orange-dark);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.exampleCard strong,
.aboutGrid strong {
  color: var(--green);
  display: block;
  font-size: 1.12rem;
  margin: 8px 0 5px;
}

.serviceBridge {
  background: linear-gradient(135deg, var(--green), #1d513c);
  border: 1px solid rgb(228 189 93 / 70%);
  border-radius: 22px;
  box-shadow: 0 20px 54px rgb(20 60 45 / 16%);
  color: var(--white);
  margin: 28px 0;
  padding: clamp(24px, 4vw, 34px);
}

.serviceBridge .sectionLabel {
  color: #f0d382;
}

.serviceBridge h2,
.serviceBridge h3 {
  color: var(--white);
  margin-top: 0;
}

.serviceBridge p {
  color: #f5f1e8;
}

.serviceLinks {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.serviceLinks a,
.singleCta {
  align-items: center;
  background: linear-gradient(145deg, var(--gold-light), var(--gold) 70%, #fff9df);
  border: 1px solid #bf8d2e;
  border-radius: 13px;
  color: var(--green);
  display: inline-flex;
  justify-content: center;
  min-height: var(--tap);
  padding: 11px 13px;
  text-align: center;
  text-decoration: none;
}

.singleCta {
  margin-top: 18px;
}

.comparisonWrap {
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-top: 18px;
  overflow-x: auto;
}

.comparisonTable {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
}

.comparisonTable th,
.comparisonTable td {
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.62;
  padding: 15px;
  text-align: left;
  vertical-align: top;
}

.comparisonTable th {
  background: var(--green);
  color: var(--white);
}

.comparisonTable tr:last-child td {
  border-bottom: 0;
}

.sourceNotes {
  background: #f2eee3;
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-top: 24px;
  padding: 22px;
}

.sourceNotes h2 {
  font-size: 1.45rem;
}

.articleBoundary {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.75;
  margin-top: 32px;
  padding-top: 24px;
}

.articleFooter {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: space-between;
  margin-top: 46px;
  padding-top: 28px;
}

.articleFooter nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.articleFooter a {
  align-items: center;
  display: inline-flex;
  min-height: 48px;
}

@media (max-width: 720px) {
  .articleShell {
    padding: 24px 12px 64px;
  }

  .articleHero {
    border-radius: 18px;
    padding: 30px 22px;
  }

  h1 {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .articleBody > section,
  .aboutSection {
    border-radius: 16px;
    padding: 22px 18px;
  }

  .exampleGrid,
  .aboutGrid,
  .serviceLinks {
    grid-template-columns: 1fr;
  }

  .serviceBridge {
    border-radius: 17px;
    padding: 24px 18px;
  }

  .articleFooter {
    align-items: stretch;
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}