참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================
COASTLINE: BLACK ICE - Global CSS
========================================= */
/* 오른쪽 사이드바 */
.container-fluid.liberty-content { margin-right: 220px !important; }
#clbi-right-sidebar {
position: sticky;
top: 40px;
width: 200px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
flex-shrink: 0;
align-self: flex-start;
}
.clbi-right-box {
background: #0a0909;
border: 2px solid #854369;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 0 1px #1a1a1a, 0 6px 18px rgba(0,0,0,0.45);
}
.clbi-right-title {
padding: 10px 14px;
font-weight: 700;
font-size: 13px;
color: #E2E2E2;
border-bottom: 2px solid #854369;
background: linear-gradient(to bottom, #171114 0%, #0a0909 100%);
}
.clbi-right-content {
padding: 10px 14px;
color: #E2E2E2;
font-size: 12px;
line-height: 1.8;
}
.clbi-right-content a {
color: #E2E2E2 !important;
text-decoration: none;
display: block;
}
.clbi-right-content a:hover {
color: #d45aa2 !important;
}
#clbi-search-input {
width: 100%;
background: #171717;
border: 1px solid #854369;
color: #fff;
padding: 5px 8px;
border-radius: 4px;
font-size: 12px;
box-sizing: border-box;
margin-bottom: 6px;
}
#clbi-search-btn {
width: 100%;
background: #854369;
color: #fff;
border: none;
padding: 5px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
#clbi-search-btn:hover {
background: #b45c8f;
}
/* 유저 버튼 */
.clbi-user-btn {
display: block !important;
padding: 6px 10px !important;
margin-bottom: 4px !important;
border-radius: 4px !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #E2E2E2 !important;
text-decoration: none !important;
background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #111111 100%) !important;
border: 1px solid #333 !important;
border-left: 3px solid #854369 !important;
}
.clbi-user-btn:last-child { margin-bottom: 0 !important; }
.clbi-user-btn:hover {
background: linear-gradient(to bottom, #333 0%, #252525 50%, #1a1a1a 100%) !important;
border-color: #854369 !important;
color: #ffffff !important;
}
.clbi-user-btn-logout {
border-left: 3px solid #d46262 !important;
color: #d46262 !important;
}
.clbi-user-btn-logout:hover {
color: #fe5757 !important;
border-color: #d46262 !important;
}
/* 왼쪽 사이드바 */
#clbi-left-sidebar {
position: sticky;
top: 50px;
width: 200px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
flex-shrink: 0;
align-self: flex-start;
}
.clbi-left-box {
background: #0a0909;
border: 2px solid #854369;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 0 1px #1a1a1a, 0 6px 18px rgba(0,0,0,0.45);
}
.clbi-left-title {
padding: 10px 14px;
font-weight: 700;
font-size: 13px;
color: #E2E2E2;
border-bottom: 2px solid #854369;
background: linear-gradient(to bottom, #171114 0%, #0a0909 100%);
display: flex;
align-items: center;
gap: 6px;
}
.clbi-left-content {
padding: 10px 14px;
color: #E2E2E2;
font-size: 12px;
line-height: 1.8;
}
.clbi-lang-box {
padding: 8px !important;
text-align: center;
}
.clbi-lang-current {
display: block;
width: 100%;
padding: 8px 0;
border-radius: 4px;
font-size: 13px;
font-weight: 700;
background: linear-gradient(to bottom, #5a2040 0%, #3d1a2f 50%, #2e1222 100%);
color: #ffffff !important;
border: 1px solid #854369;
margin-bottom: 8px;
text-align: center;
}
.clbi-lang-link {
display: block;
width: 100%;
padding: 8px 0;
border-radius: 4px;
font-size: 13px;
font-weight: 700;
background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #111111 100%);
border: 1px solid #333;
text-align: center;
}
.clbi-lang-link a { color: #a0a0a0 !important; }
.clbi-lang-link:hover { border-color: #854369; }
.clbi-lang-link:hover a { color: #ffffff !important; }
.clbi-cat-box { padding: 8px !important; }
.clbi-cat-btn {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
margin-bottom: 6px;
border-radius: 4px;
background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #111111 100%);
border: 1px solid #333;
border-left: 3px solid #854369;
cursor: pointer;
}
.clbi-cat-btn:last-child { margin-bottom: 0; }
.clbi-cat-btn:hover { border-color: #854369; background: linear-gradient(to bottom, #333 0%, #252525 50%, #1a1a1a 100%); }
.clbi-cat-btn a { color: #E2E2E2 !important; text-decoration: none !important; width: 100%; }
.clbi-cat-text { display: flex; flex-direction: column; gap: 2px; }
.clbi-cat-label { font-size: 11px; font-weight: 700; color: #E2E2E2 !important; }
.clbi-cat-sub { font-size: 8px; color: #854369; font-weight: 700; letter-spacing: 0.5px; }
.clbi-cat-arrow { color: #854369; font-size: 10px; }
.clbi-link-box { padding: 8px !important; }
.clbi-link-box ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; gap: 6px !important; }
.clbi-link-box ul li { flex: 1 !important; margin: 0 !important; padding: 0 !important; }
.clbi-link-box ul li a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 10px 4px !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 700 !important;
background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #111111 100%) !important;
color: #a0a0a0 !important;
border: 1px solid #333 !important;
text-align: center !important;
}
.clbi-link-box ul li a:hover { border-color: #854369 !important; color: #ffffff !important; }
@media screen and (max-width: 1720px) {
#clbi-left-sidebar { display: none; }
}
/* 네비게이션 */
.Liberty .nav-wrapper { background: linear-gradient(to bottom, #171114 0%, #0a0909 100%) !important; border-bottom: 2px solid #854369 !important; }
/* 제목 테마 */
.mw-page-title-main {
border-radius: 5px !important;
padding: 5px !important;
border: 2px solid #B45C8F !important;
background: #171717 !important;
color: #ffffff !important;
display: inline-block !important;
}
/* 폰트 */
@font-face {
font-family: 'ThinRounded';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/ThinDungGeunMo.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}
body, .liberty-content-main, .nav-wrapper {
font-family: 'ThinRounded', sans-serif !important;
}
@font-face {
font-family: 'BoldRound';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/BoldDungGeunMo.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}
.mw-page-title-main, .mw-page-title-namespace,
.liberty-content-main h1, .liberty-content-main h2,
.liberty-content-main h3, .liberty-content-main h4,
.liberty-content-main h5, .liberty-content-main h6 {
font-family: 'BoldRound', sans-serif !important;
}
/* 더 넓은 본문 영역 */
.liberty-sidebar { display: none !important; }
.container-fluid.liberty-content { padding-bottom: 0 !important; }
.content-wrapper { max-width: 1720px !important; margin: 0 auto !important; padding: 16px !important; padding-top: 60px !important; display: flex !important; align-items: flex-start !important; gap: 0 !important; justify-content: center !important; }
.container-fluid.liberty-content { padding-bottom: 0 !important; margin: 0 16px !important; flex: none !important; width: 1250px !important; max-width: 1250px !important; min-width: 1250px !important; }
/* 배경 */
.WW-bg {
position: fixed;
overflow: hidden;
pointer-events: none;
z-index: -3;
background: #000;
}
.WW-bg::before {
content: "";
position: absolute;
top: -256px;
left: -256px;
width: calc(100% + 512px);
height: calc(100% + 512px);
background-image:
linear-gradient(rgba(85,10,63,0.75) 1px, transparent 1px),
linear-gradient(90deg, rgba(85,10,63,0.75) 1px, transparent 1px);
background-size: 72px 72px;
animation: WWGridLarge 18s linear infinite;
opacity: .9;
filter: drop-shadow(0 0 4px rgba(99,27,83,0.45));
}
@keyframes WWGridLarge {
from { transform: translate(0,0) }
to { transform: translate(72px,72px) }
}
/* 툴팁 */
.tooltip-template-trigger {
cursor: pointer;
color: #722f37;
user-select: none;
}
.tooltip-template {
display: none;
margin: 5px 0;
border: 1px solid #854369;
background: #1a1a1a;
color: #000;
padding: 12px;
border-radius: 3px;
text-align: left;
user-select: text;
position: absolute;
z-index: 5;
}
.tooltip-template-trigger:hover { text-decoration: underline; }
.tooltip-template-trigger:hover + .tooltip-template { display: block; user-select: none; }
.tooltip-template-trigger:active + .tooltip-template { display: block; user-select: none; }
.tooltip-template:hover { display: block; }
/* 제목 */
.mw-page-title-namespace { color: #437abc !important; }
.mw-page-title-separator { color: #e2e2e2 !important; }
.mw-page-title-main { color: #e2e2e2 !important; }
/* 헤더 */
.liberty-content-header { background-color: #0a0909 !important; border-bottom: 2px solid #854369 !important; border-top: 2px solid transparent !important; border-right: none !important; border-left: none !important; box-shadow: 0px 0px 3px #61304c; }
.subpages { color: #fdecec !important; }
.subpages a { color: #854369 !important; }
.subpages a:active { color: #854369 !important; }
/* 편집 버튼 */
.btn-secondary { color: #e2e2e2 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
.btn-secondary:hover { color: #d46262 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
.dropdown-item { color: #e2e2e2 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
.dropdown-item:hover { color: #d46262 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
.dropdown-menu { color: #e2e2e2 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
/* 분류 문서 */
.mw-category-generated { color: #e2e2e2 !important; }
.mw-category-generated a { color: #854369 !important; }
.CategoryTreeToggle { color: #854369 !important; }
.number-link { color: #854369 !important; }
/* 공지사항 */
.external { color: #33b733 !important; }
.external:before { color: #33b733 !important; }
.alert-info { background-color: #171717 !important; border: 2px solid #854369 !important; box-shadow: 0px 0px 3px #000000; }
/* 하단 푸터 */
.liberty-footer { background-color: #0a0909 !important; border-top: 2px solid #854369 !important; border-bottom: none !important; border-right: none !important; border-left: none !important; }
.footer-info-lastmod { color: #e2e2e2 !important; }
.footer-info-copyright { color: #e2e2e2 !important; }
.footer-places-privacy a { color: #c95197 !important; }
.footer-places-privacy a:active { color: #e2e2e2 !important; }
.footer-places-about a { color: #c95197 !important; }
.footer-places-about a:active { color: #e2e2e2 !important; }
.footer-places-disclaimers a { color: #c95197 !important; }
.footer-places-disclaimers a:active { color: #e2e2e2 !important; }
/* 넘겨주기 */
.mw-redirectedfrom { color: #854369 !important; }
.mw-redirectedfrom a { color: #854369 !important; }
/* 문단 보더 */
.Liberty .content-wrapper .liberty-content .liberty-content-main h1,
.Liberty .content-wrapper .liberty-content .liberty-content-main h2,
.Liberty .content-wrapper .liberty-content .liberty-content-main h3,
.Liberty .content-wrapper .liberty-content .liberty-content-main h4,
.Liberty .content-wrapper .liberty-content .liberty-content-main h5,
.Liberty .content-wrapper .liberty-content .liberty-content-main h6 {
margin-top: 1rem;
border-bottom: 1px solid #414141 !important;
margin-bottom: 0.6rem;
padding-bottom: 0.6rem;
overflow-wrap: break-word;
overflow: hidden;
}
/* 본문 */
.liberty-content { border: 2px solid #854369 !important; box-shadow: 0px 0px 3px #361427; border-radius: 0.35rem; }
.Liberty .content-wrapper .liberty-content .liberty-content-main,
.mw-datatable th, .mw-datatable tr:hover td, textarea,
div.mw-warning-with-logexcerpt, div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon { background: #171717; color: #ffffff; }
.Liberty .content-wrapper .liberty-content .liberty-content-main { border-left: none; border-right: none; }
.mw-references-columns { border-top: 1px solid #414141 !important; }
/* 링크 색상 */
a { color: #d45aa2 !important; }
a:hover { color: #fdecf9 !important; }
a:active { color: #b3337d !important; }
a.new { color: #ba0000 !important; }
a.new:hover { color: #fe5757 !important; }
a.new:active { color: #ba0000 !important; }
a.external { color: #33b733 !important; }
a.external:hover { color: #95ed95 !important; }
a.external:active { color: #33b733 !important; }
a.external:before { display: none !important; }
a.external { text-decoration: underline !important; }
/* CLBI 템플릿 링크 */
.CLBI-template a { color: #d45aa2 !important; }
.CLBI-template a:hover { color: #fdecf9 !important; }
.CLBI-template a:active { color: #b3337d !important; }
.CLBI-template a.new { color: #ba0000 !important; }
.CLBI-template a.new:hover { color: #fe5757 !important; }
.CLBI-template a.new:active { color: #ba0000 !important; }
.CLBI-template a.external { color: #33b733 !important; }
.CLBI-template a.external:hover { color: #95ed95 !important; }
.CLBI-template a.external:active { color: #33b733 !important; }
/* 목차 */
#mw-toc-heading { color: #ffffff; }
.toctogglelabel:after { color: #b45c8f !important; }
.tocnumber { color: #b45c8f !important; }
.toctogglespan { color: #b45c8f !important; }
.toctext { color: #e4e4e4 !important; }
.toctitle { background-color: #101010 !important; border: 1.5px solid #101010 !important; border-radius: 5px 5px 0 0; box-shadow: inset 1px 0 0 #1A1A1A, inset 0 -1px 0 #525252, 0 0 0 3px #1A1A1A, 0 0 0 5px #854369, 0 4px 12px #000; border-top-right-radius: 8px !important; border-top-left-radius: 8px !important; }
.toc ul { background-color: #1A1A1A !important; border: 1.5px solid #1A1A1A !important; box-shadow: inset 1px 0 0 #1A1A1A, inset 0 -1px 0 #525252, 0 0 0 3px #1A1A1A, 0 0 0 5px #854369, 0 4px 12px #000; border-bottom-right-radius: 8px !important; border-bottom-left-radius: 8px !important; }
.toc li { background-color: transparent !important; }
.toc ul ul { border: none !important; box-shadow: none !important; }
/* 분류 칸 */
.catlinks { background: #1A1A1A !important; border: 2px solid #1A1A1A !important; font-size: 9pt !important; box-shadow: inset 1px 0 0 #1A1A1A, inset 0 -1px 0 #000, 0 0 0 3px #1A1A1A, 0 0 0 5px #1A1A1A, 0 4px 12px #000; border-radius: 5px; padding: 0 !important; }
.catlinks ul { padding: 3px 7.5px !important; background-color: #1A1A1A !important; }
/* 편집 섹션 */
.mw-editsection { color: #b45c8f !important; float: right; font-weight: bold; }
/* 리스트 */
.liberty-content-main ul:not(#toc) { list-style-type: disc; list-style-image: none; }
.liberty-content-main ul ul:not(#toc) { list-style-type: circle; list-style-image: none; }
.liberty-content-main ul ul ul:not(#toc) { list-style-type: square; list-style-image: none; }
/* 반전 */
.invert { filter: invert(1); }
/* 외부링크 심볼 제거 */
a.external:before { display: none !important; }
/* 호버 애니메이션 */
.hover-gif-btn .gif-static,
.hover-gif-btn .gif-animated { transition: opacity 0.3s ease; }
.hover-gif-btn:not(:hover) .gif-animated { opacity: 0 !important; }
.hover-gif-btn:hover .gif-static { opacity: 0 !important; }
.hover-gif-btn:hover .gif-animated { opacity: 0.25 !important; }
.hover-gif-btn:hover .hover-flash-effect { animation: fast-flash 0.4s ease-out forwards; }
@keyframes fast-flash { 0% { opacity: 0.8; } 100% { opacity: 0; } }
.hover-new-img-layer { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1); opacity: 0; }
.hover-gif-btn:hover .hover-new-img-layer { transform: translateX(0); opacity: 0.25; }
/* drift 애니메이션 */
.drift-btn .drift-img-1 { opacity: 0.3; }
.drift-btn .drift-img-2 { opacity: 0; }
.drift-btn:hover .drift-img-1 { animation: driftLeftFade 12s linear infinite; }
.drift-btn:hover .drift-img-2 { animation: driftRightFade 12s linear infinite; }
@keyframes driftLeftFade {
0% { opacity: 0.3; transform: scale(1.15) translateX(15px); }
40% { opacity: 0.3; transform: scale(1.15) translateX(-15px); }
50% { opacity: 0; transform: scale(1.15) translateX(-20px); }
90% { opacity: 0; transform: scale(1.15) translateX(20px); }
100% { opacity: 0.3; transform: scale(1.15) translateX(15px); }
}
@keyframes driftRightFade {
0% { opacity: 0; transform: scale(1.15) translateX(-20px); }
40% { opacity: 0; transform: scale(1.15) translateX(-20px); }
50% { opacity: 0.3; transform: scale(1.15) translateX(-15px); }
90% { opacity: 0.3; transform: scale(1.15) translateX(15px); }
100% { opacity: 0; transform: scale(1.15) translateX(20px); }
}
/* 업로드 다이얼로그 */
.oo-ui-window-content, .oo-ui-dialog-content, .oo-ui-panelLayout {
background: #171717 !important;
color: #e2e2e2 !important;
}
.oo-ui-fieldLayout, .oo-ui-inputWidget input, .oo-ui-textInputWidget input, .oo-ui-selectWidget {
background: #171717 !important;
color: #e2e2e2 !important;
border: 1px solid #854369 !important;
}
.oo-ui-window-head, .oo-ui-window-foot {
background: #0a0909 !important;
border-color: #854369 !important;
}
.oo-ui-selectFileInputWidget, .oo-ui-selectFileWidget {
background: #171717 !important;
color: #e2e2e2 !important;
border: 1px solid #854369 !important;
}
.oo-ui-buttonElement-button {
background: #171717 !important;
color: #e2e2e2 !important;
border: 1px solid #854369 !important;
}
.oo-ui-buttonElement-button:hover {
background: #2a1a24 !important;
border-color: #b45c8f !important;
}
.oo-ui-processDialog-location {
background: #0a0909 !important;
color: #e2e2e2 !important;
border-bottom: 1px solid #854369 !important;
}
.mw-upload-bookletLayout-filePreview {
background: #171717 !important;
border: 1px solid #854369 !important;
}
.oo-ui-inputWidget-input {
background: #171717 !important;
color: #e2e2e2 !important;
border: 1px solid #854369 !important;
}
.oo-ui-textInputWidget-autosized {
background: #171717 !important;
color: #e2e2e2 !important;
}