편집토론문서 역사

미디어위키:Layout.css: 두 판 사이의 차이

편집 요약 없음
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
/* =========================================
/* =========================================
COASTLINE: BLACK ICE - Layout
  COASTLINE: BLACK ICE - Theme
Core page shell / top nav / sidebars
  ========================================= */
========================================= */
/* screen-header 쓰는 문서만 푸커 숨기기 */
 
body:has(.screen-header) .liberty-footer {
/*
    display: none !important;
설계 목적
-----------------------------------------
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.
 
담당 범위:
- 기본 Liberty 네비 숨김
- 본문 컨테이너 폭과 배치
- 본문 컨테이너 외곽 테마
- 상단 네비바
- 좌우 사이드바
- 유저 박스와 사이드 링크 버튼
- 하단 푸터
 
현재 디자인 공식
-----------------------------------------
1. 전체 컨테이너는 각진 금속 패널로 처리한다.
2. radius는 사용하지 않는다.
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.
7. 공사선 모티프는 이 파일에서 쓰지 않는다.
  공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼
  "우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.
 
주의:
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.
*/
 
/* -----------------------------------------
0. 공통 색상 메모
----------------------------------------- */
 
/*
주요 표면:
#080808 : 깊은 내부 우물 / 화면 내부
#101010 : 기본 프레임
#141414 : 약간 밝은 패널 표면
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면
#1d1d1d : 타이틀바 / 활성 표면
#252525 : 호버 표면
 
주요 테두리:
#555555 : 상단광
#2b2b2b : 좌우 중간 테두리
#050505 : 하단암 / 깊은 구분선
#202020 : 내부 약한 구분선
*/
 
/* -----------------------------------------
1. Liberty 기본 요소 정리
----------------------------------------- */
 
#liberty-bottombtn {
display:none !important;
}
}
 
body:has(.screen-header) footer {
a[accesskey="t"] {
    display: none !important;
display:none !important;
}
}


.Liberty .nav-wrapper {
/* 색상 텍스트 틀 및 색상 범위 공통 처리 */
display:none !important;
.color-text {
    color: var(--text-color, #fff) !important;
}
}


.liberty-sidebar {
.color-text a,
display:none !important;
.color-text a:visited,
.color-text a.external {
    color: var(--text-color, #fff) !important;
}
}


/* -----------------------------------------
.color-text a:hover {
2. 전체 배치
    color: var(--text-color, #fff) !important;
----------------------------------------- */
 
:root {
--layout-shell-w:1880px;
--layout-side-w:230px;
--layout-gap:8px;
}
}


/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */
/* 선택 영역 */
 
::selection {
html {
    background: rgba(133, 67, 105, 0.50);
overflow-x:auto;
    color: #ffffff;
}
}


body {
::-moz-selection {
margin:0 !important;
    background: rgba(133, 67, 105, 0.50);
min-width:calc(var(--layout-shell-w) + 32px) !important;
    color: #ffffff;
}
}


#clbi-top-nav-wrap,
/* SVG + 테두리일 때 사각 테두리 제거, 형태 외곽선만 적용 */
.content-wrapper {
.mw-image-border:has(img[src$=".svg.png"]) {
width:var(--layout-shell-w) !important;
    border: none !important;
max-width:var(--layout-shell-w) !important;
    box-shadow: none !important;
min-width:var(--layout-shell-w) !important;
    background: transparent !important;
box-sizing:border-box !important;
    padding: 0 !important;
}
}


#clbi-top-nav-wrap {
.mw-image-border img[src$=".svg.png"] {
margin:0 auto !important;
    border: none !important;
padding:var(--layout-gap) 0 0 !important;
    box-shadow: none !important;
    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff);
}
}


.content-wrapper {
/* 폰트 */
margin:var(--layout-gap) auto 0 !important;
@font-face {
padding:0 0 16px 0 !important;
    font-family: 'Galmuri11';
display:grid !important;
    src: url('/fonts/Galmuri11.woff2') format('woff2');
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;
    font-weight: 400;
gap:var(--layout-gap) !important;
    font-display: block;
align-items:start !important;
justify-content:stretch !important;
}
}


#clbi-left-sidebar {
@font-face {
grid-column:1;
    font-family: 'Galmuri11';
grid-row:1;
    src: url('/fonts/Galmuri11-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: block;
}
}


.container-fluid.liberty-content {
@font-face {
grid-column:2;
    font-family: 'BoldRound';
grid-row:1;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/BoldDungGeunMo.woff2') format('woff2');
padding-bottom:0 !important;
    font-weight: normal;
margin:0 !important;
    font-display: swap;
flex:none !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
background:transparent !important;
}
}


#clbi-right-sidebar {
html body, html .liberty-content-main {
grid-column:3;
    font-family: 'Galmuri11', sans-serif !important;
grid-row:1;
    font-weight: 400 !important;
    font-size: 12px;
}
}


/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해
* { font-family: inherit !important; }
  사이드바 숨김 반응형 규칙은 제거한다. */


/* -----------------------------------------
.fa, .far, .fas, .fab, [class*="fa-"] {
3. 본문 컨테이너
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome' !important;
----------------------------------------- */
 
.liberty-content-main,
.Liberty .content-wrapper .liberty-content .liberty-content-main,
.liberty-content.content-tools-hidden .liberty-content-main {
background:#1d1d1d !important;
border:1px solid !important;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b !important;
border-radius:0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.72),
inset 1px 0 0 rgba(255,255,255,0.012),
inset -1px 0 0 rgba(0,0,0,0.38) !important;
overflow:hidden !important;
}
}


.liberty-content-main .mw-parser-output {
.mw-page-title-main, .mw-page-title-namespace,
background:transparent !important;
.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-content {
/* 배경 */
border:none !important;
html {
box-shadow:none !important;
    min-height: 100%;
border-radius:0 !important;
    overflow-y: scroll;
background:transparent !important;
    background: #000000 !important;
}
}


/* -----------------------------------------
body {
4. 본문 헤더
    min-height: 100%;
----------------------------------------- */
    margin: 0 !important;
 
    background: #000000 !important;
.liberty-content-header {
background:transparent !important;
box-shadow:none !important;
border:none !important;
display:flex !important;
align-items:flex-end !important;
justify-content:space-between !important;
padding:0 !important;
height:auto !important;
min-height:0 !important;
border-radius:0 !important;
}
 
.liberty-content-header .content-tools {
order:2 !important;
flex-shrink:0 !important;
padding-top:0 !important;
padding-right:0 !important;
}
}


.liberty-content-header .title {
/* 이전 JS 배경 레이어는 사용하지 않음 */
order:1 !important;
.WW-bg {
flex:1 !important;
    display: none !important;
display:flex !important;
align-items:flex-end !important;
margin:0 !important;
padding:0 !important;
}
}


.liberty-content-header h1 {
/* Canvas 기반 고정 하프톤 배경 */
margin:0 !important;
#site-halftone-bg {
padding:0 !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    background: #000000;
}
}


.liberty-content-header .contentSub {
/* 배경 캔버스보다 실제 위키 UI가 위에 놓이도록 함 */
display:none !important;
body > :not(#site-halftone-bg) {
    position: relative;
    z-index: 1;
}
}


/* -----------------------------------------
/* 관리자 툴은 기존 우선순위를 유지 */
5. 페이지 전환 피드백
#dev-tools-panel {
----------------------------------------- */
    position: fixed !important;
 
    z-index: 99998 !important;
body::after {
content:'';
position:fixed;
inset:0;
background:rgba(0,0,0,0);
transition:background 0.2s ease, opacity 0.2s ease;
opacity:0;
pointer-events:none;
z-index:99999;
}
}


body.page-loading::after {
/* OOUI/MediaWiki 팝업 계열 안전 보정 */
background:rgba(0,0,0,0.5);
.oo-ui-windowManager,
opacity:1;
.oo-ui-defaultOverlay,
.mw-notification-area,
.mw-notification-area-overlay {
    position: relative;
    z-index: 100000 !important;
}
}


/* -----------------------------------------
/* 스크롤 */
6. 좌우 사이드바 공통
html { overflow-y: scroll; }
----------------------------------------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0909; }
::-webkit-scrollbar-thumb { background: #854369; border-radius: 3px; }


#clbi-left-sidebar,
/* 제목 */
#clbi-right-sidebar {
.mw-page-title-main {
position:relative;
    border-radius: 5px 5px 0 0 !important;
width:230px;
    padding: 7px !important;
z-index:1000;
    border: 2px solid #854369 !important;
display:flex;
    border-bottom: none !important;
flex-direction:column;
    background: #171717 !important;
gap:8px;
    color: #e2e2e2 !important;
padding:0;
    display: inline-block !important;
flex-shrink:0;
    position: relative !important;
align-self:flex-start;
}
}


