/* VLMOps 바닐라 목업 전용 스타일. 콘텐츠 표면은 직각을 기본으로 한다. */
.vlmops-root {
  --vlm-accent: #2970ff;
  --vlm-accent-deep: #1b58d4;   /* kdl --k-primaryDeep 정합 */
  --vlm-accent-weak: #eaf1ff;
  --vlm-surface: #fff;
  --vlm-background: #f5f5f5;
  --vlm-line: #e5e7eb;
  --vlm-border: #d4d4d4;
  --vlm-muted: #4a5565;   /* kdl --k-text2 정합 */
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--vlm-background);
  color: #1f2937;
}
.vlmops-root *, .vlmops-modal * { box-sizing: border-box; }
.vlmops-root button, .vlmops-root input, .vlmops-root textarea,
.vlmops-modal button, .vlmops-modal input, .vlmops-modal textarea { border-radius: 0 !important; }   /* 각짐 정합(2026-08-03) — 디자인 토큰(0px)에 맞춰 각지게 */
.vlmops-modal input[type="checkbox"] { border-radius: 0 !important; }
.vlmops-root button, .vlmops-modal button { touch-action: manipulation; }
.vlmops-root button:focus-visible, .vlmops-root input:focus-visible, .vlmops-root textarea:focus-visible,
.vlmops-modal button:focus-visible, .vlmops-modal input:focus-visible, .vlmops-modal textarea:focus-visible {
  outline: 2px solid var(--vlm-accent);
  outline-offset: 1px;
}
.vlmops-body { min-height: 0; flex: 1; overflow: hidden; }
.vlmops-view { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.vlmops-scroll { min-height: 0; flex: 1; overflow-y: scroll; }
.vlmops-content { width: min(100%, 1720px); margin: 0 auto; padding: 32px 40px 64px; }   /* 라이브러리·대시보드와 같은 상자(최대 폭 1720px, 여백 32/40/64) — 2026-08-19 */
.vlmops-page-head { margin-bottom: 24px; }
.vlmops-page-head h1 { color: #1f2937; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.vlmops-page-head p { max-width: 760px; margin-top: 8px; color: var(--vlm-muted); font-size: 14px; line-height: 1.6; }

/* 과정 둘러보기는 목록 머리 단추 대신 제목 줄 오른쪽 끝 작은 [?] 단추로 연다 (2026-10-29 Benson) */
.vlmops-page-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vlmops-tour-info { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; color: #94a3b8; cursor: pointer; }
.vlmops-tour-info:hover { background: #eef2f7; color: var(--vlm-accent); }
.vlmops-btn { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--vlm-border); background: #fff; padding: 7px 12px; color: var(--vlm-muted); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
.vlmops-btn:hover { border-color: #aab3c1; color: #1f2937; }
.vlmops-btn:disabled { cursor: not-allowed; opacity: .45; }
.vlmops-btn-primary { border-color: var(--vlm-accent); background: var(--vlm-accent); color: #fff; }
.vlmops-btn-primary:hover { border-color: var(--vlm-accent-deep); background: var(--vlm-accent-deep); color: #fff; }
.vlmops-btn-danger { border-color: #fecaca; color: #b91c1c; }
.vlmops-btn-danger:hover { border-color: #ef4444; background: #fff1f2; color: #991b1b; }
.vlmops-btn-quiet { border-color: transparent; background: transparent; }
.vlmops-input, .vlmops-textarea { width: 100%; border: 1px solid var(--vlm-border); background: #fff; padding: 8px 10px; color: #1f2937; font-size: 12px; }
.vlmops-input { min-height: 36px; }
.vlmops-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.vlmops-input::placeholder, .vlmops-textarea::placeholder { color: #94a3b8; }
.vlmops-input:focus, .vlmops-textarea:focus { border-color: var(--vlm-accent); }
.vlmops-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 8px; margin-bottom: 16px; }
.vlmops-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.vlmops-list-toolbar > .vlmops-search { width: 288px; max-width: 100%; }
.vlmops-list-toolbar > :last-child { margin-left: auto; }
.vlmops-search { position: relative; }
.vlmops-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.vlmops-search .vlmops-input { padding-left: 34px; }
.vlmops-select { position: relative; min-width: 0; }
.vlmops-select-trigger { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--vlm-border); background: #fff; padding: 8px 10px; color: #334155; font-size: 12px; text-align: left; cursor: pointer; }
.vlmops-select-trigger:hover, .vlmops-select.is-open .vlmops-select-trigger { border-color: var(--vlm-accent); }
.vlmops-select.is-disabled .vlmops-select-trigger { cursor: not-allowed; background: #f1f5f9; color: #94a3b8; }
.vlmops-select-menu { position: absolute; z-index: 35; top: calc(100% + 3px); left: 0; right: 0; max-height: 240px; overflow: auto; border: 1px solid #cbd5e1; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.14); }
.vlmops-select-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: #fff; padding: 9px 10px; color: #334155; font-size: 12px; text-align: left; cursor: pointer; }
.vlmops-select-option:hover { background: #f1f5f9; }
.vlmops-select-option.is-selected { background: var(--vlm-accent-weak); color: var(--vlm-accent-deep); font-weight: 700; }
.vlmops-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* 카드 규격은 워크플로우(.ppw-card)와 동일하게 맞춘다 — 아이콘 36×36, hover 시 파란 테두리와 그림자로 떠오름 (2026-08-07) */
.vlmops-card { position: relative; min-height: 180px; display: flex; flex-direction: column; border: 1px solid var(--vlm-line); background: var(--vlm-surface); padding: 20px; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease; }
.vlmops-card:hover, .vlmops-card:focus-within { border-color: rgba(41,112,255,.7); box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.vlmops-card-open { position: absolute; z-index: 1; inset: 0; border: 0; background: transparent; cursor: pointer; }
.vlmops-card-open:focus-visible { outline: 2px solid var(--vlm-accent); outline-offset: -3px; }
.vlmops-card-icon { display: grid; width: 36px; height: 36px; place-items: center; background: var(--vlm-accent-weak); color: var(--vlm-accent); }
.vlmops-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 12px; color: #64748b; font-size: 10px; }
.vlmops-card-stats strong { display: block; overflow: hidden; color: #1f2937; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-card-action { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #94a3b8; opacity: 0; cursor: pointer; transition: background-color .12s ease, color .12s ease, opacity .12s ease; }
.vlmops-card:hover .vlmops-card-action, .vlmops-card:focus-within .vlmops-card-action, .vlmops-card-action[aria-expanded="true"], .vlmops-card-action.is-favorite { opacity: 1; }
.vlmops-card-action:hover, .vlmops-card-action[aria-expanded="true"] { background: #f1f5f9; color: #334155; }
/* 더보기(메뉴) 버튼은 늘 보인다. 숨겨 두면 카드에 무엇을 할 수 있는지 마우스를 올려 보기 전에는 알 수 없다(2026-08-18 Benson).
   즐겨찾기 별은 종전대로 켜진 것만 항상 보이고 꺼진 것은 마우스를 올릴 때 보인다. */
.vlmops-card-action[data-vlm-action="template-menu-toggle"] { opacity: 1; }
.vlmops-card-action[data-vlm-action="template-favorite"] { opacity: 1; }
.vlmops-card-action[data-dc="menu"], .vlmops-card-action[data-dc="favorite"] { opacity: 1; }   /* 문서 대조 카드도 별과 더보기를 항상 보인다(2026-10-29 Benson) */   /* 즐겨찾기 별은 항상 보인다(2026-08-19 Benson) */
.vlmops-card-action.is-favorite { color: rgb(var(--k-favorite)); }   /* 라이브러리 즐겨찾기 별과 같은 토큰 색(2026-08-18) */
.vlmops-card-action.is-favorite svg { fill: currentColor; }
.vlmops-context-menu { position: absolute; z-index: 60; top: calc(100% + 4px); right: 0; width: max-content; min-width: 176px; border: 1px solid var(--vlm-line); background: var(--vlm-surface); padding: 4px 0; box-shadow: 0 14px 34px rgba(15,23,42,.16); }
.vlmops-context-menu > button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 12px; color: #334155; font-size: 12px; text-align: left; cursor: pointer; }
.vlmops-context-menu > button:hover { background: #f7f8fa; color: #1f2937; }
.vlmops-context-menu > button.is-danger { color: #b91c1c; }
.vlmops-context-menu > button.is-danger:hover { background: #fff1f2; color: #991b1b; }
.vlmops-context-menu > div { height: 1px; margin: 4px 0; background: var(--vlm-line); }
.vlmops-version-chip { display: inline-flex; min-height: 20px; flex: 0 0 auto; align-items: center; border: 1px solid #c9d9ff; background: var(--vlm-accent-weak); padding: 2px 7px; color: var(--vlm-accent-deep); font-size: 10px; font-weight: 750; line-height: 1; }
/* 빈 상태 — VLMOps 갤러리(.pe-gallery-empty)와 같은 모양. 상자를 두르지 않는다(2026-08-12) */
.vlmops-empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 180px; padding: 60px 24px; color: #94a3b8; text-align: center; }
.vlmops-empty > svg { width: 26px; height: 26px; }
.vlmops-empty strong { color: #1f2937; font-size: 15px; }
.vlmops-empty p { margin: 0; max-width: 380px; color: var(--vlm-muted); font-size: 12px; line-height: 1.55; }
.vlmops-empty-action { margin-top: 8px; }
.vlmops-panel { border: 1px solid #e1e5eb; background: #fff; }
.vlmops-panel-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e5e7eb; padding: 10px 16px; }
.vlmops-detail-bar { position: relative; z-index: 20; min-height: 48px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--vlm-line); background: var(--vlm-surface); padding: 8px 16px; }
.vlmops-icon-button { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 0; background: transparent; color: var(--vlm-muted); cursor: pointer; }
.vlmops-icon-button:hover, .vlmops-icon-button[aria-expanded="true"] { background: #f1f5f9; color: var(--vlm-accent); }
.vlmops-editor-grid { min-height: 0; flex: 1; display: flex; align-items: stretch; }
.vlmops-type-rail { width: 250px; min-height: 0; flex: 0 0 250px; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid #e5e7eb; background: #fff; }
.vlmops-type-add { height: 48px; flex: 0 0 48px; display: flex; align-items: center; border-bottom: 1px solid #e5e7eb; padding: 0 12px; }
.vlmops-type-add .vlmops-btn { width: 100%; min-height: 36px; }
.vlmops-type-search { flex: 0 0 auto; border-bottom: 1px solid #e5e7eb; padding: 12px; }
.vlmops-type-search .vlmops-input { border-color: transparent; background: #f7f8fa; font-size: 11px; }
.vlmops-type-search .vlmops-input:focus { border-color: #d8dde5; background: #fff; }
.vlmops-type-results { min-height: 0; flex: 1; overflow-y: auto; padding: 8px; }
.vlmops-type-empty { padding: 22px 8px; color: #64748b; font-size: 11px; line-height: 1.65; text-align: center; }
.vlmops-type-group + .vlmops-type-group { margin-top: 4px; }
.vlmops-type-day { display: flex; align-items: center; gap: 8px; padding: 8px 4px 4px; color: #64748b; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.vlmops-type-day i { height: 1px; flex: 1; background: #e5e7eb; }
.vlmops-type-item { position: relative; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 10px; cursor: pointer; }
.vlmops-type-item:hover { background: #f7f8fa; }
.vlmops-type-item.is-active { background: #f3f4f6; }
.vlmops-type-item:focus-visible { outline: 2px solid var(--vlm-accent); outline-offset: -2px; }
.vlmops-type-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid #e1e5eb; background: #f7f8fa; color: #64748b; }
.vlmops-type-item.is-active .vlmops-type-icon { background: var(--vlm-accent-weak); color: var(--vlm-accent); }
.vlmops-type-copy { min-width: 0; flex: 1; }
.vlmops-type-copy strong, .vlmops-type-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-type-copy strong { color: #1f2937; font-size: 11px; font-weight: 600; }
.vlmops-type-copy strong:has(.vlmops-type-unsaved) { display: flex; align-items: center; }
.vlmops-type-copy strong:has(.vlmops-type-unsaved) { overflow: visible; }
.vlmops-type-copy small { margin-top: 3px; color: #64748b; font-size: 9px; }
.vlmops-type-delete { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 0; background: transparent; color: #94a3b8; opacity: 0; cursor: pointer; }
.vlmops-type-item:hover .vlmops-type-delete, .vlmops-type-item:focus-within .vlmops-type-delete { opacity: 1; }
.vlmops-type-delete:hover { background: #fff; color: #dc2626; }
.vlmops-editor-workspace { min-width: 0; min-height: 0; flex: 1; display: flex; align-items: stretch; padding: 16px; }
.vlmops-save-bar { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; border-top: 1px solid #e5e7eb; background: #fff; padding: 12px; }
.vlmops-save-bar .vlmops-input { min-width: 0; flex: 1; }
.vlmops-save-bar .vlmops-btn { min-height: 36px; flex: 0 0 auto; }
/* 저장 전 상태 표시(2026-08-19 Benson). 추가한 문서유형이 등록된 것으로 읽혀 새로고침에 사라지는 오해를 없앤다. */
.vlmops-save-dirty { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: rgb(var(--k-warning)); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.vlmops-save-dirty::before { content: ''; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 999px; background: currentColor; }
.vlmops-type-unsaved { margin-left: 5px; display: inline-flex; align-items: center; border: 1px solid rgb(var(--k-warning) / .35); background: rgb(var(--k-warning) / .08); padding: 0 4px; color: rgb(var(--k-warning)); font-size: 9.5px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.vlmops-preview { min-width: 280px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e1e5eb; background: #edf0f4; }
.vlmops-preview-stage { min-height: 0; flex: 1; display: flex; align-items: flex-start; padding: 12px; overflow: auto; }
.vlmops-preview-stage > .vlmops-empty { width: 100%; margin: auto; }
.vlmops-preview-empty { width: 100%; min-height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #cbd5e1; background: #fff; padding: 28px; color: #64748b; cursor: pointer; }
.vlmops-preview-empty:hover { border-color: var(--vlm-accent); color: var(--vlm-accent); }
.vlmops-preview-empty > svg { width: 24px; height: 24px; }
.vlmops-preview-empty strong { font-size: 12px; font-weight: 600; }
.vlmops-preview-empty span { max-width: 360px; color: #64748b; font-size: 10px; line-height: 1.65; text-align: center; }
/* 참고 문서 드롭존 — DEEP OCR/Parser 업로드 미리보기 영역과 동일 디자인 */
.vlmops-dropzone { width: 100%; min-height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed #cbd5e1; background: #fafbfc; padding: 32px; cursor: pointer; transition: border-color .12s ease, background .12s ease; text-align: center; }
.vlmops-dropzone:hover, .vlmops-dropzone.is-dragover { border-color: var(--vlm-accent); background: color-mix(in srgb, var(--vlm-accent) 6%, #fff); }
.vlmops-dropzone-icon { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--vlm-accent) 12%, #fff); color: var(--vlm-accent); margin-bottom: 8px; }
.vlmops-dropzone-icon > svg { width: 20px; height: 20px; }
.vlmops-dropzone-title { font-size: 16px; font-weight: 700; color: #1f2937; }
.vlmops-dropzone-link { color: var(--vlm-accent); text-decoration: underline; text-underline-offset: 2px; }
.vlmops-dropzone-sub { font-size: 12px; font-weight: 500; color: #64748b; }
.vlmops-dropzone-exts { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; max-width: 420px; }
.vlmops-dropzone-exts > b { font-size: 11px; font-weight: 600; color: #64748b; }
.vlmops-dropzone-exts > span { font-size: 10.5px; line-height: 1.6; color: #9aa4b2; }
.vlmops-dropzone-note { margin-top: 8px; font-size: 10.5px; color: #94a3b8; max-width: 360px; }
.vlmops-preview-document { position: relative; flex: 0 0 auto; min-width: 100%; margin: auto; transition: width .12s ease, transform .12s ease; transform-origin: center; }
.vlmops-preview-document img { display: block; width: 100%; min-height: 420px; border: 1px solid #d8dde5; background: #fff; object-fit: contain; }
.vlmops-preview-document img.is-pdf-page { min-height: 0; height: auto; }
.ocr-bbox.is-stream.vlmops-preview-stream-box { z-index: 2; pointer-events: none; --bbox-color: #9ca3af; box-shadow: 0 0 0 3px var(--bbox-color), 0 0 0 6px color-mix(in srgb, var(--bbox-color) 16%, transparent); }
.vlmops-preview-stream-box[hidden] { display: none; }
/* 돌려보기 결과 위치 — DEEP OCR 검수 화면처럼 회색 테두리로 깔고 고른 것만 컨피던스 색으로 강조한다 */
.vlmops-run-boxes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vlmops-run-boxes .vlmops-run-box { pointer-events: auto; cursor: pointer; }
.vlmops-run-row.has-box, .vlmops-table-cell.has-box { cursor: pointer; }
.vlmops-run-row.has-box:hover, .vlmops-table-cell.has-box:hover { background: #f8fafc; }
.vlmops-run-row.is-run-active, .vlmops-table-cell.is-run-active { background: #f3f4f6; }   /* DEEP OCR .result-row.is-active와 같다 */
.vlmops-type-rail.is-extracting { pointer-events: none; opacity: .65; }
.vlmops-preview-pdf-pending { width: 100%; aspect-ratio: 3 / 4; border: 1px solid #d8dde5; background: #fff; }
.vlmops-split-handle { width: 6px; flex: 0 0 6px; margin: 0 6px; background: #d8dde5; cursor: col-resize; transition: background-color .12s ease; }
.vlmops-split-handle:hover, .vlmops-split-handle:focus-visible { background: rgba(41,112,255,.55); outline: 0; }
.vlmops-fields { min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e1e5eb; background: #fff; }
.vlmops-fields-head { min-height: 52px; gap: 12px; padding: 8px 16px; }
.vlmops-field-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.vlmops-field-head-actions .vlmops-btn { min-height: 32px; padding: 6px 10px; font-size: 10px; white-space: nowrap; }
.vlmops-inline-icon { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.vlmops-inline-icon:hover { color: var(--vlm-accent); }
.vlmops-field-list { min-height: 0; flex: 1; overflow: auto; padding: 16px; }
.vlmops-field-tree { min-width: 0; overflow: visible; border: 1px solid var(--vlm-line); background: var(--vlm-surface); }
.vlmops-field-table-head { min-height: 34px; display: grid; grid-template-columns: minmax(0, 36%) 92px minmax(0, 1fr) 60px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 650; }
.vlmops-field-table-head > span { display: flex; align-items: center; padding: 8px 12px; }
.vlmops-field-table-head > span:not(:last-child) { border-right: 1px solid #e8ebf0; }
.vlmops-field-table-head > span:first-child { padding-left: 56px; }   /* 끌기 손잡이와 들여쓰기 칸을 지나 항목명 글자 시작선에 맞춘다 */
.vlmops-field-table-head > span:last-child { grid-column: 3 / 5; }
.vlmops-field-empty { padding: 32px 0; color: #64748b; font-size: 11px; text-align: center; }
.vlmops-field-add-button { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; border: 1px dashed #cbd5e1; background: #fff; padding: 8px 12px; color: #64748b; font-size: 12px; cursor: pointer; }
.vlmops-field-add-button:hover { border-color: var(--vlm-accent); color: var(--vlm-accent); }
.vlmops-field-add-row { display: flex; gap: 8px; }
/* ── 그룹 섹션(DEEP OCR 키수정 패턴) — 헤더 바(그룹명 편집·삭제·드래그) + 필드 표 + [+ 필드 추가] ── */
.vlmops-field-groups { display: flex; flex-direction: column; gap: 12px; }
.vlmops-group-section { min-width: 0; border: 1px solid var(--vlm-line); background: var(--vlm-surface); overflow: hidden; }
.vlmops-group-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #f8fafc; border-bottom: 1px solid var(--vlm-line); }
.vlmops-group-head .vlmops-drag-handle { flex: none; }
.vlmops-group-title-fixed { flex: 1; min-width: 0; padding: 4px 6px; color: #1f2937; font-size: 13px; font-weight: 700; }
.vlmops-group-title-input { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid transparent; background: transparent; color: #1f2937; font-size: 13px; font-weight: 700; }
.vlmops-group-title-input:hover { border-color: #e5e7eb; background: #fff; }
.vlmops-group-title-input:focus { border-color: var(--vlm-accent); background: #fff; outline: none; }
.vlmops-group-badge { flex: none; padding: 2px 8px; background: #eef2f7; color: #64748b; font-size: 10px; font-weight: 600; }
.vlmops-group-del { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.vlmops-group-del:hover { background: #fff1f2; color: #e11d48; }
.vlmops-group-add-field { width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-top: 1px solid var(--vlm-line); background: var(--vlm-surface); color: var(--vlm-accent); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.vlmops-group-add-field:hover { background: #eff4ff; }
.vlmops-group-section .vlmops-field-empty { padding: 20px 0; }
.vlmops-no-types { min-height: 0; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #64748b; font-size: 12px; }
.vlmops-field-branch { min-width: 0; }
.vlmops-field-row { min-height: 42px; display: grid; grid-template-columns: minmax(0, 36%) 92px minmax(0, 1fr) 60px; align-items: stretch; border-bottom: 1px solid #e8ebf0; background: var(--vlm-surface); transition: background-color .12s ease, box-shadow .12s ease, opacity .12s ease; }
.vlmops-field-name { min-width: 0; display: flex; align-items: center; gap: 2px; border-right: 1px solid #e8ebf0; background: #f8fafc; padding-right: 8px; }
.vlmops-field-name > input { width: 100%; min-width: 0; height: 40px; border: 0; background: transparent; padding: 0 6px; color: #1f2937; font-size: 12px; font-weight: 600; letter-spacing: .01em; outline: 0; }
.vlmops-field-name > input:focus { background: var(--vlm-surface); box-shadow: inset 0 -2px 0 var(--vlm-accent); }
.vlmops-drag-handle { width: 22px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border: 0; background: transparent; color: #a8b0bc; cursor: grab; }
.vlmops-drag-handle:hover { color: var(--vlm-muted); }
.vlmops-drag-handle:active { cursor: grabbing; }
.vlmops-field-toggle { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.vlmops-field-toggle:hover { background: var(--vlm-accent-weak); color: var(--vlm-accent); }
.vlmops-field-type-cell { min-width: 0; display: flex; align-items: stretch; border-right: 1px solid #e8ebf0; }
.vlmops-field-type-cell > .vlmops-field-type { width: 100%; min-width: 0; }
.vlmops-field-description { min-width: 0; display: flex; align-items: center; }
.vlmops-field-description > input { width: 100%; min-width: 0; height: 40px; border: 0; background: transparent; padding: 0 12px; color: #334155; font-size: 12px; outline: 0; }
.vlmops-field-description > input:focus, .vlmops-field-description > input:focus-visible { background: #f8fafc; box-shadow: inset 0 -2px 0 var(--vlm-accent); outline: 0; }
.vlmops-field-group-label, .vlmops-field-group-description { display: flex; align-items: center; padding: 0 10px; color: #64748b; font-size: 11px; }
.vlmops-field-type .vlmops-select-trigger { width: 100%; height: 100%; min-height: 40px; border: 0; background: transparent; padding: 0 10px; font-size: 11px; }
.vlmops-field-type .vlmops-select-menu { min-width: 140px; }
.vlmops-field-actions { display: flex; align-items: center; justify-content: center; gap: 2px; }
.vlmops-field-actions > button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.vlmops-field-actions > button:hover { background: var(--vlm-accent-weak); color: var(--vlm-accent); }
.vlmops-field-actions > button:last-child:hover { background: #fff1f2; color: #b91c1c; }
.vlmops-field-row.is-drag-over, .vlmops-field-branch.is-drag-over > .vlmops-field-row { background: #f5f8ff; box-shadow: inset 0 2px 0 var(--vlm-accent); }
.vlmops-field-row.is-drag-over .vlmops-field-name, .vlmops-field-branch.is-drag-over > .vlmops-field-row .vlmops-field-name { background: #eef4ff; }
.vlmops-slot-grid { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); gap: 12px; align-items: stretch; }
.vlmops-slot { --vlm-side: var(--vlm-accent); border: 2px solid var(--vlm-side); background: #fff; padding: 16px; }
.vlmops-slot.is-b { --vlm-side: #f59e0b; }
.vlmops-side-title { color: var(--vlm-side); }
.vlmops-slot-label { display: inline-grid; width: 24px; height: 24px; place-items: center; background: var(--vlm-side, var(--vlm-accent)); color: #fff; font-size: 11px; font-weight: 800; }
.vlmops-result-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.vlmops-score { --vlm-side: var(--vlm-accent); border: 1px solid #e1e5eb; background: #fff; padding: 20px; }
.vlmops-score.is-b { --vlm-side: #f59e0b; }
.vlmops-score.is-winner { box-shadow: inset 0 0 0 2px var(--vlm-side); }
.vlmops-score-value { color: var(--vlm-side); }
.vlmops-winner { --vlm-side: var(--vlm-accent); min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #e1e5eb; background: #fff; padding: 12px 18px; color: #334155; font-size: 12px; }
.vlmops-winner.is-b { --vlm-side: #f59e0b; }
.vlmops-winner strong { color: var(--vlm-side); font-size: 13px; }
.vlmops-winner.is-error { color: #b91c1c; }
.vlmops-winner.is-error strong { color: #b91c1c; }
.vlmops-side-diagnostic, .vlmops-unmatched-diagnostic { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 9px; font-size: 11px; }
.vlmops-side-diagnostic.is-error { background: #fff1f2; color: #b91c1c; }
.vlmops-side-diagnostic.is-warning, .vlmops-unmatched-diagnostic { background: #fffbeb; color: #a16207; }
.vlmops-unmatched-diagnostic { margin-top: 0; border: 1px solid #fde68a; }
.vlmops-run-error { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #fecaca; background: #fff1f2; padding: 24px; color: #b91c1c; }
.vlmops-run-error p { font-size: 13px; font-weight: 700; }
.vlmops-run-error span { display: block; margin-top: 3px; font-size: 11px; }
.vlmops-table-side { display: inline-grid; width: 20px; height: 20px; place-items: center; background: var(--vlm-accent); color: #fff; font-size: 10px; }
.vlmops-table-side.is-b { background: #f59e0b; }
.vlmops-table-wrap { max-height: 420px; overflow: auto; }
.vlmops-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.vlmops-table th { position: sticky; top: 0; z-index: 1; background: #f7f8fa; color: #64748b; font-weight: 650; }
.vlmops-table th, .vlmops-table td { border-top: 1px solid #e5e7eb; padding: 9px 14px; vertical-align: top; }
.vlmops-table tr:first-child th { border-top: 0; }
.vlmops-table tbody tr.is-different { background: #fff7ed; }
.vlmops-cell-error { background: #fff1f2; color: #b91c1c; }
.vlmops-correct-marker, .vlmops-error-marker { display: inline-flex; margin-left: 5px; vertical-align: middle; }
.vlmops-correct-marker { color: #059669; }
.vlmops-error-marker { color: #dc2626; }
.vlmops-spinner { width: 32px; height: 32px; border: 2px solid #d8dde5; border-top-color: var(--vlm-accent); animation: vlm-spin .7s linear infinite; }
@keyframes vlm-spin { to { transform: rotate(360deg); } }
.vlmops-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 24px; }
.vlmops-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.46); }
.vlmops-modal-card { position: relative; width: min(92vw, 540px); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 0; background: #fff; box-shadow: 0 22px 55px rgba(15,23,42,.28); }
.vlmops-modal-card.is-form-md { width: min(92vw, 448px); }
.vlmops-modal-card.is-form-sm { width: min(92vw, 384px); }
.vlmops-modal-card.is-wide { width: min(94vw, 980px); }
.vlmops-modal-card.is-history { width: min(94vw, 1152px); height: 82vh; }
.vlmops-modal-card.is-confirm, .vlmops-modal-card.is-confirm-danger { width: min(92vw, 460px); border-color: #d7dee8; box-shadow: 0 24px 72px rgba(15,23,42,.24); }
.vlmops-modal-head { flex: 0 0 auto; border-bottom: 1px solid #e5e7eb; padding: 16px 18px; }
.vlmops-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vlmops-modal-heading-main { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.vlmops-modal-title { display: inline-flex; align-items: center; gap: 8px; color: #1f2937; font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; }
.vlmops-modal-key-message { margin-top: 10px; color: #1f2937; font-size: 14px; font-weight: 700; line-height: 1.55; }
.vlmops-modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px; color: #475569; font-size: 14px; font-weight: 400; line-height: 1.6; }
.vlmops-modal-body > p { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.vlmops-modal-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e5e7eb; background: #fff; padding: 12px 18px; }
.vlmops-modal-foot .vlmops-btn:not(.vlmops-btn-primary):not(.vlmops-btn-danger):not(.vlmops-btn-quiet) { border-color: #e2e8f0; background: #eef2f7; color: #475569; }
.vlmops-modal-foot .vlmops-btn:not(.vlmops-btn-primary):not(.vlmops-btn-danger):not(.vlmops-btn-quiet):hover { border-color: #cbd5e1; background: #e2e8f0; }
.vlmops-confirm-content { min-height: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 30px 30px 0; }
.vlmops-confirm-copy { min-width: 0; }
.vlmops-modal-card.is-confirm .vlmops-modal-title,
.vlmops-modal-card.is-confirm-danger .vlmops-modal-title { display: block; overflow-wrap: anywhere; color: #172033; font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; text-wrap: balance; }
.vlmops-modal-card.is-confirm .vlmops-modal-key-message,
.vlmops-modal-card.is-confirm-danger .vlmops-modal-key-message { margin-top: 8px; overflow-wrap: anywhere; color: #27364d; font-size: 14px; font-weight: 700; line-height: 1.55; }
.vlmops-confirm-icon { width: 46px; height: 46px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 999px; background: var(--vlm-accent-weak); color: var(--vlm-accent); }
.vlmops-confirm-icon > svg { width: 20px; height: 20px; }
.vlmops-modal-card.is-confirm-danger .vlmops-confirm-icon { background: #fff1f2; color: #e11d48; }
.vlmops-confirm-detail { margin-top: 10px; overflow-wrap: anywhere; color: #64748b; font-size: 13px; font-weight: 400; line-height: 1.65; }
.vlmops-confirm-detail > p { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.vlmops-modal-card.is-confirm .vlmops-modal-foot,
.vlmops-modal-card.is-confirm-danger .vlmops-modal-foot { justify-content: center; margin-top: 26px; gap: 10px; border-top: 0; background: #fff; padding: 0 30px 30px; }
.vlmops-modal-card.is-confirm .vlmops-modal-foot .vlmops-btn,
.vlmops-modal-card.is-confirm-danger .vlmops-modal-foot .vlmops-btn { min-width: 80px; min-height: 40px; border-radius: 0 !important; padding: 10px 18px; font-size: 13px; font-weight: 700; }
.vlmops-modal-card.is-confirm .vlmops-modal-foot .vlmops-btn:not(.vlmops-btn-primary),
.vlmops-modal-card.is-confirm-danger .vlmops-modal-foot .vlmops-btn:not(.vlmops-btn-danger) { border-color: #cbd5e1; background: #fff; color: #475569; }
.vlmops-modal-card.is-confirm .vlmops-modal-foot .vlmops-btn:not(.vlmops-btn-primary):hover,
.vlmops-modal-card.is-confirm-danger .vlmops-modal-foot .vlmops-btn:not(.vlmops-btn-danger):hover { border-color: #94a3b8; background: #fff; color: #1e293b; }
.vlmops-modal-card.is-confirm-danger .vlmops-modal-foot .vlmops-btn-danger { border-color: #e11d48; background: #e11d48; color: #fff; }
.vlmops-modal-card.is-confirm-danger .vlmops-modal-foot .vlmops-btn-danger:hover { border-color: #be123c; background: #be123c; color: #fff; }
.vlmops-modal-card.is-confirm .vlmops-modal-foot .vlmops-btn:focus-visible,
.vlmops-modal-card.is-confirm-danger .vlmops-modal-foot .vlmops-btn:focus-visible { outline: 2px solid #1f6feb; outline-offset: 2px; }
.vlmops-modal-card.is-history .vlmops-modal-head { padding: 14px 20px; }
.vlmops-modal-card.is-history .vlmops-modal-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.vlmops-modal-card.is-history .vlmops-modal-head h3 > svg { color: var(--vlm-accent); }
.vlmops-modal-card.is-history .vlmops-modal-body { flex: 1; overflow: hidden; padding: 0; }
.vlmops-history-layout { height: 100%; min-height: 0; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.vlmops-history-sidebar { min-height: 0; overflow-y: auto; border-right: 1px solid #e5e7eb; padding: 12px; }
.vlmops-history-version-wrap { position: relative; width: 100%; border: 1px solid var(--vlm-line); background: #fff; }
.vlmops-history-version-wrap + .vlmops-history-version-wrap { margin-top: 8px; }
.vlmops-history-version-wrap.is-active { border-color: var(--vlm-accent); background: rgba(234,241,255,.5); }
.vlmops-history-version-wrap:not(.is-active):not(.is-current):hover { border-color: #a8c4ff; }
.vlmops-history-version-wrap.is-current .vlmops-history-version { cursor: default; }
.vlmops-history-same-toggle { display: block; width: 100%; border: 0; border-top: 1px dashed #e5e7eb; background: transparent; padding: 8px 16px; color: #64748b; font-size: 11px; text-align: left; cursor: pointer; }
.vlmops-history-same-toggle:hover { color: var(--vlm-accent); }
button.vlmops-version-chip { cursor: pointer; font-family: inherit; }
button.vlmops-version-chip:hover { border-color: var(--vlm-accent); }
.vlmops-history-version { width: 100%; display: block; border: 0; background: transparent; padding: 10px; text-align: left; cursor: pointer; }
.vlmops-history-rollback { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.vlmops-history-rollback:hover { background: #fff; color: var(--vlm-accent); }
.vlmops-history-version-title { display: flex; align-items: center; gap: 6px; color: #1f2937; font-size: 12px; }
.vlmops-history-version-title > strong { display: inline-flex; align-items: center; background: var(--vlm-accent-weak); padding: 2px 8px; color: var(--vlm-accent-deep); font-size: 11px; font-weight: 500; white-space: nowrap; }
.vlmops-history-version-title > span { color: var(--vlm-accent-deep); font-size: 10px; font-weight: 700; }
.vlmops-history-version-note { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-history-version-note { margin-top: 6px; color: #64748b; font-size: 11px; }
.vlmops-history-version-meta { display: block; margin-top: 6px; color: #94a3b8; font-size: 10.5px; }
.vlmops-history-version-meta + .vlmops-history-version-note { margin-top: 2px; }
.vlmops-history-comparison { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.vlmops-history-comparison-empty { min-height: 0; flex: 1; padding: 40px 16px; color: rgba(100,116,139,.7); font-size: 12px; text-align: center; }
.vlmops-history-summary { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #e5e7eb; padding: 10px 16px; }
.vlmops-history-heading { display: inline-flex; align-items: center; gap: 8px; color: #1f2937; font-size: 14px; font-weight: 650; }
.vlmops-history-heading > svg { color: var(--vlm-accent); }
.vlmops-history-description { color: #64748b; font-size: 11px; }
.vlmops-history-legend { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; color: #64748b; font-size: 10px; }
.vlmops-history-summary .vlmops-history-legend { margin-left: auto; }
.vlmops-history-legend span { display: inline-flex; align-items: center; gap: 4px; }
.vlmops-history-legend b { font-size: 13px; }
.vlmops-history-legend .is-added { color: #059669; }
.vlmops-history-legend .is-removed { color: #ef4444; }
.vlmops-history-legend .is-changed { color: #f59e0b; }
.vlmops-history-groups { min-height: 0; flex: 1; overflow-y: auto; }
.vlmops-history-group { min-width: 0; }
.vlmops-history-type-row { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #e5e7eb; background: #f5f5f5; padding: 8px 16px; color: #1f2937; font-size: 12px; font-weight: 700; }
.vlmops-history-type-row.is-added { background: #ecfdf5; color: #047857; }
.vlmops-history-type-row.is-removed { background: #fef2f2; color: #b91c1c; }
.vlmops-history-type-row.is-removed > strong { text-decoration: line-through; }
.vlmops-history-type-label { color: rgba(100,116,139,.7); font-size: 10px; font-weight: 650; text-transform: uppercase; }
.vlmops-history-type-row > small { margin-left: auto; color: #64748b; font-size: 10px; font-weight: 400; }
.vlmops-history-empty-row { border-bottom: 1px solid rgba(229,231,235,.5); padding: 8px 16px; color: rgba(100,116,139,.5); font-size: 11px; }
.vlmops-history-status { display: inline-flex; align-items: center; padding: 2px 6px; font-size: 10px; font-style: normal; font-weight: 650; }
.vlmops-history-status.is-added { background: #ecfdf5; color: #047857; }
.vlmops-history-status.is-removed { background: #fee2e2; color: #b91c1c; }
.vlmops-history-marker { display: inline-flex; width: 12px; flex: 0 0 12px; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.vlmops-history-marker.is-added { color: #059669; }
.vlmops-history-marker.is-removed { color: #ef4444; }
.vlmops-history-marker.is-changed { color: #f59e0b; }
.vlmops-history-marker.is-same { color: rgba(100,116,139,.3); }
.vlmops-history-field-row { min-width: 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(229,231,235,.5); padding: 6px 16px; font-size: 13px; }
.vlmops-history-field-row.is-added { background: rgba(236,253,245,.6); }
.vlmops-history-field-row.is-removed { background: rgba(254,242,242,.6); }
.vlmops-history-field { max-width: 40%; flex: 0 1 auto; overflow: hidden; color: #1f2937; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-history-field.is-added { color: #047857; }
.vlmops-history-field.is-removed { color: #b91c1c; text-decoration: line-through; }
.vlmops-history-field-value, .vlmops-history-field-diff { min-width: 0; flex: 1; overflow: hidden; color: rgba(100,116,139,.7); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-history-field-diff .is-before { color: #f87171; text-decoration: line-through; }
.vlmops-history-field-diff .is-after { color: #059669; }
.vlmops-history-diff-separator { margin: 0 4px; color: rgba(100,116,139,.5); }

@media (max-width: 1180px) {
  .vlmops-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .vlmops-toolbar, .vlmops-card-grid, .vlmops-slot-grid, .vlmops-result-summary { grid-template-columns: 1fr; }
  .vlmops-list-toolbar { align-items: stretch; }
  .vlmops-list-toolbar > .vlmops-search { width: min(100%, 320px); }
  .vlmops-editor-grid { overflow: auto; display: block; }
  .vlmops-type-rail { width: 100%; height: 260px; min-height: 260px; border-right: 0; border-bottom: 1px solid #e5e7eb; }
  .vlmops-editor-workspace { min-height: 880px; display: block; }
  .vlmops-preview, .vlmops-fields { width: 100% !important; min-width: 0; min-height: 440px; }
  .vlmops-preview { height: 55vh; border-bottom: 1px solid #e5e7eb; }
  .vlmops-split-handle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vlmops-spinner {
    animation: none;
    border-color: #d8dde5;
    border-top-color: var(--vlm-accent);
  }
  .vlmops-root *,
  .vlmops-root *::before,
  .vlmops-root *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media (max-width: 720px) {
  .vlmops-content { padding: 18px 18px 32px; }
  .vlmops-page-head { margin-bottom: 18px; }
  .vlmops-page-head h1 { font-size: 24px; }
  .vlmops-list-toolbar, .vlmops-list-toolbar > .vlmops-search { width: 100%; }
  .vlmops-list-toolbar > :last-child { width: 100%; margin-left: 0 !important; flex-wrap: wrap; }
  .vlmops-card-grid { grid-template-columns: 1fr; }
  .vlmops-detail-bar { min-height: 48px; flex-wrap: wrap; padding: 8px 12px; }
  .vlmops-detail-bar > strong + span:not(.vlmops-version-chip) { display: none; }
  .vlmops-save-bar { padding: 10px 12px; }
  .vlmops-field-list { padding: 12px; }
  .vlmops-fields-head { align-items: flex-start; flex-direction: column; }
  .vlmops-field-head-actions { width: 100%; flex-wrap: wrap; }
  .vlmops-field-table-head { display: none; }
  .vlmops-field-row { grid-template-columns: 96px minmax(0, 1fr) 58px; }
  .vlmops-field-name { grid-column: 1 / 4; border-right: 0; border-bottom: 1px solid #e8ebf0; }
  .vlmops-field-type-cell { grid-column: 1; grid-row: 2; min-height: 42px; }
  .vlmops-field-description { grid-column: 2; grid-row: 2; min-height: 42px; }
  .vlmops-field-actions { grid-column: 3; grid-row: 2; }
  .vlmops-field-type { width: 100%; }
}

/* ── 각짐 정합(2026-08-03) ──
   디자인 토큰이 각짐(--k-radius-card:0px, --k-radius-pill:0px)이라, 앞서 라운드로 얹었던
   표면을 다시 각지게 되돌린다. 템플릿 관리 전용 클래스라 평가와 워크플로우에는 영향 없음. */
.vlmops-card { border-radius: 0; }
.vlmops-card-icon { border-radius: 0; }
.vlmops-btn { border-radius: 0; }
.vlmops-search, .vlmops-select-trigger, .vlmops-input, .vlmops-textarea { border-radius: 0; }
.vlmops-context-menu { border-radius: 0; overflow: hidden; }
.vlmops-context-menu button { border-radius: 0; }
.vlmops-version-chip { border-radius: 0; }
.vlmops-type-item { border-radius: 0; }

/* 하단 [추가] 메뉴 — DEEP OCR 키수정과 동일하게 그룹·표·이미지를 한 버튼에 모은다(2026-08-11) */
.vlmops-add-wrap { position: relative; }
.vlmops-add-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 40; min-width: 176px; border: 1px solid var(--vlm-line); background: var(--vlm-surface); padding: 4px 0; box-shadow: 0 14px 34px rgba(15,23,42,.16); }
.vlmops-add-menu button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 8px 12px; color: #334155; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.vlmops-add-menu button:hover { background: var(--vlm-accent-weak); color: var(--vlm-accent-deep); }
.vlmops-add-menu button svg { flex: none; color: #64748b; }
.vlmops-add-menu button:hover svg { color: var(--vlm-accent-deep); }

/* 표 블록 — 템플릿은 스키마라 행 없이 열 정의만 갖는다. DEEP OCR 키 수정과 같은 가로 표 모양(2026-08-11) */
.vlmops-block-icon { flex: none; display: inline-flex; color: #64748b; }
.vlmops-table-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent; }
.vlmops-table-scroll:hover { scrollbar-color: rgba(100,116,139,.6) transparent; }
.vlmops-table-scroll::-webkit-scrollbar { height: 6px; }
.vlmops-table-scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 3px; }
.vlmops-table-scroll:hover::-webkit-scrollbar-thumb { background: rgba(100,116,139,.6); }
.vlmops-table-grid { min-width: 100%; width: max-content; border-collapse: collapse; }
.vlmops-table-headrow { background: #f8fafc; }
.vlmops-table-rowlabel { width: 84px; min-width: 84px; padding: 8px 10px; border-right: 1px solid var(--vlm-line); border-bottom: 1px solid var(--vlm-line); background: #fcfdfe; color: #64748b; font-size: 10.5px; font-weight: 650; text-align: left; white-space: nowrap; }
.vlmops-table-cell { min-width: 190px; padding: 0; border-right: 1px solid var(--vlm-line); border-bottom: 1px solid var(--vlm-line); }
.vlmops-table-colhead { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.vlmops-table-colhead input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 8px 10px; color: #334155; font-size: 12px; font-weight: 650; outline: none; }
.vlmops-table-colhead input:focus { background: #fff; box-shadow: inset 0 -2px 0 0 var(--vlm-accent); }
.vlmops-table-colhead button { display: inline-flex; align-items: center; border: 0; background: transparent; padding: 2px; color: #94a3b8; cursor: pointer; }
.vlmops-table-colhead button:hover { color: #dc2626; }
.vlmops-table-cell .vlmops-field-type .vlmops-select-trigger { min-height: 36px; border: 0; }
.vlmops-table-hint { width: 100%; min-width: 190px; border: 0; background: transparent; padding: 8px 10px; color: #334155; font-size: 12px; outline: none; }
.vlmops-table-hint:focus { background: #fff; box-shadow: inset 0 -2px 0 0 var(--vlm-accent); }
/* 열 추가 — 표 오른쪽 끝의 얇은 고스트 열. 글씨 없이 + 아이콘만 두고 칸 전체를 클릭 영역으로 쓴다 */
.vlmops-table-addcell { width: 48px; min-width: 48px; padding: 0; border-left: 1px dashed var(--vlm-border); background: #fff; vertical-align: middle; }
.vlmops-table-addcell button { width: 100%; min-height: 108px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; transition: background .15s ease; }
.vlmops-table-addcell button:hover { background: #eff4ff; }
.vlmops-table-addicon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--vlm-border); background: #fff; color: #94a3b8; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.vlmops-table-addcell button:hover .vlmops-table-addicon { border-color: var(--vlm-accent); background: var(--vlm-accent); color: #fff; }

/* ── 문서 업로드 후 추출 중 ──
   덩어리를 줄였다. 3초 동안 보여주는 화면에 아이콘, 제목, 파일명, 막대, 단계 3줄, 골격, 안내까지 일곱 덩어리는 과하다.
   단계는 목록 대신 한 줄로 바꾸고, 결과가 채워질 자리는 골격이 이미 말해 주므로 안내 문구를 뺐다(2026-08-13 Benson).
   색은 하드코딩 대신 모듈 토큰을 쓰고, 원형 점은 각진 디자인 시스템에 맞춰 없앴다. */
.vlmops-extracting { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.vlmops-extracting-top { display: flex; align-items: baseline; gap: 8px; }
.vlmops-extracting-title { font-size: 13px; font-weight: 700; color: var(--vlm-text, #1f2937); }
.vlmops-extracting-file { min-width: 0; font-size: 11px; color: var(--vlm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-extracting-bar { height: 3px; background: var(--vlm-line); overflow: hidden; }
.vlmops-extracting-bar > span { display: block; height: 100%; width: 0; background: var(--vlm-accent); transition: width .12s linear; }
/* 현재 단계 한 줄. 지난 단계와 남은 단계를 나열하지 않는다 — 3초 안에 다 지나가서 읽히지 않는다 */
.vlmops-extracting-step { font-size: 11px; color: var(--vlm-muted); }
.vlmops-extracting-step > b { color: var(--vlm-accent); font-weight: 600; }
/* 결과가 채워질 자리를 미리 보여준다. 실제 필드 행과 같은 높이로 둔다 */
.vlmops-extracting-skeleton { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.vlmops-extracting-skeleton > span { height: 34px; border: 1px solid var(--vlm-line);
  background: linear-gradient(90deg, #f6f8fa 25%, #eef1f5 37%, #f6f8fa 63%); background-size: 400% 100%;
  animation: vlm-ext-shimmer 1.3s ease-in-out infinite; }
@keyframes vlm-ext-shimmer { 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .vlmops-extracting-skeleton > span { animation: none; }
}
.vlmops-field-stream { min-height: 0; flex: 1; display: flex; flex-direction: column; background: #fff; }
.vlmops-field-stream-head { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--vlm-line); font-size: 11px; color: #475569; }
.vlmops-field-stream-head strong { color: #1f2937; font-weight: 700; }
.vlmops-field-stream-head .spinner { width: 12px; height: 12px; }
.vlmops-field-stream-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #059669; font-weight: 600; white-space: nowrap; }
.vlmops-field-stream-live i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: vlmops-run-pulse 1s ease-in-out infinite; }
.vlmops-field-stream-body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.vlmops-field-stream-left, .vlmops-field-stream-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.vlmops-field-stream-left { border-right: 1px solid var(--vlm-line); }
.vlmops-field-stream-left > div { min-height: 0; flex: 1; overflow: auto; padding: 8px; }
.vlmops-stream-row { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin-bottom: 5px; padding: 7px 8px; border: 1px solid #e1e5eb; background: #f5f6f8; animation: fadeUp .2s ease-out both; }
.vlmops-stream-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #1f2937; }
.vlmops-stream-row small { flex: 0 0 auto; font-size: 10px; color: #64748b; }
.vlmops-field-stream-right { background: #0f172a; }
.vlmops-field-stream-right > div { min-height: 0; flex: 1; overflow: auto; padding: 10px; }
.vlmops-field-stream-left > div, .vlmops-field-stream-right > div { flex: 0 1 170px; max-height: 170px; overscroll-behavior: contain; }
.vlmops-field-stream-right pre { margin: 0; color: #6ee7b7; font: 10.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 780px) { .vlmops-field-stream-body { grid-template-columns: 1fr; grid-template-rows: minmax(130px,1fr) minmax(130px,1fr); } .vlmops-field-stream-left { border-right: 0; border-bottom: 1px solid var(--vlm-line); } }

/* 목록 페이지는 남은 높이를 채운다. 빈 상태 안내가 화면 위쪽에 치우쳐 보이면 안 되기 때문이다.
   안내 상자가 남은 자리를 차지하고, 그 안에서 문구가 가운데로 온다(2026-08-12 Benson). */
.vlmops-scroll > .vlmops-content.is-fill { min-height: 100%; display: flex; flex-direction: column; }
.vlmops-content.is-fill > [data-template-results] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vlmops-content.is-fill > [data-template-results] > .vlmops-empty { flex: 1; }

/* 입력 팝업의 인라인 안내 — 무엇이 잘못됐는지 그 자리에서 알려준다. 빈 문자열이면 자리만 잡고 보이지 않는다(2026-08-13) */
/* `.vlmops-modal-body > p`(0,2,1)가 color와 font-size를 inherit으로 덮어써서, 같은 자리의 안내가 본문 색과 크기로 나온다.
   그 선택자보다 높은 명시도로 적어야 적용된다(2026-08-13). */
.vlmops-field-error,
.vlmops-modal-body > .vlmops-field-error { min-height: 15px; margin-top: 6px; color: rgb(var(--k-error)); font-size: 10.5px; font-weight: 500; line-height: 1.4; }

/* ── 오른쪽 패널 탭: 문서유형 필드(기본) | 돌려보기 (2026-09-29) ──
   이 모듈의 버튼 글씨는 font 리셋(0,1,1)에 밀리므로 .vlmops-fields 접두사로 명시도를 올린다. */
.vlmops-fields .vlmops-panel-tabs { flex: 0 0 auto; display: flex; gap: 4px; border-bottom: 1px solid #e5e7eb; padding: 0 16px; }
.vlmops-fields .vlmops-panel-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 11px 10px 9px; color: #64748b; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; }
.vlmops-fields .vlmops-panel-tab:hover { color: #1f2937; }
.vlmops-fields .vlmops-panel-tab.is-active { border-bottom-color: #2970ff; color: #2970ff; }
.vlmops-fields .vlmops-panel-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: #2970ff; animation: vlmops-run-pulse 1s ease-in-out infinite; }
@keyframes vlmops-run-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .vlmops-fields .vlmops-panel-tab-dot { animation: none; } }

/* 돌려보기 탭 본문 */
.vlmops-run-panel { min-height: 0; flex: 1; overflow: auto; padding: 16px; }
.vlmops-run-panel.is-empty { display: flex; align-items: center; justify-content: center; }
.vlmops-run-empty-state { display: flex; max-width: 360px; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.vlmops-run-empty-icon { display: grid; width: 40px; height: 40px; place-items: center; background: #eaf1ff; color: #2970ff; }
.vlmops-run-empty-state strong { color: #1f2937; font-size: 13px; font-weight: 600; }
.vlmops-run-empty-state p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.vlmops-run-cancel { display: flex; justify-content: flex-end; margin-top: 12px; }
/* 돌려보기 실시간 수신 — DEEP OCR 추출 화면과 같은 문법. 필드 추출 스트림 틀을 쓰되 패널 높이를 채운다. */
.vlmops-run-panel.is-streaming { display: flex; flex-direction: column; overflow: hidden; }
.vlmops-run-stream-basis { flex: 0 0 auto; margin: 0 0 8px; font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vlmops-run-stream-basis strong { color: #1f2937; font-weight: 600; }
.vlmops-field-stream.is-run { min-height: 0; flex: 1; border: 1px solid var(--vlm-line); }
.vlmops-field-stream.is-run .vlmops-field-stream-left > div,
.vlmops-field-stream.is-run .vlmops-field-stream-right > div { flex: 1 1 auto; max-height: none; }
/* 한 줄 = [항목 이름][값][저신뢰 경고]. DEEP OCR의 실시간 KV 줄과 같은 배치 */
.vlmops-run-stream-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; padding: 6px 8px; border: 1px solid #e1e5eb; background: #f5f6f8; animation: fadeUp .2s ease-out both; }
.vlmops-run-stream-row > span { flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: #64748b; }
.vlmops-run-stream-row > b { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: #1f2937; overflow-wrap: anywhere; }
.vlmops-run-stream-row.is-masked > b { letter-spacing: .04em; color: #64748b; }
.vlmops-run-stream-warn { flex: 0 0 auto; display: inline-grid; place-items: center; color: #ef4444; font-style: normal; }
.vlmops-run-stream-warn svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .vlmops-run-stream-row { animation: none; } }

/* ── 돌려보기·문서 추출 결과 ── */
/* 돌려보기 결과 — 문서유형 필드 탭의 그룹과 표를 읽기 전용으로 그대로 따른다(2026-09-29 Benson) */
.vlmops-run-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border: 1px solid #e5e7eb; background: #fff; padding: 9px 12px; font-size: 12px; color: #475569; }
.vlmops-run-summary-file { flex: 1 1 160px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #1f2937; font-weight: 600; }
.vlmops-run-summary-stat b { color: #1f2937; font-weight: 700; font-variant-numeric: tabular-nums; }
.vlmops-run-summary-stat.is-missing b { color: #b45309; }
.vlmops-run-export { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #e5e7eb; background: #fff; color: #64748b; cursor: pointer; }
.vlmops-fields-summary { margin-bottom: 12px; }
.vlmops-fields-summary-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.vlmops-fields-summary .vlmops-inline-icon { width: 28px; height: 28px; border: 1px solid #e5e7eb; background: #fff; color: #64748b; }
.vlmops-fields-summary .vlmops-inline-icon:hover { border-color: var(--vlm-accent); color: var(--vlm-accent); }
.vlmops-run-export:hover { border-color: var(--vlm-accent); color: var(--vlm-accent); }
.vlmops-run-info { margin: 10px 0 0; border-left: 2px solid #2970ff; background: #f5f8ff; padding: 8px 10px; color: #1e40af; font-size: 11.5px; line-height: 1.6; }
.vlmops-run-groups { margin-top: 12px; }
/* 컨피던스는 따로 열을 두지 않고 추출값 칸 오른쪽 끝에 붙인다(2026-09-29 Benson). 표 블록 칸과 같은 배치다.
   타입 열은 필드 탭에 있으므로 결과에서는 뺀다(2026-09-29 검토). */
.vlmops-run-head, .vlmops-run-row { grid-template-columns: minmax(160px, 34%) minmax(200px, 1fr); }
.vlmops-run-head > span:last-child { grid-column: auto; }
.vlmops-run-row { min-height: 38px; }
.vlmops-run-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 6px; color: #1f2937; font-size: 12px; font-weight: 600; }
.vlmops-run-row .vlmops-field-description { min-width: 0; }
.vlmops-run-row .vlmops-run-cell { width: 100%; padding: 0 12px; }
.vlmops-run-value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #334155; font-size: 12px; }
.vlmops-run-value.is-masked { color: #94a3b8; letter-spacing: .08em; }
.vlmops-run-row.is-subgroup { background: #fbfcfe; }
.vlmops-run-row.is-subgroup .vlmops-run-name { color: #475569; font-weight: 700; }
.vlmops-run-colname { display: block; padding: 8px 10px; color: #334155; font-size: 12px; font-weight: 650; }
.vlmops-run-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; font-size: 12px; }
.vlmops-run-cell > .vlmops-run-conf, .vlmops-run-cell > .vlmops-run-missing { flex: none; }

.vlmops-run-note { margin: 10px 0 0; border-left: 2px solid #f59e0b; background: #fffbeb; padding: 8px 10px; color: #92400e; font-size: 11.5px; line-height: 1.6; }
.vlmops-run-conf { font-weight: 600; font-variant-numeric: tabular-nums; }
.vlmops-run-missing { display: inline-flex; background: #f1f2f4; padding: 1px 7px; color: #64748b; font-size: 11px; }
.vlmops-run-empty { color: #94a3b8; }

/* ── 문서 보기 툴바(공용) — DEEP OCR 뷰어 툴바와 같은 치수와 배치(2026-09-30 Benson) ──
   템플릿 관리 상세와 버전 비교 상세가 함께 쓴다. 모듈별 버튼 초기화에 밀리지 않게 .dvt-bar 접두사로 명시도를 올린다. */
.dvt-bar { width: 100%; min-height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden; border-bottom: 1px solid rgb(var(--k-line)); background: #fff; padding: 0 16px; }
.dvt-bar .dvt-balance { width: 32px; flex: 0 0 auto; }
.dvt-bar .dvt-group { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.dvt-bar .dvt-btn { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 6px !important; background: transparent; padding: 0; color: rgb(var(--k-text2)); cursor: pointer; }
.dvt-bar .dvt-btn:hover { background: rgb(var(--k-bg)); color: rgb(var(--k-text1)); }
.dvt-bar .dvt-btn:disabled { cursor: not-allowed; opacity: .3; }
.dvt-bar .dvt-btn:disabled:hover { background: transparent; color: rgb(var(--k-text2)); }
.dvt-bar .dvt-btn:focus-visible { outline: 2px solid #2970ff; outline-offset: 1px; }
.dvt-bar .dvt-zoom { width: 48px; text-align: center; color: rgb(var(--k-text2)); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dvt-bar .dvt-sep { width: 1px; height: 16px; margin: 0 4px; background: rgb(var(--k-border)); }
.dvt-bar .dvt-page { width: 36px; height: auto; border: 1px solid transparent; border-radius: 6px !important; background: rgb(var(--k-bg)); padding: 4px; color: rgb(var(--k-text1)); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; outline: none; }
.dvt-bar .dvt-page:focus { border-color: rgb(var(--k-border)); background: #fff; }
.dvt-bar .dvt-total { padding: 0 2px; color: rgb(var(--k-text2)); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 목록 카드 공통(2026-10-29 Benson): 제목 줄, 설명, 구성 한 줄, 날짜와 손볼 것. 아이콘 칸과 정상 건수는 두지 않는다.
   지식베이스, 템플릿 관리, 문서 대조, 워크플로우 카드가 함께 쓴다 */
.vlmops-card { min-height: 0; padding: 16px 18px; }
.vlmops-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vlmops-card-head > h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: #0f172a; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-card-desc { margin: 4px 0 0; overflow: hidden; color: #64748b; font-size: 12px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-card-meta { display: flex; min-width: 0; align-items: center; gap: 6px; margin-top: 10px; color: #64748b; font-size: 12px; }
.vlmops-card-meta > span:not(.vlmops-version-chip) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlmops-card-meta svg { flex: none; width: 13px; height: 13px; }
.vlmops-card-foot { display: flex; min-height: 22px; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; color: #94a3b8; font-size: 12px; font-variant-numeric: tabular-nums; }
.vlmops-card-foot > time { flex: none; margin: 0; padding: 0; }
.vlmops-attn { display: flex; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.vlmops-attn:empty { display: none; }
.vlmops-attn > span { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border: 1px solid transparent; font-size: 11px; font-weight: 600; white-space: nowrap; }
.vlmops-attn > .is-red { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.vlmops-attn > .is-amber { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.vlmops-attn > .is-violet { border-color: #ddd6fe; background: #f5f3ff; color: #6d28d9; }
.vlmops-attn > .is-brand { border-color: #c9d9ff; background: #eef3ff; color: #1d4ed8; }
.vlmops-attn > .is-muted { padding: 0; color: #94a3b8; font-weight: 400; }