/* 입장하기 버튼 */
.frame {
    width: 100%;
    text-align: center;
}
button {
    margin-top: 20px;
}

.custom-btn {
    width: 100%;
    color: #000;
    border-radius: 10px;
    font-size: clamp(1rem, 2vw, 0.5rem);
    padding: 14px;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
}
.custom-btn.typeB {
    padding: 10px;
    box-shadow:none;
}
#login_Btn {
    background: #d3d2d2;
    border: none;
    z-index: 1;
}

#login_Btn:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(to right top, #8538ff, #4eeaff);
    border-radius: 10px;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    transition: all 0.3s ease;
}

#login_Btn:hover {
    color: #fff;
}

#login_Btn:hover:after {
    left: 0;
    width: 100%;
}

#login_Btn:active {
    top: 2px;
}

/* ================================= */

/* =============== 입장하기 버튼 ====================*/

.gradation-btn {
    background: #d3d2d2; /*기본배경색 회색*/
    border: none; /*버튼 테두리 제거*/
    z-index: 1; /*버튼의 쌓임순서 - 다른 요소들보다 위에 위치하게*/
    
}

.gradation-btn:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    
    /*background: linear-gradient(to right top, #8538ff, #4eeaff);*/
    border-radius: 10px;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    transition: all 0.3s ease;
}

.gradation-btn:hover {    
    filter: brightness(85%); /* 밝기를 85%로 설정하여 톤 다운 효과 적용 */  
}

.gradation-btn:hover:after {
    content: '→'; /* 화살표 추가 */  
    right: 7px;
    display: flex;
    justify-content: right;
    align-items: center;   

}

/*버튼 클릭시 살짝 아래로 이동하는 효과*/
.gradation-btn:active {
    top: 2px;
}

/* ================================= */
/* ============= 수업 만들기 버튼 =============*/

.more-bt {  
    border: none; /*버튼 테두리 제거*/
    z-index: 1; /*버튼의 쌓임순서 - 다른 요소들보다 위에 위치하게*/
    padding: 10px 25px;  
    color: #fff;
    background: linear-gradient(to right top, #8538ff, #4eeaff);
    border-radius: 10px;
}

/*호버시 버튼색상 변경*/
.more-bt:hover {
    cursor: pointer;
    filter: brightness(85%); /* 밝기를 85%로 설정하여 톤 다운 효과 적용 */
}