@charset "utf-8";

/* ============================================
    ## common
============================================ */
:root {
    /* 색상 */
    color-scheme: light;
    --c-el_point: #5A22F0;
    --c-el_sub: #A020F0;
    --c-el_bg: #F5F3FF;
    --c-el_badge: #EDE5FF;
    --c-el_border: #DDD5F8;
    --c-el_chart: #B69EF2;
    --c-el_shadow: #826EAE;
    --c-el_text: #3D1A9E;
    --c-el_gray_light: #F8F8F8;
    --c-el_gray_box: #f2f2f2;
    --c-el_gray_border: #D9D9D9;
    --c-el_gray_text: #8E8E8E;
    --c-el_gray_dark: #5a5a5a;
    --c-el-win-fill: #FFFBEB;
    --c-el-win-border: #FDE68A;
    --c-el-win-dot: #F59E0B;
    --c-el-win-txt: #92400E;

    /* 정당컬러 */
    --party-de: #152484;/* 더불어민주당 */
    --party-pp: #E61E2B;/* 국민의힘 */
    --party-rk: #0073CF;/* 조국혁신당 */
    --party-rp: #FF7210;/* 개혁신당 */
    --party-ad: #D6001C;/* 진보당 */
    --party-bi: #00D2C3;/* 기본소득당 */
    --party-sm: #F58400;/* 사회민주당 */
    --party-etc: #B69EF2;/* 기타 */
    --party-none: #828282;/* 무소속 */

    /* 정당컬러 - 지도용 */
    --party-de-map: #1F7DFF;/* 더불어민주당 */
    --party-pp-map: #FF2F3D;/* 국민의힘 */

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(98, 45, 255, 0.25);
    --shadow-md: 0 4px 16px rgba(98, 45, 255, 0.25);
    --shadow-pill: 0 6px 16px rgba(98, 45, 255, 0.5);
    --shadow-glass: 2px 2px 15px rgba(98, 45, 255, 0.15);
    --shadow-glass-hover: 4px 4px 15px rgba(98, 45, 255, 0.25);

    /* 레이아웃 */
    --panel-w: 460px;
    --tab-h: 48px;
    --header-h: 52px;

    /* 트랜지션 */
    --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.3s;
    --t-ui-long: 0.35s;

    /* safe area */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-dark="true"] {
    /* 색상 */
    --c-el_point: #9872FF;
    --c-el_sub: #CC77FF;
    --c-el_bg: #2C254C;
    --c-el_badge: #3E3565;
    --c-el_border: #554B87;
    --c-el_chart: #CDB8FF;
    --c-el_shadow: #826EAE;
    --c-el_text: #C4AEFF;
    --c-el_gray_light: #232323;
    --c-el_gray_box: #2A2A2A;
    --c-el_gray_border: #3A3A3A;
    --c-el_gray_text: #A0A0A0;
    --c-el_gray_dark: #D5D5D5;
    --c-el-win-fill: #1C1508;
    --c-el-win-border: #7C5E1A;
    --c-el-win-dot: #F59E0B;
    --c-el-win-txt: #FDE68A;

    /* 정당컬러 */
    --party-de: #7B9FE8;/* 더불어민주당 */
    --party-pp: #FF6B75;/* 국민의힘 */
    --party-rk: #4DAAFF;/* 조국혁신당 */
    --party-rp: #FF9A52;/* 개혁신당 */
    --party-ad: #FF5C6E;/* 진보당 */
    --party-bi: #33DACE;/* 기본소득당 */
    --party-sm: #FFB347;/* 사회민주당 */
    --party-etc: #CDB8FF;/* 기타 */
    --party-none: #A0A0A0;/* 무소속 */

    /* 정당컬러 - 지도용 */
    --party-de-map: #5CA8FF;/* 더불어민주당 */
    --party-pp-map: #FF6470;/* 국민의힘 */

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(152, 114, 255, 0.25);
    --shadow-md: 0 4px 16px rgba(152, 114, 255, 0.25);
    --shadow-pill: 0 6px 16px rgba(152, 114, 255, 0.5);
    --shadow-glass: 2px 2px 15px rgba(30, 30, 30, 0.7);
    --shadow-glass-hover: 4px 4px 15px rgba(30, 30, 30, 0.9);
}
.el-gradation {background: linear-gradient(135deg, #5A22F0, #A020F0);}
:root[data-dark="true"] .el-gradation {background: linear-gradient(135deg, #9872FF, #CC77FF);}

/* 아이콘 */
.ice {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: auto;
    text-indent: -9999px;
}
.elect9_box .ic_electmark {
    width: 20px;
    height: 20px;
    background: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_elect_mark.svg) center center / cover;
    margin: 0 5px 1px 0;
    flex-basis: auto;
}
.ic-arrow-link {
    width: 6px;
    height: 14px;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_arrow_link.svg);
    background-size: 100%;
}

/* 제어 */
.ly_mode {overflow: hidden;}

/* ============================================
    ## 9회 지방선거 선거판
============================================ */
/* Reset & Base */
.elect9_box *,
.elect9_box *::before,
.elect9_box *::after {
    box-sizing: border-box;
}
.elect9_box button {cursor: pointer;}
.elect_box_wrap {
    margin: 0 auto;
    background-color: var(--c-el_gray_box);
}

/*  Top Bar (Header) */
.elect9_box {margin-bottom: 25px;}
.elect9_box .set_inner {border: 1px solid var(--c-el_gray_border);}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 10px;
}
.brand {
    display: flex;
    justify-content: center;
    align-items: center;
}
.brand-title {
    font-size: 2.2rem;
    color: var(--c-el_point);
    font-weight: bold;
}
.topbar-right {
    display: flex;
    align-items: center;
    position: absolute;
    top: 11px;
    right: 10px;
}
.turnout {
    margin-right: 20px;
    font-size: 1.4rem;
    color: var(--c-el_gray_dark);
}
.turnout strong {
    font-size: 1.7rem;
    color: var(--c-el_point);
    margin-left: 5px;
}
.btn-special {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 13px 7px 15px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
    border-radius: 100px;
}
.btn-special:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-pill);
}
.btn-special svg {
    width: 14px;
    height: 14px;
}

/* Section Title */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px 20px 6px 20px;
    gap: 12px;
}
.section-title {
    position: relative;
    font-size: 1.7rem;
    font-weight: bold;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}
.section-meta {
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
}
.section_cards {
    background-color: var(--c-bg);
}

/* 탭 네비게이션 */
.tab-radio {display: none;}
.tab_btn_box {
    overflow: hidden;
    position: relative;
    background-color: var(--c-el_bg);
}
.tab_btn_box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--c-bg));
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.tab_btn_box.is-end::after {opacity: 0;}
.tab-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tab-nav::-webkit-scrollbar {display: none;}
.tab-label {
    position: relative;
    flex: 0 0 25%;
    min-width: 25%;
    padding: 14px 24px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--c-el_chart);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    user-select: none;
    border-top: 1px solid var(--c-el_gray_border);
}
.tab-label:hover {color: var(--c-el_point);}
.tab-label::before {
    content: "";
    display: block;
    width: 0%;
    background-color: var(--c-el_point);
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s;
}
.tab-label:hover::before {width: 100%;}
.tab-label::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 30%;
    background-color: var(--c-el_border);
}
.tab-label:last-child::after {content: none;}

/* 패널 */
.tab-panel {
    display: none;
    padding: 0 20px 15px 20px;
}
.top_area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 0;
}

/* 라디오 체크 시 탭/패널 활성화 */
#tab-metro:checked~.tab_btn_box .tab-nav .label-metro,
#tab-basic:checked~.tab_btn_box .tab-nav .label-basic,
#tab-edu:checked~.tab_btn_box .tab-nav .label-edu,
#tab-by:checked~.tab_btn_box .tab-nav .label-by {
    color: var(--c-el_point);
    font-weight: 700;
}
#tab-metro:checked~.tab_btn_box .tab-nav .label-metro,
#tab-basic:checked~.tab_btn_box .tab-nav .label-basic,
#tab-edu:checked~.tab_btn_box .tab-nav .label-edu,
#tab-by:checked~.tab_btn_box .tab-nav .label-by {
    background-color: var(--c-bg);
}
#tab-metro:checked~.tab_btn_box .tab-nav .label-metro::before,
#tab-basic:checked~.tab_btn_box .tab-nav .label-basic::before,
#tab-edu:checked~.tab_btn_box .tab-nav .label-edu::before,
#tab-by:checked~.tab_btn_box .tab-nav .label-by::before {
    width: 100%;
}
#tab-metro:checked~.tab_panel_box .panel-metro,
#tab-basic:checked~.tab_panel_box .panel-basic,
#tab-edu:checked~.tab_panel_box .panel-edu,
#tab-by:checked~.tab_panel_box .panel-by {
    display: block;
}

/* Summary Bar */
.summary {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.summary-title {
    font-size: 1.7rem;
    font-weight: 700;
}
.summary-title strong {
    color: var(--c-el_point);
    font-weight: 700;
    margin-left: 2px;
}
.party-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: 5px;
    padding-left: 15px;
    margin-left: 15px;
}
.party-list::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background-color: var(--c-el_border);
}
.party-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
    margin-right: 10px;
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--c-el_gray_box);
}
.party-dot strong {
    font-weight: 700;
    margin-left: 2px;
    color: var(--c-el_point);
}

/* ── s: 후보자 영역 정당별 컬러 ── */
/* 더불어민주당 */
.party-list .party-de .legend-dot {background-color: var(--party-de);}

/* 국민의힘 */
.party-list .party-pp .legend-dot {background-color: var(--party-pp);}

/* 개혁신당 */
.party-list .party-rp .legend-dot {background-color: var(--party-rp);}

/* 조국혁신당 */
.party-list .party-rk .legend-dot {background-color: var(--party-rk);}

/* 진보당 */
.party-list .party-ad .legend-dot {background-color: var(--party-ad);}

/* 기본소득당 */
.party-list .party-ad .legend-dot {background-color: var(--party-bi);}

/* 사회민주당 */
.party-list .party-ad .legend-dot {background-color: var(--party-sm);}

/* 기타 */
.party-list .party-none .legend-dot {background-color: var(--party-etc);}

/* 무소속 */
.party-list .party-none .legend-dot {background-color: var(--party-none);}
/* ── //e: 후보자 영역 정당별 컬러 ── */

/* swiper */
.Swiper_candi {overflow: hidden;}
.Swiper_candi .swiper-pagination,
.Swiper_candi .swiper-button-next,
.Swiper_candi .swiper-button-prev {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    padding: 0;
}
.Swiper_candi .swiper-pagination-fraction {width: auto;}
.Swiper_candi .swiper-btn-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 10px;
}
.Swiper_candi .swiper-button-next,
.Swiper_candi .swiper-button-prev {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--c-el_border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.Swiper_candi .swiper-button-next:hover,
.Swiper_candi .swiper-button-prev:hover {
    background-color: var(--c-el_bg);
}
.Swiper_candi .swiper-button-next:after, 
.Swiper_candi .swiper-button-prev:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_arrow_p.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.Swiper_candi .swiper-button-prev:after {transform: rotate(180deg);}
.Swiper_candi .swiper-pagination {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--c-el_chart);
}
.Swiper_candi .swiper-pagination .swiper-pagination-current {color: var(--c-el_point);}

