Aurora Modules

주문서

주문서 페이지에서 노출되는 주문서 작성/결제 모듈입니다.

URL: /pages/order/order-sheet-form.html?ordersheetNo={ordersheetNo}

모듈명: order-products원본소스

주문 상품 모듈입니다.

속성

속성명	타입	기본값	설명
device-type	MOBILE \| PC	PC	플랫폼 타입 MOBILE \| PC

사용 가능 변수

변수명	타입	기본값	설명
deliveryGroupingProducts	DeliveryGroupingProductType[]	[]	주문서 API 응답 결과 중 `deliveryGroups`와 동일 (배송 그룹별 상품 목록) (아래 타입 참조)

DeliveryGroupingProductType 타입

속성명	타입	기본값	설명
deliveryPayType	string	-	배송비 착불 여부 (PREPAIDDELIVERY: 배송비 선불 \| PAYON_DELIVERY: 배송비 착불)
partnerName	string	-	파트너 이름
partnerNo	number	-	파트너 번호
deliveryAmt	number	0	배송비
deliveryCondition	DeliveryCondition	-	배송 조건 (아래 타입 참조)
products	Product[]	[]	UI에서 사용하는 주문 상품 데이터 (아래 타입 참조)
orderProducts	OrderProduct[]	[]	주문 상품 목록

Product 타입

속성명	타입	기본값	설명
deliverable	boolean	true	배송 가능 여부
optionUsed	boolean	true	옵션 사용 여부
couponUsable	boolean	false	쿠폰 사용 가능 여부
liked	boolean	false	찜 상품 여부 (true: 찜상품, false: 일반상품)
accumulationUsable	boolean	false	적립금 사용 가능 여부
deliveryInternational	boolean	false	해외 배송 여부
cancelable	boolean	false	취소 가능 여부
exchangeable	boolean	false	교환 가능 여부
refundable	boolean	false	환불 가능 여부
returnable	boolean	false	반품 가능 여부
soldOut	boolean	false	품절여부(true:품절 false:구매가능)
reservation	boolean	false	예약주문여부 (true: 예약주문상품, false: 일반상품)
deliveryPayType	string	-	배송비 착불 여부 (PREPAIDDELIVERY: 배송비 선불 \| PAYON_DELIVERY: 배송비 착불)
partnerName	string	-	파트너 이름
brandName	string	-	브랜드명
shippingAreaType	string	-	배송 구분 (PARTNERSHIPPINGAREA: Partner Delivery \| MALLSHIPPINGAREA: Shipping Mall Delivery)
productName	string	-	상품명
imageUrl	string	-	상품 이미지 URL
brandNameEn	string	-	브랜드 영문명
productNameEn	string	-	상품 영문명
reservationDeliveryYmdt	string	-	예약 주문 상품 배송 시작 예정일 (YYYY-MM-DD hh:mm:ss)
optionTitle	string	-	옵션 권장 출력값
optionValue	string	-	옵션 값
imageUrl	string	-	상품 이미지 URL
optionType	string	-	옵션 형태 (PRODUCTONLY: 옵션없음 \| NORMALOPTION: 일반옵션 \| ADDITIONAL_PRODUCT: 추가옵션)
optionName	string	-	옵션명
optionManagementCd	string	-	판매자 관리 코드
optionNo	number	-	옵션 번호
deliveryAmt	number	0	배송비
partnerNo	number	0	파트너 번호
categoryNo	number	0	표준 카테고리 번호
productNo	number	0	상품 번호
brandNo	number	0	브랜드 번호
accumulationAmtWhenBuyConfirm	number	0	구매 확정시 예상 적립금
orderCnt	number	0	주문 수량
accumulationRateForMemberWhenBuyConfirm	number	0	구매확정 시 회원에 대한 적립률(회원등급/그룹 중 큰 값)
accumulationRateForProductWhenBuyConfirm	number	0	구매확정 시 상품에 대한 적립률
accumulationAmtForProductWhenBuyConfirm	number	0	구매확정 시 상품에 대한 적립금
stockCnt	number	0	재고 개수
accumulationAmtForMemberWhenBuyConfirm	number	0	구매확정 시 회원에 대한 적립금(회원등급/그룹 중 큰 값)
deliveryCondition	DeliveryCondition	-	배송 조건 (아래 타입 참조)
deliveryDate	DeliveryDate	-	배송 예정일 (아래 타입 참조)
recurringPaymentDelivery	RecurringPaymentDelivery	-	정기 결제 배송 정보 (아래 타입 참조)
validInfo	ValidInfo	-	유효성 정보 (아래 타입 참조)
price	Price	-	가격 정보 (아래 타입 참조)
orderProducts	OrderProduct[]	[]	주문 상품 목록 (아래 타입 참조)
additionalProducts	object[]	[]	추가 상품 목록
categoryNos	(number\|string\|boolean)[]	[]	전시 카테고리 번호 목록
optionInputs	OptionInput[]	[]	소비자 입력형 옵션 (아래 타입 참조)
setOptions	SetOption[]	[]	세트 옵션 (아래 타입 참조)

DeliveryCondition 타입

속성명	타입	기본값	설명
chargesRemoteDeliveryAmt	boolean	false	지역별추가배송비사용여부 (true: 사용, false: 미사용)
deliveryConditionType	string	-	배송 조건 (FREE: 무료 \| CONDITIONAL: 조건별무료 \| FIXEDFEE: 유료(고정 배송비) \| QUANTITYPROPOSITIONALFEE: 수량 비례 \| PRICEFEE: 금액별 차등 \| QUANTITY_FEE: 수량별 차등)
groupDeliveryAmtType	string	-	묶음 배송 조건 (MAXIMUMSELECTED: 최대부과 \| MINIMUMSELECTED: 최소부과)
aboveDeliveryAmt	number	0	조건부 배송비의 기준값(9,800원 미만 배송비 2,500원일때 aboveDeliveryAmt는 9800)
deliveryAmt	number	0	배송비
returnDeliveryAmt	number	0	반품 배송비
baseDeliveryAmt	number	0	조건부 배송비 미달 시 배송비(9,800원 미만 배송비 2,500원일때 baseDeliveryAmt는 2,500)
remoteDeliveryAmt	number	0	추가 배송비(조건에 의해 계산되어진)

OrderProduct 타입

속성명	타입	기본값	설명
deliverable	boolean	true	배송 가능 여부
optionUsed	boolean	true	옵션 사용 여부
accumulationUsable	boolean	false	적립금 사용 가능 여부
deliveryInternational	boolean	false	해외 배송 여부
liked	boolean	false	찜 상품 여부 (true: 찜상품, false: 일반상품)
cancelable	boolean	false	취소 가능 여부
exchangeable	boolean	false	교환 가능 여부
refundable	boolean	false	환불 가능 여부
returnable	boolean	false	반품 가능 여부
couponUsable	boolean	false	쿠폰 사용 가능 여부
brandName	string	-	브랜드명
shippingAreaType	string	-	배송 구분 (PARTNERSHIPPINGAREA: Partner Delivery \| MALLSHIPPINGAREA: Shipping Mall Delivery)
productName	string	-	상품명
imageUrl	string	-	상품 이미지 URL
brandNameEn	string	-	브랜드 영문명
productNameEn	string	-	상품 영문명
categoryNo	number	0	표준 카테고리 번호
buyAmt	number	0	구매 금액 (구매가 * 주문 수량)
productNo	number	0	상품 번호
brandNo	number	0	브랜드 번호
categoryNos	(number\|string\|boolean)[]	[]	전시 카테고리 번호 목록
additionalProducts	object[]	[]	추가 상품 목록
deliveryDate	DeliveryDate	-	배송 예정일 (아래 타입 참조)
orderProductOptions	ProductOption[]	[]	옵션 정보 (아래 타입 참조)

DeliveryDate 타입

속성명	타입	기본값	설명
daysOfWeek	string	-	요일 (SUN: 일 \| MON: 월 \| TUE: 화 \| WED: 수 \| THU: 목 \| FRI: 금 \| SAT: 토)
daysAfterPurchase	number	-	주문일 기준
period	Period	-	기간 (아래 타입 참조)

Period 타입

속성명	타입	기본값	설명
startYmdt	string	-	배송일지정 가능한 시작일 (YYYY-MM-DD hh:mm:ss)
endYmdt	string	-	배송일지정 가능한 종료일 (YYYY-MM-DD hh:mm:ss)

ProductOption 타입

속성명	타입	기본값	설명
soldOut	boolean	false	품절여부(true:품절 false:구매가능)
reservation	boolean	false	예약주문여부 (true: 예약주문상품, false: 일반상품)
reservationDeliveryYmdt	string	-	예약 주문 상품 배송 시작 예정일 (YYYY-MM-DD hh:mm:ss)
optionValue	string	-	옵션 값
optionType	string	-	옵션 형태 (PRODUCTONLY: 옵션없음 \| NORMALOPTION: 일반옵션 \| ADDITIONAL_PRODUCT: 추가옵션)
imageUrl	string	-	상품 이미지 URL
optionName	string	-	옵션명
optionManagementCd	string	-	판매자 관리 코드
optionTitle	string	-	옵션 권장 출력값
optionNo	number	-	옵션 번호
productNo	number	-	상품 번호
accumulationAmtWhenBuyConfirm	number	0	구매 확정시 예상 적립금
orderCnt	number	0	주문 수량
accumulationRateForMemberWhenBuyConfirm	number	0	구매확정 시 회원에 대한 적립률(회원등급/그룹 중 큰 값)
accumulationRateForProductWhenBuyConfirm	number	0	구매확정 시 상품에 대한 적립률
accumulationAmtForProductWhenBuyConfirm	number	0	구매확정 시 상품에 대한 적립금
stockCnt	number	0	재고 개수
accumulationAmtForMemberWhenBuyConfirm	number	0	구매확정 시 회원에 대한 적립금(회원등급/그룹 중 큰 값) (아래 타입 참조)
price	Price	-	가격 정보 (아래 타입 참조)
validInfo	ValidInfo	-	유효성 정보 (아래 타입 참조)
recurringPaymentDelivery	RecurringPaymentDelivery	-	정기 결제 배송 정보 (아래 타입 참조)
optionInputs	OptionInput[]	[]	소비자 입력형 옵션 (아래 타입 참조)
setOptions	SetOption[]	[]	세트 옵션 (아래 타입 참조)

RecurringPaymentDelivery 타입

속성명	타입	기본값	설명
firstRecurringDate	string	-	정기 결제 첫 배송 예정일
cycleType	string	-	정기 결제 배송 주기 타입 (MONTH \| WEEK)
dayOfWeek	string	-	배송 요일 (MONDAY \| TUESDAY \| WEDNESDAY \| THURSDAY \| FRIDAY \| SATURDAY \| SUNDAY)
date	number	-	정기 결제 배송 주기 일자
cycle	number	-	정기 결제 배송 주기

validInfo 타입

속성명	타입	기본값	설명
valid	boolean	false	유효 여부 (true: 유효, false: 유효하지 않음)
orderCntChangeable	boolean	false	주문 수량 변경 가능 여부 (true:변경가능 false:변경불가능)
message	string	-	유효성 실패 사유 메세지
errorCode	ErrorCode	-	에러 코드 (아래 타입 참조)

ErrorCode 타입

속성명	타입	기본값	설명
code	string	-	code
simpleCode	string	-	simple code

OptionInput 타입

속성명	타입	기본값	설명
required	boolean	false	구매자 입력형 옵션 - 필수여부 (true: 필수, false: 선택)
inputValue	string	-	구매자 입력형 옵션 - 값
inputLabel	string	-	구매자 입력형 옵션 - 이름
inputNo	number	-	구매자 입력형 옵션 - 번호

Price 타입

속성명	타입	설명
buyAmt	number	구매금액 (구매가 * 주문수량)
additionalDiscountAmt	number	추가 할인 금액
immediateDiscountAmt	number	즉시 할인 금액
salePrice	number	상품 판매가
standardAmt	number	정상 금액 (상품판매가 + 옵션추가금액) * 주문수량
addPrice	number	옵션 가격 (추가금액)

SetOption 타입

속성명	타입	기본값	설명
usesOption	boolean	false	옵션사용여부 (true: 사용, false: 미사용)
productName	string	-	상품명
productManagementCd	string	-	상품 관리 코드
optionValue	string	-	옵션값
sku	string	-	sku
optionName	string	-	옵션명
optionManagementCd	string	-	판매자 관리 코드
mallOptionNo	number	-	옵션 번호
mallProductNo	number	-	상품 번호
stockNo	number	-	재고 번호
count	number	0	구매수
optionPrice	number	0	옵션 가격

모듈명: orderer-info원본소스

주문자 정보 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
errorMessageInvalidPassword	boolean	false	비밀번호 오류 여부
errorMessageLessInvalidPassword	boolean	false	비밀번호 조합 오류 여부
errorMessageInvalidPasswordLength	boolean	false	비밀번호 자릿수 오류 여부
errorMessageNotEqualPassword	boolean	false	비밀번호 확인 일치 오류 여부
visibleGuestForm	boolean	false	비회원 여부 판단해서 비회원 주문 입력 폼 노출 여부
orderMemo	string	-	주문 메모
ordererInfo	Orderer	-	주문자 정보 (아래 타입 참조)
guestInfo	Guest	-	비회원 정보 (아래 타입 참조)

