@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    --main_color : #DC0030;
    --gray_50 : #fafafa;
    --gray_100 : #f5f5f5;
    --gray_200 : #eeeeee;
    --gray_300 : #e0e0e0;
    --gray_400 : #bdbdbd;
    --gray_500 : #9e9e9e;
    --gray_600 : #757575;
    --gray_700 : #616161;
    --gray_800 : #424242;
    --gray_900 : #212121;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-thumb {
    background: rgba(163, 163, 163, 0.68);
    background-clip: padding-box;
    /* border: 1px solid transparent; */
}
*::-webkit-scrollbar-track {
    background: transparent;
}
body {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    font-family:  "Pretendard", sans-serif !important;
    line-height: 1.5;
    color: #212121;
    overflow-y: scroll;
}
@media (max-width: 640px) {
    body {
        overflow-y: auto;
    }
}
a {
    text-decoration: none;
    color: inherit;
}
button {
    font-family:  "Pretendard", sans-serif !important;
    background: none;
    border: none;
    color: inherit;
}
input, select {
    font-family:  "Pretendard", sans-serif !important;
}
ol, ul, li {
   list-style: none;
}
table {
    font-family:  "Pretendard", sans-serif !important;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
i {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-weight: normal !important;
}
.wrap {
    padding: 0 15px;
    margin: 0 auto;
}
.body.login {
    background-color: var(--gray_50);
}
.body.close {
    background-color: var(--gray_50);
}
.body.pin {
    background-color: #fff;
}
.body.cart {
    background-color: var(--gray_50);
}
.body.order {
    background-color: var(--gray_50);
}
.body.address {
    background-color: var(--gray_50);
}
.body.info {
    background-color: var(--gray_50);
}
.body.settings {
    background-color: var(--gray_50);
}
.body.card {
    background-color: var(--gray_50);
}
.body.order_list {
    background-color: var(--gray_50);
}
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.common_form_wrap {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
}
.d-none { display: none !important; }
.overflow-hidden{ overflow: hidden !important; }

/* 메인 header */
.header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 14.3px 0;
}
.header_inner .logo img {
    height: 32px;
    object-fit: contain;
}
.header_inner .login_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 21px;
    border: 1px solid #f8ccd6;
    font-size: 12px;
    color: var(--gray_800);
    font-size: 12px;
    font-weight: 500;
}
.header_inner .login_btn i {
    font-size: 20px;
    color: var(--main_color);
}
@media (max-width: 485px) {
    .header_inner .login_btn {
        gap: 5px;
        padding: 5px 15px;
    }
    .header_inner .login_btn i {
        font-size: 16px;
    }
}

/* common_header_inner */
.common_header_inner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 640px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 15px;
    font-size: 22px;
    font-weight: bold;
    background-color: var(--gray_50);
    z-index: 99;
}
.common_header_inner.white {
    background-color: #fff;
}
.common_header_inner a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.common_header_inner a i {
    font-size: 24px;
}
.common_header_inner.order_complete  {
    font-size: 24px;
    text-align: right;
    justify-content: flex-end;
}
.common_header_inner.simple_pin {
    font-size: 24px;
    text-align: right;
    justify-content: flex-end;
    background-color: #fff;
}
.common_header_inner .login_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 21px;
    border: 1px solid #f8ccd6;
    font-size: 12px;
    color: var(--gray_800);
    font-size: 12px;
    font-weight: 500;
}
.common_header_inner .login_btn i {
    font-size: 20px;
    color: var(--main_color);
}
@media (max-width: 485px) {
    .common_header_inner .login_btn {
        gap: 5px;
        padding: 5px 15px;
    }
    .common_header_inner .login_btn i {
        font-size: 16px;
    }
}
.common_header_inner .logout_btn {
    font-size: 24px;
    color: var(--gray_800);
    cursor: pointer;
}

/* bottom_nav */
.bottom_nav {
    display: flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    padding: 0 15px;
    max-width: 640px;
    width: 100%;
    z-index: 99;
    background: #fff;
    border-radius: 25px 25px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08);
}
.bottom_nav a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    width: calc(100% / 4);
    color: var(--gray_600);
    padding: 11px 10px;
    font-weight: 500;
}
.bottom_nav a i {
    font-size: 24px;
}
.bottom_nav .bottom_nav_item.is-active,
.bottom_nav .bottom_nav_item.is-active i {
    color: var(--main_color);
}
@media (max-width: 480px) {
    .bottom_nav a {
        font-size: 12px;
    }
}

/* scroll_top */
.scroll_top_wrap {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    max-width: 640px;
    width: 100%;
    bottom: calc(70px + 15px + env(safe-area-inset-bottom));
}
.scroll_top_wrap .scroll_top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 15px;
    width: 50px;
    height: 50px;
    font-size: 24px;
    color: var(--gray_800);
    border-radius: 50%;
    border: 1px solid var(--gray_300);
    background-color: #fff;
    cursor: pointer;
    opacity: 0;
}
.scroll_top_wrap .scroll_top.is-show {
    opacity: 1;
}
.body.order .scroll_top_wrap {
    bottom: 15px;
}

/* index.html 마케팅 수신 동의 */
.mk_modal {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
}
.mk_modal[aria-hidden="true"] {
    display: none;
}
.mk_modal.is-open { display: block; }
.mk_dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .3);
}
.mk_panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 540px;
    width: 100%;
    padding: 0 15px;
    overflow: hidden;
}
.mk_body {
    background: #fff;
    border-radius: 10px;
    padding: 40px;
}
.mk_title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: bold;
    color: var(--gray_900);
    text-align: center;
}
.mk_desc {
    margin-bottom: 20px;
    color: var(--gray_800);
}
.mk_desc span {
    color: var(--main_color);
}
.mk_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 15px;
    background-color: var(--gray_50);
    border-radius: 10px;
}
.mk_card_inner {
    display: flex;
    gap: 15px;
}
.mk_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 7px;
    background-image: linear-gradient(135deg, #ed7327 0%, #e46313 100%);
    color: #fff;
    font-size: 26px;
}
.mk_card_text .mk_card_title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}
.mk_card_text .mk_card_sub {
    font-size: 12px;
    color: var(--gray_800);
}
.mk_switch {
    position: relative;
    width: 50px;
    height: 30px;
    flex: 0 0 auto;
}
.mk_switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.mk_slider {
    position: absolute;
    inset: 0;
    background: var(--gray_300);
    border-radius: 15px;
    transition: .2s ease;
    cursor: pointer;
}
.mk_slider::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: -3px 0 8px 0 rgba(0, 76, 19, 0.2);
    transition: .2s ease;
}
.mk_switch input:checked + .mk_slider { background: #34c759; }
.mk_switch input:checked + .mk_slider::after { transform: translateX(20px); }
.mk_actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 30px;
}
.mk_btn {
    height: 50px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.mk_btn:focus,
.mk_btn:focus-visible {
    outline: none;
    box-shadow: none;
}
.mk_btn--primary {
    border: none;
    background: var(--main_color);
    color: #fff;
}
.mk_btn--ghost {
    background: #fff;
    border: 1px solid #f199ac;
    color: var(--main_color);
}
@media (max-width: 480px){
    .mk_body { padding: 25px }
    .mk_title { font-size: 20px; }
    .mk_card_inner { gap: 10px; }
    .mk_card_text .mk_card_title {
        margin-bottom: 2px;
    }
    .mk_icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
        flex-shrink: 0;
    }
    .mk_switch {
        height: 26px;
    }
    .mk_slider::after {
        width: 22px;
        height: 22px;
    }
    .mk_switch input:checked + .mk_slider::after { transform: translateX(24px); }
}

/* index.html mainSwiper */
.mainSwiper {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.mainSwiper .main_swiper_controls {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 2;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
}
.mainSwiper .main_swiper_controls .swiper-pagination-current {
    color: rgba(255, 255, 255, 1);
}
.mainSwiper .main_swiper_controls .main-button-pause {
    height: 18px;
}
.mainSwiper .main_swiper_controls i {
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: rgba(255, 255, 255, 1);
}

/* index.html product_wrap */
.product_wrap {
    margin-top: 30px;
}
.product_wrap .product_inner2 {
    margin-top: 46px;
}
.product_wrap .product_inner3 {
    margin-top: 50px;
}
.product_wrap .product_ttl {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
}
.product_wrap .product_item_box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.product_wrap .product_item {
    position: relative;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.1);
}
.product_wrap .product_item > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.product_wrap .product_item.soldout {
    opacity: 0.4;
}
.product_wrap .product_item.upcoming .item_img_box {
    position: relative;
}
.product_wrap .product_item .item_img_box {
    border-radius: 8px;
    overflow: hidden;
}
.product_wrap .item_img_box .item_img {
    position: relative;
}
.product_wrap .item_img_box .item_img .upcoming_bg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    background-color: rgba(255, 255, 255, 0.3);
}
.product_wrap .item_img_box .item_img .upcoming_bg .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
}
.product_wrap .item_img_box .item_img .soldout_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}
.product_wrap .item_img_box .sale_time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: var(--main_color);
    padding: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.product_wrap .item_img_box .sale_time i {
    font-size: 18px;
    font-weight: normal;
}
.product_wrap .item_info_box {
    margin-top: 10px;
}
.product_wrap .item_info_box .shipping_fee div {
    display: inline-flex;
    gap: 5px;
    padding: 2.5px 8px;
    border-radius: 5px;
    white-space: nowrap;
    color: var(--main_color);
    background-color: var(--gray_100);
    font-size: 10px;
    font-weight: 500;
}
.product_wrap .item_info_box .shipping_fee div i {
    font-size: 15px;
}
.product_wrap .item_info_box .item_title {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    height: 42px;
}
.product_wrap .item_info_box .price_box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
}
.product_wrap .item_info_box .price_box .price_origin {
    color: var(--gray_500);
    font-size: 12px;
    text-decoration: line-through;
}
.product_wrap .item_info_box .price_box .final_price_box .discount_rate {
    font-size: 16px;
    font-weight: 600;
    color: var(--main_color);
}
.product_wrap .item_info_box .price_box .final_price_box .final_price {
    display: inline-block;
    margin-left: 5px;
    font-size: 16px;
    font-weight: bold;
}
.product_wrap .item_info_box .purchase_info {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin-top: 10px;
    font-size: 10px;
    color: var(--gray_600);
}
.product_wrap .item_info_box .purchase_info div {
    padding-bottom: 2px;
}
.product_wrap .item_info_box .purchase_info .purchase_count {
    padding-bottom: 0px;
}
.product_wrap .item_info_box .purchase_info .purchase_count span {
    color: var(--main_color);
    font-size: 14px;
    font-weight: bold;
}
.product_wrap .product_item.is-hidden {
    display: none;
}
.product_wrap .product_more_btn {
    margin-top: 30px;
    border: 1px solid var(--gray_300);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: bold;
    padding: 13px 10px;
    border-radius: 5px;
    width: 100%;
    color: var(--gray_800);
    cursor: pointer;
}
.product_wrap .product_more_btn i {
    font-size: 24px;
    color: var(--gray_600);
}
.product_wrap .product_more_btn.is-disabled {
    opacity: .5;
    pointer-events: none;
}

/* index.html 판매 예정 알림 */
.notify-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--main_color);
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s ease;
    margin-top: 15px;
}
.notify-btn i {
    font-size: 16px;
}
.notify-btn.is-off {
    color: var(--main_color);
}
.notify-btn.is-off .icon-off,
.notify-btn.is-off .text-off {
    display: none;
}
.notify-btn.is-on {
    color: var(--gray_500);
    border-color: var(--gray_500);
}
.notify-btn.is-on .icon-on,
.notify-btn.is-on .text-on {
    display: none;
}

/* product_detail.html 상품 상세 페이지 */
.product_detail_container {
    margin-top: 60px;
    padding-bottom: 135px;
}
.section_divider {
    width: 100%;
    height: 8px;
    background-color: var(--gray_100);
}
.product_detail_main .timer_box {
    padding: 10px;
    background-color: var(--main_color);
}
.product_detail_main .timer_box .sale_time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.product_detail_main .timer_box .sale_time i {
    font-size: 18px;
}
.detailSwiper {
    position: relative;
    width: 100%;
    height: 325px;
    overflow: hidden;
}
.detailSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detailSwiper .detail_swiper_controls {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 2;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
}
.detailSwiper .detail_swiper_controls .swiper-pagination-current {
    color: rgba(255, 255, 255, 1);
}
.product_detail_info {
    padding-top: 10px;
    padding-bottom: 30px;
}
.product_detail_info .benefits_box {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
.product_detail_info .benefits_box .benefit {
    display: inline-block;
    white-space: nowrap;
    padding: 2.5px 8px;
    border-radius: 5px;
    background-color: var(--gray_100);
    color: var(--main_color);
    font-weight: 500;
    font-size: 10px;
}
.product_detail_info .benefits_box .benefit .shipping_fee {
    display: flex;
    gap: 5px;
    align-items: center;
}
.product_detail_info .benefits_box .benefit .shipping_fee i {
    font-size: 15px;
}
.product_detail_info .prd_title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}
.product_detail_info .price_box {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.product_detail_info .price_box .price_origin {
    color: var(--gray_500);
    font-size: 12px;
    text-decoration: line-through;
}
.product_detail_info .price_box .final_price_box {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    font-size: 18px;
}
.product_detail_info .final_price_box .discount_rate {
    font-weight: 600;
    color: var(--main_color);
}
.product_detail_info .final_price_box .final_price {
    font-weight: bold;
}
.product_detail_info .final_price_box .final_price span {
    font-size: 14px;
    font-weight: normal;
    color: var(--gray_800);
}
.product_detail_info .progress_wrap {
    width: 100%;
    padding-bottom: 19px;
    border-bottom: 1px solid var(--gray_200);
}
.product_detail_info .progress_wrap .progress_bar {
    width: 100%;
    height: 5px;
    background: var(--gray_200);
    border-radius: 2.5px;
    overflow: hidden;
}
.product_detail_info .progress_wrap .progress_fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2.5px;
    background: linear-gradient(to right, #f49600, #f46000 21%, #dc0030);
    transition: width .4s ease;
}
.product_detail_info .progress_wrap .progress_info {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 5px;
    font-size: 12px;
    color: var(--gray_600);
    margin-bottom: 10px;
}
.product_detail_info .progress_wrap .progress_info span {
    padding-bottom: 2px;
}
.product_detail_info .progress_wrap .progress_info .current_wrap {
    padding-bottom: 0;
    font-weight: 500;
}
.product_detail_info .progress_wrap .progress_info .current {
    color: var(--main_color);
    font-weight: 700;
    font-size: 16px;
}
.product_detail_info .purchase_info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.product_detail_info .purchase_info .info_item {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: var(--gray_800);
}
.product_detail_info .purchase_info .info_item .ttl {
    flex-shrink: 0;
    width: 70px;
    font-weight: bold;
    color: var(--gray_900);
}
.product_detail_info .purchase_info .info_item .shipping_fee {
    display: flex;
    gap: 5px;
}
.product_detail_info .purchase_info .info_item .shipping_fee i {
    font-size: 15px;
}
.product_detail_info .purchase_info .info_item p span {
    color: var(--main_color);
    font-weight: 600;
}
.product_info_item {
    padding-top: 20px;
    padding-bottom: 30px;
}
.product_info_item .info_ttl {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
.product_info_item .info_desc {
    margin-top: 15px;
    font-size: 14px;
    color: var(--gray_800);
}
.product_toggle_list .product_toggle_item .product_toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    padding-top: 20px;
    padding-bottom: 20px;
    cursor: pointer;
}
.product_toggle_list .product_toggle_item .product_toggle i {
    transition: all 0.3s;
    font-size: 24px;
}
.product_toggle[aria-expanded="true"] .toggle_icon {
    transform: rotate(180deg);
}
.product_toggle_list .product_toggle_content {
    overflow: hidden;
    height: 0;
    transition: height 500ms ease;
    will-change: height;
}
.product_toggle_list .product_toggle_content .content_inner {
    padding: 15px;
    border-radius: 8px;
    background-color: var(--gray_50);
    margin-bottom: 30px;
    font-size: 12px;
    color: var(--gray_800);
}
.product_toggle_list .product_toggle_content .product_notice_wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.product_toggle_list .product_notice_wrap .notice_item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.product_toggle_list .product_notice_wrap .notice_item .notice_ttl {
    font-weight: bold;
}
.product_toggle_list .product_notice_wrap .notice_item .notice_desc p {
    display: flex;
    gap: 5px;
}
.product_toggle_list .product_notice_wrap .notice_desc .desc_list {
    position: relative;
    padding-left: 15px;
}
.product_toggle_list .product_notice_wrap .notice_desc .desc_list::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--gray_800);
}
.product_toggle_list .product_notice_wrap .notice_desc .desc_item_wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.product_toggle_list .product_notice_wrap .desc_item_wrap .desc_item {
    display: flex;
    gap: 30px;
}
.product_toggle_list .product_notice_wrap .desc_item .ttl {
    width: 77px;
    flex-shrink: 0;
    color: var(--gray_600);
}

/* product_detail.html 하단 고정 구매하기 버튼 */
.buy_sticky_wrap {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    padding: 10px 15px;
    max-width: 640px;
    width: 100%;
    background: #fff;
    border-radius: 15px 15px 0 0;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08);
    z-index: 9999;
}
.buy_sticky_wrap .buy_share {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid var(--gray_300);
    color: var(--gray_800);
    font-size: 24px;
    flex-shrink: 0;
}
.buy_sticky_wrap .buy_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: var(--main_color);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    flex-grow: 1;
    cursor: pointer;
}
.buy_modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.buy_modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s;
}
.buy_dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity .22s ease;
}
.buy_modal.is-open .buy_dim { opacity: 1; }
.buy_sheet {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: 640px;
    transform: translateX(-50%) translateY(100%);
    transition: transform .22s ease;
    background: #fff;
    border-radius: 15px 15px 0 0;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08);
    max-height: 92dvh;
    touch-action: none;
    will-change: transform;
}
.buy_modal.is-open .buy_sheet {
    transform: translateX(-50%) translateY(0);
}
.buy_sheet.is-dragging {
    transition:none !important;
}
.buy_handle {
    width: 60px;
    height: 5px;
    border-radius: 2.5px;
    background: var(--gray_300);
    margin: 10px auto 20px;
    cursor: pointer;
}

/* product_detail.html 장바구니 담기 클릭 후 모달 */
.cart_toast {
    padding: 0 15px 19px;
    background:#fff;
    border-bottom: 1px solid var(--gray_300);
}
.cart_toast_inner{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.cart_toast_left {
    display: flex;
    gap: 10px;
    align-items: center;
}
.cart_toast_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fce6ea;
    font-size: 18px;
    color: var(--main_color);
}
.cart_toast_text {
    font-size: 14px;
    font-weight: 600;
}
.cart_toast_link {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray_800);
}
.cart_toast_link i {
    font-size: 16px;
}
.recommend_head {
    padding: 20px 15px 15px;
}
.recommend_ttl {
    font-size: 16px;
    font-weight:600;
}
.recommend_list {
    overflow-x: auto;
}
.recommend_list .recommend_inner {
    display: flex;
    padding: 0 15px 20px;
}
.recommend_list::-webkit-scrollbar { display:none; }
.recommend_list { scrollbar-width:none; }
.rec_card {
    width: 280px;
    flex-shrink: 0;
}
.rec_thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.rec_thumb img {
    display:block;
    width:100%;
    height: 119px;
    object-fit:cover;
}
.rec_timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 10px;
    background-color: var(--main_color);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.rec_timer i {
    font-size: 18px;
}
.rec_body {
    margin-top: 10px;
}
.rec_badges {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
.rec_badge {
    display: inline-block;
    white-space: nowrap;
    padding: 2.8px 8px;
    background-color: var(--gray_100);
    border-radius: 5px;
    color: var(--main_color);
    font-size: 10px;
    font-weight: 500;
}
.rec_name {
    display:-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
    height: 42px;
    font-size: 14px;
    font-weight: 600;
}
.rec_old {
    margin-top: 10px;
    font-size: 12px;
    color: var(--gray_500);
    text-decoration:line-through;
}
.rec_price_row {
    display: flex;
    gap: 5px;
    align-items: flex-end;
}
.rec_sale {
    font-size: 16px;
    font-weight: 600;
    color: var(--main_color);
}
.rec_price {
    font-size: 16px;
    font-weight: bold;
}
.rec_price span {
    font-size: 12px;
    color: var(--gray_800);
}
.buy_modal.is-cart-view #buyBody,
.buy_modal.is-cart-view #buyFoot {
    display: none;
}

/* product_detail.html 구매하기 버튼 클릭 후 모달 */
.buy_body {
    padding: 0px 15px 20px;
    overflow: auto;
}
.buy_section_title {
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: 500;
}
.buy_section_title em {
    font-style: normal;
    color: var(--main_color);
}
.buy_select_group {
    display: grid;
    gap: 10px;
}
.buy_modal .cselect {
    border: 1px solid var(--gray_400);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}
.buy_modal .cselect_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 0 15px;
    gap: 10px;
    border: 0;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray_500);
}
.buy_modal .cselect_icon {
    font-size: 20px;
    color: var(--gray_400);
    transition: transform .2s ease;
}
.buy_modal .cselect_btn[aria-expanded="true"] .cselect_icon {
    transform: rotate(180deg);
}
.buy_modal .cselect_panel {
    border-top: 1px solid var(--gray_300);
    background: #fff;
}
.buy_modal .cselect_opt {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 0;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray_800);
}
.cselect_opt + .cselect_opt {
    border-top: 1px solid var(--gray_300);
}
.buy_modal .cselect_opt:active {
    background: #f6f6f6;
}
.buy_modal .buy_items {
    margin-top: 15px;
    display: grid;
    gap: 10px;
}
.buy_modal .buy_item {
    position: relative;
    background: var(--gray_100);
    border-radius: 5px;
    padding: 15px 15px;
}
.buy_modal .buy_item_remove {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 15px;
    border: 0;
    background: transparent;
    font-size: 20px;
    color: var(--gray_600);
    cursor: pointer;
    width: 20px;
    height: 20px;
}
.buy_modal .buy_item_name {
    font-size: 12px;
    color: var(--gray_800);
    padding-right: 30px;
    margin-bottom: 17px;
}
.buy_modal .buy_item_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.buy_modal .buy_item_price {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}
.buy_modal .buy_item_price span {
    font-size: 12px;
    font-weight: normal;
}
.buy_modal .qty_stepper {
    display: inline-flex;
    align-items: center;
    width: 96px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid var(--gray_400);
    background: #fff;
    overflow: hidden;
    padding: 6px 10px;
}
.buy_modal .qty_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    font-size: 18px;
    border: 0;
    background: #fff;
    color: var(--gray_800);
    cursor: pointer;
}
.buy_modal .qty_input {
    min-width: 20px;
    border: 0;
    text-align: center;
    font-size: 12px;
    color: var(--gray_800);
    outline: none;
}
.buy_modal .buy_foot {
    padding: 10px 15px;
    background: #fff;
}
.buy_modal .buy_sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.buy_modal .buy_cnt {
    font-size: 12px;
}
.buy_modal .buy_cnt b {
    font-weight: bold;
}
.buy_modal .buy_total {
    font-size: 18px;
    font-weight: bold;
    color: var(--main_color);
}
.buy_modal .buy_actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.buy_modal .buy_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}
.buy_modal .buy_btn--ghost {
    border: 1px solid #f199ac;
    background: #fff;
    color: var(--main_color);
}
.buy_modal .buy_btn--primary {
    border: 0;
    background: var(--main_color);
    color: #fff;
}

/* shoppinig_cart_empty.html */
.cart_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 640px;
    width: 100%;
    padding: 9px 15px;
    background-color: #fff;
    font-size: 22px;
    font-weight: bold;
    z-index: 99;
}
.cart_header .header_text {
    display: flex;
    gap: 10px;
    align-items: center;
}
.cart_header .header_text i {
    font-size: 24px;
}
.cart_header .login_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 21px;
    border: 1px solid #f8ccd6;
    font-size: 12px;
    color: var(--gray_800);
    font-size: 12px;
    font-weight: 500;
}
.cart_header .login_btn i {
    font-size: 20px;
    color: var(--main_color);
}
.cart_empty_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 70px;
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cart_empty_inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.cart_empty_inner .text_1 {
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
}
.cart_empty_inner .text_2 {
    margin-top: 10px;
    font-size: 14px;
    color: var(--gray_800);
}
.cart_empty_inner .product_link {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22.5px;
    border: 1px solid #f199ac;
    color: var(--main_color);
    font-size: 14px;
    width: 160px;
    height: 45px;
    margin: 30px auto;
    font-weight: 500;
}
@media (max-width: 485px) {
    .cart_header .login_btn {
        gap: 5px;
        padding: 5px 15px;
    }
    .cart_header .login_btn i {
        font-size: 16px;
    }
}

/* shopping_cart.html */
.cart_header.cart {
    background-color: var(--gray_50);
}
.cart_wrap {
    margin-top: 60px;
}
.cart_wrap .cart_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 15px;
}
.cart_wrap .cart_top .check_all_box {
    display: flex;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}