/* 후보자 영역 */
.card_list {display: flex;}
.card_box {
    overflow: hidden;
    border: 1px solid var(--c-el_border);
    border-radius: 5px;
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background-color: var(--c-el_bg);
    border-bottom: 1px solid var(--c-el_border);
}
.card-region {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
    font-size: 1.5rem;
    font-weight: 700;
    padding-right: 5px;
}
.card-progress {
    flex: 0 0 80px;
    font-size: 1.2rem;
    color: var(--c-el_gray_dark);
    text-align: right;
}
.card-progress strong {color: var(--c-el_point);}
.candidates {
    display: flex;
    flex-direction: column;
    min-height: 168px;
    padding: 15px;
}
.candidate {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 8px;
    align-items: start;
}
.candidate+.candidate {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed var(--c-el_gray_border);
}
.avatar {
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--c-el_border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_person.svg);
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    background-color: var(--c-el_bg);
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cand-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
    min-width: 0;
    height: 100%;
}
.cand-txt {
    flex-basis: 50%;
    display: flex;
    justify-content: flex-start;
}
.cand-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    justify-content: center;
}
.cand-name {
    font-size: 1.7rem;
    font-weight: 700;
    margin-top: 2px;
}
.cand-party {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--c-el_gray_dark);
}
.cand-stats {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-bottom: 3px;
}
.cand-percent {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02rem;
    color: var(--party-etc);
}
.cand-votes {
    font-size: 1.1rem;
    color: var(--c-el_gray_text);
}
.candi-bar {
    overflow: hidden;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    margin-top: 3px;
    background: var(--c-el_gray_box);
}
.bar-fill {
    position: relative;
    height: 100%;
    background: var(--c-el_chart);
    border-radius: 0 30px 30px 0;
}
.elect9_box .bar-fill {
    width: 0%;
    border-radius: 4px;
    transition: width .6s ease;
    animation: barGrow 0.9s cubic-bezier(.22,.61,.36,1) forwards;
    background-color: var(--party-etc);
}
@keyframes barGrow {
    from { width: 0%; }
    to   { width: var(--target, 0%); } /* CSS 변수로 목표값 전달 */
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: fit-content;
    min-width: 40px;
    padding: 3px 8px;
    border-radius: 100px;
    background-color: var(--c-el_badge);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--c-el_point);
}
.badge-elected {
    background-color: var(--c-el-win-fill);
    border: 1px solid var(--c-el-win-border);
    color: var(--c-el-win-txt);
}
.badge-elected::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-el-win-dot);
}
.badge-rank1 {
    background-color: var(--c-el_point);
    color: var(--c-bg);
}

/* Empty state (개표 준비중) */
.card-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--c-el_chart);
    font-size: 1.4rem;
}
.card-empty-box .card-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ic_elect_ing {
    width: 60px;
    height: 60px;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_elect_ing.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* 교육감 */
.candi-edu .cand-party {display: none;}

/* ============================================
    ## 후보자 카드 영역
============================================ */
/* 더불어 민주당 */
.candi-party-de .cand-party, .candi-party-de .cand-percent {color: var(--party-de);}
.elect9_box .candi-party-de .bar-fill {background-color: var(--party-de);}

/* 국민의 힘 */
.candi-party-pp .cand-party, .candi-party-pp .cand-percent {color: var(--party-pp);}
.elect9_box .candi-party-pp .bar-fill {background-color: var(--party-pp);}

/* 조국혁신당 */
.candi-party-rk .cand-party, .candi-party-rk .cand-percent {color: var(--party-rk);}
.elect9_box .candi-party-rk .bar-fill {background-color: var(--party-rk);}

/* 개혁신당 */
.candi-party-rp .cand-party, .candi-party-rp .cand-percent {color: var(--party-rp);}
.elect9_box .candi-party-rp .bar-fill {background-color: var(--party-rp);}

/* 진보당 */
.candi-party-ad .cand-party, .candi-party-ad .cand-percent {color: var(--party-ad);}
.elect9_box .candi-party-ad .bar-fill {background-color: var(--party-ad);}

/* 기본소득당 */
.candi-party-bi .cand-party, .candi-party-bi .cand-percent {color: var(--party-bi);}
.elect9_box .candi-party-bi .bar-fill {background-color: var(--party-bi);}

/* 사회민주당 */
.candi-party-sm .cand-party, .candi-party-sm .cand-percent {color: var(--party-sm);}
.elect9_box .candi-party-sm .bar-fill {background-color: var(--party-sm);}

/* 기타 */
.candi-party-etc .cand-party, .candi-party-etc .cand-percent {color: var(--party-etc);}
.elect9_box .candi-party-etc .bar-fill {background-color: var(--party-etc);}

/* 무소속 */
.candi-party-none .cand-party, .candi-party-none .cand-percent {color: var(--party-none);}
.elect9_box .candi-party-none .bar-fill {background-color: var(--party-none);}

/* 교육감 1위 */
.candi-edu .avatar, .candi-edu .cand-percent {color: var(--c-el_point);}
.elect9_box .candi-edu .bar-fill {background-color: var(--c-el_point);}

/* 교육감 2위 */
.candi-edu:nth-child(2) .avatar, .candi-edu:nth-child(2) .cand-percent {color: var(--c-el_sub);}
.elect9_box .candi-edu:nth-child(2) .bar-fill {background-color: var(--c-el_sub);}

/* ============================================
    ## Pagination
============================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 0 28px;
}
.page-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.page-btn:hover {
    background: var(--color-primary-light);
    transform: translateY(-1px);
}
.page-btn:disabled {
    color: var(--color-text-faint);
    cursor: not-allowed;
    opacity: .6;
}
.page-info {
    font-size: 14px;
    font-weight: 700;
    min-width: 48px;
    text-align: center;
}
.page-info strong {
    color: var(--color-primary);
    font-weight: 800;
}

/* ============================================
    ## 시도별 선택 드롭다운 버튼
============================================ */
/* 드롭다운 래퍼 */
.el-drowpdown-wrap {
    width: 100%;
    max-width: 230px;
}
.el-dropdown {
    position: relative;
    width: 100%;
    user-select: none;
}

/* 드롭다운 트리거 버튼 */
.el-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 15px;
    background: var(--c-el_bg);
    border: 1px solid var(--c-el_border);
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--c-el_text);
    transition: background var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui), box-shadow var(--t-fast) var(--ease-ui);
    -webkit-tap-highlight-color: transparent;
}

/* 열린 상태 트리거 */
.el-dropdown.is-open .el-dropdown__trigger {
    background: var(--c-el_badge);
    border-color: var(--c-el_point);
}

/* 트리거 텍스트 */
.el-dropdown__label {
    flex: 1;
    text-align: left;
    margin-bottom: 2px;
    opacity: 0.6;
}
.el-dropdown.is-open .el-dropdown__trigger .el-dropdown__label {opacity: 1;}

/* 화살표 아이콘 */
.el-dropdown__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--t-fast) var(--ease-ui);
}
.ic_dropdown {
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_dropdown.svg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}
.el-dropdown.is-open .el-dropdown__arrow {
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_dropdown_up.svg);
    transform: rotate(0deg);
}

/* 드롭다운 패널 */
.el-dropdown__panel {
    overflow: hidden;
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-el_border);
    border-radius: 5px;
    box-shadow: var(--shadow-md);
    z-index: 100;

    /* 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-ui), transform var(--t-fast) var(--ease-ui);
}
.el-dropdown.is-open .el-dropdown__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 목록 스크롤 영역 */
.el-dropdown__list {
    list-style: none;
    max-height: 232px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-el_chart) transparent;
}
.el-dropdown__list::-webkit-scrollbar {width: 4px;}
.el-dropdown__list::-webkit-scrollbar-track {background: transparent;}
.el-dropdown__list::-webkit-scrollbar-thumb {
    background: var(--c-el_chart);
    border-radius: 4px;
}

/* 목록 아이템 */
.el-dropdown__item {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 15px;
    font-size: 1.4rem;
    color: var(--c-el_gray_dark);
    cursor: pointer;
    transition:
        background var(--t-fast) var(--ease-ui),
        color var(--t-fast) var(--ease-ui);
    border-top: 1px solid var(--c-el_gray_border);
}
.el-dropdown__item:first-child {border-top: none;}

/* hover */
.el-dropdown__item:hover {
    background: var(--c-el_bg);
    color: var(--c-el_text);
}

/* 선택된 항목 */
.el-dropdown__item.is-selected {
    background-color: var(--c-el_bg);
    color: var(--c-el_text);
    font-weight: 600;
}
.el-dropdown__item.is-selected::after {
    content: "";
    position: absolute;
    right: 15px;
    width: 16px;
    height: 16px;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_checked.svg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

/* ============================================
        ## 선거 위젯 배치 제어
        elect_widget_mobile_area : ~1079px 이슈 위
        elect_widget_pc_area     : 1080px+ 오피니언 위
============================================ */
/* 모바일 영역: 1080px+ 에서 숨김 */
.elect_widget_mobile_area {
    display: block;
    margin-bottom: 20px;
}

@media (min-width: 1080px) {
    .elect_widget_mobile_area {
        display: none;
    }
}

/* PC 영역: 1080px 미만에서 숨김 */
.elect_widget_pc_area {
    display: none;
    margin-bottom: 20px;
}

@media (min-width: 1080px) {
    .elect_widget_pc_area {
        display: block;
    }
}

/* ============================================
    ## el_result_banner : 제9회 지선 결과 배너
    Mobile(~1079px): 카드형 / PC(1080px+): 1줄 바
============================================ */
.el_result_banner {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* ── 공통 ── */
.el_rb_title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 2.0rem;
    font-weight: 700;
    color: var(--c-el_point);
    white-space: nowrap;
}

.el_rb_title .ic_electmark {
    flex-shrink: 0;
}

.el_rb_title i {
    flex-shrink: 0;
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 1px;
    background: url(https://bimg.mk.co.kr/2026/9elect/assets/images/ic_elect_mark.svg) center center / cover;
}

.el_rb_result_txt {
    font-size: 1.4rem;
    color: #212121;
    margin: 0;
    line-height: 1.5;
}

.el_rb_date {
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 배너 특집 버튼 — 모바일(.el_rb_mobile)에서만 표시, ev_spec_btn 공용 */
/* ── 롤링 중계 공통 ── */
.result_article_wr {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.rb_roller_viewport {
    overflow: hidden;
    height: 1.5em;
    /* 아이템 1줄 높이 */
    line-height: 1.5;
}

.rb_roller_track {
    list-style: none;
    margin: 0;
    padding: 0;
    will-change: transform;
}

.rb_roller_item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 1.5em;
    min-width: 0;
}

.rb_roller_txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-txt);
    text-decoration: none;
}

.rb_roller_date {
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 모바일 body 내 롤러 — 텍스트+날짜 2줄 단위 롤링 */
.el_rb_mo_body .result_article_wr {
    width: 100%;
}

.el_rb_mo_body .rb_roller_viewport {
    height: 40px;
    /* 텍스트 1줄(21px) + 날짜 1줄(18px) + gap(3px) ≒ 40px */
}

.el_rb_mo_body .rb_roller_item {
    height: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.el_rb_mo_body .rb_roller_txt {
    font-size: 1.5rem;
    line-height: 1.5;
    height: auto;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.el_rb_mo_body .rb_roller_date {
    font-size: 1.2rem;
}

/* ── Mobile (~752px) ── */
.el_rb_mobile {
    display: block;
    background: var(--c-el_badge);
    border: 1px solid var(--c-el_border);
    border-radius: 8px;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
}

.el_rb_mo_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 10px;
    border-bottom: 1px solid var(--c-el_border);
}

.el_rb_mo_body {
    padding: 10px 14px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── PC (1080px+) ── */
.el_rb_pc {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 50px;
    box-sizing: border-box;
    max-width: 1246px;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid var(--c-el_gray_border);
    background: linear-gradient(90deg, #F5F3FF 15%, #EDE5FF 100%);
    margin-bottom: 30px;
    justify-content: space-between;
}

.el_rb_divider {
    display: block;
    width: 1px;
    height: 16px;
    background: var(--c-el_point);
    opacity: 0.3;
    flex-shrink: 0;
}

.el_rb_pc .el_rb_result_txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--txt, var(--font_main, #212121));
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}


.el_rb_mobile .ev_spec_btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 12px 1px 14px;
    height: 28px;
    background: linear-gradient(to left, #BF00FF, #622DFF);
    border-radius: 100px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-pill);
    transition: opacity var(--t-fast) var(--ease-ui);
}

.el_rb_mobile .ev_spec_btn:hover {
    opacity: 0.85;
}


@media (min-width: 753px) {
    .el_rb_mobile {
        display: none;
    }

    .el_rb_pc {
        display: flex;
    }

    .el_rb_pc .rb_roller_item {
        justify-content: flex-end;
    }

    .el_rb_pc .rb_roller_txt {
        flex: none;
    }
}

@media (min-width: 753px) and (max-width: 1246px) {
    .el_rb_pc .rb_roller_item {
        justify-content: flex-start;
    }

    .el_rb_pc .rb_roller_txt {
        flex: 1;
    }

    .el_rb_pc {
        margin-left: 15px;
        margin-right: 15px;
    }
}

@media (min-width: 1247px) {
    .el_rb_divider {
        display: none;
    }
}

@media (max-width: 752px) {
    .ev_spec_btn svg {
        width: 12px;
        height: 15px;
        fill: rgba(255, 255, 255, 0.8);
        flex-shrink: 1;
        transform: rotate(180deg);
    }

    .el_rb_title {
        font-size: 18px;
    }
}

/* ============================================
    ## elect_vote : 제9회 전국동시지방선거 투표율
============================================ */
/* ----- 공통 영역 ----- */
.elect_vote_wrap {
    background-color: var(--c-el_gray_box);
    border: 1px solid var(--c-el_gray_border);
    border-radius: 0;
    overflow: hidden;
    width: 100%;
    max-width: 1246px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 20px;
}

/* ----- 헤더 타이틀 바 ----- */
.elect_vote_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 48px;
    background-color: var(--c-bg);
    border-bottom: 1px solid var(--c-el_gray_border);
    position: relative;
}

.elect_vote_header .ev_title {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--c-el_point);
    white-space: nowrap;
    position: absolute;
    left: 49%;
    transform: translateX(-49%);
}

.elect_vote_header .ev_title .ic_electmark {
    flex-shrink: 0;
    display: block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    background: url(https://bimg.mk.co.kr/2026/9elect/assets/images/ic_elect_mark.svg) center center / cover;
}

.elect_vote_header .ev_spec_btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 8px 0 14px;
    height: 28px;
    margin-left: auto;
    background: linear-gradient(135deg, #5A22F0, #A020F0);
    border-radius: 100px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: opacity var(--t-fast) var(--ease-ui);
}

.elect_vote_header .ev_spec_btn:hover {
    opacity: 0.85;
}

.elect_vote_header .ev_spec_btn svg {
    width: 12px;
    height: 15px;
    fill: rgba(255, 255, 255, 0.8);
    flex-shrink: 1;
    transform: rotate(180deg);
}

/* ----- 본문 영역 (PC: 좌우 2단) ----- */
.elect_vote_body {
    display: flex;
    padding: 20px 20px 20px 20px;
    gap: 20px;
    transition: padding var(--t-fast) var(--ease-ui), gap var(--t-fast) var(--ease-ui);
}

/* ----- 전국 투표율 (좌측) ----- */
.ev_national_wr {
    flex: 0 0 295px;
    display: flex;
    flex-direction: column;
    transition: flex var(--t-fast) var(--ease-ui), width var(--t-fast) var(--ease-ui);
}

.ev_national {
    flex: 1;
    background: var(--c-bg);
    border: 1px solid var(--c-el_border);
    border-radius: 5px;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    transition: padding var(--t-fast) var(--ease-ui), border-radius var(--t-fast) var(--ease-ui);
}

.ev_national_label {
    font-size: 1.7rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 0;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* 도넛 차트 */
.ev_donut_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
}

.ev_donut_svg_wrap {
    position: relative;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.ev_donut_svg {
    width: 150px;
    height: 150px;
    transform: rotate(-90deg);
}

.ev_donut_bg {
    fill: none;
    stroke: var(--c-el_bg);;
    stroke-width: 22;
}

.ev_donut_val {
    fill: none;
    stroke: url(#donutGrad);
    stroke-width: 22;
    /*stroke-linecap: round;*/
    transition: stroke-dasharray 1s var(--ease-ui);
}

.ev_donut_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    text-align: center;
    line-height: 1;
}

.ev_donut_pct {
    font-size: 2.0rem;
    font-weight: 700;
    color: var(--c-el_point);
    display: block;
}

.ev_donut_count {
    font-size: 1.1rem;
    color: var(--c-el_gray_text);
    white-space: nowrap;
    margin-top: 6px;
    display: block;
}

/* 범례 */
.ev_legend {
    width: 100%;
    border-top: 1px solid var(--c-el_border);
    padding-top: 10px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ev_legend_item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 1.3rem;
    color: #212121;
}

.ev_legend_item .legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ev_legend_item .legend-dot.dot_main {
    background: var(--font_main, #212121);
}

.ev_legend_item .legend-dot.dot_sub {
    background: var(--gray_text, #8E8E8E);
}

.ev_legend_item strong {
    color: var(--c-el_point);
    font-weight: 700;
}

/* ----- 지역별 투표율 (우측) ----- */
.ev_regional {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ev_section_label {
    font-weight: 700;
}

.ev_regional_top {
    font-size: 1.7rem;
    color: #212121;
    margin-bottom: 0;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ev_source_txt {
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
    white-space: nowrap;
}

/* 지역 카드 슬라이더 래퍼 */
.ev_region_slider_wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ev_region_track {
    display: flex;
    gap: 8px;
    transition: transform 0.35s var(--ease-ui);
}

/* 지역 카드 한 페이지 = 슬라이드 단위 */
.ev_region_slide {
    flex: 0 0 100%;
    display: flex;
    gap: 8px;
}

/* 최고/최저 카드 border (PC+모바일 공통) */
.ev_region_card.card_high {
    border-color: #5A22F0;
    box-shadow: inset 0 0 0 1px #5A22F0;
}

.ev_region_card.card_low {
    border-color: #B69EF2;
    box-shadow: inset 0 0 0 1px #B69EF2;
}

/* 지역 카드 공통 */
.ev_region_card {
    flex: 1;
    min-width: 0;
    background: var(--c-bg);
    border: 1px solid var(--c-el_border);
    border-radius: 5px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--t-fast) var(--ease-ui), min-height var(--t-fast) var(--ease-ui);
    min-height: 123px;
}

/* 카드 뱃지 헤더 */
.ev_card_badge {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.ev_card_badge.badge_high {
    background: linear-gradient(to left, #A020F0, #5A22F0);
}

.ev_card_badge.badge_low {
    background: var(--c-el_chart);
}

/* 카드 바디 */
.ev_card_body {
    padding: 10px 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
}

.ev_card_region {
    font-size: 1.4rem;
    font-weight: 700;
    color: #212121;
    line-height: 1.4;
}

.ev_card_pct {
    font-size: 2.0rem;
    font-weight: 700;
    color: var(--c-el_point);
    line-height: 1.2;
}

.ev_card_count {
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
    line-height: 1.4;
}

/* PC에서 카드 두 줄 레이아웃 */
.ev_region_grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ev_region_row {
    display: flex;
    gap: 8px;
    flex: 1;
}

.ev_region_row .ev_region_card {
    flex: 1;
}

.ev_pagination {
    display: none;
}

.ev_page_btn {
    width: 35px;
    height: 35px;
    border-radius: 100px;
    border: 1px solid var(--c-el_border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui);
    flex-shrink: 0;
}

.ev_page_btn:hover {
    background: var(--c-el_bg);
    border-color: var(--c-el_point);
}

.ev_page_btn svg {
    width: 7px;
    height: 12px;
    stroke: var(--c-el_point);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ev_page_info {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--c-el_point);
    min-width: 36px;
    text-align: center;
}

.ev_page_info .ev_page_total {
    color: var(--c-el_chart);
}

/* "지역별 투표율 전체 보기" 버튼 */
#evMoreBtnWrap {
    display: none;
}

.ev_more_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    border: 1px solid var(--c-el_border);
    border-radius: 8px;
    background: var(--c-bg);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--c-el_text);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-ui), box-shadow var(--t-fast) var(--ease-ui);
    margin-top: 10px;
}

.ev_more_btn:hover {
    background: var(--c-el_bg);
    /*box-shadow: var(--shadow-sm);*/
}

.ev_more_btn svg {
    width: 17px;
    height: 17px;
    /*stroke: var(--c-el_point);*/
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-top: 1px;
}

@media (max-width: 920px) {
    .ev_page_btn {
        width: 24px;
        height: 24px;
    }

    .ev_page_btn img {
        width: 18px;
    }

    .ev_pagination .btn_prev img {
        transform: rotate(180deg)
    }

    .elect_vote_header .ev_spec_btn {
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .elect_vote_header .ev_title .ic_electmark {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }

    .elect_vote_header .ev_title {
        font-size: 18px;
    }
}

/* ============================================
    ## 지역별 전체보기 그리드 (open 상태)
============================================ */
/* "전체보기" 버튼 — 열린 상태 */
.ev_more_btn.is_open {
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border, #DDD5F8);
    background: #fff;
    border-bottom: 0;
    margin-bottom: 0 !important;
}

.ev_more_btn.is_open .ev_more_arrow svg {
    transform: rotate(180deg);
}
.ev_more_btn .ev_more_arrow {
    transition: transform var(--t-fast) var(--ease-ui);
    display: inline-flex;
    align-items: center;
}
.ev_more_btn .ev_more_arrow::before {
    content: "지역별 투표율 전체 보기";
    margin-right: 5px;
}
.ev_more_btn.is_open .ev_more_arrow::before {content: "지역별 투표율 전체 접기";}

/* 전체 그리드 래퍼 — 기본 숨김 */
.ev_all_grid_wrap {
    display: none;
    padding: 0 20px 20px;
}

.ev_all_grid_wrap.is_open {
    display: none;
}

/* 구분선 */
.ev_all_divider {
    height: 1px;
    background: var(--c-el_border);
    margin: 0 0 16px;
}

/* PC: 5열 × n행 그리드 */
.ev_all_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

/* Tablet PC */
@media (min-width: 910px) and (max-width: 1246px) {
    .ev_national_wr {
        flex: 0 0 215px;
    }

    .ev_card_pct {
        font-size: 1.8rem;
    }
}

/* 모바일: 5열 유지 (카드 작아짐) */
@media (max-width: 920px) {
    #evMoreBtnWrap {
        display: block;
    }

    .ev_all_grid_wrap {
        padding: 0 15px 15px;
    }

    .ev_all_grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .ev_all_grid .ev_region_card {
        min-height: 93px;
    }

    /* 모바일 전체보기 카드 — 더 작게 */
    .ev_all_grid .ev_region_card .ev_card_badge {
        height: 22px;
        font-size: 1.1rem;
    }

    .ev_region_card.card_high,
    .ev_region_card.card_low {
        background: var(--c-bg) !important;
    }

    .ev_region_card.card_high .ev_card_body,
    .ev_region_card.card_low .ev_card_body {
        background: var(--c-bg) !important;
    }

    .ev_all_grid .ev_card_body {
        padding: 6px 2px 8px;
        background: var(--c-el_bg);
    }

    .ev_all_grid .ev_card_region {
        font-size: 1.2rem;
    }

    .ev_all_grid .ev_card_pct {
        font-size: 1.4rem;
    }

    .ev_all_grid .ev_card_count {
        font-size: 1.0rem;
    }

    .ev_all_grid_wrap.is_open {
        display: block;
        border-radius: 0 0 8px 8px;
        border: 1px solid var(--c-el_border);
        background: var(--c-bg);
        padding-top: 15px;
    }

    /* 모바일: "전체보기" 버튼은 하단 고정 */
    .ev_more_btn {
        border-radius: 5px;
        margin-top: 0;
        border-top: 1px solid var(--c-el_border);
        border-radius: 8px;
        border: 1px solid var(--c-el_border);
        background: var(--c-bg);
    }

    .ev_more_btn.is_open {
        border-radius: 8px 8px 0 0;
    }
}

/* ============================================
    ## Mobile 전용
============================================ */
@media (max-width: 920px) {
    .elect_vote_wrap {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        border-top: 0;
        margin-top: -16px;
        border-bottom: 0;
    }

    .elect_vote_header {
        padding: 0 15px;
        height: 44px;
        border-bottom: 0;
    }

    .elect_vote_header .ev_title {
        font-size: 1.7rem;
        position: static;
        left: auto;
        transform: none;
    }

    .elect_vote_body {
        flex-direction: column;
        padding: 15px 15px 15px;
        gap: 0;
        background: var(--c-el_gray_box);
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* 모바일: 전국 투표율 래퍼 */
    .ev_national_wr {
        display: none;
    }

    /* 모바일: 전국 투표율 카드 */
    .ev_national {
        flex: none;
        width: 100%;
        border-radius: 8px 8px 0 0;
        border-bottom: 0;
        padding: 14px 15px 0;
        background: #fff;
        border: none;
    }

    /* 모바일 전용 래퍼 */
    .ev_mobile_only {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* 모바일: 전국투표율 + 소스텍스트 한 줄 */
    .ev_mobile_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--c-el_border);
        padding-bottom: 8px;
    }

    .ev_mobile_header .ev_national_label {
        margin-bottom: 0;
    }

    .ev_mobile_header .ev_source_txt {
        text-align: right;
    }

    /* 모바일: 도넛 + 지역카드 가로 배치 */
    .ev_mobile_top {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .ev_donut_wrap {
        flex: 0 0 150px;
        width: 150px;
        max-width: 150px;
        padding: 0;
        align-items: flex-start;
    }

    .ev_donut_svg {
        width: 150px;
        height: 150px;
    }

    .ev_donut_svg_wrap {
        width: 150px;
        height: 150px;
    }

    .ev_donut_count {
        margin-top: 8px;
        display: block;
        text-align: center;
        width: 150px;
        font-size: 13px;
    }

    .ev_donut_bg {
        stroke: var(--c-bg);
    }

    /* 모바일 우측: 최고/최저/일반 카드 2x2 */
    .ev_mobile_cards {
        flex: 1 1 0%;
        min-width: 0;
        width: 0;
        /* flex:1과 함께 써서 도넛 145px 제외한 나머지로 정확히 제한 */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-top: 4px;
        box-sizing: border-box;
    }

    #evMobileSlider {
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    #evMobileTrack {
        width: 100%;
        box-sizing: border-box;
    }

    #evMobileTrack>div {
        flex: 0 0 100%;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .ev_mobile_card_row {
        display: flex;
        gap: 8px;
    }

    .ev_mobile_card_row .ev_region_card {
        flex: 1;
        min-width: 0;
        /* 카드 텍스트 overflow 방지 */
        min-height: 102px !important;
    }

    .ev_mobile_card_row .active .ev_card_body {
        background: #fff !important;
    }

    .ev_card_pct {
        font-size: 1.6rem;
    }

    .ev_card_region {
        font-size: 1.3rem;
    }

    .ev_card_count {
        font-size: 1.0rem;
    }

    .ev_card_badge {
        height: 25px;
        font-size: 1.3rem;
    }

    .card_high {
        background: #fff !important;
    }

    .card_low {
        background: #fff !important;
    }

    /* 모바일 범례 */
    .ev_legend {
        padding-top: 16px;
        margin-top: 10px;
        gap: 5px;
    }

    .ev_legend_item {
        align-items: flex-start;
    }

    .ev_legend_item .legend-dot {
        margin-top: 5px;
        flex-shrink: 0;
    }

    .ev_legend_item:first-child .ev_legend_txt {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .ev_legend_item:first-child .ev_legend_txt strong {
        display: block;
    }

    /* 모바일: 페이지네이션 */
    .ev_pagination {
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 5px !important;
        justify-content: flex-end;
    }

    /* 모바일: "전체 보기" 버튼 */
    .ev_more_btn {
        margin: 16px 0 0 0;
        border-radius: 8px;
        background: #fff;
        border: 1px solid var(--c-el_border);
    }

    /* PC전용 감추기 */
    .ev_regional {
        display: none;
    }

    /* 모바일 전용 영역 표시 */
    .ev_mobile_only {
        display: flex !important;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }
}

/* PC에서 모바일 전용 감추기 */
.ev_mobile_only {
    display: none;
}

@media (min-width: 920px) {
    .ev_mobile_wrap {
        display: none !important;
    }
}

/* ============================================
    ## 지도
============================================ */
.map_wrapper {padding: 0 20px 20px 20px;}
.map_box {
    overflow: hidden;
    border: 1px solid var(--c-el_border);
    border-radius: 5px;
}

/* 지도 버튼 */
.map-btn {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 14px 0;
    background-color: var(--c-el_bg);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--c-el_text);
    line-height: 1;
}
.map-btn span {opacity: 0.6;}
.map-btn.active span {opacity: 1;}
.map-btn .map-btn-txt::before {content: "전국 지도 보기";}
.map-btn.active .map-btn-txt::before {content: "전국 지도 접기";}
.ic_dropdown_up {
    width: 16px;
    height: 16px;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_dropdown_up.svg);
    background-position: center;
    background-size: 42%;
    background-repeat: no-repeat;
    background-color: var(--c-el_border);
    border-radius: 100%;
    transform: rotate(180deg);
    opacity: 0.6;
}
.map-btn.active .ic_dropdown_up {
    transform: rotate(0deg);
    opacity: 1;
}

/* ── 최상단 드롭다운 바 ── */
.top-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--header-h);
    gap: 6px;
  }
.top-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid var(--accent);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    background: var(--badge-bg);
}
.top-dropdown svg {
    width: 14px;
    height: 14px;
}

/* ── 탭 ── */
.map-panel.active {
    display: block;
    border-top: 1px solid var(--c-el_border);
}
.map-panel .tab_btn_box {background-color: var(--c-bg);}
.map_box .tab-nav {
    max-width: 400px;
    margin: 0 auto;
}
.map_box .tab-label {
    flex-basis: 50%;
    min-width: 50%;
    background-color: transparent;
}
.map_box .tab-label{border-top: 0;}
.map_box .tab-label::before {
    top: auto;
    bottom: 0;
}
.map-panel .tab_btn_box::after {content: none;}
.panel-basic .el-drowpdown-wrap .el-dropdown.region-select {display: none;}

/* 라디오 체크 시 탭/패널 활성화 */
#tab-metro-map:checked~.tab_btn_box .tab-nav .label-metro-map,
#tab-basic-map:checked~.tab_btn_box .tab-nav .label-basic-map {
    color: var(--c-el_point);
    font-weight: 700;
}
#tab-metro-map:checked~.tab_btn_box .tab-nav .label-metro-map,
#tab-basic-map:checked~.tab_btn_box .tab-nav .label-basic-map {
    background-color: var(--c-bg);
}
#tab-metro-map:checked~.tab_btn_box .tab-nav .label-metro-map::before,
#tab-basic-map:checked~.tab_btn_box .tab-nav .label-basic-map::before {
    width: 100%;
}
#tab-metro-map:checked~.tab_btn_box .panel-metro-map,
#tab-basic-map:checked~.tab_btn_box .panel-basic-map {
    display: block;
}

