미디어위키:Common.css

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

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
• 오페라: Ctrl-F5를 입력.

/* ----------------------------------------------------------
   카발 온라인 세계관 위키 — 사이트 전역 스타일
   적용 위치: 위키의 MediaWiki:Common.css 문서에 전체 붙여넣기
   (관리자 권한 필요. 반영까지 캐시로 수 분 걸릴 수 있음)
   Vector / Vector 2022 / Liberty 스킨 모두 호환되도록 작성
   ---------------------------------------------------------- */

/* ---------- 디자인 토큰 ---------- */
:root {
  --cabal-accent: #2c2f5b;        /* 카발 딥 네이비 */
  --cabal-accent-text: #ffffff;
  --cabal-gold: #c9a24b;          /* 카발 골드 포인트 */
  --cabal-link: #0275d8;
  --cabal-border: #d5d5d5;
  --cabal-border-light: #e0e0e0;
  --cabal-infobox-bg: #f9f9f9;
  --cabal-muted: #6c757d;
  --cabal-fold-bg: #f5f6f7;
  --cabal-quote-bg: #fafafa;
}

/* ---------- 페이지 프레임: 나무위키식 카드 레이아웃 ----------
   Vector 2022 / 벡터(2011) 공통 적용 */
body, .mw-page-container {
  background: #e9eaed !important;
}
.mw-body {
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
  padding: 24px 32px 40px !important;
  margin-top: 10px;
}
.mw-body h1.firstHeading {
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
/* 벡터(2011)에서 탭 아래 여백 정리 */
#content.mw-body { margin-top: 6px; }

/* ---------- 제목 자동 번호 (나무위키식 파란 번호) ---------- */
.mw-parser-output { counter-reset: cabal-h2; }
.mw-parser-output h2 { counter-increment: cabal-h2; counter-reset: cabal-h3; }
.mw-parser-output h3 { counter-increment: cabal-h3; }
.mw-parser-output h2 > .mw-headline::before {
  content: counter(cabal-h2) ". ";
  color: var(--cabal-link);
}
.mw-parser-output h3 > .mw-headline::before {
  content: counter(cabal-h2) "." counter(cabal-h3) ". ";
  color: var(--cabal-link);
}
/* 대문(허브)처럼 번호가 어색한 문서는 본문에 <div class="cabal-nonum">…</div>로 감싸면 번호 제외 */
.cabal-nonum h2 > .mw-headline::before,
.cabal-nonum h3 > .mw-headline::before { content: none; }

/* ---------- 본문 기본 ---------- */
.mw-parser-output {
  font-size: 15.5px;
  line-height: 1.85;
  word-break: keep-all;
}
/* 문단 호흡: 아래 여백 확대 + 읽기 좋은 줄 길이 제한 */
.mw-parser-output p {
  margin: 0.4em 0 1.05em;
}
.mw-parser-output > p {
  max-width: 46em;
}
.mw-parser-output li { margin: 3px 0; }

/* 제목: 나무위키식 밑줄 + 번호 색상 */
.mw-parser-output h2 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 6px;
  margin-top: 38px;
  font-weight: 600;
}
.mw-parser-output h3,
.mw-parser-output h4 {
  border-bottom: 1px solid var(--cabal-border-light);
  padding-bottom: 4px;
  font-weight: 600;
}
.mw-headline-number { color: var(--cabal-link); margin-right: 8px; }

/* 목차 */
#toc, .toc {
  border: 1px solid var(--cabal-border);
  border-radius: 8px;
  background: #f8f9fa;
  padding: 12px 22px 14px;
  font-size: 14px;
}
#toc .toctitle h2 { border: none; margin: 0 0 6px; font-size: 15px; }
#toc .tocnumber { color: var(--cabal-link); }
#toc a { color: inherit; }
#toc a:hover { color: var(--cabal-link); }

/* ---------- 인포박스 ---------- */
.cabal-infobox {
  float: right;
  clear: right;
  width: 360px;
  max-width: 100%;
  margin: 0 0 18px 26px;
  border: 2px solid var(--cabal-accent);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cabal-infobox-bg);
  font-size: 13.5px;
  border-collapse: separate;
  border-spacing: 0;
}
.cabal-infobox caption,
.cabal-infobox .ib-title {
  background: var(--cabal-accent);
  color: var(--cabal-accent-text);
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  padding: 9px 12px;
  caption-side: top;
}
.cabal-infobox .ib-sub { display: block; font-size: 12px; font-weight: 400; opacity: .85; }
.cabal-infobox .ib-image {
  text-align: center;
  padding: 14px 10px 4px;
  background: linear-gradient(180deg, rgba(44,47,91,.06), transparent);
}
.cabal-infobox .ib-image img { max-width: 92%; height: auto; }
.cabal-infobox .ib-caption {
  text-align: center;
  font-size: 12px;
  color: var(--cabal-muted);
  padding: 0 10px 10px;
}
.cabal-infobox th,
.cabal-infobox td {
  padding: 7px 12px;
  border-top: 1px solid var(--cabal-border-light);
  vertical-align: top;
  text-align: left;
}
.cabal-infobox th {
  width: 84px;
  background: #eceef5;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 빈 행 자동 숨김 (ParserFunctions 없이 조건부 표시 구현) ----------
   틀에서 값이 비어 있는 항목의 행을 감춥니다. */
.cabal-infobox tr:has(td:empty) { display: none; }
.cabal-navbox tr:has(> td.nb-group:empty) { display: none; }
.cabal-quote .q-src:empty { display: none; }
.cabal-infobox .ib-caption:not(:empty)::before { content: "▲ "; }
.cabal-quote .q-src:not(:empty)::before { content: "— "; }

/* ---------- 인용문 ---------- */
.cabal-quote {
  margin: 18px 0;
  padding: 14px 20px;
  border-left: 4px solid var(--cabal-gold);
  background: var(--cabal-quote-bg);
  border-radius: 0 8px 8px 0;
}
.cabal-quote .q-src {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--cabal-muted);
  text-align: right;
}

/* ---------- 접기 (mw-collapsible 스타일링) ---------- */
.cabal-fold {
  border: 1px solid var(--cabal-border);
  border-radius: 8px;
  margin: 14px 0;
  background: var(--cabal-fold-bg);
  width: 100%;
}
.cabal-fold > .fold-title {
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cabal-muted);
  text-align: center;
}
.cabal-fold > .fold-title .mw-collapsible-toggle { float: none; }
.cabal-fold > .fold-body {
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid var(--cabal-border-light);
  border-radius: 0 0 8px 8px;
}

