/* =====================================================================
   위험성평가 전용 화면 스타일 - css/ra.css
   ---------------------------------------------------------------------
   2026-10-21 사용자 지시 : "UI 부터 먼저, 하드코딩이라도 html 로" — 경기도(케어바이 리빙플랜) 디자인을 따른다.
   경기도에서 옮겨 온 css (basic · page · left · form · table · common · login) 는 되도록 손대지 않고,
   이 프로젝트에서 새로 필요한 모양만 여기에 모은다. 앞 글자 ra_ (Risk Assessment) 로 구분한다.

   색은 경기도와 같은 값을 쓴다
     제목줄 남색 #353942 · 강조 파랑 #4694c2 · 짙은 파랑 #335c77
     결과 색 : 적정 초록 #2e9d57 · 미흡 주황 #d9730d · 중지 빨강 #d9534f · N/A 회색 #8a939e

   목차
     1. 왼쪽 메뉴 보탬 (준비 중 메뉴)
     2. 작은 부품 (배지 · 칩 · 진행 막대 · 안내 띠)
     3. 체크리스트 표 (결과 단추 · 우선 점검 줄 · 펼침 줄)
     4. 팝업 창 (사진 등록 · 사용자 고르기 · 장소 추가 · 서명)
     5. 첫 화면 카드
     6. 알림(토스트)
     7. 로그인 그림 칸 색
   ===================================================================== */


/* ---------- 0. 바탕 ----------
   경기도 css 는 body 바탕색을 정하지 않아, 컴퓨터가 다크 모드면 빈 곳이 검게 보인다 (2026-10-21 시안 확인 때 발견).
   이 화면은 밝은 화면 한 가지로만 만든다. */
html                { color-scheme: light; }
body                { background-color: #ffffff; }

/* 고르기 칸(select) 글자 아래가 잘리는 문제 (2026-10-21 사용자 지적 : 사업장 정보 > 업종 칸)
   basic.css 가 select 높이를 2em(약 26.7px)으로 못박고, form.css 의 .form_input1 이 위아래 여백 5px 를 더해
   글자 자리가 14.7px 밖에 남지 않았다 → 한글 아랫부분이 잘림.
   높이를 글자에 맞게 풀고 여백을 4px 로 줄여, 옆 입력칸(27.5px)과 같은 높이가 되게 한다.
   (경기도 원본 css 는 손대지 않고 여기서 덮는다. 아래쪽에서 높이를 따로 정한 칸 — 팝업 · 검색 줄 · 펼침 줄 — 은 그 값이 이긴다) */
select.form_input1  { height: auto; padding-top: 4px; padding-bottom: 4px; }


/* ---------- 1. 왼쪽 메뉴 보탬 ----------
   R04 결과표 · R05 감소대책은 "내일 회의 후 결정" (위험성평가 설명.docx) 이라 화면이 없다.
   메뉴에는 자리만 보이고 누를 수 없게 흐리게 둔다. */
#left_box .depth2 a.ra_menu_off          { color: #7d828d !important; cursor: default; }
#left_box .depth2 a.ra_menu_off:hover    { color: #7d828d !important; }
#left_box .depth2 a.ra_menu_off em       { margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: #3b3f49; font-size: 11px; font-style: normal; }
#left_box .depth2 a .ra_menu_tag         { margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: #2b3f52; color: #9fb3c8; font-size: 11px; }
#left_box h1 a                           { color: inherit; }


/* ---------- 2. 작은 부품 ---------- */

/* 권한 배지 : 1 총괄관리자 · 2 안전관리자 · 3 점검자 (R00-01 권한구분) */
.ra_badge           { display: inline-block; min-width: 46px; white-space: nowrap; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: bold; line-height: 1.2; text-align: center; }
.ra_badge_1         { background: #e8e2fb; color: #5b3fb0; }
.ra_badge_2         { background: #dceafb; color: #1b4f72; }
.ra_badge_3         { background: #e3f4ea; color: #1e7d4f; }
.ra_badge_plan      { background: #eef1f5; color: #555; }
.ra_badge_run       { background: #fff1d6; color: #a2620b; }
.ra_badge_done      { background: #e3f4ea; color: #1e7d4f; }
.ra_badge_stop      { background: #fdeeee; color: #b33a37; }           /* 사용중지 (사용자 관리 · 2026-10-21) */

/* 결과 글자 색 (목록 · 요약에 쓰는 숫자) */
.ra_c_ok            { color: #2e9d57; font-weight: bold; }
.ra_c_warn          { color: #d9730d; font-weight: bold; }
.ra_c_stop          { color: #d9534f; font-weight: bold; }
.ra_c_na            { color: #8a939e; font-weight: bold; }
.ra_c_none          { color: #b5bcc5; }

/* 고르기 칩 (필터) : 체크리스트의 전체 / 우선 / 미입력 / 미흡·중지 */
.ra_chips           { display: flex; flex-wrap: wrap; gap: 6px; }
.ra_chip            { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid #ccd1d9; border-radius: 15px;
                      background: #fff; color: #555; font-size: 13px; cursor: pointer; }
.ra_chip b          { font-size: 12px; color: #888; }
.ra_chip:hover      { border-color: #4694c2; color: #4694c2; }
.ra_chip.ra_on      { border-color: #353942; background: #353942; color: #fff; }
.ra_chip.ra_on b    { color: #c2c7d0; }

/* 진행 막대 : 37개 중 몇 개를 적었는지 + 결과별 색 */
.ra_prog            { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #e6e9ee; }
.ra_prog i          { display: block; height: 100%; }
.ra_prog .ra_p_ok   { background: #2e9d57; }
.ra_prog .ra_p_warn { background: #d9730d; }
.ra_prog .ra_p_stop { background: #d9534f; }
.ra_prog .ra_p_na   { background: #8a939e; }
.ra_prog_sm         { height: 6px; border-radius: 3px; margin-top: 5px; }

/* 요약 숫자 줄 : 적정 n · 미흡 n · 중지 n · N/A n · 미입력 n */
.ra_counts          { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 13px; color: #555; }
.ra_counts span b   { margin-left: 3px; }

/* 안내 띠 (화면 위쪽 한 줄 설명) */
.ra_note            { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid #4694c2; border-radius: 3px; background: #eef5fb; color: #335c77; font-size: 13px; line-height: 1.7; }
.ra_note b          { color: #1b4f72; }
.ra_note_warn       { border-left-color: #d9730d; background: #fff6e8; color: #8a5a12; }
.ra_note_warn b     { color: #7a4a00; }

/* 시안 표시 : 아직 정하지 않은 것 (질문 목록과 짝) */
.ra_tbd             { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px dashed #d9730d; border-radius: 3px; color: #d9730d; font-size: 11px; font-weight: normal; line-height: 16px; vertical-align: middle; }

/* 왼쪽 목록 위 "새로 만들기" 단추 (경기도 .cp_mid_new 와 같은 모양) */
.ra_new             { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin: 0 0 14px; clear: both;
                      border: 1px dashed #4694c2; border-radius: 3px; background: #fff; color: #4694c2; font-size: 14px; font-weight: bold; cursor: pointer; }
.ra_new:hover       { background: #eef6fc; }

/* 왼쪽 목록 위 검색 줄 (경기도 목록 검색 줄을 flex 로) */
.ra_search          { display: flex; gap: 6px; clear: both; margin: 0 0 12px; }
.ra_search input, .ra_search select { height: 32px; }
.ra_search input    { flex: 1; min-width: 0; }
.ra_search select   { flex: 0 0 110px; }

/* 목록 머리 (총 n건) */
.ra_list_head       { display: flex; align-items: center; justify-content: space-between; clear: both; margin: 0 0 12px; font-size: 15px; }
.ra_list_head b     { color: #4694c2; }

/* 표 안 작은 설명 줄 */
.ra_sub             { display: block; margin-top: 3px; color: #888; font-size: 11px; font-weight: normal; }

/* 읽기 전용 값 (입력칸처럼 보이지만 바꿀 수 없음) */
.ra_ro              { background-color: #f4f4f4 !important; color: #555 !important; }

/* 업종 정보 상자 : 업종을 고르면 대표 공정 · 핵심 위험 · 우선 점검 항목을 보여 준다 */
.ra_kisc            { margin-top: 6px; padding: 12px 14px; border: 1px solid #dfe3e8; border-radius: 4px; background: #fff; font-size: 13px; line-height: 1.8; color: #444; }
.ra_kisc dl         { display: flex; gap: 10px; margin: 0; }
.ra_kisc dt         { flex: 0 0 90px; color: #888; }
.ra_kisc dd         { flex: 1; margin: 0; }
.ra_pri_list        { display: flex; flex-wrap: wrap; gap: 4px; }
.ra_pri_list span   { padding: 0 6px; border-radius: 3px; background: #efe9fb; color: #5a32ab; font-size: 12px; line-height: 20px; }


/* ---------- 3. 체크리스트 표 ----------
   R03-00 위험요인 체크리스트 : 37개 항목을 한 줄씩 보여 주고 결과를 고른다.
   결과 단추는 라디오를 숨기고 label 을 단추처럼 (경기도 .scale_group 과 같은 방식 : 키보드 · 폼 전송은 그대로). */
table.ra_ck                 { table-layout: fixed; }
table.ra_ck th              { font-size: 13px; padding: 10px 0; }
table.ra_ck td              { font-size: 13px; padding: 9px 6px; }
table.ra_ck tr:hover td     { background-color: inherit; }               /* table.css 의 노란 hover 를 끔 (결과 색과 섞임) */
table.ra_ck td.ra_ck_text   { text-align: left; line-height: 1.55; color: #333; }
table.ra_ck td.ra_ck_no     { font-weight: bold; color: #353942; }

/* 분류 머리 줄 (A 일반 작업환경 …) */
table.ra_ck tr.ra_grp td    { padding: 8px 12px; border-top: 2px solid #353942; background: #eef1f5; color: #353942; font-size: 13px; font-weight: bold; text-align: left; }
table.ra_ck tr.ra_grp td span { margin-left: 8px; color: #888; font-weight: normal; font-size: 12px; }

/* 우선 점검 줄 : 회사 업종(KISC)의 우선 점검 번호에 든 항목. 왼쪽 보라 띠 + 옅은 바탕 (엑셀 메모 "색깔을 달리 하여 우선 표시")
   2026-11-01 사용자 지시 : 주황은 미흡과 헷갈려 보라로 (모바일 m_v2.css --pri 와 같은 색) */
table.ra_ck tr.ra_pri td            { background-color: #f8f5fe; }
table.ra_ck tr.ra_pri td:first-child { box-shadow: inset 4px 0 0 #6d3fc4; }
.ra_pri_tag                 { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: #6d3fc4; color: #fff; font-size: 11px; line-height: 17px; vertical-align: 1px; }

/* 회사 추가 항목(분류 X) 표시 (2026-10-21 회사별 항목) */
.ra_my_tag                  { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: #4694c2; color: #fff; font-size: 11px; line-height: 17px; vertical-align: 1px; }
tr.ra_off td                { color: #aaa !important; }
tr.ra_off td b              { color: #aaa; }

/* 결과를 고른 줄 : 왼쪽 칸에 결과 색 띠 */
table.ra_ck tr.ra_r01 td.ra_ck_res { background-color: #f1faf4; }
table.ra_ck tr.ra_r02 td.ra_ck_res { background-color: #fff6ea; }
table.ra_ck tr.ra_r03 td.ra_ck_res { background-color: #fdeeee; }
table.ra_ck tr.ra_r04 td.ra_ck_res { background-color: #f3f4f6; }

/* 결과 단추 묶음 : 적정 · 미흡 · 중지 · N/A */
/* position: relative — 숨긴 라디오(position: absolute)의 기준을 이 묶음으로 잡는다.
   없으면 라디오가 페이지 전체를 기준으로 놓여, 아래쪽 줄의 라디오가 화면 밖(3000px 쯤)으로 나가
   페이지 전체에 스크롤이 생겼다. (2026-10-21 사용자 지적 "체크리스트 화면에 전체 스크롤") */
.ra_res                     { position: relative; display: inline-flex; border: 1px solid #ccd1d9; border-radius: 4px; overflow: hidden; background: #fff; }
.ra_res input               { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ra_res label               { min-width: 46px; padding: 0 8px; border-right: 1px solid #ccd1d9; color: #666; font-size: 12px; line-height: 30px; text-align: center; cursor: pointer; user-select: none; }
.ra_res label:last-of-type  { border-right: 0; }
.ra_res label:hover         { background: #f2f8fc; }
.ra_res input:focus-visible + label { outline: 2px solid #4694c2; outline-offset: -2px; }
.ra_res input[value="01"]:checked + label { background: #2e9d57; color: #fff; font-weight: bold; }
.ra_res input[value="02"]:checked + label { background: #d9730d; color: #fff; font-weight: bold; }
.ra_res input[value="03"]:checked + label { background: #d9534f; color: #fff; font-weight: bold; }
.ra_res input[value="04"]:checked + label { background: #8a939e; color: #fff; font-weight: bold; }

/* 사진 단추 : 장수 표시. 미흡 · 중지인데 사진이 없으면 빨간 테두리 */
.ra_photo_btn               { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 70px; height: 30px; border: 1px solid #ccd1d9; border-radius: 4px;
                              background: #fff; color: #555; font-size: 12px; cursor: pointer; }
.ra_photo_btn:hover         { border-color: #4694c2; color: #4694c2; }
.ra_photo_btn b             { color: #4694c2; }
.ra_photo_btn.ra_need       { border-color: #d9534f; color: #d9534f; }
.ra_photo_btn svg           { width: 14px; height: 14px; }

/* 펼침 줄 : 미흡 · 중지면 담당 · 처리기한 · 즉시 안전 조치 · 추가 점검 내용, N/A 면 사유 */
table.ra_ck tr.ra_detail td         { padding: 0; background: #fbfcfd; text-align: left; }
table.ra_ck tr.ra_detail[hidden]    { display: none; }
.ra_detail_in               { display: grid; grid-template-columns: 90px 1fr 90px 1fr; gap: 8px 10px; align-items: center; padding: 12px 16px 14px 60px; border-left: 4px solid #d9730d; }
.ra_detail_in.ra_stop       { border-left-color: #d9534f; }
.ra_detail_in.ra_na         { border-left-color: #8a939e; grid-template-columns: 90px 1fr; }
.ra_detail_in > label       { color: #555; font-size: 12px; font-weight: bold; }
.ra_detail_in .form_input1  { width: 100%; height: 30px; box-sizing: border-box; }
.ra_detail_in textarea.form_input1 { height: 52px; line-height: 1.5; }
.ra_detail_in .ra_span3     { grid-column: span 3; }
.ra_detail_in .ra_hint      { grid-column: 2 / -1; margin: -2px 0 0; color: #d9534f; font-size: 12px; }
.ra_detail_in .ra_hint:empty { display: none; }

/* 체크리스트 위 정보 상자 (장소 · 점검일자 · 진행) */
.ra_ck_head                 { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.ra_ck_head h3              { margin: 0 0 4px; color: #353942; font-size: 20px; }
.ra_ck_head .ra_sub         { font-size: 12px; }
.ra_ck_tools                { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ra_ck_tools .ra_legend     { color: #888; font-size: 12px; }

/* 왼쪽 장소 목록 : 진행 n/37 + 미흡·중지 수 */
.ra_place_tbl td            { padding: 10px 6px; font-size: 12px; }
.ra_place_tbl td.ra_tl      { text-align: left; padding-left: 10px; }
.ra_place_tbl tr.ra_grp_row td { padding: 6px 10px; background: #e6e9ee !important; color: #555; font-size: 12px; font-weight: bold; text-align: left; cursor: default; }


/* 사업장 요약 표 (사업장 정보 화면 왼쪽 · 2026-10-21) : 이름표(th) + 값(td) 두 칸, 묶음마다 머리 줄 */
.ra_sum_tbl th              { padding: 12px 12px; background: #f9f9f9; color: #555; font-size: 13px; font-weight: normal; text-align: left; border-width: 1px; }
.ra_sum_tbl td              { padding: 12px 12px; font-size: 13px; text-align: left; line-height: 1.5; }
.ra_sum_tbl td b            { color: #353942; font-size: 15px; }
.ra_sum_tbl td .ra_sub      { font-size: 12px; }
.ra_sum_tbl tr.ra_grp_row td { padding: 8px 12px; border-top: 2px solid #353942; background: #e6e9ee !important; color: #353942; font-weight: bold; cursor: default; }
.ra_sum_tbl tr:hover td, .ra_sum_tbl tr:hover th { background-color: inherit; }   /* 노란 hover 끔 (누르는 줄만 따로) */
.ra_sum_tbl tr[data-href]:hover td, .ra_sum_tbl tr[data-href]:hover th { background-color: #eef4fb; }
.ra_sum_tbl tr[data-href] td:last-child        { position: relative; padding-right: 30px; }
.ra_sum_tbl tr[data-href] td:last-child::after { content: '›'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #9aa4b2; font-size: 20px; line-height: 1; }


/* ---------- 4. 팝업 창 ----------
   경기도 .nf_help_pop 과 같은 틀 (화면 전체 어둡게 + 가운데 상자). 크기만 넓혔다.
   여닫기는 js/common.js 의 RA.pop.open(id) / RA.pop.close(id) 가 한다. */
.ra_pop             { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); }
.ra_pop[hidden]     { display: none; }
.ra_pop_box         { display: flex; flex-direction: column; width: 760px; max-width: 94%; max-height: 88%; border-radius: 6px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.ra_pop_box.ra_pop_sm { width: 480px; }
.ra_pop_head        { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 20px; height: 54px; border-radius: 6px 6px 0 0; background: #353942; color: #fff; font-size: 16px; }
.ra_pop_head small  { margin-left: 8px; color: #c2c7d0; font-size: 12px; }
.ra_pop_x           { width: 40px; height: 40px; border: 0; background: transparent; color: #c2c7d0; font-size: 24px; cursor: pointer; }
.ra_pop_x:hover     { color: #fff; }
.ra_pop_body        { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; font-size: 14px; }
.ra_pop_foot        { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #e5e7eb; }
.ra_pop_foot .nf_btn { height: 34px; padding: 0 18px; }

/* 팝업 안 입력 줄 (이름표 + 칸) */
.ra_field           { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.ra_field > label   { color: #444; font-size: 13px; font-weight: bold; }
.ra_field .form_input1 { width: 100%; height: 34px; box-sizing: border-box; }

/* 사진 등록 (R03-01) : 개선 전 / 개선 후 두 칸, 칸마다 사진 카드 */
.ra_photo_cols      { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ra_photo_col h4    { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid #353942; color: #353942; font-size: 14px; }
.ra_photo_col h4 span { color: #888; font-size: 12px; font-weight: normal; }
.ra_photo_card      { display: grid; grid-template-columns: 96px 1fr; gap: 8px; margin-bottom: 10px; padding: 8px; border: 1px solid #e1e5ea; border-radius: 4px; background: #fbfcfd; }
.ra_photo_img       { width: 96px; height: 72px; border-radius: 3px; background: #e9edf2 center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: #9aa4b2; font-size: 11px; }
.ra_photo_card textarea { width: 100%; height: 72px; box-sizing: border-box; font-size: 12px; line-height: 1.5; }
.ra_photo_card .ra_photo_meta { grid-column: 1 / -1; display: flex; justify-content: space-between; color: #888; font-size: 11px; }
.ra_photo_card .ra_photo_meta a { color: #d9534f; }
.ra_photo_drop      { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 70px; border: 1px dashed #b9c3cc; border-radius: 4px;
                      background: #fff; color: #888; font-size: 13px; cursor: pointer; }
.ra_photo_drop:hover, .ra_photo_drop.ra_over { border-color: #4694c2; background: #f2f8fc; color: #4694c2; }
.ra_photo_drop small { font-size: 11px; color: #aaa; }

/* 사용자 고르기 팝업 (참여 근로자) */
.ra_pick_tbl td     { padding: 9px 6px; font-size: 13px; }
.ra_pick_tbl tr     { cursor: pointer; }
.ra_pick_tbl tr.ra_picked td { background: #dceafb; }
.ra_pick_tbl tr.ra_already td { color: #aaa; cursor: default; }
.ra_pick_tbl input  { width: 16px; height: 16px; padding: 0 !important; vertical-align: middle; }

/* 서명 (R00-01) : 그림 상자 + 직접 그리기 캔버스 */
.ra_sign            { display: flex; align-items: center; gap: 12px; }
.ra_sign_img        { width: 220px; height: 90px; border: 1px solid #ccd1d9; border-radius: 4px; background: #fff center / contain no-repeat; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 12px; }
.ra_sign_pad        { display: block; width: 100%; height: 200px; border: 1px solid #ccd1d9; border-radius: 4px; background: #fff; cursor: crosshair; touch-action: none; }


/* ---------- 5. 첫 화면 카드 ---------- */
.ra_dash            { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.ra_card            { padding: 18px 20px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; }
.ra_card dt         { color: #777; font-size: 13px; }
.ra_card dd         { margin: 10px 0 0; color: #353942; font-size: 30px; font-family: 'S-CoreDream-5Medium', sans-serif; }
.ra_card dd small   { margin-left: 4px; color: #999; font-size: 14px; }
.ra_card.ra_card_warn dd { color: #d9730d; }
.ra_card.ra_card_stop dd { color: #d9534f; }
.ra_steps           { display: flex; gap: 0; margin: 4px 0 6px; counter-reset: st; }
.ra_steps li        { flex: 1; position: relative; padding: 12px 10px 12px 34px; border: 1px solid #dfe3e8; border-right: 0; background: #fff; color: #888; font-size: 13px; }
.ra_steps li:last-child { border-right: 1px solid #dfe3e8; }
.ra_steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
                       background: #c9ced6; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.ra_steps li.ra_done { color: #2e7d4f; }
.ra_steps li.ra_done::before { background: #6fae8a; }
.ra_steps li.ra_now  { background: #353942; color: #fff; font-weight: bold; }
.ra_steps li.ra_now::before { background: #4694c2; }
.ra_steps li.ra_later { color: #b5bcc5; }


/* ---------- 6. 알림(토스트) ----------
   저장 단추 등을 누르면 화면 아래에 잠깐 뜬다. 시안이라 실제 저장은 하지 않는다. */
.ra_toast           { position: fixed; left: 50%; bottom: 40px; z-index: 1000; transform: translate(-50%, 20px); padding: 12px 22px; border-radius: 6px;
                      background: #353942; color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.ra_toast.ra_show   { opacity: 1; transform: translate(-50%, 0); }
.ra_toast.ra_bad    { background: #b33a37; }


/* ---------- 5-2. 대시보드 (index.html · 2026-10-28 "위험성 평가 대시보드.docx") ---------- */
.ra_db                      { max-width: 1600px; }
.ra_db_head                 { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 16px; padding: 18px 22px; border-radius: 8px; background: #353942; color: #fff; }
.ra_db_head h3              { margin: 0 0 6px; font-size: 22px; font-family: 'S-CoreDream-5Medium', sans-serif; }
.ra_db_head .ra_sub         { color: #c2c7d0; font-size: 13px; }
.ra_db_pick                 { display: flex; align-items: center; gap: 8px; color: #c2c7d0; font-size: 13px; white-space: nowrap; }
.ra_db_pick select          { min-width: 320px; color: #333; }
.ra_dash.ra_dash6           { grid-template-columns: repeat(6, 1fr); }
.ra_card.ra_card_ok dd      { color: #2e9d57; }
.ra_card.ra_card_late dd small { color: #d9534f; font-weight: bold; }
.ra_db_two                  { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
table.ra_db_tbl td          { padding: 11px 6px; font-size: 13px; }
table.ra_db_tbl td.ra_db_name { padding-left: 14px; text-align: left; font-weight: bold; color: #353942; }
table.ra_db_tbl tfoot td    { border-top: 2px solid #353942; background: #f4f6f8; font-weight: bold; }
table.ra_db_tbl tr:hover td { background-color: #fafbfc; }
table.ra_db_tbl tr[data-href]:hover td { background-color: #eef4fb; }
.ra_db_bar                  { height: 10px; margin: 4px 0 0; gap: 2px; background: #eef1f4; }     /* 칸 사이 2px 틈 (구분이 색만으로 되지 않게 표에 숫자도 있음) */
.ra_db_bar i                { border-radius: 2px; }
.ra_db_gr                   { display: inline-flex; align-items: center; gap: 3px; margin: 0 6px 0 0; font-size: 12px; white-space: nowrap; }
.ra_db_gr .ra_grade         { min-width: 0; padding: 1px 6px; font-size: 11px; }
.ra_db_legend               { display: flex; align-items: center; gap: 14px; margin-top: 10px; color: #555; font-size: 12px; }
.ra_db_legend i             { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.ra_db_legend i.ra_p_ok     { background: #2e9d57; }     /* 막대 색 규칙(.ra_prog 안)이 범례에는 안 닿아 따로 */
.ra_db_legend i.ra_p_warn   { background: #d9730d; }
.ra_db_legend i.ra_p_stop   { background: #d9534f; }
.ra_db_legend i.ra_p_na     { background: #8a939e; }


/* ---------- 5-3. 아차사고 보고서 (nearmiss.html · 2026-11-01 "아차사고보고서_양식.docx") ---------- */
/* 위험도 재평가 줄 : [개선 전] 가능성 [ ] × 중대성 [ ] = n점 [등급] */
.ra_nm_risk                 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.ra_nm_risk label           { display: inline-flex; align-items: center; gap: 5px; color: #555; }
.ra_nm_risk select          { width: 118px; }
.ra_nm_risk b               { min-width: 34px; color: #1b4f72; font-size: 15px; text-align: right; }
.ra_nm_tag                  { min-width: 54px; padding: 3px 0; border-radius: 3px; background: #fdeeee; color: #b33a37; font-size: 12px; font-weight: bold; text-align: center; }
.ra_nm_tag_after            { background: #e9f6ee; color: #1e7d4f; }

/* 증빙 사진 : 조치 전 · 후 나란히 */
.ra_nm_photos               { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 90%; }
.ra_nm_photos .ra_slot_img,
.ra_nm_photos .ra_slot_empty { height: 170px; }

/* 기록 및 확인 표 : 칸마다 흰 입력칸 */
.ra_nm_conf tr:hover td     { background-color: #fff; }
.ra_nm_conf td              { padding: 6px 8px !important; }
.ra_nm_conf .form_input1    { width: 100%; box-sizing: border-box; }

/* 출력용 양식 : 화면에서는 숨기고 인쇄 때만 (아래 @media print) */
.ra_sheet.ra_nm_sheet       { display: none; }
.ra_nm_lead                 { margin: -10px 0 12px; color: #666; font-size: 12px; text-align: center; }
.ra_nm_sec                  { margin: 12px 0 5px; color: #222; font-size: 14px; }
.ra_nm_sec small            { color: #666; font-size: 12px; font-weight: normal; }
table.ra_nm_doc             { table-layout: fixed; }
table.ra_nm_doc th          { padding: 6px 4px; border: 1px solid #9aa4b2; background: #eef1f5; color: #222; font-size: 12px; }
table.ra_nm_doc th.ra_nm_th2 { background: #f7f8fa; font-weight: normal; }
table.ra_nm_doc td          { padding: 6px 8px; border: 1px solid #9aa4b2; color: #222; font-size: 12px; line-height: 1.5; text-align: left; }
table.ra_nm_doc.ra_nm_join  { margin-top: -1px; }
table.ra_nm_doc.ra_nm_center td { text-align: center; }
table.ra_nm_doc td.ra_nm_pre { white-space: pre-wrap; }
.ra_nm_rule                 { color: #666; font-size: 11px; }
.ra_nm_blank                { color: #888; }
td.ra_nm_ph                 { padding: 4px !important; text-align: center !important; }
.ra_nm_img                  { display: flex; align-items: center; justify-content: center; height: 40mm; background: #f4f6f8 center / contain no-repeat; color: #9aa4b2; font-size: 11px; }
.ra_nm_cap                  { display: block; margin-top: 2px; color: #555; font-size: 11px; }
.ra_nm_guide                { margin: 8px 0 0; padding: 6px 8px; background: #f4f6f8; color: #444; font-size: 11px; line-height: 1.5; }


/* ---------- 8. 위험성 평가 조사 결과표 (result.html · 2026-10-25) ----------
   "위험성 평가 조사 결과표(20261025).docx" : 왼쪽 미흡 · 중지 그리드 + 오른쪽 결과표 한 장(현장 비치용 출력) */

/* 왼쪽 검색 칸 : 이름표 + 고르기 칸, 마지막 줄은 구분 · 완료 · [검색] */
.ra_rs_search               { display: grid; grid-template-columns: 44px 1fr; gap: 8px 8px; align-items: center; clear: both; margin: 0 0 16px; font-size: 13px; font-weight: bold; color: #444; }
.ra_rs_search .form_input1  { width: 100%; box-sizing: border-box; }
.ra_rs_two                  { display: flex; gap: 6px; }
.ra_rs_two select           { flex: 1; min-width: 0; }
.ra_rs_two .nf_btn          { flex: none; height: 28px; padding: 0 16px; }
.ra_rs_list td              { padding: 11px 4px; }
.ra_rs_list tr[data-i]      { cursor: pointer; }
.ra_list_txt                { display: none; }                         /* 항목 글 : 다듬은 화면(css/ra_v2.css)에서만 보인다 */
.ra_rs_list tr[data-i]:hover td { background-color: #eef4fb; }
.ra_rs_list tr.ra_grp_row td { padding: 7px 10px; background: #e6e9ee !important; color: #353942; font-size: 12px; font-weight: bold; text-align: left; cursor: default; }

/* 오른쪽 위 : 이전 건 · n / 전체 · 다음 건 */
.ra_rs_bar                  { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 1000px; margin: 0 auto 12px; font-size: 14px; color: #555; }
.ra_rs_bar[hidden]          { display: none; }
.ra_rs_bar .nf_btn:disabled { opacity: .4; cursor: default; }

/* 결과표 한 장 (종이처럼) */
.ra_sheet                   { max-width: 1000px; margin: 0 auto 30px; padding: 30px 34px 26px; border: 1px solid #d5dae0; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.ra_sheet[hidden]           { display: none; }
.ra_sheet_title             { margin: 0 0 18px; color: #222; font-size: 26px; font-family: 'S-CoreDream-5Medium', sans-serif; letter-spacing: 4px; text-align: center; }
.ra_sheet_meta              { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #353942; font-size: 14px; }
.ra_sheet_meta b            { font-size: 16px; color: #222; }
.ra_sheet_meta span:last-child { color: #666; font-size: 12px; }
.ra_sheet_foot              { display: flex; gap: 30px; margin-top: 14px; padding-top: 10px; border-top: 1px solid #d5dae0; font-size: 13px; color: #555; }
.ra_sheet_foot span:last-child { margin-left: auto; font-weight: bold; color: #333; }

table.ra_rt                 { margin-bottom: 12px; table-layout: fixed; }
table.ra_rt th              { padding: 10px 4px; background: #f4f6f8; border: 1px solid #c9ced6; font-size: 13px; color: #333; }
table.ra_rt td              { border: 1px solid #c9ced6; font-size: 13px; }
table.ra_rt tr:hover td     { background-color: #fff; }
table.ra_rt td.ra_rt_text   { text-align: left; line-height: 1.55; color: #222; }
table.ra_rt td.ra_rt_strong { font-weight: bold; color: #222; }
table.ra_rt.nf_grid textarea.form_input1 { min-height: 96px; }

/* 평가 점수 칸 : [가능성] × [중대성] = n점, 최종등급 배지 (2026-10-25 사용자 결정) */
table.ra_rt td.ra_score_cell { padding: 0 6px !important; }
.ra_score                   { display: flex; align-items: center; gap: 4px; }
table.ra_rt.nf_grid .ra_score select.form_input1 { flex: 1; min-width: 0; width: auto !important; padding: 8px 4px !important; }
.ra_score_x                 { flex: none; color: #888; }
.ra_score b                 { flex: none; min-width: 42px; color: #1b4f72; font-size: 15px; text-align: right; }
.ra_grade                   { display: inline-block; min-width: 34px; padding: 3px 8px; border-radius: 4px; background: #eef1f5; color: #888; font-size: 14px; font-weight: bold; }
.ra_grade_h                 { background: #d9534f; color: #fff; }
.ra_grade_m                 { background: #f0a640; color: #fff; }
.ra_grade_l                 { background: #2e9d57; color: #fff; }

/* 사진 칸 : 구분(개선 전 · 개선 후)마다 사진 1 · 사진 2 */
table.ra_rt_photo td        { padding: 10px; vertical-align: top; }
.ra_slot                    { display: flex; flex-direction: column; gap: 6px; }
.ra_slot_img                { position: relative; height: 230px; border-radius: 3px; background: #e9edf2 center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: #9aa4b2; font-size: 12px; }
.ra_slot_img em             { position: absolute; top: 6px; left: 6px; padding: 0 6px; border-radius: 3px; background: rgba(53,57,66,.8); color: #fff; font-size: 11px; font-style: normal; line-height: 18px; }
.ra_slot textarea           { width: 100%; box-sizing: border-box; font-size: 13px; line-height: 1.5; resize: vertical; }
.ra_slot_btns               { display: flex; gap: 6px; justify-content: flex-end; }
.ra_slot_btns .nf_btn       { cursor: pointer; }
.ra_slot_empty              { height: 230px; align-items: center; justify-content: center; border: 1px dashed #b9c3cc; border-radius: 3px; background: #fbfcfd; }
.ra_slot_add                { padding: 10px 18px; border: 1px solid #4694c2; border-radius: 4px; background: #fff; color: #4694c2; font-weight: bold; cursor: pointer; }
.ra_slot_add:hover          { background: #f2f8fc; }
.ra_print_only              { display: none; color: #aaa; font-size: 12px; }
.ra_pv                      { display: none; }                       /* 출력용 글자 (js/result.js syncPrint) — 화면에서는 숨김 */

/* 개선 결과표 (improve.html · 2026-10-27) : 칸 10개라 종이를 넓게, 줄 글 칸은 조금 낮게, 아래 합계 줄 */
.ra_sheet.ra_sheet_wide     { max-width: 1340px; }
table.ra_im.nf_grid textarea.form_input1 { min-height: 74px; font-size: 12px; }
table.ra_im th              { font-size: 12px; line-height: 1.3; }
table.ra_im td.ra_rt_text   { font-size: 12px; }
table.ra_im td.ra_im_score  { line-height: 1.6; }
table.ra_im td.ra_im_score b { font-size: 15px; color: #222; }
table.ra_im td.ra_im_score .ra_grade { min-width: 0; padding: 1px 6px; font-size: 12px; }
.ra_im_of                   { color: #888; font-size: 11px; }
.ra_im_risk                 { display: block; margin-top: 3px; color: #666; font-size: 11px; white-space: nowrap; }   /* 배점 점수 아래 위험도 등급 (2026-11-01) */
table.ra_im select.form_input1 { padding: 8px 2px !important; }
/* 완료 일자 날짜 칸 : 글자 · 여백을 줄여 "2026. 10. 26." 과 달력 아이콘이 한 칸에 다 보이게 (2026-10-27 사용자 지적 "완료일자가 가려져서 안 보여") */
table.ra_im input[type="date"].form_input1 { padding: 8px 4px 8px 6px !important; font-size: 12px; letter-spacing: -0.3px; }
table.ra_im td.ra_im_date   { padding: 10px 2px !important; font-size: 12px; white-space: nowrap; }   /* 날짜가 두 줄로 갈라지지 않게 (출력 확인 때 발견) */
table.ra_im tr.ra_im_sum td { padding: 12px 8px !important; border-top: 2px solid #353942; background: #f4f6f8; font-size: 14px; }
table.ra_im tr.ra_im_sum b  { font-size: 16px; color: #222; }
table.ra_im tr.ra_im_sum #im_sum { font-size: 14px; white-space: nowrap; }   /* "94 / 100점" 이 두 줄로 갈라지지 않게 */

/* 점수표 (score.html · 2026-11-01) : 조치 기준 표 · 3단계 표 · 배점 표 */
.ra_sc_act td               { padding: 8px 6px; font-size: 12px; vertical-align: middle; }
.ra_sc_act tr:hover td      { background: #fff; }
.ra_sc_text                 { text-align: left !important; line-height: 1.5; padding: 7px 8px !important; }
table.ra_sc_steps th        { padding: 8px 2px; font-size: 12px; }
table.ra_sc_pts td input    { text-align: center; padding: 7px 2px !important; min-height: 32px; }
table.ra_sc_pts tr.ra_sc_grp td { padding: 6px 10px !important; background: #e6e9ee !important; color: #353942; font-size: 12px; font-weight: bold; text-align: left; }
table.ra_sc_pts .ra_sc_text { font-size: 12px; color: #333; }
table.ra_sc_pts tr.ra_sc_sum td { padding: 9px 4px !important; border-top: 2px solid #353942; background: #f4f6f8; font-size: 14px; }
table.ra_matrix td small    { font-size: 12px; font-weight: normal; }
table.ra_matrix th .ra_mx_name { display: block; margin-top: 2px; }

/* 점수표 3×3 (score.html) : 칸 = 가능성 × 중대성, 색 = 위험도 등급 */
table.ra_matrix             { table-layout: fixed; background: #fff; }
table.ra_matrix th          { padding: 8px 2px; background: #f4f6f8; border: 1px solid #c9ced6; font-size: 13px; }
table.ra_matrix th.ra_mx_name { font-size: 11px; font-weight: normal; color: #666; }
table.ra_matrix th.ra_mx_side { width: 110px; text-align: left; padding-left: 10px; }
table.ra_matrix th.ra_mx_side span { margin-left: 4px; font-size: 11px; font-weight: normal; color: #666; }
table.ra_matrix th.ra_mx_corner { width: 110px; font-size: 11px; font-weight: normal; line-height: 1.5; color: #666; }
table.ra_matrix td          { height: 58px; border: 2px solid #fff; color: #fff; font-size: 18px; font-weight: bold; text-align: center; }
table.ra_matrix tr:hover td { filter: brightness(1.05); }
.ra_mx_h                    { background: #d9534f !important; }
.ra_mx_m                    { background: #f0a640 !important; }
.ra_mx_l                    { background: #2e9d57 !important; }
.ra_mx_x                    { background: #b5bcc5 !important; }
.ra_matrix_legend           { display: flex; gap: 16px; margin-top: 12px; font-size: 13px; color: #444; }
.ra_matrix_legend i         { display: inline-block; width: 14px; height: 14px; margin-right: 5px; border-radius: 3px; vertical-align: -2px; }

/* 출력 : 결과표 한 장만 A4 세로. 화면 틀(왼쪽 메뉴 · 제목줄 · 목록 · 단추)은 숨기고, 입력칸은 테두리 없이 글자만 */
@media print {
    @page { size: A4 portrait; margin: 12mm; }
    html, body                  { display: block !important; width: auto !important; min-width: 0 !important; height: auto !important; background: #fff !important; }
    #left_box, #title_box, #page_listbox, .ra_rs_bar, .ra_no_print, .ra_toast, #rs_none { display: none !important; }
    #data_box, #page_viewbox    { float: none !important; width: auto !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
    .ra_sheet                   { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
    .ra_print_only              { display: inline; }
    .ra_sheet .form_input1      { display: none !important; }       /* 입력칸 대신 옮겨 적은 글자(.ra_pv)를 찍는다 */
    .ra_pv                      { display: block; min-height: 20px; padding: 8px; color: #222; font-size: 13px; line-height: 1.5; text-align: left; white-space: pre-wrap; word-break: break-all; }
    .ra_slot .ra_pv             { padding: 4px 2px; }
    .ra_sheet.ra_nm_sheet       { display: block; }                 /* 아차사고 보고서 : 인쇄 때만 양식이 보인다 */
    .ra_sheet.ra_nm_sheet .ra_sheet_title { margin-bottom: 14px; font-size: 22px; letter-spacing: 6px; }
    .ra_score                   { display: none; }                  /* 점수 칸은 "가능성 3 × 중대성 3 = 9점" 글자로 */
    .ra_score_pv                { padding: 8px 2px; }
    .ra_sheet input[type="date"] + .ra_pv { white-space: nowrap; word-break: normal; }   /* 날짜가 두 줄로 갈라지지 않게 */
    .ra_slot_img                { height: 62mm; }
    .ra_slot_empty              { height: 62mm; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ---------- 7. 로그인 그림 칸 색 ----------
   경기도 로그인은 그림(login_main.png)의 바탕색 #fdf7e3 에 맞춰 칸을 칠했다.
   위험성평가는 그림 대신 화면 안 SVG 를 쓰므로 밝은 하늘색 바탕으로 바꾼다. */
.ra_login_side      { background-color: #eef4f8; }
.ra_login_side .lg_brand { text-decoration: none; }
.ra_art             { width: 100%; max-width: 760px; height: auto; }