:root {
  --theme-color: #00FF31;
  --theme-color-hover: #00cc28;
  --theme-color-light: #66ff99;
  --theme-color-dark: #00aa26;

  --gray-theme-color: #6b7280; /* gray-500 */
  --gray-theme-color-hover: #4b5563; /* gray-600 */
  --gray-theme-color-light: #e5e7eb; /* gray-200 */
  --gray-theme-color-dark: #374151; /* gray-700 */

  --blue-theme-color: #3b82f6; /* blue-500 */
  --blue-theme-color-hover: #2563eb; /* blue-600 */
  --blue-theme-color-light: #bfdbfe; /* blue-200 */
  --blue-theme-color-dark: #1e40af; /* blue-700 */

  --green-theme-color: #00FF31; /* green-500 */
  --green-theme-color-hover:#00cc28; /* green-600 */
  --green-theme-color-light:  #66ff99; /* green-200 */
  --green-theme-color-dark:  #00aa26; /* green-700 */

  --orange-theme-color: #f97316; /* orange-500 */
  --orange-theme-color-hover: #ea580c; /* orange-600 */
  --orange-theme-color-light: #fed7aa; /* orange-200 */
  --orange-theme-color-dark: #c2410c; /* orange-700 */

  --yellow-theme-color: #facc15; /* yellow-500 */
  --yellow-theme-color-hover: #eab308; /* yellow-600 */
  --yellow-theme-color-light: #fef08a; /* yellow-200 */
  --yellow-theme-color-dark: #a16207; /* yellow-700 */

  --teal-theme-color: #14b8a6; /* teal-500 */
  --teal-theme-color-hover: #0d9488; /* teal-600 */
  --teal-theme-color-light: #99f6e4; /* teal-200 */
  --teal-theme-color-dark: #0d9488; /* teal-700 */

  --red-theme-color: #ef4444; /* red-500 */
  --red-theme-color-hover: #dc2626; /* red-600 */
  --red-theme-color-light: #fecaca; /* red-200 */
  --red-theme-color-dark: #dc2626; /* red-700 */

  --purple-theme-color: #8b5cf6; /* purple-500 */
  --purple-theme-color-hover: #7c3aed; /* purple-600 */
  --purple-theme-color-light: #ddd6fe; /* purple-200 */
  --purple-theme-color-dark: #5b21b6; /* purple-700 */
}

html.green-theme {
  --theme-color: #00FF31;
  --theme-color-hover: #00cc28;
  --theme-color-light: #66ff99;
  --theme-color-dark: #00aa26;
}

html.blue-theme {
  --theme-color: var(--blue-theme-color); /* blue-500 */
  --theme-color-hover: var(--blue-theme-color-hover); /* blue-600 */
  --theme-color-light: var(--blue-theme-color-light); /* blue-200 */
  --theme-color-dark: var(--blue-theme-color-dark); /* blue-700 */
}

html.orange-theme {
  --theme-color: var(--orange-theme-color); /* orange-500 */
  --theme-color-hover: var(--orange-theme-color-hover); /* orange-600 */
  --theme-color-light: var(--orange-theme-color-light); /* orange-200 */
  --theme-color-dark: var(--orange-theme-color-dark); /* orange-700 */
}

html.yellow-theme {
  --theme-color: var(--yellow-theme-color); /* yellow-500 */
  --theme-color-hover: var(--yellow-theme-color-hover); /* yellow-600 */
  --theme-color-light: var(--yellow-theme-color-light); /* yellow-200 */
  --theme-color-dark: var(--yellow-theme-color-dark); /* yellow-700 */
}

html.teal-theme {
  --theme-color: var(--teal-theme-color); /* teal-500 */
  --theme-color-hover: var(--teal-theme-color-hover); /* teal-600 */
  --theme-color-light: var(--teal-theme-color-light); /* teal-200 */
  --theme-color-dark: var(--teal-theme-color-dark); /* teal-700 */
}

html.red-theme {
  --theme-color: var(--red-theme-color); /* red-500 */
  --theme-color-hover: var(--red-theme-color-hover); /* red-600 */
  --theme-color-light: var(--red-theme-color-light); /* red-200 */
  --theme-color-dark: var(--red-theme-color-dark); /* red-700 */
}

html.purple-theme {
  --theme-color: var(--purple-theme-color); /* purple-500 */
  --theme-color-hover: var(--purple-theme-color-hover); /* purple-600 */
  --theme-color-light: var(--purple-theme-color-light); /* purple-200 */
  --theme-color-dark: var(--purple-theme-color-dark); /* purple-700 */
}

html.gray-theme {
  --theme-color: var(--gray-theme-color); /* gray-500 */
  --theme-color-hover: var(--gray-theme-color-hover); /* gray-600 */
  --theme-color-light: var(--gray-theme-color-light); /* gray-200 */
  --theme-color-dark: var(--gray-theme-color-dark); /* gray-700 */
}

body {
  font-family: "NEXON Lv2 Gothic", sans-serif;
}

.theme-ring:focus {
  --tw-ring-color: var(--theme-color);
  --tw-ring-opacity: 1;
  --tw-ring-offset-width: 0px;
}

.theme-button {
  background-color: var(--theme-color);
}

.theme-button:hover {
  background-color: var(--theme-color-hover);
}

.v-shape {
  fill: var(--theme-color);
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}

.v-shape.delay1 {
  animation-delay: 0.2s;
}
.v-shape.delay2 {
  animation-delay: 0.4s;
}
.v-shape.delay3 {
  animation-delay: 0.6s;
}
.v-shape.delay4 {
  animation-delay: 0.8s;
}
.v-shape.delay5 {
  animation-delay: 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 서브메뉴 페이드 효과 */
.submenu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  margin-top: 1.5rem;
  z-index: 50;
}

.group:hover .submenu {
  opacity: 1;
  visibility: visible;
}

._comment {
  width: 100%;
}
#captcha #captcha_img {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "NEXON Lv2 Gothic", sans-serif;
}
/* 테마 색상 변경 예시 */