/* ─── 전체 레이아웃 ─── */
.layout {
  display: flex;
  flex-wrap: wrap;
  min-height: 80vh;
  margin: 0 auto;
}

/* ─── 좌/우 사이드바 광고 ─── */
.left-ad,
.right-ad {
  width: 400px;
  box-sizing: border-box;
}

/* ─── 중앙 컨텐츠(광고–본문–광고) ─── */
.content {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* 상단 광고 / 본문 / 하단 광고 */
  row-gap: 100px;                      /* 각 영역 사이 100px 간격 */
  padding: 40px 30px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-width: 1200px;                   /* 필요에 따라 조정 */
  margin: 0 auto;                      /* 화면 중앙 고정 */
}

/* ─── 광고 박스 공통 ─── */
.ad-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* 내부 광고 세로 정렬 */
  gap: 10px;                /* 광고 사이 간격 */
  padding: 20px 30px;
  background-color: #fff;
  box-sizing: border-box;
}

/* ─── 중앙 광고(상단/하단) ─── */
.center-ad {
  display: flex;
  justify-content: center;      /* 광고를 가로 중앙 정렬 */
  margin: 20px;                    /* grid row-gap 으로 간격 확보 */
  
  /* ─── Frosted Glass 스타일 ─── */
  padding: 0px;                /* 여유 패딩 */
  background: rgba(255, 255, 255, 0.5);  /* 반투명 흰색 */
  backdrop-filter: blur(10px);           /* 뒤쪽 배경을 10px 흐림 */
  -webkit-backdrop-filter: blur(10px);   /* 사파리 지원 */
  border-radius: 12px;                    /* 모서리 둥글게 */
}
/* ─── (선택) 반응형 조정 ─── */
@media (max-width: 768px) {
  .content {
    padding: 20px;
    row-gap: 50px;
  }
  .left-ad,
  .right-ad {
    width: 100%;             /* 모바일에서 좌우 자동 확장 */
  }
}
/* 모바일에서 왼쪽 광고만 숨기기 */
@media (max-width: 768px) {
  .left-ad,
  .right-ad {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* 중앙 컨텐츠가 전폭을 쓰도록 */
  .content {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}