/* BASIC css start */
/* ======================== */
/* 금찌 공통 + 상단 + 메인 디자인 CSS */
/* ======================== */

/* 기본 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
}
html, body {
  font-family: 'Pretendard', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  background: #fff;
}
ul, ol {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}

/* 공통 유틸 */
.dn { display: none !important; }
.txt-center { text-align: center; }
.fl { float: left !important; }
.fr { float: right !important; }
.mt5 { margin-top: 5px; }

/* 버튼 공통 */
.btn {
  display: inline-block;
  padding: 10px 15px;
  text-align: center;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.btn_Black {
  background: #000;
  color: #fff;
}
.btn_White {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
}

/* wrap */
#wrap {
  min-width: 320px;
  overflow: hidden;
}

/* 메인 비주얼 배너 */
#mainspot {
  position: relative;
}
#mainspot .swiper-slide img {
  border-radius: 0 0 12px 12px;
}
#mainspot .swiper-pagination-fraction {
  position: absolute;
  bottom: 16px;
  left: 16px;                     /* 왼쪽 여백은 그대로 */
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  width: auto !important;         /* ← 텍스트 길이만큼만 */
  display: inline-block !important; /* ← 박스가 길게 안 늘어나도록 */
}

/* 아이콘 카테고리 */
#category-grid {
  padding: 20px 10px;
  margin-top: 20px;
  background: #fff;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.category-grid li {
  border: 1px solid #eee;
  background: #fff;
}
.category-grid li a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  height: 40px;
  transition: background 0.3s, color 0.3s;
}
.category-grid li a:hover {
  background: #000;
  color: #fff;
}

/* 탭 상품 */
#section3.product_tab {
  padding: 20px 10px;
  background: #fff;
}
#section3 .tab_title ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
#section3 .tab_title li {
  font-size: 14px;
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
#section3 .tab_title li.active {
  font-weight: bold;
  border-bottom: 2px solid #000;
}

/* 탭 상품 리스트 */
#section3 .list_shopping2x ul.items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  padding: 0;
}
#section3 .item-list {
  width: 50%;
  padding: 0 6px;
  box-sizing: border-box;
}
.item-list .thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 365 / 536;
  object-fit: cover;
}
.item-list .desc {
  margin-top: 8px;
  text-align: center;
}
.item-list .desc p {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
}

/* 탭 상품 hover 표시 */
.item-list .desc,
.item-list .prd-info {
  opacity: 0;
  transition: opacity 0.3s;
}
.item-list.hover .desc,
.item-list.hover .prd-info {
  opacity: 1;
}

/* 이벤트 배너 */
#section10,
#section11 {
  margin-top: 15px;
  background: #f5f5f5;
}
#section10 .title,
#section11 .title {
  margin-bottom: 16px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
#section10 .swiper-slide img,
#section11 .swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* 스와이프 네비 버튼 */
.swiper-button-next,
.swiper-button-prev {
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.3);
  border-radius: 0;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 14px;
  color: #fff;
}


/* -------------------------------------------
   [추가] 탭상품 카드: 하단 40% 반투명 오버레이 + 정보 표시
   - 기존 .desc 를 이미지 위로 올려서 오버레이로 사용
   - PC : :hover 시 노출 / 모바일 : .is-hover 또는 .hover 클래스가 붙으면 노출
--------------------------------------------*/

/* 카드/이미지 포지셔닝 기본값 */
#section3 .item-list {
  position: relative;
  overflow: hidden; /* 오버레이가 깔끔하게 잘리도록 */
}
#section3 .item-list .thumb {
  position: relative; /* 오버레이 기준점 */
}

