미디어위키:Layout.css

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

/*
설계 목적
-----------------------------------------
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.

담당 범위:
- 기본 Liberty 네비 숨김
- 본문 컨테이너 폭과 배치
- 본문 컨테이너 외곽 테마
- 상단 네비바
- 좌우 사이드바
- 유저 박스와 사이드 링크 버튼
- 하단 푸터

현재 디자인 공식
-----------------------------------------
1. 전체 컨테이너는 각진 금속 패널로 처리한다.
2. radius는 사용하지 않는다.
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.
7. 공사선 모티프는 이 파일에서 쓰지 않는다.
   공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼
   "우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.

주의:
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.
- 언어 드로어는 MediaWiki:LangDrawer.css가 담당한다.
*/

/* -----------------------------------------
0. 공통 색상 메모
----------------------------------------- */

/*
주요 표면:
#080808 : 깊은 내부 우물 / 화면 내부
#101010 : 기본 프레임
#141414 : 약간 밝은 패널 표면
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면
#1d1d1d : 타이틀바 / 활성 표면
#252525 : 호버 표면

주요 테두리:
#555555 : 상단광
#2b2b2b : 좌우 중간 테두리
#050505 : 하단암 / 깊은 구분선
#202020 : 내부 약한 구분선
*/

/* -----------------------------------------
1. Liberty 기본 요소 정리
----------------------------------------- */

#liberty-bottombtn {
display:none !important;
}

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

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

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

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

.container-fluid.liberty-content {
padding-bottom:0 !important;
margin:0 16px !important;
flex:none !important;
width:1500px !important;
max-width:1500px !important;
min-width:1500px !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
background:transparent !important;
}

.content-wrapper {
max-width:1720px !important;
margin:0 auto !important;
padding:16px !important;
padding-top:0 !important;
display:flex !important;
align-items:flex-start !important;
gap:0 !important;
justify-content:center !important;
}

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

.liberty-content-main,
.Liberty .content-wrapper .liberty-content .liberty-content-main,
.liberty-content.content-tools-hidden .liberty-content-main {
background:#171717 !important;
border:1px solid !important;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b !important;
border-radius:0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.72),
inset 1px 0 0 rgba(255,255,255,0.012),
inset -1px 0 0 rgba(0,0,0,0.38) !important;
overflow:hidden !important;
}

.liberty-content-main .mw-parser-output {
background:transparent !important;
}

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

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

.liberty-content-header {
background:transparent !important;
box-shadow:none !important;
border:none !important;
display:flex !important;
align-items:flex-end !important;
justify-content:space-between !important;
padding:0 !important;
height:auto !important;
min-height:0 !important;
border-radius:0 !important;
}

.liberty-content-header .content-tools {
order:2 !important;
flex-shrink:0 !important;
padding-top:0 !important;
padding-right:0 !important;
}

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

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

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

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

body::after {
content:'';
position:fixed;
inset:0;
background:rgba(0,0,0,0);
transition:background 0.2s ease, opacity 0.2s ease;
opacity:0;
pointer-events:none;
z-index:99999;
}

body.page-loading::after {
background:rgba(0,0,0,0.5);
opacity:1;
}

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

#clbi-left-sidebar,
#clbi-right-sidebar {
position:relative;
width:230px;
z-index:1000;
display:flex;
flex-direction:column;
gap:8px;
padding:0;
flex-shrink:0;
align-self:flex-start;
}

.clbi-left-box,
.clbi-right-box {
background:#171717;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
border-radius:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 6px 18px rgba(0,0,0,0.34);
}

.clbi-left-title,
.clbi-right-title {
min-height:28px;
padding:0 10px;
font-weight:700;
font-size:12px;
color:#e2e2e2;
border-bottom:1px solid #050505;
background:#101010;
display:flex;
align-items:center;
gap:6px;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(0,0,0,0.65);
}

.clbi-left-content,
.clbi-right-content {
padding:8px;
color:#c8c8c8;
font-size:12px;
line-height:1.65;
background:#080808;
border-top:1px solid rgba(255,255,255,0.018);
}

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

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

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

#clbi-user-avatar-wrap {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin:2px 0 8px;
padding:8px;
background:#101010;
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);
}

#clbi-user-avatar {
display:block;
width:72px;
height:72px;
object-fit:cover;
background:#070707;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
0 0 0 1px rgba(0,0,0,0.50);
}

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

/* -----------------------------------------
8. 검색 박스
----------------------------------------- */

#clbi-search-form {
display:grid;
grid-template-columns:minmax(0,1fr) 28px;
gap:4px;
}

#clbi-search-input {
width:100%;
height:26px;
background:#070707;
border:1px solid #202020;
color:#e2e2e2;
padding:0 8px;
border-radius:0;
font-size:12px;
box-sizing:border-box;
outline:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55);
}

