/* 모달 배경 */
.modal {
  display: none;
  position: fixed;
  z-index: 10001;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.modal.show {
  display: flex !important;
  opacity: 1;
}
/* 모달 내용 */
.modal-content {
  background: #fff;
  border-radius: 16px;
  max-width: 420px;
  width: 90%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.modal-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
}
/* 닫기 버튼 */
.modal-close {
  background: none;
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  color: #888;
  cursor: pointer;
}
.modal-close i {
  font-size: 18px;
  font-weight: 600;
}
/* 모달 타이틀 */
.modal-title {
  width: 100%;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: left;
}
/* 모달 본문 */
.modal-body {
  font-size: 1rem;
  color: #333;
  text-align: left;
  max-height: 600px;
  overflow-y: auto;
  padding: 0 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
/* 버튼 영역 */
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  max-height: 55px;
}
.modal-actions button {
  height: 55px;
  width: 100%;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.75px;
  font-weight: 600;
  border-radius: 0;
}

.address-item.selected .address-info {
  border-color: #23b16c;
}
.address-item {
  cursor: pointer;
}

/* 버튼 스타일 예시 */
.btn-green {
  background: #22b573;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  width: 100%;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-green:hover {
  background: #1a9e5a;
}
.btn-gray {
  background: #f1f1f1;
  color: #333;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  width: 100%;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-gray:hover {
  background: #e0e0e0;
}

/* 구독 상세조회 모달 */
.subscription-detail-modal .modal-content {
  max-width: 900px;
  width: 95%;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  position: relative;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

.subscription-detail-modal .modal-header {
  border-bottom: 1px solid #eee;
  padding: 20px 30px;
  flex-shrink: 0;
}

.subscription-detail-modal .modal-body {
  flex: 1;
  padding: 0;
  overflow: hidden;
  display: block;
}

.subscription-detail-modal .modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 16px 16px;
}

/* 상품옵션교환모달 */
.exchangeOptionModal .modal-content {
  max-width: 450px;
  width: 90%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  border: 1px solid #eee;
}

.exchangeOptionModal .modal-content .modal-header {
  border-bottom: 1px solid #eee;
}
.exchangeOptionModal .modal-content .modal-body {
  flex-direction: column;
  padding: 25px 30px;
  gap: 25px;
}
.exchangeOptionModal .exchange-product-info {
  width: 100%;
}
.exchangeOptionModal .exchange-product-info .item-info {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.exchangeOptionModal .exchange-product-info .thumb {
  min-width: 70px;
  max-width: 70px;
  height: 70px;
  border-radius: 5px;
  overflow: hidden;
}
.exchangeOptionModal .exchange-product-info .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.exchangeOptionModal .exchange-product-info .item-info .info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.exchangeOptionModal .exchange-product-info .item-info .info .name-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.exchangeOptionModal .exchange-product-info .name-wrap h5 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.75px;
  line-height: 1;
}
.exchangeOptionModal .exchange-product-info .name-wrap .description {
  font-size: 14px;
  color: #666;
  letter-spacing: -0.75px;
  line-height: 1;
}
.exchangeOptionModal .exchange-product-info .meta .price .amount {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.exchangeOptionModal .exchange-options-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exchangeOptionModal .exchange-options-form .option-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.exchangeOptionModal .exchange-options-form .form-label {
  font-size: 13px;
  font-weight: 400;
  color: #888;
  letter-spacing: -0.75px;
}
.exchangeOptionModal .exchange-options-form .form-select {
  width: 100%;
  height: 45px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  background-color: #fff;
}
.exchangeOptionModal .exchange-options-form .form-select:invalid {
  color: #888;
}
.exchangeOptionModal .exchange-options-form .form-select option {
  color: #333;
}
.exchangeOptionModal .exchange-options-form .form-select.placeholder-selected {
  color: #aaa;
}
.exchangeOptionModal .exchange-options-form .quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}
.exchangeOptionModal .exchange-options-form .quantity-selector .qty-btn {
  min-width: 28px;
  height: 28px;
  border: none;
  background-color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 0;
}
.exchangeOptionModal .exchange-options-form .quantity-selector .qty-input {
  width: 28px;
  height: 28px;
  border: none;
  text-align: center;
  font-size: 16px;
}
.exchangeOptionModal .selected-items-summary {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 10px;
  background-color: #fff;
}
.exchangeOptionModal .modal-actions {
  max-height: min-content;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  height: 80px;
  gap: 10px;
}
.exchangeOptionModal .modal-actions .btn {
  height: 40px;
  border-radius: 5px;
  font-size: 14px;
}
.exchangeOptionModal .modal-actions .btn.cnacel-btn {
  border: 1px solid #dadada;
  color: #333;
  background-color: #fff;
}
.exchangeOptionModal .modal-actions .btn.change-btn {
  background-color: #23b16c;
  color: #fff;
  border: 1px solid #23b16c;
}

/* 결제수단추가모달 */
#cardAddModal.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  display: flex;
}
#cardAddModal .modal-content {
  width: 720px;
  height: 640px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
#cardAddModal .modal-content iframe {
  width: 100%;
  height: 100%;
}
#cardAddModal .modal-close-btn {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  z-index: 10;
  cursor: pointer;
}

#locationAddModal.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  display: flex;
}
#locationAddModal .modal-content {
  width: 720px;
  height: 640px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
#locationAddModal .modal-content iframe {
  width: 100%;
  height: 100%;
}
#locationAddModal .modal-close-btn {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  z-index: 10;
  cursor: pointer;
}

