@charset "utf-8";

.goods-list { display: grid; width: 100%; position: relative; }
.goods-list .item-box { position: relative; cursor: pointer; overflow: hidden; }
.mobile .goods-list { 
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 16px;
    padding: 0px 1rem;
    margin-bottom: 100px;
}
.desktop .goods-list { 
    grid-template-columns: repeat(5, 1fr);
    gap: 50px 16px;
    padding: 0;
}

.goods-list.cols-4 { grid-template-columns: repeat(4, 1fr); }

.mobile .flicking-panel.item-box { width: 43%; margin-right: 15px; }
.desktop .flicking-panel.item-box { width: 21%; margin-right: 24px; }

.item-thumb-box { width: 100%; padding-bottom: 100%; position: relative; overflow: hidden; }
.item-thumb-box img.thumb { border: 1px solid #E5E5E5; border-radius: 5px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; margin: auto; transform: translate(50, 50); -webkit-transform: translate(50, 50); -moz-transform: translate(50, 50); -ms-transform: translate(50, 50); -o-transform: translate(50, 50); }
.item-thumb-box .item-soldout { display: flex; position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 100%; text-align: center; height: 100%; justify-content: center; align-items: center; font-weight: bold; color: #fff; line-height: 1.6666; border-radius: 5px; border: solid 1px #e5e5e5; top: 0; }
.item-thumb-box .sp-mileage-badge { position: absolute; right: 6px; bottom: 6px; width: 30%; max-width: 70px; z-index: 2; pointer-events: none; }

.item-title { 
    width: 100%; 
    white-space: normal; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    color: #202020;
}
.mobile .item-title { font-size: 15px; margin: 10px 0 8px 0; line-height: 20px; max-height: 40px; }
.desktop .item-title { font-size: 16px; margin: 10px 0 8px 0; line-height: 24px; max-height: 48px; }

.item-sub-title { font-weight: bold; width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; font-size: 15px; line-height: 20px; max-height: 40px; margin: 9px 0 6px 0; }
.mobile .item-sub-title { font-size: 16px; margin: 8px 0 8px 0; }
.desktop .item-sub-title { font-size: 17px; margin: 12px 0 8px 0; }

.market-price-box { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-price-box .coupon-discount-label { color: #496cef; letter-spacing: -0.56px;}
.market-price-box .item-market { color: #888888; letter-spacing: -0.56px; text-decoration: line-through; }
.mobile .market-price-box { font-size: 14px; line-height: 16px; margin-bottom: 2px; }
.desktop .market-price-box { font-size: 16px; line-height: 18px; margin-bottom: 2px; }

.mobile .delivery-free { font-size: 13px; line-height: 16px; margin-bottom: 2px; color: #888888; letter-spacing: -1px;}
.desktop .delivery-free { font-size: 15px; line-height: 18px; margin-bottom: 2px; color: #888888; letter-spacing: -1px;}

.price-box { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-box .item-percent { color: #ff2233; font-weight: bold; }
.price-box .item-price { color: #202020; font-weight: bold; }
.mobile .price-box { font-size: 16px; line-height: 20px; }
.desktop .price-box { font-size: 20px; line-height: 24px; }
.coupon-discount-price {color: #202020 !important;}

.item-naver-box { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.mobile .item-naver-box { gap: 3px}
.item-naver { font-size: 14px; line-height: 16px; letter-spacing: -0.56px; color: #1DC800; font-weight: normal; flex-shrink: 0; white-space: nowrap; }
i.icon-naver { margin: 0 !important; font-size: 16px; }
.desktop i.icon-naver { font-size: 18px; }
.item-naver-date { font-size: 12px; line-height: 14px; letter-spacing: -0.56px; color: #999999; font-weight: normal; flex-shrink: 0; white-space: nowrap; }



.goods-list .item-flag-box {
    display: flex;
    align-items: center;
    line-height: 1;
    margin-top: 11px;
    gap: 6px;
}

.goods-list .item-flag-box .goods-label {
    background: #F4F4F4;
    border: 1px solid #F4F4F4;
    border-radius: 1px;
    padding: 2px 6px 3px 6px;
    color: #333333;
    line-height: 1;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
}



.goods-list.wide { display: flex; flex-wrap: wrap; margin-bottom: 60px; }
.desktop .goods-list.wide { gap: 40px; }
.goods-list.wide .item-box { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; grid-template-areas: "left-box right-box" "bottom-box bottom-box"; gap: 10px; }
.mobile .goods-list.wide .item-box { width: 100% !important; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #E5E5E5; }
.mobile .goods-list.wide .item-box:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}
.desktop .goods-list.wide .item-box { width: 550px; flex-basis: 550px; background-color: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 10px; padding: 20px;margin: 0;gap: 20px; }
.desktop .goods-list.wide .item-box:hover { border: 1px solid #126CD5; }
.goods-list.wide .item-thumb-box { grid-area: left-box; padding: 0 !important; position: relative; width: 130px; }
.desktop .goods-list.wide .item-thumb-box { width: 180px; }
.goods-list .ratio-2-3 img.thumb { position: unset; border: 1px solid #E5E5E5; border-radius: 5px; aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.goods-list .ratio-1-1 img.thumb { position: unset; border: 1px solid #E5E5E5; border-radius: 5px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.goods-list.wide .item-text { grid-area: right-box; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; padding: 10px 0; }
.goods-list.wide .item-title { text-align: left; font-weight: bold; font-size: 18px; letter-spacing: -0.36px; color: #333333; margin-top: 0; margin-bottom: 0; }
.mobile .goods-list.wide .item-title { font-size: 16px;  }
.goods-list.wide .price-box { margin-bottom: 4px; }
.goods-list.wide .item-market { margin-bottom: 0; }
.goods-list.wide .bottom-area { grid-area: bottom-box; width: 100%; }

.freezing { position: absolute; top: 1rem; left: 1rem;}
.freezing img { width: 44px; }