input {
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: #fff;
}

.ipt {
  padding: 10px 16px;
}

.ipt-contract {
  width: 176px;
}

.ipt-long {
  width: 292px;
}

.ipt-middle {
  width: 234px;
}

.ipt-title {
  margin-right: 40px;
}

.selectric-sel-map-region {
  margin-right: 40px;
}

.search-filter {
  border-radius: 10px;
  background: var(--gray-color);
  padding: 40px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  row-gap: 16px;
}

.search-filter .label {
  width: 76px;

  color: #3a4151;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.search-filter .selectric {
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: #fff;
  padding: 10px 16px;
  width: 184px; /** 이보다 더 크면 조회 버튼이 다음줄로 넘어감 **/
}

.search-filter .selectric .label {
  font-size: 15px;
  line-height: normal;
  height: 18px;
  color: #999;
  width: 158px;
  margin-right: 20px;
}

.search-filter .selectric .button {
  top: 50%;
  transform: translateY(-50%);
  background: none;
}

.search-filter .selectric .button:after {
  border-top-color: black;
}

.search-filter .input-date-panel {
  position: relative;
}

.search-filter .input-date-panel .input-date {
  display: flex;
  width: 118px;
  padding: 10px 16px;
  align-items: flex-start;
  gap: 60px;
  flex-shrink: 0;

  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: #fff;
}

.search-filter .input-date-panel img {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.search-filter .hypen {
  margin-inline: 8px;
  color: #dcdcdc;
}

.search-filter .ipt-ckb-tag {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;

  background-color: white;
  border: 1px solid #e8e8e8;
  white-space: nowrap; /** 이렇게 설정하지 않으면 그냥 2줄이 될 수 있음 */
}

.search-filter .ipt-ckb-tag.blue {
  background-color: var(--blue-color);
  color: #fff;
}

.search-filter .btn-search {
  color: white;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;

  white-space: nowrap;
  margin-left: 14px;
}

.selectric-select-year {
  margin-right: 40px;
}

.label-contract {
  margin-left: 40px;
}

.ipt-ckb-tag-group {
  margin-right: 40px;
}

.selectric-select-organization {
  margin-right: 40px;
}

#iptContract {
  margin-right: 40px;
}

.pin-group {
  display: flex;
  gap: 8px;
}

.pin-group .pin-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  border-radius: 6px;
  border: 1px solid #e8e8e8;
  background: #fff;
  width: 142px;
  height: 40px;

  color: #666;
}

.pin-group .pin-tag .pin-tag-label {
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

@media screen and (max-width: 1475px) {
  .search-filter {
    width: var(--mobile-content-width);
    margin-inline: 20px;
    box-sizing: border-box;
    padding: 20px;
    gap: 8px;
  }

  .search-filter .label {
    width: 100%;
  }

  .search-filter .btn-search {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    margin-left: 0;
  }

  .search-filter .selectric-wrapper {
    width: 100%;
  }

  .search-filter .input-date-panel .input-date {
    width: 105px;
    padding: 10px;
  }

  .selectric-sel-map-region .selectric {
    width: 100%;
  }

  .selectric-select-year .selectric {
    width: 100%;
  }

  .label-contract {
    margin-left: 0;
  }

  .selectric-select-organization .selectric {
    width: 100%;
  }

  #iptContract {
    width: 100%;
    margin-right: 0;
  }

  #iptCompany {
    width: 100%;
  }

  .ipt-title {
    width: 100%;
    margin-right: 0;
  }

  .ipt-content {
    width: 100%;
  }

  .pin-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pin-group .pin-tag {
    flex: 1;
  }

  .pin-group .btn-search {
    grid-column: span 2;
    width: auto;
  }
}