@charset "UTF-8";
/*
 * markdown-content.css - 마크다운 본문 공용 스타일
 *
 * 이 파일은 두 저장소에 같은 내용으로 존재한다. 한 글자라도 달라지면 버그다 -
 * 관리자 미리보기와 실제 공개 화면이 어긋난다.
 *   MangoBoard  src/main/webapp/css/common/markdown-editor/markdown-content.css
 *   MangoWeb    src/webapp/common/responsive/css/markdown-content.css
 * 검증: cmp -s <두 경로>   (다르면 종료코드 1)
 *
 * 에디터 전용(.mde-*) 규칙은 markdown-editor.css 에 둔다. 이 파일에 넣지 않는다.
 *
 * 쓰이는 곳: 공개 가이드 / 공지 / FAQ / 플로팅 패널 + 관리자 에디터 미리보기.
 * 한 줄을 고치면 다섯 화면이 함께 바뀐다.
 */

/* ===== 공통 본문 타이포그래피 ===== */
.md-guide {
	font-family: 'Pretendard-Medium', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: -0.03em;
	color: #555;
	word-break: keep-all;
	overflow-wrap: anywhere;
	overflow-x: auto;
}
.md-guide > :first-child { margin-top: 0; }
.md-guide > :last-child { margin-bottom: 0; }

.md-guide h1,
.md-guide h2,
.md-guide h3,
.md-guide h4,
.md-guide h5,
.md-guide h6 {
	font-family: 'Pretendard-Bold', 'Pretendard', sans-serif;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.04em;
	color: #111;
}
/* 크기·자간은 Figma "제목 태그 및 본문"(19245:3647)과 2026-10-06 사용자가 전달한 사양이다. 모두 Pretendard Bold 700, 줄 높이 140%.
   h1 32 / 자간 -1%, h2 28 / -1%, h3 20 / 0, h4 18 / 0. 위 공통 블록의 -0.04em 을 그대로 쓰면 h1·h2 는 1px 가까이,
   h3·h4 는 0.7~0.8px 더 좁아져 사양과 달라지므로 여기서 되돌린다(예전에는 h3·h4 가 공통값 그대로였다).
   h5·h6 는 사양에 없어 공통값을 그대로 둔다. h1 위 여백은 2026-10-09 사용자 요청으로 40 에서 10 으로 줄였다. */
.md-guide h1 { margin: 10px 0 18px; font-size: 32px; letter-spacing: -0.01em; }
.md-guide h2 { margin: 48px 0 16px; font-size: 28px; letter-spacing: -0.01em; }
.md-guide h3 { margin: 38px 0 14px; font-size: 20px; letter-spacing: 0; }
.md-guide h4 { margin: 28px 0 12px; font-size: 18px; letter-spacing: 0; }
.md-guide h5 { margin: 24px 0 10px; font-size: 16px; }
.md-guide h6 { margin: 22px 0 10px; font-size: 15px; }
/* 제목 바로 뒤에 제목이 이어지면(h2 > h3) 위 여백을 접는다. 위 문단과 가르려고 키운 h2·h3 의 위 여백이
   제목 사이에서는 과하게 벌어져 보이므로, 앞 제목의 아래 여백(16 / 14)만 남긴다. */
.md-guide :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3) { margin-top: 16px; }

.md-guide p { margin: 0 0 12px; }
.md-guide strong,
.md-guide b {
	font-family: 'Pretendard-Bold', 'Pretendard', sans-serif;
	font-weight: 700;
	color: #111;
}
.md-guide em,
.md-guide i { font-style: italic; }
/* 취소선(GFM ~~글~~). 시안은 글자까지 흐리게 해 '지운 것'임을 색으로도 알린다.
   규칙이 없으면 본문 색(#555)을 그대로 물려받아 선 하나로만 구분된다. */
.md-guide del,
.md-guide s {
	color: #b1b1b1;
	text-decoration-color: #b1b1b1;
}
/* 굵은 글자만 든 문단도 일반 문단과 같다. 예전에는 소제목으로 보아 위 여백 30·줄 높이 1.4 를 따로 주었으나,
   굵게를 일반 글처럼 쓰려는 요청(2026-10-06)으로 그 특례를 없앴다. 제목 모양이 필요하면 마크다운 제목(##)을 쓴다. */

/* 본문 링크. 평소에도 hover 와 같은 파랑(#0B7EE9)이고 글자와 밑줄을 함께 칠한다(한쪽만 칠하면 두 색이 갈려 어색하다).
   Figma "링크 03-link" 시안(평소 19245:3717 / hover 19245:3757)은 평소 본문 톤(#555)에서 hover 때만 파랑으로 바뀌었으나,
   2026-10-07 사용자 요청으로 평소 색을 hover 색으로 올렸다. 평소와 hover 가 같은 색이라 hover 규칙은 따로 두지 않는다.
   링크라는 신호는 파랑·밑줄 모양·한 단 굵은 글자(500)가 맡는다. 예전의 망고색 밑줄은 시안에서 빠졌다.

   선언 순서에 주의한다. 단축 속성 text-decoration 이 뒤에 오면 text-decoration-color 를
   currentColor 로 되돌린다. 단축을 먼저 두고 색을 뒤에 준다. */
