@charset "utf-8";
@import url('./vf.css?pkg=#{timestamp}');
@import url('./icon.css?pkg=#{timestamp}');
@import url('./font.css?pkg=#{timestamp}');

:root {

	/* light */
	--bg                          : #f7f7f7;
	--text                        : rgba(0, 0, 0, 0.8);
	--io-bg                       : rgba(255, 255, 255, 0.8);
	--box-bg                      : rgba(255, 255, 255, 0.8);
	--box-border                  : rgba(0, 0, 0, 0.2);
	--io-border                   : rgba(from var(--io-text) r g b / calc(alpha - 0.5));
	--io-disabled-text            : rgba(from var(--io-text) r g b / calc(alpha - 0.6));
	--io-disabled-bg              : rgba(from var(--io-bg) r g b / calc(alpha - 0.5));
	--io-disabled-border          : rgba(from var(--io-border) r g b / calc(alpha - 0.2));
	--io-disabled-placeholder     : transparent;
	--btn-border                  : rgba(0, 0, 0, 0.33);
	--btn-shadow                  : 0 0.2ex 0.5ex 0 rgba(0, 0, 0, 0.05);
	--box-shadow                  : 0 0.5ex 1ex 0 rgba(0, 0, 0, 0.05);
	--io-spot-text                : oklch(from var(--io-spot) calc(l - 0.1) c h / 0.8);
	--io-spot-shadow              : 0 0 0.2ex 0.1ex rgba(from var(--io-spot) r g b / 0.4);
	--io-outline                  : rgba(255, 127, 0);
	--styled-table-line-color     : var(--box-border);
	--styled-table-header-bg      : rgba(0, 0, 0, 0.05);
	--styled-table-hover-bg       : rgba(0, 0, 0, 0.03);
	--io-select-deco              : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path opacity="0.5" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M 2.3 3.65 L 5 6.35 7.7 3.65"></path></svg>');

	/* dark */
	&:has(BODY.dark) {
		--bg                      : #222222;
		--text                    : rgba(255, 255, 255, 0.8);
		--io-bg                   : rgba(0, 0, 0, 0.2);
		--box-bg                  : rgba(0, 0, 0, 0.2);
		--box-border              : rgba(0, 0, 0, 0.33);
		--io-border               : rgba(from var(--box-bg) r g b / calc(alpha + 0.1));
		--io-disabled-text        : rgba(from var(--io-text) r g b / calc(alpha - 0.65));
		--io-disabled-bg          : rgba(from var(--io-bg) r g b / calc(alpha - 0.5));
		--io-disabled-border      : rgba(from var(--io-border) r g b / calc(alpha - 0.2));
		--io-disabled-placeholder : transparent;
		--btn-border              : rgba(255, 255, 255, 0.2);
		--btn-shadow              : 0 0.2ex 0.5ex 0 rgba(0, 0, 0, 0.33);
		--box-shadow              : 0 0.5ex 1ex 0 rgba(0, 0, 0, 0.2);
		--io-spot-text            : oklch(from var(--io-spot) calc(l + 0.05) c h / 0.8);
		--io-spot-shadow          : 0 0 0.2ex 0.1ex rgba(from var(--io-spot) r g b / 0.4);
		--io-outline              : rgba(255, 127, 0);
		--styled-table-line-color : var(--box-border);
		--styled-table-header-bg  : rgba(0, 0, 0, 0.2);
		--styled-table-hover-bg   : rgba(0, 0, 0, 0.1);
		--io-select-deco          : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path opacity="0.5" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M 2.3 3.65 L 5 6.35 7.7 3.65"></path></svg>');
	}

	--io-spot                     : rgb(9, 181, 255);
	--io-invalid-border           : #ef7e7e;

	--font-size                   : 12px;
	--line-height                 : 1.4;
	--border                      : rgba(from var(--text) r g b / calc(alpha - 0.4));
	--caption-text                : rgba(from var(--io-text) r g b / calc(alpha - 0.2));
	--io-text                     : var(--text);
	--io-placeholder              : rgba(from var(--io-text) r g b / calc(alpha - 0.3));
	--io-highLight-text           : rgba(from var(--io-text) r g b / calc(alpha + 0.2));
	--io-highLight-bg             : rgba(from var(--io-bg) r g b / calc(alpha + 0.1));
	--io-highLight-border         : rgba(from var(--io-border) r g b / calc(alpha + 0.1));
	--io-radio-border             : rgba(from var(--io-text) r g b / calc(alpha - 0.4));
	--io-radio-checked-border     : var(--io-radio-border);
	--io-radio-checked-bg         : transparent;

	--btn-disabled-text           : rgba(from var(--text) r g b calc(alpha - 0.4));
	--btn-disabled-bg             : rgba(0, 0, 0, 0);
	--btn-disabled-border         : rgba(0, 0, 0, 0.2);

	--box-radius                  : 1em;

	--box-gap                     : 1em;
	--box-padding                 : 1em;
	--box-padding-V               : var(--box-padding);
	--box-padding-H               : calc(var(--box-padding) * 2);

	--io-padding                  : 0.5em;
	--io-padding-V                : var(--io-padding);
	--io-padding-H                : calc(var(--io-padding) * 2);

	--icon-size                   : 1.2em;
	--io-min-height               : calc(var(--icon-size) * 2);
	--io-border-radius            : 0.2em;
	--io-transitions              : color 0.33s linear, opacity 0.33s linear, border 0.33s linear, background-color 0.33s linear, outline 0.33s linear, box-shadow 0.33s;

	--modal-win-padding           : 2em;
	--modal-min-width             : 320px;
	--modal-min-height            : 160px;
	--modal-title-height          : 3em;
	--modal-title-bg              : rgba(0, 0, 0, 0.8);
	--modal-title-text            : #ffffff;
	--modal-border-radius         : 0.6em;
	--modal-shadow                : 0 1em 1.5em 0.1em rgba(0, 0, 0, 0.2);

	--progress-size               : 6em;

	--styled-table-row-height     : 3em;
	--styled-table-padding-H      : 1em;
	--styled-table-cell-padding-V : 0.2em;
	--styled-table-cell-padding-H : 1em;
	--sticky-table-row-height     : var(--styled-table-row-height);
	--styled-table-row-hover      : var(--styled-table-hover-bg);

	--io-calendar-picker          : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"></path></svg>');
}

