미디어위키:Layout.css

/* =========================================
COASTLINE: BLACK ICE - Layout
Core page shell / top nav / sidebars
========================================= */

/*
설계 목적
-----------------------------------------
이 파일은 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;
}

a[accesskey="t"] {
display:none !important;
}

.Liberty .nav-wrapper {
display:none !important;
}

.liberty-sidebar {
display:none !important;
}

/* -----------------------------------------
2. 전체 배치
----------------------------------------- */

:root {
--layout-shell-w:1880px;
--layout-side-w:230px;
--layout-gap:8px;
--layout-gap-double:16px;
--clbi-top-nav-outer-h:47px;
--clbi-bottom-nav-outer-h:47px;
}

/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */

html {
height:100%;
overflow-x:auto;
overflow-y:hidden;
}

body {
margin:0 !important;
min-width:calc(var(--layout-shell-w) + 32px) !important;
height:100vh !important;
overflow-x:visible !important;
overflow-y:hidden !important;
}

#clbi-top-nav-wrap,
#clbi-bottom-nav-wrap,
.content-wrapper {
width:var(--layout-shell-w) !important;
max-width:var(--layout-shell-w) !important;
min-width:var(--layout-shell-w) !important;
box-sizing:border-box !important;
}

#clbi-top-nav-wrap {
margin:0 auto !important;
padding:var(--layout-gap) 0 0 !important;
}

#clbi-bottom-nav-wrap {
margin:var(--layout-gap) auto 0 !important;
padding:0 0 var(--layout-gap) !important;
}

.content-wrapper {
margin:var(--layout-gap) auto 0 !important;
padding:0 !important;
display:grid !important;
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;
gap:var(--layout-gap) !important;
align-items:stretch !important;
justify-content:stretch !important;
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;
min-height:0 !important;
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;
overflow:visible !important;
}

#clbi-left-sidebar {
grid-column:1;
grid-row:1;
}

.container-fluid.liberty-content {
grid-column:2;
grid-row:1;
padding-bottom:0 !important;
margin:0 !important;
flex:none !important;
width:auto !important;
/*
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.
*/
height:calc(100% + 14px) !important;
max-height:calc(100% + 14px) !important;
max-width:none !important;
min-width:0 !important;
min-height:0 !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
background:transparent !important;
display:flex !important;
flex-direction:column !important;
}

#clbi-right-sidebar {
grid-column:3;
grid-row:1;
}

/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해
   사이드바 숨김 반응형 규칙은 제거한다. */


/* -----------------------------------------
2-A. CLBI shell visibility safety
----------------------------------------- */

/*
If a browser/user stylesheet or Liberty wrapper gives .content-wrapper a negative
stacking order, the generated shell can exist in the DOM while only the
background is visible.  The CLBI shell parts must sit above the halftone canvas.
*/

#clbi-top-nav-wrap,
.content-wrapper,
#clbi-bottom-nav-wrap {
position:relative !important;
z-index:1 !important;
}

body.clbi-shell-ready #clbi-top-nav-wrap,
body.clbi-shell-ready .content-wrapper,
body.clbi-shell-ready #clbi-bottom-nav-wrap {
visibility:visible !important;
opacity:1 !important;
}


/* -----------------------------------------
2-B. 세로 가변 셸 / 좌측 최근 변경 적응형
----------------------------------------- */

/*
상하단 네비는 고정된 조작 패널로 유지한다.
브라우저 세로 높이가 작아지면 가운데 content-wrapper만 줄어든다.

좌측 뉴스 박스는 기본 상태에서 원래 내용 높이만 차지한다.
세로 공간이 부족할 때만 JS가 최근 변경 항목 수를 줄인다.
*/

@supports (height: 100dvh) {
body {
height:100dvh !important;
}

.content-wrapper {
height:calc(100dvh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;
max-height:calc(100dvh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;
}
}

#clbi-left-sidebar,
#clbi-right-sidebar {
max-height:100% !important;
min-height:0 !important;
}

#clbi-left-sidebar {
align-self:flex-start !important;
overflow:hidden !important;
}

#clbi-right-sidebar {
align-self:flex-start !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}

#clbi-left-sidebar .clbi-left-lang-box,
#clbi-left-sidebar .clbi-left-news-box {
flex:0 0 auto !important;
}

#clbi-left-sidebar .clbi-left-news-box {
min-height:0 !important;
overflow:hidden !important;
}

#clbi-left-sidebar .clbi-news-box {
min-height:0 !important;
overflow:hidden !important;
}

#clbi-left-sidebar .news-left-recent-feed {
min-height:0 !important;
overflow:hidden !important;
}

.news-recent-item.is-adaptive-hidden {
display:none !important;
}


/* -----------------------------------------
2-C. CLBI shell host flow correction
----------------------------------------- */

/*
When Liberty wraps the generated CLBI shell inside a <section>, that wrapper can
produce overlap between the top nav and content-wrapper.  The DOM order is
already correct, so the host itself must be forced into a plain vertical flow.
*/

.clbi-shell-host {
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
gap:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
position:relative !important;
z-index:1 !important;
}

.clbi-shell-host > #clbi-top-nav-wrap,
.clbi-shell-host > .content-wrapper,
.clbi-shell-host > #clbi-bottom-nav-wrap {
flex:0 0 auto !important;
}

.clbi-shell-host > .content-wrapper {
margin-top:var(--layout-gap) !important;
}