.md-guide a {
	font-family: 'Pretendard-Medium', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
	color: #0B7EE9;
	font-size: 16px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: #0B7EE9;
	text-underline-offset: 3px;
}
/* 이미지를 감싼 링크에는 밑줄이 붙을 자리가 없다. */
.md-guide a:has(img) { text-decoration: none; }
/* 링크 안의 굵게([**글**](주소) → <a><strong>)는 링크 색을 따른다. 위 .md-guide strong 이 색(#111)을 직접 적어 두어,
   안 막으면 굵은 글자만 검정이고 밑줄만 파랑으로 남는다(2026-10-09 사용자 요청). 굵기는 굵게 그대로다.
   inherit 이라 링크 색을 따로 정한 곳에서는 그 링크 색을 따르고, 링크 안에서 칠한 글자색(span)은 아래 span 규칙대로 span 색이다.
   반대 모양 **[글](주소)**(<strong><a>)는 위 .md-guide a 가 색을 직접 적어 원래 링크 색이다. */
.md-guide a :is(strong, b) { color: inherit; }

/* 본문 그림의 모서리 반경은 시안 주석(19596:55804 '개발관련')이 15px 로 못박았다. */
.md-guide img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px 0;
	border-radius: 15px;
}
/* 세로로 이어지는 그림. 그림이 하나뿐인 문단(![](a) 빈 줄 ![](b) — 에디터가 올린 사진이 이 모양이다)은 뒤에 무엇이 오든
   (그림 문단이든 글·목록·인용·표든) 아래 여백을 32 로 둔다. '하나뿐'은 그림 태그가 하나라는 뜻이라 글이 곁들인 문단(<p>글 <img></p>)도
   포함한다 — CSS 는 글 조각(텍스트 노드)을 가려내지 못한다. 예전에는 문단 아래 12 에 그림 위아래 8 이 겹쳐 12 만 벌어져
   그림이 한 덩어리처럼 붙어 보였고, 그림 다음 글도 바짝 붙었다. 본문 마지막 문단은 :last-child 로 빠져 아래 여백을 더하지 않는다.
   뒤따르는 것이 제목·hr 처럼 위 여백이 더 큰 블록이면 겹쳐(collapse) 큰 쪽이 이긴다.
   :has() 의 목록은 '그림 하나뿐인 문단' — 그림 / 크기 지정 래퍼(.md-img) / 링크로 감싼 그림(링크 안에 래퍼가 와도 같다). 같은 문단에 이어 붙인 그림(<p><img><img>)은
   그림이 하나가 아니라 이 규칙에는 잡히지 않고, 아래 '이어 붙은 그림' 규칙이 12 를 둔다. 목록 항목 안의 문단은 절반이다(항목 글과의 위계).
   그림으로 끝나는 문단(그림 <br> 그림, 글 <br> 그림)은 세 번째 규칙이 맡는다 — <br> 이 있고 마지막 요소 자식이 그림(링크 안 그림 포함)인
   최상위 문단이 뒤에 블록이 이어지면 같은 32 를 준다. 한계: 요소만 보므로 그림 뒤에 글 조각이 더 이어지는 문단(글 <br> 그림 글)도 같이 잡힌다.
   글로 끝나는 그림 <br> 글 은 잡히지 않아 그대로다.
   랜딩 카드(.guide-main)와 대분류 목록(.guide-index)은 자기 배치가 있어 뺀다. 공개 상세 화면은 최상위 블록 간격을 화면 CSS 가 정하므로
   articleBody.css 가 같은 규칙을 한 단 세게 다시 건다. */
.md-guide:not(.guide-main):not(.guide-index) > p:has(> :is(img, .md-img):only-child, > a:only-child > :is(img, .md-img):only-child):not(:last-child) { margin-bottom: 32px; }
.md-guide:not(.guide-main):not(.guide-index) li > p:has(> :is(img, .md-img):only-child, > a:only-child > :is(img, .md-img):only-child):not(:last-child) { margin-bottom: 16px; }
.md-guide:not(.guide-main):not(.guide-index) > p:has(> br):has(> :is(img, .md-img):last-child, > a:last-child > :is(img, .md-img)):not(:last-child) { margin-bottom: 32px; }
/* 이어 붙은 그림(2026-10-06 요청: 그림과 그림 사이가 너무 붙어 보인다). 같은 문단·항목에 바로 이어 붙인 그림(<p><img><img></p>), 링크로 감싼
   그림끼리(<a><img></a><a><img></a>), 크기 지정 래퍼(.md-img)끼리, 줄마다 놓은 <img> 는 뒤 그림 위에 12 를 둔다. 앞 그림의 자리는 그대로다.
   예전에는 관리자 미리보기·FAQ 가 그림 위아래 8 이 겹친 8 만 벌어졌고 공개 상세 화면은 0 이어서 한 덩어리처럼 붙어 보였다.
   그림 <br> 그림 과 문단이 따로인 그림은 위 규칙이 정하고, 표 칸(td·th)은 칸 안쪽 배치가 따로 있어 뺀다.
   공개 상세 화면은 블록 안 그림 여백을 0 으로 못 박으므로 articleBody.css 가 같은 규칙을 한 단 세게 다시 건다. */
.md-guide:not(.guide-main):not(.guide-index) > :is(img, .md-img, a:has(> :is(img, .md-img))) + :is(img, .md-img),
.md-guide:not(.guide-main):not(.guide-index) :not(td, th) > :is(img, .md-img, a:has(> :is(img, .md-img))) + :is(img, .md-img),
.md-guide:not(.guide-main):not(.guide-index) > :is(img, .md-img, a:has(> :is(img, .md-img))) + a:has(> :is(img, .md-img)) > :is(img, .md-img),
.md-guide:not(.guide-main):not(.guide-index) :not(td, th) > :is(img, .md-img, a:has(> :is(img, .md-img))) + a:has(> :is(img, .md-img)) > :is(img, .md-img) { margin-top: 12px; }
.md-guide iframe {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 18px 0;
	border: 0;
}

