@charset "utf-8"; /* ------------------------------------------------------------------ Harulogs 애드센스 광고 슬롯 스타일 슬롯 정의·렌더는 includes/ads.php 담당. 여기는 배치·여백·경계만 다룬다. 색은 전부 _tokens.scss 가 colors.css 로 내보낸 --hl-* 토큰을 쓴다. 하드코딩 금지 — 라이트/다크 두 스코프가 토큰에서 자동으로 갈린다. ------------------------------------------------------------------ */ /* 공통 컨테이너 광고는 비동기 로드라 로드 전 높이가 0이면 콘텐츠가 튄다(CLS). --hl-ad-min-h 는 includes/ads.php 의 슬롯 설정(min_height)이 주입한다. ★ min-height 는 "하한"이다. 컨테이너(.hl-ad)에 상한을 만들거나 잘라내면 애드센스 정책 위반이므로 height 고정도, overflow:hidden 도 쓰지 않는다. (재설계 전에는 overflow:hidden 이 걸려 있었다 — 광고가 컨테이너보다 넓거나 높을 때 잘릴 수 있어 제거했다) ※ 아래 "본문 칼럼 슬롯" 절의 크기 지정은 이 금지와 다르다 — 이미 온 광고를 사후에 자르는 게 아니라, 요청할 크기를 미리 정하는 구글 공식 "수정된 반응형 코드"다(요청 크기 = CSS computed 크기). box-sizing 은 부트스트랩이 border-box 로 잡아 두므로, 라벨·패딩·테두리가 차지하는 만큼을 min-height 에 더해 광고에 돌아갈 공간을 그대로 지킨다. */ .hl-ad { display: block; width: 100%; min-height: calc(var(--hl-ad-min-h, 250px) + 2.75rem); margin: 2rem 0; padding: 0.4rem 0.5rem 0.75rem; text-align: center; /* 경계 — 위아래 헤어라인 + 아주 옅은 톤 차. 상자로 가두지 않고 "본문 흐름을 끊는 띠"로만 읽히게 한다. 다크에서는 흰 광고가 들어와도 띠가 액자 역할을 해 어디부터 광고인지 보인다. */ background: var(--hl-surface-3); border-top: 1px solid var(--hl-border-strong); border-bottom: 1px solid var(--hl-border-strong); } /* 라벨 — 애드센스가 허용하는 표준 표기. "Advertisement" 한 벌로 통일한다(다국어 사이트라 로케일별 문구 분기를 피한다). 작고 낮은 채도로 두어 광고보다 눈에 띄지 않게 한다. */ .hl-ad::before { content: "Advertisement"; display: block; margin-bottom: 0.35rem; font-size: 0.625rem; /* 10px */ line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--hl-text-caption); } .hl-ad .adsbygoogle { width: 100%; max-width: 100%; } /* ------------------------------------------------------------------ 본문 칼럼(사이드바 옆) 슬롯 — A(article-top)·B(article-middle)· C(article-end)·E(comment-top)의 크기를 뷰포트 미디어쿼리로 직접 정한다. 왜: 애드센스 스크립트는 push 시점에 쪽 폭을 재는데, 캐시된 adsbygoogle.js 는 사이드바(.aside 324px)가 배치되기 전에 실행돼 본문 칼럼이 행 전체를 차지한 상태의 폭을 잰다. 1280px 실측 — 최종 본문 폭 728 인데 w=892 로 요청해 892px iframe 이 사이드바를 160px 침범했다. 미디어쿼리 폭은 뷰포트에서 유도되므로 플렉스 배분이 끝나기 전에 재도 같은 값이 나온다. 구글 공식 「반응형 광고 코드 수정 방법」 경로이며, 짝으로 A·C·E 마크업에서 data-ad-format 이 빠진다(includes/ads.php). 폭 산식 (1rem = 16px): 칼럼 콘텐츠 폭 = container-xl 폭 − 컨테이너 좌우 패딩 24 − .content 좌우 패딩 64(2rem×2) + .row 네거티브 마진 24 − .aside 324 − 칼럼 좌우 패딩 24 = container-xl 폭 − 412 폭 = 칼럼 콘텐츠 폭 − .hl-ad 좌우 패딩 16(0.5rem×2) ≥1200px : container-xl 1140 고정 → 728 − 16 = 712px (1280px 실측 일치) ≥1400px : container-xl 1320 고정 → 908 − 16 = 892px (1440px 실측 일치) 992~1199px : container-xl 은 xl(1200) 미만에서 max-width 가 없는 유동 100% 라 칼럼도 뷰포트를 따라 581~787px 로 흐른다(993px 실측 581). 칼럼을 따라가는 calc(100vw−428px) 는 못 쓴다 — 100vw 는 스크롤바를 포함하고 컨테이너 % 폭은 제외라, 클래식 스크롤바 환경에서 15~17px 초과해 침범이 재발한다. 구간 최솟값에서도 안전한 고정폭 532px (= 993px 시점 칼럼 581 − 패딩 16 − 여유 33)를 쓴다. 광고가 칼럼보다 다소 좁아지는 구간이지만(최대 1199px 에서 255px), 넘치는 것보다 낫고 margin auto 로 가운데 정렬된다. 992px 미만은 사이드바가 본문 아래로 내려가 칼럼이 전체 폭이므로 기존 width:100% 를 유지한다(뷰포트에서 바로 유도되는 값이라 측정도 안정적). ※ 첫 구간만 992 가 아니라 993 에서 시작한다 — layout.css 의 @media (max-width: 992px) { main .aside { max-width: fit-content } } 가 부트스트랩의 ≥992 2단 구간과 정확히 992.0px 에서 겹쳐, 그 1px 에서만 사이드바가 fit-content 로 줄고 본문 칼럼이 ~464px 가 된다(실측). 여기서 532px 를 고정하면 이 수정이 잡으려는 침범이 그 지점에서 재발한다. 993 부터 고정하면 (992, 993) 구간은 width:100% 가 자연히 532 를 만들고, 992.0 정확히는 100% 로 안전하게 물러난다. 근본 원인은 layout.css 쪽 경계값(부트스트랩 관례는 991.98px)이며 이 파일에서는 회피만 한다. max-width:none — 위 공통 규칙의 max-width:100% 를 걷어낸다. 남겨두면 computed 폭이 다시 플렉스 컨테이너에 종속돼 측정 시점 문제가 되살아난다. 높이 — data-ad-format 을 제거한 수정 코드(A·C·E)는 CSS computed 크기가 곧 요청 크기라 높이가 필수다. includes/ads.php 의 min_height 가 컨테이너에 주입한 --hl-ad-min-h 를 상속받아 그대로 쓴다(단일 출처 유지). .hl-ad 의 min-height 예약과 정확히 일치해 CLS 도 0 이 된다. 992px 미만에서도 폭은 100% 로 반응형이고 높이만 고정되는데, 이 역시 구글 문서의 공식 예시 형태다("확장 가능한 폭 + 고정 높이"). 인아티클 B 는 fluid 유형이라 format 속성을 유지하고 폭만 고정한다 — fluid 는 주어진 폭에 맞춰 높이를 스스로 정하므로 높이를 주지 않는다. ------------------------------------------------------------------ */ .hl-ad--article-top .adsbygoogle, .hl-ad--article-end .adsbygoogle, .hl-ad--comment-top .adsbygoogle { height: var(--hl-ad-min-h, 280px); } @media (min-width: 993px) { .hl-ad--article-top .adsbygoogle, .hl-ad--article-middle .adsbygoogle, .hl-ad--article-end .adsbygoogle, .hl-ad--comment-top .adsbygoogle { width: 532px; max-width: none; margin-left: auto; margin-right: auto; } } @media (min-width: 1200px) { .hl-ad--article-top .adsbygoogle, .hl-ad--article-middle .adsbygoogle, .hl-ad--article-end .adsbygoogle, .hl-ad--comment-top .adsbygoogle { width: 712px; } } @media (min-width: 1400px) { .hl-ad--article-top .adsbygoogle, .hl-ad--article-middle .adsbygoogle, .hl-ad--article-end .adsbygoogle, .hl-ad--comment-top .adsbygoogle { width: 892px; } } /* 미채움(unfilled) 슬롯 처리 애드센스는 광고를 못 채우면 에 data-ad-status="unfilled" 를 붙이고 자체 인라인 스타일로 display:none 을 건다. 그대로 두면 "Advertisement" 라벨과 테두리만 남은 빈 상자가 된다 — 가장 나쁜 결과라 컨테이너째 접는다. :has() 미지원 브라우저에서는 재설계 전과 같은 상태(빈 예약 공간)로 남는다. */ .hl-ad:has(> ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; } /* 인쇄 시에는 광고를 숨긴다 */ @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; border: 1px solid var(--hl-border-strong); border-radius: 8px; } @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; border: 1px dashed var(--hl-border-strong); border-radius: 0.5rem; } /* H 메인 첫 카테고리 섹션 뒤 */ .hl-ad--home-section { margin: 0 0 3rem; } /* I 메인 하단 (푸터 직전) */ .hl-ad--home-bottom { margin: 1rem 0 3rem; } /* J 다운로드 대기 페이지 상단 (다운로드 카드 아래) 바로 위가 "지금 다운로드" 버튼이라 E(comment-top)와 같은 오클릭 위험이 있다. 이 스킨에서 검증된 버튼-광고 최소 이격 3rem 을 그대로 쓴다. 실제 간격은 카드 아래 패딩(3rem)이 더 얹혀 그보다 넓다. ★ 카운트다운과 다운로드 버튼 사이에는 광고를 넣지 않는다 — 기다리다 누르는 동선 한복판이라 어떤 여백을 줘도 오클릭을 막을 수 없다. */ .hl-ad--download-top { margin: 3rem 0 2.5rem; } /* K 다운로드 대기 페이지 하단 (발췌 본문 · "이어서 읽기" 아래) 아래쪽은 페이지 끝이라 바닥 여백만 짧게 둔다. */ .hl-ad--download-bottom { margin: 2.5rem 0 1rem; }