/*
 * 판매자센터 공통 input 스타일 (channel, step01~step05)
 * Figma 디자인 토큰 기준 5가지 상태:
 *   1) 기본    : bg #F9F9FC / border 0.5px #EEE / placeholder #808B96 / text #545F71
 *   2) 입력중   : bg #ECEFF6 / border 0.5px #EEE / text #545F71
 *   3) 입력완료 : bg #F9F9FC / border 0.5px #EEE / text #545F71
 *   4) readonly: bg #EDEDED / border 0.5px #EEE / text #545F71
 *   5) 에러    : bg #F9F9FC / border 0.5px #EB0000 / text #545F71 / label·message #EB0000
 *
 * 적용 대상 클래스:
 *   - .input-control          (step02/03/04 일반 input/select/textarea)
 *   - .input-wrapper input    (channel.html)
 *   - .step-inputbox          (step01 사업자번호 — div wrapper 구조라 별도)
 *
 * 각 페이지 inline <style> 뒤에 link 되어 후순위로 override 됩니다.
 */

/* ---------- input 본체 (input-control + input-wrapper input) ----------
 * selector에 element type(input/select/textarea)을 명시해 specificity 0.0.1.1
 * → 각 페이지 inline의 .input-control(0.0.1.0) 룰을 항상 우선함
 */
input.input-control,
select.input-control,
textarea.input-control,
.input-wrapper input {
    background: #F9F9FC;
    border: 0.5px solid #EEEEEE;
    color: #545F71;
    outline: none;
}
input.input-control::placeholder,
textarea.input-control::placeholder,
.input-wrapper input::placeholder { color: #808B96; }

input.input-control:focus,
select.input-control:focus,
textarea.input-control:focus,
.input-wrapper input:focus {
    background: #ECEFF6;
    border: 0.5px solid #EEEEEE;
    color: #545F71;
    outline: none;
}

input.input-control[readonly],
input.input-control.readonly,
select.input-control[readonly],
select.input-control.readonly,
textarea.input-control[readonly],
textarea.input-control.readonly,
.input-wrapper input[readonly] {
    background: #EDEDED;
    border: 0.5px solid #EEEEEE;
    color: #545F71;
    cursor: not-allowed;
}

input.input-control.is-error,
input.input-control[aria-invalid="true"],
select.input-control.is-error,
select.input-control[aria-invalid="true"],
textarea.input-control.is-error,
textarea.input-control[aria-invalid="true"],
.input-wrapper input.is-error,
.input-wrapper input[aria-invalid="true"] {
    border: 0.5px solid #EB0000;
    background: #F9F9FC;
    outline: none;
}

/* select — 화살표 아이콘 유지하면서 배경색 상태별 동기화 */
select.input-control { background-color: #F9F9FC; }
select.input-control:focus { background-color: #ECEFF6; }
select.input-control[readonly],
select.input-control.readonly { background-color: #EDEDED; }

/* textarea — 동일 색상군 */
textarea.input-control,
.input-control.textarea {
    background: #F9F9FC;
}
textarea.input-control:focus,
.input-control.textarea:focus { background: #ECEFF6; }

/* ---------- step01 사업자번호 (.step-inputbox는 wrapper div) ---------- */
.step-inputbox {
    background: #F9F9FC;
    border: 0.5px solid #EEEEEE;
}
.step-inputbox input { color: #545F71; }
.step-inputbox input::placeholder { color: #808B96; }

#biz-wrap:focus-within .step-inputbox {
    background: #ECEFF6;
    border-color: #EEEEEE;
}
/* 입력완료(blur with value) — 기본 배경과 동일 */
#biz-wrap.has-value .step-inputbox {
    background: #F9F9FC;
    border-color: #EEEEEE;
}
#biz-wrap.is-error .step-inputbox {
    background: #F9F9FC;
    border-color: #EB0000;
}
.step-inputbox input:disabled,
.step-inputbox input[readonly] {
    background: #EDEDED;
    color: #545F71;
    cursor: not-allowed;
}

/* ---------- label ---------- */
.input-label,
.form-label {
    color: #333333;
}
.input-label.is-error,
.form-label.is-error,
label.is-error { color: #EB0000; }

/* ---------- input-wrapper + clear-icon (x 버튼) ---------- *
 * channel.html은 처음부터 .input-wrapper 마크업 사용
 * step02/03/04는 js/input-clear.js 가 런타임에 동적으로 wrapping
 *
 * 표시 조건: 포커스가 있을 때만(:focus-within) → blur 시 자동 사라짐
 *           (.has-value 룰은 제거 — 사용자 요구로 blur 시 x버튼 숨김)
 */
.input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}
/* .form-inline 안에선 input과 동일 grow 규칙 적용 — 옆에 버튼 있는 경우 input이 줄어들지 않도록 */
.form-inline .input-wrapper {
    flex: 1 1 0;
    min-width: 120px;
    width: auto;
}
.clear-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: transparent url('../img/clear-icon.png') no-repeat center / 16px 16px;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: none;
}
.input-wrapper:focus-within .clear-icon,
.input-wrapper input:focus + .clear-icon,
.clear-icon.active { display: block; }
/* readonly 상태에서는 x 버튼 숨김 */
.input-wrapper input[readonly] + .clear-icon,
.input-wrapper input[readonly] ~ .clear-icon { display: none; }

/* ---------- error 메시지 ---------- */
.error-msg,
.step-help.error {
    color: #EB0000;
    font-size: 12px;
    line-height: 16px;
}
/* 모든 유효성 검사 텍스트 앞에 '𝒊 ' 접두 (linkfe ErrorMsg와 동일 패턴) */
.error-msg::before,
.step-help.error::before {
    content: '𝒊 ';
}