/* ============================================================
   페이지 광고 - 가장자리 sticky 세로 배너 + 광고주 모집 placeholder
   ============================================================ */

/* ---------- 정사각 6셀 그리드 광고 (list/search/category 상하단) ---------- */
.ad-grid-banner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin: 16px 0;
}
.ad-grid-cell {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}
.ad-grid-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    color: inherit;
}
.ad-grid-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ad-grid-cell-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
}

/* 광고주 모집 placeholder (빈 셀) — 색상은 inline style 의 --c1, --c2 로 다양화 */
.ad-grid-cell.ad-grid-recruit {
    color: #fff;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42)),
        linear-gradient(135deg, var(--c1, #0ea5e9), var(--c2, #0369a1));
    border-color: transparent;
}
.ad-grid-cell.ad-grid-recruit:hover {
    filter: brightness(1.08);
    color: #fff;
}
.ad-grid-recruit-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
}
.ad-grid-recruit-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    background: rgba(255,255,255,.22);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.3);
    margin-bottom: 8px;
}
.ad-grid-recruit-inner i {
    font-size: 26px;
    opacity: .95;
    margin-bottom: 4px;
}
.ad-grid-recruit-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.ad-grid-recruit-area {
    font-size: 10px;
    opacity: .85;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ad-grid-recruit-cta {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.35);
    padding: 4px 9px;
    border-radius: 999px;
}

/* 모바일/태블릿: 셀 수 축소 */
@media (max-width: 991px) {
    .ad-grid-banner { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ad-grid-recruit-inner i { font-size: 22px; }
    .ad-grid-recruit-title  { font-size: 12px; }
}
@media (max-width: 576px) {
    .ad-grid-banner { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ---------- 상단/하단 가로 배너 가운데 정렬 강제 ----------
   style.css 의 옛 `.ad-banner-wrap { margin: 16px 0 }` 가 브라우저 캐시에 남아 있으면
   .container 의 `margin: 0 auto` 가 덮여 배너가 좌측으로 치우치는 문제가 발생.
   캐시 무관하게 강제로 가운데 정렬되도록 !important 오버라이드.
   ============================================================ */
.ad-banner-wrap.container,
.ad-banner-wrap.container-fluid,
.ad-banner-wrap.container-sm,
.ad-banner-wrap.container-md,
.ad-banner-wrap.container-lg,
.ad-banner-wrap.container-xl,
.ad-banner-wrap.container-xxl {
    margin-left:  auto !important;
    margin-right: auto !important;
}

/* ============================================================
   페이지 좌/우 sticky 사이드 광고 — 메인 .bgrid-side 와 동일 구조
   - header/footer 가 main 을 .bp-page-layout(grid) 으로 감쌈
   - grid: 200px | 1fr | 200px
   - .bp-side 는 grid 컬럼 안에서 position: sticky 로 본문과 함께 스크롤되다
     navbar 아래(top:100) 에 도달하면 고정. 본문(.bp-page-content) 이 끝나면
     grid 컬럼도 끝나므로 footer 영역 침범하지 않음.
   ============================================================ */
/* grid 가운데 컬럼을 본문 .container max-width(1320) 와 동일하게 두어
   사이드가 본문 바로 옆에 바짝 붙도록. gap 도 최소화. */
.bp-page-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1320px) 200px;
    gap: 4px;
    max-width: 1728px;
    margin: 0 auto;
    padding: 0;
    align-items: start;
    justify-content: center;
}
.bp-page-content { min-width: 0; }

.bp-side {
    position: sticky;
    top: 100px;                       /* navbar 바로 아래 */
    align-self: start;
    /* 상단 배너(.container.mt-3 = 16px) 와 같은 라인에서 시작하도록 padding-top */
    padding-top: 16px;
    /* 메인 사이드처럼 자체 스크롤바 없음 — viewport 밖은 그대로 잘림 */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 사이드 안의 각 배너 셀 (200x260, 10:13 — 메인 .bgrid-vertical 과 동일) */
.bp-side .page-edge-ad-item {
    display: block;
    width: 100%;
    aspect-ratio: 10 / 13;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: #fff;
    position: relative;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}
.bp-side .page-edge-ad-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    color: #fff;
}
.bp-side .page-edge-ad-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-edge-ad-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: .04em;
    z-index: 2;
}

