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

   검색칸은 여기 두지 않는다 - 이 화면에는 이미 위쪽에 검색칸이 있고, 하나를 더
   놓으면 어느 쪽이 무엇을 찾는지 아무도 모른다. 대신 검색어도 아래 조각으로
   나와, 걸려 있다는 것과 떼는 방법이 한자리에서 보인다.
   ============================================================ */
.board-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    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: #6b757d;
    font-size: 13px;
    font-weight: 600;
}

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

.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;
    }
}