/* ============================================================
   DocFlow - VSCode 스타일 다크 테마
   ============================================================ */
:root {
  --bg-editor:   #1e1e1e;
  --bg-sidebar:  #252526;
  --bg-activity: #333333;
  --bg-titlebar: #323233;
  --bg-statusbar:#007acc;
  --bg-input:    #3c3c3c;
  --bg-hover:    #2a2d2e;
  --bg-active:   #094771;
  --bg-tab:      #2d2d2d;
  --bg-panel:    #1e1e1e;

  --fg:          #cccccc;
  --fg-muted:    #858585;
  --fg-bright:   #ffffff;
  --border:      #3c3c3c;
  --border-soft: #2b2b2b;

  --accent:      #0e639c;
  --accent-hi:   #1177bb;
  --blue:        #4fc1e9;
  --green:       #6a9955;
  --green-hi:    #4ec9b0;
  --red:         #f14c4c;
  --yellow:      #dcdcaa;
  --orange:      #ce9178;

  --font: "Segoe UI", -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --mono: "Consolas", "D2Coding", "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-editor);
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #424242; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #4f4f4f; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 전체 레이아웃 (grid) ---------------- */
#workbench {
  --explorer-w: 300px;              /* 우측 패널 폭 — 드래그로 조절 */
  display: grid;
  grid-template-rows: 35px 1fr 22px;
  grid-template-columns: 48px 1fr 5px var(--explorer-w);
  grid-template-areas:
    "title    title  title  title"
    "activity main   splitx explorer"
    "status   status status status";
  height: 100vh;
}
#workbench.explorer-collapsed { --explorer-w: 0px; }
#workbench.explorer-collapsed #explorer { display: none; }

/* ---------------- 타이틀바 ---------------- */
#titlebar {
  grid-area: title;
  background: var(--bg-titlebar);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  border-bottom: 1px solid #000;
  -webkit-user-select: none;
  user-select: none;
}
#titlebar .logo { color: var(--blue); font-weight: 600; letter-spacing: .3px; }
#titlebar .logo b { color: var(--fg-bright); }
#titlebar .crumb { color: var(--fg-muted); font-size: 12px; }
#titlebar .spacer { flex: 1; }
#titlebar .user-chip {
  display: flex; align-items: center; gap: 6px;
  color: var(--fg); font-size: 12px;
}
#titlebar .role-badge {
  font-size: 10px; padding: 1px 7px; border-radius: 9px;
  background: var(--accent); color: #fff;
}
#titlebar .role-badge.user { background: #5a5a5a; }
#titlebar .link-btn {
  background: none; border: none; color: var(--fg-muted); font-size: 12px;
}
#titlebar .link-btn:hover { color: var(--fg-bright); }

/* ---------------- 액티비티바 ---------------- */
#activitybar {
  grid-area: activity;
  background: var(--bg-activity);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 8px; gap: 4px;
}
.act-icon {
  width: 48px; height: 44px; display: flex; align-items: center;
  justify-content: center; color: var(--fg-muted); font-size: 20px;
  border-left: 2px solid transparent; position: relative;
  cursor: pointer; user-select: none; transition: color .12s, background .12s;
}
.act-icon:hover { color: var(--fg-bright); background: rgba(255,255,255,.06); }
.act-icon.active { color: var(--fg-bright); border-left-color: var(--fg-bright); }
/* 호버 툴팁 (오른쪽에 라벨 표시) */
.act-icon[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 52px; top: 50%; transform: translateY(-50%) scale(.96);
  background: #252526; color: var(--fg-bright); border: 1px solid var(--border);
  padding: 4px 9px; border-radius: 4px; font-size: 12px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.4); opacity: 0; pointer-events: none;
  transition: opacity .12s, transform .12s; z-index: 60;
}
.act-icon[data-tip]:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
.act-icon .dot {
  position: absolute; top: 8px; right: 8px; min-width: 15px; height: 15px;
  background: var(--accent); color: #fff; font-size: 9px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ---------------- 메인 (에디터) 영역 ---------------- */
#main {
  grid-area: main;
  background: var(--bg-editor);
  display: flex; flex-direction: column; overflow: hidden;
}
#tabbar {
  height: 35px; background: #252526; display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border-soft); overflow: hidden;
}
.tab-strip {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
}
.tab-strip::-webkit-scrollbar { display: none; }
.tab-nav {
  flex: 0 0 26px; display: flex; align-items: center; justify-content: center;
  background: #2a2a2c; color: var(--fg-muted); border: none; cursor: pointer;
  border-right: 1px solid var(--border-soft);
}
.tab-nav:last-child { border-right: none; border-left: 1px solid var(--border-soft); }
.tab-nav:hover:not(:disabled) { background: #333336; color: var(--fg-bright); }
.tab-nav:disabled { opacity: .3; cursor: default; }
.tab-nav.hidden { display: none; }
.tab {
  display: flex; align-items: center; gap: 7px; padding: 0 8px 0 12px;
  background: var(--bg-tab); color: var(--fg-muted); font-size: 12.5px;
  border-right: 1px solid #252526; white-space: nowrap; cursor: pointer;
  max-width: 220px; flex: 0 0 auto; position: relative;
}
.tab:hover { background: #2d2d30; }
.tab.active { background: var(--bg-editor); color: var(--fg-bright); }
.tab.active::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--blue);
}
.tab .ico { display: flex; color: var(--blue); }
.tab .tt { overflow: hidden; text-overflow: ellipsis; }
.tab .close {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto;
  color: var(--fg-muted); border: none; background: none; cursor: pointer; opacity: .55;
}
.tab:hover .close, .tab.active .close { opacity: 1; }
.tab .close:hover { color: var(--fg-bright); background: rgba(255,255,255,.12); }

#editor { flex: 1; overflow: auto; padding: 0; }

/* Welcome 화면 */
.welcome { padding: 48px 56px; max-width: 760px; }
.welcome h1 { font-size: 26px; font-weight: 300; color: var(--fg-bright); margin-bottom: 4px; }
.welcome h1 b { font-weight: 600; color: var(--blue); }
.welcome .sub { color: var(--fg-muted); margin-bottom: 30px; }
.welcome .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.welcome h3 { font-size: 13px; color: var(--fg); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.welcome .item { color: var(--blue); padding: 5px 0; cursor: pointer; font-size: 13px; }
.welcome .item:hover { text-decoration: underline; }
.welcome .item .k { color: var(--fg-muted); }
.welcome .step { color: var(--fg-muted); padding: 4px 0; font-size: 12.5px; }
.welcome .step b { color: var(--fg); }

/* 문서 상세 */
.detail { padding: 28px 36px; }
.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.detail-head .ficon { font-size: 22px; }
.detail-head h2 { font-size: 20px; font-weight: 500; color: var(--fg-bright); }
.detail-head .vtag {
  font-size: 11px; background: var(--green); color: #08290f;
  padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.detail-meta { color: var(--fg-muted); font-size: 12px; margin-bottom: 22px; }
.detail-meta code { font-family: var(--mono); color: var(--orange); }

.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-muted); margin: 26px 0 10px; display: flex;
  align-items: center; gap: 8px;
}
.section-title .line { flex: 1; height: 1px; background: var(--border-soft); }

/* 버전 이력 타임라인 */
.timeline { border-left: 2px solid var(--border); margin-left: 6px; }
.tl-item { position: relative; padding: 0 0 18px 22px; }
.tl-item::before {
  content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg-editor); border: 2px solid var(--accent-hi);
}
.tl-item.head::before { background: var(--green-hi); border-color: var(--green-hi); }
.tl-row { display: flex; align-items: baseline; gap: 10px; }
.tl-ver { font-weight: 600; color: var(--fg-bright); }
.tl-ver.head { color: var(--green-hi); }
.tl-author { color: var(--blue); font-size: 12px; }
.tl-date { color: var(--fg-muted); font-size: 11px; }
.tl-comment { color: var(--fg); margin: 3px 0 5px; font-size: 12.5px; }
.tl-actions { display: flex; gap: 12px; font-size: 11.5px; }
.tl-actions a { color: var(--blue); cursor: pointer; }
.tl-actions a:hover { text-decoration: underline; }
.tl-actions a.tl-undo { color: var(--orange); }
.tl-actions a.tl-restore { color: var(--green-hi); }