/* 구독 상세 조회 모달 (정기구독 내역용) */
.subscription-list-detail-modal {
  z-index: 99999 !important;
}
.subscription-list-detail-modal .modal-content {
  max-width: 800px;
  width: 90%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  border: 1px solid #eee;
}
.subscription-list-detail-modal .modal-header {
  border-bottom: 1px solid #eee;
}
.subscription-list-detail-modal .modal-body {
  flex-direction: column;
  padding: 0;
}

/* 구독 상세 조회 모달 (정기구독 관리용) */
.subscription-manage-detail-modal {
  z-index: 99999 !important;
}
.subscription-manage-detail-modal .modal-content {
  max-width: 800px;
  width: 90%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  border: 1px solid #eee;
}
.subscription-manage-detail-modal .modal-header {
  border-bottom: 1px solid #eee;
}
.subscription-manage-detail-modal .modal-body {
  flex-direction: column;
  padding: 0;
}

/* 찜리스트 담기 모달 */
.subscription-modal .modal-header .modal-title p,
.cart-modal .modal-header .modal-title p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.subscription-modal .modal-title-thumb img,
.cart-modal .modal-title-thumb img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
}
.subscription-modal .modal-title-text,
.cart-modal .modal-title-text {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.75px;
  color: #333;
}
.subscription-modal .modal-content,
.cart-modal .modal-content {
  max-width: 450px;
  width: 90%;
}
.subscription-modal .modal-header,
.cart-modal .modal-header {
  padding: 20px 30px 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.subscription-modal .modal-body {
  width: 100%;
  padding: 0 30px 0 30px;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  justify-content: flex-start;
}
.subscription-modal .product-header,
.cart-modal .product-header {
  display: flex;
  gap: 15px;
  align-items: center;
  position: relative;
}
.subscription-modal .product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  overflow: hidden;
}
.subscription-modal .product-info,
.cart-modal .product-info {
  flex: 1;
}
/* product-info-header는 cart-modal의 modal-title에서만 사용됨 */
.cart-modal .modal-title .product-info-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.subscription-modal .product-title,
.cart-modal .product-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.subscription-modal .product-header .modal-close,
.cart-modal .product-header .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  color: #888;
  cursor: pointer;
}
.subscription-modal .product-header .modal-close i,
.cart-modal .product-header .modal-close i {
  font-size: 18px;
  font-weight: 600;
}
.subscription-modal .section-wrap,
.cart-modal .section-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0 0;
}
.subscription-modal .section-wrap .section,
.cart-modal .section-wrap .section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.subscription-modal .section-wrap .section.delivery::before,
.cart-modal .section-wrap .section.delivery::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #eeeeee;
  margin-bottom: 10px;
}

.cart-modal .modal-header .modal-title{display: flex;flex-direction: row; align-content: flex-start; justify-content: flex-start; gap: 5px;}

.subscription-modal .section-title,
.cart-modal .section-title {
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  color: #333;
}

.cart-modal .section-title{padding: 0 !important; text-align: left !important;}
.subscription-modal .dropdown,
.cart-modal .dropdown {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.subscription-modal .selected-products,
.cart-modal .selected-products {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.subscription-modal .selected-item,
.cart-modal .selected-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #eee;
  gap: 15px;
}
.subscription-modal .selected-item-info,
.cart-modal .selected-item-info {
  flex: 1;
}
.subscription-modal .selected-item-name,
.cart-modal .selected-item-name {
  font-size: 14px;
  color: #333;
  letter-spacing: -0.75px;
}
.subscription-modal .selected-item-price,
.cart-modal .selected-item-price {
  font-size: 12px;
  color: #666;
}
.subscription-modal .quantity-controls,
.cart-modal .quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.subscription-modal .quantity-btn,
.cart-modal .quantity-btn {
  min-width: 35px;
  height: 35px;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}
.subscription-modal .quantity-btn.decrease,
.cart-modal .quantity-btn.decrease {
  border-radius: 4px 0px 0px 4px;
}
.subscription-modal .quantity-btn.increase,
.cart-modal .quantity-btn.increase {
  border-radius: 0px 4px 4px 0px;
}
.subscription-modal .quantity-btn:hover i,
.cart-modal .quantity-btn:hover i {
  color: #22b573;
}
.subscription-modal .quantity-btn i,
.cart-modal .quantity-btn i {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1;
  transition: all 0.3s;
}
.subscription-modal .quantity-input,
.cart-modal .quantity-input {
  width: 100%;
  height: 35px;
  text-align: center;
  border: none;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-radius: 0;
  font-size: 12px;
}
.subscription-modal .quantity-input:focus,
.cart-modal .quantity-input:focus {
  border: none;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.subscription-modal .quantity-input:focus:invalid,
.cart-modal .quantity-input:focus:invalid {
  border: none;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.subscription-modal .remove-btn,
.cart-modal .remove-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}
.subscription-modal .delivery-cycle {
  width: 100%;
  display: flex;
  gap: 5px;
}
.subscription-modal .cycle-btn {
  width: 100%;
  flex: 1;
  height: 35px;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  color: #b5b5b6;
  letter-spacing: -0.75px;
}
.subscription-modal .cycle-btn.active {
  color: #22b573;
  border-color: #22b573;
}
.subscription-modal .days-cols {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.subscription-modal .days-row {
  width: 100%;
  display: flex;
  gap: 5px;
}
.subscription-modal .day-label {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.subscription-modal .day-input {
  width: 100%;
  flex: 1;
  height: 35px;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 12px;
  color: #b5b5b6;
}
.subscription-modal .day-input.active {
  color: #22b573;
  border-color: #22b573;
}
.subscription-modal .quantity-selector {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscription-modal .date-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.subscription-modal .date-description {
  width: 130px;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
  letter-spacing: -0.75px;
  word-break: keep-all;
}
.subscription-modal .modal-footer,
.cart-modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
  border-top: 1px solid #eee;
}
.subscription-modal .total-label,
.cart-modal .total-label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.subscription-modal .total-price,
.cart-modal .total-price {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.subscription-modal .modal-actions {
  padding: 20px 30px;
  max-height: fit-content;
  border-top: none;
  background: transparent;
}
.subscription-modal .btn-cancel {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.subscription-modal .btn-subscribe,
.cart-modal .btn-addCart {
  background: #22b573;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.subscription-modal .btn-subscribe:hover .cart-modal .btn-subscribe:hover {
  background: #1a9e5a;
}
.selected-item-info-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.selected-item-total {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.selected-item-total .quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 84px;
  border: 1px solid #eee;
  border-radius: 3px;
}
.selected-item-total .quantity-btn {
  min-width: 28px;
  height: 28px;
  border: none;
}
.selected-item-total .quantity-input {
  border: none;
  height: 28px;
}
.selected-item-total .line-subtotal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.selected-item-total .line-subtotal .line-subtotal-value {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

/* 중복확인 모달 스타일 */
.duplicateCheck .modal-content {
  max-width: 400px;
  overflow: hidden;
  overflow-y: hidden !important;
}
.duplicateCheck .modal-body {
  text-align: center;
  padding: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  height: 120px;
}
.duplicateCheck .modal-body p {
  font-weight: 500;
}
.duplicateCheck .modal-actions {
  padding: 0;
  border-top: 1px solid #eeeeee;
}
.duplicateCheck .modal-actions .btn-green {
  border-radius: 0;
  background-color: #fff;
  color: #23b16c;
}

/* 유효시간 모달 스타일 */
.validityPeriod .modal-content {
  max-width: 400px;
  overflow: hidden;
  overflow-y: hidden !important;
}
.validityPeriod .modal-body {
  text-align: center;
  padding: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  height: 120px;
}
.validityPeriod .modal-body p {
  font-weight: 500;
}
.validityPeriod .modal-actions {
  padding: 0;
  border-top: 1px solid #eeeeee;
}
.validityPeriod .modal-actions .btn-green {
  border-radius: 0;
  background-color: #fff;
  color: #23b16c;
}

/* 확인 모달 스타일 */
.confirmation .modal-content {
  max-width: 400px;
  overflow: hidden;
  overflow-y: hidden !important;
}
.confirmation .modal-body {
  text-align: center;
  padding: 30px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.75px;
  color: #333;
  height: 120px;
}
.confirmation.code .modal-content .modal-body {
  height: 180px;
}
.confirmation .modal-body p {
  font-weight: 500;
}
.confirmation .modal-actions {
  padding: 0;
  border-top: 1px solid #eeeeee;
}
.confirmation .modal-actions .btn-green {
  border-radius: 0;
  background-color: #fff;
  color: #23b16c;
}

/* 확인/취소 모달 스타일 */

.confirmation.select .modal-actions button {
  border-radius: 0;
}
.confirmation.select .modal-actions button.cancel-btn {
  background-color: #fff;
  color: #888888;
}
.confirmation.select .modal-actions button + button {
  border-left: 1px solid #eee;
}

/* 확인/취소- padding 있는 스타일 */
.confirm-modal .modal-body {
  padding: 30px 20px;
}
.confirm-modal .modal-actions {
  max-height: fit-content;
  padding: 20px;
}
.confirm-modal .modal-actions button {
  height: 40px;
  border-radius: 5px;
}

/* 결제수단 추가 폼 스타일 */
.payment-add-form {
  width: 100%;
  padding: 20px 0;
}
.payment-add-form .form-group {
  margin-bottom: 20px;
  text-align: left;
}
.payment-add-form .form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.payment-add-form .form-control {
  width: 100%;
  height: 45px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background-color: #fff;
  transition: border-color 0.3s;
}
.payment-add-form .form-control:focus {
  outline: none;
  border-color: #23b16c;
}
.payment-add-form .form-row {
  display: flex;
  gap: 15px;
}
.payment-add-form .form-row .form-group {
  flex: 1;
}

/* 모달 버튼 스타일 */
.modal-actions .btn-cancel {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.modal-actions .btn-cancel:hover {
  background-color: #e8e8e8;
}
.modal-actions .btn-confirm {
  background-color: #23b16c;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.modal-actions .btn-confirm:hover {
  background-color: #1e9d5a;
}

/* 결제수단추가모달 */
#cardAddModal.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  display: flex;
}
#cardAddModal .modal-content {
  width: 720px;
  height: 640px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
#cardAddModal .modal-content iframe {
  width: 100%;
  height: 100%;
}
#cardAddModal .modal-close-btn {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  z-index: 10;
  cursor: pointer;
}

#locationAddModal.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  display: flex;
}
#locationAddModal .modal-content {
  width: 720px;
  height: 640px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
#locationAddModal .modal-content iframe {
  width: 100%;
  height: 100%;
}
#locationAddModal .modal-close-btn {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  z-index: 10;
  cursor: pointer;
}

#PayPasswordModal.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  display: flex;
}
#PayPasswordModal .modal-content {
  width: 720px;
  height: 626px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
#PayPasswordModal .modal-content iframe {
  width: 100%;
  height: 100%;
}
#PayPasswordModal .modal-close-btn {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  z-index: 10;
  cursor: pointer;
}

