/* guestbook.css — 현재 guestbook.html 구조 전용 */

/* 안전장치: flex 안에서 스크롤 영역 제대로 먹게 */
.stage,
.outer,
.box-bottom,
.gb-wrap{
  min-height: 0;
}

/* box-bottom이 세로로 쌓이게 */
.box-bottom{
  display: flex;
  flex-direction: column;
}

/* gb-wrap이 box-bottom 내부 높이를 다 먹고,
   그 안에서 msg-scroll이 남는 높이를 먹게 */
.gb-wrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 제목 */
.gb-heading{
  font-size: var(--fs-15);
  margin: 0;
  padding-left: 6px;
  font-weight: 400;
}

/* 구분선 */
.gb-divider{
  border-bottom: 1px solid #666;
  margin: 0 6px;
}

/* 상태 텍스트(로딩/에러) */
.gb-state{
  margin: 0;
  padding: 0 6px;
  font-size: var(--fs-12);
  line-height: 1.4;
  opacity: .85;
}

/* ✅ 메시지 리스트만 스크롤 */
.msg-scroll{
  flex: 1;                  /* 남는 높이 다 먹기 */
  min-height: 0;            /* ⭐ 이거 없으면 스크롤 안 먹는 경우 많음 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 6px 6px;
}

/* 메시지 리스트 */
.msg-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 메시지 카드 */
.msg-card{
  border: 2px solid #666;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}

.msg-name{
  font-size: var(--fs-12);
  margin: 0 0 6px;
  font-weight: 400;
}

.msg-body{
  font-size: var(--fs-12);
  line-height: 1.45;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 공개 전 블러 */
.msg-body.is-blurred{
  filter: blur(4px);
  user-select: none;
}

/* 빈 상태 문구 */
.gb-empty{
  margin: 12px 0 0;
  font-size: var(--fs-12);
  opacity: .75;
  padding: 0 2px;
}

/* 스크롤바(선택) */
.msg-scroll::-webkit-scrollbar{ width: 8px; }
.msg-scroll::-webkit-scrollbar-track{ background: transparent; }
.msg-scroll::-webkit-scrollbar-thumb{
  background: #cfcfcf;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ===== 방명록 가독성 개선 ===== */

/* 카드 전체 간격 */
.msg-card {
  padding: 10px 14px;
}

/* 닉네임 */
.msg-name {
  font-size: 14px;          /* 살짝만 강조 */
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* 메시지 본문 */
.msg-body {
  font-size: 12px;          /* 👈 핵심: 닉네임보다 작게 */
  line-height: 1.6;
  color: #222;

  /* 기본 시스템/산세리프 폰트 */
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "SUIT",
    sans-serif;

  word-break: keep-all;
  white-space: pre-wrap;   /* 줄바꿈 유지 */
}

/* 블러 상태에서도 글자 형태 유지 */
.msg-body.is-blurred {
  filter: blur(6px);
  opacity: 0.85;
}

/* PRIVATE 뱃지 (있다면) */
.msg-name .badge {
  font-size: 10px;
  font-weight: 500;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #999;
}

/* =======================================
   list 모바일 최적화 (추가)
   - 글자/패딩 정리 + iOS 스크롤 안정화 + SE 압축
======================================= */

/* 1) 기본 모바일 (480 이하) */
@media (max-width: 480px){
  /* 스크롤 영역: 손가락 스크롤 더 부드럽게 + 바운스 전파 방지 강화 */
  .gb-scroll-area{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 4px 8px;  /* 좌우 살짝 줄여서 공간 확보 */
  }

  /* 버튼/구분선: 위쪽 공간 조금 확보 */
  .write-btn{
    padding: 16px 12px;
    font-size: var(--fs-15);
  }
  .gb-divider{
    padding-bottom: 6px;
    margin: 0 4px;
  }

  /* 메시지 카드: 더 촘촘하게 + 가독성 */
  .msg-card{
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* 닉네임(픽셀폰트 유지) 살짝 강조 */
  .msg-name{
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
  }

  /* 메시지 본문: 기본폰트(산세리프) + 더 작게 */
  .msg-body{
    font-size: 12px;
    line-height: 1.6;
    margin: 0;

    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      "Apple SD Gothic Neo",
      "Noto Sans KR",
      "SUIT",
      sans-serif;

    white-space: pre-wrap;
    word-break: keep-all;
  }

  /* 블러 조금 진하게 */
  .msg-body.is-blurred{
    filter: blur(6px);
    opacity: .85;
    user-select: none;
  }
}

/* 2) 짧은 화면 (iPhone SE급) — 높이 700 미만 */
@media (max-width: 480px) and (max-height: 699px){
  .write-btn{
    padding: 14px 12px; /* 버튼 높이 조금 줄임 */
  }
  .msg-list{
    gap: 10px;          /* 카드 간격 줄이기 */
  }
  .msg-card{
    padding: 9px 11px;  /* 카드 압축 */
  }
  .msg-name{
    font-size: 12px;
    margin-bottom: 5px;
  }
  .msg-body{
    font-size: 11px;
    line-height: 1.55;
  }
}

/* 3) 긴 화면 (iPhone 12~) — 높이 700 이상 */
@media (max-width: 480px) and (min-height: 700px){
  .gb-scroll-area{
    padding: 0 6px 10px; /* 여유 조금 */
  }
  .msg-card{
    padding: 11px 13px;
  }
}