.accordion-layout {
    display: flex;
    gap: 1rem;
}

/*메인 메뉴*/
.accordion-menu {
    width: 25rem;
    border-right: 1px solid #ccc;
}

.accordion-section {
    margin-bottom: 1rem;
}

.accordion-header-with-line {
    display: flex;
    width: 25rem;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #005395;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 12px 10px;
    border-bottom: 1px solid #b0c4de;
    transition: all 0.2s ease;
}

    .accordion-header-with-line:hover {
        background-color: #f5f5f5;
    }

.accordion-icon {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.accordion-header-with-line.open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-body {
    display: none;
    padding-left: 1rem;
    margin-top: 5px;
}

    .accordion-body.open {
        display: block;
    }

.accordion-subitem {
    padding: 8px 5px;
    cursor: pointer;
    color: #333;
    border-radius: 4px;
}

    .accordion-subitem:hover {
        background-color: #e0e0e0;
    }

.accordion-content {
    flex: 1;
    padding: 1rem;
}

.accordion-panel {
    display: none;
}

    .accordion-panel.active {
        display: block;
    }

    .accordion-panel.hidden {
        display: none;
    }


.accordion-subitem-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
    padding: 1.5rem;
}

/*좌측 아코디언 메뉴 누르고 나오느 우측 카드 아이템*/
.content-card {
    cursor: default; /* ← 커서 기본 화살표로 복원 */
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 1.5rem;
    width: 100%;
    height: 28rem; /* ✅ 고정 높이 설정 */
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    overflow: hidden;
}

.content-card-img {
    width: 100%;
    height: 16rem; /* 이미지 크기 확대 */
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 1rem;
    background-color: transparent;
    /*background-color: #f8f8f8;*/
}

.content-card-title {
    font-size: 1.5rem; /* 폰트 크기 키움 */
    font-weight: 700;
    color: #003366;
    margin-bottom: 0.5rem;
    text-align: center; /* 가운데 정렬 */
}

.content-card-desc {
    font-size: 1.0rem;
    color: #444;
    line-height: 1.8;
    text-align: center; /* 가운데 정렬 */
    text-overflow: ellipsis; /* ✅ 너무 길면 말줄임표 */
}


.child-url-image {
    width: 100px;
    margin: 10px;
}


.hidden {
    display: none;
}


/*선택 후 디테일 PartialView*/

/*이미지 컨테이너 컨테이너 안에 image랑 썸네일*/
.main-image-wrapper {
    text-align: left;
    margin-bottom: 1rem;
}

.main-image {
    width: 30rem;
    height: 30rem;
    object-fit: contain; /* 또는 cover */
    border: 2px solid #ccc;
    border-radius: 8px;
}

.image-radio-group {
    cursor: default; /* ← 커서 기본 화살표로 복원 */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: left;
    margin-bottom: 2rem;
}

.image-radio-item {
    text-align: center;
}

    .image-radio-item label {
        display: inline-block;
        cursor: pointer;
    }

    .image-radio-item input[type="radio"] {
        display: none;
    }

        .image-radio-item input[type="radio"]:checked + .radio-thumb {
            border: 2px solid #007bff;
        }

.radio-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}

.radio-label {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}



.content-paragraph {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-left: 3px solid #999;
}

.button-container {
    margin-bottom: 1rem;
}

.content-button {
    background-color: #f0f0f0;
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    cursor: pointer;
}

.child-content {
    margin-left: 2rem;
    margin-top: 0.5rem;
}


