@import url("./organization-direct.css");
/* DDS's Day business palette: cool paper, slate ink and a restrained blue accent. */
:root {
  color-scheme: light;
  --top: #eaeef3;
  --rail: #eaeef3;
  --sidebar: #eaeef3;
  --surface: #f6f8fa;
  --raised: #ffffff;
  --hover: #e4ebf3;
  --text: #242a33;
  --muted: #5d6774;
  --border: #cfd7e0;
  --control-border: #9aa9ba;
  --selected: #d8e2ec;
  --accent: #31597f;
  --on-accent: #ffffff;
  --link: #31597f;
  --focus-ring: #31597f33;
  --danger: #b23a32;
  --success: #4c7f5d;
  --warning: #80601d;
  --warning-bg: #f5ecd5;
  --code: #8c4059;
  --scrim: #182a3c55;
  --shadow: #182a3c26;
  --scroll-thumb: #9aa9ba;
  --sidebar-width: 240px;
  --thread-width: 360px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  font-size: 15px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --top: #192430;
  --rail: #192430;
  --sidebar: #202c39;
  --surface: #17212c;
  --raised: #202d3b;
  --hover: #283849;
  --text: #e5ebf2;
  --muted: #acb9c9;
  --border: #394b5e;
  --control-border: #62778e;
  --selected: #30485f;
  --accent: #a0bfdc;
  --on-accent: #17212c;
  --link: #a9cbed;
  --focus-ring: #a0bfdc40;
  --danger: #f3a39b;
  --success: #86bd98;
  --warning: #e6c580;
  --warning-bg: #3b3322;
  --code: #e6adc0;
  --scrim: #08111bb3;
  --shadow: #08111b66;
  --scroll-thumb: #62778e;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0;
}
button:disabled {
  opacity: 0.42;
  cursor: default;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input,
textarea {
  color: var(--text);
  accent-color: var(--accent);
}
/* Native popups must have a foreground/background pair, not light text on
   an OS-provided light option surface. Covers forwarding and all Space selects. */
select,
select option,
select optgroup {
  color: var(--text);
  background-color: var(--raised);
}
select:disabled,
select option:disabled,
select optgroup:disabled { color: var(--muted); }
input,
textarea,
[contenteditable="true"] {
  caret-color: var(--text);
}
/* The same outlined I-beam used by the planner remains visible on dark surfaces.
   This changes only text-entry targets; drag/resize/button cursors stay native. */
:root[data-theme="dark"] :is(textarea,input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],[contenteditable="true"]) {
  cursor: url('/icons/cursors/light-text.svg') 10 14, text;
}
input:not([type="checkbox"]),
textarea {
  background: var(--surface);
  border: 1px solid var(--input-border, var(--control-border));
  border-radius: 6px;
  padding: 10px;
  outline: none;
}
input:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
input[type="checkbox"] {
  width: 17px;
  height: 17px;
}
textarea {
  resize: none;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
::selection {
  background: var(--selected);
  color: var(--text);
}
h1,
h2,
h3,
p {
  margin: 0;
}
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}
.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  flex: none;
}
.icon-btn:hover {
  background: var(--hover);
}
.muted {
  color: var(--muted);
}
.grow {
  flex: 1;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.primary:hover,
.send-btn:not(:disabled):hover {
  filter: brightness(0.94);
}
.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 5px;
  padding: 10px 18px;
  font-weight: 650;
}
.secondary {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 14px;
  font-weight: 600;
}
.secondary:hover {
  background: var(--hover);
}
.danger {
  color: var(--danger);
}
.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--ui-rail-width, 48px) var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: 40px minmax(0, 1fr);
  overflow: hidden;
  background: var(--rail);
}
.topbar {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  color: var(--text);
  background: var(--top);
}
.topbar .history {
  display: flex;
  align-items: center;
  margin-left: calc(var(--sidebar-width) - 106px);
}
.topbar .icon-btn:hover {
  background: var(--selected);
}
.global-search {
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 680px;
  width: 52%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 9px;
  text-align: left;
  color: var(--muted);
}
.global-search .icon {
  width: 15px;
  height: 15px;
}
.global-search kbd {
  font-size: 12px;
  opacity: 0.6;
  margin-left: auto;
}
.brand-word {
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  color: var(--muted);
  min-height: 0;
}
.workspace-mark,
.brand-mark {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 9px;
  font-weight: 800;
  font-size: 22px;
  position: relative;
  overflow: hidden;
}
.rail > .workspace-mark { width: 32px; height: 32px; font-size: 19px; flex: none; }
.workspace-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rail-nav {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 6px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  align-content: start;
}
.rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  flex: none;
}
.planner-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.rail-planner {
  width: 100%;
  min-height: 54px;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
}
.rail-planner:hover {
  background: var(--selected);
  color: var(--text);
  text-decoration: none;
}
/* 설정 입구 0A: 톱니는 '내 설정'에만, 스페이스 관리는 방패 + '관리' 글자 */
.rail-manage {
  width: 100%;
  min-height: 54px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  cursor: pointer;
}
.rail-manage:hover {
  background: var(--selected);
  color: var(--text);
}
.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  position: relative;
  padding: 0;
  min-height: 50px;
  white-space: nowrap;
}
.rail-item:focus-visible { outline-offset: -2px; border-radius: 6px; }
.rail-item .rail-icon {
  padding: 6px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}
.rail-item:hover .rail-icon {
  background: var(--selected);
}
.rail-item.active .rail-icon {
  background: var(--accent);
  color: var(--on-accent);
}
.rail-item.active {
  color: var(--accent);
  font-weight: 650;
}
.rail .profile {
  margin-top: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
}
.rail .avatar {
  width: 36px;
  height: 36px;
}
.sidebar {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 7px 0 0 7px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workspace-head {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 13px 0 16px;
  gap: 5px;
}
.workspace-name {
  font-size: 18px;
  font-weight: 750;
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}
.workspace-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-name .icon {
  width: 14px;
  height: 14px;
}
.side-find {
  margin: 0 15px 12px;
  position: relative;
}
.side-find input {
  width: 100%;
  height: 31px;
  font-size: 13px;
  padding: 5px 32px 5px 9px;
  background: var(--surface);
}
.side-find-clear.icon-btn { position:absolute; right:2px; top:2px; width:27px; height:27px; color:var(--muted); }
.side-find-clear[hidden] { display:none; }
.side-find-clear .icon { width:14px; height:14px; }
.side-search-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.side-search-empty { padding:12px 10px; color:var(--muted); font-size:13px; }
.side-search-all { display:flex; align-items:center; gap:8px; color:var(--link); max-width:100%; text-align:left; }
.side-search-all span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-search-all .icon { width:16px; height:16px; flex:none; }
.side-result-state { flex:none; font-size:11px; font-weight:400; color:var(--muted); }
.group-label.side-people-label { padding-left:10px; }
@media (pointer:coarse) {
  .side-find input { height:44px; padding-right:44px; }
  .side-find-clear.icon-btn { top:0; right:0; width:44px; height:44px; }
  .side-item[data-conversation-result], .side-search-all { min-height:44px; }
}
.side-viewport { position:relative; flex:1; min-height:0; display:flex; }
.side-scroll {
  flex: 1;
  overflow: auto;
  overscroll-behavior-y: contain;
  padding: 0 8px 20px;
}
.side-item {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 0 10px;
  border-radius: 5px;
  color: var(--muted);
  line-height: 20px;
}
.side-item .icon {
  width: 20px;
  height: 20px;
}
.side-item:hover {
  background: var(--selected);
}
.side-item.active {
  background: var(--selected);
  color: var(--accent);
  font-weight: 650;
}
.side-item.unread {
  color: var(--text);
  font-weight: 700;
}
.side-item .label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-item .badge, .group-toggle .badge {
  border-radius: 12px;
  padding: 0 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.group-toggle.unread { color:var(--text); font-weight:700; }
.group-toggle .badge { margin-left:auto; flex:none; }
.unread-jump {
  position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; gap:5px;
  max-width:calc(100% - 20px); min-height:28px; padding:4px 12px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--accent); color:var(--on-accent); box-shadow:0 2px 7px #0002;
  font-size:12px; font-weight:650; white-space:nowrap;
}
.unread-jump[hidden] { display:none; }
.unread-jump-up { top:6px; }
.unread-jump-down { bottom:6px; }
.unread-jump .icon { width:14px; height:14px; flex:none; }
.unread-jump-up .icon { transform:rotate(90deg); }
.unread-jump-down .icon { transform:rotate(-90deg); }
.unread-jump:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
@media (pointer:coarse) { .unread-jump { min-height:40px; } }
.side-item .avatar {
  height: 20px;
  width: 20px;
  font-size: 12px;
  border-radius: 4px;
}
.side-group {
  margin-top: 16px;
}
.side-item[data-channel-drag] { cursor: grab; user-select: none; }
.side-item[data-channel-drag] * { -webkit-user-drag: none; }
.channel-drag-preview {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  max-width: 220px;
  padding: 7px 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 3px 12px #0002;
  font-size: 13px;
}
.side-item.channel-drag-source { opacity: .45; cursor: grabbing; }
.side-item[aria-busy="true"] { opacity: .65; }
.channel-drop-hint { display: none; }
.channel-dragging .channel-drop-ready { display: block !important; border-radius: 6px; }
.channel-dragging .channel-drop-ready > .channel-drop-hint {
  display: block;
  margin: 2px 4px 6px;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}
.channel-dragging .channel-drop-active {
  background: var(--selected);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.channel-dragging .channel-drop-active > .channel-drop-hint { color: var(--accent); border-color: var(--accent); }
.group-label {
  height: 32px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  gap: 2px;
  color: var(--muted);
  font-size: 14px;
}
.group-label .icon {
  width: 20px;
  height: 20px;
}
.group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 4px 0 10px;
  border-radius: 5px;
  text-align: left;
  color: inherit;
}
.group-toggle:hover { background: var(--selected); color: var(--text); }
.group-toggle:focus-visible { outline-offset: -2px; }
.group-toggle > .icon:first-child { padding: 3px; }
/* Both symbols share one fixed slot: the title never shifts on hover. */
.group-toggle > .group-marker { position:relative; width:20px; height:20px; flex:0 0 20px; overflow:visible; }
.group-marker > .icon { position:absolute; inset:0; }
.group-marker > .group-symbol { width:17px; height:17px; margin:auto; }
.group-marker > .group-chevron { padding:3px; opacity:0; }
.group-toggle[aria-expanded="false"] .group-chevron { transform:rotate(-90deg); }
.group-label:hover .group-marker > .group-symbol,
.group-toggle:focus-visible .group-marker > .group-symbol { opacity:0; }
.group-label:hover .group-marker > .group-chevron,
.group-toggle:focus-visible .group-marker > .group-chevron { opacity:1; }
@media (hover:none), (pointer:coarse), (max-width:760px) {
  .group-marker > .group-symbol { opacity:0; }
  .group-marker > .group-chevron { opacity:1; }
}
.group-toggle[aria-expanded="false"] > .icon:first-child { transform: rotate(-90deg); }
.group-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-label > .icon-btn { width: 28px; height: 28px; }
.resizer {
  position: absolute;
  right: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  z-index: 4;
  cursor: col-resize;
  touch-action: none;
}
/* Narrow mouse resize strips must not capture a nearby finger swipe. */
@media (pointer: coarse) {
  .resizer { pointer-events: none; }
}
.resizer:hover {
  background: var(--focus-ring);
}
.main {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  min-height: 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 7px 7px 0;
  margin-right: 4px;
}
.conversation {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.channel-head {
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.channel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 750;
  min-width: 0;
  text-align: left;
}
.channel-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.member-stack {
  display: flex;
  align-items: center;
  padding: 4px 7px;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.member-stack > span {
  display: flex;
}
.member-stack .avatar {
  width: 22px;
  height: 22px;
  border: 2px solid var(--surface);
  margin-left: -7px;
  font-size: 11px;
  border-radius: 6px;
}
.channel-tabs {
  height: 39px;
  min-height: 39px;
  display: flex;
  gap: 22px;
  align-items: stretch;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
}
.channel-tabs button {
  padding: 0;
  font-size: 14px;
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  position: relative;
}
.channel-tabs .icon {
  width: 15px;
  height: 15px;
}
.channel-tabs button.active {
  color: var(--accent);
  font-weight: 650;
}
.channel-tabs button.active:after {
  position: absolute;
  content: "";
  height: 3px;
  background: var(--accent);
  left: 0;
  right: 0;
  bottom: 0;
}
.messages {
  flex: 1;
  overflow: auto;
  overscroll-behavior-y: contain;
  min-height: 0;
  padding: 14px 0 18px;
  scrollbar-gutter: stable;
}
.intro {
  padding: 22px 22px 20px;
}
.intro h1 {
  font-size: 26px;
  margin: 12px 0;
}
.intro p {
  color: var(--muted);
  line-height: 1.6;
}
.intro-icon {
  display: inline-grid;
  place-items: center;
  background: var(--raised);
  border-radius: 9px;
  width: 54px;
  height: 54px;
}
.intro-icon .icon {
  height: 30px;
  width: 30px;
}
.date-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 12px;
  position: relative;
  pointer-events: none;
}
.date-rule:before,
.date-rule:after {
  content: "";
  height: 1px;
  background: var(--border);
  flex: 1;
}
.date-rule button, .floating-date button {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 5px 13px;
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
  cursor: pointer;
}
.date-rule button:hover, .date-rule button[aria-expanded="true"], .floating-date button:hover, .floating-date button[aria-expanded="true"] { background: var(--hover); }
.date-rule button:focus-visible, .floating-date button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.date-rule button .icon, .floating-date button .icon { width: 12px; height: 12px; }
.date-menu { min-width: 200px; max-width: calc(100vw - 16px); }
.date-menu small { display: block; padding: 8px 12px; color: var(--muted); }
.date-menu button:last-child { border-top: 1px solid var(--border); margin-top: 5px; }
.history-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px 12px; flex-shrink: 0; }
.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 22px;
  position: relative;
  outline: none;
}
.message:hover,
.message:focus-within {
  background: var(--hover);
}
.message .message-body {
  min-width: 0;
  flex: 1;
}
.avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-weight: 700;
  flex: none;
  border-radius: 7px;
  font-size: 18px;
  color: #fff;
  background: #47688a;
}
.a0 {
  background: #6d6251;
}
.a1 {
  background: #47688a;
}
.a2 {
  background: #4e7566;
}
.a3 {
  background: #8a6349;
}
.a4 {
  background: #916077;
}
.a5 {
  background: #626a91;
}
.a6 {
  background: #437681;
}
.message-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  line-height: 20px;
  flex-wrap: wrap;
  row-gap: 0;
}
.message-meta .name {
  font-weight: 700;
  padding: 0;
  text-align: left;
}
.message-meta .stamp {
  font-size: 12px;
  color: var(--muted);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.message-text {
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: normal;
}
.message-text code {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--code);
  font-size: 13px;
}
.message-text pre {
  background: var(--raised);
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.message-text pre code {
  border: 0;
  color: var(--text);
  white-space: pre-wrap;
}
.message-text blockquote {
  margin: 4px 0;
  padding: 0 12px;
  border-left: 3px solid var(--muted);
  color: var(--muted);
}
.mention {
  background: var(--selected);
  color: var(--link);
  border-radius: 3px;
}
.message-tools {
  position: absolute;
  right: 18px;
  top: -17px;
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px var(--shadow);
  border-radius: 6px;
  padding: 3px;
  z-index: 3;
}
.message:hover > .message-tools,
.message:focus-within > .message-tools {
  display: flex;
}
.message-tools .icon-btn {
  width: 30px;
  height: 29px;
}
.message-tools .icon {
  width: 17px;
  height: 17px;
}
.message-tools .quick-reaction {
  border: 1px solid transparent;
  font-size: 17px;
}
.message-tools .quick-reaction.mine {
  background: var(--selected);
  border-color: var(--accent);
}
.reaction-tooltip {
  position: fixed;
  z-index: 80;
  max-width: min(320px, calc(100vw - 16px));
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--text);
  color: var(--surface);
  box-shadow: 0 2px 6px var(--shadow);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  pointer-events: none;
}
@media (pointer: coarse) {
  .message-tools .quick-reaction { width: 44px; height: 44px; }
  .message-tools { align-items: center; }
}
.reactions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.reaction {
  display: flex;
  gap: 5px;
  align-items: center;
  border: 1px solid transparent;
  background: var(--raised);
  border-radius: 16px;
  padding: 3px 9px;
  font-size: 12px;
}
.reaction.mine {
  background: var(--selected);
  border-color: var(--accent);
  color: var(--link);
}
.reply-link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: var(--link);
  font-size: 13px;
  padding: 0;
  font-weight: 600;
}
.reply-link .icon {
  width: 16px;
  height: 16px;
}
.reply-link span {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
}
.pin-label {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pin-label .icon {
  width: 12px;
  height: 12px;
}
.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  max-width: 300px;
  border: 1px solid var(--border);
  background: var(--raised);
  border-radius: 7px;
  padding: 10px;
  color: var(--text);
}
.file-card > .icon {
  color: var(--accent);
  flex: none;
  width: 28px;
  height: 28px;
}
.file-card b {
  display: block;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.file-card small {
  color: var(--muted);
  font-size: 12px;
}
.file-card .icon-btn {
  margin-left: auto;
}
.composer-wrap {
  padding: 4px 20px 8px;
}
.composer {
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--raised);
  overflow: hidden;
}
.formatbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 5px;
  color: var(--muted);
}
.formatbar .icon {
  width: 17px;
  height: 17px;
}
.formatbar .icon-btn {
  height: 28px;
}
.formatbar .divider {
  height: 16px;
  background: var(--border);
  width: 1px;
  margin: 0 7px;
}
.composer textarea {
  width: 100%;
  min-height: 42px;
  max-height: 180px;
  padding: 7px 12px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  line-height: 1.5;
  display: block;
}
.composer textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.compose-actions {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--muted);
}
.compose-actions .icon {
  width: 18px;
  height: 18px;
}
.send-btn {
  background: var(--accent);
  color: var(--on-accent) !important;
  margin-left: auto;
  min-width: 40px;
  border-radius: 5px;
}
.send-btn:disabled {
  background: none;
  color: var(--muted) !important;
}
.composer-foot {
  min-height: 20px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  padding-top: 4px;
}
.pending-files {
  padding: 4px 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pending-file {
  font-size: 12px;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  padding: 3px 5px;
  border-radius: 5px;
}
.thread-pane {
  width: var(--thread-width);
  min-width: 300px;
  border-left: 1px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
}
.thread-pane .channel-head {
  font-size: 17px;
  font-weight: 700;
}
.thread-pane .messages {
  padding-top: 15px;
}
.thread-pane .message {
  padding-left: 16px;
  padding-right: 16px;
}
.thread-pane .composer-wrap {
  padding: 8px 16px;
}
.thread-pane .composer-foot {
  font-size: 12px;
}
.thread-pane .resizer {
  left: -3px;
  right: auto;
}
.thread-pane .formatbar .optional {
  display: none;
}
.empty {
  max-width: 440px;
  margin: auto;
  text-align: center;
  padding: 50px 28px;
  line-height: 1.65;
  color: var(--muted);
}
.empty > .icon {
  width: 45px;
  height: 45px;
  opacity: 0.65;
  margin-bottom: 15px;
}
.empty h2 {
  font-size: 21px;
  color: var(--text);
  margin-bottom: 8px;
}
.empty .primary {
  margin-top: 20px;
}
.collection {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.collection-head {
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
}
.collection-head h1 {
  font-size: 23px;
}
.collection-head p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
}
.collection-list {
  overflow: auto;
  flex: 1;
  padding: 16px 20px;
}
.result {
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 12px;
  overflow: visible;
}
.result-context {
  padding: 12px 18px 4px;
  color: var(--muted);
  font-size: 12px;
}
.result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
.result-summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-jump {
  flex: none;
  padding: 6px 0;
  color: var(--link);
  font-size: inherit;
  white-space: nowrap;
}
.result-jump:hover {
  text-decoration: underline;
}
.result .message {
  padding: 9px 18px 14px;
}
/* 내 활동 카드: 이유 · 장소(링크) · 날짜. 카드 전체가 그 메시지로 가는 링크다. */
.activity-card { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.activity-card:hover { border-color: color-mix(in srgb, var(--text) 38%, var(--border)); box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 10%, transparent); }
.activity-card:has(.activity-place:focus-visible) { border-color: var(--accent); }
.activity-head { gap: 8px; min-width: 0; }
.activity-reason { flex: none; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 18px;
  background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--text); }
