/* 리스트 항목 간격 강제 확장 */
.simple_lat li { 
    display: flex !important; 
    width: 100% !important; 
    
    /* 1. 패딩과 마진을 동시에 사용하여 공간 확보 */
    padding-top: 20px !important;    /* 위쪽 여백 */
    padding-bottom: 20px !important; /* 아래쪽 여백 */
    margin: 0 !important;           /* 마진 초기화 */
    
    /* 2. 높이 제한 해제 */
    height: auto !important; 
    min-height: 150px; /* 이미지 높이보다 약간 크게 설정해서 답답함 해소 */
    
    border-top: 1px solid #eee !important; 
    box-sizing: border-box !important;
    align-items: flex-start !important; /* 상단 기준 정렬 */
}

/* 이미지와 텍스트가 세로로 중앙에 오길 원하면 아래 속성으로 변경 */
/* align-items: center !important; */

/* 썸네일 고정 너비 */
.lt_thumb { 
    flex: 0 0 140px; /* 너비가 절대 줄어들지 않음 */
    margin-right: 8px !important; /* ★기존 30px~40px에서 15px로 축소 */
    flex-shrink: 0; 
}

/* 텍스트 영역: 여기가 핵심입니다 */
.lt_content { 
    flex: 1 !important;
    min-width: 0;
    padding-left: 0 !important; /* ★혹시 모를 왼쪽 여백 강제 제거 */
    margin-left: 0 !important;
}

.lt_title { 
    display: block !important; 
    width: 100% !important; 
    margin-bottom: 10px; 
}

/* 본문 상세: 2줄 이상이어도 무조건 가로 100% */
.lt_detail { 
    display: block !important; 
    width: 100% !important; 
}

.lt_detail a {
    display: block !important; 
    width: 100% !important; /* 가로 꽉 채우기 */
    white-space: normal !important; /* 줄바꿈 허용 */
    word-break: break-all !important; /* 텍스트가 끝까지 가도록 강제 */
    text-align: justify; /* 양쪽 정렬로 시각적 꽉 참 구현 */
    -webkit-line-clamp: unset !important; /* 혹시 모를 줄 제한 제거 */
}

/* 모바일 화면 (화면 너비 768px 이하) */
@media (max-width: 768px) {
    /* 1. 이미지 박스 너비 축소 */
    .lt_thumb { 
        flex: 0 0 90px !important; /* 모바일에서는 110px로 축소 */
        margin-right: 10px !important; /* 이미지와 본문 사이 간격도 더 좁게 */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center;
    }

    /* 2. 이미지 높이 자동 조절 */
    .lt_thumb img {
        width: 90px !important;
        height: auto !important; /* 비율에 맞춰 높이 자동 조절 */
    }

    /* 3. 모바일에서 글자 크기 미세 조정 (선택사항) */
    .lt_title strong {
        font-size: 16px !important; /* 제목 크기 살짝 축소 */
    }
    .lt_detail a {
        font-size: 0.95em !important; /* 본문 크기 살짝 축소 */
        line-height: 1.5 !important;
    }

    /* 1. 제목 제한: 1줄만 보여주고 넘치면 ... 처리 */
    .lt_title strong {
        display: -webkit-box !important;
        -webkit-line-clamp: 1; /* 1줄 제한 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal !important; /* 위 clamp 작동을 위해 normal로 */
        word-break: break-all;
    }

        /* 본문 상세 3줄 제한 */
    .lt_detail a {
        /* 필수: 멀티라인 말줄임 설정 */
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important; /* ★보여줄 줄 수 */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* 끝에 ... 표시 */
        
        /* 레이아웃 초기화 */
        white-space: normal !important; 
        width: 100% !important;
        line-height: 1.5 !important;     /* 줄 간격 */
        max-height: 4.8em !important;    /* line-height(1.6) x 3줄 = 4.8em */
        
        /* 기존에 설정한 justify(양쪽정렬)는 말줄임과 충돌할 수 있으므로 왼쪽 정렬 권장 */
        text-align: left !important; 
        word-break: break-all !important;
    }
}

@media (max-width: 768px) {
    .simple_lat li {
        display: flex !important;
        width: 100% !important;
        padding: 15px 0 !important; /* 게시물 사이 간격 (px로 자유롭게 조절) */
        margin: 0 !important;
        min-height: 0 !important; 
        height: auto !important;

        /* 정렬을 '상단' 기준으로 고정하고, 마진으로 위치를 잡습니다 */
        align-items: flex-start !important; 
    }

    /* 이미지 위치를 px로 미세 조정 */
    .lt_thumb {
        margin-top: 0 !important; /* 이미지의 상단 위치를 px로 조절하세요 */
        flex: 0 0 90px !important;
        margin-right: 10px !important;
    }

    .lt_thumb img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* 텍스트 영역 위치를 px로 미세 조정 */
    .lt_content {
        margin-top: 0px !important; /* 텍스트 전체의 상단 위치를 px로 조절하세요 */
        flex: 1 !important;
    }

    /* 제목과 본문 사이의 간격을 px로 조절 */
    .lt_title {
        margin-bottom: 2px !important; /* 이 값을 키우면 문단 사이가 벌어집니다 */
        line-height: 1.2 !important;
    }
}