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

   배치 원칙 (기획서 6-A · 9장)
   · 검색창, 학교 점수 히어로, 랭킹 1위 주변에는 두지 않는다.
   · 콘텐츠를 확인한 뒤 자연스럽게 보이는 중간·하단에만 둔다.
   ========================================================== */

.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 var(--line-hover);
  background: repeating-linear-gradient(45deg, var(--surface) 0 10px, var(--surface-2) 10px 20px);
  color: var(--ink-4); font-size: 12px;
}
.ad::before { content: "광고"; position: absolute; top: 7px; left: 12px; font-size: 11px; font-weight: 700; color: var(--ink-4); }
.ad strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink-3); }
/* .wrap 과 같은 요소에 붙으므로 padding 단축 속성을 쓰면 좌우 여백이 사라진다 */
.ad-row { padding-top: 8px; padding-bottom: 8px; }
@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; }