/* hidden 속성은 브라우저 기본 스타일이 display:none 으로 처리하는데, 아래에서
   display:flex 를 주면 그 기본값이 밀린다. 그러면 닫혀 있어야 할 패널이 처음부터
   열린 채로 그려진다. 속성 선택자로 다시 눌러 준다. */
.pgfab[hidden],.pgwrap[hidden],.pgform[hidden],.pgme[hidden],.pglist[hidden],.pgsheet[hidden],
.pgpoll[hidden],.pgcmd[hidden]{display:none}
.pgfab{position:fixed;right:20px;bottom:20px;z-index:40;border:0;cursor:pointer;
  height:52px;border-radius:999px;padding:0 20px 0 12px;display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,#FF7EC0 0%,var(--accent) 60%,var(--pinkink) 100%);
  color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;
  box-shadow:0 12px 26px -8px rgba(196,38,126,.65)}
.pgfab:hover{filter:brightness(1.05)}
.pgfab:focus-visible{outline:3px solid var(--pinkink);outline-offset:3px}
.pgfab .pgspin{transform-origin:14px 14px}
.pgfab:hover .pgspin,.pgfab:focus-visible .pgspin{animation:pgturn 5s linear infinite}
@keyframes pgturn{to{transform:rotate(360deg)}}
.pgfab-n{background:#fff;color:var(--pinkink);border-radius:999px;font-size:11px;
  font-weight:700;padding:1px 8px;line-height:1.6}
@media (max-width:760px){
  .pgfab{right:14px;bottom:14px;height:48px;padding:0 17px 0 11px}
  .pgfab-t{display:none}
  .pgfab{padding:0 13px}
}

.pgwrap{position:fixed;right:20px;bottom:20px;z-index:50;width:352px;height:min(520px,78vh);
  display:flex;flex-direction:column;background:var(--card);border:2px solid var(--soft);
  border-radius:26px;overflow:hidden;box-shadow:0 26px 56px -18px rgba(196,38,126,.5)}
@media (max-width:760px){
  .pgwrap{right:0;bottom:0;left:0;top:0;width:auto;height:auto;border-radius:0;border:0}
}

