.nav-relative-products{
  padding: 0 !important;
  max-width: 1200px;
  overflow: hidden;
  --spv: 4;          
  --gap: 12px;       
}

/* ================ 카드 기본 스타일 ================ */
.nav-relative-products-item{
  display:flex; 
  flex-direction:column;
  gap:6px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  transition:transform .2s, box-shadow .2s;
  overflow:hidden;
  flex: 0 0 auto !important;
  box-sizing: border-box;
  min-width: 0;
}

/* 이미지 영역: 더 컴팩트(4:3) */
.nav-relative-products-item__figure{
  width:100%;
  aspect-ratio:4/3;
  /*max-height:120px;*/
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 200px;           /* 데스크톱 기준 이미지 높이 */
  height: 220px;             /* 필요 시 180~220px로 조정 */
  position: relative;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #eef1f5;
}

/* 이미지가 영역을 넘지 않도록 */
.nav-relative-products .nav-relative-products-item__figure img{
  display: block;
  width: 100%;
  height: 100%;
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}


/* 긴 이름/코드는 말줄임 */
.nav-relative-products .nav-relative-products-item__name{
  font-size: 12px;
  color: #64748b;
  margin-bottom: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding:0 15px;
}
.nav-relative-products .nav-relative-products-item__code{
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding: 0 15px;
}

/* === TAGS: 버튼 모양(자동 폭) 유지 + 2열 × 2행(최대 4개) === */
.nav-relative-products .nav-relative-products-item__tags {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 항상 2열 */
  column-gap: 8px;
  row-gap: 8px;
  grid-auto-flow: row dense;

  --chip-h: 28px;
  --chip-gap: 8px;

  align-items: stretch;
  justify-items: stretch !important;
  align-content: start;
  min-width: 0 !important;
  list-style: none !important;

  padding: 10px;
}

.nav-relative-products .nav-relative-products-item__tags > span {

  align-items: center;
  justify-content: center;

  height: var(--chip-h);
  line-height: var(--chip-h);
  padding: 0 10px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f9fafb;
  color: #334155;
  font-size: 10px;
}



.nav-relative-products .nav-relative-products-item__tags > *{
  float: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* ================ Swiper 컨테이너/래퍼 ================ */
/* 버튼 오버레이 기준점 + 내부 패딩 제거(끝여백 방지) */
.nav-relative-products .swiper{
  position:relative;
  padding:0 !important;
  overflow:visible;
}

/* 래퍼/슬라이드 정렬 강제(테마 충돌 대비) */
.nav-relative-products .swiper-wrapper{ 
  display:flex !important; 
  align-items:stretch !important; 
  transition: transform 0.3s ease;
  /*width: auto !important;*/   /* ← 강제 폭 제거 */
}

/* 링크/카드가 폭을 늘리지 못하도록 */
.nav-relative-products .swiper-slide > a,
.nav-relative-products .nav-relative-products-item{
  /*width:100%;*/
  margin:0;
  box-sizing:border-box;
}

/* ========== Swiper Buttons ========== */
  .nav-relative-products .swiper-button-prev,
  .nav-relative-products .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 10;
  opacity: 0;
  transition: opacity .2s; background: .2s;
  pointer-events: auto;

  display: flex;
  align-items: center;
  justify-content: center;
}
  .nav-relative-products:hover .swiper-button-prev,
  .nav-relative-products:hover .swiper-button-next{
  opacity: 1;
}
  .nav-relative-products .swiper-button-prev{ left: 8px; }
  .nav-relative-products .swiper-button-next{ right: 8px; }
 .nav-relative-products .swiper-button-prev::after,
  .nav-relative-products .swiper-button-next::after{
  font-size: 28px;
  color: #fff; 
  line-height: 1;
}
  .nav-relative-products .swiper-button-next::after{
  content: '›';
  }
  .nav-relative-products .swiper-button-prev::after{
  content: '‹'; 
  }


/* 슬라이드: 고정폭 제거하고 auto/flex로 */
.swiper-slide {
  /* width: auto !important;*/  /* JS 설정값(slidesPerView, spaceBetween) 적용 */
  height: auto;             /* 내용에 맞춤 */
}



/* 텍스트 영역은 항상 그림 아래로 */
.nav-relative-products .nav-relative-products-item__text{
  flex: 1 1 auto;
  padding: 12px 14px;
  background: #fff;
  position: static !important; /* 혹시 남아있는 absolute/relative 무력화 */
  margin: 0 !important;        /* 음수/겹침 마진 방지 */
  z-index: 1;
  border-top: 0;
}


/* 앵커가 카드 전체를 감싸는 경우, 블록화 */
.nav-relative-products .swiper-slide > a{
  display: block;
  /*height: 100%;*/
}


.nav-relative-products .nav-relative-products-item__tag {
  display: flex !important;          /* flex 다시 활성화 */
  width: auto !important;            /* ✅ 셀 크기에 맞게 */
  max-width: 100% !important;
  min-width: 0 !important;
  font-weight: 500;  /* ✅ 볼드 추가 */
}

.nav-relative-products .nav-relative-products-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}


.nav-relative-products .nav-relative-products-item__tags figure{
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
}
.nav-relative-products .nav-relative-products-item__tags figure img{
  height: 16px !important;
  width: auto !important;
  vertical-align: middle !important;
}




/* 반응형 변수 */
@media (max-width: 1023.98px){
    .nav-relative-products{ --spv: 2; --gap: 12px; }
    .nav-relative-products .nav-relative-products-item__figure{ height: 180px; flex-basis: 180px; }
}
@media (max-width: 639.98px){
    .nav-relative-products{ --spv: 1.2; --gap: 12px; }
    .nav-relative-products .nav-relative-products-item__figure{ height: 160px; flex-basis: 160px; }
}

/* 칩 개수별 블록 — max-height 제거 */
.nav-relative-products .nav-relative-products-item__tags.--chip-1 { grid-template-columns: 1fr !important; }
.nav-relative-products .nav-relative-products-item__tags.--chip-2 { grid-template-columns: repeat(2, 1fr) !important; }
.nav-relative-products .nav-relative-products-item__tags.--chip-3 { grid-template-columns: repeat(2, 1fr) !important; }
.nav-relative-products .nav-relative-products-item__tags.--chip-4 { grid-template-columns: repeat(2, 1fr) !important; }