/* 크기를 지정한 그림의 래퍼. 문단 구조를 지키려고 span 으로 감싸므로 블록으로 되돌린다.
   (.md-youtube 와 같은 이유 - 줄에 혼자 놓인 <img> 는 marked 가 HTML 블록으로 보아
   빈 줄이 나올 때까지 뒤를 통째로 삼킨다) */
.md-guide .md-img {
	display: block;
	max-width: 100%;
}

/* YouTube 임베드 래퍼. 문단 구조를 지키려고 span 으로 감싸므로 블록으로 되돌린다. */
.md-guide .md-youtube {
	display: block;
	width: 100%;
	max-width: 640px;
	margin: 18px 0;
}

.md-guide .md-youtube > iframe { margin: 0; max-width: none; }

/* 목록 항목이 영상 하나뿐이면 목록 기호만 덩그러니 남으므로 기호를 없앤다. */
.md-guide li > .md-youtube:first-child,
.md-guide li > p:first-child > .md-youtube { margin-top: 0; }

/* 번호 목록은 번호가 내용의 일부이므로 그대로 두고, 글머리 기호 목록에서만 없앤다. */
.md-guide ul > li:has(> .md-youtube:only-child),
.md-guide ul > li:has(> p:only-child > .md-youtube:only-child) { list-style: none; }

/*
 * 목록.
 *
 * 글머리표 값은 목록(ul/ol)에 정하고, li 에는 `list-style: inherit` 만 건다.
 * 공개 화면 default.css 의 `li{list-style:none}` 이 li 를 직접 가리켜서 부모에게 물려받는
 * 값을 덮어 버리기 때문에, 같은 li 를 더 높은 특정도로 다시 잡아 상속을 되살리는 것이다.
 * 값을 li 에 직접 박지 않는 이유는 아래 .guide-main / .use-list 처럼
 * 일부러 글머리표를 없앤 목록까지 되살아나기 때문이다.
 */
.md-guide ul,
.md-guide ol {
	margin: 0 0 14px;
	padding-left: 22px;
}
.md-guide ul { list-style: disc; }
.md-guide ol { list-style: decimal; }
/* 중첩 깊이는 조상 태그의 종류가 아니라 부모 li 로 센다.
   `ul ul` 로 세면 ol 을 한 번 거친 목록(ol > li > ul)이 최상위와 같은 disc 로 되돌아가고,
   실제 깊이와 글머리표 단계가 어긋난다. */
.md-guide li > ul { list-style-type: circle; }
.md-guide li > ol { list-style-type: lower-alpha; }
.md-guide li li > ul { list-style-type: square; }
.md-guide li li > ol { list-style-type: lower-roman; }
.md-guide li {
	list-style: inherit;
	margin: 6px 0;
}

/* 항목 사이가 빈 줄로 떨어진 loose list 는 li 안이 <p> 로 감싸여 들어온다. */
.md-guide li > p { margin: 0 0 8px; }
.md-guide li > p:last-child { margin-bottom: 0; }
/* 중첩 목록은 부모 li 의 여백 안에 들어간다. 자기 아래 여백을 또 두면 14px 이 겹친다. */
.md-guide li > ul,
.md-guide li > ol { margin-bottom: 0; }

/*
 * 인용.
 *
 * 마커 없는 `>` 는 회색이고, `> [!NOTE]` 계열 마커를 붙이면 색이 바뀐다.
 * 다섯 색은 두레이의 노트/팁/중요/경고/주의 패널과 하나씩 짝을 이룬다.
 *   NOTE 회색 · TIP 파랑 · IMPORTANT 보라 · WARNING 망고 · CAUTION 빨강
 */
.md-guide blockquote {
	margin: 18px 0;
	padding: 16px 24px;
	font-size: 16px;
	line-height: 1.5;
	color: #777;
	background: #F6F7F9;
	border-left: 3px solid #AAACB0;
}
.md-guide blockquote > :last-child { margin-bottom: 0; }
/* 인용 첫 줄이 굵은 글자만이면('참고', 'TIP' 상자의 제목) 다음 문단을 바짝 붙인다. 예전에는 제목 뒤에 줄바꿈(<br>)을 넣어 붙였는데,
   그 줄바꿈을 문단으로 나누면서(2026-10-09) 제목 아래가 문단 간격 12px 로 벌어지지 않게 한다. CSS 는 굵은 글 뒤에 이어진 일반 글자를
   가리지 못해, 첫 문단이 '굵은 글 + 보통 글'이어도 같은 간격이 된다.
   예외(2026-10-14): 번호 붙은 굵은 줄이 이어지는 인용(> **1\. 가** / > **2\. 나** / > **3\. 다**)은 제목 + 본문이 아니라 같은 위계의 줄이다.
   예전에는 첫 간격만 4px 라 1번-2번이 2번-3번보다 좁아 보였다. 첫 문단 뒤의 둘째·셋째 문단이 모두 굵은 글 하나만 든 문단이면
   (굵은 줄이 셋 이상 이어지면) 첫 문단도 일반 문단 간격 12px 를 받아 모든 간격이 같다. :has() 안에는 :has() 를 넣을 수 없어
   '다음 문단이 굵은 글 하나' / '다다음 문단이 굵은 글 하나'를 :has() 둘로 따로 묻는다. 굵은 문단이 둘뿐인 인용은 일부러 4px 로 둔다 — 간격이 하나라
   견줄 간격이 없고, CSS 는 둘째 문단이 굵은 구절 하나만 낀 보통 문단('TIP' + 본문 속 **굵은 말** 한 군데)인지 굵은 글뿐인 문단인지 가리지 못해
   둘째만 보고 예외를 걸면 제목 + 본문 상자의 제목 간격이 12px 로 벌어진다(실제 글 627건 중 인용 5건, 셋째까지 보면 1건).
   한계: 제목 뒤에 굵은 구절이 하나씩 든 본문 문단이 둘 이상 이어지는 상자는 같이 12px 가 된다. */
.md-guide blockquote > p:first-child:has(> :is(strong, b):only-child):not(:last-child):not(:has(+ p > :is(strong, b):only-child):has(+ p + p > :is(strong, b):only-child)) { margin-bottom: 4px; }
/* 인용 안의 문단은 인용 자신의 색·크기를 그대로 물려받는다. */
.md-guide blockquote p { color: inherit; }
.md-guide blockquote.md-quote-gray { border-left-color: #AAACB0; }
.md-guide blockquote.md-quote-blue { border-left-color: #2D99EA; }
.md-guide blockquote.md-quote-purple { border-left-color: #9655F0; }
.md-guide blockquote.md-quote-mango { border-left-color: #FEDE29; }
.md-guide blockquote.md-quote-red { border-left-color: #FE6767; }
/*
 * 구분선. 원본 게시판이 대시를 길게 늘여 그리던 절취선이 이 태그로 들어온다.
 * 공개 화면 default.css 의 `legend, caption, hr{display:none}` 이 감추므로
 * display 를 되살려야 한다.
 *
 * 관리자 base.css 는 hr 을 레이아웃 표식으로만 쓰려고
 * `position:absolute; width:0; height:0; visibility:hidden` 으로 감춘다.
 * display 만 되살리면 내용이 없는 절대배치 상자라 폭이 0 이 되어 선이 안 그려진다.
 * 넷을 모두 되돌려야 한다.
 */
.md-guide hr {
	display: block;
	position: static;
	visibility: visible;
	clear: none;
	width: auto;
	height: 0;
	margin: 32px 0;
	border: 0;
	border-top: 1px solid #eee;
	overflow: visible;
}

.md-guide table {
	width: 100%;
	margin: 18px 0;
	border-collapse: collapse;
	font-size: 15px;
}
/* 표 뒤에 다른 블록이 이어지면 아래 여백을 30 으로 둔다(글이 표 테두리에 바짝 붙어 보이지 않게). 본문 마지막 표는 :last-child 로 빠져
   18 을 지킨다. 템플릿 업데이트 표(alt 접두어)는 표끼리 10 간격을 지켜야 해서 뺀다. 뒤에 제목이 오면 제목 위 여백과 겹쳐 큰 쪽이 이긴다.
   랜딩 카드(.guide-main)와 대분류 목록(.guide-index)은 자기 배치가 있어 그림 규칙과 같이 뺀다.
   공개 상세(사용가이드·망고소식)는 화면 CSS 가 최상위 블록 간격을 정하므로 guideDetail.css · noticeDetail.css 가 한 단 세게 다시 건다. */
.md-guide:not(.guide-main):not(.guide-index) > table:not(:last-child):not(:has(img[alt^="망고보드 템플릿 업데이트 "])) { margin-bottom: 30px; }
.md-guide th,
.md-guide td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border: 1px solid #e5e5e5;
}
/* 칸 안 마지막 문단의 아래 여백은 칸 안쪽 여백(10px)에 더해져 아래만 넓어 보인다(옛 HTML 표 FQ156·163·498). */
.md-guide :is(td, th) > p:last-child { margin-bottom: 0; }

/* 썸네일 표. 에디터의 표 버튼으로 요소·템플릿을 격자로 넣으면 이 모양이 된다.
   마크다운 표에는 클래스를 붙일 수 없어 칸의 내용으로 가른다. */
.md-guide td:has(> img:only-child),
.md-guide td:has(> a:only-child > img:only-child) {
	padding: 4px;
	vertical-align: middle;
}
.md-guide td > img,
.md-guide td > a > img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}
/* 썸네일 표는 제목 줄이 비어 있다. GFM 이 제목 줄을 요구해서 넣은 것이라 자리를 주지 않는다. */
.md-guide thead th:empty {
	padding: 0;
	line-height: 0;
	border: 0;
}

/*
 * 템플릿 업데이트 그룹 표. 에디터의 '템플릿 업데이트 표'(markdown-tpl-update.js)가 만든다.
 * 표에는 클래스를 붙일 수 없어 이미지 alt 접두어로 가른다 - 접두어를 바꾸면 에디터도 함께 고친다.
 *
 * 표를 grid 로 바꿔 칸 폭을 고르게 나눈다. 표로 두면 빈 칸이 있는 열이 글자 폭만큼 줄어든다.
 * display:block 이라 공개 화면 articleBody.css 의 table{width:auto} 와 폭을 다투지 않고 부모 폭을 채운다.
 * 열 수는 첫 행의 칸 수(에디터가 1~4열로 만들고 마지막 행 빈 칸도 채운다)로 정한다.
 * 칸 규칙을 td:not(:empty) 로 한 단 세게 두는 것은 위 썸네일 칸 규칙(td:has(> a:only-child > img:only-child))의
 * padding 4px 를 이기기 위해서다.
 */
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) {
	display: block;
	margin: 18px 0;
}
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) > thead { display: none; }
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) > tbody {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]):has(> tbody > tr:first-child > td:nth-child(1):last-child) > tbody {
	grid-template-columns: minmax(0, 1fr);
}
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]):has(> tbody > tr:first-child > td:nth-child(2):last-child) > tbody {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]):has(> tbody > tr:first-child > td:nth-child(4):last-child) > tbody {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* 행은 격자에서 사라지고 칸만 격자 칸이 된다. */
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) > tbody > tr { display: contents; }
/* 칸 모양은 피그마 컴포넌트(256-2)대로 흰 바탕·1px #E8E8E8 테두리, 이미지는 칸 폭에 맞춘다(Fit). */
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) > tbody > tr > td:not(:empty) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid #E8E8E8;
}
/* 마지막 행을 채운 빈 칸은 자리만 지킨다. */
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) > tbody > tr > td:empty { visibility: hidden; }
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) td > a { display: block; }
/* 상세페이지 칸은 링크 하나에 이미지 세 장이 이어 붙어 있다. block 이라 세로로 쌓인다. */
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) td img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}
/* 세트마다 나뉜 표가 이어지면 표 사이도 칸 간격과 같은 10 이다. */
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]):has(+ table img[alt^="망고보드 템플릿 업데이트 "]) { margin-bottom: 10px; }
.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]) + table:has(img[alt^="망고보드 템플릿 업데이트 "]) { margin-top: 10px; }
/* 4열(탁상달력·가로 브로슈어)은 좁은 화면에서 칸이 70px 안팎이라 2열로 줄인다. */
@media screen and (max-width: 600px) {
	.md-guide table:has(img[alt^="망고보드 템플릿 업데이트 "]):has(> tbody > tr:first-child > td:nth-child(4):last-child) > tbody {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.md-guide th {
	font-weight: 700;
	color: #111;
	background: #f8f8f8;
}

/* 인라인 코드 — 기본 칩(Figma "인라인코드(형광펜)" Cherry, 19245:3674). 색 변형 여섯(md-code-*)도 이 한 규칙으로 모양을 정하고 색만 아래에서 바꾼다.
   글꼴은 본문과 같은 Pretendard Medium(500)이다. 예전에는 'D2Coding', Consolas, monospace 였는데 D2Coding 을 싣는 곳이 없어
   한글이 시스템 고정폭 글꼴로 떨어져 깨져 보였다. 고정폭이 필요한 코드 블록(pre code)만 바로 아래에서 따로 지킨다.
   글자 크기는 둘레 일반 글자와 같다(1em). 2026-10-06 사용자 요청 — 예전에는 14px 고정이라 본문(16px)보다 작게 보였다(시안 칩 14px 고정을 접었다).
   em 이라 제목 안에서는 제목 크기, 표 칸·목록 안에서는 그 글자 크기를 따르고, 700px 이하 본문(15px / 공개 상세 14px)도 함께 줄어든다.
   자간 -0.01em 은 시안 -1% 와 같다(14px 기준 -0.14px). line-height 는 적지 않고 둘레 값을 따른다 — 칩이 줄 높이를 바꾸지 않는다
   (인라인 박스의 위아래 테두리·패딩은 줄 높이에 들지 않는다).
   위아래 여백은 padding 이 아니라 투명 테두리 2px 로 만든다. 칩 배경은 테두리 밑까지 깔린다(background-clip 기본값 border-box).
   예전에는 padding 0.15em(소수 픽셀)이었는데, Chrome 이 인라인 박스 위치를 정수 픽셀로 맞출 때 소수 부분이 버려져 줄 위치의 소수부에 따라
   칩 안 글자가 바깥 글자보다 1px 위나 아래에 그려졌다(엣지 실측, 소수부 0.5 안팎의 줄에서 12줄 중 5줄). 테두리 폭은 기기 픽셀 정수로 내림되므로
   어떤 배율에서도 칩 안 글자의 위치가 바깥 글자와 같다. 좌우 padding 은 가로 위치만 정해 상관없다. */
.md-guide code {
	padding: 0 8px;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	font-family: 'Pretendard-Medium', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
	font-size: 1em;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #c7254e;
	word-break: break-all;
	background: #f4f4f4;
	border-radius: 5px;
}
.md-guide pre {
	margin: 18px 0;
	padding: 16px 18px;
	overflow-x: auto;
	background: #f6f8fa;
	border-radius: 8px;
}
.md-guide pre code {
	padding: 0;
	border-width: 0;
	font-family: 'D2Coding', Consolas, monospace;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: normal;
	color: inherit;
	background: none;
	border-radius: 0;
}

/* ===== UG011 Markdown 랜딩 카드 =====
 * 구조: h3 + loose list, li 안에 이미지/제목/설명/자세히보기 문단이 순서대로 온다.
 */
.md-guide.guide-main {
	width: 100%;
	max-width: 1040px;
	margin-right: auto;
	margin-left: auto;
	overflow-x: visible;
}

.md-guide.guide-main > h3 {
	margin: 0 0 25px;
	padding-bottom: 2px;
	font-size: 22px;
}

.md-guide.guide-main > h3:not(:first-child) { margin-top: 49px; }

.md-guide.guide-main > ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 310px));
	justify-content: space-between;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.md-guide.guide-main > ul > li {
	position: relative;
	min-width: 0;
	margin: 0;
	list-style: none;
}

.md-guide.guide-main > ul > li > p { margin: 0; }
.md-guide.guide-main > ul > li > p:first-child a { display: block; }

.md-guide.guide-main > ul > li > p:first-child img {
	width: 100%;
	margin: 0;
}

/* 카드 첫 칸이 썸네일 대신 영상일 때도 썸네일과 같은 자리·같은 폭을 쓴다. */
.md-guide.guide-main > ul > li > p:first-child .md-youtube,
.md-guide.guide-main > ul > li > p:first-child iframe {
	width: 100%;
	max-width: none;
	margin: 0;
}

.md-guide.guide-main > ul > li > p:nth-of-type(2) strong {
	display: block;
	margin-top: 19px;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: -0.065em;
}

.md-guide.guide-main > ul > li > p:nth-of-type(3) {
	margin-top: 9px;
	font-size: 15px;
	line-height: 23px;
	letter-spacing: -0.05em;
	color: #777;
}

.md-guide.guide-main > ul > li > p:nth-of-type(3) em { font-style: normal; }

.md-guide.guide-main > ul > li > p:nth-of-type(4) { margin-top: 21px; }

.md-guide.guide-main > ul > li > p:nth-of-type(4) a {
	display: inline-block;
	padding-right: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	letter-spacing: -0.065em;
	color: #555;
	text-decoration: none;
	background: url('https://www.mangoboard.net/common/responsive/images/guide/bg_more-arrow.png') 100% 50% no-repeat;
}

/* 첫 번째 3열 카드 사이의 구분선을 운영 이미지 높이에 맞춘다. */
.md-guide.guide-main > ul:first-of-type {
	padding-bottom: 49px;
	border-bottom: 1px solid #f4f4f4;
}

.md-guide.guide-main > ul:first-of-type > li:not(:last-child)::after {
	position: absolute;
	top: 0;
	right: -28px;
	width: 1px;
	height: 190px;
	content: '';
	background: #f4f4f4;
}

/* 콘텐츠 만들기 섹션은 운영처럼 2열, 이미지 40%·텍스트 60%로 배치한다. */
.md-guide.guide-main > ul:nth-of-type(2) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 30px;
}

.md-guide.guide-main > ul:nth-of-type(2) > li {
	display: grid;
	grid-template-rows: auto auto 1fr;
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
	column-gap: 20px;
	align-content: start;
}

.md-guide.guide-main > ul:nth-of-type(2) > li:nth-child(n+3) {
	padding-top: 29px;
	border-top: 1px solid #f4f4f4;
}

.md-guide.guide-main > ul:nth-of-type(2) > li > p:first-child {
	grid-row: 1 / span 3;
	grid-column: 1;
}

.md-guide.guide-main > ul:nth-of-type(2) > li > p:not(:first-child) {
	grid-column: 2;
	margin-left: 0;
}

.md-guide.guide-main > ul:nth-of-type(2) > li > p:nth-of-type(2) strong { margin-top: 9px; }
.md-guide.guide-main > ul:nth-of-type(2) > li > p:nth-of-type(4) { margin-top: 14px; }

/* 운영의 중간 화면처럼 카드 너비를 동일 비율로 줄이고 세로 구분선은 숨긴다. */
@media screen and (max-width: 1450px) {
	.md-guide.guide-main > ul:first-of-type {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 25px;
	}

	.md-guide.guide-main > ul:first-of-type > li:not(:last-child)::after { display: none; }
}

/* ===== 기존 raw HTML 가이드 호환 ===== */
.md-guide figure { display: block; margin: 0; padding: 0; }
.md-guide .br { display: block; }
.md-guide .sub-tit {
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.075em;
	color: #111;
}
.md-guide .guide-box + .guide-box { margin-top: 60px; }
.md-guide .guide-box.gouide-box-margin1 {
	margin-bottom: 49px;
	border-bottom: 1px solid #f4f4f4;
}
.md-guide .guide-box.gouide-box-margin2 { margin-top: 49px; }

