:root {
  --bg: #ffffff;
  --side: #f7f6f3;
  --line: #e6e4df;
  --text: #37352f;
  --dim: #9b9a97;
  --accent: #2e6fd8;
  --cell: #fbfbfa;
  /* 폴더 아이콘 색. 파일 유무는 모양으로 가르므로 양쪽이 같은 색을 쓴다. */
  --folder-ic: #c9a227;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  height: 100vh;
  font-family: 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ── 사이드바 ── */
#sidebar {
  /* 폭은 JS가 --side-w 로 넣는다. 여기 값은 그게 없을 때의 기본. */
  width: var(--side-w, 250px);
  flex-shrink: 0;
  background: var(--side);
  border-right: 1px solid var(--line);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.brand { font-weight: 700; font-size: 15px; padding: 4px 8px 12px; }

/* 검색 트리거 — 트리는 훑기용, 팔레트는 찾기용 */
.search-trigger { width: 100%; margin-bottom: 10px; color: var(--dim); }
.search-trigger kbd {
  margin-left: auto;
  font: inherit;
  font-size: 10px;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  background: var(--bg);
}

/* ── 명령 팔레트 ── */
.modal.palette { align-items: flex-start; padding-top: 90px; background: rgba(0, 0, 0, 0.25); }
.palette-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 560px;
  max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
#search-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
  outline: none;
  color: var(--text);
  background: none;
}
#search-results { list-style: none; margin: 0; padding: 4px; max-height: 46vh; overflow-y: auto; }
#search-results li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 5px;
  font-size: 13.5px;
  cursor: pointer;
}
#search-results li.sel { background: var(--side); }
#search-results li .ic { width: 16px; text-align: center; color: var(--dim); flex-shrink: 0; }
#search-results li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 어느 폴더의 것인지. 이름 뒤로 밀어 두어 목록을 읽는 데 방해되지 않게 한다 */
#search-results li .where {
  margin-left: auto;
  padding-left: 10px;
  font-size: 11px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 45%;
}
#search-results li.none { color: var(--dim); cursor: default; }
#search-results li.none:hover { background: none; }
.palette-hint {
  border-top: 1px solid var(--line);
  padding: 7px 14px;
  font-size: 11px;
  color: var(--dim);
}

/* 상단 고정 뷰 — My Tasks / Board */
#views { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.nav-item:hover { background: #efedea; }
.nav-item.active { background: #e8e6e1; font-weight: 600; }
.nav-item .ic { width: 16px; text-align: center; color: var(--dim); }
.count { margin-left: auto; font-size: 11px; color: var(--dim); }

.section { flex: 1; min-height: 0; overflow-y: auto; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--dim);
  padding: 0 8px 4px;
}
.head-actions button {
  border: none;
  background: none;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  padding: 0 3px;
}
.head-actions button:hover { color: var(--text); }

