/* =============================================================================
 * swnm 입력 컴포넌트 — .ui-input / .ui-select / .ui-textarea / .ui-field / .ui-date-range
 * (사인오프 2026-06-10)
 * 변경: 2026-06-12 · jiwon · ui-select 화살표/ui-date-range 달력 아이콘 상대경로 ../../ → ../../../ (404 수정, ui-select 최초 사용처 /admin/logs에서 발견)
 * -----------------------------------------------------------------------------
 * hex/크기 하드코딩 금지(전부 tokens.css 토큰 사용).
 *
 * 텍스트:   <input class="ui-input" placeholder="…">
 * 셀렉트:   <select class="ui-select"> … </select>
 * 여러줄:   <textarea class="ui-textarea"></textarea>
 * 라벨묶음: <div class="ui-field">
 *             <label class="ui-field__label">관측소명</label>
 *             <input class="ui-input">
 *           </div>
 * 날짜구간: <div class="ui-date-range">
 *             <span class="ui-date-field"><input type="date" class="ui-date-field__input"></span>
 *             <span class="ui-date-range__sep">−</span>
 *             <span class="ui-date-field"><input type="date" class="ui-date-field__input"></span>
 *           </div>
 *           (단일이면 ui-date-field 1개만, 하이픈 생략)
 *
 * 네임스페이스 ui-* 는 기존 form-input/filter-input/bs-select 등과 분리. 점진 흡수.
 * -----------------------------------------------------------------------------
 * 변경 이력
 * - 2026-06-12 · tanwoo · baked 아이콘 경로 오류 수정(../../ → ../../../, common/images
 *   미존재 → webapp /images/icons). select chevron·date calendar mask 둘 다 해당.
 * - 2026-06-12 · tanwoo · .ui-date-field--sm(40) 추가 — 상세 헤더 등 컴팩트 영역용.
 * - 2026-06-24 · jiwon · .is-invalid(에러 보더) + 우측 아이콘 슬롯(.ui-input-wrap / __affix /
 *   __icon / __affix-text) 추가 — 인증 화면 리팩토링용(비번 토글·클리어·타이머). tasks/20260624-auth-ui.
 * ============================================================================= */

/* ===== 공통 베이스 (input / select / textarea) ===== */
.ui-input,
.ui-select,
.ui-textarea {
  display: block;
  width: 100%;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);          /* 4px */
  font-family: var(--font-sans);
  font-size: var(--font-base);              /* 14px */
  outline: none;
  transition: border-color .15s ease;
}

.ui-input,
.ui-select {
  height: 46px;
  padding: 0 var(--space-4);                /* 0 16px */
}

.ui-input::placeholder,
.ui-textarea::placeholder,
.ui-date-field__input::placeholder { color: var(--text-muted); opacity: 1; }

/* focus = 보더 --primary (A안, 링 없음) */
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus { border-color: var(--primary); }

/* disabled */
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled,
.ui-input.is-disabled {
  opacity: .5;
  background: var(--bg-surface-alt);
  cursor: not-allowed;
}

/* invalid (에러) — focus와 같은 톤(보더만, 링 없음), --status-critical. JS로 .is-invalid 토글 */
.ui-input.is-invalid,
.ui-input.is-invalid:focus,
.ui-select.is-invalid,
.ui-textarea.is-invalid { border-color: var(--status-critical); }

/* sm (40, 버튼 md와 정렬) */
.ui-input--sm,
.ui-select--sm { height: 40px; }

/* xs (32, 버튼 xs와 정렬 — 조밀한 팝업/필터 드롭다운용. height+폰트 함께 축소)
   2026-06-22 · tanwoo · report 필터 검색칸용 신설(국소 오버라이드 → DS 정식). select xs는 필요 시 후속. */
.ui-input--xs { height: 32px; font-size: var(--font-xs); }

