/* ============================================================
   구인/구직 첫 화면 맨 위 - 세 줄 세 칸
   ------------------------------------------------------------
   카드 한 장과 제목 줄은 FeatureCards.css 에 있다. 여기 남은 것은
   이 화면의 격자와 칸을 가르는 선뿐이다.

   업소록의 Business Event 와 달리 사진을 크게 쓰지 않는다. 저쪽은
   배너라 사진이 곧 내용이지만, 구인 글에 붙는 사진은 업소 로고라
   그 자체로는 무슨 일자리인지 말해 주지 않는다. 읽히는 것은 제목이므로
   사진은 옆에 작게 두고 제목에 자리를 준다.
   ============================================================ */

/* minmax(0, 1fr) 이지 1fr 이 아니다. 1fr 은 '적어도 내용만큼'이라는
   뜻이라, 끊어지지 않는 긴 낱말이 든 칸 하나가 제 기둥을 넓혀 셋이
   어긋난다 - 실제로 첫 기둥이 456px, 둘째가 300px 로 벌어졌다. */
.jobfeat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
}

/* 아홉 칸이 격자에 떠 있는 것처럼 보이지 않게 칸마다 아래 선을 둔다. */
.jobfeat .feat-card {
    padding-bottom: 16px;
    border-bottom: 1px solid #eeeeee;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 991px) {
    .jobfeat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
}

@media (max-width: 640px) {
    .jobfeat { grid-template-columns: 1fr; }
    .jobfeat .feat-card.is-row .feat-thumb { flex-basis: 96px; }
}

/* ---------- 네 게시판 ----------
   제목 한 줄이 서 있던 자리에 구인·룸렌트·알뜰장터·자유게시판이 선다.

   생김새는 새로 만들지 않았다. 사이트의 title-section 은 이미 글자 밑에만
   빨간 줄을 긋는다 - 그것을 보고 있는 게시판에만 남기고 나머지에서 지우면
   그대로 단추가 된다. 화면 아래쪽의 '지역별 웹싸이트 / 토론토 / 런던' 이
   쓰는 것과 같은 짜임이다. */

.jobfeat-tabs h1 a + a {
    margin-left: 22px;
}

.jobfeat-tabs h1 a span {
    border-bottom-color: transparent;
    color: #999999;
    transition: color 0.2s ease-in-out;
}

.jobfeat-tabs h1 a.is-on span {
    border-bottom-color: #f44336;
    color: #222222;
}

.jobfeat-tabs h1 a:hover span {
    color: #222222;
}

@media (max-width: 767px) {

    /* 네 개가 한 줄에 들어가지 않으면 옆으로 밀게 둔다. 줄바꿈을
       하면 빨간 줄과 회색 줄이 어긋난다. */
    .jobfeat-tabs h1 {
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .jobfeat-tabs h1::-webkit-scrollbar {
        display: none;
    }

    .jobfeat-tabs h1 a + a {
        margin-left: 16px;
    }
}