/* ════════════════════════════════════════
   각종 규정 › 교회요람 — 화면 스타일 (public/css/manual.css) · 2026-09-30

   · 틀은 규정 화면(rules.css 의 rl-·ra- 클래스)을 그대로 쓰고, 교회요람에만 있는 것만 여기 둔다.
     — 절·소제목(h3·h4), 책 쪽 표시(span.cm-pg), ※ 안내(p.cm-note), 표(table.cm-tbl), 차례 고르기, 종류 배지
   · 화면 고정 규칙(ui_panel_scroll_rules): 위(검색)는 고정, 목록·본문만 스크롤 — #view-manual 도 rules 와 같게.
   · 색: 교단 CI Denim #2F557F(제목) · Earth #5E3929(교회요람 표시) · Ming #3E8391(주해)
════════════════════════════════════════ */

#view-manual.active { display: flex !important; flex-direction: column; height: calc(100vh - 108px); overflow: hidden; }
@media (max-width: 900px) {
  #view-manual.active { height: auto; overflow: visible; }
}

/* 위쪽 도구줄 — 쪽 이동 */
.ym-page { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-sub); white-space: nowrap; }
.ym-page input { width: 70px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; font-size: 13px; font-family: inherit; }

/* 목록 — 쪽 범위와 종류 배지 */
.ym-pages { font-size: 11.5px; color: var(--text-sub); margin-top: 2px; }
.ym-part { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; margin-left: 4px; white-space: nowrap; }
.ym-part-main { background: #efe7e3; color: #5e3929; }
.ym-part-notes { background: #e3f0f2; color: #2c6570; }
.ym-part-appendix { background: #f3ecdf; color: #7a5a1c; }

/* 상세 머리 — 차례 고르기 */
.ym-toc { max-width: 320px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; font-size: 12.5px; font-family: inherit; }
.ym-note { margin-top: 10px; background: #e3f0f2; color: #2c6570; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; line-height: 1.6; }

/* 본문 — 교회요람은 문단이 진짜 문단이다(규정처럼 한 줄씩이 아니다) */
.ym-content p { margin: 0 0 7px; white-space: normal; text-indent: 0; }
.ym-content h3 { font-size: 16px; font-weight: 800; color: #2f557f; margin: 22px 0 8px; padding-bottom: 5px;
  border-bottom: 2px solid #d4dde9; scroll-margin-top: 8px; }
.ym-content h3:first-child { margin-top: 4px; }
.ym-content h4 { font-size: 14px; font-weight: 800; color: #1f2937; margin: 14px 0 5px; scroll-margin-top: 8px; }
.ym-content h5 { font-size: 13.5px; font-weight: 700; color: #1f2937; margin: 10px 0 4px; }
.ym-content p.cm-note { font-size: 12.5px; color: #52525b; background: #f6f7f9; border-radius: 6px; padding: 6px 10px; }
.ym-content table.cm-tbl { border-collapse: collapse; margin: 8px 0 12px; font-size: 12.5px; }
.ym-content table.cm-tbl td { border: 1px solid #c7ced6; padding: 4px 9px; vertical-align: top; }
/* 책 쪽 표시 — 글 흐름 사이에 작게. 누가 「교회요람 105쪽」이라고 하면 이 표시로 찾는다 */
.ym-content .cm-pg { display: inline-block; font-size: 10.5px; line-height: 1.5; color: #5e3929; background: #f5efec;
  border: 1px solid #e2d3cc; border-radius: 8px; padding: 0 6px; margin-right: 5px; vertical-align: 1px;
  text-indent: 0; font-weight: 700; }
.ym-content .cm-pg::before { content: attr(data-page) "쪽"; }
.ym-content .cm-pg.ym-flash { background: #ffc400; border-color: #e36520; color: #1f2937; }

/* 편집기 안에서도 쪽 표시가 보이게(지우지 말라는 뜻) */
.ym-edit-area .cm-pg { display: inline-block; font-size: 10.5px; color: #5e3929; background: #f5efec;
  border: 1px solid #e2d3cc; border-radius: 8px; padding: 0 6px; margin-right: 4px; }
.ym-edit-area .cm-pg::before { content: attr(data-page) "쪽"; }
.ym-edit-area h3 { font-size: 15px; font-weight: 800; color: #2f557f; margin: 12px 0 6px; }
.ym-edit-area h4 { font-size: 13.5px; font-weight: 800; margin: 10px 0 4px; }
.ym-edit-area p { margin: 0 0 6px; }

/* 관리 화면 — 점검 보고 */
.ym-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px; margin-top: 10px; }
.ym-check { font-size: 12.5px; display: flex; gap: 6px; align-items: baseline; }
.ym-check .ok { color: #448d21; font-weight: 800; }
.ym-check .no { color: #c0392b; font-weight: 800; }
.ym-check small { color: var(--text-sub); }
.ym-keep { margin-top: 8px; background: #efe7e3; color: #5e3929; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; line-height: 1.6; }
.ym-att { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #2f557f; cursor: pointer;
  text-decoration: underline; background: none; border: none; padding: 0; font-family: inherit; }