/* [app.css 분할 7/10 · plus.css] + 메뉴 구획(plus.js·plus_*.js) · 이모티콘 · 이미지 붙여넣기
   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 */
/* ══════════════════════════════════════════════════════════════════
   + 메뉴 (카톡식 컴포저 확장, 2026-07-27) — plus.js 공용 프레임워크와
   plus_*.js 기능 모듈이 함께 쓰는 구획. 텍스트 강조 톤(이모지 최소화).
   ══════════════════════════════════════════════════════════════════ */

/* ── + 버튼 — 입력창 왼쪽 둥근 버튼, 열리면 45도 회전(카톡식 X) ── */
#btnPlus{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;
  color:#666b7e;font-size:17px;line-height:1;padding:0;
  transition:transform var(--motion-dur-micro) var(--motion-ease-out),
             background var(--motion-dur-micro) var(--motion-ease-out),
             color var(--motion-dur-micro) var(--motion-ease-out),
             border-color var(--motion-dur-micro) var(--motion-ease-out)}
#btnPlus:hover{background:var(--hover);color:var(--accent-deep)}
#btnPlus.is-open{transform:rotate(45deg);background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}

/* ── ☺ 이모티콘 버튼 — + 옆 전용 버튼(카톡식). 아이콘은 mask 단일 출처라
   메인(#btnEmo)·미니창/팝아웃(.co-emo) 이 같은 그림을 쓰고 currentColor 를 따른다 ── */
#btnEmo,.co-emo{--emo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.6 14.2c.85 1.25 2 1.9 3.4 1.9s2.55-.65 3.4-1.9M9 9.6v.1M15 9.6v.1'/%3E%3C/svg%3E")}
#btnEmo{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;
  color:#666b7e;padding:0;transition:background var(--motion-dur-micro) var(--motion-ease-out),
  color var(--motion-dur-micro) var(--motion-ease-out),border-color var(--motion-dur-micro) var(--motion-ease-out)}
#btnEmo:hover{background:var(--hover);color:var(--accent-deep)}
#btnEmo.is-open{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
#btnEmo::after,.co-emo::after{content:'';display:block;width:20px;height:20px;margin:auto;
  background:currentColor;-webkit-mask:var(--emo-ico) center/contain no-repeat;mask:var(--emo-ico) center/contain no-repeat}

/* ── 📎 파일 첨부 버튼 — ☺ 옆 전용 버튼(카톡식, 2026-07-29 + 메뉴에서 이동).
   ☺ 와 같은 mask 단일 출처 — 메인(#btnFile)·미니창/팝아웃(.co-file) 공용 ── */
#btnFile,.co-file{--file-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 11.6 12.8 19.4a5.4 5.4 0 0 1-7.6-7.6l7.8-7.8a3.6 3.6 0 0 1 5.1 5.1l-7.8 7.8a1.8 1.8 0 0 1-2.5-2.5l7.2-7.2'/%3E%3C/svg%3E")}
#btnFile{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;
  color:#666b7e;padding:0;transition:background var(--motion-dur-micro) var(--motion-ease-out),
  color var(--motion-dur-micro) var(--motion-ease-out),border-color var(--motion-dur-micro) var(--motion-ease-out)}
#btnFile:hover{background:var(--hover);color:var(--accent-deep)}
#btnFile::after,.co-file::after{content:'';display:block;width:19px;height:19px;margin:auto;
  background:currentColor;-webkit-mask:var(--file-ico) center/contain no-repeat;mask:var(--file-ico) center/contain no-repeat}

/* ── 위로 뜨는 메뉴 (plus.js 가 fixed 좌표를 계산해 붙인다) —
   카톡식 한 줄 항목(아이콘 + 라벨 + sub 는 ▸), 2026-07-29 보스 지시 ── */
/* .aho-anim 계약(plus.js가 ahoShow/ahoHide로 여닫는다) */
#plusMenu{position:fixed;z-index:85;width:196px;padding:6px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #27225d2e;
  --aho-dur:var(--motion-dur-pop);--aho-dur-exit:var(--motion-dur-exit-pop)}
.plus-it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
  background:0 0;border-radius:9px;padding:8px 10px}
.plus-it:hover,.plus-it.is-sub-open{background:var(--hover)}
.plus-it b{flex:1;min-width:0;font-size:13px;font-weight:600;color:#2f3450;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-ic{width:18px;flex:none;display:flex;align-items:center;justify-content:center;color:#818699}
.pi-ic svg{width:16px;height:16px;display:block}
.pi-arr{flex:none;font-size:10px;color:#a2a5b1}
/* 서브메뉴 — 항목 오른쪽 플라이아웃, 자리 없으면 왼쪽(plus.js subOpen) */
.plus-sub{position:absolute;min-width:148px;padding:6px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px #27225d2e;
  --aho-dur:var(--motion-dur-pop);--aho-dur-exit:var(--motion-dur-exit-pop)}

/* ── 우클릭 메뉴 (ctxmenu.js — 표면별 맞춤, plusMenu 와 같은 층) ── */
/* .aho-anim 계약(ctxmenu.js가 ahoShow/ahoHide로 여닫는다) */
.aho-ctx{position:fixed;z-index:85;min-width:172px;padding:6px;background:var(--card);
  border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 50px #27225d2e;
  --aho-dur:var(--motion-dur-pop);--aho-dur-exit:var(--motion-dur-exit-pop)}
.ctx-it{display:flex;align-items:center;gap:9px;width:100%;border:0;background:0 0;
  border-radius:9px;padding:8px 11px;font-size:13px;color:#3a3f57;text-align:left;white-space:nowrap}
.ctx-it:hover{background:var(--hover)}
.ctx-it i{font-style:normal;width:17px;font-size:12px;text-align:center;color:#8c91a1;flex:none}
.ctx-it.danger{color:#c94257}
.ctx-it.danger:hover{background:#fdeef1}
.ctx-sep{height:1px;background:var(--line);margin:5px 8px}
.r-mute{font-size:10px;opacity:.55;margin-left:3px}
.it-pin,.r-pin{font-size:10px;opacity:.7;margin-left:3px;flex:none}
/* 이름 바꾸기 모달 입력줄 (ctxmenu.js) */
.ctx-inp{width:100%;margin:2px 0 4px;padding:9px 12px;border:1px solid var(--line);
  border-radius:11px;background:#fff;font-size:13px;outline:none}
.ctx-inp:focus{border-color:var(--accent)}
/* 삭제된 방 메시지(카톡식 톰스톤) — me/peer 색을 모두 덮는다(뒤에 선언돼 이김) */
.co-msg.deleted{background:#eceaf4;color:#9298a8;font-style:italic;box-shadow:none}
.co-msg.deleted time{color:#a9adbc}

/* ── 공용 팝오버 (이모티콘 그리드 등) ── */
#plusPop{position:fixed;z-index:85;width:286px;max-height:340px;overflow-y:auto;padding:12px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 50px #27225d2e;
  --aho-dur:var(--motion-dur-pop);--aho-dur-exit:var(--motion-dur-exit-pop)}
@media (width<=520px){#plusMenu,#plusPop{left:8px!important;right:8px;width:auto}
  #plusPop.emo-pop{width:auto}}   /* 이모티콘 변형의 고정폭(330px)이 이기지 않게 */

/* (사이드 모드 CSS는 2026-07-29 제거 — 메뉴·이모티콘 모두 카톡식 버튼 위 박스.
   셸 pop-grow/pop-ungrow 가드 명령은 남아 있으나 페이지 호출처 없음) */

/* ── 파일 첨부 칩 (입력창 위 줄) ── */
#attachBar{max-width:820px;margin:0 auto 6px;display:flex;flex-wrap:wrap;gap:6px;padding:0 2px}
.att-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 12px;border:1px solid var(--line);
  border-radius:999px;background:#fffffff2;font-size:12px;color:#3a3f57;
  animation:var(--motion-dur-pop) var(--motion-ease-out) both login-in}
.att-chip b{font-weight:640;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-chip small{color:#9298a8;font-size:10.5px}
.att-x{border:0;background:0 0;color:#b7bac6;font-size:12px;padding:2px 6px;border-radius:999px}
.att-x:hover{background:#fdeef1;color:#c94257}

/* ── 대화 캡처 (메시지 범위 선택 모드) ── */
body.capturing #chat .msg .bubble{cursor:pointer}
body.capturing #composer{opacity:.45;pointer-events:none}
.msg.cap-sel .bubble{outline:2px solid var(--accent);outline-offset:2px}
.msg.cap-sel.ai .bubble{background:var(--accent-soft)}
/* 가운데 정렬은 margin:auto — translateX 정렬을 쓰면 애니메이션의 transform 정착값이
   덮어쓴다(#usPanel 참조) */
#capBar{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;bottom:110px;z-index:85;display:flex;
  align-items:center;gap:10px;padding:9px 10px 9px 16px;background:#fffffff2;   /* backdrop-filter 제거(§1.5) */
  border:1px solid var(--line);border-radius:999px;box-shadow:0 18px 50px #27225d26;
  font-size:12.5px;color:#3a3f57;white-space:nowrap;
  animation:var(--motion-dur-panel) var(--motion-ease-out) both login-in}
#capBar .cap-btn{border:0;border-radius:999px;padding:7px 14px;font-size:12.5px;background:var(--hover);color:#4a4f66}
#capBar .cap-btn:hover{background:var(--line)}
#capBar .cap-btn.primary{background:var(--accent-grad);color:#fff}
html.secure #capBar .cap-btn.primary{background:linear-gradient(135deg,#2cb578,#177a4c)}

/* ── 모달 확장 — 맞춤법/번역·예약·일정·할 일 공용 부품 ── */
#modal textarea{border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:13.5px;
  outline:0;resize:vertical;min-height:84px;font-family:inherit;line-height:1.55}
#modal textarea:focus{border-color:var(--accent)}
/* 맞춤법/번역 비교 상자 */
.tt-cols{display:flex;gap:10px;margin:6px 0 4px}
.tt-head{font-size:11px;font-weight:640;color:#7d8296;margin-bottom:4px}
.tt-box{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;
  line-height:1.6;min-height:110px;max-height:240px;overflow-y:auto;white-space:pre-wrap;
  word-break:break-word;background:#faf9fe}
.tt-box.res{background:#fff}
.tt-wait{color:#9298a8;font-size:12.5px;animation:1.2s ease-in-out infinite alternate tt-pulse}
@keyframes tt-pulse{to{opacity:.35}}
/* 모달 안 가로 탭(일정/할 일) — 알약형 */
.pl-tabs{display:flex;gap:6px;margin-bottom:10px}
.pl-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;
  font-size:12.5px;color:#6a7086}
.pl-tab.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep);font-weight:640}
/* 목록(예약 대기·일정·할 일 공용) */
.pl-form{display:flex;gap:8px;align-items:center;margin-top:4px}
.pl-form input{flex:1;min-width:0}
.pl-list{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto;margin-top:10px}
.pl-it{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;
  padding:8px 10px;font-size:13px;color:#2f3450}
.pl-it .pl-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-it time{flex:none;font-size:11px;color:#8c91a1}
.pl-it.done .pl-txt{text-decoration:line-through;color:#a2a5b1}
.pl-chk{width:15px;height:15px;accent-color:var(--accent);margin:0;flex:none;cursor:pointer}
.pl-x{flex:none;border:0;background:0 0;color:#b7bac6;font-size:12px;padding:2px 6px;border-radius:6px}
.pl-x:hover{background:#fdeef1;color:#c94257}
.pl-note{font-size:11px;color:#a2a5b1;margin-top:10px;line-height:1.6}
.pl-empty{color:#a2a5b1;text-align:center;font-size:12px;padding:18px 0}
/* 일정 시각 자체 선택기(pl-dtp) — 네이티브 datetime-local 달력은 앱 폰트를 못 입혀 직접 그림 */
.pl-dtp{border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:8px;background:var(--card)}
.pl-dtp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pl-dtp-mon{font-size:13px;font-weight:640;color:#2f3450}
.pl-dtp-nav{border:0;background:0 0;border-radius:8px;width:26px;height:26px;font-size:15px;color:#6a7086;cursor:pointer}
.pl-dtp-nav:hover{background:var(--hover);color:var(--accent-deep)}
.pl-dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pl-dtp-grid .dow{font-size:11px;color:#9298a8;text-align:center;padding:3px 0}
.pl-dtp-grid .day{border:0;background:0 0;border-radius:9px;padding:6px 0;font-size:12.5px;color:#2f3450;cursor:pointer}
.pl-dtp-grid .day:hover{background:var(--hover)}
.pl-dtp-grid .day.is-today{color:var(--accent-deep);font-weight:640}
.pl-dtp-grid .day.is-on{background:var(--accent);color:#fff;font-weight:640}
.pl-dtp-time{display:flex;gap:8px;margin-top:10px}
.pl-dtp-ap{display:flex;flex-direction:column;gap:4px;flex:0 0 64px}
.pl-dtp-ap button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 0;font-size:12.5px;color:#6a7086;cursor:pointer}
.pl-dtp-ap button.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep);font-weight:640}
.pl-dtp-col{position:relative;flex:1;max-height:128px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;
  display:flex;flex-direction:column;padding:3px}
.pl-dtp-col button{border:0;background:0 0;border-radius:7px;padding:5px 0;font-size:12.5px;color:#2f3450;cursor:pointer;flex:none}
.pl-dtp-col button:hover{background:var(--hover)}
.pl-dtp-col button.is-on{background:var(--accent);color:#fff;font-weight:640}
.pl-dtp-foot{display:flex;justify-content:flex-end;margin-top:6px}
.pl-dtp-today{border:0;background:0 0;color:var(--accent-deep);font-size:12.5px;cursor:pointer;border-radius:8px;padding:4px 8px}
.pl-dtp-today:hover{background:var(--hover)}
/* 선택기 열림 동안 목록을 줄여 낮은 화면(배율 125%)에서 모달 세로 짤림 방지 */
#plCalPane.dtp-open .pl-list{max-height:90px}
/* 공용 선택기(dtp.js) 축소판 — 시간판만 있을 땐 위 여백이 이중이라 제거 */
.pl-dtp.dtp-time .pl-dtp-time{margin-top:0}

/* ── 미니게임 팝오버 (plus_minigame.js) ── */
.mg-head{font-size:13px;font-weight:700;color:#2f3450;margin:0 2px 10px}
.mg-grid{display:flex;gap:8px}
.mg-it{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 4px}
.mg-it:hover{background:var(--hover);border-color:var(--accent)}
.mg-it span{font-size:22px;line-height:1.2}
.mg-it b{font-size:12px;font-weight:640;color:#2f3450;white-space:nowrap}
.mg-it small{font-size:10.5px;color:#9298a8}

/* ── 방 컨텍스트 + 버튼 (사내대화 미니창·팝아웃 입력줄 왼쪽, 2026-07-27 확장) ──
   app.js 가 .co-input 에 .has-plus 를 붙이고 .co-plus 버튼을 넣는다.
   is-open 회전은 #btnPlus 와 같은 카톡식 45도. */
.co-input .co-plus{width:30px;height:30px;flex:none;align-self:center;border:1px solid var(--line);
  border-radius:50%;background:#fff;color:#666b7e;font-size:15px;line-height:1;padding:0;
  transition:transform var(--motion-dur-micro) var(--motion-ease-out),
             background var(--motion-dur-micro) var(--motion-ease-out),
             color var(--motion-dur-micro) var(--motion-ease-out),
             border-color var(--motion-dur-micro) var(--motion-ease-out)}
.co-input .co-plus:hover{background:var(--hover);color:var(--accent-deep)}
.co-input .co-plus.is-open{transform:rotate(45deg);background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
.co-input.has-plus{grid-template-columns:30px 1fr 38px}

/* ── 방 컨텍스트 ☺ 버튼 — .co-input button 의 그라디언트 기본값을 되돌린다.
   (+ 버튼과 함께 .co-input 접두로 특이도를 올림 — 그라디언트 규칙(0,1,1)이
   단독 클래스(0,1,0)를 덮어 보라 사각으로 보이던 기존 문제도 같이 고침) ── */
.co-input .co-emo{width:30px;height:30px;flex:none;align-self:center;border:1px solid var(--line);border-radius:50%;
  background:#fff;color:#666b7e;padding:0;transition:background var(--motion-dur-micro) var(--motion-ease-out),
  color var(--motion-dur-micro) var(--motion-ease-out),border-color var(--motion-dur-micro) var(--motion-ease-out)}
.co-input .co-emo:hover{background:var(--hover);color:var(--accent-deep)}
.co-input .co-emo.is-open{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
.co-emo::after{width:17px;height:17px}
.co-input.has-plus.has-emo{grid-template-columns:30px 30px 1fr 38px}
/* 📎 파일 버튼 — .co-input button 그라디언트 기본값을 ☺ 와 같은 방식으로 되돌린다 */
.co-input .co-file{width:30px;height:30px;flex:none;align-self:center;border:1px solid var(--line);border-radius:50%;
  background:#fff;color:#666b7e;padding:0;transition:background var(--motion-dur-micro) var(--motion-ease-out),
  color var(--motion-dur-micro) var(--motion-ease-out),border-color var(--motion-dur-micro) var(--motion-ease-out)}
.co-input .co-file:hover{background:var(--hover);color:var(--accent-deep)}
.co-file::after{width:16px;height:16px}
.co-input.has-plus.has-emo.has-file{grid-template-columns:30px 30px 30px 1fr 38px}

/* ── 방 첨부 칩 줄 — 미니창(.cm-attach)·팝아웃(#popAttach) 공용, 메시지와 입력줄 사이 ── */
.co-attach{display:flex;flex-wrap:wrap;gap:5px;padding:6px 8px;border-top:1px solid var(--line);
  background:#faf9fe}
.co-attach .att-chip b{max-width:110px}

/* ── 방 메시지 캡처 선택 — 미니창/팝아웃의 .co-msg 도 범위 선택 대상 ── */
body.capturing .co-msg{cursor:pointer}
.co-msg.cap-sel{outline:2px solid var(--accent);outline-offset:1px}

/* ── 이모티콘 피커 (plus_emoji.js) — 검색 + 본문 + 팩 탭바 (카톡 플러스식, 2026-08-08).
   #plusPop 을 그대로 쓰되 이모티콘일 때만 .emo-pop 변형으로 넓히고, 스크롤은
   본문(.emo-body)만 진다 — 검색줄과 탭바는 위아래에 고정. ── */
#plusPop.emo-pop{width:330px;height:min(420px,62vh);max-height:none;overflow:hidden;
  padding:10px;display:flex;flex-direction:column;gap:8px}
.emo-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.emo-sec{font-size:11px;font-weight:640;color:#7d8296;margin:10px 2px 6px}
.emo-body>.emo-sec:first-child{margin-top:0}
.emo-tip{font-size:11px;color:#a2a5b1;margin:0 2px 8px;line-height:1.5}
/* 이모티콘 검색줄(카톡식, 2026-07-29) — 피커 맨 위 고정 한 줄 */
.emo-search{flex:none;width:100%;padding:8px 11px;border:1px solid var(--line);
  border-radius:10px;font-size:12.5px;outline:0;background:#faf9fe}
.emo-search:focus{border-color:var(--accent);background:#fff}
.emo-none{color:#a2a5b1;text-align:center;font-size:12px;padding:22px 0}
.emo-faces{display:flex;flex-wrap:wrap;gap:6px}
.emo-face{border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 11px;
  font-size:12.5px;font-weight:640;letter-spacing:-.02em;color:#10162d;cursor:pointer}
.emo-face:hover{border-color:var(--accent);background:var(--accent-soft)}
.emo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.emo-it{border:0;background:0 0;font-size:19px;line-height:1;padding:6px 0;border-radius:9px;cursor:pointer}
.emo-it:hover{background:var(--hover)}

/* 스티커 격자 — 피커가 넓어져 4열(그전 + 메뉴 팝오버는 2열이었다) */
.emo-stk{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.emo-stk-it{border:1px solid transparent;border-radius:10px;background:0 0;padding:3px;cursor:pointer;
  transition:background var(--motion-dur-micro) var(--motion-ease-out),
             border-color var(--motion-dur-micro) var(--motion-ease-out)}
.emo-stk-it:hover{background:var(--hover);border-color:var(--accent)}
.emo-stk-it img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;border-radius:8px}
/* 보내는 중(즉시 전송, 2026-08-08 P1) — 그 칸만 죽여 중복 클릭을 눈으로도 막는다 */
.emo-stk-it.is-send{opacity:.45;cursor:progress}
/* 스티커 미리보기 카드 — 마우스 호버/길게 누르기. body 직속 fixed(z 는 JS 가 topZ 로) */
.emo-prev{position:fixed;padding:8px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 50px #27225d2e;pointer-events:none}
.emo-prev img{width:150px;height:150px;object-fit:contain;display:block}
.emo-prev b{display:block;max-width:150px;margin-top:4px;font-size:11px;font-weight:640;color:#4a4f66;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 팩 탭바 — 피커 맨 아래 한 줄(최근·이모지·아호비·스티커 팩들). 팩이 늘면 가로 스크롤 */
.emo-tabs{flex:none;display:flex;align-items:center;gap:2px;padding-top:7px;
  border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.emo-tabs::-webkit-scrollbar{display:none}
.emo-tab{flex:none;min-width:34px;height:30px;padding:0 9px;border:0;border-radius:8px;background:0 0;
  font-size:11.5px;font-weight:640;letter-spacing:-.02em;color:#7d8296;cursor:pointer;
  transition:background var(--motion-dur-micro) var(--motion-ease-out),
             color var(--motion-dur-micro) var(--motion-ease-out)}
.emo-tab:hover{background:var(--hover)}
.emo-tab.on{background:var(--accent-soft);color:var(--accent-deep)}
.emo-tab.off{opacity:.45}
.emo-tab-ico{padding:0 8px}
.emo-tab-ico::after{content:'';display:block;width:16px;height:16px;margin:auto;background:currentColor;
  -webkit-mask:var(--tab-ico) center/contain no-repeat;mask:var(--tab-ico) center/contain no-repeat}
.emo-tab-ico.is-clock{--tab-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.2V12l3.2 1.9'/%3E%3C/svg%3E")}

/* ── 이모티콘 추천줄 (plus_suggest.js, 2026-08-08) — 첨부줄 바로 위 한 줄.
   메인·미니창·팝아웃이 같은 모양을 쓴다(자리는 각 컴포저의 첨부줄 앞). ── */
.sg-row{display:flex;align-items:center;gap:5px;padding:5px 8px;
  border-top:1px solid var(--line);background:#faf9fe;
  animation:var(--motion-dur-pop) var(--motion-ease-out) both login-in}
#composer .sg-row{max-width:820px;margin:0 auto 6px;border:1px solid var(--line);border-radius:12px}
.sg-cap{flex:none;font-size:10.5px;font-weight:640;color:#a2a5b1;letter-spacing:-.02em}
.sg-it{flex:none;width:34px;height:34px;padding:2px;border:1px solid transparent;border-radius:9px;
  background:0 0;cursor:pointer;
  transition:background var(--motion-dur-micro) var(--motion-ease-out),
             border-color var(--motion-dur-micro) var(--motion-ease-out)}
.sg-it:hover{background:var(--hover);border-color:var(--accent)}
.sg-it img{width:100%;height:100%;object-fit:contain;display:block}
.sg-it.sg-txt{font-size:17px;line-height:1}
.sg-it.is-send{opacity:.45;cursor:progress}
.sg-x{flex:none;margin-left:auto;border:0;background:0 0;color:#b7bac6;font-size:11px;
  padding:3px 5px;border-radius:6px;cursor:pointer}
.sg-x:hover{background:#fdeef1;color:#c94257}

/* ══ 이미지 붙여넣기 전송 (2026-07-27) — 캡처 이미지 Ctrl+V ══
   슬롯: plus.js attachSlot 이 attachBar 안에 모듈별 .att-slot 을 만든다.
   칩: plus_paste.js 가 .att-chip.att-img 를 자기 슬롯에 그린다(미리보기는 dataURL).
   메시지: app.js 가 .msg-img(공용)·.u-imgs(메인 말풍선 썸네일 줄)를 그린다. */
.att-slot{display:contents}                 /* 파일 칩과 한 flex 줄에 섞여 흐른다 */
/* 파일 칩 준비 중(plus_files.js: 방=업로드 중, 메인=읽는 중) — 아직 못 보내는
   상태라는 표시. 폭은 그대로 두고 색만 죽인다(칩이 흔들리면 목록이 튄다). */
.att-chip.is-up b{opacity:.5}
.att-chip.is-up small{color:var(--accent-deep);opacity:.75}
.att-chip.att-img{padding:3px;gap:4px}
.att-chip.att-img img{width:46px;height:46px;object-fit:cover;border-radius:9px;display:block}
.att-chip.att-img.is-up img{opacity:.35}   /* 업로드 중 표시 */
.att-chip.att-img .up-txt{font-size:10px;color:#8c91a1;padding:0 3px}

/* ══ 드래그 앤 드롭 첨부 (plus_drop.js, 2026-09-15) — 존(#main/.co-mini/#popRoom)
   위에 fixed 로 얹는 안내막. 위치·크기·z 는 스크립트가 존 사각형으로 매번 맞춘다.
   pointer-events:none 이라 드롭은 아래 존이 받는다. 강조색은 --accent 토큰만
   (시큐어 변형은 토큰이 알아서 바뀐다). 안쪽 박스는 % 크기 + box-sizing 이라
   300px 미니창에서도 밖으로 안 나간다. */
#dropHint{position:fixed;pointer-events:none;box-sizing:border-box;padding:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.10);
  /* 페이드만 — login-in 처럼 transform 이 들어가면 존 사각형과 어긋난다(정렬 충돌 선례) */
  animation:var(--motion-dur-pop) var(--motion-ease-out) both drop-in}
@keyframes drop-in{from{opacity:0}to{opacity:1}}
#dropHint .dh-box{box-sizing:border-box;width:100%;height:100%;min-width:0;padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:2px dashed rgba(var(--accent-rgb),.6);border-radius:14px;
  background:rgba(255,255,255,.55);color:var(--accent-deep);text-align:center}
#dropHint .dh-box svg{width:26px;height:26px;margin-bottom:2px}
#dropHint .dh-box b{font-size:13px;font-weight:640;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#dropHint .dh-box small{font-size:11px;opacity:.7}

/* 방(미니창·팝아웃) 이미지 메시지 — .co-msg 안에서 말풍선 폭에 맞춘 썸네일 */
.co-msg .msg-img{display:block;max-width:180px;max-height:180px;border-radius:10px;
  cursor:zoom-in;margin:2px 0}
.co-msg.has-img{padding:5px}               /* 이미지 메시지는 여백을 줄여 사진답게 */

/* 메인 채팅 내 말풍선 썸네일 줄 — addMsg 뒤에 app.js 가 붙인다 */
.u-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;justify-content:flex-end}
.u-imgs .msg-img{max-width:150px;max-height:150px;border-radius:10px;cursor:zoom-in}

/* ── 스티커(투명 PNG) 프레임리스 (2026-08-06) — core.js stkFrameless 가
   투명 이미지 단독 메시지에 is-stk 를 붙인다. 말풍선·둥근모서리·그림자를 벗겨
   그림만 남긴다. 사진(불투명)·텍스트 동반 메시지는 기존 말풍선 그대로. */
.co-msg.is-stk{background:none;border:none;box-shadow:none;padding:0}
#popRoom .co-msg.is-stk,#popRoom .co-msg.me.is-stk{box-shadow:none}
.co-msg.me.is-stk{color:#4a4f66}           /* 흰 글자(시간)가 배경에 묻히지 않게 */
.co-msg.is-stk .msg-img{border-radius:0}
.msg-img.is-stk{border-radius:0;box-shadow:none}