/* ═══ 방명록 — build.jbch.org 게시물 댓글 스타일 (모바일 guest.html + PC 사이드바 공용) ═══ */

/* 카드 — 테두리/박스 없이 콘텐츠만 */
.gb-card{
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.gb-count{
    margin: 0 2px 8px;
    font-size: 14px;
    font-weight: 700;
    color: #222;
}
.gb-count span{
    color: #3d7ff0;
}

/* 글 목록 — 프로필사진 + 이름 + 내용 + 상대시간 */
.gb-items{
    list-style: none;
    margin: 0;
    padding: 0;
}
.gb-item{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
}
.gb-item + .gb-item{
    border-top: 1px solid rgba(25,32,50,.06);
}
.gb-avatar{
    flex: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #eceef2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.gb-avatar.gb-noimg{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aeb4c0;
    font-size: 18px;
}
.gb-body{
    flex: 1;
    min-width: 0;
}
.gb-name{
    font-size: 12px;
    font-weight: 700;
    color: #3d7ff0;
}
.gb-church{
    font-size: 11px;
    font-weight: 400;
    color: #8a919e;
    margin-left: 2px;
}
.gb-msg{
    margin: 2px 0;
    font-size: 13px;
    color: #333;
    line-height: 1.55;
    word-break: break-word;
}
.gb-meta{
    font-size: 11px;
    color: #8a919e;
}
/* 수정/삭제 아이콘 — 항목 오른쪽 끝 */
.gb-btns{
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
/* 사진 뷰어 삭제 버튼(.phv-del)과 동일한 모양 — 빨간 원 + 흰 휴지통 (목록용 축소판, 더보기와 동일 26px) */
.gb-btns a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,80,80,.85);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none !important;
}
.gb-btns a:hover{
    background: #e5544b;
}

/* 입력바 — '방명록 남기기…' + 종이비행기 (댓글 달기 스타일) */
.gb-composer{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(25,32,50,.08);
}
.gb-composer input{
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 1px solid rgba(25,32,50,.14);
    border-radius: 999px;
    padding: 0 16px;
    font-size: 13px;
    background: #f7f8fa;
    outline: none;
}
.gb-composer input:focus{
    border-color: #3d7ff0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(61,127,240,.12);
}
.gb-send{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #1785BE;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.gb-send:active{
    transform: scale(.94);
}

/* 비로그인 안내 */
.gb-login-notice{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(25,32,50,.08);
    font-size: 12px;
    color: #fff;
}
.gb-login-notice i{
    font-size: 13px;
}
.gb-login-notice a{
    color: #3d7ff0 !important;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none !important;
}

/* 로딩/빈 상태 */
.gb-loading{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0;
    font-size: 13px;
    color: #8a919e;
    list-style: none;
}
.gb-loading i{
    font-size: 16px;
    color: #3d7ff0;
}
.gb-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 0;
    text-align: center;
    font-size: 13px;
    color: #a6acb8;
    line-height: 1.6;
    list-style: none;
}
.gb-empty i{
    font-size: 26px;
}

/* ── 모바일 방명록 페이지 — 입력바 하단 고정 (PC 사이드바에는 미적용) ── */
.content_wrapper .gb-composer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    border-top: 1px solid rgba(25,32,50,.08);
    box-shadow: 0 -4px 14px rgba(0,0,0,.06);
    /* 키보드가 열리면 JS(visualViewport)가 translateY로 키보드 위에 밀착 */
    transition: transform .15s ease-out;
}
.content_wrapper .gb-login-notice{
    border-top: 0;
}
/* 고정 입력바에 목록 끝이 가리지 않게 */
.content_wrapper .gb-card{
    padding-bottom: 76px;
}

/* ── 더보기(⋯) 버튼 ── */
.gb-btns .gb-more{
    background: #eef0f4;
    color: #4a515e;
    width: 30px;
    height: 30px;
    font-size: 16px;
}
.gb-btns .gb-more:hover{
    background: #dfe3ea;
    color: #222;
}
.gb-hidden-row{
    padding: 12px 0;
    text-align: center;
    font-size: 12px;
    color: #8a919e;
    list-style: none;
}
.gb-hidden-row a{
    color: #3d7ff0 !important;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
}

