/* 에디터 포인트색은 --brand-color 로 브리지한다 — 하드코딩하면 브랜드색을 쓰는 사이트의 글쓰기 화면에서
   이 버튼들만 색이 튄다. 미설정이면 종전 값 그대로다 */
/* /svndex/editor/editor.css — 7dex 에디터 (Tiptap) + 이미지 업로드 모달 자기완결 스타일. * 한 줄 compact 포맷. 모든 selector = 자체 prefix (svx-editor- / svx-img-). */
/* Paperlogy 폰트 — heading 전용. self-host (/core/fonts/Paperlogy/). 본문 = Pretendard 그대로 */
@font-face { font-family:'Paperlogy'; font-weight:400; font-style:normal; font-display:swap; src:url('/core/fonts/Paperlogy/Paperlogy-4Regular.woff2') format('woff2'); }
@font-face { font-family:'Paperlogy'; font-weight:500; font-style:normal; font-display:swap; src:url('/core/fonts/Paperlogy/Paperlogy-5Medium.woff2') format('woff2'); }
@font-face { font-family:'Paperlogy'; font-weight:600; font-style:normal; font-display:swap; src:url('/core/fonts/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Paperlogy'; font-weight:700; font-style:normal; font-display:swap; src:url('/core/fonts/Paperlogy/Paperlogy-7Bold.woff2') format('woff2'); }
/* 에디터는 다크 모드와 무관하게 늘 흰 종이다(보기 화면만 다크를 입는다 — 사용자 규칙 §2026-09-29). 그래서 셸이 스스로 라이트임을 선언한다:
   color-scheme(네이티브 입력·스크롤바) · 물려줄 글자색 · 스크롤바 색 토큰(svndex-ui.css .svx-scroll 이 읽는다 — 페이지가 다크여도 셸 안은 밝은 막대).
   게시판 토큰(--nb-*)도 board-common 의 라이트 블록이 이 셸에 직접 걸어 둔다. 사이트 CSS 로 에디터를 다크로 칠하지 않는다. */
.svx-editor-shell { position:relative; display:flex; flex-direction:column; border:1px solid #e2e8f0; border-radius:10px; background:#fff; color:#0f172a; }
/* 흰 종이 선언은 셸과 대화상자 5종(body 에 붙는다 — 셸 밖이라 셸 토큰이 안 닿는다)에 같이 건다.
   브랜드 = 에디터 전용 토큰 --svx-ed-brand. 사이트는 다크에서 --brand-color 를 밝게 다시 정의하므로(강남 #14b3cf 등) 그 값을 흰 종이에 쓰면
   «브랜드 바탕 + 흰 아이콘» 이 대비 2.5 가 된다(도구줄 선택 버튼·높이 손잡이·대화상자 확인 버튼 · §2026-09-29). 흰 바탕용으로 대비를 맞춘
   --brand-color-text(pwa.php · 관리자 브랜드색에서 만든다 · 사이트가 다크에서 덮지 않는다)에서 짙은·옅은 짝을 만든다.
   ⚠️ 관리자 브랜드색이 빈 사이트는 --brand-color-text 가 없어 사이트 --brand-color 로 넘어간다(다크에서 밝은 값) — 브랜드색을 넣는 것이 답이다. */
.svx-editor-shell, .svx-img-modal, .svx-link-modal, .svx-vid-modal, .svx-btnm-modal, .svx-preview-modal { color-scheme:light; --svx-scroll-thumb:#e2e8f0; --svx-scroll-thumb-hov:#cbd5e1; --svx-scroll-thumb-act:#94a3b8; --svx-ed-brand:var(--brand-color-text, var(--brand-color, var(--c-primary, #7c3aed))); --svx-ed-brand-d:color-mix(in srgb, var(--svx-ed-brand) 84%, #000); --svx-ed-brand-soft:color-mix(in srgb, var(--svx-ed-brand) 8%, #fff); }
.svx-editor-toolbar { border-top-left-radius:10px; border-top-right-radius:10px; }
.svx-editor-shell:focus-within { border-color:var(--svx-ed-brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--svx-ed-brand) 10%, transparent); }
.svx-editor-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:8px 10px; background:#fafafa; border-bottom:1px solid #f1f5f9; }
.svx-editor-tb-sep { width:1px; height:20px; margin:0 6px; background:#e2e8f0; }   /* 좌우 10→6px — 툴바 한 줄 유지(구분선 5개 × 8px) */
.svx-editor-tb-spacer { flex:1 1 auto; min-width:0; }
.svx-editor-tb-btn[data-key="reset"]:hover { background:#fee2e2; color:#dc2626; }
.svx-editor-tb-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:0; background:transparent; color:#475569; border-radius:6px; cursor:pointer; transition:background .14s, color .14s; }
.svx-editor-tb-btn i { font-size:1.05rem; line-height:1; }
.svx-editor-tb-btn:hover { background:var(--svx-ed-brand-soft); color:var(--svx-ed-brand); }
.svx-editor-tb-btn.is-active { background:var(--svx-ed-brand); color:#fff; }
.svx-editor-tb-btn.is-active:hover { background:var(--svx-ed-brand-d); }
/* overscroll-behavior:contain — 에디터 안에서 휠을 끝까지 굴려도 바깥 화면이 따라 움직이지 않는다. */
.svx-editor-content { position:relative; padding:18px 22px 30px; height:540px; min-height:300px; overflow:auto; overscroll-behavior:contain; resize:none; scrollbar-gutter:stable; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
/* 글자 모양 = 보기 틀이 없을 때만(옛 번들 대비) — 보기 틀이 있으면 보기 화면 본문 클래스가 정한다(§2026-10-05). 본문 칸에 두면 틀 안으로 물려 들어간다. */
.svx-editor-content > .ProseMirror { font-size:1.125rem; font-weight:400; line-height:1.5; color:#0f172a; }
/* HTML 소스 모드 — One Dark 팔레트 + highlight.js 색상. textarea(투명) 위에 syntax-highlighted pre overlay. */
/* selector specificity 강화 + !important = .board-write-notice .post-form textarea 글로벌 룰의 흰 배경/검정 글자/패딩/보더 강제 override */
.svx-editor-shell .svx-source-wrap { position:relative; width:100%; min-height:300px; background:#282c34 !important; border-bottom-left-radius:10px; border-bottom-right-radius:10px; overflow:hidden; }
.svx-editor-shell .svx-source-pre { position:absolute; inset:0; margin:0; padding:18px 22px; overflow:auto; pointer-events:none; font-family:'SF Mono','Menlo','Consolas','Roboto Mono',monospace; font-size:0.875rem; line-height:1.6; color:#abb2bf; background:transparent; box-sizing:border-box; white-space:pre-wrap; word-wrap:break-word; tab-size:2; }
.svx-editor-shell .svx-source-code { display:block; background:transparent !important; padding:0 !important; color:inherit; }
.svx-editor-shell .svx-source-wrap .svx-editor-source { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; padding:18px 22px !important; margin:0 !important; border:0 !important; border-radius:0 !important; outline:0 !important; background:transparent !important; color:transparent !important; -webkit-text-fill-color:transparent !important; caret-color:#61afef !important; font-family:'SF Mono','Menlo','Consolas','Roboto Mono',monospace !important; font-size:0.875rem !important; line-height:1.6 !important; tab-size:2; resize:none !important; overflow:auto !important; white-space:pre-wrap; word-wrap:break-word; box-sizing:border-box !important; min-height:0 !important; box-shadow:none !important; transition:none !important; }
.svx-editor-shell .svx-source-wrap .svx-editor-source:focus { box-shadow:none !important; outline:0 !important; border:0 !important; }
.svx-editor-shell .svx-source-wrap .svx-editor-source::selection { background:rgba(82,139,255,0.32); -webkit-text-fill-color:#abb2bf; color:#abb2bf; }
.svx-editor-shell .svx-source-wrap .svx-editor-source::-moz-selection { background:rgba(82,139,255,0.32); -webkit-text-fill-color:#abb2bf; color:#abb2bf; }
/* highlight.js — Atom One Dark 토큰 (HTML/XML 위주) */
.svx-source-pre .hljs-comment, .svx-source-pre .hljs-quote { color:#5c6370; font-style:italic; }
.svx-source-pre .hljs-doctag, .svx-source-pre .hljs-keyword, .svx-source-pre .hljs-formula { color:#c678dd; }
.svx-source-pre .hljs-section, .svx-source-pre .hljs-name, .svx-source-pre .hljs-selector-tag, .svx-source-pre .hljs-tag { color:#e06c75; }
.svx-source-pre .hljs-attr, .svx-source-pre .hljs-attribute { color:#d19a66; }
.svx-source-pre .hljs-string, .svx-source-pre .hljs-symbol, .svx-source-pre .hljs-bullet, .svx-source-pre .hljs-meta-string { color:#98c379; }
.svx-source-pre .hljs-number, .svx-source-pre .hljs-literal, .svx-source-pre .hljs-link { color:#d19a66; }
.svx-source-pre .hljs-built_in, .svx-source-pre .hljs-class .hljs-title, .svx-source-pre .hljs-type { color:#e6c07b; }
.svx-source-pre .hljs-meta, .svx-source-pre .hljs-meta-keyword { color:#61afef; }
.svx-source-pre .hljs-emphasis { font-style:italic; }
.svx-source-pre .hljs-strong { font-weight:700; }
/* 텍스트 색상 팔레트 — default 스왓치 = X 패턴, 활성 = 외곽선 */
.svx-editor-color-swatch.is-default { background:#000; border:1px solid rgba(0,0,0,0.15); }
.svx-editor-color-swatch.is-active { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--svx-ed-brand); }
/* 표 셀 배경 '없음' 스와치 = 흰 바탕 + 빨간 대각선 */
.svx-editor-color-swatch.is-none { background:#fff; border:1px solid rgba(0,0,0,0.18); }
.svx-editor-color-swatch.is-none::before { content:""; position:absolute; inset:1px; border-radius:inherit; background:linear-gradient(to top right, transparent calc(50% - 1px), #ef4444 calc(50% - 1px), #ef4444 calc(50% + 1px), transparent calc(50% + 1px)); }
/* 표 셀 배경 '화이트' 스와치 = 흰 바탕 → 드롭다운(흰 배경)에서 안 보이지 않게 테두리 강조 */
.svx-editor-color-swatch.is-white { background:#fff; border:1px solid rgba(0,0,0,0.22); }
/* 이미지 폭 드롭다운 = 일반 panel */
.svx-editor-tb-dd-img-width { min-width:160px; }
.svx-editor-tb-dd-aux { margin-left:auto; color:#94a3b8; font-size:0.75rem; font-variant-numeric:tabular-nums; }
/* 정본은 svndex-ui.css 의 `.svx-scroll` (svndex-ui.js 가 자동 부여). 아래는 **JS 가 안 도는 경우의 폴백**으로만 남긴다 — 값이 같으므로 바꿀 때 양쪽을 함께 고친다. */
.svx-editor-content::-webkit-scrollbar { width:10px; height:10px; }
.svx-editor-content::-webkit-scrollbar-track { background:transparent; }
/* thumb 이 평소 transparent 라 "스크롤이 되는지" 알 방법이 없었다(hover 해야 나타남). 실제로 사용자가 "우측에 스크롤 관련된 게 아무 변화가 없다"고 지적. 옅게 상시 노출하고 hover 에서 진해진다. */
.svx-editor-content::-webkit-scrollbar-thumb { background:var(--svx-scroll-thumb, #e2e8f0); border-radius:5px; transition:background .15s; }
.svx-editor-content:hover::-webkit-scrollbar-thumb { background:var(--svx-scroll-thumb-hov, #cbd5e1); }
.svx-editor-content::-webkit-scrollbar-thumb:hover { background:var(--svx-scroll-thumb-act, #94a3b8); }
/* 커스텀 resize 핸들 — 중앙 하단 동그라미 + 아래 화살표. 드래그로 높이 조절. 더블클릭 = 기본 높이로 reset. */
/* §2026-09-25 — 손잡이가 본문 상자 아래 16px 를 덮어 마지막 줄(연락처 등)이 가려졌다 → 본문 아래 여백을 손잡이 높이만큼(30px). */
.svx-editor-shell button.svx-editor-resize-handle { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; justify-content:center; width:48px; height:32px; padding:0; border:1px solid var(--svx-ed-brand); border-radius:999px; background:var(--svx-ed-brand); color:#fff; cursor:ns-resize; box-shadow:0 2px 8px color-mix(in srgb, var(--svx-ed-brand) 25%, transparent); transition:background .14s, border-color .14s, transform .14s, box-shadow .14s; z-index:5; line-height:1; }
.svx-editor-shell button.svx-editor-resize-handle i { font-size:1.25rem; line-height:1; transition:transform .14s; color:#fff; display:inline-block; }
.svx-editor-shell button.svx-editor-resize-handle:hover { background:var(--svx-ed-brand-d); border-color:var(--svx-ed-brand-d); box-shadow:0 4px 12px color-mix(in srgb, var(--svx-ed-brand) 35%, transparent); }
.svx-editor-shell button.svx-editor-resize-handle:hover i { transform:translateY(1px); }
.svx-editor-shell button.svx-editor-resize-handle.is-active { background:var(--svx-ed-brand-d); border-color:var(--svx-ed-brand-d); box-shadow:0 4px 14px color-mix(in srgb, var(--svx-ed-brand) 45%, transparent); cursor:grabbing; }
body.svx-resizing { cursor:ns-resize !important; user-select:none; }
body.svx-resizing * { user-select:none !important; }
/* flow-root — 첫 문단의 위 여백(0.6em)이 이 상자 밖으로 빠져나가(여백 겹침) min-height:100% 위에 얹히면 빈 에디터도 11px 넘쳐 스크롤바가 늘 떴다.
   여백을 상자 안에 가둔다. 글자 위치는 그대로다(여백이 밖에 있든 안에 있든 첫 줄은 같은 자리). */
.svx-editor-content .ProseMirror { outline:none; min-height:100%; display:flow-root; }
/* 편집 기본 규칙 — Tiptap 이 끼우던 CSS(injectCSS:false 로 끔)에서 편집에 필요한 것만 옮겼다(§2026-10-05).
   뺀 것 = word-wrap:break-word(긴 낱말 끊기 — 보기 화면처럼 사이트·CMS CSS 가 정한다) · white-space:break-spaces(줄 끝 띄어쓰기가 자리를 차지해
   보기 화면 normal 과 줄 바뀌는 자리가 달랐다 → pre-wrap) · 합자 끄기(font-variant-ligatures:none · "liga" 0 — 문맥 대체 글자까지 꺼져
   자간을 준 사이트에서 글자 폭이 1~2px 달랐다 · 사이트 글꼴 기능 설정도 덮었다). */
.svx-editor-content .ProseMirror { position:relative; white-space:pre-wrap; }
.svx-editor-content .ProseMirror [contenteditable="false"] { white-space:normal; }
.svx-editor-content .ProseMirror [contenteditable="false"] [contenteditable="true"] { white-space:pre-wrap; }
.svx-editor-content .ProseMirror pre { white-space:pre-wrap; }
.svx-editor-content img.ProseMirror-separator { display:inline !important; border:none !important; margin:0 !important; width:0 !important; height:0 !important; }
.svx-editor-content .ProseMirror-gapcursor { display:none; pointer-events:none; position:absolute; margin:0; }
.svx-editor-content .ProseMirror-gapcursor::after { content:""; display:block; position:absolute; top:-2px; width:20px; border-top:1px solid #000; animation:svx-pm-cursor-blink 1.1s steps(2, start) infinite; }
@keyframes svx-pm-cursor-blink { to { visibility:hidden; } }
.svx-editor-content .ProseMirror-focused .ProseMirror-gapcursor { display:block; }
.svx-editor-content .ProseMirror-hideselection *::selection { background:transparent; }
.svx-editor-content .ProseMirror-hideselection * { caret-color:transparent; }
/* 크롬은 contenteditable 요소에 overflow-wrap:break-word · line-break:after-white-space 를 «속성 힌트» 로 건다(줄 끝 띄어쓰기가 자리를 차지 · 긴 낱말 끊기).
   보기 화면 본문에는 없는 값이라 부모(보기 틀) 값을 그대로 물려받게 되돌린다 — 특이도 0 이라 보기 CSS 가 본문 클래스에 직접 건 값은 그대로 이긴다. */
:where(.svx-editor-content .ProseMirror) { overflow-wrap:inherit; line-break:inherit; }
/* 보기 틀(§2026-10-05 대표님 «에디터에 보이는 것 = 실제 보기 페이지») — 편집기 본문(ProseMirror)이 보기 화면 본문과 같은 클래스를 단다
   (게시판 board-view > post-content · 고객지원 sdx-support-body · 문의 말풍선 sdx-sup-bub > bb · 콘텐츠 svx-content · 비급여 · FAQ — svndex-editor.js VIEW_FRAMES).
   글 모양은 보기 CSS 한 벌이 정하고, 여기서는 «상자» 만 지운다 — 여백·테두리·배경·그림자·최소 높이·최대 너비(에디터는 늘 흰 종이 · §12-119).
   틀이 여러 겹이면(법정 고지) 겹마다 지운다. 특이도 0,5,0 — 사이트 스킨의 본문 상자 규칙(.bon-board .board-view .post-content = 0,3,0)도 이긴다. 글자 크기·줄 간격·색은 건드리지 않는다. */
/* 사이트 CSS 다리(svndex-editor.js _siteBridge)의 html · body 두 겹(.svx-view-scope)도 같은 «상자 없음» 이다. 미리보기 창도 같은 틀을 쓴다(0,4,0). */
.svx-editor-shell .svx-editor-content .svx-view-frame.svx-view-frame, .svx-editor-shell .svx-editor-content .svx-view-scope.svx-view-scope,
.svx-preview-modal .svx-preview-html .svx-view-frame.svx-view-frame, .svx-preview-modal .svx-preview-html .svx-view-scope.svx-view-scope { display:block; position:static; inset:auto; z-index:auto; width:auto; max-width:none; min-width:0; height:auto; max-height:none; min-height:100%; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; outline:0; float:none; gap:0; columns:auto; cursor:auto; overflow:visible; transform:none; translate:none; rotate:none; scale:none; filter:none; backdrop-filter:none; opacity:1; visibility:visible; clip-path:none; mask:none; animation:none; transition:none; contain:none; content-visibility:visible; }
/* ↑ 사이트 페이지에서 옮긴 칸은 그 페이지의 배치 클래스(여백·격자·최대 너비)와 «스크롤하면 나타나기» 같은 처음 상태(투명 · 밀림)까지 달고 온다 — 상자·움직임은 다 지운다. */
.svx-editor-shell .svx-editor-content .svx-view-frame > .ProseMirror.ProseMirror,
.svx-preview-modal .svx-preview-html .svx-view-frame > .svx-view-body.svx-view-body { display:flow-root; position:static; width:auto; max-width:none; min-width:0; min-height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; float:none; overflow:visible; animation:none; }
/* 표 — 편집기만 표를 한 겹 더 감싼다(.tableWrapper · 칸 폭 조절). 그 겹은 간격도 «스크롤 상자» 도 갖지 않는다 — 스크롤 상자면
   표의 위아래 여백이 앞뒤 문단·구분선 여백과 겹쳐지지 않아 보기 화면보다 벌어진다(실측: 구분선 뒤 표 9px). 표 간격은 보기 CSS 의 table 규칙이 정한다. */
.svx-editor-content .svx-view-frame .tableWrapper { margin:0; padding:0; border:0; overflow:visible; }
/* 사이트 CSS 다리가 붙기 전(그 사이트 페이지 CSS 를 받는 중)에는 칸을 가린다 — 최대 4초(svndex-editor.js) */
.svx-editor-shell .svx-editor-content .svx-site-root.svx-view-scope.is-svx-site-pending { opacity:0; pointer-events:none; }
/* 색 변수·본문 요소 색의 어두운 화면 값은 svndex-editor.js _lightPin 이 에디터를 띄울 때 밝은 화면 값으로 고정한다(사이트·관리자 공통 · 값을 여기 다시 적지 않는다). */
.svx-editor-content .ProseMirror p.is-editor-empty:first-child::before { content:attr(data-placeholder); float:left; color:#94a3b8; pointer-events:none; height:0; }
/* 흰 종이 안의 글자색은 셸에서 물려받는다 — 페이지 전역 요소 규칙(예: 사이트의 h1~h4 { color: var(--c-ink) })이 다크에서 밝은 색으로
   바뀌어 흰 종이 위에 그대로 들어왔다(대비 1.26 · §2026-09-29). 이 파일은 사이트 CSS 뒤에 실리므로 같은 특이도에서 이긴다.
   자기 색이 있는 요소(h6·보조 문단·인용·링크·코드·표시)는 아래 개별 규칙이 뒤에 있어 그대로 이긴다. */
.svx-editor-content > .ProseMirror :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, strong, em, b, i, u, s, figcaption) { color:inherit; }
/* 에디터 + view 페이지 통일 — 본문 1.125rem · 보조 1rem · h1-h4 = 2.5/2.0/1.5/1.25rem. heading 4종 + 보조(h5) = Paperlogy 폰트 */
.svx-editor-content > .ProseMirror h1 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:2.5rem; font-weight:700; line-height:1.3; margin:1em 0 0.5em; }
/* 제목(h2~h5) — 4단. 크기 내림차순. Paperlogy(폴백 Pretendard). */
.svx-editor-content > .ProseMirror h2 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:1.8rem; font-weight:600; line-height:1.3; margin:1em 0 0.5em; }
.svx-editor-content > .ProseMirror h3 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:1.6rem; font-weight:600; line-height:1.3; margin:1em 0 0.5em; }
.svx-editor-content > .ProseMirror h4 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:1.4rem; font-weight:500; line-height:1.3; margin:1em 0 0.5em; }
.svx-editor-content > .ProseMirror h5 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:1.25rem; font-weight:500; line-height:1.3; margin:1em 0 0.5em; }
.svx-editor-content > .ProseMirror h6 { font-size:0.875rem; font-weight:400; line-height:1.5; margin:1em 0 0.4em; color:#475569; }
.svx-editor-content > .ProseMirror p { font-size:1.125rem; font-weight:400; line-height:1.5; margin:0.6em 0; }
/* 본문 변형 — 보조(2단)/주석은 heading 이 아니라 <p> 변형 (시맨틱). 크기·색만 다름. */
.svx-editor-content > .ProseMirror p.svx-sub { font-size:1rem; color:#475569; }
.svx-editor-content > .ProseMirror p.svx-sub2 { font-size:0.9rem; color:#475569; }
.svx-editor-content > .ProseMirror p.svx-note { font-size:0.85rem; color:#475569; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul { padding-left:1.6em; margin:0.6em 0; list-style:disc; }
.svx-editor-shell .svx-editor-content > .ProseMirror ol { padding-left:1.6em; margin:0.6em 0; list-style:decimal; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul ul { list-style:circle; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul ul ul { list-style:square; }
.svx-editor-shell .svx-editor-content > .ProseMirror li { margin:0.2em 0; }
.svx-editor-shell .svx-editor-content > .ProseMirror li > p { margin:0; }
.svx-editor-shell .svx-editor-content > .ProseMirror li::marker { color:#475569; }
.svx-editor-content > .ProseMirror blockquote { padding:8px 16px; margin:0.8em 0; border-left:3px solid #cbd5e1; color:#64748b; }
.svx-editor-content > .ProseMirror hr { border:0; border-top:1px solid #e2e8f0; margin:1.5em 0; }
/* 링크 = 에디터 브랜드(--svx-ed-brand = 흰 바탕용 --brand-color-text 에서 만든다). 사이트 --brand-color 는 다크에서 밝아져 흰 종이 위 대비 2.0~2.5 였다(§2026-09-29). */
.svx-editor-content > .ProseMirror a { color:var(--svx-ed-brand); text-decoration:underline; text-underline-offset:2px; }
.svx-editor-content > .ProseMirror code { padding:2px 6px; background:#f1f5f9; border-radius:4px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.92em; }
.svx-editor-content > .ProseMirror pre { padding:14px 16px; background:#0f172a; color:#f8fafc; border-radius:8px; overflow-x:auto; }
.svx-editor-content > .ProseMirror pre code { padding:0; background:transparent; color:inherit; }
.svx-editor-content > .ProseMirror img.svx-editor-img { max-width:100%; height:auto; border-radius:6px; margin:0.6em 0; display:block; }
/* 이미지 폭 옵션 (Tiptap toolbar 의 imgwidth dropdown 과 매칭) — view 페이지의 skin.scss 와 동일 정책 */
.svx-editor-content > .ProseMirror img.svx-editor-img.svx-img-w-25 { width:25%; max-width:25%; height:auto; }
.svx-editor-content > .ProseMirror img.svx-editor-img.svx-img-w-50 { width:50%; max-width:50%; height:auto; }
.svx-editor-content > .ProseMirror img.svx-editor-img.svx-img-w-75 { width:75%; max-width:75%; height:auto; }
.svx-editor-content > .ProseMirror img.svx-editor-img.svx-img-w-100 { width:100%; max-width:100%; height:auto; }
.svx-editor-content > .ProseMirror mark { background:#fef3c7; color:#92400e; padding:0 3px; border-radius:3px; }
.svx-editor-content > .ProseMirror sup { vertical-align:super; font-size:0.75em; }
.svx-editor-content > .ProseMirror sub { vertical-align:sub; font-size:0.75em; }
.svx-editor-content > .ProseMirror [style*="text-align:center"], .svx-editor-content > .ProseMirror [style*="text-align: center"] { text-align:center; }
.svx-editor-content > .ProseMirror [style*="text-align:right"], .svx-editor-content > .ProseMirror [style*="text-align: right"] { text-align:right; }
.svx-editor-content > .ProseMirror [style*="text-align:justify"], .svx-editor-content > .ProseMirror [style*="text-align: justify"] { text-align:justify; }
/* 체크리스트 */
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist { list-style:none; padding-left:0; margin:0.6em 0; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist li.svx-editor-taskitem { display:grid; grid-template-columns:20px 1fr; column-gap:6px; align-items:start; padding:3px 0; margin:0; list-style:none; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist li.svx-editor-taskitem > label { grid-column:1; grid-row:1; display:inline-flex; align-items:center; justify-content:center; width:22px; height:1.7em; line-height:1.7; padding:0; margin:0; user-select:none; cursor:pointer; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist li.svx-editor-taskitem > label input[type="checkbox"] { width:16px; height:16px; margin:0; padding:0; accent-color:var(--svx-ed-brand); cursor:pointer; vertical-align:middle; flex:0 0 auto; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist li.svx-editor-taskitem > label > span { display:none; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist li.svx-editor-taskitem > div { grid-column:2; grid-row:1; min-width:0; line-height:1.7; transform:translateY(-3px); }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist li.svx-editor-taskitem > div > p { margin:0; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist li.svx-editor-taskitem[data-checked="true"] > div { color:inherit; text-decoration:none; font-weight:500; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist ul.svx-editor-tasklist { padding-left:26px; margin:0.2em 0; }
.svx-editor-shell .svx-editor-content > .ProseMirror ul.svx-editor-tasklist li.svx-editor-taskitem::marker { content:''; }
/* 이미지 클릭 = NodeSelection. 명확한 시각 강조 (테두리 + 그림자) — 정렬 / 링크 작업 직관성 ↑. */
.svx-editor-content img.svx-editor-img { cursor:pointer; transition:box-shadow .14s, outline-color .14s; outline:2px solid transparent; outline-offset:2px; }
.svx-editor-content img.svx-editor-img:hover { box-shadow:0 0 0 1px #cbd5e1, 0 4px 12px rgba(0,0,0,0.08); }
.svx-editor-content .ProseMirror-selectednode img.svx-editor-img, .svx-editor-content img.svx-editor-img.ProseMirror-selectednode { outline-color:var(--svx-ed-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--svx-ed-brand) 20%, transparent), 0 8px 20px color-mix(in srgb, var(--svx-ed-brand) 18%, transparent); }
.svx-editor-content .ProseMirror-selectednode { outline:2px solid var(--svx-ed-brand); outline-offset:2px; border-radius:6px; }
/* 헤딩 드롭다운 */
.svx-editor-tb-dd { position:relative; display:inline-flex; align-items:center; height:34px; }
/* 일반 dropdown trigger (icon + caret 만) = 컴팩트. heading 만 label 있어 :has(label) 로 별도 폭 확보. */
.svx-editor-tb-dd-trigger { width:auto !important; padding:0 5px 0 7px !important; gap:3px; min-width:0; }
.svx-editor-tb-dd-trigger:has(.svx-editor-tb-dd-label) { padding:0 8px !important; gap:5px; }
/* 드롭다운 메인 아이콘은 단독 버튼과 같은 크기를 유지한다 — 같은 특이도라 소스 순서로 지면
   이 아이콘만 작아지고 캐럿과 세로 중앙이 어긋난다. :first-child 로 캐럿과 분리한다 */
.svx-editor-tb-dd-trigger i:first-child { font-size:1.05rem; line-height:1; }
.svx-editor-tb-dd-label { font-size:0.8125rem; color:#475569; font-weight:500; min-width:36px; white-space:nowrap; }
.svx-editor-tb-dd-trigger.is-active .svx-editor-tb-dd-label { color:#fff; }
.svx-editor-tb-dd-caret { font-size:0.6rem !important; line-height:1; opacity:0.55; align-self:center; }
.svx-editor-tb-dd-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:20; min-width:170px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04); padding:8px; display:flex; flex-direction:column; gap:2px; }
.svx-editor-tb-dd-menu[hidden] { display:none; }
.svx-editor-shell button.svx-editor-tb-dd-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border:0; background:transparent; color:#0f172a; font-size:0.8125rem; text-align:left; cursor:pointer; border-radius:6px; line-height:1.3; }
.svx-editor-shell button.svx-editor-tb-dd-item i { font-size:0.95rem; color:#64748b; flex:0 0 auto; }
.svx-editor-shell button.svx-editor-tb-dd-item:hover { background:#f1f5f9; }
.svx-editor-shell button.svx-editor-tb-dd-item:hover i { color:var(--svx-ed-brand); }
.svx-editor-shell button.svx-editor-tb-dd-item.is-active { background:var(--svx-ed-brand-soft); color:var(--svx-ed-brand); font-weight:600; }
.svx-editor-shell button.svx-editor-tb-dd-item.is-active i { color:var(--svx-ed-brand); }
.svx-editor-tb-dd-item { padding:8px 12px; border:0; background:transparent; color:#0f172a; font-size:0.8125rem; text-align:left; cursor:pointer; border-radius:6px; }
.svx-editor-tb-dd-item:hover { background:#f1f5f9; }
.svx-editor-tb-dd-item.is-active { background:var(--svx-ed-brand-soft); color:var(--svx-ed-brand); font-weight:600; }
/* 줄간격 팝오버 — 프리셋 버튼 + 미세조절 슬라이더 */
.svx-editor-tb-dd-menu.svx-editor-tb-dd-lh-panel { min-width:212px; gap:0; }
.svx-editor-tb-dd-lh-presets { display:flex; gap:4px; }
.svx-editor-shell button.svx-editor-tb-dd-lh-preset { flex:1 1 0; padding:6px 4px; border:1px solid #e2e8f0; background:#fff; color:#334155; font-size:0.75rem; font-weight:500; text-align:center; cursor:pointer; border-radius:6px; transition:background .12s, border-color .12s, color .12s; }
.svx-editor-shell button.svx-editor-tb-dd-lh-preset:hover { background:var(--svx-ed-brand-soft); border-color:color-mix(in srgb, var(--svx-ed-brand) 42%, transparent); color:var(--svx-ed-brand-d); }
.svx-editor-shell button.svx-editor-tb-dd-lh-preset.is-active { background:var(--svx-ed-brand); border-color:var(--svx-ed-brand); color:#fff; }
.svx-editor-tb-dd-lh-panel .svx-editor-tb-dd-divider { height:1px; background:#e2e8f0; margin:8px 0; }
.svx-editor-tb-dd-lh-slider { display:flex; flex-direction:column; gap:7px; padding:0 2px 2px; }
.svx-editor-tb-dd-lh-slhead { display:flex; align-items:center; justify-content:space-between; font-size:0.75rem; color:#64748b; }
.svx-editor-tb-dd-lh-val { font-size:0.8125rem; font-weight:700; color:var(--svx-ed-brand-d); font-variant-numeric:tabular-nums; }
.svx-editor-tb-dd-lh-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:linear-gradient(#e2e8f0,#e2e8f0); accent-color:var(--svx-ed-brand); cursor:pointer; margin:0; }
.svx-editor-tb-dd-lh-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--svx-ed-brand); border:2px solid #fff; box-shadow:0 1px 4px color-mix(in srgb, var(--svx-ed-brand) 40%, transparent); cursor:pointer; }
.svx-editor-tb-dd-lh-range::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--svx-ed-brand); border:2px solid #fff; box-shadow:0 1px 4px color-mix(in srgb, var(--svx-ed-brand) 40%, transparent); cursor:pointer; }
/* heading 드롭다운 미리보기 — 실제 본문 비율 (h1=2.5/h2=2/h3=1.5/h4=1.25rem · 700/600/600/500) 을 컴팩트하게 압축 */
/* heading 드롭다운 미리보기 = 실제 본문 적용 값 그대로 (typographic preview) */
.svx-editor-shell button.svx-editor-tb-dd-body-xl { font-size:1.375rem; font-weight:400; line-height:1.6; }
.svx-editor-shell button.svx-editor-tb-dd-body-lg { font-size:1.25rem; font-weight:400; line-height:1.6; }
.svx-editor-shell button.svx-editor-tb-dd-p { font-size:1.125rem; font-weight:400; line-height:1.7; }
.svx-editor-shell button.svx-editor-tb-dd-sub { font-size:1rem; font-weight:400; line-height:1.5; color:#475569; }
.svx-editor-shell button.svx-editor-tb-dd-sub2 { font-size:0.9rem; font-weight:400; line-height:1.5; color:#475569; }
.svx-editor-shell button.svx-editor-tb-dd-note { font-size:0.85rem; font-weight:400; line-height:1.5; color:#475569; }
.svx-editor-shell button.svx-editor-tb-dd-h2-2xl { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:2.5rem; font-weight:600; line-height:1.3; }
.svx-editor-shell button.svx-editor-tb-dd-h2-xl { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:2.25rem; font-weight:600; line-height:1.3; }
.svx-editor-shell button.svx-editor-tb-dd-h2 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:1.8rem; font-weight:600; line-height:1.3; }
.svx-editor-shell button.svx-editor-tb-dd-h3 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:1.6rem; font-weight:600; line-height:1.3; }
.svx-editor-shell button.svx-editor-tb-dd-h4 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:1.4rem; font-weight:500; line-height:1.3; }
.svx-editor-shell button.svx-editor-tb-dd-h5 { font-family:'Paperlogy','Pretendard',-apple-system,sans-serif; font-size:1.25rem; font-weight:500; line-height:1.3; }
/* 하이라이트 색상 팝오버 */
.svx-editor-tb-dd-color { padding:10px; min-width:160px; }
.svx-editor-color-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
.svx-editor-shell button.svx-editor-color-swatch { width:24px; height:24px; padding:0; border:1px solid rgba(0,0,0,0.08); border-radius:6px; cursor:pointer; transition:transform .12s, border-color .12s, box-shadow .12s; }
.svx-editor-shell button.svx-editor-color-swatch:hover { transform:scale(1.12); border-color:var(--svx-ed-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--svx-ed-brand) 15%, transparent); }
.svx-editor-shell button.svx-editor-color-clear { margin-top:8px; padding-top:8px; border-top:1px solid #f1f5f9; border-radius:0; font-size:0.75rem; color:#64748b; }
.svx-editor-shell button.svx-editor-color-clear:hover { color:#dc2626; }
.svx-editor-shell button.svx-editor-color-clear:hover i { color:#dc2626; }
/* 이모지 픽커 */
.svx-editor-tb-dd-emoji { padding:10px; min-width:280px; max-height:340px; overflow-y:auto; }
.svx-editor-emoji-head { display:block; padding:6px 4px 4px; color:#94a3b8; font-size:0.6875rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.svx-editor-emoji-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; padding:0 0 4px; }
.svx-editor-shell button.svx-editor-emoji-cell { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; background:transparent; font-size:1.25rem; line-height:1; cursor:pointer; border-radius:6px; transition:background .12s, transform .12s; }
.svx-editor-shell button.svx-editor-emoji-cell:hover { background:#f1f5f9; transform:scale(1.1); }
/* 이미지 정렬 */
.svx-editor-tb-dd-img-align { min-width:240px; }
.svx-editor-shell button.svx-editor-tb-btn.is-disabled { opacity:0.4; cursor:not-allowed; }
.svx-editor-shell button.svx-editor-tb-btn.is-disabled:hover { background:transparent; color:inherit; }
/* 커스텀 툴팁 버블 — 모든 [data-tooltip] 에 적용. 마우스 호버 시 위쪽에 어두운 배경 + 화살표. */
.svx-editor-toolbar [data-tooltip] { position:relative; }
.svx-editor-toolbar [data-tooltip]:hover::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:5px 10px; background:rgba(15,23,42,0.95); color:#fff; font-size:0.7375rem; font-weight:500; white-space:nowrap; border-radius:6px; pointer-events:none; z-index:50; box-shadow:0 4px 12px rgba(0,0,0,0.18); animation:svx-tip-in .14s ease-out; }
/* 화살표 ::before = 색상 스와치 제외 — 스와치는 자체 툴팁(::after, 아래)이 있고, '없음' 스와치의 빨간 대각선 ::before 가 이 화살표 규칙에 덮여 호버 시 어두운 삼각형으로 찌그러지는 버그 방지. */
.svx-editor-toolbar [data-tooltip]:not(.svx-editor-color-swatch):hover::before { content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:rgba(15,23,42,0.95); pointer-events:none; z-index:50; animation:svx-tip-in .14s ease-out; }
@keyframes svx-tip-in { from { opacity:0; transform:translateX(-50%) translateY(2px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.svx-editor-shell button.svx-editor-color-swatch[data-tooltip] { position:relative; }
.svx-editor-shell button.svx-editor-color-swatch[data-tooltip]:hover::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); padding:4px 9px; background:rgba(15,23,42,0.95); color:#fff; font-size:0.6875rem; white-space:nowrap; border-radius:5px; pointer-events:none; z-index:50; }
/* 본문 안 이미지 align 표시 (편집 중 + view 페이지 동일) */
.svx-editor-content > .ProseMirror img[data-align="center"] { display:block; margin-left:auto; margin-right:auto; float:none; }
.svx-editor-content > .ProseMirror img[data-align="right"] { float:right; margin:0 0 1em 1em; }
.svx-editor-content > .ProseMirror img[data-align="left"] { float:left; margin:0 1em 1em 0; }
/* 이미지 업로드 모달 ──────────────────────────────────── */
.svx-img-modal { position:fixed; inset:0; z-index:11000; display:flex; align-items:center; justify-content:center; padding:24px; }
.svx-img-modal[hidden] { display:none; }
.svx-img-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.5); animation:svx-fade-in .18s ease-out; }
.svx-img-panel { position:relative; width:100%; max-width:560px; max-height:88vh; background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.2); display:flex; flex-direction:column; overflow:hidden; animation:svx-slide-in .22s cubic-bezier(.4,0,.2,1); }
.svx-img-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid #f1f5f9; }
.svx-img-head h3 { margin:0; display:inline-flex; align-items:center; gap:8px; font-size:1.125rem; font-weight:700; color:#0f172a; letter-spacing:-0.01em; }
.svx-img-head h3 i { color:var(--svx-ed-brand); }
.svx-img-close { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; background:transparent; color:#64748b; cursor:pointer; border-radius:50%; transition:background .14s, color .14s; }
.svx-img-close i { font-size:1.125rem; }
.svx-img-close:hover { background:#f1f5f9; color:#0f172a; }
.svx-img-hint { margin:0; padding:10px 22px 0; color:#64748b; font-size:0.8125rem; }
.svx-img-dropzone { margin:14px 22px; padding:24px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; border:2px dashed #cbd5e1; border-radius:10px; background:#fafafa; color:#64748b; text-align:center; transition:border-color .14s, background .14s; cursor:pointer; }
.svx-img-dropzone:hover { border-color:var(--svx-ed-brand); background:var(--svx-ed-brand-soft); }
.svx-img-dropzone.is-drag { border-color:var(--svx-ed-brand); background:var(--svx-ed-brand-soft); border-style:solid; }
.svx-img-dropzone i { font-size:2rem; color:#94a3b8; }
.svx-img-dropzone strong { color:#0f172a; font-weight:600; font-size:0.9375rem; }
.svx-img-pick-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:0; background:#0f172a; color:#fff; border-radius:999px; font-size:0.875rem; font-weight:500; cursor:pointer; transition:background .14s, transform .14s; }
.svx-img-pick-btn:hover { background:#1e293b; transform:translateY(-1px); }
.svx-img-hint-sub { color:#94a3b8; font-size:0.75rem; }
.svx-img-list { flex:1; min-height:0; overflow-y:auto; list-style:none; padding:6px 14px; margin:0; display:flex; flex-direction:column; gap:6px; }
.svx-img-list:empty { padding:0; }
.svx-img-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; transition:border-color .14s, background .14s, transform .12s; }
.svx-img-item.is-pending, .svx-img-item.is-uploading { background:#fafafa; }
.svx-img-item.is-error { border-color:#fecaca; background:#fef2f2; }
.svx-img-item.is-done:hover { border-color:#cbd5e1; cursor:grab; }
.svx-img-item.is-dragging { opacity:0.4; }
.svx-img-item.is-drop-target { border-color:var(--svx-ed-brand); transform:translateY(-2px); }
.svx-img-handle { display:inline-flex; align-items:center; justify-content:center; width:20px; color:#94a3b8; cursor:grab; flex:0 0 auto; }
.svx-img-handle i { font-size:1rem; }
.svx-img-item.is-pending .svx-img-handle, .svx-img-item.is-uploading .svx-img-handle { opacity:0.3; cursor:not-allowed; }
.svx-img-thumb { flex:0 0 auto; width:48px; height:48px; border-radius:6px; overflow:hidden; background:#f1f5f9; }
.svx-img-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.svx-img-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.svx-img-name { font-size:0.875rem; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svx-img-sub { font-size:0.75rem; color:#64748b; }
.svx-img-progress { display:block; width:100%; height:3px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
.svx-img-progress-bar { display:block; height:100%; background:var(--svx-ed-brand); transition:width .15s ease-out; }
.svx-img-item.is-done .svx-img-progress { display:none; }
.svx-img-item.is-error .svx-img-progress-bar { background:#dc2626; }
.svx-img-error { color:#dc2626; font-size:0.7375rem; }
.svx-img-remove { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; background:transparent; color:#94a3b8; cursor:pointer; border-radius:50%; flex:0 0 auto; transition:background .14s, color .14s; }
.svx-img-remove i { font-size:1rem; }
.svx-img-remove:hover { background:#fee2e2; color:#dc2626; }
.svx-img-actions { padding:14px 22px; border-top:1px solid #f1f5f9; display:flex; align-items:center; gap:8px; }
.svx-img-summary { flex:1; color:#64748b; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.svx-img-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border:1px solid #e2e8f0; background:#fff; color:#475569; border-radius:999px; font-size:0.875rem; font-weight:500; cursor:pointer; transition:background .14s, border-color .14s, color .14s; }
.svx-img-btn:hover { background:#fafafa; border-color:#cbd5e1; }
.svx-img-btn-primary { background:var(--svx-ed-brand); border-color:var(--svx-ed-brand); color:#fff; }
.svx-img-btn-primary:hover { background:var(--svx-ed-brand-d); border-color:var(--svx-ed-brand-d); color:#fff; }
.svx-img-btn-primary:disabled { background:#cbd5e1; border-color:#cbd5e1; color:#fff; cursor:not-allowed; }
body.svx-img-modal-open { overflow:hidden; }
body.svx-preview-open { overflow:hidden; }
/* 표 — 에디터 내 + view 페이지 통일 */
.svx-editor-content > .ProseMirror table.svx-editor-table, .svx-editor-content > .ProseMirror table { width:100%; border-collapse:collapse; margin:0.5em 0; table-layout:fixed; }
/* 표 안쪽 table 자체 margin 은 0 — 상하 간격은 .tableWrapper 가 담당 (아래 줄) */
.svx-editor-content > .ProseMirror .tableWrapper table { margin:0; }
/* 표 전체 선택(NodeSelection) 시각 강조 */
.svx-editor-content .tableWrapper.ProseMirror-selectednode, .svx-editor-content table.ProseMirror-selectednode { outline:2px solid var(--svx-ed-brand); outline-offset:2px; border-radius:2px; }
.svx-editor-content > .ProseMirror table th, .svx-editor-content > .ProseMirror table td { border:1px solid #e5e7eb; padding:8px 10px; vertical-align:middle; text-align:left; min-width:1em; position:relative; word-break:break-word; }
.svx-editor-content > .ProseMirror table th { background:#f8fafc; font-weight:600; }
.svx-editor-content table .selectedCell { position:relative; }
.svx-editor-content table .selectedCell::after { content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--svx-ed-brand) 12%, transparent); pointer-events:none; }
.svx-editor-content table .column-resize-handle { position:absolute; right:-2px; top:0; bottom:-2px; width:4px; background:var(--svx-ed-brand); opacity:0; pointer-events:none; }
.svx-editor-content table:hover .column-resize-handle, .svx-editor-content .resize-cursor table .column-resize-handle { opacity:0.6; pointer-events:auto; cursor:col-resize; }
.svx-editor-content > .ProseMirror .tableWrapper { overflow-x:auto; margin:0.5em 0; }
/* table dropdown — 컴팩트 패널 + 구분선 */
.svx-editor-tb-dd-table { min-width:240px; }
.svx-editor-tb-dd-divider { display:block; height:1px; margin:6px 4px; background:#e2e8f0; }
/* 셀 배경색 swatch row — 라벨 + 7색 grid */
/* 표 만들기 — 행 x 열 직접 입력 */
.svx-editor-tb-dd-sizelabel { display:inline-flex; align-items:center; gap:8px; padding:8px 12px 4px; font-size:0.8125rem; color:#0f172a; }
.svx-editor-tb-dd-sizelabel i { font-size:0.95rem; color:#64748b; }
.svx-editor-tb-dd-sizerow { display:flex; align-items:center; gap:6px; padding:0 12px 8px; }
.svx-editor-tb-dd-sizeinput { width:48px; height:30px; padding:0 6px; border:1px solid #cbd5e1; border-radius:6px; font-size:0.8125rem; text-align:center; color:#0f172a; background:#fff; -moz-appearance:textfield; }
.svx-editor-tb-dd-sizeinput:focus { outline:none; border-color:var(--svx-ed-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--svx-ed-brand) 15%, transparent); }
.svx-editor-tb-dd-sizex { color:#64748b; font-size:0.8125rem; font-weight:600; }
.svx-editor-shell button.svx-editor-tb-dd-sizebtn { margin-left:auto; height:30px; padding:0 14px; border:0; border-radius:6px; background:var(--svx-ed-brand); color:#fff; font-size:0.8125rem; font-weight:600; cursor:pointer; transition:background .12s; }
.svx-editor-shell button.svx-editor-tb-dd-sizebtn:hover { background:var(--svx-ed-brand-d); }
.svx-editor-tb-dd-bgrow { display:flex; flex-direction:column; gap:6px; padding:8px 12px; }
.svx-editor-tb-dd-bgrow.is-disabled { opacity:0.4; pointer-events:none; }
.svx-editor-tb-dd-bglabel { display:inline-flex; align-items:center; gap:8px; font-size:0.8125rem; color:#0f172a; }
.svx-editor-tb-dd-bglabel i { font-size:0.95rem; color:#64748b; }
.svx-editor-tb-dd-bggrid { display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
.svx-editor-tb-dd-bggrid .svx-editor-color-swatch { width:24px; height:24px; }
.svx-editor-shell button.svx-editor-tb-dd-item.is-disabled { opacity:0.4; cursor:not-allowed; }
.svx-editor-shell button.svx-editor-tb-dd-item.is-disabled:hover { background:transparent; }
/* 미리보기 모달 — view 페이지 1300px 폭. modal z-index = 11300 (이미지 / 링크 모달보다 높음) */
.svx-preview-modal { position:fixed; inset:0; z-index:11300; display:flex; align-items:center; justify-content:center; padding:24px; }
.svx-preview-modal[hidden] { display:none; }
.svx-preview-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.55); backdrop-filter:blur(2px); }
.svx-preview-panel { position:relative; width:min(100%, 1300px); max-height:88vh; background:#fff; border-radius:14px; box-shadow:0 28px 72px rgba(0,0,0,0.32); display:flex; flex-direction:column; overflow:hidden; }
.svx-preview-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid #e2e8f0; background:#fff; flex:0 0 auto; }
.svx-preview-head h3 { margin:0; font-size:1rem; font-weight:600; display:inline-flex; align-items:center; gap:8px; color:#0f172a; }
.svx-preview-head h3 i { color:var(--svx-ed-brand); }
.svx-preview-close { width:32px; height:32px; border:0; background:transparent; color:#64748b; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .14s, color .14s; }
.svx-preview-close:hover { background:#f1f5f9; color:#0f172a; }
.svx-preview-body { flex:1 1 auto; overflow:auto; padding:28px 32px; }
.svx-preview-body.is-loading { display:flex; align-items:center; justify-content:center; min-height:240px; }
.svx-preview-loading { display:inline-flex; align-items:center; gap:10px; color:#64748b; }
.svx-preview-loading i { font-size:1.25rem; animation:svx-spin 1s linear infinite; }
.svx-preview-empty { color:#94a3b8; text-align:center; padding:60px 0; }
.svx-preview-error { color:#dc2626; padding:24px; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; display:inline-flex; align-items:center; gap:10px; }
.svx-preview-foot { padding:10px 22px; border-top:1px solid #e2e8f0; background:#fafafa; flex:0 0 auto; }
.svx-preview-hint { font-size:0.75rem; color:#94a3b8; }
@keyframes svx-spin { to { transform:rotate(360deg); } }
@media (max-width:720px) { .svx-preview-modal { padding:0; } .svx-preview-panel { width:100%; height:100%; max-height:100%; border-radius:0; } .svx-preview-body { padding:18px; } }
/* 링크 모달 ────────────────────────────────────────── */
.svx-link-modal { position:fixed; inset:0; z-index:11200; display:flex; align-items:center; justify-content:center; padding:24px; }
.svx-link-modal[hidden] { display:none; }
.svx-link-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.5); animation:svx-fade-in .18s ease-out; }
.svx-link-panel { position:relative; width:100%; max-width:440px; background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.2); display:flex; flex-direction:column; overflow:hidden; animation:svx-slide-in .22s cubic-bezier(.4,0,.2,1); }
.svx-link-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid #f1f5f9; }
.svx-link-head h3 { margin:0; display:inline-flex; align-items:center; gap:8px; font-size:1.0625rem; font-weight:700; color:#0f172a; letter-spacing:-0.01em; }
.svx-link-head h3 i { color:var(--svx-ed-brand); }
.svx-link-close { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; background:transparent; color:#64748b; cursor:pointer; border-radius:50%; transition:background .14s, color .14s; }
.svx-link-close i { font-size:1.125rem; }
.svx-link-close:hover { background:#f1f5f9; color:#0f172a; }
.svx-link-body { padding:18px 22px; display:flex; flex-direction:column; gap:14px; }
.svx-link-field { display:flex; flex-direction:column; gap:6px; }
.svx-link-label { font-size:0.8125rem; font-weight:600; color:#475569; }
.svx-link-modal input.svx-link-url { width:100%; padding:10px 14px; border:1px solid #e2e8f0; border-radius:8px; font-size:0.9375rem; color:#0f172a; transition:border-color .14s, box-shadow .14s; }
.svx-link-modal input.svx-link-url:focus { outline:none; border-color:var(--svx-ed-brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--svx-ed-brand) 12%, transparent); }
.svx-link-hint { color:#94a3b8; font-size:0.7375rem; }
.svx-link-toggle { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:#fafafa; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer; user-select:none; font-size:0.8125rem; color:#0f172a; transition:background .14s, border-color .14s; }
.svx-link-toggle:hover { background:var(--svx-ed-brand-soft); border-color:#cbd5e1; }
.svx-link-toggle input[type="checkbox"] { width:16px; height:16px; margin:0; accent-color:var(--svx-ed-brand); cursor:pointer; flex:0 0 auto; }
.svx-link-toggle:has(input:checked) { background:var(--svx-ed-brand-soft); border-color:var(--svx-ed-brand); color:var(--svx-ed-brand); }
.svx-link-toggle i { color:#94a3b8; font-size:1rem; }
.svx-link-toggle:has(input:checked) i { color:var(--svx-ed-brand); }
.svx-link-actions { padding:14px 22px; border-top:1px solid #f1f5f9; display:flex; align-items:center; gap:8px; }
.svx-link-spacer { flex:1; }
.svx-link-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border:1px solid #e2e8f0; background:#fff; color:#475569; border-radius:999px; font-size:0.875rem; font-weight:500; cursor:pointer; transition:background .14s, border-color .14s, color .14s; }
.svx-link-btn:hover { background:#fafafa; border-color:#cbd5e1; }
/* ⚠ [hidden] 을 명시해야 한다 — 위 display:inline-flex 가 브라우저 기본 [hidden]{display:none} 을 이겨,
   스크립트가 숨긴 버튼이 그대로 노출되고 눌린다(링크가 아닌 선택영역에 제거가 호출된다) */
.svx-link-btn[hidden] { display:none; }
.svx-link-btn-primary { background:var(--svx-ed-brand); border-color:var(--svx-ed-brand); color:#fff; }
.svx-link-btn-primary:hover { background:var(--svx-ed-brand-d); border-color:var(--svx-ed-brand-d); color:#fff; }
.svx-link-remove { color:#dc2626; border-color:#fecaca; }
.svx-link-remove:hover { background:#fef2f2; border-color:#dc2626; color:#dc2626; }
body.svx-link-modal-open { overflow:hidden; }
@keyframes svx-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes svx-slide-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
/* 이미지 alt 편집 floating 배지 — 이미지 선택 시 우측 상단 표시. is-missing = alt 비어있음 (빨강). */
.svx-editor-shell .svx-img-alt-floating { position:absolute; z-index:6; display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border:1px solid #2563eb; border-radius:999px; background:#2563eb; color:#fff; font-size:0.7rem; font-weight:700; letter-spacing:0.04em; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(37,99,235,0.4); pointer-events:auto; }
.svx-editor-shell .svx-img-alt-floating:hover { background:#1d4ed8; border-color:#1d4ed8; }
.svx-editor-shell .svx-img-alt-floating.is-missing { background:#dc2626; border-color:#dc2626; box-shadow:0 2px 6px rgba(220,38,38,0.4); }
.svx-editor-shell .svx-img-alt-floating.is-missing:hover { background:#b91c1c; border-color:#b91c1c; }
.svx-editor-shell .svx-img-alt-floating.is-hidden { visibility:hidden; pointer-events:none; }
/* 이미지 삭제 floating 휴지통 — 이미지 선택 시 우측 하단 표시. 클릭 = 즉시 deleteSelection (Ctrl+Z 복원 가능) */
.svx-editor-shell .svx-img-trash-floating { position:absolute; z-index:6; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:1px solid #111827; border-radius:999px; background:#111827; color:#fff; cursor:pointer; box-shadow:0 2px 6px rgba(17,24,39,0.4); pointer-events:auto; }
.svx-editor-shell .svx-img-trash-floating i { font-size:0.95rem; line-height:1; }
.svx-editor-shell .svx-img-trash-floating:hover { background:#000; border-color:#000; }
.svx-editor-shell .svx-img-trash-floating.is-hidden { visibility:hidden; pointer-events:none; }
/* 모바일 */
@media (max-width:720px) { .svx-img-modal { padding:0; } .svx-img-panel { max-width:100%; max-height:100%; height:100%; border-radius:0; } .svx-editor-content { padding:14px 16px 30px; min-height:380px; height:auto; max-height:60vh; font-size:1rem; } .svx-editor-toolbar { padding:6px 8px; } .svx-editor-tb-btn { width:30px; height:30px; } .svx-editor-tb-btn i { font-size:0.95rem; } }
/* ════════ 동영상 임베드 · 버튼 삽입 (편집면 + 모달) ════════ */
/* 편집면 = 실제 영상(썸네일) 표시 (저장은 안전마커, NodeView 가 live iframe). 클릭=선택 / 더블클릭=편집 / ×=제거 */
.svx-editor-content > .ProseMirror .svx-video-node { position:relative; width:100%; max-width:100%; margin:12px auto; aspect-ratio:16 / 9; background:#000; border-radius:8px; overflow:hidden; }
.svx-editor-content > .ProseMirror .svx-video-node iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.svx-editor-content .svx-video-node .svx-video-ov { position:absolute; inset:0; cursor:pointer; background:transparent; }
.svx-editor-content .svx-video-node.ProseMirror-selectednode { outline:3px solid var(--svx-ed-brand); outline-offset:2px; }
.svx-editor-content .svx-video-del { position:absolute; top:8px; right:8px; z-index:3; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(15,23,42,0.82); color:#fff; font-size:1.05rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s ease; }
.svx-editor-content .svx-video-node:hover .svx-video-del, .svx-editor-content .svx-video-node.ProseMirror-selectednode .svx-video-del { opacity:1; }
.svx-editor-content .svx-video-del:hover { background:#dc2626; }
/* 링크 해석 불가 fallback = 플레이스홀더 카드 */
.svx-editor-content .svx-video-node.svx-video-ph { aspect-ratio:auto; min-height:72px; background:#0f172a; color:#cbd5e1; display:flex; align-items:center; justify-content:center; padding:18px; text-align:center; }
.svx-editor-content .svx-video-ph .svx-video-ph-label { display:inline-flex; align-items:center; gap:8px; font-size:0.88rem; font-weight:500; }
.svx-editor-content .svx-video-ph .svx-video-ph-label i { font-size:1.3rem; color:color-mix(in srgb, var(--svx-ed-brand) 62%, transparent); }
/* 버튼 (편집면 + 모달 미리보기) — 기본 폰트 · 굵기 600 (링크 서식 아님) */
:is(.svx-editor-content > .ProseMirror, .svx-btnm-modal) .svx-btn { display:inline-block; padding:10px 22px; border-radius:5px; font-size:1rem; font-weight:600; font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; line-height:1.2; text-decoration:none; border:1px solid transparent; cursor:pointer; }
:is(.svx-editor-content > .ProseMirror, .svx-btnm-modal) .svx-btn-white { background:#ffffff; color:#111827; border-color:#d1d5db; }
:is(.svx-editor-content > .ProseMirror, .svx-btnm-modal) .svx-btn-gray { background:#e5e7eb; color:#111827; border-color:#d1d5db; }
:is(.svx-editor-content > .ProseMirror, .svx-btnm-modal) .svx-btn-black { background:#1a1d24; color:#ffffff; }
:is(.svx-editor-content > .ProseMirror, .svx-btnm-modal) .svx-btn-red { background:#dc2626; color:#ffffff; }
:is(.svx-editor-content > .ProseMirror, .svx-btnm-modal) .svx-btn-blue { background:#2563eb; color:#ffffff; }
:is(.svx-editor-content > .ProseMirror, .svx-btnm-modal) .svx-btn-green { background:#16a34a; color:#ffffff; }
/* 팔레트 고정색 — 작성자가 '보라'를 직접 고른 버튼이다. 브랜드 토큰으로 바꾸면 에디터 미리보기와 실제 발행 화면(editor/content.css · post/_assets/board-common.css)이 서로 달라진다. 셋을 같은 값으로 둘 것. */
:is(.svx-editor-content > .ProseMirror, .svx-btnm-modal) .svx-btn-purple { background:#7c3aed; color:#ffffff; }
/* 편집면 <a> 링크스타일(var(--svx-ed-brand)·밑줄) 오버라이드 — a.svx-btn(0,2,1) > .svx-editor-content a(0,1,1) */
.svx-editor-content > .ProseMirror a.svx-btn { text-decoration:none; font-weight:600; }
.svx-editor-content > .ProseMirror a.svx-btn-white, .svx-editor-content > .ProseMirror a.svx-btn-gray { color:#111827; }
.svx-editor-content > .ProseMirror a.svx-btn-black, .svx-editor-content > .ProseMirror a.svx-btn-red, .svx-editor-content > .ProseMirror a.svx-btn-blue, .svx-editor-content > .ProseMirror a.svx-btn-green, .svx-editor-content > .ProseMirror a.svx-btn-purple { color:#ffffff; }
/* 동영상 삽입 모달 */
.svx-vid-modal { position:fixed; inset:0; z-index:11200; display:flex; align-items:center; justify-content:center; padding:24px; }
.svx-vid-modal[hidden] { display:none; }
.svx-vid-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.5); }
.svx-vid-panel { position:relative; width:100%; max-width:520px; max-height:calc(100vh - 48px); overflow:auto; background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.svx-vid-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f1f5f9; background:#fff; }
.svx-vid-head h3 { margin:0; display:inline-flex; align-items:center; gap:8px; font-size:1.05rem; font-weight:700; color:#0f172a; }
.svx-vid-head h3 i { color:var(--svx-ed-brand); }
.svx-vid-head-actions { display:flex; align-items:center; gap:8px; }
.svx-vid-btn { padding:8px 15px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; color:#334155; font-size:0.9rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.svx-vid-btn-primary { background:var(--svx-ed-brand); border-color:var(--svx-ed-brand); color:#fff; }
.svx-vid-btn-primary:hover { background:var(--svx-ed-brand-d); border-color:var(--svx-ed-brand-d); }
.svx-vid-close { border:0; background:transparent; color:#64748b; font-size:1.3rem; cursor:pointer; padding:2px 4px; line-height:1; }
.svx-vid-body { padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
.svx-vid-guide { margin:0; font-size:0.82rem; color:#64748b; line-height:1.6; background:#f8fafc; padding:10px 12px; border-radius:8px; }
/* 검색 노출 안내 — 에디터로 삽입한 영상은 화면에만 나오고 VideoObject 스키마는 만들지 못한다(URL 만 저장하므로
   제목·업로드일이 없다). 운영자가 그 차이를 모르면 «넣었는데 검색에 안 뜬다» 가 되므로 배경색으로 떼어 눈에 걸리게 한다 */
.svx-vid-seo { display:block; margin-top:8px; padding:9px 11px; border-radius:6px;
  background:#fff7ed; border-left:3px solid #fb923c; color:#9a3412; }
.svx-vid-seo .ph { margin-right:4px; vertical-align:-1px; }
.svx-vid-seo strong { color:#7c2d12; }
.svx-vid-field { display:flex; flex-direction:column; gap:5px; }
.svx-vid-label { font-size:0.85rem; font-weight:600; color:#334155; }
.svx-vid-in { width:100%; padding:8px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:0.82rem; font-family:inherit; resize:vertical; color:#0f172a; box-sizing:border-box; }
.svx-vid-in:focus { outline:none; border-color:var(--svx-ed-brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--svx-ed-brand) 12%, transparent); }
body.svx-vid-modal-open { overflow:hidden; }
/* 버튼 삽입 모달 */
.svx-btnm-modal { position:fixed; inset:0; z-index:11200; display:flex; align-items:center; justify-content:center; padding:24px; }
.svx-btnm-modal[hidden] { display:none; }
.svx-btnm-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.5); }
.svx-btnm-panel { position:relative; width:100%; max-width:460px; max-height:calc(100vh - 48px); overflow:auto; background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.svx-btnm-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f1f5f9; background:#fff; }
.svx-btnm-head h3 { margin:0; display:inline-flex; align-items:center; gap:8px; font-size:1.05rem; font-weight:700; color:#0f172a; }
.svx-btnm-head h3 i { color:var(--svx-ed-brand); }
.svx-btnm-head-actions { display:flex; align-items:center; gap:8px; }
.svx-btnm-btn { padding:8px 15px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; color:#334155; font-size:0.9rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.svx-btnm-btn-primary { background:var(--svx-ed-brand); border-color:var(--svx-ed-brand); color:#fff; }
.svx-btnm-btn-primary:hover { background:var(--svx-ed-brand-d); border-color:var(--svx-ed-brand-d); }
.svx-btnm-close { border:0; background:transparent; color:#64748b; font-size:1.3rem; cursor:pointer; padding:2px 4px; line-height:1; }
.svx-btnm-body { padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.svx-btnm-field { display:flex; flex-direction:column; gap:6px; }
.svx-btnm-label { font-size:0.85rem; font-weight:600; color:#334155; }
.svx-btnm-label small { font-weight:400; color:#94a3b8; }
.svx-btnm-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.svx-btnm-sw { width:32px; height:32px; padding:0; border-radius:6px; border:1px solid #d1d5db; cursor:pointer; box-shadow:none; }
.svx-btnm-sw.is-active { border:2px solid var(--svx-ed-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--svx-ed-brand) 22%, transparent); }
.svx-btnm-text, .svx-btnm-url { width:100%; padding:9px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:0.9rem; font-family:inherit; color:#0f172a; box-sizing:border-box; }
.svx-btnm-text:focus, .svx-btnm-url:focus { outline:none; border-color:var(--svx-ed-brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--svx-ed-brand) 12%, transparent); }
.svx-btnm-hint { font-size:0.78rem; color:#94a3b8; }
.svx-btnm-toggle { display:flex; align-items:center; gap:8px; font-size:0.9rem; color:#334155; cursor:pointer; }
.svx-btnm-preview { padding:16px; background:#f8fafc; border-radius:8px; display:flex; justify-content:center; }
body.svx-btnm-modal-open { overflow:hidden; }