.clbi-shell-host > #clbi-bottom-nav-wrap {
margin-top:var(--layout-gap) !important;
}


/*
Liberty skin can leave relative offsets on .content-wrapper.
Once CLBI wraps the shell in .clbi-shell-host, those offsets must be neutralized
or the content row overlaps the top nav by 16px.
*/
.clbi-shell-host > .content-wrapper,
.content-wrapper {
top:0 !important;
bottom:auto !important;
transform:none !important;
}


#clbi-top-nav-wrap,
#clbi-bottom-nav-wrap {
top:0 !important;
bottom:auto !important;
transform:none !important;
}

/* -----------------------------------------
3. 본문 컨테이너
----------------------------------------- */

/*
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.
- .liberty-content는 투명 래퍼로 유지한다.
- .liberty-content-main은 외곽 프레임이다.
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.
- 외곽과 본문 사이의 기본 간격은 8px이다.
*/

.liberty-content-main,
.Liberty .content-wrapper .liberty-content .liberty-content-main,
.liberty-content-main {
position:relative !important;
box-sizing:border-box !important;
height:100% !important;
min-height:0 !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-radius:0 !important;
padding:8px !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010,
0 6px 18px rgba(0,0,0,0.34) !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
}

.liberty-content-main .mw-parser-output {
position:relative !important;
box-sizing:border-box !important;
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:8px !important;
background:#080808 !important;
border:0 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}


.liberty-content-main .mw-parser-output,
#clbi-left-sidebar,
#clbi-right-sidebar {
scrollbar-width:thin;
scrollbar-color:#333333 #080808;
}

/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */
body.page-title-visible .liberty-content-header + .mw-parser-output,
body.backend-system-page .liberty-content-header + .mw-parser-output {
margin-top:8px !important;
}

/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */
body.page-title-hidden .liberty-content-header + .mw-parser-output,
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {
margin-top:0 !important;
}

.liberty-content {
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
background:transparent !important;
}

/* -----------------------------------------
4. 본문 헤더
----------------------------------------- */

.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 {
display:none !important;
order:2 !important;
flex-shrink:0 !important;
padding-top:0 !important;
padding-right:0 !important;
}

.liberty-content-header .title {
order:1 !important;
flex:1 !important;
display:flex !important;
align-items:flex-end !important;
margin:0 !important;
padding:0 !important;
}

.liberty-content-header h1 {
margin:0 !important;
padding:0 !important;
}

.liberty-content-header .contentSub {
display:none !important;
}


/* 일반 문서에서는 기본 제목 영역을 숨긴다.
   CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는
   Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */
body.page-title-hidden .liberty-content-header,
body.page-title-hidden .liberty-content-header .title,
body.page-title-hidden .liberty-content-header .title h1 {
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}

body.page-title-hidden .mw-page-title-main,
body.page-title-hidden .mw-page-title-main::after,
body.page-title-hidden .mw-page-title-namespace,
body.page-title-hidden .mw-page-title-namespace::after,
body.page-title-hidden .mw-page-title-separator,
body.page-title-hidden .mw-page-title-separator::after,
body.page-title-hidden .liberty-content-header .title,
body.page-title-hidden .liberty-content-header h1,
body.page-title-hidden #firstHeading,
body.page-title-hidden .firstHeading,
body.page-title-hidden .mw-first-heading,
body.page-title-hidden .page-heading,
body.page-title-hidden .page-header {
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}


/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.
   감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,
   뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */
body.anecdote-namespace-page .liberty-content-header,
body.anecdote-namespace-page .liberty-content-header .title,
body.anecdote-namespace-page .liberty-content-header .title h1,
body.anecdote-namespace-page .mw-page-title-main,
body.anecdote-namespace-page .mw-page-title-main::after,
body.anecdote-namespace-page .mw-page-title-namespace,
body.anecdote-namespace-page .mw-page-title-namespace::after,
body.anecdote-namespace-page .mw-page-title-separator,
body.anecdote-namespace-page .mw-page-title-separator::after,
body.anecdote-namespace-page #firstHeading,
body.anecdote-namespace-page .firstHeading,
body.anecdote-namespace-page .mw-first-heading,
body.anecdote-namespace-page .page-heading,
body.anecdote-namespace-page .page-header {
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}


/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.
   backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */
body.action-view:not(.backend-system-page) .liberty-content-header,
body.action-view:not(.backend-system-page) .liberty-content-header .title,
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,
body.action-view:not(.backend-system-page) .liberty-content-header h1,
body.action-view:not(.backend-system-page) .mw-page-title-main,
body.action-view:not(.backend-system-page) .mw-page-title-main::after,
body.action-view:not(.backend-system-page) .mw-page-title-namespace,
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,
body.action-view:not(.backend-system-page) .mw-page-title-separator,
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,
body.action-view:not(.backend-system-page) #firstHeading,
body.action-view:not(.backend-system-page) .firstHeading,
body.action-view:not(.backend-system-page) .mw-first-heading,
body.action-view:not(.backend-system-page) .page-heading,
body.action-view:not(.backend-system-page) .page-header {
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}

body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {
margin-top:0 !important;
}


/* 대문 title hard fallback
   Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도
   대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */
body.action-view.page-대문 .liberty-content-header,
body.action-view.page-대문 .liberty-content-header .title,
body.action-view.page-대문 .liberty-content-header .title h1,
body.action-view.page-대문 .liberty-content-header h1,
body.action-view.page-대문 .mw-page-title-main,
body.action-view.page-대문 .mw-page-title-main::after,
body.action-view.page-대문 .mw-page-title-namespace,
body.action-view.page-대문 .mw-page-title-namespace::after,
body.action-view.page-대문 .mw-page-title-separator,
body.action-view.page-대문 .mw-page-title-separator::after,
body.action-view.page-대문 #firstHeading,
body.action-view.page-대문 .firstHeading,
body.action-view.page-대문 .mw-first-heading,
body.action-view.page-대문 .page-heading,
body.action-view.page-대문 .page-header,
body.action-view.rootpage-대문 .liberty-content-header,
body.action-view.rootpage-대문 .liberty-content-header .title,
body.action-view.rootpage-대문 .liberty-content-header .title h1,
body.action-view.rootpage-대문 .liberty-content-header h1,
body.action-view.rootpage-대문 .mw-page-title-main,
body.action-view.rootpage-대문 .mw-page-title-main::after,
body.action-view.rootpage-대문 .mw-page-title-namespace,
body.action-view.rootpage-대문 .mw-page-title-namespace::after,
body.action-view.rootpage-대문 .mw-page-title-separator,
body.action-view.rootpage-대문 .mw-page-title-separator::after,
body.action-view.rootpage-대문 #firstHeading,
body.action-view.rootpage-대문 .firstHeading,
body.action-view.rootpage-대문 .mw-first-heading,
body.action-view.rootpage-대문 .page-heading,
body.action-view.rootpage-대문 .page-header {
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}

body.action-view.page-대문 .liberty-content-header + .mw-parser-output,
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {
margin-top:0 !important;
}

/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */
.liberty-content-header .content-tools,
.content-tools {
display:none !important;
}


/* -----------------------------------------
4-A. MediaWiki CSS/JS 문서 표시
----------------------------------------- */

/*
CSS/JS 시스템 문서는 기본 제목을 숨기고 우상단 문서 표식과 raw source viewer를 사용한다.

중요 구조:
- .liberty-content-main : 외곽 #1d1d1d 프레임
- #mw-content-text/.mw-body-content : MediaWiki가 끼워 넣는 중간 래퍼
- .mw-parser-output : 내부 #080808 우물
- #clbi-system-source-viewer : 우물 안에서 남은 높이를 차지하는 스크롤 패널

이 중간 래퍼를 채우지 않으면 .mw-parser-output이 내용 높이로 접히고,
코드 영역이 얇은 줄처럼 보인다.
*/

body.clbi-system-doc-page .liberty-content-main {
position:relative !important;
height:100% !important;
min-height:0 !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
}

body.clbi-system-doc-page #mw-content-text,
body.clbi-system-doc-page .mw-body-content {
position:relative !important;
box-sizing:border-box !important;
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
}

body.clbi-system-doc-page .liberty-content-main .mw-parser-output {
position:relative !important;
box-sizing:border-box !important;
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:8px !important;
background:#080808 !important;
border:0 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
}

body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {
flex:0 0 auto !important;
}

body.clbi-system-doc-page .clbi-system-original-source-hidden {
display:none !important;
}

body.clbi-system-doc-page #clbi-system-source-viewer {
display:block !important;
box-sizing:border-box !important;
flex:1 1 0 !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:8px 0 0 !important;
padding:8px 10px !important;
overflow:auto !important;
background:#f3f6f7 !important;
color:#111111 !important;
border:0 !important;
outline:none !important;
font-family:Consolas, Monaco, 'Courier New', monospace !important;
font-size:12px !important;
line-height:1.45 !important;
white-space:pre !important;
tab-size:4;
scrollbar-gutter:stable;
}

body.clbi-system-doc-page .clbi-system-doc-codepane,
body.clbi-system-doc-page .clbi-system-doc-codebox {
display:none !important;
}

.clbi-system-doc-indicator-row {
position:absolute !important;
top:8px !important;
right:8px !important;
z-index:40 !important;
width:auto !important;
max-width:calc(100% - 16px) !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
display:block !important;
pointer-events:none !important;
}

.clbi-system-doc-indicator {
display:block !important;
width:max-content !important;
max-width:520px !important;
box-sizing:border-box !important;
padding:5px 8px 6px !important;
background:#171717 !important;
border:1px solid #050505 !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
overflow:hidden !important;
}

.clbi-system-doc-meta {
display:flex !important;
justify-content:flex-end !important;
align-items:center !important;
gap:7px !important;
margin:0 0 3px 0 !important;
font-size:10px !important;
line-height:1 !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
color:#8a8a8a !important;
white-space:nowrap !important;
}

.clbi-system-doc-label {
color:#8a8a8a !important;
font-weight:700 !important;
}

.clbi-system-doc-type {
display:inline-flex !important;
align-items:center !important;
height:14px !important;
padding:0 5px !important;
background:#0d0d0d !important;
border:1px solid #202020 !important;
color:#c8c8c8 !important;
font-weight:700 !important;
}

.clbi-system-doc-title {
display:block !important;
max-width:500px !important;
text-align:right !important;
font-size:24px !important;
line-height:1 !important;
font-weight:900 !important;
letter-spacing:0.01em !important;
color:#e2e2e2 !important;
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;
white-space:nowrap !important;
word-break:normal !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}

