/* 사전투표율 등 막대그래프 상단 헤더 (피그마) */
.pre-vote.wrap-city .rate-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.pre-vote.wrap-city .rate-chart-head__badge {
  margin-left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #DEE2E6;
  background: #F8F9FA;
  font-family: 'mbcnew-medium', sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #495057;
}

.pre-vote.wrap-city .rate-chart-head__right {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  text-align: right;
  font-family: 'mbcnew-light';
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #646D76;
}

.pre-vote.wrap-city .rate-chart-head__line {
  margin: 0;
}
.pre-vote.wrap-city .rate-chart-head__line::before {
  display: inline-block;
  content: '';
  margin-right: 8px;
  background: #646D76;
  width: 4px;
  height: 4px;
  margin-bottom: 3px;
}

.pre-vote {
    padding-bottom: 60px;
    border-top: 1px solid #dee2e6;
}
.pre-vote.now-vote{padding-bottom: 40px;}
.wrap-rate .rate-legend {
  overflow: hidden;
  margin-bottom: 55px;
}
.wrap-rate .rate-legend ul {display:flex;margin-right: 40px;gap: 16px;justify-content: flex-end;}
.wrap-rate .rate-legend ul li {
  font-size: 16px;
  letter-spacing: -.4px;
  line-height: 24px;
}

.wrap-rate .rate-legend ul li span {
  font-size: 16px;
  vertical-align: top;
  margin-right: 7px;
}

.wrap-rate .rate-legend ul li .vote_color1 {
  color: #9370D6;
}

.wrap-rate .rate-legend ul li .vote_color2 {
  color: #C6CEDB;
}

.wrap-rate .rate-legend ul li .vote_color3 {
  color: #E9ECEF;
}

/* rate - time */
.wrap-rate {
  margin-bottom: 50px;
  overflow: visible;
}

/* rate - highcharts */
.highcharts-container {
  overflow: visible !important
}

.highcharts-figure {
  position: relative;
}

.highcharts-figure, .highcharts-data-table table {
  min-width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
}
.highcharts-figure .time{position:absolute;bottom: 15px;left: 38px;font-family: 'mbcnew-medium';}
.highcharts-figure #container {
  width: 1140px;
  margin: 0 auto;
  height: 310px;
  overflow: visible !important;
}
.highcharts-series-1 text,.highcharts-series-1 text * {
  fill: #C6CEDB !important;
  color: #C6CEDB !important;
  font-size: 12px !important
}

.highcharts-series-2 text,.highcharts-series-2 text * {
  fill: #E9ECEF !important;
  color: #E9ECEF !important;
  font-size: 12px !important
}

.highcharts-tooltip span span {
  padding-left: 10px;
}

.highcharts-tooltip span span:nth-child(1) {
  font-weight: normal;
}

.highcharts-tooltip span span.bold {
  font-family: 'mbcnew-bold';
}

.highcharts-axis-labels text.active {
  font-family: 'mbcnew-bold'
}

.highcharts-axis-labels text {
  font-size: 16px !important;
  font-family: 'mbcnew-light';
}

.highcharts-series-label {
  display: none;
}

.highcharts-tooltip .tooltips-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.highcharts-tooltip .tooltips {
  padding: 12px 10px;
  background: #fff;
  border: 4px solid #9370D6;
  border-radius: 12px;
  font-family: 'mbcnew-light';
  letter-spacing: -.4px;
}

.highcharts-tooltip .tooltips-arrow {
  flex-shrink: 0;
  line-height: 0;
  margin-top: -3px;
}

.highcharts-tooltip .tooltips-arrow svg {
  display: block;
  width: 16px;
  height: 12px;
  aspect-ratio: 4 / 3;
}

g.highcharts-label.highcharts-tooltip {
  overflow: visible !important;
}
.highcharts-tooltip span.bold {
  font-weight: bold;
  font-size: 21px;
}

g.highcharts-label.highcharts-tooltip.highcharts-color-undefined {
  display: none;
}

.highcharts-credits {
  display: none;
}

.highcharts-series-0, .highcharts-series-0 path {
  opacity: 1 !important;
}

/* rate - city */
.wrap-city .rate-cont {
  width: 100%;
  margin: 52px auto 45px;
  position: relative;
}

.wrap-city .rate-cont .rate-city-graph {
  width: 100%;
  margin-bottom: 60px;
}

.wrap-city .rate-cont .rate-city-graph .vert-box {
  width: 1078px;
  margin: 0 auto;
}

.wrap-city .rate-cont .rate-city-graph .vert {
  top: 200px;
  position: relative;
  margin: 0 80px;
}

.wrap-city .rate-cont .rate-city-graph .vert li {
  width: 30px;
  height: 240px;
  position: relative;
  text-align: center;
}

.wrap-city .rate-cont .rate-city-graph .vert li:last-child {
  margin-right: 0;
}

.wrap-city .rate-cont .rate-city-graph .vert li .data {
  position: absolute;
  width: 36px;
  text-align: center;
  top: -31px;
  left: -3px;
  color: #495057;
  font-size: 16px;
  z-index: 10;
}

