/* detail.css */
.article-container { padding: 6vw 4% 4vw; background-color: #fff; }
@media (min-width: 645px) { .article-container { padding: 40px 25px 25px; } }
.article-title { font-size: 5.5vw; /* 36/645 */ font-weight: 600; color: #333; line-height: 1.4; margin-bottom: 4vw; }
@media (min-width: 645px) { .article-title { font-size: 36px; margin-bottom: 25px; } }
.article-meta { background-color: #F5F5F7; border-radius: 2vw; padding: 3vw 4vw; font-size: 3vw; /* 20/645 */ color: #999; margin-bottom: 6vw; display: flex; flex-direction: column; gap: 2vw; }
.article-meta .meta-row { display: flex; gap: 4vw; }
@media (min-width: 645px) { .article-meta { padding: 20px 25px; border-radius: 12px; font-size: 20px; margin-bottom: 40px; gap: 12px; } .article-meta .meta-row { gap: 25px; } }
.article-content { font-size: 4vw; /* 26/645 */ color: #333; line-height: 1.8; }
@media (min-width: 645px) { .article-content { font-size: 26px; } }
.article-content p { margin-bottom: 4vw; text-align: justify; }
.article-content p img {
    width: 100%;
}
@media (min-width: 645px) { .article-content p { margin-bottom: 25px; } }
.article-img { width: 100%; margin-bottom: 4vw; }
@media (min-width: 645px) { .article-img { margin-bottom: 25px; } }
.article-img img { width: 100%; display: block; border-radius: 2vw; }
@media (min-width: 645px) { .article-img img { border-radius: 12px; } }
.article-image-grid { display: flex; justify-content: space-between; margin-bottom: 4vw; }
.article-image-grid img { width: 32.5%; border-radius: 2vw; display: block; }
@media (min-width: 645px) { .article-image-grid { margin-bottom: 25px; } .article-image-grid img { border-radius: 12px; } }
/* Related Section */
.related-section { padding: 0 4% 6vw; }
@media (min-width: 645px) { .related-section { padding: 0 25px 40px; } }
.related-container { background-color: #F5F5F7; border-radius: 4vw; /* 25px */ padding: 4vw; }
@media (min-width: 645px) { .related-container { border-radius: 25px; padding: 25px; } }
.related-header { display: flex; align-items: center; margin-bottom: 4vw; }
.related-title { font-size: 4.5vw; /* 28px */ font-weight: 600; color: #E60012; position: relative; padding-left: 0; z-index: 2; display: inline-block; }
.related-title::before { content: ''; position: absolute; left: -1vw; top: 50%; transform: translateY(-50%); width: 3.5vw; height: 3.5vw; background-color: #f9dbd9; border-radius: 50%; z-index: -1; }
@media (min-width: 645px) { .related-header { margin-bottom: 25px; } .related-title { font-size: 28px; } .related-title::before { left: -6px; width: 22px; height: 22px; } }
.related-grid { display: flex; justify-content: space-between; gap: 2vw; }
.related-card { width: 32%; display: flex; flex-direction: column; }
.related-img { width: 100%; margin-bottom: 2vw; }
.related-img img { width: 100%; border-radius: 2vw; display: block; aspect-ratio: 16 / 9; }
.related-card p { font-size: 2.8vw; /* 18px */ color: #333; line-height: 1.4; text-align: left; }
@media (min-width: 645px) { .related-grid { gap: 12px; } .related-img { margin-bottom: 12px; } .related-img img { border-radius: 12px; } .related-card p { font-size: 18px; } }
/* Footer overrides */
.detail-footer p { color: #b3b3b3; /* text-align: center; */ font-size: 2vw; /* 12/645 */ margin-bottom: 2vw; }
/* .detail-footer .footer-logo { text-align: center; margin-bottom: 4vw; }  .detail-footer .footer-logo img { width: 25vw; max-width: 150px; height: auto; } */
.detail-footer .footer-link-red { color: #E33314; }
@media (min-width: 645px) { .detail-footer p { font-size: 12px; margin-bottom: 12px; } .detail-footer .footer-logo { margin-bottom: 25px; } }