@charset "utf-8";

/* ==========================================================================
   [AS / 교환·반품 접수 폼 — 보조·전용 스타일시트]
   파일: as_form.css  |  서버: /niiobbs/inc/css/as_form.css
   ==========================================================================

   ■ 이 파일의 역할
   bbs_form.css 가 담지 않는 AS·교환「전용 UI」+ bbs 규칙의「의도적 override」.
   - 스텝퍼(단계 네비게이션) 전체 디자인
   - .as-container 카드형 외곽(배경·radius·shadow)
   - 수량 +/- 위저드, 시작 iframe, UX 애니메이션
   - 이메일 empty input-group 보정, 확인 단계 padding, 이메일 모달 footer

   ■ 반드시 bbs_form.css 와 함께 (단독 사용 X)
   as_form.jsp / exchange_form.jsp:
     board.css → bbs_form.css → as_form.css  ← 이 순서 유지

   ■ QnA는 이 파일을 로드하지 않음
   qna_form.jsp → bbs_form.css 만. 스텝퍼·아래 override 미적용.

   ■ bbs_form.css 와 합쳐 써도 되나? → 예, 현재 구조가 그렇게 설계됨
   | 항목           | 판단                                              |
   |----------------|---------------------------------------------------|
   | 동작           | 문제 없음 (로드 순서로 override 명확)             |
   | HTTP           | CSS 2개 = 요청 2번 (gzip 후 체감 미미)            |
   | 유지보수       | 중복 selector 일부 (.as-purchase-wizard 등)     |
   |                | → 수정 시 두 파일 확인 필요                       |
   | 파일 1개 통합  | 가능하나 4,000줄+ 단일 파일, QnA 분리 어려움     |

   ■ 권장
   - 지금: 「bbs = 공통, as = AS·교환 전용」2파일 유지 권장
   - 장기: 중복 제거(위저드·summary 중 한쪽으로 통합) 후에도 역할 분리 유지
   - 비권장: 급하게 1파일 merge (QnA·선택화면까지 비대해짐)

   ■ 이 파일이 덮어쓰는 bbs_form.css 영역
   | § | selector              | override 내용                          |
   |---|-----------------------|----------------------------------------|
   | 1 | .as-container         | 카드 배경·padding·shadow               |
   | 2 | .stepper-wrapper      | min-height, 모바일 margin-bottom       |
   | 8 | .as-purchase-wizard   | bbs §2 와 동일값(중복 — 정리 후보)     |
   |13 | .as-email-input-group | empty 시 radius·색상 !important        |
   |14 | .as-summary-*         | padding·뱃지 !important                |
   |15 | #emailModal footer    | border-top 제거                        |
   |16 | @media 768px          | 컨테이너·스텝퍼·summary 모바일         |

   ■ 섹션 목차
   1. 레이아웃(컨테이너)  2. 스텝퍼  3. 단계 패널  4. 이동 버튼  5. 약관 박스
   6. 폼 유틸  7. 플로팅 숨김  8. 구입정보  9. 브랜드 AC  10. 시작 iframe
   11. UX 애니메이션  12. 수량 위저드  13. 이메일 그룹  14. 확인 요약
   15. 이메일 모달  16. 반응형
   ========================================================================== */


/* ==========================================================================
   1. 레이아웃 — 메인 컨테이너
   bbs_form.css §1 은 .as-container .row > col min-width 만 정의.
   카드형 흰 박스(배경·radius·shadow·padding)는 이 파일 전담.
   모바일 §16 에서 padding 0·투명 배경으로 전환.
   ========================================================================== */

.as-container {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 30px;
  margin-top: 20px;
  margin-bottom: 40px;
}


/* ==========================================================================
   2. 단계 네비게이션 (스텝퍼)
   HTML: as_form.jsp / exchange_form.jsp 의 .stepper-wrapper
   bbs_form.css 하단 pulse 애니메이션·§9 모바일(1837행)과 병존 → 이 섹션이 우선.
   ========================================================================== */

/* 트랙·진행 바 */
.stepper-wrapper {
  position: relative;
  min-height: 80px;
  height: auto;
  margin-bottom: 40px;
  padding-bottom: 0.25rem;
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
}

.stepper-wrapper::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 10px;
  right: 10px;
  height: 3px;
  background: #e9ecef;
  z-index: 1;
}

