@moda-editor/core 0.2.3 → 0.3.1

package/dist/styles.css

@@ -1,11 +1,34 @@
 /* @moda-editor/core 공통 스타일 — 어댑터는 @import로 재사용한다.
  * 색상은 --me-* CSS 변수로 노출해 테마를 연다. */
 
+/* 스코프 안의 모든 요소를 border-box로 정규화 — 임베딩 페이지의
+ * 전역 box-sizing과 무관하게 같은 레이아웃이 나온다 */
+.me-root,
+.me-root *,
+.me-root *::before,
+.me-root *::after,
+.me-frame,
+.me-frame *,
+.me-frame *::before,
+.me-frame *::after,
+.me-pop,
+.me-pop *,
+.me-bubble,
+.me-bubble *,
+.me-linkcard,
+.me-linkcard *,
+.me-menu,
+.me-menu * {
+  box-sizing: border-box;
+}
+
 .me-root {
   --me-border-color: #e2e8f0;
   --me-text-color: #1e293b;
   --me-font-mono:
     ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  /* 본문 폰트 — 기본은 에디터 크롬과 같은 mono, 제품 산문 폰트로 교체 가능 */
+  --me-font-body: var(--me-font-mono);
   /* 거터·활성줄 변수는 루트에 둔다 — .me-gutter 오버레이가 .me-editor의
    * 형제라 .me-editor 스코프 변수를 못 본다. 자식인 .me-editor도
    * 같은 변수를 상속해 그라디언트에 쓴다 */
@@ -14,6 +37,25 @@
   --me-line-active-num: #3b82f6;
   /* atom 노드 셀렉션 링 + 이미지 핸들 — 거터와 같은 이유로 루트에 둔다 */
   --me-node-sel-color: #3b82f6;
+  /* ── 레이아웃/톤 토큰 — 매직값 대신 변수로 둬 제품이 조정한다 */
+  --me-gutter-w: 3.9em;
+  --me-code-gutter-w: 3.4em;
+  --me-editor-min-height: 160px;
+  --me-radius-sm: 4px;
+  --me-radius-md: 6px;
+  --me-radius-pop: 8px;
+  --me-radius-frame: 10px;
+  /* 겹침 순서 — 툴바 < 원격 캐럿 < 편집 오버레이 < 버블 < 팝/메뉴 */
+  --me-z-toolbar: 20;
+  --me-z-carets: 35;
+  --me-z-overlay: 40;
+  --me-z-float: 50;
+  --me-z-pop: 60;
+  /* 위험 액션 호버(삭제 버튼)·액센트 위 텍스트 — 테마가 덮는다 */
+  --me-danger: #dc2626;
+  --me-on-accent: #ffffff;
+  /* RTL — 거터 그라디언트 방향만 물리 키워드라 :dir(rtl)에서 뒤집는다 */
+  --me-grad-dir: to right;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -22,6 +64,13 @@
   font: inherit;
 }
 
