/* ============================================================
   하우스노트 (theme/12) — 예외 보조 CSS
   본문 퍼블리싱은 Tailwind utility 중심. 여기엔 CDN 한계 보정,
   full-bleed, grid minmax, swiper/faq/x-cloak 보조만 둔다.
   ============================================================ */

/* Alpine x-cloak: 초기 깜빡임 방지 */
[x-cloak] { display: none !important; }

/* ---- full-bleed: area 컨테이너 밖으로 좌우 100vw 배경 확장 ---- */
.full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---- 게시판 그리드: Tailwind CDN의 단일 1fr 함정 회피 ----
   3개 게시판 + 로그인 박스. 자식 min-width:0 으로 overflow 차단 */
.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.board-grid > * { min-width: 0; }

@media (min-width: 768px) {
  .board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .board-grid {
    /* 게시판3 + 로그인 사이드바 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 300px);
    gap: 1.75rem;
  }
}

/* ---- 갤러리 그리드 ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.gallery-grid > * { min-width: 0; }
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

/* ---- 게시판 row 점선 구분 (마지막 제외) ---- */
.board-row + .board-row { padding-top: 0; }

/* ---- 배지 ---- */
.badge-new, .badge-q, .badge-a, .badge-h {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.badge-new { background: #C2703D; }
.badge-q   { background: #3E7C6A; }
.badge-a   { background: #B5ACA2; }
.badge-h   { background: #D14343; width: 17px; height: 17px; }

/* ---- FAQ 아코디언 ---- */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-item.open .faq-a { max-height: 240px; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-q { cursor: pointer; }

/* ---- Swiper 보정: 슬라이드 display 강제 회피 / 높이 정렬 ---- */
.heroSlider .swiper-slide { display: block; height: auto; }
.newsTicker .swiper-slide { display: flex; }
.heroSlider .swiper-pagination-bullet {
  width: 9px; height: 9px; background: #fff; opacity: .45;
}
.heroSlider .swiper-pagination-bullet-active {
  background: #C2703D; opacity: 1; width: 26px; border-radius: 5px;
}

/* ---- 부드러운 스크롤 앵커 (sticky 헤더 오프셋) ---- */
html { scroll-behavior: smooth; }
section[id], [id="community"], [id="gallery"] { scroll-margin-top: 72px; }

/* ---- 모바일 메뉴 오픈 시 body 스크롤 잠금 ---- */
body.nav-open { overflow: hidden; }

/* ---- 갤러리 카드 hover ---- */
.gallery-card img { transition: transform .5s ease; }
.gallery-card:hover img { transform: scale(1.06); }