/* 1. 기본 설정 변경 */
:root { 
    --main-blue: #004a99; 
    --content-width: 1720px; 
}

* { box-sizing: border-box; } /* 패딩이 넓이를 침범하지 않게 설정 */

body { margin: 0; padding: 0; overflow-x: hidden; } /* 모바일 좌우 밀림 방지 */

/* 2. 컨테이너 수정: 고정폭 1720px -> 최대폭 1720px로 유연하게 */
.container { 
    width: 100%; 
    max-width: var(--content-width); 
    margin: 0 auto; 
    padding: 0 15%; /* 모바일에서 양옆 여백 5% 보장 */
}

/* 3. 미디어 쿼리 (화면 크기에 따른 변화) */
@media (max-width: 1200px) {
    .container { padding: 0 30px; }
    .news-grid { grid-template-columns: repeat(3, 1fr) !important; } /* 3열로 변경 */
}

@media (max-width: 768px) {
    header .header-inner { flex-direction: column; height: auto; padding: 20px 0; }
    nav { margin-top: 20px; gap: 20px; flex-wrap: wrap; justify-content: center; }
    .news-grid { grid-template-columns: repeat(2, 1fr) !important; } /* 2열로 변경 */
    .hero { grid-template-columns: 1fr !important; } /* 히어로 섹션 1열로 세로 정렬 */
    .article-title { font-size: 28px !important; } /* 제목 크기 축소 */
}

@media (max-width: 480px) {
    .news-grid { grid-template-columns: 1fr !important; } /* 모바일 1열 */
    .logo img { height: 35px; }
    .nav-link { font-size: 15px; }
}