/* 성공 모달 스타일 */
.pw-success .modal-header .modal-title p {
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.75px;
}
.pw-success .modal-body {
  height: fit-content;
  padding: 20px 0;
}
.pw-success .modal-content {
  overflow: hidden;
}
.pw-success .pw-success-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pw-success .pw-success-body .lock-icon {
  width: 60px;
  height: 60px;
  background: url(../images/icon/password_icon2.svg) 50% 50% no-repeat;
  object-fit: contain;
}
.pw-success .pw-success-body p {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  text-align: center;
  margin: 0;
}
.pw-success .modal-actions {
  border-top: 1px solid #eee;
}
.pw-success .modal-actions .btn-green {
  background-color: #ffffff;
  color: #23b16c;
}

.modal-content iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 쿠폰 등록 모달 스타일 */
.coupon-registration .modal-content {
  max-width: 320px;
  width: 90%;
}
.coupon-registration .modal-body {
  padding: 0 30px;
  text-align: left;
}
.coupon-registration-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coupon-registration-form .input-group input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  transition: border-color 0.3s;
}
.coupon-registration-form .input-group input:focus {
  outline: none;
  border-color: #22b573;
}
.coupon-registration-form .input-group input::placeholder {
  color: #999;
}
.coupon-guidelines {
  width: 100%;
}
.coupon-guidelines ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.coupon-guidelines li {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.75px;
  color: #b5b5b6;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  word-break: keep-all;
}
.coupon-guidelines li:before {
  content: "";
  background-color: #b5b5b6;
  min-width: 3px;
  height: 3px;
  border-radius: 50%;
  display: block;
  margin-top: 5px;
}
.coupon-registration .modal-actions {
  padding: 30px;
  max-height: fit-content;
  gap: 5px;
}
.coupon-registration .modal-actions button {
  border-radius: 5px;
  height: 40px;
  font-size: 14px;
}
.coupon-registration .modal-actions .btn-gray {
  border: 1px solid #dadada;
  background-color: #ffffff;
  color: #333;
}

/* 쿠폰 등록 성공/실패 모달 스타일 */
.coupon-success .modal-content,
.coupon-error .modal-content {
  max-width: 400px;
  overflow: hidden;
}
.coupon-success .modal-body,
.coupon-error .modal-body {
  text-align: center;
  padding: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  height: 120px;
}
.coupon-success .modal-body p,
.coupon-error .modal-body p {
  font-weight: 500;
}
.coupon-success .modal-actions,
.coupon-error .modal-actions {
  padding: 0;
  border-top: 1px solid #eeeeee;
}
.coupon-success .modal-actions .btn-green,
.coupon-error .modal-actions .btn-green {
  border-radius: 0;
  background-color: #fff;
  color: #23b16c;
}