HTML {
	width                    : 100%;
	height                   : 100%;
	overflow                 : hidden;
	margin                   : 0;
	padding                  : 0;
	box-sizing               : border-box;
	font-smoothing           : antialiased;
	text-size-adjust         : none; /* 모바일 자동 글자크기 조정 끄기 */
	-webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */
	-moz-text-size-adjust    : none; /* 파이어폭스 */
}

BODY {

	font-size              : inherit;
	margin                 : 0;
	overflow               : auto;
	max-height             : 100%;
	min-height             : 100%;
	display                : block;
	line-height            : var(--line-height);
	-webkit-font-smoothing : antialiased;

	/*noinspection ALL*/
	& :where(*) {
		border-width : 0;
		border-style : solid;
		border-color : inherit;
	}

	& :where(HEADER, FOOTER, MAIN, SECTION, MENU, NAV) {
		display : block;
	}

	& :where(UL) {
		list-style : none;
	}

	& :where(IFRAME) {
		border     : 0;
		margin     : 0;
		padding    : 0;
		width      : inherit;
		height     : inherit;
		max-width  : inherit;
		max-height : inherit;
	}

	& :where(MENU) {
		margin  : 0;
		padding : 0;
	}

	& :where(FORM, FIELDSET:not(:has(LEGEND))) {
		margin  : 0;
		padding : 0;
	}

	& :where(IMG, UL, DL) {
		border  : 0;
		margin  : 0;
		padding : 0;
	}

	& :where(IMG) {
		line-height : 1;
	}

	& :where(ADDRESS, VAR) {
		font-weight : normal;
		font-style  : normal;
	}

	& :where(BUTTON, LABEL) {
		letter-spacing : 0.02em;
	}

	& :where(TEXTAREA) {
		resize      : none;
		line-height : var(--line-height);
	}

	& :where(INPUT, OUTPUT, SELECT, BUTTON, LABEL) {
		line-height    : 1;
		vertical-align : middle;
	}

	& :where(BUTTON) {
		min-width : max-content;
	}

	& :where(.fill-width,.fill-both) { width : stretch; }
	& :where(.fill-height,.fill-both) { height : stretch; }

	& .center-text { text-align : center !important; }
	& .right-text { text-align : right !important; }
	& .left-text { text-align : left !important; }

	& .pointer { cursor : pointer; }

	& .ellipsis {
		text-overflow : ellipsis;
		white-space   : nowrap;
		overflow      : hidden;
	}

}

HTML:has(>BODY.vf) {
	font-size : var(--font-size);
}

.vf {
	line-height      : var(--line-height);
	margin           : 0;
	padding          : 0;
	min-width        : 320px;
	width            : 100%;
	display          : flex;
	flex-direction   : column;
	color            : var(--text);
	background-color : var(--bg);
	border-color     : var(--border);
	box-sizing       : border-box;

	& *:not( ASIDE & ) {
		box-sizing             : border-box;
		font-size              : inherit;
		font-family            : inherit;
		-webkit-font-smoothing : antialiased;
	}

	& .dim {
		color : rgba(from var(--text) r g b / calc(alpha * 33%));
	}

	& :where(A) {
		text-decoration : none !important;
		color           : inherit !important;
	}

}

.val {
	cursor           : auto;
	box-sizing       : border-box;
	color            : var(--io-text);
	background-color : var(--io-bg);
	line-height      : 1.33em;
	padding          : 0 var(--io-padding-H);
	border           : thin solid var(--io-border);
}