@media (max-width: 991.98px) {
    .accordion-layout {
        display: flex;
        gap: 1rem;
        flex-direction: column;
    }

    /*메인 메뉴*/
    .accordion-menu {
        width: 100%; /* 메뉴가 전체 너비를 차지하도록 설정 */
        border-right: none; /* 모바일에서는 오른쪽 경계선 없애기 */
    }
    /*아코디언 메뉴 사이 간격*/
    .accordion-section {
        margin-bottom: 1rem;
    }
    .accordion-content {
        flex: 11;
        width: 100%; /* 모바일에서는 콘텐츠가 전체 너비를 차지하도록 설정 */
    }

    .accordion-header-with-line {
        width: 100%;
        height: 1rem;
        font-size: 1.2rem; /* 폰트 크기 조정 */
        font-weight: bold; /* 폰트 굵기 조정 */
    }

    .accordion-icon {
        font-size: 2rem;
    }
    /*아코디언 자식 메뉴*/
    .accordion-body {
        display: none;
        padding-left: 1rem;
        margin-top: 1px;
    }

    .accordion-content {
        flex: 1;
        padding: 0rem;
    }

    /*아코디언 메뉴 자식*/
    .accordion-subitem {
        padding: 4px 5px;
        border-radius: 4px;
        font-family: 'Arial', sans-serif; /* 서브 아이템 폰트 설정 */
        font-size: 1rem; /* 폰트 크기 설정 */
        color: #333; /* 폰트 색상 */
    }
    .accordion-subitem-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        gap: 0.5rem;
        grid-template-columns: 1fr; /* 카드 아이템들이 한 줄에 하나씩 배치되도록 설정 */
        padding: 0rem;
    }

    /*좌측 아코디언 메뉴 누르고 나오느 우측 카드 아이템*/
    .content-card {
        padding: 0.5rem;
        width: 100%;
        height: 15rem; /* ✅ 고정 높이 설정 */
    }

    .content-card-img {
        width: 100%;
        height: 10rem; /* 이미지 크기 확대 */
        object-fit: contain;
        border-radius: 6px;
        margin-bottom: 0.2rem;
        background-color: transparent;
        /*background-color: #f8f8f8;*/
    }

    .content-card-title {
        font-size: 1.2rem; /* 폰트 크기 키움 */
        font-weight: 700;
        color: #003366;
        margin-bottom: 0rem;
        text-align: center; /* 가운데 정렬 */
    }

    .content-card-desc {
        font-size: 1.0rem;
        color: #444;
        line-height: 1.8;
        text-align: center; /* 가운데 정렬 */
        text-overflow: ellipsis; /* ✅ 너무 길면 말줄임표 */
    }


    .child-url-image {
        width: 100px;
        margin: 10px;
    }


    .hidden {
        display: none;
    }


    /*선택 후 디테일 PartialView*/

    /*이미지 컨테이너 컨테이너 안에 image랑 썸네일*/
    .main-image-wrapper {
        text-align: left;
        margin-bottom: 0.4rem;
    }

    .main-image {
        width: 100%;
        height: 14rem;
    }

    .image-radio-group {
        cursor: default; /* 커서 기본 화살표로 복원 */
        display: flex; /* flex 사용 */
        flex-wrap: nowrap; /* 한 줄에 아이템을 배치 */
        gap: 0rem;
        justify-content: flex-start; /* 왼쪽 정렬 */
        margin-bottom: 0.3rem;
        width: 100%;
        height: 7rem;
        overflow-x: auto; /* 가로 스크롤 추가 */
        overflow-y: hidden; /* 세로 스크롤 숨김 */
        white-space: nowrap; /* 아이템이 한 줄로 쭉 이어지게 함 */
    }

    .image-radio-item {
        text-align: center;
    }

        .image-radio-item label {
            display: inline-block;
            cursor: pointer;
        }

        .image-radio-item input[type="radio"] {
            display: none;
        }

            .image-radio-item input[type="radio"]:checked + .radio-thumb {
                border: 2px solid #007bff;
            }

    .radio-thumb {
        width: 5rem;
        height: 5rem;
        object-fit: contain; /* object-fit을 contain으로 변경하여 이미지가 영역 안에 맞춰짐 */
        border: 2px solid transparent;
        border-radius: 6px;
        display: block;
        margin: 0 auto;
    }

    .radio-label {
        margin-top: 0.2rem;
        font-size: 0.6rem;
    }

    .structured-content{
        padding: 0.1rem;
    }

    .content-paragraph {
        margin-bottom: 1rem;
        padding: 0.5rem;
        border-left: 3px solid #999;
    }
    .content-H1, .content-H1_SPACE {
        font-size: 1.5rem; /* 폰트 크기 */
        word-wrap: break-word; /* 긴 단어가 있을 때 자동으로 줄바꿈 */
        overflow-wrap: break-word; /* 동일한 효과, 긴 단어가 화면을 넘어가지 않게 */
    }
    .content-H2, .content-H2_SPACE {
        font-size: 1.3rem; /* 폰트 크기 */
        word-wrap: break-word; /* 긴 단어가 있을 때 자동으로 줄바꿈 */
        overflow-wrap: break-word; /* 동일한 효과, 긴 단어가 화면을 넘어가지 않게 */
    }
    .content-H3, .content-H3_SPACE {
        font-size: 1.1rem; /* 폰트 크기 */
        word-wrap: break-word; /* 긴 단어가 있을 때 자동으로 줄바꿈 */
        overflow-wrap: break-word; /* 동일한 효과, 긴 단어가 화면을 넘어가지 않게 */
    }
    .content-H4, .content-H4_SPACE {
        font-size: 0.9rem; /* 폰트 크기 */
        word-wrap: break-word; /* 긴 단어가 있을 때 자동으로 줄바꿈 */
        overflow-wrap: break-word; /* 동일한 효과, 긴 단어가 화면을 넘어가지 않게 */
    }
    .content-H5, .content-H5_SPACE {
        font-size: 0.8rem; /* 폰트 크기 */
        word-wrap: break-word; /* 긴 단어가 있을 때 자동으로 줄바꿈 */
        overflow-wrap: break-word; /* 동일한 효과, 긴 단어가 화면을 넘어가지 않게 */
    }
    .content-H6, .content-H6_SPACE {
        font-size: 0.6rem; /* 폰트 크기 */
        word-wrap: break-word; /* 긴 단어가 있을 때 자동으로 줄바꿈 */
        overflow-wrap: break-word; /* 동일한 효과, 긴 단어가 화면을 넘어가지 않게 */
    }
    .button-container {
        margin-bottom: 1rem;
    }

    .content-button {
        background-color: #f0f0f0;
        padding: 0.5rem 1rem;
        border: 1px solid #ccc;
        cursor: pointer;
    }

    .child-content {
        margin-left: 2rem;
        margin-top: 0.5rem;
    }




}
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 애니메이션 클래스 */
.animate-panel {
    animation: fadeSlideUp 0.5s ease-out both;
}