@charset "UTF-8";
@import url("common.css");

/* 시간대별 투표율 */
.sec-time { padding: 1.25em 0 1.875em; }
.sec-time h2 span.tit { flex: unset; }
.sec-time h2 span:not(.tit) { flex: 0 0; font-size: var(--fs-01); font-family: 'mbcnew-light'; font-weight: 300; margin-left: -4px; }
.time-rate { box-sizing: border-box; width: calc(100% + 32px); max-width: 720px; margin-left: -16px; margin-right: -16px; }
.time-rate .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 20px 0; }
.time-rate .legend li { display: flex; align-items: center; font-size: var(--fs-md); line-height: 1.43; color: #495057; }
.time-rate .legend .dot::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 5em; }
.time-rate .legend .d9::before { background: #9370D6; }
.time-rate .legend .d8::before { background: #C6CEDB; }
.time-rate .legend .d7::before { background: #E9ECEF; }
.time-rate .vals { position: relative; display: inline-block; margin: 0 auto; padding: 0 24px; z-index: 2; left: 50%; transform: translateX(-50%); }
.time-rate .vals .vals-inner { display: flex; flex-wrap: wrap; justify-content: center; padding: 6px 16px; border: 4px solid #9370D6; box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15); border-radius: 10px; background: #fff; font-size: var(--fs-lg); line-height: 1.5; text-align: center; font-family: 'mbcnew-light', sans-serif; }

.time-rate .vals strong.n9 { font-family: 'mbcnew-bold', sans-serif; }
.time-rate .vals strong.n8,
.time-rate .vals strong.n7 { font-family: 'mbcnew-light', sans-serif; font-weight: 400; }
.time-rate .plot { position: relative; width: 100%; height: 240px; margin: 0; overflow: visible !important; z-index: 1; margin-top: -28px; font-size: var(--fs-md); line-height: 1.43; }
.sec-time .time-rate .plot .highcharts-container { width: 100% !important; overflow: visible !important; height: auto !important; }
.sec-time .time-rate .plot svg.highcharts-root { width: 100% !important; overflow: visible; }
.time-rate .foot { margin: 12px 12px 0 0; font-size: var(--fs-sm); line-height: 1.43; color: #646D76; text-align: right; }
.sec-time .highcharts-yaxis .highcharts-axis-line { stroke: none; }
.sec-time .highcharts-yaxis-labels { display: none; }
.sec-time .highcharts-credits { display: none !important; }
.sec-time .time-rate .plot text.rate-x-hour { font-family: 'mbcnew-light', sans-serif; font-size: var(--fs-md); line-height: 1.43; }
.sec-time .time-rate .plot text.active.rate-x-hour,
.sec-time .time-rate .plot text.rate-x-hour.active { font-family: 'mbcnew-bold', sans-serif; }

.sec-time .time-rate .plot .highcharts-series-label { display: none !important; }
.sec-time .time-rate .plot .highcharts-axis-labels text, .sec-time .time-rate .plot .rate-x-hour text, .sec-time .time-rate .plot text.rate-x-hour { font-family: 'mbcnew-light', sans-serif !important; font-size: var(--fs-md); }
.sec-time .time-rate .plot .rate-x-hour.active text, .sec-time .time-rate .plot g.active.rate-x-hour text, .sec-time .time-rate .plot text.active.rate-x-hour { font-family: 'mbcnew-bold', sans-serif !important; }

/* 구·시·군 지역별 투표율 TOP3 */
.sec-city { position: relative; padding: 1.25em 0 1.875em; z-index: 2; }
.sec-city .select-wrp { position: relative; z-index: 10; margin-top: 1.25em; }
.sec-city .select-wrp.open { z-index: 100; }
.sec-city .select-city { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; opacity: 0; pointer-events: none; }
.sec-city .city-btn { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 1px solid #DEE2E6; border-radius: 4px; background: #F8F9FA; color: #495057; font: inherit; font-size: var(--fs-02); line-height: 1.4286; font-family: 'mbcnew-medium'; text-align: left; cursor: pointer; }
.sec-city .city-btn .city { display: block; width: 100%; flex: 1; font-family: 'mbcnew-medium'; font-weight: normal; text-align: center; }
.sec-city .city-btn .ico-arr-btm { position: absolute; right: 8px; top: 7px; }
.sec-city .city-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; list-style: none; max-height: 180px; overflow: auto; border: 1px solid #DEE2E6; border-radius: 4px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.sec-city .city-list[hidden] { display: none; }

.sec-city .result-wrp { display: block; width: 100%; }
.sec-city .result-wrp ul { display: block; width: 100%; margin-top: 12px; }
.sec-city .result-wrp ul li { display: flex; justify-content: center; width: 100%; padding: 8px 0; gap: 12px; line-height: 1.5; border-bottom: 1px solid #DEE2E6; }
.sec-city .result-wrp ul strong { font-family: 'mbcnew-bold'; }

/* 재보궐선거 투표율 */
.sec-rank-local { position: relative; padding: 1.25em 0 1.875em; z-index: 1; }
.cityvote-wrp { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1em 0.75em; overflow-x: auto; overflow-y: hidden; padding: 20px 16px 16px; -ms-overflow-style: none; scrollbar-width: none; margin: 0 auto; }
.cityvote-wrp::-webkit-scrollbar { display: none; }
.cityvote-wrp .item { display: inline-block; padding: 12px; border: 1px solid #DEE2E6; border-radius: 12px; }
.cityvote-wrp dt { display: block; text-align: center; font-size: var(--fs-01); line-height: 1.5385; font-family: 'mbcnew-bold'; }
.cityvote-wrp dd { position: relative; display: block; width: 116px; text-align: center; color: #7E96C2; font-size: var(--fs-04); line-height: 1.3333; font-family: 'mbcnew-medium'; font-weight: 500; margin-top: 24px; }
.cityvote-wrp dd::after { content: ""; position: absolute; display: inline-block; width: 100%; height: 1px; background: #CED4DA; left: 0; top: -12px; }
.sec-rank-local .scrollbar { position: relative; display: block; }