@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* =========================================================
   1. 기본 설정 및 화면 UI
   ========================================================= */
body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0px;
    font-size: 10pt;
}

/* 화면용 UI (인쇄 시 숨김) */
.no-print {
    background: #fff; padding: 15px; margin-bottom: 20px;
    border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.control-bar { display: flex; justify-content: space-between; align-items: center; }
.tab-buttons button {
    padding: 8px 16px; margin-right: 5px; cursor: pointer;
    background: #eee; border: 1px solid #ddd; border-bottom: none;
    font-weight: bold; border-radius: 4px 4px 0 0;
}
.tab-buttons button.active { background: #fff; border-bottom: 2px solid #fff; color: #007bff; }
.add-row-btn {
    width: 100%; padding: 8px; margin-top: 5px;
    background: #f8f9fa; border: 1px dashed #ccc; cursor: pointer;
}

/* =========================================================
   2. 인쇄 페이지 컨테이너 및 레이아웃
   ========================================================= */
.sheet-container {
    background: #fff; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);
    box-sizing: border-box; display: none;
}
.sheet-container.active { display: block; }

.page-portrait { width: 210mm; min-height: 297mm; padding: 10mm; }
.page-landscape { width: 297mm; min-height: 210mm; padding: 8mm 10mm; }

/* =========================================================
   3. 테이블 및 입력 필드 공통 스타일
   ========================================================= */
table {
    width: 99%; border-collapse: collapse; table-layout: fixed; margin-bottom: 5px;
}
th, td {
    border: 1px solid #000; padding: 1px 2px;
    text-align: center; vertical-align: middle;
    font-size: 9pt; height: 24px; word-break: break-all;
}
/* 배경색 유틸리티 */
.bg-header { background-color: #f0f0f0 !important; font-weight: bold; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bg-header2 { background-color: #ffffff !important; font-weight: bold; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.spacing-text {
    white-space: pre;
}
td.bg-gray-cell { background-color: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bg-yellow-cell { background-color: #fffcd0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* 텍스트 정렬 및 스타일 */
.text-left { text-align: left !important; padding-left: 5px; }
.text-right { text-align: right !important; padding-right: 5px; }
.text-bold { font-weight: bold; }
.border-none { border: none !important; }

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}


/* 기본 입력 필드 */
input[type="text"], input[type="number"], input[type="date"] {
    width: 100%; 
    height: 100%; 
    border: none; 
    background: transparent;
    text-align: center; 
    font-family: inherit; 
    font-size: inherit; 
    outline: none; 
    padding: 0;
}

/* 밑줄만 있는 입력 필드 (TALLY 상단 등) */
input.input-underline {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-align: left;
    padding-left: 5px;
}
input.input-underline.center, 
input.input-underline.fmt-time {
    text-align: center !important;
}

/* 여러 줄 입력용 Textarea */
.cell-textarea {
    width: 100%; height: 100%; border: none; resize: none; background: transparent;
    text-align: center; font-family: 'Noto Sans KR', sans-serif; font-size: 8.5pt;
    padding: 2px; box-sizing: border-box; overflow: hidden; white-space: pre-wrap; line-height: 1.2; display: block;
}

/* =========================================================
   4. 보고서 전용 스타일 (육상/본선/노조)
   ========================================================= */
/* [육상/본선] 2단 분리 셀 (pkg/ton) */
.split-cell { padding: 0 !important; height: 46px; vertical-align: top; }
.cell-row-container { display: flex; flex-direction: column; height: 100%; width: 100%; }
.half-row { flex: 1; display: flex; align-items: center; width: 100%; box-sizing: border-box; position: relative; }
.half-row.top { border-bottom: 1px dotted #555; z-index: 10; } /* 점선 */

.half-row input { flex-grow: 1; text-align: right; padding-right: 2px; font-size: 8pt; }
.half-row input.ton-input { font-size: 8pt; letter-spacing: -0.5px; font-family: 'Arial', sans-serif; }
.unit-label { width: 22px; font-size: 6pt; color: #555; text-align: left; padding-left: 1px; font-weight: normal; white-space: nowrap; }

/* [육상/본선] 헤더 (수동 너비 조절) */
.report-header-manual { display: flex; align-items: flex-end; border-bottom: 3px solid #ffffff; padding-bottom: 3px; margin-bottom: 3px; font-size: 10pt; font-weight: bold; }
.header-item { display: flex; align-items: center; }
.header-item input { border-bottom: 1px solid #000; margin-left: 5px; text-align: center; }

/* [공통] 타이틀 스타일 */
.tally-title { font-size: 18pt; font-weight: bold; border: none; }
.tally-sub { font-size: 9pt; border: none; }
.tally-main-title { font-size: 20pt; font-weight: bold; text-decoration: underline; border: none; }
.report-title { font-size: 22pt; font-weight: bold; text-align: center; padding: 5px 0; letter-spacing: 2px; }
.union-title { font-size: 22pt; font-weight: bold; text-align: center; margin-bottom: 8px; margin-top: -5px; }

/* [공통] 결재란 스타일 */
.approval-table {
    width: 165px; float: right; margin-top: -17px; margin-right: 11px; background: #fff;
    table-layout: fixed; position: relative; z-index: 5;
}
.approval-table tr:last-child td { height: 40px !important; }
.approval-header-input { width: 100%; border: none; background: transparent; text-align: center; font-weight: bold; font-size: 9pt; padding: 0; }

/* =========================================================
   [최종] 노조 확인서용 '직접' 테두리 설정 도구
   ========================================================= */
/* 제목(Label) 스타일 */
.u-label {
    font-weight: bold;
    white-space: nowrap;
    width: 1%; /* 내용만큼만 너비 차지 */
}

/* ★ 간격 조절 포인트: 제목과 입력창 사이의 거리 */
.union-header-no-border td:nth-child(even) {
    padding-left: 0px !important; /* 이 숫자를 키우면 제목-입력창 사이가 멀어집니다 */
    padding-right: 15px !important; /* 오른쪽 열과의 간격 */
}

/* 입력 필드 스타일: 배경 없고 밑줄 없음 (이미지1 스타일) */
.u-underline-input {
    width: 50%;
    border: none !important;
    border-bottom: 0px solid #ececec !important; /* 연한 밑줄 (완전 무선 원하시면 none으로 변경) */
    background: transparent;
    padding: 2px 0;
    font-family: inherit;
    font-size: 10pt;
}

.u-inline-input {
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    background: transparent;
    text-align: center;
    font-size: 10pt;
}

.u-input-flex {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* 2. 상단 기본 정보 입력 영역 간격 압축 */
.union-header-no-border {
    width: 100%;
    border: none !important;
    margin-bottom: 10px !important; /* 테이블과의 간격 축소 */
    border-collapse: collapse;
}

.union-header-no-border td {
    border: none !important;
    padding: 1px 0 !important; /* 행 간격을 3px에서 1px로 줄임 */
    text-align: left;
    vertical-align: middle;
    font-size: 10pt;
}

/* 1. 제목 영역 여백 제거 */
.union-title {
    font-size: 20pt !important; /* 크기를 살짝 더 줄임 */
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    line-height: 1.1;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
}

/* 2. 상단 정보 입력란(1~7번) 높이 압축 */
.union-header-no-border {
    margin-bottom: 10px !important;
}
.union-header-no-border td {
    padding: 0px 0 !important; /* 행 간격 0 */
    height: 18px !important;    /* 행 높이 고정 */
    font-size: 9.5pt !important;
}
.u-underline-input {
    padding: 0 !important;
    height: 16px !important;
    text-align: left !important;
}
.u-inline-input {
    padding: 0 !important;
    height: 16px !important;
    text-align: center !important;
}
input[type="radio"] {
    vertical-align: middle;
}
.radio-wrap {
    display: inline-flex;
    align-items: center;
    gap: 20px !important;          /* 주간과 야간 사이 간격 */
    padding: 0 5px !important;    /* 괄호와 내용 사이 간격 */
}

/* 3. 테이블 헤더(thead) 및 본문(tbody) 행 높이 초압축 */
@media print {
    #sheet-union {
        padding-top: 0 !important;
    }

    /* 테이블 헤더(번호창, 성명 등) 높이 축소 */
    #sheet-union thead th {
        height: 20px !important;
        padding: 0 !important;
        font-size: 8pt !important;
        line-height: 1.0 !important;
    }

    /* 본문 입력칸 높이를 18px로 고정 (14행 확보 핵심) */
    #sheet-union tbody td, 
    #sheet-union tbody th {
        height: 20px !important;
        padding: 0 2px !important;
        font-size: 8.5pt !important;
    }

    /* 입력 필드 높이 맞춤 */
    #sheet-union tbody input {
        height: 22px !important;
        font-size: 8.5pt !important;
        margin: 0 !important;
    }

    /* 하단 비고란 및 작성자 영역 압축 */
    #sheet-union tfoot td,
    #sheet-union tfoot th {
        height: 25px !important;
    }
    
    .text-right {
        margin-top: 2px !important;
        font-size: 9pt !important;
    }
    input[type="radio"] {
        vertical-align: middle;
    }
}
/* 인쇄 시 밑줄 투명도 조절 */
@media print {
    .u-underline-input, .u-inline-input {
        border-bottom: 0px solid #e0e0e0 !important;
    }
}

/* 연락소 선택 팝업 스타일 */
.contact-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 180px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 10001;
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
}

.dropdown-item {
    padding: 5px 0;
    text-align: left;
}

.dropdown-item label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10pt;
    font-weight: normal;
}

.dropdown-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 인쇄 시 팝업 강제 숨김 */
/* @media print {
    .contact-dropdown {
        display: none !important;
    }
} */
/* =========================================================
   5. TALLY SHEET 상단 7행 레이아웃 (최종)
   ========================================================= */
.tally-header-7rows { width: 100%; margin-bottom: 0px; font-family: 'Times New Roman', serif; color: #000; }
/* (HTML에서 인라인 스타일로 제어되므로 추가 스타일 불필요) */
/* Tally 전용 textarea 스타일 보강 */
#sheet-tally .cell-textarea {
    width: 100%;
    height: 100%;
    font-size: 9.5pt; /* 4글자가 한 줄에 들어가도록 적절히 조절 */
    line-height: 1.2;
    padding: 2px;
    border: none;
    resize: none;
    overflow-y: hidden;
    word-break: break-all; /* 단어 단위가 아닌 글자 단위로 끊기 */
    text-align: center;
}

/* 인쇄 시 차량 total 강조 및 정수 표현 */
#tally-total-gt {
    font-weight: bold;
    font-size: 11pt;
}

