미디어위키:Test.css

/* =========================================
   COASTLINE: BLACK ICE
   MediaWiki:Test.css
   Sandbox-only 2000s Industrial Archive Test
   ========================================= */

/* 
   적용 범위:
   test 문서 안의 .clbi-y2k-sandbox 내부에만 적용.
   body, page-대문, top-nav, sidebar, content-wrapper 등 전역 구조는 건드리지 않음.
*/

.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-hi: #4a4a4a;
    --y2k-line-low: #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-frame,
.clbi-y2k-logo,
.clbi-y2k-nav,
.clbi-y2k-hero,
.clbi-y2k-box {
    border-radius: 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--y2k-line-hi) var(--y2k-line-low) var(--y2k-line-low) var(--y2k-line-hi);
    background: var(--y2k-panel);
    box-shadow: none;
    outline: none;
    overflow: hidden;
}

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

/* -----------------------------------------
   로고
   ----------------------------------------- */

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

.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-nav {
    display: flex;
    width: 100%;
    margin: 0 0 8px;
    background: var(--y2k-panel);
}

.clbi-y2k-nav a {
    flex: 1 1 0;
    min-height: 28px;
    padding: 7px 6px 6px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-right: 1px solid var(--y2k-line-low);
    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;
}

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

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

/* -----------------------------------------
   히어로
   ----------------------------------------- */

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

.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-hero-top span {
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.clbi-y2k-feature,
.clbi-y2k-sideplate {
    min-width: 0;
    border: 1px solid var(--y2k-line-soft);
    background: var(--y2k-well);
}

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

.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-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-sideplate {
    padding: 8px;
}

.clbi-y2k-plate-title {
    min-height: 22px;
    margin: 0 0 6px;
    padding: 5px 7px;

    border: 1px solid var(--y2k-line-soft);
    background: var(--y2k-title);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

/* -----------------------------------------
   작은 표
   ----------------------------------------- */

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

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

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

/* -----------------------------------------
   티커
   ----------------------------------------- */

.clbi-y2k-ticker {
    height: 22px;
    margin: 0 0 6px;
    padding: 0 8px;

    border: 1px solid var(--y2k-line);
    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-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px;
    gap: 6px;
}

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

.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-box-body {
    padding: 7px;
    background: var(--y2k-well);
}

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

.clbi-y2k-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    min-height: 22px;
    margin: 0;
    padding: 4px 6px;

    border: 1px solid var(--y2k-line-soft);
    background: var(--y2k-row);
    color: #cfcfcf;
    line-height: 1.35;
}

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

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

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

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

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

.clbi-y2k-counter {
    min-width: 0;
    padding: 6px;

    border: 1px solid var(--y2k-line-soft);
    background: #070707;
    text-align: center;
}

.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-counter span {
    display: block;
    margin-top: 3px;
    color: var(--y2k-text-dim);
    font-size: 9px;
}

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

/* -----------------------------------------
   반응형
   ----------------------------------------- */

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

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

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

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