@charset "UTF-8";

/*위젯 사이트*/
.main-site-wrap{
	width:100%;
	border: 1px solid var(--borderColor);
	padding-bottom: 0.5rem;
	border-radius: var(--radius);
	background: var(--colorwhite);
	overflow: hidden;
}

.main-site-view{
	overflow:hidden;
	transition:.35s;
	visibility:hidden;
	padding: 0 0.5rem;
}

.main-site-list {
	transition:transform .45s cubic-bezier(.22,.61,.36,1);
	will-change:transform;
}

.main-sites-box {
	border-radius: var(--radius);
	overflow: hidden;
}

.main-site-title{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 1.5rem;
	margin-bottom: 1.2rem;
	background:	var(--colorwhite);
	border-bottom: 1px solid var(--borderColor);
}

.main-site-title-text{
	display:flex;
	align-items:center;
	gap: 10px;
}

.main-site-icon{
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	display:flex;
	align-items:center;
	justify-content:center;
	background: var(--colorblue-bg);
	border: 1px solid var(--borderColor);
	font-size:19px;
}

.main-site-title-text strong{
	display:block;
	font-size: 14px;
	font-weight:600;

}

.main-site-title-text small{
	display:block;
	font-size: 12px;
	color: var(--con-sub);
}

.main-site-control{
	display:flex;
	gap: 3px;
}

.main-site-control button{
	height: 30px;
	width: 30px;
	border:0;
	background: var(--colorgray-bg);
	color: var(--con-sub);
	font-size:12px;
	font-weight:500;
	cursor:pointer;
	transition:.2s;
	border-radius: var(--radius);
}

.site-all {
	width: 40px !important;
}

.main-site-control button:hover:not(:disabled){
	background: var(--colorgray-bg);
	color: var(--con-sub);
}

.main-site-control button:disabled{
	cursor:not-allowed;
}