/* ================= 서브 비주얼 (제품 공통) ================= */
 

/* ================= 2차 카테고리 탭 (LNB) ================= */
 
/* ================= 타이틀 및 3차 카테고리 탭 ================= */
 
.product-container {
    padding-bottom: 150px;
}
.page-title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #111;
    margin-bottom: 40px; 
	display:none;
}

.depth3-tabs {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}
.depth3-tabs a {
    font-size: 18px;
    color: #888;
    padding: 8px 20px;
    border-bottom: 1px solid transparent; 
position:relative; 
    transition: all 0.3s;
}
.depth3-tabs a:hover,
.depth3-tabs a.active {
    color: #8e694c;
    font-weight: 600; 
}
.depth3-tabs a.active:after{ 
position:absolute;right:10px;top:0px; width:5px;height:5px; border-radius:50%; background:#8e694c; content:"";display:block;
}


/* ================= 상품 리스트 그리드 ================= */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4단 배열 */
    column-gap: 30px; /* 가로 간격만 줌 */
	border-top:0px solid #000;
		 
}

/* [핵심] 1열 아래 부분 검은색 라인 적용 */
.product-item {
    padding-bottom:  10px; /* 라인과의 하단 여백 */
    margin-bottom: 10px;  /* 다음 줄과의 간격 */
    border-bottom: 0px solid #222; /* 요청하신 검은색 라인 */ 
	position:relative;  
	border-bottom:0px solid #000;
}
.product-item:not(:nth-child(4n))::after {
    content: "";
    position: absolute;
    bottom: -1px; /* border-bottom(1px) 위치에 정확히 맞춤 (환경에 따라 0px로 수정해야 할 수도 있습니다) */
    right: -30px; /* column-gap(30px)만큼 오른쪽으로 내보냄 */
    width: 30px;  /* 끊긴 gap 영역만큼 선을 채움 */
    height: 1px;  /* 선 두께 */
  
	display:block;
}
 
 
.product-item a{ overflow:hidden; position:relative; }

.product-item .box{ position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex;  flex-direction: column;  align-items:center;text-align:center; justify-content: center; transition: all 0.2s ease;   transform:translateY(100%);  }
.product-item .box .tx-itm p{  display:block;font-size:20px; color:#fff; line-height:2; }
.product-item .box .tx-itm span{display:block;font-size:16px; color:#fff;   line-height:1.6;}
.product-card {
    text-align: center;
}
.product-item:hover .box{transform:translateY(0%); }
/* 이미지 박스 및 Hover 투명도 효과 */
.product-card .img-box {
    margin-bottom: 25px;
  
}
.product-card .img-box img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 1; /* 기본 투명도 */
    transition: opacity 0.4s ease, transform 0.4s ease; 

}
.product-item:hover .img-box 
{
 border:0px solid #f1f1f1;
}

.product-item:hover .img-box img {
    opacity: 1; /* 마우스 올렸을 때 진해짐 */
	transform:scale(1.1);
}

/* 텍스트 영역 */
.product-card .txt-box .p-name {
    font-size: 18px;
    font-weight:500;
    color: #111;
    margin-bottom: 12px;
}
.product-card .txt-box .p-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
}

.empty-list {
    grid-column: 1 / -1;
    text-align: center;
    padding: 100px 0;
    border-bottom: none; /* 비어있을 땐 라인 제거 */
}


/* =======================================================
   [모바일 반응형 (Max-width: 768px)] - 제품 리스트 (product.css)
======================================================= */
@media (max-width: 768px) {
    /* 1. 타이틀 영역 여백 축소 */
    .product-container { padding-bottom: 80px; padding-top: 10px; }

    /* 2. 3차 카테고리 탭 (모바일 시안: 둥근 캡슐 형태 및 가로 스크롤) */
    .depth3-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 5% 5px; /* 스크롤 여백 확보 */
        gap: 10px;
        -ms-overflow-style: none; 
        scrollbar-width: none;
		margin-bottom:15px;
    }
    .depth3-tabs::-webkit-scrollbar { display: none; } /* 스크롤바 숨김 */
    
    .depth3-tabs a {
        flex-shrink: 0;
        font-size: 14px;
        padding: 8px 18px;
        border: 1px solid #ddd; /* 테두리 추가 */
        border-radius: 30px; /* 둥근 캡슐 모양 */
        color: #888;
    }
    .depth3-tabs a.active {
        background-color: #a78864;
        color: #fff;
        border-color: #a78864;
        font-weight: 500;
    }
    .depth3-tabs a.active:after { display: none; } /* PC용 점(•) 표시 숨김 */

    /* 3. 상품 리스트 그리드 (4단 -> 2단 변경) */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 15px;
        padding: 0 5%;
    }
    
    /* PC버전의 강제 검은색 구분선(가상요소) 숨김 */
    .product-item:not(:nth-child(4n))::after { display: none !important; }
    
    .product-item {
        padding-bottom: 0;
        margin-bottom: 10px;
        border-bottom: none;
    }
    
    .product-card .img-box { margin-bottom: 15px; }
    .product-card .txt-box .p-name { font-size: 14px; margin-bottom: 5px; word-break: keep-all; }
    
    /* 리스트 내 검은색 호버 박스 기능 모바일 터치 대응 처리 */
    .product-item .box { display: none !important; } /* 모바일에선 터치가 클릭이므로 호버 박스 숨김 처리 추천 */
}