@charset "UTF-8";
/*
 * wani-component.css
 * 왔니(WANI) 전용 커스텀 컴포넌트 스타일시트
 *
 * - Bootstrap 5.3 위에 얹어서 사용한다. Bootstrap 클래스를 대체하지 않고 보완만 한다.
 * - 컴포넌트 클래스는 모두 `wani-` 접두사를 사용한다.
 * - 파일 하단의 `#wcDocs*` 규칙은 컴포넌트 문서 페이지(/wani-component) 전용이며
 *   서비스 화면에서는 사용하지 않는다. 문서 페이지의 레이아웃은 Bootstrap
 *   유틸리티로 처리하고, 여기에는 유틸리티로 표현할 수 없는 값만 남긴다.
 */

/* =========================================================================
 * 1. 공통 토큰
 * ========================================================================= */
:root {
	--wani-border-color: #dee2e6;
	--wani-muted-bg: #f8f9fa;
	--wani-accent: #0d6efd;
	--wani-folder-color: #e09529;
	--wani-radius: 8px;
	--wani-tree-height: calc(100vh - 387px);
}

/* =========================================================================
 * 2. 카테고리 트리 (wani-category-tree)
 *    좌측 트리 + 하단 드롭다운 카테고리 관리(추가/수정/순서변경/삭제/이동)
 * ========================================================================= */
.wani-category-tree {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border: 1px solid var(--wani-border-color);
	border-radius: var(--wani-radius);
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
	overflow: hidden;
}

/* 트리 위 탭 — 대상이 여러 벌인 화면(/main/equipment 의 품목분류·담당부서·보관위치) */
.wani-category-tree-tabs {
	flex: 0 0 auto;
	padding: .5rem .75rem 0;
	background-color: #fff;
}

.wani-category-tree-tabs .nav-tabs {
	border-bottom: 1px solid var(--wani-border-color);
}

.wani-category-tree-tabs .nav-link {
	padding: .4rem .75rem;
	font-size: .875rem;
	color: #999;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
}

.wani-category-tree-tabs .nav-link:hover {
	color: #495057;
}

.wani-category-tree-tabs .nav-link.active {
	color: #181d1f;
	font-weight: 600;
	background: none;
	border-bottom-color: var(--bs-primary, #0d6efd);
}

.wani-category-tree-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	height: var(--wani-tree-height);
	overflow: hidden;
	padding: .25rem 0;
}

/* 실제 스크롤 영역. SimpleBar 가 로드돼 있으면 이 요소를 감싸 커스텀 스크롤바를 만들고,
 * 없으면 아래 overflow: auto 로 브라우저 기본 스크롤이 동작한다. */
.wani-category-tree-scroll {
	height: 100%;
	overflow: auto;
}

/* 주의: SimpleBar 는 호스트의 computed overflow 가 hidden 이면 그 축을 '넘치지 않음'으로
 * 강제 판정해(recalculate 의 `axis.y.isOverflowing = 'hidden' !== overflowY && ...`)
 * 스크롤바를 아예 만들지 않는다. 따라서 이 요소의 overflow 는 반드시 auto 로 둔다.
 * 네이티브 스크롤바는 SimpleBar 의 mask/offset 이 가려 주므로 두 개가 겹치지 않는다. */

.wani-category-tree-view {
	min-height: 100%;
}

/* 로딩 스피너 오버레이 */
.wani-category-tree-spinner {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .8);
}

.wani-category-tree.is-loading .wani-category-tree-spinner {
	display: flex;
}

/* 비어있을 때 */
.wani-category-tree-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: #6c757d;
	font-size: .875rem;
}

/* 트리 노드(Fancytree 커스터마이징) */
.wani-category-tree ul.fancytree-container {
	border: 0 !important;
	background: transparent;
	font-family: inherit;
}

.wani-category-tree .fancytree-node {
	border: none;
	padding: 2px 0;
}

.wani-category-tree .fancytree-indent {
	width: 24px;
}

.wani-category-tree .fancytree-expander,
.wani-category-tree .fancytree-icon {
	width: 16px;
	height: 16px;
}

.wani-category-tree span.fancytree-icon {
	margin-left: 0;
	margin-right: 0;
	background-image: none !important;
}

.wani-category-tree span.fancytree-icon::after {
	content: '\F3D1';
	font-family: 'bootstrap-icons';
	font-size: 15px;
	color: var(--wani-folder-color);
}

