미디어위키:Common.css

인테리어 위키
Abland (토론 | 기여)님의 2026년 1월 20일 (화) 09:06 판
둘러보기로 이동 검색으로 이동

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* 이 CSS 설정은 모든 스킨에 적용됩니다 */

/* ===============================
   Google Fonts: Inter
   =============================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* 본문 */
.mw-parser-output {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR',
               system-ui, sans-serif;
}

/* 문서 제목 + 섹션 제목 */
#firstHeading,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR',
               system-ui, sans-serif;
}



/* ===============================
   Heading 번호 매기기 (h2 ~ h5)
   1.
   1.1
   1.1.1
   1.1.1.1
   =============================== */

/* h2 기준 카운터 초기화 */
.mw-parser-output {
  counter-reset: h2;
}

/* ---------- h2 ---------- */
.mw-parser-output h2 {
  counter-reset: h3;
  font-size: 27px;
  font-weight: 500;
}

.mw-parser-output h2 .mw-headline::before {
  counter-increment: h2;
  content: counter(h2) ".";
  margin-right: 2px;
  font-size: 27px;
  font-weight: 500;
}

/* ---------- h3 ---------- */
.mw-parser-output h3 {
  counter-reset: h4;
  font-size: 22px;
  font-weight: 500;
}

.mw-parser-output h3 .mw-headline::before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3) " ";
  margin-right: 2px;
  font-size: 22px;
  font-weight: 500;
  
}

/* ---------- h4 ---------- */
.mw-parser-output h4 {
  counter-reset: h5; 
  font-size: 20px;
  font-weight: 500;
}

.mw-parser-output h4 .mw-headline::before {
  counter-increment: h4;
  content: counter(h2) "." counter(h3) "." counter(h4) " ";
  margin-right: 2px;
  font-size: 20px;
  font-weight: 500;
}

/* ---------- h5 ---------- */
.mw-parser-output h5 {
  font-size: 18px;
  font-weight: 500;
}

.mw-parser-output h5 .mw-headline::before {
  counter-increment: h5;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " ";
  margin-right: 2px;
  font-size: 18px;
  font-weight: 500;
}


/* ===============================
   Heading 하단 구분선 (h2 ~ h5 통일)
   =============================== */

.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  margin: 1.2em 0 0.8em;
}

/* ===============================
   Heading 제목 ↔ 편집 링크 양끝 정렬
   =============================== */

.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 제목 텍스트는 왼쪽 고정 */
.mw-parser-output .mw-headline {
  flex: 1 1 auto;
}

/* [편집 | 원본 편집]은 오른쪽 */
.mw-parser-output .mw-editsection {
  flex: 0 0 auto;
  font-size: 12px;
  white-space: nowrap;
}

/* 편집 링크가 없을 때(편집 모드 등) 제목이 벌어지지 않게 */
.mw-parser-output h2:not(:has(.mw-editsection)),
.mw-parser-output h3:not(:has(.mw-editsection)),
.mw-parser-output h4:not(:has(.mw-editsection)),
.mw-parser-output h5:not(:has(.mw-editsection)) {
  justify-content: flex-start;
}

/* ===============================
   TOC(목차)에도 제목 번호 표시
   Vector 2022(.vector-toc) + 구 TOC(#toc) 모두 지원
   =============================== */

/* ---- Vector 2022 TOC (간단 버전) ---- */
.vector-toc { counter-reset: toc1; }
.vector-toc .vector-toc-level-1 { counter-reset: toc2; }
.vector-toc .vector-toc-level-2 { counter-reset: toc3; }
.vector-toc .vector-toc-level-3 { counter-reset: toc4; } /* ✅ (h5용) */

/* 1단계 */
.vector-toc .vector-toc-level-1 > a .vector-toc-text::before {
  counter-increment: toc1;
  content: counter(toc1) ". ";
  margin-right: 2px;
}

/* 2단계 */
.vector-toc .vector-toc-level-2 > a .vector-toc-text::before {
  counter-increment: toc2;
  content: counter(toc1) "." counter(toc2) " ";
  margin-right: 2px;
}

