Aislo/A00_Common/spreadsheet/spreadsheet_grid.css

/* =============================================================================
 * spreadsheet_grid.css  (주인 C)
 * 격자 4 판 · 머리 · 칸 기본 모양. 색 · 간격은 여기 변수만(다른 파일은 이 클래스만 씀).
 * ========================================================================== */

.aislo-grid {
  /* 앱 전역 테마 토큰(ui_template_theme.css · :root[data-theme])을 그대로 물려받음 —
   * 여기서 값을 다시 안 적음(다크 전환 시 앱 토큰이 바뀌면 같이 바뀜). */
  --aislo-grid-bg: var(--color-surface-raised);
  --aislo-grid-fg: var(--color-text-body);
  --aislo-grid-line: var(--color-border);
  --aislo-grid-head-bg: var(--color-surface);
  --aislo-grid-head-fg: var(--color-text-secondary);
  --aislo-grid-head-border: var(--color-border);
  --aislo-grid-freeze-shadow: rgba(0, 0, 0, 0.12);
  --aislo-grid-selected: var(--color-accent);

  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font:
    10pt "굴림",
    sans-serif;
  background: var(--aislo-grid-bg);
  color: var(--aislo-grid-fg);
  user-select: none;
  -webkit-user-select: none;
}

.aislo-grid__corner,
.aislo-grid__colhead-frozen,
.aislo-grid__colhead-scroll,
.aislo-grid__rowhead-frozen,
.aislo-grid__rowhead-scroll,
.aislo-grid__pane {
  position: absolute;
  overflow: hidden;
}

.aislo-grid__pane--br {
  overflow: auto;
}

.aislo-grid__corner {
  z-index: 5;
  background: var(--aislo-grid-head-bg);
  border-right: 1px solid var(--aislo-grid-head-border);
  border-bottom: 1px solid var(--aislo-grid-head-border);
}

.aislo-grid__colhead-frozen,
.aislo-grid__colhead-scroll {
  z-index: 4;
  background: var(--aislo-grid-head-bg);
  border-bottom: 1px solid var(--aislo-grid-head-border);
}

.aislo-grid__rowhead-frozen,
.aislo-grid__rowhead-scroll {
  z-index: 4;
  background: var(--aislo-grid-head-bg);
  border-right: 1px solid var(--aislo-grid-head-border);
}

.aislo-grid__colhead-frozen,
.aislo-grid__rowhead-frozen {
  z-index: 6;
  box-shadow: 2px 2px 4px var(--aislo-grid-freeze-shadow);
}

.aislo-grid__colhead-inner,
.aislo-grid__rowhead-inner {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.aislo-grid__colhead,
.aislo-grid__rowhead {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--aislo-grid-head-fg);
  border-right: 1px solid var(--aislo-grid-head-border);
  border-bottom: 1px solid var(--aislo-grid-head-border);
  top: 0;
}

.aislo-grid__rowhead {
  left: 0;
  top: auto;
}

.aislo-grid__colhead--hidden-before,
.aislo-grid__rowhead--hidden-before {
  border-left: 3px double var(--aislo-grid-head-fg);
}

.aislo-grid__head-label {
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aislo-grid__resize {
  position: absolute;
  z-index: 2;
}

.aislo-grid__resize--col {
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.aislo-grid__outline-btn {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--aislo-grid-head-border);
  background: var(--aislo-grid-head-bg);
  color: var(--aislo-grid-head-fg);
  font-size: 0.7em;
  line-height: 1;
  cursor: pointer;
}

.aislo-grid__resize--row {
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 6px;
  cursor: row-resize;
}

.aislo-grid__pane-inner {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.aislo-grid__pane--br .aislo-grid__spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.aislo-cell {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 2px;
  background: var(--aislo-grid-bg);
  cursor: cell;
}

.aislo-grid--gridlines .aislo-cell {
  border-right-style: solid;
  border-bottom-style: solid;
  border-right-width: var(--aislo-grid-gridline-w, 1px);
  border-bottom-width: var(--aislo-grid-gridline-w, 1px);
  border-right-color: var(--aislo-grid-line);
  border-bottom-color: var(--aislo-grid-line);
}

.aislo-cell__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: inherit;
}

.aislo-cell.is-error {
  color: var(--color-danger, #c00);
}

/* 오류 칸 — 엑셀 오류 검사 초록 세모(왼 위 · sub3 오류 까닭은 title 풍선). */
.aislo-cell.is-error::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 0;
  border-color: #2e7d32 transparent transparent transparent;
}

.aislo-cell.is-selected {
  outline: 2px solid var(--aislo-grid-selected);
  outline-offset: -1px;
  z-index: 1;
}

/* 메모 칸 — 엑셀처럼 오른 위 모서리 빨간 세모. */
.aislo-cell.has-comment::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent #c00 transparent transparent;
}

.aislo-grid__ref-highlight {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border: 1.5px solid;
  z-index: 3;
}

.aislo-grid__fill-handle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--aislo-grid-selected);
  border: 1px solid var(--aislo-grid-bg);
  cursor: crosshair;
  z-index: 3;
}

.aislo-grid__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.aislo-grid__overlay > * {
  pointer-events: auto;
}

/* 긴 글 넘침(`spreadsheet_spill.ts`) — 옆 빈 칸 위로 글을 폄 · 덮은 칸 사이 눈금선은 감춤(엑셀) ·
 * 고치는 중에는 활성 칸 넘침을 감춤(편집기와 안 겹치게). */
.aislo-cell.is-spill {
  overflow: visible;
  z-index: 1;
}

.aislo-grid--gridlines .aislo-cell.is-spill-r {
  border-right-color: transparent;
}

.ss--editing .aislo-cell.is-selected.is-spill > .aislo-cell__text {
  visibility: hidden;
}

/* 손가락(기기대응 4-2) — 채우기 손잡이를 키움 · 격자는 한 손가락 밀기만 브라우저에(두 손가락 = 격자 확대) */
html[data-touch="on"] .aislo-grid__fill-handle {
  width: 14px;
  height: 14px;
  margin: -4px 0 0 -4px;
}

@media (any-pointer: coarse) {
  .aislo-grid {
    touch-action: pan-x pan-y;
  }
}