/* ============================================================
   FlowCraft — ISMS-P Flow Diagram Tool
   Design System: Clean, Modern, Minimal
   ============================================================ */

/* ---------- Reset & Variables ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors — Company Palette */
  --bg: #F4F6F8;
  --avatar-primary-bg: var(--primary);
  --avatar-primary-color: #fff;
  --bg-panel: #FFFFFF;
  --bg-editor: #384048;
  --bg-hover: #ebeff1;
  --bg-secondary: #f0f3f5;
  --bg-canvas: #FFFFFF;
  --bg-modal: rgba(56, 64, 72, 0.55);

  --text-primary: #2D3439;
  --text-secondary: #597381;
  --text-tertiary: #6b8694;
  --text-editor: #ebeff1;

  --border: #d2dbe0;
  --border-light: #ebeff1;
  --primary: #376C82;
  --primary-hover: #2A5B6F;
  --primary-light: #E8EEF2;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --danger-light: #FEF2F2;
  --accent-optional: #b68a47;

  /* Node colors (light, clean tones) */
  --node-actor: #EBF4FF;
  --node-actor-border: #3B82F6;
  --node-actor-badge: #1E40AF;
  --node-system: #F0FDF4;
  --node-system-border: #10B981;
  --node-system-badge: #065F46;
  --node-storage: #FEF9C3;
  --node-storage-border: #EAB308;
  --node-storage-badge: #854D0E;
  --node-process: #F3E8FF;
  --node-process-border: #8B5CF6;
  --node-process-badge: #5B21B6;
  --node-processor: #FFF7ED;
  --node-processor-border: #F97316;
  --node-processor-badge: #9A3412;
  --node-destroy: #FEE2E2;
  --node-destroy-border: #EF4444;
  --node-destroy-badge: #991B1B;
  --node-external: #F1F5F9;
  --node-external-border: #64748B;
  --node-external-badge: #334155;
  --node-white: #FFFFFF;
  --node-white-border: #94A3B8;
  --node-white-badge: #475569;
  --node-white-text: #2D3439;
  /* 정보주체 — 인디고 (옵션 1) */
  --node-subject: #EEF2FF;
  --node-subject-border: #6366F1;
  --node-subject-badge: #3730A3;

  /* Memo */
  --memo-bg: #FFFDE7;
  --memo-border: #E6D85E;
  --memo-fold: #F0E68C;
  --memo-fold-shadow: #D4C84A;
  --memo-text: #5D4E37;
  --memo-connector: #B0A070;
  --memo-author-text: #8a7a3a;

  /* Sizing */
  --topbar-h: 52px;
  --props-w: 280px;
  --toolbar-h: 40px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;

  /* Fonts */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* Font sizes (5-level scale) */
  --font-xs: 10px;
  --font-sm: 11px;
  --font-base: 12px;
  --font-md: 13px;
  --font-lg: 15px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.16);

  /* Transitions */
  --transition: 150ms ease;
  --transition-slow: 250ms ease;

  /* PI item badges — PI.D / PI.F / PI.B / flow description shared sizing */
  --pi-item-badge-w: 64px;
  --pi-item-badge-h: 22px;
  --pi-item-badge-font: 9.5px;
  --pi-item-badge-pad-x: 3px;
  --pi-item-badge-radius: 3px;
  --pi-item-modal-w: 376px;
}

/* ---------- Dark Mode — Company Palette ---------- */
[data-theme="dark"] {
  --bg: #131719;
  --avatar-primary-bg: #2A4D5C;
  --avatar-primary-color: #C8E2EC;
  --bg-panel: #1A2025;
  --bg-editor: #131719;
  --bg-hover: #242C32;
  --bg-secondary: #212930;
  --bg-canvas: #171D21;
  --bg-modal: rgba(0, 0, 0, 0.75);

  --text-primary: #ebeff1;
  --text-secondary: #adbec7;
  --text-tertiary: #8a9faa;
  --text-editor: #ebeff1;

  --border: #2A3238;
  --border-light: #1E2529;
  --primary: #8DBFD1;
  --primary-hover: #A1CDDB;
  --primary-light: #2A3A44;
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --danger-light: #2D1515;

  /* Node colors (dark mode — muted fills, bright borders) */
  --node-actor: #1E3A5F;
  --node-actor-border: #60A5FA;
  --node-actor-badge: #93C5FD;
  --node-system: #064E3B;
  --node-system-border: #34D399;
  --node-system-badge: #6EE7B7;
  --node-storage: #713F12;
  --node-storage-border: #FACC15;
  --node-storage-badge: #FDE047;
  --node-process: #3B0764;
  --node-process-border: #A78BFA;
  --node-process-badge: #C4B5FD;
  --node-processor: #7C2D12;
  --node-processor-border: #FB923C;
  --node-processor-badge: #FDBA74;
  --node-destroy: #3D1010;
  --node-destroy-border: #F87171;
  --node-destroy-badge: #FCA5A5;
  --node-external: #1E293B;
  --node-external-border: #64748B;
  --node-external-badge: #94A3B8;
  --node-white: #2A3238;
  --node-white-border: #94A3B8;
  --node-white-badge: #CBD5E1;
  --node-white-text: #E2E8F0;
  /* 정보주체 — 인디고 (다크모드) */
  --node-subject: #1E1B4B;
  --node-subject-border: #818CF8;
  --node-subject-badge: #C7D2FE;

  /* Memo */
  --memo-bg: #3A3520;
  --memo-border: #8B7D3A;
  --memo-fold: #5C5228;
  --memo-fold-shadow: #4A4220;
  --memo-text: #E8DFC0;
  --memo-connector: #8B7D5A;
  --memo-author-text: #a09060;

  /* Shadows (deeper for dark mode) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.7);
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--font-md);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--font-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
}

.btn-primary {
  background: var(--primary);
  color: #FFF;
}
.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 2px 8px rgba(55, 108, 130, 0.3);
}
[data-theme="dark"] .btn-primary {
  background: #2A4D5C;
  color: #C8E2EC;
}
[data-theme="dark"] .btn-primary:hover {
  background: #336070;
  color: #DCF0F8;
  box-shadow: 0 2px 8px rgba(42, 77, 92, 0.4);
}

.btn-outline {
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  background: var(--bg-hover);
  border-color: var(--text-tertiary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-icon {
  background: transparent;
  color: var(--text-secondary);
  padding: 5px;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.btn-icon.active {
  background: var(--primary-light);
  color: var(--primary);
}

.btn-sm {
  padding: 4px 10px;
  font-size: var(--font-base);
}

/* ---------- Top Bar ---------- */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  gap: 12px;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-text {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.ver-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary);
  align-self: flex-end;
  margin-left: 1px;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
  line-height: 1;
}

.separator {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.project-name {
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 8px;
  font-size: var(--font-md);
  font-family: var(--font);
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  width: 180px;
  transition: all var(--transition);
}
.project-name:hover {
  border-color: var(--border);
}
.project-name:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-panel);
}

/* ── 프로젝트 셀렉터 (Variant D) ── */
.vd-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.vd-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px 3px 5px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: default;
  transition: border-color var(--transition), background var(--transition);
  min-width: 148px;
  height: 30px;
}
.vd-selector:hover {
  background: var(--bg-hover);
}
.vd-selector.online {
  border-color: rgba(42, 153, 96, 0.35);
}
.vd-selector.online:hover {
  border-color: rgba(42, 153, 96, 0.55);
}
.vd-proj-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(55, 108, 130, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  color: var(--primary, #376C82);
  letter-spacing: -0.02em;
  font-family: var(--font);
  user-select: none;
}
.vd-selector.online .vd-proj-icon {
  background: rgba(42, 153, 96, 0.14);
  color: #2a9960;
}
.vd-proj-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.vd-selector .project-name {
  width: 100%;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.vd-proj-status {
  font-size: 9.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  line-height: 1;
}
.vd-proj-status.online {
  color: #2a9960;
}
.vd-online-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3ab87a;
  margin-right: 3px;
  vertical-align: middle;
  animation: vd-pulse 2.5s infinite;
}
@keyframes vd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* 셀렉터 안 드롭다운은 오른쪽 정렬 */
.vd-selector .proj-dropdown {
  left: auto;
  right: 0;
}

.spf-file-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spf-file-indicator svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.spf-file-indicator #spfIndicatorName {
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-center {
  flex: 0 0 auto;
}

/* ---------- Sheet Breadcrumb (topbar center) ---------- */
.sheet-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 5px 14px;
  min-width: 120px;
  max-width: 360px;
}
.sheet-bc-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--primary);
  padding: 5px 9px 5px 7px;
  border-radius: 5px;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}
.sheet-bc-type svg {
  stroke: #fff;
  flex-shrink: 0;
}
.sheet-bc-sep {
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 300;
  flex-shrink: 0;
  user-select: none;
}
.sheet-bc-name {
  font-family: var(--font);
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.sheet-bc-name:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.sheet-bc-name-input {
  font-family: var(--font);
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-panel);
  border: 1.5px solid var(--primary);
  border-radius: 3px;
  padding: 2px 6px;
  outline: none;
  min-width: 100px;
  max-width: 240px;
}
[data-theme="dark"] .sheet-breadcrumb {
  background: var(--bg-panel);
}
[data-theme="dark"] .sheet-bc-type {
  background: #2A3A44;
  color: #8DBFD1;
}
[data-theme="dark"] .sheet-bc-type svg {
  stroke: #8DBFD1;
}
[data-theme="dark"] .sheet-bc-name:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
[data-theme="dark"] .sheet-bc-name-input {
  background: #1A2025;
  border-color: #4a8fa8;
  color: #ebeff1;
}

.btn-save {
  gap: 5px;
  font-size: var(--font-base);
  color: var(--text-tertiary);
  padding: 5px 10px;
}
.btn-save:hover { color: var(--text-primary); }
.btn-save .save-label { font-size: var(--font-sm); }
.btn-save .save-icon { flex-shrink: 0; }

