/**
 * 파일명: helpdesk-mobile.css
 * 파일위치: /wp-content/plugins/helpdesk/assets/css/helpdesk-mobile.css
 * 설명: 헬프데스크 플러그인 모바일 전용 스타일시트
 */

/* 모바일 전용 스타일 - 768px 이하에서만 적용 */
@media (max-width: 768px) {
    /* 메인 컨테이너 모바일 조정 */
    .helpdesk-main-container {
        max-width: 100%;
        margin: 0;
    }
    
    .helpdesk-tabs-container {
        padding: 0 10px;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .helpdesk-wrapper .container {
        max-width: 100%;
        margin: 0;
        padding: 10px;
    }
    
    /* 탭 네비게이션 모바일 */
    .helpdesk-tabs-container .board-nav-tabs {
        overflow-x: auto;
        justify-content: flex-start;
    }
    
    .helpdesk-tabs-container .board-nav-tab {
        min-width: 100px;
        padding: 12px 20px;
        gap: 6px;
    }
    
    .helpdesk-tabs-container .board-nav-tab i {
        font-size: 1.1rem;
    }
    
    .helpdesk-tabs-container .board-nav-tab .tab-label {
        font-size: 0.75rem;
    }
    
    /* 게시판 헤더 모바일 */
    .helpdesk-wrapper .board-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .helpdesk-wrapper .search-box,
    .helpdesk-wrapper .filter-section {
        margin-left: 0;
        width: 100%;
    }
    
    .helpdesk-wrapper .filter-section {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    
    .helpdesk-wrapper .search-box {
        width: 100%;
    }
    
    .helpdesk-wrapper .search-input {
        flex: 1;
    }
    
    /* 모바일 카드형 레이아웃 */
    .helpdesk-wrapper .board-table {
        overflow: visible;
        background: transparent;
        box-shadow: none;
        min-height: auto;
    }
    
    .helpdesk-wrapper table {
        display: none !important; /* 데스크톱 테이블 숨김 */
    }
    
    /* 모바일 카드 컨테이너 - 최고 우선순위 */
    .helpdesk-wrapper .mobile-cards {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 모바일 카드 강제 표시 - 최고 우선순위 */
    .helpdesk-wrapper .mobile-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 데스크톱 테이블 강제 숨김 - 최고 우선순위 */
    .helpdesk-wrapper table {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .helpdesk-wrapper .mobile-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border: 1px solid #e5e5e7;
    }
    
    .helpdesk-wrapper .mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
    }
    
    .helpdesk-wrapper .mobile-card-number {
        background: #f5f5f7;
        color: #666;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .helpdesk-wrapper .mobile-card-status {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .helpdesk-wrapper .mobile-card-title {
        font-size: 16px;
        font-weight: 600;
        color: #1d1d1f;
        line-height: 1.4;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .helpdesk-wrapper .mobile-card-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #666;
        margin-top: 8px;
    }
    
    .helpdesk-wrapper .mobile-card-author {
        font-weight: 500;
    }
    
    .helpdesk-wrapper .mobile-card-date {
        color: #999;
    }
    
    .helpdesk-wrapper .mobile-card-tags {
        display: flex;
        gap: 6px;
        margin-top: 8px;
        flex-wrap: wrap;
        align-items: center;
    }
    
    /* 모바일 카드 내부 요소들 */
    .helpdesk-wrapper .mobile-card .status-badge {
        font-size: 11px;
        padding: 2px 6px;
    }
    
    .helpdesk-wrapper .mobile-card .category-tag {
        font-size: 11px;
        padding: 2px 6px;
    }
    
    .helpdesk-wrapper .mobile-card .category-badge {
        font-size: 11px;
        padding: 2px 6px;
    }
    
    .helpdesk-wrapper .mobile-card .file-icon {
        font-size: 10px;
        padding: 2px 4px;
        width: 20px;
        height: 20px;
    }
    
    .helpdesk-wrapper .mobile-card .file-info {
        font-size: 12px;
        gap: 4px;
    }
    
    .helpdesk-wrapper .mobile-card .file-size {
        font-size: 11px;
        padding: 1px 4px;
    }
    
    .helpdesk-wrapper .mobile-card .reply-count {
        font-size: 11px;
        color: #0066cc;
    }
    
    .helpdesk-wrapper .mobile-card .download-count {
        font-size: 11px;
        color: #0066cc;
    }
    
    .helpdesk-wrapper .mobile-card .stat-item {
        font-size: 11px;
        gap: 2px;
    }
    
    .helpdesk-wrapper .mobile-card .stat-item i {
        font-size: 10px;
    }
    
    /* 글쓰기 버튼 모바일 */
    .helpdesk-wrapper .btn-write {
        width: 100%;
        justify-content: center;
        margin: 15px 0 80px 0;
    }
    
    /* 페이지네이션 모바일 */
    .helpdesk-wrapper .pagination {
        margin-bottom: 50px;
    }
    
    /* 모바일에서도 최소 높이 유지 */
    .helpdesk-wrapper .container {
        min-height: 700px;
    }
    
    .helpdesk-wrapper .board-table {
        min-height: 500px;
    }
    
    #helpdesk-content {
        min-height: 600px;
    }
    
    /* 모바일 모달 조정 */
    .helpdesk-modal .modal-content {
        width: 95%;
        max-height: calc(100vh - 40px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .helpdesk-modal .modal-header,
    .helpdesk-modal .modal-body,
    .helpdesk-modal .modal-footer {
        padding: 16px;
    }
    
    .helpdesk-modal .modal-footer {
        flex-direction: column;
    }
    
    .helpdesk-modal .btn {
        width: 100%;
        justify-content: center;
    }
}