미디어위키:Common.css

/* ===== CSS Variables ===== */

root {

 --murim-red: #8B0000;
 --murim-red-light: #a00000;
 --murim-red-hover: #c00000;
 --murim-gold: #c9aa71;
 --murim-gold-light: #e0c080;
 --murim-gold-dark: #a08050;
 --murim-bg-card: #141414;
 --murim-bg-surface: #1a1a1a;
 --murim-bg-elevated: #222;
 --murim-border: #333;
 --murim-text: #c8c8c8;
 --murim-text-em: #e8e8e8;
 --murim-text-subtle: #888;
 --murim-radius: 8px;
 --murim-radius-sm: 4px;
 --murim-transition: 0.2s ease;

}

/* ===== Primary Color Override ===== */

root {

 --color-primary__h: 0;
 --color-primary__s: 70%;
 --color-primary__l: 27%;
 --color-link: var(--murim-gold);
 --color-link--hover: var(--murim-gold-light);
 --color-link--active: var(--murim-gold-dark);
 --color-subtle: var(--murim-text-subtle);
 --color-placeholder: #666;
 --color-inverted-fixed: #fff;

}

body.skin-citizen-dark {

 --background-color-progressive-subtle: #2a0a0a;
 --color-link: var(--murim-gold);
 --color-link--visited: var(--murim-gold-dark);
 --color-link--active: var(--murim-gold-light);
 --color-base: var(--murim-text);
 --color-emphasized: var(--murim-text-em);
 --color-subtle: var(--murim-text-subtle);
 --border-color-base: var(--murim-border);
 --background-color-base: #0d0d0d;
 --background-color-page-container: #0d0d0d;
 --background-color-content: #111;

}

/* ===== Typography ===== */ body {

 font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
 line-height: 1.6;

}

1. mw-content-text h2 {

 border-bottom: 2px solid var(--murim-border);
 padding-bottom: 0.3em;
 color: var(--murim-text-em);

}

1. mw-content-text h3 {

 color: var(--murim-gold);

}

/* ===== Main Page ===== */ .mw-mainpage-hero {

 text-align: center;
 padding: 4em 1em 2.5em;
 margin-bottom: 2em;
 border-bottom: 1px solid var(--murim-border);
 background: linear-gradient(180deg, rgba(139,0,0,0.08) 0%, transparent 100%);
 border-radius: var(--murim-radius);

} .mw-mainpage-hero h1 {

 font-size: 3.5em;
 margin: 0 0 0.15em;
 color: var(--murim-gold);
 font-weight: 700;
 letter-spacing: 0.02em;
 text-shadow: 0 2px 8px rgba(0,0,0,0.5);

} .mw-mainpage-hero-desc {

 font-size: 1.15em;
 color: var(--murim-text-subtle);
 margin: 0 0 2em;

}

/* Stats */ .mw-mainpage-stats {

 display: flex;
 justify-content: center;
 gap: 2.5em;
 margin-bottom: 1.5em;
 flex-wrap: wrap;

} .mw-stat {

 text-align: center;
 padding: 0.5em 1em;
 border-radius: var(--murim-radius);
 background: rgba(0,0,0,0.3);
 border: 1px solid var(--murim-border);
 min-width: 100px;

} .mw-stat-value {

 display: block;
 font-size: 2em;
 font-weight: 700;
 color: var(--murim-gold);

} .mw-stat-label {

 display: block;
 font-size: 0.75em;
 color: var(--murim-text-subtle);
 text-transform: uppercase;
 letter-spacing: 0.15em;
 margin-top: 0.2em;

}

/* Card Grid */ .mw-mainpage-grid {

 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 1.2em;
 margin: 2em 0;

} .mw-mainpage-card {

 position: relative;
 padding: 1.8em 1.5em;
 border: 1px solid var(--murim-border);
 border-radius: var(--murim-radius);
 background: var(--murim-bg-card);
 transition: border-color var(--murim-transition), transform var(--murim-transition), box-shadow var(--murim-transition);
 overflow: hidden;

} .mw-mainpage-card::before {

 content: ;
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: var(--murim-red);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s ease;

} .mw-mainpage-card:hover::before {

 transform: scaleX(1);

} .mw-mainpage-card:hover {

 border-color: var(--murim-red);
 transform: translateY(-3px);
 box-shadow: 0 4px 20px rgba(139,0,0,0.15);

} .mw-mainpage-card h3 {

 margin: 0.6em 0 0.3em;
 color: var(--murim-text-em);
 font-size: 1.15em;

} .mw-mainpage-card p {

 margin: 0;
 color: var(--murim-text-subtle);
 font-size: 0.85em;
 line-height: 1.5;

} .mw-card-icon {

 font-size: 2.2em;
 line-height: 1;

} .mw-mainpage-card > a:first-child {

 position: absolute;
 inset: 0;
 z-index: 1;
 text-indent: -9999px;
 overflow: hidden;

} .mw-mainpage-card > a:first-child:focus-visible {

 outline: 2px solid var(--murim-gold);
 outline-offset: -2px;
 border-radius: var(--murim-radius);

}

