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

2026년 1월 13일 (화) 08:56 판

/* 이 CSS 설정은 모든 스킨에 적용됩니다 */

/* 1) TOC를 왼쪽 사이드처럼 보이게 */
body.skin-vector-2022 #toc,
body.skin-vector-2022 .toc {
  float: left;
  width: 220px;
  margin: 0 16px 16px 0;
  padding: 10px;
  border: 0;
  background: transparent;
  font-size: inherit;
}

/* TOC 제목(목차) 스타일 최소화 */
body.skin-vector-2022 #toc .toctitle,
body.skin-vector-2022 .toc .toctitle {
  text-align: left;
  margin: 0 0 6px 0;
}

/* 2) 인포박스 클래스: 오른쪽 고정 + 무장식 */
body.skin-vector-2022 table.infobox-namu {
  float: right;
  width: 320px;
  margin: 0 0 16px 16px;
  border: 0;
  background: transparent;
  font-size: inherit;
  line-height: 1.6;
}

body.skin-vector-2022 table.infobox-namu th,
body.skin-vector-2022 table.infobox-namu td {
  border: 0;
  background: transparent;
  padding: 2px 0;
  vertical-align: top;
}

body.skin-vector-2022 table.infobox-namu th {
  font-weight: 700;
  text-align: left;
  padding-right: 10px;
  white-space: nowrap;
}

/* 인포박스 제목 줄 */
body.skin-vector-2022 table.infobox-namu .infobox-title {
  text-align: center;
  font-weight: 800;
  padding: 4px 0 10px 0;
}

/* 3) mw-collapsible(접기) 스타일: 테두리/배경 제거 */
body.skin-vector-2022 table.mw-collapsible,
body.skin-vector-2022 table.mw-collapsible th,
body.skin-vector-2022 table.mw-collapsible td {
  border: 0 !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) 접기 토글을 제목 왼쪽으로 */
body.skin-vector-2022 table.mw-collapsible span.mw-collapsible-toggle {
  float: left;
  margin: 0 8px 0 0;
  font-size: inherit;
  line-height: inherit;
}

body.skin-vector-2022 table.mw-collapsible span.mw-collapsible-toggle a {
  text-decoration: none;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

/* 5) 모바일에서는 TOC/인포박스 float 해제(깨짐 방지) */
@media (max-width: 720px) {
  body.skin-vector-2022 #toc,
  body.skin-vector-2022 .toc {
    float: none;
    width: auto;
    margin: 0 0 12px 0;
    padding: 0;
  }

  body.skin-vector-2022 table.infobox-namu {
    float: none;
    width: 100%;
    margin: 0 0 12px 0;
  }
}

/* =========================================================
   - Typography / spacing
   - Links
   - Headings
   - TOC left box
   - Infobox right
   - Collapsible look
   ========================================================= */

body.skin-vector-2022 .mw-body-content {
  font-size: 15px;
  line-height: 1.75;
}

/* 문단/목록 간격 */
body.skin-vector-2022 .mw-parser-output p { margin: 0.65em 0; }
body.skin-vector-2022 .mw-parser-output ul,
body.skin-vector-2022 .mw-parser-output ol { margin: 0.6em 0 0.9em 1.2em; }
body.skin-vector-2022 .mw-parser-output li { margin: 0.15em 0; }

/* 제목 간격/굵기 */
body.skin-vector-2022 .mw-parser-output h1,
body.skin-vector-2022 .mw-parser-output h2,
body.skin-vector-2022 .mw-parser-output h3,
body.skin-vector-2022 .mw-parser-output h4 {
  font-weight: 700;
  border-bottom: none;
}

body.skin-vector-2022 .mw-parser-output h1 { font-size: 1.6em; margin: 1.0em 0 0.55em; }
body.skin-vector-2022 .mw-parser-output h2 { font-size: 1.35em; margin: 1.1em 0 0.55em; }
body.skin-vector-2022 .mw-parser-output h3 { font-size: 1.15em; margin: 0.95em 0 0.5em; }
body.skin-vector-2022 .mw-parser-output h4 { font-size: 1.05em; margin: 0.85em 0 0.45em; }

/* 링크 색/hover */
body.skin-vector-2022 .mw-parser-output a {
  text-decoration: none;
}
body.skin-vector-2022 .mw-parser-output a:hover {
  text-decoration: underline;
}

/* =========================================================
   TOC (목차) - 왼쪽 박스형
   ========================================================= */
body.skin-vector-2022 #toc,
body.skin-vector-2022 .toc {
  float: left;
  width: 230px;
  margin: 0 16px 16px 0;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  background: rgba(0,0,0,0.02);
  font-size: 0.95em;
}

body.skin-vector-2022 #toc .toctitle,
body.skin-vector-2022 .toc .toctitle {
  text-align: left;
  margin: 0 0 8px 0;
}
body.skin-vector-2022 #toc .toctitle h2,
body.skin-vector-2022 .toc .toctitle h2 {
  font-size: 1.0em;
  font-weight: 800;
  margin: 0;
}

/* 목차 번호/들여쓰기 정리 */
body.skin-vector-2022 #toc ul,
body.skin-vector-2022 .toc ul {
  margin: 0;
  padding-left: 1.1em;
}
body.skin-vector-2022 #toc li,
body.skin-vector-2022 .toc li { margin: 0.15em 0; }

/* =========================================================
   Infobox (오른쪽)
   문서에서 class="infobox-namu" 사용
   ========================================================= */
body.skin-vector-2022 table.infobox-namu {
  float: right;
  width: 330px;
  margin: 0 0 16px 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.01);
  border-collapse: separate;
  overflow: hidden;
  font-size: 0.95em;
  line-height: 1.55;
}

