/*-------------------- page_bg_h --------------------*/
/*-- cart_step --*/
.cart_step {
    margin-top: 20px;
    display: flex;
    gap: 32px;
}
.cart_step li {
    font-size: var(--ft18);
    font-weight: var(--semi-bold);
    color: var(--gray-600);
    opacity: .3;
}
.cart_step li.is-active {
    opacity: 1;
}

.page_flex {
    display: flex;
    gap: 100px;
}

/*-------------------- cart --------------------*/
.page_l {
    width: 100%;
}

/*-- cart_top --*/
.cart_top {
    width: 100%;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn_list {
    display: flex;
    gap: 20px;
}
.btn_list button {
    font-size: var(--ft14);
    font-weight: var(--medium);
    color: var(--gray-300);
}

/*-- cart_list --*/
.cart_list {
    width: 100%;
    border-top: 1px solid var(--gray-300);
}
.cart_item {
    padding: 30px 0;
    padding-left: 40px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}
.cart_item .chk_box {
    position: absolute;
    top: 30px;
    left: 0;
}
.item_info {
    margin-top: 0;
    align-items: center;
}
.product_item {
    flex: 1;
}
.price_num {
    display: flex;
    align-items: center;
    gap: 4px;
}
.num_btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background-color: var(--gray-100);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.num_btn img {
    width: 16px;
    height: 16px;
}
.price_num input {
    width: 60px;
    height: 36px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.price_num input::-webkit-inner-spin-button,
.price_num input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.item_close {
    width: 24px;
    height: 24px;
    margin-left: 40px;
    cursor: pointer;
}

.cart_item.is-soldout .price_num {
    pointer-events: none;
}

/*-- sec_h --*/
.sec_h {
    width: 100%;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gray-300);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sec_title {
    font-size: var(--ft18);
    font-weight: var(--medium);
    color: var(--gray-600);
}

/*-------------------- payment --------------------*/
.payment_page section {
    margin-bottom: 100px;
}
.payment_page section:last-child {
    margin-bottom: 0;
}
.form_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.form_list .flex {
    grid-column: 1 / -1;
}
.input_box {
    margin-bottom: 0;
}


/*-- discount_content --*/
.discount_box {
    width: 100%;
    height: 65px;
    padding: 0 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.coupon_box {
    margin-bottom: 10px;
}
.discount_label {
    font-size: var(--ft16);
    color: var(--gray-600);
    flex-shrink: 0;
}
.coupon_status {
    display: flex;
    align-items: center;
    gap: 6px;
}
.coupon_status i {
    width: 14px;
    height: 14px;
    display: block;
    background: url(/images/right.svg) no-repeat center/contain;
}
.point_input_wrap {
    display: flex;
    gap: 10px;
}
.point_input_r {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
    text-align: right;
}
.point_input_r input {
    text-align: right;
}
.point_input_r input::placeholder {
    color: var(--gray-300);
}
.point_unit {
    color: var(--gray-300);
}
.point_all_btn {
    width: 120px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--gray-100);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--ft16);
    color: var(--gray-600);
    text-align: center;
}

.point_info {
    margin-top: 24px;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 14px;
}
.point_info .point_available {
    display: flex;
    align-items: center;
    gap: 8px;
}
.point_info_btn {
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: relative;
}
.point_notice {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background-color: var(--gray-500);
    font-size: var(--ft13);
    font-weight: var(--medium);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    text-wrap: nowrap;
}
.point_info .point_balance {
    display: flex;
    align-items: center;
    gap: 14px;
}
.point_info .point_balance::before {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background-color: var(--line);
}
.point_info > p {
    font-size: var(--ft14);
}
.point_available > p {
    color: var(--gray-600);
}
.point_balance > p {
    color: var(--gray-400);
}

.payment_list label {
    height: 70px;
}
.payment_list label img {
    filter: grayscale(1);
    opacity: .4;
}
.payment_list input:checked ~ label img {
    filter: grayscale(0);
    opacity: 1;
}


/*-------------------- page_r --------------------*/
.page_r {
    width: 400px;
    height: fit-content;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    right: 0;
}

/*-- order_summary --*/
.order_summary {
    width: 100%;
    padding: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
}
.order_summary_title {
    margin-bottom: 24px;
    font-size: var(--ft18);
    font-weight: var(--medium);
    color: var(--gray-600);
}
.order_price_list {
    display: grid;
    gap: 10px;
}
.order_price_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order_price_item p {
    font-size: var(--ft14);
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 8px;
}
.order_benefit_more {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 6px;
}
.order_benefit_more .order_price_item p,
.order_benefit_more .order_price_item strong {
    font-size: var(--ft14);
    color: var(--gray-400);
}
.order_price_item strong {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-500);
}
.order_price_item .shipping {
    padding: 4px 10px;
    border-radius: 20px;
    background-color: var(--gray-100);
    font-size: var(--ft12);
    font-weight: var(--medium);
    color: var(--gray-500);
}
.order_total {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order_total p {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-600);
}
.order_point_total {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order_point_total p {
    font-size: var(--ft14);
    color: var(--gray-400);
}
.order_summary .btn {
    width: 100%;
    margin-top: 32px;
}

.order_agree {
    margin-top: 24px;
    padding: 20px;
    background-color: var(--gray-100);
    border-radius: var(--radius-md);
    position: relative;
}
.order_agree_arrow {
    width: 14px;
    height: 14px;
    background: url(/images/down.svg) no-repeat center/contain;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    transition: transform .4s ease;
    transform: rotate(180deg);
}
.order_agree.is-open .order_agree_arrow  {
    transform: rotate(0deg);
}
.order_agree_hide {
    padding-top: 10px;
}
.agree_title {
    font-size: var(--ft14);
    font-weight: var(--medium);
}
.agree_text {
    margin-bottom: 12px;
    font-size: var(--ft14);
    color: var(--gray-400);
}

/*-- free_shipping --*/
.free_shipping {
    width: 100%;
    padding: 32px;
    margin-top: 20px;
    border-radius: var(--radius-md);
    background-color: var(--gray-100);
}
.free_shipping_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.free_shipping_title {
    margin-bottom: 10px;
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-600);
}
.free_shipping_price {
    margin-top: 10px;
    font-size: var(--ft14);
    color: var(--gray-300);
}
.free_shipping_price span {
    font-size: var(--ft14);
    font-weight: var(--medium);
    color: var(--gray-500);
}
.free_shipping_info img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}
.free_shipping_progress {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background-color: var(--white);
    margin-top: 20px;
}
.progress_bar {
    width: var(--w);
    height: 6px;
    border-radius: 3px;
    background-color: var(--primary);
    transition: width .6s ease;
    position: relative;
}
.progress_percent {
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background-color: var(--gray-600);
    font-size: var(--ft13);
    font-weight: var(--medium);
    color: var(--white);
    position: absolute;
    right: 0;
    top: 18px;
    transform: translateX(50%);
}
.progress_percent::before {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--gray-600);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
}


