/* =========================================================================
   마녀서버 (MANYUE 2.0) - 만월의 비술 시네마틱 인트로 스타일시트 (v1.0)
   1. 고대 마녀 비술 & 만월 테마 (미드나잇 옵시디언, 비전 바이올렛, 고대 아케인 골드, 에메랄드 비약)
   2. 보름달을 가르는 마녀 빗자루 비행 곡선 & 실시간 Arcane Stardust 캔버스 파티클 엔진
   3. 고대 3중 룬 마법진 쇼크웨이브 & 동심원 기하학 자전 애니메이션
   4. 고대 마법서(Grimoire) & 마녀의 비약(Emerald Elixir) 3D 부유 연출
   ========================================================================= */

@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;
}

:root {
  /* [MANYUE 2.0 비주얼 디자인 토큰] */
  --bg-midnight: #0B0813;
  --bg-deep-velvet: #130F24;
  --witch-violet: #7928CA;
  --witch-violet-glow: rgba(121, 40, 202, 0.55);
  --mystic-lilac: #C084FC;
  --arcane-gold: #F59E0B;
  --arcane-gold-bright: #FDE047;
  --arcane-gold-deep: #B45309;
  --moon-silver: #E2E8F0;
  --moon-silver-mist: #94A3B8;
  --elixir-emerald: #10B981;
  --elixir-emerald-glow: rgba(16, 185, 129, 0.45);
  --coven-crimson: #991B1B;

  --font-title: 'GmarketSansBold', 'Pretendard Variable', Pretendard, sans-serif;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* 쇼크웨이브 및 대소환 마법진 원점 중심 좌표 (로고 마크 소환 중심점과 100% 일치) */
  --shockwave-cx: 50%;
  --shockwave-cy: 43%;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 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;
}

html, body.manyue-intro-body {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background-color: var(--bg-midnight);
  color: var(--moon-silver);
  font-family: var(--font-sans);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   1. 우측 상단 미니 컨트롤 바
   ========================================================================= */
.intro-top-actions {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}

.intro-ctrl-pill,
.intro-toggle-plate,
.intro-enter-plate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--moon-silver);
  text-decoration: none;
  cursor: pointer;
  background: rgba(19, 15, 36, 0.78);
  border: 1px solid rgba(192, 132, 252, 0.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 0 10px rgba(121, 40, 202, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.intro-ctrl-pill:hover,
.intro-toggle-plate:hover,
.intro-enter-plate:hover {
  transform: translateY(-2px);
  border-color: var(--mystic-lilac);
  color: #ffffff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.8), 0 0 18px rgba(192, 132, 252, 0.45);
}

.intro-ctrl-pill.is-sound-on {
  border-color: var(--arcane-gold);
  color: var(--arcane-gold-bright);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
}

.plate-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--elixir-emerald);
  box-shadow: 0 0 10px var(--elixir-emerald);
}

.intro-toggle-plate.is-off .plate-led {
  background: var(--coven-crimson);
  box-shadow: 0 0 10px var(--coven-crimson);
}

.plate-state {
  color: var(--arcane-gold);
  font-weight: 800;
}

.intro-enter-plate {
  background: linear-gradient(135deg, rgba(121, 40, 202, 0.88) 0%, rgba(45, 14, 78, 0.95) 100%);
  border-color: rgba(245, 158, 11, 0.65);
  color: #fffdf5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(245, 158, 11, 0.35);
}

.intro-enter-plate:hover {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.95) 0%, rgba(88, 28, 135, 0.98) 100%);
  border-color: var(--arcane-gold-bright);
}

/* =========================================================================
   2. 전체화면 시네마틱 스테이지 & 만월 밤하늘 배경
   ========================================================================= */
.hf-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1200px;
}

.hf-stage.is-shaking {
  animation: hfArcaneImpactShake 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.hf-stage.is-rumbling {
  animation: hfMagicRumble 0.12s linear infinite;
}

@keyframes hfArcaneImpactShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-7px, 4px, 0) rotate(-0.25deg); }
  35% { transform: translate3d(7px, -5px, 0) rotate(0.28deg); }
  55% { transform: translate3d(-4px, -2px, 0); }
  75% { transform: translate3d(3px, 2px, 0); }
}

@keyframes hfMagicRumble {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-3px, 2px, 0); }
  50%  { transform: translate3d(3px, -2px, 0); }
  75%  { transform: translate3d(-2px, -1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* 공식 홈페이지 입장 시 부드럽게 감싸는 신비로운 바이올렛-골드 페이드아웃 오버레이 */
.hf-portal-whiteout {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(243, 232, 255, 0.95) 40%,
    rgba(192, 132, 252, 0.85) 75%,
    #0B0813 100%
  );
}

.hf-backdrop {
  position: absolute;
  inset: -4%;
  z-index: 1;
  pointer-events: none;
}

.hf-bg-photo {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(0.95) contrast(1.1) saturate(1.22);
  transform: scale(1.04);
}

/* 만월(Full Moon) 달무리 은빛 및 라일락 광채 */
.hf-moon-radiance {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.22) 0%, rgba(192, 132, 252, 0.24) 28%, rgba(121, 40, 202, 0.12) 58%, transparent 75%),
    radial-gradient(circle at 75% 25%, rgba(121, 40, 202, 0.16) 0%, transparent 65%);
  mix-blend-mode: screen;
}

