/* Pages 에디터/조회 공용 스타일 — 테마 변수 기반 (라이트/다크 자동 대응) */

.cpg-editor {
    outline: none;
    min-height: 300px;
    color: var(--clv-text-primary);
    font-size: 15px;
    line-height: 1.7;
    padding: 4px 0 120px;
}

.cpg-editor > * + * { margin-top: 2px; }

.cpg-editor h1 { font-size: 1.9em; font-weight: 700; margin: 1em 0 0.3em; }
.cpg-editor h2 { font-size: 1.5em; font-weight: 700; margin: 0.9em 0 0.25em; }
.cpg-editor h3 { font-size: 1.2em; font-weight: 600; margin: 0.8em 0 0.2em; }

.cpg-editor p { margin: 2px 0; }

.cpg-editor a { color: var(--clc-primary); text-decoration: underline; cursor: pointer; }
.cpg-editor code {
    background: var(--clc-assign-base-100);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: Consolas, 'D2Coding', monospace;
    font-size: 0.9em;
}
.cpg-editor pre {
    background: var(--clc-assign-base-100);
    border: 1px solid var(--clc-assign-base-200);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
}
.cpg-editor pre code { background: none; padding: 0; }

.cpg-editor blockquote {
    border-left: 3px solid var(--clc-assign-base-200);
    margin: 4px 0;
    padding: 2px 0 2px 14px;
    color: var(--clv-text-secondary);
}

.cpg-editor hr {
    border: none;
    border-top: 1px solid var(--clc-assign-base-200);
    margin: 14px 0;
}

.cpg-editor ul, .cpg-editor ol { padding-left: 1.5em; margin: 2px 0; }
.cpg-editor ul[data-type="taskList"] { list-style: none; padding-left: 0.2em; }
.cpg-editor ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
.cpg-editor ul[data-type="taskList"] li > label { margin-top: 4px; }
.cpg-editor ul[data-type="taskList"] li[data-checked="true"] > div {
    text-decoration: line-through;
    color: var(--clv-text-tertiary, var(--clv-text-secondary));
}

.cpg-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
}
.cpg-editor th, .cpg-editor td {
    border: 1px solid var(--clc-assign-base-200);
    padding: 6px 10px;
    min-width: 60px;
    vertical-align: top;
}
.cpg-editor th { background: var(--clc-assign-base-100); font-weight: 600; }

/* 콜아웃 */
.cpg-callout {
    display: flex;
    gap: 10px;
    background: var(--clc-assign-base-100);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 6px 0;
}
.cpg-callout-icon {
    border: none; background: none; cursor: pointer;
    font-size: 18px; line-height: 1.4; padding: 0;
}
.cpg-callout-content { flex: 1; min-width: 0; }

/* 토글 */
.cpg-toggle { margin: 2px 0; display: flex; gap: 4px; align-items: flex-start; }
.cpg-toggle-arrow {
    border: none; background: none; cursor: pointer;
    color: var(--clv-text-secondary);
    width: 22px; height: 26px; padding: 0; flex-shrink: 0;
    border-radius: 4px;
}
.cpg-toggle-arrow:hover { background: var(--clc-assign-base-100); }
.cpg-toggle-content { flex: 1; min-width: 0; }
.cpg-toggle-content [data-clevi-node="toggleTitle"] { font-weight: 500; }
.cpg-toggle-content [data-clevi-node="toggleBody"] {
    margin-left: 2px; padding-left: 12px;
    border-left: 1px solid var(--clc-assign-base-200);
}
.cpg-toggle[data-open="false"] [data-clevi-node="toggleBody"] { display: none; }

/* 컬럼 */
.cpg-editor [data-clevi-node="columns"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 20px;
    margin: 6px 0;
}
.cpg-editor [data-clevi-node="column"] {
    min-width: 0;
    border-radius: 6px;
}

/* 멘션/페이지링크 */
.cpg-editor [data-clevi-node="mention"], .cpg-mention {
    color: var(--clc-primary);
    background: color-mix(in srgb, var(--clc-primary) 10%, transparent);
    border-radius: 4px;
    padding: 0 3px;
    font-weight: 500;
}
.cpg-pagelink {
    color: var(--clv-text-primary);
    background: var(--clc-assign-base-100);
    border-bottom: 1px solid var(--clc-assign-base-200);
    border-radius: 4px;
    padding: 0 4px;
    cursor: pointer;
    font-weight: 500;
}
.cpg-pagelink:hover { background: var(--clc-assign-base-200); }

