/* 박스형 스위치 변형은 form-row 입력 높이와 정렬 톤을 고정한다. */
/* .form-switch.boxed {
		min-height: 3rem;
	} */

.form-switch {
	white-space: nowrap;
}

/* 플레인 스위치 변형은 배경/보더 없는 라이트 타입이다. */
.form-switch.plain {
	width: auto;
	min-height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	gap: 0.5rem;
}

.form-switch.plain .form-switch-label {
	font-size: 1rem;
	color: var(--blue-gray-700);
}

.form-switch-label {
	background-color: transparent !important;
}

.form-switch.plain:is(.is-checked, :has(input[type="checkbox"]:checked)) .form-switch-label {
	color: var(--primary);
	font-weight: 600;
}

/* plain 변형은 체크 상태에서도 박스형 배경/보더를 사용하지 않는다. */
.form-switch.plain:is(.is-checked, :has(input[type="checkbox"]:checked)) {
	border-color: transparent;
	background: transparent;
}

/* 비활성 박스 또는 disabled 입력 상태에서는 switch 전체를 비활성 토큰으로 통일한다. */
.form-box:is(.is-disabled, .is-readonly) .form-switch,
.form-switch input[type="checkbox"]:disabled ~ .form-switch-label {
	border-color: var(--border-disabled);
	background: var(--field-disabled);
	color: var(--text-disabled);
	cursor: not-allowed;
}

.form-box:is(.is-disabled, .is-readonly) .form-switch-track,
.form-switch input[type="checkbox"]:disabled + .form-switch-track {
	background: var(--blue-gray-300);
	cursor: not-allowed;
}

.form-box:is(.is-disabled, .is-readonly) .form-switch-thumb,
.form-switch input[type="checkbox"]:disabled + .form-switch-track .form-switch-thumb {
	background: var(--blue-gray-100);
	box-shadow: none;
}

.form-box:is(.is-disabled, .is-readonly) .form-switch-label,
.form-switch input[type="checkbox"]:disabled ~ .form-switch-label {
	color: var(--text-disabled);
	font-weight: 500;
}

/* plain 변형은 비활성/읽기전용에서도 컨테이너 배경/보더를 유지하지 않는다. */
.form-box:is(.is-disabled, .is-readonly) .form-switch.plain {
	border-color: transparent;
	background: transparent;
}

/* plain 변형의 비활성 라벨은 배경을 칠하지 않아야 아이콘형 톤이 유지된다. */
.form-box:is(.is-disabled, .is-readonly) .form-switch.plain .form-switch-label,
.form-switch.plain input[type="checkbox"]:disabled ~ .form-switch-label {
	background: transparent;
}

/* 체크박스/라디오 그룹은 스캐폴드 공통 레이아웃으로 묶어 스타일 일관성을 유지한다. */
.form-check-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
}

/* 멀티 선택을 체크 그룹으로 구현하더라도 셀렉트 박스 톤을 유지하는 래퍼다. */
.form-check-group.select-like {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--curved);
	background: var(--field);
}

.form-check-group.select-like .form-check-option.boxed {
	min-height: 2rem;
	padding: 0.25rem 0.5rem;
}

/* 박스형/아이콘형 옵션 공통 베이스 */
.form-check-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

/* 실제 input은 시각적으로 숨기고 커스텀 UI만 노출한다. */
.form-check-option input[type="checkbox"],
.form-check-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* 박스형은 테두리+배경이 있는 선택 카드 형태로 렌더링한다. */
.form-check-option.boxed {
	min-height: 2.5rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--curved);

	font-size: 1rem;
	line-height: 1.25rem;

	background: var(--field);
}

.form-check-option.boxed .form-check-label {
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--text);
}

/* 아이콘형은 배경 없이 아이콘+텍스트만 노출한다. */
.form-check-option.icon {
	padding: 0.25rem 0;
}

.form-check-option.icon .form-check-label {
	font-size: 1rem;
	line-height: 1.375rem;
	color: var(--blue-gray-700);
}

/* 체크 라벨은 상태 배경 레이어를 그릴 수 있도록 기준 좌표를 가진다. */
.form-check-label {
	position: relative;
	z-index: var(--z-body);

	white-space: nowrap;
}

/* 체크박스 아이콘 */
.form-check-option .form-check-icon {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 1.25rem;
	height: 1.25rem;
}