.activity-reason[data-reason="mention"] { background: var(--warning-bg); color: color-mix(in srgb, var(--warning) 70%, var(--text)); }
.activity-reason[data-reason="reply"] { background: color-mix(in srgb, var(--link) 14%, transparent); color: color-mix(in srgb, var(--link) 80%, var(--text)); }
.activity-reason[data-reason="dm"], .activity-reason[data-reason="agent"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: color-mix(in srgb, var(--accent) 75%, var(--text)); }
.activity-place { display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 32px; padding: 0; color: var(--text); font-size: inherit; }
.activity-place b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-place:hover b { text-decoration: underline; }
.activity-place .icon { flex: none; width: 14px; height: 14px; }
.activity-day { flex: none; white-space: nowrap; }
.compact-message .message-avatar { cursor: inherit; }
/* 카드 자체가 링크이므로 메시지 줄의 마우스 올림 바탕 대신 카드 테두리만 진해진다. */
.compact-message:hover, .compact-message:focus-within { background: transparent; }
.compact-message .message-meta .name { font-weight: 700; }
/* 내 활동 날짜 구분·묶음·새 활동 */
.date-rule .date-label, .floating-date .date-label { border: 1px solid var(--border); border-radius: 20px; background: var(--surface); padding: 5px 13px; font-weight: 600; color: var(--text); font-size: 12px; }
.activity-date { margin: 18px 0 10px; }
.activity-date:first-child, .activity-new-count + .activity-date { margin-top: 2px; }
.activity-span { flex: none; white-space: nowrap; }
.activity-earlier { display: block; margin: 6px 18px 0 60px; min-height: 32px; padding: 0; color: var(--link); font-size: 13px; font-weight: 600; }
.activity-earlier:hover { text-decoration: underline; }
.activity-card .compact-message { padding: 6px 18px; }
.activity-card .compact-message:last-child { padding-bottom: 14px; }
.activity-earlier-list > .compact-message:last-child { padding-bottom: 6px; }
.activity-card .result-header + .compact-message { padding-top: 9px; }
.activity-card .compact-message.is-continued { padding-top: 0; }
.activity-card .compact-message.is-continued .message-avatar { visibility: hidden; height: 0; }
.activity-card .compact-message.is-continued .message-meta .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.activity-card .compact-message.is-new { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.activity-card .compact-message.is-new .message-text { font-weight: 600; }
.activity-new-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); align-self: center; }
.activity-card.has-new { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.activity-new-count { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.activity-seen-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; color: var(--muted); font-size: 12px; }
.activity-seen-divider:before, .activity-seen-divider:after { content: ""; height: 1px; flex: 1; background: var(--border); }
/* 긴 본문 접기: 목록에서만 6줄. 큰 제목은 본문 크기로 낮춘다. */
.result-fold .message-text { position: relative; }
.result .result-fold .message-text :is(h1,h2,h3) { font-size: 1em; margin: .3em 0; }
.result-fold.is-folded .message-text { max-height: var(--fold-height, 9em); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent); }
.result-fold-toggle { margin-top: 4px; min-height: 32px; padding: 0; color: var(--link); font-size: 13px; font-weight: 600; }
.result-fold-toggle:hover { text-decoration: underline; }
.result .result-open {
  display: block;
  padding: 8px 18px;
  width: 100%;
  text-align: left;
  color: var(--link);
  font-size: 13px;
  border-top: 1px solid var(--border);
}
.dm-directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 24px;
  align-content: start;
}
.person-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 16px;
}
.person-card:hover {
  background: var(--hover);
}
.person-card small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
}
.load-more {
  display: block;
  margin: 0 auto 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 15px;
  font-size: 13px;
}
.login-screen,
.starting {
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  background: var(--surface);
  text-align: center;
}
.login-screen h1 {
  font-size: 30px;
}
.login-screen p {
  color: var(--muted);
  max-width: 410px;
  line-height: 1.6;
}
.login-screen .primary {
  margin-top: 8px;
}
.mobile-menu {
  display: none;
}
.dialog-shade {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dialog {
  width: 520px;
  max-width: 100%;
  max-height: 90dvh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 20px 80px var(--shadow);
}
.dialog.wide {
  width: 680px;
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 14px;
}
.dialog-head h2 {
  font-size: 21px;
}
.dialog-content {
  padding: 5px 24px 24px;
}
.dialog p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.dialog label {
  display: block;
  margin: 15px 0 6px;
  font-weight: 600;
  font-size: 14px;
}
.dialog input:not([type="checkbox"]),
.dialog textarea {
  width: 100%;
}
.dialog textarea {
  min-height: 100px;
}
.dialog .checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 400;
}
.dialog .checkline[hidden] { display: none; }
.channel-members-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.channel-members-summary > span { color: var(--muted); font-size: 14px; }
.channel-members-summary button { display: inline-flex; align-items: center; gap: 6px; }
.channel-members-summary .icon { width: 16px; height: 16px; }
.channel-member-options { max-height: 260px; overflow: auto; margin-top: 8px; }
.dialog .channel-member-option { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px; border-radius: 6px; cursor: pointer; }
.dialog .channel-member-option[hidden] { display: none; }
.channel-member-option:hover { background: var(--hover); }
.channel-member-option > span:last-child { min-width: 0; }
.channel-member-option b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.channel-member-option small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.channel-member-picker .member-search-empty { margin-top: 12px; }
.dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 22px;
}
.dialog-error {
  color: var(--danger);
  font-size: 14px;
  padding-top: 10px;
}
.dialog .member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.dialog .member-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.dialog .role {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.member-identity { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.member-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.member-row-actions .secondary { font-size: 12px; padding: 6px 9px; }
.membership-lobby { overflow: auto; justify-content: flex-start; padding-top: clamp(35px, 12vh, 120px); }
.membership-lobby > .membership-cards { width: min(520px, 100%); text-align: left; }
.membership-lobby .membership-actions { justify-content: center; }
.membership-lobby .primary { margin-top: 0; }
.membership-cards { display: grid; gap: 10px; }
.membership-card { border: 1px solid var(--border); border-radius: 8px; padding: 15px; min-width: 0; }
.membership-card p { margin-top: 6px; overflow-wrap: anywhere; }
.membership-card b { overflow-wrap: anywhere; }
.membership-card > div:first-child { display: flex; align-items: center; gap: 10px; }
.membership-card-title { flex-wrap: wrap; }
.membership-card-title small { color: var(--muted); }
.status-label { display: inline-block; flex: none; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--hover); padding: 3px 7px; border-radius: 5px; }
.membership-card-title .status-label { margin-left: auto; }
.membership-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.membership-actions button { display: inline-flex; align-items: center; gap: 6px; }
.membership-help { margin-top: 12px; }
.membership-notice { padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); margin: 12px 0; }
.membership-notice b { font-size: 14px; }
.membership-notice p { font-size: 13px; margin-top: 5px; line-height: 1.55; color: var(--muted); }
.sidebar .membership-notice { margin: 2px 0 12px; }
.sidebar .membership-notice button { font-size: 12px; padding: 6px 9px; }
.membership-tabs { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.membership-tabs button { flex: none; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--muted); }
.membership-tabs button[aria-selected="true"] { background: var(--selected); color: var(--text); font-weight: 600; }
.membership-tabs button:hover { background: var(--hover); }
.membership-panel { min-height: 140px; display: grid; gap: 10px; align-content: start; }
.membership-empty { padding: 36px 10px; text-align: center; }
.membership-audit { border-bottom: 1px solid var(--border); padding: 12px 0; }
.membership-audit > div { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.membership-audit b { font-size: 14px; }
.membership-audit time { flex: none; font-size: 12px; color: var(--muted); }
.membership-audit p { margin-top: 5px; }
.dialog-actions > .primary { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
  .dialog .member-row { flex-wrap: wrap; gap: 8px; }
  .member-row-actions { width: 100%; padding-left: 44px; }
  .dialog-actions { flex-wrap: wrap; }
  .membership-card-title .status-label { margin-left: 0; }
  .membership-card > div:first-child { align-items: flex-start; }
  .membership-lobby { padding: 32px 18px; }
}
.dialog .search-input {
  font-size: 18px;
  margin-bottom: 10px;
}
.search-hint {
  font-size: 12px;
  color: var(--muted);
  padding: 10px 0;
}
.workspace-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  text-align: left;
}
.workspace-option small {
  color: var(--muted);
  display: block;
  font-size: 12px;
}
.workspace-option .icon {
  margin-left: auto;
}
.menu-pop {
  position: fixed;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 60;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 26px var(--shadow);
  min-width: 210px;
  padding: 6px;
  max-width: calc(100vw - 20px);
}
.menu-pop > button {
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-size: 14px;
  border-radius: 5px;
}
.menu-pop > button:hover {
  background: var(--selected);
}
/* 메뉴 정리 3A: PC 메뉴 줄 끝의 단축키 */
.menu-pop > button .menu-shortcut { margin-left: auto; padding-left: 12px; font: inherit; font-size: 12px; color: var(--muted); letter-spacing: .02em; }
/* The switcher opens beside its trigger; only its list scrolls on small screens. */
.workspace-menu {
  width: 352px;
  max-width: calc(100vw - 16px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px;
  border-radius: 12px;
}
.workspace-menu-label {
  padding: 5px 10px 9px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  flex: none;
}
.workspace-menu-options {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.workspace-menu .workspace-option {
  gap: 12px;
  min-height: 64px;
  padding: 8px;
  border-radius: 8px;
}
.workspace-menu .brand-mark { width: 40px; height: 40px; flex: none; font-size: 16px; }
.workspace-menu .workspace-option:is(:hover, :focus-visible),
.workspace-menu-footer :is(button, a):is(:hover, :focus-visible) {
  background: var(--hover);
  outline-offset: -2px;
}
.workspace-menu .workspace-option[aria-checked="true"] {
  background: var(--selected);
}
.workspace-option-text {
  flex: 1;
  min-width: 0;
}
.workspace-option-text b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.45;
}
.workspace-menu .workspace-option small {
  margin-top: 4px;
}
.workspace-menu .workspace-option > .icon {
  color: var(--accent);
}
.workspace-menu-footer {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 6px;
}
.workspace-menu-footer :is(button, a) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  width: 100%;
  border-radius: 8px;
  text-align: left;
}
.workspace-menu-footer :is(button, a) > .icon { width: 32px; height: 32px; padding: 6px; flex: none; }
.workspace-icon-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
}
.workspace-icon-current small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.workspace-icon-editor {
  width: min(280px, 100%);
  aspect-ratio: 1;
  margin: 14px auto;
  border: 1px dashed var(--control-border);
  border-radius: 16px;
  background: var(--hover);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}