/* ── 레이아웃 컨테이너 ── */
.layout {
    display: flex;
    /* height: calc(100vh - var(--header-h) - var(--tab-h)); */
    height: 660px;
    position: relative;
    border-top: 1px solid var(--c-el_border);
}
.layout .top_area {display: none;}
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s;
}
.overlay.show {
    display: block;
    opacity: 1;
}

/* ── 지도 영역 ── */
.map-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-el_gray_box);
}
.map_iframe {
    border: none;
    display: block;
    width: 100%;
    height: 100%;
}
.map_iframe iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── 득표율차 ── */
.info-btn-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    cursor: pointer;
}
.info-btn .ic_info {
    overflow: hidden;
    width: 20px;
    height: 20px;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_info.svg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: var(--c-bg);
    border-radius: 100%;
    box-shadow: 0 2px 8px rgba(82,64,217,0.4);
}

/* ══ 통합 후보 패널 (모바일=바텀시트 / PC=사이드패널) ══ */
/* 공통 기본값 */
.candidate-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--c-bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 30px rgba(90,34,240,0.15);
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    overflow: hidden;
    /* 닫힌 상태: 아래로 숨김 */
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.34, 1.25, 0.64, 1);
}
.candidate-panel.open {transform: translateY(0);}

/* PC에서 사이드 패널로 재정의 */
@media (min-width: 768px) {
    .candidate-panel {
        position: static;
        transform: none !important;
        border-radius: 0;
        box-shadow: none;
        border-left: 1px solid var(--border);
        width: var(--panel-w);
        max-height: none;
        height: 100%;
        overflow: visible;
        transition: none;
    }
    /* .candidate-panel .el-dropdown__panel {
        position: fixed;
        top: auto;
        z-index: 500;
    } */
}

