/* BASIC css start */
/* ============================================================
   MakeShop 상품상세 리뉴얼 CSS
   파일명: product_detail.css
   - D4 스킨 CSS 간섭 방지: !important 적극 사용
   - 모바일 전용 (max-width 기준 없음, 모든 화면에 적용)
   - 네이밍: pdp- 프리픽스로 충돌 방지
============================================================ */

/* ── 기본 리셋 ── */
.shopdetail,
.shopdetail * {
  box-sizing: border-box !important;
}
.shopdetail img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ── 본문 컨테이너 ── */
.shopdetail {
  max-width: 500px !important;
  margin: 0 auto !important;
  background: #fff !important;
  padding-bottom: 80px !important; /* 하단 고정 CTA 높이만큼 */
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important;
  color: #111 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ============================================================
   ① 이미지 슬라이더
============================================================ */
.pdp-gallery {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
}
.pdp-gallery .swiper-container,
.pdp-gallery .multi_list {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pdp-gallery .swiper-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
.pdp-gallery .swiper-slide {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pdp-gallery .swiper-slide img,
.pdp-gallery .pdp-single-img img {
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pdp-gallery .swiper-pagination {
  bottom: 12px !important;
}
.pdp-gallery .swiper-pagination-bullet {
  background: #fff !important;
  opacity: 0.6 !important;
  width: 6px !important;
  height: 6px !important;
}
.pdp-gallery .swiper-pagination-bullet-active {
  opacity: 1 !important;
  background: #fff !important;
}

/* 주문 바 — 썸네일 바로 아래 전체폭 검정 배경 */
.pdp-order-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  background: #111 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #fff !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.pdp-order-bar-fire {
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.pdp-order-bar-txt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1 !important;
}
.pdp-order-bar strong {
  color: #ff6b6b !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* ============================================================
   ② 상품 정보 상단
============================================================ */
.pdp-info-top {
  padding: 14px 16px 0 !important;
}

/* 상품명 */
.pdp-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #111 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.3px !important;
}

/* 가격 블록 */
.pdp-price-block {
  margin-bottom: 16px !important;
}
/*
  시각 표시 순서: [할인율%]  [실제판매가 크게]  [정상가 취소선]
  HTML 순서에 관계없이 CSS order로 강제 정렬
*/
.pdp-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
/* 할인율 — 항상 첫번째 */
.pdp-dc-rate {
  order: 1 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #e74c3c !important;
  letter-spacing: -0.5px !important;
}
/* pdp-sell-price = HTML에서 크게 표시되는 자리 → 실제로는 정상가(큰값) 취소선 처리 */
.pdp-sell-price {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #aaa !important;
  letter-spacing: 0 !important;
  text-decoration: line-through !important;
  display: inline !important;
}
.pdp-sell-price em {
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  margin-left: 1px !important;
}
/* pdp-origin-price = HTML에서 취소선 자리 → 실제로는 판매가(작은값) 크게 강조 */
.pdp-origin-price {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #e74c3c !important;
  letter-spacing: -0.5px !important;
  text-decoration: none !important;
  display: inline !important;
}
.pdp-origin-price em {
  font-size: 16px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  margin-left: 1px !important;
}
.pdp-soldout-msg {
  font-size: 16px !important;
  color: #e74c3c !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
}
.pdp-price-replace {
  font-size: 16px !important;
  color: #111 !important;
}

/* 최대 혜택가 박스 */
.pdp-benefit-box {
  margin-top: 14px !important;
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.pdp-benefit-toggle {
  display: flex !important;
  align-items: center !important;
  padding: 13px 16px !important;
  cursor: pointer !important;
  background: #fafafa !important;
}
.pdp-benefit-label {
  font-size: 13px !important;
  color: #666 !important;
  flex: 1 !important;
}
.pdp-benefit-price {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #e74c3c !important;
  margin-right: 8px !important;
}
.pdp-benefit-arrow {
  font-size: 12px !important;
  color: #999 !important;
  transition: transform 0.2s !important;
}
.pdp-benefit-toggle.open .pdp-benefit-arrow {
  transform: rotate(180deg) !important;
}
.pdp-benefit-detail {
  padding: 0 16px 14px !important;
  background: #fff !important;
}
.pdp-benefit-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 13px !important;
  color: #555 !important;
}
.pdp-benefit-row:last-child {
  border-bottom: none !important;
}
.pdp-benefit-row.accent span:last-child {
  color: #e74c3c !important;
  font-weight: 700 !important;
}
.pdp-benefit-row.total {
  margin-top: 2px !important;
}
.pdp-benefit-row.total span:first-child {
  font-weight: 700 !important;
  color: #111 !important;
}
.pdp-benefit-row.total span:last-child {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #e74c3c !important;
}
.pdp-benefit-note {
  font-size: 11px !important;
  color: #aaa !important;
  margin-top: 8px !important;
  line-height: 1.4 !important;
}

/* =========================================
   공통: 혜택 박스 간격
========================================= */
.pdp-price-block .pdp-benefit-box {
  margin-top: 10px;
}

.pdp-price-block .pdp-benefit-box:first-of-type {
  margin-top: 0;
}


/* =========================================
   최대 혜택가 박스 (위쪽)
   → 기본형, 깔끔하게 유지
========================================= */
.pdp-price-block > .pdp-benefit-box:not(.pdp-unit-price-box) {
  border: 1px solid #e9e9e9;
  background: #fff;
  border-radius: 14px;
  box-shadow: none;
}

.pdp-price-block > .pdp-benefit-box:not(.pdp-unit-price-box) .pdp-benefit-toggle {
  padding: 15px 18px;
}

.pdp-price-block > .pdp-benefit-box:not(.pdp-unit-price-box) .pdp-benefit-price {
  font-size: 22px;
  font-weight: 700;
  color: #ff5a3d;
}

.pdp-price-block > .pdp-benefit-box:not(.pdp-unit-price-box) .pdp-benefit-detail {
  padding: 14px 18px 16px;
  border-top: 1px solid #f1f1f1;
  background: #fff;
}


/* ===============================
   1통 기준 할인 판매가 박스 강조
   =============================== */
/* =========================================
   1통 기준 할인 판매가 박스 (아래쪽 강조형)
========================================= */
.pdp-unit-price-box {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border: 2px solid #ff6b57 !important;
  background: linear-gradient(180deg, #fff8f4 0%, #ffefe8 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(255, 107, 87, 0.16) !important;
  overflow: hidden;
  position: relative;
}

/* 아래쪽 강조 배너 느낌 */
.pdp-unit-price-box::before {
  content: "1통 기준";
  position: absolute;
  top: -1px;
  left: 16px;
  padding: 6px 10px;
  background: #ff6b57;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  line-height: 1;
  z-index: 2;
}

/* 상단 토글 */
.pdp-unit-price-box .pdp-benefit-toggle {
  padding: 22px 18px 16px !important;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 라벨 */
.pdp-unit-price-box .pdp-benefit-label {
  font-size: 15px;
  font-weight: 800;
  color: #2a2a2a;
  letter-spacing: -0.2px;
}

/* 가격 */
.pdp-unit-price-box .pdp-benefit-price {
  margin-left: auto;
  font-size: 26px;
  font-weight: 800;
  color: #ff5a3d;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* 화살표 */
.pdp-unit-price-box .pdp-benefit-arrow {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #ff6b57;
  transition: transform 0.25s ease;
}

.pdp-unit-price-box .pdp-benefit-toggle.open .pdp-benefit-arrow {
  transform: rotate(180deg);
}

/* 상세영역 */
.pdp-unit-price-box .pdp-benefit-detail {
  padding: 14px 18px 16px;
  background: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 107, 87, 0.18);
}

/* 상세 행 */
.pdp-unit-price-box .pdp-benefit-row {
  padding: 9px 0;
}

/* 일반 텍스트 */
.pdp-unit-price-box .pdp-benefit-row span:first-child {
  color: #555;
  font-weight: 500;
}

.pdp-unit-price-box .pdp-benefit-row span:last-child {
  color: #222;
  font-weight: 700;
}

/* 중간 강조 줄 */
.pdp-unit-price-box .pdp-benefit-row.accent span:first-child {
  color: #d85b47;
  font-weight: 700;
}

.pdp-unit-price-box .pdp-benefit-row.accent span:last-child {
  color: #ff6b57;
  font-weight: 800;
}

/* 최종 금액 줄 */
.pdp-unit-price-box .pdp-benefit-row.total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 107, 87, 0.3);
}

.pdp-unit-price-box .pdp-benefit-row.total span:first-child {
  font-weight: 800;
  color: #222;
}

.pdp-unit-price-box .pdp-benefit-row.total span:last-child {
  font-size: 21px;
  font-weight: 800;
  color: #ff5a3d;
}

/* 안내문구 */
.pdp-unit-price-box .pdp-benefit-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #a45b4f;
}


/* ============================================================
   ③ 혜택 배너
============================================================ */
.pdp-banners {
  padding: 0 !important;
  margin: 0px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* 카카오 가입 배너 */
.pdp-banner.kakao {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%) !important;
  border: 1px solid #f0e040 !important;
}
.pdp-banner.kakao .pdp-banner-icon {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.pdp-kakao-ch-logo {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
}
.pdp-banner.kakao .pdp-banner-txt {
  flex: 1 !important;
}
.pdp-banner.kakao .pdp-banner-txt strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #5a4000 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* 타이머 배너 — 슬림 한줄형 */
.pdp-banner.timer {
  display: flex !important;
  align-items: center !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  background: #111 !important;
  border: none !important;
  gap: 0 !important;
}
.pdp-timer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 8px !important;
}
.pdp-timer-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: #e74c3c !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
}
.pdp-timer-label-txt {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
}
.pdp-timer-clock {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  margin-left: auto !important;
}
.pdp-timer-num {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 26px !important;
  text-align: center !important;
}
.pdp-timer-colon {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.4) !important;
  line-height: 1 !important;
  padding: 0 1px !important;
}

