/* ============================================================
   게시판 거르개
   ------------------------------------------------------------
   목록 바로 위. 왼쪽에 지역 고르개, 오른쪽에 지금 걸려 있는 조건들.

   검색칸은 여기 두지 않는다 - 이 화면에는 이미 위쪽에 검색칸이 있고, 하나를 더
   놓으면 어느 쪽이 무엇을 찾는지 아무도 모른다. 대신 검색어도 아래 조각으로
   나와, 걸려 있다는 것과 떼는 방법이 한자리에서 보인다.
   ============================================================ */
/* 위와 아래가 같아야 한다. 예전에는 아래에만 회색 줄과 여백이
   있어서, 거르개가 길라잡이에 붙고 아래로만 틀이 벌어져 한쪽으로
   기울어져 보였다. 재어 보니 위는 10px, 아래는 18px 였다.

   위에도 같은 줄을 긋고 같은 여백을 준다. 길라잡이가 이미 아래쪽에
   10px 을 두고 있으므로 여기서는 8px 만 더해 18 을 맞춘다. */
.board-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 8px;
    margin-bottom: 18px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-top: 1px solid #eceff1;
    border-bottom: 1px solid #eceff1;
}

/* ---------- 분류와 지역 ----------
   둘이 나란히 선다. 같은 모양을 쓰므로 규칙도 함께 건다 - 하나만 손보면
   나란한 둘이 서로 달라 보인다. */
.board-filter-cat,
.board-filter-city {
    display: flex;
    align-items: center;
    gap: 8px;
}

.board-filter-cat label,
.board-filter-city label {
    margin: 0;
    color: #1f8a70;
    font-size: 17px;
    font-weight: 700;
}

.board-filter-cat select,
.board-filter-city select {
    height: 40px;
    max-width: 220px;
    padding: 0 8px;
    border: 1px solid #dfe4e8;
    border-radius: 4px;
    background: #fff;
    color: #222;
    font-size: 17px;
}

.board-filter-cat select:hover,
.board-filter-city select:hover {
    border-color: #9aa7b2;
}

/* ---------- 지역 ---------- */
/* 브라우저가 주는 기본 모양을 그대로 쓴다. 직접 그리면 화면마다 달라지고,
   손가락으로 쓰는 화면에서는 기기가 주는 고르개가 늘 더 낫다. */
/* ---------- 걸려 있는 조건들 ----------
   오른쪽 끝으로 민다. 왼쪽은 고르는 자리, 오른쪽은 고른 것을 보는 자리다. */
.board-filter-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* 누르면 그 조건 하나가 떨어진다. 링크로 두는 까닭은 실제로 다른 주소로
   가기 때문이다 - 가운데 단추처럼 보이면 무엇이 일어날지 예측하기 어렵다. */
.board-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid #cbe7dd;
    border-radius: 999px;
    background: #f3faf7;
    color: #1f8a70;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    max-width: 240px;
}

.board-chip:hover {
    border-color: #1f8a70;
    background: #1f8a70;
    color: #fff;
    text-decoration: none;
}

.board-chip-x {
    font-size: 11px;
    opacity: 0.65;
}

.board-chip:hover .board-chip-x {
    opacity: 1;
}

.board-filter-clear {
    color: #9aa7b2;
    font-size: 12px;
    text-decoration: underline;
}

.board-filter-clear:hover {
    color: #f44336;
}

/* 좁은 화면에서는 위아래로 풀린다. 조건 줄을 오른쪽으로 밀던 것을 되돌린다 -
   한 줄에 하나씩 설 때는 왼쪽 맞춤이 읽기 쉽다. */
@media (max-width: 560px) {
    .board-filter-active {
        margin-left: 0;
        width: 100%;
    }

    .board-filter-cat select,
    .board-filter-city select {
        max-width: 100%;
        flex: 1 1 auto;
    }
}