body.clbi-system-doc-page .liberty-content-header,
body.clbi-system-doc-page .liberty-content-header .title,
body.clbi-system-doc-page .liberty-content-header .title h1,
body.clbi-system-doc-page .liberty-content-header h1,
body.clbi-system-doc-page .mw-page-title-main,
body.clbi-system-doc-page .mw-page-title-main::after,
body.clbi-system-doc-page .mw-page-title-namespace,
body.clbi-system-doc-page .mw-page-title-namespace::after,
body.clbi-system-doc-page .mw-page-title-separator,
body.clbi-system-doc-page .mw-page-title-separator::after,
body.clbi-system-doc-page #firstHeading,
body.clbi-system-doc-page .firstHeading,
body.clbi-system-doc-page .mw-first-heading,
body.clbi-system-doc-page .page-heading,
body.clbi-system-doc-page .page-header {
display:none !important;
visibility:hidden !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}

body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {
margin-top:0 !important;
}

/* -----------------------------------------
5. 페이지 전환 피드백
----------------------------------------- */

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 {
background:rgba(0,0,0,0.5);
opacity:1;
}

/* -----------------------------------------
6. 좌우 사이드바 공통
----------------------------------------- */

#clbi-left-sidebar,
#clbi-right-sidebar {
position:relative;
width:230px;
z-index:1000;
display:flex;
flex-direction:column;
gap:8px;
padding:0;
flex-shrink:0;
align-self:flex-start;
max-height:100%;
overflow-y:auto;
overflow-x:hidden;
}

.clbi-left-box,
.clbi-right-box {
position:relative;
box-sizing:border-box;
background:#1d1d1d;
border:1px solid #050505;
border-radius:0;
overflow:hidden;
padding:0 8px 8px;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010,
0 6px 18px rgba(0,0,0,0.34);
}

.clbi-left-title,
.clbi-right-title {
min-height:34px;
padding:0 2px;
font-weight:700;
font-size:12px;
color:#e2e2e2;
border:0;
background:transparent;
display:flex;
align-items:center;
gap:6px;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:none;
}

.clbi-left-content,
.clbi-right-content {
margin:0;
padding:8px;
box-sizing:border-box;
color:#c8c8c8;
font-size:12px;
line-height:1.65;
background:#080808;
border:0;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}

.clbi-right-content a,
.clbi-left-content a {
color:#c8c8c8 !important;
text-decoration:none;
display:block;
}

.clbi-right-content a:not(.clbi-user-btn):hover,
.clbi-left-content a:not(.clbi-user-btn):hover {
color:#ffffff !important;
}

/* -----------------------------------------
7. 유저 박스
----------------------------------------- */

.profile-card-box {
position:relative;
overflow:hidden;
background:#101010;
}

#clbi-user-avatar-wrap,
#clbi-user-avatar-wrap.profile-identity-panel {
position:relative;
display:block;
min-height:180px;
margin:0;
padding:0 8px;
background:#1d1d1d;
border:none;
border-bottom:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.050),
inset 0 -1px 0 rgba(0,0,0,0.70);
}

.profile-avatar-stage {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
width:104px;
height:104px;
display:flex;
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:"";
position:absolute;
left:7px;
right:7px;
top:7px;
height:1px;
background:rgba(255,255,255,0.026);
pointer-events:none;
}

.profile-avatar-stage::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
box-shadow:
inset 1px 0 0 rgba(255,255,255,0.006),
inset -1px 0 0 rgba(0,0,0,0.16);
}

#clbi-user-avatar {
position:relative;
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%;
margin-top:0;
color:#e2e2e2;
font-size:14px;
font-weight:700;
line-height:1.2;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000;
}

#clbi-user-name-row,
#clbi-user-name-row.profile-name-row {
position:absolute;
left:8px;
right:8px;
top:calc(50% + 52px);
bottom:0;
width:auto;
margin:0;
min-height:0;
line-height:1.2;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}

#clbi-user-name-row.profile-name-row-guest {
display:flex;
align-items:center;
justify-content:center;
}

#clbi-user-name-row #clbi-user-name {
display:inline-block;
max-width:100%;
margin-top:0;
vertical-align:middle;
color:#e2e2e2 !important;
text-decoration:none !important;
}

#clbi-user-name-row.profile-name-row-guest #clbi-user-name {
max-width:100%;
}

.profile-svg {
display:block;
width:100%;
height:100%;
stroke:currentColor;
fill:none;
vertical-align:middle;
}

.clbi-svg-nav-icon {
display:flex !important;
align-items:center;
justify-content:center;
color:#e2e2e2;
line-height:1;
}

.clbi-svg-nav-icon .profile-svg {
width:22px;
height:22px;
}

.sidebar-title-svg {
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
flex:0 0 16px;
color:#e2e2e2 !important;
line-height:1;
}

.sidebar-title-svg .profile-svg {
width:16px;
height:16px;
}

.profile-action-icon {
position:relative;
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;
height:15px;
}

.profile-action-box .clbi-user-btn:hover .profile-action-icon,
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {
color:#ffffff;
}

.profile-action-box .clbi-user-btn-logout .profile-action-icon {
color:#8b5f59;
}

.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {
color:#e0a199;
}



.news-title-icon.sidebar-title-svg {
display:inline-flex;
align-items:center;
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 {
width:16px;
height:16px;
display:block;
}

.profile-quick-actions {
position:relative;
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:4px;
margin:0 0 8px;
overflow:visible;
z-index:2;
}

.profile-quick-btn {
position:relative;
display:flex;
align-items:center;
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 {
background:
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:
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);
}

.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;
border-color:#555555 !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.055),
inset 0 -1px 0 rgba(0,0,0,0.75) !important;
}

