/* 전역 채팅 패널(결정 CB — 채팅 개편 W3, 2026-09-30). 옛 screens_info.css 채팅 구역을 옮겨 새 스타일(CN·CQ·CR) 토큰으로 다시 썼다.
   바탕은 --bg 하나(CN2), 구분은 1px 선(CN3), 채움은 주 버튼(보내기·수락·초대하기)뿐. 배지는 숫자 글자만 인디고(채움 없음).
   누름 영역 44px(탭·목록 줄·아이콘 단추·보내기·입력칸 — 결정 DF1·BU4). 라이트 녹색 없음(토큰만 씀). 불러오기: chat_panel.js 가 link 로 붙인다. */

/* 떠 있는 버튼(결정 AP1 D6 B 56px, ≤420px 48px). 결정 DF7·CP2: 누를 수 있는 것을 가리면 chat_panel.js placeFab 이 --cp-lift(위로)·.is-left(왼쪽)로 옮긴다.
   숨김 전환(transition)은 app.css 'chat-away' 규칙 몫이라 여기서 transition 을 쓰지 않는다. */
.tw-chat-fab { position: fixed; right: calc(14px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 35;
  width: 56px; height: 56px; border-radius: var(--radius); display: inline-grid; place-items: center; cursor: pointer;
  background: var(--bg); color: var(--fg-2); border: 1px solid var(--line-strong); box-shadow: var(--pop-shadow);
  transform: translateY(calc(-1 * var(--cp-lift, 0px))); }
.tw-chat-fab:hover { border-color: var(--line-hover); color: var(--accent); }
.tw-chat-fab .tw-icon { width: 22px; height: 22px; }
.tw-chat-fab.is-left { right: auto; left: calc(14px + env(safe-area-inset-left)); }
.tw-chat-fab__badge { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: inline-grid; place-items: center;
  font-size: var(--fs-cap); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); background: var(--bg); border: 1px solid var(--accent); }
.tw-chat-fab__badge[hidden] { display: none; }
/* 사냥 화면의 아래 고정 막대(.tw-dock)가 보일 때만 버튼을 막대 띠 안 오른쪽 끝으로(결정 CI4 — 막대 오른쪽 자리는 app.css .tw-dock) */
.tw-shell:has(.tw-dock:not(.is-static):not([hidden])) .tw-chat-fab { bottom: calc(4px + env(safe-area-inset-bottom)); }

/* 패널: 오른쪽 겹 칸(넓은 화면 400px — 계획 12절), ≤480px 화면 전체(결정 U5). 위는 상단바 아래(--cp-top, 여는 순간 CSSOM 으로) */
.tw-chat-panel { position: fixed; right: 0; bottom: 0; top: var(--cp-top, 0px); z-index: 40; width: min(400px, 100%); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line-strong); box-shadow: var(--pop-shadow); }
.tw-chat-panel[hidden] { display: none; }
.tw-chat-panel__head { display: flex; align-items: center; gap: var(--sp-1); min-height: 52px; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--line); flex: none; }
.tw-chat-panel__head h2 { font-size: var(--fs-section); font-weight: var(--fw-title); color: var(--fg-2); margin: 0 auto 0 0; outline: none; }
.tw-chat-panel .tw-icon-btn { width: 44px; height: 44px; border-color: transparent; color: var(--muted); }
.tw-chat-panel .tw-icon-btn:hover:not(:disabled) { border-color: var(--line-strong); color: var(--fg-2); }
.tw-chat-panel__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* 탭 3칸 '전체 │ 길드 │ 일반'(원문 구분선): 지금 탭 = 인디고 글자 + 아래 2px 인디고 선, 칸 사이 1px 옅은 선(CR15 — 색 세로선 아님) */
.tw-cp-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); flex: none; min-width: 0; }
.tw-cp-tabs > button { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 var(--sp-2);
  font: inherit; font-size: var(--fs-body); font-weight: 500; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); cursor: pointer; }
.tw-cp-tabs > button:hover { color: var(--fg-2); }
.tw-cp-tabs > button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tw-cp-tabs__sep { flex: none; width: 1px; height: 20px; align-self: center; background: var(--line); }
.tw-cp-tabbadge:empty { display: none; }
.tw-cp-num { font-size: var(--fs-cap); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tw-cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); flex: none; }

/* 알림 줄(차단 [되돌리기]·신고 뒤 '차단할까요?' 등) */
.tw-cp-notice { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-sub); color: var(--fg-2); flex: none; }
.tw-cp-notice[hidden] { display: none; }
.tw-cp-notice p { margin: 0; flex: 1 1 10em; min-width: 0; }