.check_custom_box input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.check_custom_box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.check_custom_box .chk_ui {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid var(--gray_400);
    background: #fff;
    transition: 0.15s;
}
.check_custom_box input:checked + .chk_ui {
    background: var(--main_color);
    border-color: var(--main_color);
}
.check_custom_box input:checked + .chk_ui::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}
.check_custom_box input:disabled + .chk_ui {
    opacity: 0.5;
    cursor: not-allowed;
}
.cart_wrap .cart_top .btn_delete_all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 95px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid var(--gray_300);
    color: var(--gray_600);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.cart_wrap .cart_top .btn_delete_all i {
    font-size: 18px;
}
.cart_wrap .cart_item_wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cart_wrap .cart_item {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.cart_wrap .cart_item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cart_wrap .cart_item.soldout .item_thumb {
    opacity: 0.4;
}
.cart_wrap .cart_item.soldout .soldout_badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 20px;
    border-radius: 5px;
    background-color: var(--gray_400);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 10px;
}
.cart_item .cart_item_info {
    flex-grow: 1;
}
.cart_item .cart_item_info .info_wrap {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.cart_item .cart_item_info .item_thumb {
    position: relative;
    width: 140px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.cart_item .cart_item_info .item_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart_item .cart_item_info .badge_group {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
.cart_item .badge_group .badge {
    display: inline-flex;
    gap: 5px;
    padding: 2.5px 8px;
    white-space: nowrap;
    background-color: var(--gray_100);
    border-radius: 5px;
    color: var(--main_color);
    font-size: 10px;
    font-weight: 500;
}
.cart_item .badge_group .badge i {
    font-size: 15px;
}
.cart_item .item_name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.cart_item .item_option {
    font-size: 12px;
    color: var(--gray_600);
}
.cart_item .item_price {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
}
.cart_item .item_price span {
    font-size: 12px;
    color: var(--gray_800);
    font-weight: normal;
}
.cart_item_wrap .item_btns.delete {
    grid-template-columns: 1fr;
}
.cart_item_wrap .item_btns {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
}
.cart_item_wrap .item_btns .btn_line {
    border: 1px solid var(--gray_300);
    padding: 10.5px 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray_800);
    border-radius: 22.5px;
    cursor: pointer;
}
.pay_summary {
    margin-top: 20px;
    padding-bottom: 165px;
}
.pay_summary .pay_card {
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.pay_summary .pay_card .pay_ttl {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.pay_summary .pay_card .pay_rows {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray_300);
}
.pay_summary .pay_card .pay_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--gray_600);
}
.pay_summary .pay_card .pay_row .row_price {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray_900);
}
.pay_summary .pay_card .pay_row .row_price span {
    font-size: 12px;
    font-weight: normal;
}
.pay_summary .pay_card .pay_total {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 15px;
}
.pay_summary .pay_card .pay_total .row_total {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray_900);
}
.pay_summary .pay_card .pay_total .is-accent {
    font-size: 18px;
    color: var(--main_color);
    font-weight: 600;
}
.pay_summary .pay_card .pay_total .is-accent.won span {
    font-size: 16px;
    font-weight: normal;
}
.pay_summary .pay_card .pay_total .is-accent.point {
    font-size: 14px;
}
.pay_summary .btn_buy {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    padding: 13px 10px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    background-color: var(--main_color);
}

/* shopping_cart.html 옵션 변경 */
.opt_sheet {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.opt_sheet.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s;
}
.opt_sheet .opt_backdrop {
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, .3);
}
.opt_sheet .opt_panel {
    position:absolute;
    left: 50%;
    transform: translateX(-50%) translateY(110%);
    transition: transform .25s ease;
    will-change: transform;
    bottom: 0;
    max-width: 640px;
    width: 100%;
    background: #fff;
    border-radius: 15px 15px 0 0;
    padding: 0 15px 10px;
}
.opt_sheet.is-open .opt_panel {
    transform: translateX(-50%) translateY(0);
}
.opt_sheet .opt_panel.is-dragging {
    transition:none !important;
}
.opt_grip {
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;
    cursor: grab;
}
.opt_grip span {
    display: block;
    margin: 0 auto;
    width: 60px;
    height: 5px;
    background: var(--gray_300);
    border-radius: 2.5px;
    line-height: 1;
}
.opt_panel.is-dragging .opt_grip { cursor: grabbing; }
.opt_title {
    font-size: 12px;
    font-weight: 500;
}
.opt_title em {
    color: var(--main_color);
    font-style:normal;
}
body.is-scroll-locked {
    touch-action: none;
}
.opt_sheet .cart_select {
    position: relative;
    margin-top: 10px;
    border: 1px solid var(--gray_400);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}
.opt_sheet .cart_opt_btn {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height: 42px;
    padding: 0 15px;
    gap: 10px;
    border: 0;
    background:#fff;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray_500);
}
.opt_sheet .cart_select_val {
    font-size: 12px;
    color: var(--gray_500);
}
.opt_sheet .cselect_ico {
    font-size: 20px;
    color: var(--gray_400);
    transition:transform .18s ease;
}
.opt_sheet .cart_select.is-open .cselect_ico {transform:rotate(180deg);}
.opt_sheet .cart_select_list {
    display: none;
    background: #fff;
    overflow: hidden;
    border-top: 1px solid var(--gray_300);
}
.opt_sheet .cart_select.is-open .cart_select_list {display:block;}
.opt_sheet .cart_opt {
    width:100%;
    text-align:left;
    padding: 12px 14px;
    font-size: 12px;
    background: #fff;
    border-top: 1px solid var(--gray_300);
    cursor: pointer;
    color: var(--gray_800);
}
.opt_sheet .opt_subttl {
    margin-top: 15px;
    font-size: 12px;
    font-weight: 500;
}
.opt_sheet .opt_result {
    position: relative;
    background: var(--gray_100);
    border-radius: 5px;
}
.opt_sheet .opt_result_name {
    font-size: 12px;
    color: var(--gray_800);
}
.opt_sheet .opt_result_list {
    margin-top: 15px;
    display: grid;
    gap: 10px;
}
.opt_sheet .opt_preview_row {
    position: relative;
    background: var(--gray_100);
    border-radius: 5px;
    padding: 15px 15px;
}
.opt_sheet .opt_result_remove {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 15px;
    border: 0;
    background: transparent;
    font-size: 20px;
    color: var(--gray_600);
    cursor: pointer;
    width: 20px;
    height: 20px;
}
.opt_sheet .opt_preview_row .opt_result_item_name {
    font-size: 12px;
    color: var(--gray_800);
    padding-right: 30px;
    margin-bottom: 17px;
}
.opt_sheet .opt_result_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.opt_sheet .qty {
    display: inline-flex;
    width: 96px;
    height: 30px;
    align-items: center;
    border: 1px solid var(--gray_400);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    padding: 6px 10px;
}
.opt_sheet .qty_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    background:#fff;
    font-size: 18px;
    cursor: pointer;
    color: var(--gray_800);
}
.opt_sheet .qty_inp {
    min-width: 20px;
    border: 0;
    font-size: 12px;
    text-align: center;
    outline: none;
    color: var(--gray_800);
}
.opt_sheet .opt_price {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
}
.opt_sheet .opt_price span {
    font-size: 12px;
    font-weight: normal;
}
.opt_sheet .buy_foot {
    padding-top: 10px;
    background: #fff;
}
.opt_sheet .buy_sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.opt_sheet .buy_cnt {
    font-size: 12px;
}
.opt_sheet .buy_cnt b {
    font-weight: bold;
}
.opt_sheet .buy_total {
    font-size: 18px;
    font-weight: bold;
    color: var(--main_color);
}
.opt_sheet .opt_actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.opt_sheet .opt_btn {
    height: 50px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor:pointer;
}
.opt_sheet .opt_btn.cancel {
    background:#fff;
    border :1px solid #f199ac;
    color: var(--main_color);
}
.opt_sheet .opt_btn.confirm {
    background: var(--main_color);
    color: #fff;
}

/* order.html 주문결제 페이지 */
.order_wrap {
    margin-top: 80px;
    padding-bottom: 95px;
}
.delivery_wrap {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.delivery_wrap.is-empty {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
}
.delivery_wrap.is-empty .add_address_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid var(--gray_300);
    color: var(--gray_600);
    font-size: 14px;
    font-weight: 500;
}
.delivery_wrap .delivery_title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.delivery_wrap .delivery_box .delivery_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.delivery_wrap .delivery_top .delivery_label {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}
.delivery_wrap .delivery_top .delivery_label .label_sub {
    display: inline-flex;
    white-space: nowrap;
    padding: 2.5px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    color: var(--gray_800);
    background-color: var(--gray_100);
}
.delivery_wrap .delivery_top .btn_address_change {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 30px;
    color: var(--gray_600);
    border: 1px solid var(--gray_300);
    font-size: 14px;
    font-weight: 500;
    border-radius: 15px;
    cursor: pointer;
}
.delivery_wrap .delivery_info {
    font-size: 12px;
    color: var(--gray_800);
    margin-bottom: 15px;
}
.delivery_wrap .delivery_info .address_text {
    margin-bottom: 5px;
}
.delivery_wrap .delivery_request {
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    overflow: hidden;
}
.delivery_wrap .delivery_request .request_select {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 12px 15px;
    align-items: center;
    font-size: 12px;
    color: var(--gray_500);
    height: 42px;
    cursor: pointer;
    overflow: hidden;
}
.delivery_wrap .delivery_request .request_select i {
    font-size: 20px;
    color: var(--gray_600);
    transition: transform 0.25s ease;
}
.delivery_wrap .request_select[aria-expanded="true"] i {
	transform: rotate(180deg);
}
.delivery_wrap .request_opt {
    border-top: 1px solid var(--gray_300);
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray_800);
}
.order_products_wrap {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-top: 20px;
}
.order_products_wrap .order_product_ttl {
    font-size: 18px;
    font-weight: 600;
}
.order_products_wrap .order_product {
    display: flex;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray_300);
}
.order_products_wrap .order_product:nth-last-of-type(1) {
    border: none;
}
.order_products_wrap .order_product .thum {
    width: 140px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}
.order_products_wrap .product_info .prd_name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.order_products_wrap .product_info .prd_type {
    font-size: 12px;
    color: var(--gray_600);
    margin-bottom: 10px;
}
.order_products_wrap .product_info .prd_price {
    font-size: 16px;
    font-weight: bold;
}
.order_products_wrap .product_info .prd_price span {
    font-size: 12px;
    font-weight: normal;
    color: var(--gray_800);
}
.payment_wrap {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.payment_wrap .payment_title {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
}
.payment_wrap .payment_box .pay_method_item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray_300);
    overflow: hidden;
}
.payment_wrap .payment_box .pay_method_item:last-child {
    border: none;
    padding-top: 20px;
    padding-bottom: 0;
}
.payment_wrap .payment_box .pay_method_item .pay_method_content {
    display: none;
}
.payment_wrap .payment_box .pay_method_item.is-active .pay_method_content {
    display: block;
}
.payment_wrap .payment_box .pay_method_head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.payment_wrap .pay_method_radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.payment_wrap .radio_ui {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--gray_300);
    cursor: pointer;
}
.payment_wrap .pay_method_item.is-active .radio_ui {
	border-color: var(--main_color);
}
.payment_wrap .pay_method_item.is-active .radio_ui::after {
	content: "";
	position: absolute;
    top: 2px;
    left: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--main_color);
}
.payment_wrap .payment_box .pay_method_body {
    width: 100%;
}
.payment_wrap .payment_box .pay_method_title {
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.payment_wrap .pay_method_content {
    width: calc(100% - 50px);
    margin: 0 auto;
}
.payment_wrap .pay_method_content.normal {
    width: 100%;
}
.payment_wrap .easy_card_wrap {
    display: flex;
}
.payment_wrap .easy_card_wrap .easy_card_add {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 152px;
    padding-top: 20px;
    border: 1px solid var(--gray_300);
    background-color: var(--gray_50);
    border-radius: 5px;
}
.payment_wrap .easy_card_wrap .easy_card_add .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--main_color);
    color: #fff;
    font-size: 24px;
}
.payment_wrap .easy_card_wrap .easy_card_add p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
}
.payment_wrap .easy_card_wrap .easy_pay_card {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    padding: 30px;
    border-radius: 6px;
    border: 1px solid var(--gray_300);
}
.payment_wrap .easy_card_wrap .easy_pay_card.swiper-slide.swiper-slide-active {
    border-color: var(--main_color);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
}
.payment_wrap .easy_pay_card .card_thumb {
    width: 58px;
    height: 92px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}
