@charset "utf-8";
/* =========================================================
   그룹 페이지 최신글 — 가로형 카드 (좌측 썸네일 · 우측 제목/등록일)
   한 줄에 2개. 썸네일 비율은 감싸는 쪽에서 --lt-ratio 로 넘겨 준다 (기본 4:3)
   ========================================================= */

.lt-card{--lt-gap:22px;--lt-thumb:150px;margin-bottom:38px}

/* 게시판 이름 줄 */
/* 게시판 이름 — 메인 섹션 제목(.mz-sec-hd h2)과 같은 크기·굵기로 맞춘다 */
.lt-card .lt-card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-bottom:10px;margin-bottom:clamp(14px,2vw,20px);border-bottom:2px solid currentColor}
.lt-card .lt-card-hd h5{margin:0;font-size:clamp(1.05rem,3vw,1.35rem);font-weight:800;
    letter-spacing:-.02em;line-height:1.3;word-break:keep-all}
.lt-card .lt-card-hd h5 a{color:inherit;text-decoration:none}
.lt-card .lt-card-more{flex:0 0 auto;font-size:clamp(.78rem,2.1vw,.85rem);opacity:.62;white-space:nowrap;
    color:inherit;text-decoration:none;padding:8px 2px;min-height:44px;display:inline-flex;align-items:center}
.lt-card .lt-card-more:hover{opacity:1}

/* 글 목록 — 한 줄에 2개 */
.lt-card .lt-card-list{list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(2,1fr);gap:var(--lt-gap)}
.lt-card .lt-card-list > li{min-width:0}

/* 카드 한 장 : 썸네일 | 제목·등록일 */
.lt-card .lt-card-list a{display:flex;align-items:center;gap:14px;
    color:inherit;text-decoration:none}

/* 좌측 썸네일 — 폭은 고정, 높이는 비율이 정한다 */
.lt-card .lt-card-thumb{flex:0 0 auto;display:block;position:relative;overflow:hidden;
    width:var(--lt-thumb);aspect-ratio:var(--lt-ratio, 4 / 3);
    border-radius:4px;background:rgba(128,128,128,.10)}
.lt-card .lt-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lt-card .lt-card-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    padding:0 8px;text-align:center;font-size:.78rem;font-weight:700;opacity:.35;
    letter-spacing:-.02em;word-break:keep-all;line-height:1.35}

/* 우측 — 제목, 줄바꿈해서 등록일 */
.lt-card .lt-card-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
/* 글 제목 — 메인 뉴스·칼럼·논문 제목과 같은 17px / 굵기 700 */
.lt-card .lt-card-body strong{display:-webkit-box;font-size:clamp(1.0625rem,2.6vw,1.0625rem);
    font-weight:700;line-height:1.45;
    letter-spacing:-.02em;word-break:keep-all;overflow-wrap:break-word;
    -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lt-card .lt-card-body time{font-size:.75rem;opacity:.48;font-variant-numeric:tabular-nums}

/* 새 글 · 댓글 수 */
.lt-card .lt-card-new{display:inline-block;margin-right:4px;padding:0 5px;border-radius:3px;
    background:#cc2300;color:#fff;font-size:.66rem;font-weight:700;line-height:1.7;vertical-align:2px}
.lt-card .lt-card-cmt{margin-left:4px;font-size:.8em;font-weight:700;opacity:.6}

.lt-card .lt-card-empty{grid-column:1 / -1;padding:30px 0;text-align:center;opacity:.45;font-size:.9rem}

/* 화면이 좁아지면 썸네일을 줄인다 */
@media (max-width:1199px){
    .lt-card{--lt-gap:18px;--lt-thumb:128px}
}
/* 모바일 — 한 줄에 1개.
   좁은 폭에서 가로형을 2개씩 놓으면 제목 칸이 100px 남짓이라 글자가 서너 자씩 끊긴다. */
@media (max-width:767px){
    .lt-card{--lt-gap:14px;--lt-thumb:112px;margin-bottom:30px}
    .lt-card .lt-card-list{grid-template-columns:1fr}
}

/* =========================================================
   글전용 카드 — 썸네일 없이 제목·등록일만 (group.php 의 $gr_text 그룹)
   배치는 썸네일형과 같게 두고, 빈 자리가 허전하지 않도록
   글마다 옅은 밑줄을 넣어 목록처럼 읽히게 한다.
   ========================================================= */
.lt-card-notumb .lt-card-list{--lt-gap:0 28px}
.lt-card-notumb .lt-card-list > li{border-bottom:1px solid rgba(128,128,128,.18)}
.lt-card-notumb .lt-card-list a{align-items:flex-start;gap:0;padding:13px 2px}
.lt-card-notumb .lt-card-body{gap:6px}
/* 썸네일이 없어 폭이 넉넉하다. 제목은 두 줄이면 충분하다 */
.lt-card-notumb .lt-card-body strong{-webkit-line-clamp:2}

@media (max-width:767px){
    .lt-card-notumb .lt-card-list{--lt-gap:0}
    .lt-card-notumb .lt-card-list a{padding:12px 2px}
}