@charset "utf-8";

 :root {
    --border-color: #EDEDED;
    --theme-color: #20ABC6;
    --theme-bg-color: #F8F8FA;
    --theme-font-color: #444C67;
    --disabled-font-color: #C4C4C4;
    --primary-color: #3CCBDB;
    --red-color: #FE6F61;
    --disabled-status-color:#D2D2DF;
    /* --accent-color:#FFCB57; */
    --accent-color:#F7E847;
    --yellow-color:#F7E847;
    --navy-color:#454D56;
    --box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2);
    --bg-gray: #F4F5F9;
    --bg-sky: #ECF9FB;
    --standard-radius: 15px;
    --line-color: #E4E8EE;
    --border-round-L: 10px;
    --border-round-S: 5px;
    --bg-gray-color: #F8F8FA;
    --navy-color:#454D56;
    --gradient-hover-color: linear-gradient(98deg, #2E97A3 32.37%, #F7E847 114.35%);
}

.displaynone{
    display: none !important;
}

.visibility {
  visibility: hidden !important; 
}

.spinner{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
/*    height: calc(100vh - 80px);*/
    z-index: 9999;
}

.spinner img{
    width: 100px;
}



.text-bold{
    font-weight: 700;
}
.text-red{
    color: var(--red-color);
}

.accent_color{
    color: var(--primary-color);
}

.red_dot{
    position: relative;
    padding-right: 15px;
}
.red_dot::before{
    content: '';
    position: absolute;
    top: 5px;
    right: 0;
    width: 6px;
    height: 6px;
    background: var(--red-color);
    border-radius: 9999px;
}
.border_white_btn{
    border-radius: 8px;
    color: #3CCBDB !important;
    border: 1px solid #3CCBDB !important;
    display: inline-block;
    background: #fff !important;
    padding: 10px 25px;
    font-size: 16px;
}

.whiteBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10px;
        color: #3CCBDB;
        font-size: 16px;
        font-weight: 700;
        border: 1px solid #3CCBDB;
/*        padding: 13px 40px;*/
    }


input::placeholder, textarea::placeholder {
    color: #B7BECD;
}

.border_w_btn{
    background: #fff;
    border: 1px solid #454D56;
    border-radius: 4px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}





/* 페이징 */
.pagenate {
    margin: 30px 0;
}
.pagenate ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagenate ul li.first_ {
    margin-right: 17px;
}
.pagenate ul li.last_ {
    margin-left: 17px;
}
.pagenate ul a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 14px;
}
.pagenate .active a {
    background-color: #3CCBDB;
    color: #fff;
}

.pagenate ul.new a{
border-radius: 5px;
}
.pagenate ul.new a.dot{
padding: 10px 5px;
 width: auto;
}



/* 툴팁 */



.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: visible;
    height: 14px;
}

.result:has(.tooltip):hover .tooltiptext,
.tooltip:hover .tooltiptext,
.tooltip.on .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

.tooltiptext {
    visibility: hidden;
    background-color: var(--color-surface-default, #fff);
    padding: 12px 16px;
    border-radius: var(--radius-12);
    position: fixed;
    bottom: 50%;
    left: 50%;
    opacity: 0;
    transition: opacity 0.3s;
    transform: translate(-50%, 50%);
    border: 1px solid var(--color-border-default);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    color: var(--color-content-default);
    text-align: left;
    word-break: keep-all;
    width: calc(100dvw - 40px);
    max-width: 800px;
}

.tooltiptext.left {
    left: initial;
    right: 40px;
}

.tooltiptext .head {
    font: var(--font-body-s-semibold);
    letter-spacing: var(--body-s-letter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-content-default);
}

.tooltiptext .desc {
    margin-top: 8px;
    font: var(--font-caption-m);
    letter-spacing: var(--caption-m-letter);
    color: var(--color-content-subtle);
}

.blog_grade .tooltiptext {
    max-width: 450px;
}

@keyframes tooltip{
    0%{
        opacity: 0;
        transform: scale(0.2)
    }
    70%{
        transform: scale(1.1)
    }
    100%{
        opacity: 1;
        transform: scale(1)
    }
}

[data-tootip='noti']{
    position: absolute;
    padding: 12px 30px 12px 20px;
    background: var(--red-color);
    border-radius: 8px;
    top: 74px;
    left: 50%;
    transform: translateX(calc(-50% - 20px));
    z-index: 1;
    animation: tooltip .7s ease-in-out;
    color: #fff;
    font-size: 14px;
    width: max-content;
    margin: 0;
}

[data-tootip='noti']::before{
    content: "";
    display: inline-block;
    position: absolute;
    border-top: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid var(--red-color);
    z-index: 1;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
}

[data-tootip='noti'] img{
    width: 10px;
    height: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}


.submitBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 60px;
    border-radius: var(--radius-8);
    background-color: var(--color-surface-brand);
    color: var(--color-content-inverse);
    font-size: 16px;
    font-weight: 700;
    border: none;
    /* box-shadow: 0px 10px 20px rgba(60,203,219,0.3); */
    /* -webkit-box-shadow: 0px 10px 20px rgba(60,203,219,0.3); */
    }
.submit_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100px;
    width: 100%;
    padding: 14px 0;
    background-color: var(--color-surface-brand);
    font:var(--font-body-m-medium);
    border-radius: 5px;
    color: #fff;
    border: none;
    line-height: 1;
    
    }

.navy_btn{
    padding: 12px 15px;
    font-size: 14px;    
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #fff;
    border-radius: 5px;
    background-color: var(--navy-color) !important;
    box-sizing: border-box;
    display: inline-block;
/*    max-width: fit-content;*/
    width: 100%;
    word-break: keep-all;
    
}
.border_btn{
    line-height: 45px;
    padding: 14px;
    max-width: 100px;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.64px;
    color: #666;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #E4E8EE;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1;
}

.border_btn.on{
    border-color: (--primary-color, #3CCBDB);
}

.border_btn_p{
    border-radius: var(--border-round-S) !important;
    background: #fff !important;
    color: var(--primary-color) !important;
    display: inline-block;
    border: 1px solid var(--primary-color);
    text-align: center;
}

.red_btn{
    background: var(--red-color);
    color: #fff;
    border-radius: 8px;
}
.fill_primary_btn{
    background-color: var(--primary-color) !important;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 7px 35px;
    line-height: 24px;
    padding: 10px;
    border: none;
    border-radius: var(--border-round-S) !important;
}
.fill_gradient_btn{
    background: var(--gradient-color) !important;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 7px 35px;
    line-height: 24px;
    padding: 13px;
    border: none;
    border-radius: var(--border-round-S) !important;
}
.fill_gray_btn{
    background-color: var(--bg-gray);
    color: var(--gray-font-color);
    font-size: 16px;
    font-weight: 500;
    padding: 7px 35px;
    line-height: 24px;
    padding: 13px;
    border-radius: 5px;
}

.blue_btn{
    background-color: var(--primary-color) !important;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.gray_btn{
    background: var(--bg-gray) !important;
    color: var(--navy-color) !important;
    border: none;
    border-radius: var(--border-round-S) !important;
}

.border_btn_w{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    color: var(--theme-font-color);
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #E4E8EE;
    cursor: pointer;
}


.fill_btn{
    background: var(--primary-color);
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid var(--primary-color);
    font-weight: 500;
}

.fill_btn:hover{
    background: #fff;
    color: var(--primary-color);
}


.btn_border{
    display: inline-block;
    border-radius: 5px;
    color: #3CCBDB;
    border: 1px solid #3CCBDB;
    background:#FFF;
    line-height: 1;
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
}
.btn_border:hover{
    background: var(--primary-color);
    color: #fff;
}

.red_border{
    background: #fff;
    border: 1px solid var(--red-color);
    color: var(--red-color);
}

hr {
    margin: 15px 0;
    width: 100%;
    height: 1px;
    border: none;
    background-color: #EDEDED;
}

input:disabled{
    opacity:1;
    color: inherit;
     -webkit-text-fill-color: inherit;
}

[data-btn-type="floating"]{
    position: fixed;
    right: 15px;
    bottom: 150px;
    width: 51px;
    height: 51px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border-radius: 50%;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px;
    cursor: pointer;
    line-height: 1;
    gap: 3px;
    z-index: 999;
}
[data-btn-type="floating"] span{
    font-size: 10px;
    font-weight: 400;
}
[data-btn-type="floating"] .message_count{
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background: var(--red-color);
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

}

[data-btn-type="floating"] .message_read_tooltip{
    position: absolute;
    top: -70px;
    right: 0;
    width: 190px;
    padding: 10px;
    background: var(--yellow-color);
    border-radius: 10px;
    color: #222;
    font-size: 13px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    word-break: keep-all;
}
[data-btn-type="floating"] .message_read_tooltip::before{
    content: "";
    position: absolute;
    display: inline-block;
    border-top: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid var(--yellow-color);
    z-index: 1;
    bottom: -12px;
    right: 15px;
    transform: rotate(180deg);
    
}

[data-btn-type="floating"] .message_read_tooltip img{
    max-width: 12px;
    margin-left: 8px;
    cursor: pointer;
}

.toastify{
    max-width: calc(70% - 20px);
}


input[type="checkbox"].message_chk{
    display: none;
}
input[type="checkbox"].message_chk + label{
/*    position: absolute;*/
    left: 0;
    top: 0;
    font-size: 12px;
    font-weight: 600;
}
input[type="checkbox"].message_chk + label:before {
  content: "";
  cursor: pointer;
  display: inline-block;
/*  background-image: url('../../STATIC/img/icon/ci_checkbox-check.svg'); */
  background-image: url('../../STATIC/img/icon/check_2px.svg');
  width: 20px; /* 이미지의 너비 */
  height: 20px; /* 이미지의 높이 */
    background-size: cover;
}

input[type="checkbox"].message_chk:checked + label:before {
/*  background-image: url('../../STATIC/img/icon/ci_checkbox-checked.svg'); */
  background-image: url('../../STATIC/img/icon/checked_2px.svg'); 
}

#header {
/*
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    top: 0;
    z-index: 90;
    width: 100%;
    padding: 15px 20px 10px;
    background-color: #fff;
    box-sizing: border-box;
*/
}

#header .header_inner{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    top: 0;
    z-index: 90;
    width: 100%;
/*    padding: 15px 20px 10px;*/
    background-color: #fff;
    box-sizing: border-box;
    flex-direction: column;
}

#header .header_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 66px;
    padding: 0 16px;
    background-color: #fff;
    box-sizing: border-box;
}

/* 기존 회원 헤더 로고 */
#header .header_nav .header-logo-legacy {
    display: flex;
    max-width: 72px;
    flex-direction: column;
    font-size: 14px;
    font-weight: 500;
    justify-content: center;
    align-items: center;
}

/* OKPOS 회원 헤더 로고 */
#header .header_nav .header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: none;
    flex-direction: row;
}

#header .header_nav .header-logo img {
    width: 60px;
    height: auto;
}

#header .header_nav .header-logo span {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-content-default);
    line-height: 22px;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

#header .header_nav .infl_center {
    font-size: 14px;
    font-weight: 500;
}

.ad_banner{
    background: var(--primary-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.ad_banner > div{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ad_banner > div .text{
    font-size: 22px;
    font-weight: 700;
}
.ad_banner > div .link_text{
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    border-left: 1px solid #fff;
    margin: 0 15px;
    display: flex;
    cursor: pointer;
}
.ad_banner > div .link_text a{
    padding: 0 15px;
    line-height: 1;
}
.ad_banner div a:hover{
    color: #fff;
}

.ad_banner .close_text{
    cursor: pointer;
    position: relative;
}
.ad_banner .close_text span{
    font-size: 14px;
    font-weight: 500;
}
.logo_wrap a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.logo_wrap a span{
    color: #666;
    font-size: 18px;
    font-weight: 500;
}



.ad_banner{
    background: var(--primary-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ad_banner > div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
}
.ad_banner > div .link_text{
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    border-left: 1px solid #fff;
    margin: 0 15px;
    display: flex;
    cursor: pointer;
}
.ad_banner > div .link_text a{
    padding: 0 15px;
    line-height: 1;
}
.ad_banner div a:hover{
    color: #fff;
}

.ad_banner > div .text{
    font-size: 14px;
    font-weight: 500;
    display: flex;
    gap:20px;
    flex-direction: row;
    display: contents !important;
    color: #fff;
    flex-direction: row;
}


.ad_banner .close_text{
    display: none;
}

.menu, .back {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-40%);
    cursor: pointer;
    line-height: 0;
}

.left_menu {
    position: fixed;
    left: -100%;
    top: 0;
    width: 320px;
    height: 100%;
    z-index: 100;
    padding-top: 40px;
    background-color: #fff;
    transition: all 0.5s;
    box-sizing: border-box;
} 

.left_menu.on {
    left: 0;
}

.menu_user_box {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 15px 9.5px;
    border-bottom: 1px solid #eee;
}

.menu_user_box .profile {
    width: 50px;
    height: 50px;
}

.menu_user_box p {
    padding: 2px 0 0 13px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.8px;
    color: #444;
}

.menu_user_box span {
    display: block;
    margin-top: -3px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #666;
}

.left_menu button {
    position: absolute;
    right: 15px;
    top: 20px;
    width: 72px;
    height: 27px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.48px;
    text-align: center;
    color: #666;
    border: solid 1px #e9e9e9;
    background-color: #fff;
    box-sizing: border-box;
}

.gnb {
    padding: 17px 15px 14px;
    border-bottom: 1px solid #eee;
}

.gnb > li + li {
    margin-top: 16px;
}

.gnb > li > a,
.gnb > li > span {
    position: relative;
    display: block;
    padding-left: 46px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.72px;
    color: #444;
}

.gnb > li > a img,
.gnb > li > span img {
    position: absolute;
    left: 15px;
}

.sub_gnb {
    margin-top: 8px;
    margin-bottom: -3px;
    padding: 9px 30px 7px;
    background-color: #f9f9f9;
}

.sub_gnb li a {
    font-size: 16px;
    line-height: 2.19;
    color: #888;
}

.bookmark_box {
    padding: 18px 30px;
}

.bookmark_box h2 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.72px;
    color: #444;
}

.bookmark_box li {
    position: relative;
    margin-top: 11px;
    padding-left: 32px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #444;
}

.bookmark_box .bookmark {
    position: absolute;
    left: 1px;
    top: 4px;
    line-height: 0;
}

.bookmark_box .del {
    position: absolute;
    right: -16px;
    top: 2px;
    width: 17px;
    height: 17px;
    cursor: pointer;
    line-height: 0;
}

.add_bookmark {
    position: relative;
    display: block;
    margin-top: 18px;
    padding-left: 21px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #eb6161;
    cursor: pointer;
}

.add_bookmark img {
    position: absolute;
    left: 0;
    top: 1px;
}

.gnb_bg {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    transition: all 0.5s;
}

.gnb_bg.on {
    opacity: 1;
    visibility: visible;
}

.btn_white, a.btn_white{
    height: 34px;
    line-height: 34px;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
    letter-spacing: -0.64px;
    color: #3ccbdb;
    background-color: #fff;
    border: 1px solid #3ccbdb;
    box-sizing: border-box;
}

.btn_sky_square{
    color: #fff;
    background: var(--primary-color, #3CCBDB);
    border-radius: var(--border-round-S);
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    box-sizing: border-box;
}

.btn_sky, a.btn_sky {
/*    height: 34px;*/
/*    line-height: 34px;*/
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.64px;
    color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--color-surface-brand);
/*    box-shadow: 0px 10px 15px 0px rgba(13, 186, 205, 0.20);*/
    padding: 8px 0;
}


.btn_border_black, a.btn_border_black{
    display: inline-block;
    border: 1px solid #454D56;
    color: #454D56;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.64px;
    padding: 8px 25px;
}

#header .btn_sky {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 110px;
    font-size: 14px;
}

#wrap {
    min-height: 100%;
    padding-top: 69px;
    padding-bottom: 67px;
    background-color: var(--color-surface-wash);
    box-sizing: border-box;
}

#wrap.short{
    padding-top: 56px;
}
#wrap:has(.log_wrap){
    background-color: #fff;
}


.main_item {
    position: relative;
/*    border-radius: 10px;*/
    margin-top: 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.new .main_item h2{
    font-size: 24px;
    padding-bottom: 20px;
}

.main_item h2 {
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.8px;
    color: #222;
}

.new .main_status{
    padding-top: 24px;
    padding-bottom: 32px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
}

.main_status {
    margin-top: 10px;
    padding: 13px 15px 15px;
    box-shadow: 10px 10px 10px 0 rgba(212, 212, 223, 0.2);
}

.new .main_status ul{
    align-items: center;
    padding-bottom: 24px;
}
.new .main_status ul .arrow{
    align-self: flex-start;
    position: relative;
    top: calc(104px / 2 - 10.5px);
}
.new .main_status ul .arrow img{
    width: 11px;
    height: 18px;
}

.main_status ul {
    display: flex;
    text-align: center;
    align-items: flex-start;
    justify-content: space-around;
}

.main_status ul li {
    position: relative;
    flex:1;
}

.new .main_status ul li img{
    max-width: 104px;
}

.new .main_status ul li::after{
    display: none;
}

/* 화살표 이미지 */
.main_status ul li::after {
    content: "";
    position: absolute;
    right: -34px;
    top: 50%;
    transform: translateY(-70%);
    width: 14px;
    height: 21px;
    background: url("../img/arrow.svg") 0 0 no-repeat;
}


/*
.new .main_status ul li .state_img_box{
    position: relative;
}

.new .main_status ul li .state_img_box::before{
    content: "";
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 21px;
    background: url("../img/arrow.svg") 0 0 no-repeat;
}
*/


.main_status ul li:last-child::after {
    display: none;
}

.main_status li h3 {
    padding-top: 12px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #888;
}

.main_status p {
    padding-top: 3px;
    font-size: 20px;
    letter-spacing: -0.72px;
    color: #222;
    font-weight: 500;
}

.main_status strong {
    color: #3ccbdb;
}

.new .main_status .btn_sky{
    width: 100%;
    padding: 12px 0 ;
    height: 100%;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.main_status .btn_sky {
    display: block;
    width: 135px;
    margin: 9px auto 0;
}

.main_layout {
    position: relative;
    padding-left: 199px;
    height: 54px;
}

.main_layout a {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.main_layout h2 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom: 0;
    padding-left: 42px;
}

.main_layout img {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.main_layout p {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1.33;
    letter-spacing: -0.54px;
    color: #222;
}

.main_layout p strong {
    color: #3ccbdb;
}

.main_notice {
    padding: 14px 15px 15px;
}

.main_notice h2 {
    padding-bottom: 5.5px;
}

.notice_list li a {
    display: block;
    padding: 4.5px 0;
    border-bottom: 1px solid #ededed;
}

.notice_list .date {
    display: block;
    font-size: 14px;
    letter-spacing: -0.48px;
    color: #888;
    line-height: 1.1;
}

.notice_list h3 {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: -0.56px;
    color: #222;
    text-overflow: ellipsis;
    padding-bottom: 12px;
    line-height: 1;
}

.notice_list .new {
    display: inline-block;
    vertical-align: top;
    margin-top: -3px;
    margin-left: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #eb6161;
}

.main_notice .btn_sky {
    display: block;
    width: 90px;
    margin: 9.5px auto 0;
}


.main_quick{
    display: flex;
    gap:8px;
}

.main_quick a{
    border-radius: 20px;
    background: #FFF;
    padding:12px;
    display: flex;
    flex: 1;
    justify-content: space-between;
    word-break: keep-all;
/*    min-height: 124px;*/
/*    min-width: 124px;*/
    aspect-ratio: 1/1;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--color-border-subtle, #f0f1f3);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.02);
}
.main_quick a p{
    font:var(--font-body-s-medium);
    line-height: 20px; /* 125% */
}



.main_quick a p:last-child{
    align-self: flex-end;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.main_quick a p span{
    font-weight: inherit;
}

.main_quick a p:last-child span{
    color: var(--color-content-brand);
    font
}



.main_user_cont{
    padding: 20px 20px;
    background: #fff;
    
}
.main_user {
    display: flex;
    padding: 20px 15px;
    background: #454D56;
    margin-top: 10px;
    gap:20px;
/*    flex-direction: column;*/
}
.new .main_user{
    gap:10px;
    flex-direction: column;
    border-radius: 10px;
    margin: 0;
}
.new .main_user .subscribe_btn{
    display: flex;
    align-items: center;
    color: #fff;
    gap:5px;
    justify-content: center;
}
.main_user .unlimited_pass_date{
    font-size: 12px;
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    padding: 3px 10px;
    color: var(--primary-color);
    font-weight: 500;
    width: fit-content;
    margin: 0 auto;
}

.main_user .profile_box{
    display: flex;
    gap:20px;
    align-items: center;
}

.main_user.more_user{
    background: #fff;
    padding: 25px 20px;
    align-items: center;
    margin-bottom: 12px;
    margin-top: 0;
}

.main_user.more_user .profile_info h3{
    font-size: 14px;
    font-weight: 500;
    min-width: 50px;
}

.main_user.more_user .profile_info p{
    color: #222;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.main_user.more_user .borderBtn{
    border: 1px solid #E4E8EE;
    background: #F9F9F9;
    border-radius: 4px;
    color: #666;
    font-size: 14px;
    padding: 10px 15px;
    line-height: 1;
}

.new .main_user{
    margin-bottom: 0;
/*    align-items: center;*/
}

.profile {
    position: relative;
/*    border: solid 1px #707070;*/
/*    background-color: #e9e9e9;*/
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}

.main_user .profile {
    width: 80px;
    height: 80px;
}

.profile .edit {
    position: absolute;
    right: -10px;
    bottom: -2px;
    display: block;
    width: 33px;
    height: 33px;
    cursor: pointer;
    border: solid 1px #707070;
    background-color: #F4F5F9;
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
} 

.profile .modifyBtn {
    position: absolute;
    right: -4px;
    bottom: -7px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: solid 1px #707070;
    background-color: #fff;
    box-shadow: 3px 3px 6px rgba(174,174,174,0.16);
    -webkit-box-shadow: 3px 3px 6px rgba(174,174,174,0.16);
    background-image: url(../img/profile_edit.svg);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.profile .modifyBtn input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
}
.profile .modifyBtn input + label {
    position: absolute;
    left: 0;
    top : 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

.profile .edit img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.profile_info {
/*    padding-top: 5px;*/
    width: calc(100% - 80px - 20px);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.profile_info li {
    position: relative;
/*    padding-left: 20px;*/
    font-size: 18px;
    letter-spacing: -0.72px;
    color: #fff;
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.profile_info li + li {
/*    margin-top: 5px;*/
}

.profile_info h3 {
/*
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
*/
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #92979c;
    min-width: 60px;
}
.profile_info span{
    flex: 2;
    font-size: 16px;
    color: #fff 
}
.profile_info span a{
    color: inherit;
}


.popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.2);
}

.popup.on {
    display: block;
}

.pop_cont {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background-color: #fff;
    box-sizing: border-box;
}

.pop_cont .close {
    position: absolute;
    right: 20px;
    top: 20px;
    line-height: 1;
    cursor: pointer;
}
.pop_schedule_edit .pop_cont > .close {
    right: 16px;
    top: 16px;
}
.pop_cont .close img{
    max-width: 18px;
}
.pop_cont button.close{
    position: static;
}

.pop_cont h2 {
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.8px;
    line-height: 1;
    color: #444;
    padding: 10px 0 ;
}

.pop_bookmark .pop_cont {
    width: 398px;
    padding: 14px 15px 15px;
}

select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
    border: solid 1px #e9e9e9;
    background: url("../img/select_arrow.svg") calc(100% - 8px) 50% no-repeat;
    box-sizing: border-box;
    background-color: #fff;
}

.pop_bookmark button {
    display: block;
    width: 90px;
    margin: 10px auto 0;
}

#wrap.sub1 {
    padding-top: 115px;
}
#wrap.sub1.project_list{
    padding-top: 129px;
}
#wrap.sub1.create{
    padding-top: 64px;
}
#wrap.sub1.none_header{
/*    padding-top: 72px;*/
    padding-top: 66px;
}
            
.status_nav {
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    padding: 17px 20px 13px 20px;
    display: flex;
    z-index: 1;
    align-items: center;
    background-color: #fff;
    box-sizing: border-box;
    justify-content: space-between;
}

.status_nav h2 {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: -0.8px;
    color: #222;
}
.status_nav.title .btn{
    background: #f4f5f9;
    padding: 8px 20px;
    border-radius: var(--border-round-S);
}

.status_label {
    padding-left: 20px;
    font-size: 0;
    background: #fff;
    display: flex;
    overflow-y: auto;
    border-bottom: 1px solid var(--color-border-weak);
}

.status_label a{
    flex-shrink: 0;
}

.status_label a + a {
/*    margin-left: 32px;*/
}
.projectAll .status_label a + a{
    margin-left: 0;
}
.projectAll .status_label {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    z-index: 10;
}
.projectAll .section-area {
    background: var(--color-surface-wash);
}
.projectAll .section-area > article:not(.pagenate) {
    padding-top: 42px;
}

.status_label span {
    display: inline-flex;
    align-items: center;
    height: 41px;
    padding: 0 8px;
    flex-shrink: 0;
    font-size: var(--body-s-size);
    font-weight: 500;
    line-height: var(--body-s-line);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.status_label span.on {
    color: var(--color-content-strong);
    border-bottom-color: var(--primary-color);
}

.status_item {
    padding: 16px 16px 0px;
/*    box-shadow: 10px 10px 10px 0 rgba(212, 212, 223, 0.2);*/
}

.status_item:last-child{
    padding-bottom: 20px;
}

.status_item .container{
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
}

.status_box {
    display: flex;
    column-gap: 12px;
    /* padding-bottom: 12px; */
}

.status_box .desc{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.status_box .thum {
    width: 88px;
    height: 88px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    min-width: 76px;
}

.status_box .label,
.sel_profile_box .label {
    display: block;
/*    width: 70px;*/
/*    height: 20px;*/
    padding: 5px 15px;
    text-align: center;
    line-height: 1;
    border-radius: 20px;
    font-size: 14px;
    letter-spacing: -0.28px;
    color: #fff;
    box-sizing: border-box;
    max-width: fit-content;
    width: 100%;
}
.label_container {
    display: flex;
    justify-content: space-between;
}
/*
.label_container .label{
    border-radius: 9999px;
    padding: 5px 15px;
}
*/
.label_container .copy_btn{
    border: 1px solid #3ccbdb;
    border-radius: 30px;
    padding: 5px 10px;
}
.status_box .copy_btn {
    height:20px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
    padding: 0 5px;
    border: 1px solid #3ccbdb;
}
.status_box .label.ing,
.sel_profile_box .label.ing {
/*    background-color: #3cdb71;*/
    background-color: #ACD92C;
}



.sel_profile_box .label.ing2 {
    background-color: #ffa53e;
}

.status_box .label.submit,
.sel_profile_box .label.submit {
    background-color: #3ccbdb;
}

.status_box .label.end,
.sel_profile_box .label.end {
    background-color: #bcbcbc;
}

.sel_profile_box .label.cancel {
    background-color: #ff5757;
}

.status_box .label.cancel2 {
    border: solid 1px #ff5757;
    background-color: #fff;
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #ff5757;
}



.label.ing,
.sel_profile_box .label.ing {
/*    background-color: #3cdb71;*/
    background-color: #ACD92C;
    color: #fff;
}

.sel_profile_box .label.ing2 {
    background-color: #ffa53e;
}

.label.submit,
.sel_profile_box .label.submit {
    background-color: #3ccbdb;
}

.label.end,
.sel_profile_box .label.end {
    background-color: #F0F0F0;
}

.sel_profile_box .label.cancel {
    background-color: #ff5757;
}

.label.cancel2 {
    border: solid 1px #ff5757;
    background-color: #fff;
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #ff5757;
}

/*
.label.expires,
.sel_profile_box .label.expires {
    border-color: #E79E00
}
*/



.projectAll .label_container__chevron {
    display: flex;
    align-items: center;
}
.projectAll .label_container__chevron > svg {
    display: none;
}

.projectAll .btn_wrap{
    gap:8px;
}
.projectAll .btn_wrap a{
    flex: 1;
}
.projectAll .btn_wrap .btn_sky{
    box-shadow: 0px 10px 15px 0px rgba(13, 186, 205, 0.20);    
}




.projectAll .status_box .label{
    width: 68px;
    height: 68px;
    min-width: 68px;
    padding: 0;
    max-width: 68px;
    line-height: 67px;
}

.projectAll .status_box .label.ing{
    border: 1px solid #ACD92C;
    background: #fff;
    color: #ACD92C;
}

.projectAll .status_box .label.ing2{
    border: 1px solid #ffa53e;
    background: #fff;
    color: #ffa53e;
}

.projectAll .status_box .label.submit{
    border: 1px solid var(--color-content-brand);
    color: var(--color-content-brand)
}

.projectAll .status_box .label.end{
    border: 1px solid #999;
    background: #fff;
    color: #999;
}

.projectAll .status_box .label.cancel{
    border: 1px solid #ff5757;
    background: #fff;
    color: #ff5757;
}

.projectAll .status_box .label.cancel{
    border: 1px solid #E79E00;
    background: #fff;
    color: #E79E00;
}




.status_box ul {
    padding-right: 10px;
}

.status_box li {
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #222;
    text-align: left;
    line-height: 1.5;
    display: flex;
}
.status_box li.cp_id{
    color: #888;
}
.status_box li .subject{
    min-width: 67px;
    display: inline-block;
    color: var(--color-content-subtle);
    font: var(--font-body-s-regular);
}
.status_box li.ellipsis.subject{
    display: block;
}


.status_box li .description{
    color: var(--color-content-subtle);
    display: inline-block;
        white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    font: var(--font-body-s-regular);
}
.status_box li.campaign-title-row .description {
    font: var(--font-body-l);
    letter-spacing: var(--body-l-letter);
    color: var(--color-content-default);
    margin-bottom: var(--spacing-4);
}
.status_box .subscribe_date{
    font-size: 12px;
    color: #666;
}

.progress {
    width: 100%;
    height: 12px;
    margin: 0 auto;
    border-radius: 30px;
    background-color: #F4F5F9;
    box-sizing: border-box;
}

.progress .inner {
    display: block;
    border-radius: 7.5px;
    padding-right: 14px;
    font-size: 10px;
    letter-spacing: -0.4px;
    text-align: right;
    color: #fff;
    height: 12px;
    line-height: 1;
}

.status_item.ing .progress .inner {
    background-color: #ACD92C;
}

.status_item.submit .progress .inner {
    background-color: #3ccbdb;
}

.status_item.end .progress .inner {
    background-color: #bcbcbc;

}

.progress_info {
    padding-bottom: 10px;
}

.progress_info li {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.56px;
    color: #666;
}

.status_item .btn_sky {
    display: block;
    margin: auto;
    width: 100px;
}

#wrap.sub1_detail {
    min-height: 100%;
    padding-top: 184px;
    box-sizing: border-box;
}
#wrap.sub1_detail.card{
    padding-top: 0;
}

#wrap.sub1_detail.card .status_nav2{
    top: 56px;
}
#wrap.sub1_detail.card .status_nav2 .status_label {
    top: 56px;
}
     
.status_nav2 {
    position: sticky;
    left: 0;
    top: 60px;
    width: 100%;
    z-index: 2;
    padding: 0;
    background-color: #fff;
    box-sizing: border-box;
    transition: all .3s;
}

.status_nav2 h2 {
/*    width: 230px;*/
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.64px;
    color: #222;
    word-break: keep-all;
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.status_nav2 .cp_info{
    display: flex;
    padding: 20px 20px;
/*    justify-content: space-between;*/
    align-items: center;
    gap:15px;
    text-align: center;
/*    position: relative;*/
    position: fixed;
    z-index: 1;
    background-color: #fff;
    width: 100%;
    top: 0;
    transition: all .3s;
}
.sticky_fix .status_nav2 .cp_info{
    top: -74px;
}
.status_nav2 .cp_info .ui-button{
    margin-left: auto;
}


.status_nav2 .cp_info div:first-of-type{
    line-height: 1;
/*    flex: 1;*/
}

.status_nav2 .cp_info a{
    color: #fff;
/*    padding: 5px 20px;*/
    font-size: 14px;
    line-height: 1;
/*    position: absolute;*/
}
.status_nav2 .cp_info a img{
    width: 10px;
}
.campaign_info_cont{
    background-color: #fff;
}
.campaign_info_cont .body{
    overflow: hidden;
}
.campaign_info_cont.on .body{
    height: 100%;
}
.campaign_info_cont .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 18px;
}
.campaign_info_cont .head .close img{
    max-width: 15px;
}
.campaign_info_cont.on .head img{
    transform: rotate(180deg);
}

.campaign_info_cont .campaign_desc{
    display: flex;
    gap:10px;
    align-items: center;
}
#modal-campaign-info .campaign_info_cont .campaign_desc{
    font-size: 11px;
    align-items: flex-start;
    margin-bottom: var(--spacing-8);
}

.campaign_info_cont .img-area{
    
}
.campaign_info_cont .desc_area .page-link{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;

    background-color: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    color: var(--color-content-default);
    font: var(--font-body-s-medium);
    padding: var(--spacing-4);
    border-radius: var(--radius-8);
    gap: var(--spacing-4);
    margin-top:var(--spacing-8);

    /* padding: 8px;
    border-radius: 5px;
    margin-top: 5px; */

    /* gap:10px; */
}
.campaign_info_cont .img-area a img{
    width: 12px;
}
.campaign_info_cont .img-area .imgBox{
    max-height: 100px;
}
.campaign_info_cont .img-area .imgBox img{
    width: 106px;
    height: 106px;
    object-fit: cover;
    border-radius: var(--radius-12);
}
.campaign_info_cont .campaign_desc .desc_area{
    flex: 1;
}
.campaign_info_cont .campaign_desc .desc_area div p{
    font-size: 10px;
    /* padding-bottom: 5px; */
     display: flex;
    align-items: center;
    gap:5px;
    font-weight: 350;
    letter-spacing: -0.4px;
    color: var(--theme-font-color);
}
.campaign_info_cont .campaign_desc .desc_area div p span{
    font: var(--font-caption-m);
    color: var(--color-content-default);
}
.campaign_info_cont .campaign_desc .desc_area h2{
    font:var(--font-body-s-medium);
    color: var(--color-content-strong);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.campaign_info_cont .campaign_desc .tag_cont{
    display: flex;
    align-items: center;
    padding-top: 4px;
    gap: 0;
}
.campaign_info_cont .campaign_desc .tag_cont > * {
    padding: 0 4px;
}
.campaign_info_cont .campaign_desc .tag_cont > *:first-child {
    padding-left: 0;
}
.campaign_info_cont .campaign_desc .tag_cont > * + * {
    position: relative;
}
.campaign_info_cont .campaign_desc .tag_cont > * + *::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: var(--color-border-default);
}

.campaign_info_cont .campaign_desc .tag_cont .cp_type{
   font-size: 11px;
   font-weight: 400;
   color: #666;
}
.campaign_info_cont .campaign_desc .tag_cont .cp_media_cont{
    font-size: 11px;
    color: #666;
    gap: 10px;
}
.campaign_info_cont .campaign_desc .tag_cont .cp_media_cont > p{
    gap: 2px;
}
.campaign_info_cont .campaign_desc .tag_cont .cp_media_cont img{
    max-height: 18px;
    max-width: 18px;
}
.campaign_info_cont .campaign_desc .tag_cont .tag_area{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
#modal-campaign-info .campaign_info_cont .campaign_desc .tag_cont .cp_recruit{
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

.campaign_info_cont .btn_cont{
    display: flex;
    flex-direction: column;
    gap:5px;
    padding-top: 10px;
    font-size: 14px;
}
.campaign_info_cont .btn_cont .border_btn{
    max-width: none;
    text-align: center;
    border-color: var(--primary-color);
    font-size: inherit;
    padding: 10px 0 ;
}
.campaign_info_cont .btn_cont .submit_btn{
    color: #fff;
    max-width: none;
    font-size: inherit;
    padding: 13px 0;
    font-weight: 500;
}
.campaign_info_cont .btn_cont .border_btn span{
    padding-left: 25px;
    font-weight: 700;
}

/* === MO 캠페인 정보 모달 토글/버튼 리뉴얼 (Figma 2949-65752) === */
/* 헤더 아래 / 버튼 위 구분선 (Figma 섹션 보더 #e4e8ee, 풀폭) */
#modal-campaign-info .ui-modal-layer{ gap: 0; }
#modal-campaign-info .head{
    font-size: 16px;
    margin: 0 -16px;
    padding: 0 16px 14px;
    border-bottom: 1px solid #e4e8ee;
}
#modal-campaign-info .ui-modal-layer > .body{ padding: 16px 0 0; }
#modal-campaign-info .btn_wrap{
    margin: 0 -16px;
    padding: 14px 16px 0;
    border-top: 1px solid #e4e8ee;
}
#modal-campaign-info .campaign_info_cont .body{ display: flex; flex-direction: column; gap: 10px; }
#modal-campaign-info .mo-toggle-list{ display: flex; flex-direction: column; gap: 10px; }
#modal-campaign-info .mo-toggle-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 8px;
    border: 1px solid var(--line-color);
    border-radius: 8px;
}

#modal-campaign-info .mo-toggle-box label{
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: var(--color-content-default);
}
#modal-campaign-info .mo-toggle-box--recruit:has(input:checked) label{ color: var(--color-content-brand); }
#modal-campaign-info .mo-toggle-box label .tooltip{ display: inline-flex; align-items: center; }
/* 우측 모바일 스위치 36×20 (기존 absolute pill 해제) */
#modal-campaign-info .mo-toggle-box [role="switch"]{
    position: relative;
    transform: none;
    margin: 0;
    width: 36px;
    height: 20px;
    box-sizing: border-box;
    border-color: var(--color-content-brand);
    flex-shrink: 0;
}
#modal-campaign-info .mo-toggle-box [role="switch"]::before{ width: 14px; height: 14px; left: 2px; background: var(--color-content-brand); }
#modal-campaign-info .mo-toggle-box:has(input:checked) [role="switch"]{ background: var(--color-content-brand); border-color: var(--color-content-brand); }
#modal-campaign-info .mo-toggle-box:has(input:checked) [role="switch"]::before{ left: calc(100% - 16px); background: #fff; }
/* 보고서: 풀폭 채움 teal / 닫기: 풀폭 아웃라인 teal */
#modal-campaign-info .campaign_info_cont .btn_cont .submit_btn{
    width: 100%;
    height: 40px;
    padding: 0;
    background: var(--primary-color);
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
}
#modal-campaign-info .btn_wrap button{
    height: 40px;
    padding: 0;
    border-color: var(--primary-color);
    color: var(--primary-color);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
}

.pj_id {
/*
    position: absolute;
    right: 15px;
    top: 21px;
*/
    font-size: 12px;
    letter-spacing: -0.48px;
    color: #666;
    display: inline-block;
    padding-bottom: 5px;
}

.status_nav2 .status_label {
/*    padding: 15px 17px 0;*/
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
/*    border-top: 1px solid #eee;*/
    position: fixed;
    top: 74px;
    transition: all .3s;
}

.status_nav2 .status_label span:first-child {
    padding-left: 16px;
}

.status_nav2 .status_label span + span {
    margin-left: 0;
}
.card .status_nav2 .status_label span + span{
    margin-left: 0;
}

.status_nav2 .status_label {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.status_nav2 .status_label::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.status_nav2 .status_label {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
}
.status_nav2 .status_label.is-scroll-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.selection_item {
    position: relative;
    min-height: 122px;
    padding: 10px 20px 20px 20px;
    padding-bottom: 0px;
    border-radius: 12px;
    box-sizing: border-box;
}

.selection_item:last-child{
    padding-bottom: 0;
}

.selection_item button.date_edit_btn,
.selection_item button.scheduleEditBtn{
    padding: 13px 0;
    color: #444C67;
    border: 1px solid var(--primary-color,#3CCBDB);
    border-radius: var(--border-round-S);
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 16px;
    width: 100%;
    font-weight: 500;
    margin-top: 10px;
}

.selection_item button.date_edit_btn:first-of-type{
/*    margin-top: 0;*/
}

.selection_item button.date_edit_btn span.btn{
    color: var(--primary-color,#3CCBDB);
    min-width: fit-content;
    cursor: pointer;
}
.selection_item button.scheduleEditBtn{
    padding: 1px 25px;
/*    margin-top: 0;*/
}
.selection_item button.scheduleEditBtn .date{
    max-width: 66px;
    text-align: right;
}

.selection_item button span.btn{
    font-weight: 700;
}



.empty_list{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    height: calc(100vh - 184px - 80px);
    gap: 20px;
}
.empty_list img{
    max-height: 120px;
}
.empty_list p{
    color: #B4B4B4;
    font-size: 14px;
}

.selection_item .container{
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
}
.card .selection_item .container{
    padding: 30px;
}


.sel_profile_box {
    position: relative;
/*    padding-bottom: 9px;*/
    display: flex;
    gap:20px;
}
.sel_profile_box .zzim_btn{
    position: absolute;
    top: 0;
    right: 0;
/*    z-index: 1;*/
    cursor: pointer;
}
.card .sel_profile_box{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sel_profile_box .profile {
    width: 64px;
    height: 64px;
}
.card .sel_profile_box .profile{
    width: 130px;
    height: 130px;
}

.sel_profile_box .profile .level {
    position: absolute;
    right: -7px;
    bottom: -4px;
    display: block;
    width: 21px;
    height: 18px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.card .sel_profile_box .profile .level{
    right: 0;
    bottom: 0;
    width: 38px;
    height: 34px;
}

.card .sel_profile_box .desc{
    text-align: center;
}
.card .sel_profile_box .desc .blog_area{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:5px;
}

.card .sel_profile_box .desc .blog_area{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:5px;
}
.card .sel_profile_box .desc .blog_area a{
    display: flex;
    gap:5px;
    align-items: center;
}
.card .sel_profile_box .desc .blog_area a img{
    max-width: 12px;
}
.card .sel_profile_box .desc .blog_area span{
    color: #666;
}

.sel_profile_box .blog_grade{
    width: 100%;
    background: #F4F5F9;
    text-align: center;
    border-radius: var(--border-round-S);
    padding: 15px 0 ;
    color: #222;
}

.sel_profile_box .blog_grade .grade{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 700;
    color: #454D56;
}
.sel_profile_box .blog_grade .grade span{
    font-weight: 500;
}
.sel_profile_box .blog_grade .grade.grade_color_9{
    color: #888;
}
.sel_profile_box .blog_grade .grade.grade_color_0{
    color: #DF0000;
}
.sel_profile_box .blog_grade .grade.grade_color_1{
    color: #222;
}
.sel_profile_box .blog_grade .grade.grade_color_2{
    color: #6F86FF;
}
.sel_profile_box .blog_grade .grade.grade_color_3{
    color: #00B3D6;
}
.sel_profile_box .blog_grade .grade.grade_color_4{
    color: #E79E00;
}
.card .sel_profile_box .desc .img_cont{
    max-width: 22px;
    max-height: 22px;
    display: inline-block;
    
}
.sel_profile_box .desc .img_cont img{
    width: 100%;
}

.sel_profile_box h2 {
    padding-top: 8px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.56px;
    color: #222;
}
.card .sel_profile_box h2{
    font-size: 18px;
    font-weight: 500;
    padding: 0 0 10px 0 ;
}

.sel_profile_box h2 span {
    padding-left: 2px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.48px;
    color: #222;
}
.card .sel_profile_box h2 span{
    font-weight: 500;
    font-size: 18px;
}
.card .sel_profile_box h2 p.blackconsumer{
    color: #DF0000;
    font-size: 12px;
    padding-top: 2px;
}


.sel_profile_box p {
    padding-top: 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #666;
}

.sel_profile_box .today {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    letter-spacing: -0.48px;
    color: #666;
/*    height: 100%;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap:20px;
}

.card .sel_profile_box .today{
    position: static;
    align-items: start;
    width: 100%;
    gap:8px;
}

.card .sel_profile_box .today div{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.card .sel_profile_box .today div span{
    font-size: 16px; 
    color: #222;
}
.card .sel_profile_box .reviewer_info{
    width: 100%;
}
.card .sel_profile_box .reviewer_info textarea{
    border-radius: 5px;
    border: 1px solid #E4E8EE;
    background: #fff;
    padding: 10px;
    font-size: 15px;
    color: #222;
    display: block;
    margin-bottom: 20px;
    height: 90px;
    box-sizing: border-box;
}
.card .sel_profile_box .reviewer_info button{
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    padding: 15px ;
    margin-top: 10px;
}
.card .sel_profile_box .reviewer_info button > div{
    color: inherit;
}
.card .sel_profile_box .reviewer_info button.select_btn{
    padding: 0;
}
.card .sel_profile_box .reviewer_info button.select_btn div{
    margin-top: 0;
}
.card .sel_profile_box .reviewer_info button.date_edit_btn{
    padding-left: 25px;
    padding-right: 25px;
}
.card .sel_profile_box .reviewer_info .btn_cont{
    display: flex;
    justify-content: center;
    align-items: center;
/*    padding-bottom: 10px;*/
}
.card .sel_profile_box .reviewer_info .btn_cont button{
    flex: 1;
    display: inline-block;
    text-align: center;
    padding: 13px 0;
    line-height: 1;
}
.card .sel_profile_box .reviewer_info .btn_cont.mission_detail_btn button{
    padding: 0;
    margin: 0;
    color: var(--primary-color);
}
.reviewer_info button.mission_detail_btn{
    padding: 13px 0;
    margin-top: 10px;
}
button.mission_detail_btn{
    color: var(--primary-color);
    justify-content: center;
}
/*
.card .sel_profile_box .reviewer_info button .checkBox{
    display: flex;
    justify-content: center;
    align-items: center;
}
*/
.card .sel_profile_box .reviewer_info button .checkBox .check_label{
    color: #fff;
    font-size: 16px;
}
.card .sel_profile_box .reviewer_info .checkBox{
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    margin-top: 10px;
}
.card .sel_profile_box .reviewer_info .checkBox label{
/*    background-image: none;*/
    padding-left: 0;
    padding: 13px 0;
    border: 1px solid #E4E8EE;
    border-radius: var(--border-round-S);
    display: block;
    color: var(--navy-color);
    background-position-x: calc(50% - 35px);
    text-indent: 25px;
    line-height: 1;
}
.card .sel_profile_box .reviewer_info .checkBox input{
    margin: 0;
}
.card .sel_profile_box .reviewer_info .checkBox input:checked + label{
    background-image: url(../../STATIC/img/icon/checked_2px.svg);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);   
}


.review_photo .mission_check_result_btn img{
    max-width: 14px;
}
.review_photo .mission_check_result_btn .empty_box{
    width: 14px;
}

.selection_item .sel_profile_box .asignBtn{
    background-image: url(../img/review_confirm_ico.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 80px;
    height: 80px;
    background-color: transparent;
    margin: 0;
    position: relative;
    right: -5px;
}
.card .selection_item .sel_profile_box .asignBtn{
    background-image: none;
    
}

.selection_item .sel_profile_box .confirmBtn{
    background-image: url(../img/review_complete_ico.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 80px;
    height: 80px;
    background-color: transparent;
    margin: 0;
    position: relative;
    right: -5px;
}
.card .selection_item .sel_profile_box .confirmBtn{
    background-image: none;
    position: static;
    background-color: var(--primary-color);
    width: 100%;
    height: auto;
    border-radius: var(--border-round-S);
}

.btn_go_blog,
.btn_go_instar {
/*    position: absolute;*/
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #666;
    border: solid 1px #E4E8EE;
    background-color: #fff;
    padding: 9px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    
}

/*
.btn_go_blog img,
.btn_go_instar img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 6px 0 0;
}
*/

.btn-group.floating{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: -80px;
    background: var(--gradient-color);
    z-index: 999;
    height: 70px;
    line-height: 70px;
    text-align: center;
    transition: all .3s;
    padding: 0;
    color: #fff;
}
.btn-group.floating.renewal-mode {
    background: #fff;
    height: auto;
    line-height: normal;
    border-top: 1px solid var(--color-neutral-100);
    padding: 12px 16px;
}
.btn-group.floating.on{
    bottom: 0px;
}
.btn-group.floating.renewal-mode.on {
    bottom: 64px;
}
body:has(#wrap.sub1_detail.card) .btn-group.floating.renewal-mode.on {
    bottom: 0;
}
.btn-group.floating input{
    border-radius: var(--border-round-L);
    border:none;
    background: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.btn-group.floating.error{
    background: var(--red-color) !important;
}

/* 제출완료 스텝: 일괄 메시지·마감연장(.floating_btn_cont) + 일괄 미션 승인(#list_confirm) 세로 스택
   (#list_confirm은 complete 스텝에서만 렌더되므로 :has로 해당 스텝만 한정 — 두 버튼군이 한 줄에 겹치던 문제 수정) */
.btn-group.floating:has(#list_confirm){
    height: auto;
    line-height: normal;
    background: #fff;
    border-top: 1px solid var(--color-border-default);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    box-sizing: border-box;
}
.btn-group.floating:has(#list_confirm) .floating_btn_cont{
    position: static;
    bottom: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border-top: none;
}
.btn-group.floating:has(#list_confirm) #list_confirm{
    width: 100%;
    height: 50px;
    border-radius: var(--border-round-L);
    background: var(--gradient-color);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.btn_go_instar {
/*    background: url("../img/instar_bg.svg") center no-repeat;*/
}

.btn_go_instar img {
    margin-right: 2px;
}

.btn_green {
    display: block;
    height: 30px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #fff;
    background-color: #3ccbdb;
}

.light_gray_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gray);
    color: #888;
    cursor: pointer;
}

.selection_item .btn_green,
.selection_item .btn_sky {
    display: block;
    width: 99px;
    margin: 0 auto 0;
    font-size: 16px;
}

.selection_item .btn_sky {
    height: 30px;
    line-height: 28px;
    font-size: 14px;
}

.btn_toggle_detail {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #fff;
    background-color: var(--navy-color);
    padding: 9px 12px;
    display: flex;
    gap:8px;
}

.btn_toggle_detail.schedule{
    background: #3ccbdb;
    color: #fff;
    border: none;
}

.detail_box_wrap {
    display: none;
}
.card .detail_box_wrap {
    display: block;
/*    padding: 13px 15px;*/
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    margin-top: 10px;
    
}
.card .detail_box_wrap .detail_box{
    display: none;
}

.card .detail_box_wrap .detail_box.on{
    display: block;
}
.card .detail_box_wrap .review_cont .btn_sky_square{
    width: 100%;
    margin-top: 10px;
    line-height: normal;
    padding: 13px 0;
}



/*

.card .detail_box_wrap .checkBox input{
    margin: 0;
}
.card .detail_box_wrap .checkBox input:checked + label{
    background-image: url(../../STATIC/img/icon/checked.svg);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}
*/

.detail_box_wrap > button {
    margin-top: 9px !important;
}

.detail_box_wrap .btn_cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
}
.detail_box_wrap .btn_cont .empty_box{
    width: 15px;
}
.detail_box_wrap .btn_cont button{
    color: var(--primary-color);
    width: 100%;
    font-size: 16px;
    line-height: 1;
}
.detail_box_wrap .btn_cont.on img{
    transform: rotate(180deg);
}
.detail_box_wrap .btn_cont img{
    max-width: 15px;
}


.detail_box_wrap .btn_cont.on img{
    transform: rotate(180deg);
}
.detail_box_wrap .btn_cont .empty_box{
    width: 15px;
}

.detail_box {
    display: none;
/*    padding: 10px 15px 15px 17px;*/
/*    border-radius: 10px;*/
/*    background-color: #e9e9e9;*/
    padding-top: 10px;
}
.detail_box.on{
    display: block;
}

.selection_item.on {
    padding-bottom: 15px;
}

.selection_item.on .sel_profile_box {
/*    padding-bottom: 55px;    */
}

/*
.selection_item.on .detail_box_wrap {
    border-top: 1px solid #E4E8EE;
    display: block;
    padding-top: 24px;
}
*/
.card .selection_item.mission .review_cont{
    display: block;
}
.review_cont{
    display: none;
}
.review_cont.on{
    display: block;
}
.review_cont .btn_wrap #review_edit_btn{
    width: 100%;
    height: auto;
    padding: 13px 0 ;
    margin-top: 0;
}

.detail_box li {
/*
    position: relative;
    padding-left: 102px;
*/
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #222;
    display: flex;
    gap:8px;
}
.card .detail_box li{
    font-size: 16px;
    color: #666;
    font-weight: 400;
    line-height: 30px;
    flex-direction: column;
    gap:0;
    padding-bottom: 5px;
}
.card .detail_box li span{
    display: inline-block;
    width: 100%;
    text-align: left;
    word-break: keep-all;
    font-size: 14px;
    line-height: 1.6;
}

.detail_box li.list_col{
    flex-direction: column;
}
.card .detail_box li.list_col{
    margin-top: 10px;
}
.detail_box li.list_col textarea{
    border-radius: 5px;
    border: 1px solid #E4E8EE;
    background: #fff;
    padding: 10px;
    font-size: 13px;
    color: #222;
}

.detail_box li + li {
/*    margin-top: 5px;*/
}

.detail_box li h3 {
/*
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
*/
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #666;
    max-width: 92px;
    width: 100%;
}
.card .detail_box li h3{
    font-size: 16px;
    color: #222;
    font-weight: 400;
    line-height: 30px;
}

.detail_box textarea {
    width: 100%;
    height: 64px;
    padding: 8px 10px 5px;
    border-radius: 4px;
    border: solid 1px #E4E8EE;
    -webkit-appearance: none;
    background-color: #fff !important; 
    font-size: 10px;
    letter-spacing: -0.4px;
    color: #222;
    box-sizing: border-box;
    opacity:1;
}

.memo_box {
    position: relative;
    display: flex;
    gap:10px;
}
.card .memo_box{
/*    padding-top: 20px;*/
}

.card .sel_profile_box .reviewer_info .memo_box textarea {
    width: calc(100% - 64px);
    height: 64px;
    padding: 8px 10px 5px;
    border-radius: 4px;
    border: solid 1px #E4E8EE;
    -webkit-appearance: none;
    background-color: #fff !important; 
    font-size: 10px;
    letter-spacing: -0.4px;
    color: #666;
    box-sizing: border-box;
    opacity:1;
    margin: 0;
}

.card .sel_profile_box .reviewer_info .memo_box button {
/*
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
*/
/*    display: block;*/
    width: 60px;
/*    height: 64px;*/
    border-radius: 5px;
/*    border: solid 1px #E4E8EE;*/
    background-color: #fff;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.48px;
    color: #222;
    box-sizing: border-box;
    margin: 0;
}

.visitScheduledDate > .scheduleInfo{
    display: flex;
    font-size: 12px;
    flex-direction: column;
    height: 60px;
    justify-content: center;
}
.visitScheduledDate > .scheduleInfo.edit p{
    color: var(--primary-color);
    font-weight: 700;
}

.visitConfirm{
    padding-top: 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    
}

.visitConfirm span{
    background: #3ccbdb;
    padding: 4px 14px;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
}

.review_photo {
/*    margin-top: 20px;*/
    display: flex;
/*    align-items: flex-start;*/
/*    justify-content: space-between;*/
    gap: 5px;
}

.review_photo li {
    position: relative;
    text-align: center;
    flex: 1;
    word-break: keep-all;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.review_photo li.visitScheduledDate{
/*    max-width: 90px;*/
}

.review_photo h3 {
    padding-bottom: 8px;
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #666;
    word-break: keep-all;
}


.review_photo .thum {
    max-width: 70px;
    width: 100%;
    height: 70px;
    margin: 0 auto;
    border-radius: 5px;
    border: solid 1px #ededed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}

.review_photo .btn_go_blog,
.review_photo .btn_go_instar {
    position: static;
    margin: 0;
    padding: 0;
    border: none;    
    max-width: 70px;
    width: 100%;
/*    height: 100%;*/
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.review_photo .btn_go_blog img,
.review_photo .btn_go_instar img{
    max-width: 44px;
    width: 100%;
}

.review_photo .sns_review{
    display: inline-block;
    width: 100%;   
}
.review_photo .sns_review .thumbnail{
    border-radius: 10px;
    overflow: hidden;
    line-height: 1;
}

.review_photo .sns_review .thumbnail img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.review_photo .sns_review .sns_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}
.review_photo .sns_review .sns_info .btn_go_blog{
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
}

button:disabled {
    background: #e5e5e7;
}

.sub1_detail1 .selection_item.on {
    padding-bottom: 15px;
}
.selection_item.on .btn_wrap{
    padding-bottom: 20px;    
}

.selection_item .btn_wrap.detail{
    padding-top: 25px;
    padding-bottom: 0;
}
.sub1_detail .btn_wrap{
    justify-content: flex-start;
    gap: 8px;

}

.selection_item.check {
    background-color: #ffa53e;
}

.selection_item.check .sel_profile_box h2 {
    color: #444;
}

.selection_item.check .sel_profile_box p,
.selection_item.check .review_photo h3 {
    color: #fff;
}

.pop_review_edit .pop_cont {
    width: 90vw;
    padding: 10px 15px 15px;
}

.pop_review_edit .review_cont li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
}

.pop_review_edit .review_cont li div:first-child {
    width: 140px;
    padding-left: 13px;
}

.pop_review_edit .review_edit_box textarea {
    width: 100%;
    padding: 15px 20px;
    min-height: 60px;
    background-color: #F8F8FA;
    border-radius: 5px;
    margin-top: 20px;
}

.pop_review_edit .review_edit_box button {
    display: block;
    width: 132px;
    margin: 10px auto 0;
    height: 34px;
    font-size: 15px;
    letter-spacing: -0.64px;
    color: #fff;
    line-height: 1;
}

/* 일정 수정 요청 팝업 */

.pop_schedule_edit.on .pop_cont{
    width: 90vw;
    padding: 20px;
}

.pop_schedule_edit.on .edit_box textarea{
/*    width: 89%;*/
    padding: 10px 10px;
    min-height: 100px;
    background-color: #F8F8FA;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 14px;
}
.pop_schedule_edit.on #pop_schedule_edit{
    display: block;
    max-width: 112px;
    width: 100%;
    font-size: 15px;
    letter-spacing: -0.64px;
    color: #fff;
    line-height: 1;
    padding: 14px 0;
    border-radius: 5px
}
.pop_schedule_edit.on button.close{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    color: #3CCBDB;
    font-size: 15px;
    border: 1px solid #3CCBDB;
    line-height: 1;
    padding: 14px 0;
    max-width: 112px;
    width: 100%;

}
.pop_schedule_edit.on .review_edit_box textarea{
    width: 89%;
    padding: 15px 20px;
    min-height: 60px;
    background-color: #F8F8FA;
    border-radius: 5px;
    margin-top: 20px;
}
.pop_schedule_edit.on #pop_submit{
    display: block;
    width: 132px;
    margin: 10px auto 0;
    height: 34px;
    font-size: 15px;
    letter-spacing: -0.64px;
    color: #fff;
}

.pop_schedule_edit .edit_box{
    font-size: 14px;
}
.pop_schedule_edit .edit_box .desc {
    display: flex;
    flex-direction: column;
    gap:5px;
}

.pop_schedule_edit .btn_cont,
.modal-content .btn_cont{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 20px;
}
.pop_schedule_edit .btn_cont button,
.modal-content .btn_cont button {
    max-width: none;
    flex: 1;
}

/* // 일정 수정 요청 팝업 */


/*  일정 승인 팝업 */
.pop_scheduleConfirm .pop_cont{
    width: 90vw;
    padding: 10px 15px 15px;
}

.pop_scheduleConfirm .desc{
    color: #3ccbdb;
    font-weight: 700;    
    padding: 30px 0 40px;
    text-align: center;
}

.pop_scheduleConfirm .edit_box{
    display: flex;
    justify-content: center;
    gap:30px;
}

.pop_scheduleConfirm .edit_box button{
     max-width: 90px;
     width: 100%;
}
.pop_scheduleConfirm .edit_box .close{
    position: static;
}

.pop_scheduleConfirm .edit_box .btn_white{
     border: 1px solid #3ccbdb;
     color: #3ccbdb;
     border-radius: 10px;
}


/* // 일정 승인 팝업 */
/* 썸네일 가이드 모달 */
.pop_cont.thumbnail_example{
    padding: 20px;
    max-width: calc(100% - 40px);
    width: 100%;
}
.pop_cont.thumbnail_example .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E4E8EE;
    padding-bottom: 15px;
}
.pop_cont.thumbnail_example .head h2{
    margin: 0;
    padding-bottom: 0;
}
.pop_cont.thumbnail_example .head img{
    max-width: 15px;
    width: 100%;
}

.pop_cont.thumbnail_example .body{
    display: flex;
    gap: 14px;
    padding-top: 20px;
}
.pop_cont.thumbnail_example .close{
    position: static;
    padding: 0;
}
.pop_cont.thumbnail_example .close.btn{
    background: var(--primary-color);
    color: #fff;
    position: static;
    width: 100%;
    border-radius: var(--border-round-S);
    margin-top: 15px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
}
.pop_cont.thumbnail_example .item{
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    max-width: 200px;
}
.pop_cont.thumbnail_example .item:first-of-type .mark{
    color: var(--primary-color);
    font-weight: bold;
}
.pop_cont.thumbnail_example .item:last-of-type .mark{
    color: #F40000;
    font-weight: bold;
}
.pop_cont.thumbnail_example .item .text{
    text-align: center;
    line-height: 1.5;
    font-size: 14px;
}
.pop_cont.thumbnail_example .item .img_cont{
    line-height: 1;
}
.pop_cont.thumbnail_example .item .img_cont img{
    width: 100%;
}

/* // 썸네일 가이드 모달 */


/* 협찬 가이드 모달 */
.pop_cont.guide_modal{
    padding: 20px;
    max-width: calc(100% - 40px);
    width: 100%;
}
.pop_cont.guide_modal .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E4E8EE;
    padding-bottom: 15px;
}
.pop_cont.guide_modal .head h2{
    margin: 0;
    padding-bottom: 0;
}
.pop_cont.guide_modal .head img{
    max-width: 15px;
    width: 100%;
}

.pop_cont.guide_modal .body{
    display: flex;
    gap: 14px;
    padding-top: 20px;
}
.pop_cont.guide_modal .close{
    position: static;
    padding: 0;
}
.pop_cont.guide_modal .close.btn{
    background: var(--primary-color);
    color: #fff;
    position: static;
    width: 100%;
    border-radius: var(--border-round-S);
    margin-top: 15px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
}
.pop_cont.guide_modal .item{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pop_cont.guide_modal .item:first-of-type .mark{
    color: var(--primary-color);
    font-weight: bold;
}
.pop_cont.guide_modal .item:last-of-type .mark{
    color: #F40000;
    font-weight: bold;
}
.pop_cont.guide_modal .item .text{
    line-height: 1.5;
    font-size: 14px;
}
.pop_cont.guide_modal .item .text h5{
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-color);
}
.pop_cont.guide_modal .item .img_cont{
    line-height: 1;
}
.pop_cont.guide_modal .item .img_cont img{
    width: 100%;
}

/* // 썸네일 가이드 모달 */


/* 회원가입 쿠폰 안내 모달 */
.pop_cont.join_event{
    padding: 20px;
    max-width: calc(100% - 40px);
    width: 100%;
}
.pop_cont.join_event .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E4E8EE;
    padding-bottom: 15px;
}
.pop_cont.join_event .head h2{
    margin: 0;
    padding-bottom: 0;
}
.pop_cont.join_event .head img{
    max-width: 15px;
    width: 100%;
}

.pop_cont.join_event .body{
    display: flex;
    gap: 14px;
    padding-top: 20px;
    justify-content: center;   

}
.pop_cont.join_event .close{
    position: static;
    padding: 0;
}
.pop_cont.join_event .close.btn{
    background: var(--primary-color);
    color: #fff;
    position: static;
    width: 100%;
    border-radius: var(--border-round-S);
    margin-top: 15px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    margin-top: 25px;
}
.pop_cont.join_event .item{
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    max-width: 200px;
}
.pop_cont.join_event .item:first-of-type .mark{
    color: var(--primary-color);
    font-weight: bold;
}
.pop_cont.join_event .item:last-of-type .mark{
    color: #F40000;
    font-weight: bold;
}
.pop_cont.join_event .item .text{
    text-align: center;
    line-height: 1.5;
    font-size: 16px;
}
.pop_cont.join_event .item .img_cont{
    line-height: 1;
}
.pop_cont.join_event .item .img_cont img{
    width: 100%;
}

/* // 회원가입 쿠폰 안내 모달 */


/* 배송 안내 팝업 */
.pop_product_notice.on .modal-content{
    display: block;
    max-width: 700px;
    width: calc(100% - 80px);
    border: 2px solid #20ABC6;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
}

.pop_product_notice.on .modal-content .title{
    position: static;
    display: flex;
    padding: 0;
}
.pop_product_notice.on .btn-gorup{
    display: flex;
    flex-direction: column;
    gap: 10px;
/*    padding: 0px 40px;*/
}


.pop_product_notice.on .btn-gorup .btn{
    flex: 1;
    font-size: 14px;
    padding: 10px;
}

.pop_product_notice.on .btn-gorup button{
    color: #454D56;
}

.pop_product_notice.on .title h1{
    background: red;
    color: #fff;
    text-align: center;
    max-width: fit-content;
    padding: 0 40px;
    margin: 0 auto;
    font-size: 20px;
}


.pop_product_notice.on .notice {
    border-radius: 10px;
    border: 1px solid red;
    padding: 14px;
    margin-bottom: 20px;
}

.pop_product_notice.on .notice p{
    font-size: 14px;
    font-weight: 400;
     word-break: keep-all;
    line-height: 2;
}
.pop_product_notice.on .notice .textBold{
    font-weight: 700;
}
.pop_product_notice.on .notice .textBold .accent_color_red{
    color: red;
}

.pop_product_notice.on .reviewerList{
    max-height: 240px;
    overflow-y: auto;
    padding-right: 0;
    padding-bottom: 10px;
}

.pop_product_notice.on .reviewerList table{
    text-align: center;
    table-layout: fixed;
}

.pop_product_notice.on .reviewerList table th, modal.notice.on .reviewerList table td{
    padding: 14px 0 ;
    font-size: 14px;
}

.pop_product_notice.on .reviewerList thead {
    position: sticky;
    top: 0;
    background: #F4F5F9;
}

.pop_product_notice.on .reviewerList td{
    padding: 10px;
    font-size: 14px;
}

.pop_product_notice.on .reviewerList tbody th{
    font-weight: 400;
}


.step_nav {
    position: fixed;
    left: 0;
    top: 0px;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-sizing: border-box;
    flex-direction: column;
}

.create_head{
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    border-bottom:1px solid var(--color-border-default);
}

.create_head .text{
    font-size: 12px;
}

.step_nav h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.64px;
    color: #222;
    display: flex;
    align-items: center;
    gap:12px;
}

.step_nav .step_text {
    font-size: 12px;
    letter-spacing: -0.48px;
    color: #444;
}

.step_nav .step_text span {
    padding-right: 3px;
    font-size: 14px;
    letter-spacing: -0.56px;
}

.btn_gray {
    display: block;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: -0.64px;
    color: #fff;
    background-color: #454D56;
    box-sizing: border-box;
    line-height: 1.2;
}

.step_nav .btn_gray {
/*    width: 90px;*/
}

.step_item {
    position: relative;
    margin-bottom: 10px;
    padding: 24px 20px 24px;
/*    border-radius: 10px;*/
    background-color: #fff;
    box-sizing: border-box;
}

.step_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 8px 20px 20px;
    margin-bottom: 12px;
}

.step_info .step{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    font-size: 14px;
}

.step_info .step p{
    color: #999;
}

.step_info .step.active p:first-child{
    color: var(--primary-color);
}

.step_info .step.active p:last-child{
    color: #222;
}

.step_info .step p.dot{
    width: 9px;
    height: 9px;
    background: #D9D9D9;
    border-radius: 9999px;
}

.step_info .step.active p.dot{
    width: 9px;
    height: 9px;
    background: var(--primary-color);
    border-radius: 9999px;
}
.step_info .step p.dot.center{
    position: relative;
}
.step_info .step p.dot.center::before{
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    display: inline-block;
    transform: translateY(-50%);
    width: 31vw;
    height: 1px;
    background: #D9D9D9;
}
.step_info .step p.dot.center::after{
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    display: inline-block;
    transform: translateY(-50%);
    width: 31vw;
    height: 1px;
    background: #D9D9D9;
}

/* 캠페인 수정 모드: 결제(STEP3) 제외 — STEP1 ~ STEP2 2단계 진행 표시 */
.step_info--edit {
    padding-left: 60px;
    padding-right: 60px;
}
.step_info--edit .step p.dot.center::before {
    display: none; /* STEP3 방향(우측) 연결선 제거 */
}
.step_info--edit .step p.dot.center::after {
    width: calc(100vw - 198px); /* 좌우 60px 여백 반영 — 실제 화면 기준 미세조정값 */
}

.step_item h2 {
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -0.54px;
    color: #222;
}
.step_item h2.thumbnail{
    padding-bottom: 8px;
}
.step_item h2 span{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.33;
    letter-spacing: -0.54px;
    color: #222;
}

.step_item h2.hasNoti{
    padding-bottom: 8px;
}

.step_item.per_price_cont > div{
    display: flex;
    gap:30px;
}
.step_item .per_price_text{
    flex: 1;
    word-break: keep-all;
}
.step_box{
}

.step_box.cp_keyword_area{
    padding-top: 12px;
}
.step_box.add{
    text-align:  center;   
}

.step_box #cp_id_gp{
    margin-bottom: 12px;
}
.thumbnail ~ .step_box{
    padding-top: 16px;
}

.add_brand {
    display: inline-block;
    padding-top: 10px;
    cursor: pointer;
}

.add_brand img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 7px 0 0;
}

.select_list {
    font-size: 0;
}
.select_list.icon{
    padding-top: 10px;
}

/*
.select_list li {
    display: inline-block;
    vertical-align: middle;
    height: 44px;
    line-height: 42px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #666;
    border-radius: 10px;
    background-color: #fff;
    border: solid 1px #e9e9e9;
    cursor: pointer;
    box-sizing: border-box;
}
*/

.select_list{
    display: flex;
    flex-wrap: wrap;
    gap:8px;
}

.select_list li{
    height: 46px;
    line-height: 44px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.64px;
    color: #666;
    border-radius: 10px;
    background-color: #fff;
    border: solid 1px #E4E8EE;
    cursor: pointer;
    box-sizing: border-box;
}

.select_list li + li {
/*    margin-left: 10px;*/
}

.select_list li.type.on,.select_list li.quick_recruit.on{
    background: #3ccbdb;
    color: #fff;
}
.select_list li.on {
    border-color: #3ccbdb;
    color: #3ccbdb;
}
.select_list li.type.on.readonly{
    background: #f8f8fa;
    color: #3ccbdb;
}

.select_list li.shop_letter_num.on,.select_list li.place_letter_num.on,.select_list li.cp_keyword_use.on {
    background: #3ccbdb;
    color: #fff;
}


.select_list li img {
    max-width: 22px;
}
.select_list li.quick_recruit{
    flex:1;
    text-align: center;
}
.select_list li.cp_keyword_use{
    flex:1;
    text-align: center;
}

.select_list.icon li {
/*    width: calc(33% - 2.5px);*/
    padding: 0;
    text-align: center;
/*    margin-right: 5px;*/
/*    margin-bottom: 10px;*/
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap:4px;
}

.select_list.icon li + li {
    margin-left: 0;
}

.select_list.icon li:nth-child(3n) {
    margin-right: 0;
}

.select_list.icon li.on.readonly{
    background: #f8f8fa;
    color: #3ccbdb;
}
input.readonly{
    background-color: #f8f8fa;
}

.step_item .noti {
/*    padding-bottom: 16px;*/
    padding-top: 7px;
    font-size: 13px;
    letter-spacing: -0.48px;
    color: #999;
    line-height: 1.3;
}
.step_item .noti #span_check_txt{
    word-break: break-all;
}

.step_box input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: -0.48px;
    color: #444;
    border: solid 1px #e9e9e9;
    box-sizing: border-box;
    background-color: #fff;
}

.step_box input[type="text"]::placeholder {
    font-size: 14px;
    letter-spacing: -0.48px;
}

.step_box input[type="number"] {
    width: 100%;
    height: 44px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: -0.48px;
    color: #444;
    border: solid 1px #e9e9e9;
    box-sizing: border-box;
}

.step_box input[type="number"]::placeholder{
    font-size: 14px;
}
.step_box input[type="number"]:disabled{
    background: #F4F5F9;
}

.step_item2 > div + div {
    margin-top: 15px;
}

.numb_input {
    position: relative;
}

.numb_input input {
    padding-right: 15px !important
}

.numb_input .numb {
    position: absolute;
    right: 15px;
    top: 12px;
    font-size: 14px;
    letter-spacing: -0.48px;
    color: #888;
}

dd.numb_input .numb {
    right: 17px;
}



.step_box dl {
    margin-top: 2px;
}

/*
.dl_opt_name dd{
    padding-top: 16px;
}
*/
.dl_opt_name .div_sub_opt_price{
    display: flex;
    align-items: center;
    gap:5px;
    width: 100%;
    max-width: 180px;
    padding-bottom: 10px;
}
.div_sub_opt_price{
    width: 100%;
}

/*
#cp_opt_list .tip{
    padding-top: 10px;
}
*/
.step_box dl + dl {
    margin-top: 20px;
}

.step_box dt {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.54px;
    color: #222;
    padding-bottom: 16px;
    line-height: 1;
}
.step_box dt.opt_name{
     padding-bottom: 0; 
}

.step_box dl dd{
   display: flex;
    align-items: center;
   gap:15px;
}
.step_box dl dd.dd_sub_opt_price{
    display:block;
    padding-top:10px;
}
.step_box dl dd.dd_sub_opt_price::first-child{
    padding-top: 0;
}

.step_box dl dd.tag_area{
    display: block;
}

.step_box dl dd .add_btn{
    max-height: 44px;
    min-width: 70px;
    text-align: center;
    height: 44px;
    line-height: 44px;
    padding: 0;
}

.step_box dl dd.noti_box {
    padding-top: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 14px;
}
.step_box dl dd.noti_box b{
    color: #757575;
}
.step_box dl dd.noti_box > div{
    display: flex;
    align-items: center;
    gap:5px;
}
.step_box dl dd.noti_box > div ~ div{
    padding-left: 24px;
    color: #757575;
    font-size: 14px;
    display: initial;
}

.step_box dl.dl_cp_opt_condition{
    font-size: 14px;
    margin-top: 12px;
}
.step_box dl.dl_cp_opt_condition .checkBox input + label{
    background-size: 18px;
    padding-left: 30px;
}



.s_btn_list {
    margin-top: 10px;
    
}

#div_cp_contents_day dd{
    color: #666;
    font-size: 14px;
}
#div_cp_contents_day dd:last-child{
    padding-top:10px;
    gap:5px;
}

.btn_red {
/*    height: 30px;*/
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.56px;
    background: var(--color-surface-default);
    color: var(--color-status-error-default);
    border: 1px solid var(--color-status-error-default);
    box-sizing: border-box;
    padding: 8px 0;
/*    line-height: 1;*/
}

.s_btn_list button {
    height: 30px;
    font-size: 14px !important;
    letter-spacing: -0.56px;
}

.s_btn_list button.btn_red {
    width: 110px;
    margin-left: 5px;
}

.s_btn_list button.btn_sky {
/*    width: 82px;*/
}

.select_step_box dl {
    margin-top: 20px;
}

.select_day dt {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #222;
}

.day_list {
    font-size: 0;
    position: relative;
}

.day_list li {
    display: inline-block;
    vertical-align: middle;
}

.day_list li + li {
    margin-left: 20px;
}

.check {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 0;
}

.check_label {
    position: relative;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #92979c;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    align-items: center;
    gap:14px;
}
.day_list .check_label{
    flex-direction: column;
}

.check_label::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
/*    border-radius: 7px;*/
    background-color: #fff;
/*    border: solid 1px #e4e4e4;*/
    box-sizing: border-box;
}
.check + .check_label::before {
    background: url("../../STATIC/img/icon/check_2px.svg") center no-repeat;
    background-size: contain;
}
.check:checked + .check_label::before {
    background: url("../../STATIC/img/icon/checked_2px.svg") center no-repeat;
    background-size: contain;
}

 .checkBox {
        position: relative;
        display: inline-block;
        line-height: 19px;
        white-space: nowrap;
    }
.checkBox input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    margin: 0;
}
.checkBox input + label {
    padding-left: 25px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url(../../STATIC/img/icon/check_gray.svg);
    background-size: 15px;
}
.checkBox input.gray + label{
    background-image: url(../../STATIC/img/icon/check_box_gray.svg);
}

.checkBox input:checked + label {
    background-image: url(../../STATIC/img/icon/checked_2px.svg);
/*    background-size: 15px;*/
}
.checkBox input.gray:checked + label {
    background-image: url(../../STATIC/img/icon/checked_box_gray.svg);
}
.checkBox.fill_primary_btn{
    display: block;
    text-align: center;
    margin-top: 10px;
}

.checkBox_flex{
    position: relative;
    display: flex;
    gap:50px;
    line-height: 30px;
    white-space: nowrap;
}
.checkBox_flex input{
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}
.checkBox_flex input + label{
    padding-left: 30px;
}
.div_cp_qualified{
    padding-top: 5px;
}


.select_date dd {
    position: relative;
}

.select_date .ico_date {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

.select_time ul {
    display: flex;
}

.select_time li {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #92979c;
}

.select_time li + li {

}

.select_time li + li::before {
    content: "~";
    padding: 0 4px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #92979c;
}

.select_time select {
    width: 60px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.select_time select + select {
    margin-left: 5px;
    
}

.select_deadline dd {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #222;
}

.select_deadline dd select {
    width: 60px;
    margin-left: 7px;
}

.select_deadline span {
    padding-left: 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #666;
}

.next_page {
    padding:16px 16px 32px;
     /* padding: 20px 24px; */
}

/* 
.next_page .inner{
    background: #fff;
    border-radius: 16px;
   padding: 20px;
} */

.next_page p {
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.48px;
    color: #666;
    text-align: center;
    word-break: keep-all;
}

.next_page a {
    display: block;
    text-align: center;
    font-size: 18px;
    letter-spacing: -0.72px;
    color: #fff;
    max-width: 160px;
    width: 100%;
    margin: 0 auto;
}
.next_page button{
    padding: 13px 0;
}
.next_page .btn_group{
    display: flex;
    gap:15px;
}

.add_thum_list {
    display: flex;
    padding-top: 16px;
}

.add_thum {
    width: 64px;
    height: 64px;
    border-radius: 5px;
    border: solid 1px #d9d9d9;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
}

.add_thum + .add_thum {
    margin-left: 10px;
}

.add_thum .ico_add {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    cursor: pointer;
}
.tip{
    padding-bottom: 2px;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    width: fit-content;
    cursor: pointer;
}


.btn-upload {
    display: block;
    overflow: hidden;
    position: relative;
}

.btn-upload > img{
    width: 100%;
}
.remove_img{
    position: absolute;
    z-index: 99;
    top: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    height: 23px;
}

.remove_img img{
    vertical-align: top;
}

.select_list.guide li {
    width: 80px;
    text-align: center;
}

.agree_list {
/*    display: inline-block;*/
    vertical-align: middle;
    font-size: 0;
/*    padding-left: 50px;*/
}

.agree_list li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.agree_list li + li {
    padding-left: 20px;
}

.agree_list .check_label {
/*    padding-left: 35px;*/
}

.agree_list .check_label::after {
    position: absolute;
    left: 0;
    top: 1px;
}

.agree_photo {
    display: inline-block;
    vertical-align: middle;
    padding-left: 19px;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #666;
}

.agree_photo select {
    display: inline-block;
    margin: -2px 7px 0;
}

.width85 {
    width: 85px;
}

.width120 {
    width: 120px;
}

.width150 {
    width: 150px;
}

.width200 {
    width: 200px !important;
}
.width220 {
    width: 100% !important;
    max-width: 220px;
}

.agree_list2 {
    padding-top: 10px;
}

.gray_box {
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 10px;
    background-color: #F4F5F9;
}

.review_text_box li {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: -0.64px;
    color: #222;
    display: flex;
    align-items: center;
    gap:10px;
}
.review_text_box li:last-child{
    flex-direction: column;
    align-items: flex-start;
}

.review_text_box select {
    margin: 0;
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.48px;
    color: #666;
    flex: 1;
}

.review_text_box li:last-child select {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
    min-height: 44px;
}

.review_text_box input {
/*    margin-top: 10px;*/
    width: 100%;
    height: 44px;
    padding: 12px 15px 10px;
    border-radius: 8px;
    border: solid 1px #ededed;
    background-color: #fff;
    box-sizing: border-box;
}

.review_text_box #cp_blog_photo_num,.review_text_box #cp_instagram_photo_num{
    max-width: 150px;
}
.step_box textarea {
    width: 100%;
    height: 127px;
    padding: 12px;
    border-radius: 5px;
    border: solid 1px #e9e9e9;
    resize: none;
    font-size: 13px;
    letter-spacing: -0.48px;
    color: #222;
    box-sizing: border-box;
}

.more_qa {
    padding-top: 6px;
}

.more_qa h3 {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.56px;
    color: #666;
    padding-bottom: 8px;
}

.more_qa select {
    width: 135px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #666;
}

.error {
    display: block;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.56px;
    color: #eb6161;
}
/* 
.tag_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 5px;
}

.tag_list span {
    position: relative;
    height: 27px;
    margin-top: 5px;
    margin-right: 5px;
    line-height: 27px;
    padding: 0 26px 0 10px;
    font-size: 12px;
    letter-spacing: -0.48px;
    text-align: center;
    color: #3ccbdb;
    border-radius: 5px;
    border: solid 1px #3ccbdb;
    background-color: #fff;
    box-sizing: border-box;
}

.tag_list span::before {
    content: "#";
    font-size: 12px;
    letter-spacing: -0.48px;
    text-align: center;
    color: #3ccbdb;
}
.tag_list.keyword span::before {
    content: "";
}

.tag_list a {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 18px;
    height: 18px;
    background: url("../img/tag_close.svg") center no-repeat;
    cursor: pointer;
} */

.gray_box2 {
    padding-right: 10px;
    margin-bottom: 0;
    padding-left: 29px;
}

.gray_box2 ol {
/*    padding-bottom: 7px;*/
}

.gray_box2 ol li {
    position: relative;
/*    padding-left: 11px;*/
    font-size: 13px;
    letter-spacing: -0.48px;
    color: #222;
    line-height: 24px;
    list-style: disc;
}

.gray_box2 ol li span {
    position: absolute;
    left: 0;
    top: 0;
}

.tel_list {
    font-size: 0;
    display: flex;
}

.tel_list li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.tel_list li + li::before {
    content: "-";
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #222;
}

.tel_list input[type="text"] {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border: solid 1px #e9e9e9;
    box-sizing: border-box;
    text-align: center;
}

.step_item .s_btn_list.step_btn_cont{
    display: flex;
    
}
.step_item .s_btn_list.step_btn_cont li{
    flex:1;
}
.step_item .s_btn_list.step_btn_cont li button{
    max-width: none;
    
}

.step_item .s_btn_list {
    font-size: 0;
    margin-top: 0;
    padding: 16px 0 5px;
    text-align: center;
}

.step_item .s_btn_list li {
    display: inline-block;
    vertical-align: middle;
}

.step_item .s_btn_list li + li {
    margin-left: 15px;
}

.step_item .s_btn_list button {
    max-width: 100px;
    width: 100%;
    height: 36px;
    font-size: 18px;
    letter-spacing: -0.72px;
    box-sizing: border-box;
}
.step_item .s_btn_list button#add_cp_opt{
    padding: 15px 0;
    height: auto;
}
.step_item .s_btn_list button.btn_red{
    padding: 15px 0;
    height: auto;
}
.step_item#cp_opt_list > div{
    padding-bottom: 16px;
}

.step_item#cp_opt_list{
    margin-bottom: 0;
    padding-bottom: 0;
}
.step_item.all_recruit_cont{
    padding-top: 0;
}
.step_item.all_recruit_cont .div_recruit{
    padding-top: 30px;
    border-top: 1px solid #E4E8EE;
}

.cp_manuscript_fee .s_btn_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.cp_manuscript_fee .s_btn_list button{
    max-width: 88px;
    
}
.cp_manuscript_fee .s_btn_list .btn_white{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cp_manuscript_fee .s_btn_list .btn_white img{
    max-width: 16px;
}

.btn_gray2 {
    border-radius: 10px;
    border: solid 1px #707070;
    background-color: #fff;
    box-sizing: border-box;
}

.payment_list {
    padding-bottom: 24px;
}

.payment_list li {
    position: relative;
    padding: 16px 0 18px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.64px;
    color: #666;
    border-bottom: 1px solid #ededed;
}

.payment_list li > img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.payment_list button {
/*    position: absolute;*/
/*    left: 141px;*/
/*    top: 7px;*/
    width: 98px;
    height: 30px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.56px;
    text-align: center;
    color: #666;
    border: solid 1px #E4E8EE;
    background-color: #fff;
    box-sizing: border-box;
    margin-left: 8px;
}

.payment_list .price {
    position: absolute;
    right: 3px;
    top: 50%;
    text-align: right;
    font-size: 16px;
    letter-spacing: -0.56px;
    color: #666;
    font-weight: 400;
    transform: translateY(-50%);
}

.payment_list .price strong {
    padding-right: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}
.payment_list .price .free{
    font-size: 18px;
}

.gray_bg_box {
    position: relative;
    padding: 15px 10px;
    border-radius: 8px;
    background-color: #F4F5F9;
}

.payment_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payment_item .right_box {
    text-align: right;
    flex: 1;
    width: 100%;
}

.payment_item h3 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #222;
}

.payment_item .price {
/*    display: block;*/
/*    display: inline-block;*/
/*    padding-top: 13px;*/
    text-align: right;
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #3ccbdb;
}

.payment_item .price strong {
    display: inline-block;
    vertical-align: baseline;
    margin-top: -2px;
    font-size: 16px;
    font-weight: bold;
    color: #3ccbdb;
}
.payment_item .price.cancel strong{
    font-size: 14px;
    font-weight: 500;
    color: #444;
    vertical-align: baseline;
    text-decoration: line-through;
    padding-right: 0;
}
.payment_item .price.cancel{
        color: #444;
    font-size: 14px;
}

.payment_item .newPrice {
        color: #3ccbdb;
        font-size: 20px;
        font-weight: bold;
        padding-left: 8px;
    }

.payment_item.coupon{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

.payment_item.use_coupon h3 {
    flex: 1;
}

.payment_item.coupon .co_list{
    font-size: 14px;
    flex: 2;
    text-align: right;
    display: flex;
    flex-direction: column;
}

.payment_item .couponBtn{
        background: #fff;
        padding: 5px 10px;
        cursor: pointer;
        color: #666;
        border: solid 1px #e9e9e9;
        border-radius: 8px;
        font-size: 14px;
}

.payment_item.payment_no_bank{
    display: flex;
    align-items: center;
    column-gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.payment_item.payment_check h3{
    align-self: flex-start;
}
.payment_check {
    min-height: 88px;
    padding-bottom: 9.5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.payment_check .agree_list li + li {
    padding-left: 24px;
}

.payment_check .check_label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #222;
    gap:8px;
}
#card_info h3{
    font-size: 14px;
}

.order_numb {
/*    width: 245px;*/
    padding-top: 12px;
}

.payment_item .order_numb input[type="number"] {
    margin-left: auto;
    width: 203px;
    height: 44px;
    padding: 0 15px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #666;
    border: solid 1px #e9e9e9;
    background-color: #fff;
    box-sizing: border-box;
}
.payment_item .checkBox input{
    margin: 0;
}

.payment_total {
    padding-top: 15px;
    border-top: 1px solid #fff;
}

/*
.no_bank_check {
    position: absolute;
    left: 84px;
    top: 3px;
}
*/

.no_bank_list, .issued_list, .user_info_list {
    margin-top: 9.5px;
    padding-top: 9.5px;
/*    border-top: 1px solid var(--line-color);*/
}

.payment_item.payment_no_bank:has(input:checked){
    border-bottom: 1px solid #E4E8EE;
    padding-bottom: 18px;
}

.issued_list #cash_purpose, .user_info_list #tax{
    border-top: 1px solid #E4E8EE;
    padding-top: 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

.issued_list select#cash_purpose{
/*    padding-top: 0;*/
}

.payment_item input[type="text"], .payment_item input[type="number"] {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    border: 1px solid #E4E8EE;
    background-color: #fff;
    box-sizing: border-box;
}

.payment_item input[type="text"]{
    width: 100%;
}

.payment_item input[type="text"]::placeholder, .payment_item input[type="number"]::placeholder {
}

.payment_input {
/*    height: 40px;*/
    display: flex;
    justify-content: space-between;
    gap:5px;
}

#kmong_info .payment_input{
    gap:10px;
}

#cash_personal .payment_input {
    margin-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

#cash_business .payment_input {
    margin-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
}
#cash_business .payment_input:last-child{
    margin-bottom: 0;
}

#tax .payment_input {
    margin-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
    
}
#tax .payment_input:last-child{
    margin-bottom: 0;
}

#tax .payment_input h3{
    font-size: 12px;
}
#tax .payment_input.double{
    flex-direction: row;
}

.no_bank_list > div + div {
    margin-top: 18px;
}

.no_bank_list .payment_item h3,
.payment_input h3 {
/*    padding-top: 16px;*/
    font-weight: 400;
    display: flex;
    align-items: center;
    min-width: 60px;
    font-size: 12px;
}

.no_bank_list .payment_item_noti{
    color: var(--red-color);
    font-size: 12px;
    margin-top: 10px;
    text-align: right;
}

.no_bank_list .right_box {
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
}
.no_bank_list .right_box input{
    text-align: center;
}
.no_bank_list .right_box input::placeholder{
    text-align: center;
}
.no_bank_list .right_box input#depositor_name{
    max-width: 150px;
    margin-left: auto;
}

.right_box.align_left{
    line-height: 1.8;
    flex: none;
    width: fit-content;
}

.right_box.align_left .account_numb{
    text-align: left;
    font-size: 14px;
}
.right_box.align_left .account_numb:has(.account_text){
    display: flex;
    gap:10px;
    align-items: center;
    text-align: right;
    margin-left: auto;
    width: fit-content;
}
.right_box.align_left .account_numb:has(.account_text) button{
    font-size: 12px;
    line-height: 1;
    padding: 7px 10px;
    background: transparent;
}
.right_box.align_left .account_numb:first-child{
    font-size: 14px;
}

.no_bank_list .right_box #cp_depositor_name{
    text-align: center;
    width: 100%;
    text-align: center;
}
.no_bank_list .right_box #cp_depositor_name::placeholder,#cp_depositor_name::placeholder{
    text-align: center;
}


.no_bank_list .payment_item .price {
    padding-top: 10px;
}

.account_numb {
/*    padding-top: 10px;*/
    font-size: 14px;
    letter-spacing: -0.56px;
    text-align: right;
    color: #222;
}

.no_bank_list .noti {
    padding: 20px 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #888;
    line-height: 18px;
}

.payment_input select {
    width: 100%;
    height: 44px;
    background-color: #fff;
}
.payment_input select#cert{
    max-width: 150px;
}

.issued_list > div + div {
    margin-top: 13px;
    padding-top: 13px;
}

.issued_list .check_label {
    color: #222;
    gap:8px;
}

.issued_list .agree_list {
    padding-right: 5px;
}

.issued_list .agree_list li + li {
    padding-left: 23px;
}

.user_info_list {
    padding-top: 0;
    margin-top: 0;
}

.user_info_list > div {
    margin-top: 10px;
}

.user_info_list .noti {
    padding: 10px 0 5px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #666;
    line-height: 18px;
}

.user_info_list .error {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.4px;
    padding-bottom: 5px;
}

.payment_agree {
    padding-top: 7px;
    padding-bottom: 23px;
}

.payment_agree .check_label {
/*    padding-left: 22px;*/
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #222;
    gap:8px;
}

.payment_agree .check_label::after {
    position: absolute;
    left: 0;
    top: 4px;
}

.provide_info {

}
.provide_info li:first-child{
/*
    display: flex;
    justify-content: space-between;
    align-items: center;
*/
}

.provide_info li span {
/*    padding-left: 15px;*/
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.56px;
    color: #666;
}

.provide_info li:first-child span:first-child{
    font-size: 16px;
    padding-bottom: 8px;
    display: inline-block;
}

.provide_info .more {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #666;
    cursor: pointer;
    float: right;
    line-height: 24px;
}

.provide_info .more img {
    margin-left: 10px;
    transition: all 0.3s;
    margin-bottom: 2px;
}
.provide_info .more.on img{
    transform: rotate(180deg);
}

.marketing_agree .more img.on,
.provide_info .more img.on {
    transform: rotate(180deg);
}

.more_text {
    display: none;
    padding: 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #666;
    background-color: #F4F5F9;
    line-height: 18px;
}

.more_text.on {
    display: block;
}

.provide_info li + li {
    margin-top: 12px;
}

.provide_info li + li span {
    display: block;
}

.next_page2 p {
    padding-bottom: 12px;
}

.pop_brand .pop_cont {
    width: calc(100% - 40px);
    padding: 20px;
}

.pop_find .pop_cont {
    width: 398px;
    padding: 10px 15px 15px;
}

.pop_details .pop_cont {
    width: 90%;
    padding: 20px;
    max-width: 398px;
}

.details_desc {
    font-size: 12px;
    color: #888888;
    margin-bottom: 15px;
}

.details_list {
    margin-bottom: 15px;
}

.details_list h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.details_list table {
    table-layout: fixed;
    font-size: 13px;
}

.details_list table th {
    text-align: center;
    padding: 5px 0;
    background-color: #F4F5F9;
    font-weight: 500;
}

.details_list table td:nth-child(1) {
    width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.details_list table td {
    text-align: center;
    padding: 10px 0;
}

.details_payments h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.details_payments input {
    width: 100%;
    height: 40px;
    border: 1px solid #EDEDED;
    padding: 5px 15px;
}

.add_brand_box {

}

.add_brand_box input {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border-radius: 5px;
    font-size: 16px;
    letter-spacing: -0.48px;
    color: #666;
    border: solid 1px #E4E8EE;
    box-sizing: border-box;
}



.add_brand_box button {
    display: block;
/*    width: 132px;*/
    margin: 20px auto 0;
/*    height: 34px;*/
    font-size: 16px;
    letter-spacing: -0.64px;
    color: #fff;
    padding: 12px 25px;
    box-shadow: 0px 10px 15px 0px rgba(13, 186, 205, 0.20);
}

.find_box input {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: -0.48px;
    color: #444;
    border: solid 1px #e9e9e9;
    box-sizing: border-box;
}



.find_box button {
    display: block;
    width: 132px;
    margin: 10px auto 0;
    height: 34px;
    font-size: 15px;
    letter-spacing: -0.64px;
    color: #fff;
}

.my_brand_list {
    padding-top: 24px;
}

.my_brand_list h2 {
    padding-bottom: 12px;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.72px;
    color: #222;
}

.my_brand_list ul {
    width: 100%;
    height: 202px;
    padding: 0 16px;
    border-radius: 8px;
    background-color: #F4F5F9;
    overflow-y: auto;
    box-sizing: border-box;
}

.my_brand_list li {
    padding: 12px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #222;
    border-bottom: 1px solid #E4E8EE;
    gap:10px;
}
.my_brand_list li .brand_name{
    flex: 1;
}

.brand_btn_list {
    font-size: 0;
}

.brand_btn_list span {
    display: inline-block;
    vertical-align: middle;
    width: 54px;
    height: 30px;
    line-height: 28px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    letter-spacing: -0.56px;
    box-sizing: border-box;
}

.brand_btn_list span.ok {
    background: #D2D2DF;
    color: #fff;
}

.brand_btn_list span.ok.on {
    background-color: #3ccbdb;
    border: none;
}

.brand_btn_list span.del {
    border: solid 1px #eb6161;
    color: #eb6161;
    background: #fff;
}

.brand_btn_list span + span {
    margin-left: 10px;
}

.pop_review_detail .pop_cont {
    width: 398px;
    padding: 19px 15px 15px;
}

.pop_review_detail .gray_bg_box p {
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #888;
}

.pop_review_detail .close {
    right: 5px;
    top: 11px;
}

.pop_review_detail .gray_bg_box {
    padding: 13px 17px 15px;
}

.pop_review_detail h3 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.72px;
    text-align: left;
    color: #444;
}

.review_detail_tb {
    padding-top: 15px;
}

.review_detail_tb .table {
    padding: 0 15px;
    border-radius: 10px;
    background-color: #e9e9e9;
}

.review_detail_tb .table th {
    padding: 5px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    vertical-align: middle;
    color: #222;
}

.review_detail_tb .table td {
    padding: 14.5px 0;
    font-size: 14px;
    letter-spacing: -0.56px;
    text-align: center;
    color: #888;
}

.review_detail_tb .table tr {
    border-bottom: 1px solid #fff;
}

.review_detail_tb .table tbody tr:last-child {
    border: 0;
}

.review_detail_tb .table .tit {
    width: 100px;
    text-align: left;
}

.review_detail_tb .table .total {
    text-align: right;
}

.review_detail_tb .table .tit span {
    display: block;
    width: 80%;
}

.review_total {
    padding-top: 10px;
}

.review_total .price_input {
    height: 40px;
    padding: 8px 15px;
    border-radius: 5px;
    border: solid 1px #e9e9e9;
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #444;
    box-sizing: border-box;
}

.review_total .price_input strong {
    padding-right: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #3abac8;
}

#wrap.sub {
    min-height: 100%;
    background-color: #fff;
    box-sizing: border-box;
}

.my_notice {
    position: relative;
    padding: 16px;
}

.my_notice h2 {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: -0.8px;
    color: #222;
}

.read_all {
    position: absolute;
    top: 12px;
    right: 15px;
    display: block;
    width: 74px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #666;
    border-radius: 10px;
    border: solid 1px #e9e9e9;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.my_notice .notice_list li a {
    padding: 24px 0;
}

.my_notice_detail {
    padding: 19px 15px;
}

.my_notice_detail h2 {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.64px;
    color: #222;
}

.notice_detail {
    padding-bottom: 6px;
}

.notice_detail .date {
    display: block;
    padding-bottom: 1px;
    font-size: 12px;
    letter-spacing: -0.48px;
    color: #888;
}

.notice_detail h3 {
    padding-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -0.56px;
    color: #666;
}

.notice_detail textarea {
    width: 100%;
    height: 600px;
    padding: 7px 25px;
    border-radius: 5px;
    border: solid 1px #ededed;
    background-color: #fff;
    font-size: 14px;
    letter-spacing: -0.56px;
    color: #222;
    box-sizing: border-box;
}

.my_notice_detail button {
    width: 94px;
    height: 34px;
    margin: auto;
    display: block;
}

.qna {
    position: relative;
    padding: 24px 15px;
}

.qna h2 {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: -0.8px;
    color: #222;
    padding-bottom: 13px;
}

.qna .status_label{
    padding-left: 0;
}

.qna .subject_{
    display: flex;
    align-items: center;
    padding: 12px 0 ;
}

.qna .subject_ .conetnet div{
    font-size: 14px;
}

.qna .subject_ .conetnet span{
    font-size: 12px;
}

.qna .drop_{
    display: flex;
    align-items: center;
    padding: 12px 0 ;
}

.qna .drop_ .content{
    font-size: 14px;
}



    
.qna .Q, .qna .drop_ .A{
    
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F5F5FA;
    color: var(--primary-color);
    margin-right: 20px;

}
.qna .Q:before{
    content: "Q";
    font-weight: 700;
/*    padding-bottom: 5px;*/
}



.qna .drop_ .A{
    background-color: var(--primary-color);
    color: #fff;
    align-self: flex-start;
}
.faq_his_area li{
    border-bottom: 1px solid #ededed;
}

.faq_his_area .drop_ .A:before{
        content: "A";
    font-weight: 700;
/*    padding-bottom: 5px;*/
}

    .customer_tool {
/*        background-color: #F4F5F9;*/
        border-radius: 15px;
        margin-bottom: 20px;
    }
    .customer_tool .search_ {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 640px;
        margin: 0 auto;
        padding: 10px 0;
        gap:12px;
    }
    .customer_tool .search_ > div:first-child {
        font-size: 14px;
        font-weight: 700;
        width: fit-content;
    }
    .customer_tool .search_ input {
        height: 40px;
        line-height: 1;
        padding: 0 12px;
        border: 1px solid #E4E8EE;
        border-radius: 8px;
        flex: 4;
    }
    .customer_tool .search_ .submitBtn {
        box-shadow: none;
        height: 40px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 5px;
        flex: 1.25;
    }

.title {
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    padding: 16px 20px;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 9;
    font-weight: 700;
}
.title.none_header{
    top: 0;
}
.project_list .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.project_list .title .btn{
    background: #f4f5f9;
    padding: 8px 20px;
    border-radius: var(--border-round-S);
}

.title div{color: #444C67;}
.title h2 {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.8px;
    color: #222;
    display: flex;
    align-items: center;
    gap:20px;
}

.title h2 img{
    width: 10px;
    height: 20px;
}
.title h2 a{
    height: 20px;
}


.status_btn_list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

.status_btn_list button {
    width: 100px;
/*    height: 34px;*/
    margin: 0 !important;
    line-height: 1;
    padding: 11px;
}

.status_btn_list button + button {
    margin-left: 12px !important;
}

.project_list .pay_info{
    background: #ECF9FB;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    margin-top:12px;
}

.project_list .status_btn_list{
    display: flex;
    flex-direction: column;
    gap:10px;
}
.project_list .status_btn_list div{
    display: flex;
    width: 100%;
    gap:10px;
    justify-content: space-between;
}
.project_list .status_btn_list div:last-child{
    justify-content: flex-end;
}
.project_list .status_btn_list div button{
    width: calc(50% - 5px);
    margin: 0 !important;
    line-height: 1;
    height: 40px;
    font-size: 14px;
}
.project_list .status_btn_list div button.red_border{
    background: #fff;
    border: 1px solid var(--red-color);
    color: var(--red-color);
}

.label_wrap {
    display: flex;
    padding-bottom: 8px;
}

/* .label_wrap span{
    display: inline-block;
    line-height: 1;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    color: #666;
    background: #F0F0F0;
    box-sizing: border-box;
} */

.label_wrap span + span {
    margin-left: 8px;
}

/* .cart .label_wrap span{
    background: none;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
} */
.cart .label_wrap span.end{
    color: #888;
    border: 1px solid #888;
}

/* .account_info {
    padding-top: 11px;
    padding: 0px;
    border-radius: 10px;
    font-size: 14px;
} */
.account_info.is_pay{
    padding: 10px;
}

.account_info li {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.56px;
    color: #666;
}

.profile_item {
    position: relative;
    margin-bottom: 10px;
    padding: 16px;
/*    border-radius: 10px;*/
    box-shadow: 10px 10px 10px 0 rgba(212, 212, 223, 0.2);
    background-color: #fff;
}

.profile_item h2 {
    /* padding-bottom: 8px; */
    font-size: 24px;
    font-weight: bold;
    letter-spacing: -0.8px;
    color: var(--color-content-default);
    font:var(--font-title-xs);
}

.profile_item > div {
    position: relative;
    padding-left: 105px;
    margin-bottom: var(--spacing-16);
}
.profile_psw .psw-fields {
    padding-left: 0;
    margin-bottom: 0;
}
.profile_psw .psw-fields > div {
    position: relative;
    padding-left: 105px;
    margin-bottom: var(--spacing-16);
}

.profile_item h3 {
    position: absolute; 
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: #92979c;
}

.profile_item input {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    padding: 0 10px;
    border: solid 1px #e9e9e9;
    background-color: #fff;
    box-sizing: border-box;
    display: inline-block;
}

.profile_item input#mb_hp{
    width: calc(100% - 8px - 80px);
}

.profile_item .check_label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #92979c;
    line-height: 24px;
}

.profile_item select {
    height: 44px;
}

.profile_item .agree_list .check_label::after {
/*    top: 2px;*/
}


.my_profile h2 {
    padding-bottom: 14px;
}

.my_profile .profile {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
}

.my_profile .agree_list li + li {
    padding-left: 24px;
}

.input_btn_box {
    position: relative;
/*    padding-right: 71px;*/
    display: flex;
    gap:8px;
}

.input_btn_box button {

/*    height: 34px;*/
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #fff;
    border-radius: 10px;
    background-color: #454D56;
    box-sizing: border-box;
    display: inline-block;
    max-width: fit-content;
    width: 100%;
    word-break: keep-all;
}

.my_profile > .btn_sky {
    display: block;
    margin: auto;
    margin-top: 24px;
    width: 100%;
    height:48px;
    /* max-width: 160px; */
    /* box-shadow: 0px 10px 15px 0px rgba(13, 186, 205, 0.20); */
}

.marketing_agree {
    padding: 29px 20px;
}

.marketing_agree > div {
    margin-bottom: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #666;
}
.marketing_agree > div p{
    font: var(--font-body-s-regular);
    color: #666;
}
.marketing_agree > div a{
    color: var(--color-primary);
    text-decoration: underline;
}

.marketing_agree .more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-25%);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #92979c;
    cursor: pointer;
}

.marketing_agree .more img {
    display: inline-block;
    vertical-align: middle;
    padding: 0 12px;
    transition: all 0.3s;
}

.marketing_agree .agree_list {
/*    padding-top: 8px;*/
}

.marketing_agree .more_text {
    margin-top: 20px;
}

.profile_switch,
.profile_psw {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.profile_switch .switch-btns {
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile_switch .switch-btns a,
.profile_switch .switch-btns button {
    width: 100%;
    height: 48px;
    border: 1px solid var(--color-border-medium);
    border-radius: 5px;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.48px;
    color: var(--color-content-default);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.profile_psw .psw-fields {
    padding-left: 0;
    margin-bottom: 0;
}
.profile_psw .psw-fields > div {
    position: relative;
    padding-left: 105px;
    margin-bottom: var(--spacing-16);
}

.profile_psw > .btn_sky {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 24px;
}
.profile_psw > button.btn_sky:disabled {
    background: var(--color-surface-muted);
    color: var(--color-content-muted);
    cursor: default;
}

a.secession {
    /* position: absolute;
    left: 20px;
    bottom: 24px; */
    display:block;
    margin-top: var(--spacing-24);
    font-size: 14px;
    letter-spacing: -0.48px;
    color: var(--color-content-muted);
    text-decoration: underline;
}

.select_more {
    padding: 25px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    justify-content: space-around;
}

.select_more li {
    width: 33.333%;
/*    margin-bottom: 40px;*/
}

.select_more li:nth-child(1n + 4) {
    margin-bottom: 32px;
}

.select_more li a {
    font-size: 14px;
    line-height: 1.88;
    color: #888;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 82px;
}

.select_more img {
    display: block;
    margin: 0 auto 10px;
    max-width: 80px;
}

.more_list {
    padding: 20px;
}

.banner {
    width: 100%;
    height: 150px;
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.banner a {
    display: block;
    width: 100%;
    height: 100%;
}


.more_list ul {
/*    padding: 32px 15px 15px;*/
/*    padding: 15px 15px 15px;*/
    
}

.more_list li{
/*    padding-bottom: 32px;*/
    padding: 20px 0 ;
}

.more_list li:last-child{
    padding-bottom: 0;
}


.more_list li + li {
/*    margin-top: 8px;*/
}

.more_list li a {
    display: flex;
    align-items: center;
    gap:10px;
    width: 100%;
    font-size: 18px;
    letter-spacing: -0.56px;
    color: #222;
    background: url("../img/mo_more.svg") 100% 50% no-repeat;
    line-height: 1;
    font-weight: 400;
}
.more_list .head{
    display: flex;
    align-items: center;
    gap:10px;
    font-weight: 700;
    padding-bottom: 20px;
    font-size: 18px;
}
.more_list:last-child{
    margin-bottom: 50px;
}
.single_list{
    padding: 0 20px;
}
.single_list a{
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 1;
    padding: 24px 0;
    gap: 8px; 
    background: url(../img/mo_more.svg) 100% 50% no-repeat;
    line-height: 1;
}
.single_list a img{
    max-width: 38px;
}

.btn_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn_wrap button {
/*    margin: 9px 2px 0 !important;*/
}

.selection_item.on .on_hide {
/*    display: none;*/
}

.sign-up {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aae8ea+0,62dfe6+45,62dfe6+45,edd1f2+78 */
    background: rgb(170,232,234); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(170,232,234,1) 0%, rgba(98,223,230,1) 45%, rgba(98,223,230,1) 45%, rgba(237,209,242,1) 78%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(170,232,234,1) 0%,rgba(98,223,230,1) 45%,rgba(98,223,230,1) 45%,rgba(237,209,242,1) 78%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(170,232,234,1) 0%,rgba(98,223,230,1) 45%,rgba(98,223,230,1) 45%,rgba(237,209,242,1) 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aae8ea', endColorstr='#edd1f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.sign-up .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.sign-up .footer .wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sign-up .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.sign-up img {
    width: 100px;
    height: auto;
}
.sign-up h1{
    font-size: 28px;
    font-weight: 700;
    color: white;
    text-align: center;
}

.sign-up button {
    border-radius: 50px;
    width: 300px;
    height: 45px;
    font-size: 18px;
    font-weight: 500;
}
.sign-up .mob-kakao-join {
    background-color: #FFEE00;
    color: #2B1718;
}
.sign-up .mob-naver-join {
    background-color: #50AA34;
    color: #ffffff;
}
.sign-up .mob-site-join {
    background-color: #3CCBDB;
    color: #ffffff;
}
.sign-up .mob-opacity-button {
    border: 2px solid #ffffff;
    color: #ffffff;
}
.sign-up .footer span {
    color: #ffffff;
    text-align: center;
    font-size: 14px;
}
.sign-up .footer .bar {
    border-top: 1px solid #ffffff;
    width: 250px;
    height: 1px;
}
.sign-up .login-cs a {
    font-size: 14px;
    text-decoration: underline;
}
.sign-up .login-cs {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sign-up form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.sign-up form>input {
    border-radius: 50px;
    padding-left: 50px;
    width: 300px;
    height: 45px;
    border: none;
    background-color: #ffffff;
}

.reviewer_chk {
    width: 300px;
    display: flex;
    justify-content: flex-start;
    text-decoration: underline;
}
.sign-up .login-cs {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.auto-login {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    position: relative;
}


.auto-login .check_label {
    padding-left: 25px;
    color: #333;
}

.auto-login .check_label::after {
    position: absolute;
    left: 0;
    top: 3px;
}
.sng_sign {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sng_sign span {
    color: #ffffff;
    text-align: center;
    font-size: 14px;
}
.sng_sign .bar {
    border-top: 1px solid #ffffff;
    width: 250px;
    height: 1px;
}
.sng_sign ul {
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sng_sign ul li + li {
    margin-left: 20px;
}
.sng_sign ul li img {
    width: 50px;
    vertical-align: top;
}
.join-right {
    padding: 50px 0;
    height: 100vh;
    overflow: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: flex-start;
    align-items: center;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aae8ea+0,62dfe6+45,62dfe6+45,edd1f2+78 */
    background: rgb(170,232,234); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(170,232,234,1) 0%, rgba(98,223,230,1) 45%, rgba(98,223,230,1) 45%, rgba(237,209,242,1) 78%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(170,232,234,1) 0%,rgba(98,223,230,1) 45%,rgba(98,223,230,1) 45%,rgba(237,209,242,1) 78%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(170,232,234,1) 0%,rgba(98,223,230,1) 45%,rgba(98,223,230,1) 45%,rgba(237,209,242,1) 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aae8ea', endColorstr='#edd1f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.join-right h1 {
    font-size: 28px;
    text-align: center;
    font-weight: 700;
    color: #ffffff;
}
.join-right h2 {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
}
.reviewer_chk {
    width: 300px;
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    text-decoration: underline;
}
.join-right form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
.join-right form .field_wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
.join-right form .field {
    border-radius: 5px;
    background-color: white;
    padding: 0 0 0 20px;
    width: 300px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.join-right form .field>label {
    flex-shrink: 0;
    width: 100px;
    font-size: 14px;
}
.join-right form .field>input {
    flex-grow: 1;
    padding: 0;
    height: 100%;
    background-color: transparent;
    border: none;
}
.join-right .field_alert {
    color: #dc3545;
    font-size: 13px;
}
.join-right .field .btn {
    padding: 0 5px;
    width: 50px;
    border-radius: 5px;
    border: 1px solid #3ccbdb;
    color: #3ccbdb;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 30px;
    font-size: 13px;
    margin-right: 20px;
}
.join-right .term_wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 300px;
}
.term_wrap > ul li + li {
    margin-top: 20px;
}
.term_wrap .term {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.term_wrap .term
.term_wrap .term.allCehck {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 40px;
}
.drop_btn {
    position:absolute;
    top: 0;
    right: -90px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    width: 50px;
    padding: 2px 13px;
    border-radius: 5px;
    background-image: url(../../img/icon/tool/arrow_down_m.svg);
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: #3CCBDB;
    border: 1px solid #3CCBDB;
}
.drop_btn.active {
    background-color: #F1FCFE;
    color: #3CCBDB;
    background-image: url(../../img/icon/tool/arrow_up_m.svg);
}

.term_wrap .dorp_wrap {
    display: none;
    margin-top: 18px;
}
.term_wrap .dorp_wrap .text {
    background-color: #F5F5FA;
    border-radius: 5px;
    padding: 10px;
    max-height: 190px;
    overflow-y: scroll;
    /* white-space: pre-line; */
    font-size: 14px;
    line-height: 1.3em;
    color: #888;
}

.term_wrap .dorp_wrap .text::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
 }
.term_wrap .dorp_wrap .text::-webkit-scrollbar-thumb {
    background-color: #9499B4;
    border: 5px solid #F5F5FA;
    border-radius: 15px;
    cursor: pointer;
    opacity: 0;
 }
.term_wrap .dorp_wrap .text::-webkit-scrollbar-track {
    background-color: transparent;
    opacity: 0;
}
.join-right .biz-join {
    display: flex;
    justify-content: center;
}
.join-right .biz-join button {
    width: 300px;
    height: 45px;
    border-radius: 50px;
    font-size: 24px;
    background-color: #3CCBDB;
    color: #ffffff;
}

#new_service_price{
    display: none;
}

.service_price_li.new{}

.service_price_li.new #service_price{
    text-decoration: line-through;
}


.service_price_li.new #new_service_price{
    display: inline-block;
    color: var(--primary-color);
    font-weight: 700;
    padding-left: 5px;
}

.service_price_li.new #new_service_price .new_service_price{
    font-size: 16px; font-weight: 700;
}



/* 나의 쿠폰함 페이지 */

.customBtn{
    background-color: var(--primary-color);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 15px;
    border-radius: 10px;
    display: inline-block;
}
.customBtnDisable{
    background-color: var(--disabled-status-color);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 15px;
    border-radius: 10px;
    display: inline-block;
}

.main.coupon{
}

.section-area{
    position: relative;
    background-color: #fff;
    border-radius: 15px;
    /* box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2);
    -webkit-box-shadow: 10px 10px 10px rgba(212, 212, 223, 0.2); */
    /* padding: 15px; */
}

.section-area-non-round{
    position: relative;
    background-color: #fff;
    padding: 15px;
    padding-bottom: 50px;
}

.coupon .section-area{
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.coupon .register{
    display: flex;
    padding: 0 16px;
    padding-top: 20px;
}

.coupon .register .item{
    width: 100%;
    background: var(--color-surface-default);
    padding: var(--spacing-16);
    border-radius: var(--radius-16);
    border:1px solid var(--color-border-default);
    /* box-shadow: 0px 4px 5px rgba(100,100,100,0.3); */
}



.coupon .register .item form{
    display: flex;
    gap:16px;
    justify-content: space-between;
}

.coupon .register .item input{
    padding: 10px 10px;
    border-radius: 10px;
    background: var(--theme-bg-color);
    border: none;
    font-size: 14px;
/*    flex-basis: 75%;*/
    flex: 1;
    width: 100%;
}
.coupon .register .item button{
/*    flex-basis: 25%;*/
/*    white-space: nowrap;*/
    word-break: keep-all;
    min-width: 82px;
}



.coupon .banner_slider{
    padding:16px;    
}

.coupon .swiper-pagination-bullet{
    background: #fff;
    opacity: 1;
}

.coupon .swiper-pagination-bullet-active{
    background: var(--primary-color) ;
}
.coupon .swiper-slide{
    border-radius: 10px;
    
}
.coupon .banner_slider img{
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-16);
    border:1px solid var(--color-border-default);
    /* box-shadow: 0px 4px 5px rgba(100,100,100,0.3); */
    /* border-radius: 15px; */
}

.coupon .coupon_list{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.coupon .coupon_list > h2{
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin:24px 0 ;
}

.coupon .coupon_list{
}

.coupon .coupon_list .item{
    padding: 0 0 20px;
    display: flex;
    gap:60px;
    align-items: center;
}

.coupon .coupon_list .item:first-of-type{
    padding: 16px;
}

.coupon .coupon_list .item .status{
    padding-left: 25px;
    padding-right: 25px;
}

.coupon .coupon_list .item .coupon_box{
    padding: 20px;
    border-radius: 20px;
    /* box-shadow: 0px 4px 5px rgba(100,100,100,0.3); */
    width: 100%;
/*    background: url(../img/coupon_mo.png);*/
    position: relative;
    z-index: 1;
    aspect-ratio: 21 / 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--radius-16);
    border:1px solid var(--color-border-default);
}
.coupon .coupon_list .item .coupon_box img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.coupon .coupon_list .item .coupon_box h2{
    color: var(--accent-color);
    font-weight: 900;
    font-size: 34px;
    padding-bottom: 10px;
}

.coupon .coupon_list .item .coupon_box .coupon_name{
    font-weight: bold;
    padding-bottom: 10px;
}
.coupon .coupon_list .item .coupon_box .desc{
    padding-bottom: 10px;
}
.coupon .coupon_list .item .coupon_box .customBtn{
    width: fit-content;
}

.coupon .coupon_list .item .coupon_box .minPrice, .coupon .coupon_list .item .coupon_box .expiration{
    font-size: 12px;
    color: #727272;
}


#coupon_modal{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}
#coupon_modal.show{
    display: flex;
}

#coupon_modal .dimmed{
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    width: 100vw;
    height: 100vh;
    opacity: .5;
    z-index: 9998;
}

#coupon_modal .modal{
    width: 85vw;
    padding: 20px;
    margin: 0 15px;
    background: #fff;
    border-radius: 10px;
    z-index: 9999;
    position: fixed;
/*    bottom: 20px;*/
}

#coupon_modal .modal .head{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    font-size: 14px;
    align-items: center;
}
#coupon_modal .modal .head h2{
    font-weight: 700;
    
}

#coupon_modal .modal .th{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    padding-right: 20px;
    font-weight: 500;
    border-bottom: 1px solid #000;
}

#coupon_modal .modal .coupon_list{
    display: flex;
    flex-direction: column;
    gap:20px;
/*    padding: 14px;*/
/*    max-height: 200px;*/
    max-height: 50dvh;
    min-height: 150px;
    overflow-x: auto;
}

#coupon_modal .modal .coupon_list:has(.empty){
        justify-content: center;
}
#coupon_modal .modal .coupon_list .empty{
    text-align: center;
}


#coupon_modal .modal .coupon_list .item{
    display: flex;
    gap:10px;
    width: 100%;
    height: auto;
    flex-direction: column;
    border-radius: 10px;
    padding: 15px 10px;    
    border: 1px solid #E4E8EE;
}
#coupon_modal .modal .coupon_list .item:has(input:checked){
    background-color:#ECF9FB; 
    border: 1px solid var(--primary-color);
}
#coupon_modal .modal .coupon_list .item input{
    margin: 0;
}
#coupon_modal .modal .coupon_list .item label{
    font-size: 16px;
    font-weight: 500;
    padding-left: 30px;
}

#coupon_modal .modal .coupon_list .item .discount{
    color: var(--primary-color);
    font-size: 14px;
}
#coupon_modal .modal .coupon_list .item .discount span{
    font-size: 16px;
    font-weight: 700;
}


#coupon_modal .modal .coupon_list .item .coupon_info{
    border-top: 1px solid #E4E8EE;
    padding-top: 10px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: 1.4;
}
#coupon_modal .modal .coupon_list .item .coupon_info .co_name{
    font-size: 16px;
    font-weight: 500;
}
#coupon_modal .modal .coupon_list .item .coupon_info .d-day{
    color: var(--red-color);
    font-weight: 700;
}


#coupon_modal .modal .coupon_list .item .input_area{
    display: flex;
    align-items: center;
    gap:14px;
    word-break: keep-all;
}
#coupon_modal .modal .coupon_list .item .input_area input{
    height: auto;
    width: 16px;
  height: 16px;
  border-radius: 100%;
  margin-right: 0.1rem;
}

#coupon_modal .modal .coupon_list .item .input_area input[type='checkbox'] {
  background-color: #fff;
  border:1px solid #000;
}
#coupon_modal .modal .coupon_list .item .input_area input[type='checkbox']:checked {
    background-color: var(--primary-color);
}
#coupon_modal .modal .coupon_list .item .input_area input[type='checkbox']:checked::before{
    content: "";
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 100%;
}

#coupon_modal .modal .customBtn{
    border-radius: 10px;
    padding: 10px 15px;
}

#coupon_modal .modal .confirm{
    padding-top: 20px;
    text-align: center;
}
#coupon_modal .modal .confirm button{
    width: 100%;
}

#coupon_modal .close_btn{
    cursor: pointer;
}


/* 보고서 페이지 */

.fontBold{
    font-weight: 700;   
}

.btn-Gray{
    display: flex;
    align-items: center;
    background: var(--navy-color);
    color: #fff;
    cursor: pointer;
}

.btn-primary{
    display: flex;
    align-items: center;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
}

.send_message_btn{
    display: flex;
    gap:4px;
    padding: 8px;
    border-radius: 8px;
    line-height: 1;
    font-size: 12px;
    font-weight: 500;
    align-items: center;
/*    background: #fff;*/
/*    border: 1px solid var(--line-color);*/
} 
.send_message_btn img{
/*    max-width: 13px;*/
}


.customBtn_p{
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background: var(--main-color, #3CCBDB);
    box-shadow: 0px 10px 15px 0px rgba(13, 186, 205, 0.20);
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

.detail_view_btn{
    display: flex;
    align-items: center;
    gap:10px;
    position: relative;
    z-index: 1;
}

.detail_view_btn.show img{
    transform: rotate(180deg);
}
.detail_view_btn img{
    transform: rotate(0);
}


.report [data-section='1'] .table.grid-table {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: minmax(32px, auto);
    font-size: 14px;
    padding-bottom: 0px;
    color: #fff;
}

.report [data-section='1'] .header-cell{
    align-items: center;
    color: #fff;
}

.report [data-section='1'] .body-cell{
    flex-direction: column;
    border: none;
    color: #fff;
    padding: 0;
    white-space: normal;
    word-break: break-word;
}

.report [data-section='1'] .body-cell img{
    max-width: 28px;
}

.report [data-section='1'] .body-cell.cp_subject{
    padding-bottom: 9px;
}

.report [data-section='1'] .body-cell .media_cont{
    display: flex;
    align-items: center;
    gap:12px;
    flex-wrap: wrap;
}

.report [data-section='1'] .body-cell .media{
    display: flex;
    align-items: center;
    gap:12px;
}


.report [data-section='1'] .header-cell, .body-cell {
    display: flex;
    text-align: left;
    font-size: 16px;
}

.report [data-section='1'] .header-cell:nth-child(odd) {
    word-break: keep-all;
    align-items: flex-start;
    
}



.report .show[data-section='detail']{
    height: 100%;
    overflow: auto;
}

.report [data-section='detail']{
    display: flex;
    flex-direction: column;
    gap:20px;
    height: 0;
    overflow: hidden;
}






.report [data-section='detail'] .table.grid-table {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: minmax(50px, auto);
    font-size: 14px;
    padding-bottom: 0px;
}

.report [data-section='detail'] .header-cell{
    align-items: center;
}

.report [data-section='detail'] .body-cell{
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.report [data-section='detail'] .header-cell, .body-cell {
    display: flex;
    padding: 10px;
    border-top: 1px solid #E4E8EE;
}

.report [data-section='detail'] .header-cell:nth-child(odd) {
    background-color: #F4F5F9;
    word-break: keep-all;
    text-align: left;
}

#wrap.report{
    padding-top: 80px;
    background-color: #fff;
    padding-bottom: 120px;
}
.report{
    display: flex;
    flex-direction: column;
/*    gap:20px;*/
    padding: 20px;
}
.report section[data-section]{
    box-shadow: none;
    background: none;
    margin: 0;
    padding: 0;
}

.report section[data-section] h2{
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    color: #222;
} 

.report section[data-section] .swiper-button-next,
.report section[data-section] .swiper-button-prev{
    max-width: 48px;
    max-height: 48px;
    width: 100%;
    height: 100%;
    transition: opacity .5s;
}
.report section[data-section] .swiper-button-next{
    background: url(../../STATIC/img/icon/swiper_arrow_right.svg);
}
.report section[data-section] .swiper-blur-right{
    position: absolute;
    right:0;
    top: 0;
    max-width: 120px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.report section[data-section] .swiper-blur-left{
    position: absolute;
    left:0;
    top: 0;
    max-width: 120px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.report section[data-section] .swiper-button-prev{
    background: url(../../STATIC/img/icon/swiper_arrow_left.svg);
}

.report section[data-section] .swiper-button-next::after,
.report section[data-section] .swiper-button-prev::after{
    display: none;
}

.report section[data-section] .swiper-button-disabled{
    opacity: 0;
}

.report section[data-section='1'] .white{
    color: #fff;
    padding-bottom: 20px;
}

.report section[data-section='1']{
    padding-bottom: 14px;
}


.report [data-section='detail'] h2{
    padding-bottom: 12px;
}
.report [data-section='detail'] .item[data-detail-item="1"]{
    padding: 16px;
    border: 1px solid #E4E8EE;
    border-radius: var(--standard-radius);
}

.report section[data-section='1'] .item{
    flex:1;
    padding: 20px;
    border-radius: var(--standard-radius);
    box-shadow: var(--box-shadow);
}

.report section[data-section='1'] .item[data-item='1']{
    background-color: #454D56;
    color: #fff;
    margin-bottom: 12px;
}

.report section[data-section='1'] .item[data-item='1'] h2{
    color: #fff;
    padding-bottom: 18px;
}

/*
.report section[data-section='1'] .item[data-item='1'] .info-area{
    display: flex;
    align-items: center;
    gap:28px;
}
*/

/*
.report section[data-section='1'] .item[data-item='1'] .imgBox{
    max-width: 120px;
    max-height: 120px;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 120px;
}
*/

/*

.report section[data-section='1'] .item[data-item='1'] .textBox{
    display: flex;
    gap:36px;
}

.report section[data-section='1'] .item[data-item='1'] .textBox > .info{
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    gap:6px;
}
*/

/*

.report section[data-section='1'] .item[data-item='1'] .textBox > .info > p {
    color: #fff;
}
*/

.report section[data-section='1'] .item[data-item='1'] .th{
    font-weight: 400;
    word-break: keep-all;
    width: 90px;
    padding: 0;
}
.report section[data-section='1'] .item[data-item='1'] .th span {
    padding-left: 10px;
}
.report section[data-section='1'] .item[data-item='1'] .th span::before{
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 6px;
    width: 6px;
    height: 6px;
    background: var(--theme-color);
    border-radius: 50%;
}
/*
.report section[data-section='1'] .item[data-item='1'] .td{
    font-weight: 400;
    word-break: keep-all;
}
.report section[data-section='1'] .item[data-item='1'] .td.mission{
    display: flex;
    gap:20px;
}

.report section[data-section='1'] .item[data-item='1'] .td.mission span{
    display: flex;
    gap:10px;
}
*/

.report section[data-section='1'] .item[data-item='2']{
    background: #fff;
}



.report section[data-section='1'] .item[data-item='2']{
    display: flex;
    flex-direction: column;
    gap:20px;
}

.report section[data-section='1'] .item[data-item='2'] .info{
    display: flex;
    gap:15px;
    flex-direction: column;
}

.report section[data-section='1'] .item[data-item='2'] .info .th{
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    background: var(--bg-gray);
}
.report section[data-section='1'] .item[data-item='2'] .info .th p{
    flex: 1;
    text-align: center;
}

.report section[data-section='1'] .item[data-item='2'] .info .td{
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid #E4E8EE;
}

.report section[data-section='1'] .item[data-item='2'] .info .td > div{
    flex: 1;
    text-align: center;
    
}



.report section[data-section='2']{
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.report section[data-section='2'] .board{
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e8ee;
    border-radius: var(--standard-radius);
    overflow: hidden;
    padding: 0 20px;
}

.report section[data-section='2'] .item{
    background: #fff;
    display: flex;
    align-items: center;
    flex: 1;
    border-bottom: 1px solid #E4E8EE;
}
.report section[data-section='2'] .item:last-child{
    border-bottom: 0;
}

.report section[data-section='2'] .item .graph{
    transform: translateX(-30px);
}

.report section[data-section='2'] .item .info{
    display: flex;
    flex-direction: column;
    color: #666;
    transform: translateX(-30px);
}

.report section[data-section='2'] .item .info .ctg{
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 12px;
    color: #222;
}
.report section[data-section='2'] .item .info div span{
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.report section[data-section='2'] .item .info div .num{
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
}

.report section[data-section='2'] .item .info .accent{
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;    
}

.report section[data-section='2'] .item .info .accent_color_01{
    color:#3CCBDB;
}
.report section[data-section='2'] .item .info .accent_color_02{
    color:#FF8B8B;
}
.report section[data-section='2'] .item .info .accent_color_03{
    color:#809DEE;
}
.report section[data-section='2'] .item .info .accent_color_04{
    color:#FFBF40;
}


.report section[data-section='3']{
    background: #fff;
}

.report section[data-section='3'] .board{
    background: #fff;
    border-radius: var(--standard-radius);
}
.report section[data-section='3'] .board h2{
     display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
}

.report section[data-section='3'] .board > h2 > span{
    font-weight: 700;
}

.report section[data-section='3'] .board .nonKeyword{
    display: flex;
    justify-content: center;
    width: 100%;
}

.report section[data-section='3'] .board h2 .addKeyword{
    
    border-radius: 5px;
    padding: 8px 14px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    gap:8px;
}

.report section[data-section='3'] .swiper{
    padding-bottom: 25px;
}

.report section[data-section='3'] .board .keywordBox{
    display: flex;
    gap: 20px;
    overflow-y: scroll;
    padding-bottom: 30px;
}

.report section[data-section='3'] .board .keywordBox .swiper-slide{
    width: calc(100% - 33.3333% - 30px);
    max-width: 202px;
}

.report section[data-section='3'] .board .item{
    border: 1px solid #E4E8EE;
    border-radius: var(--standard-radius);
    padding: 20px;
    cursor: pointer;
    transform:initial;
}

.report section[data-section='3'] .board .item.active{
    border: 2px solid var(--primary-color);
    box-shadow: 0px 10px 20px rgba(32, 171, 198, 0.1);
}




.report section[data-section='3'] .board .item .keyword{
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
/*    padding-bottom: 10px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
/*
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
*/
}

.report section[data-section='3'] .board .item .searchCount{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #888;
    padding-bottom: 10px;
    padding-top: 10px;
    display: inline-block;
}

.report section[data-section='3'] .board .item .info{
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #222;
}



.report section[data-section='3'] .board .item .info p{
    display: flex;
    justify-content: space-between
}
.report section[data-section='3'] .board .item .info .ctg{
    display: flex;
    gap: 5px;
    align-items: center;
}

.report section[data-section='3'] .board .item .info .ctg span{
    line-height: 18px;
}

.report section[data-section='3'] .board .item .info p .accent{
    color: var(--primary-color);
}

.report section[data-section='3'] .mission_list{
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
}


.report section[data-section='3'] .mission_list .item{
    padding: 0;
    border: none;
    flex-basis: calc(50% - 15px); 
/*    overflow: hidden;*/
}
.report section[data-section='3'] .mission_list .item a{
    display: inline-block;
}

.report section[data-section='3'] .mission_list .item .imgBox{
    padding-bottom: 20px;
    border-radius: var(--standard-radius);
    height: 100%;
    aspect-ratio: 1 /1;
}
.report section[data-section='3'] .mission_list .item .imgBox img{
    max-width: 100%;
    border-radius: var(--standard-radius);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report section[data-section='3'] .mission_list .item .tag_area{
    display: flex;
    gap:10px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.05em;    
    color: #666;
    justify-content: space-between;
}

.report section[data-section='3'] .mission_list .item .appli_area{
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.report section[data-section='3'] .mission_list .item .appli_area .keyword{
    display: flex;
    padding-bottom: 5px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: #222;
    min-height: 27px;
    justify-content: space-between;
}

.report section[data-section='3'] .mission_list .item .appli_area .keyword span{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-height: 22px;
}

.report section[data-section='3'] .mission_list .item .appli_area .keyword .highRank{
    text-align: right;
    min-width: 75px;
}


.report section[data-section='3'] .mission_list .item .appli_area .desc{
    display: flex;
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    color: #666;
    flex-direction: column;
    gap: 12px;
}

.report section[data-section='3'] .mission_list .item .appli_area .desc .rightBox{
    display: flex;
    gap:12px;
    align-items: center;
    justify-content: flex-end;
}
.report section[data-section='3'] .mission_list .item .appli_area .desc .rightBox span{
    display: flex;
    gap : 8px;
    align-items: center;
}

.report section[data-section='3'] .mission_list .item .appli_area .desc .rightBox .bar{
    border-left:1px solid #E4E8EE;
    height: 15px;
}

.report section[data-section='3'] .mission_list .item .appli_area .desc .rightBox img{ width: 21px}


/* 고객 피드백 탭 */
.report section[data-section='3'] .feedback_list{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      grid-auto-rows: minmax(340px, 1fr);
      gap: 20px;
}


.report section[data-section='3'] .feedback_list .item{
    flex: 0 0 calc(20% - 50px); 
    padding: 20px;
    border: 1px solid #E4E8EE;
    position: relative;
    
}
.report section[data-section='3'] .feedback_list .item .best_label{
    position: absolute;
    left: 20px;
    top: 0;
    max-width: 44px;
}

.report section[data-section='3'] .feedback_list .profile_cont{
    text-align: center;
}

.report section[data-section='3'] .feedback_list .avg_cont{
    text-align: left;
    padding: 20px 0 14px;
    border-bottom: 1px solid #e4e8ee;
    margin-bottom: 14px;
}
.report section[data-section='3'] .feedback_list .avg_cont div{
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    color: #222;
    font-size: 16px;
}



.report section[data-section='3'] .feedback_list .item .name{
    padding-bottom: 10px;
    font-size: 18px;
    color: #000;
}
.report section[data-section='3'] .feedback_list .item .sns_name{
    display: flex;
    justify-content: center;
    gap:5px;
}
.report section[data-section='3'] .feedback_list .item .sns_name img{
    max-width: 22px;
}

.report section[data-section='3'] .feedback_list .item .profile_img{
    border-radius: 50%;
    height: 100%;
    max-width: 100px;
    margin: 0 auto;
    margin-bottom: 20px;
    position: relative;
    line-height: 1;
}
.report section[data-section='3'] .feedback_list .item .profile_img img{
    max-width: 100%;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.report section[data-section='3'] .feedback_list .item .profile_img .level_ico{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    border-radius: 0;
    max-width: 28px;
    max-height: 23px;
}

.report section[data-section='3'] .feedback_list .feedback_cont{
    padding-top: 15px;
}

.report section[data-section='3'] .feedback_list .feedback_cont .feedback{
    padding-bottom: 15px;
}

.report section[data-section='3'] .feedback_list .feedback_cont .feedback p{
    font-size: 16px;
    color: #222;
    padding-bottom: 10px;
    line-height: 1.3;
    word-break: keep-all;
}


.report section[data-section='3'] .feedback_list textarea{
    width: calc(100% - 20px);
    padding: 10px;
    color: #222;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    height: 60px;
    border:1px solid #E4E8EE;
    border-radius: 8px;
}
.report section[data-section='3'] .feedback_list .feedback_cont .btn_cont{
    display: flex;
    flex-direction: column;
    gap:10px;
}

.report section[data-section='3'] .feedback_list .feedback_cont .btn_cont .best_pick{
    width: 100%;    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.report section[data-section='3'] .feedback_list .feedback_cont .btn_cont div:last-child{
    display: flex;
    gap:10px;
    justify-content: space-between;
}
.report section[data-section='3'] .feedback_list .feedback_cont .btn_cont div:last-child button{
    flex: 1;
}


/* 서브 페이지 텝 */
.report .sub_page_tab{
padding-bottom: 84px;
}
.report .sub_page_tab ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #CBCFE8;
    width: 100vw;
    position: absolute;
    left: 0;
}
.report .sub_page_tab ul li.active {
}
.report .sub_page_tab ul li{
    max-width: 284px;
    width: auto;
    padding-left: 20px;
}
.report .sub_page_tab ul li + li {
/*    margin-left: 5px;*/
    margin-bottom: 0px;
}
.report .sub_page_tab a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    text-align: center;
    background: #fff;
    border: none;
    color: #888;
}
.report .sub_page_tab .active a {
    background: #fff;
    color: #000;
    border: none;
    font-weight: 700;
    border-bottom: 4px solid var(--primary-color);
}



.report section[data-section='4']{
    background: #fff;
    border-radius: var(--standard-radius);
    padding: 20px;
    border: 1px solid var(--line-color);
}

.report section[data-section='4'] h2{
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    justify-content: space-between;
}

.report section[data-section='4'] h2 .keyword {
    font-size: 20px;
}

.report section[data-section='4'] h2 .navigate{
    border-radius: 5px;
    padding: 8px 14px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: stretch;
    gap:6px;
}

.report section[data-section='4'] .keywordDetail{
    padding-bottom: 27px;
}

.report section[data-section='4'] .keywordDetail .info{
    display: flex;
    justify-content: space-between;
}

.report section[data-section='4'] .keywordDetail .info p{
    display: flex;
    gap:10px;
    align-items: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.report section[data-section='4'] .keywordDetail .info p span:first-child{
    color: #999;
    display: flex;
    align-items: center;
    gap:10px;
}
.report section[data-section='4'] .keywordDetail .info p span:last-child{
    color: #000;
}



.report section[data-section='4'] .proposal{
    border: 1px solid #E4E8EE;
    border-radius: var(--standard-radius);
    padding: 16px;
    color: #666;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    min-height: 100px;
    max-height: 200px;
    width: calc(100% - 36px);
}

.report section[data-section='4'] .optional{
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    column-gap: 5px;
}
.report section[data-section='4'] .optional .select_opt{
    display: flex;
    align-items: center;
    gap:11px;
    
}
.report section[data-section='4'] .optional .select_opt img{
    width: 10px;
    height: 7px;
}
.report section[data-section='4'] .optional .select_opt.open img{
    transform: rotate(180deg);
}

.report section[data-section='4'] .optional .select__wrap{
    position: absolute;
    right: 0;
    top: 40px;
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 15px;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.10);
    width: 100%;
    z-index: 999;
}

.report section[data-section='4'] .optional .select__wrap ul{
    padding: 8px 0;
}

.report section[data-section='4'] .optional .btn{
    display: flex;
    align-items: center;
    gap:10px;
    background: #fff;
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.report section[data-section='4'] .optional .btn.editMode{
    border: 1px solid var(--primary-color);
}

.report section[data-section] .table {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    text-align: center;
}

.report section[data-section] input{
    height: auto;
}

.report section[data-section] .row {
    display: flex;
    border-bottom: 1px solid #E4E8EE;
    max-height: 50px;
    transition: max-height .5s;
}
.report section[data-section] .row.open{
    max-height: unset;
}

.report section[data-section] .header {
    font-weight: bold;
    background: var(--bg-gray);
}
.report section[data-section] .header.editMode .cell:not(.fixed-header){
        cursor: move;
}

.report section[data-section] .header .th_rank {
    display: flex;
    align-items: center;
}

.report section[data-section] .cell {
    flex: 1;
    padding: 13px 15px;
    display: flex;
    gap:10px;
    justify-content: center;
    overflow: hidden;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #666;
}
.report section[data-section='4'] .table-container{
    width: 100%;
    padding-right: 0;
    padding-top: 25px;
}

.report section[data-section='4'] .table {
    display: flex;
    flex-direction: column;
    padding-bottom: 0px;
}

.report section[data-section='4'] .cell {
    flex: inherit;
    flex-basis: 180px;
}

.report section[data-section='4'] .right_cell p{
    width: 100% !important;
}

/*
.report section[data-section='4'] .cell:nth-child(1) {
    flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(2) {
    flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(3) {
    flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(4) {
    flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(5) {
    flex-basis: 180px;
}
.report section[data-section='4'] .cell:nth-child(6) {
    flex-basis: 180px;
}
*/
.report section[data-section='4'] .cell.title {
    flex:1;
}


.report section[data-section='3'] .keywordTable .cell:nth-child(1) {
    flex-basis: 50px;
    flex: none;
}


.report section[data-section='3'] .row  {
    display: flex;
}

.report section[data-section] .header .cell {
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #222;
    overflow: visible;
    word-break: keep-all;
}

.report section[data-section] .row .cell .showBtn {
    cursor: pointer;
}

.report section[data-section] .row .cell .showBtn img{
    transform: rotate(0);
}
.report section[data-section] .row.open .cell .showBtn img{
    transform: rotate(-180deg);
}


.report section[data-section] .row .cell.rank {
    display: flex;
    gap:5px;
}


.report section[data-section] .row .cell.rank .increase{
    position: relative;
    color: #0DBACD;
}

.report section[data-section] .row .cell.rank .decrease{
    position: relative;
    color: #EB6161;
}

.report section[data-section] .row .cell.rank .increase::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 6px;
    left: 0;
    background: url(../../STATIC/img/icon/increase.png);
    width: 13px;
    height: 10px;
/*    transform: translateY(-50%);*/
}

.report section[data-section] .row .cell.rank .decrease::before{
      content: "";
    display: inline-block;
    position: absolute;
    top: 6px;
    left: 0;
    background: url(../../STATIC/img/icon/decrease.png);
    width: 13px;
    height: 10px;
/*    transform: translateY(-50%);*/
    
}

.report section[data-section] .row .cell.more_view div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:13px;
    overflow: hidden;
    width: 100%;
}

.report section[data-section] .row .cell.more_view p{
    display: flex;
    flex-direction: row;
/*    justify-content: flex-end;*/
    justify-content: center;
    gap:10px;
    width: 85px;
    text-align: right;
}

.report section[data-section] .row .cell.more_view p span{
/*    flex: 1;*/
    word-break: break-word;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.report section[data-section] .row.open .cell.more_view p span{
/*
    overflow: initial;
    display: initial;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
*/
}

.report section[data-section] .cell.difficulty{
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
}

.report section[data-section] .cell.easy span{
    border: 2px solid #40A436;
    border-radius: 30px;
    color: #40A436;
    padding: 4px 15px;
}
.report section[data-section] .cell.hard span{
    border: 2px solid #EB6161;
    border-radius: 30px;
    color: #EB6161;
    padding: 4px 15px;
}
.report section[data-section] .cell.middle span{
    border: 2px solid #00353E;
    border-radius: 30px;
    color: #00353E;
    padding: 4px 15px;
}

.report section[data-section] .more{
    display: flex;
    justify-content: center;
    padding-top: 25px;
}
.report section[data-section] .more span{
background: var(--bg-gray);
    border-radius: 30px;    
    padding: 11px 0;
    max-width: 178px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-weight: 400;
    line-height: 18px;
    cursor: pointer;
    font-size: 16px;
}
.report section[data-section] .add{
     display: flex;
    justify-content: center;
    padding-top: 32px;
}
.report section[data-section] .add span{
    background: var(--primary-color);
    border-radius: var(--border-round-L);
    max-width: 178px;
    padding: 8px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    cursor: pointer;
    box-shadow: 0px 10px 20px rgba(60, 203, 219, 0.2);
    color: #fff;
    width: 100%;
    max-width: 300px;
}

.report .selectBox__ .list__ li{
    line-height: 30px;
}

.report .selectBox__ .list__ li.select{
    background:#F4F5F9;
}





.report section[data-section='3'] .optional{
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    column-gap: 5px;
}
.report section[data-section='3'] .optional .select_opt{
    display: flex;
    align-items: center;
    gap:9px;
    
}
.report section[data-section='3'] .optional .select_opt img{
    width: 10px;
    height: 7px;
}
.report section[data-section='3'] .optional .select_opt.open img{
    transform: rotate(180deg);
}

.report section[data-section='3'] .optional .select__wrap{
    position: absolute;
    right: 0;
    top: 40px;
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 15px;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.10);
    width: 100%;
    z-index: 1;
}

.report section[data-section='3'] .optional .select__wrap ul{
    padding: 8px 0;
}

.report section[data-section='3'] .optional .btn{
    display: flex;
    align-items: center;
    gap:10px;
    background: #fff;
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.report section[data-section='3'] .optional .btn.editMode{
    border: 1px solid var(--primary-color);
}

.report section[data-section='5'] .fake_bg{
    background: #F4F5F9;
    padding: 6px;
    width: calc(100% + 30px);
    transform: translateX(-20px);
    
}

.report section[data-section='5']{
    background: #fff;
    border-radius: var(--standard-radius);
    padding: 24px 0 0;
}

.report section[data-section='5'] h2{
    padding-top: 10px;
    padding-bottom: 5px;
}

.report section[data-section='5'] p{
    font-weight: 400;
    font-size: 14px;
    padding-bottom: 20px;
}

.report section[data-section='5'] textarea{
    width: calc(100% - 30px);
    padding: 14px;
    border-radius: 15px;
    border: 1px solid #E4E8EE;
    background: #FFF;
    min-height: 100px;
    color: #222;
    font-size: 14px;
    font-weight: 400;
}

.report section[data-section='5'] .add .btn-primary{
    max-width: 200px;
}






.modal_cont{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}

.modal_cont.show{
    display: flex;
}

.modal_cont .dimmed{
    position: absolute;
    left: 0;
    top: 0;
    background: #AEAEAE;
    width: 100vw;
    height: 100vh;
    opacity: .5;
    z-index: 9998;
}

.modal_cont .modal{
    max-width: calc(100% - 80px);
    min-height: 350px;
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: static;
    height: auto;
}

.modal_cont .modal .upBox{
    width: 100%;
}
.modal_cont .modal .downBox{
    display: flex;
    justify-content: center;
    width: 100%;
}

.modal_cont .modal .head{
    display: flex;
    padding-bottom: 32px;
    align-items: center;
    position: relative;

}
.modal_cont .modal .head h2{
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
}

.modal_cont .modal .head span{
    position: absolute;
    right: 0;
}
.modal_cont .modal .head span img{
    width: 18px;
    height: 18px;
}

.modal_cont .modal input{
    width: 100%;
    height: auto;
    min-height: 50px;
    border: 1px solid #EDEDED;
    border-radius: 5px;    
    margin-bottom: 10px;
}

.modal_cont .modal .keyword_list{
    min-height: 200px;
    height: 200px;
    overflow-y: auto;
    padding-right:0;
    padding-bottom: 10px;
}


.modal_cont .modal .add{
    display: flex;
    justify-content: center;
    cursor: pointer;
}


.modal_cont .modal .add span{
    display: flex;
    justify-content: center;
    background: var(--navy-color);
    border-radius: 50px;
    line-height: 1;
    padding:15px;
}

.modal_cont .modal .register{
    background: #3CCBDB;
    box-shadow: 0px 3px 20px rgba(60, 203, 219, 0.3);
    border-radius: 25px;
    padding: 13px 0;
    max-width: 160px;
    width: 100%;
    color: #fff;
    font-size: 16px;
}



.modal_cont .close_btn{
    cursor: pointer;
}


#best_pick_modal.modal_cont .modal{
    min-height: 230px;
}

#best_pick_modal.modal_cont .modal .head{
    padding: 0;
    width: 100%;
}

#best_pick_modal.modal_cont .modal .body_cont{
    color: #222;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}


#best_pick_modal.modal_cont .modal .btn_cont{
    display: flex;
    justify-content: center;
    gap:20px;
    width: 100%;
}

#best_pick_modal.modal_cont .modal .btn_cont button{
    max-width: 134px;
    width: 100%;
}


#best_pick_modal.modal_cont .close_btn{
    cursor: pointer;
}






#create_campaign_modal{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}

#create_campaign_modal.show{
    display: flex;
}

#create_campaign_modal .dimmed{
    position: absolute;
    left: 0;
    top: 0;
    background: #AEAEAE;
    width: 100vw;
    height: 100vh;
    opacity: .5;
    z-index: 9998;
}

#create_campaign_modal .modal{
    max-width: calc(100% - 80px);
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: static;
    height: auto;
}

#create_campaign_modal .modal .upBox{
    width: 100%;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    padding: 40px 0 60px;

}
#create_campaign_modal .modal .downBox{
    display: flex;
    justify-content: center;
    width: 100%;
    gap:16px;
}
#create_campaign_modal .modal .downBox button{
    font-size: 16px;
    font-weight: 500;
}

#create_campaign_modal .modal .head{
    display: flex;
    padding-bottom: 32px;
    align-items: center;
    position: relative;

}
#create_campaign_modal .modal .head h2{
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
}

#create_campaign_modal .modal .head span{
    position: absolute;
    right: 0;
}

#create_campaign_modal .modal input{
    width: 100%;
    height: auto;
    min-height: 50px;
    border: 1px solid #EDEDED;
    border-radius: 5px;    
    margin-bottom: 10px;
}

#create_campaign_modal .modal .keyword_list{
    min-height: 200px;
    height: 200px;
    overflow-y: auto;
    padding-right:0;
    padding-bottom: 10px;
}


#create_campaign_modal .modal .add{
    display: flex;
    justify-content: center;
    cursor: pointer;
}


#create_campaign_modal .modal .add span{
    display: flex;
    justify-content: center;
    background: var(--navy-color);
    border-radius: 50px;
    line-height: 1;
    padding:15px;
}

#create_campaign_modal .modal .cancel{
    background: #D2D2DF;
    border-radius: 25px;
    padding: 13px 0;
    max-width: 260px;
    width: 100%;
    color: #fff;
}
#create_campaign_modal .modal .register{
    background: #3CCBDB;
    box-shadow: 0px 3px 20px rgba(60, 203, 219, 0.3);
    border-radius: 25px;
    padding: 13px 0;
    max-width: 260px;
    width: 100%;
    color: #fff;
}



#create_campaign_modal .close_btn{
    cursor: pointer;
}










.checkbox_ {
     position: relative;
     height: 100%;
}
.checkbox_ input {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     opacity: 0;
     cursor: pointer;
}
.checkbox_ input + label {
     display: flex;
     justify-content: flex-start;
     align-items: center;
    cursor: pointer;
}
.checkbox_ input + label:before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 0px;
    background-image: url(../img/check.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    min-width: 18px;
}
.checkbox_ input:checked + label:before {
    background-image: url(../img/checked.png);
}


/* // 보고서 페이지 */



#wrap .select2-container--default .select2-selection--multiple{
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid #E4E8EE;
    background: #fff;
    background: url(../img/select_arrow.svg) calc(100% - 8px) 50% no-repeat;
}


.step_item .feedback_head{
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    align-items: center;
}
.step_item .feedback_head h2{
    padding-bottom: 0;
}

.step_item .feedback_head button{
    color: var(--primary-color);
    border-color: var(--primary-color);
    border:1px solid var(--primary-color);
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.step_item.feedback_use_area li{
    padding: 13px 33px;
    line-height: 1;
    height: auto;
}

.step_item.feedback_use_area .feedback_option{
}

.step_item.feedback_use_area .feedback_option p{
    font-size: 13px;
    color: #999;
    padding: 16px 0;
    line-height: 1;
}

.feedback_use_area .select2-container{
    width: 100% !important;
}
 .select2-container--default .select2-search--dropdown .select2-search__field{
    background: #fff !important;
     font-size: 14px;
}
.select2-search--dropdown .select2-search__field{
    height: 44px;
}
.feedback_use_area .select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 44px;
}

.feedback_use_area .select2-container--default .select2-selection--single .select2-selection__arrow b{
    margin-left: -6px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 10px;
    height: 100%;
    background: url(https://assaview.co.kr/biz/mob/img/select_arrow.svg);
    background-repeat: no-repeat;
    border: none;
}

.step_item.feedback_use_area .select2-container--default .select2-selection--single{
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font-size: 14px;
    border: solid 1px #e9e9e9;
}

.step_item.feedback_use_area .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 44px;
}


.feedback_example .pop_cont{
    width: 80%;
    padding: 24px 20px;
}
.feedback_example .pop_cont p:first-child{
    color: #222;
}
.feedback_example .pop_cont p {
     font-weight: 400;
    font-size: 12px;
    padding-bottom: 10px;
    color: #666;
}

.feedback_example .pop_cont .img_box{
    overflow-y: scroll;
    height: 70vh;
}
.feedback_example .pop_cont .close{
    position: static;
    border:1px solid #E4E8EE;
    text-align: center;
    display: block;
    padding: 14px 0;
    line-height: 1;
    font-size: 16px;
    border-radius: 8px;
}



.floating_btn{
    position: fixed;
    right: -50px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    z-index: 9999;
    
}

.floating_btn .receipt{
    background: #7A58FF;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 8px 15px;
    border-radius: 5px 5px 0px 0px;
    cursor: pointer;
}
.floating_btn .receipt div{
    display: flex;
    gap:14px;
    color: #fff;
    
}
.floating_btn .receipt div span{
    letter-spacing: 1.6px !important;
    font-size: 14px;
}
.floating_btn .receipt img{
    transform: rotate(90deg);
    max-width: 16px;
}

.pop_payment{
    min-width: 200px;
/*    padding: 40px 35px;*/
}
.pop_payment .closer{
    right: 0;
}


.pop_payment .pop_cont{
    width: calc(100% - 40px);
}


.pop_payment .body{
    padding: 20px;
}


.pop_payment .expectation_total_price{
    font-size: 28px;
    font-weight: 700;
    line-height: 30px;
}
.pop_payment .unit{
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}
.pop_payment .body .price_noti{
    color: #222;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    
}
.pop_payment .body span.price{
    font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 30px;
}

.pop_payment .details{
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    padding: 15px 0 15px;
}

.pop_payment thead{
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}
.pop_payment thead th{
    padding: 13px 0 ;
    background: #F4F5F9;
        font-size: 14px;
    font-weight: 400;
    color: #222;
}

.pop_payment .details tbody tr{
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    border-bottom:1px solid #E4E8EE;
}
.pop_payment .details tbody tr td{
    padding: 12px 0;
}

.pop_payment .noti p{
    position: relative;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 4px;
    color: #666;
}
.pop_payment .noti p::before{
    content: "";
    position: absolute;
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #666;
    border-radius: 50%;
    top: 12px;
    left: 0;
    transform: translateY(-50%);
}

.pop_payment .btn_cont{
    padding-top: 20px;
    text-align: center;
    
}
.pop_payment .btn_cont button{
   max-width: 134px;
    width: 100%;
    position: static;
    line-height: 24px;
    padding: 13px 0;
}



/* modal */
    .modal-dialog {
        position: fixed;
        display: flex;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: none;
    }
    .modal-dialog .dim {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-color: rgba(0,0,0,0.3);
    }
    .modal-dialog .modal-content {
        position: relative;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100dvw - 40px);
        height: 100%;
        margin: 0 auto;
    }

    .modal-layer {
        position: relative;
        background-color: #fff;
        border-radius: 20px;
        width: 100%;
        max-width: 900px;
        color: #444;
    }
    .modal-layer .closer {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 18px;
        height: 18px;
        background-image: url(../img/close.svg);
        background-repeat: no-repeat;
        background-position: center; 
        cursor: pointer;
    }
.modal-layer .closer:has(img){
    background-image: none;
}
    .modal-layer .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
/*        border-bottom: 1px solid #E7E7E7;*/
        padding: 20px;
    }
    .modal-layer .head h1 {
        font-size: 20px;
        font-weight: 700;
    }
    .modal-layer .content {
        padding: 20px 20px;
    }
.modal-layer .content .date_cont{
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
}
.ui-modal-layer .content .date_cont input{
    width: 180px;
    height: auto;
    border: 1px solid #3ccbdb;
    border-radius: 5px;
    padding: 10px 30px;
    cursor: pointer;
    font-size: 16px;
    background-image: url('../../STATIC/img/icon/date_icon.svg');
    background-size: 23px;
    background-repeat: no-repeat;
    background-position-x: calc(100% - 20px);
    background-position-y: center;
    margin: 0 auto;
}
.ui-modal-layer .content .desc{
    padding-top: 20px;
    padding-bottom: 1px;
}
.modal-layer .content .notice{
    padding-top: 20px;
}
.date-modify .modal-layer .head h1 {
    width: 100%;
    text-align: center;
    font: var(--font-title-xs);
    letter-spacing: -1px;
    color: var(--color-content-default);
}
.date-modify .modal-layer .content .notice {
    font: var(--font-body-s-medium);
    letter-spacing: -0.5px;
    color: var(--color-content-subtle);
}
.date-modify .modal-layer .content .date_cont {
    width: 100%;
    margin: 0;
}
.date-modify .modal-layer .content input {
    width: 100%;
    border: 1px solid var(--color-border-brand);
    border-radius: var(--radius-8);
}
.date-modify .modal-layer .btn_area .submitBtn {
    background: var(--color-surface-brand);
    border: 1px solid var(--color-surface-brand);
    color: var(--color-content-inverse);
    box-shadow: none;
}
.date-modify .modal-layer .btn_area .submitBtn:hover {
    background: var(--color-surface-brand);
    border: 1px solid var(--color-surface-brand);
    color: var(--color-content-inverse);
}
.date-modify .modal-layer .btn_area .whiteBtn {
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    color: var(--color-content-default);
}
.date-modify .modal-layer .closer {
    right: 20px;
    top: 20px;
    background-color: var(--color-content-subtle);
    background-image: none;
    -webkit-mask-image: url(../img/close.svg);
    mask-image: url(../img/close.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
    .modal-layer .field {
        background-color: transparent;
        height: auto;
        padding: 0;
    }
    .modal-layer .field + .field {
        margin-top: 15px;
    }
    .modal-layer .field label {
        width: 127px;
        font-size: 16px;
        font-weight: 500;
        color: #222222;
    }

    .modal-layer .field input,
    .modal-layer .field .selectBox__ .select__ {
        background-color: #F5F5FA;
        height: 50px;
        border-radius: 10px;
        padding: 0 15px;
    }

    .modal-layer .field .notice {
        background-color: #F5F5FA;
        border-radius: 10px;
        padding: 20px;
        width: 100%;
    }

    .modal-layer .field .selectBox__.on .select__ {
        border-radius: 10px 10px 0px 0px;
    }
    .modal-layer .check_wrap {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
    }
    .modal-layer .check_wrap .checkbox_ label {
        width: auto;
        font-size: 16px;
        font-weight: 400;
        color: #444;
    }
    .modal-layer .check_wrap .checkbox_ + .checkbox_ {
        margin-left: 45px;
    }
    .modal-layer .notice_ {
        background-color: #F5F5FA;
        border-radius: 10px;
        padding: 20px;
    }
    .modal-layer .notice_ h1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 500;
        margin-bottom: 10px;
        font-size: 14px;
    }
    .modal-layer .notice_ i {
        margin-right: 10px;
    }
    .modal-layer .contact_notice {
        background-color: #F5F5FA;
        border-radius: 10px;
        padding: 20px;
    }
    .modal-layer .contact_notice h1{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 500;
        margin-bottom: 10px;
    }
    .modal-layer .contact_notice i{
        margin-right: 10px;
    }
    .modal-layer .btn_area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        gap:10px;
}
.modal-layer .btn_area button{
    flex: 1;
    height: auto;
    border-radius: 5px;
    width: auto;
    font-weight: 500;
/*    max-width: 134px;*/
    padding: 13px 0;
    box-shadow: none;
    line-height: 1;
}
.modal-layer .field_area .field .SNS_ li{
    height: 35px;
    font-size: 14px;
}


.modal-dialog.bottom_sheet{
    align-items: flex-end;
}
.modal-dialog.bottom_sheet .modal-content{
    bottom: 0;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 20px 70px;
    position: absolute;
    background: #fff;
}

.modal-dialog.bottom_sheet .modal-content div{
    width: 100%;
}


.modal-dialog.bottom_sheet .modal-content .closer{
    text-align: right;
    padding-bottom: 20px;
}


.cancel_modal{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    z-index: 9999;
}

.cancel_modal .modal{
    position: fixed;
    left: 50%;
    top: 50%;
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    background: #fff;
    z-index: 999;
    transform: translate(-50%, -50%);
    max-width: 420px;
    width: 100%;
}
.cancel_modal .dimmed{
    position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        
}
.cancel_modal .title{
    font-size: 20px;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 30px;
}

.cancel_modal .btn_wrap{
    display: flex;
    gap:20px;
    width: 100%;
}

.cancel_modal .btn_wrap button{
    padding:  16px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border-radius: 50px;
    flex: 1;
}
.modal-dialog #quit.modal-content{
    width: calc(100% - 40px);
    background-color: transparent;
    margin: 0 auto;
}
.modal-dialog #quit.modal-content h1{
    margin-bottom: 0;
}
.modal-dialog #quit.modal-content .closer{
/*    right: 0;*/
}
.modal-dialog #quit.modal-content input{
    border: none;
    width: 100%;
    height: 40px;
}
.modal-dialog #quit.modal-content label{
    padding-bottom: 5px;
    display: flex;
    gap:8px;
}

  #quit .modal-layer {
        max-width: 600px;
        height: 90vh;
    }

    #quit .modal-layer .content {
        flex-grow: 1;
        overflow-y: scroll;
        height: calc(100% - 140px);
        padding: 20px;
    }
    #quit .modal-layer .content::-webkit-scrollbar {
        width: 15px;
        background-color: transparent;
    }
    #quit .modal-layer .content::-webkit-scrollbar-thumb {
        background-color: #9499B4;
        border: 5px solid #fff;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0;
    }
    #quit .modal-layer .content::-webkit-scrollbar-track {
        background-color: transparent;
        opacity: 0;
    }
    #quit .field_area .field.top_ {
        margin-top: 30px;
    }
    #quit .field_area input + .check_wrap {
        margin: 20px 0;
    }
    #quit .point_ {
        padding-left: 127px;
        margin-top: 5px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #quit .point_ b {
        color: #16B9CB;
        font-family: 'Roboto';
        margin-left: 12px;
    }
    #quit .notice_ {
        margin-top: 20px;
    }
    #quit .notice_ .desc {
        color: #666;
    }


.feedback_event{
    display: block;
}
.feedback_event .close_btn_Cont{
    display: flex;
    flex-direction: column;
    gap:10px;
}

.feedback_event .close_btn_Cont .close{
        position: static;
    border: 1px solid #E4E8EE;
    text-align: center;
    display: block;
    padding: 14px 0;
    line-height: 1;
    font-size: 16px;
    border-radius: 8px;
}

.feedback_event .pop_cont{
    padding: 24px 20px;
    width: calc(100% - 40px);
}

.feedback_event h1{
    text-align: left;
    margin-bottom: 10px;
}

.feedback_event p:last-of-type{
    padding-bottom: 10px;
}
.feedback_event .body .desc{
    display: inline-block;
    padding-bottom: 20px;
}
.feedback_event .body .details{
    padding-bottom: 20px;
    font-size: 16px;
}

.feedback_event .body .details span{
    display: inline-block;
    padding-bottom: 10px;
    word-break: keep-all;
}

.feedback_event .checkBox input{
    height: 100%;
}

.feedback_event .checkBox input + label{
    background-size: 20px;
    padding-left: 30px;
}


div.user_feedback{
    padding-bottom: 20px;
    display: flex;
}
div.user_feedback._btn{
    top: 35%;
}

.modal-dialog.user_feedback{
    display: flex;
    justify-content: center;
    align-items: center;
}

div.user_feedback > div{
    background: #FF6262;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 8px 15px;
    border-radius: 5px 5px 0px 0px;
    cursor: pointer;
}

div.user_feedback > div > div{
    display: flex;
    gap: 14px;
}
div.user_feedback.modal-dialog > div > div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
div.user_feedback > div > div span{
    color: #fff;
}
div.user_feedback img{
    transform: rotate(90deg);
    max-width: 16px;
}
.modal-dialog #modal-user_feedback .closer{
    position: absolute;
    right: -0px;
    top: 12px;
    cursor: pointer;
    z-index: 9999;
    transform: translateY(-50%);
}

.modal-dialog #modal-user_feedback{
    width: 100%;
    padding: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 40px);
    height: auto;
    border-radius: 15px;
}

.modal-dialog #modal-user_feedback p{
    font-size: 16px;
    padding:16px 0;
    word-break: keep-all;
    font: var(--font-body-s-medium);
    color: var(--color-content-subtle)
}
.modal-dialog #modal-user_feedback textarea{
    border-radius: 5px;
    border: 1px solid #EDEDED;
    background: #FFF;
    width: 100%;
    height: 120px;
    padding: 10px 15px;
    box-sizing: border-box;
}

.modal-dialog #modal-user_feedback .btn_wrap{
    max-width: 230px;
    font-size: 16px;
    margin: 0 auto;
    padding-top: 40px;
}
.modal-dialog #modal-user_feedback .feedback_send{
    padding: 13px 20px;
    border-radius: var(--border-round-S);
    width: 150px;
    display: inline-block;
    text-align: center;
}

.modal-dialog #modal-user_feedback .title {
    position: relative;
    top: 0;
    padding: 0;
/*    padding-bottom: 20px;*/
    
}
    .modal-dialog #modal-user_feedback h1 {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        line-height: 1;    
        font: var(--font-title-xs);
    }
    .modal-dialog #modal-user_feedback h2 {
        font-weight: 700;
        margin-bottom: 10px;
    }
    .modal-dialog #modal-user_feedback input {
        width: 100%;
        height: 50px;
    }
    .modal-dialog #modal-user_feedback .body {
        position: relative;
        gap:0;
    }

    .modal-dialog .btn-blue {
        color: #fff;
        background-color: #3CCBDB;
        box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
        -webkit-box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
    }



/* 리뉴얼 */

.project-status-area{
        display: flex;
        gap:8px;
/*        padding-top: 20px;*/
    }
    .project-status-area .box{
        flex: 1;
        flex-direction: column;
        padding: 20px 7.5px;
        gap:10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 15px;
    }
    .project-status-area .box:nth-child(1){
        background:#EDF8CF;
    }
    .project-status-area .box:nth-child(2){
        background:#D7F4FA;
    }
    .project-status-area .box:nth-child(3){
        background:#FFEBEB;
    }

    .project-status-area .box .left{
        display: flex;
        flex-direction: column;
        order: 2;
        align-items: center;
        gap:10px;
    }
    .project-status-area .box .left .count{
        font-weight: 700;
        font-size: 60px;
        line-height: 1;
    }
.project-status-area .box .left span{
    color: #444C67;
}
    .project-status-area .box .left .text{
        font-weight: 500;
        font-size: 18px;
        word-break: keep-all;
        height: 48px;
    }
    .project-status-area .box .right{
        order: 1;
    }
.project-status-area .box .right img{
        max-width: 38px;
    }
    .project-status-area .box .left .count{
        font-size: 40px;
    }
    .project-status-area .box .left .text{
        font-size: 16px;
        font-weight: 500;
        height: 48px;
    }










.btn_wrap{
    gap:16px;
}
.btn_wrap a{
    flex: 1;
}



.label_container {
    display: flex;
    gap:5px;
/*    justify-content: space-between;*/
}
.label_container .label:not(.non){
    border-radius: 9999px;
    padding: 5px 10px;
    display: inline-block;
}


.projectAll .chips{
    display: flex;   
    padding: 10px 20px;
    gap:10px;
    color: #904AAC;
    overflow-x: scroll;
}
.projectAll .chips ~ .item_box{
    padding-top: 0;
}

.projectAll .chip {
    border: 1px solid #904AAC;
    border-radius: 15px;
    padding: 0 10px;
    line-height: 23px;
    font-size: 14px;
    cursor: pointer;
    min-width: fit-content;
}


.projectAll .chip.on{
    background: #904AAC;
    color: #fff;
}

.projectAll .chip.label.ing.on{
    border: 1px solid #ACD92C;
    background: #ACD92C;
    color: #fff;
}
.projectAll .chip.label.submit.on{
    border: 1px solid #3ccbdb;
    background: #3ccbdb;
    color: #fff;
}

.projectAll .chip.label.expires.on{
    border: 1px solid #E79E00;
    background: #E79E00;
    color: #fff;
}


.section-area .item_box{
        padding: var(--spacing-16);
        background: var(--color-surface-wash);
    }

.section-area .item_box a{
    display: block;
    padding: 12px 0 0 0;
}
.section-area .item_box a:first-child{
    padding-top: 0;
}

    .status_item{
        border-bottom: 0;
    }
    .status_item:last-child{
        margin-bottom: 0;
    }
    .status_item .container{
        width: 100%;
        padding: 12px;
        padding-right:18px;
        /* padding:20px 20px;  */
        position: relative;
        border:1px solid #ccc;
        border: 1px solid var(--color-border-subtle, #f0f1f3);
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.02);
    }
    .status_item .arrow_box{
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .status_label{
        display: flex;
/*        flex-wrap: wrap;*/
        width: 100%;
        padding: 0;
        justify-content: space-around;
    }
    
    .status_label span{
        padding:16px 8px 12px;
    }

.status_label span.badge{
    position: relative;
}
.status_label span.badge::before{
    content: "";
    display: inline-block;
    position: absolute;
    right: 46px;
    top: 8px;
    width: 5px;
    height: 5px;
    background: #ff6262;
    border-radius: 50%;
}
    
    .status_label span.badge::before{
        right: 6px;   
    }
    
    .label_container[data-device='MO']{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        font-size: 14px;
    }
    .label_container[data-device='MO'] .label{
        line-height: 1;
        margin-right: 3px;
        font-size: 12px;
    }
    .label_container[data-device='MO'] .label:last-child{
        margin-right: 0;
    }
    .label_container[data-device='MO'] .dot_menu{
        display: flex;
        align-items: center;
        padding: 14.5px 9.5px;
        border: 1px solid var(--color-border-default);
        border-radius: 5px;
    }

.label_container[data-device='MO'] .right{
    display: flex;
    gap:5px;
    align-items: center;
}
.projectAll .label_container[data-device='MO'] {
    justify-content: flex-start;
    gap: 8px;
}
.projectAll .label_container[data-device='MO'] .right {
    flex: 1;
}
    .status_box .desc{
        gap:5px;
        display: flex;
        flex-direction: column;
/*        justify-content: space-between;*/
    }

.status_box .desc .total_pay{
    font-size: 16px;
    font-weight: 500;
    padding-top: 10px;
    gap:10px;
}
    
    .status_box .thum{
        max-width: 100px;
        max-height: 100px;
        min-width: initial;
        /* width: 100%; */
        border: 1px solid #E4E8EE;
    }
    .status_box .desc .cp_info{
        align-items: center;
        display: flex;
        gap: 8px;
    }
    .status_box .desc .cp_info span{
        display: flex;
        align-items: center;
        font:var(--font-caption-m);
        color: var(--color-content-default);
        gap:5px;
    }
    .status_box .desc .cp_info span:nth-child(1){
/*        max-width: 60px;*/
/*        width: 100%;*/
        color: var(--color-content-subtle)
    }
    
    .status_box .desc .cp_info.cp_id span{
        color: var(--color-content-subtle);
        font: var(--font-caption-m);
        font-weight: 400;
    }
    .status_box .desc .cp_info.cp_subject span{
        color: var(--color-content-default);
        font: var(--font-body-s-medium);
    }
    .status_box .desc .cp_info.contents span{
        font: var(--font-body-s-regular);
        color: var(--color-content-subtle);
    }
    .status_box.bottom{
        flex-direction: column;
        padding-bottom: 0;
        padding-top: 12px;
        border-top: 1px solid #E4E8EE;
    }
    .status_box.bottom .desc{
        padding-right: 0;
        justify-content: normal;
        gap:10px;
        display: flex;
        gap:16px;
        flex-direction: row;
    }
.status_box.bottom .desc .top,.status_box.bottom .desc .bottom{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap:4px;
}


    .status_box.bottom .desc .cp_info:nth-child(1){
        grid-column:  1 / 2;
        grid-row: 1 / 2;
    }
    .status_box.bottom .desc .cp_info:nth-child(2){
        grid-column:  2 / 2;
        grid-row: 1 / 2;
    }
    .status_box.bottom .desc .cp_info:nth-child(3){
        grid-column:  1 / 2;
        grid-row: 2 / 3;
    }
    
    .status_box.bottom .desc .arrow_box{
        display: initial;
        grid-column:  3 / 4;
        grid-row: 1 / 3;
        justify-self: flex-end;
        align-self: center; 
    }




.status_box.bottom .desc .cp_info:nth-child(1){
    grid-column:  1 / 2;
    grid-row: 1 / 2;
}
.status_box.bottom .desc .cp_info:nth-child(2){
    grid-column:  2 / 2;
    grid-row: 1 / 2;
}
.status_box.bottom .desc .cp_info:nth-child(3){
    grid-column:  1 / 2;
    grid-row: 2 / 4;
}
.status_box.bottom .desc .cp_info{
    line-height: 1;
}


.status_box.bottom .desc .cp_info b{
    color: var(--color-content-brand);
}


.status_box.bottom > div{
    flex: 3;
}
.status_box.bottom > div .btn{
    background: #F4F5F9;
    color: #888;
    font-size: 16px;
    font-weight: 500;
    padding: 12.5px 0;
    border-radius: 5px;
    line-height: 24px;
    height: 100%;
    cursor: pointer;
}

.status_box.bottom > div .btn.active{
    background: var(--gradient-color);
    color: #fff;
}
.status_box.bottom > div .btn.disabled{
    cursor: default;
}

/* Figma 4056-48233: 1행 [콘텐츠 승인|예약] + 2행 [인플루언서 선정] 풀폭 */
.status_box.bottom > div.btn_wrap{
    flex: 3;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    padding-top: 10px;
}
.status_box.bottom > div.btn_wrap .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 38px;
    padding: 0 var(--spacing-12);
    border-radius: var(--radius-8);
}
.status_box.bottom > div.btn_wrap .btn.influencer_btn{
    order: 3;
    flex: 0 0 100%;
}
.status_box.bottom > div.btn_wrap div{
    /* text-align: center;
    flex: 1;
    display: block;
    color: #222;
    background-color: #E4E8EE;
    font-size: 14px;
    padding: 13px 0; */

    background-color: var(--color-surface-muted);
    color: var(--color-content-default);
    font: var(--font-body-s-medium);
}

.status_box .label{
    text-align: center;
    line-height: 1;
    border-radius: 20px;
    font-size: 14px;
    letter-spacing: -0.28px;
    color: #fff;
    box-sizing: border-box;
    max-width: fit-content;
    width: 100%;
}

.label.ing{
    border: 1px solid #ACD92C;
    background: #fff;
    color: #ACD92C;
}

.label.ing2{
    border: 1px solid #ffa53e;
    background: #fff;
    color: #ffa53e;
}

.label.submit{
    border: 1px solid var(--color-content-brand);
    background: #fff;
    color: var(--color-content-brand);
}

.label.end,
.label.cancel,
.label.noshow,
.label.influencer_asign,
.label.review_asign,
.label.expires{
    font:var(--font-caption-m);
    padding: 2px 8px;
    border-radius:var(--radius-4);
    background-color: var(--color-surface-default);
}

.label.end{
    color:var(--color-content-subtle);
    border:1px solid var(--color-border-medium);
}

.label.cancel{
    color:var(--color-status-error-content);
    border:1px solid var(--color-status-error-content);
}

.label.noshow{
    background: var(--color-status-error-subtle);
    color: var(--color-status-error-content);
}

.label.influencer_asign{
    color:var(--color-status-success-content);
    border:1px solid var(--color-status-success-content);
}
.label.review_asign{
    color:var(--color-content-brand);
    border:1px solid var(--color-content-brand);
}
.label.expires{
    color:var(--color-content-subtle);
    border:1px solid var(--color-border-medium);
}


#modal-campaign_sheet .item{
    display: flex;
    flex-direction: column;
    gap:10px;
    
}
#modal-campaign_sheet .item > div{
    background: #F4F5F9;
    display: flex;
    flex-direction: row;
    gap:10px;
    padding: 20px;
    border-radius: 8px;
    align-items: center;
    color: #444C67;
}
#modal-campaign_sheet .item > div img{
    max-width: 20px;
    width: 100%;
}

.moreBtn{
        margin: 10px auto 30px;
        text-align: center;
        display: inline-block;
        width: 100%;
        
    }
    .moreBtn div{
        margin: 0 auto;
        max-width: 184px;
        padding: 8px 9.5px;
        border-radius: 5px;
        background: #fff;
    }

 /* 셀럭터 */

.option_filter_wrap{
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
    .select__wrap {
        /* flex-grow: 1; */
    }
    .selectBox__ {
        /* width: 130px; */
    }
    .selectBox__ .box__ {
        position: relative;
    }
    .selectBox__ .select__ {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-image: url(/skin/demo/img/icon/tool/select_down.svg);
        background-position: right 20px center;
        background-repeat: no-repeat;
        padding-right: 40px;
        white-space: nowrap;
        height: 50px;
        border: 1px solid var(--line-color);
        border-radius: 5px;
        padding-left: 15px;
    }
.selectBox__.selectFilter .select__{
    padding-right: 20px;
    background-image: none;
}
.selectBox__.option_select .select__{
    width: max-content;
    background: #fff;
    padding: 7px 12px;
    height: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.selectBox__.option_select .select__::after{
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #444C67;
    flex-shrink: 0;
    align-self: center;
}
    .selectBox__ .select__ .holder {
        color: #888;
    }
    .selectBox__ .list__ {
        position: absolute;
        left: 0;
        top: 120%;
        width: 100%;
        background-color: #fff;
        display: none;
        border-radius: 10px;
        box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
        overflow: hidden;
        z-index: 9;
        border: 1px solid var(--primary-color);
    }
    .selectBox__.selectFilter .list__{
        width: calc(100dvw - 20px);
        right: -70px;
        left: unset;
    }
    .selectBox__ .list__ li {
        display: flex;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
        gap: 10px;
        padding: 12px;
    }
    .selectBox__ .list__ li:hover {
        background-color: #ECF9FB;
    }
    .selectBox__ .list__ li:last-child:hover {
        background-color: #ECF9FB;
        border-radius: 0 0 10px 10px ;
    }
    .selectBox__ .list__ li:first-child:hover {
        background-color: #ECF9FB;
        border-radius: 10px 10px 0 0 ;
    }
    .selectBox__ .list__ li.selected {
        background-color: #ECF9FB;
        color: var(--primary-color);
        font-weight: 500;
    }

    .selectBox__ .select__, 
    .selectBox__ .list__ li {
        cursor: pointer;
    }
    .selectBox__.on .list__ {
        display: block;
    }
    .selectBox__ .list__ li .option{
        border: 1px solid var(--primary-color);
        padding: 5px 5px;
        font-size: 12px;
        border-radius: 5px;
        text-align: center;
    }
    .selectBox__ .list__ li.sold .option{
        border-color: #666;
    }
    .selectBox__ .list__ li.sold .option span{
        color: #666;
    }
    .selectBox__ .list__ li.sold .text{
        text-decoration: line-through;
    }
    .selectBox__ .list__ li .text {
        font-size: 14px;
        flex: 1;
    }

.modal-dialog.message{
    z-index: 9999999999;
}
.modal-dialog.mission_confirm_modal{
    z-index: 10000000000;
}

/* 메세지 모달 */
#modal-message{
    max-width: 1200px;
    width: 100%;
    padding: 0;
    overflow: hidden;
    max-height: 80dvh;
    height: 100%;
    background: var(--bg-gray-color);
    color: #666;
    display: block;
    border-radius: 15px;
    position: relative;
    font-size: 14px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
#modal-message.modal-content .closer{
    position: static;
    cursor: pointer;
    line-height: 1;
}
#modal-message .flex_box{
    display: flex;
    flex: 1;
    overflow: hidden;
}

#modal-message .flex_box > .left{
    flex: 1;
    border-right: 1px solid #E4E8EE;
    width: 380px;
}
#modal-message .flex_box .left .head{
    background: var(--primary-color);
    padding: 0 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
#modal-message .flex_box .left .head > div{
    cursor: pointer;
    position: relative;
    z-index: 999;
}
#modal-message .flex_box .left .head > div img{
    max-width: 30px;
}
#modal-message .flex_box .left .tab{
    
}
#modal-message .flex_box .left .tab span{
    padding: 15px;
    display: inline-block;
    line-height: 1;
}
#modal-message .flex_box .left .tab > span.on{
    background: #fff;
}
#modal-message .flex_box .left .selectBox{
    padding: 14px 20px;
    background: #fff;
}

#modal-message .flex_box .left .search_cont{
    padding: 14px 20px;
    background: #fff;
    
}
#modal-message .flex_box .left .search_cont input{
    padding-left: 40px;
    background-image: url(/skin/demo/img/icon/search_icon_black.svg);
    background-size: 15px 15px;
    background-position: 14px center;
    background-repeat: no-repeat;
    border-radius: 8px;
    border: 1px solid #EDEDED;
    font-size: 16px;
    height: 40px;
    width: 100%;    
}

#modal-message .flex_box .left .selectBox .brand_select .select__{
    background-image: url(/skin/demo/img/icon/tool/select_down.svg);
    border: 1px solid #EDEDED;
    height: 40px;
}
#modal-message .flex_box .left .selectBox .brand_select .list__{
    width: 100%;    
    max-height:330px;
    overflow:auto;
}

#modal-message .flex_box .left .list{
    padding: 20px;
    border-top: 1px solid #E4E8EE;
    overflow-y: scroll;
    height: calc(100% - 70px - 58px);
    position: relative;
}
#modal-message .flex_box .empty_list{
    height: 100%;
    padding: 0;
    
}
#modal-message .flex_box .right .empty_list{
    padding-top: 61px;
}
#modal-message .flex_box .empty_list img{
    max-width: 87px;
}


#modal-message .flex_box .left .list .item{
    padding: 20px 10px;
    border-bottom: 1px solid #E4E8EE;
    cursor: pointer;
}
#modal-message .flex_box .left .list .item.on{
    background: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0px 5px 8px 0px #20ABC61A;

}
#modal-message .flex_box .left .list .item .memo{
    display: flex;
    align-items: center;
    gap:5px;
    padding-bottom: 8px;
    font-size: 13px;
}
#modal-message .flex_box .left .list .item .user{
    display: flex;
    gap:20px;
}
#modal-message .flex_box .left .list .item .user .left{
    max-width: 60px;
    width: 100%;
    height: 60px;
}

#modal-message .flex_box .left .list .item .user img{
    width: 60px;
    height: 60px;
    border-radius: 50px;
    object-fit: cover;
}
#modal-message .flex_box .left .list .item .user .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#modal-message .flex_box .left .list .item .user .name{
    font-weight: 500;
    font-size: 16px;
    color: #222;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
#modal-message .flex_box .left .list .item .user .text{
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
}
#modal-message .flex_box .left .list .item .user .right{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

#modal-message .flex_box .left .list .item .user .right .bottom{
    display: flex;
    gap:5px;
    justify-content: space-between;
}
#modal-message .flex_box .left .list .item .user .right .bottom .noti{
    border-radius: 50px;
    color: #fff;
    background: var(--red-color);
    font-size: 12px;
    padding: 0 5px 0 5px;
    align-self: flex-start;
    text-align: center;
}


#modal-message .flex_box > .right{
    flex: 2;
    position: relative;
    background: var(--bg-gray-color);
}
#modal-message .flex_box .right .head {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
/*    min-height: 69px;*/
}
#modal-message .flex_box .right .title{
    font-size: 20px;
    color: #000;
    font-weight: 500;
    position: static;
    padding: 0;
}
#modal-message .flex_box .right .receiver::before{
    content: "";
    position: absolute;
    border-top: 1px solid #E4E8EE;
    top: 0;
    left: 50%;
    width: calc(100% - 40px);
    transform: translateX(-50%);
}
#modal-message .flex_box .right .sender,#modal-message .flex_box .right .receiver{
    position: relative;
    background: #fff;
    display: flex;
    gap: 30px;
    padding: 20px ;
    align-items: center;
    line-height: 1;
}
#modal-message .flex_box .right .sender h3,#modal-message .flex_box .right .receiver h3{
    color: #222;
    font-size: 14px;
    min-width: 70px;
}
#modal-message .flex_box .right .receiver h3{
    align-self: flex-start;
}
#modal-message .flex_box .right .receiver .item{
    display: inline-flex;
    flex-direction: column;
    position: relative;
    gap: 5px;
    width: 50px;
    justify-content: center;
    align-items: center;
}
#modal-message .flex_box .right .receiver .receiver_list{
    display: flex;
    gap: 15px;
    align-items: center;
    max-width: 660px;
    display: inline-flex;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 200px;
    min-height: 28px;
}
#modal-message .flex_box .right .receiver .item .delete{
    position: absolute;
    right: -10px;
    top: 0;
}
#modal-message .flex_box .right .receiver .item span{
    font-size: 14px;
    overflow: hidden;
    max-width: 60px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
#modal-message .flex_box .right .receiver .item img{
    max-width: 50px;
    max-height: 50px;
    border-radius: 50px;
}

#modal-message .flex_box .right .head .user_info{
/*    width: 60%*/
}
#modal-message .flex_box .right .head .user_info img{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    object-fit: cover;
}
#modal-message .flex_box .right .head .user_info .user{
    display: flex;
    align-items: center;
    gap: 15px;
    line-height: 1;
}
#modal-message .flex_box .right .head .user_info .user .right{
    display: flex;
    flex-direction: column;
    gap:5px;
    flex: 1;
}

#modal-message .flex_box .right .head .user_info .user .name{
    font-size: 18px;
    color: #222;
    font-weight: 500;
}

#modal-message .flex_box .right .head .user_info .user .memo_cont{
    display: flex;
    align-items: center;
    gap:5px;
}
#modal-message .flex_box .right .head .user_info .user .memo_cont span.icon{
    line-height: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#modal-message .flex_box .right .cp_list_cont{
    background: #fff;
    padding: 0 20px;
    position: relative;
/*    box-shadow: 2px 9px 10px -8px #20ABC61A;*/
/*    border-radius: 0 0 10px 10px;*/
    border-bottom: 1px solid #E4E8EE;
}
#modal-message .flex_box .right .cp_list_cont .head{
    padding: 0;
    min-height: auto;
    display: flex;
    justify-content: space-between;
    color: #666;
}
#modal-message .flex_box .right .cp_list_cont .head .open{
    padding: 0;
    position: static;
    display: flex;
    gap: 10px;
    transform: none;
}
#modal-message .flex_box .right .cp_list_cont .item{
    padding: 10px 0 ;
    border-top: 1px solid #E4E8EE;
    display: flex;
    flex-direction: column;
    gap:10px;
    position: relative;
}
#modal-message .flex_box .right .cp_list_cont .item > span{
    min-width: 82px;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info{
    display: flex;
    align-items: center;
    gap:25px;
    justify-content: space-between;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .right{
    display: flex;
    gap: 15px;
    align-items: center;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .name{
    color: #222;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .status{
    display: flex;
    align-items: center;
    gap:10px;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .label{
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0 10px;
    border-radius: 15px;
    font-size: 12px;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .date{
    color: var(--primary-color);
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .link{
    display: flex;
    align-items: center;
    cursor: pointer;
}
#modal-message .flex_box .right .cp_list_cont .item .cp_info .cp_name{
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-width: calc(100% - 180px);
}

#modal-message .flex_box .right .cp_list_cont .more_item{
    height: 0;
    max-height: 230px;
    overflow: hidden;
}
#modal-message .flex_box .right .cp_list_cont .more_item .item{
    padding: 0;
    border-top: 0;
}

#modal-message .flex_box .right .cp_list_cont .more_item .item .cp_info{
    padding: 10px 0 0 0;
/*    border-top: 1px solid #E4E8EE;*/
    width: 100%;
}
#modal-message .flex_box .right .cp_list_cont .more_item .item:first-child .cp_info{
    border-top: 0;
    padding-top: 0;
}
#modal-message .flex_box .right .cp_list_cont .more_item .item:last-child .cp_info{
    padding-bottom: 10px;
}
#modal-message .flex_box .right .cp_list_cont .more_item.on{
    height: 100%;
    overflow: auto;
/*    border-top: 1px solid #E4E8EE;*/
}
#modal-message .flex_box .right .cp_list_cont .open{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    padding: 10px;
    
}
#modal-message .flex_box .right .cp_list_cont .open img{
    transition: all .2s;
}

#modal-message .flex_box .right .cp_list_cont > .item.on .open img{
    transform: rotate(-180deg);
}

#modal-message .flex_box .right .message_cont{
    height: calc(100% - 80px - 66px - 72px);
    padding: 20px;
    overflow-y: auto;
    background: var(--bg-gray-color);
    position: relative;
}
#modal-message .error_msg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#modal-message .flex_box .right .message_cont .receive_message{
    display: flex;
    gap: 10px;
    padding-bottom: 25px;
}
#modal-message .flex_box .right .message_cont .receive_message .profile{
    min-width: 40px;
}
#modal-message .flex_box .right .message_cont .receive_message:last-child{
    padding-bottom: 0;
}
#modal-message .flex_box .right .message_cont .receive_message img{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    object-fit: cover;
}
#modal-message .flex_box .right .message_cont .receive_message .text{
    background: #fff;
    padding: 15px;
    border-radius: 0 10px 10px 10px;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .receive_message .text.file{
    white-space: initial;
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-all;
/*    flex: 1;*/
}

#modal-message .flex_box .right .message_cont .receive_message .text.file > a{
    line-height: 1;
    padding: 8px;
    border-radius: 50px;
    background: #F8F8FA;
    width: 41px;
}

#modal-message .flex_box .right .message_cont .receive_message .text svg{
    stroke: #666;
}


#modal-message .flex_box .right .message_cont .time{
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #888;
}
#modal-message .flex_box .right .message_cont .send_message.loading{
    height: 35px;
}
#modal-message .flex_box .right .message_cont .send_message.loading .loader{
    width: 25px;
    height: 25px;
    right: 0;
    left: initial;
    top: 0;
}
#modal-message .flex_box .right .message_cont .send_message{
    display: flex;
    gap:5px;
    justify-content: flex-end;
    padding-bottom: 25px;
    position: relative;
    flex-direction: column;
    align-items: flex-end;
}

#modal-message .flex_box .right .message_cont .send_message .brand_name{
    font-weight: bold;
    font-size: 12px;
    color: #888;
}
#modal-message .flex_box .right .message_cont .send_message .bottom_box{
    display: flex;
    gap:10px;
    align-items: flex-end;
}

#modal-message .flex_box .right .message_cont .send_message:last-child{
    padding-bottom: 0;
}
#modal-message .flex_box .right .message_cont .send_message .time{
    text-align: right;
}
#modal-message .flex_box .right .message_cont .send_message .text{
    background: var(--primary-color);
    border-radius: 10px 0 10px 10px;
    padding: 15px;
    color: #fff;
    white-space: pre-wrap;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .send_message .text.file{
    white-space: initial;
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-all;
}

#modal-message .flex_box .right .message_cont .send_message .text.file > a{
    line-height: 1;
    padding: 8px;
    border-radius: 50px;
    background: #F8F8FA;
    width: 41px;
}

#modal-message .flex_box .right .message_cont .send_message .text svg{
    stroke: var(--primary-color);
}
#modal-message .flex_box .right .message_cont .date_chip{
    background: #D2D2DF;
    max-width: fit-content;
    padding: 6px 20px;
    border-radius: 50px;
    color: #fff;  
    margin: 0 auto 30px;
    max-width: fit-content;
}


#modal-message .flex_box .right .typing_cont{
    position: absolute;
    bottom: 0;
    background: #fff;
    padding: 10px 15px;
    width: 100%;
    display: flex;
    gap:10px;
    align-items: center;
    z-index: 99999999;
    max-height: 150px;
}
#modal-message .flex_box .right .typing_cont textarea{
    flex: 1;
    padding: 0;
    line-height: 1.5;
    border: none;
    height: 26px;
    font-size: 15px;
    max-height: 130px;
    overflow-y: auto;
}
#modal-message .flex_box .right .typing_cont .file{
    padding: 10px;
    line-height: 1;
    align-self: flex-start;
}
#modal-message .flex_box .right .typing_cont .send_btn{
    background: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    padding: 11px 15px;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 500;
}


#modal-message.modal-content .memo_cont input{
     height: auto;
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid #E4E8ED;
    border-radius: 5px;
}

 #modal-message .flex_box .right .img_noti{
        background: #B8EDF4;
        padding: 10px 20px;
        display: none;
        gap: 10px;
        align-items: center;
    }
#modal-message .flex_box .right .img_noti .close{
    align-self: flex-start;
    width: 10px;
    padding-top: 4px;
}

#modal-message .add_message_btn{
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    background: #E4E8EE;
    margin-bottom: 20px;
    cursor: pointer;
}




#modal-message .flex_box .left .list::-webkit-scrollbar,
#modal-message .flex_box .right .receiver .receiver_list::-webkit-scrollbar,
#modal-message .flex_box .message_cont::-webkit-scrollbar,
#modal-message .flex_box .right .cp_list_cont .more_item::-webkit-scrollbar,
#modal-message .flex_box .left .selectBox .brand_select .list__::-webkit-scrollbar{
        width: 15px;
        background-color: transparent;
    }
#modal-message .flex_box .left .list::-webkit-scrollbar-thumb,
#modal-message .flex_box .right .receiver .receiver_list::-webkit-scrollbar-thumb,
#modal-message .flex_box .message_cont::-webkit-scrollbar-thumb,
#modal-message .flex_box .right .cp_list_cont .more_item::-webkit-scrollbar-thumb,
#modal-message .flex_box .left .selectBox .brand_select .list__::-webkit-scrollbar-thumb{
        background-color: #D0D2D7;
        border: 5px solid #fff;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0;
    }
#modal-message .flex_box .left .list::-webkit-scrollbar-track,
#modal-message .flex_box .right .receiver .receiver_list::-webkit-scrollbar-track,
#modal-message .flex_box .message_cont::-webkit-scrollbar-track,
#modal-message .flex_box .right .cp_list_cont .more_item::-webkit-scrollbar-track,
#modal-message .flex_box .left .selectBox .brand_select .list__::-webkit-scrollbar-track{
        background-color: transparent;
        opacity: 0;
    }

#modal-message .mobile_head{
    display: none;
    flex-shrink: 0;
}



#modal-message .flex_box .right .message_cont .receive_message .text.function_text{
    background: #fff;
    color: #222;
    white-space: initial;
    display: flex;
    flex-direction: column;
    gap:20px;
    max-width: 400px;
    width: 100%;
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .title{
    font-size: 14px;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text .person_type{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    gap:10px;
    font-size: 12px;
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .person_type .checkbox_ input + label:before{
    width: 15px;
    height: 15px;
    border-radius: 0;
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .reason_text{
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 8px;
    min-height: 70px;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text .request_datetime{
    display: flex;
/*    flex-direction: column;*/
    justify-content: space-between;
    gap:10px;
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 8px 20px;
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .request_datetime.align_col{
    flex-direction: column;
    gap:0;
    align-items: center;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text .noti{
    border-radius: 5px;
    padding: 8px;
    background: #F4F5F9;
    color: #666;
    word-wrap: initial;
}

#modal-message .flex_box .right .message_cont .receive_message .text.function_text .btn_wrap{
    display: flex;
    gap:20px;
}
#modal-message .flex_box .right .message_cont .receive_message .text.function_text .btn_wrap button{
    flex: 1;
    padding: 10px;
    line-height: 1;
    font-size: 14px;
}


#mission_confirm_modal .modal-layer .content{
    padding:10px 20px 30px 20px;
}


#mission_confirm_modal .modal-layer .btn_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:20px;
    padding: 0 20px;
    padding-bottom: 20px;
}



#mission_confirm_modal .modal-layer .btn_wrap button{
    flex: 1;
    padding: 10px ;
    border-radius: 5px;
    line-height: 1;
}

#mission_confirm_modal .modal-layer .btn_wrap button.fill_btn{
}


.modal-dialog.message{
    overflow: hidden;
    max-height: calc(100dvh - 64px);
}
@media(max-width:800px){

    .modal-dialog.message{
        top:0;
    }

    .modal-dialog.message .dim{
        background-color: transparent;
        display: none;
    }

    
    #modal-message{
        max-height: calc(100dvh - 64px);
        border-radius: 0;
    }
    #modal-message .mo_title{
        display: block;
    }
    #modal-message.on .mo_title{
        display: none;
    }
    #modal-message .back{
        display: none;
    }
    #modal-message.on .back{
        display: block;
        position: static;
        transform: none;
    }
    
    #modal-message .mobile_head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        font-size: 18px;
        padding: 12px 20px;
        color: #222;
        font-weight: 500;
        border-bottom: 1px solid #E4E8EE;
    }
    #modal-message .mobile_head .closer img{
        max-height: 18px;
        width: 18px;
        height: 18px;
    }
    #modal-message .flex_box{
        height: auto;
    }
    
    #modal-message .flex_box > .left{
        flex: none;
        width: 100dvw;
        transition: width .2s;
    }
    
    #modal-message .flex_box .left .list .item.on{
        background: none;
        border: none;
        border-radius: 0px; 
        box-shadow: none;
        border-bottom: 1px solid #E4E8EE;
    }
    
    
    #modal-message .flex_box > .right{
        flex: none;
        width: 0dvw;
        display: none;
        height: calc(100dvh - 45px);
    }
    #modal-message.on .flex_box > .right{
        display: block;
        width: 100dvw;
        height: 100%;
    }
    #modal-message.on .flex_box > .left{
        width: 0;
        opacity: 0;
    }   
    #modal-message.on .flex_box > .right .closer{
        display: none;
    }
    
}


.loader {
    width: 38px;
    height: 38px;
    border: 4px solid var(--primary-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: absolute;
    left: calc(50% - 20px);
    top: 50%;
    transform: translate(-50%, -50%);
    }

.small_loader {
    width: 25px;
    height: 25px;
    border: 2px solid var(--primary-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: absolute;
}

.white_loader {
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }



/* 알림 설정 페이지 */

#wrap.notice_set{
/*    padding: 0;*/
}
#wrap.notice_set .title{
    top: 0;
    display: flex;
    align-items: center;
    gap:30px;
}

#wrap.notice_set {
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
.notice_set .section-area{
    flex: 1;
    background: #fff;
    border-radius: 0;
    padding: 16px;
    margin-bottom: 0;
    min-height: unset;
}
.notice_set .kakao_cont{
    padding: 0;
}
.notice_set .kakao_cont h4{
    display: flex;
    align-items: center;
    gap:5px;
    padding-bottom: 20px;
    font: var(--font-body-m-semibold);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-default);
}
.notice_set .kakao_cont .desc{
    font-size: 14px;
    color: #777;
}
.notice_set .kakao_cont .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--primary-color);
    padding: 20px;
    border-radius: 20px;
    gap:15px;
}
.notice_set .kakao_cont .item_cont{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notice_set .kakao_cont .item .title{
    font-size: 16px;
    position: static;
    padding: 0;
    line-height: 1;
    padding-bottom: 10px;
}
.notice_set .kakao_cont .item .desc{
    font-size: 14px;
    color: #777;
}

label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

[role="switch"] {
  appearance: none;
  position: relative;
  border: max(2px, 0.1em) solid var(--primary-color);
  border-radius: 30px;
  width: 53px;
  height: 30px;;
    cursor: pointer;
}

[role="switch"]::before {
  content: "";
  position: absolute;
  left: 4px;
    top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary-color);
  transition: left 250ms linear;
    transform: translate(0, -50%);
}

[role="switch"]:checked {
  background-color: var(--primary-color);
/*  border-color: tomato;*/
}

[role="switch"]:checked::before {
  background-color: white;
  left: calc(100% - 23px);
}

[role="switch"]:disabled {
  border-color: lightgray;
  opacity: 0.7;
  cursor: not-allowed;
}

[role="switch"]:disabled:before {
  background-color: lightgray;
}

[role="switch"]:disabled + span {
  opacity: 0.7;
  cursor: not-allowed;
}
[role="switch"]:focus {
  border-color: var(--primary-color);
}

/* 알림 설정 페이지 */



#modal-asign-noti-modal .notice{
    padding-top: 10px;
}
#modal-asign-noti-modal .notice:first-child{
    padding-top: 0;
}



.selection_item.black .sel_profile_box .profile{
    background: #E4E6EF;
}

.selection_item.black .sel_profile_box .blog_area{
    background: #E4E6EF; 
    border-radius: 5px;
    height: 24px;
}

.selection_item.black .sel_profile_box .blog_grade{
    background: #E4E6EF; 
    border-radius: 5px;
    height: 78px;
}

.selection_item.black .sel_profile_box .today div span:last-child{
    background: #E4E6EF; 
    border-radius: 5px;
    width: 50px;
}

.selection_item.black .sel_profile_box textarea{
    background: #E4E6EF; 
    border-radius: 5px;
    color: #222;
}

.selection_item.black .sel_profile_box .reviewer_info button{
    background: #E4E6EF; 
    border-radius: 5px;
}

.selection_item.black .sel_profile_box .reviewer_info .btn_cont button{
    background: #E4E6EF !important; 
    border-radius: 5px;
}
.selection_item.black .sel_profile_box .reviewer_info button label{
    background-image: url(../../STATIC/img/icon/check_icon_gray.svg);
}





#mission_guide_check_modal{
        width: 90dvw;
        max-width: 600px;
/*        padding: 30px 20px;*/
        box-shadow: none;
/*        border: 1px solid #E4E8EE;*/
        border-radius: 30px;
/*        background: #fff;*/
    }
#mission_guide_check_modal .modal-layer{
    padding: 20px;
    max-height: 90dvh;
    height: fit-content;
    overflow-y: auto;
}
    #mission_guide_check_modal h1{
        font-size: 18px;
        font-weight: 700;
        margin: 0;
    }
    #mission_guide_check_modal .modal-layer .head{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #888;
        gap: 10px;
        position: static;
    }
#mission_guide_check_modal .head .check_noti {
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
        padding: 5px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        margin-top: 1px;
        cursor: pointer;
    }
    #mission_guide_check_modal .head .closer{
        cursor: pointer;
        top: 34px;
    }
    #mission_guide_check_modal .content{
        padding: 0;
        padding-top: 30px;
    }
    #mission_guide_check_modal .content .table_head{
        display: flex;
        border-bottom: 1px solid #888;
        
    }
    #mission_guide_check_modal .content .table_head div{
        font-size: 16px;
        font-weight: 500;
        padding: 15px 0;
        flex: 1;
        text-align: center;
    }
    #mission_guide_check_modal .content .table_head div:first-child{
         border-right: 1px solid #222;   
    }
    #mission_guide_check_modal .content .table_body{}
    #mission_guide_check_modal .content .table_body .item{
        display: flex;
        border-bottom: 1px solid #888;
    }
    #mission_guide_check_modal .content .table_body .item div:first-child{
        border-right: 1px solid #888;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #mission_guide_check_modal .content .table_body .item div:first-child img{
        margin-right: 5px;        
    }
#mission_guide_check_modal .content .table_body .item div:last-child{
    gap:8px;
}
    #mission_guide_check_modal .content .table_body .item div{
        font-weight: 500;
        padding: 15px 0;
        flex: 1;
        text-align: center;
        font-size: 14px;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    #mission_guide_check_modal .content .table_body .item .guide,
    #mission_guide_check_modal .content .table_body .item .result{
        font-weight: bold;
        padding-left: 3px;
    }
    #mission_guide_check_modal .content .text_cont{
        padding-bottom: 30px;
    }
    #mission_guide_check_modal .content .text_cont textarea{
        border:1px solid var(--primary-color);
        border-radius: 5px;
        padding: 10px;
        width: 100%;
        height: 107px;
        outline: none;
    }
#mission_guide_check_modal .content .text_cont > div{
    padding-bottom: 10px;
    font-weight: 500;
}

#mission_guide_check_modal .btn_area .closer{
    position: static;
}
#mission_guide_check_modal .btn_area{
    margin-top: 0;
}
    
    .btn_area{
        text-align: center;
        padding-top: 20px;
    }
    .result_tag{
        border-radius: 5px;
        border: 1px solid;
        font-weight: 500;
        padding: 3px;
        width: fit-content;
/*        margin-right: 3px;*/
    }

    .result_tag.error{
        color: #FF8B8B;
    }
    .result_tag.success{
        color: #3ccbdb;
    }





/* 검수 기준 팝업 */
#mission_inspection_standards_modal .modal-layer{
    max-width: 390px;
}

#mission_inspection_standards_modal .head .closer{
        cursor: pointer;
        background-image: none;
        width: auto;
        height: auto;
        top: 0;
        right: 0;
        margin: 0;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

#mission_inspection_standards_modal .head{
    position: relative;
    border-bottom: 1px solid #222;
    padding: 0;
    margin: 0 20px;
    padding: 30px 0 20px;
}


#mission_inspection_standards_modal .content{
    display: flex;
    flex-direction: column;
    gap:30px;
    padding: 30px;
}
#mission_inspection_standards_modal .item{
    font-size: 14px;
    
}
#mission_inspection_standards_modal .item h2{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 10px 0;
    line-height: 1;
    font-size: 16px;
    font-weight: 500;
}
#mission_inspection_standards_modal .item h2 img{
    max-width: 16px;
}
#mission_inspection_standards_modal .item .desc{
    display: flex;
    gap:8px;
    padding-bottom: 5px;
}
#mission_inspection_standards_modal .item .desc:last-child{
    padding-bottom: 0;
}
#mission_inspection_standards_modal .item .depth{
    position: relative;
    padding-left: 20px;
    display: inline-block;
    
}
#mission_inspection_standards_modal .item .depth::after{
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #222;
    position: absolute;
    top: 7px;
    left: 10px;
    font-size: 12px;
    
}
#mission_inspection_standards_modal .btn_area{
    margin: 0;
    padding: 0;
}
#mission_inspection_standards_modal .btn_area .closer{
    position: static;
    background: none;
    width: 131px;
    height: auto;
    padding: 13px;
    line-height: 1;
    border-radius: 5px;
    margin: 0;
}
.cart .label_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart .date_cont{
    display: flex;
    align-items: center;
    gap:10px;
    font-size: 14px;
}
.cart .date_cont .text{
    font-weight: 300;
    color: #888;
}
.cart .date_cont .date{
    color: #222;
    font-weight: 500;
}

.status_item .container .btn_wrap{
   padding-top: 10px;
}
.status_item .container .btn_wrap div{
    width: 100%;
    text-align: center;
    padding: 12px 0;
    line-height: 1;
    border-radius: 5px;
}
.status_item .container .btn_wrap .text{
    padding:0;
}


#temp_check .modal-layer .btn_area{
    margin-top: 0;
}


#modal-with-campaign .modal-layer .content{
    padding: 0 20px;
    font-size: 14px;
}



#modal-with-campaign .cp_list_cont{
    background: #fff;
/*    padding: 0 20px;*/
    position: relative;
/*    box-shadow: 2px 9px 10px -8px #20ABC61A;*/
/*    border-radius: 0 0 10px 10px;*/
/*    border-bottom: 1px solid #E4E8EE;*/
}
#modal-with-campaign .cp_list_cont .head{
    padding: 0;
    min-height: auto;
    display: flex;
    justify-content: space-between;
    color: #666;
}
#modal-with-campaign .cp_list_cont .head .open{
    padding: 0;
    position: static;
    display: flex;
    gap: 10px;
    transform: none;
}
#modal-with-campaign .cp_list_cont .item{
    padding: 10px 0 ;
    border-top: 1px solid #E4E8EE;
    display: flex;
    flex-direction: column;
    gap:10px;
    position: relative;
}
#modal-with-campaign .cp_list_cont .item > span{
    min-width: 82px;
}
#modal-with-campaign .cp_list_cont .item .cp_info{
    display: flex;
    align-items: center;
    gap:15px;
    justify-content: space-between;
}
#modal-with-campaign .cp_list_cont .item .cp_info .right{
    display: flex;
    gap: 15px;
    align-items: center;
}
#modal-with-campaign .cp_list_cont .item .cp_info .name{
    color: #222;
}
#modal-with-campaign .cp_list_cont .item .cp_info .status{
    display: flex;
    align-items: center;
    gap:10px;
}
#modal-with-campaign .cp_list_cont .item .cp_info .label{
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0 10px;
    border-radius: 15px;
    font-size: 12px;
}
#modal-with-campaign .cp_list_cont .item .cp_info .date{
    color: var(--primary-color);
}
#modal-with-campaign .cp_list_cont .item .cp_info .link{
    display: flex;
    align-items: center;
    cursor: pointer;
}
#modal-with-campaign .cp_list_cont .item .cp_info .cp_name{
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-width: calc(100% - 180px);
}

#modal-with-campaign .cp_list_cont .more_item{
    height: 0;
    max-height: 230px;
    overflow: hidden;
}
#modal-with-campaign .cp_list_cont .more_item .item{
    padding: 0;
    border-top: 0;
}

#modal-with-campaign .cp_list_cont .more_item .item .cp_info{
    padding: 10px 0 0 0;
/*    border-top: 1px solid #E4E8EE;*/
    width: 100%;
}
#modal-with-campaign .cp_list_cont .more_item .item:first-child .cp_info{
    border-top: 0;
    padding-top: 0;
}
#modal-with-campaign .cp_list_cont .more_item .item:last-child .cp_info{
    padding-bottom: 10px;
}
#modal-with-campaign .cp_list_cont .more_item.on{
    height: 100%;
    overflow: auto;
/*    border-top: 1px solid #E4E8EE;*/
}
#modal-with-campaign .cp_list_cont .open{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    padding: 10px;
    
}
#modal-with-campaign .cp_list_cont .open img{
    transition: all .2s;
}

#modal-with-campaign .cp_list_cont .item.on .open img{
    transform: rotate(-180deg);
}

#modal-with-campaign .btn_wrap{
/*    padding: 20px 0 ;*/
}
#modal-with-campaign .btn_wrap div{
/*    max-width: 133px;*/
    width: 100%;
/*    padding: 10px;*/
    font-size: 14px;
    line-height: 1;
}

.selection_item .with_cp_btn{
    padding: 13px;
    display: flex;
    align-items: center;
    gap:10px;
    margin-top: 10px;
    font-weight: 500;
    position: relative;
    height: 44px;
}
.selection_item .with_cp_btn div{
    line-height: 1;
}
.selection_item .with_cp_btn img{
    width: 18px;
    height: auto;
    transform: translateY(2px);
}
.selection_item .with_cp_btn .loader{
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-bottom-color: transparent;
    left: initial;
    top: initial;
}



.mb_filter_btn{
    display: flex;
    align-items: center;
    gap:8px;
    font-weight: 400;
    padding: 8px;
    border-radius: var(--border-round-S);
    line-height: 1;
    font-size: 12px;
    color: #222;
}
.mb_filter_btn img{
    max-width: 14px;
    width: 100%;
}


.duplication_section .selectBox__.duplication_filter{
    padding-top: 10px;
}
.duplication_section .selectBox__.duplication_filter .select__{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
    height: auto;
    max-width: 540px;
    width: 100%;
    background-image: none;
}
.duplication_section .selectBox__.duplication_filter .select__ span{
    font-size: 14px;
}

.duplication_section .selectBox__ .list__ li{
    padding: 10px;
    white-space: normal;
}

.duplication_section .selectBox__.on .list__{
    width: 100%;
    max-height: 30dvh;
    overflow-y: auto;
    z-index: 96;
}

.duplication_section .selectBox__.duplication_filter .list__ li label{
    padding-left: 30px;
    font-size: 14px;
    background-size: 18px;
    line-height: 1.5
}
.duplication_section .selectBox__.duplication_filter .list__ li.allBox label{
    gap:0;
}


.pop_cont.modal-edit-impossible{
    padding: 20px;
    max-width: calc(100% - 40px);
    width: 100%;
}
.pop_cont.modal-edit-impossible .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E4E8EE;
    padding-bottom: 15px;
}
.pop_cont.modal-edit-impossible .head h2{
    margin: 0;
    padding-bottom: 0;
}
.pop_cont.modal-edit-impossible .head img{
    max-width: 15px;
    width: 100%;
}

.pop_cont.modal-edit-impossible .body{
    display: flex;
    gap: 14px;
    padding-top: 20px;
}
.pop_cont.modal-edit-impossible .close{
    position: static;
    padding: 0;
    color: #fff;
    text-align: center;
}
.pop_cont.modal-edit-impossible .close.btn{
    background: var(--primary-color);
    color: #fff;
    position: static;
    width: 100%;
    border-radius: var(--border-round-S);
    margin-top: 15px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
}
.pop_cont.modal-edit-impossible .item{
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.pop_cont.modal-edit-impossible .item:first-of-type .mark{
    color: var(--primary-color);
    font-weight: bold;
}
.pop_cont.modal-edit-impossible .item:last-of-type .mark{
    color: #F40000;
    font-weight: bold;
}
.pop_cont.modal-edit-impossible .item .text{
    line-height: 1.5;
    font-size: 14px;
}
.pop_cont.modal-edit-impossible .item .img_cont{
    line-height: 1;
}
.pop_cont.modal-edit-impossible .item .img_cont img{
    width: 100%;
}

.pop_cont.modal-edit-impossible .btn_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}
.pop_cont.modal-edit-impossible .btn_wrap a {
    padding: 10px 0;
    flex: 1;
    line-height: 1;
    font-size: 14px;
}

.pop_cont.modal-edit-impossible .btn_wrap button {
    padding: 10px 0;
    flex: 1;
    font-weight: 500;
    line-height: 1;
    font-size: 14px;
    border-radius: var(--border-round-S);
}



/* 수정 불가 안내 모달 */
.pop_cont.modal-edit-info{
    padding: 20px;
    max-width: calc(100% - 40px);
    width: 100%;
}
.pop_cont.modal-edit-info .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E4E8EE;
    padding-bottom: 15px;
}
.pop_cont.modal-edit-info .head h2{
    margin: 0;
    padding-bottom: 0;
}
.pop_cont.modal-edit-info .head img{
    max-width: 15px;
    width: 100%;
}

.pop_cont.modal-edit-info .body{
    display: flex;
    gap: 14px;
    padding-top: 20px;
}
.pop_cont.modal-edit-info .close{
    position: static;
    padding: 0;
}
.pop_cont.modal-edit-info .btn_wrap .close{
    background: var(--primary-color);
    color: #fff;
    position: static;
    border-radius: var(--border-round-S);
    display: inline-block;
    flex: 1;
    padding: 10px 0 ;
    font-size: 14px;
}
.pop_cont.modal-edit-info .item{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pop_cont.modal-edit-info .item:first-of-type .mark{
    color: var(--primary-color);
    font-weight: bold;
}
.pop_cont.modal-edit-info .item:last-of-type .mark{
    color: #F40000;
    font-weight: bold;
}
.pop_cont.modal-edit-info .item .text{
    line-height: 1.5;
    font-size: 14px;
}
.pop_cont.modal-edit-info .item .img_cont{
    line-height: 1;
}
.pop_cont.modal-edit-info .item .img_cont img{
    width: 100%;
}

.pop_cont.modal-edit-info .btn_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}
.pop_cont.modal-edit-info .btn_wrap a {
    padding: 10px 0;
    flex: 1;
    line-height: 1;
    font-size: 14px;
}

.pop_cont.modal-edit-info .btn_wrap a {
    padding: 10px 0;
    flex: 1;
    font-weight: 500;
    line-height: 1;
    font-size: 14px;
    border-radius: var(--border-round-S);
}



#modal-edit-impossible{
    min-width: initial;
    max-width: 400px;
    width: 100%;
}
#modal-edit-impossible .head{
    position: relative;
}
#modal-edit-impossible .head .colser{
    top: 50%;
    transform: translateY(-50%);
}
#modal-edit-impossible h2{
    font-weight: 500;
    font-size: 20px;
}
#modal-edit-impossible .body{
    padding: 0 20px;
}

#modal-edit-impossible .item{
    max-width: initial; 
}
#modal-edit-impossible .item .text{
    text-align: left;
    font-size: 14px;
}

#modal-edit-impossible .btn_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
}
#modal-edit-impossible .btn_wrap a {
    padding: 10px 0;
    flex: 1;
    line-height: 1;
    font-size: 14px;
    text-align: center;
}

#modal-edit-impossible .btn_wrap button {
    padding: 10px 0;
    flex: 1;
    font-weight: 500;
    line-height: 1;
    font-size: 14px;
}

#modal-edit-impossible .btn_wrap .blue_btn{
    color: #fff;
    border-radius: var(--border-round-S);
}


html body iframe[referrerpolicy='no-referrer-when-downgrade']:first-child{
    outline: none !important;
    visibility: visible !important;
    resize: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: none !important;
    opacity: 1 !important;
    filter: alpha(opacity = 100) !important;
    -mz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    top: auto !important;
    right: 30px !important;
    bottom: 90px !important;
    left: auto !important;
    position: fixed !important;
    border: 0 !important;
    min-height: 60px !important;
    min-width: 64px !important;
    max-height: 60px !important;
    max-width: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-transition-property: none !important;
    -webkit-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    width: 64px !important;
    height: 60px !important;
    display: block !important;
    z-index: 1000001 !important;
    background-color: transparent !important;
    cursor: none !important;
    float: none !important;
    border-radius: unset !important;
    pointer-events: auto !important;
    clip: auto !important;
    color-scheme: light !important;
}
html body iframe[referrerpolicy='no-referrer-when-downgrade']:nth-child(3){
    display: none !important;
}

html body iframe[referrerpolicy='no-referrer-when-downgrade']:nth-child(4){
      outline: none !important;
    visibility: visible !important;
    resize: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: none !important;
    opacity: 1 !important;
    filter: alpha(opacity = 100) !important;
    -mz-opacity: 1 !important;
    -khtml-opacity: 1 !important;
    top: auto !important;
    right: 45px !important;
    bottom: 75px !important;
    left: auto !important;
    position: fixed !important;
    border: 0 !important;
    min-height: 44px !important;
    min-width: 37px !important;
    max-height: 44px !important;
    max-width: 37px !important;
    padding: 0 !important;
    margin: 0px 0 0 0 !important;
    -moz-transition-property: none !important;
    -webkit-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important;
    transform: rotate(0deg) translateZ(0);
    -webkit-transform: rotate(0deg) translateZ(0);
    -ms-transform: rotate(0deg) translateZ(0);
    width: 37px !important;
    height: 44px !important;
    display: block !important;
    z-index: 1000002 !important;
    background-color: transparent !important;
    cursor: none !important;
    float: none !important;
    border-radius: unset !important;
    pointer-events: auto !important;
    clip: auto !important;
    color-scheme: light !important;
    -moz-transform: rotate(0deg) translateZ(0);
    -o-transform: rotate(0deg) translateZ(0);
    transform-origin: 0;
    -moz-transform-origin: 0;
    -webkit-transform-origin: 0;
    -o-transform-origin: 0;
    -ms-transform-origin: 0;
}
  

    body.tawk-mobile, html.tawk-mobile {
        font-size: 18px !important;
    }
    
    html body iframe[referrerpolicy='no-referrer-when-downgrade']:first-child{
        right: 6px !important;
        bottom: 80px !important;
        min-width: auto !important;
        min-height: auto !important;
        transform: scale(0.85) !important;
    }
    
    html body iframe[referrerpolicy='no-referrer-when-downgrade']:nth-child(4){
        right: 20px !important;
        bottom: 70px !important;
    }
    html body .tawk-min-container .tawk-button-circle.tawk-button-large{
        width: 50px;
        height: 50px;
    }




#wrap article > .head{
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    gap:20px;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    font-weight: 700;
    z-index: 9999;
    font-size: 16px;
}


/*
#wrap:not(:has(modal-content)) article > .head{
    position: static;
    background: transparent;
}
*/
#wrap article .head.center{
    justify-content: center;
}
#wrap.completed article .head.center{
    justify-content: flex-start;
}
#wrap.completed .section-area:first-child{
    padding: 0;
}

.ticket_cont{
    padding: 20px;
    background: #fff;
}


.ticket_info{
    background: #ECF9FB;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    border-radius: 10px;
}

.ticket_info .head{
    border: 2px solid var(--primary-color);
    background: #fff;
    color: var(--primary-color);
    width: fit-content;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 500;
    line-height: 1;
    font-size: 14px;
}

.ticket_info .ticket_name{
    font-size: 18px;
    font-weight: 500;
}
.ticket_info .ticket_date{
    font-size: 14px;
    border: 1px solid #444C67;
    padding: 5px 20px;
    border-radius: 15px;
}



.ticket_select_cont{
    margin: 20px 15px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
}

.ticket_select_cont .head{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 20px;
}
.ticket_select_cont .info{
    font-size: 16px;
    padding-bottom: 20px;
}

.ticket_select_cont .item_cont{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.ticket_select_cont .item_cont .item{
    border: 1px solid #E4E8EE;
    border-radius: 10px;
    padding: 15px 10px;
    display: flex;
    gap:10px;
}
.ticket_select_cont .item_cont .item:has(input[type='radio']:checked){
    border-color: var(--primary-color);
    background: #ECF9FB;
}
.ticket_select_cont .item_cont .item .sale{
    border: 1px solid var(--red-color);
    border-radius: 5px;
    color: var(--red-color);
    padding: 5px;
    font-size: 12px;
    line-height: 1;
    width: fit-content;
}
.ticket_select_cont .item_cont .item input{
    width: 100%;
    height: 100%;
    margin: 0;
}
.ticket_select_cont .item_cont .item.checkBox input + label{
    padding-left: 20px;
}
.payment_item input + label{
    padding-left: 30px;
    font-size: 14px;
}

.ticket_select_cont .item_cont .item > div{
    display: flex;
    flex-direction: column;
    gap:10px;
    line-height: 24px;
}
.ticket_select_cont .item_cont .item > div .name{
    display: flex;
    gap:20px;
}
.ticket_select_cont .item_cont .item > div .name strong{
    font-size: 16px;
    font-weight: 500;
}
.ticket_select_cont .item_cont .item > div .price strong{
    font-size: 16px;
    
}

.ticket_select_cont .item_cont .item_info{
    color: #666;
    font-size: 14px;
}

.ex_date{
    background: #ECF9FB;
    padding: 13px;
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 14px;
}

.ex_date .date{
    color: var(--primary-color);
    display: inline-block;
}
.ex_date b{
    font-weight: 700;
}
.ex_date b .plus_day{
    font-weight: inherit;
}

.pay_btn_cont{
    display: flex;
    gap:10px;
    margin-top: 10px;
}

.pay_btn_cont button{
    color: #fff;
    border-radius: 5px;
    flex: 1;
    padding: 13px 5px;
    font-size: 18px;
    font-weight: 500;
}
.pay_btn_cont button div{
    color: inherit;
    font-size: 16px;
    font-weight: 700;
}
.pay_btn_cont button small{
    font-size: 12px;
    font-weight: 500;
    word-break: keep-all;
}

.pay_btn_cont .smart_store{
    background: #03C75A;
}

.pay_btn_cont .assaview_pay{
    background: var(--primary-color);
    
}

.provision{
    background: #F4F5F9;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap:15px;
    color: #888;
    font-size: 14px;
    border-radius: 12px;
}
.provision h3{
    color: #666;
    font-size: 16px;
    padding-bottom: 10px;
    font-weight: 500;
}
.provision p{
    color: #888;
}
.provision .item {
    
}
.provision .item div{
    display: flex;
    flex-direction: column;
    gap:5px;
    padding-left: 5px;
}


#store_pay .head{
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #E7E7E7;
    margin: 0 20px;
    padding: 20px 0;
    
}
#store_pay .head h2{
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
#store_pay .head .closer{
    width: 20px;
    height: 20px;
    right: 0;
}

#store_pay .body{
    padding: 30px 20px;
    font-size: 14px;
}

#store_pay .body .text{
    line-height: 1.3;
}

#store_pay .body .phone{
    padding-left: 20px;
    color: #3969EF;
    font-weight: 700;
}

#store_pay .body .noti{
    background: #ECF9FB;
    padding: 13px;
    margin-top: 15px;
}

#store_pay .btn_area{
    padding: 0 20px 20px 20px;
    margin: 0;
}
#store_pay .btn_area a{
    width: 100%;
    height: auto;
    box-shadow: none;
    padding: 10px 0;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid var(--primary-color);
    color: #fff;
}

.payment_info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.payment_info .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.payment_info .item .item_price{
    font-weight: 700;
    font-size: 14px;
}
.payment_info .item .item_price span{
    font-weight: inherit;
}
.payment_info .item.sale{
    color: #3969EF;
}
.payment_info .item.sale > div{
    color: inherit;
}

.payment_area{
    background: #fff;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.payment_area .head_title{
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 20px;
}
.payment_area .btn_cont{
    padding: 10px 0 ;
    display: flex;
    flex-direction: column;
    gap:10px;
}

.payment_area .btn_cont button{
    padding: 9px;
    width: 100%;
    border-color: #888;
    font-weight: 400;
    font-size: 14px;
}

.final_price{
    background: #ECF9FB;
    padding: 20px 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
}
.final_price .text{
    font-weight: 700;
    font-size: 18px;
}
.final_price .text small{
    font-weight: 400;
    font-size: 14px;
}


.pay_method_area{
    display: flex;
    flex-direction: column;
    gap:15px;
}


.pay_method_area .no_bank_list .noti{
    padding-bottom: 0;
    padding-top: 15px;
    border-top: 1px solid #E4E8EE;
    margin-top: 15px;
}



.pay_method_area .issued_list{
    border: none;
    padding: 0;
    margin: 0;
}

.pay_method_area.new h2{
    padding-bottom: 0;
}






.sort_area{
    min-width: 120px;
    display: flex;
    justify-content: flex-end;
/*    padding: 0 20px;*/
    
}

.sort_area .infl_sort{
    max-width: 150px;
    width: 100%;
}

.sort_area .infl_sort .box__{
    display: flex;
    justify-content: flex-end;
    max-width: 150px;
}

.sort_area .infl_sort .select__{
    width: fit-content;
    height: auto;
    background-image: none;
    background-position: unset;
    padding-right: 10px;
    padding-left: 10px;
    line-height: 1;
    font-size: 12px;
    border: none;
    font-weight: 300;
    gap: 8px;
}
.sort_area .infl_sort .select__::after{
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #444C67;
    flex-shrink: 0;
    align-self: center;
}



.tax_save_area{
    border-top: 1px solid #E4E8EE;
    padding-top: 10px;
    
}
.tax_save_area .check_label{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.64px;
    color: #222;
    gap: 8px;
    text-align: left;
    word-break: keep-all;
}



.term_wrap .term.drop_btn {
    position: static;
    border: none;
    padding: 0;
    font-size: 14px;
    color: #888;
    
}
.term_wrap .term.drop_btn img{
    transform: rotate(0);    
    transition: transform .3s;
}

.term_wrap .term.drop_btn.active{
    background: none;
}
.term_wrap .term.drop_btn.active img{
    transform: rotate(180deg);
    
}
.term_wrap .term.drop_btn div{
    color: inherit;
}

.step_item.term_area{
    margin-bottom: 0;
}


.step_item .pay_btn_cont{
    width: 100%;
    padding: 0;
}
.step_item .pay_btn_cont li{
    width: 100%;
}

.step_item .pay_btn_cont button{
    width: 100%;
    height: auto;
    font-weight: 700;
    max-width: none;
    font-size: 18px !important;
}
.step_item .pay_btn_cont button:has(.white_loader){
    display: flex;
    justify-content: center;
    align-items: center;
}
.step_item .pay_btn_cont button span{
    font-size: inherit;
    font-weight: inherit;
}


.pay_btn_area{
    background: #ECF9FB;
    padding: 10px 25px;
}

.payment_item h3.area_title{
    font-weight: 500;
    font-size: 16px;
}

.term_wrap > div {
    font-size: 14px;
    text-align: center;
    color: #888;
}



.essential{
    color: var(--red-color);
}

#sale_code_modal .modal-layer{
    padding: 20px;
}

#sale_code_modal .head{
    padding: 0;
    
}
#sale_code_modal .head h2{
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

#sale_code_modal .body{
    padding: 10px;
    background: #f4f5f9;
    margin: 20px 0;
    border-radius: 10px;
}


#sale_code_modal .input_cont{
    position: relative;
    margin-bottom: 20px;
}
#sale_code_modal .input_cont input{
    text-align: center;
    padding: 9px 12px;
    height: auto;
    border: 1px solid #EDEDED;
    background: #fff;
    border-radius: 8px;
    width: 100%;
}
#sale_code_modal .input_cont input::placeholder{
    text-align: center;
}
#sale_code_modal .input_cont button{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 12.5px;
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
}


#sale_code_modal .text{}
#sale_code_modal .text h3{
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 14px;
}
#sale_code_modal .text p{
    font-size: 14px;
}


#sale_code_modal .btn_area{
    display: flex;
    gap:20px;
    margin: 0;
    padding: 0
}
#sale_code_modal .btn_area button{
    flex-grow: 1;
    max-width: none;
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
}






#ticket_info_modal .body{
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#ticket_info_modal .btn_area{
    gap:10px;
}


#ticket_info_modal .btn_area button{
    max-width: none;
    box-shadow: none;
}


.modal-dialog.user_feedback_modal{
    display: flex;
    align-items: center;
}

#modal-user_feedback.new{
    max-width: calc(100% - 40px);
    min-width: auto;
    width: 100%;
    padding: 20px;
}

#modal-user_feedback.new h1{
    text-align: left;
    padding-bottom: 20px;
    border-bottom: 1px solid #EDEDED;
}
#modal-user_feedback.new p{
    font-size: 16px;
    padding-bottom: 10px;
}
#modal-user_feedback.new textarea{
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    background: #FFF;
    width: 100%;
    height: 165px;
    padding: 10px;
}

#modal-user_feedback.new .btn_wrap{
    max-width: 230px;
    font-size: 16px;
    margin: 0 auto;
    padding-top: 40px;
}
#modal-user_feedback.new .feedback_send{
    padding: 13px 20px;
    border-radius: var(--border-round-S);
    width: 100%;
    display: inline-block;
    text-align: center;
}




.star_rating {
    display: flex;
    gap: 5px;
    padding: 20px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    justify-content: space-between;
    margin-bottom: 30px;
}

.star {
    cursor: pointer;
    font-size: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    gap: 10px;
}


#subscribe_payment_cancel_modal .btn_area{
    margin-top: 0;
}

#subscribe_payment_cancel_modal .modal-layer .content{
    padding: 30px 25px;
}



.feedback_section{
    margin: 10px 0;
    padding: var(--spacing-16);
    background-color: var(--color-surface-default);
    border-radius: 10px;
    border: 1px solid var(--color-border-default);
}
.feedback_section h2{
    font: var(--font-body-m-semibold);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-default);
    border-bottom: 1px solid var(--color-border-default);
    padding-bottom: 10px;
}

.feedback_section .content_box{
    display: flex;
    gap:10px;
    flex-wrap: wrap;
    flex-direction: column;
}
.feedback_section .content{
    flex:1;
}
.feedback_section .content_box .title{
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default);
    padding: 0;
    padding-bottom: 10px;
    position: static;
    margin-top: 12px;
}


.feedback_section .star_rating{
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.feedback_section .text_cont{
    min-height: 195px;
    
}
.feedback_section .text_cont textarea{
    width: 100%;
    height: 100%;
    min-height: 195px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    padding: 10px;
    font: var(--font-body-s-regular);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default);
}
.feedback_section .text_cont textarea::placeholder{
    color: var(--color-content-muted);
}
.feedback_section .btn_wrap{
    padding-top: 20px;
}
.feedback_section .btn_wrap button{
    width: 100%;
    padding: 9px 0;
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
}

.floating_login_btn{
    position: fixed;
    bottom: 70px;
    width: 100%;
    z-index: 1;
    padding: 10px;
}
.floating_login_btn .btn_wrap{
    
}
.floating_login_btn .btn_wrap a{
    width: 100%;
    line-height: 1;
    font-size: 14px;
    color: #fff;
    text-align: center;
}





.campaign_progress_info{
    margin: 10px 0;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
}
.campaign_progress_info .pay_info{
    background-color: #ECF9FB;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
}
.campaign_progress_info .pay_info h3{
    font-size: 16px;
    font-weight: 500;
    color: #333;
}
.campaign_progress_info .pay_info p{
    font-size: 14px;
    font-weight: 500;
}
.campaign_progress_info .pay_info .noti{
    color: var(--red-100-color);
}
.campaign_progress_info .info_text{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0 20px 0;
}
.campaign_progress_info .info_text img{
    max-width: 100px;
}
.campaign_progress_info .info_text p{
    font-weight: 500;
}

.campaign_info{
    margin: 10px 0;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
}

.campaign_info .campaign_wrap{
    display: flex;
    gap: 20px;
}

.campaign_info .campaign_wrap img{
    max-width: 100px;
    max-height: 100px;
    border-radius: 10px;
}

.campaign_info .thumbnail{
    max-width: 100px;
}


.campaign_info h3{
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 15px;
}
.campaign_info .title{
    position: static;
    padding: 0;
    padding-bottom: 15px;
}
.campaign_info .info{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.campaign_info .info .cp_id{
    font-size: 12px;
    color: #888;
    font-weight: 300;
}
.campaign_info .info .cp_subject{
    padding-top: 10px;
    font-size: 14px;
}

.campaign_info .btn_wrap{
    display: flex;
    gap:10px;
    padding-top: 15px;
}
.campaign_info .btn_wrap a{
    flex: 1;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    padding: 15px 0;
    font-size: 14px;
    border-radius: 5px;
}
.campaign_info .btn_wrap a:first-child{
    color: #fff;
}
.campaign_info .btn_wrap a:last-child{
    color: #888;
}
.campaign_info .sub_text{
    padding-top: 15px;
    font-weight: 300;
    font-size: 12px;
    color: #444C67;
}

.number{
    background: var(--primary-color);
    padding: 10px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section_title{
    display: flex;
    align-items: center;
    gap:10px;
}



.cp_qualified h3{
    padding-bottom: 15px;
    line-height: 1;
    font-size: 18px;
}









.ui.popup.custom-popup {
    /* 기본 스타일 */
    width: 95vw !important;
    max-width: 500px !important;
    
    /* 가운데 정렬 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* 여백과 위치 조정 */
    margin: 0 auto !important;
    margin-bottom: 1em !important;  /* 클릭한 요소와의 간격 */
    
    /* 추가 스타일 */
    padding: 1em;
    box-sizing: border-box;
    z-index: 9999 !important;  /* 다른 요소들 위에 표시 */
    height: auto;
}
.ui.top.center.popup:before{
    display: none;
}

@media screen and (max-width: 768px) {
    .ui.popup.custom-popup {
        width: 90vw !important;
        margin: 0.5em auto !important;
    }
}




#section_qualified{
    background-color: #F9F9F9;
}






.free{
    color: #EF5D1A;
    font-weight: 500;
    text-decoration-line: line-through;
}
.bold{
    font-weight: bold;
}








/* 결제 정보 모달 */
#payment_info{}
#payment_info .pay_id{
    background: var(--bg-gray);
    color: #7D7D7D;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6.5px 10px;
    font-size: 12px;
    border-radius: var(--border-round-L);
}

#payment_info .pay_id div,#payment_info .pay_id span{
    color: inherit;
}

#payment_info .pay_price_info{
    padding-top: 20px;
    color: #222;
}

#payment_info .pay_price_info .pay_list{
    display: flex;
    flex-direction: column;
    gap:10px;
    color: #7D7D7D;
}
#payment_info .pay_price_info .pay_list .item{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #222;
}
#payment_info .pay_price_info .pay_list .item .text{
    display: flex;
    align-items: center;
    gap:10px;
    position: relative;
    flex: 1;
}
#payment_info .pay_price_info .pay_list span{
    color: inherit;
}

#payment_info .pay_price_info .pay_list .item .text .hover_info{
    display: none;
    position: absolute;
    left: 0;
    top: 30px;
    padding: 15px;
    border: 2px solid var(--primary-color);
    background: #fff;
    border-radius: 10px;
    font-size: 12px;
    color: #000;
    line-height: 2;
    z-index: 1;
}
#payment_info .pay_price_info .pay_list .item .text svg{
    cursor: pointer;
}
#payment_info .pay_price_info .pay_list .item .text svg:hover ~ .hover_info{
    display: block;
}

#payment_info .pay_price_info .pay_list .item span.price{
    font-weight: 700;
}
#payment_info .pay_price_info .pay_list .item.discount{
    color: #3969EF;
    font-size: 12px;
}

#payment_info .pay_price_info .pay_list .item.sub{
    font-size: 12px;
    padding-left: 20px;
}
#payment_info .pay_price_info .pay_list .item.sub .name{
    display: flex;
    align-items: center;
    gap:10px;
}
#payment_info .pay_price_info .pay_list .item.sub .name .ui-tooltip{
    height: 12px;
}



#payment_info .pay_price_info .total_pay{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-sky);
    border-radius: var(--border-round-L);
    padding: 20px 10px;
    margin-top: 10px;
    font-size: 16px;
}
#payment_info .pay_price_info .total_pay .left{
    font-size: 16px;
    font-weight: 700;
    
}

#payment_info .pay_price_info .total_pay .left small{
    font-size: 16px;
    font-weight: 400;
}

#payment_info .pay_price_info .total_pay .total_pay_price{
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
}


#payment_info .pay_method_cont{
    border-top: 1px solid var(--line-color,#E4E8EE);
    padding-top: 20px;
    margin-top: 20px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#payment_info .pay_method_cont .pay_method{
    display: flex;
    justify-content: space-between;
    color: #222;
    font-size: 16px;
}

#payment_info .pay_method_cont .pay_method_desc{
    color: #7D7D7D;
    font-weight: 400;
    font-size: 14px;
}


#payment_info .modal-layer .btn_area{
    margin: 0;
    padding: 20px;
    padding-top: 0;
}



.payment_history_cont{
    padding: 20px 10px;
    background-color: var(--bg-gray);
    border-radius: 10px;
    margin-top: 10px;
}
.payment_history_cont h4{
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 20px;
}

.pay_price_info{
    
}
.pay_price_info .pay_list{
    display: flex;
    flex-direction: column;
    gap:10px;
}
.pay_price_info .pay_list .item{
    font-size:14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

.pay_price_info .pay_list .item .text{
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    flex: 1;
}
.pay_price_info .pay_list .item .text .hover_info{
    display: none;
    position: absolute;
    left: 0;
    top: 30px;
    padding: 15px;
    border: 2px solid var(--primary-color);
    background: #fff;
    border-radius: 10px;
    font-size: 12px;
    color: #000;
    line-height: 2;
    z-index: 1;
}

.pay_price_info .pay_list .item .text svg{
    cursor: pointer;
}
.pay_price_info .pay_list .item .text svg:hover ~ .hover_info{
    display: block;
}
.pay_price_info .pay_list .sub_item{
    padding-left: 20px;
    font-weight: 400;
    font-size: 12px;
    color: var(--blue-color);
}

.pay_price_info .total_pay_cont{
    padding: 10px 0;
    margin-top: 10px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}
.pay_price_info .total_pay{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-sky);
    border-radius: var(--border-round-L);
    padding: 20px 10px;
    
    font-size: 16px;
    font-weight: 700;
}


.pay_price_info .total_pay .total_pay_price{
    color: var(--primary-color);
    font-size: 16px;
    font-weight:700;    
}

.pay_price_info .total_pay .right{
    font-size: 14px;
    font-weight: 400;
}


.pay_method_cont{
    border-top: 1px solid var(--line-color, #E4E8EE);
    padding-top: 20px;
    margin-top: 20px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay_method_cont .pay_method{
    display: flex;
    justify-content: space-between;
    color: #222;
    font-size: 16px;
}

.pay_method_cont .pay_method_desc{
    color: #7D7D7D;
    font-weight: 400;
    font-size: 14px;
}





 .tool-area {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
        flex-direction: column;
    }
    .tool-area .btn {
        display: inline-block;
        line-height: 40px;
        border-radius: 5px;
        background-color: #ddd;
        background-repeat: no-repeat;
        background-position: left 14px center;
    }
    .tool-area .btn-back {
        width: 120px;
        background-color: #454D56;
        color: #fff;
        background-image: url(../img/icon/back.png);
        padding-left: 40px;
    }
    .tool-area .state {
        width: 140px;
        background-color: #ffffff;
        text-align: center;
        border: 1px solid #3CCBDB;
    }

    .tool-area .state.on {
        background-color: #3CCBDB;
        color: #ffffff;
        font-weight: 500;
    }

    .tool-area .btn-excel {
/*        background-color: #1E7145;*/
        background: #fff;
        color: #222;
/*        background-image: url(../img/icon/excel.png);*/
        padding: 8px;
        display: flex;
        align-items: center;
        gap:10px;
        line-height: 1;
        border: 1px solid var(--line-color);
    }
    .tool-area .btn-blue { /*알림 버튼 사용*/
        width: 120px;
        color: #fff;
        background-color: #3CCBDB;
        text-align: center;
    }

    .tool-area .right_box{
        display: flex;
        align-items: center;
        gap: 5px;   
    }


.sub1_detail.card .tool-area{
    position: fixed;
    top: 114px;
    width: 100%;
    background-color: var(--bg-gray);
    padding: 10px;
    z-index: 1;
    transition: all .3s;
}
.tool-area{
    gap:10px;
    padding: 10px;
    padding-bottom: 0;
    margin: 0;
}
.sticky_fix .tool-area{
    
}
.tool-area .row_1, .tool-area .row_2{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.tool-area .row_1 .right,.tool-area .row_1 .left{
    display: flex;
    gap:5px;
}
.tool-area .row_2{
    align-items: center;
}
.tool-area .row_2 button{
    font-size: 12px;
    padding: 10px 10px;
}
.tool-area .row_2 button img{
    max-width: 9px;
    max-height: 12px;
}

.tool-area .fold_toggle button .text,.tool-area .filter_btn button .text{
    display: flex;
    align-items: center;
    gap:6px;
}


.content_wrap{
    padding: var(--spacing-16);
    padding-top: 212px;
    transition: all .3s;
}
.sticky_fix .content_wrap{
/*    padding-top: 180px;*/
}


.sticky_fix .campaign_info_cont{
    top: 0;
}
.sticky_fix .status_nav2 .status_label{
    top:-40px;
}
.sticky_fix.sub1_detail.card .tool-area{
    top: -98px;
}
.sticky_fix.sub1_detail.card .tool-area.tool-area--renewal{
    top: -112px;
}

/* .content_wrap .ui-infomation{
    margin-top: 12px;
} */

.tool-area .filter_btn img{
    max-width: 14px;
}

/* ─── 모바일 리뉴얼 tool-area ─── */
.sub1_detail.card .tool-area.tool-area--renewal {
    top: 97px;
    background: #fff;
    border-bottom: 1px solid var(--color-neutral-200);
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: top 0.5s ease-out;
}

.tool-area--renewal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.tool-area--renewal__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.tool-area--renewal__chips::-webkit-scrollbar { display: none; }

/* 칩 버튼 공통 */
.mob-renewal-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    font-size: var(--caption-m-size);
    font-weight: 500;
    line-height: var(--caption-m-line);
    letter-spacing: var(--caption-m-letter);
    color: var(--color-content-default);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

/* 칩 내부 원형 체크박스 */
.mob-renewal-chip__cb {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}
.mob-renewal-chip .chk-on { display: none; }
.mob-renewal-chip.checked .chk-off { display: none; }
.mob-renewal-chip.checked .chk-on { display: block; }

/* 정렬 드롭다운 칩 */
.mob-renewal-sort .infl_sort .select__ {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 8px 8px;
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    font-size: var(--caption-m-size);
    font-weight: 500;
    line-height: var(--caption-m-line);
    letter-spacing: var(--caption-m-letter);
    color: var(--color-content-default);
    white-space: nowrap;
    cursor: pointer;
    height: auto;
}
.mob-renewal-sort .infl_sort .select__::after { order: -1; }
.mob-renewal-sort .list__ { min-width: 130px; right: 0; left: auto; }

/* 옵션 칩 (드롭다운 형태) — overflow 컨테이너 밖에 배치 */
.mob-renewal-option-chip {
    position: relative;
    flex-shrink: 1;
    min-width: 0;
    max-width: 55vw;
}
.mob-renewal-option-chip.selectFilter .select__ {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: var(--color-primary-weak);
    border-radius: 8px;
    font-size: var(--caption-m-size);
    font-weight: 500;
    line-height: var(--caption-m-line);
    letter-spacing: var(--caption-m-letter);
    color: var(--color-content-brand);
    white-space: nowrap;
    cursor: pointer;
    min-height: 38px;
    border: 1px solid transparent;
    height: auto;
    margin-left: unset;
    width: auto;
    overflow: hidden;
    max-width: 120px;
}
.mob-renewal-option-chip .option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mob-renewal-option-chip.selectFilter .list__ { min-width: 180px; width: auto; right: 0; left: auto; }

.mob-renewal-option-chip.selectFilter .select__::after { background: var(--primary-color); }

/* 액티브 칩 (찜만 보기 등) */
.mob-renewal-chip--active {
    background: var(--color-primary-weak, #e2f7fa);
    border-color: transparent;
    color: var(-color-brand-);
}

/* 펼치기 칩 */
.mob-renewal-fold-chip {
    gap: 4px;
}
.mob-renewal-fold-chip .fold-icon { line-height: 0; }
.mob-renewal-fold-chip .fold-icon img { width: 10px; }

/* 필터 칩 내부 아이콘 */
.mob-renewal-chip > svg { flex-shrink: 0; }

/* 리뉴얼 레이아웃 content_wrap 오프셋 조정 */
#wrap.renewal-layout .content_wrap {
    padding-top: 224px;
}
#wrap.renewal-layout.renewal-layout--single-row .content_wrap {
    padding-top: 180px;
}

/* ─────────────────────────────── */

.floating_btn_cont{
    position: fixed;
    bottom: 80px;
    width: 100%;
    display: flex;
    gap: 10px;
    left: 0;
    padding: 0 10px;
    z-index: 9999999999;
}

.floating_btn_cont .ui-button{
    flex: 1;
    padding: 14px 0;
    font-size: 15px;
}

body:has(#wrap.sub1_detail.card) .floating_btn_cont {
    bottom: 0;
    background: #fff;
    gap: var(--spacing-8);
}
body:has(#wrap.sub1_detail.card) .floating_btn_cont .ui-button {
    display: flex;
    height: 48px;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid var(--color-border-brand);
}
body:has(#wrap.sub1_detail.card) .floating_btn_cont .ui-button .text {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-brand);
    text-align: center;
}




.cp_status_wrap{
    border: none;
    padding: 0;
    color: #555;
    position: relative;
    min-width: 100px;
}
.cp_status_wrap label{
    padding: 7px 5px;
    min-width: 120px;
    text-align: center;
    display: flex;
    border: 1px solid #555;
    border-radius: var(--border-round-S);
/*    border-color: var(--line-color);*/
    font-size: 10px;
    font-weight: 700;
    padding-left: 45px;
     line-height: 20px; 
    justify-content: center;
    gap: 10px;
}

.cp_status_wrap .tooltip{
}
.cp_status_wrap input:checked + label{
    color: var(--color-content-brand);
    border-color: var(--color-border-default);
    font: var(--font-caption-m);
    border:none;
}
.cp_status_wrap [role="switch"]{
    background: #555;
    border:1px solid #555;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    margin: 0;
    width: 40px;
    height: 22px;
}


.cp_status_wrap [role="switch"]::before{
    border:1px solid #555;
    background: #fff;
    width: 16px;
    height: 16px;
    left: 1px;
}

.cp_status_wrap:has(input:checked) [role="switch"]{
    background: var(--color-content-brand);
    border:1px solid var(--color-content-brand);
}
.cp_status_wrap:has(input:checked) [role="switch"]::before{
    border:1px solid var(--primary-color);
    background: #fff;
    left: calc(100% - 19px);
}



.asign_infomation{
    background-color: #fff;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.asign_infomation .btn_wrap{
    padding-top: 12px;
    max-width: 750px;
}
.asign_infomation .btn_wrap button{
    display: flex;
    height: 48px;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: var(--radius-8);
    border: none;
    background: var(--color-surface-muted);
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
}
.asign_infomation .btn_wrap .active_btn,.asign_infomation .btn_wrap .disabled_btn{
    width: 100%;
}
.asign_infomation .btn_wrap button:disabled{
    background: var(--color-surface-muted) !important;
    color: #7D7D7D !important;
    border: none !important;
}


.asign_infomation .information_tooltip{
    color: var(--color-content-brand);
    padding-top: 12px;    
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.asign_infomation .information_tooltip .tooltip{
    display: flex;
    align-items: center;
    gap:5px;
    height: auto;
}


.pull_up_condition_info{
    background-color: #ECF9FB;
    padding: 15px;
    margin-top: 12px;
    max-width: 350px;
    border-radius: 10px;
    color: #222;
}

.pull_up_condition_info .head{
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
}
.pull_up_condition_info .body{
    display: flex;
    flex-direction: column;
    gap:10px;
    font-size: 12px;
}
.pull_up_condition_info .body .item{
    display: flex;
    align-items: center;
    gap: 10px;
}
.pull_up_condition_info .body .item img{
    max-width: 16px;
}
.pull_up_condition_info .body .item .sub_text{
    font-size: 12px;
    font-weight: 300;
}



.legal_process_area{
    border: 1px solid var(--primary-color);
    margin-top: 10px;
    border-radius: var(--border-round-S);
}
.legal_process_area .date_edit_btn_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 8px;
}
.legal_process_area .date_edit_btn_wrap.on + .legal_process_info{
    display: block;
}
.legal_process_area .date_edit_btn_wrap img{
    max-width: 15px;
    height: auto;
}
.legal_process_area .date_edit_btn_wrap.on img{
    transform: rotate(180deg);
}
.legal_process_area .date_edit_btn_wrap .empty_box{
    width: 15px;
    height: 15px;
}
.legal_process_area .date_edit_btn_wrap .date_edit_btn{
    border: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.legal_process_info{
    display: none;
    padding: 10px;
    border-top: 1px solid var(--line-color);
}
.legal_process_info > .head{
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 10px;
}
.legal_process_info .process_info{
    padding: 5px;
    background-color: #ECFCFF;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}
.legal_process_info .process_desc{
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 10px;
}
.legal_process_info .step_info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    align-items: flex-start;
    margin: 0;
}
.legal_process_info .step_info .item{

}
.legal_process_info .step_info .item .head{
    font-size: 12px;
    font-weight: 600;
    color: #222;
}
.legal_process_info .step_info .item .desc{
    font-size: 12px;
    font-weight: 400;
    color: #444C67;
}

.legal_action_btn{
    background-color: #fff;
    border: 1px solid #FF6163;
    color: #FF6163;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 0;
    border-radius: var(--border-round-S);
    line-height: 1;
    width: 100%;
    margin-top: 10px;
}
.legal_action_btn:disabled{
    background-color: #CECECE;
    color: #7d7d7d;
    border: 1px solid #cecece;
}


#purpose_modal #mb_purpose{
    margin-top: 10px;
    width: 100%;
    min-height: 150px;
    padding: 10px;
}
#purpose_modal .body div{
    line-height: 1.4;
}





.campaign_load_area > article .number{
    background-color: #888;
}
.campaign_load_area > article h2{
    display: flex;
    align-items: center;
    gap:10px;
}
.campaign_load_area .load_type_area{
    display: flex;
    align-items: center;
    gap:20px;
    /* padding-bottom: 10px; */
}
.campaign_load_area .load_type_area > div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.campaign_load_area .load_type_area div input{
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}
.campaign_load_area .load_type_area div label{
    font-size: 14px;
    gap:5px;
}
.campaign_load_area .load_type_area div label span{
    font-size: 12px;
}

.select__wrap .selectBox__.cp_load .select__{
    width: 100%;
    font-size: 14px;
    font-weight: 300;
    height: auto;
    padding: 10px;
}
.select__wrap .selectBox__.cp_load .list__{
    width: 100%;
    max-height: 40dvh;
    border-color: #EDEDED;
    border-radius: 10px;
    overflow-y: auto;
}
.select__wrap .selectBox__.cp_load .list__ li{
    border-bottom: 1px solid #EDEDED;
    font-size: 12px;
}
.select__wrap .selectBox__.cp_load .list__ li:last-child{
    border-bottom: none;
}

.select__wrap .selectBox__.cp_load .list__ li .text{
    display: flex;
    flex-direction: column;
    gap:5px;
    align-items: flex-start;
    justify-content: center;
    font-size: 14px;
}
.select__wrap .selectBox__.cp_load .list__ li .text_title{
    font-size: 14px;
    font-weight: 400;
    color: #222;
}
.select__wrap .selectBox__.cp_load .list__ li .text_desc{
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 20px;
}

.select__wrap .selectBox__.cp_load .list__ li .text_desc > div{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
}
.select__wrap .selectBox__.cp_load .list__ li .text_desc > div img{
    max-width: 16px;
    max-height: 16px;
}










.accordion_section{
    position: relative;
    background-color: #fff;
    /* border-radius: 15px; */
    padding: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    max-height: 75px;
    transition: max-height 0.3s ease;
    /* border: 1px solid var(--primary-color,#3CCBDB); */
}
.accordion_section.on{
    max-height: 4000px;
    overflow: visible;
    border: none;
    border-radius: 0;
}

/* 토글 버튼 애니메이션 */
.accordion_section .header .right svg {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.accordion_section.on .header .right svg {
    transform: rotate(180deg);
}

.accordion_section .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding-top: 5px;
    /* min-height: 55px; */
}

.accordion_section.on .header {
    padding-bottom: 15px;
}
.accordion_section .header .left{
    display: flex;
    align-items: center;
    gap: 10px;
}
.accordion_section .header .left .number{
    background-color: var(--primary-color);
    border-radius: 9999px;
    padding: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'roboto';
    font-size: 12px;
    font-weight: 700;
}
.accordion_section .header .left .section_title{
    display: flex;
    align-items: center;
    gap:8px;
    font-size: 16px;
    font-weight: 500;
}

.accordion_section .header .right{
    display:flex;
    align-items: center;
    gap:10px;
}
.accordion_section .header .right .progress_area{
    display: flex;
    align-items: center;
    gap:10px;
    font-size: 12px;
}
.accordion_section .header .right .progress_area .progress_text{
    font-size: inherit;
}

.accordion_section .body{
    opacity: 0;
    transition: opacity .3s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.accordion_section.on .body{
    opacity: 1;
}

.accordion_section .body .field{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    margin-top: 0;
}
.accordion_section .body .field input{
    font-size: 14px;
}
.accordion_section .body .field input[type="radio"]{
    width: 20px;
    height: 20px;
}

.accordion_section .body .field .include_text_input_cont{
    display: flex;
    border: 1px solid var(--line-color);
    border-radius: 5px;
    padding: 9px 10px;
    align-items: center;
    font-size: 14px;
    gap: 20px;
    width: 100%;
}
.accordion_section .body .field .include_text_input_cont input{
    border: none;
    text-align: right;
    height: auto;
    line-height: 1;
    font-size: 14px;
    padding: 0;
    flex: 1;
    background: none;
    border-radius: 0;
}
.accordion_section .body .field .include_text_input_cont input::placeholder{
    text-align: right;
}


.accordion_section .body .field .field_title{
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    gap:5px;
    color: #444C67;
    
}
.accordion_section .body .field .field_title.col{
    display: flex;
    flex-direction: column;
    gap:7.5px;
    align-items: flex-start;
}
.accordion_section .body .field .field_title.col .field_desc{
    font-size: 12px;
    color: var(--color-text-soft);
    line-height: 20px;
    font-weight: 400;
}
.accordion_section .body .field .div_cp_blog_link .field_desc{
    color: var(--color-text-soft);
    padding-top: 10px;
    font-size: 12px;
}
.accordion_section .body .field .field_title img{
    max-width: 16px;
}
.accordion_section .body .field #cp_opt_list > .field_title{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap:7.5px;
}
.accordion_section .body .field .tip{
    font-size: 12px;
    font-weight: 400;
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    cursor: pointer;
    display:inline-block;
    padding: 0;
}
.accordion_section .body .field_title .required{
    color: var(--pink-100-color,#DA2872);
}

.accordion_section .body .field #div_total_order{
    flex-direction: row;
    align-items: center;
    background-color: var(--bg-sky);
    padding: 11px 20px;
    border-radius: 10px;
    line-height: 1;
    gap:0;
}
.accordion_section .body .reporter_type_cont.field #div_total_order{
    order: 2;
}
.accordion_section .body .field #recruit_mb{
    max-width: 90px;
    width: 100%;
}
.accordion_section .body .field #div_total_order .field_value{
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}
.accordion_section .body .field #div_total_order input{
    background: none;
    border: none;
    padding: 0;
    height: auto;
    min-width: auto;
    width: auto;
    max-width: 50px;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 1px;
}

.accordion_section .check-area{
    gap:10px;

}
.accordion_section .checkBox3 input + label{
    background-color: #fff;
    color: #7D7D7D;
    border: 1px solid #E4E8EE;
    border-radius: 5px;
    padding: 10px 12px;
    line-height: 1;
    font-size: 14px;
    background-image: none !important;
    display: flex;
    gap: 5px;
}
.accordion_section .review_type_cont .checkBox3 input + label{
    padding: 10px 12px;
}
.accordion_section .review_type_cont .checkBox3 input + label img{
    max-width: 20px;
}

.accordion_section .checkBox3 input:checked + label{
    border-color: var(--primary-color);
    color: var(--primary-color);
}
/* 아래 2 css는 적용 후 원본 스타일링 제거 */
.accordion_section .check-area li:first-child .checkBox3 input + label{
    border-radius: 5px;
}
.accordion_section .check-area li:last-child .checkBox3 input + label{
    border-radius: 5px;
}

.accordion_section .body .desc_cont{
    width: 100%;
}

.accordion_section .mission-price-area{
    background-color: var(--bg-sky);
    font-size: 14px;
    padding: 12px 10px;
    gap: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap:16px;
}

.accordion_section .mission-price-area .mission-total{
    border-right: none;
    padding: 0;
    min-width: auto;
    display: flex;
}
.accordion_section .mission-price-area .mission-detail{
    font-size: 12px;
    padding:0;
    color: #888;
}
.accordion_section .mission-price-area .price_area_cont{
    display: flex;
    flex-direction: column;
    gap:8px;
}

.accordion_section .mission-price-area .unlimit_info_cont{
    position: relative;
    width: 100%;
}
.accordion_section .mission-price-area .unlimit_info_cont .unlimit_info_btn{
    background: var(--cta-gradient);
    padding: 12px 14px;
    border: none;
}

.accordion_section .mission-price-area .unlimit_info_cont .tooltip_cont{
    position: absolute;
    bottom: -42px;
    text-align: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: calc(245px + 24px);
    box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.12)
}
.accordion_section .mission-price-area .unlimit_info_cont .tooltip_cont .text{
    font-size: 12px;
    font-weight: 400;
    color: #006F84;
}
.accordion_section .mission-price-area .unlimit_info_cont .tooltip_cont .text b{
    font-weight: 500;
}
.accordion_section .mission-price-area .unlimit_info_cont .tooltip_cont::before{
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #fff;
    box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.12);
    z-index: 1;
}


.accordion_section .field .field-tit{
    font-size: 14px;
    color: #444c67;
}
.accordion_section .guideTxt{
    margin-bottom: 10px;
    font-size: 12px;
    color: #7D7D7D;
    display: inline-block;
    line-height: 1.4;
    padding: 0 10px;
}
.accordion_section .recommend_info_cont{
    /* display: none; */
    background-color: var(--bg-yellow);
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #7D7D7D;
    margin-bottom: 15px;
}
.accordion_section .recommend_info_cont.on{
    display: block;
}


.accordion_section .select_area{
    display: flex;
    gap:10px;
    width: 100%;
    align-items: center;
    font-size: 14px;
}

.accordion_section .select_area .ui-button{
    padding: 12px 5px;
    font-size: 14px;
    max-width: 88px;
}
.accordion_section .select_area select{
    font-size: 14px;
    padding: 9px 10px;
    height: auto;
    border-radius: 5px;
}
.accordion_section .select_area select #brand_opt_default{
    color: #B7BECD;
}


.accordion_section .body .field.zipcode_cont{
    gap: 10px;
    min-height: auto;
    width: 100%;
}
.accordion_section .body .field.zipcode_cont .addr1_cont{
    display: flex;
    gap:10px;
    align-items: center;
    width: 100%;
}
.accordion_section .body .field.zipcode_cont .ui-button{
    max-width: 80px;
    height: 48px;
    padding: 0;
    font-size: 14px;
}
.accordion_section .body .field.zipcode_cont .addr1_cont input{
    color: #999;
    font-size: 14px;
    height: auto;
    padding: 9px 12px;
    line-height: 1;
    width: 100%;
    border-color: #E7E7E7;
    background-color: #F5F5F5;
}
.accordion_section #section_place_info{
    padding-top: 10px;
}
.accordion_section #section_place_info article{
    display: flex;
    flex-direction: column;
    gap:25px;
}

#hr_opt{
    margin: 10px 0;
}

.accordion_section #cp_opt_list{
    width: 100%;
}

.accordion_section .opt_cont{
    display: flex;
    align-items: flex-end;
    gap: 15px;
    width: 100%;
    flex-direction: column;
}
.accordion_section .opt{
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 20px;
    border: 1px solid var(--line-color);
    border-radius: 15px;
    width: 100%;
    box-shadow: var(--box-shadow);
}

.accordion_section .opt_cont .opt + .field{
    display: flex;
    width: 100%;
    flex-direction: row;
}
.accordion_section .opt_cont .opt + .field > div{
    flex: 1;
}

.accordion_section .opt_cont .ui-button{
    font-size: 14px;
    padding: 12px 10px;
}
.accordion_section .opt_cont .ui-button .text{
    gap:5px;
}

.accordion_section .point_set_cont{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap:10px;
}

.accordion_section .point_set_cont .btn-group{
    display: flex;
    gap:4.5px;
    width: 100%;
}
.accordion_section .point_set_cont .btn-group button{
    flex:1;
}
.field.cp_add_reward .btn-group button{
    height: 43px;
    align-items: center;
    padding: var(--spacing-8) var(--spacing-12);
    display: flex;
    justify-content: center;
    background: var(--color-surface-default);
    font: var(--font-body-s-medium);
    border: 1px solid var(--color-border-brand);
    color: var(--color-content-brand);
    border-radius: var(--radius-8);
    margin-right: var(--spacing-8);
    gap: var(--spacing-8);
    box-shadow: none;
    /* min-width: initial;
    font-size: 14px;
    font-weight: 500;
    height: auto;
    line-height: 1;
    padding: 10px 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--border-round-S);
    box-shadow: none;
    justify-content: center; */
}
.field.cp_add_reward .btn-group button svg {
    width: 16px;
    height: 16px;
}
.field.cp_add_reward .btn-group button svg path {
    fill: var(--color-content-brand);
}
.accordion_section .point_set_cont .btn-group button.btn-white{
    border: 1px solid #E4E8EE;
}


.accordion_section .body .reporter_type_cont.field .opt{
    border: none;
    padding: 0;
    box-shadow: none;

}

.accordion_section .body .reporter_type_cont.field .opt .sub_opt_price,
.accordion_section .body .reporter_type_cont.field .opt .div_opt_price{
    display: none;
}


.accordion_section #div_cp_quick_recruit_use .field-group{
    display: flex;
    gap:25px;
}
.accordion_section #div_cp_quick_recruit_use .field-group .field{
    min-height: auto;
}
.accordion_section #div_cp_quick_recruit_use #div_cp_yoil{
    margin-top: 20px;
}

.accordion_section #div_cp_condition{
    padding-top: 0;
}
.accordion_section #div_cp_condition textarea{
    min-height: 80px;
    padding: 15px;
}

.accordion_section .div_detail_set_cont{
    padding: 15px;
    /* background-color: #F4F5F9; */
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 10px;
}
.accordion_section .body .div_detail_set_cont input{
    background-color: transparent;
    
}
.accordion_section .div_detail_set_cont .field{
}

.accordion_section .div_detail_set_cont .field_title{
    max-width: 200px;
    width: 100%;
}

.accordion_section #cp_contents_day {
    background-color: transparent;
    max-width: 90px;
    width: 100%;
    background: url(../img/select_arrow.svg) calc(100% - 17px) 50% no-repeat;
}
.accordion_section #div_cp_contents_day .rv_cp_contents_edatetime_text .field_title{
    width: auto;
}


.accordion_section .body .field .tag_area .input_area{
    display: flex;
    align-items: center;
    gap: 10px;
}
.accordion_section .body .field .tag_area{
    width: 100%;
}

.accordion_section .body .field .tag_area .input_area input{
    max-width: 420px;
    flex: 1;
}
.accordion_section .body .field .tag_area .input_area button{
    padding: 13px 16px;
}
.accordion_section .body .field .tag_area .input_area button .text{
    letter-spacing: 2px;
}

.accordion_section .body .field .radio_group{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 27px;
}

.accordion_section .body .field .guide_area{
    width: 100%;
}
.accordion_section .body .field .guide_area textarea{
    min-height: 250px;
    padding: 15px;
    line-height: 1.4;
    font-size: 13px;
}
.accordion_section .body .field .guide_area textarea::placeholder{
    color: var(--placeholder-color);
}
.accordion_section .body .thumbnail.field .img_required_select_area .notice{
    margin-top: 15px;
}

.accordion_section .body .thumbnail.field .notice{
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    width: 100%;
}
.accordion_section .body .thumbnail.field .notice div{
    color: #666;
}




#div_cp_sdate_noti, #div_cp_edate_noti{
    min-height: auto;
    padding-top: 10px;
    gap:5px;
    font-size: 12px;
    color: #444C67;
    flex-direction: row;
}
/* #div_cp_sdate_noti svg{
    margin-top: 5px;
} */
.accordion_section.detail_setting_area .field .field_title{
    display: flex;
    align-items: center;
    gap: 10px;
}


.duplication_section .selectBox__ .list__ li{
    border-bottom: 1px solid var(--line-color);
}
.duplication_section .selectBox__ .list__ li:last-child{
    border-bottom: none;
}
.duplication_section .selectBox__ .list__ li.search_box{
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}
.duplication_section .selectBox__ .list__ li.search_box svg{
    position: absolute;
    top:50%;
    right: 20px;
    transform: translateY(-50%);

}

.accordion_section .shop_text_check_area{
    display: flex;
    column-gap: 25px;
    row-gap: 10px;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.accordion_section .body.hr{
    gap:25px;
}
.accordion_section .body.hr .field{
    padding-bottom: 25px;
    border-bottom: 1px solid var(--line-color);
}
.accordion_section .body.hr .field:last-child{
    border-bottom: none;
    padding-bottom: 0;
}

.accordion_section .body .photo_check_area{
    display: flex;
    align-items: center;
    gap:25px;
}
.accordion_section .body .photo_check_area .left_box{
    display: flex;
    align-items: center;
}
.accordion_section .body .photo_check_area .left_box .checkBox{
    line-height: 1;
}
.accordion_section .body .photo_check_area #cp_shop_mission_photo_use + label{
    height: 20px;
}
.accordion_section .body .photo_check_area .photo-inner{
    margin-left: 0;
    font-size: 14px;
}

.accordion_section .body .field label{
    font-size: 14px;
}

.accordion_section .body .field.gudie .notice{
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap:10px;
    width: 100%;
}
.accordion_section .body .field.gudie .notice div{
    color:#666;
}
.accordion_section .body .field.gudie .notice .head{
    display:flex;
    align-items: center;
    gap: 5px;
    position:initial;
}

.accordion_section .body .field .checkBox_area{
    display: flex;
    align-items: center;
    gap:25px;
}
.accordion_section .body .field .text_num_area{
    font-size: 18px;
}
.accordion_section .body .field .div_opt_btn_cont{
    flex-direction: row;
}
.accordion_section .body .field .div_opt_btn_cont > div{
    flex: 1;

}

.accordion_section.campaign_load_area .header .left .number,.accordion_section.detail_setting_area .header .left .number{
    background-color: #888;
}

.section-area .notice_area{
    flex-direction: column;
    align-items: flex-start;
    gap:25px;
}

.section-area .notice_area .top.fxg{
    width: 100%;
}

.section-area .notice_area .field_title{
    font-size: 16px;
    font-weight: 500;
    color: #444C67;
    padding-bottom: 10px;
    line-height: 1;
}
.section-area .notice_area .notice_title{
    font-size: 14px;
    padding-bottom: 5px;
    color: #444C67;
}
.section-area .notice_area .borderBox{
    font-size: 12px;
    /* margin-left: 34px; */
    color: #666666;
    padding: 10px 10px;
    background-color: var(--bg-gray);
    border-radius: 10px;
    width: 100%;
}
.section-area .notice_area .borderBox .guideText{
    width: 100%;
    font-size: 12px;
}
.section-area .notice_area .borderBox .guideText p {
    padding-bottom: var(--spacing-8);
    font: var(--font-caption-m);
}
.section-area .notice_area .borderBox .guideText p:last-child{
    padding-bottom: 0;
}





















/* 동그란 Progress Bar 스타일 */
.circular-progress {
    width: 16px;
    height: 16px;
    position: relative;
}

.progress-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#3CCBDB 0deg, #3CCBDB 180deg, #e9ecef 180deg, #e9ecef 360deg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress-text-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: #3CCBDB;
    z-index: 1;
}

/* 진행률에 따른 동적 스타일 */
.circular-progress .progress-circle {
    --percentage: 0;
    --progress-color: #3CCBDB;
    --bg-color: #e9ecef;
    background: conic-gradient(
        var(--progress-color) 0deg, 
        var(--progress-color) calc(var(--percentage) * 3.6deg), 
        var(--bg-color) calc(var(--percentage) * 3.6deg), 
        var(--bg-color) 360deg
    );
    transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* 진행률에 따른 색상 변화 (선택사항) */
.circular-progress[data-percentage="100"] .progress-circle {
    --progress-color: #28a745; /* 완료시 초록색 */
}

.circular-progress .progress-circle:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease, background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


#modal-brand .brandAdd input{
    height: auto;
    padding: 11px 10px;
}
#modal-brand .brandAdd button{
    font-size: 18px;
    padding: 14px 0;
}
#modal-brand .brandList h2{
    text-align: center;
    padding-bottom: 20px;
}

.step_btn_group{
    gap:20px;
}
.step_btn_group button{
    font-size: 20px;
    padding: 19px 10px;
    max-width: 206px;
    border-radius: var(--border-round-L);
}
.step_btn_group button .text{
    gap: 12px;
}



.tag_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 5px;
    gap:10px;
}

.tag_list span {
    position: relative;
    height: 27px;
    /* margin-right: 10px; */
    line-height: 27px;
    padding: 0 26px 0 10px;
    font-size: 12px;
    letter-spacing: -0.48px;
    text-align: center;
    color: #3ccbdb;
    border-radius: 5px;
    border: solid 1px #3ccbdb;
    background-color: #fff;
    box-sizing: border-box;
    margin-bottom: 0;
    margin-top: 0;
}

.tag_list span::before {
    content: "#";
    font-size: 12px;
    letter-spacing: -0.48px;
    text-align: center;
    color: #3ccbdb;
}
.tag_list.keyword span::before {
    content: "";
}

.tag_list a {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 18px;
    height: 18px;
    background: url("https://assaview.co.kr/biz/mob/img/tag_close.svg") center no-repeat;
    cursor: pointer;
}

#modal-guide-example .body h5{
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 20px;
}
#modal-guide-example #guide_type{
    width: 100%;
    height: auto;
    padding: 15px;
    line-height: 1;
    border-radius: var(--border-round-S);
}
#modal-guide-example .guide_content{
    width: 100%;
}
#modal-guide-example .guide_info{
    font-size: 12px;
    font-weight: 400;
    padding-top: 20px;
    line-height: 1.4;
}

#modal-guide-example .guide_area{
    padding-top: 10px;
}
#modal-guide-example .guide_area textarea{
    padding: 15px;
    width: 100%;
    border-radius: var(--border-round-S);
    line-height: 1.4;
    height: 40dvh;
}

.field #tagWrap{
    gap:10px;
}
.field #tagWrap .tagBox{
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
}
.field #tagWrap .tagBox a{
    padding-left: 0;
}

.payment_info .item_cont{
    display: flex;
    flex-direction: column;
    gap:5px;
}
/* .payment_info .item_cont .item{
    line-height: 1;
} */
.payment_info .item.sale .item_price{
    font-size: 14px;
    font-weight: inherit;
}
.payment_info .item:not(.sale){
    font-weight: 500;
}
.payment_info .item .name{
    display: flex;
    align-items: center;
    font-size: inherit;
    line-height: 1;
    gap: 5px;
}
.payment_info .item .name .ui-tooltip{
    height: 12px;
}

.payment_area .kmong_cont{
    display: flex;
    flex-direction: column;
    gap:10px;
    padding-top: 10px;
}

.payment_area #cp_kmong_num{
    height: auto;
    padding: 7px 10px;
    border-radius: var(--border-round-S);
    text-align: center;
}
.payment_area #cp_kmong_num::placeholder{
    text-align: center;
}

.accordion_section .body .field input[name="cp_type_group"]{
    position: absolute;
    opacity: 0;
}
.accordion_section .body .field input[name="cp_opt_condition"] + label{
    margin-left: auto;
}
.accordion_section .body .field input[name="cp_opt_condition"] + label + .ui-tooltip{
    height: 14px;
}
.checkBox3{
    position: relative;
}
.checkBox3 input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 10;
}

.check-area{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.accordion_section .check-area{
    gap:10px;
}


.opt_condition .checkBox{
    display: flex;
    gap: 5px;
    align-items: center;
    line-height: 1;
}
.opt_condition .checkBox input{
    position: static;
    padding: 0;
}

.btn-group .btn-blue {
    color: #fff;
    background-color: #3CCBDB;
    box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
    -webkit-box-shadow: 0px 10px 20px rgba(60,203,219,0.2);
}

.accordion_section .body .field .notice{
    font-size: 12px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}
.accordion_section .body .field .notice svg{
    /* position: absolute;
    left: 0;
    top:1px; */
}
.phone-area{
    width: 100%;
}

.dateTime{
    width: 100%;
}

.dateTime input[type="text"] {
    position: relative;
    padding-left: 47px;
    background-image: url(../../STATIC/img/icon/calendar_icon_black.svg);
    background-repeat: no-repeat;
    background-position: left 16px top 50%;
}

.accordion_section .div_detail_set_cont .field.rv_cp_contents_edatetime_text{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}


/* 진행요일 */
.week-area {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
}
.week-area li {
    text-align: center;
    font-size: 12px;
}
.week-area li .checkBox input{
    padding: 5px;
}
.week-area li .checkBox input + label {
    padding-left: 15px;
    display: initial;
}

.div_noti{
    font-size: 12px;
    padding-top: 10px;
    display: flex;
    gap:5px;
}



/* upload */
.btn-upload {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.btn-upload input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.btn-upload input + label {
    display: inline-block;
    line-height: 1em;
    width: 100%;
    height: 100%;
}
.promo-img-cont{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.promo-img-area {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.promo-img-area + .promo-img-area {
    /* margin-left: 20px; */
}
.promo-img-area .item {
    width: 60px;
    height: 60px;
    border: 1px solid #E4E8EE;
    background-image: url(https://assaview.co.kr/biz/mob/img/add_ico.svg);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
}
.promo-img-area .item .btn-upload {
    width: 100%;
    height: 100%;
}
.promo-img-area .item img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}
.promo-img-area .item:nth-child(3n) {
    margin-right: 0;
}

.promo-img-area .item .remove_img_thumbnail{
position: absolute;
z-index: 99;
top: 5px;
right: 5px;
background: rgba(0,0,0,0.3);
height: 20px;
}

.promo-img-area .item .remove_img_thumbnail img{
vertical-align: baseline;
}

.promo-img-area .item .remove_img{
position: absolute;
z-index: 99;
top: 5px;
right: 5px;
background: rgba(0,0,0,0.3);
height: 20px;
}

.promo-img-area .item .remove_img img{
vertical-align: baseline;
}

#cp_blog_text_num{
    max-width: 174px;
}


.field-bg {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 60px;
    flex-grow: 1;
    background-color: #F4F5F9;
    border-radius: 5px;
    padding: 0 22px;
}
.field-bg .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 460px;
}
.field-bg .item + .item {
    padding-left: 13px;
}


.paymentInfo img {
    vertical-align: middle;
    margin-right: 5px;
}
.paymentInfo td {
    height: 64px;
    font-size: 16px;
    border-bottom: 1px solid #EDEDED;
    color: #444444;
}
.paymentInfo td:first-child {
    font-weight: 500;
    color: #222222;
}

.paymentInfo .price {
    color: #3CCBDB;
}

.paymentInfo .price.cancel {
    text-decoration: line-through;
    color: #444;
    font-size: 16px;
}
.paymentInfo .price b {
    font-size: 22px;
    font-weight: 700;
}
.paymentInfo .price.cancel b {
    font-size: 16px;
    font-weight: 500;
}
.paymentInfo .newPrice {
    color: #3CCBDB;
    font-size: 22px;
    font-weight: 700;
    padding-left: 8px;
}

.paymentInfo .couponBtn{
    border: 1px solid #ccc;
    background: #fff;
    padding: 5px 10px;
    cursor: pointer;
}
.paymentInfo .method_list .checkBox{
margin-right: 10px;
}
.paymentInfo .method_list .checkBox:last-child{
margin-right: 0;
}


.payment_info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    }
    
    .payment_info .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    }
    .payment_info .item.sale{
    color: #3969EF;
    font-size: 14px;
    padding-left: 20px;
    }
    
    .payment_area .btn_cont{
    padding: 20px 0 ;
    display: flex;
    /*    flex-direction: column;*/
    gap:10px;
    }
    
    .payment_area .btn_cont button{
    padding: 10px;
    width: 100%;
    border-color: #888;
    font-weight: 400;
    }

    .payment_info .item.simple_pay_fee{
        font-size: 14px;
        padding-left: 20px;
    }
    .payment_info .item.simple_pay_fee .item_price{
        font-size: 14px;
        font-weight: 400;
    }
    .payment_info .item.simple_pay_fee .name{
        font-weight: 400;
    }
    
    
    .final_price{
    background: #ECF9FB;
    padding: 20px 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    }
    .final_price .text{
    font-weight: 600;
    font-size: 16px;
    }
    .final_price .text small{
    font-weight: 400;
    font-size: 14px;
    }
    
    .total_price strong{
    font-size: 16px;
    color: var(--primary-color);
    }
    
    .field-flex-col-bg{
    display: flex;
    flex-direction: column;
    gap:15px;
    }
    
    .field-flex-col-bg .field-bg{    
    padding: 15px;
    width: 100%;
    }
    
    
    .field-flex-col-bg .paymentInfo{
    
    }
    
    .field-flex-col-bg .paymentInfo table{
    /*    border-bottom: 1px solid #E4E8EE;*/
    }
    .field-flex-col-bg .paymentInfo .method_list{
        /* padding-top: 0;
        padding-bottom: 18px; */
    }
    .field-flex-col-bg .paymentInfo td:first-child{
        max-width: 100px;
        font-weight: 400;
        min-width: 80px;
        font-size: 14px;
    }
    .field-flex-col-bg .paymentInfo td,.field-flex-col-bg .tax_info td{
    border: none;
    height: auto;
    padding: 10px 0 ;
    }
    .field-flex-col-bg .paymentInfo #deposit_price{
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    }
    .field-flex-col-bg .paymentInfo td input,.field-flex-col-bg .tax_info td input{
    /*    max-width: 300px;*/
    background-color: #fff;
    }
    
    .field-flex-col-bg .paymentInfo label{
    font-weight: 400;
    }
    
    .field-flex-col-bg .tax_info td input[name="tax_save"]{
    max-width: none;
    }
    
    .field-flex-col-bg .paymentInfo .guideTxt{
    padding-top: 18px;
    border-top: 1px solid #E4E8EE;
    width: 100%;
    font-size: 12px;
    color:#888;
    }
    
    
    .field-flex-col-bg .first_td{
    font-weight: 700;
    
    }
    .field-flex-col-bg .first_td:has(input:checked){
    border-bottom: 1px solid #E4E8EE;
    }
    
    .field-flex-col-bg .tax_info > div{
    display: flex;
    /*    flex-direction: column;*/
    width: 100%;
    align-items: center;
    }
    .field-flex-col-bg .tax_info > div.first_td{
    padding: 10px 0 ;
    }
    .field-flex-col-bg .tax_info .first_td > div:last-child{
    flex:1;
    }
    .field-flex-col-bg .tax_info > .tr_cash div:last-child{
    flex: 1;
    }
    .field-flex-col-bg .tax_info div.tr_tax,.field-flex-col-bg .tax_info div.tr_cash_personal,.field-flex-col-bg .tax_info div.tr_cash_business,.field-flex-col-bg .tax_info div.tr_cash{
        display: flex;
        align-items: flex-start;
        gap:10px;
        flex-direction: column;

    }
    .field-flex-col-bg .tax_info div.tr_tax div,.field-flex-col-bg .tax_info div.tr_cash_personal div,.field-flex-col-bg .tax_info div.tr_cash_business div,.field-flex-col-bg .tax_info div.tr_cash div{
        width: 100%;
    }
    .field-flex-col-bg .tax_info div.tr_tax div:last-child,.field-flex-col-bg .tax_info div.tr_cash_personal div:last-child,.field-flex-col-bg .tax_info div.tr_cash_business div:last-child,.field-flex-col-bg .tax_info div.tr_cash:last-child{
    flex: 1;
    }
    
    .field-flex-col-bg .field-bg .tax_info{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

    
.account_info{
    /* width: fit-content; */
    width: 100%;
    text-align: left;
    margin-left: auto;
    line-height:1.8;
    /* background: #ECF9FB; */
    border-radius: 10px;
}

.account_info .account{
    display: flex;
    gap:10px;
    align-items: center;
}
.account_info button{
    padding: 7px 12.5px;
    background: transparent;
    border-color: #888;
    line-height: 1;
    font-size: 12px;
}
.div_cp_blog_link{
    width: 100%;
}


.field-flex-col-bg .paymentInfo .method_list{
    display: flex;
    align-items: flex-end;
    gap:15px;
    padding-top: 0;
}

.paymentInfo .method_list .checkBox{
    line-height: 1;
}
.method_list .checkBox input + label{
    background-position: left bottom;
    line-height: 20px;
}
.method_list ._card label{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    line-height: 1;
    gap:0;
}

.method_list ._card label .new_label{
    background: var(--pink-100-color);
    border-radius: 9999px;
    padding: 0px 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
}




.payment_area .unlimit_info_cont{
    background-color: #fff;
    background-image: var(--gradient-banner-color);
    padding: 28px 20px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.payment_area .unlimit_info_cont .unlimit_info_cont_inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:12px;
    width: 100%;
    
}

.payment_area .unlimit_info_cont .unlimit_info_cont_inner .text_area{
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    text-align: center;
}
.payment_area .unlimit_info_cont .unlimit_info_cont_inner .text_area > span{
    color: var(--pink-100-color);
    font-weight: inherit;
}
.payment_area .unlimit_info_cont .unlimit_info_cont_inner .text_area img{
    position: absolute;
    right: 5px;
    bottom: -6px;
}
.payment_area .unlimit_info_cont .unlimit_info_cont_inner .btn_area{
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap:8px;
    width: 100%;
}
.payment_area .unlimit_info_cont .unlimit_info_cont_inner .btn_area p{
    font-size: 12px;
    font-weight: 400;
    color: #767676;
}
.payment_area .unlimit_info_cont .unlimit_info_cont_inner .btn_area button{
    font-size: 18px;
    font-weight: 700;
    padding: 13px 15px;
    border-radius: 5px;
    border: none;
}

.accordion_section#section1 .price_info_cont:not(.displaynone):has(.unlimit_info_cont){
    padding-bottom: 27px;
}



/* ========== Plan Container ========== */
/* .section-area:has(.price_container){
    display: flex;
    flex-direction: column;
    gap:62px;
} */
.section_container{
    max-width: 1063px;
    margin: 0 auto;
}
.plan_container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
}

.plan_container .plan_item {
    position: relative;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    padding: 32px 24px 24px;
    min-width: 260px;
    flex: 1;
    background: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    max-width: 334px;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-8);
    gap:40px;
}
.plan_container .plan_item:last-child{
    max-width: 367px;
    background: radial-gradient(135.47% 74.25% at -30.58% 83.31%, rgba(60, 203, 219, 0.15) 0%, rgba(60, 203, 219, 0) 66.3%) ,
    radial-gradient(87.22% 47.51% at 137.22% 8.45%, rgba(255, 107, 168, 0.15) 0%, rgba(255, 107, 168, 0) 100%) ,
    radial-gradient(55.31% 83.79% at -1.56% 100%, rgba(255, 178, 154, 0.05) 0%, rgba(255, 178, 154, 0) 100%);


}

.plan_container .plan_item .top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 270px;
}

.plan_container .plan_item .plan_item_title {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan_container .plan_item .plan_title {
    font-weight: 700;
    font-size: 18px;
    color: var(--color-text-strong);
    letter-spacing: -0.6px;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan_container .plan_item .description {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-soft);
    letter-spacing: -0.48px;
}

.plan_container .plan_item .plan_item_content {
    display: flex;
    /* flex-direction: column; */
    gap: 6px;
}
.plan_container .plan_item.unlimited .plan_item_content{
    gap:20px;
}
.plan_container .plan_item.unlimited .price_row{
    padding: 0;
    flex-direction: column;
    max-width: 147px;
    width: 100%;
}

.plan_container .plan_item .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.24px;
    width: fit-content;
}

.plan_container .plan_item .chip.magenta {
    background-color: var(--color-point-weak);
    color: var(--color-point);
}

.plan_container .plan_item .chip.primary {
    background-color: rgba(54, 183, 197, 0.12);
    color: var(--color-primary-dark);
}

.plan_container .plan_item .price {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    cursor: initial;
}

.plan_container .plan_item .price span {
    font-weight: 700;
    font-size: 24px;
    color: var(--color-text-strong);
    letter-spacing: -0.6px;
    line-height: 1;
}
.plan_container .plan_item .price span.point_price{
    color: var(--color-point);
}
.plan_container .plan_item small{
    font-size: 14px;
    color: var(--color-text-soft);
    line-height: 1;
}

.plan_container .plan_item .price .unit {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-soft);
    letter-spacing: -0.32px;
    padding-bottom: 2px;
}


/* Badge (추천, 인기) */
.plan_container .plan_item .badge {
    position: absolute;
    top: -16px;
    right: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8.5px 15.5px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
    line-height: 1;
}

.plan_container .plan_item .badge.recommend {
    background-color: #ecedf0;
    color: #444c67;
}

.plan_container .plan_item .badge.popular {
    background-color: #fbe9f1;
    color: #da2872;
}

/* Bottom Section */
.plan_container .plan_item .bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:8px;
    height: 100%;
}

.plan_container .plan_item .review_item_container {
    display: flex;
    flex-direction: column;
    min-height: 138px;
}

.plan_container .plan_item .review_item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed #e6e6e6;
    line-height: 1;
    height: 46px;
}
.plan_container .plan_item .review_item:has(.review_item_area){
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    justify-content: flex-start;
    padding: 12px 0 ;
}

.plan_container .plan_item .review_item:last-child {
    border-bottom: none;
}
.plan_container .plan_item .review_item .review_item_area{
    display: flex;
    align-items:center;
    gap: 8px;
    
}
.plan_container .plan_item .review_item .plus{
    font-size: 16px;
    color: var(--color-text-strong);
    padding: 0 4px;
    font-weight: 500;
}
.plan_container .plan_item .review_item .sns_text{
    font-size: 12px;
    color: var(--color-text-soft);
}

.plan_container .plan_item .review_item .icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}



.plan_container .plan_item .review_item .icon_group {
    display: flex;
    align-items: center;
    padding-right: 4px;
}

.plan_container .plan_item .review_item .icon_group .icon {
    margin-right: -4px;
}
.plan_container .plan_item .review_item .icon_group img{
    max-width: 22px;
    height: 22px;
}

.plan_container .plan_item .review_name {
    font-weight: 500;
    font-size: 16px;
    color: var(--color-text-strong);
    letter-spacing: -0.8px;
}

/* Button */
.plan_container .plan_item .button_container {
    margin-top: auto;
}

.plan_container .plan_item .button_item {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -1px;
    cursor: pointer;
}

.plan_container .plan_item .button_item.primary-weak {
    background-color: var(--color-primary-weak);
    color: var(--color-primary);
}

/* .plan_container .plan_item .button_item.primary-weak:hover {
    background-color: var(--color-primary-weak1);
    color: #fff;
} */

.plan_container .plan_item .button_item.primary-gradient {
    background: var(--cta-gradient-blue);
    color: #fff;
    line-height: 1;
}

/* .plan_container .plan_item .button_item.primary-gradient:hover {
    opacity: 0.9;
} */

/* 무제한 이용권 전용 스타일 */
.plan_container .plan_item.unlimited .top {
    height: 100%;
    gap:32px;
    min-height: initial;
}

/* .plan_container .plan_item.unlimited .bottom {
    height: auto;
} */

.plan_container .plan_item .price_row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    align-items: flex-start;
    padding: 16px 0 0 0;
    border-top: 1px solid transparent;
}

.plan_container .plan_item .price_row:first-child {
    padding-top: 0;
    border-top: none;
}

.plan_container .plan_item .price_row .price_info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan_container .plan_item .price_row .price_with_discount {
    display: flex;
    align-items: center;
    gap: 4px;
}

.plan_container .plan_item .price_row .discount_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 6px 8px; */
    border-radius: 3px;
    /* background-color: var(--color-point-weak); */
    color: var(--color-point);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.28px;
    line-height: 1;
}

/* Check list */
.plan_container .plan_item .check_list {
    display: flex;
    flex-direction: column;
    min-height: 138px;
}

.plan_container .plan_item .check_item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    border-bottom: 1px dashed var(--color-border-medium);
}

.plan_container .plan_item .check_item:last-child {
    border-bottom: none;
}

.plan_container .plan_item .check_item .check_icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan_container .plan_item .check_item .check_icon img {
    width: 100%;
    height: 100%;
}

.plan_container .plan_item .check_item .check_text {
    font-weight: 500;
    font-size: 16px;
    color: var(--color-text-strong);
    letter-spacing: -0.8px;
}

.plan_container .plan_item .check_item .check_text .highlight {
    color: var(--color-point);
}

.refund_container{
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    max-width: 1063px;
    margin: 0 auto;
    width: 100%;
    margin-top: 62px;
    padding-top: 40px;
    border-top: 1px dashed var(--color-border-medium);
    word-break: keep-all;
    color: var(--color-text-medium);
}

.refund_container .refund_item h3{
    font: var(--font-body-l);
    padding-bottom: 8px;
    color: var(--color-text-medium);
}
.refund_container .item_container{
    display: flex;
    flex-direction: column;
    gap:4px;
}

.refund_container .item_container .item_title{
    font: var(--font-body-m-medium);
}
.refund_container .item_desc{
    display: flex;
    flex-direction: column;
    gap:4px;
    font: var(--font-body-m-medium);
}
.refund_container .item_desc > div{
    display: flex;
    align-items: center;
    gap:8px;
}
.refund_container .item_desc > div span{
    font: var(--font-body-m-medium);
}

.refund_container .item_desc .example{
    padding-left: 13px;
    color:var(--color-text-soft);
}

.refund_container .refund_item{
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--color-border-medium);
}
.refund_container .refund_item:last-child{
    border-bottom: none;
}


#mobile{
    display: none;
}

@media (max-width: 1184px){
    #desktop{
        display: none;
    }
    #mobile{ 
        display: block;
    }
    .section-area.non-radius{
        border-radius: 0;
    }
    .plan_container{
        flex-direction: column;
        gap: 24px;
        padding: 0;
    }
    
    .plan_container .plan_item,.plan_container .plan_item:last-child{
        max-width: none;
    }
    .plan_container .plan_item{
        order: 1;
        padding: 24px 16px;
        gap:24px;
    }
    .plan_container .plan_item .top{
        min-height: initial;
    }
    .plan_container .plan_item:not(.unlimited) .top{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .plan_container .plan_item .title{
        width: fit-content;
        font-size: 18px;
        font-weight: 500;
    }
    .plan_container .plan_item .description{
        font-size: 14px;
        line-height: 1;
    }
    .plan_container .plan_item .price span{
        font-size: 24px;
        color: var(--color-primary-deep);
    }
    .plan_container .plan_item .price .unit{
        font-size: 14px;
    }
    .plan_container .plan_item .price small{
        font-size: 12px;
    }
    .plan_container .plan_item .chip{
        font-size: 12px;
        padding: 6px 8px;
        line-height: 1;
    }
    .plan_container .plan_item .button_item{
        height: 48px;
    }

    .plan_container .plan_item .badge{
        padding: 6px 8px;
        border-radius: 4px;
        font-weight: 500;
        font-size: 12px;
        line-height: 1;
        display: inline-block;
        position: static;
    }
    

    .plan_container .plan_item.unlimited{
        order: 0;
    }
    .plan_container .plan_item.unlimited .title{
        position: relative;
        display: flex;
        gap:8px;
        align-items: center;
    }
    .plan_container .plan_item.unlimited .badge{
        position: static;
    }
    .plan_container .plan_item.unlimited .plan_item_content{
        flex-direction: row;
        gap:12px;
    }
    .plan_container .plan_item.unlimited .price_row{
        flex:1;
        flex-direction: column;
        gap:7px;
        max-width: none;
    }
    .plan_container .plan_item .price_row .price_info{
        gap:12px;
    }
    .plan_container .plan_item .price_row .discount_badge{
        background-color: transparent;
        padding: 0;
        border-radius: 0;
    }
    .plan_container .plan_item .check_item{
        height: 40px;
    }
    .plan_container .plan_item .check_item .check_text{
        font-size: 14px;
    }

    .plan_container .plan_item #mobile.badge_container{
        display: flex;
        gap:5px;
    }
    .plan_container .plan_item .badge_container{
        position: absolute;
        top: -12px;
        right: 16px;
    }
    .plan_container .plan_item .badge.primary-weak{
        background-color: var(--color-primary-weak);
        color: var(--color-primary-dark);
    }

    .plan_container .plan_item .review_item_container{
        min-height:auto;
    }
    .plan_container .plan_item .bottom{
        gap:12px;
    }
    .button_container{
        margin-top: 24px;
    }
    .button_container a{
        display: block;
        font-size: 18px;
        text-align: center;
        padding: 15px;
        border-radius: var(--radius-8);
        background: var(--color-primary);
        color: var(--color-text-inverse);
        line-height: 1;
        font-weight: 500;
    }
    .plan_container .plan_item .review_item{
        height: 40px;
    }
    .plan_container .plan_item .review_item .icon{
        width: 20px;
        height: 20px;
    }

    .plan_container .plan_item .check_list{
        min-height: auto;
    }

    .plan_container .plan_item .review_name{
        font-size: 14px;
    }

    .refund_container{
        margin-top: 0;
        padding: 16px;
        margin-top: 24px;
        border-top: none;
        background-color: var(--surface-gray-weak);
        border-radius: 24px;
    }

    .refund_container .item_desc > div{
        align-items: flex-start;
    }
    .refund_container .item_desc > div span{
        flex: 1;
    }
    .refund_container .item_desc > div svg{
        height: 22px;
        width: 13px;
    }

}


#div_mb_cp_type{
    display: flex;
}

/* 마수동 모달 관련 스타일링 */
#welcome_modal_agree h1, #welcome_modal_disagree h1{
    color: var(--color-text-strong);
    line-height: 1;
}

#welcome_modal_agree h1 span, #welcome_modal_disagree h1 span{
    color: var(--color-primary);
}
#welcome_modal_agree .info_desc{
    color: var(--color-text-medium);
    font: var(--font-body-m-medium);
}
.modal-dialog #welcome_modal_agree.ui-modal-content .ui-modal-layer .btn_wrap button{
    background-color: var(--color-primary);
    border: none !important;
    padding: 20px 0 ;
}
.modal-dialog #welcome_modal_agree.ui-modal-content .ui-modal-layer .btn_wrap button .text{
    color: #fff;
}

#welcome_modal_disagree .coupon_box_container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 35px 0 40px;
}

.modal-dialog .coupon_box{
    display: flex;
    justify-content: space-between;
    padding: 24px 0 24px 24px;
    border-radius: 20px;
    box-shadow: 0px 8px 20px 2px rgba(0,0,0,0.04);
    width: 100%;
    max-width: 456px;
    border: 1px solid var(--color-border-default);
    gap:16px;
}
.modal-dialog .coupon_box img{
    max-width: 157px;
}


.modal-dialog .coupon_box h2{
    color: var(--color-primary-dark);
    font: var(--font-headline-s-semibold);
    padding-bottom: 16px;
}

.modal-dialog .coupon_box .coupon_name{
    font-weight: bold;
    padding-bottom: 10px;
    color: var(--color-text-strong);
    font: var(--font-title-xs);
    padding-bottom: 16px;
}

.modal-dialog .coupon_box .minPrice, .modal-dialog .coupon_box p{
    font: var(--font-body-s-medium);
    color: var(--color-text-soft);
    letter-spacing: -0.5px;
}
.modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer .term_wrap{
    width: auto;
}
.modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer .drop_btn{
    color: var(--color-primary);
    font-size: 13px;
}
.modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer .dorp_wrap .text{
    white-space: normal;
}
.modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer .dorp_wrap .text span{
    font-size: 13px !important;

}
.modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer,
.modal-dialog #welcome_coupon_modal.ui-modal-content .ui-modal-layer,
.modal-dialog #welcome_coupon_modal_kmong.ui-modal-content .ui-modal-layer{
    padding: 24px 16px 16px 16px;
    max-height: 90dvh;
}
.modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer button{
    padding: 19px 0;
}

.modal-dialog #welcome_coupon_modal.ui-modal-content .ui-modal-layer,
.modal-dialog #welcome_coupon_modal_kmong.ui-modal-content .ui-modal-layer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.modal-dialog #welcome_coupon_modal.ui-modal-content .ui-modal-layer .body,
.modal-dialog #welcome_coupon_modal_kmong.ui-modal-content .ui-modal-layer .body{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-dialog #welcome_coupon_modal.ui-modal-content .ui-modal-layer .btn_wrap,
.modal-dialog #welcome_coupon_modal_kmong.ui-modal-content .ui-modal-layer .btn_wrap{
    width: 100%;
}
.modal-dialog #welcome_coupon_modal.ui-modal-content .ui-modal-layer .btn_wrap button,
.modal-dialog #welcome_coupon_modal_kmong.ui-modal-content .ui-modal-layer .btn_wrap button
{
    background-color: var(--color-primary);
    color:#fff !important;
    padding: 15px 0;
}

#welcome_modal_agree .coupon_box_container{
    display: flex;
    flex-direction: column;
    gap:16px;
    align-items: center;
    padding: 35px 0 15px;
}


#welcome_coupon_modal .coupon_box_container,
#welcome_coupon_modal_kmong .coupon_box_container{
    display: flex;
    flex-direction: column;
    gap:12px;
}
#welcome_coupon_modal .coupon_img_area,
#welcome_coupon_modal_kmong .coupon_img_area{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
#welcome_coupon_modal .coupon_img_area img,
#welcome_coupon_modal_kmong .coupon_img_area img{
    max-width: 122px;
}
#welcome_coupon_modal .coupon_img_area .info_title,
#welcome_coupon_modal_kmong .coupon_img_area .info_title{
    font: var(--font-title-xs);
    color: var(--color-text-strong);
}
#welcome_modal_disagree .info_desc, #welcome_modal_agree .info_desc{
    color: var(--color-text-medium);
    line-height: 20px;
}
#welcome_coupon_modal .info_desc,
#welcome_coupon_modal_kmong .info_desc{
    color: var(--color-text-medium);
    font: var(--font-body-s-medium);
    text-align: center;
    line-height: 20px;
}

.modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer,
.modal-dialog #welcome_modal_agree.ui-modal-content .ui-modal-layer{
    gap:12px;
}


#div_mb_cp_type input[type="radio"]{
    display: none;
}
#div_mb_cp_type input[type="radio"] + label{
    display: inline-block;
    position: relative;
    left: 0;
    top: 0;
    color: #222;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    border: 1px solid var(--line-color);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:0;
    flex: 1;
    border-right: none;
    word-break: keep-all;
    padding: 0 5px;
    margin-top:5px;
}
#div_mb_cp_type input[type="radio"][name="mb_cp_type"]:first-of-type + label{
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
#div_mb_cp_type input[type="radio"][name="mb_cp_type"]:last-of-type + label{
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-right: 1px solid var(--line-color);
}
#div_mb_cp_type input[type="radio"][name="mb_cp_type"] + label span{
    color: #888;
    font-size: 12px;
    line-height: 13px;
}
#div_mb_cp_type input[type="radio"][name="mb_cp_type"]:checked + label span{
    color: var(--primary-color);
}
#div_mb_cp_type input[type="radio"][name="mb_cp_type"]:checked + label{
    border-color: var(--primary-color);
    color: var(--primary-color);
    border-right: 1px solid var(--primary-color);
    
}
#div_mb_cp_type input[type="radio"][name="mb_cp_type"]:checked + label + input + label{
    border-left: none;
}

@media (max-width:800px){
    #welcome_modal_agree .head, #welcome_modal_disagree .head{
        align-items: flex-start;
    }
    #welcome_modal_agree h1, #welcome_modal_disagree h1{
        flex-direction: column;
        align-items: flex-start;
        font: var(--font-title-xs);
    }
    #welcome_modal_agree h1 p, #welcome_modal_disagree h1 p{
        font: inherit;
    }
    #welcome_modal_agree h1 p span, #welcome_modal_disagree h1 p span{
        font-weight: inherit;
    }
    .modal-dialog .coupon_box{
        padding: 16px 0 16px 16px;
    }
    .modal-dialog .coupon_box h2{
        font: var(--font-title-s);
        padding-bottom: 8px;
    }
    .modal-dialog .coupon_box img{
        max-width: 98px;
    }
    .modal-dialog .coupon_box .coupon_name{
        padding-bottom: 8px;
        font: var(--font-body-s-medium);
    }
    .modal-dialog .coupon_box .minPrice, .modal-dialog .coupon_box p{
        line-height: 20px;
    }
    .modal-dialog .coupon_box{
        gap:0;
    }
    .modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer button{
        padding: 16px 0;
    }
    #welcome_modal_disagree .coupon_box_container{
        padding: 24px 0;
    }
    .modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer .drop_btn{
        position: static;
        max-width: fit-content;
        flex: 1;
        padding: 0;
        border: none;
    }
    .modal-dialog #welcome_modal_agree.ui-modal-content .ui-modal-layer .body,
    .modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer .body{
        /* overflow-y:initial; */
    }
    .modal-dialog #welcom_coupon_modal.ui-modal-content .ui-modal-layer button,
    .modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer button,
    .modal-dialog #welcome_modal_agree.ui-modal-content .ui-modal-layer button{
        border-radius: 8px;
    }

    .modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer .btn_wrap{
        padding-top: 12px;
    }

    .modal-dialog #welcome_modal_disagree.ui-modal-content .ui-modal-layer .term{
        align-items: center;
    }

    
}


/* ============================================
   로그인 / 가입 페이지 (PC join.php, login.php 공통)
   ============================================ */
.log_wrap.login_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100dvh - 69px - 67px);
    background: #fff;
}
.log_wrap .title_text {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin: 0 auto 20px;
    width: fit-content;
}
.log_wrap .title_text img {
    max-width: 160px;
    height: auto;
}
.log_wrap .desc_text {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 22px;
    padding-bottom: 24px;
}
.log_wrap .desc_text span {
    color: var(--color-primary, #3CCBDB);
}
.log_wrap #join{
    width: 100%;
}

.log_wrap .form_area {
    width: 100%;
}
.form_area .btn_area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 30px;
}
.form_area .btn_area button,
.form_area .btn_area .btn {
    flex-grow: 1;
    height: 50px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
}
.form_area .useType_ .btn_area .btn{
    height: auto;
    padding: 9px 12px;
    text-decoration: underline;
    font-weight: 500;
    font-size: 14px;
}
.form_area .btn_area .submit {
    background-color: #3CCBDB;
    color: #fff;
}

/* 회원가입 영역 */
.signup_area {
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 20px;
}
.useType_ h5 {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 20px;
    color: #444;
}
.useType_ .check_wrap {
    position: relative;
    height: 50px;
    margin: 0 auto 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
}
.useType_ .check_wrap .check_ {
    top: 0;
    height: 100%;
    max-width: 180px;
    width: 100%;
}
.useType_ .check_wrap .check_ + .check_ {
    right: 0;
    cursor: pointer;
}
.userTypeCheck_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.userTypeCheck_wrap a {
    padding: 16px;
    text-align: center;
    border: 1px solid #3CCBDB;
    border-radius: 10px;
    color: #3CCBDB;
    font-weight: 500;
    flex: 1;
}
.check_ input {
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
    display: none;
}
.check_ input + label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #3CCBDB;
    border-radius: 10px;
    max-width: 180px;
    border: 1px solid #3CCBDB;
    cursor: pointer;
}
.check_ input + label img {
    display: none;
    vertical-align: top;
    margin-right: 8px;
}
.check_ input:checked + label {
    background-color: #3CCBDB;
    color: #fff;
    font-weight: 700;
}
.check_ input:checked + label img {
    display: block;
}

/* SNS 가입 버튼 */
.log_wrap .quick_signup {
}
.log_wrap .quick_signup li + li {
    margin-top: 10px;
}
.log_wrap .quick_signup li:first-child a {
    background: #40A436;
    color: #fff;
}
.log_wrap .quick_signup li:nth-child(2) a {
    background: #FFDF00;
}
.log_wrap .quick_signup li:nth-child(3) a {
    background: #000000;
    color: #fff;
}
.log_wrap .quick_signup li:last-child a.btn {
    border: 1px solid var(--primary-color, #3CCBDB);
    color: var(--primary-color, #3CCBDB);
}
.log_wrap .quick_signup a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
}
.log_wrap .quick_signup a img {
    margin-right: 14px;
    max-width: 24px;
    object-fit: cover;
}
/* OK포스 제휴 체크박스 */
.log_wrap .quick_signup li.okpos_affiliate_check {
    margin-top: 0;
}
.okpos_affiliate_check {
    display: flex;
    align-items: center;
    justify-content: center;
}
.okpos_affiliate_check label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 16px 0;
}
.okpos_affiliate_check input[type="checkbox"] {
    display: none;
}
.okpos_affiliate_check .check_circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 999px;
    background: #f7f8f9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms;
}
.okpos_affiliate_check .check_circle svg path {
    transition: fill 200ms;
}
.okpos_affiliate_check input:checked + .check_circle {
    background: var(--color-surface-brand);
}
.okpos_affiliate_check input:checked + .check_circle svg path {
    fill: #fff;
}
.okpos_affiliate_check span:last-child {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-family-pretendard);
    line-height: 24px;
    letter-spacing: -0.5px;
    color: var(--color-content-default);
}
.log_wrap .quick_signup li.okpos_direct_join_wrap {
    margin-top: 8px;
}
.quick_signup a.okpos_direct_join {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-radius: 8px;
    border: 1px solid var(--primary-color, #3CCBDB);
    color: var(--primary-color, #3CCBDB);
    font-size: 15px;
    font-weight: 500;
}
.log_wrap .btn_area{
    margin-top: 30px;
    padding: 0;
}
.form_area .text_btn_area{
    margin-top: 10px;
    padding: 0;
    text-align: center;

}
.form_area .text_btn_area .text_btn{
    font-size: 14px;
    font-weight: 500;
    padding: 9px 12px;
    text-decoration: underline;
}


/* 로그인 영역 */
.signin_area {
    max-width: 100%;
    padding: 30px 20px;
}
.signin_area .btn_area {
    margin-top: 20px;
}
.signin_area .field_wrap {
    padding-top: 30px;
    border: none;
}
.signin_area .field_area .field {
    background-color: #F5F5FA;
    height: 50px;
    border-radius: 10px;
    padding: 0 16px;
    display: flex;
}
.signin_area .field_area .field input {
    border: none;
    background-color: transparent;
}
.signin_area .field_area .field > label {
    font-size: 14px;
    color: #222;
    width: 70px;
    flex-shrink: 0;
}
.signin_area .field_area + .field_area {
    margin-top: 10px;
}

.signin_area .auto_ {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}
.signin_area .auto_ a {
    font-size: 13px;
    color: #444;
    position: relative;
    display: inline-block;
    line-height: 1;
}
.signin_area .auto_ a:first-child {
    padding-right: 8px;
}
.signin_area .auto_ a:last-child {
    padding-left: 4px;
}
.signin_area .auto_ a:first-child::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #E4E8EE;
}

.signin_area .induce_ {
    text-align: center;
    margin-top: 30px;
}
.signin_area .induce_ h5 {
    font-size: 14px;
    font-weight: 400;
}
.signin_area .induce_ .btn_area {
    margin-top: 14px;
}
.signin_area .induce_ .btn {
    width: 100%;
    border-radius: 10px;
    color: #3CCBDB;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #3CCBDB;
}

.signin_area .naver_help {
    text-align: right;
    padding-top: 30px;
    font-size: 13px;
}
.signin_area .naver_help .under_line span {
    cursor: pointer;
    border-bottom: 1px solid #444;
    color: #444;
}


/* 입력 필드 공통 (가입 폼) */
.signup_area .field_wrap {
    border: none;
    padding-top: 0;
}
.signup_area .field_wrap + .field_wrap {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line-color, #E7E7E7);
}
.signup_area .field_wrap > h5 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #3CCBDB;
}
.signup_area .field_wrap:first-of-type > h5 {
    font-size: 17px;
}
.signup_area .field_area + .field_area {
    margin-top: 10px;
}
.signup_area .field_area .field {
    display: flex;
    justify-content: flex-start;
    border-radius: 8px;
    flex-wrap: wrap;
    width: 100%
}
.signup_area .field_area .field.col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.signup_area .field_area .field > label {
    flex-grow: 1;
    font-size: 14px;
    width: 100%;
}
.signup_area .field_area .field > label .required {
    color: var(--color-point, #FF4444);
}
.signup_area .field_area .field > input:read-only {
    background-color: #F5F5FA;
}
.signup_area .field_area .field > input,
.signup_area .field_area .field > select {
    flex-grow: 1;
    padding: 12px 10px;
    background-color: transparent;
    border-radius: 8px;
    border: 1px solid var(--line-color, #E7E7E7);
    height: auto;
    font-size: 14px;
    width: 100%;
    min-width: 0;
    margin-top: 5px;
}
.signup_area .field_area .field > input::placeholder {
    color: var(--placeholder-color, #BBBCC4);
}
.signup_area .field_area .field_alert {
    font-size: 12px;
    color: #3CCBDB;
    margin-top: 6px;
}

.signup_area .field_area .btn {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80px;
    color: #3CCBDB;
    background-color: transparent;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-left: 8px;
    padding: 12px 0;
    line-height: 1;
    min-width: auto;
}
.signup_area .field_area .verify_ {
    display: flex;
    justify-content: stretch;
    align-items: flex-end;
    flex-grow: 1;
    width: 100%;
}
.signup_area .field_area .verify_ .field {
    flex-grow: 1;
}
.signup_area .field_area .verify_ .btn {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80px;
    color: #3CCBDB;
    background-color: transparent;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-left: 8px;
    line-height: 1;
    padding: 13.5px 5px;
}
.signup_area .field_area .verify_ .btn:focus {
    background-color: #3CCBDB;
    border-color: #3CCBDB;
    color: #fff;
    box-shadow: none;
}

#join_path_div label,
#join_path_div select {
    width: 100%;
}

/* 약관 동의 (가입 폼 내부) */
.signup_area .term_wrap > ul li + li {
    margin-top: 10px;
    margin-left: 20px;
}
.signup_area .term_wrap .term {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 24px;
    height: auto;
}
.signup_area .term_wrap .term .checkbox_ label {
    font-size: 13px;
}
.signup_area .term_wrap .term .drop_btn {
    position: static;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    width: auto;
    padding: 2px 24px 2px 8px;
    border-radius: 5px;
    background-image: url(/biz/STATIC/img/icon/arrow_down_m.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: #3CCBDB;
    border: none;
    flex-shrink: 0;
}
.signup_area .term_wrap .term .drop_btn.active {
    background-color: #F1FCFE;
    background-image: url(/biz/STATIC/img/icon/arrow_up_m.svg);
}
.signup_area .term_wrap .dorp_wrap {
    display: none;
    margin-top: 12px;
}
.signup_area .term_wrap .dorp_wrap .text {
    background-color: #F5F5FA;
    border-radius: 5px;
    padding: 16px 12px;
    max-height: 160px;
    overflow-y: scroll;
    font-size: 12px;
    line-height: 1.5em;
}


/* 아이디/비밀번호 찾기 모달 */
#find .modal-layer {
    max-width: 100%;
}
#find .modal-layer .content{
    padding: 0 20px 30px;
}
#find .modal-layer .notice_ {
    margin-top: 16px;
}
#find .modal-layer .notice_ .desc {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}
#find .field_area .field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
#find .field_area .field label {
    width: 70px;
    flex-shrink: 0;
    font-size: 13px;
}
#find .field_area .field input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--line-color, #E7E7E7);
    border-radius: 8px;
    font-size: 14px;
    min-width: 0;
}
#find .field_area .field .btn {
    flex-shrink: 0;
    width: 80px;
    height: 50px;
    line-height: 1;
    padding: 10px 0;
    border: 1px solid #3CCBDB;
    border-radius: 8px;
    color: #3CCBDB;
    background: transparent;
    font-size: 13px;
    text-align: center;
    min-width: auto;
}
.modal-dialog #find.modal-content .closer{
    top: 20px;
    right: 20px;
}

/* 네이버 도움말 모달 */
#naver_help .modal-layer {
    max-width: 100%;
}
#naver_help .modal-layer .notice {
    padding-top: 16px;
    font-size: 13px;
}
#naver_help .modal-layer .btn_area {
    display: flex;
    gap: 12px;
    padding-bottom: 0;
    margin-top: 24px;
}
#naver_help .modal-layer .btn_area a {
    width: 100%;
    height: auto;
    padding: 12px 0;
    max-width: none;
    border-radius: 5px;
    text-align: center;
    flex: 1;
}
#naver_help .modal-layer .head {
    padding: 20px;
    height: auto;
    border-bottom: 0;
    padding-bottom: 0;
}
#naver_help .modal-layer .content {
    padding: 16px 20px;
}
#naver_help .modal-layer .closer {
    background-image: url(/biz/STATIC/img/icon/tool/close.svg);
    right: 20px;
    top: 20px;
    margin: 0;
    width: 16px;
    height: 16px;
}

i.exmark {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-image: url(/skin/demo/img/icon/fe/exmark.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #fff;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.1);
    vertical-align: middle;
    margin-right: 4px;
}


/* ============================================
   제휴(OKPOS) 가입 / 매장 등록
   ============================================ */
.affiliate_signup .field_wrap > h5,
.affiliate_store_area .field_wrap > h5 {
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 20px;
    color: #444;
}

.affiliate_badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}
.affiliate_badge.badge_success {
    background-color: #E8F8F5;
    color: #1ABC9C;
}
.affiliate_badge.badge_fail {
    background-color: #FDEDEC;
    color: #E74C3C;
}
.affiliate_badge .badge_icon::before {
    font-size: 14px;
}
.affiliate_badge.badge_success .badge_icon::before {
    content: "\2713";
}
.affiliate_badge.badge_fail .badge_icon::before {
    content: "\2717";
}

.affiliate_store_area .btn_area .submit:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* ===== Affiliate Join Flow ===== */
.aff-join-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-default);
}
.aff-join-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-surface-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 0 4px;
}
.aff-join-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aff-join-content {
    flex: 1;
    padding: 40px 16px 0;
    overflow-y: auto;
}
.aff-join-terms .aff-join-content {
    padding-bottom: 80px;
}
.aff-join-form .aff-join-content {
    padding-bottom: 80px;
}
.aff-join-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 16px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    background: var(--color-surface-default);
    z-index: 10;
}
.aff-join-cta-btn {
    width: 100%;
    height: 56px;
    border-radius: 8px;
    border: none;
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    font-weight: var(--body-m-weight);
    letter-spacing: var(--body-m-letter);
    cursor: pointer;
    transition: background 200ms, opacity 200ms;
}
.aff-join-cta-btn:disabled {
    background: var(--color-surface-subtle);
    color: var(--color-content-disabled);
    cursor: not-allowed;
}
.aff-join-cta-btn:not(:disabled) {
    background: var(--color-surface-brand);
    color: var(--color-content-inverse);
}

/* Entry Screen */
.aff-join-entry .aff-join-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 92px;
    padding-bottom: 32px;
    text-align: center;
}
.aff-join-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.aff-join-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.aff-join-logo__assaview {
    height: 28px;
    width: auto;
}
.aff-join-logo__divider {
    display: flex;
    align-items: center;
}
.aff-join-logo__okpos {
    height: 20px;
    width: auto;
}
.aff-join-title {
    font: var(--font-title-s);
    margin-top: 24px;
    color:var(--color-content-default);
}

.aff-join-title .aff-join-title__accent {
    font: var(--font-title-s);
    color: var(--color-content-brand);
}
.aff-join-subtitle {
    font: var(--font-body-m-medium);
    color: var(--color-content-subtle);
    margin-top: 12px;
    line-height: 1.6;
    text-align: center;
}
.aff-join-illustration {
    width: 100%;
    margin-bottom: -24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aff-join-illustration::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, #fcfdff);
    pointer-events: none;
}
.aff-join-buttons {
    padding: 0 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.aff-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border-radius: 999px;
    font-size: var(--body-l-size);
    font-weight: var(--body-l-weight);
    cursor: pointer;
    border: none;
}
.aff-join-btn svg {
    width: 16px;
    height: 16px;
}
.aff-join-btn-naver {
    background: radial-gradient(152.91% 732.09% at 110.06% 655.36%, #008327 0%, #01C73C 100%);
    color: var(--color-content-inverse);
    box-shadow: 0px 4px 28px 0px rgba(0,0,0,0.07);
    color: #fff !important;
}
.aff-join-btn-kakao {
    background: linear-gradient(103.58deg, #FFE812 40.87%, #DE9D33 258.76%);
    color: #423D3B;
    box-shadow: 0px 4px 28px 0px rgba(0,0,0,0.07);
}
.aff-join-entry .aff-join-link-direct {
    display: block;
    text-align: center;
    font-size: var(--body-s-size);
    color: var(--color-content-muted);
    text-decoration: underline;
    padding: 8px 0;
}

/* Terms Screen */
.aff-join-terms-title {
    font-size: var(--title-m-size);
    font-weight: var(--title-m-weight);
    line-height: var(--title-m-line);
    letter-spacing: var(--title-m-letter);
    color: var(--color-content-default);
    margin-bottom: 32px;
}
.aff-join-terms-list {
    display: flex;
    flex-direction: column;
}
.aff-join-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
}
.aff-join-checkbox-row:not(.all-check) {
    align-items: flex-start;
}
.aff-join-checkbox-row.all-check {
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border-subtle);
}
.aff-join-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 999px;
    background: var(--color-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms;
}
.aff-join-checkbox.checked {
    background: var(--color-surface-brand);
}
.aff-join-checkbox-label {
    flex: 1;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: 500;
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default);
}
.aff-join-checkbox-row.all-check .aff-join-checkbox-label {
    display: inline;
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    font-weight: var(--body-m-weight);
    letter-spacing: var(--body-m-letter);
}
.aff-join-agreement-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.aff-join-agreement-desc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap:8px;
}
.aff-join-checkbox-label .sub-text {
    display: block;
    font-size: var(--caption-m-size);
    line-height: var(--caption-m-line);
    color: var(--color-text-soft);
}
.aff-join-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-subtle);
    border-radius: 4px;
    font-size: var(--caption-m-size);
    font-weight: var(--caption-m-weight);
    line-height: 10px;
    letter-spacing: -0.5px;
    color: var(--color-content-muted);
}
.aff-join-terms-view {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-content-brand);
    font-size: var(--caption-m-size);
    line-height: var(--caption-m-line);
    cursor: pointer;
    white-space: nowrap;
}
.aff-join-terms-chevron {
    display: flex;
    align-items: center;
    transition: transform 200ms;
}
.aff-join-terms-view.open .aff-join-terms-chevron {
    transform: rotate(180deg);
}
.aff-join-terms-content {
    display: none;
    padding: 12px;
    background: var(--color-surface-subtle);
    border-radius: 8px;
    margin: 4px 0 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-content-default);
    max-height: 200px;
    overflow-y: auto;
}
.aff-join-terms-content * {
    font-size: 12px !important;
    line-height: 20px;
    color: var(--color-content-default) !important;
}
.aff-join-terms-content p {
    margin: 0 0 8px;
}
.aff-join-terms-content p:last-child {
    margin-bottom: 0;
}
.aff-join-terms-content .terms-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 0;
}
.aff-join-terms-content .terms-table th,
.aff-join-terms-content .terms-table td {
    padding: 4px 8px;
    font-size: 12px !important;
    line-height: 20px;
    color: var(--color-content-default) !important;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-subtle);
}
.aff-join-terms-content .terms-table thead th {
    background: var(--color-surface-muted);
    font-weight: 500;
    border-bottom: none;
}
.aff-join-terms-content .terms-table .key-col {
    width: 82px;
    border-right: 1px solid var(--color-border-subtle);
}
.aff-join-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface-inverse);
    color: var(--color-content-inverse);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: var(--caption-m-size);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms, visibility 300ms;
    pointer-events: none;
}
.aff-join-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
.aff-join-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-surface-inverse);
}

/* Form Screen */
.aff-join-progress {
    display: flex;
    gap: 6px;
    width: 135px;
}
.aff-join-progress-bar {
    flex: 1;
    height: 2px;
    border-radius: 4px;
    background: var(--color-surface-muted);
    transition: background 300ms;
}
.aff-join-progress-bar.active {
    background: var(--color-surface-brand);
}
.aff-join-form-title {
    font-size: var(--title-m-size);
    font-weight: var(--title-m-weight);
    line-height: var(--title-m-line);
    letter-spacing: var(--title-m-letter);
    color: var(--color-content-default);
    margin-bottom: 29px;
}
.aff-join-field {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 300ms ease-out, opacity 300ms ease-out, margin 300ms ease-out;
    margin-bottom: 0;
}
.aff-join-field.visible {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 16px;
    overflow: visible;
}
.aff-join-field label {
    display: block;
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--body-m-weight);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default);
    margin-bottom: 12px;
}
.aff-join-field input {
    width: 100%;
    height: 48px;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    font-weight: var(--body-m-weight);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-strong);
    outline: none;
    transition: border-color 200ms;
    box-sizing: border-box;
}
.aff-join-field input::placeholder {
    color: var(--color-text-disabled);
}
.aff-join-field input:focus {
    border-color: var(--color-border-focus);
}
.aff-join-field input.error {
    border-color: var(--color-status-error-default);
}
.aff-join-field input[readonly] {
    background: var(--color-surface-subtle);
    color: var(--color-text-soft);
}
.aff-join-field-error {
    font-size: var(--caption-m-size);
    color: var(--color-status-error-default);
    margin-top: 6px;
    display: none;
}
.aff-join-field-row {
    display: flex;
    gap: 12px;
}
.aff-join-field-row input {
    flex: 1;
    min-width: 0;
}
.aff-join-field-row .aff-join-inline-btn {
    height: 48px;
    width: 128px;
    border-radius: 8px;
    border: 1px solid var(--color-border-brand);
    background: var(--color-surface-default);
    color: var(--color-surface-brand);
    font-size: var(--body-s-size);
    font-weight: var(--body-m-weight);
    white-space: nowrap;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.aff-join-field-row .aff-join-inline-btn:disabled {
    border-color: var(--color-border-disabled);
    color: var(--color-content-disabled);
    cursor: not-allowed;
}
.aff-join-timer {
    display: none;
    font-size: var(--caption-m-size);
    color: var(--color-status-error-default);
    margin-top: 6px;
}

/* Complete Screen */
.aff-join-complete {
    background: linear-gradient(180deg, var(--color-surface-default) 0%, #F6FAFF 100%);
}
.aff-join-complete .aff-join-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.aff-join-celebration {
    width: 124px;
    height: 124px;
    opacity: 0;
    transform: scale(0.5);
}
.aff-join-celebration.animate {
    animation: aff-bounce-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.aff-join-complete-title {
    font-size: var(--title-s-size);
    font-weight: var(--title-s-weight);
    line-height: var(--title-s-line);
    letter-spacing: var(--title-s-letter);
    color: var(--color-content-brand);
    margin-top: 24px;
    opacity: 0;
    transform: translateY(18px);
}
.aff-join-complete-title.animate {
    animation: aff-fade-slide-up 400ms ease-out forwards;
}
.aff-join-complete-msg {
    font-size: var(--title-m-size);
    font-weight: var(--title-m-weight);
    line-height: var(--title-m-line);
    letter-spacing: var(--title-m-letter);
    color: var(--color-content-default);
    margin-top: 12px;
    text-align: center;
    opacity: 0;
    transform: translateY(18px);
}
.aff-join-complete-msg.animate {
    animation: aff-fade-slide-up 400ms ease-out forwards;
}
.aff-join-complete-msg .highlight {
    color: var(--color-content-brand);
}

/* Loading Dots */
.aff-join-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
.aff-join-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-content-inverse);
    animation: aff-dot-pulse 1.2s ease-in-out infinite;
}
.aff-join-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.aff-join-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Keyframes */
@keyframes aff-bounce-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes aff-fade-slide-up {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes aff-dot-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}
/* ── 캠페인 만들기 버튼 (신규 디자인) ── */
.campaign-make-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 12px;
    height: 50px;
    background: #36b7c5;
    border-radius: 8px;
    color: #fff;
    font: var(--font-body-m-bold);
    letter-spacing: var(--body-m-letter);
    width: calc(100% - 40px);
    box-sizing: border-box;
    margin-bottom: 16px;
}
.campaign-make-btn:link,
.campaign-make-btn:visited,
.campaign-make-btn:hover,
.campaign-make-btn:active {
    color: #fff;
}
.campaign-make-btn:hover {
    background: #2fa8b7;
    text-decoration: none;
}
.campaign-make-btn__badge {
    position: absolute;
    top: -10px;
    left: 9px;
    background: #da2872;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.5px;
    padding: 0 8px;
    height: 20px;
    width: 55px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.campaign-make-btn--mobile {
    border-radius: 15px;
    margin-top: 15px;
}

.campaign-make-btn-wrap {
    padding: 0 16px;
}

.campaign-make-btn-wrap .campaign-make-btn--mobile {
    width: 100%;
}

#wrap.new:not(.okpos-main) .main_quick {
    padding: 16px;
}

/* =====================================================
   구독·결제 관리 (subscription_manage)
   ===================================================== */

/* 페이지 */
/* ── 공통 모바일 뒤로가기 탑바 ── */
#wrap.has-mob-top-bar {
    padding-top: 56px;
}

.mob-top-bar {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 var(--spacing-4);
    background: var(--color-surface-default);
    border-bottom: 1px solid var(--color-border-subtle);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.mob-top-bar__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mob-top-bar__title {
    font: var(--font-body-m-semibold);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-strong);
    line-height: 24px;
    flex: 1;
    text-align: center;
    margin-right: 44px;
}
.mob-top-bar--has-right .mob-top-bar__title {
    margin-right: 0;
    text-align: left;
}
.mob-top-bar__right {
    display: flex;
    align-items: center;
    padding-right: 4px;
}
.mob-top-bar__right .ui-button {
    padding: var(--spacing-4) var(--spacing-12);
}
.mob-top-bar__right .ui-button .text {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default);
    text-align: center;
}

.sub-manage-page {
    background: #fbfbfc;
    min-height: 100vh;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 카드 기본 */
.sub-manage-card {
    background: var(--color-surface-default);
    border-radius: var(--radius-16);
    padding: 12px var(--spacing-16) var(--spacing-16);
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

/* 플랜 카드 */
.sub-plan-card__label {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
    margin-bottom: var(--spacing-12);
}

.sub-plan-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sub-plan-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub-plan-card__name {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-content-default);
    letter-spacing: -0.3px;
}

.sub-plan-card__period {
    font-size: 14px;
    color: var(--color-content-subtle);
    letter-spacing: -0.3px;
}

.sub-plan-card--empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}

.sub-plan-card__empty-label {
    font-size: 14px;
    font-weight: 500;
    color: #72798a;
    letter-spacing: -0.5px;
    line-height: 22px;
}

.sub-plan-card__cta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub-plan-card__cta-text {
    font-size: 18px;
    font-weight: 500;
    color: #1aacbc;
    letter-spacing: -0.5px;
    line-height: 24px;
}

/* 칩/배지 */
.sub-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: #f7f8f9;
    color: #72798a;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.sub-manage-card.sub-ad-fee-card {
    padding-top: var(--spacing-8);
    padding-right: var(--spacing-8);
}

.sub-ad-fee-card__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--spacing-4);
}

.sub-ad-fee-card__label {
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
}

.sub-ad-fee-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.sub-chip--error {
    background: #fef2f2;
    color: #dc2626;
}

/* 알림 블록 */
.sub-alert-block {
    margin-top: 14px;
    padding: 12px;
    background: #fef2f2;
    border-radius: 12px;
}

.sub-alert-block__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.sub-alert-block__title {
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    letter-spacing: -0.3px;
}

.sub-alert-block__text {
    font: var(--font-caption-m);
    color: var(--color-content-subtle);
}

.sub-alert-block__link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
    border-bottom: 1px solid #dc2626;
}

/* 광고비 미결제 배너 (D+1~D+6 / D+7 공통) — 아이콘+텍스트 (버튼 없음) */
.adfee-inline-fail-banner {
    margin-top: var(--spacing-12);
    padding: var(--spacing-12);
    background: var(--color-status-error-subtle);
    border-radius: var(--radius-12);
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.02);
}

.adfee-inline-fail-banner__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.adfee-inline-fail-banner__text {
    font: var(--font-body-s-semibold);
    letter-spacing: var(--body-s-letter);
    color: var(--color-status-error-content);
    white-space: nowrap;
}

.adfee-inline-fail-banner__subtext {
    font: var(--font-caption-m);
    letter-spacing: var(--caption-m-letter);
    color: var(--color-content-subtle);
}

/* 광고비 카드 */
.sub-ad-fee-card__link {
    display: block;
    color: inherit;
}

.sub-ad-fee-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sub-ad-fee-card__amount-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.sub-ad-fee-card__total {
    font: var(--font-body-l);
    letter-spacing: var(--body-l-letter);
    color: var(--color-content-default);
}

.sub-ad-fee-card__period {
    font: var(--font-body-s-regular);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
}

/* 결제 카드 비주얼 (PC sub-pc-card-visual 동일 스타일) */
.payment-card-visual {
    background-color: var(--color-content-default);
    background-image:
        radial-gradient(ellipse 70% 120% at 110% -10%, rgba(18,172,255,.30) 0%, transparent 65%),
        radial-gradient(ellipse 80% 100% at -10% 110%, rgba(255,0,30,.20) 0%, transparent 65%);
    border-radius: var(--radius-12);
    padding: 20px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    /* margin-bottom: 16px; */
}

.payment-card-visual--fail {
    background:
        radial-gradient(ellipse 200% 160% at 50% 160%, rgba(116,126,145,0.21) 0%, rgba(160,167,180,0) 55%),
        #f0f1f3;
}
.payment-card-visual--fail .payment-card-visual__company,
.payment-card-visual--fail .payment-card-visual__number {
    color: var(--color-content-subtle);
}

.payment-card-visual__info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-4);
    width: 100%;
}

.payment-card-visual__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.payment-card-visual__company {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-content-inverse);
    letter-spacing: -0.5px;
    line-height: 24px;
}

.payment-card-visual__number {
    font: var(--font-body-s-semibold);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-inverse);
    line-height: 22px;
}

.payment-card-visual__fail-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    background: var(--color-content-default, #4e5668);
    color: var(--color-surface-default, #fff);
    font-size: var(--caption-m-size);
    font-weight: 500;
    letter-spacing: var(--caption-m-letter);
    white-space: nowrap;
}

.payment-card-visual__change-btn {
    padding: var(--spacing-8) 12px;
    border-radius: var(--radius-8);
    background: rgba(255,255,255,.2);
    border: none;
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-surface-default);
    cursor: pointer;
    white-space: nowrap;
}

/* 버튼 (결제 실패 상태 전용) */
.sub-card-change-btn {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-size: var(--body-s-size);
    font-weight: 500;
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-default);
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default, #e4e6ea);
    cursor: pointer;
}

.payment-btn-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 20px;
}

.sub-card-change-btn,
.sub-retry-btn {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-size: var(--body-s-size);
    font-weight: 500;
    letter-spacing: var(--body-s-letter);
    color: #fff;
    background: #36b7c5;
    border: none;
    cursor: pointer;
}

.sub-retry-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 메뉴 row (결제내역, 플랜변경) */
.sub-manage-menu-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.sub-manage-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 20px;
    border-bottom: 1px solid #f0f1f3;
}

.sub-manage-menu-item:last-child {
    border-bottom: none;
}

.sub-manage-menu-item__label {
    font: var(--font-body-m-medium);
    letter-spacing: var(--body-m-letter);
    color: var(--color-content-default);
}

/* 결제 내역 페이지 */
.history-group {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: 12px;
}

.history-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
}

.history-group-header__year {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-content-default);
}

.history-group-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-group-header__summary {
    font-size: 12px;
    color: #a0a7b4;
}

.history-group-body {
    border-top: 1px solid #f0f1f3;
}

.history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f1f3;
}

.history-row:last-child {
    border-bottom: none;
}

.history-row__left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-row__title-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-row__date {
    font-size: 12px;
    color: #a0a7b4;
}

.history-row__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-content-default);
}

.history-row__amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-content-default);
}

.history-receipt-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #36b7c5;
    background: #f0feff;
    border: 1px solid #b2e8ed;
    cursor: pointer;
    white-space: nowrap;
}

.history-receipt-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* 광고비 상세 페이지 섹션 */
.ad-fee-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: 12px;
}

.ad-fee-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
}

.ad-fee-section-header__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-content-default);
}

.ad-fee-section-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #a0a7b4;
}

.ad-fee-section-body {
    border-top: 1px solid #f0f1f3;
}

.ad-fee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f1f3;
}

.ad-fee-row:last-child {
    border-bottom: none;
}

.ad-fee-row__left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.ad-fee-row__date {
    font-size: 12px;
    color: #a0a7b4;
}

.ad-fee-row__title {
    font-size: 14px;
    color: var(--color-content-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-fee-row__amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-content-default);
    white-space: nowrap;
    margin-left: 12px;
}

.ad-fee-badge--arrears {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    background: #fce7f3;
    color: #db2777;
    margin-right: 6px;
}

/* ── 구독 정보 프로필 카드 공유 컴포넌트 (subscription_info_card.php) ── */
.sub-profile-card {
    background: var(--color-surface-default, #fff);
    border: 1px solid var(--color-border-subtle, #f0f1f3);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.more-content .sub-profile-card {
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.02);
    border: none;
}

.sub-profile-card__profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sub-profile-card__profile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.sub-profile-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
}

.sub-profile-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sub-profile-card__info {
    min-width: 0;
}

.sub-profile-card__name {
    font: var(--font-body-m-medium);
    color: #1e2534;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub-profile-card__phone {
    font-size: 13px;
    color: #72798a;
    margin-top: 2px;
}

.sub-profile-card__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    line-height: 22px;
    color: var(--color-content-default, #4e5668);
    padding: 8px 12px;
    border: 1px solid var(--color-border-default, #e4e6ea);
    border-radius: 8px;
    background: var(--color-surface-default, #fff);
    white-space: nowrap;
}

.sub-profile-card__divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

.sub-profile-card__section {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sub-profile-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-profile-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sub-profile-card__label {
    font: var(--font-body-s-medium);
    color: var(--color-content-subtle, #72798a);
}

.sub-profile-card__plan {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-content-default, #1e2534);
    line-height: 24px;
    letter-spacing: -0.5px;
}

.sub-profile-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sub-profile-card__period {
    font: var(--font-body-s-regular);
    color: var(--color-content-muted, #a0a7b4);
    white-space: nowrap;
}

.sub-profile-card__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    font: var(--font-caption-m);
    white-space: nowrap;
}

.sub-profile-card__chip--default,
.sub-profile-card__chip--upcoming {
    background: var(--bg-gray, #f7f8f9);
    color: var(--color-content-subtle, #72798a);
}

.sub-profile-card__chip--trial {
    background: #e2f7fa;
    color: var(--primary-color, #1aacbc);
}

.sub-profile-card__chip--fail {
    background: var(--color-red-100, #fee2e2);
    color: var(--color-status-error-default);
}

.sub-profile-card__chip--cancel {
    background: var(--color-neutral-50, #f7f8f9);
    color: var(--color-content-subtle, #72798a);
}

.sub-profile-card__no-plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub-profile-card__no-plan-msg {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-content-subtle, #72798a);
    line-height: 22px;
    letter-spacing: -0.5px;
}

.sub-profile-card a.sub-profile-card__no-plan-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: var(--color-content-brand);
}

/* projectDetail: mob_top_bar(56px) 교체 후 status_label 위치 보정 */
#wrap.sub1_detail.card .status_nav2 .status_label {
    top: 56px;
}

.reviewer_list--renewal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.reviewer_list--renewal-source {
    display: none !important;
}

.project-detail-selection-sections {
    display: grid;
    gap: var(--spacing-16);
    margin-bottom: 16px;
}

.selection-section {
    display: grid;
    gap: var(--spacing-12);
}

.selection-section__header {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 16px;
    background: #fff;
    text-align: left;
    color: #222;
    border: 1px solid #E4E8EE;
    border-radius: 8px;
}

.selection-section__heading{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.selection-section__auto-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    height:24px;
    padding:0 8px;
    border-radius:4px;
    border:1px solid var(--color-neutral-100);
    background:#fff;
    font-size:var(--caption-m-size);
    line-height:var(--caption-m-line);
    font-weight:var(--caption-m-weight);
    letter-spacing:var(--caption-m-letter);
    color:var(--color-content-muted);
}

.selection-section__title {
    font-size:var(--body-s-size);
    line-height:var(--body-s-line);
    font-weight:var(--body-s-weight);
    letter-spacing:var(--body-s-letter);
    color:var(--color-content-default);
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.selection-section__title-count {
    color:#36b7c5;
}

.selection-section__toggle-icon{
    display:inline-flex;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.selection-section__toggle-icon::before{
    content:"";
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:10px solid #72798a;
    transition:transform .2s ease;
    transform:rotate(180deg);
}

.selection-section:not(.is-open) .selection-section__toggle-icon::before{
    transform:rotate(0deg);
}

.selection-section__body {
    padding: 0;
    display: grid;
    gap: var(--spacing-12);
}

.selection-section__body.is-collapsed {
    display: none;
}

.selection-section__list:empty {
    display: none;
}

.selection-section__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
}

.selection-section__empty-title {
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    font-weight: 600;
    color: var(--color-content-default);
    letter-spacing: var(--body-m-letter);
}

.selection-section__empty-desc {
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: 500;
    font:var(--font-body-s-medium);
    color: var(--color-content-subtle);
}
.selection-section__empty-illust {
    margin-bottom: 8px;
}

.btn-group.floating .list_btn.is-disabled {
    opacity: .45;
}

.project-detail-renewal-cta{
    display:flex;
    flex-direction:row;
    gap:12px;
    width:100%;
    padding:0;
    background:transparent;
    align-items:center;
}

.project-detail-renewal-cta__count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:48px;
    padding:0 12px;
    border-radius:8px;
    font-size:var(--body-s-size);
    line-height:var(--body-s-line);
    font-weight:500;
    letter-spacing:var(--body-s-letter);
    color:var(--color-content-default);
    white-space:nowrap;
    flex-shrink:0;
}

.project-detail-renewal-cta__count span{
    color:var(--color-content-brand);
    margin:0 2px;
}

.project-detail-renewal-cta__button{
    flex:1;
    height:48px;
    border:none;
    border-radius:8px;
    background:#36b7c5;
    color:#fff;
    font-size:var(--body-s-size);
    line-height:var(--body-s-line);
    font-weight:500;
    letter-spacing:var(--body-s-letter);
}

.project-detail-renewal-cta__button.is-disabled,
.project-detail-renewal-cta__button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.influencer_card--renewal{
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:var(--radius-8);
    padding:12px 16px 16px;
    box-sizing:border-box;
    width:100%;
    box-shadow:none;
    overflow:hidden;
    transition:background-color .15s ease,border-color .15s ease;
}

.influencer_card--renewal.is-selected,
.influencer_card--renewal:has(input.chk:checked),
.influencer_card--renewal.influencer_card--selection-candidate{
    background:#eef9fa;
    border-color:var(--primary-color);
}

.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .rv_msg,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .memo_box,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .infl_info,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .detail_box_wrap,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .scheduleEditBtn,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .date_edit_btn,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .legal_btn,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .influencer_card__detail-message-btn,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .selection-section,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .with_cp_btn .ui-button,
.influencer_card.influencer_card--renewal:is(.is-selected, .influencer_card--selection-candidate, :has(input.chk:checked)) .receive_review .ui-button{
    border-color:transparent !important;
}

.influencer_card--renewal .card_wrap{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.influencer_card--renewal .influencer_card__summary {
    border:none;
    border-radius:0;
    padding:0;
    background:transparent;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.influencer_card--renewal .influencer_card__identity {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.influencer_card--renewal .top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
}

.influencer_card--renewal .top .check_box_wrap{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.influencer_card--renewal .top .icon_wrap{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-left:auto;
    width:40px;
    height:40px;
    flex-shrink:0;
}

.influencer_card--renewal .top .zzim_btn--renewal{
    display:none;
}

.influencer_card--renewal .profile_cont{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding-top:0;
}

.influencer_card--renewal .profile_cont .left{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.influencer_card--renewal .profile_cont .profile{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:50%;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.influencer_card--renewal .profile_cont .name_cont{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    min-width:0;
}

.influencer_card--renewal .profile_cont .name{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
}

.influencer_card--renewal .profile_cont .mb_name{
    font-size:var(--body-s-size);
    line-height:var(--body-s-line);
    letter-spacing:var(--body-s-letter);
    font-weight:600;
    color:var(--color-content-default);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:160px;
}

.influencer_card--renewal .profile_cont .level{
    display:inline-flex;
    align-items:center;
    height:20px;
    flex-shrink:0;
}

.influencer_card--renewal .profile_cont .level img{
    display:block;
    max-width:23px;
    height:20px;
}

.influencer_card--renewal .profile_cont .sns{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.influencer_card--renewal .profile_cont .sns_area{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--color-content-subtle);
    font-size:var(--caption-m-size);
    line-height:var(--caption-m-line);
    letter-spacing:var(--caption-m-letter);
    font-weight:var(--caption-m-weight);
    max-width:160px;
}

.influencer_card--renewal .profile_cont .sns_area .img_cont{
    width:16px;
    height:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.influencer_card--renewal .profile_cont .sns_area span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.influencer_card--renewal .profile_cont .sns_area .launch{
    display:none;
}

.influencer_card--renewal .influencer_card__profile_action{
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    flex-shrink:0;
}

.influencer_card--renewal .zzim_btn--renewal{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
}

.influencer_card--renewal .rv_msg{
    background:#fff;
    border:1px solid var(--border-color) !important;
    border-radius:var(--radius-8);
    box-shadow:none !important;
    margin:0 !important;
    padding:12px;
    width:100%;
    box-sizing:border-box;
    margin-top:0;
    overflow:hidden;
}

.influencer_card--renewal .more_section{
    background:var(--color-surface-subtle);
    border:0 !important;
    border-radius:var(--radius-8);
    box-shadow:none !important;
    margin:0 !important;
    padding:12px;
    width:100%;
    box-sizing:border-box;
}

.influencer_card--renewal.is-selected .more_section,
.influencer_card--renewal.influencer_card--selection-candidate .more_section,
.influencer_card.influencer_card--renewal .card_wrap:has(input.chk:checked) .more_section{
    background:#fff;
}

.influencer_card--renewal .influencer_card__message textarea {
    background:#fff;
    padding:0;
    width:100%;
    height:66px;
    min-height:66px;
    border:0;
    outline:0;
    resize:none;
    overflow:hidden;
    font-size:14px;
    line-height:22px;
    font-weight:500;
    color:#666;
    letter-spacing:-0.5px;
    word-break:break-word;
}

.influencer_card--renewal .influencer_card__metrics {
    display:block !important;
    height:auto !important;
    max-height:none !important;
    opacity:1 !important;
    overflow:visible !important;
    visibility:visible !important;
}

.influencer_card--renewal .more_section .infl_grade{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px 13px;
    width:100%;
    margin:0 !important;
    padding:0 !important;
    background:transparent;
}

.influencer_card--renewal .more_section .item{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    min-width:0;
    text-align:center;
}

.influencer_card--renewal .more_section .item .result{
    font: var(--font-caption-m-medium);
    letter-spacing: var(--caption-m-letter);
    color: var(--color-content-subtle);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    white-space:nowrap;
}

.influencer_card--renewal .more_section .item .value{
    font: var(--font-body-s-medium);
    color:var(--color-content-default);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    white-space:nowrap;
    min-height:var(--body-s-line);
}

.influencer_card--renewal .more_section .item .value svg{
    width:20px;
    height:20px;
    flex-shrink:0;
}

.influencer_card--renewal .more_section .item .value .small{
    font-size:12px;
    line-height:20px;
    color:var(--color-neutral-400);
    letter-spacing:-0.5px;
}

.influencer_card--renewal .more_section .item .value.grade{
    gap:6px;
}

.influencer_card--renewal .more_section .item .value.grade img{
    width:15px;
    height:15px;
    flex-shrink:0;
}

.influencer_card--renewal .more_section .item .ui.button.ui-tooltip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px;
    height:14px;
    min-height:14px;
    padding:0;
    margin:0;
    border:0;
    box-shadow:none;
    background:transparent;
    vertical-align:middle;
}

.influencer_card--renewal .more_section .item .ui.button.ui-tooltip svg{
    width:14px;
    height:14px;
}

.influencer_card--renewal .receive_review,
.influencer_card--renewal .memo_box,
.influencer_card--renewal .with_cp_btn,
.influencer_card--renewal .infl_info,
.influencer_card--renewal .detail_box_wrap,
.influencer_card--renewal .scheduleEditBtn,
.influencer_card--renewal .date_edit_btn,
.influencer_card--renewal .legal_btn{
    margin-top:0;
}

.influencer_card--renewal .influencer_card__detail_tail {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:0;
}

.influencer_card--renewal .influencer_card__detail_panel{
    display:none;
    flex-direction:column;
    gap:10px;
}

.influencer_card--renewal .influencer_card__detail_tail.is-open .influencer_card__detail_panel{
    display:flex;
}

.influencer_card--renewal .with_cp_btn .ui-button,
.influencer_card--renewal .receive_review .ui-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:40px;
    border-radius:var(--radius-8);
    background:#fff;
    border:1px solid var(--border-color);
}
.influencer_card--renewal .with_cp_btn .ui-button .text,
.influencer_card--renewal .receive_review .ui-button .text{
    font:var(--font-body-s-medium);
    letter-spacing:var(--body-s-letter);
    color:var(--color-content-default);
}

.influencer_card--renewal .memo_box{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
    background:#fff;
    border:1px solid var(--color-border-default);
    border-radius:var(--radius-8);
}

.influencer_card--renewal .memo_box textarea{
    width:100%;
    min-height:72px;
    border:none;
    resize:none;
    padding:0;
    font:var(--font-body-s-medium);
    letter-spacing:var(--body-s-letter);
    color:var(--color-content-default);
    background:transparent;
}

.influencer_card--renewal .memo_box textarea::placeholder{
    color:var(--color-content-muted);
}

.influencer_card--renewal .memo_box button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:40px;
    border-radius:var(--radius-8);
    border:1px solid var(--color-border-default);
    font:var(--font-body-s-regular);
    color:var(--color-content-default);
}

.influencer_card--renewal .infl_info{
    padding:12px;
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:var(--radius-8);
}

.influencer_card--renewal .infl_info .head{
    display:flex;
    align-items:center;
    gap:6px;
    padding-bottom:var(--spacing-8);
    margin-bottom:var(--spacing-8);
    border-bottom:1px solid var(--color-border-default);
    font:var(--font-body-s-semibold);
    letter-spacing:var(--body-s-letter);
    color:var(--color-content-default);
}

.influencer_card--renewal .infl_info .item_cont{
    display:grid;
    grid-template-columns:max-content 1fr;
    gap:8px 6px;
}

.influencer_card--renewal .infl_info .item{
    display:contents;
    font:var(--font-body-s-medium);
    letter-spacing:var(--body-s-letter);
    color:var(--color-content-subtle);
}

.influencer_card--renewal .infl_info .item span:first-child{
    white-space:nowrap;
}

.influencer_card--renewal .infl_info .item span:last-child{
    color:var(--color-content-default);
    word-break:break-word;
}

.influencer_card--renewal .detail_box_wrap{
    padding:7px;
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:var(--radius-8);
}

.influencer_card--renewal .detail_box_wrap .btn_cont{
    padding:0;
}

.influencer_card--renewal .detail_box_wrap .btn_cont button{
    font:var(--font-body-s-regular);
    color:var(--color-neutral-600);
}

.influencer_card--renewal .detail_box_wrap .btn_cont img{
    transition:transform .2s ease;
}

.influencer_card--renewal .detail_box_wrap .btn_cont.on img,
.influencer_card--renewal .legal_btn .legal_btn_wrap.on img{
    transform:rotate(180deg);
}

.influencer_card--renewal .detail_box_wrap .review_cont,
.influencer_card--renewal .detail_box_wrap .rating_wrap{
    margin-top:12px;
}

.influencer_card--renewal .scheduleEditBtn,
.influencer_card--renewal .date_edit_btn{
    width:100%;
    height:40px;
    padding:0 16px;
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:var(--radius-8);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    font-size:14px;
    line-height:22px;
    font-weight:500;
    color:var(--color-neutral-600);
}

.influencer_card--renewal .scheduleEditBtn .btn,
.influencer_card--renewal .date_edit_btn .btn{
    color: var(--color-content-brand);
    font-weight: 600;
    border: 1px solid var(--color-content-brand);
    border-radius: 100px;
    padding: 2px 10px;
    font-size: 12px;
}

.influencer_card--renewal .legal_btn{
    padding:0;
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:var(--radius-8);
    overflow:hidden;
}

.influencer_card--renewal .legal_btn .legal_btn_wrap{
    height:40px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.influencer_card--renewal .legal_btn .legal_btn_wrap > button{
    flex:1;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:none;
    border:none;
    padding:0;
    font-size:14px;
    font-weight:500;
    color:var(--color-neutral-600);
    cursor:pointer;
}
.influencer_card--renewal .legal_btn .legal_btn_wrap img{
    height:auto;
}
.influencer_card--renewal .legal_btn .legal_btn_wrap > button .btn{
    color:var(--primary-color);
    font-weight:600;
}

.influencer_card--renewal .legal_btn .legal_btn_wrap.on ~ .legal_info{
    /* padding:0 12px; */
}

.influencer_card--renewal .legal_request_btn{
    height:40px;
}

.influencer_card--renewal .hidden_toggle_btn{
    order:-1;
    padding-top:0;
    width:100%;
}

.influencer_card--renewal .hidden_toggle_btn button{
    display:inline-flex;
    align-items:center;
    gap:4px;
    width:auto;
    height:38px;
    padding:8px 0;
    background:transparent;
    border:none;
    color:var(--color-content-subtle);
    font:var(--font-body-s-regular);
    letter-spacing:var(--body-s-letter);
    text-decoration:underline;
    cursor:pointer;
}

.influencer_card--renewal .hidden_toggle_btn .empty_box{
    display:none;
}

.influencer_card--renewal .hidden_toggle_btn svg{
    width:14px;
    height:14px;
    transform:rotate(180deg);
    transition:transform .2s ease;
}

.influencer_card--renewal .influencer_card__detail_tail.is-open .hidden_toggle_btn svg{
    transform:rotate(0deg);
}

.influencer_card--renewal .influencer_card__detail-message-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    height:40px;
    padding:0 12px;
    border-radius:var(--radius-8);
    border:1px solid var(--border-color);
    background:#fff;
    color:var(--color-content-default);
    font:var(--font-body-s-regular);
    letter-spacing:var(--body-s-letter);
    cursor:pointer;
}

.influencer_card--renewal .select_btn,
.influencer_card--renewal > button{
    display:none;
}

.influencer_card--renewal .influencer_card__selection-toggle{
    position:relative;
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    flex-shrink:0;
}

.influencer_card--renewal .influencer_card__selection-toggle input.chk{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    margin:0;
    z-index:1;
}

.influencer_card--renewal .influencer_card__selection-toggle label{
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin:0;
    line-height:1;
}

.influencer_card--renewal .influencer_card__selection-toggle label svg:last-child{
    display:none;
}

.influencer_card--renewal .influencer_card__selection-toggle input.chk:checked + label svg:first-child{
    display:none;
}

.influencer_card--renewal .influencer_card__selection-toggle input.chk:checked + label svg:last-child{
    display:block;
}

.influencer_card--renewal .influencer_card__selection-toggle--disabled label{
    cursor:not-allowed;
    opacity:0.5;
}

.influencer_card--renewal.influencer_card--selection-candidate .influencer_card__detail-message-btn{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:#fff;
}

.project-detail-status-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:28px;
    padding:4px 8px;
    border-radius:var(--radius-8);
    font-size:12px;
    line-height:20px;
    letter-spacing:-0.5px;
    font-weight:500;
    white-space:nowrap;
}

.project-detail-status-chip--candidate{background:#fff7fa;color:#da2872;}
.project-detail-status-chip--waiting,
.project-detail-status-chip--cancelled{background:#f0f1f3;color:#72798a;}
.project-detail-status-chip--info{background:#e4f4fa;color:#0c7cd6;}
.project-detail-status-chip--reviewing{background:#dcfce7;color:#16a34a;}
.project-detail-status-chip--editing{background:#ffe6dd;color:#ff571a;}
.project-detail-status-chip--hold{background:#f2e4ff;color:#a257e7;}
.project-detail-status-chip--approve-pending{background:#fffcd8;color:#ec8208;}
.project-detail-status-chip--approved{background:#eef9fa;color:#1aacbc;}
.project-detail-status-chip--action{background:#ef4444;color:#fff;}
.project-detail-status-chip--legal{background:#fee2e2;color:#dc2626;}
.project-detail-status-chip--attention{background:#fee2e2;color:#dc2626;}

.pd-renewal-modal{
    position:relative;
    width:343px;
    max-width:calc(100vw - 32px);
    padding:36px 16px 16px;
    border-radius:var(--radius-8);
    background:#fff;
    box-shadow:0 4px 26px rgba(0,0,0,0.15);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
}
.modal-dialog .ui-modal-content .pd-renewal-modal{
    padding: 24px 16px 16px;
    gap: 0;
}

/* 확인/조기선정 모달 — 섹션 간격 (피그마 2512-55547) */
.modal-dialog .ui-modal-content .pd-renewal-modal--early,
.modal-dialog .ui-modal-content .pd-renewal-modal--confirm{
    gap: var(--spacing-24);
}

.pd-renewal-modal__close{
    position:absolute;
    top:7px;
    right:7px;
    padding:8px;
    border:none;
    background:transparent;
}

.pd-renewal-modal__header-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--spacing-4);
    width:100%;
}

.pd-renewal-modal__eyebrow{
    font-size:14px;
    line-height:22px;
    letter-spacing:-0.5px;
    font-weight:600;
    color:#1aacbc;
    text-align:center;
}

.pd-renewal-modal__title{
    font-size:20px;
    line-height:28px;
    letter-spacing:-1px;
    font-weight:600;
    color:#1e2534;
    text-align:center;
}

.pd-renewal-modal__desc{
    font: var(--font-body-s-medium);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
    text-align:center;
}

.pd-renewal-modal__header-visual{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}
.pd-renewal-modal__visual{
    width:100%;
    max-width:311px;
    margin-top:-12px;
}

.pd-renewal-modal__visual img{
    display:block;
    width:100%;
    height:auto;
    mix-blend-mode:multiply;
}

.pd-renewal-modal__price{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    margin-top:-8px;
}

.pd-renewal-modal__price-original{
    font:var(--font-body-s-medium);
    color:var(--color-content-subtle);
    text-decoration:line-through; 
}

.pd-renewal-modal__price-current{
    font:var(--font-title-s);
    color:var(--color-content-default);
}

.pd-renewal-modal__price-current strong{
    font:var(--font-title-s);
    color:var(--color-accent-default);
}

.pd-renewal-modal__actions{
    display:flex;
    gap:12px;
    width:100%;
}

.pd-renewal-modal__actions--stack{
    flex-direction:column;
    gap:8px;
}

.pd-renewal-modal__action{
    min-height:48px;
    border-radius:var(--radius-8);
    border:1px solid #e4e6ea;
    background:#fff;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:1;
    font-size:14px;
    line-height:22px;
    letter-spacing:-0.5px;
    font-weight:500;
    color:#4e5668;
}

.pd-renewal-modal__action--primary{
    background:#36b7c5;
    border-color:#36b7c5;
    color:#fff;
}

.pd-renewal-modal__action--gradient{
    background:linear-gradient(90deg,#36b7c5 0%, #da2872 100%);
    border-color:transparent;
    color:#fff;
    font:var(--font-body-m-medium);
    margin-top:var(--spacing-12);
}

.pd-renewal-modal__action .loading{
    display:flex;
    gap:4px;
    align-items:center;
    justify-content:center;
}

.pd-renewal-modal__action .loading span{
    width:6px;
    height:6px;
    border-radius:var(--radius-full);
    background:currentColor;
    opacity:.45;
    animation:pdRenewalPulse 1s ease-in-out infinite;
}

.pd-renewal-modal__action .loading span:nth-child(2){animation-delay:.15s;}
.pd-renewal-modal__action .loading span:nth-child(3){animation-delay:.3s;}

@keyframes pdRenewalPulse{
    0%, 100%{opacity:.25; transform:translateY(0);}
    50%{opacity:1; transform:translateY(-2px);}
}

.pd-renewal-modal__text-action{
    border:none;
    background:transparent;
    color:#a0a7b4;
    font-size:14px;
    line-height:22px;
    letter-spacing:-0.5px;
    font-weight:500;
    text-decoration:underline;
}

.pd-renewal-selection-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
}

.pd-renewal-selection-card{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px;
    border-radius:var(--radius-8);
    background:#fbfbfc;
}

.pd-renewal-selection-card__avatar{
    width:72px;
    height:72px;
    border-radius:50%;
    background:#e9edf3 center/cover no-repeat;
    flex-shrink:0;
}

.pd-renewal-selection-card__body{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.pd-renewal-selection-card__name-row{
    display:flex;
    align-items:center;
    gap:5px;
}

.pd-renewal-selection-card__name{
    font-size:16px;
    line-height:24px;
    letter-spacing:-0.5px;
    font-weight:600;
    color:#4e5668;
}

.pd-renewal-selection-card__grade{
    height:20px;
    width:auto;
}

.pd-renewal-selection-card__sns{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:14px;
    line-height:1;
    letter-spacing:-0.5px;
    font-weight:500;
    color:#72798a;
}

.pd-renewal-selection-card__sns-icon{
    display:inline-flex;
    width:16px;
    height:16px;
}

.pd-renewal-selection-card__sns-icon svg{
    width:16px;
    height:16px;
}

/* 월간 인플루언서 한도 (MO 탑바, OKPOS) — 개선 #5 */
.okpos-infl-quota-mo { position: relative; display: flex; align-items: center; }
.okpos-infl-quota-mo__trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.5px;
}
.okpos-infl-quota-mo__trigger svg { display: block; }
.okpos-infl-quota-mo__count { color: #72798a; }
.okpos-infl-quota-mo__count b { font-weight: 500; color: var(--color-content-brand, #1aacbc); }
.okpos-infl-quota-mo__count i { font-style: normal; color: #72798a; }
.okpos-infl-quota-mo__tooltip {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: none;
    white-space: nowrap;
    padding: 4px 12px;
    border-radius: 999px;
    background: #4e5668;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.5px;
    z-index: 1000;
}
.okpos-infl-quota-mo__tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: inherit;
    transform: rotate(45deg);
}
.okpos-infl-quota-mo.is-open .okpos-infl-quota-mo__tooltip { display: block; }
/* ===== 매장(방문형) 방문확인/노쇼 — 모바일 (Figma 2720:76172 / 2720:76300) ===== */
/* 카드 버튼 */
.influencer_card .visit_action_btns{
    display: flex;
    gap: 12px;
    width: 100%;
}
.influencer_card .visit_action_btns > button{
    flex: 1;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--radius-8, 8px);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.5px;
    cursor: pointer;
}
.influencer_card .visit_action_btns > button.visit_confirm_btn{
    background: var(--color-surface-default, #fff);
    border: 1px solid var(--color-border-default, #e4e6ea);
    color: var(--color-content-default, #4e5668);
}
.influencer_card .visit_action_btns > button.noshow_report_btn{
    background: var(--color-red-500, #ef4444);
    border: 1px solid var(--color-red-500, #ef4444);
    color: var(--color-content-inverse, #fff);
}

/* 컨펌 모달 — 모바일 베이스(.modal-content = 풀스크린 flex 래퍼)를 카드로 리셋 */
.modal-dialog.visit-action-modal{
    justify-content: center;
    align-items: center;
}
.visit-action-modal .modal-content.alert-confirm{
    min-width: 0;
    width: calc(100dvw - 48px);
    max-width: 343px;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: var(--color-surface-default, #fff);
    padding: 36px 16px 16px;
    border-radius: var(--radius-16, 16px);
    box-shadow: 0 4px 26px rgba(0, 0, 0, 0.15);
    text-align: center;
}
.visit-action-modal .modal-content .closer{
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 8px;
    display: flex;
    cursor: pointer;
}
.visit-action-modal .modal-content .content{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.visit-action-modal .modal-content .content .msg{
    font: var(--font-title-xs);
    letter-spacing: -1px;
    color: var(--color-content-default);
}
.visit-action-modal .modal-content .content .msg .target_name{
    font:inherit;
    white-space: nowrap;
}
.visit-action-modal .modal-content .content .sub{
    font: var(--font-body-s-medium);
    letter-spacing: -0.5px;
    color: var(--color-content-subtle);
}
.visit-action-modal .modal-content .btn_box{
    display: flex;
    gap: 12px;
}
.visit-action-modal .modal-content .btn_box .btn{
    flex: 1;
    min-width: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-8, 8px);
    font: var(--font-body-s-medium);
    letter-spacing: -0.5px;
    cursor: pointer;
}
.visit-action-modal .modal-content .btn_box .btn.cancle{
    background: var(--color-surface-default, #fff);
    border: 1px solid var(--color-border-default, #e4e6ea);
    color: var(--color-content-default, #333c4d);
}
.visit-action-modal .modal-content .btn_box .btn.submit{
    background: var(--color-surface-brand, #36b7c5);
    border: 1px solid var(--color-surface-brand, #36b7c5);
    color: var(--color-content-inverse, #fff);
}

/* ========== modal-confirm (공통 confirm 모달 스타일) ========== */
.modal-dialog .ui-modal-layer.modal-confirm {
    position: relative;
    padding: 32px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-28);
}
.modal-dialog .ui-modal-layer.modal-confirm .head {
    justify-content: center;
}
.modal-dialog .ui-modal-layer.modal-confirm .head .closer {
    position: absolute;
    right: 24px;
    top: 24px;
    transform: none;
}
.modal-dialog .ui-modal-layer.modal-confirm .head h1 {
    font: var(--font-title-s);
    font-size: 18px;
    letter-spacing: var(--title-s-letter);
    color: var(--color-content-default);
    text-align: center;
}
.modal-dialog .ui-modal-layer.modal-confirm .modal-confirm__texts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}
.modal-dialog .ui-modal-layer.modal-confirm .body {
    font: var(--font-body-s-regular);
    letter-spacing: var(--body-s-letter);
    color: var(--color-content-subtle);
}
.modal-dialog .ui-modal-layer.modal-confirm .btn_wrap {
    gap: var(--spacing-8);
}
.modal-dialog .ui-modal-layer.modal-confirm .btn_wrap .ui-button {
    flex: 1;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-8);
    font-size: 14px;
}
.modal-dialog .ui-modal-layer.modal-confirm button.modal-confirm__btn--reject {
    background: var(--color-surface-default);
    color: var(--color-content-default);
    border: 1px solid var(--color-border-default);
}
.modal-dialog .ui-modal-layer.modal-confirm button.modal-confirm__btn--accept {
    background: var(--color-surface-brand);
    color: var(--color-content-inverse);
    border: none;
}

@media (max-width: 800px) {
    .modal-dialog .ui-modal-layer.modal-confirm {
        gap: var(--spacing-20);
    }
    .modal-dialog .ui-modal-layer.modal-confirm .modal-confirm__texts {
        gap: var(--spacing-8);
    }
}

/* AI 가이드 로딩 오버레이 (step2 블로그 미션 가이드) */
.ai-guide-section {
    position: relative;
}
.ai-guide-loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    z-index: 10;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
}
.ai-guide-section.is-ai-loading .ai-guide-loading-overlay,
.ai-guide-section.is-ai-error .ai-guide-loading-overlay {
    display: flex;
}
.ai-guide-section.is-ai-loading .ai-guide-fields-area {
    pointer-events: none;
    user-select: none;
}
.ai-guide-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ai-guide-error-state {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ai-guide-section.is-ai-error .ai-guide-error-state {
    display: flex;
}
.ai-guide-section.is-ai-error .ai-guide-loading-state {
    display: none;
}
.ai-guide-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-surface-muted);
    border-top-color: var(--color-content-brand);
    border-radius: 50%;
    animation: ai-guide-spin 0.8s linear infinite;
}
@keyframes ai-guide-spin {
    to { transform: rotate(360deg); }
}
.ai-guide-loading-text {
    font: var(--font-body-s-medium);
    color: var(--color-content-default);
    margin: 0;
}
.ai-guide-error-text {
    font: var(--font-body-s-medium);
    color: var(--color-content-default);
    margin: 0;
    text-align: center;
    line-height: 1.6;
}
.ai-guide-retry-btn {
    margin-top: 4px;
    padding: 6px 16px;
    font-size: 12px;
    color: var(--color-content-brand);
    border: 1px solid var(--color-content-brand);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.common-notice-area {
    padding: 16px;
    margin-bottom: 16px;
}

/* ===== 예약 대시보드 (booking dashboard) — MO, Figma 4723-85075 / 4723-85265 ===== */

/* 캠페인 카드 "예약" CTA — 뱃지 삽입 시 라인박스가 밀려 옆 버튼과 높이/세로정렬이 어긋나지 않도록 flex 중앙 정렬 */
.status_box .btn_wrap .btn.booking_btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 캠페인 카드 "예약" CTA 뱃지 (Figma 4056-48233: 시안 아웃라인 pill) */
.btn .booking_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 21px;
    padding: 0 var(--spacing-8);
    margin-left: var(--spacing-4);
    border: 1px solid var(--color-border-brand);
    border-radius: var(--radius-full);
    background: var(--color-neutral-0);
    font-size: var(--caption-s-size);
    font-weight: var(--caption-s-weight);
    line-height: 1;
    color: var(--color-cyan-600);
}

.booking_dashboard_page {
    background: var(--color-surface-wash);
    /* 공용 모바일 탑바(.mob-top-bar, fixed 56px) 아래에서 시작 */
    padding-top: 56px;
    /* 하단 고정 네비바(.app_bar.biz 64px)에 콘텐츠가 가리지 않도록 여백 확보 */
    padding-bottom: calc(64px + var(--spacing-24) + env(safe-area-inset-bottom, 0px));
    /* wash 배경이 뷰포트 하단까지 이어지도록(흰/회 경계 노출 방지) */
    min-height: 100vh;
    box-sizing: border-box;
}

.booking_dashboard_page .calendar_area {
    margin-bottom: var(--spacing-20);
}

/* 캘린더 섹션: 흰 배경 full-bleed, 하단 라운드 + 그림자 */
.booking_calendar_mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-16);
    background: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-surface-subtle);
    border-radius: 0 0 var(--radius-16) var(--radius-16);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.03);
    padding: var(--spacing-16) 0 0;
}

.booking_calendar_mobile .calendar_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-8) 0 var(--spacing-16);
}

.booking_calendar_mobile .calendar_label {
    font: var(--font-body-m-medium);
    color: var(--color-content-default);
    padding: 0 var(--spacing-4);
}

.booking_calendar_mobile .calendar_nav_group {
    display: flex;
    align-items: center;
}

.booking_calendar_mobile .icon_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-32);
    height: var(--spacing-32);
    border: none;
    background: transparent;
}

.booking_calendar_mobile .icon_nav:disabled {
    opacity: 0.3;
}

.booking_calendar_mobile .weekday_header {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 var(--spacing-4);
}

.booking_calendar_mobile .weekday_header span {
    text-align: center;
    font-size: var(--caption-m-size);
    font-weight: var(--caption-m-weight);
    line-height: var(--caption-m-line);
    color: var(--color-content-subtle);
}

.booking_calendar_mobile .weekday_header span:first-child {
    color: var(--color-red-500);
}

.booking_calendar_mobile .calendar_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 var(--spacing-4);
}

.booking_calendar_mobile .calendar_grid.month_grid {
    row-gap: var(--spacing-8);
}

.booking_calendar_mobile .calendar_day {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    background: transparent;
    padding: 0 var(--spacing-4);
    min-height: 52px;
}

.booking_calendar_mobile .calendar_day .day_num {
    width: var(--spacing-32);
    height: var(--spacing-32);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font: var(--font-body-s-regular);
    color: var(--color-content-default);
    /* 날짜 선택 시 하이라이트가 부드럽게 채워지도록 (연출 전용) */
    transition: background-color 0.1s ease, color 0.1s ease;
}

.booking_calendar_mobile .calendar_day .indicator {
    font-size: var(--caption-m-size);
    font-weight: var(--caption-m-weight);
    line-height: var(--caption-m-line);
    color: var(--color-cyan-600);
}

.booking_calendar_mobile .calendar_day.has_reservation_past .indicator {
    color: var(--color-content-muted);
}

.booking_calendar_mobile .calendar_day.selected .day_num {
    background: var(--color-cyan-500);
    color: var(--color-neutral-0);
    font-weight: var(--title-xs-weight);
}

.booking_calendar_mobile .calendar_day.other_month {
    cursor: default;
}

.booking_calendar_mobile .calendar_day.other_month .day_num {
    color: var(--color-neutral-300);
}

/* 주간⇄월간 토글 드래그 핸들 (73x4 pill) */
.booking_calendar_mobile .sheet_handle_toggle {
    border: none;
    background: transparent;
    padding: var(--spacing-8) var(--spacing-24);
    margin-top: calc(-1 * var(--spacing-8));
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.booking_calendar_mobile .sheet_handle_toggle .handle_bar {
    display: block;
    width: 73px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
}

/* 리스트 영역 (wash 배경 위) */
.booking_dashboard_page .day_list_area {
    padding: 0 var(--spacing-16);
}

.booking_day_list {
    background: transparent;
}

.booking_day_list .day_list_header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-20);
}

.booking_day_list .selected_date {
    font: var(--font-title-xs);
    color: var(--color-content-default);
}

.booking_day_list .confirmed_count {
    font: var(--font-title-xs);
    color: var(--color-cyan-600);
}

.booking_day_list .empty_state {
    padding: var(--spacing-48) 0;
    text-align: center;
    color: var(--color-content-subtle);
    font-size: var(--body-s-size);
}

/* 모바일: PC 전용 문구/헤더행 숨김 */
.booking_day_list .empty_state .pc_only {
    display: none;
}

.booking_day_list .day_list_table_head {
    display: none;
}

.booking_day_list .day_list_items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* 예약 카드 (Figma 4735-86499): 시간+칩 / 구분선 / 아바타+이름+셰브런 / 메모 */
.booking_day_list .reservation_card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "time status"
        "influencer chevron"
        "memo memo";
    background: var(--color-neutral-0);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-12);
    box-shadow: 0 2px 5.5px rgba(0, 0, 0, 0.02);
    padding: 9px 13px 13px;
    cursor: pointer;
}

.booking_day_list .reservation_card.status_cancelled {
    opacity: 0.7;
}

/* 1행(시간/칩) 하단에 이어지는 구분선 */
.booking_day_list .reservation_card .col_time,
.booking_day_list .reservation_card .col_status {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-surface-subtle);
    padding-bottom: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.booking_day_list .reservation_card .col_time {
    grid-area: time;
}

.booking_day_list .reservation_card .visit_time {
    font-size: var(--title-s-size);
    font-weight: var(--title-s-weight);
    line-height: var(--title-s-line);
    letter-spacing: var(--title-s-letter);
    color: var(--color-content-default);
}

.booking_day_list .reservation_card .col_status {
    grid-area: status;
    justify-content: flex-end;
}

.booking_day_list .reservation_card .col_influencer {
    grid-area: influencer;
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    min-width: 0;
}

.booking_day_list .reservation_card .avatar_placeholder {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    background: var(--color-surface-muted);
}

.booking_day_list .reservation_card .avatar_placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking_day_list .reservation_card .mb_nick {
    font: var(--font-body-l);
    color: var(--color-content-default);
    white-space: nowrap;
}

.booking_day_list .reservation_card .sns_handle {
    font: var(--font-body-s-regular);
    color: var(--color-content-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking_day_list .reservation_card .col_chevron {
    grid-area: chevron;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.booking_day_list .reservation_card .col_memo {
    grid-area: memo;
    min-width: 0;
    font-size: var(--caption-m-size);
    font-weight: var(--caption-m-weight);
    line-height: var(--caption-m-line);
    color: var(--color-content-subtle);
}

.booking_day_list .reservation_card .memo_preview {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    max-width: 100%;
    margin-top: var(--spacing-8);
}

.booking_day_list .reservation_card .memo_preview .memo_icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.booking_day_list .reservation_card .memo_preview_text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 모바일 카드에서는 메모가 없으면 자리 자체를 비운다(PC 표에서만 '-' 표기) */
.booking_day_list .reservation_card .memo_preview_empty.pc_only {
    display: none;
}

/* 상태 칩 — MO: h24 / radius 4 / caption 12 (Figma 4735-86531) */
.status_chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--spacing-8);
    border-radius: var(--radius-4);
    font-size: var(--caption-m-size);
    font-weight: var(--caption-m-weight);
    line-height: var(--caption-m-line);
    white-space: nowrap;
}

.status_chip.chip_upcoming {
    background: var(--color-accent-subtle);
    color: var(--color-accent-default);
}

.status_chip.chip_visited {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.status_chip.chip_cancelled {
    background: var(--color-surface-subtle);
    color: var(--color-content-muted);
}

/* 예약 상세 바텀시트 (MO, Figma node 3487-12216 / 3408-11055) */
.reservation_detail_modal_wrap {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.reservation_detail_modal_wrap .detail_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    z-index: 1000;
}

.reservation_detail_sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    /* 스크롤은 본문(.detail_body)에서만 — 핸들은 항상 상단에 고정 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-neutral-0);
    border-radius: var(--radius-16) var(--radius-16) 0 0;
    box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.16);
    padding: var(--spacing-16) var(--spacing-16) calc(var(--spacing-16) + env(safe-area-inset-bottom));
    z-index: 1001;
}

/* 모바일 바텀시트에는 PC 전용 요소(타이틀/닫기/연락처 박스) 미노출 — 핸들/백드롭으로 닫기 */
.reservation_detail_sheet .pc_only {
    display: none;
}

/* 드래그 핸들 */
.reservation_detail_sheet .sheet_handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
    padding: var(--spacing-8) 0 var(--spacing-16);
    margin: calc(-1 * var(--spacing-8)) 0 var(--spacing-8);
    touch-action: none;
}

.reservation_detail_sheet .sheet_handle::before {
    content: '';
    display: block;
    width: 74px;
    height: 4px;
    border-radius: var(--radius-8);
    background: var(--color-surface-muted);
}

.reservation_detail_sheet .detail_body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.reservation_detail_sheet .profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.reservation_detail_sheet .profile img {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border-default);
}

.reservation_detail_sheet .profile .names {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-4);
}

.reservation_detail_sheet .profile .nick {
    font: var(--font-body-l);
    font-weight: 600;
    color: var(--color-content-default);
}

.reservation_detail_sheet .profile .name {
    font-size: var(--body-s-size);
    color: var(--color-content-subtle);
}

.reservation_detail_sheet .profile .sns_link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    font: var(--font-body-s-medium);
    color: var(--color-content-subtle);
}

/* 예약 시간 / 체험 상품 정보 카드 */
.reservation_detail_sheet .visit_info_card {
    width: 100%;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-12);
    padding: var(--spacing-12);
}

.reservation_detail_sheet .info_row {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
}

.reservation_detail_sheet .visit_info_card .info_row:not(:last-child) {
    padding-bottom: var(--spacing-12);
    border-bottom: 1px solid var(--color-border-subtle);
}

.reservation_detail_sheet .visit_info_card .info_row + .info_row {
    padding-top: var(--spacing-12);
}

.reservation_detail_sheet .info_icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reservation_detail_sheet .info_text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.reservation_detail_sheet .info_label {
    font: var(--font-body-s-regular);
    color: var(--color-content-subtle);
}

.reservation_detail_sheet .info_value {
    font: var(--font-body-m-medium);
    color: var(--color-content-default);
    word-break: break-word;
}

.reservation_detail_sheet .info_value_row {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    flex-wrap: wrap;
}

/* 상세 전용 상태 뱃지 */
.reservation_detail_sheet .detail_status_badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--spacing-8);
    border-radius: var(--radius-4);
    font-size: var(--caption-m-size);
    font-weight: var(--caption-m-weight);
    line-height: var(--caption-m-line);
    white-space: nowrap;
}

.reservation_detail_sheet .detail_status_badge.badge_upcoming {
    background: var(--color-accent-subtle);
    color: var(--color-accent-default);
}

.reservation_detail_sheet .detail_status_badge.badge_visited {
    background: var(--color-green-50);
    color: var(--color-green-600);
}

.reservation_detail_sheet .detail_status_badge.badge_cancelled {
    background: var(--color-surface-subtle);
    color: var(--color-content-muted);
}

/* 메모 */
.reservation_detail_sheet .memo_area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.reservation_detail_sheet .memo_label {
    font-size: var(--body-s-size);
    font-weight: var(--title-xs-weight);
    line-height: var(--body-s-line);
    color: var(--color-content-default);
}

.reservation_detail_sheet .rv_advertiser_memo {
    width: 100%;
    height: 107px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-8);
    padding: var(--spacing-12) var(--spacing-16);
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    color: var(--color-content-default);
    resize: none;
}

.reservation_detail_sheet .rv_advertiser_memo::placeholder {
    color: var(--color-content-disabled);
}

/* 메모 저장: Figma — 텍스트영역 아래 전폭 아웃라인 버튼 */
.reservation_detail_sheet .memo_save_btn {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-default);
    background: var(--color-neutral-0);
    border-radius: var(--radius-8);
    font: var(--font-body-s-medium);
    color: var(--color-content-default);
}

/* 액션 버튼: 메시지 보내기 / 전화 걸기 (반반) */
.reservation_detail_sheet .actions {
    width: 100%;
    display: flex;
    gap: var(--spacing-8);
}

.reservation_detail_sheet .message_btn,
.reservation_detail_sheet .call_btn {
    flex: 1;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    background: var(--color-neutral-0);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-8);
    font: var(--font-body-s-medium);
    color: var(--color-content-default);
}