@charset "utf-8";
/* 공통 */
.wrap800 {max-width: 800px; width: calc(100% - 20px); margin: 0 auto;}
/* 버튼 */
.sc-btn{transition: background-color 0.2s; padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; justify-content: center; column-gap: 10px; font-size: 16px; font-weight: 500;}
.sc-btn.green {background-color: #3F6262; color: #fff;}
.sc-btn.green:hover {background-color: #2b4d4d;}
/* input 공통 */
input[type="file"],input[type="text"],input[type="password"],input[type="email"],input[type="number"] {background-color: #fff; border: 1px solid #CFCFCF; border-radius: 5px; padding: 12px; box-shadow: unset;}
/* input[type="text"]:read-only,input[type="password"]:read-only,textarea:read-only, input[readonly],textarea[readonly],input[disabled],textarea[disabled] {background-color: var(--input-readonly) !important;} */
input[type="submit"] {cursor: pointer;}
textarea {border: 1px solid #CFCFCF; border-radius: 5px; padding: 12px; box-shadow: unset; width: 100%; min-height: 150px;}
/* 셀렉트박스 */
/* 
    <div class="select-wrap">
        <label for="teacherSelect">Teacher Schedule Overview</label>
        <span class="custom-select">
            <select name="teacher" id="teacherSelect">
                <option value="all">All Teacher</option>
            </select>
        </span>
    </div>
*/
.custom-select {position: relative; width: 100%;}
.custom-select select {width: 100%; border: 1px solid #CFCFCF; background-color: #fff; cursor: pointer; padding: 12px; font-size: 14px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; appearance: none;}
.custom-select select:focus {border: 1px solid #000; transition: all 0.3s;}
.custom-select::after { position: absolute; width: 14px; height: 9px; background: url(../img/select-arrow.svg) no-repeat; top: 50%; right: 12px; transform: translate(0, -50%) rotate(0deg); transition: transform 0.3s ease; display: block; content: '';}
.select-wrap {width: 100%; max-width: 400px; display: flex; flex-direction: column; row-gap: 10px;}
.select-wrap label {font-size: 20px; font-weight: 600;}
/* 헤더 */
#hd {background-color: #3A3F45;}
#hd_wrapper {padding: 15px 0; display: flex; align-items: center; justify-content: space-between;}
#hd_wrapper .user-wrap {position: relative;}
#hd_wrapper .user-btn {display: flex; align-items: center; column-gap: 10px;}
#hd_wrapper .user-img {width: 40px; height: 40px; border-radius: 12px; background-color: #fff; display: flex; align-items: center; justify-content: center;}
#hd_wrapper .user-menu {display: none; position: absolute; top: calc(100% + 15px); right: 0; border-radius: 16px; background-color: #fff; z-index: 10;}
#hd_wrapper .user-menu span {white-space: nowrap;}
#hd_wrapper .user-menu::after {content: ""; position: absolute; top: -10px; right: 24px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff;}
/* 메인 */
#wrapper {padding: 50px 0 100px;}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */