/*
 * Damivape storefront overrides — loaded after master-styles.css.
 */

/* 상품 리스트 화면에서만 본문 폭 제한 */
#container #contents.page-products-list { max-width: 1230px; }

/* 게시판 화면 본문 폭 제한 + 하단 여백 (notice/faq/inquiry/reviews 공통) */
#container #contents:has(> .xans-board-listpackage),
#container #contents:has(> .xans-board-readpackage),
#container #contents:has(> .xans-board-writepackage) {
  max-width: 1230px;
  margin: 0 auto 50px;
}

/* ── 햄버거 메뉴 dim 오버레이 ───────────────────────────────────
   master-styles.css 는 body.expand #layoutDimmed{display:block;} 만
   가지고 있고, base 스타일은 cafe24 인라인 스크립트에서 주입되던 것이
   사라져 비어있다. 모바일에서 aside 가 열렸을 때 본문을 어둡게
   덮어주기 위해 직접 정의한다. */
#layoutDimmed {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}

/* ── 하단 탭바 아이콘 균등 배치 ───────────────────────────────
   .bottom-nav__tabBar 는 display:flex 로만 정의돼 있어 아이콘이
   왼쪽으로 몰린다. 모바일에서 5개 아이콘(네비/검색/홈/Cart/마이쇼핑)
   이 화면 폭을 균등 분할하도록 정렬·배경·구분선 추가. */
.bottom-nav {
  background: #fff;
  border-top: 1px solid #e5e5e5;
}
.bottom-nav__tabBar {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  justify-content: space-around;
}
.bottom-nav__tabBar > li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.bottom-nav__tabBar > li > a,
.bottom-nav__tabBar > li > button {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
}
.bottom-nav__tabBar svg.icon {
  width: 24px;
  height: 24px;
}

/* globals.css 의 juicebox cafe24 dump 가 모바일에서 `#wrap .bottom-nav{bottom:7rem}`
   를 강제해 다미 탭바가 화면 중간에 떠있는 문제. 다미는 하단 고정. */
@media all and (max-width:1024px) {
  #wrap .bottom-nav { bottom: 0; }
}

/* ── QA 2026-04-24/25: 양쪽 여백 복원 ──────────────────────────
   원본 cafe24 는 `#container #contents {width:92%; margin:0 auto;}` 로
   모바일에서 4% 좌우 여백 확보. 우리 Next.js 앱은 #contents 래퍼를
   생성하지 않아 위 규칙이 적용 대상 없음. 실제 사용되는 페이지 래퍼에
   직접 좌우 padding 부여. body max-width 는 와이드모니터 보호용. */
body { max-width:1230px; }
@media all and (max-width:1024px) {
  .section.path,
  .section.titleArea,
  .section.ec-base-step,
  .xans-order-basketpackage,
  .xans-order-orderform,
  .xans-order-orderresult,
  .xans-myshop-orderhistorylistitem,
  .xans-myshop-orderhistoryhead,
  .myshopArea,
  .memberArea,
  .xans-member-join,
  .xans-member-login {
    box-sizing: border-box;
    padding-left: 4%;
    padding-right: 4%;
  }
  /* cart-container 는 데스크탑에서 flex 로 좌우 분할되므로 여백은 자식이 아닌 부모에 */
  .cart-container { box-sizing:border-box; padding-left:4%; padding-right:4%; }
}

/* ═══════════════════════════════════════════════════════════════
   마이페이지 CSS 복원 — skin5/css/module/myshop/ 원본 기준
   master-styles.css 에 없거나 불완전한 규칙만 추가
   ═══════════════════════════════════════════════════════════════ */

