

   
      /* 확대 이미지 컨테이너 */
      .vote-image-container {
         position: relative;
         display: inline-block;
      }

      /* 원래 작은 이미지 */
      .vote-image img {
         width: 50px;
         height: 50px;
         cursor: pointer;
         transition: opacity 0.2s;
      }
      /* 확대된 이미지 스타일 */
      .vote-image .zoomed-image {
         position: absolute;
         top: 0;
         left: 60px; /* 기존 이미지 오른쪽에 배치 */
         width: 150px;
         height: 150px;
         display: none;
         border-radius: 5px;
         box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
         transition: opacity 0.3s ease-in-out;
         background: #fff;
         padding: 5px;
         z-index: 1000;
      }

      /* Hover 시 확대 이미지 표시 */
      .vote-image:hover .zoomed-image {
         display: block;
         opacity: 1;
      }



.vote-option {
       display: flex;
       align-items: center;
       justify-content: space-between;
       /* padding: 2px; */
       border: 2px solid #ddd;
       border-radius: 5px;
       margin-bottom: 5px;
       margin-top: 5px;
       cursor: pointer;
       transition: background-color 0.3s, border-color 0.3s;
       min-height:52px;
}

.vote-do {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 8px;
       border: 1px solid #ddd;
       border-radius: 5px;
       /* margin-bottom: 5px; */
       margin-top: 5px;
       cursor: pointer;
       text-align: center;
       background: #a31717;
       color: #ffffff;
       border: 1px solid #790303;
}


.vote-option.selected {
   /* border-color: #3fa8ff; */
   /* background-color: #dcefff; */
   border:2px solid #3fa8ff;
}

.vote-image img {
width: 50px;
height: 50px;
/* border-radius: 5px; */
object-fit: cover;
}

.vote-content {
   flex-grow: 1;
   /* margin: 0 10px; */
   /* height:50px; */

}

.vote-bar {
   /* background-color: white; */
   height: 50px;
   /* border-radius: 5px; */
   overflow: hidden;
   /* margin-top: 5px; */
   display: none; /* 기본적으로 숨김 */
   transition: all 0.5s ease-in-out;
   margin-left:-10px;
}

.vote-bar .bar {
   display: block;
   height: 100%;
   background-color: #ddd; /* 기본 회색 */
   width: 0; /* 초기값 */
   display:flex;
   align-items:center;
   transition: width 0.7s ease-in-out;
}
 .vote-percentage {
   color: #333;
    display: none;
    position: relative;
    right: 15%;
    width: 0;
}

.vote-option.selected .vote-bar .bar {
   /* background-color: #dcefff */
}

.vote-option .vote-bar .vote-percentage {
   right:10%;
}
.vote-text {
white-space:nowrap;
margin-left:10px;
}

.vote-text.selected {
color: #008bff; /* 초록색 */
font-weight: bold; /* 선택된 텍스트 강조 */
}

.vote-percentage.selected {
color: #008bff; /* 파란색 */
font-weight: bold; /* 강조 */
}

.vote-texts {
white-space: nowrap;
margin-left: 10px;
/* color: #333;position: relative;left: 10px; */

}

/* 이미지 스타일 */
.option-img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 4px;
}