/* 위젯 블록 공통 셸 */
.cpg-widget { display: block; margin: 6px 0; }

/* placeholder */
.cpg-editor p.is-editor-empty:first-child::before,
.cpg-editor .is-empty[data-placeholder]::before {
    content: attr(data-placeholder);
    color: var(--clv-text-tertiary, var(--clv-text-secondary));
    float: left;
    height: 0;
    pointer-events: none;
}

/* 협업 커서 (collaboration caret) */
.collaboration-carets__caret {
    border-left: 1px solid; border-right: 1px solid;
    margin-left: -1px; margin-right: -1px;
    pointer-events: none; position: relative;
}
.collaboration-carets__label {
    border-radius: 3px 3px 3px 0;
    color: #fff;
    font-size: 11px; font-weight: 600;
    left: -1px; line-height: normal;
    padding: 0.1rem 0.3rem;
    position: absolute; top: -1.4em;
    user-select: none; white-space: nowrap;
}

/* suggestion 드롭다운 */
.cpg-suggest {
    position: absolute; z-index: 10000;
    display: none;
    min-width: 220px; max-width: 320px; max-height: 320px;
    overflow-y: auto;
    background: var(--clc-assign-base);
    border: 1px solid var(--clc-assign-base-200);
    border-radius: 10px;
    box-shadow: var(--clc-shadow-layer0, 0 8px 24px rgba(0,0,0,0.18));
    padding: 4px;
}
.cpg-suggest-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; border: none; background: none;
    padding: 7px 10px; border-radius: 6px;
    cursor: pointer; text-align: left;
    color: var(--clv-text-primary); font-size: 13px;
}
.cpg-suggest-item:hover, .cpg-suggest-active { background: var(--clc-assign-base-100); }
.cpg-suggest-icon { width: 22px; text-align: center; flex-shrink: 0; }
.cpg-suggest-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpg-suggest-hint { color: var(--clv-text-tertiary, var(--clv-text-secondary)); font-size: 11px; }
.cpg-suggest-empty { padding: 10px; color: var(--clv-text-secondary); font-size: 13px; }

/* 블록 핸들 */
.cpg-handle {
    position: absolute; z-index: 900;
    display: none; gap: 2px;
}
.cpg-handle button {
    border: none; background: none; cursor: pointer;
    color: var(--clv-text-tertiary, var(--clv-text-secondary));
    width: 22px; height: 24px; padding: 0;
    border-radius: 5px; font-size: 14px;
}
.cpg-handle button:hover { background: var(--clc-assign-base-100); color: var(--clv-text-primary); }
.cpg-handle-grip { cursor: grab; letter-spacing: -2px; font-size: 11px; }

