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

2026년 7월 2일 (목) 13:39 판

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

/* ---------- 본문 기본 ---------- */
.mw-parser-output {
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
}

/* 제목: 나무위키식 밑줄 + 번호 색상 */
.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;
}

/* ---------- 인용문 ---------- */
.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; margin: 20px 0 8px; overflow-x: auto; padding-bottom: 6px; }
.cabal-timeline .era {
  flex: 1;
  min-width: 128px;
  padding: 12px 14px 10px;
  border: 1px solid var(--cabal-border);
  border-left: none;
  background: #fff;
  text-align: center;
}
.cabal-timeline .era:first-child { border-left: 1px solid var(--cabal-border); border-radius: 8px 0 0 8px; }
.cabal-timeline .era:last-child { border-radius: 0 8px 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; }

/* ---------- 모바일 ---------- */
@media (max-width: 768px) {
  .cabal-infobox { float: none; margin: 0 auto 20px; width: 100%; }
  .cabal-hero { padding: 30px 22px; }
}