.stepper-progress-bar {
  position: absolute;
  top: 25px;
  left: 10px;
  height: 3px;
  background: #4e73df;
  z-index: 1;
  transition: width 0.4s ease;
  width: 0%;
}

/* 단계 아이템 기본 */
.stepper-item {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  width: 100px;
}

.stepper-item.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.stepper-item.disabled .step-counter,
.stepper-item.disabled .step-counter-mini {
  background: #e9ecef;
  color: #adb5bd;
  box-shadow: none;
  transform: none;
}

.stepper-item.disabled .step-name,
.stepper-item.disabled .step-name-mini {
  color: #adb5bd;
}

/* 단계별 가로 위치 (시작 · 1 · 2 · 3 · 확인) */
.stepper-wrapper .stepper-item:nth-child(2) {
  left: 0;
  transform: translateX(0);
  align-items: flex-start;
}

.stepper-wrapper .stepper-item:nth-child(3) {
  left: 25%;
  transform: translateX(-50%);
}

.stepper-wrapper .stepper-item:nth-child(4) {
  left: 50%;
  transform: translateX(-50%);
}

.stepper-wrapper .stepper-item:nth-child(5) {
  left: 75%;
  transform: translateX(-50%);
}

.stepper-wrapper .stepper-item:nth-child(6) {
  left: 100%;
  transform: translateX(-100%);
  align-items: flex-end;
}

/* 번호 원 (1~3단계) */
.stepper-item .step-counter {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9ecef;
  border: 3px solid #ffffff;
  font-weight: bold;
  color: #6c757d;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.stepper-item.active .step-counter {
  background: #4e73df;
  color: #ffffff;
  transform: scale(1.02);
  box-shadow: 0 0 12px rgba(78, 115, 223, 0.3);
}

.stepper-item.completed .step-counter {
  background: #1cc88a;
  color: #ffffff;
  width: 36px;
  height: 36px;
  margin-top: 7px;
  font-size: 0.8rem;
  border-width: 2px;
  box-shadow: 0 2px 4px rgba(28, 200, 138, 0.25);
}

.stepper-item .step-name {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6c757d;
  text-align: center;
  transition: color 0.3s ease;
}

.stepper-item.active .step-name {
  color: #4e73df;
}

.stepper-item.completed .step-name {
  color: #1cc88a;
}

/* 미니 원 (시작 · 확인 앵커) */
.stepper-item .step-counter-mini {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e9ecef;
  border: 3px solid #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-top: 15px;
  z-index: 2;
}

.stepper-item.active .step-counter-mini {
  background: #4e73df;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(78, 115, 223, 0.3);
}

.stepper-item.completed .step-counter-mini {
  background: #1cc88a;
  width: 14px;
  height: 14px;
  margin-top: 18px;
  border-width: 2px;
}

.stepper-item .step-name-mini {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6c757d;
  text-align: center;
  transition: color 0.3s ease;
}

.stepper-item.active .step-name-mini {
  color: #4e73df;
}

.stepper-item.completed .step-name-mini {
  color: #1cc88a;
}


/* ==========================================================================
   3. 폼 단계 패널 (stepPanel1~5)
   ========================================================================== */

.form-step-panel {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
}

.form-step-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   4. 단계 이동 버튼 (다음 · 이전)
   ========================================================================== */

.btn-custom {
  padding: 12px 30px;
  font-weight: bold;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.btn-next {
  background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
  color: white;
  border: none;
}

.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(78, 115, 223, 0.4);
  color: white;
}

.btn-prev {
  background: #f8f9fc;
  border: 1px solid #d1d3e2;
  color: #4e73df;
}

.btn-prev:hover {
  background: #eaecf4;
}


/* ==========================================================================
   5. 규정 · 약관 박스 (시작 단계)
   ========================================================================== */

.terms-box {
  background: #f8f9fc;
  border-radius: 8px;
  border: 1px solid #e3e6f0;
  padding: 20px;
  max-height: 250px;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #4e5e6a;
  margin-bottom: 20px;
}


/* ==========================================================================
   6. 공통 폼 유틸
   ========================================================================== */

.required-star {
  color: #e74a3b;
  margin-left: 3px;
}
.required-star.required-star--filled {
  color: #212529;
}

.btn-outline-secondary:hover {
  background-color: #f8f9fc !important;
  color: #4e73df !important;
  border-color: #d1d3e2 !important;
}

