/* notes.css — 노트 전자 필기장(원노트형) 화면 — notes.js · note-page.js · note-editor.js (2026-10-27) */

/* ── 세 칸: 섹션 줄 | 페이지 목록 | 페이지 ── */
.nb {
  --rail: 200px; --railx: 0px; --list: 270px; --listx: 0px;
  display: grid; grid-template-columns: var(--rail) var(--railx) var(--list) var(--listx) minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; min-height: 480px;
}
.nb[data-rail="0"] { --rail: 0px; --railx: 18px; }
.nb[data-list="0"] { --list: 0px; --listx: 18px; }
.nb-rail, .nb-list, .nb-main { min-height: 0; overflow: hidden; }
/* 접힘 버튼이 숨어 있어도 칸이 밀리지 않게 자리를 못 박는다 */
.nb-rail { grid-column: 1; grid-row: 1; }
.nb-unfold-rail { grid-column: 2; grid-row: 1; }
.nb-list { grid-column: 3; grid-row: 1; }
.nb-unfold-list { grid-column: 4; grid-row: 1; }
.nb-main { grid-column: 5; grid-row: 1; }
.nb-unfold { display: none; border: 0; border-right: 1px solid var(--border); background: #f8fafc; color: #64748b; font-size: 12px; padding: 0; }
.nb-unfold:hover { background: #eef2ff; color: var(--brand); }
.nb[data-rail="0"] .nb-unfold-rail, .nb[data-list="0"] .nb-unfold-list { display: block; }
.nb-icon { border: 0; background: none; color: #64748b; font-size: 14px; padding: 0 4px; line-height: 1; }
.nb-icon:hover { color: var(--brand); }
.nb-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; flex-shrink: 0; }

/* 섹션 줄 */
.nb-rail { background: #f8f9fc; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.nb-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px; font-size: 13px; }
.nb-sections { flex: 1; overflow: auto; padding: 0 6px; }
.nb-sec { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px; color: #334155; }
.nb-sec:hover { background: #eef0f6; }
.nb-sec.on { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); font-weight: 600; color: #0f172a; }
.nb-sec-bar { width: 4px; height: 18px; border-radius: 2px; flex-shrink: 0; }
.nb-sec-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-sec-n { font-size: 11px; color: #94a3b8; font-weight: 400; }
.nb-more { border: 0; background: none; color: #94a3b8; visibility: hidden; padding: 0 4px; font-size: 15px; line-height: 1; flex-shrink: 0; }
.nb-more:hover { color: var(--brand); }
.nb-sec:hover .nb-more, .nb-row:hover .nb-more, .nb-row.on .nb-more { visibility: visible; }
.nb-add-sec { margin: 6px 10px; border: 1px dashed #cbd5e1; background: none; border-radius: 6px; font-size: 12.5px; color: #475569; padding: 4px; }
.nb-add-sec:hover { border-color: var(--brand); color: var(--brand); }
.nb-rail-foot { border-top: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.nb-rail-foot button { border: 0; background: none; text-align: left; padding: 5px 8px; border-radius: 6px; font-size: 12.5px; color: #475569; }
.nb-rail-foot button:hover, .nb-rail-foot button.on { background: #eef0f6; color: #0f172a; }
.nb-trash-n { float: right; font-size: 11px; color: #94a3b8; }
.drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.drop-after { box-shadow: inset 0 -2px 0 var(--brand); }
.drop-in { background: #e0e7ff !important; outline: 1px dashed var(--brand); }

/* 페이지 목록 */
.nb-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: #fff; }
.nb-list-head { padding: 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.nb-list-title { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.nb-list-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-sec-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.nb-add { display: flex; }
.nb-add > .btn:first-child { flex: 1; font-size: 12.5px; }
/* ▾(다른 방법 — 템플릿·Word)는 한 톤 진하게, 흰 줄로 나눈다. 같은 색이라 '페이지 추가'와 한 버튼으로 보였다(2026-10-28).
   열렸을 때(.show)·누를 때도 같은 색 — 그냥 두면 Bootstrap 기본 파랑이 나온다 */
.nb-add > .dropdown-toggle-split { flex: 0 0 auto; padding: 0 11px; background: var(--brand-dark); border-color: var(--brand-dark); border-left: 1px solid rgba(255, 255, 255, .6); color: #fff; }
.nb-add > .dropdown-toggle-split:hover, .nb-add > .dropdown-toggle-split:active, .nb-add > .dropdown-toggle-split.show,
.nb-add > .dropdown-toggle-split:focus-visible { background: #3730a3; border-color: #3730a3; border-left-color: rgba(255, 255, 255, .6); color: #fff; }
.nb-search { font-size: 12.5px; }
.nb-tree { flex: 1; overflow: auto; padding: 6px 4px; outline: none; }
.nb-row { display: flex; align-items: center; gap: 2px; padding: 5px 6px 5px calc(6px + var(--d, 0) * 16px); border-radius: 6px; cursor: pointer; font-size: 13.5px; color: #1f2937; user-select: none; }
.nb-row:hover { background: #f1f5f9; }
.nb-row.on { background: #e0e7ff; color: #1e1b4b; font-weight: 600; }
.nb-caret, .nb-caret-sp { width: 16px; flex-shrink: 0; border: 0; background: none; color: #94a3b8; font-size: 11px; padding: 0; }
.nb-caret:hover { color: var(--brand); }
.nb-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-row-title.empty { color: #94a3b8; font-style: italic; font-weight: 400; }
.nb-empty-list { text-align: center; padding: 24px 8px; color: var(--text-muted); font-size: 13px; }
.nb-res-head { font-size: 12px; color: var(--text-muted); padding: 4px 8px 8px; }
.nb-res { padding: 8px; border-radius: 6px; cursor: pointer; }
.nb-res:hover { background: #f1f5f9; }
.nb-res.on { background: #e0e7ff; }
.nb-res-title { font-size: 13.5px; font-weight: 600; }
.nb-res-where { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; }
.nb-res-snip { font-size: 12px; color: #475569; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb mark, .nb-res mark { background: #fef08a; padding: 0; }

/* 페이지 칸 */
.nb-main { display: flex; flex-direction: column; background: #f8fafc; }
.nb-main > .nb-page, .nb-main > .nb-panel-view, .nb-main > .nb-empty { flex: 1; min-height: 0; }
.nb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 8px; padding: 40px 16px; text-align: center; }
.nb-empty-ico { font-size: 40px; }
.nb-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.nb-page-top { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: #fff; }
.nb-back { display: none; border: 0; background: none; font-size: 18px; color: #475569; padding: 0 6px; }
.nb-crumb { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.nb-crumb i { font-style: normal; margin: 0 5px; color: #cbd5e1; }
.nb-crumb span:last-child { color: #111827; font-weight: 600; }
.nb-top-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nb-status { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.nb-status.ok { color: #059669; }
.nb-status.bad { color: #dc2626; font-weight: 600; }
.nb-status.mute { color: #94a3b8; }
.nb-top-btn { border: 1px solid var(--border); background: #fff; border-radius: 6px; font-size: 12px; height: 28px; padding: 0 8px; color: #334155; white-space: nowrap; }
.nb-top-btn:hover { border-color: #c7d2fe; color: var(--brand); }
.nb-top-btn.on { background: #f1f5f9; }
.nb-presence { display: inline-flex; align-items: center; padding-left: 4px; }
.nb-face { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-left: -4px; border: 2px solid #fff; }
.nb-face.editing { box-shadow: 0 0 0 2px #f59e0b; }
.nb-face.more { background: #94a3b8; }
.nb-editing-note { font-size: 11px; color: #b45309; margin-left: 6px; white-space: nowrap; }
.nb-live { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fffbeb; border-bottom: 1px solid #fde68a; font-size: 13px; flex-wrap: wrap; }
.nb-live span { flex: 1; min-width: 200px; }
.nb-page-body { flex: 1; min-height: 0; display: flex; overflow: hidden; position: relative; }
.nb-sheet-wrap { flex: 1; overflow: auto; background: #f8fafc; }
.nb-sheet { background: #fff; margin: 16px auto; padding: 28px 44px 80px; max-width: 880px; min-height: calc(100% - 32px); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); border-radius: 6px; }
.nb-sheet[data-width="wide"] { max-width: 1140px; }
.nb-sheet[data-width="full"] { max-width: none; margin: 0; border-radius: 0; min-height: 100%; }
.nb-title { width: 100%; border: 0; border-bottom: 1px solid #cbd5e1; font-size: 26px; font-weight: 600; padding: 2px 0 6px; outline: none; color: #111827; background: transparent; }
.nb-title::placeholder { color: #cbd5e1; }
.nb-title:read-only { cursor: default; }
.nb-title-ro { font-size: 26px; font-weight: 600; border-bottom: 1px solid #cbd5e1; padding-bottom: 6px; }
.nb-dateline { font-size: 12px; color: var(--text-muted); margin: 6px 0 18px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.nb-dl-sub { color: #94a3b8; }

/* ── 문서(편집기) ── */
.nb-doc { outline: none; font-size: 15px; line-height: 1.65; color: #1f2937; min-height: 320px; word-break: break-word; }
.nb-doc > * + * { margin-top: .35em; }
.nb-doc p { margin: 0; }
.nb-doc h1 { font-size: 22px; font-weight: 700; margin: .9em 0 .3em; }
.nb-doc h2 { font-size: 19px; font-weight: 700; margin: .8em 0 .3em; }
.nb-doc h3 { font-size: 16.5px; font-weight: 700; margin: .7em 0 .25em; }
.nb-doc ul, .nb-doc ol { padding-left: 1.6em; margin: .2em 0; }
.nb-doc blockquote { border-left: 3px solid #c7d2fe; padding-left: 12px; color: #475569; margin: .4em 0; }
.nb-doc code { background: #f1f5f9; border-radius: 4px; padding: 0 4px; font-size: .92em; }
.nb-doc pre { background: #0f172a; color: #e2e8f0; border-radius: 6px; padding: 10px 12px; font-size: 13px; overflow-x: auto; }
.nb-doc pre code { background: none; padding: 0; color: inherit; }
.nb-doc hr { border: 0; border-top: 1px solid #cbd5e1; margin: 1em 0; }
.nb-doc a { color: #2563eb; text-decoration: underline; }
.nb-doc mark { border-radius: 2px; padding: 0 1px; }
.nb-doc p.is-editor-empty:first-child::before, .nb-doc .is-empty.is-editor-empty::before {
  content: attr(data-placeholder); float: left; color: #adb5bd; pointer-events: none; height: 0;
}
.nb-doc .ProseMirror-selectednode { outline: 2px solid var(--brand); border-radius: 4px; }
.ProseMirror-gapcursor:after { border-top-color: var(--brand); }

/* 할 일 */
.nb-doc ul[data-type="taskList"] { list-style: none; padding-left: 2px; }
/* 편집기 화면의 할 일 줄은 li[data-checked](data-type 없음), 저장 HTML 은 li[data-type="taskItem"] */
.nb-doc ul[data-type="taskList"] > li { display: flex; align-items: flex-start; gap: 8px; }
.nb-doc ul[data-type="taskList"] > li > label { flex: 0 0 auto; margin-top: .25em; user-select: none; position: relative; }
.nb-doc ul[data-type="taskList"] > li > label input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.nb-doc ul[data-type="taskList"] > li > div { flex: 1 1 auto; min-width: 0; }
.nb-doc ul[data-type="taskList"] > li[data-checked="true"] > div { color: #94a3b8; text-decoration: line-through; }

/* 태그(★ 중요 · ? 질문 · ! 확인 필요) */
.nb-doc [data-tag] { position: relative; padding-left: 28px; }
.nb-doc [data-tag]::before { position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 4px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.nb-doc [data-tag="important"]::before { content: '★'; background: #fef3c7; color: #d97706; }
.nb-doc [data-tag="question"]::before { content: '?'; background: #ede9fe; color: #7c3aed; }
.nb-doc [data-tag="check"]::before { content: '!'; background: #fee2e2; color: #dc2626; }

/* 표 */
.nb-doc .tableWrapper { overflow-x: auto; margin: .5em 0; }
.nb-doc table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 0; }
.nb-doc td, .nb-doc th { border: 1px solid #cbd5e1; padding: 4px 8px; vertical-align: top; position: relative; min-width: 1em; }
.nb-doc th { background: #f1f5f9; font-weight: 600; text-align: left; }
.nb-doc td > p, .nb-doc th > p { margin: 0; }
.nb-doc .selectedCell::after { content: ''; position: absolute; inset: 0; background: rgba(79, 70, 229, .12); pointer-events: none; }
.nb-doc .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px; background: #93c5fd; pointer-events: none; }
.nb-doc.resize-cursor, .resize-cursor .nb-doc { cursor: col-resize; }

/* 그림 */
.nb-img { display: block; position: relative; margin: .5em 0; line-height: 0; }
.nb-img[data-align="center"] { text-align: center; }
.nb-img img { max-width: 100%; height: auto; border-radius: 4px; display: inline-block; }
.nb-img.is-selected img { outline: 2px solid var(--brand); outline-offset: 2px; }
.nb-img.is-uploading img { opacity: .55; }
.nb-img.is-uploading::after { content: '올리는 중…'; position: absolute; left: 8px; bottom: 8px; background: rgba(17, 24, 39, .8); color: #fff; font-size: 12px; line-height: 1.6; padding: 0 8px; border-radius: 4px; }
.nb-img.nb-img-missing img { min-width: 160px; min-height: 60px; background: #f1f5f9; }
.nb-img.nb-img-missing::after { content: '그림을 볼 수 없습니다(권한·삭제)'; position: absolute; left: 8px; top: 8px; font-size: 12px; line-height: 1.6; color: #64748b; }
.nb-img-tools { display: none; position: absolute; top: 6px; left: 6px; background: rgba(17, 24, 39, .88); border-radius: 6px; padding: 2px; line-height: 1.4; z-index: 2; white-space: nowrap; width: max-content; }
.nb-img-tools button { color: #fff; background: none; border: 0; font-size: 12px; padding: 2px 7px; border-radius: 4px; }
.nb-img-tools button:hover { background: rgba(255, 255, 255, .15); }
.nb-img-tools i { width: 1px; background: rgba(255, 255, 255, .25); margin: 2px 3px; }
.ProseMirror[contenteditable="true"] .nb-img.is-selected .nb-img-tools { display: flex; }
.ProseMirror[contenteditable="false"] .nb-img img { cursor: zoom-in; }

/* 파일 카드 */
.note-file-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: .5em 0; background: #fafbff; max-width: 540px; line-height: 1.4; }
.nfc-ico { width: 32px; height: 32px; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.nfc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nfc-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.nfc-body small { color: var(--text-muted); font-size: 12px; }
.nfc-acts { display: flex; gap: 4px; flex-shrink: 0; }
.nfc-acts button { border: 1px solid var(--border); background: #fff; border-radius: 6px; font-size: 12px; padding: 2px 8px; }
.nfc-acts button:hover { border-color: var(--brand); color: var(--brand); }

/* 멘션 · 페이지 링크 */
.nb-doc .mention-tag { background: #eef2ff; color: #4338ca; border-radius: 4px; padding: 0 4px; font-weight: 500; white-space: nowrap; }
.nb-doc .note-page-link, .note-page-link { background: #ecfdf5; color: #047857; border-radius: 4px; padding: 0 4px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nb-doc .note-page-link:hover { background: #d1fae5; }

@keyframes nbFlash { 0% { background: #fef08a; } 100% { background: transparent; } }
.nb-flash { animation: nbFlash 2.2s ease-out; border-radius: 4px; }

/* 예전 첨부 · 대체 화면 */
.nb-legacy-att:not(:empty) { margin-top: 28px; border-top: 1px dashed var(--border); padding-top: 12px; }
.nb-att-head { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.nb-att-head small { font-weight: 400; color: var(--text-muted); }
.nb-att-detach { margin-top: 6px; font-size: 12px; }
.nb-fallback img, .nb-ver-doc img, .nb-side-doc img { max-width: 100%; height: auto; }

/* ── 리본 ── */
.nb-ribbon { position: relative; border-bottom: 1px solid var(--border); background: #fbfbfe; }
.nb-rb-tabs { display: flex; gap: 2px; padding: 4px 8px 0; }
.nb-rb-tabs button { border: 0; background: none; padding: 4px 12px; font-size: 13px; border-bottom: 2px solid transparent; color: #475569; }
.nb-rb-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.nb-rb-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; }
.nb-rb-grp { display: inline-flex; align-items: center; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--border); font-size: 12px; color: #475569; white-space: nowrap; }
.nb-rb-grp:last-of-type { border-right: 0; }
.nb-rb-btn { min-width: 28px; height: 28px; border: 1px solid transparent; background: none; border-radius: 6px; font-size: 13px; padding: 0 6px; color: #1f2937; white-space: nowrap; }
.nb-rb-btn:hover { background: #eef2ff; }
.nb-rb-btn.on { background: #e0e7ff; border-color: #c7d2fe; }
.nb-rb-btn .nb-a { color: #c00000; text-decoration: underline; text-decoration-thickness: 3px; }
.nb-rb-sel { height: 28px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 0 4px; max-width: 120px; background: #fff; }
.nb-rb-tags .nb-rb-btn { font-size: 12px; }
.nb-rb-pop-box { position: absolute; z-index: 30; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(15, 23, 42, .15); border-radius: 8px; padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; width: 184px; }
.nb-sw { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); padding: 0; }
.nb-sw:hover { transform: scale(1.12); }
.nb-sw-x { font-size: 12px; border: 1px solid var(--border); background: #fff; border-radius: 4px; padding: 0 6px; height: 22px; }
.nb-grid { width: auto; flex-direction: column; }
.nb-grid-cells { display: grid; grid-template-columns: repeat(8, 16px); gap: 2px; }
.nb-grid-cells span { width: 16px; height: 16px; border: 1px solid #cbd5e1; border-radius: 2px; cursor: pointer; }
.nb-grid-cells span.on { background: #c7d2fe; border-color: var(--brand); }
.nb-grid-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.nb-linkbar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-top: 1px dashed var(--border); font-size: 12px; }
.nb-linkbar input { flex: 1; max-width: 420px; height: 28px; border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; }

/* ── 고르기 창 · 메뉴 · 안내 · 크게 보기 ── */
.nb-suggest { position: fixed; z-index: 1090; width: 280px; max-height: 260px; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); padding: 4px; }
.nb-sg-head { font-size: 11px; color: var(--text-muted); padding: 2px 8px; }
.nb-sg-item { display: flex; flex-direction: column; width: 100%; text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 6px; font-size: 13px; }
.nb-sg-item small { font-size: 11px; color: var(--text-muted); }
.nb-sg-item.on, .nb-sg-item:hover { background: #eef2ff; }
.nb-sg-empty { font-size: 12px; color: var(--text-muted); padding: 6px 8px; }
.nb-menu-pop { position: fixed; z-index: 1080; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); padding: 4px; min-width: 210px; }
.nb-menu-pop button { display: flex; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: #1f2937; }
.nb-menu-pop button:hover:not(:disabled) { background: #f1f5f9; }
.nb-menu-pop button:disabled { color: #cbd5e1; }
.nb-menu-pop button.danger { color: #dc2626; }
.nb-menu-pop hr { margin: 4px 0; }
.nb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100; background: #111827; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-width: 90vw; }
.nb-zoom { position: fixed; inset: 0; z-index: 1100; background: rgba(15, 23, 42, .86); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.nb-zoom img { max-width: 94vw; max-height: 92vh; border-radius: 6px; background: #fff; }
.nb-zoom-x { position: absolute; top: 12px; right: 16px; border: 0; background: none; color: #fff; font-size: 22px; }
.nb-choose-actions { flex-wrap: wrap; gap: 6px; }

/* ── 댓글 패널 ── */
.nb-comments { width: 330px; border-left: 1px solid var(--border); background: #fff; display: flex; flex-direction: column; min-height: 0; flex-shrink: 0; }
.nbc-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.nbc-top .btn-link { margin-left: auto; }
.nbc-filter { font-size: 11.5px; color: var(--text-muted); }
.nbc-list { flex: 1; overflow: auto; padding: 8px; }
.nbc-thread { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.nbc { font-size: 13px; }
.nbc.reply { margin: 6px 0 0 12px; padding-left: 8px; border-left: 2px solid #e2e8f0; }
.nbc.resolved { opacity: .65; }
.nbc-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.nbc-head > span { font-size: 11px; color: var(--text-muted); }
.nbc-done { color: #059669 !important; }
.nbc-acts { margin-left: auto; display: flex; gap: 2px; }
.nbc-acts button { border: 0; background: none; font-size: 11px; color: #64748b; padding: 0 3px; }
.nbc-acts button:hover { color: var(--brand); }
.nbc-quote { display: block; border: 0; background: #fef9c3; border-radius: 4px; font-size: 12px; color: #713f12; padding: 2px 6px; margin: 4px 0; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbc-body { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.nbc-edit { margin-top: 4px; }
.nbc-new { border-top: 1px solid var(--border); padding: 8px; }
.nbc-composer textarea { font-size: 13px; }
.nbc-composer-acts { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.nbc-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.nbc-anchor { font-size: 12px; background: #fef9c3; padding: 2px 6px; border-radius: 4px; margin-bottom: 4px; }
.nbc-anchor button { border: 0; background: none; font-size: 11px; color: #92400e; }

/* ── 휴지통 · 태그 모아보기 ── */
.nb-panel-view { overflow: auto; padding: 16px 20px; background: #fff; }
.nb-pv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nb-pv-head h5 { margin: 0; font-size: 17px; }
.nb-pv-head .nb-back { display: inline-block; }
.nb-pv-head .nb-trash-empty { margin-left: auto; }
.nb-pv-sub { font-size: 13px; color: var(--text-muted); margin: 16px 0 6px; }
.nb-trash-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; font-size: 13.5px; }
.nb-trash-acts { margin-left: auto; display: flex; gap: 4px; }
.nb-tag-page { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.nb-tag-ptitle { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.nb-tag-item { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.nb-tag-item:hover { background: #f1f5f9; }
.nb-tag-item.done .nb-tag-text { text-decoration: line-through; color: #94a3b8; }
.nb-tag-ico { width: 18px; text-align: center; flex-shrink: 0; font-weight: 700; }
.k-important .nb-tag-ico { color: #d97706; }
.k-question .nb-tag-ico { color: #7c3aed; }
.k-check .nb-tag-ico { color: #dc2626; }
.k-todo .nb-tag-ico { color: var(--brand); }
.nb-tag-text { flex: 1; min-width: 0; }
.nb-tag-who { font-size: 11px; color: #4338ca; white-space: nowrap; }

/* ── 템플릿 · 버전 · 비교 창 ── */
.nb-tpl h6 { font-size: 13px; color: var(--text-muted); }
.nb-tpl-item { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 14px; }
.nb-tpl-item:hover { border-color: var(--brand); background: #f5f7ff; }
.nb-tpl-row { display: flex; align-items: center; gap: 4px; }
.nb-tpl-row .nb-tpl-item { flex: 1; }
.nb-ver { display: flex; gap: 12px; min-height: 60vh; }
.nb-ver-list { width: 240px; flex-shrink: 0; overflow: auto; border-right: 1px solid var(--border); padding-right: 8px; }
.nb-ver-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.nb-ver-item small { display: block; color: var(--text-muted); font-size: 11px; }
.nb-ver-item.on { background: #eef2ff; }
.nb-ver-view { flex: 1; min-width: 0; overflow: auto; }
.nb-ver-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; }
.nb-ver-doc, .nb-side-doc { font-size: 14px; line-height: 1.6; }
.nb-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; text-align: left; }
.nb-side h6 { font-size: 13px; }
.nb-side-doc { border: 1px solid var(--border); border-radius: 6px; padding: 10px; max-height: 50vh; overflow: auto; }

/* ── 좁은 화면(모바일) — 목록 ↔ 페이지 ── */
@media (max-width: 767.98px) {
  .nb { display: flex; flex-direction: column; border-radius: 0; }
  .nb-unfold { display: none !important; }
  .nb-rail { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
  .nb-rail-head { display: none; }
  .nb-sections { display: flex; flex-direction: row; overflow: visible; padding: 6px; gap: 4px; flex: 0 0 auto; }
  .nb-sec { flex-shrink: 0; }
  .nb-sec .nb-more { visibility: visible; }
  .nb-add-sec { flex-shrink: 0; margin: 0 4px; }
  .nb-rail-foot { flex-direction: row; border-top: 0; flex-shrink: 0; }
  .nb-rail-foot button { white-space: nowrap; }
  .nb[data-rail="0"] .nb-rail, .nb[data-list="0"] .nb-list { display: flex; }
  .nb-list { border-right: 0; flex: 1; }
  .nb[data-mobile="list"] .nb-main { display: none; }
  .nb[data-mobile="page"] .nb-list, .nb[data-mobile="page"] .nb-rail { display: none !important; }
  .nb[data-mobile="page"] .nb-main { flex: 1; }
  .nb-back { display: inline-block; }
  .nb-sheet { margin: 0; padding: 16px 14px 48px; border-radius: 0; box-shadow: none; }
  .nb-title { font-size: 21px; }
  .nb-crumb span:not(:last-child), .nb-crumb i, .nb-editing-note { display: none; }
  /* 머리줄: 모드 버튼은 아이콘만, 버튼 사이를 줄여 페이지 제목 자리를 남긴다(예전엔 'De…' 처럼 두 글자만 보였다) */
  .nb-page-top { gap: 6px; padding: 6px 8px; }
  .nb-top-right { gap: 4px; }
  .nb-top-btn { padding: 0 7px; }
  .nb-mode-txt { display: none; }
  .nb-rb-panel { flex-wrap: nowrap; overflow-x: auto; }
  .nb-rb-grp { flex-shrink: 0; }
  .nb-comments { position: absolute; inset: 0 0 0 auto; width: 92%; z-index: 20; box-shadow: -8px 0 24px rgba(0, 0, 0, .15); }
  .nb-ver { flex-direction: column; }
  .nb-ver-list { width: auto; max-height: 30vh; border-right: 0; border-bottom: 1px solid var(--border); }
  .nb-side { grid-template-columns: 1fr; }
  /* 줄 높이는 펼침(▸)·⋯ 버튼이 정한다 — one-mobile.css 의 버튼 38px 에 위아래 9px 가 더해져 줄이 56px 로 벌어졌었다 */
  .nb-row { padding-top: 4px; padding-bottom: 4px; }
  .nb-row .nb-more { visibility: visible; }
  .nb-caret, .nb-more { min-height: 34px; }
  .nb-caret { width: 22px; }
  .nb-more { min-width: 30px; }
  .nb-list-title .nb-icon { display: none; }
}

/* ── 인쇄·PDF — 페이지 한 장만 ──
   note-page.js print() 가 이 페이지의 종이(.nb-sheet)를 body 바로 아래 .nb-print-root 에 복사한다. 인쇄할 땐 그것만 남기고 나머지는
   display:none(visibility:hidden 이면 숨긴 화면이 자리를 차지해 첫 장 위가 비고 장이 늘었다). 복사본은 화면에는 보이지 않는다. */
.nb-print-root { display: none; }
@media print {
  html.nb-printing, html.nb-printing body { height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; }
  html.nb-printing body { margin: 0 !important; padding: 0 !important; }
  html.nb-printing body > :not(.nb-print-root) { display: none !important; }
  html.nb-printing .nb-print-root { display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* 형광펜·글자 배경색도 화면처럼 */
  .nb-print-root .nb-sheet { margin: 0; padding: 0; max-width: none; min-height: 0; box-shadow: none; border-radius: 0; background: #fff; }
  .nb-print-title { font-size: 22px; font-weight: 600; line-height: 1.35; color: #111827; margin: 0; padding-bottom: 6px; border-bottom: 1px solid #94a3b8; word-break: break-word; }
  .nb-print-root .nb-doc { min-height: 0; }
  .nb-print-root .nb-img-tools, .nb-print-root .nfc-acts, .nb-print-root .nb-att-detach { display: none !important; }
  .nb-print-root img, .nb-print-root tr, .nb-print-root .note-file-card { break-inside: avoid; }
  .nb-print-root h1, .nb-print-root h2, .nb-print-root h3 { break-after: avoid; }
}