/* ---------- 표 ---------- */
.mw-parser-output table.wikitable {
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--cabal-border);
}
.mw-parser-output table.wikitable th,
.mw-parser-output table.wikitable td {
  border: 1px solid var(--cabal-border);
  padding: 8px 12px;
}
.mw-parser-output table.wikitable th { background: #eaecf0; }

/* ---------- 하단 내비게이션 박스 ---------- */
.cabal-navbox {
  clear: both;
  margin-top: 44px;
  border: 1px solid var(--cabal-border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13.5px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.cabal-navbox .nb-title {
  background: var(--cabal-accent);
  color: var(--cabal-accent-text);
  font-weight: 700;
  text-align: center;
  padding: 8px;
}
.cabal-navbox .nb-group {
  background: #eceef5;
  font-weight: 600;
  text-align: center;
  width: 130px;
  padding: 8px;
  border-top: 1px solid var(--cabal-border-light);
}
.cabal-navbox .nb-items {
  padding: 8px 14px;
  background: #fff;
  border-top: 1px solid var(--cabal-border-light);
}

/* ---------- 카드 그리드 (허브 페이지용) ---------- */
.cabal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.cabal-card {
  background: #fff;
  border: 1px solid var(--cabal-border);
  border-radius: 10px;
  padding: 16px 18px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.cabal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
  border-color: var(--cabal-gold);
}
.cabal-card .c-icon { font-size: 24px; }
.cabal-card .c-title { font-weight: 700; font-size: 15.5px; margin: 6px 0 2px; }
.cabal-card .c-title a { color: inherit; }
.cabal-card .c-desc { font-size: 12.5px; color: var(--cabal-muted); line-height: 1.5; }

/* ---------- 대문 배너 ---------- */
.cabal-hero {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 26px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201,162,75,.25), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(77,90,190,.35), transparent 60%),
    linear-gradient(135deg, #171930 0%, #232858 55%, #171930 100%);
  color: #fff;
  padding: 46px 44px 40px;
}
.cabal-hero h1,
.cabal-hero .hero-title {
  margin: 0 0 8px;
  font-size: 34px;
  border: none;
  color: #fff;
  font-weight: 800;
}
.cabal-hero .gold { color: var(--cabal-gold); }
.cabal-hero p { margin: 0; max-width: 640px; color: #cfd3e8; font-size: 15px; }
.cabal-hero a { color: #ffd97a; }

/* ---------- 연표 스트립 ---------- */
.cabal-timeline { display: flex; flex-wrap: wrap; gap: 0; margin: 20px 0 8px; }
.cabal-timeline .era {
  flex: 1 1 140px;
  min-width: 140px;
  padding: 12px 14px 10px;
  border: 1px solid var(--cabal-border);
  margin: -1px 0 0 -1px;   /* 격자 테두리 겹침 */
  background: #fff;
  text-align: center;
}
.cabal-timeline .era:first-child { border-radius: 8px 0 0 0; }
.cabal-timeline .era:last-child { border-radius: 0 0 8px 0; }
.cabal-timeline .era .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cabal-gold); margin: 0 auto 6px; }
.cabal-timeline .era.dark .dot { background: #b04a4a; }
.cabal-timeline .era .e-name { font-weight: 700; font-size: 13.5px; }
.cabal-timeline .era .e-desc { font-size: 11.5px; color: var(--cabal-muted); margin-top: 2px; }

/* ---------- NPC 카드 스트립 ---------- */
.cabal-npc-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.cabal-npc-card {
  background: #fff;
  border: 1px solid var(--cabal-border);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cabal-npc-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.15); border-color: var(--cabal-gold); }
.cabal-npc-card .npc-img {
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(201,162,75,.22), transparent 70%),
    linear-gradient(180deg, #232858, #171930);
  overflow: hidden;
}
.cabal-npc-card .npc-img img { max-height: 140px; width: auto; }
.cabal-npc-card .npc-name { font-size: 13px; font-weight: 600; padding: 8px 6px 2px; }
.cabal-npc-card .npc-loc { font-size: 11px; color: var(--cabal-muted); padding-bottom: 8px; }

/* ---------- 분류 페이지 꾸미기 ---------- */
/* 하단 "분류:" 바 — 나무위키식 둥근 상자 */
#catlinks {
  border: 1px solid var(--cabal-border-light);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13.5px;
  background: transparent;
}
/* 첫 글자(가나다) 머리글자 → 작은 회색 라벨 */
.mw-category-group h3 {
  border: none;
  color: var(--cabal-muted);
  font-size: 12.5px;
  font-weight: 600;
  margin: 12px 0 6px;
  padding: 0;
}
/* 문서 목록 → 칩(알약) 그리드 */
.mw-category-group ul {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mw-category-group li {
  margin: 0;
  padding: 0;
}
.mw-category-group li a {
  display: inline-block;
  border: 1px solid var(--cabal-border);
  border-radius: 999px;
  padding: 4px 14px;
  background: #fff;
  font-size: 13.5px;
  transition: border-color .12s, box-shadow .12s;
}
.mw-category-group li a:hover {
  border-color: var(--cabal-gold);
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  text-decoration: none;
}
/* 기본 다단(column) 배치 해제 — 칩이 자연스럽게 흐르도록 */
.mw-category {
  column-count: auto !important;
  column-width: auto !important;
}

/* ---------- Google 번역 위젯 (Common.js와 세트) ----------
   위젯이 본문 카드(.mw-body) 안에 붙기 때문에 카드 기준으로 위치가 잡힘.
   넓은 화면: 카드 오른쪽 모서리 바깥(회색 여백), 네이비 배너 높이 — 화면이 아무리 넓어도 항상 배너 옆
   좁은 화면(1420px 이하): 문서 탭 줄의 빈 공간(상단 중앙) */
.mw-body { position: relative; }
#google_translate_element {
  position: absolute;
  top: 155px;          /* 배너 높이에 맞춤 — 위/아래 조절은 이 값 */
  right: -180px;       /* 카드 모서리에서 바깥쪽으로 — 카드와의 간격 조절은 이 값 */
  z-index: 50;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  vertical-align: middle;
  background: #1a1a2e;
  border: 1px solid var(--cabal-gold);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
/* 스크롤해서 배너를 지나치면 화면 상단에 고정 (gt-pinned 클래스는 Common.js가 토글)
   top 60px -> Vector 상단 고정 헤더(약 50px) 아래에 위치해 가려지지 않음 */
#google_translate_element.gt-pinned {
  position: fixed;
  top: 60px;
  right: auto;
}
/* 구글이 번역 시 페이지 최상단에 끼워 넣는 번역 배너만 숨김 (페이지 밀림/가림 방지)
   주의: body > .skiptranslate 같은 광범위 선택자는 언어 선택 드롭다운까지 숨기므로 금지.
   번역 자체는 위젯 드롭다운으로 동일하게 동작 */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
}
body { top: 0 !important; }
/* 구글 번역 적용 시(html에 translated-* 클래스 부착) 줄바꿈 규칙 완화:
   일본어 등 띄어쓰기 없는 언어가 keep-all 때문에 상자를 뚫고 나가는 문제 방지 */
