/* ===== Guestbook Form ===== */
.guestbook-form {
  display: none;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 20px;

  position: absolute;
  top: 40px;

  /* ▶ 가변폭 대신 고정폭 + 가운데 정렬 */
  left: 50%;
  transform: translateX(-50%);
  width: 380px;          /* 컨테이너(420) - 패딩 여유 고려 */
  max-width: 380px;

  max-height: 600px; overflow-y: auto;
  z-index: 10;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  box-sizing: border-box;   /* ← 추가 */
}

/* 작은 화면에서는 다시 양쪽 여백 방식으로 */
@media (max-width: 480px) {
  .guestbook-form {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    transform: none;
    padding: 20px;
  }
}

.form-group { margin-bottom: 15px; }
.form-label {
  display: block; color: #333; font-weight: 600;
  margin-bottom: 8px; font-size: 0.9rem;
}
.form-control, .form-select {
  width: 100%; padding: 12px; border: 2px solid #e9ecef; border-radius: 8px;
  font-size: 0.9rem; transition: border-color 0.3s ease;
}
.form-control:focus, .form-select:focus {
  outline: none; border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-buttons { display: flex; gap: 12px; justify-content: flex-end; margin-top: 25px; }
.btn-submit {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none; color: white; border-radius: 8px;
  padding: 12px 24px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); }

.btn-cancel {
  background: #6c757d; border: none; color: white; border-radius: 8px;
  padding: 12px 24px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
}
.btn-cancel:hover { background: #5a6268; }

/* Responsive */
/* @media (max-width: 768px) {
  .guestbook-form { left: 10px; right: 10px; padding: 20px; }
} */