.payment_wrap .easy_pay_card .card_info .card_name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
    height: 21px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.payment_wrap .card_info .card_meta {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--gray_600);
    font-size: 12px;
    margin-bottom: 15px;
}
.payment_wrap .card_info .card_meta .dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--gray_300);
    flex-shrink: 0;
}
.payment_wrap .card_info .card_select_btn {
    display: flex;
    gap: 5px;
    align-items: center;
    border: none;
    font-size: 12px;
    color: var(--gray_800);
    cursor: pointer;
}
.payment_wrap .card_info .card_select_btn i {
    font-size: 14px;
}
.payment_wrap .normal_pay_inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.payment_wrap .normal_pay_inner .select_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    height: 42px;
    width: 100%;
    border-radius: 5px;
    font-size: 12px;
    padding: 12px 15px;
    cursor: pointer;
}
.payment_wrap .normal_pay_inner .select_box .select_placeholder {
    color: var(--gray_500);
}
.payment_wrap .normal_pay_inner .select_box i {
    font-size: 20px;
    color: var(--gray_600);
    transition: transform 0.25s ease;
}
.payment_wrap .normal_pay_inner .select_box.is-open i {
	transform: rotate(180deg);
}
.payment_wrap .normal_pay_inner .normal_pay_item {
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    overflow: hidden;
}
.payment_wrap .normal_pay_inner .card_opt_panel .card_opt {
    border-top: 1px solid var(--gray_300);
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray_800);
}
@media (max-width: 480px) {
    .payment_wrap .pay_method_content {
        width: calc(100% - 30px);
    }
    .payment_wrap .easy_card_wrap .easy_pay_card {
        padding: 15px 10px;
    }
    .payment_wrap .easy_pay_card .card_thumb {
        width: 48px;
        height: 82px;
    }
}
.point_wrap {
    margin-top: 38px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.point_wrap .point_ttl {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.point_wrap .point_input_wrap {
    display: flex;
    gap: 5px;
    width: 100%;
}
.point_wrap .point_input_wrap input {
    flex-grow: 1;
    height: 42px;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    background-color: #fff;
    font-size: 12px;
    padding: 12px 15px;
    max-width: calc((100% - 125px));
}
.point_wrap .point_input_wrap input::placeholder {
    color: var(--gray_500);
}
.point_wrap .point_input_wrap .btn_point_all {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 42px;
    background-color: var(--gray_200);
    border-radius: 5px;
    color: var(--gray_800);
    font-weight: 500;
    flex-shrink: 0;
    cursor: pointer;
}
@media (max-width: 480px) {
    .point_wrap .point_input_wrap input {
        max-width: calc(100% - 85px);
    }
    .point_wrap .point_input_wrap .btn_point_all {
        width: 80px;
        height: 42px;
    }
}
.point_wrap .point_box .point_info {
    margin-top: 10px;
    font-size: 10px;
    color: var(--gray_800);
}
.payment_summary {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.payment_summary .payment_ttl {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.payment_summary .summary_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray_300);
}
.payment_summary .summary_list .summary_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--gray_600);
}
.payment_summary .summary_item .summary_value {
    color: var(--gray_900);
}
.payment_summary .summary_item .summary_value span {
    font-size: 14px;
    font-weight: 600;
}
.payment_summary .summary_total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding-top: 18px;
    font-size: 14px;
    font-weight: 600;
}
.payment_summary .summary_total .total_value {
    font-weight: normal;
    color: var(--main_color);
    font-size: 16px;
}
.payment_summary .summary_total .total_value span {
    font-weight: bold;
}
.payment_summary .summary_reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 10px;
    font-size: 12px;
    color: var(--gray_600);
}
.payment_summary .summary_reward .reward_value {
    font-size: 14px;
    font-weight: 600;
    color: var(--main_color);
}
.order_wrap .order_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: var(--main_color);
    border-radius: 5px;
    cursor: pointer;
}
.order_wrap .order_caution {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
    color: var(--gray_600);
}

/* order.html 카드 할부 선택 */
.card_installment_sheet {
	position: fixed;
	inset: 0;
	z-index: 1000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.card_installment_sheet.is-open {
	opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s;
}
.card_installment_sheet .installment_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .3);
}
.card_installment_sheet .installment_container {
	position: absolute;
	left: 50%;
	bottom: 0;
    max-width: 640px;
	width: 100%;
    height: 600px;
    max-height: 80vh;
	background: #fff;
	border-radius: 15px 15px 0 0;
    transform: translateX(-50%) translateY(100%);
    transition: transform .28s ease;
	will-change: transform;
	overflow: hidden;
}
.card_installment_sheet.is-open .installment_container {
	transform: translateX(-50%) translateY(0);
}
.card_installment_sheet.is-dragging .installment_container { transition:none; }
.card_installment_sheet .sheet_header { cursor: grab; }
.card_installment_sheet.is-dragging .sheet_header { cursor: grabbing; }
.card_installment_sheet .sheet_header {
	padding: 10px 15px 20px;
	text-align: center;
	border-bottom: 1px solid var(--gray_300);
}
.card_installment_sheet .sheet_handle {
	display: block;
	width: 60px;
	height: 5px;
	background: var(--gray_300);
	border-radius: 2.5px;
	margin: 0 auto 20px;
}
.card_installment_sheet .sheet_title {
	font-size: 16px;
	font-weight: 600;
    text-align: left;
}
.card_installment_sheet .installment_list {
    height: 521px;
	overflow-y: auto;
	padding: 10px 15px 0;
	margin: 0;
	list-style: none;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.installment_list::-webkit-scrollbar {
	display: none;
}
.installment_item {
	padding: 10px 0;
	font-size: 14px;
	cursor: pointer;
    color: var(--gray_600);
}
.installment_item.is-selected {
	position: relative;
	color: var(--main_color);
	font-weight: 600;
}
.installment_item.is-selected::after {
	content: "\eb7b";
    font-family: "remixicon"!important;
	position: absolute;
	right: 0px;
	top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: normal;
    color: var(--main_color);
}

/* order.html 배송지 변경 */
.address_sheet {
	position: fixed;
    inset: 0;
    z-index: 20000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.address_sheet.is-open {
	opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s;
}
body.is-sheet-open {
	touch-action: none;
}
.address_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .3);
}
.address_container {
	position: absolute;
	left: 50%;
    transform: translateX(-50%) translateY(100%);
    transition: transform .28s ease;
	will-change: transform;
	bottom: 0;
    max-width: 640px;
	width: 100%;
	background: #fff;
	border-radius: 15px 15px 0 0;
	overflow: hidden;
}
.address_sheet.is-open .address_container {
	transform: translateX(-50%) translateY(0);
}

.address_sheet.is-dragging .address_container {
	transition: none;
}
.address_sheet .sheet_header {
    padding: 10px 15px 19px;
    border-bottom: 1px solid var(--gray_300);
}
.address_sheet .sheet_header .sheet_handle {
    display: block;
    width: 60px;
    height: 5px;
    border-radius: 2.5px;
    background-color: var(--gray_300);
    margin: 0 auto;
    cursor: grab;
}
.address_sheet.is-dragging .sheet_handle {
	cursor: grabbing;
}
.address_sheet .sheet_header .sheet_title {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 600;
}
.address_sheet .address_list .address_item {
    display: flex;
    gap: 10px;
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray_300);
    padding-top: 15px;
    cursor: pointer;
}
.address_sheet .address_list .address_item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.address_list {
	padding: 5px 15px 20px;
}
.address_list .address_radio {
    flex-shrink: 0;
    margin-top: 7px;
    width: 15px;
    display: block;
}
.address_list .address_radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.address_list .address_radio .radio_ui {
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--gray_300);
    cursor: pointer;
}
.address_list .address_item.is-selected .radio_ui {
	border-color: var(--main_color);
}
.address_list .address_item.is-selected .radio_ui::after {
	content: "";
	position: absolute;
    left: 2px;
    top: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--main_color);
}
.address_list .address_info {
    flex-grow: 1;
}
.address_list .address_info .address_top_box {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.address_list .address_info .address_top_box .address_name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
}
.address_list .address_info .address_top_box .address_name .badge {
    display: inline-block;
    padding: 2.5px 8px;
    background-color: var(--gray_100);
    font-size: 10px;
    font-weight: 500;
    color: var(--gray_800);
    border-radius: 10px;
}
.address_list .address_info .address_top_box .btn_edit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray_300);
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
}
.address_list .address_info .address_bottom_box {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--gray_800);
}
.address_sheet .btn_add_address {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: calc(100% - 30px);
    border-radius: 5px;
    border: 1px solid var(--gray_300);
    color: var(--gray_800);
    font-weight: bold;
    margin: 0 15px 20px;
}

/* order_complete.html */
.order_complete_wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 20px);
    padding-top: 60px;
    padding-bottom: 120px;
    margin-top: 20px;
}
.order_complete_wrap .order_complete_inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.order_complete_wrap .order_complete_inner .order_txt {
    font-size: 28px;
    font-weight: bold;
    color: var(--main_color);
    margin-bottom: 10px;
}
.order_complete_wrap .order_complete_inner .order_num {
    font-size: 14px;
    color: var(--gray_800);
}
.order_complete_wrap .order_complete_inner .order_img {
    width: 160px;
    height: 160px;
}
.order_complete_wrap .order_complete_inner .order_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.order_complete_wrap .order_complete_inner .order_desc {
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
}
.order_complete_wrap .order_complete_btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
}
.order_complete_wrap .order_complete_btns .complete_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main_color);
    border: 1px solid transparent;
    padding: 13px 10px;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}
.order_complete_wrap .order_complete_btns .complete_btn.outline {
    background-color: #fff;
    border: 1px solid #f199ac;
    color: var(--main_color);
}

/* my_address.html */
.my_address_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
}
.addr_list {
	display: flex;
    flex-direction: column;
    gap: 15px;
}
.addr_list .addr_item {
    display: flex;
    gap: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    border: solid 1px transparent;
    cursor: pointer;
}
.addr_list .addr_item.is-selected {
	border-color: var(--main_color);
}
.addr_list .addr_radio {
    flex-shrink: 0;
    margin-top: 7px;
    width: 15px;
    display: block;
}
.addr_list .addr_radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.addr_list .addr_radio .radio_ui {
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--gray_300);
    cursor: pointer;
}
.addr_list .addr_item.is-selected .radio_ui {
	border-color: var(--main_color);
}
.addr_list .addr_item.is-selected .radio_ui::after {
	content: "";
	position: absolute;
    left: 2px;
    top: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--main_color);
}
.addr_list .addr_info {
    flex-grow: 1;
}
.addr_list .addr_info .addr_top_box {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.addr_list .addr_info .addr_top_box .addr_name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
}
.addr_list .addr_info .addr_top_box .addr_name .badge {
    display: inline-block;
    padding: 2.5px 8px;
    background-color: var(--gray_100);
    font-size: 10px;
    font-weight: 500;
    color: var(--gray_800);
    border-radius: 10px;
}
.addr_list .addr_info .addr_btn_box {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray_600);
}
.addr_list .addr_info .addr_btn_box .btn_edit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray_300);
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
}
.addr_list .addr_info .addr_btn_box .btn_delete {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray_300);
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
}
.addr_list .addr_info .addr_bottom_box {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--gray_800);
}
.my_address_body .addr_add_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    padding: 13px 10px;
    text-align: center;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    background-color: #fff;
    font-size: 16px;
    font-weight: bold;
    color: var(--gray_800);
}