/*-------------------- address_popup --------------------*/
.address_list {
    display: grid;
    gap: 10px;
} 
.address_list label {
    display: block;
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    position: relative;
}
.address_list input:checked ~ label {
    border-color: var(--primary);
}
.address_list span {
    position: absolute;
    top: 16px;
    right: 16px;
}
.address_name {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.address_name > p {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-600);
}
.address_name .default_badge {
    padding: 5px 10px;
    border-radius: 20px;
    background-color: var(--primary);
    font-size: var(--ft13);
    font-weight: var(--medium);
    color: var(--white);
}
.address_info {
    margin-bottom: 6px;
}
.address_info,
.address_info .info_text {
    display: flex;
    align-items: center;
    gap: 8px;
}
.address_info .info_text::after {
    content: '';
    display: block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--gray-300);
}
.address_info .info_text:last-child::after {
    display: none;
}
.info_text {
    font-size: var(--ft16);
    color: var(--gray-500);
}

.address_btn {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.address_btn button {
    font-size: var(--ft14);
}
.address_btn .address_edit {
    color: var(--gray-600);
}
.address_btn .address_delete {
    color: var(--gray-400);
}

/*-------------------- coupon_popup --------------------*/
.coupon_list {
    display: grid;
    gap: 10px;
}
.coupon_list label {
    display: block;
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    position: relative;
}
.coupon_list input:checked ~ label {
    border-color: var(--primary);
}
.coupon_list span {
    position: absolute;
    top: 16px;
    right: 16px;
}
.coupon_price {
    font-size: var(--ft18);
    font-weight: var(--medium);
}
.coupon_name {
    margin-top: 10px;
    font-size: var(--ft14);
    color: var(--gray-500);
}
.coupon_info {
    margin-top: 20px;
}
.coupon_info * {
    margin-top: 3px;
    font-size: var(--ft13) !important;
    color: var(--gray-400);
}

.coupon_disabled label {
    background-color: var(--gray-100);
    pointer-events: none;
}
.coupon_disabled * {
    color: var(--gray-300) !important;
}
.coupon_unavailable {
    padding: 4px 8px;
    border-radius: 20px;
    background-color: var(--white);
    font-size: var(--ft12);
    color: var(--gray-400);
    position: absolute;
    top: 12px;
    right: 12px;
}