/*
 * Vaporwave storefront overrides — loaded after master-styles.css.
 *
 * Holds the small delta between the crawled cafe24 skin and the native
 * Next.js port. Keep rules narrow and commented so we can fold them
 * back into the crawl or upstream to the design team later.
 */

/* #contents 폭 제한 (사용자 요청) */
.site-wrap {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* 상품 상세: imgArea(550px) + gap(80px) + infoArea(450px) = 1080px 을
 * 1160px(=1280 - boxarea 120px) 유효 공간 안에서 중앙 정렬.
 * float:left 를 제거하고 flex 로 전환, boxarea 자리를 padding-right 로 확보. */
.xans-product-detail .detailArea {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-right: 120px;
  box-sizing: border-box;
}
.xans-product-detail .imgArea,
.xans-product-detail .infoArea {
  float: none;
  flex-shrink: 0;
}

/* Login page: master-styles.css uses `a.btn-login` selector for absolute
 * positioning; our React component uses a <button> instead, so extend it.
 * box-sizing: content-box matches the original <a> element behavior so that
 * the 19px height + 31px padding renders at ~81px total (same as the live). */
button.btn-login {
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: content-box;
}

/* Bug 1: 헤더에서 /login 진입 시 폼이 좌측 정렬로 쏠림.
 *   master-styles.css 의 `.xans-member-login{display:inline-block}` 은 부모가
 *   `text-align:center` 일 때만 가운데 정렬됨. cafe24 원본은 contents 컨테이너가
 *   center 였지만 native 포팅의 #contents 는 기본 left 정렬이라 깨짐.
 *   xans-member-login 만 가운데로 잡고 내부 fieldset 콘텐츠는 원래대로 left 유지. */
#contents .xans-member-login {
  display: block;
  width: 430px;
  max-width: 100%;
  margin: 0 auto;
}

/* Login join button: Cafe24 renders .ec-base-button.gColumn as flex via a
 * base stylesheet we don't have; replicate so .btn-join fills the full
 * 430px .bx2 width rather than collapsing to .sizeM's 120px. */
.xans-member-login .login .ec-base-button.gColumn {
  display: flex;
}
.xans-member-login .login .ec-base-button.gColumn .btn-join {
  flex: 1;
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile layout unlock — the crawled master-styles.css pins `body` to
 * min-width:1280px so every site-wrap / inner container is 1280px wide
 * regardless of viewport. Unlock the min-width on ≤768px viewports and
 * let inline-block children wrap naturally. */
@media (max-width: 768px) {
  body {
    min-width: 0 !important;
  }
  .top-menu-wrap,
  .logo-wrap,
  .cate-wrap,
  .top-menu-wrap .inner,
  .cate-wrap .inner,
  .top-menu-wrap .site-wrap,
  .logo-wrap .site-wrap,
  .cate-wrap .site-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .logo-wrap .search {
    float: none !important;
    width: 100% !important;
    padding: 10px !important;
  }
  .logo-wrap .logo img,
  .menu-logo img {
    max-width: 60% !important;
    height: auto !important;
  }
}

/* Issue 5 — 좌우 여백 + 반응형 썸네일.
 * master-styles.css 가 body{min-width:1280px} + .site-wrap{width:1280px} 으로 데스크탑 너비를
 * 픽셀 고정해 1280px 미만 뷰포트에서 가로 스크롤이 발생하고 썸네일도 줄지 않는다.
 * - 1280px 초과: site-wrap 좌우에 24px 패딩으로 가장자리 숨통.
 * - 769~1280px: body min-width 풀고 site-wrap 을 100% 폭 + 24px 패딩으로 유체화 →
 *   .grid5 > li{width:20%} 가 자동으로 비율 축소되어 썸네일도 함께 줄어듦.
 * (≤768px 모바일 분기는 기존 블록에서 처리됨) */
@media (min-width: 1281px) {
  .site-wrap {
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (min-width: 769px) and (max-width: 1280px) {
  body {
    min-width: 0 !important;
  }
  .site-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* prdList 의 min-width:756px 가 좁은 데스크탑에서 가로스크롤을 만든다 */
  .prdList {
    min-width: 0 !important;
  }
  .cate-wrap .xans-layout-category.gnb,
  .cate-wrap #category.gnb {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* overflow-x:auto 가 CSS 스펙상 overflow-y:auto 를 강제해 절대위치 서브메뉴를
   * 잘라낸다. 좁은 데스크탑에서는 서브메뉴를 숨기고 부모 카테고리 링크로 이동. */
  .cate-wrap #category.gnb > li .sub-category {
    display: none !important;
  }
}

/* Issue 6 — 하단 dp-tab-wrap 탭별 상품 노출.
 * stab() jQuery 플러그인이 .show()/.hide() 로 토글하지만 초기 SSR/하이드레이션 전에는
 * .tab-cont-2/.tab-cont-3 도 함께 보여 "입문자추천에 일괄 노출"처럼 보인다.
 * 기본은 숨기고 stab 이 첫 탭만 .show() 하도록 한다. */
#dp-tab1-cont .tab-cont-2,
#dp-tab1-cont .tab-cont-3 {
  display: none;
}

/* Mobile category gnb — horizontal scroll instead of clipping
 * (master-styles.css fixes `.gnb` to width:1180px for desktop; on ≤768px
 * viewports we need to override with !important since the desktop rules
 * have equal or higher specificity). */
@media (max-width: 768px) {
  .cate-wrap .xans-layout-category.gnb,
  .cate-wrap #category.gnb {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    scrollbar-width: none;
  }
  .cate-wrap .xans-layout-category.gnb::-webkit-scrollbar {
    display: none;
  }
  .cate-wrap .xans-layout-category.gnb > li {
    margin-left: 0 !important;
    margin-right: 14px !important;
    float: none !important;
  }
  .cate-wrap .xans-layout-category.gnb > li .sub-category {
    display: none !important;
  }
  /* PC 에서는 #category { margin-left:50px } 가 햄버거(.all-cate, 40px) 영역을
   * 비워주지만 모바일은 햄버거가 숨겨지므로 좌측 마진을 제거한다. */
  .cate-wrap #category.gnb {
    margin-left: 0 !important;
  }
}

/* 좌측 햄버거(.all-cate) 클릭 토글 — 원본은 hover 만 지원하지만,
 * VaporwaveAllToggle 클라이언트 컴포넌트가 .is-open 을 토글해 클릭으로도
 * 드로어를 고정 노출시킨다. hover 규칙(:hover .all-menu-box) 은 그대로 유지. */
.all-cate.all-toggle.is-open > .all-menu-box {
  visibility: visible;
  opacity: 0.98;
}

/* 햄버거 버튼이 GNB UL 와 같은 stacking context 에서 뒤에 그려져 클릭이
 * 가로채지는 문제 — z-index 로 위에 올려 hover/click 을 보장한다. */
.cate-wrap .all-cate.all-toggle {
  z-index: 2;
}

/* sub-category 드롭다운이 bxSlider 히어로 배너에 가려지는 문제 수정.
 * bxSlider 초기화 시 .bx-viewport 에 transform + position 이 적용되어
 * stacking context 가 생성되고, ul#bxslider1 에 z-index:1 inline 스타일이
 * 추가됨. cate-wrap 의 z-index(97)를 충분히 높여 서브메뉴가 히어로 영역
 * 위에 확실히 렌더링되도록 보장한다. */
.cate-wrap {
  z-index: 1000;
}

/* ═══════════════════════════════════════════════════════════════
   장바구니 / 주문서 페이지 CSS — 2026-04-26
   master-styles.css 가 ec-base-step, ec-base-prdInfo, cart-container,
   totalSummary, ec-base-qty, ec-base-prdEmpty 규칙을 포함하지 않는다.
   site-globals.css 가 이 규칙들을 가지고 있지만 vaporwave 는 의도적으로
   globals 미로드(project_globals_css_per_site). 따라서 카트/주문 화면에
   필요한 최소 규칙을 여기에 직접 추가. juicebox master-styles + site-globals
   원본을 그대로 가져왔다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 페이지 상단 path / 타이틀 ─────────────────────────────────── */
.section.path {
  text-align: right;
  font-size: 12px;
  color: #888;
  margin: 20px 0 0;
}
.section.path span {
  display: none;
}
.section.path ol {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}
.section.path ol li {
  display: inline-block;
}
.section.path ol li:not(:last-child):after {
  content: ">";
  margin: 0 6px;
  color: #ccc;
}
.section.path ol li strong {
  color: #000;
  font-weight: normal;
}
.section.titleArea,
.titleArea {
  margin: 20px 0 30px;
}
.section.titleArea h2,
.titleArea h2 {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin: 0;
}
.section.titleArea p.banner,
.titleArea p.banner {
  display: block;
  margin: 0 0 16px;
}

