/* 
 * Company 섹션 반응형 CSS
 * 태블릿 및 모바일 디바이스 대응을 위한 스타일
 * 브레이크포인트: 
 * - 모바일: ~767px (기본 스타일)
 * - 태블릿: 768px~1023px
 * - 데스크톱: 1024px~
 */

/* ===== 기본 반응형 설정 ===== */
img, svg {
    max-width: 100%;
    height: auto;
}

/* ===== 네비게이션 메뉴 ===== */
/* 모바일용 햄버거 메뉴 버튼 (스타일만 정의, HTML에 추가 필요) */
.mobile-menu-btn {
    display: none;
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
    margin-left: auto;
}

.mobile-menu-btn span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #333;
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
}

.mobile-menu-btn span:nth-child(1) {
    top: 6px;
}

.mobile-menu-btn span:nth-child(2) {
    top: 14px;
}

.mobile-menu-btn span:nth-child(3) {
    top: 22px;
}

.mobile-menu-btn.open span:nth-child(1) {
    top: 14px;
    transform: rotate(135deg);
}

.mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.mobile-menu-btn.open span:nth-child(3) {
    top: 14px;
    transform: rotate(-135deg);
}

/* 모바일 기본 스타일 (767px 이하) */
@media screen and (max-width: 767px) {
    .mobile-menu-btn {
        display: none;
    }
    .status-cards {
        width: 100% !important;
    }
    .consulting-notice-section {
        flex-direction: column;
    }
    .consulting-service img {
        height: 60%;
    }
    .notice-section {
        width: 100% !important;
    }
    .attendance-section .left-section {
        display: none;
    }
    .sub-content-wrap {
        flex-direction: column;
    }
    #calendar, #mainCalendar, #modalCalendar {
        width: unset;
    }
    .sub-content-wrap {
        align-items: anchor-center;

    }
    .project {
        min-width: 466px !important;
}
    .tab-content .worker-location {
        display: none;
    }
    #tab3 .attendance-status {
        width: 50%;
    }
    
}
/* 태블릿 스타일 (768px ~ 1023px) */
@media screen and (max-width: 1023px) {
    nav .menu {
        gap: 30px;
    }
    
    .mobile-menu-btn {
        display: none;
    }
    
    .sub-title {
        display: none;
    }

    .sub-content {
        width: 100% !important;
        padding: 2rem;
    }

    .sub-content-wrap {
        gap: 1rem;
    }

    .consulting-notice-section {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .consulting-service {
        width: 100%;
        padding: 40px;
    }

    .consulting-service img {
        width: 25%
    }
    
    .notice-section {
        width: calc(50% - 10px);
    }
    
    /* 마이페이지 */
    .user-info-wrapper h1 {
        font-size: 22px;
    }
    
    /* 이미지 갤러리 */
    .image-row img {
        width: calc(50% - 7.5px);
        height: 150px;
    }
    
    /* 모달 및 팝업 */
    .report-popup, 
    .detail-view {
        width: 95%;
        padding: 20px;
    }
    
    .modal-content {
        width: 95%;
    }
    #projectDetailModal .worker-stat-item {
        padding: 10px !important;
    }
    /* 테이블 및 리스트 */
    .info-label, 
    .account-label {
        width: 120px;
    }
    .status-cards {
        display: flex;
        gap: unset;
        width: 70%;
        justify-content: space-between;
     }
    .project{
        min-width: 350px;
    }
    /* 프로젝트 리스트 */
    .project-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 출석(근태) 페이지 */
    .tab-panel.attendance .wrap {
        gap: 20px;
    }
    .fc-col-header {
        max-width: 422px !important;
        width: 100% !important;
    }
    
    .fc-scrollgrid-sync-table {
        max-width: 422px !important;
        width: 100% !important;
    }

    .content-info {
        padding: 1rem;
    }

    .content-info {
        flex-wrap: wrap;
    }
    .project-content .worker-info {
        width: 100px;
        flex: 0 0 100%;
        padding-bottom: 1rem;
    }
    .project-content .content-info .content-details {
        width: auto;
    }
    #calendar, #mainCalendar, #modalCalendar {
        width: 100% !important;
        max-width: 466px;
    }
    .fc-daygrid-body {
        width: inherit !important;
    }
    #projectDetailModal #reportCalendar,
    #projectDetailModal #checkListCalendar {
        width: 350px !important;
    }
}

/* 데스크톱 스타일 (1024px 이상) */
@media screen and (min-width: 1024px) {
    .mobile-menu-btn {
        display: none;
    }
    
    nav .menu {
        gap: 60px;
        display: flex;
    }
    
    /* 메인 페이지 */
    .consulting-notice-section {
        flex-wrap: nowrap;
        gap: 40px;
    }
    
    .consulting-service {
        width: 500px;
        padding: 55px;
    }
    
    .notice-section {
        width: 100%;
    }
    
    /* 모달 및 팝업 */
    .report-popup, 
    .detail-view {
        width: 1000px;
        padding: 30px;
    }
    
    /* 이미지 갤러리 */
    .image-row img {
        width: calc(33.333% - 10px);
        height: 180px;
    }

    /* 프로젝트 리스트 */
    .project-list {
        grid-template-columns: repeat(3, 1fr);
    }
}