@charset "utf-8";

a{color:#333;}
a:hover{color:#e91b23;}
div,table,td,th{font-size:12px;}

.panel-heading{
	background:#424242 !important;
	color:#fff !important;
	border-radius:0 !important;
}

.panel-heading a{
	color:#fff;
}

.panel-heading a:hover{
	color:#ff8800;
}

/* Sub Title */
.sub-title {
	padding:10px 12px;
	color:#333;
	font-family:'ibt';
	font-size:18px;
	background:#fcfcfc;
}

.sub-title i{
	margin-right:10px;
	background:#eee;
	padding-top:12px;
	border-radius:50%;
	width:50px;
	height:50px;
	text-align:center;
	color:#333;
	font-size:25px;
	display:inline-block;
}

/* 로그인 */
.login-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20px;
}

.login-container {
	width: 100%;
	max-width: 420px;
}

.login-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	overflow: hidden;
	animation: slideUp 0.5s ease;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.login-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	text-align: center;
	padding: 40px 30px 30px;
}

.login-logo {
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	backdrop-filter: blur(10px);
}

.login-logo i {
	font-size: 36px;
	color: #fff;
}

.login-header h2 {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 700;
}

.login-header p {
	margin: 0;
	font-size: 14px;
	opacity: 0.9;
}

.login-body {
	padding: 40px 30px 30px;
}

.input-box {
	position: relative;
	margin-bottom: 25px;
}

.input-box label {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	pointer-events: none;
	transition: all 0.3s;
	z-index: 1;
}

.input-box label i {
	font-size: 18px;
}

.input-box input {
	width: 100%;
	padding: 16px 16px 16px 50px;
	border: 2px solid #e8e8e8;
	border-radius: 12px;
	font-size: 15px;
	transition: all 0.3s;
	background: #f8f9fa;
}

.input-box input:focus {
	outline: none;
	border-color: #667eea;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.input-box input:focus + label,
.input-box input:not(:placeholder-shown) + label {
	color: #667eea;
}

.login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}

.auto-login {
	display: flex;
	align-items: center;
}

.auto-login input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	cursor: pointer;
	accent-color: #667eea;
}

.auto-login label {
	font-size: 14px;
	color: #666;
	cursor: pointer;
	user-select: none;
}

.btn-login {
	width: 100%;
	padding: 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn-login:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.btn-login:active {
	transform: translateY(0);
}

.btn-login i {
	transition: transform 0.3s;
}

.btn-login:hover i {
	transform: translateX(4px);
}

.login-footer {
	background: #f8f9fa;
	padding: 25px 30px;
	text-align: center;
	border-top: 1px solid #e8e8e8;
}

.login-footer a {
	color: #666;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.login-footer a:hover {
	color: #667eea;
}

.login-footer .divider {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: #ddd;
	margin: 0 15px;
	vertical-align: middle;
}

.sound_only {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 576px) {
	.login-wrap {
		padding: 10px;
	}
	
	.login-header {
		padding: 30px 20px 20px;
	}
	
	.login-body {
		padding: 30px 20px 20px;
	}
	
	.login-footer {
		padding: 20px;
	}
	
	.login-footer a {
		font-size: 13px;
	}
	
	.login-footer .divider {
		margin: 0 10px;
	}
}

/* 회원가입 약관 */
#fregister .alert-info strong{
	font-size:12px;
}

#fregister .panel{
	margin-bottom:0;
}

#fregister .mgt{
	margin-top:40px;
}

#fregister .register-term{
	position:relative;
	height:200px;
	margin:0px;
	overflow:auto;
}

/* 회원가입 폼 */
.captcha{
	width:190px;
}

/* 비밀번호 확인 */
.mb-pw-box{margin-top:10px;border:1px solid #eee;}
.mb-pw-box .mb-pw-header{
	background:#333;
	color:#fff;
	font-size:26px;
	font-family:'ibt';
	padding:15px;
	border-bottom:1px solid #eee;
}

.mb-pw-box .mb-pw-body{
	padding:15px;
	line-height:20px;
}

/* Memo */
.memo-send-info { padding:8px 20px;background:#fafafa;border-bottom:1px solid #eee; }
.memo-content { padding:20px; line-height:22px;border-bottom:1px solid #eee; margin-bottom:15px; }
.memo-send-form { padding:20px; }

/* Scrap */
.scrap-skin i.scrap-icon { background:#333; color:#fff; }
.scrap-skin .scrap-head { margin:0px; padding: 10px 20px; line-height:22px; background:#333; color:#fff; font-size:16px; text-align:center; }
.scrap-skin .scrap-form { padding: 10px 20px 20px; }

.view-agree{
	color:#fff;
	float:right;
}

.view-agree:hover{
	color:#999;
}

.input-group-addon{
    border-radius:0 !important;
	min-width:40px;
	text-align:center;
}