/* ── 단계 인디케이터(1.장바구니 → 2.주문서작성 → 3.주문완료) ─── */
.ec-base-step {
  margin: 40px 0 50px;
  text-align: center;
  list-style: none;
  padding: 0;
}
.ec-base-step .step,
.ec-base-step ol.step {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ec-base-step li {
  display: inline-block;
  font-size: 14px;
  color: #939393;
  list-style: none;
}
.ec-base-step li:not(:last-child):after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  border-left: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  margin: -2px 30px 0;
}
.ec-base-step .selected {
  color: #000;
  font-weight: bold;
}

/* ── 탭 네비게이션 (국내배송상품 (N)) ─────────────────────────── */
.ec-base-tab.typeNav .menu {
  display: flex;
  border-bottom: 1px solid #868686;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.ec-base-tab.typeNav .menu li {
  flex: 0 1 auto;
  background: #f6f6f6;
}
.ec-base-tab.typeNav .menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border: 1px solid #e5e5e5;
  border-bottom: 0;
  color: #545454;
  background: #f6f6f6;
  text-decoration: none;
  box-sizing: border-box;
}
.ec-base-tab.typeNav .menu li.selected a {
  position: relative;
  border-color: #868686;
  color: #000;
  font-weight: bold;
  background: #fff;
}
.ec-base-tab.typeNav .menu li.selected a:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #fff;
}

/* ── 탭 우측 안내(보관 기간 등) ──────────────────────────────── */
.xans-order-tabinfo {
  position: relative;
}
.xans-order-tabinfo p.right {
  position: absolute;
  right: 0;
  bottom: 24px;
  margin: 0;
  font-size: 12px;
  color: #909090;
}
@media all and (max-width: 1024px) {
  .xans-order-tabinfo p.right {
    position: static;
    margin: 6px 0 14px;
    text-align: right;
    padding: 0 4%;
  }
}

/* ── 일괄 작업 영역 (전체선택/선택삭제) ────────────────────────── */
.ec-base-button.typeMulti {
  position: relative;
  margin: 10px 0;
}
.ec-base-button.typeMulti .gLeft {
  text-align: left;
}
.ec-base-button.typeMulti .gLeft a + a {
  margin-left: 4px;
}
a.btnNormal.sizeS,
a.btnSubmit.sizeS {
  display: inline-block;
  padding: 8px 14px;
  height: 32px;
  font-size: 12px;
  line-height: 1;
  border-radius: 3px;
  text-decoration: none;
  vertical-align: middle;
  box-sizing: border-box;
  white-space: nowrap;
}
a.btnNormal.sizeS {
  border: 1px solid #c7c7c7;
  color: #555;
  background: #fff;
}
a.btnNormal.sizeS:hover {
  border-color: #000;
  color: #000;
}
a.btnSubmit.sizeS {
  border: 1px solid transparent;
  color: #fff;
  background: #333;
}
a.btnSubmit.sizeL,
a.btnNormal.sizeL {
  display: inline-block;
  padding: 14px 22px;
  height: 50px;
  font-size: 15px;
  line-height: 1;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  white-space: nowrap;
}
a.btnSubmit.sizeL {
  border: 1px solid transparent;
  color: #fff;
  background: #333;
}
a.btnNormal.sizeL {
  border: 1px solid #c7c7c7;
  color: #555;
  background: #fff;
}
a.btnSubmit.gFull,
a.btnNormal.gFull {
  display: block;
  width: 100%;
}
a.btnSubmit.gFull + a.btnNormal.gFull,
a.btnNormal.gFull + a.btnSubmit.gFull,
a.btnSubmit.gFull + a.btnSubmit.gFull,
a.btnNormal.gFull + a.btnNormal.gFull {
  margin-top: 6px;
}

/* ── 카트 그리드 (PC: 좌 상품리스트 + 우 결제요약, 모바일: 세로 적층) ── */
.cart-container {
  height: auto;
  overflow: visible;
}
.xans-order-basketpackage .ec-base-prdEmpty + .cart-container {
  display: none;
}

