/*
 * 비회원 공개 화면 공유 GNB(상단 탭바) 보강 스타일
 * 뷰: application/views/team/_publicGnb.php
 * 로드: team/teamDetail.php, team/publicCommunity.php
 *
 * 설계 원칙
 *  - 멤버 화면 카테고리 GNB와 "똑같은 룩"이 목표.
 *    마크업이 klubo.css의 category 스타일(.category-list__wrap / .category__item ...)을
 *    그대로 상속하므로, 여기서는 base 스타일을 재정의하지 않고 최소 보강만 한다.
 *  - 스코프: 반드시 `.tpc-gnb`(wrap 추가 클래스)로 격리 → 멤버 GNB에 영향 없음.
 *  - 라이트 전용(다크 토큰/미디어쿼리 없음). font-family 직접 선언 금지(전역 상속).
 *  - 8배수 간격, 터치타깃 ≥44px.
 */

/* ── 준비중 탭(일정/회칙) dim ──
 * base `.category__item a`(파랑/회색 링크)와 동일한 box를 <span>에도 적용해
 * 링크 탭과 세로/가로 정렬을 맞추되, 회색 dim + 클릭 불가 느낌만 준다.
 * 과한 "준비중" 배지는 두지 않는다(절제된 dim). */
.tpc-gnb .category__item.is-disabled span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 44px;
    padding: 10px 5px 11px;
    font-size: 17px;
    color: #c0c2c6;           /* base #646566 대비 옅은 회색 dim */
    cursor: default;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* ── 활성/링크 탭 터치타깃 44px 보강 ──
 * base 앵커는 padding만으로 ~41px → flex 세로중앙 + min-height:44px로 맞춘다.
 * .on a:after(하단 3px 밑줄)는 position:absolute라 flex 흐름 밖 → 밑줄 위치 안 깨짐.
 * disabled span과 동일한 box → 네 탭의 높이/정렬이 완전히 일치. */
.tpc-gnb .category__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
}

/* ── swiper 미초기화(JS 로드 전/실패) 안전장치 ──
 * swiper-wrapper의 flex/transform은 건드리지 않고, wrap에만 overflow:hidden을 걸어
 * 탭이 넘쳐도 페이지(body) 가로 오버플로가 생기지 않게 한다.
 * (swiper 정상 초기화 시에도 컨테이너 overflow:hidden은 기본 동작이라 방해 없음) */
.tpc-gnb.swiper-container {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
 * GNB 상단 고정 — "고정 헤더 바로 아래 2번째 줄" (myclub 카테고리 GNB와 동일 배치)
 *   헤더는 본문과 함께 스크롤되지 않고 상단에 pin, 그 바로 아래 GNB도 pin,
 *   본문만 스크롤된다. GNB는 #fff 불투명으로 스크롤되는 본문을 덮는다.
 *   실측(375px, swiper 활성): 헤더 높이 / GNB 높이(앵커 min-height:44 + wrap border-bottom 1 = 45).
 * ══════════════════════════════════════════════════════════════════════ */

/* ── team/detail (renderWithFrame, 공유 `.header.fixed` = 제목 한 줄, 실측 48px) ──
 * GNB(`#kluboContents`(=`.container-klubo.has-tpc-gnb`) 최상단의 `.tpc-gnb`)를
 * 헤더 바로 아래(top:48)에 고정. 헤더와 동일 정렬(left:50% / translateX / max-width:700 /
 * 좌우 경계선)로 헤더와 세로 라인이 정확히 일치한다.
 * 헤더48 + GNB45 = 93 → 본문 상단 여백(base 56 override). */
#kluboContents .tpc-gnb {
    position: fixed;
    top: 48px;                                    /* 헤더(.header.fixed) 실측 높이 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;                                  /* 헤더(z-index:11)와 동일 레이어, 본문 위 */
    width: 100%;
    max-width: 700px;                             /* 헤더 폭과 동일 */
    background: #fff;                             /* 스크롤되는 본문을 불투명하게 덮음 */
    border-left: 1px solid rgb(234, 234, 234);   /* 헤더 좌우 경계선과 연속되게 */
    border-right: 1px solid rgb(234, 234, 234);
    box-sizing: border-box;
}
.container-klubo.has-tpc-gnb {
    padding-top: 93px;                            /* 헤더48 + GNB45 */
}

/* ── publicCommunity (renderBody standalone, body.tpc-body, 자체 `.tpc-header` 표준 48px) ──
 * GNB를 헤더 바로 아래(top:48)에 고정. 폭은 컨테이너(.tpc-wrap) 720px에 맞춰
 * 헤더와 세로 라인 일치. `.tpc-header` 고정 전환과 본문(.tpc-main) 상단 여백(48+45=93,
 * 세로 간격은 첫 콘텐츠 native 여백이 담당)은 publicCommunity.css에서 처리한다. */
.tpc-body .tpc-gnb {
    position: fixed;
    top: 48px;                                    /* .tpc-header 표준 높이(회원 헤더와 동일) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 100%;
    max-width: 720px;                             /* .tpc-wrap 폭과 동일 */
    background: #fff;
    border-left: 1px solid #eaeaea;              /* .tpc-wrap 좌우 경계선과 연속되게 */
    border-right: 1px solid #eaeaea;
    box-sizing: border-box;
}