@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: var(--fs-14);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 100vh;
    z-index: 2;
}

/* 제품 임베드 포스트 카드 — 메인 이미지는 1:1 유지하고 제품 썸네일을 그 아래 붙임(카드 높이 가변).
   (base .itemCard가 1:1 고정이라 썸네일이 있으면 이미지가 0.75:1로 눌리던 것 해소) */
#itemDscv .itemCard.productPost {
    aspect-ratio: auto;
    height: auto;
}
#itemDscv .itemCard.productPost .cardImg {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* 상하 배치 카드 (높이 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;
    /* 채우는 순서: 좌상 → 우상 → 좌하 → 우하 (일반 flex 순서) */
}

#itemDscv .itemCard.half .thumbBox .thumb {
    width: 50%;
}
/* 베리에이션 1개 → 대표이미지 카드와 같은 크기(썸박스 전체 채움) */
#itemDscv .itemCard.half .thumbBox .thumb:only-child {
    width: 100%;
}
/* 빈 타일(2~3개일 때 4칸 채움) — 검정 박스 */
#itemDscv .itemCard.half .thumbBox .thumbEmpty {
    background-color: #000;
}

/* 공통 텍스트 스타일 */
#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: 15px;
    right: 15px;
    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: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 1;
    padding: 0px;
}

#itemDscv .itemCard .textWrap h2 {
    color: #fff;
    font-weight: 600;
    word-break: keep-all;
    padding: 30px;
    font-size: var(--fs-28);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#itemDscv .itemCard.half .textWrap h2 {
    font-size: var(--fs-24);
}
#itemDscv .itemCard .textWrap p {
    font-size: var(--fs-14);
    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;
}

/* ===== Masonry 콘텐츠 카드 3타입 (.mz) — 제품 카드와 함께 자동 패킹 =====
   cardFull=풀오버레이 / cardCol=컬러박스 key / cardRow=컬러박스 point. 폭은 base .itemCard(33%) 사용. */
#itemDscv .itemCard.mz {
    aspect-ratio: auto;
} /* 박스 카드는 높이 자유(이미지+박스). cardFull은 아래서 1/1 */
/* 베이스 .itemCard .textWrap(absolute top:0, 제품카드용) 리셋 — mz는 흐름/오버레이 별도 */
#itemDscv .mz .textWrap {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
}

#itemDscv .mz .cardThumb {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
#itemDscv .mz .cardThumb .coverImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease-in-out;
    z-index: 0;
}
#itemDscv .mz:hover .cardThumb .coverImg {
    transform: scale(1.05);
}
#itemDscv .mz .cardThumb .tagBox {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#itemDscv .mz .cardLink {
    position: absolute;
    inset: 0;
    z-index: 1;
}
#itemDscv .mz .textBox {
    position: relative;
}
/* ★ flex 자식의 min-height:auto가 aspect-ratio 높이를 밀어 카드가 길어지는 것 방지(겹침 원인).
   자식 min 0 + 박스 overflow hidden + 제목 2줄 클램프로 카드 높이를 aspect로 고정. */
#itemDscv .mz > * {
    min-height: 0;
    min-width: 0;
}
#itemDscv .mz.cardCol .textBox,
#itemDscv .mz.cardRow .textBox {
    overflow: hidden;
}
#itemDscv .mz .textBox h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#itemDscv .mz .textBox .link {
    position: absolute;
    right: 14px;
    bottom: 14px;
    margin: 0;
    padding: 0;
    transition: background-color 0.2s ease-in-out;
    z-index: 3;
}
/* 카드 호버 시 화살표 색 반전 (흰바탕·검정화살표 → 검정바탕·흰화살표). cardLink가 링크를 덮어 카드 기준으로 트리거 */
#itemDscv .mz:hover .textBox .link {
    background-color: #000;
    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='%23FFF' 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");
}

/* 높이는 이미지 aspect-ratio(1/1, base) + (cardCol은)고정 박스로 결정 → 폰트/로드와 무관, Masonry 안정.
   li에 aspect-ratio + 자식 height:% 조합(측정 어긋나 겹침)을 쓰지 않음. */

/* 1) 풀오버레이 (cardFull) — 이미지 정사각(base) + 하단 그라데이션 위 텍스트 */
#itemDscv .mz.cardFull .textBox {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0) 55%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
}
#itemDscv .mz.cardFull .textBox h3 {
    color: #fff;
    font-size: var(--fs-28);
    line-height: 1.25;
    word-break: keep-all;
}
#itemDscv .mz.cardFull .textBox p {
    color: #eee;
    font-size: var(--fs-18);
    margin-top: 6px;
    line-height: 1.2;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 90%;
}
#itemDscv .mz.cardFull .textBox .link {
    z-index: 2;
}

/* 2) cardCol = 세로 박스 — cardFull과 동일 정사각 높이(이미지 위 50% + 초록 박스 아래 50%).
   높이는 li aspect 1/1로 고정 → 폰트 무관, Masonry 안정(겹침 원인은 JS morph 훅이었음). */
#itemDscv .mz.cardCol {
    aspect-ratio: 1 / 1;
}
#itemDscv .mz.cardCol .cardThumb {
    aspect-ratio: auto;
    height: 50%;
}
#itemDscv .mz.cardCol .textBox {
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--keyColor);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 35px 20px;
}

