* { box-sizing: border-box; }
html, body { margin: 0; background: #04120a; color: #f0fdf4; font-family: 'Pretendard Variable', Pretendard, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; }

.composition {
  --shine: 0;
  --pulse: 0;
  --text-glow: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 0, rgba(16, 185, 129, .14), transparent 45%), #04120a;
  border-radius: 8px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .88);
}

/* 은은한 타잔 정글 에메랄드 & 골드 쉬머 오버레이 */
.composition::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 32%, rgba(16, 185, 129, .16), transparent 52%),
    linear-gradient(120deg, transparent 22%, rgba(213, 177, 106, .12) 48%, rgba(5, 150, 105, .08) 56%, transparent 78%);
  opacity: var(--shine);
}

/* 영상 플레이어 테두리와 일치하는 미세 에메랄드 내부 테두리 */
.composition::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(52, 211, 153, .35);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 2px rgba(4, 18, 10, .88),
    inset 0 0 16px rgba(16, 185, 129, calc(.08 + var(--pulse) * .16));
  pointer-events: none;
  z-index: 10;
}

.art, .glow, .flare, .glint, .seal, .live-dot, .rule, .brand, .wordmark, .mark, .cta-pill, .tag, .badge {
  will-change: transform;
}

.art {
  position: absolute;
  object-fit: cover;
  filter: contrast(1.1) saturate(1.15);
}

.shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, #020805 0%, rgba(3, 16, 10, .94) 42%, rgba(3, 16, 10, .52) 72%, rgba(3, 16, 10, .2) 100%),
    radial-gradient(circle at 80% 45%, rgba(16, 185, 129, .14), transparent 60%);
}

/* 에메랄드 & 골드 오라 글로우 */
.glow {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(circle, rgba(16, 185, 129, .32) 0%, rgba(213, 177, 106, .1) 45%, transparent 70%);
  pointer-events: none;
}

.flare {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle, rgba(240, 253, 244, .48) 0%, rgba(16, 185, 129, .24) 38%, transparent 70%);
}

/* 4각 스타라이트 보석 반짝임 (.glint) */
.glint {
  position: absolute;
  z-index: 8;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transform-origin: center;
}

.glint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff 0%, #d1fae5 50%, #10b981 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, 255, 255, .95) 0%, rgba(52, 211, 153, .55) 42%, transparent 72%);
}

.glint.sm { width: 13px; height: 13px; }
.glint.lg { width: 24px; height: 24px; }

.glint.gold::before {
  background: linear-gradient(180deg, #ffffff 0%, #fef3c7 50%, #f59e0b 100%);
}
.glint.gold::after {
  background: radial-gradient(circle, #ffffff 0%, rgba(245, 158, 11, .55) 42%, transparent 72%);
}

/* 고대 룬 마법진 인장 (.seal) */
.seal {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(52, 211, 153, .45);
  border-radius: 50%;
  box-shadow: inset 0 0 16px rgba(16, 185, 129, .22);
}

.seal::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(213, 177, 106, .35);
  border-radius: 50%;
}

.seal::after {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(16, 185, 129, .25);
  transform: rotate(45deg);
}

.copy {
  position: absolute;
  z-index: 7;
}

/* 상단 아이브로우 태그 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 0;
  color: #6ee7b7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .95);
}

/* 에메랄드 다이아몬드 마커 */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #a7f3d0, #10b981);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(16, 185, 129, .85);
}

h1, p { margin: 0; }

h1 {
  letter-spacing: -.045em;
  line-height: 1.22;
  font-weight: 800;
  color: #f0fdf4;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, .95),
    0 0 calc(10px + var(--text-glow) * 14px) rgba(16, 185, 129, calc(.15 + var(--text-glow) * .35));
}

.gold {
  display: inline-block;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 45%, #d97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #f59e0b;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .85));
}

.emerald {
  display: inline-block;
  background: linear-gradient(180deg, #ecfdf5 0%, #6ee7b7 50%, #059669 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #10b981;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .85));
}

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

/* 다이아몬드 문장 장식선 (.rule) */
.rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(52, 211, 153, .95) 0%, rgba(213, 177, 106, .65) 58%, transparent 100%);
  box-shadow: 0 0 8px rgba(16, 185, 129, .45);
  transform-origin: left;
}

.rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  background: #34d399;
  transform: rotate(45deg);
  box-shadow: 0 0 8px #34d399;
}

/* 3D 메탈릭 로고 & 워드마크 */
.brand, .wordmark, .mark {
  object-fit: contain;
  filter:
    drop-shadow(0 6px 14px rgba(0, 0, 0, .92))
    drop-shadow(0 0 14px rgba(16, 185, 129, .35));
}

/* 서버 배율 명판 */
.rate-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.rate-pills b {
  position: relative;
  display: inline-block;
  padding: 3px 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #ecfdf5;
  background: linear-gradient(180deg, rgba(7, 26, 17, .92), rgba(3, 16, 10, .96));
  border: 1px solid rgba(52, 211, 153, .55);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(110, 231, 183, .18), 0 2px 8px rgba(0, 0, 0, .7);
}

.cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #03100a;
  background: linear-gradient(135deg, #a7f3d0 0%, #10b981 55%, #047857 100%);
  border: 1px solid #d1fae5;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .75), 0 0 10px rgba(16, 185, 129, .35);
}

/* =========================================================================
   1. 388x182 (EMBLEM: 시그니처 엠블럼 배너)
   테두리와 여백 24px 이상 유지하여 겹침 방지
   ========================================================================= */
.emblem .art {
  right: -5px;
  top: -5px;
  width: 280px;
  height: 192px;
  object-position: center 25%;
  opacity: .75;
}
.emblem .shade {
  background:
    linear-gradient(90deg, #020805 0%, rgba(3, 16, 10, .94) 44%, rgba(3, 16, 10, .35) 78%, rgba(3, 16, 10, .55) 100%);
}
.emblem .copy { left: 26px; top: 22px; }
.emblem h1 { font-size: 22px; margin: 4px 0 6px; }
.emblem .rule { width: 170px; margin-bottom: 6px; }
.emblem .detail { font-size: 10.5px; margin-bottom: 6px; }
.emblem .seal { width: 114px; height: 114px; top: 34px; right: 22px; }
.emblem .flare { width: 140px; height: 140px; top: 20px; right: 10px; opacity: .45; }
.emblem .mark {
  position: absolute;
  z-index: 6;
  width: 118px;
  height: 82px;
  right: 20px;
  top: 50px;
}
/* 388x182 보석 반짝임 위치 */
.emblem .g1 { right: 73px; top: 48px; }
.emblem .g2 { right: 75px; top: 78px; }
.emblem .g3 { right: 28px; top: 70px; }
.emblem .g4 { right: 122px; top: 74px; }

/* =========================================================================
   2. 500x300 (POSTER: 포스터형 배너)
   상하 32px, 좌우 34px 안전 여백 확보
   ========================================================================= */
.poster .art {
  inset: 0;
  width: 500px;
  height: 300px;
  object-position: center 28%;
  opacity: .85;
}
.poster .shade {
  background:
    linear-gradient(180deg, rgba(2, 8, 5, .65) 0%, rgba(2, 8, 5, .2) 38%, rgba(2, 8, 5, .88) 76%, #020805 100%),
    linear-gradient(90deg, rgba(2, 8, 5, .85) 0%, rgba(2, 8, 5, .2) 65%, rgba(2, 8, 5, .65) 100%);
}
.poster .flare {
  width: 220px;
  height: 130px;
  left: 20px;
  top: 10px;
  opacity: .45;
}
.poster .wordmark {
  position: absolute;
  z-index: 6;
  width: 175px;
  height: 92px;
  left: 32px;
  top: 22px;
  object-position: left center;
}
.poster .edition {
  position: absolute;
  z-index: 6;
  right: 32px;
  top: 28px;
  padding: 5px 11px;
  background: rgba(3, 16, 10, .88);
  border: 1px solid rgba(52, 211, 153, .65);
  color: #6ee7b7;
  font: 700 10px/1 'Pretendard Variable', 'Malgun Gothic', sans-serif;
  letter-spacing: .14em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .7);
}
.poster .copy { left: 34px; bottom: 30px; right: 34px; }
.poster h1 { font-size: 26px; margin: 4px 0 8px; }
.poster .rule { width: 280px; margin: 6px 0 10px; }
.poster .poster-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* 500x300 보석 반짝임 위치 */
.poster .g1 { left: 110px; top: 26px; }
.poster .g2 { left: 108px; top: 62px; }
.poster .g3 { left: 172px; top: 54px; }
.poster .g4 { left: 245px; top: 110px; }

/* =========================================================================
   3. 911x90 (STRIP: 와이드 스트립 배너)
   상하 16px, 좌우 36px 여백으로 90px 내 완벽 중앙 정렬
   ========================================================================= */
.strip { display: flex; align-items: center; }
.strip .art {
  right: 0;
  top: -15px;
  width: 480px;
  height: 120px;
  object-position: center 18%;
  opacity: .75;
}
.strip .shade {
  background:
    linear-gradient(90deg, #020805 0%, rgba(3, 16, 10, .95) 28%, rgba(3, 16, 10, .76) 62%, rgba(3, 16, 10, .42) 100%);
}
.strip .flare {
  width: 170px;
  height: 100px;
  left: 20px;
  top: -5px;
  opacity: .42;
}
.strip .brand {
  position: absolute;
  z-index: 6;
  left: 32px;
  top: 13px;
  width: 138px;
  height: 64px;
}
.strip .divider {
  position: absolute;
  z-index: 6;
  left: 186px;
  top: 20px;
  height: 50px;
  width: 1px;
  background: linear-gradient(180deg, transparent, #34d399, transparent);
}
.strip .copy { left: 204px; top: 20px; }
.strip h1 { font-size: 19px; margin-bottom: 3px; }
.strip .eyebrow { font-size: 9px; }
.strip .rates {
  position: absolute;
  left: 510px;
  top: 17px;
  display: flex;
  gap: 8px;
  z-index: 6;
}
.strip .rates > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 4px 7px;
  background: rgba(3, 16, 10, .88);
  border: 1px solid rgba(52, 211, 153, .52);
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 700;
  color: #6ee7b7;
  letter-spacing: .08em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .65);
}
.strip .rates strong {
  display: block;
  font: 800 15px/1.1 Georgia, serif;
  color: #f0fdf4;
  margin-top: 1px;
}
.strip .tag {
  position: absolute;
  z-index: 6;
  right: 36px;
  top: 24px;
  border: 1px solid #d1fae5;
  background: linear-gradient(135deg, #a7f3d0 0%, #10b981 100%);
  color: #03100a;
  font-weight: 800;
  padding: 9px 13px;
  font-size: 10.5px;
  letter-spacing: .05em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .8), 0 0 10px rgba(16, 185, 129, .35);
}
/* 911x90 보석 반짝임 위치 */
.strip .g1 { left: 95px; top: 12px; }
.strip .g2 { left: 93px; top: 40px; }
.strip .g3 { left: 148px; top: 32px; }
.strip .g4 { right: 150px; top: 20px; }

/* =========================================================================
   4. 450x120 (COMPACT: 컴팩트 배너)
   상하 16px, 좌우 28px 여백 확보
   ========================================================================= */
.compact .art {
  right: -5px;
  top: -5px;
  width: 330px;
  height: 130px;
  object-position: center 28%;
  opacity: .7;
}
.compact .shade {
  background:
    linear-gradient(90deg, #020805 0%, rgba(3, 16, 10, .94) 46%, rgba(3, 16, 10, .42) 100%);
}
.compact .badge {
  position: absolute;
  z-index: 4;
  width: 106px;
  height: 98px;
  left: 24px;
  top: 11px;
  background: linear-gradient(165deg, rgba(16, 185, 129, .32), rgba(213, 177, 106, .05));
  border-inline: 1px solid rgba(52, 211, 153, .45);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}
.compact .flare {
  width: 120px;
  height: 100px;
  left: 18px;
  top: 10px;
  opacity: .45;
}
.compact .mark {
  position: absolute;
  z-index: 6;
  width: 100px;
  height: 68px;
  left: 27px;
  top: 26px;
}
.compact .copy { left: 144px; top: 18px; }
.compact h1 { font-size: 20px; margin: 3px 0 6px; }
.compact .detail { font-size: 10.5px; }
.compact .rate-pills b { padding: 2px 6px; font-size: 9px; }
/* 450x120 보석 반짝임 위치 */
.compact .g1 { left: 70px; top: 22px; }
.compact .g2 { left: 69px; top: 48px; }
.compact .g3 { left: 110px; top: 40px; }
.compact .g4 { right: 88px; top: 24px; }

/* =========================================================================
   5. 830x360 (WIDE: 시네마틱 와이드 배너)
   상하 36px, 좌우 44px 이상 넉넉한 여백 확보
   ========================================================================= */
.wide .art {
  width: 610px;
  height: 370px;
  right: -10px;
  top: -5px;
  object-position: center 24%;
  opacity: .9;
}
.wide .shade {
  background:
    linear-gradient(90deg, #020805 0%, rgba(3, 16, 10, .95) 38%, rgba(3, 16, 10, .42) 68%, rgba(3, 16, 10, .12) 100%),
    linear-gradient(0deg, #020805 0%, transparent 32%);
}
.wide .glow { width: 380px; height: 380px; right: 30px; top: -30px; }
.wide .flare { width: 230px; height: 230px; right: 160px; top: 40px; opacity: .42; }
.wide .seal { width: 230px; height: 230px; right: 70px; top: 55px; opacity: .38; }
.wide .copy { top: 34px; left: 44px; }
.wide .brand {
  display: block;
  width: 190px;
  height: 80px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 6px;
}
.wide h1 { font-size: 32px; margin: 4px 0 8px; }
.wide .detail { font-size: 12px; margin-bottom: 6px; }
.wide .rule { width: 280px; margin: 8px 0 10px; }
.wide .wide-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wide .signature {
  position: absolute;
  right: 42px;
  bottom: 34px;
  padding: 6px 12px;
  background: rgba(3, 16, 10, .86);
  border: 1px solid rgba(52, 211, 153, .55);
  color: #a7f3d0;
  font: 700 10px/1 Georgia, serif;
  letter-spacing: .2em;
  z-index: 6;
}
/* 830x360 보석 반짝임 위치 */
.wide .g1 { left: 124px; top: 32px; }
.wide .g2 { left: 122px; top: 64px; }
.wide .g3 { right: 210px; top: 40px; }
.wide .g4 { right: 410px; top: 154px; }