:host {
	opacity: 0.95;
	width: unset;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	display: block;
	z-index: 1002;
	color: #fff;
	font-weight: 200;
	background: #181A31;
	--background: #333;
	-webkit-box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
	-moz-box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
	box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
	overflow: hidden;
	width: var(--min-width);
	--transition: all .3s;
	transition: width 0.2s ease-in-out;
}

:host(.collapse) {
	width: var(--min-width);
}
:host(:not(.collapse)) {
	width: var(--max-width);
}
:host(.collapse:hover)  {
	width: var(--max-width);
	--animation: bounce 0.5s ease-in-out 1;
}


@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
	40% { transform: translateX(-10px); }
	60% { left: -10px; transform: translateX(10px); }
}

:host(.collapse) {
	--width: var(--min-width);
}

:host(:not(.collapse)) {
	width: var(--max-width);
}

:host .body {
	display: flex;
	align-items: flex-start;
	--align-items: center; /* 수직 중앙 정렬 */
	margin-top: 32px; /* 여백 추가 */
}

::slotted([slot="body-content"]) {
	width: 100%;
	padding: 0;
}