.masonry-container {
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */  
  min-height: 100vh; /* 뷰포트 전체 높이 */
  background-color: transparent;
  overflow-y: auto;  
  margin-top: 0; /* 기존 여백 제거 */
  box-sizing: border-box;
  z-index: 2;
}

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 유동적인 열 */
  gap: 48px;
  max-width: auto; /* 👉 중앙 정렬 기준 너비 설정 */
  padding: 40px 80px; /* 👉 좌우 여백 확보 */
  margin: 0 auto;     /* 👉 그리드 전체 중앙 정렬 */
  z-index: 2;
}

.masonry-item {
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  margin: 0 auto; /* 아이템 개별 중앙 정렬 */
  padding: 10px; /* 👈 필요 시 추가 */
  border-radius: 20px;  
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  margin-bottom: 16px; /* 👈 이미지 간 여백 추가 */
  padding-bottom: 0;    /* 기존 padding 제거 */
  border-radius: 12px; /* 👈 이 줄 추가 */
}


@media (min-width: 1920px) {
  .masonry {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  }  
  .masonry-item {
    max-width: 500px;
  }
  .masonry-item img {
   border-radius: 12px; /* 👈 이 줄 추가 */
  }
}

@media (max-width: 1920px) {
  .masonry {
    grid-template-columns: repeat(auto-fit, max(400px, 1fr));
  }  
  .masonry-item {
    max-width: 400px;
  }
  .masonry-item img {
    border-radius: 8px; /* 👈 이 줄 추가 */
   }
}

@media (max-width: 1024px) {
  .masonry {
    grid-template-columns: repeat(auto-fit, max(300px, 1fr));
    max-width: 900px;
    padding: 0 5vw; /* 모바일에서도 좌우 여백 유지 */
  }  

  .masonry-item {
    max-width: 300px;
  }
  .masonry-item img {
    border-radius: 4px; /* 👈 이 줄 추가 */
   }
}