:root {
	--ncm-bg: #08090b;
	--ncm-panel: #0e1115;
	--ncm-line: #252b33;
	--ncm-text: #e9eceb;
	--ncm-muted: #78818c;
	--ncm-accent: #e3ff57;
}

body.login {
	min-height: 100vh;
	color: var(--ncm-text);
	background: var(--ncm-bg);
	font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
}

body.login::before {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 25%, rgb(227 255 87 / 7.5%), transparent 31%),
		linear-gradient(rgb(255 255 255 / 1.6%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 1.6%) 1px, transparent 1px);
	background-size: auto, 52px 52px, 52px 52px;
	content: "";
}

#login {
	position: relative;
	width: min(400px, calc(100% - 36px));
	padding: 7vh 0 40px;
}

.login h1 a {
	width: 64px;
	height: 64px;
	margin-bottom: 25px;
	background-color: var(--ncm-accent);
	background-position: center;
	background-size: 64px;
	border-radius: 6px;
	box-shadow: 0 0 42px rgb(227 255 87 / 18%);
}

.ncm-login-intro {
	margin: 0 0 22px;
	text-align: center;
}

.ncm-login-intro small {
	display: block;
	margin-bottom: 11px;
	color: #69723f;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .2em;
}

.ncm-login-intro strong {
	display: block;
	color: var(--ncm-text);
	font-size: 25px;
	letter-spacing: -.04em;
}

.ncm-login-intro span {
	display: block;
	margin-top: 10px;
	color: var(--ncm-muted);
	font-size: 12px;
	line-height: 1.65;
}

.login form {
	margin-top: 0;
	padding: 30px;
	background: var(--ncm-panel);
	border: 1px solid var(--ncm-line);
	border-radius: 8px;
	box-shadow: 0 28px 80px rgb(0 0 0 / 38%);
}

.login label {
	color: #aab1b7;
	font-size: 12px;
	font-weight: 750;
}

.login form .input,
.login input[type="password"],
.login input[type="text"] {
	height: 48px;
	margin: 7px 0 18px;
	padding: 0 14px;
	color: var(--ncm-text);
	background: #11151a;
	border: 1px solid #303741;
	border-radius: 4px;
	box-shadow: none;
	font-size: 15px;
}

.login form .input:focus,
.login input[type="password"]:focus,
.login input[type="text"]:focus {
	border-color: #788832;
	box-shadow: 0 0 0 1px #788832;
	outline: 0;
}

.login .button.wp-hide-pw {
	top: 8px;
	color: #8d96a0;
}

.login .button.wp-hide-pw:focus {
	border: 0;
	box-shadow: none;
}

.login .forgetmenot {
	display: flex;
	align-items: center;
	min-height: 40px;
}

.login input[type="checkbox"] {
	background: #11151a;
	border-color: #39414a;
	box-shadow: none;
}

.wp-core-ui .button-primary {
	min-height: 42px;
	padding: 0 22px;
	color: #101306 !important;
	background: var(--ncm-accent) !important;
	border: 0 !important;
	border-radius: 4px;
	box-shadow: none !important;
	font-weight: 850;
	text-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #efff91 !important;
	transform: translateY(-1px);
}

.login #nav,
.login #backtoblog {
	text-align: center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: #77808a !important;
	font-size: 11px;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
	color: var(--ncm-accent) !important;
}

.login .message,
.login .notice,
.login #login_error {
	color: #cbd0d2;
	background: #11151a;
	border-top: 1px solid var(--ncm-line);
	border-right: 1px solid var(--ncm-line);
	border-bottom: 1px solid var(--ncm-line);
	box-shadow: none;
}

.login .message {
	border-left-color: var(--ncm-accent);
}

.login #login_error {
	border-left-color: #ff6b6b;
}

.login .language-switcher select {
	color: #aab1b7;
	background: #11151a;
	border-color: var(--ncm-line);
}

.login .language-switcher .button {
	color: #aab1b7;
	background: #1b2027;
	border-color: #303741;
}

@media (max-width: 480px) {
	#login {
		padding-top: 36px;
	}

	.login form {
		padding: 24px;
	}

	.ncm-login-intro strong {
		font-size: 22px;
	}
}