/* spreadsheet.css (주인 D) — 부품 틀 · 주소 상자 · 수식 입력줄 · 칸 편집기 · 채우기 미리보기 · 알림 */ .ss { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 13px; color: #1f2328; background: #fff; } .ss-grid-host { flex: 1 1 auto; min-height: 0; } .ss-bar { display: flex; flex: none; align-items: stretch; height: 26px; border-bottom: 1px solid #d0d7de; } .ss-addr { width: 96px; padding: 0 6px; border: none; border-right: 1px solid #d0d7de; font: inherit; outline: none; } .ss-addr:focus { box-shadow: inset 0 0 0 2px #217346; } .ss-fx { align-self: center; padding: 0 8px; color: #6e7781; font-style: italic; user-select: none; } .ss-formula { flex: 1; padding: 4px 6px; border: none; border-left: 1px solid #d0d7de; font: inherit; line-height: 18px; white-space: pre; overflow: hidden; resize: none; outline: none; } .ss--readonly .ss-formula { color: #57606a; } /* 칸 편집기 = 숨은 textarea — 쉴 때는 활성 칸 자리에 투명하게(한글 조합 창 자리) */ .ss-input { position: absolute; z-index: 5; box-sizing: border-box; margin: 0; padding: 1px 3px; border: 2px solid #217346; background: #fff; color: #000; font: inherit; line-height: 1.25; white-space: pre; overflow: hidden; resize: none; outline: none; } .ss-input--idle { width: 1px; height: 1px; min-width: 0 !important; min-height: 0 !important; padding: 0; border: 0; opacity: 0; pointer-events: none; } .ss-fill-preview { position: absolute; z-index: 4; box-sizing: border-box; border: 1px dashed #57606a; pointer-events: none; } .ss-toast { position: absolute; right: 12px; bottom: 40px; z-index: 20; padding: 6px 10px; border-radius: 4px; background: #24292f; color: #fff; } /* 2단계 잇기 — 서식 붓 · 찾기 패널 · 메모 · 골라 붙여넣기 */ .ss-brush { flex: none; padding: 0 8px; border: none; border-right: 1px solid #d0d7de; background: none; font: inherit; cursor: pointer; } .ss-brush.is-on { background: #dafbe1; box-shadow: inset 0 0 0 2px #217346; } .ss--painting .ss-grid-host { cursor: copy; } .ss-find { position: absolute; top: 4px; right: 16px; z-index: 20; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 15%); } .ss-find[hidden], .ss-find__row[hidden], .ss-memo[hidden], .ss-pick[hidden], .spreadsheet-comment-balloon[hidden] { display: none; } .ss-find__row { display: flex; align-items: center; gap: 4px; } .ss-find__input { width: 180px; padding: 2px 6px; border: 1px solid #d0d7de; font: inherit; } .ss-find__btn { padding: 2px 8px; border: 1px solid #d0d7de; border-radius: 4px; background: #f6f8fa; font: inherit; cursor: pointer; } .ss-find__opt { display: flex; align-items: center; gap: 2px; font-size: 12px; } .ss-find__status { font-size: 12px; color: #57606a; } .ss-memo, .spreadsheet-comment-balloon { position: absolute; z-index: 15; min-width: 140px; max-width: 260px; padding: 4px 6px; border: 1px solid #bf8700; background: #fff8c5; font: inherit; white-space: pre-wrap; box-shadow: 0 2px 6px rgb(0 0 0 / 15%); } .ss-memo { min-height: 60px; resize: both; outline: none; } .ss-pick { position: absolute; z-index: 20; display: flex; gap: 2px; padding: 4px; border: 1px solid #d0d7de; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 15%); } .ss-pick > button { padding: 2px 8px; border: 1px solid #d0d7de; background: #f6f8fa; font: inherit; cursor: pointer; } /* 함수 자동 완성 · 인자 도움말 */ .ss-hint { position: absolute; z-index: 6; min-width: 200px; max-width: 360px; border: 1px solid #d0d7de; background: #fff; font-size: 12px; box-shadow: 0 4px 12px rgb(0 0 0 / 15%); } .ss-hint[hidden] { display: none; } .ss-hint__item, .ss-hint__help { padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-hint__item { cursor: pointer; } .ss-hint__item.is-on { background: #ddf4ff; } /* 데이터 메뉴 — 패널 창 · 유효성 목록 ▼ */ .ss-dialog { position: absolute; top: 4px; right: 16px; z-index: 21; max-height: calc(100% - 8px); overflow: auto; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 15%); } .ss-dialog[hidden], .ss-list-arrow[hidden] { display: none; } .ss-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #d0d7de; font-weight: bold; } .ss-dialog__body { padding: 8px; } .ss-list-arrow { position: absolute; z-index: 8; width: 16px; padding: 0; border: 1px solid #8c959f; background: #f6f8fa; font-size: 9px; cursor: pointer; } .ss-validation__dropdown { position: absolute; z-index: 20; }