/**
 * Community Toss Skin - CSS
 *
 * Board/toss 의 board.css 위에 얹는 커뮤니티 전용 규칙만 담는다.
 * 토큰(--tb-*)·행/칩/썸네일/검색창/페이지네이션 모양은 board.css 가 제공한다 (Index.php 가 두 파일을 함께 불러온다).
 */

.community-feed { max-width: 960px; padding-bottom: 8px; }

/* 헤더 + 검색 */
.community-feed__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 0 10px;
}
.community-feed__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.25;
}
.community-feed__search { margin-left: 0; }

/* 그룹 탭 (밑줄형) */
.community-feed__groups {
    display: flex;
    gap: 22px;
    margin: 6px 0 16px;
    border-bottom: 1px solid var(--tb-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.community-feed__groups::-webkit-scrollbar { display: none; }
.community-feed__group-tab {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 2px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tb-sub);
    white-space: nowrap;
    transition: color .15s;
}
.community-feed__group-tab:hover { color: var(--tb-ink); }
.community-feed__group-tab--active { color: var(--tb-ink); }
.community-feed__group-tab--active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--tb-ink);
}

/* 정렬 (세그먼트) */
.community-feed__sort {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 12px;
    background: var(--tb-surface);
    box-shadow: 0 0 0 1px var(--tb-line);
}
.community-feed__sort-tab {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--tb-sub);
    transition: background-color .15s, color .15s;
}
.community-feed__sort-tab:hover { color: var(--tb-ink); }
.community-feed__sort-tab--active,
.community-feed__sort-tab--active:hover { background: var(--tb-fill); color: var(--tb-ink); }

/* 행 전체 누르기 (확장 링크) — 게시판 칩은 그 위에 독립 링크로 남는다 */
.community-feed__row { position: relative; }
.community-feed__stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--tb-r-md);
}
.community-feed__stretch:focus-visible { outline: none; }
.community-feed__stretch:focus-visible::after { outline: 3px solid var(--tb-accent); outline-offset: -3px; }
.community-feed__board-link { position: relative; z-index: 1; transition: background-color .15s, color .15s; }
.community-feed__board-link:hover { background: var(--tb-fill-hover); color: var(--tb-ink); }

@media (max-width: 720px) {
    .community-feed__header { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px 0 6px; }
    .community-feed__title { font-size: 1.5rem; }
    .community-feed__groups { gap: 18px; }
}