/* 개별 아이템 행 레이아웃 */
.vlt-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 0; /* 상하 여백 조절 */
    position: relative;
}

/* 팝업 공지 배지 */
.vlt-badge {
    flex-shrink: 0;
}

/* 제목과 내용을 감싸는 링크 영역 (7:3 비율의 기준 공간) */
.vlt-subject-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0; /* Flex 환경에서 말줄임표(...)가 정상 작동하도록 필수 설정 */
    text-decoration: none;
    color: inherit;
}

/* 1. 제목 영역 (7 비율 + 연한 회색 배경 예시) */
.vlt-subject {
    flex: 2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #f8f9fa; /* 제목 배경색 */
    padding: 6px 10px;        /* 안쪽 여백 */
    border-radius: 4px;       /* 모서리 둥글게 (선택사항) */
}

/* 2. 내용 영역 (3 비율 + 80자 제한 + 연한 하늘색/다른 배경색 예시) */
.vlt-content {
    flex: 8;
    min-width: 0;
    color: #666;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #f1f3f5; /* 내용 배경색 */
    padding: 6px 10px;        /* 안쪽 여백 */
    border-radius: 4px;       /* 모서리 둥글게 (선택사항) */
}

/* 댓글 수 및 날짜는 고정 크기 유지 */
.vlt-cmt,
.vlt-date {
    white-space: nowrap;
    flex-shrink: 0;
    color: #999;
    font-size: 0.85em;
}