/* 서브페이지 관련 스타일 모음 0905*/

/* 쿠폰스토어 페이지 스타일 ========================= */

/* 검색내용과 일치하는 브랜드가 없습니다. */
.not_search{
    width: 100%;
    height: calc(100% - 200px);
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.not_search p{
    font-size: 14px;
    color: #666;
}

/* 카테고리 설정 */
.category_c {
    width: 100%;
    overflow-x: auto;
    margin-top: 28px;

    /* 스크롤바 숨기기 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.category_c::-webkit-scrollbar {
    display: none;
}

.menu_list {
    width: max-content;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;

    padding-left: 20px;
    padding-right: 20px;
}

.menu_list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.menu_list .menu {
    display: block;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 400;
    border: 1px solid #c8c8c8;
    border-radius: 40px;
}

.menu_list .menu.active {
    border: 1px solid #222;
    background-color: #222;
    color: #fff;
}

.sub_cont {
    width: 100%;
    height: calc(100% - 154px);
    padding: 0 20px;
    margin-top: 16px;
    overflow: hidden;

    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sub_cont::-webkit-scrollbar{display: none;}

/* 브랜드 검색 인풋 박스 */
.search_box {
    width: 100%;
    height: 54px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    align-items: center;
    padding: 0 12px 0 16px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.search-input {
    flex: 1;

    height: 54px;
    font-size: 14px;
    font-weight: 400;
}

.search-input::placeholder {
    color: #999;
}

.search_box a {
    display: block;
    width: 44px;
    height: 48px;
    background: url(/assets/img/icon/i_btn_search.svg) center center no-repeat;
}

/* 쿠폰브랜드 리스트 */
.coupon_list_wrap {
    width: 100%;
    height: calc(100% - 74px);
    margin-top: 20px;
    overflow-y:auto;

    scrollbar-width: none;
}

.coupon_list_wrap::-webkit-scrollbar{display: none;}

.coupon_list {
    width: 100%;
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}

.coupon_list li {
    width: calc((100% - 24px) / 4);
}

.logo {
    height: 80px;
    border-radius: 8px;
    background-color: #fff;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.coupon_list .logo img {
    max-width: 100%;
    max-height: 100%;
}



.coupon_list li p {
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 450;
    margin-top: 8px;
}

@media (max-width : 360px) {
    .coupon_list li p {
        font-size: 12px;
    }
}

/* 쿠폰 : 브랜드 별 상품 리스트 */
.list {
    width: 100%;
    height: calc(100% - 93px);
    padding: 0 20px;
    overflow: hidden;
    overflow-y: auto;
    margin-top: 20px;

    -ms-overflow-style: none;
    scrollbar-width: none;
}

.list::-webkit-scrollbar{display: none;}

.list .coupon_detail_box {
    width: 100%;
    border-bottom: 1px solid #ebebeb;

    display: flex;
    gap: 16px;

    padding: 12px 0;
    cursor: pointer;
}

.list .logo.detail {
    width: 84px;
    height: 84px;
    padding: 4px;
}

.list .coupon_about {
    flex: 1;
    padding: 8px 0;
}

.brandName {
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

.couponName {
    font-size: 16px;
    font-weight: 500;
    margin-top: 0.3rem;
}

.coupon_detail_box .price {
    font-size: 20px;
    font-weight: 700;
}

.coupon_detail_box .price span {
    color: var(--main-color);
}

/* detail content : 상품 상세 페이지  */

.detail_content {
    width: 100%;
    height: calc(100% - 158px);

    overflow: hidden;
    overflow-y: auto;
    margin-top: 12px;

    /* 스크롤 */
    -ms-overflow-overflow: none;
    scrollbar-width: none;
}

.detail_content::-webkit-scrollbar{display: none;}

.product_img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 정사각형 비율 유지 */
    background-color: #fff;
    padding: 40px;
}

.product_img img {
    width: 100%;
    max-width: 100%;
}

/* 상품 타이틀 */
.tit_sub {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    line-height: 1.5;
    margin-top: 20px;
}

.tit_main {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

/* detail_info : 상세설명 관련*/
.detail_info_wrap {
    width: 100%;
    padding: 8px 40px 0 40px;
}

table.detail {
    width: 100%;
}

table.detail tr td {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #ebebeb;
}

td:first-child {
    text-align: left;
    color: #777;
}

td:nth-child(2) {
    text-align: right;
}

.detail_info {
    padding: 12px 0;
}

.detail_info .info_tit {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.detail_info .descript,
.purchase_guide,
.agree_wrap p {
    font-size: 13px;
    line-height: 1.6;
}

.detail_info .descript {
    color: #666;
    font-weight: 400;
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
}

.purchase_guide b,
.agree_wrap p b {
    color: #555;
    font-weight: 700;
}

.purchase_guide {
    padding: 12px 0;
    border-bottom: 1px solid #ebebeb;
}

.agree_wrap {
    padding: 12px 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}
.agree_wrap.part{
    width: 270px;
}

.agree_wrap .check {
    width: 24px;
    height: 24px;
}

.agree_wrap .check .check_circle {
    display: block;
    width: 24px; height: 24px;
    background: url(/assets/img/check_circle_off.svg) no-repeat center center;
    background-size: 24px 24px;
}
/* 수정 전 */
/* .agree_wrap .check.on span{
    color: var(--main-color);
} */
.agree_wrap .check.on span{
    background: url(/assets/img/check_circle_on.svg) no-repeat center center;
    background-size: 24px;
}

.agree_wrap p,
.agree_wrap label{
    font-size: 14px;
}

.btn_buy_wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background-color: var(--main-color);
    z-index: 9;
    border-radius: 28px 28px 0 0;
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08);
}

.btn_buy {
    width: 100%;
    height: 72px;
    position: absolute;
    top: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    color: #222;
    /* box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08); */
}

/* 상품구매 알럿 */
.dimd {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 19999;
    display: none;
}

.dimd.second {
    display: block;
    z-index: 31999;
    display: none;
}

.alert.modal {
    width: 88%;
    height: 310px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 12px;
    z-index: 29999;

    padding: 24px 20px;
    position: absolute;

    display: none;
}

.alert.modal .tit {
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
}

.alert.modal .txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 4px;
    margin-top: 4px;
    color: #666;
}

.alert.modal .number {
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    color: #333;
}

.alert.modal .alert_btn_1 {
    width: 100%;
    height: 44px;
    background-color: var(--main-color);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
}

/* 취소버튼 추가 0925 */
.btn_wrap_auth{
    width:auto;
    height: 44px;
    display: flex;
    /* border: 1px solid red; */
    gap: 6px;
    margin-top: 12px;

    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 20px;
}

.alert.modal > .alert_btn_1 { 
    position: absolute;
    left: 20px; right: 20px; bottom: 20px;
    width: auto !important;
}


/* 하단 고정알럿 */
.alert .tit {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.alert .txt {
    font-size: 13px;
    font-weight: 450;
    margin-bottom: 4px;
    line-height: 1.5;
}

.btn_wrap.alert {
    width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.btn_wrap.alert button {
    flex: 1;
    background-color: #f1f1f1;
    border-radius: 8px;
}

.btn_wrap.alert button.cancel {
    border: 1px solid #e9e9e9;
}

.btn_wrap.alert button.okay {
    background-color: var(--main-color);
}
.alert.bot {
    width: 100%;
    position: fixed;
    z-index: 39999 !important;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px;

    display: none;
}
/* notice 알럿 */
.alert.notice {
    width: 100%;
    position: fixed;
    z-index:39999;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px;

    display: none;
}
/* 쿠폰스토어 페이지 스타일 ============================ end */


/* 페이교환소 관련 스타일 ============================== */
.pay_product_wrap {
    width: 100%;
    height: calc(100% - 86px);
    overflow: hidden;
    overflow-y: auto;
    padding: 20px;
    margin-top: 12px;

    -ms-overflow-style:none;
    scrollbar-width:none;
}

.pay_product_wrap:-webkit-scrollbar{display: block;}

/* 1014 수정 */
.brandLine:first-child {
    margin-top: 0px;
}
.brandLine{
    margin-top: 24px;
}

.tit.pay {
    font-size: 16px;
    font-weight: 700;
}

.pay_product {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.product_box {
    flex: 0 0 calc(50% - 4px);
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ebebeb;
    padding: 12px;
    margin-top: 12px;
    cursor: pointer;
}

.product_box .product_img {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
}

.product_box .product_img.npay {
    /* background-color: #F3FFF4; */
    border: 1px solid #f1f1f1;
    border-radius: 6px;
}

/* .product_box .product_img.ssg {
    background-color: #FFFDF5;
} */

.product_box .brand {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.product_box .name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    word-break: keep-all;
}

.product_box .price {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    margin-top: 4px;
}


/* 배너 슬라이드 (랜덤 표시) */
.banner_wrap_pay {
    width: 100%;
    height: 90px;
    /* ✅ 반드시 고정 높이 필요! */
    margin-top: 24px;
    overflow: hidden;
    position: relative;
}

.banner_pay {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner_pay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    /* ✅ 가로는 무조건 채움 */
    min-height: 100%;
    /* ✅ 세로도 부족하면 키움 */
    object-fit: cover;
    /* ✅ 크롭 효과 유지 (안 써도 되긴 함) */
}

.product_box .product_img {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
}

/* .product_box .product_img.npay {
    background-color: #F3FFF4;
} */

.product_box .product_img.ssg {
    background-color: #FFFDF5;
}

.product_box .brand {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.product_box .name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    word-break: keep-all;
}

.product_box .price {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    margin-top: 4px;
}


/* 배너 슬라이드 (랜덤 표시) */
.banner_wrap_pay {
    width: 100%;
    height: 90px;
    /* ✅ 반드시 고정 높이 필요! */
    margin-top: 24px;
    overflow: hidden;
    /* border: 1px solid red; */
    position: relative;
}

.banner_pay {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner_pay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    /* ✅ 가로는 무조건 채움 */
    min-height: 100%;
    /* ✅ 세로도 부족하면 키움 */
    object-fit: cover;
    /* ✅ 크롭 효과 유지 (안 써도 되긴 함) */
}
/* 페이교환소 관련 스타일 */

.tit.pay{
    font-size: 16px;
    font-weight: 700;
}


.product_box .product_img{
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
}

/* .product_box .product_img.npay{background-color: #F3FFF4;} */
/* .product_box .product_img.ssg{background-color: #FFFDF5;} */

.product_box .brand{font-size: 12px; font-weight: 800; line-height: 1.5;}
.product_box .name{font-size: 14px; font-weight: 500; line-height: 1.5; word-break: keep-all;}
.product_box .price{font-size: 16px; font-weight: 800; line-height: 1.5; margin-top: 4px;}


/* 배너 슬라이드 (랜덤 표시) */
.banner_wrap_pay {
    width: 100%;
    height: 90px;
    /* ✅ 반드시 고정 높이 필요! */
    margin-top: 24px;
    overflow: hidden;
    position: relative;
}

.banner_pay {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner_pay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    /* ✅ 가로는 무조건 채움 */
    min-height: 100%;
    /* ✅ 세로도 부족하면 키움 */
    object-fit: cover;
    /* ✅ 크롭 효과 유지 (안 써도 되긴 함) */
}
/* 페이교환소 관련 스타일 ============================== end */


/* 포인트충전 ============================== */
.charge_cont{
    height:calc(100% - 85px);
    margin-top: 12px;
    padding: 12px 20px 20px 20px;
    overflow: hidden;
    overflow-y: auto;
    position: relative;

    scrollbar-width: none;
}

.charge_cont::-webkit-scrollbar{display: non;}

.charge_cont .t_wrap{
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
    padding: 12px 0;
}
.charge_cont .t_wrap .tit{font-size:16px; font-weight: 700;}
.t_wrap .info_modal_icon{width: 24px;}

/* 제휴사 포인트 충전 안내사항:모달 */
.partner_info_modal{
    padding: 20px;
    background-color:rgba(51, 51, 51, 0.98) ;
    border-radius: 8px;
    position: absolute;
    top: 60px;
    left: 20px; right: 20px;

    display: none;
}
.partner_info_modal .tit{font-size: 12px; color: #fff; margin-bottom: 8px;}
.partner_info_modal .txt_wrap{font-size: 12px; font-weight: 100; color: #fff;}
.partner_info_modal .txt_wrap li{
    margin-bottom: 4px;
    position: relative; padding-left: 12px;
}
.partner_info_modal .txt_wrap li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
}
.partner_info_modal .txt_wrap li:last-child{margin-bottom:0;}
.partner_info_modal .close-btn{
    position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
}

.partner_box_wrap.bot{
    margin-top: 12px;
}

.partner_box_wrap.bot ul li{
    width: 100%;
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.partner_box {
    display: block;
    padding: 16px;
    flex: 1;
    border-radius: 12px;
    /* background-color: #333; */
}

.partner_box .card_logo{margin-top: 2px; height: 20px;}
.partner_box .card_logo img{max-height: 100%;}

.partner_box .name{color: #fff; font-size: 16px; font-weight: 600; margin-top: 8px;}
.partner_box p{color: #fff; font-size: 13px; font-weight: 500; margin-top: 2px;}

/* 핀교환 */
.tit.charge{font-size: 16px; font-weight: 700; margin-bottom: 8px;}

.pin_charge_box{
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    background-color: #fff;
    margin-top: 24px;
    transition: margin-bottom 0.s ease;
}

.pin_charge_box p{
    font-size: 14px;
    font-weight: 500;
}

.pin_charge_box .input_wrap{
    width: 100%;
    display: flex;
    gap: 8px;
    width: 100%; height: 44px;
    margin-top: 8px;
}

.input_wrap input{
    background-color: #f8f8f8;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    width: calc(100% - 62px - 8px);
    padding: 11px 12px;
}
    
.input_wrap .btn.pin{
    background-color: #666;
    width: 62px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    padding: 12px 0;
    box-sizing: border-box;
    text-align: center;
}

.input_wrap .btn.pin.on{
    background-color: var(--main-color);
    color: #222;
}
/* 포인트충전 ============================== end*/


/* 마이페이지 ============================== */
.my_wrap{
    padding: 20px;
    height:calc(100% - 74px);
    overflow: hidden;
    overflow-y: auto;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.my_wrap::-webkit-scrollbar {display: none; /* Chrome, Safari */}

.my_box{
    /* border: 1px solid #000; */
    width: 100%; background-color: #fff; 
    border-radius:16px;
    padding: 24px 20px;
}

.mypoint.mypage{
    padding: 0;
    border-radius: 0;
    margin-bottom: 28px;
    position: relative;
}
.mypoint.mypage .user.before .btn,
.mypoint.mypage .user.after .btn{
    border-radius: 8px;
    height: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    right: 0;
    padding: 6px 10px;
}

.my_wrap .sub_txt.my, .my_wrap .user_name{padding-left: 16px; line-height: 1.2;}
.my_wrap .sub_txt.my{font-size: 24px;}
.my_wrap .user_name{font-size: 28px; font-weight: 600;}

.select_wrap{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.select_wrap select{
    width: 70px;
    background-color: #F8F8F8;
    border: 1px solid #ebebeb;
    padding: 5px 18px 5px 8px;
    font-size: 12px;
    color: #222 !important;
    /* 컬러 확실하게 설정 0923 */
    border-radius: 6px;


    /* 기본 브라우저 화살표 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    box-sizing: border-box;
    background: url(/assets/img/icon/select_arrow_b.svg) no-repeat 97% 50%/15px auto;

    /* 스크롤 제거 */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.select_wrap select::-webkit-scrollbar{display: none;}

.select_wrap select::-ms-expand{
    display: none;
}

/* 포인트 내역 관련 */
.point_detail_box{
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 12px;
    margin-top: 8px;
}

.point_detail_box .tit{padding:0 0 12px 0; border-bottom: 1px solid #222;}
.point_detail_box .tit p{
    font-size: 14px;
    font-weight: 700;
}
.point_table{
    width: 100%;
    border-collapse: collapse;
}

.point_table td.all{
    width: 120px;
    text-align: right !important;

}

.point_table td{
    padding: 15px 0;
    font-size: 14px;
    border-bottom: 1px solid #ebebeb;

    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
}



.point_table td:nth-child(1){width: 70%; color: #888;} 
.point_table td:nth-child(2){width: 120px; text-align: right;} 
.point_table td:nth-child(3){width: 80px; text-align: right; align-items: center;} 

.point_table td:nth-child(3) a{display: inline-block;}


.point_table tr:last-child td{border-bottom: none;}

.table_arrow{
    display: block;
    width: 16px; height: 16px;
    background: url(/assets/img/icon/select_arrow_b_gray.svg) no-repeat center center;
}

.tit.my{
    font-size: 16px;
    font-weight: 700;
}

.menu li{width:100%; border-bottom: 1px solid #ebebeb;}
.menu li:last-child{border-bottom: none;}
.menu li a{
    display: block;
    width: 100%;
    line-height: 54px;
    padding-left: 6px;
    font-size: 16px;
    font-weight: 400;
}

.subpage.my{
    position: relative; z-index: 10;
    background: linear-gradient(to bottom,
                var(--main-color) 0%,
                var(--main-color) 40%,
                #f8f8f8 40%,
                #f8f8f8 100%);
    transition: background 0.2s linear;
}
/* .background.my{
    top: 0; left: 0; bottom: 0; right: 0;
    position: absolute;
    z-index: -99;
    background-color: var(--main-color);
} */

/* .background.my .green{
    width: 100%;
    height: 310px;
    background-color: var(--main-color);
} */

/* .background.my .blank{
    width: 100%;
} */

.detail_point{display: none; transition: all 0.3s;}
.table_detail_point{border-collapse: collapse; border-spacing: 0; width: 100%;} 
.table_detail_point tr{background-color: #f1f1f1;}

td.table_in{padding: 0; width: 100%;}
.table_detail_point td{
    font-size: 12px;
    color: #222 !important;
    padding: 12px 0;
    box-sizing: border-box;
    margin: 0;
    border-bottom: 1px solid #e7e7e7;
}

.table_detail_point td:first-child{width: 100%; padding-left: 4px;}
.table_detail_point td:nth-child(2){width: 50px; padding-right: 4px;}


/* 마이페이지 (회원정보) =====================*/
.user_info{
    padding:16px 20px;
    height: 100%;
    overflow: hidden;
    overflow-Y:auto;

    -ms-overflow-style: none;
    scrollbar-width: none;
}
.user_info::-webkit-scrollbar{display: block;}

.tit.info{
    font-size: 14px;
    font-weight: 700;
    margin-bottom:8px;
}

.my_box.info{padding: 4px 26px;}

.dl_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dl_info dt, .dl_info dd{font-size:14px; line-height: 54px;}

.dl_info dt{font-weight: 500;}
.dl_info dd{color: #888;}

.menu li a.btn_dd{font-size: 12px; text-align: center; width: 100%; padding: 8px 14px; line-height: 1.5;}

.btn_user_info{
    width: 160px; margin: 0 auto; display: block;
    font-size:16px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* 내역 더보기 버튼 */
.more_btn.my{
    width: 32px;
    display: block;
    margin: 0 auto;
    margin-top: 12px;
}

/* 테이블 태그에서 dl태그로 변경 (완전히 변경 후 테이블 태그 삭제예정)  */
/* .point_detail_box */
.point_detail_box.use{margin-top: 20px;}

.point_detail li{
    border-bottom: 1px solid #ebebeb;
}

.point_detail li:last-child{border-bottom: none;}

.point_detail dl{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 13px;
}

.point_detail dl dt{
    color: #888;
}

.point_detail dl dd {
    position: relative;
    padding-right: 32px;
    color: #222;
    font-weight: 400;
}

.point_detail .fold_m_my > dl dd::after {
    content: '';
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 14px;
    background: url(/assets/img/icon/ico_arrow_down.png) no-repeat center center / contain;
}

.point_detail .fold_cont{
    background-color: #f1f1f1;
    display: none;
    padding-bottom: 4px;
}

.point_detail .fold_cont li{border-bottom: 1px solid #d8d8d8;}
.point_detail .fold_cont li:last-child{border-bottom:none;}
.point_detail .fold_cont dl{font-size: 12px;}
.point_detail .fold_cont dt{color: #333; padding-left: 4px; padding-right: 12px;}
.point_detail .fold_cont dl::after{width: 0; background: none;}
.point_detail .fold_cont dd{padding-right: 4px;}


/* 마이페이지 (회원정보) ===================== end*/

/* 마이페이지 (비밀번호 변경) =====================*/
.gray_round{
    width: 100%;
    padding: 15px 12px;
    background-color: #F1F1F1;
    border-radius: 8px;
}

.gray_round input::placeholder{
    font-size: 14px;
}

.gray_round input{
    width: 100%;

}

.user_info.pw{
    height: 100%;
}

.user_info.pw .sub_txt{
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #888;
    padding-left: 12px;
}
/* 마이페이지 (비밀번호 변경) ===================== end*/

/* 마이페이지 (회원탈퇴) ===================== */
.user_out{padding: 0 20px; position: relative; width: 100%; height: 100%;
overflow: hidden;}
.user_out .illust{
    width: 30%;
    max-width: 90px;
    display: block;
    margin: 0px auto;
    margin-top: 66px; margin-bottom: 20px;
}

.tit.join_tt{font-size: 16px; font-weight: 600; text-align: center;}
.join_tt_txt{font-size: 12px; font-weight: 400; text-align: center; color: #888; margin-bottom: 12px;}

.m_leave{width: 100%; margin-bottom: 100px; padding: 0 30px;}

.m_leave input{
    width: 100%;
    line-height: 40px;
    border: none;
    border-bottom: 1px solid #666;

    -webkit-appearance: none; /* iOS 기본 외형 제거 */
    -moz-appearance: none;
    appearance: none;

    border-radius: 0;
    outline: none;
}

.btn_wrap.out{position: relative; width: 100%; left: 50%; transform: translateX(-50%); bottom: 0px; padding: 0px 20px; bottom: 70px;}

.btn_wr{display: block;  margin-bottom: 12px; font-size:12px; padding: 12px 0;}
.btn_wr:last-child{margin-bottom: 0;}
/* 마이페이지 (회원탈퇴) ===================== end*/



/* 더보기 ===================== */
.user_info.more{
    padding-top: 24px;
    /* height: calc(100% - 74px ); */
    height: 100%;
}

.user_info.more.index{
    height: calc(100% - 74px);
}

.dl_info.more dt,
.dl_info.more dd,
ul.menu.more li a{
    font-size: 14px;
    font-weight: 650;
}

/* 스와이퍼 토글 gui */
.setting_check {
    font-size: 16px;
    font-weight: 400;
    color: #111;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.setting_check input{
    display: none;
}

.setting_check label {
    width: 100% !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
}

.setting_check input + label::before{right: 2px;}
.setting_check input:checked + label::before{right: 25px;}

.setting_check label::before{
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.setting_check input:checked+label::after {
    background-color: var(--main-color);
    content: "ON";
    text-indent: 29px;
    color: #fff;
}

.setting_check label{font-size: 14px; font-weight: 650; padding-left: 2px; color: #222;}
.setting_check label::after {
    content: 'OFF';
    font-size: 10px;
    color: #666;
    text-indent: 5px;
    display: flex;
    align-items: center;
    width: 50px;
    height: 28px;
    background-color: #ddd;
    border-radius: 14px;
    border: 0;
    transition: background 0.3s;
    -webkit-transition: background 0.3s;
}


.footer{width: 100%; text-align: center; padding: 28px 0;}
.footer .txt{
    font-size: 12px;
    font-weight: 400;
}

.gray{color: #888;}

ul.menu .tit.info{
    line-height: 40px;
    border-bottom: 1px solid #222;
    margin-top: 12px;
    margin-bottom: 0px;
}

/* 공지사항 */
.user_info.not{
    height: 100% !important;
}

ul.menu.more .fold_m,
ul.menu.more .fold_m_his{
    width: 100%;
    /* border: 1px solid red; */
    font-weight: 550; line-height: 1.4; 
    padding: 12px 0; font-size: 15px;
    align-items: center;
    cursor: pointer;
}
.date{font-size: 12px; line-height: 1.0; color: #888; margin-top: 4px;}

ul.menu.more .fold_m dl,
ul.menu.more .fold_m_his dl{
    display: flex; justify-content: space-between; align-items: center; padding-left: 4px;
}

ul.menu.more .fold_m dl::after,
ul.menu.more .fold_m_his dl::after{
    content: '';
    display: table-cell;
    width: 38px; height: 38px;
    background: url(/assets/img/icon/ico_arrow_down.png) center no-repeat;
    background-size: 10px;
}

ul.menu.more li{border-bottom: 1px solid #ebebeb;}
ul.menu.more li:last-child{border-bottom: none;}

ul.menu .fold_cont_his,
ul.menu .fold_cont{
    padding: 12px;
    width: 100%;
    border-top: #888;
    background-color: #f5f5f5;
    margin-top: 12px;
    display: none;
}

.fold_cont .view_cont,
.fold_cont_his .view_cont{
    font-size: 14px;
    font-weight: 450;
    color: #666;
    line-height: 1.6;
}

.fold_cont .view_cont.user,
.fold_cont_his .view_cont.user{
    padding-bottom: 20px;
    border-bottom: 1px solid #888;
}
.fold_cont .view_cont.admin,
.fold_cont_his .view_cont.admin{
    padding-top: 20px;
}
.view_cont.admin .tit{color: #555; margin-bottom: 12px;}


/* 1:1문의 */
.tit.bold{font-weight: 700;}
.tit.border{border-bottom: 1px solid #888; padding-bottom: 8px;}

.txt.bold{
    font-weight: 700;
}

.my_box .box{
    margin-top: 8px;

    padding: 12px 0;
    border-top: 1px solid #ebebeb;
    /* border-bottom: 1px solid #ebebeb; */
}

.my_box .box p {
    font-size: 15px;
    margin-bottom: 16px;
}
.my_box .box a{width: 100%; display: block; margin: 0 auto;}

.my_box .sub_txt{
    font-size: 12px;
    border-bottom: 1px solid #888;
    padding: 8px 0;
    margin-bottom: 8px;
}

.inq_input_wrap{
    padding: 12px 0;
}

.inq_input_top_txt{margin-bottom: 8px;}

.inq_file{width: 100%; display: flex; gap: 4px; padding: 12px 0 32px 0;}


.inq_input_wrap input[type="text"],
.inq_input_wrap input[type="password"],
.inq_input_wrap input[type="tel"],
.inq_file input[type="text"] {
    width: 100%;
    padding: 10px 8px;
    background-color: #f1f1f1;
    border-radius: 6px;
    /* border: 1px solid #d8d8d8; */
    font-size: 15px;
    line-height: 1.5;
}

.inq_input_wrap textarea,
.inq_file textarea{
    width: 100%;
    padding: 12px 8px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #d8d8d8;
    height: 15em;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
}

.inq_file label {
    display: inline-flex;
    height: 42px;
    width: 100px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color)
}

.inq_file input[type=file] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}

.inq_file input[type="text"] {
    width: calc(100% - 110px);
}

.inq_file input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #d8d8d8;
    font-size: 14px;
    line-height: 1.3;
}

/* 문의하기 버튼  btn_inquiry */
.btn_inquiry{
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background-color: var(--main-color);
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    margin-bottom: 20px;
}

/* faq */
.user_info.faq{
    height: 100% !important;
}

/* 나의 문의내역 */
.menu.more.his{
    border-top: 1px solid #ebebeb;
    margin-top: 12px;
}

.menu.more.his .fold_m span a,
.menu.more.his .fold_m_his span a{
    display: inline;
    text-decoration-line: underline;
    text-decoration-thickness: 1px solid #222;
}

/* 나의 문의 내역 - 문의 내역 없음 */
.user_info.more .my_box .no_his{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 70px 0 ;
    font-size: 14px;
    color: #888;
    margin-top: 12px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

/* 나의 문의 내역 이미지 첨부파일 모달 */
.alert.modal.inq{
    height: 90%;
    z-index: 39999;
}
.alert.modal.inq .alert_cont{
    max-width: 100%;
    height: calc(100% - 88px);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: first baseline;
}

.alert.modal.inq .alert_cont img{
    max-width: 100%;
    height: 100%;
    object-fit: contain; /* 비율 유지하면서 꽉 채움 */
}

/* 제휴문의 */
.user_info.more.no-nav{
    height: 100%;
}
.inq_input_wrap.his input{
    margin-bottom: 8px;
}

.partner_info{
    padding: 12px 0;
}
.partner_info li{position: relative;}

.partner_info li p{
    font-size: 14px;
    font-weight: 400;
    color: #888;
    padding-left: 12px;
}

.partner_info li p::before{
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    width: 4px;
    height: 1px;
    background: #888;
    top: 9px;
}

.btn_inq{
    width: 100%; height:48px;
    margin-top: 24px;
    margin-bottom: 32px;
    font-size: 16px;
    font-weight: 600;
}
/* 더보기 ===================== end*/


/* 회원가입 ===================== */
    .join{
        width: 100%;
        height: 100%;
        padding: 0 20px;
        position: relative;
        background-color: #F8F8F8;
    }

    .join .coin_tit_wrap{
        width: 100%;
        position: relative;
        top: 163px;
    }

    .join .coin.n{
        animation: none;
    }

    .app_name.join{
        width: 100%;
        color: #222;
        text-align: center;
        font-size: 24px;
        font-weight:700;
        line-height: 1.3 ;
        margin-top: 16px;
    } 

    .join .logo{
        border-radius: 0;
        height: 50px;
        position: absolute;
        bottom: 0px;
        background-color: transparent;
        left: 50%; transform: translateX(-50%);
    }

    .join .btn{
        display: block;
        width: 100%;

        text-align: center;
        padding: 20px 0;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 700;
    }

    .join .btn_wrap{
        position: absolute;

        bottom: 70px;
        left: 20px; right: 20px;
    }

    .btn_wrap .sub{
        width: 100%; height: auto;
        font-size: 13px; font-weight: 400;
        color: #888;
        display: block;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 8px;
    }

    .btn_join{
        color: var(--main-color);
        border: 1px solid #ebebeb;
    }

/* 회원가입 ===================== end*/

/* 회원가입 > 약관 동의 */
.join.terms{ 
    position: absolute;
    height: calc(100% - 72px); overflow: hidden;
    overflow-y: auto;

    -ms-overflow-style: none;
    scrollbar-width: none;
    top: 72px;
    padding: 20px;
}

.join.terms::-webkit-scrollbar{display: none;}

.join .all_check_wrap{
    width: 100%;
    padding: 20px 12px;
    background-color: #f1f1f1;
    display: flex; 
    gap:8px;
    align-items: center;
    border-radius: 8px;
}

.join .all_check_wrap span{
    color: #c8c8c8;
    width: 24px; height: 24px;
    /* border: 1px solid red; */
    background: url(/assets/img/check_circle_off.svg) no-repeat center center;
}
/* 체크 활성화 전 */
.join .check_circle{
    width: 24px; height: 24px;
    /* border: 1px solid red; */
    background: url(/assets/img/check_circle_off.svg) no-repeat center center;
}

/* 체크 활성화 후 */
.join .check_circle.on{
    /* color: var(--main-color); */
    background: url(/assets/img/check_circle_on.svg) no-repeat center center;
}

.join .all_check_wrap p{
    font-size: 16px;
    font-weight: 700;
}

.terms_check {
    width: 100%;
    padding: 12px 0 0 12px;
    /* border: 1px solid red; */
}
.terms_check li{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 14px;
}
.terms_check li p{font-weight: 500;}
.terms_check li .check_wrap{
    display: flex;
    gap: 8px;
    cursor: pointer;
}

/* 내용보기 버튼 */
.terms_check li a{
    font-size: 12px;
    color: #888;
    text-decoration-line: underline;
    text-decoration-color: #888;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px; /* 밑줄 두께 */
}

.terms_check li .check_wrap span{color: #c8c8c8; cursor: pointer;}
.terms_check li .check_wrap b{font-weight: 600;}

.terms_check li.term_select{margin-bottom: 0;}
.terms_check li.txt{padding: 0 0 0 32px; margin-top: 0;}
.terms_check li.txt p{
    font-size: 12px; font-weight: 400;
    color: #454545;
}

/* 개인정보 수집 박스 */
.policy_box{
    margin-top: 16px;
    width: 100%;
    background-color: #f1f1f1;
    padding: 12px 16px;
    border-radius: 8px;
}

.policy_box p{
    font-size: 14px; font-weight: 700;
}

.policy_box dl{font-size: 14px;}

.policy_box dl {
    display: grid;
    grid-template-columns: 50px 1fr;
    /* 왼쪽은 dt, 오른쪽은 dd */
    row-gap: 6px;
    column-gap: 8px;
    font-size: 12px;
    margin-top: 8px;
}

.policy_box dt {
    font-weight: 600;
    color: #666}

.policy_box dd {
    margin: 0;
    /* 기본 margin 제거 */
    color: #454545;
    font-weight: 300;
}

/* 개인정보 상세 알럿 */
.terms_detail{
    position: fixed;
    z-index: 39999;
    background-color: #fff;
    top: 120px; left: 20px; right: 20px; bottom: 100px;

    border-radius: 16px;
    padding: 20px 12px;

    display: none;
}
.terms_detail .tit{
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.terms_detail .cont_wrap{
    width: 100%; height: calc(100% - 78px);
    overflow: hidden;
    overflow-y: auto;

    padding: 0 0 12px 0;
    font-size: 12px;

    -ms-overflow-style:none;
    scrollbar-width : none;
}

.cont_wrap::-webkit-scrollbar{display: none;}


.terms_detail .btn{
    display: block;
    width: 100%;
    padding: 12px 0 ;
    text-align: center;
    background-color: var(--main-color);
    border-radius:8px;
    font-size: 16px;
    font-weight: 700;


}

/* 본인인증 */
.join.u_d{
    overflow: hidden; overflow-y: auto;

    -ms-overflow-style:none;
    scrollbar-width: none;
}
.join.u_d::-webkit-scrollbar{display: none;}
.join .cont_wrap{
    text-align: center;
    margin-top: 80px;
}

.join .cont_wrap .cont_illust{
    width: 118px;
    margin: 0 auto;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.join .cont_wrap .tit{
    font-size: 18px;
    font-weight: 700;
}

.join .cont_wrap .sub_txt{
    font-size: 14px;
    margin-top: 8px;
}

/* 회원가입 인풋 */
.red{color: #F87B7B;}
.blue{color:#3ACDEC;}

.member_join_wrap{
    width: 100%;
    height: 100%;
    padding:20px;
    overflow: hidden;
    overflow-y: auto;

    /* 스크롤 x*/
    -ms-overflow-overflow: none;
    scrollbar-width: none;
    position: relative;
}

.member_join_wrap::-webkit-scrollbar{display: none;}

.member_join_wrap .tit{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.member_join_wrap input{
    width: 100%; 
    padding: 15px 12px;
    background-color:#f1f1f1;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
}

.member_join_wrap input[name="user_pw_confirm"]{
    margin-top: 8px;
}

.member_join_wrap .id_wrap{
    width: 100%;
    display: flex;
    gap:8px;
}

.member_join_wrap .id_wrap a{
    border-radius: 8px;
    background-color: #e2e2e2;
    padding:15px 12px ;
    text-align: center;
    width: 100px;
    font-size: 14px;
    color: #666;
}

.member_join_wrap .sub_txt{
    font-size: 12px;
    font-weight: 500;
    padding:8px 2px 4px 2px;
    margin-bottom: 24px;
}

.member_join_wrap .btn{
    background-color:#e2e2e2 ;
    border-radius: 12px;
    width: 100%;
    display: block;
    text-align: center;
    padding: 20px 0;
    font-size:16px;
    font-weight: 700;
    color: #666;

    margin-top: 40px;
    transition: margin-top 0.3s ease;
}

.member_join_wrap .btn.on{
    background-color: var(--main-color);
    color: #222;
}
.user_info_box{
    margin: 0 auto; 
    margin-top: 30px;
    width: 220px;
    padding: 28px 0;
    border-top: 1px solid #E2E2E2 ;
    border-bottom: 1px solid #E2E2E2 ;
}

.user_info_box .tit{
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #888;
}
.user_info_box .txt_user{
    font-size: 16px;
    font-weight: 400 !important; 
    color: #222;
}

.mb20{margin-bottom: 20px;}

/* 이벤트 뷰 페이지 추가 20250919 */
.content.event{
    width: 100%; height: 100%;
    padding: 20px;
    /* border: 1px solid red; */
    overflow: hidden;
    overflow-y: auto;

    scrollbar-width: none;
}

.content.event::-webkit-scrollbar{display: none;}

.txt_menu_wrap a{
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
}

.event_wrap{
    margin-top: 8px;
    /* border: 1px solid green; */
    max-width: 720px;
    margin-bottom: 16px;
}

.event_img{
    border-radius: 8px;
    overflow: hidden;
    /* border: 1px solid red; */
    width: 100%;
    max-width: 720px;
}

.event_wrap dl {
    margin-top: 8px;
    width: 100%;
    line-height: 1.5;
}

.event_wrap dl dt{
    font-size: 15px;
    font-weight: 700;
}

.event_wrap dl dd{
    font-size: 14px;
    font-weight: 400; color: #555;
}

/* 서비스 이용약관 관련 */
.term_box{
    width: 100%;
    height: 100%;
    padding: 12px 20px 60px 20px;

    overflow: hidden;
    overflow-y: auto;
    margin-top: 20px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.term_box::-webkit-scrollbar{display: none;}
.term_box .tit{font-size: 14px; font-weight: 700; margin-bottom: 20px;}
.term_box p{font-size: 13px; font-weight: 400; line-height: 1.6;}

/* 회원가입 > 이용약관 > 상세 내용 모달 설정*/
.cont_wrap .term_box{
    padding: 0; 
    margin-top: 0px;
}

/* 회원가입 > 정보입력 */
.signup_wrap{width: 100%; height: 552px;}

/* 이벤트 > 룰렛 스타일 */
.wrap_box{
    border: 1px solid #888;
    border-radius: 8px;
    background-color: #fff;
    width: 100%;
    padding: 20px 12px;
}

.wrap_box .head_txt {
    width: 65%;
    max-width: 380px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.wheel_wrap{ position: relative;}
.wheel{width: 100%;}
.wheel canvas{
    display: block;
    width: 100%;
    position: relative;
    background: url(/assets/img/event/wheel_bg.svg) no-repeat center center;
    /* background-size: cover; */
    margin: 0 auto;
    z-index: 9;
}

.wheel_button{
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #222;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 28px;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 999;
    font-family:'Paperlogy 7 Bold';
}
.wheel_wrap::after{ /* 핀 이미지 */
    content: '';
    position: absolute;
    width: 40px; height: 56px;
    background: url(/assets/img/event/wheel_pin.svg) no-repeat center center;
    z-index: 19;
    top: -22px;
    left:calc(50% - 20px);
}

/* coin */
.coin{
    position: absolute;
    background-size: cover;
}
.c01{
    width: 77px; height: 57px;
    background: url(/assets/img/event/coin01.png) no-repeat center center;
    z-index: 1;
    bottom: -4px; left:0px;
}
.c02{
    width: 66px; height: 74px;
    background: url(/assets/img/event/coin02.png) no-repeat center center;
    z-index: 1;
    top: 0px; right: 10px;
}
.c03{
    width: 115px; height: 89px;
    background: url(/assets/img/event/coin03.png) no-repeat center center;
    z-index: 19;
    right: -10px; bottom: -20px;
}

.wrap_box .bot_txt{
    width: 50%;
    min-width: 200px;
    margin: 0 auto;
    margin-top: 36px;
}

.new_info{
    margin-top: 20px;
    width: 100%;
}
.new_info .tit{
    font-size: 16px;
    font-weight: 700px;
    border-bottom: 1px solid #222;
    padding-bottom: 2px;
}

.new_info ul li {
    font-size: 13px;
    color: #666;
    position: relative;
    padding-left: 10px;
    line-height: 1.6;
}

.new_info ul li::before{
    content: '';
    position: absolute;
    width: 4px;
    height: 1px;
    background-color: #666;
    top: 8px;
    left: 2px;
}

/* 알럿 모달 스타일 (당첨 후) */
.txt.roul{
    display: block;
    margin-top: 28px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 450 !important;
    color: #222 !important;
}

.txt.roul b{
    font-size: 26px;
    font-weight: 900;
}
.fsz20{font-size: 20px;}