/**
 * WebEditor Default Theme
 */
.editor-wrapper {
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .375rem;
    background: var(--background, var(--bs-body-bg, #fff));
    color: var(--foreground, var(--bs-body-color, #212529));
    overflow: hidden;
    position: relative;
}
.editor-wrapper.focused {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: .5rem;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    border-bottom: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    position: sticky;
    top: 0;
    z-index: 100;
}
.editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: .25rem;
    background: transparent;
    color: var(--foreground, var(--bs-body-color, #212529));
    cursor: pointer;
    transition: background .15s;
}
.editor-btn:hover {
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
}
/* 선택된(켜진) 버튼 강조: 커서·선택에 걸린 서식(굵게·정렬·목록…)과 켜진 모드(소스·전체화면·열린 메뉴)에 쓴다.
   반투명 유리 질감: 비치는 바탕 + 뒤를 흐리게(backdrop blur) + 위쪽 하이라이트 + 번지는 빛.
   색은 CSS 변수로 바꿀 수 있다:
     --editor-active-color(아이콘) · --editor-active-bg(바탕) · --editor-active-bg-hover · --editor-active-border(테두리) · --editor-active-glow(번지는 빛) */
.editor-btn.active,
.editor-btn.editor-menu-open {
    background: var(--editor-active-bg, rgba(230, 234, 237, .60));          /* 아주 밝은 회색, 반투명 */
    color: var(--editor-active-color, var(--foreground, var(--bs-body-color, #212529)));
    box-shadow:
        inset 0 0 0 1px var(--editor-active-border, rgba(219, 221, 224, .90)),
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 2px 8px var(--editor-active-glow, rgba(211, 214, 216, .35));
    -webkit-backdrop-filter: blur(4px) saturate(1.2);
    backdrop-filter: blur(4px) saturate(1.2);
}
.editor-btn.active:hover,
.editor-btn.editor-menu-open:hover {
    background: var(--editor-active-bg-hover, rgba(230, 234, 237, .85));
}
.editor-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.editor-separator {
    width: 1px;
    height: 24px;
    margin: 4px;
    background: var(--border, var(--bs-border-color, #dee2e6));
}
/* 줄바꿈용 구분선: 보이지 않고, 한 줄을 모두 차지해 뒤따르는 도구를 다음 줄로 보낸다 */
.editor-separator.editor-linebreak {
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0;
    background: none;
}
.editor-dropdown {
    position: relative;
}
.editor-dropdown-btn {
    width: auto;
    padding: 0 8px;
    gap: 4px;
}
.editor-caret {
    opacity: .5;
    margin-left: 2px;
}
.editor-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 120px;
    max-height: min(320px, 60vh);      /* 글꼴처럼 긴 목록은 스크롤 */
    overflow-y: auto;
    padding: .25rem;
    background: var(--background, var(--bs-body-bg, #fff));
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.editor-dropdown-menu.show {
    display: block;
}
.editor-dropdown-item {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    border: none;
    background: none;
    text-align: left;
    color: var(--foreground, var(--bs-body-color, #212529));
    cursor: pointer;
    border-radius: .25rem;
}
.editor-dropdown-item.is-default {
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
    margin-bottom: .25rem;
}
.editor-dropdown-item:hover {
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
}
/* 툴바 메뉴(☰): 열려 있는 동안의 강조는 위의 '.editor-btn.active' 와 같은 규칙을 쓴다 */
.editor-menu-panel {
    position: fixed;
    z-index: 10000;
    min-width: 168px;
    padding: .25rem 0;
    background: var(--background, var(--bs-body-bg, #fff));
    border: 1px solid var(--border, var(--bs-border-color, #adb5bd));
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
    color: var(--foreground, var(--bs-body-color, #212529));
    font-size: .875rem;
}
.editor-menu-entry { position: relative; }
.editor-menu-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: .4rem .5rem .4rem 2rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.editor-menu-label { flex: 1 1 auto; }
/* 하위 메뉴: 왼쪽 아이콘 칸 (상위 메뉴 그룹 색을 따른다) */
.editor-menu-sub .editor-menu-item { gap: .6rem; padding-left: .6rem; }
.editor-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--menu-accent, currentColor);
}
.editor-menu-icon svg { display: block; width: 16px; height: 16px; }
.editor-menu-sub .editor-menu-label { margin-left: 0; }
.editor-menu-key {
    flex: 0 0 auto;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    font-size: .75rem;
}
.editor-menu-chevron { flex: 0 0 auto; margin-right: .25rem; opacity: .7; }
.editor-menu-item:hover,
.editor-menu-item:focus-visible,
.editor-menu-entry.open > .editor-menu-item {
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
    outline: none;
}
.editor-menu-item:disabled {
    opacity: .4;
    cursor: default;
    background: none;
}
.editor-menu-sep {
    height: 1px;
    margin: .25rem 0;
    background: var(--border, var(--bs-border-color, #dee2e6));
}
.editor-menu-sub {
    display: none;
    position: absolute;
    top: -5px;
    left: 100%;
    min-width: 168px;
    padding: .25rem 0;
    background: var(--background, var(--bs-body-bg, #fff));
    border: 1px solid var(--border, var(--bs-border-color, #adb5bd));
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
}
.editor-menu-sub.flip-left { left: auto; right: 100%; }
.editor-menu-entry.open > .editor-menu-sub { display: block; }
/* PDF 저장 대화상자 (규격 · 방향 · 안내) */
.editor-pdf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.editor-pdf-size { display: flex; align-items: center; gap: .75rem; padding-top: .6rem; }
.editor-pdf-select {
    min-width: 96px;
    padding: .35rem .5rem;
    border: 1px solid var(--border, var(--bs-border-color, #ced4da));
    border-radius: .25rem;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    color: inherit;
    font: inherit;
}
.editor-pdf-orient {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .25rem .6rem .6rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .25rem;
}
.editor-pdf-orient legend { padding: 0 .35rem; font-size: .8rem; }
.editor-pdf-o {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 64px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: transparent;
    color: var(--foreground, var(--bs-body-color, #212529));
    cursor: pointer;
}
.editor-pdf-o:hover { background: var(--muted, var(--bs-tertiary-bg, #f8f9fa)); }
.editor-pdf-o[aria-checked="true"] {
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
    border-color: var(--border, var(--bs-border-color, #ced4da));
}
.editor-pdf-o:focus-visible, .editor-pdf-select:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 1px; }
.editor-pdf-note {
    margin-top: 1rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .25rem;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    font-size: .85rem;
    line-height: 1.5;
}

/* 템플릿 메뉴: 첫 단계에도 색 아이콘 칸을 둔다 */
.editor-menu-panel.with-icons .editor-menu-item { gap: .6rem; padding-left: .6rem; }
/* 페이지 분할 표시: 화면에서만 점선+라벨을 보여 준다 (저장·출력물의 인라인 스타일은 보이지 않는 쪽 나눔) */
.editor-content hr.editor-pagebreak {
    position: relative;
    overflow: visible;
    height: 0 !important;
    margin: 1.75em 0 !important;
    border: 0 !important;
    border-top: 2px dashed var(--border, var(--bs-border-color, #adb5bd)) !important;
}
.editor-content hr.editor-pagebreak::after {
    content: attr(data-editor-label);
    position: absolute;
    left: 50%;
    top: -.75em;
    transform: translateX(-50%);
    padding: 0 .6em;
    background: var(--background, var(--bs-body-bg, #fff));
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    font-size: .75rem;
    line-height: 1.5;
}
.editor-shortcuts { width: 100%; border-collapse: collapse; }
.editor-shortcuts td { padding: .35rem .25rem; border-bottom: 1px solid var(--border, var(--bs-border-color, #dee2e6)); }
.editor-shortcuts td:last-child { text-align: right; }
.editor-shortcuts kbd {
    padding: .1rem .4rem;
    border: 1px solid var(--border, var(--bs-border-color, #ced4da));
    border-radius: .25rem;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    font-size: .8rem;
}
.editor-color-menu {
    min-width: auto;
    padding: .5rem;
}
.editor-color-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: 2px;
    cursor: pointer;
}
.editor-color-btn:hover {
    transform: scale(1.2);
    z-index: 1;
}

/* 글자·배경 색상 선택 레이어: 왼쪽 색상표(8×8) | 오른쪽 선택기(채도·명도 + 색상 막대 + 코드 + 취소/확인) */
.editor-colorpanel {
    --cp-cell: 18px;
    padding: 10px;
    background: var(--muted, var(--bs-tertiary-bg, #f1f1f1));
    border-radius: 2px;
}
.editor-colorpanel.show {
    display: flex;
    gap: 10px;
    width: max-content;
    max-width: calc(100vw - 16px);
}
.editor-colorpanel .editor-color-left { padding-right: 10px; border-right: 1px solid var(--border, var(--bs-border-color, #cfd4da)); }
.editor-colorpanel .editor-color-palette {
    display: grid;
    grid-template-columns: repeat(8, var(--cp-cell));
    gap: 3px;
}
.editor-colorpanel .editor-color-btn {
    position: relative;
    width: var(--cp-cell);
    height: var(--cp-cell);
    border-radius: 1px;
    border-color: rgba(0, 0, 0, .18);
    transition: none;
}
.editor-colorpanel .editor-color-btn:hover { transform: none; outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: -1px; }
.editor-colorpanel .editor-color-btn:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 1px; z-index: 1; }
/* 현재 색: ✓ (밝은 색 위에서는 어두운 ✓) */
.editor-colorpanel .editor-color-btn.selected::after {
    content: '';
    position: absolute;
    left: 50%; top: 45%;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
.editor-colorpanel .editor-color-btn.selected.is-light::after { border-color: #212529; }
/* 색 없음(✕) */
.editor-colorpanel .editor-color-none { background: #fff; color: #868e96; }
.editor-colorpanel .editor-color-none svg { display: block; margin: auto; stroke: currentColor; stroke-width: 1.6; }
.editor-colorpanel .editor-color-none.selected { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: -1px; }
.editor-colorpanel .editor-color-none.selected::after { display: none; }

.editor-colorpanel .editor-color-right { display: flex; flex-direction: column; gap: 8px; width: 176px; }
.editor-color-picker { display: flex; gap: 8px; height: 140px; }
.editor-color-sv {
    position: relative;
    flex: 1 1 auto;
    border: 1px solid rgba(0, 0, 0, .25);
    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    background-color: #f00;
    cursor: crosshair;
    touch-action: none;
}
.editor-color-hue {
    position: relative;
    flex: 0 0 16px;
    border: 1px solid rgba(0, 0, 0, .25);
    background: linear-gradient(to bottom, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
    cursor: ns-resize;
    touch-action: none;
}
.editor-color-sv-thumb {
    position: absolute;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
    pointer-events: none;
}
.editor-color-hue-thumb {
    position: absolute;
    left: -3px; right: -3px;
    height: 5px;
    margin-top: -3px;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
    pointer-events: none;
}
.editor-color-sv:focus-visible, .editor-color-hue:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 1px; }
.editor-color-hexrow { display: flex; align-items: center; gap: 6px; }
.editor-color-preview { flex: 0 0 28px; height: 28px; border: 1px solid rgba(0, 0, 0, .4); }
.editor-color-hex {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 6px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .4);
    background: transparent;
    color: inherit;
    font: inherit;
    font-family: var(--bs-font-monospace, monospace);
}
.editor-color-hex:focus { outline: none; border-bottom-color: var(--bs-primary, #0d6efd); }
.editor-color-hex.invalid { border-bottom-color: var(--bs-danger, #dc3545); color: var(--bs-danger, #dc3545); }
.editor-color-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.editor-color-cancel {
    padding: 4px 6px;
    border: 0;
    background: none;
    color: var(--bs-danger, #e03131);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.editor-color-cancel:hover { text-decoration: underline; }
.editor-color-ok {
    padding: 4px 12px;
    border: 1px solid var(--border, var(--bs-border-color, #adb5bd));
    border-radius: 3px;
    background: var(--background, var(--bs-body-bg, #fff));
    color: inherit;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.editor-color-ok:hover { background: var(--secondary, var(--bs-secondary-bg, #e9ecef)); }
/* 좁은 에디터·화면: 색상표 위, 선택기 아래로 쌓는다 (에디터 폭보다 레이어가 넓으면 스크립트가 .stacked 를 붙인다) */
.editor-colorpanel.stacked.show { flex-direction: column; }
.editor-colorpanel.stacked .editor-color-left { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--border, var(--bs-border-color, #cfd4da)); }
.editor-colorpanel.stacked .editor-color-right { width: auto; }
@media (max-width: 480px) {
    .editor-colorpanel.show { flex-direction: column; }
    .editor-colorpanel .editor-color-left { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--border, var(--bs-border-color, #cfd4da)); }
    .editor-colorpanel .editor-color-right { width: auto; }
}
.editor-content {
    padding: 1rem;
    overflow-y: auto;
    outline: none;
    min-height: 150px;
}
.editor-content:empty:before {
    content: attr(data-placeholder);
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    pointer-events: none;
}
.editor-content img {
    max-width: 100%;
    height: auto;
}
.editor-content .editor-image {
    margin: 1em 0;
}
.editor-content .editor-image img {
    border-radius: 4px;
}
.editor-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 1rem 0;
}
.editor-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.editor-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.editor-content table td, .editor-content table th {
    padding: .5rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-content blockquote {
    margin: 1rem 0;
    padding: .5rem 1rem;
    border-left: 4px solid var(--bs-primary, #0d6efd);
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
}
/* 인용구 갤러리로 만든 인용구는 스타일을 인라인으로 완결해 가진다. 기본 인용구의 왼쪽 선·배경이 덧씌워져
   (예: 오른쪽 라인에 왼쪽 선이 함께 보이는 것) 갤러리 미리보기와 달라지지 않도록 걷어 낸다.
   인라인 스타일에 border-left·background 가 있으면 그쪽이 우선한다. */
.editor-content blockquote[data-quote-style] {
    border-left: 0;
    background: transparent;
}
.editor-content pre {
    padding: 1rem;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    border-radius: .375rem;
    overflow-x: auto;
}
.editor-source {
    width: 100%;
    padding: 1rem;
    border: none;
    outline: none;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .875rem;
    resize: vertical;
    background: var(--background, var(--bs-body-bg, #fff));
    color: var(--foreground, var(--bs-body-color, #212529));
    line-height: 1.5;
}
.editor-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
}
.editor-progress-bar {
    height: 100%;
    background: var(--bs-primary, #0d6efd);
    transition: width .3s ease;
    width: 0;
}
.editor-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
}
/* 전체 화면: 툴바·하단 영역 높이와 무관하게 본문이 남은 공간을 채운다 */
.editor-fullscreen {
    display: flex;
    flex-direction: column;
}
.editor-fullscreen .editor-content, .editor-fullscreen .editor-source, .editor-fullscreen .editor-preview {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
.editor-fullscreen .editor-grip { display: none; }
body.editor-noscroll {
    overflow: hidden;
}
.editor-statusbar {
    display: flex;
    justify-content: flex-end;
    padding: .25rem .5rem;
    font-size: .75rem;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    border-top: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-statusbar > span:empty { display: none; }
.editor-statusbar > span + span:not(:empty)::before {
    content: '|';
    margin: 0 .5rem;
    opacity: .5;
}

/* 하단 보기 탭 (편집 / HTML / 미리보기) */
.editor-bottombar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    border-top: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-bottombar .editor-statusbar {
    flex: 1 1 auto;
    align-self: center;
    border-top: 0;
    background: transparent;
    flex-wrap: wrap;
}
.editor-viewtabs {
    display: flex;
    margin-top: -1px;
    padding-left: .5rem;
}
.editor-viewtab {
    padding: .3rem 1rem;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-bottom: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    background: transparent;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.editor-viewtab + .editor-viewtab { border-left-color: var(--border, var(--bs-border-color, #dee2e6)); }
.editor-viewtab:hover { color: var(--foreground, var(--bs-body-color, #212529)); }
.editor-viewtab.active {
    background: var(--background, var(--bs-body-bg, #fff));
    color: var(--foreground, var(--bs-body-color, #212529));
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-top: 0;
    border-bottom-color: transparent;
    font-weight: 600;
}
.editor-viewtab:focus-visible, .editor-grip:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}
.editor-preview { overflow-y: auto; }

/* 높이 조절 핸들 */
.editor-grip {
    display: flex;
    justify-content: center;
    height: 10px;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    border-top: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-grip:hover { background: var(--secondary, var(--bs-secondary-bg, #e9ecef)); }
.editor-grip-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 10px;
    margin-top: -1px;
    line-height: 1;
    color: var(--foreground, var(--bs-body-color, #212529));
    background: var(--background, var(--bs-body-bg, #fff));
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-top: 0;
    border-radius: 0 0 8px 8px;
}
.editor-grip-pill svg { display: block; }
body.editor-resizing, body.editor-resizing * { cursor: ns-resize !important; user-select: none !important; }

.editor-over-limit {
    color: var(--bs-danger, #dc3545);
    font-weight: bold;
}
.editor-readonly {
    opacity: .7;
}
.editor-readonly .editor-toolbar {
    pointer-events: none;
    opacity: .5;
}
.editor-readonly .editor-content {
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
}
.editor-findreplace {
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    border-bottom: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-find-input, .editor-replace-input {
    padding: .25rem .5rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .25rem;
    font-size: .875rem;
    width: 150px;
    background: var(--background, var(--bs-body-bg, #fff));
    color: var(--foreground, var(--bs-body-color, #212529));
}
.editor-findreplace { flex-wrap: wrap; }
.editor-findreplace .editor-find-input,
.editor-findreplace .editor-replace-input {
    flex: 1 1 120px;
    min-width: 100px;
    max-width: 200px;
    box-sizing: border-box;
}
/* 텍스트 버튼(바꾸기/모두)은 32px 정사각형이 아니라 글자 폭에 맞춘다 */
.editor-findreplace .editor-replace-one,
.editor-findreplace .editor-replace-all {
    width: auto;
    padding: 0 .6rem;
    white-space: nowrap;
    font-size: .8125rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-findreplace .editor-find-count {
    flex: 0 0 auto;
    white-space: nowrap;
}
.editor-findreplace .editor-find-count:empty { display: none; }
.editor-find-input:focus, .editor-replace-input:focus {
    outline: none;
    border-color: var(--bs-primary, #0d6efd);
}
.editor-find-count {
    font-size: .75rem;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    min-width: 70px;
}
.editor-highlight {
    background: var(--bs-warning, #ffc107);
    color: #000;
    padding: 0 2px;
    border-radius: 2px;
}
/* 다크모드는 테마 전용 셀렉터 없이 각 속성의 폴백 체인으로 처리한다.
 * var(--프론트토큰, var(--bs-*, #라이트)) 순서:
 *   1) 프론트 토큰(--background/--foreground/--border/--muted/…) — tokens.css가 .dark에서 자동 remap
 *   2) 부트스트랩 토큰(--bs-*) — 관리자(부트스트랩 로드)에서 data-bs-theme로 다크 처리
 *   3) 라이트 기준색 — 최후 폴백
 * 색상 액센트(--bs-primary/danger/warning)는 다크에서도 대비가 유지되어 그대로 둔다. */

/* Generic Modal System */
.editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: editor-modal-fadein .2s ease;
}
.editor-modal-closing {
    animation: editor-modal-fadeout .2s ease forwards;
}
@keyframes editor-modal-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes editor-modal-fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.editor-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
}
.editor-modal-dialog {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: var(--background, var(--bs-body-bg, #fff));
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.editor-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-modal-header h5 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground, var(--bs-body-color, #212529));
}
.editor-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    cursor: pointer;
    border-radius: .25rem;
}
.editor-modal-close:hover {
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
    color: var(--foreground, var(--bs-body-color, #212529));
}
.editor-modal-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem;
}
.editor-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
}
.editor-modal-footer > div {
    display: flex;
    gap: .5rem;
}
.editor-modal-btn {
    padding: .5rem 1rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.editor-modal-btn-primary {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}
.editor-modal-btn-primary:hover:not(:disabled) {
    background: #0b5ed7;
    border-color: #0a58ca;
}
.editor-modal-btn-primary:disabled {
    opacity: .65;
    cursor: not-allowed;
}
.editor-modal-btn-secondary {
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
    color: var(--foreground, var(--bs-body-color, #212529));
    border-color: var(--border, var(--bs-border-color, #dee2e6));
}
.editor-modal-btn-secondary:hover {
    background: var(--border, var(--bs-border-color, #dee2e6));
}

/* Modal Form Elements */
.editor-modal-form-group { margin-bottom: 1rem; }
.editor-modal-label { display: block; margin-bottom: .5rem; font-weight: 500; font-size: .875rem; color: var(--foreground, var(--bs-body-color, #212529)); }
.editor-modal-input { width: 100%; box-sizing: border-box; padding: .5rem .75rem; font-size: .875rem; border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); border-radius: .375rem; background: var(--background, var(--bs-body-bg, #fff)); color: var(--foreground, var(--bs-body-color, #212529)); }
.editor-modal-input:focus { outline: none; border-color: var(--bs-primary, #0d6efd); }
.editor-modal-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; color: var(--foreground, var(--bs-body-color, #212529)); }
.editor-modal-check input { width: auto; cursor: pointer; }
.editor-link-image-hint { margin: -.25rem 0 1rem; font-size: .8125rem; color: var(--muted-foreground, var(--bs-secondary-color, #6c757d)); }
.editor-image-link-check { margin-top: .5rem; }

/* Table Picker (Grid) */
.editor-table-picker { display: flex; flex-direction: column; align-items: center; }
.editor-table-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-bottom: .5rem; padding: 2px; border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); background: var(--background, var(--bs-body-bg, #fff)); }
.editor-table-cell { width: 18px; height: 18px; border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); cursor: pointer; background: var(--muted, var(--bs-tertiary-bg, #f8f9fa)); }
.editor-table-cell.active { background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd); }
.editor-table-info { text-align: center; font-size: .875rem; font-weight: 600; color: var(--foreground, var(--bs-body-color, #212529)); }

/* Image Upload Specifics */
.editor-image-count {
    font-size: .875rem;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
}
.editor-image-upload-zone {
    border: 2px dashed var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
}
.editor-image-upload-zone:hover, .editor-image-upload-zone-active {
    border-color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, .05);
}
.editor-image-upload-zone svg {
    margin-bottom: .5rem;
    opacity: .5;
}
.editor-image-upload-zone p {
    margin: .25rem 0;
}
.editor-image-upload-hint {
    font-size: .75rem;
    opacity: .7;
}
.editor-image-url-input {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}
.editor-image-url-input input {
    flex: 1;
    padding: .5rem .75rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .375rem;
    font-size: .875rem;
    background: var(--background, var(--bs-body-bg, #fff));
    color: var(--foreground, var(--bs-body-color, #212529));
}
.editor-image-url-input input:focus {
    outline: none;
    border-color: var(--bs-primary, #0d6efd);
}
.editor-image-url-input button {
    padding: .5rem 1rem;
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .375rem;
    cursor: pointer;
    font-size: .875rem;
    color: var(--foreground, var(--bs-body-color, #212529));
}
.editor-image-url-input button:hover {
    background: var(--border, var(--bs-border-color, #dee2e6));
}
.editor-image-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
    min-height: 50px;
}
.editor-image-preview-item {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .375rem;
    overflow: hidden;
    cursor: grab;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    transition: transform .15s, box-shadow .15s;
}
.editor-image-preview-item:hover {
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
}
.editor-image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.editor-image-preview-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .25rem .5rem;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: .625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-image-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 53, 69, .9);
    color: #fff;
    font-size: .875rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
}
.editor-image-preview-item:hover .editor-image-preview-remove {
    opacity: 1;
}
.editor-image-preview-remove:hover {
    background: #dc3545;
}
.editor-image-preview-order {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    font-size: .625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editor-image-preview-dragging {
    opacity: .5;
    transform: scale(.95);
}
.editor-image-drag-hint {
    text-align: center;
    font-size: .75rem;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    margin-top: .5rem;
}
.editor-image-meta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-content figure.editor-image figcaption,
.editor-content .editor-image-caption {
    margin-top: .375rem;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    font-size: .875rem;
    line-height: 1.4;
    text-align: center;
}

/* Image Resizer */
.editor-resizer {
    position: absolute;
    border: 1px solid var(--bs-primary, #0d6efd);
    display: none;
    pointer-events: none;
    z-index: 50;
}
.editor-resizer.active {
    display: block;
}
.editor-resizer-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--bs-primary, #0d6efd);
    border: 1px solid #fff;
    pointer-events: auto;
}
/* 모서리 4개 (비율 유지) */
.editor-resizer-nw { top: -5px; left: -5px; cursor: nw-resize; }
.editor-resizer-ne { top: -5px; right: -5px; cursor: ne-resize; }
.editor-resizer-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.editor-resizer-se { bottom: -5px; right: -5px; cursor: se-resize; }
/* 가운데 4개 (자유 크기) */
.editor-resizer-n { top: -5px; left: 50%; margin-left: -5px; cursor: n-resize; }
.editor-resizer-s { bottom: -5px; left: 50%; margin-left: -5px; cursor: s-resize; }
.editor-resizer-e { top: 50%; right: -5px; margin-top: -5px; cursor: e-resize; }
.editor-resizer-w { top: 50%; left: -5px; margin-top: -5px; cursor: w-resize; }
/* 드래그 중 실시간 크기 표시 라벨 */
.editor-resizer-size {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.editor-resizer.active .editor-resizer-size,
.editor-resizer-dragging .editor-resizer-size { opacity: 1; }

/* 이미지 hover 교체 안내 툴팁 */
.editor-img-tooltip {
    position: absolute;
    z-index: 99999;
    background: #1e293b;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    white-space: nowrap;
    pointer-events: auto;
    animation: editor-tooltip-in 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.editor-img-tooltip::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}
@keyframes editor-tooltip-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toast Notification */
.editor-toast {
    pointer-events: none;   /* 알림일 뿐이므로 아래의 메뉴·버튼 클릭을 가로채지 않는다 */
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    animation: editor-tooltip-in 0.25s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.editor-toast-info { background: #3b82f6; }
.editor-toast-success { background: #22c55e; }
.editor-toast-error { background: #ef4444; }

/* Autosave Restore Banner */
.editor-autosave-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--warning-subtle, var(--bs-warning-bg-subtle, #fff3cd));
    border-bottom: 1px solid var(--warning-subtle-border, var(--bs-warning-border-subtle, #ffe69c));
    font-size: .875rem;
    color: var(--foreground, var(--bs-body-color, #212529));
}
.editor-autosave-banner span { flex: 1; }
.editor-autosave-banner .editor-modal-btn {
    padding: .25rem .75rem;
    font-size: .8125rem;
}

/* =========================================================
 * 테이블 셀 편집 — 컨텍스트 메뉴 + 셀 선택 하이라이트
 * ========================================================= */
.editor-table-menu {
    position: fixed;
    z-index: 10001;
    min-width: 180px;
    padding: .25rem;
    background: var(--background, var(--bs-body-bg, #fff));
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: editor-modal-fadein .12s ease;
}
.editor-table-menu-item {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    border: none;
    background: none;
    text-align: left;
    font-size: .8125rem;
    color: var(--foreground, var(--bs-body-color, #212529));
    cursor: pointer;
    border-radius: .375rem;
}
.editor-table-menu-item:hover:not(:disabled) {
    background: var(--secondary, var(--bs-secondary-bg, #e9ecef));
}
.editor-table-menu-item:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.editor-table-menu-item.danger { color: var(--bs-danger, #dc3545); }
.editor-table-menu-item.danger:hover:not(:disabled) {
    background: var(--bs-danger, #dc3545);
    color: #fff;
}
.editor-table-menu-sep {
    height: 1px;
    margin: .25rem .5rem;
    background: var(--border, var(--bs-border-color, #dee2e6));
}
.editor-content td.editor-cell-selected,
.editor-content th.editor-cell-selected {
    background: rgba(13, 110, 253, .18);
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

/* =========================================================
 * 코드 블록 — 어두운 배경 + 고정폭 + 좌측 라인넘버 영역
 * ========================================================= */
.editor-content pre.editor-code-block {
    position: relative;
    margin: 1rem 0;
    padding: .875rem 1rem .875rem 3rem;
    background: #1e1e2e;
    color: #cdd6f4;
    border: 1px solid #313244;
    border-radius: .5rem;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, 'SFMono-Regular', 'Courier New', monospace;
    font-size: .85rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 2;
}
.editor-content pre.editor-code-block code {
    display: block;
    background: none;
    color: inherit;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    white-space: inherit;
}
/* 좌측 라인넘버 영역 (장식용 거터) */
.editor-content pre.editor-code-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2.25rem;
    background: #181825;
    border-right: 1px solid #313244;
    border-radius: .5rem 0 0 .5rem;
    pointer-events: none;
}
/* 언어 배지 (우측 상단) */
.editor-content pre.editor-code-block[data-language]::after {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    background: #313244;
    color: #a6adc8;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 0 .5rem 0 .5rem;
    pointer-events: none;
}
/* 구문 강조 토큰 (VS Code Dark+ 팔레트) */
.editor-content pre.editor-code-block .editor-tok-keyword  { color: #c586c0; }              /* 키워드 — 보라 */
.editor-content pre.editor-code-block .editor-tok-string   { color: #ce9178; }              /* 문자열 — 주황 */
.editor-content pre.editor-code-block .editor-tok-comment  { color: #7f848e; font-style: italic; } /* 주석 — 회색 */
.editor-content pre.editor-code-block .editor-tok-number   { color: #b5cea8; }              /* 숫자 — 연두 */
.editor-content pre.editor-code-block .editor-tok-operator { color: #d4d4d4; }              /* 연산자 — 밝은색 */
.editor-content pre.editor-code-block .editor-tok-variable { color: #9cdcfe; }              /* 변수($) — 하늘 */
.editor-content pre.editor-code-block .editor-tok-tag      { color: #569cd6; }              /* HTML 태그 — 파랑 */
.editor-content pre.editor-code-block .editor-tok-property { color: #9cdcfe; }              /* CSS 속성/HTML 속성 — 하늘 */

/* 인라인 코드 (코드 블록 밖의 <code>) */
.editor-content code:not(pre code) {
    padding: .1em .35em;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: 4px;
    font-family: var(--bs-font-monospace, Consolas, 'Courier New', monospace);
    font-size: .875em;
    color: var(--bs-danger, #d63384);
}

/* 코드 블록 언어 선택 바 (커서가 코드 블록 안일 때 표시) */
.editor-code-langbar {
    position: absolute;
    z-index: 60;
    display: none;
    align-items: center;
    padding: 2px;
    background: #313244;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.editor-code-lang-select {
    padding: 2px 6px;
    border: 1px solid #45475a;
    border-radius: 4px;
    background: #1e1e2e;
    color: #cdd6f4;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer;
    outline: none;
}
.editor-code-lang-select:focus { border-color: var(--bs-primary, #0d6efd); }

/* =========================================================
 * 마크다운 단축키 변환 시각 피드백
 * ========================================================= */
.editor-md-flash .editor-content {
    animation: editor-md-flash .25s ease;
}
@keyframes editor-md-flash {
    0% { box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .4); }
    100% { box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0); }
}

/* =========================================================
 * 인용구 스타일 갤러리 (v1.4)
 * ========================================================= */
.editor-modal-dialog.editor-modal-wide { max-width: 760px; }
.editor-quote-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .875rem;
}
.editor-quote-tab {
    padding: .25rem .75rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: 999px;
    background: transparent;
    color: var(--foreground, var(--bs-body-color, #212529));
    font-size: .8125rem;
    cursor: pointer;
}
.editor-quote-tab:hover { border-color: var(--bs-primary, #0d6efd); }
.editor-quote-tab.active {
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, .08);
}
.editor-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .625rem;
}
.editor-quote-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .5rem;
    /* 미리보기는 뷰 페이지(라이트) 기준 인라인 스타일이므로 다크모드에서도 흰 배경 고정 */
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.editor-quote-card:hover {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 2px 8px rgba(13, 110, 253, .15);
}
.editor-quote-card > blockquote {
    flex: 1;
    pointer-events: none;
    font-size: .8125rem;
    /* 카드 안 미리보기 여백 통일 — 인라인 margin은 유지되므로 카드 패딩으로 감싼다 */
    margin-left: .625rem !important;
    margin-right: .625rem !important;
}
/* 오른쪽 말풍선은 미리보기에서도 오른쪽에 붙인다 */
.editor-quote-card > blockquote[style*="margin-left:auto"] { margin-left: auto !important; }
.editor-quote-card-label {
    padding: .375rem .625rem;
    border-top: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    font-size: .75rem;
    text-align: center;
}
.editor-quote-hint {
    margin-top: .875rem;
    padding: .5rem .75rem;
    border-radius: .375rem;
    background: rgba(13, 110, 253, .06);
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    font-size: .75rem;
}

/* =========================================================
 * 테이블 스타일 다이얼로그 (v1.4)
 * ========================================================= */
.editor-tstyle-section {
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border, var(--bs-border-color, #dee2e6));
}
.editor-tstyle-section:last-of-type { border-bottom: 0; margin-bottom: 0; }
.editor-tstyle-section-title {
    margin-bottom: .625rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
}
.editor-tstyle-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}
.editor-tstyle-row label {
    flex: 0 0 72px;
    font-size: .8125rem;
    color: var(--foreground, var(--bs-body-color, #212529));
}
.editor-tstyle-row input[type="range"] { flex: 1; }
.editor-tstyle-val {
    flex: 0 0 44px;
    text-align: right;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
}
.editor-tstyle-row select,
.editor-tstyle-row input[type="text"] {
    padding: .25rem .5rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .25rem;
    background: var(--background, var(--bs-body-bg, #fff));
    color: var(--foreground, var(--bs-body-color, #212529));
    font-size: .8125rem;
}
.editor-tstyle-color-swatch {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .25rem;
    padding: 0;
    cursor: pointer;
}
.editor-tstyle-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: .375rem;
}
.editor-tstyle-palette .editor-color-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    cursor: pointer;
}
.editor-tstyle-palette .editor-color-btn:hover {
    transform: scale(1.15);
}
.editor-tstyle-hint {
    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: .375rem;
    background: rgba(13, 110, 253, .06);
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    font-size: .75rem;
}

/* =========================================================
 * 테이블 열 리사이즈 (v1.4)
 * ========================================================= */
.editor-content.editor-col-resizing,
.editor-content.editor-col-resizing * { cursor: col-resize !important; }
.editor-col-resize-hover { cursor: col-resize; }

/* =========================================================
 * 스마트 붙여넣기 선택 팝업 (v1.5)
 * ========================================================= */
.editor-paste-url {
    margin-bottom: .875rem;
    padding: .5rem .75rem;
    border-radius: .375rem;
    background: var(--muted, var(--bs-tertiary-bg, #f8f9fa));
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
    font-size: .8125rem;
    word-break: break-all;
}
.editor-paste-opts {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .875rem;
}
.editor-paste-opt {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .5rem;
    background: var(--background, var(--bs-body-bg, #fff));
    cursor: pointer;
    text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.editor-paste-opt:hover { border-color: var(--bs-primary, #0d6efd); }
.editor-paste-opt.selected {
    border-color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, .06);
}
.editor-paste-opt-icon { font-size: 1.25rem; flex: 0 0 auto; }
.editor-paste-opt-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.editor-paste-opt-text strong {
    font-size: .875rem;
    color: var(--foreground, var(--bs-body-color, #212529));
}
.editor-paste-opt-text small {
    font-size: .75rem;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
}

/* =========================================================
 * 슬래시 커맨드 메뉴 (v1.7)
 * ========================================================= */
.editor-slash-menu {
    position: fixed;
    z-index: 10060;
    width: 232px;
    max-height: 320px;
    overflow-y: auto;
    padding: .25rem;
    border: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    border-radius: .5rem;
    background: var(--background, var(--bs-body-bg, #fff));
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
}
.editor-slash-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .4rem .625rem;
    border: none;
    border-radius: .375rem;
    background: transparent;
    color: var(--foreground, var(--bs-body-color, #212529));
    font-size: .8438rem;
    text-align: left;
    cursor: pointer;
}
.editor-slash-item:hover,
.editor-slash-item.active {
    background: rgba(13, 110, 253, .1);
    color: var(--bs-primary, #0d6efd);
}
.editor-slash-icon {
    flex: 0 0 26px;
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
}
.editor-slash-hint {
    padding: .375rem .625rem .25rem;
    border-top: 1px solid var(--border, var(--bs-border-color, #dee2e6));
    margin-top: .25rem;
    font-size: .6875rem;
    color: var(--muted-foreground, var(--bs-secondary-color, #6c757d));
}

/* 체크리스트 (v1.7) — 에디터 안 표시 보정 */
.editor-content ul[data-editor-checklist] input[type="checkbox"] {
    cursor: pointer;
    width: 1em;
    height: 1em;
}

/* 특수기호 창 */
.editor-sc { display: flex; gap: 8px; height: 240px; }
.editor-sc-cats { list-style: none; margin: 0; padding: 0; width: 150px; flex: 0 0 150px; overflow-y: auto; border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); }
.editor-sc-cats button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border, var(--bs-border-color, #dee2e6)); background: transparent; color: inherit; font-size: .8125rem; cursor: pointer; }
.editor-sc-cats button:hover { background: var(--secondary, var(--bs-secondary-bg, #e9ecef)); }
.editor-sc-cats button.active { background: var(--bs-primary, #0d6efd); color: #fff; }
.editor-sc-grid { flex: 1; min-width: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 32px; gap: 2px; align-content: start; }
.editor-sc-grid button { padding: 0; border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); background: var(--background, var(--bs-body-bg, #fff)); color: inherit; font-size: 15px; cursor: pointer; }
.editor-sc-grid button:hover { background: var(--bs-primary, #0d6efd); color: #fff; }

/* AI 작성 패널 */
.editor-ai-panel { padding: .5rem .75rem; background: var(--muted, var(--bs-tertiary-bg, #f8f9fa)); border-bottom: 1px solid var(--border, var(--bs-border-color, #dee2e6)); }
.editor-ai-head { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; margin-bottom: .4rem; }
.editor-ai-status { flex: 1; font-weight: 400; color: var(--bs-primary, #0d6efd); }
.editor-ai-close { margin-left: auto; border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; }
.editor-ai-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.editor-ai-btn { padding: .4rem .75rem; border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); border-radius: .375rem; background: var(--background, var(--bs-body-bg, #fff)); color: inherit; font-size: .8125rem; cursor: pointer; white-space: nowrap; }
.editor-ai-btn:hover { border-color: var(--bs-primary, #0d6efd); color: var(--bs-primary, #0d6efd); }
.editor-ai-panel.busy .editor-ai-bar { opacity: .5; pointer-events: none; }
.editor-ai-menuwrap { position: relative; }
.editor-ai-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 200; min-width: 140px; margin-top: 2px; background: var(--background, var(--bs-body-bg, #fff)); border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.editor-ai-menu.show { display: block; }
.editor-ai-menu button { display: block; width: 100%; text-align: left; padding: .45rem .75rem; border: 0; background: transparent; color: inherit; font-size: .8125rem; cursor: pointer; }
.editor-ai-menu button:hover { background: var(--secondary, var(--bs-secondary-bg, #e9ecef)); }

/* 레이아웃 선택 창 */
.editor-lo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 400px; margin: 0 auto; }
.editor-lo-item { aspect-ratio: 1; padding: 6px; border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); background: var(--background, var(--bs-body-bg, #fff)); cursor: pointer; }
.editor-lo-item:hover { border-color: var(--bs-primary, #0d6efd); }
.editor-lo-item.active { border-color: var(--bs-primary, #0d6efd); box-shadow: 0 0 0 2px rgba(13, 110, 253, .35); }
.editor-lo-thumb { display: grid; gap: 2px; width: 100%; height: 100%; }
.editor-lo-thumb i { background: var(--muted, #e9ecef); border: 1px solid #adb5bd; box-sizing: border-box; }

/* 제품정보 */
.editor-about { text-align: left; }
.editor-about-logo { font-size: 28px; letter-spacing: .5px; color: #343a40; padding: 8px 0 12px; border-bottom: 1px solid #dee2e6; margin-bottom: 12px; }
.editor-about-logo b { color: #0d6efd; }
.editor-about table { border-collapse: collapse; margin: 4px 0 12px; }
.editor-about th { font-weight: 400; text-align: left; padding: 3px 24px 3px 0; color: #495057; white-space: nowrap; }
.editor-about td { padding: 3px 0; }
.editor-about-ver { border-top: 1px solid #dee2e6; padding-top: 10px; font-size: 12px; line-height: 1.6; color: #495057; }
.editor-modal-dialog table { font-size: 12px; }
.editor-about p { font-size: 14px; }


/* 웹 접근성 검증 */
.editor-a11y-sum { margin: 0 0 .5rem; font-weight: 600; }
.editor-a11y-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; border: 1px solid var(--border, var(--bs-border-color, #dee2e6)); border-radius: .375rem; }
.editor-a11y-list li + li { border-top: 1px solid var(--border, var(--bs-border-color, #dee2e6)); }
.editor-a11y-item { display: flex; align-items: baseline; gap: .6rem; width: 100%; padding: .45rem .6rem; border: 0; background: none; color: inherit; font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.editor-a11y-item:hover { background: var(--secondary, var(--bs-secondary-bg, #e9ecef)); }
.editor-a11y-badge { flex: 0 0 auto; padding: .05rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; }
.editor-a11y-badge.error { background: #e03131; }
.editor-a11y-badge.warn { background: #f08c00; }
.editor-a11y-msg { flex: 1 1 auto; }
.editor-a11y-clip { flex: 0 1 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground, var(--bs-secondary-color, #6c757d)); font-family: Consolas, monospace; font-size: .8rem; }
.editor-a11y-note { margin: .6rem 0 0; color: var(--muted-foreground, var(--bs-secondary-color, #6c757d)); font-size: .8rem; }

/* 제목·글꼴·글자 크기·줄 간격: 현재 값을 글자로 보여 주는 선택 상자 */
.editor-btn.editor-dropdown-btn.editor-select {
    justify-content: space-between;
    gap: 6px;
    padding: 0 6px 0 10px;
    font-size: 12px;
}
.editor-select-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.editor-select[data-select="heading"] { width: 92px; }
.editor-select[data-select="fontname"] { width: 110px; }
.editor-select[data-select="fontsize"] { width: 80px; }
.editor-select[data-select="lineheight"] { width: 72px; }
.editor-btn.editor-dropdown-btn.editor-select[data-select="fontsize"],
.editor-btn.editor-dropdown-btn.editor-select[data-select="lineheight"] { font-size: 13px; }   /* 글자 크기·줄 간격은 제목·글꼴(12px)보다 1px 크게 */
/* 제품정보 로고의 K: 파랑→보라 그라데이션 글자 + 은은한 빛 + 천천히 흐르는 광택 */
.editor-about-k {
    display: inline-block;
    font-size: 1.28em;
    font-weight: 800;
    line-height: 1;
    margin-right: 1px;
    color: #4263eb;                                   /* 그라데이션을 못 쓰는 환경의 대체 색 */
    background: linear-gradient(110deg, #1c7ed6 0%, #7048e8 40%, #e64980 60%, #1c7ed6 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(112, 72, 232, .35));
    animation: editor-about-k-shine 4s linear infinite;
}
@keyframes editor-about-k-shine {
    from { background-position: 0% 0; }
    to { background-position: 220% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .editor-about-k { animation: none; }
}

/* 글꼴 목록(드롭다운 메뉴)은 선택 상자와 같은 110px 폭. 긴 글꼴 이름은 말줄임 */
.editor-dropdown-menu[data-select="fontname"] { width: 110px; min-width: 110px; box-sizing: border-box; }
.editor-dropdown-menu[data-select="fontname"] .editor-dropdown-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }