@charset "utf-8";
/* /theme/miracleeat/skin/shop/basic/style2.css */

/* =========================================================
   Miracle Eats - list.10 final set
   ========================================================= */

/* 정렬/보기 영역 */
#sct_sortlst{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 18px;
    margin:0 0 26px;
    border:1px solid rgba(216,202,184,.9);
    border-radius:22px;
    background:#fff;
    box-shadow:0 6px 20px rgba(41,68,58,.04);
}

#sct_sort{
    float:none;
    width:auto;
    flex:1 1 auto;
}

#sct_sort ul{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0;
}

#sct_sort li{
    float:none;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0;
    height:42px;
    line-height:1;
}

#sct_sort li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 16px;
    border:1px solid rgba(41,68,58,.14);
    border-radius:999px;
    background:#fff;
    color:#6a625a;
    font-size:14px;
    font-weight:500;
    line-height:1;
    vertical-align:middle;
    box-sizing:border-box;
    white-space:nowrap;
    transition:all .2s ease;
}

#sct_sort li:first-child a{
    border-left:1px solid rgba(41,68,58,.14);
}

#sct_sort li a:hover,
#sct_sort li a:focus{
    color:#29443a;
    border-color:#29443a;
    background:rgba(41,68,58,.04);
}

#sct_lst{
    float:none;
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    padding:0;
}

#sct_lst li{
    float:none;
}

#sct_lst button{
    width:40px;
    height:40px;
    border:1px solid rgba(41,68,58,.12);
    border-radius:12px;
    background:#fff;
    color:#8b837a;
    font-size:15px;
    transition:all .2s ease;
}

#sct_lst button:hover,
#sct_lst button:focus{
    color:#29443a;
    border-color:#29443a;
    background:rgba(41,68,58,.04);
}

/* 카드 영역 */
.sct_10.miracle-list-row{
    margin:24px -10px 0;
}

/* 바깥 li 테두리 제거 */
.sct_10.miracle-list-row .sct_li{
    margin-bottom:28px;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    padding:0 !important;
}

.sct_10.miracle-list-row .miracle-item-card{
    display:flex;
    flex-direction:column;
    height:100%;
    border:1px solid rgba(216,202,184,.9);
    border-radius:28px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(41,68,58,.05);
    transition:transform .25s ease, box-shadow .25s ease;
}

.sct_10.miracle-list-row .miracle-item-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(41,68,58,.09);
}

/* 썸네일 */
.sct_10.miracle-list-row .sct_img{
    position:relative;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:#efe5d8;
    text-align:center;
}

.sct_10.miracle-list-row .sct_img a,
.sct_10.miracle-list-row .miracle-thumb-link{
    display:block;
    width:100%;
    height:100%;
}

.sct_10.miracle-list-row .sct_img img,
.sct_10.miracle-list-row .sct_img a img{
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover;
    margin:0 !important;
    transition:transform .35s ease;
}

.sct_10.miracle-list-row .miracle-item-card:hover .sct_img img{
    transform:scale(1.04);
}

/* 이미지 위 기존 장바구니 버튼 제거 */
.sct_10.miracle-list-row .sct_btn,
.sct_10.miracle-list-row .list-10-btn,
.sct_10.miracle-list-row .sct_img .sct_cart{
    display:none !important;
}

/* cart layer 숨김 */
.sct_10.miracle-list-row .cart-layer{
    display:none !important;
}

/* 품절 */
.sct_10.miracle-list-row .shop_icon_soldout{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.42);
    color:#fff;
    font-size:18px;
    font-weight:700;
    letter-spacing:.06em;
    line-height:1;
}

.sct_10.miracle-list-row .shop_icon_soldout .soldout_txt{
    color:#fff;
}

/* 상품 아이콘 : 이미지 위 좌측 상단 */
.sct_10.miracle-list-row .sit_icon_li{
    position:absolute;
    top:14px;
    left:14px;
    z-index:4;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
    pointer-events:none;
}

.sct_10.miracle-list-row .sit_icon_li .shop_icon,
.sct_10.miracle-list-row .sit_icon_li .shop_icon_1,
.sct_10.miracle-list-row .sit_icon_li .shop_icon_2,
.sct_10.miracle-list-row .sit_icon_li .shop_icon_3,
.sct_10.miracle-list-row .sit_icon_li .shop_icon_4,
.sct_10.miracle-list-row .sit_icon_li .shop_icon_5,
.sct_10.miracle-list-row .sit_icon_li span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:-0.02em;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    color:#fff;
}