.as-password-input-group {
  max-width: 250px;
  width: 100%;
}


/* ==========================================================================
   7. 사이트 플로팅 UI 숨김 (접수 폼 위에 겹치지 않도록)
   ========================================================================== */

#indexbar,
.mobile-bottom-nav,
#floating-panel-wrapper,
#mobile-floating-buy-bar,
.quick-menu,
.floating-menu,
.floating-quick-menu,
#quick_menu,
#quickMenu,
#floatingMenu,
#floatingQuickMenu,
.floating-btn,
.floating-bar,
#floating-bar,
.floating_bar,
#floating_bar {
  display: none !important;
}


/* ==========================================================================
   8. 구입정보 — 그룹 카드 · 위저드 · 제품 선택
   .as-purchase-wizard → bbs_form.css §2 와 속성 중복.
   .as-form-page 접두사 있는 bbs 규칙이 specificity 높음 → 동일값 유지 또는 bbs 쪽 정리 권장.
   ========================================================================== */

.as-purchase-group-card:not(.as-purchase-group-card--numbered) {
  border: 1px solid #e3e6f0;
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  background: #fafbfc;
}

.as-purchase-group-card:not(.as-purchase-group-card--numbered) .as-purchase-group-card__actions {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px dashed #e3e6f0 !important;
}

.as-purchase-groups-root.as-field-invalid,
.as-repair-groups-root.as-field-invalid {
  outline: none;
}

.as-group-lines .as-group-line {
  margin-bottom: 0.75rem;
}

.as-purchase-wizard {
  background: #f8f9fc;
  border: 1px solid #e3e6f0;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.as-purchase-wizard.as-field-invalid {
  outline: 2px solid #e74a3b;
  outline-offset: 4px;
}

.as-wizard-count-input {
  max-width: 120px;
}

.bbs-form-product-card__brand.as-brand-label-lines {
  line-height: 1.35;
}

.as-prod-pick-modes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 1rem;
}

.as-prod-pick-mode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}

.as-prod-pick-mode-item__main {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.as-prod-member-only-hint {
  text-align: center;
  width: 100%;
  line-height: 1.2;
  white-space: nowrap;
}

.as-prod-pick-modes .form-check-inline {
  margin-right: 0;
}

.as-prod-pick-modes .form-check-label {
  font-size: 0.9375rem;
}

.as-purchase-groups-root .as-group-brand-prod-row {
  align-items: flex-start;
}

.as-purchase-groups-root .as-group-brand-prod-row .as-group-prod-cell .as-step3-section__title {
  margin-top: 0;
}

/* ==========================================================================
   9. 브랜드 자동완성
   ========================================================================== */

.as-group-brand-ac-wrap {
  position: relative;
  width: 100%;
}

.as-group-brand-ac-input {
  width: 100%;
  border-radius: var(--as-form-input-radius, 12px);
  box-sizing: border-box;
}

.as-group-brand-ac-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6c757d;
  white-space: normal;
  line-height: 1.45;
  padding-bottom: 0.35rem;
}

.as-group-brand-ac-hint--empty {
  color: #856404;
}

.as-group-brand-ac-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 1060;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  background: #fff;
}

.as-group-brand-ac-list[hidden] {
  display: none !important;
}

.as-group-brand-ac-item {
  white-space: normal;
  line-height: 1.35;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.as-group-brand-ac-item--other {
  border-top: 1px solid #e9ecef;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
}


/* ==========================================================================
   10. 시작 단계 — 게시판 안내 iframe
   ========================================================================== */

.as-receipt-intro-wrap {
  width: 100%;
  margin-bottom: 1rem;
}

.as-receipt-intro-frame {
  display: block;
  width: 100%;
  min-height: 280px;
  border: none;
  background: transparent;
  overflow: hidden;
}


/* ==========================================================================
   11. UX 보조 — 스크롤 유도 · 흔들림 · 개인정보 동의 강조
   ========================================================================== */

/* 1단계 하단 스크롤 유도 */
.scroll-down-indicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #4e5e6a;
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 6px 18px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  animation: bounce-indicator 4s infinite ease-in-out;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.scroll-down-indicator .material-icons {
  color: #4e73df;
}

.scroll-down-indicator.show {
  opacity: 1;
  visibility: visible;
}

@keyframes bounce-indicator {
  0%, 6%, 12%, 16%, 20%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  3% {
    transform: translateX(-50%) translateY(-8px);
  }
  9% {
    transform: translateX(-50%) translateY(-4px);
  }
}

/* 다음 버튼 · 동의 체크박스 흔들림 */
@keyframes periodic-shake {
  0%, 80%, 100% { transform: scale(1) translateX(0); }
  82%, 86%, 90%, 94% { transform: scale(1.03) translateX(-3px); }
  84%, 88%, 92%, 96% { transform: scale(1.03) translateX(3px); }
  98% { transform: scale(1) translateX(0); }
}

.btn-shake {
  animation: periodic-shake 3s infinite ease-in-out;
}

.shake-once {
  animation: shake-next-btn 0.55s ease-in-out;
}

@keyframes shake-next-btn {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-6px); }
  30%, 60%, 90% { transform: translateX(6px); }
}

