@charset "utf-8";

/* ============================================================
   용달·화물 차량(trans) 최신글 - 메인 갤러리 카드
   그리드: 4 (기본) → 3 (≤1280) → 2 (≤768) → 1 (≤480)
   색상은 메인 테마 변수(var) 사용 → 다크모드 자동 대응
   ============================================================ */
.trans-latest{width:100%}
.trans-latest .tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;list-style:none}

.trans-latest .tl-card{position:relative;display:flex;flex-direction:column;background:var(--white,#fff);border:1px solid var(--line,#e5e7eb);border-radius:14px;overflow:hidden;transition:.2s}
.trans-latest .tl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover,0 14px 36px rgba(37,99,235,.16));border-color:transparent}

.trans-latest .tl-thumb{position:relative;display:block;aspect-ratio:4/3;background:var(--bg-gray,#f8fafc);overflow:hidden}
.trans-latest .tl-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.trans-latest .tl-card:hover .tl-thumb img{transform:scale(1.05)}
.trans-latest .tl-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--line,#e5e7eb)}
.trans-latest .tl-noimg i{font-size:54px}
.trans-latest .tl-ton{position:absolute;left:10px;bottom:10px;background:rgba(17,24,39,.78);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:6px}

.trans-latest .tl-body{display:flex;flex-direction:column;gap:6px;padding:14px}
.trans-latest .tl-cate{align-self:flex-start;font-size:12px;font-weight:800;color:var(--brand,#2563eb);background:var(--brand-light,#eff6ff);padding:3px 10px;border-radius:20px}
.trans-latest .tl-tit{font-size:15px;font-weight:700;color:var(--ink,#111827);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trans-latest .tl-new{display:inline-block;margin-left:4px;font-size:10px;font-weight:800;color:#fff;background:var(--cta,#16a34a);padding:1px 5px;border-radius:4px;vertical-align:middle}
.trans-latest .tl-area{font-size:13px;color:var(--ink-2,#374151);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trans-latest .tl-area i{color:var(--brand,#2563eb)}
.trans-latest .tl-info{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:2px;font-size:12px;color:var(--muted,#6b7280)}
.trans-latest .tl-info i{color:var(--muted,#9ca3af)}
.trans-latest .tl-empty{grid-column:1/-1;text-align:center;color:var(--muted,#6b7280);padding:50px 0;border:1px dashed var(--line,#e5e7eb);border-radius:14px}

@media (max-width:1280px){.trans-latest .tl-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.trans-latest .tl-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:480px){.trans-latest .tl-grid{grid-template-columns:1fr}}