/* KNK Messenger — minimal but polished, mobile-first */ /* Pretendard — 번들 웹폰트(Variable, 전 굵기 1파일). 라이선스: OFL-1.1 (static/fonts/pretendard/NOTICE.txt) */ @font-face { font-family: "Pretendard"; src: url("../fonts/pretendard/PretendardVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-style: normal; font-display: swap; } /* 글씨체 옵션 — 선택 시에만 다운로드(번들 woff2, 한국어 subset). 라이선스: OFL-1.1 (각 NOTICE.txt) (대표 지시 2026-06-13) */ @font-face { font-family: "Noto Sans KR"; src: url("../fonts/noto-sans-kr/NotoSansKR-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Nanum Gothic"; src: url("../fonts/nanum-gothic/NanumGothic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Gowun Dodum"; src: url("../fonts/gowun-dodum/GowunDodum-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ── 전역 안전장치: [hidden] 속성은 항상 숨김 (대표 지시 2026-06-05 재발대책) ── 브라우저 기본 [hidden]{display:none} 은 클래스의 display 지정(예: .room-list{display:flex})과 우선순위가 같아 무력화될 수 있음. !important 로 항상 우선시켜, .hidden 토글로 숨기는 모든 요소 (roomList·filterBar·userList·각종 패널/모달)가 어떤 display 규칙에도 확실히 숨겨지도록 보장. */ [hidden] { display: none !important; } :root { --bg: #f6f7f9; --surface: #ffffff; --border: #e5e7eb; --text: #111827; --text-soft: #6b7280; --placeholder: #ccd0d6; /* 예시문구(placeholder) — 라이트에서 더 연하게 (대표 지시 2026-06-18, 기존 #aeb4bd) */ --input-text: #000000; /* 입력 글씨 = 완전 검정 — 예시문구와 확 구분 (대표 지시 2026-06-18) */ --accent: #A5282C; /* KNK 레드 — 브랜드 메인 (HAIST WORKS 토큰 일치) */ --accent-soft: #FEF2F2; /* 옅은 KNK 레드 — 호버 배경·서브 영역 */ --bubble-me: #FAD7D9; /* 옅은 KNK 핑크 — 내 메시지 배경 */ --bubble-me-text: #1f1f1f; --bubble-other: #ffffff; --bubble-other-text: #111827; --danger: #ef4444; --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06); /* 글씨 크기 오프셋 — 5단계 (대표 지시 2026-05-21) --fs-add : 메시지 등 본문 텍스트용 (전 범위) --fs-add-ui : 고정 UI(헤더·탭·버튼·팝업)용 — '크게(+4)'에서 상한 (레이아웃 보호) */ --fs-add: 0px; --fs-add-ui: 0px; /* 앱 글씨체 — 기본 Pretendard. body.ff-* 가 이 변수만 바꿔 전체 교체 (대표 지시 2026-06-13). 이모지 폴백(Apple/Noto Color Emoji)은 끝에 유지 — 국기·이모지 깨짐 방지. */ --app-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif; /* 사이드바 폭 = 좌/우 중간 분리 라인 위치. 여기 값만 바꾸면 분리선이 좌우로 조정됨. 멘션(@) 버튼 추가로 아이콘이 잘려 320 → 360 (우측 +40px). 아이콘은 절대 안 잘리도록 아래 .head-actions(flex-shrink:0) + #newRoomBtn(축소 허용) 와 함께 동작. (대표 지시 2026-05-22) */ --sidebar-width: 360px; } /* === 화면 테마 (대표 지시 2026-05-28) ================================= 로 전환. light 는 :root 기본 그대로. 토큰 8개 (bg/surface/border/text/text-soft/accent-soft/bubble-me/bubble-other) 만 재정의해도 메신저 전체 톤이 바뀜. 브랜드 색(--accent KNK 레드)·--danger 는 모든 테마 공통. */ /* 🌙 다크 — 야간/저조도 환경. 카톡 다크 톤 참고. */ html[data-theme="dark"] { --bg: #15181c; --surface: #1f242b; --border: #2c333c; --text: #e5e7eb; --text-soft: #9aa3ad; --placeholder: #646d78; /* 다크: text/text-soft가 너무 비슷 → placeholder는 오히려 배경 쪽으로 어둡게 내려 분리 (대표 지시 2026-06-17) */ --input-text: #f3f4f6; /* 다크: 입력 글씨는 밝게(배경 대비 또렷) (대표 지시 2026-06-18) */ --accent: #DC4147; /* 다크 배경에서 KNK 레드 약간 밝게 */ --accent-soft: #3a1a1c; --bubble-me: #5a2126; /* 짙은 레드 */ --bubble-me-text: #ffe0e2; --bubble-other: #262c34; --bubble-other-text: #e5e7eb; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.35); } /* 🌿 세이지 — 명확한 녹색 톤 (HAIST WORKS 힐링). 브랜드 KNK 레드는 유지. 사이드바·헤더·헤더 배경에 명확한 녹색이 깔리도록 채도 높임. (2026-05-28 강화) */ html[data-theme="sage"] { --bg: #dbe9d2; /* 명확한 세이지 배경 */ --surface: #eef5e8; /* 옅은 세이지 surface */ --border: #b8cdac; --text: #1a2d18; --text-soft: #4d6650; --placeholder: #86a088; /* 세이지: 옅은 녹+회 (대표 지시 2026-06-17) */ --input-text: #000000; /* 입력 글씨 완전 검정 (대표 지시 2026-06-18) */ --accent: #A5282C; --accent-soft: #f0e0e2; --bubble-me: #b4d39c; /* 진한 세이지 내 말풍선 — 명확히 녹색 */ --bubble-me-text: #15281a; --bubble-other: #eef5e8; --bubble-other-text: #1a2d18; } /* 🍦 크림 — 따뜻한 베이지/호박 톤. 더 진한 캐러멜 분위기. (2026-05-28 강화) */ html[data-theme="cream"] { --bg: #f3e3c2; /* 명확한 크림 배경 */ --surface: #fdf5e3; /* 옅은 크림 surface */ --border: #d6bf8a; --text: #2d1f0a; --text-soft: #76582c; --placeholder: #a98f63; /* 크림: 옅은 캐러멜 (대표 지시 2026-06-17) */ --input-text: #000000; /* 입력 글씨 완전 검정 (대표 지시 2026-06-18) */ --accent: #A5282C; --accent-soft: #f7e6d2; --bubble-me: #f0c887; /* 진한 호박색 내 말풍선 — 명확히 따뜻한 톤 */ --bubble-me-text: #2a1c08; --bubble-other: #fdf5e3; --bubble-other-text: #2d1f0a; } /* ☁️ 스카이 — 명확한 하늘색. 사이드바·헤더 전체에 푸른 톤이 깔림. (2026-05-28 강화) */ html[data-theme="sky"] { --bg: #cce0f2; /* 명확한 스카이 배경 */ --surface: #e8f1fa; /* 옅은 스카이 surface */ --border: #a4c1de; --text: #0a1c30; --text-soft: #3f5e84; --placeholder: #7d97bb; /* 스카이: 옅은 청+회 (대표 지시 2026-06-17) */ --input-text: #000000; /* 입력 글씨 완전 검정 (대표 지시 2026-06-18) */ --accent: #A5282C; --accent-soft: #f0dde0; --bubble-me: #94beed; /* 진한 스카이 내 말풍선 — 명확히 파란 톤 */ --bubble-me-text: #08182e; --bubble-other: #e8f1fa; --bubble-other-text: #0a1c30; } /* ── 🌙 다크 테마 — 형광 톤 정리 (대표 지시 2026-05-28) ───────────────────── light 기본에서 너무 화려한 색 (번역 라벨, 노란 안내, 시스템 말풍선 등) 을 다크 배경에 맞게 톤다운. CSS 변수에 없는 하드코드 위주로 override. */ /* 시스템 메시지 말풍선 — light 는 검정 6% 투명도라 다크에선 안 보임 */ html[data-theme="dark"] .msg.system .bubble { background: rgba(255,255,255,0.08); } /* 📌 요청 시스템 메시지 — 다크에서도 강조색 유지(클릭 가능 표시) (대표 지시 2026-06-07) */ html[data-theme="dark"] .msg.system.sys-req .bubble { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); } /* 메시지 번역 박스 — light: 파랑/녹색 강조. 다크에선 어둡게 깔린 톤으로 */ html[data-theme="dark"] .msg-translation { background: #1c2935; border-left-color: #5fa8d6; color: #cdd9e3; } html[data-theme="dark"] .msg-translation .tr-lang { background: #3a6b8e; /* 형광 sky → 차분한 청록 */ color: #e5eef6; } html[data-theme="dark"] .msg.mine .msg-translation { background: #1f2a23; border-left-color: #6aa089; color: #cfe0d6; } html[data-theme="dark"] .msg.mine .msg-translation .tr-lang { background: #3e6b54; /* 형광 green → 차분한 forest */ color: #e5efe8; } /* 자동번역 토글바 — 입력칸 위 띠 */ html[data-theme="dark"] .composer-langbar { background: #1a1f25; border-top-color: var(--border); } html[data-theme="dark"] .composer-langbar .cl-chip { background: #262c34; border-color: var(--border); color: var(--text); } html[data-theme="dark"] .composer-langbar .cl-chip:hover { border-color: #5a6573; } /* 활성 칩 — 다크에서 선택 여부가 또렷하게 보이도록 (대표 지시 2026-05-29) */ /* 공통: 활성 칩은 흰 글자 + 굵게 (비활성 칩의 색 규칙에 묻히지 않게) */ html[data-theme="dark"] .composer-langbar .cl-chip[data-active="1"] { color: #fff; font-weight: 700; } /* OFF — 다크 전용 활성색이 없어 비활성처럼 보이던 문제 → 또렷한 슬레이트 채움 */ html[data-theme="dark"] .composer-langbar .cl-chip[data-lang=""][data-active="1"] { background: #4a5568; border-color: #6b7685; } html[data-theme="dark"] .composer-langbar .cl-chip[data-lang="vi"][data-active="1"] { background: #c1272d; border-color: #c1272d; } html[data-theme="dark"] .composer-langbar .cl-chip[data-lang="en"][data-active="1"] { background: #2f51a8; border-color: #2f51a8; } /* 한국어 — 기존 #2a3340 은 비활성색(#262c34)과 거의 같아 구분 안 됨 → 또렷한 청록 */ html[data-theme="dark"] .composer-langbar .cl-chip[data-lang="ko"][data-active="1"] { background: #2f8f74; border-color: #2f8f74; } html[data-theme="dark"] .composer-langbar .cl-chip[data-lang="zh"][data-active="1"] { background: #c1272d; border-color: #c1272d; /* 중국 빨강 (다크) */ } /* "자동 번역 ON ..." 안내 — 다크용 연파랑 글씨(박스 없음) (대표 지시 2026-05-31) */ html[data-theme="dark"] .composer-langbar .cl-pill { background: transparent; border: 0; color: #93c5fd; } /* 뒤로 버튼 — 다크에서는 빨강 톤 살짝 낮춤 */ html[data-theme="dark"] .composer-langbar .cl-back { border-color: #c9404a; color: #e88a8f; } html[data-theme="dark"] .composer-langbar .cl-back:hover { background: #3a1a1c; border-color: #c9404a; } /* composer 모드별 상단 보더 — 다크에선 살짝 다운 */ html[data-theme="dark"] .composer.tr-vi { border-top-color: #a82326; } html[data-theme="dark"] .composer.tr-en { border-top-color: #2a4080; } html[data-theme="dark"] .composer.tr-ko { border-top-color: #4a5566; } /* 번역 메뉴 (우클릭 팝업) — 흰 배경 → surface */ html[data-theme="dark"] .translate-menu { background: var(--surface); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.5); } html[data-theme="dark"] .translate-menu button:hover { background: rgba(255,255,255,0.06); } /* 답글 N개 뱃지 — light: 파스텔 블루. 다크: 어두운 청록 톤. */ html[data-theme="dark"] .thread-reply-badge { background: #1c2935; color: #8db4d6; border-color: #2c3e54; } html[data-theme="dark"] .thread-reply-badge:hover { background: #243245; } /* ─── 인용 답장 카드 (Quote Reply) — light: 흰색 반투명, 다크: 어두운 surface ─── */ html[data-theme="dark"] .quote-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } html[data-theme="dark"] .msg.mine .quote-card { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.15); } html[data-theme="dark"] .quote-card:hover { background: rgba(255,255,255,0.10); } html[data-theme="dark"] .quote-card-bar { background: #5fa8d6; } html[data-theme="dark"] .quote-card-author { color: var(--text); } html[data-theme="dark"] .quote-card-text { color: var(--text-soft); } html[data-theme="dark"] .quote-card-deleted { background: rgba(255,255,255,0.05); color: var(--text-soft); } /* 인용 미리보기 바 (composer 위) — 다크에선 형광 sky → 차분한 청록 */ html[data-theme="dark"] .quote-preview-bar { background: #1c2935; border-color: #2c3e54; } html[data-theme="dark"] .quote-preview-label { color: #8db4d6; } html[data-theme="dark"] .quote-preview-author { color: var(--text); } html[data-theme="dark"] .quote-preview-body { color: var(--text-soft); } html[data-theme="dark"] .quote-cancel-btn { color: var(--text-soft); } html[data-theme="dark"] .quote-cancel-btn:hover { background: #243245; } /* 전달 카드 (Forward) — light: 노란 톤. 다크: 어두운 호박 */ html[data-theme="dark"] .forward-card { background: #2a200e; border-left-color: #b07a1f; } html[data-theme="dark"] .forward-card-head { color: #e8c980; } html[data-theme="dark"] .forward-card-time { color: #c0a460; } /* 자기 1인방(메모장) 사이드바 강조 — light: 노란 그라데이션. 다크는 톤다운 */ html[data-theme="dark"] .self-row { background: linear-gradient(to right, #3a2f12 0%, transparent 40%); } /* ── 사용자 목록 칩들 — 다크 톤다운 (대표 지시 2026-05-28) ── */ /* 직급 칩 (이사·매니저·프로 등) — light: 형광 sky 블루. 다크: 차분한 청록 */ html[data-theme="dark"] .user-title-chip { background: #1c2935; color: #8db4d6; } html[data-theme="dark"] .user-dept-chip { background: #2a313c; color: #aab4c0; } /* 회사망 접속 태그 (🏢 컴퓨터·휴대폰) — light: 형광 mint. 다크: 차분한 teal */ html[data-theme="dark"] .user-office-tag { background: #143834; color: #6dd3c2; } /* 카카오 노란 CEO 뱃지 — 다크에서도 노랑 유지하되 톤 약간 낮춤 */ html[data-theme="dark"] .user-ceo-badge { background: #d9c000; color: #2a1f00; } /* 글씨 크기 단계 — body 클래스로 전체 텍스트 오프셋 조정 (앱 전체, 휴대폰·PC 공통) 더작게(0)=+0 / 작게(1)=+1 / 표준(2)=+2 / 크게(3)=+4 / 더크게(4)=+6 (UI는 +4 상한) */ body.fs-1 { --fs-add: 1px; --fs-add-ui: 1px; } body.fs-2 { --fs-add: 2px; --fs-add-ui: 2px; } body.fs-3 { --fs-add: 4px; --fs-add-ui: 4px; } body.fs-4 { --fs-add: 6px; --fs-add-ui: 4px; } body.fs-5 { --fs-add: 10px; --fs-add-ui: 6px; } /* 아주크게 — 노안 배려, 더크게(+6)보다 본문 +4px (대표 지시 2026-05-31) */ /* 글씨체 — body 클래스가 --app-font 만 교체. 끝에 Pretendard·이모지 폴백 유지(없는 글자/국기 깨짐 방지) (대표 지시 2026-06-13) */ body.ff-noto { --app-font: "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif; } body.ff-nanum { --app-font: "Nanum Gothic", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif; } body.ff-gowun { --app-font: "Gowun Dodum", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif; } /* 상태 팝업 — 글씨 크기 선택 버튼 (5개) */ #fontSizeOptions { display: flex; gap: 4px; } #fontSizeOptions .fs-opt { flex: 1; padding: 7px 2px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-soft); font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; transition: all .12s; white-space: nowrap; } #fontSizeOptions .fs-opt:hover { border-color: #9ca3af; } #fontSizeOptions .fs-opt.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* 글씨체 선택 버튼 (3개) — 각 버튼은 해당 글씨체로 미리보기 (대표 지시 2026-06-13) */ #fontFamilyOptions { display: flex; gap: 4px; } #fontFamilyOptions .ff-opt { flex: 1; padding: 9px 2px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-soft); font-size: calc(14px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; transition: all .12s; white-space: nowrap; } #fontFamilyOptions .ff-opt:hover { border-color: #9ca3af; } #fontFamilyOptions .ff-opt.active { background: var(--accent); color: #fff; border-color: var(--accent); } #fontFamilyOptions .ff-opt[data-ff="default"] { font-family: "Pretendard", sans-serif; } #fontFamilyOptions .ff-opt[data-ff="noto"] { font-family: "Noto Sans KR", "Pretendard", sans-serif; } #fontFamilyOptions .ff-opt[data-ff="nanum"] { font-family: "Nanum Gothic", "Pretendard", sans-serif; } #fontFamilyOptions .ff-opt[data-ff="gowun"] { font-family: "Gowun Dodum", "Pretendard", sans-serif; } /* 테마 선택 카드 (5종) — 대표 지시 2026-05-28 */ #themeOptions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } #themeOptions .theme-opt { padding: 8px 4px 6px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-soft); font-size: calc(11px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; transition: border-color .12s, transform .08s; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; line-height: 1.1; } #themeOptions .theme-opt:hover { border-color: #9ca3af; } #themeOptions .theme-opt:active { transform: scale(0.97); } #themeOptions .theme-opt.active { border-color: var(--accent); color: var(--text); border-width: 2.5px; } /* 카드 상단 미니 미리보기 — 각 테마의 bg + bubble-me 두 점으로 색 힌트 */ #themeOptions .theme-swatch { width: 100%; height: 22px; border-radius: 6px; position: relative; border: 1px solid rgba(0,0,0,0.08); } #themeOptions .theme-swatch::after { content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; } #themeOptions [data-theme-id="light"] .theme-swatch { background: #f6f7f9; } #themeOptions [data-theme-id="light"] .theme-swatch::after { background: #FAD7D9; } #themeOptions [data-theme-id="dark"] .theme-swatch { background: #15181c; } #themeOptions [data-theme-id="dark"] .theme-swatch::after { background: #5a2126; } #themeOptions [data-theme-id="sage"] .theme-swatch { background: #dbe9d2; } #themeOptions [data-theme-id="sage"] .theme-swatch::after { background: #b4d39c; } #themeOptions [data-theme-id="cream"] .theme-swatch { background: #f3e3c2; } #themeOptions [data-theme-id="cream"] .theme-swatch::after { background: #f0c887; } #themeOptions [data-theme-id="sky"] .theme-swatch { background: #cce0f2; } #themeOptions [data-theme-id="sky"] .theme-swatch::after { background: #94beed; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--app-font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* 폼 요소 — body 의 color 를 상속받게 textarea·select 도 포함 (대표 지시 2026-05-28). 이전엔 button/input 만 inherit 라 textarea·select 는 브라우저 기본 검정 글자 → 다크 테마에서 어두운 배경 위 검정 글자로 안 보이던 문제. */ button, input, textarea, select { font: inherit; color: inherit; } /* 전역 스크롤바 토큰화 — 다크 테마에서도 자연스럽게 (대표 지시 2026-05-29) */ /* Firefox */ * { scrollbar-color: var(--border) transparent; } /* Chrome / Edge / Safari */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: padding-box; } *::-webkit-scrollbar-corner { background: transparent; } /* input/textarea/select 배경 — 브라우저 기본은 흰색이라 다크에서 안 보임. 토큰화. (대표 지시 2026-05-28) 자체 background 를 명시한 .login-form input 등은 더 강한 셀렉터로 우선됨. */ input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input:not([type]), textarea { background: var(--surface); color: var(--input-text); /* 입력 글씨 = 완전 검정(라이트) — 예제(placeholder)와 확 구분 (대표 지시 2026-06-18) */ font-weight: 500; /* 또렷하게 — 예제(placeholder)보다 강조 */ } select { background: var(--surface); color: var(--input-text); } select option { background: var(--surface); color: var(--input-text); } /* placeholder(예제 글씨) — 입력 글씨와 '한눈에' 구분: 테마별 전용 색(--placeholder)으로 확실히 옅게 + 보통 굵기. ⚠ opacity 로 흐림을 주면 배경(surface)이 비쳐 테마마다 색이 들쭉날쭉 → opacity:1 고정하고 색만으로 분리. ⚠ 한글은 italic 이 거의 렌더 안 됨 → italic 은 영문/숫자 예시용 보조 단서일 뿐, 주 단서는 --placeholder 색. (대표 지시 2026-06-17 — 예시문구 vs 입력값 구분 강화. 이전: --text-soft + opacity 0.55) */ input::placeholder, textarea::placeholder, select::placeholder { color: var(--placeholder); opacity: 1; font-weight: 400; font-style: italic; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } /* === SVG 아이콘 (이모지 대체 — 크롬·엣지·갤럭시·아이폰 동일, 대표 지시 2026-05-20) === 라이선스: 코드에 직접 작성한 라인 아이콘. 디자인은 오픈 아이콘 관례(Feather=MIT, Lucide=ISC) 스타일을 따름 — 둘 다 상업적 사용 자유·출처표기 의무 없음. 외부 의존/유료 자산 없음(무료). */ .hsvg{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;} .hsvg .fill{fill:currentColor;stroke:none;} .head-more-menu .hsvg{margin-right:8px;width:18px;height:18px;} code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; } /* ---- Login ---- */ .login-body { /* 흔들림 원인 = 모바일 주소창(툴바) 변동에 100vh/100dvh 가 계속 바뀌어 레이아웃이 출렁임. → 100svh(주소창 보이는 최소 높이, 고정)로 안정화. 짧으면 가운데 / 길면 위에서부터 스크롤. overflow-x:hidden 로 좌우 흔들림(가로 넘침)도 차단. (대표 지시 2026-05-22) */ display: flex; flex-direction: column; align-items: center; justify-content: safe center; min-height: 100vh; /* 폴백 */ min-height: 100svh; /* 핵심: 주소창 변동에 안 흔들리는 고정 높이 */ background: linear-gradient(135deg, #A5282C 0%, #6B1015 100%); padding: 18px 16px; padding-top: max(18px, env(safe-area-inset-top, 18px)); padding-bottom: max(18px, env(safe-area-inset-bottom, 18px)); box-sizing: border-box; overflow-x: hidden; } .login-card { width: 100%; max-width: 380px; flex-shrink: 0; /* 내용 길어도 카드가 찌그러지지 않음 */ background: var(--surface); border-radius: 16px; padding: 26px 24px 20px; /* 여백 축소로 한 화면에 더 들어오게 */ box-shadow: 0 20px 60px rgba(0,0,0,0.25); } /* 로그인 회사 로고 이미지 (대표 지시 2026-05-23) — 빨간 박스 글자 → 실제 KNK 로고 */ .brand-logo { display: block; width: auto; max-width: 200px; height: auto; max-height: 64px; margin: 0 auto 8px; cursor: pointer; } /* 회사 슬로건 — 로고 바로 아래 (대표 지시 2026-05-23) */ .brand-slogan { text-align: center; margin: 0 0 14px; color: #A5282C; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; letter-spacing: .3px; } .brand { text-align: center; margin: 0 0 4px; font-size: calc(22px + var(--fs-add-ui)); } .brand-sub { text-align: center; margin: 0 0 16px; color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); } .login-form { display: grid; gap: 14px; min-width: 0; } .login-form label { display: grid; gap: 6px; font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); min-width: 0; } .login-form input { width: 100%; /* 카드 폭에 맞춤 */ min-width: 0; /* 그리드 항목 min-width:auto(입력칸 기본 ~20글자) 때문에 폭이 넘침 → 0으로 풀어줌 */ box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; background: #f9fafb; outline: none; transition: border-color .15s, background .15s; } .login-form input:focus { border-color: var(--accent); background: #fff; } .login-form button { margin-top: 6px; background: var(--accent); color: #fff; padding: 12px; border-radius: 10px; font-weight: 600; transition: background .15s; } .login-form button:hover { background: #8B1F23; } .login-form .checkbox-row { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); cursor: pointer; } .login-form .checkbox-row input[type="checkbox"] { width: auto; height: auto; margin: 0; accent-color: var(--accent); cursor: pointer; } .login-form .checkbox-row span { font-size: calc(13px + var(--fs-add-ui)); } .login-form .error { background: #fef2f2; color: var(--danger); padding: 10px 12px; border-radius: 8px; font-size: calc(13px + var(--fs-add-ui)); } .hint { margin: 16px 0 0; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); text-align: center; } /* ── 로그인 화면 보안·이용 정책 고지 박스 ── */ .login-policy { margin-top: 14px; border: 1px solid #e2c4c5; border-radius: 10px; background: #fdf6f6; padding: 10px 12px; font-size: calc(11.5px + var(--fs-add-ui)); color: #4b1c1e; } .lp-header { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: calc(12px + var(--fs-add-ui)); color: #7f1d1f; cursor: pointer; list-style: none; /*

기본 삼각형 제거 */ } .lp-header::-webkit-details-marker { display: none; } .lp-arrow { margin-left: auto; font-size: 10px; flex-shrink: 0; transition: transform .15s; } .lp-details[open] .lp-header { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f0d0d1; } .lp-details[open] .lp-arrow { transform: rotate(180deg); } .lp-icon { font-size: calc(15px + var(--fs-add-ui)); } .lp-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .lp-list li { display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; color: #3b1516; } .lp-list li b { color: #7f1d1f; } .lp-badge { flex-shrink: 0; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-top: 2px; letter-spacing: 0.02em; } .lp-red { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .lp-org { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; } .lp-footer { font-size: 10.5px; color: #6b7280; border-top: 1px solid #f0d0d1; padding-top: 8px; margin: 0; line-height: 1.5; } /* 이 사이트가 무엇인지 밝히는 문구 (웹 분류 오분류 방지) — 작게·회색, 기존 디자인 방해 안 함. (대표 지시 2026-07-10) */ .login-site-desc { margin-top: 14px; padding-top: 10px; border-top: 1px solid #eee; font-size: 10px; color: #9ca3af; line-height: 1.55; text-align: center; } .login-site-desc p { margin: 0 0 5px; } .login-site-desc p:last-child { margin-bottom: 0; } .login-site-desc b { color: #6b7280; font-weight: 700; } /* ===== 로그인 ID 안내 박스 (본사/베트남) — 대표 지시 2026-05-26 ===== */ /* 정책 박스(.login-policy)와 동일 톤. 내부 두 섹션(KOR/VN) 분리. */ .login-idguide { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; margin-top: 12px; margin-bottom: 6px; } .login-idguide .lp-header { color: #0f172a; } .login-idguide .lp-details[open] .lp-header { border-bottom-color: #e2e8f0; } .lp-idguide-body { display: flex; flex-direction: column; gap: 10px; } .lp-idguide-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; } .lp-idguide-head { font-weight: 700; font-size: calc(12px + var(--fs-add-ui)); color: #0f172a; margin-bottom: 4px; } .lp-idguide-row { display: flex; align-items: flex-start; gap: 6px; font-size: calc(11.5px + var(--fs-add-ui)); line-height: 1.5; color: #1e293b; } .lp-idguide-dot { color: #64748b; flex-shrink: 0; } .lp-idguide-ex { font-family: Consolas, "Menlo", monospace; font-size: calc(11px + var(--fs-add-ui)); color: #475569; margin-left: 13px; padding: 1px 0 2px; } .lp-idguide-note { font-size: calc(11px + var(--fs-add-ui)); color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; padding: 6px 8px; margin: 0; line-height: 1.5; } .lp-idguide-ask { font-size: 10.5px; color: #6b7280; margin: 0; line-height: 1.5; } /* ===== 아바타 크롭 다이얼로그 (사진 위치 조정) — 대표 지시 2026-05-26 ===== */ .avatar-crop-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; } .avatar-crop-card { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; padding: 16px 16px 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; max-height: 92dvh; overflow-y: auto; } .avatar-crop-title { font-size: calc(15px + var(--fs-add-ui)); font-weight: 700; color: #0f172a; text-align: center; } .avatar-crop-hint { font-size: calc(11.5px + var(--fs-add-ui)); color: #6b7280; line-height: 1.5; text-align: center; } .avatar-crop-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #111827; border-radius: 10px; overflow: hidden; touch-action: none; /* 터치 드래그가 페이지 스크롤로 빠지는 것 방지 */ cursor: grab; user-select: none; } .avatar-crop-stage:active { cursor: grabbing; } .avatar-crop-canvas { display: block; width: 100%; height: 100%; touch-action: none; } /* 원형 마스크 (이 영역 안만 저장된다는 시각 안내) */ .avatar-crop-mask { position: absolute; inset: 0; pointer-events: none; /* 가운데에 원형 구멍 — 안은 투명, 바깥은 반투명 어둠 */ background: radial-gradient( circle at center, transparent 0, transparent calc(50% - 1px), rgba(0,0,0,0.45) 50% ); /* 원 가장자리 흰 테두리 (50% 지점) */ box-shadow: none; } .avatar-crop-mask::after { content: ""; position: absolute; inset: 0; border: 2px dashed rgba(255,255,255,0.85); border-radius: 50%; margin: auto; width: 100%; height: 100%; pointer-events: none; box-sizing: border-box; /* 사각 div 안에 원 테두리 — clip 효과 */ mask: radial-gradient(circle at center, black 49.5%, transparent 50%); -webkit-mask: radial-gradient(circle at center, black 49.5%, transparent 50%); } .avatar-crop-zoom { display: flex; align-items: center; gap: 8px; padding: 4px 2px; } .avatar-crop-zoom-label { font-size: calc(11px + var(--fs-add-ui)); color: #6b7280; white-space: nowrap; } .avatar-crop-zoom-input { flex: 1; height: 32px; accent-color: #A5282C; } .avatar-crop-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .avatar-crop-actions button { min-width: 80px; padding: 9px 14px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; border-radius: 8px; cursor: pointer; border: 1px solid transparent; } .avatar-crop-actions .btn-secondary { background: #fff; color: #374151; border-color: #d1d5db; } .avatar-crop-actions .btn-secondary:hover { background: #f3f4f6; } .avatar-crop-actions .btn-primary { background: #A5282C; color: #fff; border-color: #A5282C; } .avatar-crop-actions .btn-primary:hover { background: #8a1f23; } /* ===== 프로그램 개요 팝업 (로그인 KNK 로고 클릭) — 대표 지시 2026-05-22 ===== */ .about-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .about-overlay[hidden] { display: none; } .about-card { position: relative; width: 100%; max-width: 360px; max-height: 85dvh; overflow-y: auto; background: #fff; border-radius: 16px; padding: 24px 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .about-close { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: calc(20px + var(--fs-add-ui)); cursor: pointer; color: #6b7280; line-height: 1; padding: 4px; } .about-logo { display: block; width: auto; max-width: 180px; height: auto; max-height: 56px; margin: 0 auto 12px; } .about-title { text-align: center; margin: 0 0 2px; font-size: calc(19px + var(--fs-add-ui)); } .about-tagline { text-align: center; margin: 0 0 16px; color: #6b7280; font-size: calc(12.5px + var(--fs-add-ui)); } .about-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 12px; font-size: calc(13.5px + var(--fs-add-ui)); } .about-list dt { color: #991b1b; font-weight: 700; white-space: nowrap; } .about-list dd { margin: 0; color: #374151; line-height: 1.55; } /* ---- 내 사번 찾기 모달 (대표 지시 2026-05-27) ---- */ /* about-card 위에 덮어쓰는 전용 스타일 — 모바일 안전 폭 보장 */ .about-card.findid-card { box-sizing: border-box; width: 100%; max-width: 420px; /* viewport 보다 절대 크지 않게 — overlay padding 16px*2 = 32 제외 */ max-width: min(420px, calc(100vw - 32px)); } .about-card.findid-card input[type="text"] { min-width: 0; /* flex container 안에서 input default min-width 무시 → shrink 가능 */ box-sizing: border-box; width: 100%; } /* 결과 박스 내부 — 긴 username (이메일 등) 줄바꿈 보장 */ #findIdResult, #findIdResult * { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } #findIdResult .findId-useThis { /* 버튼만 줄바꿈 안 함 — 가로 100%, 텍스트 1줄 유지 */ word-break: normal; white-space: nowrap; } /* 매우 좁은 화면 (320px iPhone SE 등) — 패딩·폰트 축소 */ @media (max-width: 380px) { .about-overlay { padding: 8px; } .about-card.findid-card { padding: 16px 14px; max-width: calc(100vw - 16px); } .about-card.findid-card .about-title { font-size: calc(17px + var(--fs-add-ui)); } .about-card.findid-card .about-tagline { font-size: calc(11.5px + var(--fs-add-ui)); } } /* ---- Chat layout ---- */ .chat-body { overflow: hidden; } .mobile-top-brand { display: none; } /* 휴대폰에서만 노출 — 아래 모바일 미디어쿼리에서 flex (대표 지시 2026-06-07) */ .chat-app { display: grid; grid-template-columns: var(--sidebar-width, 360px) 1fr; height: 100vh; height: 100dvh; position: relative; /* 분리선 드래그 핸들(#sidebarResizer) 기준 */ } /* 좌/우 분리선 드래그 핸들 — 분리선 위치에 얇은 띠. 평소 거의 투명, 호버/드래그 시 강조. 오른쪽으로만 +100px 조정(JS에서 360~460px 클램프). 대표 지시 2026-05-22 */ #sidebarResizer { position: absolute; top: 0; bottom: 0; left: var(--sidebar-width, 360px); width: 12px; transform: translateX(-6px); cursor: col-resize; z-index: 60; touch-action: none; /* 터치 드래그 시 스크롤 방지 */ } #sidebarResizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: transparent; transition: background .15s; } #sidebarResizer:hover::after, #sidebarResizer.dragging::after { background: var(--accent); } /* ───── 대화창 접기/펼치기 (데스크탑) — 대표 지시 2026-06-02 ───── 분리선(정보창 오른쪽 끝) 위 길쭉한 화살표 탭(#chatCollapseBtn ❮/❯). 접힘: 오른쪽 대화방 숨김 + 방 목록이 창을 꽉 채움(grid 1fr 0, 고정폭 없음) → 창 폭이 얼마든 여백 0. 창을 좁게(크롬 최소폭까지) 끌수록 방 목록도 같이 좁아져 슬림 띠가 됨. 창 자체는 resizeTo 차단으로 자동 축소 불가 → 사용자가 가장자리를 끌어 맞춤(대표 결정 2026-06-03: 350 고정 대신 창에 맞춰 채움). 분리선 숨김. 화살표 탭: 펼침=분리선(360px) 위, 접힘=방 목록 오른쪽 끝(빨강이라 잘 보임). 펼침: 대화방 표시 + 스크롤 위치 복원(app.js). 접힘 중 방 1번클릭=선택만(안 펼침)·더블클릭=새 창. 단독창(solo)·휴대폰은 무관. (대표 재재재정정 2026-06-02: 접을 때 정보창 커짐 금지 · 펼칠 때 보던 위치 유지 · 1클릭 고정) */ .chat-app.chat-collapsed .chat-pane { display: none !important; } /* 오른쪽 대화방 숨김 */ .chat-app.chat-collapsed #sidebarResizer { display: none !important; } /* 접힘 땐 분리선 숨김 */ /* ★ 접힘 핵심: min-width:470px(데스크탑 5899) 해제(고정폭 없음) → 창을 크롬 최소폭까지 끌 수 있음. grid '1fr 0' → 방 목록(1fr)이 창 폭을 꽉 채우고(여백 0) 대화창 칸 0px(확실히 숨김, display:none 덮여도 안전). */ .chat-app.chat-collapsed { background: var(--surface); min-width: 0 !important; grid-template-columns: 1fr 0 !important; } .chat-app.chat-collapsed .sidebar { border-right: 0; } /* 혹시 남는 미세 띠 — 경계선 제거로 블렌드 */ /* 분리선 위 길쭉한 화살표 탭 — 데스크탑(마우스)에서만 노출 */ .chat-collapse-btn { position: absolute; top: 50%; left: var(--sidebar-width, 360px); /* 펼침: 방 목록↔대화창 분리선 위 (대표 원래 요청 '구분라인에 화살표') */ transform: translate(-50%, -50%); z-index: 62; /* #sidebarResizer(60) 위 — 분리선 위 화살표 탭 */ display: none; align-items: center; justify-content: center; width: 22px; height: 76px; padding: 0; border: 1px solid var(--accent); border-radius: 9px; background: var(--surface); color: var(--accent); /* 빨강 화살표 — 흰 배경에서 잘 보이게 */ font-size: calc(16px + var(--fs-add-ui)); line-height: 1; cursor: pointer; font-weight: 700; box-shadow: 0 1px 6px rgba(0,0,0,0.18); transition: color .15s, border-color .15s, background .15s; } .chat-collapse-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } @media (pointer: fine) { .chat-collapse-btn { display: inline-flex; } } body.solo-window .chat-collapse-btn { display: none !important; } /* 단독창은 사이드바 없음 */ /* 접힘: 방 목록(350px 본체)의 오른쪽 끝으로 → 펼침(분리선 360px)과 거의 같은 자리. 둘 다 '방 목록 오른쪽 경계'에 고정 → 항상 같은 곳에서 찾음. */ .chat-app.chat-collapsed .chat-collapse-btn { left: auto; right: 2px; transform: translateY(-50%); } /* ───── 접힘 + 좁은 창(≤480px)에서만 머리줄(대화방만들기+WORKS+아이콘4) 압축 — 대표 지시 2026-06-03 ───── 이제 접힘 폭 = 창 폭(가변)이라 뷰포트 미디어쿼리로 '좁을 때만' 적용. 여백·간격만 줄여 '대화방만들기' 글자 보존, 모자라면 글자만 … 로 줄되 아이콘은 안 잘림·가로 스크롤 0(#newRoomBtn flex-shrink:1). 넓은 창·펼침엔 영향 없음. */ @media (pointer: fine) and (max-width: 480px) { .chat-app.chat-collapsed .sidebar-head { padding-left: 10px; padding-right: 10px; } .chat-app.chat-collapsed .sidebar-head-actions-row .head-actions { gap: 1px; } .chat-app.chat-collapsed #worksOpenBtn { padding: 5px 8px !important; margin-right: 0 !important; } .chat-app.chat-collapsed #newRoomBtn { padding-left: 9px; padding-right: 9px; } } .sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; } .sidebar-head { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 16px 12px; border-bottom: 1px solid var(--border); } .me { display: flex; align-items: center; gap: 10px; min-width: 0; } .me-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 본인 정보 2행 컬럼 — 이름·직급 / 부서·상태 (2026-05-20) */ .me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .me-name-line { font-weight: 700; font-size: calc(13.5px + var(--fs-add-ui)); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-meta-line { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; display: flex; gap: 5px; align-items: center; } .me-meta-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .me-meta-sep { color: #D1D5DB; flex-shrink: 0; } .me-dept-text { flex-shrink: 1; } .me-status-text { flex-shrink: 0; } /* 1행: 아이콘 액션바 (우측 정렬) */ /* 1행: 본인정보 + 로그아웃(우측 상단) — 대표 지시 2026-05-20 */ .sidebar-head-top-row { display: flex; align-items: center; gap: 8px; } .sidebar-head-top-row .me { flex: 1; min-width: 0; } /* 로그아웃 — 아이콘만 있어 '로그아웃이 어디냐'는 직원 많아 텍스트 병기 (대표 지시 2026-06-01) */ .sidebar-logout { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 14px; /* 조금 더 작게 (대표 지시 2026-06-07) */ border: 1px solid var(--border); color: var(--accent); /* KNK 색 (대표 지시 2026-05-20) */ transition: background .15s, border-color .15s; text-decoration: none; } .sidebar-logout .logout-ico { /* ↩ 가 컬러 이모지로 렌더링되면 CSS color 가 무시됨 → 텍스트 표현 강제해서 KNK색 적용 */ font-variant-emoji: text; font-size: calc(15px + var(--fs-add-ui)); line-height: 1; /* 17→15 (대표 지시 2026-06-07) */ } .sidebar-logout .logout-txt { font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 600; white-space: nowrap; } .sidebar-logout:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } /* 강제 새로고침 — 로그아웃 왼쪽, 로그아웃 알약과 같은 라인 아이콘 톤(KNK색) (대표 지시 2026-06-07) */ .sidebar-refresh { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 14px; /* 조금 더 작게 (대표 지시 2026-06-07) */ border: 1px solid var(--border); background: transparent; color: var(--accent); cursor: pointer; transition: background .15s, border-color .15s; } .sidebar-refresh .refresh-ico { font-variant-emoji: text; font-size: calc(15px + var(--fs-add-ui)); line-height: 1; /* 17→15 (대표 지시 2026-06-07) */ } .sidebar-refresh:hover { background: var(--accent-soft); border-color: var(--accent); } @media (pointer: coarse) { .sidebar-refresh { padding: 5px 8px; } .sidebar-refresh .refresh-ico { font-size: calc(16px + var(--fs-add-ui)); } } /* 휴대폰(터치) — 살짝 키움 (대표 지시 2026-05-20) */ @media (pointer: coarse) { .sidebar-logout { padding: 5px 9px; } .sidebar-logout .logout-ico { font-size: calc(16px + var(--fs-add-ui)); } .sidebar-logout .logout-txt { font-size: calc(12px + var(--fs-add-ui)); } } /* 👥 직원 초대 (설정 → 초대 탭) — 메신저 링크 QR/복사 (대표 지시 2026-06-01) */ .emp-invite { text-align: center; padding: 4px 2px 8px; } .emp-invite-title { margin: 4px 0 6px; font-size: calc(15px + var(--fs-add-ui)); color: var(--text); } .emp-invite-hint { text-align: center; margin: 0 0 10px; } .emp-invite-qr { display: flex; justify-content: center; align-items: center; min-height: 120px; margin: 6px 0 10px; } .emp-invite-url { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); word-break: break-all; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; } .emp-invite-actions { display: flex; flex-direction: column; gap: 8px; } .emp-invite-actions button { width: 100%; } /* 초대 언어 선택 — 누른 언어로 QR·링크·메시지가 만들어짐 (대시보드 UI 언어와 별개) */ .emp-invite-langs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 2px 0 10px; } .emp-invite-langs .ei-lang { padding: 5px 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .emp-invite-langs .ei-lang[data-active="1"] { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } /* 2행: 왼쪽 "대화방 만들기" 버튼 / 오른쪽 아이콘 액션바 (대표 지시 2026-05-20) */ .sidebar-head-actions-row { display: flex; justify-content: flex-end; align-items: center; /* 대화방만들기 이동 후 아이콘은 오른쪽 정렬 (대표 지시 2026-06-06) */ min-height: 36px; /* 아이콘 축소와 무관하게 줄 높이 고정 → 좌/우 헤더 높이 일치 유지 */ } .avatar { width: 32px; height: 32px; border-radius: 50%; /* 원 10%↓ (36→32), 내용은 유지 — 대표 지시 2026-05-22 */ background: var(--accent); color: #fff; display: grid; place-items: center; font-size: calc(14px + var(--fs-add-ui)); font-weight: 700; flex-shrink: 0; /* 국기(🇰🇷·🇻🇳) 전 플랫폼 실제 이미지 렌더 — 폰트 순서가 핵심: · Apple Color Emoji 먼저 → iOS Safari RIS emoji-shaper 활성 (실제 국기) · Segoe UI Emoji 는 제외 → Windows 에서 국기를 "KR"·"VN" 글자로 표시하는 폰트라 건너뜀 · Noto Color Emoji / emoji → Windows·Android 에서 실제 국기로 fallback */ font-family: "Apple Color Emoji","Noto Color Emoji",emoji,sans-serif; overflow: hidden; /* avatar-img 사진이 원형 밖으로 안 나가게 */ position: relative; } /* 📋 AI 업무보고 봇 아바타 글자 — 빨강 'AI' (원 배경 초록은 서버 avatar_color #86efac). 대표 지시 2026-06-14 */ .msg-ai-mark { color:#dc2626; font-weight:800; font-size:.82em; letter-spacing:.01em; line-height:1; font-family:ui-sans-serif,system-ui,sans-serif; } /* 자동채널(본사/베트남/KNK WORLD) 원형아이콘 — 국기·지구 이모지 크게 + 흰 배경 폰트는 .avatar 에서 상속됨 (Apple Color Emoji 우선, iOS Safari RIS shaper 보존) font-size: calc(22px + var(--fs-add-ui)) 로 키워 36×36 원형 꽉 채움 */ .avatar.room-flag-avatar { font-size: calc(22px + var(--fs-add-ui)); line-height: 32px; /* 컨테이너 높이(32px)와 일치 → 이모지 클리핑 방지. 이모지 크기는 유지 */ background: #fff !important; } /* 방 종류 뱃지 (대표 지시 2026-05-29) — 방 목록에서 종류를 한눈에 구분. 아바타는 overflow:hidden 이라 뱃지를 밖(우하단)에 얹으려면 overflow 없는 래퍼 필요. */ .room-avatar-wrap { position: relative; flex-shrink: 0; line-height: 0; } .room-type-badge { position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; background: var(--surface); border: 2px solid var(--bg); display: grid; place-items: center; font-size: calc(12px + var(--fs-add-ui)); line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.25); pointer-events: none; font-family: "Apple Color Emoji","Noto Color Emoji",emoji,sans-serif; } /* 아바타 원 = 상태색 배경 + 상태 이모지 (대표 지시 2026-05-22, 크기 -20% 2026-05-27) 절대위치로 부모 원을 꽉 덮어, 위치별 배경색 위에 일관 적용. 이모지가 너무 두드러져 보인다는 의견에 따라 1.5em → 1.2em 으로 약 20% 축소. */ .avatar-status-fill { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-size: 1.2em; line-height: 1; } /* 사용자 아바타 이미지 — 원형 안을 꽉 채움 (대표 지시 2026-05-19) object-position: 머리/얼굴이 화면에 잘 보이도록 초점을 위쪽으로 (대표 지시 2026-05-28). 기본 50% 50% 면 인물 사진의 가슴/몸통이 원의 중심에 오고 머리가 잘림. 25% 로 올려서 머리·얼굴이 원 안에 들어오게. transform: scale(0.8) — 사진 20% 축소해 가장자리 잘림 추가 완화 (대표 지시 2026-05-28). */ .avatar-img, .user-card-avatar .avatar-img, .ucm-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transform: scale(0.8); display: block; border-radius: 50%; } /* ucm-avatar 편집 뱃지 (📷) — 본인·관리자만 호버 시 표시 */ .ucm-avatar { overflow: hidden; cursor: default; } .ucm-avatar-edit { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(11px + var(--fs-add-ui)); opacity: 0; transition: opacity .15s; pointer-events: none; } .ucm-avatar:hover .ucm-avatar-edit { opacity: 1; } .head-actions { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; } /* 헤더 아이콘 정리 (대표 지시 2026-07-06): 자주 쓰는 4개(🧠 AI요약·🔍 검색·🧵 스레드·📌 요청)만 바깥에 두고, 나머지는 ⋮ '메뉴상세설명'(headMoreMenu)에서 사용. 숨긴 버튼은 DOM에 남아 메뉴 클릭 시 그대로 동작(권한 게이팅 유지). ⋮ head-more 버튼은 유지. 게스트 전용 숨김(guestHideRules)과 별개. */ #noticeHeadBtn, #projectHistoryBtn, #starredBtn, #galleryBtn, #roomFilesBtn, #exportBtn, #guestInviteBtn, #itemEditBtn, #roomSettingsBtn, #leaveRoomBtn { display: none !important; } /* '대화방 만들기' — 눈에 띄는 버튼형(연한 적색 배경+테두리), 글자·아이콘 키움 (대표 지시 2026-05-31: 사용자 눈에 잘 안 들어옴) */ .sidebar-head-actions-row #newRoomBtn { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); border: 1px solid var(--accent); cursor: pointer; color: var(--accent); font-weight: 700; font-size: calc(12.5px + var(--fs-add-ui)); padding: 6px 11px; border-radius: 9px; white-space: nowrap; /* 공간이 모자라면 이 버튼이 먼저 줄어들고(글자 …), 오른쪽 아이콘은 절대 안 잘림 */ flex-shrink: 1; min-width: 0; overflow: hidden; transition: background .15s, color .15s, box-shadow .15s; } .sidebar-head-actions-row #newRoomBtn:hover { background: var(--accent); color: #fff; box-shadow: 0 1px 5px rgba(165,40,44,0.30); } .sidebar-head-actions-row #newRoomBtn .nrb-ico { font-size: calc(16px + var(--fs-add-ui)); line-height: 1; flex-shrink: 0; } .sidebar-head-actions-row #newRoomBtn .nrb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* 오른쪽 아이콘 — 채팅 헤더와 동일한 36px 유지(둘째 줄 높이 일치), 간격만 좁힘. flex-shrink:0 — 아이콘 묶음은 절대 줄어들거나 잘리지 않음 (대표 지시 2026-05-22) */ .sidebar-head-actions-row .head-actions { gap: 1px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-end; } /* 한 줄 유지(작게) — 넘치면 가로 스크롤로 안 잘리게 (대표 지시 2026-06-14) */ .sidebar-head-actions-row .head-actions::-webkit-scrollbar { display: none; } .head-actions button, .head-actions a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: calc(20px + var(--fs-add-ui)); color: var(--text-soft); transition: background .15s; } .head-actions button:hover, .head-actions a:hover { background: var(--bg); color: var(--text); } /* 사이드바 헤더 아이콘 버튼 28px(WORKS=🌟 아이콘만 포함). 보라 미리보기 칩(.hub-start-chip)은 자체 절반 크기 유지·제외 (대표 지시 2026-06-14) */ .sidebar-head-actions-row .head-actions button:not(.hub-start-chip), .sidebar-head-actions-row .head-actions a { width: 28px; height: 28px; font-size: calc(16px + var(--fs-add-ui)); } /* 한 줄에 다 들어가게 (대표 지시 2026-06-14) */ /* 위쪽 패딩 제거 — 고정(sticky)된 '내메모장+불편신고' 합친 칸을 맨 위에 딱 붙임. 윗여백이 있으면 스크롤 시 그 틈으로 아래 방이 비쳐 올라옴 (대표 지시 2026-06-04) */ .room-list { list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; } /* 명단만 스크롤 — 고정 칸은 위 헤더, 스크롤바가 고정 칸 옆까지 안 올라옴 (대표 지시 2026-06-05) */ .room-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px; } .room-list li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background .15s; /* iOS 롱프레스 시스템 콜아웃(복사·공유 등) 차단 */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .room-list li:hover { background: var(--bg); } .room-list li.active { background: var(--accent-soft); } /* 상단 고정 "같은 칸" — 내메모장 + 메신저불편사항 (좌우 2칸, 아바타 없음) (대표 지시 2026-06-03) */ /* 스크롤 범위에서 제외 — 목록을 내려도 항상 맨 위 고정 (sticky) (대표 지시 2026-06-04) */ .room-list li.room-combo-cell { flex-shrink: 0; /* 스크롤 영역 밖 고정 헤더 — 스크롤바가 이 칸 옆엔 안 생김 (대표 지시 2026-06-05) */ background: var(--surface); gap: 5px; padding: 2px 6px 3px; cursor: default; /* 여백 최소화 — 리스트 더 보이게 (대표 지시 2026-06-04) */ border-bottom: 1px solid var(--border); box-shadow: 0 5px 7px -3px rgba(0,0,0,0.16); /* 아래 그림자 — 목록이 이 칸 '아래로' 확실히 스크롤되게(칸에 포함돼 보이지 않게) (대표 지시 2026-06-05) */ } .room-list li.room-combo-cell:hover { background: var(--surface); } /* 호버 시도 불투명 유지 — 투명이면 스크롤되는 리스트가 비쳐 올라옴 (대표 지시 2026-06-05) */ .room-combo-cell .combo-half { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4.5px 8px; border-radius: 7px; /* 높이 약 5px 키움 (위아래 2.5px씩) (대표 지시 2026-06-06) */ background: var(--bg); border: 1px solid var(--border); cursor: pointer; transition: background .15s, border-color .15s; } .room-combo-cell .combo-half:hover, .room-combo-cell .combo-half.active { background: var(--accent-soft); border-color: var(--accent); } .room-combo-cell .combo-label { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-weight: 700; font-size: calc(12px + var(--fs-add)); color: var(--text); font-family: var(--app-font); } .room-combo-cell .unread-badge { flex-shrink: 0; } /* 대화방 만들기 — 콤보 줄 맨 앞 '만들기' 버튼. 빨강 채움은 '선택된' 느낌이라 빨강 외곽선(테두리·글자만 KNK색)으로 변경 — 주된 동작은 강조하되 선택 느낌 제거 (대표 지시 2026-06-07) */ .room-combo-cell .combo-half.combo-new { background: var(--bg); border-color: var(--accent); } .room-combo-cell .combo-half.combo-new .combo-label { color: var(--accent); } .room-combo-cell .combo-half.combo-new:hover { background: var(--accent-soft); border-color: var(--accent); } /* 검색·만들기 줄 '아래 배치' 미리보기 (대표 전용 토글) (대표 지시 2026-06-06) */ #comboBar { flex: 0 0 auto; overflow: visible; } #comboBar:empty { display: none; } #comboBar[hidden] { display: none !important; } .sidebar.layout-search-bottom .search-box { order: 98; border-top: 1px solid var(--border); } .sidebar.layout-search-bottom #comboBar { order: 99; } #layoutToggleBtn.on { color: var(--accent); background: var(--accent-soft); } /* 하단 바 접기/펼치기 손잡이 (아래 배치 미리보기 전용) */ #bottomBarHandle { order: 100; flex: 0 0 auto; width: 100%; align-items: center; justify-content: center; gap: 6px; border: none; border-top: 1px solid var(--border); background: var(--bg); color: var(--text-soft); padding: 6px 8px; cursor: pointer; font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 500; /* 너무 선명해 시선이 쏠리지 않도록 은은하게. 마우스 올리면 또렷 (대표 지시 2026-06-06) */ opacity: 0.5; transition: opacity .15s, background .15s, color .15s; } #bottomBarHandle:hover { background: var(--surface); color: var(--text); opacity: 1; } /* 접힘: 검색·만들기 줄 숨김, 손잡이만 남김 */ .sidebar.layout-search-bottom.bottom-collapsed .search-box, .sidebar.layout-search-bottom.bottom-collapsed #comboBar { display: none !important; } .room-list .room-info { flex: 1; min-width: 0; } .room-list .room-name { font-weight: 600; font-size: calc(12px + var(--fs-add)); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 글꼴 순서: 글자용(Pretendard·system) 먼저 → 이모지 글꼴은 뒤로. (대표 지시 2026-06-08) 이모지 글꼴(Apple Color Emoji)을 앞에 두면 iOS 가 '공백(스페이스)'까지 그 글꼴로 그려 단어 사이가 크게 벌어지는 문제가 있어, 글자/공백은 일반 글꼴로 그리게 함. 국기(🇰🇷·🇻🇳) 등 이모지는 글자 글꼴에 없으므로 뒤의 Apple Color/Noto Color Emoji 로 fallback → 깃발 유지. "Segoe UI Emoji" 는 제외(Windows 에서 국기를 KR/VN 글자로 표시하는 문제 방지). */ font-family: var(--app-font); } /* iOS 이모지(국기·📌·🔕 등)가 줄 높이를 크게 키워 방 행이 세로로 벌어지는 현상 차단 — 줄 높이를 명시 고정해 안드로이드와 동일한 행 높이로 통일. 행 높이는 아바타(32px)가 결정. (대표 지시 2026-06-08) */ .room-list .room-name-line, .room-list .room-info { line-height: 1.25; } .room-list .room-last { color: var(--text-soft); font-size: calc(12px + var(--fs-add)); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } /* 고객사(게스트) 참여 방 — 이름 앞 "(고객)" 강조 (대표 지시 2026-05-29) */ .room-guest-tag { color: #f59e0b; font-weight: 700; } .room-guest-tag.partner { color: #2563eb; } /* (협력) = 파란색 (대표 지시 2026-06-12) */ .room-list .room-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .room-list .room-time { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); } .unread-badge { background: var(--danger); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; padding: 0 8px; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(220, 38, 38, 0.45); /* 빨강에 살짝 그림자 — 떠 있는 느낌 */ letter-spacing: 0.2px; line-height: 1; } /* 우선배치 표식 — 메시지는 읽었어도 안 본 요청이 있으면 '왜 위인지' 작게 안내 (대표 지시 2026-06-08) */ .room-badges { display: flex; align-items: center; gap: 4px; } .room-pri-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: calc(11px + var(--fs-add-ui)); font-weight: 800; line-height: 1; white-space: nowrap; /* '📌 2' 처럼 건수가 붙어도 두 줄로 접히지 않게 (2026-07-27) */ } .room-pri-badge.req { background: #fef3c7; color: #92400e; } /* 내가 안 끝낸 요청 = 호박색 */ /* 미읽음 있는 방 — 이름 굵게 + 시간도 강조해 한눈에 (대표 지시 2026-05-27) */ .room-list li.room-unread .room-name { font-weight: 800; color: var(--text); } .room-list li.room-unread .room-time { color: var(--danger); font-weight: 700; } /* 전체보기 — 방 종류별 강조 차등: 프로젝트 > 그룹 > 채널 > 1:1 (대표 지시 2026-05-31) 맑은 고딕은 중간 굵기가 잘 안 나뉘어 굵기 + 글씨 크기를 함께 차등해 4단계가 또렷이 구분되게 함. */ #roomList.rl-all li.room-type-item .room-name { font-weight: 800; font-size: calc(13.5px + var(--fs-add)); } /* 프로젝트 = 가장 굵고 큼 */ #roomList.rl-all li.room-type-group .room-name { font-weight: 700; font-size: calc(12.5px + var(--fs-add)); } /* 그룹 */ #roomList.rl-all li.room-type-channel .room-name { font-weight: 600; font-size: calc(12px + var(--fs-add)); } /* 채널 */ #roomList.rl-all li.room-type-direct .room-name { font-weight: 400; font-size: calc(11.5px + var(--fs-add)); } /* 1:1 = 보통·가장 작게 */ /* ── 오래 대화 없는 방 — 점점 작게(3단계). 미읽음·핀·보는 중인 방은 JS에서 제외(항상 크게). (대표 지시 2026-06-07) ── 스크롤을 줄이려고 오래된 방의 줄 높이·아바타·글씨를 단계적으로 축소. 클릭하면 그 방이 활성→풀사이즈 복귀. ※ min-height 로 휴대폰 탭 영역 확보(너무 작아 못 누르는 일 방지). 종류뱃지(🏭📢👥)는 축소 아바타를 덮어 숨김. */ /* 1단계 — 1주+ : 살짝 작게 (줄어든 높이만큼 칸 간격=여백도 함께 좁힘, 대표 지시 2026-06-07 / 간격 더 축소) */ .room-list li.room-stale-1 { padding-top: 2px; padding-bottom: 2px; gap: 9px; opacity: 0.92; min-height: 30px; box-sizing: border-box; } .room-list li.room-stale-1 .avatar { width: 26px; height: 26px; font-size: calc(12px + var(--fs-add-ui)); } .room-list li.room-stale-1 .avatar.room-flag-avatar { line-height: 26px; font-size: calc(17px + var(--fs-add-ui)); } /* 2단계 — 2주+ : 더 작게 + 칩 숨김 + 간격 더 좁게 */ .room-list li.room-stale-2 { padding-top: 1px; padding-bottom: 1px; gap: 8px; opacity: 0.85; min-height: 26px; box-sizing: border-box; } .room-list li.room-stale-2 .avatar { width: 22px; height: 22px; font-size: calc(11px + var(--fs-add-ui)); } .room-list li.room-stale-2 .avatar.room-flag-avatar { line-height: 22px; font-size: calc(14px + var(--fs-add-ui)); } #roomList li.room-stale-2 .room-name { font-size: calc(11px + var(--fs-add)) !important; } /* 3단계 — 1달+ : 가장 작게 + 간격 가장 좁게 */ .room-list li.room-stale-3 { padding-top: 1px; padding-bottom: 1px; gap: 7px; opacity: 0.72; min-height: 23px; box-sizing: border-box; } .room-list li.room-stale-3 .avatar { width: 18px; height: 18px; font-size: calc(10px + var(--fs-add-ui)); } .room-list li.room-stale-3 .avatar.room-flag-avatar { line-height: 18px; font-size: calc(12px + var(--fs-add-ui)); } #roomList li.room-stale-3 .room-name { font-size: calc(10.5px + var(--fs-add)) !important; } /* 종류뱃지(🏭📢👥) — 모든 압축 단계에서 숨김(축소된 아바타 우하단을 덮어서) */ .room-list li.room-stale .room-type-badge { display: none; } /* 칩(고객사·코드·상태) — 2주+(2·3단계)부터 숨김(점점 작게: 1주=유지 / 2주+=숨김) */ .room-list li.room-stale-2 .customer-chip, .room-list li.room-stale-2 .code-chip, .room-list li.room-stale-2 .status-pill, .room-list li.room-stale-3 .customer-chip, .room-list li.room-stale-3 .code-chip, .room-list li.room-stale-3 .status-pill { display: none; } .room-list li.room-stale-2 .room-time, .room-list li.room-stale-3 .room-time { font-size: calc(10px + var(--fs-add-ui)); opacity: 0.8; } /* 미읽음은 종류 무관 항상 굵게(강조 유지) */ #roomList.rl-all li.room-unread .room-name { font-weight: 800 !important; } /* 프로젝트 필터 — 고객사 책갈피 (대표 지시 2026-06-08): · 가로 스크롤 없음(overflow hidden) — 선택 탭은 글자폭만 차지(전체 N), 선택 안 된 고객사 칩들이 남는 폭을 나눠 채움(넓게) (대표 지시 2026-06-20) · 높이 고정 — 선택/비선택 글씨 크기 동일(active 는 굵기·색·연결로만 강조) · '프로젝트 줄에서 붙어 나온' 느낌 — 위 선에 매달리는 반대 방향 폴더(아래 모서리만 둥금) */ .cust-tabs { display: flex; align-items: flex-start; gap: 3px; padding: 0 6px; height: calc(36px + var(--fs-add-ui)); box-sizing: border-box; border-top: 2px solid var(--accent, #A5282C); overflow: hidden; } /* 높이 고정 — box-sizing+height 로 못박아 선택/비선택·내용(방 수·테두리)과 무관하게 동일 높이. 위 테두리는 양쪽 다 2px(비선택=투명) 로 맞춤. */ .cust-tab { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: calc(30px + var(--fs-add-ui)); display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 7px; margin-top: -2px; border: 1px solid var(--border); border-top: 2px solid transparent; border-radius: 0 0 9px 9px; background: var(--bg, #f1f2f4); color: var(--text-soft, #6b7280); font-size: calc(11.5px + var(--fs-add-ui)); line-height: 1.25; white-space: nowrap; overflow: hidden; cursor: pointer; user-select: none; } .cust-tab .ct-name { overflow: hidden; text-overflow: ellipsis; } .cust-tab:hover { background: var(--surface, #fff); color: var(--text); } /* 선택된 탭 — 내용폭에 딱 맞게 고정(flex 0 0 auto: 안 자라고 안 줄어듦) → '전체 8'이 글자 크기만큼만 차지. 남는 폭은 비활성 고객사 칩들이 나눠 채움(.cust-tab flex 1). 강조는 굵기·강조색·위선 연결로만. (대표 지시 2026-06-20) */ .cust-tab.active { flex: 0 0 auto; background: var(--surface, #fff); border-color: var(--accent, #A5282C); border-top: 2px solid var(--surface, #fff); color: var(--accent, #A5282C); font-weight: 800; } .cust-tab .ct-count { font-size: 0.82em; opacity: 0.7; } .cust-tab .ct-unread { background: #EF4444; color: #fff; border-radius: 9px; padding: 0 5px; font-size: 0.78em; font-weight: 700; } .cust-tab .ct-pin { font-size: 0.85em; } .cust-tabs-hint { font-size: calc(8.5px + var(--fs-add-ui)); color: var(--text-soft); padding: 1px 10px 6px; } /* 🇰🇷🇻🇳 사용자 탭 법인 선택 — 세그먼트 토글(둥근 박스 하나를 둘로 나눠 선택 칸만 흰색). 깔끔·균등·테두리 최소 (대표 지시 2026-06-10) */ .corp-tabs { display: flex; gap: 3px; margin: 6px 8px; padding: 3px; background: var(--bg, #f1f2f4); border-radius: 11px; box-sizing: border-box; } /* 두 칸 폭 완전 동일(flex:1) — 사이드바 폭에 따라 자동 조정, 겹침/노치 없음 */ .corp-tab { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-soft, #6b7280); font-size: calc(12.5px + var(--fs-add-ui)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; } .corp-tab:hover:not(.active) { color: var(--text); } /* 선택된 칸만 흰색 + 살짝 그림자 + 빨간 굵은 글씨 (겹침/노치/외곽선 없음) */ .corp-tab.active { background: var(--surface, #fff); color: var(--accent, #A5282C); font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } .corp-tab .ctp-count { font-size: 0.82em; opacity: 0.7; font-weight: 600; } /* 세그먼트 토글은 자체 회색 트랙을 가지므로 툴바 여백/하단선 제거 */ .user-list-toolbar:has(.corp-tabs) { padding: 0; border-bottom: 0; background: transparent; } /* 요청 마감 — 날짜+시간(선택) 한 줄 + 안내는 아래 전체폭. (대표 지시 2026-06-09 배열 정렬) 핵심: .form-grid 가 align-items:stretch(기본)라 마감일 칸이 길어지면 옆 우선순위 select 가 세로로 늘어남 → align-items:start 로 고정. */ #newRequestDialog .form-grid { align-items: start; } .req-due-row { display: flex; gap: 8px; align-items: center; min-width: 0; flex-wrap: wrap; } /* min-width:0+wrap = 좁아도 절대 넘침/겹침 없음 */ .req-due-row .knk-date { flex: 0 1 200px; width: auto; min-width: 0; } .req-due-row #reqDueTime { flex: 0 0 auto; width: auto; min-width: 0; } .form-grid .req-due-hint { grid-column: 1 / -1; font-size: calc(10.5px + var(--fs-add-ui)); color: var(--text-soft); margin-top: -4px; line-height: 1.3; } /* ---- Chat pane ---- */ .chat-pane { display: flex; flex-direction: column; background: var(--bg); min-width: 0; } /* chat-head — 2행 구조 (대표 지시 2026-05-19): ┌ 1행 ─────────────────────────────────────────────────┐ │ [back] 프로젝트명 [고객사] [번호] [상태] [납기] │ ├ 2행 ─────────────────────────────────────────────────┤ │ 👥5 📌 🧠 📚 ★ 🖼 📥 ⚙ 👥 🚪 │ └────────────────────────────────────────────────────────┘ */ .chat-head { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 4px; /* 왼쪽 사이드바 헤더(높이 105px)와 하단선 정렬 — 세로 패딩으로 동일 높이 맞춤 (대표 지시 2026-05-20) */ padding: 10px 14px 11px; background: var(--surface); border-bottom: 1px solid var(--border); } .chat-head .back { display: none; grid-row: 1; grid-column: 1; font-size: calc(22px + var(--fs-add-ui)); color: var(--text-soft); width: 32px; height: 32px; } .chat-head .title-block { grid-row: 1; grid-column: 2; min-width: 0; } /* min-width:0 — 긴 1:1 제목이 grid 트랙을 넓혀 가로 넘침 유발하는 것 방지 (대표 지시 2026-05-29) */ .chat-head .head-more { display: none; grid-row: 1; grid-column: 3; } /* 나가기(🚪) — 데스크탑: 방 이름 줄 우측 상단(grid row1 col3). 표시여부는 JS(hidden)가 제어. (대표 지시 2026-05-20) */ .chat-head .head-leave { grid-row: 1; grid-column: 3; justify-self: end; font-size: calc(24px + var(--fs-add-ui)); } .chat-head .title { font-weight: 600; font-size: calc(14px + var(--fs-add-ui)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 2행 — head-actions 가 전체 폭에 걸쳐 정렬 */ .chat-head .head-actions { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; /* 우측 정렬 — 상단 나가기(🚪) 밑에 맞춤 (대표 지시 2026-05-20) */ gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .chat-head .head-actions::-webkit-scrollbar { display: none; } .chat-head .head-actions > * { flex-shrink: 0; } /* ★ 좌/우 헤더 하단선 항상 일직선 — 동일 고정 높이 강제 (대표 지시 2026-05-20: 절대 틀어지지 않게) 채팅 헤더는 방 종류·프로젝트 정보(item-meta)·나가기 버튼 유무로 높이가 달라졌었음 → 양쪽을 105px 고정 + border-box 로 못박아 어떤 상황에서도 하단 경계선 일치. 게이트: 마우스 환경(pointer:fine)이면 창 너비와 무관하게 항상 2분할이므로 적용. 넓은 화면(min-width:721)도 포함. 진짜 터치 휴대폰(단일 화면)만 제외. */ @media (pointer: fine), (min-width: 721px) { .sidebar-head, .chat-head { height: 105px !important; min-height: 105px !important; max-height: 105px !important; box-sizing: border-box !important; } .chat-head { overflow: hidden; } } .messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; /* 가로 클립 — 특정 방이 좌우로 밀리는 것 방지 (대표 지시 2026-05-29) */ list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; /* 대화 간 간격 8→4 (대표 지시 2026-05-20) */ } .messages .msg { display: flex; gap: 8px; max-width: 80%; } /* 말풍선 텍스트 선택 정책 (대표 지시 2026-06-03): - 휴대폰(터치): 평소엔 선택 안 됨 → 길게 누르면 우리 앱 메뉴만 뜸 (OS 복사·번역·모두선택·웹검색 막대가 앱 메뉴와 겹쳐 뜨는 충돌 방지). 더 길게(1.3초) 누르면 .lp-selectable 로 전환되어 부분 선택·복사 가능 (2단계 long-press, 2026-05-23). - PC(마우스 = 정밀 포인터): 자유 드래그·선택·복사 유지 (2026-05-27 지시 — PC 한정). */ .messages .msg, .messages .msg .bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .messages .msg .bubble.lp-selectable { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } /* ✂️ 텍스트 선택 복사 — 우리 '📋 복사하기' 버튼은 **제거**했다 (대표 확정 2026-07-24, v677). 손잡이로 범위를 바꾸면 휴대폰 자체 복사 막대(복사·공유·모두 선택·웹 검색)가 정상적으로 뜨고, 우리 버튼은 그 막대에 가려 오히려 방해가 됐다. 복사는 휴대폰(안드로이드·iOS) 기본 기능으로 한다. ⚠ 위 .lp-selectable 의 `-webkit-touch-callout: default` 가 그 막대를 띄우는 스위치 — 지우지 말 것. */ /* 메시지 텍스트 선택 강조색 — 선택 영역이 잘 보이도록 (대표 지시 2026-06-03). 파란 말풍선(내가 보낸 글)·회색 말풍선 양쪽에서 잘 보이게 선명한 노랑+검정. */ .messages .msg .bubble::selection, .messages .msg .bubble *::selection { background: #ffd21e; color: #111; } .messages .msg .bubble::-moz-selection, .messages .msg .bubble *::-moz-selection { background: #ffd21e; color: #111; } @media (pointer: fine) { .messages .msg, .messages .msg .bubble { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } } .messages .msg.mine { align-self: flex-end; flex-direction: row-reverse; } .messages .msg .avatar { width: 29px; height: 29px; font-size: calc(13px + var(--fs-add-ui)); } /* 원 10%↓ (32→29), 글자 유지 */ .messages .msg.mine .avatar { display: none; } /* ── 연속 메시지 묶기 (같은 사람·5분 이내) — 한 말풍선 덩어리로 합침 (대표 지시 2026-06-05, 더 확실하게) ── */ .messages .msg.cont { margin-top: -2px; } /* 묶음 내부 — 위 말풍선과 2px 간격 (gap 4px 중 2px 상쇄) (대표 지시 2026-06-05) */ .messages .msg.cont > .avatar { visibility: hidden; } /* 아바타 자리만 유지·숨김 → 본문 정렬 유지 */ .messages .msg.cont .author { display: none; } /* 작성자 이름·메타 줄 제거 */ .messages .msg.runmid .time { display: none; } /* 묶음의 마지막이 아니면 시간·읽음 숨김 (마지막에만 표시) */ /* 묶음 내부 인접 모서리 평평하게 → 위아래 말풍선이 한 덩어리로 이어져 보이게 */ .messages .msg.runmid .bubble { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } /* 아래에 이어짐 → 아랫모서리 평평 */ .messages .msg.cont .bubble { border-top-left-radius: 4px; border-top-right-radius: 4px; } /* 위에서 이어짐 → 윗모서리 평평 */ .msg .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .msg.mine .body { align-items: flex-end; } .msg .author { font-size: calc(12px + var(--fs-add)); color: var(--text-soft); padding: 0 4px; } .msg.mine .author { display: none; } /* 작성자 이름 옆 직급·부서 — 이름보다 작고 연한 회색 (대표 지시 2026-05-22) */ .msg .author-meta { font-size: 0.85em; font-weight: 400; color: #9ca3af; margin-left: 4px; } .msg .bubble { background: var(--bubble-other); color: var(--bubble-other-text); padding: 4px 11px; border-radius: 14px; /* 상하 여백 4px (대표 지시 2026-06-05) · 여백 축소 (대표 지시 2026-05-20) */ border-top-left-radius: 4px; word-wrap: break-word; word-break: break-word; white-space: pre-wrap; box-shadow: var(--shadow); font-size: calc(12px + var(--fs-add)); line-height: 1.45; /* 입력창 크기와 통일 + 글씨크기 조절 (대표 지시 2026-05-20) */ } .msg.mine .bubble { background: var(--bubble-me); color: var(--bubble-me-text); border-top-left-radius: 14px; border-top-right-radius: 4px; } .msg.system { align-self: center; max-width: 100%; } .msg.system .bubble { background: rgba(0,0,0,0.06); color: var(--text-soft); border-radius: 999px; padding: 6px 14px; font-size: calc(12px + var(--fs-add)); box-shadow: none; } .msg.system .avatar, .msg.system .author { display: none; } /* 📌 요청 시스템 메시지 — 클릭하면 '내 요청' 목록이 열림(담당자 바로 처리). 클릭 가능 표시. (대표 지시 2026-06-07) */ .msg.system.sys-req .bubble { cursor: pointer; background: var(--accent-soft); color: var(--accent); font-weight: 600; border: 1px solid var(--accent); } .msg.system.sys-req .bubble:hover { filter: brightness(0.97); text-decoration: underline; } .msg.system.sys-req .bubble::after { content: " ›"; opacity: 0.7; font-weight: 700; } /* 말풍선 + 시간 한 행 — 시간을 말풍선 옆 마지막 줄 바닥에 배치. 대표 지시 2026-05-21 */ .msg .bubble-row { display: flex; align-items: flex-end; gap: 4px; max-width: 100%; } .msg.mine .bubble-row { flex-direction: row-reverse; } /* 내 메시지: 시간이 말풍선 왼쪽 */ .msg .bubble-row > .bubble { flex: 0 1 auto; min-width: 0; } .msg .time { flex: 0 0 auto; /* 말풍선 옆에서 줄어들지 않음 */ font-size: calc(11px + var(--fs-add)); /* 읽음·날짜 텍스트 +2px (PC·모바일 공통) */ color: var(--text-soft); padding: 0 1px; display: flex; gap: 1.5px; align-items: center; letter-spacing: -0.4px; word-spacing: -1px; white-space: nowrap; padding-bottom: 1px; } .msg.mine .time { justify-content: flex-end; } /* 📐 2줄 이상 메시지 — 읽음·시각을 말풍선 아래로 내리고 본문을 넓게 (대표 지시 2026-05-29) */ .messages .msg.wide-msg { max-width: 90%; } .msg.wide-msg .bubble-row { flex-direction: column; align-items: flex-start; gap: 2px; } .msg.wide-msg.mine .bubble-row { flex-direction: column; align-items: flex-end; } /* 읽음/안읽음 배지 (내 메시지 옆에 작은 숫자) */ .read-badge { font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; padding: 0 3px; border-radius: 999px; cursor: help; } .read-badge.unread { color: #f59e0b; background: #fef3c7; } .read-badge.all-read { color: #6b7280; background: transparent; font-size: calc(11px + var(--fs-add-ui)); font-weight: 600; } .empty-state { flex: 1; display: grid; place-items: center; color: var(--text-soft); padding: 32px; text-align: center; } .composer { display: flex; gap: 8px; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--border); } /* 채팅 레이아웃 — 고정 영역(헤더·검색·필터·입력창)은 절대 줄어들지 않게 강제. 결과: 유연 영역(.room-list, .messages)만 남은 공간을 차지 + 그 안에서 스크롤. 창이 짧아져도 입력창은 항상 화면 하단에 보임. */ .chat-app .sidebar-head, .chat-app .search-box, .chat-app .filter-bar, .chat-app .chat-head, .chat-app .composer-area, .chat-app .composer-langbar, .chat-app .composer { flex-shrink: 0; } /* ⌄ 최근 메시지로 — 위로 스크롤하면 컴포저 위 우측에 떠서, 누르면 맨 아래(최근)로 (대표 지시 2026-06-16) */ .composer-area { position: relative; } .scroll-latest-btn { position: absolute; right: 14px; top: -54px; z-index: 45; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.22); transition: transform .15s ease, box-shadow .15s ease; } .scroll-latest-btn[hidden] { display: none !important; } /* author display:flex 가 UA [hidden] 이기는 함정 방지 */ .scroll-latest-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,.30); } .scroll-latest-btn:active { transform: translateY(0); } /* chat-pane 자체도 overflow 클립 — 자식이 어떤 이유로 넘쳐도 화면 밖으로 새지 않게 */ .chat-pane { overflow: hidden; } .sidebar { overflow: hidden; } /* ───────── 단독창(solo) 모드 — room-list 더블클릭으로 띄운 분리창 ───────── URL 에 ?solo=1&room= 가 있으면 사이드바 숨기고 chat-pane 만 풀화면. 에 .solo-window-pre 가 먼저 붙어 깜빡임 방지 (chat.html 스크립트). 에는 app.js 가 .solo-window 클래스를 추가. */ html.solo-window-pre .sidebar, body.solo-window .sidebar { display: none !important; } html.solo-window-pre .chat-app, body.solo-window .chat-app { grid-template-columns: 1fr !important; } body.solo-window #sidebarResizer { display: none !important; } /* 단독창은 사이드바 없음 */ body.solo-window .chat-head .back { display: none; } body.solo-window #newRoomBtn, body.solo-window #digestBtn, body.solo-window .sidebar-head .head-actions a[href$="dashboard"] { display: none; } /* 단독창은 모바일 미디어쿼리의 viewing-chat 토글에 영향받지 않게 — 항상 채팅 보임 */ body.solo-window .chat-app:not(.viewing-chat) .chat-pane { display: flex !important; } /* ─── solo-window 컴팩트 — 좁은 폭(약 306px) 가로 overflow 완전 차단 ─── */ /* 1) html / body 자체부터 차단 — 가로 스크롤바 발생 자체 봉쇄. ★ html.solo-window-pre body 에도 zoom: 1 강제 — pointer:fine 미디어쿼리의 zoom 0.72 가 첫 페인트부터 적용되지 않게(JS 가 body 에 solo-window 붙기 전 시점 보호). */ html.solo-window-pre, html.solo-window-pre body, body.solo-window { overflow-x: hidden !important; max-width: 100vw; } html.solo-window-pre body { zoom: 1 !important; } /* 2) Grid/Flex 자식의 min-content 보호 해제 — 가로 overflow 진짜 원인. 기본적으로 grid/flex item 은 자기 콘텐츠 최소 폭보다 작아지지 않으려 함. 이걸 min-width: 0 으로 해제해야 부모 폭에 강제로 맞춰짐. */ body.solo-window .chat-app > *, body.solo-window .chat-pane > *, body.solo-window .composer > *, body.solo-window .composer-area > *, body.solo-window .chat-head > * { min-width: 0 !important; } /* 3) 모든 컨테이너 가로 오버플로우 강제 클립 */ body.solo-window .chat-app, body.solo-window .chat-pane, body.solo-window .composer-area, body.solo-window .composer-langbar, body.solo-window .composer, body.solo-window .messages, body.solo-window .chat-head { overflow-x: hidden; max-width: 100%; } /* 4) 메시지 안 모든 미디어/이미지/임베드 폭 강제 제한 — 첨부 이미지가 폭 침범 차단 */ body.solo-window .messages img, body.solo-window .messages video, body.solo-window .messages iframe, body.solo-window .bubble img, body.solo-window .bubble video, body.solo-window .msg img, body.solo-window .msg video { max-width: 100% !important; height: auto; } body.solo-window .msg, body.solo-window .messages > * { max-width: 100% !important; } /* 2) chat-head — padding 줄이고 아이콘 버튼들 28px 로 축소(6개 버튼 + gap 다 들어가게) */ body.solo-window .chat-head { padding: 8px 10px; gap: 6px; } body.solo-window .chat-head .head-actions { gap: 2px; } body.solo-window .chat-head .head-btn, body.solo-window .chat-head .head-actions button, body.solo-window .chat-head .head-actions a { width: 28px; height: 28px; font-size: calc(15px + var(--fs-add-ui)); } /* 나가기 아이콘만 크게 (대표 지시 2026-05-20) */ body.solo-window .chat-head .head-leave { width: 32px; height: 32px; font-size: calc(23px + var(--fs-add-ui)); } body.solo-window .chat-head .title { font-size: calc(12px + var(--fs-add-ui)); } /* 3) composer — padding/gap/버튼 압축, "전송" 버튼이 안 잘리게 */ body.solo-window .composer { padding: 4px 6px 6px; gap: 3px; } body.solo-window .composer .composer-toolbar { gap: 3px; } body.solo-window .composer .attach-btn { width: 28px !important; height: 28px !important; font-size: calc(14px + var(--fs-add-ui)) !important; } body.solo-window .composer button[type="submit"], body.solo-window .composer #sendBtn { width: 30px !important; min-width: 30px !important; height: 30px !important; } body.solo-window .composer input, body.solo-window .composer textarea { padding: 7px 12px; font-size: calc(12px + var(--fs-add-ui)); min-width: 0; min-height: 20px; } body.solo-window .composer button[type="submit"], body.solo-window .composer #sendBtn { /* PC 공통 정의(➤ 아이콘 32×32) 그대로 사용 — solo 전용 추가 조정 불필요. */ flex-shrink: 0; } /* 4) composer-langbar — 번역 칩 컴팩트 (4개가 한 줄에 들어가게) */ body.solo-window .composer-langbar { padding: 4px 8px; gap: 4px; } body.solo-window .composer-langbar .cl-label { font-size: calc(11px + var(--fs-add-ui)); margin-right: 2px; } body.solo-window .composer-langbar .cl-chip { padding: 3px 7px; font-size: 10.5px; } body.solo-window .composer-langbar .cl-hint { font-size: 10.5px; } /* 5) messages — 좌우 padding 축소(메시지 버블 폭 최대 확보), 프로젝트메타 줄바꿈 허용 */ body.solo-window .messages { padding: 10px 8px; } body.solo-window .item-meta { flex-wrap: nowrap; gap: 4px; overflow-x: auto; } /* 메시지 버블이 좁은 폭에서도 단어단위 줄바꿈 — 긴 URL 등 안 튀어나가게 */ body.solo-window .bubble { word-break: break-word; overflow-wrap: anywhere; max-width: 100%; } /* 6) messages 영역 — 메인 창과 동일 크기로 (메인은 2026-05-19부터 zoom 1). ※ 과거 메인 zoom 0.72 시절의 0.82 축소가 남아 단독창 대화 글씨가 메인보다 작게 나오던 것 수정 → 단독창도 zoom 1 로 통일해, 사용자가 고른 글씨크기(fs-N)가 메인과 똑같이 보이게. (대표 지시 2026-06-02) */ body.solo-window .messages { zoom: 1; } /* ═══ 🔔 알림 시스템 — 설정 다이얼로그·인라인 토스트·사이드바 깜빡임 ═══ */ /* 설정 다이얼로그 행 */ .ns-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .ns-section:last-of-type { border-bottom: none; padding-bottom: 0; } .ns-section h4 { margin: 0 0 12px; font-size: calc(14px + var(--fs-add-ui)); color: var(--text); font-weight: 600; } .ns-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: calc(13px + var(--fs-add-ui)); cursor: pointer; flex-wrap: wrap; /* 좁은 화면에서 줄바꿈 — 가로 스크롤 방지 (대표 지시 2026-05-19) */ word-break: keep-all; } .ns-row.ns-indent { padding-left: 28px; cursor: default; } .ns-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; } .ns-row .ns-label { flex: 1; min-width: 0; /* flex shrink 허용 → 긴 텍스트 줄바꿈 */ color: var(--text); overflow-wrap: anywhere; } .ns-row .ns-sub { color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); min-width: 60px; flex-shrink: 0; } .ns-row input[type="range"] { flex: 1 1 120px; min-width: 0; max-width: 200px; } .ns-row .ns-pct { color: var(--accent); font-weight: 600; font-size: calc(12px + var(--fs-add-ui)); min-width: 36px; text-align: right; flex-shrink: 0; } .ns-row select { flex: 1 1 140px; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: calc(13px + var(--fs-add-ui)); } .ns-preview-btn { padding: 6px 12px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--accent); font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; flex-shrink: 0; } .ns-preview-btn:hover { background: var(--accent-soft); } /* 읽음/안읽음 명단 다이얼로그 (대표 지시 2026-05-19) */ .read-badge.clickable { cursor: pointer; transition: background .12s; } .read-badge.clickable:hover { filter: brightness(0.92); } .read-status-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; animation: fadeIn .15s; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .read-status-card { background: var(--surface); color: var(--text); border-radius: 0; /* 다크 포함 전 테마 대응 (대표 지시 2026-05-29) · 사각 = 팝업 규정① (대표 규정 2026-07-17) */ width: 92%; max-width: 380px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.25); overflow: hidden; } .rs-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .rs-head h3 { margin: 0; font-size: calc(15px + var(--fs-add-ui)); font-weight: 700; } .rs-close { background: transparent; border: 0; cursor: pointer; font-size: calc(18px + var(--fs-add-ui)); color: var(--text-soft); padding: 4px 8px; } .rs-close:hover { color: #DC2626; } .rs-tabs { display: flex; border-bottom: 1px solid var(--border); } .rs-tab { flex: 1; padding: 10px; background: transparent; border: 0; cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); border-bottom: 2px solid transparent; transition: all .12s; } .rs-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .rs-list { overflow-y: auto; padding: 8px 0; height: 46vh; /* 고정 높이 — 탭(안읽음/읽음) 항목 수가 달라도 카드 크기 안 변하게 (대표 지시 2026-05-29) */ } .rs-user-row { display: flex; align-items: center; gap: 12px; padding: 8px 20px; font-size: calc(13px + var(--fs-add-ui)); } .rs-user-row:hover { background: var(--bg); } .rs-avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 700; font-size: calc(13px + var(--fs-add-ui)); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; } .rs-user-block { flex: 1; min-width: 0; } .rs-user-name { color: var(--text); font-weight: 500; } /* 🖊 글쓴이 표시 — 글쓴이도 전체·읽음에 포함(대표 확정 2026-07-21) */ .rs-author-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 600; line-height: 1.5; color: #1d4ed8; background: #dbeafe; border: 1px solid #bfdbfe; vertical-align: middle; } .rs-user-meta { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 스레드 답글 작성자 직급·부서 (작은 회색) — 대표 지시 2026-05-19 */ .thread-author-meta { font-size: calc(11px + var(--fs-add-ui)); color: #9ca3af; font-weight: normal; margin-left: 4px; } .rs-time { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); } .rs-empty { padding: 32px 20px; text-align: center; color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); } .rs-foot { padding: 10px 20px; border-top: 1px solid var(--border); font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); text-align: center; } /* 메시지 인라인 편집 (대표 지시 2026-05-19) */ .msg-edit-area { background: #FEF3C7; border: 1px solid #F59E0B; border-radius: 8px; padding: 8px 10px; margin-top: 4px; /* 수정창을 원본 말풍선 이상 크기로 — PC=최대 720px·폰=화면 78% (부모보다 넓어지진 않음). (대표 지시 2026-07-14) */ width: min(720px, 78vw); max-width: 100%; box-sizing: border-box; } /* 수정 중인 메시지 줄 — 말풍선 80% 폭 제한 완화 + 옆의 시각 표시는 잠시 숨겨 수정창에 자리를 몰아줌 */ .messages .msg.editing { max-width: 96%; } .messages .msg.editing .bubble-row > .time { display: none; } .msg-edit-input { width: 100%; min-height: 38px; max-height: 60vh; /* 내용 전체 표시 — 화면 60% 넘으면 그때만 안쪽 스크롤 */ border: 1px solid #D1D5DB; border-radius: 6px; padding: 6px 8px; font-size: calc(13.5px + var(--fs-add-ui)); font-family: inherit; resize: vertical; box-sizing: border-box; background: #fff; outline: none; } .msg-edit-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(165,40,44,0.12); } .msg-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .msg-edit-hint { flex: 1; font-size: calc(11px + var(--fs-add-ui)); color: #92400E; } .msg-edit-cancel, .msg-edit-save { padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: calc(12px + var(--fs-add-ui)); border: 0; } .msg-edit-cancel { background: #fff; color: var(--text); border: 1px solid var(--border); } .msg-edit-cancel:hover { background: var(--bg); } .msg-edit-save { background: var(--accent); color: #fff; font-weight: 600; } .msg-edit-save:hover { background: #8B1F23; } .msg-edit-save:disabled { opacity: 0.6; cursor: not-allowed; } /* '✏ 편집됨 HH:mm' 라벨 — 시간 옆 작은 회색 (대표 지시 2026-05-19) */ .edited-badge { font-size: 10.5px; color: #9ca3af; margin-right: 4px; font-style: italic; white-space: nowrap; } .msg.mine .edited-badge { color: #FCA5A5; } /* 본인 메시지(분홍색 배경) 에서 대비 강화 */ /* 메시지·라이트박스 이미지 우클릭 차단 (Chrome 기본 메뉴 안 뜨게) (대표 지시 2026-05-19) */ .msg img, .album-grid img, .image-wrap img, #lightboxImg { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; /* iOS 길게 누르기 메뉴 차단 */ } /* 삭제된 메시지 — 회색 placeholder (대표 지시 2026-05-19) */ .msg.msg-deleted .bubble { background: transparent !important; border: 1px dashed var(--border) !important; color: var(--text-soft) !important; font-style: italic; padding: 6px 12px !important; } .msg.msg-deleted .deleted-placeholder { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12.5px + var(--fs-add-ui)); color: #9ca3af; } .msg.msg-deleted .author { opacity: 0.6; } .msg-action-delete { color: #DC2626; } .msg-action-delete:hover { background: rgba(220,38,38,0.08); } /* 진단 섹션 접힘 — 화살표 회전 (대표 지시 2026-05-19) */ .ns-collapse { padding-bottom: 16px; } .ns-collapse summary::-webkit-details-marker { display: none; } .ns-collapse[open] .ns-collapse-arrow { transform: rotate(90deg); } .ns-collapse-arrow { display: inline-block; transition: transform .15s; font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); } /* 설정 다이얼로그 — 가로 스크롤 방지 + 탭(알림·보안·관리자) 전환 시 일정한 크기 유지 (대표 지시 2026-05-24) */ #notifySettingsDialog .modal-content { overflow: hidden; /* 외곽 스크롤 제거 — 활성 탭 내용만 스크롤 */ max-width: 480px; height: min(calc(100vh - 32px), 600px); /* 작은 화면은 꽉, 큰 화면은 600px 고정 → 탭마다 동일 크기 */ display: flex; flex-direction: column; } /* 활성 탭이 남는 공간을 채우고, 내용이 많으면 그 안에서만 스크롤 → 창 크기 불변 */ #notifySettingsDialog .tab-pane.active { flex: 1 1 auto; overflow-y: auto; min-height: 0; } /* 사용법 탭 본문 — 읽기 쉬운 작은 문단 */ #notifySettingsDialog .help-p { font-size: calc(12.5px + var(--fs-add-ui)); line-height: 1.6; color: var(--text); margin: 0; } /* 새 버전 배포 안내 배너 (대표 지시 2026-05-24) */ /* 새 버전 안내창 — 확실히 보이게 크게 + 세로 배치(좁은 화면·휴대폰·단독창에서도 안 깨짐). (대표 지시 2026-06-02: 3배 크게) */ #updateBanner { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 100000; display: flex; flex-direction: column; align-items: center; gap: 14px; background: #A5282C; color: #fff; padding: 22px 30px; border-radius: 18px; font-size: 24px; font-weight: 800; line-height: 1.35; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.42); max-width: calc(100vw - 28px); animation: updateBannerIn .25s ease-out; } #updateBanner > span { white-space: normal; } @keyframes updateBannerIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } #updateBanner button { background: #fff; color: #A5282C; border: none; border-radius: 14px; padding: 14px 34px; font-size: 22px; font-weight: 800; cursor: pointer; white-space: nowrap; } #updateBanner button:hover { background: #ffe9e9; } /* (옛 .toast-container / .inline-toast / .room-list li.blink — 2026-05-26 옵션 자체 제거) */ /* 방별 음소거 표시 — 방 이름 옆 🔕 */ .room-list li .room-muted-icon { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); margin-left: 4px; opacity: 0.7; } /* 7) 메시지 hover 액션바 — 우클릭 컨텍스트 메뉴로 대체. 기존 hover 시 자동 표시되는 액션바는 숨김 (메시지 가림 방지). 대신 우클릭(또는 모바일 길게 누르기) 시 마우스 위치에 컨텍스트 메뉴 표시. */ body.chat-body .msg .msg-action-bar { display: none !important; } /* 메시지 컨텍스트 메뉴 — PC 메신저 스타일 */ .msg-context-menu { position: fixed; z-index: 9998; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 4px 0; min-width: 160px; font-size: calc(13px + var(--fs-add-ui)); animation: msgMenuFadeIn 0.12s ease-out; } @keyframes msgMenuFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .msg-context-menu .mcm-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; user-select: none; color: #1F2937; background: transparent; border: none; width: 100%; text-align: left; font-size: calc(13px + var(--fs-add-ui)); transition: background 0.1s; } .msg-context-menu .mcm-item:hover { background: #FEF2F2; color: #A5282C; } .msg-context-menu .mcm-icon { font-size: calc(16px + var(--fs-add-ui)); width: 20px; text-align: center; flex-shrink: 0; } /* 이메일·전화 줄 — 왼쪽 동작(보내기/걸기) + 오른쪽 '복사' 버튼 (대표 지시 2026-05-24) */ .msg-context-menu .mcm-row { display: flex; align-items: stretch; } .msg-context-menu .mcm-row .mcm-row-main { flex: 1; width: auto; } .msg-context-menu .mcm-copy-btn { flex-shrink: 0; border: none; border-left: 1px solid #E5E7EB; background: transparent; cursor: pointer; color: #6B7280; font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; padding: 8px 14px; white-space: nowrap; transition: background 0.1s, color 0.1s; } .msg-context-menu .mcm-copy-btn:hover { background: #FEF2F2; color: #A5282C; } .msg-context-menu .mcm-divider { height: 1px; background: #E5E7EB; margin: 4px 0; } .msg-context-menu .mcm-section-label { font-size: calc(11px + var(--fs-add-ui)); color: #9CA3AF; padding: 4px 14px 2px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* 길게 누르기 시각 피드백 */ .msg.long-pressing .bubble { transform: scale(0.97); transition: transform 0.15s; opacity: 0.85; } /* ─── 스레드(Threaded Reply) — 사이드 패널 ─── */ .thread-reply-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 10px; background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; border-radius: 12px; font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; user-select: none; transition: background 0.12s; } .thread-reply-badge:hover { background: var(--accent-soft); } .thread-panel { position: fixed; top: 0; right: -420px; width: 400px; max-width: 92vw; /* 키보드 대응 — JS가 유지하는 --vvh(키보드 제외 가시 높이)로 패널 높이 제한. 100dvh 고정이면 키보드가 떠도 패널이 화면 전체라 하단 입력창이 키보드에 가려짐. --vvh 사용 시 패널이 가시 영역만큼 줄어 입력창이 키보드 바로 위에 옴. (대표 지시 2026-05-21) */ height: var(--vvh, 100dvh); background: var(--surface); box-shadow: -8px 0 24px rgba(0,0,0,0.18); display: flex; flex-direction: column; z-index: 9990; transition: right 0.22s ease-out; } .thread-panel.open { right: 0; } .thread-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg); } .thread-panel-head .thread-title { font-weight: 700; font-size: calc(14px + var(--fs-add-ui)); color: var(--text); } /* 🌐 스레드 번역 보기 펼치기/접기 토글 바 (헤더 아래 얇은 줄) (대표 지시 2026-06-10) */ .thread-trview-toggle { flex-shrink: 0; width: 100%; display: block; text-align: center; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--border); background: #eef1f5; color: #4b5563; font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 500; cursor: pointer; } .thread-trview-toggle:hover { background: #e2e6ec; color: var(--text); } html[data-theme="dark"] .thread-trview-toggle { background: #262c34; color: #aab2bd; border-color: #3a4350; } .thread-close-btn { background: transparent; border: 0; cursor: pointer; font-size: calc(18px + var(--fs-add-ui)); color: var(--text-soft); padding: 4px 8px; border-radius: 6px; } .thread-close-btn:hover { background: var(--border); } .thread-body { flex: 1; overflow-y: auto; padding: 14px; background: var(--bg); } .thread-parent { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; } .thread-divider { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); text-align: center; margin: 8px 0; font-weight: 600; } .thread-msg-row { display: flex; gap: 8px; padding: 8px 6px; } .thread-msg-body { flex: 1; min-width: 0; } .thread-msg-author { font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; color: var(--text); margin-bottom: 2px; } .thread-msg-time { font-size: 10.5px; color: var(--text-soft); font-weight: 400; margin-left: 6px; } .thread-msg-content { font-size: calc(13px + var(--fs-add-ui)); color: var(--text); word-break: break-word; white-space: pre-wrap; } .thread-composer { display: flex; gap: 6px; align-items: flex-end; /* 입력창이 커져도 📎·➤ 버튼은 아래에 붙게 (대표 지시 2026-07-09) */ padding: 10px; border-top: 1px solid var(--border); background: var(--surface); } .thread-composer textarea { flex: 1; resize: none; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: calc(13px + var(--fs-add-ui)); font-family: inherit; outline: none; background: var(--bg); color: var(--text); /* 입력 양에 따라 자동 확대 — 2줄 최소, 240px 상한(이후 내부 스크롤). JS(_threadAutoGrow)가 실제 높이 설정. (대표 지시 2026-07-09) */ box-sizing: border-box; line-height: 1.4; min-height: 52px; max-height: 240px; overflow-y: auto; } .thread-composer textarea:focus { border-color: var(--accent); background: var(--surface); } .thread-send-btn { background: #A5282C; color: #fff; border: 0; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; /* SVG 종이비행기 정중앙 정렬 (2026-05-20 변경: ➤ → SVG) */ display: inline-flex; align-items: center; justify-content: center; padding: 0; } .thread-send-btn .send-icon { display: block; transform: translateX(1px); flex-shrink: 0; } .thread-send-btn:hover { background: #8a2024; } /* 스레드 답글 첨부 — 사진·파일 (대표 지시 2026-06-04) */ .thread-attach-btn { flex-shrink: 0; background: transparent; border: 0; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); padding: 0; } .thread-attach-btn:hover { background: var(--border); color: var(--accent); } .thread-img-link { display: inline-block; max-width: 200px; border-radius: 10px; overflow: hidden; cursor: zoom-in; margin-top: 2px; } .thread-img-link img { display: block; width: 100%; height: auto; border-radius: 10px; } .thread-file-card { display: flex; align-items: center; gap: 7px; margin-top: 3px; /* 대화창 파일 말풍선과 같은 규정 — 이름을 2줄까지 보여준다. (대표 지시 2026-07-29) ⚠ 여기만 빼놓으면 스레드(답글)로 받은 파일은 여전히 이름이 잘린다. */ padding: 7px 10px; max-width: min(420px, 100%); background: var(--bg); border: 1px solid var(--border); border-radius: 9px; font-size: calc(12px + var(--fs-add-ui)); } .thread-file-ico { flex-shrink: 0; } /* 옛 규칙은 white-space:nowrap = 한 줄 고정이라 조금만 길어도 무조건 잘렸다 → 2줄 허용. */ .thread-file-name { min-width: 0; font-weight: 600; color: var(--text); line-height: 1.25; word-break: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .thread-file-size { color: var(--text-soft); flex-shrink: 0; } .thread-file-dl { margin-left: auto; flex-shrink: 0; color: var(--accent); font-weight: 700; text-decoration: none; border: 1px solid var(--accent); border-radius: 6px; padding: 2px 8px; } .thread-file-dl:hover { background: var(--accent); color: #fff; } /* 📄 텍스트 파일 '보기' 버튼 — 받기 옆 외곽선 칩(버튼 기본값 리셋). 본문·스레드 카드 공통. (대표 지시 2026-07-09) */ .ktv-view-btn { margin-left: auto; margin-right: 6px; flex-shrink: 0; white-space: nowrap; cursor: pointer; padding: 4px 9px; border-radius: 5px; background: transparent; color: var(--accent); border: 1px solid var(--accent); font-family: inherit; font-weight: 600; line-height: 1.2; font-size: calc(10.5px + var(--fs-add-ui)); } .ktv-view-btn:hover { background: var(--accent); color: #fff; } /* 스레드 '보낼 첨부' 담기 바 (대표 지시 2026-06-04) */ .thread-pending-bar { border-top: 1px solid var(--border); background: var(--surface); padding: 7px 10px 8px; } .thread-pending-bar[hidden] { display: none; } .tpa-head { font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; color: var(--text-soft); margin-bottom: 6px; } .tpa-head b { color: var(--accent); } .tpa-tiles { display: flex; gap: 7px; flex-wrap: wrap; } .tpa-tile { position: relative; display: flex; align-items: center; gap: 6px; max-width: 168px; padding: 4px 8px 4px 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; } .tpa-tile img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .tpa-ico { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tpa-name { font-size: calc(11px + var(--fs-add-ui)); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tpa-x { flex-shrink: 0; border: 0; background: var(--border); color: var(--text-soft); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; } .tpa-x:hover { background: var(--accent); color: #fff; } .thread-panel.thread-drag { outline: 2px dashed var(--accent); outline-offset: -6px; } /* 외부 공유 등 짧은 안내 토스트 (대표 지시 2026-06-05) */ .knk-toast { position: fixed; left: 50%; bottom: 38px; transform: translateX(-50%) translateY(8px); background: rgba(28,28,30,.94); color: #fff; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.32); z-index: 100000; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: 86vw; text-align: center; } .knk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .thread-loading, .thread-error { text-align: center; padding: 24px; color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); } /* 자동삭제 아이콘 (방 목록) */ .room-retention-icon { font-size: calc(11px + var(--fs-add-ui)); color: #9CA3AF; margin-left: 4px; } /* 자기 1인방 — 사이드바 강조 */ .self-row { background: linear-gradient(to right, #FEF3C7 0%, transparent 40%); } /* ─── 인용 답장(Quote Reply) — 본 채널 답글 + 원본 미니 카드 ─── */ .quote-card { display: flex; align-items: stretch; background: rgba(255,255,255,0.7); border: 1px solid #E5E7EB; border-radius: 8px; margin-bottom: 4px; max-width: 380px; cursor: pointer; overflow: hidden; transition: background 0.12s; } .msg.mine .quote-card { background: rgba(255, 255, 255, 0.45); border-color: rgba(165, 40, 44, 0.3); } .quote-card:hover { background: rgba(255,255,255,0.95); } .quote-card-bar { width: 3px; background: #3b82f6; flex-shrink: 0; } .quote-card-body { padding: 6px 10px; flex: 1; min-width: 0; } .quote-card-author { font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; color: #1F2937; } .quote-card-text { font-size: calc(12px + var(--fs-add-ui)); color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quote-card-deleted { font-size: calc(12px + var(--fs-add-ui)); color: #9CA3AF; font-style: italic; padding: 4px 8px; background: #F3F4F6; border-radius: 6px; margin-bottom: 4px; } /* 인용 미리보기 바 (composer 위) */ .quote-preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px; margin-bottom: 6px; } .quote-preview-left { flex: 1; min-width: 0; } .quote-preview-label { font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; color: #1D4ED8; } .quote-preview-author { font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; color: #1F2937; } .quote-preview-body { font-size: calc(11.5px + var(--fs-add-ui)); color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quote-cancel-btn { background: transparent; border: 0; cursor: pointer; font-size: calc(14px + var(--fs-add-ui)); color: #6B7280; padding: 4px 8px; border-radius: 6px; } .quote-cancel-btn:hover { background: #DBEAFE; } /* ─── 전달(Forward) 카드 — 출처 메타 ─── */ .forward-card { background: #FEF3C7; border-left: 3px solid #F59E0B; padding: 4px 10px; border-radius: 4px; margin-bottom: 4px; font-size: calc(11.5px + var(--fs-add-ui)); } .forward-card-head { color: #92400E; } .forward-card-time { font-size: 10.5px; color: #B45309; opacity: 0.85; } .forward-room { font-weight: 600; color: #78350F; } /* ─── 다른 방으로 전달 — 책갈피 탭 + 내메모장 고정칸 (대표 지시 2026-06-06) ─── */ .forward-tabs { display: flex; gap: 4px; margin: 0 0 8px; flex-wrap: wrap; } .forward-tab { flex: 1 1 auto; min-width: 46px; padding: 5px 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 7px; font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; transition: color .12s, background .12s, border-color .12s; } .forward-tab:hover:not(.active) { background: var(--bg); color: var(--text); } .forward-tab.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } /* 내메모장 — 항상 상단 고정 행 (살짝 강조) */ #forwardSelfRow { margin: 0 0 6px; } .forward-self-row { background: var(--accent-soft); border: 1px dashed var(--border); } /* 🙋 직원 개인 책갈피 — 방 목록과 같은 높이의 표준 선택창(🇰🇷본사/🇻🇳베트남법인 책갈피는 선택창 안쪽). 숨김은 hidden 속성으로 하므로 다른 규칙의 display 에 지지 않도록 !important 로 못박음 (과거 '숨겨야 할 요소가 계속 보이던' 함정 방지). (대표 지시 2026-07-10) */ #forwardDialog .user-picker { height: 240px; padding: 0; margin-bottom: 0; } #forwardPeopleWrap[hidden], #forwardSelfRow[hidden], #forwardRoomList[hidden], #forwardSearchInput[hidden], #forwardDialog .forward-tab[hidden] { display: none !important; } /* ─── 🤫 귓속말 (Whisper) — 1명에게만 보이는 메시지 ─── */ .msg.whisper-msg .bubble { background: #FEF3C7 !important; border: 1px dashed #F59E0B !important; color: #5C3A0F !important; /* 짙은 갈색 글자 — 노란 배경 위 대비 (다크모드에서 회색 상속 방지) */ } .msg.whisper-msg.mine .bubble { background: #FFE4B5 !important; border: 1px dashed #D97706 !important; color: #5C3A0F !important; } .whisper-header { font-size: calc(11px + var(--fs-add-ui)); color: #92400E; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; } /* 작성창 위 귓속말 모드 배너 */ .whisper-preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #FEF3C7; border: 1px solid #F59E0B; border-radius: 8px; margin-bottom: 6px; } .whisper-preview-left { flex: 1; min-width: 0; } .whisper-preview-label { font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; color: #92400E; } .whisper-preview-body { font-size: calc(11px + var(--fs-add-ui)); color: #78350F; } /* 작성자 이름 hover — 우클릭 가능 표시 */ .msg .author { cursor: context-menu; -webkit-user-select: none; /* iOS 텍스트 선택 callout 차단 */ -webkit-touch-callout: none; /* iOS Safari long-press 메뉴 차단 */ user-select: none; display: inline-block; /* 패딩 가능하게 */ padding: 2px 4px; margin: -2px -4px; /* 시각상 원래 위치 유지 */ border-radius: 4px; transition: background 0.12s; } .msg .author:hover { text-decoration: underline dotted; } /* 모바일 롱프레스 시각 피드백 */ .msg .author.author-pressing { background: rgba(165, 40, 44, 0.15); transform: scale(0.96); transition: background 0.1s, transform 0.15s; } /* 인용 클릭 시 원본 강조 */ .msg.highlight-flash > .body { animation: highlightFlash 1.5s ease-out; } @keyframes highlightFlash { 0% { background: #FEF3C7; } 100% { background: transparent; } } /* ─── 사용자 상태 점 ─── */ .status-dot { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: #10B981; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); z-index: 2; /* avatar-img 위로 */ } /* 2026-06-03 대표 지시: 아바타에 상태 점 표시 안 함 — 아바타는 사진/첫글자만, 상태는 사용자목록 이름옆 글자(.user-status-text)로 확인 */ .status-dot { display: none !important; } /* 본인 개인 아바타 클릭 메뉴 (헤더 아바타 클릭 시) (대표 지시 2026-06-03) */ .self-avatar-menu { position: fixed; z-index: 10000; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); padding: 4px; display: flex; flex-direction: column; min-width: 160px; } .self-avatar-menu button { background: transparent; border: 0; text-align: left; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); color: var(--text); white-space: nowrap; } .self-avatar-menu button:hover { background: var(--bg); } /* 헤더 본인 아바타 — overflow:visible 로 status-dot 잘림 방지 (2026-05-20). .avatar 의 기본 overflow:hidden 이 status-dot 을 잘라먹음. .avatar-img 자체에 border-radius:50% 가 있어 동그라미 형태 유지됨. */ #meHeaderAvatar { overflow: visible !important; } #meHeaderAvatar .avatar-img { border-radius: 50%; } .status-online { background: #10B981; } .status-mobile { background: #84CC16; } .status-away { background: #9CA3AF; } .status-busy { background: #EF4444; } .status-meeting { background: #F59E0B; } .status-external { background: #8B5CF6; } .status-dnd { background: #DC2626; } .status-offline { background: #6B7280; } /* 상태 옵션 카드 hover — 반투명 브랜드 틴트로 다크/라이트 모두 글자 가독 유지. 기존 #FEF2F2(연분홍 고정)는 다크 테마에서 흰 글자가 흰 바탕에 묻혀 안 보였음 (대표 지시 2026-06-06). disabled(자동 출근) 카드는 hover 강조 제외. */ .status-option-card:not(.is-disabled):hover { border-color: #A5282C !important; background: rgba(165, 40, 44, 0.14) !important; } /* 내 상태 다이얼로그 — 카드 컴팩트화 + 스크롤 없이 한 화면 (2026-05-20) */ #statusDialog .status-option-card { padding: 6px 8px !important; border-width: 1.5px !important; border-radius: 7px !important; } #statusDialog .status-option-card > div:first-child { font-size: calc(12.5px + var(--fs-add-ui)) !important; } #statusDialog .status-option-card > div:nth-child(2) { font-size: 10.5px !important; margin-top: 1px !important; line-height: 1.25 !important; } #statusDialog .modal-content { padding: 18px !important; } #statusDialog h3 { margin: 0 0 6px !important; font-size: calc(16px + var(--fs-add-ui)); } #statusDialog .dialog-actions { margin-top: 12px !important; } /* 📅 일정 추가 — details 접기 영역 */ .status-calendar-collapsible { border-top: 1px solid var(--border); padding-top: 8px; } .status-calendar-collapsible[open] summary { color: var(--accent); } .status-calendar-collapsible summary::-webkit-details-marker { color: var(--text-soft); } /* ─── 방 목록 컨텍스트 메뉴 (우클릭/롱프레스) ─── */ .room-context-menu { min-width: 180px; } .msg-context-menu .mcm-danger { color: #DC2626; } .msg-context-menu .mcm-danger:hover { background: #FEE2E2; color: #991B1B; } /* ─── 사이드바 탭 (방 / 사용자) ─── */ /* 사이드바 탭 — 선택 시 아래 내용과 '이어지는' 폴더/시트 탭 느낌 (대표 지시 2026-06-06) */ .sidebar-tabs { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); /* 탭 아래 '선반' 선 */ background: var(--surface); } .sb-tab { flex: 4 1 0; /* 비선택 40% — 선택(6)과 4:6 비율로 균형 (대표 지시 2026-06-06) */ min-width: 0; background: transparent; border: 1px solid transparent; /* 비활성 — 평평 */ border-bottom: 0; border-radius: 9px 9px 0 0; padding: 8px 8px; /* 10 → 8 (칸 너무 넓지 않게, 대표 지시 2026-06-06) */ margin-bottom: -1px; /* 선반 선과 겹치게 → 연결감 */ font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; letter-spacing: -0.2px; /* 글자 간격 살짝 좁혀 칸 폭 절약 (대표 지시 2026-06-06) */ color: var(--text-soft); cursor: pointer; transition: color 0.12s, background 0.12s, border-color 0.12s; } .sb-tab:hover:not(.active) { color: var(--text); background: var(--bg); } .sb-tab.active { flex: 6 1 0; /* 선택 60% — 더 넓게 강조 (대표 지시 2026-06-06) */ color: #A5282C; font-weight: 800; /* 책갈피 윗쪽부터 텍스트까지 브랜드색 그라데이션 → 선택 표기 확실히. 아래쪽은 내용 배경(surface)으로 자연 연결 (대표 지시 2026-06-06) */ background: linear-gradient(180deg, rgba(165,40,44,0.24) 0%, rgba(165,40,44,0.10) 50%, var(--surface) 100%); border-color: var(--border); /* 위·좌·우 테두리 */ border-bottom: 1px solid var(--surface); /* 아래 경계선 끊김 → 내용과 이어짐 */ } /* 사용자 탭 카운트 (본사/베트남 인원) — 대표 지시 2026-05-27 */ .sb-tab .sb-tab-count { display: inline-block; margin-left: 4px; /* 6 → 4 (칸 폭 절약, 대표 지시 2026-06-06) */ font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 500; color: #6B7280; letter-spacing: 0; } .sb-tab.active .sb-tab-count { color: #A5282C; opacity: 0.8; } .sb-tab .sb-tab-count[hidden] { display: none; } /* 업무대화방 탭 미읽음 합계 — 빨강 알약(사용자 탭 회색 카운트와 구분). 다른 탭 볼 때만 JS 로 표시. (대표 지시 2026-06-08) */ .sb-tab #roomsTabCount { background: var(--danger); color: #fff; border-radius: 999px; min-width: 17px; padding: 0 5px; text-align: center; font-weight: 800; opacity: 1; } .sb-tab.active #roomsTabCount { color: #fff; opacity: 1; } /* 사용자 탭 — 현재 법인(🇰🇷 한국 / 🇻🇳 베트남) 알약. 탭 재클릭으로 순환 (대표 지시 2026-06-06) */ .sb-tab .sb-tab-corp { display: inline-block; margin-left: 4px; vertical-align: middle; /* 5 → 4 (칸 폭 절약) */ font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 800; letter-spacing: 0; color: #A5282C; background: var(--accent-soft); border-radius: 999px; padding: 0 7px; /* 8 → 7 */ } .sb-tab .sb-tab-corp[hidden] { display: none; } /* 탭 너비: 선택 60% / 비선택 40% (위 .sb-tab grow=4, .sb-tab.active grow=6). 어느 탭이든 active 기준 → 두 탭이 가로폭을 균형있게 채움(한쪽 쏠림 없음) (대표 지시 2026-06-06) */ .sb-tab { white-space: nowrap; } /* 탭 글자 줄바꿈 금지 (모바일 2줄 방지) */ /* ─── 사용자 탭 툴바 (➕ 직원 등록 버튼) ─── */ .user-list-toolbar { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg); } /* ─── 사용자 목록 ─── */ .user-list { flex: 1; overflow-y: auto; padding: 0; /* 상단 4px 투명 padding 제거 — sticky 헤더 위 비침 방지 */ background: var(--surface); } /* 본사/베트남 책갈피(탭) — 직원 디렉터리 상단 고정 (대표 지시 2026-06-05) */ .user-corp-tabs { position: sticky; top: 0; z-index: 7; /* 부서 헤더(z5)보다 위 — 스크롤해도 항상 보이게 */ display: flex; gap: 6px; padding: 6px; background: var(--surface); border-bottom: 1px solid var(--border); } .user-corp-tab { flex: 1; padding: 7px 8px; font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; } .user-corp-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .user-corp-tab .uct-n { opacity: .8; font-weight: 500; margin-left: 2px; } /* 본사/베트남 탭 줄 제거 → 부서 헤더 sticky 를 컨테이너 최상단으로 (대표 지시 2026-06-06) */ .user-corp-pane .user-dept-head { top: 0; } /* 본사/베트남 순환 토글 — 첫 부서(00_총괄) 헤더 오른쪽 끝 (대표 지시 2026-06-06) */ .user-dept-head .user-corp-cycle { float: right; margin: -2px 0 0 6px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 1px 10px; font-weight: 800; cursor: pointer; font-size: calc(10.5px + var(--fs-add-ui)); line-height: 1.7; text-transform: none; letter-spacing: 0; white-space: nowrap; } .user-dept-head .user-corp-cycle:hover { background: var(--accent); color: #fff; } .user-dept-head .user-corp-cycle .ucc-n { opacity: .85; font-weight: 700; } .user-dept-head .user-corp-cycle .ucc-arrow { margin-left: 2px; } .user-corp-pane > .user-corp-cycle { float: none; display: inline-block; margin: 8px 12px; } .user-dept-head { /* sticky 부서 헤더 — 위쪽 틈 비침 방지 (2026-05-20): · top: 0 으로 스크롤 컨테이너 최상단 고정 · z-index 충분히 높임 · 배경 불투명 + 약간의 하단 그림자로 콘텐츠와 분리감 */ padding: 10px 12px 6px; font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.3px; background: var(--bg); position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 rgba(0,0,0,0.06); cursor: pointer; /* 클릭하면 접기/펼치기 */ user-select: none; } .user-dept-head:hover { background: var(--border); } .user-dept-head .dept-arrow { display: inline-block; font-size: 9px; color: var(--text-soft); margin-right: 3px; transition: transform .15s; vertical-align: middle; } .user-dept-head.collapsed .dept-arrow { transform: rotate(-90deg); } /* 첫 부서 헤더 오른쪽 끝 — 본사/베트남 전체 인원 요약 */ .user-dept-summary { float: right; font-size: 10.5px; font-weight: 700; color: var(--text-soft); letter-spacing: 0; text-transform: none; background: var(--border); border-radius: 999px; padding: 1px 8px; } .user-dept-count { display: inline-block; background: var(--border); color: var(--text-soft); padding: 1px 6px; border-radius: 999px; font-size: 10px; margin-left: 6px; font-weight: 600; } .user-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; transition: background 0.1s; position: relative; } .user-card:hover { background: var(--bg); } .user-inactive-row { opacity: 0.5; cursor: not-allowed; } .user-card-avatar { position: relative; width: 32px; height: 32px; /* 원 10%↓ (36→32), 글자 유지 */ border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: calc(14px + var(--fs-add-ui)); flex-shrink: 0; } .user-card-avatar .status-dot { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); /* 테마 배경과 같은 색으로 경계 — 다크에서 흰 테두리 튐 방지 */ } .user-card-info { flex: 1; min-width: 0; } .user-card-name { font-size: calc(13.5px + var(--fs-add)); font-weight: 600; color: var(--text); /* 사용자 목록 = 읽는 본문 → 큰 폭 연동 (대표 지시 2026-05-31) */ line-height: 1.25; /* iOS 이모지(국기 등)가 줄 높이를 키워 행이 벌어지는 것 방지 — 안드로이드와 통일 (대표 지시 2026-06-08) */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-card-meta { display: flex; align-items: center; gap: 6px; font-size: calc(11px + var(--fs-add)); color: var(--text-soft); line-height: 1.25; /* 상태 줄도 동일 (대표 지시 2026-06-08) */ margin-top: 2px; } .user-title-chip { background: #EFF6FF; color: #1D4ED8; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; } /* 상태 기한 칩 — 이름 옆 '🕒 ~15:00' / '📅 ~6/10' (회의·외근=시각, 출장·휴가=날짜). 테마 변수라 다크에서도 가독 (대표 지시 2026-06-06) */ .user-until-chip { display: inline-block; margin-left: 5px; padding: 0 7px; border-radius: 999px; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 700; white-space: nowrap; vertical-align: middle; background: var(--accent-soft); color: var(--accent); } /* 부서명 칩 — 검색 결과 카드에서 소속 팀 표시 (직급칩 파랑과 구분되는 회색) 2026-06-04 */ .user-dept-chip { background: #F3F4F6; color: #4B5563; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; } .user-ceo-badge { background: #FEE500; color: #3C1E1E; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; } /* AI 사용 권한 뱃지 — 작은 보라 칩 (대표 지시 2026-05-28) */ .user-ai-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; background: #6366F1; /* indigo — KNK 레드/노랑과 구분 */ color: #fff; vertical-align: middle; line-height: 1.4; } /* AI·W·외부 뱃지를 오른쪽으로 모아 줄 맞춤 — 상태 글자 길이와 무관하게 일정 위치 (대표 지시 2026-05-31) */ .user-card-badges { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; } /* AI=1열·W=2열 고정 — 같은 폭으로 칸 맞춤, 묶음 내부는 gap 으로 간격 */ .user-card-badges .user-ai-badge, .user-card-badges .user-works-badge { margin-left: 0; min-width: 22px; text-align: center; box-sizing: border-box; } .user-card-badges .user-guest-badge { margin-left: 0; } .user-card-badges .ub-off { visibility: hidden; } /* 해당 권한 없으면 빈 칸으로 자리만 차지(정렬 유지) */ .user-card-meta .user-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* WORKS 사용 권한 뱃지 — AI 뱃지와 동일 스타일, WORKS=KNK 빨강으로 구분 (대표 지시 2026-05-31) */ .user-works-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; background: #A5282C; /* KNK 레드 — WORKS 브랜드 */ color: #fff; vertical-align: middle; line-height: 1.4; } /* 🏢 외부(게스트) 사용자 뱃지 (대표 지시 2026-05-28) */ .user-guest-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; background: #f59e0b; /* amber — 외부 사용자 주의 환기 */ color: #1F2937; vertical-align: middle; line-height: 1.4; } /* 최고관리자(소유자) 뱃지 — KNK 레드 강조 (대표 지시 2026-05-21) */ .user-owner-badge { background: var(--accent); color: #fff; } .user-inactive { color: #DC2626; font-size: 10px; font-weight: 600; margin-left: 4px; } .user-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } /* 🏢 회사망 접속 표시 (대표 지시 2026-05-24) */ .user-office-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: #0F766E; background: #CCFBF1; border-radius: 6px; padding: 1px 6px; white-space: nowrap; } /* 📢 회사 '알림 필수' 정책 — 상단 중앙 알약 배너 + 첫 1회 모달 (대표 지시 2026-05-24) */ /* 대표 지시 2026-07-08: 배너가 화면(상단 콘텐츠)을 가려서 '작은 상단 알약'으로 축소 — 맥동 제거·크기 대폭↓. 사용에 지장 없게(누르면 사라지는 동작은 그대로). (이전 2026-07-03의 500%+맥동 되돌림) */ #notifPolicyBanner { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 100000; max-width: calc(100% - 16px); background: #A5282C; color: #fff; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.85); padding: 5px 6px 5px 13px; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 700; line-height: 1.3; display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; box-shadow: 0 4px 14px rgba(165,40,44,0.38); } @keyframes notifPolicyPulse { 0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 10px 34px rgba(165,40,44,0.5); } 50% { transform: translateX(-50%) scale(1.06); box-shadow: 0 14px 46px rgba(165,40,44,0.9); } } @media (prefers-reduced-motion: reduce) { #notifPolicyBanner { animation: none; } } #notifPolicyBanner > span { white-space: normal; text-align: center; } #notifPolicyBannerBtn { flex-shrink: 0; background: #fff; border: 0; color: #A5282C; font-weight: 800; font-size: calc(12px + var(--fs-add-ui)); padding: 5px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } #notifPolicyModal { position: fixed; inset: 0; z-index: 100001; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 24px; } #notifPolicyModal .np-card { background: #fff; border-radius: 16px; max-width: 340px; width: 100%; padding: 24px 22px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .np-title { font-size: calc(17px + var(--fs-add-ui)); font-weight: 800; color: #A5282C; margin-bottom: 8px; } .np-desc { font-size: calc(13px + var(--fs-add-ui)); color: #374151; line-height: 1.6; margin-bottom: 18px; } .np-go { width: 100%; background: #A5282C; border: 0; color: #fff; font-weight: 700; font-size: calc(15px + var(--fs-add-ui)); padding: 13px; border-radius: 10px; cursor: pointer; } .np-later { margin-top: 10px; background: transparent; border: 0; color: #9CA3AF; font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; text-decoration: underline; } /* 🔔 알림 '차단(denied)' 해제 안내 모달 — 기기별 단계 (대표 지시 2026-07-06) */ #notifBlockedModal { position: fixed; inset: 0; z-index: 100002; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } #notifBlockedModal .np-card { background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 22px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.35); max-height: 88vh; overflow: auto; } #notifBlockedModal .np-steps { margin: 0; padding-left: 20px; } #notifBlockedModal .np-steps li { font-size: calc(13px + var(--fs-add-ui)); color: #374151; line-height: 1.7; margin-bottom: 7px; } .user-card-menu-btn { background: transparent; border: 0; cursor: pointer; font-size: calc(16px + var(--fs-add-ui)); color: var(--text-soft); padding: 4px 8px; border-radius: 6px; flex-shrink: 0; } .user-card-menu-btn:hover { background: var(--border); color: var(--text); } /* ─── 사용자 카드 컨텍스트 메뉴 (우클릭/롱프레스) ─── */ .user-context-menu { min-width: 260px; max-width: 320px; } .ucm-card { display: flex; gap: 10px; padding: 12px; background: linear-gradient(135deg, #FEF2F2 0%, #fff 100%); border-bottom: 1px solid #E5E7EB; } .ucm-avatar { position: relative; width: 40px; height: 40px; /* 원 10%↓ (44→40), 글자 유지 */ border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: calc(16px + var(--fs-add-ui)); flex-shrink: 0; } .ucm-status-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; } /* 카드 내 별도 '얼굴 사진' 공간 (아바타와 무관) — 대표 지시 2026-05-22 */ .ucm-photo-section { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid #E5E7EB; } .ucm-photo-title { align-self: flex-start; font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); font-weight: 600; } .ucm-photo { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; object-position: center 25%; /* 얼굴 초점 보정 (대표 지시 2026-05-28) */ transform: scale(0.8); /* 사진 20% 축소 (대표 지시 2026-05-28) */ border: 1px solid var(--border); background: var(--bg); } .ucm-photo-empty { width: 96px; height: 96px; border-radius: 12px; display: grid; place-items: center; text-align: center; padding: 6px; border: 1px dashed #cbd5e1; background: #f9fafb; color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); } .ucm-photo-actions { display: flex; gap: 6px; } .ucm-photo-btn { font-size: calc(12px + var(--fs-add-ui)); padding: 4px 14px; border-radius: 6px; border: 1px solid #E5E7EB; background: #fff; color: var(--text); cursor: pointer; } .ucm-photo-btn:hover { background: #f3f4f6; } .ucm-photo-del { color: var(--danger); } .ucm-body { flex: 1; min-width: 0; } .ucm-name { font-size: calc(14px + var(--fs-add-ui)); font-weight: 700; color: #1F2937; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .ucm-me { font-size: calc(11px + var(--fs-add-ui)); color: #6B7280; font-weight: 500; } .ucm-ceo { background: #FEE500; color: #3C1E1E; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; } .ucm-inactive { background: #FEE2E2; color: #991B1B; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; } .ucm-row { display: flex; gap: 8px; font-size: calc(12px + var(--fs-add-ui)); padding: 1px 0; } .ucm-label { width: 36px; flex-shrink: 0; color: #6B7280; font-weight: 600; } .ucm-value { flex: 1; color: #1F2937; word-break: break-word; } .ucm-mono { font-family: ui-monospace, monospace; font-size: calc(11px + var(--fs-add-ui)); color: #6B7280; } .ucm-link { color: #1D4ED8; text-decoration: none; font-weight: 500; } .ucm-link:hover { text-decoration: underline; } .ucm-unset { color: #9CA3AF; font-style: italic; font-size: calc(11px + var(--fs-add-ui)); } /* 핀 고정된 방 — 사이드바 좌측 4px 노란 띠 */ .pinned-row { background: linear-gradient(to right, #fff7ed 0%, transparent 60%); border-left: 3px solid #f59e0b; } .room-pinned-icon { font-size: calc(11px + var(--fs-add-ui)); margin-right: 3px; } /* 📋 자동 보고 방 미세 표시 — 이름 앞 4px 보라 점(빅터 색 #7C3AED), 4초 숨쉬기, 글자 하단(베이스라인) 정렬. '설명 들은 사람만 찾는' 조용한 표시. 값=대표 미리보기 확정(보라·숨쉬기 4초·4px·하단 라인) (대표 지시 2026-07-14) */ .room-report-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #7C3AED; margin-right: 4px; vertical-align: baseline; animation: knkReportDotBreathe 4s ease-in-out infinite; } @keyframes knkReportDotBreathe { 0%, 100% { opacity: .85; } 50% { opacity: .3; } } @media (prefers-reduced-motion: reduce) { .room-report-dot { animation: none; opacity: .7; } } /* ─── 📚 프로젝트 이력 다이얼로그 (2026-05-28 다크 테마 호환 토큰화) ─── */ .ph-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .ph-card-head { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; } .ph-card-period { font-weight: 700; font-size: calc(13.5px + var(--fs-add-ui)); color: var(--text); } .ph-card-meta { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 2px; } .ph-card-body { font-size: calc(13px + var(--fs-add-ui)); line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: keep-all; } .ph-card-atts { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); } .ph-card-atts-title { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); font-weight: 600; margin-bottom: 6px; } .ph-att { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 6px 8px; border-radius: 6px; background: var(--bg); margin-bottom: 4px; font-size: calc(12px + var(--fs-add-ui)); color: var(--text); } .ph-att:hover { background: var(--bubble-other); } .ph-att-icon { font-size: calc(16px + var(--fs-add-ui)); } .ph-att-info { flex: 1; min-width: 0; } .ph-att-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-att-meta { display: block; font-size: 10.5px; color: var(--text-soft); } .ph-card-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; } /* 프로젝트 이력 시트 정돈 (대표 지시 2026-06-01) — 메타를 알약으로, 요약 라벨, 안내 박스, 좌측 녹색 액센트 */ .ph-card { border-left: 3px solid #16A34A; } .ph-card-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .ph-pill { font-size: calc(11px + var(--fs-add-ui)); font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--bubble-other); color: var(--text-soft); } .ph-pill-auto { background: #e0e7ff; color: #3730a3; } .ph-pill-manual { background: #fef3c7; color: #92400e; } .ph-pill-cost { background: transparent; color: var(--text-soft); padding: 2px 2px; } .ph-pill-synced { background: #dcfce7; color: #166534; } .ph-card-section-label { font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; color: var(--text-soft); margin: 10px 0 4px; } .ph-intro { display: flex; align-items: flex-start; gap: 8px; background: var(--bubble-other); border-radius: 8px; padding: 9px 11px; margin-bottom: 12px; } .ph-intro-badge { flex: 0 0 auto; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #16A34A; color: #fff; white-space: nowrap; } .composer input, .composer textarea { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; /* PC 도 컴팩트하게 */ background: var(--bg); color: var(--text); /* 글자색 명시 — 다크 테마에서 어두운 글자가 그대로 노출되던 버그 (대표 지시 2026-05-28) */ outline: none; font-family: inherit; font-size: calc(12px + var(--fs-add)); /* 13→12 + 글씨크기 조절 (대표 지시 2026-05-20) */ line-height: 1.4; resize: none; /* 기본 4줄 높이 — line-height 1.4 × 12 = 16.8px × 4줄 + padding 14 + border 2 ≈ 83 → 84px */ min-height: 84px; max-height: 240px; /* 10줄 정도. 그 이상은 textarea 내부 스크롤 */ overflow-y: auto; box-sizing: border-box; /* 스크롤바 시각적 숨김 — 스크롤 기능은 유지 (휠/드래그 가능) */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/legacy Edge */ } .composer input::-webkit-scrollbar, .composer textarea::-webkit-scrollbar { display: none; /* Chrome/Safari/모바일 Webkit */ width: 0; height: 0; } .composer input:focus, .composer textarea:focus { background: var(--surface); border-color: var(--accent); } /* ✍️ 멘션 입력 즉시 색칠 — textarea 위 '거울' 레이어. 거울이 보이는 글자(@멘션만 색), textarea 글자는 투명·caret만. (대표 지시 2026-06-23) */ .mhl-wrap { position: relative; display: block; } .composer .mhl-wrap { order: -1; } /* 입력칸을 툴바 위로 — textarea order:-1 이 래핑 후 무력화되므로 wrap 에 명시 (적대 리뷰 반영) */ .mhl-wrap > textarea { width: 100%; display: block; position: relative; z-index: 1; } .mhl-back { position: absolute; inset: 0; margin: 0; z-index: 0; box-sizing: border-box; overflow: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; /* textarea 기본 줄바꿈과 일치(word-break 강제 안 함) */ color: var(--text); background: var(--bg); border-style: solid; border-color: transparent; } .mhl-wrap:focus-within .mhl-back { background: var(--surface); } /* 투명화 — 모바일 @media 의 '.composer textarea{color:var(--text)!important}'(동일 특이도)도 이기게 특이도 ↑ (적대 리뷰 반영) */ .composer textarea.mhl-input { background: transparent !important; color: transparent !important; caret-color: var(--text); } .mhl-back .mhl-at { color: var(--accent, #A5282C); font-weight: 700; } /* 컴포저 — 툴바 분리형(대표 지시 2026-05-19): ┌ 툴바 ─────────────────────────────────────┐ │ 📎 ✨ ➤ │ ├ 입력 박스 (둥근) ─────────────────────────┤ │ 메시지 입력... │ └────────────────────────────────────────────┘ */ .composer { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; /* 입력칸+아이콘 줄 전체를 하나의 텍스트박스처럼 (대표 지시 2026-05-20) */ border: 1px solid var(--border); border-radius: 0; /* 직각 — 둥글기 없음 */ background: var(--surface); box-sizing: border-box; } /* 클릭(포커스) 시 테두리 색 변화 없음 — 평소 옅은 회색 유지 (대표 지시 2026-05-20) */ .composer .composer-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--border); /* 입력칸과 아이콘 줄 구분선 (옅은 회색 기존과 동일) */ } .composer .composer-spacer { flex: 1 1 auto; } .composer .attach-btn, .composer button[type="submit"], .composer #sendBtn { flex-shrink: 0 !important; } /* 첨부·AI — 투명 배경 둥근 아이콘 버튼 */ .composer .attach-btn { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; padding: 0 !important; font-size: calc(16px + var(--fs-add-ui)) !important; background: transparent !important; color: var(--text-soft, #6b7280) !important; border: none !important; cursor: pointer; transition: background 0.12s, color 0.12s; box-sizing: border-box !important; } .composer .attach-btn:hover:not(:disabled) { background: rgba(0,0,0,0.06) !important; color: var(--accent) !important; } .composer .attach-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* hidden 속성이 display:grid !important 에 눌리지 않게 — 미지원 환경(모바일)에서 📷 캡처 버튼 숨김 보장 (대표 지시 2026-06-06) */ .composer .attach-btn[hidden] { display: none !important; } /* 묶음 메시지(글+그림 한 말풍선) — 파트를 세로로 차곡차곡 (대표 지시 2026-06-06) */ .msg .bubble.multipart-bubble { display: flex; flex-direction: column; gap: 7px; } .msg .bubble.multipart-bubble .mp-text { white-space: pre-wrap; } .msg .bubble.multipart-bubble .mp-image { display: block; line-height: 0; } .msg .bubble.multipart-bubble .mp-image img { display: block; max-width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; } /* 묶음 메시지 미리보기 패널 — 붙여넣기 → 보낼 묶음 확인·빼기 → 전송 (대표 지시 2026-06-06) */ .mp-preview { background: var(--surface); border-top: 1px solid var(--border, rgba(0,0,0,0.1)); padding: 8px 10px; max-height: 42vh; overflow-y: auto; } .mp-preview .mpp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .mp-preview .mpp-title { font-weight: 700; font-size: calc(12px + var(--fs-add-ui)); } .mp-preview .mpp-actions { display: flex; gap: 6px; } .mp-preview .mpp-cancel, .mp-preview .mpp-send { border: none; border-radius: 8px; padding: 5px 12px; font-weight: 700; cursor: pointer; font-size: calc(12px + var(--fs-add-ui)); } .mp-preview .mpp-cancel { background: rgba(0,0,0,0.08); color: var(--text-soft, #555); } .mp-preview .mpp-send { background: var(--accent, #2563eb); color: #fff; } .mp-preview .mpp-send:disabled { opacity: 0.5; cursor: default; } .mp-preview .mpp-list { display: flex; flex-direction: column; gap: 6px; } .mp-preview .mpp-row { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.04); border-radius: 8px; padding: 6px 8px; } .mp-preview .mpp-tag { flex: 0 0 auto; font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft, #666); white-space: nowrap; } .mp-preview .mpp-text { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; max-height: 88px; overflow: hidden; font-size: calc(12.5px + var(--fs-add-ui)); } .mp-preview .mpp-thumb { flex: 0 0 auto; max-width: 120px; max-height: 88px; border-radius: 6px; object-fit: contain; } .mp-preview .mpp-del { flex: 0 0 auto; margin-left: auto; border: none; background: rgba(0,0,0,0.08); color: #b91c1c; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-weight: 700; } /* 전송 — 36×36 빨간 원형, 우측 정렬 */ .composer button[type="submit"], .composer #sendBtn { width: 36px !important; height: 36px !important; min-width: 36px !important; padding: 0 !important; font-size: 0 !important; /* "전송" 텍스트 숨김 */ border-radius: 50% !important; display: grid !important; place-items: center !important; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: transform 0.1s, opacity 0.12s; } .composer button[type="submit"]:hover:not(:disabled), .composer #sendBtn:hover:not(:disabled) { transform: scale(1.05); } .composer button[type="submit"]:disabled, .composer #sendBtn:disabled { opacity: 0.4; cursor: not-allowed; } /* textarea — 단일 가로 풀폭 둥근 박스 */ .composer textarea { flex: 1 1 auto !important; width: 100% !important; /* 자체 사각 박스 제거 — 상위 .composer 박스 안에서 투명 입력칸 (대표 지시 2026-05-20) */ border: none !important; border-radius: 0 !important; background: transparent !important; padding: 8px 12px !important; } /* 입력창을 위로 · 아이콘+전송 툴바를 아래로 배치 (대표 지시 2026-05-20) — 휴대폰·PC 공통. .composer 는 flex column 이므로 order 로 순서만 뒤집음 (이모지 피커는 absolute 라 영향 없음). */ .composer #msgInput, .composer textarea#msgInput { order: -1 !important; } .composer .composer-toolbar { order: 1 !important; } /* ===== 이모지 피커 (자체 구현, 의존성 0) ===== composer 위에 absolute 로 떠있는 작은 그리드 팝업. */ .composer { position: relative; } .emoji-picker { position: absolute; bottom: calc(100% + 4px); left: 8px; width: 320px; max-width: calc(100vw - 24px); max-height: 340px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 28px rgba(0,0,0,0.15); z-index: 60; overflow: hidden; } .emoji-picker[hidden] { display: none !important; } .ep-tabs { display: flex; gap: 2px; padding: 6px 6px 4px; border-bottom: 1px solid var(--border); background: #f9fafb; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .ep-tabs::-webkit-scrollbar { display: none; } .ep-tab { flex-shrink: 0; width: 32px; height: 32px; border: none; background: transparent; border-radius: 8px; font-size: calc(18px + var(--fs-add-ui)); cursor: pointer; display: grid; place-items: center; transition: background 0.12s; } .ep-tab:hover { background: rgba(0,0,0,0.06); } .ep-tab.active { background: rgba(165, 40, 44, 0.12); } .ep-grid { flex: 1; overflow-y: auto; padding: 6px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; align-content: start; } .ep-emoji { width: 100%; aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 6px; font-size: calc(20px + var(--fs-add-ui)); cursor: pointer; display: grid; place-items: center; transition: background 0.1s; padding: 0; } .ep-emoji:hover { background: rgba(165, 40, 44, 0.1); } .ep-empty { grid-column: 1 / -1; padding: 24px 12px; text-align: center; color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); line-height: 1.5; } .ep-search { flex-shrink: 0; margin: 4px 6px 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: calc(13px + var(--fs-add-ui)); font-family: inherit; outline: none; background: var(--bg); } .ep-search:focus { background: #fff; border-color: var(--accent); } /* 모바일 — 살짝 좁게 */ @media (max-width: 600px) { .emoji-picker { width: calc(100vw - 16px); left: 4px; max-height: 280px; } .ep-grid { grid-template-columns: repeat(7, 1fr); } .ep-emoji { font-size: calc(22px + var(--fs-add-ui)); } } /* SVG 종이비행기 아이콘 (2026-05-20 변경: ➤ → SVG) */ .composer button[type="submit"] .send-icon, .composer #sendBtn .send-icon { display: block; /* path 자체가 SVG 박스 내에서 시각 중심이 약간 좌측으로 치우침 → 우측 1px 보정. 비행기 끝(우측)이 박스 끝에 닿고 꼬리(좌측)는 여백 → translate 로 시각 중심 맞춤. */ transform: translateX(1px); flex-shrink: 0; } .composer button[type="submit"]:disabled, .composer #sendBtn:disabled { background: #D1D5DB; opacity: 1; } /* ⚠⚠ 이 규칙은 '.composer 안의 모든 button' 을 빨간 알약으로 만든다. 원래 보내기 단추용인데 입력줄·이모지창·스티커창의 모든 단추를 함께 물어간다. 특이도가 (.composer + :not() 안 클래스들) 로 매우 높아 **뒤에 쓴 .mic-btn 같은 규칙이 진다.** ⭐ 그래서 빨갛게 되면 안 되는 단추는 반드시 아래 :not() 목록에 **이름을 추가**해야 한다. (!important 로 덮지 말 것 — 그 방식은 뒤에 또 겹칠 때 원인 찾기가 어려워진다) 이력: .ep-emoji·.ep-tab 제외 = 빨간 원형 버그 수정 (대표 지시 2026-05-21) .mic-btn 제외 = 말해서 입력 마이크가 보내기와 똑같은 빨간 원으로 보였다 (대표 지시 2026-07-30 v693b) .ips-tab·.ips-sug 제외 = 이모지↔스티커 전환줄이 빨간 알약이 됐다 (같은 건에서 함께 발견) */ .composer button:not(.ep-emoji):not(.ep-tab):not(.es-chip):not(.es-sticker):not(.sp-item):not(.mic-btn):not(.ips-tab):not(.ips-sug) { background: var(--accent); color: #fff; padding: 0 18px; border-radius: 999px; font-weight: 600; transition: background .15s, opacity .15s; } .composer button:not(.ep-emoji):not(.ep-tab):not(.es-chip):not(.es-sticker):not(.sp-item):not(.mic-btn):not(.ips-tab):not(.ips-sug):disabled { opacity: 0.4; cursor: not-allowed; } .composer button:not(.ep-emoji):not(.ep-tab):not(.es-chip):not(.es-sticker):not(.sp-item):not(.mic-btn):not(.ips-tab):not(.ips-sug):not(:disabled):hover { background: #8B1F23; } /* ===== 이모지 자동완성 추천 바 — 입력 중 단어 매칭 시 입력창 위에 가로 칩 (대표 지시 2026-05-21) ===== */ .emoji-suggest { position: absolute; bottom: calc(100% + 4px); left: 8px; right: 8px; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.12); padding: 4px 8px; z-index: 55; scrollbar-width: none; } .emoji-suggest::-webkit-scrollbar { display: none; } .emoji-suggest[hidden] { display: none !important; } .emoji-suggest .es-label { flex-shrink: 0; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); margin-right: 4px; white-space: nowrap; } .emoji-suggest .es-chip { flex-shrink: 0; border: none; background: transparent; border-radius: 8px; font-size: calc(22px + var(--fs-add-ui)); line-height: 1; padding: 3px 5px; cursor: pointer; transition: background 0.1s; } .emoji-suggest .es-chip:hover { background: rgba(165,40,44,0.1); } /* 추천 바 안의 스티커 썸네일 — 클릭 시 스티커 전송 */ .emoji-suggest .es-sticker { flex-shrink: 0; border: none; background: transparent; border-radius: 8px; padding: 2px; cursor: pointer; display: grid; place-items: center; transition: background 0.1s; } .emoji-suggest .es-sticker:hover { background: rgba(165,40,44,0.1); } .emoji-suggest .es-sticker img { height: 40px; width: auto; display: block; } @media (max-width: 600px) { .emoji-suggest .es-chip { font-size: calc(24px + var(--fs-add-ui)); padding: 4px 6px; } .emoji-suggest .es-sticker img { height: 44px; } } /* ===== 스티커 패널 — 입력창 위 그리드. 클릭 시 그림 메시지 전송 (대표 지시 2026-05-21) ===== */ .sticker-picker { position: absolute; bottom: calc(100% + 4px); left: 8px; width: 420px; /* 스티커(오피스 2개국어 글자) 크게 보기 — 폭 360→420 (대표 지시 2026-06-10) */ max-width: calc(100vw - 24px); max-height: 460px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 28px rgba(0,0,0,0.15); z-index: 60; overflow: hidden; } .sticker-picker[hidden] { display: none !important; } .sticker-picker .sp-head { flex-shrink: 0; padding: 8px 12px; font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft); border-bottom: 1px solid var(--border); background: #f9fafb; } .sticker-picker .sp-grid { flex: 1; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(2, 1fr); /* 스티커(특히 오피스: 한/베 2개국어 글자라 더 크게 봐야 읽힘) 보기 크게 — 2열 (대표 지시 2026-06-10). 대화방 전송 스티커(.sticker-img)는 무관 */ gap: 6px; align-content: start; } .sticker-picker .sp-item { width: 100%; aspect-ratio: 1 / 1; /* iOS 15+ : 정사각 칸 */ border: 1px solid transparent; background: transparent; border-radius: 10px; cursor: pointer; padding: 4px; display: grid; place-items: center; transition: background 0.1s, border-color 0.1s; } .sticker-picker .sp-item:hover { background: rgba(165,40,44,0.08); border-color: rgba(165,40,44,0.25); } /* 이미지가 스스로 높이를 갖게 — aspect-ratio 미지원(구형 iOS 14 이하)에서도 칸이 안 찌그러짐 */ .sticker-picker .sp-item img { width: 100%; height: auto; display: block; object-fit: contain; } .sticker-picker .sp-empty { grid-column: 1 / -1; padding: 24px 12px; text-align: center; color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); } @media (max-width: 600px) { .sticker-picker { width: calc(100vw - 16px); left: 4px; max-height: 360px; } .sticker-picker .sp-grid { grid-template-columns: repeat(2, 1fr); } /* 스티커 보기 크게 — 모바일 2열 (대표 지시 2026-06-10) */ } /* ===== 스티커 미리보기 화면 (그리드 → 미리보기 전환) ===== */ /* 미리보기 모드: 패널에 명시적 높이 지정 (flex 자식 height:100% 작동 조건) */ .sticker-picker.sp-mode-preview { height: 330px; } /* 미리보기 ~30% 크게 (대표 지시 2026-06-10) */ @media (max-width: 600px) { .sticker-picker.sp-mode-preview { height: 300px; } } /* 미리보기 영역 — 패널 나머지 공간 채우기 */ .sp-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 12px 12px; flex: 1; min-height: 0; box-sizing: border-box; } .sp-preview[hidden] { display: none !important; } /* 상단 바: ← 뒤로 + "미리보기" 타이틀 */ .sp-prev-topbar { width: 100%; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .sp-prev-back { background: none; border: none; cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); color: var(--knk); padding: 4px 6px 4px 0; font-weight: 600; white-space: nowrap; } .sp-prev-back:hover { opacity: 0.75; } .sp-prev-title { font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); font-weight: 500; } /* 이미지 영역 — 패널 높이에서 버튼/타이틀 제외하고 최대한 크게 */ .sp-prev-imgwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; } .sp-prev-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; /* 부드러운 입장 애니메이션 */ animation: sp-prev-in 0.15s ease-out; } @keyframes sp-prev-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } /* 스티커 이름 레이블 */ .sp-prev-label { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } /* 취소 / 보내기 버튼 행 */ .sp-prev-actions { display: flex; gap: 8px; width: 100%; flex-shrink: 0; } .sp-prev-cancel { flex: 1; padding: 8px 0; background: var(--bg-alt, #f3f4f6); border: none; border-radius: 10px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft); cursor: pointer; transition: background 0.15s; } .sp-prev-cancel:hover { background: #e5e7eb; } .sp-prev-send { flex: 2; padding: 8px 0; background: var(--knk, #A5282C); border: none; border-radius: 10px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; color: #fff; cursor: pointer; transition: background 0.15s; } .sp-prev-send:hover { background: #8b2023; } /* 패널이 미리보기 모드일 때 그리드·헤드 숨김 */ .sticker-picker.sp-mode-preview .sp-grid, .sticker-picker.sp-mode-preview #spHeadGrid { display: none !important; } /* 스티커 메시지 — 말풍선 배경 없이 그림만 */ .msg.sticker .bubble.sticker-bubble { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* ── 커스텀 스티커: 기준 +15% + 글씨크기 연동 ────────────────── 기준: 133px × 1.15 = 153px (PC) / 117px × 1.15 = 135px (모바일) --fs-add 비례: 153/12 ≈ 12.75 (PC), 135/12 = 11.25 (모바일) 글씨크기 '크게(fs-3, +4px)' 예시: calc(153px + 12.75*4px) = 204px */ .sticker-img { display: block; width: calc(153px + 12.75 * var(--fs-add)); max-width: 55vw; height: auto; min-height: calc((153px + 12.75 * var(--fs-add)) * 0.6); } @media (max-width: 600px) { .sticker-img { width: calc(135px + 11.25 * var(--fs-add)); min-height: calc((135px + 11.25 * var(--fs-add)) * 0.6); } } /* ── 대화창 기본 이모지: 텍스트보다 30% 크게 + 글씨크기 자동 연동 ── font-size: 130% → 부모 bubble 의 calc(12px + --fs-add) 기준 상대값 → 글씨크기 변경 시 이모지도 같은 비율로 커짐/작아짐 */ .chat-emoji { font-size: 130%; line-height: 1; display: inline-block; vertical-align: -0.15em; /* 텍스트 baseline 에 자연스럽게 정렬 */ } /* ---- Modal (div based, 100% controlled) ---- */ .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; } .modal.open { display: flex; } /* 🪟 드래그 가능한 플로팅 입력 팝업 (데스크톱) — 배경 투명·클릭 통과로 뒤 메인창 보며 작업 (대표 지시 2026-06-17). 휴대폰(<=640px)은 이 규칙 미적용 → 기존 전체화면 모달 그대로. */ @media (min-width: 641px) { .modal.floatable { background: transparent; pointer-events: none; overflow: visible; } /* 콘텐츠를 메인 영역 밖(사이드바 위 등)으로도 옮길 수 있게 — 모달이 가로/세로 잘라내지 않도록 (대표 지시 2026-06-18) */ .modal.floatable > .modal-content { pointer-events: auto; box-shadow: 0 18px 56px rgba(0,0,0,0.45); border: 1px solid var(--border); } .modal.floatable > .modal-content h3, .modal.floatable > .modal-content .dialog-hint { cursor: move; } .modal.floatable > .modal-content.dragging { user-select: none; } } /* 관리코드 옆 '외 N종' 배지 (라인 여러 개일 때) */ .code-extra { font-size: 0.82em; opacity: 0.72; font-weight: 600; margin-left: 2px; } /* 대화 헤더 제목 — 프로젝트명 앞 업체명 칩 (대표 지시 2026-06-17: 업체명 → 프로젝트명 순) */ .title-customer { display: inline-block; vertical-align: middle; font-size: 0.66em; font-weight: 700; line-height: 1.4; color: var(--accent, #A5282C); background: var(--accent-soft, #FEF2F2); border: 1px solid var(--accent, #A5282C); border-radius: 7px; padding: 0 7px; margin-right: 5px; } .modal-content { background: var(--surface); border-radius: 0; /* 🪟 팝업 규정①: 모서리 사각 (대표 규정 2026-07-17, v654) — 전 팝업·전 기기 공통 */ padding: 24px; font-size: calc(14px + var(--fs-add-ui)); /* 팝업 내부 글자 기준 — 명시 크기 없는 텍스트·버튼이 상속 (크게 상한) */ max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } /* ═══ 🪟 팝업창 표준 규정 (대표 규정 2026-07-17, v654) ═══ ① 모서리 사각 — 위 .modal-content border-radius:0 (전 기기) ② PC: 우하단 모서리 드래그로 크기 조절 (아래 resize) ③ 크기 변화 = '위 라인 고정, 아래로만 커짐' — 열릴 때 JS(_popupStandard)가 그 자리를 고정 좌표로 못박음(pin) ④ PC: 팝업을 메신저 창 안에서 드래그 이동 — JS(_popupStandard) · 휴대폰(<=640px) = 기존 그대로(꽉 찬 팝업·이동/조절 없음), 사각 모서리만 공통 · 제외: 사진 뷰어(.lightbox-modal=자체 전용 화면) / 용어 검토창(자체 드래그·조절·기억 보유 — 사각만) */ @media (min-width: 641px) { .modal:not(.lightbox-modal) > .modal-content { resize: both; /* 규정② — 우하단 손잡이. overflow 가 visible 아니어야 동작(.modal-content 기본 overflow-y:auto) */ min-width: 260px; /* 너무 작게 줄여 조작 불능이 되는 것 방지 */ min-height: 140px; } } /* 💻 컴퓨터(데스크톱)에서 팝업 가로폭 확대 — 모든 팝업 720 (대표 지시 2026-06-17). ⚠ 대부분 다이얼로그가 자체 폭(id CSS·chat.html 인라인 style)을 가져 일반 규칙으론 못 이김 → !important 로 인라인·id 까지 덮어 데스크톱에서 일괄 720 (휴대폰은 이 미디어쿼리 밖이라 무관). · 대화창(.chat-pane/솔로창)은 모달이 아니라 영향 없음. · 이미 더 넓게 의도된 것(새대화·정보수정 760·AI요약 96vw)만 예외로 더 넓게 유지. */ @media (min-width: 721px) { /* 💻 PC 큰 모니터 — 팝업 더 넓게 (대표 지시 2026-07-04: 모니터 넉넉하니 넓게). 720 → 820 */ .modal-content { max-width: min(94vw, 820px) !important; } #newRoomDialog .modal-content, #itemEditDialog .modal-content { max-width: min(94vw, 900px) !important; } #aiSummaryDialog .modal-content { max-width: 96vw !important; } /* 📄 텍스트 파일 뷰어 — 로그·설명은 넓게(전역 820 규칙을 id로 이김). 우하단 드래그로 더 조절 가능. (대표 지시 2026-07-15) */ #ktvDlg .modal-content { max-width: 96vw !important; } /* ⚙ 설정 — 특히 넓고 크게(사용자 이름 찾기 쉽게). 폭 980 + 높이 880 + 권한목록 더 길게. (대표 지시 2026-07-04) */ /* height 의 !important 제거(v654) — 우하단 크기조절(사용자 inline height)이 이겨야 하므로. 평소 기본값은 그대로 880px. */ #notifySettingsDialog .modal-content { max-width: min(96vw, 980px) !important; height: min(calc(100vh - 40px), 880px); } #notifySettingsDialog .perm-scroll { max-height: clamp(240px, calc(100vh - 360px), 780px); } /* 🤖 빅터 용어 검토 — 표가 넓어야 '번역' 칸이 세로로 안 쫄아든다: 기본 1600×900 + 우하단 모서리 드래그로 크기 조절. 조절한 크기는 기억됨(localStorage). 위 '모든 팝업 820' 규칙(!important)을 id 선택자로 이김. (대표 지시 2026-07-14) */ #victorTermsDialog .modal-content { max-width: 98vw !important; width: min(97vw, 1600px); height: min(calc(100vh - 32px), 900px); max-height: calc(100vh - 24px) !important; display: flex; flex-direction: column; overflow: hidden !important; /* 바깥 스크롤 제거 — 목록만 스크롤 */ resize: both; /* 우하단 모서리 드래그 */ min-width: 520px; min-height: 320px; padding: 18px 18px 20px; } #victorTermsDlgBody { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } } /* 🤖 용어 표 — 칸 폭 고정 배분: 남는 폭은 전부 '번역' 칸으로. 좁으면 표만 가로 스크롤(찌그러짐 방지). */ .vt-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 980px; } .vt-table th, .vt-table td { word-break: break-word; overflow-wrap: anywhere; } /* 📱 휴대폰 — 표 대신 '한 장씩 넘기기'(집중 검토). 창은 화면 가득. (대표 확정 2026-07-14 B안) */ @media (max-width: 720px) { #victorTermsDialog .modal-content { width: 100%; max-width: 100%; padding: 14px 12px 18px; } } /* 🚨 알림 묶음 — 대화방 목록 맨 위, 접이식(WORKS·회의·업무보고 등 알림봇 방). 빨강=놓치면 안 됨 (대표 지시 2026-07-04) */ .room-notify-group { list-style: none; margin: 4px 8px 8px; border: 1px solid #fecaca; border-radius: 10px; background: var(--surface); overflow: hidden; } .rng-head { display: flex; align-items: center; gap: 7px; padding: 8px 11px; cursor: pointer; background: #fef2f2; user-select: none; } .rng-chev { font-size: calc(11px + var(--fs-add-ui)); color: #b91c1c; width: 12px; text-align: center; flex-shrink: 0; } .rng-title { font-weight: 700; font-size: calc(12.5px + var(--fs-add-ui)); color: #b91c1c; } .rng-unread { margin-left: auto; background: #dc2626; color: #fff; font-size: calc(10px + var(--fs-add-ui)); font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .rng-body { display: flex; flex-direction: column; } .room-notify-group.collapsed .rng-body { display: none; } .rng-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; cursor: pointer; border-top: 1px solid var(--border); } .rng-item:hover { background: var(--hover, #f3f4f6); } .rng-item.active { background: #fee2e2; } .rng-ico { font-size: calc(16px + var(--fs-add-ui)); width: 22px; text-align: center; flex-shrink: 0; } .rng-name { flex: 1; min-width: 0; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rng-badge { background: #dc2626; color: #fff; font-size: calc(10px + var(--fs-add-ui)); font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ===== 새 프로젝트/대화 만들기 다이얼로그 — 외곽 스크롤 제거 (2026-05-20) ===== 다이얼로그 전체 스크롤을 없애고 참여자 리스트(user-picker)만 내부 스크롤. flex column 레이아웃 — 상단 폼은 flex-shrink:0, user-picker 만 flex:1 으로 확장. */ #newRoomDialog .modal-content { display: flex; flex-direction: column; overflow: hidden !important; /* 외곽(폼) 스크롤 제거 — 참여자 목록만 스크롤 */ height: min(calc(100vh - 32px), 720px); /* 작은 창은 꽉, 큰 화면은 720px 상한 (대표 지시 2026-05-20) */ max-height: calc(100vh - 32px); padding: 16px; /* 24 → 16 콤팩트 (대표 지시 2026-05-20) */ } #newRoomDialog #newRoomForm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } #newRoomDialog .tab-pane.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } #newRoomDialog .member-section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* user-picker — 고정 높이(320px) 해제하고 남은 공간 전부 차지 (안쪽 스크롤만 유지) */ #newRoomDialog .user-picker { flex: 1 1 auto; height: auto !important; min-height: 120px; margin-bottom: 10px; } /* 🏭 대표 미리보기 섹션(사업부·기본할일·라인)으로 프로젝트 탭 내용이 길어 참여자 목록과 겹치던 문제 (대표 지시 2026-06-17 겹침 재수정) — 해결: 프로젝트 탭 내용 '전체'를 스크롤하고(flex:1로 늘리지 않음), 참여자 목록은 적당 높이로 고정(자체 스크롤). 이러면 미리보기 섹션이 참여자 목록 아래로 정상 흐름 → 겹침 없음. (데스크톱 flex 모드 기준; 모바일은 아래 @media 가 별도 처리) */ #newRoomDialog .tab-pane[data-tab-pane="item"] { overflow-y: auto !important; } #newRoomDialog .tab-pane[data-tab-pane="item"] .member-section { flex: none !important; min-height: auto !important; overflow: visible !important; } #newRoomDialog .tab-pane[data-tab-pane="item"] .user-picker { flex: none !important; height: auto !important; min-height: 140px; max-height: 300px; overflow-y: auto; } /* ===== 모바일 newRoomDialog — 풀스크린 + 참여자 박스 확대 (2026-05-20) ===== 휴대폰에서 참여자 선택 박스가 작아 누르기 어려운 문제 해결. 다이얼로그가 화면을 거의 다 채우고, picker 가 화면의 큰 비중 차지. 추가 (2026-05-20 v2): 키보드 올라올 때 검색 input 이 키보드 위로 자동 스크롤되도록 - flex column overflow:hidden → block + overflow-y:auto 로 변경 (자연 스크롤) - picker 는 고정 높이 (안쪽 스크롤로 75명 탐색) - 검색창 sticky (스크롤해도 위에 고정) */ @media (max-width: 720px) { #newRoomDialog .modal-content { /* 풀스크린 가까이 — 좌우 마진 최소화, 위아래 꽉 채움 */ max-width: 100vw !important; width: 100vw !important; max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important; padding: 14px 14px 10px !important; box-sizing: border-box; /* 키보드 적응 — dvh(dynamic viewport height) 지원 시 키보드 빼고 계산 */ max-height: 100dvh !important; height: 100dvh !important; /* 자연 스크롤 — flex layout 해제 + overflow-y auto */ display: block !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* form / tab-pane / member-section — flex column 해제, 자연 흐름 */ #newRoomDialog #newRoomForm, #newRoomDialog .tab-pane.active, #newRoomDialog .member-section { display: block !important; overflow: visible !important; flex: none !important; min-height: auto !important; } /* 참여자 박스 — 안쪽 스크롤 (75명 탐색용). min-height 작게 → 키보드 위 좁은 공간에서도 modal 안에 들어감. max-height 크게 → 키보드 없을 땐 넉넉히. 실제 가용 높이는 JS(visualViewport)가 modal 제어. */ #newRoomDialog .user-picker { flex: none !important; height: auto !important; min-height: 160px !important; max-height: 60vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* 검색창 — picker 위 sticky (스크롤해도 항상 보임) */ #newRoomDialog .user-picker-search-wrap { position: sticky; top: 0; background: var(--surface, #fff); z-index: 3; padding: 4px 0; } #newRoomDialog .user-picker label { padding: 10px 12px; /* 8/10 → 10/12 — 탭 영역 확대 */ min-height: 44px; /* Apple HIG / Material 권장 최소 탭 크기 */ align-items: center; } #newRoomDialog .user-picker input[type="checkbox"] { width: 20px; height: 20px; /* 16 → 20 — 손가락 누르기 쉽게 */ } #newRoomDialog .user-picker-name { font-size: calc(14.5px + var(--fs-add-ui)); /* 13.5 → 14.5 */ } #newRoomDialog .user-picker-meta { font-size: calc(12px + var(--fs-add-ui)); /* 11.5 → 12 */ } /* 검색 입력도 살짝 크게 */ #newRoomDialog .user-picker-search { font-size: calc(14px + var(--fs-add-ui)); padding: 10px 12px; } /* 폼 grid 컴팩트 — 위 영역 차지 줄여서 picker 에 공간 양보 */ #newRoomDialog .form-grid { gap: 6px; } #newRoomDialog .form-grid input, #newRoomDialog .form-grid select { padding: 8px 10px; font-size: calc(14px + var(--fs-add-ui)); } /* 하단 액션 버튼 — flex-shrink 보장, 항상 보임 */ #newRoomDialog .dialog-actions { padding-top: 8px; border-top: 1px solid var(--border); background: #fff; margin: 0 -14px -10px; padding: 8px 14px 10px; } /* 다이얼로그 안내 문구 — 모바일에선 컴팩트 */ #newRoomDialog .dialog-hint { font-size: calc(12px + var(--fs-add-ui)); margin-bottom: 8px; line-height: 1.35; } } /* 상단·하단 고정 영역들 (줄어들지 않음) */ #newRoomDialog .dialog-tabs, #newRoomDialog .dialog-hint, #newRoomDialog .form-grid, #newRoomDialog .member-section-label, #newRoomDialog .user-picker-search-wrap, #newRoomDialog .group-name-label, #newRoomDialog .name-lock-label, #newRoomDialog .dialog-actions { flex-shrink: 0; } /* 탭 줄(프로젝트/1:1·그룹/채널)이 맨 첫 줄이라 우상단 ✕ 닫기 버튼과 겹침 → 탭 줄 오른쪽에 ✕ 자리만큼 여백 확보 (이 다이얼로그 한정). (대표 지시 2026-05-29) */ #newRoomDialog .dialog-tabs { margin-right: 46px; } /* === 모든 팝업창 콤팩트화 (데스크탑/앱창) — 글씨·아이콘·여백 축소 (대표 지시 2026-05-20) === 모바일(<=720px)은 터치용 큰 크기 유지하려고 min-width 로 가둠. */ @media (min-width: 721px) { /* .modal-content 접두사로 우선순위를 높여 기본 정의보다 확실히 이기도록 함 */ .modal-content { padding: 18px; } .modal-content h3 { font-size: calc(15px + var(--fs-add-ui)); } .modal-content .close-x { flex: 0 0 32px; width: 32px; height: 32px; font-size: calc(18px + var(--fs-add-ui)); } .modal-content .dialog-hint { font-size: calc(11.5px + var(--fs-add-ui)); margin-bottom: 8px; line-height: 1.45; } .modal-content .dialog-tabs { margin-bottom: 10px; padding: 3px; } .modal-content .dialog-tabs .tab { font-size: calc(12px + var(--fs-add-ui)); padding: 6px 8px; } .modal-content .form-grid { gap: 8px; margin-bottom: 8px; } .modal-content .form-grid label { font-size: calc(11.5px + var(--fs-add-ui)); gap: 3px; } .modal-content .form-grid input, .modal-content .form-grid select { padding: 6px 9px; font-size: calc(12px + var(--fs-add-ui)); } .modal-content .member-section-label { font-size: calc(11.5px + var(--fs-add-ui)); margin-bottom: 4px; } .modal-content .user-picker-search { padding: 6px 10px; font-size: calc(12px + var(--fs-add-ui)); } .modal-content .user-picker-count { font-size: calc(11px + var(--fs-add-ui)); padding: 3px 7px; } .modal-content .user-picker { padding: 5px; } /* 직원 등록 / 사용자 정보 수정 폼 입력칸 */ #newUserDialog .rs-form input:not([type="checkbox"]):not([type="radio"]), #newUserDialog .rs-form select, #newUserDialog .rs-form textarea, #userInfoDialog .rs-form input:not([type="checkbox"]):not([type="radio"]), #userInfoDialog .rs-form select, #userInfoDialog .rs-form textarea { padding: 6px 9px !important; font-size: calc(12px + var(--fs-add-ui)) !important; } /* 방 설정 멤버 목록 */ .modal-content .rs-member { padding: 5px 8px; } .modal-content .rs-member-name { font-size: calc(12px + var(--fs-add-ui)); } .modal-content .rs-member-meta { font-size: 10.5px; } .modal-content .rs-act-btn { font-size: 10px; padding: 2px 6px; } } .modal-close-x { position: absolute; top: 12px; right: 12px; z-index: 2; } /* keep legacy "dialog" selector working if any remains */ dialog { border: none; border-radius: 16px; padding: 24px; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,0.3); } dialog::backdrop { background: rgba(0,0,0,0.4); } dialog h3 { margin: 0 0 8px; } .dialog-hint { color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); margin: 0 0 16px; } .user-picker { display: flex; flex-direction: column; gap: 2px; /* 고정 높이 — 검색 시 행 hidden 되어도 컨테이너 크기 안 바뀜 (튐 방지) */ /* 12명분 높이: 행 1개 ≈ 32px × 12 + 패딩 = 400px */ height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; margin-bottom: 14px; } .user-picker label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background .15s; } .user-picker label:hover { background: var(--bg); } .user-picker label:has(input:checked) { background: rgba(165,40,44,0.08); } .user-picker input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; } /* 이름·직급·부서를 한 줄로 (대표 지시 2026-05-20) */ .user-picker-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; } .user-picker-name { font-size: calc(14px + var(--fs-add-ui)); font-weight: 600; color: var(--text); line-height: 1.3; flex-shrink: 0; } .user-picker-meta { font-size: calc(14px + var(--fs-add-ui)); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 초대·새 방 선택 목록 — 각 사람 오른쪽 끝 접속상태(사용자 탭과 동일 색·라벨) (대표 지시 2026-06-08) */ .user-picker-status { flex-shrink: 0; margin-left: auto; padding-left: 8px; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; white-space: nowrap; } /* 사용자 picker — 본사 / 베트남법인 묶음 헤더 (대표 지시 2026-06-04) */ .pick-group-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 7px 10px 5px; font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; color: var(--text-soft); background: var(--bg, #f3f4f6); border-bottom: 1px solid var(--border); } .pick-group + .pick-group { margin-top: 2px; } .pick-group-n { font-weight: 700; color: var(--accent, #A5282C); } /* 사용자 picker — 본사/베트남법인 책갈피(탭) (대표 지시 2026-06-05) */ .pick-tabs { display: flex; gap: 6px; flex-shrink: 0; background: var(--surface, #fff); padding: 6px 6px 7px; border-bottom: 1px solid var(--border); } .pick-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg, #f3f4f6); color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; cursor: pointer; } .pick-tab.active { background: var(--accent, #A5282C); color: #fff; border-color: var(--accent, #A5282C); } .pick-tab-n { font-size: 0.85em; font-weight: 800; background: rgba(0,0,0,.10); border-radius: 999px; padding: 0 7px; } .pick-tab.active .pick-tab-n { background: rgba(255,255,255,.24); } .pick-pane[hidden] { display: none; } /* 탭은 고정 헤더, 목록만 안쪽 스크롤 — 탭 위로 명단 비침/여백 제거 (대표 지시 2026-06-05) */ .pick-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 3px 6px 5px; } #newRoomDialog .user-picker { padding: 0; } /* 멤버 초대 — 외곽 스크롤 제거(취소·초대 버튼 항상 보이게) + 목록만 안쪽 스크롤 */ #inviteDialog .modal-content { display: flex; flex-direction: column; overflow: hidden !important; height: min(calc(100vh - 32px), 680px); max-height: calc(100vh - 32px); padding: 18px; } #inviteDialog .user-picker { padding: 0; flex: 1 1 auto; height: auto !important; min-height: 140px; margin-bottom: 10px; } #inviteDialog .dialog-actions { flex-shrink: 0; } @media (max-width: 720px) { #inviteDialog .modal-content { max-width: 100vw !important; width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; padding: 14px 14px 10px !important; } } /* 검색 입력 (user-picker 위) */ .user-picker-search-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .user-picker-search { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: calc(13px + var(--fs-add-ui)); background: #fff; } .user-picker-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(165,40,44,0.12); } .user-picker-count { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); white-space: nowrap; padding: 4px 8px; background: var(--bg); border-radius: 6px; } /* 관리번호 자동완성 suggestion 드롭다운 (대표 지시 2026-05-19) */ .code-suggest { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); max-height: 280px; overflow-y: auto; z-index: 100; } .code-suggest-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f3f4f6; transition: background .12s; } .code-suggest-item:last-child { border-bottom: 0; } .code-suggest-item:hover { background: rgba(165,40,44,0.06); } .cs-code { font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; color: #A5282C; font-family: ui-monospace, "SF Mono", "Cascadia Mono", monospace; } .cs-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); } .cs-customer { font-weight: 600; color: #374151; } .cs-name { flex: 1; } .cs-source { font-size: 10px; padding: 1px 6px; background: #f3f4f6; border-radius: 4px; color: #6b7280; white-space: nowrap; } .group-name-label { display: grid; gap: 6px; font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); } .group-name-label input { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: #f9fafb; outline: none; } .group-name-label input:focus { background: #fff; border-color: var(--accent); } .dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } .dialog-actions button { padding: 9px 18px; border-radius: 8px; font-weight: 600; } /* AI 요약 다이얼로그 — 버튼 4개(요약하기·다시 생성·복사·닫기)라 글자가 줄바꿈(요약하/기)되던 것 방지: 단어 안 깨짐(nowrap) + 콤팩트 패딩 + 못 들어가면 통째로 다음 줄로(flex-wrap) (대표 지시 2026-06-01) */ #aiSummaryDialog .dialog-actions { flex-wrap: wrap; gap: 6px; justify-content: center; } #aiSummaryDialog .dialog-actions button { white-space: nowrap; padding: 8px 12px; font-size: calc(12.5px + var(--fs-add-ui)); } /* AI 요약 창 — 고정 크기(아이콘 누름·저장본 유무·안내 줄 수에 따라 창이 안 변함). 창 높이 고정 + 본문(#aiSummaryBody)이 남는 공간을 채우고 그 안에서만 스크롤. (대표 지시 2026-06-01) */ #aiSummaryDialog .modal-content { display: flex; flex-direction: column; height: min(86vh, 640px); max-height: 95vh; overflow: hidden; box-sizing: border-box; /* 창 크기 조절 — 오른쪽 아래 모서리를 끌어 넓히거나 줄임 (대표 지시 2026-06-13) */ resize: both; min-width: 320px; min-height: 380px; max-width: 96vw; } /* 좌상단 고정 — 창 크기 조절 시 중앙 기준 양방향이 아니라 오른쪽·아래로만 늘어남 (대표 지시 2026-06-13). .modal 기본은 상하좌우 중앙(align/justify center)이라 키우면 양쪽으로 벌어짐 → 이 창만 flex-start 로 고정. */ #aiSummaryDialog.open { align-items: flex-start; justify-content: flex-start; } #aiSummaryDialog #aiSummaryBody { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; } #aiSummaryDialog #aiSummaryRangeBar, #aiSummaryDialog #aiActionBar, #aiSummaryDialog #aiQaRow, #aiSummaryDialog #aiSummaryMeta, #aiSummaryDialog .dialog-actions { flex: 0 0 auto; } /* 📋 업무보고 본문 — 설정 언어판 + 다른 언어 펼쳐보기 (B단계 대표 지시 2026-06-13) */ .aireport-body-main { white-space: pre-wrap; } .aireport-tr-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 0; padding: 4px 10px; font-size: 12px; line-height: 1.4; background: var(--bg); color: var(--text-soft); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; } .aireport-tr-toggle:hover { border-color: var(--accent); color: var(--accent); } .aireport-tr-all { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; } .aireport-tr-block { margin-top: 8px; } .aireport-tr-block:first-child { margin-top: 0; } .aireport-tr-lang { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 2px; } .aireport-tr-text { white-space: pre-wrap; } #cancelNewRoom { background: var(--bg); color: var(--text-soft); } #createRoom { background: var(--accent); color: #fff; } /* ---- Filter chips (sidebar top) ---- */ .filter-bar { display: flex; gap: 3px; /* 6 → 4 → 3 (배지 추가로 한 줄 폭 확보, 2026-05-23) */ padding: 8px 8px; /* 10/12 → 8/10 → 8/8 */ border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .filter-bar::-webkit-scrollbar { display: none; } .filter-bar .chip { /* 라벨(위) + 개수 배지(아래) 세로 배치 — 가로 길이 절약 (대표 지시 2026-05-24) */ display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px 9px; border-radius: 12px; font-size: calc(11px + var(--fs-add-ui)); /* 12.5 → 11.5 → 11 (비선택 살짝 작게, 대표 지시 2026-06-06) */ font-weight: 600; line-height: 1.15; color: var(--text-soft); background: var(--bg); white-space: nowrap; flex-shrink: 0; transition: all .15s; } .filter-bar .chip:hover { background: #eef0f3; color: var(--text); } /* 선택된 칩 — 색상에 더해 글자·여백을 키워 확실히 돋보이게 (대표 지시 2026-06-06) */ .filter-bar .chip.active { background: var(--accent); color: #fff; font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; padding: 3px 11px; } /* ---- Item rows in sidebar ---- */ /* 프로젝트 방 목록 2줄 재배치 (대표 지시 2026-06-18) + 2줄 고정(휴대폰 3줄 방지 2026-06-18): 윗줄=[고객사][상태][관리번호 외X종] / 아랫줄=[프로젝트명][장비명 외X종]. 두 줄 모두 nowrap 으로 한 줄씩 강제, 긴 텍스트(고객사명·프로젝트명·장비명)는 줄임표(…)로 줄여 칸을 최대한 붙임. */ .room-list .item-row .room-name-line { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-width: 0; /* 프로젝트명 + 두 칸(≈7px) 띄우고 장비명 (대표 지시 2026-06-18) */ } .room-list .item-row .room-name-line .room-name { flex: 0 1 auto; min-width: 0; } /* 안 늘림 → 이름 짧으면 장비명이 바로 뒤따라옴(오른쪽으로 안 밀림)·길면 줄임표 */ .room-list .item-row .room-meta-line { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; margin-bottom: 2px; } .room-list .item-row .room-meta-line .customer-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* 고객사명 길면 줄임표(다른 칸 보호) */ .room-list .item-row .room-meta-line .status-pill, .room-list .item-row .room-meta-line .code-chip { flex-shrink: 0; } /* 상태·관리번호는 안 줄임 */ /* 구버전 잔존 호환 */ .room-list .item-row .room-sub-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } /* 장비명 — 칩 아님, 프로젝트명 바로 뒤 '진한 텍스트'(프로젝트명처럼 조금 찐하게). 길면 줄임표·필요 시 줄어듦 (대표 지시 2026-06-18) */ .equip-chip { font-size: calc(12px + var(--fs-add)); font-weight: 700; color: var(--text); white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } /* 프로젝트방 칩(회사명·관리번호·상태) — 10.5px → 12px 로 키움 + 글씨크기 설정 연동 (대표 지시 2026-06-01) */ .customer-chip { font-size: calc(12px + var(--fs-add)); font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #fef3c7; color: #92400e; white-space: nowrap; } .code-chip { font-size: calc(12px + var(--fs-add)); font-weight: 600; padding: 2px 5px; border-radius: 3px; background: #f3f4f6; color: #4b5563; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .status-pill { font-size: calc(12px + var(--fs-add)); font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; } .status-active { background: #dcfce7; color: #166534; } .status-hold { background: #fef3c7; color: #92400e; } .status-done { background: #e5e7eb; color: #4b5563; } .status-cancelled { background: #fee2e2; color: #991b1b; } /* 휴대폰: 프로젝트 칩을 더 붙여 윗줄(고객사·상태·관리번호)을 한 줄에 — 3줄 방지 (대표 지시 2026-06-18) */ @media (max-width: 1023px) { .room-list .item-row .room-meta-line { gap: 4px; } .room-list .item-row .room-name-line { gap: 6px; } /* 이름↔장비명 두 칸 간격은 거의 유지 */ .room-list .item-row .customer-chip, .room-list .item-row .code-chip, .room-list .item-row .status-pill { padding: 1px 5px; font-size: calc(11px + var(--fs-add)); } .room-list .item-row .equip-chip { font-size: calc(11px + var(--fs-add)); max-width: 52%; } .room-list .item-row .code-extra { font-size: 0.78em; margin-left: 1px; } } /* ---- Chat header item meta — 3행 구조 (대표 지시 2026-05-19): 1행: 제목(타이틀) 2행: 프로젝트 정보 chips (고객사·번호·상태·납기) 3행: head-actions (멤버수 + 액션 아이콘들, .chat-head grid 의 row 2) ---- */ .title-block { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; overflow: hidden; } .item-meta { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; /* 줄바꿈 금지 */ font-size: calc(11.5px + var(--fs-add-ui)); overflow-x: auto; /* 좁으면 좌우 스크롤 */ scrollbar-width: none; -ms-overflow-style: none; min-width: 0; flex-shrink: 1; } .item-meta::-webkit-scrollbar { display: none; } .item-meta > * { flex-shrink: 0; } /* chip 자체는 줄어들지 않게 */ .item-meta .meta-due { color: var(--text-soft); background: var(--bg); padding: 1px 7px; border-radius: 4px; } .head-btn { width: 41px; height: 41px; border-radius: 50%; /* 아이콘 ~15% 확대 (36→41) (대표 지시 2026-06-13) */ display: grid; place-items: center; font-size: calc(20.7px + var(--fs-add-ui)); color: var(--text-soft); /* 18→20.7 (~15%) */ transition: background .15s; } .head-btn:hover { background: var(--bg); color: var(--text); } /* 🧵 새 스레드 답글 안내 띠 — 헤더(검색바) 아래, 누르면 스레드함(내 스레드) (대표 지시 2026-06-10) 배경 진하게 + 등장 시 살짝 강조 — '알림 왔는데 메인엔 없네' 혼란 제거 (대표 지시 2026-06-23 유령알림) */ .thread-unread-strip { display: block; width: 100%; border: 0; cursor: pointer; padding: 9px 12px; text-align: center; background: var(--accent, #A5282C); color: #fff; font-weight: 800; font-size: calc(13.5px + var(--fs-add-ui)); border-bottom: 1px solid var(--border); box-shadow: 0 1px 6px rgba(165, 40, 44, 0.25); animation: threadStripIn .5s ease-out; } .thread-unread-strip:hover { filter: brightness(1.07); } /* 📌 내 할 일 안내 띠 — 이 방에서 내가 담당인데 아직 안 끝낸 요청. 완료할 때까지 계속 보인다. 🧵 새 답글 띠(KNK 빨강)와 나란히 뜰 수 있어 **호박색**으로 구분한다 — 방 목록 📌 배지와 같은 계열. (이한중 팀장 불편신고 2026-07-27) */ .myreq-strip { display: block; width: 100%; border: 0; cursor: pointer; padding: 9px 12px; text-align: center; background: #B45309; color: #fff; /* 호박(amber) — 빨강과 헷갈리지 않게 */ font-weight: 800; font-size: calc(13.5px + var(--fs-add-ui)); border-bottom: 1px solid var(--border); box-shadow: 0 1px 6px rgba(180, 83, 9, 0.25); animation: threadStripIn .5s ease-out; /* 🧵 띠와 같은 등장 움직임 */ } .myreq-strip:hover { filter: brightness(1.07); } @media (prefers-reduced-motion: reduce) { .myreq-strip { animation: none; } } @keyframes threadStripIn { 0% { transform: translateY(-7px); opacity: 0; box-shadow: 0 1px 6px rgba(165, 40, 44, 0.25); } 55% { transform: translateY(0); opacity: 1; } 72% { box-shadow: 0 0 0 3px rgba(165, 40, 44, 0.40); } /* 살짝 강조 펄스 */ 100% { box-shadow: 0 1px 6px rgba(165, 40, 44, 0.25); } } @media (prefers-reduced-motion: reduce) { .thread-unread-strip { animation: none; } } /* 🔎 스레드 목록 '대화 찾기' 검색칸 (대표 지시 2026-06-23 — 스레드가 많아져 검색 필요) */ .thr-search-row { display:flex; align-items:center; gap:6px; margin-top:10px; } .thr-search-row .thr-search-ico { font-size:calc(14px + var(--fs-add-ui)); opacity:.7; flex:0 0 auto; } .thr-search-input { flex:1 1 auto; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:calc(13.5px + var(--fs-add-ui)); } .thr-search-input:focus { outline:none; border-color:var(--accent,#A5282C); } .thr-search-clear { flex:0 0 auto; border:0; background:transparent; cursor:pointer; color:var(--text-soft); font-size:calc(15px + var(--fs-add-ui)); padding:2px 6px; line-height:1; } .thr-search-deep { flex:0 0 auto; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:8px; padding:7px 10px; cursor:pointer; font-size:calc(12.5px + var(--fs-add-ui)); font-weight:600; white-space:nowrap; } .thr-search-deep:hover { border-color:var(--accent,#A5282C); color:var(--accent,#A5282C); } .thr-search-deep:disabled { opacity:.6; cursor:default; } .thr-search-info { margin-top:6px; font-size:calc(12px + var(--fs-add-ui)); color:var(--text-soft); } /* 스레드함 행 — '안 읽은 새 답글' 빨간 배지 (대표 지시 2026-06-10) */ .thr-unread { flex-shrink: 0; background: #EF4444; color: #fff; border-radius: 999px; min-width: 18px; padding: 1px 6px; text-align: center; font-size: calc(11px + var(--fs-add-ui)); font-weight: 800; line-height: 1.35; } /* ---- Dialog tabs + form grid ---- */ /* 화면 언어 전환 (한/베/영) — 설정창 상단 (대표 지시 2026-05-25) */ /* 라벨은 위 한 줄, 언어 버튼 4개는 아래 한 줄에 균등 분배(좌우 꽉 참). 글씨 크기 설정과 무관하게 배치 동일(버튼 글자 고정). (대표 지시 2026-06-02) */ .lang-switch-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-wrap: nowrap; margin: 4px 0 14px; padding: 10px 12px; background: var(--bg); border-radius: 10px; } .lang-switch-label { font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; color: var(--text-soft); } .lang-switch-btns { display: flex; gap: 6px; flex-wrap: nowrap; } .lang-btn { flex: 1 1 0; min-width: 0; padding: 6px 4px; text-align: center; white-space: nowrap; border: 1.5px solid #E5E7EB; background: #fff; border-radius: 8px; font-size: 12.5px; font-weight: 600; /* 고정 — 글씨크기 설정(--fs-add-ui)과 분리, 배치 동일 유지 */ color: #374151; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .lang-btn:hover { border-color: #C7CDD6; } .lang-btn.active { border-color: #2563EB; background: #EFF6FF; color: #1D4ED8; } .dialog-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 10px; padding: 4px; margin-bottom: 16px; } .dialog-tabs .tab { flex: 1 1 0; min-width: 0; padding: 8px 6px; border-radius: 7px; font-size: calc(13.5px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft); white-space: nowrap; word-break: keep-all; /* 한글 글자 단위 줄바꿈 방지 — 한 줄 유지 */ overflow: hidden; text-overflow: ellipsis; transition: all .15s; } .dialog-tabs .tab:hover { color: var(--text); } .dialog-tabs .tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); } .tab-pane { display: none; } .tab-pane.active { display: block; } /* 설정창 탭(알림·초대·보안·사용법·관리자) — 글자 크기 설정과 무관하게 고정 → 글씨 크게 해도 2열로 안 깨지고 배치 동일. id 선택자로 다른 다이얼로그 탭에는 영향 없음. (대표 지시 2026-06-02) */ #settingsTabs .tab { font-size: 12.5px; } @media (max-width: 720px) { #settingsTabs { gap: 3px; padding: 3px; } #settingsTabs .tab { font-size: 11px; padding: 7px 2px; } /* 좁은 휴대폰서 5개 한 줄·한글 안 깨짐 */ .lang-switch-btns { gap: 4px; } .lang-btn { font-size: 12px; padding: 6px 2px; } /* 언어 4개 한 줄 균등 */ } /* 관리자 탭 안의 서브탭 (👥 직원 / 🌐 시스템 / 🤖 AI·비용) — 대표 지시 2026-05-27 */ .admin-subtabs { display: flex; gap: 4px; background: var(--bg); /* 회색 톤 — dialog-tabs 와 동일 */ border-radius: 8px; padding: 4px; margin: 0 0 14px; /* 음수 마진 제거 (겹침 방지) */ } /* 관리자 탭 — 서브탭(직원/권한/유지보수)은 헤더라 스크롤 '범위 밖'에 고정. 탭을 세로 flex 로: [서브탭 헤더(고정)] + [.admin-scroll = 데이터만 스크롤] (대표 지시 2026-06-06) */ #notifySettingsDialog .tab-pane[data-tab-pane="admin"].active { display: flex; flex-direction: column; overflow: hidden; min-height: 0; } #notifySettingsDialog .tab-pane[data-tab-pane="admin"] .admin-subtabs-sticky { flex: 0 0 auto; /* 헤더 — 스크롤 범위에서 제외(데이터 영역에 안 들어감), 항상 고정 */ background: var(--surface); padding-bottom: 12px; /* 서브탭과 데이터 사이 여백 */ } #notifySettingsDialog .tab-pane[data-tab-pane="admin"] .admin-subtabs-sticky .admin-subtabs { margin-bottom: 0; } #notifySettingsDialog .tab-pane[data-tab-pane="admin"] .admin-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* 데이터 행만 여기서 스크롤 */ } .admin-subtabs .admin-subtab { flex: 1; /* 이모지 + 텍스트 가운데 정렬 — 위쪽 쏠림 방지 (대표 지시 2026-05-27) */ display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 10px; border: none; background: transparent; border-radius: 6px; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; line-height: 1.2; color: var(--text-soft); cursor: pointer; transition: all .12s; } .admin-subtabs .admin-subtab:hover { color: var(--text); } .admin-subtabs .admin-subtab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); } .admin-subpane { display: block; } .admin-subpane[hidden] { display: none; } /* 서브탭 2줄(이름 + 권한 배지) + 구역 권한 설명 (대표 지시 2026-06-06) */ .admin-subtabs .admin-subtab { flex-direction: column; gap: 3px; } .admin-subtabs .admin-subtab .ast-name { display: block; line-height: 1.2; } .ast-gate { display: inline-block; font-size: calc(9px + var(--fs-add-ui)); font-weight: 700; line-height: 1.15; letter-spacing: -0.2px; padding: 1px 6px; border-radius: 999px; white-space: nowrap; } .ast-gate-admin { background: #1d4ed8; color: #fff; } /* 관리자 = 파랑 */ .ast-gate-super { background: #A5282C; color: #fff; } /* 최고관리자 = KNK 레드 */ .admin-gate-note { font-size: calc(11px + var(--fs-add-ui)); line-height: 1.4; padding: 7px 10px; border-radius: 8px; margin: 0 0 12px; } .admin-gate-note.gate-admin { background: rgba(29,78,216,0.10); color: #1d4ed8; border: 1px solid rgba(29,78,216,0.28); } .admin-gate-note.gate-super { background: rgba(165,40,44,0.10); color: #A5282C; border: 1px solid rgba(165,40,44,0.28); } /* 🔍 대화 검색 바 (카톡식) — 대표 지시 2026-06-06 */ .chat-search-bar { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; } .chat-search-bar[hidden] { display: none; } .chat-search-bar .csb-row { display: flex; align-items: center; gap: 6px; } /* 기간 선택 칩 (대표 지시 2026-07-20) */ .chat-search-bar .csb-periods { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .chat-search-bar .csb-plabel { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); flex-shrink: 0; } .chat-search-bar .csb-period { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-soft); cursor: pointer; font-size: calc(11.5px + var(--fs-add-ui)); font-family: inherit; line-height: 1.3; } .chat-search-bar .csb-period.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; } /* 결과 목록 (탭하면 그 메시지로 점프) */ .chat-search-bar .csb-results { max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--border); margin: 2px -10px -6px; padding: 2px 0; } .chat-search-bar .csb-results[hidden] { display: none; } .csb-hit { display: block; width: 100%; text-align: left; cursor: pointer; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; } .csb-hit:hover, .csb-hit.on { background: var(--bg); } .csb-hit .csb-h-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; } .csb-hit .csb-h-name { font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csb-hit .csb-h-reply { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: var(--border); color: var(--text-soft); font-size: calc(10px + var(--fs-add-ui)); font-weight: 700; vertical-align: middle; } .csb-hit .csb-h-date { font-size: calc(10.5px + var(--fs-add-ui)); color: var(--text-soft); flex-shrink: 0; white-space: nowrap; } .csb-hit .csb-h-snip { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csb-hit .csb-h-snip mark { background: rgba(250,204,21,.4); color: inherit; padding: 0 1px; border-radius: 2px; } .csb-more { display: block; width: 100%; text-align: center; cursor: pointer; padding: 9px 12px; border: 0; background: transparent; color: var(--accent); font-family: inherit; font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; } .csb-empty { padding: 14px 12px; text-align: center; color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); } .chat-search-bar .csb-ico { font-size: calc(14px + var(--fs-add-ui)); flex-shrink: 0; } .chat-search-bar .csb-input { flex: 1; min-width: 0; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-size: calc(13px + var(--fs-add-ui)); font-family: inherit; } .chat-search-bar .csb-input:focus { outline: none; border-color: var(--accent); } .chat-search-bar .csb-count { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); white-space: nowrap; flex-shrink: 0; min-width: 40px; text-align: center; } .chat-search-bar .csb-count.csb-none { color: #dc2626; } .chat-search-bar .csb-nav, .chat-search-bar .csb-close { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; font-size: calc(14px + var(--fs-add-ui)); line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .chat-search-bar .csb-nav:hover, .chat-search-bar .csb-close:hover { background: var(--border); } .chat-search-bar .csb-close { margin-left: 2px; } /* 검색 일치 메시지 강조 */ .msg.search-hit { background: rgba(250, 204, 21, 0.12); border-radius: 8px; } .msg.search-current { background: rgba(250, 204, 21, 0.26); border-radius: 8px; box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.55); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .form-grid label { display: grid; gap: 6px; font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text-soft); } .form-grid label.full { grid-column: 1 / -1; } .form-grid label { min-width: 0; } /* 그리드 칸이 콘텐츠(특히 date input)보다 작아질 수 있게 → 가로 스크롤 방지 */ .form-grid input, .form-grid select { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: #fff; outline: none; /* 회색(#f9fafb)→흰색: 검정 입력글씨가 더 또렷 (대표 지시 2026-06-18) */ font: inherit; color: var(--input-text); /* inherit→완전 검정 토큰 (대표 지시 2026-06-18) */ } /* 입력칸이 그리드 칸 폭에 맞게 — date input 등이 칸을 넘쳐 가로 스크롤 생기는 것 방지 */ .form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-width: 0; } .form-grid input:focus, .form-grid select:focus { background: #fff; border-color: var(--accent); } /* 요청 담당자 검색 피커 — 현재 방 멤버 중 검색해서 선택 */ .assignee-picker { position: relative; } .assignee-picker input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: #f9fafb; outline: none; font: inherit; color: inherit; } .assignee-picker input[type="text"]:focus { background: #fff; border-color: var(--accent); } .assignee-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 2px); max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 10; } .assignee-opt { padding: 8px 11px; cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); color: var(--text); } .assignee-opt:hover { background: var(--accent-soft); } .assignee-empty { padding: 8px 11px; color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); } /* ── 요청 담당자 다중 선택(공동담당) + 본사/베트남 책갈피 (대표 지시 2026-06-07) ── */ .assignee-multi { display: flex; flex-direction: column; gap: 6px; } .assignee-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 26px; } .assignee-chip { display: inline-flex; align-items: center; gap: 3px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; } .assignee-chip-x { border: none; background: transparent; color: inherit; cursor: pointer; font-size: calc(14px + var(--fs-add-ui)); line-height: 1; padding: 0 3px; border-radius: 50%; } .assignee-chip-x:hover { background: rgba(0,0,0,0.08); } .assignee-chip-empty { color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); } .assignee-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .assignee-tab { border: 1px solid var(--border); background: #f3f4f6; color: var(--text-soft); border-radius: 999px; padding: 4px 11px; font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; font: inherit; font-weight: 600; } .assignee-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .assignee-tab-n { opacity: 0.75; font-weight: 400; } /* 다중 모드는 팝업이 아니라 인라인 목록(상자) */ .assignee-multi .assignee-dropdown { position: static; max-height: 190px; box-shadow: none; margin: 0; } .assignee-multi .assignee-opt { display: flex; align-items: center; gap: 8px; } .assignee-multi .assignee-opt.on { background: var(--accent-soft); font-weight: 600; } .assignee-check { font-size: calc(15px + var(--fs-add-ui)); line-height: 1; color: var(--accent); flex: 0 0 auto; } .assignee-opt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-section { margin-top: 10px; } .member-section-label { font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text-soft); margin-bottom: 6px; } .keep-forever-label { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding: 10px 12px; background: var(--accent-soft); border-radius: 8px; cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); } .keep-forever-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); } /* Bigger dialog for item form */ /* 새 대화(프로젝트) 입력 팝업은 좌우로 더 넓게 — 장비명·모델명·라인 칸이 한 줄에 여유있게 (대표 지시 2026-06-17) */ #newRoomDialog .modal-content { max-width: min(94vw, 760px); } /* 프로젝트 정보 수정도 라인(관리번호) 편집이 들어가 넓게 (대표 지시 2026-06-17) */ #itemEditDialog .modal-content { max-width: min(94vw, 760px); } .edit-line-sec { margin: 6px 0 12px; } .edit-line-sec .hub-sec-label { color: var(--accent, #A5282C); } .edit-line-sec .hub-task-add { margin-top: 2px; } /* ---- Search box (sidebar top) ---- */ .search-box { padding: 5px 12px; /* 위아래 여백 절반 (10→5) — 검색창 슬림화 (대표 지시 2026-06-03) */ border-bottom: 1px solid var(--border); } .search-box input { width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; background: var(--bg); outline: none; /* 안쪽 위아래 여백 절반 (8→4) (대표 지시 2026-06-03) */ font-size: calc(11.5px + var(--fs-add-ui)); /* 안내문구 작게 (13->11.5) (대표 지시 2026-06-06) */ } .search-box input:focus { background: #fff; border-color: var(--accent); } /* ---- 사내 메신저 이용·보안 동의서 게이트 (대표 지시 2026-06-03) ---- */ .consent-gate { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; } .consent-gate[hidden] { display: none; } .consent-card { background: var(--surface, #fff); border-radius: 14px; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden; } .consent-head { padding: 16px 20px; border-bottom: 1px solid var(--border); } .consent-head h2 { margin: 0; font-size: calc(15px + var(--fs-add-ui)); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; } .consent-body { padding: 14px 20px; overflow-y: auto; flex: 1; font-size: calc(13px + var(--fs-add-ui)); line-height: 1.65; color: var(--text, #1f2937); } .consent-body h3 { margin: 18px 0 6px; font-size: calc(13px + var(--fs-add-ui)); color: var(--accent); } .consent-body p { margin: 6px 0; } .consent-body ul { margin: 6px 0 6px 4px; padding-left: 18px; } .consent-body li { margin: 3px 0; } .consent-foot { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface, #fff); } .consent-scroll-hint { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); text-align: center; margin-bottom: 8px; } .consent-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; } .consent-agree { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-weight: 700; font-size: calc(13px + var(--fs-add-ui)); cursor: pointer; } .consent-agree:disabled { opacity: 0.45; cursor: not-allowed; } .consent-decline { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; } .search-results, .my-tasks-panel { flex: 1; overflow-y: auto; padding: 8px; } .search-result-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background .15s; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--border); } .search-result-item:hover { background: var(--bg); } /* 통합 검색 묶음 머리글 (👤 사용자 / 💬 대화방 / 📝 대화 내용) — 스크롤해도 그 묶음 위에 잠깐 고정 (대표 지시 2026-06-06) */ .search-results > .search-group-head { position: sticky; top: 0; z-index: 1; background: var(--surface); font-weight: 800; font-size: calc(10.5px + var(--fs-add-ui)); color: var(--text-soft); letter-spacing: .2px; padding: 8px 6px 4px; } .search-results > .search-group-head:first-child { padding-top: 2px; } .search-result-room { display: flex; gap: 6px; align-items: center; font-size: calc(10.5px + var(--fs-add-ui)); color: var(--text-soft); } .search-result-content { font-size: calc(13px + var(--fs-add-ui)); line-height: 1.4; } .search-result-content mark { background: #fef08a; padding: 0 2px; border-radius: 2px; } .search-empty { padding: 32px; text-align: center; color: var(--text-soft); font-size: calc(11.5px + var(--fs-add-ui)); } /* 🤖 검색창 AI 안내 (Phase 1, 대표 지시 2026-06-17) */ .search-ai-row { display: flex; align-items: center; gap: 6px; padding: 10px 12px; margin: 2px 6px 4px; border-radius: 10px; cursor: pointer; background: linear-gradient(90deg, rgba(165,40,41,.08), rgba(165,40,41,.03)); border: 1px solid rgba(165,40,41,.18); font-size: calc(12px + var(--fs-add-ui)); } .search-ai-row:hover { background: linear-gradient(90deg, rgba(165,40,41,.14), rgba(165,40,41,.05)); } .search-ai-row .sai-q { color: var(--text); font-weight: 600; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-ai-row .sai-cta { color: #a5282c; font-weight: 700; margin-left: auto; white-space: nowrap; } .search-ai-answer { margin: 0 6px 8px; padding: 11px 13px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: calc(12px + var(--fs-add-ui)); line-height: 1.55; } .search-ai-answer .sai-load { color: var(--text-soft); } .search-ai-answer .sai-err { color: #dc2626; } .search-ai-answer .sai-ans { color: var(--text); white-space: normal; } .search-ai-answer .sai-goto { margin-top: 9px; display: inline-block; padding: 6px 12px; border-radius: 8px; border: 0; background: #a5282c; color: #fff; font-weight: 700; cursor: pointer; font-size: calc(11.5px + var(--fs-add-ui)); } .search-ai-answer .sai-goto:hover { filter: brightness(1.08); } /* 휴대폰(터치)에서는 검색 영역 안내/설명 글자를 더 작게 — 글자크기 설정(fs) 영향도 절반만 (대표 지시 2026-06-06) */ @media (pointer: coarse) { .search-box input { font-size: calc(10px + var(--fs-add-ui) * 0.5); } .search-results > .search-group-head { font-size: calc(9.5px + var(--fs-add-ui) * 0.5); } .search-result-room { font-size: calc(9.5px + var(--fs-add-ui) * 0.5); } .search-empty { font-size: calc(10.5px + var(--fs-add-ui) * 0.5); } } /* My tasks panel */ .my-tasks-panel .task-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; } .my-tasks-panel .task-row:hover { background: var(--bg); } .task-row .task-title { font-weight: 600; font-size: calc(13.5px + var(--fs-add-ui)); } .task-row .task-meta { display: flex; gap: 6px; align-items: center; font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); flex-wrap: wrap; } /* 방 이름과 요청자·담당자를 별도 줄로 분리 (태블릿 가독성, 대표 지시 2026-05-22) */ .task-row .task-meta-room { gap: 4px 6px; } .task-row .task-meta-person { gap: 4px 6px; } /* ☑ 내 몫 상태 / 👥 팀 진척 (v679, 이한중 팀장 신고 2026-07-24 "완료가 갱신 안 됨"). 내 작업을 끝냈는데 카드가 그대로 남아 '눌러도 아무 일 없는' 것처럼 보이던 문제 — '내 몫은 끝났고, 남은 담당자를 기다리는 중'임을 카드에서 바로 읽히게 한다. */ .task-row .mt-mine { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-weight: 700; white-space: nowrap; font-size: calc(11px + var(--fs-add-ui)); } .task-row .mt-mine.done { background: #dcfce7; color: #15803d; } /* 초록 = 내 몫 끝 */ .task-row .mt-mine.doing { background: #dbeafe; color: #1d4ed8; } /* 파랑 = 내 몫 진행중 */ .task-row .mt-team { color: var(--text-soft); white-space: nowrap; font-size: calc(11px + var(--fs-add-ui)); } .task-row .task-room-name { font-weight: 600; color: var(--text); } .task-row.overdue .task-due { color: var(--danger); font-weight: 700; } .task-row.due-soon .task-due { color: #d97706; font-weight: 700; } /* 내 요청 섹션 제목 (받은 요청 / 보낸 요청) */ .my-tasks-panel .mt-section-label { font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; color: var(--text-soft); padding: 10px 12px 6px; background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; } /* 내 요청 행 안의 상태 변경 버튼 줄 */ .my-tasks-panel .mt-actions { margin-top: 4px; } .my-tasks-panel .mt-actions:empty { display: none; } .filter-bar .chip.my-tasks { margin-left: auto; } .filter-bar .chip.my-tasks.active { background: #f97316; } /* 멘션 칩 — 필터가 아니라 '내게 온 @멘션' 모아보기 액션. 내 요청 옆에 배치. (대표 지시 2026-05-22) */ .filter-bar .chip.mentions-chip { color: var(--accent); background: var(--accent-soft); } .filter-bar .chip.mentions-chip:hover { background: #fde2e2; color: var(--accent); } /* 모바일: 칩 7개가 가로 전체를 균등하게 꽉 채움 — flex:1 로 1/7씩 분배. 글씨 크기 설정과 무관하게 배치 동일(칩 글자 고정) → 작게=오른쪽 빈공간X, 크게=오른쪽 넘침X (대표 지시 2026-06-01) ★ pointer:coarse(진짜 터치 휴대폰)에서만 적용 — 데스크탑 좁은 창(대화창 접힘 등)은 데스크탑 칩 유지(접어도 칩 크기 안 변함). (대표 지시 2026-06-02) */ @media (max-width: 720px) and (pointer: coarse) { .filter-bar { flex-wrap: nowrap; overflow-x: auto; gap: 3px; padding: 6px 6px; justify-content: stretch; } .filter-bar .chip { flex: 1 1 0; /* 7개 균등 분배 → 가로 꽉 참 (빈공간/넘침 없음) */ min-width: 0; padding: 4px 2px; font-size: 9.8px; /* 비선택 — 살짝 작게 (10.5→9.8, 대표 지시 2026-06-06) */ } /* 선택 칩 — 칸 폭·글자를 키워 돋보이게. flex 가 나머지를 자동 압축 → 7개 전부 한 화면 유지(가로 스크롤 없음) */ .filter-bar .chip.active { flex-grow: 1.55; font-size: 12px; font-weight: 700; padding: 4px 2px; } .filter-bar .chip-label { white-space: nowrap; } .filter-bar .chip-type-ico { font-size: 10px; } .filter-bar .chip.active .chip-type-ico { font-size: 11px; } .filter-bar .chip-count, .filter-bar .chip-badge { min-width: 13px; height: 13px; padding: 0 3px; font-size: 9px; line-height: 13px; } .filter-bar .chip.my-tasks { margin-left: 0; } } .chip-badge { min-width: 14px; height: 14px; padding: 0 3px; margin: 0; border-radius: 999px; background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 14px; text-align: center; } .chip-badge:not([hidden]) { display: inline-block; } /* 안 읽은 메시지 수 합산 배지 — 빨강(미읽음). 그 그룹에 안 읽은 메시지가 몇 개인지. 0이면 :empty 로 숨김 (대표 지시 2026-06-20: 방 갯수→안 읽은 메시지 합산) */ .chip-count { display: inline-block; min-width: 14px; height: 14px; padding: 0 4px; margin: 0; border-radius: 999px; background: var(--danger, #EF4444); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 14px; text-align: center; } .chip-count:empty { display: none; } /* 활성 칩(빨간 배경) 위에서는 흰 배경 + 빨강 글씨로 — 가독성 */ .chip.active .chip-count { background: #fff; color: var(--danger, #dc2626); } /* 필터 칩 — 종류 아이콘을 라벨이 아닌 '개수 옆'에 둠 → 칩 가로 폭이 글자 길이로 유지(안 넓어짐). (대표 지시 2026-05-29) */ .chip-countrow { display: inline-flex; align-items: center; gap: 3px; line-height: 1; } .chip-type-ico { font-size: calc(11px + var(--fs-add-ui)); line-height: 1; } /* ---- Digest panel ---- */ .digest-section { margin-bottom: 24px; } .digest-section h4 { margin: 0 0 8px; font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.4px; } .digest-empty { color: #9ca3af; font-size: calc(13px + var(--fs-add-ui)); padding: 8px 0; } .digest-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; background: var(--surface); transition: background .15s; } .digest-item:hover { background: var(--bg); } .digest-item.overdue { border-left: 4px solid var(--danger); } .digest-item.due-today { border-left: 4px solid #d97706; background: #fffbeb; } .digest-item.upcoming { border-left: 4px solid var(--accent); } .digest-item.requested { border-left: 4px solid #7c3aed; } .digest-item-title { font-weight: 600; font-size: calc(14px + var(--fs-add-ui)); } .digest-item-meta { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .summary-mini { display: flex; gap: 8px; font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 2px; } .summary-mini .sm-item { display: inline-flex; gap: 3px; align-items: center; padding: 1px 7px; border-radius: 4px; background: var(--bg); } .summary-mini .sm-item.attn { background: #fef3c7; color: #92400e; font-weight: 700; } /* 클릭 가능한 sm-item (사진·파일·멤버) — 버튼 기본 스타일 제거 + hover */ .summary-mini .sm-item-btn { border: none; font-size: inherit; font-family: inherit; color: inherit; cursor: pointer; transition: background 0.12s, color 0.12s; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .summary-mini .sm-item-btn:hover { background: var(--accent-soft); color: var(--knk); } .summary-mini .sm-item-btn:active { opacity: 0.75; } /* ---- Timeline view ---- */ .timeline { display: flex; flex-direction: column; gap: 12px; } .timeline-day { border-left: 2px solid var(--border); padding-left: 16px; position: relative; } .timeline-day::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); } .timeline-date { font-weight: 700; font-size: calc(13px + var(--fs-add-ui)); margin-bottom: 8px; color: var(--text); } .timeline-events { display: flex; flex-direction: column; gap: 4px; } .timeline-event { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: calc(13px + var(--fs-add-ui)); } .timeline-event .event-icon { flex-shrink: 0; width: 22px; text-align: center; } .timeline-event .event-text { flex: 1; min-width: 0; line-height: 1.4; } .timeline-event .event-text .who { color: var(--text-soft); font-size: calc(11.5px + var(--fs-add-ui)); margin-right: 4px; } /* ---- Composer attach button ---- */ .composer { align-items: center; } .attach-btn { width: 38px; height: 38px; border-radius: 50%; font-size: calc(18px + var(--fs-add-ui)); color: var(--text-soft); background: var(--bg); flex-shrink: 0; transition: all .15s; } .attach-btn:not(:disabled):hover { background: var(--accent-soft); color: var(--accent); } .attach-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* 🎤 말해서 입력 (v692 · 대표 지시 2026-07-30) ⭐ 자리 = **보내기 아이콘 바로 왼쪽 + 사이를 띄운다**. 대표 직접 지시: "실수로 보내기 아이콘을 누르지 않도록." → 아래 margin-right 를 없애지 말 것. 손가락 하나가 두 단추에 걸치지 않을 만큼 띄운다(폰에서 더 넓게). */ .mic-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; font-size: calc(17px + var(--fs-add-ui)); line-height: 1; color: var(--text-soft); /* 배경 없음 (대표 지시 2026-07-30 v693b) — 선으로 그린 마이크 그림만 보이게. ⚠ 원래 빨간 원으로 보였던 진짜 원인은 위쪽 `.composer button:not(...)` 광역 규칙이었다. 그 :not() 목록에 .mic-btn 을 넣어 해결했다(!important 로 덮지 않음). */ background: transparent; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-right: 12px; /* ← 보내기와의 간격 (대표 지시). 지우면 실수 누름이 다시 난다 */ transition: background .15s, color .15s, box-shadow .15s; } .mic-btn:not(:disabled):hover { background: var(--accent-soft); color: var(--accent); } .mic-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* 듣는 중 — 눈에 띄게. 녹음 중인 걸 모르면 계속 켜 둔다. */ .mic-btn.recording { background: #A5282C; color: #fff; animation: micPulse 1.2s ease-in-out infinite; } /* 글자로 바꾸는 중 — 지금은 누르지 말라는 뜻 */ .mic-btn.working { opacity: 0.6; cursor: progress; } @keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(165, 40, 44, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(165, 40, 44, 0); } } @media (prefers-reduced-motion: reduce) { .mic-btn.recording { animation: none; } } /* 스레드 답글창 — 전송 단추(32px)에 맞춰 조금 작게. 간격 규칙은 같다. */ .mic-btn.thread-mic-btn { width: 32px; height: 32px; font-size: calc(15px + var(--fs-add-ui)); margin-right: 10px; } /* 폰 — 손가락이 두 단추에 걸치지 않게 조금 더 띄운다 */ @media (max-width: 720px) { .mic-btn { margin-right: 14px; } .mic-btn.thread-mic-btn { margin-right: 12px; } } /* v693 (대표 지시): 아이콘 = **선으로 그린 마이크(SVG)**. 이모지 🎤 아님. 보내기 화살표와 같은 '선 그림' 계열이라 옆의 이모지 단추들과 확실히 구분된다. 두 그림을 넣어두고 여기서 하나만 보인다 — JS 가 글자로 바꾸면 그림이 지워지므로 금지. */ .mic-btn .mic-ico, .mic-btn .mic-stop-ico { display: block; flex-shrink: 0; } .mic-btn .mic-stop-ico { display: none; } .mic-btn.recording .mic-ico { display: none; } .mic-btn.recording .mic-stop-ico { display: block; } /* 😀 이모지 ↔ 🐶 스티커 전환줄 (v693) — 입력줄 아이콘을 합친 대신 창 안에서 오간다. 💡 추천 켬/끔도 여기 (이모지·스티커 추천이니 같은 창이 제 집. 설정에 묻지 않는다) */ .ips-switch { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); } .ips-switch .ips-gap { flex: 1 1 auto; } .ips-switch .ips-tab, .ips-switch .ips-sug { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text-soft); border-radius: 999px; padding: 4px 10px; font-size: calc(12px + var(--fs-add-ui)); font-family: inherit; cursor: pointer; white-space: nowrap; } .ips-switch .ips-tab.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; } .ips-switch .ips-tab:not(.active):hover, .ips-switch .ips-sug:hover { background: var(--border); } /* 추천 꺼짐 — 흐리게 (켜짐/꺼짐을 한눈에) */ .ips-switch .ips-sug.off { opacity: 0.42; filter: grayscale(1); } /* ---- Image / File messages ---- */ .msg.image .bubble { padding: 4px; background: transparent !important; box-shadow: none; } .msg.image .bubble img { max-width: 140px; max-height: 160px; /* 절반 축소 (대표 지시 2026-06-05) — 클릭하면 미리보기로 크게 봄 */ border-radius: 12px; cursor: zoom-in; display: block; background: var(--bg); /* 로딩 중 최소 공간 확보 → iOS 스크롤 잘림 방지 */ min-height: 60px; } /* ── 앨범 묶음 메시지 (사진 N장 그리드) ── */ .msg.image.album .bubble.album-bubble { padding: 0; background: transparent !important; box-shadow: none; max-width: 240px; } .album-grid { display: grid; gap: 3px; border-radius: 12px; overflow: hidden; width: 240px; max-width: 100%; } .album-grid-1 { grid-template-columns: 1fr; } .album-grid-2 { grid-template-columns: 1fr 1fr; } .album-grid-3 { grid-template-columns: 1fr 1fr 1fr; } .album-grid-4 { grid-template-columns: 1fr 1fr; } /* 4장은 2×2 */ /* 7번째+ 사진 — 그리드에선 숨김(미리보기로는 '+N' 클릭 후 넘겨볼 수 있게 DOM엔 유지). 클래스 특이도(0,3,0)로 .album-tile{display:block} 을 이김 → hidden 속성 트랩 회피 (대표 지시 2026-06-30) */ .album-grid .album-tile.album-tile-more-hidden { display: none; } /* 타일 = 가로형 4:3 — 정사각보다 낮아 묶음 전체 높이↓(높이 낭비 해소), 가로 문서(WATCH 양식 등)가 안 잘리고 거의 전부 보임. ⭐ aspect-ratio 대신 padding-bottom 기법 → aspect-ratio 미지원/무시 브라우저에서도 동일하게 4:3 보장 (대표 지시 2026-06-30) */ .album-tile { position: relative; display: block; width: 100%; height: 0; padding-bottom: 75%; /* 4:3 (높이/너비 = 0.75) */ overflow: hidden; background: var(--bg); text-decoration: none; } .album-tile img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; /* .msg.image .bubble img 의 max-width·min-height 룰 무력화 (타일을 정확히 채우게) */ max-width: none !important; max-height: none !important; min-height: 0 !important; border-radius: 0; } .album-more { position: absolute; inset: 0; background: rgba(0,0,0,0.55); color: #fff; font: 700 22px/1 ui-sans-serif, system-ui, sans-serif; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* 📸 대화 캡쳐 — 여러 메시지(스크롤 밖 포함)를 범위 선택 → 한 장 이미지 (대표 지시 2026-07-05) */ body.capture-mode .messages .msg, body.capture-mode .messages .msg .bubble { cursor: pointer; } body.capture-mode .messages .msg .bubble { -webkit-user-select: none; user-select: none; } /* 선택 모드 중엔 텍스트 드래그 대신 탭=범위선택 */ .messages .msg.cap-sel { background: rgba(165,40,44,0.10); border-radius: 9px; } .messages .msg.cap-sel .bubble { outline: 2px solid var(--accent, #A5282C); outline-offset: 1px; } /* ✨ 이모티콘 추천 켬/끔 버튼(첨부 줄) — 끔=흐리게+무채색 (대표 지시 2026-07-17 v647) */ #emojiSuggestToggleBtn.es-off { opacity: 0.32; filter: grayscale(1); } /* 🧹 구간 완전삭제 모드 — 캡쳐 바 재사용 + 위험색(진한 빨강)로 구분 (대표 지시 2026-07-16) */ .cap-bar.purge-bar { background: #B91C1C; } .cap-bar.purge-bar .cap-btn.cap-do { background: #fff; color: #B91C1C; font-weight: 800; } li.msg.purge-sel { outline: 2px solid #DC2626; outline-offset: -2px; border-radius: 8px; background: rgba(220, 38, 38, 0.08); } .cap-bar { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 4000; display: flex; align-items: center; gap: 12px; background: var(--accent, #A5282C); color: #fff; padding: 9px 14px; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.28); font-size: calc(13px + var(--fs-add-ui)); max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: center; } .cap-bar-msg { font-weight: 700; flex: 1 1 auto; min-width: 0; } .cap-bar-btns { display: flex; gap: 8px; flex-shrink: 0; } .cap-btn { border: 0; border-radius: 8px; padding: 7px 13px; font-weight: 800; font-size: calc(12.5px + var(--fs-add-ui)); cursor: pointer; font-family: inherit; } .cap-do { background: #fff; color: var(--accent, #A5282C); } .cap-do[disabled] { opacity: 0.6; cursor: default; } .cap-cancel { background: rgba(255,255,255,0.22); color: #fff; } .cap-render { box-shadow: none !important; } /* 오프스크린 렌더 컨테이너 — 그림자 등 불필요 요소 억제 */ /* 📸 캡쳐 결과 선택 시트 (저장/공유 · 다른 방 · 이 방) — v574 */ .cap-result-ov { position: fixed; inset: 0; z-index: 4200; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 16px; } .cap-result { background: var(--surface); color: var(--text); border-radius: 14px; width: min(360px, 92vw); max-height: 88vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.35); display: flex; flex-direction: column; } .cap-result-head { font-weight: 800; font-size: calc(14px + var(--fs-add-ui)); padding: 14px 16px 8px; } .cap-result-preview { margin: 0 16px; border: 1px solid var(--border); border-radius: 10px; overflow: auto; max-height: 46vh; background: var(--bg); } .cap-result-preview img { display: block; width: 100%; height: auto; } .cap-result-size { color: var(--text-soft); font-size: calc(11.5px + var(--fs-add-ui)); padding: 6px 16px 2px; } .cap-result-btns { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 16px; } .cap-rbtn { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-weight: 800; font-size: calc(13.5px + var(--fs-add-ui)); background: var(--bg); color: var(--text); cursor: pointer; font-family: inherit; text-align: left; } .cap-rbtn.cap-r-save { background: var(--accent, #A5282C); color: #fff; border-color: var(--accent, #A5282C); } .cap-rbtn.cap-r-cancel { text-align: center; font-weight: 700; color: var(--text-soft); } .cap-rbtn:hover { filter: brightness(0.97); } /* multiShare 파일(캡쳐 이미지) 전달 미리보기 */ .ms-filepv { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--bg); } .ms-filepv img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); } .ms-filepv span { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); word-break: break-all; } .ms-usub { color: var(--text-soft); font-weight: 400; font-size: 0.85em; margin-left: 4px; } /* 사람 목록 직책·부서 */ /* ── 첨부 미리보기 다이얼로그의 썸네일 그리드 ── */ .ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; max-height: 320px; overflow-y: auto; padding: 4px; background: #f9fafb; border-radius: 8px; border: 1px solid var(--border); } .ap-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #fff; } .ap-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 메시지 본문 내 자동 링크(URL) — 클릭하면 새 탭으로 (대표 지시 2026-06-05) */ .msg-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .msg-link:hover { opacity: 0.85; } /* 📁 PC 폴더 경로 — 자동 인식 + 복사 버튼 (대표 지시 2026-07-22) 브라우저가 file:// 이동을 막아 '눌러서 바로 열기'가 안 되므로, 복사해서 탐색기 주소창에 붙여넣는 방식. */ /* inline-flex 가 아니라 inline — 경로가 두 줄로 넘어가도 📋 가 '경로 맨 뒤'에 따라붙는다. (flex 로 두면 글자만 줄바꿈되고 버튼은 첫 줄 오른쪽에 떠 버림) */ .knk-path { display: inline; background: rgba(127, 127, 127, 0.14); border-radius: 5px; padding: 1px 3px 1px 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; /* 줄바꿈돼도 양끝 둥글게 */ } .knk-path-text { font-family: ui-monospace, Consolas, "D2Coding", monospace; font-size: 0.94em; word-break: break-all; } .knk-path-copy { display: inline-block; vertical-align: baseline; margin-left: 3px; border: 0; background: transparent; cursor: pointer; padding: 0 3px; border-radius: 4px; font-size: 0.95em; line-height: 1.25; color: inherit; } .knk-path-copy:hover { background: rgba(127, 127, 127, 0.26); } .knk-path-copy.done { background: rgba(34, 197, 94, 0.32); } /* 복사됨 — 잠깐 초록 */ /* ── 💱 대화 속 금액 — 눌러서 원화로 (v691 · 대표 지시 2026-07-30) ────────────── ⚠ 말풍선 글자 크기·줄바꿈을 건드리지 않는다: display 는 inline 그대로 두고, 밑줄도 border 가 아니라 text-decoration 으로 그린다(줄 높이가 안 밀린다). ⚠ 색을 새로 만들지 않고 기존 테마 변수(--surface/--border/--text/--text-soft/--accent)만 쓴다 → 밝은/어두운/세이지 등 모든 테마에서 저절로 맞는다. */ .knk-money { cursor: pointer; text-decoration: underline dotted; text-decoration-color: rgba(127, 127, 127, 0.85); text-underline-offset: 2px; border-radius: 3px; } .knk-money:hover { background: rgba(127, 127, 127, 0.16); } .knk-money:focus-visible { background: rgba(127, 127, 127, 0.16); outline: 2px solid var(--accent); outline-offset: 1px; } /* 💱 환산 창 — 모달(.modal)이 아니라 '말풍선형 작은 창'. 그래서 팝업 표준규정(v654: PC 크기조절·드래그)의 대상이 아니다. 눌렀다 보고 닫는 창. */ .knk-fx-pop { position: fixed; z-index: 100021; /* 반응 '누가 눌렀나' 팝업(.rx-who-pop)과 같은 층 = 모달 위 */ background: var(--surface, #fff); color: var(--text); border: 1px solid var(--border); border-radius: 8px; /* 사각에 가깝게 — 둥근 모서리 최소 */ box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); padding: 10px 12px 9px; width: max-content; max-width: min(320px, calc(100vw - 24px)); font-size: calc(13px + var(--fs-add-ui)); line-height: 1.45; } .knk-fx-pop .fxp-x { position: absolute; top: 4px; right: 5px; border: 0; background: transparent; color: var(--text-soft); cursor: pointer; padding: 2px 5px; border-radius: 5px; font-size: calc(12px + var(--fs-add-ui)); line-height: 1; } .knk-fx-pop .fxp-x:hover { background: rgba(127, 127, 127, 0.18); } .knk-fx-pop .fxp-src { color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); padding-right: 22px; /* ✕ 자리 확보 */ word-break: break-all; } .knk-fx-pop .fxp-out { font-weight: 800; font-size: calc(17px + var(--fs-add-ui)); margin: 3px 0 6px; word-break: break-all; } .knk-fx-pop .fxp-rate { border-top: 1px solid var(--border); padding-top: 6px; font-size: calc(12px + var(--fs-add-ui)); } .knk-fx-pop .fxp-ym { color: var(--text-soft); } .knk-fx-pop .fxp-basis { color: var(--text-soft); font-size: calc(11.5px + var(--fs-add-ui)); margin-top: 2px; } .knk-fx-pop .fxp-loading { color: var(--text-soft); margin: 4px 0 6px; } .knk-fx-pop .fxp-missing { /* 회사 기준환율 미입력 — 거짓 숫자 대신 안내 */ margin: 4px 0 6px; padding: 6px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; line-height: 1.4; } .knk-fx-pop .fxp-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; } .knk-fx-pop .fxp-ccy { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: calc(12px + var(--fs-add-ui)); line-height: 1.5; } .knk-fx-pop .fxp-ccy:hover { background: var(--accent-soft); border-color: var(--accent); } .knk-fx-pop .fxp-ccy.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; } .knk-fx-pop .fxp-ccy.off { opacity: 0.42; } /* 회사 기준환율 미입력 통화 — 흐리게 */ .knk-fx-pop .fxp-copy { margin-top: 8px; width: 100%; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 6px; padding: 5px 8px; cursor: pointer; font-size: calc(12.5px + var(--fs-add-ui)); } .knk-fx-pop .fxp-copy:hover { background: rgba(127, 127, 127, 0.14); } /* 휴대폰 — 좁은 화면에서도 잘리지 않게, 손가락으로 누를 만큼 크게 */ @media (max-width: 720px) { .knk-fx-pop { max-width: calc(100vw - 20px); padding: 11px 12px 10px; } .knk-fx-pop .fxp-ccy { padding: 5px 10px; } .knk-fx-pop .fxp-copy { padding: 7px 8px; } } /* 파일 메시지 — 원래 단순한 형태 (첨부 스타일 fix 되돌림) */ .msg.file .bubble { display: flex; gap: 6px; align-items: center; padding: 5px 8px; min-width: 0; /* 파일 이름이 2줄에 다 들어가도록 PC에선 넉넉히. (대표 지시 2026-07-29) ⚠ 280px 고정이라 화면이 아무리 넓어도 이름이 잘렸다 — 이름 자리가 175px 뿐이라 2줄 해봐야 50자. ⓘ 짧은 이름은 그대로 작게 나온다(내용만큼만 커지고 이 값은 '상한'일 뿐). ⓘ 휴대폰은 아래 @media(max-width:720px, 터치)에서 232px 로 따로 잡으므로 영향 없음. ⓘ 창이 좁아지면 .msg(80%)·.bubble-row(100%)+min-width:0 가 알아서 줄여준다 — 여기에 %를 쓰면 부모가 '내용만큼' 크는 구조라 계산이 꼬인다. 그래서 px 고정 상한. */ max-width: 460px; text-decoration: none; color: inherit; } .msg.file .file-icon { width: 22px; height: 22px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: calc(12px + var(--fs-add-ui)); flex-shrink: 0; } .msg.file .file-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* 파일명 최대 2줄, 넘치면 … 말줄임 (대표 지시 2026-06-05 · 2026-07-29 재확인 "2줄 넘어가면 안 됨") 줄바꿈은 띄어쓰기 우선 — break-all 은 'Fun / ction' 처럼 단어를 아무 데서나 쪼갰다. overflow-wrap:anywhere = 띄어쓰기에서 끊되, 띄어쓰기 없는 긴 덩어리는 그때만 강제로 끊는다. */ .msg.file .file-name { font-weight: 600; font-size: calc(11px + var(--fs-add-ui)); line-height: 1.25; word-break: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .msg.file .file-size { font-size: calc(9.5px + var(--fs-add-ui)); color: var(--text-soft); } .msg.file .file-link { margin-left: auto; flex-shrink: 0; white-space: nowrap; /* 받기 글자 줄바꿈 방지 — 버튼이 세로로 길쭉해지지 않게 (대표 지시 2026-06-05) */ padding: 4px 9px; border-radius: 5px; background: var(--accent); color: #fff; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 600; text-decoration: none; } /* ───── 파일 다운로드 토스트 (우하단) ───── */ .download-toast { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; background: #1F2937; /* 어두운 배경 — OS 알림 느낌 */ color: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); font-size: calc(13px + var(--fs-add-ui)); animation: dtSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); max-width: 320px; } @keyframes dtSlideIn { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .download-toast.dt-fade { transition: opacity 0.4s, transform 0.4s; opacity: 0; transform: translateY(20%); } .download-toast .dt-icon { font-size: calc(20px + var(--fs-add-ui)); flex-shrink: 0; } .download-toast .dt-body { min-width: 0; } .download-toast .dt-title { font-weight: 600; font-size: calc(12px + var(--fs-add-ui)); color: #A5282C; } .download-toast .dt-name { font-size: calc(12px + var(--fs-add-ui)); color: #E5E7EB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } /* ---- Drag-and-drop overlay ---- */ .dropzone-overlay { position: absolute; inset: 0; background: rgba(37, 99, 235, 0.1); border: 3px dashed var(--accent); border-radius: 12px; display: grid; place-items: center; font-size: calc(18px + var(--fs-add-ui)); font-weight: 600; color: var(--accent); pointer-events: none; z-index: 100; } /* ---- Chat header badges ---- */ .head-btn { position: relative; } .head-badge { position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff; border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; display: grid; place-items: center; } /* ---- Big dialogs (gallery / requests / digest) ---- */ .big-dialog { max-width: 720px !important; width: 100%; max-height: 85vh !important; padding: 0 !important; display: flex; flex-direction: column; } .big-dialog-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .big-dialog-head h3 { margin: 0; font-size: calc(16px + var(--fs-add-ui)); flex-shrink: 0; } .close-x { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; font-size: calc(22px + var(--fs-add-ui)); font-weight: 700; color: var(--text); background: var(--bg); margin-left: auto; display: grid; place-items: center; transition: all .15s; cursor: pointer; } .close-x:hover { background: var(--danger); color: #fff; transform: rotate(90deg); } .close-x:active { transform: scale(0.95) rotate(90deg); } .gallery-tabs { display: flex; gap: 4px; } .gallery-tabs .gtab { padding: 5px 12px; border-radius: 999px; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft); background: var(--bg); transition: all .15s; } .gallery-tabs .gtab:hover { color: var(--text); } .gallery-tabs .gtab.active { background: var(--accent); color: #fff; } /* 탭 옆 건수 — 어디에 몇 건 있는지 (이한중 팀장 요청 2026-07-29). 비어 있으면(0건) 여백도 안 생기게 :empty 처리. */ .gallery-tabs .gtab .gtab-n { margin-left: 5px; opacity: .75; font-variant-numeric: tabular-nums; } .gallery-tabs .gtab .gtab-n:empty { margin-left: 0; } /* 📌 내 할 일 — 내가 요청자이거나 담당자인, 아직 안 끝난 요청 수. 0이면 아예 안 보인다. */ .req-mine-chip { display: inline-block; margin-left: 9px; vertical-align: middle; padding: 2px 10px; border-radius: 999px; background: #B45309; color: #fff; font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ─── 일반 모달 탭바 (.gtabs) — 스레드함 등에서 사용 (2026-05-28) ─── */ .gtabs { display: flex; gap: 6px; align-items: flex-end; border-bottom: 1px solid var(--border); padding: 0 0 0 2px; } .gtabs .gtab { padding: 8px 18px; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft); background: var(--bg); cursor: pointer; position: relative; bottom: -1px; transition: all .15s; } .gtabs .gtab:hover { color: var(--text); background: var(--surface); } .gtabs .gtab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; box-shadow: 0 -2px 6px rgba(0,0,0,0.08); } /* ─── 스레드 항목 — 부모 내용을 제목처럼 + 시작일/최근답글 한 줄 메타 (2026-05-28) ─── */ .thread-title-row { display: flex; align-items: flex-start; gap: 6px; font-size: calc(14.5px + var(--fs-add-ui)); font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 6px; } .thread-title-text { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .thread-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); } .thread-meta-sep { color: var(--border); } .thread-meta-author { font-weight: 600; color: var(--text); } .thread-meta-rel { color: var(--accent); font-weight: 600; } .thread-meta-replies { color: var(--text); font-weight: 600; } /* ─── 스레드 항목 우측 버튼들 — 다운로드 + 관리(🗑) (2026-05-28) ─── */ .thread-row { position: relative; padding-right: 96px !important; } .thread-row-actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; z-index: 2; } .thread-dl-btn, .thread-del-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font-size: calc(15px + var(--fs-add-ui)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .thread-dl-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.05); } .thread-del-btn:hover { background: var(--danger, #dc2626); color: #fff; border-color: var(--danger, #dc2626); transform: scale(1.05); } .thread-dl-btn:active, .thread-del-btn:active { transform: scale(0.95); } /* ─── 스레드 관리 다이얼로그 — 4지선다 버튼 ─── */ .thr-mgr-btn { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: calc(14px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; text-align: left; transition: all .15s; } .thr-mgr-btn:hover { background: var(--bg); } .thr-mgr-extend { border-color: var(--accent); color: var(--accent); } .thr-mgr-extend:hover { background: var(--accent); color: #fff; } .thr-mgr-backup { border-color: var(--border); } .thr-mgr-backup:hover { background: var(--bg); border-color: var(--text-soft); } .thr-mgr-delete { border-color: var(--danger, #dc2626); color: var(--danger, #dc2626); } .thr-mgr-delete:hover { background: var(--danger, #dc2626); color: #fff; } .thr-mgr-cancel { text-align: center; color: var(--text-soft); } /* ─── 🚀 부서 퀵 만들기 — 채널 다이얼로그 (대표 지시 2026-05-28) ─── */ .dept-quick-chip { padding: 7px 10px; font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 600; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; text-align: center; transition: all .15s; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .dept-quick-chip:hover { background: var(--accent-soft, #FEF2F2); border-color: var(--accent); color: var(--accent); } .dept-quick-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } .dept-quick-chip .dept-quick-flag { font-size: calc(11px + var(--fs-add-ui)); opacity: 0.7; font-weight: 400; } .dept-quick-chip .dept-quick-count { font-size: 10.5px; opacity: 0.6; font-weight: 400; } @media (max-width: 480px) { #deptQuickGrid { grid-template-columns: repeat(2, 1fr) !important; } } /* ─── 🔐 AI 사용 권한 — 토글 스위치 + 사용자 행 (2026-05-28) ─── */ .ai-toggle { position: relative; display: inline-block; flex-shrink: 0; } .ai-toggle input { opacity: 0; width: 0; height: 0; } .ai-toggle-track { display: block; width: 48px; height: 26px; background: var(--border); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; } .ai-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform .2s; } .ai-toggle input:checked + .ai-toggle-track { background: var(--accent); } .ai-toggle input:checked + .ai-toggle-track .ai-toggle-thumb { transform: translateX(22px); } /* 토글 현재 상태 글자(켜짐/꺼짐) — 시스템 설정 토글. 켜짐=녹색·꺼짐=회색, :checked 연동 자동 갱신 (대표 지시 2026-06-14) */ .ai-toggle-state { display: block; text-align: center; margin-top: 3px; line-height: 1; font-weight: 700; font-size: calc(11px + var(--fs-add-ui)); } .ai-toggle-state::after { content: "꺼짐"; color: var(--text-soft); } .ai-toggle input:checked ~ .ai-toggle-state::after { content: "켜짐"; color: #15a34a; } .ai-perm-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; background: var(--surface); font-size: calc(13px + var(--fs-add-ui)); } .ai-perm-row:last-child { border-bottom: 0; } .ai-perm-row:hover { background: var(--bg); } .ai-perm-row .ai-perm-cb { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); } .ai-perm-row .ai-perm-cb:disabled { cursor: not-allowed; opacity: 0.7; } .ai-perm-row .ai-perm-name { color: var(--text); font-weight: 600; } .ai-perm-row .ai-perm-meta { color: var(--text-soft); font-size: calc(11.5px + var(--fs-add-ui)); white-space: nowrap; } /* ─── 🔐 통합 권한 표 (채널·WORKS·AI 요약) — 대표 지시 2026-05-31 ─── */ .perm-head, .perm-row { display: grid; grid-template-columns: 1fr 50px 54px 54px 54px 54px 54px 86px; /* 직원·채널·WORKS·🏛포털·AI요약·🤖용어·🏢자료·🌐언어 (자료 열 2026-07-17) */ gap: 6px; align-items: center; padding: 8px 12px; } /* 🌐 직원 언어 점검 (대표 지시 2026-06-17) */ .perm-row .perm-lang { width: 100%; padding: 3px 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); font-size: calc(11.5px + var(--fs-add-ui)); font-family: inherit; } .perm-row .perm-lang.misset { border-color: #dc2626; background: #fef2f2; color: #991b1b; font-weight: 700; } .perm-row.perm-row-misset { background: #fff5f5; } .perm-row.perm-row-misset:hover { background: #ffecec; } /* 권한 표: 헤더는 스크롤 밖(고정), 데이터행만 스크롤 (대표 지시 2026-06-05) */ .perm-table-wrap { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); overflow: hidden; } .perm-scroll { max-height: clamp(150px, calc(100vh - 430px), 620px); overflow-y: auto; scrollbar-gutter: stable; } .perm-head { scrollbar-gutter: stable; overflow: hidden; /* 데이터행 스크롤바 폭만큼 헤더도 확보 → 열 정렬 */ background: var(--bg); color: var(--text-soft); font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; border-bottom: 1px solid var(--border); } .perm-head .perm-cell-h { text-align: center; font-size: 10.5px; } .perm-row { border-bottom: 1px solid var(--border); background: var(--surface); font-size: calc(13px + var(--fs-add-ui)); } .perm-row:last-child { border-bottom: 0; } .perm-row:hover { background: var(--bg); } .perm-row .perm-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .perm-row .perm-who .perm-name { color: var(--text); font-weight: 600; } .perm-row .perm-who .perm-meta { color: var(--text-soft); font-size: calc(11px + var(--fs-add-ui)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .perm-row .perm-cell { display: flex; align-items: center; justify-content: center; margin: 0; } .perm-row .perm-cell input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); } .perm-row .perm-cell-lock { font-size: calc(14px + var(--fs-add-ui)); opacity: 0.6; cursor: default; line-height: 1; } /* 🇰🇷/🇻🇳 법인 책갈피 (본사 / 베트남법인) */ .perm-corp-tabs { display: flex; gap: 6px; margin-bottom: 8px; } .perm-corp-tab { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-soft); font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; font-family: inherit; transition: background .12s, color .12s, border-color .12s; } .perm-corp-tab:hover { background: var(--bg); } .perm-corp-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ─── 대화방 엑셀 내보내기 — 기간 선택 빠른 버튼 (2026-05-28) ─── */ .export-range-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .export-range-grid .export-range-btn { padding: 8px 6px; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; transition: all .15s; } .export-range-grid .export-range-btn:hover { background: var(--bg); border-color: var(--text-soft); } .export-range-grid .export-range-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } @media (max-width: 480px) { .export-range-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-content { flex: 1; overflow-y: auto; padding: 16px 20px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .gallery-tile { aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--bg); position: relative; } .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-tile .tile-meta { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: #fff; font-size: 10.5px; padding: 16px 8px 6px; } .gallery-files { display: flex; flex-direction: column; gap: 4px; } .gallery-file-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; transition: background .15s; } .gallery-file-row:hover { background: var(--bg); } .gallery-file-row .file-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: calc(18px + var(--fs-add-ui)); flex-shrink: 0; } .gallery-file-row .file-info { flex: 1; min-width: 0; } .gallery-file-row .file-name { font-weight: 600; font-size: calc(13.5px + var(--fs-add-ui)); word-break: break-all; } .gallery-file-row .file-meta { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 2px; } .gallery-file-row a { padding: 6px 12px; border-radius: 6px; background: var(--accent); color: #fff; font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; } /* ---- 비밀번호 입력 + 👁 토글 (대표 지시 2026-05-19) ---- */ .pw-wrap { position: relative; display: flex; align-items: center; min-width: 0; /* flex 항목이 카드 폭 밖으로 넘치지 않도록 */ } .pw-wrap > input { flex: 1; min-width: 0; /* flex 항목 min-width:auto(입력칸 기본폭) 때문에 넘침 → 0으로 풀어줌 */ padding-right: 36px !important; /* 토글 버튼 자리 확보 */ } .pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: transparent; border: none; border-radius: 50%; cursor: pointer; font-size: calc(15px + var(--fs-add-ui)); color: var(--text-soft, #6b7280); display: grid; place-items: center; padding: 0; user-select: none; transition: background 0.12s, color 0.12s; } .pw-toggle:hover { background: rgba(0,0,0,0.06); color: var(--accent, #A5282C); } .pw-toggle:focus { outline: 2px solid var(--accent, #A5282C); outline-offset: 1px; } .pw-toggle.shown { color: var(--accent, #A5282C); } /* 🔒 비밀번호 마스킹 — type=text 이지만 화면에는 ●●● 로 가림. (브라우저가 페이지를 "로그인 폼" 으로 오인해 검색칸에 저장비번 자동완성을 띄우는 문제 차단. -webkit-text-security 는 Chromium·WebKit 지원. 미지원 브라우저는 app.js 안전망이 진짜 password 칸으로 환원) */ input.knk-masked { -webkit-text-security: disc; text-security: disc; } /* ===== 🤝 고객사 초대 폼 — 2열 배치(스크롤 없이 작성), 좁으면 1열 (대표 지시 2026-05-30) ===== */ .gi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 14px; } .gi-form-grid .gi-full { grid-column: 1 / -1; } @media (max-width: 520px) { .gi-form-grid { grid-template-columns: 1fr; } } /* 고객사 초대 — 책갈피 탭(입력/목록), 활성 탭만 남은 공간 + 내부 스크롤 (대표 지시 2026-05-30) */ #guestInviteDialog .modal-content { display: flex; flex-direction: column; overflow: hidden !important; /* 다이얼로그 전체 스크롤 제거 */ /* 고정 높이 — 탭(입력/목록) 전환해도 창 크기 동일 (대표 지시 2026-05-30) */ height: min(calc(100dvh - 24px), 600px); max-height: calc(100dvh - 24px); } /* 헤더·탭바·푸터는 고정. 활성 탭(.gi-pane)만 남은 공간 차지 */ #guestInviteDialog .modal-content > *:not(.gi-pane) { flex-shrink: 0; } .gi-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .gi-pane[hidden] { display: none; } /* 책갈피 탭 */ .gi-tabs { display: flex; gap: 6px; margin: 12px 0 0; } .gi-tab { flex: 1; padding: 9px 10px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; border: 1px solid var(--border); border-bottom: none; border-radius: 9px 9px 0 0; background: var(--bg); color: var(--text-soft); cursor: pointer; } .gi-tab.active { background: var(--surface); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .gi-pane { border-top: 1px solid var(--border); padding-top: 10px; } .gi-count { color: var(--accent); font-weight: 700; margin-left: 2px; } /* ===== 📢 방 공지사항 막대 (대표 지시 2026-05-29) ===== */ /* 📢 헤더 진입 버튼 — PC 아이콘 줄(우측 정렬)에서 왼쪽 끝으로 밀어 고정 */ #noticeHeadBtn { margin-right: auto; } .notice-bar { flex-shrink: 0; border-bottom: 1px solid var(--border); } /* hidden 속성이 .notice-pill / .notice-body 의 display 규칙에 덮이지 않도록 — 접힘/펼침 전환 보장 */ .notice-pill[hidden], .notice-body[hidden] { display: none !important; } /* 접힘 상태 — 얇은 알약 1줄 (공간 최소화) */ .notice-pill { display: inline-flex; align-items: center; gap: 5px; margin: 4px 10px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; line-height: 1.6; } .notice-pill:hover { border-color: var(--accent); color: var(--text); } .notice-pill-count { color: var(--accent); font-weight: 700; } .notice-body { padding: 6px 10px 8px; } .notice-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } /* 제목줄 = 접기/펼치기 토글 버튼 (대표 지시 2026-06-13) — 버튼 기본 스타일 리셋 + 클릭 영역 */ .notice-head-title { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 2px 0; margin: 0; cursor: pointer; text-align: left; font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; color: var(--text); white-space: nowrap; } .notice-head-title:hover { color: var(--accent); } .notice-fold-caret { font-size: calc(10px + var(--fs-add-ui)); color: var(--text-soft); flex-shrink: 0; } .notice-head-title:hover .notice-fold-caret { color: var(--accent); } /* 접었을 때 제목 옆 최신 공지 미리보기(한 줄, 말줄임) */ .notice-fold-preview { font-weight: 400; color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .notice-head-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; } /* 📢 접힘 상태 — 내용(목록)·'지난 공지' 버튼 숨기고 제목줄만 얇게 (대표 지시 2026-06-13) */ .notice-bar.folded .notice-list { display: none; } .notice-bar.folded #noticeExpandBtn { display: none !important; } .notice-bar.folded .notice-head { margin-bottom: 0; } .notice-act { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; padding: 3px 8px; font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; line-height: 1.4; white-space: nowrap; } .notice-act:hover { border-color: var(--accent); color: var(--accent); } .notice-act.notice-add { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } .notice-act.notice-add:hover { background: #8B1F23; color: #fff; } .notice-act.notice-collapse { padding: 3px 9px; font-weight: 700; } .notice-more-count { color: var(--accent); font-weight: 700; } .notice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; } .notice-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .notice-item-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .notice-latest-tag { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px; flex-shrink: 0; } .notice-meta { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notice-del, .notice-edit { border: none; background: transparent; cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); padding: 2px 4px; border-radius: 4px; flex-shrink: 0; } .notice-del:hover, .notice-edit:hover { background: var(--bg); color: var(--accent); } .notice-content { font-size: calc(13.5px + var(--fs-add-ui)); color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } /* 📢 공지 인라인 편집 (작성자·방장·관리자) (대표 지시 2026-06-17) */ .notice-item.editing { border-color: var(--accent); } .notice-edit-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; font: inherit; font-size: calc(13.5px + var(--fs-add-ui)); line-height: 1.5; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-top: 2px; } .notice-edit-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; } .notice-edit-save, .notice-edit-cancel { border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: calc(12px + var(--fs-add-ui)); padding: 4px 12px; } .notice-edit-save { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } .notice-edit-cancel { background: var(--surface); color: var(--text-soft); } .notice-edit-cancel:hover { background: var(--bg); } .notice-empty { font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text-soft); padding: 6px 2px; } /* ===== 📎 첨부 대기 바 (대표 지시 2026-05-29) ===== */ .pending-attach { border-top: 1px solid var(--border); background: var(--surface); padding: 6px 10px 4px; max-height: 40vh; overflow-y: auto; } .pending-attach .pa-head { display: flex; align-items: center; gap: 6px; font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; color: var(--text); margin-bottom: 5px; } .pending-attach .pa-head b { color: var(--accent); } .pending-attach .pa-album { background: var(--accent-soft, #fdecee); color: var(--accent); border-radius: 6px; padding: 1px 6px; font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; } .pending-attach .pa-clear { margin-left: auto; border: 1px solid var(--border); background: var(--bg); color: var(--text-soft); border-radius: 6px; padding: 2px 8px; font-size: calc(11px + var(--fs-add-ui)); cursor: pointer; } .pending-attach .pa-clear:hover { border-color: var(--accent); color: var(--accent); } .pending-attach .pa-list { display: flex; flex-wrap: wrap; gap: 6px; } .pending-attach .pa-item { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px 4px 4px; max-width: 240px; } .pending-attach .pa-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .pending-attach .pa-fileicon { font-size: calc(22px + var(--fs-add-ui)); width: 34px; text-align: center; flex-shrink: 0; } .pending-attach .pa-name { font-size: calc(12px + var(--fs-add-ui)); color: var(--text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pending-attach .pa-size { font-size: 10.5px; color: var(--text-soft); flex-shrink: 0; } .pending-attach .pa-del { border: none; background: transparent; color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); cursor: pointer; padding: 2px 4px; border-radius: 50%; flex-shrink: 0; } .pending-attach .pa-del:hover { background: var(--accent); color: #fff; } /* ---- Lightbox (image fullscreen viewer) — 깔끔한 풀스크린 + 툴바 + 좌우 넘기기 + 저장 ---- */ .lightbox-modal { background: rgba(0,0,0,0.94); padding: 0 !important; display: none; align-items: stretch; justify-content: stretch; } .lightbox-modal.open { display: block !important; position: fixed !important; inset: 0; z-index: 9999; } /* 라이트박스에는 modal-content wrapper 가 없음 — 직접 자식 구조 */ /* 상단 툴바 */ .lb-toolbar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; z-index: 10; background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); pointer-events: none; } .lb-toolbar > * { pointer-events: auto; } .lb-counter { color: #fff; font: 600 13px/1 ui-sans-serif, system-ui, sans-serif; padding: 8px 14px; background: rgba(0,0,0,0.5); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lb-actions { display: flex; gap: 8px; } .lb-btn { background: rgba(255,255,255,0.15); color: #fff; border: none; padding: 9px 14px; border-radius: 999px; font: 600 13px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; transition: background 0.15s, transform 0.1s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; /* 저장 버튼 텍스트가 2줄로 줄바꿈돼 높이 들쭉날쭉해지는 것 방지 (대표 지시 2026-05-29) */ } .lb-btn:hover { background: rgba(255,255,255,0.28); } .lb-btn:active { transform: scale(0.96); } .lb-close { padding: 9px 13px; font-size: calc(16px + var(--fs-add-ui)); line-height: 1; } /* 좌우 화살표 */ .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.55); color: #fff; border: none; width: 52px; height: 52px; border-radius: 50%; font-size: calc(34px + var(--fs-add-ui)); line-height: 1; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.15s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lb-nav:hover { background: rgba(0,0,0,0.78); } .lb-prev { left: 18px; } .lb-next { right: 18px; } .lb-nav[hidden] { display: none !important; } /* 사진 영역 */ .lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 68px 80px 80px; box-sizing: border-box; } .lightbox-modal img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 4px; object-fit: contain; background: transparent; display: block; box-shadow: 0 8px 32px rgba(0,0,0,0.6); /* 확대·축소 (대표 지시 2026-05-27) — transform 으로 줌/팬, transition 은 클릭/리셋에만 적용 */ transform-origin: center center; transform: translate(0,0) scale(1); cursor: zoom-in; user-select: none; -webkit-user-select: none; touch-action: none; /* 모바일 핀치/팬 직접 처리 (스크롤·확대 기본 동작 차단) */ will-change: transform; } .lightbox-modal img.zoomed { cursor: grab; } .lightbox-modal img.dragging { cursor: grabbing; transition: none !important; } .lightbox-modal img.smooth { transition: transform .18s ease-out; } /* 줌 컨트롤 (툴바) */ .lb-zoom-btn { padding: 9px 12px; font-size: calc(14px + var(--fs-add-ui)); line-height: 1; } .lb-zoom-level { color: #fff; font: 700 12px/1 ui-sans-serif, system-ui, sans-serif; padding: 8px 10px; min-width: 48px; text-align: center; background: rgba(0,0,0,0.5); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* 하단 파일명 영역 */ .lb-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 18px 18px; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); z-index: 10; pointer-events: none; } .lightbox-meta { margin: 0; color: #fff; text-align: center; font-size: calc(13px + var(--fs-add-ui)); text-shadow: 0 1px 4px rgba(0,0,0,0.6); word-break: break-all; } /* 모바일 — 화살표/툴바 컴팩트 */ @media (max-width: 600px) { .lb-toolbar { padding: 10px 12px; } .lb-stage { padding: 56px 12px 64px; } .lb-nav { width: 42px; height: 42px; font-size: calc(26px + var(--fs-add-ui)); } .lb-prev { left: 6px; } .lb-next { right: 6px; } .lb-btn { font-size: calc(12px + var(--fs-add-ui)); padding: 7px 10px; } .lb-close { padding: 7px 9px; } .lb-counter { font-size: calc(12px + var(--fs-add-ui)); padding: 6px 11px; } /* 모바일에서 "ZIP" 글자만 보이게 (공간 절약) */ .lb-btn .lb-text-full { display: none; } } /* ---- Requests dialog ---- */ .requests-list { flex: 1; overflow-y: auto; padding: 12px 20px; } .req-item { padding: 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); transition: box-shadow .15s; } .req-item:hover { box-shadow: var(--shadow); } .req-item.req-overdue { border-left: 4px solid var(--danger); } .req-item.req-due-soon { border-left: 4px solid #d97706; } /* 완료 카드는 흐리게 — 단 '✅ 처리 결과'만은 또렷하게. 완료 탭은 결과를 읽으려고 여는 곳이다. (부모에 opacity 를 걸면 자식이 되돌릴 수 없어, 결과 칸을 뺀 나머지에 건다 — 보이는 결과는 종전과 동일) (v681) */ .req-item.req-done > *:not(.req-result) { opacity: 0.6; } .req-item.req-cancelled { opacity: 0.5; text-decoration: line-through; } /* 내 요청 패널에서 진입 시 해당 요청 잠깐 강조 (대표 지시 2026-05-22) */ .req-item.req-flash { animation: reqFlash 2s ease-out; } @keyframes reqFlash { 0% { box-shadow: 0 0 0 3px rgba(165,40,44,0.55); background: #fff4f4; } 60% { box-shadow: 0 0 0 3px rgba(165,40,44,0.30); background: #fff8f8; } 100% { box-shadow: var(--shadow); background: var(--surface); } } /* ── 멘션함 (@ 내게 온 멘션) — 대표 지시 2026-05-22 ── */ .mentions-list { flex: 1; overflow-y: auto; padding: 12px 20px; } .mention-item { display: flex; /* 좌: 본문 / 우: 🗑 — 🗑 항상 오른쪽 끝 고정 */ align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--surface); cursor: pointer; transition: box-shadow .15s, background .15s; } .mention-item:hover { box-shadow: var(--shadow); background: var(--bg); } /* 흰색(#fafafa) → 토큰 — 다크에서 선택 시 글씨 보이게 (대표 지시 2026-05-29) */ .mention-item.unread { border-left: 4px solid var(--accent); background: var(--accent-soft); } .mention-main { flex: 1 1 auto; min-width: 0; } /* 본문 칸 (제목·시간·미리보기) */ .mention-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; } .mention-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .mention-sender { font-weight: 700; font-size: calc(13.5px + var(--fs-add-ui)); color: var(--text); } .mention-room { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); } .mention-time { font-size: calc(11px + var(--fs-add-ui)); color: #9ca3af; margin-left: auto; } .mention-del { align-self: flex-start; /* 카드 오른쪽 칸의 상단에 고정 */ background: transparent; border: 0; cursor: pointer; font-size: calc(15px + var(--fs-add-ui)); line-height: 1; padding: 4px 6px; border-radius: 6px; opacity: 0.55; flex-shrink: 0; transition: opacity .15s, background .15s; } .mention-del:hover { opacity: 1; background: #fee2e2; } .mention-preview { font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); line-height: 1.45; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── 스레드함 역할 태그 (대표 지시 2026-05-27) ── */ .thr-tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; line-height: 1; flex-shrink: 0; } .thr-tag.thr-author { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; } /* 내 글 (받음) */ .thr-tag.thr-replier { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; } /* 내가 답글 */ .thr-tag.thr-both { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; } /* 둘 다 */ /* ====== 🔒 화면 잠금 (자리 비움 자동 잠금) ====== */ .lock-overlay { position: fixed; inset: 0; z-index: 2147483000; /* 모든 모달(9999) 위에 덮음 */ display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, #A5282C 0%, #6B1015 100%); } .lock-overlay[hidden] { display: none; } .lock-box { width: 100%; max-width: 340px; background: #fff; border-radius: 16px; padding: 28px 24px 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); text-align: center; } .lock-logo { display: block; max-width: 150px; max-height: 48px; width: auto; height: auto; margin: 0 auto 14px; } .lock-title { font-size: calc(17px + var(--fs-add-ui)); font-weight: 700; color: var(--text); margin-bottom: 6px; } .lock-sub { font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text-soft); line-height: 1.5; margin-bottom: 18px; } .lock-bio-btn { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid var(--accent); background: #fff; color: var(--accent); border-radius: 10px; font-size: calc(14px + var(--fs-add-ui)); font-weight: 700; cursor: pointer; } .lock-bio-btn:hover { background: #fdecec; } .lock-pw-form { display: flex; gap: 8px; } .lock-pw-form .pw-wrap { flex: 1; min-width: 0; } /* 👁 토글 래퍼가 남은 폭 차지 (대표 지시 2026-06-02) */ .lock-pw-form input { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; background: #f9fafb; font-size: calc(14px + var(--fs-add-ui)); outline: none; } .lock-pw-form input:focus { border-color: var(--accent); background: #fff; } .lock-pw-form button { flex-shrink: 0; border: 0; background: var(--accent); color: #fff; border-radius: 10px; padding: 11px 16px; font-size: calc(14px + var(--fs-add-ui)); font-weight: 700; cursor: pointer; } .lock-err { margin-top: 12px; font-size: calc(12.5px + var(--fs-add-ui)); color: #b91c1c; } .lock-logout { margin-top: 16px; background: transparent; border: 0; color: #9ca3af; font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; text-decoration: underline; } body.lk-locked { overflow: hidden; } .req-head { display: flex; gap: 8px; align-items: flex-start; } .req-title { font-weight: 700; font-size: calc(14.5px + var(--fs-add-ui)); flex: 1; } .req-status { font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; padding: 2px 9px; border-radius: 999px; flex-shrink: 0; } .req-status-open { background: #dbeafe; color: #1e40af; } .req-status-in_progress { background: #fef3c7; color: #92400e; } .req-status-done { background: #dcfce7; color: #166534; } .req-status-cancelled { background: #fee2e2; color: #991b1b; } .req-status-on_hold { background: #ede9fe; color: #5b21b6; } .req-priority-high { background: var(--danger); color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; } /* 요청 상세 — 쓴 그대로(줄바꿈 유지). 웹 기본은 줄바꿈을 공백 한 칸으로 뭉갠다. (v681 · 이한중 팀장 불편신고 "입력시 작성한 줄바꿈이 반영되지 않아 가독성이 떨어집니다") */ .req-desc { color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } /* ✅ 처리 결과 — 완료하며 남긴 내용. 전에는 대화방으로 흘러가 카드에서 되돌아볼 수 없었다 (v681) */ .req-result { margin-top: 2px; padding: 8px 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 3px solid #22c55e; border-radius: 8px; } .req-result-head { font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 700; color: #15803d; margin-bottom: 4px; } .req-result-row { display: flex; gap: 8px; align-items: baseline; } .req-result-row + .req-result-row { margin-top: 5px; padding-top: 5px; border-top: 1px dashed #bbf7d0; } .req-result-who { flex-shrink: 0; font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 700; color: #166534; } .req-result-msg { flex: 1; min-width: 0; font-size: calc(13px + var(--fs-add-ui)); line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; /* 처리 결과도 쓴 그대로 */ } /* 폰 = 세로 쌓기(이름 위·내용은 전체 폭) — 카드 공통 규정 */ @media (max-width: 600px) { .req-result-row { flex-direction: column; gap: 2px; } } /* ✅ 처리 결과 입력창 — 브라우저 기본 한 줄 창(prompt) 대체. 여러 줄로 쓸 수 있어야 한다 (v681) */ #reqDoneDialog .modal-content { max-width: 560px; } .req-done-target { margin: 0 0 10px; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; color: var(--text); overflow-wrap: anywhere; } .req-done-target:empty { display: none; } #reqDoneMessage { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; background: #f9fafb; font-family: inherit; font-size: calc(14px + var(--fs-add-ui)); line-height: 1.55; outline: none; } #reqDoneMessage:focus { border-color: var(--accent); background: #fff; } #reqDoneOk { background: var(--accent); color: #fff; } #reqDoneOk:hover { background: #8B1F23; } #reqDoneCancel { background: var(--bg); color: var(--text); } .req-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); } .req-meta .req-due-soon-text { color: #d97706; font-weight: 700; } .req-meta .req-overdue-text { color: var(--danger); font-weight: 700; } /* 담당자 개인상태·읽음 표식 — 보낸 사람이 '읽음(확인)' 여부 확인용 (대표 지시 2026-06-08) */ .asg-mark { font-size: 0.86em; vertical-align: middle; } .asg-mark.unseen { opacity: 0.38; font-weight: 700; } /* 안 읽음 = 흐린 점 */ .asg-mark.seen { opacity: 0.95; } /* 읽음 = 👀 */ .req-actions { display: flex; gap: 6px; flex-wrap: wrap; } .req-action-btn { padding: 5px 10px; border-radius: 6px; font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 600; background: var(--bg); color: var(--text); transition: background .15s; } .req-action-btn:hover { background: #e5e7eb; } .req-action-btn.primary { background: var(--accent); color: #fff; } .req-action-btn.primary:hover { background: #8B1F23; } .requests-actions { padding: 12px 20px; border-top: 1px solid var(--border); } .primary-btn { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 600; transition: background .15s; } .primary-btn:hover { background: #8B1F23; } .secondary-btn { background: var(--bg); color: var(--text); padding: 10px 20px; border-radius: 8px; font-weight: 600; transition: all .15s; border: 1px solid var(--border); } .secondary-btn:hover { background: #fee2e2; color: var(--danger); border-color: var(--danger); } /* ---- Leave room options ---- */ .leave-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .leave-option { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: all .15s; text-align: left; } .leave-option:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .leave-option.export:hover { background: #FEF2F2; border-color: var(--accent); } .leave-option.just:hover { background: #fef2f2; border-color: var(--danger); } .leave-option-icon { font-size: calc(28px + var(--fs-add-ui)); flex-shrink: 0; } .leave-option-text { flex: 1; min-width: 0; } .leave-option-title { font-weight: 700; font-size: calc(14.5px + var(--fs-add-ui)); margin-bottom: 4px; } .leave-option-desc { font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text-soft); line-height: 1.45; } .requests-actions { display: flex; gap: 8px; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--border); } #newRequestForm textarea { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: #f9fafb; outline: none; font: inherit; resize: vertical; min-height: 60px; } #newRequestForm textarea:focus { background: #fff; border-color: var(--accent); } /* ---- Reactions ---- */ .reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; padding: 0 4px; } .msg.mine .reactions { justify-content: flex-end; } .rx-chip { font-size: calc(11.5px + var(--fs-add-ui)); padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: all .15s; } .rx-chip:hover { background: var(--accent-soft); border-color: var(--accent); } .rx-chip.mine { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; } /* 👍 반응 '누가 눌렀나' 팝업 — 길게누르기/우클릭 (대표 지시 2026-06-10) */ .rx-who-backdrop { position: fixed; inset: 0; z-index: 100020; background: transparent; } .rx-who-pop { position: fixed; z-index: 100021; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.22); padding: 9px 11px; max-width: min(280px, 86vw); } .rxw-head { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); font-weight: 700; margin-bottom: 6px; } .rxw-row { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; } .rxw-emoji { flex-shrink: 0; font-size: calc(15px + var(--fs-add-ui)); line-height: 1.3; } .rxw-names { color: var(--text); font-size: calc(12.5px + var(--fs-add-ui)); line-height: 1.35; word-break: break-word; } /* ---- Message context menu (long-press / right-click → request) ---- */ .msg .msg-action-bar { position: absolute; top: -28px; right: 0; background: var(--surface); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; display: none; gap: 2px; z-index: 10; } .msg { position: relative; } /* 💬 인용답장 왼쪽 스와이프 단축 — ↪ 아이콘이 밀면서 나타남 (대표 지시 2026-06-19) */ .messages .msg .swipe-reply-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .15s ease; font-size: 20px; line-height: 1; color: var(--brand, #A5282C); pointer-events: none; z-index: 1; } .messages .msg.swipe-dragging .swipe-reply-icon { opacity: .5; } .messages .msg.swipe-ready .swipe-reply-icon { opacity: 1; } .msg:hover .msg-action-bar { display: flex; } .msg-action-btn { font-size: calc(12px + var(--fs-add-ui)); padding: 4px 8px; border-radius: 4px; color: var(--text-soft); } .msg-action-btn:hover { background: var(--bg); color: var(--text); } /* ---- Dashboard ---- */ .dashboard-body { background: var(--bg); min-height: 100vh; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Color Emoji", sans-serif; } .dash-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .dash-head-left { display: flex; align-items: center; gap: 16px; } .dash-head h1 { margin: 0; font-size: calc(18px + var(--fs-add-ui)); font-weight: 700; } .back-to-chat { font-size: calc(13px + var(--fs-add-ui)); color: var(--accent); font-weight: 600; } .back-to-chat:hover { text-decoration: underline; } .dash-head-right { display: flex; gap: 12px; align-items: center; } .me-name-pill { display: inline-flex; gap: 6px; align-items: center; font-size: calc(13px + var(--fs-add-ui)); color: var(--text); padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--bg); } .logout-link { font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text-soft); padding: 5px 10px; border-radius: 6px; } .logout-link:hover { background: var(--bg); color: var(--text); } .dash-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 20px 24px; background: var(--surface); border-bottom: 1px solid var(--border); } .dash-stat { background: var(--bg); padding: 14px 18px; border-radius: 10px; text-align: center; } .dash-stat-num { font-size: calc(28px + var(--fs-add-ui)); font-weight: 800; color: var(--accent); line-height: 1; } .dash-stat-label { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 6px; } .dash-controls { display: flex; gap: 12px; padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; align-items: center; } .dash-controls input[type=search] { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; background: var(--bg); outline: none; font: inherit; } .dash-controls input[type=search]:focus { background: var(--surface); border-color: var(--accent); } .dash-filter-bar { display: flex; gap: 6px; } .dash-filter-bar .chip { padding: 6px 14px; border-radius: 999px; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft); background: var(--bg); transition: all .15s; } .dash-filter-bar .chip:hover { color: var(--text); } .dash-filter-bar .chip.active { background: var(--accent); color: #fff; } .dash-sort { font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); display: flex; gap: 6px; align-items: center; } .dash-sort select { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: var(--surface); outline: none; font: inherit; color: inherit; } .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 24px; } .dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; transition: all .15s; text-decoration: none; color: inherit; } .dash-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: var(--accent); } .dash-card.card-overdue { border-top: 4px solid var(--danger); } .dash-card.card-due-soon { border-top: 4px solid #d97706; } .dash-card-head { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .dash-card-name { font-weight: 700; font-size: calc(15.5px + var(--fs-add-ui)); line-height: 1.3; word-break: break-word; } .dash-card-stats { display: flex; gap: 10px; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); } .dash-card-stats .attn { background: #fef3c7; color: #92400e; padding: 1px 8px; border-radius: 4px; font-weight: 700; } .dash-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); margin-top: auto; padding-top: 4px; border-top: 1px dashed var(--border); } .dash-card-due { font-weight: 600; } .dash-card.card-overdue .dash-card-due { color: var(--danger); } .dash-card.card-due-soon .dash-card-due { color: #d97706; } @media (max-width: 720px) { /* 모바일: 상단 헤더 한 줄 정렬 — 글자 줄바꿈 깨짐 방지 (대표 지시 2026-05-25) */ .dash-head { padding: 10px 14px; gap: 10px; } .dash-head h1 { font-size: calc(15px + var(--fs-add-ui)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-head-left { gap: 10px; min-width: 0; } /* 제목 길면 … 으로 줄임 */ .dash-head-right { gap: 8px; flex-shrink: 0; } /* 우측 그룹은 줄이지 않음 */ .back-to-chat { white-space: nowrap; flex-shrink: 0; } .me-name-pill { white-space: nowrap; } .logout-link { white-space: nowrap; flex-shrink: 0; } .dash-controls { padding: 12px 16px; } .dash-grid { padding: 16px; grid-template-columns: 1fr; } } @media (max-width: 430px) { /* 아주 좁은 화면: 이름표는 아바타만 남기고 이름 텍스트 숨김 → 한 줄 유지 */ .me-name-pill { font-size: 0; gap: 0; padding: 2px; } .me-name-pill .avatar { font-size: calc(12px + var(--fs-add-ui)) !important; } } /* ---- Mention chip in messages ---- */ .bubble .mention { background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: 4px; font-weight: 600; } .bubble .mention.me { background: #fef3c7; color: #92400e; } /* ---- Mention autocomplete ---- */ .mention-popup { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 4px; max-height: 240px; overflow-y: auto; z-index: 10000; /* 스레드 패널(9990) 위로 — 스레드 작성칸 @멘션 팝업이 패널 뒤에 가려지던 문제 (대표 지시 2026-06-09) */ min-width: 220px; } .mention-popup .mention-row { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: calc(13.5px + var(--fs-add-ui)); } .mention-popup .mention-row:hover, .mention-popup .mention-row.active { background: var(--accent-soft); } /* ── 터치 기기(폰 + 태블릿) 공통 — 채팅 화면 페이지 스크롤 잠금 (대표 지시 2026-05-21) ── 키보드가 올라올 때 문서(body) 자체가 스크롤되면 입력창이 화면 밖으로 밀려 사라짐. 특히 태블릿(2단 레이아웃)은 폰 전용 블록(max-width:720px)에 안 걸려 body 잠금이 없었음 → 가로 모드에서 키보드 뜨면 입력창이 안 보이는 문제. body 를 viewport 에 고정하고 내부 영역(messages·room-list)만 스크롤되게 함. 데스크탑(pointer:fine)은 제외. ※ 단일화면 전환·fixed composer 등은 폰 전용 블록에서만 처리 (태블릿은 2단 유지). */ @media (pointer: coarse) { body.chat-body { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--vvh, 100dvh); overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } body.chat-body .chat-app { height: var(--vvh, 100dvh); overflow: hidden; } body.chat-body .chat-pane { min-height: 0; overflow: hidden; } body.chat-body .messages { overscroll-behavior-y: contain; } } /* ---- Mobile (터치 기기 전용 — pointer:coarse) ---- 주의: pointer:coarse 한정자 절대 제거 금지. 이 블록 안의 viewport-locked 레이아웃(position:fixed body / overflow:hidden / --vvh / fixed composer-area)은 폰의 화면 키보드 대응을 위한 것임. 데스크탑(마우스)에 적용되면 1) body.overflow:hidden 으로 스크롤바 안 생김 2) .chat-app.overflow:hidden 으로 콘텐츠 잘림 3) composer-area 가 viewport 에 떠다님 결과: pointer:fine(데스크탑) 의 min-size + scrollbar 동작과 충돌해 깨짐. */ @media (max-width: 720px) and (pointer: coarse) { .chat-app { grid-template-columns: 1fr; } #sidebarResizer { display: none; } /* 모바일은 단일 화면 — 분리선 드래그 없음 */ .sidebar { display: flex; } .chat-app.viewing-chat .sidebar { display: none; } .chat-app:not(.viewing-chat) .chat-pane { display: none; } .chat-head .back { display: grid; place-items: center; } .form-grid { grid-template-columns: 1fr; } .big-dialog { max-width: 100%; max-height: 95vh; width: 100vw; height: 95vh; border-radius: 0; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } /* 모바일 채팅 화면 레이아웃 — 헤더/입력창 항상 보이게 + 키보드 대응 */ /* JS 가 visualViewport 변경 시 --vvh 동적 갱신 */ /* 핵심: body 높이도 vvh 로 묶어야 키보드 열렸을 때 body 가 키보드 영역까지 안 늘어남 → 입력창이 키보드 바로 위에 딱 붙음 (Samsung Internet/일부 Android 흰 띠 방지) */ body.chat-body { overflow: hidden; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--vvh, 100dvh); /* iOS Safari overscroll(당겨서 새로고침) 차단 — 사용자가 채팅창 아래로 당기면 페이지가 새로고침되어 작성 중인 메시지 날아가는 사고 방지. */ overscroll-behavior: none; -webkit-overflow-scrolling: touch; /* iOS 매끄러운 스크롤 */ } /* messages 영역은 내부 스크롤은 허용하되 경계에서 외부로 전파 안 시킴 (iOS 바운스 효과 차단) */ .messages { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } /* viewport-fit=cover 사용으로 콘텐츠가 노치 영역까지 늘어남 → 좌우 safe-area padding 필수 */ /* 핵심: grid 단일 행 명시 (1fr) — 행 높이가 콘텐츠가 아닌 vvh 전체로 강제됨 → chat-pane 이 vvh 전체 채움 → 입력창이 vvh 최하단 = 키보드 바로 위 */ .chat-app { height: var(--vvh, 100dvh); width: 100%; overflow: hidden; grid-template-rows: 1fr; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .chat-pane { height: 100%; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; } /* 사이드바도 같은 처리 (모바일에선 chat-pane 만 보이지만 안전망) */ .sidebar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* 모바일에서 input 자동 zoom 차단 — 16px 이상이면 iOS 가 zoom 안 함 */ input, textarea, select { font-size: calc(16px + var(--fs-add-ui)) !important; } /* 채팅 헤더 — 모바일에서 화면 상단 sticky, 한 줄로 깔끔하게. 한 줄 4칸: ← | 제목 | 📌🧵🔍 | ⋮ (아이콘 3개를 ⋮ 왼쪽 같은 줄에, 대표 지시 2026-06-10) */ .chat-head { position: sticky; top: 0; z-index: 50; grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 4px 10px; /* 상하 여백 축소 8→4 — 대화창 공간 확보 (대표 지시 2026-07-02) */ gap: 6px; background: var(--surface, #fff); box-shadow: 0 1px 3px rgba(0,0,0,0.06); /* 노치 영역 회피 — chat-app 에 inset 적용했지만 sticky 라 한 번 더 */ padding-top: max(8px, env(safe-area-inset-top)); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); } .chat-head .back { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft, #FEF2F2); color: var(--accent, #A5282C); font-size: calc(22px + var(--fs-add-ui)); font-weight: 700; flex-shrink: 0; border: 0; } .chat-head .title-block { min-width: 0; flex: 1; } .chat-head .title { font-size: calc(13px + var(--fs-add)); font-weight: 600; } .chat-head .item-meta { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; margin-top: 2px; /* 모바일에선 한 줄로만, 넘치면 잘림 */ white-space: nowrap; text-overflow: ellipsis; font-size: calc(11px + var(--fs-add-ui)); } .chat-head .item-meta > * { font-size: 10px; padding: 1px 5px; flex-shrink: 0; } /* 모바일: 헤더 아이콘(AI·요청·스레드·검색 등)은 전부 ⋮ 더보기 메뉴로 → 헤더는 제목+메타 2줄로 정리, 제목 폭 최대. (대표 지시 2026-07-02: 3줄 되어 답답 → 아이콘은 ⋮ 메뉴에서 사용. 이전 '아이콘 헤더 직접노출'·2026-06-13 'AI 밖 노출' 결정 대체.) ⋮ 메뉴(head-more-menu)엔 요청·스레드·검색·AI요약 모두 있음. 데스크탑은 영향 없음(이 규칙은 모바일 @media 안). */ .chat-head .head-actions { display: none; } /* 모바일: 나가기는 더보기(⋮) 메뉴에서 처리 → 상단 나가기 버튼 숨김 (대표 지시 2026-05-20) */ .chat-head .head-leave { display: none !important; } .chat-head .head-more { display: grid !important; place-items: center; grid-row: 1; grid-column: 4; /* 한 줄 4칸의 마지막 — 아이콘 3개 오른쪽 (대표 지시 2026-06-10) */ width: 36px; height: 36px; font-size: calc(22px + var(--fs-add-ui)); background: transparent; border: 0; color: var(--text-soft); flex-shrink: 0; } /* ───── 휴대폰 최상단 아주 작은 브랜드 띠 — KNK 이음 + 슬로건 (대표 지시 2026-06-07) ───── 노치(safe-area-top)는 이 띠가 흡수 → 아래 chat-head 는 노치 추가 안 함(8px). */ .mobile-top-brand { display: flex; align-items: center; justify-content: space-between; gap: 5px; box-sizing: border-box; height: calc(16px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-left: max(9px, env(safe-area-inset-left)); padding-right: max(9px, env(safe-area-inset-right)); background: var(--surface); border-bottom: 1px solid var(--border); font-size: 9px; line-height: 1; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; user-select: none; pointer-events: none; } .mobile-top-brand .mtb-name { color: var(--accent); font-weight: 800; flex: 0 0 auto; } .mobile-top-brand .mtb-sep { color: var(--text-soft); opacity: .4; flex: 0 0 auto; } .mobile-top-brand .mtb-tag { color: var(--text-soft); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* 좌: KNK 이음+슬로건(왼쪽 정렬, 길면 …) / 우: Human & AI create the Best(오른쪽 정렬) (대표 지시 2026-06-07) */ .mobile-top-brand .mtb-left { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; flex: 1 1 auto; } .mobile-top-brand .mtb-right { flex: 0 0 auto; color: var(--text-soft); font-weight: 600; margin-left: 8px; white-space: nowrap; } /* 브랜드 띠(16px + 노치)만큼 앱 높이 축소 → 하단 안 잘림 */ body.chat-body .chat-app { height: calc(var(--vvh, 100dvh) - 16px - env(safe-area-inset-top, 0px)); } /* 노치는 위 브랜드 띠가 흡수 → 헤더는 8px 만 (중복 노치 방지) */ .chat-head { padding-top: 4px; } /* 상하 여백 축소 (대표 지시 2026-07-02) */ /* 더보기 메뉴 popup — 헤더 아래 우측. 브랜드 띠(16px) 만큼 더 내림 (56→72). 헤더=제목+메타 2줄(아이콘은 이 메뉴 안). */ .head-more-menu { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 72px); right: max(8px, env(safe-area-inset-right)); background: var(--surface); /* 다크 호환 — 흰색 하드코딩 제거 (대표 지시 2026-05-28) */ color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 60; min-width: 200px; max-width: calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))); display: flex; flex-direction: column; /* 항목 많은 방(프로젝트)에서 아래가 잘려 안 보이던 문제 — 화면 높이에 맞추고 넘치면 스크롤 (대표 제보 2026-06-18) */ max-height: calc(100vh - env(safe-area-inset-top, 0px) - 72px - env(safe-area-inset-bottom, 0px) - 14px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 72px - env(safe-area-inset-bottom, 0px) - 14px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .head-more-menu[hidden] { display: none; } .head-more-menu button { background: transparent; border: 0; padding: 12px 14px; text-align: left; font-size: calc(14px + var(--fs-add-ui)); cursor: pointer; border-radius: 8px; color: var(--text); /* 토큰화 — 다크에서 밝은 글자 자동 */ display: flex; align-items: center; gap: 8px; position: relative; flex-shrink: 0; /* flex 세로목록서 스크롤 대신 항목이 찌그러지는 것 방지 (대표 제보 2026-06-18) */ } .head-more-menu button:hover { background: var(--bubble-other); /* 다크에서도 적절히 보이도록 토큰화 */ } .head-more-menu .hmm-badge { margin-left: auto; background: #ef4444; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: calc(11px + var(--fs-add-ui)); font-weight: 600; } /* 백드롭 — 더보기 메뉴 열렸을 때 다른 영역 클릭 닫힘 */ .head-more-backdrop { position: fixed; inset: 0; background: transparent; z-index: 59; } .head-more-backdrop[hidden] { display: none; } /* messages — 헤더와 컴포저 사이 가용 공간 — flex:1 로 자동 채움 */ .messages { padding: 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: 8px; flex: 1; min-height: 0; overflow-y: auto; } /* ======================================================== 컴포저 영역 — position:fixed 로 viewport 하단 고정 JS 가 visualViewport 추적 → transform: translateY 로 키보드 위에 정확히 위치 이전 flex-shrink:0 방식은 Samsung/Android 일부 흰띠 문제 → 폐기 ======================================================== */ .composer-area { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface, #fff); /* JS 가 키보드 추적해서 translateY 설정 */ transform: translateY(0); /* 부드러운 키보드 추적 — 너무 길면 끊겨 보이므로 짧게 */ transition: transform 0.1s ease-out; /* 노치 좌우 여백 */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); /* 하단 노치(홈 인디케이터) 여백 — .composer 박스가 그 위에 뜨도록 */ padding-bottom: env(safe-area-inset-bottom); /* 상단 그림자로 메시지와 시각적 분리 */ box-shadow: 0 -1px 4px rgba(0,0,0,0.04); } /* 메시지 영역 — 고정된 composer-area 만큼 padding-bottom 확보 (JS 동적 갱신) */ .messages { padding-bottom: var(--composer-area-h, 100px) !important; } /* 토글바 + 입력창 — composer-area 안에 자연 배치 */ .composer-langbar { padding: 4px 8px; font-size: calc(11px + var(--fs-add-ui)); flex-shrink: 0; gap: 3px; } .composer-langbar .cl-chip { padding: 3px 7px; font-size: 10px; } /* 📱 1줄 압축(대표 지시 2026-07-02): OFF 칩 숨김(아무것도 안 켜면 OFF)·국기+K/V/U/C·내용접기, 한 줄 유지(넘치면 가로 스크롤) */ .composer-langbar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } /* 1줄 확정 — 뒤쪽 데스크탑 flex-wrap:wrap 이 같은 특이도로 이기던 것 !important 로 제압 (대표 지시 2026-07-02) */ .composer-langbar::-webkit-scrollbar { display: none; } .composer-langbar .cl-trlabel .cl-ai { display: none !important; } /* 모바일은 'AI' 배지 빼고 '번역'만 — 1줄 공간 확보 (대표 지시 2026-07-02) */ .composer-langbar .cl-chip[data-lang=""] { display: none; } /* ⚠ 이 파일은 모바일 @media 가 데스크탑 기본규칙보다 '먼저' 나와서, 뒤쪽 전역 .cl-*-mini{display:none} 이 같은 특이도로 이 규칙을 이겨버린다(내용접기·K/V/U/C 가 사라짐). → !important 로 모바일 표시를 확정. (대표 지시 2026-07-02) */ .cl-code-full, .cl-tv-full { display: none !important; } .cl-code-mini, .cl-tv-mini { display: inline !important; } /* 모바일: 언어 칩(OFF·KR·VN·US·CN)을 균등하게 늘려 가로폭을 꽉 채움 → 한쪽 쏠림 없이 균형 (대표 지시 2026-05-31) ('번역' 묶음 cl-trlabel 과 둘째 줄 뒤로(cl-row2 안)는 직접 자식이 아니라 영향 없음) */ /* 1열 압축 후: 언어칩은 '늘리기' 대신 '내용 크기'로 — 안 그러면 flex-grow + trview margin-left:auto 가 겹쳐 내용접기 버튼이 0폭으로 눌려 안 보임 (대표 지시 2026-07-02) */ .composer-langbar > .cl-chip { flex: 0 0 auto; text-align: center; padding-left: 5px; padding-right: 5px; } .composer-langbar .cl-pill { font-size: 9.5px; padding: 0; } .composer { display: flex; align-items: center !important; gap: 4px; /* gap 6 → 4 / 모바일은 좁아서 stretch 안 함 */ background: var(--surface); /* 다크 테마 호환 — 흰색 하드코딩 제거 (대표 지시 2026-05-28) */ color: var(--text); /* 자식 textarea 가 transparent + color:inherit 일 때 다크에서도 글자 보임 */ /* 전체를 하나의 텍스트박스처럼 — 직각 (대표 지시 2026-05-20) */ border: 1px solid var(--border); border-radius: 0; margin: 6px 8px; padding: 0; flex-shrink: 0; box-sizing: border-box; } /* 다크/세이지/크림/스카이 다 모바일 입력칸 글자 보이도록 명시 (대표 지시 2026-05-28) */ .composer textarea, .composer input { color: var(--text) !important; } .composer textarea::placeholder, .composer input::placeholder { color: var(--placeholder); /* PC와 동일 톤 — 전용 색 + opacity 1 (대표 지시 2026-06-17) */ opacity: 1; } /* 모바일 — 위 toolbar / 아래 textarea 가로 풀폭 */ .composer { flex-direction: column !important; align-items: stretch !important; } .composer .composer-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--border); /* 입력칸과 아이콘 줄 구분선 (옅은 회색) */ } .composer .composer-spacer { flex: 1 1 auto; } /* 첨부 버튼 — 모바일에서 사이즈 축소 (textarea 폭 확보) */ .composer .attach-btn { width: 36px; height: 36px; /* 40 → 36 */ flex-shrink: 0; flex-grow: 0; font-size: calc(17px + var(--fs-add-ui)); background: var(--bg) !important; color: var(--text-soft) !important; border-radius: 50%; padding: 0; display: grid; place-items: center; } .composer #msgInput, .composer input[type="text"], .composer input:not([type]), .composer textarea#msgInput { flex: 1 1 auto !important; min-width: 0; border: none; /* 자체 박스 제거 — 상위 박스 안에서 투명 */ border-radius: 0; padding: 8px 10px; background: transparent; outline: none; font-family: inherit; font-size: calc(14px + var(--fs-add)); /* Android Chrome + 글씨크기 조절 */ line-height: 1.35; resize: none; min-height: 58px; /* 휴대폰 초기 높이 2줄 (대표 지시 2026-05-20) — 더 입력하면 자동 확장 */ max-height: 180px; overflow-y: auto; box-sizing: border-box; } /* iOS Safari 자동 zoom-in 방지 — iOS 는 font-size 16px 미만 input 에 포커스 시 화면을 자동으로 확대함. iOS 만 매칭하는 @supports 트릭으로 16px 강제. */ @supports (-webkit-touch-callout: none) { .composer #msgInput, .composer input[type="text"], .composer input:not([type]), .composer textarea#msgInput { font-size: calc(16px + var(--fs-add)); /* iOS 줌 방지 16 + 글씨크기 조절 */ } } /* 전송 버튼 — 모바일은 32×32 원형 유지 (PC stretch 룰 override) */ .composer #sendBtn, .composer button[type="submit"] { flex-shrink: 0; flex-grow: 0; align-self: center !important; height: 32px !important; width: 32px !important; min-width: 32px !important; border-radius: 50% !important; padding: 0; background: var(--accent); color: #fff; font-size: 0; /* "전송" 텍스트 숨김 */ border-radius: 50%; display: grid; place-items: center; } .composer #sendBtn .send-icon, .composer button[type="submit"] .send-icon { display: block; transform: translateX(1px); flex-shrink: 0; } .composer #sendBtn:disabled, .composer button[type="submit"]:disabled { background: #D1D5DB; } /* attach 버튼도 textarea 와 같은 높이 (32) */ .composer .attach-btn { width: 32px; height: 32px; /* 36 → 32 */ font-size: calc(16px + var(--fs-add-ui)); } /* === 액션바 — 평소 숨김, 메시지 탭 시에만 표시 === */ .messages .msg .msg-action-bar { display: none; } .messages .msg.show-actions .msg-action-bar { display: flex; position: static; flex-basis: 100%; margin-top: 6px; box-shadow: none; padding: 4px; background: var(--accent-soft, #FEF2F2); border-radius: 10px; justify-content: flex-end; flex-wrap: wrap; gap: 6px; } .messages .msg.mine.show-actions .msg-action-bar { justify-content: flex-start; } /* 액션바 표시 중인 메시지 강조 */ .messages .msg.show-actions .bubble { box-shadow: 0 0 0 2px var(--accent, #A5282C); } /* 말풍선 텍스트 — 모바일 입력창(14px)과 동일 + 글씨크기 조절 (대표 지시 2026-05-20) */ .messages .msg .bubble { font-size: calc(14px + var(--fs-add)); } /* 메시지 줄 — 모바일에서 가로 공간이 좁아 wrap 안 하면 액션바/본문이 세로로 짜그러짐 */ .messages .msg { flex-wrap: wrap; /* 액션바를 다음 줄로 떨어뜨림 */ max-width: 92%; /* 데스크탑 80% 보다 넓게 */ } .messages .msg .body { flex: 1 1 calc(100% - 40px); /* 아바타(32px+gap) 제외한 나머지 모두 */ min-width: 0; } .messages .msg.mine .body { flex: 1 1 100%; /* mine 은 아바타 숨김 → 본문 폭 100% */ } /* 액션바 버튼 사이즈 (탭 시 표시되는 경우) */ .messages .msg .msg-action-btn, .messages .msg .star-btn { font-size: calc(14px + var(--fs-add-ui)); padding: 8px 12px; min-height: 36px; min-width: 36px; background: #fff; border-radius: 8px; color: var(--text); } /* 모바일 첨부 파일 카드 — PC 보다 더 콤팩트하게 (대표 지시 2026-06-05: 휴대폰에서 너무 큼). PC(위 기본값)는 그대로 유지 — 이 블록은 max-width:720px + 터치(coarse) 에서만 적용. */ .msg.file .bubble { flex-wrap: nowrap; /* 받기 버튼을 옆줄에 유지 → 카드가 세로로 커지지 않음 */ gap: 5px; padding: 4px 7px; max-width: 232px; /* 280 -> 232 더 좁게 */ } .msg.file .file-icon { width: 18px; height: 18px; /* 22 -> 18 */ font-size: calc(10.5px + var(--fs-add-ui)); } .msg.file .file-name { font-size: calc(10px + var(--fs-add-ui)); } /* 11 -> 10 */ .msg.file .file-size { font-size: calc(8.5px + var(--fs-add-ui)); } /* 9.5 -> 8.5 */ .msg.file .file-link { white-space: nowrap; /* 받기 글자 줄바꿈 방지 */ flex-shrink: 0; padding: 3px 8px; /* 4 9 -> 3 8 */ font-size: calc(9.5px + var(--fs-add-ui)); /* 10.5 -> 9.5 */ } /* 시간 영역 — 좁아도 가로 한 줄 유지 */ .msg .time { white-space: nowrap; flex-wrap: nowrap; } /* ack-row, reactions — 좁으면 wrap */ .msg .ack-row, .msg .reactions { flex-wrap: wrap; } } /* ============================================================ 업로드 진행률 토스트 (대용량 파일) ============================================================ */ .upload-progress { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; padding: 14px 20px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); min-width: 320px; max-width: 480px; z-index: 10000; font-size: calc(13px + var(--fs-add-ui)); } .upload-progress .up-name { font-weight: 500; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .upload-progress .up-track { background: #374151; height: 6px; border-radius: 3px; overflow: hidden; } .upload-progress .up-fill { background: #10b981; height: 100%; width: 0%; transition: width .15s ease; } .upload-progress .up-pct { margin-top: 6px; font-size: calc(11px + var(--fs-add-ui)); color: #9ca3af; } /* ✕ 취소 · 큰 파일 안내 — 5분 넘게 걸리는 전송을 사용자가 통제할 수 있게. (대표 승인 2026-07-28) ⚠ .up-hint 에는 display 를 주지 않는다 — 주면 [hidden] 이 안 먹어 안내가 항상 보인다. */ .upload-progress .up-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .upload-progress .up-head .up-name { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .upload-progress .up-cancel { flex: 0 0 auto; white-space: nowrap; background: transparent; color: #d1d5db; border: 1px solid #4b5563; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: calc(11px + var(--fs-add-ui)); } .upload-progress .up-cancel:hover { background: #374151; color: #fff; } .upload-progress .up-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid #374151; color: #fcd34d; font-size: calc(11px + var(--fs-add-ui)); line-height: 1.45; } /* ============================================================ 메시지 ack (전달확인) + 별표 (중요 결정) ============================================================ */ .msg .ack-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; align-items: center; } .ack-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: calc(11px + var(--fs-add-ui)); line-height: 1; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; color: var(--text-soft); transition: all .12s; } .ack-btn:hover { border-color: #10b981; color: #10b981; } .ack-btn.acked { background: #d1fae5; border-color: #10b981; color: #065f46; } .ack-count { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); } .ack-pending { color: #f59e0b; font-weight: 600; } .star-btn { display: inline-flex; align-items: center; padding: 3px 7px; font-size: calc(12px + var(--fs-add-ui)); line-height: 1; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; color: #d1d5db; transition: all .12s; } .star-btn:hover { color: #f59e0b; } .star-btn.starred { color: #f59e0b; } .msg.starred .bubble { border-left: 3px solid #f59e0b; } /* ============================================================ 파일 버전 배지 ============================================================ */ .ver-badge { display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 600; background: #e5e7eb; color: #4b5563; border-radius: 4px; margin-left: 4px; vertical-align: middle; } .ver-badge.latest { background: #dbeafe; color: #1e40af; } /* ============================================================ AI 번역 (Claude Haiku) — 메시지 아래 표시 + 언어 선택 popup ============================================================ */ .msg-translation { margin-top: 6px; padding: 8px 10px; background: #f0f9ff; border-left: 3px solid #0ea5e9; border-radius: 4px; /* 일반 메시지(.bubble) 와 동일한 크기 조정 — 텍스트 사이즈 1~5단계 모두 적용 (대표 지시 2026-05-27) */ font-size: calc(12px + var(--fs-add)); line-height: 1.45; color: #0c4a6e; } .msg-translation .tr-lang { display: inline-block; /* 언어 뱃지도 같이 키움 (작은 텍스트 베이스로) */ font-size: calc(10px + var(--fs-add)); font-weight: 600; background: #0ea5e9; color: #fff; padding: 1px 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } .msg.mine .msg-translation { background: #ecfdf5; border-left-color: #10b981; color: #064e3b; } .msg.mine .msg-translation .tr-lang { background: #10b981; } /* ─── 📄 사진 글자 읽기·번역(OCR) 패널 — 사진 아래 [원문]+[번역] (대표 지시 2026-06-17) ─── */ .msg-ocr { margin-top: 6px; max-width: min(100%, 560px); padding: 9px 11px 10px; background: #fffbeb; /* amber-50 — '문서/원문' 톤(번역 sky 와 구분) */ border: 1px solid #fcd34d; border-left: 3px solid #f59e0b; border-radius: 8px; font-size: calc(12px + var(--fs-add)); line-height: 1.5; color: #3f2d00; position: relative; } .msg-ocr .ocr-head { font-weight: 700; font-size: calc(11px + var(--fs-add)); color: #92400e; margin-bottom: 6px; padding-right: 18px; /* 닫기 버튼 자리 */ } /* 🌐 올린 사람이 방 전체에 공개한 이미지 글자 번역 표시 (대표 지시 2026-06-19) */ .msg-ocr .ocr-shared-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(21,128,61,0.12); color: #15803d; font-weight: 700; font-size: calc(9.5px + var(--fs-add)); vertical-align: middle; } .msg-ocr .ocr-close { position: absolute; top: 6px; right: 7px; width: 18px; height: 18px; line-height: 16px; text-align: center; border: none; background: transparent; cursor: pointer; font-size: 13px; color: #b45309; border-radius: 4px; } .msg-ocr .ocr-close:hover { background: rgba(180,83,9,0.12); } .msg-ocr .ocr-block + .ocr-block { margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(146,64,14,0.3); } .msg-ocr .ocr-label { display: inline-block; font-size: calc(9.5px + var(--fs-add)); font-weight: 700; background: #f59e0b; color: #fff; padding: 0 6px; border-radius: 3px; margin-bottom: 3px; } .msg-ocr .ocr-tr .ocr-label { background: #0ea5e9; } /* 번역 라벨은 sky */ .msg-ocr .ocr-text { white-space: pre-wrap; word-break: break-word; } .msg-ocr .ocr-note { margin-top: 6px; font-size: calc(10.5px + var(--fs-add)); color: #92400e; opacity: 0.85; } .msg-ocr .ocr-err { margin-top: 4px; color: #b91c1c; font-size: calc(11px + var(--fs-add)); } html[data-theme="dark"] .msg-ocr { background: #2a2415; border-color: #5a4a1a; border-left-color: #f59e0b; color: #f3e8c8; } html[data-theme="dark"] .msg-ocr .ocr-head { color: #fcd34d; } html[data-theme="dark"] .msg-ocr .ocr-block + .ocr-block { border-top-color: rgba(252,211,77,0.25); } /* ─── bubble 안 원문+번역 묶음 (대표 지시 2026-05-28 안 A) ─── */ /* 원문 + 번역이 같은 박스 안에 있어 구분선으로만 분리 → 같은 메시지임이 명확 2026-05-28 컴팩트화 — 빈 공백 큰 문제 수정 (white-space: pre-wrap 영향 차단) */ .bubble .bubble-orig { display: block; white-space: pre-wrap; /* 원문은 줄바꿈 보존 */ margin: 0; padding: 0; } .bubble .bubble-translation { display: flex; gap: 5px; align-items: baseline; margin: 4px 0 0; /* 원문과 4px 만 띄움 */ padding-top: 4px; border-top: 1px dashed rgba(0,0,0,0.15); /* 번역 영역은 pre-wrap 영향 받지 않게 normal — 우리가 직접 줄바꿈 관리 */ white-space: normal; font-size: inherit; line-height: 1.4; } .bubble .bubble-translation .tr-lang-chip { flex-shrink: 0; display: inline-block; font-size: calc(9.5px + var(--fs-add)); /* 10 → 9.5 (살짝 더 작게) */ font-weight: 700; background: rgba(14, 165, 233, 0.85); /* sky-500 — 번역 표시색 */ color: #fff; padding: 0px 5px; /* 1·6 → 0·5 (작게) */ border-radius: 3px; letter-spacing: 0.2px; line-height: 1.4; position: relative; top: 0.5px; } .bubble .bubble-translation .tr-text { flex: 1; min-width: 0; word-break: break-word; } /* 내 말풍선의 번역 — 녹색 톤 */ .msg.mine .bubble .bubble-translation { border-top-color: rgba(255,255,255,0.25); } .msg.mine .bubble .bubble-translation .tr-lang-chip { background: rgba(16, 185, 129, 0.95); } /* 번역문도 원문처럼 줄바꿈·불릿 정렬 유지 — 없으면 여러 줄 보고가 한 줄로 뭉침 (대표 지시 2026-06-08) */ .bubble .bubble-translation .tr-text, .msg-translation .tr-text { white-space: pre-wrap; } /* 다크 테마 — 점선 톤 보정 */ html[data-theme="dark"] .bubble .bubble-translation { border-top-color: rgba(255,255,255,0.18); } .translate-menu { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 9999; } .translate-menu .tm-title { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); padding: 4px 8px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .translate-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 4px; font-size: calc(13px + var(--fs-add-ui)); } .translate-menu button:hover { background: #f3f4f6; } .translate-menu .tm-disabled { padding: 12px; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); text-align: center; } /* ============================================================ 컴포저 자동 번역 토글바 (전송 시점 번역) ============================================================ */ .composer-langbar { display: flex; align-items: center; gap: 4px; padding: 5px 10px; background: #f9fafb; border-top: 1px solid var(--border); font-size: calc(12px + var(--fs-add-ui)); flex-wrap: wrap; } /* 스레드 작성기 번역칩 바 — composer-langbar 스타일 재사용, 패널 안에서 안 줄어들게 (대표 지시 2026-06-08) */ .thread-langbar { flex-shrink: 0; } .composer-langbar .cl-trlabel { /* 'AI' + '번역' 글자 한 묶음 — 텍스트만(배지 제거) (대표 지시 2026-06-13) */ display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; } /* 번역 라벨 'AI' — 연결=녹색 / 미연결=빨강, 깜빡 없음 (클릭 대상 아님) (대표 지시 2026-06-13) */ .composer-langbar .cl-trlabel .cl-ai { font-weight: 800; letter-spacing: .02em; } .composer-langbar .cl-trlabel .cl-ai.on { color: #15a34a; } .composer-langbar .cl-trlabel .cl-ai.off { color: #dc2626; } .composer-langbar .cl-label { color: var(--text-soft); font-weight: 500; margin: 0; white-space: nowrap; flex: 0 0 auto; } .composer-langbar .cl-chip { padding: 3px 8px; border: 1px solid var(--border); background: #fff; border-radius: 14px; font-size: calc(11px + var(--fs-add-ui)); cursor: pointer; line-height: 1.2; transition: all .12s; white-space: nowrap; flex: 0 0 auto; } .composer-langbar .cl-chip:hover { border-color: #6b7280; } .composer-langbar .cl-chip[data-active="1"] { background: #A5282C; color: #fff; border-color: #A5282C; font-weight: 600; } /* OFF chip 도 다른 언어 칩과 완전히 동일한 스타일 (대표 지시 2026-05-31) — 특별 강조 제거 */ .composer-langbar .cl-chip[data-lang="vi"][data-active="1"] { background: #dc2626; border-color: #dc2626; /* 베트남 국기 빨강 */ } .composer-langbar .cl-chip[data-lang="en"][data-active="1"] { background: #1e40af; border-color: #1e40af; /* 영국 파랑 */ } .composer-langbar .cl-chip[data-lang="ko"][data-active="1"] { background: #0f172a; border-color: #0f172a; } .composer-langbar .cl-chip[data-lang="zh"][data-active="1"] { background: #DE2910; border-color: #DE2910; /* 중국 국기 빨강 */ } /* 1줄 정리(대표 지시 2026-07-02): cl-row2 를 display:contents 로 → 힌트·내용보기·뒤로가 위 칩들과 같은 한 줄로 흐름(기존 2줄 배치 폐지). */ .composer-langbar .cl-row2 { display: contents; } .composer-langbar .cl-trview { margin-left: auto; } /* 한 줄에서 [내용보기][뒤로]를 우측으로 밀착 */ /* 데스크탑=전체 라벨(cl-code-full/cl-tv-full) / 모바일=축약(cl-code-mini/cl-tv-mini) — 모바일 @media 에서 전환 */ .cl-code-mini, .cl-tv-mini { display: none; } /* "자동 번역 ON ..." 안내 — 연한 파랑 알약(info 톤), 둘째 줄 왼쪽 (대표 지시 2026-05-31) */ .composer-langbar .cl-hint { flex: 0 1 auto; min-width: 0; display: flex; justify-content: flex-start; margin: 0; padding: 0; background: transparent; border: 0; } .composer-langbar .cl-hint:empty { display: none; } /* 비어있으면 공간 차지 X */ .composer-langbar .cl-pill { /* 박스 없이 글씨만 — 작게·왼쪽·AI 시작점과 정렬 (대표 지시 2026-05-31) */ display: inline-block; max-width: 100%; background: transparent; border: 0; padding: 0; border-radius: 0; color: #1d4ed8; font-size: 10px; font-weight: 600; line-height: 1.3; text-align: left; } /* 입력 중 가까이서 누르는 뒤로가기 — chip 줄 오른쪽 끝 (대표 지시 2026-05-23) */ .composer-langbar .cl-back { border-color: #A5282C; color: #A5282C; font-weight: 700; } .composer-langbar .cl-back:hover { background: #fdecec; border-color: #A5282C; } /* 🌐 번역 보기 토글 — 언어 칩(강한 빨강)과 구분되는 '부드러운' 회색톤 (대표 지시 2026-06-09 "너무 강렬") */ .composer-langbar .cl-trview { background: #eef1f5; color: #4b5563; border-color: #d1d5db; font-weight: 500; } .composer-langbar .cl-trview:hover { background: #e2e6ec; border-color: #9aa3af; } html[data-theme="dark"] .composer-langbar .cl-trview { background: #2a313a; color: #cbd5e1; border-color: #3b4350; } html[data-theme="dark"] .composer-langbar .cl-trview:hover { background: #333b45; border-color: #55606e; } /* 📥 공유 대상 — '어느 방에 공유할까요?' 방 선택 모달 (대표 지시 2026-06-09) */ .share-picker-modal { position: fixed; inset: 0; z-index: 100002; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; } .share-picker-box { background: var(--surface, #fff); color: var(--text); border-radius: 14px; width: 360px; max-width: 92vw; max-height: 72vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.32); } .share-picker-head { padding: 14px 16px; font-weight: 700; font-size: calc(15px + var(--fs-add-ui)); border-bottom: 1px solid var(--border); } .share-picker-sum { padding: 8px 16px; color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); word-break: break-all; } .share-picker-list { overflow-y: auto; padding: 4px 8px 8px; } .share-picker-list .share-room-row { display: block; width: 100%; text-align: left; padding: 11px 12px; border: 0; background: none; cursor: pointer; border-radius: 8px; font-size: calc(14px + var(--fs-add-ui)); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .share-picker-list .share-room-row:hover { background: var(--accent-soft, #f3f4f6); } .share-picker-empty { padding: 16px; color: var(--text-soft); } .share-picker-foot { padding: 10px 16px; border-top: 1px solid var(--border); text-align: right; } .share-picker-foot .share-picker-cancel { padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--text); cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); } /* 📎 첨부 메뉴 — 카메라/사진(앨범)/동영상/파일 (대표 지시 2026-06-10) */ .attach-menu-backdrop { position: fixed; inset: 0; z-index: 100001; background: transparent; } .attach-menu { position: fixed; z-index: 100002; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 6px; min-width: 210px; max-width: 86vw; display: flex; flex-direction: column; gap: 2px; } .attach-menu .attach-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 12px; border: 0; background: none; cursor: pointer; border-radius: 9px; font-size: calc(14px + var(--fs-add-ui)); color: var(--text); } .attach-menu .attach-menu-item:hover { background: var(--accent-soft, #f3f4f6); } .attach-menu .am-ico { font-size: calc(18px + var(--fs-add-ui)); width: 26px; text-align: center; flex-shrink: 0; } /* 📁 내 파일함 (카톡 톡서랍식 개인 파일 보관함) — 주고받은 파일 모아보고 현재 방으로 재전송 (대표 지시 2026-06-10) */ .mf-backdrop { position: fixed; inset: 0; z-index: 100010; background: rgba(0,0,0,0.42); } .mf-backdrop[hidden] { display: none; } .mf-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 24px)); height: min(640px, calc(100vh - 80px)); background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,0.30); z-index: 100011; display: flex; flex-direction: column; overflow: hidden; } .mf-panel[hidden] { display: none; } .mf-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .mf-title { font-size: calc(15px + var(--fs-add-ui)); font-weight: 800; color: var(--text); } .mf-close { background: none; border: 0; font-size: 18px; color: var(--text-soft); cursor: pointer; padding: 2px 8px; border-radius: 8px; line-height: 1; } .mf-close:hover { background: var(--bg); color: var(--text); } .mf-tabs { display: flex; gap: 4px; padding: 8px 12px 0; flex-shrink: 0; border-bottom: 1px solid var(--border); } .mf-tab { flex: 1 1 0; padding: 9px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; } .mf-tab.active { color: var(--accent, #A5282C); border-bottom-color: var(--accent, #A5282C); font-weight: 800; } .mf-body { flex: 1; overflow-y: auto; padding: 12px; } .mf-body-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; } .mf-body-doc { display: flex; flex-direction: column; gap: 2px; } .mf-item { border: 0; background: transparent; cursor: pointer; padding: 0; font-family: inherit; } .mf-media { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--bg); } .mf-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mf-media:hover { outline: 2px solid var(--accent, #A5282C); outline-offset: -2px; } .mf-vbadge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.5); color: #fff; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; } .mf-mroom { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 6px 4px; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: #fff; font-size: calc(10px + var(--fs-add-ui)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .mf-doc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border-radius: 10px; text-align: left; } .mf-doc:hover { background: var(--bg); } .mf-dico { font-size: 22px; flex-shrink: 0; width: 28px; text-align: center; } .mf-dinfo { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mf-dname { font-size: calc(13.5px + var(--fs-add-ui)); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mf-dmeta { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mf-foot { flex-shrink: 0; padding: 8px 12px; border-top: 1px solid var(--border); text-align: center; } .mf-foot:has(.mf-more[hidden]) { display: none; } .mf-more { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 7px 18px; font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text); cursor: pointer; } .mf-more:hover { background: var(--surface); border-color: var(--accent, #A5282C); color: var(--accent, #A5282C); } .mf-loading, .mf-empty { grid-column: 1 / -1; text-align: center; color: var(--text-soft); padding: 34px 12px; font-size: calc(13px + var(--fs-add-ui)); } /* 👤 연락처 카드 — 채팅에 표시되는 받은 연락처 (카톡식, 대표 지시 2026-06-22) */ .msg .bubble.contact-card { display: flex; flex-direction: column; gap: 9px; min-width: 210px; max-width: 290px; padding: 12px 13px; } .cc-main { display: flex; align-items: center; gap: 11px; } .cc-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent, #A5282C); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; } .cc-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cc-name { font-size: calc(14.5px + var(--fs-add-ui)); font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-sub { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-phone { font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-actions { display: flex; gap: 6px; border-top: 1px solid var(--border); padding-top: 9px; } .cc-btn { flex: 1 1 0; text-align: center; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text); font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 700; cursor: pointer; text-decoration: none; } .cc-btn:hover { border-color: var(--accent, #A5282C); color: var(--accent, #A5282C); } .cc-call { background: var(--accent, #A5282C); color: #fff; border-color: var(--accent, #A5282C); } .cc-call:hover { color: #fff; opacity: .92; } /* 📋 제작요청 카드 — WORKS 통보를 양식 카드로 (대표 지시 2026-06-23). 다크/색테마 변수 사용 */ .msg .bubble.wc-card { padding: 0; overflow: hidden; min-width: 280px; max-width: 460px; border: 1px solid var(--border); border-radius: 12px; } .wc-head { background: var(--accent, #A5282C); color: #fff; padding: 9px 12px; font-weight: 800; font-size: calc(13px + var(--fs-add-ui)); line-height: 1.35; word-break: break-word; } .wc-body { padding: 11px 12px; font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text); } /* v565+ (대표 지시): 제작요청 카드 = 스펙시트 표(배치·항목 통일) — 관리번호·수주번호·사업부 / 모델명(넓게) / 장비명(넓게) / 고객사·납품일·수량 */ .wc-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; } .wc-tbl col.wc-cl { width: 58px; } .wc-tbl col.wc-cr { width: 66px; } .wc-tbl td { border: 1px solid var(--border); padding: 5px 8px; font-size: calc(12px + var(--fs-add-ui)); word-break: break-word; } .wc-tk { background: var(--bg); color: var(--text-soft); font-weight: 600; font-size: calc(11px + var(--fs-add-ui)); white-space: nowrap; } .wc-tv { color: var(--text); font-weight: 700; } .wc-tr { text-align: center; white-space: nowrap; } .wc-biz { display: inline-block; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 800; color: #6d28d9; background: #f3e8ff; border: 1px solid #ddd6fe; border-radius: 6px; padding: 1px 6px; } /* 카드 사업부별 색상 — 왼쪽 띠 + 사업부 뱃지 톤 (WORKS 목록 카드와 동일 팔레트). 대표 지시 2026-07-10 */ .msg .bubble.wc-card.wc-biz-T { border-left: 4px solid #2563eb; } .wc-biz-T .wc-biz { color:#1e40af; background:#dbeafe; border-color:#93c5fd; } .msg .bubble.wc-card.wc-biz-M { border-left: 4px solid #7c3aed; } .wc-biz-M .wc-biz { color:#5b21b6; background:#ede9fe; border-color:#c4b5fd; } .msg .bubble.wc-card.wc-biz-L { border-left: 4px solid #e11d48; } .wc-biz-L .wc-biz { color:#9f1239; background:#ffe4e6; border-color:#fda4af; } .msg .bubble.wc-card.wc-biz-E { border-left: 4px solid #64748b; } .wc-biz-E .wc-biz { color:#334155; background:#f1f5f9; border-color:#cbd5e1; } .msg .bubble.wc-card.wc-biz-C { border-left: 4px solid #d97706; } .wc-biz-C .wc-biz { color:#92400e; background:#fef3c7; border-color:#fcd34d; } .msg .bubble.wc-card.wc-biz-R { border-left: 4px solid #15803d; } .wc-biz-R .wc-biz { color:#166534; background:#dcfce7; border-color:#86efac; } .wc-po { display: inline-block; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 800; color: #1d4ed8; background: #e0edff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 1px 6px; } .wc-st { display: inline-block; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 800; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; padding: 1px 6px; } .wc-qty { color: var(--text); font-weight: 800; } /* v570: 휴대폰 전용 하단 칩줄 — PC(넓은 화면)에선 숨김(표 오른쪽 배지칸 사용). 휴대폰(≤560px 미디어쿼리)서만 flex 표시. */ .wc-chips-m { display: none; } .wc-qty-m { display: inline-block; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 800; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; } .wc-meta { color: var(--text-soft); margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--border); } .wc-row { display: flex; gap: 10px; margin: 3px 0; } .wc-k { color: var(--text-soft); min-width: 62px; flex: none; } .wc-v { color: var(--text); min-width: 0; word-break: break-word; } .wc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 9px 0; } .wc-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; } .wc-chip i { color: var(--text-soft); font-style: normal; } .wc-sec { color: var(--text-soft); margin: 9px 0 3px; font-weight: 600; } .wc-mono { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; word-break: break-all; font-size: calc(11.5px + var(--fs-add-ui)); } .wc-pre { white-space: pre-wrap; line-height: 1.6; } .wc-foot { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .wc-foot span { color: var(--text-soft); font-size: calc(11.5px + var(--fs-add-ui)); } .wc-foot a { color: var(--accent, #A5282C); font-weight: 700; text-decoration: none; white-space: nowrap; } /* 📋 수정발행 구분 (대표 지시 2026-07-07 z868): '수정발행' 뱃지 + 이전 발행분 흑백·클릭 불가 */ .wc-badge-rev { display: inline-block; margin-left: 7px; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 800; color: var(--accent, #A5282C); background: #fff; border-radius: 6px; padding: 1px 7px; vertical-align: middle; letter-spacing: .2px; box-shadow: 0 1px 2px rgba(0,0,0,.15); } .wc-badge-old { display: inline-block; margin-left: 7px; font-size: calc(10px + var(--fs-add-ui)); font-weight: 800; color: #fff; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.55); border-radius: 6px; padding: 1px 7px; vertical-align: middle; } .wc-old-note { color: var(--text-soft); font-size: calc(11px + var(--fs-add-ui)); font-style: italic; } /* 🔧 수정 사항 요약 (수정발행 카드 하단·자동 감지 z869) */ .wc-revnote { margin-top: 9px; padding: 7px 10px; background: #fff7ed; border: 1px solid #fed7aa; border-left: 3px solid #ea580c; border-radius: 8px; color: #9a3412; font-size: calc(11.5px + var(--fs-add-ui)); font-weight: 700; line-height: 1.5; word-break: break-word; } :root[data-theme="dark"] .wc-revnote { background: rgba(234,88,12,.14); border-color: rgba(234,88,12,.45); color: #fdba74; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wc-revnote { background: rgba(234,88,12,.14); border-color: rgba(234,88,12,.45); color: #fdba74; } } /* 🔗 회의 카드 화상회의(줌) 참여 버튼 (대표 지시 2026-07-07) */ .mi-zoom { display: inline-block; background: #2563eb; color: #fff; font-weight: 700; font-size: calc(12.5px + var(--fs-add-ui)); padding: 5px 12px; border-radius: 8px; text-decoration: none; } .mi-zoom:hover { opacity: .92; color: #fff; } /* 이전 발행분(수정발행으로 대체됨) — 카드 전체 흑백 + 반투명 + 링크 클릭 불가('이건 사용 안 함' 느낌) */ .msg.works-card.wc-superseded .bubble.wc-card { filter: grayscale(1); opacity: .5; } .msg.works-card.wc-superseded .wc-works-open { pointer-events: none; opacity: .5; } /* 📱 휴대폰 — 제작요청 카드 (대표 지시 2026-07-04): 좁은 칸에 값이 세로로 뭉개지던 문제 (말풍선 80% 제한 + 봇 아바타 자리 → 카드 ~230px, 표 5칸 고정폭 182px에 값 2쌍을 밀어넣어 값칸 ~25px). 해결 = ①정보 카드라 80% 제한 해제(넓게) ②표를 '한 줄에 한 항목'(라벨 왼쪽·값 오른쪽 전체폭)으로 세로 스택. PC(넓은 화면 >560px)는 지금 스펙시트 표 그대로 — 무변경. */ @media (max-width: 560px) { .messages .msg.works-card { max-width: 96%; } /* 대화 말풍선 80% 제한 해제 — 카드는 정보용이라 넓게 */ .wc-tbl, .wc-tbl tbody { display: block; } .wc-tbl colgroup { display: none; } /* 고정폭 col(58/58/66px) 무시 */ .wc-tbl tr { display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 6px; } .wc-tbl td { border: 0; border-bottom: 1px solid var(--border); } .wc-tbl tr td:nth-last-child(2), .wc-tbl tr td:nth-last-child(3) { border-bottom: 0; } /* 마지막 '보이는' 줄(숨긴 배지칸 앞의 라벨+값) 아래줄 제거 — 배지칸 display:none 이라 nth-last-child 로 계산 */ .wc-tbl .wc-tk { flex: 0 0 76px; } /* 라벨 — 왼쪽 좁게(관리번호·수주번호…) */ .wc-tbl .wc-tv { flex: 1 1 60%; min-width: 60%; } /* 값 — 나머지 전체폭 차지 → 다음 라벨/값 쌍은 자동으로 다음 줄로(세로 스택) */ .wc-tbl .wc-tr { display: none; } /* v570: 표 오른쪽 배지칸 숨김 — 아래 칩줄(wc-chips-m)로 이동 */ .wc-chips-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); } /* 색칩(사업부·발주유형·상태·수량) 한 줄에 모아 오른쪽 정렬 */ } /* 👤 연락처 보내기 피커 — mf-panel(고정/탭) 재사용 + 섹션 보강 (대표 지시 2026-06-22) */ .cs-panel .cs-sec { flex: 1; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .cs-panel .cs-sec[hidden] { display: none; } .cs-search { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: calc(13.5px + var(--fs-add-ui)); background: var(--bg); color: var(--text); flex-shrink: 0; } .cs-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .cs-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; background: transparent; border-radius: 10px; text-align: left; cursor: pointer; font-family: inherit; } .cs-row:hover { background: var(--bg); } .cs-av { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 700; } .cs-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cs-nm { font-size: calc(13.5px + var(--fs-add-ui)); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-sub, .cs-ph { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-empty { text-align: center; color: var(--text-soft); padding: 30px 12px; font-size: calc(13px + var(--fs-add-ui)); } .cs-hint { color: var(--text-soft); font-size: calc(12.5px + var(--fs-add-ui)); margin: 4px 2px; line-height: 1.5; } .cs-pickbtn, .cs-sendbtn { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--accent, #A5282C); background: var(--accent, #A5282C); color: #fff; font-size: calc(13.5px + var(--fs-add-ui)); font-weight: 700; cursor: pointer; } .cs-pickbtn:hover, .cs-sendbtn:hover { opacity: .92; } .cs-fl { display: flex; flex-direction: column; gap: 4px; font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text-soft); } .cs-fl input { padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: calc(13.5px + var(--fs-add-ui)); background: var(--bg); color: var(--text); } /* 🏭 제작 시작 (대표 전용 미리보기) — 사업부(창 맨 위) + 기본 할 일(참여자 아래) (대표 지시 2026-06-12) */ #hubBizSec { margin: 2px 0 7px; padding: 5px 8px 6px; border: 1px dashed var(--accent, #A5282C); border-radius: 10px; background: var(--accent-soft, #FEF2F2); } #hubBizSec .hub-sec-label { margin: 0 0 4px; color: var(--accent, #A5282C); } #hubTasksSec { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); } /* 제작 시작 칩으로 열었을 때 사업부 섹션 빨간 강조 1회 */ .hub-flash { animation: hubFlash 1.2s ease-out; } @keyframes hubFlash { 0% { box-shadow: 0 0 0 4px rgba(165, 40, 44, 0.55); } 100% { box-shadow: 0 0 0 0 rgba(165, 40, 44, 0); } } .hub-sec-label { font-size: calc(12px + var(--fs-add-ui)); font-weight: 700; color: var(--text-soft); margin: 8px 0 5px; } /* 사업부 3버튼 = 가로 3등분 꽉 채움 (좌우 균형, 대표 지시 2026-06-17) */ .hub-biz-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .hub-biz { padding: 7px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: calc(12.5px + var(--fs-add-ui)); cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hub-biz.active { background: var(--accent, #A5282C); border-color: var(--accent, #A5282C); color: #fff; font-weight: 700; } .hub-task-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 125px 26px; gap: 4px; margin-bottom: 4px; align-items: center; } .hub-task-row input, .hub-task-row select { min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; } .hub-task-row .ht-x { border: 0; background: none; color: var(--text-soft); cursor: pointer; font-size: 14px; padding: 2px; } .hub-task-row .ht-x:hover { color: var(--danger, #ef4444); } .hub-task-add { margin-top: 2px; padding: 6px 12px; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg); color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; } .hub-task-add:hover { color: var(--accent, #A5282C); border-color: var(--accent, #A5282C); } /* 🏭 라인(관리번호 여러 개) 입력행 (대표 지시 2026-06-17, A안 1단계) */ /* 라인 줄: 관리번호 · 장비명 · 모델명 · 납기 · ✕ (대표 지시 2026-06-17) */ .hub-line-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) 152px 26px; gap: 5px; margin-bottom: 5px; align-items: center; } /* 날짜 칸 122→152: '2026-06-30'+달력아이콘 잘림 방지 (대표 지시 2026-06-18) */ .hub-line-row input { min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; } .hub-line-row .hl-del { border: 0; background: none; color: var(--text-soft); cursor: pointer; font-size: 14px; padding: 2px; } .hub-line-row .hl-del:hover { color: var(--danger, #ef4444); } /* 좁은 화면(설치앱·폰): 그리드 대신 줄바꿈해 칸이 안 찌그러지게 */ @media (max-width: 640px) { .hub-line-row { display: flex; flex-wrap: wrap; gap: 6px; } .hub-line-row input { flex: 1 1 44%; } .hub-line-row .hl-del { flex: 0 0 auto; margin-left: auto; } } /* '🏭 제작 시작' 칩 — WORKS 버튼 옆, 대표 전용 미리보기 (대표 지시 2026-06-12) */ /* 🟣 대표 전용 미리보기(테스트) 칩 — 보라색으로 '나만 보이는 것'임을 표시 (대표 지시 2026-06-14) */ .hub-start-chip { display: inline-flex !important; align-items: center; justify-content: center; gap: 0; width: auto !important; height: auto !important; flex: 0 0 auto; padding: 3px 4px; margin-right: 1px; cursor: pointer; white-space: nowrap; border: 1px dashed #a855f7; border-radius: 7px !important; background: #f5edff; color: #7c3aed; font-weight: 800; font-size: calc(15px + var(--fs-add-ui)); } .hub-start-chip:hover { background: #7c3aed !important; color: #fff; } .hub-start-chip[hidden] { display: none !important; } /* 텍스트 라벨 제거 → '아이콘만'(절반 크기 칩). 아이콘은 칩 글자크기 그대로 보이게 (대표 지시 2026-06-14) */ .hub-start-chip .hub-chip-ico { font-size: 1em; line-height: 1; } /* 📁 프로젝트 자료함 — 고객사 > 프로젝트 > 종류 트리 (대표 전용 미리보기) (대표 지시 2026-06-12) */ .hubf-total { color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); margin-bottom: 6px; } #hubFilesBody details, #roomFilesBody details { margin: 2px 0; } #hubFilesBody summary, #roomFilesBody summary { cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: calc(13px + var(--fs-add-ui)); user-select: none; } #hubFilesBody summary:hover, #roomFilesBody summary:hover { background: var(--surface); } .hubf-cust > summary { font-weight: 800; background: var(--bg); border: 1px solid var(--border); } .hubf-proj { margin-left: 14px !important; } .hubf-proj > summary { font-weight: 700; } .hubf-cat { margin-left: 28px !important; } .hubf-cat > summary { font-weight: 600; color: var(--text-soft); } .hubf-n { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 4px; border-radius: 999px; background: var(--accent-soft, #FEF2F2); color: var(--accent, #A5282C); font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; text-align: center; } .hubf-file { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-left: 42px; padding: 5px 8px; border-radius: 7px; text-decoration: none; color: var(--text); font-size: calc(13px + var(--fs-add-ui)); } .hubf-file:hover { background: var(--accent-soft, #FEF2F2); } .hubf-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hubf-fmeta { flex: 0 0 auto; color: var(--text-soft); font-size: calc(11px + var(--fs-add-ui)); white-space: nowrap; } /* 고객사 초대 — 대분류(고객사/협력사) 칩 (대표 지시 2026-06-12) */ .gi-kind-btn { flex: 1 1 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; } .gi-kind-btn.active { background: var(--accent, #A5282C); border-color: var(--accent, #A5282C); color: #fff; font-weight: 800; } .gi-kind-btn[data-kind="partner"].active { background: #2563eb; border-color: #2563eb; } /* 협력사 선택 = 파랑 (대표 지시 2026-06-12) */ .gi-kind-apply { flex: 0 0 auto; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface); color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; white-space: nowrap; } .gi-kind-apply:hover { color: var(--accent, #A5282C); border-color: var(--accent, #A5282C); } @media (max-width: 600px) { .hub-task-row { grid-template-columns: minmax(0, 1fr) 96px 116px 24px; } } /* 스티커 그룹 탭 (동물 / 오피스 …) (대표 지시 2026-06-10) */ .sticker-picker .sp-tabs { display: flex; gap: 6px; padding: 6px 10px 4px; flex-wrap: wrap; flex-shrink: 0; } .sticker-picker .sp-tab { padding: 5px 13px; border: 1px solid var(--border); background: var(--surface, #fff); border-radius: 14px; font-size: calc(12px + var(--fs-add-ui)); line-height: 1.2; cursor: pointer; color: var(--text-soft); white-space: nowrap; } .sticker-picker .sp-tab:hover { border-color: #9aa3af; } .sticker-picker .sp-tab.active { background: #A5282C; color: #fff; border-color: #A5282C; font-weight: 700; } html[data-theme="dark"] .sticker-picker .sp-tab { background: #262c34; border-color: #3a4350; } html[data-theme="dark"] .sticker-picker .sp-tab.active { background: #A5282C; border-color: #A5282C; color: #fff; } /* 컴포저 자체에 모드별 보더색 — 사용자가 잊지 않도록 시각적 안전망 */ .composer.tr-vi { border-top: 2px solid #dc2626; } .composer.tr-en { border-top: 2px solid #1e40af; } .composer.tr-ko { border-top: 2px solid #0f172a; } /* ============================================================ PWA 설치 안내 배너 (login 페이지 하단) ============================================================ */ .pwa-install { margin-top: 18px; padding: 12px 14px; background: #FEF2F2; border: 1px solid #bfdbfe; border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: calc(12px + var(--fs-add-ui)); color: #6B1015; position: relative; } .pwa-install-icon { font-size: calc(22px + var(--fs-add-ui)); flex-shrink: 0; } .pwa-install-body { flex: 1; min-width: 0; } .pwa-install-title { font-weight: 600; font-size: calc(13px + var(--fs-add-ui)); margin-bottom: 2px; } .pwa-install-desc { font-size: calc(11.5px + var(--fs-add-ui)); color: #3730a3; line-height: 1.4; } .pwa-install button { font-size: calc(12px + var(--fs-add-ui)); padding: 6px 12px; background: #A5282C; color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; flex-shrink: 0; } .pwa-install button:hover { background: #8B1F23; } .pwa-install .pwa-close { background: transparent; color: #6b7280; padding: 4px 8px; font-size: calc(16px + var(--fs-add-ui)); font-weight: 400; } .pwa-install .pwa-close:hover { background: transparent; color: #111; } /* ============================================================ 방 설정 다이얼로그 — 이름·별명·멤버 권한 관리 ============================================================ */ .rs-section { margin: 16px 0; } .rs-section h4 { font-size: calc(14px + var(--fs-add-ui)); font-weight: 600; margin: 0 0 8px; color: var(--text); } .rs-readonly { font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); padding: 6px 0; } .rs-readonly b { color: var(--text); } .rs-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* 이름 입력 + 저장버튼 한 줄 */ .rs-name-row { display: flex; gap: 6px; align-items: center; width: 100%; margin-bottom: 4px; } .rs-name-row input[type="text"] { flex: 1 1 0; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: calc(14px + var(--fs-add-ui)); outline: none; } .rs-name-row input[type="text"]:focus { border-color: var(--accent); } /* 아이콘 사진 행 */ .rs-avatar-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* 인라인 힌트 (아이콘 행 안에서) */ .rs-hint-inline { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 0; flex-shrink: 1; } /* 저장·올리기 버튼 — flex 환경에서 고정 크기 */ .rs-save-btn { flex-shrink: 0; white-space: nowrap; padding: 7px 12px !important; } /* userInfoDialog 안에서는 rs-form 이 flex-direction:column 이라 flex:1 1 200px 의 200px 가 세로 크기로 적용되는 버그 해결 — input/select 의 세로 크기 자연스럽게 (대표 지시 2026-05-19) */ /* 단, checkbox/radio 는 제외 (체크박스가 100% 너비로 커지는 부작용 방지) */ #userInfoDialog .rs-form input:not([type="checkbox"]):not([type="radio"]), #userInfoDialog .rs-form select, #userInfoDialog .rs-form textarea, #newUserDialog .rs-form input:not([type="checkbox"]):not([type="radio"]), #newUserDialog .rs-form select, #newUserDialog .rs-form textarea { flex: 0 0 auto; width: 100%; box-sizing: border-box; } #userInfoDialog .rs-form input[type="checkbox"], #userInfoDialog .rs-form input[type="radio"], #newUserDialog .rs-form input[type="checkbox"], #newUserDialog .rs-form input[type="radio"] { width: auto; flex: 0 0 auto; } .rs-form input[type="text"] { flex: 1 1 200px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: calc(14px + var(--fs-add-ui)); outline: none; } .rs-form input[type="text"]:focus { border-color: var(--accent); } .rs-checkbox { display: flex; align-items: center; gap: 6px; font-size: calc(13px + var(--fs-add-ui)); color: var(--text-soft); cursor: pointer; flex-basis: 100%; } .rs-hint { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 6px; } .primary-btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 500; cursor: pointer; } .primary-btn:hover { background: #8B1F23; } /* (2026-05-28 토큰화) — 다크 테마에서 흰색 배경으로 글자가 안 보이던 두 번째 정의 수정 */ .secondary-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: calc(13px + var(--fs-add-ui)); cursor: pointer; } .secondary-btn:hover { background: var(--bg); } /* 🧠 AI 요약 — 범위 선택 영역 (대표 지시 2026-05-31) 고정 격자(라벨 1칸 + 동일 너비 버튼 3칸) → 선택해도 위치 안 바뀜 + 양쪽 균형 */ .ai-range-hint { font-size: calc(11px + var(--fs-add-ui)); color: var(--text); font-weight: 600; margin: 2px 0 5px; line-height: 1.35; } .ai-range-hint span { color: var(--text-soft); font-weight: 400; } #aiSummaryRangeBar { /* 기간 6버튼 — 라벨 + 균등 칩 (대표 지시 2026-06-13: 개수 제거·기간 확장) */ display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0 0 6px; } #aiSummaryRangeBar .ai-range-btn { flex: 1 1 auto; min-width: 64px; } /* 기간선택(custom) 행 — 날짜+시간 from~to */ #aiCustomRange { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; } #aiCustomRange .ai-custom-dt { flex: 1 1 150px; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: calc(12px + var(--fs-add-ui)); } #aiCustomRange .ai-dt-date { flex: 1 1 110px; cursor: pointer; } /* KNK 표준 달력 입력(클릭 시 달력) */ #aiCustomRange .ai-dt-time { flex: 0 0 auto; min-width: 84px; width: auto; } #aiCustomRange .secondary-btn { padding: 5px 14px; flex: 0 0 auto; } .ai-range-rowlabel { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); font-weight: 700; white-space: nowrap; padding-right: 2px; text-align: right; } .ai-range-btn { padding: 3px 6px; /* 높이 더 축소 — 요약 본문 넓게 (대표 지시 2026-06-13) */ font-size: calc(11.5px + var(--fs-add-ui)); text-align: center; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .ai-range-btn.active, .ai-range-btn.active:hover { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; box-shadow: 0 1px 4px rgba(165,40,44,0.35); } /* 🤖 AI 도우미 작업 바 — flex-wrap 으로 칩이 안 잘리고 못 들어가면 다음 줄로 (대표 지시 2026-06-13: 칩 잘림 수정) */ #aiActionBar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0 0 6px; } #aiActionBar .ai-range-rowlabel { flex: 0 0 auto; text-align: left; padding-right: 2px; } .ai-act-btn { flex: 1 1 auto; min-width: 84px; padding: 4px 7px; /* 높이 더 축소 — 요약 본문 넓게 (대표 지시 2026-06-13) */ font-size: calc(11.5px + var(--fs-add-ui)); text-align: center; white-space: nowrap; cursor: pointer; border: 1px solid var(--accent, #A5282C); border-radius: 8px; background: var(--accent-soft, #FEF2F2); color: var(--accent, #A5282C); font-weight: 700; transition: background .12s, color .12s; } .ai-act-btn:hover { background: var(--accent, #A5282C); color: #fff; } #aiQaRow { display: flex; gap: 5px; margin: 0 0 6px; } #aiQaRow #aiQaInput { flex: 1 1 auto; min-width: 0; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: calc(12.5px + var(--fs-add-ui)); } #aiQaRow #aiQaSend { flex: 0 0 auto; padding: 5px 12px; } /* 📋 내 양식 — 사용자 정의 요약 양식 선택·관리 줄 (대표 지시 2026-07-13) */ #aiTplRow { margin: 0 0 6px; } #aiTplRow .ai-tpl-pick { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; } #aiTplRow #aiTplSelect { flex: 1 1 160px; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); font-size: calc(12.5px + var(--fs-add-ui)); } #aiTplRow #aiTplRun { flex: 0 0 auto; padding: 5px 12px; } #aiTplEditPanel { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; } #aiTplEditPanel #aiTplName { padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: calc(12.5px + var(--fs-add-ui)); } #aiTplEditPanel #aiTplInstr { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: calc(12.5px + var(--fs-add-ui)); line-height: 1.5; resize: vertical; font-family: inherit; } #aiTplEditPanel .ai-tpl-edit-actions { display: flex; gap: 6px; justify-content: flex-end; } /* 📋 업무보고 줄 — 작업 칩과 동일, 점선 테두리로 '게시(side-effect)' 구분 (대표 지시 2026-06-13) */ #aiReportBar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0 0 4px; padding-top: 6px; border-top: 1px dashed var(--border); } #aiReportBar .ai-range-rowlabel { flex: 0 0 auto; text-align: left; padding-right: 2px; } .ai-report-btn { border-style: dashed; } /* 🔔 자동 보고 토글 — 켜짐이면 채워서 'ON' 느낌 (대표 지시 2026-06-13) */ .ai-autoreport-btn.active { background: var(--accent, #A5282C); color: #fff; border-style: solid; } /* ⚙ 발송 설정 패널 — 방별 자동 보고 시각·요일 (대표 지시 2026-07-13) */ #aiRepCfgPanel { display: flex; flex-direction: column; gap: 7px; margin: 0 0 6px; padding: 9px 11px; border: 1px dashed var(--border); border-radius: 9px; background: var(--bg); } #aiRepCfgPanel[hidden] { display: none !important; } /* hidden 이 display:flex 에 덮이는 함정 방지 */ #aiRepCfgPanel .ai-repcfg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } #aiRepCfgPanel .ai-repcfg-label { flex: 0 0 auto; font-weight: 700; font-size: calc(12px + var(--fs-add-ui)); } #aiRepCfgPanel .ai-repcfg-sel { padding: 4px 7px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font-size: calc(12px + var(--fs-add-ui)); } #aiRepCfgPanel .ai-repcfg-days { display: inline-flex; flex-wrap: wrap; gap: 3px 7px; align-items: center; } #aiRepCfgPanel .ai-repcfg-day { display: inline-flex; align-items: center; gap: 2px; font-size: calc(11.5px + var(--fs-add-ui)); cursor: pointer; white-space: nowrap; } #aiRepCfgPanel .ai-repcfg-chk { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; } #aiRepCfgPanel .ai-repcfg-hint { font-size: calc(10.5px + var(--fs-add-ui)); color: var(--text-soft); line-height: 1.5; } #aiRepCfgPanel .ai-repcfg-actions { display: flex; gap: 6px; justify-content: flex-end; } /* 🔼 요약 옵션 접기/펼치기 토글 — 접으면 범위/도우미/보고 바 숨겨 정리 내용 영역 확대 (대표 지시 2026-06-13) */ .ai-opts-toggle { /* 제목줄(h3) 오른쪽 끝에 작게 — margin-left:auto 로 우측 정렬 (대표 지시 2026-06-13) */ margin-left: auto; flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text-soft); border-radius: 7px; padding: 3px 9px; font-size: calc(11px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; } .ai-opts-toggle:hover { border-color: var(--accent); color: var(--accent); } #aiOptsCaret { font-size: calc(10px + var(--fs-add-ui)); } #aiSummaryDialog.opts-collapsed .ai-range-hint, #aiSummaryDialog.opts-collapsed #aiSummaryRangeBar, #aiSummaryDialog.opts-collapsed #aiActionBar, #aiSummaryDialog.opts-collapsed #aiQaRow, #aiSummaryDialog.opts-collapsed #aiReportBar, #aiSummaryDialog.opts-collapsed #aiRepCfgPanel, #aiSummaryDialog.opts-collapsed #aiCustomRange { display: none !important; } /* 요약창 본문은 고정 높이(인라인 style) — 길어도 창이 안 커지고 박스 안에서만 스크롤 */ .rs-member-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; } /* ── 멤버 책갈피(탭): 고객사 / 우리직원 (대표 지시 2026-05-31) ── */ .rs-mtabs { display: flex; gap: 6px; margin-bottom: 8px; } .rs-mtab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text-soft); font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; line-height: 1; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .rs-mtab:hover { background: var(--surface); } .rs-mtab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .rs-mtab-n { font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 999px; background: var(--border); color: var(--text-soft); } .rs-mtab.active .rs-mtab-n { background: rgba(255,255,255,.28); color: #fff; } .rs-mgroup { display: flex; flex-direction: column; gap: 6px; } .rs-mgroup-empty { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); text-align: center; padding: 16px 8px; } /* ── 멤버 행: 이름·버튼 한 줄 배치 (2026-05-28 토큰화) ── */ .rs-member { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: var(--surface); color: var(--text); } .rs-member:hover { background: var(--bg); } /* info 영역: 아바타 + 이름/메타/뱃지 → 남은 공간 모두 차지 */ .rs-member-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; } /* 멤버 접속 상태 — 멤버 초대 화면과 동일하게 행 오른쪽 '🟢 접속/⚫ 오프라인' 색 글자 (대표 지시 2026-06-18 '사진처럼') */ .rs-member-status { flex-shrink: 0; white-space: nowrap; font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; margin-left: 6px; align-self: center; } /* 이름·직급·부서·뱃지를 한 줄로 */ .rs-member-info > div { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; min-width: 0; flex: 1 1 0; } .rs-member-name { font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; color: var(--text); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-member-role { margin-top: 0; flex-shrink: 0; } .rs-me { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); font-weight: 400; } .rs-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; } .rs-host { background: #fee500; color: #3c1e1e; } .rs-sub { background: #dbeafe; color: #1e40af; } /* 멤버 메타 (직급 · 부서) */ .rs-member-meta { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); margin: 0; flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 게스트(외부) '대화방 표현' 입력칸 — 내 화면에서만 보일 개인 별칭 (대표 지시 2026-05-30) */ /* 접기식: 평소엔 입력 영역 숨김 → ✏️ 표현 누르면(.editing) 펼침. 참여자 많아도 안 길어짐. */ .rs-guest-member .rs-guest-alias, .rs-guest-member .rs-galias-hint { display: none; } .rs-guest-member.editing .rs-guest-alias { display: flex; } .rs-guest-member.editing .rs-galias-hint { display: block; } .rs-guest-member.editing .rs-galias-edit-btn { display: none; } /* 이름 옆 별칭 미리보기 (접힘 상태에서도 누구인지 표시) */ .rs-galias-preview { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--accent); font-weight: 600; white-space: nowrap; } .rs-guest-alias { display: flex; gap: 5px; align-items: center; margin-top: 5px; } .rs-galias-input { flex: 1; min-width: 0; font-size: calc(12px + var(--fs-add-ui)); padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); } .rs-galias-input::placeholder { color: var(--placeholder); opacity: 1; font-size: calc(11px + var(--fs-add-ui)); } .rs-galias-save { flex-shrink: 0; white-space: nowrap; } .rs-galias-hint { font-size: 10.5px; color: var(--text-soft); margin-top: 3px; line-height: 1.35; } /* 액션 버튼 영역: 이름과 같은 줄, 오른쪽 끝 */ .rs-member-actions { display: flex; flex-wrap: nowrap; gap: 4px; flex-shrink: 0; align-items: center; } .rs-act-btn { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; font-size: 10.5px; line-height: 1.3; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; } .rs-act-btn:hover { background: var(--accent-soft); border-color: var(--accent); } .rs-act-btn.rs-danger { color: #b91c1c; border-color: #fecaca; } .rs-act-btn.rs-danger:hover { background: #fee2e2; border-color: #f87171; } /* 좁은 화면: "제외" 텍스트 숨기고 아이콘만 표시 */ @media (max-width: 400px) { .rs-kick-txt { display: none; } .rs-act-btn { font-size: 10px; padding: 3px 5px; } } /* 🔁 방 종류 바꾸기 (방 설정) — 대표 지시 2026-06-17 */ .rs-convert-cur { font-size: calc(11px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft); } .rs-convert-types { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; } .rs-convert-type { flex: 1; min-width: 92px; text-align: center; padding: 9px 8px; border: 1.5px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; } .rs-convert-type:hover { border-color: var(--accent); } .rs-convert-type.active { background: var(--accent, #A5282C); border-color: var(--accent, #A5282C); color: #fff; } .rs-convert-fields { margin-top: 10px; padding: 10px 12px; background: var(--bg); border: 1px dashed var(--border); border-radius: 9px; } .rs-cf-label { display: block; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); font-weight: 600; margin-bottom: 4px; } .rs-convert-fields input[type="text"], .rs-convert-fields input[type="date"], .rs-convert-fields select { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: calc(13px + var(--fs-add-ui)); background: var(--surface); color: var(--text); } .rs-cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .rs-cf-grid label { display: flex; flex-direction: column; gap: 3px; font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); } #rsConvertBtn { background: var(--accent, #A5282C); color: #fff; border-color: var(--accent, #A5282C); padding: 8px 16px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; } #rsConvertBtn:disabled { opacity: .5; cursor: default; } @media (max-width: 480px) { .rs-cf-grid { grid-template-columns: 1fr; } } /* ─── 좁은 창(솔로 팝업·모바일 PWA·작은 데스크탑) — 가로 스크롤 방지 ─── */ @media (max-width: 480px) { /* 🔻 모든 팝업 = 바텀시트(하단 고정 · 내용만큼 위로 커짐 · 최대 92vh 후 내부 스크롤). (대표 지시 2026-06-13) · 전체화면 폼(#inviteDialog·#newRoomDialog)은 자체 !important 규칙으로 그대로 전체화면 · 라이트박스(.lightbox-modal)는 .modal-content 가 없고 display:block 이라 자동 면외 · AI 요약(#aiSummaryDialog)은 자체 ID 규칙으로 칩·높이 유지 */ .modal { padding: 0; align-items: flex-end; } .modal-content { padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 0; /* 팝업 규정①: 사각 — 휴대폰 아래붙임(시트)도 공통 (대표 규정 2026-07-17, v654) */ width: 100%; max-width: 100%; max-height: 92vh; } /* 음소거 토글 행 — 한 줄 강제 + 사이즈 축소 */ .rs-mute-row { gap: 6px !important; padding: 8px 10px !important; align-items: center !important; } .rs-mute-row > span:first-child { font-size: calc(18px + var(--fs-add-ui)) !important; } .rs-mute-row > div { min-width: 0 !important; flex: 1 !important; } .rs-mute-row > div > div:first-child { font-size: calc(12px + var(--fs-add-ui)) !important; } .rs-mute-row > div > div:last-child { font-size: 10.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-mute-row #rsMuteToggleBtn, .rs-mute-row .primary-btn { padding: 5px 8px !important; font-size: calc(11px + var(--fs-add-ui)) !important; white-space: nowrap; flex-shrink: 0; } /* 방 이름 입력·저장 */ .rs-form { gap: 6px; } .rs-form input, .rs-form select, .rs-form textarea { min-width: 0; max-width: 100%; box-sizing: border-box; } /* 멤버 행 — 한 줄 유지, 버튼만 소형화 */ .rs-act-btn { font-size: 10px; padding: 3px 6px; } /* 라디오 선택 카드 (초대 권한·자동삭제) — 좌우 여백 줄임 */ .rs-checkbox { padding: 6px 8px !important; gap: 6px !important; } .rs-checkbox > span > div:first-child { font-size: calc(12px + var(--fs-add-ui)) !important; } .rs-checkbox > span > div:nth-child(2) { font-size: 10.5px !important; } /* 상태 옵션 카드 (내 상태 다이얼로그) — 컴팩트 1줄 카드라 모바일에서도 2열 유지 (대표 지시 2026-05-21) */ #statusOptionsArea { grid-template-columns: 1fr 1fr !important; } /* dialog actions — 버튼 wrap. 취소/저장 글자 20px 로 (대표 지시 2026-05-22) */ .dialog-actions { flex-wrap: wrap; gap: 8px; } .dialog-actions button { font-size: calc(20px + var(--fs-add-ui)); padding: 10px 22px; } /* ─── 🤖 AI 요약 팝업 — 휴대폰: 바텀시트(아래 고정 · 내용 길수록 위로 커짐) (대표 지시 2026-06-13) ─── */ #aiSummaryDialog { padding: 0; } /* 데스크탑 좌상단 고정(flex-start)을 휴대폰선 하단 고정으로 덮어씀 */ #aiSummaryDialog.open { align-items: flex-end; justify-content: center; } #aiSummaryDialog .modal-content { width: 100%; max-width: 100%; height: auto; max-height: 88vh; min-height: 0; /* 내용만큼 커지다 88vh 에서 멈추고 본문 스크롤 */ border-radius: 0; resize: none; /* 팝업 규정①: 사각 (대표 규정 2026-07-17, v654) */ padding: 12px 12px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0,0,0,0.28); } #aiSummaryDialog #aiSummaryBody { flex: 1 1 auto !important; min-height: 84px !important; } /* 칩 크기 통일 — 도우미·업무보고: 라벨 한 줄 + 칩 2개씩 균등, 🔔자동보고는 한 줄 전체 */ #aiSummaryDialog #aiActionBar, #aiSummaryDialog #aiReportBar { gap: 5px; } #aiSummaryDialog #aiActionBar > .ai-range-rowlabel, #aiSummaryDialog #aiReportBar > .ai-range-rowlabel { flex: 1 1 100%; margin: 0 0 1px; } #aiSummaryDialog .ai-act-btn { flex: 1 1 calc(50% - 3px); min-width: 0; } #aiSummaryDialog #aiAutoReportBtn { flex: 1 1 100%; } #aiSummaryDialog #aiSummaryRangeBar { gap: 4px; } } /* 매우 좁은 창 (솔로 팝업 306px) — 추가 축소 */ @media (max-width: 360px) { .modal { padding: 0; } .modal-content { padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)); } .rs-section { margin: 12px 0; } .rs-section h4 { font-size: calc(13px + var(--fs-add-ui)); } .rs-mute-row > div > div:last-child { display: none; } /* 부가 설명 숨김 */ .rs-act-btn { font-size: 10px; padding: 3px 6px; } } /* ───── 메신저 데스크탑(마우스 환경) 레이아웃 ───── 2026-05-19 대표 지시: 이전 zoom 0.72 축소 → zoom 1 로 변경. 단독창(solo-window)도 zoom 1 이라 두 창 시각 크기 완전 일치. */ @media (pointer: fine) { body.chat-body, body.login-body, body.dashboard-body { zoom: 1; } /* 메신저 레이아웃: 입력창 항상 보임 + 내부 영역만 스크롤 세로 — 페이지 전체는 스크롤 안 됨. 메시지/방 목록 안쪽만 스크롤. 입력창 항상 하단 고정. 가로 — 최소 가로폭 470px 보장, 그보다 좁으면 가로 스크롤바. */ body.chat-body { height: 100dvh; overflow-x: auto; overflow-y: hidden; } body.chat-body .chat-app { height: 100dvh; min-width: 470px; } /* 로그인 레이아웃은 base(.login-body)에서 통일 처리. 데스크탑은 동적 높이만. */ body.login-body, body.dashboard-body { min-height: 100dvh; } /* solo-window 분리창 — zoom 보호 룰 유지 (미래 zoom 재적용 대비) + 좁은 창 min-width 해제 */ body.chat-body.solo-window { zoom: 1 !important; height: 100dvh !important; overflow: hidden !important; } body.chat-body.solo-window .chat-app { height: 100dvh !important; min-width: 0 !important; width: 100% !important; } } /* ============================================================ 다크 테마 — 흰색(#fff)·밝은 회색(#f9fafb) 하드코딩 박스 일괄 보정 (대표 지시 2026-05-29: "블랙테마 전체적으로 꼼꼼하게") ▸ 입력창·편집박스·팝업패널이 다크에서 밝게 튀어 글씨가 안 보이던 문제 해결. ▸ 모든 규칙은 html[data-theme="dark"] 스코프 → 다른 테마(밝음/세이지/크림/스카이) 영향 없음. ============================================================ */ /* 1) 모든 입력칸(input/textarea/select) base + focus → surface + 밝은 글씨. 흰색(#fff)·밝은 회색(#f9fafb) 하드코딩, focus 시 흰색 번쩍임을 한 번에 차단. 개별 클래스를 나열하지 않고 포괄 처리 → 빠지는 곳 없음. */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { background: var(--surface); color: var(--text); } /* 체크박스·라디오는 네이티브 표시 유지 (배경 칠하지 않음) */ html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { background: revert; } /* 담당자 검색칸 — 속성+클래스 조합이라 우선순위가 높아 위 규칙을 못 잡음 → 명시 보정 */ html[data-theme="dark"] .assignee-picker input[type="text"], html[data-theme="dark"] .assignee-picker input[type="text"]:focus { background: var(--surface); color: var(--text); } /* 컴포저(메시지 작성) 입력창만 예외 — 입력바와 한 몸이라 투명 유지 (base + focus) */ html[data-theme="dark"] .composer input, html[data-theme="dark"] .composer textarea, html[data-theme="dark"] .composer input:focus, html[data-theme="dark"] .composer textarea:focus { background: transparent; } /* 3) 팝업 패널(이모지·스티커·추천·관리번호 자동완성·담당자 드롭다운) → surface */ html[data-theme="dark"] .emoji-picker, html[data-theme="dark"] .emoji-suggest, html[data-theme="dark"] .sticker-picker, html[data-theme="dark"] .code-suggest, html[data-theme="dark"] .assignee-dropdown { background: var(--surface); } /* 공동담당 책갈피(탭) — 다크 보정 */ html[data-theme="dark"] .assignee-tab { background: var(--surface); color: var(--text-soft); } html[data-theme="dark"] .assignee-tab.active { background: var(--accent); color: #fff; } /* 4) 메모/메시지 인라인 편집박스 — 크림(#FEF3C7) → 어두운 앰버 톤, 글씨 보이게 */ html[data-theme="dark"] .msg-edit-area { background: #2a2620; border-color: #6b5326; } html[data-theme="dark"] .msg-edit-hint { color: #e8c980; } html[data-theme="dark"] .msg-edit-cancel { background: var(--surface); color: var(--text); border-color: var(--border); } /* 5) 언어 선택 버튼 — 흰 배경/짙은 글씨 → surface + 밝은 글씨 */ html[data-theme="dark"] .lang-btn { background: var(--surface); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .lang-btn:hover { border-color: #5a6573; } html[data-theme="dark"] .lang-btn.active { background: rgba(37,99,235,0.18); border-color: #60a5fa; color: #93c5fd; } /* 6) 요청 작성 textarea — ID 셀렉터(#f9fafb·focus #fff)라 위 catch-all을 못 잡음 → 명시 보정 */ html[data-theme="dark"] #newRequestForm textarea, html[data-theme="dark"] #newRequestForm textarea:focus { background: var(--surface); color: var(--text); } /* 7) 날짜·시간 입력의 달력 아이콘·팝업 — 다크에서 검정 아이콘이 안 보이던 문제. color-scheme:dark 로 네이티브 아이콘을 밝게, 팝업도 다크로. (대표 지시 2026-05-29) */ html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="week"] { color-scheme: dark; } /* ===== KNK 공용 달력(date picker) — HAIST WORKS 수주 달력 표준 복제 (대표 지시 2026-05-31) ===== 기본 를 .knk-date 텍스트 입력 + 이 팝업으로 교체. 색 표준 = 가이드 §8. */ input.knk-date { cursor: pointer; caret-color: transparent; } .knk-dp { position: fixed; z-index: 100100; width: 268px; padding: 9px; box-sizing: border-box; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 38px rgba(0,0,0,0.25); font-size: calc(12px + var(--fs-add-ui)); user-select: none; } .knk-dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; } .knk-dp-title { font-weight:800; font-size: calc(13.5px + var(--fs-add-ui)); color:var(--text); } .knk-dp-nav { width:30px; height:30px; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:7px; cursor:pointer; font-size: calc(17px + var(--fs-add-ui)); line-height:1; font-weight:800; padding:0; } .knk-dp-nav:hover { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); } .knk-dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .knk-dp-dow { text-align:center; font-size:10.5px; font-weight:800; color:var(--text-soft); padding:3px 0; } .knk-dp-dow.sun { color:#dc2626; } .knk-dp-dow.sat { color:#2563eb; } .knk-dp-day { position:relative; min-height:32px; display:flex; align-items:center; justify-content:center; font-size: calc(12.5px + var(--fs-add-ui)); font-weight:700; border-radius:7px; cursor:pointer; color:var(--text); background:transparent; } .knk-dp-day .n { line-height:1; } .knk-dp-day:hover { background:var(--accent-soft); } .knk-dp-day.sun { color:#dc2626; } .knk-dp-day.sat { color:#2563eb; } .knk-dp-day.out { visibility:hidden; pointer-events:none; } .knk-dp-day.disabled { opacity:0.3; pointer-events:none; text-decoration:line-through; } .knk-dp-day.today { box-shadow: inset 0 0 0 2px #d4a574; } /* 오늘 = 금색 ring */ .knk-dp-day.sel { background: var(--accent); color:#fff !important; } /* 선택 = KNK 빨강 채움 */ .knk-dp-day.sel:hover { background: var(--accent); } .knk-dp-day.sel.today { box-shadow: inset 0 0 0 2px #b91c1c; } .knk-dp-badge { position:absolute; top:2px; right:2px; display:flex; gap:1px; } .knk-dp-badge .b { width:11px; height:11px; line-height:11px; text-align:center; border-radius:3px; font-size:8px; font-weight:800; background:#dc2626; color:#fff; } .knk-dp-badge .b.vn { background:#fb923c; } .knk-dp-badge .b.alt { background:#fff; color:#dc2626; border:1px dashed #dc2626; line-height:9px; } .knk-dp-badge .b.alt.vn { color:#fb923c; border-color:#fb923c; } .knk-dp-foot { display:flex; justify-content:space-between; margin-top:8px; padding-top:7px; border-top:1px solid var(--border); } .knk-dp-foot button { padding:5px 14px; border-radius:7px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size: calc(11.5px + var(--fs-add-ui)); font-weight:700; cursor:pointer; } .knk-dp-clear:hover { background:#fee2e2; border-color:var(--danger); color:var(--danger); } .knk-dp-today:hover { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); } /* ===== AI 표식 — 원형 아바타 배지 (HAIST WORKS 표준 복제, 대표 지시 2026-05-31) ===== AI 동작/사용가능=파란 원, 미동작/불가=빨간 원. 흰 글씨 + 흰 테두리. 색 표준 = 가이드 §5 (변경 금지). */ .ai-avatar { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:#fff; color:#15a34a; font-weight:800; /* 원 안쪽 흰색 — 테두리·글씨는 상태색(on/off) (대표 지시 2026-06-13) */ font-size: calc(17px + var(--fs-add-ui)); letter-spacing:.03em; line-height:1; flex-shrink:0; border:3px solid #fff; box-sizing:border-box; /* 테두리 두껍게 (대표 지시 2026-06-13) */ text-decoration:none; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.20); transition:transform .12s ease, box-shadow .15s ease; } /* AI 연결 표시등 — 원(파랑)·테두리는 그대로, 'AI' 글씨 색만 상태로 + 계속 깜빡. 연결=녹색 / 미연결=빨강 (대표 지시 2026-06-13) */ /* 흰 원 + 상태색 테두리·글씨가 함께 깜빡 — 연결=녹색 / 미연결=빨강 (대표 지시 2026-06-13) */ /* 교차 깜빡 — 글씨가 밝으면 테두리는 흐리고, 반대로 번갈아(서로 교차) (대표 지시 2026-06-13) */ @keyframes aiBlinkOn { 0%, 100% { color:#15a34a; border-color: rgba(21,163,74,0.12); } 50% { color: rgba(21,163,74,0.12); border-color:#15a34a; } } @keyframes aiBlinkOff { 0%, 100% { color:#dc2626; border-color: rgba(220,38,38,0.12); } 50% { color: rgba(220,38,38,0.12); border-color:#dc2626; } } .ai-avatar.on { color:#15a34a; border-color:#15a34a; animation: aiBlinkOn 1.3s ease-in-out infinite; } /* 🟢 연결 — 흰 원 + 녹색 테두리·글씨 깜빡 */ .ai-avatar.off { color:#dc2626; border-color:#dc2626; animation: aiBlinkOff 1.3s ease-in-out infinite; } /* 🔴 미연결 — 흰 원 + 빨강 테두리·글씨 깜빡 */ /* 동작 최소화 선호(OS 설정) 시엔 깜빡임 끄고 색만 유지 (접근성) */ @media (prefers-reduced-motion: reduce) { .ai-avatar.on { animation: none; color:#15a34a; border-color:#15a34a; } .ai-avatar.off { animation: none; color:#dc2626; border-color:#dc2626; } } .ai-avatar:hover { transform:translateY(-1px); box-shadow:0 3px 9px rgba(0,0,0,.24); } /* 작은 변형(22px) — 헤더·목록·버튼 안 */ .ai-avatar.sm { width:25px; height:25px; font-size:10.4px; border-width:2px; box-shadow:0 1px 2px rgba(0,0,0,.16); } /* 헤더 배지 테두리 두껍게 (대표 지시 2026-06-13) */ /* 헤더 AI 아이콘 ~15% 확대 (22→25) (대표 지시 2026-06-13) */ /* 채팅방 헤더 AI 버튼의 배지만 +10% (25→27.5px) (대표 지시 2026-06-13) */ #aiSummaryBtn .ai-avatar.sm { width:27.5px; height:27.5px; font-size:11.4px; } /* (보조) 문장 속 'AI' 글자만 색칠하는 인라인형 */ .ai-mark { font-weight:800; letter-spacing:.02em; } .ai-mark.on { color:#2563eb; } .ai-mark.off { color:#dc2626; } /* ═══ 헤더: 아이콘만 노출(원래대로) + ⋮ 더보기 메뉴에 각 기능 '상세 설명' (대표 지시 2026-06-01) ═══ 휴대폰은 기존 그대로(아이콘줄 숨김 + ⋮ 메뉴). 컴퓨터는 아이콘 다 보이고 ⋮ 더보기로 설명 확인. ※ 헤더 버튼 글자 라벨(hb-lbl)은 사용 안 함 — 아이콘만. */ .hb-lbl { display: none !important; } /* 더보기 메뉴 항목 — 제목 + 상세 설명 (컴퓨터·휴대폰 공통) */ .head-more-menu .hmm-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .head-more-menu .hmm-t { font-weight: 600; } .head-more-menu .hmm-d { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 2px; line-height: 1.35; white-space: normal; } /* 메뉴가 화면보다 길면 스크롤되는데, 설치앱은 스크롤바가 자동 숨김이라 '스크롤 가능'을 모를 수 있음 → 항상 보이는 얇은 스크롤바 (대표 제보 2026-06-18) */ .head-more-menu::-webkit-scrollbar { width: 9px; } .head-more-menu::-webkit-scrollbar-thumb { background: var(--text-soft); border-radius: 9px; border: 2px solid var(--surface); } .head-more-menu::-webkit-scrollbar-track { background: transparent; } @media (pointer: fine), (min-width: 721px) { /* 나가기(🚪)는 ⋮ 더보기 메뉴에서 (설명과 함께). ⋮ 더보기를 우측 상단에 노출. */ .chat-head .head-leave { display: none !important; } .chat-head .head-more:not([hidden]) { display: inline-flex !important; align-items: center; justify-content: center; grid-row: 1; grid-column: 3; justify-self: end; align-self: center; width: auto; height: auto; padding: 5px 11px; border-radius: 14px; background: transparent; border: 1px solid var(--border); color: var(--text-soft); font-size: 0; /* ⋮ 글리프 숨김 → 아래 ⓘ + '설명' 으로 대체 (컴퓨터는 아이콘이 다 보이므로 '더보기'가 아니라 '설명') */ } .chat-head .head-more:not([hidden])::before { content: "ⓘ"; font-size: calc(15px + var(--fs-add-ui)); line-height: 1; } .chat-head .head-more:not([hidden])::after { content: "메뉴상세설명"; font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; margin-left: 4px; } /* 단독(분리)창: 예전엔 좁아서 '메뉴상세설명' 글자가 세로로 깨져 ⓘ만 남겼었는데, 진짜 원인은 solo head-btn 규칙(width:28px·font-size:15px, 약 line 1289)이 head-more 의 width:auto·font-size:0 을 덮어써서 ⋮ 글리프가 새어나오고(=ⓘ 옆 깨진 모양) 글자는 28px 폭에 갇혀 지워진 것이었음. → head-more 를 데스크탑처럼 내용폭(auto)·⋮숨김(font-size:0)·한 줄(nowrap)로 되돌려 'ⓘ 메뉴상세설명' 정상 표시 (대표 지시 2026-06-03) */ body.solo-window .chat-head .head-more:not([hidden]) { width: auto !important; height: auto !important; font-size: 0 !important; white-space: nowrap; } body.solo-window .chat-head .head-more:not([hidden])::after { content: "메뉴상세설명" !important; font-size: calc(11px + var(--fs-add-ui)) !important; margin-left: 4px !important; } /* 컴퓨터용 더보기 메뉴 위치/스타일 */ .head-more-menu { position: fixed; top: 116px; right: 24px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 60; min-width: 280px; max-width: 360px; display: flex; flex-direction: column; /* 항목 많은 방(프로젝트)에서 아래가 잘려 안 보이던 문제 — 화면에 맞추고 넘치면 스크롤 (대표 제보 2026-06-18) */ max-height: calc(100vh - 116px - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .head-more-menu[hidden] { display: none; } .head-more-menu button { background: transparent; border: 0; padding: 10px 14px; text-align: left; font-size: calc(13.5px + var(--fs-add-ui)); cursor: pointer; border-radius: 8px; color: var(--text); display: flex; align-items: center; gap: 8px; position: relative; flex-shrink: 0; /* flex 세로목록서 스크롤 대신 항목 찌그러짐 방지 (대표 제보 2026-06-18) */ } .head-more-menu button:hover { background: var(--bubble-other); } .head-more-menu .hmm-badge { margin-left: auto; align-self: center; flex-shrink: 0; background: #ef4444; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: calc(11px + var(--fs-add-ui)); font-weight: 600; } .head-more-backdrop { position: fixed; inset: 0; background: transparent; z-index: 59; } .head-more-backdrop[hidden] { display: none; } } /* ── 🐞 버그 신고 (전 직원 신고 폼 + 유지보수관리자 관리) — 대표 지시 2026-06-03 ── */ .bug-form { display: flex; flex-direction: column; gap: 6px; } .bug-label { font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; color: var(--text); margin-top: 6px; } .bug-label .bug-sub { font-weight: 400; color: var(--text-soft); font-size: calc(11px + var(--fs-add-ui)); } #bugTitle, #bugBody { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: calc(13px + var(--fs-add-ui)); font-family: inherit; } #bugBody { resize: vertical; min-height: 90px; line-height: 1.5; } #bugShot { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); } .bug-ctx-note { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); background: var(--bg); border: 1px dashed var(--border); border-radius: 7px; padding: 7px 10px; margin-top: 4px; line-height: 1.5; } .bug-actions { margin-top: 10px; } .bug-submit { width: 100%; padding: 11px 14px; border: none; border-radius: 9px; background: #A5282C; color: #fff; font-size: calc(14px + var(--fs-add-ui)); font-weight: 700; cursor: pointer; } .bug-submit:hover { filter: brightness(1.06); } .bug-submit:disabled { opacity: .6; cursor: default; } .bug-result { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; font-size: calc(12.5px + var(--fs-add-ui)); line-height: 1.5; } [data-theme="dark"] .bug-result { background: #064e3b; color: #d1fae5; border-color: #065f46; } /* 유지보수관리자 — 버그 관리 필터/카드 */ .bug-fl { padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; } .bug-fl.active { background: #A5282C; color: #fff; border-color: #A5282C; font-weight: 600; } .bug-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); } .bug-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bug-badge { color: #fff; font-size: calc(10.5px + var(--fs-add-ui)); font-weight: 700; padding: 2px 9px; border-radius: 999px; flex-shrink: 0; } .bug-card-title { font-size: calc(13.5px + var(--fs-add-ui)); color: var(--text); overflow-wrap: anywhere; } .bug-card-body { margin-top: 6px; font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; } .bug-card-meta { margin-top: 6px; font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); overflow-wrap: anywhere; } .bug-card-act { margin-top: 8px; display: flex; align-items: center; gap: 6px; } .bug-status-sel { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: calc(12px + var(--fs-add-ui)); } /* ── 📊 사용 현황 대시보드 (유지보수관리자 전용) — 대표 지시 2026-06-03 ── */ .u-cards { display: flex; gap: 8px; flex-wrap: wrap; } .u-card { flex: 1 1 90px; min-width: 90px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; background: var(--surface); } .u-card-hero { flex: 1 1 100%; } .u-card-lbl { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); } .u-card-big { font-size: calc(26px + var(--fs-add-ui)); font-weight: 800; color: var(--text); line-height: 1.1; margin-top: 2px; } .u-card-mid { font-size: calc(19px + var(--fs-add-ui)); font-weight: 700; color: var(--text); line-height: 1.15; margin-top: 2px; } .u-card-unit { font-size: calc(12px + var(--fs-add-ui)); font-weight: 500; color: var(--text-soft); } .u-card-sub { font-size: calc(11px + var(--fs-add-ui)); color: var(--text-soft); margin: 3px 0 5px; } .u-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; } .u-bar-fill { height: 100%; border-radius: 3px; transition: width .25s; } .u-h { font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; color: var(--text); margin: 10px 0 6px; } .u-empty { padding: 12px; text-align: center; color: var(--text-soft); font-size: calc(12px + var(--fs-add-ui)); } .u-feat, .u-dept { display: flex; align-items: center; gap: 8px; margin: 5px 0; } .u-feat-lbl { flex: 0 0 92px; font-size: calc(12px + var(--fs-add-ui)); color: var(--text); } .u-feat-bar, .u-dept-bar { flex: 1 1 auto; } .u-feat-cnt { flex: 0 0 auto; min-width: 48px; text-align: right; font-weight: 700; font-size: calc(12px + var(--fs-add-ui)); color: var(--text); } .u-dept-lbl { flex: 0 0 96px; font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-dept-cnt { flex: 0 0 auto; min-width: 78px; text-align: right; font-size: calc(11px + var(--fs-add-ui)); color: var(--text); } .u-details { margin-top: 12px; } .u-details > summary { cursor: pointer; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 600; color: var(--text); padding: 6px 0; } /* ── 👤 운영 담당자 지정 (대표님만) — 대표 지시 2026-06-03 ── */ .ops-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); } .ops-row:last-child { border-bottom: none; } .ops-info { flex: 1; min-width: 0; } .ops-info > b { font-size: calc(13px + var(--fs-add-ui)); color: var(--text); } .ops-meta { font-size: calc(10.5px + var(--fs-add-ui)); color: var(--text-soft); margin-top: 1px; } .ops-owner { font-size: 10px; background: #1f2937; color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: 4px; } .ops-on { font-size: 10px; background: #10b981; color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: 4px; } .ops-toggle { flex-shrink: 0; padding: 5px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; } .ops-toggle.on { background: var(--surface); color: #dc2626; border-color: #dc2626; } .ops-toggle:not(.on) { background: #A5282C; color: #fff; border-color: #A5282C; } .ops-toggle:disabled { opacity: .5; cursor: default; } /* ── 설정 드릴다운 (목차 → 항목 진입) — 대표 지시 2026-06-03 ── */ .drill-menu { display: none; flex-direction: column; gap: 7px; margin-top: 4px; } .drill-on:not(.drill-detail) > .drill-menu { display: flex; } .drill-on > .ns-section { display: none; } .drill-on.drill-detail > .ns-section.drill-active { display: block; } .drill-back { display: none; align-items: center; gap: 10px; margin-bottom: 12px; } .drill-on.drill-detail > .drill-back { display: flex; } .drill-back-btn { flex-shrink: 0; background: var(--bubble-other); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; } .drill-back-btn:hover { filter: brightness(0.97); } .drill-back-title { font-weight: 700; color: var(--text); font-size: calc(15px + var(--fs-add-ui)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drill-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 11px; padding: 15px 15px; font-size: calc(14.5px + var(--fs-add-ui)); font-weight: 600; cursor: pointer; } .drill-item:hover { background: var(--bubble-other); } .drill-item-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drill-arrow { flex-shrink: 0; color: var(--text-soft); font-size: calc(19px + var(--fs-add-ui)); font-weight: 400; line-height: 1; } /* 📢 여러 방 동시 공유 모달 + 받는 쪽 배지 (대표 지시 2026-06-04) */ .ms-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; } .ms-panel { background: var(--surface,#fff); width: 100%; max-width: 420px; max-height: 88vh; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; } .ms-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: calc(15px + var(--fs-add-ui)); font-weight: 700; color: var(--text,#111); border-bottom: 1px solid var(--border,#e5e7eb); } .ms-x { background: none; border: none; font-size: 18px; color: var(--text-soft,#6b7280); cursor: pointer; line-height: 1; } .ms-text { margin: 12px 14px 0; border: 1px solid var(--border,#e5e7eb); border-radius: 9px; padding: 10px 12px; font-size: calc(13px + var(--fs-add-ui)); resize: vertical; min-height: 60px; font-family: inherit; color: var(--text,#111); background: var(--bg,#fff); } .ms-tabbar { display: flex; gap: 6px; padding: 12px 14px 8px; } .ms-tab { flex: 1; border: 1px solid var(--border,#e5e7eb); background: var(--bg,#f6f7f9); border-radius: 8px; padding: 8px; font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft,#6b7280); cursor: pointer; } .ms-tab.on { background: var(--accent,#A5282C); color: #fff; border-color: var(--accent,#A5282C); } .ms-search { margin: 0 14px 8px; border: 1px solid var(--border,#e5e7eb); border-radius: 8px; padding: 8px 11px; font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text,#111); background: var(--bg,#fff); } .ms-list { flex: 1; overflow-y: auto; margin: 0 8px; padding: 0 6px; min-height: 120px; } .ms-room { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); color: var(--text,#111); } .ms-room:hover { background: var(--accent-soft,#FEF2F2); } .ms-room input { width: 17px; height: 17px; accent-color: var(--accent,#A5282C); flex-shrink: 0; } .ms-cur { font-size: calc(9px + var(--fs-add-ui)); background: var(--accent,#A5282C); color: #fff; padding: 1px 6px; border-radius: 999px; font-weight: 700; margin-left: 4px; vertical-align: middle; } .ms-empty { padding: 24px 12px; text-align: center; color: var(--text-soft,#9ca3af); font-size: calc(12px + var(--fs-add-ui)); line-height: 1.5; } .ms-bundle { display: flex; align-items: center; gap: 6px; padding: 4px 8px; } .ms-bpick { flex: 1; text-align: left; border: 1px solid var(--border,#e5e7eb); background: var(--bg,#f6f7f9); border-radius: 8px; padding: 9px 11px; font-size: calc(12.5px + var(--fs-add-ui)); color: var(--text,#111); cursor: pointer; } .ms-bpick small { color: var(--text-soft,#9ca3af); font-weight: 400; } .ms-bdel { background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px; } .ms-savebar { display: flex; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--border,#e5e7eb); } .ms-bname { flex: 1; border: 1px solid var(--border,#e5e7eb); border-radius: 8px; padding: 8px 10px; font-size: calc(12px + var(--fs-add-ui)); color: var(--text,#111); background: var(--bg,#fff); } .ms-bsave { border: 1px solid var(--accent,#A5282C); background: var(--accent-soft,#FEF2F2); color: var(--accent,#A5282C); border-radius: 8px; padding: 8px 13px; font-weight: 700; font-size: calc(12px + var(--fs-add-ui)); cursor: pointer; white-space: nowrap; } .ms-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border,#e5e7eb); } .ms-count { flex: 1; font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft,#6b7280); } .ms-cancel { border: 1px solid var(--border,#e5e7eb); background: var(--bg,#fff); color: var(--text,#111); border-radius: 8px; padding: 9px 14px; font-size: calc(12.5px + var(--fs-add-ui)); cursor: pointer; } .ms-send { border: none; background: var(--accent,#A5282C); color: #fff; border-radius: 8px; padding: 9px 16px; font-weight: 700; font-size: calc(13px + var(--fs-add-ui)); cursor: pointer; } .ms-send:disabled { opacity: .45; cursor: default; } /* 여러 방 공유 배지 — 글쓴이에게만 보이는 작은 회색 표시(클릭 시 공유한 방 목록). 최소 표현 (대표 지시 2026-06-04) */ .share-card { display: inline-flex; align-items: center; gap: 3px; font-size: calc(10px + var(--fs-add-ui)); color: var(--text-soft,#9aa0a6); background: transparent; border: none; border-radius: 5px; padding: 1px 5px; margin-bottom: 3px; cursor: pointer; line-height: 1.3; font-family: inherit; } .share-card:hover { color: var(--text,#333); background: var(--hover,rgba(0,0,0,.05)); } /* 공유한 방 목록 팝업 */ .share-target-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--border); border-radius: 8px; cursor: pointer; } .share-target-row:hover { background: var(--hover,rgba(0,0,0,.05)); } .share-target-row.is-cur { background: var(--accent-soft,#eef4ff); cursor: default; } .share-target-main { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; } .share-target-name { font-size: calc(14px + var(--fs-add-ui)); font-weight: 500; color: var(--text,#222); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .share-target-go { font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft,#9aa0a6); flex-shrink: 0; } /* 작성한 방 / 지금 방 표시 뱃지 */ .share-tag { flex-shrink: 0; display: inline-block; font-size: calc(10px + var(--fs-add-ui)); font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .share-tag-origin { background: #fef3c7; color: #92400e; } .share-tag-cur { background: #dbeafe; color: #1e40af; } /* 카톡식 날짜 구분선 — 가운데 회색 알약 (대표 지시 2026-06-04) */ .date-divider { display: flex; justify-content: center; margin: 14px 0 10px; } .date-divider span { background: rgba(0,0,0,.06); color: var(--text-soft,#6b7280); font-size: calc(11px + var(--fs-add-ui)); font-weight: 600; padding: 4px 13px; border-radius: 999px; white-space: nowrap; } /* 여기까지 읽었습니다 — 가운데 글자 + 양옆 선 (안 읽음 경계) */ .unread-divider { display: flex; align-items: center; gap: 10px; margin: 12px 4px; color: var(--accent,#A5282C); } .unread-divider::before, .unread-divider::after { content: ""; flex: 1; height: 1px; background: var(--accent,#A5282C); opacity: .45; } .unread-divider span { font-size: calc(11px + var(--fs-add-ui)); font-weight: 700; white-space: nowrap; } /* ============================================================ 📅 회의알림 · 📋 WORKS알림 카드 — 휴대폰 전체폭 (대표 지시 2026-07-09) 문제: 카드 옆에 시간이 붙어(가로 flex) 카드가 좌우로 좁아짐. 해결: 휴대폰(모바일)에서 이 카드들만 — 시간을 '보낸이 이름줄' 오른쪽 위로 (절대배치) 옮기고, 카드는 좌우 전체폭. DOM은 그대로(묶음 메시지 로직과 충돌 없음) · CSS만 (앱 코드 무영향). ============================================================ */ @media (max-width: 720px) and (pointer: coarse) { .messages .msg.meeting-invite .body, .messages .msg.works-card .body { position: relative; } /* 말풍선줄: 가로 flex → 블록(시간이 빠져 카드가 전체폭 차지) */ .messages .msg.meeting-invite .bubble-row, .messages .msg.works-card .bubble-row { display: block; } .messages .msg.meeting-invite .bubble-row > .bubble, .messages .msg.works-card .bubble-row > .bubble { width: 100%; max-width: 100%; } /* 시간: 흐름에서 빼서 이름줄 오른쪽 위로 (runmid=묶음중간 숨김은 display:none 이라 그대로 유지) */ .messages .msg.meeting-invite .bubble-row > .time, .messages .msg.works-card .bubble-row > .time { position: absolute; top: 1px; right: 6px; margin: 0; padding: 0; font-size: calc(10px + var(--fs-add-ui)); color: var(--text-soft); } /* 묶음(정해진 시간내 연속 발행)일 때 — 시간은 '보낸이(회의 알림) 줄 있는 첫 카드'에만. 이어지는 카드(.cont)엔 시간 숨김(본문 위 겹침 방지). 첫 카드(:not(.cont))는 runmid로 숨겨졌던 시간을 되살려 이름줄 오른쪽에 표시. (대표 지시 2026-07-09) */ .messages .msg.meeting-invite.cont .bubble-row > .time, .messages .msg.works-card.cont .bubble-row > .time { display: none; } .messages .msg.meeting-invite:not(.cont) .bubble-row > .time, .messages .msg.works-card:not(.cont) .bubble-row > .time { display: block; } } /* ───────── 🏢 회사 공용 자료함 (v655 · 대표 지시 2026-07-17) ───────── .modal 구조라 팝업 표준(v654: 사각·우하단 크기조절·위 고정·드래그)이 자동 적용된다. */ .cdocs-modal { width: min(860px, 96vw); max-height: 86vh; display: flex; flex-direction: column; } .cdocs-top { display: flex; gap: 6px; margin: 6px 0 8px; } .cdocs-top input[type="search"], .cdocs-top input[type="text"] { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: calc(13px + var(--fs-add-ui)); font-family: inherit; } .cdocs-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .cdocs-cat { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--surface); color: var(--text); font-size: calc(12px + var(--fs-add-ui)); line-height: 1.3; } .cdocs-cat.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } .cdocs-list { flex: 1; min-height: 120px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; } .cdocs-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--border); } .cdocs-row:last-child { border-bottom: 0; } .cdocs-ico { font-size: calc(20px + var(--fs-add-ui)); flex: 0 0 auto; } .cdocs-info { flex: 1; min-width: 0; } .cdocs-title { font-weight: 700; font-size: calc(13px + var(--fs-add-ui)); word-break: break-all; } .cdocs-meta { color: var(--text-soft); font-size: calc(11px + var(--fs-add-ui)); word-break: break-all; } .cdocs-note { color: var(--text-soft); font-size: calc(11.5px + var(--fs-add-ui)); margin-top: 2px; white-space: pre-wrap; word-break: break-word; } .cdocs-acts { display: flex; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .cdocs-acts button { padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; font-size: calc(12px + var(--fs-add-ui)); line-height: 1.2; } .cdocs-acts button:hover { background: var(--bg); } .cdocs-acts button.cdocs-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } .cdocs-empty { padding: 26px 12px; text-align: center; color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); } .cdocs-sub { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: var(--bg); } .cdocs-sub h4 { margin: 0 0 8px; font-size: calc(13px + var(--fs-add-ui)); } .cdocs-form-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; flex-wrap: wrap; } .cdocs-form-row label { flex: 0 0 76px; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); } .cdocs-form-row input[type="text"], .cdocs-form-row select, .cdocs-form-row textarea { flex: 1; min-width: 120px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: calc(13px + var(--fs-add-ui)); font-family: inherit; } .cdocs-roomlist { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; margin: 6px 0; } .cdocs-roomrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: calc(13px + var(--fs-add-ui)); } .cdocs-roomrow:last-child { border-bottom: 0; } .cdocs-roomrow:hover { background: var(--bg); } .cdocs-roomrow input[type="radio"] { flex: 0 0 auto; accent-color: var(--accent); } .cdocs-roomrow .cdocs-roomname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 📱 폰: 행을 세로 스택(카드 규정) — 제목·정보 위, 버튼 아래 전체폭 */ @media (max-width: 640px) { .cdocs-modal { width: 96vw; } .cdocs-row { flex-direction: column; align-items: stretch; gap: 6px; } .cdocs-acts { justify-content: stretch; } .cdocs-acts button { flex: 1; padding: 9px 6px; } .cdocs-form-row label { flex-basis: 100%; } } /* 🎛 AI 작업 종류별 모델 + 🧾 사용 현황 (v656 · 대표 지시 2026-07-18) */ .ai-cls-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; } .ai-cls-row label { flex: 0 0 132px; font-size: calc(12px + var(--fs-add-ui)); color: var(--text-soft); } .ai-cls-row input { flex: 1; min-width: 120px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: calc(12.5px + var(--fs-add-ui)); font-family: inherit; } .ai-cls-eff { flex: 0 0 auto; color: var(--text-soft); font-size: calc(11px + var(--fs-add-ui)); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-usage-tbl { border-collapse: collapse; margin-top: 3px; } .ai-usage-tbl th, .ai-usage-tbl td { border: 1px solid var(--border); padding: 3px 8px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ai-usage-tbl th:first-child, .ai-usage-tbl td:first-child { text-align: left; } @media (max-width: 640px) { .ai-cls-row { flex-wrap: wrap; } .ai-cls-row label { flex-basis: 100%; } }