/**
 * "전체" 탭(SNS 피드) 전용 보강 스타일
 * - 카드 골격/여백은 klubo.css 의 view-card(.community-gallery--view) 를 그대로 상속한다.
 *   여기서는 view 스킨에는 없는 "소속 게시판 배지"와 유튜브 썸네일 재생 오버레이만 얹는다.
 * - 앱은 라이트 전용이므로 다크 토큰을 두지 않는다. 좌측 세로라인 강조/카드 재설계 없음. 8pt 그리드.
 */

/* 소속 게시판 배지(칩) — 헤더 닉네임 옆. 배경 칩으로 구분(세로라인 강조 금지) */
.community-gallery--all .view-card__header .name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.community-gallery--all .community-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

.community-gallery--all .community-badge .emo {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

/* 유튜브 썸네일: 재생(▶) 오버레이 */
.community-gallery--all .view-card__thumb--youtube {
    position: relative;
}

.community-gallery--all .view-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.community-gallery--all .view-card__play .emo {
    width: 20px;
    height: 20px;
}

/* ------------------------------------------------------------------
 * "전체" 탭 글쓰기(+) → 게시판 선택 바텀시트 (#boardWriteSelectLayer)
 * - 위치/딤/헤더(.layer-bottm--fixed · #klubo-dimm · .layer__top · .btn-close)는 klubo.css 표준을 그대로 쓴다.
 *   여기서는 목록 내용만 정의한다. 좌우 여백은 .layer-bottom__con 의 16px 하나로만 준다(이중 여백 금지).
 * - 카드형/좌측 세로라인 선택강조 없음. 행 구분선 + 우측 종류 칩. 8pt 그리드.
 * ------------------------------------------------------------------ */
.layer-bottm--fixed.board-write-select .layer-bottom__con {
    padding: 8px 16px 0;
}

.board-write-select .board-write-select__list {
    max-height: 60vh;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.board-write-select .board-write-select__list .layer-sort__item {
    margin: 0;
    line-height: normal;
    text-align: left;
    border-bottom: 1px solid #f3f3f3;
}

.board-write-select .board-write-select__list .layer-sort__item:last-child {
    border-bottom: 0;
}

.board-write-select .board-write-select__item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px 0;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    color: #222;
}

.board-write-select .board-write-select__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}

.board-write-select .board-write-select__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #222;
}

.board-write-select .board-write-select__hint {
    font-size: 13px;
    line-height: 16px;
    color: #8a8f99;
}

/* 게시판 종류 칩 — 통합 목록의 소속 게시판 배지(.community-badge)와 같은 톤 */
.board-write-select .board-write-select__type {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 10px;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

/* 팝업프레임(.full-screen) 안에서 .layer__top 이 position:fixed 로 강탈되는 함정 방지 */
.full-screen #boardWriteSelectLayer .layer__top {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: none;
    transform: none;
    border-left: 0;
    border-right: 0;
    z-index: auto;
}
