Common.css: 두 판 사이의 차이

2026년 5월 15일 (금) 05:54 판

/* =========================================================
 * CABAL WIKI — Dark Fantasy Theme
 * 적용 위치: MediaWiki:Common.css
 * 적용 후 캐시 새로고침 필요: Ctrl + F5 또는 URL 뒤에 ?action=purge
 * 작성: 2026.05 / 이창준 (카발서비스팀)
 * ========================================================= */

/* ---------- 0. 폰트 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ---------- 1. 컬러 변수 ---------- */
:root {
    --cw-bg:        #0a0e1a;   /* 전체 배경 */
    --cw-card:      #1a1f33;   /* 카드/박스 */
    --cw-card-2:    #12172a;   /* 보조 카드 */
    --cw-border:    #2a3050;   /* 테두리 */
    --cw-gold:      #c9a961;   /* 메인 액센트 (골드) */
    --cw-gold-2:    #d4af37;   /* 링크/하이라이트 */
    --cw-gold-soft: #f4e8c8;   /* 밝은 골드 (제목) */
    --cw-purple:    #4a2a6e;   /* 보조 액센트 (보라) */
    --cw-purple-2:  #2a1d4a;   /* 깊은 보라 */
    --cw-text:      #e8e4d4;   /* 본문 텍스트 */
    --cw-text-2:    #cfcbc0;   /* 보조 텍스트 */
    --cw-text-3:    #a8a8b3;   /* 회색 (캡션) */
}

/* ---------- 2. 전체 배경 / 컨테이너 ---------- */
body.skin-vector,
body.skin-vector-2022 {
    background: var(--cw-bg) !important;
    color: var(--cw-text);
}

#content,
.mw-body,
.vector-body {
    background:
        radial-gradient(ellipse at top, rgba(201,169,97,0.04) 0%, transparent 50%),
        linear-gradient(180deg, #0d1220 0%, var(--cw-bg) 100%) !important;
    color: var(--cw-text) !important;
    border-left: 1px solid var(--cw-border) !important;
    border-color: var(--cw-border) !important;
}

/* 사이드바/탭 영역 */
.vector-menu-tabs,
.vector-menu-tabs ul,
.vector-menu-tabs li {
    background-image: none !important;
    background-color: transparent !important;
}
#mw-panel,
.mw-portlet,
.vector-menu-portal {
    color: var(--cw-text-3) !important;
}
#mw-panel .vector-menu-heading,
.mw-portlet h3 {
    color: var(--cw-gold) !important;
}

/* ---------- 3. 본문 타이포그래피 ---------- */
.mw-parser-output {
    font-family: 'Noto Sans KR', 'Pretendard', '맑은 고딕', sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: var(--cw-text);
}
.mw-parser-output p {
    margin: 0 0 14px;
    color: var(--cw-text-2);
}
.mw-parser-output b,
.mw-parser-output strong {
    color: var(--cw-gold-soft);
}

/* ---------- 4. 페이지 제목 (h1) ---------- */
#firstHeading,
.mw-first-heading {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 36px !important;
    color: var(--cw-gold-soft) !important;
    border: none !important;
    padding-bottom: 16px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid transparent !important;
    border-image: linear-gradient(90deg, var(--cw-gold) 0%, transparent 80%) 1 !important;
    letter-spacing: 1px;
}
#firstHeading::before {
    content: '◆ ';
    color: var(--cw-gold);
    font-size: 24px;
    vertical-align: 2px;
}

/* ---------- 5. 본문 헤더 (h2 / h3 / h4) ---------- */
.mw-parser-output h2 {
    font-family: 'Noto Serif KR', serif;
    font-size: 24px !important;
    color: var(--cw-gold) !important;
    margin: 36px 0 16px !important;
    padding: 12px 0 12px 18px !important;
    border: none !important;
    border-left: 4px solid var(--cw-gold) !important;
    background: linear-gradient(90deg, rgba(201,169,97,0.12) 0%, transparent 60%);
    letter-spacing: 1px;
}
.mw-parser-output h3 {
    font-size: 18px !important;
    color: var(--cw-text) !important;
    margin: 24px 0 12px !important;
    padding-left: 14px !important;
    border-left: 2px solid #6b5538 !important;
    letter-spacing: 0.5px;
}
.mw-parser-output h4 {
    font-size: 16px !important;
    color: var(--cw-gold-2) !important;
    margin: 18px 0 10px !important;
    padding-left: 10px !important;
    border-left: 2px solid var(--cw-purple) !important;
}
.mw-parser-output h5,
.mw-parser-output h6 {
    color: var(--cw-text) !important;
}

