/**
 * @author parkyk
 * @since 2026-03-13
 * @description 공통 CSS (모든 프로젝트 공유)
 *   - 라이브러리 의존 없는 순수 공통 스타일만 포함
 *   - 프로젝트별 색상/테마/라이브러리 override는 프로젝트 CSS에서 정의
 *
 * @modified 2026-03-18 parkyk - 카테고리별 정렬, 프로젝트별 항목 분리
 * @modified 2026-03-19 parkyk - _button 색상 변형 추가 (_red/_green/_yellow/_orange/_gray)
 */

/******************/
/* 리셋/기본 */
/******************/
a {
	text-decoration-line: none;
}
/******************/
/* 텍스트 */
/******************/
._text_sub { color: #6b7280; }
._text_primary { color: #0d6efd; }
._text_secondary { color: #6c757d; }
._text_success { color: #198754; }
._text_danger { color: #dc3545; }
._text_warning { color: #ffc107; }
._text_info { color: #0dcaf0; }
._blockquote { border-inline-start: 3px solid #adb5bd; padding: 0.5rem 0.75rem; background-color: #f1f3f5; }
/* 스피너 */
._spinner {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border: 0.25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: _spin 0.75s linear infinite;
}
@keyframes _spin { to { transform: rotate(360deg); } }
/* JS 플래시 메시지 */
._text_flash {
	position: absolute;
	display: inline-block;/* absolute 이지만 유지 */
	background-color: #fff3cd;
	color: #664d03;
	padding: 6px 12px;
	border-radius: 4px;
	border: 1px solid #ffecb5;
	z-index: 99999;
}

/******************/
/* 폼/필드 */
/******************/
/* text, password, number, date, textarea 용 */
._input {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0.125em 0.375em;
	line-height: 1.5;
	outline: none;
	background-color: #fff;
}
select._input {
	padding: 0.125em 0.25em 0.1875em 0.25em;
}
._input:focus {
	border-color: #86b7fe;
}
._input:disabled,
._input.disabled {
	background-color: #eee;
	cursor: not-allowed;
}
._input:read-only:not(select, [type="checkbox"], [type="radio"]),
._input.readonly {
	background-color: #f5f5f5;
	cursor: default;
}
/* 필수 입력 레이블 */
._required::after {
	content: ' *';
	color: #dc2626;
	font-weight: 600;
}
/* 필수 입력 필드 — 왼쪽 빨간 라인 (box-shadow로 레이아웃 영향 없음) */
._input.required {
	background-image: linear-gradient(#f59e0b, #f59e0b);
	background-size: 4px 4px;
	background-position: 0 0;
	background-repeat: no-repeat;
}
/* 유효성 실패 */
._input._invalid {
	border-color: #f87171;
	background-color: #fff5f5;
}
._input._invalid:focus {
	border-color: #dc2626;
}

/******************/
/* 버튼 */
/******************/
/* 브라우저 기본 버튼 스타일 제거 */
._btn_bare {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
/* JS 내부 버튼 참조용 */
._button {
	display: inline-block;
	cursor: pointer;
	border: 1px solid transparent;
	background-color: #bfdbfe;
	color: #333;
	line-height: 1.5;
	padding: 0.125em 0.625em;
	border-radius: 4px;
	text-decoration: none;
}
._button:hover {
	opacity: 0.85;
}
._button[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}
/* 색상 변형 — hover/disabled 는 기본 _button 에서 상속 */
._button._red    { background-color: #fecaca; }
._button._rose   { background-color: #fecdd3; }
._button._pink   { background-color: #fbcfe8; }
._button._orange { background-color: #fed7aa; }
._button._amber  { background-color: #fde68a; }
._button._yellow { background-color: #fef08a; }
._button._lime   { background-color: #d9f99d; }
._button._green  { background-color: #bbf7d0; }
._button._teal   { background-color: #99f6e4; }
._button._cyan   { background-color: #a5f3fc; }
._button._sky    { background-color: #bae6fd; }
._button._indigo { background-color: #c7d2fe; }
._button._purple { background-color: #e9d5ff; }
._button._stone  { background-color: #e7d5c0; }
._button._gray   { background-color: #e5e7eb; }
._button._white  { background-color: #f8f9fa; }
/* 역할 기반 alias — 의미 중심으로 사용 */
._button._primary   { background-color: #bfdbfe; }
._button._secondary { background-color: #e5e7eb; }
._button._success   { background-color: #bbf7d0; }
._button._danger    { background-color: #fecaca; }
._button._warning   { background-color: #fef08a; }
._button._info      { background-color: #a5f3fc; }
/* 액션 기반 alias */
._button._search { background-color: #bfdbfe; }
._button._new    { background-color: #bfdbfe; }
._button._save   { background-color: #bbf7d0; }
._button._ok     { background-color: #bfdbfe; }
._button._delete { background-color: #fecaca; }
._button._cancel { background-color: #e5e7eb; }
._button._close  { background-color: #e5e7eb; }
._button._reset  { background-color: #fef08a; }
._button._excel  { background-color: #d9f99d; }
._button._down   { background-color: #d9f99d; }
._button._help   { background-color: #a5f3fc; }

/******************/
/* 테이블 */
/******************/
/* JS 내부 테이블 참조용 */
._table {
	border-collapse: collapse;
	width: 100%;
}
._table th,
._table td {
	padding: 4px 8px;
	border: 1px solid #dee2e6;
}
._table th {
	background-color: #f0f0f06e;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
}
._table tbody tr:hover {
	background-color: #f0f4ff;
}

/******************/
/* hover 팝업 (_hoverpop) — hover 시 하위 요소 표시. _dropdown + _tooltip 통합 */
/******************/
._hoverpop {
	display: inline-block;
	position: relative;
}
._hoverpop ._hoverpop_body {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 91;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.5em;
	min-width: 7em;
	max-height: 21em;
	overflow: auto;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
._hoverpop:hover ._hoverpop_body {
	display: block;
}
/* 지연 — 보일 때 0.2초, 사라질 때 0.5초 지연 */
._hoverpop._delay ._hoverpop_body {
	display: block;
	visibility: hidden;
	transition: visibility 0s 0.5s;
}
._hoverpop._delay:hover ._hoverpop_body {
	visibility: visible;
	transition-delay: 0.2s;
}
/* CSS only 간단 툴팁 (data 속성) */
[data-tooltip] {
	position: relative;
}
[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
	font-size: 0.85em;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s, visibility 0.15s;
}
[data-tooltip]:hover::after {
	opacity: 0.9;
	visibility: visible;
}

/******************/
/* 다이얼로그 (pop.js — jQuery UI Dialog override, ._dialog 전용) */
/******************/
._dialog.ui-dialog {
	font-family: inherit;
	border: 1px solid #ddd;
	border-radius: 0;
	padding: 0;
	box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
	max-width: 90vw;
	background-color: white;
}
/* jQuery UI 기본 테마가 .ui-widget input/select/textarea/button 에 Arial 을 강제 → 다이얼로그 폼요소가 앱 폰트 무시.
   콘텐츠 영역(.ui-dialog-content)으로 한정해 앱 폰트만 상속 복구(타이틀바 닫기 버튼 제외).
   font-size 는 손대지 않음(버튼 클래스 크기와 충돌 방지) — 개별 확대는 단일 클래스라 important(!text-lg) 로. */
._dialog .ui-dialog-content input,
._dialog .ui-dialog-content select,
._dialog .ui-dialog-content textarea,
._dialog .ui-dialog-content button {
	font-family: inherit;
}
._dialog .ui-dialog-titlebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.8rem;
	background: rgb(0, 0, 255, 0.07);
	border: none;
	border-bottom: 1px solid #eee;
	border-radius: 0;
	cursor: move;
	user-select: none;
}
._dialog .ui-dialog-title {
	font-weight: 600;
	font-size: 0.95rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	float: none;
	margin: 0;
	flex: 1;
}
._dialog .ui-dialog-titlebar-close {
	all: unset;
	cursor: pointer;
	opacity: 0.5;
	font-size: 0;
	line-height: 1;
	padding: 0.125rem 0.25rem;
	order: 1;
}
._dialog .ui-dialog-titlebar-close:hover { opacity: 1; }
._dialog .ui-dialog-titlebar-close * { display: none; }
._dialog .ui-dialog-titlebar-close::before { content: '\2715'; font-size: 1rem; }
._dialog .ui-dialog-content {
	padding: 1em;
	overflow: auto;
}
.ui-widget-overlay { background: transparent; }
._dialog_foot { display: flex; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; }
._dialog_foot ._confirm::before { content: '\2713\0020'; }
._dialog_foot ._close::before { content: '\2715\0020'; }
._dialog_alert .ui-dialog-content, ._dialog_confirm .ui-dialog-content { text-align: center; padding: 1.5rem; word-break: break-all; }
._dialog._dialog_alert .ui-dialog-titlebar { background: #fcf8e3; }
._dialog._dialog_confirm .ui-dialog-titlebar { background: #d4edda; }
._dialog, ._dialog input, ._dialog select, ._dialog textarea, ._dialog button { font-family: inherit; }

/* 토스트 (pop.toast) */
._toast-wrap {
	position: fixed;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
	max-width: 24rem;
}
._toast-wrap > * {
	pointer-events: auto;
}
._toast-wrap._toast-tl { top: 1rem; left: 1rem; align-items: flex-start; }
._toast-wrap._toast-tc { top: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }
._toast-wrap._toast-tr { top: 1rem; right: 1rem; align-items: flex-end; }
._toast-wrap._toast-cl { top: 50%; left: 1rem; transform: translateY(-50%); align-items: flex-start; }
._toast-wrap._toast-cc { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; }
._toast-wrap._toast-cr { top: 50%; right: 1rem; transform: translateY(-50%); align-items: flex-end; }
._toast-wrap._toast-bl { bottom: 1rem; left: 1rem; align-items: flex-start; }
._toast-wrap._toast-bc { bottom: 1rem; left: 50%; transform: translateX(-50%); align-items: center; }
._toast-wrap._toast-br { bottom: 1rem; right: 1rem; align-items: flex-end; }
._toast {
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	/* 연한 배경 + 짙은 글씨. 흰 글씨를 쓰면 배경이 어두워질 수밖에 없어(대비 4.5:1) 화면 위에서 무겁다.
	   뒤집으면 옅게 떠 있으면서 대비는 오히려 올라간다 — 색은 배경이 아니라 글자와 테두리가 낸다.
	   기본은 무채색: 성공\경고\오류가 아닌 안내에까지 색을 쓰면 색이 뜻을 잃는다 */
	color: #334155;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	box-shadow: 0 4px 12px rgba(0,0,0,.10);
	font-size: 0.9375rem;
	line-height: 1.5;
	position: relative;
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	transform: translateY(0.5rem);
	overflow-wrap: break-word;
}
._toast._toast-show { opacity: 1; transform: translateY(0); }
._toast._toast-hide-up { opacity: 0; transform: translateY(-0.5rem); }
._toast._toast-hide-down { opacity: 0; transform: translateY(0.5rem); }
._toast._toast-success { color: #0B7A44; background: #ECFDF3; border-color: #C3EAD5; }
._toast._toast-error   { color: #B93C42; background: #FDF5F5; border-color: #F3DADB; }
._toast._toast-warn    { color: #8F5A0A; background: #FFF8EB; border-color: #F0DFB8; }
._toast-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	opacity: .6;
	cursor: pointer;
}
._toast-close:hover { opacity: 1; }

/******************/
/* 리사이즈 핸들 (uu.resizable) */
/******************/
._resize_handle:hover,
._resize_handle._resize_active {
	background-color: #bfdbfe;
}

/******************/
/* 오버레이/로딩 */
/******************/
/* [구] ._loading 관련 스타일 — progressCover를 overlay 방식으로 대체하여 삭제 */

/* progressCover 스피너 지연 노출 — 커버는 즉시, 스피너는 0.5초 후 (짧은 요청에 깜빡임 방지) */
@keyframes _cover_spin_in { to { opacity: 1; } }

/* 화면 중앙 떠있는 박스. progressCover 위에 내용 표시, 팝업 진행률 등에 사용 */
._center_box {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;
	background: #fff;
	border-radius: 0.5rem;
	padding: 2rem;
	min-width: 20rem;
	max-width: 90vw;
	max-height: 80vh;
	overflow: auto;
	text-align: center;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}

/******************/
/* 포맷 (field-check.js 연동) */
/******************/
.r-year, .r-ym, .r-ymd, .r-hm, .r-hms, .r-ymdhm, .r-ymdhms,
.r-zipcode, .r-jumin, .r-bizno {
	text-align: center;
}
.r-number { text-align: right; }
.r-year, .r-ym, .r-ymd, .r-hm, .r-hms, .r-zipcode, .r-bizno { width: 9em; }
.r-ymdhm, .r-jumin { width: 10em; }
.r-ymdhms { width: 11em; }

/* 필드 검증 에러 토스트 (화면 중앙) */
.field-error-toast {
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	color: #dc3545;
	background: #fff5f5; /* NOSONAR 대비: 에러 강조 톤(의도된 디자인) */
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	border: 1px solid #f5c2c7;
	font-size: 0.95rem;
	animation: fieldErrorFade 3s ease-out forwards;
}
@keyframes fieldErrorFade {
	0%, 80% { opacity: 1; }
	100% { opacity: 0; }
}

/******************/
/* 기타 유틸 */
/******************/
._icon_close:before {
	content: '\2716';
	font-weight: 600;
}
._divider {
	border: none;
	border-top: 1px solid #dee2e6;
	margin: 0.75rem 0;
}
._pagination {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0.5rem 0;
}
._pagination ._page_item {
	display: inline-block;/* span 으로 쓸 경우 있어서 유지 */
	cursor: pointer;
	padding: 2px 8px;
	border: 1px solid transparent;
	border-radius: 3px;
	line-height: 1.5;
}
._pagination ._page_item:hover {
	background-color: #f0f4ff;
}
._pagination ._page_item.active {
	background-color: #bfdbfe;
	font-weight: 600;
}
._pagination ._page_item:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}
/* 화살표(처음/이전/다음/끝) — 유니코드 글리프(❮ ❯) 대신 SVG 아이콘. JS(makePagination)가 _page_nav + 방향클래스 부여.
   글리프는 font-size:0 으로 숨김(미로드 시 폴백). 색은 background-color:currentColor 라 _page_item 의 color 를 따라감(스킨은 color 만 바꾸면 됨). */
._pagination ._page_nav {
	font-size: 0;
}
._pagination ._page_nav::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 0.875rem;
	height: 0.875rem;
	background-color: currentColor;
	-webkit-mask: var(--arrow) center / contain no-repeat;
	mask: var(--arrow) center / contain no-repeat;
}
._pagination ._page_prev  { --arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%2018l-6-6%206-6'/%3E%3C/svg%3E"); }
._pagination ._page_next  { --arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018l6-6-6-6'/%3E%3C/svg%3E"); }
._pagination ._page_first { --arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%2018l-6-6%206-6%20M11%2018l-6-6%206-6'/%3E%3C/svg%3E"); }
._pagination ._page_last  { --arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2018l6-6-6-6%20M13%2018l6-6-6-6'/%3E%3C/svg%3E"); }
._chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background-color: #dbeafe;
	border-radius: 1em;
	padding: 2px 10px;
	font-size: 0.875em;
	/* 위 스타일로 수직정렬 되므로 삭제 line-height: 1.5; */
}


/****************************/
/* 반응형 네비게이션 */
/****************************/
/* 사용법:
   <nav class="_nav">
     <a class="_nav_brand" href="#">로고</a>
     <button class="_nav_toggle">☰</button>
     <div class="_nav_menu">
       <a class="_nav_item" href="#">메뉴1</a>
       <a class="_nav_item active" href="#">메뉴2</a>
       <div class="_nav_dropdown">
         <button class="_nav_item _nav_dropdown_toggle">메뉴3 ▾</button>
         <div class="_nav_dropdown_menu">
           <a class="_nav_item" href="#">서브1</a>
           <a class="_nav_item" href="#">서브2</a>
         </div>
       </div>
     </div>
   </nav>
*/
._nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0.5em 1em;
	background: #fff;
	border-bottom: 1px solid #dee2e6;
}
._nav_brand {
	font-weight: 700;
	font-size: 1.1em;
	margin-right: auto;
	text-decoration: none;
	color: inherit;
}
._nav_toggle {
	display: none;
	background: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.25em 0.5em;
	font-size: 1.2em;
	cursor: pointer;
	line-height: 1;
}
._nav_menu {
	display: flex;
	align-items: center;
	gap: 0.25em;
}
._nav_item {
	display: block;
	padding: 0.4em 0.75em;
	text-decoration: none;
	color: inherit;
	border-radius: 4px;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: none;
	font: inherit;
}
._nav_item:hover {
	background: #f0f4ff;
}
._nav_item.active {
	background: #dbeafe;
	font-weight: 600;
}
/* 드롭다운 */
._nav_dropdown {
	position: relative;
}
._nav_dropdown_menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 150px;
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	z-index: 1000;
	padding: 0.25em 0;
}
._nav_dropdown.open > ._nav_dropdown_menu {
	display: block;
}
._nav_dropdown_menu ._nav_item {
	border-radius: 0;
}
/* 모바일 (768px 이하) */
@media (max-width: 768px) {
	._nav_toggle {
		display: block;
	}
	._nav_menu {
		display: none;
		flex-direction: column;
		width: 100%;
		align-items: stretch;
		padding-top: 0.5em;
	}
	._nav_menu.open {
		display: flex;
	}
	._nav_item {
		padding: 0.5em 0.75em;
	}
	._nav_dropdown_menu {
		position: static;
		box-shadow: none;
		border: none;
		padding-left: 1em;
	}
}

/******************/
/* jQuery UI autocomplete override */
/* [삭제] ui-widget, ui-widget-content — autocomplete에만 필요하므로 ui-autocomplete에 통합 (2026-03-26) */
/* [삭제] ui-widget-header — datepicker 미사용으로 불필요 (2026-03-26) */
/* [삭제] ui-resizable-* — uu.resizable로 대체 (2026-03-26) */
/******************/
.ui-autocomplete {
	max-height: 14em;
	overflow-y: scroll;
	font-family: inherit;
}
.ui-autocomplete .ui-menu-item-wrapper {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 20rem;
	border: none;
	margin: 0;
}

/******************/
/* 화면 구성 */
/******************/
/* 페이지 타이틀 */
._page_title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}
/* 섹션 타이틀 */
._text_title {
	font-weight: 600;
	border-left: 3px solid #5b9bd5;
	padding-left: 0.5em;
}
/* 폼 테이블 (_table 과 함께 사용) — --th-width로 라벨 너비 조정 (기본 7rem) */
._form_table {
	--th-width: 10rem;
}
._form_table th {
	width: var(--th-width);
	text-align: right;
	white-space: nowrap;
}
._form_table tbody tr:hover {
	background-color: inherit;
}
/* 조회조건 박스 */
._search_box {
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	padding: 0.5em 1em;
	margin-bottom: 5px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: end;
}
._title_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 5px;
}
/* 데이터 없음 */
._no_data {
	text-align: center;
	color: #999;
	padding: 2em 1em;
}
/* 상태 뱃지 */
._badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.85em;
	line-height: 1.5;
	white-space: nowrap;
	background-color: #e5e7eb;   /* 기본 중립색 — 모디파이어 없을 때도 뱃지로 보이게 */
	color: #374151;
}
._badge._active   { background-color: #bbf7d0; color: #166534; }
._badge._inactive { background-color: #e5e7eb; color: #6b7280; } /* NOSONAR 대비: 비활성 muted 톤(의도) */
._badge._pending  { background-color: #fef08a; color: #854d0e; }
._badge._reject   { background-color: #fecaca; color: #991b1b; }
._badge._info     { background-color: #bfdbfe; color: #1e40af; }
._badge._primary  { background-color: #bfdbfe; color: #1e40af; }
._badge._secondary { background-color: #e5e7eb; color: #6b7280; } /* NOSONAR 대비: secondary muted 톤(의도) */
._badge._success  { background-color: #bbf7d0; color: #166534; }
._badge._danger   { background-color: #fecaca; color: #991b1b; }
._badge._warning  { background-color: #fef08a; color: #854d0e; }
/* 인라인 알림 메시지 */
._alert_box {
	padding: 0.6em 1em;
	border: 1px solid transparent;
	border-radius: 4px;
	margin-bottom: 0.75em;
}
._alert_box._info    { background-color: #dbeafe; border-color: #bfdbfe; color: #1e40af; }
._alert_box._success { background-color: #dcfce7; border-color: #bbf7d0; color: #166534; }
._alert_box._warning { background-color: #fef9c3; border-color: #fde68a; color: #854d0e; }
._alert_box._error   { background-color: #fee2e2; border-color: #fecaca; color: #991b1b; }
/* 상세 조회 key-value */
._desc_list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;
	border: 1px solid #dee2e6;
}
._desc_list dt,
._desc_list dd {
	padding: 6px 10px;
	margin: 0;
	border-bottom: 1px solid #dee2e6;
}
._desc_list dt {
	background-color: #f5f5f5;
	font-weight: 500;
	white-space: nowrap;
	border-right: 1px solid #dee2e6;
}
._desc_list dt:last-of-type,
._desc_list dd:last-of-type {
	border-bottom: none;
}

/******************/
/* 탭/네비게이션 */
/******************/
/* 탭 */
._tab {
	display: flex;
	border-bottom: 2px solid #dee2e6;
	gap: 0;
}
._tab ._tab_item {
	padding: 6px 16px;
	cursor: pointer;
	border: 1px solid transparent;
	border-bottom: none;
	margin-bottom: -2px;
	border-radius: 4px 4px 0 0;
	background: none;
	color: #666;
}
._tab ._tab_item:hover {
	color: #333;
	background-color: #f8f9fa;
}
._tab ._tab_item.active {
	color: #333;
	font-weight: 600;
	border-color: #dee2e6;
	background-color: #fff;
	border-bottom: 2px solid #fff;
}
/* 경로 표시 */
._breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.9em;
	color: #666;
	padding: 0.4em 0;
}
._breadcrumb ._crumb_item {
	color: #666;
	text-decoration: none;
}
._breadcrumb ._crumb_item:hover {
	color: #333;
	text-decoration: underline;
}
._breadcrumb ._crumb_item:last-child {
	color: #333;
	font-weight: 600;
	pointer-events: none;
}
._breadcrumb ._crumb_item + ._crumb_item::before {
	content: '›';
	margin-right: 0.25rem;
	color: #aaa;
	font-weight: normal;
}

/******************/
/* 카드/접기 */
/******************/
/* 카드 */
._card {
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 1em;
}
._card ._card_title {
	font-weight: 600;
	margin-bottom: 5px;
	font-size: 0.9em;
	color: #666;
}
._card ._card_value {
	font-size: 1.8em;
	font-weight: 700;
	color: #333;
}

/******************/
/* 타임라인/이력 */
/******************/
._timeline {
	position: relative;
	padding-left: 1.5em;
}
._timeline::before {
	content: '';
	position: absolute;
	left: 0.45em;
	top: 0.4em;
	bottom: 0.4em;
	width: 2px;
	background-color: #dee2e6;
}
._timeline ._timeline_item {
	position: relative;
	padding-bottom: 1em;
}
._timeline ._timeline_item:last-child {
	padding-bottom: 0;
}
._timeline ._timeline_item::before {
	content: '';
	position: absolute;
	left: -1.15em;
	top: 0.45em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #bfdbfe;
	border: 2px solid #5b9bd5;
}
._timeline ._timeline_date {
	font-size: 0.85em;
	color: #999;
}
._timeline ._timeline_text {
	margin-top: 0.15em;
}

/******************/
/* 테이블 확장 */
/******************/
/* 줄무늬 */
._table._striped tbody tr:nth-child(even) {
	background-color: #f9fafb;
}
._table._striped tbody tr:hover {
	background-color: #f0f4ff;
}
/* 헤더 고정 (스크롤 컨테이너 필요)
   border-collapse 면 스크롤 시 sticky th 의 테두리가 행과 함께 밀려 사라짐 → separate 로 전환.
   separate 는 인접 셀 보더가 합쳐지지 않아 이중선이 생기므로 셀은 right+bottom 만 갖고,
   왼쪽 외곽선은 테이블이, 상단 외곽선은 th(sticky 와 함께 고정됨)가 담당 */
._table._sticky_head {
	border-collapse: separate;
	border-spacing: 0;
	border-left: 1px solid #dee2e6;
}
._table._sticky_head th,
._table._sticky_head td {
	border-width: 0 1px 1px 0;
}
/* 헤더 고정은 thead 단위 — 셀별 top:0 이 아니라 thead 전체를 sticky 로 잡아야
   2줄(그룹) 헤더도 두 줄이 겹치지 않고 한 덩어리로 고정됨 (구: thead th 별 sticky → 2줄 시 겹침) */
._table._sticky_head thead {
	position: sticky;
	top: 0;
	z-index: 1;
}
._table._sticky_head thead th {
	background-color: #f5f5f5;
}
/* 상단 외곽선은 첫 행 th 만 담당 — 2줄 헤더에서 둘째 행까지 top 보더를 그리면 그룹행 아래보더와 겹쳐 2px 가 됨 */
._table._sticky_head thead tr:first-child th {
	border-top-width: 1px;
}
/* 정렬 가능 헤더 */
._table ._sortable_th {
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-right: 1.2em;
}
._table ._sortable_th:hover {
	background-color: #eaeaea;
}
._table ._sortable_th::after {
	content: '⇅';
	position: absolute;
	right: 4px;
	color: #ccc;
	font-size: 0.8em;
}
._table ._sortable_th._asc::after {
	content: '▲';
	color: #333;
}
._table ._sortable_th._desc::after {
	content: '▼';
	color: #333;
}

/******************/
/* 트리 구조 */
/******************/
._tree {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
._tree ._tree {
	padding-left: 1.4em;
}
._tree ._tree_item {
	padding: 3px 0;
}
._tree ._tree_label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 2px 6px;
	border-radius: 3px;
}
._tree ._tree_label:hover {
	background-color: #f0f4ff;
}
._tree ._tree_label.active {
	background-color: #dbeafe;
	font-weight: 600;
}
._tree ._tree_toggle {
	cursor: pointer;
	display: inline-block;
	width: 1em;
	text-align: center;
	font-size: 0.8em;
	user-select: none;
	color: #999;
}
._tree ._tree_toggle:empty::before {
	content: '\00a0';
}

/******************/
/* 여러 줄 말줄임 */
/******************/
/******************/
/* 파일 첨부 목록 */
/******************/
._file_list {
	list-style: none;
	padding: 0;
	margin: 0;
}
._file_item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 4px 8px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	margin-bottom: 4px;
	font-size: 0.9em;
}
._file_item:hover {
	background-color: #f8f9fa;
}
._file_item ._file_name {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
._file_item ._file_size {
	color: #999;
	font-size: 0.85em;
	white-space: nowrap;
}

/* 텍스트 보기 다이얼로그 */
._dialog_text_area {
	display: block;
	min-width: min(800px, 90vw);
	min-height: 500px;
}

/******************/
/* 불필요 */
/******************/
/* nowrap은 Bootstrap의 .text-nowrap 사용 */

/******************/
/* 유틸리티 — 간격/텍스트/기타 (Tailwind 스케일: 0=0, 1=0.25rem, 2=0.5rem, 3=0.75rem, 4=1rem) */
/******************/