/* * 색상 변수 (웹·모바일 공용) * 웹 web/head.jsp·web/qrPage.jsp·web/login/login.jsp, 모바일 m/include.jsp 가 앱 CSS 보다 먼저 싣는다. * 규칙은 WEB-INF/CLAUDE.md §8 「CSS 작성」. 정리 기록은 git show 4d736e036:docs/CLEAN_CSS.md §7.10·§7.14·§7.15. * * 두 단계로 둔다. * 1. 팔레트(--palette-*) — 실제 값. 화면 CSS 에서 직접 쓰지 않는다 * 2. 역할(--color-text-* · --color-border-* · --color-bg-* · --color-shadow-* · --color-status-*) — 화면 CSS 는 이것만 쓴다 * 같은 값이라도 역할이 다르면 변수를 따로 둔다(예: #999 는 보조 글자와 기본 테두리). 디자인을 바꿀 때 역할 하나만 바꿀 수 있다. * * 새 색이 필요하면 팔레트에 값을 넣고 역할 변수로 연결한다. * 2026-10-17 에 합친 값(#f4f4f4·#f8f8f8·#fbfbfb → #f5f5f5, #e7e7e7 → #eee, #888 → #999)은 다시 만들지 않는다. */ :root { /* ---------- 1. 팔레트 ---------- */ --palette-white: #fff; --palette-white-a75: rgba(255, 255, 255, 0.75); --palette-black: #000; --palette-black-a45: rgba(0, 0, 0, 0.45); --palette-black-a20: rgba(0, 0, 0, 0.2); --palette-gray-111: #111; --palette-gray-222: #222; --palette-gray-333: #333; --palette-gray-444: #444; --palette-gray-555: #555; --palette-gray-666: #666; --palette-gray-999: #999; --palette-gray-aaa: #aaa; --palette-gray-ccc: #ccc; --palette-gray-b4bac4: #b4bac4; --palette-gray-ddd: #ddd; --palette-navy-1b4173: #1b4173; --palette-navy-163560: #163560; --palette-gray-eee: #eee; --palette-gray-f5f5f5: #f5f5f5; --palette-gray-dedede-a40: rgba(222, 222, 222, 0.4); --palette-blue-0c56af: #0c56af; --palette-blue-4e76b5: #4e76b5; --palette-blue-1e4e82: #1e4e82; /* 라벨·값 칸(info-list dt/dd · input-group) — TBM 상세 디자인 */ --palette-gray-2e2e36: #2e2e36; --palette-gray-d7d7d7-a40: rgba(215, 215, 215, 0.4); --palette-gray-d7d7d7-a50: rgba(215, 215, 215, 0.5); --palette-gray-dddddd-a20: rgba(221, 221, 221, 0.2); --palette-gray-78787a-a30: rgba(120, 120, 122, 0.3); --palette-gray-666666-a02: rgba(102, 102, 102, 0.02); --palette-blue-2f6df6: #2f6df6; --palette-blue-2f6df6-a22: rgba(47, 109, 246, 0.22); --palette-blue-2f6df6-a50: rgba(47, 109, 246, 0.5); --palette-blue-eef3ff-a55: rgba(238, 243, 255, 0.55); --palette-blue-dfebf9: #dfebf9; --palette-red-fdf1f1: #fdf1f1; /* 날짜·월 선택기 — TBM 목록 조회연월 */ --palette-blue-006df9: #006df9; --palette-gray-222-a20: rgba(34, 34, 34, 0.2); /* 상태색 — 디자이너 컬러시스템(산업안전보건법·ISO 3864-1 참고, WEB-INF/CLAUDE.md §8 의 상태색 표) */ --palette-status-yellow: #face06; --palette-status-red: #b52526; --palette-status-blue: #0471a4; --palette-status-green: #007835; --palette-status-orange: #ff8000; --palette-status-gray: #7f8c8d; /* ---------- 2. 역할 ---------- */ /* 글자 — 진한 순서 */ --color-text-strongest: var(--palette-black); /* 검정 글자 */ --color-text-stronger: var(--palette-gray-111); /* 정보 카드 제목·값 */ --color-text-strong: var(--palette-gray-222); /* 박스 제목·현장명·상태 값 */ --color-text-default: var(--palette-gray-333); /* 본문·표 머리 */ --color-text-soft: var(--palette-gray-444); /* 박스 머리·정보 항목명 */ --color-text-softer: var(--palette-gray-555); /* DataTables 본문·상태 이름 */ --color-text-subtle: var(--palette-gray-666); /* 목록 제목·내비게이션 아이콘 */ --color-text-muted: var(--palette-gray-999); /* 회색 글자·비활성 버튼 */ --color-text-inverse: var(--palette-white); /* 어두운 배경 위 글자 */ --color-text-inverse-subtle: var(--palette-gray-f5f5f5); --color-text-brand: var(--palette-blue-1e4e82); /* 오류 안내 화면의 큰 코드 */ --color-text-required: #f03e3e; /* 필수 표기 별표(웹·모바일 공통) */ /* 테두리 — 진한 순서 */ --color-border-strongest: var(--palette-black); --color-border-stronger: var(--palette-gray-444); /* 조회조건 표 테두리 */ --color-border-strong: var(--palette-gray-555); --color-border-default: var(--palette-gray-999); /* 표·카드 기본 테두리 */ --color-border-soft: var(--palette-gray-aaa); /* 체크박스·라디오 */ --color-border-softer: var(--palette-gray-ccc); --color-border-subtle: var(--palette-gray-ddd); /* 입력칸·버튼 */ --color-border-light: var(--palette-gray-eee); /* 탭 위 테두리·사진 틀 */ --color-border-lightest: var(--palette-gray-f5f5f5); /* 목록 항목 구분선 */ --color-border-focus: var(--palette-blue-0c56af); /* 카드·버튼 hover */ --color-border-tab-active: var(--palette-blue-4e76b5); /* 배경 — 진한 순서 */ --color-bg-strongest: var(--palette-gray-111); /* 스크롤바 막대 hover */ --color-bg-stronger: var(--palette-gray-333); /* 스크롤바 막대 */ --color-bg-strong: var(--palette-gray-555); /* 스크롤바 막대(조회조건 표) */ --color-bg-primary: var(--palette-blue-0c56af); /* 페이지 스크롤바 */ --color-bg-modal-primary: var(--palette-navy-1b4173); /* 웹 모달 저장·확인·추가 버튼 바탕 */ --color-bg-modal-primary-hover: var(--palette-navy-163560); --color-bg-muted: var(--palette-gray-eee); /* 비활성 라디오 */ --color-bg-subtle: var(--palette-gray-f5f5f5); /* 연한 바탕(well·첨부 영역) */ --color-bg-row-hover: var(--palette-gray-dedede-a40); /* 표 행 hover */ --color-bg-table-sum: var(--palette-gray-f5f5f5); /* 표 합계 행(tfoot) */ --color-bg-white: var(--palette-white); /* 라벨·값 칸 — 정보 카드(info-list dt/dd)와 상세 입력(input-group)이 같이 쓴다. active = hover·입력 중 */ --color-text-field-label: var(--palette-gray-2e2e36); --color-bg-field-label: var(--palette-gray-d7d7d7-a40); --color-border-field-label: var(--palette-gray-d7d7d7-a50); --color-bg-field-value: var(--palette-gray-dddddd-a20); --color-border-field-value: var(--palette-gray-78787a-a30); /* 값 칸 아래 선 */ --color-border-field-value-edge: var(--palette-gray-666666-a02); /* 값 칸 위·오른쪽 선(거의 보이지 않음) */ --color-text-field-active: var(--palette-blue-2f6df6); --color-bg-field-label-active: var(--palette-blue-2f6df6); --color-border-field-label-active: var(--palette-blue-2f6df6-a22); --color-bg-field-value-active: var(--palette-blue-eef3ff-a55); --color-border-field-value-active: var(--palette-blue-2f6df6-a50); --color-bg-check-active: var(--palette-blue-2f6df6); /* 체크박스(공통 shared/components.css)의 체크한 바탕·테두리 */ --color-border-check: var(--palette-gray-b4bac4); /* 체크박스 테두리(1px) — 입력칸 선(#ccc)보다 한 단계 진하게 */ --color-bg-check-disabled: var(--palette-gray-f5f5f5); /* 막힌 체크박스 바탕 */ --color-border-field-input: var(--palette-gray-ccc); /* 상세 입력(input-group) 라벨·입력칸 테두리 — 정보 카드 선보다 진하게 */ --color-bg-field-input-label: var(--palette-blue-dfebf9); /* 상세 입력(input-group) 라벨 바탕 — 기존 화면의 하늘색 유지 */ --color-bg-condition: #f3f8fe; /* 모달 안 조회조건 영역 바탕(연한 하늘색 — 회색 안내문구와 구분) */ --color-border-condition: #dbe7f5; /* 모달 안 조회조건 영역 테두리 */ /* 달력(FullCalendar) — 일요일·토요일 날짜, 오늘 칸 */ --color-text-calendar-sunday: var(--palette-status-red); --color-text-calendar-saturday: var(--palette-blue-0c56af); --color-bg-calendar-today: var(--palette-blue-dfebf9); /* 날짜·월 선택기(flatpickr · bootstrap-monthpicker) — TBM 목록 조회연월 선택기 기준 (css/web/picker.css) */ --color-bg-picker-head: var(--palette-blue-006df9); /* 연·월 머리 */ --color-bg-picker-active: var(--palette-blue-006df9); /* 고른 칸·마우스를 올린 칸 */ --color-border-picker: var(--palette-gray-ccc); /* 상자·칸 테두리 */ --color-shadow-picker: var(--palette-gray-222-a20); /* 경고 안내문구(guide-text-danger) — 되돌릴 수 없는 동작 등 꼭 읽어야 하는 안내 */ --color-text-guide-danger: var(--palette-status-red); --color-border-guide-danger: var(--palette-status-red); --color-bg-guide-danger: var(--palette-red-fdf1f1); /* 출력 버튼(btn-print) — 출력·인쇄 버튼은 모든 화면이 이 파랑 하나를 쓴다. hover 는 opacity 만 올린다 */ --color-bg-print: var(--palette-blue-2f6df6); --color-border-print: var(--palette-blue-2f6df6-a22); --color-text-print: var(--palette-white); /* 보조 출력 버튼(btn-print btn-print-outline) — 흰 바탕에 출력 파랑 글자·선. 한 화면에 출력이 둘일 때 보조 쪽 */ --color-bg-print-outline: var(--palette-white); --color-border-print-outline: var(--palette-blue-2f6df6); --color-text-print-outline: var(--palette-blue-2f6df6); /* 요청 중 표시(#__loading) — 화면을 덮는 막 + 원형 스피너 */ --color-bg-loading-backdrop: var(--palette-white-a75); /* 화면 전체를 덮는 막(표를 그리는 과정이 비치지 않게) */ --color-loading-spinner: var(--palette-blue-2f6df6); --color-loading-track: var(--palette-blue-2f6df6-a22); /* 메인 팝업(popup.jsp — 공지사항·중대재해속보) */ --color-bg-popup-backdrop: var(--palette-black-a45); /* 팝업 뒤 화면을 덮는 막 */ --color-shadow-popup: var(--palette-black-a20); --color-text-popup-link: var(--palette-blue-2f6df6); /* '자세히 보기' */ /* 그림자 */ --color-shadow-light: var(--palette-gray-eee); /* 상태 — 배경·글자 어디에나 쓴다 */ --color-status-pending: var(--palette-status-yellow); /* 미점검·미제출·승인대기·미발행, 점검중·진행중·결재중, 일반점검 */ --color-status-danger: var(--palette-status-red); /* 미참석·미조치·불량·발행, 반려·긴급, 중점점검 */ --color-status-complete: var(--palette-status-blue); /* 조치승인·승인완료, 일상점검 */ --color-status-good: var(--palette-status-green); /* 조치·양호 */ --color-status-insufficient: var(--palette-status-orange); /* 미흡 */ --color-status-na: var(--palette-status-gray); /* N/A·작성중 */ /* 위험도 등급 상·중·하 — 평가 화면 등급 체크(common.css grade-radio). 고른 칸 바탕 */ --color-grade-high: var(--palette-status-red); --color-grade-mid: var(--palette-status-blue); --color-grade-low: var(--palette-status-green); }