/* Local News 기사 본문 타이포 - 공개 상세(/local-news/{id})와 관리자 편집기(ArticleEditor)가 이 파일 하나를 함께 로드한다.
   편집 화면이 공개 화면과 똑같이 보이도록 규칙은 전부 .article-body 아래에만 두고(사이트 reset.css·관리자 테마와 무관),
   글꼴도 여기서 직접 선언한다(관리자 화면에는 사이트 reset.css 의 @font-face 가 없다). */
/* 사이트 reset.css 와 같게 Roboto 는 숫자에만 쓴다(unicode-range) - 범위 없이 선언하면 페이지 전체 영문이 Roboto 로 바뀌어 다른 메뉴와 글꼴이 달라진다. */
@font-face { font-family: 'Roboto'; font-weight: 400; src: url('/fonts/Roboto-Regular.woff2') format('woff2'); unicode-range: U+0030-0039; }
@font-face { font-family: 'Roboto'; font-weight: 500; src: url('/fonts/Roboto-Medium.woff2') format('woff2'); unicode-range: U+0030-0039; }
@font-face { font-family: 'NotoSanskr'; font-weight: 400; src: url('/fonts/NotoSansKR-Regular.woff2') format('woff2'); }
@font-face { font-family: 'NotoSanskr'; font-weight: 700; src: url('/fonts/NotoSansKR-Bold.woff2') format('woff2'); }

.article-body { font-family: 'Roboto', 'NotoSanskr', sans-serif; font-size: 18px; line-height: 1.75; color: #3e3e3e;
                word-break: keep-all; overflow-wrap: break-word; }
.article-body::after { content: ''; display: block; clear: both; }
.article-body p { margin: 24px 0 0; }
.article-body h2 { margin: 48px 0 0; font-size: 28px; font-weight: 700; line-height: 1.4; color: #212121; clear: both; }
.article-body h3 { margin: 36px 0 0; font-size: 22px; font-weight: 700; line-height: 1.45; color: #212121; clear: both; }
.article-body ul, .article-body ol { margin: 24px 0 0; padding-left: 1.5em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
/* 공개 페이지의 reset.css 가 li 에 list-style:none 을 직접 걸어 ul/ol 의 값이 상속되지 않는다 - 편집기(reset 없음)와 같게 되돌린다. */
.article-body li { margin: 6px 0 0; list-style: inherit; }
.article-body li p { margin: 0; }
.article-body blockquote { margin: 32px 0 0; padding: 4px 0 4px 24px; border-left: 3px solid #ff6600; font-size: 20px; color: #212121; }
.article-body blockquote p:first-child { margin-top: 0; }
.article-body hr { margin: 40px 0 0; border: 0; border-top: 1px solid #e5e5e5; clear: both; }
.article-body a { color: #ff6600; text-decoration: underline; }
.article-body strong, .article-body b { font-weight: 700; }
.article-body em, .article-body i { font-style: italic; }
.article-body u { text-decoration: underline; }
.article-body s { text-decoration: line-through; }

/* 이미지 블록 - ArticleEditor 의 figure 노드가 출력하는 마크업:
   <figure class="ln-fig" data-width="10~100" data-align="left|center|right|wrap-left|wrap-right" style="width: N%;"><img><figcaption?>
   폭은 모서리 끌기로 임의 정수가 되므로 style 이 정하고, 아래 data-width 규칙은 style 이 없던 예전 기사용이다. */
.article-body figure.ln-fig { margin: 40px auto 0; }
.article-body figure.ln-fig img { display: block; width: 100%; height: auto; border-radius: 8px; }
.article-body figure.ln-fig figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #888; }
.article-body figure.ln-fig[data-width="25"] { width: 25%; }
.article-body figure.ln-fig[data-width="50"] { width: 50%; }
.article-body figure.ln-fig[data-width="75"] { width: 75%; }
.article-body figure.ln-fig[data-width="100"] { width: 100%; }
.article-body figure.ln-fig[data-align="left"] { margin-left: 0; margin-right: auto; }
.article-body figure.ln-fig[data-align="right"] { margin-left: auto; margin-right: 0; }
.article-body figure.ln-fig[data-align="wrap-left"] { float: left; margin: 8px 32px 16px 0; }
.article-body figure.ln-fig[data-align="wrap-right"] { float: right; margin: 8px 0 16px 32px; }
/* 감싸기 이미지 옆 첫 문단이 위 여백만큼 내려가 이미지 윗선과 어긋나지 않게 */
.article-body figure.ln-fig[data-align^="wrap"] + p { margin-top: 8px; }
/* 한 줄 묶음 - <div class="ln-fig-row"><figure>…</figure>…</div>. 안의 폭(%)은 줄 기준이고, 합이 넘치면 비율대로 줄어든다. 정렬 값은 쓰지 않는다. */
.article-body .ln-fig-row { display: flex; justify-content: center; align-items: flex-start; gap: 24px; margin: 40px 0 0; clear: both; }
.article-body .ln-fig-row > figure.ln-fig[data-width][data-align] { flex: 0 1 auto; min-width: 0; margin: 0; float: none; }

@media (max-width: 768px) {
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 22px; }
  .article-body h3 { font-size: 19px; }
  .article-body blockquote { font-size: 17px; }
  /* 좁은 화면에서 감싸기·축소 이미지는 글줄이 몇 글자씩 끊기므로 전부 전폭 블록으로 (선택자 특이도를 위 규칙보다 높게) */
  /* 폭은 style 로 실려 오므로 !important 로 덮는다. 한 줄 묶음도 세로로 쌓는다. */
  .article-body figure.ln-fig[data-width][data-align] { width: 100% !important; float: none; margin: 28px 0 0; }
  .article-body .ln-fig-row { flex-direction: column; gap: 28px; margin-top: 28px; }
  .article-body figure.ln-fig[data-align^="wrap"] + p { margin-top: 24px; }
}