본문으로 이동

미디어위키:Common.css: 두 판 사이의 차이

kosha Wiki
Pretendard 적용 및 타이포그래피 조정
 
대문 구성요소 스타일 추가
1번째 줄: 1번째 줄:
/* ────────────────────────────────────────────────────────────────
/* ────────────────────────────────────────────────────────────────
   전역 스타일. 폰트는 /custom/fonts/ 에서 자체 호스팅한다(폐쇄망 대비).
   전역 스타일. 폰트는 /custom/fonts/ 에서 자체 호스팅한다(폐쇄망 대비).
  되돌리려면 이 문서를 비우면 된다.
   ──────────────────────────────────────────────────────────────── */
   ──────────────────────────────────────────────────────────────── */


12번째 줄: 11번째 줄:
}
}


body,
body, .mw-body, .mw-parser-output {
.mw-body,
.mw-parser-output {
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
system-ui, 'Malgun Gothic', sans-serif;
system-ui, 'Malgun Gothic', sans-serif;
}
}


/* 문단 제목 — 아래 구분선을 둬서 문서 구조가 눈에 들어오게 */
.mw-parser-output h2 {
.mw-parser-output h2 {
font-size: 1.65em;
font-size: 1.65em; font-weight: 700;
font-weight: 700;
padding-bottom: 0.25em;
padding-bottom: 0.25em;
border-bottom: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.12));
border-bottom: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
margin-top: 1.6em;
margin-top: 1.6em;
}
}
.mw-parser-output h3 { font-size: 1.3em; font-weight: 600; margin-top: 1.3em; }
.mw-parser-output { line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; }
.mw-parser-output p { margin: 0.7em 0; }
.mw-parser-output .wikitable { border-collapse: collapse; font-size: 0.95em; }
.mw-parser-output .wikitable > * > tr > th,
.mw-parser-output .wikitable > * > tr > td { padding: 0.45em 0.7em; }
.mw-parser-output .reference { font-size: 0.82em; }
/* ────────────────────────────────────────────────────────────────
  대문 구성요소
  ──────────────────────────────────────────────────────────────── */


.mw-parser-output h3 {
.kw-hero {
font-size: 1.3em;
text-align: center;
font-weight: 600;
padding: 2.2em 1em 1.8em;
margin-top: 1.3em;
margin-bottom: 1.4em;
border-radius: 12px;
background: linear-gradient(135deg, rgba(0,110,160,0.22), rgba(120,190,60,0.16));
border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
}
}
.kw-hero-sub { font-size: 0.95em; opacity: 0.75; margin-bottom: 0.3em; }
.kw-hero-title { font-size: 1.9em; font-weight: 800; line-height: 1.3; }
.kw-hero-desc { font-size: 0.95em; opacity: 0.8; margin-top: 0.6em; }


/* 본문 가독성 */
.kw-notice {
.mw-parser-output {
border-left: 4px solid #d98a00;
line-height: 1.75;
background: rgba(217,138,0,0.10);
word-break: keep-all;     /* 한글 단어 중간에서 줄바꿈되지 않게 */
padding: 0.8em 1em;
overflow-wrap: break-word;
border-radius: 0 8px 8px 0;
margin: 1.2em 0;
font-size: 0.94em;
}
}


.mw-parser-output p {
.kw-cards {
margin: 0.7em 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.9em;
margin: 1.2em 0;
}
.kw-card {
border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
border-radius: 10px;
padding: 1em 1.1em;
background: rgba(127,127,127,0.06);
}
}
.kw-card-title { font-weight: 700; margin-bottom: 0.35em; font-size: 1.02em; }
.kw-card-body { font-size: 0.9em; opacity: 0.85; line-height: 1.6; }


/* */
/* 둘러보기 틀 — 나무위키의 행 레이블 + 링크 나열 형태 */
.mw-parser-output .wikitable {
.kw-navbox {
border-collapse: collapse;
border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
font-size: 0.95em;
border-radius: 10px;
margin: 1.2em 0;
overflow: hidden;
}
.kw-navbox-head {
background: rgba(127,127,127,0.14);
padding: 0.6em 1em;
font-weight: 700;
}
}
 
