/* 체크박스/라디오 그룹은 스캐폴드 공통 레이아웃으로 묶어 스타일 일관성을 유지한다. */
.form-input-checkable-group {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}

.form-input-checkable-group > label.form-input-checkable-option {
	flex: 0 0 auto;
}

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

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

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

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

/* 박스형은 테두리+배경이 있는 선택 카드 형태로 렌더링한다. */
.form-input-checkable-option.is-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-input-checkable-option.is-boxed .form-input-checkable-label {
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--text);
}

/* 아이콘형은 배경 없이 아이콘+텍스트만 노출한다. 라벨 메트릭은 베이스(아래) 와 동일. */
.form-input-checkable-option.plain {
	padding: 0.25rem 0;
	border: 1px solid transparent;
}

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

	white-space: nowrap;
}

/*
	디자인 시스템 단일 진입점: 옵션 라벨 텍스트의 기본 메트릭.
	variant(.plain / .is-boxed) 없이 사용해도 페이지 기본 폰트가 새어들어오지 않도록
	기본값을 명시한다. .is-boxed 는 자체 메트릭(아래)으로 override 하고,
	.plain 은 기본값과 동일해 별도 override 가 불필요하다.
*/
.form-input-checkable-option .form-input-checkable-label {
	font-size: 1rem;
	line-height: 1.375rem;
	color: var(--blue-gray-700);
}

/* 체크 시 primary 강조 — 변형 미지정에서도 동작 (.is-boxed 는 자체 배경+텍스트 규칙으로 별도 처리). */
.form-input-checkable-option:not(.is-boxed) input[type="checkbox"]:checked ~ .form-input-checkable-label {
	color: var(--primary);
}

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

.form-input-checkable-option .form-input-checkbox-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;
}

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

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

/* 부분선택(indeterminate) — 그룹 전체선택 등에서 일부만 체크된 상태. JS가 input.indeterminate=true 로 설정한다.
   :checked 규칙 뒤에 두어, 둘 다 설정돼도 부분선택 표시가 우선되게 한다. */
.form-input-checkable-option input[type="checkbox"]:indeterminate ~ .form-input-checkbox-icon::after {
	background-image: url("/public/assets/icons/ic_checkbox_indeterminate.svg");
}

