@charset "utf-8";

/*
    평택점 메인배너 테스트 CSS

    원본 참고:
    - /ons/main/main_bnr.css

    유지보수 기준:
    - 이 파일은 /Barog/branch-B/pyeongtaek/popup/popup.html 전용입니다.
    - 원본 /ons/main/main_bnr.css는 직접 수정하지 않습니다.
    - 원본 구조를 쉽게 비교할 수 있도록 .ons_mainBanner 구조를 유지합니다.
    - 지점별 충돌 방지는 .branchMainBanner, .branchMainBanner--pyeongtaek class로 처리합니다.

    지점별 수정 가능:
    - .branchMainBanner--pyeongtaek 하위 스타일
    - 배너 높이, 텍스트 위치, 모바일 높이

    수정 금지:
    - mainBnrSwiper, swiper-pagination-main 같은 메인 페이지 전용 class 재사용
    - .mainBnrSwiper 직접 재정의
    - .swiper 전역 재정의
*/

.branchMainBanner {
    margin-bottom: 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    align-content: center;
    flex-wrap: wrap;
}

.branchMainBanner .bannerCont {
    width: 100%;
}

.branchMainBanner .bannerCont ul {
    margin: 0;
    padding: 0;
}

.branchMainBanner .bannerCont ul li {
    width: 100%;
}

.branchMainBanner .bannerCont ul li a {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

.branchMainBanner .bannerCont ul li .bnr_img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
}

.branchMainBanner .bannerCont ul li .bnr_img img {
    display: block;
    width: 100%;
}

/* 배너매니저가 동적으로 생성하는 iframe과 래퍼가 마우스 입력을 받지 않게 합니다. */
.branchMainBanner .branchMainBanner__nonInteractive,
.branchMainBanner .branchMainBanner__nonInteractive * {
    pointer-events: none !important;
}

/*
    배너매니저 iframe 영상 보정

    관리 기준:
    - 정적 iframe 코드 자체는 수정하지 않습니다.
    - iframe의 inline width/height를 모바일에서 반응형으로 덮어씁니다.
    - iframe을 한 번 더 감싸도 중앙 정렬이 유지되도록 wrapper 선택자를 넓게 잡습니다.
    - 500x568 영상 비율은 유지하되, 화면 폭이 좁으면 100% 폭으로 줄어듭니다.

    수정 가능:
    - .bnr_img max-width: 영상 원본 기준 폭
    - aspect-ratio: 영상 원본 비율

    수정 금지:
    - iframe src, YouTube 파라미터, branchMainBanner__media 구조
*/
.branchMainBanner .bannerCont ul li .bnr_img .branchMainBanner__media {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    aspect-ratio: 500 / 568;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
}

.branchMainBanner .bannerCont ul li .bnr_img .branchMainBanner__media iframe {
    display: block;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0;
    transform: none !important;
}

/*
    fallback:
    - 기존 배너매니저에 inline style wrapper로 입력된 iframe을 위한 보정입니다.
    - 신규 영상 배너는 branchMainBanner__media 구조를 우선 사용합니다.
*/
.branchMainBanner .bannerCont ul li .bnr_img > div,
.branchMainBanner .bannerCont ul li .bnr_img div[style*="overflow: hidden"] {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    aspect-ratio: 500 / 568;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
}

.branchMainBanner .bannerCont ul li .bnr_img iframe {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0;
    transform-origin: center center;
    transform: translate(-50%, -50%);
}

.branchMainBanner .bannerCont ul li .bnr_img .branchMainBanner__media iframe {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

@media (max-width: 767px) {
    .branchMainBanner .bannerCont ul li .bnr_img {
        width: 100%;
        max-width: 100%;
    }

    .branchMainBanner .bannerCont ul li .bnr_img > div,
    .branchMainBanner .bannerCont ul li .bnr_img div[style*="overflow: hidden"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .branchMainBanner .bannerCont ul li .bnr_img .branchMainBanner__media {
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
        모바일 YouTube iframe 강제 중앙 보정

        이유:
        - YouTube iframe 내부 영상 크롭은 외부 CSS로 직접 제어할 수 없습니다.
        - 대신 iframe 자체를 더 크게 만든 뒤 중앙 기준으로 잘라 모바일에서 치우쳐 보이는 현상을 줄입니다.

        조정 방법:
        - 아직 오른쪽/왼쪽으로 치우치면 width/height 값을 118% ~ 135% 사이에서 조정합니다.
        - 기본값은 안정성을 위해 128%로 둡니다.
    */
    .branchMainBanner .bannerCont ul li .bnr_img iframe {
        width: 128% !important;
        height: 128% !important;
        max-width: none !important;
        transform: translate(-50%, -50%);
    }

    .branchMainBanner .bannerCont ul li .bnr_img .branchMainBanner__media iframe {
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }
}

.branchMainBanner .bannerCont ul li .bnr_txt {
    position: absolute;
    left: 0;
    bottom: 12%;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: var(--mono-ff);
    opacity: 0;
    transition: opacity 1.5s .3s, transform 1.5s .3s;
    transform: translateY(20px);
}

.branchMainBanner .bannerCont ul li .bnr_txt h3 {
    margin: 0 0 8px;
    font-size: clamp(12px, 4vw, 14px);
    font-weight: 400;
}

.branchMainBanner .bannerCont ul li .bnr_txt h1 {
    margin: 0;
    font-size: clamp(22px, 3.4vw, 36px);
    line-height: 1.2;
    font-weight: 600;
}

.branchMainBanner .bannerCont ul li.swiper-slide-active .bnr_txt {
    opacity: 1;
    transform: translateY(0);
}

.branchMainBanner .swiper-pagination {
    position: static;
    width: 100%;
    margin-top: 12px;
    transform: none;
}

.branchMainBanner .swiper-pagination-bullet {
    background: var(--point-color-primary);
}

.branchMainBanner .swiper-pagination-bullet-active {
    width: 54px;
    border-radius: 3px;
    background: var(--point-color-primary);
}

@media (max-width: 767px) {
    .branchMainBanner {
        --swiper-pagination-bullet-horizontal-gap: 2px;
    }
}
/* Branch-B hardcoded visibility adapter */
.branchMainBanner .swiper-pagination[hidden] {
    display: none !important;
}