/* address_add.html */
.address_form_wrap .form_card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.address_form_wrap .form_card .form_label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}
.address_form_wrap .form_card input {
    width: 100%;
    height: 42px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid var(--gray_300);
    padding: 12px 15px;
    font-size: 12px;
}
.address_form_wrap .form_card input::placeholder {
    color: var(--gray_500);
}
.address_form_wrap .addr_search_row {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
.address_form_wrap .addr_search_row .btn_addr_search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 42px;
    border-radius: 5px;
    background-color: var(--gray_200);
    color: var(--gray_800);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.address_form_wrap .form_input.postcode,
.address_form_wrap .form_input.address_1 {
    background-color: var(--gray_100);
}
.address_form_wrap .form_input.address_1 {
    margin-bottom: 10px;
}
.address_form_wrap .check_custom {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}
.address_form_wrap .check_custom > input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.address_form_wrap .check_custom .check_ui {
    display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	border: 1px solid var(--gray_300);
	background: #fff;
    flex-shrink: 0;
	flex: 0 0 auto;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.address_form_wrap .check_custom .check_ui::after {
	content: "";
	width: 8px;
	height: 3px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	opacity: 0;
	transition: opacity .15s ease;
}
.address_form_wrap .check_custom > input:checked + .check_ui {
	background: var(--main_color);
	border-color: var(--main_color);
}
.address_form_wrap .check_custom > input:checked + .check_ui::after {
	opacity: 1;
}
.address_form_wrap .check_custom > input:focus-visible + .check_ui {
	outline: 3px solid rgb(220, 0, 48, 0.35);
	outline-offset: 2px;
}
.address_form_wrap .check_custom .check_text {
	font-size: 12px;
}

.address_form_wrap .btn_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    background-color: var(--main_color);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

/* address_edit.html */
.edit_form_wrap .form_card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.edit_form_wrap .form_card .form_label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}
.edit_form_wrap .form_card input {
    width: 100%;
    height: 42px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid var(--gray_300);
    padding: 12px 15px;
    font-size: 12px;
}
.edit_form_wrap .form_card input::placeholder {
    color: var(--gray_500);
}
.edit_form_wrap .addr_search_row {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
.edit_form_wrap .addr_search_row .btn_addr_search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 42px;
    border-radius: 5px;
    background-color: var(--gray_200);
    color: var(--gray_800);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.edit_form_wrap .form_input.postcode,
.edit_form_wrap .form_input.address_1 {
    background-color: var(--gray_100);
}
.edit_form_wrap .form_input.address_1 {
    margin-bottom: 10px;
}
.edit_form_wrap .check_custom {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}
.edit_form_wrap .check_custom > input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.edit_form_wrap .check_custom .check_ui {
    display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	border: 1px solid var(--gray_300);
	background: #fff;
    flex-shrink: 0;
	flex: 0 0 auto;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.edit_form_wrap .check_custom .check_ui::after {
	content: "";
	width: 8px;
	height: 3px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	opacity: 0;
	transition: opacity .15s ease;
}
.edit_form_wrap .check_custom > input:checked + .check_ui{
	background: var(--main_color);
	border-color: var(--main_color);
}
.edit_form_wrap .check_custom > input:checked + .check_ui::after{
	opacity: 1;
}
.edit_form_wrap .check_custom > input:focus-visible + .check_ui{
	outline: 3px solid rgb(220, 0, 48, 0.35);
	outline-offset: 2px;
}
.edit_form_wrap .check_custom .check_text {
	font-size: 12px;
}
.edit_form_wrap .btn_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    background-color: var(--main_color);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

/* address_empty.html */
.address_empty_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.address_empty_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.address_empty_inner .address_img {
    margin-bottom: 30px;
}
.address_empty_inner .text_1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.address_empty_inner .text_2 {
    font-size: 14px;
    color: var(--gray_800);
}
.address_empty_inner .addr_link {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22.5px;
    border: 1px solid #f199ac;
    color: var(--main_color);
    font-size: 14px;
    width: 160px;
    height: 45px;
    margin: 30px auto;
    font-weight: 500;
}

/* card_add.html */
.add_card_form .form_card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.add_card_form .form_card .form_label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}
.add_card_form .form_card input {
    width: 100%;
    height: 42px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid var(--gray_300);
    padding: 12px 15px;
    font-size: 12px;
    outline: none;
}
.add_card_form .form_card input::placeholder {
    color: var(--gray_500);
}
.add_card_form .form_card input[readonly] {
    background-color: var(--gray_100);
}
.add_card_form .btn_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    background-color: var(--main_color);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}
.add_card_form .agreement {
    text-align: center;
    font-size: 12px;
    color: var(--gray_600);
    margin-top: 15px;
}

/* myinfo.html */
.myinfo_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info_main_box {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
}
.info_main_box .info_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}
.info_main_box .info_top .top_inner {
    display: flex;
    gap: 15px;
    align-items: center;
}
.info_main_box .info_top .top_inner .user_img {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
}
.info_main_box .info_top .top_inner .user_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.info_main_box .info_top .user_text_wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}
.info_main_box .info_top .user_text_wrap .user_info {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
}
.info_main_box .user_text_wrap .user_info .user_grade {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 17px;
    height: 17px;
}
.info_main_box .user_text_wrap .user_info .user_grade img {
    width: 100%;
    height: 100%;
}
.info_main_box .info_top .user_text_wrap .user_number {
    font-size: 12px;
    color: var(--gray_600);
}
.info_main_box .info_top .my_settings_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--gray_300);
    font-size: 18px;
    color: var(--gray_600);
}
.info_main_box .info_point_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gray_50);
    border-radius: 5px;
    padding: 21px 15px;
    border-radius: 5px;
}
.info_main_box .info_point_box .info_point_text {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}
.info_main_box .info_point_box .info_point_text .point_img {
    display: block;
    width: 25px;
    height: 25px;
}
.info_main_box .info_point_box .point_box {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}
.info_main_box .info_point_box .point_box i {
    font-size: 24px;
    color: var(--gray_600);
    font-weight: normal;
}
.info_link_wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    width: 100%;
}
.info_link_wrap .info_link {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.info_link_wrap .info_link a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    color: var(--gray_600);
    padding: 20px;
}
.info_link_wrap .info_link .info_link_box {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--gray_900);
}
.my_info.logout_btn_box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid var(--gray_300);
    font-size: 16px;
    font-weight: bold;
    color: var(--gray_800);
    cursor: pointer;
}
.delete_wrap {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.delete_wrap .delete_account {
    display: inline-block;
    font-size: 12px;
    color: var(--gray_600);
    text-decoration: underline;
}

/* my_settings.html */
.my_info_form .form_card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.my_info_form .form_card .form_label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}
.my_info_form .form_card input {
    width: 100%;
    height: 42px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid var(--gray_300);
    padding: 12px 15px;
    font-size: 12px;
    outline: none;
}
.my_info_form .form_card input::placeholder {
    color: var(--gray_500);
}
.my_info_form .form_card input[readonly] {
    background-color: var(--gray_100);
}
.my_info_form .btn_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    background-color: var(--main_color);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

/* point_history.html */
.point_history_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.point_balance_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.point_balance_wrap .point_balance_label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
}
.point_balance_wrap .point_balance_label span {
    display: block;
    width: 28px;
    height: 28px;
}
.point_balance_wrap .point_balance_value {
    font-size: 28px;
    font-weight: bold;
}
.point_history_wrap {
    width: 100%;
    margin-top: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    background-color: #fff;
    font-size: 18px;
    font-weight: 600;
}
.point_history_wrap .point_history_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    border-bottom: 1px solid var(--gray_300);
}
.point_history_wrap .point_history_item:last-child {
    padding-bottom: 0;
    border: none;
}
.point_history_wrap .point_history_item .history_label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
}
.point_history_wrap .point_history_item .history_label span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--gray_100);
}
.point_history_wrap .point_history_item .history_label span img {
    width: 25px;
    height: 25px;
}
.point_history_wrap .point_history_item .point_value {
    font-size: 16px;
    font-weight: bold;
    color: var(--gray_600);
}
.point_history_wrap .point_history_item .point_value.blue {
    color: #0b6dff;
}

.point_history_wrap .point_history_empty_img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--gray_100);
    border-radius: 10px;
    padding: 50px 0;
    margin-top: 20px;
    font-weight: 500;
    color: var(--gray_500);
}
.point_history_wrap_wrap .point_history_empty_img .empty_txt {
    font-size: 16px;
    margin-top: 10px;
}

/* my_payments.html */
.my_payment_body {
	min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
}
.cardlist_wrap {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.cardlist_wrap .ttl {
    font-size: 18px;
    font-weight: 600;
}
.cardlist_wrap .cardlist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray_300);
}
.cardlist_wrap .cardlist li:last-child {
    border-bottom: 0;
}
.cardlist_wrap .cardlist .textarea {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20px;
}
.cardlist_wrap .cardlist .textarea .card_name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.cardlist_wrap .cardlist .textarea .card_info {
    display: flex;
    font-size: 12px;
    color: var(--gray_600);
}
.cardlist_wrap .cardlist .textarea .card_info .card_type {
    display: flex;
    align-items: center;
}
.cardlist_wrap .cardlist .textarea .card_info .card_type::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: var(--gray_300);
    margin: 0 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cardlist_wrap .cardlist .delete_btn {
    padding: 6px;
    border-radius: 50%;
    border: 1px solid var(--gray_300);
    background-color: white;
    cursor: pointer;
}
.cardlist_wrap .cardlist .delete_btn i {
    font-size: 18px;
	color: var(--gray_600);
}
.my_payment_body .registration_link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: var(--main_color);
    border-radius: 5px;
}

/* my_payments_empty.html */
.payments_empty_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.payments_empty_body .payments_empty_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.payments_empty_inner .account_img {
    margin-bottom: 30px;
}
.payments_empty_inner .account_img img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}
.payments_empty_inner .text_1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.payments_empty_inner .text_2 {
    font-size: 14px;
    color: var(--gray_800);
}
.payments_empty_inner .payments_link {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22.5px;
    border: 1px solid #f199ac;
    color: var(--main_color);
    font-size: 14px;
    width: 160px;
    height: 45px;
    margin: 30px auto;
    font-weight: 500;
}

/* app_settings.html */
.app_settings_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
}
.app_settings_wrap {
    width: 100%;
}
.app_settings_wrap .app_setting_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.app_settings_wrap .app_setting_list .app_setting_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 20px;
    background-color: #fff;
    font-size: 24px;
    color: var(--gray_600);
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.app_settings_wrap .app_setting_list .app_setting_item a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.app_settings_wrap .app_setting_list .app_setting_item .inner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--gray_900);
}
.app_settings_wrap .app_setting_list .app_setting_item .inner span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
}

/* order_list_empty.html, order_list.html, order_detail.html */
.order_list_body {
    min-height: calc(100vh - 115px - 70px);
    padding-bottom: 165px;
    margin-top: 20px;
}
.order_list_body.empty {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 95px;
}
.order_list .period_list {
    display: flex;
    gap: 10px;
    margin-top: 80px;
}
.order_list .period_list li button {
    padding: 7px 15px;
    border: 1px solid var(--gray_300);
    font-weight: 500;
    font-size: 14px;
    border-radius: 20px;
    color: var(--gray_600);
    background-color: white;
    cursor: pointer;
}
.order_list .period_list li button.active {
    background-color: var(--gray_900);
    color: white;
}
.orderlist_inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.orderlist_inner .orderlist_item {
    position: relative;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.orderlist_item .order_detail_link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.orderlist_inner .orderlist_item .title_area {
    display: flex;
	justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 18px;
	font-weight: 600;
    margin-bottom: 20px;
}
.orderlist_inner .orderlist_item .title_area i {
    font-size: 24px;
    color: var(--gray_600);
}
.orderlist_inner .orderlist_item .orderlist_item_inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.orderlist_inner .order_state {
    padding: 15px;
    border-radius: 5px;
    background-color: var(--gray_50);
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
}
.orderlist_inner .order_state .delivery_status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--main_color);
}
.orderlist_inner .order_state .delivery_status .bar {
    width: 1px;
    height: 11px;
    background-color: var(--gray_400);
    flex-shrink: 0;
}
.orderlist_inner .order_state .delivery_status i {
    font-size: 14px;
    color: var(--gray_600);
}
.orderlist_inner .order_state .delivery_status.done,
.orderlist_inner .order_state .delivery_status.ready {
    color: var(--gray_600);
}
.orderlist_inner .order_state .delivery_link {
    position: relative;
    z-index: 2;
}
.orderlist_inner .order_prd_wrap {
    display: flex;
    flex-direction: column;
}
.orderlist_inner .order_prd_wrap .order_prd {
    display: flex;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray_300);
}
.orderlist_inner .order_prd_wrap .order_prd.detail {
    flex-direction: column;
    gap: 20px;
}
.orderlist_inner .order_prd_wrap .order_prd.detail .prd_detail {
    display: flex;
    gap: 10px;
}
.orderlist_inner .order_prd_wrap .order_prd:nth-of-type(1) {
    padding-top: 0;
}
.orderlist_inner .order_prd_wrap .order_prd:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.orderlist_inner .order_prd_wrap .order_prd .thum {
    width: 140px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}
.orderlist_inner .order_prd .product_info {
    flex-grow: 1;
}
.orderlist_inner .order_prd .product_info .prd_name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.orderlist_inner .order_prd .product_info .prd_type {
    font-size: 12px;
    color: var(--gray_600);
    margin-bottom: 10px;
}
.orderlist_inner .order_prd .product_info .prd_price {
    font-size: 12px;
    color: var(--gray_800);
}
.orderlist_inner .order_prd .product_info .prd_price span {
    font-size: 16px;
    font-weight: bold;
}
.order_detail_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 165px;
    margin-top: 20px;
}
.order_detail_body .order_detail_title {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.order_detail_body .order_detail_title .order_date {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray_300);
}
.order_detail_body .order_detail_title .order_addr_box .addr_title {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
}
.order_detail_body .order_detail_title .order_addr_box .addr_info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--gray_800);
    font-size: 12px;
}
.orderlist_inner .order_prd_wrap .order_prd.detail .prd_btn_wrap {
    display: flex;
    gap: 10px;
}
.orderlist_inner .order_prd_wrap .prd_btn_wrap .prd_btn {
    border: 1px solid var(--gray_300);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10.5px;
    color: var(--gray_800);
    width: calc((100% - 10px) / 2);
    font-size: 14px;
    font-weight: 500;
    border-radius: 22.5px;
    cursor: pointer;
}
.orderlist_inner .order_prd_wrap .prd_btn_wrap .prd_btn.done {
    width: 100%;
}
.order_detail_body .summary_pay_box {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
}
.order_detail_body .summary_pay_box .summary_pay_ttl {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.order_detail_body .summary_pay_box .summary_rows_wrap .summary_rows {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray_300);
}
.order_detail_body .summary_pay_box .summary_rows_wrap .summary_rows:first-child {
    padding-top: 0;
}
.order_detail_body .summary_pay_box .summary_rows_wrap .summary_rows:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.order_detail_body .summary_pay_box .summary_rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order_detail_body .summary_pay_box .summary_rows .summary_row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: var(--gray_600);
    font-size: 12px;
}
.order_detail_body .summary_pay_box .summary_row .summary_key.total {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray_900);
}
.order_detail_body .summary_pay_box .summary_row .summary_val {
    font-size: 12px;
    color: var(--gray_900);
}
.order_detail_body .summary_pay_box .summary_row .summary_val span {
    font-size: 14px;
    font-weight: 600;
}
.order_detail_body .summary_pay_box .summary_row .summary_val.total {
    font-size: 16px;
    color: var(--main_color);
}
.order_detail_body .summary_pay_box .summary_row .summary_val.total span {
    font-size: 18px;
    font-weight: bold;
}
.order_detail_body .summary_pay_box .summary_row .summary_val.point {
    color: var(--main_color);
    font-weight: 600;
    font-size: 14px;
}
.order_detail_body .summary_addr_box {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
}
.order_detail_body .summary_addr_box .summary_addr_ttl {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.order_detail_body .summary_addr_box .addr_rows {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.order_detail_body .summary_addr_box .addr_rows .addr_row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}
.order_detail_body .summary_addr_box .addr_row .addr_key {
    flex-shrink: 0;
    width: 46px;
    color: var(--gray_600);
}
.order_detail_body .summary_addr_box .addr_row .addr_val {
    text-align: right;
    word-break: break-all;
}

/* login.html */
.login_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 75px;
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login_inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.login_inner .login_text {
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
}
.login_inner .login_desc {
    margin-top: 10px;
    font-size: 14px;
    color: var(--gray_800);
}
.login_inner .login_link_wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}
.login_inner .login_link_wrap .login_link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    max-width: 440px;
    width: 100%;
    background-color: #ffdd00;
    font-size: 16px;
    font-weight: bold;
    border-radius: 25px;
    padding: 13px 10px;
}
.login_inner .login_link_wrap .login_link span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
}

