/*
 * 안내서·공지사항 본문 공통 스타일.
 *
 * 관리자 편집기(doy-admin public/js/richeditor.js)가 만드는 HTML 을 보여줄 때 쓴다.
 * 관리자 보기 화면·편집기가 읽는 doy-admin public/css/richcontent.css 와 같은 값이다. 값을 바꾸면 함께 바꾼다.
 * 앱 공지사항(doy-api-v2 public/css/richcontent.css)도 같은 값이다.
 */

/* 관리자 편집기의 폰트 목록(richeditor.js FONT_FORMATS)과 같은 목록이다. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Noto+Serif+KR:wght@400;700&family=Nanum+Gothic:wght@400;700&family=Nanum+Myeongjo:wght@400;700&family=Gothic+A1:wght@400;700&display=swap');

/* 테마가 p 와 제목에 폰트를 직접 걸어 두어(관리자·웹 Poppins, 앱 Source Sans Pro) 상속만으로는 적용되지 않는다. */
.rich-content, .rich-content p, .rich-content li,
.rich-content h2, .rich-content h3, .rich-content h4 { font-family: "Noto Sans KR", sans-serif; }

/* 제목 크기는 관리자·서비스 테마(style.css h2~h4)와 같은 값이다. */
.rich-content h2 { font-size: 2.35714286em; line-height: 1.36363636em; font-weight: 500; }
.rich-content h3 { font-size: 1.78571429em; line-height: 1.5em; font-weight: 500; }
.rich-content h4 { font-size: 1.35714286em; line-height: 1.68421053em; font-weight: 600; }

.rich-content img { max-width: 100%; height: auto; }

/* '이미지 나란히' 로 묶은 이미지는 항상 한 줄에 놓는다. 폭이 모자라면(휴대폰) 다음 줄로 넘기지 않고
   이미지들이 비율을 지킨 채 함께 줄어든다. 넘기면 세로로 쌓여 나란히 묶은 뜻이 없어진다. */
.rich-content .guide-image-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px; margin: 0 0 1rem 0; }
.rich-content .guide-image-row img { flex: 0 1 auto; margin: 0; min-width: 0; }

/* 이미지 크기 단계. 클래스가 없으면 '크게' 다. 높이 상한만 바꾸므로 비율은 그대로다. */
.rich-content img.guide-img-sm { max-height: 280px; }
.rich-content img.guide-img-md { max-height: 420px; }

/* 정렬. 클래스가 없으면 왼쪽이다. 나란히 묶은 이미지는 이미지가 아니라 묶음에 정렬 클래스가 붙는다. */
.rich-content img.guide-align-center { display: block; margin-left: auto; margin-right: auto; }
.rich-content img.guide-align-right { display: block; margin-left: auto; margin-right: 0; }
.rich-content .guide-image-row.guide-align-center { justify-content: center; margin-left: 0; }
.rich-content .guide-image-row.guide-align-right { justify-content: flex-end; margin-left: 0; }

/*
 * 안내서 전용. 안내서 이미지는 대부분 화면 캡처라 세로가 길다(1284x2778 같은).
 * 폭으로만 잡으면 한 장이 화면을 다 먹으므로 높이로 제한하고, 테두리와 들여쓰기를 준다.
 * 클래스가 없는 img 의 기본 규칙이라 예전 마크다운 본문의 이미지도 이 규칙을 따른다.
 * 관리자 보기 화면의 .guide-viewer 와 같은 값이다.
 */
.guide-section img { display: block; margin: 0 0 0 20px; max-height: 560px; border: 1px solid #6c757d; }
.guide-section .guide-image-row { margin-left: 20px; }