/* BASIC css start */
#content{width:auto;}

/* =========================
   공통 레이아웃
   ========================= */
#main_bnr_swiper{ width:100%; margin-bottom:100px; }
#main_bnr_swiper .swiper-slide img{ width:100%; display:block; }
#main_bnr_swiper .swiper-pagination-bullet{
  opacity:1 !important; background:transparent !important;
  border:1px solid #000; margin:0 6px !important;
}
#main_bnr_swiper .swiper-pagination-bullet-active{ background:#000 !important; }

.product-wrap.prd_section{
  width:1280px;
  margin:0 auto 90px;
  position:relative;
}
.cateTit{ margin:0 0 24px; text-align:center; }
.cateTit h3{ margin:0; letter-spacing:0.55em; }

/* =========================
   3단 슬라이더 공통
   (화살표 공간 확보: padding)
   ========================= */
.prd-swiper{
  width:1280px;
  margin:0 auto;
  position:relative;
  padding:0 60px;          /* ✅ 화살표 들어갈 공간 */
  box-sizing:border-box;
  overflow:hidden;         /* ✅ 슬라이드 깔끔 */
}
.prd-swiper .swiper-wrapper{ display:flex !important; }
.prd-swiper .swiper-slide{ flex-shrink:0 !important; }

/* ✅ 화살표를 동일 이미지로 */
.prd-swiper .swiper-button-prev,
.prd-swiper .swiper-button-next{
  width:44px !important;
  height:44px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin-top:0 !important;
  z-index:20 !important;
}
.prd-swiper .swiper-button-prev{ left:8px !important; }
.prd-swiper .swiper-button-next{ right:8px !important; }

/* Swiper 기본 after 제거 */
.prd-swiper .swiper-button-prev:after,
.prd-swiper .swiper-button-next:after{ content:"" !important; }

.prd-swiper .swiper-button-prev{
  background:url("//skin.makeshop.co.kr/skin/blossom/img/ico_arrow_prev.png") no-repeat center/contain !important;
}
.prd-swiper .swiper-button-next{
  background:url("//skin.makeshop.co.kr/skin/blossom/img/ico_arrow_next.png") no-repeat center/contain !important;
}

/* =========================
   카드(상품) 공통
   ========================= */
.prd-swiper .item-list{
  margin:0;
  text-align:center;
}

/* 썸네일 줄맞춤 */
.prd-swiper .thumb{
  width:260px;
  height:260px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.prd-swiper .thumb img{
  max-width:100%;
  max-height:100%;
  display:block;
}

/* ✅ 제품명/가격 항상 아래 노출 (숨김/오버레이 방지) */
.prd-swiper .prd-info{
  display:block !important;
  position:static !important;
  background:transparent !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  text-align:center;
}
.prd-swiper .prd-info ul{ display:block !important; }
.prd-swiper .prd-info ul li{ display:block !important; color:#111 !important; }

.prd-swiper .prd-name{ margin:0 0 6px; }
.prd-swiper .prd-name a{
  color:#111 !important;
  font-size:13px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;          /* ✅ 2줄 고정 */
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.3em * 2);    /* ✅ 가격 라인 정렬 */
}
.prd-swiper .prd-price .normal{ font-weight:600; color:#111 !important; }

/* 혹시 예전 CSS가 남아 dd를 숨기면 강제 해제 */
.best_item_wrap .item-list dd,
#md_pick_swiper .item-list dd{
  display:block !important;
  position:static !important;
  background:transparent !important;
}
/* =========================================================
   ✅ 3섹션(NEW/BEST/MD) 공통 완성 CSS - PC
   ========================================================= */

/* 섹션 폭/간격 */
.prd_section{
  width:1280px;
  margin:0 auto 90px;
}
.prd_section .cateTit{
  margin:0 0 24px;
  text-align:center;
}
.prd_section .cateTit h3{
  margin:0;
  letter-spacing:0.55em;
}

/* Swiper 컨테이너: 화살표 공간 확보(안쪽) */
.prd-swiper{
  width:1280px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  padding:0 60px;          /* ✅ 화살표 공간 */
  box-sizing:border-box;
}
.prd-swiper .swiper-wrapper{ display:flex; align-items:flex-start; }
.prd-swiper .swiper-slide{ flex-shrink:0; }

/* 카드 기본 정렬 */
.prd-swiper .item-list{ margin:0; text-align:center; }
.prd-swiper .thumb{ margin:0 0 12px; }

/* ✅ 썸네일 박스 높이 통일(줄맞춤 핵심) */
.prd-swiper .thumb{
  width:100%;
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.prd-swiper .thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
}

/* ✅ 상품명/가격 항상 아래에 보이게 (오버레이/숨김 방지) */
.prd-swiper .prd-info{
  display:block !important;
  position:static !important;
  background:transparent !important;
  width:auto !important;
  height:auto !important;
}
.prd-swiper .prd-info ul,
.prd-swiper .prd-info ul li{
  display:block !important;
  height:auto !important;
  overflow:visible !important;
}
.prd-swiper .prd-info ul li,
.prd-swiper .prd-info ul li a,
.prd-swiper .prd-info ul li span{
  color:#111 !important;   /* ✅ 글자 흰색으로 강제되는 문제 차단 */
}

/* ✅ 상품명 2줄 고정(가격 라인 정렬) */
.prd-swiper .prd-name a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.35em * 2);
  font-size:13px;
  line-height:1.35;
}
.prd-swiper .prd-price{ margin-top:6px; }
.prd-swiper .prd-price .normal{ font-weight:600; }

