.main-wrapper-p {
            display: flex;
            max-width: 100%;
            width: 100%; 
            overflow: hidden; 
        }

        /* 왼쪽 이미지 패널 */
        .left-image-area {
            flex: 3; /* 오른쪽보다 넓게 */
            padding: 0px; 
            display: flex;
            justify-content: center;
            align-items: center; /* 이미지를 중앙에 */
            overflow: hidden; /* 이미지 오버플로우 방지 */ 
        }

        .left-image-area img {
            max-width: 100%;
            height: auto;
            transition: opacity 0.5s ease-in-out; /* 이미지 전환 효과 */
        }

        /* 오른쪽 메뉴 패널 (메뉴 + 설명) */
        .right-menu-panel {
            flex: 2.0; /* 왼쪽보다 좁게 */
            padding: 10px 0px 50px 0;
            display: flex;
            flex-direction: column; /* 세로 정렬 */
			
        }

        .right-menu-panel h2 {
            color: #007bff;
            font-size: 2em;
            margin-bottom: 30px;
            text-align: center;
        }

        .menu-list-p {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column; /* 메뉴 항목 세로 정렬 */
            gap: 10px; /* 메뉴 항목 사이 간격 */
        }

        .menu-item-p {
            cursor: pointer;
            overflow: hidden; /* 설명 슬라이드 효과를 위해 필수 */
            transition: border-color 0.3s ease;
			color:#878b97;
        }

        .menu-item-p.active {
            border-color: #007bff; /* 활성 상태일 때 테두리 색상 변경 */
        }

        .menu-item-p-header {
            padding: 15px 20px; 
            color: #878b97;
            font-size: 1.5em;
            font-weight: bold;
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
            display: block; /* a 태그 대신 div에 스타일 */
        }

        .menu-item-p:hover .menu-item-p-header, .menu-item-p.active .menu-item-p-header {
            /*background-color: #007bff;*/
            color: white;
			font-size: 1.8em;
            transform: translateY(-3px); /* 호버 시 약간 떠오르는 효과 */ 
            position: relative; /* box-shadow z-index */
            z-index: 1;  
        }

        /* 메뉴 설명 영역 */
        .menu-description-area {
            max-height: 0; /* 초기에는 숨김 */
            padding: 0 20px; /* 보이지 않을 때는 패딩 0 */ 
            transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* 부드러운 슬라이드 및 패딩 변화 */
            overflow: hidden; /* 넘치는 내용 숨김 */
            color: #f0f0f0;
            font-size: 0.95em;
            opacity: 0; /* 내용 텍스트 자체의 페이드 효과 */
            transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.3s ease-out 0.1s; /* opacity 지연 시작 */
        }

        .menu-item-p.active .menu-description-area {
            max-height: 200px; /* 내용에 따라 충분히 큰 값으로 설정 */
            padding: 0px 0px 0 80px; /* 보일 때 패딩 */
            opacity: 1; /* 활성화 시 나타남 */
        }
        
        .menu-description-area h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #f0f0f0;
            font-size: 1.25em;

			 
        }
        .menu-description-area p {
            margin-bottom: 0; /* 마지막 p 태그 하단 마진 제거 */
        }


        /* -------------------- 반응형 디자인 -------------------- */
        @media (max-width: 768px) {
            body {
                padding: 0px 0;
            }
            .main-wrapper-p {
                flex-direction: column; /* 세로로 쌓이게 */
                width: 100%;
                margin: 0px auto;
                box-shadow: none; 
            }

            .left-image-area {
                border-right: none;
                border-bottom: 1px solid #eee; /* 모바일에서는 하단 경계선 */
                padding: 0px;
                min-width: unset;
                order: 1; /* 이미지를 위로 */
            }
            .left-image-area img {
                margin-bottom: 0;
            }
            
            .right-menu-panel {
                padding: 20px;
                order: 2; /* 메뉴를 아래로 */
            }
            .right-menu-panel h2 {
                font-size: 1.5em;
                margin-bottom: 20px;
            }
            .menu-list-p {
                gap: 10px;
            }
            .menu-item-p-header {
                font-size: 1.1em;
                padding: 12px 15px;
            }
            .menu-description-area {
                font-size: 0.9em;
            }
            .menu-item-p.active .menu-description-area {
                padding: 12px 15px;
            }
        }

        @media (max-width: 480px) {
            .left-image-area {
                padding: 0px;
            }
            .right-menu-panel {
                padding: 15px;
            }
            .right-menu-panel h2 {
                font-size: 1.3em;
            }
            .menu-item-p-header {
                font-size: 1em;
            }
            .menu-description-area h4 {
                font-size: 1em;
            }
            .menu-description-area p {
                font-size: 0.85em;
            }
        }