/* 타일 */
.groupbox *{
	box-sizing:border-box;
}

/* 그룹 */
.groupbox{
	--def-group-font-size:15px;
	--def-menu-font-size:14px;
	--def-font-weight:400;
	--hover-font-weight:500;
	--def-color:#555555;
	--hover-color:#000000;
	--def-min-group-count:5;
	--def-base-size:50;
	--extended-cnt:0;
	--def-shadow-color:#888888;
	
	width:fit-content;
	
	width: calc((3px * var(--def-base-size) + 10px ) * (var(--extended-cnt) + var(--group-item-cnt)) - 10px);
}

/* 그룹 - 그룹명 */
.groupbox > h4{
	margin:10px 0px;
	background-color: #fff;
	font-size:var(--def-group-font-size);
	line-height:var(--def-group-font-size);
	font-weight:var(--def-font-weight);
	color:var(--def-color);
	
	max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 그룹 - 메뉴 리스트 */
.groupbox .summary-components,
.groupbox .summary-components-small {
	display: flex;
	flex-wrap: wrap;
	gap:10px;
	
	box-shadow: 2px 1px 4px 1px var(--def-shadow-color);
}

/* 메뉴 */
.groupbox .summary-component-small:not(.summary-component-placeholder){
	background-color:#fff;
	width:calc(3px * var(--def-base-size)) !important;
	height:calc(3px * var(--def-base-size)) !important;
}

.groupbox .summary-component-small.summary-component-placeholder{
	width:calc(3px * var(--def-base-size) * 0.9) !important;
	height:calc(3px * var(--def-base-size) * 0.9) !important;
	margin : calc(3px * var(--def-base-size) * 0.05) !important;
	box-shadow: 2px 1px 4px 1px var(--def-shadow-color);
}

.groupbox .summary-component-small.ui-sortable-helper{
	box-shadow: 2px 1px 4px 1px var(--def-shadow-color);
}

.groupbox .summary-component-small:not(.dummy):hover{
	/* transform: translateY(-5px) translateX(-5px); */
	/* box-shadow: 2px 1px 4px 1px var(--def-shadow-color); */
	cursor: pointer;
}

.groupbox .summary-component-small.dummy {
	width: calc((3px * var(--def-base-size) + 10px ) * var(--extended-cnt) - 10px) !important;
}

.groupbox .summary-component-small .summary-component__item{
	width:100%;
	height:100%;
	display:flex;
	justify-content: center;
	align-items: center;
    position: relative;
    
    transition: all 0.1s ease-in-out;
}

/* 메뉴 - 메뉴명 */
.groupbox .summary-component__summaryName{
	position: absolute;
    top: 20px;
    font-size:var(--def-menu-font-size);
    font-weight:var(--def-font-weight);
    color:var(--def-color);
    
    text-align: center;
}

/* 메뉴 - 아이콘 */
.groupbox .summary-component__box{
	margin-top:10px;
}

.groupbox .summary-component__box .summary-component__icon{
	display: flex;
	justify-content: center;
    flex-wrap: nowrap;
    color:var(--def-color);
}

.groupbox .summary-component__box .summary-component__icon .summary-component__icon-svg,
.groupbox .summary-component__box .summary-component__icon .summary-component__icon-use{
	width:calc(1px * var(--def-base-size));
	height:calc(1px * var(--def-base-size));
}

/* 메뉴 - 마우스 오버시 */
.groupbox .summary-component-small:not(.dummy):hover .summary-component__item{
	transform:scale(1.1);
}

.groupbox .summary-component-small:not(.dummy):hover .summary-component__summaryName{
	font-weight:var(--hover-font-weight);
	color:var(--hover-color);
}