/* =============================================================================
 * ui_template_sheet.css — 엑셀처럼 도는 표 부품(`ui_template_sheet.ts`)
 * 색은 테마 토큰만 — 설계값 = 초록 · 계산 = 노랑 · 손 입력 = 보라 기운
 * ========================================================================== */

.ui-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  outline: none;
}

.ui-sheet__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.ui-sheet__toolbar .ui-btn.is-on {
  background: var(--color-mist-violet);
}

.ui-sheet__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.ui-sheet__scroll {
  overflow: auto;
  max-height: calc(100vh - 260px);
  border: 1px solid var(--color-border);
  background: var(--color-canvas);
}

.ui-sheet__pages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.ui-sheet__table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}

.ui-sheet__page {
  padding: var(--spacing-4) var(--spacing-8);
  color: var(--color-text-secondary);
  text-align: left;
}

.ui-sheet__table th,
.ui-sheet__table td {
  position: relative;
  height: 26px;
  padding: 2px 6px;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-canvas);
  color: var(--color-text-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-sheet__table thead th,
.ui-sheet__table thead td {
  background: var(--color-surface);
  font-weight: 600;
  text-align: center;
}

.ui-sheet__gutter {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-surface) !important;
  color: var(--color-text-secondary);
  font-weight: 500;
  text-align: center;
}

.ui-sheet__table .is-frozen {
  position: sticky;
  z-index: 1;
  box-shadow: 1px 0 0 var(--color-border);
}

.ui-sheet__table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ui-sheet__table td.is-bound {
  background: color-mix(in srgb, var(--color-success) 7%, var(--color-canvas));
}

.ui-sheet__table td.is-calc {
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-canvas));
}

.ui-sheet__table td.is-hand {
  background: color-mix(in srgb, var(--color-lavender-wash) 14%, var(--color-canvas));
}

.ui-sheet--project .ui-sheet__table tbody td.is-locked {
  color: var(--color-text-secondary);
}

.ui-sheet__table td.is-override {
  font-style: italic;
}

.ui-sheet__table td.is-error {
  color: var(--color-danger);
}

.ui-sheet__table .is-editable {
  cursor: cell;
}

.ui-sheet__table td.is-selected {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.ui-sheet__table tr.is-fixed td {
  border-bottom: 2px solid var(--color-border);
}

.ui-sheet__meta td {
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  white-space: normal;
}

.ui-sheet__total td,
.ui-sheet__total th {
  border-top: 2px solid var(--color-border);
  font-weight: 600;
}

.ui-sheet__chip {
  display: inline-block;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
}

.ui-sheet__chip.is-bound {
  background: color-mix(in srgb, var(--color-success) 18%, var(--color-canvas));
  color: var(--color-success);
}

.ui-sheet__chip.is-calc {
  background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas));
  color: var(--color-warning);
}

.ui-sheet__chip.is-hand {
  background: var(--color-mist-violet);
  color: var(--color-accent);
}

.ui-sheet__resize {
  position: absolute;
  top: 0;
  right: -3px;
  z-index: 3;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.ui-sheet__table td input,
.ui-sheet__table th input {
  width: 100%;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  font: inherit;
  text-align: inherit;
}