/* =========================================================
   ✅ 화살표 3섹션 모두 동일 이미지로 통일
   ========================================================= */

/* Swiper 기본 화살표(::after) 제거 */
.prd-swiper .swiper-button-prev:after,
.prd-swiper .swiper-button-next:after{
  content:"" !important;
}

/* 버튼 공통 */
.prd-swiper .swiper-button-prev,
.prd-swiper .swiper-button-next{
  width:44px !important;
  height:44px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:50 !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* 위치: 안쪽 10px */
.prd-swiper .swiper-button-prev{
  left:10px !important;
  background:url("//skin.makeshop.co.kr/skin/blossom/img/ico_arrow_prev.png") center/contain no-repeat !important;
}
.prd-swiper .swiper-button-next{
  right:10px !important;
  background:url("//skin.makeshop.co.kr/skin/blossom/img/ico_arrow_next.png") center/contain no-repeat !important;
}

/* =========================================================
   ✅ 혹시 기존 스킨 CSS가 BEST/MD dd를 숨기면 강제 해제(보험)
   ========================================================= */
.best_item_wrap .item-list dd,
#md_pick_swiper .item-list dd{
  display:block !important;
  position:static !important;
  background:transparent !important;
}
/* =========================
   ✅ 화살표를 "이미지 박스(thumb)" 중앙에 고정
   ========================= */

/* 썸네일 박스 높이(지금 260으로 쓰고 있으니 동일하게) */
.prd-swiper{ --thumbH: 260px; }

/* 화살표 세로 위치를 thumb 중앙으로 */
.prd-swiper .swiper-button-prev,
.prd-swiper .swiper-button-next{
  top: calc(var(--thumbH) / 2) !important;   /* ✅ 이미지 박스 중앙 */
  transform: translateY(-50%) !important;
}

/* BEST ITEM도 같은 규칙(만약 best도 prd-swiper면 위만으로 충분)
   혹시 BEST가 별도 컨테이너면 안전하게 한 줄 더 */
#best_prd_swiper .swiper-button-prev,
#best_prd_swiper .swiper-button-next{
  top: calc(var(--thumbH) / 2) !important;
  transform: translateY(-50%) !important;
}
/* =========================
   ✅ 공통: 상품 슬라이더(NEW/BEST/MD)
   ========================= */
.prd_section{
  width:1280px;
  margin:0 auto 90px;
}
.prd_section .cateTit{
  text-align:center;
  margin:0 0 30px;
}
.prd_section .cateTit h3{
  margin:0;
  letter-spacing:0.55em;
}

/* Swiper 영역 + 화살표 공간 */
.prd-swiper{
  width:1280px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  padding:0 60px;
  box-sizing:border-box;
}

/* Swiper 기본 화살표 텍스트 제거 */
.prd-swiper .swiper-button-prev:after,
.prd-swiper .swiper-button-next:after{
  content:"" !important;
}

