/* login */
body{background-color: #FFFFFF;}

/* #login{position:absolute;top:0;left:0;bottom:0;right:0;width:500px;height:700px;margin:auto;background-color:#fff;border-radius:10px;box-shadow:10px 10px 15px rgba(0,0,0,0.15)} */
#login{position:absolute;top:0;left:0;bottom:0;right:0;width:550px;height:-moz-fit-content;height:fit-content;max-height:100%;margin:auto;background-color:#fff;border-radius:10px}
#login .login-wrap{position:relative;padding:80px 50px 40px 50px;height:auto;}

/* 제목/안내문구 등 장식용 텍스트 영역은 기본 화살표 커서 + 선택 방지 — 로고 옆 등에서 텍스트 커서(I-beam)로 보이는 것 방지 */
#login .login-wrap{cursor:default;user-select:none;}
#login .login-wrap input,
#login .login-wrap textarea{cursor:text;user-select:text;}
#login .login-wrap input[type="checkbox"],
#login .login-wrap .btn-login,
#login .login-wrap label{cursor:pointer;}
#login .signup-btn{cursor:pointer;user-select:none;}

#login .login-wrap .login-title {
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
    padding: 20px 0;
    letter-spacing: -1px;
}

#login .login-wrap p.label{margin-bottom:4px;color:#000000;font-size:16px;line-height:26px;font-weight:700}
#login .login-wrap p.welcome{margin-bottom:30px;text-align:center;color:#333;font-size:15px;line-height:26px;font-weight:700}
#login .login-wrap .input-wrap{height:36px;margin-bottom:10px;}
/* #login .login-wrap .input-wrap>input {width:100%;height:34px;border:none; font-family:'PAYW Pro'; background: url(../images/login_ico.png) no-repeat 0 0; padding-top: 25px; padding-left: 35px; padding-bottom: 25px; padding-right: 2%; border:1px solid #999; border-radius:5px; } */
#login .login-wrap .input-wrap>input {width:100%;height:34px;border:none; font-family:'Noto Sans'; padding-top: 25px; padding-left: 35px; padding-bottom: 25px; padding-right: 2%; border:1px solid #eee; border-radius:5px; }
#login .login-wrap .input-wrap>input:focus {border:1px solid var(--main-color); }


#login .login-wrap .input-wrap2{height:34px;margin-bottom:10px;}
/* #login .login-wrap .input-wrap2>input{width:100%;height:34px;border:none; font-family:'PAYW Pro'; background: url(../images/login_lock.png) no-repeat 7px 50%; padding-left: 35px; padding-right: 2%; border:1px solid #999; border-radius:5px; background-size: 18px; } */
#login .login-wrap .input-wrap2>input{width:100%;height:34px;border:none; font-family:'Noto Sans'; background: url(../images/login_lock.png) no-repeat 7px 50%; padding-left: 35px; padding-right: 2%; border:1px solid #999; border-radius:5px; background-size: 18px; }
/* #login .login-wrap .input-wrap2>input:focus {border: none; outline: none; } */
#login .login-wrap .input-wrap2.active { background: #ffe2e7 url(../images/login_lock.png) no-repeat 7px 50%; background-size: 18px; border-radius: 5px; }

#login .login-wrap .label_check{width:26px;height:26px;}

/* #login .login-wrap .input-wrap.pw{background-position:0 -40px} */
#login .login-wrap .id-save{margin:0px 0 20px;font-size:14px;}
#login .login-wrap .id-save button.pw-change { background: transparent; font-size: 12px; color: #777; float: right; }
#login .login-wrap .id-save button.pw-change:focus { border: none; outline: none; }
#login .login-wrap .btn-login{width:100%;height:58px;background-color:var(--main-color);color:#fff;font-weight:700;font-size:18px;border-radius:12px;}


/*
#login .homepage-btn {position:absolute;left:25px;bottom:25px; display: inline-block; width: 78.19px; height: 12px; }
#login .homepage-btn span.homepage{font-size:12px;line-height:1}
#login span.tel{position:absolute;right:25px;bottom:25px;font-size:12px;line-height:1}
#login span.tel strong{display:inline-block;margin-left:5px;font-family:'Roboto', sans-serif;font-size:18px;}
*/
#login span.homepage{font-size:13px;line-height:1}
#login span.homepage strong{display:inline-block;font-family:'Noto Sans', sans-serif;font-size:13px;font-weight:700}

#login span.homepageBtoom{font-size:13px;line-height:1}
#login span.homepageBtoom:hover{color:#c74002}
#login span.homepageBtoom strong{display:inline-block;font-family:'Noto Sans', sans-serif;font-size:13px;font-weight:700}


@media only screen and (max-width:720px) {
	#login{width:80%;height:90%;}
	#login .login-wrap{height:100%;padding:80px 30px 0 30px;}
	#login .login-wrap p.welcome{font-size:14px;}
}

.modal .title {
	display: flex;
	align-items: center;
	height: 53px;
	border-bottom: 1px solid #ccc;
	font-size: 18px;
	justify-content: center;
	color: #000;
	font-weight: bold;
}

.point {
	color: #ed5959;
}

.modal .modal-content {
	padding: 24px 28px 28px;
}

.initialLogin-info {
	width: 408px;
}

.initialLogin-info .password-notice {
	font-size: 16px;
	color: #333;
	text-align: center;
}

.initialLogin-info .password-info {
	padding: 12px;
	color: #787878;
	background-color: #f4f4f4;
	font-size: 12px;
	margin-top: 24px;
}

.initialLogin-info .icon {
	text-align: center;
	font-size: 0;
	margin-bottom: 20px;
}

.initialLogin-info .icon img {
	vertical-align: top;
}

.input-for-change {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 30px;
}

.input-for-change .input-item {
	display: flex;
	align-items: flex-start;
}

.input-for-change .input-item label {
	flex: 0 0 93px;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	display: inline-flex;
	align-items: center;
	height: 32px;
}
.input-for-change .input-item .input-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.input-for-change .input-item .input-wrap .point {
	font-size: 13px;
	font-weight: bold;
	margin-top: 5px;
}

.input-for-change .input-item .input-wrap p:empty {
	margin-top: 0;
}

.input-for-change .input-with-etc {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
}

.input-for-change .input-with-etc button {
	flex-shrink: 0;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	height: 32px;
	background: var(--main-color);
	color: #ebebeb;
	border-radius: 3px;
}

.input-for-change input[type="text"],
.input-for-change input[type="password"] {
	border: 1px solid #c2c2c2;
	height: 32px;
	width: 100%;
	padding: 0 10px;
}

/* 회원가입 권한 등 select: input 과 동일 룩 + 드롭다운 화살표 */
.input-for-change select {
	border: 1px solid #c2c2c2;
	height: 32px;
	width: 100%;
	padding: 0 30px 0 10px;
	font-size: 14px;
	color: #000;
	cursor: pointer;
	background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.input-for-change select:focus {
	border-color: var(--main-color);
}
.input-for-change select:invalid {
	color: #999;
}
/* 드롭다운 리스트 항목 텍스트는 검은색 (닫힌 상태 힌트 회색은 유지) */
.input-for-change select option {
	color: #000;
}
.input-for-change .input-with-etc button:disabled {
	background: #c9c9c9;
	cursor: not-allowed;
}
/* 그룹 표시: 여러 줄 wrap div — 상위경로(회색 소형) + 그룹명 2줄 */
.input-for-change .group-display {
	flex: 1;
	min-height: 32px;
	border: 1px solid #c2c2c2;
	padding: 6px 10px;
	background: #f7f7f7;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	line-height: 1.3;
	word-break: break-all;
}
.input-for-change .group-display .placeholder {
	color: #999;
	font-size: 14px;
}
.input-for-change .group-display .g-path {
	color: #555;
	font-size: 12px;
}
.input-for-change .group-display .g-leaf {
	color: #000;
	font-size: 14px;
	font-weight: 600;
}

.modal-button-area {
	display: flex;
	align-items: center;
	gap: 9px;
	justify-content: center;
	margin-top: 25px;
}

.modal-button-area button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	max-width: 50%;
	height: 38px;
	border-radius: 6px;
	color: #fff;
	font-size: 14px;
}

.modal-button-area button.black {
	background-color: #3D3D3D;
}
.modal-button-area button.pink {
	background-color: var(--main-color);
}

.find-id-pw {
	width: 408px;
}

.find-id-pw .title {
	border-bottom: 0;
}

.find-id-pw .find-info {
	text-align: center;
	margin-bottom: 30px;
}

.find-id-pw .tabs {
	display: flex;
	align-items: center;
}

.find-id-pw .tabs button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 42px;
	border: 1px solid #c5c7cd;
	color: #8e8e8e;
	font-size: 16px;
	background: #f8f8f8;
}

.find-id-pw .tabs button.active {
	color: #fff;
	background-color: var(--main-color);
	border-color: var(--main-color);
}

.timer {
	white-space: nowrap;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: bold;
	color: var(--main-color);
	display: none;
}

/* 회원가입: 필드 많아 화면 넘치면 내부 스크롤 (기존 팝업 디자인 유지) */
.modal.signup .modal-content {
	max-height: calc(90vh - 53px);
	overflow-y: auto;
}

/* 그룹 선택 팝업 열린 동안 회원가입 모달 클릭 차단 */
.modal.signup.click-lock {
	pointer-events: none;
}

/* ===== 로그인 화면 회원가입 / 가입 상태 확인 버튼 ===== */
#signupArea {
	display: none;
	gap: 10px;
	justify-content: center;
	margin: 4px 0 14px;
}

#signupArea .signup-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	color: var(--main-color);
	background: #fff;
	border: 1px solid #c5cae8;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#signupArea .signup-btn:hover {
	background: #eef1ff;
	border-color: var(--main-color);
}