/* =========================================================
   6. 인쇄 설정 (@media print) - 최적화됨
   ========================================================= */
@media print {
    /* 기본 초기화 */
    html, body { width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; background: white; overflow: hidden !important; }
    .no-print { display: none !important; }
    
    /* 시트 표시 */
    .sheet-container { box-shadow: none; margin: 0 !important; padding: 0 !important; width: 100% !important; display: none; }
    .sheet-container.active { display: block !important; }
    
    /* 페이지 여백 */
    @page { size: auto; margin: 10mm; }

    /* 테이블 행 높이 (기본) */
    td, th { height: 25px !important; padding: 2px 2px !important; font-size: 9pt !important; line-height: 1.2 !important; }

    /* [가로 인쇄용] 육상/본선/노조 보고서 전용 축소 설정 */
    #sheet-report td, #sheet-report th,
    #sheet-ship td, #sheet-ship th,  /* [추가] 본선 보고서도 포함 */
    #sheet-union td, #sheet-union th {
        height: 25px !important; font-size: 8.5pt !important; padding: 1px 2px !important;
    }
    
    #sheet-report .split-cell,
    #sheet-ship .split-cell {
        height: 44px !important; /* 2단 셀 높이 */
    }
    
    #sheet-report .approval-table tr:last-child td,
    #sheet-ship .approval-table tr:last-child td,
    #sheet-union .approval-table tr:last-child td {
        height: 40px !important; /* 결재란 높이 */
    }

    /* 선명도 및 기타 */
    .bg-header, .bg-gray-cell, .bg-yellow-cell { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .thick-border-right { border-right: 3px solid #000 !important; }
    .half-row.top { border-bottom: 1px dotted #000 !important; }
    .unit-label { color: #000 !important; }
    .input-underline { border-bottom: 1px solid #000 !important; }
    .cell-textarea { white-space: pre-wrap; overflow: visible; }
    
    /* 페이지 넘김 방지 */
    table { page-break-inside: avoid; }
    tr { page-break-inside: avoid; page-break-after: auto; }
}
@media print {
    /* 인쇄 시 점선 두께 조절 */
    .half-row.top {
        border-bottom: 1px dotted #000 !important;
    }
}
/* 장비 투입 현황 내의 input 스타일 최적화 */
.report-grid input {
    padding: 0 3px !important; /* 좌우 여백을 줄여 글자 공간 확보 */
    letter-spacing: -0.5px;    /* 자간을 살짝 좁힘 */
}

/* 구분(자차/용차) 입력칸 전용 */
input[list="list-usage"] {
    font-size: 8.5pt !important; /* 글자 크기를 아주 살짝 줄여서 짤림 방지 */
}

/* 셀 선택 시 하이라이트 효과 */
/* 셀 선택 시 시각적 효과 */
.selected-for-merge {
    background-color: #e3f2fd !important; /* 연한 파란색 */
    outline: 2px solid #2196f3 !important;
    outline-offset: -2px;
}

/* 병합된 셀(숨겨진 셀) 처리 */
.merged-hidden {
    display: none !important;
}

/* 병합 버튼 스타일 */
.merge-btn-group {
    margin-bottom: 10px;
    display: flex;
    gap: 5px;
}
.merge-btn-group button {
    padding: 5px 15px;
    font-size: 9pt;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* 탭 메뉴 컨테이너 */
#tally-tabs-wrapper {
    display: flex;
    gap: 2px;
    align-items: flex-end;
}

/* 탭 버튼 스타일 */
.tally-page-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 9pt;
    transition: background 0.2s;
}

.tally-page-tab.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* 탭 삭제 버튼 (x) */
.btn-close-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    color: inherit;
    font-size: 10px;
    border: none;
    cursor: pointer;
}

.btn-close-tab:hover {
    background: #dc3545;
    color: white;
}

/* 인쇄 시 탭 관련 UI 숨김 */
@media print {
    #tally-page-control, .btn-close-tab {
        display: none !important;
    }
    .tally-sheet-instance {
        display: block !important;
        page-break-after: always;
    }
    .add-row-btn {
        display: none !important;
    }
}

/* 1. 시트들을 감싸는 전체 바탕 영역 수정 */
#tally-sheets-wrapper {
    width: 100%;
    background-color: #f5f5f5; /* 바탕을 약간 어둡게 하여 시트(흰색)를 돋보이게 함 */
    padding: 0px 0;           /* 위아래 여백 */
    display: flex;
    flex-direction: column;
    align-items: center;       /* 시트가 중앙에 오도록 설정 */
    overflow-x: auto;          /* 화면이 작을 경우 가로 스크롤 허용 */
}