.pghead{flex:0 0 auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;
  padding:14px 15px;color:#fff;
  background:linear-gradient(135deg,#FF7EC0 0%,var(--accent) 58%,var(--pinkink) 100%)}
/* 오른쪽 위 장식. pointer-events 를 꺼야 한다 — 이 원이 닫기 단추 위를 덮고
   있어서, 누르면 단추가 아니라 이 원이 눌렸고 패널이 닫히지 않았다. */
.pghead::after{content:"";position:absolute;right:-28px;top:-34px;width:100px;height:100px;
  border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none}
.pgmark{font-size:19px;font-weight:800;letter-spacing:-.02em;position:relative}
.pgsub{font-size:11px;font-weight:600;opacity:.92;margin-left:auto;position:relative}
.pgx{position:relative;flex:0 0 auto;width:27px;height:27px;border:0;border-radius:50%;
  background:rgba(255,255,255,.24);color:#fff;font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.pgx:hover{background:rgba(255,255,255,.36)}
.pgx:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 손가락으로 누르는 화면에서는 단추를 키운다. 27px 은 빗나가기 쉽다. */
@media (max-width:760px){.pgx{width:40px;height:40px;font-size:22px}}

.pgme{flex:0 0 auto;background:var(--cream);border-bottom:1px solid var(--rule);
  padding:8px 15px;font-size:11px;color:var(--ink2);display:flex;gap:6px;align-items:baseline}
.pgme b{font-weight:700}

.pglist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 15px;display:flex;flex-direction:column;gap:11px;
  background:radial-gradient(circle at 12% 6%,rgba(251,200,226,.45) 0,transparent 40%),
             radial-gradient(circle at 88% 74%,rgba(255,247,234,.85) 0,transparent 44%),var(--card)}
.pglist::-webkit-scrollbar{width:6px}
.pglist::-webkit-scrollbar-thumb{background:var(--soft);border-radius:3px}
.pgnote{margin:auto;font-size:12px;color:var(--ink2);text-align:center;line-height:1.6;
  padding:0 20px}

.pgmsg{display:flex;flex-direction:column;gap:3px;animation:pgpop .24s ease both}
/* 이름 색은 두 벌을 심어 두고 화면 설정에 따라 고른다. 흰 바탕에서 읽히려면
   어두워야 하고 검은 바탕에서 읽히려면 밝아야 해서 한 색으로는 안 된다. */
.pgmsg .who,.pgme b{color:var(--nick,var(--ink))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pgmsg .who,
  :root:not([data-theme="light"]) .pgme b{color:var(--nickd,var(--ink))}}
.pgmsg .who{font-size:10.5px;font-weight:700;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pgmsg .who i{font-style:normal;color:var(--ink2);font-weight:500;margin-left:5px;font-size:9.5px}
.pgmsg .say{align-self:flex-start;background:var(--surface);color:var(--ink);
  border-radius:4px 15px 15px 15px;padding:8px 12px;font-size:13px;line-height:1.55;
  max-width:88%;word-break:break-word;overflow-wrap:anywhere}
.pgmsg .say a{color:var(--pinkink);text-decoration:underline;text-underline-offset:2px}
.pgmsg.mine{align-items:flex-end}
.pgmsg.mine .say{align-self:flex-end;border-radius:15px 4px 15px 15px;
  background:var(--accent);color:#fff}
.pgmsg.mine .say a{color:#fff}
.pgmsg.mine .who{align-self:flex-end}
@keyframes pgpop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* position:relative — 명령 목록(.pgcmd)을 입력줄 바로 위에 띄우는 기준이다 */
.pgform{flex:0 0 auto;position:relative;display:flex;gap:8px;align-items:center;padding:10px 12px;
  border-top:1px solid var(--rule);background:var(--card)}
.pgform input{flex:1;min-width:0;border:1.5px solid var(--rule);border-radius:999px;
  padding:10px 15px;font-size:13px;font-family:inherit;background:var(--bg);color:var(--ink)}
.pgform input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.pgsend{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--accent);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.pgsend:hover{filter:brightness(1.07)}
.pgsend[aria-disabled="true"]{opacity:.45;cursor:default}
.pgrule{flex:0 0 auto;margin:0;padding:0 15px 11px;font-size:9.5px;line-height:1.5;
  color:var(--ink2);background:var(--card)}
/* 못 보낸 이유. 예전에는 입력칸 placeholder 로만 알렸는데, 실패하면 쓴 글이
   그대로 남아 있어서 placeholder 가 가려진다 — 아무 일도 안 일어난 것처럼 보였다. */
.pgwarn{flex:0 0 auto;margin:0;padding:9px 15px 11px;font-size:11.5px;font-weight:700;
  line-height:1.45;color:var(--pinkink);background:var(--surface);
  border-top:1px solid var(--rule)}
.pgwarn[hidden]{display:none}

/* ── 투표 ──────────────────────────────────────────────────────────
   글씨가 올라가는 단추 면은 --btn/--onbtn 을 쓴다. --accent(#F056A8) 위 흰 글씨는
   3.2:1 이라 작은 글씨 기준에 못 미친다. */

/* 머리말 단추. position:relative 가 없으면 .pghead::after 장식 원이 단추 위에 그려진다 */
.pgpoll{position:relative;flex:0 0 auto;width:27px;height:27px;border:0;border-radius:50%;padding:0;
  background:rgba(255,255,255,.24);color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.pgpoll:hover{background:rgba(255,255,255,.36)}
.pgpoll:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pgpoll.on{background:#fff;color:#C4267E}
/* 배지 색은 고정이다. var(--pinkink) 를 쓰면 다크 화면에서 흰 면 위 1.95:1 이 된다 */
.pgpoll-n{position:absolute;top:-5px;right:-7px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:#fff;color:#C4267E;font:700 10px/17px var(--mono);text-align:center;
  box-shadow:0 0 0 1.5px #C4267E}
@media (max-width:760px){
  .pgpoll{width:40px;height:40px}
  .pgpoll svg{width:18px;height:18px}
  .pgpoll-n{top:-3px;right:-5px;min-width:19px;height:19px;line-height:19px;font-size:11px}
}
.pgic{display:inline-flex;flex:0 0 auto}

/* 명령 자동완성. 입력줄 위에 붙고 패널 안에서 끝난다 */
.pgcmd{position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);z-index:3;background:var(--card);
  border:1.5px solid var(--soft);border-radius:16px;box-shadow:0 16px 34px -14px rgba(196,38,126,.55);
  padding:6px;display:flex;flex-direction:column;gap:2px}
.pgcmd-h{display:flex;justify-content:space-between;align-items:center;padding:3px 8px 5px;
  font-size:10px;font-weight:700;color:var(--ink2)}
.pgcmd-h .num{font-weight:500}
.pgcmd-s{display:flex;flex-direction:column;gap:2px;max-height:min(250px,40vh);overflow-y:auto}
.pgcmd-i{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;
  min-height:48px;cursor:pointer}
.pgcmd-i.on{background:var(--surface)}
.pgcmd-i.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;
  background:var(--pinkink)}
.pgcmd-ic{width:30px;height:30px;border-radius:9px;background:var(--surface);color:var(--pinkink);
  flex-shrink:0;display:flex;align-items:center;justify-content:center}
.pgcmd-i.on .pgcmd-ic{background:var(--card)}
.pgcmd-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pgcmd-n{font-size:13px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px}
.pgcmd-n u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:var(--pinkink)}
.pgcmd-n .al{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--ink2)}
.pgcmd-d{font-size:11px;color:var(--ink2);line-height:1.4;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pgcmd-d.warn{color:var(--pinkink);font-weight:700;display:flex;align-items:center;gap:4px}
.pgcmd-f{border-top:1px solid var(--rule);margin-top:3px;padding:7px 8px 2px;display:flex;gap:12px;
  font-size:10px;color:var(--ink2);align-items:center}
.pgkbd{display:inline-block;font:600 9.5px/1 var(--mono);color:var(--ink2);border:1px solid var(--rule);
  border-bottom-width:2px;border-radius:5px;padding:3px 5px;background:var(--card);margin-right:3px}
.pgcmd-i .pgkbd{margin:0}
/* 폰에는 키보드가 없다. 키 안내를 숨기고 손가락 높이로 키운다 */
@media (max-width:760px){.pgcmd-i{min-height:52px}.pgcmd-f,.pgcmd-i .pgkbd{display:none}}

/* 시트 — 대화 목록 자리를 덮는다. 머리말은 그대로 둔다 */
.pgsheet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:var(--card)}
.pgsheet-top{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-bottom:1px solid var(--rule);min-height:46px}
.pgback{height:28px;padding:0 11px 0 9px;border:0;border-radius:999px;background:var(--surface);
  color:var(--pinkink);font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:3px;
  flex-shrink:0;cursor:pointer}
.pgback:focus-visible{outline:2px solid var(--pinkink);outline-offset:2px}
.pgsheet-t{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:0}
.pgsheet-m{margin-left:auto;font-size:10.5px;color:var(--ink2);display:flex;align-items:center;gap:4px}
.pgsheet-m b{color:var(--pinkink);font-family:var(--mono)}
.pgsheet-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:13px 15px;
  display:flex;flex-direction:column;gap:13px}
.pgsheet-b::-webkit-scrollbar{width:6px}
.pgsheet-b::-webkit-scrollbar-thumb{background:var(--soft);border-radius:3px}
.pgsheet-f{flex:0 0 auto;border-top:1px solid var(--rule);padding:10px 12px;display:flex;
  align-items:center;gap:10px;background:var(--card)}
.pgsay{flex:1;min-width:0;font-size:10.5px;line-height:1.45;color:var(--ink2);margin:0}
.pgsay b{color:var(--ink)}
.pgsay.warn{color:var(--pinkink);font-weight:700;display:flex;align-items:center;gap:5px}
@media (max-width:760px){.pgback{height:36px;padding:0 13px 0 11px}}

/* 만들기 칸 */
.pgf{display:flex;flex-direction:column;gap:6px}
.pgf-h{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:700}
.pgf-h label,.pgf-h>span:first-child{color:var(--ink)}
.pgf-h .num{font-size:10px;font-weight:500;color:var(--ink2)}
.pgf-h .num.over{color:var(--pinkink);font-weight:800}
.pgf-h .hint{font-size:10.5px;font-weight:500;color:var(--ink2);margin-left:6px}
.pgin{height:36px;width:100%;min-width:0;border:1.5px solid var(--rule);border-radius:12px;padding:0 12px;
  font-size:13px;font-family:inherit;background:var(--bg);color:var(--ink)}
.pgin::placeholder{color:var(--ink2)}
.pgin:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.pgin[aria-invalid="true"]{border:2px solid var(--pinkink);background:var(--surface)}
.pgerr{display:flex;gap:5px;align-items:flex-start;font-size:11px;font-weight:700;color:var(--pinkink);
  line-height:1.45;margin:0}
.pgerr[hidden]{display:none}
.pgerr .pgic{margin-top:1.5px}
.pgitem{display:flex;gap:6px;align-items:center}
.pgitem .no{width:16px;font:500 10px var(--mono);color:var(--ink2);text-align:right;flex-shrink:0}
.pgitem .pgin{flex:1}
.pgitem-e{padding-left:22px}
.pgdel{width:28px;height:28px;border:0;border-radius:50%;background:var(--surface);color:var(--pinkink);
  font-size:15px;font-weight:700;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0}
.pgdel[aria-disabled="true"]{opacity:.35;cursor:default}
.pgadd{height:32px;border:1.5px dashed var(--soft);border-radius:12px;background:transparent;
  color:var(--pinkink);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
  gap:5px;margin-left:22px;cursor:pointer}
.pgadd[aria-disabled="true"]{color:var(--ink2);border-color:var(--rule);cursor:default}
.pgsw{display:flex;align-items:center;gap:10px}
.pgsw .t{flex:1;display:flex;flex-direction:column;gap:1px;font-size:12px;font-weight:700;cursor:pointer}
.pgsw .t span{font-size:10.5px;font-weight:500;color:var(--ink2)}
.pgsw .sv{font-size:10.5px;font-weight:700;color:var(--ink2);min-width:16px;text-align:right}
.pgtrack{width:36px;height:21px;border-radius:999px;background:var(--rule);position:relative;flex-shrink:0;
  border:1.5px solid var(--ink2);padding:0;cursor:pointer}
.pgtrack::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--ink2)}
.pgtrack[aria-checked="true"]{background:var(--btn);border-color:var(--btn)}
.pgtrack[aria-checked="true"]::after{left:17px;background:var(--onbtn)}
.pgtrack:focus-visible,.pgchip:focus-visible,.pgdel:focus-visible,.pgadd:focus-visible,.pgbtn:focus-visible,
.pgrow:focus-visible,.pgopt:focus-visible{outline:2px solid var(--pinkink);outline-offset:2px}
.pgchips{display:flex;gap:6px;flex-wrap:wrap}
.pgchip{height:30px;padding:0 12px;border-radius:999px;border:1.5px solid var(--rule);font-size:12px;
  font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:4px;background:var(--card);
  cursor:pointer;font-family:inherit}
.pgchip[aria-checked="true"]{background:var(--btn);border-color:var(--btn);color:var(--onbtn);font-weight:800}
.pgchip .pgic{display:none}
.pgchip[aria-checked="true"] .pgic{display:inline-flex}
@media (max-width:760px){
  /* 16px 아래 입력칸은 iOS 가 포커스할 때 화면을 확대한다 */
  .pgin{height:42px;font-size:16px}
  .pgdel{width:36px;height:36px}
  .pgadd{height:40px}
  .pgchip{height:38px;padding:0 15px;font-size:13px}
  /* 손가락 목표. 스위치는 36×21 이면 빗나가기 쉽다 */
  .pgtrack{width:48px;height:28px}
  .pgtrack::after{width:20px;height:20px;top:2.5px;left:2.5px}
  .pgtrack[aria-checked="true"]::after{left:23px}
  .pgend{min-height:44px;padding:10px 14px}
}

/* 단추와 상태 표 */
.pgbtn{height:38px;padding:0 18px;border:0;border-radius:999px;background:var(--btn);color:var(--onbtn);
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;
  flex-shrink:0;cursor:pointer;font-family:inherit}
.pgbtn.full{flex:1}
.pgbtn[aria-disabled="true"]{opacity:.45;cursor:default}
@media (max-width:760px){.pgbtn{height:46px;font-size:14.5px}}
.pgst{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;padding:2px 8px;
  border-radius:999px;white-space:nowrap}
.pgst.live{color:var(--onbtn);background:var(--btn)}
.pgst.live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--onbtn)}
.pgst.done{color:var(--ink2);border:1px solid var(--ink2);padding:1px 7px}
.pgst.mine{color:var(--pinkink);background:var(--surface)}
.pgst.multi{color:var(--ink2);background:var(--surface)}