.sct_10.miracle-list-row .sit_icon_li .shop_icon_1{ background:#f2b63d; color:#fff; } /* 추천 */
.sct_10.miracle-list-row .sit_icon_li .shop_icon_2{ background:#ff8a3d; color:#fff; } /* 인기 */
.sct_10.miracle-list-row .sit_icon_li .shop_icon_3{ background:#34b57a; color:#fff; } /* 신규 */
.sct_10.miracle-list-row .sit_icon_li .shop_icon_4{ background:#4f7cff; color:#fff; } /* 할인 */
.sct_10.miracle-list-row .sit_icon_li .shop_icon_5{ background:#ff5f8f; color:#fff; } /* 기타 */

/* 내용 영역 */
.sct_10.miracle-list-row .sct_ct_wrap{
    display:flex;
    flex-direction:column;
    flex:1;
    position:relative;
    padding:22px 22px 20px;
}

.sct_10.miracle-list-row .sct_star{
    margin:0 0 10px;
}

.sct_10.miracle-list-row .sct_id{
    margin:0 0 8px;
    font-size:12px;
    color:#9b9389;
}

.sct_10.miracle-list-row .sct_txt{
    margin:0 0 10px;
    padding:0 0 14px;
    border-bottom:1px solid rgba(216,202,184,.75);
    font-size:22px;
    line-height:1.35;
    font-weight:700;
    letter-spacing:-0.03em;
    color:#2f2a26;
    font-family:'Nanum Myeongjo','Noto Serif KR','Apple SD Gothic Neo',serif;
}

.sct_10.miracle-list-row .sct_txt a{
    color:inherit;
}

.sct_10.miracle-list-row .sct_txt a:hover,
.sct_10.miracle-list-row .sct_txt a:focus{
    color:#29443a;
}

.sct_10.miracle-list-row .sct_basic{
    margin:0 0 14px;
    color:#6a625a;
    font-size:15px;
    line-height:1.7;
}

.sct_10.miracle-list-row .sct_bottom{
    margin-top:auto;
    position:relative;
    min-height:0;
}

.sct_10.miracle-list-row .sct_cost{
    margin:0 0 14px;
    font-size:18px;
    line-height:1.2;
    font-weight:800;
    color:#29443a;
}

.sct_10.miracle-list-row .sct_dict{
    display:block;
    margin-top:5px;
    font-size:13px;
    font-weight:400;
    color:#9a9288;
    text-decoration:line-through;
}

/* 액션 버튼 */
.sct_10.miracle-list-row .sct_action_row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
}

.sct_10.miracle-list-row .btn_cart_main{
    flex:1 1 auto;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:48px;
    padding:0 18px;
    border:1px solid #29443a !important;
    border-radius:999px !important;
    background:#29443a !important;
    color:#fff !important;
    font-size:15px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:none;
    text-indent:0 !important;
    overflow:visible !important;
    white-space:nowrap;
    transition:all .2s ease;
}

.sct_10.miracle-list-row .btn_cart_main:hover,
.sct_10.miracle-list-row .btn_cart_main:focus{
    background:#1f342d !important;
    border-color:#1f342d !important;
    color:#fff !important;
}

.sct_10.miracle-list-row .btn_cart_main i{
    display:inline-block !important;
    font-size:14px;
    color:#fff !important;
}

.sct_10.miracle-list-row .btn_cart_main span{
    display:inline-block !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    text-indent:0 !important;
    font-size:15px;
    line-height:1;
}

.sct_10.miracle-list-row .btn_cart.is-soldout{
    flex:1 1 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:48px;
    padding:0 18px;
    border:1px solid #d8cab8;
    border-radius:999px;
    background:#f3ede3;
    color:#6a625a;
    font-size:15px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.sct_10.miracle-list-row .sct_op_btn{
    position:relative;
    right:auto;
    bottom:auto;
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.sct_10.miracle-list-row .sct_op_btn > button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border:1px solid rgba(41,68,58,.18);
    border-radius:50%;
    background:#fff;
    color:#29443a;
    font-size:17px;
    cursor:pointer;
    transition:all .2s ease;
}

.sct_10.miracle-list-row .sct_op_btn > button:hover,
.sct_10.miracle-list-row .sct_op_btn > button:focus{
    background:rgba(41,68,58,.05);
    color:#29443a;
}

/* sns 팝업 */
.sct_10.miracle-list-row .sct_sns_wrap{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
}

.sct_10.miracle-list-row .sct_sns{
    position:absolute;
    top:50%;
    left:50%;
    width:245px;
    max-height:300px;
    margin-left:-122px;
    margin-top:-150px;
    overflow-y:auto;
    border:1px solid #dde7e9;
    border-radius:8px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    text-align:center;
}

.sct_10.miracle-list-row .sct_sns h3{
    padding:15px;
    border-bottom:1px solid #e8e8e8;
    text-align:left;
    font-size:16px;
}

.sct_10.miracle-list-row .sct_sns a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    margin:20px 5px;
    border-radius:50%;
}

.sct_10.miracle-list-row .sct_sns .share-facebook{
    background:#415b92;
}

.sct_10.miracle-list-row .sct_sns .share-twitter{
    background:#35b3dc;
}

.sct_10.miracle-list-row .sct_sns img{
    width:24px;
    height:auto;
}

.sct_10.miracle-list-row .sct_sns_bg{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.12);
}

.sct_10.miracle-list-row .sct_sns_cls{
    position:absolute;
    top:0;
    right:0;
    padding:12px 15px;
    border:0;
    background:#fff;
    color:#b5b8bb;
    font-size:16px;
    cursor:pointer;
}

/* =========================================================
   Miracle Eats - 상품상세 정보영역 강제 오버라이드
   실제 구조 기준: #sit_inf / #sit_inf_open
========================================================= */

/* 상품정보 li 영역 */
#sit_inf{
    display:block !important;
    margin:20px 0 !important;
    padding:0 !important;
    list-style:none !important;
}

/* 상품정보 설명 영역 */
#sit_inf_explan{
    margin:0 0 16px !important;
    line-height:1.8 !important;
    color:#444 !important;
}

#sit_inf_explan img{
    max-width:100% !important;
    height:auto !important;
}

