/* ===== Image Grid System (.ig) ===== */
/* 로드 순서: variables.css → reset.css → … → image-grid.css → sub.css */

/* ─── Base Container ─────────────────────────────────────── */
.ig {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin-top:2rem;
  margin-bottom:2rem;
  gap:0.5rem;
}

/* ─── Image Item ──────────────────────────────────────────── */
.ig__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: fill;
  border-radius: var(--radius-md);
  /* border: 1px solid var(--color-border-light); */
  /* padding:0.5rem; */
}

/* 같은 행에 이미지가 2장 이상: 그리드 행 높이에 맞춰 높이 통일(넓은 쪽 기준 + cover로 잘림) */
.ig:not(.ig--float-left):not(.ig--float-right):has(> .ig__img ~ .ig__img) > .ig__img {
  height: 100%;
  min-height: 0;
}

/* ─── Equal-Column Modifiers ────────────────────────────── */
.ig--2 { grid-template-columns: 1fr 1fr; }
.ig--3 { grid-template-columns: 1fr 1fr 1fr; }
.ig--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* ─── Asymmetric 2-Column Ratios ─────────────────────────── */
.ig--8-2 { grid-template-columns: 8fr 2fr; }
.ig--7-3 { grid-template-columns: 7fr 3fr; }
.ig--6-4 { grid-template-columns: 6fr 4fr; }
.ig--4-6 { grid-template-columns: 4fr 6fr; }
.ig--3-7 { grid-template-columns: 3fr 7fr; }

/* ─── Asymmetric 3-Column Ratios ─────────────────────────── */
.ig--2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.ig--1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
.ig--1-1-2 { grid-template-columns: 1fr 1fr 2fr; }

/* ─── Span (혼합 그리드) ──────────────────────────────────── */
.ig__img--span-2 { grid-column: span 2; }
.ig__img--span-3 { grid-column: span 3; }
.ig__img--span-4 { grid-column: span 4; }

/* ─── Width Limiters ────────────────────────────────────── */
.ig--w-10 { width: 10%; }
.ig--w-15 { width: 15%; }
.ig--w-20 { width: 20%; }
.ig--w-30 { width: 30%; }
.ig--w-40 { width: 40%; }
.ig--w-50 { width: 50%; }
.ig--w-60 { width: 60%; }
.ig--w-70 { width: 70%; }
.ig--w-80 { width: 80%; }

/* ─── Alignment (비-float 컨테이너) ──────────────────────── */
.ig--center { margin-left: auto; margin-right: auto; }
.ig--right  { margin-left: auto; }

/* ─── Float (텍스트 래핑) ─────────────────────────────────── */
.ig--float-left,
.ig--float-right {
  display: block;   /* grid 해제 */
  margin-bottom: 1rem;
}
.ig--float-left  { 
  float: left;  margin-right: 1.5rem; 
  margin-top: 0;
}
.ig--float-right { 
  float: right; margin-left:  1.5rem; 
  margin-top: 0;
}

/* ─── Caption ─────────────────────────────────────────────── */
.ig__caption {
  grid-column: 1 / -1;
  display: flex;
  /* 여러 줄 캡션: 라벨·본문을 위쪽 정렬(center면 라벨이 블록 세로 중앙에 붙음) */
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.125rem;
  font-size: var(--fs-09);
  line-height: var(--lh-16);
}

.ig__caption-label {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 2px 8px;
  background: var(--color-text);
  color: #fff;
  font-weight: 500;
  font-size: var(--fs-09);
  line-height: var(--lh-14);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ig__caption-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px;
  color: var(--color-text);
  word-break: keep-all;
  font-size: var(--fs-10);
  line-height: var(--lh-12);
  font-weight: 400;
  text-align: left;
}
/* 각 이미지별 캡션 셀(ig--2/3/4에서 이미지 아래 칼럼별 캡션) */
.ig__caption--cell {
  grid-column: auto;
  width: 100%;
  justify-content: center;
  text-align: center;
  flex-wrap: nowrap;
}

/* 텍스트만 있는 캡션 가운데 (float 등 figcaption에 justify-content:center가 없을 때도 width 100%로 정렬 유효) */
.ig__caption-text-center {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  color: var(--color-text);
  word-break: keep-all;
  font-size: var(--fs-10);
  line-height: var(--lh-12);
  font-weight: 400;
  text-align: center;
}
/* ig--center일 때 라벨/텍스트를 붙여 가운데 정렬 */
.ig.ig--center .ig__caption {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  flex-wrap: nowrap;
}

.ig.ig--center .ig__caption-text {
  flex: 0 1 auto;
  min-width: 0;
}

/* float-right 단일 그림: 캡션 묶음을 가운데 정렬 */
.ig.ig--float-right .ig__caption {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
}

