@charset "utf-8";

/* 새글 스킨 (latest) - 질문답변 카드형. 사이트 기본 폰트(맑은 고딕)로 통일 */
.lat, .lat * {font-family:'Pretendard Variable','Malgun Gothic', dotum, sans-serif}

.lat {
    position:relative;
    margin-bottom:20px;
    background:#F7F8FD;
    border:0;
    border-radius:8px;
    padding:20px 22px;
    font-size:0.875rem;
    font-weight:400;
    box-shadow:10px 10px 10px rgba(0,0,0,.15), -10px -10px 10px #fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

.lat .sharp-text {text-shadow:none}

.lat .lat_head {display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid #D7E1EA}
.lat .lat_head .lat_title {font-size:1.15em;font-weight:700;margin:0;line-height:1.4}
.lat .lat_head .lat_title::before {content:"";display:inline-block;width:6px;height:6px;margin-right:8px;margin-bottom:1px;border-radius:50%;background:#0080EA;vertical-align:middle}
.lat .lat_head .lat_title a {color:#222222}
.lat .lat_head .lat_title a:hover {color:#0080EA}
.lat .lat_head .lt_more {font-size:0.85em;color:#8B8B8B;font-weight:500}
.lat .lat_head .lt_more:hover {color:#0080EA}
.lat .lat_head .lt_more:after {content:"›";display:inline-block;margin-left:2px;font-weight:700}

.lat ul {padding:0;margin:0}
.lat li {position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;line-height:1.3;padding:6px 12px;border-bottom:1px solid #D7E1EA;border-radius:0;transition:background-color .3s ease-out, transform .3s ease-out}
.lat li:last-child {border-bottom:0}
.lat li:hover {background-color:rgba(0,128,234,.06);transform:translateX(4px)}

.lat li .basic_li_link {flex:1 1 auto;min-width:0;display:flex;align-items:center;color:#333333;font-size:1em;font-weight:500;text-decoration:none}
.lat li .basic_li_link:hover .lt_subject {color:#0080EA}
.lat li .lt_subject {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s ease-out}
.lat li strong .lt_subject,
.lat li .basic_li_link strong {color:#222222;font-weight:700}
.lat li .basic_li_link .icon_reply {vertical-align:middle;margin-left:4px;flex:0 0 auto}

.lat li .fa-heart {color:#ff5a5a}
.lat li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.75em;color:#0080EA;background:#eaf4fd;text-align:center;border-radius:3px;border:0;vertical-align:middle;margin-right:4px}
.lat li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.75em;color:#1fbf6a;background:#e4fbef;text-align:center;border-radius:4px;margin-left:5px;font-weight:700;flex:0 0 auto}
.lat li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.75em;color:#ff5a5a;background:#ffe9e9;text-align:center;border-radius:4px;margin-left:5px;flex:0 0 auto}

.lat li .lt_cmt {flex:0 0 auto;display:inline-block;min-width:22px;padding:0;color:#0080EA;font-size:0.78em;font-weight:500;line-height:18px;text-align:center}

.lat .empty_li {display:block;line-height:80px;color:#8B8B8B;text-align:center;padding:0}

@media (max-width:600px) {
    /* 모바일에서는 여백 줄이고 그림자 제거해서 폭을 넓게 사용 */
    .lat {margin-bottom:10px;border-radius:0;box-shadow:#ffffff 0 -10px 10px, rgba(0,0,0,0.15) 0 10px 10px}
}