/* 글 편집기가 앉는 자리.
 *
 * 편집기 자체(블록·도구막대·슬래시 메뉴)의 모양은 BlockNote 가 제 css 로 들고 온다
 * (`/static/vendor/editor/editor.css`). 여기 있는 것은 그것을 **우리 화면에 맞춰
 * 다듬는** 규칙뿐이다 — 글꼴·색·여백·줄간격.
 *
 * 다듬는 값은 claude-notion 이 같은 편집기를 길들여 둔 것을 따랐다. 브라우저 기본값이
 * 우리 본문 글씨(400) 옆에서 지나치게 무거워 보이는 자리들이 있다.
 */

.editor { position: relative; padding-bottom: 40px; }
/* 제목과 본문 사이. 제목(.title-row)은 아래 여백이 없어 본문 첫 줄이 제목에
   붙어 있었다 — 한 숨 띄워야 «제목» 과 «글» 로 갈라 읽힌다. */
.editor.doc { margin-top: 26px; }
@media (max-width: 720px) { .editor.doc { margin-top: 16px; } }

/* 편집기는 제 바탕과 글꼴을 들고 온다 — 우리 것으로 돌려놓는다. */
.editor .bn-container {
  background: transparent;
  font-family: inherit;
  color: var(--text);
}
.editor .bn-editor { background: transparent; padding-inline: 0; }

/* 굵게는 **600**. 브라우저 기본 700 은 본문(400) 옆에서 너무 튄다. */
.editor .bn-editor strong,
.editor .bn-editor b { font-weight: 600; }

/* 제목도 한 눈금 낮춘다. 글자 사이를 살짝 좁혀 큰 글씨가 벌어져 보이지 않게. */
.editor .bn-editor h1,
.editor .bn-editor h2,
.editor .bn-editor h3 {
  font-family: inherit; font-weight: 600;
  letter-spacing: -0.012em; color: inherit; border: 0;
}

/* 본문·목록 줄간격. 1.6 이면 한글이 답답하지 않다. */
.editor .bn-editor [data-content-type="paragraph"],
.editor .bn-editor [data-content-type="bulletListItem"],
.editor .bn-editor [data-content-type="numberedListItem"],
.editor .bn-editor [data-content-type="checkListItem"] {
  font-family: inherit; color: var(--text); line-height: 1.6;
}

/* 인용·코드는 우리 색을 쓴다. */
.editor .bn-editor blockquote {
  border-left: 3px solid var(--border-strong); color: var(--text-2);
}
.editor .bn-editor code,
.editor .bn-editor [data-content-type="codeBlock"] {
  background: var(--bg-subtle); border-radius: var(--radius);
}
/* BlockNote 는 코드 블록을 어두운 상자(#161616 · 흰 글자)로 그린다. 우리는 밝은
   바탕을 쓰니 글자색까지 되돌려야 한다 — 배경만 바꿔 두면 흰 글자가 흰 바탕에
   얹혀 글이 사라진다. 색칠(Shiki)도 밝은 테마로 맞춰 둔다(editor/src/blocks/codeBlock.js). */
.editor .bn-editor [data-content-type="codeBlock"] {
  color: var(--text); border: 1px solid var(--border);
}
.editor .bn-editor [data-content-type="codeBlock"] > pre {
  padding: 22px 16px 14px; font-size: 13px; line-height: 1.55;
}
/* 언어 고르는 칸 — 어두운 상자에 맞춰 흰색으로 박혀 있다. */
.editor .bn-editor [data-content-type="codeBlock"] > div > select {
  color: var(--text-2); left: 10px; top: 5px;
}

/* ── 글 모양은 **어느 자리에서나 같다** (2026-10-20) ─────────────────────
   같은 편집기가 공지·미팅 노트·개인노트·떠 있는 노트 창에 붙는다. 예전에는 `###` 의
   파랑 밑줄이 미팅 노트에만, 링크 색이 개인노트에만 있어서 같은 마크다운이 자리마다
   다르게 보였다. 글 모양은 여기 `.editor .bn-editor` 아래에만 적는다 — 자리(상자)마다
   다른 것은 상자의 여백뿐이다 (app.css 의 `.mn-body` · `.np-body` · `.page`).

   제목 크기 — BlockNote 기본(# 3em = 48px)은 글 제목(40px)보다 커서 위계가 뒤집혔다.
   «글 제목 40 > # 30 > ## 24 > ### 20.8» 로 한 눈금씩. `###` 은 쓰던 크기 그대로다.
   `#` 은 BlockNote 가 **기본값이라 `data-level` 을 아예 안 단다** — 속성 없는 제목도 1 로 본다. */