/* 목록 */
.pgsec{display:flex;align-items:baseline;gap:6px;font-size:11.5px;font-weight:800;margin:0}
.pgsec .num{font-size:10.5px;font-weight:500;color:var(--ink2)}
.pgrows{display:flex;flex-direction:column;gap:7px}
.pgrow{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--rule);
  border-radius:14px;background:var(--card);text-align:left;width:100%;cursor:pointer;font-family:inherit;
  color:var(--ink)}
.pgrow:hover{border-color:var(--soft)}
.pgrow.done{background:var(--bg)}
.pgrow-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pgrow-t{font-size:13px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.pgrow-s{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:10.5px;color:var(--ink2)}
.pgrow-r{flex-shrink:0;display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;white-space:nowrap}
.pgrow-r.yes{color:var(--pinkink)}
.pgrow-r.lock{color:var(--ink2)}
.pgchev{font-size:16px;color:var(--ink2);font-weight:500;line-height:1;margin-left:1px}
.pgnick{color:var(--nick,var(--ink));font-weight:700}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pgnick{color:var(--nickd,var(--ink))}}
.pghint{font-size:10.5px;color:var(--ink2);text-align:center;padding:2px 0 0;margin:0}
.pghint b{color:var(--pinkink);font-family:var(--mono);font-weight:600}
.pgcenter{align-items:center;justify-content:center;text-align:center}
.pgbig{width:52px;height:52px;border-radius:50%;background:var(--surface);color:var(--pinkink);
  display:flex;align-items:center;justify-content:center}
