/*1200px 이하*/
@media screen and (max-width: 1200px) {
    .platform {
        padding: 0 10px;
    }

    .section-container2{
        padding: 40px 10px;
    }

}

/*1080px*/
@media screen and (max-width: 1080px) {
    .section-group-list {
        gap: 0;
    }
}

/* 1024px lap-top */
@media screen and (max-width: 1024px) {
    /*header*/
    /*  메뉴가 열리면 body를 고정 (스크롤 방지) */
    html.menu-open, body.menu-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
        touch-action: none;
    }

    .parent-menu-item:hover  .sub-menu::after{
        background-color: transparent;
    }

    .parent-menu-item:hover .parent-menu,
    .parent-menu-item:hover .sub-menu ,
    .parent-menu-item:hover .sub-menu li a{
        color: red;
        text-align: left;
    }

    .parent-menu-item{
        text-align: left;
    }

    .parent-menu-item:hover .sub-menu li a, .sub-menu li a{
        color: black;
    }

    .sub-menu li a{
        padding: 8px 0;
    }

    /*  메뉴가 열릴 때 `#parent-menu-bar`도 스크롤 방지 */
    #parent-menu-bar.active {
        position: fixed;
        top: 0;
        right: 0;
        width: 400px; /* 모바일 메뉴 너비 */
        height: 100dvh; /* 화면 전체 높이 */
        overflow: hidden;
        background: white;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /*header 영역*/
    .platform {
        padding: 0;
    }

    .platform-link-group {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .platform-header {
        display: none;
    }

    .platform-link {
        font-size: calc((100vw / 184) + 16px);
        letter-spacing: 0;
    }

/*로고이미지*/
    .page-logo {
        width: clamp(200px, 50vw, 250px);
    }


/*아이콘들  부모 컨테이너에 flexbox 적용 */
    .menu-search-container,
    .login-container,
    .search-container-mobile {
        display: flex;
        align-items: center;
        z-index: 10;
        margin-bottom: 4px;
        gap: 12px;
    }

    .login-container {
        display: flex;
        justify-content: center;
        gap: 8px;
        align-items: center;
    }

/* 로그인 로그아웃 아이콘 */
    .user-container{
        margin-top: 18px;
    }

    .user-container #loginIcon {
        width: 28px;
        height: 28px;
        cursor: pointer;
        padding-bottom: 2px;
        display: flex;
        align-items: center;
    }

    .user-container  #logoutIcon {
        width: 32px;
        height: 32px;
        cursor: pointer;
        padding-bottom: 4px;
        display: none;
    }

    .menubar-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 6px;
    }

    .menubar-container .menu-icon {
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: block;
    }

    .menubar-container .menu-close {
        cursor: pointer;
        width: 22px;
        height: 22px;
        display: none;
    }

    .parent-menu-bar li {
        display: none;
    }

    .parent-menu.active {
        color: #E0342F !important;
        font-weight: 700 !important;
        transition: color 0.3s ease-in-out;
    }


    /* 메뉴바 */
    #parent-menu-bar {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        background: white;
        z-index: 100;
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /*  메뉴가 활성화되었을 때 보이도록 설정 */
    #parent-menu-bar.active {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 20px;
        position: absolute;
        top: 0; /* 헤더 아래로 배치 */
        right: 0;
        width: 400px;
        background: white;
        z-index: 8;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        opacity: 0.9;
        padding-top: 98px;
        visibility: visible;
    }


    .menubar-container .menu-icon {
        background: transparent !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; /* 터치 하이라이트 제거 */
        -webkit-touch-callout: none !important; /* 기본 메뉴 동작 비활성화 */
        -webkit-user-select: none !important; /* 텍스트 선택 방지 */
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        outline: none !important;
    }


    .menubar-container .menu-icon:active,
    .menubar-container .menu-icon:focus {
        -webkit-box-shadow: none !important; /* Webkit 브라우저용 */
    }



    /* 부모 메뉴 */
    .parent-menu-item {
        padding: 10px 20px;
        cursor: pointer;
        font-weight: bold;
        position: relative; /* 서브메뉴를 부모 메뉴 기준으로 정렬 */
        transition: background 0.3s ease-in-out;
    }


    /* 서브메뉴 기본적으로 숨김 */
    .sub-menu {
        display: none;
        flex-direction: column;
        padding: 10px;
        position: relative;
        width: 100%;
        top: 0;
        left: -57px;
        z-index: 10;
    }

    /* 활성화된 상태에서만 보이도록 설정 */
    #parent-menu-bar.active li {
        display: block;
        margin-left: 30px;
    }

    /* ✅ 부모 메뉴 호버 시 해당 서브메뉴만 보이게 */
    .parent-menu-item:hover > .sub-menu {
        display: flex;
    }

    /* 서브메뉴 항목 */
    .sub-menu li {
        padding: 10px 20px;
        text-align: left;
        white-space: nowrap; /* 줄바꿈 방지 */
        width: 100%;
    }

    .sub-menu li:focus,
    .sub-menu li:active {
        background: transparent !important; /* ✅ 클릭하거나 터치해도 배경색 변경되지 않도록 설정 */
    }


    .sub-menu li a {
        color: black;
    }

    .sub-menu li a:hover {
        color: black;
        font-weight: 700;
        transform: scale(1.2);
        transition-duration: 0.5s;
    }


    /* a 태그 앞에 bullet 기호 추가 */
    .sub-menu li a::before {
        content: "● ";
        color: black;
        margin-right: 5px;
        font-size: 5px;
    }

    .sub-menu-bg {
        display: none !important;
    }

    .sub-menu-bg {
        top: 100%;
    }

    /* 차트 */
    .chart-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        justify-items: center;
        width: 96%;
        margin: 30px auto;
        gap: 70px;
    }

    .chart-content-box:before {
        width: 100%;
        height: 1px;
        top: -34px;
        right: 0;
    }

    .platform-link-group {
        padding: 16px 12px;
    }


    /* 도넛 차트 그룹 */
    .chart-wrap-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 100%;
    }

    .doughut-chart-wrap {
        max-width: 380px;
    }

    #myChart-1 {
        margin-bottom: 7px;
    }

    #myChart-2 {
        margin-top: 5px;
    }

    .chart-title {
        margin-bottom: 9px;
    }

    .title-2 {
        margin-top: 3px;
    }

    .chart-wrap {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .chart-content-box {
        max-width: 100%;
        width: 100%;
        height: auto;
        grid-row: 2; /*  도넛 차트를 두 번째 행으로 배치 */

    }

    .chart-text {
        margin-top: 20px;
        font-size: 16px;
        text-align: center;
    }

    /* 라인 차트가 위로 올라가도록 설정 */
    .swiper-container {
        width: 90vw;
        grid-row: 1; /* 라인차트 위로 배치 */
        max-width: unset;
        margin: 0 auto;
    }

    .swiper-slide {
        width: 100%;
    }

    .line-chart {
        max-width: unset; /* 제한 해제 */
    }

    .chart-data-text {
        margin-bottom: 40px;
    }

    .line-chart-text-wrap {
        width: 100%;
    }

    .line {
        width: 780px;
    }

    /*main 하단 영역 */
    .main-section2 {
        gap: 18px;
        grid-template-columns: 250px auto;
    }

    .section-container2 {
        background-color: #ffffff;
    }

    .emc-title-wrap h3, .business-info h3 {
        font-size: 16px;
    }

    .emc-title-wrap span {
        font-size: 14px;
    }

    .emc-title-wrap {
        gap: 5px
    }

    .emEdu-btn-wrap .emEdu-btn {
        padding: 6px 18px;
        font-size: 14px;
    }

    .section-group-list {
        padding: 22px 16px;
        gap: 20px;
        width: 100%;
        height: auto;
    }

    .business-info-list {
        margin-right: 0;
    }

    .emergency-edu {
        padding: 0;
    }

    .hos-img-wrap img {
        width: 180px;
        height: 140px;
    }

    .em-img-wrap img {
        width: 190px;
        height: 150px;
    }

    /* footer 영역 */
    .footer-group {
        padding: 40px 10px;
    }
}

