/* 본문 래퍼: 헤더 좌측 라인과 맞춤 */
.gb-wrap{
  width:min(100%,var(--container));
  margin:0 auto;
  padding-left: 10px;   /* 기존 var(--header-padX) 대신 작게 */
  padding-right: 10px;
  padding-bottom: 0;            /* 푸터와 간격은 페이저에서 */
  display:flex;                 /* ⬅️ 추가 */
  flex-direction:column;        /* ⬅️ 추가 */
  gap: 0;                       /* 필요시 */
}


/* 작성 버튼 */
.gb-actions{ display:flex; justify-content:flex-start; }
.gb-btn{
  appearance:none; border:1.5px solid rgba(252,70,124,.9); background:rgba(252,70,124,.9); color:#fff;
  font-weight:800; padding:10px 16px; border-radius:999px; cursor:pointer;
}
.gb-btn:hover{ opacity:.92; }

/* 5열 그리드 */
.gb-grid{ margin-top:28px; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.gb-empty{ margin:18px 0 0; text-align:left;}

/* 카드: 좌상/우하 둥근 + 핑크/보라 배경 랜덤 + 흰색 글자 */
.gb-card{
  position:relative; border:none; border-radius:0 40px 0 40px;
  color:#fff; padding:16px 16px 30px; min-height:220px;
  display:flex; flex-direction:column; gap:20px;
  box-shadow:0 8px 18px rgba(0,0,0,.10); transition:transform .2s, box-shadow .2s;
}
.gb-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.16); }
.gb-card .gb-msg{ font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:keep-all; }
.gb-card .gb-from{ font-size:13px; margin-top:auto; opacity:.95; }
.gb-toolbar{ position:absolute; right:10px; bottom:10px; display:flex; gap:8px; }
.gb-iconbtn{
  appearance:none; border:1.5px solid rgba(255,255,255,.95); background:transparent; color:#fff;
  padding:6px 10px; border-radius:999px; font-weight:800; cursor:pointer; font-size:12px;
}
.gb-iconbtn:hover{ background:rgba(255,255,255,.14); }

/* 작성/수정 모달 */
.gb-modal{ position:fixed; inset:0; display:none; z-index:50; }
.gb-modal.show{ display:block; }
.gb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); }
.gb-panel{ position:relative; z-index:1; width:min(560px,92vw); margin:60px auto; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:22px; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.gb-close{ position:absolute; right:10px; top:8px; border:0; background:none; font-size:22px; color:#6b7280; cursor:pointer; }
.gb-panel h2{ font-size:18px; margin:0 0 14px; }
.gb-toolbar { position:absolute; right:10px; bottom:10px; display:flex; gap:8px; z-index: 2; }


/* 폼 */
.gb-row{ display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; margin-bottom:12px; }
.gb-row label{ font-weight:800; color:#111; }
.gb-select{ position:relative; }
.gb-select select{ width:100%; padding:10px 36px 10px 12px; border:1px solid #d1d5db; border-radius:8px; appearance:none; background:#fff; }
.gb-chevron{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#6b7280; pointer-events:none; }

/* 메시지 영역 크게 */
.gb-row-msg{ grid-template-columns:1fr; gap:8px; }
.gb-row-msg label{ margin-bottom:2px; }
#fromInp,#msgInp{ width:100%; border:1px solid #d1d5db; border-radius:8px; padding:10px 12px; font:inherit; }
#msgInp{ resize:vertical; min-height:220px; }

/* 제출 버튼 */
.gb-submit{ width:100%; margin-top:6px; padding:12px 14px; border:0; border-radius:10px; background:rgba(131,23,255,.9); color:#fff; font-weight:900; cursor:pointer; }
.gb-submit:hover{ opacity:.92; }

/* 페이저(가운데 정렬, 점만) */
.gb-pager{
  margin-top:auto;              /* ⬅️ 핵심! 아래로 밀기 */
  padding: 18px 0 22px;         /* 푸터와 간격 */
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.gb-dots{ display:flex; gap:6px; list-style:none; padding:0; margin:0; }
.gb-dot{
  appearance:none; border:1.5px solid rgba(252,70,124,.9); background:#fff; color:rgba(252,70,124,.9);
  width:28px; height:28px; border-radius:999px; font-weight:800; cursor:pointer; font-size:12px;
  display:grid; place-items:center;
}
.gb-dot[aria-current="page"], .gb-dot:hover{ background:rgba(252,70,124,.9); color:#fff; }

/* 삭제 모달 */
.del-modal { 
  position:fixed; inset:0; display:none; z-index:100; 
}
.del-modal.show { 
  display:block; 
}
.del-backdrop { 
  position:absolute; inset:0; background:rgba(0,0,0,.4); 
}
.del-box {
  position:relative;
  max-width:400px;
  margin:100px auto;
  padding:20px;
  background:#fff;
  border-radius:12px;
  z-index:101;
}

.del-box h3{ margin:0 0 6px; font-size:18px; }
.del-box p{ margin:0 0 16px; color:#374151; }
.del-actions{ display:flex; gap:10px; justify-content:center; }
.del-btn{
  appearance:none; border:1.5px solid #111; background:#fff; color:#111;
  padding:8px 14px; border-radius:999px; font-weight:800; cursor:pointer; font-size:13px;
}
.del-btn:hover{ background:#111; color:#fff; }
.del-danger{ border-color:rgba(252,70,124,.9); color:rgba(252,70,124,.9); }
.del-danger:hover{ background:rgba(252,70,124,.9); color:#fff; border-color:rgba(252,70,124,.9); }
.del-x{ position:absolute; right:10px; top:8px; border:0; background:none; font-size:22px; color:#6b7280; cursor:pointer; }

.nav-toggle{ display:none; }

/* ── Guestbook: 모바일 2열 ───────────────── */
@media (max-width: 768px) {
  /* 카드 그리드 */
  .gb-grid {
    display: grid !important;                 /* flex여도 강제로 grid로 */
    grid-template-columns: repeat(2, 1fr);    /* ✅ 1줄에 2개 */
    gap: 12px;                                 /* 카드 간격 (원하면 조정) */
  }

  /* 카드 폭/여백 최적화 (카드 클래스명이 있다면 적용) */
  .gb-grid > * {
    width: 100%;
    margin: 0;                                 /* flex 시 남아있던 마진 무효화 */
  }

  /* 상단 버튼/페이저 여백도 모바일 최적화(선택) */
  .gb-actions { padding: 0 12px; }
  .gb-pager   { padding: 8px 0; }
}

/* ────────── 모바일(≤768px) 카드 내용만 글씨 축소 ────────── */
@media (max-width: 768px) {
  /* 방명록 카드 영역 */
  .gb-grid {
    font-size: 13px;       /* ✅ 카드 전체 폰트 축소 */
    line-height: 1.5;
  }

  /* 카드 안의 세부 텍스트 (이름, 메시지 등) */
  .gb-grid p,
  .gb-grid span,
  .gb-grid strong,
  .gb-grid em {
    font-size: 13px;       /* 폰트統一 */
  }

  /* 카드 제목류가 있다면 살짝만 크게 유지 */
  .gb-grid h3,
  .gb-grid h4 {
    font-size: 13px;
  }
}