/* 2. 시트 컨테이너 스타일 보강 */
.sheet-container.page-portrait {
    width: 210 mm;            /* A4 정격 너비 유지 */
    min-height: 297mm;
    margin: 0px -58px;            /* 중앙 정렬 */
    background: #ffffff;
    box-shadow: 0 0 15px rgba(0,0,0,0.2); /* 그림자를 주어 입체감 부여 */
    box-sizing: border-box;    /* 패딩과 테두리가 너비(210mm)에 포함되도록 설정 */
    position: relative;
    padding: 15mm;             /* 내부 여백 조절 */
}
/* =========================================================
   TALLY SHEET 차량(Vehicle) 행 디자인 정밀 최적화
   ========================================================= */

/* 1. 차량 행의 '데이터 입력칸(1~10번)'과 '합계칸'만 배경색(#e0e0e0) 적용 */
/* 4번째 td부터 마지막 td까지 선택하여 제목과 B/L/MARK 칸을 제외함 */
#tally-body tr[data-type="차량"] td:nth-child(n+4) {
    background-color: #f2f2f2 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* 2. 차량 행에 속해 있는 B/L(1번째 td)과 MARK(2번째 td) 입력칸은 흰색 배경 강제 고정 */
#tally-body tr[data-type="차량"] td:nth-child(1),
#tally-body tr[data-type="차량"] td:nth-child(2) {
    background-color: #ffffff !important;
}

