/* site/pages/board-gallery.css — 갤러리 목록 + 상세. board.css 위에 얹는다.
   카드는 디자인 시스템 components/media-cards.html의 갤러리 캡션 카드, 상세의 사진은 sections/board-detail.html의 본문 폭을 따른다. */

/* ── 목록: 카드 격자 ── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-grid-gap); margin: 0; padding: 0; list-style: none; }
.gallery-grid > li { min-width: 0; }
.gallery-card { display: block; }
.gallery-card .photo { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); object-fit: cover; }
.gallery-card .photo-empty { background: var(--c-surface-mute); }
.gallery-card .caption { display: block; margin-top: var(--sp-2); font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-card:hover .caption { color: var(--c-primary); }
.gallery-card .date { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--c-text-cap); }
.gallery-empty { margin: 0; padding: var(--sp-16) var(--sp-4); border: var(--bd); border-radius: var(--r-xl); text-align: center; color: var(--c-text-mute); }

/* ── 상세: 본문 아래의 이미지 첨부 — 본문(.editor-body)과 같은 폭으로 세로로 잇는다 ── */
.gallery-photos { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 900px; margin: var(--sp-8) 0 0; padding: 0; list-style: none; }
.gallery-photos img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

@media (max-width: 767px) {
  .gallery-grid { grid-template-columns: 1fr; }
}