/* src/main/webapp/resources/css/page/auth/loginModal.css */

/* =========================
   KDL 로그인 모달 (loginModal.css)
   (signupModal.css를 기반으로 작성)
========================= */

/* -- 모달 오버레이 및 컨테이너 -- */
/* signupModal.css의 .login-modal-overlay, .login-modal-overlay.visible, .login-modal-container와 동일하게 사용 */
/* 이 부분은 signupModal.css에 이미 있으므로 중복을 피하기 위해 실제 파일에는 포함하지 않거나,
   common.css 같은 공통 파일로 분리하는 것을 권장합니다. */
.login-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.55);
    display: none; justify-content: center; align-items: center;
    z-index: 1000;
}
.login-modal-overlay.visible { display: flex; }

.login-modal-container {
    display: flex; 
    flex-direction: column;
    background: #f9fbfd;
    border-radius: 13px;
    box-shadow: 0 6px 32px rgba(44,60,90,.18);
    width: 92vw; 
    max-width: 420px;
    padding: 30px 50px 30px 50px;
    /* min-height는 로그인 모달의 내용이 적을 수 있으므로 조정하거나 제거 가능 */
    min-height: 480px; /* 로그인 모달에 맞게 조정 */
    overflow-y: auto;
}

/* -- 헤더 -- */
.login-modal-header-wrap { 
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}
.login-modal-header-row {
	display: flex; 
	justify-content: flex-end; 
	align-items: center; 
	min-height: 38px;
	margin-bottom: 20px;
}
.btn-login-modal-close {
    font-size: 1.6rem; background: none; border: none;
    color: #616161; border-radius: 50%;
    width: 40px; height: 40px; cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.btn-login-modal-close:hover { background: #ffebee; color: #d32f2f; }
.login-modal-title { font-size: 1.45rem; font-weight: 500; color: #222; margin: 0 0 10px 0; text-align: center; }


.login-hr-separator {
  border: none;
  border-top: 2px solid #b2cef1;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* -- 로그인 폼 레이아웃 -- */
.login-row-wrap {
    display: flex;
    flex-direction: column; /* 세로로 쌓음 */
    gap: 8px; /* label, input, msg 간 간격 */
    margin-bottom: 20px; /* 각 행(input group) 사이의 간격 */
    width: 100%;
}
/* 특정 행에 대한 추가적인 조정 (예: 로그인 버튼 행) */
.login-row-wrap.login-btn-action {
    margin-bottom: 50px; /* 로그인 버튼 위 간격 */
    align-items: center;
    text-align: center;
}
/* 아이디 저장 체크박스 행 */
.login-row-wrap.remember-id-checkbox {
  display: flex;
  flex-direction: row; /* 체크박스와 레이블을 가로로 */
  align-items: center;
  justify-content: flex-start;   /* 좌측 정렬 */
  gap: 8px;                      /* 라벨-체크박스 간격 */
  margin-bottom: 70px;           /* 필요시 간격 조절 */
}

/* 체크박스와 라벨의 순서가 label → input 이라면(HTML 기준) 플렉스 방향 유지 */
.login-row-wrap.remember-id-checkbox label {
  margin: 0;
  order: 1;       /* 필요시 순서 지정 */
  /* font-size: 1rem; */
}

.login-row-wrap.remember-id-checkbox input[type="checkbox"] {
  order: 2;       /* 필요시 순서 지정 */
  margin: 0 0 0 4px;
}

/* -- 입력 필드 (input/text/password 등) -- */
/* signupModal.css의 .login-input-field와 동일하게 사용 */
.login-input-field {
    width: 100%; min-width: 0; height: 40px;
    padding: 0 8px;
    border: 1px solid #348BEE;
    border-radius: 5px;
    font-size: 1.03rem; color: #333;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color .14s, box-shadow .13s;
}
/* 입력 필드: hover/focus 효과 */
.login-input-field:focus, .login-input-field:focus-visible {
    border-color: #bbaaff;
    background-color: #f6f2fe;
    box-shadow:
      0 0 0 2px #d7cfff,
      0 0 0 5px #ede7ff;
    outline: none;
}
.login-input-field:hover {
    border-color: #79c4ff;
    background-color: #f0f7ff;
    box-shadow: 0 0 0 2px #e6f2ff;
    transition: all 0.16s;
}
.login-input-field::placeholder { color: #bdbdbd; }
.login-input-field:disabled {
    background: #f6f8fa; border-color: #dde8f2; color: #b0b7c3; cursor: not-allowed; box-shadow: none;
}

/* -- 비밀번호 보이기/숨기기 그룹 -- */
.password-input-group {
    position: relative;
    width: 100%;
}
.password-input-group .login-input-field {
    padding-right: 40px; /* 버튼 공간 확보 */
}
.btn-toggle-password-visibility {
    position: absolute;
    right: 5px; /* 인풋 오른쪽에서 간격 */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* 버튼 영역 크기 */
    height: 30px;
    border-radius: 50%;
    transition: background 0.18s;
}
.btn-toggle-password-visibility:hover {
    background-color: #e6e6e6; /* hover 효과 */
}
.btn-toggle-password-visibility img {
    width: 20px; /* 아이콘 크기 */
    height: 20px;
    display: block;
}

/* -- 비밀번호 안내 -- */
.login-password-info { font-size: 12px; color: #7e8892; padding-left: 2px; margin-top: 2px; }

/* -- 안내 메시지 (유효성, 에러, 성공) -- */
/* signupModal.css의 .login-input-msg, .login-input-msg.error, .login-input-msg.ok, .login-input-msg.success와 동일하게 사용 */
.login-input-msg {
    margin-top: 2px; font-size: 0.75em; font-weight: 300; min-height: 16px;
    color: #888; transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.login-input-msg.error { color: red; }
.login-input-msg.ok { color: green; }
.login-input-msg.success { color: #bbaaff; }

/* 로그인 실패/성공 메시지 (modal 전용) */
.login-error-msg {
    color: #d32f2f; /* 빨간색 */
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 15px;
    padding: 8px 10px;
    background-color: #ffebee;
    border: 1px solid #d32f2f;
    border-radius: 5px;
}
.login-success-msg {
    color: #2e7d32; /* 초록색 */
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 15px;
    padding: 8px 10px;
    background-color: #e8f5e9;
    border: 1px solid #2e7d32;
    border-radius: 5px;
}


/* -- 체크박스 -- */
/* signupModal.css의 .comm-checkbox와 동일하게 사용 */
.comm-checkbox { accent-color: #348bee; width: 18px; height: 18px; cursor: pointer; }
.comm-checkbox:hover, .comm-checkbox:focus {
    border-color: #bbaaff;
    background-color: #f6f2fe;
    box-shadow:
      0 0 0 2px #d7cfff,
      0 0 0 5px #ede7ff;
    outline: none;
}

/* -- 로그인 버튼 -- */
/* 로그인 버튼 기본 스타일 */
/* -- 로그인 버튼 -- */
.btn-login {
    width: 100%;             /* 부모 요소의 너비를 꽉 채움 */
    /* max-width: 280px; */        /* 최대 너비 지정 (모바일/데스크탑 반응형 고려) */
    /* height: 48px; */            /* 버튼 높이 */
    /* 로그인 버튼의 그라디언트 배경 */
    background: linear-gradient(90deg, #348BEE 30%, #2a7adc 100%);
    color: #fff;             /* 텍스트 색상 */
    border: none;            /* 그라디언트 배경이므로 테두리 없음 */
    border-radius: 24px;     /* 더 둥근 모서리 (height의 절반으로 완전한 타원형) */
    font-size: 1.03rem;      /* 텍스트 크기 */
    font-weight: 400;        /* 텍스트 굵기 */
    cursor: pointer;         /* 마우스 오버 시 포인터 변경 */
    letter-spacing: 0.05em;  /* 자간 */
    display: inline-flex;    /* 아이콘과 텍스트를 한 줄에 정렬 */
    align-items: center;     /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    gap: 8px;                /* 아이콘과 텍스트 사이 간격 */
    transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out; /* 부드러운 전환 효과 */
    box-shadow: 0 4px 10px rgba(52, 139, 238, 0.2); /* 은은한 그림자 효과 */
}

.btn-login:focus-visible {
  background: #e3f2fd !important; color: #256ac0 !important;
  border-color: #64b9f8 !important;
  box-shadow: 0 0 8px #dbeffe; outline: 1px solid #bbaaff;
}

/* 로그인 버튼 호버 효과 */
.btn-login:hover {
    background: linear-gradient(90deg, #2a7adc 30%, #348BEE 100%); /* 그라디언트 방향 또는 색상 미묘하게 변경 */
    box-shadow: 0 6px 15px rgba(52, 139, 238, 0.3); /* 그림자 강화 */
}

/* 로그인 버튼 내부 KDL 로고 이미지 */
.btn-login img {
    width: 22px;             /* 로고 이미지 너비 */
    height: 22px;            /* 로고 이미지 높이 */
    vertical-align: middle;  /* 텍스트와 이미지 수직 정렬 */
}

/* 로그인 버튼 비활성화 상태 */
.btn-login:disabled,
.btn-login.btn_disabled { /* JavaScript에서 btn_disabled 클래스 추가 시 */
    background: #a9d4fa;     /* 비활성화 시 연한 하늘색 배경 */
    color: #d0e6ff;          /* 텍스트 색상: 더 밝고 연한 파란색 */
    cursor: not-allowed;     /* 마우스 커서 변경 */
    box-shadow: none;        /* 그림자 제거 */
    border: none;            /* 테두리 제거 */
    opacity: 0.9;            /* 전체적으로 약간 투명하게 */
}

/* 비활성화된 로그인 버튼 내부 로고 이미지 */
.btn-login:disabled img,
.btn-login.btn_disabled img {
    opacity: 0.5;            /* 로고 이미지도 흐리게 */
}

/* -- 아이디/비밀번호 찾기 링크 그룹 -- */
.idpw-find-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px; /* 로그인 버튼과 간격 */
    margin-bottom: 25px; /* 회원가입 푸터와 간격 */
    font-size: 0.95rem;
    color: #6a7682;
}
.btn-w120 { /* 기존 btn_small 스타일 활용 */
    width: 120px;
    height: 29px;
    background: none;
    border: none;
    color: #343a40; /* 파란색 링크 */
    font-size: 1.03rem; /* 부모 font-size 따름 */
    cursor: pointer;
    padding: 0 5px;
    box-shadow: 0 2px 5px #0799f4;
    transition: color 0.16s, text-decoration 0.16s;
    text-decoration: none; /* 기본 밑줄 제거 */
}
.idpw-find-wrap .btn:hover {
    color: #2a7adc; /* 진한 파랑 */
    text-decoration: underline;
    text-underline-offset: 3px;
}
.idpw-find-wrap .separator {
    margin: 0 24px;
    color: #bdbdbd; /* 회색 구분선 */
}

/* -- 회원가입 푸터 -- */
/* signupModal.css의 .signup-footer와 동일하게 사용 */
.signup-modal-footer { /* 클래스명 변경으로 재정의 */
    display: flex; align-items: center; justify-content: center;
    margin-top: 22px; padding-top: 13px;
    border-top: 1px solid #8a50f7;
    font-size: 1rem; color: #6a7682;
}
.signup-modal-footer span { margin-right: 20px; } /* '아직 회원이 아니신가요?' 텍스트와 이미지/버튼 사이 간격 */
.signup-modal-footer img { width: 24px; height: 24px; margin-right: 8px; } /* 아이콘과 버튼 사이 간격 */
.signup-modal-footer .btnToSignup { /* 회원가입 버튼 스타일 */
    background: none; color: #348bee; font-size: 1.03rem; font-weight: 400;
    cursor: pointer; text-decoration: underline; padding: 0 2px; margin-left: 1px; 
    box-shadow: 0 2px 5px #8a50f7; text-underline-offset: 3px; width: 100px;
    transition: color .16s;
}
.signup-modal-footer .btn:hover {
    color: #512da8; /* 진한 보라 */
    text-decoration-color: #348bee;
    text-decoration-thickness: 1.5px;
}