/* 쿠폰 상세 모달 스타일 */
.coupon-detail .modal-content {
  max-width: 400px;
  width: 90%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.coupon-detail .modal-header {
  padding: 25px 30px 0;
}
.coupon-detail .modal-title p {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.coupon-detail .modal-body {
  padding: 20px 30px;
  text-align: left;
  flex: 1;
  overflow-y: auto;
  align-items: flex-start;
}
.coupon-detail-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.coupon-detail .modal-body .coupon-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #eee;
  padding: 15px 20px;
  border-radius: 10px;
}
.coupon-detail .modal-body .coupon-summary .discount-amount {
  color: #23b16c;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.75px;
}
.coupon-detail .modal-body .coupon-summary .coupon-info-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coupon-detail .modal-body .coupon-summary .coupon-info-wrap::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #eee;
  display: block;
}
.coupon-detail .modal-body .coupon-summary .coupon-info-wrap .coupon-name {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.75px;
}
.coupon-detail .modal-body .coupon-summary .coupon-info-wrap .coupon-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.coupon-detail .modal-body .coupon-summary .coupon-info-wrap .info-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 15px;
}
.coupon-detail .modal-body .coupon-summary .coupon-info-wrap .info-item span {
  color: #888;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.75px;
}
.coupon-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.detail-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.detail-section ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.detail-section li {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.75px;
  color: #888888;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  word-break: keep-all;
}
.detail-section li:before {
  content: "";
  background-color: #888888;
  min-width: 3px;
  height: 3px;
  border-radius: 50%;
  display: block;
  margin-top: 5px;
}
.coupon-detail .modal-actions .btn-green {
  background-color: #fff;
  color: #23b16c;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.terms .modal-content {
  max-width: 600px;
  width: 100%;
  max-height: 740px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.terms .modal-content .modal-title p {
  font-size: 18px;
  letter-spacing: -0.75px;
  color: #333;
  font-weight: 600;
}
.terms .modal-content .modal-actions .btn-green {
  background-color: #fff;
  color: #23b16c;
}

/* 이미지 모달 스타일 */
.image-modal {
  background: rgba(0, 0, 0, 0.678);
}
.image-modal .modal-content {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  border: none;
}
.image-modal .modal-header {
  display: none;
}
.image-modal .modal-body {
  padding: 0;
  max-height: none;
  overflow: visible;
}
.image-modal .modal-body img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.image-modal .modal-actions {
  display: none;
}
.image-modal .modal-close {
  color: #fff;
}

/* 정기구독 모달 */
.subscription-list-detail-modal .modal-content {
  max-width: 480px;
  overflow: hidden;
}
.subscription-list-detail-modal .modal-content .modal-body {
  overflow-y: inherit;
  max-height: fit-content;
  padding: 0;
}
.subscription-list-detail-modal .subscription-list-detail-modal {
  width: 100%;
}

.subscription-manage-detail-modal .modal-content {
  max-width: 480px;
  overflow: hidden;
}
.subscription-manage-detail-modal .modal-content .modal-body {
  overflow-y: inherit;
  max-height: fit-content;
  padding: 0;
}
.subscription-manage-detail-modal .subscription-manage-detail-modal {
  width: 100%;
}
.detail-section .button-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.delivery-cycle,
.day-quantity,
.delivery-start-date {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.weekcount {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.day-header span {
  width: 100%;
  text-align: center;
}
.weekcount dl {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.weekcount dd {
  width: 100%;
}
.weekcount dd input {
  width: 100%;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  color: #b5b5b6;
  border-radius: 4px;
  text-align: center;
  transition: all 0.3s;
}
.weekcount dd input:focus {
  border-color: #23b16c;
  color: #23b16c;
}

.form-label {
  font-size: 14px;
  letter-spacing: -0.75px;
  color: #333;
  font-weight: 600;
}

.total-quantity {
  width: 100%;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.total-quantity .qty-btn {
  min-width: 35px;
  max-width: 35px;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
}
.total-quantity .qty-btn.minus {
  border-right: none;
  border-radius: 5px 0 0 5px;
}
.total-quantity .qty-btn.plus {
  border-left: none;
  border-radius: 0 5px 5px 0;
}
.total-quantity .qty-input {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0;
  border-color: #eee;
}
.total-quantity .qty-input:focus {
  border-radius: 0;
}

/* 장바구니 담기 모달 */
.cart-modal .modal-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
/* product-info-header는 cart-modal의 modal-title에서만 사용됨 */
.cart-modal .modal-title .product-info-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.cart-modal .modal-title .product-info-header .product-image {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  overflow: hidden;
}
.cart-modal .modal-title .product-info-header .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-modal
  .modal-title
  .product-info-header
  .product-basic-info
  .product-price {
  display: none;
}
.cart-modal
  .modal-title
  .product-info-header
  .product-basic-info
  .product-name {
  font-size: 15px;
  letter-spacing: -0.75px;
  font-weight: 600;
  color: #333;
}
.cart-modal .modal-body {
  width: 100%;
  padding: 0 30px 0 30px;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  justify-content: flex-start;
}
.cart-modal-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-modal-content .product-options-section + .order-section::before {
  content: "";
  width: 100%;
  height: 1px;
  display: flex;
  background-color: #eee;
}
.cart-modal-content .product-options-section,
.cart-modal-content .subscription-options-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-modal .order-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cart-modal-content .subscription-options-section .delivery {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.cart-modal-content .subscription-options-section .section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.cart-modal-content .subscription-options-section .delivery-cycle {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.cart-modal-content .subscription-options-section .delivery-cycle .cycle-radio {
  width: 100%;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  color: #b5b5b6;
  letter-spacing: -0.75px;
}
.cart-modal-content
  .subscription-options-section
  .delivery-cycle
  .cycle-radio:has(input[type="radio"]:checked) {
  border: 1px solid #23b16c;
  color: #23b16c;
}

.cart-modal-content .subscription-options-section .form-cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  gap: 10px;
}

.cart-modal-content .subscription-options-section .form-cont .weekcount {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.cart-modal-content .subscription-options-section .form-cont .weekcount dl {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 6px;
}
.cart-modal-content .subscription-options-section .weekcount dt {
  font-size: 14px;
  letter-spacing: -0.75px;
  line-height: 1;
  font-weight: 500;
  color: #888;
}
.cart-modal-content .subscription-options-section .form-cont .quantity-control {
  width: 100%;
}
.cart-modal-content .subscription-options-section .weekcount dl.active dt {
  color: #23b16c;
  font-weight: 600;
}
.cart-modal-content .subscription-options-section .form-cont .weekcount dd {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 35px;
  border: 1px solid #eee;
  border-radius: 4px;
  color: #888;
}
.cart-modal-content .subscription-options-section .weekcount dl.active dd {
  border-color: #23b16c;
  color: #23b16c;
  font-weight: 600;
}

.cart-modal-content .subscription-options-section .form-cont .quantity-control {
  width: 100%;
}
.cart-modal-content
  .subscription-options-section
  .form-cont
  .quantity-control
  .b-numberinput {
  width: 100%;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cart-modal-content
  .subscription-options-section
  .form-cont
  .quantity-control
  .b-numberinput
  .qty-btn {
  min-width: 35px;
  max-width: 35px;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  background-color: #fff;
}

.cart-modal-content
  .subscription-options-section
  .form-cont
  .quantity-control
  .b-numberinput
  .qty-btn
  .icon
  i {
  color: #333;
}
.cart-modal-content
  .subscription-options-section
  .form-cont
  .quantity-control
  .b-numberinput
  .control {
  width: 100%;
}
.cart-modal-content
  .subscription-options-section
  .form-cont
  .quantity-control
  .b-numberinput
  .control
  input {
  width: 100%;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0;
  border-color: #eee;
  font-weight: 700;
}
.cart-modal-content
  .subscription-options-section
  .form-cont
  .quantity-control
  .b-numberinput
  .qty-btn.minus {
  border-right: none;
}
.cart-modal-content
  .subscription-options-section
  .form-cont
  .quantity-control
  .b-numberinput
  .qty-btn.plus {
  border-left: none;
}
.cart-modal-content .subscription-options-section .date-selector {
  width: 100%;
}

.cart-modal-content .subscription-options-section .dropdown {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
.cart-modal-content .subscription-options-section .date-description {
  font-size: 13px;
  letter-spacing: -0.75px;
  color: #888;
}

.cart-modal .order-section .order-amount {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cart-modal .order-section .order-amount .label {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  letter-spacing: -0.75px;
}
.cart-modal .order-section .order-amount .amount {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 2px;
}
.cart-modal .order-section .order-amount .amount p {
  font-size: 24px;
  color: #333;
  font-weight: 700;
}
.cart-modal .order-section .order-amount .amount small {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  letter-spacing: -0.75px;
}

.cart-modal .btn-cancel {
  background: #fff;
  color: #333;
  border: 1px solid #dadada;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.cart-modal .modal-actions {
  padding: 0px 30px 20px;
  max-height: fit-content;
  border-top: none;
  background: transparent;
}
.cart-modal .modal-actions button {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.75px;
  border-radius: 5px;
}
.cart-modal .modal-actions .btn-cancel {
  height: 40px;
}
.cart-modal .modal-actions .btn-add-cart,
.cart-modal .modal-actions .btn-subscribe {
  height: 40px;
  background-color: #23b16c;
  color: #ffffff;
}

/* 정기구독 제품 장바구니 추가 시 결제수단 없을 경우 */
/* 결제수단 등록 안내 모달 */
.payment-registration-modal .modal-header {
  padding: 25px 30px 0;
}
.payment-registration-modal .modal-content {
  max-width: 420px;
  width: 90%;
}
.payment-registration-modal .modal-body {
  padding: 10px 20px 30px;
}
.payment-registration-modal .modal-body .text-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.payment-registration-modal .modal-body .text-wrap .title {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.75px;
  color: #333;
  font-weight: 600;
}
.payment-registration-modal .modal-body .text-wrap .text p {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.75px;
  color: #333;
  font-weight: 400;
}
.payment-registration-modal .modal-actions {
  padding: 0 30px 25px;
  gap: 12px;
  max-height: fit-content;
}
.payment-registration-modal .modal-actions .btn-primary {
  background: #22b573;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  transition: background 0.2s;
  height: 40px;
  font-size: 14px;
  line-height: 1;
}
.payment-registration-modal .modal-actions .btn-primary:hover {
  background: #1a9e5a;
}

/* 해지모달 */
.cancel-confirm-modal .modal-content,
.cancel-complete-modal .modal-content,
.success-modal .modal-content {
  overflow: hidden;
}
.cancel-confirm-modal .modal-body,
.cancel-complete-modal .modal-body,
.success-modal .modal-content .modal-body {
  width: 100%;
  padding: 0;
  overflow-y: inherit;
}
.cancel-confirm-modal .cancel-confirm-modal,
.cancel-complete-modal .cancel-complete-modal,
.success-modal .success-modal {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.cancel-confirm-modal .cancel-confirm-modal .modal-body .content,
.cancel-complete-modal .cancel-complete-modal .modal-body .content,
.success-modal .success-modal .modal-body .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  gap: 10px;
}
.cancel-confirm-modal .cancel-confirm-modal .modal-body .content h3,
.cancel-complete-modal .cancel-complete-modal .modal-body .content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.75px;
  line-height: 1.4;
}
.cancel-confirm-modal .cancel-confirm-modal .modal-body .content .text,
.cancel-complete-modal .cancel-complete-modal .modal-body .content .text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.cancel-confirm-modal .cancel-confirm-modal .modal-body .content .text p,
.cancel-complete-modal .cancel-complete-modal .modal-body .content .text p {
  font-size: 14px;
  letter-spacing: -0.75px;
  line-height: 1.4;
  color: #666;
  text-align: center;
}
.cancel-confirm-modal .modal-header,
.cancel-complete-modal .modal-header {
  justify-content: center;
}
.cancel-confirm-modal .modal-footer,
.cancel-complete-modal .modal-footer,
.success-modal .modal-footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.cancel-confirm-modal .modal-footer .btn,
.cancel-complete-modal .modal-footer .btn,
.success-modal .modal-footer .btn {
  width: 100%;
  height: 55px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.75px;
  border-radius: 0;
}
.cancel-confirm-modal .modal-footer .btn-cancel,
.cancel-complete-modal .modal-footer .btn-cancel {
  color: #888888;
  background-color: #fff;
  border: 1px solid #eee;
}
.cancel-confirm-modal .modal-footer .btn-confirm,
.cancel-complete-modal .modal-footer .btn-confirm {
  color: #fff;
  background-color: #23b16c;
  border: 1px solid #23b16c;
}
.success-modal .modal-footer .btn-confirm {
  color: #23b16c;
  background-color: #fff;
  border-top: 1px solid #eee;
}

/* 구독상세모달 */
.subscription-list-detail-modal .modal-content {
  max-width: 800px;
  display: flex;
  flex-direction: column;
}
.subscription-list-detail-modal .modal-content .modal-body {
  overflow-y: inherit;
  padding: 0;
}
.subscription-list-detail-modal .subscription-list-detail-modal {
  width: 100%;
}
.subscription-list-detail-modal .subscription-list-detail-modal iframe {
  width: 100%;
  height: 60vh;
  border-radius: 10px;
}

/* 정기구독신청 */
/* 결제비밀번호 확인모달 */
.payment-password-modal .modal-content {
  max-width: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.payment-password-modal .modal-content .modal-title h3 {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.75px;
}
.payment-password-modal .modal-content .modal-body {
  padding: 0;
}
.payment-password-modal .modal-content .payment-password-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.payment-password-modal
  .modal-content
  .payment-password-form
  .registration-wrap.pw-setting {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
}
.payment-password-modal
  .modal-content
  .payment-password-form
  .registration-wrap.pw-setting
  .instruction
  p {
  color: #333;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.75px;
}
.payment-password-modal .modal-content .payment-password-form .custom-keypad {
  position: relative;
}

/* 배송지변경모달 */
.address-change-modal .modal-content .modal-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.address-change-modal .modal-content .modal-body .address-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-item:last-child {
  padding-bottom: 40px;
}
.address-change-modal .modal-content .modal-body .address-list .address-item {
  width: 100%;
  height: 100%;
  position: relative;
}
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-item
  .address-select
  .address-info,
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-item
  .address-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-item.selected
  .address-info {
  border-color: #23b16c !important;
}
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-info
  .address-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.address-change-modal .modal-content .modal-body .address-list .address-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 1;
  letter-spacing: -0.75px;
}
.address-change-modal .modal-content .modal-body .address-list .default-tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 3px;
  background-color: #23b16c;
  color: #fff;
  font-size: 13px;
  letter-spacing: -0.75px;
  line-height: 1;
  font-weight: 600;
}
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-details
  .recipient,
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-details
  .address,
.address-change-modal .modal-content .modal-body .address-list .address-phone {
  font-size: 14px;
  letter-spacing: -0.75px;
  line-height: 1.4;
}
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-actions {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}
.address-change-modal
  .modal-content
  .modal-body
  .address-list
  .address-actions
  .btn-text {
  font-size: 13px;
  font-weight: 400;
  color: #888;
  letter-spacing: -0.75px;
  line-height: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.address-change-modal .modal-content .modal-actions {
  padding: 20px 30px;
  max-height: fit-content;
}
.address-change-modal .modal-content .modal-actions .change-btn {
  width: 100%;
  height: 40px;
  background-color: #23b16c;
  color: #fff;
  border-radius: 5px;
}

#location-add-modal .modal-content .modal-actions {
  padding: 20px 0px;
  max-height: fit-content;
}
#location-add-modal .modal-content .modal-actions .change-btn {
  width: 80%;
  height: 40px;
  background-color: #23b16c;
  color: #fff;
  border-radius: 5px;
}

  /* 배송지수정 */
.address-edit-modal .address-edit-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.address-edit-modal .address-edit-form .form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.address-edit-modal .address-edit-form .form-group input {
  font-size: 15px;
  line-height: 1;
  color: #333;
  letter-spacing: -0.75px;
}
.address-edit-modal .address-edit-form .form-group label {
  font-size: 14px;
  color: #666;
  font-weight: 400;
}
.address-edit-modal .address-edit-form .form-group .form-input {
  border-radius: 5px;
  padding: 10px 20px;
  height: 45px;
  font-size: 14px;
  letter-spacing: -0.75px;
  line-height: 1;
}
.address-edit-modal .address-edit-form .form-group .address-search {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.address-edit-modal
  .address-edit-form
  .form-group
  .address-search
  .form-input.zipcode {
  width: 100%;
  padding: 10px 40px 10px 20px;
  cursor: pointer;
}
.address-edit-modal .address-edit-form .form-group .address-search .search-btn {
  min-width: 20px;
  height: 20px;
  max-width: 20px;
  position: absolute;
  right: 16px;
}
.address-edit-modal
  .address-edit-form
  .form-group
  .address-search
  .search-btn
  .ico.search {
  width: 100%;
  height: 100%;
  background: url(../images/main/search_icon_dark.svg) 50% 50% no-repeat;
  object-fit: contain;
}
.address-edit-modal .address-edit-form .bottom-actions {
  width: 100%;
}
.address-edit-modal .address-edit-form .bottom-actions .save-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 55px;
  background-color: #23b16c;
  color: #fff;
  font-size: 16px;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.75px;
  font-weight: 600;
}
.address-edit-modal .modal-actions {
  max-height: 80px;
  padding: 20px 30px;
}
.address-edit-modal .modal-actions .save-btn {
  height: 40px;
  border-radius: 5px;
  background-color: #23b16c;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* 구독옵션변경 */
.subscription-option-change-modal .modal-body {
  padding: 0;
  width: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 30px;
}
.subscription-option-change-modal
  .modal-body
  .subscription-option-change-modal {
  width: 100%;
}

/* 정기구독 관리 모달 푸터 */
.subscription-manage-detail-modal .modal-footer {
  min-height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
}
.subscription-manage-detail-modal .modal-footer .footer-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.subscription-manage-detail-modal .modal-footer .footer-buttons .btn {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #dadada;
  font-size: 14px;
  letter-spacing: -0.75px;
  line-height: 1;
  font-weight: 500;
  background-color: #fff;
}
.subscription-manage-detail-modal
  .modal-footer
  .footer-buttons
  .btn.btn-update {
  background-color: #23b16c;
  border-color: #23b16c;
  color: #fff;
}

/* 정기구독 내역 모달 푸터 */
.subscription-list-detail-modal .modal-footer {
  min-height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
}
.subscription-list-detail-modal .modal-footer .footer-buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.subscription-list-detail-modal .modal-footer .footer-buttons .btn {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #dadada;
  font-size: 14px;
  letter-spacing: -0.75px;
  line-height: 1;
  font-weight: 500;
  background-color: #fff;
}
.subscription-list-detail-modal .modal-footer .footer-buttons .btn.btn-update {
  background-color: #23b16c;
  border-color: #23b16c;
  color: #fff;
}

/* ===== 공통 모달 스타일 ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* 모달 열림 */
.modal.is-open,
.modal.show {
  display: flex;
  opacity: 1;
}

/* 공통 콘텐츠 박스 */
.modal .modal-content {
  background: #fff;
  border-radius: 12px;
  width: 92%;
  max-width: 420px;
  max-height: 90%;
  overflow-y: auto;
  transform: translateY(30px);
  transition: transform 0.28s ease;
}
.modal.is-open .modal-content,
.modal.show .modal-content {
  transform: translateY(0);
}

/* ===== 모바일 바텀시트 스타일 ===== */
@media (max-width: 768px) {
  .modal.bottom {
    align-items: flex-end;
  }
  .modal.bottom .modal-content {
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
  }
}

/* body scroll lock */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* 모달 열릴 때 액션바 숨김용 */
.bottom-bar.hidden-by-modal,
.mobile-action-bar.hidden-by-modal {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

@media only screen and (max-width: 768px) {
  .exchangeOptionModal {
    align-items: flex-end !important;
  }
  .exchangeOptionModal .modal-content {
    max-width: 100%;
    width: 100%;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  .exchangeOptionModal.show .modal-content {
    transform: translateY(0);
  }
}

@media only screen and (max-width: 720px) {
  .terms {
    padding: 10px;
  }
  .duplicateCheck .modal-content,
  .validityPeriod .modal-content,
  .confirmation .modal-content {
    max-width: 90%;
  }
  .confirmation .modal-body {
    padding: 10px;
  }
  .confirmation .modal-body p {
    font-size: 14px;
    word-break: keep-all;
  }
  .payment-password .modal-body {
    padding: 20px;
  }
  .payment-add-form .form-row {
    flex-direction: column;
    gap: 0;
  }
  .zzim-item .cta {
    min-width: 100%;
  }
  .coupon-registration-form .input-group input {
    height: 45px;
    font-size: 14px;
  }
  .coupon-guidelines li {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .coupon-success .modal-content,
  .coupon-success .modal-body,
  .coupon-error .modal-body {
    font-size: 14px;
  }
  .coupon-detail .modal-content {
    max-width: 95%;
    max-height: 90vh;
  }
  .coupon-detail .modal-header {
    padding: 20px 20px 0;
  }
  .coupon-detail .modal-body {
    padding: 15px 20px;
  }
  .coupon-summary {
    padding: 15px;
  }
  .coupon-summary .discount-amount {
    font-size: 20px;
  }
  .coupon-summary .coupon-name {
    font-size: 14px;
  }
  .coupon-info .label,
  .coupon-info .value {
    font-size: 13px;
  }
  .detail-section h4 {
    font-size: 14px;
  }
  .detail-section li {
    font-size: 12px;
  }
  .subscription-list-detail-modal {
    display: none !important;
  }
  .subscription-manage-detail-modal {
    display: none !important;
  }
}

/* 이용약관 모달 관련 추가 css 항목 */
.termsModal .modal-body {
  align-items: stretch;
}
.termsModal.inner .modal-body {
  max-height: 400px;
}

/* 개인정보 수집 및 이용에 대한 안내 모달 관련 추가 css 항목 */
.collectModal .modal-body {
  align-items: stretch;
}
.collectModal.inner .modal-body {
  max-height: 400px;
}

/* 다른 모달 위에 띄우는 중첩 모달 */
.modal.inner {
  z-index: 20000 !important;
}

/* 장바구니 성공 모달 스타일 */
.cart-success-modal .modal-content {
  max-width: 400px;
  width: 90%;
  overflow: hidden;
}
.cart-success-modal .modal-header {
  padding: 25px 30px 0;
  justify-content: flex-end;
}

/* cart-success-modal에서 product-info-header 숨김 */
.cart-success-modal .modal-title .product-info-header {
  display: none !important;
}

/* cart-success-modal에서 modal-close 버튼 숨김 */
.cart-success-modal .modal-header .modal-close {
  display: none !important;
}

.cart-success-modal .modal-body {
  padding: 30px 30px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cart-success-modal .cart-success-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.cart-success-modal .cart-success-body .text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.cart-success-modal .cart-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-success-modal .cart-icon svg,
.cart-success-modal .cart-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-success-modal .success-message {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  letter-spacing: -0.75px;
  margin: 0;
}
.cart-success-modal .success-question {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 1.4;
  letter-spacing: -0.75px;
  margin: 0;
}
.cart-success-modal .modal-actions {
  padding: 20px 30px;
  max-height: fit-content;
  gap: 10px;
}
.cart-success-modal .modal-actions button {
  height: 40px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.75px;
  border: none;
  border-radius: 5px;
  transition: all 0.3s;
}
.cart-success-modal .modal-actions .btn-cancel {
  background-color: #fff;
  color: #333;
  flex: 1;
  border: 1px solid #eee;
}
.cart-success-modal .modal-actions .btn-cancel:hover {
  background-color: #f5f5f5;
}
.cart-success-modal .modal-actions .btn-confirm {
  background-color: #23b16c;
  color: #fff;
  flex: 1;
}
.cart-success-modal .modal-actions .btn-confirm:hover {
  background-color: #1a9e5a;
}

@media only screen and (max-width: 720px) {
  .cart-success-modal .modal-content {
    max-width: 90%;
  }
  .cart-success-modal .modal-body {
    padding: 20px 20px 30px;
  }
  .cart-success-modal .success-message,
  .cart-success-modal .success-question {
    font-size: 15px;
  }
}