/* 테마방 1단계(2026-10-19) — 채팅 목록의 「테마」 묶음·폴더·만들기 창. 색은 교단 CI(Denim #2F557F) 기준 */
.oc-theme-group { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.oc-theme-tools { display: inline-flex; align-items: center; gap: 8px; }
.oc-theme-add { border: 1px solid #c9d4e0; background: #fff; color: #2F557F; border-radius: 6px; width: 22px; height: 22px; font-size: 11px; cursor: pointer; padding: 0; }
.oc-theme-add:hover { background: #eef3f8; }
.oc-theme-menu { position: fixed; z-index: 3000; background: #fff; border: 1px solid #dfe5ec; border-radius: 8px; box-shadow: 0 6px 20px rgba(20, 40, 70, .14); padding: 4px; min-width: 140px; }
.oc-theme-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; font-size: 13px; border-radius: 6px; cursor: pointer; font-family: inherit; color: #2d3748; }
.oc-theme-menu button:hover { background: #eef3f8; }
.oc-theme-folder { display: flex; align-items: center; gap: 4px; margin: 4px 0 2px; }
.oc-theme-folder-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: none; background: transparent; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #34495e; text-align: left; }
.oc-theme-folder-btn:hover { background: #f1f5f9; }
.oc-theme-chev { font-size: 9px; color: #8a94a3; width: 10px; }
.oc-theme-ficon { color: #2F557F; font-size: 12px; }
.oc-theme-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-theme-folder .oc-type, .oc-theme-folder .oc-unread { white-space: nowrap; }
.oc-theme-more { border: none; background: transparent; color: #6b7684; cursor: pointer; font-size: 15px; padding: 0 6px; line-height: 1; }
.oc-theme-more:hover { color: #2F557F; }
.oc-theme-indent { margin-left: 14px; }
.oc-room.oc-theme-indent { width: calc(100% - 14px); }
.oc-theme-lock { color: #8a94a3; font-size: 10.5px; margin-right: 4px; flex-shrink: 0; }
.oc-theme-badge { background: #3E8391; white-space: nowrap; }
.oc-type-theme { background: #3E8391; }
.oc-theme-desc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.oc-theme-set { white-space: nowrap; font-size: 12px; }
.oc-theme-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 13.5px; font-weight: 600; color: #2d3748; cursor: pointer; }
.oc-theme-check .oc-help { flex-basis: 100%; margin: 0 0 0 22px; font-weight: 400; }
.oc-theme-writers { border-left: 3px solid #c9d4e0; padding-left: 10px; margin: 6px 0 4px 6px; }
.oc-dept-picker { max-height: 160px; overflow-y: auto; border: 1px solid #edf2f7; border-radius: 8px; padding: 4px 8px; }
.oc-theme-view { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oc-theme-view-btn { border-radius: 8px; padding: 6px 14px; font-size: 13px; border: 1px solid #c9d4e0; background: #fff; color: #5b6776; cursor: pointer; font-family: inherit; }
.oc-theme-view-btn.is-on { border: 2px solid #2F557F; color: #2F557F; font-weight: 700; background: #eef3f8; }
.oc-theme-view-btn:disabled { cursor: default; opacity: .75; }
.oc-theme-view-btn:disabled:not(.is-on) { opacity: .45; }
.oc-theme-view .oc-help { flex-basis: 100%; }
.oc-theme-extra { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf2f7; }
.oc-theme-browse { margin-top: 10px; max-height: 360px; overflow-y: auto; }
.oc-theme-browse-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f1f5f9; }
.oc-theme-browse-mid { flex: 1; min-width: 0; }
.oc-theme-browse-name { font-size: 13.5px; font-weight: 600; color: #2d3748; }
.oc-theme-browse-row .btn { white-space: nowrap; }
.oc-theme-log { max-height: 420px; overflow-y: auto; }
.oc-theme-log-row { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 7px 2px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.oc-theme-log-at { color: #8a94a3; font-size: 12px; white-space: nowrap; }
.oc-theme-log-detail { flex-basis: 100%; color: #4a5568; }
@media (max-width: 700px) {
  .oc-theme-desc { display: none; }
}
/* 개인 카드(2026-10-19) — 프로필 창(office-map.css .om-card)에 붙는 배지·연락처·파일 */
.om-card:has(.om-card-files) { align-items: flex-start; }
.om-card-info { flex: 1; }
.om-card-badge { display: inline-block; font-size: 10.5px; font-weight: 600; color: #fff; background: #2F557F; border-radius: 6px; padding: 1px 6px; margin-right: 6px; vertical-align: 2px; }
.om-card-phone { font-size: 13px; color: #2F557F; text-decoration: none; }
.om-card-files { margin-top: 8px; border-top: 1px solid #edf2f7; padding-top: 8px; max-height: 220px; overflow-y: auto; }
.om-card-files-title { font-size: 12px; font-weight: 700; color: #5b6776; margin-bottom: 4px; }
.om-card-file { display: flex; flex-direction: column; padding: 5px 4px; border-radius: 6px; text-decoration: none; }
.om-card-file:hover { background: #f1f5f9; }
.om-card-file-name { font-size: 13px; color: #2d3748; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-card-file-sub { font-size: 11.5px; color: #8a94a3; }
.oc-theme-member { cursor: pointer; border-radius: 6px; }
.oc-theme-member:hover { background: #f1f5f9; }
/* ── 보드 뷰(2단계, 2026-10-19) — 가운데 칸이 글 목록·글 보기. 채팅 입력칸·고정·답장 띠는 숨긴다 ── */
.oc-board-mode #oc-input, .oc-board-mode #oc-pin-bar, .oc-board-mode #oc-reply-bar, .oc-board-mode #oc-upload-bar { display: none !important; }
.oc-board-mode #oc-messages { padding: 0; display: flex; flex-direction: column; }
.ocb { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 14px; container-type: inline-size; }
.ocb-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-bottom: 10px; }
.ocb-search { max-width: 260px; }
.ocb-dept { width: auto; max-width: 180px; flex-shrink: 0; }   /* 부서 검색(2026-10-20) */
.ocb-tools .btn { margin-left: auto; white-space: nowrap; }
.ocb-tools .oc-help { margin: 0 0 0 auto; }
/* 목록형 표준 2장 — 목록만 스크롤(flex:1 + min-height:0), 머리행 sticky·배경은 th 에 */
.ocb-table-wrap { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; }
.ocb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ocb-table thead th { position: sticky; top: 0; z-index: 1; background: #f4f7fa; color: #4a5568; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #e3e8ef; text-align: left; white-space: nowrap; }
.ocb-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.ocb-row { cursor: pointer; }
.ocb-row:hover td { background: #f7fafc; }
.ocb-row.is-unread .ocb-title { font-weight: 700; color: #1f2a37; }
.ocb-c-no { width: 52px; text-align: center; color: #8a94a3; white-space: nowrap; }
.ocb-c-au { width: 90px; white-space: nowrap; }
.ocb-c-dt { width: 76px; white-space: nowrap; color: #6b7684; }
.ocb-c-rd { width: 64px; white-space: nowrap; text-align: center; color: #6b7684; }
.ocb-c-title { word-break: break-all; }
.ocb-badge { white-space: nowrap; font-size: 11.5px; }
.ocb-cmt { color: #2F557F; font-weight: 600; }
.ocb-new { color: #E36520; font-size: 9px; vertical-align: 2px; }
.ocb-pin { color: #2F557F; }
.ocb-empty { text-align: center; color: #98a2af; padding: 30px 0 !important; }
.ocb-count td { text-align: right; font-size: 12px; color: #8a94a3; border-bottom: none; }
.ocb-pagi { flex-shrink: 0; margin-top: 8px; }
.ocb-pagi:empty { display: none; }
/* 글 보기 */
.ocb-post { overflow-y: auto; }
.ocb-post-head { display: flex; align-items: center; gap: 8px; }
.ocb-post-acts { margin-left: auto; display: inline-flex; gap: 6px; }
.ocb-post-title { font-size: 18px; font-weight: 700; color: #1f2a37; margin: 12px 0 4px; word-break: break-all; }
.ocb-post-meta { font-size: 12.5px; color: #6b7684; padding-bottom: 10px; border-bottom: 1px solid #edf2f7; }
.ocb-post-body { padding: 14px 2px; font-size: 13.5px; line-height: 1.7; min-height: 80px; overflow-wrap: anywhere; }
.ocb-files { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #f7fafc; border-radius: 8px; }
.ocb-file { font-size: 13px; color: #2F557F; text-decoration: none; }
.ocb-file:hover { text-decoration: underline; }
.ocb-reads { margin: 12px 0; font-size: 13px; color: #4a5568; }
.ocb-sec-title { font-size: 13px; font-weight: 700; color: #34495e; margin: 10px 0 6px; }
.ocb-comments { border-top: 1px solid #edf2f7; padding-top: 4px; }
.ocb-cmt-row { padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ocb-cmt-at { font-size: 11.5px; color: #8a94a3; }
.ocb-cmt-body { flex-basis: 100%; white-space: pre-wrap; color: #2d3748; }
.ocb-cmt-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.ocb-cmt-form textarea { flex: 1; resize: vertical; }
.ocb-read-row { font-size: 13px; padding: 4px 0; border-bottom: 1px solid #f7fafc; }
.ocb-reads-box { max-height: 420px; overflow-y: auto; }
.ocb-hist { border: 1px solid #edf2f7; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.ocb-hist summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #34495e; }
/* 글쓰기 창 — 문서작성과 같은 편집기 */
.modal.ocb-modal { width: min(900px, 96vw); max-width: 900px; }
.ocb-editor { min-height: 260px; max-height: 50vh; overflow-y: auto; padding: 12px 14px; border: 1px solid #e3e8ef; border-radius: 0 0 8px 8px; font-size: 13.5px; line-height: 1.6; background: #fff; outline: none; }
.ocb-drop { cursor: pointer; }
.ocb-drop.is-over { border-color: #2F557F; background: #eef3f8; }
.ocb-file-list { margin-top: 6px; }
.ocb-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 6px; border-bottom: 1px solid #f1f5f9; }
/* 가운데 칸이 좁으면(참여자 칸이 열린 노트북 등) 작성자·읽음 칸을 숨겨 제목 칸을 지킨다 */
@container (max-width: 520px) {
  .ocb-c-au, .ocb-c-rd { display: none; }
  .ocb-c-no { width: 36px; }
  .ocb-c-dt { width: 56px; }
}
@media (max-width: 700px) {
  .modal.ocb-modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}
/* 방 목록 — 테마·그룹방은 동그라미 글자 없이 이름만, 이름 아래 미리보기 줄 없음(2026-10-19) */
.oc-room.oc-room-noav { padding: 8px 10px; }
/* 보드 글 보기 모달 · 첨부 카드 · 읽음 명단(2026-10-20) */
.modal.ocb-post-modal { width: min(860px, 96vw); max-width: 860px; }
.ocb-post-modal .ocb-post { padding: 0; overflow: visible; }
.ocb-post-modal .ocb-post-head { justify-content: flex-end; min-height: 0; }
.ocf-grid { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.ocf-card { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: #eef1f5; border-radius: 8px; cursor: pointer; }
.ocf-card:hover { background: #e3e8ef; }
.ocf-thumb { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ocf-thumb img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid #d5dbe2; background: #fff; }
.ocf-doc { width: 34px; height: 42px; border-radius: 4px 12px 4px 4px; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: -.3px; }
.ocf-mid { flex: 1; min-width: 0; }
.ocf-name { font-size: 13.5px; color: #1f2a37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocf-size { font-size: 11.5px; color: #8a94a3; }
.ocf-dl { white-space: nowrap; text-decoration: none; }
.modal.ocf-modal { width: min(1000px, 96vw); max-width: 1000px; }
.ocf-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ocf-preview img { max-width: 100%; max-height: 70vh; border-radius: 6px; }
.ocf-preview iframe { width: 100%; height: 72vh; border: 1px solid #e3e8ef; border-radius: 6px; }
.ocb-read-link { font-size: 13px; font-weight: 600; }
.ocb-read-row { display: flex; align-items: center; gap: 10px; }
.ocb-read-row .oc-avatar { width: 28px; height: 28px; }
.ocb-read-name { flex: 1; min-width: 0; }
.ocb-read-at { font-size: 11.5px; color: #8a94a3; white-space: nowrap; }
/* 테마 줄 + 「⋯」 메뉴(2026-10-20) */
.oc-theme-row { display: flex; align-items: center; gap: 2px; }
.oc-theme-row .oc-room { flex: 1; min-width: 0; }
.oc-theme-row .oc-theme-more { visibility: hidden; }
.oc-theme-row:hover .oc-theme-more, .oc-theme-row .oc-theme-more:focus { visibility: visible; }
.oc-theme-menu button.oc-danger { color: #c0392b; }
@media (hover: none) { .oc-theme-row .oc-theme-more { visibility: visible; } }
/* 테마 머리 줄 [회원 초청](2026-10-20) */
.oc-theme-invite { border: 1px solid #c9d4e0; background: #fff; color: #2F557F; border-radius: 8px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.oc-theme-invite:hover { background: #eef3f8; }
.oc-theme-invite i { margin-right: 3px; }
@media (max-width: 700px) { .oc-theme-invite { padding: 3px 7px; font-size: 0; } .oc-theme-invite i { font-size: 13px; margin: 0; } }

/* 보기 방식 그림 카드 3가지(office-theme-view-pick.js, 2026-10-20) */
.ocv-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ocv-opt { display: flex; flex-direction: column; padding: 8px; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit; text-align: left; }
.ocv-opt.is-on { border: 2px solid #2F557F; padding: 7px; }
.ocv-opt:disabled { cursor: not-allowed; opacity: .45; }
.ocv-opt.is-on:disabled { opacity: 1; cursor: default; }
.ocv-art { height: 78px; border-radius: 6px; background: #f1f3f6; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ocv-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 7px; }
.ocv-label { font-size: 12.5px; font-weight: 600; color: #3b4652; }
.ocv-check { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #c3ccd6; }
.ocv-opt.is-on .ocv-check { border: 0; background: #2F557F; box-shadow: inset 0 0 0 4px #2F557F, inset 0 0 0 6px #fff; }
.ocv-bar { display: block; height: 5px; border-radius: 3px; background: #c9d2dc; flex-shrink: 0; }
.ocv-bar.is-dim { background: #dfe4ea; }
.ocv-msg { display: flex; align-items: flex-start; gap: 5px; }
.ocv-av { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: #c9d2dc; }
.ocv-bub { flex: 1; display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 4px; padding: 4px; }
.ocv-table { background: #fff; border-radius: 4px; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.ocv-row { display: flex; align-items: center; gap: 5px; padding-bottom: 3px; border-bottom: 1px solid #eef1f4; }
.ocv-row .ocv-bar:nth-child(2) { flex: 1; }
.ocv-no { flex-shrink: 0; width: 6px; height: 5px; background: #dfe4ea; }
.ocv-card { background: #fff; border-radius: 4px; padding: 5px; display: flex; flex-direction: column; gap: 4px; margin: 0 8px; }
.ocv-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ocv-pics i { height: 16px; border-radius: 2px; background: #c9d2dc; }
@media (max-width: 520px) { .ocv-pick { grid-template-columns: 1fr; } .ocv-art { height: 64px; } }

/* 보드 뷰(카드형) 피드(office-theme-feed.js, 2026-10-20) */
.ocfd { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -14px -12px; padding: 4px 14px 16px; background: #f4f6f9; }
.ocfd-card { max-width: 700px; margin: 12px auto 0; background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 16px 20px; }
.ocfd-head { display: flex; align-items: center; gap: 10px; }
.ocfd-who { flex: 1; min-width: 0; }
.ocfd-name { font-weight: 700; color: #1f2a37; }
.ocfd-date { font-size: 12px; color: #98a2af; }
.ocfd-side { display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; }
.ocfd-read { color: #8a94a1; }
.ocfd-act { color: #8a94a1; }
.ocfd-title { margin: 14px 0 8px; font-size: 17px; font-weight: 700; color: #1f2a37; overflow-wrap: anywhere; }
.ocfd-body { font-size: 14.5px; line-height: 1.7; color: #3b4652; overflow-wrap: anywhere; }
/* 사진은 작은 정사각으로 한 줄에 여러 장(2026-10-20 사무장 지시 — 크게 2장씩은 너무 큼), 누르면 넘겨보기 */
.ocfd-pics { display: grid; grid-template-columns: repeat(auto-fill, 110px); gap: 6px; margin: 12px 0 4px; }
.ocfd-pic { padding: 0; border: 1px solid #e3e8ee; border-radius: 8px; overflow: hidden; background: #f3f5f8; cursor: zoom-in; width: 110px; height: 110px; }
.ocfd-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ocfd-pics.is-one { grid-template-columns: auto; }
.ocfd-pics.is-one .ocfd-pic { width: auto; height: auto; max-width: 260px; }
.ocfd-pics.is-one .ocfd-pic img { width: auto; max-width: 260px; max-height: 260px; object-fit: contain; }
@media (max-width: 600px) { .ocfd-pics { grid-template-columns: repeat(auto-fill, 86px); } .ocfd-pic { width: 86px; height: 86px; } }
.ocfd-card .ocf-grid { margin-top: 10px; }
.ocfd-card .ocb-comments { margin-top: 12px; }
.ocfd-more { display: block; margin: 14px auto 0; }
@media (max-width: 600px) { .ocfd-card { padding: 12px 14px; } .ocfd-head { flex-wrap: wrap; } }