/* 오버레이로 사용할 desc 재정의 */
#section3 .item-list .desc {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden; /* 둥근 모서리 바깥 잘리도록 */

  /* 높이: 이미지의 하단 40% 영역 */
  height: 45%;

  /* 배경: 블랙 40% 투명도 */
  background: rgba(0,0,0,0.4);

  color: #fff;
  margin: 0;            /* 기존 margin-top:8px 무효화 */
  
  
  /* 위쪽 여백을 조금 키워서 첫 줄을 더 아래로 내림 */
  padding: 20px 10px 8px; /* top right/left bottom */
  /* 필요시 12~16px 사이로만 미세 조정 */
  
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 텍스트를 아래 정렬하면 안정적 */

  opacity: 0;           /* 기본 숨김 */
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none; /* 오버레이가 떠도 아래 클릭 방해 X (필요시 제거) */
}

/* desc 텍스트 부드러운 페이드 + 살짝 아래에서 올라오기 */
#section3 .item-list .desc {
  opacity: 0;
  transform: translateY(10px); /* 살짝 아래에서 */
  transition: opacity var(--tab-dur, 220ms) var(--tab-ease, cubic-bezier(.2,.6,.2,1)),
              transform var(--tab-dur, 220ms) var(--tab-ease, cubic-bezier(.2,.6,.2,1));
}

/* 활성 탭에서만 desc 표시 */
#section3.product_tab .tab_content.is-current .item-list .desc {
  opacity: 1;
  transform: translateY(0);
}


#section3 .item-list .desc p {
  margin: 1px 0;     /* 세로 간격 살짝 줄임 (기존 4px → 1px) */
  line-height: 1.28; /* 줄간격 타이트하게 */
}


/* 텍스트 정리 */
#section3 .item-list .desc p {
  margin: 2px 0;
  line-height: 1.35;
  font-size: 13px;
  color: #fff;
  word-break: keep-all;
}
#section3 .item-list .desc .price strong { color:#fff; }

/* 노출 트리거: PC hover */
#section3 .item-list:hover .desc {
  opacity: 1;
  transform: translateY(0);
}

/* 노출 트리거: JS로 붙이는 클래스 (모바일 탭/클릭) */
#section3 .item-list.is-hover .desc,
#section3 .item-list.hover .desc {
  opacity: 1;
  transform: translateY(0);
}


/* -------------------------------------------
   [추가] 탭 컨테이너 스와이프 설정
   - pan-y 허용: 세로 스크롤은 그대로, 가로는 제스처로 사용
--------------------------------------------*/


/* 스와이프 영역: 세로 스크롤만 브라우저가 처리 */
#section3.product_tab .tab_container { 
  position: relative; 
  touch-action: pan-y; 
  overflow: hidden;
}

/* 패널을 겹쳐놓고 크로스페이드 */
#section3.product_tab .tab_content{
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--tab-dur, 220ms) var(--tab-ease, ease), 
              visibility var(--tab-dur, 220ms) var(--tab-ease, ease);
  will-change: opacity;
  transform: translateZ(0); /* GPU 힌트: 플리커 방지 */
}

/* 현재 보이는 패널 */
#section3.product_tab .tab_content.is-current{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;     /* 전환 중에도 즉시 클릭 가능 */
  z-index: 2;
}

/* 들어올 패널(선택 사항: 살짝 위에 얹기) */
#section3.product_tab .tab_content.is-next{
  z-index: 3;
}

/* 모션 민감 사용자를 배려 */
@media (prefers-reduced-motion: reduce){
  #section3.product_tab .tab_content{ transition: none; }
}


/* 탭 컨테이너는 일반 흐름으로 */
#section3.product_tab .tab_container{
  position: static !important;
  overflow: visible !important;
  touch-action: auto !important;
}

/* 탭 패널을 일반 블록으로(절대위치/투명 무력화) */
#section3.product_tab .tab_content{
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
  display: none; /* jQuery가 show()/hide()로 제어 */
}

/* 첫 번째 탭만 기본 노출 */
#section3.product_tab .tab_content:first-child {
  display: block;
}

/* 오타 수정: 20x -> 20px */
#section3 .item-list .desc{
  padding: 20px 10px 8px; /* ← 여기 px */
}

