/* 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; } :root { --bg: #f6f7f9; --surface: #ffffff; --border: #e5e7eb; --text: #111827; --text-soft: #6b7280; --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; /* 사이드바 폭 = 좌/우 중간 분리 라인 위치. 여기 값만 바꾸면 분리선이 좌우로 조정됨. 멘션(@) 버튼 추가로 아이콘이 잘려 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; --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; --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; --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; --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); } /* 메시지 번역 박스 — 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; } /* 회사망 접속 태그 (🏢 컴퓨터·휴대폰) — 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) */ /* 상태 팝업 — 글씨 크기 선택 버튼 (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); } /* 테마 선택 카드 (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: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Color Emoji", sans-serif; 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(--text); font-weight: 500; /* 내가 입력한 글씨를 또렷하게 — 예제(placeholder)보다 강조 */ } select { background: var(--surface); color: var(--text); } select option { background: var(--surface); color: var(--text); } /* placeholder(예제 글씨) — 입력 글씨보다 확실히 약하게: 더 흐리게 + 기울임 + 보통 굵기. "이건 예시일 뿐"이 한눈에 보이고, 내가 친 글씨가 더 도드라짐. (대표 지시 2026-05-29) */ input::placeholder, textarea::placeholder { color: var(--text-soft); opacity: 0.55; 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; } /* ===== 로그인 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; } .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 ───── 접힘: 오른쪽 대화창 숨김 + 왼쪽 방 목록 전체폭. 펼침: 원래대로. #chatPaneToggleBtn 으로 토글, 방을 열면 자동 펼침(app.js). 단독창(solo)·휴대폰은 무관. */ .chat-app.chat-collapsed { grid-template-columns: 1fr 0 !important; } .chat-app.chat-collapsed .chat-pane { display: none !important; } .chat-app.chat-collapsed #sidebarResizer { display: none !important; } /* 접기 버튼 — 데스크탑(마우스)에서만 노출. 휴대폰은 전체화면 전환이라 의미 없음 */ #chatPaneToggleBtn { display: none; } @media (pointer: fine) { .sidebar-head-actions-row .head-actions #chatPaneToggleBtn { display: inline-flex; } } #chatPaneToggleBtn.is-collapsed { color: var(--accent); } .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: 4px; padding: 5px 10px; border-radius: 16px; 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(17px + var(--fs-add-ui)); line-height: 1; } .sidebar-logout .logout-txt { font-size: calc(12px + var(--fs-add-ui)); font-weight: 600; white-space: nowrap; } .sidebar-logout:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } /* 휴대폰(터치) — 살짝 키움 (대표 지시 2026-05-20) */ @media (pointer: coarse) { .sidebar-logout { padding: 6px 11px; } .sidebar-logout .logout-ico { font-size: calc(19px + var(--fs-add-ui)); } .sidebar-logout .logout-txt { font-size: calc(13px + 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: space-between; align-items: center; 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; } /* 자동채널(본사/베트남/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-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: 2px; flex-shrink: 0; } .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); } /* 사이드바 헤더만 — 대화방만들기·WORKS 버튼과 한 줄에 함께 들어가도록 유틸 아이콘 살짝 축소(36→32). WORKS 버튼은 제외. (대표 지시 2026-05-31 겹침 해결) */ .sidebar-head-actions-row .head-actions button:not(#worksOpenBtn), .sidebar-head-actions-row .head-actions a { width: 32px; height: 32px; font-size: calc(18px + var(--fs-add-ui)); } .room-list { list-style: none; margin: 0; padding: 8px 0; overflow-y: auto; flex: 1; min-height: 0; } .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); } .room-list .room-info { flex: 1; min-width: 0; } .room-list .room-name { font-weight: 600; font-size: calc(12px + var(--fs-add)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 이름 앞 국기 이모지(🇰🇷·🇻🇳): Apple Color Emoji 우선(iOS), "Segoe UI Emoji" 제외(Windows KR/VN 글자화 방지), Noto/emoji 로 실제 국기 → 그 뒤 한글 텍스트 폰트. (※ "Segoe UI" 텍스트 폰트는 유지) */ font-family: "Apple Color Emoji", "Noto Color Emoji", emoji, "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } .room-list .room-last { color: var(--text-soft); font-size: calc(12px + var(--fs-add)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } /* 고객사(게스트) 참여 방 — 이름 앞 "(고객)" 강조 (대표 지시 2026-05-29) */ .room-guest-tag { color: #f59e0b; font-weight: 700; } .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-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 = 보통·가장 작게 */ /* 미읽음은 종류 무관 항상 굵게(강조 유지) */ #roomList.rl-all li.room-unread .room-name { font-weight: 800 !important; } /* ---- 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-05-27) — PC + 모바일 모두 선택 가능 */ -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } /* 말풍선 텍스트: 자유 선택 가능 (대표 지시 2026-05-27). 기존 long-press 컨텍스트 메뉴(.lp-selectable) 동작은 유지 — 같이 사용 가능. */ .messages .msg .bubble { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .messages .msg .bubble.lp-selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .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; } .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: 6px 11px; border-radius: 14px; /* 여백 축소 (대표 지시 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-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; } /* 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: 14px; /* 다크 포함 전 테마 대응 (대표 지시 2026-05-29) */ 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; } .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; } .msg-edit-input { width: 100%; min-height: 38px; max-height: 240px; 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) */ #updateBanner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100000; display: flex; align-items: center; gap: 10px; background: #A5282C; color: #fff; padding: 8px 14px; border-radius: 999px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,0.28); max-width: calc(100vw - 24px); animation: updateBannerIn .25s ease-out; } @keyframes updateBannerIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } #updateBanner button { background: #fff; color: #A5282C; border: none; border-radius: 999px; padding: 5px 12px; font-size: calc(12.5px + var(--fs-add-ui)); font-weight: 700; 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); } .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: center; 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); } .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; } .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; } /* ─── 🤫 귓속말 (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 위로 */ } /* 헤더 본인 아바타 — 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 */ .status-option-card:hover { border-color: #A5282C !important; background: #FEF2F2 !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; } /* ─── 사이드바 탭 (방 / 사용자) ─── */ .sidebar-tabs { display: flex; gap: 0; padding: 6px 8px 0; border-bottom: 1px solid var(--border); background: var(--surface); } .sb-tab { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; font-size: calc(13px + var(--fs-add-ui)); font-weight: 600; color: var(--text-soft); cursor: pointer; transition: color 0.12s, border-color 0.12s; } .sb-tab:hover { color: var(--text); } .sb-tab.active { color: #A5282C; border-bottom-color: #A5282C; } /* 사용자 탭 카운트 (본사/베트남 인원) — 대표 지시 2026-05-27 */ .sb-tab .sb-tab-count { display: inline-block; margin-left: 6px; 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; } /* ─── 사용자 탭 툴바 (➕ 직원 등록 버튼) ─── */ .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); } .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) */ 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); margin-top: 2px; } .user-title-chip { background: #EFF6FF; color: #1D4ED8; 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) */ #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; padding: 6px 8px 6px 14px; font-size: calc(12.5px + var(--fs-add-ui)); line-height: 1.3; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } #notifPolicyBanner > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #notifPolicyBannerBtn { flex-shrink: 0; background: #fff; border: 0; color: #A5282C; font-weight: 700; font-size: calc(12px + var(--fs-add-ui)); padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; } #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; } .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; } /* ─── 📚 프로젝트 이력 다이얼로그 (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); } /* 컴포저 — 툴바 분리형(대표 지시 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; } /* 전송 — 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; } /* 이모지 피커 버튼(.ep-emoji·.ep-tab)은 이 빨간 알약 스타일 제외 — 빨간 원형 버그 수정 (대표 지시 2026-05-21) */ .composer button:not(.ep-emoji):not(.ep-tab):not(.es-chip):not(.es-sticker):not(.sp-item) { 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):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(: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: 360px; max-width: calc(100vw - 24px); max-height: 360px; 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(4, 1fr); 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: 300px; } .sticker-picker .sp-grid { grid-template-columns: repeat(3, 1fr); } } /* ===== 스티커 미리보기 화면 (그리드 → 미리보기 전환) ===== */ /* 미리보기 모드: 패널에 명시적 높이 지정 (flex 자식 height:100% 작동 조건) */ .sticker-picker.sp-mode-preview { height: 260px; } @media (max-width: 600px) { .sticker-picker.sp-mode-preview { height: 240px; } } /* 미리보기 영역 — 패널 나머지 공간 채우기 */ .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; } .modal-content { background: var(--surface); border-radius: 16px; 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-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; } /* ===== 모바일 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; } /* 검색 입력 (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: 92vh; overflow: hidden; box-sizing: border-box; } #aiSummaryDialog #aiSummaryBody { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; } #aiSummaryDialog #aiSummaryRangeBar, #aiSummaryDialog #aiSummaryMeta, #aiSummaryDialog .dialog-actions { flex: 0 0 auto; } #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(11.5px + var(--fs-add-ui)); /* 12.5 → 11.5 */ 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); } .filter-bar .chip.active { background: var(--accent); color: #fff; } /* ---- Item rows in sidebar ---- */ .room-list .item-row .room-name-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* 프로젝트방 칩(회사명·관리번호·상태) — 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; } /* ---- 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: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: calc(18px + var(--fs-add-ui)); color: var(--text-soft); transition: background .15s; } .head-btn:hover { background: var(--bg); color: var(--text); } /* ---- 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; /* 음수 마진 제거 (겹침 방지) */ } .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; } .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: #f9fafb; outline: none; font: inherit; color: inherit; } /* 입력칸이 그리드 칸 폭에 맞게 — 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)); } .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 */ #newRoomDialog .modal-content, #itemEditDialog .modal-content { max-width: 460px; } /* ---- Search box (sidebar top) ---- */ .search-box { padding: 10px 12px; border-bottom: 1px solid var(--border); } .search-box input { width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; background: var(--bg); outline: none; font-size: calc(13px + var(--fs-add-ui)); } .search-box input:focus { background: #fff; border-color: var(--accent); } .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); } .search-result-room { display: flex; gap: 6px; align-items: center; font-size: calc(11.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(13px + var(--fs-add-ui)); } /* 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; } .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) */ @media (max-width: 720px) { .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: 10.5px; /* 고정 — 글씨크기 설정과 무관하게 배치 동일 유지 */ } .filter-bar .chip-label { white-space: nowrap; } .filter-bar .chip-type-ico { font-size: 10px; } .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; } /* 방 개수 배지 — 파란색(미읽음 적색과 구분). 그 필터에 방이 몇 개인지 확인용 (대표 지시 2026-05-24) */ .chip-count { display: inline-block; min-width: 14px; height: 14px; padding: 0 4px; margin: 0; border-radius: 999px; background: #3B82F6; 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: #2563EB; } /* 필터 칩 — 종류 아이콘을 라벨이 아닌 '개수 옆'에 둠 → 칩 가로 폭이 글자 길이로 유지(안 넓어짐). (대표 지시 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; } /* ---- Image / File messages ---- */ .msg.image .bubble { padding: 4px; background: transparent !important; box-shadow: none; } .msg.image .bubble img { max-width: 280px; max-height: 320px; 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: 340px; } .album-grid { display: grid; gap: 3px; border-radius: 12px; overflow: hidden; width: 340px; 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 */ .album-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg); text-decoration: none; } .album-grid-1 .album-tile { aspect-ratio: 4 / 3; } /* 1장은 가로형 */ .album-tile img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; /* .msg.image .bubble img 의 max-width 룰 무력화 */ max-width: none !important; max-height: none !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; } /* ── 첨부 미리보기 다이얼로그의 썸네일 그리드 ── */ .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; } /* 파일 메시지 — 원래 단순한 형태 (첨부 스타일 fix 되돌림) */ .msg.file .bubble { display: flex; gap: 10px; align-items: center; padding: 12px 14px; min-width: 220px; text-decoration: none; color: inherit; } .msg.file .file-icon { width: 38px; height: 38px; 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; } .msg.file .file-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .msg.file .file-name { font-weight: 600; font-size: calc(13.5px + var(--fs-add-ui)); word-break: break-all; } .msg.file .file-size { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); } .msg.file .file-link { margin-left: auto; padding: 6px 10px; border-radius: 6px; background: var(--accent); color: #fff; font-size: calc(12px + 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; } /* ─── 일반 모달 탭바 (.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); } .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; gap: 6px; align-items: center; padding: 8px 12px; } .perm-head { position: sticky; top: 0; z-index: 2; 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; } .notice-head-title { font-size: calc(13px + var(--fs-add-ui)); font-weight: 700; color: var(--text); white-space: nowrap; } .notice-head-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .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 { 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 { 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; } .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; } .req-item.req-done { 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; } .req-desc { color: var(--text-soft); font-size: calc(13px + var(--fs-add-ui)); line-height: 1.5; } .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; } .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; } /* ---- 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; } .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: 1000; 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, 한 줄로 깔끔하게 */ .chat-head { position: sticky; top: 0; z-index: 50; padding: 8px 10px; gap: 8px; 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; } /* 모바일에서 직접 노출 아이콘들은 숨기고, ⋮ 더보기 버튼만 노출 */ .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; width: 36px; height: 36px; font-size: calc(22px + var(--fs-add-ui)); background: transparent; border: 0; color: var(--text-soft); flex-shrink: 0; } /* 더보기 메뉴 popup — 헤더 아래 우측 (노치 회피) */ .head-more-menu { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 56px); 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; } .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; } .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; } /* 모바일: 언어 칩(OFF·KR·VN·US·CN)을 균등하게 늘려 가로폭을 꽉 채움 → 한쪽 쏠림 없이 균형 (대표 지시 2026-05-31) ('번역' 묶음 cl-trlabel 과 둘째 줄 뒤로(cl-row2 안)는 직접 자식이 아니라 영향 없음) */ .composer-langbar > .cl-chip { flex: 1 1 0; min-width: 0; text-align: center; padding-left: 2px; padding-right: 2px; } .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(--text-soft); opacity: 0.7; } /* 모바일 — 위 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); } /* 파일 다운로드 버튼 줄바꿈 방지 */ .msg.file .file-link { white-space: nowrap; flex-shrink: 0; } .msg.file .bubble { flex-wrap: wrap; /* 좁으면 받기 버튼이 새 줄로 */ } /* 시간 영역 — 좁아도 가로 한 줄 유지 */ .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; } /* ============================================================ 메시지 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; } /* ─── 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); } /* 다크 테마 — 점선 톤 보정 */ 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 .cl-trlabel { /* AI 배지 + '번역' 글자 한 묶음 (대표 지시 2026-05-31) */ display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; } .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; /* 중국 국기 빨강 */ } /* 둘째 줄 — 안내 알약(왼쪽) + 뒤로 버튼(오른쪽) (대표 지시 2026-05-31) */ .composer-langbar .cl-row2 { flex-basis: 100%; order: 99; /* flex 안에서 항상 마지막 → 둘째 줄 */ display: flex; align-items: center; gap: 8px; margin-top: 4px; } /* "자동 번역 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 { margin-left: auto; border-color: #A5282C; color: #A5282C; font-weight: 700; } .composer-langbar .cl-back:hover { background: #fdecec; border-color: #A5282C; } /* 컴포저 자체에 모드별 보더색 — 사용자가 잊지 않도록 시각적 안전망 */ .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(11.5px + var(--fs-add-ui)); color: var(--text); font-weight: 600; margin: 8px 0 4px; line-height: 1.4; } .ai-range-hint span { color: var(--text-soft); font-weight: 400; } #aiSummaryRangeBar { display: grid; grid-template-columns: auto 1fr 1fr 1fr; /* [라벨][버튼][버튼][버튼] */ gap: 6px; align-items: center; margin: 0 0 10px; } .ai-range-rowlabel { font-size: calc(11.5px + var(--fs-add-ui)); color: var(--text-soft); font-weight: 700; white-space: nowrap; padding-right: 2px; text-align: right; } .ai-range-btn { padding: 5px 6px; /* 높이 축소 (기본 8px → 5px) — 더 콤팩트 */ font-size: calc(12px + 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); } /* 요약창 본문은 고정 높이(인라인 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; } /* 이름·직급·부서·뱃지를 한 줄로 */ .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(--text-soft); 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; } } /* ─── 좁은 창(솔로 팝업·모바일 PWA·작은 데스크탑) — 가로 스크롤 방지 ─── */ @media (max-width: 480px) { /* 모달 컨테이너: 좌우 여백 최소화 */ .modal { padding: 8px; } .modal-content { padding: 14px 12px; border-radius: 12px; max-width: 100%; } /* 음소거 토글 행 — 한 줄 강제 + 사이즈 축소 */ .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; } } /* 매우 좁은 창 (솔로 팝업 306px) — 추가 축소 */ @media (max-width: 360px) { .modal { padding: 4px; } .modal-content { padding: 12px 10px; } .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); } /* 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%; color:#fff; font-weight:800; font-size: calc(17px + var(--fs-add-ui)); letter-spacing:.03em; line-height:1; flex-shrink:0; border:2px solid #fff; box-sizing:border-box; text-decoration:none; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.20); transition:transform .12s ease, box-shadow .15s ease; } .ai-avatar.on { background:#2563eb; } /* 파랑 = AI 동작/사용 가능 */ .ai-avatar.off { background:#dc2626; } /* 빨강 = AI 미동작/사용 불가 */ .ai-avatar:hover { transform:translateY(-1px); box-shadow:0 3px 9px rgba(0,0,0,.24); } /* 작은 변형(22px) — 헤더·목록·버튼 안 */ .ai-avatar.sm { width:22px; height:22px; font-size:9px; border-width:1px; box-shadow:0 1px 2px rgba(0,0,0,.16); } /* (보조) 문장 속 '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; } @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; } /* 컴퓨터용 더보기 메뉴 위치/스타일 */ .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; } .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; } .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; } }