/* Section */ .mw-mainpage-section {

 text-align: center;
 padding: 2.5em 2em;
 margin: 2em 0;
 border: 1px solid var(--murim-border);
 border-radius: var(--murim-radius);
 background: var(--murim-bg-card);

} .mw-mainpage-section h2 {

 color: var(--murim-gold);
 border: none;
 margin-top: 0;
 font-size: 1.5em;

} .mw-mainpage-actions {

 display: flex;
 justify-content: center;
 gap: 1em;
 margin-top: 1.5em;
 flex-wrap: wrap;

} .mw-mainpage-actions a {

 text-decoration: none;

} .mw-mainpage-btn {

 display: inline-block;
 padding: 0.75em 1.8em;
 border-radius: 6px;
 font-weight: 600;
 cursor: pointer;
 transition: all var(--murim-transition);

} .mw-mainpage-btn-primary {

 background: var(--murim-red);
 color: #fff;
 border: 1px solid var(--murim-red);

} .mw-mainpage-btn-primary:hover {

 background: var(--murim-red-hover);
 border-color: var(--murim-red-hover);
 color: #fff;

} .mw-mainpage-btn-secondary {

 border: 1px solid var(--murim-border);
 color: var(--murim-text);

} .mw-mainpage-btn-secondary:hover {

 border-color: var(--murim-red);
 color: var(--murim-gold);

}

/* Footer links */ .mw-mainpage-footer-links {

 display: flex;
 justify-content: center;
 gap: 2em;
 padding: 2em 0;
 margin-top: 2em;
 border-top: 1px solid var(--murim-border);
 flex-wrap: wrap;

} .mw-mainpage-footer-links a {

 color: var(--murim-text-subtle);
 text-decoration: none;
 font-size: 0.9em;
 transition: color var(--murim-transition);

} .mw-mainpage-footer-links a:hover {

 color: var(--murim-gold);

}

/* ===== Infoboxes ===== */ .wikitable.infobox {

 background: var(--murim-bg-card);
 border-color: var(--murim-border);
 border-radius: var(--murim-radius);
 overflow: hidden;
 border-collapse: separate;
 border-spacing: 0;
 box-shadow: 0 2px 8px rgba(0,0,0,0.3);

} .wikitable.infobox th, .wikitable.infobox td {

 border-color: var(--murim-border);
 padding: 10px 14px;
 font-size: 0.95em;

} .wikitable.infobox th {

 background: var(--murim-bg-surface);
 color: var(--murim-gold);
 font-weight: 600;
 text-align: left;
 width: 35%;
 white-space: nowrap;

} .wikitable.infobox td {

 background: var(--murim-bg-card);
 color: var(--murim-text);

} .wikitable.infobox tr:nth-child(even) td {

 background: rgba(255,255,255,0.02);

}

/* Category pages */

1. mw-pages h3 {

 color: var(--murim-gold);

}

/* ===== Search ===== */ .mw-search-createlink, .mw-search-result-data {

 color: var(--murim-text-subtle);

} .searchresults p {

 color: var(--murim-text);

}

/* ===== Navigation refinements ===== */ .skin-citizen .mw-indicators {

 color: var(--murim-text-subtle);

} .skin-citizen .page-actions-menu {

 border-bottom-color: var(--murim-border);

} .skin-citizen .mw-footer {

 border-top-color: var(--murim-border);

}

/* ===== TOC ===== */

1. toc {

 background: var(--murim-bg-surface);
 border-color: var(--murim-border);
 border-radius: var(--murim-radius);
 padding: 1em;

}

1. toc .toctitle h2 {

 color: var(--murim-gold);
 border: none;

}

1. toc a {

 color: var(--murim-text-subtle);

}

1. toc a:hover {

 color: var(--murim-gold);

}

/* ===== Make MP heading not show ===== */ .page-Main_Page #firstHeading {

 display: none;

}

/* ===== Page status indicators ===== */ .mw-body-header {

 border-bottom-color: var(--murim-border);

}

/* ===== Edit area ===== */ .skin-citizen .wikiEditor-ui .wikiEditor-ui-top {

 border-color: var(--murim-border);

} .skin-citizen .wikiEditor-ui .wikiEditor-ui-controls {

 background: var(--murim-bg-surface);

}

/* ===== User links ===== */ .skin-citizen .mw-portlet .mw-list-item a {

 color: var(--murim-text);

} .skin-citizen .mw-portlet .mw-list-item a:hover {

 color: var(--murim-gold);

}

/* ===== Portal/Sidebar ===== */ .skin-citizen .mw-portlet h3 {

 color: var(--murim-gold);
 border-bottom-color: var(--murim-border);

}

/* ===== Categories ===== */ .mw-normal-catlinks {

 background: var(--murim-bg-surface);
 border-color: var(--murim-border);
 border-radius: var(--murim-radius);

} .mw-normal-catlinks a {

 color: var(--murim-gold);

}