/* 비전 퍼플 및 오로라 펄스 레이어 */
.hf-arcane-aurora {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(121, 40, 202, 0.2) 0%, rgba(16, 185, 129, 0.08) 50%, transparent 75%),
    radial-gradient(ellipse 55% 45% at 50% 65%, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
  mix-blend-mode: screen;
}

/* 미드나잇 옵시디언 외곽 그라데이션 */
.hf-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, transparent 52%, rgba(11, 8, 19, 0.65) 100%),
    linear-gradient(180deg, rgba(11, 8, 19, 0.45) 0%, transparent 18%, transparent 80%, rgba(11, 8, 19, 0.75) 100%);
}

.hf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hf-canvas-bg {
  z-index: 2;
}

.hf-canvas-trail {
  z-index: 18;
}

/* 마법 섬광 플래시 */
.hf-arcane-flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: radial-gradient(circle at var(--shockwave-cx, 50%) var(--shockwave-cy, 45%), rgba(255, 255, 255, 0.9) 0%, rgba(192, 132, 252, 0.5) 30%, rgba(121, 40, 202, 0.25) 55%, transparent 75%);
  opacity: 0;
  pointer-events: none;
}

/* =========================================================================
   3. 대마법 소환술식(Grand Summoning Ritual) 다층 마법진 & 쇼크웨이브
   ========================================================================= */
.hf-arcane-shockwave {
  position: absolute;
  left: var(--shockwave-cx, 50%);
  top: var(--shockwave-cy, 43%);
  width: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* 소환의 빛기둥 (소환 완성 순간 마법진 중앙에서 하늘로 솟구치는 아케인 광기둥) */
.summon-light-pillar {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 140vh;
  transform: translate(-50%, -50%) scaleX(0);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(121, 40, 202, 0.25) 18%,
    rgba(192, 132, 252, 0.75) 38%,
    rgba(254, 240, 138, 0.98) 50%,
    rgba(192, 132, 252, 0.75) 62%,
    rgba(121, 40, 202, 0.25) 82%,
    transparent 100%
  );
  filter: blur(8px) drop-shadow(0 0 45px #FDE047) drop-shadow(0 0 80px #9333EA);
  mix-blend-mode: screen;
}

/* 마법진 코어 차원문 소환 구체 */
.summon-core-portal {
  position: absolute;
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    #FFFFFF 0%,
    rgba(254, 240, 138, 0.95) 24%,
    rgba(192, 132, 252, 0.75) 52%,
    rgba(121, 40, 202, 0.2) 76%,
    transparent 100%
  );
  filter: blur(6px);
  mix-blend-mode: screen;
}

.sigil-container {
  position: absolute;
  left: 0;
  top: 0;
  width: min(760px, 86vmin);
  height: min(760px, 86vmin);
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 0;
  pointer-events: none;
}

.sigil-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 실시간 마법진 각인(Stroke-Dashoffset Self-Drawing) 공통 클래스 */
.ritual-draw-stroke {
  stroke-dasharray: 1005;
  stroke-dashoffset: 1005;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ritual-draw-beam {
  stroke-dasharray: 1005;
  stroke-dashoffset: 1005;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px #FDE047) drop-shadow(0 0 18px #C084FC);
}

.ritual-rune-text {
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(254, 240, 138, 0.85)) drop-shadow(0 0 14px rgba(147, 51, 234, 0.9));
}

.satellite-seal-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.9)) drop-shadow(0 0 22px rgba(121, 40, 202, 0.95));
}

.sigil-outer-ring {
  animation: rotateSigilCw 44s linear infinite;
  filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.85)) drop-shadow(0 0 28px rgba(121, 40, 202, 0.65));
}

.sigil-mid-star {
  animation: rotateSigilCcw 28s linear infinite;
  filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.85)) drop-shadow(0 0 26px rgba(121, 40, 202, 0.6));
}

.sigil-satellite-ring {
  animation: rotateSigilCw 36s linear infinite;
}

.sigil-core-ring {
  animation: rotateSigilCcw 18s linear infinite;
  filter: drop-shadow(0 0 22px rgba(254, 240, 138, 0.9)) drop-shadow(0 0 32px rgba(192, 132, 252, 0.95));
}

/* 소환 마력 폭주 시 마법진 고속 회전 가속 상태 */
.sigil-container.is-overdriving .sigil-outer-ring {
  animation-duration: 7s;
}
.sigil-container.is-overdriving .sigil-mid-star {
  animation-duration: 5s;
}
.sigil-container.is-overdriving .sigil-satellite-ring {
  animation-duration: 6s;
}
.sigil-container.is-overdriving .sigil-core-ring {
  animation-duration: 3.5s;
}