/* 탭 패널 영역: 세로 스크롤은 브라우저가 처리, 가로 제스처만 커스텀 */
#section3.product_tab .tab_container { touch-action: pan-y; }


/* 탭 패널: 크로스페이드용 */
#section3.product_tab .tab_container{ position:relative; touch-action:pan-y; }
#section3.product_tab .tab_content{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--tab-dur,220ms) var(--tab-ease,cubic-bezier(.2,.6,.2,1));
  will-change:opacity; transform:translateZ(0);
}
#section3.product_tab .tab_content.is-current{
  opacity:1; visibility:visible; pointer-events:auto; z-index:2;
}
#section3.product_tab .tab_content.is-next{ z-index:3; } /* 들어올 패널을 살짝 위에 */


/* 상단 GNB 높이(수정 가능) */
:root { --gnbH: 52px; }

/* 섹션3 탭바를 sticky로 고정 */
#section3 .tab_title{
  position: sticky;
  top: var(--gnbH);   /* 고정될 y 위치 = GNB 바로 아래 */
  z-index: 200;       /* 상품 카드보다 위 */
  background: #fff;   /* 고정될 때 아래 컨텐츠랑 겹치지 않게 */
}

/* 고정될 때 시각적 분리(선택) */
#section3 .tab_title.stuck{
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-bottom: 1px solid #eee;
}


/* 섹션3 전체는 기본 스택 */
#section3.product_tab{ position:relative; z-index:0; }

/*  탭바를 최상단으로 띄워 클릭 가능하게 */
#section3 .tab_title{
  position: sticky;
  top: var(--gnbH);
  background:#fff;
  z-index: 10010;          /* 탭 콘텐츠(아래 1)보다 높게 */
}

/* 탭 콘텐츠와 컨테이너는 탭바 아래 */
#section3 .tab_container{ position:relative; z-index:1; }
#section3 .tab_content{ z-index:1; }

/* (선택) 시각적 구분선 */
#section3 .tab_title::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:#eee;
}

/* 카드 오버레이가 위로 삐져나와 덮는 일 방지 */
#section3 .item-list{ overflow:hidden; }


/* 카드 오버레이/텍스트는 클릭 통과 */
#section3 .item-list .desc{ pointer-events: none; }
/* 이미지 a가 전체를 받도록 */
#section3 .item-list .thumb a{ display:block; }


/* 섹션3 스택 초기화 */
#section3.product_tab{ position:relative; z-index:0; }

/*  탭바가 항상 제일 위 */
#section3 .tab_title{
  position: sticky;
  top: var(--gnbH, 52px);    /* GNB 바로 아래 */
  background:#fff;
  z-index: 10010;            /* 탭 콘텐츠보다 높게 */
  pointer-events: auto;
}

/* 탭 콘텐츠는 탭바 아래 */
#section3 .tab_container{ position:relative; z-index:1; }
#section3 .tab_content{ z-index:1; }

/* 카드가 탭바를 덮지 않도록 */
#section3 .item-list{ overflow:hidden; }


/* 설명: 호버 오버레이 안에서 가격을 맨 아래로 내림 + 여백 미세 조정 */
.product-item .item-list .prd-info{
  display:flex;                /* 혹시나 대비 (이미 flex면 영향 없음) */
  flex-direction:column;
  justify-content:flex-start;  /* 내용은 위쪽부터 쌓고… */
  min-height:45%;              /* 오버레이 높이가 너무 낮으면 살짝 확보 */
  padding:10px 8px 4px;       /* 바닥 여백(14px) 살짝 늘려서 더 아래 느낌 */
}

.product-item .item-list .prd-info .prd-price{
  margin-top:auto;             /* 가격을 바닥으로 ‘툭’ 떨어뜨림 */
  padding-bottom:1px;          /* 바닥에서 살짝 띄우기(원하면 수치 조절) */
  }