/* ✅ 화살표 동일 이미지 + “박스 중앙” */
.prd-swiper .swiper-button-prev,
.prd-swiper .swiper-button-next{
  width:44px !important;
  height:44px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:50 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.prd-swiper .swiper-button-prev{
  left:10px !important;
  background:url("//skin.makeshop.co.kr/skin/blossom/img/ico_arrow_prev.png") no-repeat center/contain !important;
}
.prd-swiper .swiper-button-next{
  right:10px !important;
  background:url("//skin.makeshop.co.kr/skin/blossom/img/ico_arrow_next.png") no-repeat center/contain !important;
}

/* =========================
   ✅ 상품 카드(이미지/텍스트 정렬)
   ========================= */
.prd-swiper .item-list{ text-align:center; margin:0; }
.prd-swiper .thumb{
  width:260px;
  height:260px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid #eee;
  box-sizing:border-box;
}
.prd-swiper .thumb img{
  max-width:100%;
  max-height:100%;
  display:block;
}

/* ✅ 오버레이/숨김 강제 해제 (글자 안 보이는 원인 제거) */
.prd-swiper .prd-info{
  display:block !important;
  position:static !important;
  background:transparent !important;
  width:auto !important;
  height:auto !important;
}
.prd-swiper .prd-info ul,
.prd-swiper .prd-info li{
  display:block !important;
}
.prd-swiper .prd-info li,
.prd-swiper .prd-info li a,
.prd-swiper .prd-info li span{
  color:#111 !important;
}

/* 상품명 2줄 고정 */
.prd-swiper .prd-name a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.3em * 2);
  font-size:13px;
  line-height:1.3;
}

/* 가격(회원공개 문구 포함) */
.prd-swiper .prd-price{ margin-top:8px; }
.prd-swiper .prd-price .normal{ font-weight:600; }

/* 혹시 기존 CSS에서 dd를 숨기는 규칙이 남아있을 경우 대비 */
#contentWrap.best_item_wrap .item-list dd,
.best_item_wrap .item-list dd,
#md_pick_swiper .item-list dd{
  display:block !important;
  position:static !important;
  background:transparent !important;
}
/* ✅ 박스 안 박스(이중 테두리) 제거 */
.prd-swiper .thumb { 
  border: 1px solid #eee !important;   /* 바깥 박스만 살리고 */
  padding: 0 !important;
  background: #fff !important;
}

/* 스킨이 img/a에 주는 테두리 제거 */
.prd-swiper .thumb a,
.prd-swiper .thumb img{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 혹시 img에 배경박스 들어가면 이것도 제거 */
.prd-swiper .thumb img{
  background: transparent !important;
}
#content { width:auto; }

/* =========================
   MAIN BANNER
   ========================= */
#main_bnr_swiper { width:100%; margin-bottom:100px; }
#main_bnr_swiper .swiper-slide img { width:100%; display:block; }
#main_bnr_swiper .swiper-pagination-bullet {
  opacity:1 !important;
  background:transparent !important;
  border:1px solid #000;
  margin:0 6px !important;
}
#main_bnr_swiper .swiper-pagination-bullet-active { background:#000 !important; }

/* =========================
   3단 공통 레이아웃
   ========================= */
:root{
  --prdW: 1280px;
  --thumb: 260px;
  --arrow: 44px;
}

.product-wrap.prd_section{
  width:var(--prdW);
  margin:0 auto 90px;
  position:relative;
}

.prd_section .cateTit{ text-align:center; margin:0 0 28px; }
.prd_section .cateTit h3{ margin:0; letter-spacing:0.55em; }

/* Swiper 영역(화살표 공간 확보) */
.prd-swiper{
  width:var(--prdW);
  margin:0 auto;
  position:relative;
  overflow:hidden;
  padding:0 70px;              /* 화살표 들어갈 공간 */
  box-sizing:border-box;
}

.prd-swiper .swiper-wrapper{ display:flex; align-items:flex-start; }
.prd-swiper .swiper-slide{ flex-shrink:0; }

/* 상품 카드 */
.prd-swiper .item-list{ margin:0; text-align:center; }

