/* ============================================================
   Banner Grid Home - 광고 배너 모음형 메인 페이지
   ============================================================ */

/* --- 페이지 레이아웃: 좌사이드 / 본문 / 우사이드 --- */
.bgrid-page {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 200px;
    gap: 8px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 10px;
}

.bgrid-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.bgrid-side::-webkit-scrollbar { width: 4px; }
.bgrid-side::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }

/* --- 상단/하단 풀폭 띠배너 --- */
.bgrid-strip {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    border-radius: 6px;
    border: 1px solid var(--g200, #e2e8f0);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bgrid-strip:hover { border-color: var(--g300, #cbd5e1); }
.bgrid-strip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.bgrid-strip-top { aspect-ratio: 17 / 1; min-height: 60px; }
.bgrid-strip-bottom { aspect-ratio: 8 / 1; min-height: 90px; }

/* --- 메인 그리드 (1500px+ 6열, 그 이하는 미디어쿼리) --- */
.bgrid-main {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    gap: 6px;
}

/* 3열 변형 (메인 최상단 등) — 항상 3열 유지 + 와이드(2:1) 셀 */
.bgrid-main-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;       /* 1fr 행 무효화 */
}
.bgrid-main-3 .bgrid-cell {
    aspect-ratio: 2 / 1;                    /* 와이드 — 컨테이너 1/3 너비 × 절반 높이 */
}

.bgrid-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    border: 1px solid var(--g200, #e2e8f0);
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease), border-color .2s;
    text-decoration: none;
    color: #fff;
}
.bgrid-cell:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.15); border-color: var(--g300, #cbd5e1); color: #fff; }

.bgrid-hero    { grid-column: span 2; grid-row: span 2; }
.bgrid-wide    { grid-column: span 2; aspect-ratio: 2 / 1; }
.bgrid-tall    { grid-row: span 2; aspect-ratio: 1 / 2; }

/* --- 사이드 세로 배너 --- */
.bgrid-vertical {
    display: block;
    width: 100%;
    aspect-ratio: 10 / 13;     /* 1:1.3 — 사이드 사이즈 200x260에 맞춤 */
    border-radius: 6px;
    border: 1px solid var(--g200, #e2e8f0);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    flex-shrink: 0;             /* sticky 컨테이너에서 자동 축소 방지 */
}
.bgrid-vertical:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); border-color: var(--g300, #cbd5e1); color: #fff; }

/* --- 배너 placeholder (이미지 없을 때) --- */
.bgrid-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    background-image: linear-gradient(135deg, var(--c1, #0ea5e9), var(--c2, #0369a1));
    color: #fff;
    position: relative;
    overflow: hidden;
}
.bgrid-placeholder::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    pointer-events: none;
}
.bgrid-placeholder::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 100px; height: 100px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    pointer-events: none;
}
.bgrid-placeholder .bp-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    opacity: .85;
    text-transform: uppercase;
    z-index: 1;
}
.bgrid-placeholder .bp-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    z-index: 1;
    word-break: keep-all;
}
.bgrid-placeholder .bp-sub {
    font-size: 12px;
    font-weight: 500;
    opacity: .92;
    z-index: 1;
    line-height: 1.4;
}

/* hero/wide는 글자 크게 */
.bgrid-hero .bp-title { font-size: 28px; }
.bgrid-hero .bp-sub { font-size: 14px; }
.bgrid-wide .bp-title { font-size: 22px; }

/* 띠배너 placeholder */
.bgrid-strip .bgrid-placeholder {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}
.bgrid-strip .bp-title { font-size: 18px; }
.bgrid-strip .bp-label { font-size: 12px; }

/* 세로 placeholder */
.bgrid-vertical .bp-title { font-size: 17px; }

/* 이미지 배너 */
.bgrid-cell img,
.bgrid-vertical img,
.bgrid-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* AD 라벨 */
.bgrid-ad-label {
    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;
}

