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

/* 그룹 */
.groupbox{
	--def-group-font-size:18px;
	--def-menu-font-size:14px;
	--def-group-font-weight:500;
	--def-font-weight:400;
	--hover-font-weight:500;
	--def-color:#555555;
	--hover-color:#000000;
	--def-min-group-count:5;
	--def-base-size:50;
	--def-icon_base-size:30;
	--extended-cnt:0;
	/* --def-shadow-color:#888888; */
	--def-shadow-color:#fefefe;
	
	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; */

	margin:20px 0px;
	background-color:#fff;
	/* 아이콘 추가 */
	background-image:url("/resource/design/imgs/menu/round/menu_bar.png");
	background-repeat:no-repeat;
	background-position:left center;
	background-size:18px 18px;
	padding-left:20px; /* 아이콘 공간 */
	font-size:var(--def-group-font-size);
	line-height:var(--def-group-font-size);
	font-weight:var(--def-group-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); */
	
	background-color: #ffffff; /* 하얀색 배경 (bg-white) */
	/* 넓고 은은하게 퍼지는 기본 그림자 */
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); 
	transition: box-shadow 0.3s ease;
}

/* 메뉴 */
.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; */
	top: 10px;
    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;
	width:50%;
	height:50%;
/* 추가 */
	border-radius: 20px;
	background-color: #f8fafc; /* slate-50 */
	color: #64748b; /* slate-500 */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 기본 옅은 그림자 */
	border: 1px solid #f1f5f9; /* 옅은 테두리 */
	transition: all 0.3s ease;
}

.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-icon_base-size));
	height:calc(1px * var(--def-icon_base-size));
	margin-top:10px;/* 아이콘 위치 조정 */
}

/* 메뉴 - 마우스 오버시 */
.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);
}