/* 3. 차량 행의 입력창 배경을 투명하게 설정하여 td의 배경색이 보이도록 함 */
#tally-body tr[data-type="차량"] input {
    background-color: #f2f2f2 !important;
}

/* 4. 인쇄 시에도 차량 입력칸의 배경색과 B/L/MARK의 흰색이 유지되도록 설정 */
@media print {
    #tally-body tr[data-type="차량"] td:nth-child(n+4) {
        background-color: #f2f2f2 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    #tally-body tr[data-type="차량"] td:nth-child(1),
    #tally-body tr[data-type="차량"] td:nth-child(2) {
        background-color: #ffffff !important;
    }
}
/* 다중 선택 모드 시 시각적 효과 */
.drag-selected {
    background-color: rgba(0, 123, 255, 0.1) !important;
    outline: 2px solid #007bff !important;
    z-index: 10;
}

/* 다중 선택 모드일 때만 텍스트 드래그(블록) 방지 */
.bulk-select-mode {
    user-select: none !important;
}

/* 드래그 중 텍스트 선택(블록) 방지 (드래그 기능의 정확도를 위해) */
.sheet-container input, .sheet-container textarea {
    user-select: none;
}
@media print {
    /* 1. 모든 입력창(input, textarea)에서 스크롤바 UI를 완전히 제거 */
    input, textarea, select {
        overflow: hidden !important; /* 스크롤바 숨김 */
        resize: none !important;     /* 크기 조절 손잡이 제거 */
        -ms-overflow-style: none;    /* IE/Edge 스크롤바 숨김 */
        scrollbar-width: none;       /* Firefox 스크롤바 숨김 */
    }

    /* Chrome, Safari, Opera에서 스크롤바 숨김 */
    input::-webkit-scrollbar,
    textarea::-webkit-scrollbar,
    select::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. 특이사항(textarea) 칸의 높이 제한을 풀어 내용이 다 보이도록 설정 */
    /* 고정 높이(height: 70px)를 min-height로 변경하여 내용이 많으면 칸이 늘어나게 합니다 */
    #sheet-report textarea[data-id="rpt-remark"],
    #sheet-ship textarea[data-id="ship-remark"] {
        height: auto !important;      /* 고정 높이 해제 */
        min-height: 60px !important;  /* 최소 높이 유지 */
        overflow: visible !important; /* 인쇄 시 내용 유실 방지 */
        white-space: pre-wrap !important; /* 줄바꿈 유지 */
    }

    /* 3. 테이블 자체가 높이 제한 때문에 내용이 잘리는 현상 방지 */
    #sheet-report table, 
    #sheet-ship table {
        height: auto !important; /* 테이블 높이 고정 해제 */
    }
}
/* ========================================================= 말풍선 합계 표시 ==========================================================================*/
/* 선택된 TOTAL 칸 하이라이트 */
.selected-for-sum {
    background-color: #fff3cd !important;
    outline: 2px solid #ffc107 !important;
    outline-offset: -2px; /* 테두리가 안쪽으로 생기게 함 */
    z-index: 100;
}

/* 실시간 합계 말풍선(Tooltip) */
#sum-tooltip {
    position: fixed;
    display: none;
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11pt;
    font-weight: bold;
    z-index: 10000;
    pointer-events: none; /* 마우스 간섭 방지 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#sum-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
/* =========================================================여기 까지 ===============================