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

기술노트
편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
/* =========================================================
/* =========================================================
   MediaWiki:Common.css  (NamuWiki-like 스타일, 호환 버전)
   MediaWiki:Common.css  (NamuWiki-like 스타일, 맑은 고딕 전용)
  - CSS 변수(:root, --token) 미사용
   ========================================================= */
   ========================================================= */


/* 기본 폰트 & 가독성 */
/* 기본 폰트 & 가독성 */
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output {
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output {
   font-family:
   font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
    "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    sans-serif !important;
   font-size: 16px;
   font-size: 16px;
   line-height: 1.65;
   line-height: 1.65;
   color: #202122;
   color: #202122;
   letter-spacing: -0.2px;     /* 자간: 나무위키 느낌 */
   letter-spacing: -0.2px;       /* 자간: 나무위키 느낌 */
   word-break: keep-all;         /* 한글 줄바꿈 개선 */
   word-break: keep-all;
   -webkit-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -moz-osx-font-smoothing: grayscale;
21번째 줄: 17번째 줄:
/* 페이지 제목(H1) */
/* 페이지 제목(H1) */
#firstHeading, .mw-body h1.firstHeading {
#firstHeading, .mw-body h1.firstHeading {
   font-size: 1.875rem;         /* ≈ 30px */
   font-size: 1.875rem; /* ≈ 30px */
   font-weight: 700;
   font-weight: 700;
   color: #1f2328;
   color: #1f2328;
30번째 줄: 26번째 줄:
/* 섹션 제목(H2/H3) */
/* 섹션 제목(H2/H3) */
.mw-body h2 {
.mw-body h2 {
   font-size: 1.375rem;         /* ≈ 22~24px */
   font-size: 1.375rem;
   font-weight: 700;
   font-weight: 700;
   color: #1f2328;
   color: #1f2328;
41번째 줄: 37번째 줄:


.mw-body h3 {
.mw-body h3 {
   font-size: 1.125rem;         /* ≈ 18~20px */
   font-size: 1.125rem;
   font-weight: 700;
   font-weight: 700;
   color: #1f2328;
   color: #1f2328;
102번째 줄: 98번째 줄:
pre, code, kbd, samp, tt {
pre, code, kbd, samp, tt {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
                "Liberation Mono", "Noto Sans Mono", monospace !important;
              "Liberation Mono", monospace !important;
   font-size: .95em;
   font-size: .95em;
}
}
115번째 줄: 111번째 줄:
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1rem 0; }
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1rem 0; }


/* 캡션 살짝 그레이 */
/* 캡션 */
div.thumb .thumbcaption { color: #6b7280; font-size: .92rem; }
div.thumb .thumbcaption { color: #6b7280; font-size: .92rem; }


/* === Letter-spacing fix: 강제 적용 (TOC/리스트/링크/제목) === */
/* === Letter-spacing fix === */
/* 본문 전체: 코드/모노스페이스 제외하고 자간 적용 */
.mw-parser-output :not(pre):not(code):not(kbd):not(samp):not(tt) {
.mw-parser-output :not(pre):not(code):not(kbd):not(samp):not(tt) {
   letter-spacing: -0.25px !important;   /* 필요시 -0.20 ~ -0.30px로 조절 */
   letter-spacing: -0.25px !important;
}
}
/* H1/H2/H3 가끔 초기화되는 경우 보강 */
#firstHeading,
#firstHeading,
.mw-body h2, .mw-body h2 .mw-headline,
.mw-body h2, .mw-body h2 .mw-headline,
.mw-body h3 { letter-spacing: -0.25px !important; }
.mw-body h3 { letter-spacing: -0.25px !important; }
/* TOC(목차) 내부는 별도 강제 */
#toc, .toc,
#toc, .toc,
#toc *, .toc * { letter-spacing: -0.25px !important; }
#toc *, .toc * { letter-spacing: -0.25px !important; }
/* 리스트 항목/링크에도 확실히 적용 */
.mw-parser-output li,
.mw-parser-output li,
.mw-parser-output a,
.mw-parser-output a,
.mw-parser-output span { letter-spacing: -0.25px !important; }
.mw-parser-output span { letter-spacing: -0.25px !important; }
/* 코드·모노스페이스 블록은 원래 간격 유지 */
pre, code, kbd, samp, tt { letter-spacing: 0 !important; }
pre, code, kbd, samp, tt { letter-spacing: 0 !important; }


/* =========================================================
/* =========================================================
   추가 보완: 네비게이션 및 누락된 영역에 폰트 적용
   네비게이션·UI 영역 폰트도 맑은 고딕으로 고정
   ========================================================= */
   ========================================================= */
/* 네비게이션 메뉴 (좌측 사이드바, 상단 메뉴) */
.vector-menu,
.vector-menu,
.vector-menu-content,
.vector-menu-content,
153번째 줄: 138번째 줄:
#p-logo,
#p-logo,
#left-navigation,
#left-navigation,
#right-navigation {
#right-navigation,
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
input, textarea, select, button,
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}
 
/* 입력 필드 및 버튼 */
input,
textarea,
select,
button,
.oo-ui-inputWidget input,
.oo-ui-inputWidget input,
.oo-ui-buttonElement-button {
.oo-ui-buttonElement-button,
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}
 
/* 검색창 */
#searchInput,
#searchInput,
.vector-search-box-input,
.vector-search-box-input,
.oo-ui-textInputWidget {
.oo-ui-textInputWidget,
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
}
 
/* 탭 메뉴 (편집, 토론, 역사 등) */
.vector-menu-tabs,
.vector-menu-tabs,
.vector-menu-tabs li,
.vector-menu-tabs li,
.vector-menu-tabs a {
.vector-menu-tabs a,
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}
 
/* 드롭다운 메뉴 */
.vector-menu-dropdown,
.vector-menu-dropdown,
.vector-menu-dropdown-content {
.vector-menu-dropdown-content,
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
#footer, #footer *,
                  Helvetica, Arial, sans-serif !important;
}
 
/* 푸터 */
#footer,
#footer * {
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}
 
/* 알림/메시지 박스 */
.mw-notification,
.mw-notification,
.warningbox,
.warningbox,
.errorbox,
.errorbox,
.successbox {
.successbox {
     font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
     font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}
}

2025년 9월 11일 (목) 13:46 판

/* =========================================================
   MediaWiki:Common.css  (NamuWiki-like 스타일, 맑은 고딕 전용)
   ========================================================= */

/* 기본 폰트 & 가독성 */
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output {
  font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  color: #202122;
  letter-spacing: -0.2px;        /* 자간: 나무위키 느낌 */
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 페이지 제목(H1) */
#firstHeading, .mw-body h1.firstHeading {
  font-size: 1.875rem;  /* ≈ 30px */
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  margin: 0 0 .6rem 0;
}

/* 섹션 제목(H2/H3) */
.mw-body h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: .35rem;
  margin-top: 1.4rem;
}
.mw-body h2 .mw-headline { font-weight: 700; }

.mw-body h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  margin-top: 1.1rem;
}

/* 본문 여백 */
.mw-body-content p { margin: .6rem 0 .7rem; }
b, strong { font-weight: 700; letter-spacing: -0.1px; }
i, em { font-style: italic; }

/* 리스트 간격 */
.mw-body ul, .mw-body ol { margin: .4rem 0 .7rem 1.3rem; }

/* 링크 색상 */
.mw-body a {
  color: #1a73e8;
  text-decoration: none;
}
.mw-body a:hover, .mw-body a:focus { text-decoration: underline; }

/* [편집] 링크 톤다운 */
.mw-editsection, .mw-editsection a {
  color: #6b7280;
  font-size: .875rem;
}

/* 목차(TOC) */
#toc, .toc {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .6rem .75rem;
  font-size: .95rem;
  line-height: 1.6;
}
#toc .toctitle { font-weight: 700; letter-spacing: -0.1px; }
#toc ul { margin-left: 1rem; }

/* 표(wikitable) */
.mw-body .wikitable {
  border: 1px solid #e5e7eb;
  border-collapse: collapse;
  font-size: .95rem;
  background: #fff;
}
.mw-body .wikitable th {
  background: #f3f4f6;
  font-weight: 700;
}
.mw-body .wikitable th,
.mw-body .wikitable td {
  border: 1px solid #e5e7eb;
  padding: .45rem .6rem;
}
.mw-body .wikitable tr:nth-child(even) { background: #fafafa; }

/* 코드 블록 */
pre, code, kbd, samp, tt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace !important;
  font-size: .95em;
}
pre {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .7rem;
}

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

/* 캡션 */
div.thumb .thumbcaption { color: #6b7280; font-size: .92rem; }

/* === Letter-spacing fix === */
.mw-parser-output :not(pre):not(code):not(kbd):not(samp):not(tt) {
  letter-spacing: -0.25px !important;
}
#firstHeading,
.mw-body h2, .mw-body h2 .mw-headline,
.mw-body h3 { letter-spacing: -0.25px !important; }
#toc, .toc,
#toc *, .toc * { letter-spacing: -0.25px !important; }
.mw-parser-output li,
.mw-parser-output a,
.mw-parser-output span { letter-spacing: -0.25px !important; }
pre, code, kbd, samp, tt { letter-spacing: 0 !important; }

/* =========================================================
   네비게이션·UI 영역 폰트도 맑은 고딕으로 고정
   ========================================================= */
.vector-menu,
.vector-menu-content,
#mw-navigation,
.mw-portlet,
.mw-portlet-body,
#p-logo,
#left-navigation,
#right-navigation,
input, textarea, select, button,
.oo-ui-inputWidget input,
.oo-ui-buttonElement-button,
#searchInput,
.vector-search-box-input,
.oo-ui-textInputWidget,
.vector-menu-tabs,
.vector-menu-tabs li,
.vector-menu-tabs a,
.vector-menu-dropdown,
.vector-menu-dropdown-content,
#footer, #footer *,
.mw-notification,
.warningbox,
.errorbox,
.successbox {
    font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
    letter-spacing: -0.2px !important;
}