/* 버전 비교 · 정오표 섹션 */
.cmp-box { background: #252526; border: 1px solid var(--border-soft); border-radius: 6px; padding: 12px 14px; }
.cmp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-row label { color: var(--fg-muted); font-size: 12px; }
.cmp-row select { flex: 1; min-width: 160px; }
.cmp-btns { display: flex; gap: 10px; margin-top: 10px; }

/* 타임라인 정오표 항목 */
.tl-errata { display: flex; align-items: center; gap: 8px; margin: 0 0 16px -2px;
  padding: 6px 10px; background: rgba(112,72,232,.10); border-left: 3px solid #7048e8;
  border-radius: 4px; cursor: pointer; font-size: 12px; }
.tl-errata:hover { background: rgba(112,72,232,.18); }
.er-ico { }
.er-txt { color: var(--fg-bright); }
.tl-errata .er-meta { color: var(--fg-muted); font-size: 11px; margin-left: auto; }
.er-del { color: var(--fg-muted); padding: 0 4px; }
.er-del:hover { color: var(--red); }

/* 정오표 뷰 */
.errata-view { padding: 24px 28px; }
.er-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.er-titlebar h2 { font-size: 17px; color: var(--fg-bright); font-weight: 600; }
.er-actions { display: flex; gap: 8px; }
.er-scroll { overflow: auto; background: #fff; border-radius: 6px; padding: 16px; }
.er-hint { color: var(--fg-muted); font-size: 11.5px; margin: 4px 2px 10px; }
.er-exports { display: inline-flex; gap: 6px; padding: 0 6px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.er-orient { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: 12px; padding-right: 4px; }
.er-orient label { display: inline-flex; align-items: center; gap: 3px; color: var(--fg); cursor: pointer; }
.er-orient input { width: auto; cursor: pointer; }
.errata-table { width: 100%; border-collapse: collapse; font-size: 10.5pt; color: #222;
  background: #fff; table-layout: fixed; }
.errata-table th, .errata-table td { border: 1px solid #555; padding: 6px 8px; vertical-align: top;
  word-break: break-word; overflow-wrap: anywhere; position: relative; }
.errata-table th { background: #f0f0f0; text-align: center; font-weight: 600; }
.errata-table .er-no { text-align: center; }
.errata-table .er-head { text-align: center; }
.errata-table td.er-before { background: #fff8f8; }
.errata-table td.er-after { background: #f6fff8; }
.errata-table .df-del-s { color: #d1383d; font-weight: bold; text-decoration: line-through; }
.errata-table .df-add { color: #d1383d; font-weight: bold; }
.errata-table s { color: #d1383d; }
.errata-table img { max-width: 100%; }
.er-in { width: 100%; border: 1px solid #ddd; border-radius: 3px; padding: 3px 5px;
  font-family: inherit; font-size: 10pt; color: #222; background: #fff; box-sizing: border-box; }
.er-in:focus { outline: 1px solid var(--accent-hi); }
textarea.er-in { resize: vertical; }
/* 열 크기 조절 핸들 */
.col-resizer { position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 5; }
.col-resizer:hover { background: rgba(17,119,187,.35); }

/* 제출본 카드 */
.sub-grid { display: flex; flex-direction: column; gap: 8px; }
.sub-card {
  background: #252526; border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
}
.sub-card .av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.sub-card .body { flex: 1; min-width: 0; }
.sub-card .body .who { color: var(--fg-bright); font-weight: 500; }
.sub-card .body .fn { color: var(--fg-muted); font-size: 11.5px; font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-card .body .cm { color: var(--fg); font-size: 12px; margin-top: 2px; }
.sub-card .acts { display: flex; gap: 8px; flex-shrink: 0; }

.empty-note { color: var(--fg-muted); font-size: 12.5px; padding: 10px 0; }

/* 버튼 */
.btn {
  background: var(--accent); color: #fff; border: none; border-radius: 3px;
  padding: 6px 14px; font-size: 12.5px;
}
.btn:hover { background: var(--accent-hi); }
.btn.sm { padding: 3px 10px; font-size: 11.5px; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--fg); }
.btn.ghost:hover { background: var(--bg-hover); }
.btn.green { background: var(--green); }
.btn.green:hover { background: #5a8c48; }
.btn.danger { background: transparent; color: var(--red); border: 1px solid transparent; }
.btn.danger:hover { background: rgba(241,76,76,.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btnbar { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* diff 뷰어 */
.diff-wrap { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.diff-head { color: var(--fg-muted); margin-bottom: 10px; }
.diff-line { padding: 0 12px; white-space: pre-wrap; word-break: break-all; }
.diff-line.add { background: rgba(78,201,176,.13); color: #b5cea8; }
.diff-line.del { background: rgba(241,76,76,.13); color: #f4a0a0; }
.diff-line.meta { color: var(--blue); }
.diff-line.hunk { color: var(--yellow); background: rgba(220,220,170,.06); }
.unsupported { color: var(--yellow); background: rgba(220,220,170,.08);
  padding: 14px 16px; border-radius: 6px; border: 1px solid rgba(220,220,170,.2); }

/* HWP/HWPX 좌우 비교 iframe */
.hwp-diff-frame {
  width: 100%; height: 72vh; border: 1px solid var(--border);
  border-radius: 6px; background: #fff;
}

/* ---------------- 익스플로러 (우측) ---------------- */
#explorer {
  grid-area: explorer;
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border-soft);
  display: flex; flex-direction: column; overflow: hidden;
}
.exp-header {
  height: 35px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 16px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--fg-muted);
}
.exp-header .tools { display: flex; gap: 2px; }
.exp-header .tools button {
  background: none; border: none; color: var(--fg-muted); font-size: 15px;
  width: 24px; height: 24px; border-radius: 4px;
}
.exp-header .tools button:hover { color: var(--fg-bright); background: var(--bg-hover); }
.exp-tree { flex: 1; overflow: auto; padding-bottom: 20px; }

.row {
  display: flex; align-items: center; gap: 4px; padding: 2px 8px;
  cursor: pointer; white-space: nowrap; user-select: none; font-size: 13px;
  min-height: 22px;
}
.row:hover { background: var(--bg-hover); }
.row.selected { background: var(--bg-active); }
.row .twist { width: 14px; color: var(--fg-muted); font-size: 10px; text-align: center; }
.row .ico { width: 16px; text-align: center; }
.row .lbl { overflow: hidden; text-overflow: ellipsis; }
.row .badge {
  margin-left: auto; font-size: 10px; background: #454545; color: var(--fg);
  border-radius: 8px; padding: 0 6px; min-width: 16px; text-align: center;
}
.row .badge.v { background: var(--green); color: #08290f; font-weight: 600; }
.row.folder { color: var(--fg); font-weight: 600; text-transform: none; }
.row.doc { }
.row.sub { color: var(--fg-muted); font-size: 12.5px; }
.row.sub .ico { color: var(--blue); }
.row.sub:hover { color: var(--fg); }
.indent-1 { padding-left: 8px; }
.indent-2 { padding-left: 26px; }
.indent-3 { padding-left: 44px; }

.exp-empty { color: var(--fg-muted); font-size: 12px; padding: 16px; line-height: 1.7; }

/* ---- 우측 패널 공통 (이력/계정) ---- */
.side-scroll { flex: 1; overflow: auto; padding: 6px 0 24px; }
.side-sec { padding: 10px 14px 16px; border-bottom: 1px solid var(--border-soft); }
.side-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fg-muted);
  margin: 6px 0 12px; display: flex; align-items: center; justify-content: space-between;
}
.btn.full { width: 100%; margin-top: 8px; text-align: left; }

/* 미니 버튼 */
.mini {
  background: transparent; border: 1px solid var(--border); color: var(--fg);
  width: 26px; height: 24px; border-radius: 5px; font-size: 12px; line-height: 1;
}
.mini:hover { background: var(--bg-hover); }
.mini.add { border-style: dashed; color: var(--blue); }
.mini.danger:hover { background: rgba(241,76,76,.14); color: var(--red); border-color: var(--red); }

/* 내 계정 카드 */
.me-card {
  display: flex; align-items: center; gap: 12px; background: #2d2d2d;
  border: 1px solid var(--border-soft); border-radius: 8px; padding: 12px 14px; margin-bottom: 6px;
}

/* 계정 목록 행 */
.acct-list { display: flex; flex-direction: column; gap: 6px; }
.acct-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-radius: 6px;
}
.acct-row:hover { background: var(--bg-hover); }
.acct-av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.acct-av.big { width: 40px; height: 40px; font-size: 15px; }
.acct-info { flex: 1; min-width: 0; }
.acct-name { color: var(--fg-bright); font-size: 13px; }
.acct-sub { color: var(--fg-muted); font-size: 11px; font-family: var(--mono); }
.acct-acts { display: flex; gap: 4px; flex-shrink: 0; }
.me-tag { font-size: 9px; background: var(--green); color: #08290f; padding: 1px 6px; border-radius: 8px; font-weight: 600; }

/* 전체 이력 행 */
.hist-row {
  padding: 9px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer;
}
.hist-row:hover { background: var(--bg-hover); }
.hist-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hist-doc { color: var(--fg-bright); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-ver { color: var(--green-hi); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.hist-sub { color: var(--fg-muted); font-size: 11px; margin-top: 2px; }
.hist-cmt { color: var(--fg); font-size: 12px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 상태바 ---------------- */
#statusbar {
  grid-area: status;
  background: var(--bg-statusbar);
  color: #fff; display: flex; align-items: center; gap: 16px;
  padding: 0 12px; font-size: 12px;
}
#statusbar .seg { display: flex; align-items: center; gap: 5px; }
#statusbar .spacer { flex: 1; }

/* ---------------- 로그인 오버레이 ---------------- */
#login {
  position: fixed; inset: 0; background: #1e1e1e;
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.login-card {
  width: 340px; background: #252526; border: 1px solid var(--border);
  border-radius: 8px; padding: 32px 30px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.login-card .brand { text-align: center; margin-bottom: 24px; }
.login-card .brand .big { font-size: 30px; }
.login-card .brand h2 { font-size: 18px; color: var(--fg-bright); margin-top: 6px; font-weight: 500; }
.login-card .brand h2 b { color: var(--blue); }
.login-card .brand p { color: var(--fg-muted); font-size: 12px; margin-top: 3px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; color: var(--fg-muted); margin-bottom: 5px; }
input[type=text], input[type=password], input.inp, textarea, select {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--fg); padding: 7px 10px; border-radius: 3px; font-size: 13px;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: 1px solid var(--accent-hi); border-color: var(--accent-hi); }
.login-card .btn { width: 100%; padding: 9px; margin-top: 6px; }
.login-err { color: var(--red); font-size: 12px; margin-top: 10px; min-height: 16px; text-align: center; }
.login-hint { margin-top: 18px; font-size: 11px; color: var(--fg-muted); line-height: 1.7;
  border-top: 1px solid var(--border-soft); padding-top: 14px; }
.login-hint code { color: var(--orange); font-family: var(--mono); }

/* ---------------- 모달 ---------------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: 460px; background: #252526; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.5); overflow: hidden;
}
.modal .mh {
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
  font-size: 14px; color: var(--fg-bright); display: flex; justify-content: space-between;
}
.modal .mh .x { background: none; border: none; color: var(--fg-muted); font-size: 18px; }
.modal .mh .x:hover { color: var(--fg-bright); }
.modal .mb { padding: 18px; }
.modal .mf { padding: 14px 18px; border-top: 1px solid var(--border-soft);
  display: flex; justify-content: flex-end; gap: 10px; }
.drop {
  border: 1.5px dashed var(--border); border-radius: 6px; padding: 22px;
  text-align: center; color: var(--fg-muted); font-size: 12.5px; cursor: pointer;
  transition: .15s;
}
.drop:hover, .drop.over { border-color: var(--accent-hi); color: var(--fg); background: rgba(17,119,187,.07); }
.drop .fn { color: var(--green-hi); font-family: var(--mono); font-size: 12px; margin-top: 6px; }
.modal .field label { color: var(--fg); font-size: 12px; }
.sel-list { max-height: 220px; overflow: auto; margin-top: 6px; }
.sel-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border-soft); border-radius: 5px; margin-bottom: 7px; cursor: pointer;
}
.sel-item:hover { border-color: var(--accent-hi); }
.sel-item.sel { border-color: var(--accent-hi); background: rgba(17,119,187,.1); }
.sel-item input { width: auto; }
.sel-item .who { color: var(--fg-bright); font-size: 12.5px; }
.sel-item .cm { color: var(--fg-muted); font-size: 11.5px; }

/* 자동 병합 모달 */
.mg-badges { display: flex; gap: 8px; margin-bottom: 10px; }
.mg-badge { font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
.mg-badge.auto { background: rgba(78,201,176,.18); color: var(--green-hi); }
.mg-badge.ok { background: rgba(78,201,176,.18); color: var(--green-hi); }
.mg-badge.conf { background: rgba(220,180,80,.18); color: var(--yellow); }
.mg-sums { display: flex; flex-direction: column; gap: 5px; }
.mg-sum { display: flex; justify-content: space-between; align-items: center;
  background: #2d2d2d; border: 1px solid var(--border-soft); border-radius: 5px; padding: 7px 11px; }
.mg-who { color: var(--fg-bright); font-size: 12.5px; }
.mg-cnt { color: var(--blue); font-size: 12px; }

.cf-list { display: flex; flex-direction: column; gap: 10px; max-height: 240px; overflow: auto; }
.cf-item { border: 1px solid rgba(220,180,80,.35); border-radius: 6px; padding: 10px 12px; background: rgba(220,180,80,.05); }
.cf-base { color: var(--fg-muted); font-size: 11.5px; margin-bottom: 8px; }
.cf-base span { color: var(--fg); }
.cf-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; }
.cf-opt:hover { background: var(--bg-hover); }
.cf-opt input { width: auto; }
.cf-src { font-size: 11px; font-weight: 600; color: var(--green-hi); min-width: 64px; }
.cf-src.base { color: var(--fg-muted); }
.cf-prev { color: var(--fg); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-manual { margin-top: 14px; text-align: right; }
.mg-manual a { color: var(--blue); font-size: 11.5px; cursor: pointer; }
.mg-manual a:hover { text-decoration: underline; }

/* 토스트 */
#toast {
  position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%);
  background: #333; color: var(--fg-bright); padding: 9px 18px; border-radius: 5px;
  font-size: 12.5px; z-index: 200; border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.4); opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
#toast.err { border-color: var(--red); color: #f4a0a0; }
#toast.ok { border-color: var(--green-hi); }

.hidden { display: none !important; }

/* ============================================================
   요구사항 연관관계 (Traceability)
   ============================================================ */
.trace-view { padding: 20px 24px; }
.tr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tr-toolbar h2 { font-size: 17px; color: var(--fg-bright); font-weight: 600; }
.tr-stat { font-size: 12px; color: var(--fg-muted); font-weight: 400; margin-left: 8px; }
.tr-actions { display: flex; gap: 8px; }
.tr-body { display: flex; gap: 14px; align-items: stretch; }
.tr-graph { flex: 1 1 auto; min-width: 0; background: #16161c; border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; }
.tr-svg { width: 100%; height: 560px; display: block; }
.tr-edge { stroke: #4a4a5a; stroke-width: 1; }
.tr-edge.manual { stroke: #7048e8; stroke-dasharray: 4 3; }
.tr-edge.hot { stroke: #4ec9b0; stroke-width: 2; }
.tr-node { cursor: pointer; }
.tr-node circle { fill: #4a78c9; stroke: #16161c; stroke-width: 2; transition: fill .1s; }
.tr-node.sec circle { fill: #c98a4a; }
.tr-node text { fill: #c8c8d8; font-size: 13px; font-family: var(--mono);
  text-anchor: middle; pointer-events: none; }
.tr-node text.halo { stroke: #16161c; stroke-width: 3.5; stroke-linejoin: round; }
.tr-node:hover circle { fill: #6a98e9; }
.tr-node.selected circle { fill: #4ec9b0; stroke: #4ec9b0; stroke-width: 3; }
.tr-node.selected text { fill: #eaeaf0; font-weight: 600; }
.tr-node.dim { opacity: .28; }

.tr-side { flex: 0 0 300px; background: #1e1e24; border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px; overflow: auto; max-height: 560px; }
.tr-detail .tr-code { font-family: var(--mono); font-size: 14px; color: var(--fg-bright); font-weight: 700; word-break: break-all; }
.tr-detail .tr-kind { font-size: 11.5px; color: var(--fg-muted); margin: 3px 0 10px; }
.tr-ctx { font-size: 11.5px; color: var(--fg); background: #26262e; border-radius: 5px; padding: 7px 9px; margin-bottom: 10px; line-height: 1.5; max-height: 90px; overflow: auto; }
.tr-rel-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-muted); margin: 14px 0 8px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.tr-rel { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px; border-radius: 5px; }
.tr-rel:hover { background: var(--bg-hover); }
.tr-rel-code { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--fg-bright); cursor: pointer; word-break: break-all; }
.tr-dot { width: 9px; height: 9px; border-radius: 50%; background: #4a78c9; flex-shrink: 0; }
.tr-dot.sec { background: #c98a4a; }
.tr-rel-x { color: var(--fg-muted); cursor: pointer; font-size: 11px; padding: 0 3px; flex-shrink: 0; }
.tr-rel-x:hover { color: var(--red); }

/* 문서 보기 */
.docview { padding: 0; display: flex; flex-direction: column; height: 100%; }
.dv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.dv-bar h2 { font-size: 16px; color: var(--fg-bright); }
.dv-focus-tag { font-size: 12px; color: var(--green-hi); margin-right: 10px; }
.dv-body { padding: 20px 26px; overflow: auto; background: #fbfbfb; color: #222; flex: 1; }
.dv-body .doc-p { padding: 3px 6px; margin: 1px 0; border-radius: 3px; font-size: 10.5pt; line-height: 1.6; }
.dv-body .doc-id { background: #e8eefc; color: #1b4fb8; border-radius: 3px; padding: 0 3px; cursor: pointer; font-family: var(--mono); font-size: 10pt; }
.dv-body .doc-id:hover { background: #1b4fb8; color: #fff; }
.dv-body .doc-p.dv-focus { background: #fff3bf; outline: 2px solid #f0c000; }
.dv-body table { border-collapse: collapse; }
.dv-body td, .dv-body th { border: 1px solid #bbb; padding: 4px 7px; }

/* ============================================================
   프로젝트/폴더 계층 트리 · 문서 연관관계
   ============================================================ */

/* 트리 행 — 들여쓰기는 JS 가 paddingLeft 로 지정 */
#tree .row.project { font-weight: 600; color: #cfd8e3; }
#tree .row.project .ico { filter: saturate(1.2); }
#tree .row.folder.lv1 { color: #b9c6d4; }
#tree .row .badge.lk { background: #2d3f52; color: #7fc8ff; }
#tree .row-acts {
  display: none; margin-left: auto; padding-left: 6px; white-space: nowrap;
}
#tree .row:hover .row-acts { display: inline-block; }
#tree .row-acts a {
  display: inline-block; padding: 0 4px; cursor: pointer;
  color: #8aa0b4; font-size: 11px;
}
#tree .row-acts a:hover { color: #fff; }

/* 문서 상세 — 경로 표시 */
.detail-meta .path { color: #9db3c8; }

/* 연관 문서 카드 */
.link-grid { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.link-card {
  display: flex; align-items: center; gap: 10px;
  background: #23272e; border: 1px solid #32383f; border-radius: 6px;
  padding: 8px 10px;
}
.link-card .lc-ico { font-size: 16px; }
.link-card .lc-body { flex: 1; min-width: 0; }
.link-card .lc-name { color: #d6e2ee; cursor: pointer; }
.link-card .lc-name:hover { color: #7fc8ff; text-decoration: underline; }
.link-card .lc-meta { font-size: 11px; color: #7d8b99; margin-top: 2px; }
.link-card .lc-type {
  background: #2d3f52; color: #7fc8ff; border-radius: 4px; padding: 1px 5px;
}

/* 추천 후보 목록 */
.sg-lead { color: #b9c6d4; margin-bottom: 8px; }
.sg-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.sg-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: #23272e; border: 1px solid #32383f; border-radius: 6px; padding: 8px 10px;
}
.sg-row:hover { border-color: #4a5a6b; }
.sg-row .sg-main { flex: 1; min-width: 0; }
.sg-row .sg-name { display: block; color: #d6e2ee; }
.sg-row .sg-meta { display: block; font-size: 11px; color: #7d8b99; margin-top: 2px; }
.sg-row .sg-type {
  background: #2d3f52; color: #7fc8ff; border-radius: 4px; padding: 1px 5px;
}
.sg-row .sg-score { color: #6cc36c; font-variant-numeric: tabular-nums; }
.hint-box {
  margin-top: 10px; padding: 8px 10px; border-radius: 6px;
  background: #1e2530; border: 1px solid #2c3644; color: #8fa3b6; font-size: 12px;
}

/* 연관도(그림) */
.modal.wide { width: min(1100px, 94vw); }
.dg-wrap { display: flex; gap: 12px; height: min(60vh, 520px); }
.dg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dg-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dg-bar .btn.on { background: #2d5f8b; color: #fff; }
.dg-hint { font-size: 12px; color: #8fa3b6; }
.dg-canvas { flex: 1; overflow: auto; background: #1b1f25; border: 1px solid #2c3239; border-radius: 6px; }
.dg-side {
  width: 280px; overflow: auto; background: #1b1f25;
  border: 1px solid #2c3239; border-radius: 6px; padding: 10px;
}
.dg-side-empty { color: #6f7d8a; font-size: 12px; padding: 8px 2px; }
.dg-side-empty.sm { padding: 4px 2px; }
.dg-side-title { color: #d6e2ee; font-weight: 600; }
.dg-side-sub { color: #7d8b99; font-size: 11px; margin: 2px 0 8px; }
.dg-side-h {
  color: #9db3c8; font-size: 11px; margin: 10px 0 4px;
  border-bottom: 1px solid #2c3239; padding-bottom: 3px;
}
.dg-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 12px;
}
.dg-item-name { flex: 1; color: #cfd8e3; cursor: pointer; }
.dg-item-name:hover { color: #7fc8ff; }
.dg-item-meta { color: #6f7d8a; font-size: 10px; }
.dg-item-x, .dg-item-add { cursor: pointer; color: #8aa0b4; font-size: 11px; }
.dg-item-x:hover { color: #ff8080; }
.dg-item-add:hover { color: #6cc36c; }

.dg-svg { display: block; }
.dg-head rect { fill: #2d3f52; stroke: #3d5568; }
.dg-head text { fill: #9fd0ff; font-size: 12px; font-weight: 600; }
.dg-node rect { fill: #262b32; stroke: #3a424c; cursor: pointer; }
.dg-node:hover rect { stroke: #5a86ad; }
.dg-node.focus rect { stroke: #7fc8ff; stroke-width: 2; }
.dg-node.picking rect { stroke: #6cc36c; stroke-width: 2; fill: #26332a; }
.dg-node .dg-t1 { fill: #d6e2ee; font-size: 12px; pointer-events: none; }
.dg-node .dg-t2 { fill: #7d8b99; font-size: 10px; pointer-events: none; }
.dg-edge { fill: none; stroke: #5a86ad; stroke-width: 2; cursor: pointer; }
.dg-edge.auto { stroke-dasharray: 5 3; stroke: #7a8ba0; }
.dg-edge:hover { stroke: #ff8080; }

/* ============================================================
   요구사항 연관관계 — 필터 중심 관계도 · 수동 정의 지정
   ============================================================ */
.tr-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 12px; padding: 10px 12px;
  background: #1e1e24; border: 1px solid var(--border-soft); border-radius: 8px;
}
.tr-filter label { font-size: 12px; color: #9098a8; }
.tr-filter .inp { width: 320px; }
.tr-filter .inp.sm { width: 90px; }
.btn.sm { padding: 5px 12px; font-size: 12px; }

/* 중심 식별자 미선택 시 — 식별자 목록 */
.tr-catalog { padding: 14px; overflow: auto; max-height: 560px; }
.tr-cat-title { color: #9098a8; font-size: 12px; margin-bottom: 10px; }
.tr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-chip {
  cursor: pointer; padding: 7px 11px; border-radius: 6px;
  background: #24242c; border: 1px solid #33333d; min-width: 150px;
}
.tr-chip:hover { border-color: #4a78c9; background: #262a36; }
.tr-chip.def { border-left: 3px solid #4ec9b0; }
.tr-chip-code { display: block; color: #dcdce6; font-family: var(--mono); font-size: 12px; }
.tr-chip-meta { display: block; color: #7a8090; font-size: 10.5px; margin-top: 3px; }

/* 동심원 배치 — 중심 노드 강조 */
.tr-node.lv0 circle { fill: #4ec9b0; stroke: #16161c; stroke-width: 3; }
.tr-node.lv0 text { fill: #f2f2f8; font-weight: 700; font-size: 15px; }
.tr-node.lv2 circle, .tr-node.lv3 circle { opacity: .75; }
.tr-node.lv2 text, .tr-node.lv3 text { opacity: .85; font-size: 12px; }

.btn.full { width: 100%; margin-top: 8px; }
.empty-note.sm { font-size: 11.5px; padding: 6px 0; }

/* 문서 보기 — 드래그 → 정의 지정 */
.dv-hint {
  margin: 0 0 8px; padding: 8px 12px; border-radius: 6px;
  background: #1e2530; border: 1px solid #2c3644; color: #8fa3b6; font-size: 12px;
}
.dv-wrap { display: flex; gap: 12px; align-items: stretch; min-height: 0; flex: 1; }
.dv-wrap .dv-body {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-soft); border-radius: 8px;
  max-height: 62vh; user-select: text;
}
.dv-side-legacy {
  flex: 0 0 260px; background: #1e1e24; border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 12px; overflow: auto; max-height: 62vh;
}
.dv-side-legacy-title { color: #9098a8; font-size: 12px; margin-bottom: 8px; }
.dv-def { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #2a2a33; }
.dv-def-code { color: #4ec9b0; font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
.dv-def-code:hover { text-decoration: underline; }
.dv-def-q { flex: 1; color: #7a8090; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-def-x { color: #8aa0b4; font-size: 11px; cursor: pointer; }
.dv-def-x:hover { color: #ff8080; }


.dv-quote {
  padding: 10px 12px; border-radius: 6px; background: #16161c;
  border: 1px solid #33333d; color: #cfd8e3; font-size: 12px; max-height: 140px; overflow: auto;
}


/* ============================================================
   아이콘 — 인라인 SVG 선 아이콘
   ============================================================ */
.i {
  width: 16px; height: 16px; flex: 0 0 auto; display: inline-block;
  vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.i.tw { width: 12px; height: 12px; stroke-width: 2; vertical-align: -2px; }
button .i, .btn .i, a .i { vertical-align: -3px; }

/* 파일 형식별 색 */
.i.ft-hwp { color: #4a9fe0; }
.i.ft-doc { color: #4a78c9; }
.i.ft-pdf { color: #d9534f; }
.i.ft-txt { color: #9aa4b0; }
.i.ft-ppt { color: #e08a3c; }
.i.ft-xls { color: #4caf7d; }
.i.ft-etc { color: #8a94a0; }

/* 액티비티바 · 로고 */
.act-icon .i { width: 22px; height: 22px; stroke-width: 1.5; }
.logo-mark { width: 17px; height: 17px; fill: none; stroke: var(--blue);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.brand-mark {
  width: 60px; height: 60px; fill: none; stroke: var(--blue); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.brand-mark .dot { fill: var(--bg-editor); stroke: var(--green); }
.brand-mark .chk { stroke: var(--green); stroke-width: 2.4; }

/* 트리 · 목록 안에서의 아이콘 정렬 */
.row .ico { display: flex; align-items: center; justify-content: center; }
.row .twist { display: flex; align-items: center; justify-content: center; }
.row .badge.lk { display: inline-flex; align-items: center; gap: 2px; }
.row .badge.lk .i { width: 11px; height: 11px; }
#tree .row-acts a { display: inline-flex; align-items: center; padding: 0 3px; }
#tree .row-acts .i { width: 14px; height: 14px; }
.er-ico { display: inline-flex; }
.mini .i, .x .i { width: 14px; height: 14px; }
.dv-def-code .i, .tr-kind .i, .tr-chip-meta .i { width: 12px; height: 12px; }
.sb-role-i { vertical-align: -2px; }
#statusbar .i { width: 13px; height: 13px; vertical-align: -2px; }
.drop .i { width: 20px; height: 20px; vertical-align: -5px; }

/* ============================================================
   식별자 자동완성 · 명명 규칙 · 점검
   ============================================================ */
.ac-wrap { position: relative; display: block; }
.ac-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 60;
  background: #23272e; border: 1px solid #3a424c; border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); max-height: 240px; overflow: auto;
}
.ac-pop.hidden { display: none; }
.ac-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer;
  font-size: 12.5px; color: #cfd8e3;
}
.ac-item:hover, .ac-item.on { background: #2d3a49; }
.ac-item .ac-code { flex: 1; font-family: var(--mono); }
.ac-item.shape .ac-code { color: #8a94a0; }
.ac-tag { font-size: 10px; border-radius: 3px; padding: 1px 5px; }
.ac-tag.used { background: #2d3f52; color: #7fc8ff; }
.ac-tag.next { background: #1f3d2e; color: #6cc36c; }
.ac-tag.shape { background: #333; color: #9aa4b0; }
.ac-rule { font-size: 10px; color: #7a8090; }
.inp.ac-good { border-color: #4ec9b0; }
.inp.ac-bad { border-color: #d9534f; }

.ir-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.ir-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: #23272e; border: 1px solid #32383f; border-radius: 6px;
}
.ir-main { flex: 1; min-width: 0; }
.ir-name { color: #d6e2ee; font-size: 12.5px; }
.ir-pat { color: #7fc8ff; font-family: var(--mono); font-size: 12px; margin-top: 2px; }
.ir-note { color: #7a8090; font-size: 11px; margin-top: 2px; }
.ir-x { cursor: pointer; color: #8aa0b4; display: flex; }
.ir-x:hover { color: #ff8080; }
.ir-form {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #2c3239;
}
.hint-box code {
  background: #16161c; border: 1px solid #33333d; border-radius: 3px;
  padding: 0 4px; font-family: var(--mono); color: #9fd0ff;
}

.au-sum {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 12px; margin-bottom: 10px;
  background: #1e2530; border: 1px solid #2c3644; border-radius: 6px;
  font-size: 12px; color: #8fa3b6;
}
.au-sum b { color: #d6e2ee; margin-left: 4px; }
.au-sum .warn b { color: #e0a03c; }
.au-sec { margin-top: 14px; }
.au-h { color: #d6e2ee; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.au-n { background: #3a2f1e; color: #e0a03c; border-radius: 10px; padding: 0 7px; font-size: 11px; }
.au-d { color: #7a8090; font-size: 11.5px; margin: 3px 0 6px; }
.au-items { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow: auto; }
.au-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: #23272e; border: 1px solid #32383f; border-radius: 6px;
}
.au-code { flex: 1; font-family: var(--mono); font-size: 12px; color: #cfd8e3; }
.au-rule { font-size: 10.5px; color: #7a8090; }
.au-acts { display: flex; gap: 10px; }
.au-acts a { cursor: pointer; color: #7fc8ff; font-size: 11.5px; }
.au-acts a:hover { text-decoration: underline; }


/* ============================================================
   정의 표식(핀) · 문서 정보 · 식별자 현황
   ============================================================ */

/* 정의 지정 표식 — 본문 왼쪽에 고정 폭 여백(거터)을 두고 그 자리에 핀을 붙인다.
   화면 폭에 기대지 않으므로 창을 줄여도 본문 흐름이 흐트러지지 않는다. */
.dv-body { --pin-gutter: 150px; padding-left: calc(var(--pin-gutter) + 14px); }
.dv-body .doc-p { position: relative; }
.dv-body .doc-p.has-def {
  background: #f2fbf8; box-shadow: inset 3px 0 0 #2fa98f; padding-left: 10px;
}
.dv-pin {
  position: absolute; left: calc(-1 * var(--pin-gutter) - 10px); top: 1px;
  width: var(--pin-gutter); box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end;
  background: #2fa98f; color: #fff; border-radius: 4px; padding: 2px 7px 2px 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.dv-pin::after {                     /* 본문을 가리키는 꼬리 */
  content: ""; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  border: 4px solid transparent; border-left-color: #2fa98f; border-right: 0;
}
.dv-pin .pin-i {
  width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; margin-right: auto;
}
.dv-pin-code {
  font-family: var(--mono); font-size: 9pt; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-pin-code + .dv-pin-code { border-left: 1px solid rgba(255,255,255,.45); padding-left: 4px; }

/* 문서 정보 — 경로 / 사실 / 파일명 3단 */
.detail-meta { color: var(--fg-muted); font-size: 12px; margin-bottom: 20px; }
.dm-path { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.dm-seg { color: #9db3c8; }
.dm-seg.root { color: #7fc8ff; font-weight: 600; }
.dm-sep { display: inline-flex; color: #55606c; }
.dm-sep .i { width: 12px; height: 12px; }
.dm-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dm-f {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: #23272e; border: 1px solid #32383f; border-radius: 4px; padding: 2px 8px;
  color: #cfd8e3; font-size: 11.5px;
}
.dm-f i { color: #7a8090; font-style: normal; font-size: 10.5px; }
.dm-f code { font-family: var(--mono); color: var(--orange); }
.dm-file {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  color: #8a94a0; font-size: 11.5px;
}
.dm-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-file .i { width: 13px; height: 13px; }

/* 식별자 현황 */
.id-sum {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; font-size: 11.5px;
}
.id-sum span {
  background: #23272e; border: 1px solid #32383f; border-radius: 4px;
  padding: 2px 8px; color: #d6e2ee;
}
.id-sum i { color: #7a8090; font-style: normal; margin-right: 5px; font-size: 10.5px; }
.id-sum .warn { background: #3a2f1e; border-color: #52411f; color: #e0a03c; }
.id-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.id-chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  background: #23272e; border: 1px solid #32383f; border-radius: 4px;
  padding: 3px 8px; font-size: 11.5px; color: #cfd8e3;
}
.id-chip:hover { border-color: #5a86ad; background: #262c36; }
.id-chip b { font-family: var(--mono); font-weight: 400; }
.id-chip i {
  font-style: normal; font-size: 10px; background: #2d3f52; color: #7fc8ff;
  border-radius: 8px; padding: 0 5px;
}
.id-chip .i { width: 12px; height: 12px; color: #4ec9b0; }
.id-chip.ok { border-left: 3px solid #4ec9b0; }
.id-chip.unlinked { border-left: 3px solid #e0a03c; }
.id-chip.nodef { border-left: 3px solid #6f7d8a; color: #9aa4b0; }
.id-chip.bad { border-left: 3px solid #d9534f; }

/* 표 — 병합 셀이 있는 표의 가독성 */
.dv-body table, .doc-p table { table-layout: fixed; }
.dv-body table td, .doc-p table td { word-break: break-word; }

/* ============================================================
   진행 중 오버레이
   ============================================================ */
#busy {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(12, 12, 16, .62); backdrop-filter: blur(1.5px);
}
#busy.on { display: flex; }
body.busy-lock { pointer-events: none; }
body.busy-lock #busy { pointer-events: auto; }   /* 오버레이만 이벤트를 받는다 */
.busy-card {
  display: flex; align-items: center; gap: 14px;
  background: #23272e; border: 1px solid #3a424c; border-radius: 10px;
  padding: 18px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  min-width: 280px; max-width: 440px;
}
.busy-spin {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  border: 3px solid #3a424c; border-top-color: var(--blue);
  animation: busy-rot .8s linear infinite;
}
@keyframes busy-rot { to { transform: rotate(360deg); } }
.busy-msg { color: #e6ecf3; font-size: 13.5px; }
.busy-sub { color: #8a94a0; font-size: 11.5px; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .busy-spin { animation-duration: 2.4s; }
}

/* 표 안 셀 단위 정의 지정 */
.dv-body td.cell-def {
  background: #f2fbf8; box-shadow: inset 3px 0 0 #2fa98f;
}
.dv-body td.cell-def .dv-pin {
  position: static; width: auto; transform: none;
  display: inline-flex; margin: 0 0 4px; justify-content: flex-start;
}
.dv-body td.cell-def .dv-pin::after { display: none; }
.dv-body td.dv-sel-hint { outline: 2px dashed #4a9fe0; outline-offset: -2px; }
.dv-body td.dv-focus { background: #fff6d8; box-shadow: inset 0 0 0 2px #e0a03c; }

/* ============================================================
   요구사항 연관관계 — 문서 / 프로젝트 범위
   ============================================================ */
.tr-scope-name {
  font-size: 12px; color: #9db3c8; font-weight: 400; margin-left: 8px;
}
.tr-scope { display: flex; gap: 0; margin: 4px 0 10px; }
.tr-scope button {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1e1e24; color: #8a94a0; border: 1px solid var(--border-soft);
  padding: 6px 14px; font-size: 12px; cursor: pointer;
}
.tr-scope button:first-child { border-radius: 6px 0 0 6px; }
.tr-scope button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.tr-scope button:hover:not(:disabled) { color: #cfd8e3; background: #24242c; }
.tr-scope button.on { background: #2d3f52; color: #9fd0ff; border-color: #3d5568; }
.tr-scope button:disabled { opacity: .4; cursor: default; }

.tr-cat-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.tr-cat-head .inp.sm { width: 180px; margin-left: auto; }
.tr-chip.hidden { display: none; }
.tr-chip.mine { border-left: 3px solid #4a9fe0; }
.tr-chip.mine.def { border-left-color: #4ec9b0; }
.tr-chip-meta .i { width: 11px; height: 11px; margin-right: 2px; }

/* 연결된 식별자 — 소속 문서까지 */
.tr-rel { display: flex; align-items: center; gap: 6px; }
.tr-rel-doc {
  font-size: 10px; color: #7fc8ff; background: #2d3f52; border-radius: 3px;
  padding: 1px 5px; cursor: pointer; white-space: nowrap;
}
.tr-rel-doc:hover { background: #3a5570; text-decoration: underline; }
.tr-rel-doc.none { color: #6f7d8a; background: #2a2a33; cursor: default; }
.tr-def-doc { color: #7fc8ff; cursor: pointer; }
.tr-def-doc:hover { text-decoration: underline; }

/* 관계도 — 노드 아래 소속 문서, 이 문서 것 강조 */
.tr-node text.doc { fill: #7a8ba0; font-size: 10px; font-family: inherit; }
.tr-node text.halo.doc { stroke: #16161c; stroke-width: 3; }
.tr-node.mine circle { stroke: #4a9fe0; stroke-width: 2.5; }
.tr-edge { cursor: pointer; }
.tr-edge:hover { stroke: #ff8080; stroke-width: 3; }

/* ============================================================
   화면 높이 채우기 — 아래쪽 빈 공간 없이 본문을 끝까지 보여준다
   ============================================================ */

/* 문서 보기 */
.docview { padding: 0; display: flex; flex-direction: column;
  height: 100%; min-height: 0; }
.docview .dv-bar { flex: 0 0 auto; }
.docview .dv-hint { flex: 0 0 auto; margin: 0 16px 8px; }
.dv-wrap {
  display: flex; gap: 6px; align-items: stretch;
  flex: 1 1 auto; min-height: 0;          /* 남는 높이를 전부 쓴다 */
  padding: 0 16px 16px;
}
.dv-wrap .dv-body {
  flex: 1 1 auto; min-width: 0; min-height: 0; height: auto; max-height: none;
  overflow: auto; border: 1px solid var(--border-soft); border-radius: 8px;
  user-select: text;
}
.dv-wrap .dv-side {
  flex: 0 0 260px; min-height: 0; height: auto; max-height: none; overflow: auto;
}
/* 문서 보기가 열려 있으면 바깥은 스크롤하지 않는다(이중 스크롤 방지) */
#editor:has(.docview), #editor:has(.trace-view) { overflow: hidden; }

/* 요구사항 연관관계 */
.trace-view {
  padding: 20px 24px; display: flex; flex-direction: column;
  height: 100%; min-height: 0; box-sizing: border-box;
}
.trace-view .tr-toolbar,
.trace-view .tr-scope,
.trace-view .tr-filter { flex: 0 0 auto; }
.tr-body { flex: 1 1 auto; min-height: 0; }
.tr-graph { display: flex; min-height: 0; }
.tr-svg { width: 100%; height: 100%; min-height: 320px; }
.tr-side { max-height: none; min-height: 0; }
.tr-catalog { max-height: none; flex: 1; }

/* 화면이 낮으면 세로 스크롤을 허용해 잘리지 않게 한다 */
@media (max-height: 620px) {
  #editor:has(.docview), #editor:has(.trace-view) { overflow: auto; }
  .docview, .trace-view { height: auto; min-height: 100%; }
  .dv-wrap .dv-body, .dv-wrap .dv-side { max-height: 62vh; }
  .tr-svg { height: 460px; }
}

/* 개요 번호 — 한글이 자동 생성하는 목차 번호(1.1.1 …) */
.hwp-num { font-weight: 600; }
.dv-body .hwp-num { color: #1b4fb8; }

/* ============================================================
   폭 조절 손잡이 (스플리터)
   ============================================================ */

/* 워크벤치 ↔ 우측 패널 */
#split-x {
  grid-area: splitx; position: relative; cursor: col-resize;
  background: var(--border-soft);
}
#split-x::before {                    /* 실제 선보다 넓은 잡기 영역 */
  content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px;
}
#split-x:hover, #split-x.dragging { background: var(--blue); }
#split-x::after {                     /* 잡을 곳 표시(점 세 개) */
  content: ""; position: absolute; top: 50%; left: 1px;
  width: 3px; height: 26px; margin-top: -13px; border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom, var(--fg-muted) 0 2px, transparent 2px 5px);
  opacity: 0; transition: opacity .12s;
}
#split-x:hover::after { opacity: .9; }
#workbench.explorer-collapsed #split-x { background: var(--border-soft); }
#workbench.explorer-collapsed #split-x:hover { background: var(--blue); }

/* 접기/펴기 버튼 — 손잡이에 붙어 다닌다 */
#split-toggle {
  position: absolute; top: 50%; right: -1px; transform: translateY(-50%);
  width: 14px; height: 42px; border: none; padding: 0; cursor: pointer;
  background: #2a2f37; color: var(--fg-muted);
  border-radius: 4px 0 0 4px; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity .12s;
}
#split-x:hover #split-toggle, #split-toggle:focus-visible { opacity: 1; }
#workbench.explorer-collapsed #split-toggle {
  opacity: 1; right: auto; left: -1px; border-radius: 0 4px 4px 0;
}
#split-toggle:hover { background: var(--blue); color: #fff; }
#split-toggle .i { width: 12px; height: 12px; }

/* 패널 안쪽 세로 손잡이 (문서 보기 · 연관관계) */
.vsplit {
  flex: 0 0 5px; align-self: stretch; cursor: col-resize; position: relative;
  background: var(--border-soft); border-radius: 3px;
}
.vsplit::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px;
}
.vsplit:hover, .vsplit.dragging { background: var(--blue); }
.vsplit::after {
  content: ""; position: absolute; top: 50%; left: 1px;
  width: 3px; height: 26px; margin-top: -13px; border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom, var(--fg-muted) 0 2px, transparent 2px 5px);
  opacity: 0; transition: opacity .12s;
}
.vsplit:hover::after { opacity: .9; }

/* 드래그 중에는 글자 선택·아이프레임 이벤트를 막는다 */
body.resizing { user-select: none; cursor: col-resize; }
body.resizing iframe { pointer-events: none; }

/* 손잡이가 폭을 정하므로 고정폭을 풀어 준다 */
.dv-wrap .dv-side { flex: 0 0 auto; width: 260px; }
.tr-side { flex: 0 0 auto; width: 280px; }
.tr-body { display: flex; gap: 6px; }
.tr-graph { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   우클릭 메뉴 · 문서 권한
   ============================================================ */
#ctxmenu {
  position: fixed; z-index: 10000; min-width: 210px; padding: 5px;
  background: #23272e; border: 1px solid #3a424c; border-radius: 7px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55);
  font-size: 12.5px; color: #cfd8e3;
}
.ctx-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  border-radius: 5px; cursor: pointer; white-space: nowrap;
}
.ctx-item:hover { background: #2d3a49; }
.ctx-item.off { opacity: .38; cursor: default; }
.ctx-item.off:hover { background: none; }
.ctx-item.danger { color: #ff9a9a; }
.ctx-item.danger:hover { background: #3a2426; }
.ctx-ico { display: flex; width: 16px; color: #8fa3b6; }
.ctx-item.danger .ctx-ico { color: #ff9a9a; }
.ctx-lbl { flex: 1; }
.ctx-hint { font-size: 10.5px; color: #6f7d8a; }
.ctx-sep { height: 1px; margin: 4px 6px; background: #333b45; }
#tree .row.ctx-on { background: #2d3a49; outline: 1px solid #4a78c9; }

/* 읽기 전용 문서 */
#tree .row.doc.readonly .lbl { color: #8a94a0; }
#tree .row.doc.readonly .ico { opacity: .6; }
.ro-note {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 4px 10px; border-radius: 4px; font-size: 11.5px;
  background: #3a2f1e; border: 1px solid #52411f; color: #e0a03c;
}
.ro-note .i { width: 13px; height: 13px; }

/* 권한 설정 창 */
.ac-doc {
  display: flex; align-items: center; gap: 7px; color: #d6e2ee; font-size: 13px;
}
.ac-doc .i { width: 15px; height: 15px; color: #7fc8ff; }
.ac-sub { color: #7a8090; font-size: 10.5px; font-weight: 400; margin-left: 6px; }
.ac-head {
  display: grid; grid-template-columns: 1fr 150px 110px; gap: 10px;
  padding: 10px 10px 4px; color: #7a8090; font-size: 10.5px;
  border-bottom: 1px solid #2c3239; margin-top: 12px;
}
.ac-list { max-height: 300px; overflow: auto; }
.ac-row {
  display: grid; grid-template-columns: 1fr 150px 110px; gap: 10px;
  align-items: center; padding: 6px 10px; border-bottom: 1px solid #24242c;
}
.ac-user { display: flex; flex-direction: column; min-width: 0; }
.ac-name { color: #d6e2ee; font-size: 12.5px; }
.ac-id { color: #7a8090; font-size: 10.5px; font-family: var(--mono); }
.ac-eff { font-size: 11.5px; }
.ac-eff.lv-write { color: #6cc36c; }
.ac-eff.lv-read { color: #7fc8ff; }
.ac-eff.lv-none { color: #d9534f; }

/* ============================================================
   머리말 · 꼬리말 — 본문과 구분해서 표시
   ============================================================ */
.hwp-header, .hwp-footer {
  position: relative; margin: 10px 0; padding: 6px 10px 6px 62px;
  background: #f4f6f9; border: 1px dashed #b8c2cc; border-radius: 4px;
  color: #4a5560;
}
.hwp-header::before, .hwp-footer::before {
  content: attr(data-hf);
  position: absolute; left: 8px; top: 6px;
  font-size: 8.5pt; color: #7d8b99; letter-spacing: -.3px;
  background: #e4e9ef; border-radius: 3px; padding: 1px 6px;
}
.hwp-header { border-bottom-width: 2px; }
.hwp-footer { border-top-width: 2px; }
.hwp-header > div:empty, .hwp-footer > div:empty { display: none; }

/* 비교/미리보기 화면(iframe)에서도 같은 모양이 되도록 인라인 대비 최소 규칙 */
.dv-body .hwp-header, .dv-body .hwp-footer { font-size: 10pt; }

/* ============================================================
   페이지 구분 · 표/그림 제목
   ============================================================ */
.dv-body .hwp-page-start.legacy {
  position: relative; margin: 26px 0 12px; text-align: center; line-height: 1;
}
.dv-body .hwp-page-start::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed #c3ccd6;
}
.dv-body .hwp-page-start > span {
  position: relative; background: #fff; padding: 0 12px;
  color: #8a94a0; font-size: 9pt; letter-spacing: .5px;
}

/* 표·그림 제목 */
.hwp-caption { margin: 6px 0; color: #333; }
.hwp-caption.cap-top { margin-bottom: 4px; }
.hwp-caption.cap-bottom { margin-top: 4px; }
.dv-body .hwp-caption { font-weight: 600; }
.dv-body .hwp-caption.cap-tbl, .dv-body .hwp-caption.cap-pic { color: #1b3a5c; }

/* ============================================================
   탭 줄 — 목차처럼 '제목 … 쪽번호' 로 놓이는 줄
   ============================================================ */
.hwp-tabline {
  display: flex; align-items: baseline; gap: 6px; box-sizing: border-box;
}
.hwp-tabline .tl-left { flex: 0 1 auto; white-space: pre-wrap; }
.hwp-tabline .tl-right { flex: 0 0 auto; white-space: nowrap; }
.hwp-tabline .tl-fill { flex: 1 1 auto; min-width: 12px; align-self: flex-end; }
/* 점선 리더 — 탭에 leader 가 지정된 줄에만 */
.hwp-tabline.dots .tl-fill {
  border-bottom: 1px dotted currentColor; opacity: .55;
  transform: translateY(-3px);
}
/* 탭이 여백으로만 쓰인 경우 */
.hwp-tab { display: inline-block; min-width: 2em; }

/* ============================================================
   쪽 상자 — 머리말(위) · 본문 · 꼬리말(아래), 쪽마다 같은 높이
   ============================================================ */
.dv-body { background: #6b7280; padding: 18px 0; }   /* 종이 밖 여백 */
.hwp-page {
  display: flex; flex-direction: column;
  width: min(100%, 820px); margin: 0 auto 18px;
  aspect-ratio: 210 / 297;              /* A4 비율 — 쪽 높이를 일정하게 */
  background: #fff; color: #111;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  padding: 42px 46px 34px; box-sizing: border-box;
  position: relative;
  /* 긴 문서에서 폭을 바꿀 때 쪽끼리 서로의 배치를 다시 계산하지 않도록 가둔다.
     화면 밖 쪽은 속을 배치하지 않는다. 상자 크기는 A4 비율로 정해지므로
     배치를 건너뛰어도 높이는 그대로다. */
  contain: layout style;
  content-visibility: auto;
}
.hwp-page:last-child { margin-bottom: 0; }
.hp-head { flex: 0 0 auto; }
.hp-body { flex: 1 1 auto; min-height: 0; }
.hp-foot { flex: 0 0 auto; position: relative; }
/* 쪽 번호 — 꼬리말 아래 가운데 */
.hp-no {
  display: block; text-align: center; margin-top: 4px;
  font-size: 9pt; color: #8a94a0;
}
/* 쪽 상자 안에서는 머리말/꼬리말 테두리를 얇게 (이미 자리로 구분되므로) */
.hwp-page .hwp-header, .hwp-page .hwp-footer {
  margin: 0; padding: 4px 8px 4px 56px; background: #fafbfc;
  border: 1px dashed #d3d9df;
}
.hwp-page .hwp-header { margin-bottom: 10px; }
.hwp-page .hwp-footer { margin-top: 10px; }
.hwp-page .hwp-header::before, .hwp-page .hwp-footer::before {
  top: 4px; font-size: 8pt;
}
/* 내용이 넘치면 잘리지 않고 늘어난다 */
.hwp-page { overflow: visible; }

/* HWP 변환 품질 안내 */
.dv-warn {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 8px; padding: 8px 12px; border-radius: 6px;
  background: #3a2f1e; border: 1px solid #52411f; color: #e0a03c; font-size: 12px;
}
.dv-warn .i { width: 14px; height: 14px; flex: 0 0 auto; }
.dv-warn b { color: #f0c070; }
.dv-warn span { line-height: 1.55; }
.dv-warn code {
  background: #241d10; border: 1px solid #52411f; border-radius: 3px;
  padding: 0 5px; font-family: var(--mono); color: #f0c070;
}
.dv-warn-why {
  display: block; margin-top: 4px; font-size: 11px; color: #b58a4a;
  font-family: var(--mono);
}


/* 폭을 끄는 동안에는 그림자·전환 효과를 끊어 되그리기를 줄인다 */
body.resizing .hwp-page { box-shadow: none; }
body.resizing * { transition: none !important; }


/* 쪽을 나누지 못한 문서 — 종이 한 장으로 이어서 보여 준다 */
.hwp-page.flow { aspect-ratio: auto; height: auto; }
/* 긴 문단 목록에서도 폭 변경 비용을 줄인다 */
.dv-body .doc-p { contain: layout style; }

/* ============================================================
   문서 보기 오른쪽 패널 — 개요 / 지정된 정의
   ============================================================ */
.dv-side {
  flex: 0 0 auto; width: 280px; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: #1e1e24; border: 1px solid var(--border-soft); border-radius: 8px;
}
.ds-tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid #2c3239; }
.ds-tabs button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; color: #8a94a0; cursor: pointer;
  padding: 8px 6px; font-size: 11.5px; border-bottom: 2px solid transparent;
}
.ds-tabs button:hover:not(:disabled) { color: #cfd8e3; }
.ds-tabs button.on { color: #9fd0ff; border-bottom-color: var(--blue); }
.ds-tabs button:disabled { opacity: .35; cursor: default; }
.ds-tabs .i { width: 13px; height: 13px; }
.ds-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; }

/* 단계 버튼 */
.ol-levels {
  display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap;
  position: sticky; top: -8px; background: #1e1e24; padding: 4px 0 6px; z-index: 2;
}
.ol-levels button {
  min-width: 24px; height: 22px; padding: 0 6px; cursor: pointer;
  background: #24242c; color: #8a94a0;
  border: 1px solid #33333d; border-radius: 11px; font-size: 11px;
}
.ol-levels button:hover { color: #cfd8e3; border-color: #4a5a6b; }
.ol-levels button.on { background: #2d3f52; color: #9fd0ff; border-color: #3d5568; }
.ol-levels .all { min-width: 38px; }

/* 개요 항목 */
.ol-list { display: flex; flex-direction: column; }
.ol-item {
  display: flex; align-items: baseline; gap: 6px; cursor: pointer;
  padding: 4px 6px; border-radius: 4px; font-size: 12px; color: #cfd8e3;
  border-left: 2px solid transparent;
}
.ol-item:hover { background: #262c36; }
.ol-item.cur { background: #2d3f52; border-left-color: var(--blue); color: #9fd0ff; }
.ol-item.hidden { display: none; }
.ol-item .ol-num {
  flex: 0 0 auto; color: #7fc8ff; font-family: var(--mono); font-size: 11px;
}
.ol-item .ol-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-item.lv1 { font-weight: 600; }
.ol-item.lv1 .ol-num { color: #9fd0ff; }
.ol-item.lv3, .ol-item.lv4, .ol-item.lv5 { color: #a8b3bf; font-size: 11.5px; }

/* 이동했을 때 강조 */
.dv-body .dv-focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.doc-h { font-weight: 700; }
.doc-h.lv1 { font-size: 15pt; margin: 14px 0 6px; }
.doc-h.lv2 { font-size: 13pt; margin: 12px 0 5px; }
.doc-h.lv3 { font-size: 12pt; margin: 10px 0 4px; }
.doc-p-e { min-height: 1em; }
.doc-note { color: #888; font-size: 11px; margin: 6px 0; }

/* 엑셀 — 시트별 표 */
.sheet-page {
  display: block; background: #fff; color: #111; border-radius: 6px;
  margin: 0 auto 16px; padding: 14px 16px; width: min(100%, 1100px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3); contain: layout style;
}
.xl-sheet { font-size: 10pt; }
.xl-sheet th, .xl-sheet td {
  border: 1px solid #c9ced4; padding: 3px 7px; text-align: left;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xl-sheet th { background: #eef1f4; font-weight: 600; }
.xl-sheet tr.xl-col th {
  background: #dfe4ea; color: #5a6672; font-weight: 400; text-align: center;
}

/* 파워포인트 — 화면을 꽉 채우는 슬라이드 */
.kind-pptx .dv-body { background: #2a2d33; padding: 16px 0; }
.pp-slide {
  position: relative; width: min(100%, 1180px); margin: 0 auto 20px;
  background: #fff; color: #111; box-shadow: 0 3px 14px rgba(0, 0, 0, .45);
  contain: layout style; content-visibility: auto;
}
.pp-obj { position: absolute; box-sizing: border-box; }
.pp-text {
  padding: 4px 6px; overflow: hidden; line-height: 1.3;
  font-size: 14pt; word-break: break-word;
}
img.pp-obj { object-fit: contain; }

/* ============================================================
   도움말 — 첫 접속 안내 · 사용 설명서
   ============================================================ */
#titlebar .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: 6px; padding: 0;
  background: none; border: none; border-radius: 5px;
  color: var(--fg-muted); cursor: pointer;
}
#titlebar .icon-btn:hover { background: rgba(255,255,255,.1); color: var(--fg-bright); }
#titlebar .icon-btn .i { width: 16px; height: 16px; }

/* 첫 접속 안내 */
#tour { position: fixed; inset: 0; z-index: 10500; }
.tour-mask { position: absolute; inset: 0; background: rgba(10, 12, 16, .62); }
.tour-ring {
  position: absolute; border: 2px solid var(--blue); border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(10, 12, 16, .62), 0 0 18px rgba(74, 158, 255, .55);
  pointer-events: none; transition: all .18s ease;
}
.tour-ring + .tour-card { z-index: 2; }
#tour .tour-ring ~ .tour-mask { display: none; }
.tour-card {
  position: absolute; width: 340px; max-width: calc(100vw - 24px);
  background: #23272e; border: 1px solid #3a424c; border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55); padding: 16px 18px;
  color: #cfd8e3; transition: left .18s ease, top .18s ease;
}
.tour-step { font-size: 10.5px; color: #7a8090; margin-bottom: 4px; }
.tour-title { font-size: 15px; font-weight: 600; color: #eaeaf0; margin-bottom: 8px; }
.tour-body { font-size: 12.5px; line-height: 1.65; color: #b9c6d4; }
.tour-body b { color: #9fd0ff; }
.tour-dots { display: flex; gap: 5px; margin: 14px 0 10px; }
.tour-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #3a424c; cursor: pointer;
}
.tour-dot.on { background: var(--blue); width: 18px; border-radius: 4px; }
.tour-btns { display: flex; align-items: center; gap: 6px; }
.tour-btns .spacer { flex: 1; }

/* 도움말 창 */
.hp-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hp-none { color: #7a8090; font-size: 12px; }
.hp-list { max-height: 320px; overflow: auto; margin-bottom: 4px; }
.hp-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 5px; cursor: pointer; font-size: 12.5px; color: #cfd8e3;
}
.hp-item:hover { background: #262c36; }
.hp-item.cur { background: #2d3f52; color: #9fd0ff; }
.hp-item .hp-num { color: #7fc8ff; font-family: var(--mono); font-size: 11.5px; }
.hp-item .hp-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-item .hp-anchor {
  font-size: 10px; background: #2d3f52; color: #7fc8ff;
  border-radius: 3px; padding: 1px 6px; white-space: nowrap;
}
.hp-item .hp-page { font-size: 10.5px; color: #7a8090; }
.hp-item .hp-x { display: flex; color: #8aa0b4; }
.hp-item .hp-x:hover { color: #ff8080; }
.hp-item.lv1 { font-weight: 600; }
.hp-item.lv3, .hp-item.lv4 { font-size: 11.5px; color: #a8b3bf; }

.hp-admin { margin-top: 14px; }
.hp-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hp-file {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #24242c; border: 1px solid #33333d; border-radius: 6px;
  padding: 5px 12px; font-size: 12px; color: #cfd8e3;
}
.hp-file:hover { border-color: #4a78c9; }
.hp-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inp.sm { padding: 5px 9px; font-size: 12px; }