:where(INPUT,TEXTAREA,SELECT,BUTTON,LABEL,SPAN,DIV).io {

	cursor     : auto;
	box-sizing : border-box;

	&:not(.clear) {
		border-width  : thin;
		border-style  : solid;
		border-radius : var(--io-border-radius);
		&:not(:disabled,:invalid:not(:placeholder-shown)) {
			border-color : var(--io-border);
			&:not(.btn,.icon) {
				background-color : var(--io-bg);
			}
		}
	}

	&:not(:disabled) {
		color : var(--io-text);
	}

	&:not(BUTTON) {
		padding : 0 var(--io-padding-H);
	}

	&:not(TEXTAREA) {
		align-content : space-around;
	}

	&:is(TEXTAREA) {
		resize      : none;
		padding     : var(--io-padding-V) var(--io-padding-H);
		width       : 100%;
		height      : 100%;
		min-height  : 5em;
		line-height : 1.6em;
	}

	&:is(INPUT) {

		accent-color : var(--io-text);

		&:not([type=checkbox],[type=radio]) {
			min-width   : var(--io-min-height);
			min-height  : var(--io-min-height);
			line-height : 130%;
		}

		&:is([type=checkbox],[type=radio]) {
			width  : 1.1em;
			height : 1.1em;
			margin : 0 0.2ex;
			&:not(:checked) { opacity : 50%; }
			&:not(:disabled) { cursor : pointer; }
		}

		&[type=checkbox] { border-radius : 2px !important; }

		&[type=radio] { border-radius : 50% !important; }

		&:is([type=date-time],[type=date],[type=time],[type=year],[type=month]) {
			text-align : center;
			&::-webkit-calendar-picker-indicator {
				height              : 1.2em;
				width               : 1.2em;
				margin              : 0;
				padding             : 0;
				opacity             : 0.8;
				display             : block;
				background-size     : 2ex;
				background-position : right center;
				background-image    : none;
				background-repeat   : no-repeat;
				background-color    : currentColor;
				mask-image          : var(--io-calendar-picker);
			}
			&:is(:disabled,:read-only) {
				&::-webkit-calendar-picker-indicator {
					display : none;
				}
			}
		}

		&:is([type=number]) {
			text-align : right;
			&::-webkit-inner-spin-button {
				display : none;
			}
		}

		&:invalid:not(:placeholder-shown) {
			border-color : var(--io-invalid-border);
		}

	}

	&:is(INPUT,TEXTAREA) {
		&:not(:disabled,:read-only) {
			cursor : pointer;
			&:hover {
				box-shadow : var(--io-spot-shadow);
			}
		}
	}

	&:is(INPUT,TEXTAREA,SELECT) {

		&:not(:disabled,:read-only) {
			&::placeholder { color : var(--io-placeholder); }
			&:focus {
				color            : var(--io-highLight-text);
				background-color : var(--io-highLight-bg);
				border-color     : var(--io-highLight-border);
			}
		}

		&:not(SELECT,INPUT:is([type=checkbox],[type=radio]),:disabled):read-only {
			&::placeholder { color : var(--io-disabled-placeholder); }
			color            : var(--io-text);
			background-color : var(--io-disabled-bg);
			border-color     : var(--io-disabled-border);
			outline          : none !important;
		}

		&:disabled {
			&::placeholder { color : var(--io-disabled-placeholder); }
			color            : var(--io-disabled-text);
			background-color : var(--io-disabled-bg);
			border-color     : var(--io-disabled-border);
			outline          : none !important;
		}

	}

	&:where(SELECT) {

		min-height     : var(--io-min-height);
		letter-spacing : 0.05em;
		appearance     : none;

		&:not(:disabled) {
			background-image    : var(--io-select-deco);
			background-repeat   : no-repeat;
			background-position : calc(100% - 0.5em) center;
			background-size     : 1.5em;
			padding-left        : var(--io-padding-H);
			padding-right       : calc(1.5em + var(--io-padding-H));
		}

		& OPTION {
			color            : var(--text);
			background-color : var(--bg);
			line-height      : 2em;
			letter-spacing   : 0.05em;
		}
	}

	&:where(BUTTON) {
		min-height : var(--io-min-height);
		min-width  : var(--io-min-height);
	}

	&:where(SELECT,BUTTON) {
		&:not(:disabled) {
			cursor : pointer;
			&:hover {
				box-shadow : var(--io-spot-shadow);
			}
		}
	}

	&.min {
		min-width : 0 !important;
		max-width : fit-content !important;
	}

	&.max {
		min-width : fit-content !important;
		max-width : none !important;
	}

}

:where(BUTTON, SPAN).icon {

	&:not(.io,.val) {
		min-width  : fit-content;
		min-height : fit-content;
	}

	width            : auto;
	height           : fit-content;
	line-height      : 1;
	box-sizing       : border-box;
	color            : var(--io-text);
	background-color : transparent;

	&::before {
		width               : var(--icon-size);
		height              : var(--icon-size);
		display             : inline-block;
		content             : '';
		margin              : 0;
		background-size     : contain;
		background-position : center;
		background-repeat   : no-repeat;
		background-color    : transparent;
		vertical-align      : middle;
		aspect-ratio        : 1 !important;
		mask-size           : cover;
	}

	&:not(.masked,.origin) {
		&::before {
			opacity : 0.8;
		}
		BODY.dark &::before {
			filter : invert(1);
		}
	}

	&.masked::before {
		background-image : none;
		background-color : rgba(from var(--text) r g b / calc(alpha * 0.9));
	}

	&.io::before {
		font-size : 1.2em;
	}

	&:is(SPAN) {
		padding : 0;
		display : inline-block;
	}

	&:is(BUTTON) {
		padding : 0.2em;
	}

	&:not(.with-text) {
		aspect-ratio : 1 !important;
	}

}

