/* Onullan — 패치노트 반응(좋아요·나빠요 · 의견 · 댓글). notice.css 위에 얹는다. 동작은 feedback.js, 서버는 apps/server/src/noticefb.ts */

/* ── 제목 바로 아래 한 줄: 좋아요 · 나빠요 · 의견란 ── */
.fb{padding:0 0 18px;max-width:760px}
.fb svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fb .dn svg{transform:rotate(180deg)}
.fb-btns{display:flex;flex-wrap:wrap;gap:8px}
.fb-r,.fb-open{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;background:var(--bg-3);border:1px solid transparent;color:var(--fg-2);font:700 13px 'Noto Sans KR',var(--text);white-space:nowrap;transition:transform .4s var(--ease),background .2s,border-color .2s,color .2s}
.fb-r b,.fb-open b{font:500 13px var(--mono);color:var(--fg)}
.fb-r:hover,.fb-open:hover{border-color:var(--fg-3);color:var(--fg)}
.fb-r:active,.fb-open:active{transform:scale(.96)}
.fb-r.up[aria-pressed=true]{background:var(--yolk);color:#000}
.fb-r.up[aria-pressed=true] b{color:#000}
.fb-r.dn[aria-pressed=true]{background:transparent;border-color:var(--fg-2);color:var(--fg)}
.fb-open{margin-left:auto;background:transparent;border-color:var(--line)}
.fb-open[aria-expanded=true]{border-color:var(--yolk);color:var(--yolk)}
.fb-open[aria-expanded=true] b{color:var(--yolk)}
.fb-r.pop svg{animation:fb-pop .5s var(--ease)}
@keyframes fb-pop{40%{transform:scale(1.5) rotate(-12deg)}}
.fb-r.dn.pop svg{animation-name:fb-pop-dn}
@keyframes fb-pop-dn{0%,100%{transform:rotate(180deg)}40%{transform:rotate(180deg) scale(1.4)}}
.fb-msg{margin:8px 0 0;font-size:12px;color:var(--rose)}
.fb-best{display:flex;gap:8px;align-items:baseline;width:100%;margin-top:10px;font-size:13px;color:var(--fg-2);text-align:left;min-width:0}
.fb-best[hidden],.fb-panel[hidden],.fb-msg[hidden],.pn-body[hidden]{display:none}
.fb-best q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;quotes:"\201C" "\201D";min-width:0}
.fb-best i{font-style:normal;color:var(--fg-3);white-space:nowrap}
.fb-best:hover q{color:var(--fg)}
@media (max-width:420px){.fb-r,.fb-open{padding:9px 11px;gap:6px}.fb-btns{gap:6px}}

/* ── 의견란 ── */
.fb-panel{margin-top:12px;padding:clamp(14px,2vw,20px);border-radius:18px;background:var(--bg-2);border:1px solid var(--line);animation:fb-in .5s var(--ease)}
.fb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.fb-head h4{margin:0;font:700 15px 'Noto Sans KR',var(--text)}
.fb-sort{display:flex;gap:2px;padding:3px;border-radius:99px;background:var(--bg-3)}
.fb-sort button{padding:6px 12px;border-radius:99px;font:500 12px 'Noto Sans KR',var(--text);color:var(--fg-3)}
.fb-sort button[aria-pressed=true]{background:var(--fg);color:#000;font-weight:700}
.fb-form{display:grid;gap:8px;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);transition:border-color .2s}
.fb-form:focus-within{border-color:var(--fg-3)}
.fb-form input,.fb-form textarea{width:100%;background:none;border:0;outline:0;color:var(--fg);font:400 14px/1.6 'Noto Sans KR',var(--text);resize:none;padding:0}
.fb-form input{font-weight:700;font-size:13px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.fb-form ::placeholder{color:var(--fg-3);font-weight:400}
.fb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fb-foot span{font:500 11px var(--mono);color:var(--fg-3)}
.fb-foot .err{color:var(--rose);font:500 12px 'Noto Sans KR',var(--text)}
.fb-send{padding:8px 16px;border-radius:99px;background:var(--yolk);color:#000;font:700 13px 'Noto Sans KR',var(--text);transition:opacity .2s,transform .4s var(--ease)}
.fb-send:disabled{opacity:.35;cursor:default}
.fb-send:not(:disabled):active{transform:scale(.95)}

/* ── 의견 목록 ── */
.fb-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.fb .fb-list,.fb .fb-rlist{padding-left:0}
.fb-empty{padding:22px 0 6px;text-align:center;color:var(--fg-3);font-size:14px}
.fb-post{padding:14px;border-radius:14px;background:var(--bg-3);border:1px solid transparent;animation:fb-in .5s var(--ease)}
@keyframes fb-in{from{opacity:0;transform:translateY(8px)}}
.fb-post.best{border-color:rgba(255,194,61,.45);background:linear-gradient(180deg,rgba(255,194,61,.08),transparent 60%),var(--bg-3)}
.fb-who{display:flex;align-items:center;gap:8px;min-width:0}
.fb-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 12px 'Noto Sans KR',var(--text);color:#000;background:var(--c,var(--fg-2))}
.fb-who b{font:700 13px 'Noto Sans KR',var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-who time{font-size:12px;color:var(--fg-3);white-space:nowrap}
.fb-tag{flex:none;padding:3px 7px;border-radius:99px;font:700 10px/1 var(--mono);letter-spacing:.06em;background:var(--yolk);color:#000}
.fb-tag.me{background:transparent;border:1px solid var(--line);color:var(--fg-2)}
.fb-tag.staff{background:var(--cyan)}
.fb-x{margin-left:auto;flex:none;font-size:12px;color:var(--fg-3);padding:4px 2px}
.fb-x:hover,.fb-x.sure{color:var(--rose)}
.fb-text{margin:10px 0 12px;font-size:14px;line-height:1.65;color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}
.fb-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fb-v,.fb-c{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:var(--bg-2);border:1px solid var(--line);font:500 12px var(--mono);color:var(--fg-2);transition:border-color .2s,color .2s,background .2s}
.fb .fb-v svg,.fb .fb-c svg{width:13px;height:13px}
.fb-v:not(:disabled):hover,.fb-c:hover{border-color:var(--fg-3);color:var(--fg)}
.fb-v:disabled{opacity:.5;cursor:default}
.fb-v.up[aria-pressed=true]{background:var(--yolk);border-color:var(--yolk);color:#000}
.fb-v.dn[aria-pressed=true]{border-color:var(--fg);color:var(--fg)}
.fb-c{font-family:'Noto Sans KR',var(--text)}
.fb-c[aria-expanded=true]{border-color:var(--fg-3);color:var(--fg)}
.fb-more{display:block;width:100%;margin-top:12px;padding:12px;border-radius:14px;border:1px solid var(--line);font:500 13px 'Noto Sans KR',var(--text);color:var(--fg-2)}
.fb-more:hover{border-color:var(--fg-3);color:var(--fg)}

/* ── 댓글 ── */
.fb-replies{margin-top:12px;padding-left:14px;border-left:2px solid var(--line);display:grid;gap:10px}
.fb-rlist{list-style:none;margin:0;display:grid;gap:12px}
.fb-rlist:empty{display:none}
.fb-reply{animation:fb-in .5s var(--ease)}
.fb-reply .fb-av{width:22px;height:22px;font-size:11px}
.fb-reply .fb-text{margin:6px 0 8px;font-size:13.5px}
.fb-reply.staff{padding:12px;border-radius:12px;background:rgba(47,211,232,.08);border:1px solid rgba(47,211,232,.3)}
.fb-replies .fb-form{padding:10px 12px}
@media (prefers-reduced-motion:reduce){.fb-post,.fb-reply,.fb-r.pop svg{animation:none}.fb-bar i{transition:none}}