/* ============================================================
 * scm-input — 텍스트 입력 필드
 * ------------------------------------------------------------
 * 폼 / 모달 / 필터 입력 등에서 공용으로 사용.
 *
 * Sizes:
 *   기본            h44 (form 페이지)
 *   .scm-input--sm  h36
 *
 * States:
 *   :focus          border #000
 *   :disabled       회색 톤 + cursor not-allowed
 *
 * 부속:
 *   .scm-input-wrap         relative wrapper (counter / icon overlay 용)
 *   .scm-input-counter      input 우측 안쪽에 char counter (12px text)
 *   .scm-input-wrap--with-counter .scm-input  → padding-right 64
 * ============================================================ */

.scm-input {
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.4px;
  color: #000;
  outline: none;
  box-sizing: border-box;
}

.scm-input::placeholder {
  color: #8A8A8A;
  font-weight: 500;
}

.scm-input:focus {
  border-color: #000;
}

.scm-input:disabled {
  background: rgba(138, 138, 138, 0.10);
  border-color: #EBEBEB;
  color: rgba(0, 0, 0, 0.20);
  cursor: not-allowed;
}

.scm-input:disabled::placeholder {
  color: rgba(0, 0, 0, 0.20);
}

/* Sizes */
.scm-input--sm {
  height: 36px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 19.6px;
}

/* Wrap (counter / icon overlay) */
.scm-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.scm-input-counter {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 18px;
  color: #8A8A8A;
  pointer-events: none;
}

.scm-input-wrap--with-counter .scm-input {
  padding-right: 64px;
}