/*
 * 비회원 공개 게시판 통합 피드 (읽기 전용) — renderBody standalone 페이지 전용
 * 뷰: application/views/team/publicCommunity.php + _publicBoardFeed.php
 *
 * 목표: 회원용 /myclub/community "전체" 피드(view-card)와 픽셀 단위로 동일.
 *  - 피드 카드/배지/유튜브오버레이/카드간 10px 구분선/본문 5줄 클램프는
 *    전부 klubo.css(.community-gallery--view / .view-card ...) + /www/css/board/all.css
 *    (.community-gallery--all .community-badge ...)에서 상속받는다. 여기서 재정의하지 않는다.
 *  - 이 파일은 standalone 셸(고정 헤더 + 고정 GNB + 본문 여백 + 하단 CTA)과
 *    피드 컨테이너의 좌우 여백 정합만 담당한다.
 *
 * 설계 원칙
 *  - 라이트 전용(다크모드 토큰/미디어쿼리 없음).
 *  - 폰트는 klubo.css 전역 Pretendard 스택 상속(직접 선언 안 함).
 *  - 8배수 그리드(8·16·24·32) 간격.
 *  - 모바일 360/375px 가로 오버플로 없음, PC 1280px 컨테이너 중앙정렬.
 */

/* ── 색상 상수(참고): primary #3182f6, text #222, sub #6b7280, divider #f0f0f0 ── */

.tpc-body {
    background: #f7f7f7;
    color: #222;
}

/* 컨테이너: PC에서 720px 중앙정렬 + 좌우 얇은 경계선, 흰 배경 */
.tpc-wrap {
    position: relative;
    min-height: 100vh;
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: solid #eaeaea;
    border-width: 0 1px;
    box-sizing: border-box;
    /* sticky CTA 높이(48+상하패딩+safe-area) 확보 → 마지막 항목 안 가림 */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* ── 헤더 (상단 고정) — 회원 화면 표준 Klubo 헤더 룩과 동일 ──
 * 표준 klubo.css .header.fixed(높이 48px) + .header__title h1.txt(중앙정렬 볼드 19px, 한 줄 말줄임)
 * 룩을 그대로 이식한다. 제목은 헤더 정가운데(좌우 80px 여백으로 백버튼 자리 확보) 중앙정렬,
 * 백버튼은 좌측 절대배치로 제목 센터를 방해하지 않는다.
 * GNB(.tpc-gnb, publicGnb.css)를 헤더 바로 아래에 고정하기 위해 헤더는 fixed 유지.
 * 컨테이너(.tpc-wrap) 720px에 맞춰 중앙정렬 + 좌우 경계선을 이어 세로 라인을 일치시킨다.
 * 헤더(48) + GNB(45) = 93px 만큼 본문(.tpc-main)에 상단 여백을 준다(간격은 첫 콘텐츠 native 여백이 담당). */
.tpc-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;                    /* GNB(z-index:20)보다 위 */
    width: 100%;
    max-width: 720px;              /* .tpc-wrap 폭과 동일 */
    height: 48px;                  /* 표준 .header 높이 */
    text-align: center;            /* 제목 h1 중앙정렬 */
    background: #fff;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eaeaea;   /* .tpc-wrap 좌우 경계선과 연속되게 */
    border-right: 1px solid #eaeaea;
    box-sizing: border-box;
}

/* 백버튼: 표준 .header__left 위치(좌측 절대배치). 제목 센터에 영향 주지 않음. 터치 타깃 44px 확보. */
.tpc-header__back {
    position: absolute;
    top: 0;
    left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 48px;
    font-size: 0;                  /* 마크업의 ‹ 문자 숨김 → 아래 :after 스프라이트 화살표만 노출(표준 .btn-back 동일 룩) */
    line-height: 1;
    color: #333;
    text-decoration: none;
    z-index: 1;                    /* 제목 위에서 탭 가능 */
    -webkit-tap-highlight-color: transparent;
}

/* 표준 .btn-back:after 와 동일한 스프라이트 화살표(icon_klubo.png, -230px 0, 20x18) — ‹ 문자 대신 표준 뒤로가기 아이콘. */
.tpc-header__back:after {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background-image: url(/www/img/icon_klubo.png);
    background-repeat: no-repeat;
    background-size: 250px auto;
    background-position: -230px 0;
}

