.voting-top { padding: 40px 16px 25px; }
.voting-tit-wrap, .voting_section { animation: fade_in 3s; }

.content-wrapper {padding-bottom: 140px;}
.point-img { animation: flip 0.6s 3; transform-style: preserve-3d; margin-bottom: 10px; }
.voting-tit-wrap .voting-tit { color: #988989; font-size: 16px; margin-bottom: 16px; }
.voting-tit-wrap.-before .voting-tit { font-size: 24px; color: #3A43BB; font-weight: 700; margin-bottom: 12px; }
.voting-tit-wrap.-after .voting-tit { color: #4B515D; font-weight: 700; margin-bottom: 12px; }
.voting-tit-wrap .voting-subtitle { min-height: 40px; font-weight: bold; }
.voting-tit-wrap .voting-subtitle span { color: #3A43BB; }

.voting_section { margin-top: 10px; }
.voting_section .radio { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 20px; background: #F8F9FB; border: 1px solid #F1F1F1; min-height: 65px; margin-bottom: 12px; padding: 10px 12px; font-weight: 600; font-size: 16px; transition: background-color 0.3s ease; }
.voting_section .radio .radio-txt, .voting_section .radio .radio-btn { display: flex; gap: 13px; align-items: center; width: fit-content; position: relative; z-index: 1; }
.voting_section .radio .radio-txt .radio-img img { width: 48px; height: 48px; border-radius: 100%; }
.voting_section .radio .radio-txt .radio-tit { text-align: left; width: 85%; }
.voting_section.-after .radio .radio-txt .radio-tit { /*width: 70%;*/ }
.voting_section .radio .radio-btn a { background: #F3F3F3; border: 1px solid #E1E1E1; border-radius: 10px; padding: 2px 5px; margin-left: 10px; font-size: 12px; width: fit-content; color: #888888; transition: background-color 0.3s ease; }
.voting_section .radio input { width: 20px; height: 20px; background: #CED4DA; margin: 0; }
.voting_section:not(.-after) .radio.selected, .voting_section .radio.selected a { background: #C9E2FF; color: #008DFF; }
.voting_section.-after .radio.selected { color: #008DFF; }
.voting_section .radio.selected a { border-color: #008DFF; }
.voting_btn { width: 100%; padding: 16px 0; margin: 20px auto 0; font-size: 16px; min-height: 51px; background: #1A3A6D; color: #fff; font-weight: 700; }
.voting_btn:hover { background: #152B4D; }

.current_avg { position: absolute; left: 0; top: 0; background: #C9E2FF; width: 0%; height: 100%; border-radius: 15px; transition: width 1s ease-in-out; }
.more_vote_wrap { display: flex; gap: 10px; }
.more_vote_wrap p { font-size: 16px; text-align: center; width: 100%; }
.more_vote_wrap .vote_box { display: flex; width: 50%; min-height: 40px; justify-content: space-between; align-items: center; padding: 16px 14px; border-radius: 10px; background: #fff; box-shadow: 0 0 5px #00000014; color: #444B52; font-size: 16px; font-weight: 600; }
.more_vote_wrap .vote_box .vote_tit { width: 90%; }

@media screen and (max-width: 402px) { .voting-tit, .voting_section .radio { font-size: 14px; } }
@media screen and (max-width: 352px) { .voting_section .radio .radio-txt .radio-img img { width: 36px; height: 36px; } .voting_section .radio .radio-btn a { margin-left: 5px; } }

.tac { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.bonus-notice { font-size: 16px; color: #333; background-color: #f8f8f8; padding: 15px 10px; margin: 0 auto; border-radius: 12px; text-align: center; font-weight: 500; line-height: 1.5; max-width: 90%; width: 100%; display: block; min-height: 40px; }
.bonus-notice strong { color: #3A43BB; font-weight: 700; }
.earn_pay { color: #3A43BB; font-weight: 700; }

.voting-subtitle.success { color: #3A43BB; font-weight: 700; font-size: 24px; }
.voting-subtitle.getpoint { color: #4B515D; font-weight: 700; font-size: 18px; }
.radio.my-vote { position: relative; }
.radio.my-vote::after { content: ''; position: absolute; right: 10px; top: calc(50% + 12px); transform: translateY(-50%); width: 24px; height: 24px; background-image: url('https://files.svote.kr/assets/bccard/251211/img/mark_v.webp'); background-size: cover; }
.radio.my-vote .radio-tit,
.radio.my-vote .radio-avg { color: #3A43BB; }
.voting_btn.bonus { background: #1A3A6D; }
.radio-txt, .radio-img, .radio-avg { position: relative; z-index: 10; }
.radio.winner::before { content: ''; position: absolute; left: 20px; top: 35px; width: 48px; height: 48px; background-image: url('https://files.svote.kr/assets/bccard/251211/img/badge_1st.webp'); background-size: cover; z-index: 20; }
.dimmed { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; }
.bonus-layer { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 120px); background: #fff; border-radius: 20px; padding: 40px 20px; z-index: 1001; text-align: center; }
.bonus-layer .point-img { margin-bottom: 25px; }
.bonus-layer .point-img img { width: 59px; height: 59px; }
.bonus-layer .voting-tit { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: #333; }
.bonus-layer .voting-subtitle { font-size: 28px; font-weight: 700; margin-bottom: 32px; }
.bonus-layer .voting-subtitle .earn_pay { color: #3A43BB; }
.bonus-layer .voting_btn { width: 100%; padding: 16px 0; border-radius: 60px; font-size: 18px; font-weight: 600; background: #1A3A6D; color: white; border: none; cursor: pointer; }

/** 보너스 화면에서만 쓰임 **/
.voting-top.voting-bonus { padding: 40px 16px 155px; }
.voting-bonus .voting-tit-wrap.-after .voting-tit { margin: 0; font-size: 16px; font-weight: 700; } /* 기존과 font-size, margin 다름 */
.voting-bonus .voting_section { margin-top: 16px; } /* 기존: 25px */
.voting-bonus .voting-text { color: #5D67CF; font-size: 16px; }
.voting-bonus .current_avg { max-width: 100% !important; z-index: 0; background: #C9E2FF; } /* 기존과 background만 같고 나머지 다름 */
.voting-bonus .radio { position: relative; } /* 기존에 radio에 더 많은 스타일이 이미 있음 → 이 줄은 중복됨 */
.voting-bonus .radio-avg { top: -10px; }
/**/

.bonus_ad_popup { background: rgba(0,0,0,0.3); z-index: 99; }
.bonus_ad_popup a { font-size: 16px; margin-top: 20px; display: inline-block; color: gray; }

/* 버튼 로딩 스피너 */
.btn-loading { position: relative; pointer-events: none; color: transparent !important; }
.btn-loading::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: btn-spinner 0.7s linear infinite; }
@keyframes btn-spinner { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* TPMN 보너스 모달 */
.tpmn-modal .modal-content { padding: 15px; width: unset; position: relative; }
.tpmn-modal h4 { margin: 0 0 15px; }
.tpmn-modal .bonus-icon { position: absolute; top: 60px; right: 20px; }
.tpmn-modal .bonus-title { max-width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: keep-all; overflow-wrap: normal; margin: 15px 0; }
.tpmn-modal .bonus-close { margin-top: 15px; display: inline-block; font-size: small; color: gray; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* 메조 보너스 모달 */
.ad-modal-column { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; flex-direction: column; }
.ad-modal-column .modal-content-top { background-color: white; width: 80%; max-width: 400px; padding: 20px; text-align: center; position: relative; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.ad-modal-column .modal-content-bottom { background-color: white; width: 80%; max-width: 400px; padding: 10px 20px 20px; text-align: center; position: relative; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; font-weight: 600; }
.ad-modal-column .bonus-cancel { color: darkgray; font-size: small; cursor: pointer; display: block; margin-top: 15px; -webkit-tap-highlight-color: transparent; }