.kw-navbox-row { display: flex; border-top: 1px solid var(--border-color-base, rgba(255,255,255,0.10)); }
.mw-parser-output .wikitable > * > tr > th,
.kw-navbox-label {
.mw-parser-output .wikitable > * > tr > td {
flex: 0 0 8.5em;
padding: 0.45em 0.7em;
padding: 0.55em 0.9em;
font-weight: 600;
font-size: 0.9em;
background: rgba(127,127,127,0.07);
}
}
.kw-navbox-links { padding: 0.55em 0.9em; font-size: 0.92em; line-height: 1.8; }


/* 각주 번호를 조금 작게 */
@media (max-width: 640px) {
.mw-parser-output .reference {
.kw-navbox-row { flex-direction: column; }
font-size: 0.82em;
.kw-navbox-label { flex: none; }
.kw-hero-title { font-size: 1.45em; }
}
}

2026년 8월 10일 (월) 18:11 판

/* ────────────────────────────────────────────────────────────────
   전역 스타일. 폰트는 /custom/fonts/ 에서 자체 호스팅한다(폐쇄망 대비).
   ──────────────────────────────────────────────────────────────── */

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('/custom/fonts/PretendardVariable.woff2') format('woff2-variations');
}

body, .mw-body, .mw-parser-output {
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, 'Malgun Gothic', sans-serif;
}

.mw-parser-output h2 {
	font-size: 1.65em; font-weight: 700;
	padding-bottom: 0.25em;
	border-bottom: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
	margin-top: 1.6em;
}
.mw-parser-output h3 { font-size: 1.3em; font-weight: 600; margin-top: 1.3em; }

.mw-parser-output { line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; }
.mw-parser-output p { margin: 0.7em 0; }
.mw-parser-output .wikitable { border-collapse: collapse; font-size: 0.95em; }
.mw-parser-output .wikitable > * > tr > th,
.mw-parser-output .wikitable > * > tr > td { padding: 0.45em 0.7em; }
.mw-parser-output .reference { font-size: 0.82em; }

/* ────────────────────────────────────────────────────────────────
   대문 구성요소
   ──────────────────────────────────────────────────────────────── */

.kw-hero {
	text-align: center;
	padding: 2.2em 1em 1.8em;
	margin-bottom: 1.4em;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(0,110,160,0.22), rgba(120,190,60,0.16));
	border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
}
.kw-hero-sub { font-size: 0.95em; opacity: 0.75; margin-bottom: 0.3em; }
.kw-hero-title { font-size: 1.9em; font-weight: 800; line-height: 1.3; }
.kw-hero-desc { font-size: 0.95em; opacity: 0.8; margin-top: 0.6em; }

.kw-notice {
	border-left: 4px solid #d98a00;
	background: rgba(217,138,0,0.10);
	padding: 0.8em 1em;
	border-radius: 0 8px 8px 0;
	margin: 1.2em 0;
	font-size: 0.94em;
}

.kw-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0.9em;
	margin: 1.2em 0;
}
.kw-card {
	border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
	border-radius: 10px;
	padding: 1em 1.1em;
	background: rgba(127,127,127,0.06);
}
.kw-card-title { font-weight: 700; margin-bottom: 0.35em; font-size: 1.02em; }
.kw-card-body { font-size: 0.9em; opacity: 0.85; line-height: 1.6; }

/* 둘러보기 틀 — 나무위키의 행 레이블 + 링크 나열 형태 */
.kw-navbox {
	border: 1px solid var(--border-color-base, rgba(255,255,255,0.12));
	border-radius: 10px;
	margin: 1.2em 0;
	overflow: hidden;
}
.kw-navbox-head {
	background: rgba(127,127,127,0.14);
	padding: 0.6em 1em;
	font-weight: 700;
}
.kw-navbox-row { display: flex; border-top: 1px solid var(--border-color-base, rgba(255,255,255,0.10)); }
.kw-navbox-label {
	flex: 0 0 8.5em;
	padding: 0.55em 0.9em;
	font-weight: 600;
	font-size: 0.9em;
	background: rgba(127,127,127,0.07);
}
.kw-navbox-links { padding: 0.55em 0.9em; font-size: 0.92em; line-height: 1.8; }

@media (max-width: 640px) {
	.kw-navbox-row { flex-direction: column; }
	.kw-navbox-label { flex: none; }
	.kw-hero-title { font-size: 1.45em; }
}