/* ========================
   [ADD] 탭 전환 방향성 페이드/슬라이드
   ======================== */

/* 기본 상태: 전환 시 JS가 show()/hide()와 클래스로 제어 */
#section3.product_tab .tab_content{
  position: relative;
  display: none;
  opacity: 0;
  transform: translateX(0);
  will-change: opacity, transform;
}

#section3.product_tab .tab_content.is-current{
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* 들어올 패널 */
#section3.product_tab .tab_content.anim-enter{
  display: block;
  opacity: 0;
  transition: opacity .22s cubic-bezier(.2,.6,.2,1),
              transform .22s cubic-bezier(.2,.6,.2,1);
}
#section3.product_tab .tab_content.anim-enter.to-right{  /* 오른쪽 탭으로 이동 */
  transform: translateX(-12px);
}
#section3.product_tab .tab_content.anim-enter.to-left{   /* 왼쪽 탭으로 이동 */
  transform: translateX(12px);
}
#section3.product_tab .tab_content.anim-enter.anim-in{
  opacity: 1;
  transform: translateX(0);
}

/* 나갈 패널 */
#section3.product_tab .tab_content.anim-leave{
  display: block;
  opacity: 1;
  transition: opacity .22s cubic-bezier(.2,.6,.2,1),
              transform .22s cubic-bezier(.2,.6,.2,1);
}
#section3.product_tab .tab_content.anim-leave.to-right{
  transform: translateX(12px);
  opacity: 0;
}
#section3.product_tab .tab_content.anim-leave.to-left{
  transform: translateX(-12px);
  opacity: 0;
}

/* 모션 민감 사용자 */
@media (prefers-reduced-motion: reduce){
  #section3.product_tab .tab_content,
  #section3.product_tab .tab_content.anim-enter,
  #section3.product_tab .tab_content.anim-leave{
    transition: none !important;
    transform: none !important;
  }
}

/* ========================
   [FIX] 카드 오버레이: 클릭한 카드만 보이게
   (탭 전체가 다 켜지는 이전 규칙 무력화)
   ======================== */
#section3.product_tab .tab_content .item-list .desc{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .25s ease, transform .25s ease;
}
#section3.product_tab .tab_content .item-list.hover .desc,
#section3.product_tab .tab_content .item-list.is-hover .desc,
#section3.product_tab .tab_content .item-list:hover .desc{
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ========================
   [TIP] 스와이프 제스처와 세로 스크롤 공존
   ======================== */
#section3.product_tab .tab_container{
  touch-action: pan-y; /* 세로 스크롤은 브라우저가 처리 */
}


/* 빠른 전환 프로파일 */
#section3.product_tab .tab_content.anim-enter,
#section3.product_tab .tab_content.anim-leave{
  transition: opacity .14s cubic-bezier(.2,.6,.2,1),
              transform .14s cubic-bezier(.2,.6,.2,1) !important;
}
#section3.product_tab .tab_content.anim-enter.to-right{ transform: translateX(-8px) !important; }
#section3.product_tab .tab_content.anim-enter.to-left { transform: translateX( 8px) !important; }
#section3.product_tab .tab_content.anim-leave.to-right{ transform: translateX( 8px) !important; }
#section3.product_tab .tab_content.anim-leave.to-left { transform: translateX(-8px) !important; }

/* 호버 오버레이도 즉각 반응 */
#section3 .item-list .desc{
  transition: opacity .12s ease, transform .12s ease !important;
  will-change: opacity, transform;
}


/* === [ADD] 탭 전환을 '순수 페이드'로 고정 (빠르고 흔들림 없음) === */
#section3.product_tab .tab_content{
  position: relative !important;
  display: none;                 /* JS가 show()/hide() */
  opacity: 0;
  transform: none !important;    /* 좌우 이동 효과 제거 */
  will-change: opacity;
}
#section3.product_tab .tab_content.is-current{
  display: block;
  opacity: 1;
}
#section3.product_tab .tab_content.anim-enter,
#section3.product_tab .tab_content.anim-leave{
  transition: opacity .12s ease !important;  /* 매우 빠른 페이드 */
}