/*940px 이하*/
@media screen and (max-width: 940px) {
    .parent-menu{
        font-size: 18px;
    }

    .main-section2 {
        grid-template-columns: 55% 45%;
    }

    .main-notice-list li{
        max-width: 460px;
    }

    .section-group-list {
        flex-direction: column;
    }

    .notice h3 {
        font-size: 16px;
    }

    .notice-title-wrap a {
        font-size: 24px;
    }

    .business-info-list li a, .emergency-edu-list li a {
        font-size: 12px;
    }

    /* footer 영역 */
    .footer-info {
        font-size: 16px;
    }

    .footer-info div br {
        display: block;
    }

    .check img {
        width: 12px;
        height: 10px;
    }
}

/*  768px 이하 */
@media screen and (max-width: 768px) {
    /*chart 영역*/
    .chart-container {
        flex-direction: column-reverse;
        display: flex;
    }

    .chart-wrap-content {
        gap: 20px;
    }

    .chart-wrap {
        width: 100vw;
        max-width: 330px;
    }

    .line-chart-text {
        margin-top: 20px;
        font-size: 14px;
    }

    .swiper-container {
        width: 100%;
    }

    .chart-data-text {
        text-align: center;
        margin-left: 50px;
    }

    .swiper-pagination {
        left: 54% !important;
    }

    /* main 하단 영역*/
    .section-container2 {
        margin: 30px auto;
    }

    .main-section2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section-group-list {
        flex-direction: row;
    }

    .notice-title-wrap h3 {
        font-size: 18px;
    }

    .notice-title-wrap a {
        font-size: 30px;
    }

    .main-notice-list li {
        max-width: 700px;
    }


    .emergency-edu-container {
        margin-top: 18px;
    }

    .hos-img-wrap img {
        width: 166px;
        height: 138px;
    }

    .em-img-wrap img {
        width: 178px;
        height: 138px;
    }


    /* footer 영역 */
    .footer-btn {
        gap: 45px;
    }

    .footer-info{
        font-size: 14px;
    }

    .footer-menu{
        width: 174px;
    }

}

