/* ==========================================================================
   AI맵위키 사용자 스타일
   --------------------------------------------------------------------------
   Timeless 스킨 기본값의 두 가지 문제를 고친다.

     1. 본문이 약 14px 이라 한글 문서에서 작다. (나무위키·위키백과는 16px 대)
     2. 제목에 명조(serif)를 쓴다. 한글 화면에서는 고딕이 훨씬 잘 읽힌다.

   웹폰트는 쓰지 않는다. 외부 CDN 의존이 생기고 첫 화면이 늦어진다.
   운영체제에 기본으로 깔린 고딕을 순서대로 지정하는 편이 빠르고 안전하다.

   설치: www/custom/site.css 로 업로드.
        LocalSettings.php 의 BeforePageDisplay 훅이 이 파일을 불러온다.
        내용을 고치면 훅의 ?v= 숫자를 올려야 브라우저 캐시가 갱신된다.
   ========================================================================== */

/* --- 글꼴: 명조 -> 고딕 ------------------------------------------------- */

:root {
	--aimap-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR",
	              "Malgun Gothic", "맑은 고딕", "Segoe UI", Roboto,
	              "Helvetica Neue", Arial, sans-serif;
}

body,
.mw-body,
.mw-body-content,
#mw-content-text,
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6,
#firstHeading,
.mw-page-title-main,
#p-logo-text,
#mw-sitetitle,
.sidebar-chunk h3,
#personal h2,
#mw-related-navigation h3 {
	font-family: var(--aimap-sans) !important;
}

/* --- 본문 크기와 줄 간격 ------------------------------------------------- */

.mw-body-content {
	font-size: 1.22em;      /* 약 14px -> 17px */
	line-height: 1.8;       /* 한글은 줄 간격이 넉넉해야 읽힌다 */
	letter-spacing: -0.005em;
}

.mw-body-content p {
	margin: 0.95em 0;
}

.mw-body-content ul,
.mw-body-content ol {
	margin: 0.95em 0 0.95em 1.6em;
	line-height: 1.8;
}

.mw-body-content li {
	margin-bottom: 0.4em;
}

/* --- 문서 제목 ---------------------------------------------------------- */

#firstHeading {
	font-size: 2.3em;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* --- 제목 계층 ---------------------------------------------------------- */

.mw-body-content h2 {
	margin-top: 2.1em;
	margin-bottom: 0.75em;
	padding-bottom: 0.3em;
	font-size: 1.8em;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.35;
	border-bottom: 2px solid #cbd5e1;
}

.mw-body-content h3 {
	margin-top: 1.7em;
	margin-bottom: 0.55em;
	padding-left: 0.55em;
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.45;
	border-left: 5px solid #3b82f6;
}

.mw-body-content h4 {
	margin-top: 1.3em;
	font-size: 1.12em;
	font-weight: 700;
}

/* --- 표 ---------------------------------------------------------------- */

.mw-body-content .wikitable {
	font-size: 0.95em;
	line-height: 1.65;
	border-collapse: collapse;
}

.mw-body-content .wikitable > * > tr > th,
.mw-body-content .wikitable > * > tr > td {
	padding: 0.6em 0.85em;
	vertical-align: top;
}

.mw-body-content .wikitable > * > tr > th {
	background: #f1f5f9;
}

/* 줄무늬를 넣으면 행이 많은 표에서 눈이 덜 미끄러진다 */
.mw-body-content .wikitable > tbody > tr:nth-child(even) > td {
	background: #fafbfc;
}

/* --- 안내 상자 안쪽 여백 정리 -------------------------------------------- */
/* 틀이 만든 div 안에서 미디어위키가 <p> 를 넣는다. 기본 마진을 그대로 두면
   상자가 필요 이상으로 높아진다. */

.mw-body-content div[style*="border-left:5px solid"] p {
	margin: 0.4em 0;
}

.mw-body-content div[style*="border-left:5px solid"] p:first-of-type {
	margin-top: 0;
}

.mw-body-content div[style*="border-left:5px solid"] p:last-of-type {
	margin-bottom: 0;
}

/* --- 코드 -------------------------------------------------------------- */

.mw-body-content code {
	font-size: 0.9em;
	padding: 0.12em 0.35em;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 3px;
}

.mw-body-content pre {
	font-size: 0.88em;
	line-height: 1.65;
	padding: 1em 1.2em;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	overflow-x: auto;
}

/* --- 목차 -------------------------------------------------------------- */

.mw-body-content .toc,
.mw-body-content #toc {
	font-size: 0.95em;
	line-height: 1.75;
	padding: 1em 1.3em;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
}

/* --- 링크 -------------------------------------------------------------- */

.mw-body-content a {
	color: #2563eb;
}

.mw-body-content a.new {
	color: #d33;
}

/* --- 정보상자 ---------------------------------------------------------- */
/* 본문 글자를 키웠으므로 정보상자는 상대적으로 줄여 균형을 맞춘다 */

.mw-body-content table[style*="float:right"] {
	font-size: 0.82em;
}

/* 좁은 화면에서는 정보상자를 본문 위로 내린다 */
@media screen and (max-width: 720px) {
	.mw-body-content table[style*="float:right"] {
		float: none !important;
		width: 100% !important;
		margin: 0 0 1.2em 0 !important;
	}

	.mw-body-content { font-size: 1.15em; }
	.mw-body-content h2 { font-size: 1.6em; }
	.mw-body-content h3 { font-size: 1.25em; }
}