/* 호버 오버레이는 즉각 반응 */
#section3 .item-list .desc{
  transition: opacity .12s ease, transform .12s ease !important;
}

/* 혹시 예전 translateX 규칙이 남아있어도 무력화 */
#section3.product_tab .tab_content.to-left,
#section3.product_tab .tab_content.to-right{ transform:none !important; }


/* -------------------------------------------
   [ADD] 탭 전환: 순수 페이드(빠름) + 흔들림 제거
--------------------------------------------*/
#section3.product_tab .tab_content{
  position: relative !important;
  display: none;
  opacity: 0;
  transform: none !important; /* 좌우 밀림 방지 */
  will-change: opacity;
}
#section3.product_tab .tab_content.is-current{
  display: block;
  opacity: 1;
}
#section3.product_tab .tab_content.anim-enter,
#section3.product_tab .tab_content.anim-leave{
  transition: opacity .12s ease !important; /* 매우 빠른 페이드 */
}

/* 예전 translateX 클래스가 남아 있어도 무효화 */
#section3.product_tab .tab_content.to-left,
#section3.product_tab .tab_content.to-right{ transform:none !important; }

/* 호버 오버레이: 해당 카드만 즉시 보이기 */
#section3.product_tab .tab_content .item-list .desc{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .12s ease, transform .12s ease !important;
}
#section3.product_tab .tab_content .item-list.hover .desc,
#section3.product_tab .tab_content .item-list.is-hover .desc,
#section3.product_tab .tab_content .item-list:hover .desc{
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* 스와이프와 세로 스크롤 공존 */
#section3.product_tab .tab_container{ touch-action: pan-y; }

/* 초기 폭 계산 중 흔들림 방지 */
html, body { overflow-x: hidden; }


/* ---------------------------------------------
  [ADD] 섹션3 탭바 상단 고정 (sticky) + 폴백 클래스
  - GNB 높이만큼 떨어져서 고정되도록 CSS 변수 사용
----------------------------------------------*/

/* GNB 높이 기본값(필요 시 JS에서 재설정) */
:root { --gnbH: 52px; }

#section3.product_tab { position: relative; z-index: 0; }


/* ==============================================
   [GUMZZI] 탭바 고정: fixed + placeholder (최종안)
   - JS가 .is-fixed를 붙였다 뗐다 함
   - top 오프셋은 --tabStickyTop(없으면 --gnbH→52px)
============================================== */
/* sticky는 쓰지 않음(위에서 삭제 or 무력화) */
#section3 .tab_title{
  z-index: 10020;
  background: #fff;
}

#section3 .tab_title.is-fixed{
  position: fixed !important;
  top: calc(var(--tabStickyTop, var(--gnbH, 52px)) + 0px); 
  left: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-bottom: 1px solid #eee;
}

/* 자리채움(점프 방지)   높이는 JS가 offsetHeight로 채움 */
#section3 .tab_title_placeholder{ height: 0; }


/* 탭바가 fixed로 바뀔 때 찌그러짐 방지용 자리채움 */
#section3 .tab_title_placeholder{ height: 0; }
#section3 .tab_title.is-fixed + .tab_title_placeholder{ height: 48px; } /* 탭바 높이에 맞게 조정(필요시) */


/* ===========================
   [ADD] 스와이프 안정화 보조
   - 이미지 드래그/선택 방지
   - 텍스트도 드래그 안 되게
=========================== */
#section3 .tab_container img {
  -webkit-user-drag: none;
  user-select: none;
}
#section3 .tab_container {
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y; /* 세로 스크롤은 브라우저 처리 */
}


/* 메인 타이틀 공통 (예: 기획전) */
.title h2 {
  font-size: 18px;           /* 기존보다 살짝 줄임 */
  font-weight: 600;          /* 과한 Bold 대신 세미볼드 */
  color: #222;               /* 순검정보다 부드러운 진회색 */
  letter-spacing: -0.4px;    /* 한글 자간 살짝 줄이기 */
  margin: 2px 0;            /* 위아래 공간 균형 */
  text-align: center;        /* 중앙 정렬 (필요시) */
  position: relative;
}

/* 밑줄 라인 포인트 */
.title h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #f1191f;      /* 브랜드 포인트 컬러 */
  margin: 2px auto 0;
  border-radius: 2px;
}
 /* [PATCH] 기획전 제목 영역 위쪽 패딩 추가 */
#section10 .title {
  padding-top: 12px;   /* 원하는 만큼 조절: 8~16px 추천 */
}


/* === 메인 슬라이더: 460x690 세로 비율 고정 === */
.slide-media{
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 690;   /* 460:690 비율 유지 */
  background: #000;
  overflow: hidden;
}

/* 영상/이미지 공통 */
.slide-media > video,
.slide-media > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 영상 위 전체 클릭 영역 */
.slide-link{
  position: absolute;
  inset: 0;
  z-index: 2;          /* 항상 위로 */
  display: block;
}

/* 비디오는 터치 이벤트 안 받게 → 클릭 시 링크로 바로 이동 */
.slide-media > video{ pointer-events: none; }

/* aspect-ratio 미지원 브라우저(구형 Safari 등) 대응 */
@supports not (aspect-ratio: 1) {
  .slide-media::before{
    content: "";
    display: block;
    padding-top: 150%;  /* 690/460 * 100 = 150% */
  }
}


/* 메인 배너의 비디오를 이미지와 동일하게 */
#mainspot .slide-media { aspect-ratio: 2 / 3; }      /* 2:3 고정 */
#mainspot .slide-media > video{
  object-fit: cover;             /* 꽉 채움(필요시 일부 크롭) */
  object-position: center center;/* 중앙 기준 */
}


#section3 .item-list .desc .prdcolor{
  margin: 6px 0 4px;
  display:flex; justify-content:center; align-items:center; gap:6px;
  flex-wrap: wrap; /* 칩이 많을 때 자동 줄바꿈 (원하면 지워도 됨) */
}
#section3 .item-list .desc .prdcolor span{
  width:12px; height:12px; border-radius:50%;
  display:inline-block;
  border:1px solid rgba(255,255,255,.65); /* 어두운 배경에서도 보이게 */
}


/* [patch] 서브네임과 색상칩 사이 간격 살짝 ↑ */
#section3 .item-list .desc .code{ margin-bottom: 6px !important; }   /* 4→6px 정도 */
#section3 .item-list .desc .prdcolor{ margin-top: 6px !important; }  /* 기존 6이면 8로, 필요 시 6~8로 미세조정 */


/* ===== GZ: 공통 배지 스택 (모바일용) 25.0923 ===== */
.gz-badge-stack{
  position:absolute; right:6px; top:6px;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:3px;                               /* 아이콘 간격 ↓ */
  pointer-events:none; 
  z-index:60 !important;                 /* 헤더보다 아래 */
}