/* 방·목록·설정 공통 머리 한 줄 */
.tw-cp-room, .tw-cp-list, .tw-cp-settings { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.tw-cp-list, .tw-cp-settings { overflow-y: auto; overscroll-behavior: contain; }
.tw-cp-roomhead, .tw-cp-listhead { display: flex; align-items: center; gap: var(--sp-1); min-height: 48px; padding: 0 var(--sp-1) 0 var(--sp-3); border-bottom: 1px solid var(--line); min-width: 0; flex: none; }
.tw-cp-roomhead:has(.tw-cp-back), .tw-cp-listhead:has(.tw-cp-back) { padding-left: var(--sp-1); }
.tw-cp-roomtitle, .tw-cp-listhead h3 { margin: 0; min-width: 0; font-size: var(--fs-strong); font-weight: 600; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-cp-listhead h3 { margin-right: auto; }
.tw-cp-roomhead .tw-tag { flex: none; }
.tw-cp-headtip { margin-left: auto; flex: none; }

/* 1:1 상태 줄(대기·받은 초대·거절·만료·끝남) — 한 줄, 좁으면 두 줄 */
.tw-cp-state { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-sub); color: var(--fg); flex: none; }
.tw-cp-state[hidden] { display: none; }
.tw-cp-state p { margin: 0; flex: 1 1 12em; min-width: 0; }
.tw-cp-stateacts { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 메시지 */
.tw-cp-status { margin: 0; padding: var(--sp-1) var(--sp-3) 0; font-size: var(--fs-cap); color: var(--muted); flex: none; }
.tw-cp-status:empty { display: none; }
.tw-cp-log { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.tw-cp-msg { min-width: 0; }
.tw-cp-msg__head { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 24px; min-width: 0; font-size: var(--fs-sub); }
.tw-cp-name { min-width: 0; font-weight: 700; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-cp-msg.is-mine .tw-cp-name { color: var(--accent); }   /* 내 메시지는 이름 글자만 인디고(색 세로선·말풍선 채움 없음 — CN3·CR15) */
.tw-cp-mark { flex: none; width: 0; }                        /* K16 표식 칸(길잡이 등불 자리) — 값이 없으면 폭 0 */
.tw-cp-mark:not([data-mark=""]) { width: 16px; height: 16px; }
/* 결정 DS7(길잡이 W4): 표식 칸 = 등불 단 번호 글자(그림 MARK-GUIDE-1~5 가 들어오기 전 대체 — 길드 문장과 같은 방식) */
.tw-cp-mark:not([data-mark=""]) { display: inline-grid; place-items: center; box-sizing: border-box; border: var(--bw) solid var(--gold);
  border-radius: var(--radius-chip); color: var(--gold); font-size: var(--fs-cap); font-weight: 700; line-height: 1; }
.tw-cp-mark:not([data-mark=""])::before { content: attr(data-mark); }
.tw-cp-time { flex: none; font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-cp-more { position: relative; margin: -10px -8px -10px auto; flex: none; width: 40px; height: 44px; display: inline-grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: var(--radius-btn); color: var(--muted); cursor: pointer; }
.tw-cp-more:hover, .tw-cp-more[aria-expanded="true"] { color: var(--fg-2); }
.tw-cp-msg__body { margin: 2px 0 0; font-size: var(--fs-body); line-height: var(--lh-base); color: var(--fg); overflow-wrap: anywhere; white-space: pre-wrap; }
.tw-cp-msg.is-hidden .tw-cp-msg__body { color: var(--muted); }
.tw-cp-sys { margin: 0; text-align: center; font-size: var(--fs-sub); color: var(--muted); }
.tw-cp-older, .tw-cp-newbtn { align-self: center; }
.tw-cp-newbtn { margin: var(--sp-1) auto; flex: none; }
.tw-cp-newbtn[hidden] { display: none; }
.tw-cp-loading, .tw-cp-empty, .tw-cp-emptylog { margin: 0; padding: var(--sp-4) var(--sp-3); text-align: center; font-size: var(--fs-sub); color: var(--muted); }
.tw-cp-empty p { margin: 0; }
.tw-cp-out:empty { display: none; }
.tw-cp-err { margin: 0; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sub); color: var(--bad); }
.tw-cp-unknown { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sub); }
.tw-cp-unknown p { margin: 0; }

/* 입력(1~4줄 + 보내기 주 버튼, 캡션 0 / 200). 채팅 금지·쓸 수 없는 방이면 입력칸 자리 글과 아래 한 줄에 이유 */
.tw-cp-form { flex: none; display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.tw-cp-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px 0; }
.tw-cp-tags[hidden] { display: none; }
.tw-cp-inputrow { display: flex; align-items: flex-end; gap: var(--sp-2); min-width: 0; }
.tw-cp-inputrow textarea { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; font: inherit; font-size: var(--fs-body); line-height: var(--lh-base);
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--fg-2); }
.tw-cp-inputrow textarea::placeholder { color: var(--muted); opacity: 1; }
.tw-cp-inputrow textarea:disabled { border-style: dashed; cursor: not-allowed; }
.tw-cp-send { flex: none; white-space: nowrap; }
.tw-cp-why { margin: 0; font-size: var(--fs-cap); color: var(--warn); }
.tw-cp-why[hidden] { display: none; }
.tw-cp-count { margin: 0; font-size: var(--fs-cap); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* 일반 목록(거래 → 파티 → 길잡이 → 1:1) */
.tw-cp-rooms { list-style: none; margin: 0; padding: 0; }
.tw-cp-row { width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); min-width: 0;
  font: inherit; font-size: var(--fs-body); text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--fg); cursor: pointer; }
.tw-cp-row:hover:not(:disabled) { color: var(--fg-2); }
.tw-cp-row:disabled { cursor: not-allowed; color: var(--muted); }
.tw-cp-row.is-new .tw-cp-row__title { font-weight: 700; color: var(--fg-2); }
.tw-cp-row__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-cp-row .tw-tag { flex: none; }
.tw-cp-row__end { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.tw-cp-when, .tw-cp-rowwhy { font-size: var(--fs-cap); color: var(--muted); white-space: nowrap; }
.tw-cp-sep { height: 0; margin: 0; border-top: 1px solid var(--line); }
.tw-cp-hint { margin: 0; padding: var(--sp-3); font-size: var(--fs-sub); color: var(--muted); }

/* 작은 메뉴(⋮) — 떠 있는 겹 칸 */
.tw-cp-menu { position: absolute; top: var(--cp-menu-top, 56px); right: var(--cp-menu-right, 8px); z-index: 3; min-width: 168px; display: grid; padding: 4px;
  background: var(--pop-bg); color: var(--pop-fg); border: 1px solid var(--pop-line); border-radius: var(--radius-sm); box-shadow: var(--pop-shadow); }
.tw-cp-menu button { min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-body); text-align: left;
  background: none; border: 0; border-radius: var(--radius-btn); color: var(--fg-2); cursor: pointer; }
.tw-cp-menu button:hover, .tw-cp-menu button:focus-visible { color: var(--accent); }

/* 1:1 채팅 더하기: ≤480px 하단 시트, 넓으면 패널 안 작은 창 */
.tw-cp-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line-strong); box-shadow: var(--pop-shadow); }
.tw-cp-sheet h4 { margin: 0; font-size: var(--fs-strong); color: var(--fg-2); }
.tw-cp-field { display: grid; gap: 4px; font-size: var(--fs-sub); color: var(--muted); }
.tw-cp-field input { min-height: 44px; padding: 0 12px; font: inherit; font-size: var(--fs-body); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--fg-2); }
.tw-cp-sheet .tw-cp-err { padding: 0; }
.tw-cp-sheet .tw-cp-err[hidden] { display: none; }
@media (min-width: 481px) {
  .tw-cp-sheet { left: var(--sp-3); right: var(--sp-3); bottom: auto; top: 108px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
}

/* 설정(머리의 설정 단추): 1:1 초대 받기 · 차단 목록 */
.tw-cp-pref { margin: 0; padding: var(--sp-3); border: 0; border-bottom: 1px solid var(--line); display: grid; gap: 0; min-width: 0; }
.tw-cp-pref legend { padding: 0; margin-bottom: var(--sp-1); font-size: var(--fs-strong); font-weight: 600; color: var(--fg-2); }
.tw-cp-pref .tw-cp-hint { padding: var(--sp-1) 0 0; font-size: var(--fs-cap); }
.tw-cp-radio { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-body); cursor: pointer; }
.tw-cp-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.tw-cp-subh { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-3) var(--sp-1); font-size: var(--fs-strong); color: var(--fg-2); }
.tw-cp-subh small { font-size: var(--fs-cap); font-weight: 400; color: var(--muted); }
.tw-cp-blocks { list-style: none; margin: 0; padding: 0; }
.tw-cp-blocks li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 48px; padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--rule); font-size: var(--fs-body); }

@media (max-width: 480px) {
  .tw-chat-panel { width: 100%; border-left: 0; box-shadow: none; }
}
@media (max-width: 420px) {
  /* 좁은 화면: 48px 버튼을 모서리에 붙인다(44px 이상 유지). 막대가 보일 때 = 막대 띠 안(막대 오른쪽 자리 8 + 48 + 8은 app.css .tw-dock) */
  .tw-chat-fab { width: 48px; height: 48px; right: calc(8px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); }
  .tw-chat-fab.is-left { right: auto; left: calc(8px + env(safe-area-inset-left)); }
  .tw-shell:has(.tw-dock:not(.is-static):not([hidden])) .tw-chat-fab { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .tw-cp-tabs > button { padding: 0 var(--sp-1); }
  .tw-cp-send { width: 44px; padding: 0; }            /* 좁은 화면: 보내기 = 선 아이콘만(이름은 aria-label) — 입력칸 자리 글이 한 줄에 들어가게 */
  .tw-cp-send span { display: none; }
}