/* ===== select — 우측 화살표(ic_chevron-down, 중성회색) ===== */
.ui-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--space-7);            /* 32px (화살표 자리) */
  background-image: url("../../../images/icons/ic_chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 14px 14px;
}

/* ===== textarea — 여러 줄 ===== */
.ui-textarea {
  min-height: 88px;
  padding: var(--space-3) var(--space-4);   /* 12px 16px */
  line-height: 1.5;
  resize: vertical;
}

/* ===== 우측 아이콘 슬롯 — 비번 보기/숨기기·클리어·타이머 등 (입력칸 우측 내부) =====
   <span class="ui-input-wrap" data-affix="2">
     <input class="ui-input" placeholder="…">
     <span class="ui-input__affix">
       <button type="button" class="ui-input__icon"><i class="ui-ico" style="--ui-ico:url('…/ic_show.svg')"></i></button>
       <button type="button" class="ui-input__icon"><i class="ui-ico" style="--ui-ico:url('…/ic_close.svg')"></i></button>
     </span>
   </span>
   data-affix = 우측 요소 개수(1·2·3) → 입력 우측 패딩 자동. 타이머 텍스트는 .ui-input__affix-text. */
.ui-input-wrap { position: relative; display: block; }
.ui-input-wrap > .ui-input { padding-right: calc(var(--space-7) + var(--space-4)); }              /* 1개 기본: 48 */
.ui-input-wrap[data-affix="2"] > .ui-input { padding-right: calc(var(--space-7) * 2 + var(--space-3)); }       /* 아이콘 2 */
.ui-input-wrap[data-affix="3"] > .ui-input { padding-right: calc(var(--space-7) * 3 + var(--space-6)); }       /* 아이콘 2 + 타이머 */
.ui-input__affix {
  position: absolute;
  top: 50%;
  right: var(--space-4);                    /* 16px */
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);                      /* 12px */
  pointer-events: none;                     /* 자식만 클릭 가능 */
}
.ui-input__affix > * { pointer-events: auto; }
/* 슬롯 안 아이콘 버튼 (clear / password toggle) — ui-ico가 색 자동 추종 */
.ui-input__icon {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ui-input__icon:hover { color: var(--text-secondary); }
.ui-input__icon .ui-ico { width: 16px; height: 16px; }
/* 슬롯 안 보조 텍스트 (예: 인증코드 만료 타이머) */
.ui-input__affix-text {
  font-size: var(--font-xs);
  font-weight: var(--fw-bold);
  color: var(--status-critical);
  white-space: nowrap;
}

/* ===== field — 라벨 + 입력 세로 묶음 (실제 form-label 값) ===== */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                      /* 8px */
}
.ui-field__label {
  font-size: var(--font-base);              /* 14px */
  font-weight: var(--fw-medium);            /* 500 */
  color: var(--text-muted);
}

/* ===== date-range — 날짜 칸(들) ===== */
/* 칸 배경 = 실제값(#2E363E 다크 / #E2E8F0 라이트) = --bg-hover */
.ui-date-range {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);                      /* 12px (칸 ↔ 하이픈) */
}
.ui-date-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 46px;
  padding: 0 var(--space-3);                /* 0 12px */
  background: var(--bg-hover);
  border-radius: 2px;                       /* date 칸 실측 radius */
  color: var(--text-primary);
}
.ui-date-field__input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-base);
}
/* 달력 아이콘(currentColor 추종) */
.ui-date-field__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--text-muted);
  -webkit-mask: url("../../../images/icons/ic_calendar.svg") center / contain no-repeat;
          mask: url("../../../images/icons/ic_calendar.svg") center / contain no-repeat;
}
/* sm — 컴팩트 영역(상세 헤더 등). 칸 높이만 40으로 (ui-input--sm/ui-select--sm와 정렬) */
.ui-date-field--sm { height: 40px; }
/* 구간선택 하이픈 구분자 */
.ui-date-range__sep {
  color: var(--text-muted);
  font-size: var(--font-md);
}