/* ===== 공통 ===== */
.sec-counter__list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap) var(--gap-sm);
}

.sec-counter__item{text-align:center}

.sec-counter__media,
.sec-counter__icon{
  display:block;
  width:56px;height:56px;
  margin:0 auto 20px;
}

.sec-counter__media img{
  width:100%;height:100%;
  object-fit:contain;
}

.sec-counter__icon svg{
  width:100%;height:100%;
  stroke:var(--c-primary);
}

/* 이미지가 있으면 아이콘은 감춘다 (배타 렌더 대신 CSS) */
.sec-counter__item.has-img .sec-counter__icon{display:none}

.sec-counter__num{
  display:block;
  font-family:var(--f-head);
  font-size:44px;font-weight:var(--fw-head);
  line-height:1.1;
  color:var(--c-primary);
  letter-spacing:-.03em;
}

.sec-counter__affix{
  font-size:20px;font-weight:600;
  color:var(--c-text-sub);
}

.sec-counter__title{
  margin-top:14px;
  font-size:var(--fs-h3);font-weight:var(--fw-head);
  color:var(--c-text);
}

.sec-counter__desc{
  margin-top:8px;
  font-size:var(--fs-sm);line-height:var(--lh-body);
  color:var(--c-text-mute);
}


/* ===== --b  숫자 강조 · 구분선 ===== */
.sec-counter--b .sec-counter__list{gap:0}

.sec-counter--b .sec-counter__item{
  padding:0 20px;
  border-left:1px solid var(--c-line);
}
.sec-counter--b .sec-counter__item:first-child{border-left:0}

.sec-counter--b .sec-counter__media,
.sec-counter--b .sec-counter__icon{display:none}

.sec-counter--b .sec-counter__num{font-size:60px}

.sec-counter--b .sec-counter__title{
  margin-top:18px;
  font-size:var(--fs-body);
  color:var(--c-text-sub);
}


/* ===== --c  카드형 ===== */
.sec-counter--c .sec-counter__item{
  padding:40px 24px;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  transition:box-shadow var(--tr),transform var(--tr);
}
.sec-counter--c .sec-counter__item:hover{
  box-shadow:var(--shadow);
  transform:translateY(-4px);
}

.sec-counter--c .sec-counter__num{font-size:38px}


/* ===== 모바일 ===== */
@media (max-width:1024px){
  .sec-counter__list{grid-template-columns:repeat(2,1fr);gap:40px 20px}

  .sec-counter__num{font-size:36px}
  .sec-counter--b .sec-counter__num{font-size:44px}
  .sec-counter--c .sec-counter__num{font-size:32px}

  .sec-counter--b .sec-counter__item:nth-child(odd){border-left:0}
  .sec-counter--c .sec-counter__item{padding:30px 18px}
}

@media (max-width:768px){
  .sec-counter__list{gap:32px 16px}

  .sec-counter__media,
  .sec-counter__icon{width:44px;height:44px;margin-bottom:14px}

  .sec-counter__num{font-size:30px}
  .sec-counter__affix{font-size:15px}
  .sec-counter__title{font-size:var(--fs-body)}
}