@charset "utf-8";
/* 기금안내 > 기금 항목 — 사진 + 설명 교차 배치 */

.funds{display:flex;flex-direction:column;gap:88px}

.fund{
  display:grid;gap:56px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.fund:nth-child(even) .fund__media{order:2}

/* ---------- 사진 ---------- */
/* 원본 사진이 364×250이라 확대 폭을 제한해 화질 저하를 막는다 */
.fund__media{position:relative;width:100%;max-width:480px}
.fund:nth-child(odd) .fund__media{margin-inline-end:auto}
.fund:nth-child(even) .fund__media{margin-inline-start:auto}
.figure{
  position:relative;overflow:hidden;
  aspect-ratio:182/125;border-radius:var(--radius-l);
  background:linear-gradient(140deg,var(--sky-soft),#cfe6f2);
  box-shadow:var(--shadow-m);
}
/* 사진 가장자리를 정리해 주는 얇은 안쪽 테두리 */
.figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;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);
}
.fund:hover .figure img{transform:scale(1.04)}

/* 사진 파일이 아직 없을 때의 안내 상태 */
.figure__fallback{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--brand);text-align:center;padding:20px;
}
.figure.is-empty img{display:none}
.figure.is-empty .figure__fallback{display:flex}
.figure__fallback b{font-size:14px;font-weight:700}
.figure__fallback span{font-size:12.5px;color:var(--text-dim);word-break:break-all}

/* 사진 위 번호 배지 */
.fund__badge{
  position:absolute;top:-14px;left:-14px;z-index:2;
  min-width:66px;height:66px;padding:0 12px;border-radius:22px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--sky),var(--brand));
  color:#fff;font-size:22px;font-weight:900;letter-spacing:-.02em;
  box-shadow:0 10px 24px rgba(59,117,192,.32);
}
.fund:nth-child(even) .fund__badge{
  left:auto;right:-14px;
  background:linear-gradient(140deg,var(--brand),var(--navy));
}

/* ---------- 본문 ---------- */
.fund__body{min-width:0}
.fund__label{font-size:13px;font-weight:900;letter-spacing:.14em;color:#0f6c9c}   /* 옅은 바탕 5.3:1 (예전 --sky 는 3.8:1) */
.fund:nth-child(even) .fund__label{color:var(--brand)}
.fund__title{
  margin-top:8px;
  font-size:clamp(23px,3.2vw,30px);font-weight:900;letter-spacing:-.035em;line-height:1.3;
}
.fund__desc{
  margin-top:18px;color:var(--text-mid);font-size:16px;line-height:1.85;word-break:keep-all;
}
.fund__desc + .fund__desc{margin-top:12px}

/* 종류 */
.kinds{
  margin-top:26px;padding:20px 22px;border-radius:var(--radius-m);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.kinds__label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--brand-strong);
}
.kinds__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* 기타기금 목록 */
.fund__list{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.fund__list li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 18px;border-radius:var(--radius-m);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
  font-size:15px;line-height:1.65;word-break:keep-all;
}
.fund__list svg{flex:0 0 auto;margin-top:2px;color:var(--brand)}
.fund__list b{font-weight:700}
.fund__list span{color:var(--text-mid);font-size:14px}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .funds{gap:64px}
  .fund{grid-template-columns:1fr;gap:28px}
  .fund:nth-child(even) .fund__media{order:0}
  .fund:nth-child(odd) .fund__media,
  .fund:nth-child(even) .fund__media{margin-inline:auto}
  .fund__badge{top:-12px;left:-10px}
  .fund:nth-child(even) .fund__badge{left:-10px;right:auto}
}
@media (max-width:560px){
  .figure{border-radius:22px}
  .fund__badge{min-width:56px;height:56px;border-radius:18px;font-size:19px}
  .kinds{padding:18px}
}