html.translated-ltr .mw-parser-output,
html.translated-rtl .mw-parser-output,
html.translated-ltr .cabal-card,
html.translated-ltr .cabal-timeline .era,
html.translated-ltr .cabal-infobox,
html.translated-ltr .cabal-navbox {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
/* 1420px 이하: 오른쪽 여백이 사라지므로 상단 탭 줄 중앙으로 */
@media (max-width: 1420px) {
  #google_translate_element {
    top: 92px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }
  #google_translate_element.gt-pinned {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
  }
}
#google_translate_element .goog-te-gadget-simple {
  background: #0D1428 !important;
  border: 1px solid #8A6820 !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  font-size: 0.75rem !important;
  white-space: nowrap;
}
#google_translate_element .goog-te-gadget-simple span,
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span {
  color: #C9A84C !important;
}

/* ---------- 모바일 ---------- */
@media (max-width: 768px) {
  .cabal-infobox { float: none; margin: 0 auto 20px; width: 100%; }
  .cabal-hero { padding: 30px 22px; }
  #google_translate_element {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    display: block;
    width: 100%;
    text-align: center;
    padding: 4px 0;
    border: none;
    border-bottom: 1px solid rgba(201, 168, 76, .2);
    margin: 0;
    background: transparent;
    box-shadow: none;
  }
  #google_translate_element.gt-pinned {
    position: fixed;
    top: 52px;
    background: #1a1a2e;
    border-bottom: 1px solid var(--cabal-gold);
    z-index: 9999;
  }
}
/* ----------------------------------------------------------
   모바일 / 터치 최적화 — 카드·연표 전체를 클릭 영역으로
   (버튼처럼 보이는데 글자만 눌러야 이동되던 문제 해결. 2026-07)
   ---------------------------------------------------------- */

/* --- 분야별 문서 카드: 카드 전체가 하나의 버튼 --- */
.cabal-card { position: relative; cursor: pointer; }
.cabal-card .c-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* 설명문 속 자동 링크(LinkTitles)는 평문 처리 — 카드는 한 곳으로만 이동 */
.cabal-card .c-desc a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
.cabal-card:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* --- NPC 카드: 초상화·이름 어디를 눌러도 이동 --- */
.cabal-npc-card { position: relative; cursor: pointer; }
.cabal-npc-card .npc-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cabal-npc-card:active { transform: translateY(-1px); }

/* --- 시대 연표: 칸 전체가 클릭 영역 --- */
.cabal-timeline .era { position: relative; cursor: pointer; }
.cabal-timeline .era .e-name a { display: block; }
.cabal-timeline .era .e-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cabal-timeline .era .e-desc a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
.cabal-timeline .era:hover { border-color: var(--cabal-gold); }
.cabal-timeline .era:active { background: #f7f8fc; }

/* --- 모바일 터치 타겟 확대 (권장 44px) --- */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1100px) {
  /* 카드 2열 유지 — 12개가 세로로 늘어지지 않도록 */
  .cabal-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cabal-card { padding: 14px; min-height: 112px; }
  .cabal-card .c-desc { font-size: 12px; }

  /* 목차·내비게이션·분류 칩 링크의 세로 여백 확보 */
  #toc li, .toc li { margin: 6px 0; }
  #toc li a, .toc li a,
  .cabal-navbox .nb-items a { display: inline-block; padding: 6px 2px; }
  .mw-category-group li a { padding: 9px 16px; }

  /* 인포박스 내부 링크 */
  .cabal-infobox td a { display: inline-block; padding: 4px 0; }

  /* 연표 칸: 2열 배치 + 세로 여유 */
  .cabal-timeline .era { min-width: 45%; padding: 14px 10px 12px; }
}

