@charset "utf-8";

/* 접근성: 검색엔진 최적화 및 화면 숨김 처리 */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(100%);
}

.o-form {
	/* #region tokens */
	/* primitive */
	--spacing-01: 1px;
	--spacing-02: 2px;
	--spacing-03: 4px;
	--spacing-04: 6px;
	--spacing-05: 8px;
	--spacing-06: 10px;
	--spacing-07: 12px;
	--spacing-08: 16px;
	--spacing-09: 20px;
	--spacing-10: 24px;
	--spacing-11: 28px;
	--spacing-12: 32px;

	--border-width-0: 0;
	--border-width-1: 1px;

	--color-white: #fff;
	--color-neutral-200: #ccc;
	--color-neutral-500: #555;
	--color-neutral-800: #222;
	--color-neutral-900: #111;

	/* semantic token */
	--space-block-1: var(--spacing-05);
	--space-block-2: var(--spacing-08);
	--space-block-3: var(--spacing-10);
	--space-block-4: var(--spacing-12);
	--space-inline-1: var(--spacing-05);
	--space-inline-2: var(--spacing-08);
	--space-inline-3: var(--spacing-10);
	--border-color: #ddd;

	/* local token */
	--_form-control-padding: 0.5em;
	/* #endregion tokens */

	& {
		text-wrap: balance;
	}
	.a-form-control {
		height: auto;
		margin: 0;
		padding: var(--_form-control-padding);
		&::placeholder {
			color: revert;
		}
		select& {
			--_form-control-padding: 0.5em 1em 0.5em 0.5em;
		}
	}
	.a-form-control-desc {
		margin-top: var(--space-block-1);
	}
	.m-file-selector {
		display: block;
		& + & {
			margin-top: var(--space-block-1);
		}
		.a-file-selector-control {
			display: block;
			width: 100%;
			padding: var(--space-block-1) var(--space-inline-1);
			border: var(--border-width-1) solid var(--border-color);
			&::file-selector-button {
				margin-right: var(--space-block-1);
			}
		}
	}
	.m-captcha-code {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-inline-1);
		.a-captcha-code {
			display: block;
			align-content: center;
			padding: 0.5em 1em;
			font-weight: 700;
			color: var(--color-white);
			background: var(--color-neutral-800);
			border: var(--border-width-1) solid var(--color-neutral-200);
			user-select: none;
		}
		.a-form-control {
			width: 100%;
		}
	}
	.o-selection-group {
		display: flex;
		gap: 1em;
		flex-wrap: wrap;
		.m-selection-item {
			display: inline-flex;
			align-items: center;
			gap: 0.4ch;
		}
		.a-selection {
			margin: 0;
		}
	}
	.u-max-w-form {
		width: 100%;
		max-width: 580px;
	}
}

/* #region 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */
.u-hidden-below-sm {
	@media (width < 768px) {
		display: none;
	}
}
.u-hidden-below-md {
	@media (width < 1280px) {
		display: none;
	}
}
.u-hidden-below-lg {
	@media (width < 1920px) {
		display: none;
	}
}
.u-hidden-from-sm {
	@media (width >= 768px) {
		display: none;
	}
}
.u-hidden-from-md {
	@media (width >= 1280px) {
		display: none;
	}
}
.u-hidden-from-lg {
	@media (width >= 1920px) {
		display: none;
	}
}
/* #endregion 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */