/* ============================================================
   사내 메신저 전역 위젯 스타일
   브랜드(인주색) #812B27
   ============================================================ */

/* FAB 가 차지하는 우하단 안전영역 — 우측 정렬 액션 버튼이 이 아래 깔리지 않게 쓴다.
   (right 24px + width 56px + 여유 8px) */
:root { --rn-fab-safe: 88px; }

/* 표 위에 포인터가 있는 동안 FAB 를 반투명+클릭 통과로 전환 (2026-08-25)
   — 계약건조회·영수증처리내역의 우측 관리 컬럼(삭제·공동작업)이 스크롤 위치에 따라
     FAB 에 덮여 클릭 불가였던 문제. 여백 확보 방식은 가로 스크롤 표에서는 소용이 없어
     "표를 만지는 동안은 FAB 가 비켜준다"로 해결. 표에서 벗어나면 원상 복귀 */
.cw-fab { transition: opacity .15s ease, background .2s ease; }
body:has(.rn-con .con-card:hover) .cw-fab,
body:has(.rn-receipts .tablecard:hover) .cw-fab {
    opacity: .15;
    pointer-events: none;
}

/* 위 두 선택자는 페이지별 컨테이너 클래스에 묶여 있어, 클래스가 다른 페이지는 빠져 있었다
   (2026-08-27 검수: 입금내역 .rn-dep · 정산 .rn-adj 는 미커버 — 우측 관리 컬럼이 FAB 와 겹침).
   클래스 이름에 의존하지 않도록 "표 위에 포인터가 있으면 비켜준다"로 일반화한다.
   목록형 카드 UI(매물 V2)는 표가 아니라서 따로 잡는다. */
body:has(table:hover) .cw-fab,
body:has(.prop-list:hover) .cw-fab,
body:has(.property-list:hover) .cw-fab {
    opacity: .15;
    pointer-events: none;
}

/* 우측 하단 플로팅 버튼 */
.cw-fab {
    position: fixed;
    right: 24px;
    /* 2026-09-07 민수님 지시: 하단 고정 배너가 떠 있어도 채팅 아이콘은 항상 화면 우측 하단.
       (이전엔 --bottom-banner-h 만큼 배너 위로 올라갔음 — 배너 유무에 따라 아이콘 위치가 바뀌는 게 더 어색.)
       배너와 겹치는 구간은 z-index 가 배너(999)보다 높아 아이콘이 위에 온다. */
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #812B27;
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background .15s ease;
}

.cw-fab:hover {
    background: #6a221f;
    transform: translateY(-2px);
}

.cw-fab .material-symbols-outlined {
    font-size: 28px;
}

/* 플로팅 버튼 위 미열람 메시지 수 배지 */
.cw-fab-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #e53935;
    border: 2px solid #fff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* 우측 슬라이드 패널 — 전체 높이, 화면 절반 너비 */
.cw-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50vw;
    min-width: 360px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform .25s ease;
}

.cw-panel.cw-open {
    transform: translateX(0);
}

/* 헤더 */
.cw-header {
    flex: 0 0 auto;
    height: 56px;
    background: #812B27;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
}

.cw-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-icon-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* 리스트 화면 */
/* hidden 속성이 display:flex 보다 우선하도록 — 뷰 전환이 실제로 동작하게 함.
   (UA 기본 [hidden]{display:none}는 클래스 규칙에 밀리므로 명시 필요) */
.cw-list-view[hidden],
.cw-chat-view[hidden],
.cw-group-view[hidden] {
    display: none;
}

.cw-list-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cw-tabs {
    flex: 0 0 auto;
    display: flex;
    border-bottom: 1px solid #eee;
}

.cw-tab {
    flex: 1;
    padding: 12px 0;
    background: #fff;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: #888;
}

.cw-tab-active {
    color: #812B27;
    font-weight: 700;
    border-bottom-color: #812B27;
}

.cw-list {
    flex: 1;
    overflow-y: auto;
}

.cw-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f4f4f4;
}

.cw-item:hover {
    background: #faf5f4;
}

.cw-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #812B27;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.cw-item-body {
    flex: 1;
    min-width: 0;
}

.cw-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

/* 컨펌 권한이 부여된 직원 표시 칩 (직원 탭) */
.cw-item-perm-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    color: #812B27;
    background: #f6e7e6;
    border: 1px solid #e3c6c4;
    border-radius: 10px;
    vertical-align: middle;
}

.cw-item-sub {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 대화방 목록 항목의 안 읽음 메시지 수 배지 */
.cw-item-badge {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.cw-empty {
    padding: 32px 16px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
}

/* 채팅 화면 */
.cw-chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;   /* 새 메시지 pill 의 anchor */
}

.cw-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f7f7f8;
}

.cw-msg-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.cw-msg-row.cw-mine {
    align-items: flex-end;
}

.cw-msg-row.cw-other {
    align-items: flex-start;
}

.cw-msg-meta {
    font-size: 11px;
    color: #999;
    margin: 0 4px 2px;
}

.cw-msg-line {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
}

.cw-msg-row.cw-mine .cw-msg-line {
    justify-content: flex-end;
}

.cw-msg-row.cw-other .cw-msg-line {
    justify-content: flex-start;
}

/* 카카오톡식 안 읽음 카운트("1") */
.cw-unread {
    font-size: 11px;
    font-weight: 700;
    color: #f3b500;
    line-height: 1;
    margin-bottom: 3px;
    white-space: nowrap;
}

.cw-msg {
    max-width: 72%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}

/* 이미지 메시지 — 말풍선 배경 없이 이미지 자체를 표시 */
.cw-msg-img {
    line-height: 0;
    border-radius: 12px;
    overflow: hidden;
}

.cw-msg-img img {
    display: block;
    max-width: 240px;
    max-height: 280px;
    width: auto;
    height: auto;
    border-radius: 12px;
    cursor: pointer;
    background: #eee;
}

.cw-msg-row.cw-other .cw-msg {
    background: #fff;
    border: 1px solid #eee;
    border-top-left-radius: 3px;
}

.cw-msg-row.cw-mine .cw-msg {
    background: #812B27;
    color: #fff;
    border-top-right-radius: 3px;
}

.cw-msg-time {
    font-size: 10px;
    color: #bbb;
    margin: 3px 4px 0;
}

/* 보낼 이미지 미리보기 — 입력바 위 */
.cw-image-preview {
    flex: 0 0 auto;
    padding: 12px 12px 4px;
    background: #fff;
}

.cw-image-preview[hidden] {
    display: none;
}

.cw-preview-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.cw-preview-img {
    max-width: 110px;
    max-height: 110px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}

.cw-preview-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: #555;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cw-preview-remove:hover {
    background: #333;
}

.cw-preview-remove .material-symbols-outlined {
    font-size: 15px;
}

/* 입력 바 */
.cw-input-bar {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #eee;
    background: #fff;
}

.cw-input {
    flex: 1;
    resize: none;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    max-height: 96px;
}

.cw-input:focus {
    outline: none;
    border-color: #812B27;
}

.cw-send {
    flex: 0 0 auto;
    width: 40px;
    border: none;
    border-radius: 10px;
    background: #812B27;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-send:hover {
    background: #6a221f;
}

/* 이미지 첨부 버튼 */
.cw-attach {
    flex: 0 0 auto;
    width: 40px;
    border: none;
    border-radius: 10px;
    background: #f0ecec;
    color: #812B27;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-attach:hover {
    background: #e5dede;
}

.cw-attach:disabled {
    color: #c4bcbc;
    cursor: default;
}

/* 숨김 파일 input — 갤러리 버튼이 트리거하므로 화면에는 절대 노출하지 않는다.
   ([hidden] 속성이 일부 환경에서 밀리는 경우가 있어 명시적으로 display:none) */
#cw-file {
    display: none !important;
}