.form-check-option .form-check-icon::after {
	content: "";
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 0;
	background-image: url("/public/assets/icons/ic_checkbox_unchecked.svg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* 라디오 아이콘 */
.form-check-option .form-radio-icon {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 1.25rem;
	height: 1.25rem;
}

.form-check-option .form-radio-icon::after {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 0;
	background-image: url("/public/assets/icons/ic_radio_unchecked.svg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* 체크 상태 강조는 input checked 인접 형제 선택자로 처리한다. */

.form-check-option input[type="checkbox"]:checked ~ .form-check-icon::after {
	background-image: url("/public/assets/icons/ic_checkbox_checked.svg");
}

.form-check-option input[type="radio"]:checked ~ .form-radio-icon::after {
	background-image: url("/public/assets/icons/ic_radio_checked.svg");
}

/* boxed 변형은 선택 시 컨테이너 자체를 하이라이트해 이중 테두리를 방지한다. */
.form-check-option.boxed:has(input[type="checkbox"]:checked),
.form-check-option.boxed:has(input[type="radio"]:checked) {
	border-color: var(--primary);
	background: var(--primary-soft);
}

.form-check-option.boxed input[type="checkbox"]:checked ~ .form-check-label,
.form-check-option.boxed input[type="radio"]:checked ~ .form-check-label {
	color: var(--primary);
	font-weight: 600;
}

.form-check-option.icon input[type="checkbox"]:checked ~ .form-check-label,
.form-check-option.icon input[type="radio"]:checked ~ .form-check-label {
	color: var(--primary);
	font-weight: 600;
}

/* 체크/라디오 그룹 disabled 상태는 색상을 비활성 토큰으로 내려 상호작용 차단이 명확해야 한다. */
.form-check-option:has(input[type="checkbox"]:disabled),
.form-check-option:has(input[type="radio"]:disabled) {
	cursor: not-allowed;
}

.form-check-option input[type="checkbox"]:disabled ~ .form-check-label,
.form-check-option input[type="radio"]:disabled ~ .form-check-label {
	color: var(--text-disabled);
	font-weight: 500;
}

.form-check-option input[type="checkbox"]:disabled ~ .form-check-icon,
.form-check-option input[type="radio"]:disabled ~ .form-radio-icon {
	border-color: var(--border-disabled);
	background: var(--field-disabled);
}

.form-check-option.boxed:has(input[type="checkbox"]:disabled),
.form-check-option.boxed:has(input[type="radio"]:disabled) {
	border-color: var(--border-disabled);
	background: var(--field-disabled);
}

.form-check-option input[type="checkbox"]:disabled:checked ~ .form-check-icon::after {
	border-right-color: var(--text-disabled);
	border-bottom-color: var(--text-disabled);
}

.form-check-option input[type="radio"]:disabled:checked ~ .form-radio-icon::after {
	background: var(--text-disabled);
}

/* checkable 기본 primitive를 공통 스위치 컴포넌트로 정의한다. */
.form-switch {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
	padding: 0.625rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--curved);
	font-size: 1rem;
	line-height: 1.125rem;
	background: var(--field);
	color: var(--text);
	cursor: pointer;
}

/* .form-switch:is(.is-checked, :has(input[type="checkbox"]:checked)) {

		border-color: var(--primary);
		background: var(--primary-soft);
	} */

.form-switch.boxed {
	border-color: var(--border-default);
	background: var(--surface-default);
	color: var(--text-default);
}

.form-switch.boxed:is(.is-checked, :has(input[type="checkbox"]:checked)) {
	border-color: var(--positive);
	background: var(--positive-soft);
	color: var(--positive);
}

.form-switch.boxed:not(.is-checked):has(input[type="checkbox"]:not(:checked)) {
	border-color: var(--negative);
	background: var(--negative-soft);
	color: var(--negative);
}

/* 박스형 스위치 라벨은 체크 상태 의미를 positive/negative 토큰으로 통일한다. */
.form-switch.boxed:not(:has(input[type="checkbox"]:disabled)):not(.is-checked):has(input[type="checkbox"]:not(:checked))
	.form-switch-label {
	color: var(--negative);
	font-weight: 600;
}

.form-switch.boxed:not(:has(input[type="checkbox"]:disabled)):is(.is-checked, :has(input[type="checkbox"]:checked))
	.form-switch-label {
	color: var(--positive);
	font-weight: 600;
}

/* 체크박스 라벨과 동일한 톤을 유지한다. */
.form-switch-label {
	font-size: 0.85rem;
	color: var(--blue-gray-600);
}

.form-control-icon-only .form-switch-label {
	/* 아이콘만 쓰는 변형에서 라벨을 숨긴다. */
	display: none;
}

/* 인풋 박스처럼 래퍼가 있는 체크박스 */
.form-switch input[type="checkbox"] {
	/* 스위치 입력은 숨기고 트랙을 클릭 대상으로 쓴다. */
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* 스위치 포커스 링은 textfield/select와 같은 primary ghost 기준으로 맞춘다. */
.form-switch input[type="checkbox"]:focus-visible + .form-switch-track {
	outline: 2px solid var(--primary-ghost);
	box-shadow: 0 0 0 2px var(--primary-ghost);
	outline-offset: 2px;
}

/* 에러 상태 스위치 포커스 링은 danger ghost/soft 기준으로 덮어쓴다. */
.form-box.is-error .form-switch input[type="checkbox"]:focus-visible + .form-switch-track {
	outline: 2px solid var(--negative-soft);
	box-shadow: 0 0 0 2px var(--negative-ghost);
}

/* 성공 상태 스위치 포커스 링은 success ghost/soft 기준으로 덮어쓴다. */
.form-box.is-success .form-switch input[type="checkbox"]:focus-visible + .form-switch-track {
	outline: 2px solid var(--positive-soft);
	box-shadow: 0 0 0 2px var(--positive-ghost);
}

.form-switch-track {
	/* 체크박스 박스 대신 스위치 트랙을 배치한다. */
	position: relative;
	width: 2.75rem;
	height: 1.5rem;
	border-radius: var(--pill);
	background: var(--blue-gray-200);
	transition: background 0.2s ease;
	cursor: pointer;
}

.form-switch-thumb {
	/* 체크박스 체크 표시 대신 동그란 스위치 핸들을 쓴다. */
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--circle);
	background: var(--field);
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
	transition: transform 0.2s ease;
}

.form-switch.boxed input[type="checkbox"]:not(:checked):not(:disabled) + .form-switch-track {
	/* 박스형 스위치 비활성 상태는 negative 톤 트랙으로 맞춘다. */
	background: var(--negative);
}

.form-switch.boxed input[type="checkbox"]:checked:not(:disabled) + .form-switch-track {
	/* 박스형 스위치 활성 상태는 positive 톤 트랙으로 맞춘다. */
	background: var(--positive);
}

.form-switch input[type="checkbox"]:checked + .form-switch-track .form-switch-thumb {
	transform: translateX(20px);
}