/* 썸네일 “바깥 박스”만 보더 */
.prd-swiper .thumb{
  width:100%;
  height:var(--thumb);
  border:1px solid #eee;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 14px;
  overflow:hidden;
}
.prd-swiper .thumb a{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.prd-swiper .thumb img{
  max-width:100%;
  max-height:100%;
  display:block;
  border:0 !important;         /* ✅ “박스 안 박스” 원인 차단 */
  outline:0 !important;
}

/* 상품명 2줄 고정 + 가격 줄 정렬 */
.prd-swiper .prd-info{ display:block !important; position:static !important; background:transparent !important; }
.prd-swiper .prd-info ul{ display:block; margin:0; padding:0; }
.prd-swiper .prd-info li{ list-style:none; color:#111; }

.prd-swiper .prd-name{ margin:0 0 8px; }
.prd-swiper .prd-name a{
  color:#111;
  font-size:13px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.3em * 2);
}
.prd-swiper .prd-price .normal{ font-weight:600; }

/* =========================
   ✅ 3단 화살표 완전 통일
   - 썸네일 박스(260px) 정중앙
   ========================= */

/* Swiper 기본 after 제거 */
.prd-swiper .swiper-button-prev:after,
.prd-swiper .swiper-button-next:after{
  content:"" !important;
}

/* 버튼 공통 */
.prd-swiper .swiper-button-prev,
.prd-swiper .swiper-button-next{
  width:var(--arrow) !important;
  height:var(--arrow) !important;
  top:calc(var(--thumb) / 2) !important;  /* ✅ 썸네일 정중앙 */
  transform:translateY(-50%) !important;
  margin-top:0 !important;
  z-index:50 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* 컨테이너 안쪽에 위치(잘림 방지) */
.prd-swiper .swiper-button-prev{ left:18px !important; }
.prd-swiper .swiper-button-next{ right:18px !important; }

/* 동일 이미지 적용 */
.prd-swiper .swiper-button-prev{
  background:url("//skin.makeshop.co.kr/skin/blossom/img/ico_arrow_prev.png") no-repeat center/contain !important;
}
.prd-swiper .swiper-button-next{
  background:url("//skin.makeshop.co.kr/skin/blossom/img/ico_arrow_next.png") no-repeat center/contain !important;
}
/* ====== 카드 폭 고정(뚱뚱해짐 방지) ====== */
.prd-swiper .swiper-slide{
  width:260px !important;     /* 카드 폭 고정 */
}

/* swiper가 임의로 늘리지 못하게 */
.prd-swiper .swiper-wrapper{
  align-items:flex-start;
}

/* 썸네일 박스도 카드 폭에 맞춤 */
.prd-swiper .thumb{
  width:260px !important;
  height:260px !important;
  margin-left:auto;
  margin-right:auto;
}

/* 양쪽 여백(화살표 공간) 포함해서 4개가 예쁘게 맞도록 */
.prd-swiper{
  padding:0 70px !important;
}
/* ✅ 1) 타이틀( MANO NEW ARRIVAL / MANO BEST ITEM / MANO PICK ) 위로 올리기 */
.prd_section .cateTit h3{
  position: relative;
  top: -20px;   /* 숫자 더 키우면( -14, -18 ) 더 위로 올라감 */
}

/* ✅ 2) 타이틀이 단락 사이 여백 중앙에 오게: 위/아래 여백 조절 */
.prd_section .cateTit{
  margin-top: 0px;     /* 타이틀 위 여백 (필요하면 -10px도 가능) */
  margin-bottom: 5px; /* 타이틀 아래 여백 (줄이면 더 위로 붙음) */
}

/* ✅ 3) 단락 전체 간격(NEW/BEST/MD 사이)도 같이 맞추고 싶으면 이것만 */
.prd_section{
  margin-bottom: 70px; /* 단락 간격: 70~120 사이로 취향대로 */
}
/* ✅ 타이틀 잘림 방지 */
.prd_section,
.prd_section .item-wrap,
.prd_section .cateTit{ overflow: visible !important; }

/* ✅ 타이틀 위치(위로) */
.prd_section .cateTit h3{
  position: relative;
  top: -50px; /* 필요시 -6 ~ -14 사이로 */
}

/* BASIC css end */

