:root {
  --search-bar-font-default: "Pretendard", sans-serif;
  --search-bar-color-main: #3276a1;
  --search-bar-color-main-hover: #3f9eda;
  --search-bar-color-list-hover: #f7f7f9;
  --search-bar-color-text: #474747;
  --search-bar-color-text-strong: #303030;
}

.comm_search_form {
  padding: 2.2rem 0;
  border-radius: 1.2rem;
  background: #f8f8f8;
}
.comm_search_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1rem;
  margin: 0 auto;
}
.comm_search_box .selet_box {
  width: 100%;
  max-width: 25rem;
  flex: 1;
}

.comm_search_box .selet_box select:focus,
.comm_search_box .search_input input[type="text"]:focus {
  border-color: var(--search-bar-color-main);
}

.comm_search_box .search_input input[type="text"],
.comm_search_box .selet_box select {
  color: var(--search-bar-color-text-strong);
  font-size: 1.8rem;
  padding: 0.8em 3.4em 0.8em 1.4em;
  border-radius: 0.8rem;
  border: 1px solid #d6d6d6;
  background: #fff;
}

.comm_search_box .selet_box select {
  width: 100%;
  background: url("/components/searchBar/img/select-arrow.svg") no-repeat 95%
    50% #fff;
}

.comm_search_box .search_input {
  width: 100%;
  max-width: 73rem;
  flex: 1;
}
.comm_search_box .search_input input[type="text"] {
  width: 100%;
}

.comm_search_box .search_btn button {
  font-size: 1.8rem;
  padding: 0.8em 3.4em;
  border-radius: 0.8rem;
  color: #fff;
  text-align: center;

  background-color: var(--search-bar-color-main);
  cursor: pointer;

  transition: background-color 0.2s ease;
}

.comm_search_box .search_btn button:hover,
.comm_search_box .search_btn button:focus {
  background-color: var(--search-bar-color-main-hover);
}

@media screen and (max-width: 1160px) {
  .comm_search_box {
    width: 95%;
  }
}

@media screen and (max-width: 768px) {
  .comm_search_form {
    margin-top: 30px;
    padding: 12px 0;
  }
  .comm_search_box {
    flex-direction: column;
  }
  .comm_search_box .selet_box {
    max-width: none;
    width: 100%;
  }
  .comm_search_box .search_btn {
    width: 100%;
  }
  .comm_search_box .search_btn > button {
    width: 100%;
    padding: 7.5px 12px;
    font-size: 16px;
  }
  .comm_search_box .selet_box select {
    padding: 7.5px 12px;
    font-size: 16px;
  }
  .comm_search_box .search_input input[type="text"] {
    padding: 7.5px 12px;
    font-size: 16px;
  }
}