@charset "UTF-8";
/* ============================================================
   NEWNEEK 클론 — pages/main.css
   메인 페이지
   Bricks 변환 시 → Frontpage 템플릿 (포스트 그리드 = Loop Grid)
   ============================================================ */

.main {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
}

.main__inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  padding-top: var(--sp-5);
  padding-bottom: var(--page-pb);
}

/* 섹션 공통 래퍼: 컨테이너 폭 + 좌우 패딩 (패딩은 항상 유지) */
.main__section {
  width: 100%;
  padding-inline: var(--container-pad);
}

/* ---------- AD 배너 영역 ---------- */
.ad-strip {
  width: 100%;
  border-bottom: 1px solid var(--border-light);
  padding-block: var(--sp-5);
}

.ad-strip .ad-banner {
  max-width: var(--container);
  margin-inline: auto;
}

.ad-strip--gradient {
  border-bottom: 0;
}

/* ---------- 피처드 + 포스트 그리드 ---------- */
.home-top {
  width: 100%;
  max-width: var(--container);
  padding-inline: var(--container-pad);
  margin-bottom: -8px;
}

@media (min-width: 640px) {
  .home-top {
    margin-bottom: -32px;
  }
}

.home-top__feature {
  margin-bottom: var(--sp-8);
}

/* LOOP-GRID: 메인 포스트 그리드
   Elementor: Loop Grid (쿼리: 포스트, 컬럼 lg 4 / md 2 / 모바일 1) */
.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6) var(--sp-7);
  margin-top: var(--sp-5);
}

@media (min-width: 768px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .home-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-7);
    row-gap: var(--sp-8);
    margin-top: var(--sp-8);
  }
}