.floating-banners { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.floating-banner-group { position: absolute; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; max-width: calc(50vw - 32px); max-height: calc(50dvh - 60px); padding: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; pointer-events: auto; }
.floating-banner-group[data-position="bottom-right"] { right: 20px; }
.floating-banner-group[data-position="bottom-left"] { left: 20px; align-items: flex-start; }
.floating-banner { position: relative; flex: 0 0 auto; width: var(--banner-width, 320px); max-width: 100%; border: 1px solid #b9b0a0; color: var(--ink, #181812); background: var(--paper-light, #fbf8f1); box-shadow: 0 8px 28px rgba(24,24,18,.2); }
.floating-banner-content { display: block; }
.floating-banner-image { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.floating-banner-copy { display: grid; gap: 12px; padding: 26px 22px 22px; border-top: 3px solid var(--red, #a5281c); overflow-wrap: anywhere; }
.floating-banner-copy h2 { margin: 0; padding-right: 24px; font: 700 23px/1.45 "Gowun Batang", serif; }
.floating-banner-copy p { margin: 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.floating-banner-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px; color: rgba(24,24,18,.6); background: transparent; box-shadow: none; font-size: 0; cursor: pointer; touch-action: manipulation; transition: color .16s ease, background-color .16s ease; }
.floating-banner-close::before, .floating-banner-close::after { content: ""; position: absolute; width: 12px; height: 1.25px; border-radius: 1px; background: currentColor; pointer-events: none; transform: rotate(45deg); }
.floating-banner-close::after { transform: rotate(-45deg); }
.floating-banner-close:hover:not(:disabled) { color: var(--ink, #181812); background: rgba(24,24,18,.045); }
.floating-banner-close:active:not(:disabled) { background: rgba(24,24,18,.08); }
.floating-banner:has(.floating-banner-image) .floating-banner-close { background: rgba(251,248,241,.85); }
.floating-banner-close:focus-visible { outline: 2px solid var(--red, #a5281c); outline-offset: 2px; }
.floating-banner-close:disabled { opacity: 1; cursor: default; }
@media (pointer: coarse) {
  .floating-banner-close { top: 0; right: 0; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-banner-close { transition: none; }
}
@media (max-width: 600px) {
  .floating-banners { inset: auto 12px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .floating-banner-group { position: static; display: contents; }
  .floating-banner { align-self: flex-end; width: min(var(--banner-width, 320px), 100%); pointer-events: auto; }
  .floating-banner-group[data-position="bottom-left"] .floating-banner { align-self: flex-start; }
  .floating-banner-image { max-height: 240px; }
}