편집토론문서 역사

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

편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 수동 되돌리기
1번째 줄: 1번째 줄:
@import url('/index.php?title=MediaWiki:Template.Infobox.css&action=raw&ctype=text/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% + var(--clbi-content-extra, 14px)) !important;
max-height:calc(100% + var(--clbi-content-extra, 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. 세로 가변 셸 / 좌측 최근 변경 최종 구조
----------------------------------------- */
 
/*
목표:
- 기본 상태에서는 원래 높이와 원래 배치를 유지한다.
- 세로가 부족할 때만 뉴스 박스 외곽 프레임을 줄인다.
- 최근 변경 항목은 모두 렌더링한다.
- 항목은 viewport 내부에서만 잘린다.
- 하단 마감은 실제 .news-bottom-finish DOM 행이 담당한다.
*/
 
@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-top-nav-wrap,
#clbi-bottom-nav-wrap,
.content-wrapper {
top:0 !important;
bottom:auto !important;
transform:none !important;
}
 
.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,
  Proitem Animation
.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;
}
 
#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;
}
 
.news-bottom-finish {
display:none;
}
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained {
display:flex !important;
flex-direction:column !important;
height:var(--adaptive-news-h) !important;
max-height:var(--adaptive-news-h) !important;
min-height:0 !important;
overflow:hidden !important;
padding:0 8px 8px !important;
box-sizing:border-box !important;
position:relative !important;
}
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained > .clbi-left-title {
flex:0 0 auto !important;
}
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box {
display:grid !important;
grid-template-rows:auto auto auto minmax(0, 1fr) 12px !important;
grid-template-columns:minmax(0, 1fr) !important;
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
padding:3px !important;
overflow:hidden !important;
position:relative !important;
box-sizing:border-box !important;
background:#080808 !important;
}
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained #clbi-left-news-changelog-title {
grid-row:1 !important;
}
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-changelog-feed {
grid-row:2 !important;
min-height:0 !important;
overflow:hidden !important;
}
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained #clbi-left-news-recent-title {
grid-row:3 !important;
}
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed {
grid-row:4 !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
position:relative !important;
padding:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}


.wip-stripe-layer {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-viewport {
    position: absolute;
position:relative !important;
    top: 0;
display:block !important;
    left: -280px;
width:100% !important;
    width: calc(100% + 560px);
height:100% !important;
    height: 100%;
min-height:0 !important;
    opacity: 0.08;
overflow:hidden !important;
    background: repeating-linear-gradient(
box-sizing:border-box !important;
        45deg,
        #969696,
        #969696 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: 0;
}
}


.wip-active .wip-stripe-layer {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-stack {
    animation: wip-stripe-move 8s linear infinite;
position:relative !important;
display:block !important;
width:100% !important;
min-height:0 !important;
box-sizing:border-box !important;
}
}


.wip-standby .wip-stripe-layer {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish {
    animation: none;
grid-row:5 !important;
display:block !important;
height:12px !important;
min-height:12px !important;
width:100% !important;
background:#080808 !important;
box-shadow:none !important;
pointer-events:none !important;
box-sizing:border-box !important;
}
}


@keyframes wip-stripe-move {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed.is-adaptive-faded .news-recent-viewport::after {
    from { transform: translateX(0); }
content:"" !important;
    to { transform: translateX(280px); }
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:42px !important;
z-index:20 !important;
pointer-events:none !important;
background:
linear-gradient(
to bottom,
rgba(8,8,8,0) 0%,
rgba(8,8,8,0.30) 34%,
rgba(8,8,8,0.72) 68%,
#080808 100%
) !important;
}
}


/* =========================================
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-item.is-adaptive-hidden {
  Collapsible
display:grid !important;
  ========================================= */
}


[id^="collapsible"] {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained::before,
    overflow: hidden;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained::after,
    transition: max-height .25s ease;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box::before,
    max-height: 0;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box::after,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed::after {
content:none !important;
display:none !important;
}
}


/* =========================================
  Color
  ========================================= */


.color-text {
 
    color: var(--text-color);
/* -----------------------------------------
2-Q. 좌측 뉴스 하단 마감 회색선 제거
----------------------------------------- */
 
/*
뉴스 하단 마감 안쪽의 회색선은 .news-bottom-finish의 inset shadow였다.
마감 영역은 #080808 면으로 닫고, 별도 내부 밝은 선을 만들지 않는다.
*/
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish {
background:#080808 !important;
box-shadow:none !important;
transition:background .12s ease, color .12s ease;
}
}


.color-text a,
 
.color-text a:visited,
/* -----------------------------------------
.color-text a:hover,
2-S. 좌측 뉴스 하단 기준선 정렬 / finish 고정
.color-text a:active {
----------------------------------------- */
    color: var(--text-color) !important;
 
    text-decoration-color: var(--text-color) !important;
/*
짧은 세로 화면에서 좌측 뉴스 박스의 외곽 하단은 본문 컨테이너 하단선과 맞춘다.
최근 변경 항목은 feed 안에서만 잘리고, 실제 finish 행 12px은 항상 남는다.
*/
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained {
display:flex !important;
flex-direction:column !important;
height:var(--adaptive-news-h) !important;
max-height:var(--adaptive-news-h) !important;
min-height:0 !important;
overflow:hidden !important;
padding:0 8px 8px !important;
box-sizing:border-box !important;
position:relative !important;
}
}


/* =========================================
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained > .clbi-left-title {
  CRT Glitch Panel
flex:0 0 auto !important;
  ========================================= */
}


.crt-glitch-panel {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box {
    position: relative;
display:flex !important;
    overflow: hidden;
flex-direction:column !important;
    isolation: isolate;
flex:1 1 auto !important;
    border-radius: 5px;
height:auto !important;
    box-shadow:
min-height:0 !important;
        inset 0 0 18px rgba(255,255,255,0.04),
padding:3px !important;
        inset 0 0 42px rgba(133,67,105,0.10),
overflow:hidden !important;
        0 0 18px rgba(133,67,105,0.20);
position:relative !important;
box-sizing:border-box !important;
background:#080808 !important;
}
}


.crt-glitch-panel .vanishing-grid-bg {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-feed-title,
    position: relative;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-changelog-feed {
    overflow: hidden;
flex:0 0 auto !important;
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 45%, rgba(212,90,162,0.18) 0%, transparent 32%),
        linear-gradient(to bottom, #111 0%, #090909 58%, #030303 100%) !important;
}
}


.crt-glitch-panel > * {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed {
    position: relative;
flex:0 0 var(--adaptive-recent-h) !important;
    z-index: 2;
height:var(--adaptive-recent-h) !important;
max-height:var(--adaptive-recent-h) !important;
min-height:0 !important;
position:relative !important;
overflow:hidden !important;
padding:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
}


.crt-glow-content {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-viewport {
    position: relative;
position:relative !important;
    z-index: 2;
display:block !important;
    text-shadow:
width:100% !important;
        -1px 0 0 rgba(80,160,255,0.75),
height:100% !important;
        1px 0 0 rgba(255,55,90,0.65),
max-height:100% !important;
        2px 0 0 rgba(255,210,70,0.45),
min-height:0 !important;
        0 0 2px rgba(255,255,255,0.35),
overflow:hidden !important;
        0 0 6px rgba(212,90,162,0.22),
box-sizing:border-box !important;
        0 0 12px rgba(133,67,105,0.18);
    filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}
}


.crt-glow-content::before {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-stack {
    content: "";
position:relative !important;
    position: absolute;
display:block !important;
    inset: -24px;
width:100% !important;
    z-index: -1;
min-height:0 !important;
    pointer-events: none;
box-sizing:border-box !important;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,0.08) 0%,
            rgba(212,90,162,0.10) 18%,
            rgba(133,67,105,0.08) 34%,
            transparent 68%
        );
    filter: blur(18px);
    opacity: 0.75;
}
}


.crt-glitch-panel .fake-h1,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish {
.crt-glitch-panel h1,
display:block !important;
.crt-glitch-panel h2,
flex:0 0 12px !important;
.crt-glitch-panel strong {
height:12px !important;
    text-shadow:
min-height:12px !important;
        -1px 0 0 rgba(80,160,255,0.95),
width:100% !important;
        1px 0 0 rgba(255,55,90,0.85),
background:#080808 !important;
        2px 0 0 rgba(255,210,70,0.55),
box-shadow:none !important;
        0 0 3px rgba(255,255,255,0.65),
pointer-events:none !important;
        0 0 10px rgba(255,255,255,0.28),
box-sizing:border-box !important;
        0 0 18px rgba(212,90,162,0.35),
        0 0 32px rgba(133,67,105,0.24);
}
}


.crt-glitch-panel img {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed.is-adaptive-faded .news-recent-viewport::after {
    filter:
content:"" !important;
        drop-shadow(-1px 0 0 rgba(80,160,255,0.65))
position:absolute !important;
        drop-shadow(1px 0 0 rgba(255,55,90,0.55))
left:0 !important;
        drop-shadow(2px 0 0 rgba(255,210,70,0.35))
right:0 !important;
        drop-shadow(0 0 6px rgba(212,90,162,0.18));
bottom:0 !important;
height:42px !important;
z-index:20 !important;
pointer-events:none !important;
background:
linear-gradient(
to bottom,
rgba(8,8,8,0) 0%,
rgba(8,8,8,0.28) 32%,
rgba(8,8,8,0.70) 68%,
#080808 100%
) !important;
}
}


.crt-glitch-panel::before {
/* 이전 실험용 pseudo 마감/페이드는 모두 끈다. */
    content: "";
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained::before,
    position: absolute;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained::after,
    inset: -80px 0;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box::before,
    z-index: 3;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box::after,
    pointer-events: none;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed::after {
    opacity: 0.22;
content:none !important;
    background:
display:none !important;
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.08) 0px,
            rgba(255,255,255,0.08) 1px,
            transparent 2px,
            transparent 5px
        );
    mix-blend-mode: screen;
    animation: crt-scanlines-up 7s linear infinite;
}
}


.crt-glitch-panel::after {
 
    content: "";
/* -----------------------------------------
    position: absolute;
2-T. 좌측 뉴스 기본 높이 보존 기준
    inset: 0;
----------------------------------------- */
    z-index: 4;
 
    pointer-events: none;
/*
    opacity: 0;
뉴스 박스는 충분한 높이에서 자연 내용 높이를 유지한다.
    background:
adaptive-constrained 상태는 실제로 본문 하단을 넘칠 때만 JS가 부여한다.
        linear-gradient(
*/
            to bottom,
 
            transparent 0%,
 
            rgba(255,255,255,0.18) 48%,
/* -----------------------------------------
            rgba(212,90,162,0.28) 50%,
2-U. 좌측 뉴스 페이드 마스크 / 기존 하단선 보존
            rgba(90,120,255,0.16) 52%,
----------------------------------------- */
            transparent 56%
 
        );
/*
    mix-blend-mode: screen;
하단 마감선은 새로 만들지 않는다.
    animation: crt-glitch-band-up 6.5s steps(1, end) infinite;
페이드 오버레이도 그리지 않는다.
 
기존 문제:
- ::after 페이드가 기존 하단 하이라이트 위를 덮었다.
- border/pseudo로 새 선을 만들면 내부에 의도하지 않은 획처럼 보였다.
 
수정:
- viewport에 그라데이션 overlay를 그리지 않고, mask로 항목 내용만 흐리게 한다.
- .news-bottom-finish는 투명한 공간으로 두어 부모 우물의 기존 마감이 보이게 한다.
*/
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed.is-adaptive-faded .news-recent-viewport::after {
content:none !important;
display:none !important;
}
}


/* =========================================
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed.is-adaptive-faded .news-recent-viewport {
  Horizontal CRT Warp
-webkit-mask-image:linear-gradient(
  ========================================= */
to bottom,
#000 0%,
#000 calc(100% - 46px),
rgba(0,0,0,0.70) calc(100% - 26px),
rgba(0,0,0,0.28) calc(100% - 10px),
transparent 100%
) !important;
mask-image:linear-gradient(
to bottom,
#000 0%,
#000 calc(100% - 46px),
rgba(0,0,0,0.70) calc(100% - 26px),
rgba(0,0,0,0.28) calc(100% - 10px),
transparent 100%
) !important;
}
 
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish {
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}


.crt-horizontal-warp {
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish::before,
    position: relative;
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish::after {
    overflow: hidden;
content:none !important;
    isolation: isolate;
display:none !important;
}
}


.crt-horizontal-warp .crt-glow-content {
/* -----------------------------------------
    animation: crt-base-drift 9s steps(1, end) infinite;
3. 본문 컨테이너
    background-image:
----------------------------------------- */
        repeating-linear-gradient(
 
            to bottom,
/*
            rgba(120,180,255,0.00) 0px,
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.
            rgba(120,180,255,0.00) 3px,
- .liberty-content는 투명 래퍼로 유지한다.
            rgba(120,180,255,0.05) 4px,
- .liberty-content-main은 외곽 프레임이다.
            rgba(255,80,170,0.035) 5px,
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.
            rgba(120,180,255,0.00) 7px
- 외곽과 본문 사이의 기본 간격은 8px이다.
        );
*/
    background-blend-mode: screen;
 
.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;
}
}


.crt-horizontal-warp .crt-glow-content::after {
/* MediaWiki가 본문 프레임 안에 끼워 넣는 중간 래퍼도 높이를 전달해야 한다.
    content: "";
  시스템 CSS/JS 문서에서는 이미 별도 보정이 있었지만, 일반 문서는 이 단계가 빠져
    position: absolute;
  .mw-parser-output이 스크롤 박스가 아니라 내용 높이만큼 늘어나는 블록이 되었다. */
    inset: 0;
.liberty-content-main > #mw-content-text,
    z-index: 6;
.liberty-content-main > .mw-body-content,
    pointer-events: none;
.liberty-content-main #mw-content-text,
    opacity: 0;
.liberty-content-main .mw-body-content {
    background:
position:relative !important;
        linear-gradient(
box-sizing:border-box !important;
            to right,
flex:1 1 auto !important;
            transparent 0%,
height:auto !important;
            rgba(120,180,255,0.18) 10%,
min-height:0 !important;
            rgba(255,255,255,0.18) 48%,
max-height:none !important;
            rgba(212,90,162,0.20) 78%,
margin:0 !important;
            transparent 100%
padding:0 !important;
        );
overflow:hidden !important;
    mix-blend-mode: screen;
display:flex !important;
    animation: crt-wide-horizontal-tear 3.8s steps(1, end) infinite;
flex-direction:column !important;
}
}


/* =========================================
.liberty-content-main .mw-parser-output {
  CRT Animations
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-y:auto !important;
overflow-x:hidden !important;
}


@keyframes crt-scanlines-up {
    from {
        transform: translateY(0);
    }


    to {
.liberty-content-main .mw-parser-output,
        transform: translateY(-80px);
#clbi-left-sidebar,
    }
#clbi-right-sidebar {
scrollbar-width:thin;
scrollbar-color:#333333 #080808;
}
}


@keyframes crt-glitch-band-up {
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */
    0%, 12%, 27%, 43%, 58%, 76%, 100% {
body.page-title-visible .liberty-content-header + .mw-parser-output,
        opacity: 0;
body.backend-system-page .liberty-content-header + .mw-parser-output {
        transform: translateY(100%);
margin-top:8px !important;
    }
}


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


    14% {
.liberty-content {
        opacity: 0.15;
border:none !important;
        transform: translateY(62%) skewX(-2deg);
box-shadow:none !important;
    }
border-radius:0 !important;
background:transparent !important;
}


    28% {
/* -----------------------------------------
        opacity: 0.55;
4. 본문 헤더
        transform: translateY(35%);
----------------------------------------- */
    }


    29% {
.liberty-content-header {
        opacity: 0.18;
background:transparent !important;
        transform: translateY(28%) skewX(2deg);
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;
}


    44% {
.liberty-content-header .content-tools {
        opacity: 0.65;
display:none !important;
        transform: translateY(10%);
order:2 !important;
    }
flex-shrink:0 !important;
padding-top:0 !important;
padding-right:0 !important;
}


    45% {
.liberty-content-header .title {
        opacity: 0.12;
order:1 !important;
        transform: translateY(4%) skewX(-1deg);
flex:1 !important;
    }
display:flex !important;
align-items:flex-end !important;
margin:0 !important;
padding:0 !important;
}


    59% {
.liberty-content-header h1 {
        opacity: 0.5;
margin:0 !important;
        transform: translateY(-20%);
padding:0 !important;
    }
}


    60% {
.liberty-content-header .contentSub {
        opacity: 0.16;
display:none !important;
        transform: translateY(-26%) skewX(2deg);
}
    }


    77% {
        opacity: 0.55;
        transform: translateY(-55%);
    }


    78% {
/* 일반 문서에서는 기본 제목 영역을 숨긴다.
        opacity: 0;
  CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는
        transform: translateY(-70%);
  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;
}
}


@keyframes crt-base-drift {
body.page-title-hidden .mw-page-title-main,
    0%, 88%, 100% {
body.page-title-hidden .mw-page-title-main::after,
        transform: translateX(0);
body.page-title-hidden .mw-page-title-namespace,
        filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
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;
}


    89% {
        transform: translateX(-2px) skewX(-0.4deg);
        filter:
            contrast(1.08)
            brightness(1.05)
            drop-shadow(0 0 7px rgba(212,90,162,0.24));
    }


    90% {
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.
        transform: translateX(3px) skewX(0.5deg);
  감상 모드 여부와 관계없이 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;
}


    91% {
        transform: translateX(-1px);
    }


    92% {
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.
        transform: translateX(0);
  backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */
        filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
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;
}
}


@keyframes crt-wide-horizontal-tear {
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {
    0%, 8%, 17%, 29%, 43%, 61%, 78%, 100% {
margin-top:0 !important;
        opacity: 0;
}
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }


    9% {
        opacity: 0.45;
        transform: translateX(-18px) skewX(-3deg);
        clip-path: inset(18% 0 70% 0);
    }


    10% {
/* 대문 title hard fallback
        opacity: 0.28;
  Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도
        transform: translateX(24px) skewX(4deg);
  Common.js가 현재 문서를 대문으로 판정해 body.clbi-main-page를 붙인 경우에만
        clip-path: inset(21% 0 64% 0);
  MediaWiki 기본 제목을 강제로 숨긴다.
    }
  SPA 이동 뒤 native page-대문/rootpage-대문 body class가 남아 시스템 문서까지
  대문 규칙을 받는 일을 막기 위해 native page class에는 의존하지 않는다. */
body.action-view.clbi-main-page .liberty-content-header,
body.action-view.clbi-main-page .liberty-content-header .title,
body.action-view.clbi-main-page .liberty-content-header .title h1,
body.action-view.clbi-main-page .liberty-content-header h1,
body.action-view.clbi-main-page .mw-page-title-main,
body.action-view.clbi-main-page .mw-page-title-main::after,
body.action-view.clbi-main-page .mw-page-title-namespace,
body.action-view.clbi-main-page .mw-page-title-namespace::after,
body.action-view.clbi-main-page .mw-page-title-separator,
body.action-view.clbi-main-page .mw-page-title-separator::after,
body.action-view.clbi-main-page #firstHeading,
body.action-view.clbi-main-page .firstHeading,
body.action-view.clbi-main-page .mw-first-heading,
body.action-view.clbi-main-page .page-heading,
body.action-view.clbi-main-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;
}


    18% {
body.action-view.clbi-main-page .liberty-content-header + .mw-parser-output {
        opacity: 0.38;
margin-top:0 !important;
        transform: translateX(32px) skewX(5deg);
}
        clip-path: inset(42% 0 47% 0);
    }


    19% {
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */
        opacity: 0.16;
.liberty-content-header .content-tools,
        transform: translateX(-28px) skewX(-4deg);
.content-tools {
        clip-path: inset(46% 0 43% 0);
display:none !important;
    }
}


    30% {
        opacity: 0.48;
        transform: translateX(-36px) skewX(-6deg);
        clip-path: inset(58% 0 30% 0);
    }


    31% {
/* -----------------------------------------
        opacity: 0.18;
4-A. MediaWiki CSS/JS 문서 표시
        transform: translateX(20px) skewX(3deg);
----------------------------------------- */
        clip-path: inset(61% 0 27% 0);
    }


    44% {
/*
        opacity: 0.36;
CSS/JS 시스템 문서는 기본 제목을 숨기고 우상단 문서 표식과 raw source viewer를 사용한다.
        transform: translateX(18px) skewX(3deg);
        clip-path: inset(8% 0 84% 0);
    }


    45% {
중요 구조:
        opacity: 0.12;
- .liberty-content-main : 외곽 #1d1d1d 프레임
        transform: translateX(-14px) skewX(-2deg);
- #mw-content-text/.mw-body-content : MediaWiki가 끼워 넣는 중간 래퍼
        clip-path: inset(11% 0 80% 0);
- .mw-parser-output : 내부 #080808 우물
    }
- #clbi-system-source-viewer : 우물 안에서 남은 높이를 차지하는 스크롤 패널


    62% {
이 중간 래퍼를 채우지 않으면 .mw-parser-output이 내용 높이로 접히고,
        opacity: 0.44;
코드 영역이 얇은 줄처럼 보인다.
        transform: translateX(-42px) skewX(-7deg);
*/
        clip-path: inset(73% 0 16% 0);
 
    }
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;
}


    63% {
body.clbi-system-doc-page #mw-content-text,
        opacity: 0.18;
body.clbi-system-doc-page .mw-body-content {
        transform: translateX(30px) skewX(4deg);
position:relative !important;
        clip-path: inset(76% 0 12% 0);
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;
}


    79% {
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {
        opacity: 0.42;
position:relative !important;
        transform: translateX(26px) skewX(4deg);
box-sizing:border-box !important;
        clip-path: inset(31% 0 58% 0);
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;
}


    80% {
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {
        opacity: 0.14;
flex:0 0 auto !important;
        transform: translateX(-20px) skewX(-3deg);
        clip-path: inset(34% 0 54% 0);
    }
}
}


/* =========================================
body.clbi-system-doc-page .clbi-system-original-source-hidden {
  Retro Horizon Grid Background
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;
}


.retro-grid-bg {
.clbi-system-doc-title {
    position: relative;
display:block !important;
    overflow: hidden;
max-width:500px !important;
    border-radius: 5px;
text-align:right !important;
    background:
font-size:24px !important;
        linear-gradient(
line-height:1 !important;
            to bottom,
font-weight:900 !important;
            rgba(13, 6, 19, 0.98) 0%,
letter-spacing:0.01em !important;
            rgba(25, 9, 33, 0.82) 44%,
color:#e2e2e2 !important;
            rgba(53, 19, 56, 0.50) 60%,
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;
            rgba(4, 4, 7, 0.96) 61%,
white-space:nowrap !important;
            rgba(2, 2, 4, 1) 100%
word-break:normal !important;
        ) !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
}


.retro-grid-bg .crt-glow-content {
body.clbi-system-doc-page .liberty-content-header,
    position: relative;
body.clbi-system-doc-page .liberty-content-header .title,
    z-index: 5;
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;
}
}


.retro-grid-bg::before {
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {
    content: "";
margin-top:0 !important;
    position: absolute;
    left: -10%;
    right: -10%;
    top: 56%;
    height: 16%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 50% 50%,
            rgba(230,210,225,0.28) 0%,
            rgba(204,94,168,0.30) 20%,
            rgba(184,56,142,0.20) 44%,
            transparent 76%
        );
    filter: blur(9px);
    opacity: 0.68;
}
}


.retro-grid-bg::after {
/* -----------------------------------------
    content: "";
5. 페이지 전환 피드백
    position: absolute;
----------------------------------------- */
    left: 50%;
 
    top: 61%;
body::after {
    width: 150%;
content:'';
    height: 115%;
position:fixed;
    z-index: 2;
inset:0;
    pointer-events: none;
background:rgba(0,0,0,0);
    background-image:
transition:background 0.2s ease, opacity 0.2s ease;
        linear-gradient(
opacity:0;
            to right,
pointer-events:none;
            rgba(204,64,156,0.72) 1px,
z-index:99999;
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(204,64,156,0.70) 1px,
            transparent 1px
        );
    background-size:
        48px 100%,
        100% 26px;
    transform-origin: 50% 0%;
    transform:
        translateX(-50%)
        perspective(430px)
        rotateX(66deg);
    opacity: 0.78;
    filter:
        drop-shadow(0 0 3px rgba(204,64,156,0.58))
        drop-shadow(0 0 10px rgba(204,64,156,0.30));
    animation: retro-grid-flow 1.8s linear infinite;
    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 4%,
            black 82%,
            transparent 100%
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 4%,
            black 82%,
            transparent 100%
        );
}
}


.retro-grid-bg .crt-glow-content::before {
body.page-loading::after {
    content: "";
background:rgba(0,0,0,0.5);
    position: absolute;
opacity:1;
    inset: -42px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 50% 56%,
            rgba(220,220,225,0.05) 0%,
            rgba(204,64,156,0.07) 22%,
            rgba(96,152,204,0.05) 42%,
            transparent 70%
        );
    filter: blur(20px);
    opacity: 0.52;
}
}


@keyframes retro-grid-flow {
/* -----------------------------------------
    from {
6. 좌우 사이드바 공통
        background-position:
----------------------------------------- */
            0 0,
            0 0;
    }


    to {
#clbi-left-sidebar,
        background-position:
#clbi-right-sidebar {
            0 0,
position:relative;
            0 -26px;
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,
  CRT Monitor Frame
.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);
}


