@charset "UTF-8";

.member-content {min-height: calc(var(--vh, 100dvh) - 74px - 316.17px); display: flex;}
.login-box {width: 100%; max-width: 630px; padding-top: 20px; padding-bottom: 20px; margin: auto;}
.login-box .caption {color: var(--highlight); margin-bottom: 35px;}
.login-box .input-area + .input-area {margin-top: 12px;}
.login-box .input-area {position: relative;}
.login-box .input-area label {color: var(--darkgray); position: absolute; top: 50%; left: 12px; transform: translateY(-50%);}
.login-box .input-area input, .login-box .input-area select {width: 100%; padding-left: 90.2px; border-color: transparent; border-bottom-color: var(--darkgray);}
.login-box .input-area input[type='text'],
.login-box .input-area input[type='password'],
.login-box .input-area select {border-radius: 0; background: transparent;}
.login-box .input-area input[type='number'] {border-radius: 0;}
.login-box .btn-login {width: 100%; height: 46px; background: var(--highlight); color: #FFF; margin-top: 15px;}
.login-box .btn-install-pwa {width: 100%; height: 46px; background: #fff; color: var(--highlight); border: 1px solid var(--highlight); border-radius: 4px; margin-top: 10px; cursor: pointer; transition: background 0.2s;}
.login-box .btn-install-pwa:hover {background: var(--blue50);}
.login-box .error {color: var(--raspberry); margin: 7px 0;}

.pwa-ios-guide {display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center;}
.pwa-ios-guide.active {display: flex;}
.pwa-ios-guide .pwa-ios-guide-bg {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);}
.pwa-ios-guide .pwa-ios-guide-inner {position: relative; background: #fff; border-radius: 8px; padding: 28px 24px; max-width: 340px; width: 90%; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);}
.pwa-ios-guide .pwa-ios-guide-inner .close {position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--darkgray);}
.pwa-ios-guide .pwa-ios-guide-inner h2 {margin-bottom: 12px; color: var(--highlight);}
.pwa-ios-guide .pwa-ios-guide-inner ol {padding-left: 22px;}
.pwa-ios-guide .pwa-ios-guide-inner li {margin-bottom: 8px; line-height: 1.6; color: var(--darkgray);}
.login-box .btn-google-login {display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: 4px; margin-top: 12px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.2s;}
.login-box .btn-google-login:hover {background: #f8f9fa;}
.login-box .btn-google-login .google-logo {width: 18px; height: 18px;}
.login-box .signup-desc {color: var(--darkgray); margin-bottom: 24px; line-height: 1.6;}
.login-box .tab-area {display: flex; margin-bottom: 32px; border-bottom: 2px solid var(--lightgray, #e0e0e0);}
.login-box .tab-area .tab-btn {flex: 1; padding: 12px 0; text-align: center; text-decoration: none; color: var(--darkgray); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s;}
.login-box .tab-area .tab-btn.active {color: var(--highlight); border-bottom-color: var(--highlight);}
.login-box .tab-area .tab-btn:hover:not(.active) {color: var(--highlight);}



.privacy-modal-backdrop{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: 100;display: flex;justify-content: center;align-items: center;font-family: 'Pretendard';padding: 20px;}
.privacy-modal-backdrop .bg{background: #0000007e;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
.privacy-modal-backdrop .privacy-modal{background: #fff;border-radius: 12px;max-width: 520px;width: 100%;}
.privacy-modal-backdrop .privacy-hd{padding: 32px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #cacaca;}
.privacy-modal-backdrop .privacy-hd h3{font-size: 22px;}
.privacy-modal-backdrop .privacy-hd .btn-privacy-close{width: 32px;height: 32px;display: flex;justify-content: center;align-items: center;padding: 8px;}
.privacy-modal-backdrop .privacy-hd .btn-privacy-close svg{width: 100%;height: 100%;}
.privacy-modal-backdrop .privacy-content{padding: 32px;display: flex;flex-direction: column;gap: 20px;}
.privacy-modal-backdrop .privacy-content strong{font-size: 20px;}
.privacy-modal-backdrop .privacy-content p{color: #777;}
.privacy-modal-backdrop .privacy-content .popup-privacy{padding: 16px;display: flex;justify-content: space-between;align-items: center;background: #EEF3F7;border-radius: 8px;font-family: 'Pretendard';}
.privacy-modal-backdrop .privacy-content .popup-privacy:hover{background: #cfcfcf;}
.privacy-modal-backdrop .privacy-content .btn-box{display: flex;gap: 32px;}
.privacy-modal-backdrop .privacy-content .btn-box button{flex: 1;display: flex;justify-content: center;align-items: center;padding: 16px;font-size: 18px;font-weight: 700;border-radius: 8px;font-family: 'Pretendard';}
.privacy-modal-backdrop .privacy-content .btn-box button.btn-cancel{border: 1px solid var(--highlight);color: var(--highlight);}
.privacy-modal-backdrop .privacy-content .btn-box button.btn-confirm{background: var(--highlight);color: #fff;}





@media (max-width:768px){
    .login-box {padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-r);}
    .privacy-modal-backdrop .privacy-hd,.privacy-modal-backdrop .privacy-content{padding: 24px;}
    .privacy-modal-backdrop .privacy-content .btn-box{gap: 24px;}
}