Orderer 타입

속성명	타입	기본값	설명
ordererName	string	-	주문자명 (주문 예약하기 API 사용 시 orderer.ordererName 파라미터로 보내짐)
emailId	string	-	주문자 이메일 아이디 (주문 예약하기 API 사용 시 orderer.ordererEmail 파라미터의 이메일 아이디로 사용됨)
emailDomain	string	-	주문자 이메일 도메인 (주문 예약하기 API 사용 시 orderer.ordererEmail 파라미터의 이메일 도메인으로 사용됨)
ordererContact1	string	-	주문자 연락처1 (주문 예약하기 API 사용 시 orderer.ordererContact1 파라미터로 보내짐)
ordererContact2	string	-	주문자 연락처2 (주문 예약하기 API 사용 시 orderer.ordererContact2 파라미터로 보내짐)

Guest 타입

속성명	타입	기본값	설명
password	string	-	비회원 주문 비밀번호 (주문 예약하기 API 사용 시 tempPassword 파라미터로 보내짐)
passwordForConfirmation	string	-	비회원 주문 비밀번호 확인

모듈명: shipping-address-info원본소스

배송지 정보 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isSameOrderer	boolean	false	주문자와 동일 체크 여부
hasDeliverableProduct	boolean	false	배송지 정보 영역 노출 여부
hasInternationalShippingProduct	boolean	false	해외 배송지일 경우, 개인통관고유부호 입력 영역 노출여부
selectedShippingGroup	DEFAULT_ADDRESS	RECENT_ADDRESS	NEW_ADDRESS
deliveryMemo	string	-	배송 메모
shippingInfo	ShippingInfo	-	배송지정보 (아래 타입 참조)

ShippingInfo 타입

속성명	타입	기본값	설명
addressName	string	-	주소록명
receiverName	string	-	수령자명
receiverZipCd	string	-	배송지 우편번호
receiverAddress	string	-	배송지 주소
receiverDetailAddress	string	-	배송지 상세 주소
receiverContact1	string	-	연락처1
receiverContact2	string	-	연락처2

모듈명: promotion-info원본소스

혜택 적용 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isSignedIn	boolean	false	로그인 여부
blockUseAccumulationWhenUseCoupon	boolean	false	적립금 쿠폰 중복 사용 가능 여부
allCouponAmt	number	0	총 쿠폰 할인 금액
productCouponCount	number	0	적용된 상품 쿠폰 갯수
cartCouponCount	number	0	적용된 장바구니 쿠폰 갯수
accumulationInputValue	number	0	적용된 적립금
paymentInfo.accumulationAmt	number	0	보유 적립금
paymentInfo.availableMaxAccumulationAmt	number	0	사용 가능한 적립금
blockUseAccumulationWhenUseCoupon	boolean	false	적립금 쿠폰 중복 사용 가능 여부

모듈명: pay-method-selector원본소스

결제 수단 선택 모듈입니다.

속성

속성명	타입	기본값	설명
device-type	MOBILE \| PC	PC	플랫폼 타입 MOBILE \| PC

사용 가능 변수

변수명	타입	기본값	설명
needsDepositBankForm	boolean	false	선택된 결제 수단이 무통장 입금일 때 true
currentMyPayPayToken	string	-	선택된 마이 페이 결제 수단 payToken (아래 타입 참조)
myPayModeSwiper	any	-	마이 페이 폼을 리렌더링 하기위해 사용되는 의미없는 데이터 (device-type="MOBILE"인 경우에만 사용)
payMethods	PayMethods	-	결제 수단 렌더링에 필요한 데이터 (아래 타입 참조)
myPayMode	MyPayMode	-	마이 페이 결제 수단 정보 (아래 타입 참조)

PayMethods 타입

속성명	타입	기본값	설명
hasMyPayPayment	boolean	false	몰에서 마이 페이 결제 수단 버튼 노출 여부
notExistPayMethods	boolean	false	선택할 수 있는 결제수단이 존재하지 않을 때 true
isEscrow	boolean	false	선택된 결제 수단이 에스크로 여부
originalPayMethodList	PayMethod[]	[]	결제 수단 원본 데이터 (아래 타입 참조)
payMethodsToBeExposed	PayMethod[]	[]	결제 수단 목록 UI 데이터 (아래 타입 참조)
selectedPayMethod	PayMethodType	-	선택한 결제 수단 (아래 타입 참조)
myPayInfoAppSetting	MyPayInfoAppSetting	-	마이 페이 버튼 정보 (아래 타입 참조)

MyPayMode 타입

속성명	타입	기본값	설명
visibleMyPayPaymentForm	boolean	false	선택한 결제 수단이 "마이 페이"인 경우 폼 노출 여부
sliderId	string	-	슬라이더ID (device-type="MOBILE"인 경우에만 사용)
myPayPaymentInfos	MyPayPaymentType[]	[]	등록된 결제 수단 조회 API 응답 결과 중 `paymentInfos`와 동일 (등록된 결제 수단 목록) (아래 타입 참조)

PayMethod 타입

속성명	타입	기본값	설명
isUnnecessaryLabel	boolean	false	라벨 불필요 여부
selected	boolean	false	결제 수단 선택 여부
iconName	string	-	아이콘 class명
label	string	-	결제 수단 라벨
payType	string	-	PAY TYPE
pgType	string	-	PG TYPE

PayMethodType 타입

속성명	타입	기본값	설명
payType	string	-	PAY TYPE
pgType	string	-	PG TYPE

MyPayInfoAppSetting 타입

속성명	타입	기본값	설명
useLogo	boolean	false	로고 사용 여부
mainColor	string	'fff'	주요 색깔
payName	string	'마이페이'	페이명
customCssUrl	string	-	사용자 정의 CSS URL
logoImageUrl	string	-	로고 이미지 URL
buttonStyle	string	-	버튼 인라인 스타일

MyPayPaymentType 타입

속성명	타입	기본값	설명
main	boolean	false	주 결제 수단 여부
isSelected	boolean	false	결제 수단 선택 여부
bankCardCode	string	false	신용카드 : 카드사 코드, 계좌 : 은행 코드
bankCardNo	string	-	(마스킹 처리) 신용카드 : 카드번호, 계좌 : 계좌번호
cardCheckType	string	'0'	카드유형 (신용: 0, 체크: 1, 선불: 2)
cardExpiredFlag	string	'M'	카드 유효기간만료로 인한 사용가능 여부 (가능: Y, 불가: N, 확인불가: M)
cardIsscoCode	string	'마이페이'	BC 카드발급사 코드 BC 카드(11)인 경우만 응답 값 세팅
cardProductNo	string	'마이페이'	카드 상품명
cardType	string	'마이페이'	개인/법인 구분 (일반-개인: 0, 일반-가족: 1, 법인-지정: 2, 법인-공용: 3)
payMethod	string	'마이페이'	결제수단 코드 (신용카드: 01, 계좌: 16)
payToken	string	'마이페이'	암호화된 이니시스에서 발행한 wpaytoken
paymentInfoAlias	string	'마이페이'	결제 정보 별칭
selectedQuota	string	'00'	선택된 할부 개월 수
cardImgUrl	string	-	카드 이미지 URL
cardName	string	-	신용카드 : 카드 브랜드 명, 계좌 : 계좌 은행 명
noIntMaxQuota	number	-	무이자 최대 할부 개월
geIntMaxQuota	number	-	신용카드 : 카드사 코드, 계좌 : 은행 코드
quotaOptions	Option[]	[]	할부 개월 수 선택
noIntInfos	NoIntInfo[]	[]	무이자 정보

NoIntInfo 타입

속성명	타입	기본값	설명
amount	number	-	무이자 할부 적용 가능 금액
monthList	number[]	['00']	무이자 할부 개월 리스트

모듈명: payment-info원본소스

결제 정보 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
paymentInfo	PaymentInfo	-	결제 정보 (아래 타입 참조)

PaymentInfo 타입

속성명	타입	기본값	설명
isAvailableAccumulation	boolean	false	적립금 사용 가능 여부 (true: 가능, false: 불가능)
accumulationAmt	number	0	보유한 적립금
accumulationAmtWhenBuyConfirm	number	0	예상 적립금
availableMaxAccumulationAmt	number	0	최대 사용가능한 적립금
cartAmt	number	0	장바구니 금액
cartCouponAmt	number	0	장바구니 쿠폰 할인 금액
customsDuty	number	0	관세 (미국 몰 전용)
deliveryAmt	number	0	배송비
deliveryAmtOnDelivery	number	0	착불 배송비
deliveryCouponAmt	number	0	약관 내용
minAccumulationLimit	number	0	적립금을 사용할 수 있는 최소 적립금 기준
minPriceLimit	number	0	적립금을 사용할 수 있는 최소 결제 금액 기준
paymentAmt	number	0	결제 예정 금액
productAmt	number	0	상품 금액
productCouponAmt	number	0	상품 쿠폰 할인 금액
remoteDeliveryAmt	number	0	추가 배송비
remoteDeliveryAmtOnDelivery	number	0	착불 지역별 추가 배송비
salesTaxAmt	number	0	판매세 (미국 몰 전용)
totalAdditionalDiscountAmt	number	0	총 추가 할인가
totalImmediateDiscountAmt	number	0	총 즉시 할인가
totalStandardAmt	number	0	최종 상품 금액
usedAccumulationAmt	number	0	사용한 적립금

모듈명: order-sheet-terms원본소스

약관 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
orderSheetTerms	OrderSheetTerm[]	[]	주문 메모 (아래 타입 참조)

OrderSheetTerm 타입

속성명	타입	기본값	설명
required	boolean	false	필수 여부
checked	boolean	false	UI에서 체크박스 선택 여부
termsName	string	-	약관 내용
contents	string	-	약관명
termsType	string	-	필수 약관 항목 (필수 약관 동의 항목일때 존재 - [USE: 이용약관 \| PICOLLECTIONANDUSEONORDER: 개인정보 이용동의 \| PISELLERPROVISION: 개인정보 판매자 제공 동의 \| CLEARANCEINFOCOLLECTIONANDUSE: 통관정보 수집 · 이용 동의 \| TRANSFERAGREE: 개인정보 국외 이전 동의 \| ORDERINFOAGREE: 주문 상품 정보 동의 \| PILIQUORPURCHASEPROVISION: 주류구매 개인정보 제공 동의 \| REGULARPAYMENTUSE: 정기결제(배송) 이용약관 \| AUTOAPPROVALUSE: 자동 승인 이용약관 \| ORDERDEFAULT: 주문 기본 동의])
termsNo	number	-	필수 약관 번호 (필수 약관 동의 항목일때 존재)
customTermsNo	number	-	추가 약관 번호 (추가 약관 동의 항목일때 존재)
termsNameEng	number	-	약관 영문명 (추가 약관 동의 항목일때 존재)
termId	string \| number	-	약관 id (필수 약관 동의 항목일 경우 termNo, 추가 약관 동의 항목일 경우 customTermsNo, 둘 다 아닌경우 자동 생성)

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div shopby-pc-skin-container class="order-sheet" shopby-helper-key="order-sheet-form">
    <!-- 주문 상품 -->
    <section class="l-panel">
        <details class="accordion order-sheet__product-table" open>
            <summary class="accordion__title">주문상품</summary>
            <div class="">
                <div class="">
                    <order-products>
                        <table>
                            <colgroup>
                                <col />
                                <!-- 상품명/옵션 -->
                                <col style="width: 10%" />
                                <!-- 수량 -->
                                <col style="width: 10%" />
                                <!-- 상품금액 -->
                                <col style="width: 13%" />
                                <!-- 할인/적립 -->
                                <col style="width: 10%" />
                                <!-- 합계금액 -->
                                <col style="width: 10%" />
                                <!-- 배송비 -->
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>상품/옵션</th>
                                    <th>수량</th>
                                    <th>상품금액</th>
                                    <th>할인/적립</th>
                                    <th>합계금액</th>
                                    <th>배송비</th>
                                </tr>
                            </thead>
                            <tbody slot="deliveryGroupingProducts">
                                {{#each deliveryGroupingProducts}} {{#each products}}
                                <tr shopby-product-no="{{productNo}}">
                                    <td class="order-sheet__product-info">
                                        <a href="/pages/product/product-detail.html?productNo={{productNo}}" class="order-sheet__product-img-link">
                                            {{img imageUrl 130 130 productName 'middle' ''}}
                                        </a>
                                        <div class="order-sheet__product-additional-info">
                                            <a class="order-sheet__product-name" href="/pages/product/product-detail.html?productNo={{productNo}}">
                                                {{safeString productName}}
                                            </a>
                                            <div class="order-sheet__option-info">
                                                <span>{{safeString optionTitle}}</span>
                                                {{#each optionInputs}}
                                                <span class="input-option">{{safeString inputLabel}}: {{safeString inputValue}}</span>
                                                {{/each}}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <strong class="product-number-data">{{orderCnt}}</strong>
                                    </td>
                                    <td>
                                        <p>
                                            <strong class="product-number-data">{{convertToKoreanCurrency price.standardAmt}}</strong>
                                            원
                                        </p>
                                    </td>
                                    <td class="order-sheet__discount-accumulation-td">
                                        {{#if price.immediateDiscountAmt}}
                                        <div class="order-sheet__discount-accumulation-wrap">
                                            <span class="order-sheet__discount-label">할인</span>
                                            <p class="order-sheet__discount-accumulation-amt">
                                                <strong class="product-number-data">-{{convertToKoreanCurrency price.immediateDiscountAmt}}</strong>
                                                원
                                            </p>
                                        </div>
                                        {{/if}} {{#if accumulationAmtWhenBuyConfirm}}
                                        <div class="order-sheet__discount-accumulation-wrap">
                                            <span class="order-sheet__accumulation-label">적립</span>
                                            <p class="order-sheet__discount-accumulation-amt">
                                                <strong class="product-number-data">
                                                    {{convertToKoreanCurrency accumulationAmtWhenBuyConfirm}}{{accumulationUnit}}
                                                </strong>
                                                원
                                            </p>
                                        </div>
                                        {{/if}}
                                    </td>
                                    <td>
                                        <p>
                                            <strong class="product-number-data">{{convertToKoreanCurrency price.buyAmt}}</strong>
                                            원
                                        </p>
                                    </td>
                                    {{#ifNe rowSpan 0}} {{#ifNe deliveryAmt 0}}
                                    <td class="td_delivery" rowspan="{{rowSpan}}">
                                        <p>
                                            <strong class="product-number-data">{{convertToKoreanCurrency deliveryAmt}}</strong>
                                            원
                                            <br />
                                            <span class="order-sheet__delivery-pay-type">({{toStringDeliveryPayType deliveryPayType}})</span>
                                        </p>
                                    </td>
                                    {{else}}
                                    <td class="td_delivery" rowspan="{{rowSpan}}">무료</td>
                                    {{/ifNe}} {{/ifNe}}
                                </tr>
                                {{/each}} {{/each}}
                            </tbody>
                        </table>
                    </order-products>
                </div>
            </div>
        </details>

        <div>
            <a href="/pages/order/cart.html" class="btn btn--line-dark btn--sm order-sheet__go-cart">장바구니 돌아가기</a>
        </div>
    </section>

    <!-- 주문자 정보 -->
    <orderer-info>
        <section class="l-panel">
            <div slot="isMemberInfoUpdatableWithOrdererInfo">
                <!-- 회원 && 몰 설정에 회원 점유 인증이 아닌 경우 노출 -->
                {{#if isMemberInfoUpdatableWithOrdererInfo}}
                <label class="form-check form-check--sm order-sheet__register-default-address-cbx" slot="isMemberInfoSaved">
                    {{#if isMemberInfoSaved}}
                    <input type="checkbox" shopby-on:change="CHANGE_SAVE_UPDATE_MEMBER_INFO" checked />
                    {{else}}
                    <input type="checkbox" shopby-on:change="CHANGE_SAVE_UPDATE_MEMBER_INFO" />
                    {{/if}}
                    <span class="form-check__label">주문자의 이메일, 전화번호와 배송지 주소를 회원 정보에 반영합니다.</span>
                </label>
                {{/if}}
            </div>
            <details class="accordion accordion__with-border-bottom" open>
                <summary class="accordion__title">주문자 정보</summary>
                <div class="accordion__content-wrapper order-sheet__item-container">
                    <div class="order-sheet__item">
                        <label class="order-sheet__item-subject">
                            <span class="dot dot--r-must">주문자명</span>
                        </label>
                        <span class="input-field input-field--md">
                            <input
                                slot="ordererInfo.ordererName"
                                type="text"
                                maxlength="20"
                                shopby-valid="NO_COMMON_SPECIAL"
                                value="{{ordererInfo.ordererName}}"
                                shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                            />
                        </span>
                    </div>
                    <div class="order-sheet__item">
                        <label class="order-sheet__item-subject">
                            <span class="dot dot--r-must">이메일 주소</span>
                        </label>
                        <div class="order-sheet__email-form">
                            <div class="order-sheet__email-input">
                                <span class="input-field input-field--md email-input__id">
                                    <input
                                        slot="ordererInfo.emailId"
                                        type="text"
                                        maxlength="64"
                                        shopby-valid="EMAIL_ID"
                                        value="{{ordererInfo.emailId}}"
                                        shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                                    />
                                </span>
                                @
                                <span class="input-field input-field--md email-input__domain">
                                    <input
                                        slot="ordererInfo.emailDomain"
                                        type="text"
                                        maxlength="255"
                                        shopby-valid="EMAIL_DOMAIN"
                                        value="{{ordererInfo.emailDomain}}"
                                        shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                                    />
                                </span>
                            </div>

                            <span class="select select--md order-sheet__domain-select">
                                <select shopby-on:change="CHANGE_SELECT_ORDERER_INFO" slot="ordererInfo.emailDomain">
                                    <option value="" disabled selected>직접입력</option>
                                    <option value="naver.com">naver.com</option>
                                    <option value="hanmail.net">hanmail.net</option>
                                    <option value="daum.net">daum.net</option>
                                    <option value="nate.com">nate.com</option>
                                    <option value="gmail.com">gmail.com</option>
                                </select>
                            </span>
                        </div>
                    </div>
                    <div class="order-sheet__item">
                        <label class="order-sheet__item-subject">
                            <span class="dot dot--r-must">휴대폰 번호</span>
                        </label>
                        <span class="input-field input-field--md">
                            <input
                                slot="ordererInfo.ordererContact1"
                                type="text"
                                maxlength="12"
                                shopby-valid="NUMBER"
                                value="{{ordererInfo.ordererContact1}}"
                                placeholder="휴대폰 번호 - 없이 입력"
                                shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                            />
                        </span>
                    </div>
                    <div class="order-sheet__item">
                        <label class="order-sheet__item-subject">전화 번호</label>
                        <span class="input-field input-field--md">
                            <input
                                slot="ordererInfo.ordererContact2"
                                type="text"
                                maxlength="12"
                                shopby-valid="NUMBER"
                                placeholder="전화 번호 - 없이 입력"
                                value="{{ordererInfo.ordererContact2}}"
                                shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                            />
                        </span>
                    </div>
                    <div class="order-sheet__item">
                        <label class="order-sheet__item-subject">주문 메모</label>
                        <span class="input-field input-field--md">
                            <input slot="orderMemo" type="text" value="{{orderMemo}}" shopby-on:change="CHANGE_INPUT_ORDERER_INFO" />
                        </span>
                    </div>

                    <!-- 비회원일 때 -->
                    <div slot="visibleGuestForm" class="order-sheet__guest {{#if visibleGuestForm}}on{{/if}}">
                        <p class="order-sheet__guest-desc">비회원 주문 조회 시 사용할 비밀번호를 영문/숫자/특수문자 조합하여 8~20자 이내로 입력해주세요.</p>
                        <div>
                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">
                                    <span class="dot dot--r-must">주문 비밀번호 입력</span>
                                </label>
                                <span class="input-field input-field--md">
                                    <input
                                        type="password"
                                        minlength="8"
                                        maxlength="20"
                                        shopby-valid="NO_KOREAN_SPECIAL_PASSWORD"
                                        value="{{guestInfo.password}}"
                                        placeholder="비밀번호 (영문, 숫자, 특수문자 8~20자)"
                                        shopby-on:focusout="FOCUS_OUT_GUEST_PASSWORD_INPUT"
                                        autocomplete="off"
                                    />
                                </span>
                            </div>
                            <p
                                slot="errorMessageInvalidPassword"
                                class="order-sheet__error-msg {{#if errorMessageInvalidPassword}}on{{/if}}"
                                shopby-message="invalidPassword"
                            >
                                영문, 숫자, 특수문자를 3종류 모두 조합하여 8~20자로 입력해주세요.
                            </p>
                            <p
                                slot="errorMessageLessInvalidPassword"
                                class="order-sheet__error-msg {{#if errorMessageLessInvalidPassword}}on{{/if}}"
                                shopby-message="lessInvalidPassword"
                            >
                                영문, 숫자, 특수문자를 2종류 이상 조합하여 10~20자로 입력해주세요.
                            </p>
                            <p
                                slot="errorMessageInvalidPasswordLength"
                                class="order-sheet__error-msg  {{#if errorMessageInvalidPasswordLength}}on{{/if}}"
                                shopby-message="invalidPasswordLength"
                            >
                                비밀번호 자릿수를 확인해주세요. (8자리~20자리)
                            </p>
                        </div>
                        <div>
                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">
                                    <span class="dot dot--r-must">주문 비밀번호 입력 확인</span>
                                </label>
                                <span class="input-field input-field--md">
                                    <input
                                        type="password"
                                        minlength="8"
                                        maxlength="20"
                                        shopby-valid="NO_KOREAN_SPECIAL_PASSWORD"
                                        value="{{guestInfo.passwordForConfirmation}}"
                                        placeholder="비밀번호 한번 더 입력"
                                        shopby-on:focusout="FOCUS_OUT_GUEST_PASSWORD_CONFIRM_INPUT"
                                        autocomplete="off"
                                    />
                                </span>
                            </div>
                            <p
                                slot="errorMessageNotEqualPassword"
                                class="order-sheet__error-msg {{#if errorMessageNotEqualPassword}}on{{/if}}"
                                shopby-message="notEqualPassword"
                            >
                                비밀번호와 비밀번호확인 값이 일치하지 않습니다.
                            </p>
                        </div>
                    </div>
                </div>
            </details>
        </section>
    </orderer-info>

    <!-- 배송지 정보 -->
    <shipping-address-info>
        <div>
            <div slot="hasDeliverableProduct">
                {{#if hasDeliverableProduct}}
                <section class="l-panel">
                    <details class="accordion accordion__with-border-bottom" open>
                        <summary class="accordion__title">
                            배송지 정보

                            <label class="form-check form-check--md order-sheet__same-orderer" slot="isSameOrderer">
                                {{#if isSameOrderer}}
                                <input type="checkbox" shopby-on:change="CHANGE_CHECKBOX_SAME_ORDERER" checked />
                                {{else}}
                                <input type="checkbox" shopby-on:change="CHANGE_CHECKBOX_SAME_ORDERER" />
                                {{/if}}
                                <span class="form-check__label">주문자 동일</span>
                            </label>
                        </summary>
                        <div class="accordion__content-wrapper order-sheet__item-container">
                            {{#if (isSignedIn)}}
                            <div class="order-sheet__item order-sheet__shipping-setting" slot="selectedShippingGroup">
                                <label class="form-check form-check--md">
                                    {{#ifEq selectedShippingGroup 'DEFAULT_ADDRESS'}}
                                    <input
                                        type="radio"
                                        name="shippingGroup"
                                        shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                        value="DEFAULT_ADDRESS"
                                        checked
                                    />
                                    {{else}}
                                    <input
                                        type="radio"
                                        name="shippingGroup"
                                        shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                        value="DEFAULT_ADDRESS"
                                    />
                                    {{/ifEq}}
                                    <span class="form-check__label">기본 배송지</span>
                                </label>

                                <label class="form-check form-check--md">
                                    {{#ifEq selectedShippingGroup 'RECENT_ADDRESS'}}
                                    <input
                                        type="radio"
                                        name="shippingGroup"
                                        shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                        value="RECENT_ADDRESS"
                                        checked
                                    />
                                    {{else}}
                                    <input
                                        type="radio"
                                        name="shippingGroup"
                                        shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                        value="RECENT_ADDRESS"
                                    />
                                    {{/ifEq}}
                                    <span class="form-check__label">최근 배송지</span>
                                </label>

                                <label class="form-check form-check--md">
                                    {{#ifEq selectedShippingGroup 'NEW_ADDRESS'}}
                                    <input
                                        type="radio"
                                        name="shippingGroup"
                                        shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                        value="NEW_ADDRESS"
                                        checked
                                    />
                                    {{else}}
                                    <input type="radio" name="shippingGroup" shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP" value="NEW_ADDRESS" />
                                    {{/ifEq}}
                                    <span class="form-check__label">신규 배송지</span>
                                </label>

                                <button
                                    type="button"
                                    class="btn btn--line-dark btn--sm order-sheet__shipping-address-btn"
                                    shopby-action="CLICK_OPEN_SHIPPING_ADDRESS_FORM"
                                >
                                    배송지 관리
                                </button>
                            </div>
                            {{/if}}
                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">배송지 이름</label>
                                <span class="input-field input-field--md">
                                    <input
                                        slot="shippingInfo.addressName"
                                        type="text"
                                        maxlength="50"
                                        value="{{shippingInfo.addressName}}"
                                        shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                        shopby-on:input="INPUT_SHIPPING_INFO"
                                    />
                                </span>
                            </div>
                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">
                                    <span class="dot dot--r-must">받으시는 분</span>
                                </label>
                                <span class="input-field input-field--md">
                                    <input
                                        slot="shippingInfo.receiverName"
                                        type="text"
                                        maxlength="20"
                                        shopby-valid="NO_COMMON_SPECIAL"
                                        value="{{shippingInfo.receiverName}}"
                                        shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                        shopby-on:input="INPUT_SHIPPING_INFO"
                                    />
                                </span>
                            </div>

                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">
                                    <span class="dot dot--r-must">주소</span>
                                </label>
                                <div class="order-sheet__address-form">
                                    <p class="order-sheet__address-form__zip-code">
                                        <span class="input-field input-field--md">
                                            <input
                                                slot="shippingInfo.receiverZipCd"
                                                type="text"
                                                readonly
                                                value="{{shippingInfo.receiverZipCd}}"
                                                shopby-valid="NUMBER"
                                            />
                                        </span>
                                        <button
                                            type="button"
                                            class="btn btn--line-dark btn--sm order-sheet__find-zip-code-btn"
                                            shopby-focus-field="zipCode"
                                            shopby-action="SEARCH_ZIP_CODE"
                                        >
                                            우편번호 찾기
                                        </button>
                                    </p>
                                    <span class="input-field input-field--md is-disabled">
                                        <input slot="shippingInfo.receiverAddress" type="text" readonly value="{{shippingInfo.receiverAddress}}" disabled />
                                    </span>
                                    <span class="input-field input-field--md">
                                        <input
                                            slot="shippingInfo.receiverDetailAddress"
                                            type="text"
                                            maxlength="100"
                                            value="{{shippingInfo.receiverDetailAddress}}"
                                            shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                            shopby-on:input="INPUT_SHIPPING_INFO"
                                        />
                                    </span>
                                </div>
                            </div>

                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">
                                    <span class="dot dot--r-must">휴대폰 번호</span>
                                </label>
                                <div class="phone-number-input">
                                    <span class="input-field input-field--md">
                                        <input
                                            slot="shippingInfo.receiverContact1"
                                            type="text"
                                            maxlength="12"
                                            shopby-valid="NUMBER"
                                            placeholder="휴대폰 번호 - 없이 입력"
                                            value="{{shippingInfo.receiverContact1}}"
                                            shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                        />
                                    </span>
                                </div>
                            </div>
                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">전화 번호</label>
                                <div class="phone-number-input">
                                    <span class="input-field input-field--md">
                                        <input
                                            slot="shippingInfo.receiverContact2"
                                            type="text"
                                            maxlength="12"
                                            shopby-valid="NUMBER"
                                            placeholder="전화 번호 - 없이 입력"
                                            value="{{shippingInfo.receiverContact2}}"
                                            shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                        />
                                    </span>
                                </div>
                            </div>
                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">배송 메모</label>
                                <span class="input-field input-field--md">
                                    <input
                                        slot="deliveryMemo"
                                        type="text"
                                        maxlength="500"
                                        value="{{deliveryMemo}}"
                                        shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                    />
                                </span>
                            </div>

                            <!-- 해외 배송지 일 경우 -->
                            <div slot="hasInternationalShippingProduct">
                                {{#if hasInternationalShippingProduct}}
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">
                                        <span class="dot dot--r-must">개인통관고유부호</span>
                                    </label>
                                    <span class="input-field input-field--md order-sheet__custom-id-issuance-input-field">
                                        <input
                                            slot="shippingInfo.customsIdNumber"
                                            type="text"
                                            maxlength="13"
                                            value="{{shippingInfo.customsIdNumber}}"
                                            shopby-valid="ENGLISH_NUMBER"
                                            placeholder="P로 시작하는 13자리"
                                            shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                        />
                                    </span>
                                    <a
                                        href="https://unipass.customs.go.kr/csp/persIndex.do"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="btn btn--line-dark btn--sm order-sheet__custom-id-issuance"
                                    >
                                        개인통관고유부호 발급
                                    </a>
                                </div>
                                {{/if}}
                            </div>
                        </div>
                    </details>
                </section>
                {{/if}}
            </div>
        </div>
    </shipping-address-info>

    <!-- 혜택 적용 -->
    <promotion-info>
        <details class="accordion accordion__with-border-bottom" open>
            <summary class="accordion__title">혜택 적용</summary>
            <div class="accordion__content-wrapper" slot="isSignedIn">
                {{#ifEq isSignedIn true}}
                <div class="order-sheet__promotion-items">
                    <div class="order-sheet__promotion-row">
                        <label class="order-sheet__item-subject">쿠폰할인</label>

                        <div class="order-sheet__item order-sheet__promotion-input">
                            <span class="input-field input-field--md">
                                <input slot="allCouponAmt" type="text" placeholder="" value="{{convertToKoreanCurrency allCouponAmt}}" readonly />
                            </span>

                            <button
                                type="button"
                                class="btn btn--line-dark btn--sm order-sheet__coupon-modal-btn"
                                shopby-action="CLICK_OPEN_APPLY_COUPON_MODAL"
                            >
                                쿠폰 사용
                            </button>
                        </div>

                        <div class="order-sheet__promotion-additional-info">
                            <p>
                                상품 할인 :
                                <strong class="font-montserrat" slot="productCouponCount">{{productCouponCount}}</strong>
                                장
                            </p>
                            <p>
                                장바구니 할인 :
                                <strong class="font-montserrat" slot="cartCouponCount">{{cartCouponCount}}</strong>
                                장
                            </p>
                        </div>
                    </div>

                    <div class="order-sheet__promotion-row">
                        <label class="order-sheet__item-subject">적립금</label>
                        <div slot="paymentInfo" class="order-sheet__item order-sheet__promotion-input">
                            {{#ifLe paymentInfo.accumulationAmt 0}}
                            <span class="input-field input-field--md is-disabled">
                                <input type="text" value="0" disabled />
                            </span>
                            {{else}}
                            <span class="input-field input-field--md">
                                <input
                                    slot="accumulationInputValue"
                                    type="text"
                                    placeholder=""
                                    value="{{convertToKoreanCurrency accumulationInputValue}}"
                                    shopby-valid="NUMBER"
                                    shopby-action="CHANGE_INPUT_ACCUMULATION"
                                />
                            </span>
                            {{/ifLe}}

                            <button
                                type="button"
                                class="btn btn--line-dark btn--sm order-sheet__use-accumulation-btn {{#ifLe paymentInfo.accumulationAmt 0}}disabled{{/ifLe}}"
                                shopby-action="USE_ACCUMULATION_AMT"
                            >
                                모두 사용
                            </button>
                        </div>

                        <div class="order-sheet__promotion-additional-info">
                            <p>
                                보유 적립금 :
                                <strong class="font-montserrat" slot="paymentInfo">{{convertToKoreanCurrency paymentInfo.accumulationAmt }}</strong>
                                원
                            </p>
                            <p>
                                사용가능한 적립금 :
                                <strong class="font-montserrat" slot="paymentInfo">{{convertToKoreanCurrency paymentInfo.availableMaxAccumulationAmt }}</strong>
                                원
                            </p>
                        </div>
                    </div>
                </div>
                {{else}}
                <div class="order-sheet__promotion-section-login">
                    <p>
                        비회원으로 주문하실 경우 할인 쿠폰 사용이 불가능하며,
                        <strong>적립금 적립 및 혜택을 이용하실 수 있습니다.</strong>
                    </p>
                    <a class="btn btn--fill-dark btn--xl order-sheet__go-login" href="/pages/sign-in/sign-in.html">회원 로그인</a>
                </div>
                {{/ifEq}}
            </div>
        </details>
    </promotion-info>

    <!-- 결제 수단 선택 -->
    <pay-method-selector device-type="PC">
        <details class="accordion accordion__with-border-bottom" open>
            <summary class="accordion__title">
                결제수단 선택
                <div class="order-sheet__pay-method-desc-wrapper" slot="payMethods">
                    {{#if payMethods.notExistPayMethods}}
                    <p class="order-sheet__pay-method-desc">결제 가능한 수단이 존재하지 않습니다.</p>
                    {{/if}} {{#if payMethods.isEscrow}}
                    <!-- 에스크로 결제 수단 1개 이상 포함일 때 노출 -->
                    <p class="order-sheet__pay-method-desc">
                        고객님은 안전 거래를 위해 현금으로 결제시 저희 쇼핑몰에서 가입한 구매 안전(에스크로) 서비스를 이용하실 수 있습니다.
                    </p>
                    {{/if}}
                </div>
            </summary>
            <div class="accordion__content-wrapper">
                <div class="order-sheet__pay-method-wrapper" slot="payMethods">
                    <div class="order-sheet__pay-method-btns">
                        {{#if payMethods.hasMyPayPayment}}
                        <button
                            type="button"
                            class="my-pay-method-btn {{#if payMethods.myPayInfoAppSetting.useLogo}}logo{{else}}label{{/if}} {{#if  myPayMode.visibleMyPayPaymentForm}}checked{{/if}}"
                            shopby-pg-type="MY_PAY"
                            style="{{payMethods.myPayInfoAppSetting.buttonStyle}}"
                            shopby-on:click="CLICK_PAY_METHOD_BTN"
                            shopby-action="CLICK_MY_PAY_BTN"
                        >
                            {{#ifEq payMethods.myPayInfoAppSetting.useLogo false}}
                            <span>{{payMethods.myPayInfoAppSetting.payName}}</span>
                            {{/ifEq}}
                        </button>

                        {{/if}} {{#each payMethods.payMethodsToBeExposed}}

                        <!-- 라벨이 필요하지 않는 결제 버튼일 때 -->
                        {{#if isUnnecessaryLabel}}
                        <button
                            class="pay-method-btn pay-method-btn--centered {{#if selected}}pay-method-btn--checked{{/if}}"
                            shopby-on:click="CLICK_PAY_METHOD_BTN"
                            shopby-pay-type="{{payType}}"
                            shopby-pg-type="{{pgType}}"
                        >
                            <span class="ico ico--{{iconName}}{{#if selected}}-white{{/if}} pay-method-btn__icon"></span>
                        </button>

                        <!-- 라벨이 필요한 결제 버튼일 때 -->
                        {{else}}
                        <button
                            class="pay-method-btn {{#if selected}}pay-method-btn--checked{{/if}}"
                            shopby-on:click="CLICK_PAY_METHOD_BTN"
                            shopby-pay-type="{{payType}}"
                            shopby-pg-type="{{pgType}}"
                        >
                            <span class="pay-method-btn__label">{{label}}</span>
                            <span class="ico ico--{{iconName}}{{#if selected}}-white{{else}}-black{{/if}} pay-method-btn__icon"></span>
                        </button>
                        {{/if}} {{/each}}
                    </div>
                </div>

                <!-- 선택한 결제 수단이 "마이 페이"일 때 -->
                <div slot="myPayMode">
                    {{#if myPayMode.visibleMyPayPaymentForm}}
                    <div class="order-sheet__my-pay-register-form">
                        <div class="order-sheet__my-pay-register-form-top">
                            <p class="order-sheet__my-pay-title-wrap">
                                {{#ifGt myPayMode.myPayPaymentInfos.length 0}}
                                <span class="order-sheet__my-pay-title">{{payMethods.myPayInfoAppSetting.payName}} 결제수단 선택</span>
                                {{else}}
                                <span class="order-sheet__my-pay-title">결제수단 등록</span>
                                {{/ifGt}}
                                <span class="order-sheet__my-pay-title-desc">등록할 결제수단을 선택해 주세요.</span>
                            </p>

                            <button type="button" class="btn btn--line-gray btn--sm" shopby-action="CLICK_MY_PAY_SETTING">설정</button>
                        </div>

                        <!-- 등록된 결제수단이 있을 때 -->
                        {{#ifGt myPayMode.myPayPaymentInfos.length 0}}

                        <div>
                            <ul class="my-pay-payments">
                                {{#each myPayMode.myPayPaymentInfos}}
                                <li
                                    class="my-pay-payment-item {{#if isSelected}}my-pay-payment-item--selected{{/if}}"
                                    shopby-on:click="CLICK_ACCOUNT_OR_CART_ON_MY_PAY"
                                    shopby-pay-token="{{payToken}}"
                                    shopby-index="{{@index}}"
                                >
                                    <div class="my-pay-payment-item__top">
                                        <span class="my-pay-payment-item__card-name">{{cardName}}</span>

                                        <button class="my-pay-payment-item__bookmark-btn" shopby-action="CLICK_BOOKMARK_ON_MY_PAY">
                                            {{#if isSelected}}
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="22"
                                                height="21"
                                                viewBox="0 0 22 21"
                                                fill="{{#if main}}#ffffff{{else}}none{{/if}}"
                                            >
                                                <path
                                                    d="M10.2827 2.45332C10.5131 1.98638 10.6284 1.75291 10.7848 1.67831C10.9209 1.61341 11.0791 1.61341 11.2152 1.67831C11.3717 1.75291 11.4869 1.98638 11.7174 2.45332L13.9041 6.88328C13.9721 7.02113 14.0061 7.09006 14.0558 7.14358C14.0999 7.19096 14.1527 7.22935 14.2113 7.25662C14.2776 7.28742 14.3536 7.29854 14.5057 7.32077L19.397 8.03571C19.9121 8.11099 20.1696 8.14863 20.2888 8.27444C20.3925 8.38389 20.4412 8.5343 20.4215 8.68377C20.3988 8.85558 20.2124 9.03718 19.8395 9.40038L16.3014 12.8464C16.1912 12.9538 16.136 13.0076 16.1004 13.0715C16.0689 13.128 16.0487 13.1902 16.0409 13.2545C16.0321 13.3271 16.0451 13.403 16.0711 13.5547L16.906 18.4221C16.994 18.9355 17.038 19.1922 16.9553 19.3445C16.8833 19.477 16.7554 19.57 16.6071 19.5975C16.4366 19.6291 16.2061 19.5078 15.7451 19.2654L11.3724 16.9658C11.2361 16.8942 11.168 16.8584 11.0962 16.8443C11.0327 16.8318 10.9673 16.8318 10.9038 16.8443C10.832 16.8584 10.7639 16.8942 10.6277 16.9658L6.25492 19.2654C5.79392 19.5078 5.56341 19.6291 5.39297 19.5975C5.24468 19.57 5.11672 19.477 5.04474 19.3445C4.962 19.1922 5.00603 18.9355 5.09407 18.4221L5.92889 13.5547C5.95491 13.403 5.96793 13.3271 5.95912 13.2545C5.95132 13.1902 5.93111 13.128 5.89961 13.0715C5.86402 13.0076 5.80888 12.9538 5.69859 12.8464L2.16056 9.40038C1.78766 9.03718 1.60121 8.85558 1.57853 8.68377C1.55879 8.5343 1.60755 8.38389 1.71125 8.27444C1.83044 8.14863 2.08797 8.11099 2.60304 8.03571L7.49431 7.32077C7.64642 7.29854 7.72248 7.28742 7.78872 7.25662C7.84736 7.22935 7.90016 7.19096 7.94419 7.14358C7.99391 7.09006 8.02793 7.02113 8.09597 6.88328L10.2827 2.45332Z"
                                                    stroke="{{#if main}}#ffffff{{else}}#ffffff{{/if}}"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                            </svg>
                                            {{else}}
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="22"
                                                height="21"
                                                viewBox="0 0 22 21"
                                                fill="{{#if main}}#504eb3{{else}}none{{/if}}"
                                            >
                                                <path
                                                    d="M10.2827 2.45332C10.5131 1.98638 10.6284 1.75291 10.7848 1.67831C10.9209 1.61341 11.0791 1.61341 11.2152 1.67831C11.3717 1.75291 11.4869 1.98638 11.7174 2.45332L13.9041 6.88328C13.9721 7.02113 14.0061 7.09006 14.0558 7.14358C14.0999 7.19096 14.1527 7.22935 14.2113 7.25662C14.2776 7.28742 14.3536 7.29854 14.5057 7.32077L19.397 8.03571C19.9121 8.11099 20.1696 8.14863 20.2888 8.27444C20.3925 8.38389 20.4412 8.5343 20.4215 8.68377C20.3988 8.85558 20.2124 9.03718 19.8395 9.40038L16.3014 12.8464C16.1912 12.9538 16.136 13.0076 16.1004 13.0715C16.0689 13.128 16.0487 13.1902 16.0409 13.2545C16.0321 13.3271 16.0451 13.403 16.0711 13.5547L16.906 18.4221C16.994 18.9355 17.038 19.1922 16.9553 19.3445C16.8833 19.477 16.7554 19.57 16.6071 19.5975C16.4366 19.6291 16.2061 19.5078 15.7451 19.2654L11.3724 16.9658C11.2361 16.8942 11.168 16.8584 11.0962 16.8443C11.0327 16.8318 10.9673 16.8318 10.9038 16.8443C10.832 16.8584 10.7639 16.8942 10.6277 16.9658L6.25492 19.2654C5.79392 19.5078 5.56341 19.6291 5.39297 19.5975C5.24468 19.57 5.11672 19.477 5.04474 19.3445C4.962 19.1922 5.00603 18.9355 5.09407 18.4221L5.92889 13.5547C5.95491 13.403 5.96793 13.3271 5.95912 13.2545C5.95132 13.1902 5.93111 13.128 5.89961 13.0715C5.86402 13.0076 5.80888 12.9538 5.69859 12.8464L2.16056 9.40038C1.78766 9.03718 1.60121 8.85558 1.57853 8.68377C1.55879 8.5343 1.60755 8.38389 1.71125 8.27444C1.83044 8.14863 2.08797 8.11099 2.60304 8.03571L7.49431 7.32077C7.64642 7.29854 7.72248 7.28742 7.78872 7.25662C7.84736 7.22935 7.90016 7.19096 7.94419 7.14358C7.99391 7.09006 8.02793 7.02113 8.09597 6.88328L10.2827 2.45332Z"
                                                    stroke="{{#if main}}#504eb3{{else}}#a3a3a3{{/if}}"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                />
                                            </svg>
                                            {{/if}}
                                        </button>
                                    </div>

                                    <div class="my-pay-payment-item__additional-info">
                                        <p class="font-montserrat my-pay-payment-item__bank-card-no">{{bankCardNo}}</p>

                                        {{#if isVisibleQuotaSelectBox}}
                                        <span
                                            class="mini-select mini-select--sm my-pay-payment-item__quota-select-wrap {{#if isSelected}}mini-select-white{{/if}}"
                                        >
                                            <select shopby-on:change="CHANGE_SELECT_MY_PAY_QUOTA">
                                                {{#each quotaOptions}}
                                                <option value="{{value}}">{{label}}</option>
                                                {{/each}}
                                            </select>
                                        </span>
                                        {{/if}}
                                    </div>
                                </li>
                                {{/each}}
                                <li class="my-pay-payment-item-register-wrap">
                                    <span class="aurora__formula-symbol">+</span>
                                    <span class="my-pay-payment-item-register-wrap__title">결제수단 등록</span>
                                    <div class="my-pay-payment-item__register-btns">
                                        <button
                                            type="button"
                                            class="btn btn--line-gray btn--sm my-pay-payment-item__register-btn"
                                            shopby-action="CLICK_MY_PAY_REGISTER_CARD"
                                        >
                                            카드 등록
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn--line-gray btn--sm my-pay-payment-item__register-btn"
                                            shopby-action="CLICK_MY_PAY_REGISTER_ACCOUNT"
                                        >
                                            계좌 등록
                                        </button>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        {{else}}
                        <!-- 등록된 결제수단이 없을 때 -->
                        <div class="order-sheet__my-pay-register-form">
                            <div class="order-sheet__my-pay-btn-wrap">
                                <button
                                    type="button"
                                    class="btn btn--line-gray btn--md my-pay-payment-item__register-btn"
                                    shopby-action="CLICK_MY_PAY_REGISTER_CARD"
                                >
                                    신용/체크 카드 등록
                                </button>
                                <button
                                    type="button"
                                    class="btn btn--line-gray btn--md my-pay-payment-item__register-btn"
                                    shopby-action="CLICK_MY_PAY_REGISTER_ACCOUNT"
                                >
                                    계좌 등록
                                </button>
                            </div>

                            <p class="order-sheet__my-pay-desc">결제수단은 최대 8개까지 등록 가능합니다.</p>
                        </div>
                        {{/ifGt}}
                    </div>

                    {{/if}}
                </div>

                <!-- 선택한 결제 수단이 "무통장 입금"일 때 -->
                <div slot="needsDepositBankForm">
                    {{#if needsDepositBankForm}}
                    <div class="order-sheet__account-input-wrap">
                        <div class="order-sheet__item">
                            <label class="order-sheet__item-subject">입금자명</label>
                            <span class="input-field input-field--md">
                                <input
                                    type="text"
                                    placeholder="입금하시는 분의 성함을 입력해주세요."
                                    maxlength="10"
                                    value="{{remitter}}"
                                    shopby-valid="NO_SPECIAL"
                                    shopby-on:change="CHANGE_INPUT_ORDER_SHEET_REMITTER_NAME"
                                />
                            </span>
                        </div>
                        <div class="order-sheet__item">
                            <label class="order-sheet__item-subject">계좌번호</label>
                            <span class="select select--md" slot="mallAccountSelectBoxOptions">
                                <select shopby-on:change="CHANGE_SELECT_ORDER_SHEET_ACCOUNT">
                                    {{#each mallAccountSelectBoxOptions}}
                                    <option value="{{value}}">{{label}}</option>
                                    {{/each}}
                                </select>
                            </span>
                        </div>
                    </div>
                    {{/if}}
                </div>
            </div>
        </details>
    </pay-method-selector>

    <!-- 결제 정보-->
    <payment-info>
        <section class="order-sheet__payment">
            <div class="price-tag">
                <dl class="order-sheet__payment-info">
                    <div class="order-sheet__payment-info-row">
                        <dt>상품금액 합계</dt>
                        <dd class="order-sheet__price-wrap">
                            <strong class="font-montserrat order-sheet__price" slot="paymentInfo">
                                {{convertToKoreanCurrency paymentInfo.totalStandardAmt}}
                            </strong>
                            원
                        </dd>
                    </div>
                    <span class="aurora__formula-symbol">-</span>
                    <div class="order-sheet__payment-info-row">
                        <dt>할인금액 합계</dt>
                        <dd class="order-sheet__price-wrap">
                            <strong class="font-montserrat order-sheet__price" slot="paymentInfo">
                                {{convertToKoreanCurrency paymentInfo.totalDiscountAmt}}
                            </strong>
                            원
                        </dd>
                    </div>
                    <span class="aurora__formula-symbol">-</span>
                    <div class="order-sheet__payment-info-row">
                        <dt>적립금 사용 금액 합계</dt>
                        <dd class="order-sheet__price-wrap">
                            <strong class="font-montserrat order-sheet__price" slot="paymentInfo">
                                {{convertToKoreanCurrency paymentInfo.usedAccumulationAmt}}
                            </strong>
                            원
                        </dd>
                    </div>
                    <span class="aurora__formula-symbol">+</span>
                    <div class="order-sheet__payment-info-row">
                        <dt>배송비 합계</dt>
                        <dd class="order-sheet__price-wrap">
                            <strong class="font-montserrat order-sheet__price" slot="paymentInfo">
                                {{convertToKoreanCurrency paymentInfo.totalDeliveryAmt}}
                            </strong>
                            원
                        </dd>
                    </div>
                    <span class="aurora__formula-symbol">=</span>
                    <div class="order-sheet__payment-info-row">
                        <dt class="total-price">총 결제금액</dt>
                        <dd class="order-sheet__price-wrap">
                            <strong class="font-montserrat order-sheet__price order-sheet__total-price" slot="paymentInfo">
                                {{convertToKoreanCurrency paymentInfo.paymentAmt}}
                            </strong>
                            원
                        </dd>
                    </div>

                    <div class="order-sheet__total-accumulation font-montserrat">
                        예상적립
                        <strong>{{convertToKoreanCurrency paymentInfo.totalAccumulation}}</strong>
                        M
                    </div>
                </dl>
            </div>
        </section>
    </payment-info>

    <!-- 약관 -->
    <order-sheet-terms>
        <div>
            <ul class="order-sheet__terms" slot="orderSheetTerms">
                {{#each orderSheetTerms}}
                <li class="order-sheet__term-checker">
                    <label class="form-check form-check--md">
                        <input type="checkbox" shopby-on:change="CHANGE_CHECK_ORDER_SHEET_TERM" shopby-term-id="{{termId}}" />
                        <span class="form-check__label term-checker-label">{{getMandatoryLabel required}} {{termsName}}</span>
                    </label>

                    {{#if contents}}
                    <button type="button" class="btn" shopby-action="SHOW_TERM_DETAIL" shopby-term-id="{{termId}}">보기</button>
                    {{/if}}
                </li>
                {{/each}}
            </ul>
        </div>
    </order-sheet-terms>

    <button type="button" class="btn btn--fill-point btn--xl order-sheet__pay-btn" shopby-action="CLICK_PAY_BTN">결제 하기</button>
</div>

<div shopby-mobile-skin-container>
    <div class="order-sheet l-content" shopby-helper-key="order-sheet-form">
        <!-- 주문 상품 -->
        <order-products device-type="MOBILE">
            <section>
                <details class="accordion order-sheet__product-table" open>
                    <summary class="accordion__title">주문상품 확인</summary>
                    <div slot="deliveryGroupingProducts">
                        {{#each deliveryGroupingProducts}}
                        <div class="delivery-group-item">
                            <div class="order-product-wrap">
                                {{#each products}}
                                <div class="order-product" shopby-product-no="{{productNo}}">
                                    <div class="order-product__info">
                                        <div class="order-product__thumbnail">
                                            <a href="/pages/product/product-detail.html?productNo={{productNo}}">
                                                <span>{{img imageUrl 105 105 productName}}</span>
                                            </a>
                                        </div>
                                        <div class="order-product__content">
                                            <p class="order-product__brand">{{brandName}}</p>
                                            <div>
                                                <p class="order-product__name">{{productName}}</p>
                                                <div class="order-product__option">
                                                    <div>{{#ifNe optionType 'PRODUCT_ONLY'}} {{displayNormalOption optionName optionValue}} {{/ifNe}}</div>
                                                    <div>{{displayTextOption optionInputs}}</div>
                                                </div>
                                            </div>
                                            <ul class="order-product__amount-wrap">
                                                <li class="order-product__amount">
                                                    <strong class="font-montserrat">{{orderCnt}}</strong>
                                                    개
                                                </li>
                                                <span class="order-product__delimiter"></span>
                                                <li class="order-product__amount">
                                                    <strong class="font-montserrat">{{convertToKoreanCurrency price.buyAmt}}</strong>
                                                    원
                                                </li>
                                                {{#ifNe price.standardAmt price.buyAmt}}
                                                <li class="order-product__standard-amt font-montserrat">{{convertToKoreanCurrency price.standardAmt}}원</li>
                                                {{/ifNe}}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                {{/each}}
                            </div>
                            {{#ifNe deliveryAmt 0}}
                            <div class="order-product__delivery-info">
                                {{convertToKoreanCurrency deliveryAmt}} 원 ({{toStringDeliveryPayType deliveryPayType}})
                            </div>
                            {{else}}
                            <div class="order-product__delivery-info">배송비 무료</div>
                            {{/ifNe}}
                        </div>
                        {{/each}}
                    </div>
                </details>
            </section>
        </order-products>

        <div>
            <a href="/pages/order/cart.html" class="btn btn--line-dark btn--xs order-sheet__go-cart">장바구니 돌아가기</a>
        </div>

        <!-- 주문자 정보 -->
        <orderer-info>
            <section class="l-panel">
                <div class="order-sheet__item" slot="isMemberInfoUpdatableWithOrdererInfo">
                    <!-- 회원 && 몰 설정에 회원 점유 인증이 아닌 경우 노출 -->
                    {{#if isMemberInfoUpdatableWithOrdererInfo}}
                    <label class="form-check form-check--sm order-sheet__register-default-address-cbx" slot="isMemberInfoSaved">
                        {{#if isMemberInfoSaved}}
                        <input type="checkbox" shopby-on:change="CHANGE_SAVE_UPDATE_MEMBER_INFO" checked />
                        {{else}}
                        <input type="checkbox" shopby-on:change="CHANGE_SAVE_UPDATE_MEMBER_INFO" />
                        {{/if}}
                        <span class="form-check__label">주문자의 이메일, 전화번호와 배송지 주소를 회원 정보에 반영합니다.</span>
                    </label>
                    {{/if}}
                </div>
                <details class="accordion" open>
                    <summary class="accordion__title">주문자 정보</summary>
                    <div class="accordion__content-wrapper">
                        <div class="order-sheet__item">
                            <label class="order-sheet__item-subject">
                                <span class="dot dot--r-must">주문자명</span>
                            </label>
                            <span class="input-field input-field--sm">
                                <input
                                    slot="ordererInfo.ordererName"
                                    type="text"
                                    maxlength="20"
                                    shopby-valid="NO_COMMON_SPECIAL"
                                    value="{{ordererInfo.ordererName}}"
                                    shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                                />
                            </span>
                        </div>
                        <div class="order-sheet__item">
                            <label class="order-sheet__item-subject">
                                <span class="dot dot--r-must">이메일 주소</span>
                            </label>
                            <div class="email-input order-sheet__email-input">
                                <span class="input-field input-field--sm email-input__id">
                                    <input
                                        slot="ordererInfo.emailId"
                                        type="text"
                                        maxlength="64"
                                        shopby-valid="EMAIL_ID"
                                        value="{{ordererInfo.emailId}}"
                                        shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                                    />
                                </span>
                                @
                                <span class="input-field input-field--sm email-input__domain">
                                    <input
                                        slot="ordererInfo.emailDomain"
                                        type="text"
                                        maxlength="255"
                                        shopby-valid="EMAIL_DOMAIN"
                                        value="{{ordererInfo.emailDomain}}"
                                        shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                                    />
                                </span>
                            </div>
                            <span class="select select--sm order-sheet__domain-select">
                                <select shopby-on:change="CHANGE_SELECT_ORDERER_INFO" slot="ordererInfo.emailDomain">
                                    <option value="" disabled selected>직접입력</option>
                                    <option value="naver.com">naver.com</option>
                                    <option value="hanmail.net">hanmail.net</option>
                                    <option value="daum.net">daum.net</option>
                                    <option value="nate.com">nate.com</option>
                                    <option value="gmail.com">gmail.com</option>
                                </select>
                            </span>
                        </div>
                        <div class="order-sheet__item">
                            <label class="order-sheet__item-subject">
                                <span class="dot dot--r-must">휴대폰 번호</span>
                            </label>
                            <span class="input-field input-field--sm">
                                <input
                                    slot="ordererInfo.ordererContact1"
                                    type="text"
                                    maxlength="12"
                                    shopby-valid="NUMBER"
                                    value="{{ordererInfo.ordererContact1}}"
                                    placeholder="휴대폰 번호 - 없이 입력"
                                    shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                                />
                            </span>
                        </div>
                        <div class="order-sheet__item">
                            <label class="order-sheet__item-subject">전화 번호</label>
                            <span class="input-field input-field--sm">
                                <input
                                    slot="ordererInfo.ordererContact2"
                                    type="text"
                                    maxlength="12"
                                    shopby-valid="NUMBER"
                                    placeholder="전화 번호 - 없이 입력"
                                    value="{{ordererInfo.ordererContact2}}"
                                    shopby-on:change="CHANGE_INPUT_ORDERER_INFO"
                                />
                            </span>
                        </div>
                        <div class="order-sheet__item">
                            <label class="order-sheet__item-subject">주문 메모</label>
                            <span class="input-field input-field--sm">
                                <input slot="orderMemo" type="text" value="{{orderMemo}}" shopby-on:change="CHANGE_INPUT_ORDERER_INFO" />
                            </span>
                        </div>

                        <!-- 비회원일 때 -->
                        <div slot="visibleGuestForm" class="order-sheet__guest {{#if visibleGuestForm}}on{{/if}}">
                            <div class="order-sheet__item">
                                <ul class="order-sheet__guest-desc">
                                    <li>비회원 주문 조회 시 사용할 비밀번호를 영문/숫자/특수문자 조합하여 8~20자 이내로 입력해주세요.</li>
                                </ul>
                                <label class="order-sheet__item-subject">
                                    <span class="dot dot--r-must">주문 비밀번호 입력</span>
                                </label>
                                <span class="input-field input-field--sm">
                                    <input
                                        type="password"
                                        minlength="8"
                                        maxlength="20"
                                        shopby-valid="NO_KOREAN_SPECIAL_PASSWORD"
                                        value="{{guestInfo.password}}"
                                        placeholder="비밀번호 (영문, 숫자, 특수문자 8~20자)"
                                        shopby-on:focusout="FOCUS_OUT_GUEST_PASSWORD_INPUT"
                                        autocomplete="off"
                                    />
                                </span>
                                <p
                                    slot="errorMessageInvalidPassword"
                                    class="order-sheet__error-msg {{#if errorMessageInvalidPassword}}on{{/if}}"
                                    shopby-message="invalidPassword"
                                >
                                    영문, 숫자, 특수문자를 3종류 모두 조합하여 8~20자로 입력해주세요.
                                </p>
                                <p
                                    slot="errorMessageLessInvalidPassword"
                                    class="order-sheet__error-msg {{#if errorMessageLessInvalidPassword}}on{{/if}}"
                                    shopby-message="lessInvalidPassword"
                                >
                                    영문, 숫자, 특수문자를 2종류 이상 조합하여 10~20자로 입력해주세요.
                                </p>
                                <p
                                    slot="errorMessageInvalidPasswordLength"
                                    class="order-sheet__error-msg  {{#if errorMessageInvalidPasswordLength}}on{{/if}}"
                                    shopby-message="invalidPasswordLength"
                                >
                                    비밀번호 자릿수를 확인해주세요. (8자리~20자리)
                                </p>
                            </div>
                            <div class="order-sheet__item">
                                <label class="order-sheet__item-subject">
                                    <span class="dot dot--r-must">주문 비밀번호 입력 확인</span>
                                </label>
                                <span class="input-field input-field--sm">
                                    <input
                                        type="password"
                                        minlength="8"
                                        maxlength="20"
                                        shopby-valid="NO_KOREAN_SPECIAL_PASSWORD"
                                        value="{{guestInfo.passwordForConfirmation}}"
                                        placeholder="비밀번호 한번 더 입력"
                                        shopby-on:focusout="FOCUS_OUT_GUEST_PASSWORD_CONFIRM_INPUT"
                                        autocomplete="off"
                                    />
                                </span>
                                <p
                                    slot="errorMessageNotEqualPassword"
                                    class="order-sheet__error-msg {{#if errorMessageNotEqualPassword}}on{{/if}}"
                                    shopby-message="notEqualPassword"
                                >
                                    비밀번호와 비밀번호확인 값이 일치하지 않습니다.
                                </p>
                            </div>
                        </div>
                    </div>
                </details>
            </section>
        </orderer-info>

        <!-- 배송지 정보 -->
        <shipping-address-info>
            <div>
                <div slot="hasDeliverableProduct">
                    {{#if hasDeliverableProduct}}
                    <section class="l-panel">
                        <details class="accordion" open>
                            <summary class="accordion__title order-sheet__shipping-info">
                                배송지 정보

                                <label class="form-check form-check--sm" slot="isSameOrderer">
                                    {{#if isSameOrderer}}
                                    <input type="checkbox" shopby-on:change="CHANGE_CHECKBOX_SAME_ORDERER" checked />
                                    {{else}}
                                    <input type="checkbox" shopby-on:change="CHANGE_CHECKBOX_SAME_ORDERER" />
                                    {{/if}}
                                    <span class="form-check__label">주문자 동일</span>
                                </label>
                            </summary>
                            <div class="accordion__content-wrapper">
                                {{#if (isSignedIn)}}
                                <div class="order-sheet__item">
                                    <div class="order-sheet__shipping-radio-btns-wrapper" slot="selectedShippingGroup">
                                        <label class="form-check form-check--sm">
                                            {{#ifEq selectedShippingGroup 'DEFAULT_ADDRESS'}}
                                            <input
                                                type="radio"
                                                name="shippingGroup"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                                value="DEFAULT_ADDRESS"
                                                checked
                                            />
                                            {{else}}
                                            <input
                                                type="radio"
                                                name="shippingGroup"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                                value="DEFAULT_ADDRESS"
                                            />
                                            {{/ifEq}}
                                            <span class="form-check__label">기본 배송지</span>
                                        </label>

                                        <label class="form-check form-check--sm">
                                            {{#ifEq selectedShippingGroup 'RECENT_ADDRESS'}}
                                            <input
                                                type="radio"
                                                name="shippingGroup"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                                value="RECENT_ADDRESS"
                                                checked
                                            />
                                            {{else}}
                                            <input
                                                type="radio"
                                                name="shippingGroup"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                                value="RECENT_ADDRESS"
                                            />
                                            {{/ifEq}}
                                            <span class="form-check__label">최근 배송지</span>
                                        </label>

                                        <label class="form-check form-check--sm">
                                            {{#ifEq selectedShippingGroup 'NEW_ADDRESS'}}
                                            <input
                                                type="radio"
                                                name="shippingGroup"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                                value="NEW_ADDRESS"
                                                checked
                                            />
                                            {{else}}
                                            <input
                                                type="radio"
                                                name="shippingGroup"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_ADDRESS_GROUP"
                                                value="NEW_ADDRESS"
                                            />
                                            {{/ifEq}}
                                            <span class="form-check__label">신규 배송지</span>
                                        </label>
                                    </div>
                                    <button
                                        type="button"
                                        class="btn btn--line-dark btn--md order-sheet__shipping-address-btn"
                                        shopby-action="CLICK_OPEN_SHIPPING_ADDRESS_FORM"
                                    >
                                        배송지 관리
                                    </button>
                                </div>
                                {{/if}}
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">배송지 이름</label>
                                    <span class="input-field input-field--sm">
                                        <input
                                            slot="shippingInfo.addressName"
                                            type="text"
                                            maxlength="50"
                                            value="{{shippingInfo.addressName}}"
                                            shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                            shopby-on:input="INPUT_SHIPPING_INFO"
                                        />
                                    </span>
                                </div>
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">
                                        <span class="dot dot--r-must">받으시는 분</span>
                                    </label>
                                    <span class="input-field input-field--sm">
                                        <input
                                            slot="shippingInfo.receiverName"
                                            type="text"
                                            maxlength="20"
                                            shopby-valid="NO_COMMON_SPECIAL"
                                            value="{{shippingInfo.receiverName}}"
                                            shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                            shopby-on:input="INPUT_SHIPPING_INFO"
                                        />
                                    </span>
                                </div>
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">
                                        <span class="dot dot--r-must">주소</span>
                                    </label>
                                    <div class="order-sheet__address-form">
                                        <p class="order-sheet__address-form__zip-code">
                                            <span class="input-field input-field--sm">
                                                <input
                                                    slot="shippingInfo.receiverZipCd"
                                                    type="text"
                                                    readonly
                                                    value="{{shippingInfo.receiverZipCd}}"
                                                    shopby-valid="NUMBER"
                                                />
                                            </span>
                                            <button
                                                type="button"
                                                class="btn btn--line-dark btn--md order-sheet__find-zip-code-btn"
                                                shopby-focus-field="zipCode"
                                                shopby-action="SEARCH_ZIP_CODE"
                                            >
                                                우편번호 찾기
                                            </button>
                                        </p>
                                        <span class="input-field input-field--sm is-disabled">
                                            <input slot="shippingInfo.receiverAddress" type="text" readonly value="{{shippingInfo.receiverAddress}}" disabled />
                                        </span>
                                        <span class="input-field input-field--sm">
                                            <input
                                                slot="shippingInfo.receiverDetailAddress"
                                                type="text"
                                                maxlength="100"
                                                value="{{shippingInfo.receiverDetailAddress}}"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                                shopby-on:input="INPUT_SHIPPING_INFO"
                                            />
                                        </span>
                                    </div>
                                </div>
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">
                                        <span class="dot dot--r-must">휴대폰 번호</span>
                                    </label>
                                    <div class="phone-number-input">
                                        <span class="input-field input-field--sm">
                                            <input
                                                slot="shippingInfo.receiverContact1"
                                                type="text"
                                                maxlength="12"
                                                shopby-valid="NUMBER"
                                                placeholder="휴대폰 번호 - 없이 입력"
                                                value="{{shippingInfo.receiverContact1}}"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                            />
                                        </span>
                                    </div>
                                </div>
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">전화 번호</label>
                                    <div class="phone-number-input">
                                        <span class="input-field input-field--sm">
                                            <input
                                                slot="shippingInfo.receiverContact2"
                                                type="text"
                                                maxlength="12"
                                                shopby-valid="NUMBER"
                                                placeholder="전화 번호 - 없이 입력"
                                                value="{{shippingInfo.receiverContact2}}"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                            />
                                        </span>
                                    </div>
                                </div>
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">배송 메모</label>
                                    <span class="input-field input-field--sm">
                                        <input
                                            slot="deliveryMemo"
                                            type="text"
                                            maxlength="500"
                                            value="{{deliveryMemo}}"
                                            shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                        />
                                    </span>
                                </div>

                                <!-- 해외 배송지 일 경우 -->
                                <div slot="hasInternationalShippingProduct">
                                    {{#if hasInternationalShippingProduct}}
                                    <div class="order-sheet__item" style="margin-top: 30px">
                                        <label class="order-sheet__item-subject">
                                            <span class="dot dot--r-must">개인통관고유부호</span>
                                        </label>
                                        <span class="input-field input-field--sm">
                                            <input
                                                slot="shippingInfo.customsIdNumber"
                                                type="text"
                                                maxlength="13"
                                                value="{{shippingInfo.customsIdNumber}}"
                                                shopby-valid="ENGLISH_NUMBER"
                                                placeholder="P로 시작하는 13자리"
                                                shopby-on:change="UPDATE_ORDER_SHEET_SHIPPING_INFO"
                                            />
                                        </span>
                                        <a
                                            href="https://unipass.customs.go.kr/csp/persIndex.do"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            class="btn btn--line-dark btn--xs order-sheet__custom-id-issuance"
                                            style="margin-top: 10px"
                                        >
                                            개인통관고유부호 발급
                                        </a>
                                    </div>
                                    {{/if}}
                                </div>
                            </div>
                        </details>
                    </section>
                    {{/if}}
                </div>
            </div>
        </shipping-address-info>

        <!-- 혜택 적용 -->
        <promotion-info>
            <section class="l-panel">
                <details class="accordion" open>
                    <summary class="accordion__title">혜택 적용</summary>

                    <div class="accordion__content-wrapper" slot="isSignedIn">
                        {{#ifEq isSignedIn true}}
                        <div class="order-sheet__promotion-items">
                            <div class="order-sheet__item">
                                <label>
                                    <span class="order-sheet__item-subject">쿠폰할인</span>

                                    <div class="order-sheet__promotion-input">
                                        <span class="input-field input-field--sm">
                                            <input slot="allCouponAmt" type="text" placeholder="" value="{{convertToKoreanCurrency allCouponAmt}}" readonly />
                                        </span>

                                        <button type="button" class="btn btn--line-dark btn--md" shopby-action="CLICK_OPEN_APPLY_COUPON_MODAL">
                                            쿠폰 사용
                                        </button>
                                    </div>
                                </label>

                                <div class="order-sheet__promotion-additional-info">
                                    <p>
                                        상품 할인 :
                                        <strong class="font-montserrat" slot="productCouponCount">{{productCouponCount}}</strong>
                                        장
                                    </p>
                                    <p>
                                        장바구니 할인 :
                                        <strong class="font-montserrat" slot="cartCouponCount">{{cartCouponCount}}</strong>
                                        장
                                    </p>
                                </div>
                            </div>

                            <div class="order-sheet__item">
                                <label>
                                    <span class="order-sheet__item-subject">적립금</span>
                                    <div slot="paymentInfo" class="order-sheet__promotion-input">
                                        {{#ifLe paymentInfo.accumulationAmt 0}}
                                        <span class="input-field input-field--sm is-disabled">
                                            <input type="text" value="0" disabled />
                                        </span>
                                        {{else}}
                                        <span class="input-field input-field--sm">
                                            <input
                                                slot="accumulationInputValue"
                                                type="text"
                                                placeholder=""
                                                value="{{convertToKoreanCurrency accumulationInputValue}}"
                                                shopby-valid="NUMBER"
                                                shopby-action="CHANGE_INPUT_ACCUMULATION"
                                            />
                                        </span>
                                        {{/ifLe}}

                                        <button
                                            type="button"
                                            class="btn btn--line-dark btn--md order-sheet__use-accumulation-btn {{#ifLe paymentInfo.accumulationAmt 0}}disabled{{/ifLe}}"
                                            shopby-action="USE_ACCUMULATION_AMT"
                                        >
                                            모두 사용
                                        </button>
                                    </div>
                                </label>

                                <div class="order-sheet__promotion-additional-info">
                                    <p>
                                        보유 적립금 :
                                        <strong class="font-montserrat" slot="paymentInfo">{{convertToKoreanCurrency paymentInfo.accumulationAmt }}</strong>
                                        원
                                    </p>
                                    <p>
                                        사용가능한 적립금 :
                                        <strong class="font-montserrat" slot="paymentInfo">
                                            {{convertToKoreanCurrency paymentInfo.availableMaxAccumulationAmt }}
                                        </strong>
                                        원
                                    </p>
                                </div>
                            </div>
                        </div>
                        {{else}}
                        <div>
                            <p>
                                비회원으로 주문하실 경우 할인 쿠폰 사용이 불가능하며,
                                <strong>적립금 적립 및 혜택을 이용하실 수 있습니다.</strong>
                            </p>
                            <button type="button" class="btn btn--fill-dark btn--lg order-sheet__go-login" shopby-action="CLICK_LOGIN">회원 로그인</button>
                        </div>
                        {{/ifEq}}
                    </div>
                </details>
            </section>
        </promotion-info>

        <!-- 결제 수단 선택 -->
        <pay-method-selector device-type="MOBILE">
            <section class="l-panel">
                <details class="accordion" open>
                    <summary class="accordion__title">결제수단 선택</summary>
                    <div class="accordion__content-wrapper">
                        <div class="order-sheet__pay-method-wrapper" slot="payMethods">
                            {{#if payMethods.notExistPayMethods}}
                            <p class="order-sheet__pay-method-desc">결제 가능한 수단이 존재하지 않습니다.</p>
                            {{/if}} {{#if payMethods.isEscrow}}
                            <!-- 에스크로 결제 수단 1개 이상 포함일 때 노출 -->
                            <p class="order-sheet__pay-method-desc">
                                고객님은 안전 거래를 위해 현금으로 결제시 저희 쇼핑몰에서 가입한 구매 안전(에스크로) 서비스를 이용하실 수 있습니다.
                            </p>
                            {{/if}}

                            <div class="order-sheet__pay-method-btns">
                                {{#if payMethods.hasMyPayPayment}}
                                <button
                                    type="button"
                                    class="my-pay-method-btn btn btn--line-gray {{#if payMethods.myPayInfoAppSetting.useLogo}}logo{{else}}label{{/if}} {{#if myPayMode.visibleMyPayPaymentForm}}checked{{/if}}"
                                    shopby-pg-type="MY_PAY"
                                    style="{{payMethods.myPayInfoAppSetting.buttonStyle}}"
                                    shopby-on:click="CLICK_PAY_METHOD_BTN"
                                    shopby-action="CLICK_MY_PAY_BTN"
                                >
                                    {{#ifEq payMethods.myPayInfoAppSetting.useLogo false}}
                                    <span>{{payMethods.myPayInfoAppSetting.payName}}</span>
                                    {{/ifEq}}
                                </button>

                                {{/if}} {{#each payMethods.payMethodsToBeExposed}}

                                <!-- 라벨이 필요하지 않는 결제 버튼일 때 -->
                                {{#if isUnnecessaryLabel}}
                                <button
                                    class="pay-method-btn pay-method-btn--centered {{#if selected}}pay-method-btn--checked{{/if}}"
                                    shopby-on:click="CLICK_PAY_METHOD_BTN"
                                    shopby-pay-type="{{payType}}"
                                    shopby-pg-type="{{pgType}}"
                                >
                                    <span class="ico ico--{{iconName}}{{#if selected}}-white{{/if}} pay-method-btn__icon"></span>
                                </button>

                                <!-- 라벨이 필요한 결제 버튼일 때 -->
                                {{else}}
                                <button
                                    class="pay-method-btn {{#if selected}}pay-method-btn--checked{{/if}}"
                                    shopby-on:click="CLICK_PAY_METHOD_BTN"
                                    shopby-pay-type="{{payType}}"
                                    shopby-pg-type="{{pgType}}"
                                >
                                    <span class="pay-method-btn__label">{{label}}</span>
                                    <span class="ico ico--{{iconName}}{{#if selected}}-white{{else}}-black{{/if}} pay-method-btn__icon"></span>
                                </button>
                                {{/if}} {{/each}}
                            </div>
                        </div>

                        <!-- 선택한 결제 수단이 "마이 페이"일 때 -->
                        <div slot="myPayModeSwiper">
                            {{#if myPayMode.visibleMyPayPaymentForm}}
                            <div class="order-sheet__my-pay-register-form">
                                <!-- 등록된 결제수단이 있을 때 -->
                                {{#ifGt myPayMode.myPayPaymentInfos.length 0}}
                                <div class="order-sheet__my-pay-register-form-top">
                                    <span class="order-sheet__my-pay-title">{{payMethods.myPayInfoAppSetting.payName}} 결제 수단</span>
                                    <button type="button" class="btn btn--line-gray btn--sm" shopby-action="CLICK_MY_PAY_SETTING">설정</button>
                                </div>

                                <div class="swiper" shopby-slider-id="{{myPayMode.sliderId}}">
                                    <ul class="swiper-wrapper my-pay-payments">
                                        {{#each myPayMode.myPayPaymentInfos}}
                                        <li
                                            class="swiper-slide my-pay-payment-item {{#if isSelected}}my-pay-payment-item--selected{{/if}}"
                                            shopby-on:click="CLICK_ACCOUNT_OR_CART_ON_MY_PAY"
                                            shopby-pay-token="{{payToken}}"
                                            shopby-index="{{@index}}"
                                        >
                                            <div class="my-pay-payment-item__top">
                                                <span class="my-pay-payment-item__card-name">{{cardName}}</span>

                                                <button class="my-pay-payment-item__bookmark-btn" shopby-action="CLICK_BOOKMARK_ON_MY_PAY">
                                                    {{#if isSelected}}
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        width="22"
                                                        height="21"
                                                        viewBox="0 0 22 21"
                                                        fill="{{#if main}}#ffffff{{else}}none{{/if}}"
                                                    >
                                                        <path
                                                            d="M10.2827 2.45332C10.5131 1.98638 10.6284 1.75291 10.7848 1.67831C10.9209 1.61341 11.0791 1.61341 11.2152 1.67831C11.3717 1.75291 11.4869 1.98638 11.7174 2.45332L13.9041 6.88328C13.9721 7.02113 14.0061 7.09006 14.0558 7.14358C14.0999 7.19096 14.1527 7.22935 14.2113 7.25662C14.2776 7.28742 14.3536 7.29854 14.5057 7.32077L19.397 8.03571C19.9121 8.11099 20.1696 8.14863 20.2888 8.27444C20.3925 8.38389 20.4412 8.5343 20.4215 8.68377C20.3988 8.85558 20.2124 9.03718 19.8395 9.40038L16.3014 12.8464C16.1912 12.9538 16.136 13.0076 16.1004 13.0715C16.0689 13.128 16.0487 13.1902 16.0409 13.2545C16.0321 13.3271 16.0451 13.403 16.0711 13.5547L16.906 18.4221C16.994 18.9355 17.038 19.1922 16.9553 19.3445C16.8833 19.477 16.7554 19.57 16.6071 19.5975C16.4366 19.6291 16.2061 19.5078 15.7451 19.2654L11.3724 16.9658C11.2361 16.8942 11.168 16.8584 11.0962 16.8443C11.0327 16.8318 10.9673 16.8318 10.9038 16.8443C10.832 16.8584 10.7639 16.8942 10.6277 16.9658L6.25492 19.2654C5.79392 19.5078 5.56341 19.6291 5.39297 19.5975C5.24468 19.57 5.11672 19.477 5.04474 19.3445C4.962 19.1922 5.00603 18.9355 5.09407 18.4221L5.92889 13.5547C5.95491 13.403 5.96793 13.3271 5.95912 13.2545C5.95132 13.1902 5.93111 13.128 5.89961 13.0715C5.86402 13.0076 5.80888 12.9538 5.69859 12.8464L2.16056 9.40038C1.78766 9.03718 1.60121 8.85558 1.57853 8.68377C1.55879 8.5343 1.60755 8.38389 1.71125 8.27444C1.83044 8.14863 2.08797 8.11099 2.60304 8.03571L7.49431 7.32077C7.64642 7.29854 7.72248 7.28742 7.78872 7.25662C7.84736 7.22935 7.90016 7.19096 7.94419 7.14358C7.99391 7.09006 8.02793 7.02113 8.09597 6.88328L10.2827 2.45332Z"
                                                            stroke="{{#if main}}#ffffff{{else}}#ffffff{{/if}}"
                                                            stroke-width="2"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                    </svg>
                                                    {{else}}
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        width="22"
                                                        height="21"
                                                        viewBox="0 0 22 21"
                                                        fill="{{#if main}}#504eb3{{else}}none{{/if}}"
                                                    >
                                                        <path
                                                            d="M10.2827 2.45332C10.5131 1.98638 10.6284 1.75291 10.7848 1.67831C10.9209 1.61341 11.0791 1.61341 11.2152 1.67831C11.3717 1.75291 11.4869 1.98638 11.7174 2.45332L13.9041 6.88328C13.9721 7.02113 14.0061 7.09006 14.0558 7.14358C14.0999 7.19096 14.1527 7.22935 14.2113 7.25662C14.2776 7.28742 14.3536 7.29854 14.5057 7.32077L19.397 8.03571C19.9121 8.11099 20.1696 8.14863 20.2888 8.27444C20.3925 8.38389 20.4412 8.5343 20.4215 8.68377C20.3988 8.85558 20.2124 9.03718 19.8395 9.40038L16.3014 12.8464C16.1912 12.9538 16.136 13.0076 16.1004 13.0715C16.0689 13.128 16.0487 13.1902 16.0409 13.2545C16.0321 13.3271 16.0451 13.403 16.0711 13.5547L16.906 18.4221C16.994 18.9355 17.038 19.1922 16.9553 19.3445C16.8833 19.477 16.7554 19.57 16.6071 19.5975C16.4366 19.6291 16.2061 19.5078 15.7451 19.2654L11.3724 16.9658C11.2361 16.8942 11.168 16.8584 11.0962 16.8443C11.0327 16.8318 10.9673 16.8318 10.9038 16.8443C10.832 16.8584 10.7639 16.8942 10.6277 16.9658L6.25492 19.2654C5.79392 19.5078 5.56341 19.6291 5.39297 19.5975C5.24468 19.57 5.11672 19.477 5.04474 19.3445C4.962 19.1922 5.00603 18.9355 5.09407 18.4221L5.92889 13.5547C5.95491 13.403 5.96793 13.3271 5.95912 13.2545C5.95132 13.1902 5.93111 13.128 5.89961 13.0715C5.86402 13.0076 5.80888 12.9538 5.69859 12.8464L2.16056 9.40038C1.78766 9.03718 1.60121 8.85558 1.57853 8.68377C1.55879 8.5343 1.60755 8.38389 1.71125 8.27444C1.83044 8.14863 2.08797 8.11099 2.60304 8.03571L7.49431 7.32077C7.64642 7.29854 7.72248 7.28742 7.78872 7.25662C7.84736 7.22935 7.90016 7.19096 7.94419 7.14358C7.99391 7.09006 8.02793 7.02113 8.09597 6.88328L10.2827 2.45332Z"
                                                            stroke="{{#if main}}#504eb3{{else}}#a3a3a3{{/if}}"
                                                            stroke-width="2"
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                        />
                                                    </svg>
                                                    {{/if}}
                                                </button>
                                            </div>

                                            <div class="my-pay-payment-item__additional-info">
                                                <p class="font-montserrat my-pay-payment-item__bank-card-no">{{bankCardNo}}</p>

                                                {{#if isVisibleQuotaSelectBox}}
                                                <span
                                                    class="mini-select mini-select--sm my-pay-payment-item__quota-select-wrap {{#if isSelected}}mini-select-white{{/if}}"
                                                >
                                                    <select shopby-on:change="CHANGE_SELECT_MY_PAY_QUOTA">
                                                        {{#each quotaOptions}}
                                                        <option value="{{value}}">{{label}}</option>
                                                        {{/each}}
                                                    </select>
                                                </span>
                                                {{/if}}
                                            </div>
                                        </li>
                                        {{/each}}
                                        <li class="swiper-slide my-pay-payment-item-register-wrap">
                                            <span class="aurora__formula-symbol">+</span>
                                            <span class="my-pay-payment-item-register-wrap__title">결제수단 등록</span>
                                            <div class="my-pay-payment-item__register-btns">
                                                <button
                                                    type="button"
                                                    class="btn btn--line-gray btn--sm my-pay-payment-item__register-btn"
                                                    shopby-action="CLICK_MY_PAY_REGISTER_CARD"
                                                >
                                                    카드 등록
                                                </button>
                                                <button
                                                    type="button"
                                                    class="btn btn--line-gray btn--sm my-pay-payment-item__register-btn"
                                                    shopby-action="CLICK_MY_PAY_REGISTER_ACCOUNT"
                                                >
                                                    계좌 등록
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                {{else}}
                                <!-- 등록된 결제수단이 없을 때 -->
                                <div class="order-sheet__my-pay-register-form">
                                    <p class="order-sheet__my-pay-register-form-top">
                                        <span class="order-sheet__my-pay-title">결제수단 등록</span>
                                        <button type="button" class="btn btn--line-gray btn--sm" shopby-action="CLICK_MY_PAY_SETTING">설정</button>
                                    </p>
                                    <div class="order-sheet__my-pay-btn-wrap">
                                        <button
                                            type="button"
                                            class="btn btn--line-gray btn--lg my-pay-payment-item__register-btn"
                                            shopby-action="CLICK_MY_PAY_REGISTER_CARD"
                                        >
                                            신용/체크 카드 등록
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn--line-gray btn--lg my-pay-payment-item__register-btn"
                                            shopby-action="CLICK_MY_PAY_REGISTER_ACCOUNT"
                                        >
                                            계좌 등록
                                        </button>
                                    </div>

                                    <p class="order-sheet__my-pay-desc">결제수단은 최대 8개까지 등록 가능합니다.</p>
                                </div>
                                {{/ifGt}}
                            </div>

                            {{/if}}
                        </div>

                        <!-- 선택한 결제 수단이 "무통장 입금"일 때 -->
                        <div slot="needsDepositBankForm">
                            {{#if needsDepositBankForm}}
                            <div class="order-sheet__account-input-wrap">
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">입금자명</label>
                                    <span class="input-field input-field--sm">
                                        <input
                                            type="text"
                                            placeholder="입금하시는 분의 성함을 입력해주세요."
                                            maxlength="10"
                                            value="{{remitter}}"
                                            shopby-valid="NO_SPECIAL"
                                            shopby-on:change="CHANGE_INPUT_ORDER_SHEET_REMITTER_NAME"
                                        />
                                    </span>
                                </div>
                                <div class="order-sheet__item">
                                    <label class="order-sheet__item-subject">계좌번호</label>
                                    <span class="select select--sm" slot="mallAccountSelectBoxOptions">
                                        <select shopby-on:change="CHANGE_SELECT_ORDER_SHEET_ACCOUNT">
                                            {{#each mallAccountSelectBoxOptions}}
                                            <option value="{{value}}">{{label}}</option>
                                            {{/each}}
                                        </select>
                                    </span>
                                </div>
                            </div>
                            {{/if}}
                        </div>
                    </div>
                </details>
            </section>
        </pay-method-selector>

        <!-- 결제 정보-->
        <payment-info>
            <section class="order-sheet__payment-info">
                <div class="price-tag">
                    <dl class="price-tag__details">
                        <dt>상품금액 합계</dt>
                        <dd>
                            <p class="order-sheet__price-wrap">
                                <strong class="font-montserrat order-sheet__price" slot="paymentInfo">
                                    {{convertToKoreanCurrency paymentInfo.totalStandardAmt}}
                                </strong>
                                원
                            </p>
                        </dd>
                        <dt>할인금액 합계</dt>
                        <dd>
                            <span class="aurora__formula-symbol">-</span>
                            <p class="order-sheet__price-wrap">
                                <strong class="font-montserrat order-sheet__price" slot="paymentInfo">
                                    {{convertToKoreanCurrency paymentInfo.totalDiscountAmt}}
                                </strong>
                                원
                            </p>
                        </dd>
                        <dt>적립금 사용 금액 합계</dt>
                        <dd>
                            <span class="aurora__formula-symbol">-</span>
                            <p class="order-sheet__price-wrap">
                                <strong class="font-montserrat order-sheet__price" slot="paymentInfo">
                                    {{convertToKoreanCurrency paymentInfo.usedAccumulationAmt}}
                                </strong>
                                원
                            </p>
                        </dd>
                        <dt>배송비 합계</dt>
                        <dd>
                            <span class="aurora__formula-symbol">+</span>
                            <p class="order-sheet__price-wrap">
                                <strong class="font-montserrat order-sheet__price" slot="paymentInfo">
                                    {{convertToKoreanCurrency paymentInfo.totalDeliveryAmt}}
                                </strong>
                                원
                            </p>
                        </dd>
                        <dt class="total-price">총 결제금액</dt>
                        <dd>
                            <span class="aurora__formula-symbol">=</span>
                            <p class="order-sheet__price-wrap">
                                <strong class="font-montserrat order-sheet__price order-sheet__total-price" slot="paymentInfo">
                                    {{convertToKoreanCurrency paymentInfo.paymentAmt}}
                                </strong>
                                원
                            </p>
                        </dd>
                    </dl>
                    <div class="order-sheet__total-accumulation">
                        예상적립
                        <strong class="font-montserrat">{{convertToKoreanCurrency paymentInfo.totalAccumulation}}</strong>
                        M
                    </div>
                </div>
            </section>
        </payment-info>

        <!-- 약관 -->
        <order-sheet-terms>
            <div>
                <ul class="l-page order-sheet__terms" slot="orderSheetTerms">
                    {{#each orderSheetTerms}}
                    <li class="order-sheet__term-checker">
                        <label class="form-check form-check--sm">
                            <input type="checkbox" shopby-on:change="CHANGE_CHECK_ORDER_SHEET_TERM" shopby-term-id="{{termId}}" />
                            <span class="form-check__label term-checker-label">{{getMandatoryLabel required}} {{termsName}}</span>
                        </label>

                        {{#if contents}}
                        <button type="button" class="btn" shopby-action="SHOW_TERM_DETAIL" shopby-term-id="{{termId}}">보기</button>
                        {{/if}}
                    </li>
                    {{/each}}
                </ul>
            </div>
        </order-sheet-terms>
    </div>

    <payment-info>
        <nav class="order-sheet__pay-bottom">
            <p>
                <span class="order-sheet__pay-bottom-title">총 결제금액</span>
                <br />
                <span class="order-sheet__pay-bottom-price">
                    <strong class="font-montserrat" slot="paymentInfo">{{convertToKoreanCurrency paymentInfo.paymentAmt}}</strong>
                    원
                </span>
            </p>
            <button type="button" class="btn btn--fill-point btn-xl order-sheet__pay-btn" shopby-action="CLICK_PAY_BTN">결제 하기</button>
        </nav>
    </payment-info>
</div>

/* 여기에 스타일 코드를 작성해주세요. */