/* 메뉴 전체 컨테이너 */
.side-menu {
	max-width: 189px;
	width: 100%;
	background-color: #3f8edb; /* 메뉴 전체의 청아한 파란색 배경 */
	border: 1px solid #2e7ac2;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	box-sizing: border-box;
	color: #ffffff;
}

/* 메뉴 타이틀 "솔루션" 섹션 */
.side-menu .menu-header {
	background-color: #2c5da8; /* 솔루션 타이틀 배경색 (더 진한 파랑) */
	padding: 10px 15px;
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	cursor: pointer; /* 클릭 가능함을 나타냄 */
}

.side-menu .menu-title {
	margin: 0;
	font-size: 1.2em;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* 솔루션 타이틀 옆의 작은 화살표 아이콘 */
.side-menu .menu-title .arrow-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg); /* 초기 상태 (오른쪽 화살표) */
	font-size: 0.8em;
	color: rgba(255, 255, 255, 0.7);
	transition: transform 0.3s ease; /* 회전 애니메이션 */
}
/* (선택 사항) 솔루션 헤더가 활성화되거나 클릭되어 메뉴가 열렸을 때 화살표 방향 변경 */
.side-menu .menu-header.active .arrow-icon,
.side-menu .menu-header:hover .arrow-icon { /* 예시: 클릭 시 아래로 회전 */
	 /* transform: translateY(-50%) rotate(90deg); */ /* 오른쪽 화살표 그대로 */
}


/* 메뉴 리스트 공통 스타일 */
.side-menu nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.side-menu nav li {
	position: relative;
	/* 캡처 이미지의 파란색 배경을 모든 li에 적용 */
	background-color: #3f8edb;
}

/* 메인 메뉴 항목 스타일 */
.side-menu nav li > a {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding-left: 15px;
	text-decoration: none;
	color: #ffffff;
	font-size: 0.9em;
	font-weight: normal;
	box-sizing: border-box;
	transition: background-color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
	text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

/* 메인 메뉴 항목 구분선 */
.side-menu nav ul > li:not(:last-child) > a {
	 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* 마지막 메인 메뉴 항목은 하단 둥근 모서리에 맞춰 선 없음 */
.side-menu nav ul > li:last-child:not(.has-submenu) > a {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	border-bottom: none;
}
/* 서브메뉴를 가진 마지막 메인 메뉴 항목은 서브메뉴가 닫힐 때 둥근 모서리 적용 */
.side-menu nav ul > li.has-submenu:last-child > a {
	border-bottom: none; /* 일단 기본 선 없음 */
}
.side-menu nav ul > li.has-submenu:last-child.closed > a { /* 서브메뉴 닫힐 때 둥글게 */
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}

/* 메인 메뉴 항목 호버 시 */
.side-menu nav li > a:hover {
	background-color: #5c9fd9; /* 호버 시 배경색 (기존보다 살짝 밝게) */
}

/* 현재 활성화된 메인 메뉴 항목 */
.side-menu nav li.active > a {
	background-color: #2e7ac2; /* 활성화된 메뉴 배경색 (더 진하게) */
	font-weight: bold;
}
.side-menu nav li.active > a:hover {
	background-color: #2e7ac2; /* 활성화된 메뉴는 호버해도 색상 유지 */
}

/* 서브 메뉴 컨테이너 */
.side-menu .sidesubmenu {
	max-height: 0; /* 초기 숨김 상태 */
	overflow: hidden; /* 넘치는 내용 숨김 */
	transition: max-height 0.3s ease-out; /* 부드러운 열림/닫힘 애니메이션 */
	background-color: #5398dd; /* 서브 메뉴 배경색 (메인보다 살짝 진하게) */
	padding-left: 0; /* 서브메뉴 컨테이너 자체 패딩 없음 */
	border-top: 1px solid rgba(255, 255, 255, 0.1); /* 서브메뉴 시작 구분선 */
}

/* 서브 메뉴 열림 상태 */
.side-menu .sidesubmenu.open {
	max-height: 500px; /* 충분히 큰 값으로 설정하여 모든 서브 메뉴 항목이 보이도록 (실제 내용에 따라 조정) */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 서브메뉴 닫힐 때 하단 구분선 */
}
.side-menu li.active > .sidesubmenu {
	max-height: 500px; /* 활성화된 부모의 서브메뉴는 열림 */
}


/* 서브 메뉴 항목 스타일 */
.side-menu .sidesubmenu li {
	background-color: transparent; /* 서브메뉴 li는 배경색 없음 (부모 ul이 배경색 가짐) */
}

.side-menu .sidesubmenu a {
	height: 35px;
	line-height: 35px;
	padding-left: 35px; /* 서브 메뉴 텍스트 왼쪽 여백 + 아이콘 공간 */
	font-size: 0.85em;
	font-weight: normal;
	color: #ffffff;
	background-color: transparent;
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* 서브 메뉴 항목간 얇은 구분선 */
	transition: background-color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
}
/* 서브 메뉴 마지막 항목의 하단 선 제거 */
.side-menu .sidesubmenu li:last-child a {
	border-bottom: none;
}

/* 서브 메뉴 항목 앞의 작은 화살표 아이콘 */
.side-menu .sidesubmenu a::before {
	content: '\25B6'; /* ▶ Unicode 문자 */
	font-size: 0.6em;
	color: rgba(255, 255, 255, 0.6);
	position: absolute;
	left: 15px; /* 왼쪽에서부터 위치 조정 */
	top: 50%;
	transform: translateY(-50%);
}

/* 서브 메뉴 항목 호버 시 */
.side-menu .sidesubmenu a:hover {
	background-color: #64a6e8; /* 서브 메뉴 호버 시 배경색 */
	padding-left: 40px; /* 호버 시 살짝 밀림 */
}

/* 현재 활성화된 서브 메뉴 항목 */
.side-menu .sidesubmenu li.active > a {
	background-color: #2e7ac2; /* 활성화된 메뉴 배경색 (더 진하게) */
	font-weight: bold;
	color: #ffffff;
}
.side-menu .sidesubmenu li.active > a::before {
	 color: #ffffff; /* 활성화된 메뉴 아이콘도 흰색 */
}
.side-menu .sidesubmenu li.active > a:hover {
	background-color: #2e7ac2; /* 활성화된 메뉴는 호버해도 색상 유지 */
}

/* 메인 메뉴에 하위 메뉴가 있을 경우 아이콘 */
.side-menu li.has-submenu > a::after {
	content: '\25B6'; /* ▶ Unicode 문자 */
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	font-size: 0.8em;
	color: rgba(255, 255, 255, 0.7);
	transition: transform 0.3s ease;
}
/* 서브 메뉴가 열렸을 때 아이콘 회전 */
.side-menu li.has-submenu.open > a::after,
.side-menu li.has-submenu.active > a::after { /* 활성화된 부모도 아이콘 회전 */
	transform: translateY(-50%) rotate(90deg); /* 오른쪽에서 아래로 */
}