Mobile.css: 두 판 사이의 차이

2025년 7월 25일 (금) 06:49 기준 최신판

@media screen and (max-width: 768px) {

  /* 📌 목차 스타일 정리 */
  #toc, .toc {
    float: none !important;
    clear: both !important;
    display: block !important;
    position: relative !important; /* z-index가 작동하도록 설정 */
    width: 100% !important;
    margin: 1.5em 0 !important;
    padding: 12px !important;
    background: #f9f9f9 !important;
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
    z-index: 9999 !important; /* 목차가 다른 모든 요소 위에 확실히 오도록 매우 높은 값 설정 */
  }

  /* 📌 목차 다음 요소 강제 clear 처리 및 스태킹 컨텍스트 설정 */
  /* 목차 바로 다음에 오는 모든 요소들이 목차 아래에 위치하도록 강제합니다. */
  .mw-parser-output > #toc + *,
  .mw-parser-output > .toc + * {
    margin-top: 1em !important;
    clear: both !important; /* 이전 float 요소를 확실히 정리 */
    display: block !important;
    position: relative !important; /* z-index를 위해 필요 */
    z-index: 1 !important; /* 목차보다 낮은 z-index (목차는 9999) */
  }

  /* 📌 infobox, 썸네일, 네비게이션 박스 등 콘텐츠 float 제거 및 블록화 */
  /* 모바일에서 레이아웃 겹침을 유발할 수 있는 모든 float 요소를 제거하고 블록 요소로 만듭니다. */
  .infobox, table.infobox,
  .thumb, .navbox, .wikitable, table,
  .floatleft, .floatright, /* floatleft, floatright 클래스도 추가하여 겹침 방지 */
  .mw-halign-left, .mw-halign-right /* 미디어위키에서 사용될 수 있는 정렬 클래스 */
  {
    float: none !important;
    clear: both !important; /* 모든 float를 확실히 정리 */
    display: block !important;
    width: 100% !important; /* 너비를 100%로 설정하여 가로 스크롤 방지 */
    margin: 1.5em 0 !important; /* 상하 여백 확보 */
    box-sizing: border-box !important;
  }

  /* 📌 전체 본문 padding 및 스태킹 컨텍스트 설정 */
  /* 본문 영역 전체의 패딩을 설정하고, z-index를 위한 스태킹 컨텍스트를 제공합니다. */
  .mw-parser-output {
    padding: 0 10px !important;
    position: relative !important; /* 자식 요소의 z-index 기준이 됨 */
    z-index: 1 !important; /* 다른 콘텐츠보다 낮게 설정 (목차는 9999) */
  }

  /* 📌 사이드바, 패널, 언어 링크 제거 */
  /* 모바일에서 불필요한 사이드바, 패널, 언어 링크를 숨깁니다. */
  #mw-panel, #site-navigation, .sidebar, #p-lang, /* 언어 링크 패널도 추가 */
  #mw-head-base, #mw-navigation { /* 상단 헤더 및 내비게이션 일부도 필요시 숨김 */
    display: none !important;
  }

  /* 📌 기본 폰트 크기 조정 */
  body {
    font-size: 14px !important;
  }

  /* 📌 목록 들여쓰기 조정 */
  ul, ol {
    padding-left: 1.2em !important;
  }

  /* 📌 목록 항목 줄 높이 및 단어 줄바꿈 */
  li {
    line-height: 1.6em !important;
    word-break: break-word; /* 긴 단어가 줄바꿈되도록 설정 */
  }
}