/* -----------------------------------------
9.4 우측 광고판 Ad(not really)
----------------------------------------- */

.right-billboard-box {
position:relative;
background:#1d1d1d;
overflow:visible;
}

.right-billboard-title {
justify-content:flex-start;
background:transparent;
border:0;
box-shadow:none;
gap:4px;
}

.right-billboard-title-text {
display:inline-flex;
align-items:center;
gap:4px;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.right-billboard-title-main,
.right-billboard-title-note {
display:inline-block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.right-billboard-title-note {
opacity:.20;
}

.right-billboard-body {
position:relative;
margin:0;
padding:7px;
box-sizing:border-box;
background:#080808;
border:0;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
overflow:visible;
}

.right-billboard-recess {
position:relative;
height:auto;
min-height:0;
box-sizing:border-box;
padding:8px;
background:
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);
border:1px solid;
border-color:#202020 #101010 #050505 #101010;
box-shadow:
inset 0 9px 18px rgba(0,0,0,0.96),
inset 0 -2px 3px rgba(255,255,255,0.024),
inset 7px 0 16px rgba(0,0,0,0.88),
inset -7px 0 16px rgba(0,0,0,0.88),
0 0 0 1px rgba(255,255,255,0.018);
overflow:hidden;
}

.right-billboard-recess::before {
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:.10;
background:
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);
mix-blend-mode:screen;
}

.right-billboard-screen {
position:relative;
z-index:1;
width:100%;
height:352px;
min-height:352px;
display:block;
line-height:0;
overflow:hidden;
background:#050505;
border:1px solid #060606;
border-radius:7px / 13px;
box-shadow:
inset 0 0 16px rgba(0,0,0,0.90),
inset 0 0 38px rgba(0,0,0,0.74),
0 0 0 1px rgba(255,255,255,0.026);
}

.right-billboard-image {
border:0;
background:#050505;
}

.right-billboard-image-base {
position:relative;
z-index:3;
display:block;
width:100%;
height:100%;
max-width:100%;
max-height:none;
object-fit:cover;
object-position:center center;
filter:
brightness(0.84)
contrast(1.08)
saturate(0.90);
transform:none;
transform-origin:center center;
}

.right-billboard-image-bloom,
.right-billboard-slice {
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
max-width:none;
max-height:none;
object-fit:cover;
object-position:center center;
border:0;
background:transparent;
}

.right-billboard-image-bloom {
z-index:4;
pointer-events:none;
opacity:.36;
mix-blend-mode:normal;
filter:
blur(7px)
brightness(0.92)
contrast(1.02)
saturate(1.04);
transform:scale(1.015);
transform-origin:center center;
}

.right-billboard-slice {
z-index:5;
opacity:0;
pointer-events:none;
mix-blend-mode:screen;
filter:
brightness(0.96)
contrast(1.18)
saturate(0.82);
transform:scale(1.035);
transform-origin:center center;
will-change:transform, opacity, clip-path, filter;
}

.right-billboard-slice-a {
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;
}

.right-billboard-slice-b {
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;
}

.right-billboard-slice-c {
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;
}

.right-billboard-screen::before {
content:"";
position:absolute;
inset:0;
z-index:20;
pointer-events:none;
border-radius:7px / 13px;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 0%,
transparent 60%,
rgba(0,0,0,0.18) 78%,
rgba(0,0,0,0.46) 100%
),
linear-gradient(
to bottom,
rgba(0,0,0,0.18) 0%,
transparent 15%,
transparent 82%,
rgba(0,0,0,0.26) 100%
),
linear-gradient(
to right,
rgba(0,0,0,0.20) 0%,
transparent 9%,
transparent 91%,
rgba(0,0,0,0.20) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.030) 18%,
transparent 38%,
transparent 100%
);
box-shadow:
inset 0 0 20px rgba(255,255,255,0.018),
inset 0 0 48px rgba(0,0,0,0.56);
}

.right-billboard-screen::after {
content:"";
position:absolute;
inset:-70px 0;
z-index:21;
pointer-events:none;
opacity:.20;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.080) 0px,
rgba(255,255,255,0.080) 1px,
transparent 2px,
transparent 5px
);
mix-blend-mode:screen;
animation:right-billboard-scanlines-up 7s linear infinite;
}

.right-billboard-glitch {
position:absolute;
inset:0;
z-index:22;
pointer-events:none;
opacity:0;
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(255,255,255,0.12) 48%,
rgba(212,90,162,0.14) 50%,
rgba(90,120,255,0.08) 52%,
transparent 56%
);
mix-blend-mode:screen;
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;
}

.right-billboard-tear {
position:absolute;
inset:0;
z-index:23;
pointer-events:none;
opacity:0;
background:
linear-gradient(
to right,
transparent 0%,
rgba(120,180,255,0.07) 10%,
rgba(255,255,255,0.11) 48%,
rgba(212,90,162,0.08) 78%,
transparent 100%
);
mix-blend-mode:screen;
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;
}

.right-billboard-empty {
position:absolute;
inset:0;
z-index:8;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
box-sizing:border-box;
min-height:0;
background:#050505;
color:#626262;
text-align:center;
text-shadow:1px 1px 0 #000;
}