/* seller.html, seller_empty.html */
.seller_wrap {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 165px;
    margin-top: 20px;
}
.seller_wrap .fee_card {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.seller_wrap .fee_card_top .fee_row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
}
.seller_wrap .fee_card_top .fee_row .fee_price {
    font-size: 20px;
    font-weight: 500;
}
.seller_wrap .fee_card_top .fee_row .fee_price span {
    color: var(--main_color);
    font-size: 28px;
    font-weight: bold;
}
.seller_wrap .fee_card_top .fee_link_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.seller_wrap .fee_card_top .fee_link_wrap .fee_btn {
    background-color: var(--main_color);
    border: 1px solid transparent;
    padding: 13px 10px;
    color: #fff;
    border-radius: 5px;
}
.seller_wrap .fee_card_top .fee_link_wrap .fee_btn.outline {
    background-color: #fff;
    border: 1px solid var(--main_color);
    color: var(--main_color);
}
.seller_wrap .fee_card_bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.seller_wrap .fee_card_bottom .card_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
}
.seller_wrap .fee_card_bottom .card_row .card_label {
    width: 176px;
    flex-shrink: 0;
}
.seller_wrap .fee_card_bottom .card_row .code_box {
    position: relative;
    width: calc(100% - 176px);
}
.seller_wrap .fee_card_bottom .code_box input {
    width: 100%;
    height: 50px;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    padding: 0 100px 0 15px;
    font-size: 12px;
    color: var(--gray_800);
}
.seller_wrap .fee_card_bottom .code_box input[readonly] {
    background-color: var(--gray_100);
}
.seller_wrap .fee_card_bottom .card_row .code_box .btn_copy {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 74px;
    height: 32px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: var(--gray_600);
    border-radius: 5px;
}
.seller_wrap .fee_card_bottom .card_row .code_box .btn_copy i {
    font-size: 18px;
}
.seller_wrap .fee_card_bottom .card_row .seller_link_btn {
    flex-grow: 1;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--main_color);
    background-color: #fff;
    font-weight: bold;
    color: var(--main_color);
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
.seller_wrap .seller_empty_img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--gray_100);
    border-radius: 10px;
    padding: 50px 0;
    margin-top: 20px;
    font-weight: 500;
    color: var(--gray_500);
}
.seller_wrap .seller_empty_img .empty_txt {
    font-size: 16px;
    margin-top: 10px;
}
@media (max-width: 480px) {
    .seller_wrap .fee_card_bottom .card_row .card_label {
        width: 70px;
    }
    .seller_wrap .fee_card_bottom .card_row .code_box {
        width: calc(100% - 70px);
    }
    .seller_wrap .fee_card_bottom .code_box input {
        padding: 0 70px 0 10px;
    }
    .seller_wrap .fee_card_bottom .card_row .code_box .btn_copy {
        right: 5px;
        gap: 3px;
        width: 54px;
        height: 32px;
        font-size: 12px;
    }
    .seller_wrap .fee_card_bottom .card_row .code_box .btn_copy i {
        font-size: 16px;
    }
    .seller_wrap .seller_empty_img {
        padding: 20px 0;
        margin-top: 15px;
    }
    .seller_wrap .seller_empty_img .empty_txt {
        font-size: 14px;
        margin-top: 5px;
    }
}
.commission_history {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.commission_history .commission_ttl {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.commission_history .period_filter_group {
    display: flex;
    gap: 10px;
}
.commission_history .period_filter_group .period_filter_btn {
    display: inline-flex;
    white-space: nowrap;
    padding: 7px 15px;
    border-radius: 20px;
    border: 1px solid var(--gray_300);
    color: var(--gray_600);
    font-size: 14px;
    font-weight: 500;
}
.commission_history .period_filter_group .period_filter_btn.is-active {
    background-color: var(--gray_900);
    color: #fff;
    border-color: 1px solid var(--gray_900);
}
@media (max-width: 480px) {
    .commission_history .period_filter_group {
        flex-wrap: wrap;
        gap: 5px;
    }
}
.commission_history .date_range {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-top: 15px;
    font-size: 12px;
}
.commission_history .date_range .date_tilde {
    flex-shrink: 0;
}
.commission_history .date_range .date_box {
    position: relative;
    width: calc((100% - 30px) / 2);
    cursor: pointer;
}
.commission_history .date_range .date_box input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    background-color: #fff;
    padding: 0 40px 0 15px;
    font-size: 12px;
    cursor: pointer;
}
.commission_history .date_range .date_box input::placeholder {
    color: var(--gray_500);
}
.commission_history .date_range .date_box i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    font-size: 18px;
    color: var(--gray_700);
}
.commission_history .commission_list {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}
.commission_history .commission_list .commission_item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--gray_300);
}
.commission_history .commission_list .commission_item:last-child {
    padding-bottom: 0;
    border: none;
}
.commission_history .commission_item .state_badge span {
    display: inline-flex;
    white-space: nowrap;
    padding: 2.5px 8px;
    background-color: var(--gray_100);
    color: #0b6dff;
    font-size: 10px;
    font-weight: 500;
    border-radius: 5px;
}
.commission_history .commission_item .state_badge.is-settled span {
    color: var(--gray_600);
}
.commission_history .commission_item .state_badge.is-canceled span {
    background-color: var(--gray_400);
    color: #fff;
}
.commission_history .commission_item .comm_inner {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
.commission_history .comm_inner .comm_info .comm_date {
    font-size: 12px;
    color: var(--gray_700);
    margin-bottom: 5px;
}
.commission_history .comm_inner .comm_info .comm_name {
    font-size: 16px;
    font-weight: 500;
}
.commission_history .comm_inner .comm_amount_box {
    text-align: right;
    font-size: 12px;
}
.commission_history .comm_inner .comm_amount_box .comm_amount span {
    font-size: 18px;
    font-weight: bold;
}
.commission_history .comm_inner .comm_amount_box .comm_amount.is-settled span {
    color: #0b6dff;
}
.commission_history .comm_inner .comm_amount_box .comm_amount.is-canceled span {
    position: relative;
    color: var(--gray_600);
}
.commission_history .comm_inner .comm_amount_box .comm_amount.is-canceled span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background-color: var(--gray_600);
    transform: translateY(-50%);
}
.commission_history .comm_inner .comm_amount_box .comm_balance {
    margin-top: 4px;
    color: var(--gray_500);
}

/* seller.html 달력 모달 */
.date_sheet_dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 9990;
}
.date_sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9991;
    pointer-events: none;
}
.date_sheet .date_panel {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background:#fff;
    border-radius: 15px 15px 0 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(100%);
    transition:transform .25s ease;
    will-change: transform;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08);
    pointer-events:auto;
    touch-action:none;
}
.date_sheet.is-open { pointer-events:auto; }
.date_sheet.is-open .date_panel {
    transform: translateX(-50%) translateY(0);
}
.date_sheet_dim.is-open {
    opacity:1;
    pointer-events:auto;
}
.date_sheet .date_sheet_handle {
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top: 10px;
    padding-bottom: 20px;
}
.date_sheet .date_sheet_handle .handle_bar {
    width: 60px;
    height: 5px;
    border-radius: 2.5px;
    background-color: var(--gray_300);
}
.date_sheet .date_sheet_head {
    border-bottom: 1px solid var(--gray_300);
    padding-bottom: 19px;
}
.date_sheet .date_sheet_head .date_title {
    font-size: 16px;
    font-weight: 600;
    padding: 0 15px;
}
.date_sheet .wheel_wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 20px 15px;
    height: 250px;
    overflow: hidden;
}
.date_sheet .wheel_wrap::after {
    content: "";
    position: absolute;
    width: 100%;
    top: 20px;
    height: 42px;
    background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}
.date_sheet .wheel_wrap::before {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 20px;
    height: 42px;
    background-image: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
}
.date_sheet .wheel_wrap .wheel_col {
    height:100%;
    overflow: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    scrollbar-width: none;
}
.date_sheet .wheel_wrap .wheel_col::-webkit-scrollbar { display:none; }
.date_sheet .wheel_wrap .wheel_item {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray_600);
    scroll-snap-align: center;
    user-select: none;
}
.date_sheet .wheel_wrap .wheel_item.is-selected {
    color: var(--main_color);
}
.date_sheet .wheel_wrap .wheel_highlight {
    position: absolute;
    left: 15px;
    right: 15px;
    top: calc(50% - 21px);
    height: 42px;
    background-color: #fce6ea;
    pointer-events:none;
    z-index: -1;
}
.date_sheet .date_sheet_bottom { padding :0 15px 20px; }
.date_sheet .sheet_confirm {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    background-color: var(--main_color);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}
html.is-date-sheet-open, body.is-date-sheet-open {
    touch-action: none;
}

/* seller_link.html */
.seller_link_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 150px;
    margin-top: 20px;
}
.seller_link_body .seller_link_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.seller_link_body .seller_link_list .seller_link_item {
    display: flex;
    gap: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.seller_link_body .seller_link_list .seller_link_item.is-ended {
    opacity: 0.4;
    pointer-events: none;
}
.seller_link_body .seller_link_list .seller_link_item.is-ended .seller_link_img::after {
    content: "판매종료";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
}
.seller_link_body .seller_link_list .seller_link_item .seller_link_img {
    position: relative;
    width: 140px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.seller_link_body .seller_link_list .seller_link_item .seller_link_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.seller_link_body .seller_link_list .seller_link_item .seller_link_info {
    flex-grow: 1;
}
.seller_link_body .seller_link_list .seller_link_item .seller_link_info .title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    word-break: break-all;
}
.seller_link_body .seller_link_list .seller_link_item .seller_link_info .date_box {
    color: var(--gray_600);
    font-size: 12px;
}
.seller_link_body .seller_link_list .seller_link_item .seller_link_info .link_copy_btn {
    width: 95px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: #fff;
    background-color: var(--gray_600);
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
    cursor: pointer;
}
.seller_link_body .seller_link_list .seller_link_item .seller_link_info .link_copy_btn i {
    font-size: 18px;
}
@media (max-width: 400px) {
    .seller_link_body .seller_link_list .seller_link_item .seller_link_img {
        width: 100px;
        height: 50px;
    }
}

/* account_manage_empty.html */
.account_empty_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.account_empty_body .account_empty_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.account_empty_body .account_img {
    margin-bottom: 30px;
}
.account_empty_body .account_img img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}
.account_empty_inner .text_1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.account_empty_inner .text_2 {
    font-size: 14px;
    color: var(--gray_800);
}
.account_empty_inner .account_link {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22.5px;
    border: 1px solid #f199ac;
    color: var(--main_color);
    font-size: 14px;
    width: 160px;
    height: 45px;
    margin: 30px auto;
    font-weight: 500;
}

/* account_add.html */
.add_account_form .form_card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.add_account_form .form_card .bank_select_wrap {
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    overflow: hidden;
}
.add_account_form .form_card .bank_select_wrap .bank_select {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    width: 100%;
    height: 42px;
    background-color: #fff;
    color: var(--gray_800);
    cursor: pointer;
}
.add_account_form .form_card .bank_select_wrap .bank_select i {
    font-size: 19px;
    color: var(--gray_600);
    transition: transform 0.25s ease;
}
.bank_select_wrap .bank_select[aria-expanded="true"] i {
	transform: rotate(180deg);
}
.bank_select_wrap .bank_opt {
    border-top: 1px solid var(--gray_300);
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: var(--gray_800);
}
.add_account_form .form_card .form_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
}
.add_account_form .form_card .form_row input {
    width: 100%;
    height: 42px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid var(--gray_300);
    padding: 12px 15px;
    font-size: 12px;
}
.add_account_form .form_card input::placeholder {
    color: var(--gray_500);
}
.add_account_form .form_card .form_actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
}
.add_account_form .form_card .form_actions .account_btn {
    display: block;
    background-color: var(--main_color);
    border: 1px solid transparent;
    padding: 13px 10px;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.add_account_form .form_card .form_actions .account_btn.outline {
    background-color: #fff;
    border: 1px solid #f199ac;
    color: var(--main_color);
}

/* account_manage.html, .account_delete.html */
.account_manage_body {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 95px;
    margin-top: 20px;
}
.account_manage_body .delete_account_box {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.account_manage_body .delete_account_box .delete_link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray_300);
    color: var(--gray_600);
    font-size: 18px;
    background-color: #fff;
    border-radius: 50%;
}
.account_manage_body .account_list_box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.account_manage_body .account_list_box .account_item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.account_manage_body .account_item .account_info {
    display: flex;
    gap: 10px;
    align-items: center;
}
.account_manage_body .account_item .account_img img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.account_manage_body .account_item .bank_name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.account_manage_body .account_item .account_num {
    font-size: 12px;
    color: var(--gray_800);
}
.account_manage_body .account_list_box .account_item .account_edit_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray_300);
    color: var(--gray_600);
    font-size: 18px;
    background-color: #fff;
    border-radius: 50%;
}
.account_manage_body .add_account_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    text-align: center;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    background-color: #fff;
    color: var(--gray_800);
    font-weight: bold;
    padding: 13px 10px;
    font-size: 16px;
}
.account_manage_body .back_btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.account_manage_body .back_btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray_300);
    color: var(--gray_600);
    font-size: 18px;
    background-color: #fff;
    border-radius: 50%;
}
.account_manage_body .delete_account_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    text-align: center;
    border: 1px solid #f199ac;
    border-radius: 5px;
    background-color: #fff;
    color: var(--main_color);
    font-weight: bold;
    padding: 13px 10px;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
}
.account_manage_body .account_manage_list {
	display: flex;
    flex-direction: column;
    gap: 15px;
}
.account_manage_body .account_manage_list .account_item {
    display: flex;
    gap: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    border: solid 1px transparent;
    cursor: pointer;
}
.account_manage_body .account_manage_list .account_item.is-selected {
	border-color: var(--main_color);
}
.account_manage_body .account_item .account_radio {
    flex-shrink: 0;
    width: 15px;
    display: block;
}
.account_manage_body .account_item .account_radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.account_manage_body .account_item .account_radio .radio_ui {
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--gray_300);
    cursor: pointer;
}
.account_manage_body .account_item.is-selected .radio_ui {
	border-color: var(--main_color);
}
.account_manage_body .account_item.is-selected .radio_ui::after {
	content: "";
	position: absolute;
    left: 2px;
    top: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--main_color);
}

