/* ============================================================================= * spreadsheet_grid.css (주인 C) * 격자 4 판 · 머리 · 칸 기본 모양. 색 · 간격은 여기 변수만(다른 파일은 이 클래스만 씀). * ========================================================================== */ .aislo-grid { --aislo-grid-line: #d9d9d9; --aislo-grid-head-bg: #f3f3f3; --aislo-grid-head-fg: #444; --aislo-grid-head-border: #cfcfcf; --aislo-grid-freeze-shadow: rgba(0, 0, 0, 0.12); --aislo-grid-selected: #1a73e8; position: relative; overflow: hidden; width: 100%; height: 100%; font: 10pt "굴림", sans-serif; background: #fff; 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 #888; } .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__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: #fff; cursor: cell; } .aislo-grid--gridlines .aislo-cell { border-right: 1px solid var(--aislo-grid-line); border-bottom: 1px solid var(--aislo-grid-line); } .aislo-cell__text { overflow: hidden; text-overflow: ellipsis; white-space: inherit; } .aislo-cell.is-error { color: #c00; } .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 #fff; cursor: crosshair; z-index: 3; } .aislo-grid__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 7; } .aislo-grid__overlay > * { pointer-events: auto; }