.crt-monitor-frame {
.clbi-left-title,
    position: relative;
.clbi-right-title {
    box-sizing: border-box;
min-height:34px;
    padding: 34px 46px 38px 46px;
padding:0 2px;
    border-radius: 22px;
font-weight:700;
    background:
font-size:12px;
        linear-gradient(145deg, #303030 0%, #181818 22%, #080808 58%, #202020 100%);
color:#e2e2e2;
    border: 2px solid #2f2f2f;
border:0;
    box-shadow:
background:transparent;
        inset 0 2px 0 rgba(255,255,255,0.18),
display:flex;
        inset 0 -3px 0 rgba(0,0,0,0.85),
align-items:center;
        inset 3px 0 0 rgba(255,255,255,0.06),
gap:6px;
        inset -3px 0 0 rgba(0,0,0,0.75),
line-height:1;
        0 0 0 3px #050505,
text-shadow:1px 1px 0 #000;
        0 0 0 5px #242424,
box-shadow:none;
        0 12px 20px rgba(0,0,0,0.62),
        0 24px 42px rgba(0,0,0,0.52),
        0 42px 70px rgba(0,0,0,0.34);
}
}


.crt-monitor-frame::before {
.clbi-left-content,
    content: "";
.clbi-right-content {
    position: absolute;
margin:0;
    inset: 0;
padding:8px;
    border-radius: 22px;
box-sizing:border-box;
    pointer-events: none;
color:#c8c8c8;
    opacity: 0.16;
font-size:12px;
    background:
line-height:1.65;
        repeating-linear-gradient(
background:#080808;
            135deg,
border:0;
            rgba(255,255,255,0.035) 0px,
box-shadow:
            rgba(255,255,255,0.035) 1px,
inset 0 1px 0 #101010,
            transparent 1px,
inset -1px 0 0 #101010,
            transparent 5px
inset 1px 0 0 #555555,
        ),
inset 0 -1px 0 #555555;
        radial-gradient(
            ellipse at 28% 12%,
            rgba(255,255,255,0.12) 0%,
            transparent 45%
        );
    mix-blend-mode: screen;
}
}


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


.crt-monitor-inner {
.clbi-right-content a:not(.clbi-user-btn):hover,
    position: relative;
.clbi-left-content a:not(.clbi-user-btn):hover {
    box-sizing: border-box;
color:#ffffff !important;
    padding: 18px;
    border-radius: 16px;
    background:
        linear-gradient(145deg, #050505 0%, #111 44%, #070707 100%);
    border: 1px solid #050505;
    box-shadow:
        inset 0 5px 14px rgba(0,0,0,0.95),
        inset 0 -2px 4px rgba(255,255,255,0.06),
        inset 4px 0 10px rgba(0,0,0,0.85),
        inset -4px 0 10px rgba(0,0,0,0.85),
        0 1px 0 rgba(255,255,255,0.12);
}
}


.crt-monitor-screen {
/* -----------------------------------------
    position: relative;
7. 유저 박스
    overflow: hidden;
----------------------------------------- */
    border-radius: 9px / 18px;
 
    background: #050505;
.profile-card-box {
    border: 2px solid #050505;
position:relative;
    box-shadow:
overflow:hidden;
        inset 0 0 0 2px #151515,
background:#101010;
        inset 0 0 22px rgba(0,0,0,0.95),
        inset 0 0 48px rgba(0,0,0,0.75),
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 18px rgba(133,67,105,0.18);
}
}


.crt-monitor-screen::before {
#clbi-user-avatar-wrap,
    content: "";
#clbi-user-avatar-wrap.profile-identity-panel {
    position: absolute;
position:relative;
    inset: 0;
display:block;
    z-index: 20;
min-height:180px;
    pointer-events: none;
margin:0;
    border-radius: 9px / 18px;
padding:0 8px;
    background:
background:#1d1d1d;
        radial-gradient(
border:none;
            ellipse at 50% 50%,
border-bottom:1px solid #202020;
            transparent 0%,
box-shadow:
            transparent 58%,
inset 0 1px 0 rgba(255,255,255,0.050),
            rgba(0,0,0,0.22) 82%,
inset 0 -1px 0 rgba(0,0,0,0.70);
            rgba(0,0,0,0.58) 100%
        ),
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.05) 18%,
            transparent 38%,
            transparent 100%
        );
    box-shadow:
        inset 0 0 28px rgba(255,255,255,0.04),
        inset 0 0 60px rgba(0,0,0,0.65);
}
}


.crt-monitor-screen .crt-glitch-panel,
.profile-avatar-stage {
.crt-monitor-screen .retro-grid-bg {
position:absolute;
    border-radius: 8px / 16px;
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);
}
}


.crt-monitor-screen .crt-glitch-panel {
.profile-avatar-stage::before {
    box-shadow: none;
content:"";
position:absolute;
left:7px;
right:7px;
top:7px;
height:1px;
background:rgba(255,255,255,0.026);
pointer-events:none;
}
}


#clbi-main-crt-hero-wrap {
.profile-avatar-stage::after {
    width: 100%;
content:"";
    margin: 0 auto 14px auto;
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-main-crt-hero {
#clbi-user-avatar {
    width: 100%;
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 {
  Compact CRT Media Frame
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;
}


.compact-crt-media {
#clbi-user-name-row,
    position: relative;
#clbi-user-name-row.profile-name-row {
    box-sizing: border-box;
position:absolute;
    width: fit-content;
left:8px;
    max-width: 100%;
right:8px;
    margin: 6px auto;
top:calc(50% + 52px);
    padding: 10px 14px;
bottom:0;
    border-radius: 10px;
width:auto;
    background:
margin:0;
        linear-gradient(
min-height:0;
            145deg,
line-height:1.2;
            #242424 0%,
text-align:center;
            #141414 34%,
display:flex;
            #070707 70%,
align-items:center;
            #171717 100%
justify-content:center;
        );
    border: 1px solid #2b2b2b;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -2px 0 rgba(0,0,0,0.82),
        inset 2px 0 0 rgba(255,255,255,0.035),
        inset -2px 0 0 rgba(0,0,0,0.62),
        0 0 0 2px #050505,
        0 0 0 3px #242424,
        0 4px 12px rgba(0,0,0,0.68);
    overflow: hidden;
}
}


.compact-crt-media .mw-default-size,
#clbi-user-name-row.profile-name-row-guest {
.compact-crt-media .mw-file-element,
display:flex;
.compact-crt-media img {
align-items:center;
    position: relative;
justify-content:center;
    z-index: 1;
}
}


.compact-crt-media img {
#clbi-user-name-row #clbi-user-name {
    max-width: 100%;
display:inline-block;
    height: auto;
max-width:100%;
    filter:
margin-top:0;
        drop-shadow(0 1px 3px rgba(0,0,0,0.72))
vertical-align:middle;
        drop-shadow(0 0 4px rgba(255,255,255,0.06));
color:#e2e2e2 !important;
    animation: compact-crt-image-jitter 1.25s steps(1, end) infinite;
text-decoration:none !important;
}
}


.compact-crt-media::before {
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {
    content: "";
max-width:100%;
    position: absolute;
    inset: 6px;
    z-index: 3;
    border-radius: 7px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 50% 50%,
            transparent 0%,
            transparent 54%,
            rgba(0,0,0,0.20) 78%,
            rgba(0,0,0,0.58) 100%
        ),
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.040) 18%,
            transparent 38%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.030) 0%,
            transparent 34%,
            rgba(0,0,0,0.26) 100%
        );
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.028),
        inset 0 0 38px rgba(0,0,0,0.66);
}
}


.compact-crt-media::after {
.profile-svg {
    content: "";
display:block;
    position: absolute;
width:100%;
    inset: 6px;
height:100%;
    z-index: 4;
stroke:currentColor;
    border-radius: 7px;
fill:none;
    pointer-events: none;
vertical-align:middle;
    opacity: 0.34;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.070) 0px,
            rgba(255,255,255,0.070) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode: screen;
}
}


.compact-crt-static {
.clbi-svg-nav-icon {
    position: absolute;
display:flex !important;
    inset: 6px;
align-items:center;
    z-index: 5;
justify-content:center;
    border-radius: 7px;
color:#e2e2e2;
    pointer-events: none;
line-height:1;
    opacity: 0.30;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 4px,
            rgba(255,255,255,0.10) 5px,
            transparent 6px,
            transparent 10px
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 43%,
            rgba(255,255,255,0.11) 49%,
            rgba(180,180,180,0.08) 50%,
            rgba(90,90,90,0.08) 51%,
            transparent 56%,
            transparent 100%
        );
    mix-blend-mode: screen;
    animation:
        compact-crt-static-roll 3.8s linear infinite,
        compact-crt-static-flicker 1.7s steps(1, end) infinite;
}
}


.compact-crt-media:hover::after {
.clbi-svg-nav-icon .profile-svg {
    opacity: 0.40;
width:22px;
height:22px;
}
}


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


.compact-crt-media:hover img {
.sidebar-title-svg .profile-svg {
    filter:
width:16px;
        drop-shadow(0 1px 3px rgba(0,0,0,0.78))
height:16px;
        drop-shadow(0 0 5px rgba(255,255,255,0.08));
}
}


@keyframes compact-crt-static-roll {
.profile-action-icon {
    from {
position:relative;
        background-position:
top:0;
            0 0,
display:inline-flex;
            0 110%;
align-items:center;
    }
justify-content:center;
width:15px;
height:15px;
color:#8a8a8a;
pointer-events:none;
line-height:1;
}


    to {
.profile-action-icon .profile-svg {
        background-position:
width:15px;
            0 -32px,
height:15px;
            0 -30%;
    }
}
}


@keyframes compact-crt-static-flicker {
.profile-action-box .clbi-user-btn:hover .profile-action-icon,
    0%, 100% {
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {
        transform: translateX(0);
color:#ffffff;
        opacity: 0.26;
}
    }


    11% {
.profile-action-box .clbi-user-btn-logout .profile-action-icon {
        transform: translateX(-1px);
color:#8b5f59;
        opacity: 0.36;
}
    }


    12% {
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {
        transform: translateX(1px);
color:#e0a199;
        opacity: 0.22;
}
    }


    36% {
        transform: translateX(0);
        opacity: 0.30;
    }


    37% {
        transform: translateX(1px);
        opacity: 0.38;
    }


    38% {
.news-title-icon.sidebar-title-svg {
        transform: translateX(-1px);
display:inline-flex;
        opacity: 0.24;
align-items:center;
    }
justify-content:center;
width:16px;
height:16px;
line-height:1;
color:#e2e2e2 !important;
flex:0 0 16px;
vertical-align:middle;
}


    64% {
.news-title-icon.sidebar-title-svg .profile-svg {
        transform: translateX(0);
width:16px;
        opacity: 0.32;
height:16px;
    }
display:block;
}


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


    66% {
.profile-quick-btn {
        transform: translateX(0);
position:relative;
        opacity: 0.26;
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;
}
}


@keyframes compact-crt-image-jitter {
.profile-quick-btn:hover {
    0%, 82%, 100% {
background:
        transform: translateX(0);
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);
}


    83% {
.profile-quick-icon {
        transform: translateX(-1px);
display:flex;
    }
align-items:center;
justify-content:center;
width:22px;
height:22px;
line-height:1;
color:currentColor;
pointer-events:none;
}


    84% {
.profile-quick-icon .profile-svg {
        transform: translateX(1px);
display:block;
    }
width:22px;
height:22px;
}


    85% {
.profile-quick-tip {
        transform: translateX(0);
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;
}


    92% {
.profile-quick-btn:hover .profile-quick-tip,
        transform: translateX(1px);
.profile-quick-btn:focus-visible .profile-quick-tip {
    }
visibility:visible;
opacity:1;
transform:translate(-50%, 0);
}


    93% {
/* -----------------------------------------
        transform: translateX(-1px);
9. 유저 버튼
    }
----------------------------------------- */


    94% {
.clbi-user-btn-grid {
        transform: translateX(0);
display:grid;
    }
grid-template-columns:1fr;
gap:4px;
}
}


.compact-crt-media.compact-crt-portrait {
.profile-divider {
    padding: 4px 5px;
height:1px;
    border-radius: 8px;
margin:9px 7px;
background:#202020;
box-shadow:
0 1px 0 rgba(255,255,255,0.018);
}
}


.compact-crt-media.compact-crt-portrait::before {
.profile-action-box {
    inset: 3px;
position:relative;
    border-radius: 5px;
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);
}
}


.compact-crt-media.compact-crt-portrait::after {
.profile-action-box .clbi-user-btn {
    inset: 3px;
position:relative;
    border-radius: 5px;
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;
}
}


.compact-crt-media.compact-crt-portrait .compact-crt-static {
.profile-action-box .clbi-user-btn:last-child {
    inset: 3px;
margin-bottom:0 !important;
    border-radius: 5px;
}
}


.compact-crt-media.compact-crt-portrait img,
.profile-action-label {
.compact-crt-media.compact-crt-portrait .mw-file-element {
display:flex;
    display: block;
align-items:center;
min-width:0;
height:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
line-height:1;
}
}


/* =========================================
.profile-action-arrow {
  Related Template Title
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;
}


.related-template-title {
.profile-action-box .clbi-user-btn:hover {
    position: relative;
background:
    overflow: hidden;
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;
    width: 100%;
border-color:
    border-radius: 5px;
#444444
    background: #111111;
#333333
    color: #fff;
#202020
    box-shadow:
#333333 !important;
        inset 1px 0 0 #494949,
color:#ffffff !important;
        inset 0 -1px 0 #555;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
0 0 0 1px rgba(255,255,255,0.018) !important;
}
}


.related-template-title::before {
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {
    content: "";
color:#ffffff;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.070) 0%,
            rgba(255,255,255,0.026) 18%,
            transparent 45%,
            rgba(0,0,0,0.18) 100%
        ),
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.045) 18%,
            transparent 36%,
            transparent 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.026),
        inset 0 0 14px rgba(0,0,0,0.30);
}
}


.related-template-title::after {
.profile-action-box .clbi-user-btn:active {
    content: "";
background:
    position: absolute;
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;
    inset: 0;
border-color:
    z-index: 2;
#050505
    pointer-events: none;
#202020
    border-radius: inherit;
#333333
    opacity: 0.20;
#202020 !important;
    background:
box-shadow:
        repeating-linear-gradient(
inset 1px 1px 3px rgba(0,0,0,0.82),
            to bottom,
inset -1px -1px 0 rgba(255,255,255,0.035) !important;
            rgba(255,255,255,0.055) 0px,
            rgba(255,255,255,0.055) 1px,
            transparent 2px,
            transparent 4px
        );
    mix-blend-mode: screen;
}
}


.related-template-title > * {
.profile-action-box .clbi-user-btn-logout {
    position: relative;
color:#c88a80 !important;
    z-index: 3;
border-color:
#3f3f3f
#2a2020
#181010
#2a2020 !important;
}
}


/* =========================================
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {
  Page Top CRT Banner
color:#8b5f59;
  Template use:
}
  {{Banner|[[파일:example.png{{!}}1000px{{!}}link=]]|80px|20px}}
  2번 인자: 양수면 좌측 이동
  3번 인자: 양수면 아래 이동
  ========================================= */


.crt-page-monitor-frame {
.profile-action-box .clbi-user-btn-logout:hover {
    position: relative;
background:
    box-sizing: border-box;
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;
    width: 100%;
border-color:
    aspect-ratio: 2560 / 580;
#6a3933
    margin: 0 auto 16px auto;
#3f2623
    padding: 14px 20px 16px 20px;
#181010
    border-radius: 18px;
#3f2623 !important;
    background:
color:#e0a199 !important;
        linear-gradient(
            145deg,
            #151515 0%,
            #0b0b0b 28%,
            #050505 58%,
            #181818 100%
        );
    border: 2px solid #242424;
    box-shadow:
        inset 0 3px 8px rgba(0,0,0,0.78),
        inset 0 -2px 0 rgba(255,255,255,0.030),
        inset 4px 0 10px rgba(0,0,0,0.72),
        inset -3px 0 0 rgba(0,0,0,0.78),
        0 0 0 3px #050505,
        0 0 0 5px #242424;
    overflow: hidden;
}
}


.crt-page-monitor-frame::before {
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {
    content: "";
color:#e0a199;
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    opacity: 0.08;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.38) 0%,
            transparent 20%,
            transparent 100%
        ),
        linear-gradient(
            to right,
            rgba(0,0,0,0.34) 0%,
            transparent 18%,
            transparent 100%
        );
    mix-blend-mode: normal;
}
}


.crt-page-monitor-frame::after {
.profile-action-box .clbi-user-btn.clbi-user-btn-active {
    content: none;
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;
}
}


.crt-page-monitor-inner {
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {
    position: relative;
color:#ffffff;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 6px;
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            #020202 0%,
            #080808 45%,
            #030303 100%
        );
    border: 1px solid #020202;
    box-shadow:
        inset 0 11px 24px rgba(0,0,0,0.98),
        inset 0 -2px 3px rgba(255,255,255,0.028),
        inset 8px 0 20px rgba(0,0,0,0.94),
        inset -8px 0 20px rgba(0,0,0,0.94),
        0 0 0 1px rgba(255,255,255,0.030);
}
}


.crt-page-monitor-screen {
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */
    position: relative;
.clbi-user-btn {
    width: 100%;
display:flex !important;
    height: 100%;
align-items:center !important;
    overflow: hidden;
justify-content:center !important;
    border-radius: 8px / 15px;
height:24px !important;
    background: #050505;
padding:0 6px !important;
    border: 1px solid #060606;
margin:0 !important;
    box-shadow:
border-radius:0 !important;
        inset 0 0 18px rgba(0,0,0,0.88),
font-size:11px !important;
        inset 0 0 42px rgba(0,0,0,0.70),
font-weight:700 !important;
        0 0 0 1px rgba(255,255,255,0.026);
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;
}
}


.crt-page-monitor-image,
.clbi-user-btn:hover {
.crt-page-monitor-image-base,
background:#202020 !important;
.crt-page-monitor-image-bloom,
border-color:#333333 !important;
.crt-page-monitor-slice {
color:#ffffff !important;
    position: absolute;
    inset: 0;
    line-height: 0;
    overflow: hidden;
}
}


.crt-page-monitor-image {
.clbi-user-btn-logout {
    z-index: 1;
border-color:#3f2623 !important;
color:#c88a80 !important;
}
}


.crt-page-monitor-image-base {
.clbi-user-btn-logout:hover {
    z-index: 3;
background:#1b1110 !important;
border-color:#6a3933 !important;
color:#e0a199 !important;
}
}


.crt-page-monitor-image-bloom {
.clbi-user-btn.clbi-user-btn-active {
    z-index: 4;
background:#242424 !important;
    pointer-events: none;
border-color:#555555 !important;
    opacity: 0.38;
color:#ffffff !important;
    mix-blend-mode: normal;
box-shadow:
    filter:
inset 0 1px 0 rgba(255,255,255,0.055),
        blur(9px)
inset 0 -1px 0 rgba(0,0,0,0.75) !important;
        brightness(0.92)
        contrast(1.02)
        saturate(1.04);
}
}


.crt-page-monitor-image-base a,
/* -----------------------------------------
.crt-page-monitor-image-base span,
9.4 우측 광고판 Ad(not really)
.crt-page-monitor-image-base .mw-file-description,
----------------------------------------- */
.crt-page-monitor-image-base .mw-default-size,
 
.crt-page-monitor-image-base .mw-image-border,
.right-billboard-box {
.crt-page-monitor-image-bloom a,
position:relative;
.crt-page-monitor-image-bloom span,
background:#1d1d1d;
.crt-page-monitor-image-bloom .mw-file-description,
overflow:visible;
.crt-page-monitor-image-bloom .mw-default-size,
.crt-page-monitor-image-bloom .mw-image-border,
.crt-page-monitor-slice a,
.crt-page-monitor-slice span,
.crt-page-monitor-slice .mw-file-description,
.crt-page-monitor-slice .mw-default-size,
.crt-page-monitor-slice .mw-image-border {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
}


.crt-page-monitor-image-base img,
.right-billboard-title {
.crt-page-monitor-image-base .mw-file-element,
justify-content:flex-start;
.crt-page-monitor-image-bloom img,
background:transparent;
.crt-page-monitor-image-bloom .mw-file-element,
border:0;
.crt-page-monitor-slice img,
box-shadow:none;
.crt-page-monitor-slice .mw-file-element,
gap:4px;
.crt-page-monitor-slice-img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center;
    border: 0 !important;
    transform:
        translate(
            calc(0px - var(--crt-img-left, 0px)),
            var(--crt-img-down, 0px)
        )
        scale(var(--crt-img-scale, 1.04));
    transform-origin: center center;
}
}


.crt-page-monitor-image-base img,
.right-billboard-title-text {
.crt-page-monitor-image-base .mw-file-element {
display:inline-flex;
    filter:
align-items:center;
        brightness(0.84)
gap:4px;
        contrast(1.08)
min-width:0;
        saturate(0.90);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}


.crt-page-monitor-image-bloom img,
.right-billboard-title-main,
.crt-page-monitor-image-bloom .mw-file-element {
.right-billboard-title-note {
    transform:
display:inline-block;
        translate(
min-width:0;
            calc(0px - var(--crt-img-left, 0px)),
overflow:hidden;
            var(--crt-img-down, 0px)
text-overflow:ellipsis;
        )
white-space:nowrap;
        scale(calc(var(--crt-img-scale, 1.04) + 0.02));
}
}


.crt-page-monitor-slice img,
.right-billboard-title-note {
.crt-page-monitor-slice .mw-file-element,
opacity:.20;
.crt-page-monitor-slice-img {
    filter:
        brightness(0.96)
        contrast(1.18)
        saturate(0.82);
}
}


.crt-page-monitor-image::after {
.right-billboard-body {
    content: "";
position:relative;
    position: absolute;
margin:0;
    inset: -3%;
padding:7px;
    z-index: 6;
box-sizing:border-box;
    pointer-events: none;
background:#080808;
    opacity: 0.16;
border:0;
    background:
box-shadow:
        radial-gradient(
inset 0 1px 0 #101010,
            ellipse at 50% 45%,
inset -1px 0 0 #101010,
            rgba(220,235,230,0.12) 0%,
inset 1px 0 0 #555555,
            rgba(170,190,185,0.05) 34%,
inset 0 -1px 0 #555555;
            rgba(70,85,82,0.03) 62%,
overflow:visible;
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.04) 0%,
            rgba(255,255,255,0.014) 28%,
            transparent 70%,
            rgba(0,0,0,0.08) 100%
        );
    mix-blend-mode: normal;
}
}


.crt-page-monitor-slice {
.right-billboard-recess {
    z-index: 5;
position:relative;
    opacity: 0;
height:auto;
    pointer-events: none;
min-height:0;
    mix-blend-mode: screen;
box-sizing:border-box;
    will-change: transform, opacity, clip-path, filter;
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;
}
}


.crt-page-monitor-slice-a {
.right-billboard-recess::before {
    animation: crt-slice-tear-a 4.7s steps(1, end) infinite;
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;
}
}


.crt-page-monitor-slice-b {
.right-billboard-screen {
    animation: crt-slice-tear-b 6.1s steps(1, end) infinite;
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);
}
}


.crt-page-monitor-slice-c {
.right-billboard-image {
    animation: crt-slice-tear-c 7.4s steps(1, end) infinite;
border:0;
background:#050505;
}
}


