@font-face {
  font-family: 'GmarketSansBold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: #090603;
  color: #f4eee1;
  font-family: 'Pretendard Variable', Pretendard, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.composition {
  --shine: 0;
  --pulse: 0;
  --text-glow: 0;
  --progress: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #090603;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, .88);
}

/* 황금빛 노을 대기 광원 & 쉬머 오버레이 */
.composition::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 28%, rgba(254, 240, 138, .22), transparent 54%),
    linear-gradient(125deg, transparent 20%, rgba(255, 244, 204, .16) 48%, rgba(245, 158, 11, .1) 56%, transparent 78%);
  opacity: calc(.35 + var(--shine) * .65);
  mix-blend-mode: screen;
}

/* 쿠팡 2.0 다크 골드 앤티크 이중 액자 테두리 */
.composition::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245, 196, 81, .68);
  box-shadow:
    inset 0 0 0 3px rgba(10, 7, 4, .88),
    inset 0 0 0 4px rgba(245, 189, 86, .28),
    inset 0 0 24px rgba(245, 158, 11, calc(.12 + var(--pulse) * .22));
  pointer-events: none;
  z-index: 25;
}

.art, .cloud, .comet-svg, .rocket-wrap, .chest, .glow, .flare, .glint, .seal, .live-dot, .rule, .brand, .wordmark, .mark, .cta-pill, .tag, .badge {
  will-change: transform, opacity;
}

/* 1. 새로 생성된 시네마틱 공성전 & 황금 혜성 배경 */
.art {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: brightness(1.04) contrast(1.08) saturate(1.22);
  z-index: 1;
}

/* 2. 원경 대각선 황금 광선 (God Rays) */
.godrays {
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    -42deg,
    transparent 0px,
    transparent 34px,
    rgba(254, 240, 138, .055) 38px,
    rgba(245, 158, 11, .11) 44px,
    transparent 50px,
    transparent 92px
  );
  mix-blend-mode: screen;
}

/* 3. 좌측 카피 가독성을 살려주는 다크 골드 스모크 셰이드 */
.shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 5, 3, .95) 0%, rgba(12, 8, 4, .86) 38%, rgba(14, 9, 5, .36) 70%, rgba(10, 7, 4, .18) 100%),
    radial-gradient(circle at 78% 36%, rgba(245, 158, 11, .18), transparent 62%);
}

/* 4. 인트로 구름 레이어 */
.cloud {
  position: absolute;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  filter: brightness(1.05) drop-shadow(0 8px 18px rgba(0, 0, 0, .75));
}
.cloud-back { z-index: 4; opacity: .78; }
.cloud-front { z-index: 15; opacity: .9; }

/* 5. 다중 황금 혜성 궤적 SVG (Golden Arc) */
.comet-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* 6. 실시간 불씨 날리는 효과 & 스파크 캔버스 */
.ember-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 14;
  pointer-events: none;
}

/* 7. 중세 판타지 3D 로켓 & 다단 추진 화염 플룸 */
.rocket-unit {
  position: absolute;
  z-index: 16;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(42deg);
  transform-origin: 50% 50%;
}

.rocket-aura {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, .48) 0%, rgba(245, 158, 11, .2) 50%, transparent 75%);
  filter: blur(10px);
}

.rocket-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, .88))
    drop-shadow(0 0 18px rgba(245, 158, 11, .55));
}

.rocket-plume {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 84%;
  width: 48%;
  height: 75%;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
  border-radius: 50% 50% 55% 55% / 20% 20% 80% 80%;
  background: radial-gradient(
    ellipse at 50% 16%,
    #ffffff 0%,
    #fef08a 28%,
    #f97316 58%,
    rgba(220, 38, 38, 0) 95%
  );
  filter: blur(3px) drop-shadow(0 0 14px rgba(245, 158, 11, .95));
}

/* 8. 인트로 3D 보물/보급 선물상자 */
.chest {
  position: absolute;
  z-index: 17;
  pointer-events: none;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, .88))
    drop-shadow(0 0 18px rgba(251, 191, 36, .48));
}
.chest.supply {
  z-index: 13;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, .85))
    drop-shadow(0 0 18px rgba(56, 189, 248, .45));
}

/* 9. 황금 광원 & 4각 십자 스타버스트 플레어 (.glint) */
.glow {
  position: absolute;
  border-radius: 50%;
  z-index: 4;
  background: radial-gradient(circle, rgba(251, 191, 36, .35) 0%, rgba(217, 119, 6, .12) 48%, transparent 72%);
  pointer-events: none;
}

