/*========================================
  커스텀 텍스트 입력 (Custom Text Input)
  ----------------------------------------
  PC/모바일 공용 — check_and_radio_custom.css와 동일 변수 시스템

  .search_option_label 과 같은 변수 사용:
  - 기본: --search-input-bg / --search-input-border / --search-input-text
  - 포커스: --ui-checked-bg / --ui-checked-border
  - 라벨:  --ui-option-label-radius / --ui-option-label-fontsize

  사용법:
  - 전역: 모든 input에 자동 적용 (인라인 style보다 낮은 우선순위)
  - 강화: class="custom_input" 추가 시 인라인 style 오버라이드
  - 사이즈: .input_sm / .input_lg
  - 너비: .input_auto / .input_half / .input_fixed_sm / _md / _lg
  - 그룹: <div class="input_group"> 라벨+인풋 가로 배치
========================================*/


/* ========== 1. 전역 기본 스타일 ========== */
/* 낮은 우선순위 — 인라인 style 보존 */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea {
	font-family: inherit;
	font-size: var(--ui-option-label-fontsize, 13px);
	color: var(--search-input-text);
	background-color: var(--search-input-bg);
	border: 1px solid var(--search-input-border);
	border-radius: var(--ui-option-label-radius, 5px);
	padding: 14px 6px;
	margin: 4px 4px 6px 0;
	box-sizing: border-box;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
	outline: none;
}

/* 포커스 — 체크된 체크박스와 같은 색상 */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	border-color: var(--ui-checked-border, var(--ui-checked-bg, #5B88D5));
	box-shadow: 0 0 0 3px rgba(91, 136, 213, 0.2);
}

/* 플레이스홀더 */
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
	color: var(--search-input-border);
	opacity: 1;
}

/* 비활성 */
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
textarea:disabled {
	background-color: var(--search-option-td-bg, #fafafa);
	color: var(--search-input-border);
	cursor: not-allowed;
	opacity: 0.7;
}

/* 읽기전용 */
input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="number"]:read-only,
textarea:read-only {
	background-color: var(--search-option-td-bg, #fafafa);
	cursor: default;
}


/* ========== 2. .custom_input 클래스 (인라인 스타일 오버라이드) ========== */

.custom_input {
	width: 100% !important;
	height: auto !important;
	background-color: var(--search-input-bg) !important;
	border: 1px solid var(--search-input-border) !important;
	border-radius: var(--ui-option-label-radius, 5px) !important;
	padding: 10px 12px !important;
	font-size: var(--ui-option-label-fontsize, 13px) !important;
	color: var(--search-input-text) !important;
	box-sizing: border-box;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
	outline: none;
}

.custom_input:focus {
	border-color: var(--ui-checked-border, var(--ui-checked-bg, #5B88D5)) !important;
	box-shadow: 0 0 0 3px rgba(91, 136, 213, 0.2) !important;
}

.custom_input::placeholder {
	color: var(--search-input-border) !important;
	opacity: 1;
}

.custom_input:disabled {
	background-color: var(--search-option-td-bg, #fafafa) !important;
	color: var(--search-input-border) !important;
	cursor: not-allowed;
	opacity: 0.7;
}


/* ========== 3. 사이즈 변형 ========== */

.custom_input.input_sm {
	padding: 4px 8px !important;
	font-size: 12px !important;
}

.custom_input.input_lg {
	padding: 8px 16px !important;
	font-size: 16px !important;
}


/* ========== 4. 너비 변형 ========== */

.custom_input.input_auto     { width: auto !important; }
.custom_input.input_half     { width: 50% !important; }
.custom_input.input_fixed_sm { width: 120px !important; }
.custom_input.input_fixed_md { width: 200px !important; }
.custom_input.input_fixed_lg { width: 300px !important; }


/* ========== 5. 인라인 입력 그룹 ========== */

.input_group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.input_group label {
	white-space: nowrap;
	font-size: var(--ui-option-label-fontsize, 13px);
	color: var(--search-input-text);
}


/* ========== 6. textarea ========== */

textarea.custom_input {
	min-height: 80px;
	resize: vertical;
}