/* 팝업 */
#popParent {
    display: none;

    &.pop-parent {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99999;

        .pop {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 40px);
            max-width: 546px;
            display: block;
            background-color: var(--color-beige-300);
            border: 2px solid #000;

            .swiper-container {
                padding: 20px;
                padding-bottom: 52px;

                .swiper {
                    width: 100%;
                    aspect-ratio: 506/410;
                    position: relative;

                    .swiper-wrapper {
                        .swiper-slide {
                            width: 100%;
                            height: 100%;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                background-color: rgba(0, 0, 0, 0.2);
                            }
                        }
                    }

                    @media screen and (min-width: 768px) {
                        .pop-button-prev,
                        .pop-button-next {
                            position: absolute;
                            width: 40px;
                            height: 40px;
                            border-radius: 100%;
                            background: rgba(255, 247, 232, 0.6);
                            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
                            top: 50%;
                            transform: translateY(-50%);
                            z-index: 100;
                            color: #000;

                            i {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 20px;
                            }
                        }

                        .pop-button-prev {
                            left: 4px;

                            i {
                                padding-right: 3px;
                            }
                        }
                        .pop-button-next {
                            right: 4px;

                            i {
                                padding-left: 3px;
                            }
                        }
                    }
                }
            }

            .swiper-pagination {
                bottom: 110px;

                .swiper-pagination-bullet {
                    background: none;
                    border: 1px solid #000;
                    opacity: 1;

                    &.swiper-pagination-bullet-active {
                        background: #000;
                    }
                }

                @media screen and (max-width: 768px) {
                    bottom: 70px;
                }
            }

            .pop-btns {
                width: 100%;
                height: 85px;
                display: flex;
                justify-content: space-between;
                border-top: 2px solid #000;
                font-size: 20px;
                font-weight: 800;

                :where(& > :not(:last-child)) {
                    --tw-divide-x-reverse: 0;
                    border-inline-style: var(--tw-border-style);
                    border-inline-start-width: calc(
                        1px * var(--tw-divide-x-reverse)
                    );
                    border-inline-end-width: 2px;
                }

                label,
                button {
                    width: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    &:hover {
                        background-color: #000;
                        color: #fff;
                    }
                }
            }
        }

        @media screen and (max-width: 768px) {
            .pop {
                .swiper-container {
                    padding-bottom: 44px;

                    .swiper {
                        aspect-ratio: 318/337;
                    }
                }

                .pop-btns {
                    height: 50px;
                    font-size: 14px;
                }
            }
        }
    }
}

/* 커스텀 스타일 */