/* 화면 가장자리와의 간격 — 테마 CSS 에서 .gb-popups { --gb-popup-top: 150px; } 처럼 바꿀 수 있다 */
.gb-popups { --gb-popup-top: 110px; --gb-popup-edge: 20px; display: contents; font-family: "Pretendard", sans-serif; }
.gb-popups[hidden] { display: none; }
.gb-popups__group { position: fixed; z-index: 100000; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; width: max-content; max-width: calc(100vw - var(--gb-popup-edge) * 2); max-height: calc(100vh - var(--gb-popup-top) - var(--gb-popup-edge)); overflow-y: auto; font-family: inherit; }
.gb-popups__group--top-left { top: var(--gb-popup-top); left: var(--gb-popup-edge); }
.gb-popups__group--top-center { top: var(--gb-popup-top); left: 50%; transform: translateX(-50%); justify-content: center; }
.gb-popups__group--top-right { top: var(--gb-popup-top); right: var(--gb-popup-edge); justify-content: flex-end; }
.gb-popups__group--center { top: 50%; left: 50%; transform: translate(-50%, -50%); justify-content: center; align-items: center; max-height: calc(100vh - var(--gb-popup-edge) * 2); }
.gb-popups__group--bottom-left { bottom: var(--gb-popup-edge); left: var(--gb-popup-edge); align-items: flex-end; max-height: calc(100vh - var(--gb-popup-edge) * 2); }
.gb-popups__group--bottom-right { bottom: var(--gb-popup-edge); right: var(--gb-popup-edge); justify-content: flex-end; align-items: flex-end; max-height: calc(100vh - var(--gb-popup-edge) * 2); }
.gb-popups *, .gb-popups *::before, .gb-popups *::after { box-sizing: border-box; }
.gb-popup { width: min(var(--gb-popup-width, 400px), calc(100vw - 32px)); background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 44px rgba(0, 0, 0, .28); animation: gb-popup-in .25s ease both; }
.gb-popup__body { background: #fff; }
#top .gb-popup__body img, .gb-popup__body img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
.gb-popup__link { display: block; }
.gb-popup__link:focus-visible { outline: 3px solid #007c91; outline-offset: -3px; }
.gb-popup__content { max-height: 60vh; overflow-y: auto; padding: 28px 26px; color: #333; font-size: 15px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.gb-popup__content > :first-child { margin-top: 0; }
.gb-popup__content > :last-child { margin-bottom: 0; }
#top .gb-popup__more, .gb-popup__more { display: inline-flex; align-items: center; min-height: 40px; margin-top: 18px; padding: 8px 18px; border-radius: 999px; background: #007c91; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.gb-popup__bar { display: flex; justify-content: space-between; background: #253b32; }
#top .gb-popup__bar button, .gb-popup__bar button { min-height: 44px; margin: 0; padding: 10px 16px; border: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
#top .gb-popup__bar button:hover, .gb-popup__bar button:hover { background: rgba(255, 255, 255, .12); }
.gb-popup__bar button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* 모바일: 화면 가운데에 하나씩, 닫으면 다음 팝업 */
@media (max-width: 767px) {
  .gb-popups { position: fixed; z-index: 100000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .5); }
  .gb-popups__group { display: contents; }
  .gb-popup { max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
  .gb-popup:not(.is-current) { display: none; }
  .gb-popup__body { overflow-y: auto; }
  .gb-popup__content { max-height: none; }
}

@keyframes gb-popup-in { from { transform: translateY(12px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gb-popup { animation: none; } }