/* =========================================================
   MOIGO 커뮤니티 (theme/08) - 보조 CSS
   - 본문은 Tailwind utility 중심. 여기서는 grid 핵심구조 / 반응형 분기 /
     swiper 보정 / 라인클램프 등 예외 보조만 둔다.
   - Tailwind browser CDN의 arbitrary grid / 단일 1fr 파싱 이슈를 피하기 위해
     주요 grid는 minmax(0,1fr) 명시 클래스로 작성한다.
   ========================================================= */

:root { font-size: 16px; }

/* 가로 overflow 방지 (원본은 min-width:1200px 비반응형이었으나 작업본은 반응형) */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------------------------------------------------------
   본문 레이아웃: 좌(메인) + 우(aside 235px)
   원본 #container(930) + #aside(235) 구조를 반응형으로 재구성
   --------------------------------------------------------- */
.board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .board-layout {
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 1.5rem;
    align-items: start;
  }
}

/* aside: 모바일에서는 본문 흐름 안, PC에서는 우측 고정폭 */
.aside-col { min-width: 0; }

/* ---------------------------------------------------------
   상단 3컬럼 게시판 (자유게시판/질문답변/공지사항)
   --------------------------------------------------------- */
.board-row-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .board-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .board-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 640~1023 사이에서 3번째(공지) 카드는 한 줄 전체 차지 방지를 위해 자연스러운 흐름 유지 */

/* ---------------------------------------------------------
   하단 2컬럼 게시판
   --------------------------------------------------------- */
.board-row-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .board-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* ---------------------------------------------------------
   푸터 그리드 (원본 .ft_cnt width:25%)
   --------------------------------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 480px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------
   Swiper(hot-slide) 보정
   - 슬라이드 폭/개수는 JS slidesPerView로 제어
   - Swiper가 강제하는 display:block 위 flex 카드 정렬 보정
   --------------------------------------------------------- */
.hot-slide .swiper-slide { height: auto; }
.hot-slide .swiper-slide > a { height: 100%; display: flex; flex-direction: column; }

/* pagination dots */
.hot-pagination .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: 9999px;
  background: #cbd5e1; opacity: 1; transition: all .25s ease; cursor: pointer;
}
.hot-pagination .swiper-pagination-bullet-active {
  width: 22px; background: #3a8afd; border-radius: 9999px;
}

/* ---------------------------------------------------------
   라인 클램프 (CDN 환경에서 안정적으로 보장)
   --------------------------------------------------------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 자식 min-width 0 안전장치 (CDN grid 폭발 방지) */
.board-layout > *,
.board-row-3 > *,
.board-row-2 > *,
.gallery-grid > *,
.footer-grid > *,
.swiper-slide { min-width: 0; }

/* 전체메뉴 패널이 열렸을 때 body 스크롤 잠금 */
body.menu-open { overflow: hidden; }

/* 검색 input 자동완성 배경 보정(다크) */
#hd input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #2c2c2c inset;
  caret-color: #fff;
}

/* ---------------------------------------------------------
   푸터 패밀리사이트/관련기관 셀렉트박스 (다크 배경 화살표 가시성)
   --------------------------------------------------------- */
.family-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23dcdcdc'%3E%3Cpath d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
}
.family-select option { color: #1f2937; background: #fff; }
/* 280/320 좁은 폭에서 최소폭 강제로 인한 overflow 방지 */
@media (max-width: 360px) {
  .family-select { min-width: 0; width: 100%; }
}

/* ---------------------------------------------------------
   진입 레이어 팝업: 모바일에서 본문 스크롤 잠금은 menu-open 재사용 없이
   팝업 자체가 스크롤(overflow-y-auto)되므로 별도 보정 최소화
   --------------------------------------------------------- */
#popupLayer { -webkit-overflow-scrolling: touch; }