/* ════════════════════════════════════════
   온라인 사무실 — AI 에이전트 — public/css/office-agents.css (3단계 3a, 2026-09-29)
   지도 오른쪽 패널(기획서 그림 모양) · 대화 창 · 원문 창.
   색은 교단 CI(Denim #2F557F · Ming #3E8391 · Grapevine #7F264A · Campfire #E36520 · Tree Frog #448D21 · Emperor #4B207F)만 쓴다.
════════════════════════════════════════ */
/* 지도 + 패널 한 줄 */
.om-shell { display: flex; gap: 12px; height: 100%; min-height: 0; }
.om-shell > .om-layout { flex: 1; min-width: 0; }
.oag-panel { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid #dfe5ec; border-radius: 12px; padding: 14px 12px; }
.oag-panel-title { font-size: 16px; font-weight: 800; color: #1f2a37; margin: 0 2px 10px; }
.oag-filters { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.oag-filter { border: 1px solid #dfe5ec; background: #f4f6f9; color: #5b6776; border-radius: 14px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.oag-filter.is-on { background: #2F557F; border-color: #2F557F; color: #fff; }
.oag-cards { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.oag-card { display: flex; align-items: center; gap: 12px; width: 100%; border: 1.5px solid #e3e8ee; background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; font-family: inherit; text-align: left; }
.oag-card:hover { border-color: #b9c6d6; }
.oag-card.is-busy { background: #f3f6fa; }
.oag-card.is-planned { cursor: default; opacity: .6; }
.oag-card.is-planned:hover { border-color: #e3e8ee; }
.oag-card.is-off { opacity: .75; }
.oag-face { flex-shrink: 0; display: block; }
.oag-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oag-card-name { display: flex; align-items: center; gap: 6px; }
.oag-card-name b { font-size: 14.5px; color: #1f2a37; }
.oag-tag { color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 1px 7px; white-space: nowrap; }
.oag-card-state { font-size: 12px; color: #6b7684; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oag-card-state.is-busy { color: #1f2a37; font-weight: 600; }
.oag-panel-help { margin: 10px 2px 0; font-size: 11.5px; color: #8a94a3; }
.oag-empty { color: #8a94a3; font-size: 13px; text-align: center; margin: 24px 0; }

/* 지도 로봇 */
.om-robot.is-live { opacity: 1; }
.om-robot.is-planned { opacity: .5; }
.om-robot.is-busy .om-robot-eye { fill: #FFA92D; }
.om-bot { cursor: pointer; }
.om-bot.is-planned { opacity: .8; }
.om-svg .om-bot-text { fill: #1f2a37; font-weight: 600; }

/* 대화 창 */
.modal.oag-modal { width: 760px; max-width: calc(100vw - 32px); height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; padding: 0; }
.oag-modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #edf2f7; }
.oag-modal-title { flex: 1; min-width: 0; }
.oag-modal-title h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; color: #1f2a37; }
.oag-modal-title .oc-help { margin: 2px 0 0; }
.oag-modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 18px 14px; }
.oag-log { flex: 1; min-height: 120px; overflow-y: auto; background: #f7f9fb; border-radius: 10px; padding: 10px; }
.oag-item { margin-bottom: 14px; }
.oag-q-bubble { margin-left: auto; max-width: 75%; width: fit-content; background: #2F557F; color: #fff; border-radius: 12px 12px 2px 12px; padding: 7px 11px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.oag-a-card { margin-top: 6px; max-width: 90%; background: #fff; border: 1px solid #e3e8ee; border-radius: 12px 12px 12px 2px; padding: 9px 12px; font-size: 13.5px; }
.oag-status { color: #6b7684; font-weight: 600; font-size: 13px; }
.oag-status.is-err { color: #7F264A; }
.oag-a-card.is-waiting .oag-status { color: #E36520; }
.oag-answer { margin: 0 0 6px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.oag-answer.is-none { color: #6b7684; margin: 0; }
.oag-sources { list-style: none; margin: 0; padding: 0; border-top: 1px dashed #e3e8ee; }
.oag-sources li { padding: 6px 0; border-bottom: 1px dashed #eef1f4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oag-sources li:last-child { border-bottom: 0; }
.oag-chip { border: 0; border-radius: 12px; padding: 2px 9px; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit; }
.oag-chip.is-admin { background: #2F557F; }
.oag-chip.is-council { background: #3E8391; }
.oag-chip:hover { filter: brightness(1.1); }
/* 규정봇 근거(2026-09-29 4단계) — Grapevine 칩 · 조항 · 인용 문구 · 개정 전 문구 · 원문 대조 요망 */
/* 총괄봇 답(2026-09-29) — 맡긴 봇 띠 · 봇별 접는 칸(안은 그 봇 화면과 같은 카드) */
.oag-chief-who { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 6px; }
.oag-chief-who-k { font-size: 11.5px; color: #6b7684; font-weight: 700; }
.oag-chief-bot { font-size: 11.5px; font-weight: 700; color: #fff; border-radius: 10px; padding: 1px 8px; }
.oag-chief-task { border: 1px solid #e3e8ee; border-radius: 10px; margin-top: 8px; background: #fbfcfd; }
.oag-chief-sum { display: flex; align-items: center; gap: 7px; padding: 7px 10px; cursor: pointer; font-size: 13px; list-style: none; }
.oag-chief-sum::-webkit-details-marker { display: none; }
.oag-chief-sum::before { content: '▸'; color: #8a94a3; font-size: 11px; }
.oag-chief-task[open] > .oag-chief-sum::before { content: '▾'; }
.oag-chief-q { flex: 1; min-width: 0; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oag-chief-state { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: #448D21; }
.oag-chief-state.is-none { color: #8a94a3; }
.oag-chief-state.is-err { color: #b42318; }
.oag-chief-task > .oag-status { margin: 0 10px 8px; }
.oag-a-card.oag-chief-sub { max-width: none; margin: 0 8px 8px; box-shadow: none; }
/* 질문할 때 AI 모델 고르기(2026-09-29) — 「질문」 단추 위 선택 칸 · 답 카드 오른쪽 아래 모델 이름 */
.oag-send-col { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.oag-model { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid #cfd6de; border-radius: 8px; background: #fff; color: #1f2a37; cursor: pointer; }
.oag-send-col .oag-send { flex: 1; }
.oag-model-tag { text-align: right; font-size: 11px; color: #8a94a3; margin-top: 6px; }
.oag-chip.is-rule { background: #7F264A; }
.oag-src-clause { font-size: 12px; color: #7F264A; font-weight: 600; }
.oag-src-warn { font-size: 11.5px; font-weight: 700; color: #9a4c13; background: #fdf3ea; border: 1px solid #f1cfa8; border-radius: 10px; padding: 0 7px; }
.oag-src-quote { flex-basis: 100%; font-size: 12.5px; color: #1f2a37; background: #f7f3f5; border-left: 3px solid #7F264A; padding: 4px 8px; border-radius: 0 6px 6px 0; white-space: pre-wrap; word-break: break-word; }
.oag-src-old { flex-basis: 100%; font-size: 12px; color: #6b7684; display: flex; gap: 6px; align-items: baseline; }
.oag-src-old del { color: #9a4c13; }
.oag-src-old-k { flex-shrink: 0; font-weight: 700; color: #6b7684; border: 1px solid #d5dbe2; border-radius: 8px; padding: 0 5px; font-size: 11px; }
.oag-rule { max-height: calc(100vh - 220px); overflow-y: auto; }
.oag-rule-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: #4b5563; margin: 0 0 8px; }
.oag-rule-note { color: #6b7684; }
.oag-rule-off { color: #fff; background: #6b7684; border-radius: 8px; padding: 0 7px; font-weight: 700; }
.oag-rule-miss { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: #9a4c13; }
/* 근거 대조 보완(2026-10-04) — 위치 바로잡음 꼬리표 · 답 글 점검 경고 상자 */
.oag-src-fixed { font-size: 11.5px; font-weight: 700; color: #2c6570; background: #e3f0f2; border: 1px solid #b9d9df; border-radius: 10px; padding: 0 7px; cursor: help; }
.oag-check { margin: 6px 0 4px; padding: 7px 10px; border-left: 3px solid #E36520; background: #fdf3ea; border-radius: 6px; font-size: 12.5px; color: #6b3a10; line-height: 1.55; }
.oag-check b { display: block; margin-bottom: 2px; color: #9a4c13; }
.oag-rule .rl-content.oag-rule-content { overflow: visible; min-height: auto; padding: 4px 2px 8px; }
.oag-rule mark.oag-rule-hit { background: #fff3a3; padding: 0 1px; }
.oag-src-date { font-size: 12px; color: #6b7684; }
.oag-src-title { font-size: 13px; font-weight: 600; color: #1f2a37; }
.oag-src-point { flex-basis: 100%; font-size: 12.5px; color: #3c4653; padding-left: 2px; }
.oag-samples { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.oag-sample { border: 1px solid #cfdae6; background: #fff; color: #2F557F; border-radius: 14px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.oag-ask { display: flex; gap: 8px; align-items: stretch; }
.oag-q { flex: 1; resize: none; border: 1px solid #cfd7e1; border-radius: 10px; padding: 8px 10px; font-size: 14px; font-family: inherit; }
.oag-send { white-space: nowrap; }
.oag-foot { margin: 6px 0 0; font-size: 11.5px; color: #8a94a3; }

/* 원문 창 — 의사록 통합검색 카드(minutes.css .mn-card)를 그대로 쓰고 창 안 여백만 맞춘다 */
.oag-agenda-overlay .modal { width: 820px; max-width: calc(100vw - 32px); }
.oag-agenda { max-height: calc(100vh - 220px); overflow-y: auto; }
.oag-agenda .mn-card { margin: 0; box-shadow: none; }

@media (max-width: 1100px) {
  #office-map-root { overflow-y: auto; }   /* 패널이 지도 아래로 — 사무실 칸 안에서 밀어 본다 */
  .om-shell { flex-direction: column; height: auto; }
  .om-shell > .om-layout { height: 640px; }
  .oag-panel { width: auto; }
  .oag-cards { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .oag-card { width: calc(50% - 4px); }
}
@media (max-width: 700px) {
  .om-shell > .om-layout { height: auto; min-height: 480px; }
  .oag-card { width: 100%; }
  .modal.oag-modal { height: calc(100vh - 24px); max-width: calc(100vw - 16px); }
  .oag-modal-body { padding: 10px; }
  .oag-a-card, .oag-q-bubble { max-width: 100%; }
}

/* ── 오른쪽 패널 전환 + 메뉴 즐겨찾기(2026-09-29) ── */
.opn-seg { display: flex; background: #eef1f5; border-radius: 10px; padding: 3px; margin-bottom: 12px; flex-shrink: 0; }
.opn-seg-btn { flex: 1; border: 0; background: transparent; color: #6b7684; font-size: 13.5px; font-weight: 700; padding: 7px 0; border-radius: 8px; cursor: pointer; font-family: inherit; }
.opn-seg-btn.is-on { background: #fff; color: #2F557F; box-shadow: 0 1px 0 #d5dce5; }
.ofv-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; flex-shrink: 0; }
.ofv-head strong { font-size: 15px; color: #1f2a37; }
.ofv-edit { border: 1px solid #cfdae6; background: #fff; color: #2F557F; border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.ofv-card { position: relative; }
.ofv-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 21px; flex-shrink: 0; }   /* 바탕 없이 아이콘만(색은 대메뉴 색, JS) */
.ofv-name { min-width: 0; flex-wrap: wrap; row-gap: 3px; padding-right: 14px; }
.ofv-x { position: absolute; right: 7px; top: 7px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #eef1f5; color: #6b7684; font-size: 13px; line-height: 20px; padding: 0; cursor: pointer; display: none; }
.ofv-card:hover .ofv-x, .ofv-card:focus-within .ofv-x { display: block; }
.ofv-x:hover { background: #7F264A; color: #fff; }
.ofv-add { border: 1.5px dashed #b9c6d6; border-radius: 12px; padding: 12px; background: #fafbfd; color: #2F557F; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.ofv-add:hover { background: #eef3f8; }
.ofv-empty { margin: 30px 6px 14px; line-height: 1.6; }
/* 창 */
.ofv-overlay .modal { width: 640px; max-width: calc(100vw - 32px); }
.ofv-count { font-size: 12.5px; color: #6b7684; margin-bottom: 8px; font-weight: 600; }
.ofv-cols { display: flex; border: 1px solid #e3e8ee; border-radius: 10px; height: min(440px, calc(100vh - 280px)); overflow: hidden; }
.ofv-left { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 12px; border-right: 1px solid #edf2f7; }
.ofv-search { margin-bottom: 8px; }
.ofv-groups { flex: 1; overflow-y: auto; }
.ofv-gh { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #1f2a37; margin: 8px 0 3px; }
.ofv-gdot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.ofv-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px 4px 16px; border-radius: 6px; cursor: pointer; }
.ofv-opt.is-on { background: #eef3f8; font-weight: 600; }
.ofv-right { width: 230px; flex-shrink: 0; padding: 10px 12px; background: #fafbfd; overflow-y: auto; }
.ofv-rt { font-size: 12.5px; font-weight: 800; color: #1f2a37; margin-bottom: 8px; }
.ofv-sel { display: flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #e3e8ee; border-radius: 8px; padding: 5px 6px; font-size: 12.5px; margin-bottom: 6px; }
.ofv-sel-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofv-mv { border: 0; background: #eef1f5; color: #5b6776; border-radius: 5px; width: 22px; height: 22px; padding: 0; cursor: pointer; font-size: 12px; font-family: inherit; }
.ofv-mv:disabled { opacity: .35; cursor: default; }
.ofv-mv:not(:disabled):hover { background: #2F557F; color: #fff; }
@media (max-width: 700px) {
  .ofv-cols { flex-direction: column; height: auto; max-height: calc(100vh - 260px); overflow-y: auto; }
  .ofv-left { border-right: 0; border-bottom: 1px solid #edf2f7; }
  .ofv-groups { max-height: 260px; }
  .ofv-right { width: auto; }
  .ofv-x { display: block; }
}

/* ── 즐겨찾기로 간 메뉴: 상단 제목 옆 ← (office-return.js, 2026-09-29) ── */
.ofr-back { margin-right: 10px; }
/* 메뉴 화면 오른쪽 즐겨찾기 패널(사이드바 | 메뉴 화면 | 즐겨찾기) — 사무장 지시 2026-09-29 */
.ofr-panel { width: 280px; flex-shrink: 0; margin: 12px 12px 12px 0; height: calc(100vh - 24px); overflow: hidden; }
.ofr-panel .oag-cards { overflow-y: auto; }
.ofv-card.is-current { border-color: #2F557F; background: #eef3f8; }
body.office-full .ofr-panel { display: none !important; }   /* 사무실 덮기 중에는 사무실 패널이 있다 */

/* ── 통계봇 답(4단계, 2026-09-29) — 서식은 stat-ai.css 를 그대로 쓰고 창 안 여백만 ── */
.modal.oag-modal.is-stats { width: 980px; }
.oag-a-card.oag-a-stats { max-width: 100%; width: 100%; }
.oag-st + .oag-st { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e3e8ee; }
.oag-st .sa-interp { margin-bottom: 8px; }
.oag-st-narr { margin: 6px 0 8px; }
.oag-st-head { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12.5px; color: #5a6675; }
.oag-st-gap { flex: 1; }
/* ★2026-10-04: 클래스 두 개로 적는다 — stat-ai.css 가 이 파일보다 뒤에 읽히고 .sa-list-wrap 에
   overflow: hidden 을 걸어, 한 클래스로 적으면 세로 스크롤이 꺼져 360px 아래 행이 잘려 안 보였다. */
.sa-list-wrap.oag-st-table { max-height: 360px; overflow: auto; }
.oag-st-empty { padding: 14px; text-align: center; color: #8a94a3; }
.oag-st-viz .sa-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ── 질문 저장·질문내역(2026-09-29) — 대화 창 = 왼쪽 질문내역 | 오른쪽 대화 ── */
.oag-modal-body { flex-direction: row; gap: 0; padding: 0; }
.modal.oag-modal { width: 900px; }
.modal.oag-modal.is-stats, .modal.oag-modal.is-chief { width: 1100px; }   /* 총괄봇도 통계 표·그래프가 들어간다 */
.oag-side { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-right: 1px solid #edf2f7; background: #fafbfd; min-height: 0; }
.oag-new { border: 1.5px solid #2F557F; color: #2F557F; background: #fff; border-radius: 9px; padding: 8px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.oag-new:hover { background: #eef3f8; }
.oag-side-t { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: #1f2a37; margin: 6px 2px 0; flex-shrink: 0; }
.oag-side-t em { font-style: normal; color: #6b7684; font-weight: 600; }
.oag-hist-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.oag-side-empty { font-size: 12px; color: #8a94a3; line-height: 1.6; margin: 8px 2px; }
.oag-hist { position: relative; border: 1px solid #e3e8ee; background: #fff; border-radius: 9px; padding: 8px 10px; cursor: pointer; }
.oag-hist:hover { border-color: #b9c6d6; }
.oag-hist.is-on { border-color: #2F557F; background: #eef3f8; }
.oag-hist b { display: block; font-size: 13px; color: #1f2a37; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 40px; }
.oag-hist span { font-size: 11.5px; color: #6b7684; }
.oag-hist-tools { position: absolute; right: 6px; top: 6px; display: none; gap: 2px; }
.oag-hist:hover .oag-hist-tools, .oag-hist:focus-within .oag-hist-tools, .oag-hist.is-on .oag-hist-tools { display: flex; }
.oag-hist-btn { border: 0; background: transparent; color: #8a94a3; width: 20px; height: 20px; border-radius: 5px; cursor: pointer; font-size: 11px; padding: 0; }
.oag-hist-btn:hover { background: #2F557F; color: #fff; }
.oag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 16px 14px; min-height: 0; }
.oag-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: #6b7684; flex-shrink: 0; min-height: 28px; }
.oag-bar-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oag-bar-t b { color: #1f2a37; }
.oag-bar-gap { flex: 1; }
.oag-save { border: 0; background: #E36520; color: #fff; border-radius: 8px; padding: 5px 13px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.oag-save:disabled { background: #d5dbe3; color: #7b8794; cursor: default; }
.oag-pdf { border: 1px solid #2F557F; background: #fff; color: #2F557F; border-radius: 8px; padding: 4px 11px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.oag-pdf:hover:not(:disabled) { background: #2F557F; color: #fff; }
.oag-pdf:disabled { border-color: #d5dbe3; color: #9aa5b1; cursor: default; }
.oag-saved { background: #e8f3e1; color: #2f6b12; border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.oag-ro { font-size: 12px; color: #6b7684; text-align: center; padding: 10px; border: 1px dashed #cfd7e1; border-radius: 10px; margin-top: 8px; }
.modal.oag-unsaved { width: 460px; max-width: calc(100vw - 32px); }
.oag-unsaved-text { font-size: 13.5px; line-height: 1.6; margin: 0 0 6px; }
.oag-btn-drop { border-color: #7F264A; color: #7F264A; }
.oag-btn-drop:hover { background: #7F264A; color: #fff; }
@media (max-width: 760px) {
  .oag-modal-body { flex-direction: column; }
  .oag-side { width: auto; max-height: 150px; border-right: 0; border-bottom: 1px solid #edf2f7; }
  .oag-main { padding: 10px; }
}
/* 교회요람봇(2026-09-30) — 칩·인용은 CI Earth(#5E3929), 주해는 Ming 계열 배지. 원문 창은 교회요람 화면 본문 모양(.ym-content) */
.oag-chip.is-manual { background: #5E3929; }
.oag-src-part { font-size: 11px; font-weight: 700; border-radius: 9px; padding: 0 7px; background: #e3f0f2; color: #2c6570; }
.oag-src-part.is-appendix { background: #f3ecdf; color: #7a5a1c; }
.oag-src-section { font-size: 12px; color: #5E3929; font-weight: 600; }
.oag-manual-sources .oag-src-quote { background: #f7f3f1; border-left-color: #5E3929; }
.oag-rule .ym-content.oag-rule-content { font-size: 13px; }