.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; }

/* 프로모션 */
#winnerCommentPopup .popup_content {max-width:320px;width:80%;padding:24px 20px 20px;}
#winnerCommentClose {position:absolute;right:16px;top:16px;background:none;border:none;font-size:22px;color:#999;width:28px;height:28px;line-height:1;padding:0;cursor:pointer;}
.winner-popup-desc {font-size:14px;color:#555;margin:0 0 14px;line-height:1.5;}
.winner-comment-options {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;justify-content:center;}
.w-comment-opt {background:#f5f5f5;border-radius:20px;padding:7px 14px;font-size:13px;color:#666;border:none;cursor:pointer;font-family:inherit;transition:background 0.15s;}
.w-comment-opt.selected {background:#5d67cf22;color:#1a3a6d;font-weight:600;}
.winner-input-wrap {position:relative;text-align:left;width:88%;margin:0 auto 16px;}
#winnerUsername {width:100%;padding:24px 12px 8px;font-size:16px;border:1px solid #ddd;border-radius:8px;color:#191919;box-sizing:border-box;font-family:inherit;outline:none;}
#winnerUsername:focus {border-color:#5d67cf;}
#winnerUsernameLbl {position:absolute;left:12px;top:16px;color:#999;font-size:16px;transition:all 0.2s;pointer-events:none;}
#winnerUsernameLbl.floated {top:8px;font-size:12px;color:#666;}
#winnerCommentSubmit {width:100%;font-size:16px;padding:15px 0;}
#winnerCommentSubmit:disabled {background:#e8e8e8;color:#999;cursor:not-allowed;}