@charset "UTF-8";

* {
	letter-spacing: 1px;
}

body, html {
	background-image: url('../../images/n30/login-bg.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 0px;
}

.login {
	width: 100%;
	height: 100vh;
	display: block;
	position: relative;
	overflow: hidden;
}

.login-wrap {
	width: 400px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.5);
}

.login-title {
	text-align: center;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.login-body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.login-content {
	background: #fff;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	padding: 30px 40px 20px 40px;
	overflow: hidden;
}

.login-content h5 {
	font-size: 33px;
	font-weight: 700;
	text-align: center;
	padding: 0 0 30px 0;
	margin: 0 0 30px 0;
	border-bottom: 1px solid #ccc;
	letter-spacing: -0.5px;
}

.login-content input {
	font-size: 16px;
}

.login-content .control-label {
	font-weight: 600;	
}

.login-content .form-control {
	width: 100%;
	height: 100%;
	padding: 10px 12px;
}

.login-id {
	margin-top: 30px;
}

.login-password {
	margin-top: 30px;
}

.login-forgot {
	margin-top: 40px;
	text-align: center;
}

.login-remember {
	margin-top: 20px;
}

.login-btn {
	display: block;
	margin: 20px auto;
}

.login-id span, .login-password span, .login-Remember label,
	.login-forgot a {
	font-weight: 500;
	font-size: 17px;
}

.login-id span, .login-password span {
	display: block;
	padding: 10px 0;
}

.login-forgot a {
	color: #2285c8;
}

.text-narrow,
.text-narrow * {
	letter-spacing: -0.5px !important;
}

.shake-area {
	animation: shake 0.5s;
	animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* 다크모드 추가 */
@media (prefers-color-scheme: dark) {
    body, html {
        background-image: none;
        background-color: #2a2a2a;
        color: #ddd;
    }

	.login-wrap {
		box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
	}

	.login-content {
		background: #1e1e1e;
		color: #ccc;
		border-radius: 4px;
		padding: 30px 40px 20px 40px;
		border: 1px solid #444;
	}

	.login-content h5 {
		color: #a8caff;
		border-bottom: 1px solid #444;
	}

	.login-content input.form-control {
		background-color: #333;
		border: 1px solid #555;
		color: #eee;
	}

	.login-content input.form-control::placeholder {
		color: #999;
	}

	.login-content input.form-control:focus {
		background-color: #444;
		border-color: #66aaff;
		color: #fff;
		outline: none;
	}

	.login-forgot a {
		color: #66aaff;
	}

	.login-id span, .login-password span, .login-Remember label {
		color: #ccc;
	}
}