/* ── 확장 위젯 A (v1.12.0) — 소통·참여 서버형 21종 ── */

/* 공용 */
.wg-x-col { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.wg-x-desc { font-size: 13px; color: var(--muted); }
.wg-x-hint { font-size: 12px; color: var(--muted); }
.wg-x-hint b { color: var(--c-primary, var(--brand)); }
.wg-x-btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wg-x-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.wg-x-login { align-self: flex-start; }
.wg-x-mg b { color: var(--c-accent, var(--amber)); }
.wg-x-del { border: none; background: none; color: var(--muted); font-size: 12px; padding: 2px 6px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.wg-x-del:hover { color: var(--danger); background: var(--paper); }
.wg-x-bar { height: 10px; border-radius: 99px; background: var(--paper); overflow: hidden; flex-shrink: 0; }
.wg-x-bar-fill { height: 100%; border-radius: 99px; background: var(--c-primary, var(--brand)); transition: width .4s ease; }
.wg-x-own { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.wg-x-own .input { width: auto; flex: 1; min-width: 100px; padding: 5px 8px; font-size: 13px; }
.wg-x-formhint { font-size: 13px; margin-bottom: 12px; }

/* 스트리머 관리 모달 */
.wg-mg-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.wg-mg-tab { border: none; background: none; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.wg-mg-tab b { color: var(--c-accent, var(--amber)); }
.wg-mg-tab.on { color: var(--c-primary, var(--brand)); border-bottom-color: var(--c-primary, var(--brand)); }
.wg-mg-list { max-height: min(60vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.wg-mg-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.wg-mg-head { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.wg-mg-st { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--paper); color: var(--muted); }
.wg-mg-st-pending { background: var(--brand-soft); color: var(--c-primary, var(--brand)); }
.wg-mg-st-done, .wg-mg-st-approved { color: #2FAE62; background: #E9F8EE; }
.wg-mg-st-rejected { color: var(--danger); background: #FDF0F0; }
.wg-mg-time { margin-left: auto; font-size: 12px; color: var(--muted); }
.wg-mg-body { margin-top: 8px; font-size: 14px; word-break: break-word; }
.wg-mg-reply { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); font-size: 13px; }
.wg-mg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wg-mg-replybox { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-items: flex-end; }

/* 1. 연속 출석 TOP */
.wg-stk-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 10px; }
.wg-stk-top { background: var(--brand-soft); font-size: 14px; padding: 8px; }
.wg-stk-top .wg-stk-days { color: var(--c-primary, var(--brand)); font-size: 15px; }
.wg-stk-no { width: 24px; text-align: center; font-weight: 800; flex-shrink: 0; }
.wg-stk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-stk-days { flex-shrink: 0; font-weight: 800; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.wg-stk-days small { font-size: 10px; font-weight: 400; color: var(--muted); }

/* 2. 새로 온 멤버 */
.wg-nm-list { display: flex; flex-wrap: wrap; gap: 6px; overflow-y: auto; min-height: 0; align-content: flex-start; }
.wg-nm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 11px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); }
.wg-nm-chip small { font-size: 11px; color: var(--muted); }

/* 3. 다녀간 멤버 */
.wg-rv-row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.wg-rv-ava { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.wg-rv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-rv-time { font-size: 12px; color: var(--muted); flex-shrink: 0; }

/* 4. 지금 접속 중 */
.wg-onl-main { display: flex; align-items: baseline; gap: 6px; }
.wg-onl-n { font-family: var(--font-display); font-size: clamp(28px, 6vw, 40px); color: var(--c-primary, var(--brand)); line-height: 1; }
.wg-onl-dot { width: 10px; height: 10px; border-radius: 50%; background: #2FAE62; align-self: center; box-shadow: 0 0 0 0 rgba(47,174,98,.5); animation: wgx-pulse 2s ease-out infinite; }
.wg-onl-names { display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; }
.wg-onl-chip { font-size: 12px; padding: 2px 9px; }

/* 5. 이모지 반응판 */
.wg-rx-q { font-size: 14px; font-weight: 700; }
.wg-rx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.wg-rx-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--c-card, var(--card)); }
.wg-rx-btn:hover { border-color: var(--c-primary, var(--brand)); }
.wg-rx-btn.on { background: var(--brand-soft); border-color: var(--c-primary, var(--brand)); }
.wg-rx-btn.pop .wg-rx-emo { animation: wgx-pop .35s ease; }
.wg-rx-emo { font-size: clamp(20px, 4vw, 26px); line-height: 1; }
.wg-rx-n { font-size: 12px; font-weight: 700; color: var(--muted); }
.wg-rx-btn.on .wg-rx-n { color: var(--c-primary, var(--brand)); }

/* 6. 별점 평가 */
.wg-rt-stars { display: flex; gap: 2px; justify-content: center; }
.wg-rt-star { border: none; background: none; padding: 0 1px; font-size: clamp(26px, 5vw, 34px); line-height: 1; color: var(--line); cursor: pointer; transition: transform .12s ease; }
.wg-rt-10 .wg-rt-star { font-size: clamp(18px, 3.4vw, 24px); }
.wg-rt-star.on { color: var(--c-accent, var(--amber)); }
.wg-rt-stars:hover .wg-rt-star { color: var(--c-accent, var(--amber)); }
.wg-rt-stars .wg-rt-star:hover ~ .wg-rt-star { color: var(--line); }
.wg-rt-star:hover { transform: scale(1.15); }
.wg-rt-sum { display: flex; align-items: baseline; justify-content: center; gap: 4px; font-size: 13px; color: var(--muted); }
.wg-rt-sum b { font-family: var(--font-display); font-size: 26px; color: var(--c-text, var(--ink)); }
.wg-rt-sum span { margin-left: 8px; }

/* 7. 한마디 상자 */
.wg-sb-item { display: flex; align-items: baseline; gap: 6px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.wg-sb-item:last-child { border-bottom: none; }
.wg-sb-nick { flex-shrink: 0; }
.wg-sb-text { flex: 1; min-width: 0; word-break: break-word; }
.wg-sb-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.wg-sb-form { display: flex; gap: 6px; }
.wg-sb-form .input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px; }

/* 8. 멤버 한줄평 */
.wg-olr-card { padding: 10px 12px; border-radius: 12px; background: var(--paper); border-left: 3px solid var(--c-primary, var(--brand)); }
.wg-olr-text { font-size: 14px; line-height: 1.5; }
.wg-olr-by { margin-top: 4px; font-size: 12px; color: var(--muted); text-align: right; }

/* 9. 팬레터 */
.wg-fl-env { font-size: clamp(36px, 8vw, 52px); text-align: center; line-height: 1; padding: 4px 0; }
.wg-fl .wg-x-write { align-self: center; }
.wg-fl-mine { font-size: 13px; overflow-y: auto; min-height: 0; }
.wg-fl-mine-h { font-weight: 700; margin-bottom: 4px; }
.wg-fl-item summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 3px 0; }
.wg-fl-paper { padding: 14px 16px; border-radius: 10px; font-size: 14px; line-height: 1.7; margin: 6px 0; white-space: normal; word-break: break-word;
  background-image: repeating-linear-gradient(transparent 0 1.6em, rgba(0,0,0,.06) 1.6em calc(1.6em + 1px)); }
.wg-fl-pink { background-color: #FFEFF4; color: #5A2A3A; }
.wg-fl-sky { background-color: #EAF4FF; color: #23405E; }
.wg-fl-kraft { background-color: #F1E4CF; color: #4A3A22; }
.wg-fl-night { background-color: #232A46; color: #EDEFFA; background-image: repeating-linear-gradient(transparent 0 1.6em, rgba(255,255,255,.08) 1.6em calc(1.6em + 1px)); }

/* 10. 공개 Q&A */
.wg-qa-wait { font-size: 12px; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); }
.wg-qa-wait-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); }
.wg-qa-wait-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-qa-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wg-qa-item:last-child { border-bottom: none; }
.wg-qa-q, .wg-qa-a { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.wg-qa-a { flex-direction: row-reverse; text-align: right; }
.wg-qa-q > div, .wg-qa-a > div { padding: 8px 11px; border-radius: 12px; background: var(--paper); max-width: 88%; }
.wg-qa-a > div { background: var(--brand-soft); }
.wg-qa-tag { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; background: var(--c-text, var(--ink)); color: #fff; }
.wg-qa-tag-a { background: var(--c-primary, var(--brand)); }
.wg-qa-text { word-break: break-word; }
.wg-qa-by { margin-top: 3px; font-size: 11px; color: var(--muted); }

/* 11. 신청곡 큐 */
.wg-sr-h { font-size: 12px; color: var(--muted); font-weight: 700; }
.wg-sr-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.wg-sr-row:last-child { border-bottom: none; }
.wg-sr-no { width: 22px; text-align: center; font-weight: 800; color: var(--c-primary, var(--brand)); flex-shrink: 0; }
.wg-sr-song { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.wg-sr-name { font-weight: 700; }
.wg-sr-artist { color: var(--muted); font-size: 12px; }
.wg-sr-by { font-size: 11px; color: var(--muted); width: 100%; }
.wg-sr-donerow { opacity: .7; }
.wg-sr-donebox summary { cursor: pointer; font-size: 12px; color: var(--muted); font-weight: 700; padding: 4px 0; }

/* 12. 퀴즈 */
.wg-qz-q { font-weight: 800; font-size: 15px; line-height: 1.4; }
.wg-qz-opts { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.wg-qz-opt { display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--c-card, var(--card)); font-size: 14px; }
.wg-qz-opt:hover:not(:disabled) { border-color: var(--c-primary, var(--brand)); background: var(--brand-soft); }
.wg-qz-opt:disabled { opacity: .7; cursor: default; }
.wg-qz-opt.picked { opacity: 1; border-color: var(--c-primary, var(--brand)); background: var(--brand-soft); }
.wg-qz-no { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--paper); flex-shrink: 0; }
.wg-qz-mark, .wg-qz-res em, .wg-pd-head em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--c-primary, var(--brand)); font-weight: 700; }
.wg-qz-res { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); font-size: 13px; }
.wg-qz-res.correct { border-color: #2FAE62; background: #E9F8EE; }
.wg-qz-res.correct .wg-x-bar-fill { background: #2FAE62; }
.wg-qz-res.picked:not(.correct) { border-color: var(--danger); }
.wg-qz-res-head { display: flex; align-items: center; gap: 8px; }
.wg-qz-res-txt { flex: 1; min-width: 0; }
.wg-qz-res-pct { font-weight: 800; }
.wg-qz-verdict, .wg-pd-verdict { font-weight: 800; font-size: 15px; color: var(--c-primary, var(--brand)); }
.wg-qz-explain { font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--paper); }

/* 14. 승부 예측 */
.wg-pd-q { font-weight: 800; font-size: 15px; line-height: 1.4; }
.wg-pd-q small { font-size: 12px; color: var(--muted); font-weight: 400; }
.wg-pd-opts { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.wg-pd-opt { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--c-card, var(--card)); font-size: 14px; }
.wg-pd-opt:hover:not(:disabled) { border-color: var(--c-primary, var(--brand)); }
.wg-pd-opt:disabled { cursor: default; }
.wg-pd-opt.picked { border-color: var(--c-primary, var(--brand)); background: var(--brand-soft); }
.wg-pd-opt.win { border-color: var(--c-accent, var(--amber)); box-shadow: inset 0 0 0 1px var(--c-accent, var(--amber)); }
.wg-pd-opt.win .wg-x-bar-fill { background: var(--c-accent, var(--amber)); }
.wg-pd-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.wg-pd-verdict small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }

/* 15. 건의함 */
.wg-sg-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wg-sg-row:last-child { border-bottom: none; }
.wg-sg-row.done { background: linear-gradient(90deg, var(--brand-soft), transparent); border-radius: 10px; padding-left: 6px; }
.wg-sg-like { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--c-card, var(--card)); font-size: 15px; line-height: 1; flex-shrink: 0; }
.wg-sg-like b { font-size: 11px; color: var(--muted); }
.wg-sg-like.on { border-color: var(--c-primary, var(--brand)); background: var(--brand-soft); }
.wg-sg-like.on b { color: var(--c-primary, var(--brand)); }
.wg-sg-body { flex: 1; min-width: 0; }
.wg-sg-text { word-break: break-word; }
.wg-sg-badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: var(--c-primary, var(--brand)); color: #fff; margin-right: 5px; vertical-align: 1px; }
.wg-sg-by { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* 16. 참석 신청 */
.wg-rsvp-when { font-size: 13px; font-weight: 700; }
.wg-rsvp-count { font-size: 14px; }
.wg-rsvp-count b { font-family: var(--font-display); font-size: 26px; color: var(--c-primary, var(--brand)); }
.wg-rsvp-nocap .wg-x-bar-fill { opacity: .35; }
.wg-rsvp-btn { align-self: flex-start; }

/* 17. 미션 챌린지 */
.wg-ms-num { font-size: 15px; }
.wg-ms-num b { font-family: var(--font-display); font-size: 30px; color: var(--c-primary, var(--brand)); }
.wg-ms-num small { margin-left: 6px; font-size: 12px; color: var(--muted); }
.wg-ms-meta { font-size: 12px; color: var(--muted); }
.wg-ms.done .wg-ms-meta { color: var(--c-primary, var(--brand)); font-weight: 700; }
.wg-ms.done .wg-x-bar-fill { background: var(--c-accent, var(--amber)); }

/* 18. 낙서 방명록 */
.wg-db-grid { overflow-y: auto; min-height: 0; align-content: start; }
.wg-db-thumb { border: 1px solid var(--line); background: #fff; }
.wg-db-thumb img { object-fit: contain; }
.wg-db-big { width: 100%; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.wg-db-cap { margin-top: 8px; font-size: 13px; color: var(--muted); }
.wg-db-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wg-db-colors, .wg-db-sizes { display: flex; gap: 6px; }
.wg-db-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.wg-db-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c-primary, var(--brand)); }
.wg-db-size { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--c-card, var(--card)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wg-db-size i { display: block; border-radius: 50%; background: var(--c-text, var(--ink)); }
.wg-db-size.on { border-color: var(--c-primary, var(--brand)); background: var(--brand-soft); }
.wg-db-canvas { display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 10; margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }

/* 19. 채팅 규칙 동의 */
.wg-cr-list { padding-left: 22px; margin: 0; font-size: 13px; line-height: 1.5; display: block; }
.wg-cr-list li { padding: 3px 0; }
.wg-cr-list li::marker { color: var(--c-primary, var(--brand)); font-weight: 800; }
.wg-cr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.wg-cr-btn.done { color: var(--c-primary, var(--brand)); opacity: 1; }

/* 20. 사망·승리 카운터 */
.wg-dc { justify-content: center; text-align: center; }
.wg-dc-main { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.wg-dc-icon { font-size: clamp(22px, 5vw, 30px); }
.wg-dc-num { font-family: var(--font-display); font-size: clamp(36px, 9vw, 56px); line-height: 1; color: var(--c-primary, var(--brand)); font-variant-numeric: tabular-nums; display: inline-block; }
.wg-dc-num.pop { animation: wgx-pop .4s ease; }
.wg-dc-unit { font-size: 14px; color: var(--muted); }
.wg-dc-ctl { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.wg-dc-btn { min-width: 52px; font-weight: 800; }

/* 21. 방송 준비 체크 */
.wg-sp-prog { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; }
.wg-sp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 8px; border-radius: 10px; background: var(--paper); cursor: default; }
label.wg-sp-row { cursor: pointer; }
.wg-sp-row input { accent-color: var(--c-primary, var(--brand)); width: 16px; height: 16px; flex-shrink: 0; }
.wg-sp-row.on { background: var(--brand-soft); }
.wg-sp-row.on > span:last-child { text-decoration: line-through; color: var(--muted); }
.wg-sp-mark { flex-shrink: 0; }

/* 13. 시청자 어록 */
.wg-qw-box { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 8px 12px; border-radius: 14px; background: var(--paper); overflow: auto; }
.wg-qw-quote { font-family: var(--font-display); font-size: clamp(16px, 3.4vw, 22px); line-height: 1.45; word-break: keep-all; }
.wg-qw-quote::before { content: '“'; color: var(--c-primary, var(--brand)); margin-right: 2px; }
.wg-qw-quote::after { content: '”'; color: var(--c-primary, var(--brand)); margin-left: 2px; }
.wg-qw-quote.swap { animation: wgx-fadein .35s ease; }
.wg-qw-who { margin-top: 8px; font-size: 13px; font-weight: 700; }
.wg-qw-by { font-size: 11px; color: var(--muted); margin-top: 2px; }
.wg-qw-next { align-self: center; }

/* 애니메이션 */
@keyframes wgx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes wgx-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,174,98,.5); } 100% { box-shadow: 0 0 0 8px rgba(47,174,98,0); } }
@keyframes wgx-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .wg-rx-btn.pop .wg-rx-emo, .wg-dc-num.pop, .wg-onl-dot, .wg-qw-quote.swap { animation: none; }
  .wg-x-bar-fill, .wg-rt-star { transition: none; }
}