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

2026년 7월 3일 (금) 15:13 기준 최신판

/* ==========================================================
   카발 온라인 세계관 위키 — 사이트 전역 스타일
   적용 위치: 위키의 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;
  }
}