.promotion-banner {
  box-sizing: border-box; position: absolute; top: calc(0px - var(--promotion-height, 0px) + env(safe-area-inset-top, 0px)); left: 0; right: -12px; z-index: 1001; pointer-events: auto;
  display: flex; align-items: center; min-height: 44px; padding: 6px max(6px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
  background: transparent; color: #151515; font-family: 'Transport New Md', 'Noto Sans KR', sans-serif; font-size: 15px; line-height: 1.45; text-align: center;
  touch-action: pan-y pinch-zoom;
}
.promotion-banner[hidden] { display: none !important; }
.promotion-banner:not([hidden]) { background: #ffcc33; }
.promotion-copy { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 1.2em; white-space: nowrap; }
.promotion-zh { font-family: 'Transport New Md', 'Noto Sans KR', sans-serif; font-size: 1em; }
/* The CJK glyphs sit slightly above Transport's visible letter centre. */
.promotion-banner:not(.promotion-compact) .promotion-zh { transform: translateY(.08em); }
.promotion-close { position: relative; flex: 0 0 44px; align-self: center; width: 44px; height: 44px; margin: -6px 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 0; cursor: pointer; }
.promotion-close::before, .promotion-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.promotion-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.promotion-close:hover { opacity: .6; }
.promotion-close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.promotion-compact .promotion-copy { display: grid; gap: 0; white-space: normal; overflow-wrap: anywhere; }
.promotion-compact .promotion-en, .promotion-compact .promotion-zh { grid-area: 1 / 1; transition: opacity .25s ease, transform .25s ease; }
.promotion-compact .promotion-zh { opacity: 0; visibility: hidden; transform: translateY(5px); }
.promotion-compact.show-chinese .promotion-en { opacity: 0; visibility: hidden; transform: translateY(-5px); }
.promotion-compact.show-chinese .promotion-zh { opacity: 1; visibility: visible; transform: translateY(0); }
/* Share the header's fixed coordinate system. A separately animated document
   layer drifted when Safari changed its viewport while collapsing toolbars. */
@supports (-webkit-touch-callout: none) {
  .promotion-banner { top: calc(0px - var(--promotion-height, 0px) - var(--header-space)); }
}
.promotion-banner.is-preview { position: relative; top: auto; right: auto; left: auto; animation: none; z-index: auto; font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif; }
@media (prefers-reduced-motion: reduce) {
  .promotion-compact .promotion-en, .promotion-compact .promotion-zh { transition: none; transform: none; visibility: visible; opacity: 1; grid-area: auto; }
  .promotion-compact .promotion-copy { gap: 4px; }
}