.right-billboard-box.is-empty .right-billboard-screen {
min-height:352px;
}

.right-billboard-box.is-empty .right-billboard-empty {
display:flex;
}

.right-billboard-box.is-empty .right-billboard-image,
.right-billboard-box.is-empty .right-billboard-slice {
display:none !important;
}

.right-billboard-empty-main {
display:block;
color:#8a8a8a;
font-size:10px;
font-weight:700;
line-height:1;
letter-spacing:.7px;
}

.right-billboard-empty-sub {
display:block;
max-width:100%;
color:#626262;
font-size:9px;
font-weight:700;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}



.right-billboard-caption {
position:absolute;
left:50%;
top:calc(100% + 4px);
z-index:40;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0;
width:max-content;
min-width:42px;
max-width:calc(100% - 8px);
margin:0;
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;
overflow:visible;
}

.right-billboard-box:hover .right-billboard-caption,
.right-billboard-box:focus-within .right-billboard-caption {
visibility:visible;
opacity:1;
transform:translate(-50%, 0);
}

.right-billboard-caption-line {
display:block;
max-width:100%;
min-width:0;
height:10px;
line-height:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.right-billboard-caption-line.is-gap {
height:10px;
line-height:10px;
font-size:0;
}

.right-billboard-box.is-empty .right-billboard-caption {
display:none;
}

@keyframes right-billboard-scanlines-up {
from { transform:translateY(0); }
to { transform:translateY(-70px); }
}

@keyframes right-billboard-slice-tear-a {
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
}

@keyframes right-billboard-slice-tear-b {
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
}

@keyframes right-billboard-slice-tear-c {
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
}

@keyframes right-billboard-soft-glitch-band {
0%, 52%, 100% { opacity:0; transform:translateY(80%); }
53% { opacity:.38; transform:translateY(36%); }
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }
55% { opacity:0; transform:translateY(-20%); }
}

@keyframes right-billboard-soft-horizontal-tear {
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
.right-billboard-slice-a,
.right-billboard-slice-b,
.right-billboard-slice-c,
.right-billboard-screen::after,
.right-billboard-glitch,
.right-billboard-tear {
animation:none !important;
}

.right-billboard-slice,
.right-billboard-glitch,
.right-billboard-tear {
opacity:0 !important;
}
}


/* -----------------------------------------
9.45 우측 사이트 정보
----------------------------------------- */

.site-info-sidebar {
position:relative;
background:#1d1d1d;
}

.site-info-title {
justify-content:space-between;
background:transparent;
border:0;
box-shadow:none;
}

