/* input/search 같은 폼 컴포넌트 */
.input {
  width: 100%;
  padding: 10px var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-bg);
}
/* :하나는 상태(조건) :hover, :focus, :disabled
::두개는 요소의 일부(가짜 요소) ::placeholder, ::first-line, ::after
실제요소 input, 내부에 잠깐 나타나는 가짜텍스트요소 placeholder */
.input::placeholder {
  color: var(--color-text-sub);
}

.search {
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
}
.search__input {
  /* 남는 공간을 인풋이 전부 먹도록 */
  flex: 1;
  /* 인풋 자체 테두리 제거 */
  border: 0;
  /* 클릭/포커스 시 기본 파란 외곽선 제거. */
  outline: 0;
  min-width: 0;
  font-size: var(--text-body);
}
.search__btn {
  width: 28px;
  height: 28px;
  /* 버튼 테두리 제거, 색 블록만 보이게 */
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  cursor: pointer;
}

/* btn클래스가 있고 search btn클래스도 있고 hover 상태이고 disabled가 아닌 버튼 */
.btn.search__btn:hover:not(:disabled) {
  box-shadow: none;
  transform: none;
}