/* ========================================================
   V141 MATCH FILTER
   ======================================================== */

.v141-filter {
  margin: 14px 0 24px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}


.v141-filter button {
  min-height: 44px;

  padding: 0 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border:
    1px solid #334866;

  border-radius:
    12px;

  background:
    #12223a;

  color:
    #a8c5ef;

  font-size:
    14px;

  font-weight:
    800;

  cursor:
    pointer;
}


.v141-filter button:hover {
  background:
    #192d4b;
}


.v141-filter button.active {
  color:
    #ffffff;

  background:
    #24466f;

  border-color:
    #4b78ac;
}


.v141-filter button span {
  min-width: 25px;
  height: 25px;

  padding: 0 7px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.09);

  font-size:
    12px;
}


/* 참고용 배지 */

.v141-reference-badge {
  margin-left: 9px;

  padding:
    4px 8px;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    7px;

  color:
    #ffd878;

  background:
    rgba(184, 130, 30, .20);

  border:
    1px solid
    rgba(236, 180, 60, .35);

  font-size:
    12px;

  font-weight:
    900;

  vertical-align:
    middle;
}


/*
 * 참고용은 기록 자체가 삭제된 게 아니므로
 * 너무 흐리게 만들진 않음.
 */
.v141-reference-card {
  opacity:
    .76;

  transition:
    opacity .15s ease;
}


.v141-reference-card:hover {
  opacity:
    1;
}


@media (max-width: 760px) {

  .v141-filter {
    gap:
      7px;
  }


  .v141-filter button {
    min-height:
      41px;

    padding:
      0 12px;

    font-size:
      13px;
  }

}