/***********************************************
 * 파일명   : common.css
 * 파일위치 : src/main/webapp/css/comm/
 * 파일설명 : 사용자·관리자 화면 공통 컴포넌트 스타일 (레이아웃 5종 include: bsn·home·homePopup·popJoin·mng)
 *           — js/comm/common.js 공통 컴포넌트와 짝. 수정 시 레이아웃의 ?ver= 갱신
 *
 *  구성:
 *   - 레이어 알림(layerAlert): .layer_alert_dim / .layer_alert / .layer_alert_tit / .layer_alert_msg / .layer_alert_btns
 *     버튼은 기존 화면 버튼 클래스를 그대로 쓴다 — btn_style2(확인·저장·등록), btn_style(닫기·취소·목록)
 *     (btn_style·btn_style2 정의: css/home/ipjs.css, css/mng/manager.css)
 *   - 버튼 잠금(lockButton): .btn_locked(잠긴 버튼) / .btn_lock_live(낭독용 숨김 영역) / .loading_msg(blockUI 처리중 문구)
 *   - 입력 상태 표시: .input_readonly(입력 불가 회색) / .chk_circle(완료 ✓ 동그라미) / .sr_only(낭독 전용 문구)
 *     / .pw_toggle(비밀번호 보기 버튼, ui.js addPasswordToggle) / .input_reject_msg(입력 문자 제한 안내, validate.js restrictInput)
 *     / .pw_checklist(비밀번호 조건 실시간 표시, validate.js addPasswordChecklist)
 *   - 파일 끌어다 놓기 칸: .doc_zone(.dragover·.has_file) / .doc_zone_icon / .doc_zone_tit / .doc_zone_hint / .doc_zone_sub / .doc_zone_file / .doc_zone_del
 *
 * 수정일자      수정자        수정 내용
 * 26.10.26     snugness        common.css 신규 생성 — 공통 레이어 알림(layerAlert) 스타일
 * 26.10.26     snugness        버튼 잠금(lockButton) 스타일 구역 추가(파일 끝)
 * 26.10.26     snugness        입력 상태 표시(.input_readonly·.chk_circle·.sr_only·.pw_toggle) 구역 추가(파일 끝)
 * 26.10.29     snugness        비밀번호 조건 실시간 표시(.pw_checklist) 추가
 * 26.11.02     snugness        파일 끌어다 놓기 칸 첨부 완료 초록 표시(.has_file, 마스킹 남으면 .mask_todo 제외)
 * 26.11.02     snugness        파일 끌어다 놓기 칸(.doc_zone) 추가(파일 끝) — 회원가입·소속기관 인증 재직증명서, 경력산정 서류 재사용
 * 26.11.02     snugness        끌어다 놓기 칸 파일명 내용 확인 링크(.doc_zone_view)
 * 26.11.02     snugness        레이어 안 표(.layer_alert_wide·.layer_alert_content)
 * 26.11.05     snugness        날짜 입력(.inp_cal_btn·.inp_invalid)·입력칸 지우기 단추(.inp_clear_wrap) 추가(파일 끝) — js/comm/ui.js dateInputKo·clearableInput
 * 26.11.02     snugness        목록 행 전체 클릭 표시(.row_clickable)
 * 26.11.02     snugness        미인증 표시(.chk_circle_no, 빨간 동그라미 ✕)
 * 26.11.02     snugness        조건부 필요 항목 표기(.label_cond)
 * 26.11.06     snugness        여러 파일 첨부 목록(.md_list·.md_item 칩·.md_ico·.md_size·.md_none·.md_has·.md_count, js/comm/multiDrop.js), 제목 아래선 빼기(.subtitle.st_noline)
 * 26.11.06     snugness        사용자 화면 말풍선(.md_tipwrap·.md_tip·.md_tipblock, ui.js tipInit), 보안문자 줄(.cap_row·.cap_img·.cap_btn·.cap_help),
 *                              필수 입력 전 잠긴 버튼(.btn_gate, ui.js gateButton)
 ***********************************************/

/* ===== 레이어 알림 (layerAlert), 26.10.26, Edited by snugness ===== */
.layer_alert_dim {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.45);
	z-index: 100000;		/* winPopOpen 레이어(99999) 위 */
	display: flex; align-items: center; justify-content: center;
}
.layer_alert {
	box-sizing: border-box;
	width: 420px; max-width: calc(100% - 32px); max-height: calc(100% - 32px);
	overflow: auto;
	background: rgba(255, 255, 255, 0.93);	/* 완전 흰색 대신 약간 투명 */
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	padding: 20px 22px 16px;
	font-size: 15px; line-height: 1.7; color: #222; text-align: left;
}
.layer_alert_tit { margin: 0 0 10px; font-size: 17px; font-weight: bold; color: #1f5fa8; }
.layer_alert_warn  .layer_alert_tit { color: #a35f00; }
.layer_alert_error .layer_alert_tit { color: #c0392b; }
.layer_alert_msg { white-space: pre-line; word-break: keep-all; }
.layer_alert_btns { margin-top: 18px; text-align: center; }
/* 표를 넣는 레이어(layerAlert content·wide) — 결과가 많으면 표만 스크롤, 26.11.02, Edited by snugness */
.layer_alert_wide { width: 640px; }
.layer_alert:focus { outline: none; }
.layer_alert_content { margin-top: 10px; max-height: 50vh; overflow: auto; }
.layer_alert_content table { width: 100%; }

/* 목록 행 전체 클릭(ui.js rowClickable): 마우스 강조, 행 안 버튼에 키보드 초점이 있어도 같은 강조, 26.11.02, Edited by snugness */
.row_clickable { cursor: pointer; }
.row_clickable:hover > td, .row_clickable:focus-within > td { background-color: #eaf3fb !important; }
/* 관리자 manager.css 의 btn_style 하단 여백(padding-bottom 30px)을 레이어 안에서는 사용자 화면과 같게 맞춤 */
.layer_alert_btns .btn_style,
.layer_alert_btns .btn_style2 { margin: 0 3px; padding: 0 15px; }

/* ===== 버튼 잠금 (lockButton), 26.10.26, Edited by snugness ===== */
/* 색만으로 알리지 않도록 흐림 + 진행 커서 (+ busyText 문구) — KWCAG 5.4.1(p.11) */
.btn_locked { opacity: 0.6; cursor: progress !important; }
/* 화면에는 숨기고 화면낭독기에는 읽히는 상태 알림 영역(role=status) */
.btn_lock_live {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* blockUI(loading()) 처리중 문구 — 기본 'Please wait...'(h1)을 한국어 문단으로 바꾼 것 */
.blockMsg .loading_msg { margin: 0; font-size: 16px; font-weight: bold; line-height: 1.6; }

/* ===== 입력 상태 표시, 26.10.26, Edited by snugness ===== */
/* 입력 불가(읽기 전용) 회색 — 사용자 화면용. 관리자 manager.css 의 .input_disable 은 그대로 두고 이름을 따로 둠 */
.input_readonly { background: #f2f2f2 !important; color: #555; border-color: #d5d5d5 !important; cursor: default; }
/* 완료 표시(동그라미 ✓) — 의미는 옆의 .sr_only 문구로 보조기기에 알린다(색만으로 알리지 않음, KWCAG 5.4.1 p.11) */
.chk_circle {
	display: inline-block; width: 18px; height: 18px; line-height: 18px; margin: 0 4px 0 6px;
	border-radius: 50%; background: #1b7f3b; color: #fff;
	font-size: 11px; font-weight: bold; text-align: center; vertical-align: middle;
}
.chk_circle.chk_circle_no { background: #d1242f; }
/* 필수는 아니지만 어떤 일을 하려면 필요한 항목: 라벨 아래 글자로 조건을 적음(색만으로 구분하지 않음, KWCAG 5.4.1), 26.11.02, Edited by snugness */
.label_cond { display: block; margin-top: 2px; font-size: 12px; font-weight: normal; color: #1f5fa8; }
/* 비밀번호 보기 버튼(addPasswordToggle) — 입력칸(.input_new_mailid 높이 34px) 옆에 같은 높이 */
.pw_toggle {
	display: inline-block; width: 34px; height: 34px; margin-left: 4px; padding: 0;
	border: 1px solid #ccc; background: #fff; color: #555; cursor: pointer; vertical-align: middle;
}
.pw_toggle svg { display: block; margin: 0 auto; }
.pw_toggle[aria-pressed="true"] { background: #eef3fb; color: #1f5fa8; border-color: #1f5fa8; }
/* 입력 문자 제한 안내(validate.js restrictInput) — 칸 아래 잠시 표시, 색 + 문구로 알림 */
.input_reject_msg { display: none; margin: 4px 0 0; color: #c0392b; font-size: 13px; font-weight: bold; }
/* 비밀번호 조건 실시간 표시(validate.js addPasswordChecklist) — 미충족 회색, 충족 초록 ✓ */
.pw_checklist { list-style: none; margin: 6px 0 2px; padding: 0; }
.pw_checklist li {
	display: inline-block; margin: 0 6px 4px 0; padding: 2px 10px 2px 6px;
	border: 1px solid #d5d5d5; border-radius: 12px; background: #f5f5f5; color: #5f5f5f; font-size: 12px;	/* 명도 대비 4.5:1 이상(KWCAG 5.4.3) */
}
.pw_checklist .pw_chk_icon {
	display: inline-block; width: 14px; height: 14px; line-height: 14px; margin-right: 4px;
	border-radius: 50%; background: #c8c8c8; color: #fff; font-size: 9px; font-weight: bold; text-align: center; vertical-align: middle;
}
.pw_checklist li.ok { border-color: #1b7f3b; background: #eaf6ee; color: #1b7f3b; font-weight: bold; }
.pw_checklist li.ok .pw_chk_icon { background: #1b7f3b; }
/* 화면에는 숨기고 화면낭독기에는 읽히는 문구 */
.sr_only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== 파일 끌어다 놓기 칸(.doc_zone), 26.11.02, Edited by snugness =====
   칸 전체가 끌어다 놓기·클릭 영역(role=button, tabindex=0). 마스킹 모듈 참고 화면(careerGrade.jsp)과 같은 구조:
   안내(.doc_zone_hint) / 첨부 후 파일명 줄(.doc_zone_file: 파일명 + [마스킹] 알약 .doc_zone_mask(docMask.css) + 취소 .doc_zone_del).
   .ask_table td div(ipjs.css)의 아래 선·여백이 칸을 덮어쓰지 않도록 표 안 선택자를 함께 지정 */
.doc_zone, .ask_table td div.doc_zone { border: 2px dashed #b9c4d6; border-radius: 8px; background: #f8fafd; padding: 14px; text-align: center; cursor: pointer; line-height: 1.6; }
.doc_zone:hover, .doc_zone:focus, .doc_zone.dragover,
.ask_table td div.doc_zone:hover, .ask_table td div.doc_zone:focus, .ask_table td div.doc_zone.dragover { border-color: #2f80c4; background: #eaf3fb; outline: none; }
.doc_zone.has_file, .ask_table td div.doc_zone.has_file { border-style: solid; }
/* 첨부 완료: 초록(색은 docMask.css 마스킹 완료와 같음). 마스킹이 남은 서류(.mask_todo)는 초록으로 바꾸지 않는다. 파일명·마스킹 문구로도 알 수 있음(KWCAG 5.4.1), 26.11.02 */
.doc_zone.has_file:not(.mask_todo), .ask_table td div.doc_zone.has_file:not(.mask_todo) { border-color: #1a7f37; background: #f1faf4; }
.doc_zone.has_file:not(.mask_todo) .doc_zone_name, .doc_zone.has_file:not(.mask_todo) #employState { color: #1a7f37; }
.doc_zone.has_file:focus, .ask_table td div.doc_zone.has_file:focus { box-shadow: 0 0 0 2px #a7d7b5; }
.doc_zone.has_file.dragover, .ask_table td div.doc_zone.has_file.dragover { border-color: #2f80c4; background: #eaf3fb; }
.doc_zone.has_file .doc_zone_hint { display: none; }
.doc_zone_icon { width: 28px; height: 28px; fill: none; stroke: #5b6b82; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doc_zone_tit { display: block; margin: 4px 0; }
.doc_zone_hint { margin: 0; }
.doc_zone_sub { margin: 4px 0 0; color: #666; font-size: 12px; }
.doc_zone_file { display: none; margin: 4px 0 0; font-weight: bold; word-break: break-all; }
.doc_zone.has_file .doc_zone_file { display: block; }
.doc_zone_file .btn_blue_write { margin-left: 8px; }
.doc_zone_del { margin-left: 8px; width: 22px; height: 22px; padding: 0; border: 1px solid #999; border-radius: 50%; background: #fff; color: #555; font-size: 12px; line-height: 20px; cursor: pointer; vertical-align: middle; }
.doc_zone_del:hover, .doc_zone_del:focus { border-color: #d1242f; color: #d1242f; }
.doc_zone_view { text-decoration: underline; cursor: pointer; }
/* 여러 파일 첨부 목록(js/comm/multiDrop.js) — 첨부한 파일은 칸 안에 칩(문서 아이콘 + 파일명 + 크기 + 동그라미 ✕)으로,
   재직 인증 칸(굵은 초록 파일명·둥근 단추)과 같은 느낌. 개수는 칸 바깥 오른쪽 아래(.md_count), 26.11.06, Edited by snugness */
.md_list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* 칸 안은 한 줄에 파일 하나씩 왼쪽 정렬(이름 길이에 따라 줄이 흔들리지 않게), 긴 이름은 말줄임 + title, 26.11.06 */
.doc_zone .md_list { flex-direction: column; align-items: flex-start; margin: 10px 0 0; text-align: left; cursor: default; }
.md_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px; }
/* 파일 종류 아이콘(multiDrop.js extBadge — images/home/fileicon/*.png 설치 프로그램 연결 아이콘, 없으면 자체 그림), 26.11.06 */
.md_ext { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 22px; }
.md_ext img { display: block; width: 18px; height: 18px; }
.md_ext svg { display: block; }
.md_clip { width: 18px; height: 18px; fill: none; stroke: #5b6b82; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
/* 게시글 머리 줄(Q&A): 작성자 / 등록 시각 (수정 : 시각) 오른쪽 정렬 */
.qna_meta { margin-top: 6px; text-align: right; color: #666; font-size: 13px; font-weight: normal; }
.qna_meta_sep { margin: 0 6px; color: #bbb; }
/* 작성자 '전문위원' 표시(WEB-INF/tags/home/writer.tag) — 사람 아이콘 + 글자, 관리자에게만 말풍선(성명·아이디), 26.11.06 */
.staff_badge { display: inline-flex; align-items: center; gap: 3px; padding: 0 8px 0 6px; border: 1px solid #b9cbe3; border-radius: 10px; background: #eef4fb; color: #305C92; font-size: 12px; font-weight: bold; line-height: 20px; vertical-align: middle; white-space: nowrap; }
.staff_ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Q&A 목록 답변 상태(글자로도 구분) */
.qna_st { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: bold; line-height: 20px; white-space: nowrap; }
.qna_st_ok { background: #e6f4ea; color: #1a7f37; border: 1px solid #9fd3b0; }
.qna_st_wait { background: #f1f3f5; color: #5b6b82; border: 1px solid #d0d6de; }
/* Q&A 목록 표(bbsList.jsp Q&A) — 검색 오른쪽 위, 행 전체 클릭(.row_clickable), 답변 완료 행 연한 초록, 26.11.06 */
.qna_srch { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin: 12px 0 8px; }
.qna_srch_sel { height: 32px; padding: 0 6px; border: 1px solid #ccc; font-size: 13px; }
.qna_srch_inp { width: 220px; max-width: 100%; height: 32px; padding: 0 8px; border: 1px solid #ccc; box-sizing: border-box; }
.qna_table { width: 100%; border-collapse: collapse; border-top: 1px solid #29b0d1; table-layout: fixed; }
.qna_table th { padding: 10px 4px; border-bottom: 1px solid #999; background: #f8f9fb; font-size: 13px; }
.qna_table td { padding: 12px 6px; border-bottom: 1px solid #ddd; font-size: 14px; vertical-align: middle; }
.qna_table td.c { text-align: center; font-size: 13px; color: #555; }
.qna_tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; }
.qna_tit a { color: #222; }
/* 답변 완료 행 색은 쓰지 않음(26.11.09 사용자 결정 — 답변 칸 배지로만 구분) */
.qna_empty { padding: 30px 0 !important; text-align: center; color: #888; }
/* 목록 아래 줄: 왼쪽 빈칸 | 쪽 이동(가운데) | [글쓰기](오른쪽) — 양옆 같은 폭이라 쪽 이동이 가운데 유지, 26.11.09 */
.qna_foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.qna_foot .pagenation_wrap { margin: 0; }
.qna_foot_btn { justify-self: end; display: flex; gap: 4px; }
/* 편집기 아래 글자 수(넘으면 빨강), 26.11.09 */
.qna_cnt { margin-top: 4px; text-align: right; font-size: 13px; color: #666; }
.qna_cnt.over { color: #cf412a; font-weight: bold; }
.qna_st_info { background: #eef4fb; color: #305C92; border: 1px solid #b9cbe3; }
/* Q&A 조회 표(WEB-INF/tags/home/qnaPost.tag) — 입력 화면(.qna_form)과 같은 칸·색조(묶음 #f3f5f8 · 항목명 #f8f9fb · 줄 #e3e8ef · 묶음 사이 #ddd), 26.11.06·26.11.09 */
.qna_view { width: 100%; border-collapse: collapse; border-top: 1px solid #29b0d1; table-layout: fixed; margin-bottom: 4px; }
.qna_view col.qna_c_grp { width: 90px; }
.qna_view col.qna_c_lbl { width: 110px; }
.qna_view col.qna_c_dt { width: auto; }	/* 작성자 값·작성일시 값 칸이 남은 폭을 반씩(작성자 칸만 길어 보이던 것 정리), 26.11.09 */
.qna_view td, .qna_view th { border-bottom: 1px solid #e3e8ef; padding: 10px 12px; font-size: 14px; vertical-align: middle; text-align: left; }
.qna_view .qna_grp { border-right: 1px solid #ddd; border-bottom-color: #ddd; background: #f3f5f8; color: #4f5d6b; font-size: 14px; font-weight: bold; text-align: center; }
.qna_view .qna_lbl { background: #f8f9fb; font-size: 13px; font-weight: bold; color: #333; }
.qna_view .qna_v_tit { font-weight: bold; word-break: break-all; }
.qna_view .qna_v_who, .qna_view .qna_v_dt { font-size: 13px; color: #555; }
.qna_v_up { font-size: 12px; color: #888; }
.qna_view .qna_v_cont { padding: 14px 12px; line-height: 1.7; word-break: break-all; }
.qna_v_files_in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qna_v_btns { margin-left: auto; display: inline-flex; gap: 4px; }
.qna_v_btns:empty { display: none; }
.qna_view tbody.qna_post > tr:last-child > td, .qna_view tbody.qna_post > tr:last-child > th { border-bottom-color: #ddd; }
/* 상세는 위 게시판 틀(.board_pac.ipline2)이 윗선을 그리므로 표 윗선 생략(입력 화면과 같은 한 줄) */
.board_pac .qna_view { border-top: 0; }
/* 답변 표: 질문 표와 사이를 띄우고 자체 윗선(입력 표 윗선과 같은 청록 1px), 26.11.09 */
.board_pac .qna_view.qna_view_ans { margin-top: 24px; border-top: 1px solid #29b0d1; }
.qna_view_ref { margin-bottom: 16px; }
.qna_view_ref .qna_v_cont_in { max-height: 240px; overflow: auto; }
.qna_ro { font-weight: bold; }
/* Q&A 작성·수정·답변 입력 표 — 왼쪽 묶음 이름(질문/답변) + 항목 줄(ipjs.css .b_write_unit 덮음) */
.qna_form { display: flex; border-bottom: 1px solid #ddd; }
.qna_form_grp { flex: none; box-sizing: border-box; width: 90px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #ddd; background: #f3f5f8; color: #4f5d6b; font-size: 14px; font-weight: bold; }
.qna_form_body { flex: 1; min-width: 0; }
.qna_form_body .b_write_unit { display: flex; padding: 0; border-bottom: 1px solid #e3e8ef; }
.qna_form_body .b_write_unit:last-child { border-bottom: 0; }
.qna_form_body .b_write_unit > div:nth-child(1) { flex: none; box-sizing: border-box; display: flex; align-items: center; width: 110px; margin: 0; padding: 12px; background: #f8f9fb; font-size: 13px; font-weight: bold; }
.qna_form_body .b_write_unit > div:nth-child(2) { flex: 1; min-width: 0; box-sizing: border-box; width: auto; padding: 10px 12px; }
/* 제목칸·편집기·첨부 칸 오른쪽 끝 맞춤: 모두 칸 폭 100%·테두리 포함(제목칸 기본 99%, 편집기 바깥 틀은 늘 100%), 26.11.09 */
.qna_form_body .input_style_title2 { width: 100%; box-sizing: border-box; }
.qna_form_body iframe { display: block; }
/* Q&A 상세 — 질문 영역(흰 바탕) / 답변 영역(구분 막대 + 연한 파란 바탕) */
.qna_q_area { padding-bottom: 6px; }
.qna_q_btns { margin: 10px 0 4px; text-align: right; }
.qna_ans_bar { margin: 0 0 4px; padding: 8px 0 8px 10px; border-left: 4px solid #305C92; background: #e9f0f9; color: #305C92; font-size: 15px; font-weight: bold; }
.qna_answers { margin-top: 20px; padding: 0 0 14px; border-top: 2px solid #305C92; background: #f4f8fd; }
.qna_answers > .qna_notice, .qna_answers > .qna_answer, .qna_answers > .qna_answer_btns { margin-left: 14px; margin-right: 14px; }
.qna_answers .qna_answer { background: #fff; }
/* Q&A 상세 답변 상자·답변 작성 화면 질문 상자 */
.qna_answer, .qna_question_box { margin: 12px 0 0; padding: 14px 16px; border: 1px solid #cfdcec; border-left: 4px solid #305C92; border-radius: 6px; background: #f7faff; }
.qna_question_box { margin: 0 0 16px; border-left-color: #8a96a3; background: #fafbfc; }
.qna_answer_head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #e3e8ef; }
.qna_answer_head .qna_meta { margin-top: 0; }
.qna_answer_tit { color: #305C92; font-size: 15px; }
.qna_question_box .qna_answer_tit { color: #4f5d6b; }
.qna_answer .board_letter { min-height: 0; padding: 12px 0; border: 0; }
.qna_answer_files { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.qna_answer_btns { margin-top: 10px; text-align: right; }
.qna_notice { margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; background: #f5f7fa; color: #5b6b82; font-size: 13px; }
.qna_q_title { padding: 10px 0 4px; font-weight: bold; font-size: 15px; }
.qna_q_cont { max-height: 240px; overflow: auto; padding: 4px 0 8px; font-size: 14px; line-height: 1.6; }

/* 칸 안 파일 목록·단추 위에서는 칸 안내 말풍선을 띄우지 않음(ui.js) */
.md_tipblock.md_tip_hide > .md_tip { display: none !important; }
.doc_zone .md_list:empty { display: none; }
.md_item { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid #9fd3b0; border-radius: 14px; background: #fff; color: #1a7f37; font-size: 13px; font-weight: bold; line-height: 20px; word-break: break-all; }
.md_list.md_view .md_item { padding-right: 10px; }
.md_ico { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md_name a { color: inherit; text-decoration: underline; cursor: pointer; }
.md_size { font-weight: normal; color: #5b6b82; font-size: 12px; }
.md_item .doc_zone_del { margin-left: 2px; width: 20px; height: 20px; line-height: 18px; }
.md_none { color: #888; font-size: 13px; }
/* 파일이 있으면 칸 테두리를 초록 실선으로(안내 글자는 그대로 — 더 끌어다 놓을 수 있음) */
.doc_zone.md_has { border-style: solid; border-color: #1a7f37; background: #f1faf4; }
.md_count { width: 99%; margin: 4px 0 0; color: #666; font-size: 12px; text-align: right; }

/* 마이페이지 화면 제목(.subtitle, ipjs.css) — 아래에 소제목 없이 바로 표가 오면 제목 아래선을 빼고 표 윗선만 쓴다(DG 10.8-2), 26.11.06 */
.subtitle.st_noline { border-bottom: 0; }

/* 안내 말풍선(data-tip) — 사용자 화면 공통(js/comm/ui.js tipInit). 관리자 화면(mng_admin.css)과 같은 모양, 색은 사용자 화면 파란색(#305C92, 상단 띠와 같음 — 관리자는 mng_admin.css 청록이 덮음), 26.11.06, Edited by snugness */
.md_tipwrap { position: relative; display: inline-block; }
.md_tipwrap.md_tipblock { display: block; }
.md_tip { display: none; position: absolute; left: 0; right: auto; bottom: calc(100% + 6px); z-index: 50; width: max-content; max-width: 360px; padding: 6px 10px; border-radius: 6px; background: #305C92; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left; white-space: pre-line; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
/* 칸형 말풍선(마우스 위치 위, ui.js): 글이 길어 여백을 넉넉히, 마우스 아래로는 끼어들지 않게, 26.11.06 */
.md_tipblock > .md_tip { padding: 10px 14px; line-height: 1.7; max-width: 420px; pointer-events: none; }
.md_tipwrap.md_tip_r > .md_tip { left: auto; right: 0; }
.md_tipwrap:hover > .md_tip, .md_tipwrap:focus-visible > .md_tip, .md_tipwrap:has(:focus-visible) > .md_tip { display: block; }

.md_tip:empty { display: none !important; }

/* 필수 입력 전 잠긴 버튼(ui.js gateButton) — 흐림 + 불가 커서, 마우스는 감싼 칸이 받아 말풍선(빠진 항목) 표시(관리자 승인 단추와 같은 방식), 26.11.06 */
.btn_gate:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
.md_tipwrap:has(> .btn_gate:disabled) { cursor: not-allowed; }

/* 보안문자(자동입력 방지, CaptchaUtil) 줄 — 그림·[새로고침]·[음성 듣기] / 입력칸·안내. 좁은 창에서는 다음 줄로 넘김, 26.11.06, Edited by snugness */
.cap_row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.cap_img { width: 160px; height: 50px; border: 1px solid #ccc; vertical-align: middle; }
.cap_btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cap_btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cap_help { color: #666; font-size: 12px; }

/* ===== 날짜 입력·입력칸 지우기 단추 (js/comm/ui.js dateInputKo·clearableInput), 사용자·관리자 공통, 26.11.05 ===== */
.inp_clear_wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.inp_clear_wrap > input { box-sizing: border-box; padding-right: 22px; }
.inp_clear_wrap.is_date > input { width: 112px; }
.inp_clear_wrap.is_full { display: block; width: 100%; }
.inp_clear_wrap.is_full > input { width: 100%; }
.inp_clear_btn { position: absolute; top: 50%; right: 4px; width: 16px; height: 16px; margin-top: -8px; padding: 0; border: 0; border-radius: 50%; background: #c4ccd6; color: #fff; font-size: 9px; line-height: 16px; text-align: center; cursor: pointer; }
.inp_clear_btn:hover, .inp_clear_btn:focus-visible { background: #6b7f84; }
/* 달력 단추: 작은 달력 그림(테두리 안 단추) */
.inp_cal_btn { width: 26px; height: 26px; margin-left: 3px; padding: 0; border: 1px solid #c4ccd6; border-radius: 3px; vertical-align: middle; cursor: pointer; font-size: 0; color: transparent;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5' fill='none' stroke='%234a6b74' stroke-width='1.2'/%3E%3Cpath d='M2 6.5h12M5 1.5v3M11 1.5v3' stroke='%234a6b74' stroke-width='1.2'/%3E%3Crect x='4.5' y='8.5' width='2' height='2' fill='%234a6b74'/%3E%3C/svg%3E") center / 15px 15px no-repeat; }
.inp_cal_btn:hover, .inp_cal_btn:focus-visible { border-color: #4a90a0; background-color: #e3f1f4; }
.inp_invalid { border-color: #d1242f !important; background-color: #fff5f5 !important; }