/* 3) cardRow = 가로 박스 — 이미지 좌(정사각, base) + 분홍 박스 우. 높이=이미지(폰트 무관) */
#itemDscv .mz.cardRow {
    flex-direction: row;
    align-items: stretch;
}
#itemDscv .mz.cardRow .cardThumb {
    width: 50%;
    flex-shrink: 0;
}
#itemDscv .mz.cardRow .textBox {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--secondpointColor);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
}

/* 박스형 텍스트 (cardCol·cardRow 공통 색·크기) */
#itemDscv .mz.cardCol .textBox h3,
#itemDscv .mz.cardRow .textBox h3 {
    color: #000;
    font-size: var(--fs-28);
    line-height: 1.2;
    word-break: keep-all;
}
#itemDscv .mz.cardRow .textBox h3 {
    font-size: var(--fs-24);
}
#itemDscv .mz.cardCol .textBox p {
    color: #000;
    font-size: var(--fs-18);
    margin-top: 6px;
    line-height: 1.35;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 90%;
}

#itemDscv .mz.cardRow .textBox p {
    color: #000;
    font-size: var(--fs-18);
    margin-top: 6px;
    line-height: 1.35;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 90%;
}

/* ===== cardRow 2장 1세트 — 가로카드 2장을 정사각 한 칸에 위·아래 스택 =====
   세트 <li>엔 .mz 미부여 → 안쪽 .mz.cardRow 2개가 기존 cardRow 스타일·호버를 그대로 재사용(행 단위 호버).
   base .itemCard(flex column, width 33%) 유지 + aspect-ratio만 해제 → 안쪽 2행(각 0.5W)이 자연 정사각 결정. */
#itemDscv .cardRowSet {
    aspect-ratio: auto;
}
#itemDscv .cardRowSet .mz.cardRow {
    position: relative; /* cardLink(inset:0)·textBox 기준을 각 행으로 한정(세트 전체로 새지 않게) */
    display: flex; /* 원래 .itemCard가 주던 display:flex 보강 — 안쪽 div엔 .itemCard 없음(없으면 좌우배치 깨짐) */
}
/* 세트 아래 카드(2번째)는 좌우 반전 — 인덱스처럼 교차(위=이미지 왼쪽 / 아래=이미지 오른쪽). 모바일도 좌우배치라 전 구간 적용. */
#itemDscv .cardRowSet .mz.cardRow + .mz.cardRow {
    flex-direction: row-reverse;
}

/*
Wide Desktop greater than 1600px — 3열(base 유지)
*/
@media (min-width: 1601px) {
    #itemDscv .itemCard {
        width: 33.333%;
    }
}

/*
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%;
    }
    #itemDscv .mz.cardFull .textBox h3,
    #itemDscv .mz.cardCol .textBox h3,
    #itemDscv .mz.cardRow .textBox h3 {
        font-size: var(--fs-20);
    }
    #itemDscv .textBox h3,
    #itemDscv .textBox.keyColor .textWrap h3,
    #itemDscv .textBox.pointColor .textWrap h3 {
        font-size: var(--fs-20);
    }
    #itemDscv .textBox p {
        font-size: var(--fs-16);
    }
}

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

    /* #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: var(--fs-18) !important;
        padding: 15px;
    }
    #itemDscv .itemCard.half .textWrap h2 {
        font-size: var(--fs-18) !important;
    }

    /* cardFull: 풀이미지 1:1 유지 */
    #itemDscv .mz.cardFull {
        aspect-ratio: auto;
        height: auto;
    }
    #itemDscv .mz.cardFull .cardThumb {
        aspect-ratio: 1 / 1;
        height: auto;
    }
    /* cardCol: 전체 박스 정사각(1) → 상단 이미지 1/2 + 텍스트 박스 1/2 (세로 스택) */
    #itemDscv .mz.cardCol {
        aspect-ratio: 1 / 1;
        height: auto;
    }
    #itemDscv .mz.cardCol .cardThumb {
        width: 100%;
        height: 50%;
        flex: none;
        aspect-ratio: auto;
    }
    #itemDscv .mz.cardCol .textBox {
        width: 100%;
        height: 50%;
        flex: none;
        min-height: 0;
        justify-content: flex-start;
    }
    /* cardRow: 모바일에서도 PC처럼 좌우 배치(이미지 50% + 텍스트 50%) — PC 규칙 상속(cardThumb 1/1 → 카드 2:1), 패딩만 모바일값 */
    #itemDscv .mz.cardFull .textBox,
    #itemDscv .mz.cardCol .textBox,
    #itemDscv .mz.cardRow .textBox {
        padding: 15px;
    }
    /* 세트 안 2장 사이 간격 — 모바일 카드 수직 리듬(20px)과 통일(PC는 gutter:0이라 붙임) */
    #itemDscv .cardRowSet .mz.cardRow + .mz.cardRow {
        margin-top: 20px;
    }
}
/* === 색상 베리에이션 +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: var(--fs-20);
    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: var(--fs-13);
    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;
    }
    #itemDscv .mz.cardFull .textBox h3,
    #itemDscv .mz.cardCol .textBox h3,
    #itemDscv .mz.cardRow .textBox h3 {
        font-size: var(--fs-18);
        width: 90%;
    }
    #itemDscv .mz.cardFull .textBox p,
    #itemDscv .mz.cardRow .textBox p {
        font-size: var(--fs-16);
        -webkit-line-clamp: 2;
        line-clamp: 2;
        width: 90%;
        margin-top: 5px;
    }
    #itemDscv .mz.cardCol .textBox p {
        font-size: var(--fs-16);
        -webkit-line-clamp: 3;
        line-clamp: 3;
        width: 90%;
        margin-top: 5px;
    }
}