/* withdraw.html, withdraw_empty.html */
.withdraw_wrap {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 165px;
    margin-top: 20px;
}
.withdraw_form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    background-color: #fff;
}
.withdraw_form .form_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
}
.withdraw_form .form_row input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    padding: 0 15px;
    font-size: 12px;
    font-weight: normal;
}
.withdraw_form .form_row input::placeholder {
    color: var(--gray_500);
}
.withdraw_form .form_row .wd_info_wrap {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 10px;
    color: var(--gray_800);
    font-weight: normal;
}
.withdraw_form .form_row .wd_info_wrap .caution {
    color: #ed7327;
}
.withdraw_form .form_row .wd_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    padding: 0 15px;
    font-size: 12px;
    font-weight: normal;
    color: var(--gray_800);
    background-color: #fff;
    cursor: pointer;
}
.withdraw_form .form_row .wd_select i {
    font-size: 19px;
    color: var(--gray_600);
}
.withdraw_form .wd_form_actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.withdraw_form .wd_form_actions .withdraw_bth {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: var(--main_color);
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
}
.withdraw_form .wd_form_actions .withdraw_bth.outline {
    color: var(--main_color);
    background-color: #fff;
    border-color: #f199ac;
}
.withdraw_wrap .withdraw_history {
    width: 100%;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    background-color: #fff;
    font-size: 18px;
    font-weight: 600;
}
.withdraw_wrap .withdraw_history .withdraw_list {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.withdraw_wrap .withdraw_list .withdraw_item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--gray_300);
}
.withdraw_wrap .withdraw_list .withdraw_item:last-child {
    padding-bottom: 0;
    border: none;
}
.withdraw_wrap .withdraw_list .withdraw_item .state_badge span {
    display: inline-flex;
    white-space: nowrap;
    padding: 2.5px 8px;
    background-color: var(--gray_100);
    color: var(--main_color);
    font-size: 10px;
    font-weight: 500;
    border-radius: 5px;
}
.withdraw_wrap .withdraw_list .withdraw_item .state_badge.is-complete span {
    color: var(--gray_600);
}
.withdraw_wrap .withdraw_item .wd_inner {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
.withdraw_wrap .wd_inner .wd_info .wd_date {
    font-size: 12px;
    color: var(--gray_700);
    margin-bottom: 5px;
    font-weight: normal;
}
.withdraw_wrap .wd_inner .wd_info .wd_name {
    font-size: 16px;
    font-weight: 500;
    max-width: 140px;
    word-break: break-all;
}
.withdraw_wrap .wd_inner .wd_amount_box .wd_amount {
    text-align: right;
    font-size: 12px;
}
.withdraw_wrap .wd_inner .wd_amount_box .wd_amount span {
    font-size: 18px;
    font-weight: bold;
}
.withdraw_wrap .wd_inner .wd_amount_box .wd_amount.is-complete span {
    color: var(--main_color);
}
.withdraw_wrap .wd_inner .wd_amount_box .wd_balance {
    margin-top: 4px;
    color: var(--gray_500);
    font-size: 12px;
    font-weight: normal;
}
.withdraw_wrap .withdraw_empty_img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--gray_100);
    border-radius: 10px;
    padding: 50px 0;
    margin-top: 20px;
    font-weight: 500;
    color: var(--gray_500);
}
.withdraw_wrap .withdraw_empty_img .withdraw_txt {
    font-size: 16px;
    margin-top: 10px;
}
@media (max-width: 480px) {
    .withdraw_wrap .withdraw_empty_img {
        padding: 20px 0;
        margin-top: 15px;
    }
    .withdraw_wrap .withdraw_empty_img .withdraw_txt {
        font-size: 14px;
        margin-top: 5px;
    }
}

/* withdraw.html 계좌 선택 모달 */
.wd_select_sheet {
	position: fixed;
    inset: 0;
    z-index: 20000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.wd_select_sheet.is-open {
	opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s;
}
body.is-wd-open {
	touch-action: none;
}
.wd_select_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .3);
}
.wd_select_container {
	position: absolute;
	left: 50%;
    transform: translateX(-50%) translateY(100%);
    transition: transform .28s ease;
	will-change: transform;
	bottom: 0;
    max-width: 640px;
	width: 100%;
	background: #fff;
	border-radius: 15px 15px 0 0;
	overflow: hidden;
}
.wd_select_sheet.is-open .wd_select_container {
	transform: translateX(-50%) translateY(0);
}
.wd_select_sheet.is-dragging .wd_select_container {
	transition: none;
}
.wd_select_sheet .sheet_header {
    padding: 10px 15px 19px;
    border-bottom: 1px solid var(--gray_300);
}
.wd_select_sheet .sheet_header .sheet_handle {
    display: block;
    width: 60px;
    height: 5px;
    border-radius: 2.5px;
    background-color: var(--gray_300);
    margin: 0 auto;
    cursor: grab;
}
.wd_select_sheet.is-dragging .sheet_handle {
	cursor: grabbing;
}
.wd_select_sheet .sheet_header .sheet_title {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 600;
}
.wd_select_sheet .wd_select_list {
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.wd_select_sheet .wd_select_list .wd_item {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray_300);
    cursor: pointer;
}
.wd_select_sheet .wd_select_list .wd_item:first-child {
    padding-top: 0;
}
.wd_select_sheet .wd_select_list .wd_item:last-child {
    border-bottom: none;
    border: none;
}
.wd_select_list .wd_radio {
    flex-shrink: 0;
    width: 15px;
    display: block;
}
.wd_select_list .wd_radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.wd_select_list .wd_item .radio_ui {
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--gray_300);
    cursor: pointer;
}
.wd_select_list .wd_item.is-selected .radio_ui {
	border-color: var(--main_color);
}
.wd_select_list .wd_item.is-selected .radio_ui::after {
	content: "";
	position: absolute;
    left: 2px;
    top: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--main_color);
}
.wd_select_sheet .wd_item .account_info {
    flex-grow: 1;
}
.wd_select_sheet .wd_item .account_info .bank_name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.wd_select_sheet .wd_item .account_info .account_num {
    font-size: 12px;
    color: var(--gray_800);
}

/* withdraw.html 출금신청완료 모달 */
.wd_complete_sheet {
	position: fixed;
    inset: 0;
    z-index: 20000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.wd_complete_sheet.is-open {
	opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s;
}
.wd_complete_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .3);
}
.wd_complete_container {
	position: absolute;
	left: 50%;
    transform: translateX(-50%) translateY(100%);
    transition: transform .28s ease;
	will-change: transform;
	bottom: 0;
    max-width: 640px;
	width: 100%;
	background: #fff;
	border-radius: 15px 15px 0 0;
	overflow: hidden;
}
.wd_complete_sheet.is-open .wd_complete_container {
	transform: translateX(-50%) translateY(0);
}
.wd_complete_sheet.is-dragging .wd_complete_container {
	transition: none;
}
.wd_complete_sheet .sheet_header {
    padding: 10px 15px 20px;
}
.wd_complete_sheet .sheet_header .sheet_handle {
    display: block;
    width: 60px;
    height: 5px;
    border-radius: 2.5px;
    background-color: var(--gray_300);
    margin: 0 auto;
    cursor: grab;
}
.wd_complete_sheet.is-dragging .sheet_handle {
	cursor: grabbing;
}
.wd_complete_sheet .complete_inner {
    padding: 30px 15px 20px;
}
.wd_complete_sheet .complete_inner .complete_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px;
    font-weight: bold;
    font-size: 22px;
}
.wd_complete_sheet .complete_inner .complete_text .complete_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fce6ea;
    color: var(--main_color);
    font-size: 24px;
}
.wd_complete_sheet .complete_inner .complete_btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 50px;
}
.wd_complete_sheet .complete_btns .complete_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: var(--main_color);
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
}
.wd_complete_sheet .complete_btns .complete_btn.outline {
    border: 1px solid #f199ac;
    background-color: #fff;
    color: var(--main_color);
}

/* close_account.html */
.close_account_form {
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
}
.close_account_form .notice_box .notice_ttl {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.close_account_form .notice_box .notice_list {
    padding: 15px;
    background-color: var(--gray_50);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 10px;
}

.close_account_form .notice_agree {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}
.close_account_form .notice_agree  input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.close_account_form .notice_agree .agree_ui {
    display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	border: 1px solid var(--gray_300);
	background: #fff;
    flex-shrink: 0;
	flex: 0 0 auto;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.close_account_form .notice_agree .agree_ui::after {
	content: "";
	width: 8px;
	height: 3px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	opacity: 0;
	transition: opacity .15s ease;
}
.close_account_form .notice_agree  input:checked + .agree_ui {
	background: var(--main_color);
	border-color: var(--main_color);
}
.close_account_form .notice_agree  input:checked + .agree_ui::after {
	opacity: 1;
}
.close_account_form .notice_agree  input:focus-visible + .agree_ui {
	outline: 3px solid rgb(220, 0, 48, 0.35);
	outline-offset: 2px;
}
.close_account_form .notice_agree .agree_txt {
	font-size: 12px;
    color: var(--gray_800);
}
.close_account_form .form_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
}
.close_account_form .form_row input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    padding: 0 15px;
    font-size: 12px;
    font-weight: normal;
}
.close_account_form .form_row input::placeholder {
    color: var(--gray_800);
}
.close_account_form .form_row .close_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    padding: 0 15px;
    font-size: 12px;
    font-weight: normal;
    color: var(--gray_800);
    background-color: #fff;
    cursor: pointer;
}
.close_account_form .form_row .close_select i {
    font-size: 19px;
    color: var(--gray_600);
}
.close_account_form .form_action_btns {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
}
.close_account_form .form_action_btns .close_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13px 10px;
    border-radius: 5px;
    background-color: var(--gray_400);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid transparent;
    cursor: pointer;
}
.close_account_form .form_action_btns .close_account_btn.done {
    background-color: var(--main_color);
}
.close_account_form .form_action_btns .close_btn.outline {
    border-color: var(--main_color);
    color: var(--main_color);
    background-color: #fff;
}
.close_account_form .reason_extra {
    margin-top: 10px;
}
.close_account_form .reason_extra textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--gray_300) !important;
    padding: 12px 14px;
    font-size: 12px;
    height: 142px;
    outline: none;
    border-radius: 5px;
}
.close_account_form .reason_extra textarea::placeholder {
    color: var(--gray_500);
}
.close_account_form .reason_extra .text_count {
    text-align: right;
    font-size: 12px;
    color: var(--gray_600);
    margin-top: 10px;
}