@keyframes privacy-agree-shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-8px); }
  30%, 60%, 90% { transform: translateX(8px); }
}

#privacyAgreeWrap.privacy-agree-shake {
  animation: privacy-agree-shake 0.55s ease;
  outline: 2px solid #e74a3b;
  outline-offset: 2px;
}


/* ==========================================================================
   12. 수량 위저드 (+ / − 컨트롤)
   ========================================================================== */

.as-wizard-number-group {
  background: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 30px;
  overflow: hidden;
  padding: 2px;
}

.as-wizard-number-group .btn {
  border: none !important;
  background: transparent !important;
  color: #4e5e6a !important;
  font-weight: bold !important;
  font-size: 1.25rem !important;
  padding: 0 !important;
  height: 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}

.as-wizard-number-group .btn:hover {
  background-color: #f8f9fc !important;
  color: #4e73df !important;
}

.as-wizard-number-group .form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-weight: bold !important;
  font-size: 1.1rem !important;
  color: #2e384d !important;
  padding: 0 !important;
  text-align: center !important;
  height: 36px !important;
}

.as-wizard-number-group input[type=number]::-webkit-inner-spin-button,
.as-wizard-number-group input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.as-wizard-number-group input[type=number] {
  appearance: textfield;
}


/* ==========================================================================
   13. 이메일 입력 그룹 (input + 버튼 연결 · bbs_form.css §3 보완)
   bbs_form.css: 연결 형태, 버튼 색, 4단계 너비(--as-contact-field-width)
   이 섹션: empty·readonly 상태 radius/배경 !important (과거 as_form 단독 override)
   ========================================================================== */

.as-email-input-group.as-email-input-group--empty .form-control,
.as-email-input-group:has(.as-email-entry-btn) .form-control,
.as-email-input-group:has([style*="visibility: hidden"]) .form-control {
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-color: #f8f9fc !important;
}

.as-email-input-group.as-email-input-group--empty .input-clear-btn:not(.as-email-entry-btn),
.as-email-input-group:has([style*="visibility: hidden"]) .input-clear-btn:not(.as-email-entry-btn) {
  display: none !important;
}

.as-email-input-group:has(.as-email-entry-btn) > .as-email-entry-btn {
  background-color: #fff !important;
  border-left: 1px solid #ced4da !important;
}


/* ==========================================================================
   14. 확인 단계 — 요약 카드 · 뱃지
   bbs_form.css §7: 전체 summary 레이아웃·썸네일·첨부
   이 섹션: padding·margin·뱃지 크기 !important 보정 (PC·모바일 §16)
   ========================================================================== */

.as-summary-card {
  padding: 2.25rem !important;
  background-color: #ffffff;
  border: 1px solid #e3e6f0;
  border-radius: 12px;
}

.as-summary-section {
  margin-bottom: 1.85rem !important;
}

.as-summary-section:last-child {
  margin-bottom: 0 !important;
}

.as-summary-section__title {
  margin-bottom: 1.05rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #2e384d !important;
}

.as-summary-item {
  margin-bottom: 0.25rem !important;
}

.as-summary-item:last-child {
  margin-bottom: 0 !important;
}

.as-summary-item dt,
.as-summary-item dd {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

.as-summary-group-card {
  margin-bottom: 2rem !important;
  padding: 1.5rem !important;
  border: 1px solid #e3e6f0;
  border-radius: 12px;
  background: #fafbfc;
}

.as-summary-group-card:last-child {
  margin-bottom: 0 !important;
}

.as-summary-group-card__meta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 16px 0;
}

