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

/* 사전 투표율 */
.sec-prevote { padding: 1.25em 0 1.875em; }
.sec-prevote h2 span.tit { flex: unset; }
.sec-prevote h2 span:not(.tit) { position: relative; flex: 0 0; font-size: var(--fs-02); line-height: 1.43; font-family: 'mbcnew-light'; font-weight: 300; white-space: nowrap; margin-left: -4px; }
.sec-prevote h2 span.date { font-size: var(--fs-02); line-height: 1.43; font-family: 'mbcnew-medium'; font-weight: 500; }

.rate-prevote-graph { position: relative; height: 250px; }
.vert-box { position: relative; overflow: auto hidden; height: 100%; white-space: nowrap; -ms-overflow-style: none; margin: 0 auto; max-width: 704px; padding-top: 40px; }
.vert::before { content: ''; position: absolute; top: -120px; left: 0; right: 0; width: 100%; height: 121px; background-image: linear-gradient(#dee2e6 1px, transparent 1px); background-size: 100% 30px; background-repeat: repeat-y; pointer-events: none; z-index: 1; }
.vert::after { content: ''; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 1px; background: #868E96; z-index: 2; }
.vert-box .vert { position: relative; display: flex; top: 135px; width: 704px; height: 120px; margin: 0 auto; gap: 24px; padding: 0 24px; }

.vert-box::-webkit-scrollbar { display:none; }
.rate-prevote-graph .scrollbar { display: block; }

.vert li { position: relative; width: 16px; }
.vert li .bar { position: absolute; z-index: 2; bottom: 0; left: 0; display: block; width: 16px; background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0 5px, transparent 5px), #C6CED8; -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; border-radius: 5em 5em 0 0; }
.vert li .bar.nation { background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0 5px, transparent 5px), #93B0E3; }
.vert li .bar.high { background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0 5px, transparent 5px), #9370D6; }
.vert li .bar.low { background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0 5px, transparent 5px), #79ADAE; }
.vert li .bar.high::before { content: "최고"; position: absolute; display: block;  width: 40px; height: 45px; background: url('//vote2026.imbc.com/images/m/img-badge-high.png') no-repeat center center / cover; font-size: 1px; left: 50%; top: -72px; transform: translateX(-50%); text-indent: -999px; }
.vert li .bar.low::before { content: "최저"; position: absolute; display: block;  width: 40px; height: 45px; background: url('//vote2026.imbc.com/images/m/img-badge-low.png') no-repeat center center / cover; font-size: 1px; left: 50%; top: -72px; transform: translateX(-50%); text-indent: -999px; }
.vert li .data { position: absolute; z-index: 2; top: -24px; left: 50%; transform: translateX(-50%); line-height: 1.43; text-align: center; }
.vert li .bar.nation .data, .vert li .bar.nation + .city-name { font-family: 'mbcnew-bold'; }
.vert li .city-name { position: relative; display: inline-block; line-height: 1.43; left: -0.3em; margin-top: 12px; }

.fs-1 .vert li .data { font-size: 13px; }
.fs-1 .vert-box { max-width: 744px; }
.fs-1 .vert-box .vert { height: 300px; width: 744px; }
.fs-1 .vert li .city-name { font-size: 13px; }
.fs-1.rate-prevote-graph { height: 230px; }
.fs-2 .vert li .data { font-size: 14px; }
.fs-2 .vert-box .vert { height: 150px; }
.fs-2 .vert li .city-name { font-size: 13px; }

.info { display: flex; justify-content: center; align-items: center; padding: 16px 0; background: #F8F9FA; border-radius: 4px; overflow: hidden; margin-top: 25px; }
.info .info-list { display: flex; flex-direction: column; }
.info .info-list .item { position: relative; display: flex; font-size: var(--fs-02); line-height: 1.43; color: #646D76; }
.info .info-list .item::before { content: ""; position: relative; display: inline-block; width: 4px; height: 4px; background: #646D76; margin: clamp(0.45em, calc(0.45em + 0.4167vw - 1.5px), calc(0.45em + 1.5px)) clamp(0.4em, calc(0.4em + 0.4167vw - 1.5px), calc(0.4em + 1.5px)) 0 0; }
.info .info-list .item + .item { margin-top: 4px; }
.info .info-list .item dt { font-family: 'mbcnew-medium'; white-space: nowrap; }
.info .info-list .item dd { font-family: 'mbcnew-light'; margin-left: .25em; }

/* 역대 지방선거 투표율 */
.sec-past-turnout { padding: 1.25em 0 1.875em; }
.sec-past-turnout h2 span.tit { flex: unset; }
.sec-past-turnout h2 span:not(.tit) { flex: 0 0; font-size: var(--fs-01); font-family: 'mbcnew-light'; font-weight: 300; margin-left: -4px; }
.turnout-box { max-width: 720px; width: 100%; margin: 1.875em auto 0; }
.turnout-box img { display: block; width: 100%; }

.sec-past-seats { padding: 1.25em 0 3.125em; }
.sec-past-seats .tit-wrp-seats { width: 100%; align-items: center; }
.sec-past-seats .select-wrp { position: relative; flex-shrink: 0; margin-left: auto; z-index: 10; }
.sec-past-seats .select-wrp.open { z-index: 100; }
.sec-past-seats .select-year { 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-past-seats .year-btn { display: flex; align-items: center; gap: 6px; min-width: 128px; margin: 0; padding: 5px 10px 5px 12px; border: 1px solid #DEE2E6; border-radius: 8px; background: #F8F9FA; color: #495057; font: inherit; font-size: var(--fs-02); font-family: 'mbcnew-medium'; text-align: left; cursor: pointer; }
.sec-past-seats .year-btn .year { flex: 1; font-family: 'mbcnew-medium'; font-weight: normal; }
.sec-past-seats .year-list { position: absolute; top: calc(100% + 4px); right: 0; margin: 0; list-style: none; min-width: 100%; max-width: calc(100vw - 32px); max-height: min(280px, 45vh); overflow: auto; border: 1px solid #DEE2E6; border-radius: 4px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.sec-past-seats .year-list[hidden] { display: none; }
.sec-past-seats .year-list li button { width: 100%; padding: 6px 12px; font-size: var(--fs-02); color: #495057; cursor: pointer; text-align: left; }
.sec-past-seats .year-list li button.is-selected { background: #EEF2FF; font-family: 'mbcnew-medium'; font-weight: normal; }

.sec-past-seats .chart-wrp { margin-top: 1.875em; }
.sec-past-seats .chart { display: none; width: 100%; min-height: 264px; }
.sec-past-seats .chart.active { display: block; }
.sec-past-seats .chart img { display: block; width: 100%; }