/**
 * ads.css — AdSense 유닛 공통 표현 계층
 *
 * [RFC-AdSense-UX-V1] 상단 배너 전면 제거 → in-feed / in-article / multiplex 3계층.
 *
 * 설계 원칙
 *  1. 높이는 "실제 서빙 사이즈"에 맞춰 예약한다. (기존 min-height:90px 는 250~336px 광고를
 *     받으면서 오히려 200px 점프를 만들었다 — CLS 방지 실패.)
 *  2. 미충전(unfilled)은 ads.js 가 .is-empty 를 붙이고 여기서 완전히 collapse 한다.
 *     차단기 사용자/재고 없음 상황에서 빈 박스가 남지 않는다.
 *  3. "광고" 라벨을 항상 표기해 도구 카드(.menu-card)와 시각적으로 분리한다.
 *     파스텔 카드 사이에 무라벨 광고가 끼면 오클릭 → 무효 트래픽 리스크.
 *  4. 색은 전부 테마 토큰. 다크모드에서 흰 판이 통째로 뜨지 않게 한다.
 */

.gy-ad {
    --gy-ad-reserve: 280px;

    display: block;
    width: 100%;
    max-width: 970px;
    margin: 32px auto;
    padding: 10px 12px 12px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    /* 로드 전 높이 예약 — 실제 유닛 높이에 근접시켜 레이아웃 시프트를 흡수 */
    min-height: var(--gy-ad-reserve);
    transition: background-color 0.3s ease, border-color 0.3s ease, min-height 0.2s ease;
}

/* 라벨 — 작고 낮은 대비. 콘텐츠로 오인되지 않을 정도만. */
.gy-ad__label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: left;
    opacity: 0.75;
}

.gy-ad__ins {
    display: block;
    width: 100%;
    min-height: 0;
}

/* 배치별 예약 높이 — AdSense 가 각 유닛 타입에서 흔히 서빙하는 높이 기준 */
.gy-ad--infeed    { --gy-ad-reserve: 300px; }
.gy-ad--inarticle { --gy-ad-reserve: 280px; }
.gy-ad--multiplex { --gy-ad-reserve: 360px; max-width: 1100px; }
.gy-ad--bottom    { --gy-ad-reserve: 120px; }

/* 충전 완료 — 예약 높이를 풀어 실제 크리에이티브 높이를 따른다 */
.gy-ad.is-filled {
    min-height: 0;
}

/* 미충전 / 차단 / 광고 OFF — 흔적 없이 접는다 */
.gy-ad.is-empty {
    display: none !important;
}

/* in-feed 는 도구 그리드 흐름 안에 들어가므로 카드 리듬과 간격을 맞춘다 */
.gy-ad--infeed {
    margin-top: 8px;
    margin-bottom: 40px;
}

/* 하단 배너는 푸터 바로 위 — 푸터와 붙지 않게 */
.gy-ad--bottom {
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .gy-ad {
        margin: 24px auto;
        padding: 8px 10px 10px;
        border-radius: 16px;
    }
    .gy-ad--infeed    { --gy-ad-reserve: 280px; }
    .gy-ad--inarticle { --gy-ad-reserve: 260px; }
    .gy-ad--multiplex { --gy-ad-reserve: 480px; }
    .gy-ad--bottom    { --gy-ad-reserve: 100px; }

    /* 우하단 FAB 스택(약 70px)과 겹침 방지 — 기존 .ads-slot-bottom 규칙 승계 */
    .gy-ad--bottom { margin-bottom: 76px; }
}

/* 인쇄 시 광고 제외 */
@media print {
    .gy-ad { display: none !important; }
}