/* 광고 슬롯 레이아웃 전용 — CLS 방지 min-height 예약 (컴포넌트·카드 스타일 금지) */

/* =========================================================
   광고 슬롯 기본 스타일
   ========================================================= */
.ad-slot {
  display: block;
  overflow: hidden;
  text-align: center;
  background-color: var(--color-ad-bg);
  border: 1px dashed var(--color-ad-border);
  border-radius: var(--radius-md);

  /* 빈 슬롯 레이블 — 실제 광고 로드 후 숨김 */
  color: var(--color-ad-text);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-widest);

  /* 레이아웃 이동 방지: 광고 로드 전 공간 확보 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 광고가 로드되면 배경·테두리 제거 */
.ad-slot.is-loaded {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

/* =========================================================
   슬롯 종류별 크기 — CLS 방지 min-height 예약
   ========================================================= */

/* 상단 배너 — 페이지 상단, 히어로 아래 */
.ad-slot--top {
  width: 100%;
  min-height: 100px;
  margin-block: 8px 24px;
}

/* 결과 하단 — 계산 결과 직후 삽입 */
.ad-slot--post-result {
  width: 100%;
  min-height: 250px;
  margin-block: 24px;
}

/* 페이지 하단 — 푸터 직전 */
.ad-slot--bottom {
  width: 100%;
  min-height: 250px;
  margin-block: 32px 0;
}

/* 사이드바 — 300×600 하프 페이지 광고 */
.ad-slot--sidebar {
  width: 300px;
  height: 600px;
  min-height: 600px;
  position: sticky;
  top: 80px; /* 헤더 높이 + 여백 */
  margin-inline: auto;
}

/* 리더보드 — 728×90, 전체 너비 */
.ad-slot--leaderboard {
  width: 100%;
  min-height: 90px;
  margin-block: 16px;
}

/* =========================================================
   반응형 — 모바일 전용 슬롯 제어
   ========================================================= */

/* 데스크탑에서 모바일 전용 슬롯 숨김 */
@media (min-width: 1024px) {
  .ad-slot--mobile-only {
    display: none;
  }
}

/* 모바일에서 사이드바 슬롯 숨김 */
@media (max-width: 1023px) {
  .ad-slot--sidebar {
    display: none;
  }
}

/* =========================================================
   접근성 — 광고 슬롯 레이블 (스크린 리더 안내)
   ========================================================= */
.ad-slot__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}