/* CSS를 활용하여 레이아웃 및 스타일링을 완성해주세요 */

/* 1. Custom Properties (변수 설정) */
:root {
  --primary-color: #03cf5d;
  --bg-focus: #e9f0fd;
  --border-color: #dadada;
  --text-main: #121212;
  --focus-outline: #24388d;
  --white: #fff;
  /* 기본 글자 크기 16px 기준 rem 단위 설정을 위한 베이스 */
  --font-size-base: 1rem; /* 16px */
  --font-size-small: 0.875rem; /* 14px */
}

/* 2. 초기화 및 공통 스타일 (모바일 퍼스트) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: var(--font-size-base);
  color: var(--text-main);
  background-color: var(--white);
  min-width: 350px;
}

/* 웹 접근성을 위한 스크린 리더 전용 클래스 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 3. 레이아웃 (모바일: 768px 미만) */
.login-wrapper {
  width: 100%;
  min-width: 350px;
  max-width: 500px;
  padding: 0 1.25rem;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: center;
  margin: 3.125rem 0 2.5rem; /* 위 50px, 아래 40px */
}

/* 로고 포커스 스타일 커스텀 */
.logo a:focus {
  outline: 2px solid var(--focus-outline);
  outline-offset: 4px;
}

/* 4. 입력 서식 (아이디, 비밀번호) */
.input-field {
  margin-bottom: 1rem;
  position: relative;
}

.input-field input {
  width: 100%;
  height: 2.8125rem;
  padding: 0.625rem;
  padding-left: 1.25rem;
  font-size: var(--font-size-small);
  border: 1px solid var(--border-color);
  background-color: var(--white);
}

/* [1] 에러 메시지 초기 상태 (완전 숨김) */
.error-msg {
  display: none;
  color: #ff0000;
  font-size: 0.75rem;
  margin-top: 0.35rem;
  padding-left: 1.25rem;
  font-weight: normal;
}

/* [2] 핵심 로직: 평소에는 조용히 하다가, 
   사용자가 잘못된 입력을 마쳤거나 제출을 시도했을 때만(:user-invalid) 노출 */
/* 이 선택자는 사용자가 '상호작용'을 끝내기 전까지는 에러를 띄우지 않습니다. */
.input-field input:user-invalid {
  border: 1px solid #ff0000;
}

.input-field input:user-invalid + .error-msg {
  display: block;
}

/* [3] 입력창 클릭 시 스타일 (평범한 포커스) */
.input-field input:focus {
  background-color: var(--bg-focus);
  outline: 2px solid var(--primary-color);
  border-color: var(--primary-color);
}

/* 5. 로그인 버튼 */
.btn-login {
  width: 100%;
  height: 45px;
  margin-top: 20px;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  font-size: var(--font-size-base);
  font-weight: bold;
  cursor: pointer;
}