.as-summary-meta-badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  background-color: #f1f3f5;
  border: 1px solid #dee2e6;
  padding: 3px 10px;
  border-radius: 30px;
}

.as-summary-badge-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 25px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  color: #495057;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 6px;
  margin-right: 12px;
}

.as-summary-product-val {
  font-size: 0.9375rem;
  color: #212529;
  font-weight: 500;
  line-height: 1.4;
}

.as-summary-files {
  margin-top: 1rem !important;
}


/* ==========================================================================
   15. 이메일 입력 모달
   ========================================================================== */

#emailModal .modal-footer.as-form-modal-footer-actions {
  border-top: 0 !important;
  padding-top: 0.75rem !important;
}


/* ==========================================================================
   16. 반응형 — 모바일
   bbs_form.css §9·§14 와 겹치는 영역:
   - .as-container, .stepper-wrapper → 여기 !important 로 AS·교환 최종값
   - .as-summary-* 모바일 → 뱃지를 plain text 로
   ========================================================================== */

@media (max-width: 768px) {
  /* 레이아웃 */
  .as-container {
    padding: 0 !important;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* 스텝퍼 ↔ 단계 타이틀 간격 */
  .as-form-page .stepper-wrapper {
    min-height: 88px;
    height: auto;
    margin-bottom: 2rem !important;
    padding-bottom: 0.35rem;
  }

  .as-form-page .form-step-panel > .d-flex:first-child,
  .as-form-page .form-step-panel > h4:first-child,
  .as-form-page .form-step-panel > .as-step5-header:first-child {
    margin-top: 0.35rem;
  }

  /* 확인 단계 요약 */
  .as-summary-card {
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
  }

  .as-summary-section {
    margin-bottom: 1.5rem !important;
  }

  .as-summary-section__title {
    margin-bottom: 0.75rem !important;
    font-size: 1rem !important;
  }

  .as-summary-item {
    margin-bottom: 0.4rem !important;
  }

  .as-summary-item dt,
  .as-summary-item dd {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .as-summary-group-card {
    margin-bottom: 1.25rem !important;
    padding: 12px !important;
  }

  .as-summary-group-card__meta-wrap {
    margin: 8px 0 10px 0 !important;
    gap: 4px !important;
  }

  .as-summary-meta-badge {
    padding: 2px 8px !important;
    font-size: 0.72rem !important;
    margin-right: 4px !important;
    margin-bottom: 4px !important;
  }

  .as-summary-product-row {
    padding: 10px 0 !important;
  }

  /* 모바일 — 제품/증상 뱃지를 일반 텍스트로 */
  .as-summary-product-row__title,
  .as-summary-product-row__symptom {
    display: block !important;
    margin-bottom: 0.35rem !important;
  }

  .as-summary-badge-label {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    border: none !important;
    color: #858796 !important;
    font-size: 0.8rem !important;
    font-weight: normal !important;
    padding: 0 !important;
    margin-right: 4px !important;
  }

  .as-summary-badge-label::after {
    content: ": ";
  }

  .as-summary-product-val {
    font-size: 0.8rem !important;
    font-weight: normal !important;
    color: #212529 !important;
    display: inline !important;
  }
}

@media (max-width: 575.98px) {
  /* 이메일 모달 footer 패딩 */
  #emailModal .modal-footer.as-form-modal-footer-actions {
    padding: 0.75rem 1rem 1rem !important;
  }
}

/* 제품2+ 구매정보 — 직전 제품과 동일 체크 */
.as-purchase-group-card .as-group-same-purchase-cell {
  margin-bottom: -0.15rem;
}
.as-purchase-group-card .as-group-same-purchase-check.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
  margin-bottom: 0;
  padding: 0.5rem 0.85rem;
  background: #f8f9fc;
  border: 1px solid #e3e6f0;
  border-radius: 10px;
  /* Bootstrap .form-check padding-left + margin-left:-1.5em 보정 */
  padding-left: 0.85rem !important;
}
.as-purchase-group-card .as-group-same-purchase-check .form-check-input {
  float: none;
  position: static;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin: 0 !important;
}
.as-purchase-group-card .as-group-same-purchase-check .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0 !important;
  margin-bottom: 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
@media (min-width: 992px) {
  .as-purchase-group-card .as-purchase-group__purchase-section .as-group-same-purchase-cell {
    width: 50% !important;
    max-width: 50% !important;
  }
}