/* login — SafeU 디자인 시스템: 상단 로고바 + 중앙 로그인폼 + 하단 회사정보 푸터 */
body{background-color: #FFFFFF; font-family: var(--sut-font-family);}

#login{
	position:static;
	width:100%;
	min-height:100vh;
	margin:0;
	background-color:#fff;
	border-radius:0;
	display:flex;
	flex-direction:column;
}

.sut-login__topbar{padding:20px 190px;}
.sut-login__logo{display:inline-block;}
.sut-login__logo img{height:18px;width:auto;display:block;}

.sut-login__main{
	flex:1 0 auto;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:20px;
}

#login .login-wrap{
	position:static;
	width:100%;
	max-width:440px;
	height:auto;
	padding:0 0 60px;
	background:none;
	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;}

.sut-login__title{
	text-align:center;
	color:var(--sut-color-black);
	font-size:32px;
	line-height:1.3;
	font-weight:700;
	margin-bottom:48px;
}

.sut-login__field{margin-bottom:20px;}
.sut-login__label{
	display:block;
	margin-bottom:15px;
	margin-top:40px;
	color:var(--sut-color-black);
	font-size:15px;
	font-weight:600;
}

#login .login-wrap .input-wrap{height:auto;margin-bottom:0;}
#login .login-wrap .input-wrap>input{
	width:100%;
	height:56px;
	box-sizing:border-box;
	border:1px solid var(--sut-color-border);
	border-radius:var(--sut-radius-lg);
	padding:0 18px;
	font-size:16px;
	font-family:var(--sut-font-family);
	background:#fff;
}
#login .login-wrap .input-wrap>input::placeholder{color:var(--sut-color-default);}
#login .login-wrap .input-wrap>input:focus{
	border-color:var(--sut-color-confirmed-border);
	background:var(--sut-color-confirmed-fill);
	outline:none;
}

#login .login-wrap .id-save{margin:18px 0 24px;font-size:14px;}
#login .login-wrap .id-save .label_check{
	display:inline-flex;
	align-items:center;
	width:auto;
	height:auto;
	background:none;
}
#login .login-wrap .id-save .label_check::before{
	content:"";
	width:20px;
	height:20px;
	box-sizing:border-box;
	border:1.5px solid var(--sut-color-border);
	border-radius:var(--sut-radius-xs);
	background:#fff;
	margin-right:8px;
}
#login .login-wrap .id-save .label_check.c_on::before{
	border-color:var(--sut-color-black);
	background:var(--sut-color-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / 13px;
}
#login .login-wrap .id-save .label_check span{
	color:var(--sut-color-primary);
	font-size:14px;
	font-weight:500;
}
#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:56px;
	background-color:var(--sut-color-primary);
	color:#fff;
	font-weight:600;
	font-size:16px;
	border:none;
	border-radius:var(--sut-radius-lg);
	cursor:pointer;
}
#login .login-wrap .btn-login:hover{background-color:var(--sut-color-primary-hover);}

.sut-login__footer{
	flex-shrink:0;
	padding:0 40px 40px;
}
.sut-login__footer-inner{
	max-width:620px;
	margin:0 auto;
	text-align:left;
	border-top:1px solid var(--sut-color-border-top);
	padding-top:28px;
}
.sut-login__footer-brand{
	font-size:18px;
	font-weight:800;
	color:var(--sut-color-black);
	margin-bottom:14px;
}
.sut-login__footer-info,
.sut-login__footer-contact{
	font-size:13px;
	color:var(--sut-color-primary);
	margin-bottom:8px;
}
.sut-login__footer .bar{margin:0 8px;color:var(--sut-color-border);}
.sut-login__footer-contact{display:flex;align-items:center;justify-content:flex-start;}
.sut-login__footer-contact .contact-item{display:inline-flex;align-items:center;gap:6px;}
.sut-login__footer-contact svg{width:14px;height:14px;}
.sut-login__footer-copy{
	font-size:13px;
	color:var(--sut-color-primary);
	margin-top:6px;
}

#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) {
	.sut-login__topbar{padding:18px 20px;}
	.sut-login__main{padding:0 20px;}
	#login .login-wrap{padding:24px 0 40px;}
	.sut-login__title{font-size:28px;margin-bottom:32px;}
	.sut-login__footer{padding:24px 20px 32px;}
}

.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);
}