/* 모바일 드릴다운 트리(WaniTree) — 버튼으로 한 단계씩 파고든다 */
.wani-category-tree-view-mobile .wani-tree-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.wani-category-tree-view-mobile .wani-tree-btn {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 모바일 전환 시에는 트리 높이 제한을 풀어 화면 전체가 스크롤되게 둔다 */
.wani-category-tree.is-mobile .wani-category-tree-body {
	height: auto !important;
}

/* 노드 우측 카운트 배지 */
.wani-tree-count {
	margin-left: .35rem;
	font-size: .75em;
	color: #6c757d;
}

/* 하단 관리 메뉴 */
.wani-category-tree-footer {
	flex: 0 0 auto;
	padding: .5rem;
	background-color: #fff;
	border-top: 1px solid var(--wani-border-color);
}

.wani-category-menu .dropdown-toggle::after {
	display: none;
}

.wani-category-menu > .btn {
	width: 100%;
	padding: .5rem;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wani-category-menu .dropdown-menu {
	width: 100%;
	max-height: calc(100vh - 180px);
	overflow-y: auto;
	z-index: 1080;
}

.wani-category-menu .dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	gap: .5rem;
}

.wani-category-menu .dropdown-item .wani-category-menu-label {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* 순서변경 모달의 드래그 리스트 */
.wani-sortable-list {
	max-height: 45vh;
	overflow-y: auto;
}

.wani-sortable-list .wani-sortable-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	cursor: grab;
	user-select: none;
}

.wani-sortable-list .wani-sortable-item.is-dragging {
	opacity: .5;
}

.wani-sortable-list .wani-sortable-item .wani-sortable-handle {
	color: #adb5bd;
}

.wani-sortable-list .wani-sortable-item:hover .wani-sortable-handle {
	color: var(--wani-accent);
}

.wani-sortable-list .ui-sortable-placeholder {
	visibility: visible !important;
	height: 42px;
	background-color: var(--wani-muted-bg);
	border: 2px dashed var(--wani-border-color);
}

/* 반응형: 모바일에서는 트리 높이 제한을 풀고 관리 버튼을 아이콘으로 축소 */
@media (max-width: 991.98px) {
	.wani-category-tree {
		position: relative;
		overflow: inherit;
		box-shadow: none;
	}
	.wani-category-tree-body {
		height: auto !important;
	}

	.wani-category-tree-footer {
		position: absolute;
		bottom: 2px;
		right: 2px;
		z-index: 6;
		border-top: 0;
		padding: 0;

	}
	.wani-category-tree.is-mobile{padding-right: 50px}

	.wani-category-tree-view-mobile .wani-tree-nav{flex-wrap: unset; }

	.wani-category-tree-view-mobile .wani-tree-btn{
		overflow: unset;
		margin-left: 3px;
	}

	.wani-category-tree-view-mobile .wani-tree-btn:last-child{

	}



	.wani-category-tree-footer .btn-category{
		padding: 15px;
		font-size: 21px;
		justify-content: center !important;
		line-height: 0;
	}


	.wani-category-menu .dropdown-menu {
		width: 220px !important;
	}
}


/* =========================================================================
 * 3. 체크 드롭다운 (wani-check-dropdown)
 *    드롭다운 안 체크박스 다중선택 + 전체 체크박스 + 개수 라벨
 * ========================================================================= */
.wani-check-dropdown-menu {
	overflow-y: auto;
	padding: .5rem;
}

.wani-check-dropdown-menu .form-check {
	margin-bottom: 0;
	padding: .15rem .25rem .15rem 1.75rem;
	border-radius: 4px;
}

.wani-check-dropdown-menu .form-check:hover {
	background-color: var(--wani-muted-bg);
}

.wani-check-dropdown-menu .form-check-label {
	display: block;
	cursor: pointer;
	user-select: none;
}

.wani-check-dropdown-menu .wani-check-dropdown-all-item .form-check-label {
	font-weight: 600;
}

.wani-check-dropdown-menu .dropdown-header {
	padding-left: .25rem;
	padding-right: .25rem;
}

/* 토글 버튼: 선택 개수가 길어져도 레이아웃이 밀리지 않게 자른다 */
.wani-check-dropdown-toggle {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* =========================================================================
 * 3-1. 검색 드롭다운 (wani-search-dropdown)
 *      메뉴 상단에 [검색어][검색][초기화] 한 줄을 고정하고 목록만 스크롤한다.
 * ========================================================================= */
.wani-search-dropdown-menu {
	padding: 0;
	/* 검색줄을 고정하려면 메뉴 자체는 스크롤하지 않아야 한다.
	 * 스크롤은 아래 .wani-search-dropdown-list 한 겹만 담당한다. */
	overflow: hidden;
}

/* 고정 영역 — 스크롤 영역 밖이라 목록을 내려도 항상 보인다 */
.wani-search-dropdown-search {
	padding: .5rem;
	border-bottom: 1px solid var(--wani-border-color);
	background-color: #fff;
}

/* 검색·초기화는 아이콘만 두므로 정사각형에 가깝게 폭을 잡는다 */
.wani-search-dropdown-search .btn {
	flex: 0 0 auto;
	padding-left: .5rem;
	padding-right: .5rem;
}

/* 실제 스크롤 영역. SimpleBar 가 로드돼 있으면 이 요소를 감싸 커스텀 스크롤바를
 * 만들고, 없으면 아래 overflow-y: auto 로 브라우저 기본 스크롤이 동작한다.
 *
 * 주의: SimpleBar 는 호스트의 computed overflow 가 hidden 이면 그 축을 '넘치지 않음'
 * 으로 강제 판정해 스크롤바를 아예 만들지 않는다. 이 값을 hidden 으로 바꾸지 말 것. */
.wani-search-dropdown-list {
	overflow-y: auto;
	overflow-x: hidden;
	padding: .25rem 0;
}

.wani-search-dropdown-list .simplebar-track.simplebar-vertical {
	width: 8px;
}

.wani-search-dropdown-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	white-space: normal;
}

/* 항목 앞 원형 로고(이미지 또는 첫 글자) — 토글 버튼에서도 같은 클래스를 쓴다 */
.wani-search-dropdown-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-weight: 700;
	line-height: 1;
}


