/* pg104 주요거래처 전용 — 공통 규칙(jungshin.css) 위에 얹는다.
   회사소개서 5페이지. 로고는 PPT에서 추출했으며 원본이 작아(높이 16~28px)
   확대하지 않고 원본 크기 가까이 표시하고 회사명을 함께 적는다.
   고해상도 로고를 받으면 images/ 안의 같은 이름으로 덮어쓰면 된다. */

.cl-grid{
  list-style:none;margin:0;padding:0 0 88px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.cl-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:172px;padding:28px 20px;
  background:#fff;border:1px solid #e6ebf2;border-radius:12px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cl-item:hover{
  border-color:#c3d4e8;
  box-shadow:0 12px 26px -18px rgba(11,27,51,.45);
  transform:translateY(-2px);
}

/* 로고 — 비율이 제각각이라 object-fit 으로 맞춘다.
   align-items 를 쓰면 세로로만 맞아 길쭉한 로고가 지나치게 얇아진다. */
.cl-logo{
  width:100%;height:58px;display:flex;justify-content:center;
}
.cl-logo img{
  width:100%;height:100%;object-fit:contain;object-position:center;
}

.cl-name{
  font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--jn-ink);margin:0;
  text-align:center;line-height:1.4;
}
.cl-sub{display:block;font-size:12px;font-weight:500;color:var(--jn-muted);margin:3px 0 0;text-align:center}

/* 로고가 없는 곳은 이름만 (자리 비지 않게) */
.cl-item--noimg .cl-logo{display:none}

@media (max-width:1100px){
  .cl-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .cl-grid{grid-template-columns:repeat(2,1fr);gap:12px;padding-bottom:54px}
  .cl-item{min-height:142px;padding:22px 14px;gap:10px}
  .cl-logo{height:46px}
  .cl-name{font-size:13px}
}