.latest_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 리스트 전체를 가운데 정렬 */
}

.latest_item {
    width: 23%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc; /* 섹션 구분선 추가 */
    margin: 10px; /* 섹션 간격 추가 */
    border-radius: 10px; /* 섹션 모서리 둥글게 */
    background-color: #fff; /* 섹션 배경색 추가 */
    display: flex;
    flex-direction: row; /* 아이템 내부를 가로로 정렬 */
    align-items: flex-start; /* 아이템 내부를 위쪽 정렬 */
}

.latest_item a {
    display: flex;
    flex-direction: row; /* 이미지와 텍스트를 가로로 정렬 */
    align-items: flex-start; /* 위쪽 정렬 */
    text-decoration: none; /* 링크 밑줄 제거 */
    color: inherit; /* 링크 색상 상속 */
    width: 100%; /* 전체 너비 사용 */
}

.latest_item img {
    width: 150px; /* 이미지 크기 조정 */
    height: 100px; /* 이미지 크기 조정 */
    object-fit: cover;
    margin-right: 10px; /* 이미지와 텍스트 사이 간격 추가 */
    border-radius: 5px; /* 이미지 모서리 둥글게 */
}

.latest_text {
    display: flex;
    flex-direction: column; /* 텍스트를 세로로 정렬 */
    justify-content: flex-start; /* 텍스트 위쪽 정렬 */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    color: #333; /* 텍스트 색상 변경 */
    width: 100%;
}

/* 별점 스타일 추가 */
.star-rating {
    display: flex;
    margin-bottom: 5px;
    align-items: center;
}

.star {
    font-size: 16px;
    color: #ccc; /* 기본 별 색상 */
}

.star-filled {
    color: red; /* 채워진 별 색상 */
}

.latest_meta {
    display: flex;
    flex-wrap: wrap; /* 수정됨: 메타 정보를 줄바꿈하여 컨테이너 너비에 맞춤 */
    margin-bottom: 5px; /* 메타 정보와 본문 사이 간격 추가 */
    font-size: 12px;
    color: #999;
    white-space: nowrap; /* 텍스트가 한 줄에 표시되도록 설정 */
    overflow: hidden; /* 넘치는 텍스트를 숨김 */
    text-overflow: ellipsis; /* 넘치는 텍스트를 생략 표시 */
    width: 100%; /* 수정됨: 메타 정보가 컨테이너 너비에 맞춰지도록 설정 */
}

.latest_author, .latest_date, .latest_additional {
    margin-right: 5px; /* 메타 정보 간격 추가 */
}

.latest_content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* 최대 5줄 표시 */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word; /* 수정됨: 단어가 길 경우 줄바꿈 설정 */
    white-space: normal; /* 수정됨: 텍스트가 컨테이너를 넘어서지 않도록 설정 */
    width: 100%; /* 수정됨: 본문 내용이 컨테이너 너비에 맞춰지도록 설정 */
}

/* 페이지 컨트롤 스타일 추가 */
.pagination_controls {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 오른쪽 정렬 */
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #333; /* 배경색 변경 */
    border-radius: 5px;
    position: absolute; /* 위치를 절대값으로 설정 */
    right: 20px; /* 오른쪽 여백 */
    top: 20px; /* 상단 여백 */
    z-index: 10; /* z-index 추가 */
}

.pagination_controls a, .pagination_controls span {
    color: #fff; /* 글자 색상 흰색으로 */
    margin: 0 5px;
    text-decoration: none;
    font-size: 14px;
}

.pagination_controls a {
    padding: 5px 10px;
    border: 1px solid #fff; /* 테두리 흰색 */
    border-radius: 3px;
}

.pagination_controls a:hover {
    background-color: #555; /* 호버시 배경색 */
}

.pagination_controls .view_all {
    background-color: #f39800; /* 전체보기 버튼 색상 */
    border: 1px solid #f39800;
}

.pagination_controls .view_all:hover {
    background-color: #d08000; /* 전체보기 버튼 호버시 색상 */
}

/* 미디어 쿼리 추가 - 반응형 디자인 */
@media (max-width: 1200px) {
    .latest_item {
        width: 33.33%; /* 3개씩 표시 */
    }
}

@media (max-width: 900px) {
    .latest_item {
        width: 50%; /* 2개씩 표시 */
    }
}

@media (max-width: 600px) {
    .latest_item {
        width: 100%; /* 1개씩 표시 */
    }

    .pagination_controls {
        position: static; /* 위치를 고정하지 않음 */
        justify-content: center; /* 가운데 정렬 */
        margin-top: 10px;
        margin-bottom: 20px;
    }
}