.site-info-title > span:first-child {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.site-info-title-meta {
flex:0 0 auto;
color:#8a8a8a;
font-size:9px;
font-weight:700;
letter-spacing:.55px;
line-height:1;
white-space:nowrap;
}

.site-info-content {
line-height:1.4;
}

.site-info-sidebar .policy-list {
border-top:1px solid #202020;
border-bottom:1px solid #202020;
}

.site-info-sidebar .policy-row {
display:grid;
grid-template-columns:minmax(0,1fr) 18px;
align-items:center;
gap:6px;
height:24px;
padding:0 2px;
border-bottom:1px solid #202020;
font-size:10px;
line-height:1.2;
}

.site-info-sidebar .policy-row:last-child {
border-bottom:none;
}

.site-info-sidebar .policy-row:hover {
background:#151515;
}

.site-info-sidebar .policy-row a {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#c8c8c8 !important;
text-decoration:none !important;
}

.site-info-sidebar .policy-row:hover a {
color:#ffffff !important;
text-decoration:none !important;
}

.site-info-sidebar .policy-mark {
color:#8a8a8a;
font-size:14px;
line-height:1;
white-space:nowrap;
text-align:right;
}

.site-info-sidebar .policy-row:hover .policy-mark {
color:#ffffff;
}

.site-info-sidebar .social-strip {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:4px;
margin-top:6px;
}

.site-info-sidebar .social-icon {
display:block;
aspect-ratio:1 / 1;
min-width:0;
}

.site-info-sidebar .social-icon a {
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
border:1px solid #202020 !important;
background:#111111 !important;
color:#c8c8c8 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
box-sizing:border-box !important;
}

.site-info-sidebar .social-icon a:hover {
background:#1c1c1c !important;
color:#ffffff !important;
border-color:#3a3a3a !important;
text-decoration:none !important;
}

/* -----------------------------------------
9.5 왼쪽 언어 박스
----------------------------------------- */

.clbi-left-lang-box {
position:relative;
min-height:0;
z-index:1002;
overflow:hidden;
}

/* 언어 박스 내부 라벨 패널 표준
   - 외곽 검은 선은 만들지 않는다.
   - 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.
   - 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */
.clbi-left-lang-box > .clbi-left-title {
min-height:0;
height:auto;
margin:4px 0 3px;
padding:3px 7px;
box-sizing:border-box;
background:#080808;
border:0;
display:flex;
align-items:center;
gap:6px;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}

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

.clbi-left-lang-box .clbi-left-content {
padding:2px;
box-sizing:border-box;
}

.sidebar-lang-box {
position:relative;
padding:3px !important;
box-sizing:border-box;
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 {
--lang-fan-half:99px;
position:relative;
width:100%;
height:146px;
margin:0;
box-sizing:border-box;
overflow:hidden;
background:#1d1d1d;
border:1px solid #050505;
border-radius:0;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}

.sidebar-lang-fan {
position:absolute;
left:50%;
top:2px;
z-index:2;
width:198px;
height:147px;
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:198px;
height:147px;
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:93px;
z-index:5;
width:52px;
height:53px;
margin:0;
padding:0;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border-radius:26px 26px 0 0;
border:1px solid #050505;
background:#1d1d1d;
color:#e2e2e2;
cursor:pointer;
text-align:center;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
0 0 0 2px #080808,
0 0 0 4px #1d1d1d,
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
overflow:visible;
transition:none !important;
}

.sidebar-lang-apply::before,
.sidebar-lang-apply::after {
content:none;
}

.sidebar-lang-apply:hover {
border-color:#050505;
background:#1d1d1d;
color:#ffffff;
box-shadow:
0 0 0 2px #080808,
0 0 0 4px #1d1d1d,
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}

.sidebar-lang-apply:active {
transform:translateX(-50%) translateY(1px);
background:#101010;
box-shadow:
0 0 0 2px #080808,
0 0 0 4px #1d1d1d,
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}

.sidebar-lang-apply.is-disabled,
.sidebar-lang-apply.is-disabled:hover,
.sidebar-lang-apply.is-disabled:active {
transform:translateX(-50%);
border-color:#050505;
background:#1d1d1d;
color:#626262;
cursor:default;
opacity:1;
box-shadow:
0 0 0 2px #080808,
0 0 0 4px #1d1d1d,
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}

.sidebar-lang-apply-mark {
position:relative;
z-index:1;
display:block;
font-size:20px;
font-weight:700;
line-height:1;
transform:translateY(3px);
}

.sidebar-lang-status-panel {
position:absolute;
bottom:5px;
width:69px;
height:25px;
z-index:4;
display:flex;
align-items:center;
justify-content:center;
padding:3px 5px;
box-sizing:border-box;
overflow:hidden;
background:#080808;
border:0;
color:#c8c8c8;
text-align:center;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
pointer-events:none;
}

.sidebar-lang-status-left {
left:calc(50% - var(--lang-fan-half));
}

.sidebar-lang-status-right {
right:calc(50% - var(--lang-fan-half));
}

.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 {
position:relative;
min-height:0;
overflow:hidden;
}

/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.
   - 컨테이너 상단 기준: 위 4px, 아래 3px
   - 외곽 검은 선 없음
   - 광원/그림자는 #555555 / #101010 한 세트만 사용 */
.clbi-left-news-box > .clbi-left-title {
min-height:0;
height:auto;
margin:4px 0 3px;
padding:3px 7px;
box-sizing:border-box;
background:#080808;
border:0;
display:flex;
align-items:center;
gap:6px;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}

#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,
.news-title-icon.sidebar-title-svg {
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;
vertical-align:middle;
}

.news-title-icon .profile-svg,
.news-title-icon.sidebar-title-svg .profile-svg {
width:16px;
height:16px;
display:block;
stroke:currentColor;
}

/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */
.clbi-news-box {
position:relative;
padding:3px !important;
box-sizing:border-box;
overflow:hidden;
background:#080808;
}

/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */
.news-feed-title {
position:relative;
display:flex;
align-items:center;
height:auto;
min-height:22px;
margin:0 0 2px 0;
padding:3px 7px 3px 16px;
box-sizing:border-box;
background:#1d1d1d;
border:1px solid #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 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}

.news-feed-title::before {
content:"";
position:absolute;
left:7px;
top:50%;
width:4px;
height:8px;
transform:translateY(-50%);
background:#c8c8c8;
box-shadow:1px 1px 0 #050505;
opacity:0.85;
}

#clbi-left-news-changelog-title {
margin-top:0;
}

#clbi-left-news-recent-title {
margin-top:2px;
}

/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */
.news-left-changelog-feed,
.news-left-recent-feed {
background:transparent;
border:0;
box-shadow:none;
box-sizing:border-box;
}

.news-left-changelog-feed {
padding:0;
}

.news-left-recent-feed {
padding:0;
color:#9a9a9a;
font-size:11px;
line-height:1.55;
}

.news-divider {
display:none;
}

/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */
.news-post-item,
.news-recent-item {
position:relative;
display:grid !important;
align-items:center;
gap:6px;
margin:0 0 2px;
box-sizing:border-box;
background:#1d1d1d;
border:1px solid #050505;
color:#c8c8c8 !important;
overflow:hidden;
text-decoration:none !important;
cursor:pointer;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}

.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;
margin:0 0 2px;
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:#1d1d1d;
color:#ffffff !important;
}

.news-post-item:active,
.news-recent-item:active {
background:#101010;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}

.news-recent-avatar {
display:block;
width:24px;
height:24px;
object-fit:cover;
object-position:center;
background:#070707;
border:1px solid #050505;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
box-sizing:border-box;
}

.news-recent-item:hover .news-recent-avatar {
border-color:#050505;
}

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

.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:0;
color:#c8c8c8 !important;
font-size:9px;
font-weight:700;
line-height:1;
white-space:nowrap;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}

.news-post-item:hover .news-post-tag,
.news-recent-item:hover .news-recent-time {
background:#101010;
color:#e2e2e2 !important;
}

.news-recent-item:active .news-recent-time {
background:#080808;
color:#c8c8c8 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}

.news-post-item *,
.news-recent-item * {
pointer-events:none;
}

/* -----------------------------------------
12. 왼쪽 목차
----------------------------------------- */

#side-toc-box .toc-sidebar-content {
padding:6px 8px 8px;
}

.generated-toc {
margin:0 !important;
padding:0 !important;
list-style:none !important;
}

.generated-toc li {
margin:0 !important;
padding:0 !important;
}

.generated-toc a {
display:block !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 {
border-top:1px solid #202020;
}

.generated-toc a:hover {
background:#101010;
color:#ffffff !important;
}

.generated-toc .toc-level-3 a {
padding-left:12px;
font-weight:600;
color:#9f9f9f !important;
}

.toc-scroll-wrap {
display:block;
position:relative;
overflow:hidden;
white-space:nowrap;
}

.toc-scroll-text {
display:inline-block;
white-space:nowrap;
}

.toc-scroll-wrap.is-scrolling::after {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
width:18px;
pointer-events:none;
background:linear-gradient(to right, transparent, #080808);
}

/* -----------------------------------------
14. 하단 푸터
----------------------------------------- */

footer,
.liberty-footer {
display:none !important;
}

/* =========================================
15. 상단 네비게이션 바
========================================= */

/*
상단 네비바 공식
-----------------------------------------
- 전체는 하나의 각진 조작 패널이다.
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.
- 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,
#clbi-bottom-nav {
position:relative;
width:100%;
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,
#clbi-bottom-nav-main {
position:relative;
display:flex;
align-items:stretch;
width:100%;
min-height:38px;
}

#clbi-top-nav-logo,
#clbi-bottom-nav-logo {
display:flex;
align-items:center;
padding:0 8px;
flex-shrink:0;
}

#clbi-top-nav-logo img,
#clbi-bottom-nav-logo img {
height:36px;
width:auto;
display:block;
}

/* -----------------------------------------
16. 상단 네비 탭
----------------------------------------- */

#clbi-top-nav-tabs,
#clbi-bottom-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:38px;
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:38px;
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:38px;
gap:1px;
padding:4px 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,
#clbi-bottom-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,
#clbi-bottom-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,
#clbi-bottom-search-input:focus {
border-color:#555555;
background:#0c0c0c;
width:320px;
}

#clbi-top-nav-right,
#clbi-bottom-nav-right {
margin-left:auto;
display:flex;
align-items:stretch;
border-left:1px solid #202020;
}



/* -----------------------------------------
18-1. 대문 전용 상·하단 네비 최소화
----------------------------------------- */

/*
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,
상단·하단 네비바는 검색 슬롯만 남긴다.
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.
*/

body.clbi-main-page #clbi-top-nav-tabs,
body.page-대문 #clbi-top-nav-tabs,
body.clbi-main-page #clbi-bottom-nav-tabs,
body.page-대문 #clbi-bottom-nav-tabs,
body.clbi-main-page #clbi-top-nav-right,
body.page-대문 #clbi-top-nav-right,
body.clbi-main-page #clbi-bottom-nav-right,
body.page-대문 #clbi-bottom-nav-right,
body.clbi-main-page #clbi-sub-worldbuilding,
body.page-대문 #clbi-sub-worldbuilding,
body.clbi-main-page #clbi-bottom-sub-worldbuilding,
body.page-대문 #clbi-bottom-sub-worldbuilding {
display:none !important;
}

body.clbi-main-page #clbi-top-search-input,
body.page-대문 #clbi-top-search-input,
body.clbi-main-page #clbi-bottom-search-input,
body.page-대문 #clbi-bottom-search-input {
width:288px;
}

body.clbi-main-page #clbi-top-search-input:focus,
body.page-대문 #clbi-top-search-input:focus,
body.clbi-main-page #clbi-bottom-search-input:focus,
body.page-대문 #clbi-bottom-search-input:focus {
width:384px;
}

/* -----------------------------------------
19. 세계관 펼침 영역
----------------------------------------- */

#clbi-sub-worldbuilding,
#clbi-bottom-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,
#clbi-bottom-sub-worldbuilding.worldbuilding-open {
height:38px;
border-top-width:1px;
transition:
height 180ms ease,
border-top-width 0ms linear 0ms;
}

#clbi-sub-worldbuilding-inner,
#clbi-bottom-sub-worldbuilding-inner {
height:38px;
overflow:hidden;
}

.clbi-tnav-sub-list {
display:flex;
align-items:stretch;
flex-wrap:nowrap;
height:38px;
padding:0;
margin:0;
}

.clbi-tnav-sub-item {
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:38px;
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:6px;
right:0;
bottom:6px;
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,
.progress-discovery-row {
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.progress-daily-xp {
white-space:nowrap;
}

.progress-discovery-row {
height:18px;
display:flex;
align-items:center;
justify-content:center;
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;
right:18px;
bottom:18px;
z-index:100000;
display:flex;
flex-direction:column;
gap:6px;
pointer-events:none;
}

.progress-toast {
min-width:220px;
max-width:320px;
padding:8px 10px;
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 {
opacity:1;
transform:translateY(0);
}

/* -----------------------------------------
Analog hover normalization
----------------------------------------- */
#clbi-top-nav .clbi-top-nav-item,
#clbi-top-nav .clbi-top-nav-item *,
#clbi-bottom-nav .clbi-top-nav-item,
#clbi-bottom-nav .clbi-top-nav-item *,
#clbi-sub-worldbuilding .clbi-tnav-sub-item,
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,
#clbi-search-btn,
.clbi-user-btn,
.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;
}