/* member common */
input[type="password"],
input[type="text"]{
    padding: 16px 16px 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    transition: all .3s;
}
input[type="password"]::placeholder,
input[type="text"]::placeholder {
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: var(--bg-muted);
}
input[type="password"]:hover,
input[type="text"]:hover {
    border-color: var(--text-light-2);
}
input[type="password"]:focus,
input[type="text"]:focus {
    border-color: var(--text-muted);
}
input[type="password"]:not(:placeholder-shown),
input[type="text"]:not(:placeholder-shown) {
    border-color: var(--line-2);
}
.join-header~#main {
    min-height: calc(100vh - 81px - 74px);
}
.login { padding: 80px 0 70px 0; } 
.login-wrap { width: 500px; margin: 0 auto; } 
.login-title { margin-bottom: 40px; } 
.login-title h2 { margin-bottom: 16px; text-align: center; font-family: "Hanjin Group Sans"; font-size: 32px; font-weight: 700; line-height: 150%; } 
.login-title p { text-align: center; font-size: 16px; font-weight: 500; line-height: 150%; color: var(--text-light); } 

.login-btn-wrap { margin-bottom: 32px; } 
.login-btn-wrap a { display: flex; justify-content: center; align-items: center; position: relative; height: 52px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 16px; font-weight: 600; line-height: 150%; } 
.login-btn-wrap a:hover { background-color: var(--bg-soft); } 
.login-btn-wrap a + a { margin-top: 16px; } 
.login-btn-wrap a img { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); } 

.login-line-wrap { display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 32px; } 
.login-line-wrap span { display: inline-block; padding: 0 16px; text-align: center; font-size: 16px; font-weight: 500; line-height: 150%; color: var(--text-light); background-color: #fff; } 
.login-line { position: absolute; left: 0; top: 50%; z-index: -1; transform: translateY(-50%); width: 100%; height: 1px; background-color: var(--line-2); } 

.login-tab-menu { display: flex; margin-bottom: 24px; padding: 8px; border-radius: 12px; background: var(--bg-soft); } 
.login-tab-menu button { width: 50%; height: 44px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 150%; color: var(--text-light-2); transition: all .3s; } 
.login-tab-menu button:hover { color: var(--text-dark); } 
.login-tab-menu button.is-active { color: var(--text-dark); background-color: #fff; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.10); } 

.login-contents { display: none; } 
.login-contents.is-active { display: block; } 

.password { margin-bottom: 40px; } 
.form-row { display: flex; flex-direction: column; gap: 8px; } 
.form-row + .form-row { margin-top: 20px; } 
.form-row label { font-size: 16px; font-weight: 500; line-height: 140%; } 

.login-form .login-form-btn-wrap { display: flex; justify-content: center; margin-bottom: 32px; border-radius: 12px; background: var(--blue); } 
.login-form .login-form-btn-wrap + .login-form-btn-wrap { margin-top: 20px; } 
.login-form .login-form-btn-wrap button { width: 100%; height: 100%; padding: 14px 0 16px 0; font-family: "Hanjin Group Sans"; font-size: 20px; font-weight: 700; line-height: 150%; color: #fff; } 
.login-form .login-form-btn-wrap:hover { background-color: var(--bg-muted); } 
.login-form-btn-wrap.join-btn { background-color: #fff; border: 1px solid var(--line-2); } 
.login-form-btn-wrap.join-btn button { color: var(--text-dark); } 
.login-form .login-form-btn-wrap.join-btn:hover button { border-color: var(--bg-muted); color: #fff; } 

.form-options { display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; } 
.form-options a { font-size: 14px; font-weight: 500; line-height: 150%; color: var(--text-light-2); } 
.form-options a:hover { color: var(--text-dark); } 
.bar { width: 1px; height: 16px; background-color: var(--line-2); } 

@media screen and (max-width: 600px){
 .login-wrap { width: 100%; } 
 .login-title { margin-bottom: 30px; } 

 .form-row + .form-row { margin-top: 10px; } 
 .password { margin-bottom: 30px; } 
 .form-row input { padding: 14px 16px 12px 16px; } 
 .form-row input::placeholder { font-size: 14px; } 
 .login-form .login-form-btn-wrap + .login-form-btn-wrap { margin-top: 10px; } 
 .login-form .login-form-btn-wrap button { padding: 12px 0 14px 0; font-size: 16px; } 
 }