.wani-search-dropdown-item-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wani-search-dropdown-label,
.wani-search-dropdown-desc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* wrapText: true — 이름·설명을 자르지 않고 여러 줄로 흘린다(설명이 긴 고정 목록) */
.wani-search-dropdown-wrap .wani-search-dropdown-label,
.wani-search-dropdown-wrap .wani-search-dropdown-desc {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

.wani-search-dropdown-wrap .wani-search-dropdown-desc {
	line-height: 1.4;
	margin-top: .125rem;
}

.wani-search-dropdown-wrap .wani-search-dropdown-item {
	align-items: flex-start;
}

.wani-search-dropdown-wrap .wani-search-dropdown-check {
	margin-top: .125rem;
}

/* 선택된 항목(.active) 안에서는 설명·배지도 대비를 맞춘다 */
.wani-search-dropdown-item.active .wani-search-dropdown-desc {
	color: rgba(255, 255, 255, .75) !important;
}

.wani-search-dropdown-check {
	margin-left: auto;
	flex: 0 0 auto;
}

/* 배지가 없을 때도 체크가 오른쪽 끝에 붙도록 본문이 남은 폭을 차지한다 */
.wani-search-dropdown-item .badge {
	flex: 0 0 auto;
}

/* 방향키로 옮겨 다닐 때의 표시(포커스 링과 별개로 배경을 준다) */
.wani-search-dropdown-item.wani-search-dropdown-focus:not(.active) {
	background-color: var(--wani-muted-bg);
}

.wani-search-dropdown-group {
	padding-top: .375rem;
}

.wani-search-dropdown-message {
	padding: .75rem 1rem;
	text-align: center;
}

/* 검색어 일치 표시 — dropdown-item 안이라 여백을 줄인다 */
.wani-search-dropdown-mark {
	padding: 0;
	background-color: #fff3cd;
	color: inherit;
}

.wani-search-dropdown-item.active .wani-search-dropdown-mark {
	background-color: rgba(255, 255, 255, .35);
	color: inherit;
}

/* 토글 버튼: 고른 항목 이름이 길어져도 레이아웃이 밀리지 않게 자른다 */
.wani-search-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
}