#clbi-search-input:focus {
border-color:#555555;
background:#0c0c0c;
}

#clbi-search-btn {
width:28px;
height:26px;
background:#141414;
color:#c8c8c8;
border:1px solid #202020;
padding:0;
border-radius:0;
cursor:pointer;
font-size:15px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

#clbi-search-btn:hover {
background:#202020;
border-color:#333333;
color:#ffffff;
}

/* -----------------------------------------
9. 유저 버튼
----------------------------------------- */

.clbi-user-btn-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
}

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

/* -----------------------------------------
10. 왼쪽 뉴스 박스
----------------------------------------- */

.clbi-left-news-box {
min-height:624px;
}

.clbi-news-box {
padding:8px !important;
min-height:574px;
box-sizing:border-box;
}

.clbi-left-news-section {
margin:0 0 8px;
padding:0;
}

.clbi-left-news-section:last-child {
margin-bottom:0;
}

.clbi-left-news-main {
display:flex !important;
align-items:center;
justify-content:space-between;
min-height:26px;
padding:0 7px;
background:#101010;
border:1px solid #202020;
color:#c8c8c8 !important;
font-size:11px;
font-weight:700;
line-height:1;
text-decoration:none !important;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.clbi-left-news-main::after {
content:"›";
color:#8a8a8a;
font-size:14px;
line-height:1;
}

.clbi-left-news-main:hover {
background:#1d1d1d;
border-color:#333333;
color:#ffffff !important;
}

.clbi-left-news-main:hover::after {
color:#ffffff;
}

#clbi-left-news-recent-title,
.clbi-news-feed-title {
margin:8px 0 7px 0;
padding:0 2px;
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1.2;
letter-spacing:0.6px;
}

#clbi-left-news-recent-list,
.clbi-left-news-feed {
min-height:440px;
max-height:468px;
overflow:hidden;
padding:2px 0 0;
color:#9a9a9a;
font-size:11px;
line-height:1.55;
}

.clbi-recent-item {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:6px;
min-height:22px;
padding:3px 2px;
border-bottom:1px solid #202020;
}

.clbi-recent-item:first-child {
border-top:1px solid #202020;
}

.clbi-recent-item:hover {
background:#101010;
}

.clbi-recent-title-wrap {
min-width:0;
overflow:hidden;
white-space:nowrap;
}

.clbi-recent-title {
display:inline-block;
max-width:100%;
color:#c8c8c8 !important;
font-size:11px;
font-weight:700;
line-height:1.2;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

.clbi-recent-item:hover .clbi-recent-title {
color:#ffffff !important;
}

.clbi-recent-time {
color:#8a8a8a;
font-size:9px;
line-height:1;
white-space:nowrap;
}

/* -----------------------------------------
11. 오른쪽 링크 박스 / 공통 링크 그리드
----------------------------------------- */

.clbi-link-box {
padding:8px !important;
}

.clbi-link-box ul {
list-style:none !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
gap:4px !important;
}

.clbi-link-box ul li {
flex:1 !important;
margin:0 !important;
padding:0 !important;
}

.clbi-link-box ul li a,
.clbi-link-btn {
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:26px !important;
padding:0 6px !important;
border-radius:0 !important;
font-size:11px !important;
font-weight:700 !important;
background:#141414 !important;
color:#c8c8c8 !important;
border:1px solid #202020 !important;
text-align:center !important;
text-decoration:none !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
inset 0 -1px 0 rgba(0,0,0,0.60) !important;
text-shadow:1px 1px 0 #000 !important;
box-sizing:border-box !important;
}

.clbi-link-box ul li a:hover,
.clbi-link-btn:hover {
background:#202020 !important;
border-color:#333333 !important;
color:#ffffff !important;
}

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

/* -----------------------------------------
13. 반응형 사이드바
----------------------------------------- */

@media screen and (max-width:1720px) {
#clbi-left-sidebar {
display:none;
}
}

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

footer {
border:1px solid !important;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b !important;
border-radius:0 !important;
background:#101010 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.65) !important;
}

.liberty-footer {
background-color:#101010 !important;
border-top:1px solid #050505 !important;
border-bottom:none !important;
border-right:none !important;
border-left:none !important;
border-radius:0 !important;
}

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

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

#clbi-top-nav-wrap {
width:2024px;
margin:0 auto;
padding:20px 16px 0;
box-sizing:border-box;
}

#clbi-top-nav {
position:relative;
width:100%;
background:#171717;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
border-radius:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 6px 18px rgba(0,0,0,0.34);
margin-bottom:10px;
}

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

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

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

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

#clbi-top-nav-tabs {
display:flex;
align-items:stretch;
flex:1;
flex-shrink:0;
}

