/* ============================================================
   webbackground-growth-3d — 스타일
   배경용: 전체 밝기 낮춤 + 전면 콘텐츠 가독성 확보
   ============================================================ */
#growth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;              /* 전면 콘텐츠는 z-index: 1 이상으로 */
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 62% at 48% 54%, rgba(35,72,135,.62) 0%, rgba(9,20,46,0) 62%),
    linear-gradient(180deg, #071126 0%, #0c1734 46%, #050b1b 100%);
  overflow: hidden;
  font-family: var(--globos-font-body, "Source Han Serif K", -apple-system, "Segoe UI", serif);
}
#growth-bg::before,
#growth-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#growth-bg::before {
  z-index: 0;
  background:
    linear-gradient(115deg, rgba(125,177,255,.12), transparent 34%),
    radial-gradient(ellipse 55% 22% at 50% 74%, rgba(255,193,112,.11), transparent 70%);
  mix-blend-mode: screen;
}
#growth-bg::after {
  z-index: 3;
  opacity: .1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 48%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 48%, black 0%, transparent 78%);
}
#growth-bg canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: saturate(1.14) contrast(1.05) brightness(1.30);
}

#growth-bg .growth-map-photo {
  position: absolute;
  inset: -1.5%;
  z-index: 1;
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .96;
  filter: saturate(1.08) contrast(1.05) brightness(.88);
  transform-origin: 56% 58%;
  animation: economicPhotoDrift 18s ease-in-out infinite;
}

#growth-bg.growth-webgl-ready .growth-map-photo {
  display: none;
}

#growth-bg .growth-map-photo::before,
#growth-bg .growth-map-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#growth-bg .growth-map-photo::before {
  background:
    linear-gradient(90deg, rgba(3, 9, 25, .84) 0%, rgba(3, 9, 25, .38) 34%, rgba(3, 9, 25, .05) 62%),
    radial-gradient(ellipse 82% 70% at 67% 56%, transparent 0%, rgba(3, 8, 20, .18) 78%, rgba(3, 8, 20, .62) 100%);
}

#growth-bg .growth-map-photo::after {
  opacity: .52;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 54% 48%, rgba(88, 164, 255, .20), transparent 18%),
    radial-gradient(circle at 63% 76%, rgba(255, 189, 83, .20), transparent 15%),
    linear-gradient(115deg, rgba(94, 167, 255, .14), transparent 36%);
}

#growth-bg.growth-photo-underlay.growth-webgl-fallback canvas,
#growth-bg.growth-photo-underlay.growth-webgl-fallback .static-vietnam-map {
  display: none !important;
}

#growth-bg.growth-photo-underlay::before {
  z-index: 2;
  background:
    radial-gradient(ellipse 52% 42% at 64% 54%, rgba(62, 142, 236, .08), transparent 66%),
    linear-gradient(180deg, rgba(7, 17, 38, .08), rgba(5, 11, 27, .22));
}

#growth-bg.growth-photo-underlay::after {
  z-index: 3;
  opacity: .035;
}

@keyframes economicPhotoDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.015); }
  58% { transform: translate3d(-1.2%, .8%, 0) scale(1.07); }
}

#growth-bg .static-vietnam-map {
  position: absolute;
  top: 11%;
  right: 14%;
  z-index: 1;
  width: auto;
  height: 78%;
  opacity: .88;
  pointer-events: none;
  overflow: visible;
  filter:
    drop-shadow(0 0 10px rgba(190, 224, 255, .30))
    drop-shadow(0 0 34px rgba(58, 132, 238, .30));
  transform-origin: 50% 54%;
  animation: fallbackMapDrift 14.4s ease-in-out infinite;
  shape-rendering: geometricPrecision;
}

#growth-bg.growth-webgl-ready .static-vietnam-map {
  display: none;
}

#growth-bg .static-vietnam-map .land {
  fill: rgba(50, 112, 205, .82);
  stroke: rgba(214, 236, 255, .92);
  stroke-width: 1.45;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
  animation: fallbackLandBreath 5.8s ease-in-out infinite;
}

