@charset "utf-8";
/* 기금안내 > 사용용도 — 카드 그리드 */

.grid{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}

.card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:32px 30px 34px;box-shadow:var(--shadow-s);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:var(--line-strong)}
.card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:4px;border-radius:0 0 var(--radius-l) var(--radius-l);
  background:linear-gradient(90deg,var(--sky),var(--brand));
  opacity:0;transition:opacity .3s;
}
.card:hover::after{opacity:1}
.card--wide{grid-column:1/-1}

/* 카드 상단 사진 — 대표 사진으로 각 사업의 실제 현장을 보여준다 */
.card__media{position:relative;margin:-32px -30px 4px;width:calc(100% + 60px)}
.figure{
  position:relative;overflow:hidden;
  aspect-ratio:364/220;border-radius:var(--radius-l) var(--radius-l) 0 0;
  background:linear-gradient(140deg,var(--sky-soft),#cfe6f2);
}
.figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(16,32,56,.08);
}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .figure img{transform:scale(1.04)}

/* 사진 파일이 아직 없을 때의 안내 상태(assets/js/site.js 가 로드 실패를 감지해 붙여준다) */
.figure__fallback{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--brand);text-align:center;padding:16px;
}
.figure.is-empty img{display:none}
.figure.is-empty .figure__fallback{display:flex}
.figure__fallback b{font-size:13px;font-weight:700}
.figure__fallback span{font-size:11.5px;color:var(--text-dim);word-break:break-all}

/* 사진 위 번호 배지 */
.card__badge{
  position:absolute;top:14px;left:14px;z-index:1;
  min-width:38px;height:38px;padding:0 9px;border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--sky),var(--brand));
  color:#fff;font-size:14.5px;font-weight:900;letter-spacing:-.02em;
  box-shadow:0 6px 16px rgba(59,117,192,.32);
}
.card:nth-child(even) .card__badge{background:linear-gradient(140deg,var(--brand),var(--navy))}

.card__title{font-size:clamp(18px,2.4vw,21px);font-weight:900;letter-spacing:-.03em;line-height:1.35}
.card__desc{color:var(--text-mid);font-size:15px;line-height:1.8;word-break:keep-all}
.card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}

@media (max-width:900px){
  .grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .card{padding:26px 22px 28px}
  .card__media{margin:-26px -22px 4px;width:calc(100% + 44px)}
}