미디어위키: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가 담당한다.
- 언어 드로어는 MediaWiki:LangDrawer.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;
}

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

#clbi-top-nav-wrap {
margin:0 auto !important;
padding:20px 0 0 !important;
}

.content-wrapper {
margin:0 auto !important;
padding:0 0 16px 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:start !important;
justify-content:stretch !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;
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 {
grid-column:3;
grid-row:1;
}

@media screen and (max-width:1720px) {
.content-wrapper {
grid-template-columns:minmax(0, 1fr) var(--layout-side-w) !important;
}

#clbi-left-sidebar {
display:none !important;
}

.container-fluid.liberty-content {
grid-column:1;
grid-row:1;
}

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

@media screen and (max-width:1280px) {
.content-wrapper {
grid-template-columns:minmax(0, 1fr) !important;
}

#clbi-right-sidebar {
display:none !important;
}

.container-fluid.liberty-content {
grid-column:1;
grid-row:1;
}
}

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

.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 {
background:transparent !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 {
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;
}

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

.clbi-left-box,
.clbi-right-box {
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.035),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 6px 18px rgba(0,0,0,0.34);
}

.clbi-left-title,
.clbi-right-title {
min-height:28px;
padding:0 10px;
font-weight:700;
font-size:12px;
color:#e2e2e2;
border-bottom:1px solid #050505;
background:#101010;
display:flex;
align-items:center;
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,
.clbi-right-content {
padding:8px;
color:#c8c8c8;
font-size:12px;
line-height:1.65;
background:#080808;
border-top:1px solid rgba(255,255,255,0.018);
}

.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.5 왼쪽 언어 박스
----------------------------------------- */

.clbi-left-lang-box {
min-height:0;
}

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

.sidebar-lang-selector {
position:relative;
width:100%;
height:184px;
box-sizing:border-box;
background:#080808;
border:1px solid;
border-color:#333333 #202020 #050505 #202020;
overflow:hidden;
user-select:none;
touch-action:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.62);
}

.sidebar-lang-selector:focus {
outline:none;
}

.sidebar-lang-selector::before {
content:"";
position:absolute;
left:7px;
right:7px;
top:7px;
bottom:7px;
z-index:0;
pointer-events:none;
background:
linear-gradient(to bottom, rgba(255,255,255,0.012) 0%, transparent 36%, rgba(0,0,0,0.22) 100%);
border:1px solid #181818;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(0,0,0,0.72);
}

.sidebar-lang-dial {
position:relative;
height:182px;
margin:0;
overflow:hidden;
z-index:1;
background:transparent;
}

