미디어위키:Common.css

/* =========================================================
   MediaWiki:Common.css — 나무위키 스타일: 사이트 제목 / 대문 / 본문
   - 모든 영역을 맑은 고딕으로 통일
   ========================================================= */

/* 기본 폰트 전체 통일 */
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output,
#firstHeading, .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.mw-body .mw-headline,
#toc, #toc * {
  font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
  color: #202122;
  letter-spacing: -0.2px !important;
}

/* 사이트 제목 / 로고 — 굵고 돋보이게 */
#p-logo, .logo, /* 또는 스킨에 따라 사이트 제목이 있는 선택자 */
#site-title, .site-name {
  font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
  font-size: 2rem;        /* 약 32px */
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
}

/* 대문 페이지 특별 스타일 */
body.page-Daemun, /* “대문” 페이지가 이런 식의 클래스명이라면 */ 
#content .daemun-title {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 2.5rem;       /* 대문은 제목 크게 */
  font-weight: 800;
  color: #1c1c1c;
  letter-spacing: -0.1px;
}

/* 본문 텍스트 스타일 */
.mw-body-content p {
  margin: 0.8rem 0 1rem 0;
  line-height: 1.6;
  font-size: 1rem;         /* 기본 본문 크기 */
  color: #202122;
}

/* 본문 제목 (섹션 제목) 스타일 조정 */
.mw-body h2 {
  font-size: 1.5rem;        /* 약 24px */
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.mw-body h3 {
  font-size: 1.25rem;       /* 약 20px */
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* 목차 스타일 (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;
}

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

/* 표 스타일 */
.mw-body .wikitable {
  border: 1px solid #e5e7eb;
  border-collapse: collapse;
  background: #fff;
  font-size: .95rem;
}
.mw-body .wikitable th {
  background: #f3f4f6;
  font-weight: 700;
}
.mw-body .wikitable th,
.mw-body .wikitable td {
  border: 1px solid #e5e7eb;
  padding: .45rem .6rem;
}

/* 코드 블록 */
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;
}

/* 기타 UI 요소 (검색창, 사이드바, 버튼 등)도 통일 */
input, textarea, select, button,
.vector-menu, .mw-portlet, .mw-portlet-body,
.vector-menu-tabs, .vector-menu-dropdown,
#searchInput, .vector-search-box-input {
  font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
}

/* =========================================================
   헤드라인/강조 텍스트까지 맑은 고딕 강제 적용
   ========================================================= */

/* 모든 섹션 제목(H2~H6) */
.mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.mw-body h2 .mw-headline, .mw-body h3 .mw-headline,
.mw-body h4 .mw-headline, .mw-body h5 .mw-headline, .mw-body h6 .mw-headline {
    font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
}

/* 본문 강조 텍스트 */
b, strong {
    font-family: "Malgun Gothic","맑은 고딕", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.15px !important;
}


/* 자간 후보 조정 */
.mw-parser-output :not(pre):not(code):not(kbd):not(samp):not(tt) {
  letter-spacing: 0px !important;
}
pre, code, kbd, samp, tt {
  letter-spacing: 0.1 !important;
}

/* 카드 그리드 기본 (PC에서 3개 가로) */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 calc(33.333% - 16px);
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
}

/* 카드 내부 텍스트 */
.card-title {
  font-size: 1.2em;
  font-weight: 800;
  margin-bottom: 6px;
}

.card-desc {
  font-size: 0.95em;
  color: #586069;
  margin-bottom: 8px;
  min-height: 3em;
}

.card-link {
  font-size: 1em;
  font-weight: 600;
  margin-top: 4px;
}

/* 모바일 (좁은 화면일 때 세로 1열) */
@media screen and (max-width: 768px) {
  .card {
    flex: 1 1 100%;
  }
}

/* 스마트폰 세로 모드 (가로폭 768px 이하 + portrait) */
@media screen and (max-width: 768px) and (orientation: portrait) {
  .mw-parser-output,
  .mw-body-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* 스마트폰 가로 모드 (가로폭 768px 이하 + landscape) */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .mw-parser-output,
  .mw-body-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}