@media screen and (max-width: 710px) {
    .chart-wrap-content {
        flex-direction: column;
        gap: 50px;
    }


}

@media screen and (max-width: 660px) {
    .line-chart-title {
        font-size: 22px;
    }

    .chart-data-text {
        margin-left: 30px;
    }

    #myChart-3 {
        min-height: 250px !important;
    }
}

/*630px 이하*/
@media screen and (max-width: 630px) {
    .section-group-list {
        flex-direction: column;
    }
    .footer-menu{
        width: 140px;
    }
}

@media screen and (max-width: 540px) {
    .footer-group {
        flex-direction: column;
        gap: 30px;
    }
    .page-content{
        height: 130px;
    }
    .page-menubar-container{
        padding: 0 10px;
    }

    .menubar-container .menu-icon{
        width: 26px;
        height: 26px;
    }

    .user-container #loginIcon{
        width: 24px;
        height: 24px;
    }

    .user-container  #logoutIcon{
        width: 26px;
        height: 26px;
        margin-top: 0;
    }

    .chart-wrap-box {
        width: 96%;
        margin: 0 auto;
    }

    #parent-menu-bar.active{
        width: 260px;
    }

    .parent-menu{
        font-size: 16px;
    }

    /* 차트 */
    .chart-content-box{
        margin-bottom: 20px;
    }
    .line-chart-title{
        font-size: 18px;
    }
    .line-chart-text{
        font-size: 12px;
    }

    /* 메인하단 공지사항 */
    .main-notice-list li a{
        font-size: 14px;
    }
    .notice{
        padding: 0 4px;
    }
    .main-notice-list li{
        max-width: 400px;
    }
}