@charset "utf-8";
@import url(../root.css);

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 상단 타이틀 밑줄 */
.container .content_header h2 {
  font-size: 28px;
  font-weight: 800;
  padding-bottom: 8px;
  margin: 0 0 18px 0;
  border-bottom: 4px solid #0f0f0f;
  display: inline-block;
}

/* 로그인 전체 박스 */
.login_wrap {
  max-width: 760px;
  margin: 60px auto 220px auto;
  background: #f5f6f8;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: clamp(20px, 10vw, 40px);
}

/* 입력 2칸 + 우측 버튼 */
.login_box {
  display: flex;
  align-items: stretch;
  gap: 14px;
}
.login_box .input {
  flex: 1 1 auto;
  display: grid;
  gap: 10px;
}

/* 입력창 */
.login_wrap .login_box [data-input] input {
  height: 44px;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  border: 2px solid var(--btn_blue);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  line-height: 44px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.login_wrap .login_box [data-input] input::placeholder {
  color: #b8bec9;
}
.login_wrap .login_box [data-input] input:focus {
  border-color: var(--btn_blue);
  box-shadow: 0 0 0 3px rgba(47, 90, 233, 0.15);
  outline: none;
}

/* 로그인 버튼 */
#loginBtn {
  width: 120px;
  min-width: 110px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--btn_blue);
  color: #fff;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(47, 90, 233, 0.22);
  transition: transform 0.02s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
#loginBtn:hover {
  box-shadow: 0 8px 20px rgba(47, 90, 233, 0.28);
}
#loginBtn:active {
  transform: translateY(1px);
}

/* Save ID 체크 */
.login_wrap ul[data-option] {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.login_wrap ul[data-option] input[type="checkbox"] {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0;
}
.login_wrap ul[data-option] label {
  cursor: pointer;
}

/* 비밀번호 찾기 버튼(회색 라운드) */
.login_wrap ul[data-ctr-btn] {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: flex;
  justify-content: center;
}
.login_wrap ul[data-ctr-btn] a.rounded {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 10px;
  background: #aaaaaa;
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.03);
  transition: filter 0.2s ease;
}
.login_wrap ul[data-ctr-btn] a.rounded:hover {
  filter: brightness(0.95);
}
.login_wrap ul[data-ctr-btn] a.rounded i {
  margin-right: 6px;
}

/* 하단 안내문 */
.login_wrap > p {
  text-align: center;
  color: #6b7280;
  margin-top: 18px;
}

/* (선택) 모달 폼 테이블 톤 맞춤 */
.vertical_borderless {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.vertical_borderless th {
  width: 200px;
  text-align: left;
  color: #333;
  padding: 8px 10px;
}
.vertical_borderless td {
  padding: 8px 10px;
}
.vertical_borderless [data-input].box input {
  height: 40px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid #d0d3d9;
  border-radius: 6px;
}
.vertical_borderless [data-input].box input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(47, 90, 233, 0.12);
  outline: none;
}

/* Find Password 모달 */
#findPassword {
  display: none; /* ★ 오버레이 자체를 숨김 */
  position: fixed;
  inset: 0; /* top:0; left:0; width:100%; height:100% 동일 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center; /* 열릴 때 중앙정렬 */
  justify-content: center;
}

#findPassword .password-modal {
  background: #fff;
  padding: 20px 24px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  position: relative; /* 닫기버튼 absolute 기준 */
}

#findPassword .password-modal h1 {
  font-weight: 800;
  color: #113378;
  border-bottom: 3px solid #113378;
  padding-bottom: 8px;
}
#findPassword .close {
  position: absolute;
  right: -12px;
  top: -12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #062366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#findPassword .vertical_borderless {
  width: 100%;
  border-collapse: collapse;
}
#findPassword .vertical_borderless tr {
  border-bottom: 1px solid #e6e8ef;
}
#findPassword .vertical_borderless th,
#findPassword .vertical_borderless td {
  padding: 14px;
}
#findPassword .vertical_borderless th {
  text-align: left;
  white-space: nowrap;
  color: #223047;
}
#findPassword [data-input].box input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  outline: 0;
}
#findPassword [data-input].box input:focus {
  box-shadow: 0 0 0 3px rgba(36, 71, 162, 0.12);
}
#findPassword ul[data-ctr-btn] {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
#findPassword #findBtn2 {
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 800;
  color: #fff;
  background: var(--btn_blue);
  cursor: pointer;
}
#findPassword #findBtn2:hover {
  filter: brightness(0.98);
}

.countrycode {
	margin-bottom: 16px;
}

/* 숨김 + 레이어 기본값 */
[data-password-modal] {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
}

/* 열림 상태 */
#findPassword.is-open {
  display: flex; /* ★ 열릴 때만 flex */
}

/* 닫기 버튼(선택) */
.password-modal .close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

@media (max-width: 1024px) {
  .vertical_borderless tr {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .findPassword-tbody th,
  .findPassword-tbody td {
  	margin-bottom: 0 !important;
  	padding: 0 !important;
  }
}
 

.pwChgCnt {
	display: none;
}
@media (max-width: 1024px) {
	.pwChgCnt {
		display: none !important;
	}
}

.fail-msg {
	text-align: center;
	margin-top: 10px;
	color: red;
}

@media (max-width:1025px){
	.login_box {
	    flex-direction: column;
	}
	
	#loginBtn {
		width: 100%;
	}
}