@charset "utf-8";

/* TODO 라디오 그룹 */

/* 접근성: 검색엔진 최적화 및 화면 숨김 처리 */
.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 {
	/* 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;

	& {
		text-wrap: balance;
	}
	/* #region atom */
	.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);
	}
	/* #endregion atom */
	/* #region molecules */
	.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%;
		}
	}
	/* #endregion molecules */
	/* #region utilities */
	.u-max-w-form {
		width: 100%;
		max-width: 580px;
	}
	/* #endregion utilities */
}