@charset "UTF-8";

/* ※ 개표현황 open/index.html 전용 ※ */

/* -------------------------------------------------------------------------
   섹션 타이틀 — 투표현황(vote)과 동일 (main.css h2.sec-tit)
   ------------------------------------------------------------------------- */
.sub-open h2.sec-tit,
.sub-forecast h2.sec-tit {
    box-sizing: content-box;
}

/* -------------------------------------------------------------------------
   선거 종류 탭
   ------------------------------------------------------------------------- */
.open-tab-wrap {
    margin-bottom: 48px;
}

.open-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    list-style: none;
}

    .open-tabs li {
        display: flex;
    }

        .open-tabs li button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-width: 200px;
            height: 48px;
            padding: 0 40px;
            border: 1px solid #DEE2E6;
            border-radius: 24px;
            font-family: 'mbcnew-medium';
            color: #495057;
            background: #fff;
            font-size: 18px;
            line-height: 28px;
            letter-spacing: -0.45px;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }

        .open-tabs li.active button {
            border-color: transparent;
            background: url(../images/bg_tab.svg) top center no-repeat;
        }

/* -------------------------------------------------------------------------
   지역 드롭다운
   ------------------------------------------------------------------------- */
.open-filter {
    display: none;
    justify-content: center;
    margin-bottom: 48px;
    overflow: visible;
    margin-top: -15px;
}

    .open-filter.is-active {
        display: flex;
        gap: 20px;
    }

.open-dd {
    width: 302px;
}

/* -------------------------------------------------------------------------
   카드 그리드
   ------------------------------------------------------------------------- */
.open-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-bottom: 60px;
}

/* -------------------------------------------------------------------------
   카드
   ------------------------------------------------------------------------- */
.open-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #DEE2E6;
    padding-bottom: 32px;
}

