* {
	list-style: none;
	padding-left: 0;
}

.menu {
	width: 380px;
	font-size: 19px;
	text-align: center;
	border-radius: 5px 5px 5px 5px;
}


li.main {
	padding: 11px 0px 11px 0px;
	color: #fff;
	background-color: #b2b2b2;
	border-radius: 3px;
	cursor: pointer;
	font-family: "Paperlogy5", "Malgun Gothic", "sans-serif";
}

li.text {
	padding: 10px 0px 10px 0px;
	color: #fff;
	background-color: #ffffff;

}

#sub {
	display: none;
	padding-bottom: 0;
	padding-top: 0;
}

/* 1. 클릭 시 열리도록 active 클래스 제어 */
.menu.active > #main {
	border-radius: 5px 5px 0px 0px;
}

.menu.active > #sub {
	display: block;
}

/* 2. 리스트 5개만 보이고 스크롤 생성 (li 1개 높이 약 54px * 5 = 약 270px) */
/* 2. 스크롤 생성 및 가로폭 틀어짐(스크롤바 영역 파먹힘) 완벽 해결 */
#sub ul {
    max-height: 340px; 
    overflow-y: auto;
    
    /* ★ 핵심: 스크롤바가 생기는 트랙 영역까지 흰색으로 꽉 채워서 상단 버튼과 너비를 맞춤 */
    background-color: #ffffff; 
    border-radius: 0 0 5px 5px; /* 하단 모서리 둥글게 마무리 */
}

/* 안쪽 리스트가 패딩/마진 때문에 틀어지지 않도록 고정 */
#sub ul li.text {
    width: 100%;
    box-sizing: border-box;
}

/* 3. 스크롤바를 리스트 안쪽으로 자연스럽게 숨기기 (디자인) */
#sub ul::-webkit-scrollbar {
    width: 10px; /* 스크롤바 너비를 살짝 여유 있게 */
}
#sub ul::-webkit-scrollbar-track {
    background-color: #ffffff; /* ★ 스크롤바 뒷배경도 똑같이 흰색으로! */
    border-radius: 0 0 5px 0;
}
#sub ul::-webkit-scrollbar-thumb {
    background-color: #d1d1d1; /* 부드러운 회색 스크롤바 */
    border-radius: 10px;
    /* 스크롤바 주변에 흰색 테두리를 줘서 리스트 안쪽에 떠 있는 것처럼 고급스럽게 연출 */
    border: 2px solid #ffffff; 
}


#sub ul li {
	font-size: 18px;
	padding: 18px 0px 18px 0px;
	color: #000000;

	border: 1px solid #b2b2b2;
	border-top: 0px solid #b2b2b2;
}




#sub ul li:hover {
	background-color: #dadada;
	color: #000;
	transition: 0.6s;
}




ul {
	margin-bottom: 0px;
}

li#sub.text ul a {
	font-family: "Paperlogy5", "Malgun Gothic", "sans-serif";
	letter-spacing: -0.02em;
	color: #ffffff;
}

li#sub.text ul a:hover {

	color: #000000;
}