/* close_account.html 사유 선택 */
.select_reason_sheet {
	position: fixed;
	inset: 0;
	z-index: 1000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.select_reason_sheet.is-open {
	opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s;
}
.select_reason_sheet .reason_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .3);
}
.select_reason_sheet .reason_container {
	position: absolute;
	left: 50%;
	bottom: 0;
    max-width: 640px;
	width: 100%;
	background: #fff;
	border-radius: 15px 15px 0 0;
    transform: translateX(-50%) translateY(100%);
    transition: transform .28s ease;
	will-change: transform;
	overflow: hidden;
}
.select_reason_sheet.is-open .reason_container {
	transform: translateX(-50%) translateY(0);
}
.select_reason_sheet.is-dragging .reason_container { transition:none; }
.select_reason_sheet .sheet_header { cursor: grab; }
.select_reason_sheet.is-dragging .sheet_header { cursor: grabbing; }
.select_reason_sheet .sheet_header {
	padding: 10px 15px 20px;
	text-align: center;
	border-bottom: 1px solid var(--gray_300);
}
.select_reason_sheet .sheet_handle {
	display: block;
	width: 60px;
	height: 5px;
	background: var(--gray_300);
	border-radius: 2.5px;
	margin: 0 auto 20px;
}
.select_reason_sheet .sheet_title {
	font-size: 16px;
	font-weight: 600;
    text-align: left;
}
.select_reason_sheet .reason_list {
	padding: 10px 15px;
	margin: 0;
	list-style: none;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.reason_list::-webkit-scrollbar {
	display: none;
}
.reason_item {
	padding: 10px 0;
	font-size: 14px;
	cursor: pointer;
    color: var(--gray_600);
}
.reason_item.is-selected {
	position: relative;
	color: var(--main_color);
	font-weight: 600;
}
.reason_item.is-selected::after {
	content: "\eb7b";
    font-family: "remixicon"!important;
	position: absolute;
	right: 0px;
	top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: normal;
    color: var(--main_color);
}

/* close_account_complete.html */
.close_complete_wrap {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 75px;
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.close_complete_wrap .close_complete_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.close_complete_inner .close_txt {
    font-size: 28px;
    font-weight: bold;
    margin-top: 30px;
}
.close_complete_inner .close_desc {
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 18px;
    color: var(--gray_800);
}
.close_complete_inner .close_complete_btn {
    width: 280px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #f199ac;
    border-radius: 5px;
    background-color: #fff;
    font-size: 16px;
    font-weight: bold;
    color: var(--main_color);
}

/* simple_pin_setup.html, simple_pin_confirm.html, simple_pin_enter.html */
.simple_pin_wrap {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    height: 100vh;
    min-height: 100vh;
    padding-top: 60px;
    display:flex;
    justify-content:center;
}
.simple_pin_wrap .pin_panel {
    display:flex;
    flex-direction:column;
    width: 100%;
}
.simple_pin_wrap .pin_panel .pin_label {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--main_color);
}
.simple_pin_wrap .pin_panel .pin_ttl {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}
.simple_pin_wrap .pin_panel .pin_ttl.confirm {
    margin-bottom: 80px;
}
.simple_pin_wrap .pin_panel .pin_ttl.enter {
    margin-bottom: 50px;
}
.simple_pin_wrap .pin_panel .pin_desc {
    color: var(--gray_800);
    font-size: 14px;
    margin-bottom: 50px;
}
.simple_pin_wrap .pin_panel .pin_dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.simple_pin_wrap .pin_panel .pin_dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--gray_300);
}
.simple_pin_wrap .pin_panel .pin_dot.clicked {
    background-color: var(--main_color);
}
.simple_pin_wrap .pin_panel .pw_reset {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray_800);
    font-size: 12px;
}
.simple_pin_wrap .pin_panel .pw_reset i {
    font-size: 20px;
    color: var(--gray_500);
}
.simple_pin_wrap .pin_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    padding: 30px 20px 20px;
}
.simple_pin_wrap .pin_keypad {
    border-top: 1px solid var(--gray_300);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    background-color: var(--gray_50);
}
.simple_pin_wrap .pin_keypad .pin_key {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    width: 100%;
    cursor: pointer;
    font-size: 28px;
    font-weight: bold;
    transition: background 0.3s;
}
.simple_pin_wrap .pin_keypad .pin_key:active {
    outline: none;
    background-color: var(--gray_200);
}
.simple_pin_wrap .pin_keypad .pin_key .pin_delete i {
    color: var(--gray_500);
    font-size: 40px;
}
.simple_pin_wrap .pin_keypad .pin_key.pin_key_done {
    font-size: 22px;
    font-weight: 500;
}
@media (max-width: 500px) {
    .simple_pin_wrap .pin_keypad .pin_key {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        width: 100%;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
    }
    .simple_pin_wrap .pin_keypad .pin_key .pin_delete i {
        font-size: 28px;
    }
    .simple_pin_wrap .pin_keypad .pin_key.pin_key_done {
        font-size: 18px;
    }
}

/* simple_pin_confirm.html 등록 완료 팝업 */
.pin .pin_popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
}
.pin .pin_popup.is-open {
    display: block;
}
.pin .pin_popup_dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0 ,0, 0.3);
}
.pin .pin_popup_card {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    max-width: 530px;
    padding: 0 15px;
    width: 100%;
}
.pin .pin_popup_card .pin_popup_inner {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.25);
    text-align: center;
}
.pin .pin_popup_msg {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px;
}
.pin .pin_popup_btn {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #f199ac;
    background: #fff;
    color: var(--main_color);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

/* order_tracking.html */
.order_tracking_wrap {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 235px;
    margin-top: 20px;
}
.order_tracking_wrap .ship_step_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 40px 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}
.order_tracking_wrap .ship_step_wrap .ship_step_ttl {
    font-size: 28px;
    font-weight: bold;
}
.order_tracking_wrap .ship_step_wrap .ship_step_box {
    display: flex;
    align-items: center;
    gap: 3px;
}
.order_tracking_wrap .ship_step_box .ship_step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 13px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray_400);
}
.order_tracking_wrap .ship_step_box .ship_step.is-done {
    color: var(--gray_900);
}
.order_tracking_wrap .ship_step_box .ship_step.is-current {
    color: var(--main_color);
}
.order_tracking_wrap .ship_step_box .ship_step .ship_step_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 77px;
    height: 77px;
    border-radius: 50%;
    background-color: var(--gray_400);
    overflow: hidden;
}
.order_tracking_wrap .ship_step_box .ship_step.is-done .ship_step_icon {
    background-color: var(--gray_900);
}
.order_tracking_wrap .ship_step_box .ship_step.is-current .ship_step_icon {
    background-color: var(--main_color);
}
.order_tracking_wrap .ship_step_box .ship_step .ship_step_icon.is-done {
    background-color: var(--gray_900);
}
.order_tracking_wrap .ship_step_box .ship_step .ship_step_icon.is-current {
    background-color: var(--main_color);
}
.order_tracking_wrap .ship_step_box .ship_step .ship_step_icon img {
    width: 40px;
    object-fit: contain;
}
.order_tracking_wrap .ship_step_box .ship_step_line {
    height: 100%;
    flex-shrink: 0;
}
.order_tracking_wrap .ship_step_box .ship_step_line .step_line {
    width: 30px;
    height: 3px;
    background-color: var(--gray_300);
    margin-top: -15px;
}
.order_tracking_wrap .ship_step_box .ship_step_line.is-done .step_line {
    background-color: var(--gray_900);
}
.order_tracking_wrap .trk_timeline_wrap {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
@media (max-width: 500px) {
    .order_tracking_wrap .ship_step_wrap .ship_step_ttl {
        font-size: 22px;
    }
    .order_tracking_wrap .ship_step_box .ship_step .ship_step_icon  {
        width: 50px;
        height: 50px;
    }
    .order_tracking_wrap .ship_step_box .ship_step .ship_step_icon img {
        width: 30px;
    }
    .order_tracking_wrap .ship_step_box .ship_step_line .step_line {
        width: 15px;
        height: 2px;
        margin-top: -16px;
    }
}
.order_tracking_wrap .trk_timeline_wrap .trk_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    background-color: var(--gray_50);
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 30px;
    color: var(--gray_800);
    font-size: 16px;
}
.order_tracking_wrap .trk_timeline_wrap .trk_info.upcoming {
    justify-content: center;
    padding: 38px 20px;
    color: var(--gray_600);
    margin-bottom: 0;
}
.order_tracking_wrap .trk_timeline_wrap .trk_info .trk_brand {
    color: var(--gray_900);
    font-weight: bold;
}
.order_tracking_wrap .trk_timeline_wrap .trk_item_wrap {
    position: relative;
    overflow: hidden;
    max-height: 304px;
    transition: max-height .45s cubic-bezier(.22, 1, .36, 1);
}
.order_tracking_wrap .trk_timeline_wrap .trk_item_wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85px;
    background-image: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
    z-index: 1;
    transition: all 0.3s;
}
.order_tracking_wrap .trk_timeline_wrap.is-expanded .trk_item_wrap::after {
    display: none;
}
.order_tracking_wrap .trk_timeline_wrap.is-expanded .trk_item_wrap .trk_item:last-child {
    margin-bottom: 20px;
}
.trk_timeline_wrap .trk_item_wrap .trk_item_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}
.trk_timeline_wrap .trk_item_wrap .trk_item_list .trk_item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.trk_timeline_wrap .trk_item_wrap .trk_item_list .trk_item::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 10px;
    width: 1px;
    height: calc(100% + 20px);
    background-color: var(--gray_300);
    z-index: -1;
}
.trk_timeline_wrap .trk_item_wrap .trk_item_list .trk_item:last-child::after {
    display: none;
}
.trk_timeline_wrap .trk_item_wrap .trk_item_list .trk_item .trk_dot {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url(/assets/images/sub/trk_dot.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 3px;
}
.trk_timeline_wrap .trk_item_wrap .trk_item_list .trk_item.is-current .trk_dot {
    background-image: url(/assets/images/sub/trk_current_dot.png);
}
.trk_timeline_wrap .trk_item_wrap .trk_item_list .trk_item .trk_body {
    display: flex;
    flex-direction: column;
}
.trk_timeline_wrap .trk_item_list .trk_item .trk_body {
    color: var(--gray_500);
    font-size: 16px;
}
.trk_timeline_wrap .trk_item_list .trk_item .trk_body .trk_state {
    font-weight: 600;
    margin-bottom: 8px;
}
.trk_timeline_wrap .trk_item_list .trk_item .trk_body .trk_place {
    margin-bottom: 5px;
}
.trk_timeline_wrap .trk_item_list .trk_item.is-current .trk_body .trk_state {
    color: var(--main_color);
}
.trk_timeline_wrap .trk_item_list .trk_item.is-current .trk_body .trk_place {
    color: var(--gray_900);
}
.trk_timeline_wrap .trk_more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: var(--gray_800);
    padding: 13px 10px;
    border: 1px solid var(--gray_300);
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
}
.trk_timeline_wrap .trk_chev i {
    display: inline-block;
    transition: all 0.3s;
    color: var(--gray_600);
    font-size: 20px;
}
.trk_timeline_wrap.is-expanded .trk_chev i {
    transform: rotate(180deg);
}

/* marketing_consent.html */
.marketing_consent_wrap {
    min-height: calc(100vh - 60px - 70px);
    padding-top: 60px;
    padding-bottom: 150px;
    margin-top: 20px;
}
.marketing_consent_wrap .marketing_consent_inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: #fff;
    font-size: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}
.marketing_consent_wrap .mk_consent_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    font-weight: 600;
}
.marketing_consent_wrap .mk_consent_item .title .desc {
    margin-top: 10px;
    font-size: 12px;
    color: var(--gray_800);
    font-weight: normal;
}
.marketing_consent_wrap .mk_consent_item.total {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray_300);
}
.marketing_consent_wrap .mk_consent_item .switch_item {
    position: relative;
    width: 50px;
    height: 30px;
    flex: 0 0 auto;
    display: block;
}
.marketing_consent_wrap .mk_consent_item .switch_item input {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.marketing_consent_wrap .mk_consent_item .switch_item .switch_track {
    position: absolute;
    inset: 0;
    background: var(--gray_300);
    border-radius: 15px;
    transition: .2s ease;
    cursor: pointer;
    overflow: hidden;
}
.marketing_consent_wrap .mk_consent_item .switch_item .switch_track::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: -3px 0 8px 0 rgba(0, 76, 19, 0.2);
    transition: .2s ease;
}
.marketing_consent_wrap .switch_item input:checked + .switch_track { background: #34c759; }
.marketing_consent_wrap .switch_item input:checked + .switch_track::after { transform: translateX(20px); }
@media (max-width: 360px) {
    .marketing_consent_wrap .mk_consent_item .title .desc br {
        display: none;
    }
}


/* pagination */
.pagination {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.pagination .page_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: var(--gray_300);
}
.pagination .page_btn.next {
    color: var(--gray_800);
}
.pagination .page_num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray_600);
}
.pagination .page_num.is-active {
    color: var(--main_color);
    font-weight: bold;
}

/* footer */
.footer_inner {
    margin-top: 50px;
    padding: 30px 15px 90px;
    background-color: var(--gray_100);
    color: var(--gray_500);
    font-size: 12px;
}
.footer_inner .footer_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}
.footer_inner .footer_top .footer_logo img {
    height: 32px;
    object-fit: contain;
}
.footer_inner .footer_top .sns_link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gray_300);
    background-color: var(--gray_100);
}
.footer_inner .footer_top .sns_link img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.footer_inner .footer_menu {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}
.footer_inner .footer_menu a {
    color: var(--gray_800);
}
.footer_inner .footer_menu .privacy {
    font-weight: bold;
}
.footer_inner .footer_menu .bar {
    width: 1px;
    height: 11px;
    background-color: var(--gray_400);
}
.footer_inner .footer_info_box .info_top p {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 0px;
}
.footer_inner .footer_info_box .info_top p span {
    flex-shrink: 0;
}
.footer_inner .footer_info_box .info_bottom {
    margin-top: 15px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--gray_300);
}
.footer_inner .copyright {
    padding-top: 20px;
}