:root {
  --orbit-border: rgba(30, 43, 88, 0.12);
  /* 외부 CSS 변수 폴백 */
  --brand-sub-red: #cf8a8a; 
  --brand-sub-green: #78b68a;
  --brand-dark: #1e2b58;
  --white: #ffffff;
  --text-sub: #666666;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 20px 20px;
  text-align: center;
}

/* Orbit Stage - 1400px Wide Landscape */
.orbit-stage {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: 850px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The Main Orbit Ring - 600px Circular */
.orbit-path {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1.5px dashed var(--orbit-border);
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.orbit-path::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--brand-sub-red);
  opacity: 0.6;
  animation: spin-sync 12s linear infinite;
}

@keyframes spin-sync {
  to { transform: rotate(360deg); }
}

/* Central Hub - Navy 30% Dynamic Gradient & All White Text */
.central-hub {
  position: absolute;
  z-index: 10;
  width: 280px;
  height: 280px;
  top: 33%;
  left: 40%;
  transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #1e2b58 30%, #4a5ea0 55%, #78b68a 80%);
  background-size: 200% 200%;
  animation: grad-flow 8s ease infinite;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 70px rgba(30, 43, 88, 0.3);
  border: 4px solid var(--white);
  padding: 40px;
  text-align: center;
}
.central-hub h2, .central-hub p, .central-hub span { color: var(--white) !important; }

@keyframes grad-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Satellite Nodes - Positioned Outside the Orbit Path */
.satellite-node {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.node-anchor {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--orbit-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark);
  font-size: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  z-index: 5;
}

.satellite-node:hover .node-anchor {
  background: var(--brand-dark);
  color: var(--white);
  transform: scale(1.15);
  box-shadow: 0 15px 40px rgba(30, 43, 88, 0.2);
}

/* Horizontal Description Layout (Desktop) */
.node-content {
  position: absolute;
  width: 260px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.satellite-node.side-left .node-content { right: 60px; text-align: right; }
.satellite-node.side-right .node-content { left: 60px; text-align: left; }
.satellite-node.side-bottom .node-content { top: 60px; left: 50%; transform: translateX(-50%); text-align: center; width: 300px; }

/* [수학적 좌표 고정 - 궤도 바깥쪽 배치] */
/* M1: 10:30 (Outer Top Left) */
.pos-m1 { top: 18%; left: 28%; }
/* M5: 1:30 (Outer Top Right) */
.pos-m5 { top: 18%; left: 72%; }
/* M2: 7:30 (Outer Bottom Left) */
.pos-m2 { top: 72%; left: 28%; }
/* M4: 4:30 (Outer Bottom Right) */
.pos-m4 { top: 72%; left: 72%; }
/* M3: 6:00 (Outer Bottom Center) */
.pos-m3 { top: 93%; left: 50%; }


/* =========================================
   Mobile Responsive Overrides
   (모바일 정렬 및 순서 수정 포함)
   ========================================= */
@media (max-width: 1023px) {
  .header-content { 
      padding: 60px 20px 20px; 
  }
  
  .orbit-stage { 
      height: auto; 
      flex-direction: column; 
      gap: 40px; 
      padding: 60px 20px; 
      align-items: flex-start; /* 중앙 정렬 대신 왼쪽 정렬 기준점 확보 */
  }
  
  .orbit-path { 
      display: none; 
  }
  
  /* [수정] 위성 노드(M1~M5) 위치 및 정렬 강제 초기화 */
  /* side-left, side-right 등 모든 방향 클래스에 대해 강력하게 덮어씌움 */
  .satellite-node,
  .satellite-node.side-left,
  .satellite-node.side-right,
  .satellite-node.side-bottom { 
      position: relative; 
      top: auto !important; 
      left: auto !important; 
      right: auto !important;
      bottom: auto !important;
      transform: none !important; /* 위치 이동 제거 */
      width: 100%; 
      height: auto; 
      flex-direction: row; 
      display: flex;
      gap: 20px; 
      align-items: flex-start; 
      justify-content: flex-start; /* 내부 요소 왼쪽 정렬 */
      margin: 0 !important; 
  }
  
  .node-anchor { 
      position: relative; 
      top: auto; 
      left: auto; 
      transform: none !important; 
      flex-shrink: 0; 
      width: 64px; 
      height: 64px; 
      font-size: 24px; 
  }
  
  /* [수정] 텍스트 박스 초기화 (M1, M3 쏠림 방지 핵심) */
  .satellite-node .node-content,
  .satellite-node.side-left .node-content,
  .satellite-node.side-right .node-content,
  .satellite-node.side-bottom .node-content { 
      position: relative; 
      top: auto !important; 
      left: auto !important; 
      right: auto !important; /* M1의 right: 60px 제거 */
      bottom: auto !important;
      transform: none !important; /* M3의 translateX(-50%) 제거 */
      width: auto !important; /* 고정 너비(300px 등) 해제 */
      text-align: left !important; /* M1, M3의 텍스트 정렬 강제 왼쪽 */
      margin: 0 !important;
  }
  
  .central-hub { 
      position: relative; 
      top: auto; 
      left: auto; 
      transform: none; 
      order: -1; /* Mission을 제일 위로 */
      width: 100%; 
      height: auto; 
      border-radius: 30px; 
      padding: 40px 20px; 
      aspect-ratio: auto; 
  }

  /* [수정] 모바일 순서 강제 조정 (M1 -> M2 -> M3 -> M4 -> M5) */
  .pos-m1 { order: 1; }
  .pos-m2 { order: 2; }
  .pos-m3 { order: 3; }
  .pos-m4 { order: 4; }
  .pos-m5 { order: 5; }
}