/* Topic pages only; retain the site's type, colors and article-card treatment. */
.topic-page { overflow-wrap: anywhere; }
.topic-page .topic-hero { padding: 36px 0 32px; background: #f5f7f9; border-bottom: 1px solid #e9eef3; }
.topic-page .topic-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 18px; padding: 0; list-style: none; color: #626b78; font-size: 14px; }
.topic-page .topic-breadcrumb li + li::before { content: "/"; padding-right: 12px; color: #89919b; }
.topic-page .topic-breadcrumb a { color: #525e70; }
.topic-page .topic-hero h1 { margin: 0 0 16px; max-width: 1050px; font-size: clamp(26px, 3.2vw, 40px); font-weight: 400; line-height: 1.35; color: #222; }
.topic-page .topic-intro { max-width: 1000px; margin: 0; color: #525e70; font-size: 16px; line-height: 1.8; }
.topic-page .topic-intro a, .topic-page .topic-read-more { color: #dc5b25; text-decoration: underline; text-underline-offset: 3px; }
.topic-page .topic-list { padding-top: 36px; padding-bottom: 48px; }
.topic-page .topic-card { margin-bottom: 28px; }
.topic-page .topic-card .inner-box .lower-content h2 { position: relative; margin: 0 0 12px; color: #222; font-size: 30px; font-weight: 700; line-height: 1.5; }
.topic-page .topic-card .inner-box .lower-content h2 a { color: inherit; transition: color 300ms ease; }
.topic-page .topic-card .inner-box .lower-content h2 a:hover, .topic-page .topic-card .inner-box .lower-content h2 a:focus { color: #f97534; }
.topic-page .topic-card .post-date { color: #626b78; font-size: 14px; }
.topic-page .topic-card .text { color: #626b78; }
.topic-page .topic-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.topic-page .topic-pagination a { color: #b3481c; text-decoration: underline; }
@media (max-width: 767px) {
  .topic-page .topic-hero { padding: 24px 0; }
  .topic-page .topic-breadcrumb { font-size: 13px; }
  .topic-page .topic-intro { font-size: 15px; }
  .topic-page .topic-card .inner-box .lower-content { padding: 20px; }
  .topic-page .topic-card .inner-box .lower-content h2 { font-size: 22px; }
  .topic-page .topic-list { padding-top: 24px; }
}