/* slider-single 좌우 인디케이터 정사각형 스타일 */
#slider-single .flickity-prev-next-button {
    width: 50px !important;
    height: 50px !important;
    border-radius: 68px !important; /* 라운드 코너 */
    background: rgba(255, 255, 255, 0.8) !important; /* 밝은 반투명 배경 */
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

#slider-single .flickity-prev-next-button:hover {
    background: rgba(255, 255, 255, 0.9) !important; /* 호버시 더 밝게 */
}

#slider-single .flickity-prev-next-button.previous {
    left: 20px !important;
}

#slider-single .flickity-prev-next-button.next {
    right: 20px !important;
}

#slider-single .flickity-prev-next-button svg {
    /* width: 15px !important;
    height: 15px !important; */
    fill: #333 !important; /* 화살표 색상을 어둡게 */
    stroke: #333 !important; /* 스트로크 색상 추가 */
    stroke-width: 4px !important; /* 라인 두께 증가 */
}

#slider-single .flickity-prev-next-button.next svg {
    left: 25%;
}

/* 슬라이더 반응형 이미지 */
.slider-img-pc {
    display: block;
}

.slider-img-mo {
    display: none;
}


/* 모바일에서 버튼 크기 줄이기 */
@media (max-width: 767px) {
    #slider-single .flickity-prev-next-button {
        width: 35px !important;
        height: 35px !important;
        border-radius: 35px !important;
        top: 52%;
    }
    
    #slider-single .flickity-prev-next-button.previous {
        left: 10px !important;
    }
    
    #slider-single .flickity-prev-next-button.next {
        right: 10px !important;
    }
    
    /* 모바일에서는 모바일 이미지 표시 */
    .slider-img-pc {
        display: none;
    }
    
    .slider-img-mo {
        display: block;
    }
    
    #slider-single .flickity-prev-next-button svg {
        width: 15px !important;
        height: 15px !important;
        stroke-width: 2px !important; /* 모바일에서도 라인 두께 유지 */
    }
    #slider-single .flickity-prev-next-button svg {
        left: 30%;
        top: 25%;
    }
}

/* mo_box_2 영역 전용 스타일 */

/* 기본 레이아웃 (PC) */
@media (min-width: 768px) {
    .mo_box_2 .works-grid.grid-3-col .work-item {
        width: 33.333% !important;
    }
}

.section-wrap .content {
    /* max-width: 1200px; */
    margin: 0 auto;
    /* padding: 0 15px; */
    box-sizing: border-box;
}
.section-wrap .content .cont{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* 모바일 레이아웃 (767px 이하) */
@media (max-width: 767px) {
    .section-wrap .content {
        /* max-width: 1200px; */
        margin: 0 auto;
        padding: 0 2vw;
        box-sizing: border-box;
    }
    .section-wrap .content.no-bg {background: none !important;}
    .section-wrap .content .cont{
        max-width: 100%;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    .mo_box_2 .works-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .mo_box_2 .work-item {
        width: 48% !important;
        /* margin-bottom: 20px; */
        /* float: none !important; */
        display: flex;
        flex-direction: column;
        /* aspect-ratio: 1 / 1; */ /* 정사각형 비율 */
    }
    
    /* 1행: [이미지1] [텍스트1] */
    .mo_box_2 .work-item.item-1 {
        flex-direction: row; /* 이미지가 위 */
        width: 100% !important;
    }
    
    .mo_box_2 .work-item.item-2 {
        flex-direction: row-reverse; /* 텍스트가 위 */
        width: 100% !important;
    }
    
    /* 2행: [텍스트2] [이미지3] */
    .mo_box_2 .work-item.item-3 {
        flex-direction: row; /* 텍스트가 위 */
        /* order: 3; */ /* 마지막 아이템을 세 번째로 */
        display: flex;
        width: 100% !important;
    }
    
    /* 2행에서 item-3가 혼자 있을 때 중앙 정렬을 위해 빈 공간 추가 */
    .mo_box_2 .work-item.item-3::after {
        /* content: ""; */
        width: 48%;
        visibility: hidden;
    }
    
    .mo_box_2 .work-container,
    .mo_box_2 .work-item-description {
        width: 50% !important;
        flex: 1; /* 동일한 크기로 분할 */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mo_box_2 .work-img {
        /* height: auto; */ /* 정사각형의 절반 */
        /* width: 100% !important; */
        overflow: hidden;
        display: flex;
        /* align-items: center; */
        /* justify-content: center; */
    }
    
    .mo_box_2 .work-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .mo_box_2 .work-item-description {
        height: 100% !important; /* 정사각형의 절반 */
        width: 50% !important;
        padding: 10px !important;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }
    
    .mo_box_2 .work-description-inner {
        text-align: center;
        width: 100%;
        padding: 5vw;
    }
    
    .mo_box_2 .work-description-inner h3 {
        font-size: 4vw !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
    }
    
    .mo_box_2 .work-description-inner p {
        font-size: 3vw !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        overflow: hidden;
        display: -webkit-box;
        /* -webkit-line-clamp: 3; */
        /* -webkit-box-orient: vertical; */
        line-clamp: 3; /* 표준 속성 추가 */
    }
}

/* 모바일 GNB Fixed 스타일 */
@media (max-width: 767px) {
    /* 스크롤 시 fixed 되는 header 스타일 */
    header.nav-type-3.fixed,
    .navigation.fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
    }
    
    /* fixed 상태일 때 컨텐츠가 가려지지 않도록 body에 패딩 추가 */
    body.header-fixed {
        padding-top: 70px !important; /* gnb 높이만큼 패딩 */
    }
    
    /* 모바일 메뉴 버튼 fixed 상태에서도 잘 보이도록 */
    header.nav-type-3.fixed .navbar-toggle {
        color: #333 !important;
    }
    
    header.nav-type-3.fixed .navbar-toggle .icon-bar {
        background-color: #333 !important;
    }
    
    /* 로고도 fixed 상태에서 잘 보이도록 */
    header.nav-type-3.fixed .logo-dark {
        filter: none !important;
    }
    
    /* 네비게이션 링크들도 색상 조정 */
    header.nav-type-3.fixed .navbar-nav > li > a {
        color: #333 !important;
    }
    
    /* navigation 컨테이너 조정 */
    .navigation.fixed .container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
}

/* PC/모바일 반응형 이미지 */
.pc {
    display: block;
}

.mo {
    display: none;
}

/* overlay-cat 고양이 이미지 스타일 */
.overlay-cat {
    position: absolute;
    height: auto;
    z-index: 10;
}

.cat1 {
    bottom: -14.5%;
    right: 5%;
    width: 25.7%; /* 비율로 크기 설정 */
}

.cat2 {
    bottom: 2%;
    left: 5%;
    width: 18.7%;
}

/* 이미지 박스 섹션 위치 설정 */
.section-wrap .col-md-12 {
    position: relative;
}

/* 모바일에서 반응형 처리 */
@media (max-width: 767px) {
    .pc {
        display: none;
    }
    
    .mo {
        display: block;
        width: 100%;
    }
    .mo img{width: 100%;}

    .overlay-cat {
        width: 20%; /* 모바일에서는 조금 더 크게 */
    }
    
    .cat1 {
        bottom: 5px;
        right: 5px;
    }
    
    .cat2 {
        bottom: 5px;
        left: 5px;
    }
}