:root {
  color-scheme: dark;
  --orange: #ff5a00;
  --purple: #a852db;
  --line: #292929;
  --bg: #000;
  /* One value controls the size of all translated artwork text. */
  --copy-scale: 1;
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; min-width: 320px; background: var(--bg); color: #fff; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.site-shell { position: relative; width: 100%; max-width: 880px; margin: 0 auto; background: #000; }
.site-header {
  position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: clamp(42px, 14.09vw, 124px); display: flex;
  align-items: center; justify-content: center; background: #000;
}
.brand {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: clamp(76px, 25.91vw, 228px); height: clamp(26px, 8.64vw, 76px); color: #fff; text-decoration: none; font-size: clamp(13px, 4.32vw, 38px);
  letter-spacing: -1px; font-weight: 600;
}
.bracket { position: absolute; width: clamp(11px, 4.09vw, 36px); height: clamp(8px, 2.27vw, 20px); border-color: #fff; border-style: solid; }
.bracket-tl { left: 0; top: 0; border-width: clamp(1.5px, .6vw, 5px) 0 0 clamp(1.5px, .6vw, 5px); }
.bracket-tr { right: 0; top: 0; border-width: clamp(1.5px, .6vw, 5px) clamp(1.5px, .6vw, 5px) 0 0; }
.bracket-bl { left: 0; bottom: 0; border-width: 0 0 clamp(1.5px, .6vw, 5px) clamp(1.5px, .6vw, 5px); }
.bracket-br { right: 0; bottom: 0; border-width: 0 clamp(1.5px, .6vw, 5px) clamp(1.5px, .6vw, 5px) 0; }
.language-control {
  position: absolute; right: clamp(8px, 3.52vw, 31px); top: clamp(8px, 3.98vw, 35px);
}
.language-button {
  position: relative; right: auto; top: auto; width: clamp(68px, 21.59vw, 190px); max-width: calc(100vw - 16px); height: clamp(25px, 7.39vw, 65px); border-radius: 999px;
  border: clamp(1px, .227vw, 2px) solid #fff; background: transparent; color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden;
}
.language-button .chevron { margin-left: clamp(4px, 1.48vw, 13px); font-size: clamp(13px, 3.18vw, 28px); line-height: 0; }
.language-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 100%; min-width: 132px; max-height: min(70vh, 390px); overflow-y: auto;
  padding: 5px; border: 1px solid #5a5a5a; border-radius: 12px; background: #161616;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.language-menu[hidden], .country-menu[hidden] { display: none; }
.language-menu button {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent;
  color: #f5f5f5; text-align: left; font-size: 15px;
}
.language-menu button:hover, .language-menu button:focus-visible { background: #3a234b; outline: none; }
.screen { display: none; }
.screen.is-active { display: block; }
.artboard { position: relative; width: 100%; overflow: hidden; background: #000; }
.artboard > img { display: block; width: 100%; max-width: 100%; height: auto; user-select: none; }
.screen-overlay { position: absolute; inset: 0; z-index: 4; }
.screen[data-screen="verify"] .artboard::before {
  content: "";
  position: absolute;
  left: 3.52%;
  top: 47.46%;
  width: 93%;
  height: 18.27%;
  border-radius: clamp(3px, .91vw, 8px);
  background: #222;
  pointer-events: none;
  z-index: 1;
}
.screen[data-screen="verify"] .artboard::after {
  content: "";
  position: absolute;
  left: 3.52%;
  top: 47.46%;
  width: 93%;
  height: 18.27%;
  border: 1px solid rgba(190, 190, 190, .96);
  border-radius: clamp(3px, .91vw, 8px);
  pointer-events: none;
  z-index: 8;
}
.screen[data-screen="registration"] .artboard::after {
  content: "";
  position: absolute;
  left: 0;
  top: 72%;
  width: 100%;
  border-top: 2px solid #292929;
  pointer-events: none;
  z-index: 8;
}
.locale-copy-layer { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.copy-mask { position: absolute; z-index: 0; }
.copy-text {
  position: absolute; z-index: 1; margin: 0; text-align: center;
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  font-size: var(--copy-font-size);
}
@supports (font-size: calc(1px * 1)) {
  .copy-text { font-size: calc(var(--copy-font-size) * var(--copy-scale)); }
}

/* Main verification artwork copy. The masks cover the Korean raster text on non-Korean systems. */
.verify-hero-mask { left: 0; top: 7%; width: 100%; height: 12.5%; background: linear-gradient(180deg, #24182d 0%, #160f1b 52%, #050505 100%); }
.verify-kicker { --copy-font-size: clamp(15px, 2.4vw, 30px); top: 8.2%; left: 10%; width: 80%; color: #b6b4b8; font-weight: 700; }
.verify-title-copy { --copy-font-size: clamp(28px, 5.5vw, 64px); top: 11.1%; left: 5%; width: 90%; color: #fff; line-height: 1.1; font-weight: 800; white-space: nowrap; }
.verify-subtitle-copy { --copy-font-size: clamp(13px, calc(2.2vw + 3px), 30px); top: 15.3%; left: 5%; width: 90%; padding: 0; color: #fff; background: transparent; line-height: 1.25; font-weight: 700; white-space: nowrap; }
.verify-card-title-mask, .verify-error-mask { left: 3.5%; width: 93%; background: #222; }
.verify-card-title-mask { top: 47.7%; height: 3.4%; }
.verify-error-mask { top: 56.5%; height: 3.1%; }
.verify-card-title-copy { --copy-font-size: clamp(15px, calc(2.35vw + 2px), 26px); top: 48.65%; left: 5%; width: 90%; color: #b25de4; font-weight: 700; line-height: 1.2; }
.verify-error-copy { --copy-font-size: clamp(10px, 1.8vw, 20px); top: 57.2%; left: 8%; width: 84%; color: #ff8b38; font-weight: 700; text-align: left; visibility: hidden; }

/* Registration artwork copy. */
.registration-notice-mask { display: none; }
.registration-notice-copy {
  --copy-font-size: clamp(16px, calc(2.8vw + 3px), 34px);
  top: 8.5%; left: 50%; width: max-content; max-width: calc(100% - 12%); transform: translateX(-50%);
  padding: clamp(6px, 1.2vw, 11px) clamp(12px, 2vw, 18px); border-radius: 1px;
  background: #40304d; color: #fff; font-weight: 700; line-height: 1.2;
  white-space: nowrap; letter-spacing: -.015em;
}
.registration-intro-mask {
  left: 18%; top: 30.4%; width: 64%; height: 6.4%;
  background: linear-gradient(180deg, #0a0a0b 0%, #1d1423 100%);
}
.registration-intro-title { --copy-font-size: clamp(16px, 2.8vw, 31px); top: 30.75%; left: 8%; width: 84%; color: #fff; font-weight: 700; }
.registration-intro-body { --copy-font-size: clamp(12px, 2vw, 22px); top: 33.25%; left: 10%; width: 80%; color: #d8d5d9; line-height: 1.5; }
.registration-info-one-mask, .registration-info-two-mask { left: 34%; width: 64%; background: #000; }
/* These two blocks follow the source artwork's lower information section. Keep
   the copy aligned to the raster icons as the 880px artwork scales down. */
.registration-info-one-mask { top: 45.8%; height: 11.2%; }
.registration-info-two-mask { top: 58.1%; height: 11.8%; }
.registration-info-one-title, .registration-info-two-title { --copy-font-size: clamp(13px, 2.1vw, 23px); left: 35%; width: 61%; color: #ddd; font-weight: 700; text-align: left; }
.registration-info-one-title { top: 46.9%; }
.registration-info-two-title { top: 58.9%; }
.registration-info-one-body, .registration-info-two-body { --copy-font-size: clamp(10px, 1.6vw, 18px); left: 35%; width: 61%; color: #8f8b91; line-height: 1.55; text-align: left; }
.registration-info-one-body { top: 49.5%; }
.registration-info-two-body { top: 61.6%; }

.recovery-title-mask { left: 0; top: 8.8%; width: 100%; height: 7.5%; background: #000; }
.recovery-title-copy { --copy-font-size: clamp(20px, 4.2vw, 46px); top: 12.2%; left: 6.8%; width: 86.5%; color: #fff; font-weight: 800; text-align: center; white-space: nowrap; }
.recovery-error-mask { left: 5%; top: 41.8%; width: 90%; height: 3.2%; background: #1b1b1b; }
.recovery-error-copy { --copy-font-size: clamp(10px, 1.7vw, 19px); top: 42.3%; left: 6%; width: 88%; color: #ff8b38; font-weight: 700; text-align: left; visibility: hidden; }

.success-heading-mask { left: 0; top: 9%; width: 100%; height: 17%; background: #000; }
.success-heading-copy { --copy-font-size: clamp(27px, 5vw, 55px); top: 11%; left: 0; width: 100%; color: #fff; font-weight: 800; }
.success-subheading-copy { --copy-font-size: clamp(16px, 3.1vw, 34px); top: 16.5%; left: 0; width: 100%; color: #fff; }
.success-body-mask { left: 5%; top: 49%; width: 90%; height: 9%; background: #000; }
.success-body-copy { --copy-font-size: clamp(11px, 1.9vw, 21px); top: 50.3%; left: 7%; width: 86%; color: #aaa; line-height: 1.6; }

/* The footer is part of the supplied raster artwork too. Replace its Korean copy on other systems while keeping the marks and payment logos intact. */
.footer-copyright-mask, .footer-payment-mask { left: 2%; width: 96%; background: #000; }
.footer-copyright-copy { --copy-font-size: clamp(10px, 1.55vw, 17px); left: 3%; width: 94%; color: #9fa2a7; line-height: 1.55; text-align: left; }
.footer-payment-copy { --copy-font-size: clamp(10px, 1.55vw, 17px); left: 3%; width: 25%; color: #9fa2a7; text-align: left; }
.screen[data-screen="verify"] .footer-copyright-mask { top: 70.2%; height: 7.4%; }
.screen[data-screen="verify"] .footer-copyright-copy { top: 71%; }
.screen[data-screen="verify"] .footer-payment-mask { top: 80.2%; height: 3.2%; }
.screen[data-screen="verify"] .footer-payment-copy { top: 80.8%; }
.screen[data-screen="registration"] .footer-copyright-mask { top: 72%; height: 7.8%; }
.screen[data-screen="registration"] .footer-copyright-copy { top: 74.6%; }
.screen[data-screen="registration"] .footer-payment-mask { top: 83.3%; height: 1.6%; }
.screen[data-screen="registration"] .footer-payment-copy { top: 83.6%; }
.screen[data-screen="recovery"] .footer-copyright-mask { top: 60.8%; height: 8%; }
.screen[data-screen="recovery"] .footer-copyright-copy { top: 61.6%; }
.screen[data-screen="recovery"] .footer-payment-mask { top: 74.6%; height: 3.5%; }
.screen[data-screen="recovery"] .footer-payment-copy { top: 75.2%; }
.screen[data-screen="success"] .footer-copyright-mask { top: 73.8%; height: 8%; }
.screen[data-screen="success"] .footer-copyright-copy { top: 74.6%; }
.screen[data-screen="success"] .footer-payment-mask { top: 87%; height: 3.5%; }
.screen[data-screen="success"] .footer-payment-copy { top: 87.6%; }
.phone-form, .recovery-form { position: absolute; left: 7%; width: 86%; }
.phone-form { top: 52.5%; }
.phone-input-shell {
  position: relative; display: flex; align-items: center; width: 100%; height: 10.8vw; max-height: 95px; min-height: 0;
  border-radius: 999px; background: rgba(255,255,255,.98); overflow: visible;
}
.country-select {
  display: flex; flex: 0 0 29%; align-items: center; justify-content: center; gap: 6px; height: 62%;
  padding: 0 8px; border: 0; border-right: 1px solid #aaa; border-radius: 999px 0 0 999px;
  min-width: 0; overflow: hidden; background: transparent; color: #555; font-size: 15px; white-space: nowrap;
}
.country-select:hover, .country-select:focus-visible { color: #242424; outline: none; }
.country-chevron { color: #666; font-size: 16px; line-height: 1; }
.country-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 15; width: min(245px, 70vw); max-height: 300px;
  overflow-y: auto; padding: 5px; border: 1px solid #5a5a5a; border-radius: 12px; background: #161616;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.country-menu button {
  display: grid; grid-template-columns: 48px 1fr; gap: 6px; width: 100%; padding: 9px 8px; border: 0; border-radius: 7px;
  background: transparent; color: #f5f5f5; text-align: left; font-size: 15px;
}
.country-menu button:hover, .country-menu button:focus-visible, .country-menu button[aria-selected="true"] { background: #3a234b; outline: none; }
.country-menu button span:first-child { color: #c58bea; font-weight: 700; }
.phone-form input {
  display: block; flex: 1; min-width: 0; width: auto; height: 100%; border: 0;
  border-radius: 0 999px 999px 0; padding: 0 25px; color: #3c3c3c; background: #fff;
  font-size: clamp(13px, 1.9vw, 20px); outline: none;
}
.phone-form input:focus { background: #fff; color: #3c3c3c; }
.phone-form input:-webkit-autofill,
.phone-form input:-webkit-autofill:hover,
.phone-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #3c3c3c;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
}
.phone-form input::placeholder { color: #aaa; }
.form-error { margin: 1.35vw 0 1.5vw 4%; color: #ff8b38; font-weight: 700; font-size: clamp(12px, 1.9vw, 21px); visibility: hidden; }
.phone-form button, .recovery-form button, .art-button {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 9vw; max-height: 80px; min-height: 0;
  padding: 0; border: 0; border-radius: 999px; color: #fff; background: var(--orange); font-size: 15px; font-weight: 700;
  line-height: 1.2; text-align: center;
  transition: transform .2s ease, filter .2s ease;
}
.phone-form button { position: relative; top: -1px; }
.phone-form .country-select {
  position: static; top: auto; width: auto; height: 62%; min-height: 0; border: 0; border-right: 1px solid #aaa;
  border-radius: 999px 0 0 999px; background: transparent !important; color: #555; font-size: 15px;
  font-weight: 400; transform: none; filter: none;
}
.phone-form .country-select:hover, .phone-form .country-select:focus-visible { transform: none; filter: none; }
.phone-form .country-menu button {
  display: grid; grid-template-columns: 48px 1fr; gap: 6px; width: 100%; height: auto; min-height: 0;
  padding: 9px 8px; border: 0; border-radius: 7px; background: transparent !important; color: #f5f5f5;
  font-size: 15px; font-weight: 400; text-align: left; transform: none; filter: none;
}
.phone-form .country-menu button:hover, .phone-form .country-menu button:focus-visible,
.phone-form .country-menu button[aria-selected="true"] { background: #3a234b !important; outline: none; }
.phone-form .country-menu button span:first-child { color: #c58bea; font-weight: 700; }
.phone-form button:hover, .recovery-form button:hover, .art-button:hover { filter: brightness(1.12); transform: translateY(-2px); }
.registration-button { position: absolute; left: 20.2%; top: 37.7%; width: 61.9%; }
.success-button { position: absolute; left: 24%; top: 60.1%; width: 52%; color: #222; background: #f4f4f4; }
.recovery-form { top: 18.75%; left: 6.8%; width: 86.5%; }
.recovery-form textarea {
  width: 100%; height: 38.6vw; max-height: 340px; min-height: 0; resize: none; display: block;
  padding: 23px 30px; border: 1px solid #969696; border-radius: min(12px, 1.36vw); color: #fff; background: #303030;
  font-size: clamp(14px, calc(2.25vw + 2px), 28px); outline: none;
}
.recovery-form textarea::placeholder { color: #aaa; }
.recovery-form .form-error { margin: 1.7vw 0 3vw; }
.recovery-form button { width: 71.5%; margin: 0 auto; font-size: 15px; }
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 10; transform: translate(-50%, 20px); opacity: 0;
  pointer-events: none; padding: 11px 18px; border: 1px solid #69488c; border-radius: 999px;
  background: #20102e; color: #fff; font-size: 14px; transition: opacity .25s ease, transform .25s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .registration-notice-copy { --copy-font-size: clamp(16px, calc(2.8vw + 3px), 27px); }
  .phone-form input { padding: 0 8px; font-size: clamp(11px, 3vw, 15px); }
  .country-select { flex-basis: 26%; gap: 3px; padding: 0 3px; font-size: 14px; }
  .country-chevron { font-size: 13px; }
  .form-error { margin-left: 20px; }
  .recovery-form textarea { padding: 2.61vw 3.41vw; }
}

@media (max-width: 520px) {
  .language-control { right: 8px; }
  .language-menu { min-width: 128px; }
}

@media (max-width: 360px) {
  .site-header { height: 44px; }
  .brand { width: 82px; height: 28px; font-size: 14px; }
  .language-button { width: 78px; height: 28px; font-size: 13px; }
  .language-button .chevron { margin-left: 4px; font-size: 14px; }
  .phone-form input { padding: 0 8px; font-size: 14px; }
  .country-select, .phone-form .country-select { font-size: 13px; }
  .phone-form button { font-size: 14px; }
}