:where(BUTTON).btn {

	line-height      : 1;
	box-sizing       : border-box;
	color            : var(--io-text);
	background-color : var(--io-bg);
	border-style     : solid;
	border-color     : var(--btn-border);
	border-radius    : var(--io-border-radius);

	&:disabled {
		color            : var(--btn-disabled-text);
		border-color     : var(--btn-disabled-border);
		background-color : var(--btn-disabled-bg);
	}
	&:not(:disabled) {
		cursor : pointer;
		&:hover {
			box-shadow : var(--io-spot-shadow);
		}
	}

	&.ellipsis {
		white-space   : nowrap;
		text-overflow : ellipsis;
		overflow      : hidden;
		min-width     : unset;
		max-width     : unset;
		width         : 0;
	}

	&.fit {
		padding    : calc(var(--io-padding-V) / 2) calc(var(--io-padding-H) / 2);
		min-height : fit-content;
		min-width  : fit-content;
	}

	&.icon.with-text {
		padding     : var(--io-padding-V) var(--io-padding-H);
		white-space : nowrap;
		text-align  : center;
		&::before {
			margin-right   : calc(var(--io-padding-H) / 2);
			vertical-align : sub;
		}
	}

	&:not(.icon,.io) {
		padding : var(--io-padding-V) var(--io-padding-H);
	}

	&:not(.clear,.no-board) {
		border-width : thin;
		box-shadow   : var(--btn-shadow);
	}

	&.min {
		min-width : 0 !important;
		max-width : fit-content !important;
	}

	&.max {
		min-width : fit-content !important;
		max-width : none !important;
	}

}

:where(BUTTON):is(.icon,.btn) {

	&.clear {
		background-image : none;
		background-color : transparent;
	}

	&:not(.fit) { flex-shrink : 0; }

	-webkit-tap-highlight-color : transparent;

}

/* transition */
:where(:where(BUTTON).btn,:where(BUTTON,SPAN).icon,:where(INPUT,SELECT,TEXTAREA,BUTTON,SPAN,DIV).io,.val) {

	&:is(.spot) {
		border-color : transparent;
		color        : var(--io-spot-text);
		box-shadow   : var(--io-spot-shadow);
	}

	&:not(:is(.clear,BODY.flush &)) {
		transition : var(--io-transitions);
		&:where(.btn,.icon) {
			&::before, &::after {
				transition : color 0.33s linear, opacity 0.33s linear, background-color 0.33s linear;
			}
		}
	}

}

/* box, flex */
.box {
	background-color : var(--box-bg);
	border-radius    : var(--box-radius);
	border-width     : thin;
	border-style     : solid;
	border-color     : var(--box-border);
	box-shadow       : var(--box-shadow);
	&:where(FORM,FIELDSET) {
		padding : var(--io-padding-V) var(--io-padding-H);
	}
	&:where(FIELDSET) > LEGEND {
		padding : 0 0.5em;
		color   : var(--caption-text);
	}
	&:has(>.flex) {
		padding : var(--box-padding-V) var(--box-padding-H);
	}
	&:has(>.box) {
		padding : var(--box-padding);
	}
}

.flex {
	&:not(:has(.scrollable,.fill)) {
		min-width  : fit-content;
		min-height : fit-content;
	}
	&:where(&, & > FORM) {
		display : flex;
		& > * { flex : 0 1 auto; }
		& > .flex:not(SPAN) {
			flex : auto !important;
		}
	}
}

:where(.vf,.flex,.box,.wrap) {

	& *:where(H1,H2,H3,H4,H5,H6) {
		letter-spacing : 0.05em;
		margin         : 0;
		padding        : 1em 0.2em 0;
	}

	&:where(SPAN,H1,H2,H3,H4,H5,H6,VAR,CAPTION) {
		flex-direction : row;
	}

	&:has(>:where(.box,.wrap)) {
		display        : flex;
		flex-direction : column;
		gap            : calc(var(--box-gap) / 3 * 2);
		&:where(MAIN) {
			gap : var(--box-gap);
		}
		& > :where(.box,.wrap) {
			gap : inherit;
		}
	}

	&:not(.row,.horizon,.col,.vertical) {
		&:has(>:where(MAIN,HEADER,FOOTER,SECTION,DIV,UL,LI)) {
			flex-direction : column;
		}
		&:not(:has(>:where(MAIN,HEADER,FOOTER,SECTION,DIV,UL,LI))) {
			flex-direction : row;
		}
	}

	&:is(.col,.vertical) { flex-direction : column; }

	&:is(.row,.horizon) { flex-direction : row; }

	&:is(.btnList,.ioList) {
		gap : var(--io-padding);
	}

	&.padding { padding : var(--box-padding-V) var(--box-padding-H);}

	&.gap { gap : var(--box-gap);}

	& > :is(.fill-height, .fill-width, .fill-both) {
		width  : unset;
		height : unset;
	}

	& > .self-start { align-self : start; }
	& > .self-center { align-self : center; }
	& > .self-end { align-self : end; }

	& > .startAll { align-items : start; }
	& > .centerAll { align-items : center; }
	& > .endAll { align-items : end; }

	&:not(.scrollable) > :where(.wrap) {
		display : inherit;
		&:not(.fill,.expand,.fit) {
			flex : inherit;
		}
		&:not(.col,.row,.horizon,.vertical) {
			flex-direction : inherit;
		}
	}

	& > :is(.fill,.expand) {
		flex       : auto;
		align-self : stretch;
	}

	& > :is(.fit) {
		flex : 0 0 auto;
	}

	& > :is(.clip) {
		overflow : clip;
	}

	&:has(>.scrollable,>UL.sticky) {
		overflow : hidden;
	}

}

.scrollable {
	overflow : auto;
	& > * {
		flex : 0 0 auto;
	}
	&:is(FORM) {
		align-items : flex-start;
	}
}

/* form */
FORM {
	:where(.vf,.flex,.box,.wrap) & {

		display        : flex;
		flex-direction : inherit;
		gap            : var(--io-padding);

		& > FIELDSET {
			display : inherit;
			gap     : inherit;
			&:not(.col,.vertical,.row,.horizon) {
				flex-direction : inherit;
			}
		}

		&, & > FIELDSET {
			&:is(.col,.vertical) { flex-direction : column; }
			&:is(.row,.horizon) { flex-direction : row; }
			& .flex { gap : inherit; }
		}

		&:not(.col,.vertical,.row,.horizon):has(>:where(UL,TABLE)) {
			flex-direction : column;
		}

		/* searcher */
		:where(&, & *:where(FIELDSET,SPAN,DIV)):has(>INPUT[type=search]) {
			gap         : 0;
			flex        : auto;
			align-self  : stretch;
			align-items : center;
			flex-wrap   : nowrap !important;
			& > .io:not(BUTTON) {

				.io:not([hidden]) + & {
					border-top-left-radius    : 0;
					border-bottom-left-radius : 0;
					border-left               : 0;
				}

				&:has(+.io:not(BUTTON,[hidden])) {
					border-top-right-radius    : 0;
					border-bottom-right-radius : 0;
				}

				&:where(INPUT[type=search]) {
					--local-padding-right : calc(var(--icon-size) * 2 + 0.5em);
					min-width             : calc(5em + var(--local-padding-right));
					width                 : 0;
					flex                  : auto;
					align-self            : stretch;
					padding-right         : var(--local-padding-right);
				}

				&:where(INPUT[type=search]) + BUTTON {
					border-width     : 0;
					border-color     : transparent;
					background-color : transparent;
					box-shadow       : none;
					position         : relative;
					padding          : 0;
					min-width        : fit-content;
					min-height       : fit-content;
					height           : calc(var(--io-min-height) * 0.8);
					margin-left      : calc(var(--io-min-height) * -0.9);
					margin-right     : calc(var(--io-min-height) * 0.1);
				}

			}
		}

		&.range, & .range {
			display     : inline-flex;
			align-items : center;
			gap         : var(--io-padding);
			min-height  : var(--io-min-height);
			height      : var(--io-min-height);
			padding     : 0 var(--io-padding);
			&:not(.clear) {
				border-width     : thin;
				border-style     : solid;
				border-color     : var(--io-border);
				border-radius    : var(--io-border-radius);
				background-color : var(--io-bg);
			}
			& > *:is(.io,.val) {
				border           : 0;
				box-shadow       : none;
				background-color : transparent;
				min-height       : fit-content;
				height           : calc(var(--io-min-height) * 0.8);
				margin-left      : calc(var(--io-min-height) * 0.1);
				margin-right     : calc(var(--io-min-height) * -0.1);
				&:where(SELECT) {
					--local-padding     : calc(var(--io-padding-H) / 2);
					background-position : calc(100%) center;
					padding-right       : calc(1.5em + var(--local-padding));
				}
				&:not(SELECT,BUTTON) {
					padding : 0;
					&:first-child {
						padding-left : var(--io-padding-H);
					}
					&:last-child {
						padding-right : var(--io-padding-H);
					}
				}
				& + BUTTON:last-child {
					border-color     : transparent;
					background-color : transparent;
					min-width        : fit-content;
					min-height       : fit-content;
					box-shadow       : none;
					padding          : 0;
				}
			}
		}

	}
	&:is(.flow) {
		flex-wrap : wrap;
	}
}

