@charset "UTF-8";
/* ----------------------------------------
 * COSFET21 Login Page Styles
 * Created : 202504
 * topbar 공통 스타일은 cosfet21.css 참고
 --------------------------------------- */

/* ===== 페이지 배경 ===== */
.login-page-wrap {
    width: 100%;
    min-height: calc(85vh - 80px);
    background-color: #E4E4E4;
    display: flex;
    flex-direction: column;
}

/* 로그인 페이지만 topbar를 좌측 기준으로 배치 */
.login-page-wrap .cft21-topbar {
    width: 100%;
    max-width: 948px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ===== 카드 중앙 정렬 영역 ===== */
.login-card-area {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 390px;
    padding: 29px 16px 20px;
}

/* ===== 로그인 카드 ===== */
.login-card {
    width: 320px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15px;
    border: 1.5px solid #EAAEAE;
    padding: 40px 54px 36px 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== 카드 내 로고 ===== */
.login-card__logo {
    display: block;
    line-height: 0;
    margin-bottom: 42px;
}

.login-card__logo img {
    width: 169px;
    height: auto;
    display: block;
}

/* ===== 폼 ===== */
.login-card__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* ===== 입력 필드 ===== */
.login-card .login-card__input {
    width: 100%;
    height: 29px;
    padding: 0 10px;
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    outline: none;
    margin-bottom: 13px;
    box-sizing: border-box;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.login-card .login-card__input::placeholder {
    color: #AAAAAA;
}

.login-card .login-card__input:focus {
    border-color: #EAAEAE;
    background-color: #fff;
}

/* ===== 비밀번호 눈 아이콘 래퍼 ===== */
.login-input-pw-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 13px;
}

.login-input-pw-wrap .login-card__input {
    margin-bottom: 0;
    padding-right: 32px;
}

.login-toggle-pw {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 0;
}

.login-toggle-pw img {
    width: 16px;
    height: auto;
    opacity: 0.45;
}

.login-toggle-pw:hover img {
    opacity: 0.7;
}

/* ===== 자동 로그인 ===== */
.login-auto-row {
    width: 100%;
    margin-bottom: 12px;
}

.login-auto-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    user-select: none;
}

/* 전역 input 숨김 스타일 강제 해제 */
.login-auto-checkbox {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px;
    opacity: 1 !important;
    position: static !important;
    cursor: pointer;
    accent-color: #EAAEAE;
    flex-shrink: 0;
}

/* ===== 로그인 버튼 ===== */
.login-card__btn {
    width: 100%;
    height: 29px;
    background-color: #1A1A1A;
    border: none;
    border-radius: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    margin-bottom: 0;
}

.login-card__btn:hover {
    background-color: #333;
    color: #fff;
}

/* ===== 보조 링크 (회원가입 | 비밀번호 찾기) ===== */
.login-card__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 10px;
}

.login-card__link,
.login-card__link:link,
.login-card__link:visited {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-decoration: none;
    line-height: 20px;
    white-space: nowrap;
}

/* 회원가입 링크 */
.login-card__link--signup,
.login-card__link--signup:link,
.login-card__link--signup:visited {
    color: #F0424B !important;
}

.login-card__link--signup:hover,
.login-card__link--signup:active {
    color: #c42f37 !important;
}

/* 비밀번호 찾기 링크 */
.login-card__link--find-pw,
.login-card__link--find-pw:link,
.login-card__link--find-pw:visited {
    color: #222 !important;
}

.login-card__link--find-pw:hover,
.login-card__link--find-pw:active {
    color: #000 !important;
}

.login-card__link-divider {
    width: 1px;
    height: 10px;
    background-color: #626262;
    margin: 0 8px;
    flex-shrink: 0;
}

/* ================================================
   RESPONSIVE — Tablet (768px ~ 1199px)
   ================================================ */
@media only screen and (max-width: 1199px) {

    .login-page-wrap {
        min-height: 712px;
    }

    .login-card-area {
        padding: 20px 24px;
        align-items: center;
    }

    .login-page-wrap .cft21-topbar {
        padding: 20px 24px 16px 24px;
    }

}

/* ================================================
   RESPONSIVE — Mobile (~ 767px)
   ================================================ */
@media only screen and (max-width: 767px) {

    .login-page-wrap {
        min-height: calc(65vh - 60px);
    }

    .login-card {
        width: 100%;
        max-width: 320px;
        padding: 36px 32px 32px 32px;
    }

    .login-card__logo img {
        width: 140px;
    }

    .login-card-area {
        padding: 20px 16px;
        align-items: center;
    }

    .login-page-wrap .cft21-topbar {
        padding: 16px 16px 14px 16px;
    }
}