.save-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.save-dot.saved { background: var(--success); }
.save-dot.unsaved { background: var(--warning); }
.save-dot.saving { background: var(--warning); animation: pulse 1s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---------- Main Content ---------- */
.main-content {
  display: flex;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
  /* v1.5.12+ — 캔버스 툴바를 최상단 전체 너비로 올리고 패널들은 그 아래서 시작 */
  padding-top: var(--toolbar-h);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  height: var(--toolbar-h);
}

.panel-title {
  font-size: var(--font-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.panel-actions {
  display: flex;
  gap: 2px;
}

/* ---------- Right Panel (Canvas) ---------- */
.panel-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

.canvas-toolbar {
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  gap: 8px;
  /* v1.5.12+ — 시트 헤더·스택 헤더 위로 올라와 전체 너비 차지 */
  position: absolute;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 15;
}

.canvas-toolbar-left,
.canvas-toolbar-center,
.canvas-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.canvas-toolbar-left,
.canvas-toolbar-right {
  flex-shrink: 0;
}

.canvas-toolbar-center {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

/* (tool-btn.active removed — unified select mode) */

.toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

/* PI 필터 영역 숨김 (공간은 유지하여 툴바 레이아웃 일관성 보장) */
.pi-filter-hidden {
  visibility: hidden !important;
  pointer-events: none !important;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.zoom-level {
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.toggle-label {
  font-size: var(--font-base);
  color: var(--text-tertiary);
  margin-right: 4px;
}

/* ---------- Crossing Mode Toggle Button (PI.B 스타일) ---------- */
.crossing-wrap { display: inline-flex; }
.btn-crossing {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 8px; gap: 0;
  border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  min-width: 28px; line-height: 1;
}
.btn-crossing-icon { display: inline-block; transform: translateY(-3px); }
.btn-crossing:hover { background: var(--bg-hover); }
.btn-crossing.active { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .btn-crossing { color: #adbec7; }
[data-theme="dark"] .btn-crossing:hover { background: #242C32; }
[data-theme="dark"] .btn-crossing.active { background: #2A3A44; color: #8DBFD1; }

/* ---------- Crossing Popover ---------- */
.crossing-popover {
  display: none; position: fixed;
  background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px 0; min-width: 120px; z-index: 100;
  font-family: var(--font);
}
.crossing-popover.open { display: block; }
.cx-option {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  font-size: 11px; font-weight: 500; color: var(--text-primary);
  cursor: pointer; transition: background var(--transition); white-space: nowrap;
}
.cx-option:hover { background: var(--bg-hover); }
.cx-icon {
  width: 16px; font-size: 13px; font-weight: 600; color: var(--text-tertiary);
  text-align: center; flex-shrink: 0;
}
.cx-check {
  width: 14px; font-size: 11px; font-weight: 700; color: var(--primary);
  text-align: center; flex-shrink: 0;
}
.cx-check:empty { visibility: hidden; }
[data-theme="dark"] .crossing-popover {
  background: #1A2228; border-color: #2A3A44; box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
[data-theme="dark"] .cx-option:hover { background: #242C32; }

/* ---------- Canvas ---------- */
/* ── 인쇄 미리보기 패널 ──────────────────────────────────────── */
.print-preview-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-base);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.print-preview-bar::-webkit-scrollbar { height: 3px; }
.print-preview-bar::-webkit-scrollbar-track { background: transparent; }
.print-preview-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.print-preview-bar::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
[data-theme="dark"] .print-preview-bar { scrollbar-color: #2A3A44 transparent; }
[data-theme="dark"] .print-preview-bar::-webkit-scrollbar-thumb { background: #2A3A44; }
[data-theme="dark"] .print-preview-bar::-webkit-scrollbar-thumb:hover { background: #4A6A7A; }
.ppb-label {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.ppb-slider {
  width: 82px;
  height: 3px;
  cursor: pointer;
  accent-color: var(--primary);
}
.ppb-slider-sm {
  width: 60px;
}
.ppb-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  min-width: 26px;
  font-variant-numeric: tabular-nums;
}
/* +/- 미세 조정 버튼 */
.ppb-adj-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.ppb-adj-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
/* 기본/초기화 버튼 */
.ppb-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0 4px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: 3px;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.ppb-reset-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
/* 구분선 */
.ppb-sep {
  width: 1px;
  height: 11px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 3px;
}
.ppb-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-xs);
  margin-left: auto;
  transition: background var(--transition), color var(--transition);
}
.ppb-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* 미리보기 버튼 활성 상태 */
#btnPrintPreview.active {
  background: rgba(55,108,130,0.12);
  color: var(--primary);
}

.canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-canvas);
}

.canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.canvas.grabbing {
  cursor: grabbing;
}

.grid-bg {
  pointer-events: none;
}

/* Node styles */
.node-shape {
  cursor: grab;
  transition: filter var(--transition);
}
.node-shape:active { cursor: grabbing; }

.node-shape:hover {
  filter: brightness(0.97);
}

.node-label {
  font-family: var(--font);
  font-size: calc(11px * var(--label-node-scale, 1));
  font-weight: 500;
  fill: var(--text-primary);
  pointer-events: none;
  user-select: none;
}

.node-role-badge {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  pointer-events: none;
  user-select: none;
}

.node-selected .node-shape {
  stroke-width: 2.5;
}

/* Marching ants selection outline */
@keyframes marchingAnts {
  to { stroke-dashoffset: -16; }
}

.sel-outline {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  pointer-events: none;
  animation: marchingAnts 0.6s linear infinite;
}

/* Node selection glow (behind marching ants) */
.sel-node-glow {
  fill: none;
  stroke: var(--primary);
  stroke-width: 6;
  opacity: 0.30;
  pointer-events: none;
}

/* Edge direct-selection glow */
.sel-edge-glow {
  fill: none;
  stroke: var(--primary);
  stroke-width: 10;
  opacity: 0.25;
  stroke-linecap: butt;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Dark mode: 글로우 가시성 강화 */
[data-theme="dark"] .sel-node-glow { opacity: 0.33; }
[data-theme="dark"] .sel-edge-glow { opacity: 0.33; }

/* ─── AI 초안 생성 v1.4.0 ───────────────────────────────────── */

/* 스크린리더 전용 (시각 라벨 없는 form field용) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 모달 폭 */
.ai-gen-modal .modal { max-width: 720px; width: 95vw; }
.ai-keys-modal .modal { max-width: 560px; width: 95vw; }

.ai-gen-modal .modal-header h3,
.ai-keys-modal .modal-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── API 키 관리 모달 ─────── */
.ai-keys-modal .modal-body {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.ai-key-card {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
}
.ai-key-card:last-child { border-bottom: none; }

.ai-key-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ai-key-card-title {
  font-weight: 600;
  font-size: var(--font-md);
  cursor: default;
  font-family: inherit;
  color: var(--text);
}

.ai-key-form {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}

.ai-key-input {
  flex: 1;
  font-family: monospace;
  font-size: var(--font-sm);
}

.ai-key-model-row {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--font-sm);
}

.ai-key-model-label {
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-family: inherit;
}

.ai-key-model {
  flex: 1;
  font-size: var(--font-sm);
  padding: 3px 6px;
}

.ai-key-issue-link {
  font-size: var(--font-xs);
  color: var(--primary);
  flex-shrink: 0;
  text-decoration: none;
}
.ai-key-issue-link:hover { text-decoration: underline; }

.ai-key-status {
  margin-top: 6px;
  font-size: var(--font-xs);
  min-height: 14px;
  color: var(--text-tertiary);
  font-family: inherit;
}
.ai-key-status.ok { color: var(--success); }
.ai-key-status.err { color: var(--danger); }

/* AI 키 모달 — 기본 .btn(변형 없음) 통일: 다크/라이트 공통 디자인 토큰 */
.ai-keys-modal .btn:not(.btn-primary):not(.btn-outline):not(.btn-ghost):not(.btn-icon) {
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.ai-keys-modal .btn:not(.btn-primary):not(.btn-outline):not(.btn-ghost):not(.btn-icon):hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}
.ai-keys-modal .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 삭제 버튼 — danger 톤 */
.ai-keys-modal .btn.ai-key-delete-btn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: var(--bg-panel);
}
.ai-keys-modal .btn.ai-key-delete-btn:hover:not(:disabled) {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

.ai-keys-footer-note {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-family: inherit;
}

.ai-keys-loading,
.ai-keys-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  font-family: inherit;
  line-height: 1.5;
}
.ai-keys-empty--err { color: var(--danger); }
.ai-keys-empty code {
  font-family: monospace;
  font-size: var(--font-sm);
  background: var(--bg-hover);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

/* ─── AI 초안 생성 모달 ─────── */
.ai-gen-modal .modal-body {
  padding: 16px 20px;
}

.ai-gen-provider-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ai-gen-provider-label {
  font-size: var(--font-base);
  color: var(--text-secondary);
  flex-shrink: 0;
  font-family: inherit;
}

.ai-gen-provider-row .ai-gen-select-provider { flex: 1; max-width: 180px; }
.ai-gen-provider-row .ai-gen-select-model { flex: 1; max-width: 220px; }

.ai-gen-key-status {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  font-family: inherit;
}
.ai-gen-key-status.ok { color: var(--success); }
.ai-gen-key-status.err { color: var(--danger); }

.ai-gen-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.ai-gen-modal .ai-gen-tab {
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--font-base);
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.ai-gen-modal .ai-gen-tab:hover { color: var(--text-secondary); }
.ai-gen-modal .ai-gen-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.ai-gen-panel[hidden] { display: none; }

.ai-gen-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  font-size: var(--font-base);
  font-family: inherit;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
}

/* HTML 붙여넣기 유도 힌트 박스 */
.ai-gen-hint {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-left: 3px solid var(--primary);
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  line-height: 1.55;
  font-family: inherit;
}
.ai-gen-hint-lead strong {
  color: var(--primary);
  display: block;
  margin-bottom: 2px;
}

.ai-gen-hint-details {
  margin-top: 8px;
  font-size: var(--font-xs);
}
.ai-gen-hint-details summary {
  cursor: pointer;
  color: var(--primary);
  user-select: none;
  padding: 2px 0;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-gen-hint-details summary::-webkit-details-marker { display: none; }
.ai-gen-hint-details summary::before {
  content: '▶';
  display: inline-block;
  font-size: 9px;
  transition: transform 0.15s;
}
.ai-gen-hint-details[open] summary::before {
  transform: rotate(90deg);
}
.ai-gen-hint-details summary:hover { text-decoration: underline; }

.ai-gen-hint-steps {
  margin: 8px 0 6px 0;
  padding-left: 22px;
  color: var(--text-secondary);
  line-height: 1.75;
}
.ai-gen-hint-steps li { margin-bottom: 2px; }
.ai-gen-hint-steps strong { color: var(--primary); }

.ai-gen-hint-extra {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  line-height: 1.6;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}
.ai-gen-hint-extra em {
  font-style: normal;
  color: var(--text-secondary);
  font-weight: 500;
}

.ai-gen-hint kbd {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: monospace;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ai-gen-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.ai-gen-pdf-drop {
  padding: 40px 20px;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-tertiary);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.ai-gen-pdf-drop:hover,
.ai-gen-pdf-drop.dragover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.ai-gen-pdf-drop-primary { font-size: var(--font-base); }
.ai-gen-pdf-drop-hint { font-size: var(--font-xs); opacity: 0.7; }

.ai-gen-pdf-preview {
  margin-top: 10px;
}

.ai-gen-pdf-preview-label {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: block;
  font-family: inherit;
}

.ai-gen-pdf-text {
  width: 100%;
  min-height: 200px;
  font-size: var(--font-sm);
  font-family: monospace;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  resize: vertical;
}
.ai-gen-pdf-text:focus { outline: none; border-color: var(--primary); }

.ai-gen-options {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.ai-gen-options-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.ai-gen-radio {
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-secondary);
}

.ai-gen-char-count {
  color: var(--text-tertiary);
  margin-left: auto;
  font-family: inherit;
}

.ai-gen-status {
  margin-top: 10px;
  font-size: var(--font-sm);
  min-height: 18px;
  color: var(--text-tertiary);
  font-family: inherit;
}
.ai-gen-status.ok { color: var(--success); }
.ai-gen-status.err { color: var(--danger); }

.ai-gen-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
}

/* AI 초안 생성 모달 — 기본 .btn(변형 없음) 통일: 다크/라이트 공통 */
.ai-gen-modal .modal-footer .btn:not(.btn-primary):not(.btn-outline):not(.btn-ghost):not(.btn-icon) {
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.ai-gen-modal .modal-footer .btn:not(.btn-primary):not(.btn-outline):not(.btn-ghost):not(.btn-icon):hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}
.ai-gen-modal .modal-footer .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 분석 로딩 오버레이 — 생성 시작 후 API 응답 대기 중 */
.ai-gen-modal .modal-body {
  position: relative;
}

.ai-gen-loading-overlay[hidden] { display: none; }
.ai-gen-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg-panel);
  z-index: 5;
  font-family: inherit;
  padding: 40px 20px;
  text-align: center;
}

.ai-gen-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ai-gen-spin 0.9s linear infinite;
}

@keyframes ai-gen-spin {
  to { transform: rotate(360deg); }
}

.ai-gen-loading-stage {
  font-size: var(--font-md);
  color: var(--text-secondary);
  font-weight: 600;
  min-height: 20px;
  transition: opacity 0.25s;
}

.ai-gen-loading-hint {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  max-width: 360px;
  line-height: 1.6;
}

.ai-gen-loading-bar {
  width: 280px;
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.ai-gen-loading-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.45s ease-out;
  position: relative;
}

.ai-gen-loading-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: ai-gen-bar-shimmer 1.6s linear infinite;
}

@keyframes ai-gen-bar-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.ai-gen-loading-elapsed {
  width: 280px;
  text-align: right;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* ─── CSV 업로드 미리보기 모달 ─────────────────────────────── */
.csv-preview-overlay .modal {
  max-width: 600px;
  width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.csv-preview-overlay .modal-header {
  flex-shrink: 0;
}
.csv-preview-overlay .modal-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.csv-preview-overlay .modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: inherit;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 공통 스크롤 스타일 */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.csv-preview-overlay .modal-body::-webkit-scrollbar { width: 6px; }
.csv-preview-overlay .modal-body::-webkit-scrollbar-track { background: transparent; }
.csv-preview-overlay .modal-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.csv-preview-overlay .modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
[data-theme="dark"] .csv-preview-overlay .modal-body { scrollbar-color: #2A3A44 transparent; }
[data-theme="dark"] .csv-preview-overlay .modal-body::-webkit-scrollbar-thumb { background: #2A3A44; }
[data-theme="dark"] .csv-preview-overlay .modal-body::-webkit-scrollbar-thumb:hover { background: #4A6A7A; }

.csv-preview-file {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  padding: 8px 12px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}

.csv-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.csv-preview-chip {
  font-size: var(--font-xs);
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.csv-preview-chip--subject   { background: var(--node-subject,   rgba(94,114,228,.12)); color: var(--node-subject-badge,   #4a5aca); }
.csv-preview-chip--external  { background: var(--node-external,  rgba(148,163,184,.12)); color: var(--node-external-badge,  #475569); }
.csv-preview-chip--collect   { background: var(--node-actor,     rgba(59,130,246,.12)); color: var(--node-actor-badge,     #1d4ed8); }
.csv-preview-chip--store     { background: var(--node-storage,   rgba(234,179,8,.12));  color: var(--node-storage-badge,   #a16207); }
.csv-preview-chip--use       { background: var(--node-system,    rgba(34,197,94,.12));  color: var(--node-system-badge,    #15803d); }
.csv-preview-chip--provide   { background: var(--node-process,   rgba(168,85,247,.12)); color: var(--node-process-badge,   #7e22ce); }
.csv-preview-chip--processor { background: var(--node-processor, rgba(249,115,22,.12)); color: var(--node-processor-badge, #c2410c); }
.csv-preview-chip--destroy   { background: var(--node-destroy,   rgba(239,68,68,.12));  color: var(--node-destroy-badge,   #b91c1c); }

.csv-preview-req {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  padding: 8px 12px;
  border: 1px dashed var(--primary);
  border-radius: var(--radius-sm);
  line-height: 1.5;
  background: var(--primary-light);
}
.csv-preview-req strong { color: var(--primary); }

.csv-preview-note {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  line-height: 1.6;
  padding: 0 2px;
}

/* 통계 패널 */
.csv-preview-stats {
  font-size: var(--font-sm);
  font-family: inherit;
  line-height: 1.55;
}

.csv-stat-ok {
  padding: 10px 12px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.csv-stat-missing,
.csv-stat-rejected {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.csv-stat-rejected {
  border-color: var(--danger);
  background: var(--danger-light, rgba(239, 68, 68, 0.08));
  color: var(--danger);
  margin-bottom: 8px;
}
.csv-stat-rejected strong { display: block; margin-bottom: 4px; }

.csv-stat-title {
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.csv-stat-hint {
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}

.csv-preview-stats ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csv-preview-stats li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-light);
  font-size: var(--font-sm);
}
.csv-preview-stats li:last-child { border-bottom: none; }
.csv-preview-stats li strong { color: var(--text); font-weight: 600; }

.csv-stat-critical strong {
  color: var(--danger);
}
.csv-stat-optional strong {
  color: var(--text-secondary);
}

.csv-stat-refs {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
  font-family: monospace;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}

.csv-preview-req {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.csv-stat-rejected ul li {
  border-bottom: none;
  color: var(--danger);
  padding: 2px 0;
}

/* Strict 토글 */
.csv-preview-strict {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-family: inherit;
  line-height: 1.5;
}
.csv-preview-strict input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary);
}
.csv-preview-strict strong { color: var(--text); }

.csv-preview-target-group {
  display: flex;
  gap: 18px;
  padding-top: 4px;
}

.csv-preview-target {
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-family: inherit;
}

.csv-preview-overlay .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
}

/* ─── 흐름표 필수 항목 시각 강조 ─────────────────────────── */
.pi-flowtable-table td.pi-ft-required-item,
.pi-flowtable-table td.pi-ft-required-item input.mi {
  font-weight: 600;
  color: var(--primary);
}
.pi-flowtable-table td.pi-ft-required-item::before {
  content: '★ ';
  color: var(--primary);
  font-size: 0.9em;
}

/* 엣지 경로 수동 조정 핸들 — 가운데 세그먼트 드래그 */
.edge-route-handle {
  fill: #fff;
  stroke: var(--primary);
  stroke-width: 1.5;
  opacity: 0.9;
  transition: opacity 0.15s, transform 0.1s;
  cursor: pointer; /* 기본값 — 아래 data-axis 규칙이 오버라이드 */
}
/* 축별 리사이즈 커서 (인라인 style 전달이 브라우저에서 누락될 때를 대비한 명시적 CSS) */
.edge-route-handle[data-axis="h"] { cursor: ns-resize; }
.edge-route-handle[data-axis="v"] { cursor: ew-resize; }
.edge-route-handle:hover {
  opacity: 1;
  fill: var(--primary);
}
/* 라벨이 핸들 위에 겹쳐 렌더되는 구간: 커서를 리사이즈로 강제 표시 */
body.route-handle-hover .edge-label-bg,
body.route-handle-hover .edge-label,
body.route-handle-hover .edge-label-group,
body.route-handle-hover .edge-sync-badge-bg,
body.route-handle-hover .edge-sync-badge-text,
body.route-handle-hover .edge-sync-standalone-bg {
  cursor: var(--route-handle-cur, ew-resize) !important;
}
[data-theme="dark"] .edge-route-handle {
  fill: var(--bg-surface, #1e1e1e);
}
[data-theme="dark"] .edge-route-handle:hover {
  fill: var(--primary);
}

.node-group.highlighted .node-shape,
.node-group.flow-active .node-shape {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(55, 108, 130, 0.3));
}

/* Crossing background (masks vertical line at crossing) */
.crossing-bg {
  fill: var(--bg-canvas);
  stroke: none;
}

/* Crossing pillars (|| 11자 bridge) */
.crossing-pillar {
  stroke: var(--text-tertiary);
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* Crossing bridge deck (교차 지점의 지나가는 선) */
.crossing-bridge {
  stroke: var(--text-tertiary);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.crossing-bridge.dashed {
  stroke-dasharray: 6 4;
}
.crossing-bridge.dash-dot {
  stroke-dasharray: 16 5 3 5;
}

/* Crossing decorations active state (통과 엣지 활성화 시 파란색) */
.crossing-group.pass-active .crossing-bridge,
.crossing-group.pass-active .crossing-pillar,
.crossing-group.pass-active .crossing-arc {
  stroke: var(--primary);
}

/* Crossing decorations flow animation state (흐름 애니메이션 시 엣지와 동일한 굵기) */
.crossing-group.flow-animated .crossing-bridge {
  stroke: var(--primary);
  stroke-width: 1.8;
  transition: stroke-width 0.2s ease;
}
.crossing-group.flow-animated .crossing-pillar {
  stroke: var(--primary);
  stroke-width: 1.5;
  transition: stroke-width 0.2s ease;
}
.crossing-group.flow-animated .crossing-arc {
  stroke: var(--primary);
  stroke-width: 1.8;
  transition: stroke-width 0.2s ease;
}

/* Crossing arc (반원 넘어가기) */
.crossing-arc {
  fill: none;
  stroke: var(--text-tertiary);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.flow-overlay { pointer-events: none; }
/* 수동 조정 핸들은 flowOverlay에 배치하지만 이벤트는 받아야 함 (커서 + 드래그) */
.flow-overlay .edge-route-handle { pointer-events: all; }

/* Hidden path for smooth flow animation (no gap) */
.edge-flow-anim-path {
  fill: none;
  stroke: none;
  pointer-events: none;
}

/* Edge styles */
.edge-path {
  fill: none;
  stroke: var(--text-tertiary);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: pointer;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.edge-group.flow-active .edge-path {
  stroke: var(--primary);
  stroke-width: 1.8;
}

.edge-path.dashed {
  stroke-dasharray: 6 4;
}
.edge-path.dash-dot {
  stroke-dasharray: 16 5 3 5;
}
/* offline: 실선 기반 — 틱 마크는 JS로 별도 렌더 */
.edge-path.offline {
  /* 실선 그대로 */
}
.edge-offline-tick {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.0;
  stroke-linecap: round;
  pointer-events: none;
}

/* Flow animation overlay */
.edge-flow {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-dasharray: 4 10;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* edge-flow 경로는 dot 애니메이션의 참조 경로로만 사용되며 비표시 유지 */

/* Flow direction indicator (moving dot) */
.edge-flow-dot {
  fill: var(--primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.edge-group.flow-active .edge-flow-dot,
.edge-flow-group.flow-active .edge-flow-dot {
  opacity: 1;
}

.edge-label {
  font-family: var(--font);
  font-size: calc(10px * var(--label-edge-scale, 1));
  fill: var(--text-secondary);
  pointer-events: none;
  user-select: none;
}

.edge-group.flow-active .edge-label,
.edge-label-group.flow-active .edge-label {
  fill: var(--primary);
  font-weight: 600;
}

.edge-label-bg {
  fill: var(--bg-canvas);
  opacity: 0.8;
  rx: 3;
}

/* PI Sync Badge on edges */
.edge-sync-badge-bg.sync-eq { fill: #dbeafe; }
.edge-sync-badge-bg.sync-partial { fill: #fef3c7; }
.edge-sync-badge-text { font-family: var(--font); font-size: 8px; pointer-events: none; user-select: none; }
.edge-sync-badge-text.sync-eq { fill: #2563eb; font-weight: 800; }
.edge-sync-badge-text.sync-partial { fill: #d97706; font-weight: 700; }
.edge-sync-standalone-bg { fill: var(--bg-canvas, #fff); opacity: 0.85; stroke: none; }
[data-theme="dark"] .edge-sync-badge-bg.sync-eq { fill: #1e3a5f; }
[data-theme="dark"] .edge-sync-badge-bg.sync-partial { fill: #4a3520; }
[data-theme="dark"] .edge-sync-badge-text.sync-eq { fill: #93c5fd; }
[data-theme="dark"] .edge-sync-badge-text.sync-partial { fill: #fcd34d; }

/* ── Edge PI Badges (엣지 위 PI 항목 배지 항상 표시) ── */
.edge-pi-badges { pointer-events: none; }
/* stroke 는 인라인 속성 사용 — 필수는 faint fg30 톤, 선택은 진한 점선 */
.edge-pi-tag-text {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}
/* PI 필터 딤 연동 */
.edge-label-group.pi-dimmed .edge-pi-badges { opacity: 0.18; }

/* ── Node PI Badges (도형 하단 PI 항목 배지) ── */
.node-pi-badges { pointer-events: none; }
/* stroke 는 인라인 속성 사용 — 필수는 faint fg30 톤, 선택은 진한 점선 */
.node-pi-tag-text {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}

/* PI Partial Propagation Prompt */
.pi-partial-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center;
}
.pi-partial-popup {
  background: var(--bg-panel, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 18px 22px; min-width: 300px; max-width: 380px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.pi-partial-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.pi-partial-desc { font-size: 11px; color: var(--text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pi-chip-new { background: #dcfce7; color: #16a34a; border: 1px dashed #86efac; padding: 0 var(--pi-item-badge-pad-x); border-radius: var(--pi-item-badge-radius); font-size: var(--pi-item-badge-font); font-weight: 600; }
[data-theme="dark"] .pi-chip-new { background: #14532d; color: #86efac; border-color: #22c55e; }
.pi-partial-edges { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pi-partial-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--bg, #f8fafc); border-radius: 6px; border: 1px solid var(--border-light, #e2e8f0);
  cursor: pointer; font-size: 11px;
}
.pi-partial-row:hover { border-color: var(--primary, #3b82f6); }
.pi-partial-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary, #3b82f6); cursor: pointer; }
.pi-partial-label { flex: 1; font-weight: 500; color: var(--text-primary); }
.pi-partial-count { font-size: 10px; color: var(--text-tertiary); font-weight: 600; }
.pi-partial-btns { display: flex; gap: 8px; justify-content: flex-end; }
.pi-partial-btn {
  padding: 5px 14px; border-radius: 6px; font-size: 11px; font-weight: 600;
  border: none; cursor: pointer; font-family: inherit;
}
.pi-partial-btn.primary { background: var(--primary, #3b82f6); color: #fff; }
.pi-partial-btn.primary:hover { opacity: 0.9; }
.pi-partial-btn.cancel { background: var(--bg-hover, #f1f5f9); color: var(--text-secondary, #64748b); }
.pi-partial-btn.cancel:hover { background: var(--border-light, #e2e8f0); }

/* Anchor points */
.anchor-point {
  fill: var(--bg-panel);
  stroke: var(--primary);
  stroke-width: 2;
  r: 4;
  opacity: 0;
  cursor: crosshair;
  transition: opacity var(--transition);
}

.node-group:hover .anchor-point,
.node-selected .anchor-point {
  opacity: 1;
}

.anchor-point:hover {
  r: 5;
  fill: var(--primary-light);
}

/* Anchor direction pickers (shown when edge selected) */
.anchor-picker {
  transition: r 0.15s ease, fill 0.15s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.anchor-picker-ring {
  opacity: 0.7;
  animation: anchorRingSpin 4s linear infinite;
}

@keyframes anchorRingSpin {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -20; }
}

/* Anchor slot dots (shown along active side) */
.anchor-slot-dot {
  transition: r 0.12s ease, fill 0.12s ease, stroke 0.12s ease;
  filter: drop-shadow(0 0 2px rgba(55, 108, 130, 0.3));
}

.anchor-guide-line {
  opacity: 0.6;
}

/* Selection box */
.selection-box {
  fill: rgba(55, 108, 130, 0.06);
  stroke: var(--primary);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}


/* ---------- Property Panel ---------- */
.panel-props {
  width: var(--props-w);
  min-width: var(--props-w);
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-slow), min-width var(--transition-slow), opacity var(--transition-slow);
  overflow: hidden;
}

.panel-props.collapsed {
  width: 0;
  min-width: 0;
  border-left: none;
  opacity: 0;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────
   Panel Stack (v1.3.9) — 우측 컬럼에 속성 + 흐름 설명을 수직 결합
   - 상단 섹션: panel-props (기본 flex-grow 2)
   - 하단 섹션: flow-desc-panel (기본 flex-grow 3)
   - 사이 리사이저: panel-stack-resizer (드래그로 비율 조절)
   - 양쪽 모두 .collapsed 상태 → :has() 선택자로 stack 자체 숨김
   - 한쪽만 .collapsed → display:none 되어 다른 쪽이 전체 차지
   - 내부 패널의 width/min-width/border-left는 stack 컨텍스트에서 override
   ─────────────────────────────────────────────────────────── */
.panel-stack {
  width: var(--stack-w, 260px);
  min-width: 260px;
  max-width: 720px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: min-width var(--transition-slow), border-left-color var(--transition-slow);
  overflow: hidden;
}
/* 리사이저로 드래그 중에는 transition 제거 (JS가 .resizing 토글) */
.panel-stack.resizing {
  transition: none;
}

/* 스택 좌측 경계 너비 조정 리사이저 — 시트 패널의 .panel-resizer 와 동일 톤 */
.panel-stack-left-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background var(--transition);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
.panel-stack-left-resizer:hover,
.panel-stack-left-resizer.active {
  background: var(--primary);
}
/* 양쪽 모두 collapsed (스택 전체 숨김) → 리사이저도 숨김 */
.panel-stack-left-resizer:has(+ .panel-stack:has(.panel-props.collapsed):has(.flow-desc-panel.collapsed)) {
  display: none;
}
/* 양쪽 모두 collapsed일 때 stack 자체 숨김 (자동)
   !important — 리사이저가 쓰는 inline style.width(고정 폭)를 override 하고 전체 숨김 */
.panel-stack:has(.panel-props.collapsed):has(.flow-desc-panel.collapsed) {
  width: 0 !important;
  min-width: 0 !important;
  border-left: none !important;
  pointer-events: none;
}

/* Stack 내부 panel-props: 자체 width/border/bg override */
.panel-stack > .panel-props {
  width: auto;
  min-width: 0;
  border-left: none;
  background: transparent;
  flex: 2 1 0;         /* 기본 비율, JS가 style.flex로 override */
  min-height: 0;       /* flex child 스크롤을 위해 필수 */
  transition: none;    /* width transition은 stack이 담당 */
}
/* 섹션 헤더가 제거됨 — 접히면 완전히 숨김 (v1.5.12+)
   !important — setupPanelStackResizer inline style.flex override */
.panel-stack > .panel-props.collapsed {
  display: none !important;
}

/* Stack 내부 flow-desc-panel: 자체 width/border/bg override */
.panel-stack > .flow-desc-panel {
  width: auto;
  min-width: 0;
  max-width: none;
  border-left: none;
  background: transparent;
  flex: 3 1 0;
  min-height: 0;
  transition: none;
}
.panel-stack > .flow-desc-panel.collapsed {
  display: none !important;
}

/* 수직 리사이저 바 (섹션 사이) */
.panel-stack-resizer {
  height: 4px;
  flex-shrink: 0;
  background: var(--border);
  cursor: row-resize;
  transition: background 0.15s, height 0.15s;
  position: relative;
}
.panel-stack-resizer:hover,
.panel-stack-resizer.active {
  background: var(--primary);
  height: 6px;
}
/* 한쪽만 보일 땐 리사이저 불필요 → 숨김 */
.panel-stack:has(.panel-props.collapsed) > .panel-stack-resizer,
.panel-stack:has(.flow-desc-panel.collapsed) > .panel-stack-resizer {
  display: none;
}

/* 스택 상단 공통 바 — 시트 패널 헤더와 대칭 (v1.5.12+)
   .panel-header 클래스를 상속받아 height/padding/border/display 기본값을 동일하게 공유
   접기 버튼이 LEFT(안쪽), 배지가 RIGHT — 시트의 "타이틀 LEFT + 액션 RIGHT"를 거울 반사 */
.panel-stack > .panel-stack-top-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.panel-stack-collapse-wrap {
  /* 접기 버튼 = 안쪽(스택 왼쪽 = 캔버스 쪽) */
  order: 0;
  flex-shrink: 0;
}
.panel-stack-section-badges {
  display: flex;
  gap: 4px;
  align-items: center;
  order: 1;
  margin-left: auto;
}
/* 아이콘 배지 — 토글 상태를 배경색으로 표현 */
.panel-stack-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  opacity: 0.55;
}
.panel-stack-badge:hover {
  opacity: 0.85;
  color: var(--text-secondary);
  background: var(--bg-hover);
}
.panel-stack-badge.active {
  opacity: 1;
  color: var(--primary);
  background: var(--primary-light);
  border-color: transparent;
}
/* 상단 바 .panel-actions 안의 아이콘 버튼 — 시트 헤더와 동일한 색 처리 */
.panel-stack-top-bar .panel-actions .btn-icon {
  color: var(--text-tertiary);
}

/* 스택 전체 숨김 시 상단 바도 자동 숨김 */
.panel-stack:has(.panel-props.collapsed):has(.flow-desc-panel.collapsed) > .panel-stack-top-bar {
  display: none;
}

[data-theme="dark"] .panel-stack > .panel-stack-top-bar {
  background: var(--bg-panel);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .panel-stack-badge.active {
  background: rgba(141,191,209,0.15);
  color: var(--primary);
}

/* 섹션 헤더 제거됨 (v1.5.12+) — 상단 바 배지만이 유일한 토글 */

/* 우측 스택 외부 열기 버튼 (스택 전체 숨김 시 노출) — 시트의 btn-sheet-open 과 대칭 */
.btn-panel-open {
  position: absolute;
  right: 0;
  top: calc(var(--topbar-h) + var(--toolbar-h) + 8px);
  z-index: 20;
  width: 24px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  padding: 0;
}
.btn-panel-open:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.btn-panel-open.hidden {
  display: none;
}

/* 한쪽이 collapsed 면 남은 쪽이 전체 높이를 차지해야 함.
 * JS 가 저장한 비율(예: flex: 0.322 1 0)을 그대로 두면 flex-grow 합이 < 1 이 되어
 * 빈 영역이 생긴다 → 남은 쪽을 flex-grow:1 로 강제해 공간 전체 점유. */
.panel-stack:has(.flow-desc-panel.collapsed) > .panel-props,
.panel-stack:has(.panel-props.collapsed) > .flow-desc-panel {
  flex: 1 1 0 !important;
}

[data-theme="dark"] .panel-stack {
  background: var(--bg-panel);
  border-left-color: var(--border);
}
[data-theme="dark"] .panel-stack-resizer {
  background: var(--border);
}

.panel-props .panel-header {
  border-bottom: 1px solid var(--border);
}

.panel-props .panel-title {
  color: var(--text-secondary);
}

.props-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.props-content::-webkit-scrollbar { width: 4px; }
.props-content::-webkit-scrollbar-track { background: transparent; }
.props-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.props-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}

.props-empty p {
  font-size: var(--font-base);
  color: var(--text-tertiary);
  line-height: 1.6;
}

/* Property form */
.prop-group {
  margin-bottom: 16px;
}

.prop-label {
  display: block;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.prop-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: var(--font);
  font-size: var(--font-base);
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color var(--transition);
  resize: vertical;
  min-height: 29px;
  max-height: 200px;
  line-height: 1.4;
  overflow-y: auto;
}

.prop-input:focus {
  border-color: var(--primary);
}

/* textarea 스크롤바 커스터마이징 */
.prop-input::-webkit-scrollbar {
  width: 6px;
}

.prop-input::-webkit-scrollbar-track {
  background: transparent;
}

.prop-input::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.prop-input::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* textarea resize handle 커스터마이징 */
.prop-input::-webkit-resizer {
  background-color: transparent;
  background-image: linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 56%, transparent 56%, transparent 62%, var(--border) 62%, var(--border) 68%, transparent 68%);
  background-size: 8px 8px;
  background-position: bottom right;
  background-repeat: no-repeat;
}

/* Firefox 스크롤바 */
.prop-input {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* number input spinner 제거 */
.prop-input[type="number"]::-webkit-inner-spin-button,
.prop-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.prop-input[type="number"] {
  -moz-appearance: textfield;
}

.prop-row {
  display: flex;
  gap: 10px;
}

.prop-row .prop-group {
  flex: 1;
}

.prop-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  cursor: pointer;
}

.prop-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: var(--font);
  font-size: var(--font-md);
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  cursor: pointer;
}

/* ---------- Swatch Grid (도형/역할 선택) — Style D 글로우 링 ---------- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  justify-items: center;
}
#nodeRoleGrid, #areaColorGrid, #dividerColorGrid, #textboxColorGrid {
  grid-template-columns: repeat(8, 1fr);
}
.swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.swatch:hover {
  transform: scale(1.08);
}
.swatch.active {
  outline-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(55, 108, 130, 0.15);
}
/* 역할/영역 스와치: 색 영역 축소 (여백 확보) */
.swatch[data-role], .swatch[data-color] {
  padding: 3px;
  background-clip: content-box;
}
/* 도형 스와치: 배경만 */
.swatch[data-shape] {
  background: var(--bg);
}
.swatch[data-shape].active {
  background: var(--primary-light);
}
.swatch[data-shape].active svg * {
  stroke: var(--primary);
}
/* 다크모드 글로우 */
[data-theme="dark"] .swatch.active {
  box-shadow: 0 0 0 4px rgba(141, 191, 209, 0.15);
}
[data-theme="dark"] .node-type-dropdown {
  background: var(--bg-panel); border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
[data-theme="dark"] .node-type-trigger.badge-sm:hover { filter: brightness(1.1); }
[data-theme="dark"] .node-type-option:hover { filter: brightness(1.12); }
[data-theme="dark"] .node-type-option.active { outline-color: var(--primary); }

/* Meta section */
.prop-meta {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 8px;
}

.prop-meta-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: var(--font-base);
  border-bottom: 1px solid var(--border-light);
}

.prop-meta-item:last-child {
  border-bottom: none;
}

.prop-meta-key {
  color: var(--text-tertiary);
  font-weight: 500;
}

.prop-meta-value {
  color: var(--text-primary);
  max-width: 140px;
  text-align: right;
}

/* Meta edit UI */
.prop-meta-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.meta-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-edit-label {
  flex: 0 0 58px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  white-space: nowrap;
}

.meta-edit-input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.meta-edit-input:focus {
  border-color: var(--primary);
}

.meta-edit-del {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-light);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.meta-edit-del:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
}

.meta-add-row {
  margin-top: 6px;
}

.meta-add-select {
  width: 100%;
  height: 28px;
  padding: 0 6px;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-tertiary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.meta-add-select:hover {
  border-color: var(--primary);
}

.meta-add-select:focus {
  border-color: var(--primary);
  color: var(--text-primary);
}

.meta-custom-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.meta-custom-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.meta-custom-btn:hover {
  background: var(--primary-hover);
}
[data-theme="dark"] .meta-custom-btn { background: #2A4D5C; color: #C8E2EC; }
[data-theme="dark"] .meta-custom-btn:hover { background: #336070; color: #DCF0F8; }

.meta-manage {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

.meta-manage-header {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  font-weight: 500;
}

.meta-manage-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

.meta-manage-input {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.meta-manage-input:hover {
  background: var(--bg);
  border-color: var(--border-light);
}

.meta-manage-input:focus {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--text-primary);
}

/* ---------- Meta Modal System (PI 패턴과 동일) ---------- */

/* -- Panel: Emphasis Card -- */
.prop-section-card.meta-emphasis {
  background: rgba(55, 108, 130, 0.05);
  border: 1px solid rgba(55, 108, 130, 0.18);
}
.meta-emphasis .prop-inline-label { color: var(--primary); font-weight: 700; }
.meta-section { padding: 0; margin-bottom: 0; }
.meta-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.meta-header .prop-inline-label { margin-bottom: 0; }
.meta-count {
  font-size: var(--font-xs); font-weight: 600;
  background: var(--primary); color: #fff;
  padding: 1px 6px; border-radius: 8px; min-width: 18px; text-align: center;
}
.meta-count.zero { color: var(--text-tertiary); background: var(--bg-hover); }
[data-theme="dark"] .prop-section-card.meta-emphasis {
  background: rgba(141, 191, 209, 0.05);
  border-color: rgba(141, 191, 209, 0.15);
}
[data-theme="dark"] .meta-emphasis .meta-count { background: #2A5B6F; color: #B8E0ED; }
[data-theme="dark"] .meta-emphasis .meta-count.zero { background: var(--bg-hover); color: var(--text-tertiary); }

/* -- Panel: Empty State -- */
.meta-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 6px; cursor: pointer;
  border: 1px dashed var(--border); border-radius: var(--radius-xs);
  color: var(--text-tertiary); font-size: var(--font-sm);
  transition: all var(--transition); gap: 4px;
}
.meta-empty:hover { border-color: var(--primary); color: var(--primary); }
.meta-empty svg { width: 12px; height: 12px; flex-shrink: 0; }

/* -- Panel: Summary Rows -- */
.meta-summary { cursor: pointer; padding: 4px 0; transition: all var(--transition); }
.meta-summary:hover { opacity: 0.8; }
.meta-summary-list { list-style: none; padding: 0; margin: 0; }
.meta-summary-row {
  display: flex; align-items: baseline; gap: 4px;
  padding: 2px 0; font-size: 10px; line-height: 1.3;
  border-bottom: 1px solid var(--border-light);
}
.meta-summary-row:last-child { border-bottom: none; }
.meta-summary-row .item-name {
  flex: 0 0 52px; color: var(--primary); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meta-summary-row .item-val {
  flex: 1; min-width: 0; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meta-summary-row .item-empty {
  flex: 1; color: var(--text-tertiary); font-size: var(--font-xs); font-style: italic;
}

/* -- Panel: 추가 정보 확장 상태 -- */
.meta-summary.expanded .meta-summary-row.expandable {
  align-items: flex-start;
}
.meta-summary.expanded .meta-summary-row.expandable .item-val {
  white-space: pre-wrap; overflow: visible; text-overflow: unset;
  word-break: break-word; line-height: 1.5;
}

/* -- Modal Overlay & Container -- */
.meta-modal-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-modal); z-index: 600;
  align-items: center; justify-content: center;
}
.meta-modal-overlay.open { display: flex; }
.meta-modal {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 320px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  animation: metaModalIn 200ms ease;
  position: relative;
}
.meta-modal.dragging { transition: none; }
@keyframes metaModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* -- Modal Header -- */
.meta-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border-light);
  cursor: grab; user-select: none;
}
.meta-modal-header:active { cursor: grabbing; }
.meta-modal-title { font-size: var(--font-md); font-weight: 600; }
.meta-modal-close {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.meta-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* -- Modal Body -- */
.meta-modal-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.meta-modal-body::-webkit-scrollbar { width: 4px; }
.meta-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* -- Modal Footer -- */
.meta-modal-footer {
  padding: 8px 14px; border-top: 1px solid var(--border-light);
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.meta-modal-footer.edit-mode { background: #fdf8e8; border-top: 1px solid #e8c840; }
[data-theme="dark"] .meta-modal-footer.edit-mode { background: #2a2820; border-top-color: #8a7530; }

/* -- Chips -- */
.meta-chips { display: flex; flex-wrap: wrap; gap: 4px; border: 1px dashed transparent; border-radius: 4px; padding: 2px; margin: -2px; transition: border-color 0.15s; }
.meta-chip-wrap { position: relative; display: inline-flex; }
.meta-chip-wrap[draggable] { cursor: grab; }
.meta-chip-wrap[draggable]:active { cursor: grabbing; }
.meta-chip-wrap.dragging { opacity: 0.4; }
.meta-drop-indicator { display: inline-block; width: 2px; height: 26px; background: var(--primary); border-radius: 1px; vertical-align: middle; margin: 0 -1px; pointer-events: none; }
.meta-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 26px; border-radius: 3px;
  font-size: var(--font-sm); font-weight: 500; font-family: var(--font);
  cursor: pointer; border: 1px solid transparent;
  background: var(--bg-hover); color: var(--text-secondary);
  transition: all var(--transition); user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meta-chip:hover { border-color: var(--border); color: var(--text-primary); }
.meta-chip.selected {
  background: var(--primary-light); border-color: var(--primary);
  color: var(--primary); font-weight: 600;
}
.meta-chip.editing {
  outline: 2px solid var(--primary); outline-offset: 1px;
  animation: metaEditPulse 1s ease infinite;
}
@keyframes metaEditPulse {
  0%, 100% { outline-color: var(--primary); }
  50% { outline-color: transparent; }
}
.meta-chip-wrap .chip-edit-btn {
  position: absolute; top: -5px; right: -5px;
  display: none; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  color: var(--text-tertiary); cursor: pointer; z-index: 10;
  font-size: var(--font-xs); line-height: 1;
}
.meta-chip-wrap:hover .chip-edit-btn { display: inline-flex; }
.meta-chip-wrap .chip-edit-btn:hover { color: var(--primary); }

/* -- Value Input Section (top of modal body) -- */
.meta-values-section { margin-bottom: 10px; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; }
.meta-values-title {
  font-size: var(--font-xs); color: var(--text-tertiary); font-weight: 600;
  margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
}
.meta-values-title svg { width: 10px; height: 10px; }
.meta-value-rows { display: flex; flex-direction: column; gap: 4px; }
.meta-value-row { display: flex; align-items: flex-start; gap: 5px; }
.meta-value-label {
  flex: 0 0 60px; font-size: 11px; color: var(--text-secondary); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 4px;
}
.meta-value-input {
  flex: 1; min-width: 0; min-height: 26px; padding: 4px 6px;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text-primary);
  font-size: 11px; font-family: inherit; outline: none;
  transition: border-color var(--transition);
  resize: none; overflow: hidden; line-height: 1.4;
}
.meta-value-input:focus { border-color: var(--primary); }
.meta-value-input::placeholder { color: var(--text-tertiary); font-size: var(--font-xs); font-style: italic; }
.meta-value-remove {
  flex: 0 0 22px; width: 22px; height: 22px;
  border: 1px solid var(--border-light); background: var(--bg);
  color: var(--text-secondary); font-size: 13px; cursor: pointer;
  border-radius: var(--radius-sm); display: flex; align-items: center;
  justify-content: center; padding: 0; line-height: 1;
  transition: all var(--transition);
  margin-top: 2px;
}
.meta-value-remove:hover { color: var(--danger); border-color: var(--danger); }
.meta-values-empty { font-size: var(--font-xs); color: var(--text-tertiary); text-align: center; padding: 4px 0; }

/* -- Custom Input/Button (Footer) -- */
.meta-custom-input {
  padding: 4px 6px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font-family: var(--font); font-size: var(--font-sm);
  color: var(--text-primary); background: var(--bg); outline: none;
  flex: 1; min-width: 60px;
}
.meta-custom-input:focus { border-color: var(--primary); }
.meta-custom-input::placeholder { font-size: var(--font-xs); }
.meta-custom-btn {
  padding: 4px 8px; border: none; border-radius: var(--radius-xs);
  background: var(--primary); color: #fff;
  font-family: var(--font); font-size: var(--font-sm);
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.meta-custom-btn:hover { background: var(--primary-hover); }
[data-theme="dark"] .meta-custom-btn { background: #2A4D5C; color: #C8E2EC; }
[data-theme="dark"] .meta-custom-btn:hover { background: #336070; color: #DCF0F8; }
.meta-custom-btn.cancel {
  background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border);
}
.meta-custom-btn.cancel:hover { background: var(--bg); color: var(--text-primary); }

/* ---------- #8 Dot Indicator Badge System ---------- */
.dot-options {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dot-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--font-sm);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
}
.dot-option::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: all var(--transition);
  flex-shrink: 0;
}
.dot-option:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.dot-option:hover::before { background: var(--text-secondary); }
.dot-option.active {
  color: var(--primary);
  font-weight: 600;
  background: var(--primary-light);
}
.dot-option.active::before {
  background: var(--primary);
  width: 7px;
  height: 7px;
}
/* ---------- Dot Option Button (방향전환 등 액션 버튼) ---------- */
.dot-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--font-sm);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
}
.dot-option-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ---------- Label Position Track (A2) ---------- */
.lp-track {
  padding: 6px 4px 2px;
}
.lp-track-line {
  position: relative;
  width: 100%;
  height: 18px;
}
.lp-track-line::before {
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  top: 50%;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  transform: translateY(-50%);
}
.lp-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: #d3dfe4;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 1;
}
.lp-dot:hover {
  background: #b9ccd3;
  transform: translate(-50%, -50%) scale(1.25);
}
.lp-dot.active {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(55,108,130,0.15);
}
.lp-dot[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-tertiary);
  white-space: nowrap;
  padding: 1px 3px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.lp-dot:hover::after { opacity: 1; }

.line-preview {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid currentColor;
  vertical-align: middle;
  margin-left: 2px;
}
.line-preview.dashed { border-top-style: dashed; }
.line-preview.dotted { border-top-style: dotted; }
.line-preview.double { border-top: 1.5px double currentColor; }
.line-preview.dash-dot {
  border-top: none;
  background: repeating-linear-gradient(
    90deg,
    currentColor 0px, currentColor 10px,
    transparent 10px, transparent 13px,
    currentColor 13px, currentColor 15px,
    transparent 15px, transparent 18px
  );
  height: 2px;
}
.line-preview.offline {
  border-top: none;
  height: 5px;
  width: 36px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 10px,
      currentColor 10px, currentColor 11px
    ) center / 100% 100% no-repeat;
}

/* ---------- Mini Icon Button (방향 반전 등) ---------- */
.btn-icon-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-light);
  border-radius: 2px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
}
.btn-icon-mini:hover {
  color: var(--primary);
  background: var(--primary-light);
  border-color: var(--primary);
}

/* ---------- Edge Props: Section Layout ---------- */
.prop-divider {
  height: 1px;
  background: var(--border-light);
  margin: 14px 0;
}
.prop-section-card {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 10px;
}
.prop-inline-label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
/* B안 — 유형+라벨 가로 분할 */
.prop-dual-row {
  display: flex; gap: 6px;
}
.prop-dual-row .dual-col-badge { flex: 0 0 68px; }
.prop-dual-row .dual-col-label { flex: 1; min-width: 0; }
.prop-dual-row .dual-label {
  font-size: 9px; color: var(--text-tertiary); font-weight: 600;
  margin-bottom: 3px; letter-spacing: 0.2px;
}
.prop-dual-row .prop-input.badge-sm {
  text-align: center; font-size: var(--font-sm);
  padding: 4px 6px; min-height: 25px;
}
/* 유형 드롭다운 트리거 */
.node-type-trigger.badge-sm {
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; border-radius: var(--radius-sm);
  user-select: none; padding-right: 14px;
}
.node-type-trigger.badge-sm:hover { filter: brightness(0.95); }
/* 유형 드롭다운 리스트 */
.dual-col-badge { position: relative; }
.node-type-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 120; margin-top: 2px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,.12);
  padding: 3px; max-height: 240px; overflow-y: auto;
  min-width: 120px;
}
.node-type-option {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
  font-size: var(--font-xs); font-weight: 600;
  border: 1.5px solid transparent; margin-bottom: 1px;
  transition: filter .1s;
}
.node-type-option:hover { filter: brightness(0.93); }
.node-type-option.active { border-style: solid; outline: 2px solid var(--primary); outline-offset: -1px; }
.node-type-option svg { flex-shrink: 0; }
.prop-dual-row .prop-input.label-sm {
  padding: 4px 8px; min-height: 25px;
}
.anchor-title {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: left;
  margin-bottom: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.anchor-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.anchor-col .d2-controls { width: 100%; }
.anchor-divider {
  width: 1px;
  background: var(--border-light);
  margin: 0 10px;
  align-self: stretch;
  flex-shrink: 0;
}

/* ---------- Design 2: 미니멀 크로스 (출발점/도착점) ---------- */
.d2-cross {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0 auto;
  width: 75px;
}
.d2-cross button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}
.d2-cross button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.d2-cross button.active {
  color: var(--primary);
  font-weight: 700;
  background: var(--primary-light);
}
.d2-cross .d2-cross-auto {
  font-size: 9px;
  font-weight: 500;
}
.d2-cross button.auto-active {
  color: var(--primary);
  opacity: 0.4;
}

/* ---------- Size Preset Buttons (M/L/XL) ---------- */
.size-preset-group {
  display: flex;
  gap: 4px;
}
.size-preset-btn {
  flex: 1;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-panel);
  font-family: var(--font);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.size-preset-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.size-preset-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
}
.size-preset-btn .size-label {
  font-size: 11px;
}
.size-preset-btn .size-dim {
  font-size: 8px;
  font-weight: 400;
  color: var(--text-tertiary);
  opacity: 0.8;
}
.size-preset-btn.active .size-dim {
  color: var(--primary);
  opacity: 0.7;
}

.d2-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.d2-stepper {
  display: flex;
  align-items: stretch;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--bg);
  flex: 1;
  min-width: 0;
}
.d2-stepper button {
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  padding: 0;
}
.d2-stepper button svg { width: 9px; height: 9px; }
.d2-stepper button:hover { background: var(--primary-light); color: var(--primary); }
.d2-stepper button:active { background: var(--primary); color: #fff; }
.d2-stepper input {
  flex: 1;
  min-width: 24px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  font-family: var(--font);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  outline: none;
  padding: 0 2px;
  -moz-appearance: textfield;
}
.d2-stepper input::-webkit-outer-spin-button,
.d2-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.d2-stepper input::placeholder { color: var(--text-tertiary); font-weight: 400; font-size: 10px; }
.d2-auto {
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.d2-auto:hover { border-color: var(--primary); color: var(--primary); }
.d2-auto.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}
.order-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
  margin-bottom: 0;
  margin-top: 0;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  min-width: 380px;
  max-width: 480px;
  transform: translateY(8px);
  transition: transform var(--transition-slow);
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: var(--font-lg);
  font-weight: 600;
}

.modal-body {
  padding: 20px;
}

/* Export grid */
.export-grid {
  display: grid;
  gap: 8px;
}
.export-grid-3 { grid-template-columns: repeat(3, 1fr); }
.export-grid-2 { grid-template-columns: repeat(2, 1fr); }

.export-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
}
.export-group-label:first-child { margin-top: 0; }

.export-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
  min-height: 112px;
  justify-content: flex-start;
}
.export-option .export-icon { margin-bottom: 2px; }
.export-option > span { margin-bottom: 2px; }

.export-option:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.export-icon {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.export-option span {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.export-caption {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-top: 1px;
}

.export-compare {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.export-compare-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.export-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}
.export-compare-table col.cmp-col-label { width: 44%; }
.export-compare-table col.cmp-col-val { width: 28%; }
.export-compare-table th,
.export-compare-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}
.export-compare-table th {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-hover);
  text-align: left;
}
.export-compare-table th:nth-child(2),
.export-compare-table th:nth-child(3),
.export-compare-table td:nth-child(2),
.export-compare-table td:nth-child(3) {
  text-align: center;
}
.export-compare-table td:first-child {
  color: var(--text-secondary);
  text-align: left;
}
.export-compare-table tr:last-child td { border-bottom: none; }
.export-compare-table td.cmp-yes {
  color: var(--primary);
  font-weight: 700;
}
.export-compare-table td.cmp-no {
  color: var(--text-tertiary);
  opacity: 0.6;
}

.export-compare-note {
  margin-top: 8px;
  padding: 7px 9px;
  background: var(--bg-hover);
  border-radius: var(--radius-xs);
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.55;
}

/* JSON 카드 내부 분할: 전체 시트 / 현재 시트 */
.export-option-json {
  cursor: default;
}
.export-option-json:hover {
  border-color: var(--border);
  background: var(--bg);
}
.export-json-split {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}
.export-json-sub {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
}
.export-json-sub:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.export-json-sub strong {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.export-json-sub small {
  font-size: 9.5px;
  color: var(--text-tertiary);
  font-weight: 400;
}
.export-json-sub:hover strong { color: var(--primary); }

.import-dropzone {
  margin-top: 12px;
  padding: 24px 12px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
}
.import-dropzone:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.import-dropzone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.import-dropzone .dropzone-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.import-dropzone .dropzone-hint {
  margin-top: 4px;
  font-family: var(--font);
  font-size: 10px;
  color: var(--text-tertiary);
}

/* Import Modal Dropzone */
.import-modal-dropzone {
  padding: 36px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.import-modal-dropzone:hover,
.import-modal-dropzone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.import-modal-dropzone.drag-over .import-modal-icon svg {
  stroke: var(--primary);
}
.import-modal-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font);
  user-select: none;
}
.import-modal-icon {
  margin-bottom: 4px;
  color: var(--text-tertiary);
  transition: color var(--transition);
}
.import-modal-dropzone:hover .import-modal-icon,
.import-modal-dropzone.drag-over .import-modal-icon {
  color: var(--primary);
}
.import-modal-text {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.import-modal-action {
  font-size: var(--font-sm);
  color: var(--primary);
  font-weight: 500;
}
.import-modal-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.import-modal-error {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-light, #FEF2F2);
  color: var(--danger, #EF4444);
  font-size: 12px;
  line-height: 1.5;
}

/* JSON Export Choice */
.json-export-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.json-export-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
  text-align: left;
  color: var(--text-primary);
}
.json-export-choice:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.json-export-choice svg {
  flex-shrink: 0;
  color: var(--primary);
}
.json-export-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.json-export-choice-text strong {
  font-size: var(--font-base);
  font-weight: 600;
}
.json-export-choice-text span {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* JSON Import Preview */
.import-preview-info {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  font-family: var(--font);
  font-size: var(--font-sm);
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.import-preview-info svg {
  flex-shrink: 0;
}
.import-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font);
}
.import-preview-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-sm);
}
.import-preview-list li:last-child {
  border-bottom: none;
}
.import-sheet-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}
.import-sheet-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}
.import-sheet-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.import-sheet-badge.new {
  background: #e8f5e9;
  color: #2e7d32;
}
.import-sheet-badge.rename {
  background: #fff3e0;
  color: #e65100;
}
[data-theme="dark"] .import-sheet-badge.new {
  background: rgba(46, 125, 50, 0.2);
  color: #81c784;
}
[data-theme="dark"] .import-sheet-badge.rename {
  background: rgba(230, 81, 0, 0.2);
  color: #ffb74d;
}
.import-preview-error {
  padding: 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-family: var(--font);
  font-size: var(--font-sm);
}

/* Share modal */
.share-section {
  margin-bottom: 16px;
}

.share-section:last-child {
  margin-bottom: 0;
}

.share-label {
  display: block;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.share-permissions {
  display: flex;
  gap: 6px;
}

.share-perm {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font);
  font-size: var(--font-md);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}

.share-perm:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}

.share-perm.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}
[data-theme="dark"] .share-perm.active {
  background: #2A4D5C;
  border-color: #3A6B7E;
  color: #C8E2EC;
  font-weight: 600;
}

.share-link-row {
  display: flex;
  gap: 8px;
}

.share-link-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-base);
  color: var(--text-secondary);
  background: var(--bg);
  outline: none;
}

.share-expires {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--font-md);
}

.share-url-info {
  margin-top: 6px;
  font-size: var(--font-base);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.share-url-info.warn {
  color: var(--warning, #e67e22);
}
.share-url-info.error {
  color: var(--danger, #e74c3c);
}
.share-copied-toast {
  color: var(--primary);
  font-weight: 600;
}

/* ---------- Tooltip ---------- */
.tooltip {
  position: absolute;
  background: rgba(255, 255, 255, 0.90);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  line-height: 1.5;
  max-width: 271px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(0.5px);
  border: 1px solid var(--border);
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transition: opacity var(--transition);
}

.tooltip.visible {
  opacity: 1;
}

.tooltip.pinned {
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border);
  transform-origin: top left;
}
.tooltip.pinned .tt-detail-toggle {
  pointer-events: auto;
  cursor: pointer;
}
.tooltip.pinned .tt-detail-body {
  pointer-events: auto;
}

.tooltip-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.tt-sync-row { margin-bottom: 4px; }
.tt-sync-eq, .tt-sync-partial {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  font-size: 9px; font-weight: 700;
}
.tt-sync-eq { background: #dbeafe; color: #1d4ed8; }
.tt-sync-partial { background: #fef3c7; color: #b45309; }
[data-theme="dark"] .tt-sync-eq { background: rgba(59,130,246,0.25); color: #93c5fd; }
[data-theme="dark"] .tt-sync-partial { background: rgba(217,119,6,0.25); color: #fcd34d; }

/* Edge tooltip: 미연계·추가 항목 */
.pi-mini-badge.tt-unlinked { opacity: 0.6; text-decoration: line-through; }
.badge-wrap.tt-unlinked-wrap { opacity: 0.6; }
.badge-wrap.tt-unlinked-wrap .pi-mini-badge { text-decoration: line-through; }
.src-summary-chip.tt-src-unlinked { opacity: 0.6; }
.tt-extra-row { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border-light); }
.tt-extra-label { display: block; font-size: 9px; font-weight: 600; color: #d97706; margin-bottom: 2px; }
.pi-mini-badge.tt-extra-badge { border: 1px dashed #d97706; background: #fef3c7; color: #92400e; }
[data-theme="dark"] .tt-extra-label { color: #fcd34d; }
[data-theme="dark"] .pi-mini-badge.tt-extra-badge { border-color: #b45309; background: rgba(217,119,6,0.2); color: #fcd34d; }

.tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.tooltip-key {
  color: var(--text-tertiary);
}

.tooltip-value {
  color: var(--primary);
}

/* ---------- Tooltip PI Card (속성 패널 동일 스타일) ---------- */
.tooltip:has(.tt-pi-card) { width: 271px; }
.tt-pi-card { margin-top: 6px; }
.tt-pi-card .pd-chip {
  cursor: default; pointer-events: none;
}
.tt-detail-toggle {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(55,108,130,0.15);
  cursor: default; user-select: none;
}
.tt-detail-toggle .detail-label {
  font-size: 9px; font-weight: 600; color: var(--text-tertiary);
}
.tt-detail-toggle .detail-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px;
  transition: all var(--transition); color: var(--text-tertiary);
}
.tt-detail-toggle .detail-arrow svg { width: 10px; height: 10px; transition: transform var(--transition); }
.tt-detail-toggle .detail-arrow.open svg { transform: rotate(180deg); }
.tooltip.pinned .tt-detail-toggle:hover .detail-label { color: var(--primary); }
.tooltip.pinned .tt-detail-toggle:hover .detail-arrow { background: var(--primary-light); color: var(--primary); }
.tt-detail-body {
  overflow: hidden; transition: max-height 0.25s ease; max-height: 0;
}
.tt-detail-body.open { max-height: 800px; }
.tooltip:has(.tt-detail-body.open) { width: 380px; max-width: 380px; }

/* Tooltip Meta Section (D안 — 패널 미러) */
.tooltip:has(.tooltip-meta-mirror) {
  min-width: 270px;
}
.tooltip-meta-mirror {
  margin-top: 6px;
  padding: 8px;
  background: rgba(55,108,130,0.05); border: 1px solid rgba(55,108,130,0.18);
  border-radius: var(--radius-sm);
}
.tooltip-meta-mirror .tt-meta-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.tooltip-meta-mirror .tt-meta-label {
  font-size: var(--font-xs); font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.tooltip-meta-mirror .tt-meta-count {
  font-size: var(--font-xs); font-weight: 600; color: #fff;
  background: var(--primary); padding: 1px 6px; border-radius: 8px;
  min-width: 18px; text-align: center;
}
.tooltip-meta-mirror .tt-summary-list { list-style: none; }
.tooltip-meta-mirror .tt-summary-row {
  display: flex; align-items: baseline; gap: 4px;
  padding: 2px 0; font-size: 10px; line-height: 1.3;
  border-bottom: 1px solid rgba(55,108,130,0.1);
}
.tooltip-meta-mirror .tt-summary-row:last-child { border-bottom: none; }
.tooltip-meta-mirror .tt-summary-row .item-name {
  flex: 0 0 52px; color: var(--primary); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tooltip-meta-mirror .tt-summary-row .item-val {
  flex: 1; min-width: 0; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tooltip-meta-mirror .tt-summary-row .item-empty {
  flex: 1; color: var(--text-tertiary); font-size: var(--font-xs); font-style: italic;
}
/* 추가 정보 토글 */
.tt-meta-toggle {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid rgba(55,108,130,0.15);
  cursor: pointer; user-select: none;
}
.tt-meta-toggle .detail-label {
  font-size: 9px; font-weight: 600; color: var(--text-tertiary);
}
.tt-meta-toggle:hover .detail-label { color: var(--primary); }
.tt-meta-toggle:hover .detail-arrow { background: var(--primary-light); color: var(--primary); }
.tooltip.pinned .tt-meta-toggle { pointer-events: auto; }
/* 추가 정보 펼침 */
.tooltip-meta-mirror.expanded .tt-summary-row {
  align-items: flex-start; border-bottom: 1px solid rgba(55,108,130,0.1);
}
.tooltip-meta-mirror.expanded .tt-summary-row:last-child { border-bottom: none; }
.tooltip-meta-mirror.expanded .tt-summary-row .item-val {
  white-space: pre-wrap; overflow: visible; text-overflow: unset;
  word-break: break-word;
}


/* Dark mode tooltip */
[data-theme="dark"] .tooltip {
  background: rgba(26, 32, 37, 0.90);
}
[data-theme="dark"] .tooltip-meta-mirror {
  background: rgba(141, 191, 209, 0.05);
  border-color: rgba(141, 191, 209, 0.15);
}
[data-theme="dark"] .tooltip-meta-mirror .tt-meta-count {
  background: #2A5B6F;
  color: #B8E0ED;
}
[data-theme="dark"] .tt-detail-toggle {
  border-top-color: rgba(141, 191, 209, 0.15);
}

/* ---------- Responsive / Utility ---------- */
.hidden {
  display: none !important;
}

::selection {
  background: rgba(55, 108, 130, 0.2);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Canvas Cursor Modes ---------- */
.canvas-wrapper.cursor-crosshair {
  cursor: crosshair;
}
.canvas-wrapper.cursor-grab {
  cursor: grab;
}
.canvas-wrapper.cursor-grab:active {
  cursor: grabbing;
}

/* ---------- Edge Drawing ---------- */
.edge-draw-temp {
  pointer-events: none;
}
.edge-snap-indicator {
  pointer-events: none;
  animation: snap-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes snap-pulse {
  from { opacity: 0.3; r: 5; }
  to { opacity: 0.7; r: 8; }
}

/* ---------- Save Status ---------- */
.save-dot.unsaved {
  background: var(--warning);
}

/* ---------- Disabled Buttons ---------- */
.btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Node Anchors on Edge Tool Hover ---------- */
.anchor-point {
  opacity: 0;
  transition: opacity 150ms ease;
}
.node-group:hover .anchor-point {
  opacity: 0.5;
}

/* ---------- Delete Button in Props ---------- */
.btn-delete-node:hover,
.btn-delete-edge:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* ---------- Sheet Panel (Left Panel) ---------- */
.panel-left {
  width: 200px;
  min-width: 200px;
  max-width: 400px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-slow);
  overflow: hidden;
  position: relative;
}

.panel-left.collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

.panel-left.collapsed ~ .panel-resizer {
  display: none;
}

/* Sheet Panel External Open Button */
.btn-sheet-open {
  position: absolute;
  left: 0;
  top: calc(var(--topbar-h) + var(--toolbar-h) + 8px);
  z-index: 20;
  width: 24px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.btn-sheet-open:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-sheet-open.hidden {
  display: none;
}

.panel-left .panel-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.panel-left .panel-title {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.panel-left .panel-actions {
  display: flex;
  gap: 2px;
  position: relative;
}

.panel-left .panel-actions .btn-icon {
  color: var(--text-tertiary);
}

.panel-left .panel-actions .btn-icon.active {
  background: var(--primary-light);
  color: var(--primary);
}

.btn-xs {
  padding: 3px;
}

.sheet-type-popover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  display: none;
  width: 170px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  box-shadow: var(--shadow-md);
}

.sheet-type-popover.open {
  display: block;
}

.sheet-type-popover-title {
  padding: 2px 4px 7px;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--text-tertiary);
}

.sheet-type-option {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 7px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  text-align: left;
  cursor: pointer;
}

.sheet-type-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sheet-type-check {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: transparent;
  flex-shrink: 0;
}

.sheet-type-option.active {
  color: var(--primary);
  font-weight: 600;
}

.sheet-type-option.active .sheet-type-check {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

[data-theme="dark"] .sheet-type-popover {
  background: #1A2025;
  border-color: #2A3A44;
}

[data-theme="dark"] .sheet-type-option:hover {
  background: #242C32;
}

/* Sheet List */
/* 시트 검색 / 상태 필터 바 (v1.5.12+) */
.sheet-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.sheet-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sheet-search-icon {
  position: absolute;
  left: 7px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.sheet-search-input {
  flex: 1;
  width: 100%;
  height: 26px;
  padding: 0 26px 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-sm);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.sheet-search-input::placeholder { color: var(--text-tertiary); }
.sheet-search-input:focus {
  border-color: var(--primary);
  background: var(--bg-panel);
}
.sheet-search-clear {
  position: absolute;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
}
.sheet-search-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sheet-search-clear.hidden { display: none; }

.sheet-status-chips {
  display: flex;
  gap: 3px;
  align-items: center;
}
/* 배지 — 비활성(off)은 취소선+흐림, 활성(on)은 상태색 틴트로 강하게 구분 */
.sheet-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-tertiary);
}
.sheet-status-chip:hover {
  opacity: 0.75;
  color: var(--text-secondary);
}
.sheet-status-chip.active {
  opacity: 1;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg-panel);
  border-color: var(--border);
}
/* 활성 시: 상태색 틴트 배경 + 테두리 색 — 상태별 시각 식별성 + on/off 강한 대비 */
.sheet-status-chip.active[data-status="draft"] {
  background: color-mix(in srgb, var(--status-draft) 14%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--status-draft) 45%, transparent);
}
.sheet-status-chip.active[data-status="working"] {
  background: color-mix(in srgb, var(--status-working) 16%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--status-working) 50%, transparent);
}
.sheet-status-chip.active[data-status="done"] {
  background: color-mix(in srgb, var(--status-done) 14%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--status-done) 45%, transparent);
}
.sheet-status-chip:not(.active) .sheet-status-chip-dot {
  opacity: 0.35;
}
.sheet-status-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: opacity var(--transition);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}
.sheet-status-chip-dot[data-status="draft"]   { background: var(--status-draft); }
.sheet-status-chip-dot[data-status="working"] { background: var(--status-working); }
.sheet-status-chip-dot[data-status="done"]    { background: var(--status-done); }

[data-theme="dark"] .sheet-status-chip {
  border-color: var(--border-light);
  background: transparent;
}
[data-theme="dark"] .sheet-status-chip.active {
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="dark"] .sheet-status-chip.active[data-status="draft"] {
  background: color-mix(in srgb, var(--status-draft) 22%, var(--bg-panel));
}
[data-theme="dark"] .sheet-status-chip.active[data-status="working"] {
  background: color-mix(in srgb, var(--status-working) 22%, var(--bg-panel));
}
[data-theme="dark"] .sheet-status-chip.active[data-status="done"] {
  background: color-mix(in srgb, var(--status-done) 22%, var(--bg-panel));
}

.sheet-filter-empty {
  padding: 14px 12px;
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  text-align: center;
  font-style: italic;
}
.sheet-filter-empty.hidden { display: none; }

/* 필터에 의해 숨겨진 시트/그룹/섹션 */
.sheet-item.filter-hidden,
.sheet-group.filter-hidden,
.sheet-section.filter-hidden { display: none !important; }

.sheet-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sheet-list::-webkit-scrollbar { width: 3px; }
.sheet-list::-webkit-scrollbar-track { background: transparent; }
.sheet-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sheet-list::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

[data-theme="dark"] .sheet-list { scrollbar-color: #2A3A44 transparent; }
[data-theme="dark"] .sheet-list::-webkit-scrollbar-thumb { background: #2A3A44; }
[data-theme="dark"] .sheet-list::-webkit-scrollbar-thumb:hover { background: #4A6A7A; }

/* Section (collapsible group) */
.sheet-section {
  margin-bottom: 2px;
}

.sheet-section-header {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  font-size: var(--font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  transition: color var(--transition);
}

.sheet-section-header:hover {
  color: var(--primary);
}

.sheet-section-header .section-arrow {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  transition: transform var(--transition);
  flex-shrink: 0;
  transform: rotate(90deg); /* 기본: ↓ (펼침 상태) */
}

.sheet-section.collapsed .section-arrow {
  transform: rotate(0deg); /* collapsed: → */
}

.sheet-section-header .section-count {
  margin-left: auto;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  opacity: 0.6;
}

.sheet-section-header .section-add {
  margin-left: 4px;
  padding: 1px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--transition);
}

.sheet-section-header:hover .section-add {
  opacity: 1;
}

.sheet-section-header .section-add:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

.sheet-section-body {
  overflow: hidden;
  transition: max-height var(--transition);
}

.sheet-section.collapsed .sheet-section-body {
  max-height: 0 !important;
}

/* Individual sheet item — Style 2B: Filled Rounded Pill + Left Dot */
.sheet-item {
  display: flex;
  align-items: center;
  padding: 6px 10px 6px 16px;
  margin: 1px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-base);
  color: var(--text-secondary);
  position: relative;
  transition: all var(--transition);
}

.sheet-item:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.sheet-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
  padding-left: 22px;
}

.sheet-item.selected {
  background: rgba(141, 191, 209, 0.18);
  color: var(--primary);
}
[data-theme="dark"] .sheet-item.selected {
  background: rgba(141, 191, 209, 0.10);
}

/* Empty canvas overlay — 모든 시트 삭제 시 노출 (v1.5.9+) */
.empty-sheet-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 100;
  pointer-events: auto;
}
.empty-sheet-overlay.visible {
  display: flex;
}
.empty-sheet-card {
  padding: 28px 36px;
  border-radius: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  text-align: center;
  max-width: 440px;
}
.empty-sheet-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.empty-sheet-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}
.empty-sheet-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.empty-sheet-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--primary);
  background: var(--bg-panel);
  color: var(--primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  transition: all var(--transition);
}
.empty-sheet-btn:hover {
  background: var(--primary);
  color: #fff;
}
[data-theme="dark"] .empty-sheet-card {
  background: var(--bg-panel);
  border-color: var(--border-light);
}

.sheet-item.active::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
}

/* ── 시트 상태 배지형 아이콘 (v1.5.10+) ── */
:root {
  --status-draft:   #64748b;  /* 초안 — 회색(slate) */
  --status-working: #eab308;  /* 작업중 — 노랑(yellow) */
  --status-done:    #16a34a;  /* 완료 — 진한 초록 */
}
.sheet-item-icon {
  width: 16px;
  height: 16px;
  margin-right: 7px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--status-draft);
  transition: background 0.15s;
}
.sheet-item-icon svg { stroke: #fff; }
.sheet-item[data-status="draft"]   .sheet-item-icon { background: var(--status-draft); }
.sheet-item[data-status="working"] .sheet-item-icon { background: var(--status-working); }
.sheet-item[data-status="done"]    .sheet-item-icon { background: var(--status-done); }

.sheet-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-item-name-input {
  flex: 1;
  border: 1px solid var(--primary);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: var(--font-base);
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-panel);
  outline: none;
}

.sheet-item-actions {
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity var(--transition);
}

.sheet-item:hover .sheet-item-actions {
  opacity: 1;
}

.sheet-item-actions button {
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
}

.sheet-item-actions button:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.sheet-item-actions button.delete-btn:hover {
  color: var(--danger);
}

/* ---------- Sheet Panel — Dark Mode Overrides ---------- */
[data-theme="dark"] .panel-left {
  background: var(--bg);
  border-right: 1px solid var(--border-light);
}

[data-theme="dark"] .panel-left .panel-header {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border-light);
}

[data-theme="dark"] .sheet-section-header .section-add:hover {
  background: rgba(255,255,255,0.08);
}

[data-theme="dark"] .sheet-item:hover {
  background: rgba(141, 191, 209, 0.08);
  color: var(--primary);
}

[data-theme="dark"] .sheet-item.active {
  background: rgba(141, 191, 209, 0.12);
}

[data-theme="dark"] .sheet-item-actions button:hover {
  background: rgba(141, 191, 209, 0.12);
  color: var(--primary);
}

[data-theme="dark"] .sheet-item-name-input {
  background: var(--bg);
  border-color: var(--primary);
}

/* Sheet item drag & drop */
.sheet-item[draggable="true"] {
  cursor: grab;
}
.sheet-item.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.sheet-item.drag-over-above {
  box-shadow: inset 0 2px 0 0 var(--primary);
}
.sheet-item.drag-over-below {
  box-shadow: inset 0 -2px 0 0 var(--primary);
}
.sheet-section-body.drag-over-empty {
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  min-height: 32px;
}
/* 그룹 바디 드래그 오버 */
.sheet-group-body.drag-over-empty {
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  min-height: 28px;
}
/* 그룹 헤더 드래그 오버 */
.sheet-group.drag-over-group > .sheet-group-header {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
}
/* 섹션 헤더 드래그 오버 (그룹 탈출) */
.sheet-section-header.drag-over-section-header {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  outline: 1px dashed var(--primary);
  outline-offset: -2px;
}

/* ── Sheet Divider ── */
.sheet-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 10px;
}

/* ── Sheet Group ── */
.sheet-group { margin: 1px 0; }

.sheet-group-header {
  display: flex; align-items: center;
  padding: 5px 10px; margin: 1px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  transition: all var(--transition);
  position: relative;
}
.sheet-group-header:hover { background: var(--primary-light); color: var(--text-secondary); }

.sheet-group-arrow {
  width: 10px; height: 10px; margin-right: 5px; flex-shrink: 0;
  transition: transform var(--transition-slow);
  color: var(--text-tertiary);
}
.sheet-group.collapsed .sheet-group-arrow { transform: rotate(-90deg); }

.sheet-group-name {
  flex: 1; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-group-name-input {
  flex: 1; border: 1px solid var(--primary); border-radius: 3px;
  padding: 1px 5px; font-size: var(--font-sm); font-family: inherit;
  outline: none; background: var(--bg-panel); color: var(--text-primary);
  min-width: 0;
}
.sheet-group-count {
  font-size: var(--font-xs); color: var(--text-tertiary);
  opacity: 0.7; margin-left: 4px; flex-shrink: 0;
}
.sheet-group-actions {
  display: flex; align-items: center; gap: 1px; margin-left: 2px;
  visibility: hidden; opacity: 0; transition: opacity var(--transition);
}
.sheet-group-header:hover .sheet-group-actions { visibility: visible; opacity: 1; }
.sheet-group-actions button {
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: var(--text-tertiary);
  border-radius: 3px; transition: all var(--transition); padding: 0;
}
.sheet-group-actions button:hover { background: var(--bg-hover); color: var(--primary); }

.sheet-group-body { overflow: hidden; transition: max-height var(--transition-slow); }
.sheet-group.collapsed .sheet-group-body { max-height: 0 !important; }

/* 그룹 내 시트 들여쓰기 */
.sheet-group-body .sheet-item { padding-left: 22px; }
.sheet-group-body .sheet-item.active { padding-left: 28px; }
.sheet-group-body .sheet-item.active::before { left: 16px; }

/* 그룹 추가 버튼 */
.btn-add-group {
  display: flex; align-items: center; gap: 5px;
  width: calc(100% - 12px); margin: 4px 6px;
  padding: 6px 10px; border: none; background: none;
  cursor: pointer; font-size: var(--font-sm); color: var(--text-tertiary);
  border-radius: var(--radius-sm); text-align: left; font-family: inherit;
  transition: all var(--transition);
}
.btn-add-group:hover { background: var(--primary-light); color: var(--primary); }

/* 그룹 컨텍스트 메뉴 */
.sheet-group-ctx-menu {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 4px 0; min-width: 140px;
}
.sheet-group-ctx-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 12px; border: none; background: none;
  cursor: pointer; font-size: var(--font-md); font-family: inherit;
  color: var(--text-primary); text-align: left; white-space: nowrap;
}
.sheet-group-ctx-menu button:hover { background: var(--bg-hover); }
.sheet-group-ctx-menu button.danger { color: #dc2626; }
.sheet-group-ctx-menu button.danger:hover { background: rgba(220,38,38,0.07); }
.sheet-group-ctx-menu .ctx-divider { height: 1px; background: var(--border); margin: 3px 0; }

/* 시트 컨텍스트 메뉴 (v1.5.10+) */
.sheet-ctx-menu {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 4px 0; min-width: 160px;
}
.sheet-ctx-menu .ctx-header {
  padding: 4px 12px 2px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.sheet-ctx-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 12px; border: none; background: none;
  cursor: pointer; font-size: var(--font-md); font-family: inherit;
  color: var(--text-primary); text-align: left; white-space: nowrap;
}
.sheet-ctx-menu button:hover { background: var(--bg-hover); }
.sheet-ctx-menu button.cur { background: var(--primary-light); color: var(--primary); font-weight: 500; }
.sheet-ctx-menu button.danger { color: #dc2626; }
.sheet-ctx-menu button.danger:hover { background: rgba(220,38,38,0.07); }
.sheet-ctx-menu .ctx-divider { height: 1px; background: var(--border); margin: 3px 0; }
.sheet-ctx-menu .ctx-swatch {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════════════
   표 기능 (v1.5.11+) — tables.js
   ══════════════════════════════════════════════════════════════ */

.spf-tbl-fo { overflow: visible; }

.spf-tbl {
  position: relative;
  width: calc(var(--spf-tbl-w) + var(--spf-tbl-pad-left) * 2);
  height: calc(var(--spf-tbl-h) + var(--spf-tbl-pad-top) * 2);
  padding: var(--spf-tbl-pad-top) var(--spf-tbl-pad-left);
  cursor: inherit;
  user-select: none;
  font-family: var(--font);
  box-sizing: border-box;
}

.spf-tbl-inner {
  display: grid;
  grid-template-columns: var(--spf-grid-cols);
  grid-template-rows: var(--spf-grid-rows);
  width: var(--spf-tbl-w);
  height: var(--spf-tbl-h);
  position: relative;
}

.spf-tbl-cell {
  display: flex;
  flex-direction: column;
  justify-content: var(--spf-cell-valign);
  text-align: var(--spf-cell-align);
  font-size: var(--spf-cell-font);
  padding: var(--spf-cell-padding);
  border-style: solid;
  border-color: var(--spf-tone-strong, #cbd5e0);
  border-width: 0 1px 1px 0;
  min-width: 40px;
  min-height: 22px;
  overflow: visible;
  word-break: break-word;
  color: var(--spf-tone-strong, #2d3b47);
  background: transparent;
  cursor: inherit;
}
.spf-tbl-cell[data-r="0"] { border-top-width: 1px; }
.spf-tbl-cell[data-c="0"] { border-left-width: 1px; }
.spf-tbl-cell[data-header="true"] { font-weight: 600; }

/* ── 톤 매핑 — 8 색 (data-tone 으로 한 번에 전달) ── */
.spf-tbl[data-tone="white"]     { --spf-tone-strong: var(--node-white-border); }
.spf-tbl[data-tone="actor"]     { --spf-tone-strong: var(--node-actor-border); }
.spf-tbl[data-tone="external"]  { --spf-tone-strong: var(--node-external-border); }
.spf-tbl[data-tone="storage"]   { --spf-tone-strong: var(--node-storage-border); }
.spf-tbl[data-tone="system"]    { --spf-tone-strong: var(--node-system-border); }
.spf-tbl[data-tone="processor"] { --spf-tone-strong: var(--node-processor-border); }
.spf-tbl[data-tone="process"]   { --spf-tone-strong: var(--node-process-border); }
.spf-tbl[data-tone="destroy"]   { --spf-tone-strong: var(--node-destroy-border); }
/* 흰색 톤은 글자 가독성 — 진한 슬레이트로 */
.spf-tbl[data-tone="white"]     { --spf-tone-strong: #475569; --spf-tone-border: var(--node-white-border); }
.spf-tbl[data-tone="white"] .spf-tbl-cell { border-color: var(--spf-tone-border); }

/* ── 테두리 표시/숨김 ── */
.spf-tbl[data-border="off"] .spf-tbl-cell { border-color: transparent; }

/* ── 안쪽 테두리 투명도 (외곽은 보존) ──
 * 셀의 right/bottom 테두리는 마지막 열/행 외에는 모두 "안쪽" 테두리이므로
 * 색상을 color-mix 로 흐리게 처리. data-last-c / data-last-r 가 붙은 셀은
 * 외곽이므로 원래 톤 색을 유지.
 * (셀 선택자는 white 톤 보더 색 오버라이드보다 뒤에 위치해 항상 우선 적용) */
.spf-tbl[data-border="on"][data-inner-op="0.25"] .spf-tbl-cell {
  border-right-color: color-mix(in srgb, var(--spf-tone-strong) 25%, transparent);
  border-bottom-color: color-mix(in srgb, var(--spf-tone-strong) 25%, transparent);
}
.spf-tbl[data-border="on"][data-inner-op="0.5"] .spf-tbl-cell {
  border-right-color: color-mix(in srgb, var(--spf-tone-strong) 50%, transparent);
  border-bottom-color: color-mix(in srgb, var(--spf-tone-strong) 50%, transparent);
}
/* white 톤은 셀 보더가 var(--spf-tone-border) — 안쪽 보더도 같은 베이스 사용 */
.spf-tbl[data-tone="white"][data-border="on"][data-inner-op="0.25"] .spf-tbl-cell {
  border-right-color: color-mix(in srgb, var(--spf-tone-border) 25%, transparent);
  border-bottom-color: color-mix(in srgb, var(--spf-tone-border) 25%, transparent);
}
.spf-tbl[data-tone="white"][data-border="on"][data-inner-op="0.5"] .spf-tbl-cell {
  border-right-color: color-mix(in srgb, var(--spf-tone-border) 50%, transparent);
  border-bottom-color: color-mix(in srgb, var(--spf-tone-border) 50%, transparent);
}
/* 외곽 테두리 복원 — 마지막 열/행은 항상 진하게 */
.spf-tbl[data-border="on"]:not([data-inner-op="1"]) .spf-tbl-cell[data-last-c="true"] {
  border-right-color: var(--spf-tone-strong);
}
.spf-tbl[data-border="on"]:not([data-inner-op="1"]) .spf-tbl-cell[data-last-r="true"] {
  border-bottom-color: var(--spf-tone-strong);
}
.spf-tbl[data-tone="white"][data-border="on"]:not([data-inner-op="1"]) .spf-tbl-cell[data-last-c="true"] {
  border-right-color: var(--spf-tone-border);
}
.spf-tbl[data-tone="white"][data-border="on"]:not([data-inner-op="1"]) .spf-tbl-cell[data-last-r="true"] {
  border-bottom-color: var(--spf-tone-border);
}

/* ── 셀 배경 4단 (color-mix 로 톤 색 × opacity) ── */
.spf-tbl[data-cell-op="0"]    .spf-tbl-cell { background: transparent; }
.spf-tbl[data-cell-op="0.04"] .spf-tbl-cell { background: color-mix(in srgb, var(--spf-tone-strong) 4%, transparent); }
.spf-tbl[data-cell-op="0.08"] .spf-tbl-cell { background: color-mix(in srgb, var(--spf-tone-strong) 8%, transparent); }
.spf-tbl[data-cell-op="0.15"] .spf-tbl-cell { background: color-mix(in srgb, var(--spf-tone-strong) 15%, transparent); }

/* ── 헤더 배경 4단 (셀 배경 위에 덧씌움) ── */
.spf-tbl[data-header-op="0"]    .spf-tbl-cell[data-header="true"] { background: transparent; }
.spf-tbl[data-header-op="0.04"] .spf-tbl-cell[data-header="true"] { background: color-mix(in srgb, var(--spf-tone-strong) 4%, transparent); }
.spf-tbl[data-header-op="0.08"] .spf-tbl-cell[data-header="true"] { background: color-mix(in srgb, var(--spf-tone-strong) 8%, transparent); }
.spf-tbl[data-header-op="0.15"] .spf-tbl-cell[data-header="true"] { background: color-mix(in srgb, var(--spf-tone-strong) 15%, transparent); }
.spf-tbl-cell[contenteditable="true"] {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--bg-panel);
  user-select: text;
  cursor: text;
}

.spf-tbl.selected {
  /* 외곽 테두리 표시 안 함 — 모서리/외곽/중간 핸들만 노출 */
}

/* 모서리 핸들 — 선택 시 노출 */
.spf-tbl-handle { display: none; }
.spf-tbl.selected .spf-tbl-handle {
  display: flex;
  position: absolute;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 6;
}
.spf-tbl.selected .spf-tbl-handle::before {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--primary);
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.spf-tbl.selected .spf-tbl-handle:hover::before,
.spf-tbl.selected .spf-tbl-handle.dragging::before {
  transform: scale(1.25);
}
.spf-tbl.selected .spf-tbl-handle.c-tl { left: calc(var(--spf-tbl-pad-left) - 8px);  top: calc(var(--spf-tbl-pad-top) - 8px);  cursor: nwse-resize; }
.spf-tbl.selected .spf-tbl-handle.c-tr { right: calc(var(--spf-tbl-pad-left) - 8px); top: calc(var(--spf-tbl-pad-top) - 8px);  cursor: nesw-resize; }
.spf-tbl.selected .spf-tbl-handle.c-bl { left: calc(var(--spf-tbl-pad-left) - 8px);  bottom: calc(var(--spf-tbl-pad-top) - 8px); cursor: nesw-resize; }
.spf-tbl.selected .spf-tbl-handle.c-br { right: calc(var(--spf-tbl-pad-left) - 8px); bottom: calc(var(--spf-tbl-pad-top) - 8px); cursor: nwse-resize; }

/* 외곽 테두리 손잡이 — 각 변의 가운데 ~48px 만 grip (라인 전체가 아닌 중앙 핸들만 조정 영역) */
.spf-tbl-edge {
  display: block;
  position: absolute;
  pointer-events: auto;
  z-index: 5;
  background: var(--bg-panel);
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.spf-tbl-edge.e-top,
.spf-tbl-edge.e-bottom {
  left: 50%;
  margin-left: -24px;
  width: 48px;
  height: 8px;
  cursor: row-resize;
}
.spf-tbl-edge.e-top    { top: calc(var(--spf-tbl-pad-top) - 4px); }
.spf-tbl-edge.e-bottom { bottom: calc(var(--spf-tbl-pad-top) - 4px); }
.spf-tbl-edge.e-left,
.spf-tbl-edge.e-right {
  top: 50%;
  margin-top: -24px;
  height: 48px;
  width: 8px;
  cursor: col-resize;
}
.spf-tbl-edge.e-left  { left: calc(var(--spf-tbl-pad-left) - 4px); }
.spf-tbl-edge.e-right { right: calc(var(--spf-tbl-pad-left) - 4px); }

/* 표 hover 또는 선택 시 grip 노출 */
.spf-tbl:hover .spf-tbl-edge { opacity: 0.7; }
.spf-tbl.selected .spf-tbl-edge { opacity: 1; }
.spf-tbl-edge:hover { background: var(--primary); opacity: 1; }
.spf-tbl-edge.dragging { background: var(--primary); opacity: 1; }

/* 중간 경계 핸들 */
.spf-tbl-colsep,
.spf-tbl-rowsep {
  position: absolute;
  background: transparent;
  z-index: 4;
  pointer-events: auto;
}
.spf-tbl-colsep {
  top: var(--spf-tbl-pad-top);
  height: var(--spf-sep-len);
  width: 6px;
  left: calc(var(--spf-tbl-pad-left) + var(--spf-sep-pos) - 3px);
  cursor: col-resize;
}
.spf-tbl-rowsep {
  left: var(--spf-tbl-pad-left);
  width: var(--spf-sep-len);
  height: 6px;
  top: calc(var(--spf-tbl-pad-top) + var(--spf-sep-pos) - 3px);
  cursor: row-resize;
}
.spf-tbl-colsep:hover,
.spf-tbl-rowsep:hover,
.spf-tbl-colsep.dragging,
.spf-tbl-rowsep.dragging {
  background: var(--primary);
  opacity: 0.55;
}
/* 중간 경계는 평소 투명, hover 시에만 노출 (외곽선이 메인 조정 영역) */

/* 선택 시 중앙 안내 라벨 — 셀 경계로 크기 조정 / 외곽선 이동 안내 */
.spf-tbl-hint {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(55, 108, 130, 0.88);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2px;
  pointer-events: none;
  z-index: 50;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.spf-tbl.selected .spf-tbl-hint { display: block; }
.spf-tbl.locked .spf-tbl-hint { display: none !important; }

/* 정렬 가이드 (대시 라인) */
.spf-tbl-guide {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}
.spf-tbl-guide.g-col {
  top: calc(var(--spf-tbl-pad-top) - 10px);
  left: calc(var(--spf-tbl-pad-left) + var(--spf-guide-x));
  width: var(--spf-guide-w);
  height: 3px;
  background: repeating-linear-gradient(to right, var(--danger) 0 5px, transparent 5px 9px);
}
.spf-tbl-guide.g-row {
  left: calc(var(--spf-tbl-pad-left) - 10px);
  top: calc(var(--spf-tbl-pad-top) + var(--spf-guide-y));
  height: var(--spf-guide-h);
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--danger) 0 5px, transparent 5px 9px);
}
.spf-tbl-guide-label {
  position: absolute;
  padding: 2px 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 11;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.spf-tbl-guide-label.pos-top {
  top: calc(var(--spf-tbl-pad-top) - 28px);
  left: calc(var(--spf-tbl-pad-left) + var(--spf-guide-x));
}
.spf-tbl-guide-label.pos-left {
  top: calc(var(--spf-tbl-pad-top) + var(--spf-guide-y));
  left: calc(var(--spf-tbl-pad-left) - 82px);
}

/* 리사이즈 툴팁 */
.spf-tbl-tip {
  position: fixed;
  padding: 4px 9px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1500;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  left: var(--spf-tip-x);
  top: var(--spf-tip-y);
}

/* 잠금 상태 — SP Flow 공통 잠금 스타일(노드/영역)과 통일 */
.spf-tbl.locked { cursor: inherit; }
.spf-tbl.locked .spf-tbl-cell { cursor: inherit; }
.spf-tbl.locked .spf-tbl-handle,
.spf-tbl.locked .spf-tbl-edge,
.spf-tbl.locked .spf-tbl-colsep,
.spf-tbl.locked .spf-tbl-rowsep {
  display: none !important;
}
.spf-tbl.locked.selected {
  /* 외곽 테두리 표시 안 함 — 잠금 자물쇠 아이콘만 노출 */
}
/* SP Flow 공통 패턴 — .lock-icon 과 동일한 자물쇠 SVG */
.spf-tbl-lock {
  position: absolute;
  top: calc(var(--spf-tbl-pad-top) - 18px);
  right: var(--spf-tbl-pad-left);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.spf-tbl:hover .spf-tbl-lock,
.spf-tbl.selected .spf-tbl-lock,
body.show-locks-all .spf-tbl-lock {
  opacity: 1;
}

/* body 커서 유도 (드래그 중 전역 커서) */
body.spf-body-col-resize, body.spf-body-col-resize * { cursor: col-resize !important; }
body.spf-body-row-resize, body.spf-body-row-resize * { cursor: row-resize !important; }
body.spf-body-nwse,       body.spf-body-nwse *       { cursor: nwse-resize !important; }
body.spf-body-nesw,       body.spf-body-nesw *       { cursor: nesw-resize !important; }

/* 우클릭 메뉴 */
.spf-tbl-ctx-menu {
  position: fixed;
  left: var(--spf-ctx-x);
  top: var(--spf-ctx-y);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  min-width: 180px;
  z-index: 9999;
  font-size: var(--font-md);
  font-family: var(--font);
}
.spf-tbl-ctx-menu .hdr {
  padding: 4px 12px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.spf-tbl-ctx-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-md);
  font-family: inherit;
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
}
.spf-tbl-ctx-menu button:hover { background: var(--primary-light); color: var(--primary); }
.spf-tbl-ctx-menu button.danger { color: var(--danger); }
.spf-tbl-ctx-menu button.danger:hover { background: rgba(220,38,38,0.07); }
.spf-tbl-ctx-menu .sep { height: 1px; background: var(--border); margin: 3px 0; }

/* 속성 패널 — 표 전용 보조 클래스 (공통 .prop-section-card / .swatch / .size-preset-btn / .dot-options / .prop-label-size 위에 덧입힘) */

/* 표 N×M + 우측 액션 버튼을 한 줄에 배치 */
.spf-tbl-head-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.spf-tbl-head-row .prop-inline-label { margin-bottom: 0; }
.spf-tbl-head-actions { flex: 0 0 auto; }
.spf-tbl-head-actions .size-preset-btn {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 10px;
  font-size: 10px;
}

/* prop-label-size-subrow 의 상단 dashed 분리선 제거 (단독 카드일 때) */
.spf-tbl-no-divider {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* 단일 토글 버튼 (헤더 행) — active = 표시 / 비활성 = 숨김 */
.size-preset-btn.spf-tbl-toggle {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 12px;
  font-size: 10px;
}

/* 헤더 배경 4단 — 헤더 토글 아래 항상 일정 간격 */
#tblHeaderBgGroup { margin-top: 6px; }

/* 비활성화된 그룹 (헤더 OFF 상태에서 헤더 배경 옵션) */
.size-preset-group[data-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* 정렬 3×3 그리드 — 심플 미니 아이콘 */
.spf-tbl-align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.spf-tbl-align-grid .size-preset-btn {
  flex: none;
  padding: 0;
  height: 26px;
}
.spf-tbl-align-grid .size-preset-btn svg {
  display: block;
  color: currentColor;
  width: 18px;
  height: 14px;
}

/* 컬러 swatch — 8색 그리드 (AREA_PRESETS 톤과 100% 동일 패턴) */
#tblToneGrid {
  grid-template-columns: repeat(8, 1fr);
}
#tblToneGrid .swatch[data-bg-role="white"]     { background: var(--node-white);     border-color: var(--node-white-border); }
#tblToneGrid .swatch[data-bg-role="actor"]     { background: var(--node-actor);     border-color: var(--node-actor-border); }
#tblToneGrid .swatch[data-bg-role="external"]  { background: var(--node-external);  border-color: var(--node-external-border); }
#tblToneGrid .swatch[data-bg-role="storage"]   { background: var(--node-storage);   border-color: var(--node-storage-border); }
#tblToneGrid .swatch[data-bg-role="system"]    { background: var(--node-system);    border-color: var(--node-system-border); }
#tblToneGrid .swatch[data-bg-role="processor"] { background: var(--node-processor); border-color: var(--node-processor-border); }
#tblToneGrid .swatch[data-bg-role="process"]   { background: var(--node-process);   border-color: var(--node-process-border); }
#tblToneGrid .swatch[data-bg-role="destroy"]   { background: var(--node-destroy);   border-color: var(--node-destroy-border); }

/* 다크모드 */
[data-theme="dark"] .sheet-group-header:hover { background: var(--primary-light); }
[data-theme="dark"] .sheet-group-name-input { background: var(--bg-panel); color: var(--text-primary); }

/* ---------- Panel Resizer ---------- */
.panel-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background var(--transition);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.panel-resizer:hover,
.panel-resizer.active {
  background: var(--primary);
}

/* ---------- Version Tree Modal ---------- */
.modal-version-tree {
  max-width: 860px;
  width: 90vw;
  height: 82vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.modal-version-tree .modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.modal-version-tree .modal-header:active { cursor: grabbing; }

.version-tree-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Left: tree panel ─────────────────── */
.version-tree-panel {
  /* width는 JS(renderVersionTree)에서 브랜치 수에 따라 동적으로 설정됨 */
  width: 320px;        /* 기본값 (가지 1개) */
  min-width: 280px;
  max-width: 520px;    /* 최대 자동 확장 한계 */
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: width 0.18s ease;  /* 넓어질 때 부드럽게 */
}

.version-tree-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.version-tree-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.version-tree-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;  /* 가로 스크롤 억제 — 패널 자체가 자동 확장 */
  padding: 8px 0 20px;
}

/* ── Right: wrapper (detail + settings) ── */
.version-right-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ── Right: detail panel ──────────────── */
.version-detail-panel {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--bg-panel);
  min-width: 0;
}

.vt-detail-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ── Detail card ──────────────────────── */
.vt-dcard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.vt-dcard-header {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.vt-dcard-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.vt-dcard-ver {
  font-size: 20px;
  font-weight: 700;
}

.vt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.vt-badge-auto    { background: var(--bg-hover); color: var(--text-secondary); }
.vt-badge-manual  { background: #f0fdf4; color: #22c55e; }
.vt-badge-current { background: var(--primary-light); color: var(--primary); }

[data-theme="dark"] .vt-badge-manual {
  background: #0a2714;
  color: #3fb950;
}

.vt-dcard-summary {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.vt-dcard-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

.vt-dcard-body {
  padding: 14px 18px;
}

.vt-stats {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}

.vt-stat {
  flex: 1;
  padding: 9px 6px;
  text-align: center;
  border-right: 1px solid var(--border);
}

.vt-stat:last-child { border-right: none; }

.vt-stat-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.vt-stat-lbl {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.vt-info-box {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 9px 11px;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.vt-branch-box {
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid #22c55e;
  margin-bottom: 12px;
}

.vt-branch-box-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.vt-dactions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- Version Diff Summary ---------- */
.vt-diff-box {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.vt-diff-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}
.vt-diff-row {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-light);
  gap: 7px;
}
.vt-diff-row:last-child { border-bottom: none; }
.vt-diff-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
/* Diff icon: background + color (icon badges only) */
.vt-diff-icon.vt-diff-add { background: #DCFCE7; color: #166534; }
.vt-diff-icon.vt-diff-del { background: #FEE2E2; color: #991B1B; }
.vt-diff-icon.vt-diff-mod { background: #FEF3C7; color: #92400E; }
.vt-diff-label { flex: 1; color: var(--text-secondary); }
/* Diff count: color only (no background) */
.vt-diff-count { font-weight: 600; font-size: 12px; }
.vt-diff-count.vt-diff-add { color: #16A34A; }
.vt-diff-count.vt-diff-del { color: #DC2626; }
.vt-diff-count.vt-diff-mod { color: #D97706; }

/* Dark mode diff colors */
[data-theme="dark"] .vt-diff-icon.vt-diff-add { background: rgba(34,197,94,0.15); color: #4ade80; }
[data-theme="dark"] .vt-diff-icon.vt-diff-del { background: rgba(248,113,113,0.15); color: #f87171; }
[data-theme="dark"] .vt-diff-icon.vt-diff-mod { background: rgba(251,191,36,0.15); color: #fbbf24; }
[data-theme="dark"] .vt-diff-count.vt-diff-add { color: #4ade80; }
[data-theme="dark"] .vt-diff-count.vt-diff-del { color: #f87171; }
[data-theme="dark"] .vt-diff-count.vt-diff-mod { color: #fbbf24; }

/* ---------- Snap Guide Lines ---------- */
.snap-guide-line {
  stroke: var(--primary);
  stroke-width: 0.5;
  stroke-dasharray: 4 3;
  pointer-events: none;
  opacity: 0.7;
}
.eq-spacing-arrow { pointer-events: none; }
.eq-spacing-arrow line {
  stroke: #E8646A;
  stroke-width: 0.8;
  stroke-dasharray: 4 3;
}
.eq-spacing-arrow polygon {
  fill: #E8646A;
  stroke: none;
}

/* ---------- Context Menu ---------- */
.context-menu {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: 4px 0;
  z-index: 950;
  display: none;
}

.context-menu.visible {
  display: block;
}

.context-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: var(--font-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition);
}

.context-menu-item:hover {
  background: var(--bg-hover);
}

.context-menu-item.disabled {
  color: var(--text-tertiary);
  pointer-events: none;
}

.context-shortcut {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin-left: 24px;
}

.context-menu-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ---------- Lasso Selection ---------- */
.lasso-rect {
  fill: rgba(55, 108, 130, 0.08);
  stroke: var(--primary);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

/* ---------- Inline Label Edit ---------- */
.inline-edit-overlay {
  position: absolute;
  z-index: 200;
  pointer-events: auto;
}

.inline-edit-input {
  border: 2px solid var(--primary);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  font-family: var(--font);
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-panel);
  text-align: center;
  outline: none;
  box-shadow: var(--shadow-md);
  min-width: 60px;
  max-width: 200px;
  resize: none;
  line-height: 1.4;
  overflow-y: auto;
  max-height: 150px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.inline-edit-input.memo-edit {
  max-width: none;
  max-height: none;
  text-align: left;
  overflow: hidden;
}

/* 인라인 편집 스크롤바 커스터마이징 */
.inline-edit-input::-webkit-scrollbar {
  width: 6px;
}

.inline-edit-input::-webkit-scrollbar-track {
  background: transparent;
}

.inline-edit-input::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.inline-edit-input::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ---------- Keyboard Shortcut Modal ---------- */
#shortcutModal .modal { width: 780px; max-width: 95vw; }

.shortcut-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  max-height: calc(80vh - 60px);
  overflow-y: auto;
}

.shortcut-card {
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 12px;
  border: 1px solid var(--border);
}

.shortcut-card h4 {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.shortcut-card h4 svg { flex-shrink: 0; }

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.shortcut-row kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font);
  font-size: var(--font-sm);
  color: var(--text-primary);
  white-space: nowrap;
}

.shortcut-desc {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  text-align: right;
}

/* ---------- Copyright Overlay ---------- */
.copyright-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-tertiary);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.02em;
}

/* ---------- Drag-over state ---------- */
.canvas-wrapper.drag-over {
  outline: 2px dashed var(--primary);
  outline-offset: -4px;
  background: rgba(55, 108, 130, 0.03);
}

/* ============================================================
   PI Element — 개인정보 요소 컴포넌트
   ============================================================ */

/* ---------- Panel Section ---------- */
.pi-section { padding: 0; margin-bottom: 0; }
.pi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pi-header .prop-label { margin-bottom: 0; }
.pi-count {
  font-size: var(--font-xs); font-weight: 600; color: var(--primary);
  background: var(--primary-light); padding: 1px 6px; border-radius: 8px;
  min-width: 18px; text-align: center;
}
.pi-count.zero { color: var(--text-tertiary); background: var(--bg-hover); }

/* ---------- PI Emphasis Card (D-3) ---------- */
.prop-section-card.pi-emphasis {
  background: rgba(55, 108, 130, 0.05);
  border: 1px solid rgba(55, 108, 130, 0.18);
  cursor: pointer;
}
.prop-section-card.pi-emphasis:hover {
  border-color: rgba(55, 108, 130, 0.35);
}
.pi-emphasis .prop-inline-label {
  color: var(--primary);
  font-weight: 700;
}
.pi-emphasis .pi-count {
  background: var(--primary);
  color: #fff;
}
.pi-emphasis .pi-count.zero {
  background: var(--bg-hover);
  color: var(--text-tertiary);
}
[data-theme="dark"] .prop-section-card.pi-emphasis {
  background: rgba(141, 191, 209, 0.05);
  border-color: rgba(141, 191, 209, 0.15);
}
[data-theme="dark"] .pi-emphasis .pi-count {
  background: #2A5B6F;
  color: #B8E0ED;
}
[data-theme="dark"] .pi-emphasis .pi-count.zero {
  background: var(--bg-hover);
  color: var(--text-tertiary);
}

/* ---------- Panel Mini Badges ---------- */
.pi-mini-badges { cursor: pointer; }
.pi-mini-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pi-item-badge-w); height: var(--pi-item-badge-h);
  font-size: var(--pi-item-badge-font); font-weight: 600;
  padding: 0 var(--pi-item-badge-pad-x); border-radius: var(--pi-item-badge-radius);
  background: var(--primary-light); color: var(--primary);
  border: 1px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pi-mini-cat-row { margin-bottom: 6px; }
.pi-mini-cat-row:last-child { margin-bottom: 0; }
.pi-mini-cat-label {
  display: block; font-size: 9px; font-weight: 600; color: var(--text-tertiary);
  letter-spacing: 0.2px; margin-bottom: 2px;
}
.pi-mini-cat-badges { display: flex; flex-wrap: wrap; gap: 2px; }

/* ---------- PI Required/Optional 블록 분리 (v1.5.0) ---------- */
.pi-split-c { display: flex; flex-direction: column; gap: 0; }
.pi-block { padding: 2px 0 4px; }
.pi-block:last-child { padding-bottom: 0; }
.pi-block-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 0;
  font-size: 10px; font-weight: 700;
  color: var(--primary); letter-spacing: 0.4px;
}
.pi-block-title { flex-shrink: 0; padding-left: 8px; position: relative; }
.pi-block-title::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 10px; border-radius: 2px; background: currentColor;
}
.pi-block-rule {
  flex: 1 1 auto; height: 1px;
  background: currentColor; opacity: 0.25;
}
.pi-block-count {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 15px; padding: 0 5px;
  font-size: 9.5px; font-weight: 700;
  color: #fff; background: var(--primary); border-radius: 8px;
}
.pi-block-optional .pi-block-count { background: var(--accent-optional, #b68a47); color: #fff; }
[data-theme="dark"] .pi-block-required .pi-block-count { background: #2A5B6F; color: #B8E0ED; }
[data-theme="dark"] .pi-block-optional .pi-block-count { background: #6b4e20; color: #f5d7a3; }
.pi-block-optional .pi-block-head { color: var(--accent-optional, #b68a47); }
.pi-block-body { padding: 4px 2px 0; }
/* 선택 항목은 필수와 같은 채움/글자색을 유지하고 테두리만 점선으로 구분 */
.pi-block-optional .pi-mini-badge {
  border-style: dashed !important;
  border-width: 1px !important;
  border-color: currentColor !important;
}
/* badge-wrap 내부 배지도 동일 */
.pi-block-optional .badge-wrap .pi-mini-badge {
  border-color: currentColor !important;
}
.pi-block.drag-over {
  outline: 1.5px dashed var(--primary);
  outline-offset: -2px; border-radius: 6px;
}
.pi-block-optional.drag-over { outline-color: var(--accent-optional, #b68a47); }
.pi-mini-badge[draggable="true"] { cursor: grab; user-select: none; }
.pi-mini-badge[draggable="true"]:active { cursor: grabbing; }
.pi-mini-badge.pi-dragging { opacity: 0.35; }
.pi-block-empty {
  padding: 5px 2px; font-size: 9.5px; color: var(--text-tertiary);
  font-style: italic; text-align: center;
}
[data-theme="dark"] .pi-block-optional .pi-block-head { color: #d4a85c; }
[data-theme="dark"] .pi-block-optional.drag-over { outline-color: #d4a85c; }

/* ---------- Panel Empty ---------- */
.pi-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 6px; cursor: pointer;
  border: 1px dashed var(--border); border-radius: var(--radius-xs);
  color: var(--text-tertiary); font-size: var(--font-sm);
  transition: all var(--transition); gap: 4px;
}
.pi-empty:hover { border-color: var(--primary); color: var(--primary); }
.pi-empty svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ---------- PI Detail Toggle (처리정보 상세) ---------- */
.detail-toggle {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(55,108,130,0.15);
  cursor: pointer; user-select: none;
}
.detail-toggle:hover .detail-label { color: var(--primary); }
.detail-label {
  font-size: 9px; font-weight: 600; color: var(--text-tertiary);
}
.detail-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px;
  transition: all var(--transition); color: var(--text-tertiary);
}
.detail-arrow svg { width: 10px; height: 10px; transition: transform var(--transition); }
.detail-arrow.open svg { transform: rotate(180deg); }
.detail-toggle:hover .detail-arrow { background: var(--primary-light); color: var(--primary); }
.detail-body {
  overflow: hidden; transition: max-height 0.25s ease; max-height: 0;
}
.detail-body.open { max-height: 800px; }

/* ---------- PI Detail Panel Chips ---------- */
.pd-chips {
  display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; margin-bottom: 4px; align-items: center;
}
.pd-chip {
  padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--border-light); background: var(--bg);
  color: var(--text-secondary); transition: all var(--transition);
  font-family: var(--font); white-space: nowrap;
}
.pd-chip:hover { color: var(--primary); }
.pd-chip.on {
  background: var(--primary-light); border-color: transparent;
  color: var(--primary); font-weight: 600;
}

/* ---------- PI Detail Mini Matrix (Panel) ---------- */
.pd-scroll-x { overflow-x: auto; margin-top: 4px; }
.pd-scroll-x::-webkit-scrollbar { height: 5px; }
.pd-scroll-x::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.mm { width: 100%; border-collapse: collapse; font-size: 9px; margin-top: 0; }
.mm th {
  padding: 2px 3px; font-weight: 600; color: var(--text-tertiary);
  text-align: left; border-bottom: 1px solid var(--border); font-size: 8px; white-space: nowrap;
}
.mm td {
  padding: 2px 3px; border-bottom: 1px solid var(--border-light);
  font-size: 9px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px;
}
.mm td.nm { color: var(--primary); font-weight: 600; white-space: nowrap; }
.mm td .item-empty { color: var(--text-tertiary); font-style: italic; }
.mm thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-panel); }
.mm td.nm { position: sticky; left: 0; z-index: 1; background: var(--bg-panel); }
.pi-emphasis .mm thead th:first-child { background: #F5F8F9; }
.pi-emphasis .mm td.nm { background: #F5F8F9; }

/* ---------- PI Detail Modal (처리정보 상세 모달) ---------- */
.pi-detail-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-modal); z-index: 600;
  align-items: center; justify-content: center;
}
.pi-detail-overlay.open { display: flex; }
.pi-detail-modal {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 520px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  animation: piModalIn 200ms ease;
}
.pi-detail-modal .pdm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border-light);
  cursor: grab; user-select: none;
}
.pi-detail-modal .pdm-header:active { cursor: grabbing; }
.pi-detail-modal.dragging { transition: none; }
.pi-detail-modal .pdm-title { font-size: var(--font-md); font-weight: 600; }
.pi-detail-modal .pdm-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.pi-detail-modal .pdm-body::-webkit-scrollbar { width: 4px; }
.pi-detail-modal .pdm-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Modal chip filter */
.m-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 10px; align-items: center; }
.m-chip {
  padding: 3px 8px; border-radius: 3px; font-size: var(--font-sm); font-weight: 500;
  cursor: pointer; border: 1px solid var(--border-light); background: var(--bg);
  color: var(--text-secondary); transition: all var(--transition); font-family: var(--font);
}
.m-chip:hover { border-color: var(--primary); color: var(--primary); }
.m-chip.on {
  background: var(--primary-light); border-color: var(--primary);
  color: var(--primary); font-weight: 600;
}
.m-chip-wrap { display: inline-flex; }
.m-chip-wrap[draggable] { cursor: grab; }
.m-chip-wrap[draggable]:active { cursor: grabbing; }
.m-chip-wrap.dragging { opacity: 0.4; }
.m-drop-indicator { display: inline-block; width: 2px; height: 24px; background: var(--primary); border-radius: 1px; vertical-align: middle; margin: 0 -1px; pointer-events: none; }

/* Modal matrix table */
.mtbl-wrap { overflow-x: auto; }
.mtbl-wrap::-webkit-scrollbar { height: 4px; }
.mtbl-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.mtbl { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.mtbl th {
  padding: 5px 6px; font-weight: 600; color: var(--text-secondary);
  text-align: left; border-bottom: 2px solid var(--border);
  font-size: var(--font-xs); white-space: nowrap;
}
.mtbl td { padding: 4px 5px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.mtbl tr:hover td { background: rgba(55,108,130,0.03); }
.mtbl thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-panel); }
.mtbl tbody tr:not(.cat-hd) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-panel); }
.mtbl tbody tr:not(.cat-hd):hover td:first-child { background: rgba(55,108,130,0.03); }
.mtbl .mi {
  width: 100%; border: 1px solid transparent; padding: 2px 4px;
  font-family: var(--font); font-size: var(--font-sm); color: var(--text-primary);
  background: transparent; border-radius: var(--radius-xs); outline: none;
  transition: all var(--transition);
}
.mtbl .mi::placeholder { color: var(--text-tertiary); font-style: italic; }
.mtbl .mi:hover { border-color: var(--border); background: var(--bg); }
.mtbl .mi:focus { border-color: var(--primary); background: #fff; }

/* Column header actions */
.th-col { position: relative; padding-right: 30px; cursor: default; }
.col-label { display: inline; white-space: nowrap; }
.col-acts {
  display: none; position: absolute; top: 50%; right: 2px;
  transform: translateY(-50%); gap: 2px;
}
.th-col:hover .col-acts { display: inline-flex; }
.col-act {
  border: none; background: transparent; color: var(--text-tertiary);
  cursor: pointer; font-size: 11px; padding: 1px 3px; border-radius: 2px;
  line-height: 1; transition: all var(--transition);
}
.col-act:hover { color: var(--primary); }
.col-act.del:hover { color: var(--danger); }
.col-edit-input {
  border: 1px solid var(--primary); border-radius: var(--radius-sm);
  padding: 4px 8px; font-family: var(--font); font-size: var(--font-sm);
  font-weight: 500; color: var(--text-primary); background: #fff; outline: none; width: 90px;
}

/* [+] column add */
.th-add { width: 28px; text-align: center; vertical-align: middle; }
.th-add-btn {
  width: 20px; height: 20px; border: 1px dashed var(--border); border-radius: 3px;
  background: none; color: var(--text-tertiary); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition); font-family: var(--font); line-height: 1; padding: 0;
}
.th-add-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(55,108,130,0.05); }

/* Category rows */
.cat-hd td {
  background: rgba(55,108,130,0.04); border-bottom: none;
  padding: 6px 6px; font-size: var(--font-xs); font-weight: 600; color: var(--primary);
}
.cat-count { float: right; font-size: 9px; font-weight: 500; color: var(--text-tertiary); padding-right: 4px; }

/* Dark mode overrides */
[data-theme="dark"] .detail-toggle { border-top-color: rgba(141,191,209,0.15); }
[data-theme="dark"] .pd-chip { border-color: var(--border); background: var(--bg-hover); }
[data-theme="dark"] .pd-chip.on { background: rgba(141,191,209,0.15); border-color: transparent; color: var(--primary); }
[data-theme="dark"] .m-chip { border-color: var(--border); background: var(--bg-hover); }
[data-theme="dark"] .m-chip.on { background: rgba(141,191,209,0.15); border-color: rgba(141,191,209,0.4); color: var(--primary); }
[data-theme="dark"] .mm thead th:first-child,
[data-theme="dark"] .mm td.nm { background: var(--bg-panel); }
[data-theme="dark"] .pi-emphasis .mm thead th:first-child,
[data-theme="dark"] .pi-emphasis .mm td.nm { background: #20282E; }
[data-theme="dark"] .mtbl thead th:first-child,
[data-theme="dark"] .mtbl tbody tr:not(.cat-hd) td:first-child { background: var(--bg-panel); }
[data-theme="dark"] .mtbl .mi:focus { background: var(--bg); }
[data-theme="dark"] .col-edit-input { background: var(--bg); color: var(--text-primary); }
[data-theme="dark"] .cat-hd td { background: rgba(141,191,209,0.06); }

/* ---------- PI Modal ---------- */
.pi-modal-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-modal); z-index: 600;
  align-items: center; justify-content: center;
}
.pi-modal-overlay.open { display: flex; }
.pi-modal {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: var(--pi-item-modal-w); max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  animation: piModalIn 200ms ease;
  position: relative;
}
@keyframes piModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pi-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border-light);
  cursor: grab; user-select: none;
}
.pi-modal-header:active { cursor: grabbing; }
.pi-modal.dragging { transition: none; }
.pi-modal-title { font-size: var(--font-md); font-weight: 600; }
.pi-modal-close {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.pi-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.pi-modal-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.pi-modal-selected-body {
  flex: 0 0 auto;
  overflow: visible;
  min-height: 0;
}
.pi-modal-list-body {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
}
.pi-modal-body::-webkit-scrollbar { width: 4px; }
.pi-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ---------- Modal Search Bar (v1.5.12+) ---------- */
.pi-modal-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 12px 4px;
  gap: 6px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-panel);
}
.pi-modal-search-ico {
  position: absolute;
  left: 20px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.pi-modal-search-input {
  flex: 1;
  height: 26px;
  padding: 0 64px 0 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-sm);
  outline: none;
  transition: border-color var(--transition);
}
.pi-modal-search-input::placeholder { color: var(--text-tertiary); font-size: 10px; }
.pi-modal-search-input:focus { border-color: var(--primary); background: var(--bg-panel); }
.pi-modal-search-hint {
  position: absolute;
  right: 40px;
  font-size: 10px;
  color: var(--text-tertiary);
  pointer-events: none;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
.pi-modal-search-hint.err { color: var(--danger); font-family: var(--font); }
.pi-modal-search-clear {
  position: absolute;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
}
.pi-modal-search-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.pi-modal-search-clear.hidden { display: none; }

/* 매칭 안 되는 칩 — 흐리게 + 드래그 비활성 */
.pi-chip-wrap.pi-search-dim {
  opacity: 0.2;
  pointer-events: none;
}
/* 키보드 커서 위치한 매칭 칩 — 강한 아웃라인 */
.pi-chip-wrap.pi-search-cursor .pi-chip {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* 매칭됐지만 커서 아닌 칩 — 평소 스타일 유지 */
.pi-chip-wrap.pi-search-match .pi-chip {
  /* 기본 스타일 유지 */
}

/* 결과 없음 입력창 흔들기 */
@keyframes pi-search-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.pi-modal-search-input.pi-search-shake {
  animation: pi-search-shake 0.3s ease-in-out;
  border-color: var(--danger);
}

[data-theme="dark"] .pi-modal-search { background: var(--bg-panel); }
[data-theme="dark"] .pi-modal-search-input { background: var(--bg); }
[data-theme="dark"] .pi-modal-search-input:focus { background: var(--bg-panel); }

/* ---------- Modal Footer ---------- */
.pi-modal-footer {
  padding: 8px 14px; border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 4px;
}
.pi-footer-row { display: flex; gap: 4px; align-items: center; }
.pi-footer-actions { display: flex; gap: 4px; justify-content: flex-end; }
.pi-modal-footer.edit-mode { background: #fdf8e8; border-top: 1px solid #e8c840; }
[data-theme="dark"] .pi-modal-footer.edit-mode { background: #2a2820; border-top-color: #8a7530; }

/* ---------- Selected Bar ---------- */
.pi-sel-area {
  min-height: 28px; padding: 4px 6px;
  background: var(--bg); border-radius: var(--radius-xs);
  border: 1px solid var(--border); margin-bottom: 10px;
  position: relative; overflow: visible;
}
.pi-sel-area .empty { font-size: var(--font-sm); color: var(--text-tertiary); text-align: center; padding: 2px 0; }
.pi-sel-area .pi-mini-cat-badges { display: flex; flex-wrap: wrap; gap: 3px; }
.pi-sel-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pi-item-badge-w); height: var(--pi-item-badge-h); padding: 0 var(--pi-item-badge-pad-x); border-radius: var(--pi-item-badge-radius);
  font-size: var(--pi-item-badge-font); font-weight: 600;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Category ---------- */
.pi-cat { margin-bottom: 8px; }
.pi-cat:last-of-type { margin-bottom: 0; }
.pi-cat-title {
  font-size: var(--font-xs); font-weight: 600; color: var(--text-tertiary);
  letter-spacing: 0.3px; margin-bottom: 4px; padding-left: 2px;
  display: flex; align-items: center; gap: 4px;
}
.pi-cat-color-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid currentColor;
}
.pi-cat-line { flex: 1; height: 1px; background: var(--border-light); }
/* ---------- Category Edit ---------- */
.pi-cat-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  color: var(--text-tertiary); cursor: pointer;
  font-size: var(--font-xs); line-height: 1;
  visibility: hidden;
}
.pi-cat-title:hover .pi-cat-edit-btn { visibility: visible; }
.pi-cat-edit-btn:hover { color: var(--primary); }
.pi-cat-title.editing {
  gap: 3px; flex-wrap: nowrap;
}
.pi-cat-edit-input {
  padding: 1px 4px; border: 1px solid var(--primary);
  border-radius: 3px; font-size: var(--font-xs); font-weight: 600;
  font-family: var(--font); width: 70px; outline: none;
  color: var(--text-primary); background: var(--bg-white);
}
.pi-cat-edit-action {
  padding: 1px 5px; border: 1px solid var(--border);
  border-radius: 3px; font-size: 9px; font-family: var(--font);
  cursor: pointer; background: var(--bg-white); color: var(--text-secondary);
  white-space: nowrap;
}
.pi-cat-edit-action:hover { background: var(--bg-hover); }
.pi-cat-edit-action.save { color: var(--primary); border-color: var(--primary); }
.pi-cat-edit-action.save:hover { background: var(--primary-light); }
.pi-cat-edit-action.delete { color: var(--danger); border-color: var(--danger); }
.pi-cat-edit-action.delete:hover { background: #fef2f2; }
.pi-cat-edit-action.cancel { color: var(--text-tertiary); }
/* ---------- Category Restore ---------- */
.pi-cat-restore { text-align: center; margin-top: 6px; }
.pi-cat-restore-btn {
  padding: 3px 8px; border: 1px dashed var(--border);
  border-radius: 4px; font-size: 9px; font-family: var(--font);
  cursor: pointer; background: none; color: var(--text-tertiary);
}
.pi-cat-restore-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pi-cat-chips { display: flex; flex-wrap: wrap; gap: 4px; transition: background 0.15s, border-color 0.15s; border: 1px dashed transparent; border-radius: 4px; padding: 2px; margin: -2px; }
/* ---------- Drag & Drop ---------- */
.pi-cat-chips.drag-over { border-color: var(--primary); background: var(--primary-light); }
.pi-chip-wrap.dragging { opacity: 0.4; }
.pi-chip-wrap[draggable] { cursor: grab; }
.pi-chip-wrap[draggable]:active { cursor: grabbing; }
.pi-drop-indicator { display: inline-block; width: 2px; height: 26px; background: var(--primary); border-radius: 1px; vertical-align: middle; margin: 0 -1px; pointer-events: none; }

/* ---------- Chip ---------- */
.pi-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pi-item-badge-w); height: var(--pi-item-badge-h); border-radius: var(--pi-item-badge-radius);
  font-size: var(--pi-item-badge-font); font-weight: 500; font-family: var(--font);
  cursor: pointer; border: 1px solid transparent;
  background: var(--bg-hover); color: var(--text-secondary);
  transition: all var(--transition); user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pi-chip:hover { filter: brightness(0.92); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.pi-chip.selected {
  font-weight: 600;
}
.pi-chip.avail-from-src {
  opacity: 0.45; border: 1px dashed var(--border);
  background: var(--bg-hover); color: var(--text-tertiary);
}
.pi-chip.avail-from-src:hover { opacity: 0.7; border-color: var(--primary); color: var(--text-secondary); }
.pi-chip-wrap:has(.pi-chip.avail-from-src) .chip-dot { opacity: 0.5; }
[data-theme="dark"] .pi-chip:hover { filter: brightness(1.2); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
[data-theme="dark"] .pi-chip.avail-from-src { background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--text-tertiary); }
.pi-chip.custom-item { /* 다른 항목과 동일 표기 */ }
.pi-chip.editing {
  outline: 2px solid var(--primary); outline-offset: 1px;
  animation: piEditPulse 1s ease infinite;
}
@keyframes piEditPulse {
  0%, 100% { outline-color: var(--primary); }
  50% { outline-color: transparent; }
}

/* ---------- Chip Edit Icon ---------- */
.pi-chip-wrap { position: relative; display: inline-flex; }
.pi-chip-wrap .chip-edit-btn {
  position: absolute; top: -5px; right: -5px;
  display: none; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  color: var(--text-tertiary); cursor: pointer; z-index: 10;
  font-size: var(--font-xs); line-height: 1;
}
.pi-chip-wrap:hover .chip-edit-btn { display: inline-flex; }
.pi-chip-wrap .chip-edit-btn:hover { color: var(--primary); }

/* ---------- Custom Input ---------- */
.pi-custom-input {
  padding: 4px 6px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font-family: var(--font); font-size: var(--font-sm);
  color: var(--text-primary); background: var(--bg); outline: none;
}
.pi-custom-input:focus { border-color: var(--primary); }
.pi-custom-input::placeholder { font-size: var(--font-xs); }
.pi-custom-btn {
  padding: 4px 8px; border: none; border-radius: var(--radius-xs);
  background: var(--primary); color: #fff;
  font-family: var(--font); font-size: var(--font-sm);
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pi-custom-btn:hover { background: var(--primary-hover); }
[data-theme="dark"] .pi-custom-btn { background: #2A4D5C; color: #C8E2EC; }
[data-theme="dark"] .pi-custom-btn:hover { background: #336070; color: #DCF0F8; }
.pi-custom-btn.cancel {
  background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border);
}
.pi-custom-btn.cancel:hover { background: var(--bg); color: var(--text-primary); }
.pi-custom-btn.delete {
  background: var(--bg-hover); color: var(--danger); border: 1px solid var(--danger);
}
.pi-custom-btn.delete:hover { background: #fef2f2; }

/* ---------- Category Dropdown ---------- */
.pi-cat-select { position: relative; flex-shrink: 0; }
.pi-cat-select-trigger {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 6px; width: 70px; height: 26px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg); cursor: pointer;
  font-size: var(--font-sm); color: var(--text-tertiary);
}
.pi-cat-select-trigger.has-value { color: var(--text-primary); }
.pi-cat-select-trigger svg { margin-left: auto; flex-shrink: 0; color: var(--text-tertiary); }
.pi-cat-select-trigger span {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pi-cat-dropdown {
  display: none; position: absolute; bottom: calc(100% + 4px); left: 0;
  width: 120px; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-xs); box-shadow: var(--shadow-md);
  z-index: 20; max-height: 160px; overflow-y: auto;
}
.pi-cat-dropdown.open { display: block; }
.pi-cat-dd-item {
  padding: 4px 8px; font-size: var(--font-sm); cursor: pointer;
  color: var(--text-secondary);
}
.pi-cat-dd-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.pi-cat-dd-item.active { color: var(--primary); font-weight: 600; }
.pi-cat-dd-item.add { color: var(--primary); font-weight: 600; border-top: 1px solid var(--border-light); }
.pi-cat-dd-sep { height: 0; }

/* ---------- PI Propagation Modal ---------- */
.pi-prop-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-modal); z-index: 600;
  align-items: center; justify-content: center;
}
.pi-prop-overlay.open { display: flex; }
.pi-prop-modal {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 320px; max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  animation: piModalIn 200ms ease;
}
.pi-prop-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border-light);
  cursor: grab; user-select: none;
}
.pi-prop-header:active { cursor: grabbing; }
.pi-prop-title { font-size: var(--font-md); font-weight: 600; }
.pi-prop-close {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.pi-prop-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.pi-prop-flow {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: rgba(55,108,130,0.04);
  border-bottom: 1px solid var(--border-light); font-size: var(--font-xs);
}
.pi-prop-flow-node { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--primary); }
.pi-prop-flow-node .node-dot { width: 6px; height: 6px; border-radius: 50%; }
.pi-prop-flow-arrow { color: var(--text-tertiary); font-size: 12px; }
.pi-prop-flow-count { margin-left: auto; font-size: 9px; color: var(--text-tertiary); }
.pi-prop-quick {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-bottom: 1px solid var(--border-light);
}
.pi-prop-quick-label {
  font-size: var(--font-xs); font-weight: 600; color: var(--text-tertiary);
  letter-spacing: 0.3px; margin-right: auto;
}
.pi-prop-quick-btn {
  padding: 2px 8px; border-radius: var(--radius-xs);
  font-size: var(--font-xs); font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: all var(--transition);
  border: 1px solid var(--border-light); background: var(--bg-panel);
  color: var(--text-secondary);
}
.pi-prop-quick-btn:hover { color: var(--primary); border-color: var(--primary); }
.pi-prop-quick-btn.active {
  background: var(--primary-light); border-color: var(--primary); color: var(--primary);
}
.pi-prop-body {
  flex: 1; overflow-y: auto; padding: 10px 14px;
}
.pi-prop-body::-webkit-scrollbar { width: 4px; }
.pi-prop-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.pi-prop-body .pi-cat { margin-bottom: 8px; }
.pi-prop-body .pi-cat:last-of-type { margin-bottom: 0; }
.pi-prop-footer {
  padding: 8px 14px; border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.pi-prop-count { font-size: var(--font-sm); color: var(--text-tertiary); }
.pi-prop-count strong { color: var(--primary); }
.pi-prop-actions { display: flex; gap: 4px; }

/* -- PI Prop: Extra Items Section -- */
.pp-extra-section { border-top: 1px dashed var(--border-light); margin-top: 6px; }
.pp-extra-toggle {
  display: flex; align-items: center; gap: 6px; padding: 8px 0;
  cursor: pointer; user-select: none;
}
.pp-extra-icon {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--text-tertiary);
  background: var(--bg-hover); border: 1px solid var(--border-light); transition: all .2s;
}
.pp-extra-toggle.open .pp-extra-icon { background: var(--primary-light, #e8f4f8); border-color: var(--primary); color: var(--primary); }
.pp-extra-label { font-size: 10px; font-weight: 600; color: var(--text-tertiary); }
.pp-extra-toggle.open .pp-extra-label { color: var(--primary); }
.pp-extra-hint { font-size: 9px; color: var(--text-tertiary); margin-left: auto; }
.pp-extra-count {
  min-width: 14px; height: 14px; border-radius: 7px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f59e0b; color: #fff; font-size: 8px; font-weight: 700;
}
.pp-extra-chevron {
  width: 10px; height: 10px; margin-left: auto; color: var(--text-tertiary); transition: transform .2s;
}
.pp-extra-toggle.open .pp-extra-chevron { transform: rotate(180deg); color: var(--primary); }
.pp-extra-body { display: none; padding: 4px 0; }
.pp-extra-body.open { display: block; }
.pp-extra-body .pi-cat { margin-bottom: 6px; }
.pp-extra-body .pi-cat:last-of-type { margin-bottom: 0; }
.pp-extra-chip { border-style: dashed !important; }
.pp-extra-chip.selected { background: #f59e0b !important; border-color: #f59e0b !important; border-style: solid !important; color: #fff !important; }
.pp-extra-tag {
  display: inline-block; font-size: 8px; font-weight: 700; color: #f59e0b;
  background: #fffbeb; padding: 1px 5px; border-radius: 3px; margin-left: 4px;
}
[data-theme="dark"] .pp-extra-icon { background: var(--bg-hover); border-color: var(--border); }
[data-theme="dark"] .pp-extra-chip.selected { background: #d97706 !important; border-color: #d97706 !important; }
[data-theme="dark"] .pp-extra-tag { background: rgba(245,158,11,0.15); color: #fbbf24; }

[data-theme="dark"] .pi-prop-modal { background: var(--bg-panel); border-color: var(--border); }
[data-theme="dark"] .pi-prop-flow { background: rgba(141,191,209,0.05); }
[data-theme="dark"] .pi-prop-quick-btn { border-color: var(--border); background: var(--bg-hover); }
[data-theme="dark"] .pi-prop-quick-btn.active { background: rgba(141,191,209,0.15); border-color: rgba(141,191,209,0.4); color: var(--primary); }

/* -- PI Prop: Source Group -- */
.src-grp { margin-bottom: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-xs); overflow: hidden; }
.src-grp:last-of-type { margin-bottom: 0; }
.src-grp-hdr {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; background: rgba(55,108,130,0.04);
  cursor: pointer; user-select: none;
}
.src-grp-hdr:hover { background: rgba(55,108,130,0.08); }
.src-grp-dot {
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: #fff; background: #334155; flex-shrink: 0;
}
.src-grp-name { font-size: 10px; font-weight: 600; color: #334155; flex: 1; }
.src-grp-cnt { font-size: 9px; color: var(--text-tertiary); }
.src-grp-check { display: flex; align-items: center; gap: 3px; font-size: 9px; color: var(--text-tertiary); }
.src-grp-check.all { color: var(--primary); font-weight: 600; }
.src-grp-toggle {
  font-size: 9px; font-weight: 600; font-family: var(--font);
  color: var(--text-tertiary); background: none; border: none; cursor: pointer; padding: 0 2px;
}
.src-grp-toggle:hover { color: var(--primary); }
.src-grp-body { padding: 6px 10px; }
.src-grp.collapsed .src-grp-body { display: none; }
.src-grp-chevron {
  width: 10px; height: 10px; transition: transform .2s ease; color: var(--text-tertiary);
}
.src-grp.collapsed .src-grp-chevron { transform: rotate(-90deg); }
.src-grp-direct .src-grp-dot { background: var(--primary); font-size: 9px; }
.src-grp-direct .src-grp-name { color: var(--primary); }
[data-theme="dark"] .src-grp { border-color: var(--border); }
[data-theme="dark"] .src-grp-hdr { background: rgba(141,191,209,0.05); }
[data-theme="dark"] .src-grp-hdr:hover { background: rgba(141,191,209,0.1); }
[data-theme="dark"] .src-grp-dot { background: #1E2830; border: 1.5px solid #5A9BB0; color: #8DBFD1; }
[data-theme="dark"] .src-grp-direct .src-grp-dot { background: #1E2830; border-color: #8DBFD1; color: #8DBFD1; }
[data-theme="dark"] .src-grp-name { color: var(--text-primary); }

/* ---------- PI Source Tracking ---------- */
.src-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.src-title { font-size: 9px; font-weight: 700; color: var(--text-secondary); }
.src-toggle {
  font-size: 9px; color: var(--primary); cursor: pointer; font-weight: 600;
  user-select: none; display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 4px; border-radius: 3px; transition: background .15s;
}
.src-toggle:hover { background: var(--primary-light); }
.src-toggle svg { width: 10px; height: 10px; transition: transform .25s ease; }
.src-toggle.open svg { transform: rotate(180deg); }

/* Source chips (buttons) */
.src-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.src-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  background: var(--bg-panel); color: #334155;
  border: 1px solid var(--border);
  cursor: pointer; transition: all .15s; user-select: none;
}
.src-chip:hover { background: var(--bg-hover); border-color: #b0bec5; color: var(--text-primary); }
.src-chip .dot-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  font-size: 8px; font-weight: 800; color: white;
  background: #376C82; transition: background .15s;
}
.src-chip.active { background: #dbeafe; border-color: #2563eb; color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.src-chip.active .dot-num { background: white; border-color: #2563eb; color: #2563eb; }

/* Source detail area (expandable) */
.src-detail-area { overflow: hidden; transition: max-height .3s ease, opacity .25s ease; max-height: 0; opacity: 0; }
.src-detail-area.open { opacity: 1; max-height: 200px; }
.src-detail-scroll { overflow-y: auto; padding-right: 2px; }
.src-detail-scroll::-webkit-scrollbar { width: 3px; }
.src-detail-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.src-group { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dashed var(--border-light); }
.src-group:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.src-group-hdr { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.src-group-line { flex: 1; height: 1px; background: var(--border-light); }
.src-group-cnt { font-size: 8px; color: var(--text-tertiary); font-weight: 500; }
.src-group-items { display: flex; flex-wrap: wrap; gap: 3px; }
.src-item {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pi-item-badge-w); height: var(--pi-item-badge-h); padding: 0 var(--pi-item-badge-pad-x); border-radius: var(--pi-item-badge-radius);
  font-size: var(--pi-item-badge-font); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .15s;
}
.src-item.from-src { background: #f1f5f9; color: #334155; }
.src-item.from-direct { background: var(--primary-light); color: var(--primary); }
.dot-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 11px; height: 11px; border-radius: 50%;
  font-size: 7px; font-weight: 800; color: white; background: #376C82; transition: background .15s;
}
.src-group.hl-group .src-item.from-src { background: #dbeafe; color: #2563eb; font-weight: 700; }
.src-group.hl-group .dot-sm { background: white; border-color: #2563eb; color: #2563eb; }

/* Number dots on chips */
.chip-dot {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid #E8EEF2; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 800; color: white; line-height: 1;
  background: #376C82; transition: all .2s; pointer-events: none;
}
.chip-dot.overflow { background: #64748b; cursor: pointer; pointer-events: auto; font-size: 6px; }

/* Dot popover */
.dot-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: rgba(15,23,42,.92); color: white; font-size: 10px;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  z-index: 100; line-height: 1.7; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.dot-pop.show { opacity: 1; }
.dot-pop::after {
  content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid rgba(15,23,42,.92);
}

/* C style: glow highlight */
.chip-dot.hl {
  background: white; border-color: #2563eb; color: #2563eb; transform: scale(1.3);
  box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 0 8px rgba(37,99,235,.25); z-index: 5;
}
.pi-chip-wrap.hl-wrap .pi-chip.selected {
  background: #dbeafe; border-color: #2563eb; color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}

/* Badge wrap (props panel & tooltip) */
.badge-wrap { position: relative; display: inline-flex; }
.badge-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid #E8EEF2; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 6px; font-weight: 800; color: white; line-height: 1;
  background: #376C82; top: -4px; pointer-events: none; transition: all .2s;
}
.badge-dot.overflow { background: #64748b; font-size: 5px; cursor: pointer; pointer-events: auto; }
.badge-dot.hl {
  background: white; border-color: #2563eb; color: #2563eb; transform: scale(1.3);
  box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 0 8px rgba(37,99,235,.25); z-index: 5;
}
.badge-wrap.hl-wrap .pi-mini-badge { background: #dbeafe !important; color: #2563eb !important; font-weight: 700; }

/* Source summary (props panel & tooltip) */
.src-summary { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(55,108,130,0.12); }
.src-summary-label {
  font-size: 9px; font-weight: 600; color: var(--text-tertiary);
  margin-bottom: 3px; display: flex; align-items: center; gap: 4px;
}
.src-summary-count {
  font-size: 8px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); padding: 0 4px; border-radius: 6px;
}
.src-summary-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.src-summary-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 5px; border-radius: 3px; font-size: 9px; font-weight: 600;
  background: transparent; color: #64748b; border: none;
}
.src-summary-chip .dot-num,
.src-summary-chip .dot-num-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  font-size: 7px; font-weight: 800; color: white; background: #376C82;
  box-shadow: 0 1px 2px rgba(55,108,130,0.3);
}
.src-direct-chip { background: var(--primary-light); color: var(--primary); font-weight: 600; }

/* Props panel source chips (interactive) */
.props-src-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 600;
  background: var(--bg-panel); color: #334155;
  border: 1px solid var(--border); cursor: pointer; transition: all .15s; user-select: none;
}
.props-src-chip:hover { background: var(--bg-hover); border-color: #b0bec5; }
.props-src-chip .dot-num-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 11px; height: 11px; border-radius: 50%;
  font-size: 7px; font-weight: 800; color: white; background: #376C82; transition: background .15s;
}
.props-src-chip.active { background: #dbeafe; border-color: #2563eb; color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.props-src-chip.active .dot-num-sm { background: white; border-color: #2563eb; color: #2563eb; }

/* ---------- Dark mode: PI Source Tracking ---------- */
/* 모달: 출처 칩 */
[data-theme="dark"] .src-chip { color: var(--text-secondary); }
[data-theme="dark"] .src-chip .dot-num { background: #1E2830; border: 1.5px solid #5A9BB0; color: #8DBFD1; }
[data-theme="dark"] .src-chip:hover { border-color: rgba(141,191,209,0.4); }
[data-theme="dark"] .src-chip.active { background: rgba(37,99,235,0.15); border-color: #3b82f6; color: #93c5fd; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
[data-theme="dark"] .src-chip.active .dot-num { background: #1E2830; border: 1.5px solid #3b82f6; color: #93c5fd; }
/* 모달: 상세보기 항목 */
[data-theme="dark"] .src-item.from-src { background: rgba(148,163,184,0.12); color: var(--text-secondary); }
[data-theme="dark"] .src-item.from-direct { background: rgba(141,191,209,0.15); color: var(--primary); }
[data-theme="dark"] .src-group.hl-group .src-item.from-src { background: rgba(59,130,246,0.2); color: #93c5fd; }
[data-theme="dark"] .src-group.hl-group .dot-sm { background: #1E2830; border-color: #3b82f6; color: #93c5fd; }
[data-theme="dark"] .dot-sm { background: #1E2830; border: 1.5px solid #5A9BB0; color: #8DBFD1; }
[data-theme="dark"] .src-group-hdr span[style*="color:#334155"] { color: var(--text-secondary) !important; }
/* 숫자 dot (N안: 패널동색 + 프라이머리 테두리/숫자) */
[data-theme="dark"] .chip-dot { background: #1E2830; border-color: #5A9BB0; color: #8DBFD1; }
[data-theme="dark"] .badge-dot { background: #1E2830; border-color: #5A9BB0; color: #8DBFD1; }
[data-theme="dark"] .badge-dot.hl { background: #1E2830; border-color: #3b82f6; color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.2), 0 0 8px rgba(59,130,246,.2); }
[data-theme="dark"] .chip-dot.hl { background: #1E2830; border-color: #3b82f6; color: #93c5fd; }
/* 하이라이트 */
[data-theme="dark"] .badge-wrap.hl-wrap .pi-mini-badge { background: rgba(59,130,246,0.2) !important; color: #93c5fd !important; }
[data-theme="dark"] .pi-chip-wrap.hl-wrap .pi-chip.selected { background: rgba(59,130,246,0.2); border-color: #3b82f6; color: #93c5fd; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
/* 툴팁: 출처 요약 칩 (N안: 아웃라인) */
[data-theme="dark"] .src-summary-chip { color: #8DBFD1; }
[data-theme="dark"] .src-summary-chip .dot-num,
[data-theme="dark"] .src-summary-chip .dot-num-sm { background: #1E2830; border: 1.5px solid #5A9BB0; color: #8DBFD1; box-shadow: none; }
[data-theme="dark"] .src-direct-chip { background: rgba(141,191,209,0.15); color: var(--primary); }
/* 속성 패널: 출처 칩 */
[data-theme="dark"] .props-src-chip { color: var(--text-secondary); }
[data-theme="dark"] .props-src-chip .dot-num-sm { background: #1E2830; border: 1.5px solid #5A9BB0; color: #8DBFD1; }
[data-theme="dark"] .props-src-chip:hover { border-color: rgba(141,191,209,0.4); }
[data-theme="dark"] .props-src-chip.active { background: rgba(37,99,235,0.15); border-color: #3b82f6; color: #93c5fd; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
[data-theme="dark"] .props-src-chip.active .dot-num-sm { background: #1E2830; border: 1.5px solid #3b82f6; color: #93c5fd; }

/* ---------- PI Filter Button (Variant A) ---------- */
.btn-pi-filter {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 8px; gap: 0;
  border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font); font-size: var(--font-sm); font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  letter-spacing: 0.2px;
}
.btn-pi-filter:hover { background: var(--bg-hover); }
.btn-pi-filter.active { background: var(--primary-light); color: var(--primary); }
.btn-pi-filter.filtering { background: var(--primary); color: white; }

/* ---------- PI Filter Popover ---------- */
.pi-filter-popover {
  display: none; position: fixed; z-index: 500;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: var(--pi-item-modal-w); max-height: 420px; flex-direction: column;
  animation: piPopIn 150ms ease;
}
.pi-filter-popover.open { display: flex; }
@keyframes piPopIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pi-filter-popover::before {
  content: ''; position: absolute; top: -6px; left: var(--pf-arrow-left, 50%); transform: translateX(-50%);
  width: 12px; height: 6px;
  background: var(--bg-panel);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px; border-bottom: 1px solid var(--border-light);
  cursor: grab; user-select: none;
}
.pf-header:active { cursor: grabbing; }
.pi-filter-popover.pf-dragged::before { display: none; }
.pf-title { font-size: var(--font-md); font-weight: 600; }
.pf-close {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
}
.pf-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.pf-sel-area {
  min-height: 28px; padding: 4px 6px; margin: 10px 10px 0;
  background: var(--bg); border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}
.pf-sel-area .empty { font-size: var(--font-sm); color: var(--text-tertiary); text-align: center; padding: 2px 0; }
.pf-sel-badges { display: flex; flex-wrap: wrap; gap: 3px; }
.pf-sel-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 6px; border-radius: 3px;
  font-size: var(--font-xs); font-weight: 600;
  background: var(--primary-light); color: var(--primary);
  white-space: nowrap;
}

.pf-body { flex: 1; overflow-y: auto; padding: 10px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.pf-body::-webkit-scrollbar { width: 4px; }
.pf-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.pf-cat { margin-bottom: 8px; }
.pf-cat:last-child { margin-bottom: 0; }
.pf-cat-title {
  font-size: var(--font-xs); font-weight: 600; color: var(--text-tertiary);
  letter-spacing: 0.3px; margin-bottom: 4px; padding-left: 2px;
  display: flex; align-items: center; gap: 4px;
}
.pf-cat-line { flex: 1; height: 1px; background: var(--border-light); }
.pf-cat-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.pf-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pi-item-badge-w); height: var(--pi-item-badge-h); border-radius: var(--pi-item-badge-radius);
  font-size: var(--pi-item-badge-font); font-weight: 500; font-family: var(--font);
  cursor: pointer; border: 1px solid transparent;
  background: var(--bg-hover); color: var(--text-tertiary);
  transition: all var(--transition); user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-chip:hover { filter: brightness(0.92); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.pf-chip.in-use {
  font-weight: 600;
}
.pf-chip.selected {
  font-weight: 600;
}

.pf-cat-count {
  font-size: 9px; font-weight: 600; color: var(--primary);
  margin-left: 2px;
}

.pf-cat-toggle {
  font-size: 9px; color: var(--text-tertiary); cursor: pointer;
  padding: 1px 5px; border-radius: 3px; border: none; background: none;
  font-family: var(--font); white-space: nowrap;
}
.pf-cat-toggle:hover { color: var(--primary); background: var(--primary-light); }

.pf-footer {
  padding: 8px 14px; border-top: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.pf-footer-left { display: flex; align-items: center; gap: 6px; }
.pf-footer-info { font-size: var(--font-xs); color: var(--text-tertiary); }
.pf-btn-reset {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg); font-family: var(--font); font-size: var(--font-sm);
  color: var(--text-secondary); cursor: pointer;
}
.pf-btn-reset:hover { background: var(--bg-hover); border-color: var(--text-tertiary); }
.pf-toggle {
  display: flex; border-radius: var(--radius-xs); overflow: hidden;
  border: 1px solid var(--border);
}
.pf-toggle-btn {
  padding: 4px 12px; border: none;
  background: var(--bg); font-family: var(--font);
  font-size: var(--font-sm); font-weight: 500; cursor: pointer;
  color: var(--text-secondary); transition: all var(--transition);
}
.pf-toggle-btn + .pf-toggle-btn { border-left: 1px solid var(--border); }
.pf-toggle-btn:hover { background: var(--bg-hover); }
.pf-toggle-btn.active[data-action="apply"] {
  background: var(--primary); color: white; font-weight: 600;
}
.pf-toggle-btn.active[data-action="off"] {
  background: var(--text-tertiary); color: white; font-weight: 600;
}

/* ---------- PI Filter — Dark Mode ---------- */
[data-theme="dark"] .btn-pi-filter { color: #adbec7; }
[data-theme="dark"] .btn-pi-filter:hover { background: #242C32; }
[data-theme="dark"] .btn-pi-filter.active { background: #2A3A44; color: #8DBFD1; }
[data-theme="dark"] .btn-pi-filter.filtering { background: #2A4D5C; color: #C8E2EC; }

[data-theme="dark"] .pi-filter-popover {
  background: #1A2025; border-color: #2A3238;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
[data-theme="dark"] .pi-filter-popover::before { background: #1A2025; }
[data-theme="dark"] .pf-header { border-color: #1E2529; }
[data-theme="dark"] .pf-sel-area { background: #131719; border-color: #2A3238; }
[data-theme="dark"] .pf-sel-badge { background: #2A3A44; color: #8DBFD1; }

[data-theme="dark"] .pf-chip:hover { filter: brightness(1.2); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
[data-theme="dark"] .pf-cat-count { color: #5A9AB5; }
[data-theme="dark"] .pf-chip.selected {
  background: #2A3A44; border-color: #4A7A8C; color: #8DBFD1;
}

[data-theme="dark"] .pf-footer { border-color: #1E2529; }
[data-theme="dark"] .pf-btn-reset {
  background: #242C32; border-color: #2A3238; color: #adbec7;
}
[data-theme="dark"] .pf-btn-reset:hover { background: #2A3238; border-color: #3A4A52; }

[data-theme="dark"] .pf-toggle { border-color: #2A3238; }
[data-theme="dark"] .pf-toggle-btn { background: #242C32; color: #839ba9; }
[data-theme="dark"] .pf-toggle-btn + .pf-toggle-btn { border-color: #2A3238; }
[data-theme="dark"] .pf-toggle-btn:hover { background: #2A3238; }
[data-theme="dark"] .pf-toggle-btn.active[data-action="apply"] {
  background: #2A4D5C; color: #C8E2EC;
}
[data-theme="dark"] .pf-toggle-btn.active[data-action="off"] {
  background: #3A4A52; color: #adbec7;
}

[data-theme="dark"] .pf-cat-toggle:hover { color: #8DBFD1; background: #2A3A44; }

/* ---------- PI Button Dot Separator ---------- */
.pi-dot-sep {
  font-weight: 900; font-size: 9px; line-height: 1;
  margin: 0 0.5px; opacity: 0.5;
}

/* ---------- PI Badge Toggle Button (PI.B) ---------- */
.btn-pi-badge {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 8px; gap: 0;
  border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font); font-size: var(--font-sm); font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  letter-spacing: 0.2px;
}
.btn-pi-badge:hover { background: var(--bg-hover); }
.btn-pi-badge.active { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .btn-pi-badge { color: #adbec7; }
[data-theme="dark"] .btn-pi-badge:hover { background: #242C32; }
[data-theme="dark"] .btn-pi-badge.active { background: #2A3A44; color: #8DBFD1; }

/* ---------- PI Badge Popover ---------- */
.pi-badge-wrap { display: inline-flex; }
.pi-badge-popover {
  display: none; position: fixed;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  padding: 8px; width: 180px; z-index: 100;
  font-family: var(--font);
}
.pi-badge-popover.open { display: block; }

.pb-section-label {
  font-size: 9px; font-weight: 700; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 2px 5px;
}
.pb-toggle-group {
  display: flex; gap: 4px; padding-bottom: 6px;
}
.pb-toggle-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; height: 28px; border-radius: 6px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-tertiary); font-size: 11px; font-weight: 500;
  font-family: var(--font); cursor: pointer; transition: all var(--transition);
  white-space: nowrap;
}
.pb-toggle-btn svg { flex-shrink: 0; }
.pb-toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.pb-toggle-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.pb-sync-row {
  display: flex; gap: 4px; padding-bottom: 6px;
}
.pb-sync-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; height: 24px; border-radius: 5px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-tertiary); font-size: 10px; font-weight: 500;
  font-family: var(--font); cursor: pointer; transition: all var(--transition);
  white-space: nowrap;
}
.pb-sync-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.pb-sync-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.pb-sync-btn.disabled { opacity: 0.32; pointer-events: none; }
.pb-sync-icon {
  font-size: 9px; font-weight: 800; font-family: monospace;
  background: var(--text-tertiary); color: var(--bg-panel);
  border-radius: 3px; padding: 0 3px; line-height: 14px; flex-shrink: 0;
}
.pb-sync-btn.active .pb-sync-icon { background: var(--primary); color: #fff; }

.pb-divider { height: 1px; background: var(--border-light); margin: 4px 0; }

.pb-row { padding: 4px 2px; display: flex; flex-direction: column; gap: 5px; }
.pb-row + .pb-row { padding-top: 2px; }
.pb-row-label {
  font-size: 9px; font-weight: 700; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pb-step-group { display: flex; gap: 3px; }
.pb-step-btn {
  flex: 1; height: 24px; border-radius: 5px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 10px; font-weight: 500;
  font-family: var(--font); cursor: pointer; transition: all var(--transition);
}
.pb-step-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.pb-step-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 600; }

[data-theme="dark"] .pi-badge-popover {
  background: #1A2228; border-color: #2A3A44; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .pb-section-label,
[data-theme="dark"] .pb-row-label { color: #4A6A7A; }
[data-theme="dark"] .pb-toggle-btn { border-color: #2A3A44; color: #7A9BAC; }
[data-theme="dark"] .pb-toggle-btn:hover { background: #242C32; color: #adbec7; }
[data-theme="dark"] .pb-toggle-btn.active { background: #2A3A44; border-color: #4A6A7A; color: #8DBFD1; }
[data-theme="dark"] .pb-sync-btn { border-color: #2A3A44; color: #7A9BAC; }
[data-theme="dark"] .pb-sync-btn:hover { background: #242C32; color: #adbec7; }
[data-theme="dark"] .pb-sync-btn.active { background: #2A3A44; border-color: #4A6A7A; color: #8DBFD1; }
[data-theme="dark"] .pb-sync-btn.active .pb-sync-icon { background: #4A6A7A; color: #C8E8F2; }
[data-theme="dark"] .pb-sync-icon { background: #4A6A7A; }
[data-theme="dark"] .pb-step-btn { border-color: #2A3A44; color: #7A9BAC; }
[data-theme="dark"] .pb-step-btn:hover { background: #242C32; color: #adbec7; }
[data-theme="dark"] .pb-step-btn.active { background: #2A3A44; border-color: #4A6A7A; color: #8DBFD1; }

/* pb-opacity-step / pb-fontsize-step — pb-step-btn 스타일 상속, 별도 규칙 불필요 */

/* ─── Label Size Toggle (라벨 글자 크기) — PI.B 패턴 동일 적용 ─── */
.label-size-wrap { display: inline-flex; position: relative; }

.btn-label-size {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  height: 28px; padding: 0 9px;
  border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font); font-size: var(--font-sm); font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  letter-spacing: 0.2px;
}
.btn-label-size:hover { background: var(--bg-hover); }
.btn-label-size.active { background: var(--primary-light); color: var(--primary); }
.btn-label-size .ls-aa { font-weight: 800; font-size: 13px; line-height: 1; }
.btn-label-size .ls-aa-small { font-size: 9px; line-height: 1; }
.btn-label-size .ls-current {
  font-size: 10px; font-weight: 700; color: var(--primary); margin-left: 2px;
}
[data-theme="dark"] .btn-label-size { color: #adbec7; }
[data-theme="dark"] .btn-label-size:hover { background: #242C32; }
[data-theme="dark"] .btn-label-size.active { background: #2A3A44; color: #8DBFD1; }
[data-theme="dark"] .btn-label-size .ls-current { color: #8DBFD1; }

.label-size-popover {
  display: none; position: fixed;
  background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 4px 0; min-width: 300px; z-index: 100;
  font-family: var(--font);
}
.label-size-popover.open { display: block; }
.ls-header {
  padding: 6px 10px 4px;
  font-size: 11px; font-weight: 700; color: var(--text-primary);
}
.ls-row {
  display: flex; align-items: center;
  padding: 0 10px; height: 30px; gap: 6px;
}
.ls-row-label {
  font-size: 10px; font-weight: 600; color: var(--text-tertiary);
  white-space: nowrap; flex-shrink: 0; width: 58px;
}
.ls-steps { display: flex; gap: 3px; }
/* 팝오버 사용자 지정 px 입력 */
.ls-custom {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  transition: all var(--transition);
}
.ls-custom:focus-within,
.ls-custom.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.ls-custom-input {
  width: 34px; height: 18px;
  border: none; outline: none;
  background: transparent;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  padding: 0;
  -moz-appearance: textfield;
}
.ls-custom-input::-webkit-outer-spin-button,
.ls-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ls-custom.active .ls-custom-input { color: var(--primary); }
.ls-custom-unit {
  font-size: 9px; font-weight: 600; color: var(--text-tertiary);
}
.ls-custom.active .ls-custom-unit { color: var(--primary); }
.ls-custom-input[disabled] { opacity: 0.35; }
.ls-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 22px;
  border-radius: 4px; border: 1px solid var(--border);
  font-weight: 700; color: var(--text-secondary);
  background: transparent; cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
}
.ls-step[data-size="M"]  { font-size: 10px; }
.ls-step[data-size="L"]  { font-size: 11px; }
.ls-step[data-size="XL"] { font-size: 12px; }
.ls-step:hover { background: var(--bg-hover); color: var(--text-primary); }
.ls-step.active {
  background: var(--primary-light); color: var(--primary); border-color: var(--primary);
}
.ls-footer-note {
  padding: 6px 10px; font-size: 10px; color: var(--text-tertiary); line-height: 1.4;
  border-top: 1px solid var(--border); margin-top: 4px;
}

/* 범위 토글 ([전체] | [선택 항목만]) */
.ls-scope-toggle {
  display: flex; gap: 2px;
  margin: 2px 10px 4px;
  padding: 2px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.ls-scope-btn {
  flex: 1;
  background: transparent; border: none;
  padding: 4px 6px;
  font-size: 10px; font-weight: 600;
  color: var(--text-tertiary);
  border-radius: 3px; cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
}
.ls-scope-btn:hover { color: var(--text-primary); }
.ls-scope-btn.active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ls-scope-hint {
  padding: 0 10px 6px;
  font-size: 9.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.ls-step[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

[data-theme="dark"] .label-size-popover {
  background: #1A2228; border-color: #2A3A44; box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
[data-theme="dark"] .ls-header { color: #adbec7; }
[data-theme="dark"] .ls-step { color: #7A9BAC; border-color: #2A3A44; }
[data-theme="dark"] .ls-step:hover { background: #242C32; color: #adbec7; }
[data-theme="dark"] .ls-step.active { background: #2A3A44; color: #8DBFD1; border-color: #4A6A7A; }
[data-theme="dark"] .ls-scope-toggle { background: #1f272d; border-color: #2A3A44; }
[data-theme="dark"] .ls-scope-btn { color: #7A9BAC; }
[data-theme="dark"] .ls-scope-btn.active { background: #2A3A44; color: #8DBFD1; }
[data-theme="dark"] .ls-scope-hint { color: #64748b; }
[data-theme="dark"] .ls-custom { border-color: #2A3A44; }
[data-theme="dark"] .ls-custom:focus-within,
[data-theme="dark"] .ls-custom.active { background: #1f3440; border-color: #4A6A7A; }
[data-theme="dark"] .ls-custom-input { color: #adbec7; }
[data-theme="dark"] .ls-custom.active .ls-custom-input { color: #8DBFD1; }
[data-theme="dark"] .ls-custom-unit { color: #64748b; }
[data-theme="dark"] .ls-custom.active .ls-custom-unit { color: #8DBFD1; }

/* ─── Properties Panel — 공통 힌트 텍스트 (섹션 하단 설명) ─── */
.prop-section-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-top: 6px;
}
.prop-section-hint b { color: var(--text-secondary); font-weight: 600; }
[data-theme="dark"] .prop-section-hint { color: #64748b; }
[data-theme="dark"] .prop-section-hint b { color: #adbec7; }

/* ─── Properties Panel — 라벨 크기 서브-행 (라벨 카드 내부에 통합) ─── */
.prop-label-size-subrow {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.prop-label-size-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}
.prop-label-size-header .prop-inline-label {
  margin-bottom: 0;
}
.prop-label-size-inherit {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.prop-label-size-inherit b {
  color: var(--text-secondary);
  font-weight: 700;
}
[data-theme="dark"] .prop-label-size-subrow { border-top-color: #2A3A44; }
[data-theme="dark"] .prop-label-size-inherit { color: #64748b; }
[data-theme="dark"] .prop-label-size-inherit b { color: #adbec7; }

/* ─── 속성 패널 — 라벨 크기 사용자 지정(px) 입력 ─── */
.prop-label-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  transition: all var(--transition);
}
.prop-label-custom:focus-within,
.prop-label-custom.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.prop-label-custom-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  flex: 1;
}
.prop-label-custom.active .prop-label-custom-text { color: var(--primary); }
.prop-label-custom-input {
  width: 44px;
  height: 20px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  padding: 0;
  -moz-appearance: textfield;
}
.prop-label-custom-input::-webkit-outer-spin-button,
.prop-label-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prop-label-custom.active .prop-label-custom-input { color: var(--primary); }
.prop-label-custom-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.prop-label-custom.active .prop-label-custom-unit { color: var(--primary); }
[data-theme="dark"] .prop-label-custom { border-color: #2A3A44; }
[data-theme="dark"] .prop-label-custom:focus-within,
[data-theme="dark"] .prop-label-custom.active { background: #1f3440; border-color: #4A6A7A; }
[data-theme="dark"] .prop-label-custom-text { color: #64748b; }
[data-theme="dark"] .prop-label-custom.active .prop-label-custom-text { color: #8DBFD1; }
[data-theme="dark"] .prop-label-custom-input { color: #adbec7; }
[data-theme="dark"] .prop-label-custom.active .prop-label-custom-input { color: #8DBFD1; }
[data-theme="dark"] .prop-label-custom-unit { color: #64748b; }
[data-theme="dark"] .prop-label-custom.active .prop-label-custom-unit { color: #8DBFD1; }

/* ---------- PI Category Color Swatches (중분류 색상 선택) ---------- */
.pi-cat-color-row {
  display: flex; align-items: center; gap: 4px; width: 100%; margin-top: 4px;
}
.pi-cat-color-label {
  font-size: 9px; color: var(--text-tertiary); font-weight: 500;
  white-space: nowrap; min-width: 20px;
}
.pi-cat-color-swatches { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; }
.pi-cat-color-sw {
  width: 18px; height: 13px; border-radius: 3px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all 0.12s; position: relative;
}
.pi-cat-color-sw:hover { transform: scale(1.12); }
.pi-cat-color-sw.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.pi-cat-color-sw-inner { width: 100%; height: 100%; border-radius: 1.5px; }
.pi-cat-color-preview {
  display: flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0;
}
.pi-cat-color-preview-tag {
  padding: 1px 5px; border-radius: 2.5px; font-size: 8px; font-weight: 600;
  font-family: var(--font);
}
[data-theme="dark"] .pi-cat-color-label { color: #64748b; }

/* ========== PI.D — 개인정보 정의 관리 모달 ========== */

/* PI.D 툴바 버튼 */
.btn-pi-def {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 8px; gap: 0;
  border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font); font-size: var(--font-sm); font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  letter-spacing: 0.2px;
}
.btn-pi-def:hover { background: var(--bg-hover); }
[data-theme="dark"] .btn-pi-def { color: #adbec7; }
[data-theme="dark"] .btn-pi-def:hover { background: #242C32; }

/* Overlay */
.picd-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-modal); z-index: 650;
  align-items: center; justify-content: center;
}
.picd-overlay.open { display: flex; }

/* Modal */
.picd-modal {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: var(--pi-item-modal-w); max-height: calc(100vh - 60px); display: flex; flex-direction: column;
  animation: picdIn 200ms ease;
}
@keyframes picdIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.picd-header {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
  cursor: grab; user-select: none;
}
.picd-header:active { cursor: grabbing; }
.picd-modal.dragging { transition: none; }
.picd-title { font-size: var(--font-md); font-weight: 700; }
.picd-count-wrap { font-size: var(--font-xs); color: var(--text-tertiary); font-weight: 500; }
.picd-close {
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); margin-left: auto;
}
.picd-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Body */
.picd-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.picd-body::-webkit-scrollbar { width: 4px; }
.picd-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Category */
.picd-cat { margin-bottom: 10px; }
.picd-cat:last-of-type { margin-bottom: 0; }
.picd-cat-title {
  font-size: var(--font-xs); font-weight: 600; color: var(--text-tertiary);
  letter-spacing: 0.3px; margin-bottom: 5px; padding-left: 2px;
  display: flex; align-items: center; gap: 4px;
}
.picd-cat-title.editing { flex-wrap: wrap; }
.picd-cat-count {
  font-size: 9px; font-weight: 700; color: var(--text-tertiary);
  background: var(--bg-hover); border-radius: 8px; padding: 0 5px;
  line-height: 16px; min-width: 16px; text-align: center;
}
.picd-color-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid currentColor;
}
.picd-cat-line { flex: 1; height: 1px; background: var(--border-light); }
.picd-cat-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 10px; cursor: pointer;
  color: var(--text-tertiary); visibility: hidden; border-radius: 2px;
  transition: all var(--transition);
}
.picd-cat-title:hover .picd-cat-edit-btn { visibility: visible; }
.picd-cat-edit-btn:hover { color: var(--primary); }

/* Category Edit */
.picd-cat-edit-input {
  height: 22px; font-size: var(--font-xs); padding: 0 6px;
  border: 1px solid var(--primary); border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text-primary); font-weight: 600; width: 70px;
}
.picd-cat-action {
  height: 22px; padding: 0 8px; font-size: 10px; font-weight: 600;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text-secondary); cursor: pointer;
}
.picd-cat-action:hover { background: var(--bg-hover); }
.picd-cat-action.save { color: var(--primary); border-color: var(--primary); }
.picd-cat-action.save:hover { background: var(--primary-light); }
.picd-cat-action.delete { color: var(--danger); border-color: var(--danger); }
.picd-cat-action.delete:hover { background: #fef2f2; }
.picd-cat-action.cancel { color: var(--text-tertiary); }

/* Color Row */
.picd-color-row {
  display: flex; align-items: center; gap: 4px; width: 100%; margin-top: 4px;
}
.picd-color-label {
  font-size: 9px; color: var(--text-tertiary); font-weight: 500;
  white-space: nowrap; min-width: 20px;
}
.picd-color-swatches { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; }
.picd-color-sw {
  width: 18px; height: 13px; border-radius: 3px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all 0.12s; position: relative;
}
.picd-color-sw:hover { transform: scale(1.12); }
.picd-color-sw.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.picd-color-sw-inner { width: 100%; height: 100%; border-radius: 1.5px; }
.picd-color-preview {
  display: flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0;
}
.picd-color-preview-tag {
  padding: 1px 5px; border-radius: 2.5px; font-size: 8px; font-weight: 600;
  font-family: var(--font);
}

/* Chips */
.picd-cat-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  transition: background 0.15s, border-color 0.15s;
  border: 1px dashed transparent; border-radius: 4px;
  padding: 2px; margin: -2px;
  min-height: 26px;
}
.picd-cat-chips.drag-over-cat { border-color: var(--primary); background: var(--primary-light); }
.picd-chip-wrap {
  position: relative; display: inline-flex;
  cursor: grab;
}
.picd-chip-wrap:active { cursor: grabbing; }
.picd-chip-wrap.dragging { opacity: 0.4; }
.picd-chip-wrap.drag-over { box-shadow: -2px 0 0 var(--primary); }
.picd-cat-title[draggable] { cursor: grab; }
.picd-cat-title[draggable]:active { cursor: grabbing; }
.picd-cat-title.dragging { opacity: 0.4; }
.picd-cat-title.drag-over-cat { border-top: 2px solid var(--primary); padding-top: 2px; }
.picd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pi-item-badge-w); height: var(--pi-item-badge-h); border-radius: var(--pi-item-badge-radius);
  font-size: var(--pi-item-badge-font); font-weight: 500; font-family: var(--font);
  background: var(--bg-hover); border: 1px solid transparent;
  color: var(--text-secondary); cursor: default;
  transition: all var(--transition);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  user-select: none;
}
.picd-chip:hover { filter: brightness(0.92); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.picd-chip.editing { border-color: var(--primary) !important; background: var(--primary-light) !important; color: var(--primary) !important; }
.picd-chip-edit {
  position: absolute; top: -5px; right: -5px;
  display: none; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  color: var(--text-tertiary); cursor: pointer; z-index: 10;
  font-size: var(--font-xs); line-height: 1;
}
.picd-chip-wrap:hover .picd-chip-edit { display: inline-flex; }
.picd-chip-edit:hover { color: var(--primary); }

/* Restore */
.picd-restore { margin-top: 8px; text-align: center; }
.picd-restore-btn {
  font-size: 10px; color: var(--text-tertiary); background: none; border: none;
  cursor: pointer; text-decoration: underline;
}
.picd-restore-btn:hover { color: var(--primary); }

/* Footer */
.picd-footer {
  padding: 8px 8px; border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 4px;
}
.picd-footer-row { display: flex; gap: 4px; align-items: center; }
.picd-footer-actions { display: flex; gap: 4px; justify-content: flex-end; }
.picd-footer.edit-mode { background: #fdf8e8; border-top: 1px solid #e8c840; }
[data-theme="dark"] .picd-footer.edit-mode { background: #2a2820; border-top-color: #8a7530; }

.picd-input {
  height: 26px; padding: 0 6px; font-size: var(--font-xs);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text-primary);
  font-family: var(--font);
}
.picd-input:focus { border-color: var(--primary); outline: none; }

.picd-btn {
  height: 26px; padding: 0 10px; font-size: var(--font-xs); font-weight: 600;
  border: 1px solid var(--primary); border-radius: var(--radius-xs);
  background: var(--primary); color: white; cursor: pointer;
  transition: all var(--transition);
}
.picd-btn:hover { opacity: 0.85; }
.picd-btn.delete { background: var(--danger); border-color: var(--danger); }
.picd-btn.cancel { background: var(--bg); border-color: var(--border); color: var(--text-secondary); }
.picd-btn.cancel:hover { background: var(--bg-hover); }
[data-theme="dark"] .picd-btn { background: #2A4D5C; border-color: #3A6A7A; color: #C8E2EC; }
[data-theme="dark"] .picd-btn:hover { background: #3A5D6C; }
[data-theme="dark"] .picd-btn.delete { background: #7F1D1D; border-color: #991B1B; color: #FCA5A5; }
[data-theme="dark"] .picd-btn.cancel { background: #1E2529; border-color: #2A3238; color: #adbec7; }
[data-theme="dark"] .picd-btn.cancel:hover { background: #242C32; }

/* Category Dropdown */
.picd-cat-select { position: relative; flex-shrink: 0; }
.picd-cat-select-trigger {
  display: flex; align-items: center; gap: 3px; cursor: pointer;
  padding: 0 6px; height: 26px; min-width: 56px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font-size: var(--font-xs); color: var(--text-tertiary);
  background: var(--bg); transition: all var(--transition);
}
.picd-cat-select-trigger.has-value { color: var(--text-primary); }
.picd-cat-select-trigger svg { margin-left: auto; flex-shrink: 0; color: var(--text-tertiary); }
.picd-cat-select-trigger span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px;
}
.picd-cat-dropdown {
  display: none; position: absolute; bottom: 100%; left: 0; min-width: 120px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg); z-index: 700; max-height: 180px; overflow-y: auto;
  margin-bottom: 2px;
}
.picd-cat-dropdown.open { display: block; }
.picd-dd-item {
  padding: 5px 10px; font-size: var(--font-xs); cursor: pointer;
  color: var(--text-secondary); transition: background var(--transition);
}
.picd-dd-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.picd-dd-item.active { color: var(--primary); font-weight: 600; }
.picd-dd-item.add { color: var(--primary); font-weight: 600; border-top: 1px solid var(--border-light); }
.picd-dd-sep { height: 0; border-top: 1px solid var(--border-light); margin: 2px 0; }

/* Dark mode */
[data-theme="dark"] .picd-color-label { color: #64748b; }
[data-theme="dark"] .picd-cat-action.delete:hover { background: #2D1515; }
[data-theme="dark"] .picd-input { background: #1E2529; border-color: #2A3238; color: #ebeff1; }
[data-theme="dark"] .picd-input:focus { border-color: #8DBFD1; }
[data-theme="dark"] .picd-cat-select-trigger { background: #1E2529; border-color: #2A3238; color: #8a9faa; }
[data-theme="dark"] .picd-cat-select-trigger.has-value { color: #ebeff1; }
[data-theme="dark"] .picd-cat-dropdown { background: #1A2228; border-color: #2A3238; }
[data-theme="dark"] .picd-dd-item { color: #adbec7; }
[data-theme="dark"] .picd-dd-item:hover { background: #242C32; color: #ebeff1; }
[data-theme="dark"] .picd-dd-item.active { color: #8DBFD1; }
[data-theme="dark"] .picd-dd-item.add { color: #8DBFD1; border-top-color: #2A3238; }
[data-theme="dark"] .picd-cat-edit-input { background: #1E2529; border-color: #8DBFD1; color: #ebeff1; }
[data-theme="dark"] .picd-cat-action { background: #1E2529; border-color: #2A3238; color: #adbec7; }
[data-theme="dark"] .picd-cat-action:hover { background: #242C32; }
[data-theme="dark"] .picd-cat-action.save { color: #8DBFD1; border-color: #8DBFD1; }
[data-theme="dark"] .picd-cat-action.save:hover { background: #2A3A44; }
[data-theme="dark"] .picd-cat-action.delete { color: #FCA5A5; border-color: #FCA5A5; }
[data-theme="dark"] .picd-chip:hover { filter: brightness(1.2); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
[data-theme="dark"] .picd-chip.editing { border-color: #8DBFD1 !important; background: #2A3A44 !important; color: #8DBFD1 !important; }
[data-theme="dark"] .picd-restore-btn { color: #8a9faa; }
[data-theme="dark"] .picd-restore-btn:hover { color: #8DBFD1; }

/* ---------- PI.D Open Button (PI모달 footer) ---------- */
.picd-open-btn {
  width: 100%; padding: 4px 8px;
  font-family: var(--font); font-size: var(--font-xs); font-weight: 600;
  color: var(--text-tertiary); background: none; cursor: pointer;
  border: 1px solid var(--border-light); border-radius: var(--radius-xs);
  transition: all var(--transition); letter-spacing: 0.2px;
}
.picd-open-btn:hover { color: var(--primary); background: var(--primary-light); border-color: var(--primary); }
[data-theme="dark"] .picd-open-btn { border-color: #2A3238; color: #8a9faa; }
[data-theme="dark"] .picd-open-btn:hover { color: #8DBFD1; background: #2A3A44; border-color: #4A6A7A; }

/* ---------- PI Filter Canvas Effect ---------- */
.edge-group, .node-group, .edge-flow-group, .crossing-group { transition: opacity 0.35s ease; }
.edge-group.pi-dimmed { opacity: 0.18; }
.edge-label-group.pi-dimmed { opacity: 0.18; }
.edge-flow-group.pi-dimmed { opacity: 0.18; }
.crossing-group.pi-dimmed { opacity: 0.18; }
.node-group.pi-dimmed { opacity: 0.25; }
.edge-group.pi-matched .edge-path { stroke: var(--primary) !important; stroke-width: 2.2 !important; }

/* ---------- Vulnerability Triangle Badge ---------- */
.vuln-badge { cursor: pointer; }
.vuln-badge polygon { transition: filter 0.15s; fill: #dc2626; stroke: #fff; stroke-width: 1.5; }
.vuln-badge.warn polygon { fill: #e08a00; }
.vuln-badge.etc-only polygon { fill: #9ca3af; }
.vuln-badge text { fill: #fff; }
.vuln-badge:hover polygon {
  filter: drop-shadow(0 0 6px rgba(239,68,68,0.6));
}
.vuln-badge.warn:hover polygon { filter: drop-shadow(0 0 6px rgba(224,138,0,0.5)); }
.vuln-badge.etc-only:hover polygon { filter: drop-shadow(0 0 6px rgba(156,163,175,0.5)); }
/* Dark mode — muted fills, dark stroke (fd-canvas-badge 스타일과 통일) */
[data-theme="dark"] .vuln-badge polygon {
  fill: #b91c1c;
  stroke: #1a2332;
  stroke-width: 2;
}
[data-theme="dark"] .vuln-badge.warn polygon { fill: #b45309; }
[data-theme="dark"] .vuln-badge.etc-only polygon { fill: #6b7280; }
[data-theme="dark"] .vuln-badge text { fill: #FCA5A5; }
[data-theme="dark"] .vuln-badge.warn text { fill: #FDBA74; }
[data-theme="dark"] .vuln-badge.etc-only text { fill: #9CA3AF; }
[data-theme="dark"] .vuln-badge:hover polygon {
  filter: drop-shadow(0 0 6px rgba(239,68,68,0.35));
}
[data-theme="dark"] .vuln-badge.warn:hover polygon { filter: drop-shadow(0 0 6px rgba(251,146,60,0.35)); }
[data-theme="dark"] .vuln-badge.etc-only:hover polygon { filter: drop-shadow(0 0 6px rgba(156,163,175,0.25)); }

/* ---------- PI Tooltip ---------- */
#pi-tooltip {
  position: fixed; pointer-events: none; z-index: 700;
  background: rgba(0,0,0,0.82); color: #fff;
  font-size: 11.5px; font-weight: 400; line-height: 1.45;
  padding: 7px 9px; border-radius: var(--radius-xs);
  white-space: pre-line; max-width: 340px;
  opacity: 0; transition: opacity 0s;
}
#pi-tooltip.show { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   Save Method Modal (A) / Overwrite Confirm Modal (B)
   ══════════════════════════════════════════════════════════════ */
.save-method-modal .modal-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.save-method-modal .header-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.save-opt-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.save-opt-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.save-opt-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.save-opt-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}
.save-opt-icon {
  width: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.save-opt-text { flex: 1; min-width: 0; }
.save-opt-label { font-size: var(--font-sm); font-weight: 600; color: var(--text-primary); }
.save-opt-desc { font-size: var(--font-xs); color: var(--text-tertiary); margin-top: 2px; line-height: 1.4; }
.save-chk-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  cursor: pointer;
}
.save-chk-input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  margin: 0;
}
.save-chk-label {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  user-select: none;
}
.save-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.overwrite-confirm-modal {
  max-width: 360px;
}

/* ══════════════════════════════════════════════════════════════
   Version Settings (C) — inside version history modal
   ══════════════════════════════════════════════════════════════ */
.vt-settings {
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.vt-settings-header {
  padding: 10px 16px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-light);
}
.vt-settings-header:hover {
  background: var(--bg-hover);
}
.vt-settings-chevron {
  margin-left: auto;
  transition: transform var(--transition);
}
.vt-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-light);
}
.vt-settings-row:last-child { border-bottom: none; }
.vt-settings-label {
  font-size: var(--font-xs);
  color: var(--text-primary);
}
.vt-settings-sub {
  display: block;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
/* 저장 방식 row — 세로 배치 */
.vt-settings-row--col {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
/* 가로 아이콘 카드 */
.vt-hcard-group {
  display: flex;
  gap: 5px;
}
.vt-hcard-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 6px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-panel);
  white-space: nowrap;
}
.vt-hcard-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.vt-hcard-item:hover .vt-hcard-icon { color: var(--primary); }
.vt-hcard-item:hover .vt-hcard-label { color: var(--primary); }
.vt-hcard-item.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.vt-hcard-icon {
  width: 12px;
  height: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.vt-hcard-item.active .vt-hcard-icon { color: var(--primary); }
.vt-hcard-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
}
.vt-hcard-item.active .vt-hcard-label {
  color: var(--primary);
  font-weight: 700;
}
.vt-toggle-sw {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  position: relative;
  background: var(--border);
  cursor: pointer;
  transition: all var(--transition);
}
.vt-toggle-sw.on {
  background: var(--primary);
}
[data-theme="dark"] .vt-toggle-sw {
  background: #2A3238;
}
[data-theme="dark"] .vt-toggle-sw.on {
  background: #2A5B6F;
}
[data-theme="dark"] .vt-toggle-sw::after {
  background: #D0E4EC;
}
.vt-toggle-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left var(--transition);
}
.vt-toggle-sw.on::after {
  left: 16px;
}
.btn-unlink {
  padding: 3px 8px;
  font-size: 10px;
  border-radius: var(--radius-xs);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: var(--font);
}
.btn-unlink:hover {
  color: var(--danger);
  border-color: var(--danger);
}
/* 자동 저장 안내 */
.vt-settings-info {
  margin: 8px 12px 10px;
  padding: 10px 12px;
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--radius-sm);
}
.vt-settings-info-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}
.vt-settings-info-list {
  margin: 0;
  padding-left: 14px;
  list-style: none;
}
.vt-settings-info-list li {
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-secondary);
  position: relative;
  padding-left: 2px;
  margin-bottom: 3px;
}
.vt-settings-info-list li::before {
  content: '·';
  position: absolute;
  left: -10px;
  color: var(--primary);
  font-weight: 700;
}
.vt-settings-info-list li:last-child { margin-bottom: 0; }
.vt-settings-info-list li strong {
  color: var(--text-primary);
  font-weight: 600;
}
.vt-settings-info-list li em {
  font-style: normal;
  font-weight: 600;
  color: var(--primary);
}

/* ─── 포커스 인디케이터 복원 (접근성) ─── */
.prop-input:focus-visible,
.prop-select:focus-visible,
.project-name:focus-visible,
.modal-body input:focus-visible,
.modal-body select:focus-visible,
.modal-body textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

/* ─── 개인정보 흐름표 모달 ─── */
.pi-flowtable-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pi-flowtable-modal {
  background: var(--bg-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,0.25));
  display: flex;
  flex-direction: column;
  max-width: 95vw;
  max-height: 90vh;
  min-width: 720px;
  min-height: min(640px, 80vh);
  width: 92vw;
  height: 80vh;
  overflow: hidden;
}
.pi-flowtable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
  background: var(--bg-panel);
}
.pi-flowtable-header:active { cursor: grabbing; }
.pi-flowtable-header h3 {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
}

.pi-flowtable-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pi-flowtable-close {
  margin-left: 4px;
}

.pi-flowtable-body {
  overflow: auto;
  flex: 1;
  padding: 0 16px;
  min-height: 0;
  background: var(--bg);
  /* 공통 스크롤 스타일 — 프로젝트 전역 패턴 (thin + 테마 연동) */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.pi-flowtable-body::-webkit-scrollbar { width: 6px; height: 6px; }
.pi-flowtable-body::-webkit-scrollbar-track { background: transparent; }
.pi-flowtable-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.pi-flowtable-body::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
.pi-flowtable-body::-webkit-scrollbar-corner { background: transparent; }
[data-theme="dark"] .pi-flowtable-body { scrollbar-color: #2A3A44 transparent; }
[data-theme="dark"] .pi-flowtable-body::-webkit-scrollbar-thumb { background: #2A3A44; }
[data-theme="dark"] .pi-flowtable-body::-webkit-scrollbar-thumb:hover { background: #4A6A7A; }

/* 흐름표 데이터가 없을 때 빈 상태 중앙 정렬 */
.pi-flowtable-body .pi-ft-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-md);
  line-height: 1.7;
}
.pi-flowtable-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}
.pi-ft-info {
  font-size: 12px;
  color: var(--text-tertiary, #718096);
}

/* 흐름표 테이블 */
.pi-flowtable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}
.pi-flowtable-table th,
.pi-flowtable-table td {
  border: none;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
/* ── 그룹 헤더 행 ── */
.pi-ft-group-row th {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 8px;
  height: 30px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: visible;
}
.pi-flowtable-table .pi-ft-group-row th {
  border-top: 1px solid #b0bec5;
  border-bottom: 1px solid #b0bec5;
}

/* 그룹별 색상 — 라이트 */
.pi-ft-g-biz     { background: #e8ecf4; color: #475569; }
.pi-ft-g-collect { background: #EBF4FF; color: #1d4ed8; }
.pi-ft-g-store   { background: #FEF9C3; color: #a16207; }
.pi-ft-g-use     { background: #F0FDF4; color: #047857; }
.pi-ft-g-provide { background: #F3E8FF; color: #6d28d9; }
.pi-ft-g-entrust { background: #FFF7ED; color: #c2410c; }
.pi-ft-g-destroy { background: #FEE2E2; color: #b91c1c; }
.pi-ft-g-etc     { background: #f5f5f5; color: #64748b; }

/* 그룹 경계 (그룹 헤더) — 업무 제외한 그룹 첫 번째 th */
.pi-flowtable-table .pi-ft-group-row .pi-ft-g-collect,
.pi-flowtable-table .pi-ft-group-row .pi-ft-g-store,
.pi-flowtable-table .pi-ft-group-row .pi-ft-g-use,
.pi-flowtable-table .pi-ft-group-row .pi-ft-g-provide,
.pi-flowtable-table .pi-ft-group-row .pi-ft-g-entrust,
.pi-flowtable-table .pi-ft-group-row .pi-ft-g-destroy,
.pi-flowtable-table .pi-ft-group-row .pi-ft-g-etc {
  border-left: 1px dashed #b8cada;
}

/* ── 컬럼 헤더 행 ── */
.pi-ft-header-row th {
  font-weight: 700;
  font-size: 11px;
  padding: 5px 8px;
  position: sticky;
  top: 30px;
  z-index: 2;
}

/* 컬럼 헤더 그룹별 색상 — 라이트 (클래스 기반, 동적 컬럼 지원) */
.pi-ft-header-row th.pi-ft-ch-biz     { background: #e8ecf4; color: #475569; }
.pi-ft-header-row th.pi-ft-ch-collect { background: #EBF4FF; color: #1d4ed8; }
.pi-ft-header-row th.pi-ft-ch-store   { background: #FEF9C3; color: #a16207; }
.pi-ft-header-row th.pi-ft-ch-use     { background: #F0FDF4; color: #047857; }
.pi-ft-header-row th.pi-ft-ch-provide { background: #F3E8FF; color: #6d28d9; }
.pi-ft-header-row th.pi-ft-ch-entrust { background: #FFF7ED; color: #c2410c; }
.pi-ft-header-row th.pi-ft-ch-destroy { background: #FEE2E2; color: #b91c1c; }
.pi-ft-header-row th.pi-ft-ch-etc     { background: #f5f5f5; color: #64748b; }

/* 컬럼 헤더 그룹 경계 점선 */
.pi-flowtable-table .pi-ft-header-row th.pi-ft-ch-gstart {
  border-left: 1px dashed #c0cdd5;
}

/* 컬럼 헤더 행 하단 가로선 */
.pi-flowtable-table .pi-ft-header-row th {
  border-bottom: 1px solid #b0bec5;
}

/* ── 인라인 배지 토글 ── */
.pi-ft-badges { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: middle; }
.pi-ft-badge {
  font-size: 8px; padding: 1px 5px; border-radius: 8px;
  cursor: pointer; transition: all 0.12s; line-height: 1.4;
  font-weight: 500; letter-spacing: -0.2px; user-select: none;
}
.pi-ft-badge.on { opacity: 0.85; border: 1px solid rgba(0,0,0,0.08); }
.pi-ft-badge.off { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.25); border: 1px solid transparent; }
.pi-ft-badge:hover { opacity: 1; }
.pi-ft-add-badge {
  font-size: 9px; padding: 0 4px; border-radius: 8px; cursor: pointer;
  border: 1px dashed rgba(0,0,0,0.2); color: rgba(0,0,0,0.3);
  transition: all 0.12s; line-height: 1.5; display: inline-flex;
  align-items: center; vertical-align: middle; position: relative;
  overflow: visible;
}
.pi-ft-add-badge:hover { border-color: rgba(0,0,0,0.4); color: rgba(0,0,0,0.5); background: rgba(0,0,0,0.03); }

/* ── 컬럼 추가 팝오버 ── */
.pi-ft-add-pop {
  display: none; position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%); background: #fff;
  border: 1px solid #d2dbe0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12); padding: 10px 12px;
  z-index: 200; min-width: 200px; text-align: left; font-weight: 400;
  animation: piAddPopFade 0.12s ease;
}
[data-theme="dark"] .pi-ft-add-pop {
  background: #1e293b;
  border-color: #475569;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  color: #e2e8f0;
}
.pi-ft-add-pop.show { display: block; }
@keyframes piAddPopFade { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.pi-ft-add-pop-title { font-size: 11px; font-weight: 600; color: var(--text-secondary, #4a5568); margin-bottom: 6px; }
.pi-ft-add-pop-section { font-size: 10px; color: var(--text-tertiary, #718096); margin-bottom: 4px; padding-top: 6px; border-top: 1px solid var(--border, #e2e8f0); }
.pi-ft-add-pop-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px;
  border-radius: 4px; cursor: pointer; font-size: 11px;
  transition: background 0.1s; color: var(--text-primary, #1a202c);
}
.pi-ft-add-pop-item:hover { background: var(--bg-hover, #f0f4f8); }
.pi-ft-add-pop-input {
  width: 100%; font-size: 12px; padding: 5px 8px; border: 1px solid #d2dbe0;
  border-radius: 4px; background: #fff; color: #1a202c;
  outline: none; font-family: inherit; margin-bottom: 6px; box-sizing: border-box;
}
[data-theme="dark"] .pi-ft-add-pop-input {
  background: #2d3748; color: #e2e8f0; border-color: #4a5568;
}
.pi-ft-add-pop-input:focus { border-color: var(--primary, #376C82); box-shadow: 0 0 0 2px rgba(55,108,130,0.15); }
.pi-ft-add-pop-hint { font-size: 10px; color: var(--text-tertiary, #718096); margin-bottom: 4px; }
.pi-ft-add-pop-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ── 컬럼 헤더 편집 아이콘 (✎) ── */
.pi-ft-col-edit {
  position: relative; display: inline-block; margin-left: 3px;
  cursor: pointer; opacity: 0; font-size: 11px; color: var(--text-tertiary, #718096);
  transition: opacity 0.15s;
}
.pi-ft-header-row th:hover .pi-ft-col-edit { opacity: 0.7; }
.pi-ft-col-edit:hover { opacity: 1 !important; color: var(--primary, #376C82); }

/* ── 컬럼 편집 팝오버 ── */
.pi-ft-col-edit-pop {
  position: absolute; top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%); background: #fff;
  border: 1px solid #d2dbe0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12); padding: 10px 12px;
  z-index: 200; min-width: 200px; text-align: left; font-weight: 400;
  animation: piAddPopFade 0.12s ease;
}
[data-theme="dark"] .pi-ft-col-edit-pop {
  background: #1e293b;
  border-color: #475569;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  color: #e2e8f0;
}

/* ── 데이터 셀 ── */
.pi-flowtable-table td {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 220px;
  font-size: 11.5px;
  position: relative;
}

/* hover: JS가 그룹 전체에 .pi-ft-group-hover 클래스를 토글 */
.pi-flowtable-table tbody tr:hover,
.pi-flowtable-table tbody tr.pi-ft-group-hover { background: rgba(55,108,130,0.06); }

/* 처리업무 그룹 구분 가로선 (진하게) */
.pi-flowtable-table tbody tr {
  border-bottom: 1px solid #d0d8de;
}
/* 같은 그룹 내 후속 행: 연한 가로선 (PI 항목 구분용) */
.pi-flowtable-table tbody tr.pi-ft-row-noborder {
  border-bottom: 1px solid #dde4e9;
}

/* 교차 배경색: 짝수 그룹 연한 배경 */
.pi-flowtable-table tbody tr.pi-ft-row-even {
  background: rgba(55,108,130,0.03);
}
.pi-flowtable-table tbody tr.pi-ft-row-even:hover,
.pi-flowtable-table tbody tr.pi-ft-row-even.pi-ft-group-hover { background: rgba(55,108,130,0.08); }

/* rowspan 셀 (서비스명/처리업무) 세로 중앙 정렬 */
.pi-flowtable-table td.pi-ft-td-rowspan {
  vertical-align: middle;
  border-bottom: 1px solid #d0d8de;
}

/* 빈 값 '미입력' 스타일 */
.pi-ft-empty-val {
  color: var(--text-tertiary, #a0aec0);
  font-style: italic;
  font-size: 10.5px;
}

/* ── 다중 노드 태그 (방안 F: 상단 배지 + 하단 값 스택) ── */
.pi-ft-node-line {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.5; padding: 0;
}
.pi-ft-node-line + .pi-ft-node-line { border-top: 1px dashed var(--border-light, #e8edf0); padding-top: 4px; margin-top: 2px; }
.pi-ft-node-tag {
  display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .3px;
  padding: 0px 5px; border-radius: 3px; line-height: 1.5;
  width: fit-content; white-space: nowrap;
}
.pi-ft-node-val { font-size: 11.5px; padding-left: 1px; }
/* 취약 배지: 노드 줄 우상단 (분할 셀 기준 위치) */
.pi-ft-node-line { position: relative; padding-right: 30px; }
.pi-ft-node-line > .vuln-mini-tag { top: 0; right: -8px; }
.pi-ft-node-line + .pi-ft-node-line > .vuln-mini-tag { top: 4px; }

/* 단계별 노드 태그 색상 */
.pi-ft-node-tag.ntag-store   { background: #fef9c3; color: #92400e; border: 1px solid #fde68a; }
.pi-ft-node-tag.ntag-use     { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.pi-ft-node-tag.ntag-provide { background: #f3e8ff; color: #6d28d9; border: 1px solid #e9d5ff; }
.pi-ft-node-tag.ntag-entrust { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.pi-ft-node-tag.ntag-destroy { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.pi-ft-node-tag.ntag-collect { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.pi-ft-node-tag.ntag-default { background: #eef3f6; color: #4a6572; border: 1px solid #d0dbe2; }

/* 다크 모드 노드 태그 */
[data-theme="dark"] .pi-ft-node-tag.ntag-store   { background: #422006; color: #fde047; border-color: #854d0e; }
[data-theme="dark"] .pi-ft-node-tag.ntag-use     { background: #052e16; color: #6ee7b7; border-color: #166534; }
[data-theme="dark"] .pi-ft-node-tag.ntag-provide { background: #2e1065; color: #c4b5fd; border-color: #5b21b6; }
[data-theme="dark"] .pi-ft-node-tag.ntag-entrust { background: #431407; color: #fdba74; border-color: #9a3412; }
[data-theme="dark"] .pi-ft-node-tag.ntag-destroy { background: #450a0a; color: #fca5a5; border-color: #991b1b; }
[data-theme="dark"] .pi-ft-node-tag.ntag-collect { background: #172554; color: #93c5fd; border-color: #1e40af; }
[data-theme="dark"] .pi-ft-node-tag.ntag-default { background: #2d3748; color: #a0aec0; border-color: #4a5568; }

/* 후속 단계 출처 배지 (piItem 셀) */
.pi-ft-origin-badge { margin-left: 6px; font-size: 9px; padding: 1px 5px; vertical-align: middle; }

/* 해당 없음 셀 (출처 이전 단계) */
.pi-ft-na-val { color: var(--text-tertiary, #b0bec5); font-size: 11px; }

/* 다중 노드 인라인 편집 */
.pi-ft-multi-edit-line { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.pi-ft-multi-edit-line .pi-ft-node-tag { flex-shrink: 0; }
.pi-ft-multi-edit-line .pi-ft-inline-input { width: 100%; min-width: 0; }

/* 데이터 행 그룹 경계 점선 (클래스 기반, 동적 컬럼 지원) */
.pi-flowtable-table tbody td.pi-ft-td-gstart {
  border-left: 1px dashed #c8d5dd;
}

.pi-ft-empty {
  text-align: center !important;
  padding: 32px !important;
  color: var(--text-tertiary, #718096);
  font-size: 13px !important;
}

/* ── 다크 모드 ── */
[data-theme="dark"] .pi-flowtable-modal { background: #1a202c; }
[data-theme="dark"] .pi-flowtable-header { border-bottom-color: #334155; }
[data-theme="dark"] .pi-flowtable-header h3 { color: #e2e8f0; }
[data-theme="dark"] .pi-flowtable-footer { border-top-color: #334155; }
[data-theme="dark"] .pi-ft-info { color: #64748b; }

/* 다크: 그룹 헤더 */
[data-theme="dark"] .pi-ft-g-biz     { background: #1e2a3b; color: #94a3b8; }
[data-theme="dark"] .pi-ft-g-collect { background: #172554; color: #93c5fd; }
[data-theme="dark"] .pi-ft-g-store   { background: #422006; color: #fde047; }
[data-theme="dark"] .pi-ft-g-use     { background: #052e16; color: #6ee7b7; }
[data-theme="dark"] .pi-ft-g-provide { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .pi-ft-g-entrust { background: #431407; color: #fdba74; }
[data-theme="dark"] .pi-ft-g-destroy { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .pi-ft-g-etc     { background: #1e293b; color: #94a3b8; }

/* 다크: 그룹 헤더 border-bottom */
[data-theme="dark"] .pi-flowtable-table .pi-ft-group-row th {
  border-top-color: #3d4f5e;
  border-bottom-color: #3d4f5e;
}

/* 다크: 그룹 헤더 그룹 경계 점선 */
[data-theme="dark"] .pi-flowtable-table .pi-ft-group-row .pi-ft-g-collect,
[data-theme="dark"] .pi-flowtable-table .pi-ft-group-row .pi-ft-g-store,
[data-theme="dark"] .pi-flowtable-table .pi-ft-group-row .pi-ft-g-use,
[data-theme="dark"] .pi-flowtable-table .pi-ft-group-row .pi-ft-g-provide,
[data-theme="dark"] .pi-flowtable-table .pi-ft-group-row .pi-ft-g-entrust,
[data-theme="dark"] .pi-flowtable-table .pi-ft-group-row .pi-ft-g-destroy,
[data-theme="dark"] .pi-flowtable-table .pi-ft-group-row .pi-ft-g-etc {
  border-left-color: #3d4f5e;
}

/* 다크: 컬럼 헤더 (클래스 기반) */
[data-theme="dark"] .pi-ft-header-row th.pi-ft-ch-biz     { background: #1e2a3b; color: #94a3b8; }
[data-theme="dark"] .pi-ft-header-row th.pi-ft-ch-collect { background: #172554; color: #93c5fd; }
[data-theme="dark"] .pi-ft-header-row th.pi-ft-ch-store   { background: #422006; color: #fde047; }
[data-theme="dark"] .pi-ft-header-row th.pi-ft-ch-use     { background: #052e16; color: #6ee7b7; }
[data-theme="dark"] .pi-ft-header-row th.pi-ft-ch-provide { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .pi-ft-header-row th.pi-ft-ch-entrust { background: #431407; color: #fdba74; }
[data-theme="dark"] .pi-ft-header-row th.pi-ft-ch-destroy { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .pi-ft-header-row th.pi-ft-ch-etc     { background: #1e293b; color: #94a3b8; }

/* 다크: 컬럼 헤더 하단 가로선 */
[data-theme="dark"] .pi-flowtable-table .pi-ft-header-row th {
  border-bottom-color: #3d4f5e;
}

/* 다크: 컬럼 헤더 그룹 경계 점선 */
[data-theme="dark"] .pi-flowtable-table .pi-ft-header-row th.pi-ft-ch-gstart {
  border-left-color: #3d4f5e;
}

/* 다크: 노드 줄 구분선 */
[data-theme="dark"] .pi-ft-node-line + .pi-ft-node-line { border-top-color: #334155; }

/* 다크: 배지 토글 */
[data-theme="dark"] .pi-ft-badge.on { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .pi-ft-badge.off { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.2); }
[data-theme="dark"] .pi-ft-add-badge { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.25); }
[data-theme="dark"] .pi-ft-add-badge:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
[data-theme="dark"] .pi-ft-add-pop { background: #1e293b; border-color: #334155; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .pi-ft-add-pop-title { color: #94a3b8; }
[data-theme="dark"] .pi-ft-add-pop-section { color: #64748b; border-top-color: #334155; }
[data-theme="dark"] .pi-ft-add-pop-item { color: #e2e8f0; }
[data-theme="dark"] .pi-ft-add-pop-item:hover { background: #334155; }
[data-theme="dark"] .pi-ft-add-pop-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .pi-ft-add-pop-hint { color: #64748b; }

/* 다크: 데이터 셀 — td는 배경 inherit하여 tr 교차/hover가 투과됨 */
[data-theme="dark"] .pi-flowtable-table tbody { background: #1e293b; }
[data-theme="dark"] .pi-flowtable-table td { color: #cbd5e1; background: inherit; border-color: #2d3a4a; }

/* 다크: 데이터 행 기본 배경 */
[data-theme="dark"] .pi-flowtable-table tbody tr {
  background: #1e293b;
  border-bottom: 1px solid #3d4f5e;
}
/* 다크: 같은 그룹 내 후속 행 — hover 시에도 가로선 보이도록 */
[data-theme="dark"] .pi-flowtable-table tbody tr.pi-ft-row-noborder {
  border-bottom: 1px solid #2d3a4a;
}
[data-theme="dark"] .pi-flowtable-table tbody tr.pi-ft-row-noborder:hover,
[data-theme="dark"] .pi-flowtable-table tbody tr.pi-ft-row-noborder.pi-ft-group-hover {
  border-bottom-color: #3d4f5e;
}
/* 다크: rowspan 셀 (서비스명/처리업무) 하단선 — 그룹 구분선과 동일 */
[data-theme="dark"] .pi-flowtable-table td.pi-ft-td-rowspan {
  border-bottom-color: #3d4f5e;
}
/* 다크: 교차 배경 (짝수 그룹) */
[data-theme="dark"] .pi-flowtable-table tbody tr.pi-ft-row-even {
  background: #232f42;
}
[data-theme="dark"] .pi-flowtable-table tbody tr.pi-ft-row-even:hover,
[data-theme="dark"] .pi-flowtable-table tbody tr.pi-ft-row-even.pi-ft-group-hover {
  background: #2a3a50;
}
/* 다크: hover */
[data-theme="dark"] .pi-flowtable-table tbody tr:hover,
[data-theme="dark"] .pi-flowtable-table tbody tr.pi-ft-group-hover {
  background: #253244;
}

/* 다크: 데이터 행 그룹 경계 점선 (세로) */
[data-theme="dark"] .pi-flowtable-table tbody td.pi-ft-td-gstart {
  border-left-color: #3d4f5e;
}

/* ─── 흐름표 취약점 배지 + 툴팁 ─── */
.vuln-mini-tag {
  position: absolute;
  top: 6px;
  right: 2px;
  z-index: 2;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  cursor: default;
  pointer-events: auto;
}
.vuln-mini-tag.vt-critical { background: rgba(239,68,68,.15); color: #dc2626; border: 1px solid rgba(220,38,38,.3); }
.vuln-mini-tag.vt-warning  { background: rgba(245,158,11,.15); color: #d97706; border: 1px solid rgba(217,119,6,.3); }
.vuln-mini-tag.vt-etc      { background: rgba(107,114,128,.12); color: #6b7280; border: 1px solid rgba(107,114,128,.3); }
[data-theme="dark"] .vuln-mini-tag.vt-critical { background: rgba(239,68,68,.25); color: #fca5a5; border-color: rgba(252,165,165,.45); }
[data-theme="dark"] .vuln-mini-tag.vt-warning  { background: rgba(245,158,11,.25); color: #fde68a; border-color: rgba(253,230,138,.45); }
[data-theme="dark"] .vuln-mini-tag.vt-etc      { background: rgba(156,163,175,.2); color: #9ca3af; border-color: rgba(156,163,175,.4); }

.vuln-tip {
  position: fixed;
  z-index: 700;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  pointer-events: none;
  display: none;
  animation: vulnTipFade .15s ease;
}
.vuln-tip.show { display: block; }
.vuln-tip-arrow {
  position: fixed;
  z-index: 701;
  width: 0; height: 0;
  border: 5px solid transparent;
  border-bottom-color: #1f2937;
  pointer-events: none;
  display: none;
  animation: vulnTipFade .15s ease;
}
.vuln-tip-arrow.show { display: block; }
@keyframes vulnTipFade {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-theme="dark"] .vuln-tip {
  background: #e2e8f0;
  color: #1e293b;
}
[data-theme="dark"] .vuln-tip-arrow {
  border-bottom-color: #e2e8f0;
}

/* ─── 취약점 입력 팝오버 ─── */
.vuln-popover {
  position: fixed;
  z-index: 800;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #d2dbe0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 12px;
  min-width: 220px;
  max-width: 280px;
  animation: vulnTipFade .12s ease;
}
.vuln-pop-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.vuln-pop-sevs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.vuln-pop-sev {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #d2dbe0);
  cursor: pointer;
  transition: all .15s;
  background: transparent;
  color: var(--text-secondary);
}
.vuln-pop-sev input[type="radio"] { display: none; }
.vuln-pop-sev.active {
  border-color: var(--primary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
}
.vuln-pop-sev.vps-warning.active {
  border-color: #92400e;
  background: #fef3c7;
  color: #92400e;
}
.vuln-pop-sev.vps-critical.active {
  border-color: #b91c1c;
  background: #fee2e2;
  color: #b91c1c;
}
.vuln-pop-sev.vps-etc.active {
  border-color: #6b7280;
  background: #f3f4f6;
  color: #4b5563;
}
.vuln-pop-label-area {
  margin-bottom: 8px;
  display: none;
}
.vuln-pop-label-area.show {
  display: block;
}
.vuln-pop-label-input {
  width: 100%;
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--border-color, #d2dbe0);
  border-radius: 4px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.vuln-pop-label-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(55,108,130,.15);
}
.vuln-pop-label-hint {
  font-size: 10px;
  color: var(--text-tertiary, #94a3b8);
}
.vuln-pop-auto-hint {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  padding: 3px 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
}
.vuln-pop-note {
  width: 100%;
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--border-color, #d2dbe0);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  margin-bottom: 8px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
  min-height: 34px;
  line-height: 1.5;
}
.vuln-pop-note:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(55,108,130,.15);
}
.vuln-pop-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* 다크모드 취약점 팝오버 */
[data-theme="dark"] .vuln-popover {
  background: #1A2025;
  border-color: #2A3238;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] .vuln-pop-sev.vps-warning.active {
  border-color: #fef3c7;
  background: #78350f;
  color: #fef3c7;
}
[data-theme="dark"] .vuln-pop-sev.vps-critical.active {
  border-color: #fee2e2;
  background: #7f1d1d;
  color: #fee2e2;
}
[data-theme="dark"] .vuln-pop-sev.vps-etc.active {
  border-color: #9ca3af;
  background: #374151;
  color: #d1d5db;
}
[data-theme="dark"] .vuln-pop-sev {
  border-color: #2A3238;
  color: #adbec7;
}
[data-theme="dark"] .vuln-pop-sev:hover {
  border-color: #3d4f5e;
  background: #242C32;
}
[data-theme="dark"] .vuln-pop-label-input,
[data-theme="dark"] .vuln-pop-note {
  background: #131719;
  border-color: #2A3238;
  color: #ebeff1;
}
[data-theme="dark"] .vuln-pop-label-input:focus,
[data-theme="dark"] .vuln-pop-note:focus {
  border-color: #8DBFD1;
  box-shadow: 0 0 0 2px rgba(141,191,209,.2);
}

/* 흐름표 셀 클릭 커서 */
.pi-flowtable-table tbody td {
  cursor: pointer;
}

/* ─── 흐름표 인라인 편집 ─── */
.pi-ft-inline-input {
  width: 100%;
  font-size: 11.5px;
  padding: 2px 4px;
  border: 1px solid var(--primary, #376C82);
  border-radius: 3px;
  background: #fff;
  color: #2D3439;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px rgba(55,108,130,.15);
  resize: vertical;
  min-height: 28px;
  line-height: 1.5;
}
[data-theme="dark"] .pi-ft-inline-input {
  background: #131719;
  color: #ebeff1;
  border-color: #8DBFD1;
  box-shadow: 0 0 0 2px rgba(141,191,209,.2);
}

/* ─── Node Picker (pii_flow 더블클릭 → 도형 선택) ─── */
.pii-picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.08);
}
.pii-picker-container {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  animation: piiPickerIn 120ms ease;
}
/* Y자 왼쪽 열: 정보주체(위) + 수행주체(아래) */
.pii-picker-y-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
/* 각 노드 + 대각선 화살표 한 행 */
.pii-picker-y-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* 45° 대각선 화살표 문자 */
.pii-picker-diag-arrow {
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}
@keyframes piiPickerIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.pii-picker-arrow {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 300;
  user-select: none;
  flex-shrink: 0;
}
.pii-picker-sep {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 300;
  user-select: none;
  flex-shrink: 0;
  margin: 0 2px;
}
.pii-picker-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.pii-picker-branch-arrow {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1;
}
.pii-picker-item {
  width: 50px; height: 50px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  gap: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.pii-picker-item:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  z-index: 2;
}
.pii-picker-shape {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.pii-picker-label {
  font-size: 8px; font-weight: 700;
  opacity: 0.85; white-space: nowrap;
}
[data-theme="dark"] .pii-picker-overlay {
  background: rgba(0, 0, 0, 0.2);
}

/* ══════════════════════════════════════════════════════════════
   Flow Description Panel
   ══════════════════════════════════════════════════════════════ */

.flow-desc-panel {
  width: 320px;
  min-width: 240px;
  max-width: 440px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width var(--transition-slow), min-width var(--transition-slow), opacity var(--transition-slow);
  overflow: hidden;
  position: relative;
}
.flow-desc-panel.collapsed {
  width: 0;
  min-width: 0;
  border-left: none;
  opacity: 0;
  pointer-events: none;
}
.flow-desc-panel .panel-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.flow-desc-panel .panel-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.flow-desc-count {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: auto;
}

/* Chip bar (flow groups) — Style E minimal underline */
.fd-chip-bar {
  display: none; /* hidden when only 1 group */
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.fd-chip-bar.multi { display: flex; }
.fd-chip-bar .fd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1.5px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  font-family: 'Pretendard', sans-serif;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
  line-height: 1.3;
}
.fd-chip-bar .fd-chip.filled {
  background: var(--chip-color);
  color: #fff;
  border-color: var(--chip-color);
}
.fd-chip-bar .fd-chip.outlined {
  background: transparent;
  color: var(--chip-color);
  border-color: var(--chip-color);
}
.fd-chip-bar .fd-chip:not(.active) {
  opacity: 0.45;
  filter: saturate(0.5);
}
.fd-chip-bar .fd-chip:hover { opacity: 1; filter: none; }
.fd-chip-bar .fd-chip-dot { display: none; }
.fd-chip-bar .fd-chip-count {
  font-size: 9px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.28);
  color: inherit;
  min-width: 14px;
  text-align: center;
  line-height: 1.4;
}
.fd-chip-bar .fd-chip.outlined .fd-chip-count {
  background: var(--chip-color);
  color: #fff;
}
.fd-chip-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 12px;
  font-family: 'Pretendard', sans-serif;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-left: 2px;
}
.fd-chip-add:hover { border-color: var(--primary); color: var(--primary); }

/* Inline group name edit */
.fd-chip-edit {
  font-size: 11px;
  font-family: 'Pretendard', sans-serif;
  border: 1px solid var(--primary);
  border-radius: 3px;
  padding: 2px 4px;
  color: var(--text-primary);
  background: var(--bg-panel);
  outline: none;
  width: 80px;
}

/* Section divider between groups */
.fd-section-sep {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 4px;
  margin-bottom: 2px;
}
.fd-section-sep:first-child { padding-top: 2px; }
.fd-sep-bar {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.fd-sep-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.fd-sep-line {
  flex: 1;
  height: 1px;
  background: var(--border-light);
}
.fd-sep-count {
  font-size: 9px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.fd-sep-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.fd-section-sep:hover .fd-sep-actions { opacity: 1; }
.fd-sep-btn {
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 10px;
  padding: 1px 3px;
  border-radius: 3px;
  font-family: 'Pretendard', sans-serif;
}
.fd-sep-btn:hover { background: var(--hover); color: var(--text-primary); }
.fd-sep-btn.del:hover { background: #fee2e2; color: #ef4444; }

/* Body — 반드시 남은 높이를 모두 채워야 footer 가 하단에 붙음.
 *  flex-basis: 0 로 시작해 flex-grow:1 로 확장, min-height:0 로 scroll 허용. */
.flow-desc-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Item */
.fd-item {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg);
  transition: all var(--transition);
  position: relative;
}
.fd-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.fd-item.dragging { opacity: 0.4; border-style: dashed; }
.fd-item.drag-over { border-color: var(--primary); background: var(--primary-light); }
.fd-item.active { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 2px rgba(55, 108, 130, 0.15); }
.fd-item.node-highlight { border-color: var(--primary); }

/* Drag handle */
.fd-drag {
  cursor: grab;
  color: var(--text-tertiary);
  font-size: 11px;
  display: flex;
  align-items: flex-start;
  padding-top: 5px;
  flex-shrink: 0;
  user-select: none;
  opacity: 0.5;
  transition: opacity var(--transition);
}
.fd-item:hover .fd-drag { opacity: 1; }
.fd-drag:active { cursor: grabbing; }

/* Number badge */
.fd-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 취약점 삼각형 배지 (리스트) */
.fd-num-vuln {
  width: 22px; height: 22px;
  border-radius: 0;
  background: none;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.fd-num-vuln svg { display: block; }
.fd-num-txt {
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  pointer-events: none;
  line-height: 1;
}
/* 심각도 태그 */
.fd-sev-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fd-sev-tag.fd-sev-critical { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.fd-sev-tag.fd-sev-warning { background: #fffbeb; color: #e08a00; border: 1px solid #fcd34d; }
.fd-sev-tag.fd-sev-etc { background: #f3f4f6; color: #9ca3af; border: 1px solid #d1d5db; }
[data-theme="dark"] .fd-sev-tag.fd-sev-critical { background: #3d1010; color: #f87171; border-color: #7f1d1d; }
[data-theme="dark"] .fd-sev-tag.fd-sev-warning { background: #3d2e08; color: #fbbf24; border-color: #92400e; }
[data-theme="dark"] .fd-sev-tag.fd-sev-etc { background: #282e34; color: #9ca3af; border-color: #4b5563; }
/* 링크+태그 행 */
.fd-link-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 취약점 추가 버튼 */
.fd-add-vuln { color: #dc2626 !important; border-color: #fca5a5 !important; }
.fd-add-vuln:hover { background: #fef2f2 !important; border-color: #dc2626 !important; }
[data-theme="dark"] .fd-add-vuln { color: #f87171 !important; border-color: #7f1d1d !important; }
[data-theme="dark"] .fd-add-vuln:hover { background: #3d1010 !important; border-color: #f87171 !important; }
/* 심각도 선택 팝오버 */
.fd-sev-popover {
  position: fixed; z-index: 1000;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 6px; min-width: 160px;
}
.fd-sev-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--text);
  transition: background var(--transition);
}
.fd-sev-option:hover { background: var(--primary-light); }
.fd-sev-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.fd-sev-dot.critical { background: #dc2626; }
.fd-sev-dot.warning { background: #e08a00; }
.fd-sev-dot.etc { background: #9ca3af; }
[data-theme="dark"] .fd-sev-dot.critical { background: #f87171; }
[data-theme="dark"] .fd-sev-dot.warning { background: #fbbf24; }
.fd-sev-label { flex: 1; }
.fd-sev-hint { font-size: 10px; color: var(--text-tertiary); }
/* 캔버스 취약점 삼각형 배지 */
.fd-canvas-badge.fd-vuln-badge polygon {
  stroke: var(--bg-panel); stroke-width: 1.5;
  transition: filter 0.2s;
}
.fd-canvas-badge.fd-vuln-badge text {
  fill: #fff; font-size: 9px; font-weight: 800;
  font-family: Pretendard, sans-serif;
}
[data-theme="dark"] .fd-canvas-badge.fd-vuln-badge polygon {
  stroke: #1a2332; stroke-width: 1.5;
}
/* 취약점 배지 하이라이트 */
.fd-canvas-badge.fd-vuln-badge.fd-badge-hl polygon {
  filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.6)) drop-shadow(0 0 4px rgba(220, 38, 38, 0.4));
}
[data-theme="dark"] .fd-canvas-badge.fd-vuln-badge.fd-badge-hl polygon {
  filter: drop-shadow(0 0 12px rgba(248, 113, 113, 0.7)) drop-shadow(0 0 5px rgba(248, 113, 113, 0.5));
}
.fd-canvas-badge.fd-vuln-badge.fd-badge-hl text {
  fill: #fff; font-size: 11px;
}

/* Content */
.fd-content { flex: 1; min-width: 0; }

/* Node link chip */
.fd-node-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 10px;
  padding: 2px 7px 2px 4px;
  border-radius: 4px;
  font-weight: 600;
  margin-bottom: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
  max-width: calc(100% - 20px);
  white-space: nowrap;
  line-height: 1.3;
}
.fd-node-link-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fd-node-link:hover { opacity: 0.85; }
.fd-rc-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-rc-icon svg { width: 10px; height: 10px; }
/* Role chip color classes (ntag system) */
.fd-rc-collect  { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.fd-rc-store    { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.fd-rc-use      { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.fd-rc-provide  { background: #f3e8ff; color: #6d28d9; border-color: #e9d5ff; }
.fd-rc-entrust  { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.fd-rc-destroy  { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.fd-rc-external { background: #F1F5F9; color: #334155; border-color: #cbd5e1; }
.fd-rc-white    { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
.fd-node-unlink {
  font-size: 9px;
  color: inherit;
  opacity: 0.5;
  margin-right: 4px;
  cursor: pointer;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.fd-node-unlink:hover { opacity: 1; color: #ef4444; }
.fd-node-link-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  margin-bottom: 3px;
  cursor: pointer;
  border: 1px dashed var(--border);
  transition: all var(--transition);
}
.fd-node-link-add:hover { border-color: var(--primary); color: var(--primary); }

/* Edge link chip */
.fd-edge-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  padding: 3px 7px 3px 4px;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 3px;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  transition: all var(--transition);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.3;
}
.fd-edge-link:hover { opacity: 0.85; }
.fd-edge-node {
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 600;
}
.fd-edge-arrow {
  color: #376C82; font-size: 11px; font-weight: 400;
  margin: 0 2px; flex-shrink: 0;
}
.fd-edge-lbl { color: #475569; font-weight: 500; margin-left: 1px; font-size: 9px; }
.fd-edge-lbl-only { color: #1f3b4a; font-weight: 600; font-size: 10px; }
.fd-edge-lbl-empty { color: #94a3b8; font-weight: 400; font-style: italic; }
[data-theme="dark"] .fd-edge-link { background: #1a2332; color: #94a3b8; border-color: #2d3b4d; }
[data-theme="dark"] .fd-edge-arrow { color: #5ba3c0; }
[data-theme="dark"] .fd-edge-lbl { color: #94a3b8; }
[data-theme="dark"] .fd-edge-lbl-only { color: #cbd5e1; }
[data-theme="dark"] .fd-edge-lbl-empty { color: #5a6b7a; }

/* Select mode: edge cursor */
.canvas.fd-select-mode .edge-group,
.canvas.fd-select-mode .edge-label-group { cursor: pointer !important; }

/* Textarea */
.fd-textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 1.55;
  font-family: 'Pretendard', sans-serif;
  color: var(--text-primary);
  background: transparent;
  resize: none;
  outline: none;
  min-height: 20px;
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
}
.fd-textarea:focus {
  border-color: var(--primary);
  background: var(--bg-panel);
}
.fd-textarea::placeholder { color: var(--text-tertiary); }

/* PI items tags in flow description */
.fd-pi-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 3px 0; }
/* PI만 모드 — 번호 옆에 인라인 표시 */
.fd-item-pionly { align-items: center; }
.fd-content-pionly { display: flex; align-items: center; min-width: 0; flex: 1; }
.fd-pi-tags-inline { padding: 0; gap: 4px; align-items: center; }

/* 숨김 상태 — 추출에서 제외된 항목 (슬림 바) */
.fd-item-hidden {
  align-items: center;
  padding: 4px 8px;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(148, 163, 184, 0.08) 6px,
    rgba(148, 163, 184, 0.08) 12px
  );
  opacity: 0.75;
}
.fd-item-hidden .fd-num { opacity: 0.35; }
.fd-content-hidden {
  display: flex; align-items: center; flex: 1; min-width: 0;
}
.fd-hidden-label {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-style: italic;
  letter-spacing: 0.3px;
}

/* 눈(표시/숨김) 아이콘 버튼 */
.fd-eye-btn {
  color: var(--text-tertiary);
  transition: color 0.15s ease, background 0.15s ease;
}
.fd-eye-btn:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.fd-eye-btn.hidden-on {
  color: #9ca3af;
}
.fd-eye-btn.hidden-on:hover {
  color: var(--primary);
}
/* PI만/설명 토글 버튼 */
.fd-pi-btn {
  color: var(--text-tertiary);
  transition: color 0.15s ease, background 0.15s ease;
}
.fd-pi-btn:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.fd-pi-btn.pi-on {
  color: var(--primary);
  background: var(--primary-light);
}
.fd-pi-btn.pi-on:hover {
  color: var(--primary);
  opacity: 0.85;
}
.fd-desc-btn,
.fd-label-btn {
  color: var(--text-tertiary);
  transition: color 0.15s ease, background 0.15s ease;
}
.fd-desc-btn:hover,
.fd-label-btn:hover {
  color: var(--primary);
  background: var(--primary-light);
}
/* 항목별 표기여부 OFF 상태 — 기능 활성(숨김) 표시: 경고색으로 하이라이트 */
.fd-label-btn.label-off,
.fd-pi-btn.pi-off,
.fd-desc-btn.desc-off {
  color: #c47800;
  background: rgba(196, 120, 0, 0.12);
}
.fd-label-btn.label-off:hover,
.fd-pi-btn.pi-off:hover,
.fd-desc-btn.desc-off:hover {
  color: #c47800;
  opacity: 0.85;
}

/* 패널 — 표기여부 OFF 시 해당 요소를 흐리게 (추출 시 빠진다는 시각 피드백) */
.fd-label-off-row { opacity: 0.4; text-decoration: line-through; }
.fd-pi-tags.fd-pi-off { opacity: 0.35; text-decoration: line-through; }
.fd-textarea.fd-desc-off { opacity: 0.4; text-decoration: line-through; }
[data-theme="dark"] .fd-item-hidden {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(100, 116, 139, 0.12) 6px,
    rgba(100, 116, 139, 0.12) 12px
  );
}
.fd-pi-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 17px;
  padding: 0 2px; border-radius: var(--pi-item-badge-radius);
  font-size: 9px; font-weight: 500; line-height: 1.15; white-space: nowrap;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid transparent;
  overflow: hidden; text-overflow: ellipsis;
}
/* 선택(Optional) 태그: 필수와 같은 채움/글자색 + 점선 테두리 */
.fd-pi-tag.opt {
  border-style: dashed !important;
  border-width: 1px !important;
  border-color: currentColor !important;
}

/* Delete button */
.fd-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition);
}
.fd-item:hover .fd-actions { opacity: 1; }
.fd-act-btn {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-act-btn:hover { background: #fee2e2; color: #ef4444; }

/* Add buttons row */
.fd-add-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.fd-add {
  flex: 1;
  padding: 7px 6px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 11px;
  font-family: 'Pretendard', sans-serif;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.fd-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* Options bar */
.flow-desc-options {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}
/* Chip toggle badge */
.fd-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all var(--transition);
  line-height: 1.4;
}
.fd-chip:hover { border-color: var(--primary); color: var(--text-secondary); }
.fd-chip.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* Position select dropdown */
/* (fd-pos-select removed — position fixed to right) */

/* Footer */
.flow-desc-footer {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.flow-desc-footer button {
  flex: 1;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-panel);
  font-size: 10px;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: 'Pretendard', sans-serif;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.flow-desc-footer button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* Canvas number badges (SVG) */
.fd-canvas-badge {
  pointer-events: none;
  transition: opacity 0.2s, filter 0.2s;
}
/* 취약 배지는 hover 툴팁을 위해 pointer-events 활성화 */
.fd-canvas-badge.fd-vuln-badge {
  pointer-events: all;
}
.fd-canvas-badge.fd-vuln-badge circle {
  pointer-events: all;
}
.fd-canvas-badge:not(.fd-vuln-badge) circle {
  fill: var(--primary);
  stroke: var(--bg-panel);
  stroke-width: 2;
  transition: r 0.2s ease, fill 0.2s, stroke 0.2s, stroke-width 0.2s, filter 0.2s;
}
.fd-canvas-badge text {
  fill: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: Pretendard, sans-serif;
  transition: font-size 0.2s ease, fill 0.2s;
}
/* Dark mode badge — match fd-num dark style */
[data-theme="dark"] .fd-canvas-badge:not(.fd-vuln-badge) circle {
  fill: #2A5B6F;
  stroke: #1a2332;
  stroke-width: 2;
}
[data-theme="dark"] .fd-canvas-badge:not(.fd-vuln-badge) text {
  fill: #C8E2EC;
}
/* Highlight state — Style B: Scale + Glow (설명 원형 배지) */
.fd-canvas-badge:not(.fd-vuln-badge).fd-badge-hl circle {
  r: 15;
  fill: #1d4ed8;
  stroke: #93c5fd;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6))
         drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}
.fd-canvas-badge:not(.fd-vuln-badge).fd-badge-hl text {
  fill: #fff;
  font-size: 12px;
}
[data-theme="dark"] .fd-canvas-badge:not(.fd-vuln-badge).fd-badge-hl circle {
  r: 15;
  fill: #2563eb;
  stroke: #60a5fa;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.7))
         drop-shadow(0 0 5px rgba(96, 165, 250, 0.5));
}
[data-theme="dark"] .fd-canvas-badge:not(.fd-vuln-badge).fd-badge-hl text {
  fill: #fff;
  font-size: 12px;
}
.fd-canvas-badge.hidden { opacity: 0; }

/* Node select mode */
.canvas.fd-select-mode { cursor: crosshair !important; }
.canvas.fd-select-mode .node-shape,
.canvas.fd-select-mode .node-label { cursor: pointer !important; }
.fd-select-hint {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  z-index: 10;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  white-space: nowrap;
}
[data-theme="dark"] .fd-select-hint {
  background: #2A5B6F;
  color: #C8E2EC;
  box-shadow: 0 2px 12px rgba(42, 91, 111, 0.5);
}
/* Dark mode: chip bar & section sep */
[data-theme="dark"] .fd-chip-bar { border-bottom-color: var(--border); }
[data-theme="dark"] .fd-chip-add { border-color: var(--border); color: var(--text-tertiary); }
[data-theme="dark"] .fd-sep-line { background: var(--border); }

/* Multiple badges per node — stack vertically */
.fd-badge-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

/* Export description block */
.fd-export-block {
  margin-top: 16px;
  padding: 12px 16px;
  border-top: 2px solid var(--border);
  font-size: 11px;
  line-height: 1.8;
  color: var(--text-primary);
}
.fd-export-block .fd-export-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.fd-export-step { margin-bottom: 2px; }
.fd-export-step b { color: var(--primary); }

/* Dark mode */
[data-theme="dark"] .fd-item { background: var(--bg-secondary); border-color: var(--border); }
[data-theme="dark"] .fd-item:hover { background: var(--primary-light); border-color: var(--primary); }
[data-theme="dark"] .fd-textarea:focus { background: var(--bg); }
[data-theme="dark"] .fd-act-btn:hover { background: rgba(239, 68, 68, 0.15); color: #f87171; }
[data-theme="dark"] .flow-desc-panel { background: var(--bg); border-left-color: var(--border); }
[data-theme="dark"] .fd-node-link { background: var(--primary-light); }
[data-theme="dark"] .fd-rc-collect  { background: #172554; color: #93c5fd; border-color: #1e40af; }
[data-theme="dark"] .fd-rc-store    { background: #422006; color: #fde047; border-color: #854d0e; }
[data-theme="dark"] .fd-rc-use      { background: #052e16; color: #6ee7b7; border-color: #166534; }
[data-theme="dark"] .fd-rc-provide  { background: #2e1065; color: #c4b5fd; border-color: #5b21b6; }
[data-theme="dark"] .fd-rc-entrust  { background: #431407; color: #fdba74; border-color: #9a3412; }
[data-theme="dark"] .fd-rc-destroy  { background: #450a0a; color: #fca5a5; border-color: #991b1b; }
[data-theme="dark"] .fd-rc-external { background: #1E293B; color: #94A3B8; border-color: #334155; }
[data-theme="dark"] .fd-rc-white    { background: #2d3748; color: #a0aec0; border-color: #4a5568; }
[data-theme="dark"] .fd-num { background: #2A5B6F; color: #C8E2EC; }
[data-theme="dark"] .fd-num.fd-num-vuln { background: none; }
/* Chip toggle dark mode */
[data-theme="dark"] .flow-desc-options .fd-chip { border-color: #3A4A52; color: #6B8A97; background: transparent; }
[data-theme="dark"] .flow-desc-options .fd-chip:hover { border-color: #8DBFD1; color: #8DBFD1; }
[data-theme="dark"] .fd-chip.on { background: #2A4A58; border-color: #2A4A58; color: #B8D4DE; }
/* (dark fd-pos-select removed) */

/* Preview modal */
.fd-preview-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-modal);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
}
.fd-preview-overlay.active {
  opacity: 1;
  visibility: visible;
}
.fd-preview-modal {
  background: var(--bg-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  width: 600px;
  max-height: 80vh;
  overflow: auto;
}
.fd-preview-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  cursor: grab; user-select: none;
}
.fd-preview-modal .modal-header:active { cursor: grabbing; }
.fd-preview-modal .modal-header h3 {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.fd-preview-body {
  padding: 16px 18px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-primary);
}
.fd-preview-step { margin-bottom: 3px; }
.fd-preview-step b { color: var(--primary); }
.fd-preview-sep { color: var(--text-tertiary); margin: 0 4px; }
.fd-preview-text { color: var(--text-secondary); }

/* ─── 속성패널 취약사항 섹션 ─── */
.vuln-prop-section { margin-top: 2px; }
.vuln-prop-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.vuln-prop-header .prop-inline-label { margin-bottom: 0; }
.vuln-prop-add {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border: 1px dashed var(--border); border-radius: var(--radius-xs);
  background: transparent; color: var(--primary); font-size: 10px; font-weight: 600;
  font-family: var(--font); cursor: pointer; transition: all var(--transition);
}
.vuln-prop-add:hover { background: var(--primary-light); border-color: var(--primary); }
.vuln-prop-list { display: flex; flex-direction: column; gap: 4px; }
.vuln-prop-item {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 8px; border-radius: var(--radius-xs);
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  cursor: pointer; transition: background var(--transition);
}
.vuln-prop-item:hover { background: var(--bg-hover); }
.vuln-prop-sev {
  flex-shrink: 0; padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; color: #fff; line-height: 1.5;
}
.vuln-prop-sev.sev-critical { background: #dc2626; }
.vuln-prop-sev.sev-warning { background: #e08a00; }
.vuln-prop-sev.sev-etc { background: #6b7280; }
.vuln-prop-body { flex: 1; min-width: 0; }
.vuln-prop-label {
  font-size: 11px; font-weight: 600; color: var(--text-primary); line-height: 1.4;
}
.vuln-prop-note {
  font-size: 10px; color: var(--text-tertiary); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vuln-prop-empty {
  font-size: 10px; color: var(--text-tertiary); text-align: center;
  padding: 8px 0; font-style: italic;
}

/* 다크모드 */
[data-theme="dark"] .vuln-prop-add { color: #8DBFD1; border-color: #2A3A44; }
[data-theme="dark"] .vuln-prop-add:hover { background: #2A3A44; }
[data-theme="dark"] .vuln-prop-item { background: #1A2228; border-color: #2A3A44; }
[data-theme="dark"] .vuln-prop-item:hover { background: #242C32; }

/* ─── Area Group (영역 그룹) ───────────────────────────────── */

.area-group { cursor: move; }
.area-group .area-bg { pointer-events: all; }
.area-group .area-header-bg { pointer-events: all; cursor: move; }
.area-group .area-label-text {
  pointer-events: none; user-select: none;
  font-family: var(--font); letter-spacing: -0.01em;
}
.area-group .area-desc-text {
  pointer-events: none; user-select: none;
  font-family: var(--font);
}

/* 영역 선택 — 단일/다중 모두 동일한 강한 강조 */
.area-group.area-selected .area-bg {
  stroke-width: 3 !important;
  stroke-opacity: 1 !important;
  stroke-dasharray: none !important;  /* 점선 → 실선으로 전환하여 미선택과 명확히 구분 */
  fill-opacity: 0.08 !important;       /* 채움 살짝 진하게 */
  filter: drop-shadow(0 0 6px rgba(0,120,210,0.55));
}

/* ─── Lock Icon 표시 정책 ──────────────────────────────────
 * 평소엔 숨김 → hover/선택/전역 토글(`body.show-locks-all`) 시에만 표시.
 * 잠금 요소 자체엔 미세 단서(stroke-opacity)로 잠금 상태 암시.
 */
.lock-icon { opacity: 0; transition: opacity .15s; pointer-events: none; }
.area-group:hover .lock-icon,
.area-group.area-selected .lock-icon,
.node-group:hover .lock-icon,
.node-group.node-selected .lock-icon,
body.show-locks-all .lock-icon {
  opacity: 0.6;
}

/* 잠금 미세 단서 — 평소에 "잠긴 것 같음"을 느낄 수 있게 stroke 살짝 흐리게 */
.area-group.is-locked .area-bg { stroke-opacity: 0.55; }
.divider-group.is-locked .divider-line { opacity: 0.75; }
.textbox-group.is-locked .textbox-bg { stroke-opacity: 0.35; }
/* 선택/호버/전역 토글 시엔 미세 단서 해제하여 정상 표시 */
.area-group.is-locked.area-selected .area-bg,
.area-group.is-locked:hover .area-bg,
body.show-locks-all .area-group.is-locked .area-bg { stroke-opacity: 1; }
.divider-group.is-locked.area-selected .divider-line,
.divider-group.is-locked:hover .divider-line,
body.show-locks-all .divider-group.is-locked .divider-line { opacity: 1; }
.textbox-group.is-locked.area-selected .textbox-bg,
.textbox-group.is-locked:hover .textbox-bg,
body.show-locks-all .textbox-group.is-locked .textbox-bg { stroke-opacity: 0.5; }

.area-resize-handle {
  pointer-events: all;
  opacity: 0;
  transition: opacity .15s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.area-group.area-selected .area-resize-handle { opacity: 1; }
.area-group.area-selected .area-resize-handle:hover {
  fill: #e0e7ff !important;
  stroke-width: 2 !important;
}

/* 속성 패널 내 포함 노드 태그 */
.area-node-list { display: flex; flex-wrap: wrap; gap: 4px; }
.area-node-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 다크모드 */
[data-theme="dark"] .area-node-tag {
  background: #1e293b; border-color: #334155;
}

/* ─── Divider (구분선) ────────────────────────────────────── */
.divider-group { cursor: move; }
.divider-group .divider-hit { pointer-events: all; cursor: move; }
.divider-group .divider-line { pointer-events: none; }
.divider-group .divider-label {
  pointer-events: none; user-select: none;
  font-family: var(--font);
}
.divider-group.area-selected .divider-line {
  stroke-width: 4 !important;
  filter: drop-shadow(0 0 6px rgba(0,120,210,0.6));
}
.divider-group.area-selected .divider-hit {
  fill: rgba(0,120,210,0.08) !important;
}

/* ─── TextBox (텍스트 상자) ──────────────────────────────── */
.textbox-group { cursor: move; }
.textbox-group .textbox-bg { pointer-events: all; cursor: move; }
.textbox-group .textbox-text {
  pointer-events: none; user-select: none;
  font-family: var(--font);
}
.textbox-group.area-selected .textbox-bg {
  stroke-width: 2.5 !important;
  stroke-opacity: 1 !important;
  stroke: rgb(0,120,210) !important;
  filter: drop-shadow(0 0 6px rgba(0,120,210,0.55));
}

/* ─── Memo (메모) ─────────────────────────────────────────── */
.memo-shape { cursor: grab; }
.memo-group:hover .memo-shape { filter: brightness(0.97); }
.memo-group.memo-selected .memo-shape { filter: brightness(0.95); }

.memo-connector {
  stroke: var(--memo-connector);
  stroke-width: 1.2;
  stroke-dasharray: 5 3;
  fill: none;
  pointer-events: none;
}
.memo-connector-dot {
  fill: var(--memo-connector);
  pointer-events: none;
}

/* ─── Share Token Modal (stm-*) ────────────────────────────── */
.stm-modal { width: 470px; max-width: 95vw; }

.stm-section { margin-bottom: 18px; }

.stm-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary, #597381);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.stm-perm-row { display: flex; gap: 8px; }

.stm-perm-btn {
  flex: 1;
  padding: 11px 13px;
  border: 2px solid var(--border, #d2dbe0);
  border-radius: 9px;
  background: var(--bg-panel, #fff);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.stm-perm-btn:hover {
  border-color: var(--primary, #376C82);
  background: rgba(55,108,130,.04);
}
.stm-perm-btn.active {
  border-color: var(--primary, #376C82);
  background: rgba(55,108,130,.07);
  box-shadow: 0 0 0 3px rgba(55,108,130,.12);
}

.stm-perm-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #597381);
  margin-bottom: 3px;
}
.stm-perm-btn.active .stm-perm-name {
  color: var(--primary, #376C82);
}

.stm-perm-desc {
  font-size: 11.5px;
  color: var(--text-secondary, #8fa3ae);
  line-height: 1.4;
}
.stm-perm-btn.active .stm-perm-desc {
  color: var(--text-secondary, #597381);
}

.stm-expire-row { display: flex; gap: 6px; }

.stm-expire-opt {
  flex: 1;
  padding: 7px 0;
  border: 1.5px solid var(--border, #d2dbe0);
  border-radius: 6px;
  background: var(--bg-panel, #fff);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-secondary, #597381);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.stm-expire-opt:hover {
  border-color: var(--primary, #376C82);
  color: var(--primary, #376C82);
  background: var(--bg-hover, rgba(55,108,130,.06));
}
.stm-expire-opt.active {
  border-color: var(--primary, #376C82);
  background: var(--primary, #376C82);
  color: #fff;
  font-weight: 600;
}

.stm-generate-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 16px;
}

.stm-link-box {
  border: 1px solid var(--border, #d2dbe0);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg-secondary, #f8fafc);
  margin-bottom: 16px;
}

.stm-link-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary, #597381);
}

.stm-link-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stm-perm-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(55,108,130,.15);
  color: var(--primary, #376C82);
}
.stm-perm-tag--view {
  background: rgba(100,116,139,.12);
  color: var(--text-secondary, #597381);
}

.stm-expire-info { font-size: 11.5px; color: var(--text-secondary, #597381); }

.stm-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stm-link-url {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary, #384048);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border, #d2dbe0);
  border-radius: 5px;
  padding: 5px 8px;
}

.stm-copy-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  border: 1.5px solid var(--primary, #376C82);
  border-radius: 6px;
  background: var(--primary, #376C82);
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
}
.stm-copy-btn:hover {
  background: var(--primary-hover, #2d5a6e);
  border-color: var(--primary-hover, #2d5a6e);
}
[data-theme="dark"] .stm-copy-btn {
  background: #2A4D5C;
  border-color: #3d6e82;
  color: #C8E2EC;
}
[data-theme="dark"] .stm-copy-btn:hover {
  background: #336070;
  border-color: #4a7d94;
  color: #DCF0F8;
}

.stm-issued-wrap {
  border-top: 1px solid var(--border, #d2dbe0);
  padding-top: 14px;
  margin-top: 4px;
}

.stm-issued-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #597381);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.stm-issued-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border, #d2dbe0);
  font-size: 12.5px;
}
.stm-issued-item:last-child { border-bottom: none; }

.stm-issued-item-info { flex: 1; min-width: 0; }
.stm-issued-item-meta {
  font-size: 11px;
  color: var(--text-secondary, #597381);
  margin-top: 2px;
}
.stm-issued-item-expired { color: #dc2626; }

.stm-revoke-btn {
  padding: 3px 9px;
  font-size: 11.5px;
  font-family: inherit;
  border: 1px solid var(--border, #d2dbe0);
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary, #597381);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .12s, color .12s;
}
.stm-revoke-btn:hover { border-color: #dc2626; color: #dc2626; }

/* ─── Guest indicator badge ─────────────────────────────────── */
.guest-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(55,108,130,.10);
  border: 1px solid rgba(55,108,130,.25);
  font-size: 12px;
  font-weight: 500;
  color: var(--primary, #376C82);
  white-space: nowrap;
}

.guest-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

/* 다크모드 */
/* ── Share Token Modal 다크모드 ── */
[data-theme="dark"] .stm-modal .modal-body { background: var(--bg-panel); }

[data-theme="dark"] .stm-perm-btn {
  box-shadow: none;
  border-color: #2A3238;
}
[data-theme="dark"] .stm-perm-btn:hover {
  border-color: #4a7d94;
  background: rgba(141,191,209,.06);
}
[data-theme="dark"] .stm-perm-btn.active {
  border-color: #4a7d94;
  background: #1e2e36;
  box-shadow: 0 0 0 3px rgba(74,125,148,.2);
}
[data-theme="dark"] .stm-perm-btn.active .stm-perm-name { color: #8DBFD1; }
[data-theme="dark"] .stm-perm-btn.active .stm-perm-desc { color: #64899a; }

[data-theme="dark"] .stm-link-box {
  background: var(--bg-secondary, #1e293b);
  border-color: #334155;
}
[data-theme="dark"] .stm-link-url {
  background: var(--bg-primary, #0f172a);
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme="dark"] .stm-expire-opt:hover {
  color: #8DBFD1;
  border-color: #4a7d94;
  background: rgba(141,191,209,.08);
}
[data-theme="dark"] .stm-expire-opt.active {
  background: #2A4D5C;
  border-color: #4a7d94;
  color: #C8E2EC;
  font-weight: 600;
}

[data-theme="dark"] .stm-issued-wrap { border-color: #334155; }
[data-theme="dark"] .stm-issued-item { border-color: #1e293b; }
[data-theme="dark"] .stm-revoke-btn { border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .stm-revoke-btn:hover { border-color: #f87171; color: #f87171; }

[data-theme="dark"] .guest-badge {
  background: rgba(91,155,181,.12);
  border-color: rgba(91,155,181,.3);
  color: var(--primary, #5B9BB5);
}

/* ── Summary Panel (bottom collapsible) ── */
.panel-summary {
  background: var(--bg-panel);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-summary:not(.collapsed) {
  height: 160px;
  min-height: 80px;
  max-height: 50vh;
}
.panel-summary.collapsed {
  height: auto !important;
}
.panel-summary.collapsed .summary-body,
.panel-summary.collapsed .summary-resizer {
  display: none;
}
/* Resizer (top drag handle) */
.summary-resizer {
  height: 5px;
  cursor: ns-resize;
  background: transparent;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.summary-resizer:hover,
.summary-resizer.active {
  border-top-color: var(--primary);
  background: rgba(91,155,181,.08);
}
.summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  transition: background var(--transition);
}
.panel-summary:not(.collapsed) .summary-header {
  border-top: none;
}
.summary-header:hover {
  background: var(--bg-hover);
}
.summary-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.summary-chevron {
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}
/* 기본 path = 아래 화살표(▼) → 펼친 상태
   접힌 상태에서는 180° 회전 → 위 화살표(▲) */
.panel-summary.collapsed .summary-chevron {
  transform: rotate(180deg);
}
.summary-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 10px 12px;
  min-height: 0;
}
/* 메모 영역 헤더 (접기/펴기 토글) */
.memo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 0 2px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.memo-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.memo-chevron {
  color: var(--text-tertiary);
  transition: transform 0.15s;
}
.summary-body.memo-collapsed .memo-chevron { transform: rotate(-90deg); }
.summary-body.memo-collapsed .summary-textarea,
.summary-body.memo-collapsed .gs-resizer { display: none; }
.summary-textarea {
  width: 100%;
  flex: 1 1 0;
  min-height: 80px;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-sm);
  line-height: 1.5;
  padding: 8px 10px;
  outline: none;
  transition: border-color var(--transition);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.summary-textarea:focus {
  border-color: var(--primary);
}
.summary-textarea::placeholder {
  color: var(--text-tertiary);
}
.summary-textarea::-webkit-scrollbar { width: 6px; height: 6px; }
.summary-textarea::-webkit-scrollbar-track { background: transparent; }
.summary-textarea::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.summary-textarea::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Dark mode */
[data-theme="dark"] .panel-summary {
  background: var(--bg-panel);
}
[data-theme="dark"] .summary-textarea {
  background: #1a2329;
  border-color: var(--border);
  color: var(--text);
  scrollbar-color: #2A3A44 transparent;
}
[data-theme="dark"] .summary-textarea:focus {
  border-color: var(--primary);
}
[data-theme="dark"] .summary-textarea::-webkit-scrollbar-thumb { background: #2A3A44; }
[data-theme="dark"] .summary-textarea::-webkit-scrollbar-thumb:hover { background: #4A6A7A; }

/* 그룹별 요약 섹션 */
.group-summary-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-height: 80px;
}
.group-summary-section.hidden { display: none; }
.gs-resizer.hidden { display: none; }

/* 메모 ↔ 그룹 설명 사이 드래그 리사이저 */
.gs-resizer {
  height: 6px;
  margin: 2px 0;
  border-top: 1px dashed var(--border);
  cursor: ns-resize;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.gs-resizer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.15s;
}
.gs-resizer:hover { border-top-color: var(--primary); }
.gs-resizer:hover::after,
.gs-resizer.active::after { background: var(--primary); }
.gs-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gs-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.gs-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.gs-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1.5px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  font-family: 'Pretendard', sans-serif;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
  line-height: 1.3;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-chip.filled {
  background: var(--chip-color);
  color: #fff;
  border-color: var(--chip-color);
}
.gs-chip.outlined {
  background: transparent;
  color: var(--chip-color);
  border-color: var(--chip-color);
}
.gs-chip:not(.active) {
  opacity: 0.45;
  filter: saturate(0.5);
}
.gs-chip:hover { opacity: 1; filter: none; }
.gs-chip-marker {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.gs-chip.outlined .gs-chip-marker {
  background: var(--chip-color);
}
.group-summary-textarea {
  width: 100%;
  flex: 1 1 0;
  min-height: 40px;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-sm);
  line-height: 1.5;
  padding: 8px 10px;
  outline: none;
  transition: border-color var(--transition);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.group-summary-textarea:focus { border-color: var(--primary); }
.group-summary-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.group-summary-textarea::placeholder { color: var(--text-tertiary); }
.group-summary-textarea::-webkit-scrollbar { width: 6px; height: 6px; }
.group-summary-textarea::-webkit-scrollbar-track { background: transparent; }
.group-summary-textarea::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.group-summary-textarea::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
[data-theme="dark"] .group-summary-textarea {
  background: #1a2329;
  border-color: var(--border);
  color: var(--text);
  scrollbar-color: #2A3A44 transparent;
}
[data-theme="dark"] .group-summary-textarea:focus { border-color: var(--primary); }
[data-theme="dark"] .group-summary-textarea::-webkit-scrollbar-thumb { background: #2A3A44; }
[data-theme="dark"] .group-summary-textarea::-webkit-scrollbar-thumb:hover { background: #4A6A7A; }