/* ── 더보기 하단시트 — m.jbch.org 하단 모달 스타일 (상단 라운드 30px + 그랩바) ── */
.gbm-sheet{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3200;
    visibility: hidden;                          /* 닫힘 — 애니메이션 끝난 뒤 숨김 */
    pointer-events: none;
    transition: visibility 0s linear .35s;
}
.gbm-sheet.on{
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}
.gbm-backdrop{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,20,30,.45);
    opacity: 0;
    transition: opacity .3s ease;
}
.gbm-sheet.on .gbm-backdrop{
    opacity: 1;
}
/* 지도 교회 카드(.c_info)와 동일한 룩 — 떠 있는 라운드 카드 + 그랩바 + X */
.gbm-body{
    position: absolute;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    padding: 12px 18px 16px;
    touch-action: none;               /* 드래그로 닫기 — 스크롤 개입 방지 */
    /* 교회 카드와 동일한 등장/퇴장 슬라이드 */
    transform: translateY(130%);
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.gbm-sheet.on .gbm-body{
    transform: translateY(0);
}
.gbm-grab{
    padding: 0 0 10px;
}
.gbm-handle{
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #d8dce3;
    margin: 0 auto;
}
.gbm-close{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    color: #111;
    text-align: center;
    line-height: 38px;
    font-size: 30px;
    cursor: pointer;
}
.gbm-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #222 !important;
    cursor: pointer;
    text-decoration: none !important;
    border-radius: 14px;
}
.gbm-item:active{
    background: #f5f7fa;
}
.gbm-item i{
    width: 22px;
    text-align: center;
    font-size: 17px;
    color: #6a7180;
}

/* ── 신고 모달 — m.jbch.org 모달 스타일 (라운드 30px) ── */
.gbr-modal{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3300;
    visibility: hidden;                      /* 닫힘 — 애니메이션 끝난 뒤 숨김 */
    pointer-events: none;
    transition: visibility 0s linear .3s;
}
.gbr-modal.on{
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}
.gbr-backdrop{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,20,30,.45);
    opacity: 0;
    transition: opacity .3s ease;
}
.gbr-modal.on .gbr-backdrop{
    opacity: 1;
}
.gbr-box{
    position: absolute;
    left: 50%;
    top: 44%;
    width: 340px;
    max-width: calc(100vw - 64px);           /* 좌우 32px 여백 */
    /* 등장: 아래→위 + 페이드 인 / 퇴장: 위→아래 + 페이드 아웃 */
    opacity: 0;
    transform: translate(-50%, calc(-50% + 28px));
    transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 2px 2px rgba(0,0,0,.1), 0 2px 10px rgba(0,0,0,.2);
    padding: 22px 20px 16px;
}
.gbr-modal.on .gbr-box{
    opacity: 1;
    transform: translate(-50%, -50%);
}
.gbr-title{
    margin: 0 2px 12px;
    font-size: 17px;
    font-weight: 700;
    color: #111;
}
.gbr-target{
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f5f7fa;
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    word-break: break-word;
}
.gbr-target b{
    color: #3d7ff0;
}
.gbr-box textarea{
    width: 100%;
    box-sizing: border-box; /* 패딩·테두리 포함 100% — 넘침 방지 */
    height: 96px;
    border: 1px solid rgba(25,32,50,.14);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    resize: none;
    line-height: 1.5;
    outline: none;
}
.gbr-box textarea:focus{
    border-color: #3d7ff0;
    box-shadow: 0 0 0 3px rgba(61,127,240,.12);
}
.gbr-note{
    margin: 8px 2px 14px;
    font-size: 11px;
    color: #8a919e;
    line-height: 1.5;
}
.gbr-btns{
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.gbr-cancel, .gbr-save{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
}
.gbr-cancel{
    background: #f1f3f6;
    color: #333 !important;
}
.gbr-save{
    background: #1785BE;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(23,133,190,.35);
}

/* ── 차단 목록 관리 시트 ── */
.gbm-title{
    margin: 2px 4px 8px;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}
.gbm-blist{
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.gbm-blist li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 4px;
}
.gbm-blist li + li{
    border-top: 1px solid rgba(25,32,50,.08);
}
.gbm-bl-text{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.gbm-bl-text b{
    font-size: 14px;
    color: #222;
}
.gbm-bl-text span{
    font-size: 11px;
    color: #8a919e;
}
.gbm-bl-off{
    flex: none;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef3fd;
    color: #3d7ff0 !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
}
.gbm-bl-empty{
    justify-content: center;
    padding: 24px 0 !important;
    font-size: 13px;
    color: #a6acb8;
}

/* 더보기 행 (목록 하단 — 스크롤 도달 시 자동 로드) */
.gb-morerow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 0;
    font-size: 13px;
    font-weight: 600;
    color: #4a515e;
    cursor: pointer;
    list-style: none;
}

/* 모바일 페이지(블러 배경) — 빈 상태 안내 흰색 */
body.info-page .gb-empty{
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
body.info-page .gb-empty i{
    color: rgba(255,255,255,.85);
}


/* 비로그인 안내 — 카운트 바로 아래(목록 위) 배치용 */
.gb-card > .gb-login-notice{
    justify-content: center;
    margin: 0 2px 12px;
    padding-top: 0;
    border-top: 0;
}