/* 포럼.
 *
 * 게시판(Board.css)의 줄은 광고를 위한 모습이다 - 사진 칸, 업소 로고,
 * 전화, 지도. 포럼에는 그것이 하나도 없다. 대신 답글 수를 맨 앞에
 * 큰직하게 둔다.
 *
 * Board.css 를 고치지 않고 따로 둔 까닭: 게시판 넷과 업소록이 그 파일을
 * 함께 쓴다. 포럼을 위해 거기를 건드리면 다른 화면이 함께 움직인다.
 */

/* ---------------------------------------------------------------- */
/* 머리                                                            */
/* ---------------------------------------------------------------- */

.forum-head {
    padding: 4px 0 14px;
    border-bottom: 2px solid #33a3f1;
    margin-bottom: 14px;
}

.forum-head-title {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

.forum-head-note {
    margin-top: 4px;
    font-size: 13px;
    color: #888;
}

/* ---------------------------------------------------------------- */
/* 방 고르개                                                       */
/* ---------------------------------------------------------------- */

.forum-tabs {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.forum-tabs > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.forum-tabs > li > a {
    display: block;
    padding: 7px 14px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    background: #fff;
    white-space: nowrap;
}

.forum-tabs > li > a:hover {
    border-color: #33a3f1;
    color: #33a3f1;
}

.forum-tabs > li > a.active {
    background: #33a3f1;
    border-color: #33a3f1;
    color: #fff;
    font-weight: 600;
}

/* ---------------------------------------------------------------- */
/* 줄 위의 띄                                                      */
/* ---------------------------------------------------------------- */

.forum-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.forum-count {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 찾는 글자의 표. 누르면 검색이 풀린다. */
a.forum-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 14px;
    background: #eef6ec;
    border: 1px solid #cfe3c9;
    color: #3d7a32;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

a.forum-chip:hover {
    background: #e2efdf;
    color: #2f6127;
    text-decoration: none;
}

/* 한 칸짜리 쪽에서는 이 틀이 바깥 칸들을 대신한다. 위아래 여백을
   두어 머리띄와 바닥글에 붙지 않게 한다. */
.forum-wrapper {
    padding-top: 26px;
    padding-bottom: 26px;
}

/* ---------------------------------------------------------------- */
/* 목록                                                            */
/* ---------------------------------------------------------------- */

ul.forum-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #eee;
}

ul.forum-list > li.forum-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 4px;
    border-bottom: 1px solid #eee;
    margin: 0;
    background: none;
    box-shadow: none;
}

ul.forum-list > li.forum-row:hover {
    background: #fafcfe;
}

/* 답글 수 상자. 너비를 고정해 둔다 - 제목이 줄마다 들쪽날로하게
   시작하면 목록이 읽히지 않는다. */
.forum-replies {
    flex: 0 0 auto;
    width: 52px;
    min-width: 52px;
    text-align: center;
    border-radius: 6px;
    padding: 7px 0 5px;
    line-height: 1.1;
}

.forum-replies .forum-reply-n {
    display: block;
    font-size: 17px;
    font-weight: 700;
}

.forum-replies .forum-reply-l {
    display: block;
    font-size: 11px;
    opacity: .8;
}

.forum-replies.has-reply {
    background: #33a3f1;
    color: #fff;
}

/* 아직 아무도 답하지 않은 글. 포럼에서 사람을 움직이는 것은
   바로 이것이므로, 눈에 띄게 둔다. */
.forum-replies.no-reply {
    background: #fff;
    color: #c9ccd1;
    border: 1px dashed #dcdfe3;
}

.forum-main {
    flex: 1 1 auto;
    min-width: 0;
}

a.forum-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    line-height: 1.45;
    word-break: break-word;
}

a.forum-title:hover {
    color: #33a3f1;
    text-decoration: underline;
}

.forum-meta {
    margin-top: 5px;
    font-size: 12px;
    color: #999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.forum-meta .forum-cat {
    color: #33a3f1;
    border: 1px solid #cfe7fa;
    background: #f2f9fe;
    border-radius: 3px;
    padding: 1px 7px;
}

.forum-meta .forum-author {
    color: #666;
    font-weight: 500;
}

li.forum-empty {
    padding: 48px 12px;
    text-align: center;
    color: #999;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

/* ---------------------------------------------------------------- */
/* 휴대전화                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 767px) {

    .forum-head-title {
        font-size: 20px;
    }

    /* 고르개는 줄바꿈 대신 옆으로 밀게 둔다. 다섯 칸이 세 줄로
       쌓이면 목록이 화면 밖으로 밀려난다. */
    .forum-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .forum-tabs::-webkit-scrollbar {
        display: none;
    }

    ul.forum-list > li.forum-row {
        gap: 10px;
        padding: 14px 2px;
    }

    .forum-replies {
        width: 44px;
        min-width: 44px;
    }

    a.forum-title {
        font-size: 15px;
    }
}