.crt-page-monitor-screen::before {
.right-billboard-image-base {
    content: "";
position:relative;
    position: absolute;
z-index:3;
    inset: 0;
display:block;
    z-index: 20;
width:100%;
    pointer-events: none;
height:100%;
    border-radius: 8px / 15px;
max-width:100%;
    background:
max-height:none;
        radial-gradient(
object-fit:cover;
            ellipse at 50% 50%,
object-position:center center;
            transparent 0%,
filter:
            transparent 62%,
brightness(0.84)
            rgba(0,0,0,0.16) 78%,
contrast(1.08)
            rgba(0,0,0,0.42) 100%
saturate(0.90);
        ),
transform:none;
        linear-gradient(
transform-origin:center center;
            to bottom,
            rgba(0,0,0,0.18) 0%,
            transparent 14%,
            transparent 82%,
            rgba(0,0,0,0.24) 100%
        ),
        linear-gradient(
            to right,
            rgba(0,0,0,0.18) 0%,
            transparent 8%,
            transparent 92%,
            rgba(0,0,0,0.18) 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 54px rgba(0,0,0,0.54);
}
}


.crt-page-monitor-screen::after {
.right-billboard-image-bloom,
    content: "";
.right-billboard-slice {
    position: absolute;
position:absolute;
    inset: -80px 0;
inset:0;
    z-index: 21;
display:block;
    pointer-events: none;
width:100%;
    opacity: 0.20;
height:100%;
    background:
max-width:none;
        repeating-linear-gradient(
max-height:none;
            to bottom,
object-fit:cover;
            rgba(255,255,255,0.08) 0px,
object-position:center center;
            rgba(255,255,255,0.08) 1px,
border:0;
            transparent 2px,
background:transparent;
            transparent 5px
        );
    mix-blend-mode: screen;
    animation: crt-scanlines-up 7s linear infinite;
}
}


.crt-page-monitor-glitch {
.right-billboard-image-bloom {
    position: absolute;
z-index:4;
    inset: 0;
pointer-events:none;
    z-index: 22;
opacity:.36;
    pointer-events: none;
mix-blend-mode:normal;
    opacity: 0;
filter:
    background:
blur(7px)
        linear-gradient(
brightness(0.92)
            to bottom,
contrast(1.02)
            transparent 0%,
saturate(1.04);
            rgba(255,255,255,0.12) 48%,
transform:scale(1.015);
            rgba(212,90,162,0.14) 50%,
transform-origin:center center;
            rgba(90,120,255,0.08) 52%,
            transparent 56%
        );
    mix-blend-mode: screen;
    animation: crt-soft-glitch-band 8.2s steps(1, end) infinite;
}
}


.crt-page-monitor-tear {
.right-billboard-slice {
    position: absolute;
z-index:5;
    inset: 0;
opacity:0;
    z-index: 23;
pointer-events:none;
    pointer-events: none;
mix-blend-mode:screen;
    opacity: 0;
filter:
    background:
brightness(0.96)
        linear-gradient(
contrast(1.18)
            to right,
saturate(0.82);
            transparent 0%,
transform:scale(1.035);
            rgba(120,180,255,0.07) 10%,
transform-origin:center center;
            rgba(255,255,255,0.11) 48%,
will-change:transform, opacity, clip-path, filter;
            rgba(212,90,162,0.08) 78%,
            transparent 100%
        );
    mix-blend-mode: screen;
    animation: crt-soft-horizontal-tear 5.6s steps(1, end) infinite;
}
}


@keyframes crt-slice-tear-a {
.right-billboard-slice-a {
    0%, 11%, 100% {
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;
        opacity: 0;
}
        transform: translateX(0);
        clip-path: inset(0 0 100% 0);
    }


    12% {
.right-billboard-slice-b {
        opacity: 0.38;
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;
        transform: translateX(-18px);
}
        clip-path: inset(17% 0 78% 0);
    }


    13% {
.right-billboard-slice-c {
        opacity: 0.22;
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;
        transform: translateX(11px);
}
        clip-path: inset(18% 0 77% 0);
        filter: hue-rotate(-8deg);
    }


    14% {
.right-billboard-screen::before {
        opacity: 0;
content:"";
        transform: translateX(0);
position:absolute;
        clip-path: inset(0 0 100% 0);
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);
}


    63% {
.right-billboard-screen::after {
        opacity: 0.30;
content:"";
        transform: translateX(9px);
position:absolute;
        clip-path: inset(24% 0 70% 0);
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;
}


    64% {
.right-billboard-glitch {
        opacity: 0;
position:absolute;
        transform: translateX(0);
inset:0;
        clip-path: inset(0 0 100% 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;
}
}


@keyframes crt-slice-tear-b {
.right-billboard-tear {
    0%, 37%, 100% {
position:absolute;
        opacity: 0;
inset:0;
        transform: translateX(0);
z-index:23;
        clip-path: inset(0 0 100% 0);
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;
}


    38% {
.right-billboard-empty {
        opacity: 0.42;
position:absolute;
        transform: translateX(24px);
inset:0;
        clip-path: inset(43% 0 50% 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;
}


    39% {
.right-billboard-box.is-empty .right-billboard-screen {
        opacity: 0.26;
min-height:352px;
        transform: translateX(-14px);
}
        clip-path: inset(45% 0 48% 0);
        filter: hue-rotate(10deg) brightness(1.08);
    }


    40% {
.right-billboard-box.is-empty .right-billboard-empty {
        opacity: 0;
display:flex;
        transform: translateX(0);
}
        clip-path: inset(0 0 100% 0);
    }


    78% {
.right-billboard-box.is-empty .right-billboard-image,
        opacity: 0.34;
.right-billboard-box.is-empty .right-billboard-slice {
        transform: translateX(-20px);
display:none !important;
        clip-path: inset(51% 0 43% 0);
}
    }


    79% {
.right-billboard-empty-main {
        opacity: 0;
display:block;
        transform: translateX(0);
color:#8a8a8a;
        clip-path: inset(0 0 100% 0);
font-size:10px;
    }
font-weight:700;
line-height:1;
letter-spacing:.7px;
}
}


@keyframes crt-slice-tear-c {
.right-billboard-empty-sub {
    0%, 21%, 100% {
display:block;
        opacity: 0;
max-width:100%;
        transform: translateX(0);
color:#626262;
        clip-path: inset(0 0 100% 0);
font-size:9px;
    }
font-weight:700;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}


    22% {
        opacity: 0.28;
        transform: translateX(-30px);
        clip-path: inset(67% 0 25% 0);
    }


    23% {
        opacity: 0.18;
        transform: translateX(16px);
        clip-path: inset(68% 0 23% 0);
        filter: contrast(1.25) brightness(1.06);
    }


    24% {
.right-billboard-caption {
        opacity: 0;
position:absolute;
        transform: translateX(0);
left:50%;
        clip-path: inset(0 0 100% 0);
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;
}


    91% {
.right-billboard-box:hover .right-billboard-caption,
        opacity: 0.36;
.right-billboard-box:focus-within .right-billboard-caption {
        transform: translateX(18px);
visibility:visible;
        clip-path: inset(73% 0 18% 0);
opacity:1;
    }
transform:translate(-50%, 0);
}


    92% {
.right-billboard-caption-line {
        opacity: 0;
display:block;
        transform: translateX(0);
max-width:100%;
        clip-path: inset(0 0 100% 0);
min-width:0;
    }
height:10px;
line-height:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}


@keyframes crt-soft-glitch-band {
.right-billboard-caption-line.is-gap {
    0%, 52%, 100% {
height:10px;
        opacity: 0;
line-height:10px;
        transform: translateY(80%);
font-size:0;
    }
}


    53% {
.right-billboard-box.is-empty .right-billboard-caption {
        opacity: 0.42;
display:none;
        transform: translateY(36%);
}
    }


    54% {
@keyframes right-billboard-scanlines-up {
        opacity: 0.16;
from { transform:translateY(0); }
        transform: translateY(20%) skewX(-1deg);
to { transform:translateY(-70px); }
    }
}


    55% {
@keyframes right-billboard-slice-tear-a {
        opacity: 0;
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
        transform: translateY(-20%);
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 crt-soft-horizontal-tear {
@keyframes right-billboard-slice-tear-b {
    0%, 68%, 100% {
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
        opacity: 0;
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }
        transform: translateX(0);
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }
        clip-path: inset(0 0 0 0);
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); }
}


    69% {
@keyframes right-billboard-slice-tear-c {
        opacity: 0.32;
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }
        transform: translateX(-16px);
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }
        clip-path: inset(34% 0 58% 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); }
}


    70% {
@keyframes right-billboard-soft-glitch-band {
        opacity: 0.18;
0%, 52%, 100% { opacity:0; transform:translateY(80%); }
        transform: translateX(12px);
53% { opacity:.38; transform:translateY(36%); }
        clip-path: inset(37% 0 55% 0);
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }
    }
55% { opacity:0; transform:translateY(-20%); }
}


    71% {
@keyframes right-billboard-soft-horizontal-tear {
        opacity: 0;
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }
        transform: translateX(0);
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }
        clip-path: inset(0 0 0 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) {
@media (prefers-reduced-motion: reduce) {
    .crt-page-monitor-slice-a,
.right-billboard-slice-a,
    .crt-page-monitor-slice-b,
.right-billboard-slice-b,
    .crt-page-monitor-slice-c,
.right-billboard-slice-c,
    .crt-page-monitor-screen::after,
.right-billboard-screen::after,
    .crt-page-monitor-glitch,
.right-billboard-glitch,
    .crt-page-monitor-tear {
.right-billboard-tear {
        animation: none !important;
animation:none !important;
    }
}
 
.right-billboard-slice,
.right-billboard-glitch,
.right-billboard-tear {
opacity:0 !important;
}
}
 
 
 
/* -----------------------------------------
9.46 좌측 광고판 Ad
----------------------------------------- */
 
/*
좌측 Ad는 언어/뉴스 사이드 박스의 픽셀 규칙을 따른다.
- 제목은 아이콘이 없는 clbi-left-title 우물 변형이다.
- 실제 아이콘 슬롯은 만들지 않고, 텍스트는 좌측 패딩 기준으로 정렬한다.
- right-billboard-recess 이하의 CRT 본체는 원본 구조를 보존한다.
- left-ad-content-shell / right-billboard-body는 구조 래퍼로만 남기고 별도 프레임을 만들지 않는다.
*/
 
#side-toc-box,
.liberty-content-main #toc,
.liberty-content-main .toc {
display:none !important;
}
 
#clbi-left-sidebar .left-ad-box {
position:relative !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-radius:0 !important;
overflow:hidden !important;
padding:0 8px 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;
}
 
#clbi-left-sidebar .left-ad-title {
min-height:0 !important;
height:auto !important;
margin:4px 0 3px !important;
padding:3px 7px !important;
box-sizing:border-box !important;
background:#080808 !important;
border:0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:6px !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:left !important;
text-shadow:1px 1px 0 #000 !important;
}
 
#clbi-left-sidebar .left-ad-title.left-ad-title-iconless {
gap:0 !important;
}
 
#clbi-title-left-ad,
#clbi-left-sidebar .left-ad-title-label {
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
height:16px !important;
min-width:0 !important;
max-width:100% !important;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
letter-spacing:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
 
#clbi-left-sidebar .left-ad-title-text,
#clbi-left-sidebar .left-ad-title-main,
#clbi-left-sidebar .left-ad-title-note {
display:none !important;
}
 
#clbi-left-sidebar .left-ad-content-shell {
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
 
#clbi-left-sidebar .left-ad-box .right-billboard-body {
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
 
#clbi-left-sidebar .left-ad-box .right-billboard-recess {
margin:0 !important;
}
 
#clbi-left-sidebar .left-ad-bottom-finish {
display:none !important;
height:0 !important;
min-height:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none !important;
}
 
#clbi-left-sidebar .left-ad-box.is-left-ad-extended {
height:auto !important;
max-height:none !important;
display:block !important;
min-height:0 !important;
}
 
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .left-ad-title,
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .left-ad-content-shell,
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .right-billboard-body,
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .right-billboard-recess,
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .right-billboard-caption {
flex:none !important;
}
 
#clbi-left-sidebar .left-ad-box.is-left-ad-title-only {
height:auto !important;
max-height:none !important;
}
 
#clbi-left-sidebar .left-ad-box.is-left-ad-title-only .left-ad-content-shell {
display:none !important;
}
 
/* -----------------------------------------
9.44 우측 The Great Wall
----------------------------------------- */
 
/* 우측 사이드바는 본문 컨테이너 높이를 기준으로 고정된다.
  프로필과 SITE INFORMATION은 자기 높이를 유지하고,
  The Great Wall만 남는 세로 공간을 채운다. */
#clbi-right-sidebar {
height:100%;
max-height:100%;
min-height:0;
align-self:stretch;
overflow:hidden;
}
 
#clbi-right-sidebar > .profile-card-box,
#clbi-right-sidebar > .site-info-sidebar {
flex:0 0 auto;
}
 
.great-wall-sidebar {
position:relative;
display:flex;
flex-direction:column;
flex:1 1 auto;
min-height:0;
background:#1d1d1d;
overflow:hidden;
}
 
/* The Great Wall은 좌측 언어/뉴스 타이틀에서 확정한 내부 라벨 패널 표준을 따른다. */
.great-wall-sidebar > .clbi-right-title {
flex:0 0 auto;
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;
justify-content:flex-start;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}
 
.great-wall-title-icon,
.great-wall-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;
}
 
.great-wall-title-icon .profile-svg,
.great-wall-title-icon.sidebar-title-svg .profile-svg {
width:16px;
height:16px;
display:block;
stroke:currentColor;
}
 
#clbi-title-great-wall {
display:inline-flex;
align-items:center;
min-width:0;
height:100%;
color:#e2e2e2;
font-size:12px;
font-weight:700;
line-height:1;
letter-spacing:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
 
.great-wall-content {
position:relative;
flex:1 1 auto;
min-height:0;
height:auto;
padding:3px !important;
box-sizing:border-box;
background:#080808;
line-height:1.4;
overflow:hidden;
display:block;
}
 
.great-wall-list {
position:relative;
min-height:0;
height:100%;
max-height:100%;
margin:0;
padding:0;
box-sizing:border-box;
display:flex;
flex-direction:column;
overflow-y:auto;
overflow-x:hidden;
border-top:1px solid #202020;
border-bottom:1px solid #202020;
scrollbar-width:thin;
scrollbar-color:#333333 #080808;
}
 
/* 메시지 행은 기존 대문 GUESTBOOK의 단순 기록행을 기준으로 한다.
  클릭형 문서 카드가 아니라, 좌측 프로필 사진과 본문 메시지가 쌓이는 채팅형 기록행이다. */
.great-wall-entry {
position:relative;
display:grid;
grid-template-columns:27px minmax(0,1fr);
gap:5px;
width:100%;
min-height:0;
margin:0;
padding:6px 2px 6px 3px;
box-sizing:border-box;
background:transparent !important;
border:0;
border-bottom:1px solid #202020;
border-radius:0;
color:#c8c8c8 !important;
text-align:left;
text-decoration:none !important;
font:inherit;
line-height:1.2;
overflow:visible;
box-shadow:none !important;
transition:background .12s ease, color .12s ease;
}
 
.great-wall-entry:last-child {
border-bottom:none;
}
 
button.great-wall-entry {
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
 
button.great-wall-entry::-moz-focus-inner {
border:0;
padding:0;
}
 
.great-wall-entry:hover,
button.great-wall-entry:focus-visible {
background:#111111 !important;
color:#ffffff !important;
outline:none;
}
 
.great-wall-entry.is-selected,
.great-wall-entry.is-own.is-selected {
background:#111111 !important;
}
 
.great-wall-avatar {
grid-column:1;
grid-row:1;
display:block;
width:25px;
height:25px;
margin:0 0 0;
object-fit:cover;
object-position:center;
background:#070707;
border:1px solid #050505;
box-sizing:border-box;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}
 
.great-wall-bubble {
grid-column:2;
grid-row:1;
position:relative;
min-width:0;
max-width:100%;
padding:0;
box-sizing:border-box;
background:transparent !important;
border:0;
color:#c8c8c8;
box-shadow:none !important;
}
 
.great-wall-entry.is-own .great-wall-bubble,
.great-wall-entry:hover .great-wall-bubble,
.great-wall-entry.is-selected .great-wall-bubble {
background:transparent !important;
border:0;
box-shadow:none !important;
}
 
.great-wall-entry-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
min-width:0;
height:auto;
margin:0 0 3px;
font-size:9px;
line-height:1.2;
}
 
.great-wall-user {
display:block;
min-width:0;
max-width:92px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#eeeeee;
font-size:9px;
font-weight:700;
line-height:1.2;
text-shadow:1px 1px 0 #000;
}
 
.great-wall-time {
flex:0 0 auto;
display:block;
min-width:0;
height:auto;
padding:0;
box-sizing:border-box;
background:transparent;
border:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
line-height:1.2;
white-space:nowrap;
text-shadow:1px 1px 0 #000;
box-shadow:none;
}
 
.great-wall-text {
display:block;
min-width:0;
max-width:100%;
max-height:none;
overflow:visible;
color:#c8c8c8;
font-size:10px;
font-weight:400;
line-height:1.45;
white-space:normal;
word-break:normal;
overflow-wrap:anywhere;
text-shadow:1px 1px 0 #000;
}
 
.great-wall-entry:hover .great-wall-text,
.great-wall-entry.is-selected .great-wall-text {
color:#e2e2e2;
}
 
.great-wall-empty {
display:flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:4px 6px;
box-sizing:border-box;
background:#101010;
border:1px solid #202020;
color:#8a8a8a;
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.022),
inset 0 -1px 0 rgba(0,0,0,0.58);
}
 
/* The Great Wall composer is a separate lower sector, matching the title-sector logic.
  It is not a nested well inside the message list. */
.great-wall-compose-sector {
flex:0 0 auto;
margin:3px 0 0;
padding:3px;
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;
}
 
.great-wall-editor {
display:grid;
grid-template-columns:minmax(0,1fr) 42px 34px;
grid-template-areas:"input submit delete";
gap:3px;
margin:0;
padding:0;
box-sizing:border-box;
background:transparent;
border:0;
box-shadow:none;
}
 
.great-wall-sidebar:not(.has-own-entry) .great-wall-editor,
.great-wall-sidebar.is-guest .great-wall-editor {
grid-template-columns:minmax(0,1fr) 42px;
grid-template-areas:"input submit";
}
 
.great-wall-sidebar:not(.has-own-entry) .great-wall-delete,
.great-wall-sidebar.is-guest .great-wall-delete {
display:none;
}
 
/* The Great Wall composer input uses the top navigation search input surface. */
.great-wall-input {
grid-area:input;
width:100%;
height:26px;
min-width:0;
margin:0;
background:#070707 !important;
border:1px solid #202020 !important;
border-radius:0 !important;
color:#e2e2e2;
-webkit-text-fill-color:#e2e2e2;
padding:0 10px;
border-radius:0 !important;
font-size:11px;
box-sizing:border-box;
outline:0 !important;
outline-offset:0 !important;
pointer-events:all;
transition: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) !important;
-webkit-appearance:none;
appearance:none;
-webkit-tap-highlight-color:transparent;
}
 
.great-wall-input::placeholder {
color:#626262;
opacity:1;
-webkit-text-fill-color:#626262;
}
 
.great-wall-input:hover,
.great-wall-input:focus,
.great-wall-input:focus-visible,
.great-wall-input:active,
.great-wall-input[readonly],
.great-wall-input:disabled {
background:#070707 !important;
border:1px solid #202020 !important;
border-radius:0 !important;
color:#e2e2e2;
-webkit-text-fill-color:#e2e2e2;
outline:0 !important;
outline-offset:0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55) !important;
-webkit-appearance:none;
appearance:none;
filter:none;
}
 
.great-wall-input::-moz-focus-inner {
border:0 !important;
padding:0 !important;
}
 
.great-wall-input:disabled {
cursor:default;
opacity:1;
}
 
.great-wall-input:disabled::placeholder,
.great-wall-input[readonly]::placeholder {
color:#626262;
opacity:1;
-webkit-text-fill-color:#626262;
}
 
.great-wall-input:-webkit-autofill,
.great-wall-input:-webkit-autofill:hover,
.great-wall-input:-webkit-autofill:focus,
.great-wall-input:-webkit-autofill:active {
-webkit-text-fill-color:#e2e2e2 !important;
caret-color:#e2e2e2;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 0 0 1000px #070707 inset !important;
border:1px solid #202020 !important;
transition:background-color 9999s ease-in-out 0s;
}
 
.great-wall-submit,
.great-wall-delete {
display:flex;
align-items:center;
justify-content:center;
height:26px;
min-width:0;
margin:0;
padding:0 5px;
box-sizing:border-box;
background:#141414;
border:1px solid;
border-color:#333333 #202020 #050505 #202020;
border-radius:0;
color:#c8c8c8;
font:inherit;
font-size:9px;
font-weight:700;
line-height:1;
text-align:center;
text-shadow:1px 1px 0 #000;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
}
 
.great-wall-submit {
grid-area:submit;
}
 
.great-wall-delete {
grid-area:delete;
}
 
.great-wall-submit:hover:not(:disabled),
.great-wall-submit:focus-visible:not(:disabled),
.great-wall-delete:hover:not(:disabled),
.great-wall-delete:focus-visible:not(:disabled) {
background:#1d1d1d;
border-color:#333333 #202020 #050505 #202020;
color:#ffffff;
outline:0 !important;
outline-offset:0 !important;
}
 
.great-wall-submit:active:not(:disabled),
.great-wall-delete:active:not(:disabled) {
background:#0c0c0c;
border-color:#050505 #202020 #333333 #202020;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}
 
.great-wall-submit:disabled,
.great-wall-delete:disabled {
background:#101010;
color:#555555;
cursor:default;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.018);
}
 
.great-wall-delete:not(:disabled) {
color:#a8847e;
}
 
.great-wall-delete:hover:not(:disabled),
.great-wall-delete:focus-visible:not(:disabled) {
color:#e0a199;
}
 
.great-wall-status {
height:12px;
margin:3px 0 0;
padding:2px 1px 0;
box-sizing:border-box;
display:flex;
align-items:flex-start;
justify-content:flex-start;
background:transparent;
border-top:1px solid #202020;
color:#626262;
font-size:8px;
font-weight:700;
line-height:1;
letter-spacing:.25px;
text-shadow:1px 1px 0 #000;
box-shadow:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
 
.great-wall-sidebar.is-saving .great-wall-status,
.great-wall-sidebar.is-loading .great-wall-status {
color:#8a8a8a;
}
 
/* -----------------------------------------
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 {
position:relative;
padding:3px !important;
box-sizing:border-box;
overflow:hidden;
background:#080808;
line-height:1.4;
}
 
.site-info-sidebar .policy-list {
display:flex;
flex-direction:column;
gap:0;
margin:0;
padding:0;
border:0;
}
 
.site-info-sidebar .policy-row {
display:block;
margin:0 0 2px;
padding:0;
border:0;
font-size:10px;
line-height:1.2;
}
 
.site-info-sidebar .policy-row:last-child {
margin-bottom:0;
}
 
.site-info-sidebar .site-info-policy-button {
position:relative;
display:grid !important;
grid-template-columns:minmax(0,1fr) 14px;
align-items:center;
gap:6px;
min-height:26px;
margin:0;
padding:0 6px;
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;
}
 
.site-info-sidebar .site-info-policy-button:hover {
background:#1d1d1d;
color:#ffffff !important;
text-decoration:none !important;
}
 
.site-info-sidebar .site-info-policy-button: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;
}
 
.site-info-policy-title {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#e2e2e2 !important;
font-size:12px;
font-weight:700;
line-height:1.18;
text-decoration:none !important;
text-shadow:1px 1px 0 #000;
}
 
.site-info-sidebar .site-info-policy-button:hover .site-info-policy-title {
color:#ffffff !important;
}
 
.site-info-sidebar .social-strip {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:2px;
margin-top:2px;
}
 
.site-info-sidebar .social-icon {
display:block;
aspect-ratio:1 / 1;
min-width:0;
}
 
.site-info-sidebar .social-icon a {
position:relative;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
color:#e2e2e2 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
overflow:hidden;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}
 
.site-info-sidebar .social-icon a:hover {
background:#1d1d1d !important;
color:#ffffff !important;
border-color:#050505 !important;
text-decoration:none !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}
 
.site-info-sidebar .social-icon a:active {
background:#101010 !important;
color:#c8c8c8 !important;
border-color:#050505 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !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;
}


    .crt-page-monitor-slice,
.sidebar-lang-sector-group:hover .sidebar-lang-sector,
    .crt-page-monitor-glitch,
.sidebar-lang-sector:hover,
    .crt-page-monitor-tear {
.sidebar-lang-sector.is-center,
        opacity: 0 !important;
.sidebar-lang-sector.is-far {
    }
fill:#101010;
stroke:#181818;
}
}


/* =========================================
.sidebar-lang-sector-label {
   Historical Events Timeline
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;
}


.timeline-event {
.news-title-icon .profile-svg,
    position: relative;
.news-title-icon.sidebar-title-svg .profile-svg {
    display: block;
width:16px;
    width: 100%;
height:16px;
    box-sizing: border-box;
display:block;
    line-height: inherit;
stroke:currentColor;
    text-align: center;
}
}


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


.timeline-event.he-linked::before {
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */
    content: "";
.news-feed-title {
    position: absolute;
position:relative;
    top: -2px;
display:flex;
    left: 2px;
align-items:center;
    right: 2px;
height:auto;
    height: 3px;
min-height:22px;
    border-radius: 999px;
margin:0 0 2px 0;
    pointer-events: none;
padding:3px 7px 3px 16px;
    background:
box-sizing:border-box;
        linear-gradient(
background:#1d1d1d;
            to right,
border:1px solid #050505;
            transparent 0%,
color:#c8c8c8;
            color-mix(in srgb, var(--he-color) 18%, transparent) 8%,
font-size:9px;
            color-mix(in srgb, var(--he-color) 92%, transparent) 14%,
font-weight:700;
            color-mix(in srgb, var(--he-color) 92%, transparent) 86%,
line-height:1;
            color-mix(in srgb, var(--he-color) 18%, transparent) 92%,
letter-spacing:0.55px;
            transparent 100%
text-shadow:1px 1px 0 #000;
        );
box-shadow:
    box-shadow:
inset 0 1px 0 #555555,
        0 0 7px color-mix(in srgb, var(--he-color) 28%, transparent);
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}
}


.timeline-event.he-root {
.news-feed-title::before {
    overflow: visible;
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;
}
}


.timeline-event.he-root::before {
#clbi-left-news-changelog-title {
    content: "";
margin-top:0;
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 16px;
    transform: translateY(-50%);
    border-radius: 999px;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.05) 0%,
            rgba(0,0,0,0.24) 100%
        ),
        linear-gradient(
            to right,
            transparent 0%,
            color-mix(in srgb, var(--he-color) 10%, transparent) 8%,
            color-mix(in srgb, var(--he-color) 24%, transparent) 18%,
            color-mix(in srgb, var(--he-color) 36%, transparent) 50%,
            color-mix(in srgb, var(--he-color) 24%, transparent) 82%,
            color-mix(in srgb, var(--he-color) 10%, transparent) 92%,
            transparent 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.42),
        0 0 8px color-mix(in srgb, var(--he-color) 16%, transparent);
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%
        );
    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%
        );
}
}


.timeline-event.he-root::after {
#clbi-left-news-recent-title {
    content: "";
margin-top:2px;
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 22px;
    transform: translateY(-50%);
    pointer-events: none;
    background:
        linear-gradient(
            to right,
            transparent 0%,
            color-mix(in srgb, var(--he-color) 48%, transparent) 16%,
            color-mix(in srgb, var(--he-color) 48%, transparent) 84%,
            transparent 100%
        ) top center / 100% 1px no-repeat,
        linear-gradient(
            to right,
            transparent 0%,
            color-mix(in srgb, var(--he-color) 24%, transparent) 16%,
            color-mix(in srgb, var(--he-color) 24%, transparent) 84%,
            transparent 100%
        ) bottom center / 100% 1px no-repeat;
}
}


.timeline-event.he-root .timeline-title {
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */
    text-shadow:
.news-left-changelog-feed,
        0 0 4px color-mix(in srgb, var(--he-color) 34%, transparent),
.news-left-recent-feed {
        0 0 9px color-mix(in srgb, var(--he-color) 16%, transparent);
background:transparent;
border:0;
box-shadow:none;
box-sizing:border-box;
}
}


/* =========================================
.news-left-changelog-feed {
  Tree List
padding:0;
  ========================================= */
}


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


.tree-node {
/* 뉴스 박스 하단 여백은 항목 수 계산 대신 이미지 링크 슬롯이 흡수한다.
    position: relative;
  기본 파일명은 Side-news-fill-001.png 이며, 다른 파일을 쓰려면 Common.js의 src만 교체한다. */
    padding-left: 20px;
.news-fill-image-slot {
    margin: 0;
position:relative;
    text-indent: 0;
display:block;
    line-height: 1.55;
min-height:0;
margin:2px 0 0;
box-sizing:border-box;
background:#080808;
border:1px solid #050505;
color:#c8c8c8 !important;
text-decoration:none !important;
overflow:hidden;
cursor:pointer;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}
}


.tree-node::before {
.news-fill-image-slot:hover {
    content: "";
color:#ffffff !important;
    position: absolute;
    top: 0;
    left: 7px;
    width: 1.2px;
    height: 100%;
    background: #7F7F7F;
}
}


.tree-node::after {
.news-fill-image-slot:active {
    content: "";
background:#060606;
    position: absolute;
    top: 12px;
    left: 7px;
    width: 8px;
    height: 0;
    border-top: 1.2px solid #7F7F7F;
}
}


.tree-node:last-of-type::before {
.news-fill-image-frame {
    height: 12px;
position:relative;
width:100%;
height:100%;
min-height:0;
box-sizing:border-box;
background:#060606;
overflow:hidden;
}
}


/* =========================================
.news-fill-image {
  Meeting Composition Panel
display:block;
  ========================================= */
width:100%;
height:100%;
background:#e2e2e2;
-webkit-mask-image:var(--news-fill-image-url);
mask-image:var(--news-fill-image-url);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center center;
mask-position:center center;
-webkit-mask-size:cover;
mask-size:cover;
transition:background-color 0.12s ease;
}


.meeting-panel {
.news-fill-image-slot:hover .news-fill-image {
    position: relative;
background:#ffffff;
    isolation: isolate;
    z-index: 0;
    width: calc(100% + 4px);
    left: -2px;
    margin: 0 auto 15px auto;
    border: 2px solid #1a1a1a;
    border-radius: 5px;
    background:
        radial-gradient(
            ellipse at 50% 35%,
            rgba(255,255,255,0.025) 0%,
            transparent 46%
        ),
        linear-gradient(
            to bottom,
            #1A1A1A 0%,
            #181818 52%,
            #151515 100%
        );
    color: #FFF;
    box-shadow:
        0 4px 12px #000;
    text-align: center;
    font-size: 11px;
    box-sizing: border-box;
    overflow: visible;
}
}


.meeting-panel::before {
.news-fill-image-slot:active .news-fill-image {
    content: "";
background:#c8c8c8;
    position: absolute;
    inset: -5px;
    z-index: -2;
    border-radius: 8px;
    background: #854369;
    pointer-events: none;
}
}


.meeting-panel::after {
.news-fill-image-probe {
    content: "";
position:absolute;
    position: absolute;
width:1px;
    inset: -3px;
height:1px;
    z-index: -1;
opacity:0;
    border-radius: 7px;
pointer-events:none;
    background: #1A1A1A;
    pointer-events: none;
}
}


.meeting-panel-body {
.news-fill-image-slot.is-empty .news-fill-image {
    width: 100%;
display:none;
    color: #E4E4E4;
    padding: 4.5px 9px 9px 9px;
    box-sizing: border-box;
    border-radius: 3px;
    background: transparent;
    overflow: hidden;
}
}


.meeting-title-wrap {
.news-fill-image-slot.is-empty .news-fill-image-frame::before {
    width: 100%;
content:"";
    max-width: 760px;
position:absolute;
    margin: 5px auto 8px auto;
inset:0;
background:
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.025) 0 1px,
transparent 1px 6px
),
#060606;
opacity:0.65;
pointer-events:none;
}
}


.meeting-title-wrap .infobox-glass-title {
.news-fill-image-slot.is-empty:hover .news-fill-image-frame::before {
    top: 0;
opacity:0.82;
    margin-top: 0;
    padding: 5px;
    line-height: 1.2;
}
}


.meeting-title-table {
.news-divider {
    width: auto;
display:none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid transparent;
    border-collapse: collapse;
    table-layout: auto;
}
}


.meeting-title-table td,
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */
.meeting-title-table th {
.news-post-item,
    background: none !important;
.news-recent-item {
    border: none !important;
position:relative;
    vertical-align: middle !important;
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;
}
}


