/* =====================================================================
   client/reviews.css   [ 방문자 ]

   리뷰 영역 전용 스타일입니다.
   관리자 스타일은 admin/admin.css 에 별도로 분리되어 있습니다.

   모든 선택자에 gr- 접두사를 붙였고 body 등 전역 요소는 건드리지 않습니다.
   적용 사이트(그누보드 스킨)의 기존 CSS 와 충돌하지 않습니다.
   ===================================================================== */

.gr, .gr * { box-sizing: border-box; }

.gr {
  color: #1f2328;
  font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕",
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.6;
}
/* ---------- 안내 메시지 ---------- */

.gr-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  word-break: break-all;
}

.gr-notice--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* ---------- 리뷰 목록 ---------- */
.swiper_google{overflow:hidden;}
.swiper_google .swiper-wrapper{align-items:stretch;padding:5px 0;}
.swiper_google .gr-card.swiper-slide{width:300px!important;min-width:300px;max-width:300px;flex:0 0 300px;}


.gr-list{display:block;}


.gr-loading,
.gr-empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

.gr-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
 font-family: "Pretendard Variable";
}

.gr-card:hover,
.gr-card:focus-visible {
  border-color: #d1d5db;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
  outline: none;
}

.gr-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 긴 이름이 넘칠 때 말줄임이 동작하도록 */
.gr-card__head-text { min-width: 0; }

.gr-card__author {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gr-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* 카드 본문: 4줄까지만 노출 */
.gr-card__text {margin:10px 0 5px;
line-height:1.4;
  font-size: 15px;
  color: #374151;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

.gr-card__more {
  font-size: 12px;
  color: #2563eb;
  font-weight: 600;
}

/* 지점명 배지 - 지점이 2개 이상일 때만 표시 */
.gr-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* ---------- 공통 요소 ---------- */

.gr-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #e5e7eb;
  flex-shrink: 0;
}

.gr-avatar--lg { width: 48px; height: 48px; }

/* 프로필 이미지가 없을 때 이니셜 대체 */
.gr-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
  font-size: 15px;
}

.gr-stars {
  color: #f59e0b;
  letter-spacing: 1px;
  font-size: 13px;
}

.gr-date { color: #9ca3af; }

/* ---------- 모달 ---------- */

.gr-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gr-modal[hidden] { display: none; }

.gr-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, .55);
}

.gr-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.gr-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px 8px;
}

.gr-modal__close:hover { color: #374151; }

.gr-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.gr-modal__author {
  font-weight: 700;
  font-size: 16px;
}

.gr-modal__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

.gr-modal__body {
  font-size: 15px;
  color: #374151;
  white-space: pre-line;
  word-break: break-word;
}




@media screen and (max-width: 480px) {
.swiper_google .gr-card.swiper-slide{width:225px!important;flex: 0 0 225px;min-width:220px;padding: 10px 15px;}
.gr-card__text{    margin: 5px 0;
    line-height: 1.3;}
}