/* 모든 예시 화면(/examples/*, /website 템플릿) 맨 위에 붙는 안내 띠 — 예시 자체 디자인과 섞이지 않게 접두사 sbp-demo- 사용 */
.sbp-demo-bar { position: relative; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; background: #1A2F2A; color: #FAF1E6; font: 500 13px/1.4 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif; letter-spacing: -0.1px; }
.sbp-demo-bar a { color: inherit; text-decoration: none; font-weight: 600; white-space: nowrap; }
.sbp-demo-bar a:hover { color: #E8896A; }
.sbp-demo-bar__note { opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sbp-demo-bar__cta { padding: 5px 12px; border-radius: 99px; background: #E8896A; color: #1A2F2A !important; }
.sbp-demo-bar__cta:hover { background: #FAF1E6; }
@media (max-width: 560px) { .sbp-demo-bar__note { display: none; } }

/* 템플릿 맨 아래 '더할 수 있는 기능(유료)' 상자 — 시안 전용, 납품 때 지운다(tools/template-addons.py) */
.sbp-demo-addons { background: #1A2F2A; color: #FAF1E6; font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif; word-break: keep-all; }
.sbp-demo-addons__in { max-width: 960px; margin: 0 auto; padding: 48px 24px 56px; }
.sbp-demo-addons__eyebrow { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; color: #7DCAB5; }
.sbp-demo-addons__h { margin: 0 0 20px; font-size: 22px; line-height: 1.4; font-weight: 700; letter-spacing: -0.3px; color: #FAF1E6; }
.sbp-demo-addons__h span { font-size: 15px; font-weight: 600; color: #E8896A; }
.sbp-demo-addons__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0 0 22px; padding: 0; list-style: none; }
.sbp-demo-addons__list li { position: relative; padding: 12px 14px 12px 34px; border: 1px solid rgba(250,241,230,.16); border-radius: 10px; font-size: 15px; line-height: 1.5; }
.sbp-demo-addons__list li::before { content: '+'; position: absolute; left: 14px; top: 11px; font-weight: 700; color: #E8896A; }
.sbp-demo-addons__note { margin: 0 0 18px; font-size: 14.5px; line-height: 1.75; color: rgba(250,241,230,.78); }
.sbp-demo-addons__cta { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 99px; background: #E8896A; color: #1A2F2A; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.sbp-demo-addons__cta:hover { background: #FAF1E6; }
@media (max-width: 720px) {
  /* 템플릿의 모바일 하단 고정 바에 가리지 않게 아래 여백 */
  .sbp-demo-addons__in { padding: 40px 20px 120px; }
  .sbp-demo-addons__list { grid-template-columns: 1fr; }
  .sbp-demo-addons__h { font-size: 20px; }
}