/* Login Page CSS */
body.login-body { background: white; }
body.login-body * { font-size: 15px; }

.login-body .wrapper { display: block; max-width: 680px; width: 80%; margin: 100px auto; }
.login-body h1 { color: #1e5491; font-size: 48px; letter-spacing: -3px; text-align: center; margin: 100px 0 80px 0;
    transition: .2s linear;  font-weight: 700; }

.links { list-style-type: none; margin: 0; }
.links li { display: inline-block; margin: 0 20px 0 0; transition: .2s linear; }
.links li:nth-child(2) { opacity: .6; }
.links li:nth-child(2):hover { opacity: 1; }
.links li:nth-child(3) { opacity: .6; float: right; }
.links li:nth-child(3):hover { opacity: 1; }
.links a { text-decoration: none; color: #0f132a; font-weight: bolder; text-align: center;
    cursor: pointer; font-size: 20px; }

.login-body form { width: 100%; max-width: 680px; margin: 20px auto 10px; }
form.register-form { opacity: 0; display: none; }

.login-body .input-block { margin: 20px auto; display: block; position: relative; }
.input-block.first-input-block::before { content: ""; position: absolute; top: -15px; left: 50px;
    display: block; width: 0; height: 0; background: transparent; border-left: 15px solid transparent;
    border-right: 15px solid transparent; border-bottom: 15px solid rgba(15, 19, 42, 0.1); transition: .2s linear; }
.input-block.signup-input-block::before { content: ""; position: absolute; top: -15px; left: 150px;
    display: block; width: 0; height: 0; background: transparent; border-left: 15px solid transparent;
    border-right: 15px solid transparent; border-bottom: 15px solid rgba(15, 19, 42, 0.1); transition: .2s linear; }
.login-body input { display: block; width: 90%; max-width: 680px; height: 50px; margin: 0 auto; border-radius: 8px;
    border: none; background: rgba(15, 19, 42, 0.1); color: rgba(15, 19, 42, 0.3); padding: 0 0 0 15px; outline: none; }
.login-body input:focus, .login-body input:active { outline: none; border: none; color: rgba(15, 19, 42, 1); }
input.repeat-password { opacity: 0; display: none; transition: .2s linear; }

.signin-btn { background: #1e5491; color: white; display: block; width: 90%; max-width: 680px; height: 50px;
    border-radius: 8px; margin: 0 auto; border: none; cursor: pointer;
    box-shadow: 0 15px 30px rgba(30, 40, 233, 0.132); transition: .2s linear; }
.signin-btn:hover { box-shadow: 0 0 0 rgba(233, 30, 99, 0); }

.main-btn { background: rgb(203, 203, 203); color: white; display: block; width: 90%; max-width: 680px; height: 50px;
    border-radius: 8px; margin: 0 auto; border: none; cursor: pointer;
    box-shadow: 0 15px 30px rgba(203, 203, 203, 0.132); transition: .2s linear; margin-top: 20px}
.main-btn:hover { box-shadow: 0 0 0 rgba(233, 30, 99, 0); }

.error-message { color: #FF3C2A;  font-weight: 700; font-size: 14px; width: 90%; max-width: 680px;
    margin: 0 auto; border: none; }
.error-message.error-pw { margin: 0 auto 20px auto; }

.separator { display: block; margin: 30px auto 10px; text-align: center; height: 40px; position: relative;
    background: transparent; color: rgba(15, 19, 42, 0.4); width: 90%; max-width: 680px; }
.separator::before { content: ""; position: absolute; top: 8px; left: 0; background: rgba(15, 19, 42, 0.2);
    height: 1px; width: 45%; }
.separator::after { content: ""; position: absolute; top: 8px; right: 0; background: rgba(15, 19, 42, 0.2);
    height: 1px; width: 45%; }

.google-btn, .naver-btn, .kakao-btn { display: block; width: 90%; max-width: 680px; margin: 20px auto;
    height: 50px; cursor: pointer; border-radius: 8px; border: none; line-height: 40px; }
