/**
 * @author parkyk
 * @since 2026-04-03
 * @description 선언적 UI 위젯 스타일 (pcommon3-ui.js 연동)
 */

/******************/
/* data-ui 위젯 */
/******************/
[data-ui="tabs"] > [data-ui-body] { display: none; }
[data-ui="tabs"] > [data-ui-body].active { display: block; }
[data-ui="dropdown"] { position: relative; display: inline-block; }
[data-ui="dropdown"] [data-ui-menu] { display: none; position: absolute; z-index: 1000; background: #fff; border: 1px solid #dee2e6; padding: 0.25rem 0; min-width: 8rem; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
[data-ui="dropdown"].open [data-ui-menu] { display: block; }
[data-ui="tooltip"] { position: relative; display: inline-block; }
[data-ui="tooltip"] [data-ui-body] { display: none; position: absolute; z-index: 1000; background: #fff; border: 1px solid #dee2e6; padding: 0.5rem; min-width: 10rem; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
[data-ui="tooltip"].open [data-ui-body] { display: block; }
[data-ui="collapse"] > [data-ui-body] { display: none; }
[data-ui="collapse"].open > [data-ui-body] { display: block; }

/******************/
/* 접기/펼치기 */
/******************/
._collapse ._collapse_toggle {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5em 0;
	font-weight: 600;
	user-select: none;
}
._collapse ._collapse_toggle::before {
	content: '▸';
	transition: transform 0.2s;
}
._collapse.open ._collapse_toggle::before {
	transform: rotate(90deg);
}
._collapse ._collapse_body {
	display: none;
	padding: 0.5em 0 0.5em 1.2em;
}
._collapse.open ._collapse_body {
	display: block;
}

/******************/
/* 기간 선택 */
/******************/
[data-ui-date-range] { position: relative; display: inline-block; }
[data-ui-date-range] ._ui-dr-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1050; background: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.25rem; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.1); gap: 0.25rem; }
[data-ui-date-range]:hover ._ui-dr-menu { display: grid; grid-template-columns: repeat(3, 1fr); }
[data-ui-dr-month] { padding: 0.25rem 0.5rem; border: 1px solid #ccc; border-radius: 0.25rem; background: #f8f9fa; cursor: pointer; }
[data-ui-dr-month]:hover { background: #e9ecef; }

/******************/
/* 멀티셀렉트 */
/******************/
[data-ui="multiselect"] { position: relative; display: inline-block; }
[data-ui="multiselect"] ._ui-ms-menu { visibility: hidden; pointer-events: none; transition: visibility 0s 0.5s; position: absolute; top: 100%; left: 0; z-index: 1050; background: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 0.5rem; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.1); max-height: 15rem; overflow-y: auto; min-width: 100%; }
[data-ui="multiselect"] ._ui-ms-menu label { display: block; padding: 0.25rem 0.5rem; cursor: pointer; }
[data-ui="multiselect"] ._ui-ms-menu label:hover { background: #f8f9fa; }
/* hover로 표시 (모바일 터치도 hover 적용됨) */
[data-ui="multiselect"]:hover ._ui-ms-menu { visibility: visible; pointer-events: auto; transition: visibility 0s 0.2s; }

/******************/
/* 공통: 커스텀 입력 레이블 */
/******************/
[data-ui-checkbox],
[data-ui-radio],
[data-ui-switch],
[data-ui-btn-group] label { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
[data-ui-checkbox],
[data-ui-radio] { gap: 0.4rem; }

/* 공통: 원본 input 숨김 (접근성 유지) */
[data-ui-checkbox] input,
[data-ui-radio] input,
[data-ui-switch] input,
[data-ui-btn-group] input { position: absolute; opacity: 0; width: 0; height: 0; }

/* 공통: 포커스 표시 */
[data-ui-checkbox] input:focus-visible + span,
[data-ui-radio] input:focus-visible + span,
[data-ui-switch] input:focus-visible + span,
[data-ui-btn-group] input:focus-visible + span { outline: 2px solid #0d6efd; outline-offset: 2px; }

/******************/
/* 토글 스위치 */
/******************/
[data-ui-switch] { gap: 0.5rem; }
[data-ui-switch] input + span {
	position: relative;
	display: inline-block;
	width: 2.5rem;
	height: 1.375rem;
	background: #ccc;
	border-radius: 1rem;
	transition: background 0.2s;
}
[data-ui-switch] input + span::after {
	content: '';
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	width: 1.125rem;
	height: 1.125rem;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
}
[data-ui-switch] input:checked + span { background: #0d6efd; }
[data-ui-switch] input:checked + span::after { transform: translateX(1.125rem); }

/******************/
/* 커스텀 체크박스 */
/******************/
[data-ui-checkbox] input + span {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid #adb5bd;
	border-radius: 0.25rem;
	transition: background 0.15s, border-color 0.15s;
	position: relative;
}
[data-ui-checkbox] input + span::after {
	content: '';
	position: absolute;
	top: 0.0625rem;
	left: 0.3125rem;
	width: 0.375rem;
	height: 0.6875rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
[data-ui-checkbox] input:checked + span { background: #0d6efd; border-color: #0d6efd; }
[data-ui-checkbox] input:checked + span::after { opacity: 1; }

/******************/
/* 커스텀 라디오 */
/******************/
[data-ui-radio] input + span {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid #adb5bd;
	border-radius: 50%;
	transition: border-color 0.15s;
	position: relative;
}
[data-ui-radio] input + span::after {
	content: '';
	position: absolute;
	top: 0.1875rem;
	left: 0.1875rem;
	width: 0.625rem;
	height: 0.625rem;
	background: #0d6efd;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.15s;
}
[data-ui-radio] input:checked + span { border-color: #0d6efd; }
[data-ui-radio] input:checked + span::after { opacity: 1; }

/******************/
/* 버튼 그룹 라디오 */
/******************/
[data-ui-btn-group] { display: inline-flex; }
[data-ui-btn-group] input + span {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	border: 1px solid #dee2e6;
	background: #fff;
	transition: background 0.15s, color 0.15s;
}
[data-ui-btn-group] label:first-child input + span { border-radius: 0.25rem 0 0 0.25rem; }
[data-ui-btn-group] label:last-child input + span { border-radius: 0 0.25rem 0.25rem 0; }
[data-ui-btn-group] label + label input + span { margin-left: -1px; }
[data-ui-btn-group] input:checked + span { background: #0d6efd; color: #fff; border-color: #0d6efd; position: relative; z-index: 1; }

/******************/
/* 테이블 정렬 */
/******************/
/* 정렬 트리거를 화살표로 좁힌다 — th 는 클릭 대상에서 빼고 ::after 만 되살린다.
   가상요소는 이벤트 target 이 못 되지만 히트 테스트에는 참여하므로, 화살표를 누르면 클릭이 th 로 전달된다(핸들러는 그대로).
   JS 삽입이 없으니 동적으로 그린 표도 그대로 동작한다. */
[data-ui-sort] th[data-ui-sort-key] { pointer-events: none; }   /* user-select 는 두지 않는다 — 표를 긁어 복사할 때 헤더가 빠진다 */
[data-ui-sort] th[data-ui-sort-key] > * { pointer-events: auto; }   /* 헤더에 링크·체크박스가 생겨도 살아 있도록 */
[data-ui-sort] th[data-ui-sort-key]::after {
	content: '↕'; color: #adb5bd; font-size: 0.75rem;
	pointer-events: auto; cursor: pointer;
	display: inline-block; padding: 0 0.25rem;   /* 화살표 글리프만으론 클릭 영역이 좁다 */
}
[data-ui-sort] th._ui-sort-asc::after { content: '↑'; color: #212529; }
[data-ui-sort] th._ui-sort-desc::after { content: '↓'; color: #212529; }

/******************/
/* 행 선택 */
/******************/
[data-ui-row-select] tbody tr { cursor: pointer; }
[data-ui-row-select] tbody tr._ui-row-active { background: #e7f1ff; }


/******************/
/* 모달 */
/******************/
[data-ui="modal"] {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 1100;
}
[data-ui="modal"] > [data-ui-modal-box] {
	background: #fff;
	border-radius: 0.5rem;
	padding: 1.5rem;
	margin: auto 0;
	min-width: 18rem;
	max-width: 90vw;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
}