/* ── 카드 헤더 ── */
.card-head {
    position: relative;
    background: #F1F3F5;
    border-radius: 24px 24px 0 0;
    padding: 16px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 경합 — pbadge3와 동일 방식: SVG 배경 + .blind(공통) 스크린리더 텍스트 */
.card-status {
    display: block;
    position: absolute;
    top: 60px;
    width: 86px;
    height: 96px;
    margin: 0 auto 6px;
    background: url(../images/badge_vs.svg) no-repeat center / contain;
}

.card-tit {
    display: block;
    font-family: 'mbcnew-bold', sans-serif;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.45px;
}

.card-sub {
    font-size: 13px;
    line-height: 20px;
    color: #868E96;
    letter-spacing: -0.35px;
}

    .card-sub strong {
        font-weight: normal;
        font-family: 'mbcnew-medium'
    }
/* ── 카드 바디 (후보 + 그래프) ── */
.card-body {
    display: flex;
    align-items: flex-end;
    padding: 32px 40px 0;
    gap: 12px;
    justify-content: center;
}

/* ── 후보 블록 (좌: cand-side = 이미지+텍스트 / 우: cand-side = 텍스트+이미지) ── */
.cand {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.cand-l {
    justify-content: flex-start;
}

.cand-r {
    justify-content: flex-end;
}

.cand-side {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.cand-photo {
    position: relative;
    flex-shrink: 0;
    width: 114px;
    height: 148px;
    border-radius: 8px;
    border: 1px solid #DEE2E6;
}

    .cand-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }

.cand-info {
    display: flex;
    width: 90px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: center;
}

.cand-num, .cand-party {
    color: #646D76;
    text-align: center;
    font-size: 13px;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.325px;
}

.cand-name {
    font-family: 'mbcnew-bold', sans-serif;
    font-size: 18px;
    line-height: 28px; /* 155.556% */
    letter-spacing: -0.45px;
}

.cand-vote {
    font-style: normal;
    font-size: 13px;
    line-height: 20px;
    color: #495057;
    letter-spacing: -0.35px;
}

.cand-exit {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
    text-align: center;
    color: #7E96C2;
}

.cand-exit__label {
    font-family: 'mbcnew-medium', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.325px;
}

.cand-exit__rate {
    font-family: 'mbcnew-light', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: -0.325px;
}
/*
 * vote.ani.css h- 클래스 활용 구조:
 * .vert에 margin-top: 120px → li가 chart 아래에 배치
 * bar(position:absolute)가 top:-n% 으로 li 위쪽(= chart 영역)에 렌더링
 * .card-graph { height: 120px } → 시각적 차트 높이 = 최대 bar 높이
 */
.card-graph {
    flex-shrink: 0;
    position: relative;
    height: 120px;
}

    .card-graph .vert {
        display: flex;
        justify-content: center;
        gap: 20px;
        list-style: none;
        margin: 0;
        padding: 0;
        margin-top: 120px;
    }

        .card-graph .vert li {
            position: relative;
            width: 24px;
            height: 120px;
        }

        /* 투표율(.pre-vote.wrap-city … .bar)과 동일: 라운드 상단 + 우측 투톤 그라데이션 */
        .card-graph .vert .bar {
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 24px;
            overflow: visible;
            border-radius: 16px 16px 0 0;
            -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: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0 8px, transparent 8px), var(--bar-color);
            z-index: 2;
        }

            /* 막대 위 득표율 — bar와 함께 애니메이션, 당색(피그마) */
            .card-graph .vert .bar .num {
                display: inline-block;
                position: absolute;
                top: -32px;
                left: 50%;
                transform: translateX(-50%);
                width: 45px;
                text-align: center;
                white-space: nowrap;
                font-family: 'mbcnew-bold', sans-serif;
                font-size: 18px;
                font-weight: 700;
                line-height: 28px;
                letter-spacing: -0.45px;
            }

            /* 더불어민주당 */
            .card-graph .vert .bar.party1 .num {
                color: #4C95E8;
            }

            /* 국민의힘 */
            .card-graph .vert .bar.party2 .num {
                color: #E66A6A;
            }

            /* 조국혁신당 */
            .card-graph .vert .bar.party3 .num {
                color: #4E6DA2;
            }

            /* 개혁신당 */
            .card-graph .vert .bar.party4 .num {
                color: #ECA559;
            }

            /* 진보당 */
            .card-graph .vert .bar.party5 .num {
                color: #B84A6C;
            }

            /* 기타·무소속 */
            .card-graph .vert .bar.party99 .num {
                color: #9D9D9D;
            }

            /* 교육감 */
            .card-graph .vert .bar.party_edu .num {
                color: #79ADAE;
            }

            /* 당 색상 — 막대 본체(--bar-color) */
            .card-graph .vert .bar.party1 {
                --bar-color: #4C95E8;
            }

            .card-graph .vert .bar.party2 {
                --bar-color: #E66A6A;
            }

            .card-graph .vert .bar.party3 {
                --bar-color: #4E6DA2;
            }

            .card-graph .vert .bar.party4 {
                --bar-color: #ECA559;
            }

            .card-graph .vert .bar.party5 {
                --bar-color: #B84A6C;
            }

            .card-graph .vert .bar.party99 {
                --bar-color: #9D9D9D;
            }

            .card-graph .vert .bar.party_edu {
                --bar-color: #79ADAE;
            }

/* -------------------------------------------------------------------------
   뱃지
   ------------------------------------------------------------------------- */
.badge {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    z-index: 5;
}

.cand-l .badge {
    margin-left: -48px;
}

.cand-r .badge {
    margin-left: 48px;
}
/* badge1 / badge2 — 순위 원형 배경(PNG) + 시안 타이포 */
.badge1,
.badge2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 84px 84px;
    backface-visibility: hidden;
    font-family: 'mbcnew-bold', sans-serif;
    font-weight: 700;
    color: #fff;
    line-height: 32px;
    text-align: center;
}

    .badge1 .num,
    .badge2 .num {
        font-size: 24px;
        letter-spacing: -0.6px;
        line-height: 32px;
    }

    .badge1 em,
    .badge2 em {
        font-size: 14px;
        margin-top: 6px;
        font-style: normal;
    }