.flare {
  position: absolute;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 248, 214, .52) 0%, rgba(245, 158, 11, .22) 42%, transparent 72%);
}

.glint {
  position: absolute;
  z-index: 19;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transform-origin: center;
}
.glint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 50%, #f59e0b 100%);
  clip-path: polygon(50% 0%, 58% 40%, 100% 50%, 58% 60%, 50% 100%, 42% 60%, 0% 50%, 42% 40%);
}
.glint::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 240, .96) 0%, rgba(251, 191, 36, .6) 44%, transparent 74%);
}
.glint.sm { width: 13px; height: 13px; }
.glint.lg { width: 24px; height: 24px; }
.glint.ruby::after {
  background: radial-gradient(circle, #fff5f5 0%, rgba(249, 115, 22, .72) 44%, transparent 74%);
}

/* 10. 3D 메탈릭 골드 서버 로고 그룹 (쿠팡서버 + coupang) */
.logo-stack {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 18;
}
.logo-kor {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 6px 14px rgba(0, 0, 0, .92))
    drop-shadow(0 0 18px rgba(245, 158, 11, .45));
}
.logo-eng {
  display: block;
  width: 62%;
  height: auto;
  margin-top: -4%;
  margin-left: 5%;
  object-fit: contain;
  filter:
    drop-shadow(0 4px 10px rgba(0, 0, 0, .9))
    drop-shadow(0 0 12px rgba(245, 158, 11, .38));
}

/* 11. 타이포그래피 & 배지 & 배율 칩 */
.copy {
  position: absolute;
  z-index: 18;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 0;
  color: #fde047;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .95);
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #ffffff, #f59e0b);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(251, 191, 36, .95);
}

h1, p { margin: 0; }

h1 {
  font-family: 'GmarketSansBold', 'Pretendard Variable', Pretendard, sans-serif;
  letter-spacing: -.035em;
  line-height: 1.2;
  font-weight: 800;
  color: #fffbeb;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, .96),
    0 0 calc(10px + var(--text-glow) * 14px) rgba(245, 158, 11, calc(.2 + var(--text-glow) * .38));
}

.gold {
  position: relative;
  display: inline-block;
  color: #facc15;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, .98),
    0 0 6px rgba(15, 8, 2, .95),
    0 0 12px rgba(245, 158, 11, .55);
  animation: goldShinePulse 2s ease-in-out infinite alternate;
}

@keyframes goldShinePulse {
  0% {
    color: #f5b915;
    text-shadow:
      0 2px 3px rgba(0, 0, 0, .98),
      0 0 6px rgba(15, 8, 2, .95),
      0 0 10px rgba(217, 119, 6, .45);
  }
  100% {
    color: #fde047;
    text-shadow:
      0 2px 3px rgba(0, 0, 0, .98),
      0 0 6px rgba(15, 8, 2, .95),
      0 0 15px rgba(245, 158, 11, .75);
  }
}

.detail {
  color: #e6dac3;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.55;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .95);
}

.rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(254, 240, 138, .95) 0%, rgba(245, 158, 11, .68) 58%, transparent 100%);
  box-shadow: 0 0 8px rgba(251, 191, 36, .55);
  transform-origin: left;
}
.rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  background: #fef08a;
  transform: rotate(45deg);
  box-shadow: 0 0 8px #fef08a;
}

.rate-pills {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.rate-pills b {
  position: relative;
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fef3c7;
  background: linear-gradient(180deg, rgba(36, 22, 10, .94), rgba(14, 9, 4, .96));
  border: 1px solid rgba(245, 189, 86, .62);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 248, 210, .22), 0 2px 8px rgba(0, 0, 0, .78);
}

.rate-pills b.highlight {
  color: #1c0f02;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 38%, #facc15 100%);
  border-color: #ffffff;
  box-shadow: 0 0 12px rgba(250, 204, 21, .8), inset 0 1px 0 #ffffff;
}

.rate-pills b.slot-pill {
  color: #f3e8ff;
  background: linear-gradient(135deg, #6b21a8 0%, #3b0764 100%);
  border-color: #c084fc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 10px rgba(168, 85, 247, .55);
}

.emblem h1.emblem-headline {
  font-size: 16.5px;
  line-height: 1.15;
  margin: 2px 0 4px;
  letter-spacing: -0.04em;
}

.cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fffbeb;
  background: linear-gradient(180deg, #e11d48 0%, #991b1b 60%, #500709 100%);
  border: 1px solid rgba(254, 240, 138, .88);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .82), 0 0 14px rgba(220, 38, 38, .55);
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 22;
  opacity: .72;
  pointer-events: none;
}

