/* ═══════════════════════════════════════════════════════════════════
   ChatWidget CSS v6.0 - 나눔고딕 + 프로필 + 사원증 + 모바일 최적화
   ID 기반 셀렉터 + !important (AdminLTE/DevExtreme 충돌 방지)
   ★ v6.0: 나눔고딕, 프로필 확대, 사원증 카드, 메시지 UX 개선
   ═══════════════════════════════════════════════════════════════════ */

/* ── 나눔고딕 웹폰트 ── */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

/* ── 터치 최적화 (전역) ── */
#cwRoot *, #cwRoot *::before, #cwRoot *::after {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}
#cwRoot button, #cwRoot .cw-tab, #cwRoot .cw-room-item, #cwRoot .cw-user-item,
#cwRoot .cw-newchat-option, #cwRoot .cw-select-user, #cwRoot .cw-emoji-item, #cwRoot .cw-emoji-cat {
    touch-action: manipulation !important; /* 더블탭 줌 방지 */
    -webkit-user-select: none !important;
    user-select: none !important;
}
#cwMessages, #cwRoomList, #cwUserList, #cwEmojiGrid, #cwNewChatContent, .cw-select-list {
    -webkit-overflow-scrolling: touch !important; /* iOS 관성 스크롤 */
    overscroll-behavior: contain !important; /* 스크롤 전파 방지 */
}

/* ── 토글 버튼 ── */
#cwToggle {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102,126,234,0.4) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    font-size: 28px !important;
    transition: transform 0.3s !important;
    border: none !important;
    padding: 0 !important;
}
#cwToggle:hover { transform: scale(1.1) !important; }
#cwToggleIcon { line-height: 1 !important; }
#cwBadge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    background: #f56565 !important;
    color: #fff !important;
    font-size: 11px !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
}

/* ── 메인 윈도우 ── */
#cwWindow {
    position: fixed !important;
    bottom: 96px !important;
    right: 24px !important;
    width: 380px !important;
    height: 560px !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
    z-index: 99998 !important;
    display: none;
    flex-direction: column !important;
    overflow: hidden !important;
    font-family: 'Nanum Gothic', 'Segoe UI', -apple-system, sans-serif !important;
}

/* ── 헤더 ── */
#cwHeader {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    padding: 14px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    min-height: 48px !important;
}
#cwHeaderTitle { font-size: 16px !important; font-weight: 600 !important; }
#cwHeaderBtns { display: flex !important; align-items: center !important; font-size: 18px !important; }
#cwHeaderBtns span { color: #fff !important; opacity: 0.9 !important; }
#cwHeaderBtns span:hover { opacity: 1 !important; }

/* ── 바디 ── */
#cwBody {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* ── 패널 ── */
.cw-panel {
    display: none !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}
.cw-panel.active { display: flex !important; }

/* ── 탭 바 ── */
#cwTabBar {
    display: flex !important;
    border-bottom: 1px solid #e5e7eb !important;
    flex-shrink: 0 !important;
    background: #fff !important;
}
.cw-tab {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s !important;
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}
.cw-tab.active { color: #667eea !important; border-bottom-color: #667eea !important; }
.cw-tab:hover { color: #667eea !important; }

/* ── 검색 ── */
#cwRoomSearch {
    padding: 8px 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    flex-shrink: 0 !important;
}
#cwSearch, .cw-search-input {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    outline: none !important;
    box-sizing: border-box !important;
}
#cwSearch:focus, .cw-search-input:focus { border-color: #667eea !important; }