/* 드래그 핸들 (모바일에만 표시) */
.panel-handle-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background-color: var(--c-bg);
}
@media (min-width: 768px) {
    .panel-handle-bar {display: none;}
}
.panel-handle {
    width: 38px; height: 4px;
    background: var(--c-el_gray_border);
    border-radius: 2px;
}
.panel-close-btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 10px 0 10px;
}
.panel-close-btn .panel-close {
    position: relative;
    width: 30px;
    height: 30px;
    border: none;
    background-color: var(--c-el_gray_box);
    border-radius: 100%;
    transition: background 0.15s;
}
.panel-close-btn .ic_panel_close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_close.svg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
.panel-close-btn:hover .panel-close {background: var(--c-el_gray_border);}

/* 요약 카드 */
.summary-card {
    background: var(--c-el_gray_box);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}
.total-row {
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: 600;
}
.total-count {
    margin-left: 5px;
    color: var(--c-el_point);
}

/* 전체 비율 바 */
.ratio-bar {
    display: flex;
    height: 14px;
    margin-bottom: 20px;
    background-color: var(--c-bg);
    border-radius: 100px;
    overflow: hidden;
}
.ratio-bar .seg {
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
}

/* 정당별 바 리스트 */
.summary-party-list {
display: flex;
flex-direction: column;
gap: 11px;
}
.party-row {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: 14px;
    font-size: 1.4rem;
}
.party-name {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.party-color {
    overflow: hidden;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--c-bg);
}
.party-bar-track {
    height: 6px;
    background-color: var(--c-bg);
}
.party-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
}
.party-count {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* 지역별 섹션 */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 1.6rem;
    gap: 5px;
}
.section-header .section-sub {
    font-size: 1.1rem;
    color: var(--c-el_gray_text);
}
.region-table-wrap {
    overflow: hidden;
    overflow-x: auto;
    background-color: var(--c-bg);
    border: 1px solid var(--c-el_gray_border);
    border-radius: 5px;
    max-height: 320px;
}
.region-table {
    width: 100%;
    border-collapse: collapse;
}
.region-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--c-el_gray_box);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--c-el_gray_dark);
    text-align: right;
    padding: 10px 20px;
    border-bottom: 1px solid var(--c-el_gray_border);
    letter-spacing: 0.03em;
}
.region-table thead th:first-child {text-align: left;}
.region-table tbody tr {
    border-bottom: 1px solid var(--c-el_gray_border);
    transition: background 0.12s;
}
.region-table tbody tr:last-child {border-bottom: none;}
.region-table tbody tr:hover {background-color: var(--c-el_gray_box);}
.region-table tbody td {
    padding: 10px 20px;
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
    vertical-align: middle;
    text-align: right;
}
.region-table tbody td:first-child {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--c-bg-w);
    text-align: left;
}
.td-region-cell {
    display: flex;
    align-items: center;
    gap: 5px;
}
.region-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.td-rate {
    font-variant-numeric: tabular-nums;
}

/* ─── s: 정당 색상 클래스 ─── */
.ratio-bar .seg,
.summary-party-list .party-bar-fill,
.summary-party-list .party-color,
.region-table-wrap .region-dot {
    opacity: 0.6;
}

/* 더불어민주당 */
.ratio-bar .candi-party-de,
.summary-party-list .candi-party-de .party-bar-fill,
.summary-party-list .candi-party-de .party-color,
.region-table-wrap .candi-party-de .region-dot {
    background-color: var(--party-de-map);
}

/* 국민의힘 */
.ratio-bar .candi-party-pp,
.summary-party-list .candi-party-pp .party-bar-fill,
.summary-party-list .candi-party-pp .party-color,
.region-table-wrap .candi-party-pp .region-dot {
    background-color: var(--party-pp-map);
}

/* 조국혁신당 */
.ratio-bar .candi-party-rk,
.summary-party-list .candi-party-rk .party-bar-fill,
.summary-party-list .candi-party-rk .party-color,
.region-table-wrap .candi-party-rk .region-dot {
    background-color: var(--party-rk);
}

/* 개혁신당 */
.ratio-bar .candi-party-rp,
.summary-party-list .candi-party-rp .party-bar-fill,
.summary-party-list .candi-party-rp .party-color,
.region-table-wrap .candi-party-rp .region-dot {
    background-color: var(--party-rp);
}

/* 진보당 */
.ratio-bar .candi-party-ad,
.summary-party-list .candi-party-ad .party-bar-fill,
.summary-party-list .candi-party-ad .party-color,
.region-table-wrap .candi-party-ad .region-dot {
    background-color: var(--party-ad);
}

/* 기본소득당 */
.ratio-bar .candi-party-bi,
.summary-party-list .candi-party-bi .party-bar-fill,
.summary-party-list .candi-party-bi .party-color,
.region-table-wrap .candi-party-bi .region-dot {
    background-color: var(--party-bi);
}

/* 사회민주당 */
.ratio-bar .candi-party-sm,
.summary-party-list .candi-party-sm .party-bar-fill,
.summary-party-list .candi-party-sm .party-color,
.region-table-wrap .candi-party-sm .region-dot {
    background-color: var(--party-sm);
}

/* 무소속 */
.ratio-bar .candi-party-etc,
.summary-party-list .candi-party-etc .party-bar-fill,
.summary-party-list .candi-party-etc .party-color,
.region-table-wrap .candi-party-etc .region-dot {
    background-color: var(--party-ad);
    opacity: 0.6;
}

/* 기타 */
.ratio-bar .candi-party-none,
.summary-party-list .candi-party-none .party-bar-fill,
.summary-party-list .candi-party-none .party-color,
.region-table-wrap .candi-party-none .region-dot {background-color: var(--party-none);}
/* ─── //e: 정당 색상 클래스 ─── */

/* 패널 스크롤 바디 - close/open */
.candidate-panel .candi_cards {display: none;}
.panel-placeholder,
.panel-placeholder .candi_cards {display: block;}
.candidate-panel.open .candidate-panel .candi_card {display: block;}
.candidate-panel.open .panel-placeholder,
.candidate-panel.open .panel-placeholder .candi_cards {display: none;}

/* 패널 스크롤 바디 */
.panel-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 30px;
    padding-bottom: env(safe-area-inset-bottom + 16px);
    scrollbar-width: thin;
    scrollbar-color: var(--c-el_border) transparent;
}
.panel-body::-webkit-scrollbar {width: 4px;}
.panel-body::-webkit-scrollbar-track {background: transparent;}
.panel-body::-webkit-scrollbar-thumb {
    background: var(--c-el_border);
    border-radius: 4px;
}
.panel-body .candi_cards {margin-top: 30px;}
.candidate-panel.open .candi_cards {display: block;}
.panel-body .card_box {
    width: 100%;
    border: 0;
}
.panel-body .card-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: transparent;
    border-bottom: 0;
    padding: 0;
}
.panel-body .card-head .card-region {
    font-size: 2.2rem;
    padding-right: 0;
}
.panel-body .card-head .card-progress {
    overflow: hidden;
    flex-basis: auto;
    width: 100%;
    margin: 10px 0;
    padding: 20px;
    background-color: var(--c-el_bg);
    border-radius: 8px;
    text-align: left;
    font-size: 1.3rem;
    color: var(--c-el_text);
}
.panel-body .card-head .card-progress strong {
    display: block;
    margin: 2px 0 8px;
    font-size: 2rem;
    color: var(--c-el_text);
}
.panel-body .card-head .candi-bar {
    height: 4px;
    margin-top: 0;
    background-color: var(--c-el_border);
}
.panel-body .card-head .bar-fill {background-color: var(--c-el_point);}
.panel-body .candidates {
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--c-el_border);
    border-radius: 8px;
}
.panel-body .candidates .candidate+.candidate {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}
.panel-body .candidates .candidate {display: block;}
.panel-body .candidates .cand-body {
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}
.panel-body .candidates .cand-num {
    margin-right: 10px;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--c-el_gray_text);
}
.panel-body .candidates .avatar {flex: 0 0 60px;}
.panel-body .candidates .candidate.candi-total-num {
    position: relative;
    margin: 30px 0;
    text-align: center;
    font-size: 1.2rem;
    color: var(--c-el_gray_dark);
    border-top: 1px dashed var(--c-el_gray_border);
}
.candi-total-num .total-num-txt {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--c-el_gray_box);
    border-radius: 100px;
}
.panel-body .candidates .cand-txt .badge {
    font-size: 1.2rem;
    font-weight: 600;
}
.panel-body .candidates .cand-party {
    font-size: 1.2rem;
    margin: 3px 0 1px;
}
.panel-body .candidates .cand-name {
    margin-top: 0;
    font-size: 1.6rem;
}

/* 패널 드롭다운 */
.panel-body .el-dropdown.is-open .el-dropdown__panel {
    top: 56px;
    border-radius: 8px;
    opacity: 100%;
}
.panel-city.panel-body .el-dropdown.is-open .el-dropdown__panel {width: calc(200% + 10px);}
.panel-city.panel-body .el-dropdown:nth-child(2).is-open .el-dropdown__panel {
    left: auto;
    right: 0;
}
.panel-body .el-drowpdown-wrap {
    display: flex;
    gap: 10px;
    max-width: 100%;
}
.panel-body .el-drowpdown-wrap .el-dropdown__trigger {
    padding: 10px;
    font-size: 1.4rem;
    border-radius: 8px;
    gap: 0;
}
.panel-body .el-drowpdown-wrap .el-dropdown__label {
    text-align: center;
    padding-left: 10px;
}

