.news-page { min-height: 100vh; background: linear-gradient(180deg, #fff 0%, #f7fbfa 100%); color: #2c3e50; }
.news-page *, .news-page *::before, .news-page *::after { box-sizing: border-box; }
.news-page .g_head { box-shadow: 0 1px 0 rgba(43, 66, 76, .06); }
.site-main { min-height: calc(100vh - 80px); padding: 132px 20px 62px; }
.site-main .container { width: 100%; max-width: 1200px; margin: 0 auto; }
.news-wrap { position: relative; overflow: hidden; border-radius: 24px; background: rgba(255, 255, 255, .93); box-shadow: 0 16px 44px rgba(36, 71, 69, .1); }
.news-wrap::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); content: ""; }
.features { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: 630px; }
.left { padding: 66px 35px; background: linear-gradient(180deg, #fff8f8 0%, #f6fffd 100%); border-right: 1px solid #edf1f0; }
.section-kicker,
.listing-heading p,
.detail-kicker { margin: 0 0 16px; color: #4ecdc4; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.left ul { margin: 0; padding: 0; list-style: none; }
.left li { margin: 0; }
.left a { position: relative; display: block; padding: 15px 18px; border-radius: 12px; color: #2c3e50; font-size: 18px; font-weight: 700; }
.left a.active { background: #ff6b6b; box-shadow: 0 8px 18px rgba(255, 107, 107, .2); color: #fff; }
.section-note { margin: 26px 0 0; color: #71808a; font-size: 14px; line-height: 1.75; }
.right { min-width: 0; padding: 58px 62px; }
.listing-heading { margin-bottom: 30px; }
.listing-heading h1,
.blog-detail .title { margin: 0; color: #2c3e50; font-size: 42px; line-height: 1.25; letter-spacing: -.03em; }
.newsc > ul { margin: 0; padding: 0; list-style: none; }
.newsc > ul > li { display: flex; gap: 24px; min-height: 154px; padding: 20px 0; border-bottom: 1px solid #eef2f1; }
.newsc > ul > li:first-child { padding-top: 0; }
.article-thumb { flex: 0 0 185px; height: 116px; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, #ff8e8e, #4ecdc4); }
.article-thumb a,
.article-thumb img { display: block; width: 100%; height: 100%; }
.article-thumb img { object-fit: cover; }
.article-copy { display: flex; flex: 1; flex-direction: column; justify-content: space-between; min-width: 0; }
.article-copy h2 { margin: 0 0 9px; font-size: 20px; line-height: 1.35; }
.article-copy h2 a { color: #2c3e50; }
.article-copy h2 a:hover,
.article-copy p a { color: #ff6b6b; }
.article-copy p { margin: 0; color: #71808a; font-size: 15px; line-height: 1.7; }
.article-copy p a { margin-left: 5px; font-weight: 700; }
.article-copy time { align-self: flex-end; color: #97a3ab; font-size: 13px; }
.blog-empty, .newsc > ul > li.blog-empty { display: block; min-height: 0; padding: 34px 24px; border: 1px solid #e6eeec; border-radius: 14px; background: #f7fbfa; color: #5a6c7d; font-size: 16px; line-height: 1.8; text-align: center; }
.pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 34px; }
.pages:empty { display: none; }
.pages ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pages li { display: block; margin: 0; padding: 0; }
.pages a,
.pages span { display: inline-grid; min-width: 38px; min-height: 38px; padding: 0 10px; place-items: center; border-radius: 10px; background: #f1f8f7; color: #48616a; font-size: 14px; }
.pages .active > a, .pages .active > span, .pages [aria-current="page"],
.pages a:hover { background: #ff6b6b; color: #fff; }
.pages .disabled > *, .pages [aria-disabled="true"] { color: #8a979a; background: #f4f6f6; cursor: default; }
.blog-detail .post-time { margin: 17px 0 34px; color: #94a0a7; font-size: 14px; }
.content { color: #43535b; font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.content pre { overflow-x: auto; padding: 16px; border-radius: 10px; background: #f3f7f6; }
.content table { display: block; max-width: 100%; overflow-x: auto; }
.content video, .content iframe { max-width: 100%; }
.content h2,
.content h3 { margin: 38px 0 14px; color: #2c3e50; }
.content p { margin: 0 0 18px; }
.content img { max-width: 100%; height: auto; border-radius: 14px; }
.article-nav { margin: 44px 0 25px; padding: 20px 24px; border-radius: 14px; background: #f7fbfa; }
.article-nav p { margin: 7px 0; }
.article-nav { overflow-wrap: anywhere; }
.article-nav a { color: #4d6970; }
.blog-detail-back { display: inline-flex; min-height: 42px; align-items: center; padding: 0 19px; border-radius: 21px; background: #ff6b6b; color: #fff; font-weight: 700; }
.blog-footer { padding: 30px 20px 38px; color: #879199; font-size: 14px; text-align: center; }
.blog-footer p { margin: 10px 0; }
.blog-footer a { margin: 0 10px; color: #586b72; }
.blog-footer a:hover { color: #ff6b6b; }

@media (max-width: 900px) {
  .site-main { padding: 105px 16px 42px; }
  .features { grid-template-columns: 1fr; }
  .left { padding: 30px 26px; border-right: 0; border-bottom: 1px solid #edf1f0; }
  .section-note { display: none; }
  .right { padding: 35px 25px; }
  .listing-heading h1,
  .blog-detail .title { font-size: 32px; }
  .newsc > ul > li { gap: 16px; }
  .article-thumb { flex-basis: 125px; height: 96px; }
}

@media (max-width: 560px) {
  .news-wrap { border-radius: 18px; }
  .right { padding: 30px 18px; }
  .newsc > ul > li { display: block; }
  .article-thumb { width: 100%; height: 150px; margin-bottom: 15px; }
  .article-copy time { margin-top: 13px; }
  .blog-footer a { margin: 0 6px; }
}