.badge1 {
    background-image: url(../images/badge_1.png);
}

.badge2 {
    background-image: url(../images/badge_2.png);
}

/* pbadge1 / pbadge2 / pbadge3 — 당선·확실·유력 이미지형 (242×242 SVG) */
.pbadge0,
.pbadge1,
.pbadge2,
.pbadge3 {
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.30));
    bottom: -24px;
}

/* 당선 */
.pbadge0,
.pbadge1 {
    background-image: url(../images/badge_5.svg);
}

/* 확실 */
.pbadge2 {
    background-image: url(../images/badge_4.svg);
}

/* 유력 */
.pbadge3 {
    background-image: url(../images/badge_3.svg);
}

/* -------------------------------------------------------------------------
   득표차 바
   ------------------------------------------------------------------------- */
.card-gap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 230px;
    gap: 5px;
    margin: 16px auto 24px;
    padding: 4px 30px;
    box-sizing: border-box;
    text-align: center;
    background: #F1F3F5;
    border-radius: 16px;
    font-size: 13px;
    line-height: 20px;
    color: #495057;
    letter-spacing: -0.35px;
}

    .card-gap .gap-label {
        font-family: 'mbcnew-medium'
    }

    .card-gap .gap-pct {
        font-weight: normal;
    }

/* -------------------------------------------------------------------------
   3위 이하 후보 리스트 (스크롤) — 트랙 8×144·rx4 #F1F3F5, 썸 #ADB5BD·rx4
   Chrome(Win): scrollbar-width(thin)와 ::-webkit-scrollbar 동시 지정 시
   OS형 스크롤(위·아래 화살표)이 남을 수 있어, Chromium 계열은 WebKit만 사용
   ------------------------------------------------------------------------- */
.card-etc-scroll {
    max-height: 149px;
    margin: 0 24px;
    overflow-y: auto;
}

    .card-etc-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .card-etc-scroll::-webkit-scrollbar-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }

        .card-etc-scroll::-webkit-scrollbar-button:vertical:start:decrement,
        .card-etc-scroll::-webkit-scrollbar-button:vertical:start:increment,
        .card-etc-scroll::-webkit-scrollbar-button:vertical:end:decrement,
        .card-etc-scroll::-webkit-scrollbar-button:vertical:end:increment,
        .card-etc-scroll::-webkit-scrollbar-button:single-button:vertical:decrement,
        .card-etc-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

    .card-etc-scroll::-webkit-scrollbar-corner {
        background: transparent;
    }

    .card-etc-scroll::-webkit-scrollbar-track {
        background-color: #F1F3F5;
        border-radius: 4px;
    }

    .card-etc-scroll::-webkit-scrollbar-thumb {
        background-color: #ADB5BD;
        border-radius: 4px;
    }

/* Firefox: Chromium과 달리 ::-webkit-* 없음 → scrollbar-*만 사용(화살표 없음) */
@supports (-moz-appearance: none) {
    .card-etc-scroll {
        scrollbar-width: thin;
        scrollbar-color: #ADB5BD #F1F3F5;
    }
}

