/* [app.css 분할 9/10 · msgx.css] @태그 전송 · 답장 인용 · 인원 칩
   2026-08-23 리팩터 — 옛 app.css 를 원본 순서 그대로 10조각으로 나눴다.
   캐스케이드가 곧 계약이라 로드 순서를 바꾸면 안 된다:
   app.css → studio.css → rooms.css → orgwork.css → overlays.css → winmodes.css → plus.css → chrome.css → msgx.css → profile.css
   로드 지점: web/index.html, tests/harness/*.html */
/* ── @태그 메신저 전송 (msgtag.js) — 설계: ARCHITECTURE_MESSAGING_SEND.md ──
   드롭다운·힌트는 컴포저 위에 뜬다. z-index 85 = plusMenu 층(§5 사다리). */
#composer{position:relative}
/* 선두 @태그 파란 강조 — msgtag.js 가 같은 금속의 미러를 깔고 textarea 글자만
   투명화한다. 굵기는 text-stroke 가짜 볼드(진짜 bold 는 캐럿과 어긋남). */
#input{position:relative;z-index:1}
#input.has-tags{color:transparent;caret-color:#2f3450}
#tagMirror{position:absolute;z-index:0;pointer-events:none;overflow:hidden;box-sizing:border-box;
  white-space:pre-wrap;word-break:break-word;color:#2f3450;padding:4px 0}
#tagMirror .mt{color:#2f6bff;font-weight:inherit;-webkit-text-stroke:.4px currentColor}
#tagPop{position:absolute;bottom:calc(100% + 6px);left:16px;z-index:85;width:260px;
  padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px #27225d2e;display:flex;flex-direction:column;gap:1px}
#tagPop .tag-head{font-size:11.5px;color:var(--dim);padding:5px 9px 4px}
#tagPop .tag-it{display:flex;align-items:center;gap:8px;padding:7px 10px;
  border:0;border-radius:9px;background:none;text-align:left;font-size:13px;cursor:pointer}
#tagPop .tag-it small{color:var(--dim);font-size:11.5px}
#tagPop .tag-it:hover,#tagPop .tag-it.is-act{background:var(--hover)}
#tagHint{position:absolute;bottom:calc(100% + 6px);left:16px;z-index:85;
  padding:5px 11px;font-size:11.5px;color:#4a4f66;background:#fffffff2;
  border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 24px #27225d1a}

/* ── 수신자 칩 줄 #chipBar (msgtag.js, 경로 ③) — #composer 안, .comp-box 앞.
   flex-wrap + max-height 92px + overflow-y:auto 로 칩이 늘어도 짤림 감사 0
   (가드레일 §5.5)을 자체 흡수한다. 칩 0개면 msgtag.js 가 요소 자체를 제거. */
#chipBar{display:flex;flex-wrap:wrap;gap:6px;max-height:92px;overflow-y:auto;
  padding:6px 2px 2px}
.rc-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:12.5px;line-height:1.3;max-width:100%}
.rc-chip b{font-weight:600}
.rc-chip small{color:var(--dim);font-size:11px}
.rc-chip.mail-only{background:var(--hover)}
.rc-chip .rc-x{border:0;background:none;cursor:pointer;font-size:13px;
  line-height:1;color:var(--dim);padding:0 0 0 2px}
.rc-chip .rc-x:hover{color:inherit}
/* ✉ 아이콘 — 칩(.rc-chip)과 #tagPop 자동완성 항목 양쪽에서 재사용 */
.rc-mail{font-style:normal;font-size:11px;opacity:.75}

/* @@ 부서 드롭다운(msgtag.js) — #tagPop 과 같은 문법·같은 z-index 85 층 */
#deptPop{position:absolute;bottom:calc(100% + 6px);left:16px;z-index:85;width:260px;
  padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px #27225d2e;display:flex;flex-direction:column;gap:1px}
#deptPop .tag-head{font-size:11.5px;color:var(--dim);padding:5px 9px 4px}
#deptPop .tag-it{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:7px 10px;border:0;border-radius:9px;background:none;
  text-align:left;font-size:13px;cursor:pointer}