/* =========================================================================
   1. 388x182 (EMBLEM: 로켓의 비상, 쿠팡 2.0)
   ========================================================================= */
.emblem .copy { left: 18px; top: 14px; }
.emblem .logo-stack { width: 152px; margin: 3px 0 4px; }
.emblem .rule { width: 185px; margin: 5px 0 6px; }
.emblem .detail { font-size: 11px; margin-bottom: 6px; color: #f6e7c8; }
.emblem .rocket-unit { width: 68px; right: 24px; top: 10px; }
.emblem .chest.royal { width: 82px; right: 10px; bottom: 8px; }
.emblem .cloud-1 { width: 180px; right: -24px; bottom: -26px; }
.emblem .cloud-2 { width: 150px; left: -20px; bottom: -28px; opacity: .55; }
.emblem .flare { width: 150px; height: 150px; right: 6px; top: 12px; opacity: .55; }
.emblem .g1 { left: 158px; top: 34px; }
.emblem .g2 { right: 48px; top: 22px; }
.emblem .g3 { right: 28px; bottom: 58px; }
.emblem .g4 { left: 68px; top: 32px; }

/* =========================================================================
   2. 500x300 (POSTER: 아덴 대륙 로켓 정착)
   ========================================================================= */
.poster .shade {
  background:
    linear-gradient(180deg, rgba(8, 5, 3, .68) 0%, rgba(8, 5, 3, .22) 40%, rgba(8, 5, 3, .88) 76%, #070402 100%),
    linear-gradient(90deg, rgba(8, 5, 3, .85) 0%, rgba(8, 5, 3, .25) 62%, rgba(8, 5, 3, .55) 100%);
}
.poster .logo-stack {
  position: absolute;
  left: 22px;
  top: 16px;
  width: 215px;
}
.poster .edition {
  position: absolute;
  z-index: 18;
  right: 20px;
  top: 18px;
  padding: 5px 10px;
  background: rgba(18, 11, 5, .88);
  border: 1px solid rgba(251, 191, 36, .72);
  border-radius: 999px;
  color: #fef08a;
  font: 800 9.5px/1 'Pretendard Variable', sans-serif;
  letter-spacing: .12em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .75);
}
.poster .rocket-unit { width: 88px; right: 42px; top: 38px; }
.poster .chest.royal { width: 108px; right: 16px; bottom: 52px; }
.poster .chest.supply { width: 78px; right: 118px; bottom: 56px; }
.poster .cloud-1 { width: 240px; left: -30px; top: 45px; opacity: .65; }
.poster .cloud-2 { width: 250px; right: -30px; bottom: 25px; }
.poster .copy { left: 24px; bottom: 18px; right: 24px; }
.poster h1 { font-size: 26px; margin: 5px 0 6px; }
.poster .rule { width: 280px; margin: 6px 0 8px; }
.poster .poster-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.poster .g1 { left: 116px; top: 22px; }
.poster .g2 { left: 218px; top: 28px; }
.poster .g3 { right: 62px; top: 48px; }
.poster .g4 { right: 54px; bottom: 112px; }

/* =========================================================================
   3. 911x90 (STRIP: 칼렉 ZERO 정통 2.0 반하자)
   ========================================================================= */
.strip { display: flex; align-items: center; }
.strip .shade {
  background:
    linear-gradient(90deg, #070402 0%, rgba(10, 6, 3, .92) 32%, rgba(12, 8, 4, .72) 65%, rgba(10, 6, 3, .45) 100%);
}
.strip .logo-stack {
  position: absolute;
  left: 14px;
  top: 12px;
  width: 148px;
}
.strip .divider {
  position: absolute;
  z-index: 18;
  left: 172px;
  top: 16px;
  height: 58px;
  width: 1px;
  background: linear-gradient(180deg, transparent, #fde047, transparent);
}
.strip .copy {
  left: 182px;
  top: 16px;
  max-width: 288px;
}
.strip h1 {
  font-size: 16px;
  margin-bottom: 5px;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.strip .eyebrow {
  font-size: 9px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.strip .rates {
  position: absolute;
  left: 482px;
  top: 17px;
  display: flex;
  gap: 5px;
  z-index: 18;
}
.strip .rates > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 5px 6px;
  background: rgba(18, 11, 5, .92);
  border: 1px solid rgba(245, 189, 86, .58);
  border-radius: 4px;
  font-size: 8px;
  font-weight: 800;
  color: #fde047;
  letter-spacing: .06em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .7);
}
.strip .rates strong {
  display: block;
  font: 800 14.5px/1.1 'GmarketSansBold', sans-serif;
  color: #fffbeb;
  margin-top: 2px;
}
.strip .rocket-unit { width: 48px; right: 186px; top: 8px; }
.strip .chest.royal { width: 60px; right: 128px; bottom: 5px; }
.strip .tag {
  position: absolute;
  z-index: 18;
  right: 12px;
  top: 23px;
  border: 1px solid #fef08a;
  border-radius: 999px;
  background: linear-gradient(180deg, #e11d48 0%, #991b1b 100%);
  color: #fffbeb;
  font-weight: 800;
  padding: 9px 12px;
  font-size: 10.5px;
  letter-spacing: .03em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .85), 0 0 14px rgba(220, 38, 38, .5);
}
.strip .rule {
  position: absolute;
  z-index: 20;
  bottom: 1px;
  left: 0;
  width: 911px;
}
.strip .g1 { left: 92px; top: 12px; }
.strip .g2 { left: 158px; top: 24px; }
.strip .g3 { right: 212px; top: 14px; }
.strip .g4 { right: 152px; top: 22px; }

/* =========================================================================
   4. 450x120 (COMPACT: 10무양 9셋 5악세의 전율)
   ========================================================================= */
.compact .shade {
  background:
    linear-gradient(90deg, #070402 0%, rgba(10, 6, 3, .92) 48%, rgba(12, 8, 4, .38) 100%);
}
.compact .badge {
  position: absolute;
  z-index: 8;
  width: 134px;
  height: 114px;
  left: 10px;
  top: 0;
  background: linear-gradient(165deg, rgba(245, 158, 11, .28), rgba(120, 53, 15, .08));
  border-inline: 1px solid rgba(251, 191, 36, .48);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
}
.compact .logo-stack {
  position: absolute;
  left: 16px;
  top: 29px;
  width: 122px;
}
.compact .copy { left: 152px; top: 14px; }
.compact h1 { font-size: 20px; margin: 3px 0 5px; }
.compact .rocket-unit { width: 54px; right: 56px; top: 8px; }
.compact .chest.royal { width: 64px; right: 8px; bottom: 6px; }
.compact .cloud-1 { width: 160px; right: -20px; bottom: -24px; }
.compact .g1 { left: 72px; top: 27px; }
.compact .g2 { left: 126px; top: 41px; }
.compact .g3 { right: 72px; top: 16px; }
.compact .g4 { right: 26px; bottom: 44px; }

/* =========================================================================
   5. 830x360 (WIDE: 쿠팡서버 그랜드 오픈)
   ========================================================================= */
.wide .shade {
  background:
    linear-gradient(90deg, #070402 0%, rgba(10, 6, 3, .93) 38%, rgba(12, 8, 4, .38) 68%, rgba(10, 6, 3, .14) 100%),
    linear-gradient(0deg, #070402 0%, transparent 30%);
}
.wide .glow { width: 380px; height: 380px; right: 20px; top: -30px; }
.wide .flare { width: 240px; height: 240px; right: 140px; top: 30px; opacity: .48; }
.wide .copy { top: 24px; left: 34px; }
.wide .logo-stack {
  width: 248px;
  margin-bottom: 10px;
}
.wide h1 { font-size: 31px; margin: 5px 0 8px; }
.wide .detail { font-size: 12.5px; margin-bottom: 2px; }
.wide .rule { width: 310px; margin: 9px 0 10px; }
.wide .wide-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wide .rocket-unit { width: 112px; right: 64px; top: 18px; }
.wide .chest.royal { width: 132px; right: 28px; bottom: 44px; }
.wide .chest.supply { width: 96px; right: 158px; bottom: 38px; }
.wide .cloud-1 { width: 290px; left: -30px; top: 75px; opacity: .55; }
.wide .cloud-2 { width: 310px; right: -30px; bottom: -25px; }
.wide .signature {
  position: absolute;
  right: 24px;
  bottom: 16px;
  padding: 5px 12px;
  background: rgba(14, 9, 4, .9);
  border: 1px solid rgba(251, 191, 36, .62);
  border-radius: 999px;
  color: #fef08a;
  font: 800 9.5px/1 'Pretendard Variable', sans-serif;
  letter-spacing: .16em;
  z-index: 20;
}
.wide .g1 { left: 156px; top: 26px; }
.wide .g2 { left: 264px; top: 42px; }
.wide .g3 { right: 98px; top: 34px; }
.wide .g4 { right: 78px; bottom: 130px; }