.meeting-title-table .meeting-title-image-left {
.news-post-item {
    width: auto;
grid-template-columns:minmax(0,1fr) 14px;
    text-align: right !important;
min-height:26px;
    padding: 0 6px 0 0 !important;
padding:0 6px;
    line-height: 0;
    white-space: nowrap;
}
}


.meeting-title-table .meeting-title-image-right {
.news-recent-item {
    width: auto;
grid-template-columns:28px minmax(0,1fr) auto;
    text-align: left !important;
min-height:36px;
    padding: 0 0 0 6px !important;
margin:0 0 2px;
    line-height: 0;
padding:4px 6px 4px 5px;
    white-space: nowrap;
}
}


.meeting-title-table .meeting-title-cell {
.news-post-item:last-child,
    width: auto;
.news-recent-item:last-child {
    line-height: 1.15 !important;
margin-bottom:0;
    background: none !important;
    text-align: center !important;
    white-space: nowrap;
    padding: 0 !important;
}
}


.meeting-title-image-left img,
.news-post-item:hover,
.meeting-title-image-right img,
.news-recent-item:hover {
.meeting-title-image-left .mw-file-element,
background:#1d1d1d;
.meeting-title-image-right .mw-file-element {
color:#ffffff !important;
    display: block;
    border: 0 !important;
    vertical-align: middle;
    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,0.75))
        drop-shadow(0 0 3px rgba(255,255,255,0.08));
}
}


.meeting-title-name {
.news-post-item:active,
    display: block;
.news-recent-item:active {
    line-height: 1.15;
background:#101010;
    text-align: center;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}
}


.meeting-title-meta {
.news-recent-avatar {
    display: block;
display:block;
    margin-top: 1px;
width:25px;
    color: #7F7F7F;
height:25px;
    font-size: 10px;
object-fit:cover;
    font-weight: normal;
object-position:center;
    line-height: 1.15;
background:#070707;
    text-align: center;
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;
}
}


.meeting-seatmap {
.news-recent-item:hover .news-recent-avatar {
    position: relative;
border-color:#050505;
    margin: 0 auto;
    padding: 5px 0 4px 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}
}


.meeting-seatmap::before {
.news-recent-main {
    content: "";
min-width:0;
    position: absolute;
display:flex;
    left: 50%;
flex-direction:column;
    top: 84px;
justify-content:center;
    bottom: 145px;
gap:1px;
    width: 2px;
    transform: translateX(-50%);
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(65,65,65,0.72) 18%,
            #414141 50%,
            rgba(65,65,65,0.72) 82%,
            transparent 100%
        );
    box-shadow: 0 0 6px rgba(65,65,65,0.16);
    pointer-events: none;
}
}


.meeting-table-zone::before {
.news-post-title-wrap,
    content: "";
.news-recent-title-wrap {
    position: absolute;
min-width:0;
    left: 7%;
overflow:hidden;
    right: 7%;
white-space:nowrap;
    top: 50%;
mask-image:linear-gradient(to right, black 88%, transparent 100%);
    height: 2px;
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);
    transform: translateY(-50%);
    background:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(65,65,65,0.72) 14%,
            #414141 50%,
            rgba(65,65,65,0.72) 86%,
            transparent 100%
        );
    box-shadow: 0 0 6px rgba(65,65,65,0.14);
    pointer-events: none;
}
}


.meeting-axis-label {
.news-post-title-wrap {
    position: relative;
display:flex;
    z-index: 4;
align-items:center;
    display: inline-block;
    min-width: 42px;
    margin: 2px auto 4px auto;
    padding: 2px 9px;
    border-radius: 5px;
    background: #0c0c0c;
    color: #E4E4E4;
    font-weight: bold;
    line-height: 1.35;
    box-shadow:
        inset 0 -1px 0 #525252,
        0 0 0 3px #1A1A1A;
}
}


.meeting-chair-line {
.news-post-title,
    position: relative;
.news-recent-title {
    z-index: 3;
display:inline-block;
    display: flex;
max-width:none;
    justify-content: center;
overflow:visible;
    margin: 0 0 6px 0;
color:#e2e2e2 !important;
    background: transparent;
font-size:12px;
font-weight:700;
line-height:1.18;
white-space:nowrap;
text-decoration:none !important;
text-shadow:1px 1px 0 #000;
}
}


.meeting-table-zone {
.news-post-item:hover .news-post-title,
    position: relative;
.news-recent-item:hover .news-recent-title {
    z-index: 3;
color:#ffffff !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: 980px;
    min-height: 210px;
    margin: 0 auto;
    background: transparent;
}
}


.meeting-side {
.news-post-arrow {
    display: flex;
display:inline-flex;
    flex-wrap: nowrap;
align-items:center;
    justify-content: center;
justify-content:center;
    align-items: center;
width:12px;
    gap: 0;
height:12px;
    min-width: 0;
margin-left:5px;
    background: transparent;
color:#8a8a8a;
font-size:11px;
line-height:1;
vertical-align:-1px;
flex:0 0 auto;
}
}


.meeting-side-left {
.news-post-item:hover .news-post-arrow {
    padding-right: 4px;
color:#ffffff;
}
}


.meeting-side-right {
.news-recent-meta {
    padding-left: 4px;
display:flex;
align-items:center;
min-width:0;
height:10px;
line-height:1;
}
}


.meeting-center-spine {
.news-recent-user {
    position: relative;
display:block !important;
    display: flex;
min-width:0;
    align-items: center;
max-width:100%;
    justify-content: center;
overflow:hidden;
    align-self: stretch;
text-overflow:ellipsis;
    min-height: 210px;
white-space:nowrap;
    z-index: 4;
color:#7a7a7a !important;
    background: transparent;
font-size:8.5px;
font-weight:700;
line-height:1;
text-decoration:none !important;
text-shadow:1px 1px 0 #000;
}
}


.meeting-center-spine .meeting-axis-label {
.news-recent-item:hover .news-recent-user {
    position: absolute;
color:#b0b0b0 !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 8px 3px;
}
}


.meeting-advisory-zone {
/* 항목 내부의 작은 시간/상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */
    position: relative;
.news-post-tag,
    z-index: 3;
.news-recent-time {
    margin-top: 6px;
display:inline-flex;
    background: transparent;
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;
}
}


.meeting-advisory-zone > .meeting-axis-label {
.news-post-jump,
    margin-bottom: 6px;
.site-info-policy-arrow {
position:relative;
top:-2px;
display:inline-flex;
align-items:center;
justify-content:center;
justify-self:end;
width:14px;
min-width:14px;
height:100%;
padding:0;
box-sizing:border-box;
background:transparent;
border:0;
color:#8a8a8a !important;
font-size:14px;
font-weight:700;
line-height:1;
white-space:nowrap;
text-shadow:1px 1px 0 #000;
box-shadow:none;
}
}


.meeting-advisory-grid {
.news-post-item:hover .news-post-tag,
    position: relative;
.news-recent-item:hover .news-recent-time {
    display: flex;
background:#101010;
    flex-wrap: nowrap;
color:#e2e2e2 !important;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
}
}


.meeting-advisory-grid::before {
.news-post-item:hover .news-post-jump,
    content: "";
.site-info-policy-button:hover .site-info-policy-arrow {
    position: absolute;
background:transparent;
    left: 7%;
color:#ffffff !important;
    right: 7%;
box-shadow:none;
    top: 94px;
    height: 2px;
    background:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(65,65,65,0.72) 14%,
            #414141 50%,
            rgba(65,65,65,0.72) 86%,
            transparent 100%
        );
    box-shadow: 0 0 6px rgba(65,65,65,0.14);
    pointer-events: none;
}
}


.meeting-person-card {
.news-recent-item:active .news-recent-time {
    position: relative;
background:#080808;
    z-index: 3;
color:#c8c8c8 !important;
    background: transparent;
box-shadow:
    color: #fff;
inset 0 1px 0 #101010,
    text-align: center;
inset -1px 0 0 #101010,
    vertical-align: top;
inset 1px 0 0 #555555,
    padding: 0;
inset 0 -1px 0 #555555;
    box-sizing: border-box;
}
}


.meeting-chair-card {
.news-post-item:active .news-post-jump,
    width: 180px;
.site-info-policy-button:active .site-info-policy-arrow {
background:transparent;
color:#c8c8c8 !important;
box-shadow:none;
}
}


.meeting-side .meeting-person-card {
.news-post-item *,
    width: 50%;
.news-recent-item *,
    min-width: 0;
.site-info-policy-button * {
pointer-events:none;
}
}


.meeting-advisory-card {
/* -----------------------------------------
    width: 33.333%;
12. 왼쪽 목차
    min-width: 0;
----------------------------------------- */
 
#side-toc-box .toc-sidebar-content {
padding:6px 8px 8px;
}
}


.meeting-person-inner {
.generated-toc {
    display: flex;
margin:0 !important;
    justify-content: center;
padding:0 !important;
    padding: 0;
list-style:none !important;
    background: transparent;
}
}


.meeting-person-stack {
.generated-toc li {
    width: 90%;
margin:0 !important;
    margin-top: 3px;
padding:0 !important;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}


.meeting-side .meeting-person-stack {
.generated-toc a {
    width: 94%;
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;
}
}


.meeting-advisory-card .meeting-person-stack {
.generated-toc li:first-child a {
    width: 92%;
border-top:1px solid #202020;
}
}


.meeting-person-stack .compact-crt-media {
.generated-toc a:hover {
    margin-left: auto;
background:#101010;
    margin-right: auto;
color:#ffffff !important;
    flex: 0 0 auto;
}
}


.meeting-person-stack .office-card-name-cell {
.generated-toc .toc-level-3 a {
    width: 170px;
padding-left:12px;
    max-width: 100%;
font-weight:600;
    margin-top: 6px;
color:#9f9f9f !important;
    margin-left: auto;
    margin-right: auto;
    flex: 0 0 auto;
}
}


.meeting-chair-card .office-card-name-cell {
.toc-scroll-wrap {
    width: 170px;
display:block;
position:relative;
overflow:hidden;
white-space:nowrap;
}
}


.meeting-advisory-card .office-card-name-cell {
.toc-scroll-text {
    width: 170px;
display:inline-block;
white-space:nowrap;
}
}


.meeting-office {
.toc-scroll-wrap.is-scrolling::after {
    display: block;
content:"";
    margin-top: 2px;
position:absolute;
    color: #7F7F7F;
top:0;
    font-size: 10px;
right:0;
    line-height: 1.3;
bottom:0;
    font-weight: normal;
width:18px;
pointer-events:none;
background:linear-gradient(to right, transparent, #080808);
}
}


/* =====================================================================
/* -----------------------------------------
  ScreenHeader + Screen Bezel Module
14. 하단 푸터
 
----------------------------------------- */
  Template.css에서 교체할 범위:
 
    [/* ScreenHeader */] 주석부터
footer,
    [/* Document View System — doc-* */] 주석 바로 위까지
.liberty-footer {
  전체를 지우고 이 파일 내용으로 교체하세요.
display:none !important;
  ===================================================================== */
}


/* =========================================
/* =========================================
  ScreenHeader — 컨테이너 & 레이아웃 제어
15. 상단 네비게이션 바
  ========================================= */
========================================= */
 
/*
상단 네비바 공식
-----------------------------------------
- 전체는 하나의 각진 조작 패널이다.
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.
- radius는 사용하지 않는다.
- 보라색 테마를 쓰지 않는다.
- 검색창도 같은 금속 인풋으로 정리한다.
*/


.liberty-content:has(.screen-header) .liberty-content-header .title {
#clbi-top-nav-wrap {
    display: none !important;
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;
}
}


/* screen-header 문서 — 컨테이너를 베젤로 */
#clbi-top-nav,
.Liberty .content-wrapper .liberty-content:has(.screen-header) .liberty-content-main {
#clbi-bottom-nav {
    position: relative !important;
position:relative;
    box-sizing: border-box !important;
width:100%;
    border: 2px solid #854369 !important;
background:#171717;
    border-radius: 5px !important;
border:1px solid;
    background: linear-gradient(
border-color:
        160deg,
#555555
        #2e2e2e 0%,
#2b2b2b
        #1e1e1e 30%,
#050505
        #121212 65%,
#2b2b2b;
        #1a1a1a 100%
border-radius:0;
    ) !important;
overflow:hidden;
    box-shadow:
box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.10),
inset 0 1px 0 rgba(255,255,255,0.040),
        inset 0 -4px 0 rgba(0,0,0,0.85),
inset 0 -1px 0 rgba(0,0,0,0.70),
        inset 4px 0 0 rgba(255,255,255,0.04),
0 6px 18px rgba(0,0,0,0.34);
        inset -4px 0 0 rgba(0,0,0,0.70) !important;
margin-bottom:0;
    overflow: hidden !important;
}
}


/* 상단 빛반사 */
#clbi-top-nav-main,
.Liberty .content-wrapper .liberty-content:has(.screen-header) .liberty-content-main::after {
#clbi-bottom-nav-main {
    content: "";
position:relative;
    position: absolute;
display:flex;
    top: 0;
align-items:stretch;
    left: 0;
width:100%;
    right: 0;
min-height:38px;
    height: 40%;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
}


.liberty-content:has(.screen-header) .screen-title-plate,
#clbi-top-nav-logo,
.liberty-content:has(.screen-header) .screen-header-frame,
#clbi-bottom-nav-logo {
.liberty-content:has(.screen-header) .screen-header-inner,
display:flex;
.liberty-content:has(.screen-header) .screen-header-media,
align-items:center;
.liberty-content:has(.screen-header) .screen-header-vignette,
padding:0 8px;
.liberty-content:has(.screen-header) .screen-header-scanline,
flex-shrink:0;
.liberty-content:has(.screen-header) .screen-header-mask,
}
.liberty-content:has(.screen-header) .screen-header-glass,
 
.liberty-content:has(.screen-header) .screen-header-subtitle {
#clbi-top-nav-logo img,
    display: none !important;
#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.clbi-main-page #clbi-bottom-nav-tabs,
body.clbi-main-page #clbi-top-nav-right,
body.clbi-main-page #clbi-bottom-nav-right,
body.clbi-main-page #clbi-sub-worldbuilding,
body.clbi-main-page #clbi-bottom-sub-worldbuilding {
display:none !important;
}
 
body.clbi-main-page #clbi-top-search-input,
body.clbi-main-page #clbi-bottom-search-input {
width:288px;
}
 
body.clbi-main-page #clbi-top-search-input:focus,
body.clbi-main-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;
}
}


/* =========================================
/* =========================================
  screen-header
Progress System UI
  베젤 좌우 padding(24px)을 정확히 상쇄
MediaWiki:Layout.css controlled frontend
  width: calc(100% + 48px), margin: 0 -24px
========================================= */
  ========================================= */
/* =========================================
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;
}
 
/* -----------------------------------------
2-Z. 세로 임계점 이후 전체 셸 축소 모드
----------------------------------------- */
 
:root {
--clbi-vertical-scale-threshold-h:1080px;
--clbi-stage-design-w:1880px;
--clbi-stage-design-h:1064px;
--clbi-stage-content-h:972px;
--clbi-shell-scale:1;
}
 
body.clbi-shell-vertical-scale {
min-width:0 !important;
width:100vw !important;
height:100vh !important;
min-height:100vh !important;
overflow:hidden !important;
}
 
@supports (height:100dvh) {
body.clbi-shell-vertical-scale {
height:100dvh !important;
min-height:100dvh !important;
}
}
 
body.clbi-shell-vertical-scale .clbi-shell-host {
position:fixed !important;
left:50% !important;
top:var(--layout-gap) !important;
z-index:1 !important;
width:var(--layout-shell-w) !important;
max-width:var(--layout-shell-w) !important;
min-width:var(--layout-shell-w) !important;
height:var(--clbi-stage-design-h) !important;
max-height:var(--clbi-stage-design-h) !important;
min-height:var(--clbi-stage-design-h) !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
gap:0 !important;
transform:translateX(-50%) scale(var(--clbi-shell-scale)) !important;
transform-origin:top center !important;
will-change:transform;
backface-visibility:hidden;
}
 
body.clbi-shell-vertical-scale #clbi-top-nav-wrap,
body.clbi-shell-vertical-scale #clbi-bottom-nav-wrap,
body.clbi-shell-vertical-scale .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;
transform:none !important;
}
 
body.clbi-shell-vertical-scale #clbi-top-nav-wrap {
flex:0 0 auto !important;
margin:0 !important;
padding:0 !important;
}
 
body.clbi-shell-vertical-scale .content-wrapper {
flex:0 0 var(--clbi-stage-content-h) !important;
height:var(--clbi-stage-content-h) !important;
min-height:0 !important;
max-height:var(--clbi-stage-content-h) !important;
margin:var(--layout-gap) 0 0 !important;
padding:0 !important;
overflow:visible !important;
}


.screen-header {
body.clbi-shell-vertical-scale #clbi-bottom-nav-wrap {
    position: relative !important;
flex:0 0 auto !important;
    width: 100% !important;
margin:var(--layout-gap) 0 0 !important;
    height: var(--screen-header-height, 360px) !important;
padding:0 !important;
    margin: 0 !important;
    padding: 8px 8px 4px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #050505 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    isolation: isolate !important;
}
}


.screen-header-recess {
body.clbi-shell-vertical-scale .container-fluid.liberty-content {
    position: relative !important;
height:calc(100% + var(--clbi-content-extra, 0px)) !important;
    width: 100% !important;
max-height:calc(100% + var(--clbi-content-extra, 0px)) !important;
    height: 100% !important;
min-height:0 !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #050505 !important;
    border: 1px solid rgba(255,255,255,0.035) !important;
    border-radius: 6px !important;
    box-shadow:
        inset 0 18px 30px rgba(0,0,0,0.82),
        inset 0 -9px 16px rgba(255,255,255,0.026),
        inset 18px 0 30px rgba(0,0,0,0.66),
        inset -18px 0 30px rgba(0,0,0,0.66),
        0 1px 0 rgba(255,255,255,0.030),
        0 -1px 0 rgba(0,0,0,0.70) !important;
}
}


.screen-header-recess::before {
body.clbi-shell-vertical-scale #clbi-left-sidebar,
    content: "";
body.clbi-shell-vertical-scale #clbi-right-sidebar {
    position: absolute;
height:100% !important;
    inset: 0;
max-height:100% !important;
    z-index: 1;
min-height:0 !important;
    pointer-events: none;
overflow:hidden !important;
    opacity: 0.10;
    background: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.030) 0px,
        rgba(255,255,255,0.030) 1px,
        transparent 1px,
        transparent 5px
    );
    mix-blend-mode: screen;
}
}


.screen-header-recess::after {
body.clbi-shell-vertical-scale .clbi-left-news-box,
    content: "";
body.clbi-shell-vertical-scale .clbi-left-news-box.is-adaptive-constrained {
    position: absolute;
height:auto !important;
    inset: 14px;
max-height:none !important;
    z-index: 12;
min-height:0 !important;
    pointer-events: none;
    border-radius: 0;
    box-shadow:
        0 -20px 32px rgba(0,0,0,0.86),
        0 12px 18px rgba(255,255,255,0.024),
        -20px 0 32px rgba(0,0,0,0.78),
        20px 0 32px rgba(0,0,0,0.78),
        inset 0 0 0 1px rgba(255,255,255,0.018) !important;
}
}


.screen-header .screen-header-crt {
body.clbi-shell-vertical-scale .clbi-left-news-box .news-left-recent-feed,
    position: relative !important;
body.clbi-shell-vertical-scale .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed {
    z-index: 2 !important;
height:auto !important;
    width: 100% !important;
max-height:none !important;
    height: 100% !important;
min-height:0 !important;
    aspect-ratio: auto !important;
flex:0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
}


.screen-header .screen-header-crt::before,
body.clbi-shell-vertical-scale .clbi-left-news-box .news-recent-viewport,
.screen-header .screen-header-crt::after {
body.clbi-shell-vertical-scale .clbi-left-news-box .news-recent-stack,
    content: none !important;
body.clbi-shell-vertical-scale .clbi-left-news-box.is-adaptive-constrained .news-recent-viewport,
body.clbi-shell-vertical-scale .clbi-left-news-box.is-adaptive-constrained .news-recent-stack {
-webkit-mask-image:none !important;
mask-image:none !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
}


.screen-header .crt-page-monitor-inner {
body.clbi-shell-vertical-scale .clbi-left-news-box .news-recent-viewport::before,
    position: relative !important;
body.clbi-shell-vertical-scale .clbi-left-news-box .news-recent-viewport::after,
    width: 100% !important;
body.clbi-shell-vertical-scale .clbi-left-news-box .news-left-recent-feed::before,
    height: 100% !important;
body.clbi-shell-vertical-scale .clbi-left-news-box .news-left-recent-feed::after {
    padding: 5px !important;
content:none !important;
    margin: 0 !important;
display:none !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    background: linear-gradient(
        145deg,
        #050505 0%,
        #0d0d0d 46%,
        #050505 100%
    ) !important;
    border: 1px solid #050505 !important;
    box-shadow:
        inset 0 10px 20px rgba(0,0,0,0.97),
        inset 0 -2px 3px rgba(255,255,255,0.030),
        inset 8px 0 18px rgba(0,0,0,0.90),
        inset -8px 0 18px rgba(0,0,0,0.90) !important;
}
}


.screen-header .crt-page-monitor-screen {
body.clbi-shell-vertical-scale .news-recent-item.is-adaptive-hidden {
    position: relative !important;
display:grid !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #050505 !important;
    border: 1px solid #050505 !important;
    box-shadow:
        inset 0 0 0 1px #111,
        inset 0 0 24px rgba(0,0,0,0.94),
        inset 0 0 64px rgba(0,0,0,0.80),
        inset 0 0 118px rgba(0,0,0,0.50),
        0 0 0 1px rgba(255,255,255,0.030) !important;
}
}


.screen-header .crt-page-monitor-image,
body.clbi-shell-vertical-scale .news-bottom-finish {
.screen-header .crt-page-monitor-image-base,
display:none !important;
.screen-header .crt-page-monitor-image-bloom,
.screen-header .crt-page-monitor-slice {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 0 !important;
}
}


.screen-header .crt-page-monitor-image-base a,
body.clbi-shell-vertical-scale .left-billboard-box.is-left-ad-title-only,
.screen-header .crt-page-monitor-image-base span,
body.clbi-shell-vertical-scale .left-billboard-box.is-left-ad-extended {
.screen-header .crt-page-monitor-image-base .mw-file-description,
height:auto !important;
.screen-header .crt-page-monitor-image-base .mw-default-size,
max-height:none !important;
.screen-header .crt-page-monitor-image-base .mw-image-border,
.screen-header .crt-page-monitor-image-bloom a,
.screen-header .crt-page-monitor-image-bloom span,
.screen-header .crt-page-monitor-image-bloom .mw-file-description,
.screen-header .crt-page-monitor-image-bloom .mw-default-size,
.screen-header .crt-page-monitor-image-bloom .mw-image-border,
.screen-header .crt-page-monitor-slice a,
.screen-header .crt-page-monitor-slice span,
.screen-header .crt-page-monitor-slice .mw-file-description,
.screen-header .crt-page-monitor-slice .mw-default-size,
.screen-header .crt-page-monitor-slice .mw-image-border {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
}


.screen-header .crt-page-monitor-image-base img,
body.clbi-shell-vertical-scale .left-billboard-box .left-ad-bottom-finish {
.screen-header .crt-page-monitor-image-base .mw-file-element,
display:none !important;
.screen-header .crt-page-monitor-image-bloom img,
.screen-header .crt-page-monitor-image-bloom .mw-file-element,
.screen-header .crt-page-monitor-slice img,
.screen-header .crt-page-monitor-slice .mw-file-element,
.screen-header .crt-page-monitor-slice-img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: var(--screen-image-position, center center) !important;
    border: 0 !important;
    border-radius: 0 !important;
}
}


.screen-header .crt-page-monitor-screen::before {
 
    content: "" !important;
 
    position: absolute !important;
/* -----------------------------------------
    inset: -4px !important;
9.48 좌측 사이드 하단 정렬 / 뉴스 확장형
    z-index: 20 !important;
----------------------------------------- */
    pointer-events: none !important;
 
    border-radius: 0 !important;
/*
    background:
좌측 사이드는 우측의 SITE INFORMATION 하단 정렬과 대응되도록
        radial-gradient(
전체 높이를 본문 행에 맞춘다. 언어와 Ad는 고정 높이로 두고,
            ellipse at 50% 50%,
남는 세로 공간은 뉴스 박스가 흡수한다. Ad 이미지는 늘리지 않는다.
            transparent 0%,
*/
            transparent 62%,
#clbi-left-sidebar {
            rgba(0,0,0,0.18) 78%,
height:100% !important;
            rgba(0,0,0,0.48) 100%
max-height:100% !important;
        ),
min-height:0 !important;
        linear-gradient(
align-self:stretch !important;
            to bottom,
display:flex !important;
            rgba(0,0,0,0.20) 0%,
flex-direction:column !important;
            transparent 14%,
gap:8px !important;
            transparent 82%,
overflow:hidden !important;
            rgba(0,0,0,0.28) 100%
        ),
        linear-gradient(
            to right,
            rgba(0,0,0,0.20) 0%,
            transparent 8%,
            transparent 92%,
            rgba(0,0,0,0.20) 100%
        ),
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.030) 18%,
            transparent 38%,
            transparent 100%
        ) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.018),
        inset 0 0 24px rgba(255,255,255,0.015),
        inset 0 0 74px rgba(0,0,0,0.64),
        inset 0 22px 38px rgba(0,0,0,0.60),
        inset 0 -20px 36px rgba(0,0,0,0.44),
        inset 18px 0 36px rgba(0,0,0,0.56),
        inset -18px 0 36px rgba(0,0,0,0.56) !important;
}
}


.screen-header .crt-page-monitor-screen::after {
#clbi-left-sidebar > .clbi-left-lang-box,
    content: "" !important;
#clbi-left-sidebar > .left-ad-box,
    position: absolute !important;
#clbi-left-sidebar > .left-billboard-box {
    inset: -80px -4px !important;
flex:0 0 auto !important;
    z-index: 21 !important;
    pointer-events: none !important;
    opacity: 0.22 !important;
    border-radius: 0 !important;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.08) 0px,
        rgba(255,255,255,0.08) 1px,
        transparent 2px,
        transparent 5px
    ) !important;
    mix-blend-mode: screen !important;
    animation: crt-scanlines-up 7s linear infinite !important;
}
}


.screen-header .crt-page-monitor-glitch,
#clbi-left-sidebar > .clbi-left-news-box {
.screen-header .crt-page-monitor-tear {
flex:1 1 auto !important;
    inset: -4px !important;
min-height:0 !important;
    border-radius: 0 !important;
max-height:none !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
}
}


.screen-header .crt-page-monitor-glitch { z-index: 22 !important; }
#clbi-left-sidebar > .clbi-left-news-box > .clbi-left-title {
.screen-header .crt-page-monitor-tear  { z-index: 23 !important; }
flex:0 0 auto !important;
}


.screen-header-title {
#clbi-left-sidebar > .clbi-left-news-box > .clbi-news-box {
    position: absolute !important;
flex:1 1 auto !important;
    left: 5px !important;
min-height:0 !important;
    bottom: 5px !important;
height:auto !important;
    z-index: 40 !important;
display:grid !important;
    margin: 0 !important;
grid-template-rows:auto auto auto auto minmax(0, 1fr) !important;
    padding: 0 !important;
grid-template-columns:minmax(0, 1fr) !important;
    max-width: calc(100% - 10px) !important;
overflow:hidden !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
}


.screen-header-title-main {
#clbi-left-sidebar > .clbi-left-news-box #clbi-left-news-changelog-title {
    margin: 0 !important;
grid-row:1 !important;
    padding: 0 0 8px 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: 'BoldRound', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 0.95 !important;
    letter-spacing: 0.06em !important;
    text-shadow:
        3px 3px 0 rgba(0,0,0,0.98),
        0 0 6px rgba(0,0,0,0.98),
        0 0 14px rgba(0,0,0,0.95),
        0 0 26px rgba(0,0,0,0.92),
        -1px 0 0 rgba(80,160,255,0.24),
        1px 0 0 rgba(255,55,90,0.22) !important;
    white-space: nowrap !important;
}
}


.screen-header-subtitle {
#clbi-left-sidebar > .clbi-left-news-box .news-left-changelog-feed {
    display: none !important;
grid-row:2 !important;
min-height:0 !important;
overflow:hidden !important;
}
}


/* =========================================
#clbi-left-sidebar > .clbi-left-news-box #clbi-left-news-recent-title {
  screen-body
grid-row:3 !important;
  베젤 좌우 padding(24px)을 정확히 상쇄
}
  하단 -28px은 베젤 하단 padding을 상쇄해서 베젤 닫음
 
  ========================================= */
#clbi-left-sidebar > .clbi-left-news-box .news-left-recent-feed {
grid-row:4 !important;
min-height:0 !important;
height:auto !important;
display:flex !important;
flex:0 0 auto !important;
flex-direction:column !important;
overflow:hidden !important;
}
 
#clbi-left-sidebar > .clbi-left-news-box .news-fill-image-slot {
grid-row:5 !important;
min-height:0 !important;
height:auto !important;
display:block !important;
}
 
#clbi-left-sidebar > .clbi-left-news-box .news-recent-viewport {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
 
#clbi-left-sidebar > .clbi-left-news-box .news-recent-stack {
min-height:0 !important;
height:auto !important;
max-height:none !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
 
#clbi-left-sidebar > .clbi-left-news-box .news-recent-viewport::before,
#clbi-left-sidebar > .clbi-left-news-box .news-recent-viewport::after,
#clbi-left-sidebar > .clbi-left-news-box .news-left-recent-feed::before,
#clbi-left-sidebar > .clbi-left-news-box .news-left-recent-feed::after {
content:none !important;
display:none !important;
}
 
#clbi-left-sidebar > .clbi-left-news-box .news-bottom-finish {
display:none !important;
height:0 !important;
min-height:0 !important;
}
 
#clbi-left-sidebar > .clbi-left-news-box.is-adaptive-constrained {
height:auto !important;
max-height:none !important;
}
 
#clbi-left-sidebar > .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed,
#clbi-left-sidebar > .clbi-left-news-box.is-adaptive-constrained .news-recent-viewport,
#clbi-left-sidebar > .clbi-left-news-box.is-adaptive-constrained .news-recent-stack {
height:auto !important;
max-height:none !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
 
#clbi-left-sidebar > .left-ad-box.is-left-ad-title-only .left-ad-content-shell {
display:block !important;
}
 
#clbi-left-sidebar > .left-ad-box.is-left-ad-extended,
#clbi-left-sidebar > .left-ad-box.is-left-ad-title-only {
height:auto !important;
max-height:none !important;
}
 
/* -----------------------------------------
9.99 사이드 타이틀 평면화
----------------------------------------- */
 
/*
SITE INFORMATION처럼 사이드 모듈 제목은 별도 우물 패널을 만들지 않고
상위 박스 표면 위에 바로 놓는다. 콘텐츠 영역과 항목 버튼만 우물/버튼 문법을 사용한다.
*/
#clbi-left-sidebar .clbi-left-lang-box > .clbi-left-title,
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title,
#clbi-left-sidebar .left-ad-title,
#clbi-right-sidebar .great-wall-sidebar > .clbi-right-title,
#clbi-right-sidebar .site-info-title {
min-height:34px !important;
height:auto !important;
margin:0 !important;
padding:0 2px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
display:flex !important;
align-items:center !important;
gap:6px !important;
line-height:1 !important;
color:#e2e2e2 !important;
text-shadow:1px 1px 0 #000 !important;
}
 
#clbi-left-sidebar .left-ad-title.left-ad-title-iconless {
gap:0 !important;
}
 
#clbi-right-sidebar .site-info-title {
justify-content:flex-start !important;
}


.screen-header + .screen-body {
#clbi-right-sidebar .site-info-title-meta {
    margin-top: 0 !important;
display:none !important;
    border-top: 0 !important;
}
}


.screen-body {
#clbi-left-sidebar .left-ad-title-label,
    position: relative;
#clbi-title-left-ad,
    width: 100%;
#clbi-title-left-language,
    margin: 0;
#clbi-title-left-news {
    padding: 4px 8px 4px 8px;
height:auto !important;
    box-sizing: border-box;
line-height:1 !important;
    background: #171717;
    overflow: hidden;
}
}


/* =========================================
  Document View System — doc-*
  ========================================= */


.doc-body {
 
    position: relative;
/* -----------------------------------------
    z-index: 3;
9.100 사이드 타이틀 아이콘 제거
    box-sizing: border-box;
----------------------------------------- */
    width: 100%;
 
    padding: 0;
/* 사이드 모듈 제목은 텍스트만 남긴다. 기존 렌더가 남아 있어도 아이콘은 숨긴다. */
    background: transparent;
#clbi-left-sidebar > .clbi-left-box > .clbi-left-title .sidebar-title-svg,
#clbi-right-sidebar > .clbi-right-box > .clbi-right-title .sidebar-title-svg,
#side-toc-box > .clbi-left-title .sidebar-title-svg,
#clbi-tools-box > .clbi-left-title .clbi-icon {
display:none !important;
}
 
#clbi-left-sidebar .clbi-left-lang-box > .clbi-left-title,
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title,
#clbi-left-sidebar .left-ad-title,
#clbi-right-sidebar .great-wall-sidebar > .clbi-right-title,
#clbi-right-sidebar .site-info-title,
#side-toc-box > .clbi-left-title,
#clbi-tools-box > .clbi-left-title {
gap:0 !important;
}
}


/* =========================================
/* -----------------------------------------
  doc-header
9.101 사이드 타이틀 중앙 정렬 / Ad 문구 보정
  ========================================= */
----------------------------------------- */


.doc-header {
/* 아이콘 제거 후의 사이드 모듈 제목은 중앙 정렬로 시험한다. */
    position: relative;
#clbi-left-sidebar .clbi-left-lang-box > .clbi-left-title,
    display: grid;
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title,
    grid-template-columns: 24px 1fr auto 24px;
#clbi-left-sidebar .left-ad-title,
    align-items: center;
#clbi-right-sidebar .great-wall-sidebar > .clbi-right-title,
    height: 28px;
#clbi-right-sidebar .site-info-title,
    margin-bottom: 7px;
#side-toc-box > .clbi-left-title,
    padding: 0 8px;
#clbi-tools-box > .clbi-left-title {
    box-sizing: border-box;
justify-content:center !important;
    background:
text-align:center !important;
        linear-gradient(
padding-left:2px !important;
            to bottom,
padding-right:2px !important;
            #282828 0%,
            #1a1a1a 40%,
            #161616 100%
        );
    border-top: 1px solid #3a3a3a;
    border-bottom: 1px solid #0a0a0a;
    border-left: 1px solid #222;
    border-right: 1px solid #222;
    border-radius: 2px;
}
}


.doc-header::before {
#clbi-left-sidebar .clbi-left-lang-box > .clbi-left-title > span,
    content: "";
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title > span,
    position: absolute;
#clbi-left-sidebar .left-ad-title > span,
    inset: 0;
#clbi-right-sidebar .great-wall-sidebar > .clbi-right-title > span,
    pointer-events: none;
#clbi-right-sidebar .site-info-title > span,
    opacity: 0.06;
#side-toc-box > .clbi-left-title > span,
    background: repeating-linear-gradient(
#clbi-tools-box > .clbi-left-title > span {
        135deg,
min-width:0 !important;
        rgba(255,255,255,0.08) 0px,
max-width:100% !important;
        rgba(255,255,255,0.08) 1px,
text-align:center !important;
        transparent 1px,
        transparent 4px
    );
    border-radius: inherit;
}
}


.doc-header-id {
#clbi-left-sidebar .left-ad-title-label,
    font-size: 10px;
#clbi-title-left-ad {
    font-weight: 700;
white-space:nowrap !important;
    letter-spacing: 0.18em;
overflow:hidden !important;
    color: #c0c0c0;
text-overflow:ellipsis !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
    position: relative;
    z-index: 1;
}
}


.doc-screw {
 
    position: relative;
/* -----------------------------------------
    z-index: 1;
9.102 하단 네비 검색 제거 / 프로필 컨테이너 최신화
    width: 10px;
----------------------------------------- */
    height: 10px;
 
    border-radius: 50%;
/* 하단 네비는 검색 슬롯을 사용하지 않는다. 이전 렌더가 남아 있어도 숨긴다. */
    background:
#clbi-bottom-nav-search,
        radial-gradient(circle at 36% 32%, rgba(255,255,255,0.35) 0%, transparent 28%),
#clbi-bottom-search-input {
        linear-gradient(145deg, #505050 0%, #282828 55%, #0e0e0e 100%);
display:none !important;
    border: 1px solid #090909;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.60),
        0 0 0 1px #333;
    justify-self: center;
}
}


.doc-screw::after {
/* 프로필 박스도 다른 사이드 모듈처럼 평면 제목 + 내부 슬롯 구조로 맞춘다. */
    content: "";
#clbi-right-sidebar .profile-card-box {
    position: absolute;
position:relative !important;
    top: 50%;
background:#1d1d1d !important;
    left: 15%;
    right: 15%;
    height: 1px;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    border-radius: 1px;
}
}


.doc-status {
#clbi-right-sidebar .profile-card-box > .profile-card-title {
    display: flex;
min-height:34px !important;
    align-items: center;
height:auto !important;
    gap: 5px;
margin:0 !important;
    position: relative;
padding:0 2px !important;
    z-index: 1;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:0 !important;
line-height:1 !important;
color:#e2e2e2 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}
}


.doc-status-lamp {
#clbi-right-sidebar .profile-card-box > .profile-card-title > span {
    display: inline-block;
min-width:0 !important;
    width: 8px;
max-width:100% !important;
    height: 8px;
height:auto !important;
    border-radius: 50%;
line-height:1 !important;
    background: #111;
color:#e2e2e2 !important;
    border: 1px solid #060606;
font-size:12px !important;
    box-shadow:
font-weight:700 !important;
        inset 0 1px 0 rgba(255,255,255,0.06),
white-space:nowrap !important;
        0 0 0 1px #252525;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-align:center !important;
}
}


.doc-status-lamp.on {
#clbi-right-sidebar #clbi-user-avatar-wrap,
    background: radial-gradient(circle at 38% 32%, #d9ff9d 0%, #7ec43e 45%, #253d18 100%);
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
    box-shadow:
position:relative !important;
        inset 0 1px 0 rgba(255,255,255,0.28),
display:flex !important;
        0 0 0 1px #1a3010,
flex-direction:column !important;
        0 0 5px rgba(100,200,50,0.45);
align-items:center !important;
justify-content:center !important;
gap:6px !important;
min-height:154px !important;
height:auto !important;
margin:0 !important;
padding:7px 3px 3px !important;
box-sizing:border-box !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;
}
}


.doc-status-lamp.warn {
#clbi-right-sidebar .profile-avatar-stage {
    background: radial-gradient(circle at 38% 32%, #ffe8b0 0%, #d89a42 45%, #4d2a0d 100%);
position:relative !important;
    box-shadow:
left:auto !important;
        inset 0 1px 0 rgba(255,255,255,0.28),
top:auto !important;
        0 0 0 1px #3a1f06,
transform:none !important;
        0 0 5px rgba(220,140,40,0.45);
width:104px !important;
height:104px !important;
flex:0 0 104px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:#1d1d1d !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;
}
}


/* =========================================
#clbi-right-sidebar .profile-avatar-stage::before,
  doc-layout
#clbi-right-sidebar .profile-avatar-stage::after {
  ========================================= */
content:none !important;
display:none !important;
}


.doc-layout {
#clbi-right-sidebar #clbi-user-avatar {
    display: grid;
position:relative !important;
    grid-template-columns: 200px minmax(0, 1fr) 320px;
z-index:1 !important;
    gap: 7px;
display:block !important;
    align-items: stretch;
width:90px !important;
    min-height: 620px;
height:90px !important;
object-fit:cover !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(0,0,0,0.60) !important;
}
}


.doc-layout-left,
#clbi-right-sidebar #clbi-user-name-row,
.doc-layout-center,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
.doc-layout-right {
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
    min-width: 0;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:26px !important;
min-height:26px !important;
margin:0 !important;
padding:0 6px !important;
box-sizing:border-box !important;
background:#1d1d1d !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;
}
}


.doc-layout-center,
#clbi-right-sidebar #clbi-user-name {
.doc-layout-right {
max-width:100% !important;
    display: flex;
margin:0 !important;
    flex-direction: column;
color:#e2e2e2 !important;
    gap: 7px;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}
}


.doc-layout-lower {
#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
    display: grid;
color:#ffffff !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    flex: 1;
}
}


/* =========================================
#clbi-right-sidebar .profile-action-box {
  doc-panel
position:relative !important;
  ========================================= */
margin:2px 0 0 !important;
padding:3px !important;
box-sizing:border-box !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:visible !important;
}


.doc-panel {
#clbi-right-sidebar .profile-quick-actions {
    position: relative;
position:relative !important;
    box-sizing: border-box;
display:grid !important;
    width: 100%;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    min-width: 0;
gap:2px !important;
    background: #1a1a1a;
margin:0 0 2px !important;
    border-top: 1px solid #303030;
overflow:visible !important;
    border-bottom: 1px solid #080808;
z-index:2 !important;
    border-left: 1px solid #222;
    border-right: 1px solid #111;
    border-radius: 2px;
    overflow: hidden;
}
}


.doc-panel::before {
#clbi-right-sidebar .profile-quick-btn {
    content: "";
position:relative !important;
    position: absolute;
display:flex !important;
    top: 4px;
align-items:center !important;
    left: 4px;
justify-content:center !important;
    width: 5px;
width:100% !important;
    height: 5px;
aspect-ratio:1 / 1 !important;
    border-radius: 50%;
min-width:0 !important;
    background:
min-height:0 !important;
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
padding:0 !important;
        linear-gradient(145deg, #444 0%, #1e1e1e 100%);
box-sizing:border-box !important;
    border: 1px solid #080808;
background:#1d1d1d !important;
    box-shadow: 0 0 0 1px #2a2a2a;
border:1px solid #050505 !important;
    pointer-events: none;
color:#e2e2e2 !important;
    z-index: 10;
cursor:pointer !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
text-shadow:1px 1px 0 #000 !important;
overflow:hidden !important;
}
}


.doc-panel::after {
#clbi-right-sidebar .profile-quick-btn:hover {
    content: "";
background:#1d1d1d !important;
    position: absolute;
border-color:#050505 !important;
    top: 4px;
color:#ffffff !important;
    right: 4px;
box-shadow:
    width: 5px;
inset 0 1px 0 #555555,
    height: 5px;
inset -1px 0 0 #555555,
    border-radius: 50%;
inset 1px 0 0 #101010,
    background:
inset 0 -1px 0 #101010 !important;
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
        linear-gradient(145deg, #444 0%, #1e1e1e 100%);
    border: 1px solid #080808;
    box-shadow: 0 0 0 1px #2a2a2a;
    pointer-events: none;
    z-index: 10;
}
}


.doc-panel-title {
#clbi-right-sidebar .profile-quick-btn:active {
    position: relative;
background:#101010 !important;
    z-index: 3;
color:#c8c8c8 !important;
    box-sizing: border-box;
box-shadow:
    padding: 6px 10px 5px 10px;
inset 0 1px 0 #101010,
    font-family: 'Galmuri11', sans-serif !important;
inset -1px 0 0 #101010,
    font-size: 10px;
inset 1px 0 0 #555555,
    font-weight: 700;
inset 0 -1px 0 #555555 !important;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.10em;
    color: #888;
    background: linear-gradient(to bottom, #161616 0%, #121212 100%);
    border-bottom: 1px solid #0d0d0d;
    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
    text-transform: uppercase;
}
}


.doc-panel-heading {
#clbi-right-sidebar .profile-quick-icon,
    padding: 10px 18px;
#clbi-right-sidebar .profile-quick-icon .profile-svg {
    font-size: 11px;
width:20px !important;
    font-weight: 700;
height:20px !important;
    color: #7a7a7a;
color:currentColor !important;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
    position: relative;
    z-index: 3;
}
}


.doc-panel table {
#clbi-right-sidebar .profile-action-box .clbi-user-btn {
    width: 100%;
position:relative !important;
    border-collapse: collapse;
display:grid !important;
    margin: 0;
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 2px !important;
padding:0 7px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !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 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
overflow:hidden !important;
}
}


.doc-panel table th,
#clbi-right-sidebar .profile-action-box .clbi-user-btn:last-child {
.doc-panel table td {
margin-bottom:0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
}


.doc-panel table th[style],
#clbi-right-sidebar .profile-action-box .clbi-user-btn:hover,
.doc-panel table td[style] {
#clbi-right-sidebar .profile-action-box .clbi-user-btn.clbi-user-btn-active {
    background: revert !important;
background:#1d1d1d !important;
    border: revert !important;
border-color:#050505 !important;
    padding: revert !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}
}


/* =========================================
#clbi-right-sidebar .profile-action-box .clbi-user-btn:active {
  doc-display
background:#101010 !important;
  ========================================= */
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 !important;
}


.doc-display {
#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout {
    position: relative;
color:#c88a80 !important;
    z-index: 3;
    box-sizing: border-box;
    padding: 4px 14px;
    margin-bottom: 0;
    min-height: 90px;
    line-height: 1.8;
    color: #d8d8d8;
    background: #111111;
    border-top: 1px solid #0a0a0a;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.55),
        inset 0 0 1px rgba(0,0,0,0.80);
}
}


/* =========================================
#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout:hover {
  doc-info
background:#1d1d1d !important;
  ========================================= */
color:#e0a199 !important;
}


.doc-info-row {
#clbi-right-sidebar .profile-action-icon {
    position: relative;
color:#8a8a8a !important;
    z-index: 3;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin: 7px 10px 0 10px;
}
}


.doc-info-key {
#clbi-right-sidebar .profile-action-box .clbi-user-btn:hover .profile-action-icon,
    font-size: 10px;
#clbi-right-sidebar .profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon,
    font-weight: 700;
#clbi-right-sidebar .profile-action-box .clbi-user-btn:hover .profile-action-arrow,
    color: #7a7a7a;
#clbi-right-sidebar .profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {
    letter-spacing: 0.06em;
color:#ffffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}
}


.doc-info-value {
#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout .profile-action-icon,
    position: relative;
#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout .profile-action-arrow {
    overflow: hidden;
color:#8b5f59 !important;
    text-align: right;
    border-radius: 2px;
    background: #0e0e0e;
    color: #d8d8d8;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    box-sizing: border-box;
    border-top: 1px solid #0a0a0a;
    border-bottom: 1px solid #252525;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.60),
        inset 1px 0 0 rgba(255,255,255,0.015);
}
}


.doc-info-value::after {
#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout:hover .profile-action-icon,
    content: "";
#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {
    position: absolute;
color:#e0a199 !important;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.15;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.055) 0px,
        rgba(255,255,255,0.055) 1px,
        transparent 2px,
        transparent 4px
    );
    mix-blend-mode: screen;
}
}


.doc-info-block {
/* -----------------------------------------
    padding: 0 8px 6px 8px;
149 보정: 프로필 박스 과장된 내부 플레이트 정리
    background: #1a1a1a;
----------------------------------------- */
 
/* 프로필 상단은 사이드 모듈 안의 단순 화면으로 둔다. */
#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
min-height:154px !important;
gap:5px !important;
padding:7px 3px 4px !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;
}
}


.doc-info-block-label {
/* 아바타 주변에 한 번 더 생기던 플레이트는 제거한다. */
    display: block;
#clbi-right-sidebar .profile-avatar-stage {
    padding: 6px 2px 4px 2px;
width:104px !important;
    font-size: 10px;
height:104px !important;
    font-weight: 700;
flex:0 0 104px !important;
    letter-spacing: 0.08em;
background:transparent !important;
    text-transform: uppercase;
border:0 !important;
    color: #9a9a9a;
box-shadow:none !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}
}


/* =========================================
#clbi-right-sidebar #clbi-user-avatar {
  doc-nav
width:96px !important;
  ========================================= */
height:96px !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:
0 0 0 1px #2b2b2b,
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.64) !important;
}


.doc-nav {
/* 이름은 별도 판/플레이트가 아니라 화면 안의 라벨처럼 둔다. */
    height: 100%;
#clbi-right-sidebar #clbi-user-name-row,
    display: flex;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
    flex-direction: column;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
height:18px !important;
min-height:18px !important;
padding:0 4px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
}


.doc-nav-item {
#clbi-right-sidebar #clbi-user-name {
    position: relative;
font-size:12px !important;
    z-index: 3;
line-height:1 !important;
    box-sizing: border-box;
color:#e2e2e2 !important;
    width: calc(100% - 16px);
    margin: 5px 8px 0 8px;
    padding: 7px 24px 7px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    color: #666;
    background: linear-gradient(to bottom, #232323 0%, #1a1a1a 50%, #161616 100%);
    border-top: 1px solid #2e2e2e;
    border-bottom: 1px solid #0a0a0a;
    border-left: 1px solid #222;
    border-right: 1px solid #111;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        0 1px 0 rgba(255,255,255,0.012);
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}
}


.doc-nav-item::after {
/* 레벨 패널은 우물 배경으로 유지하되, 너무 붙어 보이지 않도록 여백을 정리한다. */
    content: "›";
.profile-progress-block {
    position: absolute;
margin:8px 8px 0 !important;
    right: 8px;
padding:8px !important;
    top: 50%;
background:#080808 !important;
    transform: translateY(-50%);
border:0 !important;
    color: #333;
box-shadow:
    font-size: 13px;
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
}
}


.doc-nav-item.active {
.progress-level-row {
    color: #e8e8e8;
margin-bottom:6px !important;
    background: linear-gradient(to bottom, #5a2040 0%, #3d1a2f 52%, #2e1222 100%);
    border-top-color: #7a3055;
    border-bottom-color: #1a0810;
    border-left-color: #6a2848;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 6px rgba(212,90,162,0.10);
}
}


.doc-nav-item.active::after {
.progress-xp-bar {
    color: #d45aa2;
height:10px !important;
margin:0 0 6px !important;
}
}


/* =========================================
.progress-sub-row {
  doc-status-row
margin-bottom:0 !important;
  ========================================= */
}


.doc-status-row {
/* DISCOVERED 행도 별도 플레이트가 아니라 약한 메타 라인으로 둔다. */
    position: relative;
.progress-discovery-row {
    z-index: 3;
height:auto !important;
    display: flex;
min-height:0 !important;
    align-items: center;
margin:5px 0 0 !important;
    gap: 7px;
padding:0 !important;
    margin: 5px 8px 0 8px;
background:transparent !important;
    padding: 5px 9px;
border:0 !important;
    box-sizing: border-box;
box-shadow:none !important;
    font-size: 10px;
color:#626262 !important;
    font-weight: 700;
justify-content:center !important;
    color: #555;
    background: #111;
    border-top: 1px solid #0a0a0a;
    border-bottom: 1px solid #222;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    border-radius: 2px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.50);
    letter-spacing: 0.06em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}
}


/* =========================================
/* 레벨 패널과 버튼 영역 사이의 장식 구분선 제거. */
  doc-link
#profile-progress-divider {
  ========================================= */
display:none !important;
}


.doc-link {
/* 버튼 기본 radius/appearance를 완전히 제거한다. */
    position: relative;
#clbi-right-sidebar .profile-quick-btn,
    z-index: 3;
#clbi-right-sidebar .profile-action-box .clbi-user-btn,
    box-sizing: border-box;
#clbi-right-sidebar .profile-action-box {
    margin: 5px 10px 0 10px;
border-radius:0 !important;
    padding: 6px 10px 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    background: linear-gradient(to bottom, #1a1a1a 0%, #151515 100%);
    border-top: 1px solid #242424;
    border-bottom: 1px solid #080808;
    border-left: 1px solid #1e1e1e;
    border-right: 1px solid #111;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
    display: block;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}
}


.doc-link::before {
#clbi-right-sidebar .profile-quick-btn {
    content: "";
appearance:none !important;
    position: absolute;
-webkit-appearance:none !important;
    left: 5px;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: #2e2e2e;
    border-radius: 1px;
}
}


.doc-link:hover {
/* 구분선을 뺐으므로 버튼 영역 자체가 레벨 패널에 과하게 붙지 않도록 간격만 둔다. */
    color: #c0c0c0;
#clbi-right-sidebar .profile-action-box {
    background: linear-gradient(to bottom, #222 0%, #1a1a1a 100%);
margin:8px 0 0 !important;
    border-top-color: #333;
}
}


.doc-link:hover::before {
 
    background: #854369;
/* -----------------------------------------
151 보정: 프로필 제목 제거 / 상단 플레이트 제거 / 레벨 폭 복원
----------------------------------------- */
 
/* 프로필 박스에는 별도 제목줄을 두지 않는다. 이전 렌더가 남아도 보이지 않게 막는다. */
#clbi-right-sidebar .profile-card-box > .profile-card-title {
display:none !important;
}
}


/* =========================================
/* 프로필 사진과 이름은 내부 우물/플레이트 없이, 사이드 박스의 회색 표면 위에 바로 놓는다. */
  doc-tab-bar
#clbi-right-sidebar #clbi-user-avatar-wrap,
  ========================================= */
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
position:relative !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:5px !important;
min-height:142px !important;
height:auto !important;
margin:0 !important;
padding:10px 3px 6px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}


.doc-tab-bar {
#clbi-right-sidebar .profile-avatar-stage {
    position: relative;
position:relative !important;
    z-index: 3;
left:auto !important;
    display: flex;
top:auto !important;
    align-items: center;
transform:none !important;
    gap: 4px;
width:104px !important;
    padding: 5px 6px;
height:104px !important;
    background: linear-gradient(to bottom, #141414 0%, #111 100%);
flex:0 0 104px !important;
    border-top: 1px solid #0a0a0a;
display:flex !important;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.60);
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
}


