.site-main .container{max-width:80%;margin:0 auto;padding:0 40px}
.site-main .detail-hero{padding: 30px 0 20px; background: linear-gradient(135deg, #ffffff 0%, #e6fff7 100%); border-bottom: 1px solid rgba(8,127,114, 0.04);}
.site-main .detail-hero .breadcrumb{font-size: 0.85rem; color: #94b8ac; margin-bottom: 10px;}
.site-main .detail-hero .breadcrumb a{color: #087f72; text-decoration: none;}
.site-main .detail-hero .breadcrumb a:hover{text-decoration: underline;}
.site-main .detail-hero .breadcrumb .text-separator{margin: 0 8px; color: #d1e6e0;}
.site-main .detail-hero h1{font-size: 2.2rem; font-weight: 800; color: #0a402a; line-height: 1.2; margin-bottom: 8px;}
.site-main .detail-hero .article-meta{display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: #5aa081;}
.site-main .detail-hero .article-meta .tag{display: inline-block; font-size: 0.7rem; font-weight: 600; color: #087f72; background: rgba(8,127,114, 0.06); padding: 2px 12px; border-radius: 30px;}
.site-main .detail-hero .article-meta .meta-separator{color: #d1e6e0;}
.site-main .detail-content{padding: 40px 0 60px; background: #f7fffd;}
.site-main .detail-content .article-body{width: 100%; min-width: 0; background: #ffffff; border-radius: 20px; padding: 40px 48px; border: 1px solid rgba(8,127,114, 0.04); box-shadow: 0 2px 12px rgba(0,0,0, 0.02);}
.site-main .article-body > figure{margin: 0 0 24px; width: 100%; height: 260px; border-radius: 12px; overflow: hidden; background: #e6fff7;}
.site-main .article-body > figure img{display: block; width: 100%; height: 100%; object-fit: cover;}
.site-main .article-body h2{font-size: 1.6rem; font-weight: 700; color: #0a402a; margin: 28px 0 12px; padding-bottom: 10px; border-bottom: 2px solid rgba(8,127,114,0.04); scroll-margin-top: 110px;}
.site-main .article-body h2:first-of-type{margin-top: 0;}
.site-main .article-body h3{font-size: 1.2rem; font-weight: 700; color: #0a402a; margin: 20px 0 10px;}
.site-main .article-body p,.site-main .article-body li{font-size: 1rem; color: #2f7859; line-height: 1.9;}
.site-main .article-body p{margin-bottom: 16px;}
.site-main .article-body strong{color: #0a402a;}
.site-main .article-body a{color: #087f72; text-decoration: none; font-weight: 500;}
.site-main .article-body a:hover{text-decoration: underline;}
.site-main .article-body a:focus-visible{outline: 2px solid #087f72; outline-offset: 3px;}
.site-main .article-body ul{padding-left: 24px; margin: 12px 0 18px;}
.site-main .article-body li{margin-bottom: 6px;}
.site-main .article-body ol{background: #f7fffd; border-radius: 12px; padding: 20px 24px 20px 48px; margin: 14px 0 20px; border: 1px solid rgba(8,127,114,0.04);}
.site-main .article-body ol li{padding: 8px 0 8px 6px; font-size: 0.95rem; line-height: 1.8;}
.site-main .article-body ol li::marker{color: #087f72; font-weight: 700;}
.site-main .article-body blockquote,.site-main .article-body aside{padding: 18px 24px; border-radius: 8px; margin: 18px 0; font-size: 0.95rem; color: #2f7859; line-height: 1.8;}
.site-main .article-body blockquote{background: #f0fff9; border-left: 4px solid #087f72;}
.site-main .article-body blockquote > strong{color: #087f72;}
.site-main .article-body aside{background: #fee7ea; border-left: 4px solid #f50b4e;}
.site-main .article-body aside > strong{color: #d90656;}
.site-main .related-articles{margin-top: 32px; padding: 28px 32px; width: 100%; background: #ffffff; border: 1px solid rgba(8,127,114,0.04); border-radius: 20px;}
.site-main .related-articles header{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;}
.site-main .related-articles h2{margin: 0; font-size: 1.3rem; color: #0a402a;}
.site-main .related-articles a{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #087f72; text-decoration: none;}
.site-main .related-articles a:hover{text-decoration: underline;}
.site-main .related-articles a:focus-visible{outline: 2px solid #087f72; outline-offset: 3px;}
.site-main .related-articles p{margin: 0; color: #5aa081; line-height: 1.8;}
@media (max-width: 768px){.site-main .related-articles{margin-top: 20px; padding: 20px 18px; border-radius: 16px;}}
.site-main .detail-cta{padding: 40px 0 60px; background: #ffffff; border-top: 1px solid rgba(8,127,114, 0.04); text-align: center;}
.site-main .detail-cta h2{font-size: 1.6rem; font-weight: 700; color: #0a402a; margin-bottom: 6px;}
.site-main .detail-cta p{color: #2f7859; font-size: 1rem; margin-bottom: 18px;}
.site-main .detail-cta .cta-buttons{display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;}
@media (max-width: 1024px){.site-main .detail-hero h1{font-size: 1.8rem;}
.site-main .detail-content .article-body{padding: 30px 28px;}}
@media (max-width: 768px){.site-main .container{max-width: 100%; padding: 0 20px;}
.site-main .detail-hero{padding: 20px 0 16px;}
.site-main .detail-hero h1{font-size: 1.5rem;}
.site-main .detail-content{padding: 20px 0 40px;}
.site-main .detail-content .article-body{padding: 20px 18px; border-radius: 16px;}
.site-main .detail-content .article-body > figure{height: 160px;}
.site-main .detail-content .article-body h2{font-size: 1.2rem;}
.site-main .detail-content .article-body h3{font-size: 1.05rem;}
.site-main .detail-cta h2{font-size: 1.3rem;}
.site-main .detail-cta .cta-buttons{flex-direction: column; align-items: center;}
.site-main .detail-cta .cta-buttons .btn-primary,.site-main .detail-cta .cta-buttons .btn-outline{width: 100%; justify-content: center;}}
@media (max-width: 480px){.site-main .container{max-width: 100%; padding: 0 14px;}
.site-main .detail-hero h1{font-size: 1.3rem;}
.site-main .detail-hero .article-meta{font-size: 0.75rem; gap: 10px;}
.site-main .detail-content .article-body{padding: 16px 14px;}
.site-main .detail-content .article-body > figure{height: 120px;}
.site-main .detail-content .article-body p{font-size: 0.92rem;}
.site-main .detail-content .article-body ul li{font-size: 0.92rem;}
.site-main .detail-content .article-body blockquote{padding: 12px 16px; font-size: 0.9rem;}
.site-main .detail-content .article-body ol{padding: 14px 16px 14px 36px;}
.site-main .detail-content .article-body ol li{font-size: 0.9rem;}}
.site-main .article-body img{max-width:100%;height:auto}

