/* ==========================================================
   components/ad.css — 광고 자리
   승인된 광고 코드를 연결하기 전에는 방문자에게 빈 슬롯을 보여주지 않는다.
   body.ads-ready(광고 연결 후) 또는 body.dev(?dev=1 시안 확인)일 때만 보인다.

   배치 원칙 (기획서 9장)
   · 검색 · 지역 선택 · 랭킹 첫 결과를 광고로 가리지 않는다.
   · 콘텐츠를 확인한 뒤 자연스럽게 보이는 중간 · 하단에만 둔다.
   ========================================================== */

.ad {
  position: relative; max-width: 728px; min-height: 100px; margin: 0 auto;
  display: grid; place-items: center; text-align: center;
  border-radius: 14px; border: 1.5px dashed #D8DDE6;
  background: repeating-linear-gradient(45deg, #FAFBFD 0 10px, #F4F6F9 10px 20px);
  color: #A2AABA; font-size: 12px;
}
.ad::before { content: "광고"; position: absolute; top: 7px; left: 12px; font-size: 11px; font-weight: 700; color: #A9B1BF; }
.ad strong { display: block; font-size: 13px; font-weight: 700; color: #97A0B1; }
.ad-row { padding: 8px 0; }
@media (min-width: 768px) { .ad { min-height: 90px; } }

body:not(.ads-ready):not(.dev) .ad,
body:not(.ads-ready):not(.dev) .ad-row { display: none; }