/* Figma 와이어프레임 (node 302-20842) 구현
   - 캔버스: 1440 x 1024, 배경 흰색
   - 카드: 112x112 썸네일(Gray/600 #B0B3BA) + 10px 아래 "제목"
   - 열 간격 200px, 행 간격 91px, 3열, 가운데 정렬
   - 제목: Pretendard SemiBold 18px, black, center */

:root {
  --thumb-size: 112px;
  --thumb-color: #b0b3ba; /* Gray/600 */
  --col-gap: 200px;
  --row-gap: 91px;
  --title-gap: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff;
  color: #000000;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wireframe {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 140px 24px 72px;
}

/* 그리드 폭에 맞춰 세로로 쌓는 컨테이너 (뷰포트 중앙 정렬) */
.content {
  width: max-content;
  max-width: 100%;
}

.contact {
  margin-top: 48px;
  margin-bottom: 56px;
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  text-align: left;
}

.contact a {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact a:hover {
  opacity: 0.6;
}

.gallery {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, var(--thumb-size));
  column-gap: var(--col-gap);
  row-gap: var(--row-gap);
  justify-content: center;
  align-content: start;
}

.card {
  width: var(--thumb-size);
  /* 펼쳐지며 나타나는 애니메이션 초기 상태 */
  opacity: 0;
  transform: translateY(24px) scale(0.9);
  transform-origin: center top;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.card {
  cursor: pointer;
}

.card__thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  background: var(--thumb-color);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* 호버 시 썸네일이 살짝 커지기 */
.card:hover .card__thumb {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .card__thumb,
  .card__img {
    transition: none;
  }
  .card:hover .card__thumb,
  .card:hover .card__img {
    transform: none;
  }
}

.card__title {
  margin: var(--title-gap) 0 0;
  font-size: 12px;
  font-weight: 500; /* Medium */
  line-height: 1.35;
  text-align: center;
  color: #000000;
  word-break: break-word;
}

/* 화면이 좁아지면 열 간격을 줄이고 열 수를 자연스럽게 축소 */
@media (max-width: 900px) {
  :root {
    --col-gap: 80px;
    --row-gap: 60px;
  }
}

@media (max-width: 560px) {
  .gallery {
    grid-template-columns: repeat(2, var(--thumb-size));
  }
  :root {
    --col-gap: 48px;
    --row-gap: 48px;
  }
}

@media (max-width: 320px) {
  .gallery {
    grid-template-columns: repeat(1, var(--thumb-size));
  }
}