.card-etc {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .card-etc li {
        display: flex;
        align-items: center;
        padding: 8px 24px;
        box-sizing: border-box;
        gap: 18px;
        border-bottom: 1px solid #DEE2E6;
        font-size: 14px;
        line-height: 20px;
        color: #495057;
        letter-spacing: -0.35px;
    }

        .card-etc li:first-child {
            border-top: 1px solid #DEE2E6
        }

        .card-etc li:last-child {
            border-bottom: none;
        }

    .card-etc .rank {
        flex-shrink: 0;
        width: 36px;
        font-family: 'mbcnew-medium', sans-serif;
        font-weight: 500;
        color: #495057;
    }

    .card-etc .name {
        flex-shrink: 0;
        font-family: 'mbcnew-bold', sans-serif;
        font-weight: 700;
        min-width: 52px;
    }

    .card-etc .party {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        /* 교육감 — 정당 없음: 당 칸은 party_edu 로 자리만 유지 */
        .card-etc .party.party_edu {
            font-size: 0;
            line-height: 0;
            color: transparent;
        }

    .card-etc .vote {
        flex-shrink: 0;
        min-width: 55px;
        text-align: right;
        font-family: 'mbcnew-light', sans-serif;
        font-size: 13px;
        font-weight: 300;
        line-height: 20px;
        letter-spacing: -0.325px;
        color: #646D76;
    }

    .card-etc .pct {
        flex-shrink: 0;
        width: 44px;
        margin-left: 40px;
        text-align: right;
        font-family: 'mbcnew-bold', sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.35px;
        color: #495057;
    }

/* -------------------------------------------------------------------------
   현재 시각 1위 — 지도 슬라이더
   ------------------------------------------------------------------------- */
.sub-open .wrap-map.wrapper,
.sub-forecast .wrap-map.wrapper {
    width: 1280px;
    margin: 0 auto;
}

.wrap-map {
    position: relative;
}

/* 지도 2-up 슬라이더 (js/map-slider.js) */
.map-slider {
    position: relative;
    margin-top: -58px;
}

.map-slider__top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 32px;
}

.map-slider__pager-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.map-slider__pager {
    font-family: 'mbcnew-light';
    font-size: 14px;
    color: #646D76;
    line-height: 20px;
    letter-spacing: -0.35px;
    margin-right: 2px;
}

    .map-slider__pager em {
        font-style: normal;
        font-family: 'mbcnew-medium';
    }

.map-btn-s {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    border: 1px solid #CED4DA;
}

    .map-btn-s:disabled {
        opacity: 0.5;
        cursor: default;
    }

.map-slider__body {
    display: flex;
    align-items: center;
}

.map-btn-l {
    margin-top: -210px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #fff;
    border: 1px solid #DEE2E6;
    border-radius: 50%;
    cursor: pointer;
}

    .map-btn-l:disabled {
        opacity: 0.5;
        cursor: default;
    }

.map-slides {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.map-slides__track {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width: calc(100% * var(--slide-count, 2));
    --slide-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-transform: translate3d(calc(-1 * var(--slide-index) * 100% / var(--slide-count, 2)), 0, 0);
    transform: translate3d(calc(-1 * var(--slide-index) * 100% / var(--slide-count, 2)), 0, 0);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 출구조사 — 1칸씩 이동 (열 단위 offset) */
.map-slider--step-col .map-slides__track {
    -webkit-transform: translate3d(calc(-1 * var(--slide-index) * 100% / var(--item-count, 3)), 0, 0);
    transform: translate3d(calc(-1 * var(--slide-index) * 100% / var(--item-count, 3)), 0, 0);
}

.map-slide {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 calc(100% / var(--slide-count, 2));
    flex: 0 0 calc(100% / var(--slide-count, 2));
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    min-width: 0;
    box-sizing: border-box;
}

.map-slide__col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 0;
}

.map-slide__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 48px;
    padding: 0 24px;
    border: 1px solid #DEE2E6;
    border-radius: 24px;
    font-family: 'mbcnew-medium';
    font-size: 18px;
    color: #495057;
    line-height: 28px;
    letter-spacing: -0.45px;
    margin-bottom: 32px;
    background: #fff;
}

/* 슬라이더 내 map-wrap 크기 */
.wrap-map .map-wrap {
    width: 100%;
    height: 740px;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   카드 대기 상태 — 개표정보 업데이트 전
   ------------------------------------------------------------------------- */
.open-card--pending {
    display: flex;
    flex-direction: column;
}

.card-body--pending {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 40px;
    height: calc(100% - 80px);
}

.card-pending-msg {
    color: #495057;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: -0.5px;
}