/* 키보드 포커스 링 — 실제 input 은 시각적으로 숨겨지므로 인접 아이콘에 링을 그린다. */
.form-input-checkable-option input[type="checkbox"]:focus-visible ~ .form-input-checkbox-icon {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

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

.form-input-checkable-option.is-boxed input[type="checkbox"]:checked ~ .form-input-checkable-label {
	color: var(--primary);
}

/* .plain 의 :checked 강조는 베이스 :not(.is-boxed) 규칙(위)으로 통합. */

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

.form-input-checkable-option input[type="checkbox"]:disabled ~ .form-input-checkable-label {
	color: var(--text-disabled);
}

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

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

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

/* -------------------------------------------------------------------------- */
/* 스위치 (.form-input-checkable-switch): 베이스 → plain → is-boxed → 비활성 → 트랙/썸        */
/* -------------------------------------------------------------------------- */

.form-input-checkable-switch {
	/* 숨긴 checkbox 는 position:absolute 다. 여기서 기준점을 만들지 않으면 그 input 의 기준이
	   화면 껍데기(.main-shell)까지 올라가고, 스크롤 상자(.content) 바깥이라 잘리지 않는다.
	   그러면 body 가 폼 길이만큼 스크롤 가능해져(overflow:hidden 이어도 스크립트·포커스로는 스크롤된다),
	   아래쪽 스위치를 누르는 순간 브라우저가 그 input 을 보이려고 body 를 스크롤해 화면 전체가 밀려난다.
	   (2026-09-01 Ted 제보 "역할 편집에서 아래쪽 스위치 누르면 화면이 사라진다" 실측 원인)
	   .form-input-checkable-option 은 이미 position:relative 를 갖고 있다 — 스위치 변형만 빠져 있었다. */
	position: relative;
	white-space: nowrap;
	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-input-checkable-switch.plain {
	flex-direction: row;

	width: auto;
	min-height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	gap: 0.5rem;
}

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

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

.form-input-checkable-switch.plain:is(.is-checked, :has(input[type="checkbox"]:checked)) {
	border-color: transparent;
	background: transparent;
}

.form-box.is-disabled .form-input-checkable-switch.plain {
	border-color: transparent;
	background: transparent;
}

/* 라벨 기본(박스형에서 .is-boxed 라벨 규칙이 덮어씀; plain은 위 블록이 우선) */
.form-input-checkable-label {
	background-color: transparent !important;
	font-size: 0.875rem;
	color: var(--blue-gray-600);
}

.form-control-icon-only .form-input-checkable-label {
	display: none;
}

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

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

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

/* -------------------------------------------------------------------------- */
/* `.is-negative-on` — 의미가 반대인 스위치 (체크=위험/거부, 해제=정상/수신)                       */
/* 기본 규칙: 체크=positive(green), 해제=negative(red).                                        */
/* opt-out 류(예: 메시지 수신 *거부*) 처럼 ON 자체가 위험 상태를 뜻할 때 본 모디파이어로 색을 뒤집는다. */
/* 라벨 기본/박스형/라벨 텍스트 색 모두 한 곳에서 일관되게 뒤집어, 말과 색이 같은 방향을 가리키게 한다. */
/* -------------------------------------------------------------------------- */
.form-input-checkable-switch.is-negative-on.is-boxed:not(:has(input[type="checkbox"]:disabled)):is(
		.is-checked,
		:has(input[type="checkbox"]:checked)
	) {
	border-color: var(--negative);
	background: var(--negative-soft);
	color: var(--negative);
}

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

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

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

/* 트랙(슬라이더 본체) 색도 의미 반전 — ON 일 때 negative, OFF 일 때 positive.
   기본 트랙 규칙 (`...:checked:not(:disabled) + .form-input-switch-track { positive }`) 와 동일 specificity 이지만
   본 파일 뒤쪽에 정의돼 있어 cascade 우선순위로 그쪽이 이긴다. 따라서 동일 selector 형태(`:checked:not(:disabled)`) 로 specificity 를 동률 이상으로 맞추고, 본 모디파이어가 cascade 끝까지 살아남도록 `.is-negative-on` 한 클래스를 추가해 specificity 를 1 단계 끌어올린다. */
.form-input-checkable-switch.is-negative-on input[type="checkbox"]:checked:not(:disabled) + .form-input-switch-track {
	background: var(--negative);
}

.form-input-checkable-switch.is-negative-on input[type="checkbox"]:not(:checked):not(:disabled) + .form-input-switch-track {
	background: var(--positive);
}

/* 비활성(disabled) 박스형 스위치는 긍정/부정 색이 아닌 명확한 회색 톤으로 — 라벨/트랙만 회색이면 박스 자체가 활성처럼 보여 혼동된다. readonly 는 정상 상태색 유지(값 표시 전용). */
.form-input-checkable-switch.is-boxed:has(input[type="checkbox"]:disabled),
.form-box.is-disabled .form-input-checkable-switch.is-boxed {
	border-color: var(--border-disabled);
	background: var(--field-disabled);
	color: var(--text-disabled);
	cursor: not-allowed;
}

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

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

.form-input-checkable-switch input[type="checkbox"]:disabled ~ .form-input-checkable-label {
	border-color: var(--border-disabled);
	background: var(--field-disabled);
	color: var(--text-disabled);
	cursor: not-allowed;
	font-weight: 500;
}

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

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

.form-input-checkable-switch.plain input[type="checkbox"]:disabled ~ .form-input-checkable-label {
	background: transparent;
}

.form-input-checkable-switch input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.form-input-checkable-switch input[type="checkbox"]:focus-visible + .form-input-switch-track {
	outline: 2px solid var(--primary-ghost);
	box-shadow: 0 0 0 2px var(--primary-ghost);
	outline-offset: 2px;
}

.form-input-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-input-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-input-checkable-switch input[type="checkbox"]:not(:checked):not(:disabled) + .form-input-switch-track {
	background: var(--negative);
}

.form-input-checkable-switch input[type="checkbox"]:checked:not(:disabled) + .form-input-switch-track {
	background: var(--positive);
}

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