.md-guide .use-list {
	overflow: hidden;
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.md-guide .use-list::after {
	display: block;
	clear: both;
	content: '';
}
.md-guide .use-list li {
	float: left;
	width: 507px;
	box-sizing: border-box;
	padding-top: 29px;
	margin-top: 30px;
	list-style: none;
	border-top: 1px solid #f4f4f4;
}
.md-guide .use-list li:nth-child(2n) { padding-left: 26px; }
.md-guide .use-list li:nth-child(-n+2) {
	padding-top: 0;
	border-top: 0;
}
.md-guide .use-list li > div { display: flex; }
.md-guide .use-list .text {
	padding-top: 9px;
	margin-left: 30px;
}
.md-guide .use-list .text strong {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.065em;
	color: #111;
}
.md-guide .use-list .text p {
	margin-top: 9px;
	font-size: 15px;
	font-weight: 500;
	line-height: 23px;
	letter-spacing: -0.05em;
	color: #777;
}
.md-guide .use-list .more {
	display: inline-block;
	padding-right: 12px;
	margin-top: 34px;
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	letter-spacing: -0.065em;
	color: #555;
	text-decoration: none;
	background: url('https://www.mangoboard.net/common/responsive/images/guide/bg_more-arrow.png') 100% 50% no-repeat;
}
.md-guide .use-list.use-list-top { margin-bottom: 49px; }
.md-guide .use-list.use-list-top li {
	width: 310px;
	padding: 0;
	margin: 25px 27px 0;
	border-top: 0;
}
.md-guide .use-list.use-list-top li:first-child { margin-left: 0; }
.md-guide .use-list.use-list-top li:last-child { margin-right: 0; }
.md-guide .use-list.use-list-top li > div { display: block; }
.md-guide .use-list.use-list-top li > div > figure {
	width: 310px;
	padding-right: 27px;
	border-right: 1px solid #f4f4f4;
}
.md-guide .use-list.use-list-top li > div > figure:last-child { border-right: 0; }
.md-guide .use-list.use-list-top .text {
	padding-top: 19px;
	margin-left: 0;
}
.md-guide .use-list.use-list-top .more { margin-top: 21px; }

/* 운영 모바일 랜딩처럼 모든 카드를 이미지 좌측·텍스트 우측으로 축약한다. */
@media screen and (max-width: 700px) {
	.md-guide { font-size: 15px; }

	/* 제목 위 여백(h2 48 / h3 38)은 이 폭에서도 줄이지 않는다. 글자가 줄어드는 곳(공개 상세 h2 28 -> 26, h3 20 -> 18)은 상세 화면뿐이고,
	   거기는 articleBody.css 가 화면 CSS 변수(--article-h2-top / --article-h3-top)로 따로 정한다. FAQ·플로팅·관리자는 글자가 그대로라 여백도 그대로다. */
	.md-guide:not(.guide-main):not(.guide-index) > p:has(> :is(img, .md-img):only-child, > a:only-child > :is(img, .md-img):only-child):not(:last-child) { margin-bottom: 28px; }
	.md-guide:not(.guide-main):not(.guide-index) > p:has(> br):has(> :is(img, .md-img):last-child, > a:last-child > :is(img, .md-img)):not(:last-child) { margin-bottom: 28px; }

	.md-guide.guide-main > h3 {
		margin-bottom: 20px;
		font-size: 20px;
	}

	.md-guide.guide-main > h3:not(:first-child) { margin-top: 40px; }

	.md-guide.guide-main > ul,
	.md-guide.guide-main > ul:first-of-type,
	.md-guide.guide-main > ul:nth-of-type(2) {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.md-guide.guide-main > ul > li,
	.md-guide.guide-main > ul:nth-of-type(2) > li {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 20px;
		align-content: start;
		margin-top: 24px;
		padding-top: 24px;
		border-top: 1px solid #f4f4f4;
	}

	.md-guide.guide-main > ul > li:first-child,
	.md-guide.guide-main > ul:nth-of-type(2) > li:first-child {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.md-guide.guide-main > ul > li > p:first-child,
	.md-guide.guide-main > ul:nth-of-type(2) > li > p:first-child {
		grid-row: 1 / span 3;
		grid-column: 1;
	}

	.md-guide.guide-main > ul > li > p:not(:first-child),
	.md-guide.guide-main > ul:nth-of-type(2) > li > p:not(:first-child) {
		grid-column: 2;
		margin-left: 0;
	}

	.md-guide.guide-main > ul > li > p:nth-of-type(2) strong,
	.md-guide.guide-main > ul:nth-of-type(2) > li > p:nth-of-type(2) strong {
		margin-top: 9px;
	}

	.md-guide.guide-main > ul > li > p:nth-of-type(3) {
		margin-top: 9px;
		line-height: 20px;
	}

	.md-guide.guide-main > ul > li > p:nth-of-type(4) { display: none; }
	.md-guide.guide-main > ul:first-of-type > li:not(:last-child)::after { display: none; }
}

/* =========================================================================
 * 2026 서식 확장 — 인라인 코드 칩 / 글자색 / 배경색(형광펜) / 밑줄 / 빈 여백
 *
 * 마크다운에는 색 문법이 없다. 관리자 에디터가 HTML 로 저장한다.
 *   - 예전 글: 아래 클래스(md-text-*, md-code-*)를 붙인 HTML. 색은 여기 한 곳에서 정하고 계속 읽고 그린다.
 *   - 2026-10-06 이후 새로 칠하는 색: 글자색은 <span style="color:#rrggbb">, 배경색은 글 뒤에 깔리는 형광펜 <span style="background-color:#rrggbb"> 이다.
 *     같은 글에 둘 다 쓰면 한 span 이다(<span style="color:#rrggbb;background-color:#rrggbb">, color 먼저). 임의 색은 클래스 이름으로 다 적을 수 없어
 *     인라인 style 로 저장하기로 했다(이미 <img style> 가 같은 저장 경로를 지난다).
 *   - 인라인 코드 7종(툴바 인라인 코드 ▾: 기본 칩=일반 코드, 아래 md-code-blue 등 여섯)은 칩이다. 칩의 글자색만 따로 바꿔 프리셋 한 쌍이
 *     깨지면 <code class="md-code-c" style="color:…;background:…"> 로 저장된다. 클래스 쪽 색만 여기서 한꺼번에 다시 칠할 수 있고,
 *     style 로 저장된 색은 글마다 박혀 있어 이 파일로 바꿀 수 없다.
 * 칩 색값은 Figma "인라인코드(형광펜)" 컴포넌트(19245:3674)에서 그대로 가져왔다.
 * ========================================================================= */

/* 인라인 코드 칩 색 변형(Figma "인라인코드(형광펜)" 7종). 기본 인라인 코드(cherry)는 클래스가 없어 예전 글과 색이 같다.
   모양(글꼴·크기·자간·여백·모서리)은 위 .md-guide code 한 곳에서 정하고 여기서는 색만 바꾼다.
   md-code-c 는 에디터가 style 로 color / background 를 직접 넣는 칩이라 클래스에는 색을 두지 않는다
   (글자색만 준 칩은 위 .md-guide code 의 배경 #f4f4f4 를 그대로 받는다). */
/* 제목 줄 높이는 1.4 라 본문 값(테두리 2px)이면 작은 제목에서 칩이 줄보다 커진다. 제목 안에서는 테두리를 1px 로 줄여 1.4 안에 둔다(정수 유지). */
.md-guide :is(h1, h2, h3, h4, h5, h6) code {
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.md-guide code.md-code-blue { color: #3785ED; background: #F4F4F4; }
.md-guide code.md-code-purple { color: #9655F0; background: #F4EEFF; }
.md-guide code.md-code-green { color: #0FB97E; background: #D7FFEC; }
.md-guide code.md-code-orange { color: #F45F02; background: #FFEED2; }
.md-guide code.md-code-yellow { color: #676767; background: #FFFF7B; }
.md-guide code.md-code-gray { color: #5D5D5D; background: #EAEAEA; }

/* 배경 없이 글자만 물들이는 강조(예전 글). 일곱 색(cherry~gray)은 인라인 코드 칩과 같은 팔레트이고 이미 저장된 글이 쓰므로 값을 바꾸지 않는다.
   2026-10-06 부터 관리자 에디터가 새로 칠하는 글자색은 이 클래스가 아니라 <span style="color:#rrggbb"> 로 저장된다(툴바 글자색 목록 8종·예전 글의 임의 색).
   그 사이 잠깐 쓰던 red·teal·navy·pink·brown·black 클래스는 저장 형태가 hex 로 바뀌면서 규칙을 없앴다(에디터가 더는 만들지 않는다). */
.md-guide .md-text-cherry { color: #C7254E; }
.md-guide .md-text-blue { color: #3785ED; }
.md-guide .md-text-purple { color: #9655F0; }
.md-guide .md-text-green { color: #0FB97E; }
.md-guide .md-text-orange { color: #F45F02; }
.md-guide .md-text-yellow { color: #C79A00; }
.md-guide .md-text-gray { color: #5D5D5D; }
/* 글자색 안의 굵게. 위 .md-guide strong 이 색(#111)을 직접 적어 두어, 안 막으면 span 의 색이 굵은 글자에서 사라진다.
   링크(a)는 자기 색을 지킨다 — 링크 글자를 칠하려면 링크 '안쪽'에 span 이 와야 하고, 에디터가 그렇게 넣는다. */
.md-guide [class*="md-text-"] :is(strong, b) { color: inherit; }
/* style 로 칠한 글자색(<span style="color:#rrggbb">, 배경색과 함께면 <span style="color:#rrggbb;background-color:#rrggbb">)도 같다.
   안의 굵게가 #111 로 돌아가지 않고 span 색을 물려받는다. 링크 안에 칠한 span 은 칠한 색, span 안의 링크는 링크 색을 지키는 지금 동작은 그대로다.
   style 이 color: 로 시작하는 span 만 잡는다 - 속성 이름에 color: 가 들어 있는 background-color: 만의 형광펜 span 은 글자색이 없어 굵은 글자 색(#111)을 그대로 둔다. */
.md-guide span[style^="color:"] :is(strong, b) { color: inherit; }

/* 배경색(형광펜): <span style="background-color:#rrggbb">. 글 뒤에 깔리는 일반 하이라이트다(인라인 코드 칩이 아니다).
   좌우 여백은 없이 글자 박스 그대로, 위아래만 0.1em 씩 넓혀 시안의 줄 높이(16px 글에서 22px)만큼 칠해지게 한다 - 글꼴 높이 약 1.15~1.2em + 0.2em.
   모서리는 0 이다. 인라인 요소의 위아래 padding 은 줄 높이를 바꾸지 않고, 칠한 높이(약 1.35~1.4em)가 줄 높이(본문 1.6 / 공개 상세 1.5)를 넘지 않아 윗줄·아랫줄과 겹치지 않는다.
   span 안에 든 인라인 코드 칩은 자기 배경이 위에 놓여 칩 배경이 이긴다. */
.md-guide span[style*="background-color"] { padding: 0.1em 0; }
/* 제목 줄 높이는 1.4 라 굵은 글꼴 높이(약 1.21em)에 위아래 0.1em 씩을 더하면 줄 높이를 조금 넘어 윗줄·아랫줄과 겹친다. 제목 안에서는 0.08em 으로 줄여 1.4 안에 둔다(칩과 같은 이유). */
.md-guide :is(h1, h2, h3, h4, h5, h6) span[style*="background-color"] { padding-top: 0.08em; padding-bottom: 0.08em; }

/* 밑줄. 링크 밑줄은 망고색이라 색으로 구분된다.
   공개 화면 default.css 의 `i, em, u, cite{font-style:normal}` 은 밑줄에 영향이 없지만,
   u 를 직접 가리켜 두어 다른 리셋이 들어와도 밑줄이 살아남게 한다. */
.md-guide u {
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
/* 링크 안에서는 링크 밑줄과 겹쳐 두 줄이 그어진다. */
.md-guide a u { text-decoration: none; }

/*
 * 빈 여백.
 *
 * 마크다운은 빈 줄이 몇 개든 문단 구분 하나로 본다. 이미지 아래를 여러 줄 띄워도
 * 결과에 반영되지 않아, 여분 빈 줄 하나에 이 블록 하나가 오도록 에디터가 넣어 준다.
 * p 가 아니라 div 인 이유: 아래 카드 배치가 `> li > p:nth-of-type(n)` 로 조판해서
 * 빈 p 가 끼면 문단 번호가 밀려 배치가 깨진다.
 */
.md-guide .md-space {
	display: block;
	height: 1.6em;
}
/* 여백 표기 `{space:s}`·`{space:l}` 의 크기. 표기만 쓴 `{space}`(보통)는 위 빈 줄 여백과 같다(16px 글에서 12 / 25.6 / 48px). */
.md-guide .md-space--s { height: 0.75em; }
.md-guide .md-space--l { height: 3em; }
/* 카드 격자에서는 빈 칸이 되고 목록에서는 항목이 되어 배치를 깨뜨린다. */
.md-guide.guide-main > .md-space,
.md-guide li .md-space { display: none; }