/* ── myshop/main.css : 모바일에서 홈 페이지 내 사이드 메뉴 표시 ── */
@media all and (max-width:1024px) {
  .xans-myshop-main { display:none; }
  .myshopMain .xans-myshop-main { display:block; }
  .xans-myshop-main .subTitle { padding:27px 16px 12px; background:#f6f6f6; }
  .xans-myshop-main h3 { color:#000; font-size:16px; }
  .xans-myshop-main .menu { border-top:1px solid #000; }
  .xans-myshop-main .menu li { border-bottom:1px solid #e5e5e5; }
  .xans-myshop-main .menu li a { position:relative; display:block; padding:21px 16px; font-size:14px; text-decoration:none; }
  .xans-myshop-main .menu li a:after { content:""; display:block; position:absolute; top:8px; right:18px; width:10px; height:10px; margin:18px auto 0; border-left:1px solid #929292; border-bottom:1px solid #929292; -webkit-transform:rotate(-135deg); transform:rotate(-135deg); }
  .xans-myshop-main .consult { margin:23px 16px 0; }
  .xans-myshop-main .consult .btnNormal { width:100%; }
}
@media all and (min-width:1025px) {
  .myshopArea { position:relative; margin:39px 0 0; padding:0 0 0 210px; }
  .xans-myshop-main { position:absolute; left:0; top:0; width:200px; }
  .xans-myshop-main .subTitle { margin:50px 0 0; }
  .xans-myshop-main h3 { color:#000; font-size:18px; font-weight:bold; }
  .xans-myshop-main .menu li { margin:16px 0 0; }
  .xans-myshop-main .menu li a { display:block; color:#6d6d6d; font-size:14px; text-decoration:none; }
  .xans-myshop-main .consult { margin:45px 0 0; }
}

/* ── myshop/mileageHistoryPackage.css : 적립금 내역 ── */
.xans-myshop-summary { margin:0 0 40px; }
.xans-myshop-summary.ec-base-box.gHalf { border:1px solid #e5e5e5; border-top:1px solid #000; padding:0; }
.xans-myshop-summary.ec-base-box.gHalf::before { display:none; }
.xans-myshop-summary ul { position:relative; float:none; width:100%; }
.xans-myshop-summary:after { content:""; display:block; clear:both; }
.xans-myshop-summary ul li { padding:20px 16px; border-top:1px solid #e5e5e5; line-height:1.5; vertical-align:top; box-sizing:border-box; overflow:hidden; }
.xans-myshop-summary .title { float:left; width:50%; font-weight:normal; box-sizing:border-box; }
.xans-myshop-summary .data { float:left; width:50%; text-align:right; box-sizing:border-box; }
.xans-myshop-summary + .ec-base-tab.typeNav .menu { margin:0 0 40px; }

.xans-myshop-historylist h3 { padding:19px 15px; line-height:1.5; background:#f6f6f6; }
.xans-myshop-historylist h3 .number { display:inline-block; margin:0 0 0 10px; }
.xans-myshop-historylist .item { margin:25px 0 0; }
.xans-myshop-historylist .ec-base-table { border-top:none; }
.xans-myshop-historylist .item table th,
.xans-myshop-historylist .item table td { line-height:1.5; background:#fff; }
.xans-myshop-historylist .item table th { color:#6d6d6d; text-align:left; font-weight:normal; }

@media all and (min-width:1025px) {
  .xans-myshop-summary { margin:0 0 50px; }
  .xans-myshop-summary ul { float:left; width:50%; }
  .xans-myshop-summary ul li { margin:14px 0; padding:0 30px 0; border-top:none; }
  .xans-myshop-summary.ec-base-box.gHalf { padding:10px 0; }
  .xans-myshop-summary.ec-base-box.gHalf::before { content:''; position:absolute; top:25px; left:50%; bottom:25px; display:block; width:1px; height:auto; background-color:#e5e5e5; }
  .xans-myshop-summary + .ec-base-tab.typeNav .menu { margin:0 0 50px; }
  .xans-myshop-historylist .item { margin:20px 0 0; }
}

/* ── myshop/mileageCouponPackage.css : 미가용쿠폰/회원등급 적립내역 ── */
.xans-myshop-couponmemberlist h3 { padding:19px 15px; line-height:1.5; background:#f6f6f6; }
.xans-myshop-couponmemberlist h3 .number { display:inline-block; margin:0 0 0 10px; }
.xans-myshop-couponmemberlist .item { margin:25px 0 0; }
.xans-myshop-couponmemberlist .ec-base-table { border-top:none; }
.xans-myshop-couponmemberlist .item table th,
.xans-myshop-couponmemberlist .item table td { line-height:1.5; background:#fff; }
.xans-myshop-couponmemberlist .item table th { color:#6d6d6d; text-align:left; font-weight:normal; }
@media all and (min-width:1025px) {
  .xans-myshop-couponmemberlist .item { margin:20px 0 0; }
}

/* ── myshop/mileageUnavailPackage.css : 미가용 적립금 ── */
.xans-myshop-unavaillist h3 { padding:19px 15px; line-height:1.5; background:#f6f6f6; }
.xans-myshop-unavaillist h3 .number { display:inline-block; margin:0 0 0 10px; }
.xans-myshop-unavaillist .item { margin:25px 0 0; }
.xans-myshop-unavaillist .ec-base-table { border-top:none; }
.xans-myshop-unavaillist .item table th,
.xans-myshop-unavaillist .item table td { line-height:1.5; background:#fff; }
.xans-myshop-unavaillist .item table th { color:#6d6d6d; text-align:left; font-weight:normal; }
@media all and (min-width:1025px) {
  .xans-myshop-unavaillist .item { margin:20px 0 0; }
}

/* ── myshop/couponSerial.css : 쿠폰번호 등록 ── */
.xans-myshop-couponserial .couponSerial { text-align:center; border:1px solid #e5e5e5; border-top-color:#000; }
.xans-myshop-couponlist .couponList .ec-base-table,
.xans-myshop-couponlist .couponList .ec-base-prdEmpty { border-top:0; }
.xans-myshop-couponlist .couponList .ec-base-prdEmpty { padding-top:6px; }
@media all and (max-width:1024px) {
  .xans-myshop-couponserial .couponSerial { margin:0 0 34px; padding:30px 16px; }
  .xans-myshop-couponserial .couponSerial #coupon_code { width:100%; }
  .xans-myshop-couponserial .couponSerial #coupon_code + .btnSubmitFix { width:100%; margin:10px 0 0; }
}
@media all and (min-width:1025px) {
  .xans-myshop-couponserial .couponSerial { margin:0 0 50px; padding:37px; }
  .xans-myshop-couponserial .couponSerial #coupon_code { width:342px; }
  .xans-myshop-couponserial .couponSerial .btnSubmitFix { margin:0 0 0 6px; }
}

/* ── myshop/couponList.css : 쿠폰 목록 ── */
.xans-myshop-couponlist .contents { display:none; background-color:#f9f9f9; }
.xans-myshop-couponlist tr.selected .contents { display:table-cell; }
.xans-myshop-couponlist .empty { margin:30px 0 0; font-size:12px; text-align:center; }
.xans-myshop-couponlist .layer { position:relative; padding:0; font-size:0; }
.xans-myshop-couponlist .layer:after { content:""; overflow:hidden; display:inline-block; width:10px; height:10px; border-left:1px solid #000; border-bottom:1px solid #000; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.xans-myshop-couponlist .layer.selected:after { position:relative; top:8px; -webkit-transform:rotate(135deg); transform:rotate(135deg); }
.xans-myshop-couponlist ul { padding:6px 13px; text-align:left; line-height:19px; }
.xans-myshop-couponlist ul li { display:flex; line-height:22px; }
.xans-myshop-couponlist ul li:before { content:"-"; display:inline-block; margin:0 3px 0 0; }
.xans-myshop-couponlist ul li.gButton { align-items:center; }
.xans-myshop-couponlist ul li strong { width:100px; font-weight:normal; }
.xans-myshop-couponlist ul li .content { flex:1; }
.xans-myshop-couponlist .title { overflow:hidden; margin:40px 0 10px 10px; }
.xans-myshop-couponlist .title h3 { float:left; color:#353535; font-size:12px; }
.xans-myshop-couponlist .title p { float:right; color:#757575; }
.xans-myshop-couponlist .ec-base-table table td { border-bottom:0; border-top:1px solid #e5e5e5; }
.xans-myshop-couponlist .ec-base-table table .selected td { border-top:0; }
@media all and (max-width:1024px) {
  .xans-myshop-couponlist ul { padding:0; }
  .xans-myshop-couponlist .ec-base-table table tr { margin-bottom:25px; display:block; }
  .xans-myshop-couponlist .ec-base-table table colgroup,
  .xans-myshop-couponlist .ec-base-table table thead { display:none; }
  .xans-myshop-couponlist .ec-base-table table td { display:flex; align-items:center; height:auto; text-align:left; border-top:0; border-bottom:1px solid #e5e5e5; }
  .xans-myshop-couponlist .ec-base-table table td.contents { display:none; }
  .xans-myshop-couponlist .ec-base-table table tr.selected { margin-top:-25px; }
  .xans-myshop-couponlist .ec-base-table table tr.selected .contents { display:block; }
  .xans-myshop-couponlist .ec-base-table table td .display_tablet_only { width:27%; }
  .xans-myshop-couponlist .ec-base-table table td.coupon_name { padding:19px 20px; line-height:1.5; background:#f6f6f6; font-weight:500; }
  .xans-myshop-couponlist .layer .display_tablet_only { font-size:13px; padding:14px 0 14px 20px; }
  .xans-myshop-couponlist .layer:after { margin-top:-10px; }
}

/* ── myshop/boardPackage.css : 나의 게시글 ── */
.xans-myshop-boardlisthead { margin:0 0 20px 0; }
.xans-myshop-boardlisthead #board_sort { width:150px; }
.xans-myshop-boardlist .notice .subject { font-weight:bold; word-break:break-all; word-wrap:break-word; }
.xans-myshop-boardpackage .ec-base-table table td.no { color:#6d6d6d; }
.xans-myshop-boardpackage .ec-base-table table td.subject a { margin-right:5px; }
.xans-myshop-boardpackage .ec-base-table table td.subject img { width:auto; height:21px; margin:0 5px 1px 0; vertical-align:middle; }
.xans-myshop-boardpackage .ec-base-table table td .comment { margin:0 5px 0 0; color:#ef441f; font-weight:normal; }
.xans-myshop-boardpackage .ec-base-table table td .comment b { font-weight:normal; }

/* ── myshop/boardlistSearch.css : 게시글 검색 ── */
.xans-myshop-boardlistsearch .form { display:flex; }
.xans-myshop-boardlistsearch select,
.xans-myshop-boardlistsearch input[type="text"],
.xans-myshop-boardlistsearch a { margin-left:10px; }
@media all and (max-width:1024px) {
  .xans-myshop-boardlistsearch { margin:10px 16px 0 11px; }
  .xans-myshop-boardlistsearch .form { flex-wrap:wrap; }
  .xans-myshop-boardlistsearch select,
  .xans-myshop-boardlistsearch input[type="text"],
  .xans-myshop-boardlistsearch a { flex:1; margin-top:10px; }
  .xans-myshop-boardlistsearch #search { flex:2; }
}
@media all and (min-width:1025px) {
  .xans-myshop-boardlistsearch { margin:20px -5px 0; }
  .xans-myshop-boardlistsearch select,
  .xans-myshop-boardlistsearch input[type="text"],
  .xans-myshop-boardlistsearch a { margin:0 5px; }
  .xans-myshop-boardlistsearch #search_key { width:110px; }
  .xans-myshop-boardlistsearch #search { width:175px; }
}


/* Action buttons (cart/buy) — moved out of globals.css so vaporwave keeps
 * its crawled module-bundle.css rules untouched. */
.xans-product-action .ec-base-button.gColumn {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.xans-product-action .ec-base-button.gColumn [class^='btn'] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.2rem;
  line-height: 4.2rem;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: 0.8rem;
  box-shadow: 0 3px 13px 0 rgb(169 169 169 / 30%);
  margin: 0 0 0 9px;
}
.xans-product-action .ec-base-button.gColumn [class^='btn']:first-child {
  margin-left: 0;
}
.xans-product-action .ec-base-button.gColumn [class^='btn'] > img {
  width: 20px;
  margin-right: 8px;
}
.xans-product-action .ec-base-button.gColumn [class^='btnSubmit'] {
  flex: 1.3;
}

/* ── 메인 히어로 배너 반응형 ────────────────────────────────────
   master-styles.css 는 `.smart-banner-bx-wrapper img{width:100%}` 만
   정의돼 있어 우리가 사용하는 `.smart-banner-wrapper` 마크업의
   <img>에는 적용되지 않는다. 결과적으로 자연 픽셀 크기로 노출되어
   뷰포트 변화에 반응하지 않음. 슬라이드/링크/picture/img 모두
   슬라이드 너비를 100% 채우도록 강제해 화면 폭에 맞춰 유동적으로
   확대·축소되게 함. */
.smart-banner-wrapper,
.smart-banner-wrapper .smart-banner-bxslider-swiper,
.smart-banner-wrapper .smart-banner-bxslider {
  width: 100%;
}
.smart-banner-wrapper .swiper-slide,
.smart-banner-wrapper .swiper-slide > a,
.smart-banner-wrapper .swiper-slide picture {
  display: block;
  width: 100%;
}
.smart-banner-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 메인 진열 hover 액션(.icon__box) 활성화 ──
   master-styles.css 의 마지막 규칙 `.ec-base-product .prdList .icon__box{display:none}`
   가 hover 영역을 통째로 가린다. cafe24 원본은 opacity 트랜지션으로
   hover 시 노출하므로 그 동작을 복원한다. */
.ec-base-product .prdList .icon__box {
  display: flex !important;
  opacity: 0;
  pointer-events: none;
}
.ec-base-product .prdList > li:hover .icon__box {
  opacity: 1;
  pointer-events: auto;
}
.ec-base-product .prdList .prdList__item .icon__box > span { user-select: none; }

/* 게시판 목록(notice/faq/inquiry) 모바일 — 카드형 레이아웃.
 * 리뷰 게시판은 갤러리 그리드(.boardList)를 쓰므로 영향 없음. */
@media all and (max-width: 767px) {
  .ec-base-table.typeList thead { display: none; }
  .ec-base-table.typeList table,
  .ec-base-table.typeList tbody { display: block; }
  .ec-base-table.typeList table { border-collapse: collapse; border: 0; width: 100%; }
  .ec-base-table.typeList tr {
    display: block;
    position: relative;
    padding: 20px 8px 19px;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
  }
  .ec-base-table.typeList tr:after { content: ""; display: block; clear: both; }
  .ec-base-table.typeList td {
    height: auto;
    display: block;
    float: left;
    padding: 3px 8px;
    border: 0;
    text-align: left;
    color: #6d6d6d;
  }
  .ec-base-table.typeList td a { color: #6d6d6d; }
  .ec-base-table.typeList td.chk { box-sizing: border-box; padding: 0; }
  .ec-base-table.typeList td.subject { float: none; box-sizing: border-box; }
  .ec-base-table.typeList td.subject a { color: #000; }
  /* 날짜: .displaynone !important 제압 */
  .ec-base-table.typeList td.board-date {
    display: block !important;
    float: left;
    padding: 3px 8px;
    color: #6d6d6d;
  }
  .ec-base-table.typeList td.board-views {
    display: block;
    float: left;
    padding: 3px 8px;
    color: #6d6d6d;
  }
}