/* Block editor + database views (public/js/blocks/). Notion-like: quiet text, rounded pills, color only in tags. */
:root {
  --tg-default-bg: rgba(206, 205, 202, .5); --tg-default: #32302C;
  --tg-gray-bg: #E3E2E0; --tg-gray: #32302C; --tg-gray-dot: #91918E;
  --tg-brown-bg: #EEE0DA; --tg-brown: #442A1E; --tg-brown-dot: #A27763;
  --tg-orange-bg: #FADEC9; --tg-orange: #49290E; --tg-orange-dot: #CC782F;
  --tg-yellow-bg: #FDECC8; --tg-yellow: #402C1B; --tg-yellow-dot: #C29343;
  --tg-green-bg: #DBEDDB; --tg-green: #1C3829; --tg-green-dot: #548164;
  --tg-blue-bg: #D3E5EF; --tg-blue: #183347; --tg-blue-dot: #4A82C4;
  --tg-purple-bg: #E8DEEE; --tg-purple: #412454; --tg-purple-dot: #9A6DD7;
  --tg-pink-bg: #F5E0E9; --tg-pink: #4C2337; --tg-pink-dot: #C14C8A;
  --tg-red-bg: #FFE2DD; --tg-red: #5D1715; --tg-red-dot: #C4554D;
  --nb-callout: rgba(118, 118, 128, .09);
  --nb-code: rgba(118, 118, 128, .1);
  --nb-drop: #2383E2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tg-default-bg: #373737; --tg-default: rgba(255, 255, 255, .81);
    --tg-gray-bg: #5A5A5A; --tg-gray: rgba(255, 255, 255, .81); --tg-gray-dot: #9B9B9B;
    --tg-brown-bg: #603B2C; --tg-brown: rgba(255, 255, 255, .81); --tg-brown-dot: #BA856F;
    --tg-orange-bg: #854C1D; --tg-orange: rgba(255, 255, 255, .81); --tg-orange-dot: #C77D48;
    --tg-yellow-bg: #89632A; --tg-yellow: rgba(255, 255, 255, .81); --tg-yellow-dot: #CA9849;
    --tg-green-bg: #2B593F; --tg-green: rgba(255, 255, 255, .81); --tg-green-dot: #529E72;
    --tg-blue-bg: #28456C; --tg-blue: rgba(255, 255, 255, .81); --tg-blue-dot: #5E87C9;
    --tg-purple-bg: #492F64; --tg-purple: rgba(255, 255, 255, .81); --tg-purple-dot: #9D68D3;
    --tg-pink-bg: #69314C; --tg-pink: rgba(255, 255, 255, .81); --tg-pink-dot: #D15796;
    --tg-red-bg: #6E3630; --tg-red: rgba(255, 255, 255, .81); --tg-red-dot: #DF5452;
    --nb-callout: rgba(255, 255, 255, .055); --nb-code: rgba(255, 255, 255, .06);
  }
}
:root[data-theme="dark"] {
  --tg-default-bg: #373737; --tg-default: rgba(255, 255, 255, .81);
  --tg-gray-bg: #5A5A5A; --tg-gray: rgba(255, 255, 255, .81); --tg-gray-dot: #9B9B9B;
  --tg-brown-bg: #603B2C; --tg-brown: rgba(255, 255, 255, .81); --tg-brown-dot: #BA856F;
  --tg-orange-bg: #854C1D; --tg-orange: rgba(255, 255, 255, .81); --tg-orange-dot: #C77D48;
  --tg-yellow-bg: #89632A; --tg-yellow: rgba(255, 255, 255, .81); --tg-yellow-dot: #CA9849;
  --tg-green-bg: #2B593F; --tg-green: rgba(255, 255, 255, .81); --tg-green-dot: #529E72;
  --tg-blue-bg: #28456C; --tg-blue: rgba(255, 255, 255, .81); --tg-blue-dot: #5E87C9;
  --tg-purple-bg: #492F64; --tg-purple: rgba(255, 255, 255, .81); --tg-purple-dot: #9D68D3;
  --tg-pink-bg: #69314C; --tg-pink: rgba(255, 255, 255, .81); --tg-pink-dot: #D15796;
  --tg-red-bg: #6E3630; --tg-red: rgba(255, 255, 255, .81); --tg-red-dot: #DF5452;
  --nb-callout: rgba(255, 255, 255, .055); --nb-code: rgba(255, 255, 255, .06);
}

