/* Flexbox 비활성화 - Masonry와 충돌 방지 */
.page-content .row {
  display: block !important; /* flex → block */
  margin: 0 !important;
}

.page-content .col-12 {
  display: block !important; /* flex-item 해제 */
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* justify-content-center 무효화 */
.row.justify-content-center {
  justify-content: unset !important;
}

/* Masonry 컨테이너 Flex 해제 */
.content {
  display: block !important;
}

.content > .row {
  display: block !important;
}

/* Masonry가 float 레이아웃 사용하도록 강제 */
.masonry {
  display: block !important;
  position: relative !important;
}

.masonry::after {
  content: '';
  display: table;
  clear: both;
}

/* align-items stretch 방지 */
.masonry-item {
  align-self: auto !important;
  flex: none !important;
  height: auto !important;
}

/* ========================================
   큰 배너 Container Padding 상쇄
   수정일: 2025-01-24
   ======================================== */

/* 큰 배너(.w-full)는 container padding 무시하고 전체 너비 사용 */
.masonry-item.w-full {
    margin-left: -15px !important;  /* container padding-left 상쇄 */
    margin-right: -15px !important; /* container padding-right 상쇄 */
    width: calc(100% + 30px) !important; /* 100% + (padding 15px * 2) */
    padding: 0 !important; /* masonry-item 자체 padding 제거 */
}

/* 큰 배너 내부 모든 요소도 전체 너비 */
.masonry-item.w-full .box-img,
.masonry-item.w-full .carousel,
.masonry-item.w-full .carousel-inner,
.masonry-item.w-full .carousel-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 모바일에서도 동일 적용 */
@media (max-width: 767px) {
    .masonry-item.w-full {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
    }
}

/* PC에서도 동일 적용 */
@media (min-width: 768px) {
    .masonry-item.w-full {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
    }
}