.sidebar-lang-dial::before,
.sidebar-lang-dial::after {
content:"";
position:absolute;
top:8px;
bottom:8px;
z-index:7;
pointer-events:none;
width:18px;
background:linear-gradient(to right, #080808 0%, rgba(8,8,8,0.82) 56%, rgba(8,8,8,0) 100%);
}

.sidebar-lang-dial::before {
left:0;
box-shadow:inset -1px 0 0 rgba(255,255,255,0.012);
}

.sidebar-lang-dial::after {
right:0;
transform:scaleX(-1);
box-shadow:inset -1px 0 0 rgba(255,255,255,0.012);
}

.sidebar-lang-wheel {
position:absolute;
left:50%;
top:8px;
width:calc(100% - 14px);
height:154px;
transform:translateX(-50%);
z-index:4;
overflow:visible;
}

.sidebar-lang-fan-shell {
fill:#101010;
stroke:#202020;
stroke-width:1;
shape-rendering:geometricPrecision;
}

.sidebar-lang-fan-select {
fill:#141414;
stroke:#202020;
stroke-width:1;
vector-effect:non-scaling-stroke;
shape-rendering:geometricPrecision;
}

.sidebar-lang-fan-lines line {
stroke:#050505;
stroke-width:1;
shape-rendering:crispEdges;
vector-effect:non-scaling-stroke;
}

.sidebar-lang-pointer-svg line {
stroke:#9f3f38;
stroke-width:1;
shape-rendering:crispEdges;
vector-effect:non-scaling-stroke;
}

.sidebar-lang-hit-zones {
pointer-events:all;
}

.sidebar-lang-hit {
fill:transparent;
stroke:transparent;
pointer-events:all;
cursor:pointer;
}

.sidebar-lang-hit.is-hidden,
.sidebar-lang-label.is-hidden {
pointer-events:none;
opacity:0;
visibility:hidden;
}

.sidebar-lang-hit.is-disabled {
pointer-events:none;
}

.sidebar-lang-label {
cursor:pointer;
pointer-events:all;
fill:#626262;
color:#626262;
text-shadow:1px 1px 0 #000;
transition:none;
}

.sidebar-lang-selector:not(.is-dragging) .sidebar-lang-label {
transition:
transform 150ms cubic-bezier(.18,.74,.22,1),
opacity 0ms linear,
fill 0ms linear,
color 0ms linear;
}

.sidebar-lang-label text {
font-family:inherit;
paint-order:stroke;
stroke:#000000;
stroke-width:2px;
stroke-linejoin:round;
pointer-events:none;
}

.sidebar-lang-sector-code {
font-size:12px;
font-weight:700;
line-height:1;
letter-spacing:0.2px;
fill:currentColor;
}

.sidebar-lang-sector-name {
font-size:8px;
font-weight:700;
line-height:1;
fill:currentColor;
}

.sidebar-lang-label:hover,
.sidebar-lang-label.is-selected {
color:#e2e2e2;
fill:#e2e2e2;
}

.sidebar-lang-label.is-selected .sidebar-lang-sector-code {
fill:#e2e2e2;
font-size:13px;
}

.sidebar-lang-label.is-selected .sidebar-lang-sector-name {
fill:#c8c8c8;
font-size:8.5px;
}

.sidebar-lang-label.is-current .sidebar-lang-sector-code {
fill:#c8c8c8;
}

.sidebar-lang-label.is-disabled {
fill:#3a3a3a !important;
color:#3a3a3a !important;
pointer-events:none;
}

.sidebar-lang-pointer {
position:absolute;
left:50%;
top:10px;
width:0;
height:0;
transform:translateX(-50%);
background:transparent;
z-index:9;
pointer-events:none;
}

.sidebar-lang-pointer::before {
content:"";
position:absolute;
left:50%;
top:-1px;
width:0;
height:0;
transform:translateX(-50%);
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:11px solid #b84a43;
border-bottom:0;
}

.sidebar-lang-pointer::after {
content:none;
}

.sidebar-lang-hub {
position:absolute;
left:50%;
bottom:16px;
width:42px;
height:42px;
transform:translateX(-50%);
z-index:10;
padding:0;
box-sizing:border-box;
border-radius:50%;
background:linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);
border:1px solid;
border-color:#333333 #202020 #181818 #202020;
color:#c8c8c8;
cursor:pointer;
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.68),
0 0 0 1px rgba(0,0,0,0.62);
transition:none !important;
}

.sidebar-lang-hub:hover:not(:disabled) {
background:linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);
border-color:#444444 #333333 #202020 #333333;
color:#ffffff;
}

.sidebar-lang-hub:active:not(:disabled) {
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);
}

.sidebar-lang-hub:disabled,
.sidebar-lang-hub.is-disabled {
opacity:0.62;
cursor:default;
}

.sidebar-lang-hub-symbol {
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
font-size:18px;
font-weight:700;
line-height:1;
position:relative;
top:-1px;
}

.sidebar-lang-selector.is-dragging,
.sidebar-lang-selector.is-dragging .sidebar-lang-hit,
.sidebar-lang-selector.is-dragging .sidebar-lang-label {
cursor:grabbing;
}

/* -----------------------------------------
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 {
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:min(calc(100vw - 32px), var(--layout-shell-w)) !important;
max-width:var(--layout-shell-w) !important;
margin:0 auto !important;
padding:20px 0 0 !important;
box-sizing:border-box !important;
}

#clbi-top-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:10px;
}

#clbi-top-nav-main {
position:relative;
display:flex;
align-items:stretch;
width:100%;
min-height:55px;
}

#clbi-top-nav-logo {
display:flex;
align-items:center;
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,
.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-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;
}