@charset "utf-8";

/* ============================================
   1. 기존 최신글 스킨 스타일 (유지)
   ============================================ */
.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 .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}
.pic_lt ul:after {display:block;visibility:hidden;clear:both;content:""}
.pic_lt ul {margin: 0 -10px}
.pic_lt li {float:left;width:25%;padding:0 10px}
.pic_lt li.galley_li:nth-child(4n+1) {clear: both!important}
.pic_lt li .lt_img {margin:5px 0;display:block}
.pic_lt li .lt_img img {width:100%;height:auto}
.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_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}


/* ============================================
   2. [NEW] 우수회원 수산물 장터 전용 스타일
   (latest.skin.php와 연동되는 디자인)
   ============================================ */

/* 슬라이더 영역 초기화 */
.special_list ul { padding: 0; margin: 0; list-style: none; }
/* 여백 문제를 해결하기 위해 margin-left 제거 및 정렬 방식 변경 */
.special_list .depth2 { 
    display: flex; 
    flex-wrap: nowrap; /* 강제로 한 줄 유지 */
    justify-content: flex-start; /* 왼쪽 정렬 */
}

/* 개별 카드 아이템 스타일 */
.special_list .depth2 > li {
    /* float: left; -> flex 사용 시 불필요하므로 제거하거나 무시됨 */
    width: 280px; /* 너비 유지 */
    margin-right: 18px; /* 간격을 살짝 줄여서(20->18) 안전하게 1200px 안에 들어오게 함 */
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    
    /* [수정 핵심] 테두리와 패딩을 너비(280px) 안에 포함시킴 */
    box-sizing: border-box; 
    
    /* 애니메이션 설정 */
    transition: background 0.18s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #eee; 
}

/* 마지막 아이템 여백 제거 */
.special_list .depth2 > li:last-child { margin-right: 0; }

/* [핵심] Hover 효과 
   - 배경색 변경
   - 위로 5px 떠오름
   - 그림자 생성
*/
.special_list .depth2 > li:hover {
    background: #f5f8ff; /* 연한 파란색 배경 */
    transform: translateY(-5px); /* 공중 부양 */
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15); /* 부드러운 그림자 */
    border-color: #dbeafe; /* 테두리 색상 변경 */
    z-index: 10;
}

/* 링크 영역 전체 잡기 */
.special_list .depth2 > li > a {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

/* 이미지 영역 */
.special_list .img {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}
.special_list .img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않게 꽉 채움 */
    transition: transform 0.3s ease;
}
/* 호버 시 이미지 살짝 확대 */
.special_list .depth2 > li:hover .img img {
    transform: scale(1.05);
}

/* 하단 텍스트 영역 */
.special_list .btm {
    /* [수정] 위쪽 패딩 5px, 좌우하단 15px */
    padding: 5px 15px 15px; 
    text-align: left;
}

/* [추가] 업체명 스타일 (구분선 포함) */
.special_list .company {
    display: block;              /* 줄바꿈 */
    margin-top: 10px;            /* 위쪽(제목)과의 간격 */
    padding-top: 8px;            /* 구분선과 글자 사이 간격 */
    border-top: 1px solid #f2f2f2; /* 연한 회색 구분선 */
    font-size: 13px;             /* 글자 크기 */
    color: #888;                 /* 회색 글자 */
    white-space: nowrap;         /* 한 줄로 표시 */
    overflow: hidden;            /* 넘치면 숨김 */
    text-overflow: ellipsis;     /* 말줄임표(...) */
}

/* 배지 (판매분류 등) */
.special_list .mark {
    margin-bottom: 8px;
}
.special_list .sale_mark {
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #3a8afd;
    background: #eef6ff;
    border-radius: 4px;
}

/* 상품 제목 */
.special_list h4 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    /* 말줄임표 처리 (2줄 이상 넘어가면 ...) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

/* 호버 시 제목 색상 강조 */
.special_list .depth2 > li:hover h4 {
    color: #1f3a93;
}