@mixin chk_input { //chckbox input style
    width:1px; 
    height:1px; 
    position:absolute; 
    right:0; 
    text-indent: -999px;
    &:checked + label{
        border-color: rgb(var(--bs-red-origin));
    }
    &:checked + label i.bi-check2::before {
        content:"\f26f";
        color:rgb(var(--bs-red-origin));
    }
}

@mixin chk_label($wd:20px,$h:20px){//chckbox label style
    width:$wd; 
    height:$h; 
    border-radius:50%; 
    border:1px solid rgb(var(--bs-black)); 
    position:relative; 
    cursor:pointer;
    &:hover{
        animation:flash 2s infinite;
    }
    i{
        display: block;  
        line-height: 1.2; 
        height: 100%;
    }
}

.agree-container{
    margin:0 auto;   
    .card{
        max-width: 500px;
        margin:0 auto; 
        --bs-card-border-color:transparent; 
        --bs-card-bg:inherit; 
    }
    .card-title{
        font-size:1.5rem; 
        margin:2.5rem 0;
    }
    .card-body{
        padding:0;
    }
    button:has(input[name="chk_all"]){
        width:100%; 
        height:4.375rem; 
        position:relative; 
        padding:5px; 
        margin-bottom:3.12rem;  
        background-color:rgb(var(--bs-gray-softPeach));  
        border-radius:14px; 
        font-size:1.1rem; 
        transition:all 0.2s ease-out;  
        &:hover{
            box-shadow: 5px 5px 15px rgb(var(--bs-gray-border));
            transition:all 0.2s ease-out;
        }
        input{
            @include chk_input;
        }    
        label{
            @include chk_label; 
            float: left;
        } 
    }
    .agree-box{
        margin: 0 auto;
        position:relative;
        h2{
            padding-left:0.5rem;
            font-size:1.1rem;
            span{
                color:rgb(var(--bs-red-primary));
            }
        }        
        input{
            @include chk_input;
        }    
        label{
            @include chk_label;
        }   
    }
    textarea{
        overflow-y:auto;
        width:100%;
        height:9.37rem;
        margin:1.5rem auto;
        background-color:inherit;
        border-radius:8px;
        border:1px solid rgb(var(--bs-gray-border));
        line-height: 1.4;
        font-size:90%;
        color:rgb(var(--bs-gray-600));
    }
    .row:has(a.confirm_agree){
        margin:0;
        a.confirm_agree{
            display:block;
            width:100%;
            height:4.375rem;
            margin-top:1.5rem;
            border-radius:14px;
            line-height:4.375rem;
            text-align:center;
            background-color:rgb(var(--bs-red-primary));
            font-size:1.25rem;
            color:rgb(var(--bs-white));
        }
    }   
}

// 반응형 사용 
@include mobile-500{
    .agree-container{
        .agree-box{
            label{
                i{
                    line-height: 1.5;
                }
            }
        }        
    }
}