#deptPop .tag-it small{color:var(--dim);font-size:11.5px}
#deptPop .tag-it:hover,#deptPop .tag-it.is-act{background:var(--hover)}

/* AI 초안 발송 카드 — 말풍선 대신 카드형(전송 버튼은 항상 사람이 누른다) */
.draft-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  border-bottom-left-radius:6px;box-shadow:0 10px 30px #27225d0f;padding:12px 14px;
  max-width:92%;display:flex;flex-direction:column;gap:8px}
.draft-card .dc-head{font-size:12.5px;color:#4a4f66}
.draft-card .dc-body{font-size:13.5px;line-height:1.55;white-space:pre-wrap;
  background:#12183106;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.draft-card .dc-row{display:flex;align-items:center;gap:8px}
.draft-card .dc-send{border:0;border-radius:10px;padding:7px 16px;font-size:12.5px;
  color:#fff;background:var(--accent);cursor:pointer}
.draft-card .dc-send:disabled{opacity:.5;cursor:default}
.draft-card .dc-cancel{border:1px solid var(--line);border-radius:10px;padding:6px 13px;
  font-size:12.5px;background:none;color:#4a4f66;cursor:pointer}
.draft-card .dc-state{font-size:12px;color:var(--dim)}
/* 경로 ④ 파일 토스 — 발송 카드 첨부 칩 (draft.file 있을 때만 노출) */
.draft-card .dc-file{font-size:12.5px;color:#4a4f66;background:rgba(var(--accent-rgb),.06);
  border:1px solid rgba(var(--accent-rgb),.2);border-radius:10px;padding:7px 11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-card .dc-file[hidden]{display:none}

/* 발송 카드(경로 ③ — 칩 수신자, msgtag.js openSendCard) — .draft-card 문법 확장.
   버튼은 기존 .dc-send/.dc-cancel 클래스를 그대로 얹어(sc-msg/sc-mail 은 JS 선택용
   보조 클래스일 뿐) 신규 색상을 만들지 않는다(시큐어 톤 자동 승계). */
.send-card .sc-summary{font-size:12px;color:var(--dim)}
.send-card .sc-exclude{font-size:11.5px;color:var(--dim)}
.send-card .sc-subject{border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;font-size:13px;background:var(--card);color:inherit;
  font-family:inherit}

/* 사내 대화방 말풍선의 '아호비로 작성' 꼬리표 */
.co-msg .msg-via{display:block;font-size:10.5px;opacity:.62;margin-bottom:3px}

/* ── 단체방(G1, 2026-07-29) — docs/ARCHITECTURE_ROOMS_GROUP.md ──
   신규 색상은 만들지 않고 기존 변수(--line/--hover/--card/--accent)만 쓴다
   (시큐어 톤 자동 승계). */

/* 방 아바타: 단체방은 이니셜 대신 사람 아이콘 (coAvaSet, rooms.js) */
.r-ava.is-group .ico{width:17px;height:17px;vertical-align:0}

/* 말풍선 위 보낸사람 이름 */
.co-msg .m-who{display:block;font-size:11px;font-weight:650;opacity:.72;margin-bottom:2px}
/* 아직 안 읽은 참여자 수(카톡의 숫자) — 카톡과 같은 위치: 말풍선 **밖** 꼬리 쪽
   (내 메시지 왼쪽·상대 메시지 오른쪽) 아래, 시간 줄과 나란히 (2026-08-02 보스 지시).
   hover 액션 바(.co-acts)가 같은 자리에 뜨므로 hover 중에는 잠시 가린다(카톡식). */
.co-msg .m-un{position:absolute;bottom:3px;font-size:9.5px;font-weight:700;
  color:var(--accent);line-height:1}
.co-msg.me .m-un{right:calc(100% + 5px)}
.co-msg.peer .m-un{left:calc(100% + 5px)}
.co-msg:hover .m-un{visibility:hidden}

/* ── 답장 인용 블록(카톡식) — 말풍선 맨 위 (2026-08-02) ── */
.co-reply-q{display:block;margin:0 0 5px;padding:4px 8px;border-left:3px solid #ffffff66;
  border-radius:6px;background:#ffffff26;font-size:11.5px;line-height:1.4;cursor:pointer;max-width:100%}
.co-msg.peer .co-reply-q{border-left-color:var(--accent);background:var(--accent-soft)}
.co-reply-q b{display:block;font-weight:700;font-size:10.5px;opacity:.85;margin-bottom:1px}
.co-reply-q span{display:block;opacity:.82;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 답장 작성 바 — 입력줄 위(coReplySet/Clear, rooms.js). 컴포저 폭에 맞춰 짤림 없음 */
.co-reply-bar{display:flex;align-items:center;gap:8px;margin:0 2px 6px;padding:6px 10px;
  background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;font-size:12px}
.co-reply-bar .rb-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.co-reply-bar .rb-body b{font-weight:700;font-size:11px;color:var(--accent)}
.co-reply-bar .rb-text{opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-reply-bar .rb-x{border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:13px;flex:none;padding:2px 4px;line-height:1}

/* 메시지 리액션 칩 — 말풍선 아래 모서리에 겹쳐 (2026-08-02). has-react 가 아래 여백 확보 */
.co-msg.has-react{margin-bottom:13px}
.co-react{position:absolute;bottom:-11px;display:flex;gap:3px;z-index:2}
.co-msg.peer .co-react{left:8px}
.co-msg.me .co-react{right:8px}
.co-react .rc{display:inline-flex;align-items:center;gap:2px;font-size:12px;line-height:1.6;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:0 6px;
  cursor:pointer;box-shadow:0 2px 6px #27225d24;color:var(--text)}
/* 이모지 깨짐 방지: 본문 폰트(Pretendard 자체 호스팅)에는 컬러 이모지가 없어
   웹뷰가 폴백을 못 찾으면 네모(tofu)가 된다 — 이모지 요소는 폰트를 명시한다. */
.co-react .rc .re,.co-react-pick .rp{
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}
.co-react .rc.mine{background:var(--accent-soft);border-color:var(--accent)}
.co-react .rc .rn{font-weight:700;font-size:10.5px;opacity:.8}

/* 리액션 피커 — hover ☺ 가 띄우는 이모지 팔레트(coReactPickOpen). z-index 는 JS 가
   현재 맨 앞 창(coZ) 위로 동적 설정 — 여기 값은 폴백. */
.co-react-pick{position:fixed;z-index:150;display:flex;gap:2px;padding:5px 7px;
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 12px 32px -8px #34306255;opacity:0;transform:translateY(4px) scale(.96);
  pointer-events:none;   /* 등장 전·퇴장 중 투명 상태가 클릭을 먹지 않게 (§4.1 원칙) */
  transition:opacity var(--motion-dur-micro) var(--motion-ease-out),
             transform var(--motion-dur-micro) var(--motion-ease-out)}
.co-react-pick.show{opacity:1;transform:none;pointer-events:auto}
.co-react-pick .rp{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;
  padding:3px 4px;border-radius:8px;transition:transform .1s ease}
.co-react-pick .rp:hover{background:var(--hover);transform:scale(1.2)}

/* 입장·퇴장·이름 변경 안내 — 말풍선이 아니라 가운데 한 줄 */
.co-sys{align-self:center;max-width:88%;text-align:center;font-size:10.5px;
  color:#8a8fa3;background:#0000000a;border-radius:999px;padding:3px 12px}

/* 방 공지 배너(G3) — 헤더 바로 아래 한 줄. 클릭하면 전문이 펼쳐진다. */
.co-notice{display:flex;align-items:flex-start;gap:7px;padding:7px 10px;cursor:pointer;
  background:var(--accent-soft);border-bottom:1px solid var(--line);
  font-size:11.5px;line-height:1.5;color:#3a3f57;flex:none}
.co-notice:hover{filter:brightness(.985)}
.co-notice .ico{width:14px;height:14px;flex:none;color:var(--accent);margin-top:1px}
.co-notice .cn-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-notice.is-open .cn-t{white-space:normal;overflow:visible;max-height:6.4em;overflow-y:auto}
.co-notice .cn-x{border:0;background:0 0;color:#8a8fa3;font-size:11px;line-height:1;
  padding:2px 4px;border-radius:6px;flex:none}
.co-notice .cn-x:hover{background:#00000010;color:#c94257}
/* 서랍의 공지 전문 */
.rm-notice{background:var(--accent-soft);border-radius:10px;padding:9px 11px;margin:2px 2px 6px}
.rm-notice p{margin:0 0 5px;font-size:12.5px;line-height:1.55;color:#2f3450;white-space:pre-wrap;
  word-break:break-word}
.rm-notice small{font-size:10.5px;color:#8a8fa3}

/* 첨부파일 카드(G2) — 말풍선 안, 클릭하면 /roomfile/{id} 로 내려받는다 */
.co-msg .msg-file{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;
  background:#0000000a;border-radius:10px;padding:7px 9px;margin:1px 0 2px;max-width:100%}
.co-msg.me .msg-file{background:#ffffff2e}
.co-msg .msg-file:hover{background:#00000014}
.co-msg.me .msg-file:hover{background:#ffffff40}
.co-msg .msg-file .ico{width:19px;height:19px;flex:none;opacity:.8}
.co-msg .msg-file .mf-b{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.co-msg .msg-file b{font-weight:600;font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-msg .msg-file small{font-size:10.5px;opacity:.62}
/* 서랍 '파일 모아보기' 줄 — .rm-hit 을 a 로 쓰므로 아이콘 자리만 더한다 */
.rm-hit .ico{width:15px;height:15px;flex:none;opacity:.66}
a.rm-hit{text-decoration:none;color:inherit}

/* 서랍의 대화상대 목록 */
.rm-people{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px}
.rm-person{display:flex;align-items:center;gap:9px;padding:6px 9px;font-size:12.5px}
.rm-person .r-ava{width:26px;height:26px;border-radius:50%;flex:none;color:#fff;
  background:linear-gradient(145deg,#222a49,#0c1127);display:grid;place-items:center;font-size:10px}
.rm-person b{font-weight:650;color:#2f3450}
.rm-person small{color:#9298a8;font-size:11px}

/* ── 방 헤더 인원 칩 + 대화상대 팝오버 (roompeople.js, 2026-08-03 보스 지시) ──
   단체방·토픽에서만 붙는다. 자리는 제목과 창 버튼(☰ ⧉ ㅡ ✕) 사이 —
   우상단 예약 구역(§2)은 건드리지 않는다. 좁은 창에서 제목을 밀어내지 않게
   flex:none + 아바타 스택은 넉넉한 폭에서만 보인다(§5.5 짤림 제로). */
.cm-people{display:flex;align-items:center;gap:5px;flex:none;height:24px;padding:0 8px 0 4px;
  border:1px solid var(--line);border-radius:999px;background:#ffffffb8;cursor:pointer;
  color:#6b7186;font:inherit;line-height:1}
.cm-people:hover{background:var(--card);border-color:rgba(var(--accent-rgb),.4)}
.cm-people.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.cm-people .ico{width:13px;height:13px;vertical-align:0;opacity:.75}
.cm-people b{font-size:11.5px;font-weight:700;letter-spacing:.2px}
.pp-stack{display:flex;align-items:center;padding-left:6px}
/* 겹친 미니 아바타 — .cm-head .r-ava(26px)·#popRoom .cm-head .r-ava(30px)를
   덮어야 해서 같은 id 명시도로 한 번 더 적는다(하드코딩 아님, 크기만 오버라이드) */
.cm-people .pp-mini,#popRoom .cm-head .cm-people .pp-mini{width:19px;height:19px;font-size:7.5px;
  border-radius:50%;margin-left:-6px;box-shadow:0 0 0 1.5px #fff;overflow:hidden;box-sizing:content-box}
.cm-people .pp-mini:first-child{margin-left:0}
/* 미니창(260~)은 제목이 먼저다 — 스택을 접고 아이콘+숫자만 남긴다.
   그래도 좁은 폭에선 칩(47px)이 제목을 0 으로 눌러버려(실측: 260px 에서 48→1px,
   UI_GUARDRAILS §3 "형제 실측 폭" 사고와 같은 패턴) 넓을 때만 칩을 보인다.
   .cm-wide 는 rooms.js coWinWide() 가 창 폭 340px 이상일 때 붙인다. */
.co-mini .pp-stack{display:none}
.co-mini:not(.cm-wide) .cm-people{display:none}

/* 팝오버 본체 — z 87: .co-mini(80)·plusMenu(85)·engPop(86) 위,
   #profCard(89) 아래(목록에서 연 프로필 카드가 이 위에 떠야 한다). §5 사다리 */
/* .aho-anim 계약(roompeople.js 가 ahoShow/ahoHide 로 여닫는다) */
.aho-people{position:fixed;z-index:87;width:242px;padding:6px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -14px #10162d5c}
.pp-head{padding:6px 9px 5px;font-size:11.5px;font-weight:700;color:#9298a8}
.pp-list{display:flex;flex-direction:column;gap:1px;max-height:min(52vh,340px);overflow-y:auto}
.pp-it{display:flex;align-items:center;gap:9px;width:100%;border:0;background:0 0;
  padding:6px 9px;border-radius:10px;text-align:left;color:inherit;cursor:pointer;font:inherit}
.pp-it:hover{background:var(--hover)}
.pp-it.is-flat{cursor:default}
.pp-it.is-flat:hover{background:0 0}
.pp-it .r-ava{width:28px;height:28px;border-radius:50%;flex:none;color:#fff;overflow:hidden;
  background:linear-gradient(145deg,#222a49,#0c1127);display:grid;place-items:center;font-size:10px}
.pp-body{flex:1;min-width:0;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pp-body b{font-size:12.5px;font-weight:650;color:#2f3450;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-body small{font-size:11px;color:#9298a8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-me{font-style:normal;font-size:10px;font-weight:700;color:var(--accent-deep);
  background:var(--accent-soft);border-radius:999px;padding:1px 6px;flex:none}
.pp-inv{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  margin-top:4px;padding:8px;border:0;border-top:1px solid var(--line);border-radius:0 0 9px 9px;
  background:0 0;color:#5a6076;font:inherit;font-size:12.5px;cursor:pointer}
.pp-inv:hover{background:var(--hover);color:var(--accent-deep)}
.pp-inv .ico{width:15px;height:15px;vertical-align:0}

/* 초대 · 새 단체방 모달 (roomnew.js) — #modal 안이라 z 사다리(90) 그대로 */
.rn-search{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 11px;
  font-size:13px;background:var(--card);color:inherit;font-family:inherit;margin-bottom:8px}
.rn-search:focus{border-color:rgba(var(--accent-rgb),.35);outline:0}
.rn-list{max-height:min(46vh,300px);overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.rn-it{display:flex;align-items:center;gap:9px;width:100%;border:0;background:0 0;
  text-align:left;padding:7px 9px;border-radius:10px;cursor:pointer;color:inherit}
.rn-it:hover{background:var(--hover)}
.rn-it .r-ava{width:28px;height:28px;border-radius:50%;flex:none;color:#fff;
  background:linear-gradient(145deg,#222a49,#0c1127);display:grid;place-items:center;font-size:10px}
.rn-it .rn-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rn-it .rn-body b{font-size:12.5px;font-weight:650;color:#2f3450;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-it .rn-body small{font-size:11px;color:#9298a8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-it .ico{opacity:0;color:var(--accent);flex:none}
.rn-it.is-on{background:var(--accent-soft)}
.rn-it.is-on .ico{opacity:1}
.rn-empty{padding:20px 8px;text-align:center;font-size:12px;color:#9298a8}
.rn-state{min-height:16px;font-size:11.5px;color:#c94257;padding:6px 2px 0}