미디어위키:Test.css

/* =========================================
COASTLINE: BLACK ICE
MediaWiki:Test.css
Sandbox-only 2000s Industrial Archive Test
Top-light / horizontal nav fixed
========================================= */

.clbi-y2k-sandbox {
--y2k-bg:#070707;
--y2k-panel:#101010;
--y2k-panel-2:#141414;
--y2k-panel-3:#181818;
--y2k-title:#1d1d1d;
--y2k-title-hover:#252525;
--y2k-well:#080808;
--y2k-row:#131313;
--y2k-line:#2b2b2b;
--y2k-line-soft:#202020;
--y2k-line-top:#525252;
--y2k-line-side:#2b2b2b;
--y2k-line-bottom:#050505;
--y2k-text:#e2e2e2;
--y2k-text-soft:#c8c8c8;
--y2k-text-dim:#8a8a8a;
--y2k-text-faint:#5f5f5f;

width:100%;
margin:0 auto;
padding:8px;
color:var(--y2k-text);
background:var(--y2k-bg);
font-size:11px;
line-height:1.5;
box-sizing:border-box;
}

.clbi-y2k-sandbox *,
.clbi-y2k-sandbox *::before,
.clbi-y2k-sandbox *::after {
box-sizing:border-box;
}

.clbi-y2k-sandbox a {
color:var(--y2k-text) !important;
text-decoration:none !important;
}

.clbi-y2k-sandbox a:hover {
color:#ffffff !important;
text-decoration:underline !important;
}

/* 공통 프레임 */

.clbi-y2k-sandbox .clbi-y2k-logo,
.clbi-y2k-sandbox .clbi-y2k-nav,
.clbi-y2k-sandbox .clbi-y2k-hero,
.clbi-y2k-sandbox .clbi-y2k-box {
border-width:1px;
border-style:solid;
border-color:var(--y2k-line-top) var(--y2k-line-side) var(--y2k-line-bottom) var(--y2k-line-side);
background:var(--y2k-panel);
border-radius:0;
box-shadow:none;
outline:none;
overflow:hidden;
}

.clbi-y2k-sandbox .clbi-y2k-hero-top,
.clbi-y2k-sandbox .clbi-y2k-plate-title,
.clbi-y2k-sandbox .clbi-y2k-box-title {
background:var(--y2k-title);
border-bottom:1px solid var(--y2k-line-bottom);
color:#f0f0f0;
text-shadow:1px 1px 0 #000000;
}

/* 로고 */

.clbi-y2k-sandbox .clbi-y2k-logo {
width:100%;
margin:0 0 8px;
padding:10px 0 8px;
text-align:center;
line-height:0;
}

.clbi-y2k-sandbox .clbi-y2k-logo .mw-file-element,
.clbi-y2k-sandbox .clbi-y2k-logo img {
width:720px;
max-width:88%;
height:auto;
filter:grayscale(1) contrast(1.06) brightness(1.02) drop-shadow(2px 2px 0 #000000);
}

.clbi-y2k-sandbox .clbi-y2k-logo a.image,
.clbi-y2k-sandbox .clbi-y2k-logo .mw-file-description {
display:inline-block;
line-height:0;
}

/* 상단 카테고리 바 */

.clbi-y2k-sandbox .clbi-y2k-nav {
display:block;
width:100%;
margin:0 0 8px;
background:var(--y2k-panel);
}

.clbi-y2k-sandbox .clbi-y2k-nav ul {
display:flex;
width:100%;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}

.clbi-y2k-sandbox .clbi-y2k-nav li {
flex:1 1 0;
margin:0 !important;
padding:0 !important;
list-style:none !important;
border-right:1px solid var(--y2k-line-bottom);
}

.clbi-y2k-sandbox .clbi-y2k-nav li:last-child {
border-right:none;
}

.clbi-y2k-sandbox .clbi-y2k-nav li::marker {
content:"";
}

.clbi-y2k-sandbox .clbi-y2k-nav a {
width:100%;
min-height:28px;
padding:7px 6px 6px;
display:flex;
align-items:center;
justify-content:center;
background:var(--y2k-panel-3);
color:var(--y2k-text) !important;
font-size:10px;
font-weight:700;
line-height:1.2;
text-align:center;
text-shadow:1px 1px 0 #000000;
text-decoration:none !important;
}

.clbi-y2k-sandbox .clbi-y2k-nav a:hover {
background:var(--y2k-title-hover);
color:#ffffff !important;
text-decoration:none !important;
}

/* 히어로 */

.clbi-y2k-sandbox .clbi-y2k-hero {
width:100%;
margin:0 0 8px;
padding:6px;
}

.clbi-y2k-sandbox .clbi-y2k-hero-top {
height:24px;
padding:0 8px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
font-size:10px;
line-height:24px;
white-space:nowrap;
overflow:hidden;
}

.clbi-y2k-sandbox .clbi-y2k-hero-top span {
overflow:hidden;
text-overflow:ellipsis;
}

.clbi-y2k-sandbox .clbi-y2k-hero-body {
display:grid;
grid-template-columns:minmax(0,1fr) 245px;
gap:6px;
margin-top:6px;
align-items:stretch;
}

.clbi-y2k-sandbox .clbi-y2k-feature,
.clbi-y2k-sandbox .clbi-y2k-sideplate {
min-width:0;
border-width:1px;
border-style:solid;
border-color:var(--y2k-line-top) var(--y2k-line-side) var(--y2k-line-bottom) var(--y2k-line-side);
background:var(--y2k-well);
}

.clbi-y2k-sandbox .clbi-y2k-feature {
min-height:235px;
padding:12px 16px;
}

.clbi-y2k-sandbox .clbi-y2k-feature h2 {
margin:0 0 10px !important;
padding:0 0 7px !important;
border-bottom:1px solid var(--y2k-line-soft) !important;
color:#f4f4f4 !important;
font-size:22px !important;
line-height:1.25 !important;
text-align:center !important;
text-shadow:1px 1px 0 #000000 !important;
}

.clbi-y2k-sandbox .clbi-y2k-feature p {
max-width:760px;
margin:0 auto 10px;
color:#d8d8d8;
font-size:12px;
line-height:1.72;
text-align:center;
text-shadow:1px 1px 0 #000000;
}

.clbi-y2k-sandbox .clbi-y2k-sideplate {
padding:8px;
}

.clbi-y2k-sandbox .clbi-y2k-plate-title {
min-height:22px;
margin:0 0 6px;
padding:5px 7px;
border-width:1px;
border-style:solid;
border-color:var(--y2k-line-top) var(--y2k-line-side) var(--y2k-line-bottom) var(--y2k-line-side);
background:var(--y2k-title);
font-size:10px;
font-weight:700;
line-height:1.2;
}

/* 작은 표 */

.clbi-y2k-sandbox .clbi-y2k-mini-table {
width:100%;
margin:0;
border-collapse:collapse;
table-layout:fixed;
font-size:10px;
}

.clbi-y2k-sandbox .clbi-y2k-mini-table td {
padding:5px 6px;
border:1px solid var(--y2k-line-soft);
background:#111111;
color:#cfcfcf;
vertical-align:middle;
}

.clbi-y2k-sandbox .clbi-y2k-mini-table td:first-child {
width:72px;
color:var(--y2k-text-dim);
background:#0b0b0b;
}

/* 티커 */

.clbi-y2k-sandbox .clbi-y2k-ticker {
height:22px;
margin:0 0 6px;
padding:0 8px;
border-width:1px;
border-style:solid;
border-color:var(--y2k-line-top) var(--y2k-line-side) var(--y2k-line-bottom) var(--y2k-line-side);
background:#171717;
color:#bdbdbd;
font-size:10px;
line-height:22px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 0 #000000;
}

/* 하단 모듈 */

.clbi-y2k-sandbox .clbi-y2k-grid {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) 260px;
gap:6px;
}