#growth-bg .static-vietnam-map .network {
  fill: none;
  stroke: rgba(226, 187, 98, .42);
  stroke-width: 1;
  stroke-dasharray: 5 8;
  stroke-dashoffset: 40;
  animation: fallbackNetworkFlow 4.8s linear infinite;
  animation-delay: var(--network-delay, 0s);
}

#growth-bg .static-vietnam-map .node {
  fill: rgba(232, 192, 103, .96);
  filter: drop-shadow(0 0 10px rgba(232, 192, 103, .72));
  animation: fallbackNodePulse 4.8s ease-in-out infinite;
  animation-delay: var(--node-delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes fallbackMapDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
  82% { transform: translate3d(-4.2%, 2.2%, 0) scale(1.29); opacity: .95; }
  100% { transform: translate3d(-4.2%, 2.2%, 0) scale(1.29); opacity: .95; }
}

@keyframes fallbackLandBreath {
  0%, 100% { fill-opacity: .72; stroke-opacity: .58; }
  50% { fill-opacity: .92; stroke-opacity: .86; }
}

@keyframes fallbackNetworkFlow {
  0% { stroke-dashoffset: 48; opacity: .22; }
  28% { opacity: .58; }
  100% { stroke-dashoffset: 0; opacity: .24; }
}

@keyframes fallbackNodePulse {
  0%, 100% { transform: scale(.62); opacity: .38; }
  36% { transform: scale(1.72); opacity: 1; }
  58% { transform: scale(1); opacity: .64; }
}

/* 이전 배경 HUD가 캐시에 남아도 숫자 오버레이는 보이지 않게 차단 */
#growth-bg .hud-year,
#growth-bg .hud-stores,
#growth-bg .hud-side,
body.home-page .hud-year,
body.home-page .hud-stores,
body.home-page .hud-side,
#hudYear,
#hudStores,
#hudRevenue,
#hudBrands {
  display: none !important;
}

/* 배경에는 KPI 숫자 HUD를 쓰지 않는다. 디버그 FPS만 예외. */
#growth-bg .hud:not(.fps),
#growth-bg [id*="hud" i]:not(.fps),
#growth-bg [class*="hud" i]:not(.fps),
#growth-bg [class*="metric" i],
#growth-bg [class*="kpi" i],
#growth-bg [class*="number" i],
#growth-bg [class*="counter" i] {
  display: none !important;
}

#growth-bg > :not(canvas):not(.growth-map-photo):not(.static-vietnam-map):not(.veil-vignette):not(.veil-loop):not(.fps) {
  display: none !important;
}

/* 비네팅 (모서리 어둡게) */
#growth-bg .veil-vignette {
  position: absolute; inset: 0;
  z-index: 4;
  background: radial-gradient(ellipse 75% 70% at 50% 46%,
    transparent 62%, rgba(0,0,8,.40) 100%);
}

/* 루프 전환용 페이드 */
#growth-bg .veil-loop {
  position: absolute; inset: 0;
  z-index: 8;
  background: #060d1f;
  opacity: 0;
  display: none !important;
}

/* FPS 디버그 미터 (?debug=1) */
#growth-bg .fps {
  display: none;
  z-index: 9;
  top: 14px; left: 14px;
  font-size: 12px; color: #7fb4ff; letter-spacing: 1px;
  background: rgba(6,13,31,.6); padding: 4px 8px; border-radius: 4px;
}
#growth-bg.debug .fps { display: block; }

#growth-bg .hud { position: absolute; }

/* ===== 피날레 문구 ===== */
#growth-bg .finale {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; opacity: 0;
  z-index: 7;
  color: #eaf2ff;
}
#growth-bg .finale .line1 {
  font-size: clamp(15px, 2.2vw, 24px); font-weight: 500;
  letter-spacing: .55em; text-transform: uppercase;
  color: rgba(205,225,255,.85); margin-bottom: 14px;
}
#growth-bg .finale .line2 {
  font-size: clamp(46px, 8.5vw, 104px); font-weight: 800;
  letter-spacing: .18em;
  text-shadow: 0 0 40px rgba(120,170,250,.55), 0 0 90px rgba(245,166,35,.25);
}