/* [assets/web_game/css/vote.css] */

.vote-card { 
    background: rgba(30, 30, 36, 0.95); border: 1px solid #333; border-radius: 16px; 
    margin-bottom: 20px; overflow: hidden; position: relative;
}

/* 🌟 [아코디언 헤더] 누르면 열리는 윗부분 */
.vote-card-header { padding: 20px; cursor: pointer; transition: 0.3s; }
.vote-card-header:hover { background: rgba(153,69,255,0.1); }
.vote-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: bold; margin-bottom: 10px; }
.badge-active { background: rgba(20, 241, 149, 0.15); color: var(--solana-mint); border: 1px solid var(--solana-mint); }
.badge-closed { background: rgba(255, 71, 87, 0.15); color: #ff4757; border: 1px solid #ff4757; }
.vote-title { font-size: 16px; font-weight: bold; margin: 0 0 8px 0; color: #fff; line-height: 1.4; }
.vote-date { font-size: 11px; color: #666; display: flex; align-items: center; gap: 5px; }

/* 🌟 [아코디언 바디] 스르륵 열리고 닫히는 상세 내용 */
.vote-card-body { 
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; 
    background: #111; border-top: 1px solid transparent;
}
.vote-card-body.open { max-height: 800px; padding: 20px; border-top: 1px solid #333; }
.vote-desc { font-size: 13px; line-height: 1.6; color: #bbb; margin-bottom: 15px; white-space: pre-wrap; }

/* 투표 선택지 */
.vote-option { 
    display: flex; align-items: center; justify-content: space-between; background: #1a1a20; border: 1px solid #333; padding: 15px; border-radius: 10px; margin-bottom: 10px; cursor: pointer; position: relative; overflow: hidden; transition: 0.2s; 
}
.vote-option:hover { border-color: var(--solana-mint); }
.vote-option.selected { border-color: var(--solana-mint); background: rgba(20, 241, 149, 0.05); }
.vote-progress-bg { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(20, 241, 149, 0.1), rgba(20, 241, 149, 0.2)); z-index: 0; transition: width 0.8s ease-out; }
.vote-option-text { position: relative; z-index: 1; font-size: 13px; font-weight: 500; }
.vote-option-percent { position: relative; z-index: 1; font-size: 12px; color: var(--solana-mint); font-weight: bold; }

/* 🌟 [애니메이션] 투표함 쏙! 효과 */
.vote-anim-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10; border-radius: 16px;
    display: none; flex-direction: column; align-items: center; justify-content: center;
}
.anim-paper { font-size: 40px; color: #fff; animation: dropPaper 1.2s forwards; z-index: 1; }
.anim-box { font-size: 60px; color: var(--solana-mint); margin-top: -25px; z-index: 2; }
.anim-text { color: var(--solana-mint); font-weight: bold; margin-top: 15px; opacity: 0; animation: fadeIn 0.3s 1s forwards; font-family: 'Galmuri9'; }

@keyframes dropPaper {
    0% { transform: translateY(-40px); opacity: 0; }
    30% { transform: translateY(0px); opacity: 1; }
    70% { transform: translateY(30px); opacity: 1; }
    100% { transform: translateY(40px); opacity: 0; }
}
@keyframes fadeIn { to { opacity: 1; } }