.workspace-icon-editor canvas {
  width: 100%;
  height: 100%;
  display: none;
  touch-action: none;
  cursor: grab;
}
.workspace-icon-editor canvas.ready { display: block; }
.workspace-icon-editor .workspace-icon-gif-preview { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.workspace-icon-editor .workspace-icon-gif-preview[hidden] { display: none; }
.workspace-icon-editor canvas:active { cursor: grabbing; }
.workspace-icon-empty {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.workspace-icon-zoom {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
}
.workspace-icon-zoom input { flex: 1; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.emoji-grid button {
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 5px;
}
.emoji-grid button:hover {
  background: var(--hover);
}
#toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast-action { display:flex; align-items:center; gap:14px; pointer-events:auto; }
.toast-action button { flex:none; min-height:32px; padding:0 12px; border:1px solid var(--control-border); border-radius:7px; background:var(--surface); color:var(--text); font-weight:600; }
.toast {
  padding: 12px 18px;
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 5px 25px var(--shadow);
  border-radius: 7px;
  font-size: 14px;
}
.offline-bar {
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 13px;
  padding: 7px 18px;
}
.editing textarea {
  width: 100%;
  min-height: 90px;
  margin: 5px 0;
}
.editing .row {
  justify-content: flex-end;
}
.preview-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.file-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 16px 4px;
}
.file-list-row > .icon {
  width: 34px;
  height: 34px;
  color: var(--accent);
}
.file-list-row small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}
.file-list-row a {
  margin-left: auto;
}
button.filled {
  color: var(--warning);
}
.archived-banner {
  padding: 16px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--border);
}
.channel-policy-note { padding: 7px 20px; font-size: 12px; color: var(--muted); background: var(--hover); border-bottom: 1px solid var(--border); }
.channel-transfer-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 20px; font-size: 13px; background: var(--hover); border-bottom: 1px solid var(--border); }
.channel-transfer-notice .membership-actions { margin: 0; }
[data-channel-composer] { flex: none; }
.channel-readonly { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 20px; border-top: 1px solid var(--border); background: var(--raised); }
.channel-readonly > div { flex: 1; min-width: 180px; }
.channel-readonly b { font-size: 14px; }
.channel-readonly p { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.channel-directory { margin-top: 12px; max-height: 50vh; overflow-y: auto; }
.channel-directory-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 6px 0; }
.channel-directory-row[hidden] { display: none; }
.channel-directory-open { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; text-align: left; padding: 10px 4px; }
.channel-directory-open > .icon { flex: none; margin-top: 3px; }
.channel-directory-open > span { min-width: 0; }
.channel-directory-open b, .channel-directory-open small { display: block; overflow-wrap: anywhere; }
.channel-directory-open small { font-size: 12px; color: var(--muted); margin-top: 4px; }
.channel-directory-row > .secondary { flex: none; }
.new-messages {
  margin: 5px auto;
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--selected);
  font-size: 13px;
}
.spacer {
  height: 16px;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
@media (min-width: 1450px) {
  :root {
    --thread-width: 420px;
  }
  .global-search {
    max-width: 760px;
  }
  .thread-pane .formatbar .optional {
    display: inline-flex;
  }
}
@media (max-width: 1050px) {
  :root {
    --sidebar-width: 224px;
  }
  .thread-pane {
    width: 340px;
    min-width: 300px;
  }
  .head-actions .member-stack .member-stack-faces {
    display: none;
  }
  .head-actions .member-stack > .member-stack-icon {
    display: inline-flex;
  }
  .head-actions .member-stack {
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 4px 9px;
  }
  .channel-head {
    padding: 0 12px;
  }
  .message {
    padding-left: 16px;
    padding-right: 16px;
  }
  .composer-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
  .formatbar .optional {
    display: none;
  }
  .topbar .history {
    margin-left: 150px;
  }
}
@media (max-width: 800px) {
  .app {
    grid-template-columns: var(--ui-rail-width, 48px) minmax(0, 1fr);
    grid-template-rows: 40px minmax(0, 1fr);
  }
  .sidebar {
    position: fixed;
    left: var(--ui-rail-width, 48px);
    top: 40px;
    bottom: 0;
    width: 280px;
    max-width: calc(100vw - var(--ui-rail-width, 48px));
    z-index: 20;
    box-shadow: 10px 0 30px var(--shadow);
    display: none;
  }
  .app.sidebar-open .sidebar {
    display: flex;
  }
  .main {
    grid-column: 2;
    margin-right: 0;
    border-radius: 0;
  }
  .rail {
    padding: 8px 4px;
    gap: 10px;
  }
  .workspace-mark {
    width: 34px;
    height: 34px;
  }
  .rail-nav {
    gap: 12px;
  }
  .rail-item {
    font-size: 11px;
  }
  .rail-item .rail-icon {
    padding: 6px;
  }
  .global-search {
    width: auto;
    flex: 1;
    max-width: none;
    min-width: 0;
  }
  .global-search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .global-search kbd,
  .topbar > .grow {
    display: none;
  }
  .topbar {
    padding: 4px 10px;
  }
  .topbar .history {
    margin: 0;
  }
  .topbar .history .icon-btn:not(:last-child) {
    display: none;
  }
  .brand-word {
    display: none;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .thread-pane {
    width: 100%;
    min-width: 0;
    border: 0;
  }
  .main:has(.thread-pane) > .conversation {
    display: none;
  }
  .channel-title {
    font-size: 17px;
  }
  .channel-tabs {
    padding: 0 16px;
    gap: 16px;
  }
  .head-actions {
    gap: 0;
  }
  .channel-head {
    gap: 5px;
  }
  .composer-foot {
    font-size: 11px;
  }
  .message-tools {
    right: 10px;
  }
  .sidebar .resizer,
  .thread-pane .resizer {
    display: none;
  }
  .dialog-shade {
    padding: 12px;
  }
  .dialog-head {
    padding: 16px;
  }
  .dialog-content {
    padding: 4px 16px 20px;
  }
  .dialog {
    max-height: 95dvh;
  }
  .member-stack {
    display: none;
  }
  .thread-pane .composer-wrap {
    padding: 8px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Processing feedback stays local to the action. */
button[aria-busy="true"] { cursor: progress; opacity: .65; }
.request-indicator { white-space: nowrap; border: 1px solid var(--border, #aaa); border-radius: 8px; padding: 6px 10px; background: transparent; color: inherit; }
.request-indicator [data-request-count] { font-weight: 700; margin-left: 4px; }

.dialog-content select { width: 100%; min-height: 40px; padding: 8px 10px; font: inherit; color: var(--text); background: var(--raised); border: 1px solid var(--border, #aaa); border-radius: 6px; }

/* The pending question stays in the conversation while the shared agent responds. */
.agent-pending { margin: 16px 24px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; overflow-wrap: anywhere; }
.agent-pending p { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.agent-pending .message-text { white-space: pre-wrap; }

.member-stack[hidden], .channel-tabs button[hidden] { display: none; }
.channel-agent-badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:6px;padding:4px 7px;max-width:180px;background:var(--surface);font-size:12px;color:var(--muted);cursor:pointer}
.channel-agent-badge svg{width:16px;height:16px;flex-shrink:0}.channel-agent-badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-pending button{margin-top:6px}
@media(max-width:600px){.channel-agent-badge{padding:7px;gap:0;position:relative}.channel-agent-badge span{position:absolute;width:1px;height:1px;clip-path:inset(50%)}.channel-agent-badge::after{content:"";position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:var(--accent)}.channel-head .head-actions{gap:3px}}

/* Keep DM labels and per-user list controls aligned, including narrow screens. */
.dm-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.dm-list-row .person-card { min-width: 0; border: 0; }
.dm-list-row .person-card > span { min-width: 0; overflow-wrap: anywhere; }
.dm-list-row > .icon-btn { width: 36px; height: 36px; }
/* DM 목록 갱신 안내 — 평소엔 자리를 차지하지 않는다(DM 목록 1단계 1번 A). PC는 머리 줄 단추, 폰은 떠 있는 알약(mobile.css). */
.dm-refresh-float { display: none; }
.dm-refresh-head { border-color: var(--accent); color: var(--accent); font-weight: 650; }
.dm-refresh-head[hidden], .dm-refresh-pill[hidden] { display: none; }
.dm-inbox-row { transition: background-color .6s ease; }
.dm-inbox-row.dm-flash { background: color-mix(in srgb, var(--accent) 12%, transparent); transition: none; }
@media (prefers-reduced-motion: reduce) { .dm-inbox-row { transition: none; } }
.dm-inbox-row { gap: 8px; }
.dm-inbox-row .person-card { width: 100%; overflow: hidden; }
.dm-inbox-copy { flex: 1; min-width: 0; }
.dm-inbox-heading, .dm-inbox-detail { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dm-inbox-heading b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dm-inbox-row.is-unread b { font-weight: 750; }
.dm-inbox-heading time { font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; }
.dm-inbox-detail { margin-top: 5px; min-height: 22px; }
.dm-inbox-preview { flex: 1; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-inbox-detail .badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 12px; line-height: 20px; text-align: center; }
.dm-inbox-actions { display: flex; align-items: center; }
.dm-inbox-actions .icon-btn { width: 36px; height: 40px; }
.dm-inbox-star.filled { color: #ac7800; }
.dm-inbox-star.filled svg { fill: #f5c449; }
.dm-inbox-actions [data-action="hide-dm"] { opacity: .4; }
.dm-inbox-row:hover [data-action="hide-dm"], .dm-inbox-row:focus-within [data-action="hide-dm"] { opacity: 1; }
.dm-agent-shortcut { margin-top: 12px; }
@media (max-width: 600px) {
  .dm-list-row { gap: 4px; }
  .dm-list-row .person-card { padding: 12px 4px; gap: 8px; }
  .collection-head { flex-wrap: wrap; }
  .dm-inbox-actions { flex-direction: column; }
  .dm-inbox-actions .icon-btn { width: 40px; height: 34px; }
  .dm-inbox-heading { gap: 6px; }
  .dm-inbox-heading time { font-size: 11px; }
}

/* Keep DM close controls beside, never inside, the conversation button. */
.side-dm-row { position: relative; }
.side-dm-row > .side-item { padding-right: 34px; }
.side-dm-row > .side-dm-hide {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; opacity: 0; pointer-events: none;
}
.side-dm-row:hover > .side-dm-hide,
.side-dm-row:focus-within > .side-dm-hide { opacity: 1; pointer-events: auto; }
@media (hover: none), (pointer: coarse) {
  .side-dm-row > .side-item { min-height: 44px; padding-right: 44px; }
  .side-dm-row > .side-dm-hide { width: 40px; height: 40px; opacity: 1; pointer-events: auto; }
}

/* Subtle glyph; retain the full pointer/touch target and keyboard focus ring. */
.side-dm-hide { color: var(--muted); }
.side-dm-hide .icon { width: 14px; height: 14px; stroke-width: 1.4; opacity: .5; }
.side-dm-hide:hover { background: transparent; }
.side-dm-hide:hover .icon,
.side-dm-hide:focus-visible .icon { opacity: .85; }

.file-card { padding: 0; gap: 0; }
.file-preview-button { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 10px; text-align: left; }
.file-preview-button > .icon { flex: none; width: 28px; height: 28px; color: var(--accent); }
.file-preview-button > span { min-width: 0; overflow-wrap: anywhere; }
.file-preview-button:hover { background: var(--selected); border-radius: 7px; }
.file-download-button { flex: none; margin: 4px; width: 36px; height: 36px; }
.file-list-row .file-preview-button { padding: 0; }
.file-list-row b { overflow-wrap: anywhere; }
.attachment-preview { min-height: 140px; overflow: auto; }
.attachment-preview img { display: block; max-width: 100%; max-height: 65vh; margin: auto; object-fit: contain; }
.attachment-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }

.pdf-preview-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.attachment-preview canvas { display: block; max-width: 100%; margin: auto; background: white; }

.office-preview-notice, .office-preview-notes { color: var(--muted); font-size: 12px; line-height: 1.6; }
.office-preview-notes { padding-left: 18px; }
.office-preview { min-width: 0; }
.office-docx, .office-hwpx { padding: 24px; background: white; color: #222; max-height: 60vh; overflow: auto; }
.office-paragraph { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 .65em; }
.office-image { display: block; max-width: 100%; max-height: 50vh; object-fit: contain; }
.office-table-scroll { max-width: 100%; max-height: 55vh; overflow: auto; }
.office-table { border-collapse: collapse; background: white; color: #222; font-size: 13px; }
.office-table td, .office-table th { border: 1px solid #ccd0d5; padding: 6px 8px; min-width: 60px; max-width: 260px; overflow-wrap: anywhere; vertical-align: top; }
.office-table th { background: #f1f3f5; color: #39434d; }
.office-grid thead th { position: sticky; top: 0; }
.office-grid td { white-space: pre-wrap; }
.office-sheet-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.office-sheet-label select { min-width: 0; max-width: 100%; }
.office-slide { position: relative; overflow: hidden; color: #222; container-type: inline-size; border: 1px solid var(--border); }
.office-slide-item { position: absolute; overflow: hidden; font-size: clamp(8px, 2.4cqw, 22px); }
.office-slide-item .office-paragraph { margin: 0 0 .3em; }
.office-slide-item img { width: 100%; height: 100%; object-fit: contain; }
.office-slide-details { margin-top: 10px; }
.office-slide-details summary { cursor: pointer; margin-bottom: 8px; }
@media (max-width: 600px) { .office-docx, .office-hwpx { padding: 14px; } .office-pptx .secondary { padding: 6px; font-size: 12px; } }

/* Spreadsheet preview keeps worksheet geometry instead of reflowing cells. */
.dialog.office-wide-dialog { width: min(1180px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.excel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; background:#edf4ef; color:#244937; border:1px solid #d1dbd4; }
.excel-toolbar label { display:flex; align-items:center; gap:6px; min-width:0; }
.excel-toolbar select { width:auto; min-width:60px; max-width:220px; }
.excel-scroll { max-height:60vh; overflow:auto; background:#fff; border:1px solid #bfc8c2; }
.excel-grid { table-layout:fixed; font-family:Calibri,Arial,'Noto Sans KR',sans-serif; }
.excel-grid td, .excel-grid th { min-width:0; max-width:none; padding:0 3px; border:1px solid #d9dfe0; line-height:1.2; }
.excel-grid th { text-align:center; font-size:12px; font-weight:400; background:#f0f2f1; height:22px; }
.excel-grid thead th { position:sticky; top:0; z-index:2; }
.excel-grid .excel-row-number { position:sticky; left:0; z-index:1; }
.excel-grid .excel-corner { left:0; z-index:3; }
.excel-cell { overflow:hidden; overflow-wrap:normal; }
.excel-tabs { display:flex; overflow:auto; background:#f0f2f1; border:1px solid #bfc8c2; }
.excel-tab { flex:none; padding:8px 16px; border-right:1px solid #d1d8d3; color:#45574d; }
.excel-tab.active { background:white; color:#176b3b; box-shadow:inset 0 -3px #217346; font-weight:700; }
.office-slide-table { border-collapse:collapse; table-layout:fixed; width:100%; height:100%; font-size:inherit; }
.office-slide-table td { border:1px solid #777; padding:.15em .3em; overflow:hidden; vertical-align:middle; }
@media(max-width:600px){.excel-toolbar { align-items:flex-start; flex-wrap:wrap; }.excel-toolbar select { max-width:180px; }.excel-scroll {max-height:55vh;}}

/* Directory shares the workspace's theme and keeps its lists in the main pane. */
.directory { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.directory .collection-head { flex:none; }
.directory-tabs { display:flex; gap:24px; padding:0 24px; border-bottom:1px solid var(--border); }
.directory-tabs button { padding:14px 4px; border-bottom:3px solid transparent; color:var(--muted); }
.directory-tabs button[aria-selected="true"] { border-bottom-color:var(--accent); color:var(--text); font-weight:700; }
.directory #directory-panel { min-height:0; overflow:auto; flex:1; }
.directory-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; padding:20px 24px 12px; }
.directory-search { display:grid; gap:7px; font-size:13px; color:var(--muted); }
.directory-search input { width:100%; }
.directory-filters { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.directory-filters label { display:flex; align-items:center; gap:6px; font-size:13px; }
.directory-filters select { max-width:160px; }
#directory-count { margin-left:auto; color:var(--muted); font-size:13px; }
.directory-body { padding:8px 24px 24px; }
.directory-people { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.directory-person { border:1px solid var(--border); border-radius:10px; padding:16px; min-width:0; }
.directory-profile { display:flex; gap:12px; width:100%; text-align:left; }
.directory-profile > span:last-child { min-width:0; }
.directory-profile b,.directory-profile small { display:block; overflow-wrap:anywhere; }
.directory-profile small { color:var(--muted); font-size:12px; margin:6px 0; }
.directory-person-actions { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.directory-person-actions .secondary { display:flex; align-items:center; gap:7px; }
.directory .channel-directory { max-height:none; margin-top:0; overflow:visible; }
.directory-sections { display:flex; flex-wrap:wrap; gap:8px; }
.directory-channel-status { grid-column:1/-1; }
.directory-sections [aria-pressed="true"] { background:var(--hover); border-color:var(--accent); }
.directory-body h2 { font-size:16px; margin:10px 0 18px; }
.directory-body textarea { width:100%; min-height:130px; }
@media(max-width:600px) {
  .directory-tabs { padding:0 16px; }
  .directory-toolbar { padding:16px; gap:12px; grid-template-columns:minmax(0,1fr); }
  .directory-toolbar > .primary { justify-self:start; }
  .directory-body { padding:0 16px 20px; }
  .directory-people { grid-template-columns:minmax(0,1fr); }
  .directory-filters { gap:10px; }
}

.history [data-action="forward"] .icon { transform:rotate(180deg); }
.history .icon-btn:disabled { opacity:.3; cursor:default; }
.navigation-history-menu { max-height:min(460px,70vh); overflow-y:auto; width:320px; max-width:calc(100vw - 16px); }
.navigation-history-title { color:var(--muted); font-size:12px; padding:8px 12px; }
.navigation-history-menu button { width:100%; text-align:left; display:flex; gap:10px; align-items:center; }
.navigation-history-menu button span { min-width:0; }
.navigation-history-menu b,.navigation-history-menu small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.navigation-history-menu small { color:var(--muted); font-size:11px; }
@media(max-width:600px) { .topbar .history .icon-btn:not(:last-child) { display:inline-flex; } .topbar .history { gap:0; } .topbar .history .icon-btn { width:28px; min-width:28px; } }

/* Original message references stay distinct from the person sharing the link. */
.message-reference-link { display:inline-flex; align-items:center; gap:5px; max-width:100%; overflow-wrap:anywhere; vertical-align:middle; }
.message-reference-link svg { width:15px; height:15px; flex:none; }
.message-previews { max-width:640px; margin-top:10px; }
.message-reference { border:1px solid var(--border); border-left:3px solid var(--border); border-radius:8px; padding:12px; margin:8px 0; min-width:0; }
.reference-meta { display:flex; align-items:center; gap:9px; }
.reference-meta .avatar { width:30px; height:30px; font-size:13px; flex:none; }
.reference-meta small { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.reference-source { font-size:12px; margin:7px 0; }
.reference-text { line-height:1.6; overflow-wrap:anywhere; }
.reference-text pre { max-width:100%; overflow:auto; }
.reference-collapsed { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; max-height:8em; }
.preview-toggle { color:var(--accent); background:none; border:0; padding:5px 0; font-size:12px; cursor:pointer; }
.preview-toggle:hover { text-decoration:underline; }
.preview-remove,.message-reference.unavailable { color:var(--muted); font-size:12px; }
.message-reference .attachments { max-width:100%; }
.message-reference .file-card { max-width:100%; min-width:0; }
@media (max-width:600px) { .message-reference { padding:10px; } }

/* Source links in the composer retain their canonical URL in the backing draft. */
.composer textarea[hidden] { display:none; }
.rich-composer { position:relative; min-height:46px; max-height:180px; overflow-y:auto; padding:12px; white-space:pre-wrap; overflow-wrap:anywhere; outline:none; line-height:1.6; }
.rich-composer:is(:empty,.is-empty)::before { position:absolute; content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.editor-keyboard-focus .rich-composer:focus-visible { box-shadow:inset 0 0 0 1px var(--accent); border-radius:4px; }
.draft-link { color:var(--accent); background:var(--hover); border-radius:3px; padding:1px 3px; }
.draft-previews { margin:0 12px 8px; max-height:180px; overflow:auto; font-size:12px; }
.draft-previews:empty { display:none; }
.draft-preview-heading { display:flex; align-items:center; justify-content:space-between; color:var(--muted); }
.draft-previews button { background:transparent; color:var(--muted); border:0; cursor:pointer; padding:6px; }
.draft-preview-heading button { font-size:20px; min-width:32px; }
.draft-preview-card { border-left:3px solid var(--border); padding:6px 10px; margin:4px 0; }
.draft-preview-card small { display:block; color:var(--muted); }
.draft-preview-card p { white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:4px 0; }

/* Personal saved-list removal is always visible, including on touch screens. */
.message.saved-message { padding-right:60px; }
.saved-message > .saved-remove { position:absolute; right:12px; top:8px; display:inline-flex; width:32px; height:32px; color:var(--muted); background:transparent; border:0; }
.saved-message > .saved-remove .icon { width:16px; height:16px; }
.saved-message > .saved-remove:hover { color:var(--text); background:var(--hover); }
.saved-message > .saved-remove:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.saved-message > .message-tools { right:54px; }
@media (pointer:coarse) { .saved-message > .saved-remove { width:44px; height:44px; right:6px; top:2px; } }

.thread-broadcast { display:flex; align-items:center; gap:8px; padding:4px 12px 10px; font-size:12px; color:var(--muted); cursor:pointer; }
.thread-broadcast input { margin:0; width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
.broadcast-context { display:flex; flex-direction:column; align-items:stretch; gap:6px; width:100%; max-width:560px; margin:0 0 10px; padding:9px 12px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:6px; background:var(--selected); color:var(--text); font:inherit; font-size:12px; cursor:pointer; text-align:left; }
.broadcast-heading { display:flex; align-items:center; gap:6px; color:var(--muted); font-weight:600; }
.broadcast-heading svg { width:14px; height:14px; flex-shrink:0; }
.broadcast-quote { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; line-height:1.5; }
.broadcast-author { color:var(--muted); font-weight:600; }
.broadcast-quote.is-gone { color:var(--muted); font-style:italic; }
.broadcast-open { color:var(--accent); font-weight:600; }
.broadcast-context:hover { border-color:var(--accent); }
.broadcast-context:hover .broadcast-open { text-decoration:underline; }
.broadcast-context:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Deleted roots retain only the entry point to surviving replies. */
.deleted-root { min-height: 0; padding-block: 10px; }
.deleted-root .message-body { padding-left: 44px; }
.deleted-root .reply-link { margin-top: 4px; }

/* Personal channel ordering: icon and name are separate keyboard/touch targets. */
.side-channel-row { position: relative; }
.side-channel-row > .side-item { padding-left: 39px; }
.channel-priority { position: absolute; left: 6px; top: 2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); }
.channel-priority .icon { width: 20px; height: 20px; }
.channel-priority:hover { background: var(--selected); }
.channel-priority.selected { background: #f5d65c; color: #554300; }
.channel-priority.selected:hover { background: #efc83f; }
.channel-priority:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.channel-priority:disabled { cursor: default; opacity: .5; }
@media (pointer: coarse) {
  .side-channel-row > .side-item { min-height: 44px; padding-left: 49px; }
  .channel-priority { width: 40px; height: 40px; }
}

.rail-icon { position: relative; }
.rail-badge { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; line-height: 17px; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--sidebar-bg, var(--bg)); }

/* Private-channel retention stays in channel settings and never changes membership. */
.retention-settings {margin:18px 0;padding:14px;border:1px solid var(--border);border-radius:8px;min-width:0}
.retention-settings legend {font-weight:700;padding:0 6px}
.retention-settings p,.retention-settings small {font-size:12px;line-height:1.6;color:var(--muted)}
.retention-settings select,.retention-settings input[type="datetime-local"] {width:100%;max-width:100%;box-sizing:border-box}
.retention-settings .retention-status {margin-bottom:0;color:var(--text)}
.retention-hint {font-size:11px;color:var(--muted);padding:3px 0}
.retention-settings [hidden],.retention-settings[hidden] {display:none!important}

/* Keep the engine's sheet tabs, row/column headers and zoom controls inside the modal. */
.file-preview-dialog .dialog-head { gap: 8px; }
.file-preview-dialog .dialog-head h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-dialog .dialog-head .icon-btn { flex: 0 0 auto; }
.dialog-shade:has(> .onlyoffice-dialog) { padding: 8px; }
.dialog.onlyoffice-dialog { width: calc(100vw - 16px); max-width: none; height: calc(100dvh - 16px); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.onlyoffice-dialog .dialog-head { flex: 0 0 auto; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.onlyoffice-dialog .dialog-head h2 { font-size: 14px; }
.onlyoffice-dialog .dialog-head .icon-btn { width: 36px; height: 36px; }
.onlyoffice-dialog .dialog-content { flex: 1; min-height: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.onlyoffice-dialog .dialog-error:empty { display: none; }
.attachment-preview.onlyoffice-preview { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.onlyoffice-status { flex: 0 0 auto; margin: 0 0 8px; color: var(--muted); }
.onlyoffice-status[hidden] { display: none; }
.onlyoffice-mount { position: relative; flex: 1; min-height: 0; width: 100%; }
.onlyoffice-mount iframe { position: absolute !important; inset: 0; display: block; border: 0; width: 100%; height: 100%; }
@media (max-width: 600px) {
  .dialog-shade:has(> .onlyoffice-dialog) { padding: 0; }
  .dialog.onlyoffice-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .onlyoffice-dialog .dialog-head { padding-top: max(0px, env(safe-area-inset-top)); padding-right: max(4px, env(safe-area-inset-right)); padding-left: max(8px, env(safe-area-inset-left)); }
  .onlyoffice-dialog .dialog-head .icon-btn { width: 44px; height: 44px; }
  .onlyoffice-dialog .dialog-content { padding-bottom: env(safe-area-inset-bottom); }
}
/* Common SunEditor surface for composing and editing. */
.sun-editor,.sun-editor-editable {--se-caret-color:var(--text);--se-drag-caret-color:var(--accent);}
/* SunEditor declares these on both the wrapper and editable surface. Map both
   to the app palette, including toolbar menus and link inputs outside the body. */
:root[data-theme="dark"] :is(.sun-editor,.sun-editor-editable) {
  --se-main-color:var(--text);--se-main-font-color:var(--text);--se-main-color-lighter:var(--muted);
  --se-main-background-color:var(--raised);--se-main-out-color:var(--border);
  --se-main-divider-color:var(--border);--se-main-border-color:var(--border);--se-main-outline-color:var(--control-border);--se-main-shadow-color:var(--shadow);
  --se-edit-font-color:var(--text);--se-edit-font-pre:var(--text);--se-edit-font-quote:var(--muted);--se-placeholder-color:var(--muted);
  --se-edit-background-color:var(--raised);--se-edit-background-pre:var(--surface);
  --se-edit-border-light:var(--border);--se-edit-border-dark:var(--control-border);--se-edit-border-dark-n1:var(--border);--se-edit-border-dark-n2:var(--border);
  --se-edit-anchor:var(--link);--se-edit-hr-color:var(--border);
  --se-hover-color:var(--text);--se-hover-light-color:var(--hover);--se-hover-light2-color:var(--hover);--se-hover-light3-color:var(--selected);
  --se-hover-dark-color:var(--control-border);--se-hover-dark2-color:var(--control-border);--se-hover-dark3-color:var(--control-border);
  --se-active-color:var(--text);--se-active-hover-color:var(--accent);--se-active-dark-color:var(--accent);--se-active-dark2-color:var(--accent);--se-active-dark3-color:var(--accent);--se-active-dark4-color:var(--accent);--se-active-dark5-color:var(--accent);
  --se-active-light-color:var(--selected);--se-active-light2-color:var(--selected);--se-active-light3-color:var(--selected);--se-active-light4-color:var(--selected);--se-active-light5-color:var(--selected);--se-active-light6-color:var(--selected);
  --se-modal-color:var(--text);--se-modal-background-color:var(--raised);--se-modal-border-color:var(--border);--se-modal-anchor-color:var(--link);--se-modal-preview-color:var(--muted);
  --se-modal-file-input-background-color:var(--surface);--se-modal-input-disabled-color:var(--muted);--se-modal-input-disabled-background-color:var(--surface);
  --se-dropdown-font-color:var(--text);--se-controller-color:var(--text);--se-controller-background-color:var(--raised);--se-controller-border-color:var(--border);
  --se-input-btn-border-color:var(--control-border);--se-input-btn-disabled-color:var(--muted);
  --se-select-menu-hover-bg:var(--hover);--se-select-menu-active-bg:var(--selected);
  --se-code-view-color:var(--text);--se-code-view-background-color:var(--raised);--se-code-view-line-color:var(--muted);--se-code-view-line-background-color:var(--surface);
}
.space-editor-host,.composer .sun-editor,.editing .sun-editor {width:100%!important;min-width:0;border:0;background:var(--raised);color:var(--text);}
/* Composer moves with the keyboard viewport; its toolbar must stay in normal flow.
   SunEditor's sticky toolbar otherwise paints over the editable text on tablets. */
.composer .sun-editor .se-toolbar,.editing .sun-editor .se-toolbar {position:relative!important;top:auto!important;}
.sun-editor .se-toolbar {background:var(--raised);border-color:var(--border);outline:0;}
.sun-editor .se-btn {color:var(--text);}
:root[data-theme="dark"] .sun-editor .se-btn-primary,
:root[data-theme="dark"] .sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-btn-primary {color:var(--on-accent);}
.sun-editor .se-container,.sun-editor .se-wrapper,.sun-editor .se-wrapper-inner {background:transparent;}
.sun-editor .rich-composer {background:var(--raised);color:var(--text);font-family:inherit;font-size:14px;white-space:normal;line-height:1.6;min-height:42px;max-height:220px;padding:10px 12px;}
/* 한 줄 입력이 최소 높이를 넘지 않도록 마지막 문단의 기본 아래 여백만 없앤다. 문단 사이 간격은 유지한다. */
.sun-editor .rich-composer>:last-child{margin-bottom:0;}
.sun-editor .se-status-bar {display:none;}
.editing textarea[hidden]{display:none;}
.editing .sun-editor {border:1px solid var(--control-border);border-radius:6px;overflow:visible;}
.edit-hint{font-size:11px;color:var(--muted);margin:5px 0;}
.edit-error{font-size:12px;color:var(--danger,#b42318);margin:4px 0;}
.message-text p{margin:0 0 .35em;}.message-text p:last-child{margin-bottom:0;}
.message-text ul,.message-text ol{margin:.3em 0;padding-left:1.7em;}
@media(max-width:600px){.sun-editor .se-btn{width:30px;height:30px;}.sun-editor .rich-composer{max-height:160px;}}

/* Inline attachment previews: one light image, with the original actions on its header. */
.file-card.has-thumbnail {position:relative;display:block;width:420px;max-width:100%;overflow:hidden;}
.file-card.has-thumbnail .file-preview-button {display:block;width:100%;padding:0;}
.file-card-head {display:flex;align-items:center;gap:10px;padding:10px 52px 10px 12px;min-width:0;}
.file-card-head > .icon {flex:none;color:var(--accent);width:28px;height:28px;}
.file-card-head > span {min-width:0;}
.file-card.has-thumbnail .file-download-button {position:absolute;right:4px;top:6px;margin:0;}
.file-preview-button > .file-thumbnail {display:block;height:230px;overflow:hidden;background:#fff;border-top:1px solid var(--border);color:#686868;}
.file-thumbnail > span {display:flex;height:100%;align-items:center;justify-content:center;font-size:12px;}
.file-preview-button > .file-thumbnail:not([data-state]) {background:var(--hover);}
.file-thumbnail[data-state="failed"] {background:var(--hover);}
.file-thumbnail[data-state="failed"] > .thumbnail-status {color:var(--muted);padding:0 16px;text-align:center;}
.file-thumbnail canvas {display:block;width:100%;height:100%;object-fit:cover;object-position:left top;}
.file-preview-button > .file-thumbnail[hidden] {display:none;}
@media(max-width:600px) { .file-preview-button > .file-thumbnail {height:190px;} .file-card.has-thumbnail .file-download-button {width:44px;height:44px;top:2px;} }

/* The local spreadsheet preview shares the compact document frame. */
.dialog-shade:has(> .spreadsheet-dialog) { padding:8px; }
.dialog.spreadsheet-dialog { width:calc(100vw - 16px); max-width:none; height:calc(100dvh - 16px); max-height:none; display:flex; flex-direction:column; overflow:hidden; }
.spreadsheet-dialog .dialog-head { flex:none; padding:4px 8px; border-bottom:1px solid var(--border); }
.spreadsheet-dialog .dialog-head h2 { font-size:14px; }
.spreadsheet-dialog .dialog-content { flex:1; min-height:0; display:flex; padding:0; overflow:hidden; }
.spreadsheet-dialog .dialog-error:empty { display:none; }
.spreadsheet-dialog .attachment-preview { flex:1; min-width:0; min-height:0; }
.attachment-preview.spreadsheet-preview { display:flex; flex-direction:column; overflow:hidden; position:relative; }
.office-xlsx { flex:1; min-height:0; display:flex; flex-direction:column; }
.office-xlsx .excel-scroll { flex:1; min-height:0; max-height:none; position:relative; overflow:auto; overscroll-behavior:contain; background:#f2f4f3; border:0; }
.excel-canvas { position:relative; min-width:1px; min-height:1px; background:#fff; color:#222; font-family:Calibri,Arial,sans-serif; isolation:isolate; }
.excel-virtual-row { display:contents; }
.excel-grid-cell { position:absolute; display:flex; box-sizing:border-box; overflow:hidden; border:0 solid #d9dfe0; border-right-width:1px; border-bottom-width:1px; line-height:1.15; }
.excel-grid-cell.no-gridlines { border-color:transparent; }
.excel-grid-cell .excel-cell { flex:1; min-width:0; max-height:100%; padding:0 3px; overflow:hidden; box-sizing:border-box; }
.excel-unavailable { color:#98611c; }
.excel-grid-cell.excel-rotated .excel-cell { position:absolute; top:50%; flex:none; max-height:none; text-align:center; transform-origin:center; }
.excel-grid-cell .excel-stacked { writing-mode:vertical-rl; text-orientation:upright; margin:0 auto; flex:0 1 auto; }
.excel-row-number,.excel-column-name,.excel-corner { position:absolute; display:flex; justify-content:center; align-items:center; box-sizing:border-box; border:1px solid #d5dcd8; background:#f0f2f1; color:#4f5e56; font:12px Arial,sans-serif; z-index:2; }
.excel-column-name { z-index:3; }
.excel-corner { z-index:4; }
.excel-footer { flex:none; display:flex; min-width:0; min-height:40px; background:#f0f2f1; border-top:1px solid #bfc8c2; }
.excel-footer .excel-tabs { flex:1; min-width:0; border:0; scrollbar-width:thin; }
.excel-tab:focus-visible { outline:2px solid #217346; outline-offset:-3px; }
.excel-tools { flex:none; display:flex; align-items:center; gap:8px; padding:0 8px; color:#34473c; font-size:12px; }
.excel-tools select { width:auto; max-width:148px; padding:3px; font-size:12px; background:#fff; color:#222; border:1px solid #c5cfc9; border-radius:4px; }
.excel-fit { padding:5px 8px; border-radius:4px; border:1px solid #c5cfc9; white-space:nowrap; }
.excel-fit[aria-pressed=true] { background:#d8e8de; }
.excel-notes { flex:none; background:var(--surface); color:var(--muted); font-size:11px; padding:3px 8px; }
.excel-notes summary { cursor:pointer; }
.excel-notes .office-preview-notes { max-height:100px; overflow:auto; margin:4px 0; }
.excel-empty { position:absolute; padding:12px; font-size:14px; }
.file-conversation { flex:none; width:320px; max-width:45%; border-left:1px solid var(--border); overflow:auto; padding:12px; }
.file-conversation[hidden] { display:none; }
.file-conversation .message-text { overflow-wrap:anywhere; }
.file-conversation article { margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.file-conversation time { display:block; font-size:11px; color:var(--muted); margin:4px 0; }
.file-conversation button { margin:4px 0; }
@media(max-width:600px) {
 .dialog-shade:has(> .spreadsheet-dialog) { padding:0; }
 .dialog.spreadsheet-dialog { width:100vw; height:100dvh; border:0; border-radius:0; }
 .spreadsheet-dialog .dialog-head { padding-top:env(safe-area-inset-top); }
 .spreadsheet-dialog .dialog-head .icon-btn { width:40px; height:40px; }
 .excel-footer { flex-wrap:wrap; }
 .excel-footer .excel-tabs { flex-basis:100%; }
 .excel-tools { width:100%; justify-content:flex-end; padding:4px 8px; }
 .excel-range { margin-right:auto; }
 .excel-notes { padding-bottom:max(3px,env(safe-area-inset-bottom)); }
 .spreadsheet-dialog .file-conversation { position:absolute; z-index:8; inset:48px 0 0 auto; width:min(340px,90%); max-width:90%; background:var(--surface); box-shadow:-3px 0 12px #0002; }
}

/* Explicit forwarding stays separate from copying an access-controlled link. */
.reference-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.reference-meta small,.reference-source { color:var(--muted); font-size:12px; }
.reference-source { margin:4px 0 8px; }
.file-card.has-thumbnail [data-action="forward-file"] { position:absolute; top:6px; right:44px; }
.file-card.has-thumbnail:has([data-action="forward-file"]) .file-card-head { padding-right:88px; }
.file-card > [data-action="forward-file"],.file-list-row > [data-action="forward-file"] { flex:none; margin:4px; }
.forward-editor { margin:12px 0; }

/* Personal conversation sections are top-level siblings of the default lists. */
.personal-section .icon-btn { flex-shrink: 0; }
.section-empty { padding: 6px 10px 10px; font-size: 11px; opacity: .65; }
.section-order-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.section-order-row > span { flex: 1; overflow-wrap: anywhere; }
.dialog .section-channel-choice { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.section-channel-choice input { width: auto; flex-shrink: 0; }
.section-order-target { box-shadow: inset 0 2px var(--accent, #3980a8); }
[data-section-drag] { cursor: grab; }
.side-channel-row { position: relative; }
.side-channel-row .side-item { padding-right: 28px; }
.section-channel-menu { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; width: 24px; height: 24px; }
.side-channel-row:hover .section-channel-menu, .side-channel-row:focus-within .section-channel-menu { opacity: .7; }
@media (hover: none) { .section-channel-menu { opacity: .65; } }
/* Drop feedback must not move the destination underneath the pointer. */
.side-group { position: relative; }
.channel-dragging .channel-drop-ready > .channel-drop-hint {
  position: absolute; top: 0; right: 2px; margin: 0; padding: 5px 7px;
  background: var(--panel, #fff); z-index: 2; font-size: 11px;
}
@media (max-width: 760px), (hover: none) {
  .section-channel-menu { opacity: .65; width: 32px; height: 32px; }
  .side-channel-row .side-item { padding-right: 36px; }
}

/* Keep section management and the existing DM hide action in separate columns. */
.side-dm-row > .side-item { padding-right: 62px; }
.section-dm-menu { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; opacity: 0; }
.side-dm-row:hover > .section-dm-menu, .side-dm-row:focus-within > .section-dm-menu { opacity: .7; }
@media (hover: none), (pointer: coarse) {
  .side-dm-row > .side-item { padding-right: 84px; }
  .section-dm-menu { right: 42px; width: 40px; height: 40px; opacity: .65; }
}

/* Shared administration is distinct from personal settings. */
.owner-management[hidden]{display:none!important}
.owner-management-content p{line-height:1.65}
/* 설정 입구 3A: 스페이스 기본 정보 — 범위 한 줄 + 네 줄 */
.owner-scope{margin:0 0 12px;padding:6px 10px;border-radius:7px;background:var(--hover);font-size:12.5px;color:var(--muted)}
.owner-rows{display:flex;flex-direction:column;gap:8px}
.owner-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border:1px solid var(--border);border-radius:9px;background:var(--raised,#fff)}
.owner-row-text{flex:1;display:flex;flex-direction:column;min-width:0}.owner-row-text small{color:var(--muted);font-size:12px}
.owner-row .btn{text-decoration:none}
.owner-settings-links{display:grid;gap:12px;margin:20px 0}
.owner-settings-links a{color:var(--accent);padding:10px 0}
.owner-periods{display:flex;gap:8px}.owner-periods [aria-pressed=true]{outline:2px solid var(--accent)}
.owner-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}
.owner-metrics p{margin:0;padding:12px;border:1px solid var(--border);border-radius:8px;text-align:center;font-size:12px}
.owner-metrics b{display:block;font-size:24px}
.owner-table{overflow:auto}.owner-table table{width:100%;border-collapse:collapse}.owner-table th,.owner-table td{padding:10px;border-bottom:1px solid var(--border);text-align:right}.owner-table th:first-child,.owner-table td:first-child{text-align:left;overflow-wrap:anywhere}
@media(max-width:600px){.owner-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Sidebar context actions use the same menu for mouse, keyboard and touch. */
.conversation-settings-frame{border:0;width:100%;height:min(60vh,400px);background:var(--bg)}
.conversation-split{position:fixed;right:0;top:0;bottom:0;width:48vw;z-index:45;background:var(--bg,#fff);border-left:1px solid var(--border,#ccc);display:flex;flex-direction:column}
.conversation-split header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px}
.conversation-split header button{border:0;background:transparent;color:inherit;cursor:pointer}
.conversation-split iframe{width:100%;flex:1;min-height:0;border:0}
.has-conversation-split{width:52vw}
.space-split-view .rail,.space-split-view .sidebar,.space-split-view .topbar{display:none!important}
@media(max-width:760px){.conversation-split{width:100vw}.has-conversation-split{width:100%}}
.space-split-view .app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.space-split-view .main{grid-column:1;grid-row:1;display:block!important}
.space-split-view .channel-head [data-action="mobile-menu"],.space-split-view .channel-head [data-action="mobile-back"]{display:none!important}
.section-channel-choice small { display: block; margin-top: 3px; }

.touch-grammar-hint { display:none; }
.touch-lifted { outline:2px solid var(--accent); outline-offset:-2px; box-shadow:0 3px 10px #0002; }
@media (pointer: coarse) {
  .touch-grammar-hint { display:block; margin:8px 12px; font-size:12px; color:var(--muted); }
  .group-label > .icon-btn, .message-tools .icon-btn, .channel-head .icon-btn,
  .dialog-head .icon-btn, .thread-head .icon-btn, .file-card .icon-btn, .file-list-row .icon-btn { min-width:44px; min-height:44px; }
  .group-toggle { min-height:44px; }
  .side-channel-row .side-item { padding-right:8px; }
  .side-dm-row > .side-item { padding-right:46px; }
  /* Keep a keyboard/screen-reader menu path without a visible ellipsis. */
  .section-channel-menu, .side-dm-row > .section-dm-menu { width:1px; height:1px; min-width:0; min-height:0; padding:0; overflow:hidden; opacity:0; pointer-events:none; }
  .section-channel-menu:focus-visible, .side-dm-row > .section-dm-menu:focus-visible { width:44px; height:44px; opacity:1; pointer-events:auto; background:var(--surface); }
  /* 휴대폰 메시지 반응 1A(2026-10-24): 메시지마다 붙던 단추 줄을 숨긴다. 반응·댓글·책갈피·복사는 길게 누르기 메뉴로.
     이미 달린 반응과 '댓글 N개'는 그대로 보인다. 탭한 뒤 남는 :hover·:focus-within으로도 다시 나오지 않게 한다. */
  .message-tools, .message:hover > .message-tools, .message:focus-within > .message-tools { display:none; }
  .reactions > [data-action="emoji-message"] { display:none; }
  /* 2단계: 본문을 길게 눌러도 메뉴가 열리게, 글자 고르기·확대 말풍선을 막는다. */
  /* 본문만 막으면 아이폰은 이름·시각·반응·말풍선 여백 같은 옆 글자부터 고르기를 시작한다. 메시지 줄 전체를 막고 편집기만 되돌린다. */
  .message, .message * { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  .message .editing, .message .editing *, .message textarea, .message input, .message [contenteditable], .message [contenteditable] * { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
  .menu-pop button { min-height:44px; }
}

@media (pointer: coarse) { #side-list .side-item, #side-list .group-label { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; } }
@media (pointer: coarse) {
  .message { flex-wrap:wrap; }
  .message > .message-body, .message > .message-lane { flex-basis:calc(100% - 52px); }
  .message > .message-tools { flex-basis:100%; }
}

/* Conversation ownership: channel reading order stays fixed; own DM cards sit right. */
.message.message-own-channel { background:color-mix(in srgb,var(--selected) 35%,transparent); }
.message.message-own-channel:hover,.message.message-own-channel:focus-within { background:color-mix(in srgb,var(--selected) 55%,var(--surface)); }
.message.message-own-dm { justify-content:flex-end; }
.message.message-own-dm > .avatar { order:2; }
.message.message-own-dm > .message-lane > .message-body {
  flex:0 1 auto; flex-basis:auto; width:fit-content;
  max-width:min(100%,680px); padding:8px 12px; border-radius:10px;
  background:color-mix(in srgb,var(--selected) 45%,var(--raised)); text-align:left;
}
.message.message-own-dm > .message-tools { order:3; }
.thread-pane .message.message-own-dm > .message-lane > .message-body { max-width:100%; }
@media (max-width:600px) {
  .message.message-own-dm > .message-lane > .message-body { max-width:100%; padding:8px 10px; }
}
/* Editing needs room for toolbar groups without changing text alignment. */
.message.message-own-dm:has(.editing) > .message-lane > .message-body {
  flex:1; width:auto; max-width:100%;
}
.message.message-own-dm .editing .se-btn-tray { display:flex; flex-wrap:wrap; white-space:normal; }
.message.message-own-dm .editing .se-btn-module { flex:none; max-width:100%; }

/* Receipts share the content row, outside the bubble in every conversation. */
.message-lane { display:flex; align-items:flex-end; gap:8px; flex:1; min-width:0; }
.message .message-lane > .message-body { flex:0 1 auto; min-width:0; }
.message.message-own-dm > .message-lane { order:1; flex-direction:row-reverse; justify-content:flex-start; }
.message-receipt-side { flex:none; max-width:8em; padding-bottom:2px; font-size:11px; line-height:1.4; }
.message-receipt-side:empty { display:none; }
.message:has(.editing) .message-receipt-side { display:none; }
.message:has(.editing) .message-lane > .message-body { flex:1; }
@media (max-width:600px) { .message-receipt-side { max-width:6em; } }

.message-receipt { display:block; word-break:keep-all; margin:0; padding:3px 0; border:0; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }
.message-receipt:hover { color:var(--text); text-decoration:underline; }
@media (pointer:coarse) { .message-receipt { min-height:44px; } }

.side-item .badge { flex:none; }
.message-receipt-dm { display:inline-block; margin:0; color:var(--accent,#f5a623); font-size:11px; font-weight:700; line-height:1; }

.collection-filters { display:flex; flex-wrap:wrap; gap:8px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--border); flex:none; }
.collection-filters [aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.collection-filters button { display:inline-flex; align-items:center; gap:6px; }
.filter-count { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.collection-filters [aria-pressed="true"] .filter-count { background:var(--on-accent); color:var(--accent); }
/* 목록의 끝: 이어 보기 단추 또는 '모두 봤습니다' */
.collection-end { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 0 24px; color:var(--muted); font-size:12px; text-align:center; }
.collection-end.is-done { flex-direction:row; justify-content:center; }
.collection-end button { min-height:36px; font-weight:600; }
.collection-end-error { color:var(--danger); }
.collection-end-skeleton { display:block; width:100%; height:56px; border-radius:9px; background:var(--hover); }
.thread-summary { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:8px 0; color:var(--muted); }
.thread-summary strong { color:var(--accent); }
.side-shortcuts .rail-badge { position:static; display:inline-block; box-shadow:none; }

.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.profile-photo-preview .avatar { width:80px; height:80px; font-size:32px; }

.profile-photo-zone { display:flex; justify-content:center; padding:12px; border:1px dashed var(--line); border-radius:8px; }
.profile-photo-zone.photo-dragover { background:var(--hover); }
.profile-photo-zone canvas { width:min(256px,100%); height:auto; aspect-ratio:1; touch-action:none; cursor:move; border-radius:8px; }
.profile-photo-zone [hidden], [data-photo-controls][hidden] { display:none; }
.profile-photo-preview { padding:0; border:0; background:transparent; cursor:pointer; }
.profile-photo-actions { display:flex; justify-content:center; gap:8px; margin:8px 0; }
[data-photo-controls] input[type="range"] { width:100%; }
[data-photo-status]:empty { display:none; }

/* The thread anchor stays left; replies use the same width as DM replies. */
.thread-reply-divider { margin:12px 14px; padding-top:12px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
/* The opaque date pill sits above reaction tools without a full-width mask. */
.floating-date { position:sticky; top:0; height:0; z-index:4; display:flex; justify-content:center; align-items:flex-start; pointer-events:none; }
.floating-date[hidden] { display:none; }
.floating-date button, .floating-date .date-label { position:relative; flex:none; margin-top:8px; box-shadow:0 1px 3px #0001; }
#collection-filter-host { flex:none; }
#collection-filter-host[hidden] { display:none; }

/* Thread inbox retains the list beside its reply pane. */
.collection { min-width:0; }
/* 스레드 모아 보기 카드: 카드 전체가 스레드를 여는 링크. 장소 단추 · 댓글 수 · 새 댓글 · ⋯ */
.thread-inbox-card { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.thread-inbox-card:hover { border-color:color-mix(in srgb, var(--text) 38%, var(--border)); box-shadow:0 2px 8px color-mix(in srgb, var(--text) 10%, transparent); }
.thread-inbox-card:has(.thread-card-place:focus-visible) { border-color:var(--accent); }
.thread-card-head { gap:6px; min-width:0; padding-right:10px; }
.thread-card-place { display:inline-flex; align-items:center; gap:4px; min-width:0; min-height:32px; padding:0; color:var(--text); font-size:inherit; }
.thread-card-place b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-card-place:hover b { text-decoration:underline; }
.thread-card-place .icon { flex:none; width:14px; height:14px; }
.thread-card-count { flex:none; white-space:nowrap; }
.thread-card-muted { flex:none; padding:1px 8px; border-radius:10px; background:color-mix(in srgb, var(--muted) 14%, transparent); color:var(--text); font-size:11px; font-weight:600; }
.thread-card-new { flex:none; padding:2px 10px; border-radius:12px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; }
.thread-card-menu { flex:none; width:32px; height:32px; }
.thread-inbox-card .message { overflow-wrap:anywhere; }
.thread-latest { margin:0 16px; border-top:1px solid var(--border); background:var(--surface); border-radius:0 0 6px 6px; }
.thread-latest .compact-message { padding:8px 12px 10px; }
.thread-card-deleted { margin:0; padding:10px 18px; color:var(--muted); font-size:13px; }
.thread-card-actions { padding:8px 18px 14px; }
.thread-card-actions button { min-height:36px; }
/* 새 댓글이 있는 스레드: 옅은 바탕·진한 테두리, 새 댓글은 점과 굵은 본문. 두 묶음 머리글. */
.thread-inbox-card.has-new { border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.thread-inbox-card .thread-new .compact-message.is-new .message-text { font-weight:600; }
.thread-inbox-card .thread-new .compact-message + .compact-message { border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.thread-inbox-card .thread-earlier { margin:8px 12px 0; }
.thread-card-more { margin:0; padding:4px 12px 10px; color:var(--muted); font-size:12px; }
.thread-section { margin:6px 0 8px; font-size:14px; font-weight:700; color:var(--text); }
.thread-section ~ .thread-section { margin-top:22px; color:var(--muted); }
.collection-role-link { margin:4px 0 16px; text-align:center; color:var(--muted); font-size:12px; }
.collection-role-link .link-button { min-height:28px; font-weight:600; color:var(--link); text-decoration:none; }
.collection-role-link .link-button:hover { text-decoration:underline; }
.filter-role-link { margin:0; padding:6px 20px 8px; text-align:left; background:var(--surface); border-bottom:1px solid var(--border); }
.menu-hint { display:block; padding:0 12px 8px 38px; color:var(--muted); font-size:11px; line-height:1.4; }
@media(max-width:760px) { .main:has(.thread-pane)>.collection { display:none; } }

.thread-source { display:block; font-size:12px; font-weight:400; color:var(--muted); overflow-wrap:anywhere; }

.message-avatar { padding:0; border:0; background:none; align-self:flex-start; flex-shrink:0; cursor:pointer; border-radius:8px; }
.message-avatar:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.message.message-own-dm>.message-avatar { order:2; }
.member-profile-card { width:340px; max-height:calc(100dvh - 24px); }
.member-card-identity { display:flex; flex-direction:column; align-items:center; gap:8px; }
.member-card-identity>.avatar { width:112px; height:112px; font-size:44px; }
.member-card-identity>span { color:var(--muted); font-size:13px; }
.member-card-details { margin:16px 0; font-size:14px; line-height:1.5; }
.member-card-detail { display:grid; grid-template-columns:4.5em minmax(0,1fr); column-gap:12px; margin-top:6px; }
.member-card-detail dt { color:var(--muted); font-weight:400; }
.member-card-detail dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.member-card-detail dd>div+div { margin-top:4px; }
.member-card-contact-group.separated { margin-top:14px; }
.member-card-send { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.member-card-send small { color:var(--muted); font-size:11px; }
.member-card-status { color:var(--accent); }
@media(max-width:760px) { .dialog-shade:has(.member-profile-card) { align-items:flex-end; padding:12px; } .member-profile-card { width:100%; max-height:85dvh; } }

.dm-member-picker { display:flex; flex-direction:column; height:min(640px,85dvh); }
.dm-member-picker .dialog-content { display:flex; flex-direction:column; min-height:0; flex:1; padding-top:12px; }
.dm-picker-search { flex-shrink:0; }
.dm-picker-count { color:var(--muted); font-size:13px; }
.dm-picker-results { overflow:auto; flex:1; min-height:0; }
.dm-picker-person { width:100%; display:flex; gap:12px; align-items:center; text-align:left; padding:12px 8px; min-height:60px; border-radius:6px; }
.dm-picker-person:hover,.dm-picker-person:focus-visible { background:var(--hover); }
.dm-picker-person>span:not(.avatar):not(.dm-picker-check):not(.dm-picker-shortcut-icon):not(.dm-picker-go) { display:flex; flex-direction:column; flex:1; min-width:0; overflow-wrap:anywhere; }
.dm-picker-person small { color:var(--muted); font-size:12px; }
.dm-picker-existing { flex:none; display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:11px; background:color-mix(in srgb,var(--selected) 75%,transparent); color:var(--accent) !important; font-size:11px !important; font-weight:600; white-space:nowrap; }
.dm-picker-existing svg { width:12px; height:12px; }
.dm-picker-check { flex:none; display:inline-flex; color:var(--accent); }
.dm-picker-check svg { width:18px; height:18px; }
.dm-picker-person .dm-picker-affiliation { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
.dm-picker-empty { padding:20px 8px; text-align:center; }
.dm-picker-empty button { margin-top:12px; color:var(--accent); }

/* Personal planner registration is a bridge out of the collaboration menu. */
.menu-pop .planner-menu-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 7px 4px;
}
.menu-pop .planner-menu-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.menu-pop .planner-menu-heading .icon { width: 16px; height: 16px; }
.menu-pop > .planner-menu-item .icon { color: var(--accent); }

.planner-registration-time { border:0; padding:0; margin:15px 0 6px; }
.planner-registration-time legend { font-size:14px; font-weight:600; padding:0; }
.planner-registration-time > div { display:flex; align-items:flex-end; gap:10px; }
.dialog .planner-registration-time label { flex:1; margin:6px 0 0; }
.planner-registration-time select { display:block; width:100%; margin-top:4px; }
.planner-registration-time > div > span { padding-bottom:10px; }
.dialog p.planner-priority-hint { margin:4px 0 10px; font-size:12px; color:var(--muted); line-height:1.5; word-break:keep-all; }
.planner-priority-hint b { color:var(--text); font-weight:700; }

/* Owner-only organization management */
.organization-workspace{--org-warn-bg:color-mix(in srgb,#d9822b 16%,var(--raised,#fff));--org-warn-text:color-mix(in srgb,#b0621c 80%,var(--text));--org-neutral-dot:color-mix(in srgb,var(--muted) 70%,transparent)}
.org-members [aria-pressed="true"]{background:var(--selected);color:var(--accent);box-shadow:inset 3px 0 0 var(--dds-light,var(--accent));border-radius:8px}.org-members [aria-pressed="true"] b{font-weight:800}
.org-twin{margin-inline-start:6px;padding:1px 6px;border-radius:8px;background:var(--org-warn-bg);color:var(--org-warn-text);font-size:11px;font-weight:700;vertical-align:middle}
.org-state{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:1px 7px;border-radius:8px;background:var(--hover);color:var(--muted);font-size:11px;font-weight:700}.org-state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--org-neutral-dot)}
.org-state[data-state="review"]{background:var(--org-warn-bg);color:var(--org-warn-text)}.org-state[data-state="review"]::before{background:#d9822b}
.org-filter{display:flex;flex-direction:column;gap:4px;min-width:0}.org-filter>div{display:flex;flex-wrap:wrap;border:1px solid var(--control-border,var(--border));border-radius:8px;overflow:hidden}
.org-filter button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:0;border-inline-start:1px solid var(--line,var(--border));border-radius:0;background:var(--raised,var(--panel));white-space:nowrap}.org-filter button:first-child{border-inline-start:0}
.org-filter [aria-pressed="true"]{background:var(--selected);color:var(--accent);font-weight:700}.org-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.org-filter [data-filter-value="unassigned"] .org-dot{background:var(--org-neutral-dot)}.org-filter [data-filter-value="review"] .org-dot{background:#d9822b}.org-filter [data-filter-value="placed"] .org-dot{background:var(--dds-light,#5b9a3c)}
.org-editor .org-email{margin:2px 0 0;word-break:break-all}.org-editor .org-note{margin:0;padding:6px 8px;border-radius:6px;background:var(--org-warn-bg);color:var(--org-warn-text);line-height:1.5}
.org-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:220px;padding:24px;text-align:center}.org-empty b{font-size:16px;color:var(--accent)}.org-editor .org-empty p{font-size:13px;line-height:1.6;color:var(--muted)}
.org-save-state{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted)}.org-save-state i{width:8px;height:8px;border-radius:50%;background:var(--dds-light,#5b9a3c)}.org-save-state[data-state="dirty"] i{background:#d9822b}.org-save-state[data-state="dirty"] b{color:var(--org-warn-text)}
.organization-workspace{--org-danger:color-mix(in srgb,#b8442a 82%,var(--text));--org-danger-bg:color-mix(in srgb,#b8442a 10%,var(--raised,#fff))}
.org-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.org-zoom{display:inline-flex;align-items:stretch;border:1px solid var(--control-border,var(--border));border-radius:8px;overflow:hidden}.org-zoom button{min-height:34px;min-width:34px;padding:0 10px;border:0;border-inline-start:1px solid var(--line,var(--border));border-radius:0;background:var(--raised,var(--panel));color:var(--accent)}.org-zoom button:first-child{border-inline-start:0}.org-zoom [data-zoom="reset"]{min-width:58px;font-weight:700}
.org-danger{color:var(--org-danger);border:1px solid color-mix(in srgb,var(--org-danger) 45%,transparent);background:var(--raised,#fff);border-radius:8px}.org-danger-fill{background:var(--org-danger);color:var(--raised,#fff);border:0;border-radius:6px;font-weight:700}
.org-add{border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:8px;background:var(--raised,transparent);color:var(--accent);font-weight:600;min-height:36px}
.org-dirty-pill{padding:2px 8px;border-radius:10px;background:var(--org-warn-bg);color:var(--org-warn-text);font-size:12px;font-weight:700}.org-dirty-pill[hidden]{display:none}
.org-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--org-danger-bg);border:1px solid color-mix(in srgb,var(--org-danger) 35%,transparent)}.org-confirm p{flex:1 1 100%;margin:0;font-size:12px;color:var(--org-danger)}.org-confirm button{min-height:32px;padding:0 12px}
.org-option-columns .org-option{display:block;margin:0;padding:6px 0 6px calc(var(--org-depth,0)*16px);border-bottom:1px solid var(--line,var(--border))}
.org-option-line{display:flex;align-items:center;gap:6px}.org-option-line input{flex:1 1 auto;min-width:0;min-height:36px}
.org-icon{flex-shrink:0;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line,var(--border));border-radius:8px;background:var(--raised,#fff);color:var(--accent)}.org-icon.org-danger{color:var(--org-danger)}
.org-option-toggle{border-color:transparent;background:transparent;color:var(--muted)}.org-option-toggle span{display:inline-block;transition:transform .15s}.org-option-toggle[aria-expanded="true"] span{transform:rotate(90deg)}
.org-option-rank{width:20px;flex-shrink:0;text-align:center;color:var(--muted);font-size:13px}
.org-option-more{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:8px 0 4px 42px}.org-option-more[hidden]{display:none}.org-option-more label{margin:0;font-size:12px;color:var(--muted)}.org-option-more select{min-height:34px}
.org-option-hint{margin:0 0 6px;font-size:12px;color:var(--muted)}.org-option-columns legend small{font-weight:400;color:var(--muted)}.org-option-columns fieldset>.org-add{width:100%;margin-top:10px}
.org-history-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:4px 0 10px}.org-history-tools label{flex:1 1 220px;margin:0}
.org-history{display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0}.org-history-day{margin:8px 0 0;font-size:13px;color:var(--muted)}.org-history-group{display:flex;flex-direction:column;gap:8px}
.org-history-item{border:1px solid var(--line,var(--border));border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}.org-history-item header{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}.org-history-item header b{color:var(--accent)}.org-history-item header small{color:var(--muted)}
.org-history-item dl{margin:0;display:flex;flex-direction:column;gap:6px;font-size:13px}.org-history-item dl>div{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}.org-history-item dt{min-width:64px;color:var(--muted)}.org-history-item dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.org-history-item s{color:var(--muted)}.org-history-item s.org-none{text-decoration:none}.org-history-item mark{padding:1px 6px;border-radius:6px;background:var(--selected);color:var(--accent);font-weight:600}.org-history-item p,.org-history-empty{margin:0;font-size:12px;color:var(--muted)}
.org-reload span{display:inline-block}
.org-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:12px 0;border-bottom:1px solid var(--line,var(--border))}.org-tabs [role="tab"]{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0;border-radius:0;background:transparent;color:var(--muted)}.org-tabs [aria-selected="true"]{color:var(--accent);font-weight:700;box-shadow:inset 0 -3px 0 var(--dds-light,var(--accent))}
.org-tab-badge{min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--org-warn-bg);color:var(--org-warn-text);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.org-members{display:grid;gap:6px;max-height:230px;overflow:auto;margin:12px 0}.org-members button{text-align:left;padding:10px}.org-members small{display:block}.org-editor{display:grid;gap:10px}.org-editor label{display:grid;gap:5px}.org-editor select{width:100%;min-height:40px}.org-option{display:flex;gap:8px;margin:8px 0}.org-option input{min-width:0;flex:1}.org-content fieldset{min-width:0;margin:12px 0}.org-content li{margin:10px 0;overflow-wrap:anywhere}
.org-option{flex-wrap:wrap;align-items:center}.org-option select{min-width:0;max-width:100%;flex:1 1 140px;min-height:36px}.org-option input{flex:1 1 140px}.org-option button{flex-shrink:0}

.org-editor .org-primary{display:flex;align-items:center;gap:8px}.org-primary input{width:auto;margin:0}.org-editor [data-affiliation]{display:grid;gap:10px}
.dialog .org-primary input[type="radio"]{width:16px;height:16px;flex:0 0 16px;margin:0}.dialog .org-primary{margin:4px 0}

/* Organization workspace: independent panes retain their place while editing. */
.dialog.organization-workspace{width:calc(100vw - 32px);max-width:1600px;height:calc(100dvh - 32px);max-height:none;display:flex;flex-direction:column}
.organization-workspace .dialog-content{display:flex;flex-direction:column;min-height:0;overflow:hidden;flex:1}
.org-scope{margin:0 0 8px;color:var(--muted)}
.organization-workspace .org-content{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.org-toolbar,.org-footer,.org-savebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0}
.org-toolbar label{margin:0;min-width:150px}.org-toolbar label:first-child{flex:1}
.org-layout{display:grid;grid-template-columns:240px minmax(200px,1fr) 340px;gap:12px;flex:1;min-height:0}
.org-layout.members-only{grid-template-columns:minmax(220px,1fr) minmax(300px,2fr)}
.org-member-pane,.organization-workspace .org-editor,.org-canvas{overflow:auto;min-height:0;border:1px solid var(--line,#d9dfe5);border-radius:8px;padding:10px}
.organization-workspace .org-members{max-height:none;display:flex;flex-direction:column}.org-members button{flex-shrink:0;text-align:left}.org-members small{display:block}
.org-chart-tree,.org-chart-tree ul{display:flex;justify-content:center;gap:20px;list-style:none;padding:0;margin:0}.org-chart-tree{width:max-content;min-width:100%}
.org-chart-tree li{display:flex;flex-direction:column;align-items:center;gap:24px}.org-chart-tree ul{border-top:1px solid var(--line,#cdd5dd);padding-top:24px}
.org-node{width:220px;border:1px solid var(--line,#cdd5dd);border-radius:10px;padding:10px;background:var(--panel,#fff);flex-shrink:0}
.org-node header{border-bottom:1px solid var(--line,#cdd5dd);padding-bottom:6px}.org-node header button{font-weight:700}.org-node small{display:block;color:var(--muted,#647080);font-size:12px}
.org-node button{width:100%;text-align:left}.org-person{display:block;margin-top:6px}.org-person.chosen{background:var(--selected);border-color:var(--accent)}
.org-chart{width:max-content;min-width:100%;padding:20px}.org-editor h3{margin-top:0}.org-editor p{font-size:12px;color:var(--muted)}
/* 편집 내용만 스크롤하고 저장 줄은 내용 아래에 둔다. 패널이 아주 낮으면(내보내기 상자가 열린 경우 등) 패널 전체가 스크롤된다. */
.organization-workspace .org-editor{display:flex;flex-direction:column;overflow:auto}.org-editor-body{flex:1 1 auto;min-height:120px;overflow:auto;display:grid;gap:10px;align-content:start}.organization-workspace .org-editor>.org-savebar{position:static;flex-shrink:0}
.org-savebar{position:sticky;bottom:0;background:var(--panel,#fff);border-top:1px solid var(--line,#ddd)}
.org-option-columns{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}.org-option-columns fieldset{min-width:0}.org-option{padding:8px;border-bottom:1px solid var(--line,#ddd)}.org-option summary{cursor:pointer;padding:6px;font-weight:600}
.org-unsaved,.org-export{padding:12px;background:var(--panel,#f2f6fa);border:1px solid #b5c4d4;border-radius:8px;flex-shrink:0}.org-unsaved[hidden],.org-export[hidden]{display:none}.org-unsaved pre{max-height:200px;overflow:auto;white-space:pre-wrap}.org-history li{border-bottom:1px solid var(--line,#ddd);padding:12px}.org-history p{font-size:13px;overflow-wrap:anywhere}
.org-footer{justify-content:space-between}.organization-workspace .dialog-error{margin:4px 0}.org-primary input[type=radio]{width:16px!important;flex:none}
@media(max-width:1050px){.org-layout{grid-template-columns:180px minmax(180px,1fr)}.organization-workspace .org-editor{grid-column:1/-1;max-height:42dvh}.org-option-columns{grid-template-columns:1fr}.org-layout.members-only{grid-template-columns:1fr 1fr}.org-layout.members-only .org-editor{grid-column:auto;max-height:none}}
@media(max-width:600px){.dialog.organization-workspace{width:100vw;height:100dvh;border-radius:0}.org-layout,.org-layout.members-only{display:flex;flex-direction:column;overflow:auto}.org-member-pane{max-height:180px;min-height:100px;flex-shrink:0}.org-canvas{min-height:260px;flex-shrink:0}.organization-workspace .org-editor{max-height:none;overflow:visible;flex-shrink:0}.org-tabs{overflow:auto;flex-shrink:0}.org-tabs button{white-space:nowrap}.org-toolbar{flex-shrink:0}}
.dialog.dm-member-picker{width:min(1100px,calc(100vw - 32px));max-width:1100px}
.dm-org-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;min-height:260px}.dm-org-tree{max-height:48dvh;overflow:auto;display:flex;flex-direction:column}.dm-org-tree:empty{display:none}.dm-org-tree button{text-align:left;flex-shrink:0}.dm-org-main{min-width:0;overflow:auto}.dm-picker-results .org-chart-tree{padding:12px}.dm-picker-selection{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:8px;background:var(--panel,#fff);padding:10px}.dm-picker-selection [data-picked]{display:flex;flex-wrap:wrap;gap:4px}.dm-picker-person[aria-pressed=true]{background:var(--selected);border-color:var(--accent)}
@media(max-width:600px){.dm-org-layout{grid-template-columns:1fr}.dm-org-tree{max-height:130px}.dialog.dm-member-picker{width:100vw}.dm-picker-selection{flex-wrap:wrap}}
.org-pane-tabs{display:none}.organization-workspace .dialog-head{padding-bottom:10px}.organization-workspace label{margin-bottom:8px}.organization-workspace .org-editor input,.organization-workspace .org-editor select{margin:4px 0}.organization-workspace .org-editor fieldset{margin:8px 0}
@media(max-width:850px){.org-pane-tabs{display:flex;gap:8px;margin-bottom:8px}.org-layout,.org-layout.members-only{display:block;overflow:auto}.org-layout>.org-member-pane,.org-layout>.org-canvas,.org-layout>.org-editor{display:none;max-height:none;height:100%;min-height:0}.org-layout[data-pane-current=list]>.org-member-pane,.org-layout[data-pane-current=chart]>.org-canvas,.org-layout[data-pane-current=editor]>.org-editor{display:block}.org-layout.members-only[data-pane-current=chart]>.org-member-pane{display:block}.organization-workspace .org-editor{overflow:auto}.org-canvas{height:100%}}
.org-chart-tree li{position:relative}.org-chart-tree li>ul{position:relative}.org-chart-tree li>ul::before{content:"";position:absolute;left:50%;height:24px;top:-25px;border-left:1px solid var(--line,#cdd5dd)}.org-chart-tree ul>li::before{content:"";position:absolute;left:50%;height:24px;top:-24px;border-left:1px solid var(--line,#cdd5dd)}
.org-kind-tabs{display:none}@media(max-width:1050px){.org-kind-tabs{display:flex;gap:8px}.org-option-columns>[data-kind]{display:none}.org-option-columns[data-option-current=department]>[data-kind=department],.org-option-columns[data-option-current=position]>[data-kind=position],.org-option-columns[data-option-current=duty]>[data-kind=duty]{display:block}}

/* 조직관리 전체 페이지(#<wid>/organization): 페이지 자체는 스크롤하지 않고 목록·조직도·편집 패널만 스크롤한다. */
.organization-page{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:12px 18px 10px}
.org-page-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex-shrink:0;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.org-page-back{white-space:nowrap}
.org-crumb{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;color:var(--muted);font-size:13px}
.org-crumb h1{margin:0;font-size:17px;color:var(--text)}
.org-page-form{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;margin:0}
@media(max-width:600px){.organization-page{padding:8px 10px}.org-page-head{gap:8px;padding-bottom:6px;margin-bottom:6px}.org-crumb>span{display:none}}

/* DM 상대 선택: 검색 중이거나 부서가 없으면 트리 칸을 접고, 조직도를 불러오는 동안은 트리 자리를 미리 잡아 화면이 밀리지 않게 한다. */
.dm-org-layout.no-tree{grid-template-columns:minmax(0,1fr)}.dm-org-layout.no-tree .dm-org-tree{display:none}
.dm-picker-scope{margin:6px 0 0;color:var(--muted);font-size:12px}
.dm-org-loading{display:flex;flex-direction:column;gap:8px;padding:2px 0}.dm-org-loading small{color:var(--muted);font-size:11px}
.dm-org-loading span{display:block;height:12px;border-radius:4px;background:color-mix(in srgb,var(--muted) 16%,transparent)}
.dm-org-loading span:nth-of-type(odd){width:60%}.dm-org-loading span:nth-of-type(even){width:80%}
.dm-picker-person[aria-pressed=true] .dm-picker-existing{background:var(--surface,#fff)}

/* DM 상대 선택 2단계: 목록|조직도 전환, 부서 트리, 고른 사람 칩, 바로 열기 */
.dm-picker-views{display:inline-flex;align-self:flex-start;margin:10px 0 2px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.dm-picker-views button{display:flex;align-items:center;gap:6px;height:36px;padding:0 16px;border:0;border-radius:0;background:var(--surface,#fff);color:var(--text);font-size:13px}
.dm-picker-views button+button{border-left:1px solid var(--border)}
.dm-picker-views button[aria-pressed=true]{background:var(--selected);color:var(--accent);font-weight:700}
.dm-picker-views svg{width:16px;height:16px}
.dm-org-tree nav{display:flex;flex-direction:column;gap:2px}
.dm-tree-title{padding:0 8px 4px;color:var(--muted);font-size:11px;font-weight:700}
.dm-tree-row{display:flex;align-items:center;padding-left:calc(var(--depth,0) * 14px)}
.dm-tree-toggle{flex:none;width:18px;height:32px;padding:0;border:0;background:transparent;color:var(--muted);font-size:10px;display:inline-flex;align-items:center;justify-content:center}
.dm-tree-row [data-dept]{flex:1;min-width:0;height:32px;display:flex;align-items:center;gap:6px;padding:0 8px 0 4px;border:0;border-radius:6px;background:transparent;font-size:13px;text-align:left}
.dm-tree-row [data-dept] span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-tree-row [data-dept] small{flex:none;color:var(--muted);font-size:11px;font-weight:400}
.dm-tree-row [data-dept]:hover{background:var(--hover)}
.dm-tree-row [data-dept][aria-current=true]{background:var(--selected);color:var(--accent);font-weight:700}
.dm-picker-chosen{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:34px;margin-top:8px}
.dm-picker-chosen-count{color:var(--muted);font-size:12px;font-weight:700}
.dm-picker-chosen:has(.dm-picker-chip) .dm-picker-chosen-count{color:var(--accent)}
.dm-picker-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 2px 0 4px;border:1px solid var(--accent);border-radius:15px;background:var(--selected);color:var(--accent);font-size:13px;font-weight:600}
.dm-picker-chip .avatar{width:22px;height:22px;min-width:22px;border-radius:11px;font-size:11px}
.dm-picker-chip button{width:24px;height:24px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--accent);font-size:14px;font-weight:700}
.dm-picker-chip button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.dm-picker-clear{border:0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline}
.dm-picker-limit{color:var(--muted);font-size:12px;align-self:center}
.dm-picker-group-label{display:block;padding:8px 8px 4px;color:var(--muted);font-size:11px;font-weight:700}
.dm-picker-shortcuts{display:flex;flex-direction:column;margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.dm-picker-shortcut{min-height:52px;padding:8px}
.dm-picker-shortcut-icon{flex:none;width:36px;height:36px;border-radius:8px;background:var(--selected);color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.dm-picker-shortcut-icon svg{width:18px;height:18px}
.dm-picker-go{flex:none;color:var(--muted)}
.dm-picker-ai{flex:none;padding:1px 5px;border:1px solid var(--accent);border-radius:4px;color:var(--accent)!important;font-size:10px!important;font-weight:700}
.dm-picker-department[hidden]{display:none!important}
.dm-tree-toggle{font-size:12px;color:var(--text)}.dm-picker-results>.dm-picker-person+.dm-picker-person{margin-top:2px}

/* 메뉴가 창보다 길면 메뉴 안에서 스크롤한다(위 .menu-pop overflow). 메시지 메뉴의 플래너 등록은 맨 위 세 칸 단추. */
.planner-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0 4px 4px}
.menu-pop .planner-menu-grid>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 4px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--selected) 45%,var(--raised));color:var(--accent);font-size:12px;text-align:center}
.menu-pop .planner-menu-grid>button:hover,.menu-pop .planner-menu-grid>button:focus-visible{background:var(--selected)}
/* DM 대화 정보: 입력창이 아닌 읽는 정보 */
.dm-info{display:flex;flex-direction:column;gap:14px}
.dm-info-lead{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted)}.dm-info-lead svg{width:16px;height:16px;color:var(--accent);flex:none}
.dm-info-list,.channel-info-read{display:grid;grid-template-columns:84px minmax(0,1fr);row-gap:12px;margin:0;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.dm-info-list dt,.channel-info-read dt{color:var(--muted)}.dm-info-list dd,.channel-info-read dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dm-info-people{display:flex;flex-direction:column;gap:6px}.dm-info-people>span{display:flex;align-items:center;gap:8px}.dm-info-people .avatar{width:22px;height:22px;min-width:22px;font-size:11px}
.dm-info-links{display:flex;gap:8px;flex-wrap:wrap}
.dm-info .dialog-actions{justify-content:space-between}
/* 파일·고정된 메시지 탭을 불러오는 동안의 자리표시 */
.collection-loading{display:flex;flex-direction:column;gap:12px;padding:16px}.collection-loading small{color:var(--muted)}
.collection-loading span{display:block;height:72px;border-radius:10px;background:color-mix(in srgb,var(--muted) 12%,transparent)}
.collection-list.is-refreshing>:not(.collection-refreshing){opacity:.45;transition:opacity .15s}
.collection-refreshing{display:block;padding:10px 16px 0;color:var(--muted);font-size:12px}

/* DM 첫 화면: 누구와의 대화인지·누가 보는지, 첫 메시지 전에는 바로 시작 단추 */
.dm-intro{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dm-intro h1{margin:4px 0 0}.dm-intro p{margin:0;line-height:1.6}.dm-intro-line{font-size:13px;color:var(--muted)}
.dm-intro-face{position:relative;display:inline-flex}.dm-intro-face .avatar{width:56px;height:56px;min-width:56px;border-radius:14px;font-size:24px}
.dm-intro-faces .avatar{width:48px;height:48px;min-width:48px;border:3px solid var(--surface);font-size:20px}.dm-intro-faces .avatar+.avatar{margin-left:-12px}
.dm-intro-badge{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:12px;border:2px solid var(--surface);background:var(--selected);color:var(--accent);display:flex;align-items:center;justify-content:center}.dm-intro-badge svg{width:13px;height:13px}
/* Same profile entry as message avatars; retain the introductory heading style. */
.dm-intro-profile{padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:14px}
.dm-intro-name{min-height:44px;border-radius:4px;text-align:left;overflow-wrap:anywhere}
.dm-intro-profile:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(hover:hover){.dm-intro-face.dm-intro-profile:hover{box-shadow:0 0 0 3px var(--selected)}.dm-intro-name:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}}
.dm-intro-actions{display:flex;gap:8px}
.dm-intro-start{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dm-intro-start button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--selected) 45%,var(--surface));color:var(--accent);font-size:13px}
.dm-intro-start button:hover,.dm-intro-start button:focus-visible{background:var(--selected)}.dm-intro-start svg{width:16px;height:16px}
/* @ 메뉴: 에이전트 줄 설명, DM 참여자 묶음 */
.menu-pop .mention-agent span{display:flex;flex-direction:column;gap:2px}.menu-pop .mention-agent small{color:var(--muted);font-size:11px;font-weight:400}
.menu-pop .menu-heading{display:block;padding:8px 10px 2px;color:var(--muted);font-size:11px;font-weight:700}
/* 멘션 메뉴: 아바타·소속 한 줄, 좁혀 찾는 동안 고른 줄 표시, 맞은 글자 강조 */
#mention-menu{width:340px;max-height:min(420px,calc(100vh - 16px))!important}
.menu-pop>.mention-person{align-items:center;gap:10px;padding:6px 10px}
.menu-pop>.mention-person .avatar{width:28px;height:28px;flex-shrink:0;font-size:12px}
.menu-pop>.mention-person>span{display:flex;flex-direction:column;min-width:0}
.menu-pop>.mention-person b{font-weight:600;overflow-wrap:anywhere}
.menu-pop>.mention-person small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-pop>.mention-person mark{background:color-mix(in srgb,#e8b931 38%,transparent);color:inherit;border-radius:2px}
.menu-pop>button.is-active{background:var(--selected);box-shadow:inset 2px 0 0 var(--accent)}
.menu-pop .mention-empty{margin:0;padding:10px;color:var(--text);font-size:13px}
.menu-pop .mention-empty small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.menu-pop .mention-hint{display:block;margin-top:4px;padding:6px 10px 2px;border-top:1px solid var(--border);color:var(--muted);font-size:11px}
.agent-ask-list dt{white-space:nowrap}.agent-ask-list{grid-template-columns:max-content minmax(0,1fr);column-gap:16px}
.link-button{border:0;background:transparent;padding:0;color:var(--accent);text-decoration:underline}

/* 입력창 단추 메뉴가 열린 동안 누른 단추를 표시 */
.compose-actions [aria-expanded=true]{background:var(--selected);box-shadow:inset 0 0 0 1px var(--accent)}
/* DM의 내 메시지: 이름·사진 없이 말풍선과 시간 */
.message.dm-own>.avatar,.message.dm-own>.message-avatar{display:none}
.message.dm-own .message-meta .name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.message.dm-own .message-meta{justify-content:flex-end}
/* 낮은 창(높이 640px 미만, 휴대폰 제외): 서식 도구를 접고 입력창을 줄인다. Aa로 펼친다. */
@media (min-width:601px) and (max-height:639px){
  .composer .mobile-format{display:flex;align-items:center;justify-content:center;font-weight:600}
  .composer .mobile-format[aria-expanded=true]{background:var(--selected)}
  .composer .se-toolbar{display:none!important}
  .formats-open .se-toolbar{display:block!important}
  .composer .rich-composer{min-height:40px!important;max-height:35dvh!important}
  .composer textarea{min-height:40px;max-height:35dvh}
  .composer-foot{display:none}
}

/* 스레드 창(휴대폰 제외): 폭이 좁아 서식 도구를 접은 채 시작하고 Aa로 펼친다. */
@media (min-width:601px){
  .thread-pane .composer .mobile-format{display:flex;align-items:center;justify-content:center;font-weight:600}
  .thread-pane .composer .mobile-format[aria-expanded=true]{background:var(--selected)}
  .thread-pane .composer .se-toolbar{display:none!important}
  .thread-pane .formats-open .se-toolbar{display:block!important}
}

/* 채널 상단: 아이콘·이름·⌄ 한 줄 + 주제(또는 채널 종류) 한 줄 */
.member-stack>.member-stack-icon{display:none;align-items:center}.member-stack-icon svg{width:14px;height:14px}
.channel-title-rich{flex-direction:column;align-items:flex-start;gap:1px;padding:3px 6px;margin-left:-6px;border-radius:6px}
.channel-title-rich:hover,.channel-title-rich:focus-visible{background:var(--hover)}
.channel-title-main{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.channel-title-main>svg{flex:none;width:16px;height:16px;color:var(--muted)}.channel-title-main>svg:last-child{width:12px;height:12px}
.channel-title-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel-title-sub{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:400;color:var(--muted)}
.channel-title-count{display:none}
.channel-head:has(.channel-title-rich){height:auto;min-height:56px}
/* 채널 첫 화면 */
.channel-intro-mark{width:56px;height:56px;border-radius:14px;background:var(--selected);color:var(--accent);display:flex;align-items:center;justify-content:center}.channel-intro-mark svg{width:26px;height:26px}
.channel-intro-scope{color:var(--accent);font-size:13px;font-weight:600}

/* 채널 정보 창: 요약 + 탭, 공개 범위 선택지, 바꿀 때만 확인, 되돌리기 어려운 작업 상자 */
.channel-info-summary{margin:0 0 6px;color:var(--muted);font-size:13px}
.channel-info-tabs{display:flex;gap:18px;margin:0 0 12px;border-bottom:1px solid var(--border)}
.channel-info-tabs [role=tab]{padding:8px 0;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:14px}
.channel-info-tabs [role=tab][aria-selected=true]{border-bottom-color:var(--accent);color:var(--accent);font-weight:700}
.channel-info-panel[hidden]{display:none}
.channel-kind-field{display:flex;flex-direction:column;gap:8px;margin:0 0 10px;padding:0;border:0}.channel-kind-field legend{font-weight:700;margin-bottom:6px}
.channel-kind-choice{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:8px;cursor:pointer}
.channel-kind-choice:has(input:checked){border-color:var(--accent);background:var(--selected)}
.channel-kind-choice span{display:flex;flex-direction:column;gap:2px}.channel-kind-choice small{color:var(--muted);font-weight:400}
.visibility-confirm{margin:0 0 10px;padding:12px;border-radius:8px;background:color-mix(in srgb,#d9822b 14%,var(--raised));color:color-mix(in srgb,#8a4f12 85%,var(--text));font-size:13px}
.visibility-confirm ul{margin:6px 0 8px;padding-left:18px;line-height:1.6}.visibility-confirm .checkline{color:var(--text)}
.channel-info-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;margin-bottom:8px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;text-align:left}
.channel-info-item small{color:var(--muted)}
.channel-danger{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:12px;border:1px solid color-mix(in srgb,#b8442a 35%,var(--border));border-radius:8px}
.channel-danger>b{color:color-mix(in srgb,#b8442a 85%,var(--text));font-size:13px}
.channel-danger-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.channel-danger-row small{color:var(--muted)}
.danger-outline{flex:none;border:1px solid color-mix(in srgb,#b8442a 80%,var(--text));color:color-mix(in srgb,#b8442a 85%,var(--text));background:var(--raised);white-space:nowrap}
.channel-info-actions[hidden]{display:none}
/* 참여자 창 */
.people-search{display:block;margin:4px 0 8px}.people-search input{width:100%}
/* 참여자 창 1단계: 머리는 붙이고 목록만 스크롤, 묶음 제목은 목록 위에 붙음 */
.dialog.people-dialog{display:flex;flex-direction:column;overflow:hidden}
.people-dialog .dialog-head{flex:none;gap:4px}.people-dialog .dialog-head h2{flex:1;min-width:0}
.people-dialog .dialog-head h2:focus:not(:focus-visible){outline:none}
.people-dialog .dialog-content{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
.people-head{flex:none;padding-bottom:4px;border-bottom:1px solid var(--border)}
.people-head .channel-members-summary{margin-bottom:4px}
.people-dialog .people-notice{margin:0 0 8px;color:var(--muted);font-size:12px;line-height:1.5}
.people-head .people-search{margin:4px 0 6px}
.people-dialog .people-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:20px}
.people-dialog .people-group{position:sticky;top:0;z-index:1;background:var(--surface);box-shadow:0 1px 0 var(--border)}
.people-dialog .dialog-error:empty{display:none}
/* 참여자 창 2단계: 묶음 제목은 제목(h3), 사람 줄은 목록(ul·li). 모양은 그대로 */
.people-ul{list-style:none;margin:0;padding:0}
.dialog h3.people-group{margin:0;line-height:1.5}
.people-dialog .people-row .member-identity{display:flex;flex-direction:column;justify-content:center;min-height:39px}
.dialog .people-row .member-identity small.people-mail{white-space:normal;overflow:visible;overflow-wrap:anywhere;margin-top:1px}
.people-status{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.people-group{display:block;padding:8px 4px 4px;color:var(--muted);font-size:11px;font-weight:700}
.people-row[hidden],.people-group[hidden]{display:none}
.people-row .member-identity small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 읽음 확인 창: 메시지 한 줄 · 요약 막대 · 안 읽음 먼저 */
.receipt-message{display:flex;gap:8px;align-items:baseline;margin:0 0 12px;padding:8px 10px;border-radius:6px;background:color-mix(in srgb,var(--selected) 55%,transparent);font-size:13px}
.receipt-message span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt-message small{color:var(--muted);flex-shrink:0}
.receipt-summary{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.receipt-summary b{font-size:15px;white-space:nowrap}
.receipt-bar{flex:1;height:6px;border-radius:3px;background:color-mix(in srgb,var(--muted) 18%,transparent);overflow:hidden}
.receipt-bar span{display:block;height:100%;background:var(--accent);border-radius:inherit}
.receipt-group h3{margin:14px 0 2px;font-size:12px;color:var(--muted)}
.receipt-group .member-row{padding:8px 0}
.receipt-more{margin-top:8px;font-size:12px}
.receipt-note{margin:14px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.people-twin{margin-left:6px;padding:0 6px;border-radius:9px;background:color-mix(in srgb,#d9822b 16%,var(--raised));color:color-mix(in srgb,#8a4f12 85%,var(--text));font-size:11px;font-weight:600}
.people-role{flex:none;padding:2px 8px;border-radius:10px;background:var(--selected);color:var(--accent);font-size:11px;font-weight:600}
.people-search .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.channel-kind-choice input[type=radio]{flex:none;width:16px!important;height:16px;min-height:0;margin:3px 0 0;padding:0}
.channel-kind-choice span b{font-size:14px}
.danger-outline{min-height:34px;padding:0 12px;border-radius:6px;font-size:13px}
.channel-danger-row .danger-outline:hover{background:color-mix(in srgb,#b8442a 8%,var(--raised))}
.dialog .channel-kind-choice{display:flex;flex-direction:row;align-items:flex-start;margin:0}

/* 채널 멤버 초대(상대 선택 화면 초대 모드): 이미 참여 중인 사람은 흐리게 */
.dm-picker-person[data-joined]{opacity:.55;cursor:default}
.dm-picker-joined{flex:none;color:var(--muted);font-size:11px;white-space:nowrap}
.agent-joined-status{display:flex;align-items:center;gap:6px;margin:0 0 6px;color:var(--accent);font-weight:600}.agent-joined-status span{width:8px;height:8px;border-radius:4px;background:#3f8a5a}
/* 조직 항목: 좁은 열에서도 이름이 보이도록 입력란 최소 폭을 두고 버튼은 다음 줄로 넘긴다. 드래그로 놓을 자리를 선으로 표시한다. */
.org-option-columns .org-option-line{flex-wrap:wrap}.org-option-columns .org-option-line input{flex:1 1 7em;min-width:7em}
.org-option-actions{display:flex;gap:6px;flex:0 0 auto;margin-left:auto}
.org-option-columns .org-option[draggable=true]{cursor:grab}
.org-option.org-drop-before{box-shadow:inset 0 3px 0 var(--accent,#3b6ea5)}.org-option.org-drop-after{box-shadow:inset 0 -3px 0 var(--accent,#3b6ea5)}

/* Selected person mentions stand apart without coloring ordinary bold text. */
.rich-composer strong.se-space-mention { color:var(--accent); font-weight:700; }

/* Unread navigation occupies its own row, never overlays message text. */
.message-unread-guide { display:grid; flex:none; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px 12px; padding:8px 16px; font-size:13px; background:var(--surface); border-bottom:1px solid var(--border); }
.message-unread-guide[hidden] { display:none; }
.message-unread-jump { grid-column:2; justify-self:center; min-height:36px; padding:7px 16px; border:1px solid var(--accent); border-radius:999px; background:var(--accent); color:var(--on-accent); box-shadow:0 2px 7px #0002; font-size:14px; font-weight:700; line-height:1.4; white-space:nowrap; }
.message-unread-jump:hover { filter:brightness(.92); }
.message-unread-jump:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.message-unread-divider { display:flex; flex:none; align-items:center; gap:10px; color:var(--accent); font-size:14px; font-weight:700; margin:16px; }
.message-unread-divider::before,.message-unread-divider::after { content:''; flex:1; min-width:8px; border-top:2px solid currentColor; }
.message-unread-divider>span { padding:5px 12px; border-radius:999px; background:var(--accent); color:var(--on-accent); white-space:nowrap; }
/* The channel landmark remains visible after reading, for this visit only. */
.thread-pane .message-unread-divider { font-size:12px; font-weight:600; gap:8px; }
.thread-pane .message-unread-divider>span { padding:0; background:transparent; color:inherit; }
.thread-pane .message-unread-divider::before,.thread-pane .message-unread-divider::after { border-top-width:1px; }
.thread-pane .message-unread-divider.is-read { color:var(--muted); font-weight:400; }
.message-unread-divider[hidden] { display:none; }
@media (max-width:700px),(pointer:coarse) { .message-unread-jump { min-height:44px; } }
.message.message-new { background:color-mix(in srgb,var(--accent) 6%,transparent); }
/* Refresh notices live outside the scrolling text, never on top of a message. */
.arrival-notice { flex:none; align-self:center; margin:4px 8px; font-size:12px; }
.arrival-notice[hidden] { display:none; }
.collection-refresh-status { flex:none; padding:6px 16px; font-size:12px; color:var(--muted); }
.messages, .collection-list { overflow-anchor:none; }

/* Organization viewing preferences: retain panels and unsaved fields in the DOM. */
.org-resizable{grid-template-columns:var(--org-left,220px) 10px minmax(240px,1fr) 10px var(--org-right,280px);gap:0;overflow:hidden;min-width:0}
.org-resizable>.org-member-pane,.org-resizable>.org-canvas,.org-resizable>.org-detail-pane{min-width:0;min-height:0;max-height:none;height:auto}
.org-panel-head{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0}
.org-panel-head h3{margin:0;font-size:14px}.org-panel-head>span{font-size:13px;color:var(--muted)}
.org-panel-head [data-panel-toggle]{padding:0;width:32px;height:36px;flex:none;font-size:23px;color:var(--muted);border-color:transparent;background:transparent}
.org-detail-pane{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:6px}
.org-detail-pane>.org-editor{border:0;border-radius:0;max-height:none;min-height:0;flex:1;grid-column:auto;padding:4px}
.org-panel-resize{cursor:col-resize;touch-action:none;user-select:none;position:relative;min-width:0}
.org-panel-resize:after{content:'';position:absolute;top:0;bottom:0;left:4px;width:2px;border-radius:2px;background:transparent}
.org-panel-resize:hover:after,.org-panel-resize:focus-visible:after,.org-panel-resize.is-resizing:after{background:var(--accent)}
.org-panel-resize[hidden]{display:block;visibility:hidden;pointer-events:none}
.org-resizable.org-left-closed>.org-member-pane{padding:0;overflow:hidden}
.org-left-closed>.org-member-pane .org-panel-head{justify-content:center}
.org-left-closed>.org-member-pane h3,.org-left-closed>.org-member-pane .org-members{display:none}
.org-resizable.org-right-closed>.org-detail-pane{padding:0}
.org-right-closed>.org-detail-pane>.org-editor,.org-right-closed>.org-detail-pane>.org-panel-head>span{display:none}
.org-right-closed>.org-detail-pane>.org-panel-head{justify-content:center}
.org-compact-controls>.org-pane-tabs{display:flex;gap:8px;margin-bottom:8px}
.org-resizable.org-panels-compact{display:block;overflow:auto}
.org-panels-compact>.org-member-pane,.org-panels-compact>.org-canvas,.org-panels-compact>.org-detail-pane{display:none;height:100%;max-height:none;min-height:0}
.org-panels-compact[data-pane-current=list]>.org-member-pane,.org-panels-compact[data-pane-current=chart]>.org-canvas{display:block}
.org-panels-compact[data-pane-current=editor]>.org-detail-pane{display:flex}
.org-panels-compact>.org-panel-resize,.org-panels-compact [data-panel-toggle]{display:none}
.org-detail-pane .org-editor-body{min-width:0}.org-resizable .org-members button{overflow-wrap:anywhere;min-width:0}

/* Keep the request draft and approval host mounted; show the submitted text only once. */
.composer-wrap.agent-task-active > .composer,
.composer-wrap.agent-task-active > .composer-foot,
.composer-wrap.agent-task-active > .retention-hint { display: none; }
.agent-pending-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 별도 조직은 일반 조직도와 연결되지 않는 독립된 상단 영역이다. */
.org-chart-regions{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:36px;width:max-content;min-width:100%}
.org-separate-column{display:flex;flex-direction:column;align-items:center;gap:32px;min-width:244px}
.org-general-region{min-width:244px}
.org-separate-label{display:inline-block;font-size:11px;font-weight:500;border:1px solid currentColor;border-radius:4px;padding:1px 5px;color:var(--muted,#596775);white-space:nowrap}
.org-node header .org-separate-label{margin:2px 0 4px}

@media (max-width:700px) { .message-unread-guide { grid-template-columns:1fr; justify-items:center; } .message-unread-jump { grid-column:1; } }

.scheduled-card{padding:18px;border-bottom:1px solid var(--border)}.scheduled-card header,.scheduled-card footer{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}.scheduled-body{white-space:pre-wrap;overflow-wrap:anywhere}.scheduled-card footer{justify-content:flex-start}.schedule-menu{flex-shrink:0}

.channel-invite-card{padding:18px;border:1px solid var(--border);border-radius:10px;margin:10px 0}.channel-invite-card.is-new{background:var(--selected)}.channel-join-notice{padding:8px 14px;text-align:center;color:var(--muted);font-size:12px}.channel-join-notice svg{width:14px;height:14px}
/* Zero-height sibling anchors to the message viewport, above arrivals and composer. */
.scroll-bottom-slot { position:relative; flex:none; height:0; z-index:3; display:flex; justify-content:center; }
.scroll-bottom-slot[hidden] { display:none; }
.scroll-bottom { position:absolute; right:16px; bottom:12px; width:44px; height:44px; padding:0; display:grid; place-items:center; border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--text); box-shadow:0 2px 8px #0002; font-size:26px; line-height:1; }
.scroll-bottom:hover { background:var(--hover); }
.scroll-bottom:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.bot-notice{border-left:4px solid var(--accent);padding:8px 12px}.bot-notice>strong,.bot-notice>a{display:block;margin-bottom:6px}.bot-plain{white-space:pre-wrap;overflow-wrap:anywhere}.bot-list article{border:1px solid var(--border);padding:12px;margin:12px 0;border-radius:8px}.bot-list small{display:block;overflow-wrap:anywhere}[data-bot-create]{display:grid;gap:10px}[data-token-result] textarea{width:100%;overflow-wrap:anywhere}
.org-readonly{display:flex;flex-direction:column;gap:12px;min-height:360px;height:calc(100dvh - 270px)}
.org-view-tools{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.org-view-tools label{display:flex;flex-direction:column;gap:6px}.org-view-tools input{max-width:100%;width:260px}
.org-readonly .org-canvas{flex:1;min-height:220px}.org-readonly .org-chart{padding:16px}
.dm-picker-views [hidden],.dm-org-tree[hidden]{display:none}

.dm-org-layout.org-no-tree{grid-template-columns:minmax(0,1fr)}

/* Organization tools: finding people and viewing the chart are distinct rows. */
.organization-workspace{--panel:var(--surface);--line:var(--border)}
.organization-workspace .org-content{container-type:inline-size}
.organization-workspace .org-toolbar{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px;padding:12px 0;flex-shrink:0}
.org-find-tools{display:flex;flex:none;align-items:flex-end;gap:16px;min-width:0}
.organization-workspace .org-find-tools>label{display:flex;flex-direction:column;gap:6px;flex:0 0 280px;width:280px;min-width:180px;margin:0}
.org-find-tools input[data-search]{height:36px;min-height:36px;margin:0;width:100%}
.org-find-tools .org-filter{gap:6px;flex:none}
.org-find-tools label,.org-find-tools #org-filter-label{font-size:13px;line-height:18px;color:var(--muted)}
.org-display-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.org-display-tools .org-view-control{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--control-border,var(--border));border-radius:8px;background:var(--raised,var(--panel));color:var(--text);font-size:13px;white-space:nowrap}
.org-display-tools .org-view-control:hover{background:var(--hover)}
.org-display-tools .org-view-control[aria-pressed=true]{background:var(--selected);color:var(--accent);border-color:var(--accent);font-weight:700}
.org-display-tools [data-panels-wide]::before{content:'↔';font-size:18px;line-height:1}
.org-display-tools .org-view-control svg{width:16px;height:16px;flex:none}
.org-display-tools .org-zoom{height:36px;flex:none}
.org-display-tools .org-zoom button{font-size:13px}
.org-tool-divider{height:20px;border-inline-start:1px solid var(--line,var(--border));margin:0 4px}
.org-display-tools [hidden]{display:none}
.org-resizable .org-members [data-member]{padding:10px 8px;border-radius:6px}
.org-resizable .org-members [data-member]>b{font-size:14px;line-height:1.4}
.org-resizable .org-members [data-member]>small{font-size:12px;line-height:1.5;color:var(--muted);margin-top:4px}
.org-detail-pane .org-empty{min-height:160px;padding:16px 8px;gap:8px;align-items:flex-start;text-align:left}
.org-detail-pane .org-empty b{font-size:14px}
.org-detail-pane .org-empty p{margin:0}
.org-resizable>.org-member-pane,.org-resizable>.org-detail-pane,.org-resizable>.org-canvas{scrollbar-width:thin;scrollbar-color:var(--control-border,var(--border)) transparent}
.organization-workspace .org-footer{border-top:1px solid var(--line,var(--border));padding:12px 0 0;margin-top:8px;gap:8px 16px;flex-shrink:0}
@container(min-width:1250px){.organization-workspace .org-toolbar{flex-direction:row;align-items:flex-end;justify-content:space-between}.org-display-tools{flex-wrap:nowrap}}
@container(max-width:680px){.org-find-tools{flex-wrap:wrap;gap:12px}.organization-workspace .org-find-tools>label{flex:1 1 100%}.org-display-tools{justify-content:flex-start}.org-find-tools .org-filter{width:100%}.org-find-tools .org-filter>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.org-find-tools .org-filter button{justify-content:center;padding:0 6px;font-size:12px;gap:4px}.org-tool-divider{display:none}}
@container(max-width:370px){.org-find-tools .org-filter>div{grid-template-columns:repeat(2,minmax(0,1fr))}.org-find-tools .org-filter button:nth-child(3){border-inline-start:0}.org-find-tools .org-filter button:nth-child(n+3){border-top:1px solid var(--line,var(--border))}}

/* Clipped frozen/scrolling regions preserve worksheet panes at every zoom. */
.excel-pane { position:absolute; overflow:hidden; background:#fff; }
.excel-frozen-cols { border-right:1px solid #7b8981; box-sizing:border-box; }
.excel-frozen-rows { border-bottom:1px solid #7b8981; box-sizing:border-box; }
.excel-header-pane { z-index:3; background:#f0f2f1; }

/* Ownership consent: align native controls without changing other dialogs. */
.ai-handover-options { margin: 16px 0; padding: 12px; border: 1px solid var(--border, #ccc); border-radius: 8px; }
.ai-handover-options label { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 6px; }
.ai-handover-options input[type="radio"], .ai-handover-options input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; }

.side-item .personal-agent-label{display:flex;align-items:center;gap:4px}
.personal-agent-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.personal-agent-badge{flex:none;padding:0 4px;border-radius:4px;background:color-mix(in srgb,#d9822b 16%,var(--raised));color:color-mix(in srgb,#8a4f12 85%,var(--text));font-size:10px;font-weight:600;line-height:16px}
/* 내 플래너에 등록 2단계: 날짜·시각 알약(Apple 캘린더처럼), 휠, 스위치, 빠른 선택 단추 */
.dialog .planner-field { display:flex; align-items:center; gap:10px; margin:12px 0 6px; }
.planner-field-label { font-size:14px; font-weight:600; }
.planner-pill-wrap { position:relative; }
.planner-pill { min-height:34px; padding:0 12px; border:0; border-radius:8px; background:color-mix(in srgb,var(--muted) 16%,var(--surface)); color:var(--text); font:inherit; font-size:15px; font-variant-numeric:tabular-nums; cursor:pointer; }
.planner-pill[aria-expanded=true] { color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); }
.planner-pill:focus-visible,.planner-chip:focus-visible,.planner-switch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.planner-pop { position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:250px; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 12px 36px var(--shadow,rgba(0,0,0,.18)); }
.planner-pop[hidden] { display:none; }
.planner-row .planner-pop { left:auto; right:0; }
.dialog .planner-pop-calendar { display:block; margin:10px 0 0; font-size:12px; color:var(--muted); }
.dialog .planner-pop-calendar input { margin-top:4px; }
.planner-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.planner-chips[hidden] { display:none; }
.planner-chip { min-height:32px; padding:0 11px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.planner-chip[aria-pressed=true] { background:var(--text); border-color:var(--text); color:var(--surface); }
.planner-chip[data-suggested] { border-color:#B8862B; background:color-mix(in srgb,#F2C14E 18%,var(--surface)); color:color-mix(in srgb,#6B4A0E 85%,var(--text)); font-weight:600; }
.planner-group { margin:8px 0; border-radius:10px; background:color-mix(in srgb,var(--muted) 9%,var(--surface)); }
.planner-row { display:flex; align-items:center; gap:8px; min-height:46px; padding:6px 12px; font-size:14px; }
.planner-row[hidden] { display:none; }
.planner-row + .planner-row { border-top:1px solid var(--border); }
.planner-row > span:first-child { flex:1; }
.planner-row small { color:var(--muted); font-size:12px; }
.planner-switch { position:relative; flex:none; width:46px; height:28px; border:0; border-radius:14px; background:color-mix(in srgb,var(--muted) 28%,var(--surface)); cursor:pointer; transition:background .15s; }
.planner-switch::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.planner-switch[aria-checked=true] { background:#34A853; }
.planner-switch[aria-checked=true]::after { transform:translateX(18px); }
@media (prefers-reduced-motion:reduce){ .planner-switch,.planner-switch::after { transition:none; } }
/* 등록 개선 3단계: 이미 등록한 메시지 */
.menu-pop .planner-menu-grid .planner-menu-item.done { border-color:color-mix(in srgb,#2F6B45 45%,var(--border)); background:color-mix(in srgb,#2F6B45 8%,var(--surface)); }
.planner-menu-done { display:block; font-size:10.5px; font-weight:600; color:color-mix(in srgb,#2F6B45 85%,var(--text)); line-height:1.2; }
.dialog p.planner-registered { margin:0 0 10px; padding:9px 11px; border-radius:8px; background:color-mix(in srgb,#2F6B45 10%,var(--surface)); color:var(--text); font-size:13px; line-height:1.55; }
/* 일정 창 2단계: 제목·메모 안내(4) */
.dialog p.planner-field-error { display:flex; align-items:center; gap:5px; margin:-4px 0 10px; font-size:12px; font-weight:600; color:#B42318; }
.dialog p.planner-field-error::before { content:'!'; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border:1.5px solid currentColor; border-radius:50%; font-size:10px; line-height:1; }
.dialog p.planner-field-error[hidden] { display:none; }
.dialog .invalid { border-color:#B42318 !important; box-shadow:0 0 0 2px rgba(180,35,24,.16); }
/* 프로필 편집: 추가 이메일을 프로필에 표시할지 고르는 확인란 */
.dialog .profile-email-public{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-weight:400}

/* Availability belongs to the current space, never the historical message. */
.presence-avatar{position:relative;display:inline-flex;flex-shrink:0;align-self:center;vertical-align:middle}
.directory-profile>.presence-avatar{align-self:flex-start}
/* 접속 상태 점: 활동 중 = 초록 점, 자리 비움 = 겨자색 점, 오프라인 = 속이 빈 원.
   색은 각 사이트 색 체계에서 고른다 — day.ddssvc.com(biz)은 DDS CI 연두, ownyour.day(paper)는 기존 녹색·황토.
   비공개(파선)·확인 중(점선)도 빈 원이며 테두리 모양으로 구분한다. */
:root{--presence-active:#7AC143;--presence-away:#E0B04A;--presence-offline:#6E7A70}
:root[data-space-brand="paper"]{--presence-active:#5C8A3A;--presence-away:#C9973A;--presence-offline:#6E6A60}
:root[data-theme="dark"]{--presence-active:#8FC96A;--presence-away:#E6C580;--presence-offline:#A0B29F}
:root[data-space-brand="paper"][data-theme="dark"]{--presence-active:#8FBF6A;--presence-away:#E6C580;--presence-offline:#B5AD9C}
.presence-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--surface);border:2px solid var(--presence-offline);box-shadow:0 0 0 2px var(--surface);}
.presence-dot[data-state="active"]{background:var(--presence-active);border:0}
.presence-dot[data-state="away"]{background:var(--presence-away);border:0}
.presence-dot[data-state="private"]{background:var(--surface);border:1px dashed var(--muted)}
.presence-dot[data-state="unknown"],.presence-dot[data-state="unavailable"]{background:var(--surface);border:1px dotted var(--muted)}
.member-card-identity>.presence-avatar .avatar{width:112px;height:112px;font-size:44px}
.member-card-identity>.presence-avatar .presence-dot{width:12px;height:12px}


.member-status-text{display:block;font-size:13px;color:var(--text);overflow-wrap:anywhere;white-space:pre-wrap}.member-status-text[hidden]{display:none}
/* Personal bookmark: shape and color communicate state without hover. */
.message-tools [data-action="save-message"] { color:var(--muted); }
.message-tools [data-action="save-message"][aria-pressed="true"],
.message-bookmark { color:var(--accent); }
.message-tools [data-action="save-message"][aria-pressed="true"] .icon,
.message-bookmark .icon { fill:currentColor; }
.message-bookmark { display:inline-flex; align-self:center; flex:none; }
.message-bookmark .icon { width:14px; height:14px; }
[data-action="save-message"][aria-busy="true"],
[data-action="remove-saved"][aria-busy="true"] { opacity:.55; cursor:wait; }

/* Editing attachments is staged until the message is saved. */
.edit-attachments { margin:8px 0; min-width:0; }
.edit-file-list { display:grid; gap:6px; }
.edit-file-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; }
.edit-file-row > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.edit-file-row button { flex:none; min-width:32px; min-height:32px; }
.edit-file-actions { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.edit-attachments small { color:var(--muted); }
.edit-attachments [data-edit-status]:empty { display:none; }

/* Channel-line updates share the activity scroll area on desktop and mobile. */
.line-activity-card { padding:10px 12px; font-size:13px; }
.line-activity-card button { display:block; width:100%; text-align:left; border:0; background:none; color:var(--text); padding:8px 0; }
.line-activity-card small { display:block; color:var(--muted); }
.line-activity-card summary { cursor:pointer; }

/* 설정 입구 1A: 스페이스 안에서 여는 운영 설정 창 — 플래너 설정의 패널(파일 첨부·공용 AI)을 그대로 담는다 */
.space-owner-settings{width:min(760px,calc(100vw - 32px));max-width:none;max-height:min(760px,calc(100dvh - 40px));padding:0;border:1px solid var(--border);border-radius:14px;background:var(--surface,#fff);color:var(--text,#222);overflow:hidden}
.space-owner-settings[open]{display:flex;flex-direction:column}
.space-owner-settings::backdrop{background:#0007}
.space-owner-settings>header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.space-owner-settings h2{font-size:17px;margin:0}.space-owner-settings header button{font-size:24px;min-width:44px;min-height:44px}
.owner-settings-scope{margin:0;padding:8px 20px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border);background:var(--raised,#fff);flex-shrink:0}
.owner-settings-body{flex:1;min-height:0;overflow:auto;padding:16px 20px}
.owner-settings-panel .sbox{border:1px solid var(--border);border-radius:10px;padding:14px;background:var(--raised,#fff)}
.owner-settings-panel .sh{font-weight:700;margin:0 0 8px}
.owner-settings-panel label{display:block;font-size:13px;margin:10px 0 4px}
.owner-settings-panel input:not([type=checkbox]):not([type=radio]),.owner-settings-panel select{box-sizing:border-box;width:100%;min-height:36px;padding:6px 9px;border:1px solid var(--control-border,var(--border));border-radius:7px;background:var(--surface,#fff);color:inherit;font:inherit}
.owner-settings-panel button{min-height:36px;padding:6px 12px;border:1px solid var(--control-border,var(--border));border-radius:7px;background:var(--surface,#fff);color:inherit;font:inherit;cursor:pointer}
.owner-settings-panel button:hover{background:var(--hover)}
.owner-settings-panel button[type=submit],.owner-settings-panel [data-space-direct-save]{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}
.owner-settings-panel button:disabled{opacity:.55;cursor:default}
.owner-settings-panel summary{cursor:pointer;min-height:36px;display:flex;align-items:center}
.owner-settings-panel .attachment-limit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.owner-settings-panel .attachment-limit-fields label{margin:0}
.owner-settings-panel .attachment-limit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.owner-settings-panel .attachment-error{color:var(--danger,#a3392a)}
.owner-settings-panel p{line-height:1.6}
@media(max-width:600px){
.space-owner-settings{inset:0;margin:0;width:100%;max-height:none;height:100dvh;border:0;border-radius:0}
.owner-settings-body{padding:14px}
.owner-settings-panel .attachment-limit-fields{grid-template-columns:1fr}
}

/* 작은 창 모드(창 높이 420px 이하, 휴대폰 레이아웃 제외) 1A·2A: 위 막대를 숨기고 그 단추를 머리 줄로,
   채널 머리와 탭을 한 줄로. 판단은 small-window.js(html.small-window). */
.head-mini,.head-tab-select{display:none}
html.small-window .app{grid-template-rows:0 minmax(0,1fr)}
html.small-window .topbar{display:none}
html.small-window .head-mini{display:flex;align-items:center;gap:4px}
/* 채널 안 검색(🔍)과 구분되게 스페이스 검색은 '🔍 ⌘K' 알약으로 */
html.small-window .head-mini .global-search{width:auto;height:28px;min-width:0;padding:0 8px;gap:4px;border:1px solid var(--border);border-radius:14px;background:transparent;justify-content:center}
html.small-window .head-mini .global-search span{display:none}
html.small-window .head-mini .global-search kbd{display:inline;font-size:11px}
html.small-window .head-mini .request-indicator{padding:2px 8px;font-size:12px}
html.small-window .head-mini .request-indicator[data-empty]{display:none}
html.small-window .head-mini .notification-entry:has(.notification-number[hidden]){display:none}
html.small-window .head-mini .notification-label{display:none}
html.small-window .channel-head{height:44px;min-height:44px}
html.small-window .channel-title{font-size:15px}
html.small-window .channel-title-sub,html.small-window .channel-tabs{display:none}
html.small-window .head-tab-select{display:block;flex:none;max-width:9em;font:inherit;font-size:12.5px;border:1px solid var(--border);border-radius:6px;padding:2px 6px;background:transparent;color:inherit}
html.small-window .collection-head{min-height:0;padding-top:6px;padding-bottom:6px}
html.small-window .collection-head p{display:none}
html.small-window .collection-head h1{font-size:17px;margin:0}
/* 작은 창 3A: 채널라인은 머리 줄의 칩, 누르면 메시지 위에 펼침. 4A: 입력창은 한 줄 + ＋ 😊 보내기,
   입력 칸에 초점이 있을 때만 서식 막대. 안내 줄(Enter로 전송 등)은 숨김. */
.head-line-chip{display:none}
html.small-window .head-line-chip{display:flex;min-width:0;flex:0 1 auto}
html.small-window .head-line-chip button{display:flex;align-items:center;gap:4px;min-width:0;max-width:22em;height:26px;padding:0 10px;border:1px solid var(--border);border-radius:13px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer}
html.small-window .head-line-chip button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.small-window .head-line-chip button[aria-expanded="true"]{background:var(--selected);border-color:var(--accent,#2f5d8a)}
html.small-window #channel-line-pin:not(.cl-chip-open){display:none}
html.small-window [data-composer] .composer{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 4px}
html.small-window [data-composer] .composer>.sun-editor{flex:1 1 0;min-width:0;order:1}
html.small-window [data-composer] .composer>.compose-actions{flex:none;order:2;height:auto;padding:0 2px 4px;gap:2px}
html.small-window [data-composer] .composer>.pending-files{order:3;flex-basis:100%}
html.small-window [data-composer] .composer>.pending-files:empty{display:none}
html.small-window [data-composer] .composer>.thread-broadcast{order:4;flex-basis:100%}
html.small-window [data-composer] .compose-actions [data-action=mention],html.small-window [data-composer] .compose-actions .grow{display:none}
/* 640px 미만의 'Aa로 펼치기'(위 규칙)보다 작은 창 4A가 앞선다: 입력 칸에 초점이 있으면 서식 막대, 'Aa'는 숨김 */
html.small-window [data-composer] .se-toolbar{display:none!important}
html.small-window [data-composer]:focus-within .se-toolbar{display:block!important}
html.small-window [data-composer] .compose-actions .mobile-format{display:none!important}
html.small-window [data-composer]+.retention-hint:empty,html.small-window .composer-foot,html.small-window .retention-hint:empty{display:none}
/* 작은 창 · 좁은 머리 줄: 채널 이름을 먼저 지키고 채널라인 칩은 아이콘만(이름은 풍선 도움말·읽기용 이름으로). */
html.small-window .channel-head{container-type:inline-size}
html.small-window .channel-head .channel-title{flex:0 1 auto;min-width:5em}
html.small-window .head-line-chip{flex:0 100 auto}
@container (max-width: 640px){
  html.small-window .head-line-chip button{padding:0 7px}
  html.small-window .head-line-chip button span{display:none}
  html.small-window .head-tab-select{max-width:6.5em}
}
/* 작은 창 · 터치 화면: 키보드 단축키가 없으니 스페이스 검색은 돋보기만. 단축키 글자는 줄바꿈하지 않음. */
html.small-window .head-mini .global-search kbd{white-space:nowrap}
@media (pointer:coarse){
  html.small-window .head-mini .global-search{width:32px;padding:0;border:0}
  html.small-window .head-mini .global-search kbd{display:none}
}
/* 작은 창 · 휴대폰 '길게 누르기' 안내(입력창 위)는 한 줄로: 글은 줄임표, [알겠어요]는 작게. */
html.small-window .longpress-hint{margin:0 0 2px;padding:2px 4px 2px 10px;gap:6px;font-size:12px;border-radius:8px}
html.small-window .longpress-hint>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.small-window .longpress-hint>button{min-height:32px;padding:0 8px}
/* 휴대폰 메시지 반응 2A: 길게 누르기 메뉴 맨 위 빠른 반응 한 줄 */
.menu-pop .menu-quick-reactions { display:flex; gap:6px; padding:4px 6px 8px; }
.menu-pop .menu-quick-reactions .icon-btn { width:44px; height:44px; border-radius:22px; background:var(--selected); font-size:20px; display:flex; align-items:center; justify-content:center; }
.menu-pop .menu-quick-reactions .quick-reaction.mine { outline:2px solid var(--accent); outline-offset:-2px; }

/* 휴대폰 메시지 반응 3A: 처음 한 번 '길게 누르기' 안내(입력창 바로 위). 입력 중에는 숨긴다. */
.longpress-hint { display:flex; align-items:center; gap:10px; margin:0 0 6px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--selected); font-size:13px; color:var(--text); }
.longpress-hint > span { flex:1; min-width:0; }
.longpress-hint > button { flex:none; min-height:44px; padding:0 12px; border-radius:8px; font-weight:700; color:var(--accent); background:transparent; }
.composer-wrap:has(.composer:focus-within) .longpress-hint, .keyboard-open .longpress-hint { display:none; }

/* AI 연결 상태: 사이드바 점(색만)과 입력창 위 띠. 연결됨 초록 · 응답 없음 회색 · 인증 문제 빨강 · 최근 처리 실패 주황 */
.agent-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.agent-status-dot[data-state="ok"] { background: #3a8f5e; }
.agent-status-dot[data-state="offline"] { background: #9aa0a6; }
.agent-status-dot[data-state="auth"] { background: #c0392b; }
.agent-status-dot[data-state="failed"] { background: #d9822b; }
.side-item .agent-status-dot { margin-left: -2px; }
.agent-status-band { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 7px 12px; border-radius: 8px; font-size: 12px; line-height: 1.45; background: var(--hover); color: var(--text); }
.agent-status-band[hidden] { display: none; }
.agent-status-band .agent-status-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agent-status-band button { flex: none; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }

/* Context-menu rows only: never disable text selection in editors or the whole page. */
.touch-menu-pending, .touch-menu-pending * {
  -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important;
}
.touch-menu-pending :is(input,textarea,[contenteditable],.editing),
.touch-menu-pending :is([contenteditable],.editing) * {
  -webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important;
}
@media (any-pointer: coarse) {
  .dm-inbox-row, .dm-inbox-row *, #side-list .side-channel-row, #side-list .side-channel-row *,
  #side-list .side-dm-row, #side-list .side-dm-row *, #side-list .group-label, #side-list .group-label * {
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
  }
}