/* 블록 메뉴 */
.cpg-blockmenu {
    position: absolute; z-index: 10001;
    background: var(--clc-assign-base);
    border: 1px solid var(--clc-assign-base-200);
    border-radius: 10px;
    box-shadow: var(--clc-shadow-layer0, 0 8px 24px rgba(0,0,0,0.18));
    padding: 4px; min-width: 150px;
}
.cpg-blockmenu-item {
    display: block; width: 100%;
    border: none; background: none;
    padding: 7px 12px; border-radius: 6px;
    cursor: pointer; text-align: left;
    color: var(--clv-text-primary); font-size: 13px;
}
.cpg-blockmenu-item:hover { background: var(--clc-assign-base-100); }
.cpg-blockmenu-item.cpg-danger { color: var(--clc-danger, #d13e5b); }

/* 플로팅 서식 툴바 */
.cpg-ftbar {
    position: absolute; z-index: 10000;
    display: flex; align-items: center; gap: 2px;
    padding: 4px 6px;
    background: var(--clc-assign-base);
    border: 1px solid var(--clc-assign-base-200);
    border-radius: 8px;
    box-shadow: var(--clc-shadow-layer0, 0 4px 16px rgba(0,0,0,0.15));
    opacity: 0; pointer-events: none;
    transition: opacity 0.12s ease;
    white-space: nowrap;
}
.cpg-ftbar-visible { opacity: 1; pointer-events: auto; }
.cpg-ftbar button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 26px;
    border: none; background: transparent;
    color: var(--clv-text-secondary);
    cursor: pointer; font-size: 13px; border-radius: 5px; padding: 0;
}
.cpg-ftbar button:hover { background: var(--clc-assign-base-100); color: var(--clv-text-primary); }
.cpg-ftbar button.cpg-active {
    background: color-mix(in srgb, var(--clc-primary) 18%, transparent);
    color: var(--clc-primary);
}

/* 조회(Read Model) 렌더러 — Blazor 가 같은 클래스를 사용 */
.cpg-view { color: var(--clv-text-primary); font-size: 15px; line-height: 1.7; }
.cpg-view h1 { font-size: 1.9em; font-weight: 700; margin: 1em 0 0.3em; }
.cpg-view h2 { font-size: 1.5em; font-weight: 700; margin: 0.9em 0 0.25em; }
.cpg-view h3 { font-size: 1.2em; font-weight: 600; margin: 0.8em 0 0.2em; }
.cpg-view p { margin: 4px 0; }
.cpg-view a { color: var(--clc-primary); text-decoration: underline; }
.cpg-view code { background: var(--clc-assign-base-100); border-radius: 4px; padding: 1px 5px; font-family: Consolas, 'D2Coding', monospace; font-size: 0.9em; }
.cpg-view pre { background: var(--clc-assign-base-100); border: 1px solid var(--clc-assign-base-200); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
.cpg-view pre code { background: none; padding: 0; }
.cpg-view blockquote { border-left: 3px solid var(--clc-assign-base-200); margin: 4px 0; padding: 2px 0 2px 14px; color: var(--clv-text-secondary); }
.cpg-view hr { border: none; border-top: 1px solid var(--clc-assign-base-200); margin: 14px 0; }
.cpg-view ul, .cpg-view ol { padding-left: 1.5em; margin: 2px 0; }
.cpg-view table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.cpg-view th, .cpg-view td { border: 1px solid var(--clc-assign-base-200); padding: 6px 10px; vertical-align: top; }
.cpg-view th { background: var(--clc-assign-base-100); font-weight: 600; }
.cpg-view .cpg-task-done { text-decoration: line-through; color: var(--clv-text-tertiary, var(--clv-text-secondary)); }

/* ===== 표면(PageSurface/Home/Tree/Comments/Widget) — 테마 변수 기반 ===== */
.cpgs-root { display: flex; gap: 24px; padding: 16px 24px; max-width: 1600px; margin: 0 auto; }
.cpgs-side-left { width: 260px; flex-shrink: 0; }
.cpgs-side-right { width: 320px; flex-shrink: 0; }
.cpgs-main { flex: 1; min-width: 0; max-width: 900px; margin: 0 auto; }
.cpgs-tool-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base); color: var(--clv-text-primary); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.cpgs-tool-btn:hover { background: var(--clc-assign-base-100); }
.cpgs-tool-btn.cpgs-primary { background: var(--clc-primary); color: var(--clc-text-contrast-color, #fff); border-color: var(--clc-primary); }
.cpgs-tool-btn.cpgs-danger { color: var(--clc-danger, #d13e5b); }
.cpgs-side-title { font-size: 12px; font-weight: 600; color: var(--clv-text-secondary); margin: 14px 0 6px; }
.cpgs-search input, .cpgh-home-search input { width: 100%; border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base); color: var(--clv-text-primary); border-radius: 8px; padding: 7px 10px; font-size: 13px; margin-top: 12px; }
.cpgs-search-hits button, .cpgs-backlinks button { display: block; width: 100%; text-align: left; border: none; background: none; color: var(--clv-text-primary); padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cpgs-search-hits button:hover, .cpgs-backlinks button:hover { background: var(--clc-assign-base-100); }
.cpgs-search-hits small { display: block; color: var(--clv-text-secondary); font-size: 11px; }
.cpgs-empty, .cpgt-empty, .cpgc-empty, .cpgw-empty { color: var(--clv-text-secondary); font-size: 13px; padding: 10px 6px; }
.cpgs-revision { border: 1px solid var(--clc-assign-base-200); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.cpgs-revision-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.cpgs-revision-time { color: var(--clv-text-secondary); font-weight: 400; }
.cpgs-revision-preview { color: var(--clv-text-secondary); font-size: 12px; margin: 6px 0; max-height: 54px; overflow: hidden; }
.cpgs-revision button { border: 1px solid var(--clc-assign-base-200); background: none; color: var(--clc-primary); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 12px; }

.cpgh-root { position: relative; }
.cpgh-banner { background: color-mix(in srgb, var(--clc-danger, #d13e5b) 10%, transparent); border: 1px solid color-mix(in srgb, var(--clc-danger, #d13e5b) 30%, transparent); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.cpgh-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cpgh-icon { width: 52px; font-size: 26px; border: none; background: none; color: var(--clv-text-primary); text-align: center; }
.cpgh-title { flex: 1; font-size: 26px; font-weight: 700; border: none; background: none; color: var(--clv-text-primary); outline: none; }
.cpgh-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--clv-text-secondary); white-space: nowrap; }
.cpgh-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clc-assign-base-200); }
.cpgh-status-pending .cpgh-status-dot { background: var(--clc-warning, #eab308); }
.cpgh-status-saved .cpgh-status-dot, .cpgh-status-synced .cpgh-status-dot { background: var(--clc-success, #22c55e); }
.cpgh-status-failed .cpgh-status-dot, .cpgh-status-offline .cpgh-status-dot { background: var(--clc-danger, #ef4444); }

.cpgt-root { font-size: 13px; }
.cpgt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cpgt-title { font-weight: 600; color: var(--clv-text-secondary); font-size: 12px; }
.cpgt-add, .cpgt-item-add { border: none; background: none; color: var(--clv-text-secondary); cursor: pointer; border-radius: 5px; width: 20px; height: 20px; }
.cpgt-add:hover, .cpgt-item-add:hover { background: var(--clc-assign-base-100); }
.cpgt-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; color: var(--clv-text-primary); }
.cpgt-item:hover { background: var(--clc-assign-base-100); }
.cpgt-item .cpgt-item-add { visibility: hidden; }
.cpgt-item:hover .cpgt-item-add { visibility: visible; }
.cpgt-selected { background: var(--clc-assign-base-100); font-weight: 600; }
.cpgt-droptarget { outline: 2px dashed var(--clc-primary); }
.cpgt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpgt-badge { font-size: 10px; color: var(--clv-text-secondary); border: 1px solid var(--clc-assign-base-200); border-radius: 4px; padding: 0 4px; }

.cpgc-root { font-size: 13px; }
.cpgc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cpgc-title { font-weight: 600; color: var(--clv-text-secondary); font-size: 12px; }
.cpgc-toggle { border: none; background: none; color: var(--clc-primary); cursor: pointer; font-size: 12px; }
.cpgc-thread { border: 1px solid var(--clc-assign-base-200); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.cpgc-thread.cpgc-resolved { opacity: 0.65; }
.cpgc-meta { display: flex; gap: 8px; font-size: 11px; color: var(--clv-text-secondary); }
.cpgc-author { font-weight: 600; color: var(--clv-text-primary); }
.cpgc-content { margin: 4px 0; cursor: pointer; white-space: pre-wrap; }
.cpgc-actions button { border: none; background: none; color: var(--clv-text-secondary); cursor: pointer; font-size: 11px; padding: 2px 6px; }
.cpgc-actions button:hover { color: var(--clv-text-primary); }
.cpgc-actions .cpgc-danger:hover { color: var(--clc-danger, #d13e5b); }
.cpgc-reply { margin-left: 14px; margin-top: 6px; border-left: 2px solid var(--clc-assign-base-200); padding-left: 10px; border-top: none; border-right: none; border-bottom: none; border-radius: 0; }
.cpgc-new textarea { width: 100%; border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base); color: var(--clv-text-primary); border-radius: 8px; padding: 8px; font-size: 13px; resize: vertical; }
.cpgc-new-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.cpgc-send { background: var(--clc-primary); color: var(--clc-text-contrast-color, #fff); border: none; border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.cpgc-anchor-hint { font-size: 11px; color: var(--clc-primary); margin: 8px 0 4px; }

.cpgw { font-size: 14px; color: var(--clv-text-primary); }
.cpgw-figure { margin: 0; }
.cpgw-figure img { max-width: 100%; border-radius: 8px; display: block; }
.cpgw-figure figcaption { font-size: 12px; color: var(--clv-text-secondary); margin-top: 4px; }
.cpgw-caption { width: 100%; border: none; background: none; color: var(--clv-text-secondary); font-size: 12px; outline: none; }
.cpgw-video { max-width: 100%; border-radius: 8px; }
.cpgw-toolbar { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cpgw-toolbar button, .cpgw-placeholder button { border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base); color: var(--clv-text-primary); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.cpgw-toolbar .cpgw-danger { color: var(--clc-danger, #d13e5b); }
.cpgw-url { flex: 1; min-width: 180px; border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base); color: var(--clv-text-primary); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.cpgw-placeholder { display: flex; align-items: center; gap: 10px; border: 1px dashed var(--clc-assign-base-200); border-radius: 10px; padding: 14px; color: var(--clv-text-secondary); flex-wrap: wrap; }
.cpgw-file, .cpgw-bookmark, .cpgw-subpage, .cpg-view .cpg-view-subpage { display: flex; align-items: center; gap: 8px; border: 1px solid var(--clc-assign-base-200); border-radius: 10px; padding: 10px 14px; color: var(--clv-text-primary); text-decoration: none; background: var(--clc-assign-base); cursor: pointer; width: 100%; text-align: left; }
.cpgw-file:hover, .cpgw-bookmark:hover, .cpgw-subpage:hover { background: var(--clc-assign-base-100); }
.cpgw-bookmark { flex-direction: column; align-items: flex-start; gap: 2px; }
.cpgw-bookmark-title { font-weight: 600; }
.cpgw-bookmark-url { font-size: 12px; color: var(--clv-text-secondary); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cpgw-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--clc-assign-base-200); border-radius: 10px; }
.cpgw-equation { padding: 10px; text-align: center; }
.cpgw-equation-input { width: 100%; border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base-100); color: var(--clv-text-primary); border-radius: 8px; padding: 8px; font-family: Consolas, monospace; font-size: 12px; }
.cpgw-todo, .cpgw-todolist li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.cpgw-todo-done .cpgw-todo-title, .cpgw-todolist li.cpgw-todo-done span { text-decoration: line-through; color: var(--clv-text-secondary); }
.cpgw-todo-due { font-size: 11px; color: var(--clc-warning, #b45309); }
.cpgw-todolist { list-style: none; padding: 0; margin: 4px 0; }
.cpgw-kanban { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0; }
.cpgw-kanban-col { min-width: 200px; background: var(--clc-assign-base-100); border-radius: 10px; padding: 8px; }
.cpgw-kanban-head { font-size: 12px; font-weight: 600; color: var(--clv-text-secondary); margin-bottom: 6px; display: flex; justify-content: space-between; }
.cpgw-kanban-card { display: block; width: 100%; text-align: left; border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base); color: var(--clv-text-primary); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-size: 13px; }
.cpgw-collection-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.cpgw-collection-table th, .cpgw-collection-table td { border: 1px solid var(--clc-assign-base-200); padding: 6px 10px; text-align: left; }
.cpgw-link { border: none; background: none; color: var(--clv-text-primary); cursor: pointer; padding: 0; font-size: 13px; }
.cpgw-link:hover { color: var(--clc-primary); }

.cpgh-home { max-width: 960px; margin: 0 auto; padding: 24px; }
.cpgh-home-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.cpgh-home-title { font-size: 22px; font-weight: 700; }
.cpgh-home-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cpgh-home-actions select { border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base); color: var(--clv-text-primary); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.cpgh-home-hit { display: block; width: 100%; text-align: left; border: 1px solid var(--clc-assign-base-200); background: var(--clc-assign-base); color: var(--clv-text-primary); border-radius: 10px; padding: 10px 14px; margin-top: 8px; cursor: pointer; }
.cpgh-hit-title { font-weight: 600; }
.cpgh-hit-snippet { font-size: 12px; color: var(--clv-text-secondary); margin-top: 2px; }