/* daily-patrol.css - 일일순회점검 페이지 스타일 */ /* 점검 시작 영역 */ .patrol-start-section { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 3rem 1.5rem; background: var(--surface-color, #fff); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 1.5rem; } .patrol-start-section .btn-lg { padding: 1.25rem 3rem; font-size: 1.25rem; border-radius: 12px; display: flex; align-items: center; gap: 0.75rem; } .patrol-start-section .btn-icon { font-size: 1.5rem; } /* 공장 선택 영역 */ .factory-selection-area { padding: 2rem; background: var(--surface-color, #fff); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 1.5rem; } .factory-selection-header { text-align: center; margin-bottom: 2rem; } .factory-selection-header h3 { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem; } .factory-selection-subtitle { color: var(--text-secondary, #64748b); margin: 0; } .factory-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; max-width: 800px; margin: 0 auto; } .factory-card { display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem; background: var(--bg-color, #f8fafc); border: 2px solid var(--border-color, #e2e8f0); border-radius: 16px; cursor: pointer; transition: all 0.2s; } .factory-card:hover { border-color: var(--primary-color, #3b82f6); background: #eff6ff; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15); } .factory-card:active { transform: translateY(-2px); } .factory-card-icon { width: 80px; height: 80px; border-radius: 12px; background: var(--surface-color, #fff); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; overflow: hidden; font-size: 2.5rem; } .factory-card-icon img { width: 100%; height: 100%; object-fit: cover; } .factory-card-name { font-size: 1.125rem; font-weight: 600; text-align: center; } /* 오늘 점검 현황 요약 */ .today-status-summary { display: flex; gap: 1.5rem; align-items: center; justify-content: center; padding: 1rem 2rem; background: var(--bg-color, #f8fafc); border-radius: 12px; } .status-card { text-align: center; padding: 1rem 1.5rem; background: var(--surface-color, #fff); border-radius: 8px; min-width: 100px; } .status-label { font-size: 0.85rem; color: var(--text-secondary, #64748b); margin-bottom: 0.5rem; } .status-value { font-size: 1.5rem; font-weight: 700; } .status-value.completed { color: var(--success-color, #16a34a); } .status-value.pending { color: var(--warning-color, #f59e0b); } .status-sub { font-size: 0.75rem; color: var(--text-secondary, #64748b); margin-top: 0.25rem; } /* 점검 영역 */ .patrol-area { background: var(--surface-color, #fff); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow: hidden; } /* 세션 정보 바 */ .session-info-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: linear-gradient(135deg, var(--primary-color, #3b82f6), #2563eb); color: #fff; } .session-info { display: flex; gap: 2rem; } .session-info-item { display: flex; flex-direction: column; gap: 0.25rem; } .session-info-label { font-size: 0.75rem; opacity: 0.8; } .session-info-value { font-weight: 600; } .session-progress { display: flex; align-items: center; gap: 1rem; } .progress-bar { width: 150px; height: 8px; background: rgba(255, 255, 255, 0.3); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: #fff; border-radius: 4px; transition: width 0.3s ease; } .progress-text { font-weight: 600; font-size: 0.9rem; } /* 점검 콘텐츠 영역 */ .patrol-content { display: grid; grid-template-columns: 1fr 400px; min-height: 500px; } @media (max-width: 1024px) { .patrol-content { grid-template-columns: 1fr; } } /* 지도 영역 */ .patrol-map-section { padding: 1.5rem; border-right: 1px solid var(--border-color, #e2e8f0); } .map-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .map-header h3 { font-size: 1rem; font-weight: 600; margin: 0; } .map-legend { display: flex; gap: 1rem; font-size: 0.8rem; } .legend-item { display: flex; align-items: center; gap: 0.25rem; } .legend-item .dot { width: 10px; height: 10px; border-radius: 50%; } .legend-item.completed .dot { background: var(--success-color, #16a34a); } .legend-item.in-progress .dot { background: var(--primary-color, #3b82f6); } .legend-item.pending .dot { background: var(--border-color, #cbd5e1); } /* 지도 컨테이너 */ .patrol-map-container { position: relative; width: 100%; aspect-ratio: 16/10; background: var(--bg-color, #f8fafc); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color, #e2e8f0); } .patrol-map-container img { width: 100%; height: 100%; object-fit: contain; } /* 작업장 마커 */ .workplace-marker { position: absolute; padding: 0.3rem 0.5rem; background: var(--surface-color, #fff); border: 2px solid var(--border-color, #cbd5e1); border-radius: 6px; cursor: pointer; font-size: 0.7rem; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); transition: all 0.15s ease-out; transform: translate(-50%, -50%); white-space: nowrap; /* z-index는 JS에서 y좌표 기반 설정 (아래에 있을수록 높음) */ } .workplace-marker:hover { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); z-index: 200 !important; background: #f0f9ff; border-color: var(--primary-color, #3b82f6); } .workplace-marker.completed { border-color: var(--success-color, #16a34a); background: #dcfce7; } .workplace-marker.in-progress { border-color: var(--primary-color, #3b82f6); background: #dbeafe; } .workplace-marker.selected { border-color: var(--primary-color, #3b82f6); background: var(--primary-color, #3b82f6); color: #fff; z-index: 150 !important; transform: translate(-50%, -50%) scale(1.1); } /* 작은 마커 (밀집 구역용) */ .workplace-marker.compact { padding: 0.2rem 0.35rem; font-size: 0.6rem; border-radius: 4px; border-width: 1.5px; } /* 작업장 목록 */ .workplace-list-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; margin-top: 1rem; padding: 0.5rem; background: var(--bg-color, #f8fafc); border-radius: 8px; } .workplace-card { padding: 1rem; background: var(--surface-color, #fff); border: 2px solid var(--border-color, #e2e8f0); border-radius: 8px; cursor: pointer; transition: all 0.2s; text-align: center; } .workplace-card:hover { border-color: var(--primary-color, #3b82f6); } .workplace-card.completed { border-color: var(--success-color, #16a34a); background: #f0fdf4; } .workplace-card.in-progress { border-color: var(--primary-color, #3b82f6); background: #eff6ff; } .workplace-card.selected { border-color: var(--primary-color, #3b82f6); background: var(--primary-color, #3b82f6); color: #fff; } .workplace-card.selected .workplace-card-status { color: rgba(255, 255, 255, 0.8); } .workplace-card-name { font-weight: 600; margin-bottom: 0.25rem; } .workplace-card-status { font-size: 0.75rem; color: var(--text-secondary, #64748b); } /* 체크리스트 영역 */ .patrol-checklist-section { display: flex; flex-direction: column; background: var(--bg-color, #f8fafc); } .checklist-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); background: var(--surface-color, #fff); } .checklist-header h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; } .checklist-subtitle { font-size: 0.8rem; color: var(--text-secondary, #64748b); margin: 0; } .checklist-content { flex: 1; overflow-y: auto; padding: 1rem; } .checklist-placeholder { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--text-secondary, #64748b); } /* 체크리스트 카테고리 */ .checklist-category { margin-bottom: 1.5rem; } .checklist-category-title { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary, #64748b); text-transform: uppercase; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); } /* 체크 항목 */ .check-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; background: var(--surface-color, #fff); border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; transition: background 0.2s; } .check-item:hover { background: #f1f5f9; } .check-item.checked { background: #f0fdf4; } .check-item-checkbox { width: 24px; height: 24px; border: 2px solid var(--border-color, #cbd5e1); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; } .check-item.checked .check-item-checkbox { background: var(--success-color, #16a34a); border-color: var(--success-color, #16a34a); color: #fff; } .check-item-content { flex: 1; } .check-item-text { font-size: 0.9rem; margin-bottom: 0.25rem; } .check-item-required { color: var(--error-color, #dc2626); margin-left: 0.25rem; } .check-item-note { font-size: 0.8rem; color: var(--text-secondary, #64748b); } /* 체크 결과 선택 */ .check-result-selector { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .check-result-btn { padding: 0.25rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 4px; font-size: 0.75rem; background: var(--surface-color, #fff); cursor: pointer; transition: all 0.2s; } .check-result-btn.good.active { background: #dcfce7; border-color: var(--success-color, #16a34a); color: var(--success-color, #16a34a); } .check-result-btn.warning.active { background: #fef3c7; border-color: var(--warning-color, #f59e0b); color: var(--warning-color, #f59e0b); } .check-result-btn.bad.active { background: #fee2e2; border-color: var(--error-color, #dc2626); color: var(--error-color, #dc2626); } /* 체크리스트 액션 */ .checklist-actions { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color, #e2e8f0); background: var(--surface-color, #fff); display: flex; gap: 0.75rem; justify-content: flex-end; } /* 물품 현황 섹션 */ .items-section { padding: 1.5rem; border-top: 1px solid var(--border-color, #e2e8f0); } .items-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .items-header h3 { font-size: 1rem; font-weight: 600; margin: 0; } .items-map-container { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--bg-color, #f8fafc); border-radius: 8px; border: 1px solid var(--border-color, #e2e8f0); overflow: hidden; } .items-map-container img { width: 100%; height: 100%; object-fit: contain; } /* 물품 마커 */ .item-marker { position: absolute; border: 2px solid; border-radius: 4px; background: rgba(255, 255, 255, 0.8); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.2s; } .item-marker:hover { transform: scale(1.1); z-index: 10; } .item-marker.container { border-color: #3b82f6; background: rgba(59, 130, 246, 0.2); } .item-marker.plate { border-color: #10b981; background: rgba(16, 185, 129, 0.2); } .item-marker.material { border-color: #f59e0b; background: rgba(245, 158, 11, 0.2); } .item-marker.tool { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.2); } .item-marker.other { border-color: #6b7280; background: rgba(107, 114, 128, 0.2); } /* 물품 범례 */ .items-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color, #e2e8f0); } .item-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; } .item-legend-icon { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } /* 순회점검 완료 섹션 */ .patrol-complete-section { padding: 1.5rem; border-top: 1px solid var(--border-color, #e2e8f0); display: flex; gap: 1rem; align-items: flex-end; } .patrol-complete-section .form-group { flex: 1; margin-bottom: 0; } /* ==================== 작업장 상세 정보 패널 ==================== */ .workplace-detail-panel { position: fixed; top: 90px; right: 20px; width: 400px; max-height: calc(100vh - 110px); background: var(--surface-color, #fff); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); display: none; flex-direction: column; z-index: 100; overflow: hidden; } .detail-panel-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 1.25rem; background: linear-gradient(135deg, var(--primary-color, #3b82f6), #2563eb); color: #fff; } .detail-panel-title h3 { margin: 0; font-size: 1.1rem; font-weight: 600; } .detail-panel-subtitle { font-size: 0.8rem; opacity: 0.9; } .detail-panel-close { background: rgba(255, 255, 255, 0.2); border: none; color: #fff; width: 28px; height: 28px; border-radius: 6px; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .detail-panel-close:hover { background: rgba(255, 255, 255, 0.3); } /* 요약 정보 */ .detail-panel-summary { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--bg-color, #f8fafc); border-bottom: 1px solid var(--border-color, #e2e8f0); flex-wrap: wrap; } .summary-item { flex: 1; min-width: 60px; text-align: center; padding: 0.5rem; background: var(--surface-color, #fff); border-radius: 8px; } .summary-item.warning { background: #fef3c7; } .summary-item.danger { background: #fee2e2; } .summary-item.info { background: #dbeafe; } .summary-value { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #1e293b); } .summary-item.warning .summary-value { color: #b45309; } .summary-item.danger .summary-value { color: #dc2626; } .summary-item.info .summary-value { color: #2563eb; } .summary-label { font-size: 0.7rem; color: var(--text-secondary, #64748b); } /* 탭 */ .detail-panel-tabs { display: flex; border-bottom: 1px solid var(--border-color, #e2e8f0); background: var(--surface-color, #fff); } .detail-tab { flex: 1; padding: 0.6rem 0.5rem; border: none; background: none; font-size: 0.75rem; color: var(--text-secondary, #64748b); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; position: relative; } .detail-tab:hover { color: var(--primary-color, #3b82f6); } .detail-tab.active { color: var(--primary-color, #3b82f6); border-bottom-color: var(--primary-color, #3b82f6); font-weight: 600; } .tab-badge { display: none; min-width: 16px; height: 16px; padding: 0 4px; background: var(--error-color, #dc2626); color: #fff; font-size: 0.65rem; font-weight: 600; border-radius: 8px; margin-left: 4px; vertical-align: middle; } .tab-badge.show { display: inline-flex; align-items: center; justify-content: center; } .tab-badge.warning { background: var(--warning-color, #f59e0b); } /* 탭 콘텐츠 */ .detail-panel-content { flex: 1; overflow-y: auto; padding: 1rem; background: var(--bg-color, #f8fafc); } .detail-tab-content { display: none; } .detail-tab-content.active { display: block; } .detail-empty { text-align: center; padding: 2rem 1rem; color: var(--text-secondary, #64748b); font-size: 0.9rem; } /* 신고/부적합 섹션 */ .issue-section { margin-bottom: 1.5rem; } .issue-section-title { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--text-primary, #1e293b); } .issue-item { background: var(--surface-color, #fff); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.5rem; border-left: 3px solid var(--border-color, #cbd5e1); } .issue-item.pending { border-left-color: #f59e0b; } .issue-item.info { border-left-color: #3b82f6; } .issue-item.warning { border-left-color: #f59e0b; } .issue-item.success { border-left-color: #16a34a; } .issue-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .issue-title { font-weight: 600; font-size: 0.9rem; } .issue-status { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; background: var(--bg-color, #f1f5f9); } .issue-status.pending { background: #fef3c7; color: #b45309; } .issue-status.info { background: #dbeafe; color: #1d4ed8; } .issue-status.warning { background: #fed7aa; color: #c2410c; } .issue-status.success { background: #dcfce7; color: #166534; } .issue-item-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; font-size: 0.75rem; } .issue-category { color: var(--text-secondary, #64748b); } .issue-severity { padding: 1px 6px; border-radius: 4px; font-size: 0.65rem; } .issue-severity.critical { background: #fee2e2; color: #dc2626; } .issue-severity.high { background: #fed7aa; color: #c2410c; } .issue-severity.medium { background: #fef3c7; color: #b45309; } .issue-severity.low { background: #d1fae5; color: #059669; } .issue-date { color: var(--text-tertiary, #94a3b8); } .issue-desc { font-size: 0.8rem; color: var(--text-secondary, #64748b); margin-bottom: 0.25rem; } .issue-reporter { font-size: 0.7rem; color: var(--text-tertiary, #94a3b8); } /* 설비 섹션 */ .equipment-section { margin-bottom: 1.5rem; } .equipment-section-title { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--text-primary, #1e293b); } .repair-item { background: var(--surface-color, #fff); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.5rem; border-left: 3px solid #f59e0b; } .repair-item.emergency { border-left-color: #dc2626; background: #fef2f2; } .repair-item.high { border-left-color: #f97316; } .repair-item-header { display: flex; justify-content: space-between; margin-bottom: 0.25rem; } .repair-equipment { font-weight: 600; font-size: 0.85rem; } .repair-priority { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: #fef3c7; color: #b45309; } .repair-priority.emergency { background: #fee2e2; color: #dc2626; } .repair-priority.high { background: #fed7aa; color: #c2410c; } .repair-category, .repair-desc, .repair-date { font-size: 0.75rem; color: var(--text-secondary, #64748b); } .equipment-list { display: flex; flex-direction: column; gap: 0.25rem; } .equipment-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--surface-color, #fff); border-radius: 6px; font-size: 0.8rem; } .equipment-item.attention { background: #fef2f2; } .equipment-name { flex: 1; font-weight: 500; } .equipment-code { color: var(--text-tertiary, #94a3b8); font-size: 0.7rem; } .equipment-status { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; background: #dcfce7; color: #166534; } .equipment-status.repair_needed { background: #fee2e2; color: #dc2626; } .equipment-status.under_repair { background: #fef3c7; color: #b45309; } .equipment-status.inactive { background: #f1f5f9; color: #64748b; } /* 출입 섹션 */ .visits-list { display: flex; flex-direction: column; gap: 0.5rem; } .visit-item { background: var(--surface-color, #fff); border-radius: 8px; padding: 0.75rem; } .visit-item-header { display: flex; justify-content: space-between; margin-bottom: 0.25rem; } .visit-name { font-weight: 600; font-size: 0.9rem; } .visit-company { font-size: 0.75rem; color: var(--text-secondary, #64748b); } .visit-purpose { font-size: 0.8rem; color: var(--primary-color, #3b82f6); margin-bottom: 0.25rem; } .visit-time, .visit-companion, .visit-vehicle { font-size: 0.75rem; color: var(--text-secondary, #64748b); } /* TBM 섹션 */ .tbm-list { display: flex; flex-direction: column; gap: 0.75rem; } .tbm-item { background: var(--surface-color, #fff); border-radius: 8px; padding: 0.75rem; } .tbm-item-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .tbm-task { font-weight: 600; font-size: 0.9rem; } .tbm-status { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; background: var(--bg-color, #f1f5f9); } .tbm-status.completed { background: #dcfce7; color: #166534; } .tbm-status.in_progress { background: #dbeafe; color: #1d4ed8; } .tbm-location, .tbm-leader, .tbm-content, .tbm-safety { font-size: 0.8rem; color: var(--text-secondary, #64748b); margin-bottom: 0.25rem; } .tbm-team { font-size: 0.75rem; padding-top: 0.5rem; border-top: 1px dashed var(--border-color, #e2e8f0); margin-top: 0.5rem; } .tbm-team-label { font-weight: 500; color: var(--text-primary, #1e293b); } .tbm-team-names { color: var(--text-secondary, #64748b); } /* 반응형 */ @media (max-width: 768px) { .patrol-start-section { padding: 2rem 1rem; } .patrol-start-section .btn-lg { width: 100%; justify-content: center; } .today-status-summary { flex-direction: row; width: 100%; } .status-card { flex: 1; min-width: auto; padding: 0.75rem; } .factory-selection-area { padding: 1.5rem 1rem; } .factory-cards-container { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .factory-card { padding: 1.5rem 1rem; } .factory-card-icon { width: 60px; height: 60px; font-size: 2rem; } .factory-card-name { font-size: 1rem; } .patrol-content { grid-template-columns: 1fr; } .patrol-map-section { border-right: none; border-bottom: 1px solid var(--border-color, #e2e8f0); } .patrol-complete-section { flex-direction: column; } .session-info-bar { flex-direction: column; gap: 1rem; text-align: center; } .session-info { flex-wrap: wrap; justify-content: center; } /* 모바일 상세 패널 */ .workplace-detail-panel { position: fixed; top: 0; right: 0; left: 0; bottom: 0; width: 100%; max-height: 100vh; border-radius: 0; } .detail-panel-tabs { overflow-x: auto; } .detail-tab { white-space: nowrap; } }