/* 기본 스타일 설정 */
*, ::after, ::before {
    box-sizing: border-box;
}

#cpb-popup-banners {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    z-index: 9999;
    overflow: auto; /* 스크롤 가능하도록 설정 */
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
}

.cpb-popup-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 calc(50% - 20px); /* 두 개씩 한 줄에 표시 */
    max-width: calc(50% - 20px);
    margin: 10px;
    height: auto; /* 높이를 자동으로 조정 */
    transition: none;
    visibility: hidden; /* 초기 상태에서 배너 숨김 */
}

.cpb-popup-banner.loaded {
    visibility: visible; /* 로드된 이후 배너 표시 */
}

.cpb-popup-banner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain; /* 이미지 비율 유지 */
}

.cpb-controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: black;
    padding: 5px 10px;
    color: white;
    font-size: 12px;
}

.cpb-controls button {
    background: black;
    border: none;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
}

.cpb-controls button:hover {
    background: #333;
}

/* PC 및 태블릿 해상도 조정 */
@media (min-width: 769px) {
    .cpb-popup-banner {
        flex: 0 1 200px; /* 기본 너비 설정 */
        max-width: 200px;
        height: 300px;
    }
}

/* 모바일 해상도 조정 */
@media (max-width: 768px) {
    #cpb-popup-banners {
        justify-content: center; /* 가로 중앙 정렬 유지 */
        align-items: center; /* 세로 중앙 정렬 유지 */
        padding: 5px; /* 컨테이너 패딩 조정 */
    }

    .cpb-popup-banner {
        flex: 0 1 calc(50% - 10px); /* 두 개씩 한 줄에 표시 (간격 감소) */
        max-width: calc(50% - 10px);
        margin: 5px; /* 수직과 수평 간격 모두 5px로 축소 */
        height: auto; /* 높이를 자동으로 조정 */
    }

    .cpb-popup-banner img {
        width: 100%;
        height: auto;
        object-fit: contain; /* 이미지 비율 유지 */
    }

    .cpb-controls {
        font-size: 10px;
        padding: 4px 8px; /* 패딩 약간 조정 */
    }

    .cpb-controls button {
        font-size: 10px;
        padding: 4px 6px;
    }
}

/* 초소형 모바일 화면 조정 */
@media (max-width: 376px) and (max-height: 668px) {
    #cpb-popup-banners {
        padding: 5px; /* 초소형 화면에서도 간격 조정 */
    }

    .cpb-popup-banner {
        flex: 0 1 calc(50% - 10px); /* 두 개씩 한 줄에 표시 */
        max-width: calc(50% - 10px);
        margin: 5px; /* 수직과 수평 간격 모두 5px로 축소 */
    }

    .cpb-controls {
        font-size: 8px;
        padding: 3px 6px; /* 패딩 조정 */
    }

    .cpb-controls button {
        font-size: 8px;
        padding: 3px 5px;
    }
}