/* 세 배지 공통 스타일(폰트/크기/투명도/모서리 통일) */
.gz-badge{
  display:inline-block;
  padding:3px 7px;                       /* 작게 */
  line-height:1;
  font-family: inherit;
  font-size:11px;                        /* 모바일 크기 */
  font-weight:400;                       /* 볼드 금지 */
  letter-spacing:.2px;
  color:#fff;
  background:rgba(17,17,17,.26);         /* 투명도 ↑ */
  border-radius:3px;
  border:0.5px solid rgba(255,255,255,.15);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.gz-badge i{ font-style:normal; }

/* 필요하면 살짝만 톤 차이(모두 같은 폰트/크기 유지) */
.gz-badge--free    { /* 무료배송 */ }
.gz-badge--made    { text-transform:uppercase; } /* G.MADE만 대문자 */
.gz-badge--special { /* 한정특가/기획특가 */ }

/* 썸네일이 relative 아니면 고정 */
.dt.thumb, .thumb{ position:relative; }

/* 너무 붙어 보이면 여기만 미세조정 */
@media (min-width:420px){
  .gz-badge-stack{ right:8px; top:8px; gap:4px; }
  .gz-badge{ font-size:11.5px; padding:3px 8px; }
}


/* [선택] 초기에도 보이게 해서 빈 화면 시간 최소화 */
#gzs-mainspot .gzs-track { visibility: visible; }


/* =========================================================
   GUMZZI MOBILE MAIN - FINAL OVERRIDE V1
   이 아래 규칙을 최종값으로 사용
========================================================= */

/* 사이트 메인 전체 폰트 */
.main,
.main button,
.main input,
.main select,
.main textarea{
  font-family:'Pretendard','Pretendard-Regular','Helvetica Neue',Helvetica,sans-serif;
}

/* 상품 탭 */
#section3.product_tab{
  position:relative;
  z-index:0;
  padding:20px 10px;
  background:#fff;
}

#section3 .tab_title{
  position:relative;
  top:auto;
  z-index:10020;
  background:#fff;
}

#section3 .tab_title.is-fixed{
  position:fixed !important;
  top:var(--tabStickyTop,52px);
  left:0;
  right:0;
  width:100%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  border-bottom:1px solid #eee;
}

#section3 .tab_title_placeholder{
  height:0;
}

#section3 .tab_container{
  position:relative !important;
  overflow:visible !important;
  touch-action:pan-y !important;
  z-index:1;
}

#section3 .tab_content{
  position:relative !important;
  inset:auto !important;
  display:none;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  transition:none !important;
}

#section3 .tab_content.is-current{
  display:block;
}

/* 상품 이미지는 원본 src를 그대로 사용 */
#section3 .item-list .thumb img{
  display:block;
  width:100%;
  aspect-ratio:365 / 536;
  object-fit:cover;
  filter:none !important;
  opacity:1;
}

/* 카드 정보: 첫 터치 후 해당 카드만 표시 */
#section3 .item-list .desc{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:45%;
  margin:0;
  padding:20px 10px 8px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  background:rgba(0,0,0,.40);
  border-radius:8px 8px 0 0;
  overflow:hidden;
  opacity:0 !important;
  transform:translateY(10px) !important;
  transition:opacity .12s ease, transform .12s ease !important;
  pointer-events:none;
}

#section3 .item-list.hover .desc,
#section3 .item-list.is-hover .desc{
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* 모바일에서 :hover 잔상으로 전체 카드가 켜지는 현상 방지 */
@media (hover:hover) and (pointer:fine){
  #section3 .item-list:hover .desc{
    opacity:1 !important;
    transform:translateY(0) !important;
  }
}

/* 요청한 메인 배지 전체 숨김
   무료배송 / 기획특가 / G.MADE / BEST 숫자 */
#section3 .gz-badge-stack,
#section3 .gz-badge,
#section3 .gz-badge-item,
#section3 .gz-badge-free,
#section3 .gz-badge--free,
#section3 .gz-badge--made,
#section3 .gz-badge--special,
#section3 .gz-rank-badge,
#section3 .gz-made-badge,
#section3 .gz-special-badge,
#section3 .gz-free-badge,
#section3 .prdbtn{
  display:none !important;
}

/* 메인 배너 페이지 숫자: 뒤 이미지 흐림 금지 */
#gzs-mainspot .gzs-pager{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  background:rgba(0,0,0,.52);
}

/* 가로 흔들림 방지 */
html,body{
  overflow-x:hidden;
}