@keyframes rotateSigilCw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateSigilCcw {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* 허공에 각인되는 4방위 홀로그램 소환술식(Radial Summoning Formulas) */
.summon-radial-formulas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.radial-formula {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px;
  background: linear-gradient(90deg, rgba(19, 11, 38, 0.82) 0%, rgba(46, 16, 101, 0.45) 100%);
  border-left: 2.5px solid var(--arcane-gold-bright);
  border-top: 1px solid rgba(192, 132, 252, 0.45);
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 3px;
  box-shadow: 0 0 22px rgba(121, 40, 202, 0.55), inset 0 0 12px rgba(245, 158, 11, 0.15);
  opacity: 0;
  white-space: nowrap;
}

.radial-formula .rf-code {
  font-family: 'Georgia', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mystic-lilac);
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.8);
}

.radial-formula .rf-title {
  font-family: 'Georgia', serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--arcane-gold-bright);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.9);
}

.rf-top-left {
  top: 7%;
  left: -10%;
}

.rf-top-right {
  top: 7%;
  right: -10%;
  text-align: right;
  border-left: none;
  border-right: 2.5px solid var(--arcane-gold-bright);
}

.rf-bottom-left {
  bottom: 9%;
  left: -10%;
}

.rf-bottom-right {
  bottom: 9%;
  right: -10%;
  text-align: right;
  border-left: none;
  border-right: 2.5px solid var(--arcane-gold-bright);
}

/* 소환술식 영창 상태 표시 배너 (Summoning Incantation HUD) */
.summon-incantation-hud {
  position: absolute;
  left: 0;
  top: min(315px, 37vmin);
  transform: translate(-50%, 0);
  width: min(460px, 86vw);
  padding: 10px 22px 12px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(19, 11, 38, 0.88) 0%, rgba(11, 8, 19, 0.65) 75%, transparent 100%);
  border-top: 1px solid rgba(254, 240, 138, 0.55);
  border-bottom: 1px solid rgba(192, 132, 252, 0.55);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 25px rgba(121, 40, 202, 0.45);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
}

.incantation-rune-line {
  font-family: 'Georgia', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--mystic-lilac);
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.9);
  margin-bottom: 4px;
}

.incantation-step-text {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--arcane-gold-bright);
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.95), 0 2px 6px rgba(0, 0, 0, 0.95);
  margin-bottom: 7px;
}

.incantation-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.incantation-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #7928CA 0%, #C084FC 45%, #FDE047 85%, #FFFFFF 100%);
  box-shadow: 0 0 12px #FDE047;
}

/* 충격파 팽창 링 */
.shockwave-blast-outer,
.shockwave-ring-core,
.shockwave-spark-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.01);
  opacity: 0;
  pointer-events: none;
}

.shockwave-blast-outer {
  width: 780px;
  height: 780px;
  border: 4px solid var(--mystic-lilac);
  background: radial-gradient(circle, rgba(121, 40, 202, 0.34) 0%, rgba(192, 132, 252, 0.15) 65%, transparent 100%);
  box-shadow: 0 0 65px rgba(121, 40, 202, 0.95), inset 0 0 45px rgba(192, 132, 252, 0.7);
}

.shockwave-ring-core {
  width: 560px;
  height: 560px;
  border: 3.5px solid var(--arcane-gold-bright);
  box-shadow: 0 0 45px var(--arcane-gold), inset 0 0 30px var(--arcane-gold);
}

.shockwave-spark-ring {
  width: 400px;
  height: 400px;
  border: 2.5px dashed var(--elixir-emerald);
  box-shadow: 0 0 30px var(--elixir-emerald);
}

/* =========================================================================
   4. 메인 히어로 컴포지션 무대 (Hero Composition)
   ========================================================================= */
.hero-composition {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 원경 대기 광선 & 밤안개 구름 조각 */
.cloud-layer-far {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.diagonal-godrays {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -35deg,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 30px,
    transparent 30px,
    transparent 90px
  );
  mix-blend-mode: screen;
  opacity: 0.6;
}

.cloud-sprite {
  position: absolute;
  opacity: 0.38;
  filter: blur(14px) brightness(0.65) hue-rotate(240deg);
  pointer-events: none;
}

.far-cloud-top-left {
  top: -8%;
  left: -10%;
  width: 720px;
}

.far-cloud-top-right {
  top: 2%;
  right: -12%;
  width: 780px;
}

/* 중경 구름층 */
.cloud-layer-mid {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.cloud-patch {
  position: absolute;
  pointer-events: none;
}

.cloud-patch-img {
  width: 100%;
  height: auto;
  display: block;
  filter: blur(8px) brightness(0.5) hue-rotate(230deg);
  opacity: 0.45;
}

.mid-patch-behind-kor-left {
  left: 6%;
  top: 26%;
  width: 580px;
}

.mid-patch-behind-kor-right {
  right: 8%;
  top: 32%;
  width: 620px;
}

.mid-patch-behind-rocket {
  right: 18%;
  top: 12%;
  width: 500px;
}

/* 마법 빗자루 궤적 & 화면 가운데 아케인 연결선 SVG */
.golden-trail-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  filter: drop-shadow(0 0 25px rgba(121, 40, 202, 0.45));
}

.golden-trail-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trail-strand {
  transition: opacity 0.5s ease;
  vector-effect: non-scaling-stroke;
}

.trail-strand.s1 {
  mix-blend-mode: screen;
}

.trail-strand.s2 {
  mix-blend-mode: screen;
}

.trail-strand.s3 {
  mix-blend-mode: screen;
}

.trail-strand.s4 {
  animation: runePulse 2.4s linear infinite;
}

@keyframes runePulse {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -64; }
}