.google-btn { background: #5b90f0; color: white; box-shadow: 0 15px 30px rgba(91, 144, 240, 0.36); transition: .2s linear; }
.google-btn:hover { box-shadow: 0 0 0 rgba(91, 144, 240, 0); }
.naver-btn { background: #03C75A; color: white; box-shadow: 0 15px 30px rgba(3,238,100,0.20); transition: .2s linear; }
.naver-btn:hover { box-shadow: 0 0 0 rgba(37, 40, 45, 0); }
.kakao-btn { background: #FEE500; color: #000000; box-shadow: 0 15px 30px rgba(254,229,0,0.2); transition: .2s linear; }
.kakao-btn:hover { box-shadow: 0 0 0 rgba(37, 40, 45, 0); }
.fa-google:before, .fa-naver:before, .fa-kakao:before { position: relative; font-size: 20px; top: 2px; right: 7px; }
.fa-kakao:before { top: 7px; }

/* My Page CSS */
.my-page-body .wrapper { width: 100vw; height: 100vh; padding-top: 65px; }
.my-page-body .left-side { width: clamp(250px, 15vw, 320px); height: calc(100% - 65px);
    position: absolute; padding-top: 50px; }
.my-page-body .center-content { width: 100%; height: 100%; padding-left: clamp(250px, 15vw, 320px); }
.my-page-body input { border-radius: 15px; padding-left: 10px; outline: none; }

.left-side > div:not(.info-border) { width: 100%; height: 60px; padding: 5px 10px; display: flex;
    align-items: center; cursor: pointer; }
.left-side div > svg { margin-left: 10px; }
.left-side div span { padding-left: 15px; font-size: 18px;  font-weight: 700; line-height: 1; }
.left-side .on { border-radius: 0px 30px 30px 0px; background: #E4EAFC;}
.left-side .info-border { height: 0; padding: 10px 16px; flex-direction: column; justify-content: center;
    align-items: flex-start; display: flex; }
.left-side .info-border > div { align-self: stretch; height: 0; border: 1px #CAC4D0 solid }

.center-content > div { width: 100%; height: 100%; display: grid; justify-content: center;
    align-items: center; overflow-y: auto; }
.user-info-content > div { display: flex; align-items: center; flex-direction: column;
    width: max(65vw, 900px); height: max(65vh, 600px); }
.user-info-content form { display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid #CAC4D0;
    border-radius: 10px; }
.user-info-content form > div { flex: 1; border-bottom: 1px solid #ccc; display: flex; align-items: center;
    width: 100%; }
.user-info-content form > div > *:nth-child(1) { flex: 2; display: flex; justify-content: start; padding-left: 5%;
    font-size: 18px; }
.user-info-content form > div > *:nth-child(2) { flex: 6; border: none; font-size: 1.3rem;  font-weight: 700;
    background: #FFF; padding-left: 10px; }
.user-info-content form > div > *:nth-child(2):before { font-family: "Font Awesome 6 Brands"; }
.user-info-content form > div > *:nth-child(3) { flex: 1; display: flex; justify-content: center; }
.user-info-content form .c-google { color: #5b90f0; }
.user-info-content form .c-naver { color: #03C75A; }
.user-info-content form .c-kakao { color: #FEE500; }
.user-info-content svg { cursor: pointer; }
.user-info-content .edit-btn { width: 70px; height: 40px; border-radius: 10px; background-color: var(--color-new-orange); color: #FFF; border: none; }
.user-info-content .edit-btn span { font-size: 15px; line-height: 1px; }
.user-info-content .error-message { position: absolute; margin: 4% 0 0 17%; }

.search-log-content { padding-top: 100px; align-items: start !important; }
.search-log-content > div { width: 70vw; }
.search-log-content div.selectBtn { height: 40px; width: 65px; margin-left: 5px; cursor: pointer; font-size: 15px; }
.search-log-content div.selectBtn * {  font-weight: 700; }
.search-log-content div.btnSelected { color: #FFF; }

.user-delete-content > div { align-self: flex-start; width: max(30vw, 500px); height: max(30vh, 300px); margin-top: 16vh; }
.user-delete-content .user-delete-title {  font-weight: 700; border-bottom: 1px solid #CAC4D0;
    padding-bottom: 2%; margin-bottom: 5%; }
.user-delete-content .user-delete-explain { font-size: 18px; }
.user-delete-content .user-delete-input-div { margin-top: 2%; }
.user-delete-content .user-delete-input-div input { font-size: 18px; width: 50%; line-height: 1;
    border: 1px solid #afb1b2; height: 34px; }
.user-delete-content .user-delete-input-div .password-check-cancel { background-color: #929292; }
.user-delete-content .user-delete-input-div button { width: 70px; height: 40px; border-radius: 10px; margin: 2% 1% 1% 1%;
    float: right; border: none; background-color: var(--color-new-orange); color: #FFF; }

.password-edit-check .user-delete-input-div { margin: 0 0 0 2%; }
.password-edit-check .user-delete-input-div input { width: 300px; }
.password-edit-check .user-delete-explain.d-flex { padding: 2% 0 2% 0; }
.password-edit-check .user-delete-explain label { padding-top: 6px; width: 170px; }






/* 미디엄 디바이스용 스타일 */
@media (min-width: 768px) and (max-width: 991px) {
}

/* 스몰 디바이스용 스타일 */
@media (max-width: 767px) {

    .wrapper {
        padding-bottom: 20px;
    }

    /* Login */
    .login-body .wrapper { width: 100%; margin: 0; }
    .login-body h1 { margin: 0; padding: 60px; }

    /* My Page */
    .my-page-body .wrapper { height: auto; padding-bottom: 20px; }
    .my-page-body .center-content { margin: 5vh auto 90px auto; width: 90%; padding-left: 0; }
    .my-page-body .center-content > div { height: auto; display: inherit; }
    .user-info-content form { height: 450px; border: none; }
    .user-delete-content .user-delete-input-div button, .user-info-content .edit-btn { width: 60px; height: 35px; }
    .user-info-content form * { font-size: inherit; }

    /* 회원 정보 */
    .my-page-body .left-side { width: 100%; height: auto; position: relative; padding-top: 25px; }
    .user-info-content svg { width: 25px !important; }
    .user-info-content > div { width: 100%; height: 100%; }
    .user-info-content form > div > *:nth-child(2) { width: 100%; }
    .user-info-content .error-message { margin: 17% 0 0 0; width: 100%; }
    .user-info-content form > div > *:nth-child(1), .user-info-content form > div > *:nth-child(2) { font-size: 15px; }
    .user-info-content .edit-btn span { font-size: inherit; }

    /* 검색 기록 */
    .search-log-content { padding-top: 0; }
    .search-log-content table tbody td:nth-child(2) { white-space: nowrap; }
    .search-log-content > div { width: 90vw; }
    .search-log-table tr *:nth-child(2), .search-log-table tr *:nth-child(3), .search-log-table tr *:nth-child(4), .search-log-table tr *:nth-child(6) { display: none; }
    #ctrlLine { margin-top: 1rem; }
    #ctrlLine .col-12.col-lg-10.d-flex.justify-content-between { flex-direction: column; }
    #ctrlLine .box-subtitle { margin-bottom: 10px; }
    #searchHistory .page-nation { display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .page-nation .page-info { position: relative; margin-top: 10px; width: auto; }
    #ctrlLine .search-box-div { flex-direction: column; }
    #ctrlLine .search-box-div > div { align-self: end; }
    #ctrlLine .search-box-div > div.d-flex { padding: 0 0 5px 0 !important; }

    /* 회원 탈퇴 */
    div.user-delete-content { height: auto; }
    .user-delete-content > div { width: 95%; height: auto; margin-top: 0; padding-left: 5%; }
    .user-delete-content .user-delete-input-div input { width: 100%; font-size: 16px; }
    .user-delete-content .user-delete-input-div button { margin: 7% 1% 1% 1%; }
    .password-edit-check > div { flex-direction: column; }
}