.clbi-left-box,
.mw-page-title-main::after {
.clbi-right-box {
    content: '';
background:#171717;
    position: absolute;
border:1px solid;
    bottom: -2px;
border-color:
    left: 0;
#555555
    right: 0;
#2b2b2b
    height: 2px;
#050505
    background: #171717;
#2b2b2b;
border-radius:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 6px 18px rgba(0,0,0,0.34);
}
}


.clbi-left-title,
.mw-page-title-namespace {
.clbi-right-title {
    padding: 7px 0 7px 7px !important;
min-height:28px;
    border: 2px solid #854369 !important;
padding:0 10px;
    border-right: none !important;
font-weight:700;
    border-bottom: none !important;
font-size:12px;
    border-radius: 5px 0 0 0 !important;
color:#e2e2e2;
    background: #171717 !important;
border-bottom:1px solid #050505;
    color: #e2e2e2 !important;
background:#101010;
    display: inline-block !important;
display:flex;
    vertical-align: bottom !important;
align-items:center;
    position: relative !important;
gap:6px;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(0,0,0,0.65);
}
}


.clbi-left-content,
.mw-page-title-namespace::after {
.clbi-right-content {
    content: '';
padding:8px;
    position: absolute;
color:#c8c8c8;
    bottom: -2px;
font-size:12px;
    left: 0;
line-height:1.65;
    right: 0;
background:#080808;
    height: 2px;
border-top:1px solid rgba(255,255,255,0.018);
    background: #171717;
}
}


.clbi-right-content a,
.mw-page-title-separator {
.clbi-left-content a {
    padding: 7px 0 !important;
color:#c8c8c8 !important;
    border-top: 2px solid #854369 !important;
text-decoration:none;
    border-bottom: none !important;
display:block;
    background: #171717 !important;
    color: #e2e2e2 !important;
    display: inline-block !important;
    vertical-align: bottom !important;
    position: relative !important;
}
}


.clbi-right-content a:not(.clbi-user-btn):hover,
.mw-page-title-separator::after {
.clbi-left-content a:not(.clbi-user-btn):hover {
    content: '';
color:#ffffff !important;
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #171717;
}
}


/* -----------------------------------------
.mw-page-title-namespace ~ .mw-page-title-main {
7. 유저 박스
    border-radius: 0 5px 0 0 !important;
----------------------------------------- */
    padding: 7px 7px 7px 0 !important;
 
    border-left: none !important;
.profile-card-box {
    vertical-align: bottom !important;
position:relative;
overflow:hidden;
background:#101010;
}
}


#clbi-user-avatar-wrap,
/* 특수 페이지 h1 */
#clbi-user-avatar-wrap.profile-identity-panel {
.liberty-content-header .title h1:not(:has(.mw-page-title-main)) {
position:relative;
    background: #171717 !important;
display:block;
    color: #e2e2e2 !important;
min-height:180px;
    border: 2px solid #854369 !important;
margin:0;
    border-bottom: none !important;
padding:0 8px;
    border-radius: 5px 5px 0 0 !important;
background:#1d1d1d;
    padding: 7px !important;
border:none;
    display: inline-block !important;
border-bottom:1px solid #202020;
    position: relative !important;
box-shadow:
    font-family: 'BoldRound', sans-serif !important;
inset 0 1px 0 rgba(255,255,255,0.050),
inset 0 -1px 0 rgba(0,0,0,0.70);
}
}


.profile-avatar-stage {
.liberty-content-header .title h1:not(:has(.mw-page-title-main))::after {
position:absolute;
    content: '';
left:50%;
    position: absolute;
top:50%;
    bottom: -2px;
transform:translate(-50%, -50%);
    left: 0;
width:104px;
    right: 0;
height:104px;
    height: 2px;
display:flex;
    background: #171717;
align-items:center;
justify-content:center;
box-sizing:border-box;
background:#141414;
border:1px solid;
border-color:
#2b2b2b
#202020
#101010
#202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(0,0,0,0.42);
}
}


.profile-avatar-stage::before {
/* 대문 제목 숨기기 */
content:"";
.mw-page-title-main.clbi-hide,
position:absolute;
.mw-page-title-main.clbi-hide::after {
left:7px;
    display: none !important;
right:7px;
top:7px;
height:1px;
background:rgba(255,255,255,0.026);
pointer-events:none;
}
}


.profile-avatar-stage::after {
/* 본문 */
content:"";
.Liberty .content-wrapper .liberty-content .liberty-content-main,
position:absolute;
.mw-datatable th, .mw-datatable tr:hover td, textarea,
inset:0;
div.mw-warning-with-logexcerpt, div.mw-lag-warn-high,
pointer-events:none;
div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon {
box-shadow:
    background: #171717;
inset 1px 0 0 rgba(255,255,255,0.006),
    color: #ffffff;
inset -1px 0 0 rgba(0,0,0,0.16);
}
}


#clbi-user-avatar {
.mw-references-columns {
position:relative;
    border-top: 1px solid #414141 !important;
z-index:1;
display:block;
width:90px;
height:90px;
object-fit:cover;
background:#070707;
border:1px solid #101010;
box-shadow:
0 0 0 1px rgba(255,255,255,0.012);
}
}


#clbi-user-name {
/* 문단 보더 */
max-width:100%;
.Liberty .content-wrapper .liberty-content .liberty-content-main h1,
margin-top:0;
.Liberty .content-wrapper .liberty-content .liberty-content-main h2,
color:#e2e2e2;
.Liberty .content-wrapper .liberty-content .liberty-content-main h3,
font-size:14px;
.Liberty .content-wrapper .liberty-content .liberty-content-main h4,
font-weight:700;
.Liberty .content-wrapper .liberty-content .liberty-content-main h5,
line-height:1.2;
.Liberty .content-wrapper .liberty-content .liberty-content-main h6 {
text-align:center;
    margin-top: 1rem;
white-space:nowrap;
    border-bottom: 1px solid #414141 !important;
overflow:hidden;
    margin-bottom: 0.6rem;
text-overflow:ellipsis;
    padding-bottom: 0.6rem;
text-shadow:1px 1px 0 #000;
    overflow-wrap: break-word;
    overflow: hidden;
}
}


#clbi-user-name-row,
/* 링크 색상 */
#clbi-user-name-row.profile-name-row {
a { color: #d45aa2 !important; }
position:absolute;
a:hover { color: #fdecf9 !important; }
left:8px;
a:active { color: #b3337d !important; }
right:8px;
a.new { color: #ba0000 !important; }
top:calc(50% + 52px);
a.new:hover { color: #fe5757 !important; }
bottom:0;
a.new:active { color: #ba0000 !important; }
width:auto;
a.external { color: #33b733 !important; text-decoration: underline !important; }
margin:0;
a.external:hover { color: #95ed95 !important; }
min-height:0;
a.external:active { color: #33b733 !important; }
line-height:1.2;
a.external:before { display: none !important; }
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}


#clbi-user-name-row.profile-name-row-guest {
/* CLBI 템플릿 링크 */
display:flex;
.CLBI-template a { color: #d45aa2 !important; }
align-items:center;
.CLBI-template a:hover { color: #fdecf9 !important; }
justify-content:center;
.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; }


#clbi-user-name-row #clbi-user-name {
/* 편집 버튼 */
display:inline-block;
.btn-secondary {
max-width:100%;
    color: #e2e2e2 !important;
margin-top:0;
    background-color: #171717 !important;
vertical-align:middle;
    border: 2px solid #854369 !important;
color:#e2e2e2 !important;
    border-bottom: none !important;
text-decoration:none !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 0 0 #854369 !important;
}
}


#clbi-user-name-row.profile-name-row-guest #clbi-user-name {
.btn-secondary:hover {
max-width:100%;
    color: #d46262 !important;
    background-color: #171717 !important;
    border: 2px solid #854369 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 0 0 #854369 !important;
}
}


.profile-svg {
.btn-group .btn:first-child { border-radius: 5px 0 0 0 !important; }
display:block;
.btn-group .dropdown-toggle { border-radius: 0 5px 0 0 !important; }
width:100%;
height:100%;
stroke:currentColor;
fill:none;
vertical-align:middle;
}


.clbi-svg-nav-icon {
/* 기본 목차: 본문에서는 숨김 */
display:flex !important;
.liberty-content-main #toc,
align-items:center;
.liberty-content-main .toc {
justify-content:center;
    display: none !important;
color:#e2e2e2;
line-height:1;
}
}


.clbi-svg-nav-icon .profile-svg {
/* 왼쪽 목차: 전체 내용 영역 */
width:22px;
#side-toc-box .toc-sidebar-content {
height:22px;
    padding: 10px 12px !important;
}
}


.sidebar-title-svg {
/* 왼쪽 목차: 새로 생성한 목차 목록 */
display:inline-flex;
#side-toc-box .generated-toc {
align-items:center;
    margin: 0 !important;
justify-content:center;
    padding: 0 !important;
width:16px;
    list-style: none !important;
height:16px;
    background: transparent !important;
flex:0 0 16px;
    border: none !important;
color:#e2e2e2 !important;
    box-shadow: none !important;
line-height:1;
}
}


.sidebar-title-svg .profile-svg {
/* 왼쪽 목차: 목록 항목 */
width:16px;
#side-toc-box .generated-toc li {
height:16px;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 1.5 !important;
}
}


.profile-action-icon {
#side-toc-box .generated-toc li:last-child {
position:relative;
    margin-bottom: 0 !important;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:15px;
height:15px;
color:#8a8a8a;
pointer-events:none;
line-height:1;
}
}


.profile-action-icon .profile-svg {
/* 왼쪽 목차: 링크 박스 */
width:15px;
#side-toc-box .generated-toc a {
height:15px;
    display: block !important;
    color: #E2E2E2 !important;
    text-decoration: none !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
}


.profile-action-box .clbi-user-btn:hover .profile-action-icon,
#side-toc-box .generated-toc a:hover {
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {
    background: rgba(133, 67, 105, 0.18) !important;
color:#ffffff;
    color: #ffffff !important;
}
}


.profile-action-box .clbi-user-btn-logout .profile-action-icon {
/* 왼쪽 목차: 긴 제목 감싸는 영역 */
color:#8b5f59;
#side-toc-box .toc-scroll-wrap {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}
}


.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {
/* 왼쪽 목차: 실제로 스크롤되는 긴 제목에만 오른쪽 페이드 적용 */
color:#e0a199;
#side-toc-box .toc-scroll-wrap.is-scrolling {
    mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
}
}


 
/* 왼쪽 목차: 실제 스크롤되는 텍스트 */
 
#side-toc-box .toc-scroll-text {
.news-title-icon.sidebar-title-svg {
    display: inline-block !important;
display:inline-flex;
    white-space: nowrap !important;
align-items:center;
    max-width: none !important;
justify-content:center;
width:16px;
height:16px;
line-height:1;
color:#e2e2e2 !important;
flex:0 0 16px;
vertical-align:middle;
}
}


.news-title-icon.sidebar-title-svg .profile-svg {
/* 왼쪽 목차: h2 항목 */
width:16px;
#side-toc-box .toc-level-2 .toc-scroll-text {
height:16px;
    font-size: 12px !important;
display:block;
    font-weight: 700 !important;
    color: #E2E2E2 !important;
}
}


.profile-quick-actions {
/* 왼쪽 목차: h3 항목 */
position:relative;
#side-toc-box .toc-level-3 {
display:grid;
    padding-left: 12px !important;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:4px;
margin:0 0 8px;
overflow:visible;
z-index:2;
}
}


.profile-quick-btn {
#side-toc-box .toc-level-3 .toc-scroll-text {
position:relative;
    font-size: 11px !important;
display:flex;
    font-weight: 400 !important;
align-items:center;
    color: #b8b8b8 !important;
justify-content:center;
width:100%;
aspect-ratio:1 / 1;
min-width:0;
min-height:0;
padding:0;
box-sizing:border-box;
background:
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);
border:1px solid;
border-color:
#333333
#202020
#181818
#202020;
color:#c8c8c8;
cursor:pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040);
text-shadow:1px 1px 0 #000;
}
}


.profile-quick-btn:hover {
#side-toc-box .toc-level-3 a:hover .toc-scroll-text {
background:
    color: #ffffff !important;
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);
border-color:
#444444
#333333
#202020
#333333;
color:#ffffff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
0 0 0 1px rgba(255,255,255,0.018);
}
}


.profile-quick-btn:active {
/* 왼쪽 목차: 문서 스크롤 중에도 목차가 화면 안에 남도록 처리 */
background:
#clbi-left-sidebar {
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);
    align-self: stretch !important;
border-color:
#050505
#202020
#333333
#202020;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,0.82),
inset -1px -1px 0 rgba(255,255,255,0.035);
}
 
.profile-quick-icon {
display:flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
line-height:1;
color:currentColor;
pointer-events:none;
}
 
.profile-quick-icon .profile-svg {
display:block;
width:22px;
height:22px;
}
 
.profile-quick-tip {
position:absolute;
left:50%;
top:calc(100% + 4px);
z-index:40;
min-width:42px;
padding:3px 6px 4px;
box-sizing:border-box;
background:#101010;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
color:#e2e2e2;
font-size:9px;
font-weight:700;
line-height:1;
white-space:nowrap;
text-align:center;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 4px 10px rgba(0,0,0,0.44);
visibility:hidden;
opacity:0;
transform:translate(-50%, -1px);
pointer-events:none;
}
 
.profile-quick-btn:hover .profile-quick-tip,
.profile-quick-btn:focus-visible .profile-quick-tip {
visibility:visible;
opacity:1;
transform:translate(-50%, 0);
}
 
/* -----------------------------------------
9. 유저 버튼
----------------------------------------- */
 
.clbi-user-btn-grid {
display:grid;
grid-template-columns:1fr;
gap:4px;
}
 
.profile-divider {
height:1px;
margin:9px 7px;
background:#202020;
box-shadow:
0 1px 0 rgba(255,255,255,0.018);
}
 
.profile-action-box {
position:relative;
margin:0 7px 7px;
padding:3px !important;
overflow:visible;
background:#080808;
border:1px solid;
border-color:
#333333
#202020
#050505
#202020;
box-sizing:border-box;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.58);
}
 
.profile-action-box .clbi-user-btn {
position:relative;
display:grid !important;
grid-template-columns:15px minmax(0,1fr) 12px !important;
column-gap:7px !important;
align-items:center !important;
justify-content:stretch !important;
width:100% !important;
min-height:26px !important;
height:26px !important;
margin:0 0 4px !important;
padding:0 7px !important;
box-sizing:border-box !important;
background:
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;
border:1px solid !important;
border-color:
#333333
#202020
#181818
#202020 !important;
color:#c8c8c8 !important;
font-size:11px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:left !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040) !important;
overflow:hidden !important;
}
 
.profile-action-box .clbi-user-btn:last-child {
margin-bottom:0 !important;
}
 
.profile-action-label {
display:flex;
align-items:center;
min-width:0;
height:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
line-height:1;
}
 
.profile-action-arrow {
position:relative;
top:0;
display:inline-flex;
align-items:center;
justify-content:center;
justify-self:end;
width:12px;
height:12px;
color:#8a8a8a;
font-size:11px;
line-height:1;
pointer-events:none;
}
 
.profile-action-box .clbi-user-btn:hover {
background:
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;
border-color:
#444444
#333333
#202020
#333333 !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
0 0 0 1px rgba(255,255,255,0.018) !important;
}
 
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {
color:#ffffff;
}
 
.profile-action-box .clbi-user-btn:active {
background:
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;
border-color:
#050505
#202020
#333333
#202020 !important;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,0.82),
inset -1px -1px 0 rgba(255,255,255,0.035) !important;
}
 
.profile-action-box .clbi-user-btn-logout {
color:#c88a80 !important;
border-color:
#3f3f3f
#2a2020
#181010
#2a2020 !important;
}
 
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {
color:#8b5f59;
}
 
.profile-action-box .clbi-user-btn-logout:hover {
background:
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;
border-color:
#6a3933
#3f2623
#181010
#3f2623 !important;
color:#e0a199 !important;
}
 
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {
color:#e0a199;
}
 
.profile-action-box .clbi-user-btn.clbi-user-btn-active {
background:
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;
border-color:
#555555
#333333
#202020
#333333 !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.070),
inset 0 -1px 0 rgba(0,0,0,0.62),
0 0 0 1px rgba(255,255,255,0.022) !important;
}
 
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {
color:#ffffff;
}
 
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */
.clbi-user-btn {
display:flex !important;
align-items:center !important;
justify-content:center !important;
height:24px !important;
padding:0 6px !important;
margin:0 !important;
border-radius:0 !important;
font-size:11px !important;
font-weight:700 !important;
line-height:1 !important;
color:#c8c8c8 !important;
text-decoration:none !important;
text-align:center !important;
background:#141414 !important;
border:1px solid #202020 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(0,0,0,0.65) !important;
text-shadow:1px 1px 0 #000 !important;
box-sizing:border-box !important;
}
 
.clbi-user-btn:hover {
background:#202020 !important;
border-color:#333333 !important;
color:#ffffff !important;
}
 
.clbi-user-btn-logout {
border-color:#3f2623 !important;
color:#c88a80 !important;
}
 
.clbi-user-btn-logout:hover {
background:#1b1110 !important;
border-color:#6a3933 !important;
color:#e0a199 !important;
}
}


.clbi-user-btn.clbi-user-btn-active {
/* 왼쪽 목차: 목차 박스만 화면 상단에 고정되듯 따라오게 함 */
background:#242424 !important;
#side-toc-box {
border-color:#555555 !important;
    position: sticky !important;
color:#ffffff !important;
    top: 10px !important;
box-shadow:
    z-index: 1001;
inset 0 1px 0 rgba(255,255,255,0.055),
    max-height: calc(100vh - 40px);
inset 0 -1px 0 rgba(0,0,0,0.75) !important;
    overflow: hidden;
}
}


/* -----------------------------------------
/* 왼쪽 목차: 항목이 많을 때 목차 내부만 스크롤되게 함 */
9.5 왼쪽 언어 박스
----------------------------------------- */
 
.clbi-left-lang-box {
position:relative;
min-height:0;
z-index:1002;
overflow:hidden;
}
 
.clbi-left-lang-box > .clbi-left-title {
min-height:30px;
background:#1d1d1d;
border-bottom:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.050),
inset 0 -1px 0 rgba(0,0,0,0.70);
}
 
#clbi-title-left-language {
display:inline-flex;
align-items:center;
height:100%;
color:#e2e2e2;
font-size:12px;
font-weight:700;
line-height:1;
letter-spacing:0;
}
 
.clbi-left-language-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
font-size:13px;
line-height:1;
color:#e2e2e2 !important;
flex:0 0 16px;
}
 
.clbi-left-language-icon .profile-svg {
display:block;
width:16px;
height:16px;
stroke:currentColor;
}
 
.sidebar-lang-box {
position:relative;
padding:4px 7px !important;
box-sizing:border-box;
background:#101010;
border-top:1px solid rgba(255,255,255,0.018);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
inset 0 -1px 0 rgba(0,0,0,0.62);
overflow:hidden;
}
 
.sidebar-lang-selector,
.sidebar-lang-dial {
position:relative;
width:100%;
padding:0;
box-sizing:border-box;
user-select:none;
touch-action:pan-y;
outline:none;
}
 
.sidebar-lang-dial-stage {
position:relative;
width:100%;
height:146px;
margin:0;
box-sizing:border-box;
overflow:hidden;
background:#1d1d1d;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
border-radius:0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040);
}
 
.sidebar-lang-fan {
position:absolute;
left:50%;
top:2px;
z-index:2;
width:202px;
height:150px;
transform:translateX(-50%);
overflow:visible;
touch-action:pan-y;
cursor:grab;
pointer-events:auto;
}
 
.sidebar-lang-fan:active,
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {
cursor:grabbing;
}
 
.sidebar-lang-fan-svg {
display:block;
width:202px;
height:150px;
overflow:visible;
shape-rendering:geometricPrecision;
}
 
.sidebar-lang-wheel-rotor {
transform-origin:101px 119px;
transform-box:view-box;
will-change:transform;
transition:none;
}
 
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {
transition:transform 210ms cubic-bezier(.17,.84,.22,1);
}
 
.sidebar-lang-shell {
fill:#080808;
stroke:#202020;
stroke-width:1;
}
 
.sidebar-lang-inner-shadow-soft,
.sidebar-lang-inner-shadow-hard {
fill:none;
stroke:#000000;
pointer-events:none;
clip-path:url(#clbi-sidebar-language-fan-clip);
}
 
.sidebar-lang-inner-shadow-soft {
stroke-width:16;
opacity:.34;
filter:url(#clbi-sidebar-language-shadow-blur);
}
 
.sidebar-lang-inner-shadow-hard {
stroke-width:6;
opacity:.22;
}
 
.sidebar-lang-sector-group {
pointer-events:auto;
cursor:pointer;
}
 
.sidebar-lang-sector {
fill:#101010;
stroke:#181818;
stroke-width:1;
vector-effect:non-scaling-stroke;
cursor:pointer;
transition:none;
}
 
.sidebar-lang-sector-group:hover .sidebar-lang-sector,
.sidebar-lang-sector:hover,
.sidebar-lang-sector.is-center,
.sidebar-lang-sector.is-far {
fill:#101010;
stroke:#181818;
}
 
.sidebar-lang-sector-label {
pointer-events:none;
text-anchor:middle;
dominant-baseline:middle;
paint-order:stroke;
stroke:#050505;
stroke-width:2px;
stroke-linejoin:round;
font-size:9px !important;
font-weight:700 !important;
letter-spacing:.15px;
fill:#c8c8c8;
transition:none !important;
}
 
.sidebar-lang-sector-name {
display:none;
}
 
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {
fill:inherit;
}
 
.sidebar-lang-fixed-depth,
.sidebar-lang-fixed-focus,
.sidebar-lang-rim {
pointer-events:none;
clip-path:url(#clbi-sidebar-language-fan-clip);
}
 
.sidebar-lang-fixed-depth {
fill:url(#clbi-sidebar-language-fixed-depth);
opacity:1;
}
 
.sidebar-lang-fixed-focus {
fill:rgba(255,255,255,0.020);
stroke:rgba(255,255,255,0.020);
stroke-width:1;
}
 
.sidebar-lang-rim {
fill:none;
stroke:#202020;
stroke-width:1;
}
 
.sidebar-lang-fixed-pointer {
pointer-events:none;
clip-path:url(#clbi-sidebar-language-fan-clip);
}
 
.sidebar-lang-pointer-line {
stroke:#b94a3c;
stroke-width:2;
stroke-linecap:square;
opacity:.94;
vector-effect:non-scaling-stroke;
}
 
.sidebar-lang-pointer-triangle {
fill:#b94a3c;
stroke:#050505;
stroke-width:1;
stroke-linejoin:miter;
vector-effect:non-scaling-stroke;
}
 
.sidebar-lang-apply {
position:absolute;
left:50%;
top:96.23px;
z-index:5;
width:45.54px;
height:45.54px;
margin:0;
padding:0;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:50%;
border:1px solid #2b2b2b;
background:linear-gradient(to bottom, #141414 0%, #101010 52%, #0c0c0c 100%);
color:#e2e2e2;
cursor:pointer;
text-align:center;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:none;
transition:none !important;
}
 
.sidebar-lang-apply:hover {
border-color:#2b2b2b;
background:linear-gradient(to bottom, #202020 0%, #171717 52%, #101010 100%);
color:#ffffff;
}
 
.sidebar-lang-apply:active {
transform:translateX(-50%) translateY(1px);
border-color:#2b2b2b;
background:linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #1a1a1a 100%);
}
 
.sidebar-lang-apply.is-disabled,
.sidebar-lang-apply.is-disabled:hover,
.sidebar-lang-apply.is-disabled:active {
transform:translateX(-50%);
border-color:#2b2b2b;
background:linear-gradient(to bottom, #141414 0%, #101010 52%, #0c0c0c 100%);
color:#626262;
cursor:default;
opacity:1;
box-shadow:none;
}
 
.sidebar-lang-apply-mark {
display:block;
font-size:19px;
font-weight:700;
line-height:1;
}
 
.sidebar-lang-status-panel {
position:absolute;
bottom:4.23px;
width:75px;
height:26px;
z-index:4;
display:flex;
align-items:center;
justify-content:center;
padding:0 5px;
box-sizing:border-box;
overflow:hidden;
background:#080808;
border:1px solid #202020;
color:#c8c8c8;
text-align:center;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55);
pointer-events:none;
}
 
.sidebar-lang-status-left {
left:5px;
}
 
.sidebar-lang-status-right {
right:5px;
}
 
.sidebar-lang-status-value {
display:block;
width:100%;
min-width:0;
color:#f0f0f0;
font-family:inherit !important;
font-size:9px;
font-weight:700;
line-height:1;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
 
.sidebar-lang-status-right .sidebar-lang-status-value {
font-size:8px;
letter-spacing:.12px;
}
 
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {
color:#f0f0f0;
}
 
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {
color:#c8c8c8;
}
 
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {
color:#8a8a8a;
}
 
 
/* -----------------------------------------
10. 왼쪽 뉴스 박스
----------------------------------------- */
 
.clbi-left-news-box {
min-height:0;
}
 
.clbi-left-news-box > .clbi-left-title {
min-height:30px;
background:#1d1d1d;
border-bottom:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.050),
inset 0 -1px 0 rgba(0,0,0,0.70);
}
 
#clbi-title-left-news {
display:inline-flex;
align-items:center;
height:100%;
color:#e2e2e2;
font-size:12px;
font-weight:700;
line-height:1;
letter-spacing:0;
}
 
.news-title-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
font-size:13px;
line-height:1;
color:#e2e2e2 !important;
flex:0 0 16px;
}
 
.clbi-news-box {
padding:7px !important;
box-sizing:border-box;
background:#101010;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
inset 0 -1px 0 rgba(0,0,0,0.62);
}
 
.news-feed-title {
position:relative;
display:flex;
align-items:center;
height:22px;
margin:0 0 5px 0;
padding:0 7px 0 17px;
box-sizing:border-box;
background:#1d1d1d;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#c8c8c8;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:0.55px;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040);
}
 
.news-feed-title::before {
content:"";
position:absolute;
left:7px;
top:calc(50% + 1px);
width:4px;
height:8px;
transform:translateY(-50%);
background:#8a8a8a;
box-shadow:
0 0 0 1px #050505,
inset 0 1px 0 rgba(255,255,255,0.20);
opacity:0.85;
}
 
#clbi-left-news-changelog-title {
margin-top:0;
}
 
#clbi-left-news-recent-title {
margin-top:9px;
}
 
.news-left-changelog-feed,
.news-left-recent-feed {
background:#080808;
border:1px solid;
border-color:
#333333
#202020
#050505
#202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.58);
box-sizing:border-box;
}
 
.news-left-changelog-feed {
padding:3px;
}
 
.news-left-recent-feed {
padding:3px;
color:#9a9a9a;
font-size:11px;
line-height:1.55;
}
 
.news-divider {
height:1px;
margin:9px 0;
background:#202020;
box-shadow:
0 1px 0 rgba(255,255,255,0.018);
}
 
.news-post-item,
.news-recent-item {
position:relative;
display:grid !important;
align-items:center;
gap:6px;
margin:0 0 4px;
box-sizing:border-box;
background:
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);
border:1px solid;
border-color:
#333333
#202020
#181818
#202020;
color:#c8c8c8 !important;
overflow:hidden;
text-decoration:none !important;
cursor:pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040);
}
 
.news-post-item {
grid-template-columns:minmax(0,1fr) auto;
min-height:26px;
padding:0 6px;
}
 
.news-recent-item {
grid-template-columns:28px minmax(0,1fr) auto;
min-height:36px;
padding:4px 6px 4px 5px;
}
 
.news-post-item:last-child,
.news-recent-item:last-child {
margin-bottom:0;
}
 
.news-post-item:hover,
.news-recent-item:hover {
background:
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);
border-color:
#444444
#333333
#202020
#333333;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
0 0 0 1px rgba(255,255,255,0.018);
}
 
.news-post-item:active,
.news-recent-item:active {
background:
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);
border-color:
#050505
#202020
#333333
#202020;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,0.82),
inset -1px -1px 0 rgba(255,255,255,0.035);
}
 
.news-recent-avatar {
display:block;
width:24px;
height:24px;
object-fit:cover;
object-position:center;
background:#070707;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
0 0 0 1px rgba(0,0,0,0.45);
box-sizing:border-box;
}
 
.news-recent-item:hover .news-recent-avatar {
border-color:
#666666
#333333
#050505
#333333;
}
 
.news-recent-main {
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:1px;
}
 
.news-post-title-wrap,
.news-recent-title-wrap {
min-width:0;
overflow:hidden;
white-space:nowrap;
mask-image:linear-gradient(to right, black 88%, transparent 100%);
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);
}
 
.news-post-title-wrap {
display:flex;
align-items:center;
}
 
.news-post-title,
.news-recent-title {
display:inline-block;
max-width:none;
overflow:visible;
color:#e2e2e2 !important;
font-size:12px;
font-weight:700;
line-height:1.18;
white-space:nowrap;
text-decoration:none !important;
text-shadow:
1px 1px 0 #000,
0 0 4px rgba(255,255,255,0.060);
}
 
.news-post-item:hover .news-post-title,
.news-recent-item:hover .news-recent-title {
color:#ffffff !important;
}
 
.news-post-arrow {
display:inline-flex;
align-items:center;
justify-content:center;
width:12px;
height:12px;
margin-left:5px;
color:#8a8a8a;
font-size:11px;
line-height:1;
vertical-align:-1px;
flex:0 0 auto;
}
 
.news-post-item:hover .news-post-arrow {
color:#ffffff;
}
 
.news-recent-meta {
display:flex;
align-items:center;
min-width:0;
height:10px;
line-height:1;
}
 
.news-recent-user {
display:block !important;
min-width:0;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#7a7a7a !important;
font-size:8.5px;
font-weight:700;
line-height:1;
text-decoration:none !important;
text-shadow:1px 1px 0 #000;
}
 
.news-recent-item:hover .news-recent-user {
color:#b0b0b0 !important;
}
 
.news-post-tag,
.news-recent-time {
display:inline-flex;
align-items:center;
justify-content:center;
height:16px;
min-width:34px;
padding:0 4px;
box-sizing:border-box;
background:#080808;
border:1px solid #202020;
color:#8a8a8a !important;
font-size:9px;
font-weight:700;
line-height:1;
white-space:nowrap;
text-shadow:1px 1px 0 #000;
}
 
.news-post-item:hover .news-post-tag,
.news-recent-item:hover .news-recent-time {
background:#101010;
border-color:#333333;
color:#c8c8c8 !important;
}
 
.news-post-item *,
.news-recent-item * {
pointer-events:none;
}
 
/* -----------------------------------------
12. 왼쪽 목차
----------------------------------------- */
 
#side-toc-box .toc-sidebar-content {
#side-toc-box .toc-sidebar-content {
padding:6px 8px 8px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overflow-x: hidden;
}
}


.generated-toc {
/* 분류 칸 */
margin:0 !important;
.catlinks {
padding:0 !important;
    background: #1A1A1A !important;
list-style:none !important;
    border: 2px solid #854369 !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    box-shadow: 0px 0px 3px #361427 !important;
    color: #e2e2e2 !important;
    padding: 2px 10px !important;
    margin: -7px auto 10px auto !important;
    width: calc(100% + 8px) !important;
    position: relative !important;
    left: -3px !important;
}
}


.generated-toc li {
.catlinks ul {
margin:0 !important;
    padding: 0 !important;
padding:0 !important;
    margin: 0 !important;
    background-color: #1A1A1A !important;
}
}


.generated-toc a {
.catlinks a {
display:block !important;
    color: #854369 !important;
height:23px;
line-height:23px;
padding:0 2px;
border-bottom:1px solid #202020;
color:#c8c8c8 !important;
font-size:11px;
font-weight:700;
text-decoration:none !important;
text-shadow:1px 1px 0 #000;
box-sizing:border-box;
overflow:hidden;
}
}


.generated-toc li:first-child a {
.catlinks a:hover {
border-top:1px solid #202020;
    color: #d45aa2 !important;
}
}


.generated-toc a:hover {
/* 분류 문서 */
background:#101010;
.mw-category-generated { color: #e2e2e2 !important; }
color:#ffffff !important;
.mw-category-generated a { color: #854369 !important; }
}
.CategoryTreeToggle { color: #854369 !important; }
.number-link { color: #854369 !important; }


.generated-toc .toc-level-3 a {
/* 편집 섹션 */
padding-left:12px;
.mw-editsection {
font-weight:600;
    color: #b45c8f !important;
color:#9f9f9f !important;
    float: right;
    font-weight: bold;
}
}


.toc-scroll-wrap {
/* 넘겨주기 */
display:block;
.mw-redirectedfrom { color: #854369 !important; }
position:relative;
.mw-redirectedfrom a { color: #854369 !important; }
overflow:hidden;
white-space:nowrap;
}


.toc-scroll-text {
/* 서브페이지 */
display:inline-block;
.subpages { color: #fdecec !important; }
white-space:nowrap;
.subpages a { color: #854369 !important; }
}
.subpages a:active { color: #854369 !important; }


.toc-scroll-wrap.is-scrolling::after {
/* 공지사항 */
content:"";
.alert-info {
position:absolute;
    background-color: #171717 !important;
top:0;
    border: 2px solid #854369 !important;
right:0;
    box-shadow: 0px 0px 3px #000000;
bottom:0;
width:18px;
pointer-events:none;
background:linear-gradient(to right, transparent, #080808);
}
}


/* -----------------------------------------
/* 푸터 */
14. 하단 푸터
.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; }


footer,
/* 리스트 */
.liberty-footer {
.liberty-content-main ul:not(#toc) {
display:none !important;
    list-style-type: disc;
    list-style-image: none;
}
}


/* =========================================
.liberty-content-main ul ul:not(#toc) {
15. 상단 네비게이션 바
    list-style-type: circle;
========================================= */
    list-style-image: none;
 
/*
상단 네비바 공식
-----------------------------------------
- 전체는 하나의 각진 조작 패널이다.
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.
- radius는 사용하지 않는다.
- 보라색 테마를 쓰지 않는다.
- 검색창도 같은 금속 인풋으로 정리한다.
*/
 
#clbi-top-nav-wrap {
width:var(--layout-shell-w) !important;
max-width:var(--layout-shell-w) !important;
min-width:var(--layout-shell-w) !important;
margin:0 auto !important;
padding:var(--layout-gap) 0 0 !important;
box-sizing:border-box !important;
}
}


#clbi-top-nav {
.liberty-content-main ul ul ul:not(#toc) {
position:relative;
    list-style-type: square;
width:100%;
    list-style-image: none;
background:#171717;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
border-radius:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 6px 18px rgba(0,0,0,0.34);
margin-bottom:0;
}
}


#clbi-top-nav-main {
/* 반전 */
position:relative;
.invert {
display:flex;
    filter: invert(1);
align-items:stretch;
width:100%;
min-height:55px;
}
}


#clbi-top-nav-logo {
/* 편집 권한에 따라 우측 모서리 처리 */
display:flex;
.liberty-content.content-tools-hidden .liberty-content-main {
align-items:center;
    border-top-right-radius: 5px !important;
padding:0 16px;
flex-shrink:0;
}
 
#clbi-top-nav-logo img {
height:64px;
width:auto;
display:block;
}
 
/* -----------------------------------------
16. 상단 네비 탭
----------------------------------------- */
 
#clbi-top-nav-tabs {
display:flex;
align-items:stretch;
flex:1;
flex-shrink:0;
}
 
.clbi-top-nav-item {
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:120px;
min-height:55px;
flex-shrink:0;
padding:0;
background:transparent;
border-left:1px solid transparent;
border-right:1px solid #202020;
cursor:pointer;
transition:
background 0.12s,
border-color 0.12s,
color 0.12s,
box-shadow 0.12s;
user-select:none;
white-space:nowrap;
text-decoration:none !important;
color:#e2e2e2 !important;
overflow:hidden;
box-sizing:border-box;
text-shadow:1px 1px 0 #000;
}
 
.clbi-top-nav-item:hover {
min-height:55px;
background:#1d1d1d;
border-left-color:#333333;
border-right-color:#333333;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.045),
inset 0 -1px 0 rgba(0,0,0,0.65);
}
 
.clbi-top-nav-item.clbi-tnav-active {
background:#242424;
border-left-color:#444444;
border-right-color:#444444;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.050),
inset 0 -1px 0 rgba(0,0,0,0.70);
}
 
.clbi-tnav-icon {
display:block;
width:22px;
height:22px;
object-fit:contain;
flex:0 0 22px;
image-rendering:pixelated;
opacity:0.88;
align-self:center;
filter:grayscale(0.18) contrast(1.05);
}
 
.clbi-top-nav-item:hover .clbi-tnav-icon,
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {
opacity:1;
filter:grayscale(0) contrast(1.08);
}
 
/* -----------------------------------------
17. 언어 버튼
----------------------------------------- */
 
.clbi-tnav-lang {
flex-direction:column;
justify-content:center;
align-items:center;
width:54px;
min-height:55px;
gap:3px;
padding:10px 0;
border-left:1px solid transparent;
}
 
.clbi-tnav-lang-code {
font-size:11px;
font-weight:700;
color:#e2e2e2;
letter-spacing:0;
}
 
.clbi-tnav-lang .clbi-tnav-arrow {
font-size:9px;
color:#8a8a8a;
width:8px;
text-align:center;
flex-shrink:0;
}
 
.clbi-tnav-lang:hover {
border-left-color:transparent !important;
}
 
.clbi-tnav-lang.clbi-tnav-active {
border-left-color:transparent !important;
}
 
.clbi-tnav-lang-bottom {
display:flex;
align-items:center;
justify-content:center;
gap:3px;
line-height:1;
width:100%;
}
 
.clbi-tnav-label {
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
height:22px;
line-height:22px;
font-size:13px;
font-weight:700;
}
 
.clbi-tnav-arrow {
position:relative;
z-index:1;
font-size:12px;
color:#8a8a8a;
transition:color 0.12s;
}
 
.clbi-top-nav-item:hover .clbi-tnav-arrow,
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {
color:#ffffff;
}
 
/* -----------------------------------------
18. 상단 검색
----------------------------------------- */
 
#clbi-top-nav-search {
position:absolute;
left:50%;
top:0;
bottom:0;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}
 
#clbi-top-search-input {
width:240px;
height:26px;
background:#070707;
border:1px solid #202020;
color:#e2e2e2;
padding:0 10px;
border-radius:0;
font-size:11px;
box-sizing:border-box;
outline:none;
pointer-events:all;
transition:border-color 0.12s, width 0.2s, background 0.12s;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55);
}
 
#clbi-top-search-input:focus {
border-color:#555555;
background:#0c0c0c;
width:320px;
}
 
#clbi-top-nav-right {
margin-left:auto;
display:flex;
align-items:stretch;
border-left:1px solid #202020;
}
 
/* -----------------------------------------
19. 세계관 펼침 영역
----------------------------------------- */
 
#clbi-sub-worldbuilding {
box-sizing:border-box;
width:100%;
height:0;
overflow:hidden;
border-top:0 solid #050505;
background:#080808;
transition:
height 180ms ease,
border-top-width 0ms linear 180ms;
}
 
#clbi-sub-worldbuilding.worldbuilding-open {
height:34px;
border-top-width:1px;
transition:
height 180ms ease,
border-top-width 0ms linear 0ms;
}
 
#clbi-sub-worldbuilding-inner {
height:34px;
overflow:hidden;
}
 
.clbi-tnav-sub-list {
display:flex;
align-items:stretch;
flex-wrap:nowrap;
height:34px;
padding:0;
margin:0;
}
 
.clbi-tnav-sub-item {
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 15px 1px 15px;
background:transparent;
color:#c8c8c8 !important;
font-size:11px;
font-weight:700;
line-height:1;
white-space:nowrap;
text-decoration:none !important;
box-sizing:border-box;
transition:
background 0.12s,
color 0.12s,
box-shadow 0.12s;
text-shadow:1px 1px 0 #000;
}
 
.clbi-tnav-sub-item::after {
content:"";
position:absolute;
top:7px;
right:0;
bottom:7px;
width:1px;
background:#202020;
pointer-events:none;
}
 
.clbi-tnav-sub-item:last-child::after {
display:none;
}
 
.clbi-tnav-sub-item:hover {
background:#151515;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
inset 0 -1px 0 rgba(0,0,0,0.60);
}
 
/* 상단 네비: hover/active 인접 경계선 중복 방지 */
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {
border-left-color:transparent;
}
 
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {
border-left-color:transparent;
}
 
/* =========================================
Progress System UI
MediaWiki:Layout.css controlled frontend
========================================= */
/* =========================================
Progress System
========================================= */
 
.profile-progress-block {
--xp-base-a:#5f9f68;
--xp-base-b:#9acb7a;
--xp-gain-a:#238c84;
--xp-gain-b:#54c7bb;
--xp-glow:rgba(35,140,132,0.20);
position:relative;
margin:7px 7px 0;
padding:6px;
box-sizing:border-box;
background:#080808;
border:1px solid;
border-color:
#333333
#202020
#050505
#202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.58);
}
 
.profile-progress-block.is-max-level {
--xp-base-a:#b58a3a;
--xp-base-b:#f0ce75;
--xp-gain-a:#d9aa42;
--xp-gain-b:#fff0a8;
--xp-glow:rgba(224,190,104,0.30);
}
 
.profile-progress-block.is-max-level .progress-level-label {
color:#f0ce75;
text-shadow:
1px 1px 0 #000,
0 0 7px rgba(224,190,104,0.28);
}
 
.profile-progress-block.is-max-level .progress-total-xp {
color:#e0be68;
}
 
.profile-progress-block.is-max-level .progress-xp-bar {
border-color:#4a3b18;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.62),
0 0 6px rgba(224,190,104,0.18);
}
 
.profile-progress-block.is-max-level .progress-xp-next {
color:#e0be68;
}
 
.progress-panel-fallback-body {
padding:0 !important;
}
 
.progress-title-row {
min-height:16px;
margin:0 0 6px;
padding:0 6px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
background:#141414;
border:1px solid;
border-color:
#333333
#202020
#181818
#202020;
color:#c8c8c8;
font-size:9px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040);
}
 
.progress-title-row[hidden] {
display:none !important;
}
 
.progress-level-row,
.progress-sub-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
min-width:0;
}
 
.progress-level-row {
margin-bottom:5px;
}
 
.progress-level-label {
color:#e2e2e2;
font-size:14px;
font-weight:700;
line-height:1;
letter-spacing:0.2px;
text-shadow:
1px 1px 0 #000,
0 0 5px rgba(154,203,122,0.14);
}
 
.progress-total-xp {
color:#b8c9b4;
font-size:10px;
font-weight:700;
line-height:1;
white-space:nowrap;
text-shadow:1px 1px 0 #000;
}
 
.progress-xp-bar {
position:relative;
width:100%;
height:10px;
margin:0 0 5px;
box-sizing:border-box;
background:#070707;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.60);
overflow:hidden;
isolation:isolate;
}
 
.progress-xp-bar::before {
content:"";
position:absolute;
inset:0;
z-index:4;
pointer-events:none;
background:
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));
}
 
.progress-xp-fill,
.progress-xp-gain {
position:absolute;
left:0;
top:0;
bottom:0;
width:0;
}
 
.progress-xp-gain {
z-index:1;
opacity:0;
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
inset 0 -1px 0 rgba(0,0,0,0.46),
0 0 5px var(--xp-glow);
}
 
.progress-xp-fill {
z-index:2;
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.24),
inset 0 -1px 0 rgba(0,0,0,0.42);
transition:width 260ms ease;
}
 
.progress-sub-row {
margin-bottom:6px;
}
}


.progress-xp-next,
/* 분류 */
.progress-daily-xp,
.liberty-content-main .catlinks {
.progress-discovery-row {
    width: calc(100% + 10px) !important;
color:#8a8a8a;
    left: -5px !important;
font-size:9px;
    margin: 14px auto 0 auto !important;
font-weight:700;
    padding: 5px 10px !important;
line-height:1;
    box-sizing: border-box !important;
text-shadow:1px 1px 0 #000;
}
}


.progress-daily-xp {
/* 이미지 위에 이미지 얹기 */
white-space:nowrap;
.portrait-overlay-img,
.portrait-overlay-img a {
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
}
}


.progress-discovery-row {
.portrait-overlay-img img {
height:18px;
    height: var(--overlay-height, 180px) !important;
display:flex;
    width: auto !important;
align-items:center;
    max-width: none !important;
justify-content:center;
    max-height: none !important;
background:#141414;
border:1px solid;
border-color:
#333333
#202020
#181818
#202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040);
}
}


#progress-toast-root {
/* 관련 틀 본문 하단 여백 보정 */
position:fixed;
.related-template-body > *:last-child {
right:18px;
    margin-bottom: 1px !important;
bottom:18px;
z-index:100000;
display:flex;
flex-direction:column;
gap:6px;
pointer-events:none;
}
}


.progress-toast {
.related-template-body table:last-child,
min-width:220px;
.related-template-body .wikitable:last-child,
max-width:320px;
.related-template-body [id^="collapsible"]:last-child {
padding:8px 10px;
    margin-bottom: 1px !important;
box-sizing:border-box;
background:#171717;
border:1px solid;
border-color:#555555 #2b2b2b #050505 #2b2b2b;
color:#e2e2e2;
font-size:11px;
font-weight:700;
line-height:1.35;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.72),
0 6px 18px rgba(0,0,0,0.42);
opacity:0;
transform:translateY(8px);
transition:opacity 160ms ease, transform 160ms ease;
}
}


.progress-toast.is-visible {
.related-template-body > br:last-child {
opacity:1;
    display: none !important;
transform:translateY(0);
}
}


/* -----------------------------------------
/* 컨트리볼 */
Analog hover normalization
#clbi-left-nations-image {
----------------------------------------- */
    display: block;
#clbi-top-nav .clbi-top-nav-item,
    width: 100%;
#clbi-top-nav .clbi-top-nav-item *,
    height: auto;
#clbi-sub-worldbuilding .clbi-tnav-sub-item,
    margin: 0;
#clbi-search-btn,
    padding: 0;
.clbi-user-btn,
    border: 0;
.profile-action-box .clbi-user-btn,
.profile-action-box .clbi-user-btn *,
.profile-quick-btn,
.profile-quick-btn *,
.news-post-item,
.news-post-item *,
.news-recent-item,
.news-recent-item *,
.clbi-left-news-main,
.clbi-left-news-main *,
.clbi-link-btn,
.clbi-link-box ul li a,
#clbi-playlist-toggle,
#clbi-notification-toggle {
transition:none !important;
}
}

2026년 5월 24일 (일) 15:24 판

/* =========================================
   COASTLINE: BLACK ICE - Theme
   ========================================= */
/* screen-header 쓰는 문서만 푸커 숨기기 */
body:has(.screen-header) .liberty-footer {
    display: none !important;
}
body:has(.screen-header) footer {
    display: none !important;
}

/* 색상 텍스트 틀 및 색상 범위 공통 처리 */
.color-text {
    color: var(--text-color, #fff) !important;
}

.color-text a,
.color-text a:visited,
.color-text a.external {
    color: var(--text-color, #fff) !important;
}

.color-text a:hover {
    color: var(--text-color, #fff) !important;
}

/* 선택 영역 */
::selection {
    background: rgba(133, 67, 105, 0.50);
    color: #ffffff;
}

::-moz-selection {
    background: rgba(133, 67, 105, 0.50);
    color: #ffffff;
}

/* SVG + 테두리일 때 사각 테두리 제거, 형태 외곽선만 적용 */
.mw-image-border:has(img[src$=".svg.png"]) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.mw-image-border img[src$=".svg.png"] {
    border: none !important;
    box-shadow: none !important;
    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff);
}

/* 폰트 */
@font-face {
    font-family: 'Galmuri11';
    src: url('/fonts/Galmuri11.woff2') format('woff2');
    font-weight: 400;
    font-display: block;
}

@font-face {
    font-family: 'Galmuri11';
    src: url('/fonts/Galmuri11-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: block;
}

@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;
}

html body, html .liberty-content-main {
    font-family: 'Galmuri11', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px;
}

* { font-family: inherit !important; }

.fa, .far, .fas, .fab, [class*="fa-"] {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome' !important;
}

.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;
}

/* 배경 */
html {
    min-height: 100%;
    overflow-y: scroll;
    background: #000000 !important;
}

body {
    min-height: 100%;
    margin: 0 !important;
    background: #000000 !important;
}

/* 이전 JS 배경 레이어는 사용하지 않음 */
.WW-bg {
    display: none !important;
}

/* Canvas 기반 고정 하프톤 배경 */
#site-halftone-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    background: #000000;
}

/* 배경 캔버스보다 실제 위키 UI가 위에 놓이도록 함 */
body > :not(#site-halftone-bg) {
    position: relative;
    z-index: 1;
}

/* 관리자 툴은 기존 우선순위를 유지 */
#dev-tools-panel {
    position: fixed !important;
    z-index: 99998 !important;
}

/* OOUI/MediaWiki 팝업 계열 안전 보정 */
.oo-ui-windowManager,
.oo-ui-defaultOverlay,
.mw-notification-area,
.mw-notification-area-overlay {
    position: relative;
    z-index: 100000 !important;
}

/* 스크롤 */
html { overflow-y: scroll; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0909; }
::-webkit-scrollbar-thumb { background: #854369; border-radius: 3px; }

/* 제목 */
.mw-page-title-main {
    border-radius: 5px 5px 0 0 !important;
    padding: 7px !important;
    border: 2px solid #854369 !important;
    border-bottom: none !important;
    background: #171717 !important;
    color: #e2e2e2 !important;
    display: inline-block !important;
    position: relative !important;
}

.mw-page-title-main::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #171717;
}

.mw-page-title-namespace {
    padding: 7px 0 7px 7px !important;
    border: 2px solid #854369 !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 5px 0 0 0 !important;
    background: #171717 !important;
    color: #e2e2e2 !important;
    display: inline-block !important;
    vertical-align: bottom !important;
    position: relative !important;
}

.mw-page-title-namespace::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #171717;
}

.mw-page-title-separator {
    padding: 7px 0 !important;
    border-top: 2px solid #854369 !important;
    border-bottom: none !important;
    background: #171717 !important;
    color: #e2e2e2 !important;
    display: inline-block !important;
    vertical-align: bottom !important;
    position: relative !important;
}

.mw-page-title-separator::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #171717;
}

.mw-page-title-namespace ~ .mw-page-title-main {
    border-radius: 0 5px 0 0 !important;
    padding: 7px 7px 7px 0 !important;
    border-left: none !important;
    vertical-align: bottom !important;
}

/* 특수 페이지 h1 */
.liberty-content-header .title h1:not(:has(.mw-page-title-main)) {
    background: #171717 !important;
    color: #e2e2e2 !important;
    border: 2px solid #854369 !important;
    border-bottom: none !important;
    border-radius: 5px 5px 0 0 !important;
    padding: 7px !important;
    display: inline-block !important;
    position: relative !important;
    font-family: 'BoldRound', sans-serif !important;
}

.liberty-content-header .title h1:not(:has(.mw-page-title-main))::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #171717;
}

/* 대문 제목 숨기기 */
.mw-page-title-main.clbi-hide,
.mw-page-title-main.clbi-hide::after {
    display: none !important;
}

/* 본문 */
.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;
}

.mw-references-columns {
    border-top: 1px solid #414141 !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;
}

/* 링크 색상 */
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; text-decoration: underline !important; }
a.external:hover { color: #95ed95 !important; }
a.external:active { color: #33b733 !important; }
a.external:before { display: none !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; }

/* 편집 버튼 */
.btn-secondary {
    color: #e2e2e2 !important;
    background-color: #171717 !important;
    border: 2px solid #854369 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 0 0 #854369 !important;
}

.btn-secondary:hover {
    color: #d46262 !important;
    background-color: #171717 !important;
    border: 2px solid #854369 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 0 0 #854369 !important;
}

.btn-group .btn:first-child { border-radius: 5px 0 0 0 !important; }
.btn-group .dropdown-toggle { border-radius: 0 5px 0 0 !important; }

/* 기본 목차: 본문에서는 숨김 */
.liberty-content-main #toc,
.liberty-content-main .toc {
    display: none !important;
}

/* 왼쪽 목차: 전체 내용 영역 */
#side-toc-box .toc-sidebar-content {
    padding: 10px 12px !important;
}

/* 왼쪽 목차: 새로 생성한 목차 목록 */
#side-toc-box .generated-toc {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 왼쪽 목차: 목록 항목 */
#side-toc-box .generated-toc li {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 1.5 !important;
}

#side-toc-box .generated-toc li:last-child {
    margin-bottom: 0 !important;
}

/* 왼쪽 목차: 링크 박스 */
#side-toc-box .generated-toc a {
    display: block !important;
    color: #E2E2E2 !important;
    text-decoration: none !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

#side-toc-box .generated-toc a:hover {
    background: rgba(133, 67, 105, 0.18) !important;
    color: #ffffff !important;
}

/* 왼쪽 목차: 긴 제목 감싸는 영역 */
#side-toc-box .toc-scroll-wrap {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

/* 왼쪽 목차: 실제로 스크롤되는 긴 제목에만 오른쪽 페이드 적용 */
#side-toc-box .toc-scroll-wrap.is-scrolling {
    mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
}

/* 왼쪽 목차: 실제 스크롤되는 텍스트 */
#side-toc-box .toc-scroll-text {
    display: inline-block !important;
    white-space: nowrap !important;
    max-width: none !important;
}

/* 왼쪽 목차: h2 항목 */
#side-toc-box .toc-level-2 .toc-scroll-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #E2E2E2 !important;
}

/* 왼쪽 목차: h3 항목 */
#side-toc-box .toc-level-3 {
    padding-left: 12px !important;
}

#side-toc-box .toc-level-3 .toc-scroll-text {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #b8b8b8 !important;
}

#side-toc-box .toc-level-3 a:hover .toc-scroll-text {
    color: #ffffff !important;
}

/* 왼쪽 목차: 문서 스크롤 중에도 목차가 화면 안에 남도록 처리 */
#clbi-left-sidebar {
    align-self: stretch !important;
}

/* 왼쪽 목차: 목차 박스만 화면 상단에 고정되듯 따라오게 함 */
#side-toc-box {
    position: sticky !important;
    top: 10px !important;
    z-index: 1001;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}

/* 왼쪽 목차: 항목이 많을 때 목차 내부만 스크롤되게 함 */
#side-toc-box .toc-sidebar-content {
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* 분류 칸 */
.catlinks {
    background: #1A1A1A !important;
    border: 2px solid #854369 !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    box-shadow: 0px 0px 3px #361427 !important;
    color: #e2e2e2 !important;
    padding: 2px 10px !important;
    margin: -7px auto 10px auto !important;
    width: calc(100% + 8px) !important;
    position: relative !important;
    left: -3px !important;
}

.catlinks ul {
    padding: 0 !important;
    margin: 0 !important;
    background-color: #1A1A1A !important;
}

.catlinks a {
    color: #854369 !important;
}

.catlinks a:hover {
    color: #d45aa2 !important;
}

/* 분류 문서 */
.mw-category-generated { color: #e2e2e2 !important; }
.mw-category-generated a { color: #854369 !important; }
.CategoryTreeToggle { color: #854369 !important; }
.number-link { color: #854369 !important; }

/* 편집 섹션 */
.mw-editsection {
    color: #b45c8f !important;
    float: right;
    font-weight: bold;
}

/* 넘겨주기 */
.mw-redirectedfrom { color: #854369 !important; }
.mw-redirectedfrom a { color: #854369 !important; }

/* 서브페이지 */
.subpages { color: #fdecec !important; }
.subpages a { color: #854369 !important; }
.subpages a:active { color: #854369 !important; }

/* 공지사항 */
.alert-info {
    background-color: #171717 !important;
    border: 2px solid #854369 !important;
    box-shadow: 0px 0px 3px #000000;
}

/* 푸터 */
.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; }

/* 리스트 */
.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);
}

/* 편집 권한에 따라 우측 모서리 처리 */
.liberty-content.content-tools-hidden .liberty-content-main {
    border-top-right-radius: 5px !important;
}

/* 분류 */
.liberty-content-main .catlinks {
    width: calc(100% + 10px) !important;
    left: -5px !important;
    margin: 14px auto 0 auto !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
}

/* 이미지 위에 이미지 얹기 */
.portrait-overlay-img,
.portrait-overlay-img a {
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
}

.portrait-overlay-img img {
    height: var(--overlay-height, 180px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
}

/* 관련 틀 본문 하단 여백 보정 */
.related-template-body > *:last-child {
    margin-bottom: 1px !important;
}

.related-template-body table:last-child,
.related-template-body .wikitable:last-child,
.related-template-body [id^="collapsible"]:last-child {
    margin-bottom: 1px !important;
}

.related-template-body > br:last-child {
    display: none !important;
}

/* 컨트리볼 */
#clbi-left-nations-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}