* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  background: royalblue;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: white;
}

img {
  position: absolute;
  z-index: -10;
}

.orbit-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;   /* 💡 가로 500px로 확장 */
  height: 400px;
}

.orbit-center {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  font-size: 14px;
  z-index: 2;
  pointer-events: none;
}

.orbit-center .link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

.orbit-center .link span {
  display: inline-block;
  transform-origin: center center;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
}

/* 🔵 타원 반지름 늘리기: translateX 값을 250px로 설정 */
.link.link-1  { transform: rotate(0deg) translateX(250px) rotate(-0deg); }
.link.link-2  { transform: rotate(36deg) translateX(250px) rotate(-36deg); }
.link.link-3  { transform: rotate(72deg) translateX(250px) rotate(-72deg); }
.link.link-4  { transform: rotate(108deg) translateX(250px) rotate(-108deg); }
.link.link-5  { transform: rotate(144deg) translateX(250px) rotate(-144deg); }
.link.link-6  { transform: rotate(180deg) translateX(250px) rotate(-180deg); }
.link.link-7  { transform: rotate(216deg) translateX(250px) rotate(-216deg); }
.link.link-8  { transform: rotate(252deg) translateX(250px) rotate(-252deg); }
.link.link-9  { transform: rotate(288deg) translateX(250px) rotate(-288deg); }
.link.link-10 { transform: rotate(324deg) translateX(250px) rotate(-324deg); }

@keyframes rotate {
  from { transform: skewX(-20deg) scaleY(0.6) rotate(0deg); }
  to   { transform: skewX(-20deg) scaleY(0.6) rotate(360deg); }
}

ul {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

li {
  position: absolute;
  list-style: none;
  font-family: sans-serif;
  font-size: 14px;
  color: white;
}

a {
  color: white;
}

a:visited {
  color: white;
}

/* 모바일 화면에서 지름 줄이기 */
@media (max-width: 600px) {
  .orbit-container {
    width: 300px;   /* 가로 폭 줄임 */
    height: 240px;  /* 세로 폭 줄임 */
  }

  /* 궤도 반경 줄이기 */
  .link.link-1  { transform: rotate(0deg) translateX(150px) rotate(-0deg); }
  .link.link-2  { transform: rotate(36deg) translateX(150px) rotate(-36deg); }
  .link.link-3  { transform: rotate(72deg) translateX(150px) rotate(-72deg); }
  .link.link-4  { transform: rotate(108deg) translateX(150px) rotate(-108deg); }
  .link.link-5  { transform: rotate(144deg) translateX(150px) rotate(-144deg); }
  .link.link-6  { transform: rotate(180deg) translateX(150px) rotate(-180deg); }
  .link.link-7  { transform: rotate(216deg) translateX(150px) rotate(-216deg); }
  .link.link-8  { transform: rotate(252deg) translateX(150px) rotate(-252deg); }
  .link.link-9  { transform: rotate(288deg) translateX(150px) rotate(-288deg); }
  .link.link-10 { transform: rotate(324deg) translateX(150px) rotate(-324deg); }

  /* 글씨 크기도 살짝 줄이기 */
  .orbit-center .link span {
    font-size: 12px;
  }
}