/* ── 카트 한 줄 (썸네일 + 정보 + 옵션 + 수량 + 합계 + 버튼) ───── */
.ec-base-prdInfo {
  position: relative;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  background: #fff;
  padding: 20px 0;
}
.ec-base-prdInfo .prdBox {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.ec-base-prdInfo .check {
  display: inline-block;
  margin: 0 10px 0 0;
}
.ec-base-prdInfo .check label {
  margin: 0;
}
.ec-base-prdInfo .thumbnail {
  overflow: hidden;
  width: 83px;
  height: 83px;
  margin: 0 15px 0 0;
  border: 1px solid #d5d5d5;
  box-sizing: border-box;
  flex-shrink: 0;
}
.ec-base-prdInfo .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ec-base-prdInfo .description {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.ec-base-prdInfo .description .prdName {
  display: block;
  margin: 0 0 6px;
  font-weight: bold;
  font-size: 14px;
}
.ec-base-prdInfo .description .prdName a {
  color: #000;
  text-decoration: none;
}
.ec-base-prdInfo .description .prdName a:hover {
  text-decoration: underline;
}
.ec-base-prdInfo .description ul.price {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ec-base-prdInfo .description ul.price li {
  font-size: 13px;
  color: #555;
}
.ec-base-prdInfo .description ul.price li strong {
  font-weight: bold;
  color: #000;
}
.ec-base-prdInfo .optionGroup {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
  flex-basis: 100%;
}
.ec-base-prdInfo .optionGroup li {
  font-size: 12px;
  color: #777;
  line-height: 1.6;
}
.ec-base-prdInfo .optionGroup .name a.btnText {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 11px;
  border: 1px solid #ddd;
  color: #555;
  background: #fff;
  text-decoration: none;
  vertical-align: middle;
}
.ec-base-prdInfo .quantity {
  margin: 16px 0 0;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ec-base-prdInfo .quantity .label {
  font-size: 12px;
  color: #777;
}
.ec-base-prdInfo .quantity > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ec-base-prdInfo .sumPrice {
  margin: 12px 0 0;
  flex-basis: 100%;
  font-size: 14px;
}
.ec-base-prdInfo .sumPrice strong {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.ec-base-prdInfo .buttonGroup {
  margin: 12px 0 0;
  flex-basis: 100%;
  display: flex;
  gap: 6px;
}
a.btnDelete {
  display: inline-block;
  padding: 8px 14px;
  height: 32px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #c7c7c7;
  border-radius: 3px;
  color: #555;
  background: #fff;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
}
.ec-base-prdInfo .buttonGroup .btnSubmit {
  display: inline-block;
  padding: 8px 14px;
  height: 32px;
  font-size: 12px;
  line-height: 1;
  border-radius: 3px;
  border: 1px solid transparent;
  color: #fff;
  background: #333;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
}

/* ── 수량 위젯 (- 1 +) ────────────────────────────────────────── */
.ec-base-qty {
  position: relative;
  display: inline-block;
  width: 105px;
  padding: 0 30px;
  vertical-align: top;
  box-sizing: border-box;
}
.ec-base-qty input[type="text"] {
  width: 45px;
  height: 30px;
  padding: 0;
  line-height: 28px;
  margin-left: -1px;
  border: 1px solid #e5e5e5;
  text-align: center;
  box-sizing: border-box;
  font-size: 13px;
}
.ec-base-qty .up,
.ec-base-qty .down {
  position: absolute;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 150%;
  color: transparent;
  font-size: 1px;
  background: #fff;
  text-decoration: none;
}
.ec-base-qty .up {
  right: 0;
}
.ec-base-qty .down {
  left: 0;
}
.ec-base-qty .up:before,
.ec-base-qty .down:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1px;
  margin: 0 0 0 -4.5px;
  background: #000;
}
.ec-base-qty .up:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 9px;
  margin: -4.5px 0 0 0;
  background: #000;
}
a.btnNormal.sizeQty {
  display: inline-block;
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  border: 1px solid #c7c7c7;
  border-radius: 3px;
  color: #555;
  background: #fff;
  text-decoration: none;
  vertical-align: middle;
  box-sizing: border-box;
}

/* ── 결제예정 요약 박스 (totalSummary) ──────────────────────── */
.totalSummary {
  padding: 20px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.totalSummary__item {
  margin: 0 0 14px;
}
.totalSummary__item:last-child {
  margin: 0;
}
.totalSummary__item .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}
.totalSummary__item .heading .title,
.totalSummary__item .heading h4.title {
  font-size: 13px;
  font-weight: normal;
  color: #555;
  margin: 0;
}
.totalSummary__item .heading .data {
  text-align: right;
  font-size: 14px;
  color: #000;
}
.totalSummary__item .heading .data strong {
  font-weight: bold;
}
.totalSummary__item.totalAmount {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}
.totalSummary__item.totalAmount .heading .title,
.totalSummary__item.totalAmount .heading h4.title {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.totalSummary__item.totalAmount .heading .data strong {
  font-size: 18px;
  color: #000;
}

/* ── 카트 비어있음 상태 ───────────────────────────────────────── */
.ec-base-prdEmpty {
  padding: 80px 0;
  text-align: center;
  font-size: 14px;
  color: #777;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.ec-base-prdEmpty .icon {
  display: block;
  margin: 0 auto 14px;
}

/* ── 하단 주문 버튼 (orderFixItem) ────────────────────────────── */
#orderFixItem {
  margin: 16px 0 0;
}
#orderFixItem .ec-base-button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ── PC: 1025px 이상에서 좌(상품) + 우(요약) 2열 레이아웃 ─────── */
@media all and (min-width: 1025px) {
  .cart-container {
    display: flex;
    align-items: flex-start;
    gap: 47px;
  }
  .cart-product {
    flex: 1;
    min-width: 0;
  }
  .cart-total {
    position: relative;
    width: 300px;
    flex-shrink: 0;
  }
  .cart-total .sticky {
    position: sticky;
    top: 100px;
  }
  /* 데스크탑 카트 행: thumbnail|description|qty|sum|buttons 가로 배치 */
  .ec-base-prdInfo .prdBox {
    align-items: flex-start;
  }
  .ec-base-prdInfo .description {
    padding-right: 20px;
  }
  .ec-base-prdInfo .quantity {
    flex-basis: auto;
    width: 130px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }
  .ec-base-prdInfo .sumPrice {
    flex-basis: auto;
    width: 110px;
    margin: 0;
    padding: 0;
    text-align: right;
    flex-shrink: 0;
    align-self: center;
  }
  .ec-base-prdInfo .buttonGroup {
    flex-basis: auto;
    width: 110px;
    margin: 0 0 0 10px;
    padding: 0;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .ec-base-prdInfo .buttonGroup a {
    text-align: center;
  }
  .ec-base-prdInfo .optionGroup {
    flex-basis: 100%;
    margin: 6px 0 0;
    padding-left: 98px;
  }
  .xans-order-basketpackage .xans-order-tabinfo {
    margin: 40px 0 30px;
  }
}

/* ── 모바일: 세로 적층, 좌우 4% 여백 ─────────────────────────── */
@media all and (max-width: 1024px) {
  .section.path,
  .section.titleArea,
  .section.ec-base-step,
  .xans-order-basketpackage {
    box-sizing: border-box;
    padding-left: 4%;
    padding-right: 4%;
  }
  .cart-container {
    box-sizing: border-box;
    padding-left: 4%;
    padding-right: 4%;
  }
  .ec-base-step li:not(:last-child):after {
    margin: -2px 15px 0;
  }
  .totalSummary {
    margin: 20px 0;
  }
  /* 모바일에서는 카트 행도 세로 적층 (썸네일 + 정보가 한 줄, 나머지는 아래) */
  .ec-base-prdInfo .description {
    padding-right: 30px;
  }
  .ec-base-prdInfo a.btnDelete {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 150%;
  }
  .ec-base-prdInfo a.btnDelete:before,
  .ec-base-prdInfo a.btnDelete:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1px;
    background: #888;
    text-indent: 0;
  }
  .ec-base-prdInfo a.btnDelete:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .ec-base-prdInfo a.btnDelete:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* ── 쇼핑계속하기 (바닥 CTA 그룹의 세 번째 버튼) ──────────────── */
a.btnContinueShopping,
a.btnNormal.gFull.btnContinueShopping {
  border: 1px solid #c7c7c7;
  color: #555;
  background: #fff;
}

/* ── 이용안내 박스 (xans-order-basketguide / ec-base-help) ──── */
.xans-order-basketguide.ec-base-help {
  margin: 30px 0 40px;
  border: 1px solid #d6d4d4;
  background: #fff;
}
.xans-order-basketguide.ec-base-help h3 {
  margin: 0;
  padding: 9px 0 6px 14px;
  font-size: 12px;
  font-weight: bold;
  color: #101010;
  background: #fbfbfb;
  border-bottom: 1px solid #d6d4d4;
}
.xans-order-basketguide.ec-base-help .inner {
  padding: 14px 18px 18px;
}
.xans-order-basketguide.ec-base-help h4 {
  margin: 14px 0 -2px;
  font-size: 12px;
  font-weight: normal;
  color: #404040;
}
.xans-order-basketguide.ec-base-help h4:first-child {
  margin-top: 0;
}
.xans-order-basketguide.ec-base-help ol {
  margin: 12px 0 0 16px;
  padding: 0 0 0 6px;
  list-style: decimal outside;
}
.xans-order-basketguide.ec-base-help ol li {
  font-size: 13px;
  color: #707070;
  line-height: 18px;
  padding: 2px 0 2px 6px;
}
@media all and (max-width: 1024px) {
  .xans-order-basketguide.ec-base-help {
    margin: 24px 4% 30px;
  }
}

/* .ec-base-tab.typeMenu — cafe24 호스팅 base CSS 에만 있어 크롤에서 누락됨.
 * damivape master-styles.css 에서 추출해 PC override 로 보강 (2026-04-27). */
.ec-base-tab.typeMenu{display:flex;margin:10px 0;}
.ec-base-tab.typeMenu ul{display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 auto;}
.ec-base-tab.typeMenu li{height:36px;white-space:nowrap;float:none;}
.ec-base-tab.typeMenu li a{line-height:30px;color:#6d6d6d;}
.ec-base-tab.typeMenu .button{display:inline-block;margin:0 30px 0 10px;padding-bottom:5px;}
.ec-base-tab.typeMenu .button.active{position:relative;font-weight:bold;color:#000;}
.ec-base-tab.typeMenu .button.active::after{content:'';position:absolute;right:0;left:0;bottom:0;height:1px;background:#000;}
.ec-base-tab.typeMenu ul > li{position:relative;}
.ec-base-tab.typeMenu ul > li .iconWrap{display:block;position:relative;}
.ec-base-tab.typeMenu ul > li .iconWrap:after{content:"";position:absolute;top:-24px;right:15px;display:inline-block;width:7px;height:7px;border:1px solid #6d6d6d;border-left:0;border-bottom:0;transform:rotate(45deg);}
.ec-base-tab.typeMenu ul > li > ul,.ec-base-tab.typeMenu ul > li > ul > li ul{position:absolute;top:35px;left:0;display:inline-block;border:1px solid #e5e5e5;padding:15px 0 15px 20px;background-color:#fff;}
.ec-base-tab.typeMenu ul > li > ul > li{position:static;padding-right:50px;}
.ec-base-tab.typeMenu ul > li > ul > li .button{margin:0;}
.ec-base-tab.typeMenu ul > li > ul > li .iconWrap:after{top:-19px;right:-30px;}
.ec-base-tab.typeMenu ul > li > ul > li ul{top:-1px;left:100%;}
.ec-base-tab.typeMenu ul > li > ul > li ul > li{padding-right:50px;}
.ec-base-tab.typeMenu ul > li > ul{display:none;}
.ec-base-tab.typeMenu ul > li > ul > li ul{display:none;}
.ec-base-tab.typeMenu ul > li > ul.active{display:inline-block;}
.ec-base-tab.typeMenu ul > li > ul > li ul.active{display:inline-block;}

/* menupackage 카테고리 탭 보정 (2026-04-27).
 * ec-base-tab.css 의 li{background:#f5f5f5} 제거 + menuCategory > li / > a 규칙 재적용. */
.ec-base-tab .menu li{background:none;}
.xans-product-menupackage .menuCategory > li{
  position:relative;
  width:177px;
  display:inline-block;
  vertical-align:top;
  margin:2px;
  border:1px solid #e5e5e5;
}
.xans-product-menupackage .menuCategory > li > a{
  display:block;
  color:#888;
  font-size:13px;
  padding:10px 8px;
  line-height:16px;
  height:16px;
  transition:color .25s,font .25s;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align: left;
}

.ec-base-tab .menu li a{border-right:0;border-top:0;}
.ec-base-tab .menu{border-bottom-color:transparent;}

/* 마이페이지 회원정보수정 제출 버튼 */
.btnSubmitFix.sizeM {
  height: 48px;
  padding: 0 40px;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border: 0;
  font-size: 15px;
  cursor: pointer;
}

.ec-base-product .prdList {
  text-align: center;
}

/* ============================================================
 * Board: Gallery grid, pagination, list package, read package
 * (site-globals.css 미로드 대신 vaporwave 전용 override로 보강)
 * ============================================================ */

/* --- Gallery board grid (4-column photo review) --- */
.boardList ul.grid4 {
  margin: 0;
  padding: 0;
  font-size: 0;
}
.boardList ul.grid4 > li {
  display: inline-block;
  vertical-align: top;
  width: calc(25% - 19px);
  margin-left: 25px;
  margin-bottom: 40px;
  font-size: 15px;
  list-style: none;
  position: relative;
  box-sizing: border-box;
}
.boardList ul.grid4 > li:nth-child(4n+1) {
  margin-left: 0;
}
.boardList ul.grid4 > li a {
  display: block;
  text-decoration: none;
  color: #000;
}
.boardList ul.grid4 > li .thumbnail {
  display: block;
  overflow: hidden;
  border-radius: 0.9rem;
  margin-bottom: 10px;
}
.boardList ul.grid4 > li .thumbnail img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 0.9rem;
}
.boardList ul.grid4 > li .summary {
  display: block;
  padding: 0 4px;
}
.boardList ul.grid4 > li .summary .subject {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #000;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boardList ul.grid4 > li .summary .write {
  display: block;
  font-size: 13px;
  color: #6d6d6d;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .boardList ul.grid4 > li {
    width: calc(50% - 10px);
    margin-left: 20px;
  }
  .boardList ul.grid4 > li:nth-child(4n+1) {
    margin-left: 0.8rem;
  }
  .boardList ul.grid4 > li:nth-child(2n+1) {
    margin-left: 0;
  }
}
@media (max-width: 768px) {
  .xans-board-listpackage .ec-base-table.typeList table col:nth-child(1),
  .xans-board-listpackage .ec-base-table.typeList table col:nth-child(4),
  .xans-board-listpackage .ec-base-table.typeList table col:nth-child(6) {
    width: 0 !important;
  }
}

/* --- Pagination --- */
.ec-base-paginate.typeList {
  margin: 40px 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.ec-base-paginate.typeList > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 0;
  background: #fff;
}
.ec-base-paginate.typeList > a:before {
  content: "";
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background: url(/skin_img/paginate__normal.svg) no-repeat center / contain;
}
.ec-base-paginate.typeList > a:first-child:before,
.ec-base-paginate.typeList > a.first + a:before {
  transform: rotate(180deg);
}
.ec-base-paginate.typeList > a.first:before {
  background-image: url(/skin_img/paginate__double.svg);
  transform: rotate(180deg);
}
.ec-base-paginate.typeList > a.last:before {
  background-image: url(/skin_img/paginate__double.svg);
}
.ec-base-paginate.typeList ol {
  display: inline-flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ec-base-paginate.typeList li {
  display: inline-block;
}
.ec-base-paginate.typeList li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 13px;
  color: #999;
  text-decoration: none;
  border-radius: 4px;
}
.ec-base-paginate.typeList li a.this {
  color: #000;
  font-weight: bold;
  background: #f5f5f5;
}
.ec-base-paginate.typeList li a:hover {
  color: #333;
  background: #f0f0f0;
}

/* --- Board list package wrapper --- */
.xans-board-listpackage {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 15px 40px;
}
.xans-board-listpackage .path {
  display: none;
}
.xans-board-listpackage .ec-base-table.typeList {
  border-top: 2px solid #222;
}
.xans-board-listpackage .ec-base-table.typeList table {
  display: table !important;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.xans-board-listpackage .ec-base-table.typeList thead {
  display: table-header-group !important;
}
.xans-board-listpackage .ec-base-table.typeList tbody {
  display: table-row-group !important;
}
.xans-board-listpackage .ec-base-table.typeList tr {
  display: table-row !important;
  position: static !important;
  padding: 0 !important;
  border-bottom: 1px solid #e8e8e8;
}
.xans-board-listpackage .ec-base-table.typeList tr::after {
  display: none !important;
}
.xans-board-listpackage .ec-base-table.typeList th {
  display: table-cell !important;
  padding: 16px 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  background: #f6f6f6;
  border-bottom: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.xans-board-listpackage .ec-base-table.typeList td {
  display: table-cell !important;
  float: none !important;
  height: auto;
  padding: 16px 10px 14px;
  font-size: 14px;
  color: #6d6d6d;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #e8e8e8;
  line-height: 22px;
}
.xans-board-listpackage .ec-base-table.typeList td.subject {
  text-align: left;
  padding-left: 15px;
}
.xans-board-listpackage .ec-base-table.typeList td.subject a {
  color: #111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
}
.xans-board-listpackage .ec-base-table.typeList td.subject a:hover {
  text-decoration: underline;
}
.xans-board-listpackage .ec-base-table.typeList td.chk.no {
  color: #6d6d6d;
  font-size: 14px;
}
.xans-board-listpackage .ec-base-table.typeList .displaynone {
  display: none !important;
}
.xans-board-listpackage .ec-base-table.typeList .RTMI {
  display: none;
}
.xans-board-listpackage .ec-base-table.typeList td .comment {
  display: none;
}
.xans-board-listpackage .ec-base-table.typeList.notice {
  border-bottom: 0;
  margin-bottom: 0;
}
.xans-board-listpackage .ec-base-table.typeList.notice + .ec-base-table.typeList {
  border-top: 0;
}
.xans-board-listpackage .ec-base-table.typeList .message {
  padding: 60px 0;
  text-align: center;
  color: #999;
  font-size: 13px;
  border-bottom: 1px solid #e8e8e8;
}
@media (max-width: 768px) {
  .xans-board-listpackage .ec-base-table.typeList colgroup col {
    width: auto !important;
  }
  .xans-board-listpackage .ec-base-table.typeList th {
    display: none !important;
  }
  .xans-board-listpackage .ec-base-table.typeList th:nth-child(2) {
    display: table-cell !important;
  }
  .xans-board-listpackage .ec-base-table.typeList td:not(.subject) {
    display: none !important;
  }
  .xans-board-listpackage .ec-base-table.typeList td.subject {
    width: 100%;
    padding: 14px 10px;
  }
}
.xans-board-listpackage .ec-base-button.gBottom {
  display: flex;
  justify-content: flex-end;
  margin: 15px 0 0;
  padding: 0;
}
.xans-board-listpackage .ec-base-button.gBottom .gRight {
  float: none;
}
.xans-board-listpackage .btnSubmitFix.sizeM {
  display: inline-block;
  padding: 8px 25px;
  font-size: 13px;
  color: #fff;
  background: #555;
  border: 1px solid #555;
  text-decoration: none;
  line-height: 1.4;
  height: auto;
}
.xans-board-listpackage .board-total-count {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: #999;
}

/* --- Board read package (detail page) --- */
.xans-board-readpackage {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 15px 40px;
}
.xans-board-readpackage .titleArea {
  text-align: center;
  padding: 30px 0 15px;
}
.xans-board-readpackage .path {
  display: none;
}
.xans-board-readpackage .ec-base-table.typeView {
  border-top: 2px solid #222;
}
.xans-board-readpackage .ec-base-table.typeView table {
  width: 100%;
  border-collapse: collapse;
}
.xans-board-readpackage .ec-base-table.typeView th {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  background: #f6f6f6;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
  white-space: nowrap;
}
.xans-board-readpackage .ec-base-table.typeView td {
  padding: 12px 20px;
  font-size: 13px;
  color: #333;
  border-bottom: 1px solid #e5e5e5;
}
.xans-board-readpackage .board-detail-content {
  padding: 30px 20px;
  min-height: 200px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}
.xans-board-readpackage .board-detail-content img {
  max-width: 100%;
  height: auto;
}
.xans-board-readpackage .ec-base-button.gBottom {
  display: flex;
  margin: 20px 0 0;
}
.xans-board-readpackage .btnNormal.sizeM {
  display: inline-block;
  padding: 8px 25px;
  font-size: 13px;
  color: #555;
  border: 1px solid #d5d5d5;
  background: #fff;
  text-decoration: none;
}

/* --- Board tab active state (.this = Cafe24 convention) --- */
.ec-base-tab.typeMenu .button.this {
  position: relative;
  font-weight: bold;
  color: #000;
}
.ec-base-tab.typeMenu .button.this::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 1px;
  background: #000;
}

/* --- Board total count --- */
.board-total-count {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: #999;
}