@charset "utf-8";

/* ===========================
   PRICE GALLERY
=========================== */

.market-price-wrap{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    max-width:1500px;
    margin:60px auto;
    padding:0 20px;
}

.market-item{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #ececec;
    box-shadow:0 8px 24px rgba(0,0,0,.05);
    transition:.35s;
}

.market-item:hover{
    transform:translateY(-8px);
    border-color:#2f9e44;
    box-shadow:0 20px 45px rgba(0,0,0,.14);
}

/* 링크 */

.market-link{
    display:block;
    text-decoration:none;
}

/* 이미지 */

.thumb{
    position:relative;
    overflow:hidden;
    height:430px;
    background:#f5f5f5;
}

.thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:top center;

    display:block;

    transition:.5s;

}

.market-item:hover .thumb img{

    transform:scale(1.08);

}

/* 검은 오버레이 */

.thumb-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.38);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.35s;

}

.market-item:hover .thumb-overlay{

    opacity:1;

}

.zoom-icon{

    font-size:40px;

    color:#fff;

    margin-bottom:12px;

}

.zoom-text{

    color:#fff;

    font-size:17px;

    font-weight:600;

    letter-spacing:.5px;

}

/* 내용 */

.content{

    padding:22px;

}

.title{

    font-size:20px;

    font-weight:700;

    color:#222;

    line-height:1.4;

    text-align:center;

}

.market-item:hover .title{

    color:#2f9e44;

}

/* NEW */

.badge-new{

    display:inline-block;

    margin-left:8px;

    background:#2f9e44;

    color:#fff;

    font-size:11px;

    padding:4px 8px;

    border-radius:30px;

    vertical-align:middle;

}

/* 날짜 */

.date{

    margin-top:12px;

    text-align:center;

    color:#888;

    font-size:13px;

    letter-spacing:1px;

}

/* 라이트박스 */

#price-lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

    padding:40px;

}

#price-lightbox.active{

    display:flex;

}

#price-lightbox img{

    max-width:95%;

    max-height:95%;

    border-radius:8px;

    box-shadow:0 15px 50px rgba(0,0,0,.45);

}

.close-lightbox{

    position:absolute;

    top:30px;

    right:40px;

    color:#fff;

    font-size:44px;

    cursor:pointer;

    user-select:none;

}

/* 등장 애니메이션 */

.fade-up{

    opacity:0;

    transform:translateY(30px);

    animation:fadeUp .7s forwards;

}

.market-item:nth-child(2){

    animation-delay:.1s;

}

.market-item:nth-child(3){

    animation-delay:.2s;

}

.market-item:nth-child(4){

    animation-delay:.3s;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* 모바일 */

@media (max-width:768px){

    .market-price-wrap{

        grid-template-columns:repeat(2,1fr);

        gap:16px;

        padding:0;

        margin:30px auto;

    }

    .thumb{

        height:160px;

    }

    .content{

        padding:14px;

    }

    .title{

        font-size:15px;

    }

    .date{

        font-size:11px;

    }

    .zoom-icon{

        font-size:28px;

    }

    .zoom-text{

        font-size:13px;

    }

}