@charset "utf-8";

/* 새글 스킨 (latest) */
.pic_lt {position:relative;margin-bottom:20px;background:#fff}
.pic_lt .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe}
.pic_lt .lat_title a {color:#000;display:inline-block;position:relative}

/* =========================
   리스트 공통 스타일
   ========================= */
.pic_lt{position:relative} /* .lt_more 절대위치 기준 */
.pic_lt .lt_more{
    position:absolute; top:11px; right:10px; display:block;
    width:25px; line-height:25px; color:#aaa; border-radius:3px; text-align:center
}
.pic_lt .lt_more:hover{color:#777}

/* ul 초기화 + flex 컨테이너 (모든 해상도 공통) */
.pic_lt ul{
    margin:0; padding:0; list-style:none;
    font-size:0;                        /* inline-block 공백 제거용 */
    display:flex !important;            /* 기존 display:list-item 등 무력화 */
    flex-wrap:wrap !important;          /* 다음 줄로 자연스럽게 개행 */
    align-items:stretch;
}

/* li 기본 (모든 해상도 공통) */
.pic_lt ul > li{
    /* 오래된 float/width/clear 규칙들 전부 차단 */
    float:none !important;
    clear:none !important;
    width:auto !important;
    display:block !important;

    box-sizing:border-box;
    padding:3px;
    font-size:14px;
}

/* 썸네일 공통 */
.pic_lt ul > li .lt_img2 img,
.pic_lt ul > li .lt_img2 video{
    width:100%; height:100px; object-fit:cover; display:block;
}

/* =======================================
   PC 기본(4열) — 폭이 넓을 때는 25% 고정
   ======================================= */
@media screen and (min-width: 769px){
    .pic_lt ul > li{
        flex:0 0 25% !important;        /* 4열 고정 */
        max-width:25% !important;
    }
}

/* =======================================
   모바일(최대 768px) — 무조건 3열 고정
   ======================================= */
@media screen and (max-width: 768px){
    .pic_lt ul > li{
        flex:0 0 33.3333% !important;   /* 3열 고정 */
        max-width:33.3333% !important;
    }
    .pic_lt ul > li .lt_img2 img,
    .pic_lt ul > li .lt_img2 video{
        height:80px;                     /* 모바일에서 약간 낮게 */
    }
}


.pic_lt li .lt_img2 {margin:5px 0;display:block}
.pic_lt li a:hover {color:#a22121}
.pic_lt li .fa-heart {color:#ff0000}
.pic_lt li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.pic_lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.pic_lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-caret-right {color:#bbb}
.pic_lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.pic_lt .profile_img img{border-radius:50%}

.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_lt .empty_li:before {background:none;padding:0}

.pic_lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.pic_lt .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.pic_lt .lt_more:hover {color:#777}