@charset "utf-8";
/* ===================================================================
   shop-refresh.css
   기존 style.css / common.css / common2.css는 그대로 두고, 이 파일을
   맨 나중에 불러와 톤(카드 박스감, 호버효과, 여백, 라운드)만 새로
   입힙니다. 마크업/클래스명은 건드리지 않으므로 기존 화면 전체와
   호환됩니다.
=================================================================== */

:root{
  --shop-border: #ececec;
  --shop-radius: 12px;
  --shop-shadow: 0 1px 2px rgba(17,17,17,.03), 0 10px 24px -14px rgba(17,17,17,.12);
  --shop-shadow-hover: 0 4px 10px rgba(17,17,17,.05), 0 18px 34px -16px rgba(17,17,17,.20);
}

/* ---------------------------------------------------------------
   상품 카드 — 박스감 + 호버 시 떠오르는 효과
   (.prd_list는 메인/신상품/세일/카테고리 등 여러 곳에서 재사용되므로
    전 영역에 공통 적용됩니다)
--------------------------------------------------------------- */
.prd_list li{
  background: #fff;
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius);
  padding: 16px 16px 20px;
  box-sizing: border-box;
  box-shadow: var(--shop-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.prd_list li:hover{
  transform: translateY(-4px);
  box-shadow: var(--shop-shadow-hover);
  border-color: #dfe3ea;
}
.prd_list li .img_box{
  border-radius: calc(var(--shop-radius) - 4px);
  background: #fafafa;
}
/* 카드에 패딩이 생겼으니 원래 폭 그대로 유지되도록 이미지영역 폭 보정 */
.prd_list li .img_box{ width: 100% !important; }
.prd_new_wrap .prd_list li{
  /* 이 섹션은 원래 테두리로 그리드를 구분했던 곳이라 카드형으로 전환 */
  border-width: 1px !important;
  margin: 0 20px 20px 0 !important;
  width: calc(25% - 15px) !important;
}
.prd_new_wrap .prd_list li:nth-child(4n){ margin-right: 0 !important; }

.prd_sale_wrap .prd_list li{ margin: 0 20px 0 0; }
.prd_sale_wrap .prd_list li:last-child{ margin-right: 0; }

.prd_list li .best{ border-radius: 0 0 8px 0; }
.prd_list li .wish_btn{
  background-color: rgba(255,255,255,.85);
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
}

/* ---------------------------------------------------------------
   헤더 — 살짝 더 차분하고 얇게
--------------------------------------------------------------- */
.header{ box-shadow: 0 1px 0 rgba(17,17,17,.06); }
.gnb_area{ border-top: 1px solid #f0f0f0; }

/* ---------------------------------------------------------------
   상품상세 이미지 영역도 카드감 부여
--------------------------------------------------------------- */
.prd_view_wrap .left_area .img_box{
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius);
  overflow: hidden;
}

/* ---------------------------------------------------------------
   버튼류 — 각진 사각형 → 라운드로 통일 (링크형 버튼 위주)
--------------------------------------------------------------- */
.center_area dl .lnk a{ border-radius: 999px; }
.all_cate .all_area{ border-radius: 0 0 var(--shop-radius) var(--shop-radius); box-shadow: var(--shop-shadow-hover); }
.sch_bar .popular_cont{ box-shadow: var(--shop-shadow-hover); }

/* ---------------------------------------------------------------
   PC 우측 퀵메뉴 — 카카오문의/선물하기 추가
   기존 항목(장바구니/주문배송/고객문의)의 이미지 스프라이트 배경은 그대로 두고,
   새로 추가한 두 항목(.quick_kakao, .quick_gift)에만 인라인 SVG 아이콘을 지정합니다.
   (외부 CDN 대신 SVG를 직접 인코딩해서 넣었으므로 네트워크 상황과 무관하게 항상 표시됩니다)
--------------------------------------------------------------- */
.quick_wrap .quick_lnk a.quick_kakao,
.quick_wrap .quick_lnk a.quick_gift{
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 32px 32px;
}
.quick_wrap .quick_lnk a.quick_kakao{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23391B1B' d='M12 3C6.48 3 2 6.58 2 11c0 2.86 1.87 5.37 4.68 6.79-.15.55-.97 3.55-1 3.78 0 0-.02.17.09.24.11.06.24.01.24.01.32-.04 3.68-2.41 4.26-2.82.55.08 1.12.12 1.73.12 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/%3E%3C/svg%3E");
}
.quick_wrap .quick_lnk a.quick_gift{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}