/* =========================================================
   GUMZZI MOBILE MAIN - 상품 호버 아이콘 전체 제거
   상품명 / 서브명 / 가격 정보는 유지
========================================================= */
#section3 .item-list .desc .prd-ico,
#section3 .item-list .desc .prd-icon,
#section3 .item-list .desc .prd-icons,
#section3 .item-list .desc .prdcolor,
#section3 .item-list .desc .prd-color,
#section3 .item-list .desc .prd-colors,
#section3 .item-list .desc .main_icons,
#section3 .item-list .desc .main_icons img,
#section3 .item-list .desc .icon,
#section3 .item-list .desc .icons,
#section3 .item-list .prd-ico,
#section3 .item-list .prd-icon,
#section3 .item-list .prd-icons,
#section3 .item-list .prdcolor,
#section3 .item-list .prd-color,
#section3 .item-list .prd-colors,
#section3 .item-list .main_icons,
#section3 .item-list .main_icons img,
#section3 .item-list .prdbtn,
#section3 .item-list .gz-badge-stack,
#section3 .item-list .gz-rank-badge{
  display:none !important;
}

/* 아이콘 제거 후 정보영역 간격 정리 */
#section3 .item-list .desc{
  padding:20px 10px 12px !important;
}

#section3 .item-list .desc .code{
  margin-bottom:8px !important;
}

#section3 .item-list .desc .price{
  margin-top:4px !important;
}


/* 메인 상품 호버 - 가격만 살짝 아래로 */
#section3 .item-list .desc .price,
#section3 .item-list .desc .prd-price{
    margin-top: 20px !important;
}


/* =========================================================
   GUMZZI MOBILE MAIN - CATEGORY TOUCH FINAL
   카테고리 클릭/터치 시 검정·파랑 색상 변화 제거
   기본 디자인은 그대로 유지
========================================================= */

/* 기존 hover 검정 배경 무효화 */
#category-grid .category-grid li a:hover,
#category-grid .category-grid li a:active,
#category-grid .category-grid li a:focus,
#category-grid .category-grid li a:focus-visible{
  background:#fff !important;
  color:inherit !important;
  outline:none !important;
  box-shadow:none !important;
}

/* li 자체의 상태 변화도 차단 */
#category-grid .category-grid li:hover,
#category-grid .category-grid li:active,
#category-grid .category-grid li:focus{
  background:#fff !important;
  color:inherit !important;
  outline:none !important;
  box-shadow:none !important;
}

/* 모바일 브라우저의 파란/회색 탭 하이라이트 제거 */
#category-grid .category-grid li,
#category-grid .category-grid li a,
#section3 .tab_title li,
#section3 .tab_title li a{
  -webkit-tap-highlight-color:transparent !important;
  -webkit-touch-callout:none;
}

/* 상품탭도 누르는 순간 파란 포커스/배경이 생기지 않도록 */
#section3 .tab_title li,
#section3 .tab_title li:hover,
#section3 .tab_title li:active,
#section3 .tab_title li:focus,
#section3 .tab_title li:focus-visible,
#section3 .tab_title li a,
#section3 .tab_title li a:hover,
#section3 .tab_title li a:active,
#section3 .tab_title li a:focus,
#section3 .tab_title li a:focus-visible{
  background-color:transparent !important;
  outline:none !important;
  box-shadow:none !important;
}

/* 선택된 상품탭의 기존 밑줄/글자 강조 기능은 유지 */
#section3 .tab_title li.active{
  font-weight:bold !important;
  border-bottom:2px solid #000 !important;
}

/* =========================================================
   GUMZZI MOBILE MAIN FILM - FINAL
   2번 영상 슬라이드 전용
   ========================================================= */

#gzs-mainspot .gzs-slide.gzs-video-slide {
    position: relative;
    background: rgba(0,0,0,.78) !important;
    overflow: hidden;
}

#gzs-mainspot .gzs-slide.gzs-video-slide video.gzs-main-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* BASIC css end */