/* 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {
    /* 모바일에서 사이드바 컨테이너 */
    .sidebar-container {
        left: 0 !important; /* 컨테이너는 고정 */
        transition: none !important; /* 컨테이너 애니메이션 제거 */
    }
    
    /* 모바일에서 사이드바가 열렸을 때 */
    body.sidebar-open .sidebar-container {
        left: 0 !important;
    }
    
    /* 기존 PC 토글 버튼 숨기기 */
    .sidebar-toggle {
        display: none;
    }
    
    /* 모바일 토글 버튼 표시 */
    .mobile-toggle-button {
        display: flex;
        position: fixed;
        bottom: 16px;
        left: 16px; /* 좌측 기준 16px */
        width: 107px;
        height: 40px;
        background-color: #00A0DF;
        border: none;
        border-radius: 20px; /* 둥근 버튼 */
        color: #ffffff;
        font-family: 'NanumSquareNeo', sans-serif;
        font-size: 14px;
        font-weight: 700;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 998; /* 사이드바보다 낮게 */
        box-shadow: 0 2px 10px rgba(0, 160, 223, 0.3);
        transition: all 0.3s ease;
    }
    
    .mobile-toggle-button:hover {
        background-color: #0090cf;
        box-shadow: 0 4px 15px rgba(0, 160, 223, 0.4);
    }
    
    .mobile-toggle-button:active {
        transform: scale(0.95);
    }
    
    /* 모바일에서 사이드바 콘텐츠 */
    .sidebar-content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #ffffff;
        box-shadow: none;
        transform: translateX(-100%); /* 화면 밖으로 숨기기 */
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1000; /* 오버레이보다 위 */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* 전체 스크롤 방지 */
    }
    
    /* 모바일에서 사이드바가 열렸을 때 */
    body.sidebar-open .sidebar-content {
        transform: translateX(0); /* 화면으로 들어오기 */
    }
    
    /* 모바일에서 사이드바 헤더 */
    .sidebar-header {
        width: 100%;
        height: 108px; /* 모바일 헤더 높이 108px */
        position: relative;
        flex-shrink: 0; /* 높이 고정 */
        z-index: 10; /* z-index 추가 */
    }
    
    /* 모바일 닫기 버튼 */
    .mobile-close-button {
        display: flex;
        position: absolute;
        top: 8px; /* 상단 기준 8px */
        right: 8px; /* 우측 기준 8px */
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 100; /* z-index 높이기 */
        padding: 0;
    }
    
    .mobile-close-button img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .mobile-close-button:active {
        opacity: 0.7;
    }
    
    /* 모바일에서 탭 컨테이너 */
    .tabs-container {
        padding-left: 0; /* 좌측 패딩 제거 */
        padding-right: 0; /* 우측 패딩 제거 */
        height: 108px;
        gap: 0; /* 탭 간격 없음 */
        overflow-x: hidden; /* 가로 스크롤 제거 */
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap; /* 줄바꿈 방지 */
        align-items: flex-end; /* 하단 정렬 */
    }
    
    /* 모바일에서 탭 버튼 */
    .tab-button {
        width: calc(100% / 3); /* 1/3씩 차지 */
        min-width: auto;
        max-width: none;
        padding: 0 10px;
        height: 40px;
        font-size: 14px; /* 글씨 크기 14px */
        white-space: normal; /* 줄바꿈 허용 */
        word-break: keep-all; /* 단어 단위로 줄바꿈 */
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 15px 15px 0 0; /* 상단만 라운드 */
        /* 터치/클릭 개선 */
        cursor: pointer;
        position: relative;
        z-index: 5;
        -webkit-tap-highlight-color: transparent; /* 터치 하이라이트 제거 */
        touch-action: manipulation; /* 빠른 터치 반응 */
    }
    
    .tab-button:active {
        opacity: 0.8;
    }
    
    .tab-button.active {
        height: 45px; /* 활성화 시 높이 */
    }
    
    /* 모바일에서 탭 콘텐츠 */
    .tab-content-container {
        padding: 20px;
        flex: 1; /* 남은 공간 차지 */
        overflow-y: auto; /* 세로 스크롤 허용 */
        overflow-x: hidden; /* 가로 스크롤 방지 */
        height: calc(100vh - 108px); /* 헤더 높이 빼기 */
    }
    
    /* 모바일에서 메인 콘텐츠 */
    body.sidebar-open .main-content {
        margin-left: 0; /* 모바일에서는 메인 콘텐츠 이동 없음 */
    }
    
    /* 모바일에서 클릭 박스 크기 조정 */
    .click-box {
        display: block !important; /* 모바일에서 표시 */
        /* 화면 너비의 33% 비율로 크기 설정 */
        width: 33vw !important;
        height: 26.4vw !important;
    }
    
    /* 탭2 박스들 위치 조정 - 모두 left: 20% 통일 */
    .box-a {
        top: 14% !important;
        left: 20% !important;
    }
    
    .box-b {
        top: 25.8% !important;
        left: 20% !important;
    }
    
    .box-c {
        top: 36.5% !important;
        left: 20% !important;
    }
    
    .box-d {
        top: 48% !important;
        left: 20% !important;
    }
    
    .box-e {
        top: 58% !important;
        left: 20% !important;
    }
    
    .box-f {
        top: 69.7% !important;
        left: 20% !important;
    }
    
    .box-g {
        top: 81.3% !important;
        left: 20% !important;
    }
    
    .box-h {
        top: 91% !important;
        left: 20% !important;
    }
    
    /* 탭3 박스들 위치 조정 - 모두 left: 20% 통일 */
    .tab3-box-a {
        top: 22.6% !important;
        left: 20% !important;
    }
    
    .tab3-box-b {
        top: 41.8% !important;
        left: 20% !important;
    }
    
    .tab3-box-c {
        top: 60.8% !important;
        left: 20% !important;
    }
    
    .tab3-box-d {
        top: 78.5% !important;
        left: 20% !important;
    }
    
    /* 모바일에서 이미지 전환 */
    .pc-image {
        display: none !important;
    }
    
    .mobile-image {
        display: block !important;
    }
    
    /* 모바일 오버레이 (딤 처리) */
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    body.sidebar-open .mobile-overlay {
        display: block;
        opacity: 1;
    }
    
    /* 모바일에서 모달 스타일 */
    .modal-overlay {
        padding: 0 8px; /* 좌우 8px 여백 */
    }
    
    .modal-container {
        width: 100%;
        max-width: none;
    }
    
    .modal-content {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 304 / 238; /* 가로세로 비율 304:238 */
        background-image: url('../assets/images/video_slider_bg_mo.png') !important;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* 상단 정렬로 변경 */
        padding: 20px; /* 패딩 20px로 변경 */
        box-sizing: border-box;
    }
    
    /* 슬라이드 이미지 컨테이너 */
    .slide-image-container {
        position: absolute; /* 절대 위치로 변경 */
        top: 50%; /* 세로 중앙 */
        left: 50%; /* 가로 중앙 */
        transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
        width: calc(100% - 40px); /* 좌우 패딩 고려 */
        height: auto;
        max-height: calc(100% - 80px); /* 상하 여백 및 인디케이터 공간 고려 */
        padding: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 슬라이드 이미지 */
    .slide-image {
        width: 100%;
        height: auto;
        object-fit: contain;
        max-height: 60vh; /* 화면 높이의 60%로 제한 */
    }
    
    /* 좌우 버튼 숨기기 */
    .slide-btn {
        display: none !important;
    }
    
    /* 닫기 버튼 */
    .modal-close {
        width: 30px;
        height: 30px;
        top: 10px;
        right: 10px; /* 우상단으로 이동 */
        left: auto;
        background-color: transparent; /* 배경 제거 */
        border: none;
        border-radius: 0;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .modal-close::before {
        content: '×';
        color: #00a0df; /* 인디케이터 활성화 색상 */
        font-size: 30px;
        font-weight: bold;
        line-height: 1;
    }
    
    .modal-close:hover {
        opacity: 0.8;
        background-color: transparent;
    }
    
    /* 인디케이터 */
    .slide-indicators {
        position: absolute; /* 절대 위치로 변경 */
        bottom: 20px; /* 하단에서 20px */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        padding: 0;
        z-index: 10; /* 이미지 위에 표시 */
    }
    
    /* 인디케이터 점 */
    .indicator-dot {
        width: 8px;
        height: 8px;
    }
}

/* PC에서만 모바일 버튼 숨기기 */
@media screen and (min-width: 769px) {
    .mobile-toggle-button {
        display: none !important;
    }
    
    .mobile-close-button {
        display: none !important;
    }
}

/* 모바일에서 공단소개 버튼 스타일 */
@media screen and (max-width: 768px) {
    .intro-button {
        top: 16px;
        right: 16px;
        width: 86px;
        height: 40px;
        font-size: 14px;
        border-radius: 20px; /* 알약 모양 (높이 40px의 50%) */
        box-shadow: 0 2px 6px rgba(0, 125, 195, 0.3);
    }
    
    .intro-button:hover {
        box-shadow: 0 3px 8px rgba(0, 125, 195, 0.4);
        transform: translateY(-1px);
    }
    
    /* 모바일에서 로고 스타일 */
    .logo-link {
        top: 16px;
        left: 16px;
        height: 40px; /* 공단소개 버튼과 동일한 높이 */
    }
}