/* 지도 득표율차 */
.info-box {
    position: absolute;
    bottom: 0;
    left: 0;
}
.info-card {
    width: 190px;
    background: var(--c-bg);
    border: 1px solid var(--c-el_gray_border);
    border-radius: 8px;
    padding: 20px 15px 15px 15px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.info-btn-wrap + .info-card-wrap {display: none;}
.info-btn-wrap + .info-card-wrap.active {
    display: block;
    position: absolute;
    bottom: 60px;
    left: 20px;
    padding-bottom: 16px;
    padding-bottom: var(--safe-bottom);
    z-index: 1002;
}
.info-card-wrap.active .info-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 카드 헤더 */
    .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.card-title {
    font-size: 1.3rem;
    font-weight: 700;
}
.info-card .panel-close {
    width: 24px;
    height: 24px;
}

/* 바 그룹 */
.info-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}
.info-bar-row {
    display: flex;
    height: 8px;
    border-radius: 100px;
    overflow: hidden;
}
.info-bar-seg {
    flex: 1;
    transition: filter 0.2s;
}
.info-bar-row:hover .info-bar-seg {
    filter: brightness(0.93);
}
.info-bar-seg:nth-child(1) {opacity: 0.2;}
.info-bar-seg:nth-child(2) {opacity: 0.4;}
.info-bar-seg:nth-child(3) {opacity: 0.6;}

/* 범례 레이블 */
.range-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}
.range-labels span {
    font-size: 1.1rem;
    color: var(--c-el_gray_text);
    font-weight: 500;
}

/* 구분선 */
.divider {
    height: 1px;
    background: var(--c-el_gray_border);
    margin: 6px 0 8px 0;
}

/* 정당 범례 */
    .info-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.info-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1.1rem;
    font-weight: 500;
    white-space: nowrap;
}
.info-legend-item .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--c-el_gray_box);
}

/* ─── s: 정당 색상 클래스 ─── */
/* 더불어민주당 */
.info-card .candi-party-de .info-bar-seg,
.info-card .candi-party-de .dot {background-color: var(--party-de-map);}

/* 국민의힘 */
.info-card .candi-party-pp .info-bar-seg,
.info-card .candi-party-pp .dot {background-color: var(--party-pp-map);}

/* 조국혁신당 */
.info-card .candi-party-rk .info-bar-seg,
.info-card .candi-party-rk .dot {background-color: var(--party-rk);}

/* 개혁신당 */
.info-card .candi-party-rp .info-bar-seg,
.info-card .candi-party-rp .dot {background-color: var(--party-rp);}

/* 진보당 */
.info-card .candi-party-ad .info-bar-seg,
.info-card .candi-party-ad .dot {background-color: var(--party-ad);}

/* 기본소득당 */
.info-card .candi-party-ad .info-bar-seg,
.info-card .candi-party-ad .dot {background-color: var(--party-bi);}

/* 사회민주당 */
.info-card .candi-party-ad .info-bar-seg,
.info-card .candi-party-ad .dot {background-color: var(--party-sm);}

/* 기타 */
.info-card .candi-party-etc .info-bar-seg,
.info-card .candi-party-etc .dot {background-color: var(--party-etc);}

/* 무소속 */
.info-card .candi-party-none .info-bar-seg,
.info-card .candi-party-none .dot {background-color: var(--party-none);}
/* ─── //e: 정당 색상 클래스 ─── */

/* 지도영역 : 툴팁 */
.map-box {position: relative;}
.tool-tip .info-box {
    display: none;
    position: static;
}
.tool-tip .info-box.is-open {display: block;}
.tool-tip .info-box.is-open .info-card {opacity: 1;}
.tool-tip .info-card {
    padding: 15px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.18);
}
.tool-tip .card-header {
    margin-bottom: 0;
    word-break: break-all;
}
.tool-tip .info-rank {
    display: grid;
    gap: 5px;
}
.tool-tip .info-rank-item {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
}
.tool-tip .info-rank-item:first-child {color: var(--c-el_point);}
.tool-tip .info-rank-num {
    text-align: right;
    font-weight: 700;
}
.tool-tip .info-legend {
    display: grid;
    gap: 5px;
}
.tool-tip .info-legend-item {
    justify-content: space-between;
}
.tool-tip .info-rank-name {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tool-tip .info-box-city .info-rank-num {color: var(--c-el_point);}

/* ev_more_arrow circle — 인라인 fill 제거 후 CSS 관리 */
.ev_more_arrow circle {
    fill: var(--c-el_badge);
}

/* 지도영역 : 전국지도 버튼 */
.map-btn-box {
    position: absolute;
    top: 20px;
    left: 20px;
}
.map-all-btn {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    border: none;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 8px 22px 10px 16px;
    outline: none;
}
.btn-glass {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: var(--c-el_point);
    box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.65);
    box-shadow: var(--shadow-glass-hover), inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}
.map-all-btn:active {
    transform: scale(0.96);
    /* 클릭 피드백 */
}
.map-all-btn .ic_arrow_icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_arrow_p.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
}

/* 클릭 ripple */
.map-all-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background 0.15s;
}
.map-all-btn:active::after {
    background: rgba(255, 255, 255, 0.25);
}
.map-all-btn:active {
    transform: scale(0.96);
}

/* ============================================
    ## 반응형
============================================ */
/* Tablet */
@media (max-width: 1080px) {
    /* topbar */
    .elect9_box {margin-bottom: 20px;}
    .list .elect9_box {margin-bottom: 15px;}
    .elect9_box .set_inner {border: none;}
    .topbar-inner {
        justify-content: flex-start;
        padding: 0 15px 10px;
    }
    .topbar-right {
        top: 0;
        right: 15px;
    }
    .turnout {display: none;}
    .elect9_box .ic_electmark {
        width: 18px;
        height: 18px;
        margin-bottom: 0;
    }
    .brand-title {font-size: 1.9rem;}
    .topbar-right {
        top: -3px;
        right: 15px;
    }
    .btn-special {padding: 8px 15px 8px 18px;}

    /* 선거판 */
    .elect_box_wrap {padding: 15px;}
    .section-head {padding: 0 0 6px 0;}
    .section_cards {
        border-radius: 0 0 8px 8px;
        border: 1px solid var(--c-el_border);
    }

    /* 탭 */
    .tab-nav {
        overflow-x: scroll;
        scrollbar-width: none;
    }
    .tab-nav::-webkit-scrollbar {display: none;}
    .tab-label {
        border-top: 0;
    }
    .tab-panel {padding: 15px;}

    /* 지도 */
    .top_area {padding: 0 0 10px 0;}
    .candidate-panel {width: 40%;}
    .panel-body .candidates .cand-num {margin-right: 0;}
    .panel-body .candidates .cand-stats {flex-basis: auto;}
    .section-header {align-items: flex-start;}
    .party-row {grid-template-columns: 100px 1fr 1fr;}
}

/* MOBILE */
@media (max-width: 767px) {
    /* 탭 */
    .tab-label {
        flex-basis: 40%;
        min-width: 40%;
        border-top: 0;
    }
    .summary-title {font-size: 1.5rem;}
    .tab_btn_box::after {width: 60px;}

    /* 패널 */
    .top_area {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 15px;
    }
    .summary {
        margin-top: 0;
        gap: 5px;
    }
    .party-list {
        padding-left: 0;
        margin-left: 0;
    }
    .party-list::before {content: none;}

    /* 드롭다운 버튼 */
    .el-drowpdown-wrap {max-width: 100%;}
    .el-dropdown__trigger {
        font-size: 1.4rem;
        padding: 9px 15px;
    }
    .el-dropdown__label {
        padding-left: 10px;
        text-align: center;
    }
    .el-dropdown__panel {top: 48px;}
    .panel-basic .el-drowpdown-wrap {
        display: grid;
        grid-auto-flow: column;
        gap: 10px;
    }
    .panel-basic .el-drowpdown-wrap .el-dropdown.region-select {display: block;}
    .panel-basic .el-dropdown.is-open .el-dropdown__panel {width: calc(200% + 10px);}
    .panel-basic .el-dropdown.region-select.is-open .el-dropdown__panel {
        left: auto;
        right: 0;
    }

    /* placeholder는 PC에서만 표시 */
    .candidate-panel.open .panel-placeholder {display: none;}

    /* 지도 */
    .map-panel .tab_btn_box {background-color: var(--c-el_bg);}
    .map-btn {background-color: var(--c-bg);}
    .panel-body {
        overflow-y: auto;
        overflow-x: visible;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }
    .map_box .tab-nav {max-width: 100%;}
    .map_box .tab-label::before {
        top: 0;
        bottom: auto;
    }
    .layout {
        flex-direction: column;
        border-top: 0;
    }
    .layout .top_area {
        display: block;
        padding: 10px;
        border-bottom: 1px solid var(--c-el_border);
    }
    .layout .top_area .summary {
        align-items: flex-start;
        flex-direction: column;
    }
    .panel-body .card-head {
        flex-direction: row;
        align-items: flex-end;
        border-bottom: 1px solid var(--c-el_border);
        padding-bottom: 10px;
    }
    .panel-body .card-head .card-region {font-size: 2rem;}
    .panel-body .card-head .card-progress {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 30%;
        margin: 0;
        padding: 0 0 0 15px;
        background-color: transparent;
        border-radius: 0;
        text-align: right;
        font-size: 1.4rem;
        color: var(--c-el_gray_text);
    }
    .panel-body .card-head .card-progress strong {
        margin: 0 0 0 5px;
        font-size: 1.4rem;
        color: var(--c-el_point);
    }
    .panel-body .card-head .candi-bar {display: none;}
    .panel-body .candidates {
        padding: 20px 0 0 0;
        border: 0;
    }
    .panel-body .el-drowpdown-wrap {
        margin-top: 30px;
        padding: 0 15px;
    }
    .panel-body .el-dropdown.is-open .el-dropdown__panel {
        position: static;
        width: 100%;
        transform: translateX(0);
        margin-top: 10px;
        opacity: 100%;
        border-radius: 5px;
        box-shadow: none;
    }
    .panel-body .el-dropdown.is-open .el-dropdown__list {
        max-height: 25vh;
    }
    .panel-city.panel-body .el-dropdown:nth-child(2).is-open .el-dropdown__panel {
        transform: translateX(-51%);
    }
    .candidate-panel {
        width: 100%;
        z-index: 1002;
        box-shadow: none;
        padding-bottom: calc(var(--safe-bottom) + 16px);
    }
    .panel-body .candidates .cand-stats {flex-basis: 40%;}
    .panel-body .candi_cards {
        margin-top: 15px;
        padding: 15px;
    }
    .info-btn-wrap + .info-card-wrap.active{
        position: fixed;
        bottom: 0;
        left: 50%;
        right: 0;
        transform: translateX(-50%);
        padding-bottom: calc(var(--safe-bottom) + 16px);
        width: 90%;
        max-width: 360px;
    }
    .info-card {
        width: 100%;
        padding: 40px 30px 30px 30px;
        border-radius: 20px;
    }
    .info-card .card-title {font-size: 2rem;}
    .info-card .panel-close-btn .panel-close {
        width: 30px;
        height: 30px;
    }
    .info-bars {gap: 8px;}
    .info-bar-row {height: 15px;}
    .info-legend {gap: 4px 15px;}
    .range-labels span,
    .info-legend-item {font-size: 1.3rem;}
    .info-legend-item .dot {
        width: 6px;
        height: 6px;
    }
    .divider {margin: 10px 0 12px 0;}
    .tool-tip .info-box,
    .tool-tip .info-box.is-open {display: none;}

    /* 지도영역 : 전국지도 버튼 */
    .map-btn-box {
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
    }
    .map-all-btn {font-size: 1.3rem;}
    .map-all-btn .ic_arrow_icon {
        width: 18px;
        height: 18px;
    }
}