.ig.ig--float-right .ig__caption-text {
  flex: 0 1 auto;
  min-width: 0;
}

/* float-right + 텍스트 단독 캡션은 figure 폭 기준으로 가운데 */
.ig.ig--float-right .ig__caption:has(.ig__caption-text-center) {
  width: 100%;
  justify-content: flex-start;
}

/* 다열 그림(나란히 2장 이상): ig--center 단일 그림과 동일한 캡션 박스(맞춤 너비 + 가운데) */
.ig:not(.ig--float-left):not(.ig--float-right):has(> .ig__img ~ .ig__img) .ig__caption {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
}

.ig:not(.ig--float-left):not(.ig--float-right):has(> .ig__img ~ .ig__img) .ig__caption-text {
  flex: 0 1 auto;
  min-width: 0;
}

/* 다열(2/3/4)에서 칼럼별 캡션 사용 시: 이미지 행 + 캡션 행으로 자동 배치 */
.ig:is(.ig--2, .ig--3, .ig--4) > .ig__caption--cell .ig__caption-text {
  text-align: center;
}

/* 단일 그림(이미지 1장만): 캡션 가운데 */
.ig:not(.ig--float-left):not(.ig--float-right):not(:has(> .ig__img ~ .ig__img)) .ig__caption {
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
}

.ig:not(.ig--float-left):not(.ig--float-right):not(:has(> .ig__img ~ .ig__img)) .ig__caption-text {
  flex: 0 1 auto;
  min-width: 0;
}

/* ─── Aspect-Ratio Helpers ───────────────────────────────── */
.ig__img--1-1  { aspect-ratio: 1 / 1;  }
.ig__img--4-3  { aspect-ratio: 4 / 3;  }
.ig__img--16-9 { aspect-ratio: 16 / 9; }

/* ─── Column-based equal-height layout (ig--cols) ─────────── */
/* 구조: figure.ig.ig--cols.ig--cols-N > div.ig__col > img + figcaption  */
/* aspect-ratio + object-fit:cover 로 모든 칼럼 이미지 높이를 통일한다. */
.ig--cols {
  column-gap: 1rem;
  row-gap: 0;        /* .ig 의 gap: 0.5rem 덮어쓰기 */
}
.ig--cols-2 { grid-template-columns: 1fr 1fr; }
.ig--cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.ig__col {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

/* 기본 비율 4:3 — 칼럼 너비가 같으면 높이도 자동으로 동일 */
.ig--cols .ig__col .ig__img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
}

/* 비율 변형 */
.ig--cols.ig--ratio-16-9 .ig__col .ig__img { aspect-ratio: 16 / 9; }
.ig--cols.ig--ratio-3-2  .ig__col .ig__img { aspect-ratio: 3 / 2;  }
.ig--cols.ig--ratio-1-1  .ig__col .ig__img { aspect-ratio: 1 / 1;  }
/* 비율 고정 없이 자연 비율 유지 (높이 불일치 허용) */
.ig--cols.ig--ratio-auto .ig__col .ig__img { aspect-ratio: auto; height: auto; object-fit: fill; }

/* 칼럼별 캡션: 부모 grid full-span 상속 방지 + 가운데 정렬 */
.ig__col .ig__caption {
  grid-column: unset;
  margin-top: 0;
  width: 100%;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}
.ig__col .ig__caption-text {
  flex: 0 1 auto;
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ig--cols-2,
  .ig--cols-3,
  .ig--2,
  .ig--3,
  .ig--4,
  .ig--7-3,
  .ig--6-4,
  .ig--4-6,
  .ig--3-7,
  .ig--2-1-1,
  .ig--1-2-1,
  .ig--1-1-2 {
    grid-template-columns: 1fr;
  }

  .ig__img--span-2,
  .ig__img--span-3,
  .ig__img--span-4 {
    grid-column: span 1;
  }

  .ig--w-30,
  .ig--w-40,
  .ig--w-50,
  .ig--w-60,
  .ig--w-70,
  .ig--w-80 {
    width: 100%;
  }

  .ig--float-left,
  .ig--float-right {
    float: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .ig__caption {
    font-size: var(--fs-09);
  }

  /* 데스크톱 가운데 캡션 → 모바일은 왼쪽(다열·단일·ig--center 공통, float 제외) */
  .ig:not(.ig--float-left):not(.ig--float-right) .ig__caption {
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: start;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .ig__caption--cell {
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;
  }

  .ig:not(.ig--float-left):not(.ig--float-right) .ig__caption-text {
    flex: 1 1 auto;
    text-align: start;
  }

  .ig__caption-label {
    font-size: var(--fs-08);
    letter-spacing: var(--ls-08);
    padding: 0px 4px;
  }

  .ig__caption-text {
    font-size: var(--fs-09);
    overflow-wrap: break-word;
    word-break: break-word;
  }

 
}