/* 파일정보
*  파 일 명 : style.css
*  파일내용 : 나만의 style 설정
*/

/* 전체 화면 100% */
    html, body {
        margin: 0;
        padding: 2px 2px 2px 2px !important; /* 왼쪽만 30px */
        /* padding: 20px 20px 20px 30px !important; */
        width: 100%;
        height: 100%;
        font-family: Arial, sans-serif;
        font-size: 10pt;
        box-sizing: border-box;
    }

/* 콘텐츠 영역 */
    main {
        padding: 2px 2px 2px 2px !important;
        box-sizing: border-box !important;
        background-color: #f9f9f9 !important; /* 테스트용 */
    }
/* Anchor */
    a { text-decoration: none; /* 밑줄 제거 */ 
        color: inherit;        /* 부모 글자색을 그대로 따름 (파란색 방지) */
    }

/* 테이블 스타일 */
    table { width: 100%; border-collapse: collapse;  background-color: #f8f9fa !important }
    th, td { text-align: center; vertical-align: middle; border: 1px solid #ccc !important }
    th { background-color: #eee; font-weight: bold; }

/* 헤더 */
    header { background-color: #444; color: #fff; padding: 10px; }

/* 메뉴 */
    nav a { margin-right: 15px; color: #fff; text-decoration: none; }

/*#### Button 영역   #### */
    /* 버튼 스타일*/
    button, input[type=submit] { padding: 5px 10px; }
    /* 버튼영역 정렬 */
    .btn-area { margin-top: 15px; text-align: right; }
    /* 버튼리스트 영역정렬  */
    .btn-list { background-color: #f4f4f4; color: #333; padding: 7px 20px; border: 1px solid #ccc; text-decoration: none; display: inline-block; font-size: 9pt; }
    /* 관리자/강조 버튼 (어두운 남색) */
    .btn-admin { background-color: #2c3e50; color: white; padding: 7px 15px; border: none; text-decoration: none; font-size: 9pt; margin-left: 5px; }



/*#### FORM TAG 영역   #### */
    /* form 입력창: 너비 100% 대응 및 테두리 설정 */
    .input-text { width: 100%; padding: 5px; border: 1px solid #ccc; font-size: 9pt; box-sizing: border-box; }
    .input-date { padding: 4px; border: 1px solid #ccc; font-size: 9pt; }





/*#######  아래는 모바일용을 위한 css 임 ######*/
/* --- [범용 반응형 프레임워크] --- */

/* 1. 기본 초기화 (PC/모바일 공통) */
    .list-table { width: 100%; border-collapse: collapse; table-layout: auto !important; }
/* 위키 본문 내의 표 스타일 최적화 */
    .list-table td { 
        border: 1px solid #ddd !important; /* 테두리를 명확하게 */
        padding: 8px !important;
    }
    .list-table th {
        background-color: #f8f9fa !important;
        font-weight: bold;
    }
    .m-show-mobile { display: none; } /* PC에서는 모바일 전용 UI 숨김 */

/* 2. 행 상태 및 강조선 (style2, 3 통합) */
    .row-ing { border-left: 5px solid #d9534f !important; } /* 진행중: 빨강 강조선 */
    .row-done { border-left: 5px solid #5cb85c !important; background-color: #fcfcfc !important; color: #aaa !important; } /* 완료: 초록 강조선 */

/* 3. 모바일 레이아웃 (768px 이하 대응) */
    @media (max-width: 768px) {
        table, th, td { font-size: 9pt; }
        main { padding: 15px; }
    
    /* [기능 1] 컬럼 숨기기 */
        .m-hide { display: none !important; }

    /* [기능 2] 테이블 구조 해제 (찌그러짐 방지) */
        .list-table, .list-table tbody, .list-table tr { display: block; width: 100% !important; }
        .list-table thead { display: none; }

    /* [기능 3] 카드형 행 레이아웃 (번호 + 컨텐츠) */
        .list-table tr {
            display: flex !important;
            margin-bottom: 8px;
            border: 1px solid #dee2e6;
            background: #fff;
            min-height: 70px;
        }

    /* [기능 4] 왼쪽 번호 영역 (고정폭) */
        .m-num {
            flex: 0 0 50px !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            background: #fdfdfd;
            border-right: 1px solid #dee2e6 !important;
            font-weight: bold;
        }

    /* [기능 5] 오른쪽 컨텐츠 영역 (가변폭 100%) */
        .m-content-wrapper {
            flex: 1 !important;
            display: block !important;
            padding: 0 !important;
            width: auto !important;
        }

    /* [기능 6] 모바일 2단 UI 노출 */
        .m-show-mobile { display: flex !important; flex-direction: column; width: 100%; height: 100%; }
        .m-row-top { display: flex; flex: 1; border-bottom: 1px solid #eee; align-items: center; }
        .m-row-bottom { display: flex; flex: 1; align-items: center; }

    /* [기능 7] 텍스트 생략 및 정렬 */
        .m-col-left { flex: 2; padding: 0 10px; text-align: left; border-right: 1px solid #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .m-col-right { flex: 1; text-align: center; font-size: 8.5pt; }

        .stat-container { 
            display: grid !important;
            grid-template-columns: 1fr 1fr; /* 2열로 나누기 */
            gap: 10px; /* 카드 사이 간격 */
        }

        .stat-card {
            padding: 15px;
            margin-bottom: 0; /* 그리드 간격(gap)이 있으므로 마진 제거 */
        }

    /* (선택사항) 전체 업무 카드만 강조하고 싶다면 첫 번째 카드만 넓게 */
    /* .stat-card.total { grid-column: span 2; } */
    }



/* ########  카드형 통계시 적용 예) 개인업무 처리통계 페이지(personal_stat.php) 참조  ############*/
/* 통계 전용 스타일 - style.css 하단에 추가해도 좋습니다. */
.stat-container { display: flex; gap: 15px; margin-bottom: 20px; }
.stat-card { flex: 1; padding: 20px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.stat-label { font-size: 0.9rem; color: #666; margin-bottom: 10px; }
.stat-value { font-size: 1.5rem; font-weight: bold; color: #2c3e50; }

/* 카드 강조 색상 */
.stat-card.total { border-top: 4px solid #3498db; }
.stat-card.ing { border-top: 4px solid #d9534f; }
.stat-card.done { border-top: 4px solid #5cb85c; }
.stat-card.all { border-top: 4px solid rgb(240, 14, 202); }
.stat-card.some { border-top: 4px solid rgb(208, 219, 52); }
.stat-card.private { border-top: 4px solid rgb(0, 0, 0); }