/* 技術文章與數位發現共用閱讀規範。
   個別文章仍可保留特色區塊，但字級、留白、圖片與連結行為由此統一。 */
.article,
.promo-hero,
main#top > .section {
  width: min(100%, 860px);
  margin-inline: auto;
}

.article h1,
.promo-hero h1 {
  text-wrap: balance;
}

.article-body,
main#top > .section {
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
  line-height: 1.9;
}

.article-body h2,
main#top > .section h2 {
  line-height: 1.4;
  text-wrap: balance;
}

.article-body p,
main#top > .section p {
  overflow-wrap: anywhere;
}

.article-body a,
main#top > .section a,
.post-text a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-body a:hover,
.article-body a:focus-visible,
main#top > .section a:hover,
main#top > .section a:focus-visible,
.post-text a:hover,
.post-text a:focus-visible {
  text-decoration-thickness: 2px;
}

.article-body img,
.article-body video,
.hero-cover img,
.hero-visual img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.article-body figure,
.hero-visual {
  margin: 28px 0;
}

.article-body figcaption,
.hero-visual figcaption {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.65;
  text-align: center;
}

.article-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.article-body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .promo-hero,
  main#top > .section {
    padding-inline: 18px;
  }

  .article-body table {
    font-size: 0.88rem;
  }
}