/* MOBILE medium */
@media (max-width: 480px) {
    /* 탭 */
    .tab-label {
        flex-basis: 60%;
        min-width: 60%;
        border-top: 0;
    }
    .tab_btn_box::after {width: 48px;}
    .panel-body .candidates .cand-stats {flex-basis: auto;}
}

/* MOBILE small */
@media (max-width: 360px) {
    
}

/* ============================================
    s: 260513 당선자 공지 CSS 추가 및 추가 수정 요청 사항 반영
============================================ */
/* ── 지역 선택 pill 버튼 ── */
.top_notice_box .region-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 0 0 0;
    cursor: grab;
}

.top_notice_box .region-tabs:active {
    cursor: grabbing;
}

.top_notice_box .region-tabs::-webkit-scrollbar {
    display: none;
}

.top_notice_box .region-btn {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 100px;
    border: 1px solid var(--c-el_gray_border);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--c-el_gray_dark);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
}

.top_notice_box .region-btn.active {
    background: var(--c-el_point);
    border-color: var(--c-el_point);
    color: var(--c-bg);
    font-weight: 700;
}

.top_notice_box .region-btn:hover:not(.active) {
    background-color: var(--c-el_badge);
    border-color: var(--c-el_border);
    color: var(--c-el_point);
}

@media (max-width: 767px) {
    .top_notice_box .region-tabs {
        padding-top: 0;
        padding-bottom: 16px;
    }
}

/* ── Reset ── */
.top_notice_box .elect_notice_wrap *,
.top_notice_box .elect_notice_wrap *::before,
.top_notice_box .elect_notice_wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.top_notice_box .elect_notice_wrap button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.top_notice_box .elect_notice_wrap a {
    text-decoration: none;
}

/* ── 전체 래퍼 ── */
.top_notice_box .elect_notice_wrap {
    width: 100%;
    background: #fff;
    border: 1px solid var(--c-el_gray_border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* ── 헤더 ── */
.top_notice_box .en_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--c-el_gray_border);
}

.top_notice_box .en_title {
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c-el_point);
    gap: 4px;
}

.top_notice_box .en_spec_btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--c-el_point);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 100px;
    white-space: nowrap;
}

.top_notice_box .en_spec_btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── 탭바 ── */
.top_notice_box .en_tab_bar {
    display: flex;
    border-bottom: 1px solid var(--c-el_gray_border);
    background: #fff;
}

.top_notice_box .en_tab {
    flex: 1;
    padding: 10px 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--c-el_gray_text);
    position: relative;
    transition: color 0.2s;
}

.top_notice_box .en_tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-el_point);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.top_notice_box .en_tab.active {
    color: var(--c-el_gray_dark);
    font-weight: 700;
}

.top_notice_box .en_tab.active::after {
    transform: scaleX(1);
}

/* ── 본문 ── */
.top_notice_box .en_body {
    padding: 12px 14px;
    background: #fff;
}

/* ── 서브탭 (시·도지사 / 구·시·군의장 …) ── */
.top_notice_box .en_sub_tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-el_gray_border);
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.top_notice_box .en_sub_tabs::-webkit-scrollbar {
    display: none;
}

.top_notice_box .en_sub_tab {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--c-el_gray_text);
    position: relative;
    white-space: nowrap;
    transition: color 0.2s;
}

.top_notice_box .en_sub_tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-el_point);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.top_notice_box .en_sub_tab.active {
    color: var(--c-el_gray_dark);
    font-weight: 700;
}

.top_notice_box .en_sub_tab.active::after {
    transform: scaleX(1);
}

/* ── 지역 버튼 ── */
.top_notice_box .en_region_tabs {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 10px;
    padding-bottom: 2px;
}

.top_notice_box .en_region_tabs::-webkit-scrollbar {
    display: none;
}

.top_notice_box .en_region_btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid var(--c-el_gray_border);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--c-el_gray_dark);
    background: #fff;
    transition: all 0.2s;
    white-space: nowrap;
}

.top_notice_box .en_region_btn.active {
    background: var(--c-el_point);
    border-color: var(--c-el_point);
    color: #fff;
    font-weight: 700;
}

/* ── 통계 행 ── */
.top_notice_box .en_stats_row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 1.3rem;
    color: var(--c-el_gray_dark);
}

.top_notice_box .en_total strong {
    color: var(--c-el_point);
    font-weight: 700;
}

.top_notice_box .en_party_stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--c-el_gray_dark);
}

.top_notice_box .en_party_stat strong {
    font-weight: 600;
}

.top_notice_box .en_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.top_notice_box .en_dot.dot_de {
    background: var(--party-de);
}

.top_notice_box .en_dot.dot_pp {
    background: var(--party-pp);
}

.top_notice_box .en_dot.dot_none {
    background: var(--party-none);
}

/* ── 후보 카드 리스트 ── */
.top_notice_box .en_card_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.top_notice_box .en_card {
    border: 1px solid var(--c-el_gray_border);
    border-radius: 6px;
    overflow: hidden;
}

/* 카드 헤더 (당선 배지 + 선거구명) */
.top_notice_box .en_card_head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--c-el_gray_box);
    border-bottom: 1px solid var(--c-el_gray_border);
}

.top_notice_box .en_winner_badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-el-win-txt);
    background: var(--c-el-win-fill);
    border: 1px solid var(--c-el-win-border);
    border-radius: 100px;
    padding: 2px 8px;
    white-space: nowrap;
}

.top_notice_box .en_winner_badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-el-win-dot);
    flex-shrink: 0;
}

.top_notice_box .en_race_title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--c-el_gray_dark);
}

/* 카드 본문 */
.top_notice_box .en_card_body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
}

/* 후보 사진 */
.top_notice_box .en_cand_photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-el_gray_box);
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--c-el_gray_border);
}

.top_notice_box .en_cand_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 후보 정보 */
.top_notice_box .en_cand_info {
    flex: 1;
    min-width: 0;
}

.top_notice_box .en_cand_name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #212121;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top_notice_box .en_cand_party {
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 후보 결과 (득표율 + 바) */
.top_notice_box .en_cand_result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    min-width: 70px;
}

.top_notice_box .en_cand_pct {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.top_notice_box .en_cand_pct.pct_de {
    color: var(--party-de);
}

.top_notice_box .en_cand_pct.pct_pp {
    color: var(--party-pp);
}

.top_notice_box .en_cand_pct.pct_none {
    color: var(--party-none);
}

.top_notice_box .en_cand_pct.pct_etc {
    color: var(--party-etc);
}

.top_notice_box .en_progress_bar {
    width: 100%;
    height: 4px;
    background: var(--c-el_gray_border);
    border-radius: 100px;
    overflow: hidden;
}

.top_notice_box .en_progress_fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.top_notice_box .en_progress_fill.fill_de {
    background: var(--party-de);
}

.top_notice_box .en_progress_fill.fill_pp {
    background: var(--party-pp);
}

.top_notice_box .en_progress_fill.fill_none {
    background: var(--party-none);
}

.top_notice_box .en_progress_fill.fill_etc {
    background: var(--party-etc);
}

/* ── 페이지네이션 ── */
.top_notice_box .en_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.top_notice_box .en_page_btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-el_gray_border) !important;
    background: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.top_notice_box .en_page_btn:hover {
    border-color: var(--c-el_point) !important;
    background: var(--c-el_badge) !important;
}

.top_notice_box .en_page_btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--c-el_gray_dark);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.top_notice_box .en_page_info {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--c-el_gray_dark);
    min-width: 40px;
    text-align: center;
}

.top_notice_box .en_page_info .en_page_total {
    color: var(--c-el_gray_text);
    font-weight: 400;
}

/* ── 전국 지도 보기 버튼 ── */
.top_notice_box .en_map_btn_wrap {
    border-top: 1px solid var(--c-el_gray_border);
    margin: 0 -14px -12px;
    padding: 0 14px;
}

.top_notice_box .en_map_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--c-el_point);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.top_notice_box .en_map_btn:hover {
    background: var(--c-el_badge);
}

.top_notice_box .en_map_btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--c-el_point);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform 0.25s;
}

.top_notice_box .en_map_btn.is_open svg {
    transform: rotate(180deg);
}

/* ── PC (768px+) ── */
@media (min-width: 768px) {
    .top_notice_box .en_header {
        padding: 14px 20px;
    }

    .top_notice_box .en_title {
        font-size: 1.8rem;
    }

    .top_notice_box .en_body {
        padding: 14px 20px;
    }

    .top_notice_box .en_map_btn_wrap {
        margin: 0 -20px -14px;
        padding: 0 20px;
    }

    .top_notice_box .en_sub_tab {
        font-size: 1.4rem;
        padding: 8px 16px;
    }

    .top_notice_box .en_cand_photo {
        width: 52px;
        height: 52px;
    }

    .top_notice_box .en_cand_name {
        font-size: 2rem;
    }

    .top_notice_box .en_cand_pct {
        font-size: 2.4rem;
    }

    .top_notice_box .en_progress_bar {
        height: 5px;
    }
}

