/* ════════════════════════════════════════
   온라인 사무실 공지사항 서식 — public/css/office-notice.css (기획서 1-5, 2026-09-28)
   · 목록형 테이블 표준: 탭·검색 고정 + 표만 스크롤(min-height:0), 머리행 sticky(th 에 배경), 배지 줄바꿈 막기,
     쪽 번호는 표 카드 밖. 색은 교단 CI 전용색만(그라데이션 없음)
════════════════════════════════════════ */
.office-notice-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.office-notice-root > .on-toolbar, .office-notice-root > .pagination { flex-shrink: 0; }
.on-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.on-spacer { flex: 1; }
.on-state-tabs { display: flex; gap: 4px; }
.on-state { border: 1px solid #dfe5ec; background: #fff; color: #5b6776; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
.on-state.is-on { background: #2F557F; border-color: #2F557F; color: #fff; }
.on-search { width: 260px; padding: 7px 10px; font-size: 13px; }
#on-write { margin-left: auto; }
.on-table-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.on-table { min-width: 620px; }
.on-table thead th { position: sticky; top: 0; z-index: 5; background: #d4dde9; }
.on-col-no { width: 64px; text-align: center; white-space: nowrap; }
.on-col-author { width: 110px; white-space: nowrap; }
.on-col-date { width: 190px; white-space: nowrap; color: #5b6776; font-size: 12.5px; }
.on-table td.on-col-no { color: #98a2af; }
.on-table tr.is-unread .on-title { font-weight: 700; }
.on-title-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.on-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 520px; }
.on-meta { font-size: 12px; color: #6b7684; white-space: nowrap; }
.on-comments { color: #E36520; font-weight: 700; }
.on-empty { text-align: center; color: #98a2af; padding: 40px 0 !important; }
.on-badge { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; color: #fff; flex-shrink: 0; }
.on-badge-imp { background: #7F264A; }
.on-badge-sch { background: #3E8391; }
.on-badge-new { background: #E36520; border-radius: 50%; padding: 1px 5px; }
.on-badge-past { background: #8a94a3; }

/* 상세·쓰기 — 머리 고정, 내용만 스크롤 */
.on-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.on-card { background: #fff; border: 1px solid #dfe5ec; border-radius: 12px; padding: 20px 24px; }
.on-detail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.on-detail-title { margin: 0; font-size: 19px; color: #1f2a37; }
.on-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #6b7684; margin: 8px 0 16px; padding-bottom: 12px; border-bottom: 1px solid #edf2f7; }
.on-reads { border: 1px solid #2F557F; color: #2F557F; background: #fff; border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.on-body { font-size: 14px; line-height: 1.8; color: #1f2a37; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 80px; }
.on-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #dfe5ec; }
.on-comments-box { background: #fff; border: 1px solid #dfe5ec; border-radius: 12px; padding: 16px 24px; margin-top: 12px; }
.on-comments-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.on-comment { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f4f8; }
.on-comment-mid { flex: 1; min-width: 0; }
.on-comment-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.on-comment-date { font-size: 11.5px; color: #98a2af; }
.on-comment-body { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.on-comment-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.on-comment-input { min-height: 56px; resize: vertical; }
.on-reads-title { font-weight: 700; font-size: 13px; margin: 10px 0 4px; color: #2F557F; }
.on-reads-box { max-height: 60vh; overflow-y: auto; }
.on-form-title { font-size: 16px; color: #2F557F; }
.on-form-body { min-height: 260px; }
.on-form-dates { display: flex; gap: 12px; flex-wrap: wrap; }
.on-form-dates .form-group { flex: 1; min-width: 180px; }
.on-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 12px; cursor: pointer; }
.on-form-file { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.on-form-file.is-removed .oc-file-name { text-decoration: line-through; color: #98a2af; }
.on-form-file.is-new .oc-file-name { color: #448D21; }
.on-form-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #edf2f7; }
@media (max-width: 700px) {
  .on-search { width: 100%; order: 3; }
  .on-card, .on-comments-box { padding: 14px; }
  .office-tabs { margin-left: 0; }
}