/* 3단계 */
.vector-toc .vector-toc-level-3 > a .vector-toc-text::before {
  counter-increment: toc3;
  content: counter(toc1) "." counter(toc2) "." counter(toc3) " ";
  margin-right: 2px;
}

/* 4단계 ✅ (h5) */
.vector-toc .vector-toc-level-4 > a .vector-toc-text::before {
  counter-increment: toc4;
  content: counter(toc1) "." counter(toc2) "." counter(toc3) "." counter(toc4) " ";
  margin-right: 2px;
}

/* ---- 구형 TOC(#toc) ---- */
#toc,
.toc { counter-reset: toc1; }

#toc .toclevel-1,
.toc .toclevel-1 { counter-reset: toc2; }

#toc .toclevel-2,
.toc .toclevel-2 { counter-reset: toc3; }

#toc .toclevel-3,
.toc .toclevel-3 { counter-reset: toc4; } /* ✅ (h5용) */

/* 1단계 */
#toc .toclevel-1 > a .toctext::before,
.toc .toclevel-1 > a .toctext::before {
  counter-increment: toc1;
  content: counter(toc1) ". ";
  margin-right: 2px;
}

/* 2단계 */
#toc .toclevel-2 > a .toctext::before,
.toc .toclevel-2 > a .toctext::before {
  counter-increment: toc2;
  content: counter(toc1) "." counter(toc2) " ";
  margin-right: 2px;
}

/* 3단계 */
#toc .toclevel-3 > a .toctext::before,
.toc .toclevel-3 > a .toctext::before {
  counter-increment: toc3;
  content: counter(toc1) "." counter(toc2) "." counter(toc3) " ";
  margin-right: 2px;
}

/* 4단계 ✅ (h5) */
#toc .toclevel-4 > a .toctext::before,
.toc .toclevel-4 > a .toctext::before {
  counter-increment: toc4;
  content: counter(toc1) "." counter(toc2) "." counter(toc3) "." counter(toc4) " ";
  margin-right: 2px;
}

/* =========================================================
   Vector 2022 사이드 TOC 번호 (h2~h5와 동일)
   - 1 / 1.1 / 1.1.1 / 1.1.1.1 규칙
   - '처음 위치(Top)' 항목 제외
   - 중복 숫자(기본 tocnumber) 숨김
   ========================================================= */

/* 0) 혹시 구형 TOC 숫자가 같이 보이면(중복 방지) */
#toc .tocnumber,
.toc .tocnumber { display: none; }

/* 1) Vector 2022 TOC: Top(처음 위치) 항목은 숨김 */
.vector-toc a[href="#top"],
.vector-toc a[href="#mw-head"],
.vector-toc a[href^="#mw-head"],
.vector-toc a[rel="mw:PageProp/TOC"] {
  display: none !important;
}

/* 2) 카운터 초기화: TOC 전체에서 1단계(h2) 번호 */
.vector-toc { counter-reset: toc2; }

/* 3) TOC 레벨별 카운터 리셋 */
.vector-toc .vector-toc-level-1 { /* == (h2) */
  counter-reset: toc3;
}
.vector-toc .vector-toc-level-2 { /* === (h3) */
  counter-reset: toc4;
}
.vector-toc .vector-toc-level-3 { /* ==== (h4) */
  counter-reset: toc5; /* ✅ (h5용) */
}

/* 4) 레벨1: 1. (h2) */
.vector-toc .vector-toc-level-1 > a .vector-toc-text::before {
  counter-increment: toc2;
  content: counter(toc2) ". ";
  margin-right: 2px;
  font-weight: 600;
}

/* 5) 레벨2: 1.1 (h3) */
.vector-toc .vector-toc-level-2 > a .vector-toc-text::before {
  counter-increment: toc3;
  content: counter(toc2) "." counter(toc3) " ";
  margin-right: 2px;
  font-weight: 500;
}

/* 6) 레벨3: 1.1.1 (h4) */
.vector-toc .vector-toc-level-3 > a .vector-toc-text::before {
  counter-increment: toc4;
  content: counter(toc2) "." counter(toc3) "." counter(toc4) " ";
  margin-right: 2px;
  font-weight: 400;
}

