/***** 푸드앤페이 상품옵션 선택 : 모달 *****/
/**** 공통 ****/
/*** 모달창 딤드(검은 투명 배경) ***/
.modal_layer, .dimmed{
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}
/*** 여백 없는 딤드 ***/
.dimmed{
    padding: 0px;
}
.dnone, .none {
    display: none;
}

/*** 직원호출 모달창, 상세 정보 모달창 딤드(상단 header 노출 + 투명 배경) ***/
.goods_detail_modal_layer,
.call_staff_modal_layer {
    /*background: #000;*/
	/*opacity: 0.4;*/
    width: 100%;
    /* height: calc(100% - 56px); */
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: 480px;
    margin: 0 auto;
}

/**** 모달창 ****/
/*** 전체 ***/
.modal_common,
.modal_alert,
.modal_confirm{
    min-width: 280px;
    width: 100%;
    max-width: 320px;
    min-height: 140px;
    overflow: hidden;
    border-radius: 20px;
    padding: 40px 20px 20px;
    background: #fff;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16);
}
/*** 타이틀 ***/
.modal_common h4{
    margin-bottom: 8px;
    text-align: center;
}
/*** 모달창 문구 ***/
.modal_common :where(p, span, .p3){
    text-align: center;
}
/*** 버튼 영역 ***/
.area_modal_btn{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.area_modal_btn .btn{
    flex: 1;
    font-size: 1.4rem;
}
:where(.modal_confirm, .modal_shared_payment) .area_modal_btn{
    margin: 20px -4px 0;
}
:where(.modal_confirm, .modal_shared_payment) .area_modal_btn .btn{
    margin: 0 4px;
}


/*** 컨펌, 토스트 ***/
.alert_toast{
    width: 100%;
    max-width: 400px;
    min-height: 56px;
    overflow: hidden;
    border-radius: 10px;
    padding: 16px 10px 16px 20px;
    background: #212121cf;
    color: #fff;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16);
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    transition: all 0.5s linear; /* 부드러운 애니메이션 */
    pointer-events: auto; /* 알럿창 클릭 가능하게 */
    /* top: -120%; */
    opacity: 0; /* 초기에는 숨김 */
    animation: slidedown 3s linear infinite;
}
.alert_toast .p3{
    line-height: 2rem;
}
/** 닫기 버튼 **/
.alert_toast .btn_close{
	width: 24px;
    height: 24px;
    border-radius: 4px;
    flex: 0 0 auto;
    /* background: #fff; */
    color: #fff;
    transition: all 0.2s;
}
.alert_toast .btn_close:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: url("/img/website/icon_close_outline_white.svg") center no-repeat;
    background-size: 100%;
    margin: auto;
}
/* 닫기 동작 */
.alert_toast .btn_close:active{
    background: #F2F2F2;
}
/* 알럿 동작 */
.alert_toast.show{
    top: 10px;
    opacity: 1;
}
.alert_toast.none{
    top: -120%;
    opacity: 0;
}
@keyframes slidedown {
    0% {
        opacity: 0;
        top: -120%;
    }
    25% {
        opacity: 1;
        top: 10px;
    }
    80% {
        opacity: 1;
        top: 10px;
    }
    100% {
        opacity: 0;
        top: 10px;
    }
}

/*** 모달창 ***/
.modal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 940px;
    width: 100%;
    height: 100%;
    background: #fff;
    justify-content: center;
}