/* ---------- 6. 링크 ---------- */
.mw-parser-output a,
.mw-body-content a {
    color: var(--cw-gold-2) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(212,175,55,0.35);
    transition: color 0.15s, border-color 0.15s;
}
.mw-parser-output a:hover {
    color: var(--cw-gold-soft) !important;
    border-bottom-color: var(--cw-gold-soft);
}
.mw-parser-output a.new,
.mw-parser-output a.new:visited {  /* 빨간 링크 (없는 문서) */
    color: #c74e4e !important;
    border-bottom-color: rgba(199,78,78,0.35);
}
.mw-parser-output a.external {
    color: var(--cw-gold-2) !important;
}

/* ---------- 7. 목차 (TOC) ---------- */
#toc,
.toc,
.toccolours {
    background: linear-gradient(180deg, var(--cw-card-2) 0%, #0d1220 100%) !important;
    border: 1px solid var(--cw-border) !important;
    border-left: 3px solid var(--cw-gold) !important;
    padding: 18px 22px !important;
    border-radius: 4px !important;
    color: var(--cw-text-2) !important;
    max-width: 480px;
}
#toc .toctitle,
.toc .toctitle {
    color: var(--cw-gold) !important;
    font-family: 'Noto Serif KR', serif;
    font-size: 14px !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(201,169,97,0.3);
    text-align: left !important;
}
#toc ul,
.toc ul {
    color: var(--cw-text-2);
    line-height: 1.9;
}
#toc a,
.toc a {
    color: var(--cw-text-2) !important;
    border-bottom: none !important;
}
#toc a:hover,
.toc a:hover {
    color: var(--cw-gold-soft) !important;
}
.tocnumber {
    color: var(--cw-gold) !important;
    font-weight: bold;
    margin-right: 6px;
}

/* ---------- 8. 표 (wikitable) ---------- */
.mw-parser-output table.wikitable,
.wikitable {
    background: var(--cw-card) !important;
    color: var(--cw-text-2) !important;
    border: 1px solid var(--cw-border) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 4px;
    overflow: hidden;
    margin: 16px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.wikitable th {
    background: linear-gradient(180deg, var(--cw-purple) 0%, var(--cw-purple-2) 100%) !important;
    color: var(--cw-gold-soft) !important;
    border: 1px solid var(--cw-border) !important;
    font-family: 'Noto Serif KR', serif;
    letter-spacing: 1px;
    padding: 10px 14px !important;
}
.wikitable td {
    background: var(--cw-card) !important;
    border: 1px solid var(--cw-border) !important;
    color: var(--cw-text-2) !important;
    padding: 10px 14px !important;
}
.wikitable tr:hover td {
    background: #20253d !important;
}
.wikitable caption {
    background: var(--cw-purple-2) !important;
    color: var(--cw-gold-soft) !important;
    font-family: 'Noto Serif KR', serif;
    font-weight: bold;
    padding: 10px;
    letter-spacing: 1px;
}

/* ---------- 9. 인포박스 ---------- */
/* MediaWiki 표준 .infobox 클래스가 적용된 경우 자동 다크화 */
.infobox {
    float: right;
    width: 300px;
    margin: 0 0 20px 24px;
    background: linear-gradient(180deg, var(--cw-card) 0%, #0f1424 100%) !important;
    border: 1px solid var(--cw-border) !important;
    border-radius: 6px !important;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,169,97,0.15);
    font-size: 13px;
    color: var(--cw-text-2) !important;
}
.infobox caption,
.infobox-title,
.infobox > tbody > tr:first-child th {
    background: linear-gradient(90deg, var(--cw-purple-2) 0%, var(--cw-purple) 100%) !important;
    color: var(--cw-gold-soft) !important;
    font-family: 'Noto Serif KR', serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--cw-gold) !important;
    text-align: center;
}
.infobox th {
    background: rgba(201,169,97,0.08) !important;
    color: var(--cw-gold) !important;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 8px 14px !important;
    border-right: 1px solid var(--cw-border) !important;
    width: 35%;
    text-align: left;
}
.infobox td {
    padding: 8px 14px !important;
    color: var(--cw-text-2) !important;
    border-bottom: 1px solid var(--cw-border) !important;
}
.infobox img {
    max-width: 100%;
    height: auto;
}

/* ---------- 10. 인용/Blockquote ---------- */
.mw-parser-output blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(74,42,110,0.2), transparent);
    border-left: 3px solid var(--cw-purple);
    color: var(--cw-text);
    font-style: italic;
    line-height: 1.8;
    border-radius: 0 4px 4px 0;
}