.editor .bn-editor [data-content-type="heading"]:is([data-level="1"], :not([data-level])) { --level: 1.875em; }
.editor .bn-editor [data-content-type="heading"][data-level="2"] { --level: 1.5em; }
.editor .bn-editor [data-content-type="heading"][data-level="3"] { --level: 1.3em; }
/* `###` 은 글 안의 꼭지다 — «미팅 노트»·«TODO» 머리글과 같은 파랑에 회색 밑줄을 그어
   저절로 갈래가 나뉘게 한다 (밑줄을 따로 `---` 로 긋지 않아도). */
.editor .bn-editor [data-content-type="heading"][data-level="3"] {
  color: var(--heading2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
/* 링크는 어디서나 링크로 보여야 한다 — 전역 `a` 가 색과 밑줄을 지워 두어(app.css),
   공지·미팅 노트의 링크는 그냥 글자처럼 보였다. */
.editor .bn-editor a {
  color: var(--text-blue, var(--accent)); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px; cursor: pointer;
}

/* 미팅 노트 상자 안에서는 위아래 숨을 줄인다 — 상자의 여백이지 글 모양이 아니다. */
.mn-body .bn-editor { padding-block: 4px; }

/* ── 위아래 숨 (claude-notion 이 잡아 둔 값) ─────────────────────────
   BlockNote 는 블록마다 `.bn-block-outer` 로 감싼다. 바깥 껍데기에 여백을 주면
   **블록 사이만** 벌어지고 안쪽 자식은 그대로다.
   제목은 위를 크게 띄우고 아래는 조금만 — 제목이 아래 글에 붙어 있어야 «무엇에
   대한 제목» 인지 읽힌다. 앞서 제목 밑이 답답했던 것이 이 값이 없어서였다. */
.editor .bn-block-outer { margin-top: 0.4em; }
.editor .bn-block-outer:first-child { margin-top: 0; }
.editor .bn-block-outer:has([data-content-type="heading"]) { margin-top: 1.8em; }
.editor .bn-block-outer:has([data-content-type="heading"]:is([data-level="1"], :not([data-level]))) { margin-top: 2.2em; }
/* 맨 위 제목은 글 제목 바로 아래라 그만큼 띄우지 않는다. */
.editor .bn-block-outer:has([data-content-type="heading"]):first-child { margin-top: 0.4em; }
.editor .bn-editor [data-content-type="heading"] { margin-bottom: 0.4em; }

/* ── 여러 블록 선택 ──────────────────────────────────────────────────
   끌어서 여러 블록을 고르면 플러그인이 `bn-block-selected` 를 붙인다
   (editor/src/features/multiBlockHighlight.js). 칠하는 일은 여기서 한다 — 글자만 칠하는
   브라우저 기본 하이라이트로는 «어디까지 골랐는지» 가 보이지 않는다. */
.editor .bn-block-selected,
.editor .bn-block-selected > .bn-block-content {
  background: rgba(35, 131, 226, .16); border-radius: 4px;
}
/* 블록을 통째로 칠했으니 글자 하이라이트는 겹치지 않게 지운다. */
.editor .bn-block-selected ::selection { background: transparent; }

/* ── 뜨는 메뉴 (슬래시 · @ 멘션) ──────────────────────────────────────
   기본 팝업이 글자 폭만큼만 좁게 뜨고 바탕이 비쳐 보였다. 우리 대화상자와 같은
   모양으로 맞춘다 — 너비를 넉넉히 주고, 불투명 바탕과 그림자를 얹는다. */
.bn-suggestion-menu {
  min-width: 260px; max-width: 340px; padding: 6px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.bn-suggestion-menu-item {
  padding: 7px 9px; border-radius: var(--radius); font-size: 14px;
}
.bn-suggestion-menu-item[aria-selected="true"] { background: var(--bg-hover); }
/* 아이디는 이름 아래 작은 글씨로 — 같은 이름이 둘일 때 가리는 값이다. */
.bn-suggestion-menu-item .bn-mt-subtext { font-size: 12px; color: var(--text-3); }

/* ── 수식 ($E=mc^2$) ────────────────────────────────────────────────
   KaTeX 가 그린다. 홑 달러는 글줄 위에 앉고, 겹 달러는 제 줄을 차지한다. */
.editor .math-chip { display: inline-block; vertical-align: baseline;
  padding: 0 2px; user-select: text; }
.editor .math-chip-display { display: block; text-align: center; margin: 0.4em 0;
  /* 넓은 수식은 **제 안에서** 옆으로 민다 — 아니면 폰에서 화면 전체가 옆으로 밀렸다. */
  max-width: 100%; overflow-x: auto; overflow-y: hidden; }
/* KaTeX 가 오기 전이거나 수식이 틀렸으면 글자를 그대로 보여 준다 — 그때만
   «수식 자리» 임을 알 수 있게 옅게 칠한다. */
.editor .math-chip:not(:has(.katex)) {
  background: var(--bg-subtle); border-radius: 3px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .92em;
}

/* ── 접히는 불릿 ────────────────────────────────────────────────────
   자식이 있는 불릿의 점을 누르면 접힌다 (editor/src/blocks/collapsibleBullet.js).
   점은 BlockNote 가 css 의 `::before` 로 그린다 — 가짜 요소라 누를 수 없으니
   같은 자리에 단추를 겹쳐 놓고, 화살표가 보일 때는 원래 점을 숨긴다. */
.editor .bn-block:has(> .bn-block-content > .bn-toggle-wrapper[data-show-children="false"])
  > .bn-block-group { display: none !important; }
/* **줄 폭을 다 쓴다.** 접는 단추를 위해 감싼 이 상자는 flex 줄의 한 칸이라 기본값이면
   글 폭만큼만 넓다 — 빈 불릿에서는 0 이 되어, 그 안에 `position:absolute` 로 뜨는
   자리 글(«목록») 이 한 글자씩 세로로 꺾여 보였다 (2026-10-14). */
.editor .bullet-toggle { position: relative; display: block; flex: 1; min-width: 0; }
.editor .bullet-toggle .bn-inline-content::before { white-space: nowrap; }
.editor .bullet-toggle-dot {
  position: absolute; top: .18em; left: -28px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; background: transparent; border-radius: 4px;
  color: var(--text-3); cursor: default; z-index: 1;
  transition: background-color .12s ease;
}
.editor .bullet-toggle-dot svg {
  width: 12px; height: 12px; opacity: 0; pointer-events: none;
  transition: transform .15s ease, opacity .1s ease;
}
/* 자식이 있을 때만 누를 수 있다 (`.bn-block-group` 이 자식 묶음이다). */
.editor .bn-block:has(> .bn-block-group) .bullet-toggle-dot { cursor: pointer; }
.editor .bn-block:has(> .bn-block-group) .bullet-toggle-dot:hover {
  background: var(--bg-hover); color: var(--text);
}
/* 화살표는 «자식이 있고, 손을 얹었거나 접혀 있을 때» 보인다 — 접힌 것은
   손을 떼도 보여야 무엇이 숨어 있는지 알 수 있다. */
.editor .bn-block:has(> .bn-block-group) .bullet-toggle-dot:hover svg,
.editor .bn-block:has(> .bn-block-content > .bn-toggle-wrapper[data-show-children="false"])
  .bullet-toggle-dot svg { opacity: 1; }
.editor .bn-toggle-wrapper[data-show-children="true"] .bullet-toggle-dot svg {
  transform: rotate(90deg);
}
.editor .bn-block:has(> .bn-block-group):has(.bullet-toggle-dot:hover)
  > .bn-block-content::before,
.editor .bn-block:has(> .bn-block-content > .bn-toggle-wrapper[data-show-children="false"])
  > .bn-block-content::before { visibility: hidden; }

/* ── 원문 마크다운 보기 (Ctrl+/) ─────────────────────────────────────
   편집기 자리에 그대로 겹쳐 놓는다 — 같은 글의 다른 얼굴이므로 자리를 옮기면
   무엇을 보고 있는지 헷갈린다. */
.raw-md { display: flex; flex-direction: column; gap: 8px; }
.raw-md-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.raw-md-hint { flex: 1; min-width: 200px; color: var(--text-3); font-size: 12.5px; }
.raw-md-text {
  width: 100%; min-height: 60dvh; resize: vertical;
  padding: 14px 16px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-subtle); color: var(--text);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px; line-height: 1.6; tab-size: 2;
}
.raw-md-text:focus { outline: 2px solid var(--accent-soft, var(--border-strong)); }

/* ── @멘션 칩 ───────────────────────────────────────────────────────
   참여자 칩(app.css 의 `pm-chip`)을 그대로 쓴다 — 프로젝트 참여자, 할 일의
   «누구», 글 속 멘션이 어디서나 같은 모양이어야 한 사람으로 읽힌다.
   글줄 사이에 앉으므로 높이만 조금 줄이고 가운데에 맞춘다. */
.editor .mention {
  vertical-align: baseline; margin: 0 2px; cursor: default;
  height: 21px; padding: 0 8px 0 2px; user-select: none;
  /* 폰에서도 21px 그대로 — 글줄 안에 앉는 것이라 과녁이 아니다 (app.css 의
     `@media (hover: none)` 참고). 거기서 한 번 44px 이 된 적이 있어 못박아 둔다. */
  min-height: 0;
}
.editor .mention .pm-dot { width: 17px; height: 17px; flex: 0 0 17px; font-size: 10px; }
.editor .mention .pm-name { font-size: 12.5px; }
/* 고른 자리·커서가 지나갈 때 칩이 통째로 걸린 것이 보이게. */
.editor .mention.ProseMirror-selectednode { box-shadow: inset 0 0 0 2px var(--accent, #2383e2); }

/* 저장이 밀려 있을 때 글 위에 뜨는 띠 (js/docedit.js).
   조용히 실패하면 사람은 «저장됐겠지» 하고 창을 닫는다 — 그 한 번이 글을 잃는다. */
.doc-unsaved {
  margin: 8px 0; padding: 8px 12px; border-radius: var(--radius);
  background: rgba(229, 72, 77, .08);
  box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .28);
  color: #b4272b; font-size: 12.5px;
}

/* ── 토글 (`> `) ──────────────────────────────────────────────────────
   toggleItem.js. 불릿 토글과 같은 단추·같은 펴기 규칙을 쓰되, 화살표가 **늘 보이고**
   언제나 누를 수 있다 (빈 토글을 누르면 안에 쓸 줄이 생긴다). 불릿의 점 자리만큼
   글을 들여 화살표가 앉을 자리를 만든다. */
.editor [data-content-type="toggleListItem"] { padding-left: 26px; }
.editor .toggle-item-arrow { left: -26px; cursor: pointer; color: var(--text-2); }
.editor .toggle-item-arrow:hover { background: var(--bg-hover); color: var(--text); }
.editor .toggle-item-arrow svg { opacity: 1; }
/* 안이 빈 토글은 펴 둘 것이 없다 — 화살표를 닫힌 모양(▸)으로 둔다. */
.editor .bn-block:not(:has(> .bn-block-group))
  > .bn-block-content .toggle-item[data-show-children="true"] .toggle-item-arrow svg { transform: none; }

/* ── 폰에서의 편집기 (2026-10-20 모바일 점검) ───────────────────────────── */
@media (max-width: 720px) {
  /* 글자 고르면 뜨는 서식 막대 — 360px 에서 375px 라 오른쪽 링크 단추가 잘렸다. 제 안에서 민다. */
  .bn-formatting-toolbar {
    max-width: calc(100vw - 16px); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  }
}
/* 손가락 기기: 블록 왼쪽 손잡이(⋮⋮ · ＋)는 맨 바깥 블록에서 화면 밖(-24px)에 반쯤 걸렸다.
   폰에서는 끌어 옮기기를 쓰기 어렵고 ＋ 는 `/` 로 대신한다 — 감춘다. */
@media (hover: none) and (max-width: 720px) {
  .editor .bn-side-menu { display: none !important; }
  /* 목록·토글 화살표는 22px — 닿는 자리만 넓힌다 (보이는 크기는 그대로). */
  .editor .bullet-toggle-dot::after { content: ''; position: absolute; inset: -9px; }
  /* `/` 메뉴 오른쪽의 ⌘ 단축키 표 — 폰에는 ⌘ 가 없다. 자리만 먹으니 감춘다. */
  .bn-mt-suggestion-menu-item-section .mantine-Badge-root { display: none; }
}

/* ── 그림·파일 블록 (2026-10-29) ─────────────────────────────────────────
   파일: 아이콘·이름을 누르면 받는다, 이름을 두 번 누르면 이름 바꾸기 (editor/src/features/mediaClick.js).
   그림: 두 번 누르면 크게 보기. */
/* 손가락 커서·밑줄은 누르면 받는 자리(아이콘·이름)에만. 줄의 빈 곳은 고르기라 기본 커서
   (BlockNote 는 파일 줄 전체에 pointer 를 준다). */
.editor .bn-editor [data-file-block] .bn-file-block-content-wrapper { cursor: default; }
.editor .bn-editor [data-file-block] .bn-add-file-button { cursor: pointer; }
.editor .bn-editor .bn-file-name-with-icon { width: fit-content; }
.editor .bn-editor .bn-file-name-with-icon .bn-file-icon,
.editor .bn-editor .bn-file-name-with-icon .bn-file-name { cursor: pointer; }
.editor .bn-editor .bn-file-name-with-icon .bn-file-name:hover { text-decoration: underline; }
/* 소리: 재생 막대가 줄 너비를 다 먹어 블록을 누를 자리가 없었다 — 막대를 줄여 오른쪽 빈 곳을
   누르면 블록이 골라지게 한다 (데스크톱). */
.editor .bn-editor [data-content-type="audio"] audio { width: min(100%, 420px); }
.editor .bn-editor img.bn-visual-media { cursor: zoom-in; }
/* 올리는 중 — BlockNote 가 «Loading...» 을 박아 넣는다 (사전에 없다). 글자만 갈아 끼운다. */
.editor .bn-editor .bn-file-loading-preview { font-size: 0; }
.editor .bn-editor .bn-file-loading-preview::after {
  content: '올리는 중…'; font-size: 14px; color: var(--text-2);
}

/* 이름 바꾸기 칸 — 편집기 DOM 밖(body)에 그 블록의 이름 자리를 따라 겹쳐 뜬다 (ui/rename.js).
   16px 아래면 아이폰이 칸에 들어갈 때 화면을 키운다. */
.lab-rename {
  position: fixed; z-index: 3500; transform: translateY(-50%);
  height: 30px; padding: 0 6px; font: 16px/1 var(--font); color: var(--text);
  background: var(--bg); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-md); outline: none;
}

/* 그림 크게 보기 (ui/lightbox.js) — 편집기 막대(3000)·떠 있는 노트 창·팝오버(10000)보다 위. */
.lab-lightbox {
  position: fixed; inset: 0; z-index: 20000; background: rgba(15, 15, 15, 0.92);
  display: flex; flex-direction: column; touch-action: pinch-zoom;
}
.lab-lightbox-stage {
  flex: 1; min-height: 0; overflow: hidden; display: flex;
  align-items: center; justify-content: center; padding: 48px 16px 8px;
}
.lab-lightbox-img {
  max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in;
  background: #fff; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); user-select: none;
}
/* 원래 크기 — 넘친 만큼 스크롤(끌어 옮기기). 가운데 맞춤을 풀어야 왼쪽 위가 잘리지 않는다. */
.lab-lightbox.is-full .lab-lightbox-stage { overflow: auto; display: block; padding: 48px 0 0; cursor: grab; }
.lab-lightbox.is-full .lab-lightbox-img { max-width: none; max-height: none; cursor: zoom-out; margin: 0 auto; display: block; }
.lab-lightbox-bar {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 6px;
}
.lab-lightbox-btn {
  height: 32px; min-width: 32px; padding: 0 10px; border: 0; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.14); color: #fff; font: 14px var(--font); cursor: pointer;
}
.lab-lightbox-btn:hover { background: rgba(255, 255, 255, 0.26); }
/* 폰: 단추 막대가 노치·상태 표시줄(safe-area)에 걸리지 않게, 그림은 막대 아래에서 시작한다. */
@media (max-width: 720px) {
  .lab-lightbox-bar { top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 8px); }
  .lab-lightbox-stage { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); }
  .lab-lightbox.is-full .lab-lightbox-stage { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); }
  .lab-lightbox-caption { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
}
.lab-lightbox-caption {
  padding: 8px 16px 14px; text-align: center; color: rgba(255, 255, 255, 0.85); font: 14px var(--font);
}