/*** qr 크게보기 모달창 ***/
.modal_qr_expand{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/** 로고 **/
.modal_qr_expand .area_logo{
    margin-bottom: 20px;
}
.modal_qr_expand :where(.logo, .area_logo span){
    color: #FF8737;
}
/** qr 영역 **/
.wrap_qr_preview{
    width: 100%;
    height: 100%;
    max-width: 276px;
    max-height: 276px;
    overflow: hidden;
    background: url("/img/website/bg_qr_preview.svg") center /100% no-repeat;
    margin: 36px 20px;
    padding: 10px;
}
.wrap_qr_preview .area_qr_code{
    width: 100%;
    height: 100%;
    max-width: 200px;
    max-height: 200px;
}
.wrap_qr_preview img{
    width: 100%;
    height: 100%;
    object-fit: contain; /*이미지 사이즈 맞게 확대*/
}
/** 닫기 버튼 **/
.modal_qr_expand .btn_delete{
    position: absolute;
    top: 20px;
    right: 20px;
}



/*** 포장 알럿창 ***/
.modal_pickup_confirm{
    text-align: center;
}
.modal_pickup_confirm img{
    height: 80px;
    margin: 0 32px 20px 0;
}

/*** 매장 형태 전환 컨펌창 ***/
.od_type_change_confirm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}







/*********** 미니샵에서 사용하던 코드 *******/
/*** 모달창 ***/
.modal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 940px;
    width: 100%;
    height: 100%;
    background: #fff;
    justify-content: center;
}
/** 닫기 버튼 **/
.modal .btn_close{
    position: absolute;
    right: 16px;
    /*top: 16px;
    width: 24px;
    height: 24px; 모바일기기 편의상 터치영역 확대 */
	top: 10px;
	width: 40px;
	height: 35px;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s;
}
.modal .btn_close:after,
.modal .btn_close_round:after{
    width: 20px;
    height: 20px;
    content: "";
    background: url("/img/website/icon_close.png") center no-repeat;
    background-size: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
}
/* 닫기 동작 */
.modal .btn_close:hover, .modal .btn_close:active,
.modal .btn_close_round:hover, .modal .btn_close_round:active{
    background: #F2F2F2;
}

/*** 모달창 - top ***/
.modal_top{
    height: 56px;
    padding: 16px;
    text-align: center;
    align-content: center;
    /* background: #fff; */
}

/*** 모달창 - 탭 메뉴 ***/
/** 탭 메뉴 버튼 **/
.modal_tab{
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 16px;
    border-top: 1px solid #E2E2E2;
    border-bottom: 1px solid #E2E2E2;
    background: #fff;
}
.modal_tab li{
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 24px;
}
.modal_tab li a{
    height: 100%;
    align-content: center;
    font-size: 1.6rem;
    line-height: 1.9rem;
}
/* 동작 */
.modal_tab li:hover a,
.modal_tab li.on a{
    font-weight: bold;
    color: #FF8737;
    transition: all 0.2s;
}
/** 탭 컨텐츠 **/
.modal_tab_box{
    display: none;
    height: calc(100% - 210px);
    padding: 16px 16px 54px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
}
.modal_tab_box img{
    max-width: 100% !important;
    height: auto;
    border-radius: 8px;
}
.modal_tab_box p:not(:last-of-type) img{
    margin-bottom: 16px;
}
/* 동작 */
.modal_tab_box.on{
    display: block;
}

/***** 상품정보 모달창 *****/
/*** 모달창 - table ***/
.modal_table{
    width: 100%;
    margin-top: 12px;
    text-align: left;
}
.modal_table:not(:last-of-type){
    margin-bottom: 16px;
}
.modal_table tr{
    height: 48px;
    border-top: 1px solid #E2E2E2;
    border-bottom: 1px solid #E2E2E2;
}
.modal_table tr th,
.modal_table tr td{
    font-size: 1.4rem;
    line-height: 1.6rem;
    word-break: keep-all;
}
.modal_table tr th{
    width: 240px;
    background: #F9F9F9;
    padding: 16px;
}
.modal_table tr td{
    padding: 16px;
    color: #666;
}