.doc-tab-key {
#clbi-right-sidebar #clbi-user-name-row,
    display: flex;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
    align-items: center;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
    justify-content: center;
position:relative !important;
    flex: 0 0 auto;
left:auto !important;
    gap: 3px;
right:auto !important;
    padding: 0 4px;
top:auto !important;
    user-select: none;
bottom:auto !important;
    white-space: nowrap;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:18px !important;
min-height:18px !important;
margin:0 !important;
padding:0 4px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


.doc-tab-key kbd {
/* 레벨 섹션은 버튼 영역처럼 부모 내부 폭을 그대로 사용한다. */
    display: inline-flex;
#clbi-right-sidebar .profile-progress-block,
    align-items: center;
#clbi-right-sidebar #progress-panel.profile-progress-block {
    justify-content: center;
width:auto !important;
    width: 30px;
max-width:none !important;
    height: 30px;
margin:8px 0 0 !important;
    font-size: 10px;
box-sizing:border-box !important;
    font-weight: 700;
    font-family: inherit;
    color: #e2e2e2;
    background: linear-gradient(to bottom, #2a2a2a 0%, #1e1e1e 100%);
    border-top: 1px solid #3a3a3a;
    border-bottom: 1px solid #080808;
    border-left: 1px solid #2e2e2e;
    border-right: 1px solid #111;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 1px 0 rgba(255,255,255,0.02);
    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}
}


.doc-tab-key .doc-tab-arrow {
/* -----------------------------------------
    font-size: 10px;
152 보정: 프로필 상단 1:1 배경 복원
    color: #333;
----------------------------------------- */
    line-height: 1;
 
/* 프로필 박스에는 제목 없이, 상단 프로필 영역 자체가 1:1 회색 배경이 된다. */
#clbi-right-sidebar .profile-card-box {
position:relative !important;
background:#1d1d1d !important;
padding:0 8px 8px !important;
}
}


.doc-tab {
#clbi-right-sidebar .profile-card-box > .profile-card-title {
    flex: 1;
display:none !important;
    box-sizing: border-box;
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #e2e2e2;
    background: linear-gradient(to bottom, #1e1e1e 0%, #181818 100%);
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #080808;
    border-left: 1px solid #222;
    border-right: 1px solid #111;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.80);
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
}


.doc-tab:hover {
/* 프로필 배경은 우물이 아니라 박스 표면과 같은 회색 면으로 둔다. */
    color: #ffffff;
#clbi-right-sidebar #clbi-user-avatar-wrap,
    background: linear-gradient(to bottom, #242424 0%, #1a1a1a 100%);
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
    border-top-color: #333;
position:relative !important;
display:block !important;
width:100% !important;
aspect-ratio:1 / 1 !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-bottom:1px solid #202020 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


.doc-tab.active {
/* 아바타 이미지는 1:1 배경의 정중앙에 둔다. 주변 플레이트는 만들지 않는다. */
    color: #ffffff;
#clbi-right-sidebar .profile-avatar-stage {
    background: linear-gradient(to bottom, #2e1222 0%, #3d1a2f 52%, #5a2040 100%);
position:absolute !important;
    border-top-color: #7a3055;
left:50% !important;
    border-bottom-color: #1a0810;
top:50% !important;
    border-left-color: #6a2848;
transform:translate(-50%, -50%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
width:104px !important;
height:104px !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
}


/* =========================================
#clbi-right-sidebar .profile-avatar-stage::before,
  doc-footer
#clbi-right-sidebar .profile-avatar-stage::after {
  ========================================= */
content:none !important;
display:none !important;
}


.doc-footer {
#clbi-right-sidebar #clbi-user-avatar {
    position: relative;
position:relative !important;
    display: grid;
z-index:1 !important;
    grid-template-columns: 1fr 110px 44px 110px 200px;
display:block !important;
    gap: 12px;
width:96px !important;
    align-items: center;
height:96px !important;
    height: 44px;
object-fit:cover !important;
    margin-top: 7px;
object-position:center !important;
    padding: 0 10px;
background:#070707 !important;
    box-sizing: border-box;
border:1px solid #050505 !important;
    background: linear-gradient(to bottom, #282828 0%, #1a1a1a 40%, #161616 100%);
box-shadow:0 0 0 1px #2b2b2b !important;
    box-shadow:
        inset 1px 0 0 #494949,
        inset 0 -1px 0 #555,
        inset 0 2px 6px rgba(0,0,0,0.55);
    border-top: 1px solid #3a3a3a;
    border-bottom: 1px solid #0a0a0a;
    border-left: 1px solid #222;
    border-right: 1px solid #222;
    border-radius: 2px;
}
}


.doc-footer::before {
/* 이름은 이미지 아래, 같은 회색 배경 위에 텍스트만 얹는다. */
    content: "";
#clbi-right-sidebar #clbi-user-name-row,
    position: absolute;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
    inset: 0;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
    pointer-events: none;
position:absolute !important;
    opacity: 0.05;
left:8px !important;
    background: repeating-linear-gradient(
right:8px !important;
        135deg,
top:calc(50% + 52px) !important;
        rgba(255,255,255,0.08) 0px,
bottom:0 !important;
        rgba(255,255,255,0.08) 1px,
width:auto !important;
        transparent 1px,
height:auto !important;
        transparent 4px
min-height:0 !important;
    );
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


.doc-footer-sliders {
#clbi-right-sidebar #clbi-user-name {
    display: flex;
max-width:100% !important;
    align-items: center;
margin:0 !important;
    gap: 10px;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1.2 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}
}


.doc-slider {
#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
    position: relative;
color:#ffffff !important;
    width: 80px;
    height: 6px;
    background: #0a0a0a;
    border-top: 1px solid #080808;
    border-bottom: 1px solid #222;
    border-radius: 99px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.70);
}
}


.doc-slider.short {
/* 레벨 섹션은 아래 버튼 영역과 같은 폭 규칙을 유지한다. */
    width: 54px;
#clbi-right-sidebar .profile-progress-block,
#clbi-right-sidebar #progress-panel.profile-progress-block {
width:auto !important;
max-width:none !important;
margin:8px 0 0 !important;
box-sizing:border-box !important;
}
}


.doc-slider::after {
/* -----------------------------------------
    content: "";
153 보정: 프로필 상단 제목 잔여 공간 제거 / 원래 1:1 배경 배치 복원
    position: absolute;
----------------------------------------- */
    top: -6px;
 
    left: 48%;
/* 프로필 박스에는 어떤 제목줄/잔여 상단 슬롯도 남기지 않는다. */
    width: 10px;
#clbi-right-sidebar .profile-card-box > .profile-card-title,
    height: 18px;
#clbi-right-sidebar .profile-card-box > .clbi-right-title,
    border-radius: 2px;
#clbi-right-sidebar .profile-card-box .profile-card-titlebar {
    background: linear-gradient(to bottom, #c8c0b2 0%, #8a8278 100%);
display:none !important;
    border-top: 1px solid #d8d0c2;
height:0 !important;
    border-bottom: 1px solid #2a2622;
min-height:0 !important;
    border-left: 1px solid #aaa49c;
margin:0 !important;
    border-right: 1px solid #5a544e;
padding:0 !important;
    box-shadow:
border:0 !important;
        inset 0 1px 0 rgba(255,255,255,0.30),
box-shadow:none !important;
        0 1px 3px rgba(0,0,0,0.40);
overflow:hidden !important;
}
}


.doc-date {
/* 외곽 컨테이너는 다른 사이드 박스와 같은 회색 표면만 유지한다. */
    box-sizing: border-box;
#clbi-right-sidebar .profile-card-box {
    height: 26px;
position:relative !important;
    display: flex;
background:#1d1d1d !important;
    align-items: center;
padding:0 8px 8px !important;
    justify-content: center;
overflow:hidden !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #d45aa2;
    background: #0a0a0a;
    border-top: 1px solid #080808;
    border-bottom: 1px solid #2a1a22;
    border-left: 1px solid #0e0e0e;
    border-right: 1px solid #0e0e0e;
    border-radius: 2px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.70);
    text-shadow: 0 0 8px rgba(212,90,162,0.40);
}
}


.doc-knob {
/* 상단 프로필 영역은 1:1 회색 배경을 유지하되, 이미지+이름 묶음을 중앙에 둔다. */
    justify-self: center;
#clbi-right-sidebar #clbi-user-avatar-wrap,
    width: 32px;
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
    height: 32px;
position:relative !important;
    border-radius: 50%;
display:flex !important;
    background:
flex-direction:column !important;
        radial-gradient(circle at 36% 28%, rgba(255,255,255,0.30) 0%, transparent 24%),
align-items:center !important;
        linear-gradient(145deg, #c8bfb0 0%, #8a8278 48%, #464039 100%);
justify-content:center !important;
    border: 1px solid #2a2520;
gap:8px !important;
    box-shadow:
width:100% !important;
        inset 0 1px 0 rgba(255,255,255,0.30),
aspect-ratio:1 / 1 !important;
        inset 0 -2px 0 rgba(0,0,0,0.22),
height:auto !important;
        0 2px 5px rgba(0,0,0,0.50);
min-height:0 !important;
margin:0 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-bottom:1px solid #202020 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


.doc-keys {
/* 아바타는 주변 플레이트 없이 회색 배경 위에 직접 놓는다. */
    display: grid;
#clbi-right-sidebar .profile-avatar-stage {
    grid-template-columns: repeat(5, 1fr);
position:relative !important;
    gap: 5px;
left:auto !important;
top:auto !important;
transform:none !important;
width:104px !important;
height:104px !important;
flex:0 0 104px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
}


.doc-keys span {
#clbi-right-sidebar .profile-avatar-stage::before,
    height: 22px;
#clbi-right-sidebar .profile-avatar-stage::after {
    border-radius: 2px;
content:none !important;
    background: linear-gradient(to bottom, #d8d4ca 0%, #a09890 55%, #6e6660 100%);
display:none !important;
    border-top: 1px solid #e0dcd2;
    border-bottom: 1px solid #1e1c18;
    border-left: 1px solid #b8b0a8;
    border-right: 1px solid #4a4440;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.40),
        0 1px 2px rgba(0,0,0,0.30);
}
}


.doc-keys span.red {
#clbi-right-sidebar #clbi-user-avatar {
    background: linear-gradient(to bottom, #cc6058 0%, #922e28 55%, #521410 100%);
position:relative !important;
    border-top-color: #d87070;
z-index:1 !important;
    border-bottom-color: #1e0808;
display:block !important;
width:96px !important;
height:96px !important;
object-fit:cover !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}
}


.doc-keys span.amber {
/* 이름도 별도 판 없이, 이미지 아래에 텍스트만 둔다. */
    background: linear-gradient(to bottom, #e4bc6c 0%, #b87c28 55%, #6c3e08 100%);
#clbi-right-sidebar #clbi-user-name-row,
    border-top-color: #ecd080;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
    border-bottom-color: #201008;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:18px !important;
min-height:18px !important;
margin:0 !important;
padding:0 4px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


/* =========================================
#clbi-right-sidebar #clbi-user-name {
  Responsive
max-width:100% !important;
  ========================================= */
margin:0 !important;
color:#e2e2e2 !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1.15 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}


@media screen and (max-width: 1280px) {
#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
    .doc-layout {
color:#ffffff !important;
        grid-template-columns: 210px minmax(0, 1fr);
}
    }


    .doc-layout-right {
/* 레벨 섹션은 아래 버튼 영역과 같은 폭을 계속 사용한다. */
        grid-column: 1 / -1;
#clbi-right-sidebar .profile-progress-block,
        display: grid;
#clbi-right-sidebar #progress-panel.profile-progress-block {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width:auto !important;
        gap: 7px;
max-width:none !important;
    }
margin:8px 0 0 !important;
box-sizing:border-box !important;
}


    .doc-footer {
/* -----------------------------------------
        grid-template-columns: 1fr 110px 44px 110px;
154 보정: 프로필 상단 비율 원상 복구
    }
----------------------------------------- */


    .doc-keys {
/* 프로필 박스는 제목/상단 잔여 슬롯 없이 바로 프로필 영역으로 시작한다. */
        display: none;
#clbi-right-sidebar .profile-card-box {
    }
position:relative !important;
background:#1d1d1d !important;
padding:0 8px 8px !important;
overflow:hidden !important;
}
}


@media screen and (max-width: 980px) {
#clbi-right-sidebar .profile-card-box::before,
    .doc-layout,
#clbi-right-sidebar .profile-card-box::after {
    .doc-layout-lower,
content:none !important;
    .doc-layout-right {
display:none !important;
        grid-template-columns: 1fr;
}
    }


    .doc-footer {
#clbi-right-sidebar .profile-card-box > .profile-card-title,
        grid-template-columns: 1fr;
#clbi-right-sidebar .profile-card-box > .clbi-right-title,
        height: auto;
#clbi-right-sidebar .profile-card-box .profile-card-titlebar {
        padding: 8px 10px;
display:none !important;
    }
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}


    .doc-footer-sliders {
/* 상단 프로필 영역은 원래처럼 과하게 커지지 않는 고정 비율 슬롯으로 되돌린다. */
        justify-content: center;
#clbi-right-sidebar #clbi-user-avatar-wrap,
    }
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
position:relative !important;
display:block !important;
width:100% !important;
height:180px !important;
min-height:180px !important;
aspect-ratio:auto !important;
margin:0 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-top:0 !important;
border-bottom:1px solid #202020 !important;
box-shadow:none !important;
overflow:hidden !important;
}


    .doc-date,
/* 이미지 주변에는 별도 플레이트를 만들지 않고, 기존 위치 체계만 복원한다. */
    .doc-knob {
#clbi-right-sidebar .profile-avatar-stage {
        justify-self: center;
position:absolute !important;
    }
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
width:104px !important;
height:104px !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
}
/* =====================================================================
  Nations & Factions — original-structure panel remake
  ---------------------------------------------------------------------
  This block intentionally keeps the original MediaWiki table parsing.
  It only adds the visual hierarchy:
  1) one large document panel,
  2) flat labels on the panel surface,
  3) recessed wells only where real content sits.
  ===================================================================== */


body.page-국가_및_조합 .liberty-content-main .mw-parser-output > .clbi-nf-board,
#clbi-right-sidebar .profile-avatar-stage::before,
body.page-Nations_\&_Factions .liberty-content-main .mw-parser-output > .clbi-nf-board {
#clbi-right-sidebar .profile-avatar-stage::after {
    margin: 0 !important;
content:none !important;
    padding: 4px !important;
display:none !important;
    box-sizing: border-box !important;
    background: #1d1d1d !important;
    border: 1px solid #050505 !important;
    border-top-color: #555555 !important;
    border-left-color: #2b2b2b !important;
    border-right-color: #2b2b2b !important;
    border-bottom-color: #050505 !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;
    color: #e2e2e2 !important;
}
}


body.page-국가_및_조합 .clbi-nf-board *,
#clbi-right-sidebar #clbi-user-avatar {
body.page-Nations_\&_Factions .clbi-nf-board * {
position:relative !important;
    box-sizing: border-box;
z-index:1 !important;
display:block !important;
width:96px !important;
height:96px !important;
object-fit:cover !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table,
/* 이름은 원래처럼 이미지 아래쪽에 크게 놓고, 판/우물 없이 텍스트만 둔다. */
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table {
#clbi-right-sidebar #clbi-user-name-row,
    width: 100% !important;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
    max-width: none !important;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
    margin: 0 auto !important;
position:absolute !important;
    background: #1d1d1d !important;
left:8px !important;
    color: #e2e2e2 !important;
right:8px !important;
    border: 0 !important;
top:calc(50% + 52px) !important;
    border-collapse: separate !important;
bottom:0 !important;
    border-spacing: 2px !important;
width:auto !important;
    font-size: 8.5pt !important;
height:auto !important;
    line-height: 1.45 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


/* Top-level cells stay as panel surface by default. Do not convert table layout. */
#clbi-right-sidebar #clbi-user-name {
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > th,
max-width:100% !important;
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > td,
margin:0 !important;
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > th,
color:#e2e2e2 !important;
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > td {
font-size:14px !important;
    background: #1d1d1d !important;
font-weight:700 !important;
    border: 0 !important;
line-height:1.15 !important;
    padding: 0 !important;
text-align:center !important;
    color: #e2e2e2 !important;
white-space:nowrap !important;
    vertical-align: middle !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}
}


/* Section labels: 판도 / 당대 주요 세력 / 당대 존재 국가. Flat text on surface, not a well. */
#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[colspan="5"] > div[style*="line-height:1.5"],
color:#ffffff !important;
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[colspan="5"] > div[style*="line-height:1.5"] {
    min-height: 22px !important;
    padding: 3px 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    color: #e2e2e2 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .25px !important;
    text-align: center !important;
    text-shadow: 1px 1px 0 #000 !important;
    box-shadow: none !important;
}
}


/* Year switch bar: a flat control strip, still using the original collapsible toggles. */
/* 레벨 섹션은 아래 버튼 영역과 같은 폭을 유지한다. */
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr:first-child > th[colspan="5"] > div[id^="mw-customcollapsible-y"] > div[style*="justify-content:space-between"],
#clbi-right-sidebar .profile-progress-block,
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr:first-child > th[colspan="5"] > div[id^="mw-customcollapsible-y"] > div[style*="justify-content:space-between"] {
#clbi-right-sidebar #progress-panel.profile-progress-block {
    min-height: 24px !important;
width:auto !important;
    padding: 0 7px !important;
max-width:none !important;
    top: 0 !important;
margin:8px 0 0 !important;
    background: #1d1d1d !important;
box-sizing:border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #e2e2e2 !important;
    box-shadow: none !important;
    text-shadow: 1px 1px 0 #000 !important;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr:first-child > th[colspan="5"] > div[id^="mw-customcollapsible-y"] > div[style*="justify-content:space-between"] span:first-child,
/* -----------------------------------------
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr:first-child > th[colspan="5"] > div[id^="mw-customcollapsible-y"] > div[style*="justify-content:space-between"] span:last-child,
155 보정: 프로필 상단은 리메이크 이전 치수/비율만 복원
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr:first-child > th[colspan="5"] > div[id^="mw-customcollapsible-y"] > div[style*="justify-content:space-between"] span:first-child,
----------------------------------------- */
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr:first-child > th[colspan="5"] > div[id^="mw-customcollapsible-y"] > div[style*="justify-content:space-between"] span:last-child {
 
    color: #8a8a8a !important;
/* 프로필 컨테이너의 최신 색상/테마는 유지하되, 제목·잔여 슬롯은 만들지 않는다. */
#clbi-right-sidebar .profile-card-box {
position:relative !important;
background:#1d1d1d !important;
padding:0 8px 8px !important;
overflow:hidden !important;
}
}


/* Content wells: map side controls and map body. */
#clbi-right-sidebar .profile-card-box::before,
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[width="5%"],
#clbi-right-sidebar .profile-card-box::after {
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[colspan="3"][width="90%"],
content:none !important;
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[width="5%"],
display:none !important;
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[colspan="3"][width="90%"] {
    padding: 3px !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;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[colspan="3"][width="90%"] img,
#clbi-right-sidebar .profile-card-box > .profile-card-title,
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[colspan="3"][width="90%"] .mw-file-element,
#clbi-right-sidebar .profile-card-box > .clbi-right-title,
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[colspan="3"][width="90%"] img,
#clbi-right-sidebar .profile-card-box .profile-card-titlebar {
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[colspan="3"][width="90%"] .mw-file-element {
display:none !important;
    max-width: 100% !important;
height:0 !important;
    height: auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


/* Major faction cards sit in wells, but their own faction color remains data/content. */
/* 상단 프로필 영역의 치수와 위치 체계는 리메이크 이전값을 그대로 사용한다. */
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[width="30%"],
#clbi-right-sidebar #clbi-user-avatar-wrap,
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[width="30%"] {
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
    padding: 3px !important;
position:relative !important;
    background: #080808 !important;
display:block !important;
    border: 0 !important;
width:100% !important;
    box-shadow:
height:180px !important;
        inset 0 1px 0 #101010,
min-height:180px !important;
        inset -1px 0 0 #101010,
aspect-ratio:auto !important;
        inset 1px 0 0 #555555,
margin:0 !important;
        inset 0 -1px 0 #555555 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-bottom:1px solid #202020 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[width="30%"] div[style*="height:140px"],
/* 이미지 배치 비율은 이전처럼 중앙 104px 스테이지 기준. 표면/플레이트는 최신 flat 규칙 유지. */
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > th[width="30%"] div[style*="height:140px"] {
#clbi-right-sidebar .profile-avatar-stage {
    border-radius: 0 !important;
position:absolute !important;
    border: 1px solid #050505 !important;
left:50% !important;
    box-shadow:
top:50% !important;
        inset 0 1px 0 rgba(255,255,255,.055),
transform:translate(-50%, -50%) !important;
        inset 0 -1px 0 rgba(0,0,0,.72) !important;
width:104px !important;
height:104px !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
}


/* Whole nation-list sector is a well. Inside it, region labels are flat and entries are recessed. */
#clbi-right-sidebar .profile-avatar-stage::before,
body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"],
#clbi-right-sidebar .profile-avatar-stage::after {
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] {
content:none !important;
    padding: 3px !important;
display:none !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;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable,
/* 실제 프로필 이미지 크기는 리메이크 이전 90px 기준으로 복원한다. */
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable {
#clbi-right-sidebar #clbi-user-avatar {
    width: 100% !important;
position:relative !important;
    margin: 0 !important;
z-index:1 !important;
    background: #080808 !important;
display:block !important;
    border: 0 !important;
width:90px !important;
    border-collapse: separate !important;
height:90px !important;
    border-spacing: 2px !important;
object-fit:cover !important;
    color: #e2e2e2 !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable th,
/* 이름 줄도 리메이크 이전 위치값을 사용하되, 별도 우물/플레이트는 만들지 않는다. */
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable th {
#clbi-right-sidebar #clbi-user-name-row,
    padding: 3px 7px !important;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
    background: #1d1d1d !important;
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
    border: 0 !important;
position:absolute !important;
    color: #e2e2e2 !important;
left:8px !important;
    font-size: 10px !important;
right:8px !important;
    font-weight: 700 !important;
top:calc(50% + 52px) !important;
    line-height: 1.25 !important;
bottom:0 !important;
    vertical-align: middle !important;
width:auto !important;
    text-align: center !important;
height:auto !important;
    text-shadow: 1px 1px 0 #000 !important;
min-height:0 !important;
    box-shadow: none !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable th > div,
#clbi-right-sidebar #clbi-user-name {
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable th > div {
max-width:100% !important;
    position: static !important;
margin:0 !important;
    top: auto !important;
color:#e2e2e2 !important;
    padding: 0 !important;
font-size:14px !important;
    background: transparent !important;
font-weight:700 !important;
    border: 0 !important;
line-height:1.2 !important;
    border-radius: 0 !important;
text-align:center !important;
    box-shadow: none !important;
white-space:nowrap !important;
    color: inherit !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable td,
#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable td {
color:#ffffff !important;
    padding: 0 !important;
    background: #080808 !important;
    border: 0 !important;
    color: #e2e2e2 !important;
    vertical-align: middle !important;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable td > div,
/* 레벨 섹션은 최신화 요청대로 아래 버튼 영역과 같은 폭을 유지한다. */
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable td > div {
#clbi-right-sidebar .profile-progress-block,
    min-height: 24px !important;
#clbi-right-sidebar #progress-panel.profile-progress-block {
    padding: 3px 7px !important;
width:auto !important;
    top: auto !important;
max-width:none !important;
    background: #101010 !important;
margin:8px 0 0 !important;
    border: 1px solid #050505 !important;
box-sizing:border-box !important;
    border-radius: 0 !important;
    color: #e2e2e2 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    text-align: center !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(0,0,0,.72) !important;
}
}


body.page-국가_및_조합 .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable td > div:hover,
/* -----------------------------------------
body.page-Nations_\&_Factions .clbi-nf-board > table.clbi-nf-table > tbody > tr > td[colspan="10"] > div > table.wikitable td > div:hover {
156 보정: 프로필 상단 하이라이트 복원 / 이름-레벨 구분선 제거
    background: #141414 !important;
----------------------------------------- */
 
/*
프로필 상단 영역이 컨테이너 맨 위를 덮어 1px north-light 하이라이트가
사라져 보이던 문제를 막는다. 컨테이너 상단 1px은 #555555로 직접 확보하고,
실제 프로필 영역은 그 아래에서 시작하게 한다.
*/
#clbi-right-sidebar .profile-card-box {
background:
linear-gradient(
to bottom,
#555555 0,
#555555 1px,
#1d1d1d 1px,
#1d1d1d 100%
) !important;
padding:1px 8px 8px !important;
}
}


body.page-국가_및_조합 .clbi-nf-board img,
/* 이름과 레벨 섹션 사이에 남아 있던 #202020 구분선은 제거한다. */
body.page-국가_및_조합 .clbi-nf-board .mw-file-element,
#clbi-right-sidebar #clbi-user-avatar-wrap,
body.page-Nations_\&_Factions .clbi-nf-board img,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
body.page-Nations_\&_Factions .clbi-nf-board .mw-file-element {
border-bottom:0 !important;
    vertical-align: middle !important;
}
}

2026년 6월 29일 (월) 03:18 판

/* =========================================
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% + var(--clbi-content-extra, 14px)) !important;
max-height:calc(100% + var(--clbi-content-extra, 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. 세로 가변 셸 / 좌측 최근 변경 최종 구조
----------------------------------------- */

/*
목표:
- 기본 상태에서는 원래 높이와 원래 배치를 유지한다.
- 세로가 부족할 때만 뉴스 박스 외곽 프레임을 줄인다.
- 최근 변경 항목은 모두 렌더링한다.
- 항목은 viewport 내부에서만 잘린다.
- 하단 마감은 실제 .news-bottom-finish DOM 행이 담당한다.
*/

@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-top-nav-wrap,
#clbi-bottom-nav-wrap,
.content-wrapper {
top:0 !important;
bottom:auto !important;
transform:none !important;
}

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

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

.news-bottom-finish {
display:none;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained {
display:flex !important;
flex-direction:column !important;
height:var(--adaptive-news-h) !important;
max-height:var(--adaptive-news-h) !important;
min-height:0 !important;
overflow:hidden !important;
padding:0 8px 8px !important;
box-sizing:border-box !important;
position:relative !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained > .clbi-left-title {
flex:0 0 auto !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box {
display:grid !important;
grid-template-rows:auto auto auto minmax(0, 1fr) 12px !important;
grid-template-columns:minmax(0, 1fr) !important;
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
padding:3px !important;
overflow:hidden !important;
position:relative !important;
box-sizing:border-box !important;
background:#080808 !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained #clbi-left-news-changelog-title {
grid-row:1 !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-changelog-feed {
grid-row:2 !important;
min-height:0 !important;
overflow:hidden !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained #clbi-left-news-recent-title {
grid-row:3 !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed {
grid-row:4 !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
position:relative !important;
padding:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-viewport {
position:relative !important;
display:block !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-stack {
position:relative !important;
display:block !important;
width:100% !important;
min-height:0 !important;
box-sizing:border-box !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish {
grid-row:5 !important;
display:block !important;
height:12px !important;
min-height:12px !important;
width:100% !important;
background:#080808 !important;
box-shadow:none !important;
pointer-events:none !important;
box-sizing:border-box !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed.is-adaptive-faded .news-recent-viewport::after {
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:42px !important;
z-index:20 !important;
pointer-events:none !important;
background:
linear-gradient(
to bottom,
rgba(8,8,8,0) 0%,
rgba(8,8,8,0.30) 34%,
rgba(8,8,8,0.72) 68%,
#080808 100%
) !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-item.is-adaptive-hidden {
display:grid !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained::before,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained::after,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box::before,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box::after,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed::after {
content:none !important;
display:none !important;
}



/* -----------------------------------------
2-Q. 좌측 뉴스 하단 마감 회색선 제거
----------------------------------------- */

/*
뉴스 하단 마감 안쪽의 회색선은 .news-bottom-finish의 inset shadow였다.
마감 영역은 #080808 면으로 닫고, 별도 내부 밝은 선을 만들지 않는다.
*/

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish {
background:#080808 !important;
box-shadow:none !important;
transition:background .12s ease, color .12s ease;
}


/* -----------------------------------------
2-S. 좌측 뉴스 하단 기준선 정렬 / finish 고정
----------------------------------------- */

/*
짧은 세로 화면에서 좌측 뉴스 박스의 외곽 하단은 본문 컨테이너 하단선과 맞춘다.
최근 변경 항목은 feed 안에서만 잘리고, 실제 finish 행 12px은 항상 남는다.
*/

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained {
display:flex !important;
flex-direction:column !important;
height:var(--adaptive-news-h) !important;
max-height:var(--adaptive-news-h) !important;
min-height:0 !important;
overflow:hidden !important;
padding:0 8px 8px !important;
box-sizing:border-box !important;
position:relative !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained > .clbi-left-title {
flex:0 0 auto !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box {
display:flex !important;
flex-direction:column !important;
flex:1 1 auto !important;
height:auto !important;
min-height:0 !important;
padding:3px !important;
overflow:hidden !important;
position:relative !important;
box-sizing:border-box !important;
background:#080808 !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-feed-title,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-changelog-feed {
flex:0 0 auto !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed {
flex:0 0 var(--adaptive-recent-h) !important;
height:var(--adaptive-recent-h) !important;
max-height:var(--adaptive-recent-h) !important;
min-height:0 !important;
position:relative !important;
overflow:hidden !important;
padding:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-viewport {
position:relative !important;
display:block !important;
width:100% !important;
height:100% !important;
max-height:100% !important;
min-height:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-recent-stack {
position:relative !important;
display:block !important;
width:100% !important;
min-height:0 !important;
box-sizing:border-box !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish {
display:block !important;
flex:0 0 12px !important;
height:12px !important;
min-height:12px !important;
width:100% !important;
background:#080808 !important;
box-shadow:none !important;
pointer-events:none !important;
box-sizing:border-box !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed.is-adaptive-faded .news-recent-viewport::after {
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:42px !important;
z-index:20 !important;
pointer-events:none !important;
background:
linear-gradient(
to bottom,
rgba(8,8,8,0) 0%,
rgba(8,8,8,0.28) 32%,
rgba(8,8,8,0.70) 68%,
#080808 100%
) !important;
}

/* 이전 실험용 pseudo 마감/페이드는 모두 끈다. */
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained::before,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained::after,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box::before,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .clbi-news-box::after,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed::after {
content:none !important;
display:none !important;
}


/* -----------------------------------------
2-T. 좌측 뉴스 기본 높이 보존 기준
----------------------------------------- */

/*
뉴스 박스는 충분한 높이에서 자연 내용 높이를 유지한다.
adaptive-constrained 상태는 실제로 본문 하단을 넘칠 때만 JS가 부여한다.
*/


/* -----------------------------------------
2-U. 좌측 뉴스 페이드 마스크 / 기존 하단선 보존
----------------------------------------- */

/*
하단 마감선은 새로 만들지 않는다.
페이드 오버레이도 그리지 않는다.

기존 문제:
- ::after 페이드가 기존 하단 하이라이트 위를 덮었다.
- border/pseudo로 새 선을 만들면 내부에 의도하지 않은 획처럼 보였다.

수정:
- viewport에 그라데이션 overlay를 그리지 않고, mask로 항목 내용만 흐리게 한다.
- .news-bottom-finish는 투명한 공간으로 두어 부모 우물의 기존 마감이 보이게 한다.
*/

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed.is-adaptive-faded .news-recent-viewport::after {
content:none !important;
display:none !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed.is-adaptive-faded .news-recent-viewport {
-webkit-mask-image:linear-gradient(
to bottom,
#000 0%,
#000 calc(100% - 46px),
rgba(0,0,0,0.70) calc(100% - 26px),
rgba(0,0,0,0.28) calc(100% - 10px),
transparent 100%
) !important;
mask-image:linear-gradient(
to bottom,
#000 0%,
#000 calc(100% - 46px),
rgba(0,0,0,0.70) calc(100% - 26px),
rgba(0,0,0,0.28) calc(100% - 10px),
transparent 100%
) !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish {
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish::before,
#clbi-left-sidebar .clbi-left-news-box.is-adaptive-constrained .news-bottom-finish::after {
content:none !important;
display: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;
}

/* MediaWiki가 본문 프레임 안에 끼워 넣는 중간 래퍼도 높이를 전달해야 한다.
   시스템 CSS/JS 문서에서는 이미 별도 보정이 있었지만, 일반 문서는 이 단계가 빠져
   .mw-parser-output이 스크롤 박스가 아니라 내용 높이만큼 늘어나는 블록이 되었다. */
.liberty-content-main > #mw-content-text,
.liberty-content-main > .mw-body-content,
.liberty-content-main #mw-content-text,
.liberty-content-main .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;
}

.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-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을 다시 보이게 하더라도
   Common.js가 현재 문서를 대문으로 판정해 body.clbi-main-page를 붙인 경우에만
   MediaWiki 기본 제목을 강제로 숨긴다.
   SPA 이동 뒤 native page-대문/rootpage-대문 body class가 남아 시스템 문서까지
   대문 규칙을 받는 일을 막기 위해 native page class에는 의존하지 않는다. */
body.action-view.clbi-main-page .liberty-content-header,
body.action-view.clbi-main-page .liberty-content-header .title,
body.action-view.clbi-main-page .liberty-content-header .title h1,
body.action-view.clbi-main-page .liberty-content-header h1,
body.action-view.clbi-main-page .mw-page-title-main,
body.action-view.clbi-main-page .mw-page-title-main::after,
body.action-view.clbi-main-page .mw-page-title-namespace,
body.action-view.clbi-main-page .mw-page-title-namespace::after,
body.action-view.clbi-main-page .mw-page-title-separator,
body.action-view.clbi-main-page .mw-page-title-separator::after,
body.action-view.clbi-main-page #firstHeading,
body.action-view.clbi-main-page .firstHeading,
body.action-view.clbi-main-page .mw-first-heading,
body.action-view.clbi-main-page .page-heading,
body.action-view.clbi-main-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.clbi-main-page .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.46 좌측 광고판 Ad
----------------------------------------- */

/*
좌측 Ad는 언어/뉴스 사이드 박스의 픽셀 규칙을 따른다.
- 제목은 아이콘이 없는 clbi-left-title 우물 변형이다.
- 실제 아이콘 슬롯은 만들지 않고, 텍스트는 좌측 패딩 기준으로 정렬한다.
- right-billboard-recess 이하의 CRT 본체는 원본 구조를 보존한다.
- left-ad-content-shell / right-billboard-body는 구조 래퍼로만 남기고 별도 프레임을 만들지 않는다.
*/

#side-toc-box,
.liberty-content-main #toc,
.liberty-content-main .toc {
display:none !important;
}

#clbi-left-sidebar .left-ad-box {
position:relative !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
border-radius:0 !important;
overflow:hidden !important;
padding:0 8px 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;
}

#clbi-left-sidebar .left-ad-title {
min-height:0 !important;
height:auto !important;
margin:4px 0 3px !important;
padding:3px 7px !important;
box-sizing:border-box !important;
background:#080808 !important;
border:0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:6px !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !important;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:left !important;
text-shadow:1px 1px 0 #000 !important;
}

#clbi-left-sidebar .left-ad-title.left-ad-title-iconless {
gap:0 !important;
}

#clbi-title-left-ad,
#clbi-left-sidebar .left-ad-title-label {
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
height:16px !important;
min-width:0 !important;
max-width:100% !important;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
letter-spacing:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}

#clbi-left-sidebar .left-ad-title-text,
#clbi-left-sidebar .left-ad-title-main,
#clbi-left-sidebar .left-ad-title-note {
display:none !important;
}

#clbi-left-sidebar .left-ad-content-shell {
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}

#clbi-left-sidebar .left-ad-box .right-billboard-body {
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}

#clbi-left-sidebar .left-ad-box .right-billboard-recess {
margin:0 !important;
}

#clbi-left-sidebar .left-ad-bottom-finish {
display:none !important;
height:0 !important;
min-height:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none !important;
}

#clbi-left-sidebar .left-ad-box.is-left-ad-extended {
height:auto !important;
max-height:none !important;
display:block !important;
min-height:0 !important;
}

#clbi-left-sidebar .left-ad-box.is-left-ad-extended .left-ad-title,
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .left-ad-content-shell,
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .right-billboard-body,
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .right-billboard-recess,
#clbi-left-sidebar .left-ad-box.is-left-ad-extended .right-billboard-caption {
flex:none !important;
}

#clbi-left-sidebar .left-ad-box.is-left-ad-title-only {
height:auto !important;
max-height:none !important;
}

#clbi-left-sidebar .left-ad-box.is-left-ad-title-only .left-ad-content-shell {
display:none !important;
}

/* -----------------------------------------
9.44 우측 The Great Wall
----------------------------------------- */

/* 우측 사이드바는 본문 컨테이너 높이를 기준으로 고정된다.
   프로필과 SITE INFORMATION은 자기 높이를 유지하고,
   The Great Wall만 남는 세로 공간을 채운다. */
#clbi-right-sidebar {
height:100%;
max-height:100%;
min-height:0;
align-self:stretch;
overflow:hidden;
}

#clbi-right-sidebar > .profile-card-box,
#clbi-right-sidebar > .site-info-sidebar {
flex:0 0 auto;
}

.great-wall-sidebar {
position:relative;
display:flex;
flex-direction:column;
flex:1 1 auto;
min-height:0;
background:#1d1d1d;
overflow:hidden;
}

/* The Great Wall은 좌측 언어/뉴스 타이틀에서 확정한 내부 라벨 패널 표준을 따른다. */
.great-wall-sidebar > .clbi-right-title {
flex:0 0 auto;
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;
justify-content:flex-start;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555;
}

.great-wall-title-icon,
.great-wall-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;
}

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

#clbi-title-great-wall {
display:inline-flex;
align-items:center;
min-width:0;
height:100%;
color:#e2e2e2;
font-size:12px;
font-weight:700;
line-height:1;
letter-spacing:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.great-wall-content {
position:relative;
flex:1 1 auto;
min-height:0;
height:auto;
padding:3px !important;
box-sizing:border-box;
background:#080808;
line-height:1.4;
overflow:hidden;
display:block;
}

.great-wall-list {
position:relative;
min-height:0;
height:100%;
max-height:100%;
margin:0;
padding:0;
box-sizing:border-box;
display:flex;
flex-direction:column;
overflow-y:auto;
overflow-x:hidden;
border-top:1px solid #202020;
border-bottom:1px solid #202020;
scrollbar-width:thin;
scrollbar-color:#333333 #080808;
}

/* 메시지 행은 기존 대문 GUESTBOOK의 단순 기록행을 기준으로 한다.
   클릭형 문서 카드가 아니라, 좌측 프로필 사진과 본문 메시지가 쌓이는 채팅형 기록행이다. */
.great-wall-entry {
position:relative;
display:grid;
grid-template-columns:27px minmax(0,1fr);
gap:5px;
width:100%;
min-height:0;
margin:0;
padding:6px 2px 6px 3px;
box-sizing:border-box;
background:transparent !important;
border:0;
border-bottom:1px solid #202020;
border-radius:0;
color:#c8c8c8 !important;
text-align:left;
text-decoration:none !important;
font:inherit;
line-height:1.2;
overflow:visible;
box-shadow:none !important;
transition:background .12s ease, color .12s ease;
}

.great-wall-entry:last-child {
border-bottom:none;
}

button.great-wall-entry {
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}

button.great-wall-entry::-moz-focus-inner {
border:0;
padding:0;
}

.great-wall-entry:hover,
button.great-wall-entry:focus-visible {
background:#111111 !important;
color:#ffffff !important;
outline:none;
}

.great-wall-entry.is-selected,
.great-wall-entry.is-own.is-selected {
background:#111111 !important;
}

.great-wall-avatar {
grid-column:1;
grid-row:1;
display:block;
width:25px;
height:25px;
margin:0 0 0;
object-fit:cover;
object-position:center;
background:#070707;
border:1px solid #050505;
box-sizing:border-box;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010;
}

.great-wall-bubble {
grid-column:2;
grid-row:1;
position:relative;
min-width:0;
max-width:100%;
padding:0;
box-sizing:border-box;
background:transparent !important;
border:0;
color:#c8c8c8;
box-shadow:none !important;
}

.great-wall-entry.is-own .great-wall-bubble,
.great-wall-entry:hover .great-wall-bubble,
.great-wall-entry.is-selected .great-wall-bubble {
background:transparent !important;
border:0;
box-shadow:none !important;
}

.great-wall-entry-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
min-width:0;
height:auto;
margin:0 0 3px;
font-size:9px;
line-height:1.2;
}

.great-wall-user {
display:block;
min-width:0;
max-width:92px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#eeeeee;
font-size:9px;
font-weight:700;
line-height:1.2;
text-shadow:1px 1px 0 #000;
}

.great-wall-time {
flex:0 0 auto;
display:block;
min-width:0;
height:auto;
padding:0;
box-sizing:border-box;
background:transparent;
border:0;
color:#8a8a8a;
font-size:8px;
font-weight:700;
line-height:1.2;
white-space:nowrap;
text-shadow:1px 1px 0 #000;
box-shadow:none;
}

.great-wall-text {
display:block;
min-width:0;
max-width:100%;
max-height:none;
overflow:visible;
color:#c8c8c8;
font-size:10px;
font-weight:400;
line-height:1.45;
white-space:normal;
word-break:normal;
overflow-wrap:anywhere;
text-shadow:1px 1px 0 #000;
}

.great-wall-entry:hover .great-wall-text,
.great-wall-entry.is-selected .great-wall-text {
color:#e2e2e2;
}

.great-wall-empty {
display:flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:4px 6px;
box-sizing:border-box;
background:#101010;
border:1px solid #202020;
color:#8a8a8a;
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.022),
inset 0 -1px 0 rgba(0,0,0,0.58);
}

/* The Great Wall composer is a separate lower sector, matching the title-sector logic.
   It is not a nested well inside the message list. */
.great-wall-compose-sector {
flex:0 0 auto;
margin:3px 0 0;
padding:3px;
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;
}

.great-wall-editor {
display:grid;
grid-template-columns:minmax(0,1fr) 42px 34px;
grid-template-areas:"input submit delete";
gap:3px;
margin:0;
padding:0;
box-sizing:border-box;
background:transparent;
border:0;
box-shadow:none;
}

.great-wall-sidebar:not(.has-own-entry) .great-wall-editor,
.great-wall-sidebar.is-guest .great-wall-editor {
grid-template-columns:minmax(0,1fr) 42px;
grid-template-areas:"input submit";
}

.great-wall-sidebar:not(.has-own-entry) .great-wall-delete,
.great-wall-sidebar.is-guest .great-wall-delete {
display:none;
}

/* The Great Wall composer input uses the top navigation search input surface. */
.great-wall-input {
grid-area:input;
width:100%;
height:26px;
min-width:0;
margin:0;
background:#070707 !important;
border:1px solid #202020 !important;
border-radius:0 !important;
color:#e2e2e2;
-webkit-text-fill-color:#e2e2e2;
padding:0 10px;
border-radius:0 !important;
font-size:11px;
box-sizing:border-box;
outline:0 !important;
outline-offset:0 !important;
pointer-events:all;
transition: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) !important;
-webkit-appearance:none;
appearance:none;
-webkit-tap-highlight-color:transparent;
}

.great-wall-input::placeholder {
color:#626262;
opacity:1;
-webkit-text-fill-color:#626262;
}

.great-wall-input:hover,
.great-wall-input:focus,
.great-wall-input:focus-visible,
.great-wall-input:active,
.great-wall-input[readonly],
.great-wall-input:disabled {
background:#070707 !important;
border:1px solid #202020 !important;
border-radius:0 !important;
color:#e2e2e2;
-webkit-text-fill-color:#e2e2e2;
outline:0 !important;
outline-offset:0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55) !important;
-webkit-appearance:none;
appearance:none;
filter:none;
}

.great-wall-input::-moz-focus-inner {
border:0 !important;
padding:0 !important;
}

.great-wall-input:disabled {
cursor:default;
opacity:1;
}

.great-wall-input:disabled::placeholder,
.great-wall-input[readonly]::placeholder {
color:#626262;
opacity:1;
-webkit-text-fill-color:#626262;
}

.great-wall-input:-webkit-autofill,
.great-wall-input:-webkit-autofill:hover,
.great-wall-input:-webkit-autofill:focus,
.great-wall-input:-webkit-autofill:active {
-webkit-text-fill-color:#e2e2e2 !important;
caret-color:#e2e2e2;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55),
0 0 0 1000px #070707 inset !important;
border:1px solid #202020 !important;
transition:background-color 9999s ease-in-out 0s;
}

.great-wall-submit,
.great-wall-delete {
display:flex;
align-items:center;
justify-content:center;
height:26px;
min-width:0;
margin:0;
padding:0 5px;
box-sizing:border-box;
background:#141414;
border:1px solid;
border-color:#333333 #202020 #050505 #202020;
border-radius:0;
color:#c8c8c8;
font:inherit;
font-size:9px;
font-weight:700;
line-height:1;
text-align:center;
text-shadow:1px 1px 0 #000;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
}

.great-wall-submit {
grid-area:submit;
}

.great-wall-delete {
grid-area:delete;
}

.great-wall-submit:hover:not(:disabled),
.great-wall-submit:focus-visible:not(:disabled),
.great-wall-delete:hover:not(:disabled),
.great-wall-delete:focus-visible:not(:disabled) {
background:#1d1d1d;
border-color:#333333 #202020 #050505 #202020;
color:#ffffff;
outline:0 !important;
outline-offset:0 !important;
}

.great-wall-submit:active:not(:disabled),
.great-wall-delete:active:not(:disabled) {
background:#0c0c0c;
border-color:#050505 #202020 #333333 #202020;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}

.great-wall-submit:disabled,
.great-wall-delete:disabled {
background:#101010;
color:#555555;
cursor:default;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.018);
}

.great-wall-delete:not(:disabled) {
color:#a8847e;
}

.great-wall-delete:hover:not(:disabled),
.great-wall-delete:focus-visible:not(:disabled) {
color:#e0a199;
}

.great-wall-status {
height:12px;
margin:3px 0 0;
padding:2px 1px 0;
box-sizing:border-box;
display:flex;
align-items:flex-start;
justify-content:flex-start;
background:transparent;
border-top:1px solid #202020;
color:#626262;
font-size:8px;
font-weight:700;
line-height:1;
letter-spacing:.25px;
text-shadow:1px 1px 0 #000;
box-shadow:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

.great-wall-sidebar.is-saving .great-wall-status,
.great-wall-sidebar.is-loading .great-wall-status {
color:#8a8a8a;
}

/* -----------------------------------------
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 {
position:relative;
padding:3px !important;
box-sizing:border-box;
overflow:hidden;
background:#080808;
line-height:1.4;
}

.site-info-sidebar .policy-list {
display:flex;
flex-direction:column;
gap:0;
margin:0;
padding:0;
border:0;
}

.site-info-sidebar .policy-row {
display:block;
margin:0 0 2px;
padding:0;
border:0;
font-size:10px;
line-height:1.2;
}

.site-info-sidebar .policy-row:last-child {
margin-bottom:0;
}

.site-info-sidebar .site-info-policy-button {
position:relative;
display:grid !important;
grid-template-columns:minmax(0,1fr) 14px;
align-items:center;
gap:6px;
min-height:26px;
margin:0;
padding:0 6px;
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;
}

.site-info-sidebar .site-info-policy-button:hover {
background:#1d1d1d;
color:#ffffff !important;
text-decoration:none !important;
}

.site-info-sidebar .site-info-policy-button: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;
}

.site-info-policy-title {
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#e2e2e2 !important;
font-size:12px;
font-weight:700;
line-height:1.18;
text-decoration:none !important;
text-shadow:1px 1px 0 #000;
}

.site-info-sidebar .site-info-policy-button:hover .site-info-policy-title {
color:#ffffff !important;
}

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

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

.site-info-sidebar .social-icon a {
position:relative;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
color:#e2e2e2 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
overflow:hidden;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}

.site-info-sidebar .social-icon a:hover {
background:#1d1d1d !important;
color:#ffffff !important;
border-color:#050505 !important;
text-decoration:none !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}

.site-info-sidebar .social-icon a:active {
background:#101010 !important;
color:#c8c8c8 !important;
border-color:#050505 !important;
box-shadow:
inset 0 1px 0 #101010,
inset -1px 0 0 #101010,
inset 1px 0 0 #555555,
inset 0 -1px 0 #555555 !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;
}

/* 뉴스 박스 하단 여백은 항목 수 계산 대신 이미지 링크 슬롯이 흡수한다.
   기본 파일명은 Side-news-fill-001.png 이며, 다른 파일을 쓰려면 Common.js의 src만 교체한다. */
.news-fill-image-slot {
position:relative;
display:block;
min-height:0;
margin:2px 0 0;
box-sizing:border-box;
background:#080808;
border:1px solid #050505;
color:#c8c8c8 !important;
text-decoration:none !important;
overflow:hidden;
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-fill-image-slot:hover {
color:#ffffff !important;
}

.news-fill-image-slot:active {
background:#060606;
}

.news-fill-image-frame {
position:relative;
width:100%;
height:100%;
min-height:0;
box-sizing:border-box;
background:#060606;
overflow:hidden;
}

.news-fill-image {
display:block;
width:100%;
height:100%;
background:#e2e2e2;
-webkit-mask-image:var(--news-fill-image-url);
mask-image:var(--news-fill-image-url);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center center;
mask-position:center center;
-webkit-mask-size:cover;
mask-size:cover;
transition:background-color 0.12s ease;
}

.news-fill-image-slot:hover .news-fill-image {
background:#ffffff;
}

.news-fill-image-slot:active .news-fill-image {
background:#c8c8c8;
}

.news-fill-image-probe {
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}

.news-fill-image-slot.is-empty .news-fill-image {
display:none;
}

.news-fill-image-slot.is-empty .news-fill-image-frame::before {
content:"";
position:absolute;
inset:0;
background:
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.025) 0 1px,
transparent 1px 6px
),
#060606;
opacity:0.65;
pointer-events:none;
}

.news-fill-image-slot.is-empty:hover .news-fill-image-frame::before {
opacity:0.82;
}

.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) 14px;
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:25px;
height:25px;
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-jump,
.site-info-policy-arrow {
position:relative;
top:-2px;
display:inline-flex;
align-items:center;
justify-content:center;
justify-self:end;
width:14px;
min-width:14px;
height:100%;
padding:0;
box-sizing:border-box;
background:transparent;
border:0;
color:#8a8a8a !important;
font-size:14px;
font-weight:700;
line-height:1;
white-space:nowrap;
text-shadow:1px 1px 0 #000;
box-shadow:none;
}

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

.news-post-item:hover .news-post-jump,
.site-info-policy-button:hover .site-info-policy-arrow {
background:transparent;
color:#ffffff !important;
box-shadow:none;
}

.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:active .news-post-jump,
.site-info-policy-button:active .site-info-policy-arrow {
background:transparent;
color:#c8c8c8 !important;
box-shadow:none;
}

.news-post-item *,
.news-recent-item *,
.site-info-policy-button * {
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.clbi-main-page #clbi-bottom-nav-tabs,
body.clbi-main-page #clbi-top-nav-right,
body.clbi-main-page #clbi-bottom-nav-right,
body.clbi-main-page #clbi-sub-worldbuilding,
body.clbi-main-page #clbi-bottom-sub-worldbuilding {
display:none !important;
}

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

body.clbi-main-page #clbi-top-search-input:focus,
body.clbi-main-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;
}

/* -----------------------------------------
2-Z. 세로 임계점 이후 전체 셸 축소 모드
----------------------------------------- */

:root {
--clbi-vertical-scale-threshold-h:1080px;
--clbi-stage-design-w:1880px;
--clbi-stage-design-h:1064px;
--clbi-stage-content-h:972px;
--clbi-shell-scale:1;
}

body.clbi-shell-vertical-scale {
min-width:0 !important;
width:100vw !important;
height:100vh !important;
min-height:100vh !important;
overflow:hidden !important;
}

@supports (height:100dvh) {
body.clbi-shell-vertical-scale {
height:100dvh !important;
min-height:100dvh !important;
}
}

body.clbi-shell-vertical-scale .clbi-shell-host {
position:fixed !important;
left:50% !important;
top:var(--layout-gap) !important;
z-index:1 !important;
width:var(--layout-shell-w) !important;
max-width:var(--layout-shell-w) !important;
min-width:var(--layout-shell-w) !important;
height:var(--clbi-stage-design-h) !important;
max-height:var(--clbi-stage-design-h) !important;
min-height:var(--clbi-stage-design-h) !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
gap:0 !important;
transform:translateX(-50%) scale(var(--clbi-shell-scale)) !important;
transform-origin:top center !important;
will-change:transform;
backface-visibility:hidden;
}

body.clbi-shell-vertical-scale #clbi-top-nav-wrap,
body.clbi-shell-vertical-scale #clbi-bottom-nav-wrap,
body.clbi-shell-vertical-scale .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;
transform:none !important;
}

body.clbi-shell-vertical-scale #clbi-top-nav-wrap {
flex:0 0 auto !important;
margin:0 !important;
padding:0 !important;
}

body.clbi-shell-vertical-scale .content-wrapper {
flex:0 0 var(--clbi-stage-content-h) !important;
height:var(--clbi-stage-content-h) !important;
min-height:0 !important;
max-height:var(--clbi-stage-content-h) !important;
margin:var(--layout-gap) 0 0 !important;
padding:0 !important;
overflow:visible !important;
}

body.clbi-shell-vertical-scale #clbi-bottom-nav-wrap {
flex:0 0 auto !important;
margin:var(--layout-gap) 0 0 !important;
padding:0 !important;
}

body.clbi-shell-vertical-scale .container-fluid.liberty-content {
height:calc(100% + var(--clbi-content-extra, 0px)) !important;
max-height:calc(100% + var(--clbi-content-extra, 0px)) !important;
min-height:0 !important;
}

body.clbi-shell-vertical-scale #clbi-left-sidebar,
body.clbi-shell-vertical-scale #clbi-right-sidebar {
height:100% !important;
max-height:100% !important;
min-height:0 !important;
overflow:hidden !important;
}

body.clbi-shell-vertical-scale .clbi-left-news-box,
body.clbi-shell-vertical-scale .clbi-left-news-box.is-adaptive-constrained {
height:auto !important;
max-height:none !important;
min-height:0 !important;
}

body.clbi-shell-vertical-scale .clbi-left-news-box .news-left-recent-feed,
body.clbi-shell-vertical-scale .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed {
height:auto !important;
max-height:none !important;
min-height:0 !important;
flex:0 0 auto !important;
}

