미디어위키:Common.css

/* =========================================
   COASTLINE: BLACK ICE - Global CSS
   ========================================= */
/* 더 넓은 본문 영역 */
.container-fluid.liberty-content { max-width: 125% !important; }

/* 하단 광고 영역 제거 */
.container-fluid.liberty-content { padding-bottom: 0 !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); }
}