/* 그룹 채팅방 만들기 화면 */
.cw-group-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cw-group-head {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.cw-group-title {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
}

.cw-group-title:focus {
    outline: none;
    border-color: #812B27;
}

.cw-group-hint {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

.cw-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f4f4f4;
}

.cw-check-row:hover {
    background: #faf5f4;
}

.cw-check-row input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: #812B27;
}

.cw-group-actions {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid #eee;
}

.cw-group-create {
    width: 100%;
    padding: 11px 0;
    border: none;
    border-radius: 10px;
    background: #812B27;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.cw-group-create:hover {
    background: #6a221f;
}

.cw-group-create:disabled {
    background: #ccc;
    cursor: default;
}

/* ============================================================
   방 관리 (헤더 ⋮ 메뉴 · 공지 배너 · 모달)
   ============================================================ */

/* 헤더 ⋮ 메뉴 */
.cw-menu-wrap {
    position: relative;
}

.cw-menu {
    position: absolute;
    top: 42px;
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    z-index: 100000;
    padding: 6px 0;
}

.cw-menu[hidden] {
    display: none;
}

.cw-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 16px;
    font-size: 13px;
    color: #222;
    cursor: pointer;
}

.cw-menu-item:hover {
    background: #faf5f4;
}

.cw-menu-danger {
    color: #c62828;
}

/* 공지 배너 — 채팅 헤더 바로 아래 */
.cw-announce {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff7ed;
    border-bottom: 1px solid #fbe6c8;
    color: #5b3b00;
    font-size: 13px;
    cursor: pointer;
}

.cw-announce[hidden] {
    display: none;
}

.cw-announce-icon {
    flex: 0 0 auto;
    color: #b86a00;
    font-size: 20px;
}

.cw-announce-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-announce-more {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #b86a00;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cw-announce-more[hidden] {
    display: none;
}

/* 모달 백드롭 + 모달 셸 */
.cw-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
}

.cw-modal-backdrop[hidden] {
    display: none;
}

.cw-modal {
    width: calc(100% - 40px);
    max-width: 380px;
    max-height: calc(100vh - 80px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 18px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cw-modal[hidden] {
    display: none;
}

.cw-modal-wide {
    max-width: 460px;
}

.cw-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.cw-modal-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-top: 6px;
}

.cw-modal-text {
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}

.cw-modal-text-multiline {
    max-height: 280px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.cw-modal-input,
.cw-modal-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
}

.cw-modal-textarea {
    resize: vertical;
    min-height: 88px;
}

.cw-modal-input:focus,
.cw-modal-textarea:focus {
    outline: none;
    border-color: #812B27;
}

.cw-modal-section {
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cw-modal-section[hidden] {
    display: none;
}

.cw-modal-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}

.cw-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f4f4f4;
}

.cw-modal-row:last-child {
    border-bottom: none;
}

.cw-modal-row-body {
    flex: 1;
    min-width: 0;
}

.cw-modal-row-name {
    font-size: 13px;
    font-weight: 600;
    color: #222;
}

.cw-modal-row-sub {
    font-size: 11px;
    color: #999;
}