/* 섹션 구분 */
/* 1) section-title이 .bgrid-main 안에 있을 때 첫 행 높이를 auto로 강제 */
.bgrid-main:has(> .bgrid-section-title:first-child) {
    grid-template-rows: auto;
}

.bgrid-section-title {
    grid-column: 1 / -1;
    /* 위: 약간 떨어진 느낌 / 아래: 음수 마진 제거 → 셀과 시각 간격 +3px 증가 */
    margin: 10px 0 0;
    padding: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--g800, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    /* grid-auto-rows: 1fr 영향 무력화 */
    align-self: start;
    min-height: 0;
}
.bgrid-section-title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--primary, #0ea5e9);
    border-radius: 2px;
}
.bgrid-section-title small {
    font-size: 13px;
    font-weight: 500;
    color: var(--g500, #64748b);
    margin-left: 8px;
}


/* --- 반응형 --- */
/* 1200~1499: 사이드는 보이되 본문은 4열로 축소 */
@media (max-width: 1499px) {
    .bgrid-main { grid-template-columns: repeat(4, 1fr); }
}

/* 768~1199: 사이드 숨김, 본문 12열 (셀당 span 4 = 3열 매칭) */
@media (max-width: 1199px) {
    .bgrid-page {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .bgrid-side { display: none; }
    .bgrid-main {
        /* 12열로 두면 마지막 2개 셀을 span 6씩(= 2열 균등)으로 채울 수 있음 */
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: max-content;
    }
    /* 기본 셀: 12/3 = 4칸 (3열 매칭) — hero/wide/tall 제외 */
    .bgrid-main > .bgrid-cell:not(.bgrid-hero):not(.bgrid-wide):not(.bgrid-tall) {
        grid-column: span 4;
    }
    .bgrid-section-title { grid-column: 1 / -1; }
    /* hero: 풀폭 정사각, row span 제거 → 자기 한 행만 차지 */
    .bgrid-hero {
        grid-column: 1 / -1 !important;
        grid-row: auto;
        aspect-ratio: 1 / 1;
    }
    .bgrid-wide { grid-column: 1 / -1 !important; aspect-ratio: 2 / 1; }
    .bgrid-tall { grid-column: span 4 !important; grid-row: span 2; aspect-ratio: 1 / 2; }

    /* ─── 2단 셀 (PHP에서 지정한 셀만 적용) ─── */
    .bgrid-cell-2col {
        grid-column: span 6 !important;     /* 12열 그리드의 절반 = 2단 */
    }
}

/* ════════════════════════════════════════════════════
   모바일 (~767px) — 풀폭 100% 보장 + 3열 그리드 + 스와이프
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ─── 페이지 전체 가로 스크롤 방지 (좌우 흔들림 차단) ───
       overflow-x: clip 은 hidden과 같은 효과지만 sticky positioning과 호환됨 */
    html, body {
        overflow-x: clip !important;
        max-width: 100vw;
    }

    /* 페이지 컨테이너: 좌우 padding 제거 → 진정한 풀폭 100% */
    .bgrid-page {
        padding: 0 !important;
        gap: 4px;
        width: 100%;
        max-width: 100vw;
        overflow-x: clip;
        box-sizing: border-box;
    }
    /* 메인 영역도 폭 강제 100% */
    .bgrid-page > main,
    .bgrid-page > aside {
        max-width: 100%;
        min-width: 0;          /* grid item 자체가 자식 폭 따라 늘어나는 것 방지 */
        overflow-x: clip;
    }

    /* 기본 그리드: 12열 (셀당 span 4 = 3열 매칭), 마지막 2개일 때 span 6씩으로 2열 균등 분할 */
    .bgrid-main {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: max-content;
        gap: 4px;
        padding: 0 6px;
        box-sizing: border-box;
        width: 100%;
    }
    .bgrid-main > .bgrid-cell:not(.bgrid-hero):not(.bgrid-wide):not(.bgrid-tall) {
        grid-column: span 4;
    }
    .bgrid-section-title { grid-column: 1 / -1; }

    /* hero: 풀폭 정사각, row span 제거 */
    .bgrid-hero {
        grid-column: 1 / -1 !important;
        grid-row: auto;
        aspect-ratio: 1 / 1;
    }
    /* 와이드: 풀폭 1단 (2:1) */
    .bgrid-wide {
        grid-column: 1 / -1 !important;
        aspect-ratio: 2 / 1;
    }
    /* tall: 세로 길게 */
    .bgrid-tall { grid-column: span 4 !important; grid-row: span 2; aspect-ratio: 1 / 2; }

    /* .bgrid-cell-2col은 위 1199px 미디어쿼리에서 정의되어 자동 상속됨 */

    /* 띠배너: 화면 끝까지 100% 폭, 모서리 라운드/마진 제거 */
    .bgrid-strip {
        width: 100%;
        margin: 0 0 4px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .bgrid-strip-top    { aspect-ratio: 12 / 1; min-height: 50px; }
    .bgrid-strip-bottom { aspect-ratio: 6 / 1;  min-height: 70px; }

    /* placeholder 텍스트 컴팩트 */
    .bgrid-placeholder { padding: 6px; }
    .bgrid-placeholder .bp-label { font-size: 9px; }
    .bgrid-placeholder .bp-title { font-size: 12px; line-height: 1.2; }
    .bgrid-placeholder .bp-sub   { display: none; }
    .bgrid-hero .bp-title { font-size: 22px; }
    .bgrid-hero .bp-sub   { display: block; font-size: 12px; }
    .bgrid-wide .bp-title { font-size: 17px; }
    .bgrid-wide .bp-sub   { display: block; font-size: 11px; }
    .bgrid-strip .bp-title { font-size: 14px; }
    .bgrid-section-title {
        font-size: 16px;
        padding-left: 6px;        /* 그리드 내부 padding과 시각 정렬 */
        padding-right: 6px;
        margin: 12px 0 4px;
    }
    .bgrid-section-title small { font-size: 11px; }

    /* ──────────────────────────────────────────────
       터치 스와이프형 (모바일 전용)
       - .bgrid-main-3 (최상단 와이드 3개): 자동 적용
       - .bgrid-swipe-mobile 클래스 부여 그리드: 적용
       ────────────────────────────────────────────── */
    .bgrid-main-3,
    .bgrid-swipe-mobile {
        display: flex !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding: 0 8px 4px !important;
        margin: 0 !important;
        width: 100%;
        box-sizing: border-box;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
    }
    .bgrid-main-3::-webkit-scrollbar,
    .bgrid-swipe-mobile::-webkit-scrollbar { display: none; }

    .bgrid-main-3 > .bgrid-cell,
    .bgrid-swipe-mobile > .bgrid-cell {
        flex: 0 0 90%;            /* 한 화면에 1개 + 다음 카드 살짝 보임 */
        scroll-snap-align: center;
        aspect-ratio: 2 / 1;      /* 와이드 셀 */
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0;
    }

    /* 섹션 제목은 스와이프 그리드 안에 두지 않음 */
    .bgrid-swipe-mobile > .bgrid-section-title,
    .bgrid-main-3 > .bgrid-section-title { display: none; }

    /* hero placeholder는 텍스트가 길어 컴팩트 사이즈 보장 */
    .bgrid-hero .bgrid-placeholder { padding: 16px; }
}

@media (max-width: 380px) {
    .bgrid-placeholder { padding: 4px; }
    .bgrid-placeholder .bp-title { font-size: 11px; }
    .bgrid-hero .bp-title { font-size: 18px; }
    .bgrid-wide .bp-title { font-size: 15px; }
    .bgrid-section-title { font-size: 15px; }
}