#presalePopup {
  position: fixed;
  inset: 0;
  width: min(600px, calc(100vw - 32px), calc(100vh - 104px));
  width: min(600px, calc(100vw - 32px), calc(100dvh - 104px));
  height: fit-content;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: #fff;
}
#presalePopup::backdrop { background: rgba(5, 15, 25, .68); }
#presalePopup .presale-controls { display: flex; justify-content: flex-end; padding-bottom: 8px; }
#presalePopup .presale-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 84px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px;
  background: #142b40;
  color: #fff;
  font: 600 16px/1.4 'Noto Sans KR', sans-serif;
  cursor: pointer;
}
#presalePopup .presale-close span { font-size: 24px; line-height: 1; }
#presalePopup .presale-artwork { position: relative; aspect-ratio: 1; }
#presalePopup .presale-artwork img { display: block; width: 100%; height: auto; }
#presalePopup .presale-consult {
  position: absolute;
  left: 82.4%;
  top: 61%;
  width: 21%;
  height: 6.4%;
  min-width: 84px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  cursor: pointer;
}
#presalePopup .presale-consult:hover { background: rgba(255, 255, 255, .12); }
#presalePopup :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }