/* 상세 쿠폰팩 css */

/*#detail_coupon_btn_wrap #detcpn_btn_cpn_dw.off { border: 1px solid #333; color: #333; background-color: #fff; }*/

#detail-coupon-bottom-button { position: fixed; bottom: 90px; z-index: 1; width: 100%; max-width: 480px; left: 50%; transform: translateX(-50%); justify-content: center; display: none; }
#detail-coupon-bottom-button > button {padding-bottom: 2px; width: 90%; height: 48px; background: #fff; border: 2px solid #FF6B00; border-radius: 5px; display: flex; margin: 0 auto; font-size: 17px; color: #ff6b00; justify-content: center; align-items: center; font-weight: bold; cursor: pointer; }
#detail-coupon-bottom-button > button > img { width: 23px; margin-left: 3px; }
#detail-coupon-bottom-button.focus { outline: none; }

#detail-coupon-layer-mask.on { display: block; }
#detail-coupon-layer-mask { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5000; background-color: rgba(0, 0, 0, 0.5); display: none; }

.detail-coupon-bottom .container.on .detail-coupon-popup.on { bottom: 0; z-index: 5001; top: auto; height: auto; /*left: 50%; transform: translateX(-50%);*/ border: 0; }
.detail-coupon-bottom .container .detail-coupon-popup {position: fixed; width: 100%; max-width: 480px; bottom: -100%; transition: bottom 0.5s; z-index: 100; left: 50%; transform: translateX(-50%); /*background-color: #fff;*/ /*border-top-right-radius: 16px; border-top-left-radius: 16px;*/ /*overflow: hidden;*/ }
.detail-coupon-bottom .container .detail-coupon-popup.on .content { opacity: 1; margin: 0 auto; max-width: 480px; height: 100%; width: 100%; }
.detail-coupon-bottom .container .detail-coupon-popup .content { display: block; max-height: 70vh; overflow: auto; }

.detail-coupon-bottom .container .detail-coupon-popup .content .content-wrap { background-color: #fff; position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; border-top-right-radius: 10px; border-top-left-radius: 10px; overflow: hidden; box-sizing: border-box; }
.detail-coupon-bottom .container .detail-coupon-popup .content .content-wrap .title { width: 100%; display: flex; padding: 20px; border-bottom: 1px solid #eee; font-size: 14px; box-sizing: border-box; }

.detail-coupon-bottom .coupon_box_wrap { padding: 20px; display: flex; flex-direction: column; will-change: transform; box-sizing: border-box; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item { margin-bottom: 15px; padding: 20px; border: 1px solid #ff6c00; border-radius: 7px; display: flex; flex-flow: column; position: relative; box-shadow: 0 2px 6px 0 rgb(1 1 1 / 20%); box-sizing: border-box; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item .cpn_name { color: #ff6c00; font-size: 16px; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item .cpn_price { font-weight: bold; font-size: 30px; margin-top: 10px; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item .cpn_extras { font-size: 13px; color: #666; margin-top: 10px; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item .cpn_btn_wrap { position: absolute; right: 20px; top: 20px; text-align: right; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item:last-child { margin-bottom: 20px; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item img.btn_item_dw { width: 44px; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item .cpn_btn_wrap .cpn_done { font-weight: bold; font-size: 16px; color: #666; }

.detail-coupon-bottom .coupon_box_wrap .coupon_item.off { /*color:#888;*/ border: 1px solid #ccc; }
.detail-coupon-bottom .coupon_box_wrap .coupon_item.off .cpn_name { /*color: #888;*/ }

.detail-coupon-bottom .detail-coupon-popup .btn_cpn_all_wrap { position:relative; width: 100%; height: 72px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 10px 20px; background-color: #fff; box-shadow: 5px 5px 20px -6px #555555; }
.detail-coupon-bottom .detail-coupon-popup .btn_cpn_all { display: block; height: 48px; border: 1px solid #FF6B00; border-radius: 5px; background: #fff; color: #FF6B00; font-weight: normal; font-size: 16px; cursor: pointer; }
.detail-coupon-bottom .detail-coupon-popup .btn_cpn_all > img { padding-left: 6px; padding-top: 2px; width: 15px; }
.detail-coupon-bottom .detail-coupon-popup .btn_cpn_all { width: 100%; background-color: #FF6B00; color: #fff; display: flex; justify-content: center; align-items: center; }
.detail-coupon-bottom .detail-coupon-popup .btn_cpn_all.off { border: 1px solid #ff6b00; color: #ff6b00; background-color: #fff; }
.detail-coupon-bottom .detail-coupon-popup button:focus { outline: none; }

.detail-coupon-bottom .close2 { position: absolute; top: -25px; right: 15px; color: #fff; }

#detail-coupon-bottom-button a.close {
    background: url(https://img.monfood.co.kr/images/common/btn_close.png) center center no-repeat;
    width: 48px;
    height: 48px;
    background-size: 13px 13px;
    position: absolute;
    top: 0;
    right: 25px;
    z-index: 1;
    display: block;
    cursor: pointer;
}
@media screen and (max-width: 480px) {  /* mo */
    #detail-coupon-bottom-button a.close { right: 20px; }
}


/* 상단 쿠폰 보기 버튼 */
.btn_detail_coupon_down { display: flex; align-items: center; justify-content: center; gap: 2px; color: #FF6b00; border: 1px solid #FF6b00; background-color: #fff1ed; height: 33px; padding: 0 10px; border-radius: 5px; box-sizing: border-box; }
.btn_detail_coupon_down.off { }
.btn_detail_coupon_down > img { width: 14px; }

/* 스켈레톤 기본 스타일 */
.skeleton-button {
    width: 99px; /* 원본 버튼의 글자 길이에 맞춰 적절히 조절 */
    height: 32px;
    background-color: #f2f2f2;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

/* 빛나는 애니메이션 효과 */
.skeleton-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 100%;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        left: -150px;
    }
    100% {
        left: 100%;
    }
}