/**
 * @ownership shared/components
 * @description 커스텀 셀렉트의 전역 기본 UI/상호작용/variant/form-box 상태 토큰을 소유한다.
 * @boundary 스캐폴드는 list/form 문맥 배치만 확장하고, select 자체 모양과 상태는 이 파일이 소유한다.
 */

/**
 * @ownership shared/components/form-input
 * @description 커스텀 셀렉트(select.js) 전용: 뷰포트가 좁을 때만 쓰는 body 고정 바텀시트·헤더·딤.
 * @boundary formula-help·모달과 스타일을 공유하지 않는다(각 기능의 반응형 variant만 유사할 뿐).
 */

.base-select-layer-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
	background: rgba(15, 23, 42, 0.45);
	-webkit-tap-highlight-color: transparent;
}

.base-select-layer-backdrop.base-select-layer-backdrop--bottom {
	align-items: flex-end;
	justify-content: stretch;
	padding: 0;
}

.base-select-layer-shell {
	display: flex;
	flex-direction: column;
	width: min(100%, 22rem);
	max-height: min(85vh, 32rem);
	border-radius: var(--curved);
	background: var(--white);
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--border);
	overflow: hidden;
}

.base-select-layer-shell.base-select-layer-shell--bottom {
	width: 100%;
	max-width: 100%;
	border-radius: var(--curved) var(--curved) 0 0;
	min-height: 50dvh;
	max-height: min(88vh, 100dvh);
	margin: 0;
	padding-bottom: env(safe-area-inset-bottom, 0);
	display: flex;
	flex-direction: column;
}

.base-select-layer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-shrink: 0;
	padding: 0.75rem 1rem;
	/* border-bottom: 1px solid var(--border); */
	background: var(--field);
}

.base-select-layer-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.base-select-layer-close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: var(--curved);
	background: transparent;
	color: var(--blue-gray-600);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.base-select-layer-close:hover {
	background: var(--blue-gray-200);
}