.pgcenter-t{font-size:15px;font-weight:800;margin:0}
.pgcenter-p{font-size:11.5px;color:var(--ink2);line-height:1.6;margin:0;max-width:260px}
.pgcenter .pgrow{text-align:left}

/* 투표 화면 */
.pgq{display:flex;flex-direction:column;gap:6px}
.pgq-t{font-size:15.5px;font-weight:800;line-height:1.4;letter-spacing:-.015em;margin:0;overflow-wrap:anywhere}
.pgq-t:focus{outline:none}
.pgq-t:focus-visible{outline:2px solid var(--pinkink);outline-offset:3px;border-radius:4px}
.pgq-s{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:10.5px;color:var(--ink2)}
.pgnotice{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:12px;
  background:var(--cream);font-size:11px;line-height:1.55;color:var(--ink);margin:0}
.pgnotice .pgic{margin-top:2px;color:var(--ink2)}
.pgopts{display:flex;flex-direction:column;gap:6px}
.pgopt{border:1.5px solid var(--rule);border-radius:12px;padding:9px 11px;display:flex;flex-direction:column;
  gap:6px;background:var(--card);text-align:left;width:100%;font-family:inherit;color:var(--ink)}
button.pgopt{cursor:pointer}
.pgopt.on,.pgopt.me{border-color:var(--pinkink)}
.pgopt.on{background:var(--surface)}
.pgopt-r{display:flex;align-items:center;gap:9px}
.pgmk{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink2);flex-shrink:0;display:flex;
  align-items:center;justify-content:center;color:var(--card)}