/* 제목: 표준 .header__title h1.txt 와 동일 — 중앙 볼드 19px, 좌우 80px 여백, 한 줄 말줄임. */
.tpc-header__title {
    display: block;
    font-size: 19px;
    font-weight: bold;
    color: #222;
    line-height: 1.2;
    padding: 14px 80px;           /* 좌우 80px로 백버튼 자리 확보하며 가운데 정렬 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 본문 ──
 * 고정된 헤더(48) + GNB(45) = 93px 만큼만 상단 여백을 확보해, 본문 최상단(게시판 탭/피드)이
 * 고정 헤더/GNB 바로 아래에서 시작(딱 붙되 안 가림)하게 한다.
 * 이 값(93)은 "GNB에 안 가리는 최소값"이며 calendar/notice도 공유한다.
 * community 페이지는 첫 요소 게시판 탭(.community-top)을 GNB 하단에 여백 0으로 flush 시키므로,
 * 아래 .community-top 상단 padding override(0)와 짝을 이뤄 탭 첫 줄이 정확히 93px 지점(=GNB 바닥)에서 시작한다.
 * 좌우 패딩은 0 — 게시판 탭(.community-top: 좌우 16)과 view-card(padding:16)가
 * 각자 native 16px 인셋을 가지므로, 여기서 패딩을 더하면 실제(myclub) 대비 이중이 된다. */
.tpc-main {
    padding: 93px 0 0;
}

/* ── 게시판 선택 탭(#tpcBoardTabs = .community-top) ──
 * 탭 룩(활성 3px 밑줄 / 가로 스와이프 / 우측 페이드)은 klubo.css의 category 스타일을
 * 그대로 상속한다. 여기서는 standalone 셸에서만 필요한 안전장치(가로 오버플로 방지)만 둔다.
 *
 * GNB flush: klubo.css .community-top{padding:8px 16px 0} 의 상단 8px 때문에 GNB와 탭 사이 흰 여백 8px이
 * 남는다. 공개 셸에서는 이 상단 여백만 0으로 죽여 탭을 GNB 하단 경계선에 딱 붙인다(좌우 16 인셋은 유지).
 * base klubo.css .community-top 규칙은 회원 화면 공유이므로 수정하지 않고, tpc 스코프에서만 override. */
.tpc-main .community-top {
    padding-top: 0;
}

#tpcBoardTabs {
    /* swiper 미초기화(JS 로드 전/실패) 시에도 탭이 넘쳐 body 가로 스크롤이 생기지 않게 */
    overflow: hidden;
}

/* ── 통합 피드 (읽기 전용 view-card) ──
 * 카드 골격/여백/카드간 10px 구분선/배지/썸네일은 klubo.css + all.css 상속.
 * 좌우 패딩 0 → view-card 자체 padding:16 이 실제와 동일한 16px 인셋을 만든다. */
.tpc-feed {
    padding-left: 0;
    padding-right: 0;
    /* klubo.css .community-gallery__wrap{padding-bottom:70px} 는 멤버 화면 하단 네비바용.
     * 이 페이지는 sticky CTA + .tpc-wrap padding-bottom 으로 클리어런스를 처리하므로 상쇄. */
    padding-bottom: 0;
}

/* 본문 축약(초기 접힘) — 실제 피드는 klubo.css 가 .gallery-con 을 5줄로 클램프하고,
 * board.js(initViewBoardMore)는 "더보기" 버튼 표시 여부만 토글할 뿐 클램프 줄수는 바꾸지 않는다.
 * 정적 페이지는 더보기 버튼이 없으므로, 상속되는 5줄 클램프를 명시적으로 고정해
 * 향후 base 클램프가 바뀌어도 공개 피드의 초기 접힘 룩(5줄)이 유지되게 한다. */
.tpc-feed .gallery-con {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 빈 상태(공개 게시판 자체가 없음 — 최상위 안내) ──
 * 피드 내부의 "게시글 없음"은 klubo.css 의 .search-result__wrap/.upcoming__none 를 그대로 사용. */
.tpc-empty {
    padding: 56px 24px;
    text-align: center;
}

.tpc-empty__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #4b5563;
}

.tpc-empty__desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #9199a3;
}

/* ── 하단 가입 유도 CTA (스티키) ── */
.tpc-cta {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #f0f0f0;
    box-sizing: border-box;
}

.tpc-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: #3182f6;
    border-radius: 10px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}