/* ---------- 11. 코드 / pre ---------- */
.mw-parser-output code,
.mw-parser-output tt {
    background: var(--cw-card) !important;
    color: var(--cw-gold-2) !important;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--cw-border);
    font-size: 13px;
}
.mw-parser-output pre {
    background: var(--cw-card-2) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-border) !important;
    border-left: 3px solid var(--cw-gold) !important;
    padding: 14px 18px;
    border-radius: 4px;
}

/* ---------- 12. 리스트 / 구분선 ---------- */
.mw-parser-output ul,
.mw-parser-output ol {
    color: var(--cw-text-2);
}
.mw-parser-output ul li::marker { color: var(--cw-gold); }
.mw-parser-output ol li::marker { color: var(--cw-gold); font-weight: bold; }
.mw-parser-output hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cw-gold), transparent);
    margin: 28px 0;
}

/* ---------- 13. 카테고리 / Footer ---------- */
#catlinks,
.catlinks {
    background: var(--cw-card-2) !important;
    border: 1px solid var(--cw-border) !important;
    border-radius: 4px;
    padding: 10px 14px;
    color: var(--cw-text-3) !important;
}
#catlinks a { color: var(--cw-gold-2) !important; }
#footer,
.mw-footer {
    color: var(--cw-text-3) !important;
}
#footer a { color: var(--cw-gold-2) !important; }

/* ---------- 14. 검색창 / 입력 ---------- */
#searchInput,
.mw-ui-input,
input[type="text"],
input[type="search"] {
    background: var(--cw-card-2) !important;
    border: 1px solid var(--cw-border) !important;
    color: var(--cw-text) !important;
    border-radius: 3px;
}
#searchInput:focus {
    border-color: var(--cw-gold) !important;
    outline: none;
}

/* ---------- 15. 알림 박스 (정보/경고) ---------- */
.mbox,
.ambox,
.notice {
    background: var(--cw-card) !important;
    border: 1px solid var(--cw-border) !important;
    border-left: 4px solid var(--cw-gold) !important;
    color: var(--cw-text-2) !important;
    padding: 12px 16px;
    border-radius: 4px;
}

/* ---------- 16. 클랜 컬러 유틸리티 클래스 ----------
 *  사용법: 인포박스 div에 class="clan-dark" 등을 추가하면 자동 컬러링
 *  예: <div class="infobox clan-metal">...</div>
 */