/* ── 당첨자 공지 위젯: top_notice_box 전용 디자인 오버라이드 ── */
/* 지역 pill: 피그마 컬러 (비활성 라벤더, 활성 진보라) */
.top_notice_box .region-btn {
    background: var(--c-el_bg);
    border-color: var(--c-el_border);
    color: var(--c-el_chart);
    min-width: 72px;
    height: 35px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.top_notice_box .region-btn.active {
    background: var(--c-el_point);
    border-color: var(--c-el_point);
    color: var(--c-bg);
    font-weight: 700;
}

.top_notice_box .region-btn:hover:not(.active) {
    background-color: var(--c-el_badge);
    border-color: var(--c-el_border);
    color: var(--c-el_point);
}

/* 탭 네비 래퍼: 오른쪽 페이드 그라데이션 (767px 이하만) */
.top_notice_box .tab-nav-wrap {
    position: relative;
}
.top_notice_box .tab-nav-fade {
    display: none;
}
@media (max-width: 767px) {
    .top_notice_box .tab-nav-fade {
        display: block;
        pointer-events: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 48px;
        background: linear-gradient(to left, #fff, transparent);
        transition: opacity 0.2s;
    }

    :root[data-dark="true"] .top_notice_box .tab-nav-fade {
        background: linear-gradient(to left, var(--c-bg), transparent);
    }

    .top_notice_box .tab-nav-wrap.is-end .tab-nav-fade {
        opacity: 0;
        pointer-events: none;
    }
}

/* 지역 탭 래퍼: 오른쪽 페이드 그라데이션 */
.top_notice_box .region-tabs-wrap {
    position: relative;
}
.top_notice_box .region-tabs-fade {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to left, #fff, transparent);
    transition: opacity 0.2s;
}
:root[data-dark="true"] .top_notice_box .region-tabs-fade {
    background: linear-gradient(to left, var(--c-bg), transparent);
}

.top_notice_box .region-tabs-wrap.is-end .region-tabs-fade {
    opacity: 0;
    pointer-events: none;
}

/* 카드 헤더: 배지 포함, 30px 높이 */
.top_notice_box .card-head {
    gap: 6px;
    padding: 0 10px;
    height: 30px;
    min-height: 30px;
}

.top_notice_box .card-head .badge {
    flex-shrink: 0;
}

/* 좌측 액센트 바: .card_box::before 로 이동 */
.top_notice_box .card_box {
    position: relative;
}

.top_notice_box .card_box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
}

.top_notice_box .card_box:has(.candi-party-de)::before {
    background: var(--party-de);
}

.top_notice_box .card_box:has(.candi-party-pp)::before {
    background: var(--party-pp);
}

.top_notice_box .card_box:has(.candi-party-gj)::before {
    background: var(--party-gj);
}

.top_notice_box .card_box:has(.candi-party-rp)::before {
    background: var(--party-rp);
}

.top_notice_box .card_box:has(.candi-party-nf)::before {
    background: var(--party-nf);
}

.top_notice_box .card_box:has(.candi-party-rk)::before {
    background: var(--party-rk);
}

.top_notice_box .card_box:has(.candi-party-ad)::before {
    background: var(--party-ad);
}

.top_notice_box .card_box:has(.candi-party-none)::before {
    background: var(--party-none);
}

.top_notice_box .card_box:has(.candi-edu)::before {
    background: var(--c-el_chart);
}

/* 진행 바 높이 */
.top_notice_box .candi-bar {
    height: 4.8px;
}

/* 카드 내부 여백: 1인 카드에서 min-height 공백 제거 */
.top_notice_box .candidates {
    min-height: unset;
    padding: 12px 15px 14px;
    position: relative;
}

/* 정당명 · 득표수 한 줄: flex-wrap으로 이름은 풀너비, 정당·표수는 나란히 */
.top_notice_box .cand-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 3px;
    justify-content: normal;
}

.top_notice_box .cand-name {
    width: 100%;
    flex-shrink: 0;
}

.top_notice_box .cand-party {
    font-size: 1.2rem;
}

.top_notice_box .cand-party::after {
    content: ' ·';
    color: var(--c-el_gray_border);
    margin-right: 1px;
}

/* 득표수 색상 */
.top_notice_box .cand-votes {
    font-size: 1.2rem;
    color: var(--c-el_gray_text);
}

/* 진행 바 레이아웃: 이름·퍼센트 행 아래 풀너비 */
.top_notice_box .cand-body {
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.top_notice_box .cand-txt {
    flex: 1;
    flex-basis: auto;
}

/* cand-stats를 투명 래퍼로: 자식(percent, bar)이 cand-body flex에 직접 참여 */
.top_notice_box .cand-stats {
    display: contents;
}

.top_notice_box .cand-percent {
    flex-shrink: 0;
    margin-left: auto;
    padding-bottom: 0;
    position: absolute;
    right: 14px;
    font-size: 1.8rem;
    top: 16px;
}

.top_notice_box .candi-bar {
    flex-basis: 100%;
    width: 100%;
    height: 4.8px;
    margin-top: 7px;
    align-self: auto;
}
/* //e: 260513 당선자 공지 CSS 추가 및 추가 수정 요청 사항 반영 */

/* ============================================
    ## dark theme
============================================ */
[data-dark="true"] .avatar {background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_person_dark.svg);}
[data-dark="true"] .ic_dropdown {background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_dropdown_dark.svg);}
[data-dark="true"] .ic_dropdown_up {background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_dropdown_up_dark.svg);}
[data-dark="true"] .el-dropdown.is-open .el-dropdown__arrow {background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_dropdown.svg);}
[data-dark="true"] .el-dropdown__item.is-selected::after {background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_checked_dark.svg);}
[data-dark="true"] .ic_elect_ing {background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_elect_ing_dark.svg);}
[data-dark="true"] .panel-close-btn .ic_panel_close {background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_close_dark.svg);}
[data-dark="true"] .overlay {background: rgba(0, 0, 0, 0.75);}
[data-dark="true"] .tool-tip .info-card {box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);}

:root[data-dark="true"] .ev_more_btn {
    background-color: var(--c-el_bg) !important;
    color: var(--c-el_text);
}
:root[data-dark="true"] .ev_page_btn {
    background-color: var(--c-el_badge);
    border-color: var(--c-el_border);
}
:root[data-dark="true"] .ev_card_region {
    color: var(--c-el_gray_dark);
}
:root[data-dark="true"] .ev_national_label,
:root[data-dark="true"] .ev_regional_top,
:root[data-dark="true"] .ev_legend_item {
    color: var(--c-el_gray_dark) !important;
}
:root[data-dark="true"] .ev_more_btn.is_open,
:root[data-dark="true"] .ev_all_grid_wrap.is_open {
    border-color: var(--c-el_border);
}
:root[data-dark="true"] .ev_donut_bg {stroke: var(--c-el_border);}
:root[data-dark="true"] .ev_more_arrow circle {
    fill: var(--c-el_border);
}
:root[data-dark="true"] .ev_more_arrow path {
    stroke: var(--c-el_gray_dark);
}
:root[data-dark="true"] .ev_legend_item .legend-dot.dot_main {
    background: var(--c-el_gray_dark);
}
:root[data-dark="true"] .ev_page_btn svg,
:root[data-dark="true"] .ev_page_btn img {
    filter: brightness(0) invert(0.8);
}
:root[data-dark="true"] .ev_card_region,
:root[data-dark="true"] .ev_card_count {
    color: var(--c-el_gray_dark) !important;
}

/* ── !important 충돌 대응 ── */
:root[data-dark="true"] .ev_region_card.card_high,
:root[data-dark="true"] .ev_region_card.card_low {
    background: var(--c-el_badge) !important;
    border-color: var(--c-el_border) !important;
}

:root[data-dark="true"] .ev_mobile_card_row .active .ev_card_body,
:root[data-dark="true"] .card_high,
:root[data-dark="true"] .card_low {
    background: var(--c-el_badge) !important;
}
:root[data-dark="true"] .el_rb_mo_body {
    background: var(--c-el_gray_box);
}
:root[data-dark="true"] .el_rb_mo_body .rb_roller_txt {
    color: var(--c-el_gray_dark);
}
:root[data-dark="true"] .elect_vote_header .ev_title {
    color: var(--c-el_gray_dark) !important;
}
:root[data-dark="true"] .top_notice_box .elect_notice_wrap {
    background: var(--c-el_gray_box);
    border-color: var(--c-el_gray_border);
}
:root[data-dark="true"] .top_notice_box .en_header {
    background: var(--c-el_gray_box);
    border-color: var(--c-el_gray_border);
}
:root[data-dark="true"] .top_notice_box .en_tab_bar {
    background: var(--c-el_gray_box);
    border-color: var(--c-el_gray_border);
}
:root[data-dark="true"] .top_notice_box .en_body {
    background: var(--c-el_gray_box);
}
:root[data-dark="true"] .top_notice_box .en_sub_tabs {
    border-color: var(--c-el_gray_border);
}
:root[data-dark="true"] .top_notice_box .en_region_btn {
    background: var(--c-el_gray_box);
    border-color: var(--c-el_gray_border);
    color: var(--c-el_gray_dark);
}
:root[data-dark="true"] .top_notice_box .en_card {
    border-color: var(--c-el_gray_border);
}
:root[data-dark="true"] .top_notice_box .en_card_head {
    background: #1e1e1e;
    border-color: var(--c-el_gray_border);
}
:root[data-dark="true"] .top_notice_box .en_card_body {
    background: var(--c-el_gray_box);
}
:root[data-dark="true"] .top_notice_box .en_cand_photo {
    background: #1e1e1e;
    border-color: var(--c-el_gray_border);
}
:root[data-dark="true"] .top_notice_box .en_cand_name {
    color: var(--c-el_gray_dark);
}
:root[data-dark="true"] .top_notice_box .en_page_btn {
    background: var(--c-el_gray_box) !important;
    border-color: var(--c-el_gray_border) !important;
}
:root[data-dark="true"] .top_notice_box .en_page_btn svg {
    stroke: var(--c-el_gray_dark);
}
:root[data-dark="true"] .top_notice_box .en_map_btn_wrap {
    border-color: var(--c-el_gray_border);
}
:root[data-dark="true"] .top_notice_box .en_map_btn:hover {
    background: #1e1e1e;
}
:root[data-dark="true"] .top_notice_box .en_progress_bar {
    background: var(--c-el_gray_border);
}
:root[data-dark="true"] .elect_vote_header .ev_spec_btn {background: linear-gradient(135deg, #9872FF, #CC77FF);}
:root[data-dark="true"] .el_rb_pc {background: linear-gradient(90deg, #2C254C 15%, #3E3565 100%);}
:root[data-dark="true"] .el_rb_title {color: var(--c-el_chart);}
:root[data-dark="true"] .info-btn .ic_info {background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_info_dark.svg);}
:root[data-dark="true"] .Swiper_candi .swiper-button-next:after, 
:root[data-dark="true"] .Swiper_candi .swiper-button-prev:after {
    background-image: url(//bimg.mk.co.kr/2026/9elect/assets/images/ic_arrow_pdark.svg);
}
:root[data-dark="true"] .btn-glass {
    background: rgba(44, 37, 76, 0.5);
    border-color: rgba(62, 53, 101, 0.8);
    color: var(--c-el_text);
    box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(62, 53, 101, 0.9);
}
:root[data-dark="true"] .btn-glass:hover {
    background: rgba(44, 37, 76, 0.85);
    box-shadow: var(--shadow-glass-hover), inset 0 1px 0 rgba(62, 53, 101, 1);
}