.base-select-menu.base-select-menu-layer {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	width: 100%;
	max-height: none;
	margin: 0;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	border: none;
	border-radius: 0;
	box-shadow: none;
	/* 셸(flex column) 안에서 본문 높이를 쓰고 옵션 영역만 스크롤 */
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.base-select-menu.base-select-menu-layer .base-select-options {
	max-height: min(50vh, 18rem);
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.base-select-layer-shell--bottom .base-select-menu.base-select-menu-layer .base-select-options {
	max-height: min(52vh, 60dvh);
}

body.is-base-select-layer-open {
	overflow: hidden;
}

/* 네이티브 select는 JS 확장이 없어도 동일 톤으로 보이도록 기본 디자인을 먼저 보장한다. */
.form-select-wrap {
	position: relative;
	display: block;
	width: 100%;
}

.form-select-wrap.plain {
	display: inline-flex;
	width: auto;
	max-width: 100%;
}

.form-select {
	width: 100%;
	min-height: 3rem;
	padding: 0.625rem 2.5rem 0.625rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--curved);

	background-color: var(--field);
	background-image: url("/public/assets/icons/ic_dropdown_gray.svg");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.5rem 1.5rem;
	color: var(--text);
	font-size: 1rem;
	line-height: 1.25rem;

	/* 브라우저 기본 화살표를 제거하고 공통 아이콘 스타일로 통일한다. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.form-box :is(.form-select, .base-select-trigger) {
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease;
}

.form-select.plain {
	width: auto;
	min-width: 6.5rem;
	min-height: 2.25rem;
	padding: 0.375rem 1.5rem 0.375rem 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	background-position: right center;
	background-size: 1rem 1rem;
	font-size: 0.9375rem;
	line-height: 1.25rem;
}

.form-box.is-focus :is(.form-select, .base-select-trigger),
.form-box:focus-within :is(.form-select, .base-select-trigger) {
	border-color: var(--primary);
	outline: 2px solid var(--primary-ghost);
	box-shadow: 0 0 0 2px var(--primary-ghost);
}

.form-box.is-error :is(.form-select, .base-select-trigger) {
	border-color: var(--negative);
	background: var(--negative-ghost);
}

.form-box.is-error :is(.form-select, .base-select-trigger):is(:focus, :focus-visible) {
	border-color: var(--negative);
	outline: 2px solid var(--negative-soft);
	box-shadow: 0 0 0 2px var(--negative-ghost);
}

.form-box.is-success :is(.form-select, .base-select-trigger) {
	border-color: var(--positive);
	background: var(--positive-ghost);
}

.form-box:is(.is-disabled, .is-readonly) :is(.form-select, .base-select-trigger) {
	background: var(--field-disabled);
	border-color: var(--border-disabled);
	color: var(--text-disabled);
}

/* IE/구형 Edge 기본 드롭다운 아이콘 영역을 숨긴다. */
.form-select::-ms-expand {
	display: none;
}

.form-select:is(:focus, :focus-visible) {
	outline: 2px solid var(--primary-ghost);
	border-color: var(--primary);
	box-shadow: 0 0 0 2px var(--primary-ghost);
}

/* 기본 화살표 아이콘은 네이티브 select fallback에서도 동일 톤으로 유지한다. */
.form-select-wrap .form-select-arrow {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 1.5rem;
	height: 1.5rem;
	transform: translateY(-50%);
	background-image: url("/public/assets/icons/ic_dropdown_gray.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

.form-select-wrap.plain .form-select-arrow {
	right: 0;
	width: 1rem;
	height: 1rem;
}

/* disabled는 브라우저 기본 흐림 대신 공통 토큰을 사용한다. */
.form-select:disabled {
	border-color: var(--border-disabled);
	background-color: var(--field-disabled);
	background-image: url("/public/assets/icons/ic_dropdown_gray.svg");
	color: var(--text-disabled);
	opacity: 1;
	cursor: not-allowed;
}

.form-select.plain:disabled {
	border-color: transparent;
	background-color: transparent;
	background-image: none;
}

.form-select:disabled + .form-select-arrow,
.form-select-wrap:has(.form-select:disabled) .form-select-arrow {
	opacity: 0.42;
}

/* 공통 셀렉트 래퍼 */
.base-select {
	position: relative;
	width: 100%;
}

.base-select-native {
	display: none;
}

.base-select-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;

	padding: 0.625rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--curved);

	background: var(--field);
	color: var(--text);
	font-size: 1rem;
	line-height: 1.25rem;

	cursor: pointer;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.base-select.plain {
	display: inline-flex;
	width: auto;
	max-width: 100%;
}

.base-select.plain .base-select-trigger {
	width: auto;
	min-width: 6.5rem;
	min-height: 2.25rem;
	padding: 0.375rem 0 0.375rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	gap: 0.375rem;
	font-size: 0.9375rem;
	line-height: 1.25rem;
}

.base-select.plain .base-select-value {
	flex: 0 1 auto;
}

.base-select-trigger:is(:focus, :focus-visible),
.base-select:is(.is-focus, :focus-within) .base-select-trigger {
	outline: 2px solid var(--primary-ghost);
	border-color: var(--primary);
	box-shadow: 0 0 0 2px var(--primary-ghost);
}

.base-select-value {
	flex: 1;

	text-align: left;
	font-size: 1rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	color: inherit;
}

.base-select-placeholder {
	color: var(--blue-gray-500);
}

/* 멀티 셀렉트는 선택값을 트리거 안에서 칩/카운트형으로 요약한다. */
.base-select-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	min-width: 0;
}

.base-select-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--primary-border);
	border-radius: var(--pill);
	background: var(--primary-ghost);
	color: var(--primary);
	font-size: 0.875rem;
	line-height: 1rem;
	white-space: nowrap;
}

