@charset "utf-8";

html,
body {
    background-color: #000 !important;
}

/* 슬라이더 닷 기본색 — darkMode(검은 배경)에선 검정 닷이 안 보이므로 흰색으로 (활성색 --keyColor은 유지) */
.slick-dots li button:before {
    background-color: #fff;
}

/* #contentWrap 베이스·반응형은 common.css로 이관(공통). 물건발견 태블릿 margin-top만 아래 오버라이드. */

/* #tagList 라인 베이스(래퍼·태그칩 스크롤·.tag)는 common.css로 이관. 아래는 물건발견 특이사항만. */

/* 카테고리 탭(.tagCate) 다크모드 오버라이드 — common.css의 검정 텍스트/언더라인을 흰색으로 (item.css는 물건발견에서만 로드) */
#tagList .tagCate .cate {
    color: #fff;
}
#tagList .tagCate .cate:after {
    background-color: #fff;
}

/* 물건발견 */
#itemDscv {
    margin-top: 30px;
}

#itemDscv .itemCardList {
    position: relative;
    /* Masonry absolute 배치를 위한 기준 */
    width: 100%;
    display: block;
    /* Masonry의 absolute 배치와 충돌 방지 */
}

#itemDscv .itemCard {
    width: 33.333%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    /* 레이아웃 관련 속성(width, height 등)을 제외하여 Masonry 계산 오류 방지 */
    transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
    overflow: hidden;
    cursor: pointer;
}

#itemDscv .cardImg {
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 20px;
    flex: 1;
    overflow: hidden;
}

/* 반응형 <img> (background-image 대체) — 컨테이너 채움, 오버레이 아래 */
#itemDscv .cardImg .coverImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease-in-out;
    z-index: 0;
}
/* 호버 시 이미지 줌 — 메인 물건발견과 동일 (0.6s ease-in-out, scale 1.05) */
#itemDscv .itemCard:hover .cardImg .coverImg {
    transform: scale(1.05);
}

#itemDscv .cardImg:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
}

#itemDscv .thumbBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
}

#itemDscv .thumb {
    width: 25%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 20px;
    display: block;
}

#itemDscv .thumbBox .more {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--keyColor);
    font-size: 14px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 100vh;
    z-index: 2;
}

/* 상하 배치 카드 (높이 50%) */
#itemDscv .itemCard.half {
    aspect-ratio: 2 / 1;
    flex-direction: row;
}

#itemDscv .itemCard.reverse {
    flex-direction: row-reverse;
}

#itemDscv .itemCard.half .cardImg {
    width: 50%;
    height: 100%;
    flex-grow: 1;
    /* thumbBox가 없을 때 가용 공간을 꽉 채우도록 설정 */
}

#itemDscv .itemCard.half .thumbBox {
    width: 50%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

#itemDscv .itemCard.half .thumbBox .thumb {
    width: 50%;
}

/* 공통 텍스트 스타일 */
#itemDscv .itemCard .tagBox {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; /* linkArea(z-index:1)보다 위 — 태그 클릭이 카드 전체 링크에 가로채이지 않게 */
}

#itemDscv .itemCard .cardImg .linkArea {
    position: absolute;
    inset: 0;
    z-index: 1;
}

#itemDscv .itemCard .linkBox {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* 카드 호버 시 화살표 버튼 색상 반전 (검정bg·흰화살표 → 흰bg·검정화살표) */
#itemDscv .itemCard .linkBox .link {
    transition: background-color 0.2s ease-in-out;
}
#itemDscv .itemCard:hover .linkBox .link {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M14.7997 0C15.4649 0 16 0.534916 16 1.19981V13.1979C16 13.8628 15.4649 14.3978 14.7997 14.3978C14.1345 14.3978 13.5993 13.8628 13.5993 13.1979V4.09436L2.04619 15.6476C1.57606 16.1175 0.81585 16.1175 0.350723 15.6476C-0.114404 15.1776 -0.119405 14.4177 0.350723 13.9528L11.9039 2.40462H2.79639C2.13121 2.40462 1.59606 1.86971 1.59606 1.20481C1.59606 0.539916 2.13121 0.00499914 2.79639 0.00499914H14.7997V0Z'/%3E%3C/svg%3E%0A");
}

#itemDscv .itemCard .textWrap {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}

#itemDscv .itemCard .textWrap h2 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    word-break: keep-all;
}

#itemDscv .itemCard .textWrap p {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*
Wide Desktop greater than 1600px — 4열
*/
@media (min-width: 1601px) {
    #itemDscv .itemCard { width: 25%; }
}

/*
Desktop Device Less than 1280px or greater than 1024px
*/
@media all and (min-width:1024px) and (max-width:1280px) {
    #itemDscv .itemCard { width: 50%; }
}

/*
Tablet Device Less than 1023px or greater than 768px
*/
@media all and (min-width:768px) and (max-width:1023px) {

    #itemDscv .itemCard { width: 50%; }
}

/*
Mobile Device Less than 768px
*/
@media all and (max-width:767px) {
    #itemDscv {
        margin-top: 30px;
    }

    /* #tagList 음수마진(-40, PC 패딩 기준)이 모바일 패딩(15)보다 커서 가로 오버플로 → -15로 보정 */
    #tagList {
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
        padding: 5px 15px;
    }

    #itemDscv .itemCard {
        width: 100%;
        margin-bottom: 20px;
        /* 모바일 수직 간격 */
    }

    #itemDscv .itemCard .textWrap h2 {
        font-size: 16px;
        color: #fff;
        font-weight: 600;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #itemDscv .itemCard .textWrap p {
        font-size: 13px;
    }
}
/* === 색상 베리에이션 +N 팝업 === */
#itemDscv .thumbBox .more.variantMore {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#itemDscv .thumbBox .more.variantMore:hover {
    background-color: rgba(0, 0, 0, 1);
}

/* 무한 스크롤 센티넬 — 보이지 않는 1px 트리거(masonry 그리드 밖, x-intersect) */
.itemLoadMore {
    height: 1px;
}

/* 빈 목록 메시지 — 물건발견은 다크 배경이라 공통 .emptyState보다 밝은 회색 */
#itemDscv .emptyState {
    color: #ccc;
}

.variantPopup {
    background: #fff;
    color: #111;
    padding: 32px;
    border-radius: 16px;
    width: min(720px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
}

.variantPopup h3 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.variantPopup .variantGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.variantPopup .variantItem {
    display: block;
    text-decoration: none;
    color: inherit;
}

.variantPopup .variantItem figure {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #f5f5f5;
    border-radius: 12px;
    margin: 0 0 8px;
}

.variantPopup .variantItem .colorName {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

.variantPopup .variantItem .colorChip {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .variantPopup {
        padding: 24px 20px;
    }
    .variantPopup .variantGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

/* Fancybox 6는 inline 콘텐츠 요소에 .f-html 클래스를 직접 부여하고,
   base.css의 `.f-html { padding:0 !important }`가 .variantPopup 자체 패딩을 덮어쓰며,
   Fancybox 자동 사이징이 인라인 width를 잡아 width:720 제약도 풀린다.
   변형 팝업 컨테이너(mainClass=variantFancybox) 스코프로 의도한 패딩/폭을 복구. */
.variantFancybox .variantPopup {
    padding: 32px !important;
    width: min(720px, 92vw) !important;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .variantFancybox .variantPopup {
        padding: 24px 20px !important;
    }
}
@media all and (max-width:767px) {

    #tagList {
        width: calc(100% + 30px);
        margin-top: 15px;
        margin-left: -15px;
        margin-right: -15px;
        padding: 5px 15px;
    }
}