body.clbi-shell-vertical-scale .clbi-left-news-box .news-recent-viewport,
body.clbi-shell-vertical-scale .clbi-left-news-box .news-recent-stack,
body.clbi-shell-vertical-scale .clbi-left-news-box.is-adaptive-constrained .news-recent-viewport,
body.clbi-shell-vertical-scale .clbi-left-news-box.is-adaptive-constrained .news-recent-stack {
-webkit-mask-image:none !important;
mask-image:none !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
}

body.clbi-shell-vertical-scale .clbi-left-news-box .news-recent-viewport::before,
body.clbi-shell-vertical-scale .clbi-left-news-box .news-recent-viewport::after,
body.clbi-shell-vertical-scale .clbi-left-news-box .news-left-recent-feed::before,
body.clbi-shell-vertical-scale .clbi-left-news-box .news-left-recent-feed::after {
content:none !important;
display:none !important;
}

body.clbi-shell-vertical-scale .news-recent-item.is-adaptive-hidden {
display:grid !important;
}

body.clbi-shell-vertical-scale .news-bottom-finish {
display:none !important;
}

body.clbi-shell-vertical-scale .left-billboard-box.is-left-ad-title-only,
body.clbi-shell-vertical-scale .left-billboard-box.is-left-ad-extended {
height:auto !important;
max-height:none !important;
}

body.clbi-shell-vertical-scale .left-billboard-box .left-ad-bottom-finish {
display:none !important;
}



/* -----------------------------------------
9.48 좌측 사이드 하단 정렬 / 뉴스 확장형
----------------------------------------- */

/*
좌측 사이드는 우측의 SITE INFORMATION 하단 정렬과 대응되도록
전체 높이를 본문 행에 맞춘다. 언어와 Ad는 고정 높이로 두고,
남는 세로 공간은 뉴스 박스가 흡수한다. Ad 이미지는 늘리지 않는다.
*/
#clbi-left-sidebar {
height:100% !important;
max-height:100% !important;
min-height:0 !important;
align-self:stretch !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
overflow:hidden !important;
}

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

#clbi-left-sidebar > .clbi-left-news-box {
flex:1 1 auto !important;
min-height:0 !important;
max-height:none !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
}

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

#clbi-left-sidebar > .clbi-left-news-box > .clbi-news-box {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
display:grid !important;
grid-template-rows:auto auto auto auto minmax(0, 1fr) !important;
grid-template-columns:minmax(0, 1fr) !important;
overflow:hidden !important;
}

#clbi-left-sidebar > .clbi-left-news-box #clbi-left-news-changelog-title {
grid-row:1 !important;
}

#clbi-left-sidebar > .clbi-left-news-box .news-left-changelog-feed {
grid-row:2 !important;
min-height:0 !important;
overflow:hidden !important;
}

#clbi-left-sidebar > .clbi-left-news-box #clbi-left-news-recent-title {
grid-row:3 !important;
}

#clbi-left-sidebar > .clbi-left-news-box .news-left-recent-feed {
grid-row:4 !important;
min-height:0 !important;
height:auto !important;
display:flex !important;
flex:0 0 auto !important;
flex-direction:column !important;
overflow:hidden !important;
}

#clbi-left-sidebar > .clbi-left-news-box .news-fill-image-slot {
grid-row:5 !important;
min-height:0 !important;
height:auto !important;
display:block !important;
}

#clbi-left-sidebar > .clbi-left-news-box .news-recent-viewport {
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow:hidden !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}

#clbi-left-sidebar > .clbi-left-news-box .news-recent-stack {
min-height:0 !important;
height:auto !important;
max-height:none !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}

#clbi-left-sidebar > .clbi-left-news-box .news-recent-viewport::before,
#clbi-left-sidebar > .clbi-left-news-box .news-recent-viewport::after,
#clbi-left-sidebar > .clbi-left-news-box .news-left-recent-feed::before,
#clbi-left-sidebar > .clbi-left-news-box .news-left-recent-feed::after {
content:none !important;
display:none !important;
}

#clbi-left-sidebar > .clbi-left-news-box .news-bottom-finish {
display:none !important;
height:0 !important;
min-height:0 !important;
}

#clbi-left-sidebar > .clbi-left-news-box.is-adaptive-constrained {
height:auto !important;
max-height:none !important;
}

#clbi-left-sidebar > .clbi-left-news-box.is-adaptive-constrained .news-left-recent-feed,
#clbi-left-sidebar > .clbi-left-news-box.is-adaptive-constrained .news-recent-viewport,
#clbi-left-sidebar > .clbi-left-news-box.is-adaptive-constrained .news-recent-stack {
height:auto !important;
max-height:none !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}

#clbi-left-sidebar > .left-ad-box.is-left-ad-title-only .left-ad-content-shell {
display:block !important;
}

#clbi-left-sidebar > .left-ad-box.is-left-ad-extended,
#clbi-left-sidebar > .left-ad-box.is-left-ad-title-only {
height:auto !important;
max-height:none !important;
}

/* -----------------------------------------
9.99 사이드 타이틀 평면화
----------------------------------------- */

/*
SITE INFORMATION처럼 사이드 모듈 제목은 별도 우물 패널을 만들지 않고
상위 박스 표면 위에 바로 놓는다. 콘텐츠 영역과 항목 버튼만 우물/버튼 문법을 사용한다.
*/
#clbi-left-sidebar .clbi-left-lang-box > .clbi-left-title,
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title,
#clbi-left-sidebar .left-ad-title,
#clbi-right-sidebar .great-wall-sidebar > .clbi-right-title,
#clbi-right-sidebar .site-info-title {
min-height:34px !important;
height:auto !important;
margin:0 !important;
padding:0 2px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
display:flex !important;
align-items:center !important;
gap:6px !important;
line-height:1 !important;
color:#e2e2e2 !important;
text-shadow:1px 1px 0 #000 !important;
}

#clbi-left-sidebar .left-ad-title.left-ad-title-iconless {
gap:0 !important;
}

#clbi-right-sidebar .site-info-title {
justify-content:flex-start !important;
}

#clbi-right-sidebar .site-info-title-meta {
display:none !important;
}

#clbi-left-sidebar .left-ad-title-label,
#clbi-title-left-ad,
#clbi-title-left-language,
#clbi-title-left-news {
height:auto !important;
line-height:1 !important;
}



/* -----------------------------------------
9.100 사이드 타이틀 아이콘 제거
----------------------------------------- */

/* 사이드 모듈 제목은 텍스트만 남긴다. 기존 렌더가 남아 있어도 아이콘은 숨긴다. */
#clbi-left-sidebar > .clbi-left-box > .clbi-left-title .sidebar-title-svg,
#clbi-right-sidebar > .clbi-right-box > .clbi-right-title .sidebar-title-svg,
#side-toc-box > .clbi-left-title .sidebar-title-svg,
#clbi-tools-box > .clbi-left-title .clbi-icon {
display:none !important;
}

#clbi-left-sidebar .clbi-left-lang-box > .clbi-left-title,
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title,
#clbi-left-sidebar .left-ad-title,
#clbi-right-sidebar .great-wall-sidebar > .clbi-right-title,
#clbi-right-sidebar .site-info-title,
#side-toc-box > .clbi-left-title,
#clbi-tools-box > .clbi-left-title {
gap:0 !important;
}

/* -----------------------------------------
9.101 사이드 타이틀 중앙 정렬 / Ad 문구 보정
----------------------------------------- */

/* 아이콘 제거 후의 사이드 모듈 제목은 중앙 정렬로 시험한다. */
#clbi-left-sidebar .clbi-left-lang-box > .clbi-left-title,
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title,
#clbi-left-sidebar .left-ad-title,
#clbi-right-sidebar .great-wall-sidebar > .clbi-right-title,
#clbi-right-sidebar .site-info-title,
#side-toc-box > .clbi-left-title,
#clbi-tools-box > .clbi-left-title {
justify-content:center !important;
text-align:center !important;
padding-left:2px !important;
padding-right:2px !important;
}

#clbi-left-sidebar .clbi-left-lang-box > .clbi-left-title > span,
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title > span,
#clbi-left-sidebar .left-ad-title > span,
#clbi-right-sidebar .great-wall-sidebar > .clbi-right-title > span,
#clbi-right-sidebar .site-info-title > span,
#side-toc-box > .clbi-left-title > span,
#clbi-tools-box > .clbi-left-title > span {
min-width:0 !important;
max-width:100% !important;
text-align:center !important;
}

#clbi-left-sidebar .left-ad-title-label,
#clbi-title-left-ad {
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}


/* -----------------------------------------
9.102 하단 네비 검색 제거 / 프로필 컨테이너 최신화
----------------------------------------- */

/* 하단 네비는 검색 슬롯을 사용하지 않는다. 이전 렌더가 남아 있어도 숨긴다. */
#clbi-bottom-nav-search,
#clbi-bottom-search-input {
display:none !important;
}

/* 프로필 박스도 다른 사이드 모듈처럼 평면 제목 + 내부 슬롯 구조로 맞춘다. */
#clbi-right-sidebar .profile-card-box {
position:relative !important;
background:#1d1d1d !important;
}

#clbi-right-sidebar .profile-card-box > .profile-card-title {
min-height:34px !important;
height:auto !important;
margin:0 !important;
padding:0 2px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:0 !important;
line-height:1 !important;
color:#e2e2e2 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000 !important;
}

#clbi-right-sidebar .profile-card-box > .profile-card-title > span {
min-width:0 !important;
max-width:100% !important;
height:auto !important;
line-height:1 !important;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:700 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-align:center !important;
}

#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
position:relative !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
min-height:154px !important;
height:auto !important;
margin:0 !important;
padding:7px 3px 3px !important;
box-sizing:border-box !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;
}

#clbi-right-sidebar .profile-avatar-stage {
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
width:104px !important;
height:104px !important;
flex:0 0 104px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:#1d1d1d !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;
}

#clbi-right-sidebar .profile-avatar-stage::before,
#clbi-right-sidebar .profile-avatar-stage::after {
content:none !important;
display:none !important;
}

#clbi-right-sidebar #clbi-user-avatar {
position:relative !important;
z-index:1 !important;
display:block !important;
width:90px !important;
height:90px !important;
object-fit:cover !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(0,0,0,0.60) !important;
}

#clbi-right-sidebar #clbi-user-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:26px !important;
min-height:26px !important;
margin:0 !important;
padding:0 6px !important;
box-sizing:border-box !important;
background:#1d1d1d !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-right-sidebar #clbi-user-name {
max-width:100% !important;
margin:0 !important;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}

#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
color:#ffffff !important;
}

#clbi-right-sidebar .profile-action-box {
position:relative !important;
margin:2px 0 0 !important;
padding:3px !important;
box-sizing:border-box !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:visible !important;
}

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

#clbi-right-sidebar .profile-quick-btn {
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
aspect-ratio:1 / 1 !important;
min-width:0 !important;
min-height:0 !important;
padding:0 !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !important;
color:#e2e2e2 !important;
cursor:pointer !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
text-shadow:1px 1px 0 #000 !important;
overflow:hidden !important;
}

#clbi-right-sidebar .profile-quick-btn:hover {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}

#clbi-right-sidebar .profile-quick-btn:active {
background:#101010 !important;
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 !important;
}

#clbi-right-sidebar .profile-quick-icon,
#clbi-right-sidebar .profile-quick-icon .profile-svg {
width:20px !important;
height:20px !important;
color:currentColor !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn {
position:relative !important;
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 2px !important;
padding:0 7px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:1px solid #050505 !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 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
overflow:hidden !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn:last-child {
margin-bottom:0 !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn:hover,
#clbi-right-sidebar .profile-action-box .clbi-user-btn.clbi-user-btn-active {
background:#1d1d1d !important;
border-color:#050505 !important;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 #555555,
inset -1px 0 0 #555555,
inset 1px 0 0 #101010,
inset 0 -1px 0 #101010 !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn:active {
background:#101010 !important;
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 !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout {
color:#c88a80 !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout:hover {
background:#1d1d1d !important;
color:#e0a199 !important;
}

#clbi-right-sidebar .profile-action-icon {
color:#8a8a8a !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn:hover .profile-action-icon,
#clbi-right-sidebar .profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon,
#clbi-right-sidebar .profile-action-box .clbi-user-btn:hover .profile-action-arrow,
#clbi-right-sidebar .profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {
color:#ffffff !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout .profile-action-icon,
#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout .profile-action-arrow {
color:#8b5f59 !important;
}

#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout:hover .profile-action-icon,
#clbi-right-sidebar .profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {
color:#e0a199 !important;
}

/* -----------------------------------------
149 보정: 프로필 박스 과장된 내부 플레이트 정리
----------------------------------------- */

/* 프로필 상단은 사이드 모듈 안의 단순 화면으로 둔다. */
#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
min-height:154px !important;
gap:5px !important;
padding:7px 3px 4px !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;
}

/* 아바타 주변에 한 번 더 생기던 플레이트는 제거한다. */
#clbi-right-sidebar .profile-avatar-stage {
width:104px !important;
height:104px !important;
flex:0 0 104px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

#clbi-right-sidebar #clbi-user-avatar {
width:96px !important;
height:96px !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:
0 0 0 1px #2b2b2b,
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.64) !important;
}

/* 이름은 별도 판/플레이트가 아니라 화면 안의 라벨처럼 둔다. */
#clbi-right-sidebar #clbi-user-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
height:18px !important;
min-height:18px !important;
padding:0 4px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

#clbi-right-sidebar #clbi-user-name {
font-size:12px !important;
line-height:1 !important;
color:#e2e2e2 !important;
}

/* 레벨 패널은 우물 배경으로 유지하되, 너무 붙어 보이지 않도록 여백을 정리한다. */
.profile-progress-block {
margin:8px 8px 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;
}

.progress-level-row {
margin-bottom:6px !important;
}

.progress-xp-bar {
height:10px !important;
margin:0 0 6px !important;
}

.progress-sub-row {
margin-bottom:0 !important;
}

/* DISCOVERED 행도 별도 플레이트가 아니라 약한 메타 라인으로 둔다. */
.progress-discovery-row {
height:auto !important;
min-height:0 !important;
margin:5px 0 0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
color:#626262 !important;
justify-content:center !important;
}

/* 레벨 패널과 버튼 영역 사이의 장식 구분선 제거. */
#profile-progress-divider {
display:none !important;
}

/* 버튼 기본 radius/appearance를 완전히 제거한다. */
#clbi-right-sidebar .profile-quick-btn,
#clbi-right-sidebar .profile-action-box .clbi-user-btn,
#clbi-right-sidebar .profile-action-box {
border-radius:0 !important;
}

#clbi-right-sidebar .profile-quick-btn {
appearance:none !important;
-webkit-appearance:none !important;
}

/* 구분선을 뺐으므로 버튼 영역 자체가 레벨 패널에 과하게 붙지 않도록 간격만 둔다. */
#clbi-right-sidebar .profile-action-box {
margin:8px 0 0 !important;
}


/* -----------------------------------------
151 보정: 프로필 제목 제거 / 상단 플레이트 제거 / 레벨 폭 복원
----------------------------------------- */

/* 프로필 박스에는 별도 제목줄을 두지 않는다. 이전 렌더가 남아도 보이지 않게 막는다. */
#clbi-right-sidebar .profile-card-box > .profile-card-title {
display:none !important;
}

/* 프로필 사진과 이름은 내부 우물/플레이트 없이, 사이드 박스의 회색 표면 위에 바로 놓는다. */
#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
position:relative !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:5px !important;
min-height:142px !important;
height:auto !important;
margin:0 !important;
padding:10px 3px 6px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

#clbi-right-sidebar .profile-avatar-stage {
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
width:104px !important;
height:104px !important;
flex:0 0 104px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

#clbi-right-sidebar #clbi-user-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:18px !important;
min-height:18px !important;
margin:0 !important;
padding:0 4px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

/* 레벨 섹션은 버튼 영역처럼 부모 내부 폭을 그대로 사용한다. */
#clbi-right-sidebar .profile-progress-block,
#clbi-right-sidebar #progress-panel.profile-progress-block {
width:auto !important;
max-width:none !important;
margin:8px 0 0 !important;
box-sizing:border-box !important;
}

/* -----------------------------------------
152 보정: 프로필 상단 1:1 배경 복원
----------------------------------------- */

/* 프로필 박스에는 제목 없이, 상단 프로필 영역 자체가 1:1 회색 배경이 된다. */
#clbi-right-sidebar .profile-card-box {
position:relative !important;
background:#1d1d1d !important;
padding:0 8px 8px !important;
}

#clbi-right-sidebar .profile-card-box > .profile-card-title {
display:none !important;
}

/* 프로필 배경은 우물이 아니라 박스 표면과 같은 회색 면으로 둔다. */
#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
position:relative !important;
display:block !important;
width:100% !important;
aspect-ratio:1 / 1 !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-bottom:1px solid #202020 !important;
box-shadow:none !important;
overflow:hidden !important;
}

/* 아바타 이미지는 1:1 배경의 정중앙에 둔다. 주변 플레이트는 만들지 않는다. */
#clbi-right-sidebar .profile-avatar-stage {
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
width:104px !important;
height:104px !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

#clbi-right-sidebar .profile-avatar-stage::before,
#clbi-right-sidebar .profile-avatar-stage::after {
content:none !important;
display:none !important;
}

#clbi-right-sidebar #clbi-user-avatar {
position:relative !important;
z-index:1 !important;
display:block !important;
width:96px !important;
height:96px !important;
object-fit:cover !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}

/* 이름은 이미지 아래, 같은 회색 배경 위에 텍스트만 얹는다. */
#clbi-right-sidebar #clbi-user-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
position:absolute !important;
left:8px !important;
right:8px !important;
top:calc(50% + 52px) !important;
bottom:0 !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

#clbi-right-sidebar #clbi-user-name {
max-width:100% !important;
margin:0 !important;
color:#e2e2e2 !important;
font-size:12px !important;
font-weight:700 !important;
line-height:1.2 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}

#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
color:#ffffff !important;
}

/* 레벨 섹션은 아래 버튼 영역과 같은 폭 규칙을 유지한다. */
#clbi-right-sidebar .profile-progress-block,
#clbi-right-sidebar #progress-panel.profile-progress-block {
width:auto !important;
max-width:none !important;
margin:8px 0 0 !important;
box-sizing:border-box !important;
}

/* -----------------------------------------
153 보정: 프로필 상단 제목 잔여 공간 제거 / 원래 1:1 배경 배치 복원
----------------------------------------- */

/* 프로필 박스에는 어떤 제목줄/잔여 상단 슬롯도 남기지 않는다. */
#clbi-right-sidebar .profile-card-box > .profile-card-title,
#clbi-right-sidebar .profile-card-box > .clbi-right-title,
#clbi-right-sidebar .profile-card-box .profile-card-titlebar {
display:none !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

/* 외곽 컨테이너는 다른 사이드 박스와 같은 회색 표면만 유지한다. */
#clbi-right-sidebar .profile-card-box {
position:relative !important;
background:#1d1d1d !important;
padding:0 8px 8px !important;
overflow:hidden !important;
}

/* 상단 프로필 영역은 1:1 회색 배경을 유지하되, 이미지+이름 묶음을 중앙에 둔다. */
#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
position:relative !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
width:100% !important;
aspect-ratio:1 / 1 !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-bottom:1px solid #202020 !important;
box-shadow:none !important;
overflow:hidden !important;
}

/* 아바타는 주변 플레이트 없이 회색 배경 위에 직접 놓는다. */
#clbi-right-sidebar .profile-avatar-stage {
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
width:104px !important;
height:104px !important;
flex:0 0 104px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

#clbi-right-sidebar .profile-avatar-stage::before,
#clbi-right-sidebar .profile-avatar-stage::after {
content:none !important;
display:none !important;
}

#clbi-right-sidebar #clbi-user-avatar {
position:relative !important;
z-index:1 !important;
display:block !important;
width:96px !important;
height:96px !important;
object-fit:cover !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}

/* 이름도 별도 판 없이, 이미지 아래에 텍스트만 둔다. */
#clbi-right-sidebar #clbi-user-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:18px !important;
min-height:18px !important;
margin:0 !important;
padding:0 4px !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

#clbi-right-sidebar #clbi-user-name {
max-width:100% !important;
margin:0 !important;
color:#e2e2e2 !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1.15 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}

#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
color:#ffffff !important;
}

/* 레벨 섹션은 아래 버튼 영역과 같은 폭을 계속 사용한다. */
#clbi-right-sidebar .profile-progress-block,
#clbi-right-sidebar #progress-panel.profile-progress-block {
width:auto !important;
max-width:none !important;
margin:8px 0 0 !important;
box-sizing:border-box !important;
}

/* -----------------------------------------
154 보정: 프로필 상단 비율 원상 복구
----------------------------------------- */

/* 프로필 박스는 제목/상단 잔여 슬롯 없이 바로 프로필 영역으로 시작한다. */
#clbi-right-sidebar .profile-card-box {
position:relative !important;
background:#1d1d1d !important;
padding:0 8px 8px !important;
overflow:hidden !important;
}

#clbi-right-sidebar .profile-card-box::before,
#clbi-right-sidebar .profile-card-box::after {
content:none !important;
display:none !important;
}

#clbi-right-sidebar .profile-card-box > .profile-card-title,
#clbi-right-sidebar .profile-card-box > .clbi-right-title,
#clbi-right-sidebar .profile-card-box .profile-card-titlebar {
display:none !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

/* 상단 프로필 영역은 원래처럼 과하게 커지지 않는 고정 비율 슬롯으로 되돌린다. */
#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
position:relative !important;
display:block !important;
width:100% !important;
height:180px !important;
min-height:180px !important;
aspect-ratio:auto !important;
margin:0 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-top:0 !important;
border-bottom:1px solid #202020 !important;
box-shadow:none !important;
overflow:hidden !important;
}

/* 이미지 주변에는 별도 플레이트를 만들지 않고, 기존 위치 체계만 복원한다. */
#clbi-right-sidebar .profile-avatar-stage {
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
width:104px !important;
height:104px !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

#clbi-right-sidebar .profile-avatar-stage::before,
#clbi-right-sidebar .profile-avatar-stage::after {
content:none !important;
display:none !important;
}

#clbi-right-sidebar #clbi-user-avatar {
position:relative !important;
z-index:1 !important;
display:block !important;
width:96px !important;
height:96px !important;
object-fit:cover !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}

/* 이름은 원래처럼 이미지 아래쪽에 크게 놓고, 판/우물 없이 텍스트만 둔다. */
#clbi-right-sidebar #clbi-user-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
position:absolute !important;
left:8px !important;
right:8px !important;
top:calc(50% + 52px) !important;
bottom:0 !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

#clbi-right-sidebar #clbi-user-name {
max-width:100% !important;
margin:0 !important;
color:#e2e2e2 !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1.15 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}

#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
color:#ffffff !important;
}

/* 레벨 섹션은 아래 버튼 영역과 같은 폭을 유지한다. */
#clbi-right-sidebar .profile-progress-block,
#clbi-right-sidebar #progress-panel.profile-progress-block {
width:auto !important;
max-width:none !important;
margin:8px 0 0 !important;
box-sizing:border-box !important;
}

/* -----------------------------------------
155 보정: 프로필 상단은 리메이크 이전 치수/비율만 복원
----------------------------------------- */

/* 프로필 컨테이너의 최신 색상/테마는 유지하되, 제목·잔여 슬롯은 만들지 않는다. */
#clbi-right-sidebar .profile-card-box {
position:relative !important;
background:#1d1d1d !important;
padding:0 8px 8px !important;
overflow:hidden !important;
}

#clbi-right-sidebar .profile-card-box::before,
#clbi-right-sidebar .profile-card-box::after {
content:none !important;
display:none !important;
}

#clbi-right-sidebar .profile-card-box > .profile-card-title,
#clbi-right-sidebar .profile-card-box > .clbi-right-title,
#clbi-right-sidebar .profile-card-box .profile-card-titlebar {
display:none !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

/* 상단 프로필 영역의 치수와 위치 체계는 리메이크 이전값을 그대로 사용한다. */
#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
position:relative !important;
display:block !important;
width:100% !important;
height:180px !important;
min-height:180px !important;
aspect-ratio:auto !important;
margin:0 !important;
padding:0 8px !important;
box-sizing:border-box !important;
background:#1d1d1d !important;
border:0 !important;
border-bottom:1px solid #202020 !important;
box-shadow:none !important;
overflow:hidden !important;
}

/* 이미지 배치 비율은 이전처럼 중앙 104px 스테이지 기준. 표면/플레이트는 최신 flat 규칙 유지. */
#clbi-right-sidebar .profile-avatar-stage {
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
width:104px !important;
height:104px !important;
flex:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}

#clbi-right-sidebar .profile-avatar-stage::before,
#clbi-right-sidebar .profile-avatar-stage::after {
content:none !important;
display:none !important;
}

/* 실제 프로필 이미지 크기는 리메이크 이전 90px 기준으로 복원한다. */
#clbi-right-sidebar #clbi-user-avatar {
position:relative !important;
z-index:1 !important;
display:block !important;
width:90px !important;
height:90px !important;
object-fit:cover !important;
object-position:center !important;
background:#070707 !important;
border:1px solid #050505 !important;
box-shadow:0 0 0 1px #2b2b2b !important;
}

/* 이름 줄도 리메이크 이전 위치값을 사용하되, 별도 우물/플레이트는 만들지 않는다. */
#clbi-right-sidebar #clbi-user-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row,
#clbi-right-sidebar #clbi-user-name-row.profile-name-row-guest {
position:absolute !important;
left:8px !important;
right:8px !important;
top:calc(50% + 52px) !important;
bottom:0 !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:hidden !important;
}

#clbi-right-sidebar #clbi-user-name {
max-width:100% !important;
margin:0 !important;
color:#e2e2e2 !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1.2 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-decoration:none !important;
text-shadow:1px 1px 0 #000 !important;
}

#clbi-right-sidebar #clbi-user-name-row:hover #clbi-user-name {
color:#ffffff !important;
}

/* 레벨 섹션은 최신화 요청대로 아래 버튼 영역과 같은 폭을 유지한다. */
#clbi-right-sidebar .profile-progress-block,
#clbi-right-sidebar #progress-panel.profile-progress-block {
width:auto !important;
max-width:none !important;
margin:8px 0 0 !important;
box-sizing:border-box !important;
}

/* -----------------------------------------
156 보정: 프로필 상단 하이라이트 복원 / 이름-레벨 구분선 제거
----------------------------------------- */

/*
프로필 상단 영역이 컨테이너 맨 위를 덮어 1px north-light 하이라이트가
사라져 보이던 문제를 막는다. 컨테이너 상단 1px은 #555555로 직접 확보하고,
실제 프로필 영역은 그 아래에서 시작하게 한다.
*/
#clbi-right-sidebar .profile-card-box {
background:
linear-gradient(
to bottom,
#555555 0,
#555555 1px,
#1d1d1d 1px,
#1d1d1d 100%
) !important;
padding:1px 8px 8px !important;
}

/* 이름과 레벨 섹션 사이에 남아 있던 #202020 구분선은 제거한다. */
#clbi-right-sidebar #clbi-user-avatar-wrap,
#clbi-right-sidebar #clbi-user-avatar-wrap.profile-identity-panel {
border-bottom:0 !important;
}