/* ============================================================================
 * 비회원 공개 일정 상세 (/teamPublic/schedule) 전용 스타일
 *
 * [원칙] 회원용 /myclub/calendarView 와 픽셀 단위로 같아야 한다.
 * 레이아웃·타이포·정보행(.info-wrap/.club__info)·제목/배지(.schedule-detail__top)·
 * 버튼(.public__selected > .members__apply)·참가비(.fee-panel)는 전부 klubo.css 등
 * 회원 화면 규칙을 그대로 상속한다.
 * 여기서는 그 규칙을 절대 덮어쓰지 않는다 — 폭/높이/폰트크기/정렬을 다시 선언하면 즉시 어긋난다.
 *
 * 남겨둔 것은 standalone 셸에서만 필요한 보정과, 회원 화면에 대응 요소가 없는
 * .tpc-schedule__notice(공개 전용 안내 문구)뿐이다.
 *
 * [좌우 여백] .schedule-detail__wrap 이 klubo.css 에서 이미 padding:0 16px 40px 을 갖는다.
 *            페이지 CSS 에서 좌우 패딩을 다시 선언하지 않는다(이중 여백 금지).
 * [라이트 고정] 이 앱은 라이트 전용이다. 다크모드 토큰/미디어쿼리를 두지 않는다.
 * ========================================================================== */

/* 회원 화면은 팝업 프레임 헤더 바로 아래에서 본문이 시작한다.
 * 공개 셸도 고정 헤더(48) + GNB(45) 아래에서 같은 간격으로 시작하도록 상단만 보정한다.
 * (좌우/내부 여백은 klubo.css 값을 그대로 쓴다) */
.tpc-main .tpc-schedule {
    padding-top: 8px;
}

/* ── 투표 버튼 아래 안내 문구 (회원 화면에는 없는 공개 전용 요소) ──────────
 * 투표 버튼(.public__selected) 바로 다음에 오므로, 버튼에 붙지 않도록 상단 여백을 주고
 * 버튼 세그먼트 폭 안에서 가운데 정렬한다. */
.tpc-schedule__notice {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    color: #767676;
    word-break: break-word;
}

/* 이미 참가한 상태의 안내 — 색으로만 구분(아이콘/카드 없음) */
.tpc-schedule__notice--done {
    color: #3677f6;
    font-weight: 600;
}

/* .members__apply 는 <button> 기준으로 만들어진 규칙이라 <a> 로 쓰면 줄바꿈/밑줄이 남는다.
 * 크기·색은 건드리지 않고 앵커에서만 필요한 최소 보정만 한다. */
.public__selected a.members__apply {
    display: block;
    text-decoration: none;
}

/* ── 게스트 정보 입력·인증 레이어 ──────────────────────────────────────────
 * 공개 페이지는 standalone 셸이라 공용 바텀시트 JS/CSS 가 없다.
 * 입력·버튼은 klubo.css 표준(.input-text__wrap .input / .members__apply)을 그대로 쓰고,
 * 여기에는 레이어 껍데기(딤·패널·닫기)만 정의한다. */
.tpc-guest-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.tpc-guest-layer[hidden] { display: none; }

.tpc-guest-layer__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

/* 모바일은 하단 시트, PC(720px 이상)는 화면 중앙 카드 */
.tpc-guest-layer__panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 720px;
    box-sizing: border-box;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
    overflow-y: auto;
}

@media screen and (min-width: 721px) {
    .tpc-guest-layer__panel {
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        max-width: 480px;
        border-radius: 16px;
    }
}

.tpc-guest-layer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tpc-guest-layer__title {
    font-size: 17px;
    font-weight: bold;
    color: #222;
}

.tpc-guest-layer__close {
    width: 32px;
    height: 32px;
    font-size: 22px;
    line-height: 1;
    color: #888;
    background: none;
    border: 0;
}

.tpc-guest-layer__desc {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 20px;
    color: #767676;
}

