@media (max-width: 991px) {
    :root{
        --knx-container-padding: 2rem;
        --knx-hero-title: 4rem;
        --knx-h1-size: 2.5rem;
        --knx-h2-size: 2rem;
        --knx-h3-size: 1.75rem;
        --knx-h4-size: 1.5rem;
        --knx-h5-size: 1.25rem;
        --knx-h6-size: 1rem;
        --knx-p-size: 0.75rem;
        --knx-small-size: 1rem;

    }
    .pcOnly{
        display: none;
    }
    
    /* 헤더 모바일 반응형 스타일 */
    .header-wrapper {
        padding: 0 1rem;
        flex-direction: column;
        height: auto;
        gap: 0.5rem;
        top: 0.5rem;
    }
    
    .knx-header {
        width: 100%;
    }
    
    .knx-header .h-inner {
        width: fit-content;
        margin: 0 auto;
        padding: 0.5rem 1.5rem;
    }
    
    .header-wrapper .knx-header .h-inner a img {
        height: 2.5rem;
    }
    
    .knx-header .h-inner ul {
        display: none; /* 모바일에서는 메뉴 숨김 */
    }
    
    .header-wrapper .user-floating-bar {
        padding: 0.875rem 2rem;
        gap: 0.75rem;
        width: fit-content;
        position: fixed;
        bottom: 1rem;
    }
    
    .user-floating-bar__info {
        flex: 1;
        min-width: 0;
    }
    
    .user-floating-bar__name {
        font-size: 0.875rem;
    }
    
    .user-floating-bar__phone {
        font-size: 0.75rem;
    }
    
    .user-floating-bar__btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    .user-floating-bar__btn-icon {
        font-size: 1.125rem;
    }
    
    .user-floating-bar__btn-text {
        display: none; /* 모바일에서는 아이콘만 표시 */
    }
    #margin-bottom-4 {
        margin-bottom: 2rem;
    }

    #margin-bottom-3 {
        margin-bottom: 2rem;
    }

    #margin-bottom-2 {
        margin-bottom: 1rem;
    }

    #margin-bottom-1 {
        margin-bottom: 0.5rem;
    }

    #margin-bottom-0 {
        margin-bottom: 0;
    }
    #btn-container{flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    .knx-basic-sec{
        padding: 4rem var(--knx-container-padding) 0;
    }
    .knx-main-sec{
        height: fit-content;
        padding-bottom: 3rem;
    }
    .knx-main-sec .container .deco img{
       width: 100%;
    }
    .knx-main-sec .container .deco1{
        max-width: 45%;top:5%;left:10%;
    }
    .knx-main-sec .container .deco2{
        max-width: 45%;right:5%;
    }
    .knx-main-sec .container .deco3{
        max-width: 45%;
    }
    .knx-main-sec .container{
    padding-top: 10rem;
    width:calc(100% - 2rem);
    flex-direction: column;
    }
    .knx-container{
        padding: 1.5rem;
    }
    .knx-main-sec .container .title{
        height: fit-content;
    }
    .knx-main-sec .container .right-box{
        justify-content: flex-start;
    }
    .knx-main-sec .container .right-box img{
        width: 70%;
        margin: 0 auto;
    }
    .knx-main-sec .container .right-box .float-box{
        min-width: 100%;
        position: relative;
        margin-top: -2rem;
    }
    .knx-main-sec .container .right-box .float-box .btn-group{
        flex-direction: column;
    }
    .knx-main-sec .container .right-box .float-box .btn-group .btn{
        gap: .5rem;
    }
    .knx-ecomento-sec .banner-wrap a .banner-txt .btn-group .btn-right .btn{
        display: none;
    }
    .knx-ecomento-sec .banner-wrap a{
        padding: 1rem;
        min-height: 18rem;
    }
    .knx-ecomento-sec .banner-wrap a img{
        max-width: 150px;
    }
    .knx-ecomento-sec .banner-wrap .banner-txt{
    }

    .knx-ecomento-sec .banner-wrap a .banner-txt .btn-group{
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-bottom: 0;
    }
    .knx-ecomento-sec .banner-wrap a .banner-txt .btn-group .btn-left{
        flex-direction: column;
    }
    .side-character{
        position: relative;
        top: 0;
        right: 0;
        margin-left:50%;
        width: 50%;
        height: auto;
        max-width: 100%;
    }
    .knx-ecomento-container .knx-inner-container{
        margin-top: -8rem;
    }
    .knx-ecomento-container .knx-inner-container:last-child{
        margin-top: 0;
    }
    .eco-mentor-card--compact{
        flex:1;
    }
    .eco-mentor-card {
	flex: 1 1 0;
	min-height: fit-content;
    gap: 0.5rem;
}
.eco-mentor-slider .slick-slide{
    margin: 0 0.25rem;
}

	.knx-plan-sec .masonry-filter-actions {
		gap: 0.5rem;
        margin-top:-3rem;
        z-index: 10;
	}
	.knx-plan-sec .masonry-filter-actions .btn-filter {
		text-align: center;
        padding: 1rem;
	}
	.knx-plan-sec .masonry-filter-actions .filter-label {
		width: 100%;
		margin-bottom: 0.25rem;
	}
    
	.knx-plan-sec .masonry-grid {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
    .knx-action-sec .action-row{
        flex-direction: column;
        gap: 1rem;
    }
    .knx-action-sec .action-row .action-box{
        width: 100%;
    }
    .knx-action-sec .action-row .action-box img{
        width: 100%;
        height: auto;
    }
    .knx-action-sec .action-row .action-box .action-txt{
        width: 100%;
    }
    .knx-action-sec .action-item:nth-child(1) .action-item-button{
        margin-top: 1rem;
    }
    .knx-action-sec .action-item:nth-child(1) .action-item-button img{
        width: 1rem;
    }
    .knx-action-sec .action-item-group{
        padding: 1rem;
        gap: 1rem;
    }
    .knx-action-sec .action-item{
        min-height: fit-content;
        z-index:2;
    }
    .knx-action-sec .action-calculator-item-content{
        margin-bottom: 2rem;
    }
    .knx-action-sec .action-calculator-group .character-img{
    height: 90%;
    z-index: 0;
    }
    .knx-action-sec .action-calculator-item{
        z-index:2;
    }
    .knx-action-sec .action-calculator-group .action-calculator-item-button img{
        width: 1rem;
    }
    .knx-campaign-sec .campaign-header-controls{
        justify-content: space-between;
        width: 100%;
    }
    .knx-campaign-sec .campaign-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    .knx-campaign-sec .campaign-header .campaign-title-wrap{
        flex-direction: column;
        gap: 0.5rem;
    }
    .knx-campaign-sec .campaign-header .campaign-title-wrap .campaign-title-group{
        flex-direction: column;
        gap: 0.5rem;
    }   
    .knx-campaign-sec .campaign-card{
        flex-direction: column;
    }
    .knx-campaign-sec .campaign-image-wrap{
        display: none;;
    }
    .knx-campaign-sec .campaign-category-grid{
        grid-template-columns: repeat(1, 1fr);
    }
        .knx-promise-sec{
            padding-bottom: 4rem;
        }
    .knx-promise-sec .promise-title-wrap{
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    /* Promise Chart 반응형 스타일 (991px 이하) */
    .knx-promise-sec .promise-title {
        font-size: 2.5rem;
    }
    
    .knx-promise-sec .promise-subtitle {
        font-size: 1.5rem;
    }
    
    .knx-promise-sec .promise-chart-wrap {
        height: auto;
        padding: 0;
    }
    
    .knx-promise-sec .promise-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .knx-promise-sec .promise-chart-title {
        font-size: 1.5rem;
    }
    
    .knx-promise-sec .promise-chart-badge {
        font-size: 2rem;
    }
    
    /* 가로 막대그래프로 변경 */
    .knx-promise-sec .promise-chart-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .25rem !important;
        margin-top:1rem;
        padding: 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        justify-content: flex-start !important;
        min-width: auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }
    
    .knx-promise-sec .promise-chart-content::-webkit-scrollbar {
        height: 6px;
    }
    
    .knx-promise-sec .promise-chart-content::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .knx-promise-sec .promise-chart-content::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }
    
    .knx-promise-sec .promise-chart-content::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }
    
    .knx-promise-sec .promise-chart-bg {
        display: none !important;
    }
    
    .knx-promise-sec .promise-chart-bar-wrap {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 0 !important;
        position: relative;
    }
    
    .knx-promise-sec .promise-chart-bar-wrap--tall,
    .knx-promise-sec .promise-chart-bar-wrap--short {
        height: auto !important;
        justify-content: flex-start !important;
    }
    
    .knx-promise-sec .promise-chart-count {
        flex: 0 0 60px !important;
        width: 60px !important;
        text-align: left !important;
        font-size: 1.5rem !important;
        order: 1;
    }
    
    .knx-promise-sec .promise-chart-bar {
        flex: 0 0 auto !important;
        width: calc((100% - 60px - 1rem) * var(--bar-width-ratio, 1)) !important;
        min-width: 0 !important;
        max-width: calc(100% - 60px - 1rem) !important;
        height: 60px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 1.5rem !important;
        border-radius: 0.5rem !important;
        position: relative !important;
        transition: width 0.3s ease;
    }
    
    .knx-promise-sec .promise-chart-bar-label {
        position: static !important;
        transform: none !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-size: 1.25rem !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        order: 2;
    }
    
    .knx-promise-sec .promise-citizens-list {
        flex-direction: column;
    }
    
    .knx-promise-sec .promise-citizen-card {
        width: 100%;
        flex-direction: row-reverse;
        align-items: center;
        gap: 0.5rem;
        padding:1rem;
    }
    .knx-promise-sec .promise-citizen-count{
        flex: 0 0 auto;
        width: 3rem;
        text-align: left;
        font-size: 1.5rem;
        order: 1;
        
    }
    .knx-promise-sec .promise-citizen-info{
        align-items: flex-start;
    }
    #ecomentorPlanRegisterBtn{
        width: 100%;
    }

    .campaign-modal-btn{
        font-size: 1.25rem;
        }
    .participation-modal-btn{
        font-size: 1.25rem;
     }
    .knx-promise-sec .promise-citizens-title{
        font-size: var(--knx-h4-size);
    }
    .knx-promise-sec .promise-citizens-wrap{
        padding: 1.5rem;
    }
}


@media (min-width: 2560px) {
    .knx-promise-sec .promise-chart-bar-wrap--tall
    {}}