/* =========================================================================
   5. 마법진에서 실체화 소환되는 마녀 로고 마크 리그 (Summoned Witch Logo Mark Rig)
   ========================================================================= */

/* 메인 3D 골드/바이올렛 마녀 로고 마크 엠블럼 [마녀 WITCH SERVER] (초기 완전 숨김 -> 소환 완성 시 마법진 정면 앞으로 강림) */
.wordmark-kor-rig {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 35;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.wordmark-3d-wrap {
  position: relative;
  display: inline-block;
}

/* 소환된 마녀 로고 마크 뒤편에서 맥동하는 아케인 코어 후광 */
.logo-summon-backglow {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(254, 240, 138, 0.5) 0%,
    rgba(192, 132, 252, 0.45) 36%,
    rgba(121, 40, 202, 0.22) 64%,
    transparent 82%
  );
  filter: blur(26px);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

/* 소환 완료 순간 로고 마크 전면을 휩쓸며 퍼져나가는 황금-바이올렛 소환 인장 파동 */
.logo-summon-seal-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  border: 3px solid var(--arcane-gold-bright);
  box-shadow: 0 0 38px var(--arcane-gold), inset 0 0 28px var(--mystic-lilac);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

/* 다중 오브젝트 분리 소환 레이어 (뒤에 보름달 / 금속 초승달 / 날개 / 왕관 프레임 / 방패 / 메인 타이틀) */
.logo-parts-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 38px rgba(121, 40, 202, 0.78));
}

.logo-part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* 각 오브젝트 파츠별 z-index 및 고유 피벗 원점(transform-origin) */
.part-fullmoon {
  z-index: 1;
  transform-origin: 52.8% 38.5%;
  filter: drop-shadow(0 0 32px rgba(233, 213, 255, 0.92)) drop-shadow(0 0 55px rgba(192, 132, 252, 0.75));
}

.part-crescent {
  z-index: 2;
  transform-origin: 48% 35%;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(253, 224, 71, 0.7));
}

.part-wing-left {
  z-index: 3;
  transform-origin: 36% 48%;
  filter: drop-shadow(-8px 12px 22px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 20px rgba(245, 158, 11, 0.55));
}

.part-wing-right {
  z-index: 3;
  transform-origin: 64% 48%;
  filter: drop-shadow(8px 12px 22px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 20px rgba(245, 158, 11, 0.55));
}

.part-center-crest {
  z-index: 4;
  transform-origin: 50% 54%;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 24px rgba(147, 51, 234, 0.75));
}

.part-shield-left {
  z-index: 5;
  transform-origin: 25.5% 53.5%;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(253, 224, 71, 0.68));
}

.part-shield-right {
  z-index: 5;
  transform-origin: 74.5% 53.5%;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(253, 224, 71, 0.68));
}

.part-title-mark {
  z-index: 6;
  transform-origin: 50% 52%;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.98)) drop-shadow(0 0 28px rgba(253, 224, 71, 0.85));
}

.server-logo-kor-img {
  max-width: 510px;
  width: 82vw;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  opacity: 0;
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.98))
          drop-shadow(0 0 48px rgba(121, 40, 202, 0.85))
          drop-shadow(0 0 26px rgba(245, 158, 11, 0.72));
}

/* 십자 스타버스트 플레어 (소환된 마녀 로고 마크의 날개·왕관·방패 크리스털에서 빛나는 섬광) */
.star-flare {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #ffffff;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 0 18px #ffffff, 0 0 34px var(--arcane-gold-bright), 0 0 48px var(--witch-violet);
  opacity: 0;
  transform: scale(0);
}

.star-flare::before,
.star-flare::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  transform: translate(-50%, -50%);
}

.star-flare::before {
  width: 68px;
  height: 2.2px;
}

.star-flare::after {
  width: 2.2px;
  height: 68px;
}

.flare-1 { top: 20%; left: 15%; }
.flare-2 { top: 18%; right: 17%; }
.flare-3 { top: 30%; left: 49%; }
.flare-4 { bottom: 34%; left: 24%; }
.flare-5 { bottom: 34%; right: 24%; }
.flare-6 { bottom: 14%; left: 49%; }

/* 3D 영문 서브 로고 이미지 [MANYUE 2.0] - 메인 엠블럼 내 타이포 통합으로 숨김 처리 */
.wordmark-eng-rig {
  display: none !important;
}

.server-logo-eng-img {
  max-width: 480px;
  width: 72vw;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.9))
          drop-shadow(0 0 25px rgba(192, 132, 252, 0.5));
}

/* =========================================================================
   6. 마법 오브젝트: 고대 마법서(Grimoire) & 비약(Potion) 리그
   ========================================================================= */

/* 공통 마법 오라 글로우 */
.arcane-aura-glow {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
  z-index: -1;
  animation: auraPulse 3.5s ease-in-out infinite alternate;
}

.violet-aura {
  background: radial-gradient(circle, rgba(121, 40, 202, 0.55) 0%, rgba(192, 132, 252, 0.25) 50%, transparent 75%);
}