.cw-modal-row-action {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

.cw-modal-row-action:hover {
    background: #faf5f4;
    border-color: #812B27;
    color: #812B27;
}

.cw-modal-row-action-primary {
    background: #812B27;
    border-color: #812B27;
    color: #fff;
}

.cw-modal-row-action-primary:hover {
    background: #6a221f;
    color: #fff;
}

.cw-modal-row-action:disabled {
    background: #eee;
    color: #999;
    cursor: default;
    border-color: #ddd;
}

.cw-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.cw-modal-cancel,
.cw-modal-save,
.cw-modal-secondary {
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.cw-modal-cancel {
    background: #fff;
    color: #555;
    border-color: #ddd;
}

.cw-modal-cancel:hover {
    background: #f5f5f5;
}

.cw-modal-save {
    background: #812B27;
    color: #fff;
    border-color: #812B27;
}

.cw-modal-save:hover {
    background: #6a221f;
}

.cw-modal-save:disabled {
    background: #ccc;
    border-color: #ccc;
    cursor: default;
}

.cw-modal-danger {
    background: #c62828;
    border-color: #c62828;
}

.cw-modal-danger:hover {
    background: #a71f1f;
}

.cw-modal-secondary {
    margin-right: auto;
    background: #fff;
    color: #812B27;
    border-color: #812B27;
}

.cw-modal-secondary:hover {
    background: #faf5f4;
}

.cw-modal-secondary[hidden] {
    display: none;
}

/* ============================================================
   컨펌 (직원 → 대표 승인 워크플로)
   ============================================================ */

/* 탭 배지 (대표가 받은 PENDING 카운트) */
.cw-tab {
    position: relative;
}

.cw-tab-badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    margin-left: 4px;
    vertical-align: middle;
}

.cw-tab-badge[hidden] {
    display: none;
}

/* 컨펌 탭 콘텐츠 */
.cw-confirms {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cw-confirms[hidden] {
    display: none;
}

.cw-confirms-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #f4f4f4;
    background: #faf5f4;
}

.cw-confirms-role-label {
    font-size: 12px;
    font-weight: 600;
    color: #812B27;
}

.cw-confirms-new {
    background: #812B27;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cw-confirms-new:hover {
    background: #6a221f;
}

.cw-confirms-new[hidden] {
    display: none;
}

/* 컨펌 섹션 (보낸/받은) — 접을 수 있는 그룹 헤더 */
.cw-confirm-section {
    border-bottom: 6px solid #f4f4f4;
}

.cw-confirm-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fafafa;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-align: left;
}

.cw-confirm-section-head:hover {
    background: #f2f2f2;
}

.cw-confirm-section-arrow {
    font-size: 11px;
    color: #888;
    width: 12px;
    flex: 0 0 auto;
}

.cw-confirm-section-title {
    flex: 1 1 auto;
}

.cw-confirm-section-body {
    display: block;
}