.clbi-y2k-sandbox .clbi-y2k-box {
min-width:0;
}

.clbi-y2k-sandbox .clbi-y2k-box-title {
height:24px;
padding:0 8px;
color:#f1f1f1;
font-size:10px;
font-weight:700;
line-height:24px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.clbi-y2k-sandbox .clbi-y2k-box-body {
padding:7px;
background:var(--y2k-well);
}

.clbi-y2k-sandbox .clbi-y2k-list {
margin:0 !important;
padding:0 !important;
list-style:none !important;
}

.clbi-y2k-sandbox .clbi-y2k-list li {
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
min-height:22px;
margin:0;
padding:4px 6px;
border-width:1px;
border-style:solid;
border-color:var(--y2k-line-top) var(--y2k-line-side) var(--y2k-line-bottom) var(--y2k-line-side);
background:var(--y2k-row);
color:#cfcfcf;
line-height:1.35;
}

.clbi-y2k-sandbox .clbi-y2k-list li + li {
margin-top:4px;
}

.clbi-y2k-sandbox .clbi-y2k-list li span:first-child {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.clbi-y2k-sandbox .clbi-y2k-meta {
color:var(--y2k-text-dim);
white-space:nowrap;
font-size:9px;
flex:0 0 auto;
}

/* 상태 카운터 / 방명록 */

.clbi-y2k-sandbox .clbi-y2k-status-grid {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:6px;
margin:0 0 6px;
}

.clbi-y2k-sandbox .clbi-y2k-counter {
min-width:0;
padding:6px;
border-width:1px;
border-style:solid;
border-color:var(--y2k-line-top) var(--y2k-line-side) var(--y2k-line-bottom) var(--y2k-line-side);
background:#070707;
text-align:center;
}

.clbi-y2k-sandbox .clbi-y2k-counter b {
display:block;
color:#f0f0f0;
font-family:Consolas, Monaco, monospace !important;
font-size:18px;
line-height:1.1;
text-shadow:1px 1px 0 #000000;
}

.clbi-y2k-sandbox .clbi-y2k-counter span {
display:block;
margin-top:3px;
color:var(--y2k-text-dim);
font-size:9px;
}

.clbi-y2k-sandbox .clbi-y2k-guest {
padding:6px;
border-width:1px;
border-style:solid;
border-color:var(--y2k-line-top) var(--y2k-line-side) var(--y2k-line-bottom) var(--y2k-line-side);
background:var(--y2k-row);
color:#c7c7c7;
font-size:10px;
line-height:1.45;
}

/* 반응형 */

@media screen and (max-width:1180px) {
.clbi-y2k-sandbox .clbi-y2k-nav ul {
flex-wrap:wrap;
}

.clbi-y2k-sandbox .clbi-y2k-nav li {
flex:1 1 33.333%;
border-bottom:1px solid var(--y2k-line-bottom);
}

.clbi-y2k-sandbox .clbi-y2k-hero-body {
grid-template-columns:minmax(0,1fr);
}

.clbi-y2k-sandbox .clbi-y2k-grid {
grid-template-columns:minmax(0,1fr);
}
}