+/* RTL — 거터 그라디언트와 같은 물리 방향 키워드를 뒤집는다 */
+:dir(rtl).me-root,
+:dir(rtl) .me-root,
+.me-root :dir(rtl) {
+  --me-grad-dir: to left;
+}
+
 .me-search {
   padding: 6px 10px;
   border: 1px solid var(--me-border-color);
@@ -71,13 +120,22 @@
   --me-tool-active-bg: #dbeafe;
   --me-tool-active-color: #1d4ed8;
   --me-status-color: #64748b;
+  /* 크롬 폴백 — 리프 요소의 var() 폴백이 아니라 여기가 기본값의 고향
+   * (--me-editor-focus는 본문과 포커스 링이 공유하는 액센트다) */
+  --me-editor-focus: #3b82f6;
+  --me-accent: #2563eb;
+  --me-on-accent: #ffffff;
+  --me-danger: #dc2626;
+  --me-text-muted: #64748b;
+  --me-btn-bg: #f1f5f9;
+  --me-btn-hover-bg: #e2e8f0;
   /* 뜨는 UI(팝오버/버블/카드/그리드)의 공통 그림자 */
   --me-pop-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
 
   color: var(--me-text-color);
   background: var(--me-frame-bg);
   border: 1px solid var(--me-border-color);
-  border-radius: 10px;
+  border-radius: var(--me-radius-frame, 10px);
   box-shadow: var(--me-frame-shadow);
   overflow: hidden;
   /* 우하단 앵커 요소(상태바 탭·출력 패널)의 containing block */
@@ -123,14 +181,15 @@
   --me-tok-tag: #116329;
   --me-tok-attr: #953800;
 
-  min-height: 160px;
+  min-height: var(--me-editor-min-height, 160px);
   position: relative;
-  padding: 10px 16px 10px 3.9em;
+  padding-block: 10px;
+  padding-inline: var(--me-gutter-w, 3.9em) 16px;
   border: 1px solid var(--me-border-color);
-  border-radius: 10px;
+  border-radius: var(--me-radius-frame, 10px);
   color: var(--me-text-color, #1e293b);
   caret-color: var(--me-editor-focus);
-  font-family: var(--me-font-mono);
+  font-family: var(--me-font-body, var(--me-font-mono));
   font-size: 13.5px;
   outline: none;
   white-space: pre-wrap;
@@ -138,20 +197,20 @@
   background:
     /* 거터 구분선 */
     linear-gradient(
-      to right,
-      transparent 0 calc(3.9em - 1px),
-      var(--me-gutter-border) calc(3.9em - 1px) 3.9em,
-      transparent 3.9em
+      var(--me-grad-dir, to right),
+      transparent 0 calc(var(--me-gutter-w, 3.9em) - 1px),
+      var(--me-gutter-border) calc(var(--me-gutter-w, 3.9em) - 1px) var(--me-gutter-w, 3.9em),
+      transparent var(--me-gutter-w, 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)
+        var(--me-grad-dir, to right),
+        transparent 0 calc(var(--me-gutter-w, 3.9em) + 80ch),
+        var(--me-print-margin) calc(var(--me-gutter-w, 3.9em) + 80ch) calc(var(--me-gutter-w, 3.9em) + 80ch + 1px),
+        transparent calc(var(--me-gutter-w, 3.9em) + 80ch + 1px)
       ),
     /* 거터 컬럼 배경 */
-    linear-gradient(to right, var(--me-gutter-bg) 0 3.9em, transparent 3.9em),
+    linear-gradient(var(--me-grad-dir, to right), var(--me-gutter-bg) 0 var(--me-gutter-w, 3.9em), transparent var(--me-gutter-w, 3.9em)),
     var(--me-editor-bg);
 }
 
@@ -165,10 +224,10 @@
  * 취급)도 같은 이유로 금지 */
 .me-gutter {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   bottom: 0;
-  width: 3.9em;
+  width: var(--me-gutter-w, 3.9em);
   pointer-events: none;
 }
 /* user-select:none은 Chrome이 선택 불가 요소를 편집 경계로 취급해
@@ -176,23 +235,23 @@
  * pointer-events:none+editable 밖이라 선택될 경로도 없다 */
 .me-gnum {
   position: absolute;
-  width: 3.9em;
-  padding-right: 0.9em;
+  width: var(--me-gutter-w, 3.9em);
+  padding-inline-end: 0.9em;
   box-sizing: border-box;
-  text-align: right;
+  text-align: end;
   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;
+  width: var(--me-code-gutter-w, 3.4em);
+  padding-inline-end: 0.7em;
   opacity: 0.65;
 }
 /* 언어 라벨은 pre 첫 줄의 우측 패딩 자리에 놓인다 — 텍스트와
  * 겹치지 않는 게 Home/End 안전 조건이라 첫 줄에 여백을 만든다 */
 .me-editor pre[data-language] .me-cl:first-child {
-  padding-right: 5em;
+  padding-inline-end: 5em;
 }
 .me-gnum.is-active {
   color: var(--me-line-active-num);
@@ -299,7 +358,7 @@
  * 그려지므로, 마커가 거터 구분선에 닿지 않을 만큼의 들여쓰기가 필요 */
 .me-editor ul,
 .me-editor ol {
-  padding-left: 2.1em;
+  padding-inline-start: 2.1em;
 }
 .me-editor li > p {
   margin: 0;
@@ -312,22 +371,22 @@
 /* 할일 목록 — 마커는 ::before, 클릭 영역은 li의 왼쪽 패딩(~24px).
  * ul 패딩과 li 패딩을 더해 텍스트 시작점이 다른 리스트와 맞는다 */
 .me-editor ul.me-tasks {
-  padding-left: 8px;
+  padding-inline-start: 8px;
 }
 .me-editor li.me-task {
   list-style: none;
   position: relative;
-  padding-left: 24px;
+  padding-inline-start: 24px;
 }
 .me-editor li.me-task::before {
   content: "";
   position: absolute;
-  left: 4px;
+  inset-inline-start: 4px;
   top: 0.28em;
   width: 15px;
   height: 15px;
   border: 1.5px solid var(--me-checkbox-border);
-  border-radius: 4px;
+  border-radius: var(--me-radius-sm, 4px);
   background: var(--me-editor-bg, #fff);
   cursor: pointer;
 }
@@ -338,11 +397,11 @@
 .me-editor li.me-task[data-checked="true"]::after {
   content: "";
   position: absolute;
-  left: 8.5px;
+  inset-inline-start: 8.5px;
   top: 0.42em;
   width: 4px;
   height: 8px;
-  border: solid #fff;
+  border: solid var(--me-on-accent, #fff);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
   pointer-events: none;
@@ -400,7 +459,7 @@
  * 통과하고 핸들/바만 이벤트를 받는다 */
 .me-imgui {
   position: absolute;
-  z-index: 40;
+  z-index: var(--me-z-overlay, 40);
   pointer-events: none;
 }
 .me-imgui[hidden] {
@@ -409,7 +468,7 @@
 /* 우하단 크기 핸들 — nwse-resize (GDocs/Word 관례) */
 .me-imgui .me-img-handle {
   position: absolute;
-  right: -6px;
+  inset-inline-end: -6px;
   bottom: -6px;
   width: 12px;
   height: 12px;
@@ -424,7 +483,7 @@
 /* 액션 바 — 이미지 위쪽. 루트 상단에 붙으면 is-below로 아래로 뒤집는다 */
 .me-imgui .me-img-bar {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: -6px;
   transform: translateY(-100%);
   display: flex;
@@ -459,8 +518,8 @@
   background: var(--me-tool-hover-bg, #e2e8f0);
 }
 .me-imgui .me-imgbtn[data-img-act="del"]:hover {
-  color: #dc2626;
-  border-color: #dc2626;
+  color: var(--me-danger, #dc2626);
+  border-color: var(--me-danger, #dc2626);
 }
 /* 편집 폼 — 액션 바 안의 두 번째 행 (wrap으로 전체 폭을 차지).
  * 최소 폭을 둬 버튼 행보다 바가 좁아져 입력이 찌그러지지 않게 한다 */
@@ -501,7 +560,7 @@
  * .me-imgui와 같은 패턴: 래퍼 pointer-events:none, 바/핸들만 받는다 */
 .me-tableui {
   position: absolute;
-  z-index: 40;
+  z-index: var(--me-z-overlay, 40);
   pointer-events: none;
 }
 .me-tableui[hidden] {
@@ -543,8 +602,8 @@
 .me-tableui .me-tblbtn[data-tbl-act="tabledel"]:hover,
 .me-tableui .me-tblbtn[data-tbl-act="rowdel"]:hover,
 .me-tableui .me-tblbtn[data-tbl-act="coldel"]:hover {
-  color: #dc2626;
-  border-color: #dc2626;
+  color: var(--me-danger, #dc2626);
+  border-color: var(--me-danger, #dc2626);
 }
 /* 열 경계 핸들 — 각 열 우측 경계의 8px 스트립. 평소엔 투명하고
  * hover/드래그 시 리사이즈 커서 + 강조선 (GDocs 열 리사이즈 관례) */
@@ -565,7 +624,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 3px;
+  inset-inline-start: 3px;
   width: 2px;
   background: transparent;
   transition: background 0.1s;
@@ -579,7 +638,7 @@
  * Notion 코드블록 언어 피커 관례. 래퍼는 좌표만 잡고 자식이 이벤트를 받는다 */
 .me-codeui {
   position: absolute;
-  z-index: 40;
+  z-index: var(--me-z-overlay, 40);
   transform: translateX(-100%);
   display: flex;
   align-items: center;
@@ -652,7 +711,7 @@
 }
 /* Notion 관례 — 언어 표시는 좌측, 액션 버튼은 우측 */
 .me-codehead .me-codelang {
-  margin-right: auto;
+  margin-inline-end: auto;
 }
 /* 카드 안 pre — 카드가 배경/테두리를 담당하므로 pre 자체 크롬은 뗀다 */
 .me-codeview > .me-node-content {
@@ -675,8 +734,9 @@
 
 /* 인용구 */
 .me-editor blockquote {
-  padding: 2px 0 2px 12px;
-  border-left: 3px solid var(--me-border-color);
+  padding-block: 2px;
+  padding-inline: 12px 0;
+  border-inline-start: 3px solid var(--me-border-color);
   color: var(--me-quote-color);
 }
 .me-editor blockquote > :last-child {
@@ -732,24 +792,24 @@
  * .me-cl이 있는 pre에서만 발동한다 */
 .me-editor pre:has(.me-cl) {
   position: relative;
-  padding-left: 3.4em;
+  padding-inline-start: var(--me-code-gutter-w, 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
+      var(--me-grad-dir, to right),
+      transparent 0 calc(var(--me-code-gutter-w, 3.4em) - 1px),
+      var(--me-code-border) calc(var(--me-code-gutter-w, 3.4em) - 1px) var(--me-code-gutter-w, 3.4em),
+      transparent var(--me-code-gutter-w, 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)
+        var(--me-grad-dir, to right),
+        transparent 0 calc(var(--me-code-gutter-w, 3.4em) + 80ch),
+        var(--me-print-margin) calc(var(--me-code-gutter-w, 3.4em) + 80ch) calc(var(--me-code-gutter-w, 3.4em) + 80ch + 1px),
+        transparent calc(var(--me-code-gutter-w, 3.4em) + 80ch + 1px)
       ),
     /* 거터 컬럼 배경 */
-    linear-gradient(to right, var(--me-gutter-bg) 0 3.4em, transparent 3.4em),
+    linear-gradient(var(--me-grad-dir, to right), var(--me-gutter-bg) 0 var(--me-code-gutter-w, 3.4em), transparent var(--me-code-gutter-w, 3.4em)),
     var(--me-code-bg);
 }
 /* 활성 줄 — 바인딩의 restoreSelection이 DOM에 is-active를 단다
@@ -832,11 +892,20 @@
   text-underline-offset: 2px;
 }
 
-/* 플레이스홀더 — 문서가 빈 문단 하나뿐일 때만 표시 (PM 관례) */
+/* 플레이스홀더 — 문서가 빈 문단 하나뿐일 때만 표시 (PM 관례).
+ * data-me-placeholder 속성(EditorOptions.placeholder)이 우선,
+ * 없으면 --me-placeholder-text 변수, 최종 기본은 한국어 문구 */
+.me-editor[data-me-placeholder] > p:only-child:has(> br:only-child)::before,
+.me-editor[data-me-placeholder] > p:only-child:has(> span > br:only-child)::before {
+  content: attr(data-me-placeholder);
+}
+.me-editor:not([data-me-placeholder]) > p:only-child:has(> br:only-child)::before,
+.me-editor:not([data-me-placeholder]) > p:only-child:has(> span > br:only-child)::before {
+  content: var(--me-placeholder-text, "내용을 입력하세요…");
+}
 .me-editor > p:only-child:has(> br:only-child)::before,
 .me-editor > p:only-child:has(> span > br:only-child)::before {
-  content: var(--me-placeholder-text, "내용을 입력하세요…");
-  float: left;
+  float: inline-start;
   height: 0;
   color: var(--me-placeholder-color);
   pointer-events: none;
@@ -844,8 +913,8 @@
 
 /* 선택 버블 메뉴 — 텍스트 선택 시 떠오르는 인라인 서식 바 */
 .me-bubble {
-  position: fixed;
-  z-index: 50;
+  position: absolute;
+  z-index: var(--me-z-float, 50);
   display: flex;
   align-items: center;
   gap: 2px;
@@ -865,8 +934,8 @@
  * 크롬). 트리거 버튼 아래에 앵커로 뜨고, 좁은 뷰포트에서는 접혀서
  * 넘치지 않는다 (flex-wrap + max-width) */
 .me-pop {
-  position: fixed;
-  z-index: 60;
+  position: absolute;
+  z-index: var(--me-z-pop, 60);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -904,7 +973,7 @@
   background: var(--me-btn-hover-bg, #e2e8f0);
 }
 .me-pop-btn[data-pop-act="ok"] {
-  color: #fff;
+  color: var(--me-on-accent, #fff);
   background: var(--me-accent, #2563eb);
   border-color: var(--me-accent, #2563eb);
 }
@@ -938,14 +1007,14 @@
 .me-pop-count {
   min-width: 34px;
   font-size: 11px;
-  color: var(--me-muted-color, #64748b);
+  color: var(--me-text-muted, #64748b);
   text-align: center;
 }
 /* 보기 전환 탭 — 상태바 우측의 에디터/마크다운 세그먼트
  * (VS Code editor|preview 관례). .me-frame의 data-me-view를 바꾼다 */
 .me-viewtabs {
   display: inline-flex;
-  margin-left: 8px;
+  margin-inline-start: 8px;
   border: 1px solid var(--me-border-color);
   border-radius: 5px;
   overflow: hidden;
@@ -959,7 +1028,7 @@
   cursor: pointer;
 }
 .me-viewtabs button + button {
-  border-left: 1px solid var(--me-border-color);
+  border-inline-start: 1px solid var(--me-border-color);
 }
 .me-viewtabs button:hover {
   background: var(--me-btn-hover-bg, #e2e8f0);
@@ -1007,6 +1076,11 @@
 .me-md-view .me-md-text:focus {
   outline: none;
 }
+/* 키보드 포커스엔 대체 링 — outline:none 단독은 focus-visible을 지운다 */
+.me-md-view .me-md-text:focus-visible {
+  outline: 2px solid var(--me-editor-focus, #3b82f6);
+  outline-offset: -2px;
+}
 .me-pop-textarea {
   width: 100%;
   height: 160px;
@@ -1056,8 +1130,8 @@
 /* 링크 카드 — 캐럿이 링크 위에 있을 때 뜨는 액션 칩 (GDocs 관례):
  * URL 표시 + 복사/수정/제거. 수정은 링크 팝오버로 이어진다 */
 .me-linkcard {
-  position: fixed;
-  z-index: 60;
+  position: absolute;
+  z-index: var(--me-z-pop, 60);
   display: flex;
   align-items: center;
   gap: 4px;
@@ -1111,7 +1185,7 @@
   padding: 8px 12px;
   background: var(--me-callout-bg);
   border: 1px solid var(--me-callout-border);
-  border-left: 3px solid var(--me-callout-accent);
+  border-inline-start: 3px solid var(--me-callout-accent);
   border-radius: 6px;
 }
 .me-callout-icon {
@@ -1139,7 +1213,7 @@
    * 올려 ⋯/A▾ 드롭다운이 본문에 가려지지 않게 한다. 팝오버/버블
    * (fixed, z 50~60)보다는 아래라 겹쳐도 그쪽이 위에 뜬다 */
   position: relative;
-  z-index: 20;
+  z-index: var(--me-z-toolbar, 20);
   gap: 2px;
   padding: 6px 44px 6px 8px;
   background: var(--me-toolbar-bg, #f8fafc);
@@ -1243,7 +1317,7 @@
   position: absolute;
   /* translateY 중앙정렬 대신 패딩과 같은 top — transform은 스태킹
    * 컨텍스트를 만들어 자식 .me-menu의 z-index를 가둔다 */
-  right: 8px;
+  inset-inline-end: 8px;
   top: 6px;
   flex-shrink: 0;
   background: var(--me-toolbar-bg, #f8fafc);
@@ -1292,9 +1366,9 @@
 .me-menu {
   position: absolute;
   top: calc(100% + 6px);
-  right: 0;
+  inset-inline-end: 0;
   left: auto;
-  z-index: 60;
+  z-index: var(--me-z-pop, 60);
   display: flex;
   align-items: center;
   gap: 2px;
@@ -1307,8 +1381,8 @@
 }
 /* A▾ 패널은 툴바 중간에서 열리므로 버튼 왼쪽 아래에 붙인다 */
 .me-styles .me-menu {
-  right: auto;
-  left: 0;
+  inset-inline-end: auto;
+  inset-inline-start: 0;
 }
 
 /* ── 좁은 폭 — 툴바는 flex-wrap으로 여러 줄로 감긴다 ───────────
@@ -1441,7 +1515,7 @@
   );
 }
 .me-pop-theme .me-theme-check {
-  margin-left: auto;
+  margin-inline-start: auto;
   font-weight: 600;
 }
 
@@ -1459,7 +1533,7 @@
  * (3.9em) 안에 두고 핸들만 이벤트를 받는다 */
 .me-drag-handle {
   position: absolute;
-  left: 0.2em;
+  inset-inline-start: 0.2em;
   width: 1.4em;
   height: 1.4em;
   display: none;
@@ -1486,8 +1560,8 @@
 /* 드롭 경계 표시선 — dragover 동안 삽입 위치에 그린다 */
 .me-drop-line {
   position: absolute;
-  left: 3.9em;
-  right: 0;
+  inset-inline-start: var(--me-gutter-w, 3.9em);
+  inset-inline-end: 0;
   height: 2px;
   display: none;
   background: var(--me-node-sel-color);
@@ -1513,7 +1587,7 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  z-index: 35;
+  z-index: var(--me-z-carets, 35);
   overflow: hidden;
 }
 /* 캐럿 바 — 2px 세로선, 높이는 JS가 줄 높이로 맞춘다 */
@@ -1526,11 +1600,11 @@
 .me-remote-caret-label {
   position: absolute;
   top: -1.15em;
-  left: -1px;
+  inset-inline-start: -1px;
   padding: 0 4px;
   border-radius: 3px 3px 3px 0;
   background: var(--me-remote-color, #f59e0b);
-  color: #fff;
+  color: var(--me-on-accent, #fff);
   font:
     600 10px/1.5 ui-sans-serif,
     system-ui,
@@ -1541,9 +1615,167 @@
 /* 원격 선택 영역 — Range.getClientRects()로 줄별 rect를 깐다 */
 .me-remote-sel {
   position: absolute;
-  background: color-mix(
-    in srgb,
-    var(--me-remote-color, #f59e0b) 22%,
-    transparent
-  );
+  /* color-mix 미지원 폴백 — 불투명 색 위에 요소 투명도 */
+  background: var(--me-remote-color, #f59e0b);
+  opacity: 0.22;
+}
+@supports (background: color-mix(in srgb, red, blue)) {
+  .me-remote-sel {
+    background: color-mix(
+      in srgb,
+      var(--me-remote-color, #f59e0b) 22%,
+      transparent
+    );
+    opacity: 1;
+  }
+}
+
+/* ── 접근성 미디어 — 모션 최소화 + 인쇄 + OS 다크 선호 ────────── */
+
+/* prefers-reduced-motion — 오버레이/핸들의 transition을 끈다 */
+@media (prefers-reduced-motion: reduce) {
+  .me-root *,
+  .me-frame * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* 인쇄 — 편집 크롬(툴바/상태바/팝/오버레이)을 빼고 본문만 남긴다 */
+@media print {
+  .me-toolbar,
+  .me-statusbar,
+  .me-pop,
+  .me-bubble,
+  .me-menu,
+  .me-linkcard,
+  .me-imgui,
+  .me-tableui,
+  .me-codeui,
+  .me-dnd,
+  .me-carets,
+  .me-gutter,
+  .me-md-head {
+    display: none !important;
+  }
+  .me-frame,
+  .me-editor {
+    border: none;
+    box-shadow: none;
+  }
+  /* 거터가 사라지므로 본문 패딩을 되돌린다 */
+  .me-editor {
+    padding-inline-start: 16px;
+    background: var(--me-editor-bg);
+  }
+}
+
+/* OS 다크 선호 — 명시 테마([data-me-theme])가 없는 기본 팔레트만
+ * 어둡게 전환한다. applyTheme이 박은 인라인 변수는 더 높은 우선순위라
+ * 테마가 켜진 에디터는 영향받지 않는다 */
+@media (prefers-color-scheme: dark) {
+  :where(.me-root, .me-frame, .me-editor):not([data-me-theme]):not([data-me-theme] *) {
+    --me-frame-bg: #1e1f1c;
+    --me-border-color: #3e3d32;
+    --me-text-color: #f8f8f2;
+    --me-editor-bg: #272822;
+    --me-editor-focus: #66d9ef;
+    --me-sel-bg: rgba(73, 72, 62, 0.95);
+    --me-gutter-bg: rgba(0, 0, 0, 0.22);
+    --me-gutter-color: #8f908a;
+    --me-gutter-border: #3e3d32;
+    --me-line-active-num: #c2c2bf;
+    --me-node-sel-color: #66d9ef;
+    --me-print-margin: rgba(73, 72, 62, 0.9);
+    --me-toolbar-bg: #1e1f1c;
+    --me-tool-hover-bg: #3e3d32;
+    --me-tool-active-bg: rgba(102, 217, 239, 0.14);
+    --me-tool-active-color: #66d9ef;
+    --me-status-color: #8f908a;
+    --me-btn-bg: #3e3d32;
+    --me-btn-hover-bg: #575643;
+    --me-accent: #66d9ef;
+    --me-on-accent: #1e1f1c;
+    --me-danger: #f87171;
+    --me-text-muted: #8f908a;
+    --me-link-color: #66d9ef;
+    --me-quote-color: #a09f93;
+    --me-placeholder-color: #6a6b60;
+    --me-code-bg: #1e1f1c;
+    --me-code-border: #3e3d32;
+    --me-code-active-bg: rgba(255, 255, 255, 0.05);
+    --me-callout-bg: #2d2e25;
+    --me-callout-border: #575643;
+    --me-callout-accent: #66d9ef;
+    --me-checkbox-border: #575643;
+    --me-checkbox-checked: #a6e22e;
+    --me-pop-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+    --me-frame-shadow: none;
+    --me-mention-bg: rgba(102, 217, 239, 0.15);
+    --me-mention-color: #66d9ef;
+    --me-find-bg: rgba(250, 204, 21, 0.25);
+    --me-find-active-bg: rgba(249, 115, 22, 0.55);
+    --me-bracket-bg: rgba(102, 217, 239, 0.3);
+    --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;
+    color-scheme: dark;
+  }
+}
+
+/* ── 포커스 링 — 오버레이/팝/카드 컨트롤의 focus-visible ──────────
+ * 키보드 탐색 시에만 링을 띄운다 (마우스 클릭엔 없음) */
+.me-pop-btn:focus-visible,
+.me-imgui .me-imgbtn:focus-visible,
+.me-tableui .me-tblbtn:focus-visible,
+.me-codeui .me-codebtn:focus-visible,
+.me-codeui .me-codelang:focus-visible,
+.me-codehead .me-codebtn:focus-visible,
+.me-codehead .me-codelang:focus-visible,
+.me-viewtabs button:focus-visible,
+.me-pop-theme:focus-visible,
+.me-tcell:focus-visible {
+  outline: 2px solid var(--me-editor-focus, #3b82f6);
+  outline-offset: -2px;
+}
+
+/* ── 읽기 전용 — [data-me-readonly] 마커가 편집 단서를 억제한다 ── */
+.me-root[data-me-readonly] .me-editor {
+  caret-color: transparent;
+  cursor: default;
+}
+.me-root[data-me-readonly] .me-editor:focus {
+  border-color: var(--me-border-color);
+}
+.me-frame:focus-within:has([data-me-readonly]) {
+  border-color: var(--me-border-color);
+}
+.me-root[data-me-readonly] li.me-task::before {
+  cursor: default;
+}
+
+/* ── 터치 — pointer:coarse에서는 hover 없이도 드래그 핸들이 보이고
+ * 리사이즈/열 핸들의 손가락 타겟을 키운다 (44px 접근성 관례) ── */
+@media (pointer: coarse) {
+  .me-drag-handle {
+    display: flex;
+    width: 2em;
+    height: 2em;
+    align-items: flex-start;
+    padding-top: 0.15em;
+  }
+  .me-imgui .me-img-handle {
+    width: 20px;
+    height: 20px;
+    inset-inline-end: -10px;
+    bottom: -10px;
+  }
+  .me-tableui .me-col-handle {
+    width: 16px;
+  }
 }