/*** 모달창 - bottom ***/
.modal_bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
/** 키워드 **/
.wrap_goods_keyword{
    padding: 16px;
    margin: -2px;
}
.wrap_goods_keyword .badge_keyword{
    margin: 2px;
}
/** 상품 정보, 구매버튼 **/
.wrap_goods_detail{
    display: flex;
    align-items: flex-end;
    padding: 16px;
    border-top: 1px solid #E2E2E2;
    background: #fff;
}
.wrap_goods_detail img{
    width: 65px;
    height: 65px;
    margin-right: 16px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #E2E2E2;
}
/* 상품 정보 */
.wrap_goods_detail .area_goods_detail_info{
    display: flex;
    align-items: flex-end;
    margin-right: 16px;
}
.wrap_goods_detail .area_goods_detail_info h3{
    margin-bottom: 8px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
/* 구매버튼 */
.wrap_goods_detail .area_goods_button{
    display: flex;
    margin-left: auto;
}
.wrap_goods_detail .area_goods_button button:not(:first-of-type){
    margin-left: 12px;
}



/***** 검색 모달창 *****/
#modal_search{
    /* display: none; */
    z-index: 997;
}
/* 닫기 버튼 */
.modal_search .btn_close{
    position: absolute;
    right: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: all 0.2s;
}
.modal_search .btn_close:after,
.modal_search .btn_close_round:after{
    width: 20px;
    height: 20px;
    content: "";
    background: url("/img/add_icon.png") center no-repeat;
    background-size: 100%;
    transform: translate(-50%, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
}


/***** 이미지 크게보기 모달창 *****/
.modal_img_expand{
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 0;
    min-width: 400px;
}
/** 이미지 영역 **/
.wrap_img_preview{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}
.wrap_img_preview img{
    width: 100%;
    height: 100%;
    object-fit: cover; /*이미지 사이즈 맞게 확대*/
}

/** modal 기본 버튼 **/
.area_modal_btn .btn,
.area_modal_btn .btn_medium,
.area_modal_btn .btn_line{
	min-width: 100px;
	height: 48px;
	font-size: 1.5rem; /* 15px */
	line-height: 2rem; /* 20px */
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s;
}



/***** 반응형 *****/
@media screen and (max-width: 768px){

    /*** 모달창 딤드(검은 투명 배경) ***/
    .modal_layer {
        max-width: none;
    }

    /*** 모달창 - 탭 메뉴 ***/
    /** 탭 메뉴 버튼 **/
    .modal_tab li a{
        font-size: 1.4rem;
        line-height: 1.6rem;
    }
    /** 탭 컨텐츠 **/
    .modal_tab_box{
        height: calc(100% - 266px);
    }

    /***** 상품정보 모달창 *****/
    /*** 모달창 - table ***/
    .modal_table{

    }
    .modal_table tr{
        height: 40px;
    }
    .modal_table tr th,
    .modal_table tr td{
        font-size: 1.3rem;
        line-height: 1.5rem;
    }
    .modal_table tr th{
        width: 120px;
        padding: 8px;
    }
    .modal_table tr td{
        padding: 8px;
    }
    /*** 모달창 - bottom ***/
    /** 상품 정보, 구매버튼 **/
    .wrap_goods_detail{
        flex-direction: column;
        align-items: flex-start;
    }
    /** 상품 정보, 구매버튼 **/
    /* 상품 정보 */
    .wrap_goods_detail .area_goods_detail_info{
        margin-right: unset;
    }
    /* 구매버튼 */
    .wrap_goods_detail .area_goods_button{
        width: 100%;
        margin-left: unset;
    }
    .wrap_goods_detail button{
        margin-left: unset;
        min-width: 40px !important;
        width: 100%;
        height: 40px !important;
        margin-top: 16px;
    }


    /***** 검색 모달창 *****/
    /** 검색어 입력창 **/
    .area_input_search{
        display: none;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        width: calc(100% - 32px);
        z-index: 998;
    }
    .area_input_search .input_search{
        height: 32px;
        width: calc(100% - 40px);
        margin-right: 8px;
    }
    /* 검색 버튼 */
    .area_input_search .btn_search,
    .btn_search{
        /* position: unset; */
        width: 32px;
        height: 32px;
        border: 1px solid #E2E2E2;
        border-radius: 4px;
        background: url("/img/website/icon_search.png") no-repeat center / 20px #fff;
    }
    .btn_search:hover{
        opacity: 0.7;
        transition: all 0.4s;
    }
    /* 검색 버튼 - 모바일 */
    .btn_search_mobile{
        /* display: block; */
    }
}