/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── 낙찰 없는(unfilled) AdSense 슬롯 접기 ─────────────────────────────────
 *
 * 구글은 낙찰이 없으면 ins 에 data-ad-status="unfilled" 를 찍을 뿐 **슬롯을 접어 주지 않는다** -
 * 접는 것은 게시자가 CSS 로 직접 하라는 것이 공식 권장이다. 이 규칙이 없던 동안, push 처리
 * 시점에 구글 스크립트가 응답형 계산으로 ins 에 박아 둔 명시 크기(모바일 실측 ~400px)가 낙찰
 * 없이 그대로 남아, 목록·피드 곳곳에 흰 카드(광고 래퍼의 테두리·배경)만 떠 있었다.
 *
 * .ad-slot 은 광고 래퍼 자신(shared/_ad_unit), .ad-shell 은 **광고만 담는 겉 래퍼**다 -
 * 목록 격자의 줄 차지 칸, 피드의 한 화면 칸, 모달의 구분선+"광고" 라벨 묶음처럼 광고가 접힐 때
 * 함께 사라져야 할 것들이 이 클래스를 단다(광고 말고 다른 내용이 있는 래퍼에는 달지 않는다 -
 * :has 가 래퍼째 숨기므로 다른 내용까지 사라진다).
 *
 * 이 접기 때문에 unfilled 슬롯은 노출 전환 재요청 대상에서도 빠졌다(adsense_controller.js) -
 * 접힌 요소는 다시 "보이게" 될 수 없어 전환 신호 자체가 오지 않고, 재요청하면 새 ins 가 상태
 * 없이 서는 순간 래퍼가 도로 펴져 화면이 출렁인다. 회귀 고정은 adsense_recovery_test.
 *
 * .ad-fallback 은 광고가 접힐 때 그 자리에 대신 서는 하우스 배너다(shared/_ad_unit 의 fallback
 * 옵션 - 광고 래퍼 바로 뒤 형제로 렌더된다). 평소에는 숨어 있다가 unfilled 인 순간에만 나온다.
 * 폴백이 있는 겉 래퍼(.ad-shell)는 접지 않는다 - 접으면 배너까지 함께 사라져 폴백이 설 자리가
 * 없다. 낙찰을 만들 수는 없어도 빈자리를 우리 안내로 채울 수는 있다는 것이 이 폴백의 전부다.
 *
 * **이 규칙이 tailwind/application.css 가 아니라 여기 있는 이유**: 이 파일은 @layer 밖이라
 * Tailwind 의 어떤 레이어보다 세다. 광고 래퍼 중에는 유틸리티로 display 를 받는 것이 있어
 * (피드 한 화면 칸의 flex, 개발 placeholder 의 flex) @layer components 로 옮기면 특이도와
 * 무관하게 utilities 에 져 **접기가 조용히 멈춘다**. 큰글씨 모드 규칙이 tailwind 쪽 파일 맨
 * 아래 @layer 밖에 모여 있는 것도 같은 이유인데, 그쪽은 html.silver 로 묶인 한 덩어리라
 * 전역 규칙인 이것을 끼워 넣을 자리가 아니다. 옮길 일이 생기면 "@layer 밖" 만은 지킬 것. */
.ad-slot:has(> ins.adsbygoogle[data-ad-status="unfilled"]),
.ad-shell:has(ins.adsbygoogle[data-ad-status="unfilled"]):not(:has(.ad-fallback)) {
  display: none;
}

.ad-fallback {
  display: none;
}

.ad-slot:has(> ins.adsbygoogle[data-ad-status="unfilled"]) + .ad-fallback {
  display: block;
}