/* 매거진 본문 스타일 — 프론트 화면과 관리자 미리보기가 **같이 쓰는 한 벌**이다.
 *
 * 관리자 미리보기는 "이대로 나가겠구나"를 판단하는 자리다. 양쪽이 각자 CSS를 들고
 * 있으면 한쪽만 고쳐져 미리보기가 거짓말을 한다. 그래서 파일은 여기 하나뿐이고,
 * 프론트는 `GET /api/magazine/article.css` 로 받아 쓰고 관리자 화면은 서버가
 * 페이지에 끼워 넣는다.
 *
 * 쓰는 법: 글을 감싼 요소에 `magazine` 클래스를 준다.
 *
 *   <article class="magazine"> …본문… </article>
 *
 * 본문에 섞이는 `.mag-*` 블록의 마크업은 docs/매거진-본문-블록.md 에 있다.
 * 색을 바꾸려면 이 파일만 고치면 양쪽에 같이 반영된다.
 */

/* 줄 간격을 넉넉히 둔다. 매거진은 앉아서 끝까지 읽는 글이라, 목록 화면처럼 촘촘하면
   눈이 다음 줄을 찾느라 지친다. 제목은 이 값을 따르지 않는다 — 아래에서 따로 준다. */
.magazine {
  font-size: 15px;
  line-height: 1.9;
  color: #1f2937;
}

/* 소제목 앞을 넉넉히 띄운다. 앞 문단과 붙어 있으면 어디서 이야기가 바뀌는지 안 보이고
   글이 통째로 한 덩어리로 읽힌다. 제목과 그 아래 첫 줄은 붙어 있어야 한 묶음으로 읽힌다 —
   위를 크게, 아래를 작게 두는 이유다. */
.magazine h1 { font-size: 24px; margin: 0 0 10px; line-height: 1.4; }
.magazine h2 { font-size: 19px; margin: 56px 0 22px; line-height: 1.45; }
.magazine h3 { font-size: 16px; margin: 40px 0 18px; line-height: 1.5; }
/* 글 맨 위에 소제목이 먼저 오는 글도 있다. 그때까지 위를 띄우면 머리가 뚝 떨어져 보인다. */
.magazine h2:first-child,
.magazine h3:first-child { margin-top: 0; }
.magazine p { margin: 0 0 16px; }
/* 일부러 띄운 빈 줄은 한 줄만큼 자리를 갖는다. 안 그러면 여백만 남아, 관리자에서 두 줄
   띄워 둔 것이 실제 글에서는 한 칸으로 보인다. 쓴 사람이 본 모양과 달라진다. */
.magazine p:empty { min-height: 1em; }
.magazine ul,
.magazine ol { margin: 0 0 14px; padding-left: 20px; }
.magazine li { margin: 4px 0; }
.magazine img { max-width: 100%; border-radius: 8px; }

/* 인용 — **왼쪽 바가 파란색이다.** 회색이면 본문과 구분이 안 된다. */
.magazine blockquote,
.magazine .mag-quote {
  border-left: 3px solid #2a78d6;
  padding-left: 14px;
  margin: 20px 0;
  color: #374151;
}

/* 인용(박스) — 세로바에 배경과 테두리가 더 붙는다. 끝에서 한 번 더 못 박는 자리다. */
.magazine .mag-quote--box {
  background: #f4f8fd;
  border: 1px solid #dbe8f7;
  border-left: 3px solid #2a78d6;
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
}

/* 카드 */
.magazine .mag-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  background: #fafafa;
  margin: 20px 0;
}
.magazine .mag-card strong { display: block; margin-bottom: 6px; }
.magazine .mag-card p:last-child { margin-bottom: 0; }

/* 카드(아이콘) — 아이콘은 data-icon 에서 꺼낸다. 글 쓰는 사람이 이모지 하나만
   바꾸면 되도록 마크업에 그림 태그를 넣지 않는다.
   아직 안 고른 카드는 왼쪽 빈자리를 두지 않는다 — 빈 칸이 벌어져 있으면 실수로 보인다. */
.magazine .mag-card--icon { position: relative; padding-left: 52px; }
.magazine .mag-card--icon[data-icon=""] { padding-left: 18px; }
.magazine .mag-card--icon::before {
  content: attr(data-icon);
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: 20px;
  line-height: 1;
}

/* 말풍선 — 글 앞머리의 주고받는 대화. <strong> 이 말하는 사람이다. */
.magazine .mag-talk {
  background: #f7f8fa;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 20px 0;
}
.magazine .mag-talk p { margin: 4px 0; }
.magazine .mag-talk strong { margin-right: 6px; color: #2a78d6; }

/* 작은 글씨 — 본문 흐름을 끊지 않고 예외를 덧붙이는 자리다. */
.magazine .mag-fineprint { font-size: 13px; color: #6b7280; }

/* 본문 링크는 파란색. 본문 글자와 같은 색이면 누를 수 있는 곳인지 안 보인다. */
.magazine a,
.magazine .mag-link { color: #2a78d6; text-decoration: underline; }

/* 구분선 */
.magazine hr { border: 0; border-top: 1px solid #e5e7eb; margin: 32px 0; }

/* 표 */
.magazine table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14px; }
.magazine th,
.magazine td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; }
.magazine th { background: #f7f8fa; font-weight: 600; }

/* 글 머리 — 카테고리 · 글쓴이 · 작성일 */
.magazine .mag-meta { color: #6b7280; font-size: 13px; margin-bottom: 20px; }

/* 참고자료 — 본문 아래에 따로 붙는다. 링크는 출처명에 건다. */
.magazine .mag-refs { margin-top: 32px; border-top: 1px solid #e5e7eb; padding-top: 16px; }
.magazine .mag-refs h3 { font-size: 14px; margin: 0 0 8px; }
.magazine .mag-refs li { font-size: 13px; color: #4b5563; }