.date-display {
    margin-left: 16px; /* 날짜 표시를 오른쪽으로 16px 이동 */
}

nav ul li {
    margin-right: 16px; /* 각 메뉴 항목 사이의 간격 */
    font-weight: bold; /* 볼드체 */
}

nav ul li:last-child {
    margin-right: 0;
}

.article {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.article-image {
    flex: 0 0 auto; /* 이미지의 너비를 자동 조정 */
    max-width: 160px; /* 최대 너비 제한 */
    min-width: 100px; /* 최소 너비 설정 */
    width: 20vw; /* 뷰포트 너비의 20%로 설정 */
    margin-right: 20px;
}

.article-image img {
    width: 100%; /* 이미지의 너비를 부모 div에 맞춤 */
    height: auto; /* 이미지의 높이를 자동 조정 */
    border: 1px solid #ccc;
}

.article-content {
    flex: 1;
}

@media screen and (max-width: 600px) { /* 화면 크기가 600px 이하일 때 적용됩니다. */
    .container {
        padding: 10px; /* 컨테이너의 패딩 감소 */
    }

    header {
        flex-direction: column; /* 헤더 요소들을 세로로 쌓음 */
        align-items: center; /* 요소들을 중앙 정렬 */
    }

    .logo, nav {
        margin-bottom: 10px; /* 로고와 네비게이션 사이의 간격 추가 */
    }
}

.logo img {
    cursor: pointer; /* 마우스 오버 시 손가락 커서로 변경 */
}

#articleModal {
    /* 배경색을 더 어둡게 조정 */
    background-color: rgba(0, 0, 0, 0.75); /* 기존의 gray-600과 opacity 50%에서 변경 */
}

#modalImage {
    max-width: 60%; /* 큰화면에서는 모달의 60% 크기 */
    max-height: 75vh; /* 화면 높이의 75%로 제한 */
    display: block; /* 중앙 정렬을 위해 블록 요소로 설정 */
    margin: 0 auto; /* 상하 마진 0, 좌우 자동으로 중앙 정렬 */
    object-fit: contain; /* 비율 유지하면서 영역 내에 맞춤 */
}

@media screen and (max-width: 600px) { /* 화면 크기가 600px 이하일 때 적용됩니다. */
    #modalImage {
        max-width: 100%; /* 모달 너비에 맞춰 최대 가로 크기 설정 */
    }
}

#modalContent {
    /*max-height: 200px;
    overflow-y: auto; */
    margin-top: 20px; /* 상단 여백 유지 */
    white-space: pre-wrap;
}

/* 광고 */
/* 광고 배너 스타일링 */
.ad {
    background-color: lightgray; /* 예시 배경색 */
    width: 240px; /* 배너 너비 */
    height: 60px; /* 배너 높이 */
    margin: 20px 0; /* 배너 간 간격 */
}

/* 광고 배너 컨테이너 */
.ads-left, .ads-right {
    position: fixed; /* 고정 위치 */
    top: 50%; /* 수직 중앙 */
    transform: translateY(-50%); /* 정확한 중앙 정렬 */
}

.ads-left {
    left: 10px; /* 왼쪽 여백 */
}

.ads-right {
    right: 10px; /* 오른쪽 여백 */
}

@media screen and (max-width: 1024px) { /* 모바일 및 태블릿 화면 크기 */
    .ads-left, .ads-right {
        display: none; /* 모바일 및 태블릿 화면에서 광고 배너 숨김 */
    }
}

/* 메인메뉴 Hover */
nav ul li {
    position: relative; /* 언더바 위치를 조정하기 위해 필요 */
    cursor: pointer; /* 마우스 오버 시 커서 변경 */
}

nav ul li:hover {
    color: #007bff; /* 호버 시 글자 색상 변경 */
}

nav ul li::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s;
}

nav ul li:hover::after {
    width: 100%; /* 호버 시 언더바 너비 전체로 확장 */
}

.pagination-container {
    text-align: center; /* 중앙 정렬 */
    padding: 20px 0; /* 상하 패딩 */
}

.pagination-container a {
    margin: 0 10px; /* 좌우 마진 증가 */
    color: black; /* 글자 색상 */
    text-decoration: none; /* 밑줄 제거 */
    cursor: pointer; /* 커서 모양 변경 */
    background-color: transparent; /* 배경색 투명 */
    display: inline-block; /* 인라인 블록 요소 */
    width: 30px; /* 너비 */
    height: 30px; /* 높이 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

.pagination-container a:hover {
    background-color: black; /* 호버 시 배경색 */
    color: white; /* 호버 시 글자 색상 */
}

.current-page {
    border-bottom: 1px solid black; /* 현재 페이지 밑줄 */
    color: black; /* 현재 페이지 글자 색상 */
    background-color: transparent; /* 배경색 투명 */
}

.date-display {
    color: #757575; /* 회색 */
    font-size: 0.8rem; /* 폰트 크기를 작게 조정 */
}

.latest-article {
    display: flex; /* Flex 컨테이너 설정 */
    align-items: flex-start; /* 아이템들을 상단에 정렬 */
}

.latest-article-image, .latest-article-content {
    flex: 1; /* 두 컨텐츠 영역이 동일한 비율로 공간을 차지하도록 설정 */
}

.latest-article-image {
    max-width: 50%; /* 이미지 영역 최대 너비 설정 */
}

.latest-article-image img {
    width: 100%; /* 이미지가 부모 컨테이너 너비에 맞게 조절되도록 설정 */
    height: auto; /* 이미지 비율 유지 */
    border: 1px solid #ccc;
}

.latest-article-content {
    padding-left: 20px; /* 내용과 이미지 사이의 간격 설정 */
    overflow: hidden; /* 내용이 컨테이너를 넘어갈 경우 숨김 처리 */
}

#login, .search-input {
    color: #757575; /* 회색 */
    font-size: 0.8rem; /* 폰트 크기 */
}

#login:hover {
    cursor: pointer;
}

.search-input {
    border-bottom: 1px solid #757575; /* 회색 언더라인 */
    margin-right: 10px; /* 검색 아이콘과의 간격 */
}

.search-input:focus {
    outline: none;
}

#search-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-right: 16px; /* 검색 아이콘과의 간격 */
}

#submenu li:hover {
    cursor: pointer;
}