/* 폴더 트리 */
.tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.tree-row .name { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tree-row:hover { background: #efedea; }
.tree-row.active { background: #e8e6e1; font-weight: 600; }
.tree-row.drop { background: #dcebff; outline: 1px dashed var(--accent); }
.tree-row .arrow { width: 12px; color: var(--dim); flex-shrink: 0; font-size: 11px; }
/* 폴더 아이콘. **색은 여기 한 줄이 정한다** — 빈 폴더와 파일 폴더가 같은 색이고
   다른 것은 모양뿐이라, 바꿀 곳도 하나여야 한다. */
.tree-row .folder-ic {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 5px;
  color: var(--folder-ic);
}
.tree-row .badge {
  background: #e3e1dc;
  color: #57564f;
  font-size: 10.5px;
  border-radius: 8px;
  padding: 0 6px;
  flex-shrink: 0;
}
.tree-row .row-more {
  display: none;
  border: none;
  background: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 13px;
  padding: 0 3px;
  border-radius: 3px;
  flex-shrink: 0;
}
.tree-row:hover .row-more { display: block; }
.tree-row .row-more:hover { background: #e3e1dc; color: var(--text); }

/* 우클릭/⋯ 메뉴 */
.ctx-menu {
  position: fixed;
  z-index: 100;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  padding: 4px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
}
.ctx-menu button {
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
}
.ctx-menu button:hover { background: var(--side); }
.ctx-menu button.danger { color: #c0392b; }
.ctx-menu button.danger:hover { background: #fdeceb; }

/* 하단 유틸리티 — 시트는 색인이지 문서와 평행한 계층이 아니다 */
.side-bottom {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.side-bottom button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.side-bottom button:hover { background: #efedea; }
.side-bottom .ic { width: 16px; text-align: center; color: var(--dim); }

/* ── 본문 ── */
#main { flex: 1; min-width: 0; overflow-y: auto; }

/* ── 사이드바 폭 조절 ──
   손잡이는 4px지만 잡는 영역은 좌우로 넓혀 둔다 — 1~2px 경계를 정확히
   겨냥하게 만들면 매번 헛집는다. */
#splitter {
  flex: 0 0 4px;
  cursor: col-resize;
  background: var(--line);
  position: relative;
  user-select: none;
}
#splitter::before {
  content: '';
  position: absolute;
  inset: 0 -4px;
}
#splitter:hover,
#splitter.dragging {
  background: var(--accent, #2f6feb);
}
/* 끌 때 본문의 텍스트가 선택되면 드래그가 지저분해진다 */
body.resizing {
  user-select: none;
  cursor: col-resize;
}
#empty { color: var(--dim); padding: 80px; text-align: center; }
#doc { max-width: 820px; margin: 0 auto; padding: 48px 56px 120px; }
#doc-title {
  font-size: 34px;
  font-weight: 700;
  outline: none;
  margin: 0 0 18px;
  padding: 4px;
}
#doc-title:empty::before { content: attr(data-ph); color: var(--dim); }

/* ── 보드 ── */
#board-view, #tasks-view { max-width: 1100px; margin: 0 auto; padding: 40px 40px 120px; }
#board-view h1, #tasks-view h1 { font-size: 26px; margin: 0 0 20px; }
#board-cols { display: flex; gap: 14px; align-items: flex-start; }
.board-col {
  flex: 1;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  min-height: 200px;
}
.board-col.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.col-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #57564f;
  padding: 0 2px 10px;
}
.col-head .count { color: var(--dim); font-weight: 400; }
.col-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.task-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.task-card .title { font-size: 13.5px; line-height: 1.45; }
.task-card .meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.task-card .meta a { font-size: 11px; color: var(--dim); text-decoration: none; }
.task-card .meta a:hover { color: var(--accent); }
.agent-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #7c5cbf;
  background: #efe9fa;
  border-radius: 3px;
  padding: 1px 4px;
}
.add-task {
  width: 100%;
  border: none;
  background: none;
  color: var(--dim);
  font-size: 12.5px;
  text-align: left;
  padding: 8px 4px 2px;
  cursor: pointer;
}
.add-task:hover { color: var(--text); }

/* ── 문서 안 작업 블록 ── */
.task-block { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.task-block input[type='checkbox'] { flex-shrink: 0; margin: 0; cursor: pointer; }
.task-title { flex: 1; min-width: 0; }
.task-block.done .task-title { color: var(--dim); text-decoration: line-through; }
.task-block.canceled .task-title { color: var(--dim); opacity: 0.6; text-decoration: line-through; }
.task-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.task-state {
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 4px;
  text-transform: uppercase;
}
.task-state.doing { color: #b06f00; background: #fdf0d5; }
.task-broken { font-size: 10.5px; color: #c0392b; }

/* ── 문서 링크 ──
   본문 흐름 안에 있어야 하므로 카드가 아니라 글자로 둔다. 밑줄 대신 옅은
   배경 — 위키 링크는 문장 속에 여러 개가 붙는 일이 흔해서, 밑줄이 겹치면
   본문이 읽히지 않는다. */
.doclink {
  color: var(--accent);
  background: rgba(46, 111, 216, 0.08);
  border-radius: 3px;
  padding: 0 3px;
  cursor: pointer;
}
.doclink:hover { background: rgba(46, 111, 216, 0.16); }
.doclink.gone {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
  text-decoration: line-through;
  cursor: default;
}

/* ── backlink ──
   본문 아래에 조용히. 연결이 쌓이면 검색이 아니라 항해가 된다. */
#backlinks { margin: 34px auto 0; max-width: 780px; padding: 0 54px 40px; }
#backlinks[hidden] { display: none; }
#backlinks h3 {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
#backlinks ul { list-style: none; margin: 0; padding: 0; }
#backlinks li button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
}
#backlinks li button:hover { background: var(--side); }
#backlinks li .snippet { display: block; font-size: 11.5px; color: var(--dim); }

/* ── 파일 블록 ──
   문단이 아니라 **가리키는 물건**으로 보여야 한다. 카드로 감싸 문서 흐름과
   구분하고, 없어진 파일은 조용히 넘어가지 않게 색으로 말한다. */
.file-block {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--cell);
}
.file-block.missing { border-color: #e5c07b; background: #fdf8ec; }
.file-block.broken { border-color: #e8b4ae; background: #fdf0ee; }
.file-block.picking { padding: 8px; display: block; }
.file-icon { font-size: 19px; line-height: 1; flex-shrink: 0; }
.file-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.file-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 11px; color: var(--dim); }
.file-warn { font-size: 11px; color: #b06f00; }
.file-block > button {
  flex-shrink: 0;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.file-block > button:hover { background: var(--side); }

.file-picker-head { display: flex; gap: 6px; margin-bottom: 6px; }
.file-picker-q {
  flex: 1;
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
}
.file-picker-head button {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--dim);
  cursor: pointer;
  padding: 0 9px;
}
.file-picker-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.file-picker-list button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  padding: 6px 7px;
  border-radius: 5px;
  cursor: pointer;
}
.file-picker-list button:hover { background: var(--side); }
.file-picker-empty,
.file-picker-more { font-size: 11.5px; color: var(--dim); margin: 6px 4px 2px; }

/* ── 모달 ── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 50;
}
.modal[hidden] { display: none; }
.modal-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 520px;
  max-width: 92vw;
  max-height: 70vh;
  overflow-y: auto;
  padding: 18px 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-head button {
  border: 1px solid var(--line);
  background: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--text);
}
.modal-head button:hover { border-color: var(--dim); }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.modal-actions button {
  border: 1px solid var(--line);
  background: none;
  border-radius: 5px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
}
.settings-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 6px 0; }
.settings-row select { font: inherit; padding: 3px 8px; }
.hints { font-size: 12px; color: var(--dim); line-height: 1.8; white-space: pre-wrap; margin: 14px 0 0; font-family: inherit; }
/* 대화 목록은 시트 목록과 같은 모양을 쓴다 — 같은 자리(하단 메뉴)에서 열리는
   같은 성격의 색인이라, 다르게 생기면 둘이 다른 것처럼 읽힌다. */
#sheet-list, #chat-list { list-style: none; margin: 0; padding: 0; }
#sheet-list li, #chat-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  cursor: pointer;
}
#sheet-list li:hover, #chat-list li:hover { background: var(--side); }
.empty-note { color: var(--dim); font-size: 13px; padding: 10px 4px; margin: 0; }

/* ── 블록 ── */
.block { position: relative; padding: 2px 4px; border-radius: 4px; }
.block:hover { background: #fafafa; }
.block [contenteditable] { outline: none; min-height: 1.4em; line-height: 1.6; }
.block.h1 [contenteditable] { font-size: 26px; font-weight: 700; margin-top: 12px; }
.block.h2 [contenteditable] { font-size: 21px; font-weight: 700; margin-top: 8px; }
.block.h3 [contenteditable] { font-size: 17px; font-weight: 700; }
.block.bulletListItem { padding-left: 22px; }
.block.bulletListItem::before { content: '•'; position: absolute; left: 8px; color: var(--dim); }
.block.checkListItem { padding-left: 26px; }
.block.checkListItem input[type='checkbox'] { position: absolute; left: 4px; top: 7px; }
.block.checkListItem.done [contenteditable] { color: var(--dim); text-decoration: line-through; }
.block.quote { border-left: 3px solid var(--line); padding-left: 12px; color: #57564f; }
.block.codeBlock [contenteditable] {
  font-family: Consolas, monospace;
  font-size: 13px;
  background: var(--side);
  border-radius: 4px;
  padding: 10px 12px;
  white-space: pre-wrap;
}

/* ── 시트 블록 ── */
.sheet-embed {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 10px 0;
  overflow: hidden;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--side);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--dim);
}
.sheet-head .name { font-weight: 600; color: var(--text); }
.sheet-scroll { overflow-x: auto; max-height: 420px; overflow-y: auto; }
table.sheet { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
table.sheet th {
  background: var(--side);
  color: var(--dim);
  font-weight: 500;
  font-size: 11px;
  border: 1px solid var(--line);
  padding: 2px 6px;
  min-width: 34px;
  position: sticky;
  top: 0;
}
table.sheet th.rowhead { position: sticky; left: 0; min-width: 34px; }
table.sheet td {
  border: 1px solid var(--line);
  padding: 3px 8px;
  min-width: 88px;
  max-width: 260px;
  height: 24px;
  background: var(--bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td.formula { color: var(--accent); }
table.sheet td:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--cell); }

#doc-actions { margin-top: 18px; display: flex; gap: 8px; }
#doc-actions button {
  border: 1px solid var(--line);
  background: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--dim);
  cursor: pointer;
}
#doc-actions button:hover { color: var(--text); border-color: var(--dim); }

.saving { position: fixed; right: 14px; top: 10px; font-size: 12px; color: var(--dim); }

/* ── Univer 시트 임베드 ── */
.sheet-univer {
  height: 360px;
  width: 100%;
  min-width: 0;
  position: relative;
  /* Univer는 캔버스로 그린다. 컨테이너 크기가 0이면 아무것도 안 보인다. */
}
.sheet-status { font-size: 11px; color: #8a8a85; }

/* ── BlockNote ── */
#blocks .bn-editor { padding-inline: 0; }

/* 커스텀 블록은 기본적으로 내용만큼만 넓어진다. 시트는 폭을 다 써야
   Univer가 열을 제대로 그린다 — 안 그러면 A열만 보인다. */
#blocks .bn-block-content[data-content-type='sheet'],
#blocks .bn-block-content[data-content-type='sheet'] > * { width: 100%; }

.sheet-embed {
  border: 1px solid #e3e0d8; border-radius: 8px; overflow: hidden;
  margin: .5rem 0; width: 100%;
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: #faf9f6; border-bottom: 1px solid #e3e0d8; font-size: 12px;
}
.sheet-head .name { font-weight: 600; }

/* 다른 곳에서 시트가 바뀌었을 때 — 저장이 409로 거부되는 상태 */
.sheet-stale {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #fdf3d7;
  border-bottom: 1px solid #e8d9a0;
  font-size: 12px;
  color: #7a5c00;
}
.sheet-stale button {
  margin-left: auto;
  border: 1px solid #d4bb6a;
  background: #fff;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11.5px;
  cursor: pointer;
  color: #6b4f00;
  flex-shrink: 0;
}
.sheet-stale button:hover { background: #fffaf0; border-color: #b89b3d; }

/* ── 시트 내보내기/가져오기 ── */
#sheet-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.row-actions a,
.row-actions button {
  font-size: 10.5px; color: #8a8a85; text-decoration: none;
  border: 1px solid #ddd9cf; border-radius: 4px; padding: 1px 5px;
  background: none; cursor: pointer; line-height: 1.5;
}
.row-actions a:hover,
.row-actions button:hover { color: #1f1f1c; border-color: #b9b4a7; background: #fff; }

/* 시트가 어느 문서에 쓰이는지 — 시트는 문서에 속하지 않고 참조될 뿐이다 */
.sheet-usage { font-size: 10.5px; color: #a09b90; margin-top: 2px; line-height: 1.4; }
#sheet-list li { align-items: flex-start; }
#sheet-list li > span:first-child { min-width: 0; }

/* 시트 블록 헤더 — 이름, 참조 id, 내보내기 */
.sheet-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8a8a85; }
.sheet-ref { font-size: 10px; background: #efece4; padding: 1px 5px; border-radius: 3px; color: #7a756a; }
.sheet-meta a {
  color: #8a8a85; text-decoration: none; border: 1px solid #ddd9cf;
  border-radius: 4px; padding: 1px 5px; font-size: 10.5px;
}
.sheet-meta a:hover { color: #1f1f1c; border-color: #b9b4a7; background: #fff; }

/* 시트 이름 — 클릭하면 바로 고친다 */
.sheet-head .name { cursor: text; border-radius: 3px; padding: 1px 4px; margin: -1px -4px; }
.sheet-head .name:hover { background: #efece4; }
.sheet-head .name-edit {
  font: inherit; font-weight: 600; color: inherit;
  border: 1px solid #b9b4a7; border-radius: 3px;
  padding: 0 4px; background: #fff; min-width: 8rem;
}

/* ── 대화록 안내 ──
   편집이 안 되는 이유와, 그럼 무엇을 하면 되는지를 같은 줄에 둔다.
   이유 없이 막히면 사용자는 버그로 읽는다. */
#chat-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--side);
  font-size: 13px;
  color: var(--dim, #666);
}
#chat-bar[hidden] { display: none; }
#chat-bar button {
  margin-left: auto;
  white-space: nowrap;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font: inherit;
}
#chat-bar button:hover:not(:disabled) { background: var(--line); }
#chat-bar button:disabled { opacity: 0.6; cursor: default; }

/* 끌고 있는 행 — 어느 것을 잡았는지 보여야 놓을 곳을 고를 수 있다 */
.tree-row.dragging { opacity: 0.45; }

/* ── 폴더 내용 (메인 pane) ──
   왼쪽 트리는 항해, 여기는 작업. 파일이 수백 개여도 목록에서는 정상이다. */
#folder-view { max-width: 980px; margin: 0 auto; padding: 44px 48px 120px; }
#folder-view h1 { font-size: 28px; margin: 0 0 4px; }
.folder-path { color: var(--dim); font-size: 12px; margin: 0 0 22px; word-break: break-all; }
#folder-list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#folder-list th {
  text-align: left;
  font-weight: 600;
  color: var(--dim);
  font-size: 12px;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
}
#folder-list td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
#folder-list td.name { white-space: normal; word-break: break-word; }
/* 이름 외 열은 보조 정보라 눈이 먼저 이름을 훑게 둔다 */
#folder-list td:not(.name) { color: var(--dim); font-size: 12.5px; }
#folder-list tr.clickable { cursor: pointer; }
#folder-list tr.clickable:hover td { background: var(--side); }
.dim { color: var(--dim); }

/* ── 로그인 게이트 ──────────────────────────────────────────────────
   웹 판에서만 뜬다. 앱 위를 완전히 덮는다 — 로그인 전에 뒤의 빈 앱이
   비쳐 보이면 "뭔가 고장났나" 로 읽힌다. */
#auth-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--bg, #fff);
}
#auth-screen .auth-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
#auth-screen .auth-brand {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg, #111);
}
/* Clerk 위젯이 뜨기 전의 빈 칸 — 화면이 잠깐 텅 비어 보이지 않게 자리를 잡아 둔다 */
#auth-screen #clerk-mount {
  min-height: 380px;
  min-width: 360px;
}