@charset "utf-8";

.widtype2 .sub-title {margin-bottom: clamp(35px, calc( 80 / var(--inner) * 100vw ), 80px);}

/* 로그인 */
.login-area {max-width:470px; margin:0 auto;}
.login-tab {text-align:center; border-bottom:4px solid var(--color-primary); margin-bottom:50px;}
.login-tab ul {display:flex; padding:0 2px;}
.login-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px; border-radius:10px 10px 0 0;}
.login-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:60px;}
.login-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.login-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.login-tab ul li.active a {color:var(--color-primary); font-weight:700;}
.login-content .group {margin-bottom:8px;}
.login-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.login-content .links {display:flex; justify-content:space-between; margin-top:20px; font-size:14px; color:#454545; font-weight:500; line-height:1.5em;}
.login-content .links a:hover {text-decoration:underline;}
.login-content .links .bar {display:inline-block; vertical-align:middle; margin:-.2em 12px 0; width:1px; height:16px; background:#ddd;}
.login-content .btn-pack {display:block; width:100%; margin-top:10px; font-size: var(--font-size-18) !important; border-radius: 60px; color: #686868;}
.login-content .btn-pack.focus {margin-top:30px;}
.login-content .btn-pack.xlarge {font-weight:500;}

.sns-login {text-align:center; margin-top:50px;}
.sns-login .tit {position:relative; color:#878787;  font-weight:400; line-height:1.3em; margin-bottom:60px;}
.sns-login .tit:before {content:""; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:1px; background:#ddd;}
.sns-login .tit span {display:inline-block; position:relative; padding:0 30px; background:#fff;}
.sns-login a {display: block;}
.snsflx {display: flex; align-items: flex-end; justify-content: space-between; }
.snsflx .textbx {text-align: left;}
.snsflx .textbx .title {font-size: var(--font-size-20); font-weight: 700; margin-bottom: clamp(20px, calc( 48 / var(--inner) * 100vw ), 48px);}
.snsflx .textbx .dec {font-size: var(--font-size-20); font-weight: 400; line-height:1.4em; color:#505050;}
.snsflx .linkbx {display: flex;gap: clamp(5px, calc( 20 / var(--inner) * 100vw ), 20px);}
.snsflx .linkbx img {width: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); aspect-ratio: 1 / 1;}


/* 약관동의 */
.agree-wrap {max-width:980px; margin:0 auto 60px;}
.agree-wrap .group {margin-top:40px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .agree-tit {color:#333; font-size:20px; font-weight:600; line-height:1.3em;}
.agree-wrap .agree-tit .checkbox label:before {margin-top:-.02em; width:24px; height:24px; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; border:2px solid #ccc; border-radius:100%;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:var(--color-primary); border-color:var(--color-primary); background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:16px 20px; border:1px solid #ddd; overflow:auto;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:14px;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:14px; font-weight:400; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:400;}

.terms-wrap {font-weight:400; color:#666; line-height:1.75em;}
.terms-wrap .sec {margin-bottom:40px;}
.terms-wrap .sec h3 {color:#222; font-size:1.1em; font-weight:700; margin-bottom:7px;}
.terms-wrap .sec p {margin-bottom:1em;}
.terms-wrap .sec strong {font-weight:700;}
.terms-wrap .sec ol li {padding-left:1em; text-indent:-1em;}
.terms-wrap .sec ol li ol li {padding-left:1.35em; text-indent:-1.35em;}
.terms-wrap .policy-contact {display:flex; padding:20px 0; background:#fafafa; border:1px solid #e5e5e5; margin-bottom:1em;}
.terms-wrap .policy-contact dl {flex:1; padding:0 20px; border-left:1px solid #e5e5e5;}
.terms-wrap .policy-contact dl:first-child {border-left:0;}
.terms-wrap .policy-contact dt {font-weight:500; color:#333; margin-bottom:12px;}

/* 회원가입 */
.join-form {max-width:900px; margin:0 auto;}
.join-form .required {color:#fd8239}
.join-form .join-form-txt {color:#505050; font-weight:400; line-height:1.4em; margin-bottom:12px;}
.join-form table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #868686; font-size:16px; line-height:1.5em;}
.join-form table th {padding:12px 15px; border:1px solid #ddd; background:#fafafa; font-weight:700; color:#333;}
.join-form table td {padding:12px 20px; border:1px solid #ddd; color:#505050;}
.join-form tr th:first-child,
.join-form tr td:first-child {border-left:0;}
.join-form tr th:last-child,
.join-form tr td:last-child {border-right:0;}
.join-form input[readonly] {background-color:#fff; color:#505050;}
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.join-form + .buttons {margin-top:50px;}
.input-txt {display: flex;align-items: center; min-height:clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px) ;   color: var(--color-body);}

.certification-list {margin-bottom: clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px);}
.certification-item {display: flex;flex-wrap: wrap;}
.certification-item:first-child {margin-bottom: clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px); padding-bottom:clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px); border-bottom: 1px solid #ddd;}
.certification-item .titlebx {flex: 1 0 clamp(220px, calc( 370 / var(--inner) * 100vw ), 370px); max-width: clamp(220px, calc( 370 / var(--inner) * 100vw ), 370px); color:#242424; font-size: var(--font-size-20);}
.certification-item .titlebx .title {font-weight: 700;  font-size: var(--font-size-20)}
.certification-item .titlebx .dec {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);} 


.certification-item .certifibx {flex: 1 0 auto; width: 1%;}
.certification-item .snsjoin-list {display: flex; gap:clamp(5px, calc( 15 / var(--inner) * 100vw ), 15px);}
.certification-item .snsjoin-item {flex: 1;}
.certification-item .snsjoin-item .link {display: flex;align-items: center;justify-content: center; width: 100%; height: clamp(50px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 8px; font-size:var(--font-size-20); font-weight: 500;}
.certification-item .snsjoin-item:nth-child(1) .link {background: #F9E000;}
.certification-item .snsjoin-item:nth-child(2) .link {background: #2DB400; color: #fff;}
.certification-item.ty2 {align-items: center;}
.certification-item .snsjoin-item.wid-100 {flex: 1 0 100%;}
.certification-item .snsjoin-item.wid-100 .link {border: 1px solid #ddd; background: #fff;}



.leavebox {margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.leavebox .link-leave {color: #454545; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; text-decoration: underline;}

/* 가입완료 */
.join-complete {text-align:center;}
.join-complete .tit {color:var(--color-primary); font-size:28px; font-weight:700; line-height:1.4em; margin-bottom:30px;}
.join-complete .txt {color:#333; font-size:18px; line-height:1.8em;}
.join-complete .icon {width:180px; height:180px; background:var(--color-primary) url("../images/member/complete.png") 50% 50% no-repeat; border-radius:100%; margin:36px auto 45px;}
.join-complete .buttons {margin:0;}
.join-complete .buttons {max-width: 470px; margin:0 auto;}
.join-complete .buttons .btn-pack {width: 100%; border-radius:60px; font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.join-complete .buttons .btn-pack + .btn-pack {margin-top: 10px;}


/* 게정찾기 */
.find-area {max-width:470px; margin:0 auto;}
.find-tab {text-align:center; border-bottom:4px solid var(--color-primary); margin-bottom:50px;}
.find-tab ul {display:flex; padding:0 2px;}
.find-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px; border-radius:10px 10px 0 0;}
.find-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:60px;}
.find-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.find-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.find-tab ul li.active a {color:var(--color-primary); font-weight:700;}
.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.find-content .btn-pack {display:block; width:100%; margin-top:10px;}
.find-content .btn-pack.focus {margin-top:30px;}
.find-content .btn-pack.xlarge {font-weight:500;}
.find-result {text-align:center; padding:34px 42px; color:#505050; font-size:18px; font-weight:400; line-height:1.75em; background:#fafafa; border-top:2px solid var(--color-primary); border-bottom:1px solid #ddd;}
.find-result h4 {font-size:22px; font-weight:700; line-height:1.4em; margin-bottom:20px;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:var(--color-primary); font-size:30px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.member-leave .txt {text-align:center; color:#505050; line-height:1.7em; margin-bottom:40px;}
.member-leave .txt .tit {color:#333; font-size:20px; line-height:1.5em; margin-bottom:15px;}
.member-leave .form {max-width:470px; margin:0 auto 40px; padding:50px; color:#666; font-size:16px; line-height:1.5em; background:#f9f9f9; border:1px solid #e5e5e5; border-radius:10px;}
.member-leave .form .group {display:flex; align-items:center; margin-bottom:20px;}
.member-leave .form .group:last-child {margin-bottom:0;}
.member-leave .form .group .label-tt {width:90px; color:#222; font-weight:700;}
.member-leave .form .group .text-id,
.member-leave .form .group .input {flex:1 1 auto; min-width:0; width:1%;}

.mem-buttons .btn-pack {min-width:clamp(140px, calc( 300 / var(--inner) * 100vw ), 300px) !important; font-size: var(--font-size-18) !important;}


.cart-all-select {display: flex; align-items: center; margin:0  -15px; color:#686868; font-size:var(--font-size-18); font-weight:600; line-height:1.3em;margin-bottom:15px;}
.cart-all-select .select-item {padding: 0 15px;position: relative;}
.cart-all-select .select-item:first-child {color: var(--color-secondary);}
.cart-all-select .select-item:not(:last-child):after {position: absolute; content: ''; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: #dddd;}

.shop-table {margin-bottom:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); border-top: 2px solid #242424;}
.shop-table ul li {display:flex; align-items:center; padding:clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-bottom:1px solid #ddd;}
.shop-table.ty2 ul li {padding: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.shop-table ul li .order-image-link {display: flex; align-items: center;flex:1 1 auto; min-width:0; width:1%; margin-right: 10px;}
.shop-table .order-check {width:clamp(35px, calc( 55 / var(--inner) * 100vw ), 55px);}
.shop-table .order-imgbx {flex: 1 0 clamp(80px, calc( 180 / var(--inner) * 100vw ), 180px); max-width: clamp(80px, calc( 180 / var(--inner) * 100vw ), 180px); margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.shop-table .order-image {position:relative; padding-bottom:100%; overflow:hidden;border-radius: 16px;}
.shop-table .order-image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}

.shop-table .order-title {letter-spacing: -0.03em;}
.shop-table .order-title .tit {font-size:var(--font-size-20); font-weight:500; line-height:1.5em; margin-bottom:5px;}
.shop-table .order-title .opt {color:#686868; font-weight:400; line-height:1.5em; }
.shop-table .order-title .quantity {margin-top:clamp(15px, calc( 34 / var(--inner) * 100vw ), 34px);font-size:var(--font-size-15); color: var(--color-body);}
.shop-table .quantityflx {display: flex; align-items: center;width: 30%;}

.shop-table .order-quantity {flex: 1 0 clamp(75px, calc( 96 / var(--inner) * 100vw ), 96px); max-width: clamp(75px, calc( 96 / var(--inner) * 100vw ), 96px); margin-right: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); text-align:center;}
.shop-table .order-quantity .input {width:100%; height:30px !important; padding:0; font-size:var(--font-size-13); line-height:1.5em; text-align:center; margin-bottom:4px;}
.shop-table .order-quantity .btn-pack {display:block; width:100%;background: var(--color-secondary);color: #fff;}
.shop-table .order-qnt {width:100px; text-align:center;}
.shop-table .order-price {font-weight:500;  font-size: var(--font-size-20); font-weight: bold;}

.shop-buttons .btn-pack {border-radius: 60px;font-size: var(--font-size-18) !important; height: clamp(42px, calc( 54 / var(--inner) * 100vw ), 54px) !important; line-height: clamp(40px, calc( 52 / var(--inner) * 100vw ), 52px) !important;}

.shop-table .order-delete {width:20px; text-align:right; }
.shop-table .order-btn {width:95px; text-align:center; margin-left:20px;}
.shop-table .order-btn p {margin:4px 0;}
.shop-table .order-btn strong {font-weight:500;}
.shop-table .order-btn .btn-pack.small {display:block; margin:4px auto; width:100%; padding:0;}
.shop-table .ico-delete {position:relative; vertical-align:middle; margin-top:-.2em; display:inline-block; overflow:hidden; text-indent:-999em; width:20px; height:20px; overflow:hidden;}
.shop-table .ico-delete:before, 
.shop-table .ico-delete:after {content:""; position:absolute;top:0;left:8px; height:100%;width:2px;background-color:#999;}
.shop-table .ico-delete:before {transform:rotate(45deg);}
.shop-table .ico-delete:after {transform:rotate(-45deg);}


/* 주문정보 설명 */
.order-info {margin:20px 0; color:#666; font-size:14px; line-height:24px;}
.order-info em {color:#ed1c24; font-style:normal;}
.order-desc {margin-top:40px; padding:24px; background:#f7f7f7; border-radius:6px; color:#666; font-size:14px; line-height:1.75em;}
.order-complete {margin-bottom:20px; padding:24px; background:#fafafa; border-radius:6px; line-height:1.3em;}
.order-complete .item {display:inline-block; margin-right:40px;}
.order-complete .item strong {margin-left:5px;}
.order-complete .item:last-child {margin-right:0;}

.order-date:first-child {margin-top:20px;}
.order-date {margin:50px 6px 10px; font-size:15px; line-height:1.3em;}
.order-date:after {content:""; display:block; clear:both;}
.order-date strong {margin-left:10px;}
.order-date a {float:right; color:#888; font-size:14px;}
.order-date a:after {content:"+"; display:inline-block; margin:-.2em 0 0 6px; vertical-align:middle; color:#2c2c2c; font-size:1.5em; font-weight:700; line-height:1em;}
.order-date .bar {color:#ddd; margin:0 12px; vertical-align:top; font-weight:100;}

/* 주문정보 테이블 */
.order-info-title {margin-bottom:10px; margin-top:50px;}
.order-info-title:after {content:" "; display:block; clear:both;}
.order-info-title h3 {float:left; color:#333; font-size:20px; font-weight:700; line-height:1.3em;}
.order-info-title .chk {float:left; margin:6px 0 0 20px; font-family:dotum; font-size:14px; line-height:16px;}
.order-info-table {width:100%; border-collapse:collapse; border-spacing:0px; margin-bottom:50px;}
.order-info-table tbody th {padding:7px 15px; height:54px; background:#fafafa; border:1px solid #eee; font-size:14px; font-weight:500; color:#2c2c2c; text-align:left;}
.order-info-table tbody td {padding:7px 15px; background:#fff; border:1px solid #eee; color:#505050;}
.order-info-table tbody td * {vertical-align:middle;}
.order-info-table tbody td .input-point {padding:0 5px; height:30px; border:1px solid #ccc; background:#fafafa; line-height:28px;}
.order-info-table tbody td .txt {color:#4d6ccd; font-size:11px; margin-top:4px;}
.order-info-table tbody td .point {color:#ff0000;}
.order-info-table tbody td .radiobox {margin-right:25px;}
.guest-private-agree {text-align:center; margin-bottom:50px;}
.guest-private-agree .scroll-box {position:relative; height:120px; border:1px solid #d8d8d8; text-align:left; font-size:14px; line-height:18px; background:#f7f7f7; color:#666; padding:10px; margin-bottom:20px; overflow:auto;}

/* 전체금액 */
.total-price {display:flex; justify-content:space-between; background:#F8F8F8; border-radius:6px; color:#686868; padding:40px 40px; font-size:16px; font-weight:400; line-height:1.4em; margin-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.total-price h3 {width:50%; color:#242424; font-size:var(--font-size-28); font-weight:700; line-height:1.3em;}
.total-price ul {width:50%;}
.total-price ul li {display:flex; justify-content:space-between; align-items:center; padding:18px 30px; border-bottom:1px solid #dfdfdf; overflow:hidden; font-weight: 500;}
.total-price ul li:first-child {padding-top:0;}
.total-price ul li:last-child {padding-bottom:0; border-bottom:0; color:#242424; font-weight:700;}
.total-price ul li:last-child .price {font-weight:700; font-size: var(--font-size-18);}
.total-price ul li .price {text-align:right;}
.total-price + .buttons {margin-top:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);} 
.shop-table + .buttons {margin-top:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);} 

/* 구매내역 */
.order-list-wrap {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.order-header {display: flex; justify-content: space-between; align-items: center; padding: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #F8F8F8;}
.orderinfo {display: flex; gap: clamp(10px, calc( 45 / var(--inner) * 100vw ), 45px); color: var(--color-body);}
.orderinfo .orderinfo-number {display: flex; align-items: center; font-size: var(--font-size-18);}
.orderinfo strong {margin-left: 10px; font-weight: 600; color: #242424;}
.order-detail-link {display: flex; align-items: center;}
.order-detail-link .link-detail {display: flex; align-items: center; color: #686868; font-size: var(--font-size-16);}
.order-detail-link .ico-plus {display: inline-block; margin-left: 15px; margin-bottom: clamp(1px, calc( 3 / var(--inner) * 100vw ), 3px); font-size: var(--font-size-18); font-weight: 700; line-height: 1;color: #242424;}
.order-list-wrap .shop-table {margin-bottom: 0; border-top: 0;}
.order-list-wrap .shop-table .quantityflx {width: 20%;}

/* 구매내역 상세 */
.order-header {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) ;}
.shop-table .quantityflx.ty2 {display: flex; align-items: center; justify-content: space-between; gap:clamp(20px, calc( 90 / var(--inner) * 100vw ), 90px); margin-right: 0; width: auto;}
.delivery-among {text-align: center; width:clamp(85px, calc( 112 / var(--inner) * 100vw ), 112px);}
.delivery-among .tit {display: block; margin-bottom:6px; font-size: var(--font-size-13); font-weight: 600;}
.delivery-among .delivery-status {display: flex; flex-direction: column; gap: 6px;}
.delivery-among .delivery-status .status {display: inline-block; padding:10px; border-radius: 4px; font-size: var(--font-size-13); line-height: 1.2em; width: 100%; background: #F8F8F8; color: #686868;border: 1px solid #F8F8F8; text-align: center;}
.delivery-among .delivery-status .status.check {background: var(--color-secondary); color: #fff;}
.delivery-among .delivery-status .status.complete {background: transparent;border: 0;}
.delivery-among .delivery-status .status.apply {background: #F8F8F8; border-color: #F8F8F8; color: #686868;} 

.detail-wrap .sec-title {margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size:var(--font-size-24); font-weight: 600; line-height: 1.2em;}
.detail-wrap + .detail-wrap {margin-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.detail-table {border-top: 2px solid #242424;}
.detail-table-item {display: flex; align-items: center; flex-wrap: wrap; padding: 14px clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); border-bottom: 1px solid #ddd;}
.detail-table-item .name {width: clamp(110px, calc( 158 / var(--inner) * 100vw ), 158px); font-size: var(--font-size-18); padding-right: 10px; font-weight: 600;}
.detail-table-item .value {flex: 1 ;  color: var(--color-body);  }
.detail-wrap .input {border-radius: 8px;}
.detail-table-item .value .btn-pack {border-radius: 8px;}

.order-detail-wrap .shop-buttons {margin-top:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px) ;}
.payment-complete .shop-buttons {margin-top:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px) ;}

/* 주문하기 */
.payment-step {display: flex; align-items: center; justify-content: space-between; max-width: 390px; width: 100%; margin: 0 auto clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); position: relative;}
.payment-step:after {content: ''; position: absolute; top:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); left: 50%; transform: translatex(-50%); width: 90%; height: 1px; background: var(--color-secondary);}
.payment-step .step-item {display: flex; flex-direction: column; align-items: center; gap: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.payment-step .step-circle {width: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); height: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius: 50%; border: 1px solid var(--color-secondary); background: #fff; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;}
.payment-step .step-item.active .step-circle {background: var(--color-secondary); border-color: var(--color-secondary);}
.payment-step .step-number {font-size: var(--font-size-18); font-weight: 600; color: var(--color-secondary); line-height: 1;}
.payment-step .step-item.active .step-number {color: #fff;}
.payment-step .step-label {font-size: var(--font-size-18); color: #C3C3C3; font-weight: 600; line-height: 1;}
.payment-step .step-item.active .step-label {color: var(--color-secondary);}


.payment-wrap {display: flex; gap: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); flex-direction: row-reverse; align-items: flex-start; flex-wrap: wrap;}
.payment-wrap .payment-table {flex: 1 ;}
.payment-wrap .shop-table .quantityflx {width: auto; margin-right: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.payment-wrap .shop-table .order-quantity {margin-right: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.paymenet-paybx {width: clamp(220px, calc( 300 / var(--inner) * 100vw ), 300px); position: sticky; top: calc(var(--header-gnb) + var(--header-logo) + 10px) ; z-index: 10;}
.payment-summary {background: #fff; border-radius: 16px; padding: clamp(20px, calc( 25 / var(--inner) * 100vw ), 25px); border: 1px solid #ddd;}
.payment-summary .total-txt {margin-bottom:clamp(18px, calc( 35 / var(--inner) * 100vw ), 35px); font-size: var(--font-size-18); font-weight: 600; color: #242424;}
.payment-summary .summary-item {display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); color: #686868;}
.payment-summary .summary-label {font-weight: 500; color: var(--color-body);}
.payment-summary .summary-total {padding-top:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); margin-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); border-top: 1px solid #ddd; text-align: right;}
.payment-summary .summary-total .summary-label {font-size: var(--font-size-18);}
.payment-summary .summary-total .summary-value {margin-top: 12px; font-size: var(--font-size-24); color: #000; font-weight: bold;}
.payment-summary .summary-checkbx {margin-top: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); font-size: var(--font-size-16); color: #686868; line-height: 1.56;}
.payment-summary .summary-button {margin-top: clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); }
.payment-summary .summary-button .btn-pack {width: 100% !important; border-radius: 80px; font-size: var(--font-size-18) !important;}

.payment-table {padding-top:20px;}
.payment-list + .payment-list {margin-top:10px;}
.payment-list {display: flex; gap:10px; }
.payment-item {flex: 1;}
.payment-item .inflx {display: flex;flex-wrap: wrap;align-items: center; flex-wrap: wrap; padding:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); border: 1px solid #ddd; border-radius: 8px;}
.payment-item .title {width:clamp(100px, calc( 190 / var(--inner) * 100vw ), 190px); font-size: var(--font-size-18); font-weight: 600;}
.payment-item .description {flex: 1;}
.payment-item .btn-pay {display: flex;align-items: center;justify-content: center;font-size: var(--font-size-18); font-weight: 600; color: #242424; border: 1px solid #ddd; border-radius: 8px; height: clamp(50px, calc( 70 / var(--inner) * 100vw ), 70px);}
.payment-item .btn-pay img {width: clamp(46px, calc( 74 / var(--inner) * 100vw ), 74px);}
.wid-auto {width: auto !important;}

/* 쿠폰/포인트 */
.coupon-wrap {display: flex; flex-direction: column; gap: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);}
.coupon-section-title {font-size: var(--font-size-24); font-weight: 600; color: #242424; margin-bottom: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);}
.coupon-register-box {background: #f8f8f8; border-radius: 8px; padding: var(--padding-40) var(--padding-20) ;}
.coupon-register-inner { display: flex; gap: clamp(5px, calc( 16 / var(--inner) * 100vw ), 16px); align-items: center; max-width: 840px; margin: 0 auto;}
.coupon-input-wrap {flex: 1;}
.coupon-input {width: 100%; border-radius: 8px;}
.coupon-register-btn {width: clamp(80px, calc( 160 / var(--inner) * 100vw ), 160px); height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); background: var(--color-primary) ; color: #fff ; border-radius: 8px; font-size: var(--font-size-16); font-weight: 400; border: 0;}
.coupon-empty {display: flex; flex-direction: column; gap: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); align-items: center; padding-top: var(--padding-40); text-align: center;}
.coupon-empty-icon {width: clamp(70px, calc( 160 / var(--inner) * 100vw ), 160px);aspect-ratio: 1 / 1;}
.coupon-empty-icon img {width: 100%; height: 100%; object-fit: contain;}
.coupon-empty-text {margin-top: var(--padding-20); color: #686868; line-height: 1.75; text-align: center;}
.coupon-notice-list {font-size: var(--font-size-16); }
.coupon-notice-list li {color: #686868; line-height: 1.75; padding-left: 0.7em; text-indent: -0.7em;}
.coupon-divider {height: 1px; background: #ddd; width: 100%;}
.coupon-point-box {background: #f8f8f8; border-radius: 8px; padding: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px) 10px;}
.coupon-point-inner {display: flex; gap: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); align-items: center; justify-content: center;}
.coupon-point-label {font-size: var(--font-size-16); color: var(--color-body); line-height: 1;}
.coupon-point-value {font-size: var(--font-size-32); font-weight: 600; color: var(--color-primary); line-height: 1;}
.point-history-content {display: flex; flex-direction: column; gap: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.point-history-list {display: flex; flex-direction: column; border-top: 1px solid #ddd;}
.point-history-item {display: flex; justify-content: space-between; align-items: center; padding: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 0; border-bottom: 1px solid #ddd;}
.point-history-left {display: flex; align-items: center; gap: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); flex: 1;}
.point-history-date {color: var(--color-body); line-height: 1; margin-left: var(--padding-20); min-width: clamp(70px, calc( 80 / var(--inner) * 100vw ), 80px);}
.point-history-info {display: flex; gap: var(--padding-20); align-items:center; flex: 1;}
.point-history-badge {display: inline-block; padding: clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px) clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); min-width: clamp(40px, calc( 56 / var(--inner) * 100vw ), 56px); border-radius: 4px; line-height: 1; font-weight: 600;  text-align: center;}
.point-history-badge.earn {background: #E7E2DB; color: var(--color-primary);}
.point-history-badge.use {background: #F5F5F5; color: #ABABAB;}
.point-history-text {flex: 1;}
.point-history-desc {font-size: var(--font-size-20); color: var(--color-body); line-height: 1; font-weight: 600;}
.point-history-period { margin-top:10px; font-size: var(--font-size-14); color: #A8A8A8; line-height: 1;}
.point-history-amount {font-size: var(--font-size-20); font-weight: bold; line-height: 1; text-align: right;}
.point-history-amount.earn {color: var(--color-primary);}
.point-history-amount.use {color: var(--color-body);}

/* 주문결제 결제수단 및 추가 수정 */
.payment-method-group {display: flex; gap: clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); }
.payment-method-item {flex: 0 0 clamp(140px, calc( 190 / var(--inner) * 100vw ), 190px); border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; transition: all 0.3s;}
.payment-method-item.active {border-color: var(--color-primary); background: rgba(135, 112, 74, 0.04);}
.payment-method-content {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px); padding: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 10px; text-align: center;}
.payment-method-title {font-size: var(--font-size-18); font-weight: 600; color: #242424; line-height: 1; }
.payment-method-icon {width: clamp(28px, calc( 34 / var(--inner) * 100vw ), 34px); aspect-ratio: 1 / 1;}
.payment-method-icon img {width: 100%; height: 100%; object-fit: contain;}
.payment-method-details {display: flex; flex-direction: column; gap: clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); margin-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.payment-detail-item {display: flex; align-items: center; flex-wrap: wrap; }
.payment-detail-item .name {width: clamp(90px, calc( 95 / var(--inner) * 100vw ), 95px); font-size: var(--font-size-18);  font-weight: 600;}
.payment-detail-item .value {flex: 1; max-width: 480px;}
.payment-detail-item .value .input {border-radius: 8px;}
.payment-detail-item .value .select {width: 100%;}
.coupon-item {flex-direction: column; align-items: flex-start !important;}
.coupon-item .coupon-label {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 500; width: 100%;}
.coupon-item .coupon-label .point-txt {font-size: 12px; font-weight: 400;}
.coupon-item .coupon-inputbx {display: flex; flex-wrap: wrap; gap:var(--padding-10); width: 100%;}
.coupon-item .coupon-input-wrap {flex: 1;}
.coupon-item .coupon-input-wrap .input {height: 34px !important;}
.coupon-item .coupon-btn {display: inline-flex;align-items: center;justify-content: center; padding:10px; min-width:48px; height: 34px; font-size: var(--font-size-14); font-weight: 500; color: var(--color-body); line-height: 1; background: transparent; border-radius: 8px; border: 1px solid #505050;}
.point-use-wrap {margin-top:12px; text-align: right; width: 100%;}
.point-use-wrap .point-use {display: inline-block; font-size:12px; color: var(--color-primary); text-decoration:underline;}