.emerald-aura {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.55) 0%, rgba(52, 211, 153, 0.25) 50%, transparent 75%);
}

@keyframes auraPulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

/* 고대 마법서 그리모어 리그 (양측 핵심 컨텐츠 윙 배치 시 상단 서브 오브젝트로 이동) */
.grimoire-rig {
  position: absolute;
  left: 9%;
  top: 19%;
  transform: translate(-50%, -50%);
  z-index: 13;
  width: 145px;
  height: 145px;
  pointer-events: none;
}

.grimoire-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.85))
          drop-shadow(0 0 28px rgba(121, 40, 202, 0.6));
  animation: floatingGrimoire 4.2s ease-in-out infinite alternate;
}

@keyframes floatingGrimoire {
  0% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(-4deg); }
}

/* 마녀의 비약 플라스크 리그 */
.potion-rig {
  position: absolute;
  right: 9%;
  top: 19%;
  transform: translate(50%, -50%);
  z-index: 15;
  width: 135px;
  height: 135px;
  pointer-events: none;
}

.potion-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.85))
          drop-shadow(0 0 28px rgba(16, 185, 129, 0.55));
  animation: floatingGrimoire 3.8s ease-in-out infinite alternate-reverse;
}

/* =========================================================================
   7. 양대 핵심 컨텐츠 홀로그램 쇼케이스 윙 (다크엘프 완벽구현 & 슬롯 머신 · 코인 구현)
   ========================================================================= */
.intro-feature-wings {
  position: absolute;
  inset: 0;
  z-index: 36;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(2.2vw, 24px);
}

.intro-feature-card {
  position: relative;
  width: min(390px, 27.5vw);
  min-width: 310px;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(20, 13, 38, 0.88) 0%, rgba(10, 7, 20, 0.94) 100%);
  border: 1.5px solid rgba(192, 132, 252, 0.42);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.88),
              0 0 32px rgba(121, 40, 202, 0.35),
              inset 0 1px 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 18px 18px 16px;
  pointer-events: auto;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}

.intro-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(253, 224, 71, 0.16) 50%,
    rgba(192, 132, 252, 0.08) 60%,
    transparent 100%
  );
  transform: skewX(-22deg);
  animation: cardHoloSheen 6.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cardHoloSheen {
  0%, 62% { left: -120%; }
  100% { left: 160%; }
}

.intro-feature-card.card-darkelf {
  border-color: rgba(192, 132, 252, 0.55);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.9),
              0 0 36px rgba(147, 51, 234, 0.42),
              inset 0 0 22px rgba(121, 40, 202, 0.22);
}

.intro-feature-card.card-darkelf:hover {
  border-color: #e9d5ff;
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.95),
              0 0 46px rgba(192, 132, 252, 0.72),
              0 0 18px rgba(239, 68, 68, 0.45);
}

.intro-feature-card.card-slotmachine {
  border-color: rgba(245, 158, 11, 0.62);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.9),
              0 0 36px rgba(245, 158, 11, 0.36),
              inset 0 0 22px rgba(245, 158, 11, 0.16);
}

.intro-feature-card.card-slotmachine:hover {
  border-color: var(--arcane-gold-bright);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.95),
              0 0 48px rgba(253, 224, 71, 0.68),
              0 0 20px rgba(16, 185, 129, 0.45);
}

.ifc-ambient-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}

.violet-crimson-glow {
  background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.55) 0%, rgba(220, 38, 38, 0.32) 52%, transparent 75%);
}

.gold-emerald-glow {
  background: radial-gradient(circle at 70% 30%, rgba(245, 158, 11, 0.55) 0%, rgba(16, 185, 129, 0.28) 52%, transparent 75%);
}

.ifc-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 카드 상단 배지 바 */
.ifc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ifc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.badge-violet {
  background: rgba(121, 40, 202, 0.35);
  border: 1px solid rgba(192, 132, 252, 0.65);
  color: #f3e8ff;
}

.badge-gold {
  background: rgba(180, 83, 9, 0.38);
  border: 1px solid rgba(253, 224, 71, 0.72);
  color: #fef08a;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: dotBlink 1.4s ease-in-out infinite alternate;
}

@keyframes dotBlink {
  0% { opacity: 0.45; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.2); }
}

.ifc-code {
  font-family: 'Georgia', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(226, 232, 240, 0.65);
}

/* 카드 히어로 썸네일 & 메인 타이틀 */
.ifc-hero-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.ifc-art-thumb {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  flex-shrink: 0;
  background: #0d0818;
  border: 1.5px solid rgba(253, 224, 71, 0.65);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8), 0 0 16px rgba(192, 132, 252, 0.4);
  overflow: visible;
}

.ifc-art-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10.5px;
  display: block;
}

.slot-art-thumb img {
  object-fit: contain;
  padding: 4px;
}

.de-double-break-tag,
.slot-jackpot-tag {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.85);
}

