/* ════════════════════════════════════════
   온라인 사무실 — 사무실 지도 서식 — public/css/office-map.css (기획서 2-1, 2026-09-28)
   색은 교단 CI 전용색만(상태 점은 1-6 과 같은 색). 그라데이션·그림자 효과는 쓰지 않는다.
════════════════════════════════════════ */
.office-map-root { flex: 1; min-height: 0; }
.om-layout {
  display: flex; flex-direction: column; height: 100%; background: #fff;
  border: 1px solid #dfe5ec; border-radius: 12px; overflow: hidden;
}
.om-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid #edf2f7; flex-shrink: 0; }
.om-floors { display: flex; gap: 6px; }
.om-floor {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe5ec; background: #fff; color: #5b6776;
  border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.om-floor.is-on { background: #2F557F; border-color: #2F557F; color: #fff; }
.om-floor-count { font-size: 11px; font-weight: 700; background: #448D21; color: #fff; border-radius: 10px; padding: 0 6px; }
.om-floor-count:empty { display: none; }
.om-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; font-size: 12px; color: #5b6776; }
.om-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.om-stage { flex: 1; min-height: 0; padding: 2px; background: #fff; }
.om-svg { width: 100%; height: 100%; display: block; user-select: none; }
.om-foot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid #edf2f7; flex-shrink: 0; font-size: 12px; color: #6b7684; }
.om-hint { flex: 1; min-width: 0; }
.om-unassigned { border: 1px solid #FFA92D; background: #fff; color: #8a5a00; border-radius: 12px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }

/* 지도 안 */
.om-svg text, .om-svg line { font-family: inherit; pointer-events: none; }
.om-robot { opacity: .55; }
.om-zone { cursor: pointer; }
.om-zone:hover { stroke-width: 3; }
.om-furniture, .om-person, .om-tag, .om-plate { cursor: pointer; }
.om-plate-text { fill: #fff; font-weight: 700; }
.om-plate-note { fill: #fff; opacity: .9; }
.om-badge-text { fill: #fff; font-weight: 700; }
.om-tag-text { fill: #1f2a37; font-weight: 600; }
.om-tag.is-me .om-tag-text { fill: #fff; font-weight: 700; }
.om-tag.is-me .om-dot { stroke: #fff; stroke-width: 1.5; }
.om-person:hover .om-fig { transform: translateY(-2px); }
/* 자리에 없는 사람(퇴근·휴가·접속 안 함)은 흐리게 */
.om-person.is-off .om-fig, .om-person.is-vacation .om-fig, .om-person.is-offline .om-fig { opacity: .35; }
.om-dot { fill: #fff; stroke: #b6bfca; stroke-width: 2; }
.om-dot.is-working { fill: #448D21; stroke: none; }
.om-dot.is-meeting { fill: #E36520; stroke: none; }
.om-dot.is-out { fill: #3E8391; stroke: none; }
.om-dot.is-vacation { fill: #FFA92D; stroke: none; }
.om-dot.is-off { fill: #8a94a3; stroke: none; }

/* 카드·목록 창 */
.om-people { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.om-person-row { width: 100%; border: none; background: transparent; text-align: left; cursor: pointer; font-family: inherit; border-radius: 8px; }
.om-person-row:hover { background: #eef3f8; }
.om-card { display: flex; align-items: center; gap: 14px; padding: 4px 0 8px; }
.om-card .oc-avatar { width: 52px; height: 52px; font-size: 20px; }
.om-card-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.om-card-name { font-size: 16px; font-weight: 700; color: #1f2a37; }
.om-card-dept { font-size: 13px; color: #5b6776; }

/* 휴대폰: 지도를 크게 두고 손가락으로 밀어 본다(목록 화면은 2-3) */
@media (max-width: 700px) {
  .om-legend { margin-left: 0; }
  .om-hint { display: none; }
  .om-stage { overflow: auto; -webkit-overflow-scrolling: touch; }
  .om-svg { width: 1000px; height: 620px; }
}

/* ── 2-2 캐릭터(2026-09-28): 얼굴 동그라미 · 머리 단추 · 꾸미기 창 ── */
.oa-face { overflow: visible; }
.oa-face-clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.oa-face-clip svg { width: 100%; height: 100%; display: block; }
.office-my-avatar { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe5ec; background: #fff; border-radius: 16px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; color: #2F557F; font-weight: 600; }
.office-my-avatar:hover { background: #eef3f8; }
.oc-modal .modal.oa-modal { width: 92vw; max-width: 860px; }
.oa-editor { display: flex; gap: 18px; min-height: 420px; }
.oa-left { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.oa-preview { background: #f6f8fb; border: 1px solid #edf2f7; border-radius: 12px; padding: 8px; }
.oa-preview-svg { width: 100%; height: 250px; display: block; }
.oa-left-btns { display: flex; gap: 6px; }
.oa-left-btns .btn { flex: 1; justify-content: center; }
.oa-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oa-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.oa-tab { border: 1px solid #dfe5ec; background: #fff; color: #5b6776; border-radius: 16px; padding: 5px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.oa-tab.is-on { background: #2F557F; border-color: #2F557F; color: #fff; }
.oa-panel { flex: 1; min-height: 0; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.oa-section { margin-bottom: 14px; }
.oa-section-title { font-size: 12.5px; font-weight: 700; color: #1f2a37; margin-bottom: 6px; }
.oa-options { display: flex; flex-wrap: wrap; gap: 6px; }
.oa-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 6px 6px 4px; border: 2px solid #e4e9f0; background: #fff; border-radius: 10px; cursor: pointer; font-family: inherit; }
.oa-chip svg { width: 52px; height: 52px; display: block; }
.oa-chip:hover { border-color: #b8c7d9; }
.oa-chip.is-on { border-color: #2F557F; background: #eef3f8; }
.oa-chip-label { font-size: 11.5px; color: #3b4654; white-space: nowrap; }
.oa-swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #dfe5ec; cursor: pointer; }
.oa-swatch.is-on { box-shadow: 0 0 0 2px #2F557F; }
@media (max-width: 700px) {
  .oa-editor { flex-direction: column; min-height: 0; }
  .oa-left { width: 100%; }
  .oa-preview-svg { height: 180px; }
  .oa-panel { max-height: 40vh; }
}

/* ── 2-3a(2026-09-28): 말풍선 · 지도 입력칸 · 휴대폰 목록 ── */
.om-bubble-text { fill: #1f2a37; font-weight: 600; }
.om-bubble { pointer-events: none; }
.om-say { display: flex; gap: 8px; padding: 8px 14px; border-top: 1px solid #edf2f7; flex-shrink: 0; }
.om-say-input { flex: 1; min-width: 0; }
.om-view-toggle { display: none; border: 1px solid #2F557F; background: #fff; color: #2F557F; border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.om-list { padding: 10px 12px 16px; }
.om-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.om-quick-btn { border: 2px solid #dfe5ec; background: #fff; border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: #1f2a37; cursor: pointer; font-family: inherit; }
.om-list-floor { font-size: 12.5px; font-weight: 700; color: #5b6776; margin: 14px 2px 6px; }
.om-list-zone { background: #fff; border: 1px solid #edf2f7; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.om-list-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; border-left: 5px solid #2F557F; background: #f7f9fc; cursor: pointer; font-family: inherit; text-align: left; }
.om-list-name { font-size: 14px; font-weight: 700; color: #1f2a37; }
.om-list-note { font-size: 11.5px; color: #6b7684; }
.om-list-count { margin-left: auto; font-size: 12px; color: #6b7684; }
.om-list-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: none; border-top: 1px solid #f0f3f7; background: #fff; cursor: pointer; font-family: inherit; text-align: left; }
.om-list-row:hover { background: #eef3f8; }
.om-list-mid { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.om-list-person { font-size: 13.5px; font-weight: 600; color: #1f2a37; }
@media (max-width: 700px) {
  .om-view-toggle { display: inline-block; }
  .om-say { padding: 6px 8px; }
}

/* ── 2-3b(2026-09-28): 사무실 배치 편집 ── */
.om-edit-btn { border: 1px solid #2F557F; background: #fff; color: #2F557F; border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.om-edit-btn:hover { background: #eef3f8; }
.om-edit-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; background: #f3f6fa; border-bottom: 1px solid #dfe5ec; flex-shrink: 0; }
/* 가구 더하기 — 그림 카드 창(2026-09-28) */
.oc-modal .modal.om-add-modal { width: 92vw; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; }
.om-add-modal .om-add { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.om-add .oa-section-title { margin: 12px 0 6px; }
.om-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.om-add-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 6px; border: 2px solid #e4e9f0; background: #fbfcfe; border-radius: 12px; cursor: pointer; font-family: inherit; }
.om-add-card:hover { border-color: #2F557F; background: #eef3f8; }
.om-add-svg { width: 84px; height: 84px; display: block; }
.om-add-label { font-size: 12px; color: #1f2a37; text-align: center; line-height: 1.3; }
.om-edit-hint { flex: 1; min-width: 200px; font-size: 12px; color: #5b6776; }
.om-svg.is-editing [data-item] { cursor: grab; }
.om-svg.is-editing .om-zone, .om-svg.is-editing .om-plate { cursor: move; }
.om-edit-line { pointer-events: none; }
.om-handle { cursor: nwse-resize; }
.oc-modal .modal.om-zone-modal { width: 92vw; max-width: 620px; max-height: 92vh; display: flex; flex-direction: column; }
.om-zone-modal .om-zone-form { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }   /* 창이 화면보다 길면 안쪽만 스크롤 — 적용 단추가 늘 보이게 */
.om-check-list { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 180px; overflow-y: auto; padding: 6px 8px; border: 1px solid #edf2f7; border-radius: 8px; }
.om-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }

/* ── 지도 확대·이동(2026-09-28 사무장 요청 「돋보기」) ── */
.om-stage { position: relative; }
.om-zoom { position: absolute; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #dfe5ec; border-radius: 10px; padding: 3px; z-index: 2; }
.om-zoom-btn { min-width: 34px; height: 32px; border: none; background: #fff; color: #2F557F; font-size: 18px; font-weight: 700; border-radius: 8px; cursor: pointer; font-family: inherit; }
.om-zoom-btn:hover { background: #eef3f8; }
.om-zoom-fit { font-size: 12.5px; padding: 0 10px; }
.om-zoom-label { min-width: 44px; text-align: center; font-size: 12px; color: #5b6776; font-weight: 600; }
.om-svg.is-zoomed { cursor: grab; }
.om-svg.is-panning { cursor: grabbing; }
.om-svg { touch-action: none; }
/* 휴대폰은 지도를 1000px 로 두고 손가락으로 밀어 보므로 단추를 숨긴다(두 손가락 확대는 브라우저 기본) */
@media (max-width: 700px) { .om-zoom { display: none; } .om-svg { touch-action: auto; } }

/* ── 벽 게시판(휴가 게시판·출장 현황) · 달력 창(2026-09-28) ── */
.om-board.is-link { cursor: pointer; }
.om-board.is-link:hover polygon:first-child { stroke: #2F557F; stroke-width: 2.5; }
.om-board-text { pointer-events: none; font-family: inherit; }
.oc-modal .modal.om-board-modal { width: 94vw; max-width: 1040px; max-height: 94vh; display: flex; flex-direction: column; }
.om-board-modal .om-board-body { flex: 1; min-height: 0; overflow-y: auto; }
.om-board-msg { padding: 28px 8px; text-align: center; color: #5b6776; font-size: 14px; }