/* =============================================================================
   gallery.css — 포토갤러리 페이지 전용 (참고 시안형 카드 그리드)
   역할: 사진 + 카테고리 배지 + 제목·날짜 정보 바를 가진 카드 레이아웃.
   의존: tokens/base/components 이후 로드. 카드 마크업은 gallery.js 렌더와 짝.
   주의: 카테고리 배지 색은 여기(.cat-badge)에서만 관리 — 새 카테고리 추가 시
         config.js·validate.js와 함께 이 색 표도 갱신할 것.
   ========================================================================== */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

/* ===== 사진 카드 ===== */
.photo-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: box-shadow var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-ui) ease;
}
.photo-card:hover { box-shadow: var(--shadow-card); border-color: var(--line-strong); transform: translateY(-4px); }
.photo-card .img-frame { aspect-ratio: 4 / 3; position: relative; display: block; }
.photo-card .img-frame img { transition: transform var(--dur-hover) ease; }
.photo-card:hover .img-frame img { transform: scale(1.03); }

/* 카테고리 배지 — 사진 좌상단, 카테고리마다 브랜드 파생색 */
.cat-badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: var(--fs-1);
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(24, 43, 49, 0.85); /* 기본(기타) — 딥 페트롤 */
}
.cat-badge[data-cat="스탠다드"] { background: var(--wine); }
.cat-badge[data-cat="라틴"]     { background: var(--gold); }
.cat-badge[data-cat="브레이킹"] { background: #12262B; }
.cat-badge[data-cat="생활체육"] { background: #3E8E88; } /* 틸 라이트 파생 */

/* 정보 바 — 제목·날짜 좌측, 확대 아이콘 우측 */
.photo-card figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line);
}
.photo-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 긴 캡션은 말줄임 — 카드 높이 통일 */
}
.photo-card time { display: block; color: var(--ink-soft); font-size: var(--fs-1); margin-top: 2px; }
.photo-card .expand {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: var(--paper-warm);
  transition: background var(--dur-ui) ease, color var(--dur-ui) ease;
}
.photo-card:hover .expand { background: var(--wine); color: #FFFFFF; }

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
  .photo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .photo-grid { grid-template-columns: 1fr; }
}