/* ----------------------------------------------------------
   모바일 여백 / 타이포 최적화 (반응형 활성화 후 조정)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* 본문 카드 좌우 여백 축소 - 좁은 화면에서 폭을 최대한 활용 */
  .mw-page-container { padding-left: 8px !important; padding-right: 8px !important; }
  .mw-body {
    padding: 16px 14px 28px !important;
    border-radius: 8px;
    margin-top: 6px;
  }

  /* 제목 크기 조정 */
  .mw-body h1.firstHeading { font-size: 23px; line-height: 1.35; }
  .mw-parser-output h2 { font-size: 20px; margin-top: 28px; }
  .mw-parser-output h3 { font-size: 17px; }

  /* 히어로 배너 */
  .cabal-hero { padding: 22px 16px 20px; border-radius: 8px; }
  .cabal-hero h1,
  .cabal-hero .hero-title { font-size: 23px; line-height: 1.3; }
  .cabal-hero p { font-size: 13.5px; line-height: 1.6; }

  /* 카드 - 설명이 길어도 높이가 과하지 않게 */
  .cabal-card { min-height: 0; padding: 12px; }
  .cabal-card .c-icon { font-size: 20px; }
  .cabal-card .c-title { font-size: 14.5px; }
  .cabal-card .c-desc { font-size: 11.5px; line-height: 1.45; }

  /* 인포박스 */
  .cabal-infobox { margin-bottom: 16px; }
  .cabal-infobox caption { font-size: 15px; }

  /* 번역 위젯 - 우측 하단 플로팅 칩 (콘텐츠를 가리지 않음) */
  #google_translate_element,
  #google_translate_element.gt-pinned {
    position: fixed;
    top: auto;
    bottom: 12px;
    left: auto;
    right: 12px;
    width: auto;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 5px 10px;
    text-align: left;
    background: #1a1a2e;
    border: 1px solid var(--cabal-gold);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    transform: none;
    z-index: 9999;
  }
}

/* 모바일: 목차 블록과 제목 줄바꿈 정리 */
@media (max-width: 768px) {
  /* 문서 제목이 낱글자로 끊기지 않도록 */
  .mw-body h1.firstHeading { word-break: keep-all; }

  /* Vector 2022 모바일 목차 - 본문 카드와 같은 스타일로 맞춤 */
  .mw-table-of-contents-container,
  .vector-sticky-toc-container { width: auto; }
  #mw-panel-toc.sidebar-toc,
  .sidebar-toc {
    width: auto;
    margin: 6px 0 0;
    padding: 10px 14px 12px;
    background: #fff;
    border: 1px solid var(--cabal-border);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    font-size: 14px;
  }
  .sidebar-toc .sidebar-toc-list-item { margin: 4px 0; }
  .sidebar-toc a { padding: 4px 0; display: inline-block; }
}

/* 넓은 화면: 본문 폭 확대 (Vector 2022 기본 960px 제한 완화)
   좌측 사이드바(약 344px) + 본문이 페이지 컨테이너를 꽉 채우도록 */
@media (min-width: 1200px) {
  .mw-content-container { max-width: 1250px; }
  /* 본문 문단은 읽기 좋은 길이를 유지 (표/카드/인포박스만 넓게 사용) */
  .mw-parser-output > p { max-width: 52em; }
}

/* 헤더 언어 선택 버튼(ULS): 공간이 좁아도 글자가 세로로 쪼개지지 않도록
   (로그인 상태에서 헤더 항목이 많아지면 "한/국/어"로 끊기던 문제) */
.uls-trigger,
#ca-uls .uls-trigger,
.vector-user-links .uls-trigger { white-space: nowrap; }

/* 좁은 화면에서 헤더 항목 축약 (로그인 시 항목이 많아 글자가 잘리거나 두 줄로 쪼개지던 문제)
   - 언어 버튼: 글자를 감추고 아이콘만 남김 (기능 그대로)
   - 사용자명 / 계정 만들기 / 로그인: 우측 더보기 메뉴에서 접근 */
@media (max-width: 1100px) {
  .uls-trigger span + span { display: none; }   /* 아이콘 다음의 글자 span만 숨김 */
  .uls-trigger { padding-left: 8px; padding-right: 8px; }
  .vector-user-links #pt-userpage-2,
  .vector-user-links #pt-createaccount-2,
  .vector-user-links #pt-login-2 { display: none; }
}