/* 7) 레벨4 ✅: 1.1.1.1 (h5) */
.vector-toc .vector-toc-level-4 > a .vector-toc-text::before {
  counter-increment: toc5;
  content: counter(toc2) "." counter(toc3) "." counter(toc4) "." counter(toc5) " ";
  margin-right: 2px;
  font-weight: 400;
}

/* 최상위(=h2 레벨)에서 첫 항목(처음 위치)만 숨김 */
.vector-toc li.vector-toc-level-1:first-child {
  display: none !important;
}


/* ===============================
   [편집 | 원본편집] → [편집]
   =============================== */

/* '원본 편집' 링크 숨김 */
.mw-editsection a:last-of-type {
  display: none;
}

/* 구분자(|) 숨김 */
.mw-editsection .mw-editsection-divider {
  display: none;
}

/* 스크롤 시 나타나는 Sticky header의 제목(문서명) 폰트를 Inter로 고정 */
.vector-sticky-header-context-bar-primary,
.vector-sticky-header-context-bar-primary a,
.vector-sticky-header-context-bar-primary span {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR',
               system-ui, sans-serif !important;
}

/* ===============================
   레거시 Vector: TOC(좌) + 인포박스(우) 상단 레이아웃 정리
   =============================== */

/* TOC를 왼쪽으로 고정 */
body.skin-vector:not(.skin-vector-2022) #toc.toc {
  float: left;

  margin: 0 16px 12px 0;   /* 오른쪽 여백 + 아래 여백 */
}

/* 인포박스 테이블이 오른쪽에 고정되도록(템플릿 inline float:right 유지 중이어도 OK) */
body.skin-vector:not(.skin-vector-2022) .iw-matbox,
body.skin-vector:not(.skin-vector-2022) table.wikitable[style*="float:right"] {
  width: 360px;            /* 인포박스 폭 통일 */
  margin-bottom: 12px;     /* TOC와 아래 여백 통일 */
}

/* TOC/인포박스 아래에서 본문이 시작되도록 clear */
body.skin-vector:not(.skin-vector-2022) .iw-topclear {
  clear: both;
  height: 8px;             /* 상단 영역과 본문 사이 간격(원하면 0~12px 조절) */
}

span.toctogglespan{display: none}
h2#mw-toc-heading{margin: 4px 0px 8px 0px}

/* =========================
   h2/h3/h4/h5 기본 접기/펼치기
   - 아이콘/텍스트 표시 없음
   - 제목 클릭으로만 토글
   ========================= */

.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5 {
  cursor: pointer;
}

/* 접힌 상태 */
.mw-parser-output .mw-fold-collapsed + .mw-fold-content {
  display: none;
}

/* ===== 접기/펼치기 아이콘 추가 (PNG) ===== */
/* 파일: Icon caretright.png */
/* 기본: 펼침(아래) / 접힘: 오른쪽 */

.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5 {
  position: relative;
  padding-left: 26px; /* 아이콘 자리 */
}

.mw-parser-output .mw-fold-icon {
  position: absolute;
  left: 0;

  top: 50%;
  transform: translateY(-50%) rotate(90deg); /* 펼침 */

  width: 20px;
  height: 20px;

  background: no-repeat center / contain
    url("https://interior.wiki/images/thumb/e/e3/Icon_caretright.png/600px-Icon_caretright.png?20260120083456");

  transition: transform 150ms ease;
  transform-origin: 50% 50%;

  /* 기본 = 펼침 상태 → 아래쪽 */
  /*transform: rotate(90deg);*/
}

/* 접힘 상태 → 오른쪽 */
.mw-parser-output .mw-fold-collapsed .mw-fold-icon {
  transform: translateY(-50%) rotate(0deg);
}


/* 하단 분류 박스*/
div#catlinks.catlinks {
  margin-top: 80px; padding: 4px 8px; font-size: 14px; background: #fff; border-radius: 4px;
}
원본 주소 "https://interior.wiki/index.php?title=미디어위키:Common.css&oldid=450"