/* ── 관리자 온라인 상태 ── */
#cwAdminStatus {
    flex-shrink: 0 !important;
}
.cw-admin-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.cw-admin-status.online { color: #059669 !important; background: #ecfdf5 !important; }
.cw-admin-status.offline { color: #9ca3af !important; background: #f9fafb !important; }
.cw-admin-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.cw-admin-status.online .cw-admin-dot { background: #10b981 !important; }
.cw-admin-status.offline .cw-admin-dot { background: #d1d5db !important; }

/* ── 채팅방 내 관리자 상태 메시지 ── */
#cwChatStatus { display: none; flex-shrink: 0 !important; }
.cw-chat-status {
    padding: 8px 16px !important;
    font-size: 12px !important;
    text-align: center !important;
}
.cw-chat-status.online { background: #ecfdf5 !important; color: #059669 !important; }
.cw-chat-status.offline { background: #fef3c7 !important; color: #92400e !important; }

/* ── 이미지 모달 (확대보기/다운로드) ── */
#cwImageModal {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(0,0,0,0.85) !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
#cwModalInner { text-align: center !important; cursor: default !important; }
#cwModalImg { max-width: 90vw !important; max-height: 75vh !important; border-radius: 8px !important; object-fit: contain !important; }
#cwModalActions { margin-top: 16px !important; display: flex !important; gap: 12px !important; justify-content: center !important; }
.cw-modal-btn {
    padding: 10px 24px !important;
    background: #667eea !important;
    color: #fff !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-block !important;
}
.cw-modal-btn:hover { background: #5a67d8 !important; }
#cwModalDownload { background: #667eea !important; }
#cwModalDownload:hover { background: #5a67d8 !important; }

/* ── 채팅방 목록 ── */
#cwRoomList, #cwUserList {
    flex: 1 !important;
    overflow-y: auto !important;
}

/* ── 관리자 문의 고정 카드 ── */
.cw-admin-fixed {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 8px 10px !important;
    background: linear-gradient(135deg, #eef2ff 0%, #f0fdf4 100%) !important;
    border: 1.5px solid #c7d2fe !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    position: relative !important;
}
.cw-admin-fixed:hover { border-color: #667eea !important; box-shadow: 0 2px 12px rgba(102,126,234,0.15) !important; }
.cw-admin-fixed.active { border-color: #667eea !important; background: linear-gradient(135deg, #e0e7ff 0%, #dcfce7 100%) !important; }
.cw-admin-fixed.new { border-style: dashed !important; }
.cw-admin-fixed.new:hover { border-style: solid !important; }
.cw-admin-fixed-left { flex-shrink: 0 !important; }
.cw-admin-fixed-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: #fff !important;
    border-radius: 10px !important;
    font-size: 20px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.cw-admin-fixed-body { flex: 1 !important; min-width: 0 !important; }
.cw-admin-fixed-top { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 3px !important; }
.cw-admin-fixed-name { font-size: 14px !important; font-weight: 700 !important; color: #1e40af !important; }
.cw-admin-fixed-time { font-size: 10px !important; color: #9ca3af !important; }
.cw-admin-fixed-preview { font-size: 12px !important; color: #6b7280 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.cw-admin-fixed-pin { font-size: 14px !important; flex-shrink: 0 !important; opacity: 0.5 !important; }

.cw-room-item {
    padding: 10px 14px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.cw-room-item:hover { background: #f9fafb !important; }
.cw-room-item.active { background: #eef2ff !important; border-left: 3px solid #667eea !important; }
.cw-room-avatar {
    width: 36px !important; height: 36px !important; border-radius: 50% !important;
    background: #e5e7eb !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; overflow: hidden !important; font-size: 16px !important;
}
.cw-room-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }
.cw-room-body { flex: 1 !important; min-width: 0 !important; }
.cw-room-top { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 3px !important; }
.cw-room-name { font-size: 13px !important; font-weight: 600 !important; color: #1f2937 !important; }
.cw-room-time { font-size: 10px !important; color: #9ca3af !important; }
.cw-room-preview { font-size: 11.5px !important; color: #6b7280 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.cw-room-badge {
    background: #f56565 !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    margin-left: 6px !important;
}

/* ── 새 채팅 버튼 ── */
#cwNewChatBtn {
    margin: 8px 12px !important;
    padding: 10px 0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}
#cwNewChatBtn:hover { opacity: 0.9 !important; }

/* ── 사용자 목록 ── */
.cw-user-item {
    padding: 10px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: background 0.15s !important;
}
.cw-user-item:hover { background: #f9fafb !important; }
.cw-user-avatar { font-size: 24px !important; }
.cw-user-info { flex: 1 !important; }
.cw-user-name { font-size: 13px !important; font-weight: 600 !important; color: #1f2937 !important; }
.cw-user-company { font-size: 11px !important; color: #9ca3af !important; }

/* ── 채팅 메시지 ── */
#cwMessages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    background: #f8fafc !important;
}
.cw-msg { margin-bottom: 14px !important; display: flex !important; flex-direction: column !important; }
.cw-msg.mine { align-items: flex-end !important; flex-direction: row-reverse !important; }
.cw-msg.mine .cw-msg-content { align-items: flex-end !important; }
.cw-msg.mine .cw-msg-avatar { margin-right: 0 !important; margin-left: 8px !important; }
.cw-msg.other { align-items: flex-start !important; flex-direction: row !important; }
.cw-msg-avatar {
    width: 32px !important; height: 32px !important; border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; margin-right: 8px !important; margin-top: 2px !important;
    overflow: hidden !important; cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(102,126,234,0.2) !important;
    transition: transform 0.2s !important;
}
.cw-msg-avatar:hover { transform: scale(1.1) !important; }
.cw-msg-avatar span { color: #fff !important; font-size: 12px !important; font-weight: 800 !important; }
.cw-msg-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }
.cw-msg-content { display: flex !important; flex-direction: column !important; min-width: 0 !important; max-width: calc(100% - 44px) !important; }
.cw-msg-sender { font-size: 10.5px !important; font-weight: 700 !important; color: #6b7280 !important; margin-bottom: 2px !important; padding-left: 2px !important; }
.cw-msg-bubble {
    max-width: 92% !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
}
.cw-msg.mine .cw-msg-bubble {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(102,126,234,0.3) !important;
}
.cw-msg.other .cw-msg-bubble {
    background: #fff !important;
    color: #1f2937 !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    border: 1px solid #f0f0f0 !important;
}
.cw-msg-time { font-size: 10px !important; color: #b0b5c0 !important; margin-top: 3px !important; padding: 0 4px !important; }
.cw-msg-image { max-width: 200px !important; border-radius: 12px !important; cursor: pointer !important; display: block !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; }

/* ── 프로필 확대 모달 ── */
#cwProfileModal {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(0,0,0,0.7) !important;
    z-index: 9999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
@keyframes cwProfilePopIn {
    0% { transform: scale(0.8) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes cwAvatarFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
#cwProfileModal.show { display: flex !important; }
.cw-profile-card {
    background: #fff !important;
    border-radius: 24px !important;
    padding: 32px 28px 24px !important;
    text-align: center !important;
    min-width: 280px !important;
    max-width: 320px !important;
    box-shadow: 0 25px 80px rgba(0,0,0,0.25) !important;
    cursor: default !important;
    animation: cwProfilePopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.cw-profile-card-avatar {
    width: 90px !important; height: 90px !important;
    border-radius: 50% !important;
    margin: 0 auto 14px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 8px 30px rgba(102,126,234,0.35) !important;
    animation: cwAvatarFloat 3s ease-in-out infinite !important;
}
.cw-profile-card-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.cw-profile-card-avatar span { color: #fff !important; font-size: 32px !important; font-weight: 800 !important; }
.cw-profile-card-name { font-size: 17px !important; font-weight: 800 !important; color: #1f2937 !important; margin-bottom: 3px !important; }
.cw-profile-card-company { font-size: 12px !important; color: #6b7280 !important; margin-bottom: 18px !important; }
.cw-profile-card-actions { display: flex !important; gap: 8px !important; justify-content: center !important; flex-wrap: wrap !important; }
.cw-profile-card-btn {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}
.cw-profile-card-btn:hover { transform: translateY(-1px) !important; }
.cw-profile-card-btn.primary { background: #667eea !important; color: #fff !important; box-shadow: 0 2px 8px rgba(102,126,234,0.3) !important; }
.cw-profile-card-btn.primary:hover { box-shadow: 0 4px 14px rgba(102,126,234,0.4) !important; }
.cw-profile-card-btn.secondary { background: #f3f4f6 !important; color: #6b7280 !important; }
.cw-profile-card-btn.secondary:hover { background: #e5e7eb !important; }

/* ── 사원증 카드 (한국 대기업 사원증 클린 스타일) ── */
/* 애니메이션 정의 */
@keyframes cwNameReveal {
    0% { letter-spacing: 12px; opacity: 0; filter: blur(5px); }
    100% { letter-spacing: 3px; opacity: 1; filter: blur(0); }
}
@keyframes cwStampRotateIn {
    0% { transform: scale(2.5) rotate(-25deg); opacity: 0; }
    40% { transform: scale(0.85) rotate(4deg); opacity: 0.9; }
    60% { transform: scale(1.08) rotate(-1deg); }
    80% { transform: scale(0.97) rotate(0.5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
}
@keyframes cwBorderPulse {
    0%, 100% { border-color: #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
    50% { border-color: #93c5fd; box-shadow: 0 8px 30px rgba(59,130,246,0.15); }
}
@keyframes cwVisitorBorderPulse {
    0%, 100% { border-color: #fed7aa; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
    50% { border-color: #fdba74; box-shadow: 0 8px 30px rgba(249,115,22,0.15); }
}
@keyframes cwChipShine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes cwIdCardDrop {
    0% { transform: translateY(-30px) scale(0.95); opacity: 0; }
    60% { opacity: 1; }
    80% { transform: translateY(3px) scale(1.005); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes cwIdGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(226,232,240,0.6); }
    50% { box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 0 0 1px rgba(226,232,240,0.8); }
}
@keyframes cwIdHoloSweep {
    0% { left: -150%; }
    100% { left: 150%; }
}
@keyframes cwIdFadeSlide {
    0% { transform: translateY(8px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes cwIdPhotoReveal {
    0% { clip-path: inset(100% 0 0 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes cwIdStampPress {
    0% { transform: scale(1.6) rotate(-8deg); opacity: 0; }
    60% { transform: scale(0.95) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes cwVisitorCardEnter {
    0% { transform: translateY(-30px) scale(0.95); opacity: 0; }
    60% { opacity: 1; }
    80% { transform: translateY(3px) scale(1.005); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes cwVisitorGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(237,137,54,0.15); }
    50% { box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 0 0 1px rgba(237,137,54,0.3); }
}
@keyframes cwVisitorShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ═══════════════════════════════════════════════════════
   사원증 (Employee ID Card) - 클린 화이트/블루
   ═══════════════════════════════════════════════════════ */
.cw-id-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    width: 300px !important;
    animation: cwIdCardDrop 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards, cwIdGlow 5s ease-in-out 1s infinite, cwBorderPulse 4s ease-in-out 1.5s infinite !important;
    cursor: default !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
/* 미세한 빛 스윕 */
.cw-id-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
    transform: skewX(-20deg) !important;
    animation: cwIdHoloSweep 6s ease-in-out 1.5s infinite !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* 상단 파란 헤더 (회사명) */
.cw-id-card-header {
    position: relative !important;
    z-index: 2 !important;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    padding: 14px 20px 10px !important;
    text-align: center !important;
    margin: 0 !important;
}
.cw-id-card-header-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 6px !important;
    color: #fff !important;
    margin-left: 6px !important;
}
.cw-id-card-header-sub {
    font-size: 8px !important;
    letter-spacing: 2px !important;
    color: rgba(255,255,255,0.6) !important;
    margin-top: 3px !important;
    text-transform: uppercase !important;
}

/* 회사 로고 영역 */
.cw-id-card-logo {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 10px 20px 4px !important;
}
.cw-id-card-logo img {
    max-height: 22px !important;
    max-width: 90px !important;
}
.cw-id-card-logo span {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e40af !important;
    letter-spacing: 1px !important;
}

/* 프로필 사진 (중앙 대형) */
.cw-id-card-photo {
    width: 85px !important;
    height: 105px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 8px auto 10px !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    cursor: pointer !important;
    animation: cwIdPhotoReveal 0.5s ease-out 0.4s both !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
}
.cw-id-card-photo:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
}
.cw-id-card-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.cw-id-card-photo span {
    color: #94a3b8 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
}

/* 이름 */
.cw-id-card-name {
    position: relative !important;
    z-index: 2 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    letter-spacing: 3px !important;
    margin-bottom: 2px !important;
    animation: cwNameReveal 0.7s ease-out 0.5s both !important;
}

/* 직급 */
.cw-id-card-position {
    position: relative !important;
    z-index: 2 !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    animation: cwIdFadeSlide 0.4s ease-out 0.55s both !important;
}

/* 정보 행 (사업장, 사번) */
.cw-id-card-info {
    position: relative !important;
    z-index: 2 !important;
    border-top: 1px solid #e2e8f0 !important;
    margin: 0 24px !important;
    padding: 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.cw-id-card-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    animation: cwIdFadeSlide 0.4s ease-out both !important;
}
.cw-id-card-row:nth-child(1) { animation-delay: 0.6s !important; }
.cw-id-card-row:nth-child(2) { animation-delay: 0.7s !important; }
.cw-id-card-label {
    color: #1e40af !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}
.cw-id-card-value {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* 증명 문구 */
.cw-id-card-cert {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 10px 24px 6px !important;
    animation: cwIdFadeSlide 0.4s ease-out 0.8s both !important;
}
.cw-id-card-cert-divider {
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #cbd5e1, transparent) !important;
    margin-bottom: 10px !important;
}
.cw-id-card-cert-text {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}
.cw-id-card-cert-date {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
}
.cw-id-card-stamp {
    position: absolute !important;
    bottom: 90px !important;
    right: 20px !important;
    z-index: 6 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2.5px solid rgba(200,30,30,0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    color: rgba(200,30,30,0.65) !important;
    letter-spacing: 0.5px !important;
    animation: cwStampRotateIn 0.8s ease-out 0.9s both !important;
    text-align: center !important;
    line-height: 1.1 !important;
    background: rgba(200,30,30,0.03) !important;
    box-shadow: inset 0 0 0 1.5px rgba(200,30,30,0.2), 0 0 8px rgba(200,30,30,0.08) !important;
}

/* IC칩 데코 */
.cw-id-card-chip {
    position: absolute !important;
    bottom: 72px !important;
    right: 22px !important;
    width: 28px !important;
    height: 20px !important;
    border-radius: 3px !important;
    background: linear-gradient(135deg, #d4a843 0%, #f0d060 30%, #e8c44a 50%, #f0d060 70%, #c99a30 100%) !important;
    background-size: 300% 100% !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 1px 4px rgba(0,0,0,0.1) !important;
    z-index: 3 !important;
    animation: cwIdFadeSlide 0.3s ease-out 0.9s both, cwChipShine 3s linear 2s infinite !important;
}
.cw-id-card-chip::before {
    content: '' !important;
    position: absolute !important;
    top: 3px !important; left: 3px !important; right: 3px !important; bottom: 3px !important;
    border: 1px solid rgba(160,120,30,0.3) !important;
    border-radius: 2px !important;
}
.cw-id-card-chip::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: rgba(160,120,30,0.25) !important;
}

/* 하단 영역 */
.cw-id-card-bottom {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 20px 8px !important;
    animation: cwIdFadeSlide 0.4s ease-out 0.85s both !important;
}
.cw-id-card-bottom-logo {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.cw-id-card-bottom-logo img {
    max-height: 18px !important;
    max-width: 80px !important;
    object-fit: contain !important;
}
.cw-id-card-bottom-logo span {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #1e40af !important;
    letter-spacing: 1px !important;
}
.cw-id-card-bottom-system {
    font-size: 8px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

/* 이미지 캡처 모드 (html2canvas용 - 애니메이션/효과 제거) */
.cw-id-card.cw-capturing,
.cw-visitor-card.cw-capturing {
    animation: none !important;
    box-shadow: 0 0 0 1px #e2e8f0 !important;
}
.cw-id-card.cw-capturing::after,
.cw-visitor-card.cw-capturing::before {
    display: none !important;
}
.cw-id-card.cw-capturing *,
.cw-visitor-card.cw-capturing * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
}

/* 이미지 저장 버튼 */
.cw-id-card-save-btn {
    position: relative !important;
    z-index: 2 !important;
    background: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 auto 4px !important;
}
.cw-id-card-save-btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
}

/* 사용자 목록 아바타 클릭 */
.cw-user-avatar-clickable {
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.cw-user-avatar-clickable:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(102,126,234,0.3) !important;
}

/* 하단 블루 스트라이프 */
.cw-id-card-stripe {
    height: 5px !important;
    background: linear-gradient(90deg, #1e40af, #2563eb, #3b82f6, #2563eb, #1e40af) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 사진 변경 버튼 */
.cw-id-card-edit {
    position: absolute !important;
    top: 156px !important;
    left: calc(50% + 28px) !important;
    z-index: 5 !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    animation: cwIdFadeSlide 0.3s ease-out 0.95s both !important;
}
.cw-id-card-edit:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* 사원증 하단 버튼 영역 */
.cw-id-card-actions {
    position: relative !important;
    z-index: 2 !important;
    padding: 6px 16px 12px !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════
   협력업체 임시증 (Visitor Pass) - 웜 화이트/오렌지
   ═══════════════════════════════════════════════════════ */
.cw-visitor-card {
    background: #fffbf5 !important;
    border: 1px solid #fed7aa !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    width: 300px !important;
    animation: cwVisitorCardEnter 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards, cwVisitorGlow 5s ease-in-out 1s infinite, cwVisitorBorderPulse 4s ease-in-out 1.5s infinite !important;
    cursor: default !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
.cw-visitor-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(90deg, transparent 0%, rgba(237,137,54,0.03) 50%, transparent 100%) !important;
    background-size: 200% 100% !important;
    animation: cwVisitorShimmer 6s linear infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.cw-visitor-watermark {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) rotate(-35deg) !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: 8px !important;
    color: rgba(237,137,54,0.04) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.cw-visitor-header {
    position: relative !important;
    z-index: 2 !important;
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
    padding: 12px 20px 10px !important;
    text-align: center !important;
}
.cw-visitor-header-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: rgba(255,255,255,0.85) !important;
}
.cw-visitor-header-badge {
    display: inline-block !important;
    margin-top: 4px !important;
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 6px !important;
    padding: 3px 14px !important;
    border-radius: 4px !important;
}
.cw-visitor-photo {
    width: 70px !important;
    height: 90px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #fef3e2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 10px !important;
    border: 2px solid #fed7aa !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    transition: transform 0.3s !important;
    animation: cwIdPhotoReveal 0.5s ease-out 0.3s both !important;
}
.cw-visitor-photo:hover { transform: scale(1.03) !important; }
.cw-visitor-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.cw-visitor-photo span { color: rgba(237,137,54,0.35) !important; font-size: 24px !important; font-weight: 800 !important; }
.cw-visitor-stamp {
    position: absolute !important;
    bottom: 76px !important;
    right: 18px !important;
    z-index: 6 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2.5px solid rgba(200,30,30,0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 6px !important;
    font-weight: 900 !important;
    color: rgba(200,30,30,0.55) !important;
    letter-spacing: 0.4px !important;
    animation: cwStampRotateIn 0.8s ease-out 0.8s both !important;
    text-align: center !important;
    line-height: 1.1 !important;
    background: rgba(200,30,30,0.02) !important;
    box-shadow: inset 0 0 0 1.5px rgba(200,30,30,0.15), 0 0 6px rgba(200,30,30,0.06) !important;
}

/* ── 헤더 프로필 아이콘 ── */
#cwMyProfile {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    cursor: pointer !important;
    margin-right: 10px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(255,255,255,0.25) !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s, border-color 0.2s !important;
}
#cwMyProfile:hover { transform: scale(1.1) !important; border-color: #fff !important; }
#cwMyProfile img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#cwMyProfile span { color: #fff !important; font-size: 12px !important; font-weight: 700 !important; }

/* ── 입력 영역 ── */
#cwInputArea {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    border-top: 1px solid #e5e7eb !important;
    background: #fff !important;
    flex-shrink: 0 !important;
}
#cwEmojiBtn, #cwAttachBtn, #cwLocationBtn {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 18px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    border: none !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    transition: background 0.2s !important;
}
#cwEmojiBtn:hover, #cwAttachBtn:hover, #cwLocationBtn:hover { background: #e5e7eb !important; }
#cwInput {
    flex: 1 !important;
    padding: 8px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    outline: none !important;
    min-width: 0 !important;
    background: #f9fafb !important;
}
#cwInput:focus { border-color: #667eea !important; background: #fff !important; }
#cwSendBtn {
    padding: 8px 14px !important;
    background: #667eea !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
#cwSendBtn:hover { background: #5a67d8 !important; }

/* ── 이미지 프리뷰 ── */
#cwImagePreview {
    border-top: 1px solid #e5e7eb !important;
    background: #fff !important;
    flex-shrink: 0 !important;
}
.cw-img-preview {
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f9fafb !important;
}
.cw-img-preview img { height: 48px !important; border-radius: 6px !important; }
.cw-img-name { flex: 1 !important; font-size: 12px !important; color: #6b7280 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cw-img-cancel { cursor: pointer !important; font-size: 18px !important; color: #9ca3af !important; }
.cw-img-send {
    padding: 6px 14px !important;
    background: #667eea !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ── 이모티콘 패널 ── */
#cwEmojiCats {
    display: flex !important;
    padding: 8px !important;
    gap: 4px !important;
    border-bottom: 1px solid #e5e7eb !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
}
.cw-emoji-cat {
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: background 0.2s !important;
}
.cw-emoji-cat:hover { background: #e5e7eb !important; }
#cwEmojiGrid {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    align-content: flex-start !important;
}
.cw-emoji-item {
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 6px !important;
    transition: background 0.2s !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cw-emoji-item:hover { background: #e5e7eb !important; }

/* ── 새 채팅 패널 ── */
#cwNewChatContent {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px !important;
}
.cw-newchat-section { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.cw-newchat-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-align: left !important;
    font-family: inherit !important;
    font-size: 13px !important;
    color: #1f2937 !important;
}
.cw-newchat-option:hover { background: #eef2ff !important; border-color: #667eea !important; }
.cw-newchat-icon { font-size: 28px !important; }
.cw-newchat-option strong { font-size: 14px !important; }
.cw-newchat-option small { color: #9ca3af !important; }
.cw-newchat-header { font-size: 13px !important; font-weight: 500 !important; }

/* 사용자 선택 */
.cw-select-list { max-height: 280px !important; overflow-y: auto !important; }
.cw-select-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    font-size: 13px !important;
    color: #1f2937 !important;
}
.cw-select-user:hover { background: #f9fafb !important; }
.cw-select-user.selected { background: #eef2ff !important; }
.cw-select-user small { color: #9ca3af !important; margin-left: auto !important; }
.cw-check { font-size: 16px !important; }

.cw-selected-users {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-height: 0 !important;
}
.cw-selected-tag {
    background: #eef2ff !important;
    color: #667eea !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
.cw-newchat-actions { padding-top: 8px !important; border-top: 1px solid #e5e7eb !important; margin-top: 8px !important; }
.cw-btn-create {
    width: 100% !important;
    padding: 10px 0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.cw-btn-create:hover { opacity: 0.9 !important; }

/* ── 공통 ── */
.cw-empty {
    text-align: center !important;
    color: #9ca3af !important;
    padding: 30px 16px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}
.cw-empty small { color: #c4c8d0 !important; }

/* ── 반응형: 태블릿 ── */
@media (max-width: 768px) {
    #cwWindow {
        width: calc(100vw - 24px) !important;
        height: 70vh !important;
        right: 12px !important;
        bottom: 90px !important;
    }
}

/* ── 반응형: 모바일 ── */
@media (max-width: 480px) {
    #cwToggle {
        width: 54px !important;
        height: 54px !important;
        bottom: 16px !important;
        right: 16px !important;
        font-size: 24px !important;
    }
    #cwWindow {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* dynamic viewport height (iOS Safari) */
        border-radius: 0 !important;
        z-index: 999999 !important;
    }
    #cwHeader {
        padding: 14px 16px !important;
        padding-top: max(14px, env(safe-area-inset-top)) !important;
    }
    #cwHeaderTitle { font-size: 16px !important; }
    #cwHeaderBtns span { font-size: 22px !important; padding: 4px 8px !important; }

    /* 탭바 터치 영역 확대 */
    .cw-tab { padding: 14px 0 !important; font-size: 14px !important; }

    /* 검색 */
    #cwSearch, .cw-search-input { padding: 12px 14px !important; font-size: 15px !important; }

    /* 채팅방 아이템 터치 영역 */
    .cw-room-item { padding: 14px 16px !important; min-height: 44px !important; }
    .cw-room-name { font-size: 15px !important; }

    /* 사용자 아이템 터치 영역 */
    .cw-user-item { padding: 14px 16px !important; min-height: 48px !important; }
    .cw-user-name { font-size: 14px !important; }

    /* 메시지 */
    #cwMessages { padding: 12px !important; }
    .cw-msg-bubble { font-size: 15px !important; padding: 10px 14px !important; max-width: 92% !important; }
    .cw-msg-image { max-width: 220px !important; }

    /* 입력 영역 - 모바일 최적화 */
    #cwInputArea {
        padding: 8px 10px !important;
        gap: 4px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    #cwEmojiBtn, #cwAttachBtn, #cwLocationBtn {
        width: 38px !important;
        height: 38px !important;
        font-size: 20px !important;
        min-width: 38px !important;
    }
    #cwInput { padding: 10px 14px !important; font-size: 16px !important; /* 16px=iOS 자동줌 방지 */ }
    #cwSendBtn { padding: 10px 16px !important; font-size: 13px !important; min-height: 38px !important; }

    /* 새 채팅 옵션 터치 영역 */
    .cw-newchat-option { padding: 16px 18px !important; min-height: 48px !important; }
    .cw-newchat-icon { font-size: 32px !important; }
    .cw-select-user { padding: 14px 14px !important; min-height: 44px !important; }

    /* 이모티콘 */
    .cw-emoji-item { width: 40px !important; height: 40px !important; font-size: 26px !important; }
    .cw-emoji-cat { font-size: 22px !important; padding: 6px 10px !important; }

    /* 새 채팅 버튼 */
    #cwNewChatBtn { padding: 14px 0 !important; font-size: 15px !important; margin: 10px 12px !important; }

    /* 이미지 모달 */
    #cwImageModal { padding: 8px !important; }
    #cwModalImg { max-width: 96vw !important; max-height: 70vh !important; }
    #cwModalActions { gap: 12px !important; }
    .cw-modal-btn { font-size: 15px !important; padding: 10px 20px !important; }

    /* 업로드 프로그레스 */
    #cwUploadProgress {
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
}

/* ── 반응형: 매우 작은 화면 ── */
@media (max-width: 360px) {
    #cwLocationBtn { display: none !important; } /* 공간 절약: 위치 버튼 숨김 */
    .cw-msg-bubble { max-width: 95% !important; }
}

/* ── 인앱 알림 팝업 (PC+모바일) ── */
.cw-notif-popup {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    left: 12px !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    background: #fff !important;
    color: #1f2937 !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    z-index: 9999999 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(102,126,234,0.15) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    animation: cwSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-left: 4px solid #667eea !important;
}
.cw-notif-icon {
    font-size: 28px !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #667eea20, #764ba220) !important;
    border-radius: 12px !important;
}
.cw-notif-content {
    flex: 1 !important;
    min-width: 0 !important;
}
.cw-notif-content strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 2px !important;
}
.cw-notif-content span {
    display: block !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.cw-notif-close {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ca3af !important;
    font-size: 16px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}
.cw-notif-close:hover { background: #f3f4f6 !important; color: #374151 !important; }
.cw-notif-out { animation: cwSlideUp 0.3s ease-in forwards !important; }

@keyframes cwSlideDown { from { opacity: 0; transform: translateY(-40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cwSlideUp { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-40px) scale(0.95); } }

/* ── 연결 프로그레스 바 ── */
#cwConnProgress {
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8ecff 100%) !important;
    border-bottom: 1px solid #e0e7ff !important;
}
.cw-conn-bar {
    height: 4px !important;
    background: #e5e7eb !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
}
.cw-conn-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #667eea, #764ba2) !important;
    border-radius: 2px !important;
    transition: width 0.5s ease !important;
}
.cw-conn-text {
    font-size: 11px !important;
    color: #6b7280 !important;
    text-align: center !important;
}
.cw-connecting-msg {
    text-align: center !important;
    padding: 50px 20px !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ── 전송 중 스피너 ── */
#cwUploadProgress {
    background: #f0f4ff !important;
    border-top: 1px solid #e0e7ff !important;
}
.cw-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #667eea !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: cwSpin 0.8s linear infinite !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}
@keyframes cwSpin { to { transform: rotate(360deg); } }
@keyframes cwFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ── 타이핑 인디케이터 ── */
#cwTypingIndicator {
    flex-shrink: 0 !important;
    padding: 0 16px !important;
    background: #f8fafc !important;
    animation: cwFadeIn 0.25s ease-out !important;
}
.cw-typing {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
}
.cw-typing-dots {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 6px 10px !important;
    background: #e5e7eb !important;
    border-radius: 16px !important;
}
.cw-typing-dots span {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    background: #9ca3af !important;
    border-radius: 50% !important;
    animation: cwTypingBounce 1.4s infinite ease-in-out both !important;
}
.cw-typing-dots span:nth-child(1) { animation-delay: -0.32s !important; }
.cw-typing-dots span:nth-child(2) { animation-delay: -0.16s !important; }
.cw-typing-dots span:nth-child(3) { animation-delay: 0s !important; }
@keyframes cwTypingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
.cw-typing-text {
    font-size: 11px !important;
    color: #9ca3af !important;
    font-style: italic !important;
}

/* ── 도움말 패널 ── */
#cwHelpContent {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px !important;
}
.cw-help { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.cw-help-section {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    transition: background 0.2s !important;
    animation: cwFadeIn 0.3s ease-out both !important;
}
.cw-help-section:nth-child(1) { animation-delay: 0s; }
.cw-help-section:nth-child(2) { animation-delay: 0.04s; }
.cw-help-section:nth-child(3) { animation-delay: 0.08s; }
.cw-help-section:nth-child(4) { animation-delay: 0.12s; }
.cw-help-section:nth-child(5) { animation-delay: 0.16s; }
.cw-help-section:nth-child(6) { animation-delay: 0.20s; }
.cw-help-section:nth-child(7) { animation-delay: 0.24s; }
.cw-help-section:nth-child(8) { animation-delay: 0.28s; }
.cw-help-section:nth-child(9) { animation-delay: 0.32s; }
.cw-help-section:hover { background: #f9fafb !important; }
.cw-help-icon {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    background: linear-gradient(135deg, #eef2ff, #f0fdf4) !important;
    border-radius: 10px !important;
}
.cw-help-body { flex: 1 !important; min-width: 0 !important; }
.cw-help-body strong { font-size: 13px !important; color: #1f2937 !important; display: block !important; margin-bottom: 2px !important; }
.cw-help-body p { font-size: 12px !important; color: #6b7280 !important; margin: 0 !important; line-height: 1.5 !important; }
.cw-help-body b { color: #4f46e5 !important; }
.cw-help-footer {
    text-align: center !important;
    font-size: 11px !important;
    color: #c4c8d0 !important;
    padding: 16px 0 8px !important;
    border-top: 1px solid #f3f4f6 !important;
    margin-top: 8px !important;
}