/* TABLE */
TABLE, UL.table {

	:where(.vf,.flex,.box) > &,
	&:is(.vf,.box) {
		flex         : 0 0 auto;
		border-color : var(--styled-table-line-color);
		overflow     : hidden;
		&.self-star { align-self : start; }
		&.self-center { align-self : center; }
		&.self-end { align-self : end; }
		&.fill {
			width      : stretch;
			align-self : stretch;
		}
	}

	.box > &:first-child {
		border-top-left-radius  : inherit;
		border-top-right-radius : inherit;
	}

	.box > &:last-child {
		border-bottom-left-radius  : inherit;
		border-bottom-right-radius : inherit;
	}

	&.fixed {
		table-layout : fixed;
	}

	&.collapsed { border-collapse : collapse; }

	&.boarded { border-width : thin; }

	&.lined {
		border-collapse : separate;
		border-spacing  : 0 !important;
	}

}

TABLE {

	:where(.vf,.flex,.box) > &,
	&:is(.vf,.box) {
		& > CAPTION {
			text-align : left;
			padding    : 0.5ex 1ex 0;
			color      : var(--caption-text);
			&.head {
				caption-side : top;
			}
			&.tail {
				padding      : 0 1ex;
				caption-side : bottom;
				text-align   : right;
			}
			&.left { text-align : left; }
			&.center { text-align : center; }
			&.right { text-align : right; }
		}
		& > * {
			border-color : var(--styled-table-line-color);
			&:where(THEAD,TBODY) > TR {
				border-color : inherit;
				& > * {
					border-color : inherit;
					&:has(INPUT:is([type=checkbox],[type=radio])) {
						box-sizing : unset;
						width      : 1.2em;
					}
				}
			}
		}
	}

	&.lined {
		&:has(>CAPTION) {border-top-width : thin;}
		& > * > TR > * { border-bottom-width : thin; }
		& > *:last-child > TR:last-child > * { border-bottom-width : 0; }
		&.grid > * > TR > * { border-right-width : thin; }
		&.grid > * > TR > *:last-child { border-right-width : 0; }
		& > THEAD > TR > *,
		& > TBODY > TR > TH {
			background-color : var(--styled-table-header-bg);
		}
	}

	:not(FORM,FIELDSET) > &:is(.grid,.list) {
		& > * > TR {
			& > TH { font-weight : normal; }
			& > * {
				height  : var(--styled-table-row-height);
				padding : var(--styled-table-cell-padding-V) var(--styled-table-cell-padding-H);
				&:first-child {padding-left : calc(var(--styled-table-padding-H) + var(--styled-table-cell-padding-H));}
				&:last-child {padding-right : calc(var(--styled-table-padding-H) + var(--styled-table-cell-padding-H));}
			}
		}
	}

	&.list {
		& > * > TR > .empty { text-align : center; }
		&:not(.sticky) {
			table-layout : fixed;
		}
	}

	&.sticky {

		border-collapse : separate;
		border-spacing  : 0;

		& > :is(COLGROUP + THEAD, THEAD:first-of-type) > TR > *,
		& > :is(THEAD,TBODY) > TR > *:is(TH:first-of-type) {
			--cell-bg        : rgba(from var(--bg) r g b / calc(alpha - 0.2));
			background-image : linear-gradient(var(--styled-table-header-bg), var(--styled-table-header-bg));
			background-color : var(--cell-bg);
			white-space      : nowrap;
			position         : sticky;
		}

		& > :is(THEAD,TBODY) > TR > * {
			white-space : nowrap;
			height      : var(--sticky-table-row-height);
			&:is(TH:first-of-type) {
				left    : 0;
				z-index : 1;
			}
		}

		& > :is(COLGROUP + THEAD, THEAD:first-of-type) {
			& > TR > * {
				top     : 0;
				z-index : 1;
				&:is(TH:first-of-type) {
					z-index : 2;
				}
			}
		}

	}

	&.hoverable {
		& > TBODY > TR:hover {
			cursor           : pointer;
			background-color : var(--styled-table-hover-bg);
		}
	}

	& > * > TR > &:is(.content,.ellipsis) {
		text-overflow : ellipsis;
		white-space   : nowrap;
		overflow      : hidden;
		width         : auto;
	}

	& > TBODY {

		&.anchors {
			& > TR:has(A[href]) {
				cursor : pointer;
				&:hover {
					background-color : var(--styled-table-row-hover);
				}
			}
		}

		&.dragOn {
			& > TR:hover { background-color : transparent; }
			& > TR:is(.dragging,.dragging:hover) { background-color : #555555; }
			& > TR.dragging > TD { color : #ffffff; }
			& > TR.dragging > TD > BUTTON { opacity : 10%; }
		}

		&.leftAll > TR > * { text-align : left; }
		&.centerAll > TR > * { text-align : center; }
		&.rightAll > TR > * { text-align : right; }
		& > TR > * {
			&.left { text-align : left !important; }
			&.center { text-align : center !important; }
			&.right { text-align : right !important; }
		}

	}

	&.checkLists > * > TR > *:has(INPUT[type=checkbox]) {
		cursor : pointer;
		&:hover > INPUT[type=checkbox] {
			opacity    : 0.8;
			box-shadow : var(--io-spot-shadow);
		}
	}

}

UL {

	:where(.vf,.flex,.box,.wrap) > & {
		display        : flex;
		gap            : inherit;
		align-self     : stretch;
		flex-direction : column;
	}

	:where(FORM,FIELDSET) > & {
		display    : flex;
		gap        : inherit;
		align-self : stretch;
	}

	& > LI > :where(SPAN,DIV,LABEL) {
		display : inline-block;
		&.flex > .io:not(.icon,.fit) {
			flex : auto;
		}
	}

	&.table {

		display      : table;
		border-color : var(--styled-table-line-color);
		& > LI {
			display      : table-row;
			border-color : inherit;
			& > * {
				display        : table-cell;
				vertical-align : middle;
				&:has(INPUT,BUTTON) {
					width : 0;
				}
			}
		}

		&.lined {
			& > LI > * { border-bottom-width : thin; }
			& > LI:last-child > * { border-bottom-width : 0; }
			& > LI.head > * {
				background-color : var(--styled-table-header-bg);
			}
		}

		&.list {
			& > LI > .empty { text-align : center; }
			:not(FORM,FIELDSET) > & {
				& > LI > * {
					height  : var(--styled-table-row-height);
					padding : 0 0.5em;
					&:first-child {padding-left : 2em;}
					&:last-child {padding-right : 2em;}
				}
			}
		}

		& > LI > &:is(.content,.ellipsis) {
			text-overflow : ellipsis;
			white-space   : nowrap;
			overflow      : hidden;
			width         : auto;
		}

		&.leftAll > LI > * { text-align : left;}
		&.centerAll > LI > * { text-align : center; }
		&.rightAll > LI > * { text-align : right; }
		& > LI > * {
			&.left { text-align : left !important; }
			&.center { text-align : center !important; }
			&.right { text-align : right !important; }
		}

	}

	&.checkLists > LI > *:has(INPUT[type=checkbox]) {
		cursor : pointer;
		&:hover > INPUT[type=checkbox] {
			opacity    : 0.8;
			box-shadow : var(--io-spot-shadow);
		}
	}

	&.hoverable > LI:not(.head,.foot,.tail):hover {
		background-color : var(--styled-table-hover-bg);
	}

	&.anchors > LI:has( A[href] ) {
		cursor : pointer;
		&:hover {
			background-color : var(--styled-table-row-hover);
		}
	}

	&.sticky {
		overflow : auto;
	}

}

/* Modal */
#vf-modalWrapper {

	position : absolute;
	right    : 0;
	bottom   : 0;
	padding  : 0;
	margin   : 0;

	& * { box-sizing : border-box; }

	& > DIALOG {

		&:not(.fixed) {
			align-self   : center;
			justify-self : center;
		}

		&.fixed {
			position : fixed;
			margin   : 0;
		}

		box-sizing                  : border-box;
		outline                     : none;
		-webkit-tap-highlight-color : transparent;

		&.modal {

			font-size        : 1rem;
			border           : 0;
			box-shadow       : var(--modal-shadow);
			border-radius    : var(--modal-border-radius);
			min-width        : var(--modal-min-width);
			min-height       : var(--modal-min-height);
			max-width        : calc(100vw - calc(var(--modal-win-padding) * 2));
			max-height       : calc(100vh - calc(var(--modal-win-padding) * 2));
			display          : flex;
			flex-direction   : column;
			padding          : 0;
			gap              : 0;
			overflow         : hidden;
			background-color : var(--bg);
			color            : var(--text);

			&::backdrop {
				background : none;
			}

			&:last-child::backdrop {
				background      : linear-gradient(rgba(255, 255, 255, 0.1)), rgba(0, 0, 0, 0.66);
				backdrop-filter : blur(0.1ex);
			}

			&.modal_alert::backdrop {
				backdrop-filter : blur(0.2ex);
			}

			&.modal_passwd::backdrop {
				backdrop-filter : blur(0.5ex);
			}

			&.modal_progress SVG {
				width  : var(--progress-size);
				height : var(--progress-size);
			}

			&:not(.clear) > * {
				padding : 0 0.5em;
				.modal_lyrBtns {
					padding : 0.5em;
				}
			}

			&.clear {
				border           : 0;
				border-radius    : unset;
				box-shadow       : unset;
				background-color : transparent;
				user-select      : none;
				min-width        : 1em;
				min-height       : 1em;
			}

			& > * {
				margin : 0;
				flex   : 1 1 auto;
			}

			& > .modal_lyrUI {
				flex           : none;
				display        : flex;
				flex-direction : row;
				color          : var(--modal-title-text);
				height         : var(--modal-title-height);
				min-height     : fit-content;
				background     : var(--modal-title-bg);
				align-items    : center;
				letter-spacing : 0.05em;
				padding        : 0 0 0 1em;
				gap            : 0;
				user-select    : none;

				& > * {
					flex    : 0;
					display : flex;
				}

				.modal_uiTitle {
					padding  : 0 1ex;
					flex     : auto;
					overflow : hidden;
				}

				.modal_uiHostname:not([hidden]) + .modal_uiTitle::before {
					content : ':';
					padding : 0 1ex 0 0;
				}

				.modal_uiTitle[hidden] + .modal_uiBtns {
					margin-left : auto;
				}

				.modal_uiBtns {
					gap                         : 0.1em;
					flex-direction              : row-reverse;
					BUTTON {
						cursor           : pointer;
						width            : 3em;
						height           : 3em;
						background-color : transparent;
						border-radius    : 0;
						padding          : 0;
						margin           : 0;
						transition       : bacground-color linear 0.2s;
						&.reload:hover { background-color : #0c7bad; }
						&.close:hover { background-color : #ad0c0c; }
					}
					*:focus { outline : 0 !important; }
					-webkit-tap-highlight-color : transparent;
				}
			}

			& > .modal_lyrMsg {
				line-height    : 1.8em;
				font-size      : 1.1em;
				display        : flex;
				flex-direction : column;
				overflow       : auto;
				gap            : 1em;
				padding        : 1.25em 2em;
				P {
					margin : 0;
				}
			}

			&.modal_promptArea > .modal_lyrMsg {
				flex : none;
			}

			& > .modal_lyrIO {
				padding        : 0 1.25em 1.25em;
				display        : flex;
				flex-direction : column;
				gap            : 1em;
				&:is(FORM) {
					.io { width : 100%;}
				}
			}

			& > .modal_lyrSelector {
				padding        : 0.5em;
				display        : flex;
				flex-direction : column;
				gap            : 0.1em;
				overflow-y     : auto;
				LI {
					padding       : 0.33em 1em;
					border-radius : 0.5em;
					cursor        : pointer;
					border        : thin solid rgba(0, 0, 0, 0);
					display       : flex;
					gap           : 1ex;
					align-items   : center;
					&:hover {
						background-color : rgba(0, 0, 0, 0.1);
					}
					*:is(:has( INPUT[type=checkbox]:checked ),.selected) {
						background-color : rgba(0, 0, 0, 0.05);
						border-color     : rgba(0, 0, 0, 0.1);
						&:hover {
							background-color : rgba(0, 0, 0, 0.1);
							border-color     : rgba(0, 0, 0, 0.15);
						}
					}
				}
			}

			& > .modal_lyrProgress {
				line-height : 100%;
				.cvs {
					border-radius : 0.5em;
				}
			}

			& > .modal_lyrHtml {

				padding        : 0;
				max-width      : 100%;
				flex-direction : column;

				&:not(.flex) {
					&:not(:has(>.scrollable:where(SECTION,FORM,FIELDSET))) { overflow : auto; }
					&:has(>.scrollable:where(SECTION,FORM,FIELDSET)) { display : flex; flex-direction : column; }
				}

				&.img {
					font-size        : 10px;
					line-height      : 1;
					background-color : rgba(0, 0, 0, 0.8);
					IMG {
						max-width  : calc(100vw - 5em);
						max-height : calc(100vh - 7em);
					}
				}

				&.frame {
					font-size   : 10px;
					line-height : 1;
					overflow    : hidden;
					max-width   : calc(100vw - var(--modal-win-padding) - var(--modal-win-padding));
					max-height  : calc(100vh - var(--modal-title-height) - var(--modal-win-padding) - var(--modal-win-padding));
					IFRAME {
						width  : 100%;
						height : 100%;
						&:has(+DIV.overlay) {
							opacity : 0.66;
							& + DIV.overlay {
								position   : relative;
								background : rgba(0, 0, 0, 0.1);
							}
						}
					}
				}

				& > :where(SECTION) {
					display : flex;
					gap     : 0;
					&:not(.row,.horizon,.col,.vertical) { flex-direction : column; }
					&:has(>.scrollable) { height : 100%; }
					& > .scrollable {
						flex     : auto;
						overflow : auto;
					}
				}

				&:has(>.box) {
					padding : var(--box-padding);
				}

				&:has(>DIV.error,>DIV.loading) {
					padding         : 2em;
					display         : flex;
					flex-direction  : column;
					align-items     : center;
					justify-content : center;
					& > DIV.loading > SVG {
						width  : 4em;
						height : 4em;
					}
					& > DIV.error {
						font-size      : 1.2em;
						line-height    : 1.6;
						padding-bottom : 0.5em;
					}
				}

			}

			& > .modal_lyrBtns {
				flex                        : none;
				display                     : flex;
				flex-direction              : row;
				padding                     : 0.66em 1.5em;
				gap                         : 0.5em;
				user-select                 : none;
				justify-content             : flex-end;
				-webkit-tap-highlight-color : transparent;
				DIV {
					display        : flex;
					flex-direction : row;
					gap            : 0.5em;
				}
				BUTTON.svg {
					padding : 0;
				}
			}

			&.clear > .modal_lyrBtns {
				justify-content : space-between;
				&:is(:first-child) { padding-bottom : 0.25em; }
				&:is(:last-child) { padding-top : 0.25em; }
			}

		}

	}

}