@charset "utf-8";

/* 범용 카드형 최신글 — 테두리 없이 부드러운 면 분할 */
.soft-latest{width:100%}
.soft-latest .sl-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin:0;padding:0;list-style:none
}
.soft-latest .sl-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white,#fff);border:0;border-radius:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .22s ease, box-shadow .22s ease
}
.soft-latest .sl-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.1)}
.soft-latest .sl-thumb{
  display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  background:rgba(148,163,184,.14)
}
.soft-latest .sl-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.soft-latest .sl-card:hover .sl-thumb img{transform:scale(1.05)}
.soft-latest .sl-noimg{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:rgba(100,116,139,.45)
}
.soft-latest .sl-noimg i{font-size:44px}
.soft-latest .sl-body{display:flex;flex-direction:column;gap:8px;padding:16px}
.soft-latest .sl-cate{
  align-self:flex-start;font-size:12px;font-weight:700;
  color:var(--brand,#2563eb);background:rgba(37,99,235,.1);
  padding:4px 11px;border-radius:999px
}
.soft-latest .sl-tit{
  font-size:15px;font-weight:700;color:var(--ink,#111827);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.soft-latest .sl-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
}
.soft-latest .sl-info{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px;
  font-size:12px;color:var(--muted,#6b7280)
}
.soft-latest .sl-empty{
  grid-column:1/-1;text-align:center;padding:56px 0;border:0;border-radius:18px;
  background:rgba(148,163,184,.1);color:var(--muted,#6b7280)
}
html[data-theme="dark"] .soft-latest .sl-card{box-shadow:0 1px 2px rgba(0,0,0,.4)}
html[data-theme="dark"] .soft-latest .sl-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.5)}
html[data-theme="dark"] .soft-latest .sl-cate{background:rgba(96,165,250,.16);color:#93c5fd}

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