.de-double-break-tag {
  background: linear-gradient(90deg, #dc2626 0%, #9333ea 100%);
  border: 1px solid #fef08a;
  color: #ffffff;
  animation: doubleBreakPulse 1.8s ease-in-out infinite alternate;
}

.slot-jackpot-tag {
  background: linear-gradient(90deg, #f59e0b 0%, #eab308 50%, #d97706 100%);
  border: 1px solid #ffffff;
  color: #1c0f03;
  animation: doubleBreakPulse 1.5s ease-in-out infinite alternate;
}

@keyframes doubleBreakPulse {
  0% { transform: translateX(-50%) scale(0.95); filter: brightness(0.95); }
  100% { transform: translateX(-50%) scale(1.06); filter: brightness(1.22); }
}

.ifc-title-block {
  flex: 1;
  min-width: 0;
}

.ifc-main-title {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEF08A 55%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9));
  margin-bottom: 4px;
}

.card-darkelf .ifc-main-title {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3E8FF 50%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ifc-sub-desc {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* [LEFT CARD 전용] 교차 이도류 X-슬래시 검기 SVG 애니메이션 */
.ifc-slash-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.78;
}

.slash-beam {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  filter: drop-shadow(0 0 10px #c084fc) drop-shadow(0 0 18px #ef4444);
  animation: xSlashStrike 3.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.slash-beam.slash-right {
  animation-delay: 0.16s;
}

@keyframes xSlashStrike {
  0%, 15% { stroke-dashoffset: 420; opacity: 0; }
  25% { stroke-dashoffset: 0; opacity: 1; }
  45% { stroke-dashoffset: -420; opacity: 0.85; }
  55%, 100% { stroke-dashoffset: -420; opacity: 0; }
}

/* 다크엘프 3단 무기 진화 파이프라인 */
.de-evo-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 10px;
  border-radius: 11px;
  background: rgba(9, 6, 18, 0.82);
  border: 1px solid rgba(192, 132, 252, 0.28);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.75);
}

.evo-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  padding: 5px 4px;
  border-radius: 8px;
  transition: transform 0.25s ease, background 0.25s ease;
}

.evo-node.is-final {
  background: linear-gradient(180deg, rgba(121, 40, 202, 0.26) 0%, rgba(220, 38, 38, 0.2) 100%);
  border: 1px solid rgba(253, 224, 71, 0.48);
  box-shadow: 0 0 15px rgba(192, 132, 252, 0.3);
}

.evo-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #140d26;
  border: 1px solid rgba(148, 163, 184, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
}

.evo-icon-box.is-tier1 {
  border-color: #c084fc;
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.45);
}

.evo-icon-box.is-tier2 {
  border-color: var(--arcane-gold-bright);
  box-shadow: 0 0 14px rgba(253, 224, 71, 0.65), 0 0 22px rgba(220, 38, 38, 0.45);
  animation: tier2WeaponGlow 2s ease-in-out infinite alternate;
}

@keyframes tier2WeaponGlow {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-2px) scale(1.06); }
}

.evo-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.evo-step-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #a78bfa;
}

.evo-node.is-final .evo-step-label {
  color: var(--arcane-gold-bright);
}

.evo-item-name {
  font-size: 11px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  letter-spacing: -0.03em;
}

.evo-arrow {
  color: var(--arcane-gold-bright);
  opacity: 0.85;
  flex-shrink: 0;
  animation: evoArrowFlow 1.4s ease-in-out infinite;
}

@keyframes evoArrowFlow {
  0%, 100% { transform: translateX(-2px); opacity: 0.5; }
  50% { transform: translateX(2px); opacity: 1; }
}

/* [RIGHT CARD 전용] 실시간 3릴 슬롯머신 위젯 & 코인 부유 애니메이션 */
.floating-coins-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.float-coin {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 75%, #92400e 100%);
  border: 1.5px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 158, 11, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial Black', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #451a03;
  opacity: 0.78;
}

.float-coin.coin-1 {
  top: 12px;
  right: 78px;
  animation: coinFloatSpin 3.4s ease-in-out infinite;
}

.float-coin.coin-2 {
  bottom: 48px;
  right: 12px;
  width: 20px;
  height: 20px;
  font-size: 9.5px;
  animation: coinFloatSpin 4.1s ease-in-out infinite 0.7s;
}

.float-coin.coin-3 {
  top: 52px;
  right: 14px;
  width: 22px;
  height: 22px;
  font-size: 10px;
  animation: coinFloatSpin 3.7s ease-in-out infinite 1.3s;
}

@keyframes coinFloatSpin {
  0%, 100% { transform: translateY(0) rotateY(0deg) scale(1); }
  50% { transform: translateY(-9px) rotateY(180deg) scale(1.08); }
}

.slot-machine-stage {
  cursor: pointer;
  user-select: none;
}

.slot-frame-bezel {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1d1308 0%, #0d0804 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.68);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 18px rgba(245, 158, 11, 0.25);
}

.slot-reel-window {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  height: 58px;
  padding: 5px;
  border-radius: 8px;
  background: #060409;
  border: 1px solid rgba(253, 224, 71, 0.45);
  overflow: hidden;
}

