@charset "utf-8";



/* 결제 */


.payment-method-items {display:flex; gap: 12px; margin-top: 20px; }
.payment-method-item {position:relative; width: calc(100%/3 - 8px); display:flex; flex-direction:column; align-items:center; padding:16px 5px; background:#fff; outline:1px solid #ddd; border:0; font-size:14px; font-weight:500; line-height:1.3em; border-radius: 5px; }
.payment-method-item span {position:relative; color: #242424; font-size: var(--font-size18); font-weight: 600; }
.payment-method-item svg {position:relative; width:32px; height:auto; margin-top:20px; color:#121212;}
.payment-method-item.active {position:relative; outline:2px solid var(--color-primary); z-index:2;}
.payment-method-item.active:before {content:''; position:absolute; inset:0; background:var(--color-primary); }
.payment-method-item.active span { color: #fff; }
.payment-method-item.active svg { color: #fff;}

.payment-method-bank {margin-top:20px; max-width:100%;}
.payment-method-input {display:flex; align-items:center; margin-bottom:10px;}
.payment-method-input:last-child {margin-bottom:0;}
.payment-method-input label {min-width:70px; font-size:15px; font-weight:500; margin-right:10px;}
.payment-method-input .input {width:100%;}

/* 결제 완료 */
.order-complete22 {display:flex; flex-direction:column; justify-content:center; min-height:40vh; padding:30px 0; text-align:center;}
.order-complete22 lord-icon {display:block; margin:0 auto 1em; width:120px; height:120px;}
.order-complete22 h2 {font-size:24px; line-height:1.5em; font-weight:700; color:#2c2c2c;}
.order-complete22 p {margin-top:6px; line-height:1.5em; font-size:16px; font-weight:500; color:#505050;}
.order-complete22 .btns {display:flex; justify-content:center; gap:10px; margin-top:50px;}
.order-complete22 .btn-pack.large {min-width:180px;}


.cart-data-empty {display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:40vh; padding:30px 0; text-align:center;}
.cart-data-empty lord-icon {display:block; margin:0 auto 1em; width:80px; height:80px;}
.cart-data-empty h2 {font-size:22px; line-height:1.5em; font-weight:700; color:#2c2c2c;}
.cart-data-empty p {margin-top:6px; line-height:1.5em; font-size:15px; font-weight:500; color:#767676;}
.cart-data-empty .btns {display:flex; justify-content:center; gap:10px; margin-top:50px;}
.cart-data-empty .btn-pack.large {min-width:180px;}

/* .use-coupon { display: flex; } */
/* .use-coupon ul { display: flex; } */
.use-coupon { padding-top: 20px; }
.use-coupon ul li {display:flex; margin-bottom:20px; align-items: center;}
.use-coupon ul li:last-child {margin-bottom:0;}
.use-coupon-input {width:30px; }
.use-coupon input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; appearance: none;
    -webkit-appearance: none; width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;}
.use-coupon input[type="radio"]:checked {
    border-color: var(--color-primary);
  }
.use-coupon input[type="radio"]:checked::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--color-primary); /* 안쪽 채우기 색상 */
    border-radius: 50%;
  }
.use-coupon-content {position:relative; flex:1 1 auto; min-width:0; width:1%; font-size:14px; line-height:1.5em; border: 1px solid #ddd; border-radius: 5px; padding: 15px 25px;}
.use-coupon-price { color:var(--color-primary); font-size:14px; font-weight:500; line-height:1.5em;}
.use-coupon-title {color:#2c2c2c; font-size: var(--font-size20); font-weight: 600; line-height: 1.5em; margin: 8px 0;}
.use-coupon-text {margin-top:2px; color:#767676;}
.use-coupon-info {position:absolute; top:10px; right:10px; color:#aaa; font-size: 12px; font-weight: 400; }
.use-coupon-info .bar {display:inline-block; margin:-.2em 6px 0; width:1px; height:14px; background:#ddd; vertical-align:middle;}

.use-point-input {display:flex; gap:10px;}
.use-point-input .input {flex:1 1 auto; min-width:0; width:1%; max-width:220px;}
.use-point-input .btn-pack.medium {padding:0 16px; font-size:14px;}
.use-point-text {font-size:1rem; line-height:1.5em; margin-top:10px;}
.use-point-text strong {margin-left:5px; font-weight:600;}