/* =========================================================
   support-search-input.css
   기존 인풋 모양(사각형, 보더, 오른쪽 검색 아이콘)은 그대로 유지
   추가되는 것: X(지우기) 버튼 + focus 시 색상 강조 효과만
   ========================================================= */

/* focus 시 컬러 강조 (기존 #363b41 대신 브랜드 컬러로) */
.keyword-search.sm-search .form-input:focus {
  border: 1px solid #FF5065;
  box-shadow: 0 0 0 3px rgba(255, 80, 101, .1);
}

/* 지우기(X) 버튼을 위해 인풋 오른쪽 패딩 확보 (검색 아이콘 20px + 여백) */
.keyword-search.sm-search .form-input {
  padding-right: 56px;
}

.keyword-search.sm-search button.sm-clear {
  /* form.css의 .keyword-search button(검색 아이콘용 absolute, right:20px 등) 리셋 */
  position: absolute !important;
  top: 50% !important;
  right: 46px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  text-indent: 0 !important;
  overflow: visible !important;
  background-image: none !important;

  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s;
}

.keyword-search.sm-search button.sm-clear.is-visible {
  display: flex !important;
}

.keyword-search.sm-search button.sm-clear:hover {
  background-color: #F0F0F2;
}

.keyword-search.sm-search button.sm-clear svg {
  width: 12px;
  height: 12px;
  display: block;
  pointer-events: none;
}

@media screen and (max-width: 599px) {
  .keyword-search.sm-search .form-input {
    padding-right: 50px;
  }

  .keyword-search.sm-search button.sm-clear {
    right: 42px !important;
    width: 20px;
    height: 20px;
  }

  .keyword-search.sm-search button.sm-clear svg {
    width: 11px;
    height: 11px;
  }
}