﻿@charset "UTF-8";

@import url('https://font.imbc.com/mbcnew/mbcnew.css');
@import url('https://font.imbc.com/noto/noto.css');
@import url('https://font.imbc.com/nanumgothic/nanumgothic.css');
@import url('https://font.imbc.com/pretendard/pretendard.css');

/* Common */
html { -webkit-text-size-adjust: 100%; font-size: clamp(16px, calc(14px + 0.5556vw), 18px); }
body { margin: 0; padding: 0; font-family: 'mbcnew-light'; letter-spacing: -2.5%; color: #495057; }
pre { font-family: 'mbcnew-medium'; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: normal; }
code, kbd, samp { font-family: 'mbcnew-medium';font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-size: 100%; font-size: 16px; line-height: 1.25; margin: 0; font-family: 'mbcnew-light'; letter-spacing: -2.5%; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }
button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none;padding: 0; }
button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted currentColor; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;/* 3 */
white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
span { vertical-align: top; }
[type='checkbox'], [type='radio'] { box-sizing: border-box;padding: 0; }
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
[type='search']::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button;font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }
* { margin: 0;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;box-sizing: border-box; vertical-align: top; }

h1, h2, h3, h4, h5, h6 { margin: 0; }
a { display: block; color: inherit;text-decoration: none; }
button, input, select, textarea { background-color: transparent; border: 0; }
button:focus, input:focus, select:focus, textarea:focus { outline: none; box-shadow: none; }
a, button { cursor: pointer; }
button { padding: 0; }
ul, ol { padding-left: 0;list-style: none; }
address { font-style: normal; }
.cf:after, .cf:before { content: ''; clear: both; display: block; }
.blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis2 { text-overflow: ellipsis; overflow: hidden; display:-webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.ellipsis3 { text-overflow: ellipsis; overflow: hidden; display:-webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; }
.hidden { height:100%; overflow: hidden; touch-action:none; }
.btnGnbEvent { position: relative; }
.sortable-handler { touch-action: none; overflow: hidden; }

:root {
    --fs-01: clamp(13px, calc(11px + 0.5556vw), 15px);
    --fs-02: clamp(14px, calc(12px + 0.5556vw), 16px);
    --fs-03: clamp(16px, calc(14px + 0.5556vw), 18px);
    --fs-04: clamp(18px, calc(16px + 0.5556vw), 20px);
    --fs-05: clamp(20px, calc(18px + 0.5556vw), 22px);

    --fs-sm: clamp(12px, calc(11px + 0.2778vw), 13px);

    --party-1: #3c65cf; /* 더불어민주당 */
    --party-2: #d84c4b; /* 국민의힘 */
    --party-4: #e77944; /* 개혁신당 */
    --party-5: #ebb100; /* 민주노동당 */
    --party-9: #6a6a6a; /* 무소속 */
    --party-etc: #87756b; /* 기타 */
    --party-etc2: #4c4c6f; /* 접전 */
}

/* 정당 컬러 */
.party1 { color: var(--party-1) !important; } /* 더불어민주당 */
.party2 { color: var(--party-2) !important; } /* 국민의힘 */
.party4 { color: var(--party-4) !important; } /* 개혁신당 */
.party5 { color: var(--party-5) !important; } /* 민주노동당 */
.party9 { color: var(--party-9) !important; } /* 무소속 */
.party-etc { color: var(--party-etc) !important; } /* 기타 */
.party-etc2 { color: var(--party-etc2) !important; } /* 접전 */

.party1-bg { background: var(--party-1) !important; } /* 더불어민주당 */
.party2-bg { background: var(--party-2) !important; } /* 국민의힘 */
.party4-bg { background: var(--party-4) !important; } /* 개혁신당 */
.party5-bg { background: var(--party-5) !important; } /* 민주노동당 */
.party9-bg { background: var(--party-9) !important; } /* 무소속 */
.party-etc-bg { background: var(--party-etc) !important; } /* 기타 */
.party-etc2-bg { color: var(--party-etc2) !important; } /* 접전 */

/* icon 컴포넌트 */
.ico { display: flex; justify-content: center; align-items: center; background-repeat: no-repeat; background-position: center center; background-size: contain; }

.ico-14 { width: 14px; height: 14px; }
.ico-16 { width: 16px; height: 16px; }
.ico-20 { width: 20px; height: 20px; }
.ico-24 { width: 24px; height: 24px; }

.ico-pollm { background-image: url('//vote2026.imbc.com/images/m/ico-pollm.svg'); }
.ico-video { background-image: url('//vote2026.imbc.com/images/m/ico-video.svg'); }
.ico-info { background-image: url('//vote2026.imbc.com/images/m/ico-info.svg'); }
.ico-search { background-image: url('//vote2026.imbc.com/images/m/ico-search.svg'); }
.ico-news { background-image: url('//vote2026.imbc.com/images/m/ico-news.svg'); }

.ico-arr-right { width: 10px; height: 20px; background-image: url('//vote2026.imbc.com/images/m/ico-arr-right.svg') }
.ico-arr-btm { width: 20px; height: 20px; background-image: url('//vote2026.imbc.com/images/m/ico-arr-btm.svg') }
.ico-select-btm { width: 14px; height: 14px; background-image: url('//vote2026.imbc.com/images/m/ico-select-btm.svg'); }



/* layout */
#wrap { width: 100%; min-width: 320px; overflow: hidden; }
.wide { position: relative; box-sizing: border-box; max-width: 720px; width: 100%; margin: 0 auto; padding: 0 16px; z-index: 2; }
button { color: #000; }
.img-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-contain img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* accessibility */
#u_skip { position: absolute; top: 0; left: 0; z-index: 9999; width: 100%; text-align: left; }
#u_skip a { display: block; position: absolute; top: -1000px; left: 0; z-index: 500; width: 100%; text-align: center; }
#u_skip a:focus, #accessibility a:active { position: absolute; top: 0; z-index: 1000; height: 40px; background: #000; color: #fff; line-height: 2.5; }

/* section */
section { border-bottom: 8px solid #f0f0f0; }
section.sec-info { border: none; }
section.sec-filter { border: none; }

/* Header */
#header { position: relative; width: 100%; height: 124px; background: url('//vote2026.imbc.com/images/m/bg-header.png') no-repeat center / cover; }
#header .wide { position: relative; width: 100%; }
#header .wide .left { position: absolute; display: inline-flex; justify-content: center; align-items: center; width: 62px; height: 18px; background: url('//vote2026.imbc.com/images/m/logo-mbc.svg') no-repeat center center / contain; top: 12px; left: 16px; }
#header .wide .left a { display: block; width: 100%; height: 100%; }
#header h1 { display: flex; justify-content: center; padding: 10px 0; }
#header h1 a { width: 138px; height: 60px; }

#header .right { position: absolute; top: 12px; right: 16px; display: flex; flex-direction: column; color: #171A1D; text-align: center; }
#header .right .txt { display: inline-block; font-family: 'mbcnew-medium'; font-size: 12px; line-height: 1.4545; padding-bottom: 4px; }
#header .right .dday { display: flex; justify-content: center; align-items: center; font-family: 'mbcnew-bold'; padding: 4px 10px; text-align: center; width: 77px; height: 38px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); border-radius: 8px; }
#header .right .dday span { background: linear-gradient(180deg, #12275B 0%, #3157A8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; font-size: 20px; line-height: 1.3; vertical-align: top; position: relative; top: 0.03em; }
#header .right.today .txt { opacity: .5; }
#header .right.today .dday { font-size: 15px; letter-spacing: -.075em; }
#header .right.live .live-bx { display: flex; justify-content: center; align-items: center; width: 50px; height: 17.5px; font-family:'notokr-medium'; color: #000; font-size: 12px; letter-spacing: 0; background: #fff; border-radius: 4px; }
#header .right.live .live-bx::before { content: ''; display: inline-block; margin-right: 4px; width: 7.5px; height: 7.5px; background-color: #eb6100; border-radius: 50%; animation: blink 1s ease-in-out infinite alternate; }
#header .right.live .txt { margin-top: 6px; font-size: 13px; border-bottom: none; }
#header .right.live .txt::after { display: none; }

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Navigation */
.navi { position: absolute; width: 100%; height: 44px; left: 0; top: 80px; color: #12275B; }
.navi::before { content: ""; position: absolute; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); mix-blend-mode: soft-light; z-index: 1; pointer-events: none; }
.navi.fixed { position: fixed; z-index: 150; top: 0; left: 0; width: 100%; }
.navi ul { overflow-x: auto; display: flex; flex-wrap: nowrap; padding: 0 16px; height: 100%; -ms-overflow-style: none; }
.navi ul::-webkit-scrollbar { display: none; }
.navi ul li { position: relative; display: inline-block; height: 100%; vertical-align: middle; white-space: nowrap; }
.navi ul li a, .navi ul li label { position: relative; display: inline-flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-family: 'mbcnew-light';  font-size: var(--fs-03); line-height: 100%; white-space: nowrap; color: #12275B; width: 100%; }
.navi ul li.on a, .navi ul li.on label { font-family: 'mbcnew-bold'; }
.navi ul li select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; color: transparent; border: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; }
.navi ul li select:focus { outline: none; }
.navi ul li select option { color: #000; }
.navi ul li.on a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #12275B; border-radius: 999px; }
.navi ul.center { display: flex; justify-content: center; gap: 30px; }

/* Footer */
.footer { padding: 24px 0 30px; text-align: center; color: #495057; background: #F1F3F5; letter-spacing: -5%; }
.footer .footer-sns { display: flex; justify-content: center; gap: 10px; }
.footer .footer-sns li { display: inline-block; width: 30px; height: 30px; }
.footer .footer-sns li a { display: block; width: 100%; height: 100%; }
.footer .footer-sns li a img { display: block; width: 100%; height: 100%; object-fit: contain; }
.footer p.copy { font-size: 13px; font-family: 'pretend-regular'; line-height: 1.5385; margin: 20px 0; }
.footer .img-wrp { display: block; width: 138px; height: 28px; margin: 0 auto; }
.footer .img-wrp .img-contain { display: block; width: 100%; height: 100%; }
.footer .img-wrp .img-contain img { display: block; width: 100%; height: 100%; object-fit: contain; }