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;
}

/* 단추 · 칸 = 부품 단추(24) · 입력 · 고르기(28) — 여기는 켬 · 폭만(553-6) */
.ss-toolbar .ui-btn.is-on {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.ss-toolbar__select option {
  background: var(--color-canvas);
  color: var(--color-text-body);
}

.ss-toolbar__input {
  width: 72px;
}

.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__popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  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-toolbar__unit-pop {
  max-height: 340px;
  overflow-y: auto;
}

.ss-toolbar__unit-section + .ss-toolbar__unit-section {
  margin-top: var(--spacing-8);
}

.ss-toolbar__unit-label {
  margin-bottom: var(--spacing-4);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

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

.ss-toolbar__unit-grid > .ui-btn[data-size] {
  min-width: 0;
  padding-inline: 2px;
}

.ss-toolbar__hint {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  max-width: 320px;
}

.ss-toolbar__formula-hint {
  border: 0;
  padding: 0;
  background: none;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  text-align: right;
  cursor: pointer;
}

.ss-toolbar__formula-hint:hover {
  color: var(--color-text-body);
}

.ss-toolbar__formula-hint-detail {
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  text-align: right;
}

.ss-toolbar__formula-hint-detail[hidden] {
  display: none;
}

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

.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);
  background: var(--color-canvas);
  color: var(--color-text-body);
  font: inherit;
}

/* ── 우클릭 메뉴(그리드 · 탭 공용, `ui_template_context_menu.ts`) — 모양 · 자리는 공용 `.ui-ctx-menu` ── */

.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: var(--color-scrim);
}

.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);
}

/* ⋯ 칸 메뉴(기기대응 3-5) — 터치 모드에서만 */
.ss-toolbar .ss-toolbar__more {
  display: none;
}

html[data-touch="on"] .ss-toolbar .ss-toolbar__more {
  display: inline-flex;
}

/* 자판 없는 기기 단추 줄(기기대응 4-3 · spreadsheet_touch_keys.ts) — 터치 모드에서만 */
.ss-touch-keys {
  display: none;
}

html[data-touch="on"] .ss-touch-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}