.slot-reel-col {
  position: relative;
  height: 46px;
  border-radius: 6px;
  background: linear-gradient(180deg, #09060e 0%, #19102c 50%, #09060e 100%);
  border: 1px solid rgba(192, 132, 252, 0.32);
  overflow: hidden;
}

.slot-reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.reel-sym {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.reel-sym.sym-seven {
  font-size: 23px;
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 0 10px #f59e0b, 0 0 18px #ef4444;
}

.reel-sym.sym-coin {
  color: #34d399;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}

.reel-sym.sym-sword {
  color: #e9d5ff;
  font-size: 11.5px;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.8);
}

.reel-sym.sym-scroll {
  color: #93c5fd;
  font-size: 11.5px;
}

.slot-payline-laser {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, #ef4444 15%, #fde047 50%, #ef4444 85%, transparent 100%);
  box-shadow: 0 0 10px #fde047, 0 0 18px #ef4444;
  opacity: 0.85;
  pointer-events: none;
}

.slot-machine-stage.is-jackpot-win .slot-frame-bezel {
  border-color: #ffffff;
  box-shadow: 0 0 28px rgba(253, 224, 71, 0.9), inset 0 0 18px rgba(245, 158, 11, 0.5);
}

.slot-side-hud {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 86px;
  flex-shrink: 0;
  gap: 5px;
}

.slot-coin-counter {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: 6px;
  padding: 3px 6px;
  text-align: center;
}

.scc-label {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  color: #6ee7b7;
  letter-spacing: 0.05em;
}

.scc-val {
  display: block;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 800;
  color: #fde047;
}

.slot-spin-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #fef08a;
  background: linear-gradient(135deg, #ef4444 0%, #b45309 100%);
  color: #ffffff;
  font-family: var(--font-title);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.45);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.slot-spin-trigger:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.slot-spin-trigger:active {
  transform: translateY(1px);
}

.lever-knob {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fde047;
  box-shadow: 0 0 6px #ffffff;
}

/* 카드 하단 스펙/스킬 칩 */
.ifc-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ifc-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(30, 22, 54, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #e2e8f0;
}

.ifc-chip.is-hot {
  background: rgba(147, 51, 234, 0.28);
  border-color: rgba(192, 132, 252, 0.68);
  color: #f3e8ff;
}

.ifc-chip.is-gold-hot {
  background: rgba(217, 119, 6, 0.28);
  border-color: rgba(253, 224, 71, 0.68);
  color: #fef08a;
}

/* =========================================================================
   8. 하단 공식 포털 입장 CTA (Launcher Dock - 마녀 가마솥 비약 헤더 일체형 아트 버튼)
   ========================================================================= */
.intro-bottom-cta {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.btn-enter-portal.btn-cauldron-portal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(460px, 90vw);
  height: auto;
  aspect-ratio: 760 / 366;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
  cursor: pointer;
  overflow: visible;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.92))
          drop-shadow(0 0 22px rgba(147, 51, 234, 0.55));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.25s ease;
}

.btn-enter-portal.btn-cauldron-portal .cauldron-btn-bg-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* 가마솥 내부에서 보글보글 올라오는 마법 기포 애니메이션 */
.cauldron-bubbles-fx {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 84px;
  height: 64px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.cb-bubble {
  position: absolute;
  bottom: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: cauldronBubbleRise 2.6s ease-in infinite;
}

.cb-bubble.b1 {
  left: 22%;
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #ffffff 0%, #c084fc 65%, transparent 100%);
  box-shadow: 0 0 8px #c084fc;
  animation-delay: 0s;
}

.cb-bubble.b2 {
  left: 48%;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #ffffff 0%, #34d399 65%, transparent 100%);
  box-shadow: 0 0 10px #10b981;
  animation-delay: 0.7s;
}

.cb-bubble.b3 {
  left: 66%;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #fef08a 0%, #a855f7 70%, transparent 100%);
  box-shadow: 0 0 8px #a855f7;
  animation-delay: 1.3s;
}

.cb-bubble.b4 {
  left: 36%;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #ffffff 0%, #6ee7b7 70%, transparent 100%);
  box-shadow: 0 0 6px #34d399;
  animation-delay: 1.9s;
}

@keyframes cauldronBubbleRise {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  30% {
    opacity: 0.95;
  }
  80% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(-42px) translateX(4px) scale(1.25);
    opacity: 0;
  }
}

/* 하단 명패(Plaque) 중앙에 정확히 정렬되는 텍스트 레이어 */
.cauldron-plaque-content {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 66.5%;
  height: 21%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 3;
  color: #fffdf5;
  font-family: var(--font-title);
  font-size: clamp(14px, 1.55vw, 18.5px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.98),
               0 0 14px rgba(192, 132, 252, 0.85),
               0 0 24px rgba(245, 158, 11, 0.55);
  white-space: nowrap;
  pointer-events: none;
}

.cauldron-plaque-content .enter-main-txt {
  background: linear-gradient(180deg, #FFFFFF 0%, #FEF08A 55%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95));
}

.cauldron-plaque-content svg {
  color: #FEF08A;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.85));
  transition: transform 0.22s ease;
}

.btn-enter-portal.btn-cauldron-portal:hover {
  transform: translateY(-4px) scale(1.03);
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.96))
          drop-shadow(0 0 30px rgba(192, 132, 252, 0.88))
          drop-shadow(0 0 18px rgba(16, 185, 129, 0.55))
          brightness(1.08);
}

