.sbb-board { font-family: inherit; }
.sbb-header { display:flex; justify-content:flex-end; margin-bottom: 10px; }
.sbb-add-btn {
  padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px;
  background: #fff; cursor:pointer; font-weight:600;
}
.sbb-grid {
  display: grid;
  grid-template-columns: repeat(var(--sbb-cols, 3), minmax(0,1fr));
  gap: 12px;
}
.sbb-board[data-columns="1"] .sbb-grid { --sbb-cols: 1; }
.sbb-board[data-columns="2"] .sbb-grid { --sbb-cols: 2; }
.sbb-board[data-columns="3"] .sbb-grid { --sbb-cols: 3; }
.sbb-board[data-columns="4"] .sbb-grid { --sbb-cols: 4; }

.sbb-note {
  background: #fff9a8;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  transform: rotate(var(--sbb-rot));
  position: relative;
  min-height: 120px;
}
.sbb-note:nth-child(odd) { --sbb-rot: -0.6deg; }
.sbb-note:nth-child(even) { --sbb-rot: 0.7deg; }

.sbb-note-body { display:flex; flex-direction: column; gap: 8px; }
.sbb-note-img { width:100%; border-radius: 8px; object-fit: cover; max-height: 220px; }
.sbb-note-text { white-space: pre-wrap; word-break: break-word; }

.sbb-note-actions {
  display:flex; gap:6px; margin-top:10px;
}
.sbb-note-actions button{
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.8); cursor:pointer;
}
.sbb-note-actions button:hover { background: #fff; }

.sbb-modal {
  position: fixed; inset:0; background: rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center; z-index: 9999;
}
.sbb-hidden { display:none; }
.sbb-modal-card {
  width: min(520px, 92vw); background:#fff; border-radius: 12px; padding: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  display:flex; flex-direction: column; gap: 10px;
}
.sbb-input { width:100%; padding:10px; border:1px solid #ddd; border-radius:8px; resize:vertical; }
.sbb-file { font-size: 14px; }
.sbb-modal-actions { display:flex; justify-content:flex-end; gap:8px; }
.sbb-modal-actions button { padding:8px 12px; border-radius:8px; border:1px solid #ddd; background:#f8f8f8; cursor:pointer; }
.sbb-modal-actions .sbb-save { background:#111; color:#fff; border-color:#111; }
.sbb-modal-help { color:#666; }