/* 컨펌 리스트 행 */
.cw-confirm-row {
    padding: 12px 16px;
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cw-confirm-row:hover {
    background: #fafafa;
}

.cw-confirm-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cw-confirm-row-name {
    font-size: 13px;
    font-weight: 700;
    color: #222;
}

.cw-confirm-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cw-confirm-status-pending {
    background: #fff3e0;
    color: #b86a00;
}

.cw-confirm-status-approved {
    background: #e8f5e9;
    color: #2e7d32;
}

.cw-confirm-status-rejected {
    background: #ffebee;
    color: #c62828;
}

.cw-confirm-status-cancelled {
    background: #eeeeee;
    color: #757575;
}

.cw-confirm-row-body {
    font-size: 13px;
    color: #333;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
}

.cw-confirm-row-meta {
    font-size: 11px;
    color: #999;
}

.cw-confirm-row-comment {
    margin-top: 2px;
    font-size: 11px;
    color: #555;
}

.cw-confirm-row-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* 행 우측 상단 접기/펼치기 토글 — head 안의 마지막 자식 */
.cw-confirm-row-toggle {
    flex: 0 0 auto;
    margin-left: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #aaa;
    font-size: 11px;
    cursor: pointer;
    line-height: 1;
}

.cw-confirm-row-toggle:hover {
    background: #f5f5f5;
    border-color: #ddd;
    color: #555;
}

/* 접힌 행 본문 미리보기 — 3줄 작은 글씨 */
.cw-confirm-row-body-preview {
    font-size: 11px;
    color: #888;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-confirm-act {
    flex: 0 0 auto;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.cw-confirm-act:hover {
    background: #faf5f4;
}

.cw-confirm-act-approve {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

.cw-confirm-act-approve:hover {
    background: #1b5e20;
}

.cw-confirm-act-reject {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}

.cw-confirm-act-reject:hover {
    background: #a71f1f;
}

.cw-confirm-act-cancel {
    color: #757575;
}

/* 채팅 입력바 컨펌 토글 */
.cw-confirm-toggle {
    color: #812B27;
}

.cw-confirm-toggle-on {
    background: #812B27;
    color: #fff;
}

.cw-confirm-toggle-on:hover {
    background: #6a221f;
}

/* 채팅 안 컨펌 메시지 bubble */
.cw-confirm-bubble {
    max-width: 80%;
    border: 1px solid #f0d6a8;
    background: #fff8e9;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cw-msg-row.cw-mine .cw-confirm-bubble {
    border-color: #a23b36;
    background: #fff;
}

.cw-confirm-bubble-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #812B27;
}

.cw-confirm-bubble-head .material-symbols-outlined {
    font-size: 18px;
}

.cw-confirm-bubble-status {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fff3e0;
    color: #b86a00;
}

.cw-confirm-bubble-body {
    font-size: 14px;
    color: #222;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.cw-confirm-bubble-img {
    max-width: 220px;
    max-height: 240px;
    border-radius: 8px;
    cursor: pointer;
    background: #eee;
}

.cw-confirm-bubble-meta {
    font-size: 11px;
    color: #757575;
}

.cw-confirm-bubble-meta:empty {
    display: none;
}

.cw-confirm-bubble-actions {
    display: flex;
    gap: 6px;
}

.cw-confirm-bubble-actions:empty {
    display: none;
}

/* 채팅 입력바 도장 아이콘 — cw-attach 와 같은 사이즈, 색만 인주색 */
.cw-confirm-stamp {
    color: #812B27;
}

.cw-confirm-stamp:hover {
    background: #faf5f4;
}

/* 파일 첨부 아이콘 — cw-attach 와 같은 사이즈, 회색 톤 */
.cw-file-attach {
    color: #555;
}

.cw-file-attach:hover {
    background: #f0f0f0;
    color: #222;
}

/* 파일 메시지 bubble — 아이콘 + 파일명/크기 + 다운로드 아이콘 */
.cw-file-bubble {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    text-decoration: none;
    color: #222;
    max-width: 280px;
    transition: border-color 0.15s, background 0.15s;
}

.cw-file-bubble:hover {
    border-color: #812B27;
    background: #faf5f4;
}

.cw-msg-row.cw-mine .cw-file-bubble {
    background: #fff;
    border-color: #a23b36;
}

.cw-file-icon {
    flex: 0 0 auto;
    font-size: 28px !important;
    color: #812B27;
}

.cw-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cw-file-name {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-file-meta {
    font-size: 11px;
    color: #888;
}

.cw-file-dl {
    flex: 0 0 auto;
    font-size: 20px !important;
    color: #888;
}

/* 새 메시지 pill — 채팅 메시지 영역 우하단 fixed */
.cw-new-msg-pill {
    position: absolute;
    right: 16px;
    bottom: 80px;
    z-index: 5;
    padding: 8px 14px;
    background: #812B27;
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.cw-new-msg-pill[hidden] {
    display: none;
}

.cw-new-msg-pill:hover {
    background: #6a221f;
}

/* 컨펌 리스트 행 우상단 말풍선 버튼 — 토글 옆 */
.cw-confirm-row-jump {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #777;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cw-confirm-row-jump:hover {
    background: #faf5f4;
    border-color: #812B27;
    color: #812B27;
}

.cw-confirm-row-jump .material-symbols-outlined {
    font-size: 16px;
}

/* 점프 직후 하이라이트 — 메시지 짧게 강조 */
.cw-msg-row.cw-msg-highlight .cw-msg,
.cw-msg-row.cw-msg-highlight .cw-confirm-bubble,
.cw-msg-row.cw-msg-highlight .cw-msg-img {
    box-shadow: 0 0 0 3px rgba(129, 43, 39, 0.45);
    transition: box-shadow 1.2s ease-out;
}

/* 컨펌 작성 모달 파일 행 */
.cw-confirm-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #f0f0f0;
}

.cw-confirm-file-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px dashed #ccc;
}

.cw-confirm-file-label:hover {
    border-color: #812B27;
    color: #812B27;
}

.cw-confirm-file-label .material-symbols-outlined {
    font-size: 18px;
}

.cw-confirm-file-clear {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

.cw-confirm-file-clear[hidden] {
    display: none;
}

/* 헤더 우측 액션 영역 */
.cw-confirms-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cw-confirms-settings-btn {
    background: transparent;
    border: none;
    color: #812B27;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-confirms-settings-btn:hover {
    background: rgba(129, 43, 39, 0.1);
}

.cw-confirms-settings-btn[hidden] {
    display: none;
}

/* 컨펌 리스트 행 - primary 액션(재요청) */
.cw-confirm-act-primary {
    background: #812B27;
    border-color: #812B27;
    color: #fff;
}

.cw-confirm-act-primary:hover {
    background: #6a221f;
}

/* 컨펌 상세 화면 — 요약 → 본문 → 액션(있을 때) → 타임라인 → 이력 토글 — 단순 세로 흐름
   (block 컨테이너로 두고 overflow-y:auto. 내부 모든 섹션은 평탄하게 쌓여 다음 섹션을 가리지 않음) */
.cw-confirm-detail-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #fafafa;
    padding-bottom: 16px;
}

.cw-confirm-detail-view[hidden] {
    display: none;
}

.cw-detail-summary {
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.cw-detail-sum-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #222;
    margin-bottom: 4px;
}

.cw-detail-meta {
    font-size: 12px;
    color: #777;
}

.cw-detail-body {
    flex: 0 0 auto;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.cw-detail-body-text {
    font-size: 14px;
    line-height: 1.5;
    color: #222;
    white-space: pre-wrap;
    word-break: break-word;
}

.cw-detail-image {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.cw-detail-timeline {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 섹션 라벨 — "활동 이력" 등 */
.cw-detail-section-label {
    padding: 14px 16px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cw-timeline-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 3px solid #ccc;
}

.cw-timeline-submitted { border-left-color: #757575; }
.cw-timeline-resubmitted { border-left-color: #1976d2; }
.cw-timeline-approved { border-left-color: #2e7d32; }
.cw-timeline-rejected { border-left-color: #c62828; }
.cw-timeline-cancelled { border-left-color: #999; }

.cw-timeline-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cw-timeline-type {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f0f0f0;
    color: #555;
}

.cw-timeline-actor {
    font-size: 12px;
    color: #812B27;
    font-weight: 600;
}

.cw-timeline-time {
    font-size: 11px;
    color: #999;
    margin-left: auto;
}

/* 타임라인 REJECTED 카드 우측 "이력 보기 ▾" 토글 — 그 시점에 반려된 본문을 카드 안에서 펼쳐봄 */
.cw-timeline-rev-toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    font-weight: 600;
}

.cw-timeline-rev-toggle:hover {
    border-color: #c62828;
    color: #c62828;
}

.cw-timeline-rev-panel {
    margin-top: 8px;
    padding: 10px 12px;
    background: #fafafa;
    border-left: 3px solid #c62828;
    border-radius: 6px;
}

.cw-timeline-rev-panel[hidden] {
    display: none;
}

.cw-timeline-rev-panel-label {
    font-size: 11px;
    color: #c62828;
    font-weight: 700;
    margin-bottom: 6px;
}

.cw-timeline-rev-panel-text {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.cw-timeline-rev-panel-img {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border-radius: 6px;
    margin-top: 6px;
    cursor: pointer;
}

/* 활동 이력 접기/펼치기 토글 — 타임라인 하단 풀폭 버튼 */
.cw-detail-timeline-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 10px 16px 16px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}

.cw-detail-timeline-toggle:hover {
    border-color: #812B27;
    color: #812B27;
    background: #faf5f4;
}

.cw-detail-timeline-toggle-label {
    line-height: 1;
}

.cw-detail-timeline-toggle-arrow {
    display: inline-block;
    line-height: 1;
    font-size: 11px;
    color: inherit;
}

/* 컴팩트 요약 — 활동 1~3줄 */
.cw-detail-timeline-compact {
    padding: 0 16px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cw-detail-timeline-compact[hidden] {
    display: none;
}

.cw-detail-timeline[hidden] {
    display: none;
}

.cw-timeline-compact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    font-size: 12px;
}

.cw-timeline-compact-type {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f0f0f0;
    color: #555;
    flex: 0 0 auto;
}

.cw-timeline-compact-row.cw-timeline-rejected .cw-timeline-compact-type {
    background: #ffebee;
    color: #c62828;
}

.cw-timeline-compact-row.cw-timeline-approved .cw-timeline-compact-type {
    background: #e8f5e9;
    color: #2e7d32;
}

.cw-timeline-compact-actor {
    flex: 1;
    min-width: 0;
    color: #812B27;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-timeline-compact-time {
    color: #999;
    font-size: 11px;
    flex: 0 0 auto;
}

.cw-timeline-compact-more {
    padding: 4px 10px;
    color: #999;
    font-size: 12px;
    text-align: center;
}

.cw-timeline-comment {
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff7ed;
    border-radius: 6px;
    font-size: 13px;
    color: #5b3b00;
    white-space: pre-wrap;
    word-break: break-word;
}

.cw-detail-actions {
    margin: 12px 16px 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    display: flex;
    gap: 8px;
}

.cw-detail-actions:empty {
    display: none;
}

.cw-detail-action {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}

/* 설정 모달 토글 스위치 */
.cw-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    cursor: pointer;
}

.cw-toggle-label {
    font-size: 14px;
    color: #222;
    font-weight: 600;
}

.cw-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cw-toggle-switch {
    display: inline-block;
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    transition: background .15s ease;
    flex: 0 0 auto;
}

.cw-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cw-toggle-input:checked + .cw-toggle-switch {
    background: #812B27;
}

.cw-toggle-input:checked + .cw-toggle-switch::after {
    transform: translateX(20px);
}

.cw-toggle-input:disabled + .cw-toggle-switch {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   컨펌 작성 풀뷰 (신규 + 재요청 공용) — 모달 대신 위젯 전체 패널 차지
   ============================================================ */
.cw-confirm-compose-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}

.cw-confirm-compose-view[hidden] {
    display: none;
}

.cw-compose-hint {
    flex: 0 0 auto;
    padding: 10px 16px;
    background: #faf5f4;
    border-bottom: 1px solid #f0e6e5;
    color: #812B27;
    font-size: 12px;
    font-weight: 600;
}

.cw-compose-textarea {
    flex: 1;
    min-height: 0;
    width: calc(100% - 32px);
    margin: 12px 16px;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #eee;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #222;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    resize: none;
}

.cw-compose-textarea:focus {
    border-color: #812B27;
}

/* ===== 특약 생성기 인라인 (컨펌 컴포즈 내부 iframe) ===== */
/* 특약 작성 모드일 때만 채팅 패널 확대 */
.cw-panel.cw-wide {
    width: 72vw;
    max-width: 1280px;
}

.cw-special-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 8px 12px 0;
    border: 1px solid #ecdedc;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.cw-special-wrap[hidden] { display: none; }

.cw-special-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #f6efee;
    border-bottom: 1px solid #ecdedc;
    font-size: 13px;
    font-weight: 700;
    color: #812B27;
}
.cw-special-head .material-symbols-outlined { font-size: 18px; }
.cw-special-close {
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid #dcd6d2;
    border-radius: 6px;
    background: #fff;
    color: #6b6663;
    font-size: 12px;
    cursor: pointer;
}
.cw-special-close:hover { background: #f3e7e5; color: #812B27; }

.cw-special-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    display: block;
}

/* 특약 생성기가 열려 있으면 요청 본문 textarea는 하단에 작게(미리보기·최종 편집) */
.cw-confirm-compose-view:has(.cw-special-wrap:not([hidden])) .cw-compose-textarea {
    flex: 0 0 84px;
    min-height: 84px;
}

/* ===== 특약 기본값 설정 뷰 (대표 전용) ===== */
.cw-special-settings-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}
.cw-special-settings-view[hidden] { display: none; }
.cw-settings-hint {
    flex: 0 0 auto;
    padding: 12px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b6663;
    background: #f6efee;
    border-bottom: 1px solid #ecdedc;
}
.cw-settings-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
}
.cw-settings-group {
    margin: 10px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #812B27;
}
.cw-settings-group:first-child { margin-top: 0; }
.cw-settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.cw-settings-field > span {
    font-size: 12px;
    color: #6b6663;
    font-weight: 600;
}
.cw-settings-field > input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e3deda;
    border-radius: 8px;
    font-size: 14px;
    color: #232120;
    outline: none;
    background: #fff;
}
.cw-settings-field > input:focus { border-color: #812B27; }
.cw-settings-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #ece7e3;
}
.cw-settings-cancel, .cw-settings-save {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}
.cw-settings-cancel { background: #fff; border-color: #dcd6d2; color: #6b6663; }
.cw-settings-cancel:hover { background: #f3e7e5; }
.cw-settings-save { background: #812B27; color: #fff; }
.cw-settings-save:hover { background: #5a1c19; }
.cw-settings-save:disabled { opacity: .6; cursor: default; }

.cw-compose-preview {
    flex: 0 0 auto;
    padding: 8px 16px;
    background: #fafafa;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cw-compose-preview[hidden] {
    display: none;
}

.cw-compose-preview-img {
    max-width: 110px;
    max-height: 110px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}

.cw-compose-preview-clear {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

.cw-compose-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #eee;
}

.cw-compose-attach-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    color: #555;
    font-size: 13px;
    cursor: pointer;
}

.cw-compose-attach-btn:hover {
    border-color: #812B27;
    color: #812B27;
}

/* 특약 프레임 작성 버튼 — 신규 기능 강조(인주색 틴트) */
.cw-compose-special {
    background: #f6ecec;
    border: 1px solid #e6cfcd;
    color: #812B27;
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
}
.cw-compose-special:hover {
    background: #812B27;
    color: #fff;
    border-color: #812B27;
}

.cw-compose-send {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: #812B27;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.cw-compose-send:hover {
    background: #6a221f;
}

.cw-compose-send:disabled {
    background: #ccc;
    cursor: default;
}

/* ============================================================
   2026-07-20 울림 피드백 — 패널 리사이즈 · 대화추가 버튼 · 전체선택
   (스펙: docs/messenger-ui-decisions.md)
   ============================================================ */

/* 패널 좌측 엣지 드래그 핸들 — 너비 조절 */
.cw-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    z-index: 5;
}

.cw-resize-handle:hover {
    background: rgba(129, 43, 39, 0.15);
}

/* 채팅방 탭 빈 목록 — 우측 하단 "대화추가하기" */
#cw-rooms {
    position: relative;
}

.cw-add-chat-btn {
    position: absolute;
    right: 16px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 24px;
    background: #812B27;
    color: #fff;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.cw-add-chat-btn:hover {
    background: #6a221f;
}

.cw-add-chat-btn .material-symbols-outlined {
    font-size: 20px;
}

/* 그룹 만들기 — 전체선택 행 */
.cw-check-all {
    background: #faf5f4;
    border-bottom: 1px solid #e5dcda;
    font-weight: 700;
}

/* 방어 규칙 — 위젯 내 file input 은 어떤 페이지 CSS 가 [hidden] 을 덮어써도 절대 노출 금지
   (브라우저 기본 "파일 선택" 버튼 노출 회귀 재발방지, messenger-ui-decisions.md R-1) */
.cw-panel input[type="file"] {
    display: none !important;
}