.btn-enter-portal.btn-cauldron-portal:hover .cauldron-plaque-content svg {
  transform: translateX(4px);
}

.btn-enter-portal.btn-cauldron-portal:active {
  transform: translateY(-1px) scale(0.99);
}

.btn-sigil-icon {
  color: var(--arcane-gold-bright);
  font-size: 18px;
  filter: drop-shadow(0 0 6px var(--arcane-gold));
  animation: sigilSpin 6s linear infinite;
}

@keyframes sigilSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn-replay-minimal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--moon-silver-mist);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.btn-replay-minimal:hover {
  color: var(--moon-silver);
  transform: translateY(-1px);
}

.btn-replay-minimal:hover svg {
  transform: rotate(-35deg);
  transition: transform 0.25s ease;
}

/* =========================================================================
   9. 반응형 미디어 쿼리 (Responsive Adaptations)
   ========================================================================= */
@media (max-width: 1360px) {
  .intro-feature-card {
    width: min(350px, 29vw);
    min-width: 280px;
    padding: 15px 15px 13px;
  }
  .ifc-main-title {
    font-size: 18px;
  }
  .server-logo-kor-img {
    max-width: 440px;
  }
  .grimoire-rig {
    width: 120px;
    height: 120px;
    left: 6%;
  }
  .potion-rig {
    width: 115px;
    height: 115px;
    right: 6%;
  }
}

@media (max-width: 1080px) {
  :root {
    --shockwave-cy: 29%;
  }
  .wordmark-kor-rig {
    top: 29%;
  }
  .server-logo-kor-img {
    max-width: 360px;
  }
  .sigil-container {
    width: min(520px, 76vmin);
    height: min(520px, 76vmin);
  }
  .intro-feature-wings {
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    padding: 0 16px 118px;
  }
  .intro-feature-card {
    width: min(370px, 46vw);
    min-width: 260px;
  }
  .grimoire-rig,
  .potion-rig {
    display: none !important;
  }
}

@media (max-width: 768px) {
  :root {
    --shockwave-cy: 24%;
  }
  .wordmark-kor-rig {
    top: 24%;
  }
  .server-logo-kor-img {
    max-width: 260px;
  }
  .sigil-container {
    width: min(360px, 74vmin);
    height: min(360px, 74vmin);
  }

  .intro-top-actions {
    top: max(12px, env(safe-area-inset-top, 12px));
    right: 12px;
    left: 12px;
    justify-content: flex-end;
    gap: 5px;
  }

  .intro-ctrl-pill,
  .intro-toggle-plate,
  .intro-enter-plate {
    height: 31px;
    padding: 0 10px;
    font-size: 11px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 11, 32, 0.9);
  }

  .plate-label {
    display: none;
  }

  .intro-feature-wings {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 12px 98px;
  }

  .intro-feature-card {
    width: min(440px, 94vw);
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ifc-card-inner {
    gap: 7px;
  }

  .ifc-art-thumb {
    width: 48px;
    height: 48px;
  }

  .ifc-main-title {
    font-size: 15.5px;
    margin-bottom: 2px;
  }

  .ifc-sub-desc {
    font-size: 11px;
  }

  .de-evo-pipeline {
    padding: 6px 8px;
  }

  .evo-icon-box {
    width: 28px;
    height: 28px;
  }

  .evo-item-name {
    font-size: 10px;
  }

  .slot-frame-bezel {
    padding: 6px 8px;
  }

  .slot-reel-window {
    height: 44px;
    padding: 3px;
  }

  .slot-reel-col,
  .reel-sym {
    height: 36px;
  }

  .reel-sym.sym-seven {
    font-size: 18px;
  }

  .ifc-skill-chips {
    display: none;
  }

  /* 모바일 GPU 부하가 큰 배경 사진 filter 및 다중 drop-shadow 경량화 */
  .hf-bg-photo {
    filter: none;
    transform: translateZ(0) scale(1.03);
  }

  .diagonal-godrays {
    animation: none;
    opacity: 0.72;
  }

  .golden-trail-layer {
    filter: none;
  }

  .golden-trail-svg g[filter],
  .golden-trail-svg ellipse[filter] {
    filter: none !important;
  }

  .cloud-sprite,
  .cloud-patch-img {
    filter: none !important;
  }

  .far-cloud-top-left,
  .mid-patch-behind-kor-right {
    display: none;
  }

  .arcane-aura-glow,
  .logo-summon-backglow {
    filter: blur(12px);
    animation: none;
  }

  .summon-incantation-hud {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .logo-parts-stage {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.85));
  }

  .part-fullmoon,
  .part-crescent,
  .part-wing-left,
  .part-wing-right,
  .part-center-crest,
  .part-shield-left,
  .part-shield-right,
  .part-title-mark {
    filter: none;
  }

  .server-logo-kor-img {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.85));
  }

  .intro-bottom-cta {
    bottom: 8px;
    gap: 2px;
  }

  .btn-enter-portal.btn-cauldron-portal {
    width: min(330px, 88vw);
    height: auto;
    padding: 0;
  }

  .cauldron-plaque-content {
    font-size: 13px;
    gap: 6px;
  }
}