/* 상품정보 표 */
#sit_inf_open{
    width:100% !important;
    table-layout:fixed !important;
    border:0 !important;
    border-top:1px solid rgba(216,202,184,.9) !important;
    border-collapse:collapse !important;
    background:#fff !important;
}

#sit_inf_open tr{
    background:#fff !important;
}

#sit_inf_open th,
#sit_inf_open td{
    padding:12px 14px !important;
    border-bottom:1px solid #e5e5e5 !important;
    vertical-align:middle !important;
}

/* th 폭 축소 + 2줄 허용 + 아이콘 스타일 */
#sit_inf_open th{
    width:210px !important;
    min-width:210px !important;
    background:#f8f5ef !important;
    color:#29443a !important;
    font-size:14px !important;
    font-weight:normal !important;
    line-height:1.45 !important;
    text-align:left !important;
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
    position:relative !important;
    padding-left:20px !important;
}

/* th 앞 아이콘 */
#sit_inf_open th::before{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:18px !important;
    height:18px !important;
    border-radius:50% !important;
    background:#29443a !important;
    color:#fff !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:700 !important;
}

/* td */
#sit_inf_open td{
    width:auto !important;
    background:#fff !important;
    color:#444 !important;
    font-size:14px !important;
    line-height:1.65 !important;
    word-break:keep-all !important;
}

/* 제목들 정리 */
#sit_inf > h2,
#sit_inf > h3{
    position:absolute !important;
    font-size:0 !important;
    line-height:0 !important;
    overflow:hidden !important;
}

/* =========================================
   태블릿
========================================= */
@media (max-width:1024px){
    #sit_inf_open th{
        width:210px !important;
        min-width:210px !important;
        font-size:13px !important;
        padding-left:38px !important;
    }

    #sit_inf_open th::before{
        left:14px !important;
        width:16px !important;
        height:16px !important;
        font-size:10px !important;
    }

    #sit_inf_open td{
        font-size:13px !important;
    }
}

/* =========================================
   모바일
========================================= */
@media (max-width:767px){
    #sit_inf_open th,
    #sit_inf_open td{
        padding:10px 10px !important;
    }

    #sit_inf_open th{
        width:180px !important;
        min-width:180px !important;
        font-size:12px !important;
        line-height:1.35 !important;
        padding-left:30px !important;
    }

    #sit_inf_open th::before{
        left:10px !important;
        width:14px !important;
        height:14px !important;
        font-size:9px !important;
    }

    #sit_inf_open td{
        font-size:12px !important;
        line-height:1.5 !important;
    }
}

/* =========================================
   작은 모바일
========================================= */
@media (max-width:480px){
    #sit_inf_open th{
        width:180px !important;
        min-width:180px !important;
        font-size:11px !important;
        padding-left:26px !important;
    }

    #sit_inf_open th::before{
        left:8px !important;
        width:12px !important;
        height:12px !important;
        font-size:8px !important;
    }

    #sit_inf_open td{
        font-size:11px !important;
    }
}