/* 6. 로그인 상태 유지 및 IP 보안 영역 */
.login-helper {
  margin-top: 0.625rem;
  display: flex;
  /* justify-content: space-between; 기존 코드 주석처리*/
  justify-content: flex-end; /* 모바일이면 오른쪽 끝으로 밀기 */
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.keep-login {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* [핵심] SVG를 배경으로 사용하는 커스텀 체크박스 */
.custom-checkbox {
  appearance: none;
  width: 24px;
  height: 24px;
  margin-right: 0.3125rem;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* [1] 체크 안 된 상태 (unchecked.svg) */
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9764 23.4985C18.3541 23.4985 23.5242 18.3284 23.5242 11.9507C23.5242 5.57305 18.3541 0.402931 11.9764 0.402931C5.59877 0.402931 0.42865 5.57305 0.42865 11.9507C0.42865 18.3284 5.59877 23.4985 11.9764 23.4985Z' fill='white'/%3E%3Cpath d='M12.0021 24.0043C9.62833 24.0043 7.30784 23.3004 5.3341 21.9815C3.36036 20.6627 1.82201 18.7883 0.913599 16.5952C0.00518517 14.402 -0.232497 11.9888 0.230608 9.66063C0.693713 7.33244 1.83681 5.19387 3.51534 3.51534C5.19387 1.83681 7.33244 0.693713 9.66063 0.230608C11.9888 -0.232497 14.402 0.00518517 16.5952 0.913599C18.7883 1.82201 20.6627 3.36036 21.9815 5.3341C23.3004 7.30784 24.0043 9.62833 24.0043 12.0021C24.0043 15.1853 22.7398 18.2381 20.4889 20.4889C18.2381 22.7398 15.1853 24.0043 12.0021 24.0043ZM12.0021 1.28593C9.88267 1.28593 7.8108 1.91443 6.04853 3.09194C4.28626 4.26945 2.91274 5.94309 2.10166 7.90122C1.29057 9.85935 1.07836 12.014 1.49184 14.0928C1.90533 16.1715 2.92595 18.081 4.42464 19.5796C5.92332 21.0783 7.83277 22.0989 9.91151 22.5124C11.9902 22.9259 14.1449 22.7137 16.103 21.9026C18.0612 21.0915 19.7348 19.718 20.9123 17.9557C22.0898 16.1935 22.7183 14.1216 22.7183 12.0021C22.7183 9.16002 21.5893 6.43431 19.5796 4.42464C17.57 2.41496 14.8442 1.28593 12.0021 1.28593Z' fill='%23999999'/%3E%3Cpath d='M10.6647 16.9059C10.4932 16.905 10.3286 16.8374 10.2061 16.7173L6.66974 13.1809C6.61007 13.121 6.5628 13.0499 6.53061 12.9716C6.49843 12.8934 6.48197 12.8096 6.48216 12.725C6.48236 12.6405 6.49922 12.5568 6.53177 12.4787C6.56432 12.4006 6.61193 12.3297 6.67188 12.2701C6.73183 12.2104 6.80295 12.1631 6.88117 12.1309C6.95939 12.0987 7.04318 12.0823 7.12777 12.0825C7.21235 12.0827 7.29606 12.0995 7.37413 12.1321C7.4522 12.1646 7.52309 12.2122 7.58276 12.2722L10.639 15.3285L16.5072 8.81301C16.5619 8.74483 16.6299 8.68853 16.7071 8.64753C16.7843 8.60653 16.8691 8.58171 16.9562 8.57457C17.0433 8.56743 17.131 8.57812 17.2138 8.60601C17.2966 8.63389 17.3729 8.67837 17.438 8.73673C17.5031 8.79509 17.5556 8.8661 17.5923 8.94543C17.629 9.02476 17.6491 9.11074 17.6515 9.19812C17.6538 9.28549 17.6383 9.37243 17.6059 9.45362C17.5735 9.5348 17.5249 9.60853 17.4631 9.6703L11.1448 16.6916C11.0865 16.7572 11.0153 16.8101 10.9357 16.8469C10.856 16.8838 10.7696 16.9039 10.6819 16.9059H10.6647Z' fill='%23999999'/%3E%3C/svg%3E");
}

/* [2] 체크 된 상태 (checked.svg) */
.custom-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.9229 12.0021C23.9229 14.3609 23.2234 16.6666 21.9128 18.6277C20.6023 20.5889 18.7396 22.1173 16.5604 23.0198C14.3811 23.9222 11.9832 24.1581 9.66984 23.6977C7.3565 23.2372 5.23168 22.101 3.56411 20.4329C1.89654 18.7647 0.761138 16.6395 0.301494 14.326C-0.15815 12.0125 0.0786163 9.6146 0.981848 7.43567C1.88508 5.25674 3.4142 3.39461 5.37582 2.08479C7.33744 0.774969 9.64343 0.0763014 12.0022 0.0771492C13.568 0.0771491 15.1184 0.385629 16.565 0.984968C18.0116 1.58431 19.3259 2.46276 20.4329 3.57016C21.5399 4.67755 22.4179 5.99218 23.0167 7.43896C23.6155 8.88575 23.9234 10.4363 23.9229 12.0021Z' fill='%2303CF5D'/%3E%3Cpath d='M23.8328 12.0021C23.8328 18.5862 18.5947 23.9228 12.1393 23.9228C5.68381 23.9228 0.428589 18.5862 0.428589 12.0021C0.428589 5.4181 5.67953 0.0771484 12.1393 0.0771484C18.599 0.0771484 23.8328 5.41382 23.8328 12.0021Z' fill='%2303CF5D'/%3E%3Cpath d='M12.0021 24.0043C9.62835 24.0043 7.30786 23.3004 5.33411 21.9816C3.36037 20.6628 1.82203 18.7883 0.913614 16.5952C0.00520043 14.4021 -0.232482 11.9888 0.230623 9.66065C0.693728 7.33246 1.83682 5.19388 3.51535 3.51535C5.19388 1.83682 7.33246 0.693728 9.66065 0.230623C11.9888 -0.232482 14.4021 0.00520043 16.5952 0.913614C18.7883 1.82203 20.6628 3.36037 21.9816 5.3341C23.3004 7.30786 24.0043 9.62835 24.0043 12.0021C24.0043 15.1853 22.7398 18.2381 20.4889 20.4889C18.2381 22.7398 15.1853 24.0043 12.0021 24.0043ZM12.0021 1.28595C9.88268 1.28595 7.81082 1.91444 6.04855 3.09195C4.28628 4.26946 2.91275 5.94311 2.10167 7.90124C1.29059 9.85937 1.07836 12.014 1.49186 14.0928C1.90534 16.1715 2.92596 18.081 4.42465 19.5796C5.92334 21.0783 7.83278 22.0989 9.91152 22.5124C11.9903 22.9259 14.1449 22.7137 16.103 21.9026C18.0612 21.0915 19.7348 19.718 20.9123 17.9557C22.0898 16.1935 22.7183 14.1216 22.7183 12.0021C22.7183 9.16004 21.5893 6.43433 19.5796 4.42465C17.57 2.41497 14.8443 1.28595 12.0021 1.28595Z' fill='%2303CF5D'/%3E%3Cpath d='M10.6648 16.9059C10.4932 16.905 10.3287 16.8374 10.2061 16.7173L6.66976 13.1809C6.61009 13.121 6.56281 13.0499 6.53063 12.9716C6.49844 12.8934 6.48198 12.8096 6.48218 12.725C6.48238 12.6405 6.49924 12.5568 6.53179 12.4787C6.56434 12.4006 6.61195 12.3297 6.6719 12.2701C6.73185 12.2104 6.80296 12.1631 6.88119 12.1309C6.95941 12.0987 7.04318 12.0823 7.12778 12.0825C7.21237 12.0827 7.29608 12.0995 7.37415 12.1321C7.45222 12.1646 7.52311 12.2122 7.58278 12.2722L10.639 15.3285L16.5072 8.81301C16.5619 8.74483 16.63 8.68853 16.7072 8.64753C16.7843 8.60653 16.8691 8.58171 16.9562 8.57457C17.0433 8.56743 17.131 8.57812 17.2138 8.60601C17.2967 8.63389 17.373 8.67837 17.438 8.73673C17.5031 8.79509 17.5556 8.8661 17.5923 8.94543C17.629 9.02476 17.6491 9.11074 17.6515 9.19812C17.6538 9.28549 17.6383 9.37243 17.6059 9.45362C17.5736 9.5348 17.525 9.60853 17.4631 9.6703L11.1448 16.6916C11.0865 16.7572 11.0154 16.8101 10.9357 16.8469C10.856 16.8838 10.7697 16.9039 10.6819 16.9059H10.6648Z' fill='white'/%3E%3C/svg%3E");
}

/* 7. [IP 보안] - 모바일에서는 전체 숨김 */
.ip-security {
  /* [변경] 모바일 환경(768px 미만)에서 아예 보이지 않게 설정 */
  display: none;
  align-items: center;
}

.ip-link {
  text-decoration: none;
  color: var(--text-main);
  font-size: var(--font-size-base);
  margin-right: 0.25rem;
}

.switch-label {
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--border-color);
}

.switch-label::after {
  content: 'OFF';
}
#ip-switch:checked + .switch-label::after {
  content: 'ON';
  color: var(--primary-color);
}

/* 8. 데스크탑 스타일 (768px 이상) */
@media (min-width: 768px) {
  /* [추가] 데스크탑에서는 양 끝 정렬(좌:상태유지 / 우:IP보안)로 변경 */
  .login-helper {
    justify-content: space-between;
  }

  /* [추가] 숨겨두었던 IP 보안 영역을 다시 노출 */
  .ip-security {
    display: flex;
  }

  /* 데스크탑에서 스위치도 보이게 설정 */
  .ip-switch-wrapper {
    display: flex;
  }
}