A:Link	{ text-decoration: none; color:white; }
A:Visited	{ text-decoration: none; color:white; }
A:Hover	{ text-decoration: none; color:white; }
.P	{ font-size: 12px; font-family: Arial; font-variant: normal;  line-height: 20px; margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 10px; }
.input	{ font-size: 12px; font-family: Arial; border-left: 1px inset; border-right: 1px outset; border-top: 1px inset; border-bottom: 1px outset; }
Body	{ font-size: 12px; font-family: Arial; }
TD	{ font-size: 12px; font-family: Arial; }
.Region {border: #FFFFFF;font-size: 12px; font-family: Arial; color:#FF0000; background-color:#000000}


.sound-toggle {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.bar {
  width: 4px;
  height: 100%;
  background-color: #333;
  transition: height 0.3s ease;
}

/* È°¼ºÈ­(On) »óÅÂÀÏ ¶§ ¾Ö´Ï¸ÞÀÌ¼Ç */
.sound-toggle.on .bar {
  animation: sound-wave 0.6s infinite alternate;
}

.sound-toggle.on .bar:nth-child(2) { animation-delay: 0.2s; }
.sound-toggle.on .bar:nth-child(3) { animation-delay: 0.4s; }

/* ºñÈ°¼ºÈ­(Off) »óÅÂÀÏ ¶§ */
.sound-toggle.off .bar {
  height: 4px !important;
  animation: none;
}

@keyframes sound-wave {
  from { height: 4px; }
  to { height: 20px; }
}