@moda-editor/core 0.1.1

package/dist/styles.css

@@ -0,0 +1,948 @@
+/* @moda-editor/core 공통 스타일 — 어댑터는 @import로 재사용한다.
+ * 색상은 --me-* CSS 변수로 노출해 테마를 연다. */
+
+.me-root {
+  --me-border-color: #e2e8f0;
+  --me-text-color: #1e293b;
+  --me-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+  /* 거터·활성줄 변수는 루트에 둔다 — .me-gutter 오버레이가 .me-editor의
+   * 형제라 .me-editor 스코프 변수를 못 본다. 자식인 .me-editor도
+   * 같은 변수를 상속해 그라디언트에 쓴다 */
+  --me-gutter-bg: rgba(15, 23, 42, 0.035);
+  --me-gutter-color: #94a3b8;
+  --me-line-active-num: #3b82f6;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  color: var(--me-text-color);
+  font: inherit;
+}
+
+.me-search {
+  padding: 6px 10px;
+  border: 1px solid var(--me-border-color);
+  border-radius: 6px;
+}
+
+.me-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--me-border-color);
+  border-radius: 6px;
+}
+
+.me-item {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--me-border-color);
+}
+
+.me-item:last-child {
+  border-bottom: none;
+}
+
+.me-count {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+/* ── 에디터 크롬 — .me-frame이 툴바+에디터+상태바를 하나의 카드로
+ * 묶는다. 단독 .me-editor도 테두리를 갖지만 frame 안에서는 frame이
+ * 크롬을 담당한다 ─────────────────────────────────────────── */
+.me-frame {
+  --me-frame-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  --me-focus-ring: rgba(59, 130, 246, 0.18);
+  --me-border-color: #e2e8f0;
+  --me-text-color: #1e293b;
+  --me-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+
+  color: var(--me-text-color);
+  background: #ffffff;
+  border: 1px solid var(--me-border-color);
+  border-radius: 10px;
+  box-shadow: var(--me-frame-shadow);
+  overflow: hidden;
+}
+
+.me-frame:focus-within {
+  border-color: var(--me-editor-focus, #3b82f6);
+  box-shadow: 0 0 0 3px var(--me-focus-ring);
+}
+
+/* ── 에디터 — Ace 계열 코드 에디터 서페이스: 모노스페이스 본문 +
+ * 라인번호 거터 + 활성 줄 + 80열 print margin. 거터 번호는
+ * aceFeature의 .me-gutter 오버레이가 그린다 — 편집 영역 안의
+ * ::before/::marker는 Chrome Home/End 줄 경계를 깨뜨린다 ── */
+.me-editor {
+  --me-editor-bg: #ffffff;
+  --me-editor-focus: #3b82f6;
+  --me-code-bg: #f1f5f9;
+  --me-code-border: #e2e8f0;
+  --me-gutter-border: var(--me-border-color);
+  --me-line-active-bg: rgba(59, 130, 246, 0.07);
+  --me-sel-bg: rgba(59, 130, 246, 0.22);
+  --me-print-margin: rgba(148, 163, 184, 0.4);
+
+  min-height: 160px;
+  position: relative;
+  padding: 10px 16px 10px 3.9em;
+  border: 1px solid var(--me-border-color);
+  border-radius: 10px;
+  color: var(--me-text-color, #1e293b);
+  caret-color: var(--me-editor-focus);
+  font-family: var(--me-font-mono);
+  font-size: 13.5px;
+  outline: none;
+  white-space: pre-wrap;
+  line-height: 1.6;
+  background:
+    /* 거터 구분선 */
+    linear-gradient(
+      to right,
+      transparent 0 calc(3.9em - 1px),
+      var(--me-gutter-border) calc(3.9em - 1px) 3.9em,
+      transparent 3.9em
+    ),
+    /* print margin — 80열 (Ace showPrintMargin 관례) */
+    linear-gradient(
+      to right,
+      transparent 0 calc(3.9em + 80ch),
+      var(--me-print-margin) calc(3.9em + 80ch) calc(3.9em + 80ch + 1px),
+      transparent calc(3.9em + 80ch + 1px)
+    ),
+    /* 거터 컬럼 배경 */
+    linear-gradient(
+      to right,
+      var(--me-gutter-bg) 0 3.9em,
+      transparent 3.9em
+    ),
+    var(--me-editor-bg);
+}
+
+/* 라인번호 거터 — .me-gutter 오버레이(aceFeature)가 각 블록 위치에
+ * 맞춰 번호를 그린다. 번호가 contenteditable 밖의 실제 DOM이라
+ * Home/End 캐럿 경계 계산과 DOM↔doc 오프셋 매핑 모두에 무영향.
+ * 코드블록은 자체 .me-cl 줄 번호를 쓰므로 pre에는 블록 번호가 없다 */
+/* 오버레이는 왼쪽 거터 스트립에 한정한다 — 텍스트 영역과 겹치는
+ * 절대위치 요소는 Chrome의 줄 경계 계산을 깨뜨려 Home/End가 멈춘다.
+ * overflow:hidden(스크롤 컨테이너화)·user-select:none(편집 경계
+ * 취급)도 같은 이유로 금지 */
+.me-gutter {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3.9em;
+  pointer-events: none;
+}
+/* user-select:none은 Chrome이 선택 불가 요소를 편집 경계로 취급해
+ * 캐럿 줄 경계를 깨뜨린다 — 쓰지 않는다. 오버레이 자체가
+ * pointer-events:none+editable 밖이라 선택될 경로도 없다 */
+.me-gnum {
+  position: absolute;
+  width: 3.9em;
+  padding-right: 0.9em;
+  box-sizing: border-box;
+  text-align: right;
+  color: var(--me-gutter-color);
+  font-family: var(--me-font-mono);
+  font-size: 12px;
+}
+.me-gnum.me-gcode {
+  width: 3.4em;
+  padding-right: 0.7em;
+  opacity: 0.65;
+}
+/* 언어 라벨은 pre 첫 줄의 우측 패딩 자리에 놓인다 — 텍스트와
+ * 겹치지 않는 게 Home/End 안전 조건이라 첫 줄에 여백을 만든다 */
+.me-editor pre[data-language] .me-cl:first-child {
+  padding-right: 5em;
+}
+.me-gnum.is-active {
+  color: var(--me-line-active-num);
+  font-weight: 600;
+  opacity: 1;
+}
+/* 코드 언어 라벨 — pre[data-language] ::before 대체. .me-gutter
+ * 스트립 밖(텍스트 영역)에 뜨므로 Home/End를 깨지 않게 pre 첫
+ * 줄에 우측 패딩을 확보해 텍스트와 겹치지 않게 둔다 */
+.me-glang {
+  position: absolute;
+  transform: translateX(-100%);
+  padding: 1px 6px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--me-text-muted, #64748b);
+  background: var(--me-btn-bg, #f1f5f9);
+  border: 1px solid var(--me-border-color);
+  border-radius: 4px;
+}
+
+/* 활성 라인 — aceFeature의 paintOverlay가 캐럿의 최상위 블록에
+ * me-line-active를 단다 (Ace highlightActiveLine 관례).
+ * 코드블록은 .me-cl.is-active가 이미 줄 단위로 칠하니 배경은 뺀다 */
+.me-editor > *.me-line-active:not(pre) {
+  background-color: var(--me-line-active-bg);
+}
+
+/* 선택 영역 — Ace 선택색 관례 (코드블록 안도 같은 변수) */
+.me-editor ::selection {
+  background: var(--me-sel-bg);
+}
+
+.me-editor:focus {
+  border-color: var(--me-editor-focus);
+}
+
+/* frame 안에서는 frame이 크롬을 담당 — 에디터 자체 테두리는 뗀다 */
+.me-frame .me-editor {
+  border: none;
+  border-radius: 0;
+}
+
+.me-frame .me-editor:focus {
+  border: none;
+}
+
+.me-editor p,
+.me-editor h1,
+.me-editor h2,
+.me-editor h3,
+.me-editor h4,
+.me-editor h5,
+.me-editor h6,
+.me-editor blockquote,
+.me-editor pre,
+.me-editor ul,
+.me-editor ol,
+.me-editor table {
+  margin: 0 0 8px;
+}
+
+.me-editor > :last-child,
+.me-editor > .me-node-view:last-child {
+  margin-bottom: 0;
+}
+
+.me-editor h1 { font-size: 1.55em; }
+.me-editor h2 { font-size: 1.35em; }
+.me-editor h3 { font-size: 1.2em; }
+.me-editor h4,
+.me-editor h5,
+.me-editor h6 { font-size: 1.05em; }
+
+.me-editor code {
+  padding: 0.08em 0.35em;
+  background: var(--me-code-bg);
+  border: 1px solid var(--me-code-border);
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.88em;
+}
+
+/* 리스트 — li 안 문단은 자체 여백이 없다 (li가 줄 간격을 담당) */
+.me-editor ul,
+.me-editor ol {
+  padding-left: 1.4em;
+}
+.me-editor li > p {
+  margin: 0;
+}
+.me-editor li > ul,
+.me-editor li > ol {
+  margin: 2px 0;
+}
+
+/* 할일 목록 — 마커는 ::before, 클릭 영역은 li의 왼쪽 패딩(~28px) */
+.me-editor ul.me-tasks {
+  padding-left: 4px;
+}
+.me-editor li.me-task {
+  list-style: none;
+  position: relative;
+  padding-left: 28px;
+}
+.me-editor li.me-task::before {
+  --me-checkbox-border: #94a3b8;
+  --me-checkbox-checked: #2563eb;
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 0.28em;
+  width: 15px;
+  height: 15px;
+  border: 1.5px solid var(--me-checkbox-border);
+  border-radius: 4px;
+  background: var(--me-editor-bg, #fff);
+  cursor: pointer;
+}
+.me-editor li.me-task[data-checked="true"]::before {
+  background: var(--me-checkbox-checked);
+  border-color: var(--me-checkbox-checked);
+}
+.me-editor li.me-task[data-checked="true"]::after {
+  content: "";
+  position: absolute;
+  left: 8.5px;
+  top: 0.42em;
+  width: 4px;
+  height: 8px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+.me-editor li.me-task[data-checked="true"] > p {
+  color: var(--me-quote-color, #64748b);
+  text-decoration: line-through;
+}
+
+/* 표 */
+.me-editor table.me-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.me-editor .me-table td {
+  border: 1px solid var(--me-border-color);
+  padding: 6px 10px;
+  vertical-align: top;
+  min-width: 2em;
+}
+.me-editor .me-table td > p {
+  margin: 0;
+}
+
+/* 이미지 */
+.me-editor img {
+  display: block;
+  max-width: 100%;
+  border-radius: 6px;
+  margin: 0 0 8px;
+}
+
+/* 형광펜 — 브라우저 기본 mark 색을 attr 색이 덮는다 */
+.me-editor mark {
+  padding: 0.05em 0.15em;
+  border-radius: 2px;
+}
+
+/* 인용구 */
+.me-editor blockquote {
+  --me-quote-color: #64748b;
+  padding: 2px 0 2px 12px;
+  border-left: 3px solid var(--me-border-color);
+  color: var(--me-quote-color);
+}
+.me-editor blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+/* 코드 블록 — 개행이 보이도록 pre-wrap, 타이핑은 순수 텍스트 */
+.me-editor pre {
+  padding: 10px 12px;
+  background: var(--me-code-bg);
+  border: 1px solid var(--me-code-border);
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.88em;
+  white-space: pre-wrap;
+  /* 코드블록 Tab은 \t 문자를 넣는다 — 탭 폭은 4 (CodeMirror 관례) */
+  tab-size: 4;
+
+  /* 구문 하이라이트 토큰 팔레트 — GitHub Light 계열.
+   * 테마는 --me-tok-* 변수로 바꾼다 */
+  --me-tok-keyword: #cf222e;
+  --me-tok-string: #0a3069;
+  --me-tok-comment: #6e7781;
+  --me-tok-number: #0550ae;
+  --me-tok-literal: #0550ae;
+  --me-tok-function: #8250df;
+  --me-tok-tag: #116329;
+  --me-tok-attr: #953800;
+}
+.me-editor pre code {
+  padding: 0;
+  background: none;
+  border: none;
+}
+
+/* 구문 하이라이트 토큰 — 뷰 레벨 데코레이션 (doc에 마크로 안 새김) */
+.me-tok-keyword {
+  color: var(--me-tok-keyword);
+}
+.me-tok-string {
+  color: var(--me-tok-string);
+}
+.me-tok-comment {
+  color: var(--me-tok-comment);
+  font-style: italic;
+}
+.me-tok-number,
+.me-tok-literal {
+  color: var(--me-tok-number);
+}
+.me-tok-function {
+  color: var(--me-tok-function);
+}
+.me-tok-tag {
+  color: var(--me-tok-tag);
+}
+.me-tok-attr {
+  color: var(--me-tok-attr);
+}
+
+/* 코드 줄 번호 거터 — render.ts가 토큰을 줄 단위 .me-cl로 묶고,
+ * 번호는 .me-gutter 오버레이가 줄 위치에 맞춰 그린다 (Ace 거터 관례).
+ * 거터 배경은 background gradient — DOM↔doc 오프셋 매핑에 무영향.
+ * .me-cl이 있는 pre에서만 발동한다 */
+.me-editor pre:has(.me-cl) {
+  position: relative;
+  padding-left: 3.4em;
+  background:
+    /* 거터 구분선 */
+    linear-gradient(
+      to right,
+      transparent 0 calc(3.4em - 1px),
+      var(--me-code-border) calc(3.4em - 1px) 3.4em,
+      transparent 3.4em
+    ),
+    /* print margin — 80열 (Ace showPrintMargin 관례) */
+    linear-gradient(
+      to right,
+      transparent 0 calc(3.4em + 80ch),
+      var(--me-print-margin) calc(3.4em + 80ch) calc(3.4em + 80ch + 1px),
+      transparent calc(3.4em + 80ch + 1px)
+    ),
+    /* 거터 컬럼 배경 */
+    linear-gradient(
+      to right,
+      var(--me-gutter-bg) 0 3.4em,
+      transparent 3.4em
+    ),
+    var(--me-code-bg);
+}
+/* 활성 줄 — 바인딩의 restoreSelection이 DOM에 is-active를 단다
+ * (Ace highlightActiveLine 관례) — 텍스트 띠 + 거터 번호 강조 */
+.me-cl.is-active {
+  background: var(--me-code-active-bg, rgba(59, 130, 246, 0.08));
+}
+/* 코드 선택 영역 — 에디터 전역 ::selection(var(--me-sel-bg))을 공유한다 */
+
+/* 보이지 않는 문자 (Ace showInvisibles 관례) — render 계층이
+ * 순수 공백 조각을 .me-ws/.me-ws-tab 스팬으로 분리해 두고, 토글이
+ * 켜진 [data-me-invisibles] 아래에서만 점/화살표 배경을 그린다.
+ * 글리프가 아니라 배경이라 텍스트 폭·캐럿 좌표가 안 변한다 */
+.me-frame[data-me-invisibles] .me-ws {
+  background-image: radial-gradient(
+    circle at 50% 60%,
+    var(--me-invisible, rgba(148, 163, 184, 0.55)) 0.055em,
+    transparent 0.1em
+  );
+  background-size: 1ch 100%;
+  background-repeat: repeat-x;
+}
+.me-frame[data-me-invisibles] .me-ws-tab {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 4h9M6.5 1l3 3-3 3' fill='none' stroke='%2394a3b8' stroke-width='1'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: auto 60%;
+}
+
+/* 코드 줄바꿈 토글 (Ace wrap 관례) */
+.me-frame[data-me-wrap] .me-editor pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 괄호 쌍 하이라이트 (Ace bracket matching) — input 바인딩이
+ * CSS Custom Highlight API로 "me-bracket" Range를 등록한다 */
+::highlight(me-bracket) {
+  background-color: var(--me-bracket-bg, rgba(59, 130, 246, 0.28));
+}
+
+/* 구분선 — atom 노드라 data-me-path를 직접 갖는다 */
+.me-editor hr {
+  border: none;
+  border-top: 1px solid var(--me-border-color);
+  margin: 12px 0;
+}
+
+/* 링크 */
+.me-editor a {
+  --me-link-color: #2563eb;
+  color: var(--me-link-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* 플레이스홀더 — 문서가 빈 문단 하나뿐일 때만 표시 (PM 관례) */
+.me-editor > p:only-child:has(> br:only-child)::before,
+.me-editor > p:only-child:has(> span > br:only-child)::before {
+  --me-placeholder-color: #94a3b8;
+  content: var(--me-placeholder-text, "내용을 입력하세요…");
+  float: left;
+  height: 0;
+  color: var(--me-placeholder-color);
+  pointer-events: none;
+}
+
+/* 선택 버블 메뉴 — 텍스트 선택 시 떠오르는 인라인 서식 바 */
+.me-bubble {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: var(--me-toolbar-bg, #fff);
+  border: 1px solid var(--me-border-color);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
+}
+.me-bubble .me-tool {
+  min-width: 26px;
+  height: 26px;
+  font-size: 12px;
+}
+
+/* 팝오버 — 링크/이미지 입력 패널 (버블 메뉴와 같은 크롬) */
+.me-pop {
+  position: fixed;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  background: var(--me-toolbar-bg, #fff);
+  border: 1px solid var(--me-border-color);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+}
+.me-pop-input {
+  width: 220px;
+  padding: 5px 8px;
+  font-size: 12px;
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--me-border-color);
+  border-radius: 5px;
+  outline: none;
+}
+.me-pop-input:focus {
+  border-color: var(--me-accent, #2563eb);
+}
+.me-pop-btn {
+  padding: 5px 10px;
+  font-size: 12px;
+  color: inherit;
+  background: var(--me-btn-bg, #f1f5f9);
+  border: 1px solid var(--me-border-color);
+  border-radius: 5px;
+  cursor: pointer;
+}
+.me-pop-btn:hover {
+  background: var(--me-btn-hover-bg, #e2e8f0);
+}
+.me-pop-btn[data-pop-act="ok"] {
+  color: #fff;
+  background: var(--me-accent, #2563eb);
+  border-color: var(--me-accent, #2563eb);
+}
+.me-pop-file {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* 링크 카드 — 캐럿이 링크 위에 있을 때 뜨는 액션 칩 (GDocs 관례):
+ * URL 표시 + 복사/수정/제거. 수정은 링크 팝오버로 이어진다 */
+.me-linkcard {
+  position: fixed;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 6px;
+  max-width: 320px;
+  background: var(--me-toolbar-bg, #fff);
+  border: 1px solid var(--me-border-color);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+}
+.me-linkcard-url {
+  flex: 1;
+  min-width: 0;
+  padding: 0 2px;
+  font-size: 12px;
+  color: var(--me-link-color, #2563eb);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.me-linkcard-url:hover {
+  text-decoration: underline;
+}
+.me-linkcard .me-pop-btn {
+  padding: 3px 8px;
+  font-size: 11px;
+}
+
+/* 코드블록 언어 라벨 — attrs.language → data-language.
+ * 라벨 자체는 .me-gutter의 .me-glang 오버레이가 그린다 */
+
+/* 커스텀 노드 뷰 래퍼 — 블록 간격을 블록과 맞춘다 */
+.me-node-view {
+  margin: 0 0 8px;
+}
+
+/* 편집 가능한 노드 뷰 콘텐츠 아울렛 — 안쪽 자식이 AST 자식과 1:1 */
+.me-node-content {
+  flex: 1;
+  min-width: 0;
+  outline: none;
+}
+
+/* 데모용 callout 노드 컴포넌트 — 아이콘 크롬 + 편집 콘텐츠.
+ * 왼쪽 액센트 바는 GitHub alert/Notion callout 관례 */
+.me-callout {
+  --me-callout-bg: #eff6ff;
+  --me-callout-border: #bfdbfe;
+  --me-callout-accent: #3b82f6;
+
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--me-callout-bg);
+  border: 1px solid var(--me-callout-border);
+  border-left: 3px solid var(--me-callout-accent);
+  border-radius: 6px;
+}
+.me-callout-icon {
+  user-select: none;
+  color: var(--me-callout-accent);
+}
+/* 아울렛 안 블록은 에디터 블록과 같은 간격을 쓰되 마지막은 붙인다 */
+.me-callout .me-node-content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ── 툴바 — 데모/스타터용 에디터 크롬. 어댑터 계약이 아니라
+ * 선택적 UI라 앱이 자체 툴바를 써도 된다 ─────────────────────── */
+.me-toolbar {
+  --me-toolbar-bg: #f8fafc;
+  --me-tool-hover-bg: #e2e8f0;
+  --me-tool-active-bg: #dbeafe;
+  --me-tool-active-color: #1d4ed8;
+
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 6px 8px;
+  background: var(--me-toolbar-bg);
+  border-bottom: 1px solid var(--me-border-color);
+  /* IDE 크롬 — 툴 라벨도 코드 에디터 폰트로 */
+  font-family: var(--me-font-mono);
+  font-size: 12.5px;
+}
+
+/* frame 밖에서 단독으로 쓸 때도 카드 형태를 유지한다 */
+.me-toolbar:not(.me-frame .me-toolbar) {
+  border: 1px solid var(--me-border-color);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.me-tool {
+  min-width: 30px;
+  height: 30px;
+  padding: 0 7px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--me-text-color);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+
+.me-tool:hover:not(:disabled) {
+  background: var(--me-tool-hover-bg);
+}
+
+/* 키보드 포커스 표시 — VSCode 크롬 관례 (마우스 클릭엔 링 없음) */
+.me-tool:focus-visible,
+.me-overflow > summary:focus-visible,
+.me-size:focus-visible,
+.me-blockfmt:focus-visible {
+  outline: 2px solid var(--me-editor-focus, #3b82f6);
+  outline-offset: -2px;
+}
+
+.me-tool.is-active {
+  background: var(--me-tool-active-bg);
+  color: var(--me-tool-active-color);
+}
+
+.me-tool:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.me-sep {
+  width: 1px;
+  height: 18px;
+  margin: 0 5px;
+  background: var(--me-border-color);
+}
+
+/* 블록 서식 드롭다운 — GDocs paragraph-style 관례. ¶/H1~H3 버튼
+ * 열 대신 현재 서식을 보여주는 select 하나 (.me-size 크롬 공유) */
+.me-blockfmt {
+  min-width: 74px;
+}
+
+/* 오버플로 패널 — 덜 쓰는 커맨드는 ⋯ 아래에 모은다 (GDocs ⋮
+ * overflow 관례). details/summary라 프레임워크 상태 없이 토글되고,
+ * 패널 크롬은 버블 메뉴와 같다 */
+.me-overflow {
+  position: relative;
+  display: inline-flex;
+}
+.me-overflow > summary {
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 7px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--me-text-color);
+}
+.me-overflow > summary::-webkit-details-marker {
+  display: none;
+}
+.me-overflow > summary:hover {
+  background: var(--me-tool-hover-bg);
+}
+.me-overflow[open] > summary {
+  background: var(--me-tool-active-bg);
+  color: var(--me-tool-active-color);
+}
+.me-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 5px;
+  background: var(--me-toolbar-bg, #fff);
+  border: 1px solid var(--me-border-color);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+  white-space: nowrap;
+}
+
+/* 툴바 인라인 스타일 컨트롤 — 컬러 피커/크기 셀렉트 */
+.me-style {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 30px;
+  padding: 0 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--me-text-color);
+  cursor: pointer;
+}
+.me-style input[type="color"] {
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--me-border-color);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+}
+.me-style mark {
+  padding: 0 3px;
+  border-radius: 3px;
+}
+.me-size {
+  height: 30px;
+  padding: 0 6px;
+  border: 1px solid var(--me-border-color);
+  border-radius: 6px;
+  background: var(--me-toolbar-bg);
+  color: var(--me-text-color);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+/* 상태 표시줄 — 왼쪽은 블록/마크, 오른쪽은 Ln·Col/블록 수
+ * (VSCode 상태바 관례 — 위치 정보는 우측 정렬) */
+.me-statusbar {
+  --me-status-color: #64748b;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 5px 12px;
+  border-top: 1px solid var(--me-border-color);
+  background: var(--me-toolbar-bg, #f8fafc);
+  font-size: 11px;
+  font-family: ui-monospace, monospace;
+  color: var(--me-status-color);
+  white-space: nowrap;
+}
+.me-status-left,
+.me-status-right {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.me-status-right {
+  flex-shrink: 0;
+}
+
+/* frame 밖 단독 사용 시 */
+.me-statusbar:not(.me-frame .me-statusbar) {
+  border: none;
+  background: transparent;
+  padding: 4px 0 0;
+  opacity: 0.7;
+}
+
+/* ── 다크 테마 — Ace Monokai 계열. .me-frame 또는 그 조상에
+ * data-me-theme="dark" ────────────────────────────────────── */
+[data-me-theme="dark"] {
+  --me-border-color: #3e3d32;
+  --me-text-color: #f8f8f2;
+}
+
+/* EditorView/WidgetView의 .me-root 래퍼가 팔레트 기본값을 갖고 있어
+ * frame의 다크 변수를 중간에서 덮는다 — 테마 아래의 .me-root는
+ * 테마 변수를 그대로 상속하도록 명시 오버라이드 */
+[data-me-theme="dark"] .me-root {
+  --me-border-color: #3e3d32;
+  --me-text-color: #f8f8f2;
+  --me-gutter-bg: rgba(0, 0, 0, 0.22);
+  --me-gutter-color: #8f908a;
+  --me-line-active-num: #c2c2bf;
+}
+
+.me-frame[data-me-theme="dark"] {
+  --me-focus-ring: rgba(102, 217, 239, 0.25);
+  background: #1e1f1c;
+}
+
+[data-me-theme="dark"] .me-editor {
+  --me-editor-bg: #272822;
+  --me-editor-focus: #66d9ef;
+  --me-code-bg: #1e1f1c;
+  --me-code-border: #3e3d32;
+  --me-gutter-border: #3e3d32;
+  --me-line-active-bg: rgba(255, 255, 255, 0.045);
+  --me-sel-bg: rgba(73, 72, 62, 0.95);
+  --me-print-margin: rgba(73, 72, 62, 0.9);
+}
+
+/* 구문 하이라이트 다크 팔레트 — Monokai */
+[data-me-theme="dark"] .me-editor pre {
+  --me-tok-keyword: #f92672;
+  --me-tok-string: #e6db74;
+  --me-tok-comment: #75715e;
+  --me-tok-number: #ae81ff;
+  --me-tok-literal: #ae81ff;
+  --me-tok-function: #a6e22e;
+  --me-tok-tag: #f92672;
+  --me-tok-attr: #a6e22e;
+  --me-code-active-bg: rgba(255, 255, 255, 0.05);
+}
+
+[data-me-theme="dark"] .me-toolbar {
+  --me-toolbar-bg: #1e1f1c;
+  --me-tool-hover-bg: #3e3d32;
+  --me-tool-active-bg: rgba(102, 217, 239, 0.14);
+  --me-tool-active-color: #66d9ef;
+}
+
+/* 폼 컨트롤은 UA 라이트 기본값을 상속해 다크에서 튄다 — 명시 오버라이드 */
+[data-me-theme="dark"] .me-toolbar .me-size,
+[data-me-theme="dark"] .me-toolbar .me-blockfmt,
+[data-me-theme="dark"] .me-toolbar .me-style input[type="color"] {
+  background: #1e1f1c;
+  border-color: #3e3d32;
+  color: #f8f8f2;
+}
+
+[data-me-theme="dark"] .me-statusbar {
+  --me-toolbar-bg: #1e1f1c;
+  --me-status-color: #8f908a;
+}
+
+[data-me-theme="dark"] .me-callout {
+  --me-callout-bg: #2d2e25;
+  --me-callout-border: #575643;
+  --me-callout-accent: #66d9ef;
+}
+
+[data-me-theme="dark"] .me-editor blockquote {
+  --me-quote-color: #a09f93;
+}
+
+[data-me-theme="dark"] .me-editor a {
+  --me-link-color: #66d9ef;
+}
+
+[data-me-theme="dark"] .me-editor li.me-task::before {
+  --me-checkbox-border: #575643;
+  --me-checkbox-checked: #a6e22e;
+}
+
+[data-me-theme="dark"] .me-bubble {
+  --me-toolbar-bg: #1e1f1c;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+}
+
+[data-me-theme="dark"] .me-pop,
+[data-me-theme="dark"] .me-linkcard {
+  --me-toolbar-bg: #1e1f1c;
+  --me-btn-bg: #3e3d32;
+  --me-btn-hover-bg: #575643;
+  --me-accent: #66d9ef;
+  --me-link-color: #66d9ef;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+[data-me-theme="dark"] .me-glang {
+  --me-text-muted: #8f908a;
+  --me-btn-bg: #3e3d32;
+}
+
+[data-me-theme="dark"] .me-editor ::placeholder,
+[data-me-theme="dark"] .me-editor > p:only-child:has(> br:only-child)::before,
+[data-me-theme="dark"]
+  .me-editor
+  > p:only-child:has(> span > br:only-child)::before {
+  --me-placeholder-color: #6a6b60;
+}
+
+/* 테마 토글 버튼 — 다크 상태에서는 활성색으로 표시 */
+[data-me-theme="dark"] .me-tool[data-me-cmd="theme"] {
+  color: var(--me-tool-active-color);
+}