@charset "utf-8";

/* ------------------------------------------------------------------
   Harulogs 애드센스 광고 슬롯 스타일
   슬롯 정의·렌더는 includes/ads.php 담당. 여기는 배치와 여백만 다룬다.
   ------------------------------------------------------------------ */

/* 공통 컨테이너
   광고는 비동기 로드라 로드 전 높이가 0이면 콘텐츠가 튄다(CLS).
   --hl-ad-min-h 는 includes/ads.php 의 슬롯 설정(min_height)이 주입한다. */
.hl-ad {
    display: block;
    width: 100%;
    min-height: var(--hl-ad-min-h, 250px);
    margin: 2rem 0;
    overflow: hidden;
    text-align: center;
}

.hl-ad .adsbygoogle { width: 100%; }

/* 인쇄 시에는 광고를 숨긴다 */
@media print {
    .hl-ad { display: none !important; }
}

/* A 기사 본문 시작 — 위쪽 메타/언어 안내 배지와 충분히 떨어뜨린다 */
.hl-ad--article-top { margin: 2rem 0 2rem; }

/* B 인아티클 — 문단 사이에 끼므로 위아래 여백을 넉넉히 */
.hl-ad--article-middle { margin: 2.5rem 0; }

/* C 기사 본문 끝 (관련 글 위) */
.hl-ad--article-end { margin: 3rem 0 2rem; }

/* E 댓글 영역 위 — 바로 위 "댓글 작성하기" 버튼과 오클릭이 나지 않도록 크게 띄운다 */
.hl-ad--comment-top { margin: 3rem 0 2.5rem; }

/* D·G 사이드바
   sticky 는 목차(TOC) 하나만 쓴다(common.scss 의 .widget.toc).
   광고는 static 이며 마크업상 목차보다 "위"에 놓인다 — 아래에 두면 고정된
   목차 밑으로 파고들어 겹치고, 둘을 묶어 함께 sticky 시키면 덩어리 높이가
   뷰포트를 넘겨(목차 274px + 광고 600px) sticky 자체가 동작하지 않는다.
   기사 옆 사이드바는 수천 px 로 이어지므로 static 이어도 노출은 충분하다.
   위쪽 여백은 다른 위젯과 같은 리듬으로 common.scss 의
   `main aside .widget { margin-top: 1.5rem }` 이 담당한다.
   (애드센스 정책상 광고를 잘라내면 안 되므로 높이 제한은 두지 않는다) */
.hl-ad--sidebar { margin: 0; }

@media (max-width: 991.98px) {
    /* 모바일에서는 사이드바가 본문 아래로 내려오므로 본문과의 간격을 다시 준다.
       예약 높이는 여기서 건드리지 않는다 — includes/ads.php 의 min_height 가
       데스크톱·모바일 공통 280px 라 --hl-ad-min-h 를 그대로 쓰면 된다. */
    .hl-ad--sidebar { margin: 1.5rem 0 0; }
}

/* F 블로그 목록 중간
   글 카드와 비슷한 리듬을 유지하되, 글로 오인해 클릭하지 않도록
   점선 테두리 + 옅은 배경으로 명확히 구분한다. */
.hl-ad--list-inline {
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
}

/* H 메인 첫 카테고리 섹션 뒤 */
.hl-ad--home-section { margin: 0 0 3rem; }

/* I 메인 하단 (푸터 직전) */
.hl-ad--home-bottom { margin: 1rem 0 3rem; }