Aislo/A00_Common/spreadsheet/spreadsheet_toolbar.css

/* =============================================================================
 * spreadsheet_toolbar.css  (주인 E)
 * 도구 모음 · 시트 탭 · 우클릭 메뉴 · 클립보드 안내 토스트 — 화면 스타일 한 벌.
 * 색 · 간격은 테마 토큰만(`ui_template_theme.css`).
 * ========================================================================== */

.ss-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ss-toolbar__group {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-right: var(--spacing-8);
  border-right: 1px solid var(--color-border);
}

.ss-toolbar__group:last-child {
  border-right: 0;
}

.ss-toolbar .ui-btn {
  padding: 4px 8px;
  font-size: 0.82rem;
}

.ss-toolbar .ui-btn.is-on {
  background: var(--color-mist-violet);
  box-shadow: inset 0 0 0 1px var(--color-royal-amethyst);
}

.ss-toolbar__select {
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-text-body);
  font-size: 0.8rem;
}

.ss-toolbar__input {
  height: 28px;
  width: 72px;
  padding: 0 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-text-body);
  font-size: 0.8rem;
}

.ss-toolbar__input--font {
  width: 96px;
}

.ss-toolbar__input--size {
  width: 48px;
}

.ss-toolbar__input--numfmt {
  width: 140px;
}

.ss-toolbar__color {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.ss-toolbar__clear {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  cursor: pointer;
}

.ss-toolbar__popover {
  position: absolute;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 180px;
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.ss-toolbar__popover[hidden] {
  display: none;
}

.ss-toolbar__popover-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.ss-toolbar__popover-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
}

/* ── 시트 탭 ─────────────────────────────────────────────────────────────── */

.ss-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  padding: var(--spacing-4) var(--spacing-8);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ss-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-paper);
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}

.ss-tabs__tab.is-active {
  background: var(--color-canvas);
  color: var(--color-text-body);
  font-weight: 600;
}

.ss-tabs__tab.is-dragover {
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.ss-tabs__tab input {
  width: 96px;
  border: 1px solid var(--color-focus-ring);
  border-radius: var(--radius-sm);
  font: inherit;
}

.ss-tabs__add {
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* ── 우클릭 메뉴(그리드 · 탭 공용, `ui_template_context_menu.ts`) ───────────── */

.ss__context-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.ss__context-menu[hidden] {
  display: none;
}

.ss__context-menu-item {
  padding: var(--spacing-8) var(--spacing-12);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ss__context-menu-item:hover {
  background: var(--color-surface-sunken, var(--color-mist-violet));
}

.ss__context-menu-item.is-danger {
  color: var(--color-danger);
}

.ss__context-menu-sep {
  margin: 2px 4px;
  border-top: 1px solid var(--color-border);
}

/* ── 메모 편집 창(칸 우클릭 [메모 삽입 · 편집]) ──────────────────────────────── */

.ss-comment-editor {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 35%);
}

.ss-comment-editor__panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 280px;
  padding: var(--spacing-16);
  border-radius: var(--radius-cards);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.ss-comment-editor__input {
  min-height: 80px;
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-text-body);
  font: inherit;
  resize: vertical;
}

.ss-comment-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-8);
}