@charset "utf-8";

.login-skin-basic {
	display: block;
	position: relative;
}

	.login-skin-basic fieldset {
		display: block;
		position: relative;
		margin-bottom: 3px;
		margin-right: 75px;
	}

		.login-skin-basic fieldset input[type="password"] {
			display: block;
			width: 100%;
			height: 30px;
			padding-left: 35px;
			background: #12141a !important;
			border: 1px solid rgba(255,255,255,0.2) !important;
			color: #ffffff !important;
			box-sizing: border-box;
			font-size: 12px;
		}

		.login-skin-basic fieldset input:focus {
			border-color: #D9DADC !important;
			outline: none;
			box-shadow: 0 0 5px rgba(255,255,255,0.3);
		}

	/* 아이디 아이콘 */

	.login-skin-basic .box-id:before {
		content: "\e976";
		font-family: 'icon';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 10px;
		line-height: 30px;
		color: #D9DADC;
		z-index: 1;
	}

	/* 비밀번호 아이콘 */

	.login-skin-basic .box-pw:before {
		content: "\e98d";
		font-family: 'icon';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 10px;
		line-height: 30px;
	}

	/* 로그인 버튼 */

	.login-skin-basic fieldset.box-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 72px;
		height: 63px;
		margin-right: 0;
	}

		.login-skin-basic fieldset.box-btn button {
			width: 100%;
			height: 100%;
			background: #FFFF00 !important;
			color: #0a0b10 !important;
			border: none;
			font-weight: 900;
			font-size: 13px;
			cursor: pointer;
			transition: 0.2s;
		}

			.login-skin-basic fieldset.box-btn button:hover {
				background: #FFFF00 !important;
				box-shadow: 0 0 15px rgba(255,255,0,0.4);
			}

	/* 회원가입 버튼 */

	.login-skin-basic fieldset.box-join {
		margin-right: 0;
	}

		.login-skin-basic fieldset.box-join .ui-btn {
			width: 100%;
			background: transparent !important;
			border: 1px solid rgba(255,255,255,0.5) !important;
			color: #ffffff !important;
		}

			.login-skin-basic fieldset.box-join .ui-btn:hover {
				border-color: #FFFF00 !important;
				color: #FFFF00 !important;
			}

/* 로그인 후 영역 */

.logined-skin-basic {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: center;
}

	/* 프로필 썸네일 */

	.logined-skin-basic .ui-thumb {
		width: 34px;
		height: 34px;
		overflow: hidden;
		border-radius: 50%;
		border: 1.5px solid #FFFFFF !important;
		background: transparent;
		box-shadow: 0 0 10px rgba(255,255,255,0.2);
	}

		.logined-skin-basic .ui-thumb .thumb-box {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

			.logined-skin-basic .ui-thumb .thumb-box img {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: auto;
				transform: translate(-50%,-50%);
			}

		.logined-skin-basic .ui-thumb .ui-btn {
			display: block;
			width: 100%;
			height: 100%;
			line-height: 1.2em;
			padding: 8px;
		}

			.logined-skin-basic .ui-thumb .ui-btn:before {
				content: "\e973";
				display: block;
				padding-top: 3px;
				font-family: 'icon';
				font-size: 15px;
			}

			.logined-skin-basic .ui-thumb .ui-btn.etc:before {
				content: "\ea4e";
				padding-top: 30px;
			}

	/* 사용자 정보 */

	.logined-skin-basic .info {
		position: relative;
		display: flex;
		gap: 25px;
		align-items: center;
	}

		.logined-skin-basic .info .name {
			display: inline-block;
			color: #D9DBDD;
			font-size: 14px;
			font-weight: 400;
			letter-spacing: -0.02em;
		}

		.logined-skin-basic .info .character {
			font-family: 'OneMobile';
			display: inline-block;
			color: #FFFFFF !important;
			font-size: 14px;
			font-weight: 800;
			letter-spacing: -0.03em;
		}

			.logined-skin-basic .info .character + .name {
				padding-top: 0;
				margin-left: 2px;
				font-size: 13px;
				font-weight: 400;
			}

		/* 관리자 버튼 */

		.logined-skin-basic .info .ui-btn.admin {
			display: inline-flex !important;
			align-items: center;
			justify-content: center;
			background: transparent !important;
			border: 1px solid #FFFFFF !important;
			color: #FFFFFF !important;
			font-size: 10px !important;
			font-weight: bold;
			height: 18px !important;
			padding: 0 7px !important;
			border-radius: 2px !important;
			text-transform: uppercase;
			line-height: 1;
			transition: 0.2s;
			transform: translateY(0px);
		}

			.logined-skin-basic .info .ui-btn.admin:hover {
				background: #FFFFFF !important;
				border: 1px solid #FFFFFF !important;
				color: #0a0b10 !important;
				box-shadow: 0 0 12px rgba(255,255,255,0.5);
			}