body.skin-vector-2022 table.infobox-namu th,
body.skin-vector-2022 table.infobox-namu td {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  vertical-align: top;
}

body.skin-vector-2022 table.infobox-namu th {
  width: 92px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.9;
}

body.skin-vector-2022 table.infobox-namu .infobox-title {
  text-align: center;
  font-weight: 900;
  font-size: 1.05em;
  padding: 10px 10px 6px;
  background: rgba(0,0,0,0.03);
}

body.skin-vector-2022 table.infobox-namu .infobox-image {
  text-align: center;
  padding: 6px 10px 10px;
}

/* =========================================================
   Collapsible (mw-collapsible)
   ========================================================= */

/* 표 특유 배경/테두리 제거(접기 전용 표) */
body.skin-vector-2022 table.mw-collapsible,
body.skin-vector-2022 table.mw-collapsible th,
body.skin-vector-2022 table.mw-collapsible td {
  border: 0 !important;
  background: transparent !important;
}

/* 토글을 제목 왼쪽으로 */
body.skin-vector-2022 table.mw-collapsible span.mw-collapsible-toggle {
  float: left;
  margin: 0 8px 0 0;
  font-size: inherit;
  line-height: inherit;
}

body.skin-vector-2022 table.mw-collapsible span.mw-collapsible-toggle a {
  text-decoration: none;
  font-weight: 800;
  color: inherit;
}

/* 접기 헤더(!)를 ‘본문 제목 줄’처럼 보이게 */
body.skin-vector-2022 table.mw-collapsible > tbody > tr:first-child > th {
  text-align: left;
  font-weight: 700;
  padding: 0;           /* 장식 최소화 */
}

/* 접기 내용(td) 여백 */
body.skin-vector-2022 table.mw-collapsible > tbody > tr:nth-child(2) > td {
  padding: 6px 0 10px 0;
}

/* =========================================================
   Quotes / Code blocks - 과한 스타일 제거
   ========================================================= */
body.skin-vector-2022 blockquote {
  margin: 0.8em 0;
  padding: 0.6em 0.9em;
  border-left: 4px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
}

body.skin-vector-2022 pre,
body.skin-vector-2022 code {
  font-size: 0.95em;
}

/* =========================================================
   Mobile safety: float 해제
   ========================================================= */
@media (max-width: 720px) {
  body.skin-vector-2022 #toc,
  body.skin-vector-2022 .toc {
    float: none;
    width: auto;
    margin: 0 0 12px 0;
  }

  body.skin-vector-2022 table.infobox-namu {
    float: none;
    width: 100%;
    margin: 0 0 12px 0;
  }
}