body{background:rgb(var(--bs-white-spring));}


//왼쪽메뉴
.left-side{
    overflow:hidden;
    display:flex; 
    flex-direction:column; 
    position:fixed; 
    width:40px; 
    height:100vh; 
    padding:42px 0; 
    box-sizing:border-box; 
    border-radius:0;
    background:rgb(var(--bs-dark-metal)); 
    transition:all .5s;
    z-index: 99;
    &.active{
        width:240px;
        border-radius:0 0 40px 0;
        .nav-wrap {
            width: 240px;
        }
    }
    .btn-menu{
        display:block;
        width:40px;
        height:35px;
        position:absolute;
        top:40px;
        left:-1px;
        padding:0;
        font-size:0;
        &:before{
            content:'\F479';
            display:block;
            font-family:bootstrap-icons !important;
            font-size:2rem;
            color:rgb(var(--bs-white));
        }
    }
    .logo{
        color:rgb(var(--bs-white));
        min-height:35px;
        margin:0 0 0 45px;
        line-height:35px;
    }
    .btn-top{
        position:fixed;
        right:2px;
        bottom:4px;
        a{
            display:block;
            margin:3px 0;
            background-color:rgb(var(--bs-dark));
            border-radius:5px;
            text-align:center;
            color:rgb(var(--bs-gray-100));
            font-size:200%;
            i.bi{
                vertical-align:bottom;
                &:before{
                    vertical-align:-.225em;
                }
            }
        }
    }
}
// 왼쪽메뉴리스트(통합광고관리/통합DB관리/회계관리/시차관리/이벤트/회원관리)
.nav-wrap{
    width: 40px;
    margin-top:30px;
    overflow-y:auto;
    overflow-x:hidden;
    transition:all .5s;
    flex:1;
    &::-webkit-scrollbar{
        width:6px; 
        background:transparent
        ;}
    &::-webkit-scrollbar-thumb{
        border-radius:3px;  
        background:rgb(var(--bs-silver-aluminium));
    }
    .nav{
        width: 240px;
        // overflow-y: auto;
        > li{
            position:relative; 
            padding:15px 0 0 10px; 
            font-size:1.063rem; 
            transition:all .2s;
            &:not(:last-child){
                margin:0 0 30px;
            }
            &:has(div){
                &:after{
                    content:''; 
                    position:absolute;
                    top:23px;
                    right:30px;
                    width:10px;
                    height:10px;
                    border-right:2px solid rgb(var(--bs-white));
                    border-bottom:2px solid rgb(var(--bs-white));
                    transform:rotate(45deg);
                    transition:all .2s;
                }
            }
            &:has([aria-expanded="true"]){
                background:rgb(var(--bs-white));
                &:before{
                    content:'';
                    position:absolute;
                    width:6px;
                    height:100%;
                    top:0;
                    left:0;
                    background:rgb(var(--bs-red-primary));
                }
                &:after{
                    top:26px;
                    border-color:rgb(var(--bs-dark-metal));
                    transform:rotate(225deg);
                }
                button{
                    color:rgb(var(--bs-dark-metal));
                    &[aria-expanded="true"]{@include bold;}//common.scss mixin사용
                }
            }
            
        }
        button{
            display:block;
            padding:0 0 0 35px;
            color:rgb(var(--bs-white));
            transition: 0.2s;
            &:hover{
                color:rgb(var(--bs-red-lava));
            }
            > i.bi {
                display:inline-block;
                margin:5px 12px 0 -36px;
                vertical-align:middle;
                font-size:110%;
            }          
        }   
        .btn-toggle-nav{
            padding:18px 0 0;
            li{
                margin:0 0 12px 32px;
            }
            a{
                position:relative;
                display:inline-block;
                padding:0 0 2px 10px;
                font-size:0.875rem;
                color:rgb(var(--bs-gray-600));
                transition: 0.3s;
                &:hover{
                    color:rgb(var(--bs-red-lava));
                    text-indent: 0.4rem;
                }
            }
            .active{
                border-bottom:2px solid rgb(var(--bs-coral-light));
                color:rgb(var(--bs-red-primary));
            }
            .active:before{
                content:'';
                position:absolute;
                top:6px;
                left:0;
                width:3px;
                height:3px;
                border-radius:50%;
                background:rgb(var(--bs-red-primary));
            }
        }
    }
}

/*이벤트 > 상세 페이지 버튼*/
.btn-wrap a {
    button.btn-outline-danger{
        padding:var(--bs-btn-padding-y) 15px;
        // color:rgb(var(--bs-black)); 
        border-radius: 14px; 
        &:hover{
            color:var(--bs-btn-hover-color);
        }
    }
}

.section.position-relative{
    .btn-wrap{
        display:flex;
        justify-content:flex-end;
        a {
            margin:0 0 0 5px;
        }
    }
}

.main-contents-wrap{
    flex:1;
    padding:70px 5.7708vw;
    margin-left:40px;
}

