Common.css: 두 판 사이의 차이

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

/* =========================================================
 * 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 ========== */