/*
 * 마크다운 뷰어 — «문서» 스타일 (정본 하나).
 *
 * 화면의 미리보기 종이와 인쇄(PDF) 창이 «이 파일 하나»를 같이 읽는다.
 * 두 벌로 나누면 반드시 어긋나고, 그러면 「보이는 그대로 저장」이 거짓이 된다.
 * PNG 는 화면 종이를 그대로 찍으므로 역시 이 파일을 따른다.
 *
 * 폭 계약: A4(210mm) − 좌우 여백 15mm×2 = 본문 180mm(= 680px @96dpi).
 *   화면 종이: 폭 794px, 좌우 안쪽 여백 57px → 본문 680px
 *   인쇄:      @page 여백 15mm → 본문 180mm
 * 그래서 줄바꿈 위치가 화면과 출력에서 같다.
 *
 * 사이트 공통 스타일(Bootstrap reboot)이 화면에만 입히는 값(code 색·pre 크기·hr 투명도·th 정렬)은
 * 여기서 전부 «명시»한다. 인쇄 창에는 그 스타일이 없어서, 명시하지 않으면 화면과 PDF 가 갈린다.
 *
 * 가로로 넘치는 것(긴 코드·URL·넓은 표)은 «자르지 않고 접는다». 화면에서 가로
 * 스크롤로 숨겨 두면 출력에서는 잘려 나가 화면과 결과가 달라진다.
 */

.mdv-doc {
    --mdv-fs: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', system-ui, sans-serif;
    font-size: var(--mdv-fs);
    line-height: 1.7;
    color: #1f2328;
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
}
.mdv-doc > :first-child { margin-top: 0 !important; }
.mdv-doc > :last-child { margin-bottom: 0 !important; }

.mdv-doc h1, .mdv-doc h2, .mdv-doc h3, .mdv-doc h4, .mdv-doc h5, .mdv-doc h6 {
    margin: 1.5em 0 .6em;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2328;
}
.mdv-doc h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid #d1d9e0; }
.mdv-doc h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid #d1d9e0; }
.mdv-doc h3 { font-size: 1.25em; }
.mdv-doc h4 { font-size: 1em; }
.mdv-doc h5 { font-size: .875em; }
.mdv-doc h6 { font-size: .85em; color: #59636e; }

.mdv-doc p, .mdv-doc ul, .mdv-doc ol, .mdv-doc blockquote, .mdv-doc pre, .mdv-doc table, .mdv-doc dl {
    margin: 0 0 1em;
}
.mdv-doc a { color: #0969da; text-decoration: underline; text-underline-offset: 2px; }
.mdv-doc strong { font-weight: 700; }
.mdv-doc hr { height: 0; margin: 1.5em 0; border: 0; border-top: 2px solid #d1d9e0; color: #d1d9e0; opacity: 1; }

.mdv-doc ul, .mdv-doc ol { padding-left: 2em; }
.mdv-doc li + li { margin-top: .25em; }
.mdv-doc li > ul, .mdv-doc li > ol { margin: .25em 0 0; }
.mdv-doc li.task-list-item, .mdv-doc li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.4em; }
.mdv-doc input[type="checkbox"] { margin: 0 .4em 0 0; vertical-align: -1px; pointer-events: none; font-size: inherit; line-height: inherit; }

.mdv-doc blockquote {
    padding: 0 1em;
    color: #59636e;
    border-left: 4px solid #d1d9e0;
}

.mdv-doc code {
    font-family: ui-monospace, 'SFMono-Regular', 'D2Coding', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: .875em;
    color: #1f2328;
    padding: .15em .35em;
    background: #eff1f3;
    border-radius: 4px;
}
.mdv-doc pre {
    font-size: .85em;
    padding: 1.1em;
    background: #f6f8fa;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    line-height: 1.5;
    white-space: pre-wrap;          /* 접는다 — 가로 스크롤로 숨기면 출력에서 잘린다 */
    word-break: break-all;
    overflow: visible;
}
.mdv-doc pre code { padding: 0; background: none; border-radius: 0; font-size: 1em; color: inherit; }

.mdv-doc table {
    width: 100%;
    border-collapse: collapse;
    word-break: break-word;
}
.mdv-doc th, .mdv-doc td { padding: .45em .75em; border: 1px solid #d1d9e0; vertical-align: top; text-align: left; }
.mdv-doc [align="center"] { text-align: center; }
.mdv-doc [align="right"] { text-align: right; }
.mdv-doc th { font-weight: 700; background: #f6f8fa; }
.mdv-doc tr:nth-child(2n) td { background: #fafbfc; }

.mdv-doc img { max-width: 100%; height: auto; }
.mdv-doc del { color: #59636e; }

/* 막아 둔 이미지·표시할 수 없는 이미지 자리 */
.mdv-doc .mdv-imgph {
    display: inline-flex; align-items: center; gap: .4em;
    max-width: 100%;
    padding: .5em .75em;
    font-size: .8125em;
    color: #59636e;
    background: #f6f8fa;
    border: 1px dashed #c4ccd4;
    border-radius: 6px;
    word-break: break-all;
}

/* highlight.js 가 없어도 코드는 읽힌다. 있으면 github 테마가 색을 얹는다. */
.mdv-doc .hljs { background: transparent; padding: 0; }

/* ── 인쇄(PDF) ─────────────────────────────────────────────── */
@media print {
    .mdv-doc h1, .mdv-doc h2, .mdv-doc h3, .mdv-doc h4 { break-after: avoid; page-break-after: avoid; }
    .mdv-doc pre, .mdv-doc blockquote, .mdv-doc img, .mdv-doc tr { break-inside: avoid; page-break-inside: avoid; }
    .mdv-doc a { color: #0969da; }
    .mdv-doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
