/* ---------- 시트 편집기 (co-sheet) — 고스트 textarea · 선택 오버레이 · 셀 서식 · 시트 탭 ---------- */
.xl-scroll{position:relative}
/* 오버레이 — 테이블과 같은 크기로 테이블 위에 깔리고 함께 스크롤. 클릭은 통과(pointer-events:none), 필요한 자식만 auto */
#coLayer{position:absolute;left:0;top:0;z-index:1;pointer-events:none}
#coSelBox{position:absolute;box-sizing:border-box;border:2px solid #217346;pointer-events:none;box-shadow:0 0 0 1px #fff inset}
#coSelBox.multi{background:rgba(33,115,70,.08)}
#coSelBox::after{content:"";position:absolute;right:-4px;bottom:-4px;width:6px;height:6px;background:#217346;border:1px solid #fff}
/* 고스트 — 항상 포커스된 1×1px textarea. 편집 모드(.edit)에서만 셀 크기로 커진다. display:none·visibility:hidden 금지(조합이 끊긴다) */
.co-ghost{position:absolute;width:1px;height:1px;opacity:0;border:none;outline:none;resize:none;overflow:hidden;padding:0;margin:0;font:12.5px/25px inherit;font-family:inherit;color:#1F1F1D;background:transparent;white-space:pre;pointer-events:none;z-index:6;caret-color:transparent}
.co-ghost.edit{opacity:1;background:#fff;box-sizing:border-box;border:2px solid #217346;padding:0 4px;line-height:21px;pointer-events:auto;caret-color:#1F1F1D;box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* 셀 서식 */
.xl td.co-b{font-weight:700}
.xl td.co-i{font-style:italic}
.xl td.co-u{text-decoration:underline}
.xl td.co-al-l{text-align:left}
.xl td.co-al-c{text-align:center}
.xl td.co-al-r{text-align:right}
.xl td.co-err{color:#C2453A;font-weight:600}
.xl th.hl{background:#E8EFE9;color:#217346}
.xl th.xl-corner{cursor:pointer}
/* 리본 토글 상태 */
#rb-xlsx [data-co].on{background:#E3F1E8;color:#217346}
/* 시트 탭 — max-width 45%: 탭이 늘어도 상태바 중앙(하단 Q 버튼 자리)에 닿지 않게 */
#xlTabs{max-width:45%;overflow-x:auto}
.xl-add{font-size:16px;color:#8A8A88;width:24px;height:24px;border-radius:6px;display:grid;place-items:center}
.xl-add:hover{background:var(--hover);color:#1F1F1D}
.xl-tab{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:#6B6B69;border-bottom:2px solid transparent;padding:5px 4px;cursor:pointer;white-space:nowrap;user-select:none}
.xl-tab.on{font-weight:600;color:#217346;border-bottom-color:#217346}
.xl-tab-n[contenteditable="true"]{outline:none;box-shadow:0 0 0 2px #217346;border-radius:4px;padding:0 4px;background:#fff}
.xl-tab-x{width:16px;height:16px;border-radius:4px;color:#9C9C9A;font-size:13px;line-height:1;display:none;place-items:center}
.xl-tab:hover .xl-tab-x{display:grid}
.xl-tab-x:hover{background:#FBE9E7;color:#C2453A}
/* 다른 참여자 — 색 박스 + 이름표. 편집 중은 점선 펄스 */
.co-peer{position:absolute;box-sizing:border-box;border:2px solid var(--c,#9C9C9A);background:color-mix(in srgb,var(--c,#9C9C9A) 9%,transparent);pointer-events:none;z-index:2}
.co-peer-tag{position:absolute;left:-2px;top:-19px;background:var(--c,#9C9C9A);color:#fff;font-size:10.5px;font-weight:600;line-height:17px;padding:0 6px;border-radius:4px 4px 4px 0;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.co-peer.top .co-peer-tag{top:auto;bottom:-19px;border-radius:0 4px 4px 4px}
.co-peer.editing{border-style:dashed;animation:co-pulse 1.1s ease-in-out infinite}
@keyframes co-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,#9C9C9A) 35%,transparent)}50%{box-shadow:0 0 0 4px transparent}}
/* 원격 변경 flash — 그 사람 색 → 투명 */
.xl td.co-flash{animation:co-flash 1.6s ease-out}
@keyframes co-flash{0%{background:color-mix(in srgb,var(--c,#EE7732) 38%,#fff)}100%{background:#fff}}