/* 쇼츠 배경 이미지 게시판 */

.sbgi-page {
  --sbgi-accent: #7c3aed;
  --sbgi-accent-soft: #ede9fe;
  --sbgi-border: #e5e7eb;
  --sbgi-text: #374151;
  --sbgi-muted: #6b7280;
  /* 쇼츠 이미지 — 원본 비율 유지, 화면별 최대 크기 */
  --sbgi-image-max-w: min(100%, 26.25rem); /* ~420px */
  --sbgi-image-max-h: min(84vh, 780px);
}

.sbgi-list-intro {
  max-width: 42rem;
  margin: 0 auto 1.25rem;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--sbgi-text);
  background: var(--sbgi-accent-soft);
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  text-align: center;
}

/* 목록 카드 썸네일 */
#guestbook-list .sbgi-card-thumb {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 0.5rem;
  background: #f3f4f6;
}

/* 상세 본문 */
.sbgi-post-body,
#post-message.sbgi-post-body {
  max-width: 42rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 0.75rem;
  box-sizing: border-box;
}

#post-message .sbgi-image-wrap {
  position: relative;
  width: 100%;
  max-width: var(--sbgi-image-max-w);
  margin: 0.75rem auto 1rem;
  border-radius: 14px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

#post-message .sbgi-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--sbgi-image-max-h);
  object-fit: contain;
  object-position: center;
}

#post-message .sbgi-scenes {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.25rem;
}

#post-message .sbgi-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #5b21b6;
  line-height: 1.45;
}

#post-message .sbgi-scene {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--sbgi-text);
  background: #fafafa;
  border: 1px solid var(--sbgi-border);
  border-radius: 10px;
  text-align: left;
  white-space: pre-line;
}

#post-message .sbgi-caption {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--sbgi-muted);
  line-height: 1.55;
  text-align: center;
}

#post-message .sbgi-note {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--sbgi-text);
  background: #f9fafb;
  border: 1px solid var(--sbgi-border);
  border-radius: 8px;
}

#post-message .sbgi-ai-note {
  margin: 1.1rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--sbgi-muted);
  text-align: center;
}

#post-message img:not(.sbgi-image-wrap img) {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0.5rem auto;
  display: block;
}

#post-message a {
  color: #5b21b6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

#post-message a:hover {
  border-bottom-color: #5b21b6;
}

@media (min-width: 992px) {
  .sbgi-page {
    --sbgi-image-max-w: min(100%, 28rem); /* PC 큰 화면 ~448px */
    --sbgi-image-max-h: min(88vh, 820px);
  }
}

@media (max-width: 576px) {
  .sbgi-page {
    --sbgi-image-max-w: min(94vw, 24rem); /* 모바일 거의 전폭 */
    --sbgi-image-max-h: min(93.6vh, 864px); /* 78vh·720px 대비 +20% */
  }

  .sbgi-post-body,
  #post-message.sbgi-post-body {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  #guestbook-list .sbgi-card-thumb {
    max-height: 140px;
  }
}