/* 메인 화면에 항상 적용될 기본 스타일 */
#left-section {
    transition: transform 0.30s ease-in-out; /* 부드러운 이동 효과 항상 적용 */
}

/* 메뉴바가 열릴 때 메인 화면을 왼쪽으로 밀기 */
#left-section.push {
    transform: translateX(-240px); /* 메뉴바의 너비에 맞춰 조정 */
    transition: transform 0.30s ease-in-out; /* 부드러운 이동 효과 */
}

/* 메뉴바가 닫혀있을 때 기본 상태 */
#off-canvas-right {
    position: fixed;
    right: -100%; /* 오른쪽으로 숨겨짐 */
    width: 240px; /* 메뉴바의 너비 */
    height: 100%;
    opacity: 0; /* 투명도를 0으로 설정 */
    transition: right 0.4s ease opacity 0.4s ease; /* 부드러운 애니메이션 */
}

/* 메뉴바가 열려있을 때 */
#off-canvas-right.open {
    right: 0; /* 메뉴바가 화면에 표시됨 */
    opacity: 1; /* 완전 불투명 */
    transition: right 0.4s ease, opacity 0.4s ease; /* 부드러운 이동 및 투명도 변화 */
}