/* ---------- blocks ---------- */
.nb-doc:focus { outline: none; }
.nb-doc { position: relative; padding: 2px 0 40px; font-size: 16px; line-height: 1.5; color: var(--ink); min-height: 120px; } .ed-inner:has(.nb-doc) { max-width: 708px; } .nb + .nb { margin-top: 2px; }
.nb { position: relative; }
.nb-row { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 1px 0 1px 2px; border-radius: 4px; }
.nb-handle { position: absolute; left: -24px; top: 4px; width: 18px; height: 22px; display: grid; place-items: center; font-size: 12px; letter-spacing: -2px; color: var(--ink-3); cursor: grab; opacity: 0; border-radius: 4px; user-select: none; transition: opacity .12s; }
.nb-row:hover > .nb-handle, .nb-handle:focus { opacity: .8; }
.nb-handle:hover { background: var(--hover); }
@media (hover: none) { .nb-handle { opacity: .35; left: -20px; } }
.nb-text { flex: 1; min-width: 0; outline: none; white-space: pre-wrap; word-break: break-word; padding: 3px 2px; min-height: 1.6em; }
/* 쓰는 중 마크다운 기호(** ` ~~)는 숨겨요 — 글자는 남아 있어서 저장은 마크다운 그대로 */
.nb-mk { font-size: 0; letter-spacing: 0; }
.nb-text:empty::before { content: attr(data-ph); color: var(--ink-3); opacity: 0; pointer-events: none; }
.nb-text:focus:empty::before, .nb-paragraph:only-child .nb-text:empty::before { opacity: .55; }
.nb-doc.ro .nb-text:empty::before { content: none; }
.nb-text a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.nb-text a.wikilink { text-decoration-color: currentColor; font-weight: 550; }
.nb-text code { font: 85% var(--mono); background: var(--nb-code); color: #EB5757; padding: 1px 5px; border-radius: 4px; }
.nb-comment { font-size: 11px; color: var(--ink-3); opacity: .6; min-height: 0; padding: 0 2px; }
.nb-h1 > .nb-row .nb-text { font: 700 30px/1.25 var(--font); letter-spacing: -.02em; margin-top: 1.1em; }
.nb-h2 > .nb-row .nb-text { font: 650 23px/1.3 var(--font); letter-spacing: -.015em; margin-top: 1.1em; }
.nb-h3 > .nb-row .nb-text { font: 620 19px/1.35 var(--font); margin-top: .9em; }
.nb-h1 > .nb-row .nb-handle { top: 24px; } .nb-h2 > .nb-row .nb-handle { top: 18px; } .nb-h3 > .nb-row .nb-handle { top: 12px; }
.nb-fold > .nb-row .nb-tg { margin-top: 14px; }
.nb-kids { padding-left: 24px; }
.nb-mk { flex: 0 0 22px; height: 1.6em; margin-top: 3px; display: grid; place-items: center; color: var(--ink); font-size: 16px; line-height: 1; user-select: none; }
.nb-num { font-variant-numeric: tabular-nums; font-size: 15px; justify-content: end; padding-right: 2px; }
.nb-check { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: 0 0 16px; margin: 7px 4px 0 3px; border: 1.5px solid var(--ink-2); border-radius: 3px; cursor: pointer; display: grid; place-items: center; background: transparent; }
.nb-check:checked { background: #2383E2; border-color: #2383E2; }
.nb-check:checked::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.nb-todo.done > .nb-row .nb-text { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.nb-tg { border: 0; background: none; cursor: pointer; border-radius: 4px; color: var(--ink-2); width: 22px; height: 22px; transition: transform .15s; padding: 0; }
.nb-tg:hover { background: var(--hover); }
.nb.open > .nb-row .nb-tg { transform: rotate(90deg); }
.nb-empty-kid { border: 0; background: none; color: var(--ink-3); font-size: 14px; padding: 4px 2px; cursor: pointer; text-align: left; }
.nb-callout > .nb-row { background: var(--nb-callout); border-radius: 6px; padding: 12px 14px 12px 10px; margin: 4px 0; }
.nb-callout > .nb-kids { background: var(--nb-callout); border-radius: 0 0 6px 6px; margin-top: -10px; padding: 0 14px 10px 46px; }
.nb-icon { border: 0; background: none; font-size: 19px; cursor: pointer; border-radius: 4px; }
.nb-quote > .nb-row .nb-text { border-left: 3px solid var(--ink); padding-left: 14px; font-size: 17px; }
.nb-quote > .nb-kids { margin-left: 2px; border-left: 3px solid var(--ink); padding-left: 16px; }
.nb-body { flex: 1; min-width: 0; }
.nb-divider hr { border: 0; border-top: 1px solid var(--line-2); margin: 14px 0; }
.nb-codebox { position: relative; background: var(--nb-code); border-radius: 6px; margin: 4px 0; }
.nb-code { font: 13.5px/1.6 var(--mono); padding: 30px 16px 16px; margin: 0; overflow-x: auto; white-space: pre; tab-size: 2; }
.nb-lang { position: absolute; top: 6px; left: 12px; border: 0; background: none; color: var(--ink-3); font: 12px var(--font); width: 140px; outline: none; }
.nb-img { margin: 6px 0; }
.nb-img img { max-width: 100%; border-radius: 6px; display: block; }
.nb-cap { font-size: 13px; color: var(--ink-3); padding: 6px 2px; outline: none; }
.nb-cap:empty::before { content: attr(data-ph); opacity: .5; }
.nb-url { width: 100%; }
.nb-bm { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line-2); border-radius: 6px; padding: 10px 14px; margin: 4px 0; }
.nb-bm a { color: inherit; font-weight: 550; text-decoration: none; }
/* 노트에 올린 파일 카드 (PDF 는 미리보기 · 크게 보기) + 올리는 중 줄 */
.nb-body.nb-file { border: 1px solid var(--line-2); border-radius: 8px; margin: 4px 0; overflow: hidden; }
.nb-file-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 0; }
.nb-file-ic { font-size: 22px; line-height: 1; flex: none; }
.nb-file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nb-file-meta b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-file-meta small { color: var(--faint, #888); font-size: 12px; }
.nb-file-row .btn { flex: none; text-decoration: none; color: var(--ink); }
.nb-file-pdf { display: block; width: 100%; height: 260px; border: 0; border-top: 1px solid var(--line-2); background: #fff; }
.nb-body.nb-file.open .nb-file-pdf { height: min(80vh, 900px); }
.nb-up { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 8px; font-size: 13px; }
.nb-up-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-up-bar { flex: 0 0 30%; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.nb-up-bar i { display: block; height: 100%; width: 0; background: var(--accent, #3b82f6); transition: width .15s; }
.nb-up-pc { flex: none; width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .nb-file-pdf { height: 200px; } .nb-up-bar { flex-basis: 22%; } }
.nb-eq { font: 16px var(--mono); text-align: center; padding: 12px; border-radius: 6px; cursor: pointer; }
.nb-eq:hover { background: var(--hover); }
.nb-eq.empty { color: var(--ink-3); font-size: 14px; font-family: inherit; }
.nb-eq .katex-display { margin: 0; overflow-x: auto; overflow-y: hidden; }
.nb-eqsrc { display: block; width: 100%; font: 14px var(--mono); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--nb-callout); color: inherit; resize: vertical; outline: none; }
.nb-eqsrc:focus { border-color: var(--nb-drop); }
.nb-math { padding: 0 1px; }
/* 단 나누기: 각 단 사이 32px (안쪽 블록의 ⋮⋮ 손잡이 자리), 폰 폭에선 위아래로 쌓여요 */
.nb-cols { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0 32px; padding: 2px 0; }
.nb-col { min-width: 0; }
@media (max-width: 599px) { .nb-cols { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.nb-tablebox { overflow-x: auto; margin: 6px 0; }
.nb-table { border-collapse: collapse; font-size: 14px; min-width: 50%; }
.nb-table td { border: 1px solid var(--line-2); padding: 7px 10px; min-width: 110px; vertical-align: top; outline: none; }
.nb-table td:focus { box-shadow: inset 0 0 0 2px var(--nb-drop); }
.nb-table.has-head tr:first-child td { font-weight: 600; background: var(--nb-callout); }
.nb-tbtns { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .12s; }
.nb-tablebox:hover .nb-tbtns, .nb-tablebox:focus-within .nb-tbtns { opacity: 1; }
@media (hover: none) { .nb-tbtns { opacity: 1; } }
.nb-page .nb-pagelink { display: inline-flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 4px; color: inherit; text-decoration: none; }
.nb-page .nb-pagelink b { font-weight: 550; border-bottom: 1px solid var(--line-2); }
.nb-page .nb-pagelink:hover { background: var(--hover); }
.nb-db { margin: 8px 0; }
.nb-drop.side { opacity: .9; }
.nb-drop { position: absolute; height: 3px; background: var(--nb-drop); opacity: .7; border-radius: 2px; pointer-events: none; z-index: 3; }
.nb.dragging { opacity: .4; }
.nb-picked > .nb-row { background: rgba(35, 131, 226, .14); border-radius: 4px; }
.nb-box { position: fixed; z-index: 50; background: rgba(35, 131, 226, .12); border: 1px solid rgba(35, 131, 226, .6); pointer-events: none; }
.nb-menu { position: fixed; z-index: 90; width: 260px; max-height: 360px; overflow-y: auto; padding: 6px; border-radius: 10px; background: var(--paper-solid); box-shadow: 0 0 0 1px var(--line-2), 0 12px 32px -8px rgba(0, 0, 0, .45); }
.nb-menu-h { font-size: 11.5px; color: var(--ink-3); padding: 4px 8px 6px; font-weight: 600; }
.nb-menu button { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 5px 8px; border-radius: 6px; text-align: left; color: var(--ink); cursor: pointer; }
.nb-menu button[aria-selected="true"], .nb-menu button:hover { background: var(--hover); }
.nb-menu button b { display: block; font-weight: 500; font-size: 14px; }
.nb-menu button small { display: block; font-size: 12px; color: var(--ink-3); }
.nb-menu-ic { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nb-bmenu .nb-menu-ic { flex-basis: 24px; height: 24px; box-shadow: none; }
.nb-props { display: grid; gap: 4px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.nb-prop { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; min-height: 28px; }
.nb-prop-db { font-size: 12.5px; text-decoration: none; }

/* ---------- databases ---------- */
.db-host { font-size: 14px; }
.db-loading { padding: 10px 0; font-size: 13px; }
.db-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; margin-bottom: 6px; }
.db-title { font: 650 20px/1.3 var(--font); color: inherit; text-decoration: none; margin-right: 6px; flex-basis: 100%; }
.db-tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.db-tabs button { border: 0; background: none; color: var(--ink-3); padding: 5px 9px; border-radius: 6px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.db-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 6px 6px 0 0; }
.db-tabs button:hover { background: var(--hover); }
.db-new { white-space: nowrap; }
.db-scroll { overflow-x: auto; }
.db-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.db-table th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 13px; padding: 7px 8px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line); white-space: nowrap; }
.db-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: middle; height: 34px; }
.db-table tr > :last-child { border-right: 0; }
.db-table td.db-c { cursor: pointer; }
.db-table td.db-c:hover, .db-table td.db-name:hover { background: var(--hover); }
.db-name { min-width: 220px; }
.db-name .db-open { color: inherit; font-weight: 550; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.db-pi { color: var(--ink-3); margin-right: 6px; font-size: 12px; }
.db-addprop { width: 36px; }
.db-addp, .db-addview { border: 0; background: none; color: var(--ink-3); font-size: 16px; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.db-addp:hover, .db-addview:hover { background: var(--hover); }
.db-newrow { border: 0; background: none; color: var(--ink-3); padding: 7px 8px; width: 100%; text-align: left; border-radius: 6px; font-size: 14px; cursor: pointer; }
.db-newrow:hover { background: var(--hover); }
.db-rename { font: inherit; font-weight: 550; border: 0; outline: 2px solid var(--nb-drop); border-radius: 4px; padding: 2px 4px; background: transparent; color: inherit; width: 100%; }
.db-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 13.5px; line-height: 1; white-space: nowrap; margin: 1px 4px 1px 0; background: var(--tg-default-bg); color: var(--tg-default); }
.db-pill.st { border-radius: 999px; padding: 0 10px 0 8px; }
.db-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.db-pill.c-gray { background: var(--tg-gray-bg); color: var(--tg-gray); } .db-pill.c-gray .db-dot { background: var(--tg-gray-dot); }
.db-pill.c-brown { background: var(--tg-brown-bg); color: var(--tg-brown); } .db-pill.c-brown .db-dot { background: var(--tg-brown-dot); }
.db-pill.c-orange { background: var(--tg-orange-bg); color: var(--tg-orange); } .db-pill.c-orange .db-dot { background: var(--tg-orange-dot); }
.db-pill.c-yellow { background: var(--tg-yellow-bg); color: var(--tg-yellow); } .db-pill.c-yellow .db-dot { background: var(--tg-yellow-dot); }
.db-pill.c-green { background: var(--tg-green-bg); color: var(--tg-green); } .db-pill.c-green .db-dot { background: var(--tg-green-dot); }
.db-pill.c-blue { background: var(--tg-blue-bg); color: var(--tg-blue); } .db-pill.c-blue .db-dot { background: var(--tg-blue-dot); }
.db-pill.c-purple { background: var(--tg-purple-bg); color: var(--tg-purple); } .db-pill.c-purple .db-dot { background: var(--tg-purple-dot); }
.db-pill.c-pink { background: var(--tg-pink-bg); color: var(--tg-pink); } .db-pill.c-pink .db-dot { background: var(--tg-pink-dot); }
.db-pill.c-red { background: var(--tg-red-bg); color: var(--tg-red); } .db-pill.c-red .db-dot { background: var(--tg-red-dot); }
.db-cb { width: 16px; height: 16px; accent-color: #2383E2; cursor: pointer; }
.db-board { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px; align-items: flex-start; }
.db-col { flex: 0 0 260px; border-radius: 8px; padding: 6px; min-height: 80px; transition: background .12s; }
.db-col.over { background: var(--hover); }
.db-col > header { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px; }
.db-count { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.db-cards { display: grid; gap: 8px; }
.db-card { background: var(--paper-solid); border-radius: 8px; padding: 10px 12px; box-shadow: 0 0 0 1px var(--line-2), 0 2px 4px rgba(0, 0, 0, .12); display: grid; gap: 6px; cursor: grab; }
.db-card:hover { box-shadow: 0 0 0 1px var(--ink-3), 0 2px 6px rgba(0, 0, 0, .18); }
.db-card.dragging { opacity: .45; }
.db-card .db-open { color: inherit; text-decoration: none; }
.db-card .db-open b { font-weight: 600; font-size: 14px; }
.db-cp { font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; }
.db-pop { position: fixed; z-index: 95; width: 240px; max-height: 340px; overflow-y: auto; padding: 8px; border-radius: 10px; background: var(--paper-solid); box-shadow: 0 0 0 1px var(--line-2), 0 12px 32px -8px rgba(0, 0, 0, .45); }
.db-pop .input { width: 100%; margin-bottom: 6px; }
.db-opts { display: grid; gap: 1px; }
.db-opts button, .db-clear { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; padding: 5px 6px; border-radius: 6px; text-align: left; cursor: pointer; color: var(--ink); font-size: 14px; width: 100%; }
.db-opts button:hover, .db-clear:hover { background: var(--hover); }
.db-opts button[hidden] { display: none; }
.db-tick { color: var(--ink-3); }
.db-clear { color: var(--ink-3); margin-top: 4px; }
@media (max-width: 640px) {
  .nb-kids { padding-left: 20px; }
  .nb-h1 > .nb-row .nb-text { font-size: 26px; }
  .db-col { flex: 1 0 104px; padding: 4px; } .db-board { gap: 6px; } .db-card { padding: 8px; }
  .nb-prop { grid-template-columns: 110px 1fr; }
}

/* keep wide tables/boards scrolling inside, never the page */
.ed-inner > * { min-width: 0; }
.db-host, .db-view, .nb-body { min-width: 0; max-width: 100%; }

/* ---------- colors (schema v2): inline <span class=c-X> / <mark class=bg-X>, block props.color ---------- */
:root { --hl-gray: #F1F1EF; --hl-brown: #F4EEEE; --hl-orange: #FBECDD; --hl-yellow: #FBF3DB; --hl-green: #EDF3EC; --hl-blue: #E7F3F8; --hl-purple: #F6F3F9; --hl-pink: #FAF1F5; --hl-red: #FDEBEC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl-gray: #2F2F2F; --hl-brown: #4A3228; --hl-orange: #5C3B23; --hl-yellow: #564328; --hl-green: #243D30; --hl-blue: #143A4E; --hl-purple: #3C2D49; --hl-pink: #4E2C3C; --hl-red: #522E2A; } }
:root[data-theme="dark"] { --hl-gray: #2F2F2F; --hl-brown: #4A3228; --hl-orange: #5C3B23; --hl-yellow: #564328; --hl-green: #243D30; --hl-blue: #143A4E; --hl-purple: #3C2D49; --hl-pink: #4E2C3C; --hl-red: #522E2A; }
.nb-doc .c-gray, .md .c-gray, .nb-doc .nb-color-gray > .nb-row .nb-text { color: var(--tg-gray-dot); }
.nb-doc mark.bg-gray, .md mark.bg-gray { background: var(--hl-gray); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-gray > .nb-row { background: var(--hl-gray); border-radius: 4px; }
.nb-doc .c-brown, .md .c-brown, .nb-doc .nb-color-brown > .nb-row .nb-text { color: var(--tg-brown-dot); }
.nb-doc mark.bg-brown, .md mark.bg-brown { background: var(--hl-brown); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-brown > .nb-row { background: var(--hl-brown); border-radius: 4px; }
.nb-doc .c-orange, .md .c-orange, .nb-doc .nb-color-orange > .nb-row .nb-text { color: var(--tg-orange-dot); }
.nb-doc mark.bg-orange, .md mark.bg-orange { background: var(--hl-orange); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-orange > .nb-row { background: var(--hl-orange); border-radius: 4px; }
.nb-doc .c-yellow, .md .c-yellow, .nb-doc .nb-color-yellow > .nb-row .nb-text { color: var(--tg-yellow-dot); }
.nb-doc mark.bg-yellow, .md mark.bg-yellow { background: var(--hl-yellow); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-yellow > .nb-row { background: var(--hl-yellow); border-radius: 4px; }
.nb-doc .c-green, .md .c-green, .nb-doc .nb-color-green > .nb-row .nb-text { color: var(--tg-green-dot); }
.nb-doc mark.bg-green, .md mark.bg-green { background: var(--hl-green); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-green > .nb-row { background: var(--hl-green); border-radius: 4px; }
.nb-doc .c-blue, .md .c-blue, .nb-doc .nb-color-blue > .nb-row .nb-text { color: var(--tg-blue-dot); }
.nb-doc mark.bg-blue, .md mark.bg-blue { background: var(--hl-blue); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-blue > .nb-row { background: var(--hl-blue); border-radius: 4px; }
.nb-doc .c-purple, .md .c-purple, .nb-doc .nb-color-purple > .nb-row .nb-text { color: var(--tg-purple-dot); }
.nb-doc mark.bg-purple, .md mark.bg-purple { background: var(--hl-purple); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-purple > .nb-row { background: var(--hl-purple); border-radius: 4px; }
.nb-doc .c-pink, .md .c-pink, .nb-doc .nb-color-pink > .nb-row .nb-text { color: var(--tg-pink-dot); }
.nb-doc mark.bg-pink, .md mark.bg-pink { background: var(--hl-pink); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-pink > .nb-row { background: var(--hl-pink); border-radius: 4px; }
.nb-doc .c-red, .md .c-red, .nb-doc .nb-color-red > .nb-row .nb-text { color: var(--tg-red-dot); }
.nb-doc mark.bg-red, .md mark.bg-red { background: var(--hl-red); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-doc .nb-bg-red > .nb-row { background: var(--hl-red); border-radius: 4px; }
.nb-doc mark:not([class]) { background: var(--hl-yellow); color: inherit; }
.nb-sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 2px 4px 6px; }
.nb-sw button { width: 100%; height: 28px; border: 0; border-radius: 6px; cursor: pointer; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--hover); padding: 0; }
.nb-tb { position: fixed; z-index: 92; display: flex; gap: 2px; padding: 4px; border-radius: 8px; background: var(--paper-solid); box-shadow: 0 0 0 1px var(--line-2), 0 8px 24px -8px rgba(0,0,0,.45); }
.nb-tb > button { border: 0; background: none; color: var(--ink); min-width: 30px; height: 28px; border-radius: 5px; cursor: pointer; font-size: 14px; padding: 0 6px; }
.nb-tb > button:hover { background: var(--hover); }
.nb-tb .nb-sw { position: absolute; top: 38px; right: 0; width: 220px; background: var(--paper-solid); border-radius: 8px; box-shadow: 0 0 0 1px var(--line-2), 0 8px 24px -8px rgba(0,0,0,.45); padding: 6px; }
.nb-sw .c-gray { color: var(--tg-gray-dot); }
.nb-sw .c-brown { color: var(--tg-brown-dot); }
.nb-sw .c-orange { color: var(--tg-orange-dot); }
.nb-sw .c-yellow { color: var(--tg-yellow-dot); }
.nb-sw .c-green { color: var(--tg-green-dot); }
.nb-sw .c-blue { color: var(--tg-blue-dot); }
.nb-sw .c-purple { color: var(--tg-purple-dot); }
.nb-sw .c-pink { color: var(--tg-pink-dot); }
.nb-sw .c-red { color: var(--tg-red-dot); }

/* ---------- db v2: filter · sort · group · menus ---------- */
.db-tools { display: flex; gap: 2px; align-items: center; margin-left: auto; }
.db-tool { border: 0; background: none; color: var(--ink-3); font-size: 13.5px; padding: 4px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.db-tool:hover { background: var(--hover); }
.db-tool.on { color: #2383E2; }
.db-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.db-chip { border: 1px solid rgba(35, 131, 226, .45); color: #2383E2; background: rgba(35, 131, 226, .08); border-radius: 999px; font-size: 12.5px; padding: 2px 10px; cursor: pointer; }
.db-chip b { font-weight: 600; }
.db-grow td { border-right: 0 !important; padding-top: 14px !important; height: auto; }
.db-grow .db-count { margin-left: 6px; }
.db-ph { cursor: pointer; } .db-ph:hover { background: var(--hover); }
.db-pop.wide { width: 340px; }
.db-sub { font-size: 12px; margin: 6px 2px 4px; }
.db-olist { display: grid; gap: 4px; }
.db-orow, .db-frow { display: flex; gap: 6px; align-items: center; }
.db-orow .db-pill { flex: 1; justify-content: flex-start; overflow: hidden; }
.db-ocol, .db-frow select, .db-frow .input { font: 13px var(--font); background: var(--hover); color: var(--ink); border: 0; border-radius: 6px; padding: 4px 6px; min-width: 0; }
.db-frow { margin-bottom: 6px; } .db-frow > * { flex: 1; } .db-frow .db-x { flex: 0 0 24px; }
.db-x { border: 0; background: none; color: var(--ink-3); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 16px; }
.db-x:hover { background: var(--hover); color: var(--ink); }
.db-danger { border: 0; background: none; color: var(--err); padding: 6px; border-radius: 6px; width: 100%; text-align: left; margin-top: 6px; cursor: pointer; font-size: 14px; }
.db-danger:hover { background: var(--hover); } .db-danger[disabled] { opacity: .4; cursor: default; }
.touch-lift { transform: scale(1.03); box-shadow: 0 0 0 2px #2383E2, 0 10px 24px -6px rgba(0,0,0,.5) !important; }
body.touch-dragging { user-select: none; -webkit-user-select: none; }
.nb-handle, .db-card { -webkit-touch-callout: none; }
@media (max-width: 640px) { .db-tools { margin-left: 0; width: 100%; } .db-tools .db-new { margin-left: auto; } }

/* backlinks */
.bl-count { color: var(--ink-3); text-decoration: none; font-size: 12px; }
.bl-count:hover { color: var(--ink); }
#ed-back-list a { display: grid; gap: 2px; }
#ed-back-list mark { background: var(--hl-yellow); color: inherit; border-radius: 3px; padding: 0 2px; }
.nb-tb .nb-sw { border-radius: 8px 8px 0 0; } .nb-tb .nb-sw + .nb-sw { top: 110px; border-radius: 0 0 8px 8px; box-shadow: 0 0 0 1px var(--line-2); }
/* 페이지 기록 패널 */
.vh-panel { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(440px, calc(100vw - 24px)); z-index: 60; display: flex; flex-direction: column; overflow: hidden; background: var(--panel); }
.vh-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.vh-list { display: grid; gap: 2px; padding: 8px; max-height: 38%; overflow: auto; flex-shrink: 0; }
.vh-item { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 0; background: none; color: var(--ink); font-size: 13px; cursor: pointer; }
.vh-item:hover, .vh-item.on { background: var(--line); }
.vh-add { color: #2f9e44; } .vh-del { color: #e03131; }
.vh-prev { flex: 1; overflow: auto; border-top: 1px solid var(--line); padding: 10px 14px; }
.vh-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; position: sticky; top: -10px; background: var(--panel); padding: 6px 0; z-index: 1; }
.vh-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* 글씨 크기: 글자(.fs-*) · 블록(.nb-fs-*) · 문서 전체(.nb-doc-*, 일기) */
.fs-s { font-size: .85em; }
.fs-l { font-size: 1.3em; }
.fs-xl { font-size: 1.7em; line-height: 1.3; }
.nb-fs-s > .nb-row .nb-text { font-size: .85em; }
.nb-fs-l > .nb-row .nb-text { font-size: 1.3em; }
.nb-fs-xl > .nb-row .nb-text { font-size: 1.7em; line-height: 1.3; }
.nb-doc-s { font-size: 14px; }
.nb-doc-l { font-size: 18px; }
.nb-doc-xl { font-size: 21px; }
.nb-tb-sep { width: 1px; margin: 3px 3px; background: var(--line-2); }
.nb-tb [data-fs] { font-size: 12px; padding: 0 6px; white-space: nowrap; }
.nb-sizes { display: flex; gap: 2px; padding: 6px 4px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.nb-sizes button { flex: 1; font-size: 12px; padding: 5px 4px; border-radius: 6px; white-space: nowrap; }
.nb-sizes button[aria-pressed="true"] { background: var(--glass-2); font-weight: 600; }
/* 이미지: 크기 손잡이 · 올리기 버튼 */
.nb-imgbox { position: relative; display: inline-block; max-width: 100%; }
.nb-imgbox img { width: 100%; }
.nb-resize { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 4px; background: var(--paper-solid); box-shadow: 0 0 0 1px var(--line-2); cursor: nwse-resize; opacity: 0; transition: opacity .15s; touch-action: none; }
.nb-img:hover .nb-resize, .nb-resize:active { opacity: 1; }
.nb-pick { margin-bottom: 6px; }
.nb-sizes button { border: 0; background: none; color: var(--ink); cursor: pointer; }
.nb-sizes button:hover { background: var(--hover); }