/**
 * Mindmap Node Styles
 *
 * 노드 렌더링 스타일
 */

/* Node Group */
.node {
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.node:hover {
  filter: brightness(0.98);
}

.node--dragging {
  cursor: grabbing;
  opacity: 0.8;
}

/* Node Shape */
.node__shape {
  fill: var(--color-bg-primary);
  stroke: var(--color-neutral-300);
  stroke-width: 1.5;
  transition: all var(--transition-fast);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.node:hover .node__shape {
  stroke: var(--color-primary-400);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.node--selected .node__shape {
  stroke: var(--color-primary-500);
  stroke-width: 2;
  filter: drop-shadow(0 0 0 3px rgba(33, 150, 243, 0.3));
}

.node--root .node__shape {
  fill: var(--color-primary-500);
  stroke: var(--color-primary-600);
}

/* Node Content */
.node__content {
  font-family: var(--font-family-base);
  font-size: 14px;
  fill: var(--color-text-primary);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.node--root .node__content {
  fill: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* Node Text Input (Editing Mode) */
.node__input {
  position: absolute;
  padding: var(--spacing-2);
  font-family: var(--font-family-base);
  font-size: 14px;
  text-align: center;
  background-color: var(--color-bg-primary);
  border: 2px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  outline: none;
  resize: none;
  overflow: hidden;
  z-index: var(--z-node-selected);
}

/* Expand/Collapse Button */
.node__toggle {
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.node:hover .node__toggle,
.node--selected .node__toggle {
  opacity: 1;
}

.node__toggle-circle {
  fill: var(--color-bg-primary);
  stroke: var(--color-neutral-400);
  stroke-width: 1.5;
}

.node__toggle:hover .node__toggle-circle {
  stroke: var(--color-primary-500);
}

.node__toggle-icon {
  fill: var(--color-neutral-600);
  font-size: 10px;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Add Child Button */
.node__add-btn {
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.node:hover .node__add-btn {
  opacity: 1;
}

.node__add-btn-circle {
  fill: var(--color-primary-500);
  transition: fill var(--transition-fast);
}

.node__add-btn:hover .node__add-btn-circle {
  fill: var(--color-primary-600);
}

.node__add-btn-icon {
  fill: var(--color-text-inverse);
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Node Badges/Icons */
.node__badge {
  font-size: 10px;
}

.node__icon {
  width: 16px;
  height: 16px;
}

/* Collapsed Node Indicator */
.node__collapsed-indicator {
  fill: var(--color-neutral-500);
  font-size: 10px;
}

/* Node Selection Handles */
.node__handle {
  fill: var(--color-bg-primary);
  stroke: var(--color-primary-500);
  stroke-width: 1.5;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.node--selected .node__handle {
  opacity: 1;
}

.node__handle:hover {
  fill: var(--color-primary-100);
}

/* Node Priority Colors */
.node--priority-high .node__shape {
  stroke: var(--color-error);
}

.node--priority-medium .node__shape {
  stroke: var(--color-warning);
}

.node--priority-low .node__shape {
  stroke: var(--color-success);
}

/* Node States */
.node--completed .node__content {
  text-decoration: line-through;
  opacity: 0.6;
}

.node--highlighted .node__shape {
  stroke: var(--color-warning);
  stroke-width: 3;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255, 152, 0, 0));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.5));
  }
}