/* 가장자리 광고주 모집 placeholder — 200x260 셀에 맞춤. 색상은 inline --c1/--c2 */
.page-edge-recruit {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42)),
        linear-gradient(135deg, var(--c1, #0ea5e9), var(--c2, #0369a1));
    color: #fff;
    text-align: center;
}
.page-edge-recruit .per-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    background: rgba(255,255,255,.22);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.3);
    align-self: flex-start;
}
.page-edge-recruit .per-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 4px 0;
}
.page-edge-recruit .per-mid i {
    font-size: 28px;
    opacity: .95;
}
.page-edge-recruit .per-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.page-edge-recruit .per-sub {
    font-size: 10px;
    opacity: .85;
    font-weight: 500;
}
.page-edge-recruit .per-cta {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.35);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* 좁은 화면(<1500px) 에서는 사이드 컬럼 숨김 → 본문이 풀폭 차지 */
@media (max-width: 1499px) {
    .bp-page-layout {
        grid-template-columns: 1fr;
        padding: 0;
        max-width: none;
    }
    .bp-side { display: none; }
}

/* ============================================================
   광고주 모집 인라인 placeholder
   (renderAdBanner($slot, $class, $limit, true|'vertical') 사용 시)
   ============================================================ */

/* ---------- 가로 띠배너 형태 — 색상은 inline style --c1/--c2 로 슬롯별 다르게 ---------- */
.ad-recruit-banner.ad-recruit-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)),
        linear-gradient(135deg, var(--c1, #0ea5e9), var(--c2, #0369a1));
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    min-height: 70px;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.ad-recruit-banner.ad-recruit-horizontal:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    color: #fff;
    filter: brightness(1.06);
}
.ad-recruit-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.ad-recruit-info .ad-recruit-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    background: rgba(255,255,255,.22);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.3);
}
.ad-recruit-info .ad-recruit-area {
    font-size: 12px;
    font-weight: 600;
    opacity: .92;
}
.ad-recruit-info .ad-recruit-title {
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ad-recruit-banner .ad-recruit-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.35);
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
    color: #fff;
    flex-shrink: 0;
}

/* ---------- 세로 형태 (사이드바 inline) — 색상은 inline style --c1/--c2 ---------- */
.ad-recruit-banner.ad-recruit-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42)),
        linear-gradient(135deg, var(--c1, #0ea5e9), var(--c2, #0369a1));
    color: #fff;
    border-radius: 8px;
    padding: 18px 14px;
    min-height: 250px;
    text-align: center;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.ad-recruit-banner.ad-recruit-vertical:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    color: #fff;
}
.ad-recruit-vertical .ad-recruit-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    background: rgba(255,255,255,.22);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.3);
    align-self: flex-start;
}
.ad-recruit-vertical .ad-recruit-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ad-recruit-vertical .ad-recruit-mid i {
    font-size: 32px;
    opacity: .95;
}
.ad-recruit-vertical .ad-recruit-title {
    font-size: 16px;
    font-weight: 800;
}
.ad-recruit-vertical .ad-recruit-area {
    font-size: 11px;
    opacity: .85;
    font-weight: 500;
}
.ad-recruit-vertical .ad-recruit-cta {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.35);
    padding: 6px 12px;
    border-radius: 999px;
}

/* ---------- 모바일 반응형 ---------- */
@media (max-width: 768px) {
    .ad-recruit-banner.ad-recruit-horizontal {
        padding: 10px 14px;
        min-height: 56px;
        flex-wrap: wrap;
    }
    .ad-recruit-info .ad-recruit-title { font-size: 13px; }
    .ad-recruit-info .ad-recruit-area  { font-size: 11px; }
    .ad-recruit-banner .ad-recruit-cta { font-size: 11px; padding: 5px 10px; }
}

@media (max-width: 380px) {
    .ad-recruit-banner.ad-recruit-horizontal { padding: 8px 12px; }
    .ad-recruit-info .ad-recruit-title { font-size: 12px; }
}