/* ===========================================================================
 * 광고 플랫폼 v2 — 슬롯 스타일 (트랙1~4). 조건부 로드(슬롯 있는 페이지에서만 enqueue).
 * responsive_exact: 규격(width/height)·reserve(min-height)는 서버 nonce <style>(size_profile
 *   × layout_variant 미디어쿼리)가 .rl-ad-sized / slot에 지정. JS는 검증·잠금·collapse만.
 * §4.12.D: 광고는 가산 레이어. 컨테이너에 "고정 장식성" height/border/box-shadow 금지.
 *   margin-top(카드 리듬)은 허용 — collapse 시 JS가 display:none으로 제거하고, off(ineligible)면
 *   슬롯 자체가 미렌더라 고아 간격이 남지 않기 때문. 토큰만 사용, raw hex·임의 px 금지.
 * =========================================================================== */

/* 광고 컨테이너 — 폭 중앙 정렬. 높이는 CSS(reserve)·JS(잠금/collapse) 제어. */
.rl-ad-slot {
  display: block;
  margin-inline: auto;
  text-align: center;
}

/* no-fill collapse 모션 — 보이던 광고가 빈 채로 사라질 때 아래 콘텐츠가 팍 튀는 점프를 짧게 완화.
   런타임(rl-ad-runtime _collapseAnimated)이 height를 px→0으로 전이시키고 transitionend에 display:none 확정.
   보이기 전 no-fill·reduced-motion은 즉시 collapse(이 클래스 미부여). 길게(>200ms) 끌면 빈 영역만 오래 보이므로 micro(150ms). */
.rl-ad-collapsing {
  overflow: hidden;
  transition: height var(--rl-dur-micro) var(--rl-ease-out),
              margin var(--rl-dur-micro) var(--rl-ease-out),
              opacity var(--rl-dur-micro) var(--rl-ease-out);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rl-ad-collapsing { transition: none; }
}

/* 실제 사이즈 박스(<ins>/placeholder) — 고정 width이므로 block 중앙 정렬(text-align만으론 block 미적용). */
.rl-ad-sized {
  display: block;
  margin-inline: auto;
}

/* display 슬롯 — 위 카드와의 그룹 간격(§group-spacing 24px). "아래 요소가 위 gap 소유" 리듬에 맞춤.
 * collapse=display:none / off=미렌더라 광고 없을 때 이 간격은 남지 않는다. */
.rl-ad-slot--display {
  margin-top: var(--rl-sp-6);
}

/* 진행화면(모의시험·오답노트·빠른학습 = question variant) 버튼↔광고 간격 32px(sp-7).
 * 홈(home variant)은 기본 24px 유지. off/collapse 시 margin도 함께 제거(§4.12.D). */
.rl-ad-slot--display[data-rl-ad-variant="question"] {
  margin-top: var(--rl-sp-7);
}

/* 랜딩 stagger 분리는 마크업의 .rl-stagger-skip 클래스 + page-shell.css 단일 출처가 처리
 * (애니메이션·nth-child 카운트 모두 제외). 여기 별도 규칙 불필요. */

/* in_feed 컨트롤러(.rl-ad-feed) — 광고가 아니라 삽입 설정 캐리어. rl-ad-feed.js만 읽음. 절대 미표시. */
.rl-ad-feed { display: none; }

/* in_feed 광고 슬롯 — 피드 사이에 광고 렌더 영역 '그 자체'만 노출. 외부 카드 wrapper·별도 "광고" 라벨 없음
 *   (네이티브 fluid는 AdSense 유닛이 자체 프레이밍·표기). 탐색형 피드라 별도 블록으로 분리하지 않고 리듬 안에 녹임 —
 *   추가 margin 없이 피드 카드와 동일 간격(컨테이너 flex gap)을 그대로 사용. 높이는 광고 내용이 결정(고정 미부여).
 *   collapse 시 슬롯 inline display:none(런타임 _collapseFully)이 flex gap까지 회수 → 고아 없음. */
.rl-ad-slot--in_feed {
  width: 100%;
}
/* 디스플레이 인피드 배너(mock live/records 피드) — 상하 시험지 카드와 14px(sp-4) 간격.
   피드 컨테이너 flex gap(sp-2=8)에 margin으로 차액(6)을 더해 net 14. 네이티브 인피드(card gap 8 유지)는 미적용. */
.rl-ad-slot--in_feed[data-rl-ad-type="display_infeed"] {
  margin-block: calc(var(--rl-sp-4) - var(--rl-sp-2));
}
/* 인피드 placeholder(local) — 광고 렌더 영역 그 자체(네이티브=풀폭·높이 JS inline, display_infeed=320×100 JS inline). */
.rl-ad-ph--feed { width: 100%; }

/* placeholder provider 박스 — local·stg·harness 전용(prod 미도달, §4.12.D placeholder 금지 예외).
 * 크기는 서버 생성 CSS(.rl-ad-sized)가 지정. 내부 테스트 표식임이 보이도록 점선 박스 + 미세 톤. */
.rl-ad-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  background: var(--rl-surface-2);
  border: 1px dashed var(--rl-line-2);
  border-radius: var(--rl-r-sm);
  color: var(--rl-text-3);
  font-size: var(--rl-fs-micro);
}