.wrap-city .rate-cont .rate-city-graph .vert .city-name {
    display: inline-block;
    line-height: 24px;
    font-size: 16px;
    color: #495057;
    margin-top: 16px;
    margin-left: -3px;
}

.wrap-city .rate-cont .rate-city-graph .vert li .bar {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  background: #4c4c6f;
  z-index: 2;
}
.pre-vote.wrap-city .rate-cont .rate-city-graph .vert li:first-child .data,
.pre-vote.wrap-city .rate-cont .rate-city-graph .vert li:first-child .city-name {
  font-weight: bold;
}
.wrap-city.now-vote .rate-cont .rate-city-graph .vert li .data{font-size:18px;}

/* 투표현황(now-vote): 그리드 만점 80%(20% 간격). h-N은 항상 N% 높이와 동일 — 표시만 Y축 1.25배(100%→80% 만점) */
.pre-vote.now-vote.wrap-city .rate-cont .rate-city-graph .vert li .bar {
  transform: scaleY(1.25);
  transform-origin: bottom center;
}

.pre-vote.now-vote.wrap-city .rate-cont .rate-city-graph .vert li .bar .data {
  transform: translateX(-50%) scaleY(0.8);
  transform-origin: center bottom;
}

.pre-vote.now-vote.wrap-city .rate-cont .rate-city-graph .vert li.high .bar::before,
.pre-vote.now-vote.wrap-city .rate-cont .rate-city-graph .vert li.low .bar::before {
  transform: translateX(-50%) scaleY(0.8);
  transform-origin: 50% 100%;
}

/* 최고/최저 뱃지: 막대(.bar)와 함께 vHeight 키프레임으로 움직임 — li::before가 아닌 .bar::before */
.wrap-city .rate-cont .rate-city-graph .vert li.high .bar::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -85px;
  width: 48px;
  height: 54px;
  background: url(../images/rate_high.svg) no-repeat center / 48px 54px;
  z-index: 11;
  pointer-events: none;
}

.wrap-city .rate-cont .rate-city-graph .vert li.low .bar::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -85px;
  width: 48px;
  height: 54px;
  background: url(../images/rate_low.svg) no-repeat center / 48px 54px;
  z-index: 11;
  pointer-events: none;
}

.pre-vote.wrap-city .rate-cont {
  margin: -30px auto 0;
  padding-top: 60px;
  height: 300px;
  overflow: hidden;
}

.pre-vote.wrap-city .rate-cont .rate-city-graph {
  position: relative;
}

/* prevote(사전투표)만: 60px = 10%. vote now-vote는 위 scaleY로 80% 만점, 그리드 60px=20% */
.pre-vote.wrap-city:not(.now-vote) .rate-cont .rate-city-graph {
  margin-bottom: 0;
}

.pre-vote.wrap-city:not(.now-vote) .rate-cont .rate-city-graph .vert li {
  height: 600px;
}

.pre-vote.wrap-city .rate-cont .rate-city-graph::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 240px;
  background-image: repeating-linear-gradient(
    to top,
    transparent,
    transparent 59px,
    #DEE2E6 59px,
    #DEE2E6 60px
  );
  border-bottom: 1px solid #868E96;
  z-index: 0;
  pointer-events: none;
}

.pre-vote.wrap-city:not(.now-vote) .rate-cont .rate-city-graph::before {
  height: 240px;
}

/* bar: overflow:hidden으로 투톤 ::after 클리핑 — vote.ani.css의 vHeight*로 top/height 애니메이션 */
.pre-vote.wrap-city .rate-cont .rate-city-graph .vert li .bar {
  overflow: visible;
  border-radius: 16px 16px 0 0;
  --bar-color: #C6CED8;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0 8px, transparent 8px),
    var(--bar-color);
}

/* 숫자는 bar 내부 data를 사용 (bar와 함께 애니메이션) */
.pre-vote.wrap-city .rate-cont .rate-city-graph .vert li .data {
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  top: -24px;
  width: 45px;
  text-align: center;
}

.pre-vote.wrap-city .rate-cont .rate-city-graph .vert li:after {
  height: 240px;
  top: -240px;
}

.pre-vote.wrap-city:not(.now-vote) .rate-cont .rate-city-graph .vert li:after {
  height: 600px;
  top: -600px;
}

/* 색상 */
.pre-vote.wrap-city .rate-cont .rate-city-graph .vert li:first-child .bar {
  --bar-color: #93B0E3;
}
.pre-vote.wrap-city .rate-cont .rate-city-graph .vert li.high .bar {
  --bar-color: #9370D6;
}
.pre-vote.wrap-city .rate-cont .rate-city-graph .vert li.low .bar {
  --bar-color: #79ADAE;
}

.pre-vote.wrap-city .rate-cont .rate-city-graph .vert-box {
  width: 1218px;
}

.pre-vote.wrap-city .rate-cont .rate-city-graph .vert {
  top: 240px;
  display: flex;
  justify-content: space-between;
}

