/* quest.css : 일일 퀘스트·반 대항(2026-11-13, quest.js) */
.qq-card { background: linear-gradient(135deg, #f0f9ff, #fff); border: 1px solid #bae6fd; border-radius: 18px; padding: 14px 16px; margin: 0 0 14px; color: #0c4a6e; }
.qq-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.qq-head > b { font-size: 18px; }
.qq-head > small { color: #0369a1; }
.qq-tickets { margin-left: auto; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 3px 12px; font-weight: 800; }
.qq-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qq-list li { display: flex; align-items: center; gap: 8px; border: 1px solid #e0f2fe; border-radius: 14px; padding: 8px 10px; background: #fff; }
.qq-list li.ready { border: 2px solid #22c55e; background: #f0fdf4; animation: qq-glow 1.4s ease-in-out infinite; }
.qq-list li.claimed { opacity: .75; background: #f8fafc; }
@keyframes qq-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.0); } 50% { box-shadow: 0 0 0 4px rgba(34,197,94,.25); } }
.qq-ic { font-size: 24px; flex: none; }
.qq-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.qq-txt b { font-size: 14px; line-height: 1.3; }
.qq-bar { height: 6px; border-radius: 999px; background: #e0f2fe; overflow: hidden; }
.qq-bar i { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #22c55e); border-radius: 999px; }
.qq-claim { background: #22c55e !important; color: #fff !important; border-color: #16a34a !important; font-weight: 800; white-space: nowrap; }
.qq-claim.big { font-size: 15px; }
.qq-done { color: #15803d; font-weight: 800; white-space: nowrap; font-size: 13px; }
.qq-todo { color: #0369a1; font-weight: 700; white-space: nowrap; font-size: 13px; }
.qq-foot { display: flex; gap: 10px 18px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.qq-week { color: #0369a1; font-size: 14px; }
.qq-note { margin: 8px 0 0; font-weight: 800; color: #15803d; }
.qq-battle { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #bae6fd; font-size: 14px; }
.qq-battle:empty { display: none; }
.qq-link { margin-left: 6px; }
.qq-pop { position: fixed; left: 50%; top: 40%; transform: translate(-50%, 0); z-index: 9999; font-size: 42px; font-weight: 900; color: #f59e0b; text-shadow: 0 2px 0 #fff, 0 6px 20px rgba(245, 158, 11, .5); animation: qq-up 1.3s ease-out forwards; pointer-events: none; }
@keyframes qq-up { from { opacity: 0; transform: translate(-50%, 20px) scale(.7); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } to { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

.qb-board { background: #fff; border: 1px solid #c7d2fe; border-radius: 18px; padding: 16px 18px; margin: 0 0 14px; color: #1e1b4b; }
.qb-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.qb-head b { font-size: 19px; }
.qb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.qb-tabs button.on { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.qb-how { margin: 4px 0 10px; color: #475569; }
.qb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qb-list li { display: grid; grid-template-columns: 40px 110px 1fr 90px; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: #f8fafc; }
.qb-list li.me { background: #eef2ff; border: 2px solid #6366f1; }
.qb-place { text-align: center; font-weight: 900; font-size: 18px; color: #475569; }
.qb-ban { font-size: 16px; }
.qb-ban small { font-size: 11px; color: #4f46e5; background: #e0e7ff; border-radius: 999px; padding: 0 6px; }
.qb-bar { height: 14px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.qb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #818cf8, #4f46e5); border-radius: 999px; }
.qb-list li.me .qb-bar i { background: linear-gradient(90deg, #fbbf24, #f97316); }
.qb-v { text-align: right; font-weight: 800; }

/* 별 선물 뽑기의 뽑기권 단추(star-gifts.js) */
.sg-ticket-btn { background: #f59e0b !important; color: #fff !important; border-color: #d97706 !important; font-weight: 800; margin-left: 8px; }

@media (max-width: 900px) { .qq-list { grid-template-columns: 1fr; } .qb-list li { grid-template-columns: 34px 80px 1fr 70px; } }