.base-select-chip.count {
	border-color: var(--blue-gray-300);
	background: var(--blue-gray-100);
	color: var(--blue-gray-700);
}

.base-select-caret {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	mask: url("/public/assets/icons/ic_dropdown_gray.svg") center / contain no-repeat;
	-webkit-mask: url("/public/assets/icons/ic_dropdown_gray.svg") center / contain no-repeat;

	background: var(--blue-gray-500);

	transition: transform 0.2s ease;
}

.base-select.is-open .base-select-caret {
	transform: rotate(-180deg);
}

/* 멀티 셀렉트는 트리거 높이를 자동으로 열어 칩이 자연스럽게 감기도록 한다. */
.base-select-multiple-wrap .base-select-trigger {
	align-items: center;
	min-height: 3rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.base-select-multiple-wrap .base-select-value {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
}

/* disabled 상태에서는 트리거/검색 영역을 명확히 비활성 톤으로 고정한다. */
.base-select.is-disabled .base-select-trigger {
	cursor: not-allowed;
	opacity: 1;
	border-color: var(--border-disabled);
	background: var(--field-disabled);
	color: var(--text-disabled);
	box-shadow: none;
}

.base-select.is-disabled .base-select-value,
.base-select.is-disabled .base-select-placeholder {
	color: var(--text-disabled);
}

.base-select.is-disabled .base-select-caret {
	background: var(--blue-gray-400);
}

/* disabled 시 메뉴 UI를 닫힌 상태로 고정해 오해를 줄인다. */
.base-select.is-disabled .base-select-menu {
	opacity: 0;
	pointer-events: none;
}

.base-select-menu {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	right: 0;
	/* 셀렉트 드롭다운은 팝오버 레이어에서 동작한다. */
	z-index: var(--z-layout);

	border: 1px solid var(--border);
	border-radius: var(--curved);
	background: var(--white);
	box-shadow: var(--shadow-soft);

	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.base-select.is-open .base-select-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* .table-scroll overflow 클리핑 회피: tbody 안 셀렉트는 메뉴를 body로 옮겨 fixed 배치한다. */
.base-select-menu.base-select-menu-portal {
	position: fixed;
	top: 0;
	left: 0;
	right: auto;
	width: auto;
	max-height: min(18rem, calc(100vh - 2rem));
	margin: 0;
	z-index: var(--z-layout);
}

.base-select-menu.base-select-menu-portal.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/*
 * 모바일 바텀시트/레이어 셸 안으로 메뉴를 옮길 때에도 --portal 클래스가 남는다.
 * 이때 .base-select-menu-portal 단독 규칙의 position:fixed; top:0; left:0 이 적용되면
 * 옵션 목록이 화면 좌상단에 뜨고 셸 본문은 비어 보인다(레이어·레거시 포털 충돌).
 */
.base-select-menu.base-select-menu-portal.base-select-menu-layer,
.base-select-menu.base-select-menu-portal.base-select-menu-layer.is-open {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	width: 100%;
	z-index: auto;
	max-height: none;
	margin: 0;
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

.base-select-options {
	max-height: 14rem;
	overflow-y: auto;
	padding: 0.25rem;
	display: grid;
	gap: 0.25rem;
}

.base-select-option {
	position: relative;
	width: 100%;
	text-align: left;
	border: none;
	border-radius: 0.5rem;
	background: transparent;
	padding: 0.5rem 2.5rem 0.5rem 0.75rem;
	font-size: 1rem;
	color: var(--blue-gray-800);
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.base-select-option-content {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	width: 100%;
	min-width: 0;
}

.base-select-option-label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.base-select-option-meta {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 1.5rem;
}

/* 옵션 오른쪽 보조 데이터는 badge로 가볍게 보여 준다. */
.base-select-option-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	border: 1px solid var(--blue-gray-300);
	border-radius: var(--pill);
	background: var(--blue-gray-100);
	color: var(--blue-gray-600);
	font-size: 0.75rem;
	line-height: 0.75rem;
}

.base-select-option:hover {
	background: var(--blue-gray-200);
}

.base-select-option.is-active {
	background: var(--primary-ghost);
	outline: 1px solid var(--primary-border);
}

.base-select-option:disabled {
	color: var(--blue-gray-400);
	cursor: not-allowed;
	background: transparent;
}

.base-select-option.is-selected {
	background: var(--primary-light);
	color: var(--primary);
	font-weight: 600;
}

/* 선택된 옵션은 우측 끝 체크 아이콘으로도 상태를 보여 준다. */
.base-select-option.is-selected::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 1rem;
	height: 1rem;
	transform: translateY(-50%);
	background-image: url("/public/assets/icons/ic_checked_primary.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* 검색 기능이 있는 콤보박스 */
.base-select-searchable-wrap .base-select-menu {
	padding: 0.5rem 0.5rem 0.25rem;
}

.base-select-search {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0.25rem 0.25rem 0.5rem;
}

.base-select-search-input {
	flex: 1;

	width: 100%;
	height: 2.25rem;
	/* 인풋 내부 우측 clear 아이콘 공간을 확보한다. */
	padding: 0.5rem 2.5rem 0.5rem 0.75rem;
	border: 1px solid var(--blue-gray-300);
	border-radius: var(--curved);
	background: var(--field);
	color: var(--text);
	font-size: 0.875rem;
	/* 검색 입력의 브라우저 기본 clear(X) UI를 비활성화해 커스텀 지우기 버튼으로 통일한다. */
	appearance: textfield;
	-webkit-appearance: textfield;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

/* 검색형 셀렉트의 내부 search input도 textfield와 동일한 포커스 톤을 사용한다. */
.base-select-search-input:is(:focus, :focus-visible) {
	outline: 2px solid var(--primary-ghost);
	border-color: var(--primary);
	box-shadow: 0 0 0 2px var(--primary-ghost);
}

/* WebKit 계열에서 기본 search 취소(X) 버튼을 숨긴다. */
.base-select-search-input::-webkit-search-cancel-button,
.base-select-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

/* IE/구형 Edge 기본 clear 버튼 영역을 숨긴다. */
.base-select-search-input::-ms-clear,
.base-select-search-input::-ms-reveal {
	display: none;
}

.base-select-search-clear {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(calc(-50% - 0.125rem));
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition: opacity 0.12s ease;
}

/* 입력값이 있을 때만 clear 아이콘을 보이고 클릭 가능하게 만든다. */
.base-select-search-clear.is-visible {
	opacity: 0.72;
	pointer-events: auto;
}

.base-select-search-clear:hover {
	opacity: 1;
}

.base-select.is-disabled .base-select-search-input,
.base-select.is-disabled .base-select-search-clear {
	cursor: not-allowed;
}

.base-select.is-disabled .base-select-search-input {
	border-color: var(--border-disabled);
	background: var(--field-disabled);
	color: var(--text-disabled);
}

.base-select.is-disabled .base-select-search-input::placeholder {
	color: var(--text-disabled);
}

/* 검색어 초기화 아이콘은 리스트 검색 submit 아이콘과 동일한 close 자산을 사용한다. */
.base-select-search-clear-icon {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-image: url("/public/assets/icons/ic_close_black.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.base-select-empty {
	padding: 0.5rem 0.75rem 0.75rem;
	font-size: 0.875rem;
	color: var(--blue-gray-500);
}

/* 스캐폴드 상태 토큰이 강제되는 문맥에서는 화살표 톤도 동일한 비활성 레벨로 맞춘다. */
.form-box:is(.is-disabled, .is-readonly) .form-select-wrap .form-select-arrow {
	opacity: 0.42;
}

/* read-only 박스에서도 네이티브 select fallback의 커서를 비활성 톤으로 고정한다. */
.form-box.is-readonly .form-select:not(:disabled) {
	cursor: not-allowed;
}