미디어위키:Layout.css

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

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

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

현재 디자인 기준:
- 대문 MainPage.css에서 잡은 어두운 금속 패널 문법을 따른다.
- 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.
- 공사선 모티프는 이 파일에서 쓰지 않는다.
  공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼
  "우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.
- 본문 컨테이너는 #171717 기반의 각진 기록 패널로 처리한다.
- 본문 컨테이너의 radius는 사용하지 않는다.
  Common.js가 inline으로 border-radius:5px을 넣는 경우가 있어도
  CSS의 !important로 덮는다.

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

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

/*
North-light rule:
상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는다.

주요 표면:
#101010 : 기본 프레임
#141414 : 약간 밝은 패널 표면
#171717 : 본문 컨테이너 표면
#1d1d1d : 타이틀바
#252525 : 호버 표면
#080808 : 내부 우물/본문 내부 장치 배경

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

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

/* 상단/하단 텔레포트 버튼 숨기기 */
#liberty-bottombtn {
display:none !important;
}

/* 토론 탭 숨기기 */
a[accesskey="t"] {
display:none !important;
}

/* Liberty 기본 네비게이션 숨김 */
.Liberty .nav-wrapper {
display:none !important;
}

/* 기본 Liberty 사이드바 숨김 */
.liberty-sidebar {
display:none !important;
}

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

/*
좌우 커스텀 사이드바 230px + 중앙 본문 1500px 기준.
이 폭 배치는 기존 작업에서 맞춰놓은 구조를 유지한다.

주의:
여기서 margin-right 같은 임의 보정값을 넣으면
좌우 사이드바와 본문 컨테이너가 다시 틀어진다.
*/

.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. 본문 컨테이너
----------------------------------------- */

/*
본문 컨테이너 공식
-----------------------------------------
- 배경은 #171717.
- 모서리 radius는 사용하지 않는다.
- 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는다.
- 외곽 프레임과 내부 광원을 분리한다.
- 이전 보라색 2px 프레임과 둥근 모서리는 제거한다.

Common.js의 applyMainPageStyle()가 .liberty-content-main에
inline으로 border-radius:5px을 넣는 경우가 있으므로,
여기서는 border-radius:0 !important로 고정한다.
*/

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

/*
mw-parser-output는 본문 내용 자체가 들어가는 영역이다.
본문 컨테이너 표면을 유지하기 위해 배경을 강제로 덮지 않는다.
대문 내부 장치, 인포박스, 표, 패널 등은 각 컴포넌트가 별도 배경을 가진다.
*/

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

/*
liberty-content 자체는 프레임이 아니다.
실제 프레임은 .liberty-content-main이 담당한다.
*/

.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:#101010;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
border-radius:5px;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
0 6px 18px rgba(0,0,0,0.38);
}

.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:#1d1d1d;
display:flex;
align-items:center;
gap:6px;
line-height:1;
text-shadow:1px 1px 0 #000;
}

.clbi-left-content,
.clbi-right-content {
padding:8px;
color:#c8c8c8;
font-size:12px;
line-height:1.65;
background:#080808;
}

.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-search-input {
width:100%;
height:26px;
background:#070707;
border:1px solid #202020;
color:#e2e2e2;
padding:0 8px;
border-radius:4px;
font-size:12px;
box-sizing:border-box;
margin-bottom:6px;
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:100%;
height:24px;
background:#151515;
color:#c8c8c8;
border:1px solid #202020;
padding:0;
border-radius:4px;
cursor:pointer;
font-size:12px;
font-weight:700;
text-shadow:1px 1px 0 #000;
}

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

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

.clbi-user-btn {
display:block !important;
height:24px !important;
padding:0 8px !important;
margin-bottom:4px !important;
border-radius:4px !important;
font-size:11px !important;
font-weight:700 !important;
line-height:22px !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;
}

.clbi-user-btn:last-child {
margin-bottom:0 !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. 왼쪽 뉴스 박스
----------------------------------------- */

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

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

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

.clbi-left-changelog-feed {
min-height:28px;
}

.clbi-left-changelog-feed .clbi-recent-item {
margin-bottom:0;
}

.clbi-news-divider {
height:1px;
margin:12px 0 9px;
background:
linear-gradient(
to right,
transparent 0%,
#202020 18%,
#555555 50%,
#202020 82%,
transparent 100%
);
box-shadow:none;
}

.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-left-news-feed .clbi-recent-item {
margin-bottom:8px;
}

.clbi-left-news-feed .clbi-recent-title,
.clbi-left-changelog-feed .clbi-recent-title {
font-size:11px;
}

.clbi-left-news-feed .clbi-recent-time,
.clbi-left-changelog-feed .clbi-recent-time {
font-size:9px;
}

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

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

.clbi-link-box ul {
list-style:none !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
gap:6px !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:4px !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;
}

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

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

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

/*
footer는 본문 컨테이너 아래에 붙는 사이트 정보 영역이다.
본문 컨테이너와 같은 각진 금속 프레임 문법을 적용한다.
이전처럼 아래쪽만 둥글게 마감하지 않는다.
*/

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

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

#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:#101010;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
border-radius:5px;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
0 6px 18px rgba(0,0,0,0.38);
margin-bottom:10px;
}

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

/* 로고 슬롯: 현재 JS 생성 HTML에는 없을 수 있지만 레거시 호환으로 유지 */
#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;
}

/* 탭 영역 */
#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;
}

.clbi-top-nav-item:hover .clbi-tnav-icon,
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {
opacity:1;
}

/* 언어 버튼 */
.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;
}

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

#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:4px;
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;
}

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

#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:has(+ .clbi-top-nav-item:hover) {
border-right-color:transparent;
}