.clan-dark   .infobox-header, .clan-dark   .dp-infobox-header  { background: linear-gradient(90deg, #1a0a1a, #4a1f3a) !important; }
.clan-metal  .infobox-header, .clan-metal  .dp-infobox-header  { background: linear-gradient(90deg, #2a2a3a, #5a5a7a) !important; }
.clan-mutant .infobox-header, .clan-mutant .dp-infobox-header  { background: linear-gradient(90deg, #2a3a1a, #5a7a2a) !important; }
.clan-undead .infobox-header, .clan-undead .dp-infobox-header  { background: linear-gradient(90deg, #2a1a1a, #6a2a2a) !important; }
.clan-plant  .infobox-header, .clan-plant  .dp-infobox-header  { background: linear-gradient(90deg, #1a3a2a, #2a6a4a) !important; }
.clan-phantasmal .infobox-header, .clan-phantasmal .dp-infobox-header { background: linear-gradient(90deg, #2a1a3a, #5a2a7a) !important; }

/* ---------- 17. 반응형 (모바일) ---------- */
@media (max-width: 720px) {
    .infobox {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
    #firstHeading { font-size: 28px !important; }
    .mw-parser-output h2 { font-size: 20px !important; }
}

/* ========== END OF CABAL WIKI DARK FANTASY THEME ========== */

/* =========================================================
 * CABAL WIKI — Dark Fantasy Theme · PATCH v1.1
 * 적용: 기존 MediaWiki:Common.css 맨 아래에 이어붙이기
 * 수정: 1차 적용 후 발견된 5개 문제 해결
 * ========================================================= */

/* ---------- [패치 1] FlaggedRevs 알림 메시지 (승인 판) ---------- */
/* "이 문서의 승인한 판은 최신 판입니다" / "이 판은 ... Wikiadmin이 승인" */
.flaggedrevs_short,
.flaggedrevs_basic,
.flaggedrevs_quality,
.flaggedrevs_pristine,
#mw-fr-revisiontag,
#mw-fr-revisiontag-old,
.fr-checkbox,
.fr-icon-current,
.fr-icon-stable,
.flaggedrevs-pending,
.flaggedrevs-stable {
    background: var(--cw-card-2) !important;
    color: var(--cw-text-2) !important;
    border: 1px solid var(--cw-border) !important;
    border-left: 3px solid var(--cw-gold) !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    margin: 8px 0 !important;
}

/* 승인 메시지 안의 빨간 글씨 → 골드로 */
.flaggedrevs_short *,
#mw-fr-revisiontag *,
.flaggedrevs-stable *,
.fr-text * {
    color: var(--cw-text-2) !important;
}
.flaggedrevs_short b,
.flaggedrevs_short strong,
#mw-fr-revisiontag b,
.fr-user, .fr-text a {
    color: var(--cw-gold) !important;
}

/* 사용자 이름 (Wikiadmin 등) - 빨간색 링크라도 골드로 */
.flaggedrevs_short a.new,
#mw-fr-revisiontag a.new {
    color: var(--cw-gold-2) !important;
}

/* ---------- [패치 2] Hatnote / 알림 박스 (흰 배경 제거) ---------- */
/* "이 문서는 카발 온라인 세계관에 대한 정보를 담고 있습니다" */
.mw-parser-output .hatnote,
.mw-parser-output .dablink,
.mw-parser-output .rellink,
.hatnote,
.dablink,
.rellink {
    background: var(--cw-card-2) !important;
    color: var(--cw-text-2) !important;
    border: 1px solid var(--cw-border) !important;
    border-left: 3px solid var(--cw-gold) !important;
    padding: 10px 16px !important;
    border-radius: 4px !important;
    font-style: normal !important;
    margin: 12px 0 !important;
}
.mw-parser-output .hatnote a,
.hatnote a {
    color: var(--cw-gold-2) !important;
}

/* ---------- [패치 3] 모든 표 셀 강제 다크화 ---------- */
/* 인라인 style="background:white" 또는 wikitable 클래스 없는 표 대응 */
.mw-parser-output table:not(.infobox) td,
.mw-parser-output table:not(.infobox) th,
#mw-content-text table:not(.infobox) td,
#mw-content-text table:not(.infobox) th {
    background-color: var(--cw-card) !important;
    color: var(--cw-text-2) !important;
}

/* 표 안의 흰색/밝은 텍스트도 강제 베이지 톤으로 */
.mw-parser-output table td,
.mw-parser-output table th,
.mw-parser-output table td b,
.mw-parser-output table td strong {
    color: var(--cw-text) !important;
}
.mw-parser-output table td a {
    color: var(--cw-gold-2) !important;
}

/* ---------- [패치 4] Collapsible (펼치기) 박스 ---------- */
.mw-collapsible,
.NavFrame,
.navbox {
    background: var(--cw-card) !important;
    border: 1px solid var(--cw-border) !important;
    color: var(--cw-text-2) !important;
    border-radius: 4px;
}
.mw-collapsible-toggle,
.mw-collapsible-toggle-default,
.NavToggle {
    color: var(--cw-gold) !important;
    font-weight: bold;
    background: rgba(201,169,97,0.1) !important;
    padding: 2px 8px !important;
    border-radius: 3px;
    border: 1px solid var(--cw-border);
}
.mw-collapsible-toggle:hover {
    background: rgba(201,169,97,0.2) !important;
    color: var(--cw-gold-soft) !important;
}
.NavHead,
.navbox-title,
.navbox-group {
    background: linear-gradient(90deg, var(--cw-purple-2) 0%, var(--cw-purple) 100%) !important;
    color: var(--cw-gold-soft) !important;
    font-family: 'Noto Serif KR', serif !important;
}

/* 확장팩 카드 텍스트 강제 가독성 확보 */
.mw-parser-output table.wikitable td b,
.mw-parser-output table td b {
    color: var(--cw-gold-soft) !important;
    display: block;
    margin-bottom: 6px;
    font-family: 'Noto Serif KR', serif;
    letter-spacing: 1px;
}

/* ---------- [패치 5] 섹션 편집 링크 [편집][원본 편집] ---------- */
.mw-editsection,
.mw-editsection-bracket,
span.mw-editsection {
    color: var(--cw-text-3) !important;
    font-size: 13px !important;
    font-weight: normal !important;
    margin-left: 10px;
}
.mw-editsection a,
.mw-editsection-bracket {
    color: var(--cw-gold-2) !important;
    border-bottom: none !important;
}
.mw-editsection a:hover {
    color: var(--cw-gold-soft) !important;
}

/* ---------- [추가 보너스 1] 우상단 "행위" 드롭다운 ---------- */
.vector-page-toolbar,
.vector-dropdown-content,
#p-cactions,
.vector-menu-dropdown .vector-menu-content {
    background: var(--cw-card) !important;
    border: 1px solid var(--cw-border) !important;
    color: var(--cw-text-2) !important;
}
.vector-page-toolbar a,
#p-cactions a {
    color: var(--cw-gold-2) !important;
}

/* ---------- [추가 보너스 2] 사이드바 "목차" 박스 정리 ---------- */
/* 좌측 사이드바 TOC가 어색하게 베이지 박스로 보이는 문제 */
#mw-panel #toc,
.vector-toc,
.sidebar-toc,
#mw-panel-toc-list {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
#mw-panel #toc .toctitle,
.vector-toc-heading {
    background: transparent !important;
    color: var(--cw-gold) !important;
    border: none !important;
    padding-left: 12px !important;
}

/* ---------- [추가 보너스 3] 빨간 링크(없는 문서) 가독성 ---------- */
/* 다크 배경에 진한 빨강이 안 보이므로 좀 더 밝게 */
.mw-parser-output a.new,
a.new,
a.new:visited {
    color: #ff7a7a !important;
    border-bottom-color: rgba(255,122,122,0.4) !important;
}

/* ---------- [추가 보너스 4] 페이지 제목 박스(🌐) 살리기 ---------- */
/* 본문 안에 "🌐 카발 온라인 세계관🌐" 같은 큰 검은 박스 */
.mw-parser-output div[style*="background"],
.mw-parser-output center[style] {
    background-color: transparent !important;
}

/* ---------- [추가 보너스 5] 빈 테이블 셀 (이미지만 있는) ---------- */
/* 흰 배경 이미지 (CABAL 로고 등)가 흰 셀에 떠 있는 문제 - 셀 패딩으로 완화 */
.mw-parser-output table td:has(img:only-child),
.mw-parser-output table td img {
    background-color: transparent !important;
}
.mw-parser-output table td img {
    padding: 8px;
    background: var(--cw-card-2) !important;
    border-radius: 4px;
}

/* ========== END OF PATCH v1.1 ========== */