﻿@charset "UTF-8";
@import url("common.css");

.win-wrp { display: flex; width: 100%; gap: 1em; margin-top: 1.5em; }
.win-wrp li { flex: 1; display: inline-block; }
.win-wrp li button { display: flex; justify-content: center; align-items: center; text-align: center; padding: 10px 0; width: 100%; height: 100%; border: 1px solid #DEE2E6; border-radius: 5em; font-family: 'mbcnew-medium'; background: #fff; font-size: var(--fs-lg); color: #495057; }
.win-wrp li button.active { border-color: transparent; background: url('//vote2026.imbc.com/images/m/bg-btn.jpg') no-repeat center center / 140% 140%; }

.tab-wrp { display: none; margin-top: 1.25em; }
.tab-wrp.active { display: block; }
.tab-city .sec-filter { padding: 0; }
.tab-city .win-list-region { padding-bottom: 3.125em; }

.win-select-wrp { position: relative; z-index: 10; }
.win-select-wrp.open { z-index: 100; }
.win-tab-btn { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 8px; border: 1px solid #DEE2E6; border-radius: 4px; background: #F8F9FA; color: #495057; font-size: var(--fs-02); line-height: 1.4286; font-family: 'mbcnew-medium'; cursor: pointer; }
.win-tab-btn .win-kind-crt { flex: 1; text-align: center; }
.win-tab-btn .ico-arr-btm { position: absolute; right: 8px; top: 7px; }

.kind-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; list-style: none; border: 1px solid #DEE2E6; border-radius: 4px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); max-height: 180px; overflow-y: auto; }
.kind-list[hidden] { display: none; }
.kind-list button { display: block; width: 100%; padding: 6px 12px; border: 0; background: transparent; color: #495057; font-size: var(--fs-02); line-height: 1.4286; text-align: left; cursor: pointer; }
.kind-list button[aria-selected="true"] { background: #EEF2FF; font-family: 'mbcnew-medium'; }

.tab-cont-list { padding-bottom: 3.125em; }
.tab-cont-list .tab-cont { display: none; width: 100%; }
.tab-cont-list .tab-cont.active { display: block; }

.party-wrp { display: block; width: 100%; text-align: center; margin-top: 1.25em; }
.party-wrp .tit { display: inline-block; font-size: var(--fs-02); line-height: 1.5; background: #f1f3f5; padding:  7px 24px 5px; border-radius: 30px; }
.party-wrp .tit strong { font-weight: noraml; font-family: 'mbcnew-medium'; }
.party-list { display: flex; justify-content: center; flex-wrap: wrap;; margin-top: .75em; gap: .5em 1.25em; }
.party-list .win-party { display: flex; flex-wrap: nowrap; align-items: center; white-space: nowrap; gap: 7px; font-size: var(--fs-md); line-height: 1.412; }
.party-list .win-party::before { content: ""; position: relative; display: inline-block; width: 12px; height: 12px; flex-shrink: 0; }
.party-list .win-party1::before { background: var(--party-1); }
.party-list .win-party2::before { background: var(--party-2); }
.party-list .win-party3::before { background: var(--party-3); }
.party-list .win-party4::before { background: var(--party-4); }
.party-list .win-party5::before { background: var(--party-5); }
.party-list .win-party99::before { background: var(--party-99); }

.read { display: block; text-align: center; width: 100%; font-size: var(--fs-md); line-height: 1.412; margin-top: 1.54em; }
.read .bold { font-family: 'mbcnew-medium'; }

.tab-cont-list .select-option { margin: 1.25em 0 0; }

.win-list { display: block; width: 100%; margin-top: 1.875em; }
.win-list .card { display: block; width: 100%; }
.win-list .card + .card { margin-top: 1.25em; }
.win-list .card .win { display: block; width: 100%; border: 1px solid #DEE2E6; border-radius: 1em; overflow: hidden; }
.win-list .card .tit { display: flex; flex-direction: column; width: 100%; justify-content: center; align-items: center; background: #F1F3F5; padding: .75em; text-align: center; line-height: 1.5; }
.win-list .card .tit strong { display: block; width: 100%; font-size: var(--fs-03); font-family: 'mbcnew-bold'; margin-bottom: 2px; }
.win-list .card .tit p { font-size: var(--fs-sm); width: 100%; font-family: 'mbcnew-light'; }
.win-list .card .win-info-wrp { display: flex; align-items: flex-start; width: 100%; padding: 1.25em 1em 1.25em 1.75em; min-height: 124px; }
.win-list .card .win-info-wrp:not(:has(.img-wrp)) { display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; }
.win-list .card .win-info-wrp:not(:has(.img-wrp)) > p { font-size: var(--fs-md); line-height: 1.412; }

.win-info-wrp .img-wrp { position: relative; display: inline-block; flex: 0 0 4.0625em; height: 5.25em; margin-right: 1em; }
.win-info-wrp .img-wrp::after { content: ""; position: absolute; display: inline-block; width: 40px; height: 40px; background: url('//vote2026.imbc.com/images/m/badge-elected.png') no-repeat center center / contain; border-radius: 999px; overflow: hidden; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); left: -16px; bottom: -8px; }
.win-info-wrp .img-wrp .thumb { display: block; width: 100%; height: 100%; border: 1px solid #DEE2E6; border-radius: 6px; overflow: hidden; }
.win-info-wrp .img-wrp .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.win-info-wrp .win-info { min-width: 66px; margin-right: 1em; }
.win-info-wrp .win-info .num { color: #646D76; font-family: 'mbcnew-light'; font-size: var(--fs-sm); font-weight: 300; line-height: 1.5; margin-bottom: 2px; }
.win-info-wrp .win-info .name { display: block; font-family: 'mbcnew-bold'; font-size: var(--fs-03); line-height: 1.5; margin-bottom: 2px; }
.win-info-wrp .win-info .party { color: #646D76; font-size: var(--fs-sm); line-height: 1.5; }
.win-info-wrp .win-result { display: block; font-size: var(--fs-sm); line-height: 1.5; }
.win-info-wrp .win-result .rate { font-family: 'mbcnew-medium'; margin-bottom: 2px; }
.win-info-wrp .win-result .bold { font-family: 'mbcnew-medium'; margin-bottom: 2px; }
.win-info-wrp .win-result .votes { display: flex; flex-direction: row; flex-wrap: wrap; gap: .1em .25em; }
.win-info-wrp .win-result .votes span { display: inline-block; white-space: nowrap; }

.select-option { position: relative; display: flex; flex-wrap: nowrap; gap: 0.75em; z-index: 10; margin: 1.25em 0; }
.select-option.open { z-index: 100; }
.select-option .select { position: relative; flex: 1; }
.select-option .city-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 12px; text-align: center; border: 1px solid #DEE2E6; border-radius: 4px; background: #F8F9FA; color: #495057; font-size: var(--fs-02); line-height: 1.4286; font-family: 'mbcnew-medium'; cursor: pointer; }
.select-option .city-btn .city { display: block; width: 100%; flex: 1; font-family: 'mbcnew-medium'; font-weight: normal; text-align: center; }
.select-option:has(.select + .select) .city-btn, .select-option:has(.select + .select) .city-btn .city { text-align: left; }
.select-option .city-btn .ico-arr-btm { position: absolute; right: 8px; top: 7px; }
.select-option .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); }
.select-option .city-list[hidden] { display: none; }

/* 가로막대 */
.council-box { display: block; width: 100%; margin-top: 1.875em; }
.council-box .read { font-size: var(--fs-03); line-height: 1.5; }
.council-box .council { display: block; width: 100%; overflow: hidden; }
.council-box .tit { display: block; text-align: center; font-family: 'mbcnew-bold'; font-size: var(--fs-03); line-height: 1.5; color: #495057; }
.council-list { display: block; width: 100%; margin-top: 1.25em; }
.council-list .item { display: flex; align-items: stretch; border-top: 1px solid #DEE2E6; }
.council-list .item:last-child { border-bottom: 1px solid #DEE2E6; }
.council-list .logo-wrp { display: flex; justify-content: flex-start; align-items: center; flex-shrink: 0; width: 6em; min-width: 6em; height: 3em; padding-left: .75em; box-sizing: border-box; background: #F8F9FA; overflow: hidden; }
.council-list .item-logo { display: block; font-family: 'mbcnew-medium'; font-size: var(--fs-01); line-height: 1.4; color: #495057; word-break: keep-all; }
.council-list .bar-track { flex: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5em; min-width: 0; padding: .75em .25em .75em .75em; box-sizing: border-box; background: #fff; }
.council-list .bar-track .bar { display: block; flex-shrink: 1; height: 1.5em; border-radius: 999px; min-width: 4px; box-sizing: border-box; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.council-list .bar-track .num { display: inline-block; flex-shrink: 0; font-family: 'mbcnew-bold'; font-size: var(--fs-lg); line-height: 1.5; color: #495057; white-space: nowrap; }

.council-list .party { display: block; flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; font-size: var(--fs-02); line-height: 1.54; }
.council-list .party1, .council-list .party3, .council-list .party4 { height: clamp(18px, calc(16px + 0.5556vw), 20px); }
.council-list .party2 { height: clamp(16px, calc(14px + 0.5556vw), 18px); }
.council-list .party5 { height: clamp(12px, calc(10px + 0.5556vw), 14px); }
.council-list .party img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: left center; }