/* 디자인 샘플 안내 띠 고정 — 모든 데모 공통 (sample-banner.js 와 짝). 데모 CSS 뒤에 불러 띠 위치만 덮는다. */
.sample-banner[data-pinned] {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 2147483000;
  margin: 0 !important;
}
.sample-banner-spacer { display: block; }
.sample-banner__copyright { opacity: .85; }
/* 좁은 화면 — 늘 떠 있는 띠가 화면을 너무 차지하지 않게: 작은 글자, 꼬리표를 문장 앞에 붙여 한 흐름으로 */
@media (max-width: 640px) {
  .sample-banner[data-pinned] .sample-banner__inner {
    display: block !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  .sample-banner[data-pinned] .sample-banner__tag {
    display: inline-block !important;
    margin: 0 6px 0 0 !important;
    vertical-align: 1px;
    font-size: 10px !important;
    padding: 1px 6px !important;
  }
  .sample-banner[data-pinned] p {
    display: inline !important;
    margin: 0 !important;
  }
  .sample-banner[data-pinned],
  .sample-banner[data-pinned] p,
  .sample-banner[data-pinned] a,
  .sample-banner[data-pinned] .sample-banner__copyright {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
}