.wani-search-dropdown-toggle-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 아무것도 고르지 않은 상태의 문구는 placeholder 처럼 흐리게 */
.wani-search-dropdown-toggle.wani-search-dropdown-empty .wani-search-dropdown-toggle-text {
	color: var(--bs-secondary-color, #6c757d);
}

/* =========================================================================
 * 4. 기간 선택 (wani-date-range)
 * ========================================================================= */
.wani-date-range {
	cursor: pointer;
	background-image: none;
}

/*
 * 달력 아이콘. 별도 버튼을 두지 않고 입력칸 안쪽 오른편에 배경으로 그린다
 * (bi-calendar3 를 데이터 URI 로 넣은 것 — 색은 CSS 변수를 쓸 수 없어 고정 회색이다).
 * 날짜 이동(wani-date-nav)과 기간 선택(wani-date-range)이 같은 규칙을 쓴다.
 */
.wani-date-range.wani-date-range-with-icon,
.wani-date-nav > .wani-date-nav-input.wani-date-nav-input-icon {
	padding-right: 2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .625rem center;
	background-size: 1rem 1rem;
}

/* =========================================================================
 * 5. 단계별 리스트그룹 (wani-step-listgroup)
 *    단계(컬럼)를 나란히 두고 왼쪽에서 고른 항목의 하위를 오른쪽에 보여준다
 * ========================================================================= */
.wani-step-listgroup .wani-step-listgroup-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wani-step-listgroup .wani-step-listgroup-scroll {
	border-radius: var(--wani-radius);
}



.wani-step-listgroup .list-group-item:not(.active):hover {
	background-color: var(--wani-muted-bg);
}

.wani-step-listgroup .list-group-item[data-empty="true"] {
	background-color: transparent;
}

.wani-step-listgroup .list-group-item a[role="button"] {
	cursor: pointer;
	line-height: 1;
}

/* 마지막 단계가 아닌 항목은 클릭해서 하위 단계로 내려갈 수 있다 */
.wani-step-listgroup [data-step]:not(:last-child) .list-group-item:not([data-empty="true"]):not([data-editing="true"]) {
	cursor: pointer;
}

/* 추가 버튼 — 점선 테두리로 '비어있는 자리'임을 표시 */
.wani-step-listgroup .wani-step-listgroup-add {
	border: 1px dotted #999;
}

.wani-step-listgroup .wani-step-listgroup-add:disabled {
	border-style: dashed;
	opacity: .5;
}

/* 삭제 확인 오버레이 */
.wani-step-listgroup .wani-step-listgroup-confirm {
	z-index: 5;
	background: rgba(255, 255, 255, .86);
}

/* =========================================================================
 * 6. 연월 선택 (wani-year-search)
 *    [이전월] [연도] [월] [다음월] 로 이루어진 input-group
 * ========================================================================= */
.wani-year-search {
	width: auto;
	flex-wrap: nowrap;
}

.wani-year-search.wani-year-search-block {
	width: 100%;
}

.wani-year-search .wani-year-search-year {
	max-width: 6.5rem;
	min-width: 5.5rem;
	padding-right: 2rem;
}

.wani-year-search .wani-year-search-month {
	max-width: 5.5rem;
	min-width: 4.3rem;
	padding-right: 2rem;
}

.wani-year-search .btn {
	white-space: nowrap;
}

/* =========================================================================
 * 6-1. 날짜 이동 (wani-date-nav)
 *    [이전] [날짜] [다음] 로 이루어진 input-group
 * ========================================================================= */
.wani-date-nav {
	width: auto;
	flex-wrap: nowrap;
}

.wani-date-nav.wani-date-nav-block {
	width: 100%;
}

.wani-date-nav .btn {
	white-space: nowrap;
}

/* 읽기전용이지만 잠긴 것이 아니라 '눌러서 달력을 여는' 입력칸이다. */
.wani-date-nav > .wani-date-nav-input {
	min-width: 8.5rem;
	cursor: pointer;
	background-color: var(--bs-body-bg);
}

/*
 * 날짜 달력은 flatpickr 가 그린다. 모양은 아래 '6-2. 달력(flatpickr) 왔니 보정' 블록에서 바꾼다
 * (달력이 body 에 붙어 나오므로 컴포넌트 안쪽 선택자로는 잡히지 않는다).
 */

/* =========================================================================
 * 6-3. 기간 이동 (wani-week-nav)
 *    [이전] [기간] [다음] 로 이루어진 input-group. 가운데 칸은 달력을 열지 않는 표시 전용이다.
 * ========================================================================= */
.wani-week-nav {
	flex-wrap: nowrap;
}

.wani-week-nav.wani-week-nav-block {
	width: 100%;
}

.wani-week-nav .btn,
.wani-week-nav > .wani-week-nav-prev,
.wani-week-nav > .wani-week-nav-next {
	white-space: nowrap;
}

/* 이전/다음은 input-group-text 모양이지만 버튼이라 눌리는 느낌을 남긴다. */
.wani-week-nav > .wani-week-nav-prev,
.wani-week-nav > .wani-week-nav-next {
	cursor: pointer;
}

.wani-week-nav > .wani-week-nav-prev:disabled,
.wani-week-nav > .wani-week-nav-next:disabled {
	cursor: default;
	opacity: .65;
}

/* 달력을 열지 않는 표시 전용 칸이라 잠긴 배경색을 쓰지 않는다. */
.wani-week-nav > .wani-week-nav-input {
	min-width: 9rem;
	cursor: default;
	background-color: var(--bs-body-bg);
}

/* =========================================================================
 * 6-2. 달력(flatpickr) 왔니 보정
 *    날짜 이동(wani-date-nav)과 기간 선택(wani-date-range)이 같은 달력을 쓴다.
 *    원본 flatpickr.min.css 는 건드리지 않고 여기에서 Bootstrap 5 토큰으로 맞춘다.
 * ========================================================================= */
.flatpickr-calendar {
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius, .375rem);
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
	background: var(--bs-body-bg, #fff);
	font-family: inherit;
	font-size: .875rem;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
	display: none;
}

.flatpickr-months {
	padding: .25rem 0;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
	color: var(--bs-body-color, #212529);
	fill: var(--bs-body-color, #212529);
	font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	fill: var(--bs-secondary-color, #6c757d);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--bs-primary, #0d6efd);
}

.flatpickr-weekday {
	color: var(--bs-secondary-color, #6c757d);
	font-size: .75rem;
	font-weight: 500;
}

/* 일요일 빨강 · 토요일 파랑 — 왔니의 다른 달력과 같은 규칙 */
.flatpickr-weekdaycontainer .flatpickr-weekday:first-child,
.dayContainer .flatpickr-day:nth-child(7n + 1) {
	color: var(--bs-danger, #dc3545);
}

.flatpickr-weekdaycontainer .flatpickr-weekday:last-child,
.dayContainer .flatpickr-day:nth-child(7n) {
	color: var(--bs-primary, #0d6efd);
}

.flatpickr-day {
	border-radius: var(--bs-border-radius-sm, .25rem);
	color: var(--bs-body-color, #212529);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
	background: var(--bs-tertiary-bg, #f8f9fa);
	border-color: transparent;
}

.flatpickr-day.today {
	border-color: var(--bs-primary, #0d6efd);
	font-weight: 600;
}

.dayContainer .flatpickr-day.selected,
.dayContainer .flatpickr-day.startRange,
.dayContainer .flatpickr-day.endRange,
.dayContainer .flatpickr-day.selected:hover,
.dayContainer .flatpickr-day.startRange:hover,
.dayContainer .flatpickr-day.endRange:hover {
	background: var(--bs-primary, #0d6efd);
	border-color: var(--bs-primary, #0d6efd);
	color: #fff;
}

.dayContainer .flatpickr-day.inRange,
.dayContainer .flatpickr-day.inRange:hover {
	background: var(--bs-primary-bg-subtle, #cfe2ff);
	border-color: var(--bs-primary-bg-subtle, #cfe2ff);
	box-shadow: -5px 0 0 var(--bs-primary-bg-subtle, #cfe2ff), 5px 0 0 var(--bs-primary-bg-subtle, #cfe2ff);
	color: var(--bs-body-color, #212529);
}

.dayContainer .flatpickr-day.prevMonthDay,
.dayContainer .flatpickr-day.nextMonthDay,
.dayContainer .flatpickr-day.flatpickr-disabled {
	color: var(--bs-secondary-color, #6c757d);
	opacity: .45;
}

/* 기간 선택의 프리셋 줄 — flatpickr 에는 없는 기능이라 컴포넌트가 달력 안에 직접 그린다. */
.wani-date-range-presets {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	padding: .5rem;
	border-top: 1px solid var(--bs-border-color, #dee2e6);
	background: var(--bs-body-bg, #fff);
	border-radius: 0 0 var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem);
}

.wani-date-range-presets button {
	flex: 1 1 auto;
	padding: .25rem .5rem;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius-sm, .25rem);
	background: transparent;
	color: var(--bs-body-color, #212529);
	font-size: .8125rem;
	white-space: nowrap;
}

.wani-date-range-presets button:hover {
	background: var(--bs-tertiary-bg, #f8f9fa);
	border-color: var(--bs-primary, #0d6efd);
	color: var(--bs-primary, #0d6efd);
}

.wani-date-range-presets .wani-date-range-clear {
	flex: 0 0 auto;
	color: var(--bs-secondary-color, #6c757d);
}

.wani-date-range-presets .wani-date-range-clear:hover {
	border-color: var(--bs-danger, #dc3545);
	color: var(--bs-danger, #dc3545);
}

/* =========================================================================
 * 7. 모바일 버튼 그룹 (wani-mobile-button-group)
 *    폭이 좁아지면 들어가는 만큼만 남기고 나머지를 [···] 드롭다운으로 접는다.
 * ========================================================================= */
.mobile-button-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
}

/* overflow 는 건드리지 않는다 — hidden 을 주면 Bootstrap 드롭다운 메뉴가 잘린다.
   접기 계산으로 넘칠 일이 없으므로 필요하지 않다. */

/* 버튼이 들어가는 영역 — 줄바꿈 없이 한 줄로 둔다(접기 계산의 전제) */
.mobile-button-group .wani-mbg-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
}

/* 버튼은 눌리지 않는다 — 들어갈 만큼만 남기는 것이 이 컴포넌트의 일이다 */
.mobile-button-group .wani-mbg-bar > .btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* 너비를 재는 동안에만 흐름 밖으로 빼서 눌리지 않은 폭을 읽는다(그려지지는 않는다) */
.mobile-button-group .wani-mbg-measuring {
	position: absolute !important;
	visibility: hidden !important;
	width: max-content !important;
	max-width: none !important;
	pointer-events: none;
}

/* 루트 자체가 바인 경우에도 더보기 버튼은 항상 오른쪽 끝에 남는다 */
.mobile-button-group .wani-mbg-more {
	flex: 0 0 auto;
}

.mobile-button-group .wani-mbg-toggle {
	white-space: nowrap;
}

/* 항상 드롭다운에만 두는 버튼은 컴포넌트가 초기화되기 전에도 보이지 않는다
   (초기화 전 한순간 버튼이 전부 펼쳐져 보이는 것을 막는다) */
.mobile-button-group [data-mbg-menu-only] {
	display: none;
}

.mobile-button-group .dropdown-menu [data-mbg-menu-only] {
	display: flex;
}

/* .btn-group 안에서 '보이는 첫/마지막 버튼'의 모서리를 되살린다
   (접힌 버튼이 DOM 에 남아 있어 :first-child/:last-child 가 어긋나기 때문) */
.mobile-button-group .wani-mbg-edge-start {
	border-top-left-radius: var(--bs-btn-border-radius) !important;
	border-bottom-left-radius: var(--bs-btn-border-radius) !important;
}

.mobile-button-group .wani-mbg-edge-end {
	border-top-right-radius: var(--bs-btn-border-radius) !important;
	border-bottom-right-radius: var(--bs-btn-border-radius) !important;
}

/* 드롭다운으로 접힌 버튼 — .btn 이 아니라 .dropdown-item 으로 그려진다 */
.mobile-button-group .dropdown-menu .wani-mbg-in-menu {
	display: flex;
	align-items: center;
	width: 100%;
	text-align: start;
	border: 0;
	background: none;
}

/* 배지(선택 개수)는 오른쪽 끝으로 */
.mobile-button-group .dropdown-menu .wani-mbg-in-menu .badge {
	margin-left: auto;
}

/* 접힌 버튼 안의 아이콘 여백 — .btn 에서 쓰던 간격을 유지한다 */
.mobile-button-group .dropdown-menu .wani-mbg-in-menu > .bi {
	margin-right: 0.375rem;
}

/* =========================================================================
 * 8. 검색바 (wani-search-bar)
 *    [필드선택][검색어][검색][초기화] 한 줄 + 검색조건 칩 목록
 *    칩은 줄바꿈하지 않고 좌우로 스크롤한다(SimpleBar 가 있으면 그 스크롤바).
 * ========================================================================= */
.wani-search-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .375rem;
}

/* 폭이 모자라면 검색 입력칸(.wani-search-bar-input)이 '먼저' 줄어든다.
 * 입력칸이 하한(150px)에 닿으면 입력줄은 더 줄 수 없고, 그때부터 칩 영역이
 * 좁아지면서 좌우 스크롤이 생긴다.
 * flex-shrink 를 칩(1)보다 훨씬 크게 둬야 이 순서가 나온다 — 둘 다 1 이면
 * 줄어드는 양이 basis 비례로 나뉘어 칩 쪽 스크롤이 먼저 생긴다.
 * min-width 는 지정하지 않는다(auto). 그래야 내부 콘텐츠(버튼 + 입력칸 하한)
 * 크기에서 저절로 멈춘다.
 * Bootstrap 의 .input-group 은 flex-wrap: wrap 이라 좁아지면 버튼이 다음 줄로
 * 감기므로 nowrap 으로 되돌린다. */
.wani-search-bar-group {
	flex: 1 100 18rem;
	width: auto;
	flex-wrap: nowrap;
}

/* 버튼 문구는 유지하고 입력칸과 필드 버튼이 줄어든다 */
.wani-search-bar-group > .wani-search-bar-submit,
.wani-search-bar-group > .wani-search-bar-reset {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* 검색 입력칸의 하한 — 여기까지 줄어든 뒤에야 칩이 스크롤된다.
 * Bootstrap 의 `.input-group > .form-control { min-width: 0 }` 를 이겨야 하므로
 * 선택자를 같은 특정성(클래스 2개)으로 맞춘다. 클래스 하나짜리로 쓰면 무시된다. */
.wani-search-bar-group > .wani-search-bar-input {
	min-width: 120px;
}

/* 필드 토글 버튼: 필드명이 길어져도 입력칸을 밀지 않게 자른다 */
.wani-search-bar-field-toggle {
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 3rem;
	max-width: 12rem;
}

/* 필드가 하나뿐이라 드롭다운을 숨긴 경우(showField: 'auto').
 * Bootstrap 의 input-group 은 :not(:first-child) 로 모서리를 깎으므로,
 * 숨겨진 토글 버튼이 DOM 상 첫 자식으로 남아 있으면 입력칸 왼쪽이 각지게 보인다.
 * 그래서 이때는 입력칸에 왼쪽 모서리를 직접 돌려준다. */
.wani-search-bar-no-field .wani-search-bar-group > .wani-search-bar-input {
	border-top-left-radius: var(--bs-border-radius-sm, 0.25rem);
	border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem);
}

/* 필드 목록: 체크박스 없는 일반 dropdown-item 이고 그룹 헤더와 구분선만 둔다 */
.wani-search-bar-field-menu {
	overflow-y: auto;
}

.wani-search-bar-field-menu .dropdown-header {
	padding-bottom: .125rem;
}

/* 칩 영역(스크롤 호스트). SimpleBar 가 붙으면 이 요소 안에 자체 구조를 만들고,
 * 없으면 아래 .wani-search-bar-chips-native 의 overflow-x 로 기본 스크롤이 동작한다.
 *
 * 주의: SimpleBar 는 호스트의 computed overflow 가 hidden 이면 그 축을 '넘치지 않음'
 * 으로 강제 판정해 스크롤바를 만들지 않는다. 이 요소의 overflow-x 를 hidden 으로
 * 바꾸지 말 것. 또 simplebar.min.css 의 [data-simplebar] 는 세로 flex-wrap 을 걸므로
 * 가로 목록이 되도록 여기서 방향을 되돌린다. */
.wani-search-bar-chips {
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

/* 실제 칩이 담기는 줄 — SimpleBar 를 쓸 때도 이 요소에만 내용을 넣는다.
 * 아래 여백은 가로 스크롤바가 칩을 덮지 않게 두는 자리다(입력줄 높이 안에서 해결된다). */
.wani-search-bar-chip-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .375rem;
	width: max-content;
	padding: 0 2px 5px 2px;
}

.wani-search-bar-chip {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	flex: 0 0 auto;
	font-weight: 500;
	max-width: 14rem;
}

.wani-search-bar-chip-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 배지 안에서 쓰는 닫기 버튼이라 기본 크기보다 작게 둔다 */
.wani-search-bar-chip-remove.btn-close {
	flex: 0 0 auto;
	width: .5rem;
	height: .5rem;
	padding: .25rem;
	background-size: .5rem;
	opacity: .5;
}

.wani-search-bar-chip-remove.btn-close:hover {
	opacity: 1;
}

.wani-search-bar-chips .simplebar-track.simplebar-horizontal {
	height: 6px;
}

.wani-search-bar-chips .simplebar-content {
	display: flex;
	align-items: center;
}

/* =========================================================================
 * 9. URL 공유 (wani-share-url)
 *    [URL] [공유] [바로가기] 로 이루어진 input-group
 * ========================================================================= */
.wani-share-url {
	flex-wrap: nowrap;
}

/* Bootstrap 의 .input-group > .form-control { min-width: 0 } 을 이기려면 클래스 2개가 필요하다. */
.wani-share-url > .wani-share-url-input {
	min-width: 8rem;
}

.wani-share-url .btn {
	white-space: nowrap;
}

/* =========================================================================
 * 10. 타임라인 스케줄러 (wani-scheduler)
 *    왼쪽 항목 열(고정) + 오른쪽 시간축 그리드. 스크롤 컨테이너는 하나이고
 *    머리행/항목열 고정은 position: sticky 가 담당한다.
 *    치수는 전부 CSS 변수로 들어온다(--ws-*). JS 가 값을 채운다.
 * ========================================================================= */
.wani-scheduler {
	position: relative;
	height: 100%;
	min-height: 120px;
	--ws-row-header-width: 200px;
	--ws-lane-width: 0px;
	--ws-cell-width: 44px;
	--ws-row-height: 44px;
	--ws-header-height: 34px;
	--ws-border-color: var(--bs-border-color, #dee2e6);
	--ws-head-bg: var(--bs-tertiary-bg, #f8f9fa);
	--ws-cell-bg: var(--bs-secondary-bg, #e9ecef);
	--ws-cell-available-bg: var(--bs-body-bg, #ffffff);
	font-size: 14px;
}

.wani-scheduler-scroll {
	height: 100%;
	overflow: auto;
	background: var(--bs-body-bg, #fff);
}

.wani-scheduler-grid {
	width: max-content;
	min-width: 100%;
}

/* --- 머리행 -------------------------------------------------------------- */
.wani-scheduler-head {
	display: flex;
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--ws-head-bg);
}

.wani-scheduler-corner {
	display: flex;
	flex: 0 0 var(--ws-row-header-width);
	width: var(--ws-row-header-width);
	border-right: 1px solid var(--ws-border-color);
	border-bottom: 1px solid var(--ws-border-color);
	background: var(--ws-head-bg);
}

/* 왼쪽 항목 열 고정 — 좁은 화면에서는 클래스를 떼어 전체가 함께 스크롤된다. */
.wani-scheduler-sticky .wani-scheduler-corner {
	position: sticky;
	left: 0;
	z-index: 4;
}

.wani-scheduler-corner-cell {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
	padding: 0 .375rem;
	height: var(--ws-header-height);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
}

.wani-scheduler-corner-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 열 경계 손잡이 — ag-grid 처럼 끌어서 너비를 바꾼다 */
.wani-scheduler-resizer {
	position: absolute;
	top: 0;
	right: -3px;
	width: 7px;
	height: 100%;
	cursor: col-resize;
	z-index: 5;
	user-select: none;
}

.wani-scheduler-resizer::after {
	content: "";
	position: absolute;
	top: 37%;
	left: 3px;
	width: 1px;
	height: 10px;
	background: var(--ws-border-color);
}

.wani-scheduler-resizer:hover::after,
body.wani-scheduler-resizing .wani-scheduler-resizer::after {
	background: var(--bs-primary, #0d6efd);
	width: 2px;
}

/* 드래그 중에는 문서 전체에서 텍스트 선택과 커서를 잠근다 */
body.wani-scheduler-resizing {
	cursor: col-resize;
	user-select: none;
}

.wani-scheduler-timehead {
	flex: 0 0 var(--ws-lane-width);
	width: var(--ws-lane-width);
}

.wani-scheduler-timehead-row {
	display: flex;
	border-bottom: 1px solid var(--ws-border-color);
}

.wani-scheduler-timehead-cell {
	flex: 0 0 var(--ws-cell-width);
	width: var(--ws-cell-width);
	height: var(--ws-header-height);
	line-height: var(--ws-header-height);
	text-align: center;
	border-right: 1px solid var(--ws-border-color);

	white-space: nowrap;
	overflow: hidden;
	color: var(--bs-secondary-color, #6c757d);
}

.wani-scheduler-timehead-hours .wani-scheduler-timehead-cell {
	flex-basis: auto;
	width: auto;
	font-weight: 600;
	color: var(--bs-body-color, #212529);
}

/* --- 본문 ---------------------------------------------------------------- */
.wani-scheduler-row {
	display: flex;
}

.wani-scheduler-rowheader {
	display: flex;
	flex: 0 0 var(--ws-row-header-width);
	width: var(--ws-row-header-width);
	height: var(--ws-row-height);
	background: var(--bs-body-bg, #fff);
	border-right: 1px solid var(--ws-border-color);
	border-bottom: 1px solid var(--ws-border-color);
	z-index: 1;
}

.wani-scheduler-sticky .wani-scheduler-rowheader {
	position: sticky;
	left: 0;
	z-index: 2;
}

.wani-scheduler-row-selected .wani-scheduler-rowheader {
	background: var(--bs-primary-bg-subtle, #cfe2ff);
}

.wani-scheduler-rowheader-cell {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
	padding: 0 .375rem;
	overflow: hidden;
	white-space: nowrap;
	font-size: 16px;
	color: #181d1f;
}

.wani-scheduler-rowheader-cell > * {
	min-width: 0;
	max-width: 100%;
}

.wani-scheduler-corner-cell .form-check-input[type=checkbox],
.wani-scheduler-rowheader-cell .form-check-input[type=checkbox]{width: 18px; height: 18px;}



.wani-scheduler-lane {
	position: relative;
	display: flex;
	flex: 0 0 var(--ws-lane-width);
	width: var(--ws-lane-width);
	height: var(--ws-row-height);
}

.wani-scheduler-cell {
	flex: 0 0 var(--ws-cell-width);
	width: var(--ws-cell-width);
	border-right: 1px dashed var(--ws-border-color);
	border-bottom: 1px solid var(--ws-border-color);
	background: var(--ws-cell-bg);
}

/* 예약가능 시간대만 밝게 — 그 밖은 회색으로 남긴다 */
.wani-scheduler-cell-available {
	background: var(--ws-cell-available-bg);
}

/* --- 일정(예약) ---------------------------------------------------------- */
.wani-scheduler-event {
	position: absolute;
	top: 3px;
	height: calc(var(--ws-row-height) - 7px);
	display: flex;
	align-items: center;
	padding: 0 .375rem;
	border: 1px solid var(--ws-border-color);
	border-left: 4px solid var(--bs-primary, #0d6efd);
	border-radius: .25rem;
	background: var(--bs-body-bg, #fff);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
	cursor: pointer;
	overflow: hidden;
	z-index: 1;
}

.wani-scheduler-event:hover {
	background: var(--bs-tertiary-bg, #f8f9fa);
}

.wani-scheduler-event-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 드래그로 고르는 중인 시간 구간 */
.wani-scheduler-selection {
	position: absolute;
	top: 0;
	height: 100%;
	background: rgba(var(--bs-primary-rgb, 13, 110, 253), .18);
	border: 1px solid var(--bs-primary, #0d6efd);
	pointer-events: none;
	z-index: 2;
}

/* --- 비어있음 / 로딩 ------------------------------------------------------ */
.wani-scheduler-empty {
	position: absolute;
	top: var(--ws-header-height);
	left: 0;
	right: 0;
	padding: 2rem 1rem;
	text-align: center;
	color: var(--bs-secondary-color, #6c757d);
}

.wani-scheduler-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .8);
	z-index: 10;
}

.wani-scheduler-spinner.d-none {
	display: none !important;
}

/* =========================================================================
 * 12. 토스트 (wani-toast)
 * -------------------------------------------------------------------------
 * 색·모서리·간격은 Bootstrap 의 toast / text-bg-* 를 그대로 쓰고,
 * 유틸리티로 표현할 수 없는 것(겹침 간격, 진행 막대 애니메이션)만 여기 둔다.
 * ========================================================================= */

/* 여러 개가 쌓일 때의 간격 */
.wani-toast-container .toast + .toast {
	margin-top: 0.5rem;
}

/* 화면 폭이 좁아도 읽을 수 있는 최소/최대 폭 */
.wani-toast {
	min-width: 16rem;
	max-width: min(24rem, calc(100vw - 2rem));
}

/* 헤더 없는 형태에서 본문 글자색이 배경(text-bg-*)을 따르도록 */
.wani-toast > .text-bg-success,
.wani-toast > .text-bg-danger,
.wani-toast > .text-bg-warning,
.wani-toast > .text-bg-primary {
	border-radius: inherit;
}

.wani-toast-clickable {
	cursor: pointer;
}

/* 남은 시간 막대 — duration 은 인라인 style 의 animation-duration 으로 들어온다 */
.wani-toast-progress {
	height: 3px;
	background-color: rgba(0, 0, 0, 0.1);
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	overflow: hidden;
}

.wani-toast-progress > span {
	display: block;
	height: 100%;
	width: 100%;
	background-color: currentColor;
	opacity: 0.5;
	transform-origin: left center;
	animation-name: waniToastProgress;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes waniToastProgress {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* 움직임 최소화를 선호하는 사용자에게는 막대를 고정한다 */
@media (prefers-reduced-motion: reduce) {
	.wani-toast-progress > span {
		animation: none;
		transform: scaleX(1);
	}
}

/* =========================================================================
 * 90. 문서 페이지 (/wani-component)
 * -------------------------------------------------------------------------
 * 레이아웃과 타이포그래피는 Bootstrap 5.3 유틸리티(container/row/col/card/
 * nav-pills/offcanvas-lg/table-responsive 등)로 처리한다. 여기에는 Bootstrap
 * 유틸리티로 표현할 수 없는 값만 남긴다.
 * ========================================================================= */

/* 좌측 목차: 데스크톱에서 navbar(약 3.5rem) 아래에 고정하고 넘치면 자체 스크롤 */
@media (min-width: 992px) {
	#wcDocsSidebarCard {
		top: 4.5rem;
	}

	#wcDocsNav {
		max-height: calc(100vh - 7rem);
	}
}

/* 오프캔버스가 열린 상태가 아닐 때(lg 이상)는 body 를 그대로 흐르게 둔다 */
@media (min-width: 992px) {
	#wcDocsSidebar .offcanvas-body {
		overflow: visible;
	}
}

/* 데모 이벤트 로그 — 높이 제한만 지정(나머지는 Bootstrap 유틸리티) */
#wcDocsDemoLog {
	max-height: 10rem;
}

/* 코드 블록 — 들여쓰기 폭만 지정(스크롤·색상은 Bootstrap 유틸리티) */
#wcDocsMain pre {
	tab-size: 4;
}


/* 단계별 리스트그룹 — 항목 안의 on/off 스위치(toggles 옵션)
   Bootstrap 의 .form-switch 는 padding-left 2.5em + input 2em + margin -2.5em 이라
   실제로 차지하는 폭이 2em 이다. 컬럼 머리의 설명 라벨도 같은 폭으로 맞춰 세로로 정렬한다. */
.wani-step-listgroup-toggle {
	min-height: auto;
	flex: 0 0 auto;
}

.wani-step-listgroup-toggle .form-check-input {
	cursor: pointer;
	margin-top: 0;
}

.wani-step-listgroup-toggle-legend {
	width: 2em;
	text-align: center;
}

/* toggleLabelPosition: 'inline' — 라벨을 단계 머리가 아니라 항목의 스위치 옆에 둔다.
   .form-switch 는 input 이 float 라 라벨이 스위치 오른쪽에 놓인다. */
.wani-step-listgroup-toggle-label {
	white-space: nowrap;
	cursor: pointer;
	margin-bottom: 0;
}

/* 라벨이 input 보다 앞에 오므로 형제 선택자(~)로는 잡을 수 없다 — :has 로 잠긴 스위치를 본다. */
.wani-step-listgroup-toggle-label:has(~ .form-check-input:disabled) {
	cursor: default;
	opacity: 0.5;
}

/* 셀렉트로 고르는 단계(select 옵션)에서 목록이 좁아져도 셀렉트가 뭉개지지 않게 한다. */
.wani-step-listgroup [data-role="item-select"] {
	min-width: 0;
}

/* =========================================================================
 * 13. 이미지 드롭존 (wani-image-dropzone)
 * -------------------------------------------------------------------------
 * Dropzone 5 의 기본 스킨(dropzone.min.css) 위에 왔니 관리자 화면의 모양만 얹는다.
 * 미리보기 안쪽(파일명 오버레이·성공 표시)은 Dropzone 기본 동작을 그대로 두어
 * 이미 이 라이브러리를 쓰던 화면의 겉모습이 바뀌지 않게 한다.
 * ========================================================================= */

.wani-image-dropzone.dropzone {
	border: 2px dashed var(--bs-border-color, #ced4da);
	border-radius: 0.375rem;
	background-color: var(--bs-tertiary-bg, #f8f9fa);
	padding: 20px;
	text-align: center;
	cursor: pointer;
	min-height: auto;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wani-image-dropzone.dropzone:hover,
.wani-image-dropzone.dropzone.dz-drag-hover {
	border-color: var(--bs-primary, #0d6efd);
	background-color: rgba(13, 110, 253, 0.06);
}

.wani-image-dropzone .dz-message {
	margin: 1.5em 0;
	font-size: 0.875rem;
	color: var(--bs-secondary-color, #6c757d);
}

.wani-image-dropzone .dz-preview .dz-image {
	border-radius: 8px;
	border: 2px solid var(--bs-border-color, #e9ecef);
	background: var(--bs-tertiary-bg, #f8f9fa);
}

.wani-image-dropzone .dz-preview .dz-image img{
	width: 100%;
	object-fit: contain;
}


.wani-image-dropzone .dz-preview.dz-success .dz-image {
	border-color: var(--bs-success);
}

.wani-image-dropzone .dz-preview.dz-error .dz-image {
	border-color: var(--bs-danger);
}

.dropzone .dz-preview.dz-image-preview{
	background: transparent!important;
}

/* 파일명이 길어도 미리보기 폭을 넘기지 않게 한다(오버레이 자체는 Dropzone 기본 동작). */
.wani-image-dropzone .dz-preview .dz-filename span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.dropzone .dz-preview .dz-remove{

	text-align: inherit!important;
	display: inherit!important;
	border:1px solid !important;
}

.dropzone .dz-preview .dz-remove:hover{text-decoration: none!important; border:1px solid var(--bs-danger)!important;}


/* 이미지가 아닌 파일(문서·압축 등)의 미리보기 — Dropzone 은 썸네일을 만들지 못하므로
   컴포넌트가 확장자 뱃지를 대신 그린다(fileIcon 옵션). */
.wani-image-dropzone .wani-image-dropzone-file-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 10px;
	background: var(--bs-secondary-bg, #e9ecef);
	color: var(--bs-secondary-color, #6c757d);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-align: center;
	word-break: break-all;
}

.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="pdf"] { background: #f8d7da; color: #842029; }
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="doc"],
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="docx"] { background: #cfe2ff; color: #084298; }
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="xls"],
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="xlsx"] { background: #d1e7dd; color: #0f5132; }
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="ppt"],
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="pptx"] { background: #ffe5d0; color: #984c0c; }
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="hwp"],
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="hwpx"] { background: #cff4fc; color: #055160; }
.wani-image-dropzone .wani-image-dropzone-file-icon[data-extension="zip"] { background: #fff3cd; color: #664d03; }


.dropzone .dz-preview .dz-details .dz-size{font-size: 14px}
.btn-xs{font-size: 12px!important; padding: 1px 7px;border-radius: 3px; line-height: 18px!important;}