.pre-vote.wrap-city:not(.now-vote) .rate-cont .rate-city-graph .vert {
  top: 240px;
  display: flex;
  justify-content: space-between;
}

/* -------------------------------------------------------------------------
   역대 지방선거 투표율 / 의석수 공통 섹션
   ------------------------------------------------------------------------- */
.wrapper-past{display:flex;padding-bottom: 100px;justify-content: space-between;border-top: 1px solid #DEE2E6;}

.wrap-past .past-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  position: relative;
}

.wrap-past .past-img-wrap {
  width: 100%;
}

.wrap-past .past-img-full {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

/* 연도 드롭다운 — candi-dropdown 기반, 160px 고정 너비 */
.past-year-dd {
  position: absolute;
  right: 0;
  top: 80px;
  width: 160px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.past-year-dd .candi-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 8px 8px 8px 16px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #f8f9fa;
  font: inherit;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}

.past-year-dd .candi-dropdown__trigger:focus {
  outline: none;
}

.past-year-dd .candi-dropdown__trigger:focus-visible,
.past-year-dd.is-open .candi-dropdown__trigger {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.past-year-dd .candi-dropdown__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #495057;
  letter-spacing: -0.4px;
  text-align: left;
  font-family: 'mbcnew-medium';
}

.past-year-dd .candi-dropdown__caret {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url(../images/ico_dropdown.svg) no-repeat center / 24px 24px;
  transition: transform 0.15s ease;
}

.past-year-dd.is-open .candi-dropdown__caret {
  transform: rotate(180deg);
}

.past-year-dd .candi-dropdown__menu {
  position: absolute;
  z-index: 30;
  left: 0;
  top: calc(100% + 4px);
  width: 100%;
  margin: 0;
  padding: 8px 0 12px;
  list-style: none;
  box-sizing: border-box;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.past-year-dd .candi-dropdown__menu[hidden] {
  display: none !important;
}

.past-year-dd .candi-dropdown__menu li {
  margin: 0;
  padding: 0;
}

.past-year-dd .candi-dropdown__option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  background: none;
  font-family: 'mbcnew-light', sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #495057;
  text-align: left;
  cursor: pointer;
}

.past-year-dd .candi-dropdown__option:hover,
.past-year-dd .candi-dropdown__option:focus {
  background-color: #e9ecef;
  outline: none;
}

/* -------------------------------------------------------------------------
   구·시·군 지역별 투표율 TOP3 select-city 섹션
   ------------------------------------------------------------------------- */
.select-city {
  padding-bottom: 80px;
  overflow: visible;
}

.select-city-bar {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  background: #F1F3F5;
  border-radius: 4px;
}

.select-city-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'mbcnew-light', sans-serif;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.45px;
  color: #495057;
  flex-shrink: 0;
}

.select-city-label strong {
  font-family: 'mbcnew-bold', sans-serif;
  font-weight: 700;
}

.select-city-label img {
  flex-shrink: 0;
  display: block;
}

/* 드롭다운 — candi-dropdown 기반, 트리거 배경만 흰색으로 덮어쓰기 */
.select-city-dd.candi-dropdown {
  width: 302px;
}

.select-city-dd .candi-dropdown__trigger {
  background-color: #fff;
  border-color: #dee2e6;
  justify-content: center;
  padding: 8px 8px 8px 16px;
}

.select-city-dd .candi-dropdown__value {
  text-align: center;
}

/* TOP3 결과 영역 */
.select-city-top3 {
  margin-top: 32px;
  text-align: center;
}

.select-city-top3 #selectCityTop3Result {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'mbcnew-light', sans-serif;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.5px;
  color: #495057;
}

.select-city-top3 .top3-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.select-city-top3 .top3-item .rank {
  font-family: 'mbcnew-bold', sans-serif;
}

.select-city-top3 .top3-item .gu-name {
  font-family: 'mbcnew-light', sans-serif;
}

.select-city-top3 .top3-divider {
  color: #ADB5BD;
  font-size: 15px;
  line-height: 30px;
}

/* -------------------------------------------------------------------------
   재보궐 선거 투표율 — .wrap-rebyelect
   ------------------------------------------------------------------------- */
.wrap-rebyelect {
  background: #F8F9FA;
  overflow: visible;
  padding-bottom: 60px;
}

.wrap-rebyelect .sec-tit {
  align-items: center;
}

.rebyelect-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid #DEE2E6;
  background: #F8F9FA;
  font-family: 'mbcnew-medium', sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #495057;
  flex-shrink: 0;
}

.rebyelect-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rebyelect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 144px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #DEE2E6;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rebyelect-region {
  display: block;
  text-align: center;
  font-family: 'mbcnew-bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
}

.rebyelect-rate {
  display: block;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid #CED4DA;
  text-align: center;
  font-family: 'mbcnew-medium', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.6px;
  color: #7E96C2;
}

/* vote 페이지에서만 선거정보 섹션 상단 보더 제거 */
.sub-tupyo .wrap-info .wrapper {
  border-top: 0;
}