.clbi-top-nav-item {
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:120px;
min-height:55px;
flex-shrink:0;
padding:0;
background:transparent;
border-left:1px solid transparent;
border-right:1px solid #202020;
cursor:pointer;
transition:
background 0.12s,
border-color 0.12s,
color 0.12s,
box-shadow 0.12s;
user-select:none;
white-space:nowrap;
text-decoration:none !important;
color:#e2e2e2 !important;
overflow:hidden;
box-sizing:border-box;
text-shadow:1px 1px 0 #000;
}

.clbi-top-nav-item:hover {
min-height:55px;
background:#1d1d1d;
border-left-color:#333333;
border-right-color:#333333;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.045),
inset 0 -1px 0 rgba(0,0,0,0.65);
}

.clbi-top-nav-item.clbi-tnav-active {
background:#242424;
border-left-color:#444444;
border-right-color:#444444;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.050),
inset 0 -1px 0 rgba(0,0,0,0.70);
}

.clbi-tnav-icon {
display:block;
width:22px;
height:22px;
object-fit:contain;
flex:0 0 22px;
image-rendering:pixelated;
opacity:0.88;
align-self:center;
filter:grayscale(0.18) contrast(1.05);
}

.clbi-top-nav-item:hover .clbi-tnav-icon,
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {
opacity:1;
filter:grayscale(0) contrast(1.08);
}

/* -----------------------------------------
17. 언어 버튼
----------------------------------------- */

.clbi-tnav-lang {
flex-direction:column;
justify-content:center;
align-items:center;
width:54px;
min-height:55px;
gap:3px;
padding:10px 0;
border-left:1px solid transparent;
}

.clbi-tnav-lang-code {
font-size:11px;
font-weight:700;
color:#e2e2e2;
letter-spacing:0;
}

.clbi-tnav-lang .clbi-tnav-arrow {
font-size:9px;
color:#8a8a8a;
width:8px;
text-align:center;
flex-shrink:0;
}

.clbi-tnav-lang:hover {
border-left-color:transparent !important;
}

.clbi-tnav-lang.clbi-tnav-active {
border-left-color:transparent !important;
}

.clbi-tnav-lang-bottom {
display:flex;
align-items:center;
justify-content:center;
gap:3px;
line-height:1;
width:100%;
}

.clbi-tnav-label {
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
height:22px;
line-height:22px;
font-size:13px;
font-weight:700;
}

.clbi-tnav-arrow {
position:relative;
z-index:1;
font-size:12px;
color:#8a8a8a;
transition:color 0.12s;
}

.clbi-top-nav-item:hover .clbi-tnav-arrow,
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {
color:#ffffff;
}

/* -----------------------------------------
18. 상단 검색
----------------------------------------- */

#clbi-top-nav-search {
position:absolute;
left:50%;
top:0;
bottom:0;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}

#clbi-top-search-input {
width:240px;
height:26px;
background:#070707;
border:1px solid #202020;
color:#e2e2e2;
padding:0 10px;
border-radius:0;
font-size:11px;
box-sizing:border-box;
outline:none;
pointer-events:all;
transition:border-color 0.12s, width 0.2s, background 0.12s;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.55);
}

#clbi-top-search-input:focus {
border-color:#555555;
background:#0c0c0c;
width:320px;
}

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

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

#clbi-sub-worldbuilding {
box-sizing:border-box;
width:100%;
height:0;
overflow:hidden;
border-top:0 solid #050505;
background:#080808;
transition:
height 180ms ease,
border-top-width 0ms linear 180ms;
}

#clbi-sub-worldbuilding.worldbuilding-open {
height:34px;
border-top-width:1px;
transition:
height 180ms ease,
border-top-width 0ms linear 0ms;
}

#clbi-sub-worldbuilding-inner {
height:34px;
overflow:hidden;
}

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

.clbi-tnav-sub-item {
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:34px;
padding:0 15px 1px 15px;
background:transparent;
color:#c8c8c8 !important;
font-size:11px;
font-weight:700;
line-height:1;
white-space:nowrap;
text-decoration:none !important;
box-sizing:border-box;
transition:
background 0.12s,
color 0.12s,
box-shadow 0.12s;
text-shadow:1px 1px 0 #000;
}

.clbi-tnav-sub-item::after {
content:"";
position:absolute;
top:7px;
right:0;
bottom:7px;
width:1px;
background:#202020;
pointer-events:none;
}

.clbi-tnav-sub-item:last-child::after {
display:none;
}

.clbi-tnav-sub-item:hover {
background:#151515;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

/* 상단 네비: hover/active 인접 경계선 중복 방지 */
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {
border-left-color:transparent;
}

.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {
border-left-color:transparent;
}