/**
 * 바텀시트 (재사용 기반).
 *
 * 화면 아래에 붙는 대화상자. 위쪽 둥근 모서리와 손잡이, 뒤는 어둡게(명세 5.2).
 * 높이는 --sheet-h로 사이트별 코드가 정합니다(고정 높이, 안쪽 목록만 스크롤).
 *
 * @package udongsari
 */

.uds-base-sheet {
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: none;
	height: var(--sheet-h, 65dvh);
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--sheet-radius, 20px) var(--sheet-radius, 20px) 0 0;
	background-color: var(--color-surface);
	color: var(--color-text-strong);
	transition: transform 0.2s ease;
}

.uds-base-sheet[open] {
	display: flex;
	flex-direction: column;
}

.uds-base-sheet.is-dragging {
	transition: none;
}

.uds-base-sheet::backdrop {
	background-color: var(--color-dim);
}

/* 손잡이: 끌기 영역은 넉넉하게(높이 44px), 보이는 막대는 작게 */
.uds-base-sheet__handle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 44px;
	touch-action: none;
	cursor: grab;
}

.uds-base-sheet__handle span {
	display: block;
	width: var(--sheet-handle-w, 28px);
	height: 4px;
	border-radius: var(--radius-pill);
	background-color: var(--color-border);
}