/* 오늘출발 배너 */
.pdp-banner.ship {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: #f0f8ff !important;
  border: 1px solid #b3d7f5 !important;
}
.pdp-banner.ship .pdp-banner-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.pdp-banner.ship .pdp-banner-txt strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0a5fa8 !important;
  margin-bottom: 3px !important;
}
.pdp-banner.ship .pdp-banner-txt p {
  font-size: 12px !important;
  color: #2478c5 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* 기존 인라인 방식 호환용 */
.pdp-countdown {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #e74c3c !important;
  letter-spacing: 1px !important;
  font-variant-numeric: tabular-nums !important;
}

/* ============================================================
   ④ 상품 정보 테이블
============================================================ */
.pdp-info-table {
  margin: 12px 0 !important; /* 좌우 제거 */
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.pdp-info-table table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}
.pdp-info-table th,
.pdp-info-table td {
  padding: 12px 14px !important;
  font-size: 13px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #f0f0f0 !important;
  line-height: 1.5 !important;
}
.pdp-info-table tr:last-child th,
.pdp-info-table tr:last-child td {
  border-bottom: none !important;
}
.pdp-info-table th {
  width: 80px !important;
  color: #888 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  background: #fafafa !important;
}
.pdp-info-table td {
  color: #333 !important;
  word-break: keep-all !important;
}
.pdp-dc-cell {
  color: #e74c3c !important;
  font-weight: 700 !important;
}
.pdp-layer-link {
  color: #555 !important;
  text-decoration: underline !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

/* ============================================================
   ⑤ 회원 배송 메시지
============================================================ */
.pdp-usergroup-msg {
  margin: 0px !important;
  padding: 12px 14px !important;
  background: #f0f8ff !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  color: #444 !important;
  line-height: 1.6 !important;
}
.pdp-usergroup-msg strong {
  color: #111 !important;
  font-weight: 700 !important;
}

/* ============================================================
   ⑥-1 옵션 선택 트리거 버튼
============================================================ */
.pdp-option-trigger-wrap {
  padding: 0 16px 14px !important;
  margin-top: 4px !important;
}
.pdp-option-trigger-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 52px !important;
  padding: 0 16px !important;
  background: #fff !important;
  border: 1.5px solid #ddd !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #aaa !important;
  cursor: pointer !important;
  transition: border-color 0.18s, color 0.18s !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.pdp-option-trigger-btn.selected {
  border-color: #111 !important;
  color: #111 !important;
  font-weight: 600 !important;
}
.pdp-option-trigger-btn:active {
  background: #f9f9f9 !important;
}
.pdp-option-trigger-arrow {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: #bbb !important;
  stroke: #bbb !important;
  transition: stroke 0.18s !important;
}
.pdp-option-trigger-btn.selected .pdp-option-trigger-arrow {
  stroke: #111 !important;
}

/* ============================================================
   ⑥ 하단 고정 CTA
============================================================ */
.pdp-fixed-cta {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 500px !important;
  z-index: 8990 !important;
  background: #fff !important;
  border-top: 1px solid #e0e0e0 !important;
  padding: 10px 16px !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
}
.pdp-fixed-inner {
  display: flex !important;
  gap: 10px !important;
}
.pdp-fixed-cart {
  flex: 1 !important;
  height: 52px !important;
  border: 1.5px solid #111 !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  letter-spacing: -0.3px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.pdp-fixed-buy {
  flex: 1.4 !important;
  height: 52px !important;
  border: none !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  letter-spacing: -0.3px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.pdp-fixed-cart:active { background: #f5f5f5 !important; }
.pdp-fixed-buy:active { background: #333 !important; }

/* ============================================================
   ⑦ 옵션 바텀시트
============================================================ */
.pdp-dim {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 9000 !important;
}
.pdp-dim.active {
  display: block !important;
}

.pdp-bottomsheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(100%) !important;
  width: 100% !important;
  max-width: 500px !important;
  z-index: 9100 !important;
  background: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15) !important;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.pdp-bottomsheet.active {
  transform: translateX(-50%) translateY(0) !important;
}

.pdp-bs-handle {
  width: 40px !important;
  height: 4px !important;
  background: #ddd !important;
  border-radius: 2px !important;
  margin: 12px auto 0 !important;
  flex-shrink: 0 !important;
}

.pdp-bs-inner {
  padding: 16px 20px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

/* 바텀시트 내부 - 옵션 */
.pdp-opt-label {
  font-size: 15px !important;
  color: #000 !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
  text-align: center !important;
}
.pdp-select-wrap,
.pdp-oneclick-wrap {
  margin-bottom: 16px !important;
}
.pdp-select-box select,
.pdp-select-wrap select {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111 !important;
  background: #fff !important;
  appearance: auto !important;
}
.pdp-select-box select:focus {
  border-color: #111 !important;
  outline: none !important;
}
.pdp-oneclick-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.pdp-oneclick-list a,
.pdp-oneclick-list span {
  padding: 8px 14px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #333 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.pdp-oneclick-list a.selected,
.pdp-oneclick-list span.on {
  border-color: #111 !important;
  background: #111 !important;
  color: #fff !important;
}

/* 수량 컨트롤 */
.pdp-qty-wrap {
  margin-bottom: 16px !important;
}
.pdp-qty-ctrl {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  width: fit-content !important;
}
.pdp-qty-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: #f5f5f5 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.pdp-qty-btn img {
  width: 14px !important;
  height: 14px !important;
}
.pdp-qty-ctrl input,
.MK_qty-ctrl input {
  width: 52px !important;
  height: 44px !important;
  border: none !important;
  border-left: 1px solid #e8e8e8 !important;
  border-right: 1px solid #e8e8e8 !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111 !important;
  background: #fff !important;
}

/* 옵션 적용가 */
.pdp-opt-price {
  padding: 14px 0 !important;
  font-size: 14px !important;
  color: #555 !important;
  border-top: 1px solid #f0f0f0 !important;
  margin-top: 8px !important;
}
.pdp-opt-price strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #111 !important;
}

/* 바텀시트 내 결제수단 버튼 */
.pdp-pay-btn {
  margin-bottom: 10px !important;
}

/* 바텀시트 CTA */
.pdp-bs-cta {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid #f0f0f0 !important;
}
.pdp-cart-btn,
.pdp-buy-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  letter-spacing: -0.3px !important;
}
.pdp-cart-btn {
  flex: 1 !important;
  border: 1.5px solid #111 !important;
  background: #fff !important;
  color: #111 !important;
}
.pdp-buy-btn {
  flex: 1.4 !important;
  border: none !important;
  background: #111 !important;
  color: #fff !important;
}

/* ============================================================
   ⑧ 리뷰 영역 (파워리뷰 래퍼)
============================================================ */
.pdp-review-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   ⑨ 쿠폰 영역
============================================================ */
.pdp-coupon-section {
  margin: 0px !important;
}
.pdp-coupon-section h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111 !important;
  padding: 14px 0 10px !important;
  border-top: 1px solid #f0f0f0 !important;
}
.shopdetailCouponGet ul,
.smart-coupon-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.shopdetailCouponGet ul li,
.smart-coupon-list li {
  margin-bottom: 8px !important;
}
.MS_coupon {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
}
.MS_coupon dt {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #e74c3c !important;
  min-width: 50px !important;
}
.MS_coupon dd h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin: 0 0 4px !important;
}
.MS_coupon dd p {
  font-size: 11px !important;
  color: #aaa !important;
  margin: 0 !important;
}
.sc-style1, .sc-style2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
}
.c-name { font-size: 14px !important; font-weight: 600 !important; color: #111 !important; margin: 0 0 4px !important; }
.c-price span { font-size: 16px !important; font-weight: 800 !important; color: #e74c3c !important; }
.c-txt { font-size: 12px !important; color: #888 !important; margin: 0 !important; }
.btn-down span a {
  display: inline-block !important;
  padding: 8px 16px !important;
  background: #111 !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

/* ============================================================
   ⑩ 상세 탭 (스티키)
============================================================ */
.pdp-sticky-tab {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #fff !important;
  border-bottom: 2px solid #f0f0f0 !important;
}
.pdp-sticky-tab ul {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pdp-sticky-tab ul li {
  flex: 1 !important;
}
.pdp-sticky-tab ul li a {
  display: block !important;
  padding: 14px 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #aaa !important;
  text-align: center !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: color 0.15s !important;
  letter-spacing: -0.2px !important;
}
.pdp-sticky-tab ul li a.active,
.pdp-sticky-tab ul li a:hover {
  color: #111 !important;
  font-weight: 700 !important;
  border-bottom-color: #111 !important;
}

/* ============================================================
   ⑪ 상세 이미지
============================================================ */
.pdp-detail-img {
  width: 100% !important;
}
.pdp-detail-img img {
  width: 100% !important;
  display: block !important;
}

/* ============================================================
   ⑫ 상품 고시 정보
============================================================ */
.pdp-notify .shopdetailNotifyInfo {
  padding: 16px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.pdp-notify dl {
  display: flex !important;
  gap: 12px !important;
  margin: 0 0 8px !important;
  font-size: 12px !important;
}
.pdp-notify dt {
  color: #888 !important;
  min-width: 80px !important;
  font-weight: 500 !important;
}
.pdp-notify dd {
  color: #333 !important;
}

/* ============================================================
   ⑬ 관련상품
============================================================ */
.pdp-related {
  padding: 20px 16px !important;
  border-top: 1px solid #f0f0f0 !important;
}
.pdp-related h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 0 0 16px !important;
}
.list_shoppingRelationItem1x ul {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}
.list_shoppingRelationItem1x li figure {
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.list_shoppingRelationItem1x .listPic {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
}
.list_shoppingRelationItem1x .list_shoppingInfo {
  padding: 10px !important;
}
.listName {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin: 0 0 4px !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.listPrice {
  font-size: 12px !important;
  color: #888 !important;
}
.btn_Black {
  display: block !important;
  width: 100% !important;
  padding: 13px !important;
  background: #111 !important;
  color: #fff !important;
  text-align: center !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ============================================================
   ⑭ 상품 문의 게시판
============================================================ */
.pdp-board {
  padding: 16px !important;
}
.pdp-write-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  height: 38px !important;
  background: #111 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
}
.list_board ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.list_board li {
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 7px 0 2px !important;
}
/* 펼쳐진 답변 영역 여백 완전 제거 */
.list_board li .cont_wrap {
  margin: 0 !important;
  padding: 0 !important;
}
.list_board li .cont_wrap .conts {
  margin: 0 !important;
  padding: 6px 0 4px !important;
}
.list_board dl {
  margin: 0 !important;
}
.list_board h4 {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111 !important;
  margin: 0 0 3px !important;
  line-height: 1.4 !important;
}
.list_board h4 a {
  color: inherit !important;
  text-decoration: none !important;
}
.list_board .info {
  font-size: 12px !important;
  color: #aaa !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* 상품문의 섹션 제목(tab_on) 숨기기 */
.shopdetailBoard.tab_area,
#tabs2 {
  display: none !important;
}
.list_board .new {
  display: inline-block !important;
  background: #e74c3c !important;
  color: #fff !important;
  font-size: 10px !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  margin-left: 4px !important;
}
.cont_wrap .conts {
  padding: 12px 0 0 !important;
  font-size: 13px !important;
  color: #555 !important;
  line-height: 1.6 !important;
}
.MS_cmt_list {
  width: 100% !important;
  margin-top: 10px !important;
}
.MS_cmt_detail {
  padding: 10px 12px !important;
  background: #f7f7f7 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: #555 !important;
}
.MS_cmt_hname { font-weight: 600 !important; }
.MS_cmt_date { color: #aaa !important; margin-left: 4px !important; }
.MS_cmt_content { margin-top: 6px !important; }

.pdp-empty {
  padding: 32px 0 !important;
  text-align: center !important;
  color: #aaa !important;
  font-size: 13px !important;
}

.pdp-paging {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 16px !important;
}
.pdp-paging a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #555 !important;
  text-decoration: none !important;
}
.pdp-paging a.now {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ============================================================
   ⑮ 아코디언 (배송/교환반품)
============================================================ */
.pdp-accordion {
  border-top: 1px solid #f0f0f0 !important;
  margin: 0 !important;
}
.pdp-acc-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111 !important;
  cursor: pointer !important;
  list-style: none !important;
  background: #fff !important;
}
.pdp-acc-arrow {
  font-size: 12px !important;
  color: #aaa !important;
  transition: transform 0.2s !important;
  display: inline-block !important;
}
.pdp-acc-head.open .pdp-acc-arrow {
  transform: rotate(180deg) !important;
}
.pdp-acc-body {
  padding: 0 16px 16px !important;
  background: #fff !important;
}
.detail-common-info dl {
  display: flex !important;
  gap: 12px !important;
  margin: 0 0 10px !important;
  font-size: 13px !important;
}
.detail-common-info dt {
  font-weight: 600 !important;
  color: #555 !important;
  min-width: 100px !important;
  flex-shrink: 0 !important;
}
.detail-common-info dd {
  color: #444 !important;
  line-height: 1.6 !important;
}

/* ============================================================
   기타 공통 요소
============================================================ */
/* 메이크샵 view-wrap 레이어 */
.view-wrap {
  position: relative !important;
}
.layer-view {
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  width: 280px !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  z-index: 500 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  display: none !important;
}
.layer-view.open { display: block !important; }
.btn-close img { width: 20px !important; }

/* MK 옵션박스 공통 */
.MK_optAddWrap {
  margin-bottom: 10px !important;
}
.MK_innerOptWrap,
#MK_innerOptWrap {
  background: #f8f8f8 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  padding: 0 !important;
  margin-top: 10px !important;
  overflow: hidden !important;
}
/* 내역 스크롤 영역 */
#MK_innerOptScroll {
  padding: 0 !important;
  margin: 0 !important;
}
/* ── 합계금액 영역 ── */
#MK_innerOptTotal {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 14px 10px !important;
  margin: 4px 12px 0 !important;
  border-top: 1.5px solid #111 !important;
  font-size: 13px !important;
  background: #fff !important;
}
.MK_txt-total {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #888 !important;
  letter-spacing: -0.1px !important;
}
.MK_total,
#MK_total_price,
.MK_total_price,
.txt_total_price {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #e74c3c !important;
  letter-spacing: -0.5px !important;
}
.MK_txt-won {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin-left: 2px !important;
}
.MK_txt-won { font-size: 12px !important; color: #555 !important; margin-left: 1px !important; }

/* 추가옵션/기본옵션 소계 텍스트 */
#MK_innerOptPrice,
#MK_innerOptAdd {
  font-size: 12px !important;
  color: #888 !important;
  padding: 6px 14px !important;
  border-top: 1px solid #f0f0f0 !important;
  background: #fafafa !important;
}
/* ══════════════════════════════════════════════════════
   MK 옵션 선택 내역
   실제 HTML 구조: li > span.MK_p-name + div.MK_qty-ctrl(입력+버튼) + strong.MK_price + a.del
   목표 레이아웃:
     [1행] 옵션명 텍스트                              [X]
     [2행] 수량선택  [−][수량][+]          16,900원
══════════════════════════════════════════════════════ */

/* 리스트 감싸개 */
.MK_inner-opt-cm {
  list-style: none !important;
  padding: 0 12px !important;
  margin: 0 0 6px !important;
}

/* ── 카드 컨테이너: 단순 2행 flex-column ── */
.MK_inner-opt-cm li {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1.5px solid #e4e4e4 !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  padding: 11px 14px 11px 14px !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.MK_inner-opt-cm li:last-child { margin-bottom: 0 !important; }

/* ── 1행: 옵션명 ── */
.MK_p-name {
  display: block !important;
  width: calc(100% - 30px) !important; /* X버튼 자리 확보 */
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  word-break: keep-all !important;
  white-space: normal !important;
  padding-bottom: 9px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  margin-bottom: 9px !important;
}

/* ── 2행 래퍼: JS가 삽입하는 .mk-qty-row div ── */
.mk-qty-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* "수량선택" 레이블 */
.mk-qty-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #888 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 수량 컨트롤 박스 [−][n][+] */
.MK_inner-opt-cm .MK_qty-ctrl,
.MK_qty-ctrl {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid #ddd !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  height: 32px !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  gap: 0 !important;
}
.MK_inner-opt-cm .MK_qty-ctrl input {
  width: 34px !important;
  height: 32px !important;
  border: none !important;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111 !important;
  background: #fff !important;
  padding: 0 !important;
}

/* ± 버튼 */
.btn-type-02 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 32px !important;
  background: #f7f7f7 !important;
  color: #333 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.btn-type-02:active { background: #eee !important; }

/* 가격 — 오른쪽 끝 */
.MK_price {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #111 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.3px !important;
  line-height: 1 !important;
}
.MK_price span { display: inline !important; }

/* ── X 닫기 버튼 — 네모 박스형, 우상단 고정 ── */
.MK_inner-opt-cm .del,
.MK_inner-opt-cm a[href*="remove"],
.MK_inner-opt-cm a[class*="del"],
.MK_inner-opt-cm a[class*="close"],
.MK_inner-opt-cm button[class*="del"],
.MK_inner-opt-cm .MK_del {
  position: absolute !important;
  top: 9px !important;
  right: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 0 !important;          /* 원본 텍스트 숨김 */
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: unset !important;
  min-height: unset !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
  overflow: visible !important;
}
/* ::before 로 흰색 × 기호 주입 */
.MK_inner-opt-cm .del::before,
.MK_inner-opt-cm a[href*="remove"]::before,
.MK_inner-opt-cm a[class*="del"]::before,
.MK_inner-opt-cm a[class*="close"]::before,
.MK_inner-opt-cm button[class*="del"]::before,
.MK_inner-opt-cm .MK_del::before {
  content: "✕" !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  display: block !important;
}
.MK_inner-opt-cm .del:active,
.MK_inner-opt-cm a[class*="del"]:active,
.MK_inner-opt-cm button[class*="del"]:active { background: #333 !important; }
/* 이미지가 있는 경우 숨기고 ::before X 표시 */
.MK_inner-opt-cm .del img,
.MK_inner-opt-cm a[class*="del"] img,
.MK_inner-opt-cm a[class*="close"] img { display: none !important; }

/* 하이브리드 옵션 */
.pdp-hybrid-wrap .option-box { margin-bottom: 16px !important; }
.pdp-hybrid-wrap .list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.pdp-hybrid-wrap .list li {
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 13px !important;
}
.pdp-hybrid-wrap .lst-soldout { opacity: 0.4 !important; }
.pdp-hybrid-wrap dl { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.prdchk { flex-shrink: 0 !important; }
.prdimg img { width: 36px !important; height: 36px !important; border-radius: 6px !important; object-fit: cover !important; }
.prdname { flex: 1 !important; color: #333 !important; }
.prdprice strong { font-weight: 700 !important; color: #111 !important; }
.soldout { background: rgba(0,0,0,0.5) !important; color: #fff !important; font-size: 11px !important; padding: 2px 6px !important; border-radius: 4px !important; }

/* 가입 쿠폰 배너 (coupon-banner) */
.coupon-banner {
  display: none !important; /* pdp-banners로 대체 */
}

/* shopdetailButton 숨기기 (pdp-fixed-cta로 대체) */
.shopdetailButton {
  display: none !important;
}

/* 기존 buy_on 숨기기 */
.buy_on,
.fixed-btn.buy_wrap,
.option_area .fixed-btn {
  display: none !important;
}

/* ============================================================
   메이크샵 기본 옵션 팝업 유발 영역 완전 숨김
   — 본문 내 shopdetailInfo* 의 select/버튼이 팝업을 열므로
     페이지 본문(#contents 내)에 있는 옵션 영역을 숨김
   — 바텀시트(#pdpBottomSheet) 내부는 유지
============================================================ */
/* 본문 내 기본 옵션 select 숨김 */
#contents .shopdetailInfo,
#contents .shopdetailInfoOption,
#contents .shopdetailInfoMultiSelect:not(#pdpBottomSheet *),
#contents .MK_optAddWrap:not(#pdpBottomSheet *),
#contents .option_area:not(#pdpBottomSheet *),
#contents form[name="form_product"]:not(#pdpBottomSheet *) select,
#contents .detail_option_wrap:not(#pdpBottomSheet *) {
  display: none !important;
}

/* 메이크샵 고정 옵션 바 (D4 스킨용) — 팝업 차단 */
.MK_fixed_option_bar,
.MK_option_popup,
.MK_option_layer,
.mk_option_wrap:not(#pdpBottomSheet *),
#MK_option_popup,
#MK_fixed_wrap:not(#pdpBottomSheet *) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 토스트 메시지 */
.pdp-toast {
  position: fixed !important;
  bottom: 90px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: rgba(0,0,0,0.78) !important;
  color: #fff !important;
  padding: 11px 22px !important;
  border-radius: 24px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  transition: opacity 0.25s, transform 0.25s !important;
  pointer-events: none !important;
}
.pdp-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* 품절 스티커 */
.soldout_area,
.soldout_once { display: block !important; }

/* 반응형: 아이폰 홈바 대응 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pdp-fixed-cta {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .pdp-bs-inner {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================
   메이크샵 기본 옵션 팝업 → 바텀시트 스타일로 완전 오버라이드
   팝업을 막는 게 아니라, 팝업 자체를 화면 하단에서 올라오는
   바텀시트처럼 보이도록 CSS로 리디자인
============================================================ */

/* ── 팝업 배경 딤 오버라이드 ── */
.option_dimmed,
.MK_dimmed,
.dim_layer,
#optionDim,
.option_bg,
.pop_dim_layer,
.layer_dimmed {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 9000 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── 팝업 컨테이너 → 바텀시트로 변환 ── */
.option_popup_wrap,
.MK_option_popup,
.MK_option_layer,
#MK_option_popup,
.option_layer_wrap,
.option_popup,
.unify_option_popup,
#unify_option_popup,
.shopdetail_option_layer,
[id*="option"][id*="pop"],
[id*="option"][id*="layer"],
[class*="option"][class*="popup"]:not(#pdpBottomSheet *),
[class*="option"][class*="layer"]:not(#pdpBottomSheet *) {
  /* 위치: 화면 하단 고정 */
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 500px !important;
  max-height: 85vh !important;

  /* 바텀시트 외관 */
  background: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.18) !important;
  z-index: 9100 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 20px 20px 40px !important;

  /* 애니메이션 */
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1) !important;

  /* 기존 스타일 초기화 */
  margin: 0 !important;
  right: auto !important;
  border: none !important;
  border-top: none !important;
  outline: none !important;
}

/* ── 팝업 상단 핸들 바 추가 (::before) ── */
.option_popup_wrap::before,
.MK_option_popup::before,
.MK_option_layer::before,
#MK_option_popup::before,
.option_layer_wrap::before,
.option_popup::before,
.unify_option_popup::before,
#unify_option_popup::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 4px !important;
  background: #ddd !important;
  border-radius: 2px !important;
  margin: 0 auto 16px !important;
}

/* ── 팝업 내부 제목 ── */
.option_popup_wrap .pop_tit,
.option_popup_wrap .tit,
.option_popup_wrap h3,
.option_popup_wrap h4,
.MK_option_popup .pop_tit,
.MK_option_popup h3,
#MK_option_popup .pop_tit,
#MK_option_popup h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* ── 팝업 내부 닫기 버튼 ── */
.option_popup_wrap .btn_close,
.option_popup_wrap .close,
.MK_option_popup .btn_close,
.MK_option_popup .close,
#MK_option_popup .btn_close,
#MK_option_popup .close,
[class*="option"][class*="popup"] .btn_close,
[class*="option"][class*="layer"] .btn_close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 28px !important;
  height: 28px !important;
  background: #f0f0f0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: #555 !important;
  border: none !important;
  cursor: pointer !important;
}

/* ── 팝업 내 select 드롭다운 ── */
.option_popup_wrap select,
.MK_option_popup select,
#MK_option_popup select,
.option_layer_wrap select,
[class*="option"][class*="popup"] select,
[class*="option"][class*="layer"] select {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #111 !important;
  background: #fff !important;
  margin-bottom: 12px !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* ── 팝업 내 옵션 카드 (선택된 옵션 목록) ── */
.option_popup_wrap .MK_inner-opt-cm,
.MK_option_popup .MK_inner-opt-cm,
#MK_option_popup .MK_inner-opt-cm {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 !important;
}

/* ── 팝업 내 총금액 영역 ── */
.option_popup_wrap #MK_innerOptTotal,
.MK_option_popup #MK_innerOptTotal,
#MK_option_popup #MK_innerOptTotal,
.option_popup_wrap .MK_txt-total,
#MK_option_popup .MK_txt-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-top: 2px solid #111 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
}

/* ── 팝업 내 구매 버튼 ── */
.option_popup_wrap .btn_buy,
.option_popup_wrap .btn_basket,
.option_popup_wrap .buy_btn,
.option_popup_wrap .cart_btn,
.MK_option_popup .btn_buy,
.MK_option_popup .btn_basket,
#MK_option_popup .btn_buy,
#MK_option_popup .btn_basket {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(50% - 5px) !important;
  height: 52px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
}
.option_popup_wrap .btn_basket,
#MK_option_popup .btn_basket {
  background: #fff !important;
  color: #111 !important;
  border: 1.5px solid #111 !important;
}
.option_popup_wrap .btn_buy,
#MK_option_popup .btn_buy {
  background: #111 !important;
  color: #fff !important;
}


/* ============================================================
   추가 구성 상품 (extra_product)
============================================================ */
.pdp-extra-wrap {
  margin: 14px 0 8px !important;
}

.pdp-extra-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin: 0 0 12px !important;
  text-align: left !important;
}

.pdp-extra-item {
  display: flex !important;
  gap: 12px !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.pdp-extra-thumb {
  width: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f7f7f7 !important;
}

.pdp-extra-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.pdp-extra-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.pdp-extra-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.45 !important;
  margin: 0 0 6px !important;
  word-break: keep-all !important;
}

.pdp-extra-price {
  margin: 0 0 10px !important;
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.4 !important;
}

.pdp-extra-price strong {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #111 !important;
}

.pdp-extra-option-wrap {
  margin-top: 8px !important;
}

.pdp-extra-option-wrap .pdp-select-wrap {
  margin-bottom: 10px !important;
}

.pdp-extra-option-wrap .pdp-opt-label {
  text-align: left !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}

.pdp-extra-complete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  margin-top: 4px !important;
  border-radius: 10px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: -0.2px !important;
}

.pdp-extra-complete-btn:active {
  background: #333 !important;
}

/* BASIC css end */