:host(nx-panel) {
	font-size: var(--font-size);
	font-family: var(--font-family);
	color: var(--color);

	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	flex: 1 1 0;

	*, *::before, *::after {
		box-sizing: border-box;
	}

	.head::before {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-color: green; /* 구의 기본 색상 */
	}

	.head.hide {
		display: none;
	}

	.head {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 4px;
		width: 100%;

		.caption {
			display: flex;
			margin-left: 4px;

			span {
				font-weight: bold;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.body {
		border: 1px solid #ccc;
		border-radius: 4px;
		width: 100%;
		height: 100%;
		padding: 8px;


	}

	input {
		color: var(--input-color);
		background-color: 1px solid var(--input-background-color);
		border: 1px solid var(--input-border-color);
		outline: none;
		padding: var(--input-padding);
		border-radius: 2px;
		font-size: var(--input-font-size);
	}

	input:hover {
		border: 1px solid var(--input-hover-border-color);
	}

	input:focus {
		border: 1px solid var(--input-focus-border-color);
	}

	nx-layout2 {
		display: grid;
		--flex-direction: column;
		width: 100%;
		text-align: left;
		gap: 8px;
		height: 100%;
		/* 너비 초과 방지 핵심 */
		min-width: 0;
		overflow: hidden;

		grid-template-rows: var(--rows-template, repeat(auto-fill, minmax(32px, 1fr)));

		label {
			--margin: 0 8px 0 16px;
			gap: 8px;
		}

		input[type="text"] {
			width: 100%;
		}

		.row {
			display: flex;
			--flex: 1 1 0;
			width: 100%;
			gap: 8px;
			overflow: hidden;
			--height: 32px;
		}

		.row > * {
			display: flex;
			flex: 1 1 0;
			align-items: center;
		}

		.row * {
			min-width: 0;
			overflow: hidden;
			--white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}

:host(nx-panel.theme-1) {
	.body {
		border: none;
	}
}