.pgmk.sq{border-radius:5px}
.pgopt.on .pgmk{border-color:var(--pinkink);background:var(--pinkink)}
.pgmk i{width:7px;height:7px;border-radius:50%;background:var(--card);display:none}
.pgopt.on .pgmk:not(.sq) i{display:block}
.pgmk .pgic{display:none}
.pgopt.on .pgmk.sq .pgic{display:inline-flex}
.pgopt-l{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.pgopt-v{font-family:var(--mono);font-size:11px;color:var(--ink);white-space:nowrap}
.pgopt-v span{color:var(--ink2)}
.pgopt-lk{color:var(--ink2)}
.pgbar{height:6px;border-radius:999px;background:var(--rule);overflow:hidden;display:block}
.pgbar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.pgbar.hid{background:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 5px),var(--surface)}
.pgopt.on .pgbar.hid{background:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 5px),var(--card)}
.pgmy{font-size:9.5px;font-weight:800;color:var(--onbtn);background:var(--btn);border-radius:999px;
  padding:2px 7px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.pglive{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:var(--pinkink);
  background:var(--surface);border-radius:999px;padding:2px 9px}
.pglive::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--soft)}
.pgfinal{font-size:11px;font-weight:800}
.pgtot{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--ink2)}
.pgtot b{color:var(--ink);font-family:var(--mono);font-weight:600}
@media (max-width:760px){.pgopt{padding:11px 12px}.pgopt-l{font-size:14px}}
.pgend{align-self:center;border:0;background:transparent;color:var(--ink2);font-size:11px;font-weight:700;
  font-family:inherit;text-decoration:underline;text-underline-offset:3px;padding:6px 10px;cursor:pointer;
  line-height:1.5;max-width:100%}
.pgend.arm{color:var(--pinkink);text-decoration:none;background:var(--surface);border-radius:12px}
.pgend:focus-visible{outline:2px solid var(--pinkink);outline-offset:2px}

/* 대화 안 투표 알림 카드 */
.pgsys{align-self:stretch;border:1.5px solid var(--soft);border-radius:14px;background:var(--card);
  padding:10px 12px;display:flex;flex-direction:column;gap:6px;text-align:left;font-family:inherit;
  color:var(--ink);cursor:pointer;animation:pgpop .24s ease both}
.pgsys:hover{border-color:var(--pinkink)}
.pgsys:focus-visible{outline:2px solid var(--pinkink);outline-offset:2px}
.pgsys-h{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:10.5px;color:var(--ink2)}
.pgsys-h .pgic{color:var(--pinkink)}
.pgsys-h b{color:var(--ink);font-weight:800}
.pgsys-t{font-size:13px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.pgsys-a{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;color:var(--ink2)}
.pgsys-a b{color:var(--pinkink);font-size:11.5px;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .pgmsg,.pgsys{animation:none}
  .pgfab:hover .pgspin,.pgfab:focus-visible .pgspin{animation:none}
}