/* 입력창 + 우측 버튼(인증번호 받기 / 타이머) */
.tpc-guest-layer__phone {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tpc-guest-layer__phone .input { flex: 1 1 auto; min-width: 0; }

.tpc-guest-layer__certbtn {
    flex: 0 0 auto;
    width: auto;
    padding: 0 14px;
    font-size: 14px;
}

.tpc-guest-layer__timer {
    flex: 0 0 auto;
    min-width: 44px;
    text-align: right;
    font-size: 13px;
    color: #f53c14;
}

.tpc-guest-layer__hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 18px;
    color: #999;
}

.tpc-guest-layer__error {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: #f53c14;
}

.tpc-guest-layer__error[hidden] { display: none; }

.tpc-guest-layer__submit { margin-top: 20px; }

/* ============================================================================
 * 네비게이션(바로 길안내) — 회원 화면과 동일한 버튼 + 지도 선택 바텀시트
 *
 * 마크업/클래스는 klubo.css 표준(.btn-authenticate, .layer-bottm--fixed.map,
 * .layer-share__list, .btn-share--layer)을 그대로 쓴다. 여기서는 이 페이지에만
 * 필요한 차이 세 가지만 보정한다.
 * ========================================================================== */

/* 1) 버튼 위치 — 회원 화면과 크기·여백이 1px 도 다르면 안 된다.
 *
 * 회원 일정 상세는 버튼이 .info-wrap > .info-contents 안에 있어서
 * klubo.css 의 `.info-contents .btn-authenticate{position:static;padding:0 15px}` 보정을 받는다.
 * (기본 .btn-authenticate 는 position:absolute(top:7/right:8) — 목록 행 우측 배지용 값이다.)
 *
 * 이 페이지는 .club__info 를 .info-contents 래퍼 없이 바로 나열하는 구조라 그 보정을 못 받는다.
 * 그래서 같은 두 선언만 그대로 복제한다. height(26)·min-width(74)·배경(#959799)·radius 는
 * klubo.css 기본값과 `.schedule-detail__wrap .btn-authenticate` 에서 그대로 상속받게 두어야
 * 회원 화면과 동일한 크기가 나온다 — 여기서 다시 선언하지 말 것. */
.tpc-navi-btn {
    position: static;
    padding: 0 15px;
}

/* 2) 구글지도 아이콘
 * klubo.css 의 icon_share.png 스프라이트에는 tmap/kakaomap/naver 만 있고 구글이 없다.
 * .alimtalk/.instagram 이 쓰는 방식대로 인라인 SVG 로 채운다(외부 요청 없음). */
.btn-share--layer.googlemap:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Crect width='50' height='50' rx='25' fill='%23f1f3f4'/%3E%3Cpath d='M25 11c-5 0-9 4-9 9 0 6.6 9 19 9 19s9-12.4 9-19c0-5-4-9-9-9z' fill='%23ea4335'/%3E%3Ccircle cx='25' cy='20' r='3.4' fill='%23fff'/%3E%3C/svg%3E");
    background-position: 0 0;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}

/* 3) 레이어 폭·스택 순서
 * 셸(.tpc-wrap/.tpc-header)이 720px 이라 바텀시트(기본 700px)도 같은 폭으로 맞춘다.
 * z-index: 표준값(dimm 29 / layer 30)은 이 페이지의 고정 헤더(.tpc-header, z-index:30)보다
 * 위로 올라가지 못해 딤 위에 헤더가 떠 보인다. 셸 요소 전부(헤더 30)보다 위로 올린다. */
.tpc-body #tpc-navi-dimm {
    z-index: 40;
}

.tpc-body #tpc-navi-layer {
    max-width: 720px;
    z-index: 41;
}

/* 승인 대기 중인 참석 버튼 — 확정(on)과 구분되게 톤을 낮춘다.
 * 아직 자리가 확보된 상태가 아니므로 확정 파랑을 그대로 쓰면 오해를 준다. */
.members__apply.type--attend.is-pending {
    background: #8f9bb3;
    border-color: #8f9bb3;
    color: #fff;
}