.ad-list{
    .row{
        text-align:left;
        margin-right: 0;
    }
    .row:not(:first-child){
        margin-top:24px;
    }
    .type{
        flex:1;
        margin-right:12px;
        padding:2vw 2vw;
        border:1px solid rgb(var(--bs-gray-dust));
        border-radius:10px;
        background:rgb(var(--bs-white));
    }
    .btn-more{
        display:flex;
        align-items:center;
        justify-content:center;
        width:143px;
        color:rgb(var(--bs-white));
        border-radius:10px;
        background:rgb(var(--bs-dark-metal));
        span{
            padding:30px 0 0; 
            @include bg('ico_arrow.png', center, 0);//var.scss
        }
    }
    .btn-primary{
        background:rgb(var(--bs-red-primary));
    }
    .summary{
        display:flex;
        margin:0 0 28px;
        strong{
            min-width:210px;
            margin:0 45px 0 0;
            font-size:1.750rem;
            @include bold;//var.scss
        }
        i{
            display:inline-block;
            width:28px;
            height:28px;
            margin:0 6px 0 0;
            vertical-align:top;
        }
        .facebook{
            @include bg('ico_facebook.png', center, 0);//var.scss
        }
        .kakao{
            @include bg('ico_kakao.png', center, 0);//var.scss
        }
        .google{
            @include bg('ico_google.png', center, 0);//var.scss
        }
        dl{
            display:flex; 
            align-items:center; 
            margin:0 45px 0 0;
        }
        dt{
            margin:0 6px 0 0; 
            font-size:1rem;
        }
        dd{
            font-size:1.750rem; 
            @include bold;//var.scss
        }
        .percentage{
            dd{
                color:rgb(var(--bs-red-primary));
            }
        }
    }
    .ad-detail-info{
        .col{
            dt{
                margin-bottom: 5px;
            }
            dd{
                font-size: 0.8rem;
            }
        }
    }
    .detail{
        dl{
            box-sizing:border-box;
            margin:0 22px 0 0;
            padding:7px 10px;
            text-align:left;
            background:rgb(var(--bs-white-porcelain));
        }
        dd{
            margin:8px 0 0;
            color:rgb(var(--bs-gray-600));
        }
    }
}
.dayOff-contanier{
    .form-select{font-size: 0.9rem;}
}



$input-pd:1.25rem; //20px
$icon-pd:3.75rem; //60px

@mixin effect($second:0.3s) {
    transform: translateY(150%); visibility:hidden; transition: all linear $second;
    &.effect{transform: translateY(0%); visibility:visible;}
}


//로그인,가입하기
.account-container{
    margin:0 auto;   
    .card{
        margin:7% auto 0; 
        --bs-card-border-color:transparent; 
        --bs-card-bg:inherit; max-width: 500px;
    }
    .card-title{
        font-size:1.5rem; 
        margin:2.5rem 0;
    }
    .card-body{
        padding:0;
    }
    .btn-outline-primary{
        display: block; 
        width:100%; 
        margin-top:1.5rem; 
        border-radius:14px; 
        height:4.375rem; 
        text-align: center; 
        font-size:1.25rem; 
        --bs-btn-color:rgb(var(--bs-red-primary));
        --bs-btn-border-color:rgb(var(--bs-red-primary));
        &:hover{
            --bs-btn-hover-bg:rgb(var(--bs-red-primary));
            --bs-btn-hover-border-color:rgb(var(--bs-red-primary));
        }
        &:active{
            background-color:var(--bs-btn-hover-bg); 
            border-color:var(--bs-btn-hover-bg);
        }
    }

    form{
        > div{transition:all linear 0.5s; @include effect;     
            &.effect {justify-content:flex-start;}   
            i{position: absolute; top:52%; transform: translateY(-50%); left:$input-pd; font-size: 1.5rem; width: 1.5rem; color:rgb(var(--bs-gray-boulder));}           
        }
        .form-control{width:100%;height:4.375rem;padding:0 3.4rem;text-align:left;border-radius:14px;border: 1px solid rgb(var(--bs-gray-border));background-color: rgb(var(--bs-gray-softPeach));
            &:-webkit-autofill,
            &:-internal-autofill-selected {transition:background-color 5000s ease-in-out 0s;} 
        }
        .form-check{
            .form-check-input{margin-top:0;}
        }
        .icon a{
            color:rgb(var(--bs-gray-boulder));        
            span.material-symbols-outlined{font-size:130%; vertical-align: middle; padding-right:0.25rem;}
            &:hover{font-weight: 900; transition:0.2s;
                span.material-symbols-outlined{transform: scale(1.4);}
            }
        }
    }
}

//마이페이지
.myPage-container{ 
    h1{
        font-size:180%;
        font-weight:bold;
    }     
    .container{
        padding:0;
        margin:0;
    }
    .card{           
        .card-body{
            dl{
                display:flex;
                justify-content:flex-start;
                margin:1rem 0;
                align-items:center;
                dt{
                    display:flex;
                    justify-content:space-between;
                    width:110px;
                    padding-right:10px;
                    position:relative;
                    margin-right:0.5rem;
                    &:after{
                        content:':';
                        position:absolute;
                        right:0;
                        top:0;
                    }
                }
                dd{
                    flex:1;
                }
            }
        &::after{content: ''; display: block; clear: both;}
        }
    }
    button{float:right;}
}
.user-nav p{display: none;}

// 마이페이지&로그아웃 아이콘 변환
.util-nav{
    display:block;
    width:auto;
    margin:0;
    padding:0;
    a {
        display:block;
        margin:25px 0;
        width:40px;
        height:20px;
        transition:all .5s;
        &::before {
            content:'';
            display:block;
            width:40px;
            height:20px;
            margin:0 auto;
            background-size:20px auto;
        }
        &:first-of-type, &:last-of-type {
            &::before{
                background-repeat:no-repeat;
                background-position:50%, 0;
            }
        }
        &:first-of-type {
            &::before{
                background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1'/%3E%3C/svg%3E");
            }
            
        }
        &:last-of-type {
            &::before{
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-power' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 1v7h1V1z'/%3E%3Cpath d='M3 8.812a5 5 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812'/%3E%3C/svg%3E");
            }
        }
        span{
            display:none;
        }
    }
    &.active {
        display: flex;
        justify-content:space-between;
        width:240px;
        padding:10px 40px 10px;
        a{  
            display:inilne;
            width:auto;
            margin:0;
            &::before {
                content:none;
            }
            span {
                display:block;
                font-size:0.813rem; 
                color:rgb(var(--bs-silver-aluminium));
            }
        }
    }
}

//메인페이지
.main-contents-wrap{
    .ad-list{
        .type{
            transition: 0.4s;
            &:hover{box-shadow:2px 2px 15px rgb(var(--bs-gray-pastel));}
        }
        .btn-more{transition:0.4s;
            &:hover{
                span{transition:0.2s; animation:moreBtn 1.3s infinite linear alternate;}
            }      
        }
    }  
}

//footer
.footer-info{
    padding:1% 0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    flex-direction:column;
    font-size:0.75rem;
    color:rgb(var(--bs-gray-boulder));
    border-top:1px solid rgb(var(--bs-gray-soft));
    background-color:rgb(var(--bs-gray-softPeach));
    & > .footer-info-business {
        margin:0 0 5px;
    }
}

@include x-large{//1400px
    .main-contents-wrap{padding:30px;}
    .ad-list{
        .type{padding:20px;}
    }
    .ad-detail-info{flex-wrap:wrap;
        .col{flex:0 0 auto; width:25%;
            &:nth-child(n+5){margin-top:15px;}
        }
    }
    .btn-top{
        span{display:none;}
    }
}
@include large{//1200px
    .ad-list{
        .row{position:relative;}
        .summary{flex-wrap:wrap;
            strong{width:100%; margin:0 0 10px;}
        }
        .btn-more{position:absolute; top:15px; right:20px; width:auto; color:rgb(var(--bs-dark-metal)); background:none;
            span{padding:0; background:none;}
        }
    }
    //메인페이지
    .main-contents-wrap{
        .ad-list{  
            .type:hover+.btn-more, .type:focus+.btn-more, .type:target+.btn-more{
                span{animation:none;}
                &::after{display:block; content:'더 보기'; position: absolute; bottom:-100%; left:5px; animation:moreBtn_mo .3s  linear alternate; font-size:0.8rem; color:rgb(var(--bs-dark-metal));font-weight: bold;}
            }
            .btn-more{
                width:auto;
                background:rgb(var(--bs-dark-metal));
                padding:5px 14px;
                border-radius:4px;
                span{
                    padding:0; 
                    // background:url("/img/ico_arrow.png") no-repeat center 0; 
                    color:transparent;
                    @include bg('ico_arrow.png', center, 0);
                    width:1.3rem; 
                    height:0.85rem; 
                    background-size:contain;
                }   
            }
            .btn-primary{background:rgb(var(--bs-red-primary));}
        }
    }
}
@include medium{//1024px
    .wrap{min-width:580px;}
    .main-contents-wrap{padding:30px 30px 30px 70px;margin-left:1em;}
    .left-side{
        height:100%;
        padding:13px 0 10px;
        .btn-menu{
            top:13px;
        }
    }
    .nav-wrap{
        margin-top:20px;
        overflow-y:auto;
        overflow-x:hidden;
        scroll-behavior:smooth;
        .nav{width:240px;
            > li {
                padding:15px 0 0 12px;
            }
            > li:not(:last-child){
                margin:0 0 10px;
                padding:15px 0 0 13px;
            }
            > li:last-child{
                margin:0 0 20px;
            }
        }
    }
    .util-nav{
        a {
            margin:40% 0 0;
        }
        &.active {
            a{  
                &::before {
                    content:none;
                }
            }
        }
    }
    .ad-list{
        .type{margin:0;}
    }
}
@include small{//768px 
    .section.position-relative {
        .btn-wrap{justify-content:flex-start;}
    }
}