/* * SRISE Design Tokens * - 모든 화면은 이 변수만 사용한다 (색상/간격/글꼴을 화면마다 임의로 정하지 않는다). * - Dark Mode: 또는 OS 설정(data-theme 미지정 시)을 따른다. */ :root { /* Typography — Windows: Segoe UI + 맑은 고딕, macOS: Apple SD Gothic Neo */ --sr-font-sans: 'Pretendard', 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; --sr-font-mono: 'Cascadia Mono', 'Consolas', 'D2Coding', ui-monospace, monospace; --sr-text-xs: 11px; --sr-text-sm: 12px; --sr-text-md: 13px; --sr-text-base: 14px; --sr-text-lg: 16px; --sr-text-xl: 18px; --sr-text-2xl: 22px; --sr-leading: 1.5; --sr-weight-regular: 400; --sr-weight-medium: 500; --sr-weight-semibold: 600; --sr-weight-bold: 700; /* Spacing (4px grid) */ --sr-space-1: 4px; --sr-space-2: 8px; --sr-space-3: 12px; --sr-space-4: 16px; --sr-space-5: 20px; --sr-space-6: 24px; --sr-space-8: 32px; --sr-space-10: 40px; /* Radius / Shadow / Motion */ --sr-radius-sm: 4px; --sr-radius-md: 6px; --sr-radius-lg: 10px; --sr-radius-xl: 14px; --sr-radius-full: 999px; --sr-duration: 120ms; /* Layout */ --sr-nav-width: 60px; --sr-list-width: 328px; --sr-header-height: 56px; /* 관리자·설정처럼 글을 읽는 화면의 최대 폭 (넓은 모니터에서 내용이 퍼지지 않도록) */ --sr-admin-max-width: 1120px; /* Brand — 회사 로고(01_SRISE_Logo.ai) 원본 색. 임의로 바꾸지 않는다. */ --sr-color-brand: #2f84b7; --sr-color-brand-dark: #24688f; /* ── Light theme (default) ── */ --sr-color-bg: #f4f5f7; --sr-color-surface: #ffffff; --sr-color-surface-2: #f8f9fb; --sr-color-surface-hover: #eef1f5; --sr-color-surface-active: #e3e9f3; /* 왼쪽 주 메뉴: 회사 로고 색을 그대로 쓴다 */ --sr-color-nav-bg: #2f84b7; --sr-color-nav-fg: #d5e8f4; --sr-color-nav-fg-active: #ffffff; --sr-color-nav-active: rgba(255, 255, 255, 0.22); --sr-color-border: #e1e4ea; --sr-color-border-strong: #c9ced8; --sr-color-text: #1b2230; --sr-color-text-muted: #5f6b7d; --sr-color-text-subtle: #8a94a6; --sr-color-text-inverse: #ffffff; --sr-color-primary: #2563eb; --sr-color-primary-hover: #1d4fd0; --sr-color-primary-soft: #e8f0fe; --sr-color-primary-text: #1e4fb8; --sr-color-danger: #d92d20; --sr-color-danger-soft: #fdecea; --sr-color-warning: #b54708; --sr-color-warning-soft: #fef4e6; --sr-color-success: #067647; --sr-color-focus: rgba(37, 99, 235, 0.35); --sr-color-bubble-mine: #d7ecfa; --sr-color-bubble-mine-text: #12293c; --sr-color-bubble-other: #ffffff; --sr-color-bubble-other-text: #1b2230; --sr-color-unread: #e5484d; --sr-color-read-count: #d97706; --sr-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --sr-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.1); --sr-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.18); --sr-overlay: rgba(15, 23, 42, 0.45); /* Presence */ --sr-presence-online: #12b76a; --sr-presence-away: #f5a524; --sr-presence-meeting: #7c3aed; --sr-presence-out: #0ea5e9; --sr-presence-vacation: #14b8a6; --sr-presence-dnd: #e5484d; --sr-presence-offline: #a3acba; color-scheme: light; } :root[data-theme='dark'] { --sr-color-bg: #0f141c; --sr-color-surface: #161c26; --sr-color-surface-2: #1b222e; --sr-color-surface-hover: #222a38; --sr-color-surface-active: #2a3446; --sr-color-nav-bg: #0b0f15; --sr-color-nav-fg: #8a96a8; --sr-color-nav-fg-active: #ffffff; --sr-color-nav-active: #1f2837; --sr-color-border: #283141; --sr-color-border-strong: #384356; --sr-color-text: #e6eaf0; --sr-color-text-muted: #a3adbd; --sr-color-text-subtle: #768296; --sr-color-primary: #4c8dff; --sr-color-primary-hover: #6aa0ff; --sr-color-primary-soft: #1b2a45; --sr-color-primary-text: #8fb6ff; --sr-color-danger: #f97066; --sr-color-danger-soft: #3a1d1b; --sr-color-warning: #fdb022; --sr-color-warning-soft: #33260f; --sr-color-success: #47cd89; --sr-color-focus: rgba(76, 141, 255, 0.45); --sr-color-bubble-mine: #23406e; --sr-color-bubble-mine-text: #eef3ff; --sr-color-bubble-other: #222a38; --sr-color-bubble-other-text: #e6eaf0; --sr-color-read-count: #fbbf24; --sr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --sr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --sr-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --sr-overlay: rgba(0, 0, 0, 0.6); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html, body, #root { height: 100%; margin: 0; } body { font-family: var(--sr-font-sans); font-size: var(--sr-text-base); line-height: var(--sr-leading); color: var(--sr-color-text); background: var(--sr-color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; } :focus-visible { outline: 2px solid var(--sr-color-primary); outline-offset: 1px; } ::selection { background: var(--sr-color-primary-soft); } /* 스크롤바 (Windows에서 기본 스크롤바가 두꺼워 업무용 UI에 맞게 얇게) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--sr-color-border-strong); border-radius: var(--sr-radius-full); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } .sr-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Button ─────────────────────────────────────────── */ .sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sr-space-2); height: 34px; padding: 0 var(--sr-space-4); border-radius: var(--sr-radius-md); border: 1px solid transparent; font-size: var(--sr-text-md); font-weight: var(--sr-weight-semibold); white-space: nowrap; transition: background var(--sr-duration), border-color var(--sr-duration), color var(--sr-duration); } .sr-btn--sm { height: 28px; padding: 0 var(--sr-space-3); font-size: var(--sr-text-sm); } .sr-btn--lg { height: 42px; padding: 0 var(--sr-space-5); font-size: var(--sr-text-base); } .sr-btn--block { width: 100%; } .sr-btn--primary { background: var(--sr-color-primary); color: var(--sr-color-text-inverse); } .sr-btn--primary:hover:not(:disabled) { background: var(--sr-color-primary-hover); } .sr-btn--secondary { background: var(--sr-color-surface); border-color: var(--sr-color-border-strong); color: var(--sr-color-text); } .sr-btn--secondary:hover:not(:disabled) { background: var(--sr-color-surface-hover); } .sr-btn--ghost { background: transparent; color: var(--sr-color-text-muted); } .sr-btn--ghost:hover:not(:disabled) { background: var(--sr-color-surface-hover); color: var(--sr-color-text); } .sr-btn--danger { background: var(--sr-color-danger); color: var(--sr-color-text-inverse); } .sr-btn:disabled { opacity: 0.55; } .sr-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--sr-radius-md); background: transparent; color: var(--sr-color-text-muted); } .sr-icon-btn:hover:not(:disabled) { background: var(--sr-color-surface-hover); color: var(--sr-color-text); } .sr-icon-btn--sm { width: 26px; height: 26px; } /* ── Text field ─────────────────────────────────────── */ .sr-field { display: flex; flex-direction: column; gap: var(--sr-space-1); } .sr-field__label { font-size: var(--sr-text-sm); font-weight: var(--sr-weight-semibold); color: var(--sr-color-text-muted); } .sr-input { height: 38px; padding: 0 var(--sr-space-3); border: 1px solid var(--sr-color-border-strong); border-radius: var(--sr-radius-md); background: var(--sr-color-surface); font-size: var(--sr-text-base); outline: none; transition: border-color var(--sr-duration), box-shadow var(--sr-duration); } .sr-input:focus { border-color: var(--sr-color-primary); box-shadow: 0 0 0 3px var(--sr-color-focus); } .sr-input[aria-invalid='true'] { border-color: var(--sr-color-danger); } .sr-input--sm { height: 32px; font-size: var(--sr-text-md); } .sr-field__hint { font-size: var(--sr-text-sm); color: var(--sr-color-text-subtle); } .sr-field__error { font-size: var(--sr-text-sm); color: var(--sr-color-danger); } .sr-search { position: relative; display: flex; align-items: center; } .sr-search svg { position: absolute; left: 10px; color: var(--sr-color-text-subtle); pointer-events: none; } .sr-search .sr-input { width: 100%; padding-left: 32px; } /* 검색어 지우기 (x) — 아이콘과 달리 눌려야 하므로 pointer-events를 되살린다. */ .sr-search__clear { position: absolute; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--sr-radius-full); background: transparent; color: var(--sr-color-text-subtle); cursor: pointer; } .sr-search__clear:hover { background: var(--sr-color-surface-hover); color: var(--sr-color-text); } .sr-checkbox { display: inline-flex; align-items: center; gap: var(--sr-space-2); font-size: var(--sr-text-md); color: var(--sr-color-text-muted); cursor: pointer; user-select: none; } .sr-checkbox input { width: 16px; height: 16px; accent-color: var(--sr-color-primary); } /* ── Avatar / presence / badge ─────────────────────── */ .sr-avatar { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 35%; font-weight: var(--sr-weight-semibold); color: #fff; user-select: none; } /* 프로필 사진 — 동그라미를 꽉 채우도록 잘라서 넣는다 (세로/가로 긴 사진도 찌그러지지 않게). */ .sr-avatar__photo { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .sr-avatar__presence { position: absolute; right: -2px; bottom: -2px; border: 2px solid var(--sr-color-surface); border-radius: var(--sr-radius-full); } .sr-presence-dot { display: inline-block; flex: none; border-radius: var(--sr-radius-full); } .sr-presence--ONLINE { background: var(--sr-presence-online); } .sr-presence--AWAY { background: var(--sr-presence-away); } .sr-presence--MEETING { background: var(--sr-presence-meeting); } .sr-presence--OUT_OF_OFFICE { background: var(--sr-presence-out); } .sr-presence--VACATION { background: var(--sr-presence-vacation); } .sr-presence--DO_NOT_DISTURB { background: var(--sr-presence-dnd); } .sr-presence--OFFLINE { background: var(--sr-presence-offline); } .sr-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--sr-radius-full); background: var(--sr-color-unread); color: #fff; font-size: var(--sr-text-xs); font-weight: var(--sr-weight-bold); line-height: 1; } .sr-badge--muted { background: var(--sr-color-text-subtle); } .sr-spinner { display: inline-block; border: 2px solid var(--sr-color-border-strong); border-top-color: var(--sr-color-primary); border-radius: var(--sr-radius-full); animation: sr-spin 0.8s linear infinite; } @keyframes sr-spin { to { transform: rotate(360deg); } } /* ── Tooltip / Menu / Dialog (Radix) ───────────────── */ .sr-tooltip { z-index: 1000; padding: 5px 8px; border-radius: var(--sr-radius-sm); background: #111827; color: #fff; font-size: var(--sr-text-sm); box-shadow: var(--sr-shadow-md); max-width: 280px; } .sr-menu { z-index: 900; min-width: 180px; padding: var(--sr-space-1); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface); box-shadow: var(--sr-shadow-lg); } .sr-menu__item { display: flex; align-items: center; gap: var(--sr-space-2); padding: 7px 10px; border-radius: var(--sr-radius-md); font-size: var(--sr-text-md); outline: none; cursor: pointer; user-select: none; } .sr-menu__item[data-highlighted] { background: var(--sr-color-surface-hover); } .sr-menu__item[data-disabled] { opacity: 0.5; cursor: default; } .sr-menu__item--danger { color: var(--sr-color-danger); } .sr-menu__label { padding: 6px 10px 4px; font-size: var(--sr-text-xs); font-weight: var(--sr-weight-semibold); color: var(--sr-color-text-subtle); } .sr-menu__separator { height: 1px; margin: var(--sr-space-1) 0; background: var(--sr-color-border); } .sr-dialog__overlay { position: fixed; inset: 0; z-index: 800; background: var(--sr-overlay); } .sr-dialog { position: fixed; top: 50%; left: 50%; z-index: 801; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; transform: translate(-50%, -50%); padding: var(--sr-space-6); border-radius: var(--sr-radius-xl); background: var(--sr-color-surface); box-shadow: var(--sr-shadow-lg); } /* 입력 칸이 두 줄로 들어가는 폼용 (너무 좁으면 글자가 잘린다) */ .sr-dialog--form { width: min(620px, calc(100vw - 32px)); } .sr-dialog--lg { display: flex; flex-direction: column; width: min(880px, calc(100vw - 48px)); height: min(620px, calc(100vh - 64px)); max-height: calc(100vh - 64px); overflow: hidden; padding: var(--sr-space-5) var(--sr-space-5) var(--sr-space-4); } .sr-dialog__title { margin: 0 0 var(--sr-space-2); font-size: var(--sr-text-lg); font-weight: var(--sr-weight-bold); } .sr-dialog__description { margin: 0 0 var(--sr-space-4); color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .sr-dialog__footer { display: flex; justify-content: flex-end; gap: var(--sr-space-2); margin-top: var(--sr-space-5); } /* ── Switch / Segmented ────────────────────────────── */ .sr-switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: none; border-radius: var(--sr-radius-full); background: var(--sr-color-border-strong); transition: background var(--sr-duration); } .sr-switch[data-state='checked'] { background: var(--sr-color-primary); } .sr-switch__thumb { display: block; width: 16px; height: 16px; border-radius: var(--sr-radius-full); background: #fff; box-shadow: var(--sr-shadow-sm); transform: translateX(2px); transition: transform var(--sr-duration); } .sr-switch[data-state='checked'] .sr-switch__thumb { transform: translateX(18px); } .sr-segmented { display: inline-flex; padding: 2px; border-radius: var(--sr-radius-md); background: var(--sr-color-surface-hover); } .sr-segmented__item { height: 28px; padding: 0 var(--sr-space-3); border: none; border-radius: var(--sr-radius-sm); background: transparent; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .sr-segmented__item[aria-checked='true'] { background: var(--sr-color-surface); color: var(--sr-color-text); font-weight: var(--sr-weight-semibold); box-shadow: var(--sr-shadow-sm); } /* ── Tabs (밑줄형) ─────────────────────────────────── */ .sr-tabs { display: flex; align-items: stretch; gap: var(--sr-space-1); min-width: 0; } .sr-tabs__item { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 var(--sr-space-2); border: none; background: transparent; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); white-space: nowrap; } .sr-tabs__item:hover { color: var(--sr-color-text); } .sr-tabs__item[aria-selected='true'] { color: var(--sr-color-primary-text); font-weight: var(--sr-weight-semibold); } .sr-tabs__item[aria-selected='true']::after { content: ''; position: absolute; right: 4px; bottom: 0; left: 4px; height: 2px; border-radius: 2px 2px 0 0; background: var(--sr-color-primary); } .sr-tabs__count { color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); font-weight: var(--sr-weight-semibold); } /* ── Fab (목록 위 원형 버튼) ───────────────────────── */ .sr-fab { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: none; border-radius: var(--sr-radius-full); background: var(--sr-color-primary); color: #fff; box-shadow: var(--sr-shadow-md); transition: background var(--sr-duration), transform var(--sr-duration); } .sr-fab:hover:not(:disabled) { background: var(--sr-color-primary-hover); transform: translateY(-1px); } .sr-fab:disabled { opacity: 0.6; } /* ── Empty state / alert ───────────────────────────── */ .sr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sr-space-2); height: 100%; padding: var(--sr-space-8); color: var(--sr-color-text-subtle); text-align: center; } .sr-empty__title { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-lg); font-weight: var(--sr-weight-semibold); } .sr-empty__desc { margin: 0; font-size: var(--sr-text-md); } .sr-alert { display: flex; gap: var(--sr-space-2); padding: var(--sr-space-3); border-radius: var(--sr-radius-md); font-size: var(--sr-text-md); } .sr-alert--error { background: var(--sr-color-danger-soft); color: var(--sr-color-danger); } .sr-alert--warning { background: var(--sr-color-warning-soft); color: var(--sr-color-warning); } .sr-alert--info { background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); } /* ── 이모지 선택 ────────────────────────────────────── */ .sr-emoji { display: flex; flex-direction: column; gap: var(--sr-space-2); width: 320px; max-width: 100%; } .sr-emoji__search { flex: none; } .sr-emoji__scroll { max-height: 260px; overflow-y: auto; } .sr-emoji__group + .sr-emoji__group { margin-top: var(--sr-space-2); } .sr-emoji__label { margin: 0 0 4px; color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); font-weight: var(--sr-weight-semibold); } .sr-emoji__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .sr-emoji__item { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0; border: none; border-radius: var(--sr-radius-sm); background: transparent; font-size: 19px; line-height: 1; } .sr-emoji__item:hover { background: var(--sr-color-surface-hover); } .sr-emoji__empty { margin: var(--sr-space-3) 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); text-align: center; } .sr-popover { z-index: 900; padding: var(--sr-space-3); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface); box-shadow: var(--sr-shadow-lg); } /* SRISE Messenger Desktop — 화면 스타일 (값은 반드시 design token 사용) */ .stack { display: flex; flex-direction: column; gap: var(--sr-space-3); } .boot-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sr-space-4); height: 100%; padding: var(--sr-space-8); } /* ── Auth ─────────────────────────────────────────────── */ .auth-screen { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--sr-space-6); background: radial-gradient(circle at 20% 10%, var(--sr-color-primary-soft), transparent 45%), var(--sr-color-bg); overflow: auto; } .auth-card { display: flex; flex-direction: column; gap: var(--sr-space-4); width: min(400px, 100%); padding: var(--sr-space-8); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-xl); background: var(--sr-color-surface); box-shadow: var(--sr-shadow-md); } .auth-card__brand { display: flex; flex-direction: column; align-items: center; gap: var(--sr-space-1); margin-bottom: var(--sr-space-3); text-align: center; } .auth-card__logo { margin-bottom: var(--sr-space-2); } .auth-card__title { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-lg); font-weight: var(--sr-weight-semibold); letter-spacing: 0.02em; } .auth-card__subtitle, .auth-card__help, .auth-card__meta { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .auth-card__meta { color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); text-align: center; } /* ── Shell ────────────────────────────────────────────── */ .app-shell { display: grid; grid-template-columns: var(--sr-nav-width) var(--sr-list-width) minmax(0, 1fr); height: 100%; } .app-shell--no-list { grid-template-columns: var(--sr-nav-width) minmax(0, 1fr); } .app-shell__list { min-width: 0; border-right: 1px solid var(--sr-color-border); background: var(--sr-color-surface); } .app-shell__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sr-color-bg); } .app-shell__content { flex: 1; min-height: 0; overflow: hidden; } .nav-rail { display: flex; flex-direction: column; align-items: center; gap: var(--sr-space-2); padding: var(--sr-space-3) 0; background: var(--sr-color-nav-bg); } .nav-rail__me { margin-bottom: var(--sr-space-2); } .nav-rail__avatar { padding: 0; border: none; background: transparent; border-radius: 14px; } .nav-rail__avatar .sr-avatar__presence { border-color: var(--sr-color-nav-bg); } .nav-rail__items { display: flex; flex: 1; flex-direction: column; gap: var(--sr-space-1); } .nav-rail__bottom { display: flex; flex-direction: column; gap: var(--sr-space-1); } /* 네이버웍스처럼 아이콘만 두고, 이름은 툴팁/스크린리더로 제공한다. */ .nav-rail__item { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: var(--sr-radius-lg); background: transparent; color: var(--sr-color-nav-fg); } .nav-rail__item:hover:not(:disabled) { background: var(--sr-color-nav-active); color: var(--sr-color-nav-fg-active); } .nav-rail__item.is-active { background: var(--sr-color-nav-active); color: var(--sr-color-nav-fg-active); } .nav-rail__item:disabled { opacity: 0.45; } .nav-rail__badge { position: absolute; top: 0; right: 0; } .connection-banner { display: flex; align-items: center; gap: var(--sr-space-2); padding: 6px var(--sr-space-4); background: var(--sr-color-warning-soft); color: var(--sr-color-warning); font-size: var(--sr-text-md); } /* ── Panels (list column) ─────────────────────────────── */ .panel { position: relative; display: flex; flex-direction: column; height: 100%; } .panel__header { display: flex; align-items: center; justify-content: space-between; height: var(--sr-header-height); padding: 0 var(--sr-space-3) 0 var(--sr-space-4); flex: none; } .panel__title { margin: 0; font-size: var(--sr-text-xl); font-weight: var(--sr-weight-bold); } .panel__search { padding: var(--sr-space-3) var(--sr-space-3) var(--sr-space-2); flex: none; } /* 대화방 종류 탭 (전체 / 1:1 / 여러 명) */ .panel__tabs { padding: 0 var(--sr-space-2); border-bottom: 1px solid var(--sr-color-border); flex: none; } /* 정렬 등 목록 도구 줄 */ .panel__toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sr-space-2) var(--sr-space-3) var(--sr-space-1); flex: none; } .panel__sort { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border: none; border-radius: var(--sr-radius-sm); background: transparent; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .panel__sort:hover { background: var(--sr-color-surface-hover); color: var(--sr-color-text); } .panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sr-space-2) 72px; } /* 새 대화 버튼 — 네이버웍스처럼 목록 오른쪽 아래에 띄운다 */ .panel__fab { position: absolute; right: var(--sr-space-4); bottom: var(--sr-space-4); z-index: 2; } .menu-check.is-off { visibility: hidden; } .empty-state__logo { opacity: 0.85; } .room-item { display: flex; align-items: center; gap: var(--sr-space-3); width: 100%; padding: 10px var(--sr-space-2); border: none; border-radius: var(--sr-radius-lg); background: transparent; text-align: left; } .room-item:hover { background: var(--sr-color-surface-hover); } .room-item.is-active { background: var(--sr-color-surface-active); } .room-item__body { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; } .room-item__top, .room-item__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-2); } .room-item__title { overflow: hidden; font-weight: var(--sr-weight-semibold); text-overflow: ellipsis; white-space: nowrap; } .room-item__time { flex: none; color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } .room-item__preview { overflow: hidden; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); text-overflow: ellipsis; white-space: nowrap; } .room-item__preview.is-error { color: var(--sr-color-danger); } /* ── Conversation ─────────────────────────────────────── */ .conversation { display: flex; flex-direction: column; height: 100%; } .conversation__header { display: flex; align-items: center; height: var(--sr-header-height); padding: 0 var(--sr-space-4); border-bottom: 1px solid var(--sr-color-border); background: var(--sr-color-surface); flex: none; } .conversation__peer { display: flex; align-items: center; gap: var(--sr-space-3); min-width: 0; padding: 4px 8px 4px 4px; border: none; border-radius: var(--sr-radius-lg); background: transparent; text-align: left; } .conversation__peer:hover { background: var(--sr-color-surface-hover); } .conversation__titles { display: flex; flex-direction: column; min-width: 0; } .conversation__title { font-size: var(--sr-text-lg); font-weight: var(--sr-weight-bold); } .conversation__status { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); white-space: nowrap; text-overflow: ellipsis; } /* 대화 헤더 오른쪽 도구 모음 (검색·파일·공지·예약·Task) */ .conversation__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; } .conversation__error { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--sr-space-3); } .message-list { position: relative; flex: 1; min-height: 0; } .message-list--empty { display: flex; align-items: center; justify-content: center; color: var(--sr-color-text-subtle); } .message-list__loading, .message-list__start { display: flex; justify-content: center; padding: var(--sr-space-4); color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .message-list__spacer { height: var(--sr-space-3); } .day-divider, .unread-divider { display: flex; align-items: center; gap: var(--sr-space-3); padding: var(--sr-space-3) var(--sr-space-6); color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .day-divider::before, .day-divider::after, .unread-divider::before, .unread-divider::after { content: ''; flex: 1; height: 1px; background: var(--sr-color-border); } .unread-divider { color: var(--sr-color-primary-text); font-weight: var(--sr-weight-semibold); } .unread-divider::before, .unread-divider::after { background: var(--sr-color-primary); opacity: 0.4; } .msg { display: flex; gap: var(--sr-space-2); padding: 2px var(--sr-space-5); } .msg--group-start { margin-top: var(--sr-space-2); } .msg--mine { justify-content: flex-end; } .msg__avatar { flex: none; width: 36px; } .msg__main { display: flex; flex-direction: column; max-width: min(72%, 720px); min-width: 0; } .msg--mine .msg__main { align-items: flex-end; } .msg__sender { margin-bottom: 3px; font-size: var(--sr-text-sm); font-weight: var(--sr-weight-semibold); } .msg__sender-sub { color: var(--sr-color-text-subtle); font-weight: var(--sr-weight-regular); } .msg__line { display: flex; align-items: flex-end; gap: 6px; min-width: 0; } .msg__bubble { min-width: 0; padding: 8px 12px; border-radius: 14px; background: var(--sr-color-bubble-other); color: var(--sr-color-bubble-other-text); box-shadow: var(--sr-shadow-sm); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; user-select: text; } .msg--other.msg--group-start .msg__bubble { border-top-left-radius: 4px; } .msg--mine .msg__bubble { background: var(--sr-color-bubble-mine); color: var(--sr-color-bubble-mine-text); } .msg--mine.msg--group-start .msg__bubble { border-top-right-radius: 4px; } .msg__bubble.is-pending { opacity: 0.7; } .msg-meta { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 1px; color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); white-space: nowrap; } .msg--other .msg-meta { align-items: flex-start; } .msg-meta__read { color: var(--sr-color-read-count); font-weight: var(--sr-weight-semibold); } .msg-meta--failed { flex-direction: row; align-items: center; gap: 4px; color: var(--sr-color-danger); } .msg-action { display: inline-flex; padding: 3px; border: none; border-radius: var(--sr-radius-sm); background: transparent; color: var(--sr-color-danger); } .msg-action:hover { background: var(--sr-color-danger-soft); } /* 수정·회수 메뉴 — 마우스를 올렸을 때만 보인다 (대화 화면이 버튼으로 어수선해지지 않게) */ .msg-action--menu { color: var(--sr-color-text-subtle); opacity: 0; } .msg-action--menu:hover, .msg-action--menu[data-state='open'] { background: var(--sr-color-surface-hover); color: var(--sr-color-text); opacity: 1; } .msg:hover .msg-action--menu, .msg-action--menu:focus-visible { opacity: 1; } .msg-meta__edited { color: var(--sr-color-text-subtle); } /* * 회수된 메시지 — 네이버웍스처럼 **한 줄 안내만** 남긴다. * 말풍선 배경·테두리를 없애 여러 건이 이어져도 화면이 지저분해지지 않게 한다. */ .msg__bubble.is-withdrawn { padding: 2px 0; border: none; background: transparent; color: var(--sr-color-text-subtle); box-shadow: none; } .msg-withdrawn { font-style: italic; } .msg-link { color: var(--sr-color-primary-text); text-decoration: underline; } .msg-unsupported { display: block; margin-top: 4px; color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } /* ── 첨부 (이미지 / 파일 / 표) ─────────────────────────── */ .msg-image { margin: 0; } .msg-image__button { display: block; padding: 0; border: none; border-radius: var(--sr-radius-md); background: transparent; cursor: zoom-in; } .msg-image__button img { display: block; max-width: min(360px, 100%); max-height: 360px; border-radius: var(--sr-radius-md); object-fit: contain; } .msg-image__loading { display: flex; align-items: center; justify-content: center; width: 220px; max-width: 100%; min-height: 120px; border-radius: var(--sr-radius-md); background: var(--sr-color-surface-2); } .msg-image figcaption { margin-top: 4px; font-size: var(--sr-text-md); } .msg-files { display: flex; flex-direction: column; gap: var(--sr-space-2); } .msg-files__caption { white-space: pre-wrap; } .msg-file { display: flex; align-items: center; gap: var(--sr-space-2); min-width: 220px; max-width: 320px; padding: 8px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface); color: inherit; text-align: left; } .msg-file__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--sr-radius-sm); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); } .msg-file__body { display: flex; flex: 1; flex-direction: column; min-width: 0; } .msg-file__name { overflow: hidden; font-size: var(--sr-text-md); text-overflow: ellipsis; white-space: nowrap; } .msg-file__size { color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } .msg-file__download { flex: none; color: var(--sr-color-text-subtle); } .msg-file--deleted, .msg-file--error { display: inline-flex; align-items: center; gap: 6px; min-width: 0; border-style: dashed; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); font-style: italic; } /* 표 메시지 — 화면보다 넓으면 가로 스크롤 (모바일과 같은 규칙) */ .msg-table-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .msg-table-scroll { max-width: 100%; max-height: 420px; overflow: auto; border-radius: var(--sr-radius-sm); } .msg-table { border-collapse: collapse; background: var(--sr-color-surface); font-size: var(--sr-text-md); white-space: nowrap; } .msg-table th, .msg-table td { max-width: 320px; padding: 5px 10px; border: 1px solid var(--sr-color-border); overflow: hidden; text-align: left; text-overflow: ellipsis; } .msg-table th { background: var(--sr-color-surface-2); font-weight: var(--sr-weight-semibold); } .msg-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sr-space-2); } .msg-table-note { color: var(--sr-color-warning); font-size: var(--sr-text-xs); } .msg-table-copy { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-full); background: var(--sr-color-surface); color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .msg-table-copy:hover { background: var(--sr-color-surface-hover); color: var(--sr-color-text); } .edit-message__input { min-height: 120px; line-height: 1.5; resize: vertical; } .jump-to-bottom { position: absolute; bottom: var(--sr-space-4); left: 50%; display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-full); background: var(--sr-color-surface); box-shadow: var(--sr-shadow-md); font-size: var(--sr-text-sm); font-weight: var(--sr-weight-semibold); transform: translateX(-50%); } /* ── Composer ─────────────────────────────────────────── */ .composer { flex: none; padding: var(--sr-space-2) var(--sr-space-4) var(--sr-space-3); border-top: 1px solid var(--sr-color-border); background: var(--sr-color-surface); } .composer--disabled { padding: var(--sr-space-4); color: var(--sr-color-text-muted); font-size: var(--sr-text-md); text-align: center; } /* 네이버웍스처럼 입력칸 아래에 도구 줄이 들어간 한 덩어리 상자 */ .composer__box { position: relative; display: flex; flex-direction: column; gap: var(--sr-space-1); padding: 10px 10px 6px; border: 1px solid var(--sr-color-border-strong); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface); } .composer__box.is-dragover { border-color: var(--sr-color-primary); background: var(--sr-color-primary-soft); } /* 끌어다 놓기 안내 (파일을 끌고 오는 동안에만 보인다) */ .composer__dropzone { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--sr-radius-lg); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-size: var(--sr-text-md); font-weight: var(--sr-weight-semibold); pointer-events: none; } /* 보낼 파일 목록 */ .composer__attachments { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); margin: 0 0 var(--sr-space-1); padding: 0; list-style: none; } .composer__attachment { display: flex; align-items: center; gap: var(--sr-space-2); max-width: 260px; padding: 6px 6px 6px 8px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface-2); } .composer__attachment-thumb { width: 34px; height: 34px; border-radius: var(--sr-radius-sm); object-fit: cover; } .composer__attachment-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--sr-radius-sm); background: var(--sr-color-surface-hover); color: var(--sr-color-text-muted); } .composer__attachment-body { display: flex; flex-direction: column; min-width: 0; } .composer__attachment-name { overflow: hidden; font-size: var(--sr-text-md); text-overflow: ellipsis; white-space: nowrap; } .composer__attachment-size { color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } .composer__attachment-remove { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: var(--sr-radius-full); background: transparent; color: var(--sr-color-text-muted); } .composer__attachment-remove:hover:not(:disabled) { background: var(--sr-color-surface-hover); color: var(--sr-color-text); } /* 표 붙여넣기 선택 */ .table-paste { display: flex; flex-direction: column; gap: var(--sr-space-2); } .table-paste__preview { max-height: 260px; overflow: auto; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); } .table-paste__more, .table-paste__hint { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .table-paste__more.is-warning { color: var(--sr-color-warning); } .composer__box:focus-within { border-color: var(--sr-color-primary); box-shadow: 0 0 0 3px var(--sr-color-focus); } /* * 입력칸 = [뒤: 서식이 입혀진 글자 층] + [앞: 글자가 투명한 textarea] * * 두 층의 글자 위치가 1px도 어긋나면 안 되므로 글꼴·크기·자간·줄간격·여백·줄바꿈 규칙을 * 똑같이 맞춘다. 굵게/기울임/취소선은 **글자 폭이 변하지 않는 방법**으로만 흉내 낸다 * (아래 .md-draft-* 참고). 자세한 이유는 features/composer/draft-format.ts 주석에 있다. */ .composer__editor { position: relative; display: flex; flex: 1; min-width: 0; } .composer__mirror, .composer__input { padding: 2px 2px 4px; border: none; font: inherit; letter-spacing: inherit; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 4; } .composer__mirror { position: absolute; inset: 0; overflow: hidden; color: var(--sr-color-text); pointer-events: none; user-select: none; } .composer__mirror-line.is-quote { color: var(--sr-color-text-muted); } .composer__input { flex: 1; min-height: 52px; max-height: 200px; outline: none; background: transparent; /* 글자는 뒤 층이 보여 준다. 커서와 선택 영역만 이 층에서 보인다. */ color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--sr-color-text); resize: none; } .composer__input::placeholder { color: var(--sr-color-text-subtle); -webkit-text-fill-color: var(--sr-color-text-subtle); } /* 선택 영역이 불투명하면 뒤 층의 글자가 가려진다 → 반투명으로 둔다. */ .composer__input::selection { background: var(--sr-color-focus); } /* 서식 표시 문자(**, ~~, `, >, -)는 흐리게 — 지우지 않는다(글자 수가 달라지면 커서가 밀린다). */ .md-draft-mark { color: var(--sr-color-text-subtle); } /* 굵게: 외곽선으로 흉내 낸다. font-weight를 바꾸면 글자 폭이 달라져 커서가 어긋난다. */ .md-draft-b { -webkit-text-stroke: 0.4px currentcolor; } /* 기울임: 기울이기만 한다(폭 그대로). 줄바꿈을 원문과 맞추려고 조각을 잘게 나눈다. */ .md-draft-i { display: inline-block; transform: skewX(-11deg); } /* 취소선·배경은 글자 폭에 영향을 주지 않는다. */ .md-draft-s { text-decoration: line-through; } .md-draft-c { border-radius: 3px; background: var(--sr-color-surface-hover); color: var(--sr-color-primary-text); } .composer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-2); } .composer__tools { display: flex; align-items: center; gap: 2px; } .composer__actions { display: flex; align-items: center; gap: var(--sr-space-2); } .composer__count { color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } .composer__count.is-error { color: var(--sr-color-danger); font-weight: var(--sr-weight-semibold); } /* ── Org ──────────────────────────────────────────────── */ .org-tree { padding-bottom: var(--sr-space-2); border-bottom: 1px solid var(--sr-color-border); margin-bottom: var(--sr-space-2); } .org-tree ul { margin: 0; padding: 0; list-style: none; } .org-tree__label--company { font-weight: var(--sr-weight-semibold); } .org-tree__company-label { display: inline-flex; align-items: center; gap: var(--sr-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .org-tree__row { display: flex; align-items: center; border-radius: var(--sr-radius-md); } .org-tree__row:hover { background: var(--sr-color-surface-hover); } .org-tree__row.is-active { background: var(--sr-color-surface-active); } .org-tree__toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 28px; padding: 0; border: none; background: transparent; color: var(--sr-color-text-subtle); } .org-tree__label { display: flex; flex: 1; align-items: center; justify-content: space-between; height: 30px; padding: 0 var(--sr-space-2) 0 2px; border: none; background: transparent; font-size: var(--sr-text-md); text-align: left; } .org-tree__count { color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } .user-row { display: flex; align-items: center; gap: var(--sr-space-3); width: 100%; padding: 8px var(--sr-space-2); border: none; border-radius: var(--sr-radius-lg); background: transparent; text-align: left; } .user-row:hover { background: var(--sr-color-surface-hover); } .user-row.is-active { background: var(--sr-color-surface-active); } .user-row__body { display: flex; flex-direction: column; min-width: 0; } .user-row__name { display: flex; align-items: baseline; gap: 6px; font-weight: var(--sr-weight-semibold); } .user-row__position { color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); font-weight: var(--sr-weight-regular); } .user-row__me { padding: 0 5px; border-radius: var(--sr-radius-sm); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-size: var(--sr-text-xs); } .user-row__sub { overflow: hidden; color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); text-overflow: ellipsis; white-space: nowrap; } .profile { display: flex; flex-direction: column; align-items: center; gap: var(--sr-space-6); height: 100%; padding: var(--sr-space-10) var(--sr-space-6); overflow-y: auto; } .profile__card { display: flex; flex-direction: column; align-items: center; gap: var(--sr-space-2); width: min(420px, 100%); padding: var(--sr-space-8) var(--sr-space-6); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-xl); background: var(--sr-color-surface); text-align: center; } .profile__name { display: flex; align-items: baseline; gap: 6px; margin: var(--sr-space-2) 0 0; font-size: var(--sr-text-2xl); } .profile__position { color: var(--sr-color-text-muted); font-size: var(--sr-text-base); font-weight: var(--sr-weight-regular); } .profile__dept, .profile__status, .profile__lastseen { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .profile__lastseen { color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .profile__card .sr-btn { margin-top: var(--sr-space-3); min-width: 180px; } .profile__details { width: min(420px, 100%); margin: 0; padding: var(--sr-space-2) var(--sr-space-5); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-xl); background: var(--sr-color-surface); } .profile__details > div { display: flex; justify-content: space-between; gap: var(--sr-space-4); padding: var(--sr-space-3) 0; border-bottom: 1px solid var(--sr-color-border); } .profile__details > div:last-child { border-bottom: none; } .profile__details dt { display: flex; align-items: center; gap: 6px; color: var(--sr-color-text-muted); } .profile__details dd { margin: 0; user-select: text; } /* ── Settings ─────────────────────────────────────────── */ .settings { height: 100%; padding: var(--sr-space-6) var(--sr-space-8) var(--sr-space-10); overflow-y: auto; } .settings__title { margin: 0 0 var(--sr-space-5); font-size: var(--sr-text-2xl); } .settings__section { max-width: 760px; margin-bottom: var(--sr-space-5); padding: var(--sr-space-5); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-xl); background: var(--sr-color-surface); } .settings__section-title { margin: 0 0 var(--sr-space-4); font-size: var(--sr-text-lg); } .settings__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-6); padding: var(--sr-space-3) 0; border-bottom: 1px solid var(--sr-color-border); } .settings__row:last-child { border-bottom: none; } .settings__label { font-weight: var(--sr-weight-semibold); } .settings__desc { color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .settings__info { display: grid; grid-template-columns: 110px 1fr; gap: var(--sr-space-2) var(--sr-space-4); margin: 0 0 var(--sr-space-3); } .settings__info dt { color: var(--sr-color-text-muted); } .settings__info dd { margin: 0; user-select: text; } .settings__narrow { max-width: 380px; } .settings__footer { max-width: 760px; } .session-list { margin: 0; padding: 0; list-style: none; } .session-list__item { display: flex; align-items: center; gap: var(--sr-space-3); padding: var(--sr-space-3) 0; border-bottom: 1px solid var(--sr-color-border); } .session-list__item:last-child { border-bottom: none; } .session-list__icon { color: var(--sr-color-text-muted); } .session-list__body { display: flex; flex: 1; flex-direction: column; } .session-list__name { display: flex; align-items: center; gap: var(--sr-space-2); font-weight: var(--sr-weight-semibold); } .session-list__current { padding: 1px 6px; border-radius: var(--sr-radius-sm); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-size: var(--sr-text-xs); } /* ── Toast ────────────────────────────────────────────── */ .toast-host { position: fixed; right: var(--sr-space-5); bottom: var(--sr-space-5); z-index: 1100; display: flex; flex-direction: column; gap: var(--sr-space-2); } .toast { display: flex; align-items: center; gap: var(--sr-space-3); max-width: 420px; padding: 10px 12px 10px 14px; border-radius: var(--sr-radius-lg); background: #1f2937; color: #fff; box-shadow: var(--sr-shadow-lg); font-size: var(--sr-text-md); } .toast--error { background: var(--sr-color-danger); } .toast button { display: inline-flex; padding: 2px; border: none; background: transparent; color: inherit; opacity: 0.8; } /* ── 그룹 대화 ─────────────────────────────────────────── */ .room-item__group-avatar, .conversation__group-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--sr-radius-full); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); } .room-item__group-avatar { width: 40px; height: 40px; } .conversation__group-avatar { width: 36px; height: 36px; } .room-item__count { color: var(--sr-color-text-subtle); font-weight: var(--sr-weight-regular); font-size: var(--sr-text-sm); } /* 대화방 구성 변경 안내 (초대/나가기/이름 변경) */ .system-notice { display: flex; justify-content: center; padding: var(--sr-space-2) var(--sr-space-6); } .system-notice > span { max-width: 70%; padding: 4px var(--sr-space-3); border-radius: var(--sr-radius-full); background: var(--sr-color-surface-2); border: 1px solid var(--sr-color-border); color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); text-align: center; } /* ── 대화 상대 선택 (조직도: 왼쪽 부서 트리 + 오른쪽 멤버 목록) ── */ .org-picker { display: flex; flex: 1; flex-direction: column; gap: var(--sr-space-3); min-height: 0; } .org-picker__search { flex: none; } .org-picker__panes { display: grid; grid-template-columns: 240px minmax(0, 1fr); flex: 1; min-height: 240px; overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); } .org-picker__tree { /* grid 칸 안에서 스스로 줄어들 수 있어야 스크롤이 생긴다 (min-height 없으면 내용만큼 늘어난다) */ min-height: 0; overflow-y: auto; padding: var(--sr-space-2) var(--sr-space-1); border-right: 1px solid var(--sr-color-border); border-bottom: none; margin-bottom: 0; background: var(--sr-color-surface-2); /* 스크롤 막대 자리를 미리 비워 두어, 스크롤이 생겨도 칸 너비가 흔들리지 않는다 */ scrollbar-gutter: stable; } .org-picker__members { display: flex; flex-direction: column; min-width: 0; /* * grid 칸의 기본 최소 높이는 "내용 전체"다. 이 값을 0으로 풀어 주지 않으면 * 목록이 칸 밖으로 넘쳐 잘리기만 하고 아래 .org-picker__list 에 스크롤이 생기지 않는다. * (구성원이 많을 때 아래로 내려가지 않던 문제) */ min-height: 0; } .org-picker__scope { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); padding: var(--sr-space-2) var(--sr-space-3); border-bottom: 1px solid var(--sr-color-border); font-weight: var(--sr-weight-semibold); } .org-picker__columns, .org-picker__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--sr-space-2); padding: 0 var(--sr-space-3); } .org-picker__columns { padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--sr-color-border); background: var(--sr-color-surface-2); color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .org-picker__columns > span:first-child { padding-left: 68px; } .org-picker__list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .org-picker__row { grid-template-columns: 22px 30px minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.9fr); padding-top: 6px; padding-bottom: 6px; cursor: pointer; } .org-picker__row:hover { background: var(--sr-color-surface-hover); } .org-picker__name { display: flex; flex-direction: column; min-width: 0; font-size: var(--sr-text-base); } .org-picker__rank, .org-picker__cell { overflow: hidden; color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); text-overflow: ellipsis; white-space: nowrap; } .org-picker__empty { padding: var(--sr-space-8); margin: 0; color: var(--sr-color-text-subtle); font-size: var(--sr-text-md); text-align: center; } .org-picker__selected { display: flex; align-items: flex-start; gap: var(--sr-space-3); flex: none; max-height: 84px; overflow-y: auto; } .org-picker__selected-count { flex: none; padding-top: 3px; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); font-weight: var(--sr-weight-semibold); } .org-picker__chips { display: flex; flex-wrap: wrap; gap: var(--sr-space-1); } .org-picker__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: var(--sr-radius-full); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-size: var(--sr-text-sm); } .org-picker__chip button { display: inline-flex; padding: 2px; border: none; border-radius: var(--sr-radius-full); background: transparent; color: inherit; } .org-picker__chip button:hover { background: var(--sr-color-surface); } .new-chat__name { flex: none; } /* 참여자 관리 */ .room-members__rename { display: flex; align-items: flex-end; gap: var(--sr-space-2); } .room-members__rename .sr-field { flex: 1; } .room-members__actions { display: flex; gap: var(--sr-space-2); margin: var(--sr-space-3) 0; } .room-members__list { display: flex; flex-direction: column; gap: var(--sr-space-1); max-height: 320px; overflow-y: auto; margin: 0; padding: 0; list-style: none; } .room-members__row { display: flex; align-items: center; gap: var(--sr-space-2); padding: var(--sr-space-2); border-radius: var(--sr-radius-md); } .room-members__row:hover { background: var(--sr-color-surface-hover); } .room-members__name { flex: 1; font-size: var(--sr-text-base); } .room-members__me { color: var(--sr-color-text-subtle); } .room-members__role { margin-left: var(--sr-space-2); padding: 1px var(--sr-space-2); border-radius: var(--sr-radius-full); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-size: var(--sr-text-xs); font-weight: var(--sr-weight-medium); } /* ── 관리자 화면 ───────────────────────────────────────── */ .admin { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .admin__header { flex: none; border-bottom: 1px solid var(--sr-color-border); background: var(--sr-color-surface); } /* 넓은 모니터에서 내용이 좌우로 퍼지지 않도록 한 줄 폭을 제한한다. */ .admin__header-inner { width: 100%; max-width: var(--sr-admin-max-width); margin: 0 auto; padding: var(--sr-space-4) var(--sr-space-6) 0; } .admin__title { margin: 0 0 var(--sr-space-2); font-size: var(--sr-text-xl); font-weight: var(--sr-weight-bold); } .admin__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sr-space-5) var(--sr-space-6) var(--sr-space-8); } .admin__section { display: flex; flex-direction: column; gap: var(--sr-space-4); width: 100%; max-width: var(--sr-admin-max-width); margin: 0 auto; } .admin__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); } .admin__hint { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .admin__link { border: none; background: transparent; color: var(--sr-color-primary-text); text-decoration: underline; } .admin__table { width: 100%; border-collapse: collapse; background: var(--sr-color-surface); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); font-size: var(--sr-text-md); overflow: hidden; } .admin__table th, .admin__table td { padding: 10px var(--sr-space-3); text-align: left; border-bottom: 1px solid var(--sr-color-border); vertical-align: middle; } /* 이름·권한·상태는 내용만큼만, 부서/로그인 ID가 남는 폭을 가져간다. */ .admin__table col.admin__col--name { width: 15%; } .admin__table col.admin__col--id { width: 22%; } .admin__table col.admin__col--dept { width: 26%; } .admin__table col.admin__col--role { width: 10%; } .admin__table col.admin__col--status { width: 12%; } .admin__table td.admin__cell--wrap { overflow-wrap: anywhere; } .admin__table th { background: var(--sr-color-surface-2); color: var(--sr-color-text-muted); font-weight: var(--sr-weight-semibold); white-space: nowrap; } .admin__table tr:last-child td { border-bottom: none; } .admin__muted { color: var(--sr-color-text-muted); } .admin__me { margin-left: 6px; padding: 1px 6px; border-radius: var(--sr-radius-full); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-size: var(--sr-text-xs); } .admin__badge { display: inline-block; margin-right: 4px; padding: 2px 8px; border-radius: var(--sr-radius-full); background: var(--sr-color-surface-hover); color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); white-space: nowrap; } .admin__badge--ok { background: rgba(6, 118, 71, 0.12); color: var(--sr-color-success); } .admin__badge--warn { background: var(--sr-color-warning-soft); color: var(--sr-color-warning); } .admin__actions { display: flex; gap: var(--sr-space-1); justify-content: flex-end; white-space: nowrap; } .admin__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sr-space-4); } .admin__card { padding: var(--sr-space-4); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface); } .admin__card-title { margin: 0 0 var(--sr-space-3); font-size: var(--sr-text-base); font-weight: var(--sr-weight-bold); } .admin__stat { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); padding: 5px 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .admin__stat strong { color: var(--sr-color-text); } .admin__meter { height: 6px; margin: var(--sr-space-2) 0; border-radius: var(--sr-radius-full); background: var(--sr-color-surface-hover); overflow: hidden; } .admin__meter span { display: block; height: 100%; background: var(--sr-color-primary); } /* 발급된 임시 비밀번호 안내 */ .admin__issued { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-2) var(--sr-space-3); } .admin__issued-name { font-weight: var(--sr-weight-semibold); } .admin__issued-code { padding: 4px 10px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-sm); background: var(--sr-color-surface); font-family: var(--sr-font-mono, monospace); font-size: var(--sr-text-base); letter-spacing: 0.04em; user-select: all; } .admin__issued-note { flex-basis: 100%; margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .admin__issued-actions { display: flex; gap: var(--sr-space-2); margin-left: auto; } /* 조직 관리 */ .admin__org { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--sr-space-4); align-items: start; } .admin__org-tree { padding: var(--sr-space-2); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface); } .admin__org-node { display: flex; align-items: center; gap: var(--sr-space-2); width: 100%; padding: 6px var(--sr-space-2); border: none; border-radius: var(--sr-radius-sm); background: transparent; color: inherit; font-size: var(--sr-text-md); text-align: left; cursor: pointer; } .admin__org-node:hover { background: var(--sr-color-surface-hover); } .admin__org-node.is-selected { background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-weight: var(--sr-weight-medium); } .admin__org-node--company { font-weight: var(--sr-weight-semibold); } .admin__org-count { margin-left: auto; color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .admin__org-detail { display: flex; flex-direction: column; gap: var(--sr-space-3); padding: var(--sr-space-4); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface); } .admin__org-detail-title { margin: 0; font-size: var(--sr-text-base); font-weight: var(--sr-weight-bold); } .admin__org-actions { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); } /* 구성원 추가/수정 폼 */ .admin-form { display: flex; flex-direction: column; gap: var(--sr-space-3); } .admin-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sr-space-3); } /* grid 자식은 기본 min-width가 auto라서 입력칸이 칸 밖으로 밀려 잘린다. */ .admin-form__row > * { min-width: 0; } .admin-form__fieldset { display: flex; flex-direction: column; gap: var(--sr-space-2); margin: 0; padding: var(--sr-space-3); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface-2); } .admin-form__legend { padding: 0 var(--sr-space-1); color: var(--sr-color-text-muted); font-size: var(--sr-text-md); font-weight: var(--sr-weight-semibold); } .admin-form__choices { display: flex; flex-wrap: wrap; gap: var(--sr-space-4); } .admin-form__login-id { display: flex; align-items: flex-end; gap: var(--sr-space-2); } .admin-form__login-id .sr-field { flex: 1; } .admin-form__domain { padding-bottom: 10px; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); white-space: nowrap; } /* ── 통합 검색 ─────────────────────────────────────────── */ .search-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .search-panel__header { flex: none; border-bottom: 1px solid var(--sr-color-border); background: var(--sr-color-surface); } .search-panel__header-inner { width: 100%; max-width: var(--sr-admin-max-width); margin: 0 auto; padding: var(--sr-space-4) var(--sr-space-6) 0; } .search-panel__title { margin: 0 0 var(--sr-space-2); font-size: var(--sr-text-xl); font-weight: var(--sr-weight-bold); } .search-panel__body { display: flex; flex: 1; flex-direction: column; gap: var(--sr-space-3); min-height: 0; width: 100%; max-width: var(--sr-admin-max-width); margin: 0 auto; padding: var(--sr-space-5) var(--sr-space-6) var(--sr-space-8); overflow-y: auto; } .search-panel__form { display: flex; gap: var(--sr-space-2); } .search-panel__input { flex: 1; } .search-panel__hint { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .search-panel__filters { display: flex; flex-wrap: wrap; gap: var(--sr-space-3); align-items: flex-end; } .search-panel__filter { min-width: 150px; max-width: 260px; } .search-results { display: flex; flex-direction: column; gap: var(--sr-space-2); } .search-results__count { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .search-result { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px var(--sr-space-3); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface); text-align: left; } .search-result:hover { background: var(--sr-color-surface-hover); } /* 누를 곳이 없는 결과 (업무 검색) — 마우스를 올려도 강조하지 않는다. */ .search-result--static:hover { background: var(--sr-color-surface); } .search-result--static .search-result__text { white-space: normal; } .search-result__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-2); color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .search-result__room { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; font-weight: var(--sr-weight-semibold); text-overflow: ellipsis; white-space: nowrap; } .search-result__body { display: flex; align-items: baseline; gap: var(--sr-space-2); min-width: 0; font-size: var(--sr-text-md); } .search-result__sender { flex: none; font-weight: var(--sr-weight-semibold); } .search-result__kind { flex: none; padding: 1px 6px; border-radius: var(--sr-radius-full); background: var(--sr-color-surface-hover); color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .search-result__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-hit { padding: 0 1px; border-radius: 2px; background: var(--sr-color-warning-soft); color: inherit; font-weight: var(--sr-weight-semibold); } .search-files__col--meta { width: 16%; } .search-files__col--size { width: 10%; } .search-files__name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: none; background: transparent; color: var(--sr-color-primary-text); text-align: left; } .search-files__name:disabled { color: var(--sr-color-text); cursor: default; } .search-files__name:hover:not(:disabled) { text-decoration: underline; } .search-files__ext { flex: none; margin-left: 6px; padding: 1px 6px; border-radius: var(--sr-radius-sm); background: var(--sr-color-surface-hover); color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); text-transform: uppercase; } .admin__files-toggle { align-self: flex-end; padding-bottom: 8px; } /* 원본 위치(앞뒤 대화) 보기 */ .context-view { display: flex; flex: 1; flex-direction: column; gap: var(--sr-space-1); min-height: 0; overflow-y: auto; padding: var(--sr-space-2); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface-2); } .context-row { display: flex; flex-direction: column; gap: 2px; padding: 6px var(--sr-space-2); border-radius: var(--sr-radius-sm); } .context-row.is-mine { background: var(--sr-color-bubble-mine); } .context-row.is-target { outline: 2px solid var(--sr-color-primary); background: var(--sr-color-surface); } .context-row__meta { display: flex; align-items: baseline; gap: var(--sr-space-2); color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } .context-row__meta strong { color: var(--sr-color-text); font-size: var(--sr-text-md); } .context-row__text { font-size: var(--sr-text-md); white-space: pre-wrap; overflow-wrap: anywhere; } .context-row__edited { margin-left: 6px; color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } /* ── 답장 · 반응 · 멘션 · 고정 ─────────────────────────── */ .msg__stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .msg--mine .msg__stack { align-items: flex-end; } /* 답장 대상 미리보기 (말풍선 위) */ .msg-reply { display: flex; flex-direction: column; gap: 1px; max-width: 100%; padding: 5px 10px; border-left: 3px solid var(--sr-color-primary); border-radius: var(--sr-radius-sm); background: var(--sr-color-surface-2); font-size: var(--sr-text-sm); } .msg-reply__sender { color: var(--sr-color-primary-text); font-weight: var(--sr-weight-semibold); } .msg-reply__text { overflow: hidden; color: var(--sr-color-text-muted); text-overflow: ellipsis; white-space: nowrap; } .msg-reply__text.is-deleted { font-style: italic; } /* 이모지 반응 */ .msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; } .msg-reaction { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-full); background: var(--sr-color-surface); font-size: var(--sr-text-sm); line-height: 1.4; } .msg-reaction:hover { background: var(--sr-color-surface-hover); } .msg-reaction.is-mine { border-color: var(--sr-color-primary); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); } .msg-reaction__count { font-weight: var(--sr-weight-semibold); } /* 고정 메시지 막대 */ .pinned-bar { display: flex; flex: none; align-items: center; gap: var(--sr-space-2); padding: 7px var(--sr-space-4); border-bottom: 1px solid var(--sr-color-border); background: var(--sr-color-warning-soft); color: var(--sr-color-text); font-size: var(--sr-text-md); } .pinned-bar__text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pinned-bar__close { display: inline-flex; flex: none; padding: 2px; border: none; border-radius: var(--sr-radius-sm); background: transparent; color: var(--sr-color-text-muted); } .pinned-bar__close:hover { background: rgba(0, 0, 0, 0.06); } /* 답장 작성 바 */ .composer__reply { display: flex; align-items: center; gap: var(--sr-space-2); margin-bottom: var(--sr-space-1); padding: 6px 8px; border-left: 3px solid var(--sr-color-primary); border-radius: var(--sr-radius-sm); background: var(--sr-color-surface-2); font-size: var(--sr-text-md); } .composer__reply-body { display: flex; flex: 1; gap: var(--sr-space-2); min-width: 0; } .composer__reply-text { overflow: hidden; color: var(--sr-color-text-muted); text-overflow: ellipsis; white-space: nowrap; } /* @ 자동완성 */ .composer__mentions { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; width: min(320px, 100%); max-height: 260px; margin: 0; padding: var(--sr-space-1); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface); box-shadow: var(--sr-shadow-lg); list-style: none; overflow-y: auto; } .composer__mention { display: flex; align-items: baseline; gap: var(--sr-space-2); width: 100%; padding: 6px 10px; border: none; border-radius: var(--sr-radius-md); background: transparent; text-align: left; } .composer__mention.is-active, .composer__mention:hover { background: var(--sr-color-surface-hover); } .composer__mention-name { font-weight: var(--sr-weight-semibold); } .composer__mention-desc { color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } /* 본문 안의 @멘션 */ .msg-mention { padding: 0 2px; border-radius: 3px; background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-weight: var(--sr-weight-semibold); } /* 방 목록의 "나를 언급함" 표시 */ .room-item__mention { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--sr-radius-full); background: var(--sr-color-unread); color: #fff; font-size: var(--sr-text-xs); font-weight: var(--sr-weight-bold); } /* ── 전달(Forward) · 메시지 선택 ─────────────────────────── */ /* 전달받은 메시지 표시 (말풍선 위) */ .msg-forwarded { display: inline-flex; align-items: center; gap: 4px; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } /* 메시지 선택 모드 */ .msg--selecting { cursor: pointer; border-radius: var(--sr-radius-md); } .msg--selecting:hover { background: var(--sr-color-surface-hover); } .msg--selecting.is-selected { background: var(--sr-color-primary-soft); } .msg__select { display: flex; flex: none; align-items: center; justify-content: center; /* 손이 빗나가지 않도록 네모 주변까지 누를 수 있게 넉넉히 잡는다 */ min-width: 36px; padding-right: var(--sr-space-2); cursor: pointer; } .msg__select .sr-checkbox { padding: 6px; } .msg__select .sr-checkbox input { width: 18px; height: 18px; cursor: pointer; } /* 선택 모드에서 입력창 자리에 뜨는 줄 */ .selection-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--sr-space-3); padding: var(--sr-space-3) var(--sr-space-4); border-top: 1px solid var(--sr-color-border); background: var(--sr-color-surface); } .selection-bar__count { flex: none; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); } .selection-bar__actions { display: flex; gap: var(--sr-space-2); } /* 전달 대화상자 */ .forward { display: flex; flex-direction: column; gap: var(--sr-space-3); min-height: 0; } .forward__preview { display: flex; flex-direction: column; gap: 2px; max-height: 120px; margin: 0; padding: var(--sr-space-2) var(--sr-space-3); overflow-y: auto; border-radius: var(--sr-radius-sm); background: var(--sr-color-surface-2); list-style: none; font-size: var(--sr-text-sm); } .forward__preview li { display: flex; gap: var(--sr-space-2); min-width: 0; } .forward__preview-sender { flex: none; color: var(--sr-color-primary-text); font-weight: var(--sr-weight-semibold); } .forward__preview-text { overflow: hidden; color: var(--sr-color-text-muted); text-overflow: ellipsis; white-space: nowrap; } .forward__preview-more { color: var(--sr-color-text-muted); } .forward__tabs { display: flex; gap: var(--sr-space-1); border-bottom: 1px solid var(--sr-color-border); } .forward__tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--sr-space-3); border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); font-weight: var(--sr-weight-semibold); } .forward__tab.is-active { border-bottom-color: var(--sr-color-primary); color: var(--sr-color-primary-text); } .forward__tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--sr-radius-full); background: var(--sr-color-primary); color: #fff; font-size: var(--sr-text-xs); } .forward__rooms { display: flex; flex-direction: column; gap: var(--sr-space-2); min-height: 0; } .forward__search { display: flex; align-items: center; gap: var(--sr-space-2); color: var(--sr-color-text-muted); } .forward__search input { flex: 1; } .forward__room-list { display: flex; flex-direction: column; max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; } .forward__room-list > li { padding: 2px 0; } .forward__room { display: flex; align-items: center; gap: var(--sr-space-2); min-width: 0; } .forward__room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forward__room-sub { margin-left: 6px; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .forward__room-tag { flex: none; padding: 1px 6px; border-radius: var(--sr-radius-full); background: var(--sr-color-surface-2); color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .forward__empty { padding: var(--sr-space-4); color: var(--sr-color-text-muted); text-align: center; } /* ── 첨부 파일 저장 (저장 → 폴더 열기) ────────────────────── */ .msg-save { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-full); background: var(--sr-color-surface); color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); white-space: nowrap; } .msg-save:hover:not(:disabled) { border-color: var(--sr-color-primary); color: var(--sr-color-primary-text); } .msg-save:disabled { opacity: 0.6; } .msg-image__actions { display: flex; justify-content: flex-end; margin-top: 4px; } /* 이미지 크게 보기 */ .image-viewer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--sr-space-6); background: rgba(0, 0, 0, 0.75); } .image-viewer img { max-width: 100%; max-height: 100%; border-radius: var(--sr-radius-md); object-fit: contain; } .image-viewer__close { position: absolute; top: var(--sr-space-4); right: var(--sr-space-4); display: inline-flex; padding: 6px; border: none; border-radius: var(--sr-radius-full); background: rgba(255, 255, 255, 0.15); color: #fff; } .image-viewer__close:hover { background: rgba(255, 255, 255, 0.3); } /* ── 개인 이모티콘 (/약어) ─────────────────────────────────── */ .msg-emoticon { display: block; max-width: 100px; max-height: 100px; object-fit: contain; } .msg-emoticon--missing { color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); font-style: italic; } /* 입력창 위 이모티콘 자동완성 */ .composer__emoticons { display: flex; flex-wrap: wrap; gap: var(--sr-space-1); max-height: 180px; margin: 0 0 var(--sr-space-1); padding: var(--sr-space-2); overflow-y: auto; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface); list-style: none; } .composer__emoticon { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; padding: 6px 4px; border: 1px solid transparent; border-radius: var(--sr-radius-sm); background: transparent; } .composer__emoticon.is-active, .composer__emoticon:hover { border-color: var(--sr-color-primary); background: var(--sr-color-primary-soft); } .composer__emoticon-name { overflow: hidden; color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); text-overflow: ellipsis; white-space: nowrap; } /* 설정 > 내 이모티콘 */ .emoticons { display: flex; flex-direction: column; gap: var(--sr-space-3); } .emoticons__hint { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .emoticons__hint code { padding: 1px 5px; border-radius: var(--sr-radius-sm); background: var(--sr-color-surface-2); } .emoticons__section { margin: var(--sr-space-3) 0 0; padding-top: var(--sr-space-3); border-top: 1px solid var(--sr-color-border); font-size: var(--sr-text-md); } .emoticons__add { display: flex; align-items: flex-end; gap: var(--sr-space-2); } .emoticons__field { display: flex; flex-direction: column; gap: 4px; } .emoticons__field-label { color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .emoticons__input-wrap { display: flex; align-items: center; gap: 4px; } .emoticons__slash { color: var(--sr-color-text-muted); font-weight: var(--sr-weight-semibold); } .emoticons__error { margin: 0; color: var(--sr-color-danger); font-size: var(--sr-text-sm); } .emoticons__empty { margin: 0; color: var(--sr-color-text-muted); } .emoticons__list { display: flex; flex-wrap: wrap; gap: var(--sr-space-3); margin: 0; padding: 0; list-style: none; } .emoticons__item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; padding: var(--sr-space-2); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); } .emoticons__shortcut { overflow: hidden; font-size: var(--sr-text-sm); text-overflow: ellipsis; white-space: nowrap; } .emoticons__actions { display: flex; gap: 4px; } .emoticons__action { display: inline-flex; padding: 3px; border: none; border-radius: var(--sr-radius-sm); background: transparent; color: var(--sr-color-text-muted); } .emoticons__action:hover { background: var(--sr-color-surface-hover); } .emoticons__action--danger:hover { color: var(--sr-color-danger); } /* ── 멘션 강조 · 내 멘션 모아보기 ─────────────────────────── */ /* 나를 부른 멘션은 네이버웍스처럼 노란 배경으로 더 눈에 띄게 표시한다. */ .msg-mention.is-me { padding: 0 3px; border-radius: 3px; background: var(--sr-color-mention-me, #fff176); color: var(--sr-color-text); font-weight: var(--sr-weight-semibold); } .mentions-panel { display: flex; flex-direction: column; gap: var(--sr-space-3); height: 100%; padding: var(--sr-space-5); overflow-y: auto; } .mentions-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); } .mentions-panel__title { display: flex; align-items: center; gap: var(--sr-space-2); margin: 0; font-size: var(--sr-text-xl); } .mentions-panel__list { display: flex; flex-direction: column; gap: var(--sr-space-2); margin: 0; padding: 0; list-style: none; } .mention-card { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: var(--sr-space-3); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface); text-align: left; } .mention-card:hover { background: var(--sr-color-surface-hover); } .mention-card.is-unread { border-left: 3px solid var(--sr-color-primary); } .mention-card__top { display: flex; align-items: center; gap: var(--sr-space-2); font-size: var(--sr-text-sm); } .mention-card__room { font-weight: var(--sr-weight-semibold); } .mention-card__kind { padding: 1px 6px; border-radius: var(--sr-radius-full); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-size: var(--sr-text-xs); } .mention-card__time { margin-left: auto; color: var(--sr-color-text-muted); } .mention-card__sender { color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .mention-card__body { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .mentions-panel__more { display: flex; justify-content: center; } /* ── 예약 메시지 · 나중에 알림 ─────────────────────────────── */ .conversation__tool-badge { position: relative; display: inline-flex; } .conversation__tool-dot { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: var(--sr-radius-full); background: var(--sr-color-primary); } .time-choice { display: flex; flex-direction: column; gap: var(--sr-space-3); } .time-choice__presets { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); } .time-choice__preset { padding: 6px 12px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-full); background: var(--sr-color-surface); font-size: var(--sr-text-md); } .time-choice__preset:hover:not(:disabled) { border-color: var(--sr-color-primary); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); } .time-choice__custom { display: flex; flex-direction: column; gap: 4px; font-size: var(--sr-text-sm); } .time-choice__error { margin: 0; color: var(--sr-color-danger); font-size: var(--sr-text-sm); } .scheduled__empty { margin: 0; color: var(--sr-color-text-muted); } .scheduled__list { display: flex; flex-direction: column; gap: var(--sr-space-2); max-height: 340px; margin: 0; padding: 0; overflow-y: auto; list-style: none; } .scheduled__item { display: flex; flex-direction: column; gap: 4px; padding: var(--sr-space-3); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); } .scheduled__head { display: flex; align-items: center; gap: 6px; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .scheduled__failed { padding: 1px 6px; border-radius: var(--sr-radius-full); background: var(--sr-color-danger-soft, #fde8e8); color: var(--sr-color-danger); font-size: var(--sr-text-xs); } .scheduled__body { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .scheduled__actions, .reminder-card__actions { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); margin-top: 4px; } /* ── 채팅방 폴더 · 공지 채널 ───────────────────────────────── */ .folder-bar { display: flex; flex: none; gap: 4px; padding: 0 var(--sr-space-3) var(--sr-space-2); overflow-x: auto; } .folder-chip { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-full); background: var(--sr-color-surface); color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); white-space: nowrap; } .folder-chip:hover { background: var(--sr-color-surface-hover); } .folder-chip.is-active { border-color: var(--sr-color-primary); background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); font-weight: var(--sr-weight-semibold); } .folder-chip__count { color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .folder-chip--menu { padding: 3px 8px; } .room-item__favorite { display: inline-flex; margin-left: 4px; color: var(--sr-color-brand); vertical-align: -1px; } /* * 상단 고정 버튼. * 평소에는 숨어 있다가 마우스를 올리거나 키보드로 옮겨 오면 나타난다. * 이미 고정한 방은 언제나 보이게 해서 "여기를 다시 누르면 풀린다"가 드러나게 한다. */ .room-item__pin { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--sr-radius-md); opacity: 0; background: transparent; color: var(--sr-color-text-subtle); transition: opacity 0.12s ease, color 0.12s ease; } .room-item:hover .room-item__pin, .room-item__pin:focus-visible, .room-item.is-pinned .room-item__pin { opacity: 1; } .room-item.is-pinned .room-item__pin { color: var(--sr-color-brand); } .room-item__pin:hover { background: var(--sr-color-surface-active); color: var(--sr-color-text); } .room-item__muted { margin-left: 4px; color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .room-item__group-avatar--notice, .conversation__group-avatar--notice { background: var(--sr-color-warning-soft); color: #8a6100; } .admin-section { display: flex; flex-direction: column; gap: var(--sr-space-3); } .admin-section__hint { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .admin-section__row { display: flex; align-items: flex-end; gap: var(--sr-space-2); } /* ── 업무(Task) ───────────────────────────────────────────── */ .tasks-panel { display: flex; flex-direction: column; gap: var(--sr-space-3); height: 100%; padding: var(--sr-space-5); overflow-y: auto; } .tasks-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); } .tasks-panel__title { display: flex; align-items: center; gap: var(--sr-space-2); margin: 0; font-size: var(--sr-text-xl); } .tasks-panel__search { width: 100%; } .tasks-panel__search-note { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .tasks-panel__list { display: flex; flex-direction: column; gap: var(--sr-space-2); margin: 0; padding: 0; list-style: none; } .task-card { display: flex; flex-direction: column; gap: 5px; padding: var(--sr-space-3); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface); } .task-card.is-overdue { border-left: 3px solid var(--sr-color-danger); } .task-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-2); } .task-card__status { padding: 1px 8px; border-radius: var(--sr-radius-full); background: var(--sr-color-surface-2); color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .task-card__status.is-in_progress { background: var(--sr-color-primary-soft); color: var(--sr-color-primary-text); } .task-card__status.is-done { background: #e6f4ea; color: #1e7b34; } .task-card__priority { padding: 1px 8px; border-radius: var(--sr-radius-full); background: var(--sr-color-warning-soft); color: #8a6100; font-size: var(--sr-text-xs); } .task-card__priority.is-urgent { background: #fde8e8; color: var(--sr-color-danger); } .task-card__title { font-weight: var(--sr-weight-semibold); } .task-card__due { margin-left: auto; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .task-card.is-overdue .task-card__due { color: var(--sr-color-danger); } .task-card__desc { margin: 0; color: var(--sr-color-text-muted); white-space: pre-wrap; } .task-card__meta { display: flex; gap: var(--sr-space-3); color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .task-card__actions { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); margin-top: 2px; } .task-form { display: flex; flex-direction: column; gap: var(--sr-space-3); min-height: 0; } .task-form__source { margin: 0; padding: var(--sr-space-2); overflow: hidden; border-radius: var(--sr-radius-sm); background: var(--sr-color-surface-2); color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); text-overflow: ellipsis; white-space: nowrap; } .task-form__field { display: flex; flex: 1; flex-direction: column; gap: 4px; } .task-form__label { color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .task-form__textarea { height: auto; padding: 8px 10px; resize: vertical; } .task-form__row { display: flex; gap: var(--sr-space-3); } /* ── Markdown 서식 ────────────────────────────────────────── */ .composer__format { display: inline-flex; gap: 1px; padding-right: var(--sr-space-2); margin-right: var(--sr-space-1); border-right: 1px solid var(--sr-color-border); } .md-code { padding: 1px 5px; border-radius: var(--sr-radius-sm); background: rgba(0, 0, 0, 0.06); font-family: var(--sr-font-mono, ui-monospace, Consolas, monospace); font-size: 0.92em; } .msg--mine .md-code { background: rgba(255, 255, 255, 0.28); } .md-codeblock { max-width: 100%; margin: 4px 0; padding: 8px 10px; overflow-x: auto; border-radius: var(--sr-radius-sm); background: rgba(0, 0, 0, 0.06); font-family: var(--sr-font-mono, ui-monospace, Consolas, monospace); font-size: 0.92em; white-space: pre; } .msg--mine .md-codeblock { background: rgba(255, 255, 255, 0.24); } .md-quote { margin: 4px 0; padding: 2px 0 2px 10px; border-left: 3px solid currentColor; opacity: 0.85; } .md-list { margin: 4px 0; padding-left: 20px; } .md-list li { list-style: disc; } /* ── 묶어서 전달 (FORWARD_BUNDLE) ─────────────────────────── 여러 건이 말풍선 하나로 도착한다. 카드 안에서 앞 3건만 미리 보여주고, "메시지 상세보기"를 누르면 별도 창에서 원문을 본다 (네이버웍스와 같은 방식). */ .fwd-bundle { display: flex; flex-direction: column; gap: 4px; min-width: 220px; max-width: 420px; } .fwd-bundle__head { display: inline-flex; align-items: center; gap: 4px; color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); font-weight: var(--sr-weight-semibold); } .msg--mine .fwd-bundle__head, .msg--mine .fwd-bundle__sep, .msg--mine .fwd-bundle__more { color: rgb(255 255 255 / 75%); } .fwd-bundle__title { font-weight: var(--sr-weight-semibold); } .fwd-bundle__lines { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--sr-text-sm); } .fwd-bundle__lines li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fwd-bundle__sender { font-weight: var(--sr-weight-semibold); } .fwd-bundle__more { color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } .fwd-bundle__open { margin-top: 4px; padding: 7px 10px; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface); color: var(--sr-color-primary-text); font-size: var(--sr-text-sm); font-weight: var(--sr-weight-semibold); cursor: pointer; } .fwd-bundle__open:hover { background: var(--sr-color-surface-hover); } /* 전달받은 원문 목록. 스크롤은 떠 있는 창(.float-window__body)이 맡는다. */ .fwd-detail { display: flex; flex-direction: column; gap: var(--sr-space-4); padding: var(--sr-space-3) var(--sr-space-4) var(--sr-space-4); } .fwd-detail__item { display: flex; gap: var(--sr-space-2); } .fwd-detail__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .fwd-detail__head { display: flex; align-items: baseline; gap: var(--sr-space-2); } .fwd-detail__sender { font-weight: var(--sr-weight-semibold); } .fwd-detail__time { color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } .fwd-detail__content { padding: var(--sr-space-2) var(--sr-space-3); border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface-2); overflow-wrap: anywhere; white-space: pre-wrap; } .forward__bundle { display: flex; flex-direction: column; gap: 2px; } .forward__bundle-hint { margin: 0 0 0 26px; color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); } /* 선택 줄의 "묶어서 전달" (네이버웍스와 같은 자리) */ .selection-bar__bundle { /* 왼쪽 "N건 선택됨" 옆에 붙고, 오른쪽 버튼 묶음은 끝으로 밀어낸다 */ margin-right: auto; display: inline-flex; align-items: center; gap: var(--sr-space-2); padding: 6px 8px; border-radius: var(--sr-radius-md); color: var(--sr-color-text); font-size: var(--sr-text-md); cursor: pointer; user-select: none; } .selection-bar__bundle:hover { background: var(--sr-color-surface-hover); } .selection-bar__bundle input { width: 18px; height: 18px; accent-color: var(--sr-color-primary); cursor: pointer; } .selection-bar__hint { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--sr-radius-full); background: var(--sr-color-surface-hover); color: var(--sr-color-text-muted); font-size: var(--sr-text-xs); font-weight: var(--sr-weight-semibold); } /* ─── 대화방 곁 패널 (대화 내 검색 · 파일) ─────────────────────────────── */ /* * 대화 본문과 곁 패널을 좌우로 나눈다. * min-height: 0 이 없으면 안쪽 목록이 자기 내용만큼 늘어나 스크롤이 생기지 않는다. */ .conversation__split { display: flex; flex: 1; min-height: 0; } .conversation__main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; } .room-panel { display: flex; flex: none; flex-direction: column; width: 340px; min-height: 0; border-left: 1px solid var(--sr-color-border); background: var(--sr-color-surface); } .room-panel__header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--sr-space-2); padding: var(--sr-space-2) var(--sr-space-3); border-bottom: 1px solid var(--sr-color-border); } .room-panel__body { display: flex; flex: 1; flex-direction: column; gap: var(--sr-space-3); min-height: 0; padding: var(--sr-space-3); overflow-y: auto; scrollbar-gutter: stable; } .room-panel__form { display: flex; gap: var(--sr-space-2); } .room-panel__input { flex: 1; min-width: 0; } .room-panel__filters { display: flex; gap: var(--sr-space-2); } .room-panel__filter { flex: 1; min-width: 0; } .room-panel__hint { margin: 0; color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .room-panel__results { display: flex; flex-direction: column; gap: var(--sr-space-2); } /* 이 대화방의 파일 목록 */ .room-files { display: flex; flex-direction: column; gap: var(--sr-space-1); margin: 0; padding: 0; list-style: none; } .room-files__item { display: flex; align-items: center; gap: var(--sr-space-2); padding: var(--sr-space-2); border-radius: var(--sr-radius-md); } .room-files__item:hover { background: var(--sr-color-surface-hover); } .room-files__icon { display: flex; flex: none; color: var(--sr-color-text-muted); } .room-files__body { display: flex; flex: 1; flex-direction: column; min-width: 0; } .room-files__name { overflow: hidden; font-size: var(--sr-text-md); white-space: nowrap; text-overflow: ellipsis; } .room-files__meta { color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .room-files__actions { display: flex; flex: none; gap: 4px; } /* 검색 결과에서 찾아간 메시지를 잠시 강조한다 */ .msg.is-found .msg__bubble { animation: sr-found 2.4s ease-out; } @keyframes sr-found { 0%, 60% { box-shadow: 0 0 0 2px var(--sr-color-primary); } 100% { box-shadow: 0 0 0 2px transparent; } } @media (prefers-reduced-motion: reduce) { .msg.is-found .msg__bubble { animation: none; box-shadow: 0 0 0 2px var(--sr-color-primary); } } /* ─── 리액션 (SRISE 캐릭터 스티커) ───────────────────────────────────── */ .srise-sticker { display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: middle; } .srise-sticker svg { width: 100%; height: 100%; } /* 고르는 줄 */ .srise-sticker-row { display: flex; gap: 2px; } .srise-sticker-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: none; border-radius: var(--sr-radius-full); background: transparent; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; } .srise-sticker-btn:hover { background: var(--sr-color-surface-hover); transform: scale(1.14); } .srise-sticker-btn.is-mine { background: var(--sr-color-primary-soft); } .srise-sticker-btn:focus-visible { outline: 2px solid var(--sr-color-primary); outline-offset: 1px; } /* 반응 고르는 창: 캐릭터 줄 + (접어 둔) 이모지 */ .reaction-picker { display: flex; flex-direction: column; gap: var(--sr-space-2); padding: var(--sr-space-1); } .reaction-picker__more > summary { padding: 4px 6px; border-radius: var(--sr-radius-md); color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); cursor: pointer; list-style: none; } .reaction-picker__more > summary::-webkit-details-marker { display: none; } .reaction-picker__more > summary::before { content: '＋ '; } .reaction-picker__more[open] > summary::before { content: '－ '; } .reaction-picker__more > summary:hover { background: var(--sr-color-surface-hover); } /* ─── 통합 검색: 대화방별 묶음 결과 (대화방 목록 자리) ─────────────────── */ .search-groups { flex: 1; min-height: 0; padding: var(--sr-space-2) 0 var(--sr-space-6); overflow-y: auto; scrollbar-gutter: stable; } .search-groups__state { display: flex; flex: 1; align-items: center; justify-content: center; padding: var(--sr-space-6) var(--sr-space-4); } .search-groups__section + .search-groups__section { margin-top: var(--sr-space-3); } .search-groups__title { margin: 0; padding: var(--sr-space-2) var(--sr-space-4) var(--sr-space-1); color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); font-weight: var(--sr-weight-semibold); } .search-group { display: flex; align-items: center; gap: var(--sr-space-3); width: 100%; padding: var(--sr-space-2) var(--sr-space-4); border: none; background: transparent; text-align: left; cursor: pointer; } .search-group:hover { background: var(--sr-color-surface-hover); } .search-group__body { display: flex; flex: 1; flex-direction: column; min-width: 0; } .search-group__name { overflow: hidden; color: var(--sr-color-text); font-size: var(--sr-text-base); font-weight: var(--sr-weight-semibold); white-space: nowrap; text-overflow: ellipsis; } .search-group__caption { display: flex; align-items: center; gap: 4px; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .search-group__chevron { flex: none; color: var(--sr-color-text-subtle); } /* ─── 대화 위에 떠 있는 작은 창 (검색 결과 · 전달받은 원문) ───────────────── */ /* * 모달이 아니다. 뒤쪽 대화를 눌러도 닫히지 않고, 결과를 눌러 이동해도 그대로 남는다 * (네이버웍스와 같은 동작). 그래서 Dialog가 아니라 떠 있는 상자로 만든다. * 닫는 방법은 제목 줄의 **창 끄기(×)** 하나이고, **창 내리기(−)** 는 본문만 접는다. */ .float-window { position: fixed; top: calc(var(--sr-header-height) + 24px); left: 50%; z-index: 40; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - var(--sr-header-height) - 80px)); overflow: hidden; border: 1px solid var(--sr-color-border-strong); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface); box-shadow: var(--sr-shadow-lg, 0 12px 32px rgb(0 0 0 / 22%)); } .float-window.is-minimized { max-height: none; } .float-window__header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--sr-space-2); padding: 6px 6px 6px 14px; background: var(--sr-color-primary); color: #fff; } .float-window__title { overflow: hidden; font-size: var(--sr-text-md); font-weight: var(--sr-weight-semibold); white-space: nowrap; text-overflow: ellipsis; } .float-window__buttons { display: flex; flex: none; gap: 2px; } .float-window__button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: none; border-radius: var(--sr-radius-sm); background: transparent; color: #fff; cursor: pointer; } .float-window__button:hover { background: rgb(255 255 255 / 20%); } .float-window__button--close:hover { background: var(--sr-color-danger, #d33); } .float-window__button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .float-window__body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .float-window__footer { display: flex; flex: none; align-items: center; gap: var(--sr-space-2); padding: var(--sr-space-2) var(--sr-space-3); border-top: 1px solid var(--sr-color-border); } .hits-window__body { padding: var(--sr-space-1) 0; } .hits-window__empty, .hits-window__hint { margin: 0; color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .hits-window__empty { padding: var(--sr-space-4); text-align: center; } .hits-window__hint { flex: 1; line-height: 1.35; } .hits-row { display: flex; gap: var(--sr-space-2); width: 100%; padding: var(--sr-space-2) var(--sr-space-3); border: none; background: transparent; text-align: left; cursor: pointer; } .hits-row:hover:not(:disabled) { background: var(--sr-color-surface-hover); } .hits-row:disabled { cursor: default; opacity: 0.6; } /* 방금 눌러서 이동한 항목 — 어디까지 봤는지 알 수 있게 남겨 둔다. */ .hits-row.is-visited { background: var(--sr-color-primary-soft); } .hits-row__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--sr-radius-md); background: var(--sr-color-surface-hover); color: var(--sr-color-text-muted); } .hits-row__body { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 1px; } .hits-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sr-space-2); } .hits-row__sender { overflow: hidden; font-size: var(--sr-text-md); font-weight: var(--sr-weight-semibold); white-space: nowrap; text-overflow: ellipsis; } .hits-row__time { flex: none; color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .hits-row__text { display: -webkit-box; overflow: hidden; color: var(--sr-color-text-muted); font-size: var(--sr-text-md); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .hits-row__meta { color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } /* 전달받은 원문 창의 안내 문구 */ .fwd-detail__note { margin: 0; padding: var(--sr-space-3) var(--sr-space-4) 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } /* ─── 관리자: 전체 백업 내보내기 ─────────────────────────────────────── */ .admin-backup__warning { display: flex; align-items: flex-start; gap: var(--sr-space-2); } .admin-backup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-3); } .admin-backup__status { font-weight: var(--sr-weight-semibold); } .admin-backup__status.is-ready { color: var(--sr-color-success-text, #1a7f4b); } .admin-backup__status.is-failed { color: var(--sr-color-danger-text, #c0392b); } .admin-backup__status.is-deleted { color: var(--sr-color-text-subtle); } /* 진행률 막대 */ .admin-backup__progress { position: relative; display: block; margin-top: 4px; overflow: hidden; height: 14px; border-radius: var(--sr-radius-full); background: var(--sr-color-surface-hover); } .admin-backup__bar { position: absolute; inset: 0 auto 0 0; background: var(--sr-color-primary); transition: width 0.3s ease; } .admin-backup__step { position: relative; display: block; padding: 0 6px; color: var(--sr-color-text); font-size: var(--sr-text-xs); line-height: 14px; white-space: nowrap; } .admin-backup__error { display: block; margin-top: 2px; color: var(--sr-color-danger-text, #c0392b); font-size: var(--sr-text-sm); } /* ─── 관리자 표: 여러 개 골라 한 번에 처리하기 ─────────────────────────── */ .admin__col--check { width: 36px; text-align: center; } .admin__col--check input { width: 16px; height: 16px; accent-color: var(--sr-color-primary); cursor: pointer; } .admin__table tr.is-selected { background: var(--sr-color-primary-soft); } /* 고른 항목 수와 일괄 작업 버튼 줄 */ .admin__bulkbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3); padding: var(--sr-space-2) var(--sr-space-3); border: 1px solid var(--sr-color-primary); border-radius: var(--sr-radius-md); background: var(--sr-color-primary-soft); font-size: var(--sr-text-md); } .admin__bulkbar-actions { display: flex; gap: var(--sr-space-2); } /* ── 프로필 카드 (이름·사진을 누르면 뜨는 작은 창) ───────────────────── */ .profile-card { display: flex; flex-direction: column; gap: var(--sr-space-4); } .profile-card__head { display: flex; align-items: center; gap: var(--sr-space-4); } .profile-card__who { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .profile-card__name { margin: 0; font-size: var(--sr-text-lg); font-weight: var(--sr-weight-semibold); } .profile-card__me { color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); font-weight: var(--sr-weight-normal); } .profile-card__rank { margin: 0; color: var(--sr-color-text-muted); font-size: var(--sr-text-sm); } .profile-card__presence { display: flex; align-items: center; margin: 0; gap: 5px; color: var(--sr-color-text-subtle); font-size: var(--sr-text-xs); } /* 바로 할 수 있는 일 (메시지 · 환경설정) — 네이버웍스처럼 큰 아이콘 버튼으로 둔다 */ .profile-card__actions { display: flex; justify-content: center; padding: var(--sr-space-3) 0; border-top: 1px solid var(--sr-color-border); border-bottom: 1px solid var(--sr-color-border); gap: var(--sr-space-6); } .profile-card__action { display: flex; flex-direction: column; align-items: center; min-width: 86px; padding: var(--sr-space-2); border: none; border-radius: var(--sr-radius-md); gap: 5px; background: transparent; color: var(--sr-color-brand); font-size: var(--sr-text-xs); font-weight: var(--sr-weight-semibold); } .profile-card__action:hover:not(:disabled) { background: var(--sr-color-surface-hover); } .profile-card__action:disabled { opacity: 0.5; } .profile-card__details { display: flex; flex-direction: column; margin: 0; gap: var(--sr-space-3); } .profile-card__details > div { display: grid; align-items: start; grid-template-columns: 56px 1fr; gap: var(--sr-space-3); } .profile-card__details dt { color: var(--sr-color-text-subtle); font-size: var(--sr-text-sm); } .profile-card__details dd { display: flex; flex-direction: column; margin: 0; font-size: var(--sr-text-sm); word-break: break-all; } .profile-card__company { font-weight: var(--sr-weight-semibold); } /* 말풍선의 보낸 사람 이름·사진을 누를 수 있게 한다 */ .msg__avatar-btn { display: block; padding: 0; border: none; border-radius: 50%; background: transparent; } .msg__avatar-btn:hover { opacity: 0.85; } .msg__sender-btn { padding: 0; border: none; background: transparent; color: inherit; font: inherit; } .msg__sender-btn:hover { text-decoration: underline; } /* ── 프로필 사진 설정 ─────────────────────────────────────── */ .profile-photo { display: flex; align-items: center; gap: var(--sr-space-4); } .profile-photo__body { display: flex; flex-direction: column; min-width: 0; gap: 3px; } .profile-photo__actions { display: flex; margin-top: var(--sr-space-2); gap: var(--sr-space-2); }